cion

src/views/voltage/sags/operationsManagement/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class='default-main'>
-        <TableHeader date-picker>
+        <TableHeader date-picker :showOperation='false'>
             <template v-slot:select>
                 <el-form-item label='区域'>
                     <Area v-model='tableStore.table.params.deptIndex' />

src/views/voltage/sags/operationsManagement/point.vue

@@ -0,0 +1,141 @@
+<template>
+    <div class='default-main'>
+        <TableHeader date-picker :showOperation='false'>
+            <template v-slot:select>
+                <el-form-item label='区域'>
+                    <Area v-model='tableStore.table.params.deptIndex' />
+                </el-form-item>
+                <el-form-item label='终端状态'>
+                    <el-select v-model='form.runFlag' placeholder='请选择' @change='onRunFlagChange'>
+                        <el-option label='投运' value='0' />
+                        <el-option label='热备用' value='1' />
+                        <el-option label='停运' value='2' />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label='通讯状态'>
+                    <el-select v-model='form.comFlag' placeholder='请选择' @change='onComFlagChange'>
+                        <el-option label='正常' value='1' />
+                        <el-option label='中断' value='0' />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label='厂家'>
+                    <el-select v-model='form.manufacturer' placeholder='请选择' @change='onManufacturerChange'>
+                        <el-option
+                            v-for='item in manufacturer'
+                            :key='item.id'
+                            :label='item.name'
+                            :value='item.id'
+                        />
+                    </el-select>
+                </el-form-item>
+                <el-form-item label='筛选数据'>
+                    <el-input v-model='tableStore.table.params.searchValue'
+                              placeholder='根据变电站,终端编号,型号或网络参数查询' style='width:300px' />
+                </el-form-item>
+            </template>
+        </TableHeader>
+        <Table ref='tableRef' />
+    </div>
+</template>
+<script setup lang='tsx'>
+import { ref, onMounted, provide, reactive } from 'vue'
+import TableStore from '@/utils/tableStore'
+import Table from '@/components/table/index.vue'
+import TableHeader from '@/components/table/header/index.vue'
+import { useDictData } from '@/stores/dictData'
+import Area from '@/components/form/area/index.vue'
+
+defineOptions({
+    name: 'comptroller/list'
+})
+const dictData = useDictData()
+const manufacturer = dictData.getBasicData('Dev_Manufacturers')
+const tableStore = new TableStore({
+    isWebPaging: true,
+    url: '/device-boot/runManage/getRuntimeData',
+    method: 'POST',
+    column: [
+        { title: '序号', type: 'seq', align: 'center', width: 60 },
+        { title: '区域', field: 'areaName', align: 'center', width: 120 },
+        { title: '供电公司', field: 'gdName', align: 'center', width: 120 },
+        { title: '变电站', field: 'bdName', align: 'center', showOverflow: true, minWidth: 100 },
+        { title: '终端编号', field: 'devName', align: 'center', width: 160 },
+        { title: '投运时间', field: 'loginTime', align: 'center', width: 200 },
+        { title: '厂家', field: 'manufacturer', align: 'center', width: 160 },
+        { title: '型号', field: 'devType', align: 'center', width: 200 },
+        { title: '网络参数', field: 'ip', align: 'center', width: 200 },
+        { title: '端口', field: 'port', align: 'center', width: 100 },
+        { title: '终端状态', field: 'runFlag', align: 'center', width: 100 },
+        { title: '通讯状态', field: 'comFlag', align: 'center', width: 100 },
+        { title: '最新数据', field: 'updateTime', align: 'center', width: 200 },
+        {
+            title: '评价',
+            field: 'onlineEvaluate',
+            align: 'center',
+            width: 100,
+            render: 'customRender',
+            customRender: props => {
+                if (props.renderValue == null) {
+                    return <span></span>
+                } else if (props.renderValue * 100 > 90) {
+                    return (
+                        <el-tag effect='dark' type='success'>
+                            优
+                        </el-tag>
+                    )
+                } else if (props.renderValue * 100 > 60) {
+                    return (
+                        <el-tag effect='dark' type='warning'>
+                            良
+                        </el-tag>
+                    )
+                } else {
+                    return (
+                        <el-tag effect='dark' type='danger'>
+                            差
+                        </el-tag>
+                    )
+                }
+            }
+        }
+    ],
+    resetCallback: () => {
+        form.runFlag = ''
+        form.comFlag = ''
+        form.manufacturer = ''
+    }
+})
+const form = reactive({
+    runFlag: '',
+    comFlag: '',
+    manufacturer: ''
+})
+tableStore.table.params.deptIndex = dictData.state.area[0].id
+tableStore.table.params.runFlag = []
+tableStore.table.params.comFlag = []
+tableStore.table.params.manufacturer = []
+tableStore.table.params.statisticalType = {}
+tableStore.table.params.serverName = 'event-boot'
+tableStore.table.params.searchValue = ''
+provide('tableStore', tableStore)
+
+onMounted(() => {
+    tableStore.index()
+})
+
+const onRunFlagChange = (val: any) => {
+    tableStore.table.params.runFlag = [val]
+}
+const onComFlagChange = (val: any) => {
+    tableStore.table.params.comFlag = [val]
+}
+const onManufacturerChange = (val: any) => {
+    let obj = manufacturer.find(item => item.id === val) as any
+    obj.label = obj.name
+    obj.value = obj.id
+    tableStore.table.params.manufacturer = [obj]
+}
+
+const addMenu = () => {
+}
+</script>