From 893fc457a2daeb0aa33a5a9d0b32eef7db238c1f Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期一, 23 十月 2023 21:58:07 +0800 Subject: [PATCH] bug修改 --- src/views/intelligentPatrol/statistics/unlawful/time/index.vue | 379 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 374 insertions(+), 5 deletions(-) diff --git a/src/views/intelligentPatrol/statistics/unlawful/time/index.vue b/src/views/intelligentPatrol/statistics/unlawful/time/index.vue index 000f533..b8de79b 100644 --- a/src/views/intelligentPatrol/statistics/unlawful/time/index.vue +++ b/src/views/intelligentPatrol/statistics/unlawful/time/index.vue @@ -1,13 +1,382 @@ <template> - <div>鎸夋椂闂寸粺璁�</div> + <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="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"> + </el-table-column> + <el-table-column prop="ratio" label="鍗犳瘮" min-width="5"> + </el-table-column> + <el-table-column prop="checked" label="宸插鏍�" min-width="5"> + </el-table-column> + <el-table-column prop="register" 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> </template> + <script> +import { createNamespacedHelpers } from "vuex"; +const { mapActions } = createNamespacedHelpers("statistics"); -<script> 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]); + }, + }, + { + 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(["searchByTime"]), -} + handleExport(e) { + this.$axios({ + method: 'post', + url: `sccg/intelligentPatrol/statistics/export/unlawful/time`, + 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.searchByTime({ + 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(); + }, + }, +}; </script> + <style lang="scss" scoped> +.list { + text-align: left; + padding: 10px 20px; + color: #4b9bb7; + border: 1px solid #ccc; + header { + background-color: white; + border: 1pox solid #fff; -<style> + .header-content { + //padding: 0 40px; + display: flex; + line-height: 100px; + justify-content: space-between; + align-items: center; -</style> \ No newline at end of file + .search { + // display: flex; + justify-content: flex-start; + + 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; + } + } + } + + :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; + } + } + } + } + // &::v-deep .warning-row { + // background-color: #06122c; + // } + + // &::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; + color: var(--operation-color); + .line { + padding: 0 5px; + } + + span:hover { + cursor: pointer; + } + } + } + } +} +</style> -- Gitblit v1.8.0