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 |  772 ++++++++++++++++++++++++++++++++++++++++++++++------------
 1 files changed, 605 insertions(+), 167 deletions(-)

diff --git a/src/views/intelligentPatrol/studyJudge/index.vue b/src/views/intelligentPatrol/studyJudge/index.vue
index 29b44c5..f10e22f 100644
--- a/src/views/intelligentPatrol/studyJudge/index.vue
+++ b/src/views/intelligentPatrol/studyJudge/index.vue
@@ -1,238 +1,658 @@
 <template>
   <div class="study-judge">
-    <div class="study-judge-header">
-      <span>鎮ㄦ湁1111鏉″緟瀹℃牳鎶ヨ淇℃伅,浠婃棩绔嬫0鏉�,鍐嶅涔爗{ currentEvent.review }}鏉�</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">
+          <!--          <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="currentEvent.picData">
-            <span>鎶ヨ鏃堕棿锛�2022-09-08 14:23:34</span>
+            <img :src="item" />
+            <span v-if="index === 0"
+              >鎶ヨ鏃堕棿锛歿{ currentEvent.alarmTime }}</span
+            >
           </div>
-          <div class="img-item">
-            <img
-              src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__67d4d15bfc501319f8377f2ce37bf441.svg"
-              alt="">
+          <div class="img-item" v-for="item in imageList" :key="item.id">
+            <img :src="item" />
           </div>
-          <div class="img-item">
-            <img
-              src="https://axure-file.lanhuapp.com/90466432-c999-4bf0-80b8-ee3f96a2099e__67d4d15bfc501319f8377f2ce37bf441.svg"
-              alt="">
-          </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="currentEvent" :rules="rules">
-              <el-form-item label="浜嬩欢缂栧彿:">
-                <span>{{ currentEvent.code }}</span>
+            <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"
+                  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 label="浜嬩欢绛夌骇:">
-                <span>{{ currentEvent.grade }}</span>
+              <el-form-item v-if="eventInfoData.store" label="搴楅摵寰楀垎:">
+                <span>{{
+                  selectStoreChange(eventInfoData.store).storeScore
+                }}</span>
               </el-form-item>
-              <el-form-item label="棣栨鎶ヨ鏃堕棿:">
-                <span>{{ currentEvent.firstTime }}</span>
-              </el-form-item>
-              <el-form-item label="鏈�杩戞姤璀︽椂闂�:">
-                <span>{{ currentEvent.recentTime }}</span>
-              </el-form-item>
-              <el-form-item label="鎸佺画鏃堕棿:">
-                <span>{{ currentEvent.conntinueTime }}</span>
-              </el-form-item>
-              <el-form-item label="澶勭悊鎰忚:" prop="advice">
-                <el-radio-group v-model="currentEvent.advice">
-                  <el-radio :label="item.id" v-for="item in adviceList" :key="item.id">{{ item.label }}</el-radio>
+              <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-group>
               </el-form-item>
-              <el-form-item label="闂绫诲瀷:" prop="type">
-                <el-input v-model="currentEvent.type" placeholder="璇烽�夋嫨闂绫诲瀷"></el-input>
+              <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>
               </el-form-item>
-              <el-form-item label="澶х被鍚嶇О:" prop="bigKind">
-                <el-input v-model="currentEvent.bigKind" placeholder="璇烽�夋嫨澶х被鍚嶇О"></el-input>
-              </el-form-item>
-              <el-form-item label="灏忕被鍚嶇О:" prop="smallKind">
-                <el-input v-model="currentEvent.smallKind" placeholder="璇烽�夋嫨灏忕被鍚嶇О"></el-input>
+              <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>
               </el-form-item>
               <el-form-item label="杞︾墝鍙�:" prop="carNumber">
-                <el-input v-model="currentEvent.carNumber" placeholder="璇峰~鍐欒溅鐗屽彿鐮�"></el-input>
+                <el-input
+                  v-model="eventInfoData.carNumber"
+                  placeholder="璇峰~鍐欒溅鐗屽彿鐮�"
+                ></el-input>
               </el-form-item>
