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