From 557ab21ba91a175f68c5b5eb158ddb26c44f9bac Mon Sep 17 00:00:00 2001 From: fangyuan <527392886@qq.com> Date: 星期一, 12 十二月 2022 16:49:29 +0800 Subject: [PATCH] 视频管理,图片管理 批量操作修改 --- src/views/intelligentPatrol/studyJudge/index.vue | 368 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 364 insertions(+), 4 deletions(-) diff --git a/src/views/intelligentPatrol/studyJudge/index.vue b/src/views/intelligentPatrol/studyJudge/index.vue index 9278ea7..b5fc94f 100644 --- a/src/views/intelligentPatrol/studyJudge/index.vue +++ b/src/views/intelligentPatrol/studyJudge/index.vue @@ -1,13 +1,373 @@ <template> - <div>棰勮鐮斿垽</div> + <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">瀹炴椂棰勮</el-button> + <el-button size="small">褰曞儚鍥炴斁</el-button> + </div> + </div> + <div class="sjm-content"> + <div class="sjm-content-left"> + <div class="img-item" v-for="(item, index) in imageList" :key="item.id"> + <span>鎶ヨ鍥剧墖</span> + <img :src="item"> + <span v-if="index === 0">鎶ヨ鏃堕棿锛歿{ currentEvent.alarmTime }}</span> + </div> + </div> + <div class="sjm-content-center"> + 鍦板浘瀹瑰櫒 + </div> + <div class="sjm-content-right"> + <div class="card-box"> + <div class="card-header"> + <span>鎶ヨ璁板綍</span> + <span>涔卞仠涔辨斁杩濇硶鍗犻亾</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> + <el-dialog :visible="isShowDialog" title="璋冨害淇℃伅"> + <MyDispatch v-if="isShowDialog" :mytype="1" @getDispatchData="confirmInspection" :isGetData="true" @changeDialog="closeDialog"></MyDispatch> + </el-dialog> + </div> </template> <script> -export default { +import basecase from "@/api/operate/basecase"; +import baseInfo from "@/api/baseInfo"; +import { getStoreInfoList } from "@/api/operate/storeManagement"; +import { FILE_ORIGINAL_URL } from "@/utils"; +import { validateCarNum } from "@/utils/validate"; +import MyDispatch from '@/components/dispatch'; +export default { + components: { MyDispatch }, + created() { + this.getInspectionData(); + this.initEventParams(); + basecase.getInspectionCountData() + .then(res => { + this.countData = res; + }) + .catch(err => this.$message.error(err)) + + getStoreInfoList({ current: 1, size: 100 }) + .then(({ list }) => { + this.storeList = list; + }) + .catch(err => { + this.$message.error(err) + }) + + 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)) + }, + data() { + const validateCarNumber = (rule, value, callback) => { + if (value) { + if (validateCarNum(value)) { + callback(); + } else { + callback(new Error('璇疯緭鍏ユ纭殑杞︾墝鍙�')); + } + } else { + callback(); + } + }; + return { + countData: { + study: 0, + review: 0, + register: 0 + }, + currentEvent: {}, + stateList: [ + { + id: 2, + 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 + } + }, + methods:{ + pageChange(type) { + if (type === 'next') { + this.currentPage += 1; + } else { + this.currentPage -= 1; + } + this.getInspectionData(); + }, + + getInspectionData() { + basecase.getInspectionData({ current: this.currentPage }) + .then(({ records }) => { + this.currentEvent = records[0]; + if (this.currentEvent?.picData) { + this.imageList = this.currentEvent.picData.split(',').map(item => `${FILE_ORIGINAL_URL}${item}`); + } + if (this.currentEvent?.alarmTime || this.currentEvent?.currentAlarmTime) { + const { alarmTime, currentAlarmTime } = this.currentEvent; + const continueAlarmTime = new Date().getTime() - + (currentAlarmTime ? new Date(currentAlarmTime).getTime() : new Date(alarmTime).getTime()); + const CONTINUE_DAY = continueAlarmTime / 1000 / 60 / 60 / 24; + const CONTINUE_HOURS = (CONTINUE_DAY - parseInt(CONTINUE_DAY)) * 24; + this.currentEvent.conntinueTime = `${parseInt(CONTINUE_DAY)}澶�${parseInt(CONTINUE_HOURS)}灏忔椂`; + } + }) + .catch(err => this.$message.error(err)) + }, + + // 纭鐐瑰嚮浜嬩欢 + 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) { + const selectedStore = this.storeList.find(store => store.id === id); + this.eventInfoData.shopName = selectedStore.id; + this.eventInfoData.linkShop = 1; + return selectedStore; + } + } } </script> -<style> +<style lang="scss" scoped> +.study-judge { + text-align: left; + color: #4b9bb7; + padding: 20px; + .study-judge-header { + line-height: 8vh; + } -</style> \ No newline at end of file + .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; + + .img-item { + display: flex; + flex-direction: column; + + img { + width: 15vw; + height: 20vh; + } + } + + .img-item+.img-item { + margin-top: 2vh; + } + } + + .sjm-content-right { + .card-box { + .card-header { + line-height: 4.8vh; + } + } + } + } + } + + .el-form { + ::v-deep .el-form-item { + } + + ::v-deep .el-form-item__label { + color: #4b9bb7; + } + } + + ::v-deep .el-radio__label { + color: #4b9bb7; + } +} +</style> -- Gitblit v1.8.0