From cae7f403bb70f6c2752bedacbceb55e6f2c79891 Mon Sep 17 00:00:00 2001
From: odc.xiaohui <xiaohui@Q1>
Date: 星期四, 15 十二月 2022 16:06:50 +0800
Subject: [PATCH] 2022-12-15 肖辉 智能巡查--预警研判 报警信息突出可点击,修改默认不弹出

---
 src/views/intelligentPatrol/studyJudge/index.vue |  646 ++++++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 512 insertions(+), 134 deletions(-)

diff --git a/src/views/intelligentPatrol/studyJudge/index.vue b/src/views/intelligentPatrol/studyJudge/index.vue
index 54ec2f1..f10e22f 100644
--- a/src/views/intelligentPatrol/studyJudge/index.vue
+++ b/src/views/intelligentPatrol/studyJudge/index.vue
@@ -1,84 +1,207 @@
 <template>
   <div class="study-judge">
-    <div class="study-judge-header">
-      <span>鎮ㄦ湁{{ countData.register }}鏉″緟瀹℃牳鎶ヨ淇℃伅,浠婃棩绔嬫{{ countData.review }}鏉�,鍐嶅涔爗{ countData.study }}鏉�</span>
-    </div>
+    <!--    <div class="study-judge-header">-->
+    <!--      <span-->
+    <!--        >鎮ㄦ湁{{ countData.review }}鏉″緟瀹℃牳鎶ヨ淇℃伅,浠婃棩绔嬫{{-->
+    <!--          countData.register-->
+    <!--        }}鏉�,鍐嶅涔爗{ countData.study }}鏉�</span-->
+    <!--      >-->
+    <!--    </div>-->
     <div class="study-judge-main">
-      <div class="sjm-header">
-        <div class="sjm-header-left">
-          <span class="moni-name">鐩戞帶鐐逛綅鍚嶇О: {{ currentEvent.name }} </span>
-          <span class="moni-area">{{ currentEvent.street }}</span>
-        </div>
-        <div class="sjm-header-right">
-          <el-button size="small">瀹炴椂棰勮</el-button>
-          <el-button size="small">褰曞儚鍥炴斁</el-button>
-        </div>
-      </div>
+      <!--      <div class="sjm-header">-->
+      <!--        <div class="sjm-header-left">-->
+      <!--          <span class="moni-name">鐩戞帶鐐逛綅鍚嶇О: {{ currentEvent.name }} </span>-->
+      <!--          <span class="moni-area">{{ currentEvent.street }}</span>-->
+      <!--          <span>{{ currentEvent.address }}</span>-->
+      <!--        </div>-->
+      <!--        <div class="sjm-header-right">-->
+      <!--          <el-button size="small" @click="createVideo(currentEvent, 'live')"-->
+      <!--            >瀹炴椂棰勮</el-button-->
+      <!--          >-->
+      <!--          <el-button size="small" @click="createVideo(currentEvent, 'playback')"-->
+      <!--            >褰曞儚鍥炴斁</el-button-->
+      <!--          >-->
+      <!--        </div>-->
+      <!--      </div>-->
       <div class="sjm-content">
         <div class="sjm-content-left">
-          <div class="img-item" v-for="(item, index) in imageList" :key="item.id">
-            <span>鎶ヨ鍥剧墖</span>
-            <img :src="item">
-            <span v-if="index === 0">鎶ヨ鏃堕棿锛歿{ currentEvent.alarmTime }}</span>
+          <!--          <div class="sjm-header-left">-->
+          <!--            <span class="moni-name">鐩戞帶鐐逛綅鍚嶇О: {{ currentEvent.name }} </span>-->
+          <!--            <span class="moni-area">{{ currentEvent.street }}</span>-->
+          <!--            <span>{{ currentEvent.address }}</span>-->
+          <!--          </div>-->
+          <span @click="openDialogTable" class="count-data-span"
+          >鎮ㄦ湁{{ countData.review }}鏉″緟瀹℃牳鎶ヨ淇℃伅,浠婃棩绔嬫{{
+              countData.register
+            }}鏉�,鍐嶅涔爗{ countData.study }}鏉�</span
+          >
+          <div class="sjm-header-left">
+            <span class="moni-name"
+              >鐩戞帶鐐逛綅鍚嶇О: {{ currentEvent.name }}
+            </span>
+            <span class="moni-area">{{ currentEvent.street }}</span>
+            <span>{{ currentEvent.address }}</span>
           </div>
