告警管理功能完善/站点管理功能完善/设备管理功能完善

package.json

@@ -20,7 +20,7 @@
     "dayjs": "^1.10.4",
     "default-passive-events": "^2.0.0",
     "echarts": "^5.2.1",
-    "element-plus": "^1.1.0-beta.20",
+    "element-plus": "^2.10.4",
     "hls.js": "^1.4.12",
     "js-cookie": "^3.0.0-rc.1",
     "mockjs": "^1.1.0",
@@ -50,6 +50,7 @@
     "less": "^4.1.1",
     "less-loader": "^10.2.0",
     "lint-staged": "^10.5.3",
+    "lodash-es": "^4.17.21",
     "node-sass": "^6.0.1",
     "path-browserify": "^1.0.1",
     "prettier": "^2.2.1",

src/assets/css/global.scss

@@ -67,10 +67,16 @@ a:hover {
 }
 
 //公共input样式
+.el-input {
+    height: var(--el-input-height);
+}
 .el-input__icon {
     color: #409eff;
 }
-
+.el-input__inner {
+    height: 36px;
+    line-height: 36px
+}
 .el-input__inner:hover {
     border-color: #409eff;
 }

src/assets/css/index.scss

@@ -146,7 +146,16 @@ div:focus {
     // margin: 20px;
     // margin-top: 70px;
     background: #fff;
-    min-height: calc(100vh - 130px)
+    min-height: calc(100vh - 130px);
+
+    &.page-nesting {
+        padding: 0;
+        background: rgba(0, 0, 0, 0);
+    }
+
+    >.bg-white {
+        background: #fff;
+    }
 }
 
 .filter-container {
@@ -159,13 +168,17 @@ div:focus {
     vertical-align: middle;
 
     .el-button+.el-button {
-        margin-left: 30px !important;
+        margin-left: 20px !important;
     }
 
     .filter-item {
+        display: flex;
         margin-right: 30px;
-        display: inline-block;
-        margin-bottom: 10px
+        margin-bottom: 10px;
+
+        >.title {
+            margin: auto 0;
+        }
     }
 }
 
@@ -174,10 +187,7 @@ div:focus {
     line-height: $vab-header-height !important;
 }
 
-.el-input__inner {
-    height: 36px;
-    line-height: 36px
-}
+
 
 .el-button {
     padding: 10px 12px;
@@ -193,11 +203,24 @@ div:focus {
 }
 
 // 弹框样式start
-.el-dialog__header {
-    background: #f8f8f8;
-    padding: 16px 20px 16px;
+.el-dialog {
+    padding: 0px !important;
+
+    .el-dialog__body {
+        padding: var(--el-dialog-padding-primary);
+    }
+
+    .el-dialog__header {
+        background: #f8f8f8;
+        padding: 16px 20px 16px;
+
+        .el-dialog__headerbtn {
+            top: 4px;
+        }
+    }
 }
 
+
 .el-form-item:not(.user-layout .el-form-item) {
     width: 90%;
     max-width: 400px;
@@ -356,16 +379,6 @@ div:focus {
     text-align: right
 }
 
-.filter-container {
-    .el-button+.el-button {
-        margin-left: 20px !important;
-    }
-
-    .el-input {
-        margin: 0 20px 0 0;
-    }
-}
-
 // 树形控件icon
 .el-tree-node__content {
     position: relative;
@@ -1222,4 +1235,25 @@ div:focus {
 .downloadMb {
     margin-left: 20px;
     text-decoration: underline;
+}
+
+// 滚动条自定义
+::-webkit-scrollbar {
+    /* 滚动条整体样式 */
+    width: 5px;
+    /*高宽分别对应横竖滚动条的尺寸*/
+    height: 5px;
+}
+
+::-webkit-scrollbar-thumb {
+    /* 滚动条里面小方块 */
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+    background-color: #9e9e9e;
+}
+
+::-webkit-scrollbar-track {
+    /* 滚动条里面轨道 */
+    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
+    border-radius: 10px;
 }

src/layout/vab-content/index.vue

@@ -2,7 +2,7 @@
   <a-layout-content class="vab-content">
     <router-view v-slot="{ Component }">
       <!-- <transition mode="out-in" name="fade-transform"> -->
-        <component :is="Component" />
+      <component :is="Component" />
       <!-- </transition> -->
     </router-view>
   </a-layout-content>
@@ -50,16 +50,15 @@ export default {
   //   100vh - $vab-header-height - $vab-padding - $vab-padding - $vab-padding -
   //     $vab-padding
   // ) !important;
-  // padding: $vab-padding;
-  margin: $vab-margin;
+  padding: $vab-padding;
+
+  // margin: $vab-margin;
   // background: #fff;
   .error-container {
-    height: calc(
-      100vh - $vab-header-height - $vab-padding - $vab-padding - $vab-padding -
-        $vab-padding - $vab-padding - $vab-margin
-    ) !important;
+    height: calc(100vh - $vab-header-height - $vab-padding - $vab-padding - $vab-padding - $vab-padding - $vab-padding - $vab-margin ) !important;
   }
 }
+
 // .vab-content::-webkit-scrollbar {
 //   overflow-y: hidden;
 // }

src/layout/vab-tabs/index.vue

@@ -1,28 +1,14 @@
 <template>
   <div class="vab-tabs">
     <div class="vab-tabs-left-panel">
-      <!-- <a-tabs
-        @tab-click="handleTabClick"
-        @edit="handleTabRemove"
-        v-model:activeKey="tabActive"
-        hide-add
-        type="editable-card"
-      >
-        <a-tab-pane
-          v-for="item in visitedRoutes"
-          :key="item.fullPath"
-          :closable="!isAffix(item)"
-          :tab="item.meta.title"
-        ></a-tab-pane>
+      <!-- <a-tabs @tab-click="handleTabClick" @edit="handleTabRemove" v-model:activeKey="tabActive" hide-add
+        type="editable-card">
+        <a-tab-pane v-for="item in visitedRoutes" :key="item.fullPath" :closable="!isAffix(item)"
+          :tab="item.meta.title"></a-tab-pane>
       </a-tabs> -->
 
       <el-breadcrumb separator="/">
-        <el-breadcrumb-item
-          v-for="(item, ind) in breadListLast"
-          :key="ind"
-          :to="item.path"
-         
-        >
+        <el-breadcrumb-item v-for="(item, ind) in breadListLast" :key="ind" :to="item.path">
           {{ item.title }}
         </el-breadcrumb-item>
       </el-breadcrumb>
@@ -92,8 +78,8 @@ export default {
 
       this.$route.matched.map((val) => {
         this.breadListLast.push({
-          path:val.path,
-          title:val.meta.title
+          path: val.path,
+          title: val.meta.title
         })
       })
     },
@@ -201,19 +187,23 @@ export default {
 .vab-tabs {
   padding: 0 $vab-margin;
   background: #ffffff;
-  overflow: hidden;
+
+  // overflow: hidden;
   &-left-panel {
     float: left;
     width: calc(100% - 52px - $vab-margin - $vab-margin);
   }
+
   &-right-panel {
     float: left;
     width: 52px;
   }
+
   .ant-tabs {
     &-bar {
       margin: 0 !important;
     }
+
     &-tab {
       height: 32px !important;
       margin-right: 5px !important;
@@ -221,25 +211,29 @@ export default {
       background: #ffffff !important;
       border: 1px solid #dedede !important;
     }
+
     &-tab-prev,
     &-tab-next {
       height: 32px !important;
       line-height: 32px !important;
     }
+
     &-tab-active {
       border: 1px solid #1890ff !important;
+
       .ant-tabs-close-x {
         color: #1890ff !important;
       }
     }
   }
+
   // .el-breadcrumb {
   //   height: $vab-breadcrumb-height;
   //   line-height: $vab-breadcrumb-height;
   // }
   .el-breadcrumb {
-    height:36px;
-    line-height:36px;
+    height: 36px;
+    line-height: 36px;
   }
 }
 </style>

src/main.js

@@ -9,8 +9,9 @@ import 'default-passive-events'
 
 // 引入 ElementUI
 import ElementPlus from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import 'element-plus/dist/index.css'
-import zhCn from 'element-plus/lib/locale/lang/zh-cn' // 中文
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import * as echarts from 'echarts';
 
 import '@/assets/icons'
@@ -21,11 +22,15 @@ import './permissions.js'
 
 const app = createApp(App)
 
+
 app.config.globalProperties.$echarts = echarts
 
 app.use(router)
 app.use(store)
-app.use(ElementPlus, { locale: zhCn, size: 'small' })
+app.use(ElementPlus, { locale: zhCn, size: 'default' })
 app.use(Antd)
 app.component("svg-icon", SvgIcon)
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+}
 app.mount('#app')

src/store/index.js

@@ -1,6 +1,7 @@
 /**
  * @description 导入所有 vuex 模块，自动加入namespaced:true，用于解决vuex命名冲突，请勿修改。
  */
+import dayjs from 'dayjs';
 import { createStore } from 'vuex'
 import * as api from '@/api/publicList'
 import ElMessage from 'element-plus'
@@ -149,17 +150,17 @@ export default createStore({
          * @公共处理时区方法
          */
         TimeAll_function(state, time) {
-            state.Time_Data = []
-            for (let i in time) {
-                var Y = time[i].getFullYear() < 10 ? '0' + time[i].getFullYear() : time[i].getFullYear()
-                var M = (time[i].getMonth() + 1) < 10 ? '0' + (time[i].getMonth() + 1) : (time[i].getMonth() + 1)
-                var D = time[i].getDate() < 10 ? '0' + time[i].getDate() : time[i].getDate()
-                var HH = time[i].getHours() < 10 ? '0' + time[i].getHours() : time[i].getHours()
-                var MM = time[i].getMinutes() < 10 ? '0' + time[i].getMinutes() : time[i].getMinutes()
-                var SS = time[i].getSeconds() < 10 ? '0' + time[i].getSeconds() : time[i].getSeconds()
-                // console.log(Y + '-' + M + '-' + D + ' ' + HH + ':' + MM + ':' + SS)
-                state.Time_Data.push(Y + '-' + M + '-' + D + ' ' + HH + ':' + MM + ':' + SS)
-            }
+            if (time == '' || time == null || time == undefined) return
+
+            // 清空原有数据
+            state.Time_Data = [];
+
+            // 遍历时间数组，格式化每个时间对象
+            time.forEach(date => {
+                // 使用dayjs解析Date对象并格式化为"YYYY-MM-DD HH:mm:ss"
+                const formattedTime = dayjs(date).format('YYYY-MM-DD HH:mm:ss');
+                state.Time_Data.push(formattedTime);
+            });
         },
         /**
          * @公共处理开始时间和结束时间中的时间段天数
@@ -167,87 +168,23 @@ export default createStore({
          * @param {*} begin 开始时间和结束时间
          */
         getAll(state, begin) {
-            let arr1 = begin[0].split("-");
-            let arr2 = begin[1].split("-");
-            let arr1_ = new Date();
-            let arrTime = [];
-            arr1_.setUTCFullYear(arr1[0], arr1[1] - 1, arr1[2]);
-            let arr2_ = new Date();
-            arr2_.setUTCFullYear(arr2[0], arr2[1] - 1, arr2[2]);
-            let unixDb = arr1_.getTime();
-            let unixDe = arr2_.getTime();
-            for (let k = unixDb; k <= unixDe;) {
-                arrTime.push(datetimeparse(k, "YY-MM-DD"));
-                k = k + 24 * 60 * 60 * 1000;
-            }
-            state.timearr = arrTime
-            // return arrTime;
-            // 时间格式处理
-            function datetimeparse(timestamp, format, prefix) {
-                if (typeof timestamp == "string") {
-                    timestamp = Number(timestamp);
-                }
-                //转换时区
-                let currentZoneTime = new Date(timestamp);
-                let currentTimestamp = currentZoneTime.getTime();
-                let offsetZone = currentZoneTime.getTimezoneOffset() / 60; //如果offsetZone>0是西区，西区晚
-                let offset = null;
-                //客户端时间与服务器时间保持一致，固定北京时间东八区。
-                offset = offsetZone + 8;
-                currentTimestamp = currentTimestamp + offset * 3600 * 1000;
+            // 解析开始和结束日期（begin格式为["YYYY-MM-DD", "YYYY-MM-DD"]）
+            const start = dayjs(begin[0]);
+            const end = dayjs(begin[1]);
 
-                let newtimestamp = null;
-                if (currentTimestamp) {
-                    if (currentTimestamp.toString().length === 13) {
-                        newtimestamp = currentTimestamp.toString();
-                    } else if (currentTimestamp.toString().length === 10) {
-                        newtimestamp = currentTimestamp + "000";
-                    } else {
-                        newtimestamp = null;
-                    }
-                } else {
-                    newtimestamp = null;
-                }
-                let dateobj = newtimestamp ?
-                    new Date(parseInt(newtimestamp)) :
-                    new Date();
-                let YYYY = dateobj.getFullYear();
-                let MM =
-                    dateobj.getMonth() > 8 ?
-                        dateobj.getMonth() + 1 :
-                        "0" + (dateobj.getMonth() + 1);
-                let DD =
-                    dateobj.getDate() > 9 ? dateobj.getDate() : "0" + dateobj.getDate();
-                let HH =
-                    dateobj.getHours() > 9 ? dateobj.getHours() : "0" + dateobj.getHours();
-                let mm =
-                    dateobj.getMinutes() > 9 ?
-                        dateobj.getMinutes() :
-                        "0" + dateobj.getMinutes();
-                let ss =
-                    dateobj.getSeconds() > 9 ?
-                        dateobj.getSeconds() :
-                        "0" + dateobj.getSeconds();
-                let output = "";
-                let separator = "/";
-                if (format) {
-                    separator = format.match(/-/) ? "-" : "/";
-                    output += format.match(/yy/i) ? YYYY : "";
-                    output += format.match(/MM/) ?
-                        (output.length ? separator : "") + MM :
-                        "";
-                    output += format.match(/dd/i) ?
-                        (output.length ? separator : "") + DD :
-                        "";
-                    output += format.match(/hh/i) ? (output.length ? " " : "") + HH : "";
-                    output += format.match(/mm/) ? (output.length ? ":" : "") + mm : "";
-                    output += format.match(/ss/i) ? (output.length ? ":" : "") + ss : "";
-                } else {
-                    output += YYYY + separator + MM + separator + DD;
-                }
-                output = prefix ? prefix + output : output;
-                return newtimestamp ? output : "";
+            // 生成日期数组
+            const arrTime = [];
+            let current = start;
+
+            // 循环添加每天日期，直到超过结束日期
+            while (current.isBefore(end) || current.isSame(end)) {
+                // 直接格式化为"YY-MM-DD"（dayjs的YY是两位数年份，YYYY是四位数）
+                arrTime.push(current.format('YY-MM-DD'));
+                // 增加一天
+                current = current.add(1, 'day');
             }
+
+            state.timearr = arrTime;
         },
         /**
          * @公共echarts图表下载
@@ -296,65 +233,28 @@ export default createStore({
          * @处理公共时间搓 返回数组 -> 年月日时分秒 时间戳
          */
         getTimestampAll(state, timestamp) {
-            function add0(m) { return m < 10 ? '0' + m : m }
-            const time = new Date(timestamp);
-            const Y = time.getFullYear(); //年
-            const M = time.getMonth(); //月
-            const D = time.getDate(); //日
-            const HH = time.getHours(); //时，
-            const MM = time.getMinutes(); //分
-            const SS = time.getSeconds(); //秒
-            state.timeProcessing = Y + '-' + add0(M + 1) + '-' + add0(D) + ' ' + add0(HH) + ':' + add0(MM) + ':' + add0(SS);
+            // 直接使用dayjs解析时间戳并格式化为 "YYYY-MM-DD HH:mm:ss"
+            state.timeProcessing = dayjs(timestamp).format('YYYY-MM-DD HH:mm:ss');
         },
         /**
          * @公共获取某月的第一天和最后一天
          */
         getCurrentMonthLast(state, timeAll) {
-            var date1 = timeAll;
-            date1.setDate(1);
-            var month1 = parseInt(date1.getMonth() + 1);
-            var day1 = date1.getDate();
-            if (month1 < 10) {
-                month1 = '0' + month1
-            }
-            if (day1 < 10) {
-                day1 = '0' + day1
-            }
-
-            var date = timeAll;
-            var currentMonth = date.getMonth();
-            var nextMonth = ++currentMonth;
-            var nextMonthFirstDay = new Date(date.getFullYear(), nextMonth, 1);
-            var oneDay = 1000 * 60 * 60 * 24;
-            var lastTime = new Date(nextMonthFirstDay - oneDay);
-            var month = parseInt(lastTime.getMonth() + 1);
-            var day = lastTime.getDate();
-            if (month < 10) {
-                month = '0' + month
-            }
-            if (day < 10) {
-                day = '0' + day
-            }
-            state.monthList = [date1.getFullYear() + '-' + month1 + '-' + day1, date.getFullYear() + '-' + month + '-' + day]
-
+            // 将传入的时间转换为dayjs对象
+            const date = dayjs(timeAll);
+            // 获取当月第一天，格式化为YYYY-MM-DD
+            const firstDay = date.startOf('month').format('YYYY-MM-DD');
+            // 获取当月最后一天，格式化为YYYY-MM-DD
+            const lastDay = date.endOf('month').format('YYYY-MM-DD');
+            // 赋值给状态
+            state.monthList = [firstDay, lastDay];
         },
         /**
          * @获取当天日期
          */
         getNowFormatDate(state, timeAll) {
-            var date = timeAll;
-            var seperator1 = "-";
-            var year = date.getFullYear();
-            var month = date.getMonth() + 1;
-            var strDate = date.getDate();
-            if (month >= 1 && month <= 9) {
-                month = "0" + month;
-            }
-            if (strDate >= 0 && strDate <= 9) {
-                strDate = "0" + strDate;
-            }
-            var currentdate = year + seperator1 + month + seperator1 + strDate;
-            state.dateList = currentdate
+            // 直接使用dayjs处理日期并格式化为"YYYY-MM-DD"
+            state.dateList = dayjs(timeAll).format('YYYY-MM-DD');
         }
     }
 })

src/views/alarmManage/alarmTotal.vue

@@ -3,78 +3,56 @@
     <!-- 返回start -->
     <div class="siteTitle">
       <el-button class="goBack" @click="goBack">返回</el-button>
-      站点【{{alarmGradeList.siteName}}】{{
+      站点【{{ alarmGradeList.siteName }}】{{
         alarmGradeList.type == 0
-          ? '总数'
-          : alarmGradeList.type == 1
+        ? '总数'
+        : alarmGradeList.type == 1
           ? '一级告警'
           : alarmGradeList.type == 2
-          ? '二级告警'
-          : alarmGradeList.type == 3
-          ? '其它'
-          : ''
+            ? '二级告警'
+            : alarmGradeList.type == 3
+              ? '其它'
+              : ''
       }}
     </div>
     <!-- 返回end -->
 
     <!-- 表格start -->
-    <el-table
-      :data="tableData"
-      border
-      stripe
-      :header-cell-style="headClass"
-      :cell-style="cellStyle"
-    >
-      <el-table-column
-        fixed
-        prop="soeTime"
-        label="发生时间"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="measDesc"
-        label="测点描述"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="alarmName"
-        label="告警名称"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="alarmType"
-        label="告警类型"
-        width=""
-      ></el-table-column>
+    <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA' }">
+      <el-table-column fixed prop="soeTime" label="发生时间" width=""></el-table-column>
+      <el-table-column prop="measDesc" label="测点描述" width=""></el-table-column>
+      <el-table-column prop="alarmName" label="告警名称" width=""></el-table-column>
+      <el-table-column prop="alarmType" label="告警类型" width=""></el-table-column>
       <el-table-column prop="check" label="详情" width="">
         <template #default="scope">
-          <span v-if="scope.row.handlingStatus!=1&&store.state.authorities.indexOf('修改')==-1" style="cursor:default;color:#ccc">查看</span>
-                    <span @click="checkItem_addItem(scope.row)" v-else>查看</span>
-
+          <span v-if="scope.row.handlingStatus != 1 && store.state.authorities.indexOf('修改') == -1"
+            style="cursor:default;color:#ccc">
+            查看
+          </span>
+          <span v-else style="color: #1187FF; cursor: pointer " @click="checkItem_addItem(scope.row)">查看</span>
         </template>
       </el-table-column>
       <el-table-column prop="eddl" label="状态" width="">
         <template #default="scope">
-          <span
-            :style="{
-              color:
-                scope.row.handlingStatus == 1
-                  ? '#8DCF6E'
-                  : scope.row.handlingStatus == 2
+          <span :style="{
+            color:
+              scope.row.handlingStatus == 1
+                ? '#8DCF6E'
+                : scope.row.handlingStatus == 2
                   ? '#FF747B'
                   : '#5c88fa',
-            }"
-          >
+          }
+            ">
             {{
               scope.row.handlingStatus == 0
-                ? '未处理'
-                : scope.row.handlingStatus == 1
+              ? '未处理'
+              : scope.row.handlingStatus == 1
                 ? '已处理'
                 : scope.row.handlingStatus == 2
-                ? '待确认'
-                : scope.row.handlingStatus == 3
-                ? '自动恢复'
-                : '过期失效'
+                  ? '待确认'
+                  : scope.row.handlingStatus == 3
+                    ? '自动恢复'
+                    : '过期失效'
             }}
           </span>
         </template>
@@ -84,159 +62,110 @@
 
     <!-- 分页start -->
     <div class="paginationBlock">
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="currentPage"
-        :page-sizes="[15, 20, 25, 30]"
-        :page-size="pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-      ></el-pagination>
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
+        :page-sizes="[15, 20, 25, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
+        :total="total"></el-pagination>
     </div>
     <!-- 分页end -->
 
     <!--弹框组件开始-----------------------start-->
-    <dialog-component
-      :show_Dialog="showDialog"
-      :dialog-title="dialogTitle"
-      :item-info="tableItem"
-      @closeDialog="closeDialog"
-      @listSelect="listSelect"
-    ></dialog-component>
+    <dialog-component ref="dialogComponentRef" @listSelect="listSelect"></dialog-component>
     <!--弹框组件开始-----------------------end-->
   </div>
 </template>
 
-<script>
-import dialogComponent from './dialogComponent'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import { defineComponent, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/alarmManage/index'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'AlarmTotal',
-  props: {
-    pageShow: Boolean,
-    alarmGradeList: Object,
-  }, 
-  components: { dialogComponent },
-  setup(props, { emit }) {
-    const store = useStore()
-
-    const total = ref(0)
-    const pageSize = ref(15)
-    const currentPage = ref(1)
-    const tableData = ref([])
-    const showDialog = ref(false)
-
-    const dialogTitle = ref('')
-    const tableItem = ref([])
-
-    //查询
-    function listSelect() {
-      api
-        .alarmGradeList({
-          // siteId: store.state.siteId,
-          siteId:props.alarmGradeList.siteId,
-          startTime: props.alarmGradeList.startTime,
-          endTime: props.alarmGradeList.endTime,
-          size: pageSize.value,
-          current: currentPage.value,
-          type: props.alarmGradeList.type,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            total.value = requset.data.total
-            tableData.value = requset.data.records
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-
-    // 查看操作
-    const checkItem_addItem = (row) => {
-      //如果没有修改权限,并且不是已处理
-      if(row.handlingStatus!=1&&store.state.authorities.indexOf('修改')==-1){
-       return
-      }
-
-      tableItem.value = row
-      dialogTitle.value = '告警详情'
-      showDialog.value = true
-    }
-
-    //查看///添加操作
-    const handleClick = (row) => {
-      alert('查看对应站点（页面跳转）')
-      console.log(row)
-    }
-
-    onMounted(() => {
-      listSelect()
+/*----------------------------------组件引入-----------------------------------*/
+import dialogComponent from './dialogComponent'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+  pageShow: Boolean,
+  alarmGradeList: Object,
+}) //数据双向绑定
+const emit = defineEmits(['func']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  tableData: [],
+  total: 0,
+  pageSize: 15,
+  currentPage: 1,
+  showDialog: false,
+})
+const { tableData, total, pageSize, currentPage, showDialog } = toRefs(state)
+
+
+const dialogTitle = ref('')
+const tableItem = ref([])
+
+//查询
+function listSelect() {
+  api
+    .alarmGradeList({
+      // siteId: store.state.siteId,
+      siteId: props.alarmGradeList.siteId,
+      startTime: props.alarmGradeList.startTime,
+      endTime: props.alarmGradeList.endTime,
+      size: pageSize.value,
+      current: currentPage.value,
+      type: props.alarmGradeList.type,
     })
-
-    //关闭弹窗
-    const closeDialog = (flag) => {
-      showDialog.value = flag
-    }
-    
-    //返回
-    const goBack = () => {
-      emit('func')
-    }
-    //条数
-    const handleSizeChange = (val) => {
-      pageSize.value = val
-      listSelect()
-    }
-    //页数
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
-      listSelect()
-    }
-    //自定义列样式
-    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
-      row, column, rowIndex
-      // console.log(row, column, rowIndex)
-      if (columnIndex === 4) {
-        return `color:#1187FF;cursor:pointer`
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        total.value = requset.data.total
+        tableData.value = requset.data.records
       } else {
-        return ''
+        ElMessage.error(requset.msg)
       }
-    }
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA;'
-    }
-    return {
-      handleSizeChange,
-      handleCurrentChange,
-      goBack,
-      checkItem_addItem,
-      headClass,
-      cellStyle,
-      handleClick,
-      listSelect,
-      closeDialog,
-      store,
-
-      showDialog,
-      input: '请输入发生时间',
-
-      total,
-      pageSize,
-      currentPage,
-      tableData,
-
-      dialogTitle,
-      tableItem,
-    }
-  },
+    })
+}
+
+// 查看操作
+const checkItem_addItem = (row) => {
+  //如果没有修改权限,并且不是已处理
+  if (
+    row.handlingStatus != 1 &&
+    store.state.authorities.indexOf('修改') == -1
+  ) {
+    return
+  }
+
+  proxy.$refs['dialogComponentRef'].openDialog({
+    dialogTitle: '告警详情',
+    tableItem: row
+  })
+
+}
+
+onMounted(() => {
+  listSelect()
 })
+
+//返回
+const goBack = () => {
+  emit('func')
+}
+
+//条数
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  listSelect()
+}
+//页数
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  listSelect()
+}
 </script>
 
-<style lang='scss' scoped>
-</style>
+<style lang="scss" scoped></style>

src/views/alarmManage/dialogComponent.vue

@@ -1,20 +1,9 @@
 <template>
-  <el-dialog
-    :title="dialogTitle"
-    v-model="showDialog"
-    width="640px"
-    @close="closeDialog"
-    @open="open"
-  >
-    <el-form
-      ref="formInfo"
-      :model="form"
-      class="demo-form-inline alarmStatusDialog"
-      label-width="100px"
-    >
+  <el-dialog :title="dialogTitle" v-model="showDialog" width="640px" @close="closeDialog" @open="open">
+    <el-form ref="formInfo" :model="form" class="demo-form-inline alarmStatusDialog" label-width="100px">
       <div class="topInfo underline">
         <el-form-item label="告警时间：" prop="soeTime">
-          {{ itemInfo.soeTime }}
+          {{ form.soeTime }}
         </el-form-item>
         <!-- <el-form-item label="告警历时：" prop="stationCode">3分钟</el-form-item> -->
         <!-- <el-form-item label="关联告警：" prop="stationAddress">
@@ -22,29 +11,26 @@
         </el-form-item> -->
         <!-- <div class="deviceTit"></div> -->
         <el-button type="success" class="lubo" style="margin-bottom: 15px">
-          {{ itemInfo.measDesc }}
+          {{ form.measDesc }}
         </el-button>
-        <div
-          class="handleStatus"
-          :style="{
-            color:
-              itemInfo.handlingStatus == 1
-                ? '#8DCF6E'
-                : itemInfo.handlingStatus == 2
+        <div class="handleStatus" :style="{
+          color:
+            form.handlingStatus == 1
+              ? '#8DCF6E'
+              : form.handlingStatus == 2
                 ? '#FF747B'
                 : '#5c88fa',
-          }"
-        >
+        }">
           {{
-            itemInfo.handlingStatus == 0
-              ? '未处理'
-              : itemInfo.handlingStatus == 1
+            form.handlingStatus == 0
+            ? '未处理'
+            : form.handlingStatus == 1
               ? '已处理'
-              : itemInfo.handlingStatus == 2
-              ? '待确认'
-              : itemInfo.handlingStatus == 3
-              ? '自动恢复'
-              : '过期失效'
+              : form.handlingStatus == 2
+                ? '待确认'
+                : form.handlingStatus == 3
+                  ? '自动恢复'
+                  : '过期失效'
           }}
         </div>
       </div>
@@ -61,10 +47,10 @@
         {{ form.route }}
       </el-form-item>
       <el-form-item label="告警信息：" prop="deviceNum">
-        {{ itemInfo.measDesc.split(itemInfo.measDesc.slice(-2))[0] }}
+        {{ form.measDesc.split(form.measDesc.slice(-2))[0] }}
       </el-form-item>
       <el-form-item label="告警状态：" prop="deviceNum">
-        {{ itemInfo.measDesc.slice(-2) }}
+        {{ form.measDesc.slice(-2) }}
       </el-form-item>
       <el-form-item label="采集终端：" prop="deviceNum">
         {{ form.deviceCode }}
@@ -81,62 +67,32 @@
 
       <div class="basicTit">处理信息</div>
 
-      <el-form-item
-        label="处理内容："
-        prop="handlingContent"
-        style="margin-bottom: 20px"
-      >
-        <el-input
-          v-model="textarea"
-          :rows="2"
-          type="textarea"
-          placeholder="请输入..."
-          v-if="itemInfo.handlingStatus != 1"
-        />
-        <span v-if="itemInfo.handlingStatus == 1">
+      <el-form-item label="处理内容：" prop="handlingContent" style="margin-bottom: 20px">
+        <el-input v-model="textarea" :rows="2" type="textarea" placeholder="请输入..." v-if="form.handlingStatus != 1" />
+        <span v-if="form.handlingStatus == 1">
           {{
-            itemInfo.handlingContent === '' ? '无' : itemInfo.handlingContent
+            form.handlingContent === '' ? '无' : form.handlingContent
           }}
         </span>
       </el-form-item>
 
       <el-form-item label="现场照片：" prop="deviceNum">
-        <el-upload
-          :action="uploadUrl"
-          :on-success="handleUpAvatar"
-          :on-remove="handleRemove"
-          :show-file-list="true"
-          list-type="picture-card"
-          :limit="3"
-          :on-preview="handlePictureCardPreview"
-          :headers="{ accessToken: [accessToken] }"
-          v-if="itemInfo.handlingStatus != 1"
-        >
+        <el-upload :action="uploadUrl" :on-success="handleUpAvatar" :on-remove="handleRemove" :show-file-list="true"
+          list-type="picture-card" :limit="3" :on-preview="handlePictureCardPreview"
+          :headers="{ accessToken: [accessToken] }" v-if="form.handlingStatus != 1">
           <i class="el-icon-plus"></i>
         </el-upload>
         <el-dialog title="查看图片" v-model="dialogVisible" width="400px">
-          <img
-            style="width: 100%"
-            :src="
-              itemInfo.handlingStatus == 1
-                ? fileImages + form.image
-                : dialogImageUrl
-            "
-            alt=""
-          />
+          <img style="width: 100%" :src="form.handlingStatus == 1
+            ? fileImages + form.image
+            : dialogImageUrl
+            " alt="" />
         </el-dialog>
-        <img
-          @click="handlePictureCardPreview"
-          v-if="itemInfo.handlingStatus == 1"
-          style="width: 90px"
-          :src="fileImages + form.image"
-          alt=""
-        />
+        <img @click="handlePictureCardPreview" v-if="form.handlingStatus == 1" style="width: 90px"
+          :src="fileImages + form.image" alt="" />
       </el-form-item>
-      <br />
-      <br />
-      <br />
-      <div style="text-align: right" v-if="itemInfo.handlingStatus != 1">
+
+      <div style="margin-top:30px;text-align: right" v-if="form.handlingStatus != 1">
         <el-button @click="closeDialog()">取消</el-button>
         <el-button type="primary" @click="submitForm()">确定</el-button>
       </div>
@@ -144,181 +100,124 @@
   </el-dialog>
 </template>
 
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import { defineComponent, ref, watchEffect, reactive, toRefs } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/alarmManage/index'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'DialogComponent',
-  emits: ['closeDialog', 'listSelect'],
-  props: {
-    show_Dialog: Boolean,
-    dialogTitle: {
-      type: String,
-      default: '告警详情',
-    },
-    itemInfo: {
-      type: Object,
-      default: function () {
-        return {}
-      },
-    },
-  },
-  setup(props, { emit }) {
-    const store = useStore()
-    const showDialog = ref(false)
-    const formInfo = ref(null)
-    const form = ref([])
-    const textarea = ref('')
-    const dialogVisible = ref(false)
-    const accessToken = ref(store.state.user.accessToken)
-    const dialogImageUrl = ref('')
-    const fileImages = ref(window.PLATFROM_CONFIG.images)
-    const image = ref('')
-    const imageFile = ref([])
-
-    const dataSet = reactive({
-      uploadUrl:
-        window.PLATFROM_CONFIG.baseUrl +
-        '/patrolInspectionDevice/pictureUpload',
-      fileList: [],
-    })
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits(['func']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const formInfo = ref(null)
+const showDialog = ref(false)
+const dialogTitle = ref(null)
+const state = reactive({
+  form: {},
+})
+const { form } = toRefs(state)
+
+
+const textarea = ref('')
+const dialogVisible = ref(false)
+const accessToken = ref(store.state.user.accessToken)
+const dialogImageUrl = ref('')
+const fileImages = ref(window.PLATFROM_CONFIG.images)
+const image = ref('')
+const imageFile = ref([])
+
+const dataSet = reactive({
+  uploadUrl:
+    window.PLATFROM_CONFIG.baseUrl +
+    '/patrolInspectionDevice/pictureUpload',
+  fileList: [],
+})
 
-    //删除照片
-    function handleRemove(res) {
-      Array.prototype.indexOf = function (val) {
-        for (var i = 0; i < this.length; i++) {
-          if (this[i] == val) return i
-        }
-        return -1
-      }
-      Array.prototype.remove = function (val) {
-        var index = this.indexOf(val)
-        if (index > -1) {
-          this.splice(index, 1)
-        }
-      }
-      dataSet.fileList.remove(res.name)
+//删除照片
+function handleRemove(res) {
+  Array.prototype.indexOf = function (val) {
+    for (var i = 0; i < this.length; i++) {
+      if (this[i] == val) return i
     }
-
-    const handleUpAvatar = (res, file) => {
-      image.value = res.data
-      imageFile.value = file
+    return -1
+  }
+  Array.prototype.remove = function (val) {
+    var index = this.indexOf(val)
+    if (index > -1) {
+      this.splice(index, 1)
     }
+  }
+  dataSet.fileList.remove(res.name)
+}
 
-    const handlePictureCardPreview = (file) => {
-      dialogImageUrl.value = file.url
-      dialogVisible.value = true
-    }
+const handleUpAvatar = (res, file) => {
+  image.value = res.data
+  imageFile.value = file
+}
 
-    const resetForm = () => {
-      formInfo.value.resetFields()
-    }
+const handlePictureCardPreview = (file) => {
+  dialogImageUrl.value = file.url
+  dialogVisible.value = true
+}
 
-    const roleValid = (rule, value, callback) => {
-      if (value.length === 0) {
-        callback(new Error('角色不能为空'))
+// 保存操作
+function submitForm() {
+  api
+    .alarmPower({
+      id: props.itemInfo.id,
+      handlingContent: textarea.value,
+      image: image.value,
+      handlingStatus: 1,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        ElMessage({
+          message: '操作成功！',
+          type: 'success',
+        })
+        textarea.value = ''
+        closeDialog()
+        emit('listSelect')
       } else {
-        callback()
+        ElMessage.error(requset.msg)
       }
-    }
+    })
+}
 
-    // onSelectedDrug(event) {
-    //   this.siteList = event;
-    //   console.log(this.siteList);
-    // },
-    // 保存操作
-    const submitForm = () => {
-      api
-        .alarmPower({
-          id: props.itemInfo.id,
-          handlingContent: textarea.value,
-          image: image.value,
-          handlingStatus: 1,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            ElMessage({
-              message: '操作成功！',
-              type: 'success',
-            })
-            textarea.value = ''
-            closeDialog()
-            emit('listSelect')
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
+function openDialog(event) {
+  dialogTitle.value = event.dialogTitle
 
-    const open = () => {
-      api.alarmPower1(props.itemInfo.id).then((requset) => {
-        if (requset.status === 'SUCCESS') {
-          form.value = requset.data
-        } else {
-          ElMessage.error(requset.msg)
-        }
-      })
-    }
-    // 关闭弹框
-    const closeDialog = () => {
-      showDialog.value = false
-      emit('closeDialog', false)
+  state.form = event.tableItem
+
+  api.alarmPower1(event.tableItem.id).then((requset) => {
+    if (requset.status === 'SUCCESS') {
+      form.value = requset.data
+    } else {
+      ElMessage.error(requset.msg)
     }
+  })
 
-    watchEffect((fn, options) => {
-      fn, options
-      showDialog.value = props.show_Dialog
-    })
+  showDialog.value = true
+}
 
-    return {
-      open,
-      handleUpAvatar,
-      handleRemove,
-      handlePictureCardPreview,
-      resetForm,
-      roleValid,
-      submitForm,
-      closeDialog,
+// 关闭弹框
+const closeDialog = () => {
+  formInfo.value.resetFields()
+  showDialog.value = false
+}
 
-      ...toRefs(dataSet),
-      accessToken,
-      dialogImageUrl,
-      fileImages,
-      image,
-      disabled: false,
-      dialogVisible,
-      textarea,
-      showDialog,
-      form,
-      formInfo,
-      options: [
-        {
-          value: '选项1',
-          label: '站点一',
-        },
-        {
-          value: '选项2',
-          label: '站点二',
-        },
-        {
-          value: '选项3',
-          label: '站点三',
-        },
-        {
-          value: '选项4',
-          label: '站点四',
-        },
-        {
-          value: '选项5',
-          label: '站点五',
-        },
-      ],
-    }
-  },
-})
+// 暴露变量
+defineExpose({
+  openDialog,
+});
 </script>
  
 <style scoped lang="scss">
@@ -332,6 +231,5 @@ export default defineComponent({
 }
 </style>
 <style>
-.alarmStatusDialog .el-form-item:not(.user-layout .el-form-item) {
-}
+.alarmStatusDialog .el-form-item:not(.user-layout .el-form-item) {}
 </style>

src/views/alarmManage/index.vue

@@ -1,63 +1,35 @@
 <template>
   <div class="app-container alarmingManage" v-if="pageShow">
     <!-- 筛选start -->
-    <div class="filter-container mb-10">
-      <div class="left">
-        <div>
-          <div class="filter-item">
-            站点:
-            <el-select
-              v-model="store.state.siteId"
-              placeholder="请选择"
-              style="width: 200px"
-              clearable
-              filterable
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            >
-              <el-option
-                v-for="item in store.state.siteList"
-                :key="item.id"
-                :label="item.siteName"
-                :value="item.id"
-              ></el-option>
-            </el-select>
-          </div>
-          <div class="filter-item">
-            时间：
-            <el-date-picker
-              v-model="dateValue"
-              type="datetimerange"
-              range-separator="至"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              style="width: auto"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            ></el-date-picker>
-          </div>
-          <el-button
-          :disabled="store.state.authorities.indexOf('查询')==-1"
-            class="search-button"
-            @click=";(store.state.siteId = ''), (dateValue = ''), listSelect()"
-          >
-            重置
-          </el-button>
-          <el-button :disabled="store.state.authorities.indexOf('查询')==-1" type="primary" class="search-button" @click="listSelect()">
-            搜索
-          </el-button>
-        </div>
+    <div class="filter-container mb-10" style="justify-content: left">
+      <div class="filter-item">
+        <span class="title">站点：</span>
+        <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 200px" clearable filterable
+          :disabled="store.state.authorities.indexOf('查询') == -1">
+          <el-option v-for="item in store.state.siteList" :key="item.id" :label="item.siteName"
+            :value="item.id"></el-option>
+        </el-select>
       </div>
+      <div class="filter-item">
+        <span class="title">时间：</span>
+        <el-date-picker v-model="dateValue" type="datetimerange" range-separator="至" start-placeholder="开始日期"
+          end-placeholder="结束日期" style="width: auto"
+          :disabled="store.state.authorities.indexOf('查询') == -1"></el-date-picker>
+      </div>
+      <el-button :disabled="store.state.authorities.indexOf('查询') == -1" class="search-button"
+        @click="; (store.state.siteId = ''), (dateValue = ''), listSelect()">
+        重置
+      </el-button>
+      <el-button :disabled="store.state.authorities.indexOf('查询') == -1" type="primary" class="search-button"
+        @click="listSelect()">
+        搜索
+      </el-button>
     </div>
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table
-      :data="tableData"
-      border
-      stripe
-      :header-cell-style="headClass"
-      :cell-style="cellStyle"
-      class="alarmingTable"
-    >
+    <el-table class="alarmingTable" :data="tableData" :cell-style="cellStyle"
+      :header-cell-style="{ background: '#FAFAFA' }" border stripe>
       <el-table-column prop="siteName" label="站点名称" width="">
         <template #default="scope">
           <div @click="handleClick(scope.row)">{{ scope.row.siteName }}</div>
@@ -65,63 +37,42 @@
       </el-table-column>
       <el-table-column prop="totalGrade" label="总数">
         <template #default="scope">
-          <span
-            class="gradualBg total"
-            :class="{ transparent: scope.row.totalGrade == 0 }"
-            :style="{
-              width:
-                (scope.row.totalGrade / allMaxData.totalNumMax) * 100 + '%',
-            }"
-             style="min-width:35px!important"
-            @click="goAlarmTotal(0, scope.row.siteName, scope.row.siteId)"
-          >
+          <span class="gradualBg total" :class="{ transparent: scope.row.totalGrade == 0 }" :style="{
+            width:
+              (scope.row.totalGrade / allMaxData.totalNumMax) * 100 + '%',
+            minWidth: '35px!important',
+          }" @click="goAlarmTotal(0, scope.row.siteName, scope.row.siteId)">
             {{ scope.row.totalGrade }}
           </span>
         </template>
       </el-table-column>
       <el-table-column prop="oneGrade" label="一级告警" width="">
         <template #default="scope">
-          <span
-            class="gradualBg"
-            :class="{ transparent: scope.row.oneGrade == 0 }"
-            :style="{
-              width:
-                (scope.row.oneGrade / allMaxData.oneAlarmingMax) * 100 + '%',
-            }"
-             style="min-width:35px!important"
-            @click="goAlarmTotal(1, scope.row.siteName, scope.row.siteId)"
-          >
+          <span class="gradualBg" :class="{ transparent: scope.row.oneGrade == 0 }" :style="{
+            width:
+              (scope.row.oneGrade / allMaxData.oneAlarmingMax) * 100 + '%',
+            minWidth: '35px!important',
+          }" @click="goAlarmTotal(1, scope.row.siteName, scope.row.siteId)">
             {{ scope.row.oneGrade }}
           </span>
         </template>
       </el-table-column>
       <el-table-column prop="twoGrade" label="二级告警" width="">
         <template #default="scope">
-          <span
-            class="gradualBg"
-            :class="{ transparent: scope.row.twoGrade == 0 }"
-            :style="{
-              width:
-                (scope.row.twoGrade / allMaxData.twoAlarmingMax) * 100 + '%'
-            }"
-            style="min-width:35px!important"
-            @click="goAlarmTotal(2, scope.row.siteName, scope.row.siteId)"
-          >
+          <span class="gradualBg" :class="{ transparent: scope.row.twoGrade == 0 }" :style="{
+            width:
+              (scope.row.twoGrade / allMaxData.twoAlarmingMax) * 100 + '%',
+            minWidth: '35px!important',
+          }" @click="goAlarmTotal(2, scope.row.siteName, scope.row.siteId)">
             {{ scope.row.twoGrade }}
           </span>
         </template>
       </el-table-column>
-      <!-- <el-table-column prop="other" label="其他" width=""></el-table-column> -->
       <el-table-column prop="otherGrade" label="其他" width="">
         <template #default="scope">
-          <span
-            class="gradualBg"
-            :class="{ transparent: scope.row.otherGrade == 0 }"
-            :style="{
-              width: (scope.row.otherGrade / allMaxData.otherMax) * 100 + '%',
-            }"
-            @click="goAlarmTotal(3, scope.row.siteName, scope.row.siteId)"
-          >
+          <span class="gradualBg" :class="{ transparent: scope.row.otherGrade == 0 }" :style="{
+            width: (scope.row.otherGrade / allMaxData.otherMax) * 100 + '%',
+          }" @click="goAlarmTotal(3, scope.row.siteName, scope.row.siteId)">
             {{ scope.row.otherGrade }}
           </span>
         </template>
