From bb228ead0110a8626a0d0bceeea74522ff1a0a8f Mon Sep 17 00:00:00 2001
From: hanbaoshan <hanbaoshan@aiotlink.com>
Date: 星期四, 24 九月 2020 10:25:07 +0800
Subject: [PATCH] 数据栈独立场景显示文件底图

---
 src/components/canvas/Dialog.vue                    |    6 
 src/pages/ai/index/App.vue                          |    2 
 src/pages/cameraAccess/components/LinkageRule.vue   |    2 
 src/components/canvas/index.vue                     |   27 +++
 src/pages/cameraAccess/components/DataStackInfo.vue |   35 ++++
 src/pages/cameraAccess/components/SeparateRules.vue |  344 ++++++++++++++++++++++++++++++++++++++----------
 6 files changed, 325 insertions(+), 91 deletions(-)

diff --git a/src/components/canvas/Dialog.vue b/src/components/canvas/Dialog.vue
index 8245db6..8d66184 100644
--- a/src/components/canvas/Dialog.vue
+++ b/src/components/canvas/Dialog.vue
@@ -97,11 +97,7 @@
           width="960"
           height="540"
           :style="
-            `position:static;background:url(${
-              snapshot_url
-                ? `/httpImage/${snapshot_url}`
-                : backImg
-            }) 0% 0%/960px 540px no-repeat;`
+            `position:static;background:url(${snapshot_url}) 0% 0%/960px 540px no-repeat;`
           "
         ></canvas>
         <p
diff --git a/src/components/canvas/index.vue b/src/components/canvas/index.vue
index ea4715e..cd8f3b5 100644
--- a/src/components/canvas/index.vue
+++ b/src/components/canvas/index.vue
@@ -4,10 +4,10 @@
       ref="myCanvas"
       :width="canvasWidth"
       :height="canvasHeight"
-      :style="`background:url(${snapshot_url ? `/httpImage/${snapshot_url}` : blackImg}) 100% 100% / 576px 324px; no-repeat; background-size: contain;`"
+      :style="`background:url(${canvasBg}) center / 576px 324px no-repeat; background-size: contain;`"
     ></canvas>
 
-    <el-tooltip content="鍒锋柊搴曞浘" placement="bottom" popper-class="atooltip">
+    <el-tooltip content="鍒锋柊搴曞浘" placement="bottom" popper-class="atooltip" v-if="isShowRefresh">
       <span class="iconfont icongengxin" @click="refresh"></span>
     </el-tooltip>
     <p class="tip" :style="disabled ? `display:block;` : `display:none;`">鎵归噺閰嶇疆鏂瑰紡涓嶅厑璁哥粯鍒跺尯鍩燂紝璇烽�夋嫨鎽勫儚鏈鸿繘琛屽尯鍩熺粯鍒�</p>
@@ -21,7 +21,7 @@
       <canvas-dialog
         ref="bigCanvas"
         :canvasDataToChild="canvasData"
-        :snapshot_url="snapshot_url"
+        :snapshot_url="canvasBg"
         @refresh="refresh"
       ></canvas-dialog>
       <span slot="footer" class="dialog-footer">
@@ -47,6 +47,14 @@
     isGB28181: {
       default: false,
       type: Boolean
+    },
+    isShowRefresh: {
+      default: true,
+      type: Boolean
+    },
+    sourceType: {
+      default: 1,
+      type: Number
     },
     isShowDrawArrow: {
       default: false,
@@ -87,6 +95,19 @@
       default: 324
     }
   },
