From 667e1a5b49ffc2f7af9237b4542b1c2e4d00731f Mon Sep 17 00:00:00 2001 From: luobisheng <727299681@qq.com> Date: 星期一, 28 十一月 2022 16:37:12 +0800 Subject: [PATCH] 趋势分析 --- src/views/intelligentPatrol/illegalSearch/index.vue | 231 +++++++++++++++++++++++++++++---------------------------- 1 files changed, 118 insertions(+), 113 deletions(-) diff --git a/src/views/intelligentPatrol/illegalSearch/index.vue b/src/views/intelligentPatrol/illegalSearch/index.vue index deaf20d..463c5e2 100644 --- a/src/views/intelligentPatrol/illegalSearch/index.vue +++ b/src/views/intelligentPatrol/illegalSearch/index.vue @@ -4,8 +4,16 @@ <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> @@ -16,10 +24,10 @@ <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-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> @@ -29,17 +37,17 @@ :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 +57,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"> @@ -63,7 +71,7 @@ </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 +79,166 @@ </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, 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 }) => { + this.tableData = records; + }) + .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.$refs.condition.resetFields(); + this.getTableData(); }, // 鍏抽棴寮圭獥 handleClose(done) { @@ -237,15 +248,15 @@ handleView(data) { this.info = data this.dialogView = true - console.log(data) }, - // 鑷畾涔夊叧闂脊绐� - // myCloseDialog({flag,str,index}){ - // console.log( this[str]) - // if(index === 0){ - - // } - // } + + exportTableData() { + basecase.exportViolationData({ current: 1 }) + .then(() => { + this.$message.success('鎿嶄綔鎴愬姛'); + }) + .catch(err => this.$message.error(err)) + } } } </script> @@ -257,7 +268,6 @@ header { background-color: #09152f; - border: 1pox solid #fff; .headerContent { padding: 20px 40px; @@ -285,7 +295,6 @@ background-color: #09152f; margin-top: 20px; padding-bottom: 50px; - border: 1pox solid #fff; .mainTitle { line-height: 60px; @@ -330,10 +339,6 @@ .el-checkbox { width: 80px; padding: 0 10px; - } - - .el-select { - width: 120px; } &::v-deep .el-input__inner { -- Gitblit v1.8.0