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

<template>
  <el-dialog
    :title="dialogTitle"
    v-model="dialogVisible"
    width="800px"
    @close="closeDialog()"
  >
    <div style="width: 100%">
       <inner-line-chart2 v-if="type=='elBalun'||type=='vtBalun'||type=='iaLoad'||type=='ibLoad'||type=='icLoad'"></inner-line-chart2>
      <inner-line-chart></inner-line-chart>
     
    </div>
  </el-dialog>
</template>

<script>
import { useStore } from 'vuex'
import { defineComponent, ref, watchEffect, onMounted, watch } from 'vue'
import innerLineChart from './innerLineChart'
import innerLineChart2 from './innerLineChart2'

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

    const getData = async () => {
      type.value = store.state.chartType
    }

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

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

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

    //监听变化
    watch(
      () => store.state.chartType,
      (newVal, oldVal, clear) => {
        // 执行异步任务，并得到关闭异步任务的 id

        let id = writeValue(newVal, oldVal)
        // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
        clear(() => clearTimeout(id))
      },
      { lazy: true }
    )

    onMounted(() => {})

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