方案数据&新增方案&新增/修改测试项页面

package.json

@@ -17,6 +17,8 @@
     "axios": "^1.6.2",
     "crypto-js": "^4.2.0",
     "echarts": "^5.4.3",
+    "echarts-gl": "^2.0.9",
+    "echarts-liquidfill": "^3.1.0",
     "echarts4": "npm:echarts@^4.9.0",
     "element-plus": "^2.7.5",
     "html2canvas": "^1.4.1",

pnpm-lock.yaml

@@ -32,6 +32,12 @@ importers:
       echarts:
         specifier: ^5.4.3
         version: 5.4.3
+      echarts-gl:
+        specifier: ^2.0.9
+        version: 2.0.9(echarts@5.4.3)
+      echarts-liquidfill:
+        specifier: ^3.1.0
+        version: 3.1.0(echarts@5.4.3)
       echarts4:
         specifier: npm:echarts@^4.9.0
         version: echarts@4.9.0
@@ -824,6 +830,9 @@ packages:
     resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==, tarball: https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz}
     engines: {node: '>= 8.10.0'}
 
+  claygl@1.3.0:
+    resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==, tarball: https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz}
+
   color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
 
@@ -888,6 +897,16 @@ packages:
   dom7@3.0.0:
     resolution: {integrity: sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==}
 
