Merge branch 'master' of http://47.111.81.118:3000/xf15575941817/admin-fiveFollowing

src/router/index.js

@@ -2,25 +2,25 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import Layout from '@/layout'
 
 export const constantRoutes = [{
-    path: '/login',
-    component: () =>
-        import('@/views/login'),
-    hidden: true,
-},
-{
-    path: '/403',
-    name: '403',
-    component: () =>
-        import('@/views/403'),
-    hidden: true,
-},
-{
-    path: '/404',
-    name: '404',
-    component: () =>
-        import('@/views/404'),
-    hidden: true,
-},
+        path: '/login',
+        component: () =>
+            import ('@/views/login'),
+        hidden: true,
+    },
+    {
+        path: '/403',
+        name: '403',
+        component: () =>
+            import ('@/views/403'),
+        hidden: true,
+    },
+    {
+        path: '/404',
+        name: '404',
+        component: () =>
+            import ('@/views/404'),
+        hidden: true,
+    },
 ]
 export const asyncRoutes = [
 
@@ -55,16 +55,16 @@ export const asyncRoutes = [
         },
         component: Layout,
         children: [{
-            meta: {
-                title: '告警管理',
-                icon: 'alarmManage',
-                affix: true,
-            },
-            path: 'index',
-            component: () =>
-                import('@/views/alarmManage/index'),
+                meta: {
+                    title: '告警管理',
+                    icon: 'alarmManage',
+                    affix: true,
+                },
+                path: 'index',
+                component: () =>
+                    import ('@/views/alarmManage/index'),
 
-        },
+            },
 
         ]
     },
@@ -83,44 +83,30 @@ export const asyncRoutes = [
             },
             path: '/siteManage',
             component: () =>
-                import('@/views/siteManage/index'),
+                import ('@/views/siteManage/index'),
             selectLeftMenu: '/alarmManage',
             hidden: true
         }]
     },
 
