slibra-module-web/src/views/control/components/TheEchartPanel.vue

<script setup>
import { ref, computed, onMounted, watch, onUnmounted } from 'vue';
import { NSpin, NSelect, NDatePicker, useMessage } from "naive-ui";
import * as echarts from 'echarts';
import { startOfDay } from "date-fns/esm"
import { controlApi } from "@/api/control"
import dayjs from 'dayjs';
const props = defineProps(['htfksdOne','htfksdTwo']);
const isDomSizeChange = defineModel('change');

const message = useMessage();

let echart = null;
let tempTabItemOneKey = 0;
let tempTabItemTwoKey = 'jzxsOne';

const currentDay = dayjs().format('YYYY-MM-DD');
const yesterday = dayjs().subtract(1, 'day').format('YYYY-MM-DD');

const datePickerValue = ref([yesterday, currentDay]);
const dateRangeRef = ref(null);
const selectValue = ref(['0']);
const coefficientDataSource = ref([]);
const echartDataSource = ref({});
const echartRef = ref(null);
const activeIndex = ref(0);
const show = ref(true);

const tabList = ['水质', '系数'];

const selectOptions = ref([]);

let selectEnum = new Map([
  ['0', '进水流量'],
  ['1',  '北池-好氧池硝酸盐'],
  ['2',  '南池-好氧池硝酸盐'],
  ['22', '北池-后反馈设定'],
  ['23', '南池-后反馈设定'],
  ['12', '北池-缺氧硝酸盐'],
  ['13', '南池-缺氧硝酸盐'],
  ['3',  '北池-缺氧池氨氮'],
  ['4',  '南池-缺氧池氨氮'],
  ['5',  '进水COD-连续检测'],
  ['6',  '进水COD-在线仪表'],
  ['7',  '进水总氮'],
  ['8',  '碳源投加量-北池-计算投药量'],
  ['9',  '碳源投加量-南池-计算投药量'],
  ['10', '碳源投加量-北池-反馈流量'],
  ['11', '碳源投加量-南池-反馈流量'],
])

let echartOptions = [
  { label: "进水流量", value: 0, style: "font-size: 12px" },
  { label: "#1好氧池硝酸盐", value: 1, style: "font-size: 12px" },
  { label: "#2好氧池硝酸盐", value: 2, style: "font-size: 12px" },
  { label: "#1缺氧池氨氮", value: 3, style: "font-size: 12px" },
  { label: "#2缺氧池氨氮", value: 4, style: "font-size: 12px" },
  { label: "进水COD", value: 5, style: "font-size: 12px" },
  { label: "进水总氮", value: 6, style: "font-size: 12px" },
  { label: "碳源投加量", value: 7, style: "font-size: 12px" }
]

const coefficientOptions = [
  { label: "基准系数", value: 'jzxsOne', style: "font-size: 12px" },
  { label: "修正系数", value: 'xzxsOne', style: "font-size: 12px" },
  { label: "水量分配系数", value: 'slfpxsOne', style: "font-size: 12px" },
  { label: "碳源当量", value: 'tydlOne', style: "font-size: 12px" },
  { label: "转换系数", value: 'zhxsOne', style: "font-size: 12px" },
  { label: "稀释倍数", value: 'sxpsOne', style: "font-size: 12px" },
  { label: "密度", value: 'yymdOne', style: "font-size: 12px" },
]

const selectThemeOverrides = {
  peers: {
    InternalSelection: {
      borderRadius: '4px'
    }
  },
}

const seriesName = computed(() => {
  let name = '';
  if ( activeIndex.value === 0) {
    name = echartOptions.find(({ value }) => selectValue.value === value).label
  } else {
    name = coefficientOptions.find(item => item.value === selectValue.value).label
  }
  return name
})

// 切换tab选项
const handleSwitchTab = (index) => {
  if ( activeIndex.value === index ) return;
  activeIndex.value = index;
  if ( !index ) {
    // echart
    tempTabItemTwoKey = selectValue.value;
    selectValue.value = tempTabItemOneKey;
    selectOptions.value = echartOptions;
    datePickerValue.value = null;
    initWaterEchart();
  } else {
     // 系数
    tempTabItemOneKey = selectValue.value;
    selectValue.value = tempTabItemTwoKey;
    selectOptions.value = coefficientOptions;
    datePickerValue.value = null;
    intiCoefficientEchartData();
  }
}

