From f4c324b44aadc4d8a44d4c67c588d2f76261ccaa Mon Sep 17 00:00:00 2001 From: wl <173@qq.com> Date: 星期三, 30 十一月 2022 16:07:39 +0800 Subject: [PATCH] fix:消息分页 视频查询 图片查询 --- src/views/operate/viewEvent/index.vue | 328 ++++++++++++------------------------------------------ 1 files changed, 76 insertions(+), 252 deletions(-) diff --git a/src/views/operate/viewEvent/index.vue b/src/views/operate/viewEvent/index.vue index fea39e0..b77c2c2 100644 --- a/src/views/operate/viewEvent/index.vue +++ b/src/views/operate/viewEvent/index.vue @@ -4,46 +4,46 @@ <div class="headerTitle">杩愯惀绠$悊 >> 妗堝嵎鏌ヨ</div> <div class="headerContent"> <div class="contentItem"> - <span>鎸夌紪鍙�: </span> + <div style="width: 80px;">鎸夌紪鍙�: </div> <div> - <el-input placeholder=" 璇疯緭鍏ョ紪鍙�" v-model="info.code"></el-input> + <el-input placeholder=" 璇疯緭鍏ョ紪鍙�" v-model="searchData.number"></el-input> </div> </div> <div class="contentItem"> - <span>鎸夌被鍨�: </span> + <div style="width: 80px;">鎸夌被鍨�: </div> <div class="search"> - <el-input placeholder=" 璇疯緭鍏ョ紪鍙�" v-model="info.type"></el-input> + <el-input placeholder=" 璇疯緭鍏ョ被鍨�" v-model="searchData.categories"></el-input> </div> </div> <div class="contentItem"> - <span>鎸夌ぞ鍖�: </span> + <div style="width: 80px;">鎸夌ぞ鍖�: </div> <div class="search"> - <el-input placeholder=" 璇疯緭鍏ョ紪鍙�" v-model="info.community"></el-input> + <el-input placeholder=" 璇疯緭鍏ョぞ鍖�" v-model="searchData.communityId"></el-input> </div> </div> <div class="contentItem"> - <span>鎸変簨鍙戝湴鐐�: </span> + <div style="width: 150px;">鎸変簨鍙戝湴鐐�: </div> <div class="search"> - <el-input placeholder=" 璇疯緭鍏ョ紪鍙�" v-model="info.site"></el-input> + <el-input placeholder=" 璇疯緭鍏ヤ簨鍙戝湴鐐�" v-model="searchData.site"></el-input> </div> </div> <div class="date-search contentItem"> <div class="btn"> - <el-button icon="el-icon-plus" type="primary">鎼滅储</el-button> + <el-button icon="el-icon-plus" categories="primary" @click="getList">鎼滅储</el-button> </div> </div> </div> <div class="headerContent"> - <span>鏃堕棿: </span> - <div> - <el-input placeholder=" 璇疯緭鍏ュ紑濮嬫椂闂�" v-model="info.startTime"></el-input> - </div> - <div class="line"> - -- - </div> - <div> - <el-input placeholder=" 璇疯緭鍏ョ粨鏉熸椂闂�" v-model="info.endTime"></el-input> - </div> + <div style="width: 60px;">鏃堕棿: </div> + <el-date-picker + v-model="datepick" + type="daterange" + @change="datepickChange" + value-format="yyyy-MM-dd HH:mm:ss" + range-separator="鑷�" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡"> + </el-date-picker> </div> </header> <main> @@ -51,89 +51,53 @@ <!-- 鏁版嵁灞曠ず --> <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" - @selection-change="tableChange"> - <el-table-column type="selection" min-width="5"> - </el-table-column> + :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"> <el-table-column prop="code" label="浜嬩欢缂栧彿" min-width="18"> <template slot-scope="scope"> - <el-link @click="JumpView(scope.row)">{{ scope.row.code }}</el-link> + <el-link>{{ scope.row.code }}</el-link> + </template> + </el-table-column> + <el-table-column prop="category" label="闂绫诲埆" min-width="8"> + <template v-if="scope.row.category" slot-scope="scope"> + <span>{{ getCategoryLabel(scope.row.category) }}</span> </template> </el-table-column> <el-table-column prop="eventSource" label="闂鏉ユ簮" min-width="8"> - <template slot-scope="scope"> + <template v-if="scope.row.eventSource" slot-scope="scope"> <span>{{ scope.row.eventSource === 2 ? '浜哄伐涓婃姤' : '瑙嗛涓婁紶' }}</span> </template> </el-table-column> - <el-table-column :prop="myproblem === 1 ? 'category' : 'category'" - :label="myproblem === 1 ? '澶х被鍚嶇О' : '杩濆缓绫诲埆'" :min-width="myproblem === 1 ? '10' : '20'"> - </el-table-column> - <el-table-column :prop="myproblem === 1 ? 'type' : 'site'" - :label="myproblem === 1 ? '灏忕被鍚嶇О' : '杩濆缓鍦扮偣'" min-width="10"> - </el-table-column> - <el-table-column :prop="myproblem === 1 ? 'actionCause' : 'communityId'" - :label="myproblem === 1 ? '妗堢敱' : '鎵�灞炵ぞ鍖�'" min-width="10"> - </el-table-column> - <el-table-column :prop="myproblem === 1 ? 'site' : ''" - :label="myproblem === 1 ? '鎶ヨ鐐逛綅' : '杩濇硶寤虹瓚闀裤�佸銆侀珮'" :min-width="myproblem === 1 ? '10' : '20'"> - <template slot-scope="scope"> - <div v-if="myproblem === 2"><span>{{ scope.row.buildingLength + '绫�' + '銆�' + - scope.row.buildingWidth + '绫�' + '銆�' + scope.row.buildingHigh + '绫�' - }}</span></div> - <div v-else>{{ scope.row.site }}</div> - </template> - </el-table-column> - <el-table-column :prop="myproblem === 1 ? 'street' : 'buildingArea'" - :label="myproblem === 1 ? '鎵�灞炲尯鍩�' : '杩濇硶寤虹瓚闈㈢Н'" min-width="10"> + <el-table-column prop="communityText" label="绀惧尯" min-width="8"> </el-table-column> <el-table-column prop="alarmTime" label="鎶ヨ鏃堕棿" min-width="15" v-if="myproblem === 1"> <template slot-scope="scope"> <span>{{ filterTime(scope.row.alarmTime) }}</span> </template> </el-table-column> - <el-table-column :prop="myproblem === 1 ? 'continueTime' : 'materials'" - :label="myproblem === 1 ? '鎸佺画鏃堕棿' : '杩濇硶寤虹瓚鏉愭枡'" min-width="15"> - </el-table-column> </el-table> <!-- 瀹℃牳椤甸潰 --> - <el-dialog :visible.sync="dialogExamine" width="80%" title="鍩虹淇℃伅(浜哄伐)" v-if="dialogExamine" + <el-dialog :visible.sync="dialogExamine" width="80%" title="鍩虹淇℃伅(浜哄伐)" :before-close="handleClose"> <MyExamine :info="info" v-if="myproblem === 1" @closeDialog="closeDialog"></MyExamine> <MyIllExamine :info="info" v-else @closeDialog="closeDialog"></MyIllExamine> </el-dialog> <!-- 缁撴椤甸潰 --> - <el-dialog :visible.sync="dialogClosure" width="80%" title="鍩虹淇℃伅(浜哄伐)" v-if="dialogClosure" + <el-dialog :visible.sync="dialogClosure" width="80%" title="鍩虹淇℃伅(浜哄伐)" :before-close="handleClose"> <MyClosure :info="info" v-if="myproblem === 1" @closeDialog="closeDialog"></MyClosure> <MyIllClosure :info="info" v-else @closeDialog="closeDialog"></MyIllClosure> </el-dialog> <!-- 璇︽儏椤甸潰 --> - <el-dialog :visible.sync="dialogView" width="80%" title="鍩虹淇℃伅(浜哄伐)" v-if="dialogView" + <el-dialog :visible.sync="dialogView" width="80%" title="鍩虹淇℃伅(浜哄伐)" :before-close="handleNoClose"> - <MyDetail :info=info v-if="myproblem === 1" :mycode='code'></MyDetail> - <MyIllDetail :info=info v-else :mycode="code"></MyIllDetail> + <MyDetail :info=info v-if="myproblem === 1" :mycode='number'></MyDetail> + <MyIllDetail :info=info v-else :mycode="number"></MyIllDetail> </el-dialog> <!-- tools --> <div class="tools"> - <div class="funs"> - <div class="funsItem funs-sp"> - <el-checkbox v-model="all" @change="selectAll()">鍏ㄩ��</el-checkbox> - </div> - <div class="funsItem funs-sp"> - <el-checkbox v-model="unsame" @change="disSame(tableData)">鍙嶉��</el-checkbox> - </div> - <div class="funsItem"> - <el-select v-model="myIdx" placeholder="鎵归噺鎿嶄綔" @change="selectChange" disabled> - <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"> + :total="totalNum" :page-size="pageSize" @current-change="changeCurrentPage"> </el-pagination> </div> </div> @@ -149,12 +113,16 @@ import MyDetail from '@/components/detail' import MyIllDetail from '@/components/illdetail' import helper from '@/utils/mydate' +import casequery from "@/api/operate/basecase"; +import { CATEGOTY } from "@/utils/helper"; + export default { components: { MyExamine, MyClosure, MyDetail, MyIllDetail, MyIllExamine, MyIllClosure }, data() { return { + datepick: null, tableData: [], dialogExamine: false, dialogClosure: false, @@ -163,30 +131,6 @@ totalNum: null, pageSize: 10, currentPage: 1, - all: false, - unsame: false, - myIdx: 0, - preMyIdx: 0, - options: [ - { - value: 0, - label: '鎵归噺鎿嶄綔', - disabled: true, - }, - { - value: 1, - label: '鎵归噺鍚敤', - }, - { - value: 2, - label: '鎵归噺绂佺敤', - }, - { - value: 3, - label: '鎵归噺鍒犻櫎', - } - ], - tempList: [], typeList: [ { name: '杩濊', @@ -199,125 +143,53 @@ checked: false, }, ], - caseId: '', myproblem: 1, - instatus: 7, - code: '' + number: '', + searchData: { + categories: null, + number: null, + communityId: null, + endTime: null, + site: null, + startTime: null + } } }, created() { - this.getUserList(); + this.getList(); }, methods: { - // 鎵归噺鍒犻櫎 - mulDelete(idArr) { - console.log(idArr); - this.$axios({ - method: 'delete', - url: 'sccg/violations/batch_delete?ids=' + idArr, - }).then(res => { - this.getUserList(); - this.$message({ - message: res.message, - type: res.code === 200 ? 'success' : 'warning' - }) - }) - }, - // 鎵ц涓嬫媺妗嗘搷浣� - selectChange(list) { - console.log(this.tempList); - if (this.tempList.length !== 0) { - if (list === 3) { - this.preMyIdx = list; - this.mulDelete(this.tempList); - } - } else { - this.myIdx = this.preMyIdx; - this.$message({ - type: 'warning', - message: '鎮ㄨ繕娌¢�変腑浠讳綍鏁版嵁', - }) - } - }, - // 鐩戝惉琛ㄦ牸 - tableChange(list) { - this.tempList = []; - list.forEach(item => { - this.tempList.push(item.code); - }) - if (list.length === this.tableData.length) { - this.all = true; - } else { - this.all = false - } - }, - // 鍏ㄩ�� - selectAll() { - this.$refs.multipleTable.toggleAllSelection(); - }, - // 鍙嶉�� - disSame(list) { - list.forEach(row => { - this.$refs.multipleTable.toggleRowSelection(row) - }) - }, - // 鍒犻櫎鍗曟潯鏁版嵁 - handleDelete({ number }) { - console.log(number); - this.$confirm('纭鍒犻櫎锛�') - .then(_ => { - console.log(1); - this.$axios({ - method: 'delete', - url: `sccg/violations/delete?id=${number}`, - }) - .then(res => { - console.log(res); - this.$message({ - type: res.code === 200 ? 'success' : 'warning', - message: res.message - }) - this.getUserList(); - }) + // 鑾峰彇鍒楄〃 + getList() { + casequery.baseCaseQuery({ current: this.currentPage, pageSize: this.pageSize, ...this.searchData }) + .then((res) => { + this.tableData = res.records; + this.totalNum=res.total; + }) + .catch(err => { + this.tableData = []; }) - .catch(_ => { console.log(2) }); - }, - // 鑾峰彇鐢ㄦ埛鍒楄〃 - getUserList() { - const { currentPage, pageSize, instatus, myproblem } = this; - this.$axios({ - method: 'get', - url: `sccg/base_case/query?state=${instatus}¤t=${currentPage}&size=${pageSize}&resource=2&type=${myproblem}` - }).then(res => { - this.totalNum = res.data.total; - this.tableData = res.data.records; - }) }, // 璁剧疆琛ㄦ牸鏂戦┈绾� tableRowClassName({ row, rowIndex }) { - if ((rowIndex + 1) % 2 == 0) { + if ((rowIndex + 1) % 2 === 0) { return 'warning-row'; } else { return 'success-row'; } - return ''; }, // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠� changeCurrentPage(page) { this.currentPage = page; - this.getUserList(); + this.getList(); }, - // 涓婁竴椤电偣鍑讳簨浠� - handlePrev(page) { - this.currentPage = page; - this.getUserList(); + + datepickChange() { + this.searchData.startTime = this.datepick[0]; + this.searchData.endTime = this.datepick[1].replace('00:00:00', '23:59:59'); }, - // 涓嬩竴椤电偣鍑讳簨浠� - handleNext(page) { - this.currentPage = page; - this.getUserList(); - }, + handleClose(done) { this.$confirm('纭鍏抽棴锛�') .then(_ => { @@ -329,71 +201,21 @@ handleNoClose(done) { done(); }, - async JumpView(data) { - this.code = data.code - await this.getEventInfo(data.code); - }, - // 鑾峰彇妗堜欢淇℃伅 - getEventInfo(code) { - this.$axios({ - method: 'get', - url: `sccg/base_case/baseCaseDetail/${code}` - }) - .then(res => { - console.log(res); - this.info = res.data; - this.dialogView = true; - }) - }, - // 鑾峰彇妗堜欢淇℃伅 - getEventInfo3(code) { - this.$axios({ - method: 'get', - url: `sccg/base_case/baseCaseDetail/${code}` - }) - .then(res => { - console.log(res); - this.info = res.data; - this.dialogExamine = true; - }) - }, - // 鑾峰彇妗堜欢淇℃伅 - getEventInfo2(code) { - this.$axios({ - method: 'get', - url: `sccg/base_case/baseCaseDetail/${code}` - }) - .then(res => { - console.log(res); - this.info = res.data; - this.dialogClosure = true; - }) - }, - // 鍘诲鏍� - handleExamine({ code }) { - this.getEventInfo3(code); - }, - // 鍘荤粨妗� - handleClosure({ code }) { - this.getEventInfo2(code); - }, + // 鍏抽棴dialog closeDialog({ flag }) { this.dialogExamine = flag; this.dialogClosure = flag; - this.getUserList(); + this.getList(); }, - // 闂绫诲瀷 - changeMyProblem(val) { - this.getUserList(); - }, - // 瀹℃牳鐘舵�� - changeInStatus(val) { - this.getUserList(); - }, + filterTime(time) { return helper(time); - } + }, + + getCategoryLabel(data) { + return CATEGOTY.find(item => item.value === data).label; + } } } </script> @@ -407,7 +229,6 @@ display: flex; line-height: 60px; flex-direction: column; - // justify-content: space-between; padding: 0 20px; color: #4b9bb7; @@ -436,7 +257,6 @@ background-color: #09152f; margin-top: 20px; padding-bottom: 50px; - border: 1pox solid #fff; .btn span:hover { cursor: pointer; @@ -610,5 +430,9 @@ &::v-deep .el-dialog__body { padding: 0; } + + &::v-deep .el-range-input { + background-color: #06122c; + } } </style> \ No newline at end of file -- Gitblit v1.8.0