@@ -131,188 +82,149 @@
 
     <!-- 分页start -->
     <div class="paginationBlock">
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="currentPage"
-        :page-sizes="[15, 20, 25, 30]"
-        :page-size="pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-      ></el-pagination>
+      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
+        :page-sizes="[15, 20, 25, 30]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
+        :total="total"></el-pagination>
     </div>
-
     <!-- 分页end -->
-
-    <!-- {{ totalNumMax }}
-      {{ oneAlarmingMax }} -->
   </div>
-  <alarm-total
-    v-else
-    :pageShow="pageShow"
-    @func="goAlarmTotal"
-    :alarmGradeList="alarmGradeList"
-  ></alarm-total>
+  <alarm-total v-else :pageShow="pageShow" @func="goAlarmTotal" :alarmGradeList="alarmGradeList"></alarm-total>
 </template>
 
-<script>
-import alarmTotal from './alarmTotal'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import { computed, defineComponent, onMounted, ref } from 'vue'
-import * as api from '@/api/alarmManage/index'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElNotification } from 'element-plus'
+import {
+  ref,
+  onMounted,
+  watch,
+  getCurrentInstance,
+  reactive,
+  toRefs,
+  computed,
+} from 'vue'
 import { useRouter } from 'vue-router'
-
-export default defineComponent({
-  components: { alarmTotal },
-  name: 'VariableList',
-  setup() {
-    const store = useStore()
-    const router = useRouter()
-
-    const pageShow = ref(true)
-    const alarmGradeList = ref({})
-    const dateValue =ref('')
-    const total = ref(0)
-    const pageSize = ref(15)
-    const currentPage = ref(1)
-    const tableData = ref([])
-
-    //查询
-    function listSelect() {
-      store.commit('TimeAll_function', dateValue.value)
-      api
-        .alarmGradeCount({
-          startTime: store.state.Time_Data[0],
-          endTime: store.state.Time_Data[1],
-          siteId: store.state.siteId,
-          size: pageSize.value,
-          current: currentPage.value,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            total.value = requset.data.total
-            tableData.value = requset.data.records
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-
-    //查看
-    const handleClick = (row) => {
-      // alert('查看对应站点（页面跳转）')
-      console.log(row)
-    }
-
-    const goVariableList = () => {
-      // 跳转至订单列表页面传参
-      router.push({
-        path: '../siteManage/variableList/index.vue',
-      })
-      // this.$router.push({ name:'variableList'})
-    }
-
-    const goAlarmTotal = (val, val1, val2) => {
-      pageShow.value = !pageShow.value
-      store.commit('TimeAll_function', dateValue.value)
-      if (val != undefined) {
-        alarmGradeList.value = {
-          startTime: store.state.Time_Data[0],
-          endTime: store.state.Time_Data[1],
-          type: val,
-          siteName: val1,
-          siteId: val2,
-        }
-      }
-    }
-
-    onMounted(() => {
-      listSelect()
-      // window.location.reload()
-    })
-
-    //条数
-    const handleSizeChange = (val) => {
-      pageSize.value = val
-      listSelect()
-    }
-    //页数
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
-      listSelect()
-    }
-
-    const allMaxData = computed(() => {
-      var allMaxData = {}
-
-      var totalNumData = []
-      var oneAlarmingData = []
-      var twoAlarmingData = []
-      var otherData = []
-
-      tableData.value.forEach((element, index) => {
-        totalNumData[index] = element.totalGrade
-        oneAlarmingData[index] = element.oneGrade
-        twoAlarmingData[index] = element.twoGrade
-        otherData[index] = element.otherGrade
-      })
-
-      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
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/alarmManage/index'
+/*----------------------------------组件引入-----------------------------------*/
+import alarmTotal from './alarmTotal'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({}) //数据双向绑定
+const store = useStore()
+const router = useRouter()
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  tableData: [],
+  total: 0,
+  pageSize: 15,
+  currentPage: 1,
+  showDialog: false,
+  tabPosition: 'one',
+})
+const { tableData, total, pageSize, currentPage, showDialog, tabPosition } =
+  toRefs(state)
+
+const pageShow = ref(true)
+const alarmGradeList = ref({})
+const dateValue = ref('')
+
+//查询
+function listSelect() {
+  store.commit('TimeAll_function', dateValue.value)
+  api
+    .alarmGradeCount({
+      startTime: store.state.Time_Data[0],
+      endTime: store.state.Time_Data[1],
+      siteId: store.state.siteId,
+      size: pageSize.value,
+      current: currentPage.value,
     })
-
-    //自定义列样式
-    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
-      row, column, rowIndex
-      // console.log(row, column, rowIndex)
-      if (columnIndex !== 0) {
-        return `color:#0284E8;cursor:pointer`
-      }
-      if (columnIndex) {
-        // return `text-align:left;cursor:pointer;`
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        total.value = requset.data.total
+        tableData.value = requset.data.records
       } else {
-        return ''
+        ElMessage.error(requset.msg)
       }
+    })
+}
+
+//查看
+const handleClick = (row) => {
+  // alert('查看对应站点（页面跳转）')
+  console.log(row)
+}
+
+const goVariableList = () => {
+  // 跳转至订单列表页面传参
+  router.push({
+    path: '../siteManage/variableList/index.vue',
+  })
+  // this.$router.push({ name:'variableList'})
+}
+
+const goAlarmTotal = (val, val1, val2) => {
+  pageShow.value = !pageShow.value
+  store.commit('TimeAll_function', dateValue.value)
+  if (val != undefined) {
+    alarmGradeList.value = {
+      startTime: store.state.Time_Data[0],
+      endTime: store.state.Time_Data[1],
+      type: val,
+      siteName: val1,
+      siteId: val2,
     }
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA;'
-    }
-    return {
-      headClass,
-      goVariableList,
-      handleCurrentChange,
-      handleSizeChange,
-      cellStyle,
-      handleClick,
-      goAlarmTotal,
-      listSelect,
-
-      store,
-      pageShow,
-      dateValue,
+  }
+}
 
-      total,
-      pageSize,
-      currentPage,
-      tableData,
-      alarmGradeList,
-
-      showDialog: false,
-      tabPosition: 'one',
+onMounted(() => {
+  listSelect()
+})
 
-      input: '',
-      region: '',
-      allMaxData,
-    }
-  },
+//条数
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  listSelect()
+}
+//页数
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  listSelect()
+}
+
+const allMaxData = computed(() => {
+  var allMaxData = {}
+
+  var totalNumData = []
+  var oneAlarmingData = []
+  var twoAlarmingData = []
+  var otherData = []
+
+  tableData.value.forEach((element, index) => {
+    totalNumData[index] = element.totalGrade
+    oneAlarmingData[index] = element.oneGrade
+    twoAlarmingData[index] = element.twoGrade
+    otherData[index] = element.otherGrade
+  })
+
+  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
 })