+  echarts-gl@2.0.9:
+    resolution: {integrity: sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==, tarball: https://registry.npmmirror.com/echarts-gl/-/echarts-gl-2.0.9.tgz}
+    peerDependencies:
+      echarts: ^5.1.2
+
+  echarts-liquidfill@3.1.0:
+    resolution: {integrity: sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==, tarball: https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz}
+    peerDependencies:
+      echarts: ^5.0.1
+
   echarts@4.9.0:
     resolution: {integrity: sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==}
 
@@ -2269,6 +2288,8 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  claygl@1.3.0: {}
+
   color-convert@1.9.3:
     dependencies:
       color-name: 1.1.3
@@ -2319,6 +2340,16 @@ snapshots:
     dependencies:
       ssr-window: 3.0.0
 
+  echarts-gl@2.0.9(echarts@5.4.3):
+    dependencies:
+      claygl: 1.3.0
+      echarts: 5.4.3
+      zrender: 5.4.4
+
+  echarts-liquidfill@3.1.0(echarts@5.4.3):
+    dependencies:
+      echarts: 5.4.3
+
   echarts@4.9.0:
     dependencies:
       zrender: 4.3.2

src/components/echarts/MyEchart.vue

@@ -6,14 +6,22 @@
 import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
 // import echarts from './echarts'
 import * as echarts from 'echarts' // 全引入
-
+import 'echarts-gl'
+import 'echarts-liquidfill'
 import 'echarts/lib/component/dataZoom'
+import { color, gradeColor3 } from './color'
+import { useConfig } from '@/stores/config'
 
+const config = useConfig()
+color[0] = config.layout.elementUiPrimary[0]
 const chartRef = ref<HTMLDivElement>()
 
 const props = defineProps(['options'])
 let chart: echarts.ECharts | any = null
 const resizeHandler = () => {
+    // 不在视野中的时候不进行resize
+    if (!chartRef.value) return
+    if (chartRef.value.offsetHeight == 0) return
     chart.getZr().painter.getViewportRoot().style.display = 'none'
     requestAnimationFrame(() => {
         chart.resize()
@@ -24,18 +32,17 @@ const initChart = () => {
     chart?.dispose()
 
     chart = echarts.init(chartRef.value as HTMLDivElement)
-    chart.setOption({
+    const options = {
         title: {
             left: 'center',
-            textStyle: {
+            // textStyle: {
                 color: '#000',
-                fontSize: 18
+                fontSize: 18,
-            },
+            // },
-            ...(props.options.title || null)
+            ...(props.options?.title || null)
         },
         tooltip: {
             trigger: 'axis',
-
             axisPointer: {
                 type: 'shadow',
                 label: {
@@ -43,76 +50,93 @@ const initChart = () => {
                     fontSize: 16
                 }
             },
-            textStyle: {
+            // textStyle: {
                 color: '#fff',
                 fontStyle: 'normal',
                 opacity: 0.35,
-                fontSize: 14
+                fontSize: 14,
-            },
+            // },
             backgroundColor: 'rgba(0,0,0,0.35)',
             borderWidth: 0,
-            ...(props.options.tooltip || null)
+            ...(props.options?.tooltip || null)
         },
         legend: {
             right: 20,
             top: 0,
             itemGap: 10,
             itemStyle: {},
-            textStyle: {
+            // textStyle: {
                 fontSize: 12,
-                padding: [2, 0, 0, 0] //[上、右、下、左]
+                padding: [2, 0, 0, 0], //[上、右、下、左]
-            },
+            // },
             itemWidth: 15,
             itemHeight: 10,
-            ...(props.options.legend || null)
+            ...(props.options?.legend || null)
         },
-
         grid: {
             top: '50px',
-            left: '10px',
+            left: '30px',
-            right: '60px',
+            right: '70px',
-            bottom: '40px',
+            bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
-            containLabel: true
+            containLabel: true,
+            ...(props.options?.grid || null)
         },
-        xAxis: handlerXAxis(),
+        xAxis: props.options?.xAxis ? handlerXAxis() : null,
-        yAxis: handlerYAxis(),
+        yAxis: props.options?.yAxis ? handlerYAxis() : null,
-        dataZoom: [
+        dataZoom: props.options?.dataZoom || [
             {
                 type: 'inside',
                 height: 13,
                 start: 0,
                 bottom: '20px',
-                end: 100,
+                end: 100
-                ...(props.options.dataZoom || null)
             },
             {
                 start: 0,
                 height: 13,
                 bottom: '20px',
-                end: 100,
+                end: 100
-                ...(props.options.dataZoom || null)
             }
         ],
-        color: [
+        color: props.options?.color || color,
-            ...(props.options.color || ''),
+        series: props.options?.series,
-            '#07CCCA ',
+        ...props.options?.options
-            '#00BFF5',
+    }
-            '#FFBF00',
+    handlerBar(options)
-            '#77DA63',
+    // 处理柱状图
-            '#D5FF6B',
+    chart.setOption(options)
-            '#Ff6600',
+    setTimeout(() => {
-            '#FF9100',
+        chart.resize()
-            '#5B6E96',
+    }, 0)
-            '#66FFCC',
+}
-            '#B3B3B3'
+const handlerBar = (options: any) => {
-        ],
+    if (Array.isArray(options.series)) {
-        ...props.options.options
+        options.series.forEach((item: any) => {
-    })
+            if (item.type === 'bar') {
+                item.barMinHeight = 10
+                item.barMaxWidth = 20
+                item.itemStyle = Object.assign(
+                    {
+                        color: (params: any) => {
+                            if (params.value == 0 || params.value == 3.14159) {
+                                return '#ccc'
+                            } else {
+                                return props.options?.color
+                                    ? props.options?.color[params.seriesIndex]
+                                    : color[params.seriesIndex]
+                            }
+                        }
+                    },
+                    item.itemStyle
+                )
+            }
+        })
+    }
 }
 const handlerYAxis = () => {
     let temp = {
         type: 'value',
-
+        nameGap: 15,
         nameTextStyle: {
             color: '#000'
         },
@@ -130,24 +154,24 @@ const handlerYAxis = () => {
         splitLine: {
             lineStyle: {
                 // 使用深浅的间隔色
-                color: ['#000'],
+                color: ['#ccc'],
                 type: 'dashed',
                 opacity: 0.5
             }
         }
     }
-    // props.options.xAxis 是数组还是对象
+    // props.options?.xAxis 是数组还是对象
-    if (Array.isArray(props.options.yAxis)) {
+    if (Array.isArray(props.options?.yAxis)) {
-        return props.options.yAxis.map((item: any) => {
+        return props.options?.yAxis.map((item: any) => {
             return {
-                ...item,
+                ...temp,
-                ...temp
+                ...item
             }
         })
     } else {
         return {
             ...temp,
-            ...props.options.yAxis
+            ...props.options?.yAxis
         }
     }
 }
@@ -161,35 +185,47 @@ const handlerXAxis = () => {
             }
         },
         axisLabel: {
-            textStyle: {
+            // textStyle: {
                 fontFamily: 'dinproRegular',
                 color: '#000',
                 fontSize: '12'
-            }
+            // }
         }
     }
-    // props.options.xAxis 是数组还是对象
+    // props.options?.xAxis 是数组还是对象
-    if (Array.isArray(props.options.xAxis)) {
+    if (Array.isArray(props.options?.xAxis)) {
-        return props.options.xAxis.map((item: any) => {
+        return props.options?.xAxis.map((item: any) => {
             return {
-                ...item,
+                ...temp,
-                ...temp
+                ...item
             }
         })
     } else {
         return {
             ...temp,
-            ...props.options.xAxis
+            ...props.options?.xAxis
         }
     }
 }
+let throttle: ReturnType<typeof setTimeout>
+// 动态计算table高度
+const resizeObserver = new ResizeObserver(entries => {
+    for (const entry of entries) {
+        if (throttle) {
+            clearTimeout(throttle)
+        }
+        throttle = setTimeout(() => {
+            resizeHandler()
+        }, 100)
+    }
+})
 onMounted(() => {
     initChart()
-    window.addEventListener('resize', resizeHandler)
+    resizeObserver.observe(chartRef.value!)
 })
 defineExpose({ initChart })
 onBeforeUnmount(() => {
-    window.removeEventListener('resize', resizeHandler)
+    resizeObserver.unobserve(chartRef.value!)
     chart?.dispose()
 })
 watch(

src/components/echarts/color.ts

@@ -0,0 +1,14 @@
+export let color = [
+    '#07CCCA',
+    '#00BFF5',
+    '#FFBF00',
+    '#77DA63',
+    '#D5FF6B',
+    '#Ff6600',
+    '#FF9100',
+    '#5B6E96',
+    '#66FFCC',
+    '#B3B3B3'
+]
+export const gradeColor3 = ['#339966', '#FFCC33', '#CC0000']
+export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900','#996600','#CC0000']

src/views/govern/terminal/deviceLedger/index.vue

@@ -0,0 +1,445 @@
+<template>
+    <div class="default-main">
+        <TableHeader>
+            <template #select>
+                <el-form-item label="设备类型">
+                    <!-- <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->
+                    <el-select
+                        v-model="tableStore.table.params.devType"
+                        clearable
+                        @change="devTypeChange"
+                        placeholder="请选择设备类型"
+                    >
+                        <el-option
+                            v-for="item in devTypeOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="设备型号">
+                    <el-select v-model="tableStore.table.params.devModel" clearable placeholder="请选择设备型号">
+                        <el-option
+                            v-for="item in devModelOptionsFilter"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="通讯协议">
+                    <el-select v-model="tableStore.table.params.devAccessMethod" clearable placeholder="请选择通讯协议">
+                        <el-option label="MQTT" value="mqtt"></el-option>
+                        <el-option label="CLD" value="cloud"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="状态">
+                    <el-select v-model="tableStore.table.params.status" clearable placeholder="请选择状态">
+                        <el-option label="未注册" :value="1"></el-option>
+                        <el-option label="注册" :value="2"></el-option>
+                        <el-option label="接入" :value="3"></el-option>
+                    </el-select>
+                </el-form-item>
+            </template>
+            <template v-slot:operation>
+                <el-button type="primary" @click="downLoadFile" class="ml10" icon="el-icon-Download">
+                    模版下载
+                </el-button>
+                <el-upload
+                    style="display: inline-block"
+                    action=""
+                    accept=".xlsx"
+                    class="upload-demo"
+                    :show-file-list="false"
+                    :auto-upload="false"
+                    :on-change="bulkImport"
+                >
+                    <el-button type="primary" class="ml10" icon="el-icon-Tickets">批量导入</el-button>
+                </el-upload>
+                <el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增设备</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef"></Table>
+
+        <el-dialog
+            :title="dialogTitle"
+            v-model="dialogFormVisible"
+            :close-on-click-modal="false"
+            :before-close="resetForm"
+            draggable
+            width="40%"
+        >
+            <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
+                <el-form-item label="设备名称:" prop="name">
+                    <el-input
+                        v-model="form.name"
+                        autocomplete="off"
+                        clearable
+                        placeholder="请输入（项目名称+设备名称）"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item label="网络设备ID:" prop="ndid" class="top">
+                    <el-input v-model="form.ndid" autocomplete="off" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="设备类型:" prop="devType" class="top">
+                    <el-select v-model="form.devType" placeholder="请选择" @change="formDevTypeChange" clearable>
+                        <el-option
+                            v-for="item in devTypeOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="设备型号:" prop="devModel" class="top">
+                    <el-select v-model="form.devModel" placeholder="请选择" clearable>
+                        <el-option
+                            v-for="item in formDevModelOptionsFilter"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="通讯协议:" prop="devAccessMethod" class="top">
+                    <el-select v-model="form.devAccessMethod" placeholder="请选择" clearable>
+                        <el-option label="MQTT" value="MQTT"></el-option>
+                        <el-option label="CLD" value="cloud"></el-option>
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item label="合同号:" prop="cntractNo" class="top">
+                    <el-input v-model="form.cntractNo" autocomplete="off" placeholder="请输入"></el-input>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button @click="resetForm">取 消</el-button>
+                <el-button type="primary" @click="onSubmit">确 定</el-button>
+            </template>
+        </el-dialog>
+
+        <div class="qrcode-label">
+            <div class="qrcode-label-title">{{ deivce.mac }}</div>
+            <img class="qrcode-label-img" alt="二维码加载失败" :src="deivce.qrPath" />
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, computed, reactive, nextTick } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+    addEquipmentDelivery,
+    deleteEquipmentDelivery,
+    editEquipmentDelivery,
+    batchImportDevice,
+    resetEquipmentDelivery,
+    governDeviceRegister,
+    portableDeviceRegister,
+    portableDeviceAccess
+} from '@/api/cs-system-boot/device'
+import html2canvas from 'html2canvas'
+import { fullUrl } from '@/utils/common'
+
+defineOptions({
+    name: 'govern/log/debug'
+})
+
+const devTypeOptions: any = ref([])
+const deivce: any = ref({})
+const ruleFormRef = ref()
+const form = reactive({
+    cntractNo: '',
+    devAccessMethod: 'mqtt',
+    devModel: '',
+    devType: '',
+    name: '',
+    ndid: ''
+})
+const rules = reactive({
+    name: [{ required: true, message: '设备名不能为空', trigger: 'blur' }],
+    ndid: [{ required: true, message: '网络设备id不能为空', trigger: 'blur' }],
+    devType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
+    devModel: [{ required: true, message: '设备型号不能为空', trigger: 'change' }],
+    devAccessMethod: [{ required: true, message: '接入方式不能为空', trigger: 'blur' }],
+    cntractNo: [{ required: true, message: '合同号不能为空', trigger: 'blur' }]
+})
+const dialogFormVisible = ref(false)
+const dialogTitle = ref('新增设备')
+
+const devModelOptions: any = ref([])
+queryByCode('Device_Type').then(res => {
+    queryCsDictTree(res.data.id).then(res => {
+        devTypeOptions.value = res.data.map((item: any) => {
+            return {
+                value: item.id,
+                label: item.name,
+                ...item
+            }
+        })
+    })
+    queryByid(res.data.id).then(res => {
+        devModelOptions.value = res.data.map((item: any) => {
+            return {
+                value: item.id,
+                label: item.name,
+                ...item
+            }
+        })
+    })
+})
+const devModelOptionsFilter = computed(() => {
+    return devModelOptions.value.filter((item: any) => {
+        if (tableStore.table.params.devType) {
+            return item.pid == tableStore.table.params.devType
+        } else {
+            return true
+        }
+    })
+})
+const formDevModelOptionsFilter = computed(() => {
+    return devModelOptions.value.filter((item: any) => {
+        if (form.devType) {
+            return item.pid == form.devType
+        } else {
+            return true
+        }
+    })
+})
+
+const tableStore = new TableStore({
+    url: '/cs-device-boot/EquipmentDelivery/list',
+    method: 'POST',
+    column: [
+        { title: '设备名称', field: 'name' },
+        {
+            title: '设备类型',
+            field: 'devType',
+            formatter: row => {
+                return devTypeOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
+            }
+        },
+        {
+            title: '设备型号',
+            field: 'devModel',
+            formatter: row => {
+                return devModelOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
+            }
+        },
+        {
+            title: '通讯协议',
+            field: 'devAccessMethod',
+            formatter: row => {
+                return row.cellValue === 'MQTT' ? 'MQTT' : row.cellValue === 'cloud' ? 'CLD' : row.cellValue
+            }
+        },
+        { title: '录入时间', field: 'createTime' },
+        { title: '网络设备ID', field: 'ndid' },
+        {
+            title: '状态',
+            field: 'status',
+            width: 100,
+            render: 'tag',
+            custom: {
+                1: 'warning',
+                2: 'success',
+                3: 'primary',
+                4: 'primary'
+            },
+            replaceValue: {
+                1: '未注册',
+                2: '注册',
+                3: '接入',
+                4: '已取消'
+            }
+            // formatter: row => {
+            //     return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
+            // },
+        },
+        {
+            title: '操作',
+            align: 'center',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+
+                    click: async row => {
+                        dialogFormVisible.value = true
+                        dialogTitle.value = '编辑设备'
+                        for (let key in form) {
+                            form[key] = row[key]
+                        }
+                        form.id = row.id
+                    }
+                },
+                {
+                    name: 'del',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'basicButton',
+                    click: row => {
+                        ElMessageBox.confirm('确定删除该设备吗?', '提示', {
+                            confirmButtonText: '确认',
+                            cancelButtonText: '取消',
+                            type: 'warning'
+                        })
+                            .then(() => {
+                                deleteEquipmentDelivery(row.id).then(res => {
+                                    ElMessage.success('删除成功!')
+                                    tableStore.onTableAction('search', {})
+                                })
+                            })
+                            .catch(e => {})
+                    }
+                }
+            ]
+        }
+    ],
+    beforeSearchFun: () => {
+        for (let key in tableStore.table.params) {
+            if (tableStore.table.params[key] === '') {
+                delete tableStore.table.params[key]
+            }
+        }
+    }
+})
+tableStore.table.params.orderBy = 'desc'
+
+// 设备类型
+const devTypeChange = (e: any) => {
+    if (!e) {
+        return
+    }
+    tableStore.table.params.devModel = ''
+}
+// 下载模版
+const downLoadFile = () => {
+    window.open(window.location.origin + '/api/cs-device-boot/EquipmentDelivery/getExcelTemplate')
+}
+
+// 导入模版
+const bulkImport = (e: any) => {
+    batchImportDevice(e.raw).then((res: any) => {
+        if (res.type === 'application/json') {
+            const reader = new FileReader()
+            reader.readAsText(res)
+            reader.onload = (e: any) => {
+                let data = JSON.parse(e.target.result)
+                if (data.code === 'A0000') {
+                    ElMessage.success(data.message)
+                    tableStore.onTableAction('search', {})
+                } else {
+                    ElMessage.error(data.message)
+                }
+            }
+        } else {
+            ElMessage.error('导入失败!')
+            let url = window.URL.createObjectURL(res)
+            let link = document.createElement('a')
+            link.style.display = 'none'
+            link.href = url
+            link.setAttribute('download', '导入失败.xlsx')
+            document.body.appendChild(link)
+            link.click()
+            document.body.removeChild(link)
+        }
+    })
+}
+// 新增
+const add = () => {
+    dialogFormVisible.value = true
+    dialogTitle.value = '新增设备'
+}
+
+// 确认
+const onSubmit = () => {
+    ruleFormRef.value.validate((valid: any) => {
+        if (valid) {
+            if (dialogTitle.value == '新增设备') {
+                addEquipmentDelivery(form).then(res => {
+                    ElMessage.success('新增成功')
+                    resetForm()
+                    tableStore.onTableAction('search', {})
+                })
+            } else {
+                editEquipmentDelivery(form).then(res => {
+                    ElMessage.success('修改成功')
+                    resetForm()
+                    tableStore.onTableAction('search', {})
+                })
+            }
+        }
+    })
+}
+// 清空表格
+const resetForm = () => {
+    ruleFormRef.value.resetFields()
+    dialogFormVisible.value = false
+    nextTick(() => {
+        // 模拟待编辑数据
+        let user = {
+            cntractNo: '',
+            devAccessMethod: 'mqtt',
+            devModel: '',
+            devType: '',
+            name: '',
+            ndid: ''
+        }
+        Object.assign(form, user)
+    })
+}
+
+const formDevTypeChange = (e: any) => {
+    if (!e) {
+        return
+    }
+    form.devModel = ''
+}
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    setTimeout(() => {
+        tableStore.index()
+    }, 100)
+})
+
+const addMenu = () => {}
+</script>
+<style lang="scss" scoped>
+.qrcode-label {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: -99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 180px;
+    height: 180px;
+    padding: 10px;
+    background: #fff;
+    flex-direction: column;
+
+    .qrcode-label-title {
+        margin-bottom: 10px;
+        font-size: 14px;
+        font-weight: bold;
+    }
+
+    .qrcode-label-img {
+        width: 140px;
+        height: 140px;
+    }
+}
+</style>

src/views/govern/terminal/deviceMonitor/index.vue

@@ -0,0 +1,445 @@
+<template>
+    <div class="default-main">
+        <TableHeader>
+            <template #select>
+                <el-form-item label="设备类型">
+                    <!-- <el-input v-model="tableStore.table.params.searchValue" placeholder="请输入设备类型" /> -->
+                    <el-select
+                        v-model="tableStore.table.params.devType"
+                        clearable
+                        @change="devTypeChange"
+                        placeholder="请选择设备类型"
+                    >
+                        <el-option
+                            v-for="item in devTypeOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="设备型号">
+                    <el-select v-model="tableStore.table.params.devModel" clearable placeholder="请选择设备型号">
+                        <el-option
+                            v-for="item in devModelOptionsFilter"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="通讯协议">
+                    <el-select v-model="tableStore.table.params.devAccessMethod" clearable placeholder="请选择通讯协议">
+                        <el-option label="MQTT" value="mqtt"></el-option>
+                        <el-option label="CLD" value="cloud"></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="状态">
+                    <el-select v-model="tableStore.table.params.status" clearable placeholder="请选择状态">
+                        <el-option label="未注册" :value="1"></el-option>
+                        <el-option label="注册" :value="2"></el-option>
+                        <el-option label="接入" :value="3"></el-option>
+                    </el-select>
+                </el-form-item>
+            </template>
+            <template v-slot:operation>
+                <el-button type="primary" @click="downLoadFile" class="ml10" icon="el-icon-Download">
+                    模版下载
+                </el-button>
+                <el-upload
+                    style="display: inline-block"
+                    action=""
+                    accept=".xlsx"
+                    class="upload-demo"
+                    :show-file-list="false"
+                    :auto-upload="false"
+                    :on-change="bulkImport"
+                >
+                    <el-button type="primary" class="ml10" icon="el-icon-Tickets">批量导入</el-button>
+                </el-upload>
+                <el-button type="primary" class="ml10" @click="add" icon="el-icon-Plus">新增设备</el-button>
+            </template>
+        </TableHeader>
+        <Table ref="tableRef"></Table>
+
+        <el-dialog
+            :title="dialogTitle"
+            v-model="dialogFormVisible"
+            :close-on-click-modal="false"
+            :before-close="resetForm"
+            draggable
+            width="40%"
+        >
+            <el-form :model="form" label-width="120px" :rules="rules" ref="ruleFormRef">
+                <el-form-item label="设备名称:" prop="name">
+                    <el-input
+                        v-model="form.name"
+                        autocomplete="off"
+                        clearable
+                        placeholder="请输入（项目名称+设备名称）"
+                    ></el-input>
+                </el-form-item>
+                <el-form-item label="网络设备ID:" prop="ndid" class="top">
+                    <el-input v-model="form.ndid" autocomplete="off" placeholder="请输入"></el-input>
+                </el-form-item>
+                <el-form-item label="设备类型:" prop="devType" class="top">
+                    <el-select v-model="form.devType" placeholder="请选择" @change="formDevTypeChange" clearable>
+                        <el-option
+                            v-for="item in devTypeOptions"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="设备型号:" prop="devModel" class="top">
+                    <el-select v-model="form.devModel" placeholder="请选择" clearable>
+                        <el-option
+                            v-for="item in formDevModelOptionsFilter"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="通讯协议:" prop="devAccessMethod" class="top">
+                    <el-select v-model="form.devAccessMethod" placeholder="请选择" clearable>
+                        <el-option label="MQTT" value="MQTT"></el-option>
+                        <el-option label="CLD" value="cloud"></el-option>
+                    </el-select>
+                </el-form-item>
+
+                <el-form-item label="合同号:" prop="cntractNo" class="top">
+                    <el-input v-model="form.cntractNo" autocomplete="off" placeholder="请输入"></el-input>
+                </el-form-item>
+            </el-form>
+            <template #footer>
+                <el-button @click="resetForm">取 消</el-button>
+                <el-button type="primary" @click="onSubmit">确 定</el-button>
+            </template>
+        </el-dialog>
+
+        <div class="qrcode-label">
+            <div class="qrcode-label-title">{{ deivce.mac }}</div>
+            <img class="qrcode-label-img" alt="二维码加载失败" :src="deivce.qrPath" />
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, provide, computed, reactive, nextTick } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+    addEquipmentDelivery,
+    deleteEquipmentDelivery,
+    editEquipmentDelivery,
+    batchImportDevice,
+    resetEquipmentDelivery,
+    governDeviceRegister,
+    portableDeviceRegister,
+    portableDeviceAccess
+} from '@/api/cs-system-boot/device'
+import html2canvas from 'html2canvas'
+import { fullUrl } from '@/utils/common'
+
+defineOptions({
+    name: 'govern/log/debug'
+})
+
+const devTypeOptions: any = ref([])
+const deivce: any = ref({})
+const ruleFormRef = ref()
+const form = reactive({
+    cntractNo: '',
+    devAccessMethod: 'mqtt',
+    devModel: '',
+    devType: '',
+    name: '',
+    ndid: ''
+})
+const rules = reactive({
+    name: [{ required: true, message: '设备名不能为空', trigger: 'blur' }],
+    ndid: [{ required: true, message: '网络设备id不能为空', trigger: 'blur' }],
+    devType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }],
+    devModel: [{ required: true, message: '设备型号不能为空', trigger: 'change' }],
+    devAccessMethod: [{ required: true, message: '接入方式不能为空', trigger: 'blur' }],
+    cntractNo: [{ required: true, message: '合同号不能为空', trigger: 'blur' }]
+})
+const dialogFormVisible = ref(false)
+const dialogTitle = ref('新增设备')
+
+const devModelOptions: any = ref([])
+queryByCode('Device_Type').then(res => {
+    queryCsDictTree(res.data.id).then(res => {
+        devTypeOptions.value = res.data.map((item: any) => {
+            return {
+                value: item.id,
+                label: item.name,
+                ...item
+            }
+        })
+    })
+    queryByid(res.data.id).then(res => {
+        devModelOptions.value = res.data.map((item: any) => {
+            return {
+                value: item.id,
+                label: item.name,
+                ...item
+            }
+        })
+    })
+})
+const devModelOptionsFilter = computed(() => {
+    return devModelOptions.value.filter((item: any) => {
+        if (tableStore.table.params.devType) {
+            return item.pid == tableStore.table.params.devType
+        } else {
+            return true
+        }
+    })
+})
+const formDevModelOptionsFilter = computed(() => {
+    return devModelOptions.value.filter((item: any) => {
+        if (form.devType) {
+            return item.pid == form.devType
+        } else {
+            return true
+        }
+    })
+})
+
+const tableStore = new TableStore({
+    url: '/cs-device-boot/EquipmentDelivery/list',
+    method: 'POST',
+    column: [
+        { title: '设备名称', field: 'name' },
+        {
+            title: '设备类型',
+            field: 'devType',
+            formatter: row => {
+                return devTypeOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
+            }
+        },
+        {
+            title: '设备型号',
+            field: 'devModel',
+            formatter: row => {
+                return devModelOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
+            }
+        },
+        {
+            title: '通讯协议',
+            field: 'devAccessMethod',
+            formatter: row => {
+                return row.cellValue === 'MQTT' ? 'MQTT' : row.cellValue === 'cloud' ? 'CLD' : row.cellValue
+            }
+        },
+        { title: '录入时间', field: 'createTime' },
+        { title: '网络设备ID', field: 'ndid' },
+        {
+            title: '状态',
+            field: 'status',
+            width: 100,
+            render: 'tag',
+            custom: {
+                1: 'warning',
+                2: 'success',
+                3: 'primary',
+                4: 'primary'
+            },
+            replaceValue: {
+                1: '未注册',
+                2: '注册',
+                3: '接入',
+                4: '已取消'
+            }
+            // formatter: row => {
+            //     return row.cellValue == 1 ? '未注册' : row.cellValue == 2 ? '注册' : '接入'
+            // },
+        },
+        {
+            title: '操作',
+            align: 'center',
+            width: '180',
+            render: 'buttons',
+            buttons: [
+                {
+                    name: 'edit',
+                    title: '编辑',
+                    type: 'primary',
+                    icon: 'el-icon-EditPen',
+                    render: 'basicButton',
+
+                    click: async row => {
+                        dialogFormVisible.value = true
+                        dialogTitle.value = '编辑设备'
+                        for (let key in form) {
+                            form[key] = row[key]
+                        }
+                        form.id = row.id
+                    }
+                },
+                {
+                    name: 'del',
+                    title: '删除',
+                    type: 'danger',
+                    icon: 'el-icon-Delete',
+                    render: 'basicButton',
+                    click: row => {
+                        ElMessageBox.confirm('确定删除该设备吗?', '提示', {
+                            confirmButtonText: '确认',
+                            cancelButtonText: '取消',
+                            type: 'warning'
+                        })
+                            .then(() => {
+                                deleteEquipmentDelivery(row.id).then(res => {
+                                    ElMessage.success('删除成功!')
+                                    tableStore.onTableAction('search', {})
+                                })
+                            })
+                            .catch(e => {})
+                    }
+                }
+            ]
+        }
+    ],
+    beforeSearchFun: () => {
+        for (let key in tableStore.table.params) {
+            if (tableStore.table.params[key] === '') {
+                delete tableStore.table.params[key]
+            }
+        }
+    }
+})
+tableStore.table.params.orderBy = 'desc'
+
+// 设备类型
+const devTypeChange = (e: any) => {
+    if (!e) {
+        return
+    }
+    tableStore.table.params.devModel = ''
+}
+// 下载模版
+const downLoadFile = () => {
+    window.open(window.location.origin + '/api/cs-device-boot/EquipmentDelivery/getExcelTemplate')
+}
+
+// 导入模版
+const bulkImport = (e: any) => {
+    batchImportDevice(e.raw).then((res: any) => {
+        if (res.type === 'application/json') {
+            const reader = new FileReader()
+            reader.readAsText(res)
+            reader.onload = (e: any) => {
+                let data = JSON.parse(e.target.result)
+                if (data.code === 'A0000') {
+                    ElMessage.success(data.message)
+                    tableStore.onTableAction('search', {})
+                } else {
+                    ElMessage.error(data.message)
+                }
+            }
+        } else {
+            ElMessage.error('导入失败!')
+            let url = window.URL.createObjectURL(res)
+            let link = document.createElement('a')
+            link.style.display = 'none'
+            link.href = url
+            link.setAttribute('download', '导入失败.xlsx')
+            document.body.appendChild(link)
+            link.click()
+            document.body.removeChild(link)
+        }
+    })
+}
+// 新增
+const add = () => {
+    dialogFormVisible.value = true
+    dialogTitle.value = '新增设备'
+}
+
+// 确认
+const onSubmit = () => {
+    ruleFormRef.value.validate((valid: any) => {
+        if (valid) {
+            if (dialogTitle.value == '新增设备') {
+                addEquipmentDelivery(form).then(res => {
+                    ElMessage.success('新增成功')
+                    resetForm()
+                    tableStore.onTableAction('search', {})
+                })
+            } else {
+                editEquipmentDelivery(form).then(res => {
+                    ElMessage.success('修改成功')
+                    resetForm()
+                    tableStore.onTableAction('search', {})
+                })
+            }
+        }
+    })
+}
+// 清空表格
+const resetForm = () => {
+    ruleFormRef.value.resetFields()
+    dialogFormVisible.value = false
+    nextTick(() => {
+        // 模拟待编辑数据
+        let user = {
+            cntractNo: '',
+            devAccessMethod: 'mqtt',
+            devModel: '',
+            devType: '',
+            name: '',
+            ndid: ''
+        }
+        Object.assign(form, user)
+    })
+}
+
+const formDevTypeChange = (e: any) => {
+    if (!e) {
+        return
+    }
+    form.devModel = ''
+}
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    setTimeout(() => {
+        tableStore.index()
+    }, 100)
+})
+
+const addMenu = () => {}
+</script>
+<style lang="scss" scoped>
+.qrcode-label {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: -99;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 180px;
+    height: 180px;
+    padding: 10px;
+    background: #fff;
+    flex-direction: column;
+
+    .qrcode-label-title {
+        margin-bottom: 10px;
+        font-size: 14px;
+        font-weight: bold;
+    }
+
+    .qrcode-label-img {
+        width: 140px;
+        height: 140px;
+    }
+}
+</style>

