From fbe6d6fae18dad5d97cde5c5f4f9bf689a81483a Mon Sep 17 00:00:00 2001
From: zhujiyan <17812234322@163.com>
Date: Wed, 3 Jul 2024 19:31:43 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E6=95=B0=E6=8D=AE=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=BB=98=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/tree/device.vue                |    4 +-
 src/components/tree/govern/deviceInfoTree.vue |    9 +-
 src/components/tree/index.vue                 |    8 +-
 src/components/tree/point.vue                 |    2 +
 src/views/govern/device/control/index.vue     |  110 +-
 .../control/tabs/components/tableInfo.vue     |  146 ++
 .../govern/device/control/tabs/event.vue      |   19 +
 .../govern/device/control/tabs/realtime.vue   | 1271 +++++++++++++++++
 .../govern/device/control/tabs/trend.vue      |   13 +
 9 files changed, 1556 insertions(+), 26 deletions(-)
 create mode 100644 src/views/govern/device/control/tabs/components/tableInfo.vue
 create mode 100644 src/views/govern/device/control/tabs/event.vue
 create mode 100644 src/views/govern/device/control/tabs/realtime.vue
 create mode 100644 src/views/govern/device/control/tabs/trend.vue

diff --git a/src/components/tree/device.vue b/src/components/tree/device.vue
index d09a619..3948b2e 100644
--- a/src/components/tree/device.vue
+++ b/src/components/tree/device.vue
@@ -34,6 +34,7 @@
             <el-collapse accordion v-model="activeName" style="flex: 1; overflow: auto" @change="changeDevice">
                 <el-collapse-item title="治理设备" :name="0">
                     <el-tree
+                        style="min-height: calc(100vh - 250px)"
                         ref="treeRef1"
                         :props="defaultProps"
                         highlight-current
@@ -58,6 +59,7 @@
                 </el-collapse-item>
                 <el-collapse-item title="便携式设备" :name="1">
                     <el-tree
+                        style="min-height: calc(100vh - 250px)"
                         ref="treeRef2"
                         :props="defaultProps"
                         highlight-current
@@ -170,7 +172,7 @@ const changeDevice = (val: any) => {
     let arr2: any = []
     bxsDeviceData.value.forEach((item: any) => {
         // item.children.forEach((item2: any) => {
-            arr2.push(item)
+        arr2.push(item)
         // })
     })
     if (val == 0) {
diff --git a/src/components/tree/govern/deviceInfoTree.vue b/src/components/tree/govern/deviceInfoTree.vue
index 64afbc5..52348ca 100644
--- a/src/components/tree/govern/deviceInfoTree.vue
+++ b/src/components/tree/govern/deviceInfoTree.vue
@@ -1,7 +1,7 @@
 <template>
     <Tree
         ref="treRef"
-        @check-change="handleCheckChange"
+        @checkTreeNodeChange="handleCheckChange"
         :default-checked-keys="defaultCheckedKeys"
         :show-checkbox="props.showCheckbox"
         :data="tree"
@@ -96,11 +96,10 @@ const getTreeList = (list:any) => {
         }
     })
 }
