站点管理视频流拉取功能修复/代码完善

.eslintrc.js

@@ -2,6 +2,7 @@ module.exports = {
   root: true,
   env: {
     node: true,
+    'vue/setup-compiler-macros': true, // 支持Vue3的编译宏
   },
   extends: ['plugin:vue/vue3-essential', 'eslint:recommended', '@vue/prettier'],
   parserOptions: {
@@ -10,11 +11,18 @@ module.exports = {
     sourceType: 'module'
   },
   rules: {
+    'no-unused-vars': 'off',
     "prettier/prettier": "off",
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+    'vue/multi-word-component-names': 'off',
   },
   plugins: [
     'vue' // 启用 Vue 插件
   ],
+  settings: {
+    'vue': {
+      'version': '3.0' // 指定 Vue 版本
+    }
+  }
 }

package.json

@@ -21,16 +21,18 @@
     "default-passive-events": "^2.0.0",
     "echarts": "^5.2.1",
     "element-plus": "^1.1.0-beta.20",
+    "hls.js": "^1.4.12",
     "js-cookie": "^3.0.0-rc.1",
     "mockjs": "^1.1.0",
     "remixicon": "^2.5.0",
-    "hls.js": "^1.4.12",
     "video.js": "^8.23.3",
     "vue": "^3.2.18",
     "vue-router": "^4.0.3",
     "vuex": "^4.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@babel/eslint-parser": "^7.28.0",
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-eslint": "^5.0.8",
     "@vue/cli-service": "^5.0.8",
@@ -42,7 +44,7 @@
     "chokidar": "^3.5.1",
     "eslint": "^7.19.0",
     "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-vue": "^7.5.0",
+    "eslint-plugin-vue": "^9.0.0",
     "filemanager-webpack-plugin": "^6.1.3",
     "image-webpack-loader": "^8.1.0",
     "less": "^4.1.1",
@@ -67,8 +69,7 @@
   },
   "lint-staged": {
     "*.{js,jsx,vue}": [
-      "vue-cli-service lint",
-      "git add"
+      "vue-cli-service lint"
     ]
   }
 }

src/assets/css/index.scss

@@ -77,12 +77,6 @@ div:focus {
     }
 }
 