// select option change
const handleSelectOptions = (selectOptionList) => {
  let tempArr = selectOptionList;
  if ( activeIndex.value === 0 ) {
    if ( selectOptionList.length <= 1 && selectOptionList.every(item => item > 11) ) {
      const [item] = selectOptionList;
      if ( (item == 22 || item == 23) || (!item && item != 0) ) {
        selectOptions.value.forEach(item => {
          if ( item.value == 22 || item.value == 23 ) {
            item.disabled = true;
          }
        });
        tempArr = [];
      }
    } else {
      selectOptions.value.forEach(item => {
        if ( item.value == 22 || item.value == 23 ) {
          item.disabled = false;
        }
      });
    }
    
    if ( selectOptionList.length > 3 ) {
      selectValue.value = tempArr.slice(0, -1);
      return message.warning("数据看板最大选择项为3个")
    }
    
    localStorage.setItem('selectValue', JSON.stringify(tempArr));
  }

  selectValue.value = tempArr;

  activeIndex.value === 0 ? initWaterEchart() : intiCoefficientEchartData();
}

const initWaterEchart = async () => {
  
  const tempArr = [];
  
  const tempResult = selectValue.value.map(key => {
    if (key == 22 || key == 23) return null;
    const data = echartDataSource.value[key] || [];

    tempArr.push(data);
    return ({
      name: selectEnum.get(key),
      data
    });
  }).filter(Boolean);

  const xAxis = tempArr.flat(Infinity).reduce((acc, curr) => {
    if (!acc.some(item => item.time === curr.time)) {
      acc.push(curr);
    }
    return acc;
  }, []).filter(Boolean).map(item => item.time.trim()).sort((a, b) => dayjs(a).valueOf() - dayjs(b).valueOf());

  const options = getWaterEchartOptions({ data: tempResult, xAxis });

  echart.setOption(options, true);

}

const windowResize = () => echart.resize();

const getWaterEchartOptions = ({ data, xAxis = [] }) => {
  
  const series = data.map(item => {
    const d1 = item.data.map(item => {
      return [
        item.time.trim(),
        item.val ? item.val.toFixed(2) : 0
      ]
    });

    return {
        name: item.name,
        showSymbol: false,
        smooth: true,
        type: 'line',
        symbolSize: 10,
        data: d1,
      }
  })

  if ( selectValue.value.includes('22') ) {
    const data = xAxis.map(time => [time, props.htfksdOne]);
    series.push({
      name: '北池-后反馈设定',
      showSymbol: false,
      smooth: true,
      type: 'line',
      symbolSize: 10,
      lineStyle: {
        color: 'red'
      },
      itemStyle: {
        color: 'red'
      },
      data
    });
  }

  if (selectValue.value.includes('13')) {
    const data = xAxis.map(time => [time, props.htfksdTwo]);
    series.push({
      name: '南池-后反馈设定',
      showSymbol: false,
      smooth: true,
      type: 'line',
      symbolSize: 10,
      lineStyle: {
        color: 'red'
      },
      itemStyle: {
        color: 'red'
      },
      data
    });
  }

  const option = {
    backgroundColor: '#FFF',
    legend: {
      x: 'center',
      y: 'top',
      show: true,
      left: '10px',
      top: '16px',
      itemWidth: 6,
      itemGap: 20,
      textStyle: {
        color: '#556677',
      },
      // data: ['直接登录平台', '扫码登录平台', '总'],
    },
    title: {
      show: !xAxis.length,
      text: '暂无数据',
      x: 'center',
      y: 'center',
      textStyle: {
        fontSize: 14,
        fontWeight: 'normal',
      }
    },
    grid: {
      top: '60px',
      bottom: '50px',
      left: '5%',
      right: '5%',
    },
    tooltip: {
      trigger: 'axis',
      label: {
        show: true
      },
    },
    xAxis: {
      type: 'time',
      boundaryGap: ['5%', '5%'],
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false,
        // alignWithLabel: true
      },
      axisLabel: {
        // margin: 10,
        // showMaxLabel: true,
        // rotate: 1,
        formatter: function (value) {
          return dayjs(value).format('YYYY/MM/DD')
        }
      },
      // data: xAxis
    },
    yAxis: {
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#E5E5E5'
        }
      },
      axisTick: {
        show: false
      },
      splitArea: {
        show: false,
        color: '#fff'
      },
      axisLabel: {
        formatter: function (value) {
          return value.toFixed(0)
        }
      }
    },
    series
  };
  return option;
}

