From 4b65f439152d211d30e2d7f449552d73ae738cd1 Mon Sep 17 00:00:00 2001
From: sd <shidong@jhsoft.cc>
Date: 星期三, 13 八月 2025 17:06:05 +0800
Subject: [PATCH] 摄像机配置-必填项样式调整;任务名称去掉默认值增加提示词;图表功能优化。 预警规则-新增功能调整 添加默认图标。 数据推送-调整页面文案显示;修复任务配置bug(选择是否预警后 摄像机名称显示且无法多选)

---
 src/pages/cameraAccess/components/SeparateRules.vue |  414 ++++++++++++++++++++++++++++++++--------------------------
 1 files changed, 230 insertions(+), 184 deletions(-)

diff --git a/src/pages/cameraAccess/components/SeparateRules.vue b/src/pages/cameraAccess/components/SeparateRules.vue
index be9a632..04d7b4a 100644
--- a/src/pages/cameraAccess/components/SeparateRules.vue
+++ b/src/pages/cameraAccess/components/SeparateRules.vue
@@ -6,78 +6,56 @@
           <div v-show="cameraType === 'camera'">
             <span>
               <span class="label">瑙嗛鍒嗘瀽澶勭悊</span>
-              <el-switch
-                style="margin-left: 10px"
-                v-model="Camera.analytics"
-                @change="pollEnable"
-                :disabled="!Camera.cameraId"
-              ></el-switch>
+              <el-switch style="margin-left: 10px" v-model="Camera.analytics" @change="pollEnable"
+                :disabled="!Camera.cameraId"></el-switch>
             </span>
           </div>
 
           <div v-if="Camera.analytics && isShowPolling === 'show'" class="flex-box" v-show="cameraType === 'camera'">
             <span class="label">澶勭悊鏂瑰紡</span>
-            <toggle-button
-              :value="Camera.dealWay"
-              :width="60"
-              :labels="{ checked: '瀹炴椂', unchecked: '杞' }"
-              :color="{
-                checked: '#3D68E1',
-                unchecked: '#FF7733',
-                disabled: '#CCCCCC'
-              }"
-              :sync="true"
-              @change="changePoll"
-            />
+            <toggle-button  :width="60" :labels="{ checked: '瀹炴椂', unchecked: '瀹炴椂' }" :color="{
+              checked: '#3D68E1',
+              unchecked: '#3D68E1',
+              disabled: '#CCCCCC'
+            }" :sync="true"/>
+            <!-- <toggle-button :value="Camera.dealWay" :width="60" :labels="{ checked: '瀹炴椂', unchecked: '杞' }" :color="{
+              checked: '#3D68E1',
+              unchecked: '#FF7733',
+              disabled: '#CCCCCC'
+            }" :sync="true" @change="changePoll" /> -->
           </div>
           <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'">
             <span class="label">澶勭悊鐘舵��: {{ camStatus }}</span>
           </div>
           <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'">
-            <span class="label"
-              >鍒嗚鲸鐜�:
+            <span class="label">鍒嗚鲸鐜�:
               {{
                 Camera.camearInfo.resolution_width == 0 || Camera.camearInfo.resolution_height == 0
                   ? "鏈満鍒嗚鲸鐜�"
                   : `${Camera.camearInfo.resolution_width} * ${Camera.camearInfo.resolution_height}`
-              }}</span
-            >
+              }}</span>
           </div>
 
           <div v-if="Camera.analytics" class="flex-box">
             <span class="label">SmartAI鑺傜偣: {{ Camera.runServerName }}</span>
           </div>
 
-          <div v-if="Camera.analytics" class="flex-box">
+          <!-- <div v-if="Camera.analytics" class="flex-box">
             <span class="label">绠楁硶蹇�熼�氶亾</span>
             <div class="channel flex-box">
               <el-tooltip effect="dark" content="澶嶅埗姝ゆ憚鍍忔満绠楁硶瑙勫垯" placement="bottom" popper-class="atooltip">
