From a3b4eb017a0f948348ef7732267c7ed0d4bca8c0 Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期二, 12 三月 2024 16:15:27 +0800 Subject: [PATCH] bug修改 --- src/views/intelligentPatrol/statistics/unlawful/type/index.vue | 880 +++++++++++++++++++++++++++++++++++++--------------------- 1 files changed, 556 insertions(+), 324 deletions(-) diff --git a/src/views/intelligentPatrol/statistics/unlawful/type/index.vue b/src/views/intelligentPatrol/statistics/unlawful/type/index.vue index 61c3693..da0a8ac 100644 --- a/src/views/intelligentPatrol/statistics/unlawful/type/index.vue +++ b/src/views/intelligentPatrol/statistics/unlawful/type/index.vue @@ -1,354 +1,586 @@ -<template> - <div class="list"> - <header> - <div class="header-content"> - <div class="search"> - <span style="padding-right: 20px">鏃堕棿鑼冨洿:</span> - <el-date-picker - v-model="value2" - type="daterange" - align="right" - unlink-panels - range-separator="鑷�" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - :picker-options="pickerOptions" - > - </el-date-picker> - </div> +<template xmlns="http://www.w3.org/1999/html"> + <div class="list"> + <header> + <div class="header-content"> + <div class="search"> + <span style="padding-right: 20px">鏃堕棿鑼冨洿:</span> + <el-date-picker + v-model="value2" + type="daterange" + align="right" + unlink-panels + range-separator="鑷�" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + :picker-options="pickerOptions" + value-format="yyyy-MM-dd HH:mm:ss" + > + </el-date-picker> + </div> - <div class="find"> - <el-button - type="primary" - icon="el-icon-search" - @click="setTableDataHandle" - >鏌ヨ</el-button - > - <el-button icon="el-icon-delete-solid" @click="resetTableData" - >閲嶇疆</el-button - > - </div> + <div class="find"> + <el-button + type="primary" + icon="el-icon-search" + @click="setTableDataHandle" + >鏌ヨ</el-button + > + <el-button + icon="el-icon-delete-solid" + @click="resetTableData" + >閲嶇疆</el-button + > + </div> - <div class="main-nav-right"> - <el-button type="primary" icon="el-icon-upload2" @click="handleExport" - >瀵煎嚭</el-button - > - </div> - </div> - </header> - <main> - <div class="main-content"> - <!-- 鏁版嵁灞曠ず --> - <el-table - ref="multipleTable" - :header-cell-style="{ - background: '#06122c', - 'font-size': '12px', - color: '#4b9bb7', - 'font-weight': '650', - 'line-height': '45px', - }" - :row-class-name="tableRowClassName" - :data="list" - style="width: 100%" - > - <el-table-column type="selection" min-width="5"> </el-table-column> - <el-table-column prop="name" label="绫诲瀷鍚嶇О" min-width="10"> - </el-table-column> - <el-table-column prop="count" label="浜嬩欢鎬绘暟" min-width="5"> - </el-table-column> - <el-table-column prop="ratio" label="鍗犳瘮" min-width="5"> - </el-table-column> - <el-table-column prop="register" label="绔嬫" min-width="5"> - </el-table-column> - <el-table-column prop="notRegister" label="鏆備笉绔嬫" min-width="5"> - </el-table-column> - <el-table-column prop="closing" label="缁撴" min-width="5"> - </el-table-column> - <el-table-column prop="relearn" label="鍐嶅涔�" min-width="5"> - </el-table-column> - <el-table-column prop="checked" label="宸插鏍�" min-width="5"> - </el-table-column> - <el-table-column prop="checkedRatio" label="瀹℃牳鐜�" min-width="5"> - </el-table-column> - <el-table-column prop="registerRatio" label="绔嬫鐜�" min-width="5"> - </el-table-column> - </el-table> - </div> + <div class="main-nav-right"> + <el-button + type="primary" + icon="el-icon-upload2" + @click="handleExport" + >瀵煎嚭</el-button + > + </div> + </div> + </header> + <main> + <div class="main-content"> + <!-- 鏁版嵁灞曠ず --> + <el-table + border + stripe + ref="multipleTable" + :header-cell-style="{ + background: '#F5F5F5', + 'font-weight': '650', + 'line-height': '45px' + }" + :row-class-name="tableRowClassName" + :data="list" + style="width: 100%" + > + <el-table-column type="selection" min-width="5"> + </el-table-column> + <el-table-column + prop="name" + label="绫诲瀷鍚嶇О" + min-width="10" + > + </el-table-column> + <el-table-column + prop="count" + label="浜嬩欢鎬绘暟" + min-width="5" + > + <template slot-scope="scope"> + <el-button + type="text" + @click="seachTotalEvents(scope.row.id, 1)" + >{{ scope.row.count }}</el-button + > + </template> + </el-table-column> + <el-table-column prop="ratio" label="鍗犳瘮" min-width="5"> + </el-table-column> + <el-table-column prop="register" label="绔嬫" min-width="5"> + </el-table-column> + <el-table-column + prop="notRegister" + label="鏆備笉绔嬫" + min-width="5" + > + </el-table-column> + <el-table-column prop="closing" label="缁撴" min-width="5"> + </el-table-column> + <el-table-column + prop="relearn" + label="鍐嶅涔�" + min-width="5" + > + </el-table-column> + <el-table-column + prop="checked" + label="宸插鏍�" + min-width="5" + > + </el-table-column> + <el-table-column + prop="checkedRatio" + label="瀹℃牳鐜�" + min-width="5" + > + </el-table-column> + <el-table-column + prop="registerRatio" + label="绔嬫鐜�" + min-width="5" + > + </el-table-column> + </el-table> + </div> - <!-- tools --> - <div class="tools"> - <div class="funs"></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> - </div> + <!-- tools --> + <div class="tools"> + <div class="funs"></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> + + <el-dialog + title="浜嬩欢鎬绘暟" + :visible.sync="dialogVisibleEvent" + width="80%" + :before-close="handClose" + > + <el-table + border + stripe + ref="multipleTable" + :header-cell-style="{ + background: '#F5F5F5', + 'font-weight': '650', + 'line-height': '45px' + }" + :data="gridData" + style="width: 100%" + :row-class-name="tableRowClassName" + > + <el-table-column + prop="code" + label="浜嬩欢缂栧彿" + min-width="18" + > + </el-table-column> + <el-table-column + prop="eventSource" + label="闂鏉ユ簮" + min-width="8" + > + <template slot-scope="scope"> + <span>{{ + scope.row.eventSource === 2 + ? '缃戞牸宸℃煡' + : '瑙嗛宸℃煡' + }}</span> + </template> + </el-table-column> + <el-table-column + :prop="mystatus === 1 ? 'category' : 'category'" + :label="mystatus === 1 ? '澶х被鍚嶇О' : '杩濆缓绫诲埆'" + :min-width="mystatus === 1 ? '10' : '15'" + > + </el-table-column> + <el-table-column + :prop="mystatus === 1 ? 'type' : 'site'" + :label="mystatus === 1 ? '灏忕被鍚嶇О' : '杩濆缓鍦扮偣'" + min-width="10" + > + </el-table-column> + <el-table-column + :prop="mystatus === 1 ? 'site' : ''" + :label=" + mystatus === 1 ? '鎶ヨ鐐逛綅' : '杩濇硶寤虹瓚闀裤�佸銆侀珮' + " + :min-width="mystatus === 1 ? '10' : '20'" + show-overflow-tooltip + > + <template slot-scope="scope"> + <div v-if="mystatus === 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="mystatus === 1 ? 'street' : 'buildingArea'" + :label="mystatus === 1 ? '鎵�灞炲尯鍩�' : '杩濇硶寤虹瓚闈㈢Н'" + min-width="12" + > + </el-table-column> + <el-table-column + prop="alarmTime" + label="鎶ヨ鏃堕棿" + min-width="15" + v-if="mystatus === 1" + > + <template slot-scope="scope"> + <span>{{ filterTime(scope.row.alarmTime) }}</span> + </template> + </el-table-column> + <el-table-column + :prop="mystatus === 1 ? 'continueTime' : 'materials'" + :label="mystatus === 1 ? '鎸佺画鏃堕棿' : '杩濇硶寤虹瓚鏉愭枡'" + min-width="12" + > + </el-table-column> + </el-table> + + <div> + <el-pagination + background + :current-page="currentPages" + layout="prev, pager, next" + :total="totalNums" + :page-size="pageSizes" + @current-change="changeCurrentPages" + > + </el-pagination> + </div> + </el-dialog> + </main> + </div> </template> <script> import { createNamespacedHelpers } from "vuex"; +import helper from "@/utils/mydate"; +import basecase from "@/api/operate/basecase"; const { mapActions } = createNamespacedHelpers("statistics"); export default { - data() { - return { - pickerOptions: { - shortcuts: [ - { - text: "鏈�杩戜竴鍛�", - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); - picker.$emit("pick", [start, end]); + data() { + return { + seachID: '', + dialogVisibleEvent: false, + mystatus: 1, + totalNums: 1, + pageSizes: 10, + currentPages: 1, + gridData: [], + pickerOptions: { + shortcuts: [ + { + text: "鏈�杩戜竴鍛�", + onClick(picker) { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); + picker.$emit("pick", [start, end]); + }, + }, + { + text: "鏈�杩戜竴涓湀", + onClick(picker) { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); + picker.$emit("pick", [start, end]); + }, + }, + { + text: "鏈�杩戜笁涓湀", + onClick(picker) { + const end = new Date(); + const start = new Date(); + start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); + picker.$emit("pick", [start, end]); + }, + }, + ], }, - }, - { - text: "鏈�杩戜竴涓湀", - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); - picker.$emit("pick", [start, end]); - }, - }, - { - text: "鏈�杩戜笁涓湀", - onClick(picker) { - const end = new Date(); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); - picker.$emit("pick", [start, end]); - }, - }, - ], - }, - value1: "", - value2: "", - list: [], - totalNum: 0, - pageSize: 10, - currentPage: 1, - }; - }, - created() { - this.setTableData(); - }, - methods: { - ...mapActions(["searchByType"]), + value1: "", + value2: "", + list: [], + totalNum: 0, + pageSize: 10, + currentPage: 1, + }; + }, + created() { + this.setTableData(); + }, + methods: { + ...mapActions(["searchByType"]), + handClose() { + this.dialogVisibleEvent = false + }, + changeCurrentPages(page) { - handleExport(e) {}, - setTableDataHandle(e) {}, - resetTableData(e) {}, - // 璁剧疆琛ㄦ牸鏂戦┈绾� - tableRowClassName({ row, rowIndex }) { - if ((rowIndex + 1) % 2 == 0) { - return "warning-row"; - } else { - return "success-row"; - } - return ""; + this.seachTotalEvents(this.seachID, page) + }, + // 澶勭悊鏃堕棿 + filterTime(time) { + return helper(time); + }, + seachTotalEvents(id, page) { + this.seachID = id + this.dialogVisibleEvent = true + + this.currentPages = page; + let params = { + type: 1, + violationsTypeId: id, + current: this.currentPages, + size: this.pageSizes, + } + params.startTime = this.value2[0] || '' + params.endTime = this.value2[1] || '' + basecase.baseCasePoolList(params).then(res => { + // console.log(res) + this.gridData = res.records + this.pageSizes = res.size + this.currentPages = res.current + this.totalNums = res.total + }) + }, + handleExport(e) { + this.$axios({ + method: "post", + // url: `sccg/intelligentPatrol/statistics/export/unlawful`, + url: `sccg/intelligentPatrol/statistics/export/unlawful/type`, + responseType: "arraybuffer", + data: { + beginTime: this.value2[0], + endTime: this.value2[1], + }, + }).then((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); + } + this.$message.success("鎿嶄綔鎴愬姛"); + }); + }, + setTableDataHandle(e) { + this.setTableData(); + }, + resetTableData(e) { + this.value2 = ""; + this.setTableData(); + }, + // 璁剧疆琛ㄦ牸鏂戦┈绾� + tableRowClassName({ row, rowIndex }) { + if ((rowIndex + 1) % 2 == 0) { + return "warning-row"; + } else { + return "success-row"; + } + return ""; + }, + // 璁剧疆tableData + setTableData() { + const { currentPage, pageSize, context } = this; + this.searchByType({ + currentPage, + pageSize, + beginTime: this.value2[0], + endTime: this.value2[1], + }).then((res) => { + this.list = res.records; + this.totalNum = res.total; + }); + }, + // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠� + changeCurrentPage(page) { + this.currentPage = page; + this.setTableData(); + }, + // 涓婁竴椤电偣鍑讳簨浠� + handlePrev(page) { + this.currentPage = page; + this.setTableData(); + }, + // 涓嬩竴椤电偣鍑讳簨浠� + handleNext(page) { + this.currentPage = page; + this.setTableData(); + }, }, - // 璁剧疆tableData - setTableData() { - const { currentPage, pageSize, context } = this; - this.searchByType({ - currentPage, - pageSize, - beginTime:'2022-05-01 00:00:00', - endTime:'2022-09-01 00:00:00' - }).then((res) => { - this.list = res.records; - this.totalNum = res.total; - }); - }, - // 褰撳墠椤垫敼鍙樿Е鍙戜簨浠� - changeCurrentPage(page) { - this.currentPage = page; - this.setTableData(); - }, - // 涓婁竴椤电偣鍑讳簨浠� - handlePrev(page) { - this.currentPage = page; - this.setTableData(); - }, - // 涓嬩竴椤电偣鍑讳簨浠� - handleNext(page) { - this.currentPage = page; - this.setTableData(); - }, - }, }; </script> <style lang="scss" scoped> .list { - text-align: left; - margin: 10px 20px; - color: #4b9bb7; + text-align: left; + padding: 10px 20px; + color: #4b9bb7; + border: 1px solid #ccc; + header { + background-color: white; + border: 1px solid #fff; - header { - background-color: white; - border: 1pox solid #fff; + .header-content { + //padding: 0 40px; + display: flex; + line-height: 100px; + justify-content: space-between; + align-items: center; - .header-content { - padding: 0 40px; - display: flex; - line-height: 100px; - justify-content: space-between; - align-items: center; + .search { + // display: flex; + justify-content: flex-start; - .search { - // display: flex; - justify-content: flex-start; + span { + flex: 1; + } - span { - flex: 1; + .el-input { + flex: 2; + color: #1d3f57; + + &::v-deep .el-input__inner { + // background-color: #09152f; + border: 1px solid #17324c; + } + } + .el-select { + flex: 1; + } + .el-date-editor { + flex: 1; + } + // :deep(.el-range-input) { + // background-color: #09152f; + // } + } + .find { + margin-right: auto; + margin-left: 30px; + } } - - .el-input { - flex: 2; - color: #1d3f57; - - &::v-deep .el-input__inner { - background-color: #09152f; - border: 1px solid #17324c; - } - } - .el-select { - flex: 1; - } - .el-date-editor { - flex: 1; - } - :deep(.el-range-input) { - background-color: #09152f; - } - } - .find { - margin-right: auto; - margin-left: 30px; - } - } - } - - :deep(.el-range-separator) { - padding: 0px !important; - } - main { - background-color: #09152f; - margin-top: 20px; - padding-bottom: 50px; - border: 1pox solid #fff; - - .main-title { - line-height: 60px; - padding: 10px 20px; } - .tools { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 20px; - - .funs { - display: flex; - - .funsItem { - line-height: 28px; - display: flex; - align-items: center; - border: 1px solid #17324c; - border-radius: 4px; - font-size: 12px; - margin-left: 10px; - - .el-checkbox { - width: 80px; - padding: 0 10px; - } - - .el-select { - width: 120px; - } - - &::v-deep .el-input__inner { - border: none; - background-color: #09152f; - } - - &:hover { - border: 1px solid #4b9bb7; - } - - &:hover .el-checkbox { - color: #4b9bb7; - } - } - } - - .pagination { - margin-top: 50px; - display: flex; - line-height: 50px; - justify-content: center; - - .el-pagination { - &::v-deep li, - &::v-deep .btn-prev, - &::v-deep .btn-next { - background-color: #071f39; - color: #4b9bb7; - } - - &::v-deep .active { - background-color: #409eff; - color: #fff; - } - } - } + :deep(.el-range-separator) { + padding: 0px !important; } - &::v-deep .warning-row { - background-color: #06122c; - } + main { + // background-color: #09152f; + margin-top: 20px; + padding-bottom: 50px; + border: 1pox solid #fff; - &::v-deep .success-row { - background-color: #071f39; - } - - .operationBox { - display: flex; - } - - .el-divider { - background-color: #4b9bb7; - } - .el-table { - color: #4b9bb7; - font-size: 10px; - .operation { - display: flex; - - .line { - padding: 0 5px; + .main-title { + line-height: 60px; + padding: 10px 20px; } - span:hover { - cursor: pointer; + .tools { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; + + .funs { + display: flex; + + .funsItem { + line-height: 28px; + display: flex; + align-items: center; + border: 1px solid #17324c; + border-radius: 4px; + font-size: 12px; + margin-left: 10px; + + .el-checkbox { + width: 80px; + padding: 0 10px; + } + + .el-select { + width: 120px; + } + + &::v-deep .el-input__inner { + border: none; + // background-color: #09152f; + } + + &:hover { + border: 1px solid #4b9bb7; + } + + &:hover .el-checkbox { + color: #4b9bb7; + } + } + } + + .pagination { + margin-top: 50px; + display: flex; + line-height: 50px; + justify-content: center; + + .el-pagination { + &::v-deep li, + &::v-deep .btn-prev, + &::v-deep .btn-next { + // background-color: #071f39; + color: #4b9bb7; + } + + &::v-deep .active { + background-color: #409eff; + color: #fff; + } + } + } } - } + // &::v-deep .warning-row { + // background-color: #06122c; + // } + + // &::v-deep .success-row { + // background-color: #071f39; + // }s + + .operationBox { + display: flex; + } + + .el-divider { + background-color: #4b9bb7; + } + .el-table { + // color: #4b9bb7; + // font-size: 10px; + .operation { + display: flex; + color: var(--operation-color); + .line { + padding: 0 5px; + } + + span:hover { + cursor: pointer; + } + } + } } - } } -</style> \ No newline at end of file +</style> -- Gitblit v1.8.0