src/views/govern/terminal/planData/index.vue

@@ -0,0 +1,504 @@
+<template>
+    <div class="default-main device-manage" :style="{ height: pageHeight.height }" v-loading="loading">
+        <DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
+        <div class="device-manage-right" v-if="deviceData">
+            <el-descriptions title="测试项信息" class="mb10" :column="4" border>
+                <template #extra>
+                    <el-button type="primary" icon="el-icon-Plus" @click="handleOpen(0)">新增方案</el-button>
+                    <el-button type="primary" icon="el-icon-Plus" @click="handleOpen(1)">
+                        新增测试项
+                    </el-button>
+                </template>
+                <el-descriptions-item label="测试项名称">
+                    {{ deviceData.name }}
+                </el-descriptions-item>
+                <el-descriptions-item label="PT变比">
+                    {{ echoName(deviceData.devType, devTypeOptions) }}
+                </el-descriptions-item>
+
+                <el-descriptions-item label="CT变比">
+                    {{ deviceData.devAccessMethod }}
+                </el-descriptions-item>
+                <el-descriptions-item label="统计间隔">
+                    {{ deviceData.ndid }}
+                </el-descriptions-item>
+                <el-descriptions-item label="电压等级">
+                    {{ echoName(deviceData.devModel, devModelOptions) }}
+                </el-descriptions-item>
+                <el-descriptions-item label="接线方式">
+                    {{ deviceData.time }}
+                </el-descriptions-item>
+                <el-descriptions-item label="起始时间">
+                    {{ deviceData.time }}
+                </el-descriptions-item>
+                <el-descriptions-item label="结束时间">
+                    {{ deviceData.time }}
+                </el-descriptions-item>
+                <el-descriptions-item label="安装位置">
+                    {{ echoName(deviceData.devModel, devModelOptions) }}
+                </el-descriptions-item>
+                <el-descriptions-item label="操作">
+                    <el-button type="primary" icon="el-icon-EditPen" @click="handleOpen(2)">修改</el-button>
+                    <el-button type="primary" icon="el-icon-InfoFilled" @click="handleOpen(3)">
+                        设备信息
+                    </el-button>
+                </el-descriptions-item>
+            </el-descriptions>
+
+            <div class="history_title">
+                <p>历史趋势</p>
+            </div>
+            <div class="history_header">
+                <el-form :model="form" class="history_select">
+                    <el-form-item label="统计指标">
+                        <el-select v-model="form.index" placeholder="请选择统计指标" clearable>
+                            <el-option
+                                v-for="item in rankOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="值类型">
+                        <el-select v-model="form.type" placeholder="请选择值类型" clearable>
+                            <el-option
+                                v-for="item in rankOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+                <div class="history_searchBtn">
+                    <el-button type="primary" icon="el-icon-Search" @click="handleSearch">查询</el-button>
+                    <el-button type="primary" icon="el-icon-Download" @click="handleExport">报表导出</el-button>
+                </div>
+            </div>
+            <div class="history_chart">
+                <MyEchart :options="echartsData" v-if="echartsData" />
+            </div>
+            <!-- <el-tabs v-model="dataSet" type="border-card" class="device-manage-box-card" @tab-click="handleClick">
+                <el-tab-pane
+                    lazy
+                    :label="item.name"
+                    :name="item.id"
+                    v-for="(item, index) in deviceData.dataSetList"
+                    :key="index"
+                ></el-tab-pane>
+                <div :style="{ height: tableHeight }" v-loading="tableLoading">
+                    <vxe-table v-bind="defaultAttribute" :data="tableData" height="auto" style="width: 100%">
+                        <vxe-column type="seq" title="序号" width="80"></vxe-column>
+                        <vxe-column field="name" title="数据名称"></vxe-column>
+                        <vxe-column field="phasic" title="相别"></vxe-column>
+                        <vxe-column field="type" title="数据类型"></vxe-column>
+                        <vxe-column field="unit" title="单位"></vxe-column>
+                        <vxe-column field="startTimes" title="开始次数"></vxe-column>
+                        <vxe-column field="endTimes" title="结束次数"></vxe-column>
+                    </vxe-table>
+                </div>
+            </el-tabs> -->
+        </div>
+        <el-empty v-else description="请选择设备" class="device-manage-right" />
+        <MangePopup ref="mangePopup" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import MangePopup from './popup.vue'
+import DeviceTree from '@/components/tree/govern/deviceTree.vue'
+import { mainHeight } from '@/utils/layout'
+import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
+import { getDeviceData } from '@/api/cs-device-boot/EquipmentDelivery'
+// import { getTargetById } from '@/api/cs-device-boot/csDatalistay'
+import { getGroup } from '@/api/cs-device-boot/csGroup'
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { getDeviceDataTrend } from '@/api/cs-harmonic-boot/datatrend'
+defineOptions({
+    name: 'govern/device/manage'
+})
+const pageHeight = mainHeight(20)
+const loading = ref(true)
+const tableLoading = ref(false)
+const getGroupLoading = ref(false)
+const deviceData = ref<any>(null)
+const dataSet = ref('')
+const devTypeOptions = ref([])
+const devModelOptions = ref([])
+const tableData = ref([])
+const tableHeight = mainHeight(235).height
+const form = ref({})
+form.value = {
+    index: '',
+    type: ''
+}
+const rankOptions = ref([
+    {
+        value: '1',
+        label: '1级'
+    },
+    {
+        value: '2',
+        label: '2级'
+    },
+    {
+        value: '3',
+        label: '3级'
+    }
+])
+const nodeClick = (e: anyObj) => {
+    if (!e) {
+        loading.value = false
+        return
+    }
+    if (e.level == 2) {
+        loading.value = true
+        getDeviceData(e.id, 'rt').then((res: any) => {
+            deviceData.value = res.data
+            loading.value = false
+            if (res.data.dataSetList.length === 0) {
+                dataSet.value = ''
+                tableData.value = []
+            } else {
+                dataSet.value = res.data.dataSetList[0].id
+                handleClick()
+            }
+        })
+    }
+}
+const handleClick = () => {
+    tableLoading.value = true
+    tableData.value = []
+    setTimeout(() => {
+        // getTargetById(dataSet.value).then(res => {
+        //     tableData.value = res.data
+        //     tableLoading.value = false
+        // })
+    }, 100)
+}
+queryByCode('Device_Type').then(res => {
+    queryCsDictTree(res.data.id).then(res => {
+        devTypeOptions.value = res.data.map((item: any) => {
+            return {
+                value: item.id,
+                label: item.name,
+                ...item
+            }
+        })
+    })
+    queryByid(res.data.id).then(res => {
+        devModelOptions.value = res.data.map((item: any) => {
+            return {
+                value: item.id,
+                label: item.name,
+                ...item
+            }
+        })
+    })
+})
+const echoName = (value: any, list: any[]) => {
+    return list.find(item => item.value == value)?.label
+}
+
+const mangePopup = ref()
+const handleOpen = (val: any) => {
+    mangePopup.value.open(val)
+}
+
+const echartsData = ref<any>(null)
+//加载echarts图表
+const init = () => {
+    echartsData.value = null
+    loading.value = true
+    // prettier-ignore
+    const data = [["2000-06-05", 116], ["2000-06-06", 129], ["2000-06-07", 135], ["2000-06-08", 86], ["2000-06-09", 73], ["2000-06-10", 85], ["2000-06-11", 73], ["2000-06-12", 68], ["2000-06-13", 92], ["2000-06-14", 130], ["2000-06-15", 245], ["2000-06-16", 139], ["2000-06-17", 115], ["2000-06-18", 111], ["2000-06-19", 309], ["2000-06-20", 206], ["2000-06-21", 137], ["2000-06-22", 128], ["2000-06-23", 85], ["2000-06-24", 94], ["2000-06-25", 71], ["2000-06-26", 106], ["2000-06-27", 84], ["2000-06-28", 93], ["2000-06-29", 85], ["2000-06-30", 73], ["2000-07-01", 83], ["2000-07-02", 125], ["2000-07-03", 107], ["2000-07-04", 82], ["2000-07-05", 44], ["2000-07-06", 72], ["2000-07-07", 106], ["2000-07-08", 107], ["2000-07-09", 66], ["2000-07-10", 91], ["2000-07-11", 92], ["2000-07-12", 113], ["2000-07-13", 107], ["2000-07-14", 131], ["2000-07-15", 111], ["2000-07-16", 64], ["2000-07-17", 69], ["2000-07-18", 88], ["2000-07-19", 77], ["2000-07-20", 83], ["2000-07-21", 111], ["2000-07-22", 57], ["2000-07-23", 55], ["2000-07-24", 60]];
+    const dateList = data.map(function (item) {
+        return item[0]
+    })
+    const valueList = data.map(function (item) {
+        return item[1]
+    })
+    const iconThree =
+        'path://M512 85.333333c235.637333 0 426.666667 191.029333 426.666667 426.666667S747.637333 938.666667 512 938.666667 85.333333 747.637333 85.333333 512 276.362667 85.333333 512 85.333333z m214.592 318.677334a32 32 0 0 0-45.248 0.064L544.736 541.066667l-81.792-89.109334a32 32 0 0 0-46.613333-0.576l-119.36 123.733334a32 32 0 1 0 46.058666 44.437333l95.754667-99.264 81.418667 88.704a32 32 0 0 0 46.24 0.96l160.213333-160.693333a32 32 0 0 0-0.064-45.248z'
+    const iconDanger =
+        'path://M1001.661867 796.544c48.896 84.906667 7.68 157.013333-87.552 157.013333H110.781867c-97.834667 0-139.050667-69.504-90.112-157.013333l401.664-666.88c48.896-87.552 128.725333-87.552 177.664 0l401.664 666.88zM479.165867 296.533333v341.333334a32 32 0 1 0 64 0v-341.333334a32 32 0 1 0-64 0z m0 469.333334v42.666666a32 32 0 1 0 64 0v-42.666666a32 32 0 1 0-64 0z'
+    echartsData.value = {
+        options: {
+            title: [
+                {
+                    left: 'center',
+                    text: '10KV 母线_监测点 相电压有效值'
+                }
+            ],
+            // backgroundColor: '#1B232E',
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                }
+                // textStyle: {
+                //     color: 'rgba(255, 255, 255, 1)'
+                // },
+                // backgroundColor: 'rgba(0, 0, 0, 0.8)',
+                // borderColor: 'rgba(219, 230, 255, 0.8)'
+            },
+            legend: {
+                //legend使用iconfont图标
+                data: [
+                    {
+                        name: 'A相',
+                        icon: iconThree
+                    },
+                    {
+                        name: 'B相',
+                        icon: iconThree
+                    },
+                    {
+                        name: 'C相',
+                        icon: iconThree
+                    },
+                    {
+                        name: '暂降',
+                        icon: iconDanger
+                    }
+                ],
+                x: 'right',
+                textStyle: {
+                    // color: 'white',
+                    fontSize: 14
+                },
+                top: 10,
+                right: 50,
+                itemWidth: 20,
+                itemHeight: 10,
+                itemGap: 15
+            },
+            grid: {
+                left: '1%',
+                right: '5%',
+                bottom: '2%',
+                top: '10%',
+                containLabel: true
+            },
+            xAxis: [
+                {
+                    type: 'category',
+                    name: '时间',
+                    axisLabel: {
+                        color: '#A9AEB2',
+                        fontSize: 12
+                    },
+                    data: ['01:12', '02:12', '03:12', '04:12', '05:12', '06:12', '07:12', '08:12', '09:12', '10:12'],
+                    axisLine: {
+                        lineStyle: {
+                            color: '#43485E'
+                        }
+                    }
+                }
+            ],
+            yAxis: [
+                {
+                    type: 'value',
+                    name: 'KV',
+                    axisLabel: {
+                        color: '#A9AEB2',
+                        fontSize: 12
+                    },
+                    axisTick: {
+                        show: true
+                    },
+                    axisLine: {
+                        show: true,
+                        lineStyle: {
+                            // color: 'white'
+                        }
+                    },
+                    nameTextStyle: {
+                        color: '#A9AEB2',
+                        fontSize: '12'
+                    },
+                    splitLine: {
+                        show: false,
+                        lineStyle: {
+                            color: ['#43485E'],
+                            width: 1,
+                            type: 'solid'
+                        }
+                    }
+                }
+            ],
+            dataZoom: [
+                {
+                    type: 'inside',
+                    show: true,
+                    realtime: true,
+                    start: 0,
+                    end: 100
+                },
+                {
+                    type: 'slider',
+                    realtime: true,
+                    start: 0,
+                    end: 100,
+                    textStyle: {
+                        // color: 'white'
+                    },
+                    bottom: 0,
+                    borderColor: '#0e2038',
+                    dataBackground: {
+                        areaStyle: {
+                            // color: 'white'
+                        }
+                    }
+                }
+            ],
+            series: [
+                {
+                    name: 'A相',
+                    type: 'line',
+                    smooth: true,
+                    emphasis: {
+                        focus: 'series'
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: '#DAA521',
+                            lineStyle: {
+                                color: '#DAA521'
+                            }
+                        }
+                    },
+                    data: [80, 90, 70, 60, 50, 40, 30, 50, 60, 70]
+                },
+                {
+                    name: 'B相',
+                    type: 'line',
+                    smooth: true,
+                    emphasis: {
+                        focus: 'series'
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: '#2E8B58',
+                            lineStyle: {
+                                color: '#2E8B58'
+                            }
+                        }
+                    },
+                    data: [70, 55, 36, 55, 42, 30, 25, 24, 23, 21]
+                },
+                {
+                    name: 'C相',
+                    type: 'line',
+                    smooth: true,
+                    emphasis: {
+                        focus: 'series'
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: '#A5292A',
+                            lineStyle: {
+                                color: '#A5292A'
+                            }
+                        }
+                    },
+                    data: [45, 53, 32, 29, 45, 36, 39, 34, 32, 31]
+                },
+                {
+                    name: '暂降',
+                    type: 'line',
+                    smooth: true,
+                    emphasis: {
+                        focus: 'series'
+                    },
+                    itemStyle: {
+                        normal: {
+                            color: '#d81e06',
+                            lineStyle: {
+                                color: '#d81e06'
+                            }
+                        }
+                    },
+                    data: []
+                }
+            ]
+        }
+    }
+}
+//搜素
+const handleSearch = () => {
+    console.log(form.value, '搜索')
+}
+//导出
+const handleExport = () => {
+    console.log(form.value, '导出')
+}
+
+onMounted(() => {
+    init()
+})
+</script>
+
+<style lang="scss" scoped>
+.device-manage {
+    display: flex;
+    height: calc(100vh - 100px);
+    // overflow-y: auto;
+    &-right {
+        // overflow: auto;
+        flex: 1;
+        padding: 10px 10px 10px 0;
+        .el-descriptions__header {
+            height: 36px;
+            margin-bottom: 7px;
+            display: flex;
+            align-items: center;
+        }
+    }
+    .device-manage-right {
+        overflow: hidden;
+        flex: 1 !important;
+        padding: 10px 10px 10px 0;
+        .el-descriptions__header {
+            height: 36px;
+            margin-bottom: 7px;
+            display: flex;
+            align-items: center;
+        }
+    }
+}
+.history_title {
+    width: 100%;
+    p {
+        height: 32px;
+        line-height: 32px;
+        font-size: 16px;
+        font-weight: bold;
+    }
+}
+.history_header {
+    display: flex;
+    .history_select {
+        width: 65%;
+        display: flex;
+        justify-content: flex-start;
+        .el-select {
+            margin-right: 10px;
+        }
+    }
+    .history_searchBtn {
+        flex: 1;
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+.history_chart {
+    width: 100%;
+    height: calc(100vh - 400px);
+    margin-top: 10px;
+}
+</style>

src/views/govern/terminal/planData/popup.vue

@@ -0,0 +1,257 @@
+<template>
+    <el-dialog
+        class="cn-operate-dialog device-manage-popup"
+        v-model="dialogVisible"
+        :title="title"
+        draggable
+        :style="{ width: activeFormIndex == 0 ? '500px' : '65%' }"
+    >
+        <el-form
+            :model="form"
+            scroll-to-error
+            :class="activeFormIndex == 0 ? 'form-one' : 'form-two'"
+            label-width="120px"
+        >
+            <!-- 新增方案数据 -->
+            <el-form-item label="统计指标：" v-if="activeFormIndex == 0">
+                <el-select v-model="form.index" placeholder="请选择统计指标" clearable>
+                    <el-option
+                        v-for="item in rankOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <el-form-item label="值类型：" v-if="activeFormIndex == 0">
+                <el-select v-model="form.type" placeholder="请选择值类型" clearable>
+                    <el-option
+                        v-for="item in rankOptions"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                    ></el-option>
+                </el-select>
+            </el-form-item>
+            <!-- 新增/修改测试项数据 多个循环处理-->
+            <div v-if="activeFormIndex == 1 || activeFormIndex == 2">
+                <div class="form-two monitor" v-for="(item, index) in form?.monitorList" :key="index">
+                    <div class="monitor_add">
+                        <el-button v-if="index == 0" :icon="Plus" circle @click="handleAddMointor"></el-button>
+                        <el-button v-if="index != 0" :icon="Minus" circle @click="handleDelMointor(index)"></el-button>
+                    </div>
+                    <el-divider content-position="left">测试项信息{{ index + 1 }}</el-divider>
+                    <el-form-item label="测试项名称：">
+                        <el-input v-model="item.name" placeholder="请输入测试项名称" />
+                    </el-form-item>
+                    <el-form-item label="测量间隔：">
+                        <el-input v-model="item.name" placeholder="请输入测量间隔" />
+                    </el-form-item>
+                    <el-form-item label="电压等级：">
+                        <el-select v-model="item.voltageLevel" placeholder="请选择电压等级" clearable>
+                            <el-option
+                                v-for="item in rankOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="接线方式：">
+                        <el-select v-model="item.line" placeholder="请选择接线方式" clearable>
+                            <el-option
+                                v-for="item in rankOptions"
+                                :key="item.value"
+                                :label="item.label"
+                                :value="item.value"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="最小短路容量：">
+                        <el-input
+                            v-model="item.minShortCircuitCapacity"
+                            oninput="value=value.replace(/[^\-?\d.]/g,'')
+.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
+.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
+                            autocomplete="off"
+                            placeholder="请选择最小短路容量"
+                        >
+                            <template #append>MVA</template>
+                        </el-input>
+                    </el-form-item>
+
+                    <el-form-item label="用户协议容量：">
+                        <el-input
+                            v-model="item.userAgreementCapacity"
+                            autocomplete="off"
+                            oninput="value=value.replace(/[^\-?\d.]/g,'')
+.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
+.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
+                            placeholder="请输入用户协议容量"
+                        >
+                            <template #append>MVA</template>
+                        </el-input>
+                    </el-form-item>
+
+                    <el-form-item label="基准短路容量：">
+                        <el-input
+                            v-model="item.baseShortCircuitCapacity"
+                            oninput="value=value.replace(/[^\-?\d.]/g,'')
+.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
+.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
+                            placeholder="请输入基准短路容量"
+                        >
+                            <template #append>MVA</template>
+                        </el-input>
+                    </el-form-item>
+
+                    <el-form-item label="供电设备容量：">
+                        <el-input
+                            v-model="item.pccEquipmentCapacity"
+                            oninput="value=value.replace(/[^\-?\d.]/g,'')
+.replace(/^\./g,'').replace('.','$#$').replace(/\./g,'').replace('$#$','.')
+.replace('-','$#$').replace(/\-/g,'').replace('$#$','-')"
+                            placeholder="请输入供电设备容量"
+                        >
+                            <template #append>MVA</template>
+                        </el-input>
+                    </el-form-item>
+                    <el-form-item label="PT变比：" prop="pt1">
+                        <el-input
+                            style="width: 48%"
+                            v-model="item.pt1"
+                            autocomplete="off"
+                            placeholder="请输入PT变比"
+                            oninput="value=value.replace(/[^0-9.]/g,'')"
+                        />
+                        <el-input
+                            style="width: 48%"
+                            v-model="item.pt2"
+                            autocomplete="off"
+                            placeholder="请输入PT变比"
+                            oninput="value=value.replace(/[^0-9.]/g,'')"
+                        />
+                    </el-form-item>
+                    <el-form-item label="CT变比：" prop="ct1">
+                        <el-input
+                            v-model="item.ct1"
+                            style="width: 48%"
+                            autocomplete="off"
+                            oninput="value=value.replace(/[^0-9.]/g,'')"
+                            placeholder="请输入CT变比"
+                        />
+                        <el-input
+                            v-model="item.ct2"
+                            style="width: 48%"
+                            autocomplete="off"
+                            oninput="value=value.replace(/[^0-9.]/g,'')"
+                            placeholder="请输入CT变比"
+                        />
+                    </el-form-item>
+                    <el-form-item label="监测位置：">
+                        <el-input v-model="item.position" placeholder="请输入监测位置" />
+                    </el-form-item>
+                </div>
+            </div>
+            <!-- 设备信息列表 -->
+        </el-form>
+        <template #footer="">
+            <el-button @click="dialogVisible = false">取 消</el-button>
+            <el-button type="primary" @click="submit">确 定</el-button>
+        </template>
+    </el-dialog>
+</template>
+<script lang="ts" setup>
+import { ref, inject } from 'vue'
+import { ElMessage } from 'element-plus'
+import { Plus, Minus } from '@element-plus/icons-vue'
+const dialogVisible = ref(false)
+const form = ref({})
+form.value = {
+    index: '',
+    type: '',
+    //测试项数据
+    monitorList: [
+        {
+            name: '', //测试项名称
+            interval: '', //测量间隔
+            voltageLevel: '', //电压等级
+            line: '', //接线方式
+            minShortCircuitCapacity: '', //最小短路容量
+            userAgreementCapacity: '', //用户协议容量
+            baseShortCircuitCapacity: '', //基准短路容量
+            pccEquipmentCapacity: '', //供电设备容量
+            pt1: 1, //pt变比1
+            pt2: 1, //pt变比2
+            ct1: 300, //ct变比1
+            ct2: 5, //ct变比2
+            position: '' //监测位置
+        }
+    ]
+}
+const rankOptions = ref([
+    {
+        value: '1',
+        label: '1级'
+    },
+    {
+        value: '2',
+        label: '2级'
+    },
+    {
+        value: '3',
+        label: '3级'
+    }
+])
+const submit = () => {
+    console.log('submit!')
+}
+const title: any = ref('')
+const activeFormIndex: any = ref(null)
+const open = (val: any) => {
+    activeFormIndex.value = val
+    title.value = val == 0 ? '新增方案' : val == 1 ? '新增测试项' : val == 2 ? '修改' : '设备信息'
+    dialogVisible.value = true
+}
+//添加测试项
+const handleAddMointor = () => {
+    form.value.monitorList = [
+        {
+            name: '', //测试项名称
+            interval: '', //测量间隔
+            voltageLevel: '', //电压等级
+            line: '', //接线方式
+            minShortCircuitCapacity: '', //最小短路容量
+            userAgreementCapacity: '', //用户协议容量
+            baseShortCircuitCapacity: '', //基准短路容量
+            pccEquipmentCapacity: '', //供电设备容量
+            pt1: 1, //pt变比1
+            pt2: 1, //pt变比2
+            ct1: 300, //ct变比1
+            ct2: 5, //ct变比2
+            position: '' //监测位置
+        },
+        ...form.value.monitorList
+    ]
+}
+//移除测试项
+const handleDelMointor = index => {
+    form.value.monitorList.splice(index, 1)
+}
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+::v-deep .el-form-item__content {
+    display: flex !important;
+    justify-content: space-between !important;
+}
+.monitor {
+    position: relative;
+    padding: 10px 50px;
+    .monitor_add {
+        position: absolute;
+        right: 5px;
+        top: 10px;
+    }
+}
+</style>