设备管理代码优化/BUG修复

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

@@ -3,213 +3,95 @@
     <div class="comTop">
       <div class="comTopLeft">
         <!-- 选择站点:
-        <el-select
-          v-model="store.state.siteId"
-          placeholder="请选择"
-          style="width: 220px; margin-right: 20px"
-        >
-          <el-option
-            v-for="site in store.state.siteList"
-            :key="site"
-            :label="site.siteName"
-            :value="site.id"
-          ></el-option>
+        <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 220px; margin-right: 20px">
+          <el-option v-for="site in store.state.siteList" :key="site" :label="site.siteName" :value="site.id"></el-option>
         </el-select> -->
-        <el-input
-          placeholder="搜索设备名"
-          v-model="filterText"
-          class="comTopLeftInput"
-          style="width: 150px"
-          :disabled="store.state.authorities.indexOf('查询')==-1"
-        >
+        <el-input placeholder="搜索设备名" v-model="filterText" class="comTopLeftInput" style="width: 150px"
+          :disabled="store.state.authorities.indexOf('查询') == -1">
           <!-- <template #suffix>
             <i class="el-icon-search el-input__icon"></i>
           </template> -->
         </el-input>
 
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          class="search-button"
-          @click="Select()"
-          :disabled="store.state.authorities.indexOf('查询')==-1"
-        >
+        <el-button type="primary" icon="el-icon-search" class="search-button" @click="Select()"
+          :disabled="store.state.authorities.indexOf('查询') == -1">
           搜索
         </el-button>
-        <el-button
-          class="search-button"
-          icon="el-icon-plus"
-          type="success"
-          @click="Insert()"
-          :disabled="store.state.authorities.indexOf('新增')==-1"
-        >
+        <el-button class="search-button" icon="el-icon-plus" type="success" @click="Insert()"
+          :disabled="store.state.authorities.indexOf('新增') == -1">
           新增
         </el-button>
-        <a href="./static/伍继通信设备导入模板.xlsx" download class="downloadMb" >模板下载</a>
+        <a href="./static/伍继通信设备导入模板.xlsx" download class="downloadMb">模板下载</a>
       </div>
 
       <div class="comRight">
-        <el-upload
-          class="upload-demo"
-          :action="fileUrl + 'device/deviceImport'"
-          :on-progress="handleProgress"
-          :on-success="handleUpAvatar"
-          :on-error="handleError"
-          multiple
-          :limit="1"
-          :headers="{
+        <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="float: right"
-          :disabled="store.state.authorities.indexOf('导入')==-1"
-        >
-          <el-button size="small" type="primary" :disabled="store.state.authorities.indexOf('导入')==-1">导入</el-button>
+          }" :file-list="fileList" style="float: right" :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>
+        <el-button type="primary" @click="DataReportExport()"
+          :disabled="store.state.authorities.indexOf('导出') == -1">导出</el-button>
       </div>
     </div>
 
     <div class="comContent">
-      <el-table
-        :data="tableData"
-        border
-        stripe
-        :header-cell-style="headClass"
-        :height="Height"
-        v-loading="loading"
-      >
-        <el-table-column
-          prop="deviceStatus"
-          align="center"
-          label="状态"
-          width="50"
-        >
+      <el-table :data="tableData" border stripe :header-cell-style="headClass" :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
-                  ? 'background-color:red'
-                  : 'background-color:#04F21C'
-              "
-            ></el-avatar>
+            <el-avatar class="status" :style="scope.row.deviceStatus == 1
+              ? 'background-color:red'
+              : 'background-color:#04F21C'
+              "></el-avatar>
           </template>
         </el-table-column>
-
-        <el-table-column
-          prop="deviceName"
-          label="设备名称"
-          align="center"
-          width="150"
-        ></el-table-column>
-        <el-table-column
-          prop="deviceCode"
-          label="设备编号"
-          align="center"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="siteName"
-          label="所属站点"
-          align="center"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="statusTime"
-          label="最后通信时间"
-          align="center"
-          min-width="160px"
-        ></el-table-column>
-        <el-table-column
-          prop="offlineDuration"
-          label="离线时长（小时）"
-          align="center"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="onlineDuration"
-          label="在线时长（小时）"
-          align="center"
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="deviceAddress"
-          label="设备地址"
-          align="center"
-          width=""
-        ></el-table-column>
+        <el-table-column prop="deviceName" label="设备名称" align="center" width="150"></el-table-column>
+        <el-table-column prop="deviceCode" label="设备编号" align="center" width=""></el-table-column>
+        <el-table-column prop="siteName" label="所属站点" align="center" width=""></el-table-column>
+        <el-table-column prop="statusTime" label="最后通信时间" align="center" min-width="160px"></el-table-column>
+        <el-table-column prop="offlineDuration" label="离线时长（小时）" align="center" width=""></el-table-column>
+        <el-table-column prop="onlineDuration" label="在线时长（小时）" align="center" width=""></el-table-column>
+        <el-table-column prop="deviceAddress" label="设备地址" align="center" width=""></el-table-column>
         <el-table-column align="center" label="操作" width="200">
           <template #default="scope">
-            <el-button
-              type="text"
-              size="small"
-              style="color: #409eff"
-              @click.prevent="Update(scope.row)"
-              :disabled="store.state.authorities.indexOf('修改')==-1"
-            >
+            <el-button type="text" size="small" style="color: #409eff" @click.prevent="Update(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="confirmEvent(scope.row)"
-              @cancel="cancelEvent"
-            >
+            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon="el-icon-info" icon-color="red"
+              title="确定删除?" @confirm="confirmEvent(scope.row)" @cancel="cancelEvent">
               <template #reference>
-                <el-button type="text" size="small" style="color: red" :disabled="store.state.authorities.indexOf('删除')==-1">
+                <el-button type="text" size="small" style="color: red"
+                  :disabled="store.state.authorities.indexOf('删除') == -1">
                   删除
                 </el-button>
               </template>
             </el-popconfirm>
-            <el-button
-              @click="clone(scope.row)"
-              type="text"
-              size="small"
-              style="color: #409eff"
-    
-            >
+            <el-button @click="clone(scope.row)" type="text" size="small" style="color: #409eff">
               克隆
             </el-button>
           </template>
         </el-table-column>
       </el-table>
       <div class="listPagination">
-        <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>
     </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>
+      <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>
   </div>
 </template>
 <script>
 import { useStore } from 'vuex'
-import { defineComponent, onMounted, ref,watch } from 'vue'
+import { defineComponent, onMounted, ref, watch } from 'vue'
 import insertUpdate from './dialog/insert_update.vue'
 import cloneDialog from './dialog/cloneDialog.vue'
 