+          <div
+            class="img-item"
+            v-for="(item, index) in imageList"
+            :key="item.id"
+          >
+            <span>鎶ヨ鍥剧墖</span>
+            <img :src="item" />
+            <span v-if="index === 0"
+              >鎶ヨ鏃堕棿锛歿{ currentEvent.alarmTime }}</span
+            >
+          </div>
+          <div class="img-item" v-for="item in imageList" :key="item.id">
+            <img :src="item" />
+          </div>
+          <el-form
+            ref="currentEvent"
+            label-width="120px"
+            :model="eventInfoData"
+            :rules="rules"
+            label-position="left"
+            class="left-form"
+          >
+            <el-form-item label="浜嬩欢缂栧彿:">
+              <span>{{ currentEvent.code }}</span>
+            </el-form-item>
+            <el-form-item label="浜嬩欢绛夌骇:">
+              <span>{{ currentEvent.grade }}</span>
+            </el-form-item>
+            <el-form-item label="棣栨鎶ヨ鏃堕棿:">
+              <span>{{ currentEvent.alarmTime }}</span>
+            </el-form-item>
+            <el-form-item label="鏈�杩戞姤璀︽椂闂�:">
+              <span>{{ currentEvent.currentAlarmTime }}</span>
+            </el-form-item>
+            <el-form-item label="鎸佺画鏃堕棿:">
+              <span>{{ currentEvent.conntinueTime }}</span>
+            </el-form-item>
+          </el-form>
         </div>
         <div class="sjm-content-center">
-          鍦板浘瀹瑰櫒
+          <div class="map">
+            <MyMap :point="point" :zoom="zoom" :mark="mark"></MyMap>
+          </div>
+          <!-- <iframe src="https://183.245.159.161:8282/OneMap/index.html#/OneMap?code=2&clientVersion=&skin=white&locale=zh&otherAuthor=allowable"></iframe> -->
         </div>
         <div class="sjm-content-right">
           <div class="card-box">
-            <div class="card-header">
-              <span>鎶ヨ璁板綍</span>
-              <span>涔卞仠涔辨斁杩濇硶鍗犻亾</span>
+            <div class="but-live">
+              <el-button size="small" @click="createVideo(currentEvent, 'live')"
+                >瀹炴椂棰勮</el-button
+              >
+              <el-button
+                size="small"
+                @click="createVideo(currentEvent, 'playback')"
+                >褰曞儚鍥炴斁</el-button
+              >
             </div>
