From e6443cf405d4e950abe35a29e6c133d097fc1ad5 Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 04 十二月 2023 17:46:01 +0800
Subject: [PATCH] 100路视频

---
 vue.config.js                                        |    3 
 src/views/intelligentPatrol/studyJudge/index.vue     | 1507 ++++++++++++++++---------------
 src/views/video/index.vue                            |  724 +++++++-------
 src/views/layout/components/Main/index.vue           |   18 
 src/App.vue                                          |    2 
 src/router/index.js                                  |   20 
 src/views/intelligentPatrol/studyJudge/tablePage.vue |  594 ++++++------
 src/views/layout/components/Menu/index.vue           |    7 
 8 files changed, 1,487 insertions(+), 1,388 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 32de82a..de1726e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <router-view />
+    <router-view :key="$route.fullpath"/>
   </div>
 </template>
 <script>
diff --git a/src/router/index.js b/src/router/index.js
index 7b58a45..a2c66ba 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -351,8 +351,15 @@
       },
 
       {
-        path: "video",
-        name: 'video',
+        path: "video/0",
+        name: 'video_0',
+        component: () => import('@/views/video'),
+        meta: {
+          keepAlive: false // 涓嶉渶瑕佽缂撳瓨
+        }
+      },{
+        path: "video/1",
+        name: 'video_1',
         component: () => import('@/views/video'),
         meta: {
           keepAlive: false // 涓嶉渶瑕佽缂撳瓨
@@ -382,8 +389,13 @@
 
       //  鏅鸿兘宸℃煡
       {
-        path: 'studyJudge', // 棰勮鐮斿垽
-        name: 'studyJudge',
+        path: 'studyJudge/0', // 棰勮鐮斿垽
+        name: 'studyJudge_0',
+        component: () => import('@/views/intelligentPatrol/studyJudge/tablePage'),
+      },
+      {
+        path: 'studyJudge/1', // 棰勮鐮斿垽
+        name: 'studyJudge_1',
         component: () => import('@/views/intelligentPatrol/studyJudge/tablePage'),
       },
       {
diff --git a/src/views/intelligentPatrol/studyJudge/index.vue b/src/views/intelligentPatrol/studyJudge/index.vue
index fd6310b..4d133db 100644
--- a/src/views/intelligentPatrol/studyJudge/index.vue
+++ b/src/views/intelligentPatrol/studyJudge/index.vue
@@ -1,239 +1,264 @@
 <template>
-  <div class="study-judge">
-    <!--    <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>-->
-      <!--          <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="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" /> -->
-            <el-image style="width:240px"  :src="item" :preview-src-list="[item]"> </el-image>
-            <span v-if="index === 0"
-              >鎶ヨ鏃堕棿锛歿{ currentEvent.alarmTime }}</span
-            >
-          </div>
-          <div class="img-item" v-for="item in imageList" :key="item.id">
-            <!-- <img :src="item" /> -->            
-            <el-image style="width:240px" :src="item" :preview-src-list="[item]"> </el-image>
-          </div>
-          <el-form
-            ref="currentEvent"
-            label-width="120px"
-            :model="eventInfoData"
-            :rules="rules"
-            label-position="left"
-            class="left-form"
-          >
-            <!-- <el-form-item label="浜嬩欢缂栧彿:">
+    <div class="study-judge">
+        <!--    <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>-->
+            <!--          <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="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" /> -->
+                        <el-image
+                            style="width: 240px"
+                            :src="item"
+                            :preview-src-list="[item]"
+                        >
+                        </el-image>
+                        <span v-if="index === 0"
+                            >鎶ヨ鏃堕棿锛歿{ currentEvent.alarmTime }}</span
+                        >
+                    </div>
+                    <div
+                        class="img-item"
+                        v-for="item in imageList"
+                        :key="item.id"
+                    >
+                        <!-- <img :src="item" /> -->
+                        <el-image
+                            style="width: 240px"
+                            :src="item"
+                            :preview-src-list="[item]"
+                        >
+                        </el-image>
+                    </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="but-live">
-              <el-button size="small" @click="createVideo(currentEvent, 'live')"
-                >瀹炴椂棰勮</el-button
-              >
-              <el-button
-                size="small"
-                @click="createVideo(currentEvent, 'playback')"
-                >褰曞儚鍥炴斁</el-button
-              >
+                        <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="but-live">
+                            <el-button
+                                size="small"
+                                @click="createVideo(currentEvent, 'live')"
+                                >瀹炴椂棰勮</el-button
+                            >
+                            <el-button
+                                size="small"
+                                @click="createVideo(currentEvent, 'playback')"
+                                >褰曞儚鍥炴斁</el-button
+                            >
+                        </div>
+                        <div class="card-header">
+                            <span>鎶ヨ璁板綍--{{ currentEvent.alarmName }}</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
+                                v-if="eventInfoData.store"
+                                label="搴楅摵寰楀垎:"
+                            >
+                                <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-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>
+                            </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>
+                            </el-form-item>
+                            <el-form-item label="杞︾墝鍙�:" prop="carNumber">
+                                <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-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 @click="pageChange('next')"
+                                    >涓嬩竴鏉�</el-button
+                                >
+                            </el-form-item>
+                        </el-form>
+                    </div>
+                </div>
             </div>
-            <div class="card-header">
-              <span>鎶ヨ璁板綍--{{ currentEvent.alarmName }}</span>
-            </div>
-            <el-form
-              ref="currentEvent"
-              label-width="120px"
-              :model="eventInfoData"
-              :rules="rules"
+        </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"
             >
-              <!--              <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 v-if="eventInfoData.store" label="搴楅摵寰楀垎:">
-                <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-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>
-              </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>
-              </el-form-item>
-              <el-form-item label="杞︾墝鍙�:" prop="carNumber">
-                <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-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 @click="pageChange('next')">涓嬩竴鏉�</el-button>
-              </el-form-item>
-            </el-form>
-          </div>
-        </div>
-      </div>
+                <div id="dom1" class="dom1"></div>
+            </div>
+        </el-dialog>
+        <el-dialog :visible.sync="isShowTable" title="鎶ヨ淇℃伅" width="1200px">
+            <inspection-table />
+        </el-dialog>
     </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>
@@ -248,540 +273,552 @@
 import MyMap from "@/components/map/leafletMap.vue";
 
 export default {
-  components: { MyDispatch, MyMap },
-  created() {
-    if (this.info) {
-      this.currentEvent = this.info;
-      this.loadData();
-    } else {
-      this.getInspectionData();
-    }
-    this.initEventParams();
-    this.getInspectionCount();
-    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(() => {
-      this.getInspectionCount();
-    }, 1000 * 60 * 15);
-  },
-  data() {
-    const validateCarNumber = (rule, value, callback) => {
-      if (value) {
-        if (validateCarNum(value)) {
-          callback();
-        } else {
-          callback(new Error("璇疯緭鍏ユ纭殑杞︾墝鍙�"));
-        }
-      } else {
-        callback();
-      }
-    };
-    return {
-      isShowTable: false,
-      timer: null,
-      countData: {
-        study: 0,
-        review: 0,
-        register: 0,
-      },
-      currentEvent: {},
-      stateList: [
-        {
-          id: 10,
-          label: "涓婃姤",
-        },
-        {
-          id: 6,
-          label: "璋冨害",
-        },
-        {
-          id: 3,
-          label: "鍐嶅涔�",
-        },
-        {
-          id: 4,
-          label: "鏆備笉澶勭悊",
-        },
-      ],
-      eventInfoData: null,
-      rules: {
-        state: [
-          {
-            required: true,
-            trigger: ["blur"],
-            message: "澶勭悊鎰忚涓嶈兘涓虹┖",
-          },
-        ],
-        categoryId: [
-          {
-            required: true,
-            trigger: ["blur"],
-            message: "澶х被鍚嶇О涓嶈兘涓虹┖",
-          },
-        ],
-        typeId: [
-          {
-            required: true,
-            trigger: ["blur"],
-            message: "灏忕被鍚嶇О涓嶈兘涓虹┖",
-          },
-        ],
-        carNumber: [
-          { trigger: ["blur", "change"], 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: {
-    getInspectionCount() {
-      basecase
-        .getInspectionCountData({
-          showLoading: false,
-        })
-        .then((res) => {
-          this.countData = res;
-        })
-        .catch((err) => this.$message.error(err));
-    },
-    openDialogTable() {
-      this.isShowTable = true;
-    },
-    pageChange(type) {
-      if (type === "next") {
-        this.currentPage += 1;
-      } else {
-        this.currentPage -= 1;
-      }
-      this.getInspectionData();
-    },
-
-    getInspectionData() {
-      let data = {
-        current: this.currentPage,
-        pageSize: 1,
-        videoId: this.seachData.videoId,
-      };
-      if (this.seachData.alarmTime) {
-        data.beginTime = this.seachData.alarmTime[0];
-        data.endTime = this.seachData.alarmTime[1];
-      }
-      if (this.seachData.gradeId) {
-        data.gradeId = this.seachData.gradeId[1];
-      }
-      basecase
-        .getInspectionData(data)
-        .then(({ records, total }) => {
-          this.countData.review = total;
-          if (records.length > 0) {
-            this.currentEvent = records[0];
+    components: { MyDispatch, MyMap },
+    created() {
+        if (this.info) {
+            this.currentEvent = this.info;
             this.loadData();
-          } else {
-            this.currentEvent = {};
-            this.$message("褰撳墠鏌ヨ鏉′欢鏃犳暟鎹�");
-          }
-        })
-        .catch((err) => this.$message.error(err));
-    },
-    loadData() {
-      this.point = {
-        x: this.currentEvent.longitude,
-        y: this.currentEvent.latitude,
-      };
-      this.zoom = 18;
-      this.mark = { title: this.currentEvent.address };
-      if (this.currentEvent?.picData) {
-        this.imageList = this.currentEvent.picData
-          .split(",")
-          .map((item) => `${FILE_ORIGINAL_URL}sccg/API/img?fileUrl=${item}`);
-        // this.imageList =['https://www.shutterstock.com/image-photo/grandmother-holding-grandson-her-lap-600w-1954531321.jpg','https://www.shutterstock.com/image-photo/grandmother-holding-grandson-her-lap-600w-1954531321.jpg']
-      }
-      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)}灏忔椂`;
-      }
-    },
-    // 纭鐐瑰嚮浜嬩欢
-    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("璇锋鏌ュ繀濉」");
+            this.getInspectionData();
         }
-      });
-    },
+        this.initEventParams();
+        this.getInspectionCount();
+        getStoreInfoList({ current: 1, size: 100 })
+            .then(({ list }) => {
+                this.storeList = list;
+            })
+            .catch((err) => {
+                this.$message.error(err);
+            });
 
-    initEventParams() {
-      this.eventInfoData = {
-        baseId: null,
-        store: null,
-        state: null,
-        categoryId: null,
-        typeId: null,
-        carNumber: null,
-        description: null,
-        linkShop: 0,
-        shopName: null,
-      };
-    },
+        baseInfo
+            .getCategoryList()
+            .then((res) => {
+                this.categoryOptions = res;
+            })
+            .catch((err) => this.$message.error(err));
 
-    categoryChange(id) {
-      this.typeOptions = this.typeList.filter((type) => type.parentId === id);
+        baseInfo
+            .getTypeList()
+            .then((res) => {
+                this.typeList = res;
+            })
+            .catch((err) => this.$message.error(err));
     },
-
-    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: "172.28.194.180",
-            loginPort: "7902",
-            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";
+    watch: {
+        '$route'(to, from) { //鐩戝惉璺敱鏄惁鍙樺寲
+            if (this.info) {
+                this.currentEvent = this.info;
+                this.loadData();
             } else {
-              this.$message.info("鐧诲綍澶辫触");
+                this.getInspectionData();
             }
-          });
-        } else {
-          // 杩炴帴瀹㈡埛绔け璐�
-          this.$message.info("璇烽噸鏂板畨瑁呭鎴风");
         }
-      });
     },
-    logout() {
-      // 璋冪敤鐧诲嚭鎺ュ彛
-      this.ws.logout({
-        loginIp: this.loginIp,
-      });
+    mounted() {
+        this.timer = setInterval(() => {
+            this.getInspectionCount();
+        }, 1000 * 60 * 15);
     },
-    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 }],
+    data() {
+        const validateCarNumber = (rule, value, callback) => {
+            if (value) {
+                if (validateCarNum(value)) {
+                    callback();
+                } else {
+                    callback(new Error("璇疯緭鍏ユ纭殑杞︾墝鍙�"));
+                }
+            } else {
+                callback();
+            }
+        };
+        return {
+            isShowTable: false,
+            timer: null,
+            countData: {
+                study: 0,
+                review: 0,
+                register: 0,
             },
-            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: [
+            currentEvent: {},
+            stateList: [
                 {
-                  beginTime: beginTime,
-                  endTime: endTime,
-                  channelId: item.videoCode,
+                    id: 10,
+                    label: "涓婃姤",
                 },
-              ],
+                {
+                    id: 6,
+                    label: "璋冨害",
+                },
+                {
+                    id: 3,
+                    label: "鍐嶅涔�",
+                },
+                {
+                    id: 4,
+                    label: "鏆備笉澶勭悊",
+                },
+            ],
+            eventInfoData: null,
+            rules: {
+                state: [
+                    {
+                        required: true,
+                        trigger: ["blur"],
+                        message: "澶勭悊鎰忚涓嶈兘涓虹┖",
+                    },
+                ],
+                categoryId: [
+                    {
+                        required: true,
+                        trigger: ["blur"],
+                        message: "澶х被鍚嶇О涓嶈兘涓虹┖",
+                    },
+                ],
+                typeId: [
+                    {
+                        required: true,
+                        trigger: ["blur"],
+                        message: "灏忕被鍚嶇О涓嶈兘涓虹┖",
+                    },
+                ],
+                carNumber: [
+                    { trigger: ["blur", "change"], validator: validateCarNumber },
+                ],
             },
-          ];
-          _this.ws.openCtrlRecord(params);
-        }
-      }, 1000);
+            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,
+        };
     },
-    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);
+    methods: {
+        getInspectionCount() {
+            basecase
+                .getInspectionCountData({
+                    showLoading: false,
+                })
+                .then((res) => {
+                    this.countData = res;
+                })
+                .catch((err) => this.$message.error(err));
+        },
+        openDialogTable() {
+            this.isShowTable = true;
+        },
+        pageChange(type) {
+            if (type === "next") {
+                this.currentPage += 1;
+            } else {
+                this.currentPage -= 1;
+            }
+            this.getInspectionData();
+        },
+
+        getInspectionData() {
+            let path = this.$route.path
+            let data = {
+                current: this.currentPage,
+                pageSize: 1,
+                type: path.substring(path.length - 1, path.length),
+                videoId: this.seachData.videoId,
+            };
+            if (this.seachData.alarmTime) {
+                data.beginTime = this.seachData.alarmTime[0];
+                data.endTime = this.seachData.alarmTime[1];
+            }
+            if (this.seachData.gradeId) {
+                data.gradeId = this.seachData.gradeId[1];
+            }
+            basecase
+                .getInspectionData(data)
+                .then(({ records, total }) => {
+                    this.countData.review = total;
+                    if (records.length > 0) {
+                        this.currentEvent = records[0];
+                        this.loadData();
+                    } else {
+                        this.currentEvent = {};
+                        this.$message("褰撳墠鏌ヨ鏉′欢鏃犳暟鎹�");
+                    }
+                })
+                .catch((err) => this.$message.error(err));
+        },
+        loadData() {
+            this.point = {
+                x: this.currentEvent.longitude,
+                y: this.currentEvent.latitude,
+            };
+            this.zoom = 18;
+            this.mark = { title: this.currentEvent.address };
+            if (this.currentEvent?.picData) {
+                this.imageList = this.currentEvent.picData
+                    .split(",")
+                    .map((item) => `${FILE_ORIGINAL_URL}sccg/API/img?fileUrl=${item}`);
+                // this.imageList =['https://www.shutterstock.com/image-photo/grandmother-holding-grandson-her-lap-600w-1954531321.jpg','https://www.shutterstock.com/image-photo/grandmother-holding-grandson-her-lap-600w-1954531321.jpg']
+            }
+            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)}灏忔椂`;
+            }
+        },
+        // 纭鐐瑰嚮浜嬩欢
+        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: "172.28.194.180",
+                        loginPort: "7902",
+                        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;
+        },
+        resetAll() {
+            this.seachData = {};
+        },
     },
-    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");
-      }
+    beforeDestroy() {
+        clearInterval(this.timer);
+        this.timer = null;
     },
 
-    // 鏃堕棿鎴宠浆 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;
-    },
-    resetAll() {
-      this.seachData = {};
-    },
-  },
-  beforeDestroy() {
-    clearInterval(this.timer);
-    this.timer = null;
-  },
-
-  props: ["info", "seachData"],
+    props: ["info", "seachData"],
 };
 </script>
 
 <style lang="scss" scoped>
 .study-judge {
-  text-align: left;
-  color: #4b9bb7;
-  padding: 10px 20px;
-
-  .study-judge-header {
-    line-height: 3vh;
-  }
-
-  .study-judge-main {
-    .sjm-header {
-      line-height: 8vh;
-      display: flex;
-      justify-content: space-between;
-
-      .sjm-header-left {
-        flex: 1;
-        display: flex;
-        justify-content: flex-start;
-
-        .moni-area {
-          margin-left: 4vw;
-        }
-      }
-
-      .sjm-header-right {
-        flex: 1;
-        display: flex;
-        justify-content: flex-end;
-
-        .el-button {
-          padding: 0 1vw;
-          height: 4vh;
-        }
-      }
-    }
-
-    .sjm-content {
-      display: flex;
-      justify-content: space-between;
-
-      .sjm-content-left {
-        line-height: 4.8vh;
-        .count-data-span {
-          cursor: pointer;
-          color: #66b1ff;
-        }
-        .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 {
-          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;
-          }
-        }
-      }
-    }
-  }
-
-  .el-form {
-    ::v-deep .el-form-item {
-      margin-bottom: 15px;
-    }
-
-    ::v-deep .el-form-item__label {
-      color: #4b9bb7;
-    }
-  }
-
-  ::v-deep .el-radio__label {
+    text-align: left;
     color: #4b9bb7;
-  }
+    padding: 10px 20px;
+
+    .study-judge-header {
+        line-height: 3vh;
+    }
+
+    .study-judge-main {
+        .sjm-header {
+            line-height: 8vh;
+            display: flex;
+            justify-content: space-between;
+
+            .sjm-header-left {
+                flex: 1;
+                display: flex;
+                justify-content: flex-start;
+
+                .moni-area {
+                    margin-left: 4vw;
+                }
+            }
+
+            .sjm-header-right {
+                flex: 1;
+                display: flex;
+                justify-content: flex-end;
+
+                .el-button {
+                    padding: 0 1vw;
+                    height: 4vh;
+                }
+            }
+        }
+
+        .sjm-content {
+            display: flex;
+            justify-content: space-between;
+
+            .sjm-content-left {
+                line-height: 4.8vh;
+                .count-data-span {
+                    cursor: pointer;
+                    color: #66b1ff;
+                }
+                .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 {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+
+    .el-form {
+        ::v-deep .el-form-item {
+            margin-bottom: 15px;
+        }
+
+        ::v-deep .el-form-item__label {
+            color: #4b9bb7;
+        }
+    }
+
+    ::v-deep .el-radio__label {
+        color: #4b9bb7;
+    }
 }
 
 .map {
-  height: 100%;
-  min-width: 460px;
+    height: 100%;
+    min-width: 460px;
 }
 .header {
-  line-height: normal;
+    line-height: normal;
 }
 </style>
diff --git a/src/views/intelligentPatrol/studyJudge/tablePage.vue b/src/views/intelligentPatrol/studyJudge/tablePage.vue
index 06556f2..88a1427 100644
--- a/src/views/intelligentPatrol/studyJudge/tablePage.vue
+++ b/src/views/intelligentPatrol/studyJudge/tablePage.vue
@@ -1,109 +1,114 @@
 <template>
-  <div class="mainContent">
-    <div class="header">
-      <el-form :inline="true" :model="seachData" class="demo-form-inline">
-        <el-form-item label="浜嬩欢绫诲瀷">
-          <el-cascader
-            v-model="seachData.gradeId"
-            :options="eventGradeOptions"
-            :props="options"
-            clearable
-          ></el-cascader>
-        </el-form-item>
-        <el-form-item label="鍙戠敓鐐逛綅">
-          <el-select v-model="seachData.videoId" placeholder="璇烽�夋嫨">
-            <el-option
-              v-for="item in videoOptions"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id"
-            ></el-option>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="鎶ヨ鏃堕棿">
-          <el-date-picker
-            v-model="seachData.alarmTime"
-            type="daterange"
-            align="right"
-            unlink-panels
-            range-separator="鑷�"
-            start-placeholder="寮�濮嬫棩鏈�"
-            end-placeholder="缁撴潫鏃ユ湡"
-          >
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click="getInspectionData">鏌ヨ</el-button>
-          <el-button type="primary" @click="resetAll">閲嶇疆</el-button>
-        </el-form-item>
-      </el-form>
-    </div>
-    <!-- 鏁版嵁灞曠ず -->
-    <el-table
-      border
-      stripe
-      ref="multipleTable"
-      :header-cell-style="{
-        background: '#F5F5F5',
-        'font-weight': '650',
-        'line-height': '45px',
-      }"
-      :data="tableData"
-      style="width: 100%"
-      :row-class-name="tableRowClassName"
-      @selection-change="tableChange"
-    >
-      <el-table-column type="selection" min-width="5"> </el-table-column>
-      <el-table-column prop="code" label="鐐逛綅鍚嶇О" min-width="18">
-        <template slot-scope="scope">
-          <span>{{ scope.row.name || scope.row.address }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="eventSource" label="浜嬩欢绫诲瀷" min-width="8">
-        <template slot-scope="scope">
-          <span>{{ scope.row.alarmName||scope.row.grade }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="alarmTime" label="鎶ヨ鏃堕棿" min-width="15">
-        <template slot-scope="scope">
-          <span>{{ filterTime(scope.row.alarmTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column prop="operation" label="鎿嶄綔" min-width="20">
-        <template slot-scope="scope">
-          <div class="operation">
-            <span @click="handleLearn(scope.row)">澶勭悊</span>
-          </div>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- tools -->
-    <div class="tools">
-      <div class="pagination">
-        <el-pagination
-          background
-          :current-page="currentPage"
-          layout="prev, pager, next"
-          :total="totalNum"
-          :page-size="pageSize"
-          @current-change="changeCurrentPage"
-          @prev-click="handlePrev"
-          @next-click="handleNext"
+    <div class="mainContent">
+        <div class="header">
+            <el-form :inline="true" :model="seachData" class="demo-form-inline">
+                <el-form-item label="浜嬩欢绫诲瀷">
+                    <el-cascader
+                        v-model="seachData.gradeId"
+                        :options="eventGradeOptions"
+                        :props="options"
+                        clearable
+                    ></el-cascader>
+                </el-form-item>
+                <el-form-item label="鍙戠敓鐐逛綅">
+                    <el-select v-model="seachData.videoId" placeholder="璇烽�夋嫨">
+                        <el-option
+                            v-for="item in videoOptions"
+                            :key="item.id"
+                            :label="item.name"
+                            :value="item.id"
+                        ></el-option>
+                    </el-select>
+                </el-form-item>
+                <el-form-item label="鎶ヨ鏃堕棿">
+                    <el-date-picker
+                        v-model="seachData.alarmTime"
+                        type="daterange"
+                        align="right"
+                        unlink-panels
+                        range-separator="鑷�"
+                        start-placeholder="寮�濮嬫棩鏈�"
+                        end-placeholder="缁撴潫鏃ユ湡"
+                    >
+                    </el-date-picker>
+                </el-form-item>
+                <el-form-item>
+                    <el-button type="primary" @click="getInspectionData"
+                        >鏌ヨ</el-button
+                    >
+                    <el-button type="primary" @click="resetAll">閲嶇疆</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+        <!-- 鏁版嵁灞曠ず -->
+        <el-table
+            border
+            stripe
+            ref="multipleTable"
+            :header-cell-style="{
+                background: '#F5F5F5',
+                'font-weight': '650',
+                'line-height': '45px'
+            }"
+            :data="tableData"
+            style="width: 100%"
+            :row-class-name="tableRowClassName"
+            @selection-change="tableChange"
         >
-        </el-pagination>
-      </div>
+            <el-table-column type="selection" min-width="5"> </el-table-column>
+            <el-table-column prop="code" label="鐐逛綅鍚嶇О" min-width="18">
+                <template slot-scope="scope">
+                    <span>{{ scope.row.name || scope.row.address }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="eventSource" label="浜嬩欢绫诲瀷" min-width="8">
+                <template slot-scope="scope">
+                    <span>{{ scope.row.alarmName || scope.row.grade }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="alarmTime" label="鎶ヨ鏃堕棿" min-width="15">
+                <template slot-scope="scope">
+                    <span>{{ filterTime(scope.row.alarmTime) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="operation" label="鎿嶄綔" min-width="20">
+                <template slot-scope="scope">
+                    <div class="operation">
+                        <span @click="handleLearn(scope.row)">澶勭悊</span>
+                    </div>
+                </template>
+            </el-table-column>
+        </el-table>
+        <!-- tools -->
+        <div class="tools">
+            <div class="pagination">
+                <el-pagination
+                    background
+                    :current-page="currentPage"
+                    layout="prev, pager, next"
+                    :total="totalNum"
+                    :page-size="pageSize"
+                    @current-change="changeCurrentPage"
+                    @prev-click="handlePrev"
+                    @next-click="handleNext"
+                >
+                </el-pagination>
+            </div>
+        </div>
+        <!-- 鏂板 -->
+        <el-dialog
+            :visible.sync="dialogAdd"
+            width="90%"
+            title="棰勮鐮斿垽"
+            v-if="dialogAdd"
+            :before-close="handleClose"
+        >
+            <JudgeIndex
+                :info="videoInspection"
+                :seachData="seachData"
+            ></JudgeIndex>
+        </el-dialog>
     </div>
-    <!-- 鏂板 -->
-    <el-dialog
-      :visible.sync="dialogAdd"
-      width="90%"
-      title="棰勮鐮斿垽"
-      v-if="dialogAdd"
-      :before-close="handleClose"
-    >
-      <JudgeIndex :info="videoInspection" :seachData="seachData"></JudgeIndex>
-    </el-dialog>
-  </div>
 </template>
   
   <script>
@@ -114,219 +119,230 @@
 import JudgeIndex from "./index.vue";
 
 export default {
-  components: { JudgeIndex },
-  created() {
-    this.loadVideo();
-    this.loadEventGrade();
-    this.getInspectionData();
-  },
-  data() {
-    return {
-      dialogAdd: false,
-      preMyIdx: 0,
-      mystatus: 1,
-      tableData: [],
-      myIdx: 0,
-      totalNum: 0,
-      pageSize: 10,
-      currentPage: 1,
-      all: false,
-      unsame: false,
-      tempList: [],
-      eventGradeOptions: [],
-      videoOptions: [],
-      options: {
-        label: "name",
-        value: "id",
-      },
-      seachData: {},
-      videoInspection: {},
-    };
-  },
-  methods: {
-    loadVideo() {
-      videoPoint
-        .getVideoPointList({
-          current: 1,
-          size: 1000,
-        })
-        .then(({ records, total }) => {
-          this.videoOptions = records;
-        });
+    components: { JudgeIndex },
+    created() {
+        this.loadVideo();
+        this.loadEventGrade();
+        this.getInspectionData();
     },
-    loadEventGrade() {
-      getTypeList("1", "02").then((result) => {
-        this.eventGradeOptions = result;
-      });
+    data() {
+        return {
+            dialogAdd: false,
+            preMyIdx: 0,
+            mystatus: 1,
+            tableData: [],
+            myIdx: 0,
+            totalNum: 0,
+            pageSize: 10,
+            currentPage: 1,
+            all: false,
+            unsame: false,
+            tempList: [],
+            eventGradeOptions: [],
+            videoOptions: [],
+            options: {
+                label: "name",
+                value: "id",
+            },
+            seachData: {},
+            videoInspection: {},
+        };
     },
-    tableChange(list) {
-      this.tempList = [];
-      list.forEach((item) => {
-        this.tempList.push(item.id);
-      });
-      if (list.length === this.tableData.length) {
-        this.all = true;
-      } else {
-        this.all = false;
-      }
+      watch: {
+        '$route'(to, from) { //鐩戝惉璺敱鏄惁鍙樺寲
+            this.getInspectionData();
+        }
     },
+    methods: {
+        loadVideo() {
+            let path = this.$route.path;
 
-    handlePrev(page) {
-      this.currentPage = page;
-      this.getInspectionData();
-    },
-    handleNext(page) {
-      this.currentPage = page;
-      this.getInspectionData();
-    },
-    changeCurrentPage(page) {
-      this.currentPage = page;
-      this.getInspectionData();
-    },
-    selectAll() {
-      this.$refs.multipleTable.toggleAllSelection();
-    },
-    disSame(list) {
-      list.forEach((row) => {
-        this.$refs.multipleTable.toggleRowSelection(row);
-      });
-    },
-    tableRowClassName({ row, rowIndex }) {
-      if ((rowIndex + 1) % 2 === 0) {
-        return "warning-row";
-      } else {
-        return "success-row";
-      }
-    },
-    getInspectionData() {
-      let data = {
-        current: this.currentPage,
-        pageSize: this.pageSize,
-        videoId: this.seachData.videoId,
-      };
-      if (this.seachData.alarmTime) {
-        data.beginTime = this.seachData.alarmTime[0];
-        data.endTime = this.seachData.alarmTime[1];
-      }
-      if (this.seachData.gradeId) {
-        data.gradeId = this.seachData.gradeId[1];
-      }
-      basecase
-        .getInspectionData(data)
-        .then(({ records, total }) => {
-          this.tableData = records;
-          this.totalNum = total;
-        })
-        .catch((err) => this.$message.error(err));
-    },
+            videoPoint
+                .getVideoPointList({
+                    type: path.substring(path.length - 1, path.length),
+                    current: 1,
+                    size: 1000,
+                })
+                .then(({ records, total }) => {
+                    this.videoOptions = records;
+                });
+        },
+        loadEventGrade() {
+            getTypeList("1", "02").then((result) => {
+                this.eventGradeOptions = result;
+            });
+        },
+        tableChange(list) {
+            this.tempList = [];
+            list.forEach((item) => {
+                this.tempList.push(item.id);
+            });
+            if (list.length === this.tableData.length) {
+                this.all = true;
+            } else {
+                this.all = false;
+            }
+        },
 
-    filterTime(time) {
-      return helper(time);
+        handlePrev(page) {
+            this.currentPage = page;
+            this.getInspectionData();
+        },
+        handleNext(page) {
+            this.currentPage = page;
+            this.getInspectionData();
+        },
+        changeCurrentPage(page) {
+            this.currentPage = page;
+            this.getInspectionData();
+        },
+        selectAll() {
+            this.$refs.multipleTable.toggleAllSelection();
+        },
+        disSame(list) {
+            list.forEach((row) => {
+                this.$refs.multipleTable.toggleRowSelection(row);
+            });
+        },
+        tableRowClassName({ row, rowIndex }) {
+            if ((rowIndex + 1) % 2 === 0) {
+                return "warning-row";
+            } else {
+                return "success-row";
+            }
+        },
+        getInspectionData() {
+            let path = this.$route.path;
+
+            let data = {
+                current: this.currentPage,
+                pageSize: this.pageSize,
+                type: path.substring(path.length - 1, path.length),
+                videoId: this.seachData.videoId,
+            };
+            if (this.seachData.alarmTime) {
+                data.beginTime = this.seachData.alarmTime[0];
+                data.endTime = this.seachData.alarmTime[1];
+            }
+            if (this.seachData.gradeId) {
+                data.gradeId = this.seachData.gradeId[1];
+            }
+            basecase
+                .getInspectionData(data)
+                .then(({ records, total }) => {
+                    this.tableData = records;
+                    this.totalNum = total;
+                })
+                .catch((err) => this.$message.error(err));
+        },
+
+        filterTime(time) {
+            return helper(time);
+        },
+        handleLearn(row) {
+            this.dialogAdd = true;
+            this.videoInspection = row;
+
+        },
+        handleClose(done) {
+            this.changeCurrentPage(1);
+            done();
+        },
+        resetAll() {
+            this.seachData = {};
+        },
     },
-    handleLearn(row) {
-      this.dialogAdd = true;
-      this.videoInspection = row;
-      
-    },
-    handleClose(done) {
-      this.changeCurrentPage(1);
-      done();
-    },
-    resetAll() {
-      this.seachData = {};
-    },
-  },
 };
 </script>
   
   <style scoped lang="scss">
 .tools {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 20px;
-
-  .funs-sp {
-    //border: 1px solid #DCDFE6;
-  }
-
-  .funs {
     display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
 
-    .funsItem {
-      border: 1px solid #dcdfe6;
-      line-height: 28px;
-      display: flex;
-      align-items: center;
-      border-radius: 4px;
-      font-size: 12px;
-      margin-left: 10px;
-
-      .el-checkbox {
-        width: 80px;
-        padding: 0 10px;
-      }
-
-      .el-select {
-        width: 120px;
-      }
-
-      &::v-deep .el-input__inner {
-        border: none;
-        // background-color: #09152f;
-      }
-
-      &:hover {
-        border: 1px solid #4b9bb7;
-      }
-
-      &:hover .el-checkbox {
-        color: #4b9bb7;
-      }
+    .funs-sp {
+        //border: 1px solid #DCDFE6;
     }
-  }
 
-  .pagination {
-    margin-top: 50px;
-    display: flex;
-    line-height: 50px;
-    justify-content: center;
+    .funs {
+        display: flex;
 
-    .el-pagination {
-      &::v-deep li,
-      &::v-deep .btn-prev,
-      &::v-deep .btn-next {
-        // background-color: #071f39;
-        color: #4b9bb7;
-      }
+        .funsItem {
+            border: 1px solid #dcdfe6;
+            line-height: 28px;
+            display: flex;
+            align-items: center;
+            border-radius: 4px;
+            font-size: 12px;
+            margin-left: 10px;
 
-      &::v-deep .active {
-        background-color: #409eff;
-        color: #fff;
-      }
+            .el-checkbox {
+                width: 80px;
+                padding: 0 10px;
+            }
+
+            .el-select {
+                width: 120px;
+            }
+
+            &::v-deep .el-input__inner {
+                border: none;
+                // background-color: #09152f;
+            }
+
+            &:hover {
+                border: 1px solid #4b9bb7;
+            }
+
+            &:hover .el-checkbox {
+                color: #4b9bb7;
+            }
+        }
     }
-  }
+
+    .pagination {
+        margin-top: 50px;
+        display: flex;
+        line-height: 50px;
+        justify-content: center;
+
+        .el-pagination {
+            &::v-deep li,
+            &::v-deep .btn-prev,
+            &::v-deep .btn-next {
+                // background-color: #071f39;
+                color: #4b9bb7;
+            }
+
+            &::v-deep .active {
+                background-color: #409eff;
+                color: #fff;
+            }
+        }
+    }
 }
 
 .el-table {
-  // color: #4b9bb7;
-  // font-size: 10px;
+    // color: #4b9bb7;
+    // font-size: 10px;
 
-  .operation {
-    display: flex;
-    color: var(--operation-color);
-    .line {
-      padding: 0 5px;
-    }
+    .operation {
+        display: flex;
+        color: var(--operation-color);
+        .line {
+            padding: 0 5px;
+        }
 
-    span:hover {
-      cursor: pointer;
+        span:hover {
+            cursor: pointer;
+        }
     }
-  }
 }
 
 .header {
-  line-height: normal;
+    line-height: normal;
 }
 </style>
   
\ No newline at end of file
diff --git a/src/views/layout/components/Main/index.vue b/src/views/layout/components/Main/index.vue
index 13a7598..c49658f 100644
--- a/src/views/layout/components/Main/index.vue
+++ b/src/views/layout/components/Main/index.vue
@@ -15,7 +15,7 @@
           </div>
         </div>
       </div>
-      <router-view v-else></router-view>
+      <router-view v-else :key="$route.fullpath"></router-view>
       <!-- 搴曢儴鍖哄煙 -->
       <!-- <MyFooter/> -->
     </div>
@@ -190,7 +190,13 @@
             {
               id: 42,
               label: '瑙嗛宸℃煡',
-              link: '/video',
+              link: '/video_0',
+              icon: 'icon_shipinxuncha'
+            },
+            {
+              id: 80,
+              label: '100璺棰戝贰鏌�',
+              link: '/video_1',
               icon: 'icon_shipinxuncha'
             },
           ]
@@ -203,7 +209,13 @@
             {
               id: 44,
               label: '棰勮鐮斿垽',
-              link: '/studyJudge',
+              link: '/studyJudge_0',
+              icon: 'icon_yujingyanpan'
+            },
+            {
+              id: 81,
+              label: '100璺璀︾爺鍒�',
+              link: '/studyJudge_1',
               icon: 'icon_yujingyanpan'
             },
             {
diff --git a/src/views/layout/components/Menu/index.vue b/src/views/layout/components/Menu/index.vue
index ad7f937..5302c98 100644
--- a/src/views/layout/components/Menu/index.vue
+++ b/src/views/layout/components/Menu/index.vue
@@ -102,8 +102,13 @@
     watch: {
         $route() {
             this.handleSelect(this.$route.fullPath)
-        }
+        },
+        '$route.path'(toPath, fromPath) {
+            this.handleSelect(toPath)
+            this.$router.push({ path: toPath })
+        },
     },
+
     methods: {
         handleSelect(path) {
             this.isActive = path
diff --git a/src/views/video/index.vue b/src/views/video/index.vue
index d601e9c..356c75c 100644
--- a/src/views/video/index.vue
+++ b/src/views/video/index.vue
@@ -1,101 +1,110 @@
 <template>
-  <el-container class="video-container" style="height: 100%">
-    <el-aside heigth="100%" width="200px">
-      <department-aside @selectedDepartment="selectedDepartment" />
-    </el-aside>
+    <el-container class="video-container" style="height: 100%">
+        <el-aside heigth="100%" width="200px">
+            <department-aside @selectedDepartment="selectedDepartment" />
+        </el-aside>
 
-    <el-container class="video-body-right">
-      <el-header style="display: flex; flex-direction: column; height: 120px">
-        <div
-          style="display: flex; justify-content: space-between; height: 80px"
-        >
-          <span
-            style="
-              color: rgb(75, 155, 183);
-              font-weight: 500;
-              text-align: left;
-              font-size: 16px;
-            "
-            >鏁翠綋瓒嬪娍</span
-          >
-          <el-date-picker
-            class="video-time-select"
-            v-model="value"
-            type="date"
-            placeholder="閫夋嫨鏃ユ湡"
-          >
-          </el-date-picker>
-        </div>
-        <!-- <div style="height: 60px; display: flex; justify-content: flex-start">
+        <el-container class="video-body-right">
+            <el-header
+                style="display: flex; flex-direction: column; height: 120px"
+            >
+                <div
+                    style="
+                        display: flex;
+                        justify-content: space-between;
+                        height: 80px;
+                    "
+                >
+                    <span
+                        style="
+                            color: rgb(75, 155, 183);
+                            font-weight: 500;
+                            text-align: left;
+                            font-size: 16px;
+                        "
+                        >鏁翠綋瓒嬪娍</span
+                    >
+                    <el-date-picker
+                        class="video-time-select"
+                        v-model="value"
+                        type="date"
+                        placeholder="閫夋嫨鏃ユ湡"
+                    >
+                    </el-date-picker>
+                </div>
+                <!-- <div style="height: 60px; display: flex; justify-content: flex-start">
           <el-button class="button-one"> 瑙嗛棰勮 </el-button>
           <el-button class="button-two"> 瑙嗛宸℃煡 </el-button>
           <el-button class="button-third"> 鍥剧墖宸℃煡 </el-button>
         </div> -->
-      </el-header>
+            </el-header>
 
-      <el-main style="display: flex; flex-wrap: wrap; overflow-y: scroll">
-        <div
-          v-for="item in videoData"
-          :key="item.id"
-          style="
-            height: 360px;
-            width: 400px;
-            position: relative;
-            margin-left: 20px;
-          "
-        >
-          <div
-            style="
-              color: rgb(75, 155, 183);
-              font-size: 11px;
-              line-height: 18px;
-              position: absolute;
-              z-index: 1;
-              left: 50px;
-            "
-          >
-            {{ item.community }}-{{ item.name }}
-          </div>
-          <video
-            :id="item.id"
-            class="video-js"
-            controls
-            preload="auto"
-            width="400px"
-            height="300px"
-            type="video/mp4"
-          ></video>
-          <div class="button-div">
-            <div @click="loadVideo(item)">鏌ョ湅瑙嗛</div>
-            <div>瑙嗛涓婃姤</div>
-            <div @click="create(item)">瀵硅</div>
-          </div>
-        </div>
-      </el-main>
-      <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 id="dom2" class="dom2"></div>
-          <div id="dom3" class="dom3"></div>
-        </div>
-      </el-dialog>
-      <el-footer>
-        <div style="margin-bottom: 0">
-          <el-pagination
-            layout="prev, pager, next"
-            @current-change="currentPageChange"
-            :total="totalNum"
-            :page-size="pageSize"
-          ></el-pagination>
-        </div>
-      </el-footer>
+            <el-main style="display: flex; flex-wrap: wrap; overflow-y: scroll">
+                <div
+                    v-for="item in videoData"
+                    :key="item.id"
+                    style="
+                        height: 360px;
+                        width: 400px;
+                        position: relative;
+                        margin-left: 20px;
+                    "
+                >
+                    <div
+                        style="
+                            color: rgb(75, 155, 183);
+                            font-size: 11px;
+                            line-height: 18px;
+                            position: absolute;
+                            z-index: 1;
+                            left: 50px;
+                        "
+                    >
+                        {{ item.community }}-{{ item.name }}
+                    </div>
+                    <video
+                        :id="item.id"
+                        class="video-js"
+                        controls
+                        preload="auto"
+                        width="400px"
+                        height="300px"
+                        type="video/mp4"
+                    ></video>
+                    <div class="button-div">
+                        <div @click="loadVideo(item)">鏌ョ湅瑙嗛</div>
+                        <div>瑙嗛涓婃姤</div>
+                        <div @click="create(item)">瀵硅</div>
+                    </div>
+                </div>
+            </el-main>
+            <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 id="dom2" class="dom2"></div>
+                    <div id="dom3" class="dom3"></div>
+                </div>
+            </el-dialog>
+            <el-footer>
+                <div style="margin-bottom: 0">
+                    <el-pagination
+                        layout="prev, pager, next"
+                        @current-change="currentPageChange"
+                        :total="totalNum"
+                        :page-size="pageSize"
+                    ></el-pagination>
+                </div>
+            </el-footer>
+        </el-container>
     </el-container>
-  </el-container>
 </template>
 
 <script>
@@ -104,304 +113,311 @@
 import videoPoint from "@/api/system/videoPoint";
 
 export default {
-  components: { departmentAside },
-  data() {
-    return {
-      currentPage: 1,
-      totalNum: 7,
-      pageSize: 8,
-      videoData: [],
-      value: null,
-      dialogCreate: false,
-      cutPosX: 10,
-      cutPosY: 10,
-      cutWidth: 100,
-      cutHeight: 100,
-      crtPosX: 0,
-      crtPosY: 0,
-      crtWidth: 1000,
-      crtHeight: 600,
-      domId: "dom1",
-      ctrl: "ctrl1",
-    };
-  },
-
-  created() {
-    this.getVideoPointList();
-  },
-  mounted() {},
-  methods: {
-    loadVideo(item) {
-      if (item.code || item.platResourceId) {
-        if (Hls.isSupported()) {
-          var video = document.getElementById(item.id);
-          var hls = new Hls();
-          videoPoint
-            .getVideoPointUrl(item.code || item.platResourceId)
-            .then((res) => {
-              if (res.code === 0) {
-                hls.loadSource(res.data);
-                hls.attachMedia(video);
-                setTimeout(() => {
-                  video.play();
-                }, 2000);
-              }
-            });
+    components: { departmentAside },
+    data() {
+        return {
+            currentPage: 1,
+            totalNum: 7,
+            pageSize: 8,
+            videoData: [],
+            value: null,
+            dialogCreate: false,
+            cutPosX: 10,
+            cutPosY: 10,
+            cutWidth: 100,
+            cutHeight: 100,
+            crtPosX: 0,
+            crtPosY: 0,
+            crtWidth: 1000,
+            crtHeight: 600,
+            domId: "dom1",
+            ctrl: "ctrl1",
+        };
+    },
+    watch: {
+        '$route'(to, from) { //鐩戝惉璺敱鏄惁鍙樺寲
+            this.getVideoPointList();
         }
-      } else {
-        this.$message.error("鏆傛棤瑙嗛");
-      }
     },
-    getVideoPointList(data) {
-      let communityId, streetId;
-      if (data) {
-        communityId = data.id;
-        streetId = data.parentId;
-      }
-      videoPoint
-        .getVideoPointList({
-          current: this.currentPage,
-          size: this.pageSize,
-          communityId,
-          streetId,
-        })
-        .then(({ records, total }) => {
-          this.videoData = records;
-          this.totalNum = total;
-        })
-        .catch((err) => this.$message.error(err));
+    created() {
+        this.getVideoPointList();
     },
-    selectedDepartment(data) {
-      this.getVideoPointList(data);
-    },
-    currentPageChange(page) {
-      this.currentPage = page;
-      this.getVideoPointList();
-    },
-    handleClose2() {
-      this.dialogCreate = false;
-      this.destroy();
-    },
-    login() {
-      // 璋冪敤鐧诲綍鎺ュ彛
-      this.ws.detectConnectQt().then((res) => {
-        if (res) {
-          // 杩炴帴瀹㈡埛绔垚鍔�
-          this.ws.login({
-            loginIp: "172.28.194.180",
-            loginPort: "7902",
-            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";
+    mounted() { },
+    methods: {
+        loadVideo(item) {
+            if (item.code || item.platResourceId) {
+                if (Hls.isSupported()) {
+                    var video = document.getElementById(item.id);
+                    var hls = new Hls();
+                    videoPoint
+                        .getVideoPointUrl(item.code || item.platResourceId)
+                        .then((res) => {
+                            if (res.code === 0) {
+                                hls.loadSource(res.data);
+                                hls.attachMedia(video);
+                                setTimeout(() => {
+                                    video.play();
+                                }, 2000);
+                            }
+                        });
+                }
             } else {
-              this.$message.info("鐧诲綍澶辫触");
+                this.$message.error("鏆傛棤瑙嗛");
             }
-          });
-        } else {
-          // 杩炴帴瀹㈡埛绔け璐�
-          this.$message.info("璇烽噸鏂板畨瑁呭鎴风");
-        }
-      });
-    },
-    logout() {
-      // 璋冪敤鐧诲嚭鎺ュ彛
-      this.ws.logout({
-        loginIp: this.loginIp,
-      });
-    },
-    create(item) {
-      if (item.platResourceId && item.code) {
-        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: 1,
-                splitNum: 1,
-                channelList: [{ channelId: item.code }],
-              },
-              visible: true,
-              domId: this.domId,
-            },
-          ];
-          this.setPos();
-          _this.ws
-            .createCtrl(params)
-            .then((res) => {
-              this.$message.success("鍒涘缓鎴愬姛");
-              console.log("res", res);
-            })
-            .catch((e) => {
-              console.log("error;", e);
-            });
-          _this.ws.on("createCtrlResult", (res) => {
-            console.warn(res);
-          });
-        }, 1000);
-      } else {
-        this.$message.error("鏆傛棤瑙嗛");
-      }
-    },
+        },
+        getVideoPointList(data) {
+            let path = this.$route.path;
+            let communityId, streetId;
+            if (data) {
+                communityId = data.id;
+                streetId = data.parentId;
+            }
 
-    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);
+            videoPoint
+                .getVideoPointList({
+                    current: this.currentPage,
+                    size: this.pageSize,
+                    type: path.substring(path.length - 1, path.length),
+                    communityId,
+                    streetId,
+                })
+                .then(({ records, total }) => {
+                    this.videoData = records;
+                    this.totalNum = total;
+                })
+                .catch((err) => this.$message.error(err));
+        },
+        selectedDepartment(data) {
+            this.getVideoPointList(data);
+        },
+        currentPageChange(page) {
+            this.currentPage = page;
+            this.getVideoPointList();
+        },
+        handleClose2() {
+            this.dialogCreate = false;
+            this.destroy();
+        },
+        login() {
+            // 璋冪敤鐧诲綍鎺ュ彛
+            this.ws.detectConnectQt().then((res) => {
+                if (res) {
+                    // 杩炴帴瀹㈡埛绔垚鍔�
+                    this.ws.login({
+                        loginIp: "172.28.194.180",
+                        loginPort: "7902",
+                        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,
+            });
+        },
+        create(item) {
+            if (item.platResourceId && item.code) {
+                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: 1,
+                                splitNum: 1,
+                                channelList: [{ channelId: item.code }],
+                            },
+                            visible: true,
+                            domId: this.domId,
+                        },
+                    ];
+                    this.setPos();
+                    _this.ws
+                        .createCtrl(params)
+                        .then((res) => {
+                            this.$message.success("鍒涘缓鎴愬姛");
+                            console.log("res", res);
+                        })
+                        .catch((e) => {
+                            console.log("error;", e);
+                        });
+                    _this.ws.on("createCtrlResult", (res) => {
+                        console.warn(res);
+                    });
+                }, 1000);
+            } else {
+                this.$message.error("鏆傛棤瑙嗛");
+            }
+        },
+
+        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");
+            }
+        },
     },
-    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");
-      }
-    },
-  },
 };
 </script>
 <style lang="scss" scoped>
 .video-time-select {
-  &::v-deep .el-input__prefix {
-    height: auto;
-  }
+    &::v-deep .el-input__prefix {
+        height: auto;
+    }
 }
 .video-body-right {
-  padding: 10px;
-  border: 1px solid #ccc;
-  margin-left: 5px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    margin-left: 5px;
 }
 .button-one {
-  height: 40px;
-  width: 80px;
-  margin-left: 20px;
-  padding: 0;
-  // background-color: #09152f;
-  color: rgb(75, 155, 183);
-  border: 1px solid rgb(75, 155, 183);
+    height: 40px;
+    width: 80px;
+    margin-left: 20px;
+    padding: 0;
+    // background-color: #09152f;
+    color: rgb(75, 155, 183);
+    border: 1px solid rgb(75, 155, 183);
 }
 
 .button-two {
-  height: 40px;
-  width: 80px;
-  padding: 0;
-  // background-color: #09152f;
-  color: rgb(75, 155, 183);
-  border: 1px solid rgb(75, 155, 183);
+    height: 40px;
+    width: 80px;
+    padding: 0;
+    // background-color: #09152f;
+    color: rgb(75, 155, 183);
+    border: 1px solid rgb(75, 155, 183);
 }
 .el-button + .el-button {
-  margin: 0;
+    margin: 0;
 }
 .button-third {
-  height: 40px;
-  width: 80px;
-  padding: 0;
-  // background-color: #09152f;
-  color: rgb(75, 155, 183);
-  border: 1px solid rgb(75, 155, 183);
+    height: 40px;
+    width: 80px;
+    padding: 0;
+    // background-color: #09152f;
+    color: rgb(75, 155, 183);
+    border: 1px solid rgb(75, 155, 183);
 }
 
 .video-js {
-  border: 1px solid rgb(75, 155, 183);
-  margin-left: 20px;
+    border: 1px solid rgb(75, 155, 183);
+    margin-left: 20px;
 }
 .button-div {
-  color: rgb(75, 155, 183);
-  position: absolute;
-  height: 30px;
-  line-height: 30px;
-  width: 100%;
-  margin-left: 20px;
-  display: flex;
-  justify-content: center;
-
-  div {
-    font-size: 11px;
+    color: rgb(75, 155, 183);
+    position: absolute;
+    height: 30px;
+    line-height: 30px;
+    width: 100%;
+    margin-left: 20px;
     display: flex;
     justify-content: center;
-    cursor: pointer;
-    border: 1px solid rgb(75, 155, 183);
 
-    width: 33.3%;
-  }
+    div {
+        font-size: 11px;
+        display: flex;
+        justify-content: center;
+        cursor: pointer;
+        border: 1px solid rgb(75, 155, 183);
+
+        width: 33.3%;
+    }
 }
 
 .bottonOne {
-  color: rgb(75, 155, 183);
-  font-size: 11px;
-  position: absolute;
-  height: 30px;
-  line-height: 30px;
-  margin-left: 20px;
-  width: 33.3%;
-  border: 1px solid rgb(75, 155, 183);
-  cursor: pointer;
+    color: rgb(75, 155, 183);
+    font-size: 11px;
+    position: absolute;
+    height: 30px;
+    line-height: 30px;
+    margin-left: 20px;
+    width: 33.3%;
+    border: 1px solid rgb(75, 155, 183);
+    cursor: pointer;
 }
 
 .bottonTwo {
-  color: rgb(75, 155, 183);
-  font-size: 11px;
-  position: absolute;
-  height: 30px;
-  line-height: 30px;
-  width: 33.3%;
-  border: 1px solid rgb(75, 155, 183);
-  margin-left: 90px;
-  cursor: pointer;
+    color: rgb(75, 155, 183);
+    font-size: 11px;
+    position: absolute;
+    height: 30px;
+    line-height: 30px;
+    width: 33.3%;
+    border: 1px solid rgb(75, 155, 183);
+    margin-left: 90px;
+    cursor: pointer;
 }
 .el-pagination {
-  line-height: 40px;
+    line-height: 40px;
 }
 .bottonThird {
-  color: rgb(75, 155, 183);
-  font-size: 11px;
-  position: absolute;
-  height: 30px;
-  line-height: 30px;
-  width: 33.3%;
-  border: 1px solid rgb(75, 155, 183);
-  margin-left: 160px;
-  cursor: pointer;
+    color: rgb(75, 155, 183);
+    font-size: 11px;
+    position: absolute;
+    height: 30px;
+    line-height: 30px;
+    width: 33.3%;
+    border: 1px solid rgb(75, 155, 183);
+    margin-left: 160px;
+    cursor: pointer;
 }
 
 ::v-deep .el-header {
-  // background-color: #09152f;
-  color: #000;
-  line-height: 60px;
+    // background-color: #09152f;
+    color: #000;
+    line-height: 60px;
 }
 
 // ::v-deep .el-aside {
@@ -418,31 +434,31 @@
 // }
 
 ::v-deep .el-tree-node__label {
-  line-height: 30px;
-  font-size: 14px;
-  color: rgb(75, 155, 183);
+    line-height: 30px;
+    font-size: 14px;
+    color: rgb(75, 155, 183);
 }
 .dom1 {
-  margin: 0 auto;
+    margin: 0 auto;
 }
 
 video::-webkit-media-controls-timeline {
-  display: none;
+    display: none;
 }
 
 video::-webkit-media-controls-current-time-display {
-  display: none;
+    display: none;
 }
 
 video::-webkit-media-controls-time-remaining-display {
-  display: none;
+    display: none;
 }
 
 video::-webkit-media-controls-mute-button {
-  display: none;
+    display: none;
 }
 
 video::-webkit-media-controls-toggle-closed-captions-button {
-  display: none;
+    display: none;
 }
 </style>
diff --git a/vue.config.js b/vue.config.js
index 5387c35..1dc1c13 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -40,7 +40,8 @@
       // 璺ㄥ煙閰嶇疆
       "/sccg": {
         // target: `http://42.193.1.25/`,      //娴嬭瘯鐜
-        target: `http://127.0.0.1:8082/`,
+        // target: `http://111.1.140.92:8082/`,
+        target: `http://10.88.10.18:8082/`,
         changeOrigin: true
       }
     },

--
Gitblit v1.8.0