mky-vent-base/src/views/vent/monitorManager/mainFanMonitor/components/faultEchartLine.vue

<template>
  <div class="faultEchartLine">
    <div class="box-search">
      <a-date-picker v-model:value="historyParams.startTime" valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="开始时间"
        size="small" :showTime="true" style="position: absolute; z-index: 99; left: 0px; width: 170px; top: 2px"
        @change="changeStart" />
      <a-date-picker v-model:value="historyParams.endTime" valueFormat="YYYY-MM-DD HH:mm:ss" placeholder="结束时间"
        size="small" :showTime="true" style="position: absolute; z-index: 99; left: 175px; width: 170px; top: 2px"
        @change="changeEnd" />
      <a-select ref="select" v-model:value="historyParams.interval" placeholder="请选择间隔时间" size="small"
        style="position: absolute; z-index: 99; top: 2px; left: 350px; width: 150px">
        <a-select-option v-for="(item, index) in skipOption" :key="index" :value="item.value">{{ item.label
          }}</a-select-option>
      </a-select>
    </div>
    <div ref="echartline" class="echart-line"></div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { ref, reactive, onMounted, nextTick, watch } from 'vue'
import * as echarts from 'echarts';
import { listdays } from '../main.api'

let props = defineProps({
  //当前激活风机索引
  warningMonitorRowIndex: {
    type: Number
  },
  deviceId: {
    type: String
  },
  deviceType: {
    type: String
  },
  Type: {
    type: String
  },
  addData: {
    type: String
  },
  legendName: {
    type: String
  },
  echartColor: {
    type: String
  }
})

let skipOption = ref<any[]>([
  { label: '1秒', value: '1' },
  { label: '5秒', value: '2' },
  { label: '10秒', value: '3' },
  { label: '30秒', value: '4' },
  { label: '1分钟', value: '5' },
  { label: '10分钟', value: '6' },
  { label: '30分钟', value: '7' },
  { label: '1小时', value: '8' },
  { label: '1天', value: '9' },
])
let historyParams = reactive({
  skip: '8',
  startTime: dayjs().startOf('date').format('YYYY-MM-DD HH:mm:ss'),
  endTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  interval: '1h',
})
let echartline = ref(null)
let xData = ref<any[]>([])
let yData = ref<any[]>([])

function changeStart(val) {
  historyParams.startTime = val
  getData()
}
function changeEnd(val) {
  historyParams.endTime = val
  getData()
}
function getOption() {
  nextTick(() => {
    let myChart = echarts.init(echartline.value);
    let option = {
      grid: {
        top: '22%',
        left: '5%',
        bottom: '13%',
        right: '5%',
        //   containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: 'rgba(0, 0, 0, .6)',
        textStyle: {
          color: '#fff',
          fontSize: 12,
        },
      },
      legend: {
        align: 'left',
        right: 'center',
        top: '10',
        type: 'plain',
        textStyle: {
          color: '#7ec7ff',
          fontSize: 14,
        },
        // icon:'rect',
        itemGap: 25,
        itemWidth: 18,
        icon: 'path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z',
        data: [
          {
            name: props.legendName,
          },
        ],
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          axisLabel: {
            // formatter: '{value}',
            fontSize: 14,
            margin: 20,
            textStyle: {
              color: '#b3b8cc',
            },
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(48, 98, 162,.4)',
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          data: xData.value,
        },
      ],
      yAxis: [
        {
          boundaryGap: false,
          type: 'value',
          // max: props.maxY,
          // min: props.minY,
          axisLabel: {
            textStyle: {
              color: '#b3b8cc',
            },
            formatter: '{value}',
          },
          name: '',
          nameTextStyle: {
            color: '#fff',
            fontSize: 12,
            lineHeight: 10,
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(48, 98, 162,.4)',
            },
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(48, 98, 162,.4)',
            },
          },
          axisTick: {
            show: false,
          },
        },
      ],
      series: [
        {
          name: props.legendName,
          type: 'line',
          smooth: true,
          symbol: 'none',
          zlevel: 3,
          itemStyle: {
            color: props.echartColor,
            borderColor: props.echartColor,
          },
          lineStyle: {
            normal: {
              width: 2,
              color: props.echartColor,
            },
          },
          data: yData.value,
        },
      ],
    };
    myChart.setOption(option);
    window.onresize = function () {
      myChart.resize();
    };
  });
}

async function getData() {
  let res = await listdays({ ttime_begin: historyParams.startTime, ttime_end: historyParams.endTime, strtype: props.deviceType, gdeviceid: props.deviceId, skip: historyParams.skip, pageSize: 100, pageNo: 1 })
  let data = res.datalist.records
  xData.value = res.xlist
  if (props.Type == 'tempZw') {
    yData.value = props.warningMonitorRowIndex == 0 ? data.map(el => el.readData.Fan1Tempzw) : data.map(el => el.readData.Fan2Tempzw)
  } else if (props.Type == 'tempDj') {
    yData.value = props.warningMonitorRowIndex == 0 ? data.map(el => el.readData.Fan1Tempdj) : data.map(el => el.readData.Fan2Tempdj)
  } else if (props.Type == 'Dl') {
    yData.value = props.warningMonitorRowIndex == 0 ? data.map(el => el.readData.Fan1Dl) : data.map(el => el.readData.Fan2Dl)
  } else if (props.Type == 'Dy') {
    yData.value = props.warningMonitorRowIndex == 0 ? data.map(el => el.readData.Fan1Dy) : data.map(el => el.readData.Fan2Dy)
  } else if (props.Type == 'jxzd') {
    yData.value = props.warningMonitorRowIndex == 0 ? data.map(el => el.readData.Fan1Jxzd) : data.map(el => el.readData.Fan2Jxzd)
  } else if (props.Type == 'czzd') {
    yData.value = props.warningMonitorRowIndex == 0 ? data.map(el => el.readData.Fan1Czzd) : data.map(el => el.readData.Fan2Czzd)
  }
  getOption()
}

watch(() => props.addData, (newV, oldV) => {
  if (yData.value.length>=10) {
    yData.value.push(newV)
    yData.value.shift()
  } else {
    yData.value.push(newV)
  }
  getOption()
}, { immediate: true })
onMounted(() => {
  getData()
})

</script>

<style lang="less" scoped>
@import '/@/design/theme.less';

.faultEchartLine {
  position: relative;
  width: 100%;
  height: 100%;
}

.box-search {
  width: 100%;
  height: 30px;
}

.echart-line {
  width: 100%;
  height: calc(100% - 30px);
}

.@{ventSpace}-picker {
  background: #00000017 !important;
  border: 1px solid @vent-form-item-border !important;

  input,
  .@{ventSpace}-select-selection-item,
  .@{ventSpace}-picker-suffix {
    color: #fff !important;
  }

  .@{ventSpace}-select-selection-placeholder {
    color: #b7b7b7 !important;
  }
}

.@{ventSpace}-picker-separator {
  color: #fff !important;
}

:deep(.@{ventSpace}-select-dropdown) {
  color: #000 !important;

  .@{ventSpace}-select-item {
    color: #000 !important;
  }
}

:deep(.@{ventSpace}-picker-input > input) {
  color: #fff !important;
}

:deep(.@{ventSpace}-picker-suffix) {
  color: #fff !important;
}

:deep(.@{ventSpace}-select-selector) {
  color: #fff !important;
  background: #00000017 !important;
  border: 1px solid @vent-form-item-border !important;
}

:deep(.@{ventSpace}-select-arrow) {
  color: #fff !important;
}
</style>