-            <el-form ref="currentEvent" label-width="120px" :model="eventInfoData" :rules="rules">
-              <el-form-item label="浜嬩欢缂栧彿:">
-                <span>{{ currentEvent.code }}</span>
-              </el-form-item>
-              <el-form-item label="浜嬩欢绛夌骇:">
-                <span>{{ currentEvent.grade }}</span>
-              </el-form-item>
-              <el-form-item label="棣栨鎶ヨ鏃堕棿:">
-                <span>{{ currentEvent.alarmTime }}</span>
-              </el-form-item>
-              <el-form-item label="鏈�杩戞姤璀︽椂闂�:">
-                <span>{{ currentEvent.currentAlarmTime }}</span>
-              </el-form-item>
-              <el-form-item label="鎸佺画鏃堕棿:">
-                <span>{{ currentEvent.conntinueTime }}</span>
-              </el-form-item>
+            <div class="card-header">
+              <span>鎶ヨ璁板綍--{{ currentEvent.algoName }}</span>
+            </div>
+            <el-form
+              ref="currentEvent"
+              label-width="120px"
+              :model="eventInfoData"
+              :rules="rules"
+            >
+              <!--              <el-form-item label="浜嬩欢缂栧彿:">-->
+              <!--                <span>{{ currentEvent.code }}</span>-->
+              <!--              </el-form-item>-->
+              <!--              <el-form-item label="浜嬩欢绛夌骇:">-->
+              <!--                <span>{{ currentEvent.grade }}</span>-->
+              <!--              </el-form-item>-->
+              <!--              <el-form-item label="棣栨鎶ヨ鏃堕棿:">-->
+              <!--                <span>{{ currentEvent.alarmTime }}</span>-->
+              <!--              </el-form-item>-->
+              <!--              <el-form-item label="鏈�杩戞姤璀︽椂闂�:">-->
+              <!--                <span>{{ currentEvent.currentAlarmTime }}</span>-->
+              <!--              </el-form-item>-->
+              <!--              <el-form-item label="鎸佺画鏃堕棿:">-->
+              <!--                <span>{{ currentEvent.conntinueTime }}</span>-->
+              <!--              </el-form-item>-->
               <el-form-item label="鍏宠仈搴楅摵" prop="store">
-                <el-select v-model="eventInfoData.store" @change="selectStoreChange" placeholder="璇烽�夋嫨鍏宠仈搴楅摵">
-                  <el-option v-for="store in storeList" :value="store.id" :label="store.storeName" :key="store.id" />
+                <el-select
+                  v-model="eventInfoData.store"
+                  clearable
+                  @change="selectStoreChange"
+                  placeholder="璇烽�夋嫨鍏宠仈搴楅摵"
+                >
+                  <el-option
+                    v-for="store in storeList"
+                    :value="store.id"
+                    :label="store.storeName"
+                    :key="store.id"
+                  />
                 </el-select>
               </el-form-item>
               <el-form-item v-if="eventInfoData.store" label="搴楅摵寰楀垎:">
-                <span>{{ selectStoreChange(eventInfoData.store).storeScore }}</span>
+                <span>{{
+                  selectStoreChange(eventInfoData.store).storeScore
+                }}</span>
               </el-form-item>
               <el-form-item label="澶勭悊鎰忚:" prop="state">
                 <el-radio-group v-model="eventInfoData.state">
-                  <el-radio :label="item.id" v-for="item in stateList" :key="item.id">{{ item.label }}</el-radio>
+                  <el-radio
+                    :label="item.id"
+                    v-for="item in stateList"
+                    :key="item.id"
+                    >{{ item.label }}</el-radio
+                  >
                 </el-radio-group>
               </el-form-item>
               <el-form-item label="澶х被鍚嶇О:" prop="categoryId">
-                <el-select v-model="eventInfoData.categoryId" placeholder="璇烽�夋嫨澶х被鍚嶇О" @change="categoryChange">
-                  <el-option v-for="category in categoryOptions" :key="category.id" :value="category.id" :label="category.name" />
+                <el-select
+                  v-model="eventInfoData.categoryId"
+                  placeholder="璇烽�夋嫨澶х被鍚嶇О"
+                  @change="categoryChange"
+                >
+                  <el-option
+                    v-for="category in categoryOptions"
+                    :key="category.id"
+                    :value="category.id"
+                    :label="category.name"
+                  />
                 </el-select>
               </el-form-item>
               <el-form-item label="灏忕被鍚嶇О:" prop="typeId">