const getEchartOptions = (data) => {
  const option = {
    backgroundColor: '#FFF',
    title: {
      show: !data.length,
      text: '暂无数据',
      x: 'center',
      y: 'center',
      textStyle: {
        fontSize: 14,
        fontWeight: 'normal',
      }
    },
    grid: {
      top: '40px',
      bottom: '50px',
      left: '5%',
      right: '5%',
    },
    tooltip: {
      trigger: 'axis',
      label: {
        show: true
      },
    },
    xAxis: {
      boundaryGap: false,
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisTick: {
        show: false,
        alignWithLabel: true
      },
      axisLabel: {
        formatter: function (value) {
          return dayjs(value).format('YYYY/MM/DD')
        }
      },
      data: data.map(({ time }) => time)
    },
    yAxis: {
      axisLine: {
        show: false
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#E5E5E5'
        }
      },
      axisTick: {
        show: false
      },
      splitArea: {
        show: false,
        color: '#fff'
      }
    },
    series: [
      {
        name: seriesName.value,
        showSymbol: false,
        smooth: true,
        type: 'line',
        symbolSize: 10,
        lineStyle: {
          color: '#17a6fa',
          shadowBlur: 12,
          shadowColor: 'rgba(0, 0, 0, 0.12)',
          shadowOffsetX: 0,
          shadowOffsetY: 4,
          width: 2,
        },
        itemStyle: {
          color: '#4080FF',
          borderWidth: 3,
          borderColor: '#4080FF'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(0, 136, 212, 0.2)'
          }, {
            offset: 1,
            color: 'rgba(0, 136, 212, 0)'
          }], false),
        },
        data: data.map(({ val }) => val)
      }
    ]
  };
  return option;
}

// 水务相关数据格式化
const initWaterEchartData = async () => {
  show.value = true;
  const [tBegin, tEnd] = datePickerValue.value || [];
  const timeBegin = tBegin ? dayjs(tBegin).format('YYYY-MM-DD') : null;
  const timeEnd = tEnd ? dayjs(tEnd).format('YYYY-MM-DD') : null;
  const { data } = await controlApi.getAllEchartData({ timeBegin, timeEnd });
  
  show.value = false;
  echartDataSource.value = data;
  
  initWaterEchart();
}

// 系数相关数据
const intiCoefficientEchartData = async () => {
  show.value = true;
  const [timeBegin, timeEnd] = datePickerValue.value || [];
  const { data } = await controlApi.getBoardEchartList({ timeBegin, timeEnd });
  coefficientDataSource.value = data;
  
  const d = data.map(item => ({
    time: dayjs(item.createTime).format('YYYY/MM/DD HH'),
    val: item[selectValue.value]
  }));
  show.value = false;
  echart.setOption(getEchartOptions(d), true);
}

// 日期范围限制
const isRangeDateDisabled = (ts, type, range) => {
  const d = 864e5;
  if (type === "start" && range !== null) {
    return startOfDay(range[1]).valueOf() - startOfDay(ts).valueOf() >= d * 10;
  }
  if (type === "end" && range !== null) {
    return startOfDay(ts).valueOf() - startOfDay(range[0]).valueOf() >= d * 10;
  }
  return false;
}

const onDatePickerConfirm = (ts) => {
  datePickerValue.value = ts.map(t => dayjs(t).format('YYYY-MM-DD'));
  activeIndex.value === 0 ? initWaterEchartData() : intiCoefficientEchartData();
}

const onDatePickerClear = () => {
  datePickerValue.value = null;
  activeIndex.value === 0 ? initWaterEchartData() : intiCoefficientEchartData();
}

watch(() => isDomSizeChange.value, (val) => {
  setTimeout(() => windowResize(), 200)
});

onMounted(async () => {
  
  const localCacheSelectVal = localStorage.getItem('selectValue');
 
  let tempArr = [];
  selectEnum.forEach(function(value, key) {
    tempArr.push({ label: value, value: key, style: "font-size: 12px"});
  })
  
  echartOptions = tempArr;

  selectValue.value = localCacheSelectVal ? JSON.parse(localCacheSelectVal) : ["0"]

  selectOptions.value = echartOptions;

  echart = echarts.init(document.querySelector('#echartRef'), 'light');
  setTimeout(async () => {
    await initWaterEchartData();
  })

  window.addEventListener("resize", windowResize);

})

onUnmounted(() => {
  window.removeEventListener("resize", windowResize);
  echart && echart.dispose();
})

</script>