-ul li {
-    padding: 0;
-    margin: 0;
-    list-style: none
-}
-
 .inOneLine {
     display: inline-block;
     white-space: nowrap;

src/permissions.js

@@ -65,10 +65,10 @@ router.beforeEach(async (to, from, next) => {
                     // 确保 accessRoutes 有效且处理边界情况
                     if (accessRoutes.length > 0) {
                         // 优先使用目标路由 to，若无效则跳转到第一个有效路由
-                        next({ path: to.matched.length > 0 ? to.path : accessRoutes[0].path, replace: true });
+                        next({ path: to.path, replace: true });
                     } else {
                         // 无动态路由时，跳转到默认页（如首页）
-                        next({ path: '/', replace: true });
+                        next({ ...to, replace: true })
                     }
 
                 } catch {

src/views/powerQuality/asseReport/loopReport.vue

@@ -6,37 +6,18 @@
         <div>
           <div class="filter-item">
             选择站点:
-            <el-select
-              v-model="store.state.siteId"
-              placeholder="请选择"
-              style="width: 220px"
-              clearable
-              filterable
-              @change="linkDevice()"
-              :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 v-model="store.state.siteId" placeholder="请选择" style="width: 220px" clearable filterable
+              @change="linkDevice()" :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>
           </div>
           <div class="filter-item" style="margin-right: 20px">
             选择设备:
-            <el-select
-              v-model="deviceCode"
-              placeholder="请选择"
-              style="width: 150px"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            >
-              <el-option
-                v-for="device in deviceList"
-                :key="device"
-                :label="device.deviceName"
-                :value="device.deviceCode"
-              ></el-option>
+            <el-select v-model="deviceCode" placeholder="请选择" style="width: 150px"
+              :disabled="store.state.authorities.indexOf('查询') == -1">
+              <el-option v-for="device in deviceList" :key="device" :label="device.deviceName"
+                :value="device.deviceCode"></el-option>
             </el-select>
           </div>
 
@@ -49,22 +30,12 @@
               style="width: 200px"
             ></el-date-picker> -->
 
-            <el-date-picker
-              v-model="dateTime"
-              placeholder="请选择"
-              style="width: 150px; margin-left: 20px"
-              :clearable="false"
-              :editable="false"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            ></el-date-picker>
+            <el-date-picker v-model="dateTime" placeholder="请选择" style="width: 150px; margin-left: 20px"
+              :clearable="false" :editable="false" :disabled="store.state.authorities.indexOf('查询') == -1"></el-date-picker>
           </div>
 
-          <el-button
-            type="primary"
-            class="search-button"
-            @click="SingleLoopReportData()"
-            :disabled="store.state.authorities.indexOf('查询')==-1"
-          >
+          <el-button type="primary" class="search-button" @click="SingleLoopReportData()"
+            :disabled="store.state.authorities.indexOf('查询') == -1">
             搜索
           </el-button>
         </div>
@@ -76,7 +47,7 @@
     </div>
     <!-- 筛选end -->
 
-    <el-row :gutter="20" >
+    <el-row :gutter="20">
       <el-col :md="24" :lg="14">
         <div class="grid-content bg-purple">
           <div class="blanceChartTit">
@@ -87,12 +58,9 @@
             </span>
           </div>
 
-          <el-row :gutter="20" style="padding: 20px" >
-            <el-col :md="24" :lg="8" v-loading="loading" >
-              <div
-                class="grid-content bg-purple assCard"
-                style="text-align: center"
-              >
+          <el-row :gutter="20" style="padding: 20px">
+            <el-col :md="24" :lg="8" v-loading="loading">
+              <div class="grid-content bg-purple assCard" style="text-align: center">
                 <div class="subTits">A相电压</div>
                 <el-row :gutter="20" style="padding: 0 20px">
                   <el-col :span="12">
@@ -106,27 +74,22 @@
                   <el-col :span="12">
                     <div class="grid-content bg-purple assSmallbox">
                       <div class="assNum greenRate">
-                        {{ getData.qrUa==null ? '-' :getData.qrUa  }}%
+                        {{ getData.qrUa == null ? '-' : getData.qrUa }}%
                       </div>
                       <div class="assTxt">合格率</div>
                     </div>
                   </el-col>
                 </el-row>
-                <el-button
-                  class="banlanceBtn"
-                  round
-                  :type="
-                    getData.uaStatus == true
-                      ? 'primary'
-                      : getData.uaStatus == false
+                <el-button class="banlanceBtn" round :type="getData.uaStatus == true
+                    ? 'primary'
+                    : getData.uaStatus == false
                       ? 'danger'
                       : 'warning'
-                  "
-                >
+                  ">
                   {{
                     getData.uaStatus == true
-                      ? '合格'
-                      : getData.uaStatus == false
+                    ? '合格'
+                    : getData.uaStatus == false
                       ? '不合格'
                       : '暂无结论'
                   }}
@@ -137,8 +100,8 @@
                     <span :class="getData.maxUaStatus ? '' : 'overLimit'">
                       {{
                         getData.maxUaStatus == true
-                          ? '未超限'
-                          : getData.maxUaStatus == false
+                        ? '未超限'
+                        : getData.maxUaStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -149,8 +112,8 @@
                     <span :class="getData.minUaStatus ? '' : 'overLimit'">
                       {{
                         getData.minUaStatus == true
-                          ? '未超限'
-                          : getData.minUaStatus == false
+                        ? '未超限'
+                        : getData.minUaStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -161,8 +124,8 @@
                     <span :class="getData.avgUaStatus ? '' : 'overLimit'">
                       {{
                         getData.avgUaStatus == true
-                          ? '未超限'
-                          : getData.avgUaStatus == false
+                        ? '未超限'
+                        : getData.avgUaStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -172,10 +135,7 @@
               </div>
             </el-col>
             <el-col :md="24" :lg="8" v-loading="loading">
-              <div
-                class="grid-content bg-purple assCard"
-                style="text-align: center"
-              >
+              <div class="grid-content bg-purple assCard" style="text-align: center">
                 <div class="subTits">B相电压</div>
                 <el-row :gutter="20" style="padding: 0 20px">
                   <el-col :span="12">
@@ -189,28 +149,23 @@
                   <el-col :span="12">
                     <div class="grid-content bg-purple assSmallbox">
                       <div class="assNum greenRate">
-                        {{ getData.qrUb==null ? '-' :getData.qrUb  }}%
-                       
+                        {{ getData.qrUb == null ? '-' : getData.qrUb }}%
+
                       </div>
                       <div class="assTxt">合格率</div>
                     </div>
                   </el-col>
                 </el-row>
-                <el-button
-                  class="banlanceBtn"
-                  round
-                  :type="
-                    getData.ubStatus == true
-                      ? 'primary'
-                      : getData.ubStatus == false
+                <el-button class="banlanceBtn" round :type="getData.ubStatus == true
+                    ? 'primary'
+                    : getData.ubStatus == false
                       ? 'danger'
                       : 'warning'
-                  "
-                >
+                  ">
                   {{
                     getData.ubStatus == true
-                      ? '合格'
-                      : getData.ubStatus == false
+                    ? '合格'
+                    : getData.ubStatus == false
                       ? '不合格'
                       : '暂无结论'
                   }}
@@ -221,8 +176,8 @@
                     <span :class="getData.maxUbStatus ? '' : 'overLimit'">
                       {{
                         getData.maxUbStatus == true
-                          ? '未超限'
-                          : getData.maxUbStatus == false
+                        ? '未超限'
+                        : getData.maxUbStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -233,8 +188,8 @@
                     <span :class="getData.minUbStatus ? '' : 'overLimit'">
                       {{
                         getData.minUbStatus == true
-                          ? '未超限'
-                          : getData.minUbStatus == false
+                        ? '未超限'
+                        : getData.minUbStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -245,8 +200,8 @@
                     <span :class="getData.avgUbStatus ? '' : 'overLimit'">
                       {{
                         getData.avgUbStatus == true
-                          ? '未超限'
-                          : getData.avgUbStatus == false
+                        ? '未超限'
+                        : getData.avgUbStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -256,10 +211,7 @@
               </div>
             </el-col>
             <el-col :md="24" :lg="8" v-loading="loading">
-              <div
-                class="grid-content bg-purple assCard"
-                style="text-align: center"
-              >
+              <div class="grid-content bg-purple assCard" style="text-align: center">
                 <div class="subTits">C相电压</div>
                 <el-row :gutter="20" style="padding: 0 20px">
                   <el-col :span="12">
@@ -273,28 +225,23 @@
                   <el-col :span="12">
                     <div class="grid-content bg-purple assSmallbox">
                       <div class="assNum greenRate">
-                        {{ getData.qrUc==null ? '-' :getData.qrUc  }}%
-                      
+                        {{ getData.qrUc == null ? '-' : getData.qrUc }}%
+
                       </div>
                       <div class="assTxt">合格率</div>
                     </div>
                   </el-col>
                 </el-row>
-                <el-button
-                  class="banlanceBtn"
-                  round
-                  :type="
-                    getData.ucStatus == true
-                      ? 'primary'
-                      : getData.ucStatus == false
+                <el-button class="banlanceBtn" round :type="getData.ucStatus == true
+                    ? 'primary'
+                    : getData.ucStatus == false
                       ? 'danger'
                       : 'warning'
-                  "
-                >
+                  ">
                   {{
                     getData.ucStatus == true
-                      ? '合格'
-                      : getData.ucStatus == false
+                    ? '合格'
+                    : getData.ucStatus == false
                       ? '不合格'
                       : '暂无结论'
                   }}
@@ -305,8 +252,8 @@
                     <span :class="getData.maxUcStatus ? '' : 'overLimit'">
                       {{
                         getData.maxUcStatus == true
-                          ? '未超限'
-                          : getData.maxUcStatus == false
+                        ? '未超限'
+                        : getData.maxUcStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -317,8 +264,8 @@
                     <span :class="getData.minUcStatus ? '' : 'overLimit'">
                       {{
                         getData.minUcStatus == true
-                          ? '未超限'
-                          : getData.minUcStatus == false
+                        ? '未超限'
+                        : getData.minUcStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -329,8 +276,8 @@
                     <span :class="getData.avgUcStatus ? '' : 'overLimit'">
                       {{
                         getData.avgUcStatus == true
-                          ? '未超限'
-                          : getData.avgUcStatus == false
+                        ? '未超限'
+                        : getData.avgUcStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -352,10 +299,7 @@
           </div>
           <el-row :gutter="20" style="padding: 20px">
             <el-col :span="24">
-              <div
-                class="grid-content bg-purple assCard"
-                style="text-align: center"
-              >
+              <div class="grid-content bg-purple assCard" style="text-align: center">
                 <div class="subTits">频率</div>
                 <el-row :gutter="20" style="padding: 0 20px">
                   <el-col :span="12">
@@ -370,27 +314,22 @@
                     <div class="grid-content bg-purple assSmallbox">
                       <div class="assNum greenRate">
                         <!-- {{ getData.qrF ? getData.qrF : '-' }}% -->
-                        {{ getData.qrF==null ? '-' :getData.qrF  }}%
+                        {{ getData.qrF == null ? '-' : getData.qrF }}%
                       </div>
                       <div class="assTxt">合格率</div>
                     </div>
                   </el-col>
                 </el-row>
-                <el-button
-                  class="banlanceBtn"
-                  round
-                  :type="
-                    getData.fstatus == true
-                      ? 'primary'
-                      : getData.fstatus == false
+                <el-button class="banlanceBtn" round :type="getData.fstatus == true
+                    ? 'primary'
+                    : getData.fstatus == false
                       ? 'danger'
                       : 'warning'
-                  "
-                >
+                  ">
                   {{
                     getData.fstatus == true
-                      ? '合格'
-                      : getData.fstatus == false
+                    ? '合格'
+                    : getData.fstatus == false
                       ? '不合格'
                       : '暂无结论'
                   }}
@@ -401,8 +340,8 @@
                     <span :class="getData.maxFStatus ? '' : 'overLimit'">
                       {{
                         getData.maxFStatus == true
-                          ? '未超限'
-                          : getData.maxFStatus == false
+                        ? '未超限'
+                        : getData.maxFStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -413,8 +352,8 @@
                     <span :class="getData.minFStatus ? '' : 'overLimit'">
                       {{
                         getData.minFStatus == true
-                          ? '未超限'
-                          : getData.minFStatus == false
+                        ? '未超限'
+                        : getData.minFStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -425,8 +364,8 @@
                     <span :class="getData.avgFStatus ? '' : 'overLimit'">
                       {{
                         getData.avgFStatus == true
-                          ? '未超限'
-                          : getData.avgFStatus == false
+                        ? '未超限'
+                        : getData.avgFStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -443,16 +382,13 @@
           <div class="blanceChartTit">功率因数分析</div>
           <el-row :gutter="20" style="padding: 20px">
             <el-col :span="24">
-              <div
-                class="grid-content bg-purple assCard"
-                style="text-align: center"
-              >
+              <div class="grid-content bg-purple assCard" style="text-align: center">
                 <div class="subTits">功率因数</div>
                 <el-row :gutter="20" style="padding: 0 20px">
                   <el-col :span="24" style="margin-bottom: 20px">
                     <div class="grid-content bg-purple assSmallbox">
                       <div class="assNum">
-                        {{ getData.appraise!=null ? getData.appraise : '-' }}
+                        {{ getData.appraise != null ? getData.appraise : '-' }}
                       </div>
                       <div class="assTxt">考核限值</div>
                     </div>
@@ -460,27 +396,22 @@
                   <el-col :span="24" style="margin-bottom: 20px">
                     <div class="grid-content bg-purple assSmallbox">
                       <div class="assNum greenRate">
-                        {{ getData.cos!=null ? getData.cos : '-' }}
+                        {{ getData.cos != null ? getData.cos : '-' }}
                       </div>
                       <div class="assTxt">数值</div>
                     </div>
                   </el-col>
                 </el-row>
-                <el-button
-                  class="banlanceBtn"
-                  round
-                  :type="
-                    getData.cosStatus == true
-                      ? 'primary'
-                      : getData.cosStatus == false
+                <el-button class="banlanceBtn" round :type="getData.cosStatus == true
+                    ? 'primary'
+                    : getData.cosStatus == false
                       ? 'danger'
                       : 'warning'
-                  "
-                >
+                  ">
                   {{
                     getData.cosStatus == true
-                      ? '合格'
-                      : getData.cosStatus == false
+                    ? '合格'
+                    : getData.cosStatus == false
                       ? '不合格'
                       : '暂无结论'
                   }}
@@ -502,29 +433,15 @@
 
           <el-row :gutter="20" style="padding: 20px">
             <el-col :md="24" :lg="8">
-              <div
-                class="grid-content bg-purple assCard"
-                style="text-align: center"
-              >
+              <div class="grid-content bg-purple assCard" style="text-align: center">
                 <div class="subTits">A相电流谐波畸变率</div>
-                <img
-                  class="noDataImg"
-                  src="@/assets/images/noDataImg.png"
-                  alt=""
-                />
+                <img class="noDataImg" src="@/assets/images/noDataImg.png" alt="" />
               </div>
             </el-col>
             <el-col :md="24" :lg="8">
-              <div
-                class="grid-content bg-purple assCard"
-                style="text-align: center"
-              >
+              <div class="grid-content bg-purple assCard" style="text-align: center">
                 <div class="subTits">B相电流谐波畸变率</div>
-                <img
-                  class="noDataImg"
-                  src="@/assets/images/noDataImg.png"
-                  alt=""
-                />
+                <img class="noDataImg" src="@/assets/images/noDataImg.png" alt="" />
                 <!-- <el-row :gutter="20" style="padding: 0 20px">
                   <el-col :span="12">
                     <div class="grid-content bg-purple assSmallbox">
@@ -559,16 +476,9 @@
               </div>
             </el-col>
             <el-col :md="24" :lg="8">
-              <div
-                class="grid-content bg-purple assCard"
-                style="text-align: center"
-              >
+              <div class="grid-content bg-purple assCard" style="text-align: center">
                 <div class="subTits">C相电流谐波畸变率</div>
-                <img
-                  class="noDataImg"
-                  src="@/assets/images/noDataImg.png"
-                  alt=""
-                />
+                <img class="noDataImg" src="@/assets/images/noDataImg.png" alt="" />
                 <!-- <el-row :gutter="20" style="padding: 0 20px">
                   <el-col :span="12">
                     <div class="grid-content bg-purple assSmallbox">
@@ -613,19 +523,16 @@
           </div>
           <el-row :gutter="20" style="padding: 20px">
             <el-col :span="12">
-              <div
-                class="grid-content bg-purple assCard"
-                style="text-align: center"
-              >
+              <div class="grid-content bg-purple assCard" style="text-align: center">
                 <div class="subTits">电流不平衡度</div>
                 <el-row :gutter="20" style="padding: 0 20px" v-loading="loading">
-                  <el-col :span="12" >
+                  <el-col :span="12">
                     <div class="grid-content bg-purple assSmallbox">
                       <div class="assNum">
                         {{
                           getData.proportionElBalun
-                            ? getData.proportionElBalun
-                            : '-'
+                          ? getData.proportionElBalun
+                          : '-'
                         }}
                       </div>
                       <div class="assTxt">超限数/测点数</div>
@@ -634,27 +541,22 @@
                   <el-col :span="12">
                     <div class="grid-content bg-purple assSmallbox">
                       <div class="assNum greenRate">
-                        {{ getData.qrElBalun==null ? '-' :getData.qrElBalun  }}%
+                        {{ getData.qrElBalun == null ? '-' : getData.qrElBalun }}%
                       </div>
                       <div class="assTxt">合格率</div>
                     </div>
                   </el-col>
                 </el-row>
-                <el-button
-                  class="banlanceBtn"
-                  round
-                  :type="
-                    getData.elBalunStatus == true
-                      ? 'primary'
-                      : getData.elBalunStatus == false
+                <el-button class="banlanceBtn" round :type="getData.elBalunStatus == true
+                    ? 'primary'
+                    : getData.elBalunStatus == false
                       ? 'danger'
                       : 'warning'
-                  "
-                >
+                  ">
                   {{
                     getData.elBalunStatus == true
-                      ? '合格'
-                      : getData.elBalunStatus == false
+                    ? '合格'
+                    : getData.elBalunStatus == false
                       ? '不合格'
                       : '暂无结论'
                   }}
@@ -663,14 +565,14 @@
                   <li>
                     <div>
                       最大值：{{
-                        getData.maxElBalun!=null? getData.maxElBalun : '-'
+                        getData.maxElBalun != null ? getData.maxElBalun : '-'
                       }}
                     </div>
                     <span :class="getData.maxElBalunStatus ? '' : 'overLimit'">
                       {{
                         getData.maxElBalunStatus == true
-                          ? '未超限'
-                          : getData.maxElBalunStatus == false
+                        ? '未超限'
+                        : getData.maxElBalunStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -679,14 +581,14 @@
                   <li>
                     <div>
                       最小值：{{
-                        getData.minElBalun!=null ? getData.minElBalun : '-'
+                        getData.minElBalun != null ? getData.minElBalun : '-'
                       }}
                     </div>
                     <span :class="getData.minElBalunStatus ? '' : 'overLimit'">
                       {{
                         getData.minElBalunStatus == true
-                          ? '未超限'
-                          : getData.minElBalunStatus == false
+                        ? '未超限'
+                        : getData.minElBalunStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -695,14 +597,14 @@
                   <li>
                     <div>
                       平均值：{{
-                        getData.avgElBalun!=null ? getData.avgElBalun : '-'
+                        getData.avgElBalun != null ? getData.avgElBalun : '-'
                       }}
                     </div>
                     <span :class="getData.avgElBalunStatus ? '' : 'overLimit'">
                       {{
                         getData.avgElBalunStatus == true
-                          ? '未超限'
-                          : getData.avgElBalunStatus == false
+                        ? '未超限'
+                        : getData.avgElBalunStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -713,10 +615,7 @@
             </el-col>
 
             <el-col :span="12">
-              <div
-                class="grid-content bg-purple assCard"
-                style="text-align: center"
-              >
+              <div class="grid-content bg-purple assCard" style="text-align: center">
                 <div class="subTits">电压不平衡度</div>
                 <el-row :gutter="20" style="padding: 0 20px" v-loading="loading">
                   <el-col :span="12">
@@ -724,8 +623,8 @@
                       <div class="assNum">
                         {{
                           getData.proportionVtBalun
-                            ? getData.proportionVtBalun
-                            : '-'
+                          ? getData.proportionVtBalun
+                          : '-'
                         }}
                       </div>
                       <div class="assTxt">超限数/测点数</div>
@@ -734,27 +633,22 @@
                   <el-col :span="12">
                     <div class="grid-content bg-purple assSmallbox">
                       <div class="assNum greenRate">
-                        {{ getData.qrVtBalun==null ? '-' :getData.qrVtBalun  }}%
+                        {{ getData.qrVtBalun == null ? '-' : getData.qrVtBalun }}%
                       </div>
                       <div class="assTxt">合格率</div>
                     </div>
                   </el-col>
                 </el-row>
-                <el-button
-                  class="banlanceBtn"
-                  round
-                  :type="
-                    getData.vtBalunStatus == true
-                      ? 'primary'
-                      : getData.vtBalunStatus == false
+                <el-button class="banlanceBtn" round :type="getData.vtBalunStatus == true
+                    ? 'primary'
+                    : getData.vtBalunStatus == false
                       ? 'danger'
                       : 'warning'
-                  "
-                >
+                  ">
                   {{
                     getData.vtBalunStatus == true
-                      ? '合格'
-                      : getData.vtBalunStatus == false
+                    ? '合格'
+                    : getData.vtBalunStatus == false
                       ? '不合格'
                       : '暂无结论'
                   }}
@@ -764,14 +658,14 @@
                   <li>
                     <div>
                       最大值：{{
-                        getData.maxVtBalun!=null ? getData.maxVtBalun : '-'
+                        getData.maxVtBalun != null ? getData.maxVtBalun : '-'
                       }}
                     </div>
                     <span :class="getData.maxVtBalunStatus ? '' : 'overLimit'">
                       {{
                         getData.maxVtBalunStatus == true
-                          ? '未超限'
-                          : getData.maxVtBalunStatus == false
+                        ? '未超限'
+                        : getData.maxVtBalunStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -780,14 +674,14 @@
                   <li>
                     <div>
                       最小值：{{
-                        getData.minVtBalun!=null ? getData.minVtBalun : '-'
+                        getData.minVtBalun != null ? getData.minVtBalun : '-'
                       }}
                     </div>
                     <span :class="getData.minVtBalunStatus ? '' : 'overLimit'">
                       {{
                         getData.minVtBalunStatus == true
-                          ? '未超限'
-                          : getData.minVtBalunStatus == false
+                        ? '未超限'
+                        : getData.minVtBalunStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -796,14 +690,14 @@
                   <li>
                     <div>
                       平均值：{{
-                        getData.avgVtBalun!=null ? getData.avgVtBalun : '-'
+                        getData.avgVtBalun != null ? getData.avgVtBalun : '-'
                       }}
                     </div>
                     <span :class="getData.avgVtBalunStatus ? '' : 'overLimit'">
                       {{
                         getData.avgVtBalunStatus == true
-                          ? '未超限'
-                          : getData.avgVtBalunStatus == false
+                        ? '未超限'
+                        : getData.avgVtBalunStatus == false
                           ? '超限'
                           : '-'
                       }}
@@ -818,11 +712,7 @@
     </el-row>
 
     <!--指标说明弹框组件开始-----------------------start-->
-    <descrip-dialog
-      @closeDialog="closeDialog"
-      :flag="showDialog2"
-      class="descripDialog"
-    ></descrip-dialog>
+    <descrip-dialog @closeDialog="closeDialog" :flag="showDialog2" class="descripDialog"></descrip-dialog>
     <!--指标说明弹框组件结束-----------------------end-->
   </div>
 </template>
@@ -843,7 +733,7 @@ export default defineComponent({
   },
   setup(props) {
     const store = useStore()
-    const loading=ref(false)
+    const loading = ref(false)
     const getData = ref({})
     const showDialog2 = ref(false)
 
@@ -870,7 +760,7 @@ export default defineComponent({
 
     //单回路主页面请求
     function SingleLoopReportData() {
-        loading.value=true
+      loading.value = true
       store.commit('getNowFormatDate', dateTime.value)
       //  time:store.state.dateList,
       // time:'2021-11-01'
@@ -881,14 +771,14 @@ export default defineComponent({
           type: 1,
         })
         .then((requset) => {
-           loading.value=false
+          loading.value = false
           if (requset.status === 'SUCCESS') {
             // console.log('requset.data.uaStatus')
             // console.log(requset.data.uaStatus)
-            
-            if(requset.data==null){
-               ElMessage.warning('暂无数据')
-            }else{
+
+            if (requset.data == null) {
+              ElMessage.warning('暂无数据')
+            } else {
               getData.value = requset.data
 
             }
@@ -947,30 +837,44 @@ export default defineComponent({
 .el-button {
   cursor: default !important;
 }
+
 .el-row {
   margin-bottom: 20px;
+
   &:last-child {
     margin-bottom: 0;
   }
 }
+
 .el-col {
   border-radius: 4px;
 }
+
 .bg-purple-dark {
   border: 1px solid #99a9bf;
 }
+
 .bg-purple {
   border: 1px solid #d3dce6;
 }
+
 .bg-purple-light {
   border: 1px solid #e5e9f2;
 }
+
 .grid-content {
   border-radius: 4px;
   min-height: 36px;
 }
+
 .row-bg {
   padding: 10px 0;
   border: 1px solid #f9fafc;
 }
+
+ul li {
+    padding: 0;
+    margin: 0;
+    list-style: none
+}
 </style>

src/views/powerQuality/realTimeMonitoring/loopMonitor.vue

@@ -6,45 +6,22 @@
         <div>
           <div class="filter-item">
             选择站点:
-            <el-select
-              v-model="store.state.siteId"
-              placeholder="请选择"
-              style="width: 220px"
-              clearable
-              filterable
-              @change="linkDevice()"
-              :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 v-model="store.state.siteId" placeholder="请选择" style="width: 220px" clearable filterable
+              @change="linkDevice()" :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>
           </div>
           <div class="filter-item" style="margin-right: 20px">
             选择设备:
-            <el-select
-              v-model="deviceCode"
-              placeholder="请选择"
-              style="width: 150px"
-              :disabled="store.state.authorities.indexOf('查询')==-1"
-            >
-              <el-option
-                v-for="device in deviceList"
-                :key="device"
-                :label="device.deviceName"
-                :value="device.deviceCode"
-              ></el-option>
+            <el-select v-model="deviceCode" placeholder="请选择" style="width: 150px"
+              :disabled="store.state.authorities.indexOf('查询') == -1">
+              <el-option v-for="device in deviceList" :key="device" :label="device.deviceName"
+                :value="device.deviceCode"></el-option>
             </el-select>
           </div>
-          <el-button
-            type="primary"
-            class="search-button"
-            @click="realScoreOne()"
-            :disabled="store.state.authorities.indexOf('查询')==-1"
-          >
+          <el-button type="primary" class="search-button" @click="realScoreOne()"
+            :disabled="store.state.authorities.indexOf('查询') == -1">
             搜索
           </el-button>
         </div>
@@ -63,26 +40,21 @@
           <div class="blanceChartTit">
             <span>三项不平衡度</span>
           </div>
-          <el-row
-            :gutter="20"
-            style="padding: 20px; border-bottom: 1px solid #d3dce6"
-          >
+          <el-row :gutter="20" style="padding: 20px; border-bottom: 1px solid #d3dce6">
             <el-col :span="12" class="loopUnbanlanceCard">
               <div class="grid-content" style="text-align: center">
                 <loop-radarChart :getData="getData" v-loading="loading"></loop-radarChart>
               </div>
             </el-col>
             <el-col :span="12" class="loopUnbanlanceCard">
-              <div
-                style="
+              <div style="
                   width: 90%;
                   background: #1187ff;
                   margin: 0px auto;
                   text-align: center;
                   color: #fff;
                   padding: 10px 0px;
-                "
-              >
+                ">
                 <div class="mb-10">电压不平衡度</div>
                 <div>{{ getData.vtBalun ? getData.vtBalun * 100 : 0 }}%</div>
               </div>
@@ -118,26 +90,21 @@
             </el-col>
           </el-row>
 
-          <el-row
-            :gutter="20"
-            style="padding: 20px; border-bottom: 1px solid #d3dce6"
-          >
+          <el-row :gutter="20" style="padding: 20px; border-bottom: 1px solid #d3dce6">
             <el-col :span="12" class="loopUnbanlanceCard">
               <div class="grid-content" style="text-align: center">
                 <loop-radarChart2 :getData="getData" v-loading="loading"></loop-radarChart2>
               </div>
             </el-col>
             <el-col :span="12" class="loopUnbanlanceCard">
-              <div
-                style="
+              <div style="
                   width: 90%;
                   background: #1187ff;
                   margin: 0px auto;
                   text-align: center;
                   color: #fff;
                   padding: 10px 0px;
-                "
-              >
+                ">
                 <div class="mb-10">电流不平衡度</div>
                 <div>{{ getData.elBalun ? getData.elBalun * 100 : 0 }}%</div>
               </div>
@@ -204,20 +171,15 @@
     </el-row>
 
     <!--指标说明弹框组件开始-----------------------start-->
-    <descrip-dialog
-      :dialogTitle="dialogTitle"
-      @closeDialog="closeDialog"
-      :flag="showDialog"
-      :siteId="siteId"
-      class="descripDialog"
-    ></descrip-dialog>
+    <descrip-dialog :dialogTitle="dialogTitle" @closeDialog="closeDialog" :flag="showDialog" :siteId="siteId"
+      class="descripDialog"></descrip-dialog>
     <!--指标说明弹框组件结束-----------------------end-->
   </div>
 </template>
 
 <script>
 import { useStore } from 'vuex'
-import { defineComponent, onMounted, ref} from 'vue'
+import { defineComponent, onMounted, ref } from 'vue'
 import loopRadarChart from './loopMonitorComponent/loopRadarChart'
 import loopRadarChart2 from './loopMonitorComponent/loopRadarChart2'
 import harmonicPanel from './loopMonitorComponent/harmonicPanel'
@@ -247,7 +209,7 @@ export default defineComponent({
   },
   setup(props) {
     const store = useStore()
-     const loading=ref(false)
+    const loading = ref(false)
     const getData = ref({})
     const deviceList = ref([])
     const deviceCode = ref('')
@@ -273,18 +235,18 @@ export default defineComponent({
 
     //数据请求
     function realScoreOne() {
-      if(!deviceCode.value){
-        
-          ElNotification({
+      if (!deviceCode.value) {
+
+        ElNotification({
           title: '提示',
           message: '请选择左侧设备信息',
           type: 'warning',
         })
         return
       }
-       loading.value=true
+      loading.value = true
       api.realScoreOne({ deviceCode: deviceCode.value }).then((requset) => {
-        loading.value=false
+        loading.value = false
         if (requset.status === 'SUCCESS') {
           getData.value = requset.data
         } else {
@@ -304,18 +266,18 @@ export default defineComponent({
     const closeDialog = () => {
       showDialog.value = false
     }
-    
+
 
     onMounted(() => {
-        deviceSelect()
-  
-       if (props.activeName == 'second') {
-          setTimeout(function () {
-            realScoreOne()
-           
-          }, 1000)
-        }
-     
+      deviceSelect()
+
+      if (props.activeName == 'second') {
+        setTimeout(function () {
+          realScoreOne()
+
+        }, 1000)
+      }
+
     })
     return {
       store,
@@ -339,28 +301,41 @@ export default defineComponent({
 <style lang="scss" scoped>
 .el-row {
   margin-bottom: 20px;
+
   &:last-child {
     margin-bottom: 0;
   }
 }
+
 .el-col {
   border-radius: 4px;
 }
+
 .bg-purple-dark {
   border: 1px solid #99a9bf;
 }
+
 .bg-purple {
   border: 1px solid #d3dce6;
 }
+
 .bg-purple-light {
   border: 1px solid #e5e9f2;
 }
+
 .grid-content {
   border-radius: 4px;
   min-height: 36px;
 }
+
 .row-bg {
   padding: 10px 0;
   border: 1px solid #f9fafc;
 }
+
+ul li {
+  padding: 0;
+  margin: 0;
+  list-style: none
+}
 </style>

src/views/siteManage/camera/checkVideo.vue

@@ -1,106 +1,101 @@
 <template>
-  <el-dialog
-    :title="dialogTitle"
-    v-model="dialogVisible"
-    width="600px"
-    @close="closeDialog(0)"
-    @open="open"
-  >
-
-    <div
-      v-html="randerHtml"
-      style="width: 100%; height: 400px; 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, defineExpose, onUnmounted } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+import Hls from "hls.js";
 import videojs from 'video.js'
-import 'videojs-contrib-hls'
-
-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('')
-
-    // 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';
-      // videoUrl.value ='http://cctvalih5ca.v.myalicdn.com/live/cctv1_2/index.m3u8'
-      window.setTimeout(getVideo, 100)
-
+/*----------------------------------公共变量-----------------------------------*/
+const props = defineProps({}) //数据双向绑定
+const emit = defineEmits([]); emit
+/*----------------------------------变量声明-----------------------------------*/
+const dialogTitle = ref("")
+const dialogVisible = ref(false)
+
+const hls = ref("")
+const hlsVideo = ref()
+const videoUrl = 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);
     }
-    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>'
+  }, 1)
+}
 
-      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 onManifestParsed() {
+  hlsVideo.value.play();
+}
 
-      window.setTimeout(function () {
-        player.value = videojs('my-video', options)
-      }, 100)
+function onError(event, data) {
+  if (data.fatal) {
+    switch (data.type) {
+      case Hls.ErrorTypes.NETWORK_ERROR:
+        console.log('网络错误，尝试重新加载...');
+        setTimeout(() => {
+          play()
+        }, 3000)
+        break;
     }
+  }
+}
 
-    // 关闭弹框
-    const closeDialog = () => {
-      if (player.value) {
-        player.value.dispose()
-        randerHtml.value = ''
-      }
+function close() {//关闭
+  if (hls.value) {
+    hls.value.off(Hls.Events.ERROR.onERROR);//销毁所有监听器
+    // 停止加载和播放
+    hls.value.stopLoad();        // 停止加载新数据
+    hls.value.detachMedia();     // 解除与视频元素的绑定
+
+    // 监听销毁完成事件（可选）
+    hls.value.on(Hls.Events.DESTROYED, () => {
+      console.log('HLS 实例已销毁');
+    });
+
+    // 销毁 HLS 实例
+    hls.value.destroy();
+    hls.value = null;
+  }
+
+  if (hlsVideo.value) {
+    hlsVideo.value.pause();
+  }
+}
 
-      context.emit('closeDialog', false)
-      dialogVisible.value = false
-    }
+// 关闭弹框
+const closeDialog = () => {
+  dialogVisible.value = false
+  close()
+}
 
-    watchEffect((fn, options) => {
-      fn, options
-      dialogVisible.value = props.flag
-    })
+/** 打开弹窗 */
+function openDialog(item) {
+  dialogTitle.value = item.dialogTitle;
+  dialogVisible.value = true
 
-    return {
-      closeDialog,
-      dialogVisible,
-      options,
-      open,
-      videoUrl,
+  videoUrl.value = 'https://iot.usky.cn/hls/' + item.dialogArray.deviceCode + '.m3u8';
+  play();
+}
 
-      getVideo,
-      player,
-      randerHtml,
-    }
-  },
-})
+// 暴露变量
+defineExpose({
+  openDialog,
+});
 </script>
  
 <style scoped lang="scss">
@@ -113,6 +108,7 @@ export default defineComponent({
 .el-form-item__label {
   width: 150px;
 }
+
 .el-form-item__content {
   margin-left: 150px;
 }

src/views/siteManage/camera/clone.vue

@@ -1,28 +1,16 @@
 <template>
   <transition name="dialog-fade">
-    <el-dialog
-      v-if="showDialog"
-      :title="dialogTitle"
-      class="dialog-component"
-      v-model="showDialog"
-      width="640px"
-      @close="closeDialog(0)"
-    >
-      <el-form
-        ref="formInfo"
-        :model="formInfo"
-        class="demo-form-inline"
-        label-width="100px"
-        :rules="rules"
-      >
+    <el-dialog v-if="showDialog" :title="dialogTitle" class="dialog-component" v-model="showDialog" width="640px"
+      @close="closeDialog(0)">
+      <el-form ref="formInfo" :model="formInfo" class="demo-form-inline" label-width="100px" :rules="rules">
         <el-form-item label="克隆设备对象:" prop="watchName">
           <el-input v-model="formInfo.watchName"></el-input>
         </el-form-item>
         <el-form-item label="变量克隆至:" prop="ability">
-           <el-radio-group v-model="formInfo.resource">
-                <el-radio label="新设备"></el-radio>
-                <el-radio label="已有设备"></el-radio>
-              </el-radio-group>
+          <el-radio-group v-model="formInfo.resource">
+            <el-radio label="新设备"></el-radio>
+            <el-radio label="已有设备"></el-radio>
+          </el-radio-group>
         </el-form-item>
         <el-form-item label="设备名：" prop="stationAddress">
           <el-input v-model="formInfo.ratedCurrent"></el-input>
@@ -30,12 +18,10 @@
         <el-form-item label="设备编号：" prop="watchCode">
           <el-input v-model="formInfo.watchCode"></el-input>
         </el-form-item>
- 
-        <div class="sublitArea" >
+
+        <div class="sublitArea">
           <el-button @click="closeDialog(0)">取消</el-button>
-          <el-button type="primary" @click="submitForm('formInfo')"
-            >保存</el-button
-          >
+          <el-button type="primary" @click="submitForm('formInfo')">保存</el-button>
         </div>
       </el-form>
     </el-dialog>
@@ -43,10 +29,6 @@
 </template>
 
 <script>
-
-
-
-
 export default {
   name: "Clone",
   props: {
@@ -63,59 +45,32 @@ export default {
   },
   data() {
     return {
-       checked: true,
+      checked: true,
       showDialog: false,
       formInfo: JSON.parse(JSON.stringify(this.itemInfo)),
       options: [
-        {
-          value: "选项1",
-          label: "站点一",
-        },
-        {
-          value: "选项2",
-          label: "站点二",
-        },
-        {
-          value: "选项3",
-          label: "站点三",
-        },
-        {
-          value: "选项4",
-          label: "站点四",
-        },
-        {
-          value: "选项5",
-          label: "站点五",
-        },
+        { value: "选项1", label: "站点一", },
+        { value: "选项2", label: "站点二", },
+        { value: "选项3", label: "站点三", },
+        { value: "选项4", label: "站点四", },
+        { value: "选项5", label: "站点五", },
       ],
 
       rules: {
         watchName: [
           // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
           { required: true, message: "请输入设备名称", trigger: "blur" },
-          {
-            min: 3,
-            max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
-          },
+          { min: 3, max: 6, message: "用户名长度在 3 到 6 个字符", trigger: "blur", },
         ],
         watchCode: [
           { required: true, message: "请输入设备编号", trigger: "blur" },
-          {
-            min: 3,
-            max: 6,
-            message: "用户名长度在 3 到 6 个字符",
-            trigger: "blur",
-          },
+          { min: 3, max: 6, message: "用户名长度在 3 到 6 个字符", trigger: "blur", },
         ],
         routeAddress: [
           { required: true, message: "请选则回路表记地址", trigger: "change" },
-         
         ],
         ratedVoltage: [
-          { required: true, message: '请选择站点列表', trigger: 'change'}
-        
+          { required: true, message: '请选择站点列表', trigger: 'change' }
         ],
         ratedCurrent: [
           { required: true, message: "请输入已选站点个数", trigger: "blur" },
@@ -180,9 +135,10 @@ export default {
 
 // label样式
 .el-form-item__label {
-    width: 150px
+  width: 150px
 }
+
 .el-form-item__content {
-    margin-left: 150px
+  margin-left: 150px
 }
 </style>

src/views/siteManage/camera/dialogComponent.vue

@@ -1,18 +1,6 @@
 <template>
-  <el-dialog
-    :title="dialogTitle"
-    v-model="dialogVisible"
-    width="640px"
-    @close="closeDialog()"
-    @open="open"
-  >
-    <el-form
-      ref="formInfo"
-      :model="form"
-      class="demo-form-inline"
-      label-width="100px"
-      :rules="rules"
-    >
+  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="640px" @close="closeDialog()">
+    <el-form ref="formInfo" :model="form" class="demo-form-inline" label-width="100px" :rules="rules">
       <el-form-item label="设备名称：" prop="deviceName">
         <el-input v-model="form.deviceName"></el-input>
       </el-form-item>
@@ -20,68 +8,32 @@
         <el-input v-model="form.deviceCode"></el-input>
       </el-form-item>
       <el-form-item label="楼层:" prop="floor">
-
-
-       <el-select
-          v-model="form.floor"
-          placeholder="请选择所属楼层"
-        >
-          <el-option value="" >请选择所属楼层</el-option>
-          <el-option
-            v-for="item in [20,19,18,17,16,15,14,13,12,11,10,9,8,7,6,5,4,3,2,1]"
-            :key="item"
-            :label="'楼层B'+item"
-            :value="'-'+item"
-          ></el-option>
-          <el-option
-            v-for="item in 100"
-            :key="item"
-            :label="'楼层'+item"
-            :value="''+item"
-          ></el-option>
+        <el-select v-model="form.floor" placeholder="请选择所属楼层">
+          <el-option value="">请选择所属楼层</el-option>
+          <el-option v-for="item in [20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1]" :key="item"
+            :label="'楼层B' + item" :value="'-' + item"></el-option>
+          <el-option v-for="item in 100" :key="item" :label="'楼层' + item" :value="'' + item"></el-option>
         </el-select>
-       </el-form-item> 
+      </el-form-item>
       <el-form-item label="所属站点：" prop="siteId">
-        <el-select
-          v-model="form.siteId"
-         :disabled="dialogTitle === '编辑'"
-          placeholder="请选择所属站点"
-        >
-          <el-option
-            v-for="item in store.state.siteList"
-            :key="item.value"
-            :label="item.siteName"
-            :value="item.id"
-          ></el-option>
+        <el-select v-model="form.siteId" :disabled="dialogTitle === '编辑'" placeholder="请选择所属站点">
+          <el-option v-for="item in store.state.siteList" :key="item.value" :label="item.siteName"
+            :value="item.id"></el-option>
         </el-select>
       </el-form-item>
-
       <el-form-item label="设备安装位置：" prop="deviceAddress">
         <el-input v-model="form.deviceAddress"></el-input>
       </el-form-item>
       <el-form-item label="设备类型：" prop="deviceType">
-        <el-select
-          v-model="form.deviceType"
-          placeholder="请选择设备类型"
-         :disabled="dialogTitle === '编辑'"
-        >
-          <el-option
-            v-for="item in deviceType"
-            :key="item.value"
-            :label="item.label"
-            :value="item.value"
-          ></el-option>
+        <el-select v-model="form.deviceType" placeholder="请选择设备类型" :disabled="dialogTitle === '编辑'">
+          <el-option v-for="item in deviceType" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select>
-       
       </el-form-item>
       <el-form-item label="sim卡" prop="sim">
         <el-input v-model="form.sim"></el-input>
       </el-form-item>
 
-      <br />
-      <br />
-      <br />
-      <div style="text-align: right">
+      <div style="margin-top:60px;text-align: right">
         <el-button @click="closeDialog(0)">取消</el-button>
         <el-button type="primary" @click="submitForm()">保存</el-button>
       </div>
@@ -89,193 +41,119 @@
   </el-dialog>
 </template>
 
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import { defineComponent, ref, watchEffect,watch } from 'vue'
-import * as api from '@/api/siteManage/camera.js'
+import { ref, onMounted, watch, getCurrentInstance, watchEffect } from 'vue'
 import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'DialogComponent',
-  emits: ['closeDialog'],
-  props: {
-    flag: Boolean,
-    dialogTitle: String,
-    itemInfo: Object,
-  },
-  setup(props, context) {
-    context
-    const store = useStore()
-    const dialogVisible = ref(false)
-    const formInfo = ref(null)
-
-    const form = ref([])
-
-    const siteList = ref([])
-
-    // open(): Dialog弹窗打开之前做的事
-    const open = () => {
-      store.commit('publicSiteList')
-      form.value = props.itemInfo.value
-        console.log('form.value.floor')
-
-      console.log(form.value.floor)
-
-    }
-
-    // 关闭弹框
-    const closeDialog = () => {
-      context.emit('closeDialog', false)
-      dialogVisible.value = false
-      resetForm()
-    }
-    function resetForm() {
-      formInfo.value.resetFields()
-    }
-
-    watchEffect((fn, options) => {
-      fn, options
-      dialogVisible.value = props.flag
-    })
-
-    const roleValid = (rule, value, callback) => {
-      rule
-      if (value.length === 0) {
-        callback(new Error('角色不能为空'))
-      } else {
-        callback()
-      }
-    }
-    
-
-    // 保存-修改操作
-    const submitForm = () => {
-      formInfo.value.validate((valid) => {
-        if (valid) {
-          // form.value.siteId =18
-
-          if (props.dialogTitle === '新增') {
-            api.correspondDeviceAdd(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '新增成功',
-                  type: 'success',
-                })
-                closeDialog()
-              } else {
-                ElMessage.error(requset.msg)
-              }
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+import * as api from '@/api/siteManage/camera.js'
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+  itemInfo: Object,
+}) //数据双向绑定
+const emit = defineEmits(['handleSelect']);
+/*----------------------------------变量声明-----------------------------------*/
+const dialogTitle = ref('')
+const dialogVisible = ref(false)
+const formInfo = ref(null)
+
+const form = ref({})
+const rules = {
+  deviceName: [
+    { required: true, message: '请输入设备名称', trigger: 'blur' },
+    { min: 1, max: 25, message: '长度在 1 到 25 个字符', trigger: 'blur', },
+  ],
+  deviceCode: [
+    { required: true, message: '请输入设备编号', trigger: 'blur' },
+  ],
+  floor: [{ required: true, message: '请选择所属楼层', trigger: 'blur' }],
+  siteId: [
+    { required: true, message: '请选择所属站点', trigger: 'blur', },
+  ],
+  deviceAddress: [
+    { required: true, message: '请输入设备安装位置', trigger: 'blur' },
+  ],
+  deviceType: [
+    { required: true, message: '请选择设备类型', trigger: 'change' },
+  ],
+  sim: [
+    { required: false, message: '请输入sim卡号', trigger: 'blur' }, //
+    // { pattern:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{0,25}$/, message: '请输入英文和数字组合的卡号,并且长度小于25!' },
+    { pattern: /^[A-Za-z0-9]+$/, message: '请输入含有英文或数字的卡号!' },
+    { min: 0, max: 25, message: '长度在 0 到 25 个字符', trigger: 'blur', },
+  ],
+}
+const deviceType = ref([
+  { value: 1, label: '183用电设备', },
+  { value: 2, label: '视频监控设备', },
+  { value: 3, label: '171用电设备', },
+  { value: 4, label: '173用电设备', },
+  { value: 5, label: '158智能网关', },
+  { value: 6, label: '其他', },
+])
+
+// 保存-修改操作
+const submitForm = () => {
+  formInfo.value.validate((valid) => {
+    if (valid) {
+      if (props.dialogTitle === '新增') {
+        api.correspondDeviceAdd(form.value).then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '新增成功',
+              type: 'success',
             })
+            emit('handleSelect', false)
+            closeDialog()
           } else {
-            api.correspondDeviceUpdate(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '修改成功',
-                  type: 'success',
-                })
-                closeDialog()
-              } else {
-                ElMessage.error(requset.msg)
-              }
+            ElMessage.error(requset.msg)
+          }
+        })
+      } else {
+        api.correspondDeviceUpdate(form.value).then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage.success({
+              message: '修改成功',
+              type: 'success',
             })
+            emit('handleSelect', false)
+            closeDialog()
+          } else {
+            ElMessage.error(requset.msg)
           }
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
+        })
+      }
+    } else {
+      console.log('error submit!!')
+      return false
     }
+  })
+}
 
-     watch(
-      () => form.value.floor,
-      (newVal,oldVal) => {
-        newVal,oldVal
-        
-      }
-    )
+/** 打开弹窗 */
+function openDialog(item) {
+  form.value = item.dialogArray
 
+  dialogTitle.value = item.dialogTitle;
+  dialogVisible.value = true
+}
+
+// 关闭弹框
+const closeDialog = () => {
+  dialogVisible.value = false
+  formInfo.value.resetFields()
+}
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
 
-    return {
-      store,
-      // ...toRefs(state),
-      closeDialog,
-      dialogVisible,
-      roleValid,
-      formInfo,
-      siteList,
-      form,
-      open,
-      submitForm,
-      // InputDiff,
-      rules: {
-        deviceName: [
-          { required: true, message: '请输入设备名称', trigger: 'blur' },
-           {
-            min: 1,
-            max: 25,
-            message: '长度在 1 到 25 个字符',
-            trigger: 'blur',
-          },
-        ],
-        deviceCode: [
-          { required: true, message: '请输入设备编号', trigger: 'blur' },
-         
-        ],
-        floor: [{ required: true, message: '请选择所属楼层', trigger: 'blur' }],
-        siteId: [
-          {
-            required: true,
-            message: '请选择所属站点',
-            trigger: 'blur',
-          },
-        ],
-        deviceAddress: [
-          { required: true, message: '请输入设备安装位置', trigger: 'blur' },
-        ],
-        deviceType: [
-          { required: true, message: '请选择设备类型', trigger: 'change' },
-        ],
-        sim: [
-          { required: false, message: '请输入sim卡号', trigger: 'blur' } , //
-            // { pattern:/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{0,25}$/, message: '请输入英文和数字组合的卡号,并且长度小于25!' },
-             { pattern:/^[A-Za-z0-9]+$/, message: '请输入含有英文或数字的卡号!' },
-            {
-            min: 0,
-            max: 25,
-            message: '长度在 0 到 25 个字符',
-            trigger: 'blur',
-          },
-          ],   
-      },
-      deviceType: ref([
-        {
-          value: 1,
-          label: '183用电设备',
-        },
-        {
-          value: 2,
-          label: '视频监控设备',
-        },
-        {
-          value: 3,
-          label: '171用电设备',
-        },
-        {
-          value: 4,
-          label: '173用电设备',
-        },
-        {
-          value: 5,
-          label: '158智能网关',
-        },
-        {
-          value: 6,
-          label: '其他',
-        },
-      ]),
-    }
-  },
-})
 </script>
  
 <style scoped lang="scss">
@@ -288,6 +166,7 @@ export default defineComponent({
 .el-form-item__label {
   width: 150px;
 }
+
 .el-form-item__content {
   margin-left: 150px;
 }

src/views/siteManage/camera/index.vue

@@ -3,139 +3,67 @@
     <!-- 筛选start -->
     <div class="filter-container mb-20">
       <div class="left">
-        <div>
-          <span class="" style="margin-right: 30px">
-            【{{ labelCom }}】站点的所有摄像头设备
-          </span>
-          <el-button icon="el-icon-plus" type="success" @click="addItem()" :disabled="store.state.authorities.indexOf('新增')==-1">
-            新增
-          </el-button>
-          <a
-            href="./static/伍继摄像头导入模板.xlsx"
-            download
-            class="downloadMb"
-          >
-            模板下载
-          </a>
-        </div>
+        <span class="" style="margin-right: 30px"> 【{{ labelCom }}】站点的所有摄像头设备 </span>
+        <el-button icon="el-icon-plus" type="success" @click="addItem()"
+          :disabled="store.state.authorities.indexOf('新增') == -1">
+          新增
+        </el-button>
+        <a href="./static/伍继摄像头导入模板.xlsx" download class="downloadMb">
+          模板下载
+        </a>
       </div>
 
+
       <div class="right">
-        <el-upload
-          class="upload-demo"
-          :action="fileUrl + '/device/deviceImport'"
-          :on-progress="handleProgress"
-          :on-success="handleUpAvatar"
-          :on-error="handleError"
-          multiple
-          :limit="1"
-          :headers="{
+        <el-upload class="upload-demo" :action="fileUrl + '/device/deviceImport'" :on-progress="handleProgress"
+          :on-success="handleUpAvatar" :on-error="handleError" multiple :limit="1" :headers="{
             accessToken: [accessToken],
-          }"
-          :file-list="fileList"
-          style="margin-right: 10px; display: inline-block"
-          :disabled="store.state.authorities.indexOf('导入')==-1"
-        >
-          <el-button size="small" type="primary" :disabled="store.state.authorities.indexOf('导入')==-1">导入</el-button>
+          }" :file-list="fileList" style="margin-right: 10px; display: inline-block"
+          :disabled="store.state.authorities.indexOf('导入') == -1">
+          <el-button size="small" type="primary" :disabled="store.state.authorities.indexOf('导入') == -1"> 导入 </el-button>
         </el-upload>
-        <el-button type="primary" @click="DataReportExport()" :disabled="store.state.authorities.indexOf('导出')==-1">导出</el-button>
+        <el-button type="primary" @click="DataReportExport()" :disabled="store.state.authorities.indexOf('导出') == -1"> 导出
+        </el-button>
       </div>
     </div>
     <!-- 筛选end -->
 
     <!-- 表格start -->
 
-    <!-- <view v-if="loadingStatus" class="loadingMask">Loading...</view> -->
-    <div></div>
-
-    <el-table
-      :data="deviceData"
-      border
-      stripe
-      :header-cell-style="headClass"
-      v-loading="loadingStatus"
-      element-loading-text="摄像头打开中...."
-      element-loading-background="rgba(255, 255, 255, 0.6)"
-    >
+    <el-table :data="deviceData" border stripe :header-cell-style="{ background: '#FAFAFA' }" v-loading="loadingStatus"
+      element-loading-text="摄像头打开中...." element-loading-background="rgba(255, 255, 255, 0.6)">
       <el-table-column prop="status" align="center" label="状态" 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 fixed="right" label="操作" width="140">
         <template #default="scope">
-          <el-button
-            type="text"
-            size="small"
-            @click.prevent="editRow(scope.row)"
-            :disabled="store.state.authorities.indexOf('修改')==-1"
-          >
+          <el-button type="text" size="small" @click.prevent="editRow(scope.row)"
+            :disabled="store.state.authorities.indexOf('修改') == -1">
             编辑
           </el-button>
-          <el-popconfirm
-            confirm-button-text="是"
-            cancel-button-text="否"
-            icon="el-icon-info"
-            icon-color="red"
-            title="确定删除?"
-            @confirm="handleDelete(scope.row)"
-            @cancel="cancelEvent"
-          >
+          <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon="el-icon-info" icon-color="red" title="确定删除?"
+            @confirm="handleDelete(scope.row)" @cancel="cancelEvent">
             <template #reference>
-              <el-button type="text" size="small" class="delete-text" :disabled="store.state.authorities.indexOf('删除')==-1">
+              <el-button type="text" size="small" class="delete-text"
+                :disabled="store.state.authorities.indexOf('删除') == -1">
                 删除
               </el-button>
             </template>
@@ -156,470 +84,314 @@
 
     <!-- 分页start -->
     <div class="paginationBlock">
-      <el-pagination
-        v-model:currentPage="currentPage"
-        :page-sizes="[15, 20, 25, 30]"
-        :page-size="pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        background
-      ></el-pagination>
+      <el-pagination v-model:currentPage="currentPage" :page-sizes="[15, 20, 25, 30]" :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" background></el-pagination>
     </div>
     <!-- 分页end -->
 
     <!--弹框组件开始-----------------------start-->
-    <dialog-component
-      :dialogTitle="dialogTitle"
-      :itemInfo="tableItem"
-      @closeDialog="closeDialog"
-      :flag="showDialog"
-    ></dialog-component>
+    <dialog-component ref="dialogComponent" @handleSelect="handle('get')"></dialog-component>
     <!--弹框组件开始-----------------------end-->
 
     <!--视频弹框组件开始-----------------------start-->
-    <check-video
-      :dialogTitle="dialogTitle"
-      :itemInfo="tableItem"
-      @closeDialog="closeDialog2"
-      :flag="showDialog2"
-      :deviceCode="deviceCode"
-    ></check-video>
+    <check-video ref="checkVideoRef"></check-video>
     <!--视频弹框组件结束-----------------------end-->
 
     <input type="hidden" v-model="openId" style="opacity: 0" />
   </div>
 </template>
 
-<script>
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
 import { useStore } from 'vuex'
-import { defineComponent, ref, reactive, onMounted, watch } from 'vue'
+import { ref, onMounted, watch, getCurrentInstance } from 'vue'
+import { ElMessage } from 'element-plus'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
 import DialogComponent from './dialogComponent'
 import checkVideo from './checkVideo'
-import * as api from '@/api/siteManage/camera.js'
-import { ElMessage } from 'element-plus'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
 import axios from 'axios'
-
-export default defineComponent({
-  components: { DialogComponent, checkVideo },
-  props: {
-    siteId: Number,
-    activeName: String,
-  },
-  setup(props) {
-    const store = useStore()
-    store
-    const total = ref(0)
-    const pageSize = ref(15)
-    const currentPage = ref(1)
-    const goSiteListParam = ref('')
-    const platformAreaName = ref('')
-    const pageShow = ref(false)
-    const showDialog = ref(false)
-    const showDialog2 = ref(false)
-    const deviceData = ref([])
-
-    const tableItem = reactive([])
-    const dialogTitle = ref('')
-
-    const fileUrl = ref(window.PLATFROM_CONFIG.baseUrl)
-    const fileList = ref([])
-    const accessToken = ref(store.state.user.accessToken)
-    const labelCom = ref(store.state.siteManageLabelCom)
-
-    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 headClass = () => {
-      return 'background:#FAFAFA;'
-    }
-    //分页操作
-    const handleSizeChange = (val) => {
-      pageSize.value = val
-      videoMonitoringDeviceList()
-    }
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
-      videoMonitoringDeviceList()
-    }
-    //监控设备列表
-    function videoMonitoringDeviceList() {
-      api
-        .videoMonitoringDeviceList({
-          siteId: props.siteId,
-          size: pageSize.value,
-          current: currentPage.value,
-          // deviceType:2
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            deviceData.value = requset.data.records
-            total.value = requset.data.total
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-
-    // 添加操作
-    const addItem = () => {
-      tableItem.value = {
-        deviceName: '',
-        deviceCode: '',
-        floor: '',
-        siteId: '',
-        deviceAddress: '',
-        deviceType: '',
-        sim: '',
-      }
-      dialogTitle.value = '新增'
-      showDialog.value = true
-    }
-
-    // 编辑操作
-    const editRow = (row) => {
-      tableItem.value = {
-        id: row.id,
-        deviceCode: row.deviceCode,
-        deviceName: row.deviceName,
-        floor: row.floor,
-        siteId: row.siteId,
-        deviceAddress: row.deviceAddress,
-        deviceType: Number(row.deviceType),
-        sim: row.sim,
-      }
-      dialogTitle.value = '编辑'
-      showDialog.value = true
-    }
-
-    // 关闭操作
-    const closeDialog = () => {
-      showDialog.value = false
-
-      videoMonitoringDeviceList()
-      chk_video()
-    }
-    const closeDialog2 = () => {
-      showDialog2.value = false
-      count.value = 0
-    }
-
-    //删除 是否删除  ---- 是
-    const handleDelete = (row) => {
-      api.correspondDeviceDel({ id: row.id }).then((requset) => {
-        if (requset.status === 'SUCCESS') {
-          ElMessage.success({
-            message: '删除成功',
-            type: 'success',
-          })
-          videoMonitoringDeviceList()
-        } else {
-          ElMessage.error(requset.msg)
-        }
-      })
-    }
-
-    //是否删除  ---- 否
-    const cancelEvent = () => {
-      console.log('cancel!')
-    }
-
-    //导入
-    const handleProgress = (file, fileList) => {
-      file
-      if (
-        !(
-          fileList.raw.type ===
-            'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
-          fileList.raw.type === 'application/vnd.ms-excel'
-        )
-      ) {
-        ElMessage({
-          message: '上传文件只能是 xls 和 xlsx 格式!',
-          type: 'error',
-        })
-        return false
+import * as api from '@/api/siteManage/camera.js'
+/*----------------------------------公共变量-----------------------------------*/
+const store = useStore()
+const props = defineProps({
+  siteId: Number,
+  activeName: String,
+}) //数据双向绑定
+const emit = defineEmits([]); emit
+const { proxy } = getCurrentInstance();
+/*----------------------------------变量声明-----------------------------------*/
+const total = ref(0)
+const pageSize = ref(15)
+const currentPage = ref(1)
+const deviceData = ref([])
+
+const fileUrl = ref(window.PLATFROM_CONFIG.baseUrl)
+const fileList = ref([])
+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)
+
+//分页操作
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  videoMonitoringDeviceList()
+}
+const handleCurrentChange = (val) => {
+  currentPage.value = val
+  videoMonitoringDeviceList()
+}
+//监控设备列表
+function videoMonitoringDeviceList() {
+  api
+    .videoMonitoringDeviceList({
+      siteId: props.siteId,
+      size: pageSize.value,
+      current: currentPage.value,
+      // deviceType:2
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        deviceData.value = requset.data.records
+        total.value = requset.data.total
       } else {
-        return true
+        ElMessage.error(requset.msg)
       }
-    }
-    const handleUpAvatar = (res, file) => {
-      console.log(res, file)
-      fileList.value = []
+    })
+}
+
+// 添加操作
+const addItem = () => {
+  proxy.$refs["dialogComponent"].openDialog({
+    dialogTitle: '新增',
+    dialogArray: {
+      deviceName: '',
+      deviceCode: '',
+      floor: '',
+      siteId: '',
+      deviceAddress: '',
+      deviceType: '',
+      sim: '',
+    },
+  })
+}
+
+// 编辑操作
+const editRow = (row) => {
+  proxy.$refs["dialogComponent"].openDialog({
+    dialogTitle: '编辑',
+    dialogArray: {
+      id: row.id,
+      deviceCode: row.deviceCode,
+      deviceName: row.deviceName,
+      floor: row.floor,
+      siteId: row.siteId,
+      deviceAddress: row.deviceAddress,
+      deviceType: Number(row.deviceType),
+      sim: row.sim,
+    },
+  })
+}
+
+//删除 是否删除  ---- 是
+const handleDelete = (row) => {
+  api.correspondDeviceDel({ id: row.id }).then((requset) => {
+    if (requset.status === 'SUCCESS') {
       ElMessage.success({
-        message: '导入成功',
+        message: '删除成功',
         type: 'success',
       })
       videoMonitoringDeviceList()
+    } else {
+      ElMessage.error(requset.msg)
     }
-
-    const handleError = (res) => {
-      let myError = res.toString() //转字符串
-      myError = myError.replace('Error: ', '') //去掉前面的
-      myError = JSON.parse(myError) //转对象
-      ElMessage.error({
-        message: myError.msg,
-        type: 'error',
-      })
-    }
-    //导出
-    const DataReportExport = () => {
-      api
-        .deviceExport({
-          siteId: props.siteId,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data
-            ElMessage.success({
-              message: '导出成功',
-              type: 'success',
-            })
-          } else {
-            ElMessage.error(requset.msg)
-          }
+  })
+}
+
+//是否删除  ---- 否
+const cancelEvent = () => {
+  console.log('cancel!')
+}
+
+//导入
+const handleProgress = (file, fileList) => {
+  file
+  if (
+    !(
+      fileList.raw.type ===
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' ||
+      fileList.raw.type === 'application/vnd.ms-excel'
+    )
+  ) {
+    ElMessage({
+      message: '上传文件只能是 xls 和 xlsx 格式!',
+      type: 'error',
+    })
+    return false
+  } else {
+    return true
+  }
+}
+const handleUpAvatar = (res, file) => {
+  console.log(res, file)
+  fileList.value = []
+  ElMessage.success({
+    message: '导入成功',
+    type: 'success',
+  })
+  videoMonitoringDeviceList()
+}
+
+const handleError = (res) => {
+  let myError = res.toString() //转字符串
+  myError = myError.replace('Error: ', '') //去掉前面的
+  myError = JSON.parse(myError) //转对象
+  ElMessage.error({
+    message: myError.msg,
+    type: 'error',
+  })
+}
+
+//导出
+const DataReportExport = () => {
+  api
+    .deviceExport({
+      siteId: props.siteId,
+    })
+    .then((requset) => {
+      if (requset.status === 'SUCCESS') {
+        window.location.href = window.PLATFROM_CONFIG.fileUrl + requset.data
+        ElMessage.success({
+          message: '导出成功',
+          type: 'success',
         })
-    }
-
-    //请求视频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) => {
-    
-          onLineVideoList.value = response.data.RESULT.LIST
-
-          if (openId.value.length > 0) {
-            // start
-            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
-                    tableItem.value = {
-                      id: '',
-                      stationName: '',
-                      watchName: '',
-                      watchCode: '',
-                      siteList: [],
-                      done: '',
-                      guaZai: '',
-                      checked: true,
-                      resource: '',
-                    }
-                    dialogTitle.value = '查看视频'
-                    showDialog2.value = true
-                  } else {
-                    store.state.siteCameraTimer = setTimeout(chk_video, 5000)
-                  }
-                } else {
-                  if (reCount.value > 7) {
-                    loadingStatus.value = false
-                    alert('远程摄像头链接超时，请稍后再试')
+      } 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
 
-                    break
-                  }
-                  store.state.siteCameraTimer = setTimeout(chk_video, 5000)
-                }
-              }
-            }
-            // end
-          } else {
-            for (var i = 0; i < onLineVideoList.value.length; i++) {
-              for (var j = 0; j < deviceData.value.length; j++) {
-                if (
-                  onLineVideoList.value[i].DEVICE ==
-                  deviceData.value[j].deviceCode
-                ) {
-                  deviceData.value[j].ALIVEVALUE =
-                    onLineVideoList.value[i].ALIVEVALUE
-                }
-              }
-            }
-            // console.log('处理后的，deviceData.value')
-            // console.log(deviceData.value)
+      for (var n = 0; n < onLineVideoList.value.length; n++) {
+        for (var j = 0; j < deviceData.value.length; j++) {
+          if (onLineVideoList.value[n].DEVICE == deviceData.value[j].deviceCode) {
+            deviceData.value[j].ALIVEVALUE = onLineVideoList.value[n].ALIVEVALUE
           }
-        })
-        .catch((error) => {
-          console.log(error)
-        })
-    }
-
-    // 查看视频
-    const open_video = (item) => {
-      deviceCode.value = item.deviceCode
-      if (openId.value != item.deviceCode) {
-        openId.value = item.deviceCode
+        }
       }
+    })
+    .catch((error) => {
+      console.log(error)
+    })
+}
+
+// 查看视频
+const open_video = (item) => {
+  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
+
       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) {
-            tableItem.value = {
-              id: '',
-              stationName: '',
-              watchName: '',
-              watchCode: '',
-              siteList: [],
-              done: '',
-              guaZai: '',
-              checked: true,
-              resource: '',
-            }
-            dialogTitle.value = '查看视频'
-            showDialog2.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
+    })
+}
+
+//监听变化
+watch(
+  () => props.siteId,
+  (newVal) => {
+    newVal
+
+    labelCom.value = store.state.siteManageLabelCom
+    if (props.activeName == 'five') {
+      // window.clearTimeOut() //关闭定时器
       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
+      openId.value = ''
+      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
-          videoMonitoringDeviceList()
-          chk_video()
-        }
-      }
-    )
-    watch(
-      () => props.activeName,
-      (newVal) => {
-        if (newVal == 'five') {
-          //  clearTimeOut(timer.value)
-          // window.clearTimeOut() //关闭定时器// alert('关闭定时器?')
-          reCount.value = 0
-          openId.value = ''
-          loadingStatus.value = false
-
-          videoMonitoringDeviceList()
-          chk_video()
-        }
-      }
-    )
-
-    onMounted(() => {})
-
-    return {
-      deviceData,
-      showDialog,
-      showDialog2,
-
-      platformAreaName,
-      pageShow,
-      dialogTitle,
-
-      props,
-      tableItem,
-      goSiteListParam,
-
-      total,
-      pageSize,
-      currentPage,
-      chk_video,
-
-      videoMonitoringDeviceList,
-      headClass,
-      addItem,
-
-      editRow,
-      closeDialog,
-      closeDialog2,
-      handleDelete,
-      cancelEvent,
-      handleSizeChange,
-      handleCurrentChange,
-
-      DataReportExport,
-
-      fileList,
-      fileUrl,
-      accessToken,
-      handleProgress,
-      handleUpAvatar,
-
-      labelCom,
-
-      openId,
-      onLineVideoList,
-      reCount,
-      count,
-      loadingStatus,
-      open_video,
-      timer,
-      deviceCode,
-      handleError,
-
-      store
+  }
+)
+watch(
+  () => props.activeName,
+  (newVal) => {
+    if (newVal == 'five') {
+      //  clearTimeOut(timer.value)
+      // window.clearTimeOut() //关闭定时器// alert('关闭定时器?')
+      reCount.value = 0
+      openId.value = ''
+      loadingStatus.value = false
+      initCgi();
+      videoMonitoringDeviceList()
     }
-  },
+  }
+)
+
+onMounted(() => {
+  reCount.value = 0
+  openId.value = ''
+  loadingStatus.value = false
+  initCgi();
+  videoMonitoringDeviceList()
 })
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>