-              <el-form-item label="澶囨敞:">
-                <el-input type="textarea" :rows="5" v-model="currentEvent.tip"></el-input>
+              <el-form-item label="澶囨敞:" prop="description">
+                <el-input
+                  type="textarea"
+                  :rows="5"
+                  v-model="eventInfoData.description"
+                ></el-input>
               </el-form-item>
               <el-form-item>
-                <el-button>涓婁竴鏉�</el-button>
-                <el-button @click.native.prevent="handleConfirm">纭</el-button>
-                <el-button>涓嬩竴鏉�</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>
           </div>
         </div>
       </div>
     </div>
+    <el-dialog :visible="isShowDialog" title="璋冨害淇℃伅">
+      <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>
 
 <script>
 import basecase from "@/api/operate/basecase";
+import baseInfo from "@/api/baseInfo";
+import { getStoreInfoList } from "@/api/operate/storeManagement";
 import { FILE_ORIGINAL_URL } from "@/utils";
+import { validateCarNum } from "@/utils/validate";
+import MyDispatch from "@/components/dispatch";
+import InspectionTable from "@/views/intelligentPatrol/studyJudge/inspectionTable/index.vue";
+import MyMap from "@/components/map";
 
 export default {
+  components: { MyDispatch, MyMap,InspectionTable },
   created() {
-    basecase.getInspectionData({ current: 1 })
-        .then(({ records }) => {
-          this.eventList = records;
-          this.currentEvent = this.eventList[0];
-          if (this.currentEvent.picData) {
-            this.currentEvent.picData = `${FILE_ORIGINAL_URL}${this.currentEvent.picData}`;
-          }
-        })
-        .catch(err => this.$message.error(err))
+    this.getInspectionData();
+    this.initEventParams();
+    basecase
+      .getInspectionCountData()
+      .then((res) => {
+        this.countData = res;
+      })
+      .catch((err) => this.$message.error(err));
 
-    basecase.getInspectionCountData()
-        .then(res => {
-          this.currentEvent.review = res.review;
-        })
-        .catch(err => this.$message.error(err))
+    getStoreInfoList({ current: 1, size: 100 })
+      .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
+      .getTypeList()
+      .then((res) => {
+        this.typeList = res;
+      })
+      .catch((err) => this.$message.error(err));
+  },
+  mounted() {
+    this.timer = setInterval(() => {
+      setTimeout(this.getInspectionData, 0);
+    }, 1000 * 10);
   },
   data() {
-    const validateAdvice = (rule,value,callback)=>{
-      if(value){
-        callback()
-      }else{
-        callback(new Error('澶勭悊鎰忚涓嶈兘涓虹┖'))
+    const validateCarNumber = (rule, value, callback) => {
+      if (value) {
+        if (validateCarNum(value)) {
+          callback();
+        } else {
+          callback(new Error("璇疯緭鍏ユ纭殑杞︾墝鍙�"));
+        }
+      } else {
+        callback();
       }
-    }
-    const validateType = (rule,value,callback)=>{
-      if(value){
-        callback()
-      }else{
-        callback(new Error('闂绫诲瀷涓嶈兘涓虹┖'))
-      }
-    }
-    const validateBigKind = (rule,value,callback)=>{
-      console.log(value)
-      if(value){
-        callback()
-      }else{
-        callback(new Error('澶х被鍚嶇О涓嶈兘涓虹┖'))
-      }
-    }
-    const validateSmallKind = (rule,value,callback)=>{
-      if(value){
-        callback()
-      }else{
-        callback(new Error('灏忕被鍚嶇О涓嶈兘涓虹┖'))
-      }
-    }
-    const validateCarNumber = (rule,value,callback)=>{
-      if(value){
-        callback()
-      }else{
-        callback(new Error('杞︾墝鍙蜂笉鑳戒负绌�'))
-      }
-    }
+    };
     return {
-      eventList: [],
-      currentEvent: {
-        code: null,
-        grade: null,
-        picData: null,
-        street: null,
-        urlAddress: null,
-        name: null,
-        latitude: null,
-        longitude: null,
-        review: 0
+      isShowTable:false,
+      timer: null,
+      countData: {
+        study: 0,
+        review: 0,
+        register: 0,
       },
-      adviceList: [
-        {
-          id: 1,
-          label: '涓婃姤',
-        },
+      currentEvent: {},
+      stateList: [
         {
           id: 2,
-          label: '璋冨害',
+          label: "涓婃姤",
+        },
+        {
+          id: 6,
+          label: "璋冨害",
         },
         {
           id: 3,
-          label: '鍐嶅涔�',
+          label: "鍐嶅涔�",
         },
         {
           id: 4,
-          label: '鏆備笉澶勭悊',
+          label: "鏆備笉澶勭悊",
         },
       ],
-      rules:{
-        advice:[
+      eventInfoData: null,
+      rules: {
+        state: [
           {
-            trigger:'blur',validator:validateAdvice
+            required: true,
+            trigger: ["blur"],
+            message: "澶勭悊鎰忚涓嶈兘涓虹┖",
           },
         ],
-        type:[
+        categoryId: [
           {
-            trigger:'blur',validator:validateType
-          }
+            required: true,
+            trigger: ["blur"],
+            message: "澶х被鍚嶇О涓嶈兘涓虹┖",
+          },
         ],
-        bigKind:[
+        typeId: [
           {
-            trigger:'blur',validator:validateBigKind
-          }
+            required: true,
+            trigger: ["blur"],
+            message: "灏忕被鍚嶇О涓嶈兘涓虹┖",
+          },
         ],
-        smallKind:[
-          {
-            trigger:'blur',validator:validateSmallKind
-          }
+        carNumber: [
+          { trigger: ["blur", "change"], validator: validateCarNumber },
         ],
-        carNumber:[
-          {
-            trigger:'blur',validator:validateCarNumber
-          }
-        ]
-      }
-    }
+      },
+      imageList: [],
+      currentPage: 1,
+      categoryOptions: [],
+      typeOptions: [],
+      storeList: [],
+      typeList: [],
+      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:{
-    // 纭鐐瑰嚮浜嬩欢
-    handleConfirm(){
-      console.log(this.$refs.currentEvent)
-      this.$refs.currentEvent.validate((flag)=>{
-        console.log(flag)
-        if(flag){
+  methods: {
+    openDialogTable(){
+      this.isShowTable = true
+    },
+    pageChange(type) {
+      if (type === "next") {
+        this.currentPage += 1;
+      } else {
+        this.currentPage -= 1;
+      }
+      this.getInspectionData();
+    },
 
-        }else{
-          return false
+    getInspectionData() {
+      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) {
+          this.eventInfoData.baseId = this.currentEvent.baseId;
+
+          // 璋冨害
+          if (this.eventInfoData.state === 6) {
+            this.isShowDialog = true;
+          } else {
+            this.confirmInspection();
+          }
+        } else {
+          this.$message.warning("璇锋鏌ュ繀濉」");
         }
-      })
-    }
-  }
-}
+      });
+    },
+
+    initEventParams() {
+      this.eventInfoData = {
+        baseId: null,
+        store: null,
+        state: null,
+        categoryId: null,
+        typeId: null,
+        carNumber: null,
+        description: null,
+        linkShop: 0,
+        shopName: null,
+      };
+    },
+
+    categoryChange(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));
+    },
+
+    closeDialog() {
+      this.isShowDialog = false;
+    },
+
+    selectStoreChange(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 {
@@ -269,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;
           }
         }
@@ -297,7 +730,7 @@
 
   .el-form {
     ::v-deep .el-form-item {
-      // margin-bottom: 10px;
+      margin-bottom: 15px;
     }
 
     ::v-deep .el-form-item__label {
@@ -309,4 +742,9 @@
     color: #4b9bb7;
   }
 }
-</style>
\ No newline at end of file
+
+.map {
+  height: 100%;
+  min-width: 460px;
+}
+</style>

--
Gitblit v1.8.0