+  computed:{
+    canvasBg(){
+      if(this.snapshot_url){
+        if(this.sourceType == 2){
+          return `/files/${this.snapshot_url}`
+        }else{
+          return `/httpImage/${this.snapshot_url}`
+        }
+      }else{
+        return this.blackImg;
+      }
+    }
+  },
   data() {
     return {
       blackImg: require("../../assets/img/baseimg.png"),
diff --git a/src/pages/ai/index/App.vue b/src/pages/ai/index/App.vue
index 320b0d1..83b1d58 100644
--- a/src/pages/ai/index/App.vue
+++ b/src/pages/ai/index/App.vue
@@ -28,7 +28,7 @@
                         <div class="mask flex-center">
                           <div class="info-onmask">
                             <div>褰撳墠鐗堟湰:{{item.version}}</div>
-                            <div>杩滅鐗堟湰:{{item.remoteVersion}}</div>
+                            <div>鏈�鏂扮増鏈�:{{item.remoteVersion}}</div>
                           </div>
                           <el-button type="primary" class="bot-btn" @click="donwload(item)">鍗囩骇</el-button>
                         </div>
diff --git a/src/pages/cameraAccess/components/DataStackInfo.vue b/src/pages/cameraAccess/components/DataStackInfo.vue
index fe622ac..a2ce20f 100644
--- a/src/pages/cameraAccess/components/DataStackInfo.vue
+++ b/src/pages/cameraAccess/components/DataStackInfo.vue
@@ -105,7 +105,7 @@
         </el-tooltip>
 
         <!-- 鏂囦欢涓婁紶 -->
-        <el-button type="primary" size="small" @click="handleUpload">
+        <el-button type="primary" size="small" :disabled="!DataStackPool.selectedDir.id" @click="handleUpload">
           涓婁紶
           <i class="el-icon-upload el-icon--right"></i>
         </el-button>
@@ -129,10 +129,20 @@
         <template slot-scope="{row}">
           <div :class="snapshotClass">
             <el-image
-              v-show="row.snapshot_url !== ''"
+              v-if="row.type==1"
               style="width: 30x; height: 30px"
               :src="'/httpImage/' + row.snapshot_url"
               fit="fill"
+              :preview-src-list="['/httpImage/' + row.snapshot_url]"
+            >
+              <div slot="error" :class="snapshotClass"></div>
+            </el-image>
+            <el-image
+              v-if="row.type==2"
+              style="width: 30x; height: 30px"
+              :src="`/files/${row.identifier}.jpg`"
+              fit="fill"
+              :preview-src-list="[`/files/${row.identifier}.jpg`]"
             >
               <div slot="error" :class="snapshotClass"></div>
             </el-image>
@@ -254,7 +264,8 @@
 
     <!-- 鏂囦欢棰勮 -->
     <el-dialog title="鏌ョ湅鏂囦欢" :visible.sync="previewDialog" width="500px">
-      <video :src="videoUrl" controls style="margin-top: 12px;">鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 video 鏍囩銆�</video>
+      <video v-if="videoUrl" :src="videoUrl" controls style="margin-top: 12px;">鎮ㄧ殑娴忚鍣ㄤ笉鏀寔 video 鏍囩銆�</video>
+      <el-image v-if="imgUrl" :src="imgUrl"></el-image>
     </el-dialog>
 
     <el-dialog title="绉诲姩/澶嶅埗" :visible.sync="fileDialog" width="500px">
@@ -364,6 +375,7 @@
   data() {
     return {
       videoUrl: "",
+      imgUrl: "",
       previewDialog: false,
       fileDialog: false,
       isDisabled: true,
@@ -403,9 +415,13 @@
   },
   methods: {
     preview(row) {
-      if (this.form.type === 1) {
-        this.previewDialog = true;
+      this.previewDialog = true;
+      if (row.type === 1) {
+        
         this.videoUrl = "/files/" + row.identifier + ".mp4"
+      }else if(row.type===2){
+        
+        this.imgUrl = "/files/" + row.identifier + ".jpg"
       }
     },
     // 娓呯┖杈撳叆妗�
@@ -429,6 +445,7 @@
       this.fileList = [];
     },
     selectDir(node) {
+      debugger
       if (node.id === "") {
         return
       }
@@ -451,6 +468,8 @@
       this.total = 0;
       this.multipleSelection = []; // 娓呯┖閫変腑鐘舵��
       this.initFetchListTask();
+      this.videoUrl = '';
+      this.imgUrl = '';
     },
     initFetchListTask() {
       const uid = Math.round(Math.random() * 1000);
@@ -477,6 +496,7 @@
 
           // 瀹氭椂鍒锋柊浼氭竻绌洪�変腑鐘舵�侊紝鍦ㄨ繖閲屾仮澶�
           this.fileList.forEach(row => {
+            //this.polygonDatas.push({snapshot_url:row.snapshot_url})
             if (this.multipleSelection.indexOf(row.id) !== -1) {
               this.$nextTick(() => {
                 this.$refs.multipleTable.toggleRowSelection(row);
@@ -553,6 +573,7 @@
       this.multipleSelection = [];
     },
     handleUpload() {
+      console.log(this.DataStackPool.selectedDir.id)
       console.log(this.$refs.uploader.$refs.button.$refs.btn.click())
     },
     handleRefrashFileList(val) {
@@ -719,6 +740,10 @@
   .el-form-item__label {
     text-align: left;
   }
+  .el-button--primary.is-disabled{
+    background-color: #9eb4f0 !important;
+    border-color: #9eb4f0 !important; 
+  }
   .label {
     color: #606266;
     font-size: 14px;
diff --git a/src/pages/cameraAccess/components/LinkageRule.vue b/src/pages/cameraAccess/components/LinkageRule.vue
index afc9aad..dcf7ca7 100644
--- a/src/pages/cameraAccess/components/LinkageRule.vue
+++ b/src/pages/cameraAccess/components/LinkageRule.vue
@@ -208,7 +208,7 @@
       this.$nextTick(() => {
         this.Carmeras = [];
         this.loading = false;
-        this.showSysInfo = true
+        this.showSysInfo = true;
         if (this.TreeDataPool.treeActiveName == 'dataStack') {
           this.TreeDataPool.checkedLocalVedio.forEach(camera => {
             this.Carmeras.push(new VideoRuleData(camera.id));
diff --git a/src/pages/cameraAccess/components/SeparateRules.vue b/src/pages/cameraAccess/components/SeparateRules.vue
index d372181..b176fa1 100644
--- a/src/pages/cameraAccess/components/SeparateRules.vue
+++ b/src/pages/cameraAccess/components/SeparateRules.vue
@@ -15,12 +15,8 @@
             </span>
           </div>
 
-          <div
-            v-if="Camera.analytics"
-            class="flex-box"
-            v-show="cameraType === 'camera'"
-          >
-            <span class="label" >澶勭悊鏂瑰紡</span>
+          <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'">
+            <span class="label">澶勭悊鏂瑰紡</span>
             <toggle-button
               :value="Camera.dealWay"
               :width="60"
@@ -31,12 +27,8 @@
             />
           </div>
 
-          <div
-            v-if="Camera.analytics"
-            class="flex-box"
-            v-show="cameraType === 'camera'"
-          >
-            <span class="label" >鍒嗚鲸鐜�</span>
+          <div v-if="Camera.analytics" class="flex-box" v-show="cameraType === 'camera'">
+            <span class="label">鍒嗚鲸鐜�</span>
             <el-select
               v-model="Camera.selectResolution"
               placeholder="璇烽�夋嫨"
@@ -54,15 +46,12 @@
           </div>
 
           <div v-if="Camera.analytics" class="flex-box">
-            <span class="label" >鏅鸿兘璁$畻鑺傜偣: {{ Camera.runServerName}}</span>
+            <span class="label">鏅鸿兘璁$畻鑺傜偣: {{ 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" >
+            <div class="channel flex-box">
               <el-tooltip
                 effect="dark"
                 content="澶嶅埗姝ゆ憚鍍忔満绠楁硶瑙勫垯"
@@ -95,7 +84,7 @@
 
     <div class="devide"></div>
 
-    <div class="top" >
+    <div class="top">
       <p class="task-css">
         <b style="font-size: 14px; line-height: 18px;">鍦烘櫙</b>
       </p>
@@ -112,7 +101,7 @@
       </div>
     </div>
 
-    <div class="bottom" >
+    <div class="bottom">
       <div class="devide"></div>
       <div class="bottom-right">
         <div class="draw-and-time-box">
@@ -133,25 +122,78 @@
               >{{ Camera.camearInfo.alias ? Camera.camearInfo.alias: Camera.camearInfo.name }}</b>
             </div>
             <div class="img-box">
-              <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"
-                @fromCanvas="getCanvasData"
-                @changeLoading="changeLoading"
-                @refresh="refresh"
-              ></polygon-canvas>
+              <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"
+                  @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-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>
+                      </div>
+                    </swiper-slide>
+                  </swiper>
+                  <div class="swiper-local-prev" v-show="swipercanvasData.length>1" @click="prevClick">
+                    <div class="icon-btn" slot="button-prev">
+                      <i class="iconfont iconzuo"></i>
+                    </div>
+                  </div>
+                  <div class="swiper-local-next" v-show="swipercanvasData.length>1" @click="nextClick">
+                    <div class="icon-btn" slot="button-next">
+                      <i class="iconfont iconyou1"></i>
+                    </div>
+                  </div>
+                </div>
+              </template>
             </div>
           </div>
           <div style="float:left;width:calc(10% - 90px);height:100%;"></div>
@@ -192,7 +234,7 @@
 } from '@/api/scene'
 
 import { changeRunType } from "@/api/pollConfig";
-
+import { findAllFileByStackId } from "@/api/localVedio";
 import VideoRuleData from "@/Pool/VideoRuleData";
 
 import TimeSlider from "./TimeSlider";
@@ -201,6 +243,8 @@
 import Sysinfo from "@/components/subComponents/SystemInfo";
 import SceneRule from "./SceneRule";
 import SlideScene from "./scene/SlideScene";
+import { duration } from 'moment';
+
 
 export default {
   components: {
@@ -218,16 +262,28 @@
     }
   },
   computed: {
-    cameraType() {
+    cameraType () {
       return this.TreeDataPool.treeActiveName === 'camera' ? "camera" : "dataStack"
     }
   },
-  data() {
+  data () {
     return {
       mockSceneData: [],
       loading: false,
       Camera: new VideoRuleData(),
       runType: -1,
+      getStackFileLoading: false,
+      canvasSwiperOption: {
+        grabCursor: true,
+        pagination: {
+          el: ".swiper-pagination",
+          type: "fraction"
+        },
+        navigation: {
+          nextEl: ".swiper-local-next",
+          prevEl: ".swiper-local-prev"
+        }
+      },
       swiperOption: {
         slidesPerView: 5,
         spaceBetween: 8,
@@ -249,16 +305,108 @@
       showSysInfo: false,
       showCanvas: true,
       canvasWidth: 576,
-      canvasHeight: 324
+      canvasHeight: 324,
+      stackId: '',
+      swiperIndex: 0,
+      swipercanvasData: [],
+      stackFilesPage: 1,
+      stackFilesSize: 5,
     };
   },
-  mounted() {
+  mounted () {
     this.mockAsync();
     this.PollData.statistics();
-  },
 
+  },
+  watch: {
+    'Camera.cameraId':{
+      handler(n,o){
+        if (n) {
+          if (this.TreeDataPool.treeActiveName == "dataStack") {
+            this.stackFilesPage = 1;
+            this.stackFilesSize = 5;
+            this.stackId = n;
+            if(this.stackId){
+              this.swipercanvasData = [];
+              this.getStackFiles()
+            }
+          }
+        }
+      }
+    }
+  },
   methods: {
-    mockAsync() {
+    prevClick(){
+      console.log(this.swiperIndex)
+      console.log(this.$refs.swiper.swiper.activeIndex)
+      if(this.swiperIndex == 0){
+        console.log('鏈鍒嗛〉鐨勭涓�鏉�')
+        //璇锋眰涓婁竴椤�
+        if(this.stackFilesPage > 1){
+          this.stackFilesPage--;
+          this.getStackFiles();
+        }else{
+          this.$message({
+            type:'info',
+            message:'褰撳墠宸叉槸绗竴椤�'
+          });
+        }
+        
+      }
+    },
+    nextClick(){
+      console.log(this.swiperIndex)
+      console.log(this.$refs.swiper.swiper.activeIndex)
+      if(this.swiperIndex == this.swipercanvasData.length-1){
+        console.log('鏈�鍚庝竴寮�,鍔犺浇鏇村')
+        //璇锋眰涓嬩竴椤�
+        this.stackFilesPage++;
+        this.getStackFiles();
+      }
+    },
+    getStackFiles () {
+      this.getStackFileLoading = true;
+      findAllFileByStackId({ name: '', stackId: this.stackId, page: this.stackFilesPage, size: this.stackFilesSize, type: 0 }).then(res => {
+        if (res && res.success ) {
+          if(res.data.dataList.length > 0){
+            this.swipercanvasData = [];
+            this.swipercanvasData = res.data.dataList.map(item => {
+              return {
+                name: item.name,
+                stackId: item.stack_id,
+                baseImg: item.type == 2 ? `/files/${item.identifier}.jpg` : item.snapshot_url,
+                type: item.type,
+                id: item.id,
+                loading: false
+              }
+            });
+            this.swiperIndex = 0;
+            this.$refs.swiper.swiper.activeIndex = 0;
+            
+          }else{
+            console.log(this.swipercanvasData)
+            this.$message({
+              type:'info',
+              message:'宸叉棤鏇村鏁版嵁!'
+            });
+          }
+        }else{
+          console.log(this.swipercanvasData)
+          this.$message({
+            type:'error',
+            message:'鏁版嵁璇锋眰澶辫触,璇风◢鍚庨噸璇�!'
+          });
+        }
+        this.getStackFileLoading = false;  
+      }).catch(e => {
+        console.log(e);
+        this.getStackFileLoading = false;
+      });
+    },
+    swiperSlideChange () {
+      this.swiperIndex = this.$refs.swiper.swiper.activeIndex;
+    },
+    mockAsync () {
       setTimeout(() => {
         this.mockSceneData = [
           { scenename: "name1", id: 1, icon: ["iconrenlianjiance", "icongetijingzhi"] },
@@ -284,10 +432,10 @@
         ];
       }, 3000)
     },
-    drawBaseImg() {
+    drawBaseImg () {
       this.$refs.canvas.showModal();
     },
-    getCanvasData(data) {
+    getCanvasData (data) {
       let polyon = { ...data };
       polyon.camera_id = this.Camera.cameraId;
       savePolygon(polyon).then(rsp => {
@@ -295,17 +443,18 @@
         this.Camera.getCameraTask();
       });
     },
-    refresh(url) {
+    refresh (url) {
       this.Camera.baseImg = url
     },
     // 鍒濆鍖栨憚鍍忔満淇℃伅锛岀埗缁勪欢璋冪敤
-    async initCameraData(id) {
+    async initCameraData (id) {
       this.Camera = new VideoRuleData();
 
       if (id && id !== "") {
         this.loading = false;
         this.Camera.cameraId = id;
         await this.Camera.update();
+        debugger
       }
 
       this.$refs.timeSlider.activeTab = this.VideoManageData.TimeRules[0].id;
@@ -318,7 +467,8 @@
       })
 
     },
-    saveSceneRule(groupRule) {
+
+    saveSceneRule (groupRule) {
       const payload = { ...groupRule }
       payload.cameraIds = [this.Camera.cameraId];
       let _this = this;
@@ -332,19 +482,19 @@
           //鍒锋柊宸︿晶鏍�
           debugger
           _this.$root.$children[0].$children[0].querySearchAsync('camera')
- 
+
         }
       });
     },
-    delScenRule() {
+    delScenRule () {
       this.Camera.update();
     },
-    changeLoading(params) {
+    changeLoading (params) {
       this.loading = params
       // console.log(this.loading,'changeLoading',params)
     },
     //鏄惁杩涜瑙嗛鍒嗘瀽澶勭悊
-    pollEnable(row) {
+    pollEnable (row) {
       let val = 0
       if (row) {
         if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
@@ -380,7 +530,7 @@
       this.PollData.statisticTaskInfo();
     },
     //瀹炴椂銆佽疆璇㈠垏鎹�
-    changePoll(row) {
+    changePoll (row) {
       //鍒ゆ柇鏄柊澧炶繕鏄洿鏂�
       if (this.Camera.cameraId && this.Camera.cameraId !== undefined) {
         if (this.PollData.RealTimeSum < this.PollData.channelTotal) {
@@ -429,7 +579,7 @@
       }
     },
     //澶嶅埗
-    ctrlC() {
+    ctrlC () {
       this.TreeDataPool.ctrlCameraId = this.Camera.cameraId;
       this.TreeDataPool.ctrlCameraName = this.Camera.cameraName;
       this.$notify({
@@ -437,7 +587,7 @@
         message: "澶嶅埗绠楁硶鎴愬姛锛�"
       })
     },
-    ctrlV() {
+    ctrlV () {
       if (this.Camera.cameraId === this.TreeDataPool.ctrlCameraId) {
         this.$notify({
           type: "warning",
@@ -474,6 +624,47 @@
 };
 </script>
 <style lang="scss">
+.el-message--info .el-message__content{
+  color: #999;
+}
+.swiper-container {
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  overflow: hidden;
+  list-style: none;
+  padding: 0;
+  z-index: 1;
+}
+.swiper-local-prev,
+.swiper-local-next {
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  background: #8888;
+  top: 40%;
+  z-index: 99;
+  border-radius: 4em;
+  outline: none;
+  .icon-btn {
+    color: rgb(255, 255, 255);
+    text-align: center;
+    line-height: 38px;
+    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;
@@ -482,42 +673,42 @@
     // height: 38px;
     // position: absolute;
     // left: -38px;
-    height:40px;
+    height: 40px;
     .check-area {
       width: 100%;
       height: 100%;
       padding: 0 20px;
       -webkit-box-sizing: border-box;
       box-sizing: border-box;
-      .ai-select{
+      .ai-select {
         text-align: left;
         line-height: 30px;
         height: 30px;
-        .flex-box{
-          .label{
-            &+label,&+div{
+        .flex-box {
+          .label {
+            & + label,
+            & + div {
               margin-left: 10px;
               line-height: 1;
             }
-            
           }
         }
       }
-      .ai-select>div{
+      .ai-select > div {
         display: inline-block;
         vertical-align: middle;
         margin-right: 30px;
-        
-        .channel{
+
+        .channel {
           display: inline-block;
           vertical-align: middle;
         }
       }
     }
   }
-  .devide{
+  .devide {
     height: 10px;
-    background: #E9EBF2;
+    background: #e9ebf2;
   }
   .top {
     width: 100%;
@@ -611,18 +802,19 @@
     .swiper-next-border:hover {
       background: #666;
     }
+
     .top-right {
       float: right;
       width: 54%;
       height: 144px;
-      .card-box{
-        width: 54%!important;
+      .card-box {
+        width: 54% !important;
       }
-      .eCharts-box{
+      .eCharts-box {
         width: 45%;
-        canvas{
-          width: 98%!important;
-        } 
+        canvas {
+          width: 98% !important;
+        }
       }
     }
     .task-css {
@@ -819,7 +1011,7 @@
   }
 }
 .el-loading-spinner {
-  background: url("/images/cameraAccess/loading.gif") no-repeat;
+  background: url('/images/cameraAccess/loading.gif') no-repeat;
   top: 50%;
   margin-top: -21px;
   width: calc(100% - 260px) !important;

--
Gitblit v1.8.0