|
@@ -0,0 +1,232 @@
|
|
|
+<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>
|