From d6fb18b49cd61427a343fbe7a2a4f94e4b597bdc Mon Sep 17 00:00:00 2001 From: wl <173@qq.com> Date: 星期四, 29 十二月 2022 14:00:41 +0800 Subject: [PATCH] fix:店铺状态 --- src/views/intelligentPatrol/illegalSearch/index.vue | 343 ++++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 220 insertions(+), 123 deletions(-) diff --git a/src/views/intelligentPatrol/illegalSearch/index.vue b/src/views/intelligentPatrol/illegalSearch/index.vue index deaf20d..6a94151 100644 --- a/src/views/intelligentPatrol/illegalSearch/index.vue +++ b/src/views/intelligentPatrol/illegalSearch/index.vue @@ -4,8 +4,17 @@ <div class="headerContent"> <!-- 鏉′欢绛涢�� --> <el-form ref="condition" :model="form" label-width="100px"> - <el-form-item :label=item.label :key=item.id v-for="item in headerList"> - <el-input v-model="item.value" :placeholder="item.placeholder"></el-input> + <el-form-item :label=item.label :key=item.id v-for="item in headerList" :prop="item.prop"> + <el-input v-if="item.type === 'input'" v-model="form[item.prop]" :placeholder="item.placeholder"></el-input> + <el-cascader v-if="item.type === 'cascader'" :options="item.options" + :props="{ value: 'id', label: 'regionName' }" v-model="form[item.prop]" + :placeholder="item.placeholder"></el-cascader> + <el-select v-if="item.type === 'select'" v-model="form[item.prop]" :placeholder="item.placeholder"> + <el-option v-for="option in item.options" :value="option.id" :key="option.id" + :label="option.name"></el-option> + </el-select> + <el-date-picker v-if="item.type === 'timepick'" type="datetimerange" v-model="form[item.prop]" + start-placeholder="寮�濮嬫棩鏈�" end-placeholder="缁撴潫鏃ユ湡" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker> </el-form-item> </el-form> </div> @@ -15,31 +24,31 @@ <!-- 鎸夐挳鍖哄煙 --> <div class="main-btns"> <div class="main-btns-left"> - <el-button icon="el-icon-download">涓嬭浇鍥剧墖</el-button> - <el-button icon="el-icon-folder">瀵煎嚭</el-button> +<!-- <el-button icon="el-icon-download">涓嬭浇鍥剧墖</el-button>--> + <el-button icon="el-icon-folder" @click="exportTableData">瀵煎嚭</el-button> </div> <div class="main-btns-right"> - <el-button icon="el-icon-search">鏌ヨ</el-button> + <el-button icon="el-icon-search" @click="searchTableData">鏌ヨ</el-button> <el-button icon="el-icon-delete-solid" @click="handleReset">閲嶇疆</el-button> </div> </div> <!-- 鏁版嵁灞曠ず --> <el-table ref="multipleTable" - :header-cell-style="{ background: '#06122c', 'font-size': '12px', color: '#4b9bb7', 'font-weight': '650', 'line-height': '45px' }" + :header-cell-style="{ 'font-weight': '650', 'line-height': '45px' }" :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"> <el-table-column type="selection" min-width="5"> </el-table-column> - <el-table-column prop="number" label="浜嬩欢缂栧彿" min-width="10"> + <el-table-column prop="code" label="浜嬩欢缂栧彿" min-width="10"> </el-table-column> - <el-table-column prop="type" label="杩濊绫诲瀷" min-width="10"> + <el-table-column prop="typeName" label="杩濊绫诲瀷" min-width="10"> </el-table-column> - <el-table-column prop="source" label="浜嬩欢鏉ユ簮" min-width="10"> + <el-table-column prop="eventSource" label="浜嬩欢鏉ユ簮" min-width="10"> </el-table-column> - <el-table-column prop="level" label="浜嬩欢绛夌骇" min-width="10"> + <el-table-column prop="gradeName" label="浜嬩欢绛夌骇" min-width="10"> </el-table-column> - <el-table-column prop="point" label="鎶ヨ鐐逛綅" min-width="10"> + <el-table-column prop="streetName" label="鎶ヨ鐐逛綅" min-width="10"> </el-table-column> - <el-table-column prop="org" label="鎵�灞炵粍缁�" min-width="10"> + <el-table-column prop="site" label="鎵�灞炵粍缁�" min-width="10"> </el-table-column> <el-table-column prop="alarmTime" label="鎶ヨ鏃堕棿" min-width="12"> </el-table-column> @@ -49,7 +58,7 @@ </el-table-column> <el-table-column prop="state" label="瀹℃牳鐘舵��" min-width="10"> </el-table-column> - <el-table-column prop="advice" label="澶勭悊鎰忚" min-width="10"> + <el-table-column prop="handlingOpinion" label="澶勭悊鎰忚" min-width="10"> </el-table-column> <el-table-column prop="operation" label="鎿嶄綔" min-width="15"> <template slot-scope="scope"> @@ -60,10 +69,32 @@ </el-table-column> </el-table> </div> + <div class="tools"> + <div class="funs"> + <!-- <div class="funsItem"> + <el-checkbox v-model="all" @change="selectAll()">鍏ㄩ��</el-checkbox> + </div> + <div class="funsItem"> + <el-checkbox v-model="unsame" @change="disSame(tableData)">鍙嶉��</el-checkbox> + </div> + <div class="funsItem"> + <el-select v-model="myIdx" placeholder="鎵归噺鎿嶄綔" @change="selectChange"> + <el-option v-for="item in options" :key="item.value" :label="item.label" + :value="item.value" :disabled="item.disabled"> + </el-option> + </el-select> + </div> --> + </div> + <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> </main> <footer> <!-- 鏌ョ湅鍏蜂綋淇℃伅 --> - <el-dialog title="浜嬩欢璇︽儏" :visible.sync="dialogView" width="45%" :before-close="handleClose"> + <el-dialog title="浜嬩欢璇︽儏" destroy-on-close :visible.sync="dialogView" width="45%" :before-close="handleClose"> <ViewInfo :info="info"></ViewInfo> </el-dialog> </footer> @@ -71,163 +102,169 @@ </template> <script> -import helper from "@/utils/mydate.js" -import ViewInfo from './viewInfo' +import helper from "@/utils/mydate.js"; +import ViewInfo from './viewInfo'; +import basecase from "@/api/operate/basecase"; +import department from "@/api/system/department"; +import { getVideoPoint } from "@/api/operate/storeManagement"; + export default { components: { ViewInfo }, + + created() { + this.getTableData(); + + // 鑾峰彇缁勭粐鍒楄〃 + department.getDepartmentList() + .then(res => { + this.headerList[0].options = res; + }) + .catch(err => this.$message.error(err)) + + getVideoPoint({ current: 1, size: 100 }) + .then(({ records }) => { + this.headerList[4].options = records; + }) + .catch(err => this.$message.error(err)) + }, + data() { return { - tableData: [ - { - number: '123456', - type: '浜烘皯璺彸浜�', - source: '瑙嗛涓婃姤', - level: '涓�鑸簨浠�', - point: '123.123,123.233', - org: '浜烘皯閮�', - alarmTime: '2022-02-12 12:00:00', - continueTime: '2灏忔椂30鍒嗛挓06绉�', - carNumber: '娴橞245CM', - state: '寰呭鏍�', - advice: '闇�鍙婃椂澶勭悊' - }, - { - number: '123457', - type: '浜烘皯璺乏浜�', - source: '瑙嗛涓婃姤', - level: '楂樺彂浜嬩欢', - point: '123.123,123.233', - org: '浜烘皯閮�', - alarmTime: '2022-02-12 12:00:00', - continueTime: '2灏忔椂30鍒嗛挓06绉�', - carNumber: '娴橞245CM', - state: '寰呭鏍�', - advice: '闇�鍙婃椂澶勭悊' - }, - { - number: '123458', - type: '浜哄璺彸浜�', - source: '瑙嗛涓婃姤', - level: '涓�鑸簨浠�', - point: '123.123,123.233', - org: '浜烘皯閮�', - alarmTime: '2022-02-12 12:00:00', - continueTime: '2灏忔椂30鍒嗛挓06绉�', - carNumber: '娴橞245CM', - state: '寰呭鏍�', - advice: '闇�鍙婃椂澶勭悊' - }, - { - number: '123459', - type: '浜烘皯璺彸浜�', - source: '瑙嗛涓婃姤', - level: '涓�鑸簨浠�', - point: '123.123,123.233', - org: '浜烘皯閮�', - alarmTime: '2022-02-12 12:00:00', - continueTime: '2灏忔椂30鍒嗛挓06绉�', - carNumber: '娴橞245CM', - state: '寰呭鏍�', - advice: '闇�鍙婃椂澶勭悊' - }, - { - number: '123460', - type: '浜烘皯璺彸浜�', - source: '瑙嗛涓婃姤', - level: '涓�鑸簨浠�', - point: '123.123,123.233', - org: '浜烘皯閮�', - alarmTime: '2022-02-12 12:00:00', - continueTime: '2灏忔椂30鍒嗛挓06绉�', - carNumber: '娴橞245CM', - state: '寰呭鏍�', - advice: '闇�鍙婃椂澶勭悊' - } - ], - context: "", + tableData: [], dialogView: false, - info: '', + info: null, + currentPage: 1, + pageSize: 10, + totalNum: null, headerList: [ { id: 1, label: '鎵�灞炵粍缁�:', value: '', - placeholder: '璇疯緭鍏ユ墍灞炵粍缁�' + placeholder: '璇疯緭鍏ユ墍灞炵粍缁�', + prop: 'organization', + type: 'cascader', + options: [] }, { id: 2, label: '鎶ヨ鏃堕棿:', value: '', - placeholder: '璇疯緭鍏ユ姤璀︽椂闂�' + placeholder: '璇疯緭鍏ユ姤璀︽椂闂�', + prop: 'alarmTime', + type: 'timepick' }, { id: 3, label: '杩濊绫诲瀷:', value: '', - placeholder: '璇疯緭鍏ヨ繚瑙勭被鍨�' + placeholder: '璇疯緭鍏ヨ繚瑙勭被鍨�', + prop: 'typeId', + type: 'input' }, { id: 4, label: '浜嬩欢缂栧彿:', value: '', - placeholder: '璇疯緭鍏ヤ簨浠剁紪鍙�' + placeholder: '璇疯緭鍏ヤ簨浠剁紪鍙�', + prop: 'code', + type: 'input' }, { id: 5, label: '鐩戞帶鐐瑰悕绉�:', value: '', - placeholder: '璇疯緭鍏ョ洃鎺х偣鍚嶇О' + placeholder: '璇疯緭鍏ョ洃鎺х偣鍚嶇О', + prop: 'videoPointId', + type: 'select', + options: [] }, { id: 6, label: '瀹℃牳鐘舵��:', value: '', - placeholder: '璇疯緭鍏ュ鏍哥姸鎬�' + placeholder: '璇疯緭鍏ュ鏍哥姸鎬�', + type: 'select', + options: [{ id: 7, name: '鏈鏍�' }, { id: 8, name: '宸茬粡瀹℃牳' }, { id: 9, name: '缁撴' }] }, { id: 7, label: '杞︾墝鍙�:', value: '', - placeholder: '璇疯緭鍏ヨ溅鐗屽彿' + placeholder: '璇疯緭鍏ヨ溅鐗屽彿', + prop: 'carNumber', + type: 'input' }, { id: 8, label: '澶勭悊鎰忚:', value: '', - placeholder: '璇疯緭鍏ヤ簨浠剁瓑绾�' + placeholder: '璇疯緭鍏ヤ簨浠剁瓑绾�', + prop: 'handlingOpinion', + type: 'input' }, { id: 9, - label: '鎶ヨ鏃堕棿:', + label: '浜嬩欢绛夌骇:', value: '', - placeholder: '璇疯緭鍏ユ墍灞炵粍缁�' + placeholder: '璇疯緭鍏ヤ簨浠剁瓑绾�', + prop: 'gradeId', + type: 'input' }, ], form: { - + gradeId: null, + alarmTime: null, + handlingOpinion: null, + streetId: null, + typeId: null, + code: null, + carNumber: null, + state: null, + videoPointId: null, + organization: null } } }, + methods: { + getTableData(params) { + basecase.getViolationList({ current: this.currentPage, pageSize: this.pageSize, ...params }) + .then(({ records, total }) => { + this.tableData = records; + this.totalNum = total; + }) + .catch(err => this.$message.error(err)) + }, + + searchTableData() { + const { alarmTime, organization } = this.form; + const [startTime, endTime] = alarmTime ?? [null, null]; + const [communityId, streetId] = organization ?? [null, null]; + const params = Object.assign({}, this.form); + delete params.alarmTime; + delete params.organization; + this.getTableData({ startTime, streetId, communityId, endTime, ...params }); + }, + changeTime({ createTime }) { return helper(createTime); }, // 璁剧疆琛ㄦ牸鏂戦┈绾� tableRowClassName({ row, rowIndex }) { - if ((rowIndex + 1) % 2 == 0) { + if ((rowIndex + 1) % 2 === 0) { return 'warning-row'; } else { return 'success-row'; } - return ''; }, // 琛ㄥ崟閲嶇疆 handleReset() { - this.headerList.forEach(item => { - item.value = '' - }) + this.currentPage = 1; + this.$refs.condition.resetFields(); + this.getTableData(); }, // 鍏抽棴寮圭獥 handleClose(done) { @@ -237,15 +274,74 @@ handleView(data) { this.info = data this.dialogView = true - console.log(data) }, - // 鑷畾涔夊叧闂脊绐� - // myCloseDialog({flag,str,index}){ - // console.log( this[str]) - // if(index === 0){ - - // } - // } + // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠� + changeCurrentPage(page) { + const { alarmTime, organization } = this.form; + const [startTime, endTime] = alarmTime ?? [null, null]; + const [communityId, streetId] = organization ?? [null, null]; + const params = Object.assign({}, this.form); + delete params.alarmTime; + delete params.organization; + this.currentPage = page; + this.getTableData({ startTime, streetId, communityId, endTime, ...params }); + }, + // 涓婁竴椤电偣鍑讳簨浠� + handlePrev(page) { + const { alarmTime, organization } = this.form; + const [startTime, endTime] = alarmTime ?? [null, null]; + const [communityId, streetId] = organization ?? [null, null]; + const params = Object.assign({}, this.form); + delete params.alarmTime; + delete params.organization; + this.currentPage = page; + this.getTableData({ startTime, streetId, communityId, endTime, ...params }); + }, + // 涓嬩竴椤电偣鍑讳簨浠� + handleNext(page) { + const { alarmTime, organization } = this.form; + const [startTime, endTime] = alarmTime ?? [null, null]; + const [communityId, streetId] = organization ?? [null, null]; + const params = Object.assign({}, this.form); + delete params.alarmTime; + delete params.organization; + this.currentPage = page; + this.getTableData({ startTime, streetId, communityId, endTime, ...params }); + }, + exportTableData() { + basecase.exportViolationData({ current: 1 }) + .then((res) => { + console.log(res) + this.$message.success('鎿嶄綔鎴愬姛'); + // let res = basecase.exportUserOperationLogAjax({ + // startLogTime: transDate(this.searchQuery.date[0], "YYYY-MM-DD"), + // endLogTime: transDate(this.searchQuery.date[1], "YYYY-MM-DD"), + // systemName: this.searchQuery.systemName, + // userName: this.searchQuery.user, + // }).then((res)=>{ + // console.log(res) + // }); + + let time = new Date() + let deathdate =time.toLocaleDateString() + const blob = new Blob([res.data], { + type: "application/vnd.ms-excel;charset=utf-8", + }); + if (window.navigator.msSaveBlob) { + window.navigator.msSaveBlob(blob, deathdate+"杩濊鏁版嵁" + ".xlsx"); + } else { + const url = window.URL.createObjectURL(blob); + const link = document.createElement("a"); + link.style.display = "none"; + link.href = url; + link.download = deathdate+"杩濊鏁版嵁" + ".xlsx"; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + } + }) + .catch(err => this.$message.error(err)) + } } } </script> @@ -256,8 +352,7 @@ color: #4b9bb7; header { - background-color: #09152f; - border: 1pox solid #fff; + background-color: white; .headerContent { padding: 20px 40px; @@ -282,10 +377,9 @@ } main { - background-color: #09152f; + background-color: #ffffff; margin-top: 20px; padding-bottom: 50px; - border: 1pox solid #fff; .mainTitle { line-height: 60px; @@ -298,14 +392,16 @@ padding: 0 20px; .el-button { - background-color: #17324c; + background-color: #2f91ec; border: 1px solid #17324c; - color: #4b9bb7; + color: #ffffff; } } - .el-table{ - color: #4b9bb7; + + .el-table { + // color: #4b9bb7; } + .tools { display: flex; justify-content: space-between; @@ -332,12 +428,13 @@ padding: 0 10px; } - .el-select { - width: 120px; - } - &::v-deep .el-input__inner { border: none; - background-color: #09152f; - }}}}}} + // background-color: #09152f; + } + } + } + } + } +} </style> \ No newline at end of file -- Gitblit v1.8.0