+
+//自定义列样式
+function cellStyle({ row, column, rowIndex, columnIndex }) {
+  if (columnIndex !== 0) {
+    return { color: '#0284E8', cursor: 'pointer' }
+  }
+  return {}
+}
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/views/deviceManage/powerEquip/communicateEquip/dialog/cloneDialog.vue

@@ -1,22 +1,10 @@
 <template>
   <!-- 克隆 -->
-  <el-dialog
-    v-model="cloneDialog"
-    title="变量克隆"
-    width="30rem"
-    @close="close"
-    @open="open"
-  >
+  <el-dialog v-model="cloneDialog" title="变量克隆" width="30rem" @close="close">
     <div class="dialogOne">
-      <el-form
-        :model="form"
-        :rules="rules"
-        ref="ruleForm"
-        label-width="150px"
-        class="demo-ruleForm"
-      >
+      <el-form :model="form" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
         <el-form-item label="克隆设备对象:" prop="deviceCode">
-          <span>{{ DialogArray.deviceCode }}</span>
+          <span>{{ form.deviceCode }}</span>
         </el-form-item>
         <el-form-item label="变量克隆至:" prop="cloneRadio">
           <el-radio-group v-model="form.type" size="medium">
@@ -24,87 +12,36 @@
             <el-radio :label="2">已有设备（仅克隆变量）</el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item
-          label="设备名:"
-          prop="cloneInputName"
-          v-if="form.type == 1"
-        >
-          <el-input
-            v-model="form.cloneInputName"
-            placeholder="请输入设备名"
-            clearable
-          />
+        <el-form-item label="设备名:" prop="cloneInputName" v-if="form.type == 1">
+          <el-input v-model="form.cloneInputName" placeholder="请输入设备名" clearable />
         </el-form-item>
-        <el-form-item
-          label="设备编号:"
-          prop="cloneInputCode"
-          v-if="form.type == 1"
-        >
-          <el-input
-            v-model="form.cloneInputCode"
-            placeholder="请输入设备编号"
-            clearable
-          />
+        <el-form-item label="设备编号:" prop="cloneInputCode" v-if="form.type == 1">
+          <el-input v-model="form.cloneInputCode" placeholder="请输入设备编号" clearable />
         </el-form-item>
-
         <el-form-item label="选择站点：" v-if="form.type != 1">
-          <el-select
-              v-model="store.state.siteId"
-              @change="siteChange"
-              placeholder="请选择"
-              clearable
-              filterable
-            >
-              <el-option
-                v-for="item in store.state.siteList"
-                :key="item.id"
-                :label="item.siteName"
-                :value="item.id"
-              ></el-option>
-            </el-select>
+          <el-select v-model="store.state.siteId" @change="select_deviceList()" placeholder="请选择" clearable filterable>
+            <el-option v-for="item in store.state.siteList" :key="item.id" :label="item.siteName"
+              :value="item.id"></el-option>
+          </el-select>
         </el-form-item>
-        
-       
         <el-form-item label="选择设备：" v-if="form.type != 1">
-          <el-select
-            filterable
-            v-model="form.oldDeviceCode"
-            placeholder="请选择所需克隆设备（可输入）"
-          >
-            <el-option
-              v-for="list in deviceList"
-              :key="list"
-              :label="list.deviceName"
-              :value="list.deviceCode"
-            ></el-option>
+          <el-select filterable v-model="form.oldDeviceCode" placeholder="请选择所需克隆设备（可输入）">
+            <el-option v-for="list in deviceList" :key="list" :label="list.deviceName"
+              :value="list.deviceCode"></el-option>
           </el-select>
         </el-form-item>
       </el-form>
       <!-- <div class="content">
         <span>*</span>
         模拟量:
-        <el-input
-          class="inputer"
-          v-model="cloneInputModel"
-          placeholder="请输入模拟量"
-          clearable
-        />
+        <el-input class="inputer" v-model="cloneInputModel" placeholder="请输入模拟量" clearable />
         状态量:
-        <el-input
-          class="inputer"
-          v-model="cloneInputState"
-          placeholder="请输入状态量"
-          clearable
-        />
+        <el-input class="inputer" v-model="cloneInputState" placeholder="请输入状态量" clearable />
       </div> -->
     </div>
     <template #footer>
       <span class="dialog-footer">
-        <!-- <el-checkbox
-          v-model="cloneChecked"
-          label="连续克隆模式"
-          style="margin-right: 10px"
-        ></el-checkbox> -->
+        <!-- <el-checkbox v-model="cloneChecked" label="连续克隆模式" style="margin-right: 10px"></el-checkbox> -->
         <el-button @click="cloneDialog = false">取消</el-button>
         <el-button type="primary" @click="clone()">确定</el-button>
       </span>