-                <span
-                  style="color: #3d68e1; cursor: pointer; font-size: 23px"
-                  @click="ctrlC"
-                  class="iconfont iconfuzhiguize"
-                ></span>
+                <span style="color: #3d68e1; cursor: pointer; font-size: 23px" @click="ctrlC"
+                  class="iconfont iconfuzhiguize"></span>
               </el-tooltip>
-              <el-tooltip
-                effect="dark"
-                :content="
-                  !TreeDataPool.ctrlCameraId ? '绮樿创绠楁硶瑙勫垯' : `绮樿创绠楁硶瑙勫垯锛屾潵婧愶細${TreeDataPool.ctrlCameraName}`
-                "
-                placement="bottom"
-                popper-class="atooltip"
-              >
-                <span
-                  :style="
-                    !TreeDataPool.ctrlCameraId
-                      ? 'cursor: not-allowed;font-size:23px;'
-                      : 'color:#3D68E1;font-size:23px;cursor: pointer;'
-                  "
-                  @click="ctrlV"
-                  class="iconfont iconniantie ml5"
-                ></span>
+              <el-tooltip effect="dark" :content="!TreeDataPool.ctrlCameraId ? '绮樿创绠楁硶瑙勫垯' : `绮樿创绠楁硶瑙勫垯锛屾潵婧愶細${TreeDataPool.ctrlCameraName}`
+                " placement="bottom" popper-class="atooltip">
+                <span :style="!TreeDataPool.ctrlCameraId
+                  ? 'cursor: not-allowed;font-size:23px;'
+                  : 'color:#3D68E1;font-size:23px;cursor: pointer;'
+                  " @click="ctrlV" class="iconfont iconniantie ml5"></span>
               </el-tooltip>
             </div>
-          </div>
+          </div> -->
         </div>
       </div>
     </div>
@@ -86,17 +64,13 @@
 
     <div class="top">
       <p class="task-css">
-        <b style="font-size: 14px; line-height: 18px">鍦烘櫙</b>
+        <b style="font-size: 14px; line-height: 18px">AI浠诲姟</b>
       </p>
       <div class="clearfix">
         <slide-scene :sceneData="Camera.rules"></slide-scene>
         <div class="top-right">
-          <sysinfo
-            :showRealPoll="cameraType === 'camera'"
-            :ShowLocalVedio="cameraType === 'dataStack'"
-            v-if="showSysInfo"
-            style="margin-top: -10px"
-          />
+          <sysinfo :showRealPoll="cameraType === 'camera'" :ShowLocalVedio="cameraType === 'dataStack'"
+            v-if="showSysInfo" style="margin-top: -10px" />
         </div>
       </div>
     </div>
@@ -119,61 +93,28 @@
             </div>
             <div class="img-box">
               <template v-if="TreeDataPool.treeActiveName == 'camera'">
-                <polygon-canvas
-                  class="cavas"
-                  ref="canvas"
-                  v-if="showCanvas"
-                  v-loading="loading"
-                  element-loading-text="鍒锋柊涓紝璇风◢绛�..."
-                  element-loading-background="rgba(0, 0, 0, 0.8)"
-                  :isShowDrawArrow="false"
-                  :disabled="false"
-                  :snapshot_url="Camera.baseImg"
-                  :canvasDataShow="Camera.canvasData"
-                  :currentCameraId="Camera.cameraId"
-                  :loading="Camera.loading"
-                  :canvasWidth="canvasWidth"
-                  :canvasHeight="canvasHeight"
-                  :isGB28181="Camera.gb28181"
-                  @fromCanvas="getCanvasData"
-                  @changeLoading="changeLoading"
-                  @refresh="refresh"
-                >
+                <polygon-canvas class="cavas" ref="canvas" v-if="showCanvas" v-loading="loading"
+                  element-loading-text="鍒锋柊涓紝璇风◢绛�..." element-loading-background="rgba(0, 0, 0, 0.8)"
+                  :isShowDrawArrow="false" :disabled="false" :snapshot_url="Camera.baseImg"
+                  :canvasDataShow="Camera.canvasData" :currentCameraId="Camera.cameraId" :loading="Camera.loading"
+                  :canvasWidth="canvasWidth" :canvasHeight="canvasHeight" :isGB28181="Camera.gb28181"
+                  @fromCanvas="getCanvasData" @changeLoading="changeLoading" @refresh="refresh">
                 </polygon-canvas>
               </template>
               <template v-else>
                 <div style="width: 100%" v-loading="getStackFileLoading">
