From 22961d36b66fd07ac50e2b9479e0bad968723cdd Mon Sep 17 00:00:00 2001 From: odc.xiaohui <xiaohui@Q1> Date: 星期四, 15 十二月 2022 10:15:57 +0800 Subject: [PATCH] 2022-12-14 肖辉 预警研判-- 列表数据展示 --- src/views/intelligentPatrol/illegalSearch/index.vue | 112 ++++++++++++++++++++++++++++++++++++++++++++------------ 1 files changed, 88 insertions(+), 24 deletions(-) diff --git a/src/views/intelligentPatrol/illegalSearch/index.vue b/src/views/intelligentPatrol/illegalSearch/index.vue index 258b3a3..781cf30 100644 --- a/src/views/intelligentPatrol/illegalSearch/index.vue +++ b/src/views/intelligentPatrol/illegalSearch/index.vue @@ -6,14 +6,15 @@ <el-form ref="condition" :model="form" label-width="100px"> <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-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-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-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> @@ -33,8 +34,8 @@ </div> <!-- 鏁版嵁灞曠ず --> <el-table ref="multipleTable" - :header-cell-style="{ background: '#06122c', 'font-size': '12px', color: '#4b9bb7', 'font-weight': '650', 'line-height': '45px' }" - :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"> + :header-cell-style="{ background: '#06122c', 'font-size': '12px', color: '#4b9bb7', '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="code" label="浜嬩欢缂栧彿" min-width="10"> @@ -68,6 +69,28 @@ </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> <!-- 鏌ョ湅鍏蜂綋淇℃伅 --> @@ -95,16 +118,16 @@ // 鑾峰彇缁勭粐鍒楄〃 department.getDepartmentList() - .then(res => { - this.headerList[0].options = res; - }) - .catch(err => this.$message.error(err)) + .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)) + .then(({ records }) => { + this.headerList[4].options = records; + }) + .catch(err => this.$message.error(err)) }, data() { @@ -114,6 +137,7 @@ info: null, currentPage: 1, pageSize: 10, + totalNum: null, headerList: [ { id: 1, @@ -208,10 +232,11 @@ methods: { getTableData(params) { basecase.getViolationList({ current: this.currentPage, pageSize: this.pageSize, ...params }) - .then(({ records }) => { - this.tableData = records; - }) - .catch(err => this.$message.error(err)) + .then(({ records, total }) => { + this.tableData = records; + this.totalNum = total; + }) + .catch(err => this.$message.error(err)) }, searchTableData() { @@ -250,7 +275,39 @@ this.info = data this.dialogView = true }, - + // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠� + 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) => { @@ -340,9 +397,11 @@ color: #4b9bb7; } } - .el-table{ + + .el-table { color: #4b9bb7; } + .tools { display: flex; justify-content: space-between; @@ -372,5 +431,10 @@ &::v-deep .el-input__inner { border: none; background-color: #09152f; - }}}}}} -</style> + } + } + } + } + } +} +</style> \ No newline at end of file -- Gitblit v1.8.0