-
     {
+        path: '/stationManage',
+        redirect: '/stationManage/index',
         meta: {
-            icon: 'stationManage',
             title: '台区管理',
+            icon: 'stationManage',
         },
-        path: '/stationManage',
-        redirect: '/stationManage/index',
         component: Layout,
         children: [{
             meta: {
+                title: '台区管理',
                 icon: 'stationManage',
-                title: '站点列表',
-                activeMenu: '/stationManage/index'
             },
-            path: 'siteList',
+            path: '/stationManage',
             component: () =>
-                import('@/views/stationManage/siteList.vue'),
-            hidden: true,
-        },
-        {
-            meta: {
-                icon: 'stationManage',
-                title: '所有台区',
-                activeMenu: '/stationManage/index'
-            },
-            path: 'index',
-            component: () =>
-                import('@/views/stationManage/index.vue'),
-            hidden: true,
-        }
-        ]
+                import ('@/views/stationManage/index'),
+            hidden: true
+        }]
     },
 
     /**
@@ -137,32 +123,32 @@ export const asyncRoutes = [
         component: Layout,
         redirect: '/deviceManage/powerEquip',
         children: [{
-            meta: { icon: 'powerEquip', title: '设备管理', },
-            path: 'powerEquip',
-            component: () =>
-                import('@/views/deviceManage/powerEquip/index.vue'),
-        },
-        // {
-        //   title: 'index-layout.menu.deviceManage.videoEquip',
-        //   path: 'videoEquip',
-        //   component: () => import('@/views/deviceManage/videoEquip/index.vue'),
-        // },
-        // {
-        //   title: 'index-layout.menu.deviceManage.communicateEquip',
-        //   path: 'communicateEquip',
-        //   component: () => import('@/views/deviceManage/communicateEquip/index.vue'),
-        // },
-        // {
-        //   title: 'index-layout.menu.deviceManage.channelList',
-        //   path: 'channelList',
-        //   component: () => import('@/views/deviceManage/channelList/index.vue'),
-        // },
-        {
-            meta: { icon: 'attribTemplate', title: '属性模板', },
-            path: 'attribTemplate',
-            component: () =>
-                import('@/views/deviceManage/attribTemplate/index.vue'),
-        }
+                meta: { icon: 'powerEquip', title: '设备管理', },
+                path: 'powerEquip',
+                component: () =>
+                    import ('@/views/deviceManage/powerEquip/index.vue'),
+            },
+            // {
+            //   title: 'index-layout.menu.deviceManage.videoEquip',
+            //   path: 'videoEquip',
+            //   component: () => import('@/views/deviceManage/videoEquip/index.vue'),
+            // },
+            // {
+            //   title: 'index-layout.menu.deviceManage.communicateEquip',
+            //   path: 'communicateEquip',
+            //   component: () => import('@/views/deviceManage/communicateEquip/index.vue'),
+            // },
+            // {
+            //   title: 'index-layout.menu.deviceManage.channelList',
+            //   path: 'channelList',
+            //   component: () => import('@/views/deviceManage/channelList/index.vue'),
+            // },
+            {
+                meta: { icon: 'attribTemplate', title: '属性模板', },
+                path: 'attribTemplate',
+                component: () =>
+                    import ('@/views/deviceManage/attribTemplate/index.vue'),
+            }
         ]
     },
 
@@ -181,45 +167,45 @@ export const asyncRoutes = [
         component: Layout,
         redirect: '/dataManage/sameAnalysis',
         children: [{
-            meta: { icon: 'sameAnalysis', title: '同比分析报表', },
-            path: 'sameAnalysis',
-            component: () =>
-                import('@/views/dataManage/sameAnalysis/index.vue'),
-        },
-        {
-            meta: { icon: 'chainAnalysis', title: '环比分析报表', },
-            path: 'chainAnalysis',
-            component: () =>
-                import('@/views/dataManage/chainAnalysis/index.vue'),
-        },
-        {
-            meta: { icon: 'handOpera', title: '手动抄表', },
-            title: 'index-layout.menu.dataManage.handOpera',
-            path: 'handOpera',
-            component: () =>
-                import('@/views/dataManage/handOpera/index.vue'),
-        },
-        {
-            meta: { icon: 'energyReport', title: '用能月报', },
-            title: 'index-layout.menu.dataManage.energyReport',
-            path: 'energyReport',
-            component: () =>
-                import('@/views/dataManage/energyReport/index.vue'),
-        },
-        {
-            meta: { icon: 'demandAnalysis', title: '需量分析', },
-            title: 'index-layout.menu.dataManage.demandAnalysis',
-            path: 'demandAnalysis',
-            component: () =>
-                import('@/views/dataManage/demandAnalysis/index.vue'),
-        },
-        {
-            meta: { icon: 'consumConfig', title: '能耗分析配置', },
-            title: 'index-layout.menu.dataManage.consumConfig',
-            path: 'consumConfig',
-            component: () =>
-                import('@/views/dataManage/consumConfig/index.vue'),
-        }
+                meta: { icon: 'sameAnalysis', title: '同比分析报表', },
+                path: 'sameAnalysis',
+                component: () =>
+                    import ('@/views/dataManage/sameAnalysis/index.vue'),
+            },
+            {
+                meta: { icon: 'chainAnalysis', title: '环比分析报表', },
+                path: 'chainAnalysis',
+                component: () =>
+                    import ('@/views/dataManage/chainAnalysis/index.vue'),
+            },
+            {
+                meta: { icon: 'handOpera', title: '手动抄表', },
+                title: 'index-layout.menu.dataManage.handOpera',
+                path: 'handOpera',
+                component: () =>
+                    import ('@/views/dataManage/handOpera/index.vue'),
+            },
+            {
+                meta: { icon: 'energyReport', title: '用能月报', },
+                title: 'index-layout.menu.dataManage.energyReport',
+                path: 'energyReport',
+                component: () =>
+                    import ('@/views/dataManage/energyReport/index.vue'),
+            },
+            {
+                meta: { icon: 'demandAnalysis', title: '需量分析', },
+                title: 'index-layout.menu.dataManage.demandAnalysis',
+                path: 'demandAnalysis',
+                component: () =>
+                    import ('@/views/dataManage/demandAnalysis/index.vue'),
+            },
+            {
+                meta: { icon: 'consumConfig', title: '能耗分析配置', },
+                title: 'index-layout.menu.dataManage.consumConfig',
+                path: 'consumConfig',
+                component: () =>
+                    import ('@/views/dataManage/consumConfig/index.vue'),
+            }
         ]
     },
 
@@ -236,29 +222,29 @@ export const asyncRoutes = [
         component: Layout,
         redirect: '/powerQuality/harmonicReport',
         children: [{
-            meta: { icon: 'harmonicReport', title: '谐波报表', },
-            path: 'harmonicReport',
-            component: () =>
-                import('@/views/powerQuality/harmonicReport/index.vue'),
-        },
-        {
-            meta: { icon: 'realTimeMonitoring', title: '实时监测', },
-            path: 'realTimeMonitoring',
-            component: () =>
-                import('@/views/powerQuality/realTimeMonitoring/index.vue'),
-        },
-        {
-            meta: { icon: 'asseReport', title: '评估报告', },
-            path: 'asseReport',
-            component: () =>
-                import('@/views/powerQuality/asseReport/index.vue'),
-        },
-        {
-            meta: { icon: 'unbalanceAnalysis', title: '三相不平衡分析', },
-            path: 'unbalanceAnalysis',
-            component: () =>
-                import('@/views/powerQuality/unbalanceAnalysis/index.vue'),
-        },
+                meta: { icon: 'harmonicReport', title: '谐波报表', },
+                path: 'harmonicReport',
+                component: () =>
+                    import ('@/views/powerQuality/harmonicReport/index.vue'),
+            },
+            {
+                meta: { icon: 'realTimeMonitoring', title: '实时监测', },
+                path: 'realTimeMonitoring',
+                component: () =>
+                    import ('@/views/powerQuality/realTimeMonitoring/index.vue'),
+            },
+            {
+                meta: { icon: 'asseReport', title: '评估报告', },
+                path: 'asseReport',
+                component: () =>
+                    import ('@/views/powerQuality/asseReport/index.vue'),
+            },
+            {
+                meta: { icon: 'unbalanceAnalysis', title: '三相不平衡分析', },
+                path: 'unbalanceAnalysis',
+                component: () =>
+                    import ('@/views/powerQuality/unbalanceAnalysis/index.vue'),
+            },
 
         ]
     },
@@ -273,19 +259,19 @@ export const asyncRoutes = [
         meta: { title: '月度报告', icon: 'monthReport', },
         component: Layout,
         children: [{
-            meta: { title: '月度报告', icon: 'monthReport', },
-            path: '/monthReport',
-            component: () =>
-                import('@/views/monthReport/index'),
-            hidden: true
-        },
-        {
-            meta: { title: '月报模板', icon: 'reportModel', },
-            path: '/reportModel',
-            component: () =>
-                import('@/views/monthReport/reportModel'),
-            hidden: true
-        }
+                meta: { title: '月度报告', icon: 'monthReport', },
+                path: '/monthReport',
+                component: () =>
+                    import ('@/views/monthReport/index'),
+                hidden: true
+            },
+            {
+                meta: { title: '月报模板', icon: 'reportModel', },
+                path: '/reportModel',
+                component: () =>
+                    import ('@/views/monthReport/reportModel'),
+                hidden: true
+            }
         ]
     },
 
@@ -299,7 +285,7 @@ export const asyncRoutes = [
             meta: { title: '计划停电', icon: 'planOutage', },
             path: '/planOutage',
             component: () =>
-                import('@/views/planOutage/index'),
+                import ('@/views/planOutage/index'),
             hidden: true
         }],
     },
@@ -319,33 +305,33 @@ export const asyncRoutes = [
         redirect: '/patrolManage/patrolPlan',
         name: 'patrolManage',
         children: [{
-            meta: { title: '巡检计划', icon: 'patrolPlan' },
-            path: 'patrolPlan',
-            name: 'patrolPlan',
-            component: () =>
-                import('@/views/patrolManage/patrolPlan/index.vue'),
-        },
-        {
-            meta: { title: '巡检记录', icon: 'patrolRecord' },
-            path: 'patrolRecord',
-            name: 'patrolRecord',
-            component: () =>
-                import('@/views/patrolManage/patrolRecord/index.vue'),
-        },
-        {
-            meta: { title: '巡检内容', icon: '巡检内容' },
-            path: 'patrolContent',
-            name: 'patrolContent',
-            component: () =>
-                import('@/views/patrolManage/patrolContent/index.vue'),
-        },
-        {
-            meta: { title: '检查条目', icon: '检查条目' },
-            path: 'checkEntries',
-            name: 'checkEntries',
-            component: () =>
-                import('@/views/patrolManage/checkEntries/index.vue'),
-        },
+                meta: { title: '巡检计划', icon: 'patrolPlan' },
+                path: 'patrolPlan',
+                name: 'patrolPlan',
+                component: () =>
+                    import ('@/views/patrolManage/patrolPlan/index.vue'),
+            },
+            {
+                meta: { title: '巡检记录', icon: 'patrolRecord' },
+                path: 'patrolRecord',
+                name: 'patrolRecord',
+                component: () =>
+                    import ('@/views/patrolManage/patrolRecord/index.vue'),
+            },
+            {
+                meta: { title: '巡检内容', icon: '巡检内容' },
+                path: 'patrolContent',
+                name: 'patrolContent',
+                component: () =>
+                    import ('@/views/patrolManage/patrolContent/index.vue'),
+            },
+            {
+                meta: { title: '检查条目', icon: '检查条目' },
+                path: 'checkEntries',
+                name: 'checkEntries',
+                component: () =>
+                    import ('@/views/patrolManage/checkEntries/index.vue'),
+            },
         ]
     },
 
@@ -365,35 +351,35 @@ export const asyncRoutes = [
         redirect: '/operManage/siteAchives',
         name: 'operManage',
         children: [{
-            meta: { title: '现场档案', icon: 'siteAchives', },
-            path: 'siteAchives',
-            component: () =>
-                import('@/views/operManage/siteAchives/index.vue'),
-        },
-        {
-            meta: { title: '缺陷管理', icon: 'defectManage', },
-            path: 'defectManage',
-            component: () =>
-                import('@/views/operManage/defectManage/index.vue'),
-        },
-        {
-            meta: { title: '工单管理', icon: 'workManage', },
-            path: 'workManage',
-            component: () =>
-                import('@/views/operManage/workManage/index.vue'),
-        },
-        {
-            meta: { title: '运维统计', icon: 'operStatistics', },
-            path: 'operStatistics',
-            component: () =>
-                import('@/views/operManage/operStatistics/index.vue'),
-        },
-        {
-            meta: { title: '工作量统计', icon: 'workStatistics', },
-            path: 'workStatistics',
-            component: () =>
-                import('@/views/operManage/workStatistics/index.vue'),
-        },
+                meta: { title: '现场档案', icon: 'siteAchives', },
+                path: 'siteAchives',
+                component: () =>
+                    import ('@/views/operManage/siteAchives/index.vue'),
+            },
+            {
+                meta: { title: '缺陷管理', icon: 'defectManage', },
+                path: 'defectManage',
+                component: () =>
+                    import ('@/views/operManage/defectManage/index.vue'),
+            },
+            {
+                meta: { title: '工单管理', icon: 'workManage', },
+                path: 'workManage',
+                component: () =>
+                    import ('@/views/operManage/workManage/index.vue'),
+            },
+            {
+                meta: { title: '运维统计', icon: 'operStatistics', },
+                path: 'operStatistics',
+                component: () =>
+                    import ('@/views/operManage/operStatistics/index.vue'),
+            },
+            {
+                meta: { title: '工作量统计', icon: 'workStatistics', },
+                path: 'workStatistics',
+                component: () =>
+                    import ('@/views/operManage/workStatistics/index.vue'),
+            },
 
         ]
     },
@@ -409,17 +395,17 @@ export const asyncRoutes = [
         component: Layout,
         redirect: '/systemManage/userManage',
         children: [{
-            meta: { title: '用户管理', icon: 'userManage', },
-            path: 'userManage',
-            component: () =>
-                import('@/views/systemManage/userManage/index.vue'),
-        },
-        {
-            meta: { title: '权限管理', icon: 'rolePermission', },
-            path: 'rolePermission',
-            component: () =>
-                import('@/views/systemManage/rolePermission/index.vue'),
-        },
+                meta: { title: '用户管理', icon: 'userManage', },
+                path: 'userManage',
+                component: () =>
+                    import ('@/views/systemManage/userManage/index.vue'),
+            },
+            {
+                meta: { title: '权限管理', icon: 'rolePermission', },
+                path: 'rolePermission',
+                component: () =>
+                    import ('@/views/systemManage/rolePermission/index.vue'),
+            },
         ]
     },
 
@@ -435,25 +421,25 @@ export const asyncRoutes = [
             icon: 'apps-line',
         },
         children: [{
-            path: 'table',
-            name: 'Table',
-            component: () =>
-                import('@/views/vab/table'),
-            meta: {
-                title: '表格',
-                icon: 'table-2',
+                path: 'table',
+                name: 'Table',
+                component: () =>
+                    import ('@/views/vab/table'),
+                meta: {
+                    title: '表格',
+                    icon: 'table-2',
+                },
             },
-        },
-        {
-            path: 'icon',
-            name: 'Icon',
-            component: () =>
-                import('@/views/vab/icon'),
-            meta: {
-                title: '图标',
-                icon: 'remixicon-line',
+            {
+                path: 'icon',
+                name: 'Icon',
+                component: () =>
+                    import ('@/views/vab/icon'),
+                meta: {
+                    title: '图标',
+                    icon: 'remixicon-line',
+                },
             },
-        },
         ],
     },
 

src/views/alarmManage/index.vue

@@ -53,7 +53,7 @@
             class="gradualBg total"
             :class="{ transparent: scope.row.totalNum == 0 }"
             :style="{
-              width: (scope.row.totalNum / this.totalNumMax) * 100 + '%',
+              width: (scope.row.totalNum / this.allMaxData.totalNumMax) * 100 + '%',
             }"
             @click="goAlarmTotal"
           >
@@ -67,7 +67,7 @@
             class="gradualBg"
             :class="{ transparent: scope.row.oneAlarming == 0 }"
             :style="{
-              width: (scope.row.oneAlarming / this.oneAlarmingMax) * 100 + '%',
+              width: (scope.row.oneAlarming / this.allMaxData.oneAlarmingMax) * 100 + '%',
             }"
             @click="goAlarmTotal"
           >
@@ -81,7 +81,7 @@
             class="gradualBg"
             :class="{ transparent: scope.row.twoAlarming == 0 }"
             :style="{
-              width: (scope.row.twoAlarming / this.twoAlarmingMax) * 100 + '%',
+              width: (scope.row.twoAlarming / this.allMaxData.twoAlarmingMax) * 100 + '%',
             }"
             @click="goAlarmTotal"
           >
@@ -96,7 +96,7 @@
             class="gradualBg"
             :class="{ transparent: scope.row.other == 0 }"
             :style="{
-              width: (scope.row.other / this.otherMax) * 100 + '%',
+              width: (scope.row.other / this.allMaxData.otherMax) * 100 + '%',
             }"
             @click="goAlarmTotal"
           >
@@ -214,46 +214,35 @@ export default {
     }
   },
   computed: {
-    // sellVendorOption() {
-    //   return (item) => {
-    //     return item.venderCode + ':' + item.venderName
-    //   }
-    // },
 
-    totalNumMax() {
-      return Math.max.apply(
-        Math,
-        this.tableData.map(function (o) {
-          return o.totalNum
-        })
-      )
-    },
-    oneAlarmingMax() {
-      return Math.max.apply(
-        Math,
-        this.tableData.map(function (o) {
-          return o.oneAlarming
-        })
-      )
-    },
-    twoAlarmingMax() {
-      return Math.max.apply(
-        Math,
-        this.tableData.map(function (o) {
-          return o.twoAlarming
-        })
-      )
-    },
-    otherMax() {
-      return Math.max.apply(
-        Math,
-        this.tableData.map(function (o) {
-          return o.other
-        })
-      )
-    },
+    allMaxData:function(){
+
+     var allMaxData = {};
+
+      var totalNumData = [];
+      var oneAlarmingData = [];
+      var twoAlarmingData = [];
+      var otherData = [];
+
+      this.tableData.forEach((element,index) => {
+        totalNumData[index] = element.totalNum;
+        oneAlarmingData[index] = element.oneAlarming;
+        twoAlarmingData[index] = element.twoAlarming;
+        otherData[index] = element.other;
+      });
+
+     allMaxData.totalNumMax = Math.max.apply(Math,totalNumData);
+     allMaxData.oneAlarmingMax = Math.max.apply(Math,oneAlarmingData);
+     allMaxData.twoAlarmingMax = Math.max.apply(Math,twoAlarmingData);
+     allMaxData.otherMax = Math.max.apply(Math,otherData);
+
+      return allMaxData;
+
+   },
   },
   methods: {
+
+    
     getMsgFormSon() {
       this.pageShow = !this.pageShow
     },
@@ -273,7 +262,7 @@ export default {
       if (columnIndex === 0) {
         return `color:#0284E8;cursor:pointer`
       }
-      if (columnIndex === 1) {
+      if (columnIndex ) {
         return `text-align:left;cursor:pointer;`
       } else {
         return ''

src/views/stationManage/dialogComponent.vue

@@ -1,32 +1,31 @@
 <template>
-  <transition name="dialog-fade">
+  <div class="parentBlock">
     <el-dialog
-      v-if="showDialog"
       :title="dialogTitle"
-      class="dialog-component"
-      v-model="showDialog"
+      v-model="dialogVisible"
       width="640px"
-      @close="closeDialog(0)"
+      @close="closeDialog()"
+      @open="open"
     >
       <el-form
         ref="formInfo"
-        :model="formInfo"
+        :model="form"
         class="demo-form-inline"
         label-width="100px"
         :rules="rules"
       >
         <el-form-item label="台区名称：" prop="stationName">
-          <el-input v-model="formInfo.stationName"></el-input>
+          <el-input v-model="form.stationName"></el-input>
         </el-form-item>
         <el-form-item label="台区编号：" prop="stationCode">
-          <el-input v-model="formInfo.stationCode"></el-input>
+          <el-input v-model="form.stationCode"></el-input>
         </el-form-item>
         <el-form-item label="台区地址：" prop="stationAddress">
-          <el-input v-model="formInfo.stationAddress"></el-input>
+          <el-input v-model="form.stationAddress"></el-input>
         </el-form-item>
         <el-form-item label="站点列表:" prop="siteList">
           <el-select
-            v-model="formInfo.siteList"
+            v-model="form.siteList"
             multiple
             filterable
             collapse-tags
@@ -37,162 +36,176 @@
               :key="item.value"
               :label="item.label"
               :value="item.value"
-            >
-            </el-option>
+            ></el-option>
           </el-select>
         </el-form-item>
 
         <el-form-item label="已勾选：" prop="pointNum">
-          <el-input v-model="formInfo.pointNum" style="width: 200px"></el-input>
+          <el-input v-model="form.pointNum" style="width: 200px"></el-input>
           个站点
         </el-form-item>
         <el-form-item label="共挂载：" prop="deviceNum">
-          <el-input v-model="formInfo.deviceNum" style="width: 200px"></el-input>
+          <el-input v-model="form.deviceNum" style="width: 200px"></el-input>
           个设备
         </el-form-item>
         <br />
         <br />
         <br />
         <div style="text-align: right">
-          <el-button @click="closeDialog(0)">取消</el-button>
-          <el-button type="primary" @click="submitForm('formInfo')"
-            >保存</el-button
-          >
+          <el-button @click="closeDialog()">取消</el-button>
+          <el-button type="primary" @click="submitForm()">保存</el-button>
         </div>
       </el-form>
     </el-dialog>
-  </transition>
+  </div>
 </template>
 
 <script>
+import { defineComponent, ref, watchEffect } from 'vue'
 
+export default defineComponent({
+  name: 'DialogComponent',
+  emits: ['closeDialog'],
+  props: {
+    flag: Boolean,
+    dialogTitle: String,
+    itemInfo: Object,
+  },
+  setup(props, context) {
+    context
 
+    const dialogVisible = ref(false)
+    const formInfo = ref(null)
 
+    const form = ref([])
 
-export default {
-  name: "DialogComponent",
-  props: {
-    dialogTitle: {
-      type: String,
-      default: "新增",
-    },
-    itemInfo: {
-      type: Object,
-      default: function () {
-        return {};
+    
+    // open(): Dialog弹窗打开之前做的事
+    const open = () => {
+      console.log('')
+      form.value = props.itemInfo.value
+    }
+
+    const options = [
+      {
+        value: '选项1',
+        label: '站点一',
       },
-    },
-  },
-  data() {
-    return {
-      showDialog: false,
-      formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
-      options: [
-        {
-          value: "选项1",
-          label: "站点一",
-        },
-        {
-          value: "选项2",
-          label: "站点二",
-        },
-        {
-          value: "选项3",
-          label: "站点三",
-        },
-        {
-          value: "选项4",
-          label: "站点四",
-        },
-        {
-          value: "选项5",
-          label: "站点五",
-        },
-      ],
+      {
+        value: '选项2',
+        label: '站点二',
+      },
+      {
+        value: '选项3',
+        label: '站点三',
+      },
+      {
+        value: '选项4',
+        label: '站点四',
+      },
+      {
+        value: '选项5',
+        label: '站点五',
+      },
+    ]
+
+    // 关闭弹框
+    const closeDialog = () => {
+      context.emit('closeDialog', false)
+      dialogVisible.value = false
+    }
+
+    watchEffect((fn, options) => {
+      fn, options
+      dialogVisible.value = props.flag
+    })
+
+    const roleValid = (rule, value, callback) => {
+      rule
+      if (value.length === 0) {
+        callback(new Error('角色不能为空'))
+      } else {
+        callback()
+      }
+    }
 
+    // 保存-修改操作
+    const submitForm = () => {
+      console.log(formInfo)
+      formInfo.value.validate((valid) => {
+        if (valid) {
+          // 走保存请求
+          this.$message({
+            message: '操作成功！',
+            type: 'success',
+          })
+          this.closeDialog(1)
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+
+    return {
+      closeDialog,
+      dialogVisible,
+      options,
+      roleValid,
+      formInfo,
+      form,
+      open,
+      submitForm,
       rules: {
         stationName: [
           // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: false, message: "请输入台区名称", trigger: "blur" },
+          { required: false, message: '请输入台区名称', trigger: 'blur' },
           {
             min: 3,
             max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
+            message: '用户名长度在 3 到 6 个字符',
+            trigger: 'blur',
           },
         ],
         stationCode: [
-          { required: true, message: "请输入台区编号", trigger: "blur" },
+          { required: true, message: '请输入台区编号', trigger: 'blur' },
           {
             min: 3,
             max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
+            message: '用户名长度在 3 到 6 个字符',
+            trigger: 'blur',
           },
         ],
         stationAddress: [
-          { required: true, message: "请输入台区地址", trigger: "blur" },
+          { required: true, message: '请输入台区地址', trigger: 'blur' },
           {
             min: 3,
             max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
+            message: '用户名长度在 3 到 6 个字符',
+            trigger: 'blur',
           },
         ],
         siteList: [
-          { required: true, message: '请选择站点列表', trigger: 'change'}
-        
+          { required: true, message: '请选择站点列表', trigger: 'change' },
         ],
         pointNum: [
-          { required: true, message: "请输入已选站点个数", trigger: "blur" },
-          { trigger: "blur" },
+          { required: true, message: '请输入已选站点个数', trigger: 'blur' },
+          { trigger: 'blur' },
         ],
         deviceNum: [
-          { required: true, message: "请输入挂载设备个数", trigger: "blur" },
-          { trigger: "blur" },
+          { required: true, message: '请输入挂载设备个数', trigger: 'blur' },
+          { trigger: 'blur' },
         ],
       },
-    };
+    }
   },
-  methods: {
-    roleValid(rule, value, callback) {
-      rule
-      if (value.length === 0) {
-        callback(new Error("角色不能为空"));
-      } else {
-        callback();
-      }
-    },
-
-    // onSelectedDrug(event) {
-    //   this.siteList = event;
-    //   console.log(this.siteList);
-    // },
-    // 保存操作
-    submitForm(formName) {
-      const params = Object.assign(this.formInfo, {});
-      params
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          // 走保存请求
-          this.$message({
-            message: "操作成功！",
-            type: "success",
-          });
-          this.closeDialog(1);
-        } else {
-          return false;
-        }
-      });
-    },
-    // 关闭弹框
-    closeDialog(flag) {
-      this.$refs["formInfo"].resetFields();
-      this.showDialog = false;
-      this.$emit("closeDialog", flag);
-    },
+  data() {
+    return {
+      // formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+    }
   },
-};
+  methods: {},
+})
 </script>
  
 <style scoped lang="scss">

src/views/stationManage/index.vue

@@ -4,24 +4,23 @@
     <div class="mb-20">所有台区</div>
     <div class="filter-container mb-10">
       <div>
-        <div class="filter-item">
-        台区：
-        <el-input
-          v-model="input"
-          placeholder="请输入内容"
-          style="width: 240px"
-        ></el-input>
-      </div>
+        <div class="filter-item" >
+          台区：
+          <el-input
+            v-model="input"
+            placeholder="请输入内容"
+            style="width: 240px"
+          ></el-input>
+        </div>
+
+        <el-button type="primary" icon="el-icon-search" class="search-button">
+          搜索
+        </el-button>
 
-      <el-button type="primary" icon="el-icon-search" class="search-button"
-        >搜索</el-button
-      >
-    
-      <el-button icon="el-icon-plus" type="success" @click="addItem()"
-        >新增</el-button
-      >
+        <el-button icon="el-icon-plus" type="success" @click="addItem()">
+          新增
+        </el-button>
       </div>
-      
     </div>
     <!-- 筛选end -->
 
@@ -33,38 +32,52 @@
       :header-cell-style="headClass"
       :cell-style="cellStyle"
     >
-      <el-table-column fixed prop="stationName" label="台区名称" width="">
-      </el-table-column>
-      <el-table-column prop="stationCode" label="台区编号" width="">
-      </el-table-column>
-      <el-table-column prop="stationAddress" label="台区地址" width="">
-      </el-table-column>
+      <el-table-column
+        fixed
+        prop="stationName"
+        label="台区名称"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="stationCode"
+        label="台区编号"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="stationAddress"
+        label="台区地址"
+        width=""
+      ></el-table-column>
       <el-table-column prop="pointNum" label="点位数量" width="">
-         <template #default="scope">  
-           <span @click="goSiteList">  {{ scope.row.pointNum }}</span>
-            <!-- <router-link style="margin-right:15px;" :to="{ path:'siteList',query:{id:scope.row.stationName}}">
+        <template #default="scope">
+          <span @click="goSiteList">{{ scope.row.pointNum }}</span>
+          <!-- <router-link style="margin-right:15px;" :to="{ path:'siteList',query:{id:scope.row.stationName}}">
               {{ scope.row.pointNum }}
             </router-link> -->
-          </template>
-
-      </el-table-column>
-      <el-table-column prop="deviceNum" label="挂载设备数量" width="350">
+        </template>
       </el-table-column>
+      <el-table-column
+        prop="deviceNum"
+        label="挂载设备数量"
+        width="350"
+      ></el-table-column>
       <el-table-column fixed="right" label="操作" width="250">
         <template #default="scope">
           <el-button
             type="text"
             size="small"
             @click.prevent="editRow(scope.row)"
-            >编辑</el-button
           >
+            编辑
+          </el-button>
           <el-button
             @click="handleDelete(scope.$index, scope.row)"
             type="text"
             size="small"
             class="delete-text"
-            >删除</el-button
           >
+            删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -72,11 +85,10 @@
 
     <!--弹框组件开始-----------------------start-->
     <dialog-component
-      v-if="showDialog"
-      ref="dialogComponent"
-      :dialog-title="dialogTitle"
-      :item-info="tableItem"
+      :dialogTitle="dialogTitle"
+      :itemInfo="tableItem"
       @closeDialog="closeDialog"
+      :flag="showDialog"
     ></dialog-component>
     <!--弹框组件开始-----------------------end-->
   </div>
@@ -84,128 +96,126 @@
 </template>
 
 <script>
-import DialogComponent from "./dialogComponent";
+import { defineComponent, ref, reactive } from 'vue'
+import DialogComponent from './dialogComponent'
 import siteList from './siteList'
-// import { mapGetters } from "vuex";
-
-export default {
-  // name: "Dashboard",
-  // computed: {
-  //   ...mapGetters(["name"]),
-  // },
 
-  components: { DialogComponent,siteList },
+export default defineComponent({
+  components: { DialogComponent, siteList },
+  setup(props, context) {
+    const input = ref('请输入台区名称')
+    const pageShow = ref(true)
+    const showDialog = ref(false)
+    const tableData = ref([
+      {
+        stationName: '台区1',
+        stationCode: 'tq02',
+        stationAddress: '青浦区徐泾镇',
+        pointNum: '8',
+        deviceNum: '10',
+      },
+      {
+        stationName: '台区1',
+        stationCode: 'tq02',
+        stationAddress: '青浦区徐泾镇',
+        pointNum: '8',
+        deviceNum: '10',
+      },
+      {
+        stationName: '台区1',
+        stationCode: 'tq02',
+        stationAddress: '青浦区徐泾镇',
+        pointNum: '8',
+        deviceNum: '10',
+      },
+      {
+        stationName: '台区1',
+        stationCode: 'tq02',
+        stationAddress: '青浦区徐泾镇',
+        pointNum: '8',
+        deviceNum: '10',
+      },
+    ])
 
-  data() {
-    return {
-      pageShow: true,
-      showDialog: false,
-
-      input: "请输入台区名称",
-      tableData: [
-        {
-          stationName: "台区1",
-          stationCode: "tq02",
-          stationAddress: "青浦区徐泾镇",
-          pointNum: "8",
-          deviceNum: "10",
-          
-        },
-        {
-          stationName: "台区1",
-          stationCode: "tq02",
-          stationAddress: "青浦区徐泾镇",
-          pointNum: "8",
-          deviceNum: "10",
-        },
-        {
-          stationName: "台区1",
-          stationCode: "tq02",
-          stationAddress: "青浦区徐泾镇",
-          pointNum: "8",
-          deviceNum: "10",
-        },
-        {
-          stationName: "台区1",
-          stationCode: "tq02",
-          stationAddress: "青浦区徐泾镇",
-          pointNum: "8",
-          deviceNum: "10",
-        },
-      ],
-    };
-  },
-  methods: {
-    goSiteList() {
-      this.pageShow = !this.pageShow
-    },
-     getMsgFormSon() {
-      this.pageShow = !this.pageShow
-    },
+    const goSiteList = () => {
+      pageShow.value = !pageShow.value
+    }
+    const getMsgFormSon = () => {
+      pageShow.value = !pageShow.value
+    }
 
     // 表头样式设置
-    headClass() {
-      return "background:#FAFAFA;";
-    },
+    const headClass = () => {
+      return 'background:#FAFAFA;'
+    }
 
     //自定义列样式
-    cellStyle({ row, column, rowIndex, columnIndex }) {
+    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
       row, column, rowIndex
       if (columnIndex === 3) {
-        return `color:#0284E8;cursor:pointer`;
+        return `color:#0284E8;cursor:pointer`
       } else {
-        return "";
+        return ''
       }
-    },
+    }
 
+    const tableItem = reactive([])
+    const dialogTitle = ref('')
     // 添加操作
-    addItem() {
-      this.tableItem = {
-        id: "",
-        stationName: "",
-        stationCode: "",
-        stationAddress: "",
+
+ 
+    const addItem = () => {
+      tableItem.value = {
+        id: '',
+        stationName: '',
+        stationCode: '',
+        stationAddress: '',
         siteList: [],
-        done: "",
-        guaZai: "",
-      };
-      this.dialogTitle = "新增";
-      this.showDialog = true;
-      this.$nextTick(() => {
-        this.$refs["dialogComponent"].showDialog = true;
-      });
-    },
-    // 编辑操作
-    editRow(row) {
-      console.log(row);
-      this.tableItem = row;
-      this.dialogTitle = "编辑";
-      this.showDialog = true;
-      this.$nextTick(() => {
-        this.$refs["dialogComponent"].showDialog = true;
-      });
-    },
-    // 关闭操作
-    closeDialog(flag) {
-      if (flag) {
-        // 重新刷新表格内容
-        this.fetchData();
+        done: '',
+        guaZai: '',
       }
-      this.showDialog = false;
-    },
 
-    // handleEdit(index, row) {
-    //   console.log(index, row);
-    // },
+      dialogTitle.value = '新增'
+      showDialog.value = true
+    }
+    // 编辑操作
+    const editRow = (row) => {
+      console.log(row)
+      tableItem.value = row
+      dialogTitle.value = '编辑'
+      showDialog.value = true
+    }
+    // 关闭操作
+    const closeDialog = () => {
+      showDialog.value = false
+    }
 
     //删除操作
-    handleDelete(index, row) {
-      console.log(index, row);
-      alert(index);
-    },
+    const handleDelete = (index, row) => {
+      console.log(index, row)
+      alert(index)
+    }
+
+    return {
+      tableData,
+      input,
+      pageShow,
+      dialogTitle,
+      showDialog,
+      props,
+      context,
+      tableItem,
+
+      goSiteList,
+      getMsgFormSon,
+      headClass,
+      cellStyle,
+      addItem,
+      editRow,
+      closeDialog,
+      handleDelete,
+    }
   },
-};
+})
 </script>
 
-<style lang="scss" scoped>
-</style>

src/views/stationManage/siteList.vue

@@ -40,20 +40,17 @@
 </template>
 
 <script>
-export default {
-  name: 'SiteList',
-  // computed: {
-  //   ...mapGetters(['name']),
-  // },
-  props: ['pageShow'],
+import { defineComponent, ref} from 'vue'
 
-  data() {
-    return {
-      showDialog: false,
+export default defineComponent({
+   name: 'SiteList',
+    props: ['pageShow'],
 
-      input: '请输入站点名称',
-      tableData: [
-        {
+  setup(props, context) {
+    const showDialog = ref(false)
+    const input = ref('请输入台区名称')
+    const tableData = ref([
+      {
           stationName: '测试站点1',
           stationStatus: '~',
           deviceName: '电力监测设备',
@@ -89,36 +86,34 @@ export default {
           eddl: '12',
           dlfzl: '80%',
         },
-      ],
-    };
-  },
-  methods: {
-    goBack() {
-      this.$emit('func')
+    ])
+
+   const goBack=()=> {
+      context.emit('func')
       // this.$router.replace('/stationManage/index');
-    },
+    }
     // 表头样式设置
-    headClass() {
+   const headClass=()=> {
       return 'background:#FAFAFA;';
-    },
+    }
 
     //自定义列样式
-    cellStyle({ row, column, rowIndex, columnIndex }) {
+    const cellStyle=({ row, column, rowIndex, columnIndex })=> {
       row, column, rowIndex
       if (columnIndex === 1) {
         return `color:#04F21C`;
       } else {
         return '';
       }
-    },
+    }
     //查看
-     handleClick(row) {
+   const  handleClick=(row)=> {
          alert('查看对应站点（页面跳转）')
         console.log(row);
-      },
+      }
 
     // 添加操作
-    addItem() {
+   const addItem=()=> {
       this.tableItem = {
         id: '',
         stationName: '',
@@ -133,10 +128,27 @@ export default {
       this.$nextTick(() => {
         this.$refs['dialogComponent'].showDialog = true;
       });
-    },
+    }
+
+     return {
+      tableData,
+      input,
+      showDialog,
+      // dialogComponent,
+
+
+      headClass,
+      cellStyle,
+      addItem,
+      goBack,
+      handleClick,
+
+    }
+    
   },
-};
+})
 </script>
 
+
 <style lang='scss' scoped>
 </style>