-                  <swiper
-                    ref="swiper"
-                    :auto-update="true"
-                    :options="canvasSwiperOption"
-                    @slideChange="swiperSlideChange"
-                    class="swiper-box-container2"
-                    style="width: 100%"
-                  >
+                  <swiper ref="swiper" :auto-update="true" :options="canvasSwiperOption"
+                    @slideChange="swiperSlideChange" class="swiper-box-container2" style="width: 100%">
                     <swiper-slide v-for="(data, index) in swipercanvasData" :key="index">
                       <div>
                         <b class="video-title" style="font-size: 14px; margin-top: -10px">{{ data.name }}</b>
-                        <polygon-canvas
-                          class="cavas"
-                          ref="canvas"
-                          v-if="showCanvas"
-                          v-loading="loading"
-                          element-loading-text="鍒锋柊涓紝璇风◢绛�..."
-                          element-loading-background="rgba(0, 0, 0, 0.8)"
-                          :isShowDrawArrow="false"
-                          :isShowRefresh="false"
-                          :sourceType="data.type"
-                          :disabled="false"
-                          :snapshot_url="data.baseImg"
-                          :canvasDataShow="Camera.canvasData"
-                          :currentCameraId="data.stackId"
-                          :loading="data.loading"
-                          :canvasWidth="canvasWidth"
-                          :canvasHeight="canvasHeight"
-                          @fromCanvas="getCanvasData"
-                          @changeLoading="changeLoading"
-                        ></polygon-canvas>
+                        <polygon-canvas class="cavas" ref="canvas" v-if="showCanvas" v-loading="loading"
+                          element-loading-text="鍒锋柊涓紝璇风◢绛�..." element-loading-background="rgba(0, 0, 0, 0.8)"
+                          :isShowDrawArrow="false" :isShowRefresh="false" :sourceType="data.type" :disabled="false"
+                          :snapshot_url="data.baseImg" :canvasDataShow="Camera.canvasData"
+                          :currentCameraId="data.stackId" :loading="data.loading" :canvasWidth="canvasWidth"
+                          :canvasHeight="canvasHeight" @fromCanvas="getCanvasData"
+                          @changeLoading="changeLoading"></polygon-canvas>
                       </div>
                     </swiper-slide>
                   </swiper>
@@ -192,14 +133,11 @@
             </div>
           </div>
           <div style="float: left; width: calc(10% - 90px); height: 100%"></div>
-          <div
-            class="time-box"
-            style="
+          <div class="time-box" style="
               width: calc(90% + 90px - 576px);
               overflow-x: auto;
               overflow-y: hidden;
-            "
-          >
+            ">
             <p style="text-align: left; padding: 10px; box-sizing: border-box">
               <b style="font-size: 14px">鏃堕棿娈�</b>
             </p>
@@ -208,12 +146,8 @@
         </div>
 
         <!-- 鍦烘櫙瑙勫垯 -->
-        <scene-rule
-          :seletedCameras="[Camera]"
-          :tableRuleList="Camera.rules"
-          :onSaveScene="saveSceneRule"
-          @delete-rule="delScenRule"
-        ></scene-rule>
+        <scene-rule :seletedCameras="[Camera]" :tableRuleList="Camera.rules" :onSaveScene="saveSceneRule"
+          @delete-rule="delScenRule"></scene-rule>
       </div>
     </div>
   </div>