-const handleCheckChange = (data: any, checked: any, indeterminate: any) => {
+//接收tree选择的数据后传递给父级组件
+const handleCheckChange = (data: any) => {
     emit('checkChange', {
-        data,
-        checked,
-        indeterminate
+        data
     })
 }
 defineExpose({getTreeList})
diff --git a/src/components/tree/index.vue b/src/components/tree/index.vue
index e7141ff..e257005 100644
--- a/src/components/tree/index.vue
+++ b/src/components/tree/index.vue
@@ -31,7 +31,7 @@
                 ref='treeRef'
                 :props='defaultProps'
                 highlight-current
-               
+               @check-change="checkTreeNodeChange"
                 :filter-node-method='filterNode'
                 node-key='id'
                 v-bind='$attrs'
@@ -55,6 +55,7 @@
 <script lang='ts' setup>
 import useCurrentInstance from '@/utils/useCurrentInstance'
 import { ElTree } from 'element-plus'
+import { emit } from 'process';
 import { ref, watch } from 'vue'
 
 defineOptions({
@@ -77,6 +78,7 @@ const defaultProps = {
     label: 'name',
     value: 'id'
 }
+const emit = defineEmits(['checkTreeNodeChange'])
 watch(filterText, val => {
     treeRef.value!.filter(val)
 })
@@ -88,6 +90,10 @@ const filterNode = (value: string, data: any) => {
     if (!value) return true
     return data.name.includes(value)
 }
+const checkTreeNodeChange=()=>{
+   console.log( treeRef.value?.getCheckedNodes(),"ikkkkkiisiiisis");
+   emit('checkTreeNodeChange',treeRef.value?.getCheckedNodes())
+}
 const treeRef = ref<InstanceType<typeof ElTree>>()
 defineExpose({ treeRef })
 </script>
diff --git a/src/components/tree/point.vue b/src/components/tree/point.vue
index 95e9872..ef1f6d7 100644
--- a/src/components/tree/point.vue
+++ b/src/components/tree/point.vue
@@ -34,6 +34,7 @@
             <el-collapse accordion v-model="activeName" style="flex: 1; overflow: auto" @change="changeDevice">
                 <el-collapse-item title="治理设备" :name="0">
                     <el-tree
+                    style="min-height: calc(100vh - 250px)"
                         ref="treeRef1"
                         :props="defaultProps"
                         highlight-current
@@ -58,6 +59,7 @@
                 </el-collapse-item>
                 <el-collapse-item title="便携式设备" :name="1">
                     <el-tree
+                    style="min-height: calc(100vh - 250px)"
                         ref="treeRef2"
                         :props="defaultProps"
                         highlight-current
diff --git a/src/views/govern/device/control/index.vue b/src/views/govern/device/control/index.vue
index a59161d..1abce44 100644
--- a/src/views/govern/device/control/index.vue
+++ b/src/views/govern/device/control/index.vue
@@ -37,7 +37,15 @@
                     v-for="(item, index) in deviceData.dataSetList"
                     :key="index"
                 ></el-tab-pane>
-                <el-form :inline="true" style="white-space: nowrap; margin-top: 10px">
+                <el-form
+                    :inline="true"
+                    style="white-space: nowrap; margin-top: 10px"
+                    v-if="
+                        dataSet.indexOf('_trenddata') == -1 &&
+                        dataSet.indexOf('_realtimedata') == -1 &&
+                        dataSet.indexOf('_event') == -1
+                    "
+                >
                     <el-form-item label="指标">
                         <el-input
                             v-model="formInline.searchValue"
@@ -46,7 +54,7 @@
                             placeholder="请输入关键词"
                         ></el-input>
                     </el-form-item>
-                    <el-form-item label="日期" v-if="dataSet.indexOf('_history') > -1">
+                    <el-form-item label="日期" v-if="dataSet.indexOf('_history') != -1">
                         <DatePicker ref="datePickerRef"></DatePicker>
                     </el-form-item>
                     <el-form-item>
@@ -57,17 +65,14 @@
                     style="overflow: auto"
                     :style="{ height: tableHeight }"
                     v-loading="tableLoading"
-                    v-if="dataSet.length > 1"
+                    v-if="
+                        dataSet.indexOf('_trenddata') == -1 &&
+                        dataSet.indexOf('_realtimedata') == -1 &&
+                        dataSet.indexOf('_event') == -1
+                    "
                 >
-                    <!-- 卡片 -->
-                    <div
-                        class="content"
-                        v-if="
-                            dataSet.indexOf('_trenddata') == -1 &&
-                            dataSet.indexOf('_realtimedata') == -1 &&
-                            dataSet.indexOf('_event') == -1
-                        "
-                    >
+                    <!-- 循环渲染的card 最新数据/历史数据显示 -->
+                    <div class="content">
                         <el-card class="box-card" v-for="(item, index) in tableData" :key="index">
                             <template #header>
                                 <div class="clearfix">
@@ -153,6 +158,22 @@
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="formInline.total"
                 ></el-pagination>
+
+                <!-- 趋势数据 -->
+                <div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_trenddata') != -1">
+                    趋势数据
+                    <Trend></Trend>
+                </div>
+                <!-- 实时数据 -->
+                <div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_realtimedata') != -1">
+                    实时数据
+                    <RealTime></RealTime>
+                </div>
+                <!-- 暂态事件 -->
+                <div style="height: calc(100vh - 200px)" v-if="dataSet.indexOf('_event') != -1">
+                    暂态事件
+                    <Event></Event>
+                </div>
                 <div v-if="!tableData" style="height: 42px"></div>
                 <!-- <el-tab-pane lazy label="趋势数据" name="0">
                     <div  style="height:calc(100vh - 330px);overflow: auto;border:1px solid red;"></div>
@@ -178,10 +199,14 @@ import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictT
 import { getDeviceData } from '@/api/cs-device-boot/EquipmentDelivery'
 import { deviceHisData, deviceRtData } from '@/api/cs-device-boot/csGroup'
 import { getGroup } from '@/api/cs-device-boot/csGroup'
-import { ref, reactive, nextTick } from 'vue'
+import { ref, reactive, nextTick, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import DatePicker from '@/components/form/datePicker/index.vue'
-
+import Trend from './tabs/trend.vue'
+import RealTime from './tabs/realtime.vue'
+import Event from './tabs/event.vue'
+import { defineConfig, loadEnv } from 'vite'
+import type { UserConfig, ConfigEnv } from 'vite'
 defineOptions({
     name: 'govern/device/control'
 })
@@ -208,6 +233,43 @@ const formInline = reactive({
     lineId: ''
 })
 const detail = ref<any>(null)
+// WebSocket
+const socket: any = ref(null)
+const url = 'wss://your-websocket-url'
+//连接websocket
+const connectWebSocket = () => {
+    socket.value = new WebSocket(url)
+    socket.value.onopen = () => {
+        console.log('WebSocket connected')
+        socket.value.isConnected = true
+    }
+
+    socket.value.onerror = (error: any) => {
+        console.error('WebSocket error:', error)
+    }
+
+    socket.value.onmessage = (message: any) => {
+        console.log('Received message:', message.data)
+    }
+
+    socket.value.onclose = () => {
+        console.log('WebSocket disconnected')
+        socket.value.isConnected = false
+    }
+}
+//建立连接发送消息
+const sendMessage = () => {
+    if (socket.value.isConnected) {
+        socket.value.send('Your message here')
+    }
+}
+//关闭websocket
+const disconnectWebSocket = () => {
+    if (socket.value.isConnected) {
+        socket.value.close()
+    }
+}
+
 const getDeviceDataTrend = (e: any) => {
     detail.value = {
         lineId: formInline.lineId,
@@ -223,6 +285,7 @@ const handleSizeChange = (val: number) => {
     formInline.pageSize = val
     handleClick()
 }
+//树节点点击事件
 const nodeClick = async (e: anyObj) => {
     if (!e) {
         loading.value = false
@@ -241,15 +304,19 @@ const nodeClick = async (e: anyObj) => {
             } else {
                 res.data.dataSetList.forEach((item: any) => {
                     console.log(item.type, '777777777')
+                    //历史
                     if (item.type === 'history') {
                         item.id = item.id + '_history'
                     }
+                    //趋势数据
                     if (item.type === 'trenddata') {
                         item.id = item.id + '_trenddata'
                     }
+                    //实时数据
                     if (item.type === 'realtimedata') {
                         item.id = item.id + '_realtimedata'
                     }
+                    //暂态事件
                     if (item.type === 'event') {
                         item.id = item.id + '_event'
                     }
@@ -263,6 +330,7 @@ const nodeClick = async (e: anyObj) => {
         loading.value = false
     }
 }
+//tab点击事件
 const handleClick = async (tab?: any) => {
     tableLoading.value = true
     if (tab) {
@@ -271,7 +339,7 @@ const handleClick = async (tab?: any) => {
     }
     // setTimeout(() => {
     //查询历史模块数据
-    if (dataSet.value.indexOf('_history') > -1) {
+    if (dataSet.value.indexOf('_history') != -1) {
         console.log('_history')
         formInline.startTime = datePickerRef.value.timeValue[0]
         formInline.endTime = datePickerRef.value.timeValue[1]
@@ -284,15 +352,16 @@ const handleClick = async (tab?: any) => {
         })
     }
     //查询数据趋势数据
-    if (dataSet.value.indexOf('_trenddata') > -1) {
+    console.log(dataSet.value.indexOf('_trenddata'), '-------')
+    if (dataSet.value.indexOf('_trenddata') != -1) {
         console.log('_trenddata')
     }
     //查询实时数据
-    if (dataSet.value.indexOf('_realtimedata') > -1) {
+    if (dataSet.value.indexOf('_realtimedata') != -1) {
         console.log('_realtimedata')
     }
-    //查询暂事件
-    if (dataSet.value.indexOf('_event') > -1) {
+    //查询暂态事件
+    if (dataSet.value.indexOf('_event') != -1) {
         console.log('_event')
     } else {
         formInline.id = dataSet.value
@@ -352,6 +421,9 @@ const openGroup = () => {
         })
     })
 }
+onMounted(() => {
+    connectWebSocket()
+})
 </script>
 
 <style lang="scss">
diff --git a/src/views/govern/device/control/tabs/components/tableInfo.vue b/src/views/govern/device/control/tabs/components/tableInfo.vue
new file mode 100644
index 0000000..3846deb
--- /dev/null
+++ b/src/views/govern/device/control/tabs/components/tableInfo.vue
@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <vxe-table
+            border
+            show-footer
+            ref="tableRef"
+            v-bind="defaultAttribute"
+            height="70"
+            align="center"
+            stripe
+            :loading="loading"
+            :print-config="{}"
+            :column-config="{ resizable: false, width: 90 }"
+            :data="tableData"
+            style="width: 100%; margin-top: 10px"
+        >
+            <div v-if="tableIndex == 0">
+                <vxe-colgroup title="电压有效值(kV)">
+                    <vxe-column field="a" title="AB相"></vxe-column>
+                    <vxe-column field="b" title="BC相"></vxe-column>
+                    <vxe-column field="c" title="CA相"></vxe-column>
+                </vxe-colgroup>
+                <vxe-colgroup title="电流有效值(A)">
+                    <vxe-column field="a" title="A相"></vxe-column>
+                    <vxe-column field="b" title="B相"></vxe-column>
+                    <vxe-column field="c" title="C相"></vxe-column>
+                </vxe-colgroup>
+                <vxe-colgroup title="基波电压幅值(kV)">
+                    <vxe-column field="a" title="A相"></vxe-column>
+                    <vxe-column field="b" title="B相"></vxe-column>
+                    <vxe-column field="c" title="C相"></vxe-column>
+                </vxe-colgroup>
+                <vxe-colgroup title="基波电压相位(°)">
+                    <vxe-column field="a" title="A相"></vxe-column>
+                    <vxe-column field="b" title="B相"></vxe-column>
+                    <vxe-column field="c" title="C相"></vxe-column>
+                </vxe-colgroup>
+                <vxe-colgroup title="基波电流幅值(A)">
+                    <vxe-column field="a" title="A相"></vxe-column>
+                    <vxe-column field="b" title="B相"></vxe-column>
+                    <vxe-column field="c" title="C相"></vxe-column>
+                </vxe-colgroup>
+                <vxe-colgroup title="基波电流相位(°)">
+                    <vxe-column field="a" title="A相"></vxe-column>
+                    <vxe-column field="b" title="B相"></vxe-column>
+                    <vxe-column field="c" title="C相"></vxe-column>
+                </vxe-colgroup>
+            </div>
+            <div v-if="tableIndex == 1">
+                <vxe-colgroup title="电压偏差(%)">
+                    <vxe-column field="a" title="AB相"></vxe-column>
+                    <vxe-column field="b" title="BC相"></vxe-column>
+                    <vxe-column field="c" title="CA相"></vxe-column>
+                </vxe-colgroup>
+                <vxe-colgroup title="电压总谐波畸变率(%)">
+                    <vxe-column field="a" title="A相"></vxe-column>
+                    <vxe-column field="b" title="BC相"></vxe-column>
+                    <vxe-column field="c" title="CA相"></vxe-column>
+                </vxe-colgroup>
+                <vxe-colgroup title="电流总谐波畸变率(%)">
+                    <vxe-column field="a" title="A相"></vxe-column>
+                    <vxe-column field="b" title="BC相"></vxe-column>
+                    <vxe-column field="c" title="CA相"></vxe-column>
+                </vxe-colgroup>
+                <vxe-colgroup title="电压不平衡度(%)">
+                    <vxe-column field="a" title="A相"></vxe-column>
+                    <vxe-column field="b" title="BC相"></vxe-column>
+                    <vxe-column field="c" title="CA相"></vxe-column>
+                </vxe-colgroup>
+                <vxe-column field="a" width="170" title="电流不平衡度(%)"></vxe-column>
+                <vxe-column field="b" width="170" title="频率(Hz)"></vxe-column>
+                <vxe-column field="c" width="170" title="基波电流相位(°)"></vxe-column>
+            </div>
+            <div v-if="tableIndex == 2">
+                <vxe-colgroup title="有功功率(kV)">
+                    <vxe-column field="a" title="A相"></vxe-column>
+                    <vxe-column field="b" title="B相"></vxe-column>
+                    <vxe-column field="c" title="C相"></vxe-column>
+                    <vxe-column field="c" title="总有功功率"></vxe-column>
+                </vxe-colgroup>
+                <vxe-colgroup title="无功功率(kV)">
+                    <vxe-column field="a" title="A相"></vxe-column>
+                    <vxe-column field="b" title="B相"></vxe-column>
+                    <vxe-column field="c" title="C相"></vxe-column>
+                    <vxe-column field="c" title="总无功功率"></vxe-column>
+                </vxe-colgroup>
+                <vxe-colgroup title="视在功率(kV)">
+                    <vxe-column field="a" title="A相"></vxe-column>
+                    <vxe-column field="b" title="B相"></vxe-column>
+                    <vxe-column field="c" title="C相"></vxe-column>
+                    <vxe-column field="c" title="总视在功率"></vxe-column>
+                </vxe-colgroup>
+                <vxe-colgroup title="功率因数">
+                    <vxe-column field="a" title="A相"></vxe-column>
+                    <vxe-column field="b" title="B相"></vxe-column>
+                    <vxe-column field="c" title="C相"></vxe-column>
+                    <vxe-column field="c" title="总功率因数"></vxe-column>
+                </vxe-colgroup>
+            </div>
+        </vxe-table>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, nextTick, onMounted } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { VxeTablePropTypes, VxeTableInstance, VxeToolbarInstance } from 'vxe-table'
+
+interface RowVO {
+    a: string
+    b: string
+    c: string
+}
+
+const loading = ref(false)
+const tableData = ref<RowVO[]>([])
+
+const tableRef = ref<VxeTableInstance<RowVO>>()
+const toolbarRef = ref<VxeToolbarInstance>()
+
+loading.value = true
+
+nextTick(() => {
+    // 将表格和工具栏进行关联
+    const $table = tableRef.value
+    const $toolbar = toolbarRef.value
+    if ($table && $toolbar) {
+        $table.connect($toolbar)
+    }
+})
+onMounted(() => {
+    loading.value = false
+})
+const tableIndex: any = ref(null)
+const getTableData = (val: any, list: any) => {
+    tableIndex.value = val
+    tableData.value = list
+    loading.value = false
+}
+defineExpose({ getTableData })
+</script>
+
+<style lang="scss" scoped>
+// ::v-deep .vxe-table--empty-content{
+// display: none !important;
+// }
+</style>
diff --git a/src/views/govern/device/control/tabs/event.vue b/src/views/govern/device/control/tabs/event.vue
new file mode 100644
index 0000000..f96aadf
--- /dev/null
+++ b/src/views/govern/device/control/tabs/event.vue
@@ -0,0 +1,19 @@
+<template>
+    <div class="view">
+        <div class="view_top">
+
+        </div>
+        <div class="view_bot">
+
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+onMounted(() => {
+    console.log()
+})
+</script>
+<style lang="less" scoped>
+
+</style>
diff --git a/src/views/govern/device/control/tabs/realtime.vue b/src/views/govern/device/control/tabs/realtime.vue
new file mode 100644
index 0000000..e20a0a4
--- /dev/null
+++ b/src/views/govern/device/control/tabs/realtime.vue
@@ -0,0 +1,1271 @@
+<template>
+    <div class="view">
+        <div class="view_top">
+            <!-- 左侧仪表盘 -->
+            <div class="view_top_left">
+                <div class="left_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
+                <div class="left_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
+                <div class="left_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
+            </div>
+            <div class="view_top_mid">
+                <div class="mid_charts"><MyEchart ref="pieChartRef" :options="echartsData1"></MyEchart></div>
+            </div>
+            <!-- 右侧仪表盘 -->
+            <div class="view_top_right">
+                <div class="right_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
+                <div class="right_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
+                <div class="right_charts"><MyEchart ref="pieChartRef" :options="echartsData"></MyEchart></div>
+            </div>
+        </div>
+        <div class="view_bot">
+            <div class="view_bot_tables">
+                <tableInfo ref="tableInfoRef1" />
+            </div>
+            <div class="view_bot_tables">
+                <tableInfo ref="tableInfoRef2" />
+            </div>
+            <div class="view_bot_tables">
+                <tableInfo ref="tableInfoRef3" />
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import tableInfo from './components/tableInfo.vue'
+import * as echarts from 'echarts'
+import { split } from 'lodash-es'
+const pieChartRef: any = ref()
+const echartsData: any = ref({})
+const echartsData1: any = ref({})
+//渲染echarts
+const init = () => {
+    echartsData.value = {
+        options: {
+            tooltip: {},
+            series: [
+                {
+                    type: 'gauge',
+                    startAngle: 180,
+                    endAngle: 0,
+                    min: 0,
+                    max: 300,
+                    radius: '150%',
+                    center: ['55%', '76%'],
+                    splitNumber: 3, //刻度数量
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            width: 10,
+                            shadowBlur: 0,
+                            color: [
+                                [0.3, '#91c7a1'],
+                                [0.7, '#63869e'],
+                                [1, '#002B6A']
+                            ]
+                        }
+                    },
+
+                    itemStyle: {
+                        normal: {
+                            shadowBlur: 10
+                        }
+                    },
+                    //标题位置
+                    title: {
+                        fontWeight: 'bolder',
+                        fontSize: 12,
+                        offsetCenter: ['-130%', '-20%']
+                    },
+                    //数值位置
+                    detail: {
+                        fontSize: 12,
+                        formatter: '{value}',
+                        offsetCenter: ['0%', '25%']
+                    },
+                    data: [
+                        {
+                            value: 15,
+                            name: '违规率'
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+    //中间指针图
+    echartsData1.value = {
+        // options: {
+        //     // backgroundColor: '#001533',
+        //     tooltip: {
+        //         format: function (params) {
+        //             console.log(params)
+        //         }
+        //     },
+        //     series: [
+        //         //外圈
+        //         {
+        //             radius: '100%',
+        //             min: -150,
+        //             max: 180,
+        //             startAngle: -90,
+        //             endAngle: 270,
+        //             pointer: {
+        //                 show: true,
+        //                 length: '80%',
+        //                 radius: '20%',
+        //                 width: 6 //指针粗细
+        //             },
+        //             itemStyle: {
+        //                 normal: {
+        //                     color: 'rgb(0,191,255)'
+        //                 }
+        //             },
+        //             // axisLine: {
+        //             //     show: true,
+        //             //     fontSize: 20,
+        //             //     lineStyle: {
+        //             //         width: 0,
+        //             //         color: [[1, '#01b4e0']]
+        //             //     }
+        //             // },
+
+        //             axisLine: {
+        //                 show: true,
+        //                 // 坐标轴线
+        //                 lineStyle: {
+        //                     color: [[1, '#F42E47']], // 属性lineStyle控制线条样式
+        //                     width: 2
+        //                 },
+        //                 interval: 0
+        //             },
+        //             splitLine: {
+        //                 length: 10,
+        //                 lineStyle: {
+        //                     width: 2,
+        //                     color: '#01b4e0',
+        //                     distance: 5
+        //                 }, //刻度节点线
+        //                 splitNumber: 5
+        //             },
+        //             splitNumber: 11,
+        //             axisTick: {
+        //                 show: false
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 fontSize: 14,
+        //                 color: '#000',
+        //                 formatter: function (v: any) {
+        //                     console.log(v, '00000000000')
+        //                     switch (v + '') {
+        //                         case '-122.5':
+        //                             return '-120'
+        //                         case '-95':
+        //                             return '-90'
+        //                         case '-60':
+        //                             return '-60'
+        //                         case '-67.5':
+        //                             return '-60'
+        //                         case '-40':
+        //                             return '-30'
+        //                         case '-12.5':
+        //                             return '0'
+        //                         case '42.5':
+        //                             return '30'
+        //                         case '70':
+        //                             return '60'
+        //                         case '97.5':
+        //                             return '90'
+        //                         case '125':
+        //                             return '120'
+        //                         case '152.5':
+        //                             return '150'
+        //                         case '-180':
+        //                             return ''
+        //                         case '180':
+        //                             return '180'
+        //                         default:
+        //                             return v
+        //                     }
+        //                 }
+        //             },
+        //             detail: {
+        //                 show: false,
+        //                 textStyle: {
+        //                     fontSize: 30,
+        //                     fontWeight: '700',
+        //                     color: '#67d9fe'
+        //                 }
+        //             },
+        //             data: [
+        //                 {
+        //                     name: '',
+        //                     value: 150,
+        //                     itemStyle: {
+        //                         color: 'red'
+        //                     }
+        //                 },
+        //                 {
+        //                     name: '',
+        //                     value: 60,
+        //                     itemStyle: {
+        //                         color: '#DAA521'
+        //                     }
+        //                 },
+        //                 {
+        //                     name: '',
+        //                     value: 90,
+        //                     itemStyle: {
+        //                         color: 'green'
+        //                     }
+        //                 }
+        //             ]
+        //         },
+        //         //内圈
+        //         {
+        //             radius: '50%',
+        //             splitNumber: 11,
+        //             startAngle: 0,
+        //             endAngle: 360,
+        //             min: -150,
+        //             max: 180,
+        //             axisLine: {
+        //                 show: true,
+        //                 // 坐标轴线
+        //                 lineStyle: {
+        //                     color: [[1, '#1C9EE9']], // 属性lineStyle控制线条样式
+        //                     width: 2,
+        //                     type: 'dashed'
+        //                 }
+        //             },
+        //             pointer: {
+        //                 show: true,
+        //                 length: '80%',
+        //                 radius: '20%',
+        //                 width: 8 //指针粗细
+        //             },
+        //             itemStyle: {
+        //                 // show: false,
+        //                 normal: {
+        //                     color: 'rgb(0,191,255)'
+        //                 }
+        //             },
+        //             splitLine: {
+        //                 length: 5,
+        //                 interval: 30,
+        //                 lineStyle: {
+        //                     width: 2,
+        //                     color: 'green',
+        //                     distance: -20
+        //                 } //刻度节点线
+        //             },
+        //             axisTick: {
+        //                 show: false
+        //             },
+        //             axisLabel: {
+        //                 show: true,
+        //                 itemStyle: {
+        //                     interval: 0
+        //                 },
+        //                 formatter: function (v: any) {
+        //                     console.log(v, '00000000000')
+        //                     switch (v + '') {
+        //                         case '-122.5':
+        //                             return '-120'
+        //                         case '-95':
+        //                             return '-90'
+        //                         case '-60':
+        //                             return '-60'
+        //                         case '-67.5':
+        //                             return '-60'
+        //                         case '-40':
+        //                             return '-30'
+        //                         case '-12.5':
+        //                             return '0'
+        //                         case '42.5':
+        //                             return '30'
+        //                         case '70':
+        //                             return '60'
+        //                         case '97.5':
+        //                             return '90'
+        //                         case '125':
+        //                             return '120'
+        //                         case '152.5':
+        //                             return '150'
+        //                         case '-180':
+        //                             return ''
+        //                         case '180':
+        //                             return '180'
+        //                         default:
+        //                             return v
+        //                     }
+        //                 }
+        //             },
+        //             detail: {
+        //                 show: false
+        //             },
+        //             data: [
+        //                 {
+        //                     name: '',
+        //                     value: 110,
+        //                     itemStyle: {
+        //                         color: 'red'
+        //                     }
+        //                 },
+        //                 {
+        //                     name: '',
+        //                     value: 70,
+        //                     itemStyle: {
+        //                         color: '#DAA521'
+        //                     }
+        //                 },
+        //                 {
+        //                     name: '',
+        //                     value: 20,
+        //                     itemStyle: {
+        //                         color: 'green'
+        //                     }
+        //                 }
+        //             ]
+        //         }
+        //     ]
+        // }
+        options: {
+            grid: {
+                top: 230
+            },
+            title: {
+                text: '',
+                x: 'center'
+            },
+            tooltip: {
+                formatter: '{a} <br/>{c} {b}'
+            },
+            legend: [],
+            series: [
+                // {
+                //     name: 'atitle +电压有效值',
+                //     type: 'gauge',
+                //     center: ['50%', '30%'], // 默认全局居中
+                //     radius: '50%',
+                //     min: 0,
+                //     max: 180,
+                //     startAngle: 180,
+                //     endAngle: 90,
+                //     splitNumber: 2,
+                //     axisLine: {
+                //         // 坐标轴线
+                //         lineStyle: {
+                //             // 属性lineStyle控制线条样式
+                //             color: [
+                //                 [0.25, '#DAA520'],
+                //                 [0.5, '#DAA520'],
+                //                 [0.75, '#DAA520'],
+                //                 [1, '#DAA520']
+                //             ],
+                //             width: 5
+                //         }
+                //     },
+                //     axisTick: {
+                //         // 坐标轴小标记
+                //         length: 12, // 属性length控制线长
+                //         lineStyle: {
+                //             // 属性lineStyle控制线条样式
+                //             color: 'auto'
+                //         }
+                //     },
+                //     splitLine: {
+                //         // 分隔线
+                //         length: 20, // 属性length控制线长
+                //         lineStyle: {
+                //             // 属性lineStyle（详见lineStyle）控制线条样式
+                //             color: 'auto'
+                //         }
+                //     },
+                //     pointer: {
+                //         width: 5
+                //     },
+                //     title: {
+                //         offsetCenter: ['-125%', '-55%'] // x, y，单位px
+                //     },
+                //     detail: {
+                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                //         fontWeight: 'bolder',
+                //         offsetCenter: ['40%', '-35%'],
+                //         fontSize: '35px'
+                //     },
+                //     data: [
+                //         {
+                //             // value: [0],
+                //             // name:' atitle + (kV)'
+                //         }
+                //     ]
+                // },
+                // {
+                //     name: ' btitle + 电压有效值',
+                //     type: 'gauge',
+                //     center: ['20%', '60%'], // 默认全局居中
+                //     radius: '50%',
+                //     min: 0,
+                //     max: 180,
+                //     startAngle: 180,
+                //     endAngle: 90,
+                //     splitNumber: 2,
+                //     axisLine: {
+                //         // 坐标轴线
+                //         lineStyle: {
+                //             // 属性lineStyle控制线条样式
+                //             color: [
+                //                 [0.25, '#2E8B57'],
+                //                 [0.5, '#2E8B57'],
+                //                 [0.75, '#2E8B57'],
+                //                 [1, '#2E8B57']
+                //             ],
+                //             width: 5
+                //         }
+                //     },
+                //     axisTick: {
+                //         // 坐标轴小标记
+                //         length: 12, // 属性length控制线长
+                //         lineStyle: {
+                //             // 属性lineStyle控制线条样式
+                //             color: 'auto'
+                //         }
+                //     },
+                //     splitLine: {
+                //         // 分隔线
+                //         length: 20, // 属性length控制线长
+                //         lineStyle: {
+                //             // 属性lineStyle（详见lineStyle）控制线条样式
+                //             color: 'auto'
+                //         }
+                //     },
+                //     pointer: {
+                //         width: 5
+                //     },
+                //     title: {
+                //         offsetCenter: ['-125%', '-55%'] // x, y，单位px
+                //     },
+                //     detail: {
+                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                //         fontWeight: 'bolder',
+                //         offsetCenter: ['40%', '-35%'],
+                //         fontSize: '35px'
+                //     },
+                //     data: [
+                //         {
+                //             // value: [0],
+                //             // name: ' btitle +(kV)'
+                //         }
+                //     ]
+                // },
+                // {
+                //     name: 'ctitle + 电压有效值',
+                //     type: 'gauge',
+                //     center: ['20%', '90%'], // 默认全局居中
+                //     radius: '50%',
+                //     min: 0,
+                //     max: 180,
+                //     startAngle: 180,
+                //     endAngle: 90,
+                //     splitNumber: 2,
+                //     axisLine: {
+                //         // 坐标轴线
+                //         lineStyle: {
+                //             // 属性lineStyle控制线条样式
+                //             color: [
+                //                 [0.25, '#A52a2a'],
+                //                 [0.5, '#A52a2a'],
+                //                 [0.75, '#A52a2a'],
+                //                 [1, '#A52a2a']
+                //             ],
+                //             width: 5
+                //         }
+                //     },
+                //     axisTick: {
+                //         // 坐标轴小标记
+                //         length: 12, // 属性length控制线长
+                //         lineStyle: {
+                //             // 属性lineStyle控制线条样式
+                //             color: 'auto'
+                //         }
+                //     },
+                //     splitLine: {
+                //         // 分隔线
+                //         length: 20, // 属性length控制线长
+                //         lineStyle: {
+                //             // 属性lineStyle（详见lineStyle）控制线条样式
+                //             color: 'auto'
+                //         }
+                //     },
+                //     pointer: {
+                //         width: 5
+                //     },
+                //     title: {
+                //         offsetCenter: ['-125%', '-55%'] // x, y，单位px
+                //     },
+                //     detail: {
+                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                //         fontWeight: 'bolder',
+                //         offsetCenter: ['40%', '-35%'],
+                //         fontSize: '35px'
+                //     },
+                //     data: [
+                //         {
+                //             // value: [0],
+                //             // name: 'ctitle + (kV)'
+                //         }
+                //     ]
+                // },
+                // {
+                //     name: 'A相电流有效值',
+                //     type: 'gauge',
+                //     center: ['80%', '30%'], // 默认全局居中
+                //     radius: '50%',
+                //     min: 0,
+                //     max: 180,
+                //     startAngle: 90,
+                //     endAngle: 0,
+                //     splitNumber: 2,
+                //     axisLine: {
+                //         // 坐标轴线
+                //         lineStyle: {
+                //             // 属性lineStyle控制线条样式
+                //             color: [
+                //                 [0.25, '#DAA520'],
+                //                 [0.5, '#DAA520'],
+                //                 [0.75, '#DAA520'],
+                //                 [1, '#DAA520']
+                //             ],
+                //             width: 5
+                //         }
+                //     },
+                //     axisTick: {
+                //         // 坐标轴小标记
+                //         length: 12, // 属性length控制线长
+                //         lineStyle: {
+                //             // 属性lineStyle控制线条样式
+                //             color: 'auto'
+                //         }
+                //     },
+                //     splitLine: {
+                //         // 分隔线
+                //         length: 20, // 属性length控制线长
+                //         lineStyle: {
+                //             // 属性lineStyle（详见lineStyle）控制线条样式
+                //             color: 'auto'
+                //         }
+                //     },
+                //     pointer: {
+                //         width: 5
+                //     },
+                //     title: {
+                //         offsetCenter: ['125%', '-55%'] // x, y，单位px
+                //     },
+                //     detail: {
+                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                //         fontWeight: 'bolder',
+                //         offsetCenter: ['-45%', '-35%'],
+                //         fontSize: '35px'
+                //     },
+                //     data: [
+                //         {
+                //             // value: [0],
+                //             // name: 'A相(A)'
+                //         }
+                //     ]
+                // },
+                // {
+                //     name: 'B相电流有效值',
+                //     type: 'gauge',
+                //     center: ['80%', '60%'], // 默认全局居中
+                //     radius: '50%',
+                //     min: 0,
+                //     max: 180,
+                //     startAngle: 90,
+                //     endAngle: 0,
+                //     splitNumber: 2,
+                //     axisLine: {
+                //         // 坐标轴线
+                //         lineStyle: {
+                //             // 属性lineStyle控制线条样式
+                //             color: [
+                //                 [0.25, '#2E8B57'],
+                //                 [0.5, '#2E8B57'],
+                //                 [0.75, '#2E8B57'],
+                //                 [1, '#2E8B57']
+                //             ],
+                //             width: 5
+                //         }
+                //     },
+                //     axisTick: {
+                //         // 坐标轴小标记
+                //         length: 12, // 属性length控制线长
+                //         lineStyle: {
+                //             // 属性lineStyle控制线条样式
+                //             color: 'auto'
+                //         }
+                //     },
+                //     splitLine: {
+                //         // 分隔线
+                //         length: 20, // 属性length控制线长
+                //         lineStyle: {
+                //             // 属性lineStyle（详见lineStyle）控制线条样式
+                //             color: 'auto'
+                //         }
+                //     },
+                //     pointer: {
+                //         width: 5
+                //     },
+                //     title: {
+                //         offsetCenter: ['125%', '-55%'] // x, y，单位px
+                //     },
+                //     detail: {
+                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                //         fontWeight: 'bolder',
+                //         offsetCenter: ['-45%', '-35%'],
+                //         fontSize: '35px'
+                //     },
+                //     data: [
+                //         {
+                //             // value: [0],
+                //             // name: 'B相(A)'
+                //         }
+                //     ]
+                // },
+                // {
+                //     name: 'C相电流有效值',
+                //     type: 'gauge',
+                //     center: ['80%', '90%'], // 默认全局居中
+                //     radius: '50%',
+                //     min: 0,
+                //     max: 180,
+                //     startAngle: 90,
+                //     endAngle: 0,
+                //     splitNumber: 2,
+                //     axisLine: {
+                //         // 坐标轴线
+                //         lineStyle: {
+                //             // 属性lineStyle控制线条样式
+                //             color: [
+                //                 [0.25, '#A52a2a'],
+                //                 [0.5, '#A52a2a'],
+                //                 [0.75, '#A52a2a'],
+                //                 [1, '#A52a2a']
+                //             ],
+                //             width: 5
+                //         }
+                //     },
+                //     axisTick: {
+                //         // 坐标轴小标记
+                //         length: 12, // 属性length控制线长
+                //         lineStyle: {
+                //             // 属性lineStyle控制线条样式
+                //             color: 'auto'
+                //         }
+                //     },
+                //     splitLine: {
+                //         // 分隔线
+                //         length: 20, // 属性length控制线长
+                //         lineStyle: {
+                //             // 属性lineStyle（详见lineStyle）控制线条样式
+                //             color: 'auto'
+                //         }
+                //     },
+                //     pointer: {
+                //         width: 5
+                //     },
+                //     title: {
+                //         offsetCenter: ['125%', '-55%'] // x, y，单位px
+                //     },
+                //     detail: {
+                //         // 其余属性默认使用全局文本样式，详见TEXTSTYLE
+                //         fontWeight: 'bolder',
+                //         offsetCenter: ['-45%', '-35%'],
+                //         fontSize: '35px'
+                //     },
+                //     data: [
+                //         {
+                //             // value: [0],
+                //             // name: 'C相(A)'
+                //         }
+                //     ]
+                // },
+                // {
+                //     name: '基波电流相位',
+                //     type: 'gauge',
+                //     // 表盘最小值
+                //     min: 180,
+                //     // 表盘最大值
+                //     max: -180,
+                //     // 表盘分割数
+                //     splitNumber: 12,
+                //     // 圆心位置
+                //     center: ['50%', '50%'],
+                //     // 半径
+                //     radius: '50%',
+                //     startAngle: 180,
+                //     endAngle: -179.99,
+                //     // 指针方向
+                //     clockWise: true,
+                //     title: false,
+                //     // 表盘外框
+                //     axisLine: {
+                //         show: true,
+                //         lineStyle: {
+                //             color: [
+                //                 [0.25, '#2E8B57'],
+                //                 [0.5, '#2E8B57'],
+                //                 [0.75, '#2E8B57'],
+                //                 [1, '#2E8B57']
+                //             ],
+                //             width: 2
+                //         }
+                //     },
+                //     // 表盘细分数
+                //     axisTick: {
+                //         show: true,
+                //         splitNumber: 5,
+                //         length: 6,
+                //         lineStyle: {
+                //             color: '#eee',
+                //             width: 1,
+                //             type: 'solid'
+                //         }
+                //     },
+                //     // 分割线
+                //     splitLine: {
+                //         show: true,
+                //         length: 10,
+                //         lineStyle: {
+                //             color: '#eee',
+                //             width: 2,
+                //             type: 'solid'
+                //         }
+                //     },
+                //     // 分割线标识
+                //     axisLabel: {
+                //         show: false
+                //     },
+
+                //     // 指针设置
+                //     pointer: {
+                //         length: '45%',
+                //         width: 2
+                //     },
+                //     detail: {
+                //         show: false
+                //     },
+                //     data: [
+                //         {
+                //             value: 0,
+                //             name: 'B相'
+                //         }
+                //     ]
+                // },
+                // {
+                //     name: '基波电流相位',
+                //     type: 'gauge',
+                //     // 表盘最小值
+                //     min: 180,
+                //     // 表盘最大值
+                //     max: -180,
+                //     // 表盘分割数
+                //     splitNumber: 12,
+                //     // 圆心位置
+                //     center: ['50%', '50%'],
+                //     // 半径
+                //     radius: '50%',
+                //     startAngle: 180,
+                //     endAngle: -179.99,
+                //     // 指针方向
+                //     clockWise: true,
+                //     title: false,
+                //     // 表盘外框
+                //     axisLine: {
+                //         show: true,
+                //         lineStyle: {
+                //             color: [
+                //                 [0.25, '#A52a2a'],
+                //                 [0.5, '#A52a2a'],
+                //                 [0.75, '#A52a2a'],
+                //                 [1, '#A52a2a']
+                //             ],
+                //             width: 2
+                //         }
+                //     },
+                //     // 表盘细分数
+                //     axisTick: {
+                //         show: true,
+                //         splitNumber: 5,
+                //         length: 6,
+                //         lineStyle: {
+                //             color: '#eee',
+                //             width: 1,
+                //             type: 'solid'
+                //         }
+                //     },
+                //     // 分割线
+                //     splitLine: {
+                //         show: true,
+                //         length: 10,
+                //         lineStyle: {
+                //             color: '#eee',
+                //             width: 2,
+                //             type: 'solid'
+                //         }
+                //     },
+                //     // 分割线标识
+                //     axisLabel: {
+                //         show: false
+                //     },
+
+                //     // 指针设置
+                //     pointer: {
+                //         length: '45%',
+                //         width: 2
+                //     },
+                //     detail: {
+                //         show: false
+                //     },
+                //     data: [
+                //         {
+                //             value: 0,
+                //             name: 'C相'
+                //         }
+                //     ]
+                // },
+                // {
+                //     name: '基波电压相位',
+                //     type: 'gauge',
+                //     // 表盘最小值
+                //     min: 180,
+                //     // 表盘最大值
+                //     max: -180,
+                //     // 表盘分割数
+                //     splitNumber: 12,
+                //     // 圆心位置
+                //     center: ['50%', '50%'],
+                //     // 半径
+                //     radius: '85%',
+                //     startAngle: 180,
+                //     endAngle: -179.99,
+                //     // 指针方向
+                //     clockWise: true,
+                //     title: false,
+                //     // 表盘外框
+                //     axisLine: {
+                //         show: true,
+                //         lineStyle: {
+                //             color: [
+                //                 [0.25, '#2E8B57'],
+                //                 [0.5, '#2E8B57'],
+                //                 [0.75, '#2E8B57'],
+                //                 [1, '#2E8B57']
+                //             ],
+                //             width: 1.5
+                //         }
+                //     },
+                //     // 表盘细分数
+                //     axisTick: {
+                //         show: true,
+                //         splitNumber: 5,
+                //         length: 6,
+                //         lineStyle: {
+                //             color: '#eee',
+                //             width: 1,
+                //             type: 'solid'
+                //         }
+                //     },
+                //     // 分割线
+                //     splitLine: {
+                //         show: true,
+                //         length: 10,
+                //         lineStyle: {
+                //             color: '#eee',
+                //             width: 2,
+                //             type: 'solid'
+                //         }
+                //     },
+                //     // 分割线标识
+                //     axisLabel: {
+                //         show: false
+                //     },
+
+                //     // 指针设置
+                //     pointer: {
+                //         length: '75%',
+                //         width: 4
+                //     },
+                //     detail: {
+                //         show: false
+                //     },
+                //     data: [
+                //         {
+                //             value: 0,
+                //             name: 'B相'
+                //         }
+                //     ]
+                // },
+                // {
+                //     name: '基波电压相位',
+                //     type: 'gauge',
+                //     // 表盘最小值
+                //     min: 180,
+                //     // 表盘最大值
+                //     max: -180,
+                //     // 表盘分割数
+                //     splitNumber: 12,
+                //     // 圆心位置
+                //     center: ['50%', '50%'],
+                //     // 半径
+                //     radius: '85%',
+                //     startAngle: 180,
+                //     endAngle: -179.99,
+                //     // 指针方向
+                //     clockWise: true,
+                //     title: false,
+                //     // 表盘外框
+                //     axisLine: {
+                //         show: true,
+                //         lineStyle: {
+                //             color: [
+                //                 [0.25, '#A52a2a'],
+                //                 [0.5, '#A52a2a'],
+                //                 [0.75, '#A52a2a'],
+                //                 [1, '#A52a2a']
+                //             ],
+                //             width: 1.5
+                //         }
+                //     },
+                //     // 表盘细分数
+                //     axisTick: {
+                //         show: true,
+                //         splitNumber: 5,
+                //         length: 6,
+                //         lineStyle: {
+                //             color: '#eee',
+                //             width: 1,
+                //             type: 'solid'
+                //         }
+                //     },
+                //     // 分割线
+                //     splitLine: {
+                //         show: true,
+                //         length: 10,
+                //         lineStyle: {
+                //             color: '#eee',
+                //             width: 2,
+                //             type: 'solid'
+                //         }
+                //     },
+                //     // 分割线标识
+                //     axisLabel: {
+                //         show: false
+                //     },
+
+                //     // 指针设置
+                //     pointer: {
+                //         length: '75%',
+                //         width: 4
+                //     },
+                //     detail: {
+                //         show: false
+                //     },
+                //     data: [
+                //         {
+                //             value: 0,
+                //             name: 'C相'
+                //         }
+                //     ]
+                // }
+                {
+                    name: '基波电流相位',
+                    type: 'gauge',
+                    // 表盘最小值
+                    min: 180,
+                    // 表盘最大值
+                    max: -180,
+                    // 表盘分割数
+                    splitNumber: 12,
+                    // 圆心位置
+                    center: ['50%', '50%'],
+                    // 半径
+                    radius: '50%',
+                    startAngle: 180,
+                    endAngle: -179.99,
+                    // 指针方向
+                    clockWise: true,
+                    title: false,
+                    // 表盘外框
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: [
+                                [0.25, '#1E9FF4'],
+                                [0.5, '#1E9FF4'],
+                                [0.75, '#1E9FF4'],
+                                [1, '#1E9FF4']
+                            ],
+                            width: 2
+                        }
+                    },
+                    // 表盘细分数
+                    axisTick: {
+                        show: true,
+                        splitNumber: 5,
+                        length: 4,
+                        lineStyle: {
+                            color: '#1E9FF4',
+                            width: 1,
+                            type: 'solid'
+                        }
+                    },
+                    // 分割线
+                    splitLine: {
+                        show: true,
+                        length: 10,
+                        lineStyle: {
+                            color: '#1E9FF4',
+                            width: 2,
+                            type: 'solid'
+                        }
+                    },
+                    // 分割线标识
+                    axisLabel: {
+                        show: true,
+                        distance: 5,
+                        formatter: function (v) {
+                            switch (v + '') {
+                                case '-180':
+                                    return ''
+                                default:
+                                    return v
+                            }
+                        }
+                    },
+
+                    // 指针设置
+                    pointer: {
+                        length: '80%',
+                        width: 3
+                    },
+                    detail: {
+                        show: false
+                    },
+                    data: [
+                        {
+                            value: 40,
+                            name: 'A相',
+                            itemStyle: {
+                                color: '#A5292A'
+                            }
+                        },
+                        {
+                            value: 10,
+                            name: 'B相',
+                            itemStyle: {
+                                color: '#DAA521'
+                            }
+                        },
+                        {
+                            value: 20,
+                            name: 'C相',
+                            itemStyle: {
+                                color: '#2F8A57'
+                            }
+                        }
+                    ]
+                },
+                {
+                    name: '基波电压相位',
+                    type: 'gauge',
+                    // 表盘最小值
+                    min: 180,
+                    // 表盘最大值
+                    max: -180,
+                    // 表盘分割数
+                    splitNumber: 12,
+                    // 圆心位置
+                    center: ['50%', '50%'],
+                    // 半径
+                    radius: '85%',
+                    startAngle: 180,
+                    endAngle: -179.99,
+                    // 指针方向
+                    clockWise: true,
+                    title: false,
+                    // 表盘外框
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            color: [
+                            [0.25, '#9D322D'],
+                                [0.5, '#9D322D'],
+                                [0.75, '#9D322D'],
+                                [1, '#9D322D']
+                            ],
+                            width: 1.5
+                        }
+                    },
+                    // 表盘细分数
+                    axisTick: {
+                        show: true,
+                        splitNumber: 5,
+                        length: 6,
+                        lineStyle: {
+                            color: '#9D322D',
+                            width: 1,
+                            type: 'solid'
+                        }
+                    },
+                    // 分割线
+                    splitLine: {
+                        show: true,
+                        length: 10,
+                        lineStyle: {
+                            color: '#9D322D',
+                            width: 2,
+                            type: 'solid'
+                        }
+                    },
+                    // 分割线标识
+                    axisLabel: {
+                        show: true,
+                        distance: 5,
+                        formatter: function (v) {
+                            switch (v + '') {
+                                case '-180':
+                                    return ''
+                                default:
+                                    return v
+                            }
+                        }
+                    },
+
+                    // 指针设置
+                    pointer: {
+                        length: '90%',
+                        width: 6
+                    },
+                    detail: {
+                        show: false
+                    },
+                    data: [
+                        {
+                            value: 140,
+                            name: 'A相',
+                            itemStyle: {
+                                color: '#A5292A'
+                            }
+                        },
+                        {
+                            value: 110,
+                            name: 'B相',
+                            itemStyle: {
+                                color: '#DAA521'
+                            }
+                        },
+                        {
+                            value: 120,
+                            name: 'C相',
+                            itemStyle: {
+                                color: '#2F8A57'
+                            }
+                        }
+                    ]
+                }
+            ]
+        }
+    }
+
+    for (var i = 0; i < echartsData1.value.options.series.length; i++) {
+        echartsData1.value.options.series[i].type = 'gauge'
+        echartsData1.value.options.series[i].startAngle = 90
+        echartsData1.value.options.series[i].endAngle = -270
+        echartsData1.value.options.series[i].center = ['50%', '50%']
+        // option.series[i].axisTick = {show: false};
+        // option.series[i].axisLabel = {show: false};
+        // optionThree.series[i].pointer = {show: false};
+        // optionThree.series[i].detail = {show: false};
+    }
+}
+//渲染table表头
+const tableInfoRef1: any = ref(null)
+const tableInfoRef2: any = ref(null)
+const tableInfoRef3: any = ref(null)
+const initTableHead = () => {
+    const list: any = []
+    for (let index = 0; index < 1; index++) {
+        list.push({
+            a: Math.floor(Math.random() * (100 + 1)),
+            b: Math.floor(Math.random() * (100 + 1)),
+            c: Math.floor(Math.random() * (100 + 1))
+        })
+    }
+    tableInfoRef1.value.getTableData(0, list)
+    tableInfoRef2.value.getTableData(1, list)
+    tableInfoRef3.value.getTableData(2, list)
+}
+onMounted(() => {
+    init()
+    initTableHead()
+})
+</script>
+<style lang="scss" scoped>
+.view {
+    width: 100%;
+    height: 100%;
+    padding-bottom: 200px;
+    box-sizing: border-box;
+    overflow: auto;
+    .view_top {
+        width: 100%;
+        height: auto;
+        display: flex;
+        justify-content: space-between;
+        border: 1px solid #eee;
+        padding: 10px;
+        .view_top_left,
+        .view_top_right {
+            width: 30%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            .left_charts,
+            .right_charts {
+                flex: none;
+                width: 100%;
+                height: 120px;
+                border: 1px solid #eee;
+                margin-bottom: 10px;
+                padding: 10px;
+            }
+        }
+        .view_top_mid {
+            flex: 1;
+            border: 1px solid #eee;
+            margin: 0 10px;
+            padding: 10px;
+            .mid_charts {
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+    .view_bot {
+        min-height: 300px;
+        margin: 10px 0 20px 0;
+        .view_bot_tables {
+            margin-bottom: 10px;
+            height: auto;
+        }
+    }
+}
+.view::-webkit-scrollbar {
+    display: none;
+}
+</style>
diff --git a/src/views/govern/device/control/tabs/trend.vue b/src/views/govern/device/control/tabs/trend.vue
new file mode 100644
index 0000000..25faf33
--- /dev/null
+++ b/src/views/govern/device/control/tabs/trend.vue
@@ -0,0 +1,13 @@
+<template>
+<div>
+    1111111
+</div>
+</template>
+<script lang='ts' setup>
+import {ref,onMounted} from 'vue';
+onMounted(()=>{
+console.log()
+})
+</script>
+<style lang='less' scoped>
+</style>
\ No newline at end of file