admin-fiveFollowing/src/views/powerQuality/realTimeMonitoring/realScoreComponent/dialogChartOne-old.vue

<template>
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    width="800px"
    @close="closeDialog()"
    @open="open"
  >
    <div style="width: 100%; height: 400px">
      <div shadow="never" class="homeBoxCard" v-loading="loading">
        <div
          style="height: 400px"
          ref="lineChartBanlance"
          id="lineChartBanlance"
        />
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { defineComponent, ref, watchEffect, onMounted, watch } from 'vue'
import * as echarts from 'echarts'

export default defineComponent({
  name: 'DialogChartOne',
  components: {
  },
  emits: ['closeDialog'],
  props: {
    flag: Boolean,
    dialogTitle: String,
    itemInfo: Object,
    echartsAllData: Array,
    echartsTitle: String,
  },
  setup(props, context) {
    context
    const dialogVisible = ref(false)
    const dataList = ref([])
    const dataTimes = ref([])

    const getData = async () => {
      var arrOld = props.echartsAllData
      let dataTime = arrOld.map((item) => {
        return item.dataTime
      })
      let cos = arrOld.map((item) => {
        return item.cos
      })
      let ua = arrOld.map((item) => {
        return item.ua
      })
      let ub = arrOld.map((item) => {
        return item.ub
      })
      let uc = arrOld.map((item) => {
        return item.uc
      })
      dataTimes.value = dataTime;
      switch (props.echartsTitle) {
        case '功率因数':
          dataList.value = cos
          break
        case 'A相电压':
          dataList.value = ua
          break
        case 'B相电压':
          dataList.value = ub
          break
        case 'C相电压':
          dataList.value = uc
          break
        default:
      }
    }

    function echarts2() {
      // 新建一个promise对象
      let newPromise = new Promise((resolve) => {
        resolve()
      })
      //然后异步执行echarts的初始化函数
      newPromise.then(() => {
        //	此dom为echarts图标展示dom
        let myChart = echarts.init(document.getElementById('lineChartBanlance'))
        myChart.setOption({
          color: ['#1187FF'],
          legend: {
            top: '0',
            // data: ['电流不平衡度'],
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'cross' },
          },
          grid: {
            left: '20',
            right: '40',
            top: '40',
            bottom: '30',
            containLabel: true,
          },
          xAxis: {
            axisLabel: {
              color: '#444',
              fontSize: 14,
            },
            /*改变xy轴颜色*/
            axisLine: {
              lineStyle: {
                color: '#444',
                width: 1, //这里是为了突出显示加上的
              },
            },
            boundaryGap: false,
            data: dataTimes.value,
          },
          yAxis: {
            name: '%',
            nameTextStyle: {
              color: 'black',
              fontSize: 10,
            },
            type: 'value',
            axisTick: {
              show: true, //去除刻度线
            },
            axisLabel: {
              color: 'black', // 文本颜色
            },
            axisLine: {
              show: true, // 去除轴线
              lineStyle: {
                color: 'black',
              },
            },
            splitNumber: 5,
            splitLine: {
              show: true,
              lineStyle: {
                color: '#9d9d9d',
              },
            },
          },

          series: [
            {
              name: props.echartsTitle + '实时数据',
              type: 'line',
              symbolSize: 7,
              smooth: false,
              data: dataList.value,
              markLine: {
                //最大值和最小值
                // data: [
                //   {
                //     yAxis: 30,
                //     label: {
                //       position: 'middle',
                //       formatter: '严重三项不平衡',
                //     },
                //     lineStyle: {
                //       width: 2,
                //       color: '#FF5D1D',
                //     },
                //   },
                //   {
                //     yAxis: 14,
                //     label: {
                //       position: 'middle',
                //       formatter: '不平衡度',
                //     },
                //     lineStyle: {
                //       width: 2,
                //       color: '#f2e251',
                //     },
                //   },
                // ],
              },
            },
          ],
        })
        window.addEventListener('resize', () => {
          myChart.resize()
        })
      })
    }

    // 关闭弹框
    const closeDialog = () => {
      context.emit('closeDialog', false)
      dialogVisible.value = false
    }

    watchEffect((fn) => {
      fn
      dialogVisible.value = props.flag
    })

    const writeValue = (val) => {
      val
      getData()
      echarts2()
    }

    //监听变化
    watch(
      () => props.echartsAllData,
      (newVal, oldVal, clear) => {
        // 执行异步任务，并得到关闭异步任务的 id
        // console.log(newVal)
        let id = writeValue(newVal, oldVal)
        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
        clear(() => clearTimeout(id))
      },
      { lazy: true }
    )

    onMounted(() => {})

    return {
      closeDialog,
      dialogVisible,
      echarts2,
    }
  },
})
</script>
 
<style scoped lang="scss">
</style>