@@ -226,8 +160,9 @@
 import { getCameraInfo } from "@/api/camera"
 import { getGB28181CameraInfo } from "@/api/camera"
 import { saveCameraScene } from "@/api/scene"
+import { saveCameraAndTask, updateCameraAndTask } from "@/api/selectRule";
 
-import { changeRunType } from "@/api/pollConfig"
+import { changeRunType,changeRunTypeTwo } from "@/api/pollConfig"
 import { findAllFileByStackId } from "@/api/localVedio"
 import VideoRuleData from "@/Pool/VideoRuleData"
 
@@ -247,7 +182,7 @@
   },
   directives: {
     focus: {
-      inserted: function(el) {
+      inserted: function (el) {
         el.querySelector("input").focus()
       }
     }
@@ -440,6 +375,7 @@
     },
     refresh(url) {
       this.Camera.baseImg = url
+      // console.info("url="+url)
     },
     // 鍒濆鍖栨憚鍍忔満淇℃伅锛岀埗缁勪欢璋冪敤
     async initCameraData(id, type) {
@@ -469,19 +405,38 @@
     saveSceneRule(groupRule) {
       const payload = { ...groupRule }
       payload.cameraIds = [this.Camera.cameraId]
+      payload.videoId = [this.Camera.cameraId][0]
       let _this = this
-      saveCameraScene(payload).then((rsp) => {
-        if (rsp && rsp.success) {
-          this.Camera.update()
-          this.$notify({
-            type: "success",
-            message: "绛栫暐淇濆瓨鎴愬姛锛�"
-          })
-          //鍒锋柊宸︿晶鏍�
 
-          _this.$root.$children[0].$children[0].querySearchAsync("camera")
-        }
-      })
+      if (payload.taskId) {
+        updateCameraAndTask(payload).then((rsp) => {
+          if (rsp && rsp.status === 200) {
+            this.Camera.update()
+            this.$notify({
+              type: "success",
+              message: "缂栬緫鎴愬姛锛�"
+            })
+            //鍒锋柊宸︿晶鏍�
+
+            _this.$root.$children[0].$children[0].querySearchAsync("camera")
+          }
+        })
+      } else {
+        saveCameraAndTask(payload).then((rsp) => {
+          if (rsp && rsp.status === 200) {
+            this.Camera.update()
+            this.$notify({
+              type: "success",
+              message: "淇濆瓨鎴愬姛锛�"
+            })
+            //鍒锋柊宸︿晶鏍�
+
+            _this.$root.$children[0].$children[0].querySearchAsync("camera")
+          }
+        })
+      }
+console.info(
+      this.Camera.rules)
     },
     delScenRule() {
       this.Camera.update()
@@ -491,6 +446,7 @@
     },
     //鏄惁杩涜瑙嗛鍒嗘瀽澶勭悊
     pollEnable(row) {
+      // console.info("Camera.:"+JSON.stringify(this.Camera))
       let val = 0
       if (row) {
         if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
@@ -504,80 +460,101 @@
         this.Camera.dealWay = false
         val = -1
       }
+      console.info("isOpen:"+this.Camera.analytics?1:0)
       if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
-        changeRunType({
-          camera_ids: [this.Camera.cameraId],
-          run_type: val,
-          isGb: this.Camera.gb28181
+        changeRunTypeTwo({
+          videoId: this.Camera.cameraId,
+          // isOpen: val
+          isOpen: this.Camera.analytics?1:0
         }).then((rsp) => {
           this.getStatus()
-          if (rsp && rsp.success) {
+          if (rsp && rsp.status === 200) {
             this.$notify({
               type: "success",
               message: "閰嶇疆鎴愬姛"
             })
           } else {
+            this.Camera.analytics = !this.Camera.analytics
             this.$notify({
               type: "error",
-              message: "閰嶇疆澶辫触"
+              message: rsp.msg
             })
           }
           this.TreeDataPool.fetchTreeData()
         })
+        // changeRunType({
+        //   camera_ids: [this.Camera.cameraId],
+        //   run_type: val,
+        //   isGb: this.Camera.gb28181
+        // }).then((rsp) => {
+        //   this.getStatus()
+        //   if (rsp && rsp.success) {
+        //     this.$notify({
+        //       type: "success",
+        //       message: "閰嶇疆鎴愬姛"
+        //     })
+        //   } else {
+        //     this.$notify({
+        //       type: "error",
+        //       message: "閰嶇疆澶辫触"
+        //     })
+        //   }
+        //   this.TreeDataPool.fetchTreeData()
+        // })
       }
       this.PollData.statisticTaskInfo()
     },
     //瀹炴椂銆佽疆璇㈠垏鎹�
     changePoll(row) {
       //鍒ゆ柇鏄柊澧炶繕鏄洿鏂�
-      if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
-        if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
-          if (row.value) {
-            this.Camera.dealWay = true
-          } else {
-            this.Camera.dealWay = false
-          }
-          changeRunType({
-            camera_ids: [this.Camera.cameraId],
-            run_type: this.Camera.dealWay ? 1 : 0,
-            isGb: this.Camera.gb28181
-          }).then((rsp) => {
-            if (rsp && rsp.success) {
-              this.$notify({
-                type: "success",
-                message: "閰嶇疆鎴愬姛"
-              })
-            } else {
-              this.$notify({
-                type: "error",
-                message: "閰嶇疆澶辫触"
-              })
-            }
-          })
-        } else {
-          if (this.Camera.dealWay) {
-            this.Camera.dealWay = false
-            changeRunType({
-              camera_ids: [this.Camera.cameraId],
-              run_type: this.Camera.dealWay ? 1 : 0
-            }).then((rsp) => {
-              if (rsp && rsp.success) {
-                this.$notify({
-                  type: "success",
-                  message: "閰嶇疆鎴愬姛"
-                })
-              } else {
-                this.$notify({
-                  type: "error",
-                  message: "閰嶇疆澶辫触"
-                })
-              }
-            })
-          }
-        }
-        this.TreeDataPool.fetchTreeData()
-        this.PollData.statisticTaskInfo()
-      }
+      // if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
+      //   if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
+      //     if (row.value) {
+      //       this.Camera.dealWay = true
+      //     } else {
+      //       this.Camera.dealWay = false
+      //     }
+      //     changeRunType({
+      //       camera_ids: [this.Camera.cameraId],
+      //       run_type: this.Camera.dealWay ? 1 : 0,
+      //       isGb: this.Camera.gb28181
+      //     }).then((rsp) => {
+      //       if (rsp && rsp.success) {
+      //         this.$notify({
+      //           type: "success",
+      //           message: "閰嶇疆鎴愬姛"
+      //         })
+      //       } else {
+      //         this.$notify({
+      //           type: "error",
+      //           message: "閰嶇疆澶辫触"
+      //         })
+      //       }
+      //     })
+      //   } else {
+      //     if (this.Camera.dealWay) {
+      //       this.Camera.dealWay = false
+      //       changeRunType({
+      //         camera_ids: [this.Camera.cameraId],
+      //         run_type: this.Camera.dealWay ? 1 : 0
+      //       }).then((rsp) => {
+      //         if (rsp && rsp.success) {
+      //           this.$notify({
+      //             type: "success",
+      //             message: "閰嶇疆鎴愬姛"
+      //           })
+      //         } else {
+      //           this.$notify({
+      //             type: "error",
+      //             message: "閰嶇疆澶辫触"
+      //           })
+      //         }
+      //       })
+      //     }
+      //   }
+      //   this.TreeDataPool.fetchTreeData()
+      //   this.PollData.statisticTaskInfo()
+      // }
     },
     //澶嶅埗
     ctrlC() {
@@ -628,6 +605,7 @@
 .el-message--info .el-message__content {
   color: #999 !important;
 }
+
 .swiper-container {
   margin-left: auto;
   margin-right: auto;
@@ -637,6 +615,7 @@
   padding: 0;
   z-index: 1;
 }
+
 .swiper-local-prev,
 .swiper-local-next {
   width: 40px;
@@ -647,6 +626,7 @@
   z-index: 99;
   border-radius: 4em;
   outline: none;
+
   .icon-btn {
     color: rgb(255, 255, 255);
     text-align: center;
@@ -654,48 +634,59 @@
     cursor: pointer;
   }
 }
+
 .swiper-local-prev {
   left: 10px;
 }
+
 .swiper-local-prev:hover {
   background: #666;
 }
+
 .swiper-local-next {
   left: 90%;
 }
+
 .swiper-local-next:hover {
   background: #666;
 }
+
 .s-separate-rules {
   width: 100%;
   padding: 13px 0 20px;
+
   .ai {
     //width: calc(100% + 76px);
     // height: 38px;
     // position: absolute;
     // left: -38px;
     height: 40px;
+
     .check-area {
       width: 100%;
       height: 100%;
       padding: 0 20px;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
+
       .ai-select {
         text-align: left;
         line-height: 30px;
         height: 30px;
+
         .flex-box {
           .label {
-            & + label,
-            & + div {
+
+            &+label,
+            &+div {
               margin-left: 10px;
               line-height: 1;
             }
           }
         }
       }
-      .ai-select > div {
+
+      .ai-select>div {
         display: inline-block;
         vertical-align: middle;
         margin-right: 30px;
@@ -707,14 +698,17 @@
       }
     }
   }
+
   .devide {
     height: 10px;
     background: #e9ebf2;
   }
+
   .top {
     width: 100%;
     padding: 10px 20px;
     box-sizing: border-box;
+
     .swiper-box {
       height: 100%;
       float: left;
@@ -722,14 +716,17 @@
       margin-top: -10px;
       position: relative;
     }
+
     .swiper-container {
       position: initial;
       min-width: 472px;
       width: 86%;
     }
+
     .swiper-slide {
       position: relative;
       width: 100%;
+
       .item-card {
         height: 110px !important;
         max-width: 126px;
@@ -745,6 +742,7 @@
         box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.07);
         border-radius: 4px;
         cursor: pointer;
+
         .icon-xingzhuangcopy {
           position: relative;
           left: 0px;
@@ -764,16 +762,19 @@
           backdrop-filter: blur(1px) brightness(100%);
           display: none;
         }
+
         @media screen and (max-width: 1440px) {
           max-width: 110px;
         }
       }
+
       .item-card:hover {
         .mask {
           display: block;
         }
       }
     }
+
     .swiper-pre-border,
     .swiper-next-border {
       width: 40px;
@@ -784,6 +785,7 @@
       z-index: 99;
       border-radius: 4em;
       outline: none;
+
       .icon-btn {
         color: rgb(255, 255, 255);
         text-align: center;
@@ -791,15 +793,19 @@
         cursor: pointer;
       }
     }
+
     .swiper-pre-border {
       left: 10px;
     }
+
     .swiper-pre-border:hover {
       background: #666;
     }
+
     .swiper-next-border {
       right: 10px;
     }
+
     .swiper-next-border:hover {
       background: #666;
     }
@@ -808,24 +814,30 @@
       float: right;
       width: 54%;
       height: 144px;
+
       .card-box {
         width: 54% !important;
       }
+
       .eCharts-box {
         width: 45%;
+
         canvas {
           width: 98% !important;
         }
       }
     }
+
     .task-css {
       text-align: left;
       margin-bottom: 14px;
     }
   }
+
   .bottom {
     width: 100%;
     margin-bottom: 15px;
+
     .bottom-side {
       height: 100%;
       width: 250px;
@@ -835,6 +847,7 @@
       border-bottom: 1px solid #ccc;
       padding: 10px;
       box-sizing: border-box;
+
       .selectTask {
         margin: 10px auto;
         width: 140px;
@@ -842,6 +855,7 @@
         box-sizing: border-box;
         border: 1px solid #ccc;
         position: relative;
+
         .selectTaskDelete {
           position: absolute;
           right: 10px;
@@ -850,17 +864,21 @@
         }
       }
     }
+
     .bottom-right {
       padding: 10px 20px;
       box-sizing: border-box;
+
       .draw-and-time-box {
         height: 400px;
         width: 100%;
+
         //min-width: 1150px;
         .draw-box,
         .time-box {
           float: left;
           height: 100%;
+
           .img-box {
             height: calc(100% - 32px);
             //width: 90%;
@@ -871,48 +889,60 @@
             // align-items: center;
             position: relative;
             overflow: hidden;
+
             .refresh-btn {
               position: absolute;
               right: 10px;
               top: 10px;
             }
+
             img {
               width: 90%;
               padding: 5px;
               box-sizing: border-box;
             }
+
             .swiper-box-container {
               margin-top: -10px;
               text-align: left;
               padding: 0px 8px 0px 8px;
+
               .el-card__body {
                 height: 100%;
                 padding: 0px;
               }
+
               height: calc(100% - 10px);
+
               .info {
                 width: 100%;
                 height: 100%;
+
                 .info-left {
                   width: 50%;
                   height: 100%;
                   float: left;
+
                   img {
                     width: 100%;
                   }
                 }
+
                 .info-right {
                   width: 50%;
                   height: 100%;
                   float: left;
                   box-sizing: border-box;
                   padding: 10px;
+
                   p {
                     padding: 4px 0px;
                   }
+
                   .infoIcon {
                     height: 24px;
                     cursor: pointer;
+
                     i {
                       margin: 5px;
                       font-size: 22px;
@@ -921,6 +951,7 @@
                 }
               }
             }
+
             .pre-border,
             .next-border {
               width: 40px;
@@ -931,6 +962,7 @@
               z-index: 99;
               border-radius: 4em;
               outline: none;
+
               .icon-btn {
                 color: rgb(255, 255, 255);
                 text-align: center;
@@ -938,26 +970,33 @@
                 cursor: pointer;
               }
             }
+
             .pre-border {
               left: -9px;
             }
+
             .pre-border:hover {
               background: #666;
             }
+
             .next-border {
               right: 10px;
             }
+
             .next-border:hover {
               background: #666;
             }
           }
         }
+
         .draw-box {
           width: 576px;
         }
+
         .draw-box-title {
           text-align: left;
           margin-top: -3px;
+
           .btn-css {
             position: relative;
             left: 514px;
@@ -966,6 +1005,7 @@
         }
       }
     }
+
     .bottom-right::-webkit-scrollbar {
       width: 0 !important;
     }
@@ -977,9 +1017,11 @@
     font-size: 14px;
     cursor: pointer;
   }
+
   .add-btn:hover {
     color: #2249b4;
   }
+
   .nocamera-css {
     cursor: not-allowed;
     color: #3d68e1;
@@ -995,22 +1037,25 @@
     margin-right: 7px;
     background: #3d68e1;
   }
+
   .loadingClass {
     text-align: center;
   }
-  .el-loading-spinner-div {
-  }
+
+  .el-loading-spinner-div {}
 }
 </style>
 <style lang="scss" scoped>
 .el-dropdown-menu {
   width: 200px;
+
   .el-dropdown-menu__item {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 }
+
 .el-loading-spinner {
   background: url("/images/cameraAccess/loading.gif") no-repeat;
   top: 50%;
@@ -1019,6 +1064,7 @@
   text-align: center;
   position: absolute;
   margin-left: 260px;
+
   .el-loading-text {
     color: #3d68e1;
     margin: 3px 0;

--
Gitblit v1.8.0