@@ -224,7 +106,7 @@ export default defineComponent({
   },
   props: {
     Height: String,
-    activeName:String
+    activeName: String
   },
   setup(props) {
     const store = useStore()
@@ -251,7 +133,7 @@ export default defineComponent({
       if (
         !(
           fileList.raw.type ===
-            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+          'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
           fileList.raw.type === 'application/vnd.ms-excel'
         )
       ) {
@@ -420,7 +302,7 @@ export default defineComponent({
 
 
     onMounted(() => {
-      
+
     })
     return {
       headClass,
@@ -468,32 +350,41 @@ export default defineComponent({
 //first样式
 .communicate {
   margin: 15px;
+
   //顶部左侧样式
   .comTop {
     display: flex;
     height: 32px;
     line-height: 32px;
+
     .comTopLeft {
       width: 70%;
+
       .goBack {
         margin-right: 15px;
       }
+
       .comTopLeftTitle {
         font-size: 14px;
         margin-right: 10px;
       }
+
       .comTopLeftInput {
         width: 15rem;
       }
+
       .el-input__icon {
         color: #409eff;
       }
+
       .el-input__inner:hover {
         border-color: #409eff;
       }
+
       .el-input__inner:focus {
         border-color: #409eff;
       }
+
       .search-button {
         margin-left: 1rem;
       }
@@ -502,12 +393,14 @@ export default defineComponent({
     //顶部右侧样式
     .comRight {
       width: 30%;
+
       button {
         margin-left: 1rem;
         float: right;
       }
     }
   }
+
   .comContent {
     margin-top: 15px;
   }

src/views/deviceManage/powerEquip/deviceDetails.vue

@@ -1,345 +0,0 @@
-<template>
-  <div>
-    <div class="firstTop mb-20">
-      <div class="firstTopLeft">
-        <el-button class="goBack" @click="goBack">返回</el-button>
-
-        选择站点:
-        <el-select
-          v-model="store.state.siteId"
-          placeholder="请选择"
-          style="width: 200px; margin-right: 20px"
-          :disabled="store.state.authorities.indexOf('查询')==-1"
-        >
-          <el-option
-            v-for="site in store.state.siteList"
-            :key="site"
-            :label="site.siteName"
-            :value="site.id"
-            
-          ></el-option>
-        </el-select>
-
-        <!-- <span class="firstTopLeftTitle">设备或编号</span>
-        <el-input
-          placeholder="输入关键字进行过滤"
-          v-model="filterText"
-          class="firstTopLeftInput"
-        ></el-input> -->
-
-         <el-button
-                  type="primary"
-                  icon="el-icon-search"
-                  class="search-button"
-                  @click="listSelect()"
-                  :disabled="store.state.authorities.indexOf('查询')==-1"
-                >
-                  搜索
-                </el-button>
-
-        <!-- <el-button
-          class="search-button"
-          icon="el-icon-plus"
-          type="success"
-          @click="addItem()"
-        >
-          新增
-        </el-button> -->
-      </div>
-    </div>
-
-    <el-table
-      :data="
-        deviceNumData.filter(
-          (data) =>
-            !filter_Text ||
-            data.monitorDeviceName
-              .toLowerCase()
-              .includes(filter_Text.toLowerCase()) ||
-            data.monitorDeviceCode
-              .toLowerCase()
-              .includes(filter_Text.toLowerCase())
-        )
-      "
-      border
-      stripe
-      :header-cell-style="headClass"
-      :height="Height"
-    >
-      <!-- <el-table-column prop="status" align="center" label="状态" width="50">
-        <template #default="scope">
-          <el-avatar
-            class="status"
-            :style="
-              scope.row.status == 1
-                ? 'background-color:red'
-                : 'background-color:#04F21C'
-            "
-          ></el-avatar>
-        </template>
-      </el-table-column> -->
-      <el-table-column
-        prop="monitorDeviceName"
-        label="监控设备名称"
-        align="center"
-        width=""
-      ></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="额定电压"
-        align="center"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="ratedCurrent"
-        label="额定电流"
-        align="center"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="currentLoadRate"
-        label="电流负载率门限"
-        align="center"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="qualityAnalysis"
-        label="电能质量分析"
-        align="center"
-        width=""
-      ></el-table-column>
-      <el-table-column label="操作" align="center" width="150">
-        <template #default="scope">
-          <el-button
-            type="text"
-            size="small"
-            style="color: #409eff"
-            @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"
-          >
-            <template #reference>
-              <el-button type="text" size="small" style="color: red"  :disabled="store.state.authorities.indexOf('删除')==-1">
-                删除
-              </el-button>
-            </template>
-          </el-popconfirm>
-        </template>
-      </el-table-column>
-      <el-table-column label="变量" align="center" width="100">
-        <template #default="scope">
-          <el-button
-            type="text"
-            size="small"
-            style="color: #409eff"
-            @click.prevent="variableList(scope.row)"
-          >
-            变量列表
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <div class="listPagination1">
-      <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>
-
-    <list-Dialog
-      :list_Dialog="listDialogBool"
-      @closeNo="closeNo"
-      :DialogArray="DialogArray"
-    ></list-Dialog>
-  </div>
-</template>
-
-<script>
-import { useStore } from 'vuex'
-import { defineComponent, onMounted, ref, watchEffect } from 'vue'
-import * as api from '@/api/deviceManage/powerEquip/deviceAttribute'
-import { ElMessage } from 'element-plus'
-import listDialog from './powerDialog/listDialog.vue'
-
-export default defineComponent({
-  name: 'powerEquip',
-  components: {
-    listDialog,
-  },
-  emits: ['updateRow', 'closeNo','func'],
-  props: {
-    filter_Text: String,
-    Height: String,
-    refresh: Boolean,
-  },
-  setup(props, { emit }) {
-    const store = useStore()
-    const deviceNumData = ref([]) //列表查询值存储
-    const pageSize = ref(15) //分页
-    const currentPage = ref(1) //分页
-    const total = ref(0) //分页
-
-    const listDialogBool = ref(false)
-    const DialogArray = ref([])
-
-     const goBack = () => {
-       emit('func')
-    
-    }
-
-    //变量列表
-    const variableList = (row) => {
-      DialogArray.value = row
-      listDialogBool.value = true
-    }
-
-    //克隆弹窗关闭
-    const closeNo = (value) => {
-      listDialogBool.value = value
-    }
-
-    //查询
-    function listSelect() {
-      api
-        .deviceNewsList({
-          siteId: store.state.siteId,
-          size: pageSize.value,
-          current: currentPage.value,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            total.value = requset.data.total
-            deviceNumData.value = requset.data.records
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-
-    //删除 是否删除  ---- 是
-    const handleDelete = (row) => {
-      api.deviceNewsDel({ id: row.id }).then((requset) => {
-        if (requset.status === 'SUCCESS') {
-          ElMessage.success({
-            message: '删除成功',
-            type: 'success',
-          })
-          listSelect()
-        } else {
-          ElMessage.error(requset.msg)
-        }
-      })
-    }
-    //是否删除  ---- 否
-    const cancelEvent = () => {
-      console.log('cancel!')
-    }
-    //编辑
-    const editRow = (row) => {
-      emit('updateRow', row)
-      listSelect()
-    }
-
-    watchEffect((fn, options) => {
-      fn, options
-      if (props.refresh == true) {
-        listSelect()
-      }
-    })
-
-    onMounted(() => {
-      listSelect()
-    })
-
-    const handleSizeChange = (val) => {
-      pageSize.value = val
-      listSelect()
-    }
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
-      listSelect()
-    }
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA !important;color: black;'
-    }
-    return {
-      headClass,
-      closeNo,
-      variableList, //变量列表按钮事件
-      editRow, //编辑按钮事件
-      handleDelete, //删除按钮事件
-      deviceNumData, //列表查询值存储
-      cancelEvent,
-
-      DialogArray,
-      listDialogBool,
-
-      currentPage,
-      pageSize,
-      total,
-      handleSizeChange,
-      handleCurrentChange,
-      listSelect,
-      goBack,
-
-      store
-    }
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-//弹出框内容样式
-.dialogOne {
-  div:nth-child(1) {
-    margin-bottom: 30px;
-  }
-  .content {
-    margin-bottom: 20px;
-    span:nth-child(1) {
-      color: red;
-    }
-    .inputer {
-      width: 150px;
-    }
-  }
-}
-.listPagination {
-  margin-top: 15px;
-  margin-bottom: -30px;
-  float: right;
-}
-.listPagination1 {
-  margin-top: 15px;
-  float: right;
-}
-</style>

src/views/deviceManage/powerEquip/index.vue

@@ -1,175 +1,14 @@
 <template>
   <div class="powerEquip">
-    <el-tabs
-      v-model="activeName"
-      type="card"
-      style="background-color: #fff; height: 100%"
-      class="tabsSizeColor"
-    >
-      <el-tab-pane label="电力监测设备" name="powerEquip">
-        <div class="first">
-          <div class="insertBox" v-if="deviceNumData.length == ''">
-            <div class="firstTop">
-              <div class="firstTopLeft ">
-                <!-- 选择站点:
-                <el-select
-                  v-model="store.state.siteId"
-                  placeholder="请选择"
-                  style="width: 150px; margin-right: 20px"
-                >
-                  <el-option
-                    v-for="site in store.state.siteList"
-                    :key="site"
-                    :label="site.siteName"
-                    :value="site.id"
-                  ></el-option>
-                </el-select> -->
-                <div class="filter-item">
-                  <span class="firstTopLeftTitle">站点名称:</span>
-                  <el-input
-                    placeholder="输入关键字进行过滤"
-                    v-model="filterText"
-                    class="firstTopLeftInput"
-                    :disabled="store.state.authorities.indexOf('查询')==-1"
-                  ></el-input>
-                </div>
-                <div class="filter-item">
-                  <span class="firstTopLeftTitle">联系人:</span>
-                  <el-input
-                    v-model="userName"
-                     placeholder="请输入联系人"
-                    class="firstTopLeftInput"
-                    :disabled="store.state.authorities.indexOf('查询')==-1"
-                  ></el-input>
-                </div>
-                <div class="filter-item">
-                  <span class="firstTopLeftTitle">手机号:</span>
-                  <el-input
-                    v-model="phone"
-                     placeholder="请输入手机号码"
-                    class="firstTopLeftInput"
-                    :disabled="store.state.authorities.indexOf('查询')==-1"
-                  ></el-input>
-                </div>
-
-                <el-button
-                  type="primary"
-                  icon="el-icon-search"
-                  class="search-button"
-                  @click="monitorDeviceList()"
-                  :disabled="store.state.authorities.indexOf('查询')==-1"
-                >
-                  搜索
-                </el-button>
-
-                <el-button
-                  class="search-button"
-                  icon="el-icon-plus"
-                  type="success"
-                  @click="addItem()"
-                  :disabled="store.state.authorities.indexOf('新增')==-1"
-                >
-                  新增
-                </el-button>
-              </div>
-            </div>
-
-            <div class="firstContent">
-              <el-table
-                :data="tableData"
-                border
-                stripe
-                :header-cell-style="headClass"
-                :height="Height"
-              >
-                <el-table-column
-                  prop="siteName"
-                  label="站点名称"
-                  align="center"
-                ></el-table-column>
-                <el-table-column
-                  prop="siteAddress"
-                  label="站点地址"
-                  align="center"
-                ></el-table-column>
-                <el-table-column
-                  prop="userName"
-                  label="联系人"
-                  align="center"
-                ></el-table-column>
-                <el-table-column
-                  prop="phone"
-                  label="手机号"
-                  align="center"
-                ></el-table-column>
-                <el-table-column
-                  prop="deviceCount"
-                  label="设备数量"
-                  align="center"
-                  width=""
-                >
-                  <template #default="scope">
-                    <div
-                      style="
-                        margin-right: 15px;
-                        cursor: pointer;
-                        color: #409eff;
-                      "
-                      @click="
-                        deviceNumSelect({
-                          id: scope.row.id,
-                          deviceCount: scope.row.deviceCount,
-                        })
-                      "
-                    >
-                      {{ scope.row.deviceCount }}
-                    </div>
-                  </template>
-                </el-table-column>
-              </el-table>
-              <div class="listPagination1">
-                <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>
-            </div>
-          </div>
-
-          <div class="listBox" v-else>
-            <deviceDetails
-              :filter_Text="filterText"
-              :Height="Height"
-              :refresh="refresh"
-              @updateRow="update"
-              @func="getMsgFormSon"
-            ></deviceDetails>
-          </div>
-
-          <!-- 新增 -->
-          <insert-Dialog
-            :flag="show"
-            :data_list="datalist"
-            :deviceNumDataContent="deviceNumData"
-            :updateTitle="updateTitle"
-            @show="showValue"
-          ></insert-Dialog>
-        </div>
+    <el-tabs v-model="activeName" type="card" style="background-color: #fff; height: 100%" class="tabsSizeColor">
+      <el-tab-pane label="电力监测设备" name="monitoring">
+        <monitoring :Height="Height" :activeName="activeName"></monitoring>
       </el-tab-pane>
       <el-tab-pane label="视频监测设备" name="videoEquip">
-        <video-Equip :Height="Height" :activeName="activeName"></video-Equip>
+        <videoEquip :Height="Height" :activeName="activeName"></videoEquip>
       </el-tab-pane>
       <el-tab-pane label="通信设备" name="communicateEquip">
-        <communicate-Equip
-          :Height="Height"
-          :activeName="activeName"
-        ></communicate-Equip>
+        <communicateEquip :Height="Height" :activeName="activeName"></communicateEquip>
       </el-tab-pane>
       <!-- <el-tab-pane label="通道列表" name="channelList">
         <channel-List :Height="Height"></channel-List>
@@ -177,196 +16,42 @@
     </el-tabs>
   </div>
 </template>
-<script>
-import { useStore } from 'vuex'
-import { defineComponent, ref, reactive, onMounted, watch } from 'vue'
-import deviceDetails from './deviceDetails.vue'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ref, onMounted, watch, getCurrentInstance } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+import monitoring from './monitoring/index.vue'
 import videoEquip from './videoEquip/index.vue'
-import insertDialog from './powerDialog/insertDialog.vue'
 import communicateEquip from './communicateEquip/index.vue'
-// import channelList from './channelList/index.vue'
-
-import * as api from '@/api/deviceManage/powerEquip/deviceAttribute'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'powerEquip',
-  components: {
-    deviceDetails,
-    videoEquip,
-    insertDialog,
-    communicateEquip,
-    // channelList,
-  },
-  props: {},
-  setup() {
-    const store = useStore()
-    const tableData = ref([])
-    const total = ref(0)
-    const pageSize = ref(15)
-    const currentPage = ref(1)
-    const deviceNumData = ref('') //判断设备列表详情是否显示
-    const refresh = ref(false) //设备列表详情table 是否重新调用
-    const activeName = ref('powerEquip')
-    const filterText = ref('')
-    const userName = ref('')
-    const phone = ref('')
-    const show = ref(false)
-    const updateTitle = ref('')
-
-    const datalist = reactive([])
-    //新增 向子组件 参数传递
-    const addItem = () => {
-      refresh.value = false
-      datalist.value = [
-        {
-          monitorDeviceCode: '',
-          monitorDeviceName: '',
-          loopMeterAddress: 1,
-          ratedVoltage: null,
-          ratedCurrent: 1,
-          currentLoadRate: 0,
-          siteId: '',
-          variableListId: 0,
-          qualityAnalysis: true,
-        },
-      ]
-      if (deviceNumData.value.length > 0) {
-        datalist.value[0].siteId = store.state.siteId
-      }
-      updateTitle.value = '新增'
-      show.value = true
-    }
-    //修改 向子组件 参数传递
-    const update = (row) => {
-      datalist.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,
-        },
-      ]
-      updateTitle.value = '修改设备信息'
-      show.value = true
-    }
-    //点击事件 查询设备详情
-    const deviceNumSelect = (data) => {
-      filterText.value = ''
-      if (data.deviceCount != null && data.deviceCount != '') {
-        store.state.siteId = data.id
-        deviceNumData.value = JSON.stringify(data.id)
-      } else {
-        ElMessage({
-          message: '此站点下暂无设备',
-          type: 'warning',
-        })
-      }
-    }
-    //电力监测设备列表
-    function monitorDeviceList() {
-      api
-        .monitorDeviceList({
-          size: pageSize.value,
-          current: currentPage.value,
-          siteName: filterText.value,
-          userName:userName.value,
-          phone:phone.value
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            tableData.value = requset.data.records
-            total.value = requset.data.total
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-    //新增弹窗控制
-    const showValue = (value) => {
-      show.value = value
-      deviceNumData.value != '' ? (refresh.value = true) : monitorDeviceList()
-    }
-    //返回
-    const goBack = () => {
-      deviceNumData.value = ''
-      monitorDeviceList()
-    }
-
-    const handleSizeChange = (val) => {
-      pageSize.value = val
-      monitorDeviceList()
-    }
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
-      monitorDeviceList()
-    }
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([]); emit
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const deviceNumData = ref('') //判断设备列表详情是否显示
+const activeName = ref('monitoring')
+const Height = ref(0)
+
+Height.value = window.innerHeight - 300 + 'px'
+window.addEventListener('resize', () => {
+  Height.value = window.innerHeight - 300 + 'px'
+})
 
-    const getMsgFormSon = () => {
+watch(
+  () => activeName.value,
+  (newVal) => {
+    newVal
+    if (newVal == 'powerEquip') {
+      // deviceNewsList()
       deviceNumData.value = ''
     }
+  }
+)
 
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA !important;color: black;'
-    }
-    const Height = ref(0)
-    Height.value = window.innerHeight - 300 + 'px'
-    window.addEventListener('resize', () => {
-      Height.value = window.innerHeight - 300 + 'px'
-    })
-
-    watch(
-      () => activeName.value,
-      (newVal) => {
-        newVal
-        if (newVal == 'powerEquip') {
-          // deviceNewsList()
-          deviceNumData.value = ''
-        }
-      }
-    )
-
-    onMounted(() => {
-      monitorDeviceList()
-    })
-
-    return {
-      refresh,
-      Height,
-      deviceNumData,
-      tableData,
-      activeName,
-      filterText,
-      userName,
-      phone,
-      show,
-      addItem,
-      update,
-      datalist,
-      deviceNumSelect,
-      showValue,
-      updateTitle,
-      goBack,
-      headClass,
-      monitorDeviceList,
-      store,
-
-      total,
-      pageSize,
-      currentPage,
-      getMsgFormSon,
-      handleSizeChange,
-      handleCurrentChange,
-    }
-  },
-})
+onMounted(() => { })
 </script>
 
 <style lang="scss">
@@ -376,61 +61,25 @@ export default defineComponent({
   // padding: 30px;
   // margin-top: 50px;
 }
-//first样式
-.first {
-  margin: 15px;
-  //顶部左侧样式
-  .firstTop {
-    display: flex;
-    height: 32px;
-    line-height: 32px;
-    .firstTopLeft {
-      width: 100%;
-      .goBack {
-        margin-right: 15px;
-      }
-      .firstTopLeftTitle {
-        font-size: 14px;
-        margin-right: 10px;
-      }
-      .firstTopLeftInput {
-        width: 15rem;
-      }
-      .el-input__icon {
-        color: #409eff;
-      }
-      .el-input__inner:hover {
-        border-color: #409eff;
-      }
-      .el-input__inner:focus {
-        border-color: #409eff;
-      }
-      .search-button {
-        margin-left: 1rem;
-      }
-    }
-  }
-  .firstContent {
-    margin-top: 15px;
-  }
-}
 
 // tab重置样式
-.tabsSizeColor > .el-tabs__header .el-tabs__item {
+.tabsSizeColor>.el-tabs__header .el-tabs__item {
   line-height: 50px;
   height: 50px;
   font-size: 16px;
 }
 
-.tabsSizeColor > .el-tabs__header .el-tabs__item.is-active {
+.tabsSizeColor>.el-tabs__header .el-tabs__item.is-active {
   border-bottom: 2px solid #409eff;
   color: #409eff;
 }
+
 .el-tabs__header {
   margin-bottom: 0;
 }
-.el-tabs--card > .el-tabs__header .el-tabs__item,
-.el-tabs--card > .el-tabs__header .el-tabs__nav {
+
+.el-tabs--card>.el-tabs__header .el-tabs__item,
+.el-tabs--card>.el-tabs__header .el-tabs__nav {
   border: none;
 }
 
@@ -438,11 +87,13 @@ export default defineComponent({
   margin-top: 15px;
   float: right;
 }
-.filter-item{
-  display:inline-block;
-  margin-right:20px;
-  .firstTopLeftInput{
-    width:180px!important
+
+.filter-item {
+  display: inline-block;
+  margin-right: 20px;
+
+  .firstTopLeftInput {
+    width: 180px !important
   }
 }
 </style>

src/views/deviceManage/powerEquip/monitoring/deviceDetails.vue

@@ -0,0 +1,184 @@
+<template>
+  <div>
+    <div class="firstTop mb-20">
+      <div class="firstTopLeft">
+        <el-button class="goBack" @click="emit('func')">返回</el-button>
+
+        选择站点:
+        <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 200px; margin-right: 20px"
+          :disabled="store.state.authorities.indexOf('查询') == -1">
+          <el-option v-for="site in store.state.siteList" :key="site" :label="site.siteName" :value="site.id"></el-option>
+        </el-select>
+
+        <!-- <span class="firstTopLeftTitle">设备或编号</span>
+        <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="firstTopLeftInput"></el-input> -->
+
+        <el-button type="primary" icon="el-icon-search" class="search-button" @click="listSelect()"
+          :disabled="store.state.authorities.indexOf('查询') == -1">
+          搜索
+        </el-button>
+      </div>
+    </div>
+
+    <el-table :data="deviceNumData" border stripe
+      :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }" height="calc(100vh - 310px)">
+      <el-table-column prop="monitorDeviceName" label="监控设备名称" align="center" width=""></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="额定电压" align="center" width=""></el-table-column>
+      <el-table-column prop="ratedCurrent" label="额定电流" align="center" width=""></el-table-column>
+      <el-table-column prop="currentLoadRate" label="电流负载率门限" align="center" width=""></el-table-column>
+      <el-table-column prop="qualityAnalysis" label="电能质量分析" align="center" width=""></el-table-column>
+      <el-table-column label="操作" align="center" width="150">
+        <template #default="scope">
+          <el-button type="text" size="small" style="color: #409eff" @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">
+            <template #reference>
+              <el-button type="text" size="small" style="color: red"
+                :disabled="store.state.authorities.indexOf('删除') == -1">
+                删除
+              </el-button>
+            </template>
+          </el-popconfirm>
+        </template>
+      </el-table-column>
+      <el-table-column label="变量" align="center" width="100">
+        <template #default="scope">
+          <el-button type="text" size="small" style="color: #409eff" @click.prevent="variableList(scope.row)">
+            变量列表
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="listPagination1">
+      <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>
+
+    <listDialog ref="listDialogRef"> </listDialog>
+  </div>
+</template>
+
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { ref, onMounted, watch, getCurrentInstance, watchEffect } from 'vue'
+import { ElMessage } from 'element-plus'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/deviceManage/powerEquip/deviceAttribute'
+/*----------------------------------组件引入-----------------------------------*/
+import listDialog from './listDialog.vue'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits(['updateRow', 'func']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const deviceNumData = ref([]) //列表查询值存储
+const pageSize = ref(15) //分页
+const currentPage = ref(1) //分页
+const total = ref(0) //分页
+
+//变量列表
+function variableList(row) {
+  proxy.$refs["listDialogRef"].openDialog({
+    dialogArray: row,
+  })
+}
+
+//查询
+function listSelect() {
+  api
+    .deviceNewsList({
+      siteId: store.state.siteId,
+      size: pageSize.value,
+      current: currentPage.value,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        total.value = requset.data.total
+        deviceNumData.value = requset.data.records
+      } else {
+        ElMessage.error(requset.msg)
+      }
+    })
+}
+
+//删除 是否删除  ---- 是
+function handleDelete(row) {
+  api.deviceNewsDel({ id: row.id }).then((requset) => {
+    if (requset.status === 'SUCCESS') {
+      ElMessage.success({
+        message: '删除成功',
+        type: 'success',
+      })
+      listSelect()
+    } else {
+      ElMessage.error(requset.msg)
+    }
+  })
+}
+
+//是否删除  ---- 否
+function cancelEvent() {
+  console.log('cancel!')
+}
+
+//编辑
+function editRow(row) {
+  emit('updateRow', row)
+  listSelect()
+}
+
+onMounted(() => {
+  listSelect()
+})
+
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  listSelect()
+}
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  listSelect()
+}
+</script>
+
+<style lang="scss" scoped>
+//弹出框内容样式
+.dialogOne {
+  div:nth-child(1) {
+    margin-bottom: 30px;
+  }
+
+  .content {
+    margin-bottom: 20px;
+
+    span:nth-child(1) {
+      color: red;
+    }
+
+    .inputer {
+      width: 150px;
+    }
+  }
+}
+
+.listPagination {
+  margin-top: 15px;
+  margin-bottom: -30px;
+  float: right;
+}
+
+.listPagination1 {
+  margin-top: 15px;
+  float: right;
+}
+</style>

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

@@ -0,0 +1,227 @@
+<template>
+    <div class="first">
+        <div class="insertBox" v-if="!detailsBool">
+            <div class="firstTop">
+                <div class="firstTopLeft ">
+                    <!-- 选择站点:
+                    <el-select v-model="store.state.siteId" placeholder="请选择" style="width: 150px; margin-right: 20px">
+                        <el-option v-for="site in store.state.siteList" :key="site" :label="site.siteName"
+                            :value="site.id"></el-option>
+                    </el-select> -->
+                    <div class="filter-item">
+                        <span class="firstTopLeftTitle">站点名称:</span>
+                        <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="firstTopLeftInput"
+                            :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
+                    </div>
+                    <div class="filter-item">
+                        <span class="firstTopLeftTitle">联系人:</span>
+                        <el-input v-model="userName" placeholder="请输入联系人" class="firstTopLeftInput"
+                            :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
+                    </div>
+                    <div class="filter-item">
+                        <span class="firstTopLeftTitle">手机号:</span>
+                        <el-input v-model="phone" placeholder="请输入手机号码" class="firstTopLeftInput"
+                            :disabled="store.state.authorities.indexOf('查询') == -1"></el-input>
+                    </div>
+
+                    <el-button type="primary" icon="el-icon-search" class="search-button" @click="monitorDeviceList()"
+                        :disabled="store.state.authorities.indexOf('查询') == -1">
+                        搜索
+                    </el-button>
+                    <el-button class="search-button" icon="el-icon-plus" type="success" @click="addItem()"
+                        :disabled="store.state.authorities.indexOf('新增') == -1">
+                        新增
+                    </el-button>
+                </div>
+            </div>
+
+            <div class="firstContent">
+                <el-table :data="tableData" border stripe
+                    :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }" height="calc(100vh - 300px)">
+                    <el-table-column prop="siteName" label="站点名称" align="center"></el-table-column>
+                    <el-table-column prop="siteAddress" label="站点地址" align="center"></el-table-column>
+                    <el-table-column prop="userName" label="联系人" align="center"></el-table-column>
+                    <el-table-column prop="phone" label="手机号" align="center"></el-table-column>
+                    <el-table-column prop="deviceCount" label="设备数量" align="center" width="">
+                        <template #default="scope">
+                            <div style="  margin-right: 15px; cursor: pointer; color: #409eff; " @click="
+                                deviceNumSelect({ id: scope.row.id, deviceCount: scope.row.deviceCount, })">
+                                {{ scope.row.deviceCount }}
+                            </div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+                <div class="listPagination1">
+                    <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>
+            </div>
+        </div>
+
+        <deviceDetails @updateRow="update" @func="detailsBool = false" v-else>
+        </deviceDetails>
+
+        <!-- 新增 -->
+        <insertDialog ref="insertDialogRef" @handleSelect="monitorDeviceList()">
+        </insertDialog>
+    </div>
+</template>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { ref, onMounted, watch, getCurrentInstance } from 'vue'
+import { ElMessage } from 'element-plus'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/deviceManage/powerEquip/deviceAttribute'
+/*----------------------------------组件引入-----------------------------------*/
+import deviceDetails from './deviceDetails.vue'
+import insertDialog from './insertDialog.vue'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([]); emit
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const phone = ref('')
+const userName = ref('')
+const filterText = ref('')
+const tableData = ref([])
+const total = ref(0)
+const pageSize = ref(15)
+const currentPage = ref(1)
+const detailsBool = ref(false);//判断设备列表详情是否显示
+
+//新增 向子组件 参数传递
+function addItem() {
+    proxy.$refs["insertDialogRef"].openDialog({
+        dialogTitle: "新增",
+        datalist: {
+            monitorDeviceCode: '',
+            monitorDeviceName: '',
+            loopMeterAddress: 1,
+            ratedVoltage: null,
+            ratedCurrent: 1,
+            currentLoadRate: 0,
+            siteId: "",
+            variableListId: 0,
+            qualityAnalysis: true,
+        },
+    })
+}
+//修改 向子组件 参数传递
+function update(row) {
+    proxy.$refs["insertDialogRef"].openDialog({
+        dialogTitle: "修改设备信息",
+        datalist: {
+            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,
+        },
+    })
+}
+//点击事件 查询设备详情
+function deviceNumSelect(data) {
+    filterText.value = ''
+    if (data.deviceCount != null && data.deviceCount != '') {
+        store.state.siteId = data.id
+        detailsBool.value = true
+    } else {
+        ElMessage({
+            message: '此站点下暂无设备',
+            type: 'warning',
+        })
+    }
+}
+//电力监测设备列表
+function monitorDeviceList() {
+    api
+        .monitorDeviceList({
+            size: pageSize.value,
+            current: currentPage.value,
+            siteName: filterText.value,
+            userName: userName.value,
+            phone: phone.value
+        })
+        .then((requset) => {
+            if (requset.status === 'SUCCESS') {
+                tableData.value = requset.data.records
+                total.value = requset.data.total
+            } else {
+                ElMessage.error(requset.msg)
+            }
+        })
+}
+
+const handleSizeChange = (val) => {
+    pageSize.value = val
+    monitorDeviceList()
+}
+const handleCurrentChange = (val) => {
+    currentPage.value = val
+    monitorDeviceList()
+}
+
+onMounted(() => {
+    monitorDeviceList()
+})
+</script>
+<style lang="scss">
+//first样式
+.first {
+    margin: 15px;
+
+    //顶部左侧样式
+    .firstTop {
+        display: flex;
+        height: 32px;
+        line-height: 32px;
+
+        .firstTopLeft {
+            width: 100%;
+
+            .goBack {
+                margin-right: 15px;
+            }
+
+            .firstTopLeftTitle {
+                font-size: 14px;
+                margin-right: 10px;
+            }
+
+            .firstTopLeftInput {
+                width: 15rem;
+            }
+
+            .el-input__icon {
+                color: #409eff;
+            }
+
+            .el-input__inner:hover {
+                border-color: #409eff;
+            }
+
+            .el-input__inner:focus {
+                border-color: #409eff;
+            }
+
+            .search-button {
+                margin-left: 1rem;
+            }
+        }
+    }
+
+    .firstContent {
+        margin-top: 15px;
+    }
+}
+</style>

src/views/deviceManage/powerEquip/monitoring/insertDialog.vue

@@ -0,0 +1,216 @@
+<template>
+  <div class="powerdialog">
+    <el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" width="40%">
+      <div>
+        <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="150px" :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-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 filterable 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="额定电压（kV）：" prop="ratedVoltage">
+            <el-select v-model="form.ratedVoltage" placeholder="请选择额定电压（kV）">
+              <el-option v-for="item in ratedVoltage" :key="item.value" :label="item.label"
+                :value="item.label"></el-option>
+            </el-select>
+            <div class="fontText">(数值为线电压)</div>
+          </el-form-item>
+          <el-form-item label="额定电流（A）:" prop="ratedCurrent">
+            <el-input-number v-model="form.ratedCurrent" controls-position="right"></el-input-number>
+          </el-form-item>
+          <el-form-item label="电流负载率门限：" prop="currentLoadRate">
+            <el-input-number v-model="form.currentLoadRate" controls-position="right" :min="0"
+              :max="100"></el-input-number>
+            <div class="fontText">(0-100之间的数字)</div>
+          </el-form-item>
+          <el-form-item label="设备能力：" prop="qualityAnalysis">
+            <el-checkbox v-model="form.qualityAnalysis" label="电能质量分析"></el-checkbox>
+            <div class="fontText">(如果未勾选，该设备不参与电能质量分析)</div>
+          </el-form-item>
+          <!-- <br />
+          <hr />
+          <br />
+          <el-form-item label="设备类型：" prop="deviceType">
+            <el-input v-model="form.deviceType"></el-input>
+          </el-form-item>
+          <el-form-item label="设备型号：" prop="deviceModel">
+            <el-input v-model="form.deviceModel"></el-input>
+          </el-form-item>
+          <el-form-item label="厂家：" prop="manufactor">
+            <el-input v-model="form.manufactor"></el-input>
+          </el-form-item>
+          <el-form-item label="厂家联系人：" prop="manufactorName">
+            <el-input v-model="form.manufactorName"></el-input>
+          </el-form-item>
+          <el-form-item label="厂家联系联系电话：" prop="manufactorPhone">
+            <el-input v-model="form.manufactorPhone"></el-input>
+          </el-form-item>
+          <el-form-item label="巡检周期：" prop="patrolInsC">
+            <el-input v-model="form.patrolInsC"></el-input>
+          </el-form-item>
+          <el-form-item label="保养周期：" prop="maintenanceC">
+            <el-input v-model="form.maintenanceC"></el-input>
+          </el-form-item>
+          <el-form-item label="投运日期：" prop="operationDate">
+            <el-input v-model="form.operationDate"></el-input>
+          </el-form-item>
+          <el-form-item label="安装位置：" prop="installPosition">
+            <el-input v-model="form.deviceType"></el-input>
+          </el-form-item>
+          <el-form-item label="安装日期：" prop="installDate">
+            <el-input v-model="form.deviceType"></el-input>
+          </el-form-item>
+
+          <br />
+          <br />
+          <br /> -->
+          <div style="text-align: right">
+            <el-button @click="close">取消</el-button>
+            <el-button type="primary" @click="submitForm()">保存</el-button>
+          </div>
+        </el-form>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { ref, onMounted, watch, getCurrentInstance, watchEffect } from 'vue'
+import { ElMessage } from 'element-plus'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/deviceManage/powerEquip/deviceAttribute'
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+  deviceNumDataContent: String,
+}) //数据双向绑定
+const emit = defineEmits(['handleSelect']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const dialogTitle = ref("")
+const dialogVisible = ref(false)
+const form = ref([])
+const ratedVoltage = ref([
+  { label: 0.22, value: 1, },
+  { label: 0.38, value: 2, },
+  { label: 0.6, value: 3, },
+  { label: 6, value: 4, },
+  { label: 10, value: 5, },
+  { label: 20, value: 6, },
+  { label: 35, value: 7, },
+])
+const rules = {
+  monitorDeviceName: [
+    { required: true, message: '名称不能为空', trigger: 'blur', },
+    { min: 3, max: 25, message: '设备名称字段长度应大于3，且小于25', trigger: 'blur', },
+  ],
+  monitorDeviceCode: [
+    { required: true, message: '设备编号不能为空', trigger: 'blur', },
+    { min: 3, max: 25, message: '设备编号字段长度应大于3，且小于25', trigger: 'blur', },
+  ],
+  loopMeterAddress: [
+    { required: true, message: '回路表计地址不能为空', trigger: 'blur', },
+  ],
+  siteId: [
+    { required: true, message: '请选择所属站点', trigger: 'blur', },
+  ],
+  ratedVoltage: [
+    { required: true, message: '请选择额定电压（kV）', trigger: 'blur', },
+  ],
+  ratedCurrent: [
+    { required: true, message: '额定电流（A）', trigger: 'blur', },
+  ],
+  currentLoadRate: [
+    { required: true, message: '电流负载率门限', trigger: 'blur', },
+  ],
+}
+
+
+function submitForm() {
+  proxy.$refs["formInfo"].validate((valid) => {
+    if (valid) {
+      form.value.qualityAnalysis = form.value.qualityAnalysis == true ? (form.value.qualityAnalysis = '是') : (form.value.qualityAnalysis = '否')
+
+      if (props.updateTitle == '新增') {
+        api.deviceNewsAdd(form.value).then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '新增成功',
+              type: 'success',
+            })
+            emit('handleSelect', false)
+            close()
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+      } else {
+        api.deviceNewsUpdate(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
+    }
+  })
+}
+
+function openDialog(item) {
+  dialogTitle.value = item.dialogTitle;
+  dialogVisible.value = true
+  form.value = item.datalist
+}
+
+function close() {
+  proxy.$refs["formInfo"].resetFields()
+  dialogVisible.value = false
+}
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
+<style scoped lang="scss">
+.el-form-item:not(.user-layout .el-form-item) {
+  margin: 0 auto 10px;
+}
+
+.fontText {
+  font-size: 10px;
+  margin-top: -5px;
+  margin-bottom: -15px;
+}
+</style>
+<style>
+.powerdialog .el-form-item--small .el-form-item__content,
+.powerdialog .el-form-item--small .el-form-item__label {
+  line-height: 40px;
+}
+</style>

src/views/deviceManage/powerEquip/monitoring/listDialog.vue

@@ -0,0 +1,187 @@
+<template>
+  <!-- 变量列表 -->
+  <el-dialog v-model="dialogVisible" :title="dialogArray.monitorDeviceName + '的变量列表'" width="70rem" @close="close">
+    <div class="dialogOne" style="overflow: hidden">
+      <el-radio-group v-model="listTabPosition" @change="listTabsChange(listTabPosition)"
+        style="margin-bottom: 15px; display: flex">
+        <el-radio-button label="model" :disabled="store.state.authorities.indexOf('查询') == -1">模拟量</el-radio-button>
+        <el-radio-button label="state" :disabled="store.state.authorities.indexOf('查询') == -1">状态量</el-radio-button>
+        <el-radio-button label="parameter" :disabled="store.state.authorities.indexOf('查询') == -1">参数量</el-radio-button>
+        <!-- <div style="margin-left: 10px">
+          <el-button icon="el-icon-plus" type="success">新增</el-button>
+        </div> -->
+      </el-radio-group>
+
+      <el-input placeholder="搜索变量或编码" v-model="listInputText" style="width: 15rem; margin-bottom: 15px"
+        :disabled="store.state.authorities.indexOf('查询') == -1">
+        <template #suffix>
+          <i class="el-icon-search el-input__icon"></i>
+        </template>
+      </el-input>
+
+      <el-table :data="listNumberData.filter(
+        (data) =>
+          !listInputText ||
+          data.variableName
+            .toLowerCase()
+            .includes(listInputText.toLowerCase()) ||
+          data.variableCoding
+            .toLowerCase()
+            .includes(listInputText.toLowerCase())
+      )
+        " :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }" height="40vh"
+        @selection-change="listSelectionChange" border stripe>
+        <el-table-column type="index" label="序号" align="center" sortable width=""></el-table-column>
+        <el-table-column prop="deviceCode" label="设备编号" sortable width=""></el-table-column>
+        <el-table-column prop="variableName" label="变量名" sortable width=""></el-table-column>
+        <el-table-column prop="variableCoding" label="变量编码" sortable width=""></el-table-column>
+        <el-table-column prop="monitorDeviceName" label="监控设备" sortable width=""></el-table-column>
+        <el-table-column prop="deviceName" label="通信设备" sortable width=""></el-table-column>
+        <el-table-column prop="dataAddress" label="数据地址" sortable 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 label="操作" width="150">
+          <template #default="scope">
+            <el-button type="text" size="small" style="color: #409eff" @click.prevent="listUpdate(scope.row)">
+              修改
+            </el-button>
+            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon="el-icon-info" icon-color="red"
+              title="确定删除?" @confirm="confirmEvent(scope.row)" @cancel="cancelEvent">
+              <template #reference>
+                <el-button type="text" size="small" style="color: red">
+                  删除
+                </el-button>
+              </template>
+            </el-popconfirm>
+          </template>
+        </el-table-column> -->
+      </el-table>
+
+      <div class="listPagination">
+        <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>
+    </div>
+  </el-dialog>
+</template>
+
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { useStore } from 'vuex'
+import { ref, onMounted, watch, getCurrentInstance, watchEffect } from 'vue'
+import { ElMessage } from 'element-plus'
+/*----------------------------------接口引入-----------------------------------*/
+import * as api from '@/api/deviceManage/powerEquip/deviceAttribute'
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits(['updateRow', 'closeNo', 'func']);
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const dialogTitle = ref("")
+const dialogVisible = ref(false)
+const dialogArray = ref({})
+
+const pageSize = ref(15)
+const currentPage = ref(1)
+const total = ref(0)
+
+const multipleSelection = ref([]) //变量列表弹窗复选框值存储
+const listTabPosition = ref('model')
+const listNumberData = ref([]) //变量列表弹窗table值存储
+const listInputText = ref('')
+
+// 弹窗打开
+function openDialog(item) {
+  dialogArray.value = item.dialogArray
+  dialogVisible.value = true
+  listSelect()
+}
+
+//  弹窗关闭
+function close() {
+  dialogVisible.value = false
+}
+
+function listSelect() {
+  api
+    .variableListone({
+      siteId: store.state.siteId,
+      size: pageSize.value,
+      current: currentPage.value,
+      dataArea: listTabPosition.value == 'model' ? 1 : listTabPosition.value == 'state' ? 2 : listTabPosition.value == 'parameter' ? 3 : 0,
+      monitoringEquipment: dialogArray.value.id,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        listNumberData.value = requset.data.records
+        total.value = requset.data.total
+      } else {
+        ElMessage.error(requset.msg)
+      }
+    })
+}
+
+//变量列表弹窗table 复选框change事件
+const listSelectionChange = (val) => {
+  multipleSelection.value = val
+}
+
+//变量列表弹窗tabs切换change事件
+const listTabsChange = (value) => {
+  listTabPosition.value = value
+  listSelect()
+}
+//变量列表弹窗 条数切换change事件
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  listSelect()
+}
+//变量列表弹窗 页数切换change事件
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  listSelect()
+}
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
+
+<style lang="scss" scoped>
+//弹出框内容样式
+.dialogOne {
+  div:nth-child(1) {
+    margin-bottom: 30px;
+  }
+
+  .content {
+    margin-bottom: 20px;
+
+    span:nth-child(1) {
+      color: red;
+    }
+
+    .inputer {
+      width: 150px;
+    }
+  }
+}
+
+.listPagination {
+  margin-top: 15px;
+  margin-bottom: -30px;
+  float: right;
+}
+
+.listPagination1 {
+  margin-top: 15px;
+  float: right;
+}
+</style>

src/views/deviceManage/powerEquip/powerDialog/insertDialog.vue

@@ -1,350 +0,0 @@
-<template>
-  <div class="powerdialog">
-    <el-dialog
-      :title="updateTitle"
-      v-model="dialogVisible"
-      @close="close"
-      @open="open"
-      width="40%"
-    >
-      <div>
-        <el-form
-          ref="formInfo"
-          :model="form"
-          class="demo-form-inline"
-          label-width="150px"
-          :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-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
-            filterable
-              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-select
-              v-model="form.ratedVoltage"
-              placeholder="请选择额定电压（kV）"
-            >
-              <el-option
-                v-for="item in ratedVoltage"
-                :key="item.value"
-                :label="item.label"
-                :value="item.label"
-              ></el-option>
-            </el-select>
-            <div class="fontText">(数值为线电压)</div>
-          </el-form-item>
-          <el-form-item label="额定电流（A）:" prop="ratedCurrent">
-            <el-input-number
-              v-model="form.ratedCurrent"
-              controls-position="right"
-            ></el-input-number>
-          </el-form-item>
-          <el-form-item label="电流负载率门限：" prop="currentLoadRate">
-            <el-input-number
-              v-model="form.currentLoadRate"
-              controls-position="right"
-              :min="0"
-              :max="100"
-            ></el-input-number>
-            <div class="fontText">(0-100之间的数字)</div>
-          </el-form-item>
-          <el-form-item label="设备能力：" prop="qualityAnalysis">
-            <el-checkbox
-              v-model="form.qualityAnalysis"
-              label="电能质量分析"
-            ></el-checkbox>
-            <div class="fontText">(如果未勾选，该设备不参与电能质量分析)</div>
-          </el-form-item>
-          <!-- <br />
-          <hr />
-          <br />
-          <el-form-item label="设备类型：" prop="deviceType">
-            <el-input v-model="form.deviceType"></el-input>
-          </el-form-item>
-          <el-form-item label="设备型号：" prop="deviceModel">
-            <el-input v-model="form.deviceModel"></el-input>
-          </el-form-item>
-          <el-form-item label="厂家：" prop="manufactor">
-            <el-input v-model="form.manufactor"></el-input>
-          </el-form-item>
-          <el-form-item label="厂家联系人：" prop="manufactorName">
-            <el-input v-model="form.manufactorName"></el-input>
-          </el-form-item>
-          <el-form-item label="厂家联系联系电话：" prop="manufactorPhone">
-            <el-input v-model="form.manufactorPhone"></el-input>
-          </el-form-item>
-          <el-form-item label="巡检周期：" prop="patrolInsC">
-            <el-input v-model="form.patrolInsC"></el-input>
-          </el-form-item>
-          <el-form-item label="保养周期：" prop="maintenanceC">
-            <el-input v-model="form.maintenanceC"></el-input>
-          </el-form-item>
-          <el-form-item label="投运日期：" prop="operationDate">
-            <el-input v-model="form.operationDate"></el-input>
-          </el-form-item>
-          <el-form-item label="安装位置：" prop="installPosition">
-            <el-input v-model="form.deviceType"></el-input>
-          </el-form-item>
-          <el-form-item label="安装日期：" prop="installDate">
-            <el-input v-model="form.deviceType"></el-input>
-          </el-form-item>
-
-          <br />
-          <br />
-          <br /> -->
-          <div style="text-align: right">
-            <el-button @click="close">取消</el-button>
-            <el-button type="primary" @click="submitForm()">保存</el-button>
-          </div>
-        </el-form>
-      </div>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { useStore } from 'vuex'
-import { defineComponent, ref, watchEffect } from 'vue'
-import { ElMessage } from 'element-plus'
-import * as api from '@/api/deviceManage/powerEquip/deviceAttribute'
-
-export default defineComponent({
-  name: 'Dialog',
-  props: {
-    flag: Boolean,
-    data_list: Object,
-    updateTitle: String,
-    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.data_list.value[0]
-      siteList.value = store.state.siteList
-    }
-
-    // close(): Dialog弹窗关闭之后做的事
-    const close = () => {
-      resetForm()
-      context.emit('show', false)
-      dialogVisible.value = false
-    }
-
-    function resetForm() {
-      formInfo.value.resetFields()
-    }
-
-    // 保存-修改操作
-    const submitForm = () => {
-      formInfo.value.validate((valid) => {
-        if (valid) {
-          form.value.qualityAnalysis =
-            form.value.qualityAnalysis == true
-              ? (form.value.qualityAnalysis = '是')
-              : (form.value.qualityAnalysis = '否')
-          if (props.updateTitle == '新增') {
-            api.deviceNewsAdd(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '新增成功',
-                  type: 'success',
-                })
-                close()
-              } else {
-                ElMessage.error(requset.msg)
-              }
-            })
-          } else {
-            api.deviceNewsUpdate(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '修改成功',
-                  type: 'success',
-                })
-                close()
-              } else {
-                ElMessage.error(requset.msg)
-              }
-            })
-          }
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    }
-
-    watchEffect((fn, options) => {
-      fn, options
-      dialogVisible.value = props.flag
-    })
-    return {
-      formInfo,
-      siteList,
-      dialogVisible,
-      form,
-      close,
-      open,
-      submitForm,
-      ratedVoltage: ref([
-        {
-          label: 0.22,
-          value: 1,
-        },
-        {
-          label: 0.38,
-          value: 2,
-        },
-        {
-          label: 0.6,
-          value: 3,
-        },
-        {
-          label: 6,
-          value: 4,
-        },
-        {
-          label: 10,
-          value: 5,
-        },
-        {
-          label: 20,
-          value: 6,
-        },
-        {
-          label: 35,
-          value: 7,
-        },
-      ]),
-      rules: {
-        monitorDeviceName: [
-          {
-            required: true,
-            message: '名称不能为空',
-            trigger: 'blur',
-          },
-          {
-            min: 3,
-            max: 25,
-            message: '设备名称字段长度应大于3，且小于25', 
-            trigger: 'blur',
-          },
-        ],
-        monitorDeviceCode: [
-          {
-            required: true,
-            message: '设备编号不能为空',
-            trigger: 'blur',
-          },
-          {
-            min: 3,
-            max: 25,
-            message: '设备编号字段长度应大于3，且小于25',
-            trigger: 'blur',
-          },
-        ],
-        loopMeterAddress: [
-          {
-            required: true,
-            message: '回路表计地址不能为空',
-            trigger: 'blur',
-          },
-        ],
-        siteId: [
-          {
-            required: true,
-            message: '请选择所属站点',
-            trigger: 'blur',
-          },
-        ],
-        ratedVoltage: [
-          {
-            required: true,
-            message: '请选择额定电压（kV）',
-            trigger: 'blur',
-          },
-        ],
-        ratedCurrent: [
-          {
-            required: true,
-            message: '额定电流（A）',
-            trigger: 'blur',
-          },
-        ],
-        currentLoadRate: [
-          {
-            required: true,
-            message: '电流负载率门限',
-            trigger: 'blur',
-          },
-        ],
-      },
-    }
-  },
-})
-</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;
-  margin-bottom: -15px;
-}
-</style>
-<style>
-.powerdialog .el-form-item--small .el-form-item__content,
-.powerdialog .el-form-item--small .el-form-item__label {
-  line-height: 40px;
-}
-</style>

src/views/deviceManage/powerEquip/powerDialog/listDialog.vue

@@ -1,308 +0,0 @@
-<template>
-  <!-- 变量列表 -->
-  <el-dialog
-    v-model="listDialog"
-    :title="DialogArray.monitorDeviceName + '的变量列表'"
-    width="70rem"
-    @close="close"
-    @open="open"
-  >
-    <div class="dialogOne" style="overflow: hidden">
-      <el-radio-group
-        v-model="listTabPosition"
-        @change="listTabsChange(listTabPosition)"
-        style="margin-bottom: 15px; display: flex"
-      >
-        <el-radio-button label="model" :disabled="store.state.authorities.indexOf('查询')==-1">模拟量</el-radio-button>
-        <el-radio-button label="state" :disabled="store.state.authorities.indexOf('查询')==-1">状态量</el-radio-button>
-        <el-radio-button label="parameter" :disabled="store.state.authorities.indexOf('查询')==-1">参数量</el-radio-button>
-        <!-- <div style="margin-left: 10px">
-          <el-button icon="el-icon-plus" type="success">新增</el-button>
-        </div> -->
-      </el-radio-group>
-
-      <el-input
-        placeholder="搜索变量或编码"
-        v-model="listInputText"
-        style="width: 15rem; margin-bottom: 15px"
-        :disabled="store.state.authorities.indexOf('查询')==-1"
-      >
-        <template #suffix>
-          <i class="el-icon-search el-input__icon"></i>
-        </template>
-      </el-input>
-
-      <el-table
-        :data="
-          listNumberData.filter(
-            (data) =>
-              !listInputText ||
-              data.variableName
-                .toLowerCase()
-                .includes(listInputText.toLowerCase()) ||
-              data.variableCoding
-                .toLowerCase()
-                .includes(listInputText.toLowerCase())
-          )
-        "
-        border
-        stripe
-        :header-cell-style="headClass"
-        @selection-change="listSelectionChange"
-      >
-        <el-table-column
-          type="index"
-          label="序号"
-          align="center"
-          sortable
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="deviceCode"
-          label="设备编号"
-          sortable
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="variableName"
-          label="变量名"
-          sortable
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="variableCoding"
-          label="变量编码"
-          sortable
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="monitorDeviceName"
-          label="监控设备"
-          sortable
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="deviceName"
-          label="通信设备"
-          sortable
-          width=""
-        ></el-table-column>
-        <el-table-column
-          prop="dataAddress"
-          label="数据地址"
-          sortable
-          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 label="操作" width="150">
-          <template #default="scope">
-            <el-button
-              type="text"
-              size="small"
-              style="color: #409eff"
-              @click.prevent="listUpdate(scope.row)"
-            >
-              修改
-            </el-button>
-            <el-popconfirm
-              confirm-button-text="是"
-              cancel-button-text="否"
-              icon="el-icon-info"
-              icon-color="red"
-              title="确定删除?"
-              @confirm="confirmEvent(scope.row)"
-              @cancel="cancelEvent"
-            >
-              <template #reference>
-                <el-button type="text" size="small" style="color: red">
-                  删除
-                </el-button>
-              </template>
-            </el-popconfirm>
-          </template>
-        </el-table-column> -->
-      </el-table>
-
-      <div class="listPagination">
-        <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>
-    </div>
-    <template #footer>
-      <span class="dialog-footer">
-        <el-button @click="close">关闭</el-button>
-      </span>
-    </template>
-  </el-dialog>
-</template>
-
-<script>
-import { useStore } from 'vuex'
-import { defineComponent, ref, watchEffect } from 'vue'
-import * as api from '@/api/deviceManage/powerEquip/deviceAttribute'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'powerEquip',
-  emits: ['closeNo'],
-  components: {},
-  props: {
-    list_Dialog: Boolean,
-    DialogArray: Object,
-  },
-  setup(props, context) {
-    const store = useStore()
-
-    const pageSize = ref(15)
-    const currentPage = ref(1)
-    const total = ref(0)
-
-    const multipleSelection = ref([]) //变量列表弹窗复选框值存储
-    const listDialog = ref(false)
-    const listTitleDialog = ref()
-    const listTabPosition = ref('model')
-    const listNumberData = ref([]) //变量列表弹窗table值存储
-
-    //变量列表弹窗table 复选框change事件
-    const listSelectionChange = (val) => {
-      multipleSelection.value = val
-    }
-
-    // open(): Dialog弹窗打开之前做的事
-    const open = () => {
-      listSelect()
-    }
-
-    // close(): Dialog弹窗关闭之后做的事
-    const close = () => {
-      context.emit('closeNo', false)
-      listDialog.value = false
-    }
-   
-
-    function listSelect() {
-      const array = props.DialogArray
-      api
-        .variableListone({
-          siteId: store.state.siteId,
-          size: pageSize.value,
-          current: currentPage.value,
-          dataArea:
-            listTabPosition.value == 'model'
-              ? 1
-              : listTabPosition.value == 'state'
-              ? 2
-              : listTabPosition.value == 'parameter'
-              ? 3
-              : 0,
-          monitoringEquipment: array.id,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            listNumberData.value = requset.data.records
-            total.value = requset.data.total
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-
-    //变量列表弹窗tabs切换change事件
-    const listTabsChange = (value) => {
-      listTabPosition.value = value
-      listSelect()
-    }
-    //变量列表弹窗 条数切换change事件
-    const handleSizeChange = (val) => {
-      pageSize.value = val
-      listSelect()
-    }
-    //变量列表弹窗 页数切换change事件
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
-      listSelect()
-    }
-
-    watchEffect((fn, options) => {
-      fn, options
-      listDialog.value = props.list_Dialog
-    })
-
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA !important;color: black;'
-    }
-    return {
-      open,
-      close,
-      headClass,
-
-      pageSize,
-      currentPage,
-      total,
-      handleSizeChange,
-      handleCurrentChange,
-
-      listSelectionChange, //变量列表
-      listTabsChange, //变量列表tabs切换
-      listDialog,
-      listTitleDialog,
-      listTabPosition,
-
-      listInputText: ref(''), //变量列表input搜索框
-      multipleSelection, //变量列表弹窗复选框值存储
-      listNumberData,
-      store
-    }
-  },
-})
-</script>
-
-<style lang="scss" scoped>
-//弹出框内容样式
-.dialogOne {
-  div:nth-child(1) {
-    margin-bottom: 30px;
-  }
-  .content {
-    margin-bottom: 20px;
-    span:nth-child(1) {
-      color: red;
-    }
-    .inputer {
-      width: 150px;
-    }
-  }
-}
-.listPagination {
-  margin-top: 15px;
-  margin-bottom: -30px;
-  float: right;
-}
-.listPagination1 {
-  margin-top: 15px;
-  float: right;
-}
-</style>

src/views/deviceManage/powerEquip/videoEquip/checkVideo.vue

@@ -1,104 +1,100 @@
 <template>
-  <el-dialog
-    :title="dialogTitle"
-    v-model="dialogVisible"
-    width="600px"
-    @close="closeDialog(0)"
-    @open="open"
-  >
-    <div v-html="randerHtml" style="width: 100%; background: #000"></div>
+  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="600px" @close="closeDialog">
+    <video ref="hlsVideo" class="hlsVideo monitor-height" preload="true" autoplay controls muted v-if="videoUrl"
+      style="width: 100%;height:100%;"></video>
   </el-dialog>
 </template>
 
-<script>
-import { defineComponent, ref, watchEffect } from 'vue'
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ref } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+import Hls from "hls.js";
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([]); emit
+/*----------------------------------变量声明-----------------------------------*/
+const dialogTitle = ref("")
+const dialogVisible = ref(false)
 
-import videojs from 'video.js'
-import 'videojs-contrib-hls'
+const hls = ref("")
+const hlsVideo = ref()
+const videoUrl = ref('')
 
-export default defineComponent({
-  name: 'CheckVideo',
-  emits: ['closeDialog'],
-  props: {
-    flag: Boolean,
-    dialogTitle: String,
-    itemInfo: Object,
-    deviceCode: String,
-  },
-  setup(props, context) {
-    context
-    const dialogVisible = ref(false)
-
-    const videoUrl = ref('')
-    const options = []
-    const player = ref('')
-    const randerHtml = ref('')
+//播放按钮
+function play() {
+  setTimeout(() => {
+    if (Hls.isSupported()) {
+      hls.value = new Hls();
+      hls.value.on(Hls.Events.MANIFEST_PARSED, onManifestParsed);
+      hls.value.on(Hls.Events.ERROR, onError);
+      hls.value.loadSource(videoUrl.value);
+      hls.value.attachMedia(hlsVideo.value);
+    }
+  }, 1)
+}
 
-    // open(): Dialog弹窗打开之前做的事
-    const open = () => {
-      // videoUrl.value = 'http://47.103.74.123/hls/'+props.deviceCode+'.m3u8';
-      videoUrl.value = 'https://iot.usky.cn/hls/' + props.deviceCode + '.m3u8'
-      console.log(videoUrl.value)
-      //  alert(videoUrl.value)
-      // videoUrl.value ='http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8'
+function onManifestParsed() {
+  hlsVideo.value.play();
+}
 
-      window.setTimeout(getVideo, 100)
+function onError(event, data) {
+  if (data.fatal) {
+    switch (data.type) {
+      case Hls.ErrorTypes.NETWORK_ERROR:
+        console.log('网络错误，尝试重新加载...');
+        setTimeout(() => {
+          play()
+        }, 3000)
+        break;
     }
-    function getVideo() {
-      randerHtml.value =
-        '<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" style="width: 100%; min-height: 400px" poster loop="loop" autoplay="autoplay" ></video>'
+  }
+}
 
-      let options = {
-        bigPlayButton: false,
-        textTrackDisplay: false,
-        posterImage: true,
-        errorDisplay: false,
-        controlBar: true,
-        autoplay: true,
-        controls: true,
-        sources: [
-          {
-            src: videoUrl.value,
-            type: 'application/x-mpegURL',
-          },
-        ],
-      }
+function close() {//关闭
+  if (hls.value) {
+    hls.value.off(Hls.Events.ERROR.onERROR);//销毁所有监听器
+    // 停止加载和播放
+    hls.value.stopLoad();        // 停止加载新数据
+    hls.value.detachMedia();     // 解除与视频元素的绑定
 
-      window.setTimeout(function () {
-        player.value = videojs('my-video', options)
-      }, 100)
-    }
+    // 监听销毁完成事件（可选）
+    hls.value.on(Hls.Events.DESTROYED, () => {
+      console.log('HLS 实例已销毁');
+    });
 
-    // 关闭弹框
-    const closeDialog = () => {
-      if (player.value) {
-        player.value.dispose()
-        //  player.value.distory()
-        randerHtml.value = ''
-      }
+    // 销毁 HLS 实例
+    hls.value.destroy();
+    hls.value = null;
+  }
 
-      context.emit('closeDialog', false)
-      dialogVisible.value = false
-    }
+  if (hlsVideo.value) {
+    hlsVideo.value.pause();
+  }
+}
 
-    watchEffect((fn, options) => {
-      fn, options
-      dialogVisible.value = props.flag
-    })
+// 关闭弹框
+const closeDialog = () => {
+  dialogVisible.value = false
+  close()
+}
 
-    return {
-      closeDialog,
-      dialogVisible,
-      options,
-      open,
-      videoUrl,
+/** 打开弹窗 */
+function openDialog(item) {
+  dialogTitle.value = item.dialogTitle;
+  dialogVisible.value = true
 
-      getVideo,
-      player,
-      randerHtml,
-    }
-  },
-})
+  videoUrl.value = 'https://iot.usky.cn/hls/' + item.dialogArray.deviceCode + '.m3u8';
+  play();
+}
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
 </script>
  
 <style scoped lang="scss">
@@ -111,12 +107,8 @@ export default defineComponent({
 .el-form-item__label {
   width: 150px;
 }
+
 .el-form-item__content {
   margin-left: 150px;
 }
-</style>
-<style >
-* {
-  touch-action: pan-y;
-}
 </style>

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

@@ -3,38 +3,19 @@
     <div class="videoTop">
       <div class="videoTopLeft">
         选择站点:
-        <el-select
-          filterable
-          v-model="store.state.siteId"
-          placeholder="请选择"
-          style="width: 250px; margin-right: 20px"
-          :disabled="store.state.authorities.indexOf('查询')==-1"
-        >
-          <el-option
-            v-for="site in store.state.siteList"
-            :key="site"
-            :label="site.siteName"
-            :value="site.id"
-          ></el-option>
+        <el-select filterable v-model="store.state.siteId" placeholder="请选择" style="width: 250px; margin-right: 20px"
+          :disabled="store.state.authorities.indexOf('查询') == -1">
+          <el-option v-for="site in store.state.siteList" :key="site" :label="site.siteName" :value="site.id"></el-option>
         </el-select>
-        <el-input
-          placeholder="搜索设备名"
-          v-model="filterText"
-          class="videoTopLeftInput"
-          :disabled="store.state.authorities.indexOf('查询')==-1"
-        >
+        <el-input placeholder="搜索设备名" v-model="filterText" class="videoTopLeftInput"
+          :disabled="store.state.authorities.indexOf('查询') == -1">
           <!-- <template #suffix>
             <i class="el-icon-search el-input__icon"></i>
           </template> -->
         </el-input>
 
-        <el-button
-          type="primary"
-          icon="el-icon-search"
-          class="search-button"
-          @click="searchData()"
-          :disabled="store.state.authorities.indexOf('查询')==-1"
-        >
+        <el-button type="primary" icon="el-icon-search" class="search-button" @click="searchData()"
+          :disabled="store.state.authorities.indexOf('查询') == -1">
           搜索
         </el-button>
         <!-- <el-button
@@ -54,374 +35,207 @@
     </div>
 
     <div class="videoContent">
-      <el-table
-        :data="tableData"
-        border
-        stripe
-        :header-cell-style="headClass"
-        :height="Height"
-        v-loading="loadingStatus"
-        element-loading-text="摄像头打开中...."
-        element-loading-background="rgba(255, 255, 255, 0.6)"
-      >
-        <el-table-column
-          prop="stationStatus"
-          label="状态"
-          align="center"
-          width="50"
-        >
+      <el-table :data="tableData" border stripe :header-cell-style="{ background: '#FAFAFA !important', color: 'black' }"
+        :height="Height" v-loading="loadingStatus" element-loading-text="摄像头打开中...."
+        element-loading-background="rgba(255, 255, 255, 0.6)">
+        <el-table-column prop="stationStatus" label="状态" align="center" width="50">
           <template #default="scope">
-            <el-avatar
-              class="status"
-              :style="
-                scope.row.ALIVEVALUE == 3
-                  ? 'background-color:#04F21C'
-                  : 'background-color:red'
-              "
-            ></el-avatar>
+            <el-avatar class="status" :style="scope.row.ALIVEVALUE == 3
+              ? 'background-color:#04F21C'
+              : 'background-color:red'
+              "></el-avatar>
           </template>
         </el-table-column>
 
-        <el-table-column
-          prop="deviceName"
-          label="名称"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          prop="deviceCode"
-          label="编号"
-          align="center"
-          width=""
-        ></el-table-column>
-
-        <el-table-column
-          prop="floor"
-          label="楼层"
-          align="center"
-          width="60"
-        ></el-table-column>
-        <el-table-column
-          prop="deviceAddress"
-          label="设备安装位置"
-          align="center"
-          width=""
-        ></el-table-column>
+        <el-table-column prop="deviceName" label="名称" align="center"></el-table-column>
+        <el-table-column prop="deviceCode" label="编号" align="center" width=""></el-table-column>
+
+        <el-table-column prop="floor" label="楼层" align="center" width="60"></el-table-column>
+        <el-table-column prop="deviceAddress" label="设备安装位置" align="center" width=""></el-table-column>
         <el-table-column prop="deviceType" label="设备类型" align="center">
           <template #default="scope">
             {{ scope.row.deviceType == '2' ? '视频监控设备' : '其他' }}
           </template>
         </el-table-column>
-        <el-table-column
-          prop="installTime"
-          label="安装时间"
-          align="center"
-          width="200"
-        ></el-table-column>
-        <el-table-column
-          prop="creator"
-          label="创建人"
-          align="center"
-        ></el-table-column>
-        <el-table-column
-          prop="sim"
-          label="sim卡号"
-          align="center"
-        ></el-table-column>
+        <el-table-column prop="installTime" label="安装时间" align="center" width="200"></el-table-column>
+        <el-table-column prop="creator" label="创建人" align="center"></el-table-column>
+        <el-table-column prop="sim" label="sim卡号" align="center"></el-table-column>
         <el-table-column label="视频画面" align="center" width="150">
-          <template #default="scope" style="text-align: center">
-            <a v-if="scope.row.ALIVEVALUE == 3" @click="open_video(scope.row)">
-              查看
-            </a>
+          <template #default="scope">
+            <a v-if="scope.row.ALIVEVALUE == 3" @click="open_video(scope.row)"> 查看 </a>
             <span v-else style="color: #aaa">--</span>
           </template>
         </el-table-column>
       </el-table>
       <div class="listPagination">
-        <el-pagination
-          v-model:currentPage="currentPage"
-          :page-sizes="[15, 20, 25, 30]"
-          :page-size="15"
-          layout="total, sizes, prev, pager, next, jumper"
-          :total="tableData.length"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          background
-        ></el-pagination>
+        <el-pagination v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="15"
+          layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" @size-change="handleSizeChange"
+          @current-change="handleCurrentChange" background></el-pagination>
       </div>
 
       <!--视频弹框组件开始-----------------------start-->
-      <check-video
-        :dialogTitle="dialogTitle"
-        @closeDialog="closeDialog"
-        :flag="showDialog"
-        :deviceCode="deviceCode"
-      ></check-video>
+      <check-video ref="checkVideoRef"></check-video>
       <!--视频弹框组件结束-----------------------end-->
     </div>
 
     <div></div>
   </div>
 </template>
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import { defineComponent, ref, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, getCurrentInstance } from 'vue'
 import { ElMessage } from 'element-plus'
+/*----------------------------------接口引入-----------------------------------*/
 import * as api from '@/api/deviceManage/videoEquip.js'
+/*----------------------------------组件引入-----------------------------------*/
 import checkVideo from './checkVideo'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
 import axios from 'axios'
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+  Height: String,
+  activeName: String,
+}) //数据双向绑定
+const emit = defineEmits([]); emit
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const total = ref(0)
+const pageSize = ref(15)
+const currentPage = ref(1)
+const filterText = ref('')
+const tableData = ref([])
 
-export default defineComponent({
-  name: 'powerEquip',
-  components: { checkVideo },
-  props: {
-    Height: String,
-    activeName: String,
-  },
-  setup(props) {
-    const store = useStore()
-
-    const dialogTitle = ref('')
-    const showDialog = ref(false)
-
-    const total = ref(0)
-    const pageSize = ref(15)
-    const currentPage = ref(1)
-    const filterText = ref('')
-    // const activeName = 'powerEquip'
-    const tableData = ref([])
-
-    const onLineVideoList = ref([])
-    const openId = ref('')
-    const reCount = ref(0)
-    const count = ref(0)
-    const loadingStatus = ref(false)
-    const timer = ref('')
-    const deviceCode = ref('')
-
-    //查看视频画面
-    const LookUp = (ind, row) => {
-      // alert(2)
-      console.log(ind, row)
-      dialogTitle.value = '查看视频'
-      showDialog.value = true
-    }
-    const handleSizeChange = (val) => {
-      pageSize.value = val
-      videoMonitoringDeviceList()
-    }
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
-      videoMonitoringDeviceList()
-    }
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA !important;color: black;'
-    }
+const onLineVideoList = ref([])
+const reCount = ref(0)
+const loadingStatus = ref(false)
 
-    // 关闭操作
-    const closeDialog = () => {
-      showDialog.value = false
-      // videoMonitoringDeviceList()
-    }
-    function searchData() {
-      loadingStatus.value = false
-      reCount.value = 0
-      openId.value = ''
-      videoMonitoringDeviceList()
-      chk_video()
-    }
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  videoMonitoringDeviceList()
+}
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  videoMonitoringDeviceList()
+}
 
-    //视频列表
-    function videoMonitoringDeviceList() {
-      api
-        .videoMonitoringDeviceList({
-          siteId: store.state.siteId,
-          size: pageSize.value,
-          current: currentPage.value,
-          deviceType: 2,
-          deviceName: filterText.value,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            tableData.value = requset.data.records
-            total.value = requset.data.total
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-    //请求视频cgi数据
-    const chk_video = () => {
-      axios
-        .post(
-          'https://fire.usky.cn:8443/YtIoT/cgi-bin/demo2.cgi',
-          'queryJson:' +
-            JSON.stringify({
-              CMD: 1,
-            }),
-          {
-            headers: {
-              'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
-            },
-          }
-        )
-        .then((response) => {
-          // console.log('response cgi')
-          // console.log(response.data.RESULT.LIST)
-          // console.log(openId.value)
-          onLineVideoList.value = response.data.RESULT.LIST
-
-          if (openId.value.length > 0) {
-            // start
-            // console.log('doododododododo')
-            for (var n = 0; n < onLineVideoList.value.length; n++) {
-              if (openId.value == onLineVideoList.value[n].DEVICE) {
-                // console.log('再次打开摄像头')
-                // console.log(openId.value)
-                // console.log(onLineVideoList.value[n].DEVICE)
-                // console.log(onLineVideoList.value[n].ONAIR)
-                reCount.value++
-                // console.log(reCount.value)
-                if (onLineVideoList.value[n].ONAIR) {
-                  if (++count.value > 2) {
-                    loadingStatus.value = false
-
-                    dialogTitle.value = '查看视频'
-                    showDialog.value = true
-                  } else {
-                    store.state.siteCameraTimer = setTimeout(chk_video, 5000)
-                  }
-                } else {
-                  if (reCount.value > 7) {
-                    loadingStatus.value = false
-                    alert('远程摄像头链接超时，请稍后再试')
-
-                    break
-                  }
-                  store.state.siteCameraTimer = setTimeout(chk_video, 5000)
-                }
-              }
-            }
-            // end
-          } else {
-            for (var i = 0; i < onLineVideoList.value.length; i++) {
-              for (var j = 0; j < tableData.value.length; j++) {
-                if (
-                  onLineVideoList.value[i].DEVICE ==
-                  tableData.value[j].deviceCode
-                ) {
-                  // alert(1)
-                  tableData.value[j].ALIVEVALUE =
-                    onLineVideoList.value[i].ALIVEVALUE
-                }
-              }
-            }
-            // console.log('处理后的，tableData.value')
-            // console.log(tableData.value)
+function searchData() {
+  reCount.value = 0
+  loadingStatus.value = false
+  videoMonitoringDeviceList()
+  initCgi()
+}
+
+//视频列表
+function videoMonitoringDeviceList() {
+  api
+    .videoMonitoringDeviceList({
+      siteId: store.state.siteId,
+      size: pageSize.value,
+      current: currentPage.value,
+      deviceType: 2,
+      deviceName: filterText.value,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        tableData.value = requset.data.records
+        total.value = requset.data.total
+      } else {
+        ElMessage.error(requset.msg)
+      }
+    })
+}
+
+// 初始化cgj
+function initCgi() {
+  axios
+    .post(
+      'https://fire.usky.cn:8443/YtIoT/cgi-bin/demo2.cgi',
+      'queryJson:' +
+      JSON.stringify({ CMD: 1, }),
+      {
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8', },
+      }
+    )
+    .then((response) => {
+      onLineVideoList.value = response.data.RESULT.LIST
+
+      for (var n = 0; n < onLineVideoList.value.length; n++) {
+        for (var j = 0; j < tableData.value.length; j++) {
+          if (onLineVideoList.value[n].DEVICE == tableData.value[j].deviceCode) {
+            tableData.value[j].ALIVEVALUE = onLineVideoList.value[n].ALIVEVALUE
           }
-        })
-        .catch((error) => {
-          console.log(error)
-        })
-    }
+        }
+      }
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+}
+
+// 查看视频
+function open_video(item) {
+  loadingStatus.value = true
 
-    // 查看视频
-    const open_video = (item) => {
-      deviceCode.value = item.deviceCode
-      if (openId.value != item.deviceCode) {
-        openId.value = item.deviceCode
+  axios
+    .post(
+      'https://fire.usky.cn:8443/YtIoT/cgi-bin/demo2.cgi',
+      'queryJson:' +
+      JSON.stringify({
+        CMD: 3,
+        BODY: { DEVICE: item.deviceCode, ACTION: 1, IDX: 7, },
+      }),
+      {
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8', },
       }
+    )
+    .then((response) => {
+      response
+
       for (var n = 0; n < onLineVideoList.value.length; n++) {
-        if (onLineVideoList.value[n].DEVICE == openId.value) {
+        if (onLineVideoList.value[n].DEVICE == item.deviceCode) {
           // console.log('第一次打开时设备及其状态')
-          // console.log(onLineVideoList.value[n].DEVICE)
-          // console.log(openId.value)
-          // console.log(onLineVideoList.value[n].ONAIR)
           if (onLineVideoList.value[n].ONAIR) {
-            dialogTitle.value = '查看视频'
-            showDialog.value = true
+            proxy.$refs["checkVideoRef"].openDialog({
+              dialogTitle: '查看视频',
+              dialogArray: item,
+              onLineVideoList: onLineVideoList.value,
+            })
+            loadingStatus.value = false
             return
+          } else {
+            if (reCount.value >= 7) {
+              reCount.value = 0
+              loadingStatus.value = false
+              alert('远程摄像头链接超时，请稍后再试')
+              break
+            }
+            store.state.siteCameraTimer = setTimeout(() => {
+              initCgi();
+              open_video(item);
+              reCount.value++
+            }, 2000)
           }
         }
       }
-      count.value = 0
-      reCount.value = 0
-      loadingStatus.value = true
-      axios
-        .post(
-          'https://fire.usky.cn:8443/YtIoT/cgi-bin/demo2.cgi',
-          'queryJson:' +
-            JSON.stringify({
-              CMD: 3,
-              BODY: {
-                DEVICE: item.deviceCode,
-                ACTION: 1,
-                IDX: 7,
-              },
-            }),
-          {
-            headers: {
-              'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
-            },
-          }
-        )
-        .then((response) => {
-          response
-          store.state.siteCameraTimer = window.setTimeout(function () {
-            chk_video()
-          }, 5000)
-        })
-
-      // end
-    }
+    })
+}
 
-    watch(
-      () => props.activeName,
-      (newVal) => {
-        // alert(newVal)
-        if (newVal == 'videoEquip') {
-          //  clearTimeOut(timer.value)
-          // window.clearTimeOut() //关闭定时器// alert('关闭定时器?')
-          reCount.value = 0
-          openId.value = ''
-          loadingStatus.value = false
-
-          videoMonitoringDeviceList()
-          chk_video()
-        }
-      }
-    )
 
-    onMounted(() => {})
-
-    return {
-      headClass,
-      LookUp,
-      handleSizeChange,
-      handleCurrentChange,
-      searchData,
-      videoMonitoringDeviceList,
-
-      filterText,
-      tableData,
-      // activeName,
-      currentPage,
-      closeDialog,
-      dialogTitle,
-      showDialog,
-      store,
-      chk_video,
-
-      openId,
-      onLineVideoList,
-      reCount,
-      count,
-      loadingStatus,
-      open_video,
-      timer,
-      deviceCode,
+watch(
+  () => props.activeName,
+  (newVal) => {
+    // alert(newVal)
+    if (newVal == 'videoEquip') {
+      searchData();
     }
-  },
+  }
+)
+
+onMounted(() => {
+  searchData();
 })
 </script>
 
@@ -429,32 +243,41 @@ export default defineComponent({
 //first样式
 .video {
   margin: 15px;
+
   //顶部左侧样式
   .videoTop {
     display: flex;
     height: 32px;
     line-height: 32px;
+
     .videoTopLeft {
       width: 70%;
+
       .goBack {
         margin-right: 15px;
       }
+
       .videoTopLeftTitle {
         font-size: 14px;
         margin-right: 10px;
       }
+
       .videoTopLeftInput {
         width: 15rem;
       }
+
       .el-input__icon {
         color: #409eff;
       }
+
       .el-input__inner:hover {
         border-color: #409eff;
       }
+
       .el-input__inner:focus {
         border-color: #409eff;
       }
+
       .search-button {
         margin-left: 1rem;
       }
@@ -463,12 +286,14 @@ export default defineComponent({
     //顶部右侧样式
     .videoRight {
       width: 30%;
+
       button {
         margin-left: 1rem;
         float: right;
       }
     }
   }
+
   .videoContent {
     margin-top: 15px;
   }

src/views/siteManage/camera/checkVideo.vue

@@ -7,13 +7,12 @@
 
 <script setup>
 /*----------------------------------依赖引入-----------------------------------*/
-import { ref, defineExpose, onUnmounted } from 'vue'
+import { ref } from 'vue'
 /*----------------------------------接口引入-----------------------------------*/
 /*----------------------------------组件引入-----------------------------------*/
 /*----------------------------------store引入-----------------------------------*/
 /*----------------------------------公共方法引入-----------------------------------*/
 import Hls from "hls.js";
-import videojs from 'video.js'
 /*----------------------------------公共变量-----------------------------------*/
 const props = defineProps({}) //数据双向绑定
 const emit = defineEmits([]); emit

src/views/siteManage/camera/index.vue

@@ -91,14 +91,12 @@
     <!-- 分页end -->
 
     <!--弹框组件开始-----------------------start-->
-    <dialog-component ref="dialogComponent" @handleSelect="handle('get')"></dialog-component>
+    <dialog-component ref="dialogComponent" @handleSelect="searchData()"></dialog-component>
     <!--弹框组件开始-----------------------end-->
 
     <!--视频弹框组件开始-----------------------start-->
     <check-video ref="checkVideoRef"></check-video>
     <!--视频弹框组件结束-----------------------end-->
-
-    <input type="hidden" v-model="openId" style="opacity: 0" />
   </div>
 </template>
 
@@ -135,7 +133,6 @@ const accessToken = ref(store.state.user.accessToken)
 const labelCom = ref(store.state.siteManageLabelCom)
 
 const onLineVideoList = ref([])
-const openId = ref('')
 const reCount = ref(0)
 const loadingStatus = ref(false)
 
@@ -222,14 +219,7 @@ const cancelEvent = () => {
 
 //导入
 const handleProgress = (file, fileList) => {
-  file
-  if (
-    !(
-      fileList.raw.type ===
-      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
-      fileList.raw.type === 'application/vnd.ms-excel'
-    )
-  ) {
+  if (!(fileList.raw.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || fileList.raw.type === 'application/vnd.ms-excel')) {
     ElMessage({
       message: '上传文件只能是 xls 和 xlsx 格式!',
       type: 'error',
@@ -239,6 +229,7 @@ const handleProgress = (file, fileList) => {
     return true
   }
 }
+
 const handleUpAvatar = (res, file) => {
   console.log(res, file)
   fileList.value = []
@@ -249,7 +240,7 @@ const handleUpAvatar = (res, file) => {
   videoMonitoringDeviceList()
 }
 
-const handleError = (res) => {
+function handleError(res) {
   let myError = res.toString() //转字符串
   myError = myError.replace('Error: ', '') //去掉前面的
   myError = JSON.parse(myError) //转对象
@@ -260,7 +251,7 @@ const handleError = (res) => {
 }
 
 //导出
-const DataReportExport = () => {
+function DataReportExport() {
   api
     .deviceExport({
       siteId: props.siteId,
@@ -306,7 +297,7 @@ function initCgi() {
 }
 
 // 查看视频
-const open_video = (item) => {
+function open_video(item) {
   loadingStatus.value = true
 
   axios
@@ -353,20 +344,20 @@ const open_video = (item) => {
     })
 }
 
+function searchData() {
+  reCount.value = 0
+  loadingStatus.value = false
+  initCgi();
+  videoMonitoringDeviceList()
+}
+
 //监听变化
 watch(
   () => props.siteId,
   (newVal) => {
-    newVal
-
     labelCom.value = store.state.siteManageLabelCom
     if (props.activeName == 'five') {
-      // window.clearTimeOut() //关闭定时器
-      reCount.value = 0
-      openId.value = ''
-      loadingStatus.value = false
-      initCgi();
-      videoMonitoringDeviceList()
+      searchData()
     }
   }
 )
@@ -374,23 +365,13 @@ watch(
   () => props.activeName,
   (newVal) => {
     if (newVal == 'five') {
-      //  clearTimeOut(timer.value)
-      // window.clearTimeOut() //关闭定时器// alert('关闭定时器?')
-      reCount.value = 0
-      openId.value = ''
-      loadingStatus.value = false
-      initCgi();
-      videoMonitoringDeviceList()
+      searchData()
     }
   }
 )
 
 onMounted(() => {
-  reCount.value = 0
-  openId.value = ''
-  loadingStatus.value = false
-  initCgi();
-  videoMonitoringDeviceList()
+  searchData()
 })
 </script>
 

src/views/siteManage/index.vue

@@ -9,7 +9,12 @@
         >
           添加分组
         </el-button>
-        <el-button v-else type="primary" @click="addGroup()" :disabled="store.state.authorities.indexOf('新增')==-1">
+        <el-button
+          v-else
+          type="primary"
+          @click="addGroup()"
+          :disabled="store.state.authorities.indexOf('新增') == -1"
+        >
           添加分组
         </el-button>
         <el-button
@@ -18,7 +23,14 @@
         >
           添加站点
         </el-button>
-        <el-button v-else type="primary" @click="addSite()" :disabled="store.state.authorities.indexOf('新增')==-1">添加站点</el-button>
+        <el-button
+          v-else
+          type="primary"
+          @click="addSite()"
+          :disabled="store.state.authorities.indexOf('新增') == -1"
+        >
+          添加站点
+        </el-button>
       </div>
       <el-input
         placeholder="输入关键字进行过滤"
@@ -161,392 +173,299 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, ref, reactive, 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'
-
-export default defineComponent({
-  components: {
-    basicInfo,
-    WatchDog,
-    variableList,
-    camera,
-    PowerScore,
-    groupInfoCom,
-    addGroupCom,
-    addSiteCom,
-  },
-  setup() {
-    const store = useStore()
-    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 route = useRoute()
-    let num = route.query.num
-    const data = ref([
-      {
-        label: '所有站点',
-        children: [],
-      },
-    ])
-
-    // const data2 = ref([
-    //   {
-    //     grouping_id: 1,
-    //     id: 1,
-    //     label: '所有站点',
-    //     children: [
-    //       {
-    //         id: 1,
-    //         label: '分组测试1',
-    //          grouping_id: 1,
-    //         children: [
-    //           {
-    //             id: 368,
-    //             label: '测试站点89',
-    //           },
-    //           {
-    //             id: 367,
-    //             label: '测试站点88',
-    //           },
-    //         ],
-    //       },
-    //       {
-    //         grouping_id: 0,
-    //         id: 5,
-    //         label: '中国铁路上海...',
-    //       },
-    //       {
-    //         grouping_id: 0,
-    //         id: 5,
-    //         label: '上海拓石...',
-    //       },
-    //     ],
-    //   },
-    // ])
-    // const defaultProps2 = ref({
-    //   children: 'children',
-    //   label: 'label',
-    // })
-
-    const defaultProps = ref({
-      children: 'children',
-      label: 'label',
-    })
-
-    const getMsgFormSon = () => {
-      activeName.value = 'third'
-    }
-    const getMsgFormSon2 = () => {
-      siteTreeList()
+<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([
+    {
+      label: '所有站点',
+      children: [],
+    },
+  ])
+
+  const defaultProps = ref({
+    children: 'children',
+    label: 'label',
+  })
+
+  const getMsgFormSon = () => {
+    activeName.value = 'third'
+  }
+  const getMsgFormSon2 = () => {
+    siteTreeList()
+    setTimeout(() => {
+      treeLevel.value = 1
+    }, 1000)
+  }
+  //站点基本信息保存后触发
+  const getMsgFormSon3 = (data) => {
+    siteTreeList()
+    setTimeout(() => {
+      tree.value.setCurrentKey(selectNode.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
-    }
-
-    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 = ''
+  }
+  function mouseenter(data) {
+    data.show = true
+  }
+  function mouseleave(data) {
+    data.show = false
+  }
 
-      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
-      }
+  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
     }
-
-    function filterNode(value, data) {
-      if (!value) return true
-      return data.label.indexOf(value) !== -1
+    if (treeLevel.value == 2 && groupingId.value == 0) {
+      // console.log(obj.data)
+      siteId.value = obj.data.id
     }
+  }
 
-    // 异步任务 用于给tree传值
-    const writeValue = (val) => {
-      return tree.value.filter(val)
-    }
-    // 定义 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 }
-    )
+  function filterNode(value, data) {
+    if (!value) return true
+    return data.label.indexOf(value) !== -1
+  }
 
-    // 新建分或站点的关闭操作
-    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
-      }
+  // 异步任务 用于给tree传值
+  const writeValue = (val) => {
+    return tree.value.filter(val)
+  }
+  // 定义 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
     }
+  }
 
-    //站点保存后关闭
-    const getFromSon = (param, param2, param3) => {
-      // alert('站点保存后关闭')
-      siteId.value = param2
-      siteName.value = param
-      groupingId.value = param3
+  //站点保存后关闭
+  const getFromSon = (param, param2, param3) => {
+    // alert('站点保存后关闭')
+    siteId.value = param2
+    siteName.value = param
+    groupingId.value = param3
 
-      flag2.value = true //基本信息显示
-      treeLevel.value = 3 //新建站点  新建分组 按钮不可点击
-    }
+    flag2.value = true //基本信息显示
+    treeLevel.value = 3 //新建站点  新建分组 按钮不可点击
+  }
 
-    //新建分组
-    const tableItem = reactive([])
-    const addGroup = () => {
-      tableItem.value = {
-        groupingName: '',
-      }
-      dialogTitle.value = '新建分组'
-      showDialog.value = true
+  //新建分组
+  const tableItem = ref([])
+  const addGroup = () => {
+    tableItem.value = {
+      groupingName: '',
     }
+    dialogTitle.value = '新建分组'
+    showDialog.value = true
+  }
 
-    //新建站点
-    const addSite = () => {
-      tableItem.value = {
-        id: '',
-        stationName: '',
-        xh: '',
-        userName: '',
-        list: [],
-        done: '',
-        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]
+  //新建站点
+  const addSite = () => {
+    tableItem.value = {
+      id: '',
+      stationName: '',
+      xh: '',
+      userName: '',
+      list: [],
+      done: '',
+      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 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
         }
-      })
-    }
-
-    onMounted(() => {
-      siteTreeList()
+      } else {
+        ElMessage.error(requset.msg)
+      }
     })
+  }
 
-    nextTick(() => {})
-
-    return {
-      showDialog,
-      showDialog2,
-      treeLevel,
-      activeName,
-      filterText,
-      dialogTitle,
-      data,
-      defaultProps,
-      tableItem,
-      groupingId,
-      siteId,
-      labelCom,
-      label,
-      flag2,
-      showTree,
-      tree,
-
-      getFromSon,
-      siteName,
-
-      defaultExpand,
-      getMsgFormSon,
-      getMsgFormSon2,
-      getMsgFormSon3,
-      mouseenter,
-      mouseleave,
-      filterNode,
-      handleNodeClick,
-      closeDialog,
-      addGroup,
-      addSite,
-      remove,
+  onMounted(() => {
+    siteTreeList()
+  })
 
-      selectNode,
-      num,
-      store
-    }
-  },
-})
+  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;
+  .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);
   }
-  .el-button {
-    width: 100px;
+  .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;
+    }
+  }
+  .nestingDom {
+    margin-left: 300px;
   }
-}
-.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>