-                <el-select v-model="eventInfoData.typeId" placeholder="璇烽�夋嫨灏忕被鍚嶇О">
-                  <el-option v-for="type in typeOptions" :key="type.id" :value="type.id" :label="type.name" />
+                <el-select
+                  v-model="eventInfoData.typeId"
+                  placeholder="璇烽�夋嫨灏忕被鍚嶇О"
+                >
+                  <el-option
+                    v-for="type in typeOptions"
+                    :key="type.id"
+                    :value="type.id"
+                    :label="type.name"
+                  />
                 </el-select>
               </el-form-item>
               <el-form-item label="杞︾墝鍙�:" prop="carNumber">
-                <el-input v-model="eventInfoData.carNumber" placeholder="璇峰~鍐欒溅鐗屽彿鐮�"></el-input>
+                <el-input
+                  v-model="eventInfoData.carNumber"
+                  placeholder="璇峰~鍐欒溅鐗屽彿鐮�"
+                ></el-input>
               </el-form-item>
               <el-form-item label="澶囨敞:" prop="description">
-                <el-input type="textarea" :rows="5" v-model="eventInfoData.description"></el-input>
+                <el-input
+                  type="textarea"
+                  :rows="5"
+                  v-model="eventInfoData.description"
+                ></el-input>
               </el-form-item>
               <el-form-item>
-                <el-button :disabled="currentPage === 1" @click="pageChange('prev')">涓婁竴鏉�</el-button>
-                <el-button @click.native.prevent="handleConfirm">纭</el-button>
+                <el-button
+                  :disabled="currentPage === 1"
+                  @click="pageChange('prev')"
+                  >涓婁竴鏉�</el-button
+                >
+                <el-button @click.native.prevent="handleConfirm"
+                  >纭</el-button
+                >
                 <el-button @click="pageChange('next')">涓嬩竴鏉�</el-button>
               </el-form-item>
             </el-form>
@@ -87,7 +210,26 @@
       </div>
     </div>
     <el-dialog :visible="isShowDialog" title="璋冨害淇℃伅">
-      <MyDispatch v-if="isShowDialog" :mytype="1" @getDispatchData="confirmInspection" :isGetData="true" @changeDialog="closeDialog"></MyDispatch>
+      <MyDispatch
+        v-if="isShowDialog"
+        :mytype="1"
+        @getDispatchData="confirmInspection"
+        :isGetData="true"
+        @changeDialog="closeDialog"
+      ></MyDispatch>
+    </el-dialog>
+    <el-dialog
+      :visible.sync="dialogCreate"
+      title="鏌ョ湅瑙嗛"
+      v-show="dialogCreate"
+      :before-close="handleClose2"
+    >
+      <div class="dom" style="width: 100%; height: 600px; position: relative">
+        <div id="dom1" class="dom1"></div>
+      </div>
+    </el-dialog>
+    <el-dialog :visible.sync="isShowTable" title="鎶ヨ淇℃伅" width="1200px">
+      <inspection-table/>
     </el-dialog>
   </div>
 </template>
@@ -98,38 +240,48 @@
 import { getStoreInfoList } from "@/api/operate/storeManagement";
 import { FILE_ORIGINAL_URL } from "@/utils";
 import { validateCarNum } from "@/utils/validate";
