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 | 433 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 430 insertions(+), 3 deletions(-) diff --git a/src/views/intelligentPatrol/illegalSearch/index.vue b/src/views/intelligentPatrol/illegalSearch/index.vue index 83fe1d5..6a94151 100644 --- a/src/views/intelligentPatrol/illegalSearch/index.vue +++ b/src/views/intelligentPatrol/illegalSearch/index.vue @@ -1,13 +1,440 @@ <template> - <div>杩濊妫�绱�</div> + <div class="illegal-search"> + <header> + <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" :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> + </header> + <main> + <div class="mainContent"> + <!-- 鎸夐挳鍖哄煙 --> + <div class="main-btns"> + <div class="main-btns-left"> +<!-- <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" @click="searchTableData">鏌ヨ</el-button> + <el-button icon="el-icon-delete-solid" @click="handleReset">閲嶇疆</el-button> + </div> + </div> + <!-- 鏁版嵁灞曠ず --> + <el-table ref="multipleTable" + :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="code" label="浜嬩欢缂栧彿" min-width="10"> + </el-table-column> + <el-table-column prop="typeName" label="杩濊绫诲瀷" min-width="10"> + </el-table-column> + <el-table-column prop="eventSource" label="浜嬩欢鏉ユ簮" min-width="10"> + </el-table-column> + <el-table-column prop="gradeName" label="浜嬩欢绛夌骇" min-width="10"> + </el-table-column> + <el-table-column prop="streetName" label="鎶ヨ鐐逛綅" min-width="10"> + </el-table-column> + <el-table-column prop="site" label="鎵�灞炵粍缁�" min-width="10"> + </el-table-column> + <el-table-column prop="alarmTime" label="鎶ヨ鏃堕棿" min-width="12"> + </el-table-column> + <el-table-column prop="continueTime" label="鎸佺画鏃堕棿" min-width="12"> + </el-table-column> + <el-table-column prop="carNumber" label="杞︾墝鍙风爜" min-width="10"> + </el-table-column> + <el-table-column prop="state" label="瀹℃牳鐘舵��" min-width="10"> + </el-table-column> + <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"> + <div class="operation"> + <span @click="handleView(scope.row)">鏌ョ湅</span> + </div> + </template> + </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="浜嬩欢璇︽儏" destroy-on-close :visible.sync="dialogView" width="45%" :before-close="handleClose"> + <ViewInfo :info="info"></ViewInfo> + </el-dialog> + </footer> + </div> </template> <script> -export default { +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: [], + dialogView: false, + info: null, + currentPage: 1, + pageSize: 10, + totalNum: null, + headerList: [ + { + id: 1, + label: '鎵�灞炵粍缁�:', + value: '', + placeholder: '璇疯緭鍏ユ墍灞炵粍缁�', + prop: 'organization', + type: 'cascader', + options: [] + }, + { + id: 2, + label: '鎶ヨ鏃堕棿:', + value: '', + placeholder: '璇疯緭鍏ユ姤璀︽椂闂�', + prop: 'alarmTime', + type: 'timepick' + }, + { + id: 3, + label: '杩濊绫诲瀷:', + value: '', + placeholder: '璇疯緭鍏ヨ繚瑙勭被鍨�', + prop: 'typeId', + type: 'input' + }, + { + id: 4, + label: '浜嬩欢缂栧彿:', + value: '', + placeholder: '璇疯緭鍏ヤ簨浠剁紪鍙�', + prop: 'code', + type: 'input' + }, + { + id: 5, + label: '鐩戞帶鐐瑰悕绉�:', + value: '', + placeholder: '璇疯緭鍏ョ洃鎺х偣鍚嶇О', + prop: 'videoPointId', + type: 'select', + options: [] + }, + { + id: 6, + label: '瀹℃牳鐘舵��:', + value: '', + placeholder: '璇疯緭鍏ュ鏍哥姸鎬�', + type: 'select', + options: [{ id: 7, name: '鏈鏍�' }, { id: 8, name: '宸茬粡瀹℃牳' }, { id: 9, name: '缁撴' }] + }, + { + id: 7, + label: '杞︾墝鍙�:', + value: '', + placeholder: '璇疯緭鍏ヨ溅鐗屽彿', + prop: 'carNumber', + type: 'input' + }, + { + id: 8, + label: '澶勭悊鎰忚:', + value: '', + placeholder: '璇疯緭鍏ヤ簨浠剁瓑绾�', + prop: 'handlingOpinion', + type: 'input' + }, + { + id: 9, + label: '浜嬩欢绛夌骇:', + value: '', + 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) { + return 'warning-row'; + } else { + return 'success-row'; + } + }, + // 琛ㄥ崟閲嶇疆 + handleReset() { + this.currentPage = 1; + this.$refs.condition.resetFields(); + this.getTableData(); + }, + // 鍏抽棴寮圭獥 + handleClose(done) { + done(); + }, + // 鎵撳紑寮圭獥 + handleView(data) { + 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) => { + 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> +<style lang="scss" scoped> +.illegal-search { + text-align: left; + margin: 10px 20px; + color: #4b9bb7; -<style> + header { + background-color: white; + .headerContent { + padding: 20px 40px; + display: flex; + justify-content: space-between; + align-items: center; + + ::v-deep .el-form { + display: flex; + flex-wrap: wrap; + justify-content: space-between; + + .el-form-item { + width: 30%; + } + + .el-form-item__label { + color: #4b9bb7; + } + } + } + } + + main { + background-color: #ffffff; + margin-top: 20px; + padding-bottom: 50px; + + .mainTitle { + line-height: 60px; + } + + .main-btns { + display: flex; + justify-content: space-between; + line-height: 60px; + padding: 0 20px; + + .el-button { + background-color: #2f91ec; + border: 1px solid #17324c; + color: #ffffff; + } + } + + .el-table { + // color: #4b9bb7; + } + + .tools { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + + .funs-sp { + border: 1px solid #17324c; + } + + .funs { + display: flex; + + .funsItem { + line-height: 28px; + display: flex; + align-items: center; + border-radius: 4px; + font-size: 12px; + margin-left: 10px; + + .el-checkbox { + width: 80px; + padding: 0 10px; + } + + &::v-deep .el-input__inner { + border: none; + // background-color: #09152f; + } + } + } + } + } +} </style> \ No newline at end of file -- Gitblit v1.8.0