<template>
  <div class="echart-card_view">
    <div class="title">
      <div class="left-inner">
        <span class="text">数据看板</span>
      </div>
      <div class="right-inner">
        <ul class="custom-radio-group">
          <li :class="{ active: activeIndex === index }" v-for="item, index in tabList" :key="item"
            @click="handleSwitchTab(index)">{{ item }}</li>
        </ul>
      </div>
    </div>

    <div class="select-wrapper">
      <NDatePicker
        clearable
        class="w-[300px] flex-shrink-0"
        size="small"
        type="daterange"
        ref="dateRangeRef"
        :is-date-disabled="isRangeDateDisabled"
        :on-confirm="onDatePickerConfirm"
        :on-clear="onDatePickerClear"
        v-model:formatted-value="datePickerValue"
      ></NDatePicker>
      <NSelect
        class="w-[340px]"
        :multiple="activeIndex != 1"
        :options="selectOptions"
        :value="selectValue"
        :on-update:value="handleSelectOptions"
        :theme-overrides="selectThemeOverrides"
        size="small"
        max-tag-count="responsive"
      />
    </div>
    <div class="echart-wrapper">
      <div class="echart w-full h-full" ref="echartRef" id="echartRef" :style="{ zIndex: show ? 0 : 100 }"></div>
      <n-spin :show="show" class="h-full w-full" :style="{position: 'absolute', top: '0%', left: '0%', zIndex: show ? 100 : 0}">
        <span></span>
      </n-spin>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.echart-card_view {
  flex: 1;
  display: flex;
  flex-flow: column;
  // height: calc(100% - 284px);
  padding: 0px 16px 0 25px;
  border-radius: 10px;

  .title {
    flex-shrink: 0;
    @include flex(x, center, between);
    padding-bottom: 16px;

    .left-inner {
      @include flex(x, center, start);

      .text {
        color: #1A2029;
        font-size: 15px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px;
      }

      .tabs {
        width: 240px;
        margin-left: 16px;
      }
    }

    .right-inner {
      @include flex(x, center, start);

      .custom-radio-group {
        @include flex(x, center, center);
        width: 104px;
        height: 24px;
        border-radius: 4px;
        border: 1px solid #D3D7DD;

        li {
          width: 50%;
          font-size: 12px;
          text-align: center;
          line-height: 24px;
          color: #333;
          cursor: pointer;

          &:nth-child(1) {
            border-right: 1px solid #D3D7DD;
          }
        }

        li.active {
          color: #2454FF;
        }
      }
    }
  }

  .select-wrapper {
    @include flex(x, center, between);
    height: 32px;
  }

  .echart-wrapper {
    position: relative;
    height: calc(100% - 72px);
    .echart {
      position: relative;
      z-index: 10;
    }
    .echart,
    .empty {
      width: 100%;
      height: 100%;
    }

    .empty {
      @include flex(x, center, center);
    }
  }
}
</style>

<style lang="scss">
.echart-card_view {
  .tabs {
    .n-tabs-tab--active {
      .n-tabs-tab__label {
        color: #2454FF;
      }
    }

    .n-tabs-tab__label {
      font-size: 12px;
      color: #333333;
    }
  }

  // .n-base-selection .n-base-selection-label .n-base-selection-input {
  //   font-size: 12px;
  //   color: #333333 !important;
  // }

  // .right-inner {
  //   .n-base-selection__border {
  //     border: 0;
  //   }

  //   .n-base-selection-label {
  //     border: 0;
  //     border-radius: 0;
  //     background: #F2F3F5 !important;
  //   }

  //   .n-base-selection__state-border,
  //   .n-base-selection__border {
  //     border: 0 !important;
  //   }

  //   .n-base-selection .n-base-selection__border,
  //   .n-base-selection .n-base-selection__state-border {
  //     box-shadow: none;
  //   }

  //   .n-base-suffix__arrow {
  //     color: #4E5969;
  //   }
  // }

  .n-input--pair {
    background: #f0f1f3 !important;
  }

  // .n-base-selection-input__content {
  //   font-size: 12px;
  // }

  // .n-base-selection {
  //   background: #f0f1f3 !important;
  // }

  // .n-base-selection-label {
  //   background: #f0f1f3;
  //   border-radius: 3px;
  // }

  // .n-base-selection__border,
  // .n-base-selection__state-border {
  //   display: none !important;
  // }

  // .n-date-picker {
  //   .n-input__input-el,
  //   .n-input__placeholder {
  //     font-size: 12px !important;
  //   }
  // }

  // .n-base-selection:not(.n-base-selection--disabled).n-base-selection--active .n-base-selection-label {
  //   background: #f0f1f3 !important;
  // }
}

</style>