@@ -112,166 +49,121 @@
   </el-dialog>
 </template>
 
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import { defineComponent, ref, watchEffect } from 'vue'
-import * as api from '@/api/deviceManage/powerEquip/communicateEquip'
+import { ref, onMounted, watch, getCurrentInstance, watchEffect } from 'vue'
 import { ElMessage } from 'element-plus'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/deviceManage/powerEquip/communicateEquip'
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits(['handleSelect']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const cloneDialog = ref(false) //克隆弹窗控制
 
-export default defineComponent({
-  name: 'powerEquip',
-  components: {},
-  emits: ['closeNo', 'select'],
-  props: {
-    clone_Dialog: Boolean,
-    DialogArray: Object,
-  },
-  setup(props, context) {
-    const store = useStore()
-    store
+const form = ref({
+  type: 1,
+  cloneInputName: '',
+  cloneInputCode: '',
+  oldDeviceCode: '',
+})
+const rules = {
+  cloneInputCode: [
+    { required: true, message: '设备名不能为空', trigger: 'blur', },
+    { min: 5, max: 25, message: '设备名长度不能小于5大于25', trigger: 'blur', },
+  ],
+  cloneInputName: [
+    { required: true, message: '设备编号不能为空', trigger: 'blur', },
+    { min: 5, max: 25, message: '设备编号长度不能小于5大于25', trigger: 'blur', },
+  ],
+}
 
-    const form = ref({
-      type: 1,
-      cloneInputName: '',
-      cloneInputCode: '',
-      oldDeviceCode: '',
-    })
 
-    const cloneDialog = ref(false) //克隆弹窗控制
-    const cloneChecked = ref(false) //克隆复选框控制
-    const cloneInputModel = ref('') //克隆input模拟量
-    const cloneInputState = ref('') //克隆input状态量
-    const ruleForm = ref(null)
-    const deviceList = ref([])
+const cloneChecked = ref(false) //克隆复选框控制
+const cloneInputModel = ref('') //克隆input模拟量
+const cloneInputState = ref('') //克隆input状态量
+const ruleForm = ref(null)
+const deviceList = ref([])
 
-    const clone = () => {
-      let list = {}
-      if (form.value.type == 1) {
-        list = {
-          type: form.value.type,
-          oldDeviceCode: props.DialogArray.deviceCode,
-          newDeviceCode: form.value.cloneInputCode,
-          deviceName: form.value.cloneInputName,
-        }
-      } else {
-        list = {
-          type: form.value.type,
-          newDeviceCode: form.value.oldDeviceCode,
-          oldDeviceCode: props.DialogArray.deviceCode,
-        }
-      }
-      ruleForm.value.validate((valid) => {
-        if (valid) {
-          api.variableCloning(list).then((requset) => {
-            if (requset.status === 'SUCCESS') {
-              ElMessage.success({
-                message: '克隆成功',
-                type: 'success',
-              })
-              close()
-              context.emit('Select')
-            } else {
-              ElMessage.error(requset.msg)
-            }
+const clone = () => {
+  let list = {}
+  if (form.value.type == 1) {
+    list = {
+      type: form.value.type,
+      oldDeviceCode: form.value.deviceCode,
+      newDeviceCode: form.value.cloneInputCode,
+      deviceName: form.value.cloneInputName,
+    }
+  } else {
+    list = {
+      type: form.value.type,
+      newDeviceCode: form.value.oldDeviceCode,
+      oldDeviceCode: form.value.deviceCode,
+    }
+  }
+  proxy.$refs["ruleForm"].validate((valid) => {
+    if (valid) {
+      api.variableCloning(list).then((requset) => {
+        if (requset.status === 'SUCCESS') {
+          ElMessage.success({
+            message: '克隆成功',
+            type: 'success',
           })
+          close()
+          emit('handleSelect', false)
         } else {
-          console.log('error submit!!')
-          return false
+          ElMessage.error(requset.msg)
         }
       })
+    } else {
+      console.log('error submit!!')
+      return false
     }
+  })
+}
 
-    //open
-    const open = () => {
-      select_deviceList()
-    }
-
-    // close(): Dialog弹窗关闭之后做的事
-    const close = () => {
-      resetForm()
-      form.value.cloneInputName = ''
-      form.value.cloneInputCode = ''
-      form.value.oldDeviceCode = ''
-      context.emit('closeNo', false)
-      cloneDialog.value = false
-    }
-    function resetForm() {
-      ruleForm.value.resetFields()
-    }
-    // 通过站点切换下拉框 change事件改变
-    const siteChange = () => {
-      select_deviceList()
-    }
+//open
+function openDialog(item) {
+  form.value = item.dialogArray
+  cloneDialog.value = true
+  select_deviceList()
+}
 
-    function select_deviceList() {
-      api
-        .deviceList({
-          siteId: store.state.siteId,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            deviceList.value = requset.data
-            // alert(props.DialogArray.id)
+//弹窗关闭
+function close() {
+  proxy.$refs["ruleForm"].resetFields()
+  form.value.cloneInputName = ''
+  form.value.cloneInputCode = ''
+  form.value.oldDeviceCode = ''
+  cloneDialog.value = false
+}
 
-            for (var i = deviceList.value.length - 1; i >= 0; i--){
-               if (deviceList.value[i].id == props.DialogArray.id) deviceList.value.splice(i, 1)
-            }
-            // console.log(deviceList.value)
-            // console.log('deviceList.value')
-             
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
+function select_deviceList() {
+  api
+    .deviceList({
+      siteId: store.state.siteId,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        deviceList.value = requset.data
 
-    watchEffect((fn, options) => {
-      fn, options
-      cloneDialog.value = props.clone_Dialog
+        for (var i = deviceList.value.length - 1; i >= 0; i--) {
+          if (deviceList.value[i].id == form.value.id) deviceList.value.splice(i, 1)
+        }
+      } else {
+        ElMessage.error(requset.msg)
+      }
     })
+}
 
-    return {
-      siteChange,
-      store,
-      open,
-      close,
-      clone,
-      form,
-      deviceList,
-      cloneDialog,
-      cloneChecked,
-      cloneInputModel,
-      cloneInputState,
-      ruleForm,
-      rules: {
-        cloneInputCode: [
-          {
-            required: true,
-            message: '设备名不能为空',
-            trigger: 'blur',
-          },
-          {
-            min: 5,
-            max: 25,
-            message: '设备名长度不能小于5大于25',
-            trigger: 'blur',
-          },
-        ],
-        cloneInputName: [
-          {
-            required: true,
-            message: '设备编号不能为空',
-            trigger: 'blur',
-          },
-          {
-            min: 5,
-            max: 25,
-            message: '设备编号长度不能小于5大于25',
-            trigger: 'blur',
-          },
-        ],
-      },
-    }
-  },
-})
+// 暴露变量
+defineExpose({
+  openDialog,
+});
 </script>

src/views/deviceManage/powerEquip/communicateEquip/dialog/insert_update.vue

@@ -1,54 +1,22 @@
 <template>
   <div class="powerdialog">
-    <el-dialog
-      :title="dialogTitle"
-      v-model="dialogVisible"
-      @close="close"
-      @open="open"
-      width="640px"
-    >
+    <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" width="640px">
       <div>
-        <el-form
-          ref="formInfo"
-          :model="form"
-          class="demo-form-inline"
-          label-width="150px"
-          :rules="rules"
-        >
+        <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="150px" :rules="rules">
           <el-form-item label="设备名称：" prop="deviceName">
             <el-input v-model="form.deviceName"></el-input>
           </el-form-item>
           <el-form-item label="设备编号：" prop="deviceCode">
-            
-             <el-input v-if="dialogTitle=='修改'" v-model="form.deviceCode" disabled ></el-input>
-             <el-input v-else v-model="form.deviceCode" ></el-input>
+            <el-input v-if="dialogTitle == '修改'" v-model="form.deviceCode" disabled></el-input>
+            <el-input v-else v-model="form.deviceCode"></el-input>
           </el-form-item>
           <el-form-item label="楼层：" prop="floor">
-            <el-input-number
-              v-model="form.floor"
-              controls-position="right"
-              :min="-10"
-              :max="100"
-            ></el-input-number>
+            <el-input-number v-model="form.floor" controls-position="right" :min="-10" :max="100"></el-input-number>
           </el-form-item>
           <el-form-item label="所属站点：" prop="siteId">
-            <el-select
-              v-model="form.siteId"
-              :disabled="
-                dialogTitle !== '新增' &&
-                form.siteId != null &&
-                form.siteId != ''
-                  ? true
-                  : false
-              "
-              placeholder="请选择所属站点"
-            >
-              <el-option
-                v-for="item in siteList"
-                :key="item.value"
-                :label="item.siteName"
-                :value="item.id"
-              ></el-option>
+            <el-select v-model="form.siteId" :disabled="dialogTitle === '修改'" placeholder="请选择所属站点">
+              <el-option v-for="item in store.state.siteList" :key="item.value" :label="item.siteName"
+                :value="item.id"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="设备安装位置：" prop="deviceAddress">
@@ -56,12 +24,7 @@
           </el-form-item>
           <el-form-item label="设备类型:" prop="deviceType">
             <el-select v-model="form.deviceType" placeholder="请选择设备类型">
-              <el-option
-                v-for="item in deviceType"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
-              ></el-option>
+              <el-option v-for="item in deviceType" :key="item.value" :label="item.label" :value="item.value"></el-option>
             </el-select>
           </el-form-item>
           <el-form-item label="sim卡号：" prop="sim">
@@ -78,203 +41,122 @@
   </div>
 </template>
 
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import { defineComponent, ref, watchEffect } from 'vue'
+import { ref, onMounted, watch, getCurrentInstance, watchEffect } from 'vue'
 import { ElMessage } from 'element-plus'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/deviceManage/powerEquip/communicateEquip'
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits(['handleSelect']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const dialogTitle = ref("")
+const dialogVisible = ref(false)
+const form = ref([])
+const rules = {
+  deviceCode: [
+    { required: true, message: '设备编号不能为空', trigger: 'blur', },
+    { min: 5, max: 25, message: '设备编号长度不能小于5大于25', trigger: 'blur', },
+  ],
+  deviceName: [
+    { required: true, message: '设备名称不能为空', trigger: 'blur', },
+    { min: 5, max: 25, message: '设备名称长度不能小于5大于25', trigger: 'blur', },
+  ],
+  floor: [
+    { required: true, message: '楼层不能为空', trigger: 'blur', },
+  ],
+  siteId: [
+    { required: true, message: '请选择所属站点', trigger: 'blur', },
+  ],
+  deviceAddress: [
+    { required: true, message: '请输入设备安装位置', trigger: 'blur', },
+    { min: 2, max: 50, message: '设备安装位置长度不能小于2大于50', trigger: 'blur', },
+  ],
+  deviceType: [
+    { required: true, message: '请选择设备类型', trigger: 'blur', },
+  ],
+}
+const deviceType = ref([
+  { value: 1, label: '183用电设备', },
+  { value: 2, label: '视频监控设备', },
+  { value: 3, label: '171用电设备', },
+  { value: 4, label: '173用电设备', },
+  { value: 5, label: '158智能网关', },
+  { value: 6, label: '其他', },
+])
 
-export default defineComponent({
-  name: 'Dialog',
-  props: {
-    dialogBool: Boolean,
-    dialogTitle: String,
-
-    dataList: Object,
-    deviceNumDataContent: String,
-  },
-  setup(props, context) {
-    const store = useStore()
-    const dialogVisible = ref(false)
-    const form = ref([])
-    const siteList = ref([])
-    const formInfo = ref(null)
-
-    // open(): Dialog弹窗打开之前做的事
-    const open = () => {
-      form.value = props.dataList
-      siteList.value = store.state.siteList
-    }
+//弹窗打开
+function openDialog(item) {
+  dialogTitle.value = item.dialogTitle
+  form.value = item.dataArray
+  dialogVisible.value = true
+}
 
-    // close(): Dialog弹窗关闭之后做的事
-    const close = () => {
-      resetForm()
-      context.emit('show', false)
-      dialogVisible.value = false
-    }
-    function resetForm() {
-      formInfo.value.resetFields()
-    }
+//弹窗关闭
+function close() {
+  proxy.$refs["formInfo"].resetFields()
+  dialogVisible.value = false
+}
 
-    // 保存-修改操作
-    const submitForm = () => {
-      formInfo.value.validate((valid) => {
-        if (valid) {
-          form.value.floor == 0 ? (form.value.floor = 1) : form.value.floor
-          if (props.dialogTitle == '新增') {
-            api.correspondDeviceAdd(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '新增成功',
-                  type: 'success',
-                })
-                close()
-              } else {
-                ElMessage.error(requset.msg)
-              }
+// 保存-修改操作
+function submitForm() {
+  proxy.$refs["formInfo"].validate((valid) => {
+    if (valid) {
+      form.value.floor == 0 ? (form.value.floor = 1) : form.value.floor
+      if (dialogTitle.value == '新增') {
+        api.correspondDeviceAdd(form.value).then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '新增成功',
+              type: 'success',
             })
+
+            emit('handleSelect', false)
+            close()
           } else {
-            api.correspondDeviceUpdate(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '修改成功',
-                  type: 'success',
-                })
-                close()
-              } else {
-                ElMessage.error(requset.msg)
-              }
+            ElMessage.error(requset.msg)
+          }
+        })
+      } else {
+        api.correspondDeviceUpdate(form.value).then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '修改成功',
+              type: 'success',
             })
+            emit('handleSelect', false)
+            close()
+          } else {
+            ElMessage.error(requset.msg)
           }
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
+        })
+      }
+    } else {
+      console.log('error submit!!')
+      return false
     }
+  })
+}
 
-    watchEffect((fn, options) => {
-      fn, options
-      dialogVisible.value = props.dialogBool
-    })
-
-    return {
-      formInfo,
-      siteList,
-      dialogVisible,
-      form,
-      close,
-      open,
-      submitForm,
-
-      rules: {
-        deviceCode: [
-          {
-            required: true,
-             message: '设备编号不能为空',
-            trigger: 'blur',
-          },
-          {
-            min: 5,
-            max: 25,
-            message: '设备编号长度不能小于5大于25',
-            trigger: 'blur',
-          },
-        ],
-        deviceName: [
-          {
-            required: true,
-            message: '设备名称不能为空',
-            trigger: 'blur',
-          },
-          {
-            min: 5,
-            max: 25,
-            message: '设备名称长度不能小于5大于25',
-            trigger: 'blur',
-          },
-        ],
-        floor: [
-          {
-            required: true,
-            message: '楼层不能为空',
-            trigger: 'blur',
-          },
-        ],
-        siteId: [
-          {
-            required: true,
-            message: '请选择所属站点',
-            trigger: 'blur',
-          },
-        ],
-        deviceAddress: [
-          {
-            required: true,
-            message: '请输入设备安装位置',
-            trigger: 'blur',
-          },
-          {
-            min: 2,
-            max: 50,
-            message: '设备安装位置长度不能小于2大于50',
-            trigger: 'blur',
-          },
-        ],
-        deviceType: [
-          {
-            required: true,
-            message: '请选择设备类型',
-            trigger: 'blur',
-          },
-        ],
-      },
-      deviceType: ref([
-        {
-          value: 1,
-          label: '183用电设备',
-        },
-        {
-          value: 2,
-          label: '视频监控设备',
-        },
-        {
-          value: 3,
-          label: '171用电设备',
-        },
-        {
-          value: 4,
-          label: '173用电设备',
-        },
-        {
-          value: 5,
-          label: '158智能网关',
-        },
-        {
-          value: 6,
-          label: '其他',
-        },
-      ]),
-    }
-  },
-})
+// 暴露变量
+defineExpose({
+  openDialog,
+});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped lang="scss">
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-a {
-  color: #42b983;
-}
 .el-form-item:not(.user-layout .el-form-item) {
   margin: 0 auto 10px;
 }
+
 .fontText {
   font-size: 10px;
   margin-top: -5px;

src/views/deviceManage/powerEquip/communicateEquip/index.vue

@@ -37,7 +37,8 @@
     </div>
 
     <div class="comContent">
-      <el-table :data="tableData" border stripe :header-cell-style="headClass" :height="Height" v-loading="loading">
+      <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }"
+        :height="Height" v-loading="loading">
         <el-table-column prop="deviceStatus" align="center" label="状态" width="50">
           <template #default="scope">
             <el-avatar class="status" :style="scope.row.deviceStatus == 1
@@ -80,269 +81,203 @@
           @current-change="handleCurrentChange" background></el-pagination>
       </div>
     </div>
-    <div>
-      <insert-Update :dialogBool="dialogBool" :dialogTitle="dialogTitle" :dataList="dataList"
-        @show="showValue"></insert-Update>
-
-      <clone-Dialog :clone_Dialog="cloneDialogBool" @closeNo="closeNo" @Select="Select"
-        :DialogArray="DialogArray"></clone-Dialog>
-    </div>
+    <insert-Update ref="insertUpdateRef" @handleSelect="Select()"></insert-Update>
+    <clone-Dialog ref="cloneDialogRef" @handleSelect="Select()"></clone-Dialog>
   </div>
 </template>
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import { defineComponent, onMounted, ref, watch } from 'vue'
+import { ref, onMounted, watch, getCurrentInstance, watchEffect } from 'vue'
+import { ElMessage } from 'element-plus'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/deviceManage/powerEquip/communicateEquip'
+/*----------------------------------组件引入-----------------------------------*/
 import insertUpdate from './dialog/insert_update.vue'
 import cloneDialog from './dialog/cloneDialog.vue'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+  Height: String,
+  activeName: String
+}) //数据双向绑定
+const emit = defineEmits(['handleSelect']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const filterText = ref('')
+const loading = ref(true)
+const tableData = ref([])
+const pageSize = ref(15)
+const currentPage = ref(1)
+const total = ref(0)
+
+const fileUrl = ref(window.PLATFROM_CONFIG.baseUrl)
+const fileList = ref([])
+const accessToken = ref(store.state.user.accessToken)
+
+const handleProgress = (file, fileList) => {
+  file
+  if (
+    !(
+      fileList.raw.type ===
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+      fileList.raw.type === 'application/vnd.ms-excel'
+    )
+  ) {
+    ElMessage({
+      message: '上传文件只能是 xls 和 xlsx 格式!',
+      type: 'error',
+    })
+    return false
+  } else {
+    return true
+  }
+}
 
-import * as api from '@/api/deviceManage/powerEquip/communicateEquip'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'powerEquip',
-  components: {
-    cloneDialog,
-    insertUpdate,
-  },
-  props: {
-    Height: String,
-    activeName: String
-  },
-  setup(props) {
-    const store = useStore()
-    store
-    const pageSize = ref(15)
-    const currentPage = ref(1)
-    const total = ref(0)
-    const filterText = ref('')
-    const tableData = ref([])
-    const dialogBool = ref(false)
-    const dialogTitle = ref('')
-    const dataList = ref({})
-    const loading = ref(true)
-
-    const cloneDialogBool = ref(false)
-    const DialogArray = ref([])
+const handleUpAvatar = (res, file) => {
+  fileList.value = []
+  ElMessage.success({
+    message: '导入成功',
+    type: 'success',
+  })
+  Select()
+}
 
-    const fileUrl = ref(window.PLATFROM_CONFIG.baseUrl)
-    const fileList = ref([])
-    const accessToken = ref(store.state.user.accessToken)
+const handleError = (res) => {
+  let myError = res.toString() //转字符串
+  myError = myError.replace('Error: ', '') //去掉前面的
+  myError = JSON.parse(myError) //转对象
+  ElMessage.error({
+    message: myError.msg,
+    type: 'error',
+  })
+}
 
-    const handleProgress = (file, fileList) => {
-      file
-      if (
-        !(
-          fileList.raw.type ===
-          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
-          fileList.raw.type === 'application/vnd.ms-excel'
-        )
-      ) {
-        ElMessage({
-          message: '上传文件只能是 xls 和 xlsx 格式!',
-          type: 'error',
+//导出
+const DataReportExport = () => {
+  api
+    .deviceExport({
+      deviceName: filterText.value,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data
+        ElMessage.success({
+          message: '导出成功',
+          type: 'success',
         })
-        return false
       } else {
-        return true
+        ElMessage.error(requset.msg)
       }
-    }
-
-    const handleUpAvatar = (res, file) => {
-      console.log(res, file)
-      fileList.value = []
-      ElMessage.success({
-        message: '导入成功',
-        type: 'success',
-      })
-      Select()
-    }
-    const handleError = (res) => {
-      let myError = res.toString() //转字符串
-      myError = myError.replace('Error: ', '') //去掉前面的
-      myError = JSON.parse(myError) //转对象
-      ElMessage.error({
-        message: myError.msg,
-        type: 'error',
-      })
-    }
-
-    //导出
-    const DataReportExport = () => {
-      api
-        .deviceExport({
-          deviceName: filterText.value,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data
-            ElMessage.success({
-              message: '导出成功',
-              type: 'success',
-            })
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-
-    //克隆
-    const clone = (row) => {
-      DialogArray.value = row
-      cloneDialogBool.value = true
-    }
-
-    //克隆弹窗关闭
-    const closeNo = (value) => {
-      cloneDialogBool.value = value
-    }
+    })
+}
 
-    //查询
-    function Select() {
-      loading.value = true
-      api
-        .correspondDeviceList({
-          size: pageSize.value,
-          current: currentPage.value,
-          deviceName: filterText.value,
-          siteId: store.state.siteId,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            total.value = requset.data.total
-            tableData.value = requset.data.records
-            loading.value = false
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
+//克隆
+function clone(row) {
+  proxy.$refs["cloneDialogRef"].openDialog({
+    dialogArray: row
+  })
+}
 
-    //新增
-    const Insert = () => {
-      dialogBool.value = true
-      dialogTitle.value = '新增'
-      dataList.value = {
-        deviceCode: '',
-        deviceName: '',
-        floor: 1,
-        siteId: '',
-        deviceAddress: '',
-        deviceType: 1,
-        sim: '',
+//查询
+function Select() {
+  loading.value = true
+  api
+    .correspondDeviceList({
+      size: pageSize.value,
+      current: currentPage.value,
+      deviceName: filterText.value,
+      siteId: store.state.siteId,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        total.value = requset.data.total
+        tableData.value = requset.data.records
+        loading.value = false
+      } else {
+        ElMessage.error(requset.msg)
       }
-    }
+    })
+}
 
-    //修改
-    const Update = (row) => {
-      dialogBool.value = true
-      dialogTitle.value = '修改'
-      console.log(row)
-      dataList.value = {
-        deviceCode: row.deviceCode,
-        deviceName: row.deviceName,
-        floor: row.floor,
-        siteId: row.siteId,
-        deviceAddress: row.deviceAddress,
-        deviceType: Number(row.deviceType),
-        sim: row.sim,
-        id: row.id,
-      }
+//新增
+function Insert() {
+  proxy.$refs["insertUpdateRef"].openDialog({
+    dialogTitle: "新增",
+    dataArray: {
+      deviceCode: '',
+      deviceName: '',
+      floor: 1,
+      siteId: '',
+      deviceAddress: '',
+      deviceType: 1,
+      sim: '',
     }
+  })
+}
 
-    //新增修改弹窗控制
-    const showValue = (value) => {
-      dialogBool.value = value
-      Select()
+//修改
+function Update(row) {
+  proxy.$refs["insertUpdateRef"].openDialog({
+    dialogTitle: "修改",
+    dataArray: {
+      deviceCode: row.deviceCode,
+      deviceName: row.deviceName,
+      floor: row.floor,
+      siteId: row.siteId,
+      deviceAddress: row.deviceAddress,
+      deviceType: Number(row.deviceType),
+      sim: row.sim,
+      id: row.id,
     }
+  })
+}
 
-    //是否删除  ---- 是
-    const confirmEvent = (row) => {
-      Delete(row)
-    }
-    //是否删除  ---- 否
-    const cancelEvent = () => {
-      console.log('cancel!')
-    }
-    //删除
-    const Delete = (row) => {
-      api.correspondDeviceDel({ id: row.id }).then((requset) => {
-        if (requset.status === 'SUCCESS') {
-          ElMessage.success({
-            message: '删除成功',
-            type: 'success',
-          })
-          Select()
-        } else {
-          ElMessage.error(requset.msg)
-        }
+//是否删除  ---- 是
+const confirmEvent = (row) => {
+  Delete(row)
+}
+//是否删除  ---- 否
+const cancelEvent = () => {
+  console.log('cancel!')
+}
+//删除
+const Delete = (row) => {
+  api.correspondDeviceDel({ id: row.id }).then((requset) => {
+    if (requset.status === 'SUCCESS') {
+      ElMessage.success({
+        message: '删除成功',
+        type: 'success',
       })
-    }
-    const handleSizeChange = (val) => {
-      pageSize.value = val
       Select()
+    } else {
+      ElMessage.error(requset.msg)
     }
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
+  })
+}
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  Select()
+}
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  Select()
+}
+
+watch(
+  () => props.activeName,
+  (newVal) => {
+    // alert(newVal)
+    if (newVal == 'communicateEquip') {
       Select()
     }
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA !important;color: black;'
-    }
-
-    watch(
-      () => props.activeName,
-      (newVal) => {
-        // alert(newVal)
-        if (newVal == 'communicateEquip') {
-          Select()
-        }
-      }
-    )
-
-
-    onMounted(() => {
-
-    })
-    return {
-      headClass,
-      handleCurrentChange,
-      handleSizeChange,
-
-      clone, //克隆按钮事件
-      closeNo, //克隆弹窗关闭事件
-      DataReportExport, //导出
-      Insert,
-      Update,
-      Delete,
-      Select,
-      confirmEvent,
-      cancelEvent,
-      showValue,
-
-      pageSize,
-      currentPage,
-      total,
-      filterText,
-      tableData,
-
-      DialogArray,
-      cloneDialogBool,
+  }
+)
 
-      dialogBool,
-      dialogTitle,
-      dataList,
-      loading,
+onMounted(() => {
 
-      fileList,
-      fileUrl,
-      accessToken,
-      handleProgress,
-      handleUpAvatar,
-      handleError,
-      store,
-    }
-  },
 })
 </script>
 

src/views/siteManage/addGroupCom.vue

@@ -1,126 +1,101 @@
 <template>
-  <el-dialog
-    :title="dialogTitle"
-    v-model="dialogVisible"
-    width="400px"
-    @close="closeDialog(0)"
-    @open="open"
-  >
-    <el-form
-      ref="formInfo"
-      :model="form"
-      class="demo-form-inline"
-      label-width="100px"
-      :rules="rules"
-    >
+  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="400px" @close="closeDialog">
+    <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="100px" :rules="rules">
       <el-form-item label="分组名称：" prop="groupingName">
         <el-input v-model="form.groupingName"></el-input>
       </el-form-item>
 
       <div style="text-align: right">
-        <el-button type="primary" @click="submitForm('formInfo')">
+        <el-button type="primary" @click="submitForm()">
           保存
         </el-button>
       </div>
     </el-form>
   </el-dialog>
 </template>
-<script>
-import { defineComponent, ref, watchEffect } from 'vue'
-import * as api from '@/api/siteManage/index'
-import { ElMessage } from 'element-plus'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-
-export default defineComponent({
-  name: 'AddGroupCom',
-  emits: ['closeDialog'],
-  props: {
-    flag: Boolean,
-    dialogTitle: String,
-    itemInfo: Object,
+import { useRoute } from 'vue-router'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, watchEffect } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/siteManage/index'
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits(['handleSelect']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const dialogTitle = ref(null)
+const dialogVisible = ref(false)
+const state = reactive({
+  form: {
+    groupingName: "",
   },
-  setup(props, context) {
-    const store = useStore()
-    context
-
-    const dialogVisible = ref(false)
-    const formInfo = ref(null)
+  rules: {
+    groupingName: [
+      // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+      { required: true, message: '请输入分组名称', trigger: 'blur' },
+      {
+        min: 3,
+        max: 6,
+        message: '用户名长度在 3 到 6 个字符',
+        trigger: 'blur',
+      },
+    ],
+  },
+})
+const { form, rules } = toRefs(state)
 
-    const form = ref([])
+// 弹窗打开
+function openDialog(event) {
+  dialogTitle.value = event.dialogTitle
 
-    // open(): Dialog弹窗打开之前做的事
-    const open = () => {
-      store.state.basicInfoConst = 1
-      form.value = props.itemInfo.value
-    }
+  store.state.basicInfoConst = 1
+  state.form = event.tableItem
 
-    // 关闭弹框
-    const closeDialog = () => {
-      context.emit('closeDialog', false)
-      dialogVisible.value = false
-    }
+  dialogVisible.value = true
+}
 
-    watchEffect((fn, options) => {
-      fn, options
-      dialogVisible.value = props.flag
-    })
+// 关闭弹框
+function closeDialog() {
+  proxy.$refs["formInfo"].resetFields(); //重置from校验
+  state.form = {};
+  dialogVisible.value = false
+}
 
-    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) {
-          api.siteGroupingAdd(form.value).then((requset) => {
-            if (requset.status === 'SUCCESS') {
-              ElMessage.success({
-                message: '新增成功',
-                type: 'success',
-              })
-              closeDialog()
-            } else {
-              ElMessage.error(requset.msg)
-            }
+// 保存-修改操作
+function submitForm() {
+  proxy.$refs["formInfo"].validate((valid) => {
+    if (valid) {
+      api.siteGroupingAdd(form.value).then((requset) => {
+        if (requset.status === 'SUCCESS') {
+          ElMessage.success({
+            message: '新增成功',
+            type: 'success',
           })
+          emit('handleSelect', false)
+          closeDialog()
         } else {
-          console.log('error submit!!')
-          return false
+          ElMessage.error(requset.msg)
         }
       })
+    } else {
+      console.log('error submit!!')
+      return false
     }
+  })
+}
 
-    return {
-      closeDialog,
-      dialogVisible,
-      roleValid,
-      formInfo,
-      form,
-      open,
-      submitForm,
-      rules: {
-        groupingName: [
-          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: true, message: '请输入分组名称', trigger: 'blur' },
-          {
-            min: 3,
-            max: 6,
-            message: '用户名长度在 3 到 6 个字符',
-            trigger: 'blur',
-          },
-        ],
-      },
-    }
-  },
-})
+// 暴露变量
+defineExpose({
+  openDialog,
+});
 </script>
  
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>

src/views/siteManage/addSiteCom.vue

@@ -1,18 +1,6 @@
 <template>
-  <el-dialog
-    :title="dialogTitle"
-    v-model="dialogVisible"
-    @close="closeDialog2('默认关闭')"
-    @open="open"
-    width="400px"
-  >
-    <el-form
-      ref="formInfo"
-      :model="form"
-      class="demo-form-inline"
-      label-width="100px"
-      :rules="rules"
-    >
+  <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="closeDialog" width="400px">
+    <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="100px" :rules="rules">
       <el-form-item label="站点名称：" prop="siteName">
         <el-input v-model="form.siteName"></el-input>
       </el-form-item>
@@ -21,12 +9,7 @@
         </el-form-item> -->
       <el-form-item label="选择模板：" prop="region">
         <el-select v-model="form.region" placeholder="请选择">
-          <el-option
-            v-for="(item, index) in listData"
-            :key="index"
-            :label="item.siteName"
-            :value="item.id"
-          ></el-option>
+          <el-option v-for="(item, index) in listData" :key="index" :label="item.siteName" :value="item.id"></el-option>
         </el-select>
       </el-form-item>
 
@@ -36,138 +19,94 @@
     </el-form>
   </el-dialog>
 </template>
-<script>
-import { defineComponent, ref, watchEffect, onMounted } from 'vue'
-
-import * as api from '@/api/siteManage/index'
-import { ElMessage } from 'element-plus'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-
-export default defineComponent({
-  name: 'AddSiteCom',
-  emits: ['closeDialog','changeFather'],
-  props: {
-    flag: Boolean,
-    dialogTitle: String,
-    itemInfo: Object,
-    treeLevel: Number,
-    groupingId: Number,
+import { useRoute } from 'vue-router'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, watchEffect } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/siteManage/index'
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+  groupingId: Number,
+}) //数据双向绑定
+const emit = defineEmits(['changeFather', 'handleSelect']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const dialogTitle = ref(null)
+const dialogVisible = ref(false)
+const state = reactive({
+  form: {},
+  rules: {
+    siteName: [
+      { required: true, message: '请输入站点名称', trigger: 'blur' },
+    ],
   },
-  setup(props, context) {
-    const store = useStore()
-    context
-
-    const dialogVisible = ref(false)
-    const formInfo = ref(null)
-    const form = ref([])
-
-    const listData = ref([])
-
-    // open(): Dialog弹窗打开之前做的事
-    const open = () => {
-
-      //  store.commit('publicSiteList')  
-      //  listData.value=store.state.siteList
-
-      api.list({}).then((requset) => {
-        if (requset.status === 'SUCCESS') {
-          listData.value = requset.data
-        } else {
-          ElMessage.error(requset.msg)
-        }
-      })
+  listData: []
+})
+const { form, rules, listData } = toRefs(state)
 
 
-      store.state.basicInfoConst = 1
-      form.value = props.itemInfo.value;
-    }
 
-    // 关闭弹框
-    const closeDialog2 = (res) => {
-      context.emit('closeDialog', res)
-      store.state.basicInfoConst++
-    }
+const formInfo = ref(null)
 
-    watchEffect((fn, options) => {
-      fn, options
-      dialogVisible.value = props.flag
-    })
+// 弹窗打开
+function openDialog(event) {
+  dialogTitle.value = event.dialogTitle
 
-    const roleValid = (rule, value, callback) => {
-      rule
-      if (value.length === 0) {
-        callback(new Error('角色不能为空'))
-      } else {
-        callback()
-      }
+  api.list({}).then((requset) => {
+    if (requset.status === 'SUCCESS') {
+      listData.value = requset.data
+    } else {
+      ElMessage.error(requset.msg)
     }
-
-    // 保存-修改操作
-    const submitForm = () => {
-      // store.state.basicInfoConst = 1
-      console.log('form.region')
-      console.log(form.value.region)
-      console.log('form.siteName')
-      console.log(form.value.siteName)
-      formInfo.value.validate((valid) => {
-        if (valid) {
-          store.state.basicInfoSiteName = form.value.siteName
-          context.emit(
-            'changeFather',
-            form.value.siteName,
-            form.value.region ? form.value.region : '',
-            props.groupingId
-          )
-          closeDialog2('')
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
+  })
+
+  store.state.basicInfoConst = 1
+  state.form = event.tableItem;
+
+  dialogVisible.value = true
+}
+
+// 关闭弹框
+function closeDialog() {
+  store.state.basicInfoConst++
+  state.form = {};
+  proxy.$refs["formInfo"].resetFields(); //重置from校验
+  dialogVisible.value = false
+}
+
+// 保存-修改操作
+function submitForm() {
+  proxy.$refs["formInfo"].validate((valid) => {
+    if (valid) {
+      store.state.basicInfoSiteName = state.form.siteName
+      emit(
+        'changeFather',
+        state.form.siteName,
+        state.form.region ? form.value.region : '',
+        props.groupingId
+      )
+      emit('handleSelect', false)
+      closeDialog()
+    } else {
+      console.log('error submit!!')
+      return false
     }
+  })
+}
 
-    //站点模板下拉列表
-    // function list() {
-    //   api.list({}).then((requset) => {
-    //     if (requset.status === 'SUCCESS') {
-    //       listData.value = requset.data
-    //     } else {
-    //       ElMessage.error(requset.msg)
-    //     }
-    //   })
-    // }
-
-    onMounted(() => {
-      
-      // list()
-    })
+onMounted(() => { })
 
-    return {
-      closeDialog2,
-      dialogVisible,
-      listData,
-
-      roleValid,
-      formInfo,
-      form,
-      open,
-      submitForm,
-      rules: {
-        siteName: [
-          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: true, message: '请输入站点名称', trigger: 'blur' },
-          // {
-          //   min: 3,
-          //   max: 6,
-          //   message: "用户名长度在 3 到 6 个字符",
-          //   trigger: "blur",
-          // },
-        ],
-      },
-    }
-  },
-})
+// 暴露变量
+defineExpose({
+  openDialog,
+});
 </script>
  
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>

src/views/siteManage/camera/index.vue

@@ -4,8 +4,7 @@
     <div class="filter-container mb-20">
       <div class="left">
         <span class="" style="margin-right: 30px"> 【{{ labelCom }}】站点的所有摄像头设备 </span>
-        <el-button icon="el-icon-plus" type="success" @click="addItem()"
-          :disabled="store.state.authorities.indexOf('新增') == -1">
+        <el-button icon="Plus" type="success" @click="addItem()" :disabled="store.state.authorities.indexOf('新增') == -1">
           新增
         </el-button>
         <a href="./static/伍继摄像头导入模板.xlsx" download class="downloadMb">
@@ -14,24 +13,24 @@
       </div>
 
 
-      <div class="right">
-        <el-upload class="upload-demo" :action="fileUrl + '/device/deviceImport'" :on-progress="handleProgress"
-          :on-success="handleUpAvatar" :on-error="handleError" multiple :limit="1" :headers="{
-            accessToken: [accessToken],
-          }" :file-list="fileList" style="margin-right: 10px; display: inline-block"
-          :disabled="store.state.authorities.indexOf('导入') == -1">
-          <el-button size="small" type="primary" :disabled="store.state.authorities.indexOf('导入') == -1"> 导入 </el-button>
-        </el-upload>
-        <el-button type="primary" @click="DataReportExport()" :disabled="store.state.authorities.indexOf('导出') == -1"> 导出
-        </el-button>
-      </div>
+
+      <el-upload class="upload-demo" :action="fileUrl + '/device/deviceImport'" :on-progress="handleProgress"
+        :on-success="handleUpAvatar" :on-error="handleError" multiple :limit="1" :headers="{
+          accessToken: [accessToken],
+        }" :file-list="fileList" style="margin:0 10px 0 auto; display: inline-block"
+        :disabled="store.state.authorities.indexOf('导入') == -1">
+        <el-button type="primary" :disabled="store.state.authorities.indexOf('导入') == -1"> 导入 </el-button>
+      </el-upload>
+      <el-button type="primary" @click="DataReportExport()" :disabled="store.state.authorities.indexOf('导出') == -1"> 导出
+      </el-button>
+
     </div>
     <!-- 筛选end -->
 
     <!-- 表格start -->
 
-    <el-table :data="deviceData" border stripe :header-cell-style="{ background: '#FAFAFA' }" v-loading="loadingStatus"
-      element-loading-text="摄像头打开中...." element-loading-background="rgba(255, 255, 255, 0.6)">
+    <el-table :data="deviceData" :header-cell-style="{ background: '#FAFAFA' }" v-loading="loadingStatus"
+      element-loading-text="摄像头打开中...." element-loading-background="rgba(255, 255, 255, 0.6)"> border stripe
       <el-table-column prop="status" align="center" label="状态" width="50">
         <template #default="scope">
           <el-avatar class="status" :style="scope.row.ALIVEVALUE == 3
@@ -351,20 +350,10 @@ function searchData() {
   videoMonitoringDeviceList()
 }
 
-//监听变化
-watch(
-  () => props.siteId,
-  (newVal) => {
-    labelCom.value = store.state.siteManageLabelCom
-    if (props.activeName == 'five') {
-      searchData()
-    }
-  }
-)
 watch(
   () => props.activeName,
   (newVal) => {
-    if (newVal == 'five') {
+    if (newVal == 'five' && props.siteId) {
       searchData()
     }
   }

src/views/siteManage/groupInfoCom.vue

@@ -5,12 +5,12 @@
         <div class="el-form-item blockTitle">分组信息</div>
         <div></div>
         <el-form-item label="分组名称" prop="groupingName" label-width="130px">
-          <el-input v-model="form.groupingName" v-if="label=='所有站点'" disabled></el-input>
+          <el-input v-model="form.groupingName" v-if="label == '所有站点'" disabled></el-input>
           <el-input v-model="form.groupingName" v-else></el-input>
         </el-form-item>
 
         <el-form-item>
-          <el-button type="primary" @click="submitForm('formInfo')" v-if="label!='所有站点'">
+          <el-button type="primary" @click="submitForm('formInfo')" v-if="label != '所有站点'">
             保存
           </el-button>
         </el-form-item>
@@ -19,89 +19,74 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted, watch } from 'vue'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, watchEffect } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/siteManage/index'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'GroupInfoCom',
-  props: {
-    groupingId: Number,
-    label: String,
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+  groupingId: Number,
+  groupingName: String,
+}) //数据双向绑定
+const emit = defineEmits(['handleSelect']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const formInfo = ref(null)
+const state = reactive({
+  form: {},
+  rules: {
+    groupingName: [
+      { required: true, message: '请输入分组名称', trigger: 'blur' },
+    ],
   },
-  setup(props, context) {
-    context
-
-    const formInfo = ref(null)
-
-    const form = ref([])
-
-    const roleValid = (rule, value, callback) => {
-      rule
-      if (value.length === 0) {
-        callback(new Error('角色不能为空'))
-      } else {
-        callback()
-      }
-    }
+})
+const { form, rules } = toRefs(state)
 
-    // 保存-修改操作
-    const submitForm = () => {
-      formInfo.value.validate((valid) => {
-        if (valid) {
-          form.value.groupingId = props.groupingId
-          console.log(form.value)
+// 保存-修改操作
+function submitForm() {
+  proxy.$refs['formInfo'].validate((valid) => {
+    if (valid) {
+      state.form.groupingId = props.groupingId
 
-          api
-            .siteGroupingUpdate({
-              id: props.groupingId,
-              groupingName: form.value.groupingName,
+      api
+        .siteGroupingUpdate({
+          id: props.groupingId,
+          groupingName: state.form.groupingName,
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '修改成功',
+              type: 'success',
             })
-            .then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '修改成功',
-                  type: 'success',
-                })
 
-                context.emit('func')
-              } else {
-                ElMessage.error(requset.msg)
-              }
-            })
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
+            emit('handleSelect')
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    } else {
+      console.log('error submit!!')
+      return false
     }
+  })
+}
 
 
-    //监听变化
-    watch(
-      () => props.label,
-      (newVal) => {
-         form.value.groupingName = newVal
-      }
-    )
-    onMounted(() => {
-      // console.log(props.label)
-      form.value.groupingName = props.label
-    })
-    return {
-      roleValid,
-      formInfo,
-      form,
-      submitForm,
-      rules: {
-        groupingName: [
-          { required: true, message: '请输入分组名称', trigger: 'blur' },
-        ],
-      },
-    }
-  },
+//监听变化
+watch(
+  () => props.groupingName,
+  (newVal) => {
+    form.value.groupingName = newVal
+  }
+)
+onMounted(() => {
+  form.value.groupingName = props.groupingName
 })
 </script>
-<style scoped lang="scss">
-</style>
+<style scoped lang="scss"></style>

src/views/siteManage/index.vue

@@ -3,134 +3,50 @@
     <!-- 树形组件start -->
     <div class="grid-content treeDom">
       <div style="text-align: center" class="mb-20">
-        <el-button
-          v-if="treeLevel == 3 || groupingId == 0 || treeLevel == 1"
-          disabled
-        >
+        <el-button :type="treeLevel == 3 || groupingId == 0 || treeLevel == 1 ? '' : 'primary'" @click="addGroup()"
+          :disabled="treeLevel == 3 || groupingId == 0 || treeLevel == 1 || store.state.authorities.indexOf('新增') == -1">
           添加分组
         </el-button>
-        <el-button
-          v-else
-          type="primary"
-          @click="addGroup()"
-          :disabled="store.state.authorities.indexOf('新增') == -1"
-        >
-          添加分组
-        </el-button>
-        <el-button
-          v-if="treeLevel == 3 || groupingId == 0 || treeLevel == 1"
-          disabled
-        >
-          添加站点
-        </el-button>
-        <el-button
-          v-else
-          type="primary"
-          @click="addSite()"
-          :disabled="store.state.authorities.indexOf('新增') == -1"
-        >
+        <el-button :type="treeLevel == 3 || groupingId == 0 || treeLevel == 1 ? '' : 'primary'" @click="addSite()"
+          :disabled="treeLevel == 3 || groupingId == 0 || treeLevel == 1 || store.state.authorities.indexOf('新增') == -1">
           添加站点
         </el-button>
       </div>
-      <el-input
-        placeholder="输入关键字进行过滤"
-        v-model="filterText"
-        class="mb-20 searchInput"
-      >
-        <template>
-          <i class="el-icon-search el-input__icon"></i>
-        </template>
-      </el-input>
-      <!-- <el-scrollbar> -->
-
-      <!-- <el-tree
-        :data="data2"
-        show-checkbox
-        node-key="id"
-        :default-expanded-keys="[1]"
-        :default-checked-keys="[368]"
-        :props="defaultProps2"
-      /> -->
-      <el-tree
-        class="filter-tree siteTree"
-        ref="tree"
-        :data="data"
-        node-key="id"
-        :props="defaultProps"
-        :filter-node-method="filterNode"
-        @node-click="handleNodeClick"
-        :expand-on-click-node="false"
-        :highlight-current="showTree"
-        default-expand-all
-        :current-node-key="defaultExpand"
-      >
+      <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="mb-20 searchInput"></el-input>
+
+      <el-tree class="filter-tree siteTree" ref="tree" :data="treeData" node-key="id"
+        :props="{ children: 'children', label: 'label', }" :filter-node-method="filterNode" @node-click="handleNodeClick"
+        :expand-on-click-node="false" :highlight-current="true" default-expand-all :current-node-key="0">
         <template #default="{ node, data }">
-          <span
-            class="custom-tree-node"
-            style="width: 100%"
-            @mouseenter="mouseenter(data)"
-            @mouseleave="mouseleave(data)"
-          >
+          <span class="custom-tree-node" style="width: 100%" @mouseenter="(event) => event.show = true"
+            @mouseleave="(event) => event.show = false">
             <span>{{ node.label }}</span>
-            <!-- <el-tooltip
-                class="item"
-                effect="dark"
-                :content="node.label"
-                placement="top-start"
-              >
-                <span>{{ node.label }}</span>
-              </el-tooltip> -->
+            <!-- <el-tooltip class="item" effect="dark" :content="node.label" placement="top-start">
+              <span>{{ node.label }}</span>
+            </el-tooltip> -->
             <span>
-              <a
-                class="deleteLink"
-                v-show="data.show"
-                @click="remove(node, data)"
-              >
+              <a class="deleteLink" v-show="data.show" @click="remove(node, data)">
                 <!-- <i size="mini" class="el-icon-delete"></i> -->
               </a>
             </span>
           </span>
         </template>
       </el-tree>
-
-      <!-- </el-scrollbar> -->
     </div>
     <!-- 树形组件end -->
 
     <!-- 站点主题start -->
-    <div
-      class="grid-content nestingDom"
-      style="width: calc(100% - 300px)"
-      v-if="flag2 && treeLevel != 1"
-    >
-      <el-tabs
-        v-if="treeLevel == 3 || groupingId == 0"
-        v-model="activeName"
-        type="card"
-      >
+    <div class="grid-content nestingDom" style="width: calc(100% - 300px)" v-if="flag2 && treeLevel != 1">
+      <el-tabs v-if="treeLevel == 3 || groupingId == 0" v-model="activeName" type="card">
         <el-tab-pane label="基本信息" name="first">
-          <basic-info
-            class="basicInfo"
-            :siteId="siteId"
-            :groupingId="groupingId"
-            :siteName="siteName"
-            @func="getMsgFormSon3"
-            :activeName="activeName"
-          ></basic-info>
+          <basic-info class="basicInfo" :siteId="siteId" :groupingId="groupingId" :siteName="siteName"
+            @func="getMsgFormSon3" :activeName="activeName"></basic-info>
         </el-tab-pane>
         <el-tab-pane label="监控设备" name="second">
-          <watch-dog
-            v-on:success="success(res)"
-            :activeName="activeName"
-            @func="getMsgFormSon"
-            :siteId="siteId"
-          ></watch-dog>
+          <watch-dog ref="watchDogRef" :siteId="siteId" :activeName="activeName" @func="activeName = 'third'"></watch-dog>
         </el-tab-pane>
         <el-tab-pane label="变量列表" name="third">
-          <variable-list
-            :activeName="activeName"
-            :siteId="siteId"
-          ></variable-list>
+          <variable-list :activeName="activeName" :siteId="siteId"></variable-list>
         </el-tab-pane>
         <el-tab-pane label="摄像头" name="five">
           <camera :siteId="siteId" :activeName="activeName"></camera>
@@ -140,213 +56,132 @@
         </el-tab-pane>
       </el-tabs>
 
-      <!-- 分组信息start -->
-      <group-info-com
-        :groupingId="groupingId"
-        :label="label"
-        @func="getMsgFormSon2"
-        v-else
-      ></group-info-com>
-      <!-- 分组信息end -->
-
-      <!-- 新建分组start -->
-      <add-group-com
-        :dialogTitle="dialogTitle"
-        :itemInfo="tableItem"
-        @closeDialog="closeDialog('默认关闭')"
-        :flag="showDialog"
-      ></add-group-com>
-      <!-- 新建分组end -->
-
-      <!-- 新建站点start -->
-      <add-site-com
-        :dialogTitle="dialogTitle"
-        :itemInfo="tableItem"
-        :groupingId="groupingId"
-        @closeDialog="closeDialog"
-        :flag="showDialog2"
-        @changeFather="getFromSon"
-      ></add-site-com>
-      <!-- 新建站点end -->
+      <!-- 分组信息 -->
+      <group-info-com ref="groupInfoComRef" :groupingId="groupingId" :groupingName="groupingName"
+        @handleSelect="siteTreeList(), treeLevel = 1" v-else></group-info-com>
+      <!-- 新建分组 -->
+      <add-group-com ref="addGroupComRef" @handleSelect="siteTreeList"></add-group-com>
+      <!-- 新建站点 -->
+      <add-site-com ref="addSiteComRef" :groupingId="groupingId" @changeFather="getFromSon"
+        @handleSelect="siteTreeList"></add-site-com>
     </div>
     <!-- 站点主题end -->
   </div>
 </template>
 
 <script setup>
-  import { ref, watch, onMounted, nextTick } from 'vue'
-
-  import basicInfo from './basicInfo'
-  import WatchDog from './watchDog'
-  import variableList from './variableList'
-  import camera from './camera'
-  // import PowerScore from './powerScore'
-
-  import groupInfoCom from './groupInfoCom'
-  import addGroupCom from './addGroupCom'
-  import addSiteCom from './addSiteCom'
-
-  import * as api from '@/api/siteManage/index'
-  import { ElMessage } from 'element-plus'
-  import { useStore } from 'vuex'
-  import { useRoute } from 'vue-router'
-
-  const store = useStore()
-  const route = useRoute()
-  const flag2 = ref(false)
-  const tree = ref(null)
-  const showTree = ref(true)
-  const defaultExpand = ref(0)
-  const showDialog = ref(false)
-  const showDialog2 = ref(false)
-  const dialogTitle = ref('')
-  const treeLevel = ref(3)
-  const groupingId = ref(1)
-  const siteId = ref(0)
-  const labelCom = ref('')
-  const siteName = ref('')
-  const label = ref('')
-  const activeName = ref('first')
-  const filterText = ref('')
-  const selectNode = ref(0)
-
-  const data = ref([
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { useRoute } from 'vue-router'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, nextTick } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/siteManage/index'
+/*----------------------------------组件引入-----------------------------------*/
+import PowerScore from './powerScore'
+import basicInfo from './basicInfo'
+import WatchDog from './watchDog'
+import variableList from './variableList'
+import camera from './camera'
+
+import groupInfoCom from './groupInfoCom'
+import addGroupCom from './addGroupCom'
+import addSiteCom from './addSiteCom'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const route = useRoute()
+const props = defineProps({
+  dataType: String
+}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const tree = ref(null)
+const activeName = ref('first')
+const state = reactive({
+  treeData: [
     {
       label: '所有站点',
       children: [],
     },
-  ])
+  ],
+  flag2: false,
+  treeLevel: 3,
+  groupingId: 1,
+  siteId: 0,
+  siteName: "",
+  groupingName: "",
+  filterText: "",
+})
+const { treeData, flag2, treeLevel, groupingId, siteId, siteName, groupingName, filterText } = toRefs(state)
 
-  const defaultProps = ref({
-    children: 'children',
-    label: 'label',
-  })
 
-  const getMsgFormSon = () => {
-    activeName.value = 'third'
-  }
-  const getMsgFormSon2 = () => {
-    siteTreeList()
+//站点基本信息保存后触发
+const getMsgFormSon3 = (data) => {
+  siteTreeList()
+  setTimeout(() => {
+    tree.value.setCurrentKey(siteId.value)
+  }, 1000)
+
+  if (data == 0) {
     setTimeout(() => {
       treeLevel.value = 1
     }, 1000)
   }
-  //站点基本信息保存后触发
-  const getMsgFormSon3 = (data) => {
-    siteTreeList()
-    setTimeout(() => {
-      tree.value.setCurrentKey(selectNode.value)
-    }, 1000)
-
-    if (data == 0) {
-      setTimeout(() => {
-        treeLevel.value = 1
-      }, 1000)
-    }
-  }
-  function mouseenter(data) {
-    data.show = true
-  }
-  function mouseleave(data) {
-    data.show = false
-  }
+}
+function handleNodeClick(data, obj, node) {
+  activeName.value = 'first'
+  flag2.value = true
 
-  const handleNodeClick = (data, obj, node) => {
-    activeName.value = 'first'
-    data, node
-    flag2.value = true
-
-    treeLevel.value = obj.level
-    groupingId.value = obj.data.grouping_id
-    label.value = obj.data.label
-    // console.log('obj.data')
-    // console.log(obj.data.id)
-    selectNode.value = obj.data.id
-    labelCom.value = obj.data.label
-    store.state.siteManageLabelCom = obj.data.label
-    store.state.basicInfoSiteName = ''
-
-    if (treeLevel.value == 3) {
-      siteId.value = obj.data.id
-    }
-    if (treeLevel.value == 2 && groupingId.value == 0) {
-      // console.log(obj.data)
-      siteId.value = obj.data.id
-    }
-  }
+  treeLevel.value = obj.level
+  groupingId.value = obj.data.grouping_id
+  groupingName.value = obj.data.label
 
-  function filterNode(value, data) {
-    if (!value) return true
-    return data.label.indexOf(value) !== -1
-  }
+  store.state.siteManageLabelCom = obj.data.label
+  store.state.basicInfoSiteName = ''
 
-  // 异步任务 用于给tree传值
-  const writeValue = (val) => {
-    return tree.value.filter(val)
+  if (treeLevel.value == 3) {
+    siteId.value = obj.data.id
   }
-  // 定义 watch 监听
-  watch(
-    filterText,
-    (newCount, old, clear) => {
-      // 执行异步任务，并得到关闭异步任务的 id
-      let id = writeValue(newCount, old)
-      // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
-      clear(() => clearTimeout(id))
-    },
-    // watch 刚被创建的时候不执行
-    { lazy: true }
-  )
-  watch(
-    activeName,
-    (newCount, old, clear) => {
-      newCount, old, clear
-      // 清除定时器
-      clear(() => clearTimeout(store.state.siteCameraTimer))
-    },
-    // watch 刚被创建的时候不执行
-    { lazy: true }
-  )
-
-  // 新建分或站点的关闭操作
-  const closeDialog = (res) => {
-    if (store.state.basicInfoConst == 1 && res == '默认关闭') {
-      // alert('1 并  默认关闭')
-      showDialog.value = false
-      showDialog2.value = false //弹框关闭
-      siteTreeList()
-      flag2.value = false //基本信息不显示
-      treeLevel.value = 3 //新建站点  新建分组 按钮不可点击
-    } else if (store.state.basicInfoConst == 1) {
-      //  alert('1')
-      showDialog.value = false
-      showDialog2.value = false
-    }
+  if (treeLevel.value == 2 && groupingId.value == 0) {
+    siteId.value = obj.data.id
   }
 
-  //站点保存后关闭
-  const getFromSon = (param, param2, param3) => {
-    // alert('站点保存后关闭')
-    siteId.value = param2
-    siteName.value = param
-    groupingId.value = param3
+  console.log(siteId.value)
+}
 
-    flag2.value = true //基本信息显示
-    treeLevel.value = 3 //新建站点  新建分组 按钮不可点击
-  }
+function filterNode(value, data) {
+  if (!value) return true
+  return data.label.indexOf(value) !== -1
+}
+
+//站点保存后关闭
+function getFromSon(param, param2, param3) {
+  // alert('站点保存后关闭')
+  siteId.value = param2
+  siteName.value = param
+  groupingId.value = param3
+
+  treeLevel.value = 3 //新建站点  新建分组 按钮不可点击
+}
 
-  //新建分组
-  const tableItem = ref([])
-  const addGroup = () => {
-    tableItem.value = {
+//新建分组
+function addGroup() {
+  proxy.$refs['addGroupComRef'].openDialog({
+    dialogTitle: "新建分组",
+    tableItem: {
       groupingName: '',
     }
-    dialogTitle.value = '新建分组'
-    showDialog.value = true
-  }
+  })
+}
 
-  //新建站点
-  const addSite = () => {
-    tableItem.value = {
+//新建站点
+function addSite() {
+  proxy.$refs['addSiteComRef'].openDialog({
+    dialogTitle: "新建站点",
+    tableItem: {
       id: '',
       stationName: '',
       xh: '',
@@ -356,116 +191,143 @@
       guaZai: '',
       checked: true,
     }
-    dialogTitle.value = '新建站点'
-    showDialog2.value = true
-  }
-  const remove = (node, data) => {
-    const parent = node.parent
-    const children = parent.data.children || parent.data
-    const index = children.findIndex((d) => d.id === data.id)
-    children.splice(index, 1)
-    this.dataSource = [...this.dataSource]
-  }
+  })
+}
 
-  //左侧树结构列表
-  function siteTreeList() {
-    api.siteTreeList({}).then((requset) => {
-      if (requset.status === 'SUCCESS') {
-        var jsona = JSON.stringify(requset.data)
-        var jsonb = jsona.replace(/"grouping_name"/g, '"label"')
-        jsonb = jsonb.replace(/"site_list"/g, '"children"')
-        jsonb = jsonb.replace(/"site_name"/g, '"label"')
-        jsonb = jsonb.replace(/"site_id"/g, '"id"')
-        var jsonc = JSON.parse(jsonb)
-        data.value[0].children = jsonc
-
-        if (route.query.activeName && route.query.siteId) {
-          setTimeout(() => {
-            tree.value.setCurrentKey(route.query.siteId)
-          }, 1000)
-          flag2.value = true
-          treeLevel.value = 3
-          activeName.value = route.query.activeName
-          siteId.value = route.query.siteId
-          var bb = []
-          jsonc.forEach(function (item) {
-            if (item.id == siteId.value) {
-              bb.push(item)
-            }
-          })
-          store.state.siteManageLabelCom = bb[0].label
-        }
-      } else {
-        ElMessage.error(requset.msg)
-      }
-    })
-  }
+function remove(node, data) {
+  const parent = node.parent
+  const children = parent.data.children || parent.data
+  const index = children.findIndex((d) => d.id === data.id)
+  children.splice(index, 1)
+}
+
+//左侧树结构列表
+function siteTreeList() {
+  api.siteTreeList({}).then((requset) => {
+    if (requset.status === 'SUCCESS') {
+      var jsona = JSON.stringify(requset.data)
+      var jsonb = jsona.replace(/"grouping_name"/g, '"label"')
+      jsonb = jsonb.replace(/"site_list"/g, '"children"')
+      jsonb = jsonb.replace(/"site_name"/g, '"label"')
+      jsonb = jsonb.replace(/"site_id"/g, '"id"')
+      var jsonc = JSON.parse(jsonb)
+      treeData.value[0].children = jsonc
 
-  onMounted(() => {
-    siteTreeList()
+      if (route.query.activeName && route.query.siteId) {
+        setTimeout(() => {
+          tree.value.setCurrentKey(route.query.siteId)
+        }, 1000)
+        flag2.value = true
+        treeLevel.value = 3
+        activeName.value = route.query.activeName
+        siteId.value = route.query.siteId
+        var bb = []
+        jsonc.forEach(function (item) {
+          if (item.id == siteId.value) {
+            bb.push(item)
+          }
+        })
+        store.state.siteManageLabelCom = bb[0].label
+      }
+    } else {
+      ElMessage.error(requset.msg)
+    }
   })
+}
+
+// 定义 watch 监听
+watch(
+  filterText,
+  (newCount, old, clear) => {
+    // 执行异步任务，并得到关闭异步任务的 id
+    let id = tree.value.filter(newCount)
+    // 如果 watch 监听被重复执行了，则会先清除上次未完成的异步任务
+    clear(() => clearTimeout(id))
+  },
+  // watch 刚被创建的时候不执行
+  { lazy: true }
+)
+watch(
+  activeName,
+  (newCount, old, clear) => {
+    newCount, old, clear
+    // 清除定时器
+    clear(() => clearTimeout(store.state.siteCameraTimer))
+  },
+  // watch 刚被创建的时候不执行
+  { lazy: true }
+)
+
+onMounted(() => {
+  siteTreeList()
+})
 
-  nextTick(() => {})
+nextTick(() => { })
 </script>
 
 <style scoped lang="scss">
-  .custom-tree-node {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    display: block;
-  }
-  .app-container.page-nesting {
-    padding: 0;
-    background: rgba(0, 0, 0, 0);
-  }
-  .grid-content {
-    background: #fff;
-    height: calc(100vh - 130px);
-    overflow-y: auto;
-  }
-  .el-input__inner {
-    border-radius: 20px !important;
-  }
-  .treeDom {
-    width: 290px;
-    position: absolute;
-    left: 0;
-    // margin-left: 20px;
-    padding: 20px;
-    min-height: calc(100vh - 130px);
-
-    .el-icon-search {
-      color: #409eff;
-    }
-    .el-button {
-      width: 100px;
-    }
+.custom-tree-node {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  display: block;
+}
+
+.grid-content {
+  background: #fff;
+  height: calc(100vh - 130px);
+  overflow-y: auto;
+}
+
+.el-input__inner {
+  border-radius: 20px !important;
+}
+
+.treeDom {
+  width: 290px;
+  position: absolute;
+  left: 0;
+  // margin-left: 20px;
+  padding: 20px;
+  min-height: calc(100vh - 130px);
+
+  .el-icon-search {
+    color: #409eff;
   }
-  .nestingDom {
-    margin-left: 300px;
+
+  .el-button {
+    width: 100px;
   }
+}
+
+.nestingDom {
+  margin-left: 300px;
+}
 </style>
 <style lang="scss">
-  // tab重置样式
-  .el-tabs--card > .el-tabs__header .el-tabs__item {
-    line-height: 50px;
-    height: 50px;
-    font-size: 16px;
-  }
-  .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
-    border-bottom: 2px solid #409eff;
-    color: #409eff;
-  }
-  .el-tabs--card .el-tabs__header:hover,
-  .el-tabs__item:hover {
-    color: #409eff !important;
-  }
-  .el-tabs__header {
-    margin-bottom: 0;
-  }
-  .el-tabs--card > .el-tabs__header .el-tabs__item,
-  .el-tabs--card > .el-tabs__header .el-tabs__nav {
-    border: none;
-  }
+// tab重置样式
+.el-tabs--card>.el-tabs__header .el-tabs__item {
+  line-height: 50px;
+  height: 50px;
+  font-size: 16px;
+}
+
+.el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
+  border-bottom: 2px solid #409eff;
+  color: #409eff;
+}
+
+.el-tabs--card .el-tabs__header:hover,
+.el-tabs__item:hover {
+  color: #409eff !important;
+}
+
+.el-tabs__header {
+  margin-bottom: 0;
+}
+
+.el-tabs--card>.el-tabs__header .el-tabs__item,
+.el-tabs--card>.el-tabs__header .el-tabs__nav {
+  border: none;
+}
 </style>

src/views/siteManage/powerScore/index.vue

@@ -1,46 +1,24 @@
 <template>
   <div class="siteManage-main powerScore">
-    <el-form
-      :model="ruleForm"
-      :rules="rules"
-      ref="formInfo"
-      label-width="137px"
-      class="demo-ruleForm"
-    >
+    <el-form :model="ruleForm" :rules="rules" ref="formInfo" label-width="137px" class="demo-ruleForm">
       <div class="grid-content bg-purple">
         <div class="el-form-item blockTitle">电能质量各要素权重</div>
         <div></div>
-        <el-form-item
-          label="功率因数(100%)"
-          prop="powerFactorOne"
-          label-width="130px"
-        >
+        <el-form-item label="功率因数(100%)" prop="powerFactorOne" label-width="130px">
           <el-input v-model="ruleForm.powerFactorOne"></el-input>
         </el-form-item>
 
-        <el-form-item
-          label="电压合格率(%)"
-          prop="voltageQualified"
-          label-width="130px"
-        >
+        <el-form-item label="电压合格率(%)" prop="voltageQualified" label-width="130px">
           <el-input v-model="ruleForm.voltageQualified"></el-input>
         </el-form-item>
         <el-form-item label="负载率(%)" prop="loadRate" label-width="130px">
           <el-input v-model="ruleForm.loadRate"></el-input>
         </el-form-item>
-        <el-form-item
-          label="电流平衡度(%)："
-          prop="currentBalance"
-          label-width="130px"
-        >
+        <el-form-item label="电流平衡度(%)：" prop="currentBalance" label-width="130px">
           <el-input v-model="ruleForm.currentBalance"></el-input>
         </el-form-item>
 
-        <el-form-item
-          label="电压平衡度(%)："
-          prop="voltageBalance"
-          label-width="130px"
-        >
+        <el-form-item label="电压平衡度(%)：" prop="voltageBalance" label-width="130px">
           <el-input v-model="ruleForm.voltageBalance"></el-input>
         </el-form-item>
         <el-form-item label="谐波畸变率(%)" prop="thdu" label-width="130px">
@@ -49,19 +27,11 @@
 
         <div class="el-form-item blockTitle">功率因素</div>
 
-        <el-form-item
-          label="功率因数"
-          prop="powerFactorTwo"
-          label-width="130px"
-        >
+        <el-form-item label="功率因数" prop="powerFactorTwo" label-width="130px">
           <el-input v-model="ruleForm.powerFactorTwo"></el-input>
         </el-form-item>
         <el-form-item>
-          <el-button
-            type="primary"
-            @click="submitForm('ruleForm')"
-            :disabled="isDisable"
-          >
+          <el-button type="primary" @click="submitForm('ruleForm')" :disabled="isDisable">
             保存
           </el-button>
         </el-form-item>
@@ -70,171 +40,155 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, ref, onMounted, watch } from 'vue'
-import * as api from '@/api/siteManage/powerScore'
-import { ElMessage } from 'element-plus'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, nextTick } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/siteManage/powerScore'
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+  siteId: Number,
+  activeName: String,
+}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const formInfo = ref(null)
+const state = reactive({
+  ruleForm: {},
+  rules: {
+    powerFactorOne: [
+      { required: true, message: '请输入功率因数', trigger: 'blur' },
+      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
+    ],
+    voltageQualified: [
+      { required: true, message: '请输入电压合格率', trigger: 'blur' },
+      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
+    ],
+    loadRate: [
+      { required: true, message: '请输入负载率', trigger: 'blur' },
+      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
+    ],
+
+    currentBalance: [
+      { required: true, message: '请输入电流平衡度', trigger: 'blur' },
+      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
+    ],
+    voltageBalance: [
+      { required: true, message: '请输入电压平衡度', trigger: 'blur' },
+      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
+    ],
+    thdu: [
+      { required: true, message: '请输入谐波畸变率', trigger: 'blur' },
+      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
+    ],
+    powerFactorTwo: [
+      { required: true, message: '请输入功率因数', trigger: 'blur' },
+      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
+    ],
+  },
+  isDisable: false,
+  formStatus: ""
+})
+const { ruleForm, rules, isDisable, formStatus } = toRefs(state)
 
 
-export default defineComponent({
-  name: 'PowerScore',
-  props: {
-    siteId: Number,
-    activeName: String,
-  },
-  setup(props) {
-    const store = useStore()
-    store
-    const formInfo = ref(null)
-    const formStatus = ref('')
-    const ruleForm = ref({})
-    const isDisable = ref(false)
-
-    //评分配置详情查询
-    function powerQualityList() {
-      api
-        .powerQualityList({
-          siteId: props.siteId,
-        })
-        .then((requset) => {
+
+
+
+//评分配置详情查询
+function powerQualityList() {
+  api
+    .powerQualityList({
+      siteId: props.siteId,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        if (requset.data[0]) {
+          formStatus.value = 'update'
+          ruleForm.value = requset.data[0]
+        } else {
+          formStatus.value = 'add'
+          ruleForm.value = {}
+        }
+      } else {
+        ElMessage.error(requset.msg)
+      }
+    })
+}
+
+function resetForm() {
+  formInfo.value.clearValidate()
+}
+
+//表单提交
+function submitForm() {
+  ruleForm.value.siteId = props.siteId
+  formInfo.value.validate((valid) => {
+    if (valid) {
+
+      isDisable.value = true
+
+      if (formStatus.value == 'add') {
+        //新增
+        api.powerQualityAdd(ruleForm.value).then((requset) => {
           if (requset.status === 'SUCCESS') {
-            if (requset.data[0]) {
-              formStatus.value = 'update'
-              ruleForm.value = requset.data[0]
-            } else {
-              formStatus.value = 'add'
-              ruleForm.value = {}
-            }
+            ElMessage.success({
+              message: '新增成功',
+              type: 'success',
+            })
+            setTimeout(() => {
+              isDisable.value = false
+            }, 5000)
           } else {
             ElMessage.error(requset.msg)
           }
         })
-    }
-
-    function resetForm() {
-      formInfo.value.clearValidate()
-    }
-
-    //表单提交
-    function submitForm() {
-      ruleForm.value.siteId = props.siteId
-      formInfo.value.validate((valid) => {
-        if (valid) {
-          
-          isDisable.value = true
-
-          if (formStatus.value == 'add') {
-            //新增
-            api.powerQualityAdd(ruleForm.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '新增成功',
-                  type: 'success',
-                })
-                setTimeout(() => {
-                  isDisable.value = false
-                }, 5000)
-              } else {
-                ElMessage.error(requset.msg)
-              }
+      } else {
+        //修改
+        api.powerQualityUpdate(ruleForm.value).then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '修改成功',
+              type: 'success',
             })
+            setTimeout(() => {
+              isDisable.value = false
+            }, 5000)
           } else {
-            //修改
-            api.powerQualityUpdate(ruleForm.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '修改成功',
-                  type: 'success',
-                })
-                setTimeout(() => {
-                  isDisable.value = false
-                }, 5000)
-              } else {
-                ElMessage.error(requset.msg)
-              }
-            })
+            ElMessage.error(requset.msg)
           }
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    }
-
-    //监听变化
-    watch(
-      () => props.siteId,
-      (newVal) => {
-        newVal
-        ruleForm.value.siteId = newVal
-        if (props.activeName == 'six') {
-          resetForm()
-          powerQualityList()
-        }
-      }
-    )
-    watch(
-      () => props.activeName,
-      (newVal) => {
-        if (newVal == 'six') {
-          resetForm()
-          powerQualityList()
-        }
+        })
       }
-    )
-
-    onMounted(() => {
+    } else {
+      console.log('error submit!!')
+      return false
+    }
+  })
+}
 
-       if (store.state.goUrl==6) {
-         resetForm()
-          powerQualityList()
-      }
-      // powerQualityList()
-      // console.log('props.siteId')
-      // console.log(props.siteId)
-    })
 
-    return {
-      store,
-      formInfo,
-      ruleForm,
-      rules: {
-        powerFactorOne: [
-          { required: true, message: '请输入功率因数', trigger: 'blur' },
-           { pattern:/^\d+(\.\d{1,2})?$/ , message: '请输入数字，可保留两位小数' }
-        ],
-        voltageQualified: [
-          { required: true, message: '请输入电压合格率', trigger: 'blur' },
-           { pattern:/^\d+(\.\d{1,2})?$/ , message: '请输入数字，可保留两位小数' }
-        ],
-        loadRate: [
-          { required: true, message: '请输入负载率', trigger: 'blur' },
-           { pattern:/^\d+(\.\d{1,2})?$/ , message: '请输入数字，可保留两位小数' }
-        ],
-
-        currentBalance: [
-          { required: true, message: '请输入电流平衡度', trigger: 'blur' },
-           { pattern:/^\d+(\.\d{1,2})?$/ , message: '请输入数字，可保留两位小数' }
-        ],
-        voltageBalance: [
-          { required: true, message: '请输入电压平衡度', trigger: 'blur' },
-           { pattern:/^\d+(\.\d{1,2})?$/ , message: '请输入数字，可保留两位小数' }
-        ],
-        thdu: [
-          { required: true, message: '请输入谐波畸变率', trigger: 'blur' },
-           { pattern:/^\d+(\.\d{1,2})?$/ , message: '请输入数字，可保留两位小数' }
-        ],
-        powerFactorTwo: [
-          { required: true, message: '请输入功率因数', trigger: 'blur' },
-           { pattern:/^\d+(\.\d{1,2})?$/ , message: '请输入数字，可保留两位小数' }
-        ],
-      },
-      submitForm,
-      isDisable,
-      resetForm
+watch(
+  () => props.activeName,
+  (newVal) => {
+    if (newVal == 'six' && props.siteId) {
+      resetForm()
+      powerQualityList()
     }
-  },
+  }
+)
+
+onMounted(() => {
+  if (store.state.goUrl == 6) {
+    resetForm()
+    powerQualityList()
+  }
 })
 </script>
 

src/views/siteManage/variableList/dialogComponent.vue

@@ -1,18 +1,6 @@
 <template>
-  <el-dialog
-    :title="dialogTitle"
-    v-model="dialogVisible"
-    width="640px"
-    @close="closeDialog()"
-    @open="open"
-  >
-    <el-form
-      ref="formInfo"
-      :model="form"
-      class="demo-form-inline"
-      label-width="100px"
-      :rules="rules"
-    >
+  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="640px" @close="closeDialog()" @open="open">
+    <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="100px" :rules="rules">
       <el-form-item label="设备编号：" prop="deviceCode">
         <el-input v-model="form.deviceCode"></el-input>
       </el-form-item>
@@ -24,34 +12,15 @@
       </el-form-item>
 
       <el-form-item label="监控设备：" prop="monitoringEquipment">
-        <el-select
-          v-model="form.monitoringEquipment"
-       
-          collapse-tags
-          placeholder="请选择"
-        >
-          <el-option
-            v-for="item in deviceNewsListBoxData"
-            :key="item.value"
-            :label="item.monitorDeviceName"
-            :value="item.id"
-          ></el-option>
+        <el-select v-model="form.monitoringEquipment" collapse-tags placeholder="请选择">
+          <el-option v-for="item in deviceNewsListBoxData" :key="item.value" :label="item.monitorDeviceName"
+            :value="item.id"></el-option>
         </el-select>
       </el-form-item>
 
       <el-form-item label="通信设备：" prop="communicationEquipment">
-        <el-select
-          v-model="form.communicationEquipment"
-     
-          collapse-tags
-          placeholder="请选择"
-        >
-          <el-option
-            v-for="item in deviceListData"
-            :key="item.id"
-            :label="item.deviceName"
-            :value="item.id"
-          ></el-option>
+        <el-select v-model="form.communicationEquipment" collapse-tags placeholder="请选择">
+          <el-option v-for="item in deviceListData" :key="item.id" :label="item.deviceName" :value="item.id"></el-option>
         </el-select>
       </el-form-item>
 
@@ -75,10 +44,8 @@
         </el-radio-group>
       </el-form-item>
 
-      <br />
-      <br />
-      <br />
-      <div style="text-align: right">
+
+      <div style="margin-top:30px;text-align: right">
         <el-button @click="closeDialog(0)">取消</el-button>
         <el-button type="primary" @click="submitForm()">保存</el-button>
       </div>
@@ -86,222 +53,190 @@
   </el-dialog>
 </template>
 
-<script>
-// import { useStore } from 'vuex'
-import { defineComponent, ref, watchEffect,onMounted } from 'vue'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, nextTick } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/siteManage/variableList'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'DialogComponent',
-  emits: ['closeDialog'],
-  props: {
-    flag: Boolean,
-    dialogTitle: String,
-    itemInfo: Object,
-    siteId: Number,
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+  itemInfo: Object,
+  siteId: Number,
+}) //数据双向绑定
+const emit = defineEmits(['handleSelect']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const formInfo = ref(null)
+const dialogTitle = ref(null)
+const dialogVisible = ref(false)
+const state = reactive({
+  form: {},
+  rules: {
+    deviceCode: [
+      { required: true, message: '请输入设备编号', trigger: 'blur' },
+      {
+        min: 1,
+        max: 20,
+        message: '设备编号长度在 1 到 20 个字符',
+        trigger: 'blur',
+      },
+    ],
+    variableName: [
+      { required: true, message: '请输入变量名', trigger: 'blur' },
+      {
+        min: 1,
+        max: 20,
+        message: '变量名长度在 1 到 20 个字符',
+        trigger: 'blur',
+      },
+    ],
+    variableCoding: [
+      { required: true, message: '请输入变量编码', trigger: 'blur' },
+      {
+        min: 1,
+        max: 20,
+        message: '变量编码长度在 1 到 20 个字符',
+        trigger: 'blur',
+      },
+    ],
+    monitoringEquipment: [
+      { required: true, message: '请选择监控设备', trigger: 'blur' },
+    ],
+    communicationEquipment: [
+      { required: true, message: '请选择通信设备', trigger: 'blur' },
+    ],
+    dataAddress: [
+      { required: true, message: '请输入数据地址', trigger: 'blur' },
+      {
+        min: 1,
+        max: 20,
+        message: '数据地址长度在 1 到 20 个字符',
+        trigger: 'blur',
+      },
+    ],
+    dataType: [
+      { required: true, message: '请输入数据类型', trigger: 'blur' },
+      {
+        min: 1,
+        max: 20,
+        message: '数据类型长度在 1 到 20 个字符',
+        trigger: 'blur',
+      },
+    ],
+    coefficient: [
+      { required: true, message: '请输入系数', trigger: 'blur' },
+      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
+    ],
+    saveCycle: [
+      { required: true, message: '请输入存盘周期', trigger: 'blur' },
+      { pattern: /^[1-9][\d]*$/, message: '请输入正确的分钟数' }
+      // { pattern: /^(?:[1-9]?\d|60)$/ , message: '请输入正确的分钟数' }
+    ],
+    dataArea: [
+      { required: true, message: '请选中状态', trigger: 'blur' },
+    ],
   },
-  setup(props, context) {
-    context
-    // const store = useStore()
-    const dialogVisible = ref(false)
-    const formInfo = ref(null)
-    const deviceListData = ref([])
-    const deviceNewsListBoxData = ref([])
-    const form = ref([])
+  deviceListData: [],
+  deviceNewsListBoxData: []
+})
+const { form, rules, deviceListData, deviceNewsListBoxData } = toRefs(state)
 
-    const siteList = ref([])
 
-    // open(): Dialog弹窗打开之前做的事
-    const open = () => {
-      form.value = props.itemInfo.value
-       console.log('open时传过来的详情值form.value')
-      console.log(form.value)
-      deviceList()
-      deviceNewsListBox()
-    }
 
-    // 关闭弹框
-    const closeDialog = () => {
-      resetForm()
-      context.emit('closeDialog', false)
-      dialogVisible.value = false
-    }
-    function resetForm() {
-      formInfo.value.resetFields()
-    }
+// 弹窗打开
+function openDialog(event) {
+  dialogTitle.value = event.dialogTitle
+  form.value = event.tableItem;
+
+  deviceList()
+  deviceNewsListBox()
 
-    watchEffect((fn, options) => {
-      fn, options
-      dialogVisible.value = props.flag
+  dialogVisible.value = true
+}
+
+// 关闭弹框
+function closeDialog() {
+  formInfo.value.resetFields()
+  dialogVisible.value = false
+}
+
+//通信设备下拉
+function deviceList() {
+  api
+    .deviceList({
+      siteId: props.siteId,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        deviceListData.value = requset.data
+      } else {
+        ElMessage.error(requset.msg)
+      }
     })
+}
 
-    const roleValid = (rule, value, callback) => {
-      rule
-      if (value.length === 0) {
-        callback(new Error('角色不能为空'))
+//监控设备下拉
+function deviceNewsListBox() {
+  api
+    .deviceNewsListBox({
+      siteId: props.siteId,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        deviceNewsListBoxData.value = requset.data
       } else {
-        callback()
+        ElMessage.error(requset.msg)
       }
-    }
+    })
+}
 
-    //通信设备下拉
-    function deviceList() {
-      api
-        .deviceList({
-          siteId: props.siteId,
-        })
-        .then((requset) => {
+// 保存-修改操作
+function submitForm() {
+  formInfo.value.validate((valid) => {
+    if (valid) {
+      if (dialogTitle.value === '新增') {
+        api.variableAdd(form.value).then((requset) => {
           if (requset.status === 'SUCCESS') {
-            deviceListData.value = requset.data
-            console.log('请求接口下拉时的 通信设备下拉deviceListData.value')
-              console.log(deviceListData.value)
+            ElMessage.success({
+              message: '新增成功',
+              type: 'success',
+            })
+            emit('handleSelect', false)
+            closeDialog()
           } else {
             ElMessage.error(requset.msg)
           }
         })
-    }
-
-    //监控设备下拉
-    function deviceNewsListBox() {
-      api
-        .deviceNewsListBox({
-          siteId: props.siteId,
-        })
-        .then((requset) => {
+      } else {
+        api.variableListUpdate(form.value).then((requset) => {
           if (requset.status === 'SUCCESS') {
-            deviceNewsListBoxData.value = requset.data
-            // console.log('deviceNewsListBoxData.value')
-            // console.log(deviceNewsListBoxData.value)
+            ElMessage.success({
+              message: '修改成功',
+              type: 'success',
+            })
+            emit('handleSelect', false)
+            closeDialog()
           } else {
             ElMessage.error(requset.msg)
           }
         })
+      }
+    } else {
+      console.log('error submit!!')
+      return false
     }
+  })
+}
+onMounted(() => { })
 
-    // 保存-修改操作
-    const submitForm = () => {
-      formInfo.value.validate((valid) => {
-        if (valid) {
-          if (props.dialogTitle === '新增') {
-            api.variableAdd(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '新增成功',
-                  type: 'success',
-                })
-                closeDialog()
-              } else {
-                ElMessage.error(requset.msg)
-              }
-            })
-          } else {
-            api.variableListUpdate(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '修改成功',
-                  type: 'success',
-                })
-                closeDialog()
-              } else {
-                ElMessage.error(requset.msg)
-              }
-            })
-          }
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    }
-    onMounted(() => {
-      // deviceList()
-      // deviceNewsListBox()
-    })
-
-    return {
-      closeDialog,
-      dialogVisible,
-      roleValid,
-      formInfo,
-      siteList,
-      deviceList,
-      deviceNewsListBox,
-
-      form,
-      open,
-
-      deviceListData,
-      deviceNewsListBoxData,
-      submitForm,
-      rules: {
-        deviceCode: [
-          { required: true, message: '请输入设备编号', trigger: 'blur' },
-          {
-            min: 1,
-            max: 20,
-            message: '设备编号长度在 1 到 20 个字符',
-            trigger: 'blur',
-          },
-        ],
-        variableName: [
-          { required: true, message: '请输入变量名', trigger: 'blur' },
-          {
-            min: 1,
-            max: 20,
-            message: '变量名长度在 1 到 20 个字符',
-            trigger: 'blur',
-          },
-        ],
-        variableCoding: [
-          { required: true, message: '请输入变量编码', trigger: 'blur' },
-          {
-            min: 1,
-            max: 20,
-            message: '变量编码长度在 1 到 20 个字符',
-            trigger: 'blur',
-          },
-        ],
-        monitoringEquipment: [
-          { required: true, message: '请选择监控设备', trigger: 'blur' },
-        ],
-        communicationEquipment: [
-          { required: true, message: '请选择通信设备', trigger: 'blur' },
-        ],
-        dataAddress: [
-          { required: true, message: '请输入数据地址', trigger: 'blur' },
-          {
-            min: 1,
-            max: 20,
-            message: '数据地址长度在 1 到 20 个字符',
-            trigger: 'blur',
-          },
-        ],
-        dataType: [
-          { required: true, message: '请输入数据类型', trigger: 'blur' },
-          {
-            min: 1,
-            max: 20,
-            message: '数据类型长度在 1 到 20 个字符',
-            trigger: 'blur',
-          },
-        ],
-        coefficient: [
-          { required: true, message: '请输入系数', trigger: 'blur' },
-           { pattern:/^\d+(\.\d{1,2})?$/ , message: '请输入数字，可保留两位小数' }
-        ],
-        saveCycle: [
-          { required: true, message: '请输入存盘周期', trigger: 'blur' },
-          { pattern: /^[1-9][\d]*$/ , message: '请输入正确的分钟数' }
-          // { pattern: /^(?:[1-9]?\d|60)$/ , message: '请输入正确的分钟数' }
-        ],
-        dataArea: [
-          { required: true, message: '请选中状态', trigger: 'blur' },
-        ],
-      },
-    }
-  },
-})
+// 暴露变量
+defineExpose({
+  openDialog,
+});
 </script>
 <style scoped lang="scss">
 .el-input,
@@ -313,6 +248,7 @@ export default defineComponent({
 .el-form-item__label {
   width: 150px;
 }
+
 .el-form-item__content {
   margin-left: 150px;
 }

src/views/siteManage/variableList/index.vue

@@ -5,152 +5,73 @@
       <div class="left">
         <div>
           <span class="" style="margin-right: 30px">
-            【{{ labelCom }}】 站点的所有变量
-            
+            【{{ store.state.siteManageLabelCom }}】 站点的所有变量
+
           </span>
-          <el-button icon="el-icon-plus" type="success" @click="addItem()" :disabled="store.state.authorities.indexOf('新增')==-1">
+          <el-button icon="Plus" type="success" @click="addItem()"
+            :disabled="store.state.authorities.indexOf('新增') == -1">
             新增
           </el-button>
-          <el-button icon="el-icon-refresh" type="primary">
+          <el-button icon="Refresh" type="primary">
             同步配置到采集器
           </el-button>
-          <a href="./static/伍继变量列表导入模板.xlsx" download class="downloadMb" >模板下载</a>
+          <a href="./static/伍继变量列表导入模板.xlsx" download class="downloadMb">模板下载</a>
         </div>
 
-        <div style="margin-top: 15px">
-          <el-button @click="Select(1)" :type="select == 1 ? 'primary' : ''" :disabled="store.state.authorities.indexOf('查询')==-1">
-            模拟量
-          </el-button>
-          <el-button @click="Select(2)" :type="select == 2 ? 'primary' : ''" :disabled="store.state.authorities.indexOf('查询')==-1">
-            状态量
-          </el-button>
-          <el-button @click="Select(3)" :type="select == 3 ? 'primary' : ''" :disabled="store.state.authorities.indexOf('查询')==-1">
-            参数量
-          </el-button>
-          <el-input
-            placeholder="搜索变量名称"
-            style="width: 200px; margin-left: 20px"
-            v-model="variableName"
-            :disabled="store.state.authorities.indexOf('查询')==-1"
-          ></el-input>
-          <el-button
-            type="primary"
-            icon="el-icon-search"
-            class="search-button"
-            @click="query()"
-            :disabled="store.state.authorities.indexOf('查询')==-1"
-          >
+        <div style="display: flex; margin-top: 15px">
+          <el-radio-group v-model="select" @change="(val) => { select = val, query() }"
+            :disabled="store.state.authorities.indexOf('查询') == -1">
+            <el-radio-button label="day" :value="1">模拟量</el-radio-button>
+            <el-radio-button label="month" :value="2">状态量</el-radio-button>
+            <el-radio-button label="year" :value="3">参数量</el-radio-button>
+          </el-radio-group>
+
+          <el-input v-model="variableName" placeholder="搜索变量名称" style="width: 200px; margin-left: 20px"
+            :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
+
+          <el-button type="primary" icon="Search" class="search-button" @click="query()"
+            :disabled="store.state.authorities.indexOf('查询') == -1" style="margin: auto 0;">
             搜索
           </el-button>
         </div>
-        <!-- <el-radio-group v-model="tabPosition" style="margin-top: 20px">
-          <el-radio-button label="one">模拟量</el-radio-button>
-          <el-radio-button label="two">状态量</el-radio-button>
-          <el-radio-button label="three">参数量</el-radio-button>
-        </el-radio-group> -->
       </div>
 
-      <div class="right">
-        <el-upload
-          class="upload-demo"
-          :action="fileUrl + 'deviceAnalogVariableList/variableListImport'"
-          :on-progress="handleProgress"
-          :on-success="handleUpAvatar"
-          :on-error="handleError"
-          multiple
-          :limit="1"
-          :headers="{
-            accessToken: [accessToken],
-          }"
-          :file-list="fileList"
-          style="margin-right: 10px; display: inline-block"
-          :disabled="store.state.authorities.indexOf('导入')==-1"
-        >
-          <el-button size="small" type="primary" :disabled="store.state.authorities.indexOf('导入')==-1">导入</el-button>
-        </el-upload>
+      <el-upload class="upload-demo" :action="fileUrl + 'deviceAnalogVariableList/variableListImport'"
+        :on-progress="handleProgress" :on-success="handleUpAvatar" :on-error="handleError" multiple :limit="1" :headers="{
+          accessToken: [accessToken],
+        }" :file-list="fileList" style="margin: 0 10px 0 auto; display: inline-block"
+        :disabled="store.state.authorities.indexOf('导入') == -1">
+        <el-button type="primary" :disabled="store.state.authorities.indexOf('导入') == -1">导入</el-button>
+      </el-upload>
 
-        <el-button type="primary" @click="DataReportExport()" :disabled="store.state.authorities.indexOf('导出')==-1">导出</el-button>
-      </div>
+      <el-button type="primary" @click="DataReportExport()"
+        :disabled="store.state.authorities.indexOf('导出') == -1">导出</el-button>
     </div>
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table
-      :data="tableData"
-      border
-      stripe
-      :header-cell-style="headClass"
-      :default-sort="{ prop: 'date', order: 'descending' }"
-    >
-      <el-table-column
-        type="index"
-        label="序号"
-        width="80px"
-        sortable
-      ></el-table-column>
-      <el-table-column
-        prop="variableName"
-        label="变量名"
-        width="150px"
-        sortable
-      ></el-table-column>
-      <el-table-column
-        prop="variableCoding"
-        label="变量编号"
-        width="150px"
-        sortable
-      ></el-table-column>
-      <el-table-column
-        prop="monitorDeviceName"
-        label="监控设备"
-        width="150px"
-      ></el-table-column>
-      <el-table-column
-        prop="deviceName"
-        label="通信设备"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="dataAddress"
-        label="数据地址"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="dataType"
-        label="数据类型"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="coefficient"
-        label="系数"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="saveCycle"
-        label="存盘周期"
-        width=""
-      ></el-table-column>
+    <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA' }"
+      :default-sort="{ prop: 'date', order: 'descending' }">
+      <el-table-column type="index" label="序号" width="80px" sortable></el-table-column>
+      <el-table-column prop="variableName" label="变量名" width="150px" sortable></el-table-column>
+      <el-table-column prop="variableCoding" label="变量编号" width="150px" sortable></el-table-column>
+      <el-table-column prop="monitorDeviceName" label="监控设备" width="150px"></el-table-column>
+      <el-table-column prop="deviceName" label="通信设备" width=""></el-table-column>
+      <el-table-column prop="dataAddress" label="数据地址" width=""></el-table-column>
+      <el-table-column prop="dataType" label="数据类型" width=""></el-table-column>
+      <el-table-column prop="coefficient" label="系数" width=""></el-table-column>
+      <el-table-column prop="saveCycle" label="存盘周期" width=""></el-table-column>
       <el-table-column fixed="right" label="操作" width="180">
         <template #default="scope">
-          <el-button
-            type="text"
-            size="small"
-            @click.prevent="editRow(scope.row)"
-            :disabled="store.state.authorities.indexOf('修改')==-1"
-          >
+          <el-button type="text" size="small" @click.prevent="editRow(scope.row)"
+            :disabled="store.state.authorities.indexOf('修改') == -1">
             修改
           </el-button>
-          <el-popconfirm
-            confirm-button-text="是"
-            cancel-button-text="否"
-            icon="el-icon-info"
-            icon-color="red"
-            title="确定删除?"
-            @confirm="handleDelete(scope.row)"
-            @cancel="cancelEvent"
-          >
+          <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon="el-icon-info" icon-color="red" title="确定删除?"
+            @confirm="handleDelete(scope.row)" @cancel="cancelEvent">
             <template #reference>
-              <el-button type="text" size="small" class="delete-text" :disabled="store.state.authorities.indexOf('删除')==-1">
+              <el-button type="text" size="small" class="delete-text"
+                :disabled="store.state.authorities.indexOf('删除') == -1">
                 删除
               </el-button>
             </template>
@@ -162,304 +83,213 @@
 
     <!-- 分页start -->
     <div class="paginationBlock">
-      <el-pagination
-        v-model:currentPage="currentPage"
-        :page-sizes="[15, 20, 25, 30]"
-        :page-size="pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        background
-      ></el-pagination>
+      <el-pagination v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" background></el-pagination>
     </div>
     <!-- 分页end -->
 
     <!--弹框组件开始-----------------------start-->
-    <dialog-component
-      :dialogTitle="dialogTitle"
-      :itemInfo="tableItem"
-      @closeDialog="closeDialog"
-      :flag="showDialog"
-      :siteId="siteId"
-    ></dialog-component>
+    <dialog-component ref="dialogComponentRef" :siteId="props.siteId" @handleSelect="query()"></dialog-component>
     <!--弹框组件开始-----------------------end-->
   </div>
 </template>
 
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import DialogComponent from './dialogComponent'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, nextTick } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/siteManage/variableList'
-import { defineComponent, onMounted, reactive, ref, watch } from 'vue'
-import { ElMessage } from 'element-plus'
+/*----------------------------------组件引入-----------------------------------*/
+import DialogComponent from './dialogComponent'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+  siteId: Number,
+  activeName: String,
+}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const fileUrl = ref(window.PLATFROM_CONFIG.baseUrl)
+const fileList = ref([])
+const accessToken = ref(store.state.user.accessToken)
+const state = reactive({
+  tableData: [],
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+  variableName: ""
+})
+const { tableData, currentPage, pageSize, total, variableName } = toRefs(state)
+const select = ref(1)
 
-export default defineComponent({
-  name: 'VariableList',
-  props: {
-    siteId: Number,
-    // labelCom: String,
-    activeName: String,
-  },
 
-  components: { DialogComponent },
+const handleProgress = (file, fileList) => {
+  file
+  if (
+    !(
+      fileList.raw.type ===
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+      fileList.raw.type === 'application/vnd.ms-excel'
+    )
+  ) {
+    ElMessage({
+      message: '上传文件只能是 xls 和 xlsx 格式!',
+      type: 'error',
+    })
+    return false
+  } else {
+    return true
+  }
+}
 
-  setup(props) {
-    const store = useStore()
-    store
-    const tableItem = reactive([])
-    const tableData = ref()
+const handleUpAvatar = (res, file) => {
+  fileList.value = []
+  ElMessage.success({
+    message: '导入成功',
+    type: 'success',
+  })
+  query()
+}
+const handleError = (res) => {
+  let myError = res.toString() //转字符串
+  myError = myError.replace('Error: ', '') //去掉前面的
+  myError = JSON.parse(myError) //转对象
+  ElMessage.error({
+    message: myError.msg,
+    type: 'error',
+  })
+}
 
-    const currentPage = ref(1)
-    const pageSize = ref(10)
-    const total = ref(0)
+//是否删除  ---- 否
+const cancelEvent = () => {
+  console.log('cancel!')
+}
+//查询变量列表
+function query() {
+  api
+    .variableList({
+      size: pageSize.value,
+      current: currentPage.value,
+      dataArea: select.value,
+      siteId: props.siteId,
+      variableName: variableName.value,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        tableData.value = requset.data.records
+        total.value = requset.data.total
+      } else {
+        ElMessage.error(requset.msg)
+      }
+    })
+}
 
-    const select = ref(1)
-    // const siteId = ref(1)
-    const labelCom = ref(store.state.siteManageLabelCom)
-    const variableName = ref('')
-    const showDialog = ref(false)
-    const dialogTitle = ref('')
+function Select(value) {
+  select.value = value
+  query()
+}
 
-    const fileUrl = ref(window.PLATFROM_CONFIG.baseUrl)
-    const fileList = ref([])
-    const accessToken = ref(store.state.user.accessToken)
+// 添加操作
+function addItem() {
+  proxy.$refs['dialogComponentRef'].openDialog({
+    dialogTitle: '新增',
+    tableItem: {
+      deviceCode: "",
+      monitoringEquipment: '',
+      communicationEquipment: '',
+      // dataArea:'1'
+    }
+  })
+}
 
-    const handleProgress = (file, fileList) => {
-      file
-      if (
-        !(
-          fileList.raw.type ===
-            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
-          fileList.raw.type === 'application/vnd.ms-excel'
-        )
-      ) {
-        ElMessage({
-          message: '上传文件只能是 xls 和 xlsx 格式!',
-          type: 'error',
-        })
-        return false
-      } else {
-        return true
-      }
+// 编辑操作
+function editRow(row) {
+  proxy.$refs['dialogComponentRef'].openDialog({
+    dialogTitle: '编辑',
+    tableItem: {
+      deviceCode: row.deviceCode,
+      variableName: row.variableName,
+      monitorDeviceName: row.monitorDeviceName,
+      variableCoding: row.variableCoding,
+      monitoringEquipment: row.monitoringEquipment,
+      communicationEquipment: row.communicationEquipment,
+      dataAddress: row.dataAddress,
+      dataType: row.dataType,
+      coefficient: row.coefficient,
+      saveCycle: row.saveCycle,
+      dataArea: row.dataArea.toString(),
+      id: row.id
     }
+  })
+
+}
 
-    const handleUpAvatar = (res, file) => {
-      console.log(res, file)
-      fileList.value = []
+//删除操作
+function handleDelete(row) {
+  api.variableListDel({ id: row.id }).then((requset) => {
+    if (requset.status === 'SUCCESS') {
       ElMessage.success({
-        message: '导入成功',
+        message: '删除成功',
         type: 'success',
       })
       query()
+    } else {
+      ElMessage.error(requset.msg)
     }
-    const handleError = (res) => {
-      let myError = res.toString() //转字符串
-      myError = myError.replace('Error: ', '') //去掉前面的
-      myError = JSON.parse(myError) //转对象
-      ElMessage.error({
-        message: myError.msg,
-        type: 'error',
-      })
-    }
-
-    //是否删除  ---- 否
-    const cancelEvent = () => {
-      console.log('cancel!')
-    }
-    //查询变量列表
-    function query() {
-      api
-        .variableList({
-          size: pageSize.value,
-          current: currentPage.value,
-          dataArea: select.value,
-          siteId: props.siteId,
-          variableName: variableName.value,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            tableData.value = requset.data.records
-            total.value = requset.data.total
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
+  })
+}
 
-    const Select = (value) => {
-      select.value = value
-      query()
-    }
+//导出
+function DataReportExport() {
+  api
+    .variableListExport({
+      dataArea: select.value,
+      siteId: props.siteId,
+      variableName: variableName.value,
 
-    //监听变化
-    watch(
-      () => props.siteId,
-      () => {
-        labelCom.value = store.state.siteManageLabelCom
-        if (props.activeName == 'third') {
-          query()
-        }
-      }
-    )
-    watch(
-      () => props.activeName,
-      (newVal) => {
-        if (newVal == 'third') {
-          query()
-        }
-      }
-    )
-    onMounted(() => {
-      if (store.state.goUrl==3) {
-         query()
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data
+        ElMessage.success({
+          message: '导出成功',
+          type: 'success',
+        })
+      } else {
+        ElMessage.error(requset.msg)
       }
     })
+}
 
-     const handleSizeChange = (val) => {
-      pageSize.value = val
-      query()
-    }
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
-      query()
-    }
-
-    // input输入框无法输入解决
-    const change = () => {
-      this.$forceUpdate()
-    }
-
-    // 表头样式设置
-    const goVariableList = () => {
-      // 跳转至订单列表页面传参
-      this.$router.push({
-        path: '../siteManage/variableList/index.vue',
-      })
-      // this.$router.push({ name:'variableList'})
-    }
-    const headClass = () => {
-      return 'background:#FAFAFA;'
-    }
-
-    // 添加操作
-    const addItem = () => {
-      tableItem.value = {
-        monitoringEquipment: '',
-        communicationEquipment: '',
-        // dataArea:'1'
-      }
-      dialogTitle.value = '新增'
-      showDialog.value = true
-    }
-    // 编辑操作
-    const editRow = (row) => {
-      tableItem.value = {
-        deviceCode: row.deviceCode,
-        variableName: row.variableName,
-        monitorDeviceName: row.monitorDeviceName,
-        variableCoding: row.variableCoding,
-        monitoringEquipment: row.monitoringEquipment,
-        communicationEquipment: row.communicationEquipment,
-        dataAddress: row.dataAddress,
-        dataType: row.dataType,
-        coefficient: row.coefficient,
-        saveCycle: row.saveCycle,
-        dataArea: row.dataArea.toString(),
-        id:row.id
-      }
-      dialogTitle.value = '编辑'
-      showDialog.value = true
-    }
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  query()
+}
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  query()
+}
 
-    // 关闭操作
-    const closeDialog = () => {
-      showDialog.value = false
+watch(
+  () => props.activeName,
+  (newVal) => {
+    if (newVal == 'third' && props.siteId) {
       query()
     }
+  }
+)
 
-    //删除操作
-    const handleDelete = (row) => {
-      api.variableListDel({ id: row.id }).then((requset) => {
-        if (requset.status === 'SUCCESS') {
-          ElMessage.success({
-            message: '删除成功',
-            type: 'success',
-          })
-          query()
-        } else {
-          ElMessage.error(requset.msg)
-        }
-      })
-    }
-    // 获取数据
-    const getVariableListone = () => {
-      console.log('hzy')
-    }
-
-    //导出
-    const DataReportExport = () => {
-      api
-        .variableListExport({
-          dataArea: select.value,
-          siteId: props.siteId,
-          variableName: variableName.value,
-          
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data
-            ElMessage.success({
-              message: '导出成功',
-              type: 'success',
-            })
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-
-    return {
-      cancelEvent,
-      handleSizeChange,
-      handleCurrentChange,
-      change,
-      goVariableList,
-      headClass,
-      addItem,
-      editRow,
-      closeDialog,
-      handleDelete,
-      getVariableListone,
-      query,
-      Select,
-
-      DataReportExport, //导出
-
-      select,
-      showDialog,
-      dialogTitle,
-
-      total,
-      pageSize,
-      currentPage,
-      tableData,
-      input: '请输入状态',
-      variableName,
-      tableItem,
-
-      fileList,
-      fileUrl,
-      accessToken,
-      handleProgress,
-      handleUpAvatar,
-      handleError,
-      labelCom,
-      store
-    }
-  },
+onMounted(() => {
+  if (store.state.goUrl == 3) {
+    query()
+  }
 })
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/views/siteManage/watchDog/clone.vue

@@ -1,28 +1,15 @@
 <template>
   <transition name="dialog-fade">
-    <el-dialog
-      v-if="showDialog"
-      :title="dialogTitle"
-      class="dialog-component"
-      v-model="showDialog"
-      width="640px"
-      @close="closeDialog(0)"
-    >
-      <el-form
-        ref="formInfo"
-        :model="formInfo"
-        class="demo-form-inline"
-        label-width="100px"
-        :rules="rules"
-      >
+    <el-dialog :title="dialogTitle" class="dialog-component" v-model="showDialog" width="640px" @close="closeDialog(0)">
+      <el-form ref="formInfo" :model="formInfo" class="demo-form-inline" label-width="100px" :rules="rules">
         <el-form-item label="克隆设备对象:" prop="watchName">
           <el-input v-model="formInfo.watchName"></el-input>
         </el-form-item>
         <el-form-item label="变量克隆至:" prop="ability">
-           <el-radio-group v-model="formInfo.resource">
-                <el-radio label="新设备"></el-radio>
-                <el-radio label="已有设备"></el-radio>
-              </el-radio-group>
+          <el-radio-group v-model="formInfo.resource">
+            <el-radio label="新设备"></el-radio>
+            <el-radio label="已有设备"></el-radio>
+          </el-radio-group>
         </el-form-item>
         <el-form-item label="设备名：" prop="stationAddress">
           <el-input v-model="formInfo.ratedCurrent"></el-input>
@@ -30,143 +17,121 @@
         <el-form-item label="设备编号：" prop="watchCode">
           <el-input v-model="formInfo.watchCode"></el-input>
         </el-form-item>
- 
-        <div class="sublitArea" >
+
+        <div class="sublitArea">
           <el-button @click="closeDialog(0)">取消</el-button>
-          <el-button type="primary" @click="submitForm('formInfo')"
-            >保存</el-button
-          >
+          <el-button type="primary" @click="submitForm('formInfo')">保存</el-button>
         </div>
       </el-form>
     </el-dialog>
   </transition>
 </template>
 
-<script>
-
+<script setup>
 
-
-
-export default {
-  name: "Clone",
-  props: {
-    dialogTitle: {
-      type: String,
-      default: "克隆",
+/*----------------------------------依赖引入-----------------------------------*/
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, nextTick } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({
+}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const state = reactive({
+  checked: true,
+  showDialog: false,
+  formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
+  options: [
+    {
+      value: "选项1",
+      label: "站点一",
     },
-    itemInfo: {
-      type: Object,
-      default: function () {
-        return {};
-      },
+    {
+      value: "选项2",
+      label: "站点二",
     },
-  },
-  data() {
-    return {
-       checked: true,
-      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: "选项3",
+      label: "站点三",
+    },
+    {
+      value: "选项4",
+      label: "站点四",
+    },
+    {
+      value: "选项5",
+      label: "站点五",
+    },
+  ],
 
-      rules: {
-        watchName: [
-          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: true, message: "请输入设备名称", trigger: "blur" },
-          {
-            min: 3,
-            max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
-          },
-        ],
-        watchCode: [
-          { required: true, message: "请输入设备编号", trigger: "blur" },
-          {
-            min: 3,
-            max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
-          },
-        ],
-        routeAddress: [
-          { required: true, message: "请选则回路表记地址", trigger: "change" },
-         
-        ],
-        ratedVoltage: [
-          { required: true, message: '请选择站点列表', trigger: 'change'}
-        
-        ],
-        ratedCurrent: [
-          { required: true, message: "请输入已选站点个数", trigger: "blur" },
-          { trigger: "blur" },
-        ],
-        fzlMx: [
-          { required: true, message: "请输入挂载设备个数", trigger: "blur" },
-          { trigger: "blur" },
-        ],
+  rules: {
+    watchName: [
+      // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+      { required: true, message: "请输入设备名称", trigger: "blur" },
+      {
+        min: 3,
+        max: 6,
+        message: "用户名长度在 3 到 6 个字符",
+        trigger: "blur",
+      },
+    ],
+    watchCode: [
+      { required: true, message: "请输入设备编号", trigger: "blur" },
+      {
+        min: 3,
+        max: 6,
+        message: "用户名长度在 3 到 6 个字符",
+        trigger: "blur",
       },
-    };
+    ],
+    routeAddress: [
+      { required: true, message: "请选则回路表记地址", trigger: "change" },
+
+    ],
+    ratedVoltage: [
+      { required: true, message: '请选择站点列表', trigger: 'change' }
+
+    ],
+    ratedCurrent: [
+      { required: true, message: "请输入已选站点个数", trigger: "blur" },
+      { trigger: "blur" },
+    ],
+    fzlMx: [
+      { required: true, message: "请输入挂载设备个数", trigger: "blur" },
+      { trigger: "blur" },
+    ],
   },
-  methods: {
-    roleValid(rule, value, callback) {
-      console.log(rule)
-      if (value.length === 0) {
-        callback(new Error("角色不能为空"));
-      } else {
-        callback();
-      }
-    },
+})
 
-    // onSelectedDrug(event) {
-    //   this.routeAddress = event;
-    //   console.log(this.routeAddress);
-    // },
-    // 保存操作
-    submitForm(formName) {
-      const params = Object.assign(this.formInfo, {});
-      console.log(params)
-      this.$refs[formName].validate((valid) => {
-        if (valid) {
-          // 走保存请求
-          this.$message({
-            message: "操作成功！",
-            type: "success",
-          });
-          this.closeDialog(1);
-        } else {
-          return false;
-        }
+
+
+// 保存操作
+function submitForm(formName) {
+  const params = Object.assign(state.formInfo, {});
+  proxy.$refs[formName].validate((valid) => {
+    if (valid) {
+      // 走保存请求
+      ElMessage({
+        message: "操作成功！",
+        type: "success",
       });
-    },
-    // 关闭弹框
-    closeDialog(flag) {
-      this.$refs["formInfo"].resetFields();
-      this.showDialog = false;
-      this.$emit("closeDialog", flag);
-    },
-  },
-};
+      closeDialog(1);
+    } else {
+      return false;
+    }
+  });
+}
+// 关闭弹框
+function closeDialog(flag) {
+  proxy.$refs["formInfo"].resetFields();
+  state.showDialog = false;
+  emit("closeDialog", flag);
+}
 </script>
  
 <style scoped lang="scss">
@@ -177,9 +142,10 @@ export default {
 
 // label样式
 .el-form-item__label {
-    width: 150px
+  width: 150px
 }
+
 .el-form-item__content {
-    margin-left: 150px
+  margin-left: 150px
 }
 </style>

src/views/siteManage/watchDog/dialogComponent.vue

@@ -1,275 +1,170 @@
 <template>
-    <el-dialog
-      :title="dialogTitle"
-      v-model="dialogVisible"
-      width="640px"
-      @close="closeDialog()"
-      @open="open"
-    >
-      <el-form
-        ref="formInfo"
-        :model="form"
-        class="demo-form-inline"
-        label-width="100px"
-        :rules="rules"
-      >
-        <el-form-item label="设备名称：" prop="monitorDeviceName">
-          <el-input v-model="form.monitorDeviceName"></el-input>
-        </el-form-item>
-        <el-form-item label="设备编号：" prop="monitorDeviceCode">
-          <el-input v-model="form.monitorDeviceCode"></el-input>
-        </el-form-item>
-        <el-form-item label="回路表记地址:" prop="loopMeterAddress">
-          <!-- <el-select
-            v-model="form.loopMeterAddress"
-            multiple
-            filterable
-            collapse-tags
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select> -->
-           <el-input-number
-              v-model="form.loopMeterAddress"
-              controls-position="right"
-              :min="0"
-              :max="255"
-            ></el-input-number>
-
-        </el-form-item>
-
-        <el-form-item label="所属站点：" prop="siteId">
-            <el-select
-              v-model="form.siteId"
-             :disabled="
-                deviceNumDataContent != '' &&
-                form.siteId != null &&
-                form.siteId != ''
-                  ? true
-                  : false
-              "
-              placeholder="请选择所属站点"
-            >
-              <el-option
-                v-for="item in siteList"
-                :key="item.value"
-                :label="item.siteName"
-                :value="item.id"
-              ></el-option>
-            </el-select>
-          </el-form-item>
-
-        <el-form-item label="额定电压(kV)：" prop="ratedVoltage">
-          <el-input v-model="form.ratedVoltage"></el-input>
-          <div class="remarksTxt">(数值为线电压)</div>
-        </el-form-item>
-        <el-form-item label="额定电流(A)：" prop="ratedCurrent">
-          <el-input v-model="form.ratedCurrent"></el-input>
-        </el-form-item>
-        <el-form-item label="电流负载率门限：" prop="currentLoadRate">
-          <el-input v-model="form.currentLoadRate"></el-input>
-          <div class="remarksTxt">(0-100之间的整数)</div>
-        </el-form-item>
-        <el-form-item label="设备能力：" prop="qualityAnalysis">
-          <el-checkbox v-model="form.qualityAnalysis">电能质量分析</el-checkbox>
-          <div class="remarksTxt">(如果未勾选，该设备不参与电能质量分析)</div>
-        </el-form-item>
-
-      
-        <br />
-        <br />
-        <br />
-        <div style="text-align: right">
-          <el-button @click="closeDialog(0)">取消</el-button>
-          <el-button type="primary" @click="submitForm()"
-            >保存</el-button
-          >
-        </div>
-      </el-form>
-    </el-dialog>
+  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="640px" @close="closeDialog()">
+    <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="100px" :rules="rules">
+      <el-form-item label="设备名称：" prop="monitorDeviceName">
+        <el-input v-model="form.monitorDeviceName"></el-input>
+      </el-form-item>
+      <el-form-item label="设备编号：" prop="monitorDeviceCode">
+        <el-input v-model="form.monitorDeviceCode"></el-input>
+      </el-form-item>
+      <el-form-item label="回路表记地址:" prop="loopMeterAddress">
+        <!-- <el-select v-model="form.loopMeterAddress" multiple filterable collapse-tags placeholder="请选择">
+          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
+          </el-option>
+        </el-select> -->
+        <el-input-number v-model="form.loopMeterAddress" controls-position="right" :min="0" :max="255"></el-input-number>
+      </el-form-item>
+
+      <el-form-item label="所属站点：" prop="siteId">
+        <el-select v-model="form.siteId" :disabled="deviceNumDataContent != '' &&
+          form.siteId != null &&
+          form.siteId != ''
+          ? true
+          : false
+          " placeholder="请选择所属站点">
+          <el-option v-for="item in siteList" :key="item.value" :label="item.siteName" :value="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="额定电压(kV)：" prop="ratedVoltage">
+        <el-input v-model="form.ratedVoltage"></el-input>
+        <div class="remarksTxt">(数值为线电压)</div>
+      </el-form-item>
+      <el-form-item label="额定电流(A)：" prop="ratedCurrent">
+        <el-input v-model="form.ratedCurrent"></el-input>
+      </el-form-item>
+      <el-form-item label="电流负载率门限：" prop="currentLoadRate">
+        <el-input v-model="form.currentLoadRate"></el-input>
+        <div class="remarksTxt">(0-100之间的整数)</div>
+      </el-form-item>
+      <el-form-item label="设备能力：" prop="qualityAnalysis">
+        <el-checkbox v-model="form.qualityAnalysis">电能质量分析</el-checkbox>
+        <div class="remarksTxt">(如果未勾选，该设备不参与电能质量分析)</div>
+      </el-form-item>
+
+      <div style="margin-top:30px;text-align: right">
+        <el-button @click="closeDialog(0)">取消</el-button>
+        <el-button type="primary" @click="submitForm()">保存</el-button>
+      </div>
+    </el-form>
+  </el-dialog>
 </template>
 
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import { defineComponent, ref, watchEffect } from 'vue'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, nextTick } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/siteManage/watchDog.js'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'DialogComponent',
-  emits: ['closeDialog'],
-  props: {
-    flag: Boolean,
-    dialogTitle: String,
-    itemInfo: Object,
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits(['handleSelect']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const formInfo = ref(null)
+const dialogTitle = ref(null)
+const dialogVisible = ref(false)
+const state = reactive({
+  form: {},
+  rules: {
+    monitorDeviceName: [
+      { required: true, message: "请输入设备名称", trigger: "blur" },
+      { min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur', },
+    ],
+    monitorDeviceCode: [
+      { required: true, message: "请输入设备编号", trigger: "blur" },
+    ],
+    loopMeterAddress: [
+      { required: true, message: "请选择回路表记地址", trigger: "blur" },
+    ],
+    siteId: [
+      { required: true, message: '请选择所属站点', trigger: 'blur', },
+    ],
+    ratedVoltage: [
+      { required: true, message: "请输入额定电压", trigger: "change" },
+      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
+    ],
+    ratedCurrent: [
+      { required: true, message: "请输入额定电流", trigger: "blur" },
+      { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入数字，可保留两位小数' }
+    ],
+    currentLoadRate: [
+      { required: true, message: "请输入电流负载率门限", trigger: "blur" },
+      { pattern: /^(?:[1-9]?\d|100)$/, message: '请输入0-100的整数' }
+    ],
   },
-  setup(props, context) {
-    context
-    const store = useStore()
-    const dialogVisible = ref(false)
-    const formInfo = ref(null)
-
-    const form = ref([])
-
-     const siteList = ref([])
-
-    // open(): Dialog弹窗打开之前做的事
-    const open = () => {
-      console.log('')
-      form.value = props.itemInfo.value;
-       siteList.value = store.state.siteList
-        console.log('siteList.value')
-      console.log(siteList.value)
-       console.log('siteList.value')
-    }
-
-    const options = [
-      {
-        value: '选项1',
-        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 = () => {
-      formInfo.value.validate((valid) => {
-        if (valid) {
+  siteList: []
+})
+const { form, rules, siteList } = toRefs(state)
+
+// 弹窗打开
+function openDialog(event) {
+  dialogTitle.value = event.dialogTitle
+  form.value = event.tableItem;
+  siteList.value = store.state.siteList
+  dialogVisible.value = true
+}
 
-          form.value.qualityAnalysis =
-            form.value.qualityAnalysis == true
-              ? (form.value.qualityAnalysis = '是')
-              : (form.value.qualityAnalysis = '否')
+// 关闭弹框
+function closeDialog() {
+  proxy.$refs["formInfo"].resetFields(); //重置from校验
+  state.form = {};
+  dialogVisible.value = false
+}
 
-          if (props.dialogTitle === '新增') {
-            api.deviceNewsAdd(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '新增成功',
-                  type: 'success',
-                })
-                closeDialog()
-              } else {
-                ElMessage.error(requset.msg)
-              }
+// 保存-修改操作
+const submitForm = () => {
+  formInfo.value.validate((valid) => {
+    if (valid) {
+
+      form.value.qualityAnalysis =
+        form.value.qualityAnalysis == true
+          ? (form.value.qualityAnalysis = '是')
+          : (form.value.qualityAnalysis = '否')
+
+      if (dialogTitle.value === '新增') {
+        api.deviceNewsAdd(form.value).then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '新增成功',
+              type: 'success',
             })
+            emit('handleSelect', false)
+            closeDialog()
           } else {
-            api.deviceNewsUpdate(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '修改成功',
-                  type: 'success',
-                })
-                closeDialog()
-              } else {
-                ElMessage.error(requset.msg)
-              }
+            ElMessage.error(requset.msg)
+          }
+        })
+      } else {
+        api.deviceNewsUpdate(form.value).then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '修改成功',
+              type: 'success',
             })
+            emit('handleSelect', false)
+            closeDialog()
+          } else {
+            ElMessage.error(requset.msg)
           }
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
+        })
+      }
+    } else {
+      console.log('error submit!!')
+      return false
     }
+  })
+}
 
-    return {
-      closeDialog,
-      dialogVisible,
-      options,
-      roleValid,
-      formInfo,
-      siteList,
-      form,
-      open,
-      submitForm,
-      rules: {
-        monitorDeviceName: [
-          { required: true, message: "请输入设备名称", trigger: "blur" },
-           {
-            min: 1,
-            max: 25,
-            message: '长度在 1 到 25 个字符',
-            trigger: 'blur',
-          },
-        
-        ],
-        monitorDeviceCode: [
-          { required: true, message: "请输入设备编号", trigger: "blur" },
-          
-        ],
-        loopMeterAddress: [
-          { required: true, message: "请选择回路表记地址", trigger: "blur" },
-        ],
-         siteId: [
-          {
-            required: true,
-            message: '请选择所属站点',
-            trigger: 'blur',
-          },
-        ],
-        ratedVoltage: [
-          { required: true, message: "请输入额定电压", trigger: "change" },
-          { pattern:/^\d+(\.\d{1,2})?$/ , message: '请输入数字，可保留两位小数' }
-        ],
-        ratedCurrent: [
-          { required: true, message: "请输入额定电流", trigger: "blur" },
-           { pattern:/^\d+(\.\d{1,2})?$/ , message: '请输入数字，可保留两位小数' }
-        ],
-        currentLoadRate: [
-          { required: true, message: "请输入电流负载率门限", trigger: "blur" },
-          { pattern: /^(?:[1-9]?\d|100)$/ , message: '请输入0-100的整数' }
-  
-          //  { pattern: /^(?:100|\d{1,2})(?:\.\d{1,2})?$/ , message: '请输入0-100的数字，可保留两位小数' }  //aa 100.99也ok??
-            // { pattern: /^(?:100|\d{1,2})?$/ , message: '请输入0-100的整数!' }
-          // { pattern: /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/, message: '请输入正确格式,可保留两位小数' }
-            
-        ],
-      },
-    }
-  },
-})
+// 暴露变量
+defineExpose({
+  openDialog,
+});
 </script>
  
 <style scoped lang="scss">
@@ -282,6 +177,7 @@ export default defineComponent({
 .el-form-item__label {
   width: 150px;
 }
+
 .el-form-item__content {
   margin-left: 150px;
 }

src/views/siteManage/watchDog/index.vue

@@ -1,120 +1,56 @@
 <template>
   <div class="siteManage-main watchDog">
     <!-- 筛选start -->
-    <div class="filter-container mb-20">
+    <div class="filter-container mb-20" style="justify-content: none;">
       <span class="">
-        【{{ labelCom }}】站点的所有监控设备
-        <a
-          href="./static/伍继监控设备导入模板.xlsx"
-          download
-          class="downloadMb"
-        >
+        【{{ store.state.siteManageLabelCom }}】站点的所有监控设备
+        <a href="./static/伍继监控设备导入模板.xlsx" download class="downloadMb">
           模板下载
         </a>
       </span>
 
       <!-- <el-button icon="el-icon-plus" type="success" @click="addItem()">新增</el-button > -->
 
-      <div>
-        <el-upload
-          class="upload-demo"
-          :action="fileUrl + '/deviceAttribute/deviceAttributeImport'"
-          :on-progress="handleProgress"
-          :on-success="handleUpAvatar"
-          :on-error="handleError"
-          multiple
-          :limit="1"
-          :headers="{
-            accessToken: [accessToken],
-          }"
-          :file-list="fileList"
-          style="margin-right: 10px; display: inline-block"
-           :disabled="store.state.authorities.indexOf('导入')==-1"
-        >
-          <el-button size="small" type="primary"  :disabled="store.state.authorities.indexOf('导入')==-1">导入</el-button>
-        </el-upload>
-        <el-button type="primary" @click="DataReportExport()"  :disabled="store.state.authorities.indexOf('导出')==-1">导出</el-button>
-      </div>
+      <el-upload class="upload-demo" :action="fileUrl + '/deviceAttribute/deviceAttributeImport'"
+        :on-progress="handleProgress" :on-success="handleUpAvatar" :on-error="handleError" multiple :limit="1" :headers="{
+          accessToken: [accessToken],
+        }" :file-list="fileList" style="margin:auto 10px 0 auto; display: inline-block"
+        :disabled="store.state.authorities.indexOf('导入') == -1">
+        <el-button type="primary" :disabled="store.state.authorities.indexOf('导入') == -1">导入</el-button>
+      </el-upload>
+      <el-button type="primary" @click="DataReportExport()"
+        :disabled="store.state.authorities.indexOf('导出') == -1">导出</el-button>
     </div>
     <!-- 筛选end -->
 
     <!-- 表格start -->
-    <el-table :data="tableData" border stripe :header-cell-style="headClass">
+    <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA' }">
       <el-table-column prop="status" align="center" label="状态" width="50">
         <template #default="scope">
-          <el-avatar
-            class="status"
-            :style="
-              scope.row.status == 0
-                ? 'background-color:red'
-                : 'background-color:#04F21C'
-            "
-          ></el-avatar>
+          <el-avatar class="status" :style="scope.row.status == 0
+            ? 'background-color:red'
+            : 'background-color:#04F21C'
+            "></el-avatar>
         </template>
       </el-table-column>
-      <el-table-column
-        prop="monitorDeviceName"
-        label="监控设备名称"
-        align="center"
-        width="200px"
-      ></el-table-column>
-      <el-table-column
-        prop="monitorDeviceCode"
-        label="监控设备编号"
-        align="center"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="loopMeterAddress"
-        label="回路表计地址"
-        align="center"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="ratedVoltage"
-        label="额定电压 (kV)"
-        align="center"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="ratedCurrent"
-        label="额定电流 (A)"
-        align="center"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="currentLoadRate"
-        label="电流负载率门限"
-        align="center"
-        width="150"
-      ></el-table-column>
-      <el-table-column
-        prop="qualityAnalysis"
-        label="电能质量分析"
-        align="center"
-        width=""
-      ></el-table-column>
+      <el-table-column prop="monitorDeviceName" label="监控设备名称" align="center" width="200px"></el-table-column>
+      <el-table-column prop="monitorDeviceCode" label="监控设备编号" align="center" width=""></el-table-column>
+      <el-table-column prop="loopMeterAddress" label="回路表计地址" align="center" width=""></el-table-column>
+      <el-table-column prop="ratedVoltage" label="额定电压 (kV)" align="center" width=""></el-table-column>
+      <el-table-column prop="ratedCurrent" label="额定电流 (A)" align="center" width=""></el-table-column>
+      <el-table-column prop="currentLoadRate" label="电流负载率门限" align="center" width="150"></el-table-column>
+      <el-table-column prop="qualityAnalysis" label="电能质量分析" align="center" width=""></el-table-column>
       <el-table-column fixed="right" label="操作" width="140">
         <template #default="scope">
-          <el-button
-            type="text"
-            size="small"
-            @click.prevent="editRow(scope.row)"
-             :disabled="store.state.authorities.indexOf('修改')==-1"
-          >
+          <el-button type="text" size="small" @click.prevent="editRow(scope.row)"
+            :disabled="store.state.authorities.indexOf('修改') == -1">
             编辑
           </el-button>
-          <el-popconfirm
-            confirm-button-text="是"
-            cancel-button-text="否"
-            icon="el-icon-info"
-            icon-color="red"
-            title="确定删除?"
-            @confirm="handleDelete(scope.row)"
-            @cancel="cancelEvent"
-          >
+          <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon="el-icon-info" icon-color="red" title="确定删除?"
+            @confirm="handleDelete(scope.row)" @cancel="cancelEvent">
             <template #reference>
-              <el-button type="text" size="small" class="delete-text"  :disabled="store.state.authorities.indexOf('删除')==-1">
+              <el-button type="text" size="small" class="delete-text"
+                :disabled="store.state.authorities.indexOf('删除') == -1">
                 删除
               </el-button>
             </template>
@@ -127,9 +63,7 @@
           <el-button type="text" size="small" @click="goVariableList">
             变量列表
           </el-button>
-          <!-- <el-button @click="cloneDialog(scope.row)" type="text" size="small"
-            >克隆</el-button
-          > -->
+          <!-- <el-button @click="cloneDialog(scope.row)" type="text" size="small">克隆</el-button> -->
         </template>
       </el-table-column>
     </el-table>
@@ -137,305 +71,201 @@
 
     <!-- 分页start -->
     <div class="paginationBlock">
-      <el-pagination
-        v-model:currentPage="currentPage"
-        :page-sizes="[15, 20, 25, 30]"
-        :page-size="pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        background
-      ></el-pagination>
+      <el-pagination v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" background></el-pagination>
     </div>
     <!-- 分页end -->
 
-    <!--弹框组件开始-----------------------start-->
-    <dialog-component
-      :dialogTitle="dialogTitle"
-      :itemInfo="tableItem"
-      @closeDialog="closeDialog"
-      :flag="showDialog"
-    ></dialog-component>
-    <!--弹框组件开始-----------------------end-->
-
-    <!--克隆组件开始-----------------------start-->
-    <clone
-      v-if="showDialog"
-      ref="cloneDialog"
-      :dialog-title="dialogTitle"
-      :item-info="tableItem"
-      @closeDialog="closeDialog"
-    ></clone>
-    <!--克隆组件end-----------------------end-->
+    <!-- 编辑 -->
+    <dialog-component ref="dialogComponentRef" @handleSelect="deviceNewsList"></dialog-component>
+    <!-- 克隆 -->
+    <!-- <clone ref="cloneDialogRef" @handleSelect="deviceNewsList"></clone> -->
   </div>
 </template>
 
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import { defineComponent, ref, reactive, onMounted, watch } from 'vue'
+import { ElMessage, ElNotification } from 'element-plus'
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs, nextTick } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/siteManage/watchDog.js'
-import { ElMessage } from 'element-plus'
-
+/*----------------------------------组件引入-----------------------------------*/
 import DialogComponent from './dialogComponent'
 import Clone from './clone'
-
-export default defineComponent({
-  components: { DialogComponent, Clone },
-  props: {
-    siteId: Number,
-    activeName: String,
-  },
-  setup(props, { emit }) {
-    const store = useStore()
-    store
-    const fileUrl = ref(window.PLATFROM_CONFIG.baseUrl)
-    const fileList = ref([])
-    const accessToken = ref(store.state.user.accessToken)
-
-    const total = ref(0)
-    const pageSize = ref(15)
-    const currentPage = ref(1)
-    const goSiteListParam = ref('')
-    const platformAreaName = ref('')
-    const pageShow = ref(false)
-
-    const showDialog = ref(false)
-    const tableData = ref([])
-
-    const labelCom = ref(store.state.siteManageLabelCom)
-
-    function goSiteList(params) {
-      goSiteListParam.value = params.id
-      pageShow.value = !pageShow.value
-    }
-    const getMsgFormSon = () => {
-      pageShow.value = !pageShow.value
-    }
-
-    const tableItem = reactive([])
-    const dialogTitle = ref('')
-
-    //监控设备列表
-    function deviceNewsList() {
-      api
-        .deviceNewsList({
-          siteId: props.siteId,
-          size: pageSize.value,
-          current: currentPage.value,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            tableData.value = requset.data.records
-            total.value = requset.data.total
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-
-    // 添加操作
-    // const addItem = () => {
-    //   tableItem.value = {
-    //     platformAreaName: '',
-    //     platformAreaCode: '',
-    //     platformAreaAddress: '',
-    //   }
-    //   dialogTitle.value = '新增'
-    //   showDialog.value = true
-    // }
-
-    // 编辑操作
-    const editRow = (row) => {
-      tableItem.value = {
-        id: row.id,
-        monitorDeviceCode: row.monitorDeviceCode,
-        monitorDeviceName: row.monitorDeviceName,
-        loopMeterAddress: row.loopMeterAddress,
-        ratedVoltage: row.ratedVoltage,
-        ratedCurrent: row.ratedCurrent,
-        currentLoadRate: row.currentLoadRate,
-        siteId: row.siteId,
-        variableListId: row.variableListId,
-        qualityAnalysis: row.qualityAnalysis === '是' ? true : false,
-      }
-      dialogTitle.value = '编辑'
-      showDialog.value = true
-    }
-
-    // 关闭操作
-    const closeDialog = () => {
-      showDialog.value = false
-      deviceNewsList()
-    }
-
-    //删除 是否删除  ---- 是
-    const handleDelete = (row) => {
-      api.deviceNewsDel({ id: row.id }).then((requset) => {
-        if (requset.status === 'SUCCESS') {
-          ElMessage.success({
-            message: '删除成功',
-            type: 'success',
-          })
-          deviceNewsList()
-        } else {
-          ElMessage.error(requset.msg)
-        }
-      })
-    }
-
-    //是否删除  ---- 否
-    const cancelEvent = () => {
-      console.log('cancel!')
-    }
-
-    const handleProgress = (file, fileList) => {
-      file
-      if (
-        !(
-          fileList.raw.type ===
-            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
-          fileList.raw.type === 'application/vnd.ms-excel'
-        )
-      ) {
-        ElMessage({
-          message: '上传文件只能是 xls 和 xlsx 格式!',
-          type: 'error',
-        })
-        return false
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+  siteId: Number,
+  activeName: String,
+}) //数据双向绑定
+const emit = defineEmits([]);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const fileUrl = ref(window.PLATFROM_CONFIG.baseUrl)
+const fileList = ref([])
+const accessToken = ref(store.state.user.accessToken)
+
+const state = reactive({
+  tableData: [],
+  total: 0,
+  pageSize: 15,
+  currentPage: 1
+})
+const { tableData, total, pageSize, currentPage } = toRefs(state)
+
+//监控设备列表
+function deviceNewsList() {
+  api
+    .deviceNewsList({
+      siteId: props.siteId,
+      size: pageSize.value,
+      current: currentPage.value,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        tableData.value = requset.data.records
+        total.value = requset.data.total
       } else {
-        return true
+        ElMessage.error(requset.msg)
       }
+    })
+}
+
+// 添加操作
+// const addItem = () => {
+//   tableItem.value = {
+//     platformAreaName: '',
+//     platformAreaCode: '',
+//     platformAreaAddress: '',
+//   }
+//   dialogTitle.value = '新增'
+//   showDialog.value = true
+// }
+
+// 编辑操作
+function editRow(row) {
+  proxy.$refs['dialogComponentRef'].openDialog({
+    dialogTitle: '编辑',
+    tableItem: {
+      id: row.id,
+      monitorDeviceCode: row.monitorDeviceCode,
+      monitorDeviceName: row.monitorDeviceName,
+      loopMeterAddress: row.loopMeterAddress,
+      ratedVoltage: row.ratedVoltage,
+      ratedCurrent: row.ratedCurrent,
+      currentLoadRate: row.currentLoadRate,
+      siteId: row.siteId,
+      variableListId: row.variableListId,
+      qualityAnalysis: row.qualityAnalysis === '是' ? true : false,
     }
+  })
+}
 
-    const handleUpAvatar = (res, file) => {
-      console.log(res, file)
-      fileList.value = []
+//删除 是否删除  ---- 是
+function handleDelete(row) {
+  api.deviceNewsDel({ id: row.id }).then((requset) => {
+    if (requset.status === 'SUCCESS') {
       ElMessage.success({
-        message: '导入成功',
+        message: '删除成功',
         type: 'success',
       })
       deviceNewsList()
+    } else {
+      ElMessage.error(requset.msg)
     }
-    const handleError = (res) => {
-      let myError = res.toString() //转字符串
-      myError = myError.replace('Error: ', '') //去掉前面的
-      myError = JSON.parse(myError) //转对象
-      ElMessage.error({
-        message: myError.msg,
-        type: 'error',
-      })
-    }
-
-    function goVariableList() {
-      emit('func')
-    }
-
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA;'
-    }
-    const handleSizeChange = (val) => {
-      pageSize.value = val
-      deviceNewsList()
-    }
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
-      deviceNewsList()
-    }
-
-    //导出
-    const DataReportExport = () => {
-      api
-        .deviceAttributeExport({
-          siteId: props.siteId,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data
-            ElMessage.success({
-              message: '导出成功',
-              type: 'success',
-            })
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-
-    //监听变化
-    watch(
-      () => props.siteId,
-      (newVal) => {
-        newVal
-        labelCom.value = store.state.siteManageLabelCom
-        if (props.activeName == 'second') {
-          deviceNewsList()
-        }
-      }
-    )
-    watch(
-      () => props.activeName,
-      (newVal) => {
-        if (newVal == 'second') {
-          deviceNewsList()
-        }
-      }
+  })
+}
+
+//是否删除  ---- 否
+const cancelEvent = () => {
+  console.log('cancel!')
+}
+
+const handleProgress = (file, fileList) => {
+  file
+  if (
+    !(
+      fileList.raw.type ===
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+      fileList.raw.type === 'application/vnd.ms-excel'
     )
-   
-
-    onMounted(() => {
-      if (store.state.goUrl==2) {
-        deviceNewsList()
+  ) {
+    ElMessage({
+      message: '上传文件只能是 xls 和 xlsx 格式!',
+      type: 'error',
+    })
+    return false
+  } else {
+    return true
+  }
+}
+
+const handleUpAvatar = (res, file) => {
+  console.log(res, file)
+  fileList.value = []
+  ElMessage.success({
+    message: '导入成功',
+    type: 'success',
+  })
+  deviceNewsList()
+}
+
+const handleError = (res) => {
+  let myError = res.toString() //转字符串
+  myError = myError.replace('Error: ', '') //去掉前面的
+  myError = JSON.parse(myError) //转对象
+  ElMessage.error({
+    message: myError.msg,
+    type: 'error',
+  })
+}
+
+function goVariableList() {
+  emit('func')
+}
+
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  deviceNewsList()
+}
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  deviceNewsList()
+}
+
+//导出
+const DataReportExport = () => {
+  api
+    .deviceAttributeExport({
+      siteId: props.siteId,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data
+        ElMessage.success({
+          message: '导出成功',
+          type: 'success',
+        })
+      } else {
+        ElMessage.error(requset.msg)
       }
     })
+}
 
-    return {
-      tableData,
-      showDialog,
-
-      platformAreaName,
-      pageShow,
-      dialogTitle,
-
-      props,
-      tableItem,
-      goSiteListParam,
-
-      total,
-      pageSize,
-      currentPage,
-
-      goVariableList,
-
-      deviceNewsList,
-      goSiteList,
-      getMsgFormSon,
-      headClass,
-      // addItem,
-      editRow,
-      closeDialog,
-      handleDelete,
-      cancelEvent,
-
-      handleSizeChange,
-      handleCurrentChange,
-
-      DataReportExport,
-
-      fileList,
-      fileUrl,
-      accessToken,
-      handleProgress,
-      handleUpAvatar,
-      handleError,
-
-      labelCom,
-      store
+watch(
+  () => props.activeName,
+  (newVal) => {
+    if (newVal == 'second' && props.siteId) {
+      deviceNewsList()
     }
-  },
-})
+  }
+)
+
+onMounted(() => { })
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>

src/views/systemManage/rolePermission/index.vue

@@ -4,19 +4,17 @@
     <div class="grid-content treeDom roleLeft">
       <div style="" class="mb-20 addBox">
         <b>角色类型</b>
-        <el-button type="success" @click="addRole()" :disabled="store.state.authorities.indexOf('新增')==-1">新增</el-button>
-        <el-button type="primary" @click="editRole()" :disabled="store.state.authorities.indexOf('修改')==-1">修改</el-button>
+        <el-button type="success" @click="addRole()"
+          :disabled="store.state.authorities.indexOf('新增') == -1">新增</el-button>
+        <el-button type="primary" @click="editRole()"
+          :disabled="store.state.authorities.indexOf('修改') == -1">修改</el-button>
       </div>
       <el-radio-group v-model="radio1">
-        <el-radio-button
-          @change="listTabsChange(radio1, item)"
-          v-for="(item, index) in roleData"
-          :label="item.roleId"
-          :key="index"
-        >
+        <el-radio-button @change="listTabsChange(radio1, item)" v-for="(item, index) in roleData" :label="item.roleId"
+          :key="index">
           <img src="@/assets/images/userIcon.svg" />
           {{ item.roleName }}
-          <i v-if="store.state.authorities.indexOf('删除')!=-1" class="el-icon-delete" @click="deleteRoleItem(item)"></i>
+          <i v-if="store.state.authorities.indexOf('删除') != -1" class="el-icon-delete" @click="deleteRoleItem(item)"></i>
         </el-radio-button>
       </el-radio-group>
     </div>
@@ -24,27 +22,15 @@
 
     <!-- 右侧表格start -->
     <div class="grid-content nestingDom" style="width: calc(100% - 300px)">
-      <role-info-com
-        class="basicInfo"
-        style="height: calc(100vh - 130px)"
-        v-if="menuData.length > 0&&menuData2.length > 0"
-        :menuData="menuData"
-        :menuData2="menuData2"
-        :checkedKeys="checkedKeys"
-        :objItem="objItem"
-        :radio1="radio1"
-      ></role-info-com>
+      <role-info-com class="basicInfo" style="height: calc(100vh - 130px)"
+        v-if="menuData.length > 0 && menuData2.length > 0" :menuData="menuData" :menuData2="menuData2"
+        :checkedKeys="checkedKeys" :objItem="objItem" :radio1="radio1"></role-info-com>
     </div>
     <!-- 右侧表格end -->
 
     <!-- 新建角色start -->
-    <add-role-com
-      :dialog-title="dialogTitle"
-      :itemInfo="tableItem"
-      @closeDialog="closeDialog"
-      :flag="showDialog"
-     
-    ></add-role-com>
+    <add-role-com :dialog-title="dialogTitle" :itemInfo="tableItem" @closeDialog="closeDialog"
+      :flag="showDialog"></add-role-com>
     <!-- 新建角色end -->
   </div>
 </template>
@@ -141,7 +127,7 @@ export default defineComponent({
       getAuthorityTable()
 
     }
-    
+
 
     // 表格树结构渲染
     function roleMenuTreeselect() {
@@ -187,7 +173,7 @@ export default defineComponent({
     //小吉新接口渲染右侧表格树数据
     function getAuthorityTable() {
       menuData2.value = []
-      api.getAuthorityTable({roleId:radio1.value}).then((requset) => {
+      api.getAuthorityTable({ roleId: radio1.value }).then((requset) => {
         if (requset.code == 200) {
           menuData2.value = requset.data
         } else {
@@ -211,7 +197,7 @@ export default defineComponent({
     const closeDialog = () => {
       showDialog.value = false
       roleList()
-      console.log('1111aaa'+radio1.value)
+      console.log('1111aaa' + radio1.value)
     }
     //角色列表
     function roleList() {
@@ -231,7 +217,7 @@ export default defineComponent({
       })
     }
 
- 
+
     onMounted(() => {
 
       roleList()
@@ -259,28 +245,27 @@ export default defineComponent({
       objItem,
       getTreeData2,
       store,
-      
+
     }
   },
 })
 </script>
 
 <style scoped lang="scss">
-.el-button + .el-button {
+.el-button+.el-button {
   margin-left: 0;
 }
-.app-container.page-nesting {
-  padding: 0;
-  background: rgba(0, 0, 0, 0);
-}
+
 .grid-content {
   background: #fff;
   height: calc(100vh - 130px);
   overflow-y: auto;
 }
+
 .el-input__inner {
   border-radius: 20px !important;
 }
+
 .treeDom {
   width: 270px;
   position: absolute;
@@ -289,6 +274,7 @@ export default defineComponent({
   padding: 20px;
   min-height: calc(100vh - 130px);
 }
+
 .nestingDom {
   margin-left: 300px;
 }

vue.config.js

@@ -188,11 +188,6 @@ module.exports = {
                     javascriptEnabled: true,
                     modifyVars: {
                         'vab-color-blue': '#1890ff',
-                        'vab-margin': '20px',
-                        'vab-padding': '20px',
-                        'vab-header-height': '54px',
-                        'vab-breadcrumb-height': '37px',
-                        'vab-public-height': 'calc(100vh - 130px)',
                     },
                 },
             },