-import MyDispatch from '@/components/dispatch';
+import MyDispatch from "@/components/dispatch";
+import InspectionTable from "@/views/intelligentPatrol/studyJudge/inspectionTable/index.vue";
+import MyMap from "@/components/map";
 
 export default {
-  components: { MyDispatch },
+  components: { MyDispatch, MyMap,InspectionTable },
   created() {
     this.getInspectionData();
     this.initEventParams();
-    basecase.getInspectionCountData()
-        .then(res => {
-          this.countData = res;
-        })
-        .catch(err => this.$message.error(err))
+    basecase
+      .getInspectionCountData()
+      .then((res) => {
+        this.countData = res;
+      })
+      .catch((err) => this.$message.error(err));
 
     getStoreInfoList({ current: 1, size: 100 })
-        .then(({ list }) => {
-          this.storeList = list;
-        })
-        .catch(err => {
-          this.$message.error(err)
-        })
+      .then(({ list }) => {
+        this.storeList = list;
+      })
+      .catch((err) => {
+        this.$message.error(err);
+      });
 
-    baseInfo.getCategoryList()
-        .then(res => {
-          this.categoryOptions = res;
-        })
-        .catch(err => this.$message.error(err))
+    baseInfo
+      .getCategoryList()
+      .then((res) => {
+        this.categoryOptions = res;
+      })
+      .catch((err) => this.$message.error(err));
 
-    baseInfo.getTypeList()
-        .then(res => {
-          this.typeList = res;
-        })
-        .catch(err => this.$message.error(err))
+    baseInfo
+      .getTypeList()
+      .then((res) => {
+        this.typeList = res;
+      })
+      .catch((err) => this.$message.error(err));
+  },
+  mounted() {
+    this.timer = setInterval(() => {
+      setTimeout(this.getInspectionData, 0);
+    }, 1000 * 10);
   },
   data() {
     const validateCarNumber = (rule, value, callback) => {
@@ -137,55 +289,65 @@
         if (validateCarNum(value)) {
           callback();
         } else {
-          callback(new Error('璇疯緭鍏ユ纭殑杞︾墝鍙�'));
+          callback(new Error("璇疯緭鍏ユ纭殑杞︾墝鍙�"));
         }
       } else {
         callback();
       }
     };
     return {
+      isShowTable:false,
+      timer: null,
       countData: {
         study: 0,
         review: 0,
-        register: 0
+        register: 0,
       },
       currentEvent: {},
       stateList: [
         {
           id: 2,
-          label: '涓婃姤',
+          label: "涓婃姤",
         },
         {
           id: 6,
-          label: '璋冨害',
+          label: "璋冨害",
         },
         {
           id: 3,
-          label: '鍐嶅涔�',
+          label: "鍐嶅涔�",
         },
         {
           id: 4,
-          label: '鏆備笉澶勭悊',
+          label: "鏆備笉澶勭悊",
         },
       ],
       eventInfoData: null,
-      rules:{
-        state:[
+      rules: {
+        state: [
           {
-            required: true, trigger:['blur'], message: '澶勭悊鎰忚涓嶈兘涓虹┖'
+            required: true,
+            trigger: ["blur"],
+            message: "澶勭悊鎰忚涓嶈兘涓虹┖",
           },
         ],
-        categoryId:[
+        categoryId: [
           {
-            required: true, trigger:['blur'], message: '澶х被鍚嶇О涓嶈兘涓虹┖'
-          }
+            required: true,
+            trigger: ["blur"],
+            message: "澶х被鍚嶇О涓嶈兘涓虹┖",
+          },
         ],
-        typeId:[
+        typeId: [
           {
-            required: true, trigger:['blur'], message: '灏忕被鍚嶇О涓嶈兘涓虹┖'
-          }
+            required: true,
+            trigger: ["blur"],
+            message: "灏忕被鍚嶇О涓嶈兘涓虹┖",
+          },
         ],
-        carNumber:[{ trigger:['blur', 'change'], validator: validateCarNumber }]
+        carNumber: [
+          { trigger: ["blur", "change"], validator: validateCarNumber },
+        ],
       },
       imageList: [],
       currentPage: 1,
@@ -193,12 +355,30 @@
       typeOptions: [],
       storeList: [],
       typeList: [],
-      isShowDialog: false
-    }
+      isShowDialog: false,
+      dialogCreate: false,
+      cutPosX: 10,
+      cutPosY: 10,
+      cutWidth: 100,
+      cutHeight: 100,
+      crtPosX: 0,
+      crtPosY: 0,
+      crtWidth: 1000,
+      crtHeight: 600,
+      domId: "dom1",
+      ctrl: "ctrl1",
+      playType: "live",
+      point: null,
+      mark: null,
+      zoom: null,
+    };
   },
-  methods:{
+  methods: {
+    openDialogTable(){
+      this.isShowTable = true
+    },
     pageChange(type) {
-      if (type === 'next') {
+      if (type === "next") {
         this.currentPage += 1;
       } else {
         this.currentPage -= 1;
@@ -207,28 +387,45 @@
     },
 
     getInspectionData() {
-      basecase.getInspectionData({ current: this.currentPage })
-          .then(({ records }) => {
-            this.currentEvent = records[0];
-            if (this.currentEvent?.picData) {
-              this.imageList = this.currentEvent.picData.split(',').map(item => `${FILE_ORIGINAL_URL}${item}`);
-            }
-            if (this.currentEvent?.alarmTime || this.currentEvent?.currentAlarmTime) {
-              const { alarmTime, currentAlarmTime } = this.currentEvent;
-              const continueAlarmTime = new Date().getTime() -
-                  (currentAlarmTime ? new Date(currentAlarmTime).getTime() : new Date(alarmTime).getTime());
-              const CONTINUE_DAY = continueAlarmTime / 1000 / 60 / 60 / 24;
-              const CONTINUE_HOURS = (CONTINUE_DAY - parseInt(CONTINUE_DAY)) * 24;
-              this.currentEvent.conntinueTime = `${parseInt(CONTINUE_DAY)}澶�${parseInt(CONTINUE_HOURS)}灏忔椂`;
-            }
-          })
-          .catch(err => this.$message.error(err))
+      basecase
+        .getInspectionData({ current: this.currentPage })
+        .then(({ records }) => {
+          this.currentEvent = records[0];
+          this.point = {
+            x: this.currentEvent.longitude,
+            y: this.currentEvent.latitude,
+          };
+          this.zoom = 19;
+          this.mark = { title: this.currentEvent.address };
+          if (this.currentEvent?.picData) {
+            this.imageList = this.currentEvent.picData
+              .split(",")
+              .map((item) => `${FILE_ORIGINAL_URL}${item}`);
+          }
+          if (
+            this.currentEvent?.alarmTime ||
+            this.currentEvent?.currentAlarmTime
+          ) {
+            const { alarmTime, currentAlarmTime } = this.currentEvent;
+            const continueAlarmTime =
+              new Date().getTime() -
+              (currentAlarmTime
+                ? new Date(currentAlarmTime).getTime()
+                : new Date(alarmTime).getTime());
+            const CONTINUE_DAY = continueAlarmTime / 1000 / 60 / 60 / 24;
+            const CONTINUE_HOURS = (CONTINUE_DAY - parseInt(CONTINUE_DAY)) * 24;
+            this.currentEvent.conntinueTime = `${parseInt(
+              CONTINUE_DAY
+            )}澶�${parseInt(CONTINUE_HOURS)}灏忔椂`;
+          }
+        })
+        .catch((err) => this.$message.error(err));
     },
 
     // 纭鐐瑰嚮浜嬩欢
-    handleConfirm(){
-      this.$refs.currentEvent.validate((flag)=>{
-        if(flag){
+    handleConfirm() {
+      this.$refs.currentEvent.validate((flag) => {
+        if (flag) {
           this.eventInfoData.baseId = this.currentEvent.baseId;
 
           // 璋冨害
@@ -238,9 +435,9 @@
             this.confirmInspection();
           }
         } else {
-          this.$message.warning('璇锋鏌ュ繀濉」');
+          this.$message.warning("璇锋鏌ュ繀濉」");
         }
-      })
+      });
     },
 
     initEventParams() {
@@ -253,24 +450,25 @@
         carNumber: null,
         description: null,
         linkShop: 0,
-        shopName: null
-      }
+        shopName: null,
+      };
     },
 
     categoryChange(id) {
-      this.typeOptions = this.typeList.filter(type => type.parentId === id);
+      this.typeOptions = this.typeList.filter((type) => type.parentId === id);
     },
 
     confirmInspection(data) {
       const eventParams = Object.assign({}, this.eventInfoData);
       delete eventParams.store;
-      basecase.confirmInspection({ ...eventParams, ...data })
-          .then(() => {
-            this.$message.success('鎿嶄綔鎴愬姛');
-            this.getInspectionData();
-            this.initEventParams();
-          })
-          .catch(err => this.$message.error(err))
+      basecase
+        .confirmInspection({ ...eventParams, ...data })
+        .then(() => {
+          this.$message.success("鎿嶄綔鎴愬姛");
+          this.getInspectionData();
+          this.initEventParams();
+        })
+        .catch((err) => this.$message.error(err));
     },
 
     closeDialog() {
@@ -278,22 +476,183 @@
     },
 
     selectStoreChange(id) {
-      const selectedStore = this.storeList.find(store => store.id === id);
+      if (id === "") {
+        this.eventInfoData.shopName = null;
+        this.eventInfoData.linkShop = 0;
+        this.eventInfoData.store = null;
+        return;
+      }
+      const selectedStore = this.storeList.find((store) => store.id === id);
       this.eventInfoData.shopName = selectedStore.id;
       this.eventInfoData.linkShop = 1;
       return selectedStore;
-    }
-  }
-}
+    },
+    handleClose2() {
+      this.dialogCreate = false;
+      this.destroy();
+    },
+    login() {
+      // 璋冪敤鐧诲綍鎺ュ彛
+      this.ws.detectConnectQt().then((res) => {
+        if (res) {
+          // 杩炴帴瀹㈡埛绔垚鍔�
+          this.ws.login({
+            loginIp: "183.245.159.161",
+            loginPort: "8282",
+            userName: "suichang",
+            userPwd: "a12345677",
+            https: 1,
+          });
+          this.$message.info("鐧诲綍涓�...");
+          this.ws.on("loginState", (res) => {
+            this.isLogin = res;
+            if (res) {
+              this.$message.success("鐧诲綍鎴愬姛");
+              this.activePanel = "key2";
+            } else {
+              this.$message.info("鐧诲綍澶辫触");
+            }
+          });
+        } else {
+          // 杩炴帴瀹㈡埛绔け璐�
+          this.$message.info("璇烽噸鏂板畨瑁呭鎴风");
+        }
+      });
+    },
+    logout() {
+      // 璋冪敤鐧诲嚭鎺ュ彛
+      this.ws.logout({
+        loginIp: this.loginIp,
+      });
+    },
+    createVideo(item, ctrlType) {
+      this.playType = ctrlType;
+      const DHWsInstance = DHWs.getInstance();
+      this.ws = DHWsInstance;
+      console.log(this.ws);
+      this.login();
+      // 璋冪敤鍒涘缓鎺т欢鎺ュ彛
+      // if (!this.isLogin) {
+      //      this.$message.info('姝e湪鐧婚檰瀹㈡埛绔紝璇风◢绛�......');
+      //     return false;
+      // }
+      this.dialogCreate = true;
+      setTimeout(() => {
+        let _this = this;
+        const params = [
+          {
+            // ctrlType: "realMonitorUI",
+            ctrlType: "playerWin",
+            ctrlCode: this.ctrl,
+            ctrlProperty: {
+              displayMode: ctrlType == "playback" ? 2 : 1,
+              splitNum: 1,
+              channelList: [{ channelId: item.videoCode }],
+            },
+            visible: true,
+            domId: this.domId,
+          },
+        ];
+        this.setPos();
+
+        // _this.ws.on("createCtrlResult", (res) => {
+        //   console.warn(res);
+        // });
+
+        _this.ws
+          .createCtrl(params)
+          .then((res) => {
+            this.$message.success("鍒涘缓鎴愬姛");
+            console.log("res", res);
+          })
+          .catch((e) => {
+            console.log("error;", e);
+          });
+
+        if (ctrlType == "playback") {
+          const end = new Date();
+          const start = new Date();
+          start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
+
+          let beginTime = _this.formatDate(start);
+          let endTime = _this.formatDate(end);
+          const params = [
+            {
+              ctrlCode: this.ctrl,
+              array: [
+                {
+                  beginTime: beginTime,
+                  endTime: endTime,
+                  channelId: item.videoCode,
+                },
+              ],
+            },
+          ];
+          _this.ws.openCtrlRecord(params);
+        }
+      }, 1000);
+    },
+    destroy() {
+      // 璋冪敤閿�姣佹帶浠舵帴鍙�
+      if (!this.isLogin) {
+        this.$Message.info("姝e湪鐧婚檰瀹㈡埛绔紝璇风◢绛�......");
+        return false;
+      }
+      const ctrls = this.ws.ctrls.map((i) => {
+        if (i.ctrlCode === this.ctrl) {
+          return i.ctrlCode;
+        }
+      });
+      this.ws.destroyCtrl(ctrls);
+    },
+    setPos() {
+      let target = document.getElementById(this.domId);
+      console.log(target, "target");
+      target.style.right = `${this.crtPosX}px`;
+      target.style.top = `${this.crtPosY}px`;
+      target.style.width = `${this.crtWidth}px`;
+      target.style.height = `${this.crtHeight}px`;
+      if (document.createEvent) {
+        var event = document.createEvent("HTMLEvents");
+        event.initEvent("resize", true, true);
+        window.dispatchEvent(event);
+      } else if (document.createEventObject) {
+        window.fireEvent("onresize");
+      }
+    },
+
+    // 鏃堕棿鎴宠浆 yyyy-MM-dd HH:mm:ss
+    formatDate(inputTime) {
+      var date = new Date(inputTime);
+      var y = date.getFullYear();
+      var m = date.getMonth() + 1;
+      m = m < 10 ? "0" + m : m;
+      var d = date.getDate();
+      d = d < 10 ? "0" + d : d;
+      var h = date.getHours();
+      h = h < 10 ? "0" + h : h;
+      var minute = date.getMinutes();
+      var second = date.getSeconds();
+      minute = minute < 10 ? "0" + minute : minute;
+      second = second < 10 ? "0" + second : second;
+      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
+    },
+  },
+  beforeDestroy() {
+    clearInterval(this.timer);
+    this.timer = null;
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .study-judge {
   text-align: left;
   color: #4b9bb7;
-  padding: 20px;
+  padding: 10px 20px;
+
   .study-judge-header {
-    line-height: 8vh;
+    line-height: 3vh;
   }
 
   .study-judge-main {
@@ -330,25 +689,38 @@
 
       .sjm-content-left {
         line-height: 4.8vh;
+        .count-data-span{
+          cursor: pointer;
+          color: blue;
+        }
+        .left-form > ::v-deep.el-form-item__label {
+          font-size: 16px !important;
 
+        }
         .img-item {
           display: flex;
           flex-direction: column;
-
           img {
             width: 15vw;
             height: 20vh;
           }
         }
 
-        .img-item+.img-item {
+        .img-item + .img-item {
           margin-top: 2vh;
         }
       }
-
+      .sjm-content-center {
+        width: calc(100% - 920px);
+      }
       .sjm-content-right {
         .card-box {
+          .but-live {
+            padding-left: 48px;
+            line-height: 4.8vh;
+          }
           .card-header {
+            padding-left: 48px;
             line-height: 4.8vh;
           }
         }
@@ -358,6 +730,7 @@
 
   .el-form {
     ::v-deep .el-form-item {
+      margin-bottom: 15px;
     }
 
     ::v-deep .el-form-item__label {
@@ -369,4 +742,9 @@
     color: #4b9bb7;
   }
 }
-</style>
\ No newline at end of file
+
+.map {
+  height: 100%;
+  min-width: 460px;
+}
+</style>

--
Gitblit v1.8.0