From e6443cf405d4e950abe35a29e6c133d097fc1ad5 Mon Sep 17 00:00:00 2001 From: zhanghua <314079846@qq.com> Date: 星期一, 04 十二月 2023 17:46:01 +0800 Subject: [PATCH] 100路视频 --- src/views/intelligentPatrol/studyJudge/tablePage.vue | 594 ++++++++++++++++++++++++++++++---------------------------- 1 files changed, 305 insertions(+), 289 deletions(-) diff --git a/src/views/intelligentPatrol/studyJudge/tablePage.vue b/src/views/intelligentPatrol/studyJudge/tablePage.vue index 06556f2..88a1427 100644 --- a/src/views/intelligentPatrol/studyJudge/tablePage.vue +++ b/src/views/intelligentPatrol/studyJudge/tablePage.vue @@ -1,109 +1,114 @@ <template> - <div class="mainContent"> - <div class="header"> - <el-form :inline="true" :model="seachData" class="demo-form-inline"> - <el-form-item label="浜嬩欢绫诲瀷"> - <el-cascader - v-model="seachData.gradeId" - :options="eventGradeOptions" - :props="options" - clearable - ></el-cascader> - </el-form-item> - <el-form-item label="鍙戠敓鐐逛綅"> - <el-select v-model="seachData.videoId" placeholder="璇烽�夋嫨"> - <el-option - v-for="item in videoOptions" - :key="item.id" - :label="item.name" - :value="item.id" - ></el-option> - </el-select> - </el-form-item> - <el-form-item label="鎶ヨ鏃堕棿"> - <el-date-picker - v-model="seachData.alarmTime" - type="daterange" - align="right" - unlink-panels - range-separator="鑷�" - start-placeholder="寮�濮嬫棩鏈�" - end-placeholder="缁撴潫鏃ユ湡" - > - </el-date-picker> - </el-form-item> - <el-form-item> - <el-button type="primary" @click="getInspectionData">鏌ヨ</el-button> - <el-button type="primary" @click="resetAll">閲嶇疆</el-button> - </el-form-item> - </el-form> - </div> - <!-- 鏁版嵁灞曠ず --> - <el-table - border - stripe - ref="multipleTable" - :header-cell-style="{ - background: '#F5F5F5', - '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> - <el-table-column prop="code" label="鐐逛綅鍚嶇О" min-width="18"> - <template slot-scope="scope"> - <span>{{ scope.row.name || scope.row.address }}</span> - </template> - </el-table-column> - <el-table-column prop="eventSource" label="浜嬩欢绫诲瀷" min-width="8"> - <template slot-scope="scope"> - <span>{{ scope.row.alarmName||scope.row.grade }}</span> - </template> - </el-table-column> - <el-table-column prop="alarmTime" label="鎶ヨ鏃堕棿" min-width="15"> - <template slot-scope="scope"> - <span>{{ filterTime(scope.row.alarmTime) }}</span> - </template> - </el-table-column> - <el-table-column prop="operation" label="鎿嶄綔" min-width="20"> - <template slot-scope="scope"> - <div class="operation"> - <span @click="handleLearn(scope.row)">澶勭悊</span> - </div> - </template> - </el-table-column> - </el-table> - <!-- tools --> - <div class="tools"> - <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" + <div class="mainContent"> + <div class="header"> + <el-form :inline="true" :model="seachData" class="demo-form-inline"> + <el-form-item label="浜嬩欢绫诲瀷"> + <el-cascader + v-model="seachData.gradeId" + :options="eventGradeOptions" + :props="options" + clearable + ></el-cascader> + </el-form-item> + <el-form-item label="鍙戠敓鐐逛綅"> + <el-select v-model="seachData.videoId" placeholder="璇烽�夋嫨"> + <el-option + v-for="item in videoOptions" + :key="item.id" + :label="item.name" + :value="item.id" + ></el-option> + </el-select> + </el-form-item> + <el-form-item label="鎶ヨ鏃堕棿"> + <el-date-picker + v-model="seachData.alarmTime" + type="daterange" + align="right" + unlink-panels + range-separator="鑷�" + start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" + > + </el-date-picker> + </el-form-item> + <el-form-item> + <el-button type="primary" @click="getInspectionData" + >鏌ヨ</el-button + > + <el-button type="primary" @click="resetAll">閲嶇疆</el-button> + </el-form-item> + </el-form> + </div> + <!-- 鏁版嵁灞曠ず --> + <el-table + border + stripe + ref="multipleTable" + :header-cell-style="{ + background: '#F5F5F5', + 'font-weight': '650', + 'line-height': '45px' + }" + :data="tableData" + style="width: 100%" + :row-class-name="tableRowClassName" + @selection-change="tableChange" > - </el-pagination> - </div> + <el-table-column type="selection" min-width="5"> </el-table-column> + <el-table-column prop="code" label="鐐逛綅鍚嶇О" min-width="18"> + <template slot-scope="scope"> + <span>{{ scope.row.name || scope.row.address }}</span> + </template> + </el-table-column> + <el-table-column prop="eventSource" label="浜嬩欢绫诲瀷" min-width="8"> + <template slot-scope="scope"> + <span>{{ scope.row.alarmName || scope.row.grade }}</span> + </template> + </el-table-column> + <el-table-column prop="alarmTime" label="鎶ヨ鏃堕棿" min-width="15"> + <template slot-scope="scope"> + <span>{{ filterTime(scope.row.alarmTime) }}</span> + </template> + </el-table-column> + <el-table-column prop="operation" label="鎿嶄綔" min-width="20"> + <template slot-scope="scope"> + <div class="operation"> + <span @click="handleLearn(scope.row)">澶勭悊</span> + </div> + </template> + </el-table-column> + </el-table> + <!-- tools --> + <div class="tools"> + <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 + :visible.sync="dialogAdd" + width="90%" + title="棰勮鐮斿垽" + v-if="dialogAdd" + :before-close="handleClose" + > + <JudgeIndex + :info="videoInspection" + :seachData="seachData" + ></JudgeIndex> + </el-dialog> </div> - <!-- 鏂板 --> - <el-dialog - :visible.sync="dialogAdd" - width="90%" - title="棰勮鐮斿垽" - v-if="dialogAdd" - :before-close="handleClose" - > - <JudgeIndex :info="videoInspection" :seachData="seachData"></JudgeIndex> - </el-dialog> - </div> </template> <script> @@ -114,219 +119,230 @@ import JudgeIndex from "./index.vue"; export default { - components: { JudgeIndex }, - created() { - this.loadVideo(); - this.loadEventGrade(); - this.getInspectionData(); - }, - data() { - return { - dialogAdd: false, - preMyIdx: 0, - mystatus: 1, - tableData: [], - myIdx: 0, - totalNum: 0, - pageSize: 10, - currentPage: 1, - all: false, - unsame: false, - tempList: [], - eventGradeOptions: [], - videoOptions: [], - options: { - label: "name", - value: "id", - }, - seachData: {}, - videoInspection: {}, - }; - }, - methods: { - loadVideo() { - videoPoint - .getVideoPointList({ - current: 1, - size: 1000, - }) - .then(({ records, total }) => { - this.videoOptions = records; - }); + components: { JudgeIndex }, + created() { + this.loadVideo(); + this.loadEventGrade(); + this.getInspectionData(); }, - loadEventGrade() { - getTypeList("1", "02").then((result) => { - this.eventGradeOptions = result; - }); + data() { + return { + dialogAdd: false, + preMyIdx: 0, + mystatus: 1, + tableData: [], + myIdx: 0, + totalNum: 0, + pageSize: 10, + currentPage: 1, + all: false, + unsame: false, + tempList: [], + eventGradeOptions: [], + videoOptions: [], + options: { + label: "name", + value: "id", + }, + seachData: {}, + videoInspection: {}, + }; }, - tableChange(list) { - this.tempList = []; - list.forEach((item) => { - this.tempList.push(item.id); - }); - if (list.length === this.tableData.length) { - this.all = true; - } else { - this.all = false; - } + watch: { + '$route'(to, from) { //鐩戝惉璺敱鏄惁鍙樺寲 + this.getInspectionData(); + } }, + methods: { + loadVideo() { + let path = this.$route.path; - handlePrev(page) { - this.currentPage = page; - this.getInspectionData(); - }, - handleNext(page) { - this.currentPage = page; - this.getInspectionData(); - }, - changeCurrentPage(page) { - this.currentPage = page; - this.getInspectionData(); - }, - selectAll() { - this.$refs.multipleTable.toggleAllSelection(); - }, - disSame(list) { - list.forEach((row) => { - this.$refs.multipleTable.toggleRowSelection(row); - }); - }, - tableRowClassName({ row, rowIndex }) { - if ((rowIndex + 1) % 2 === 0) { - return "warning-row"; - } else { - return "success-row"; - } - }, - getInspectionData() { - let data = { - current: this.currentPage, - pageSize: this.pageSize, - videoId: this.seachData.videoId, - }; - if (this.seachData.alarmTime) { - data.beginTime = this.seachData.alarmTime[0]; - data.endTime = this.seachData.alarmTime[1]; - } - if (this.seachData.gradeId) { - data.gradeId = this.seachData.gradeId[1]; - } - basecase - .getInspectionData(data) - .then(({ records, total }) => { - this.tableData = records; - this.totalNum = total; - }) - .catch((err) => this.$message.error(err)); - }, + videoPoint + .getVideoPointList({ + type: path.substring(path.length - 1, path.length), + current: 1, + size: 1000, + }) + .then(({ records, total }) => { + this.videoOptions = records; + }); + }, + loadEventGrade() { + getTypeList("1", "02").then((result) => { + this.eventGradeOptions = result; + }); + }, + tableChange(list) { + this.tempList = []; + list.forEach((item) => { + this.tempList.push(item.id); + }); + if (list.length === this.tableData.length) { + this.all = true; + } else { + this.all = false; + } + }, - filterTime(time) { - return helper(time); + handlePrev(page) { + this.currentPage = page; + this.getInspectionData(); + }, + handleNext(page) { + this.currentPage = page; + this.getInspectionData(); + }, + changeCurrentPage(page) { + this.currentPage = page; + this.getInspectionData(); + }, + selectAll() { + this.$refs.multipleTable.toggleAllSelection(); + }, + disSame(list) { + list.forEach((row) => { + this.$refs.multipleTable.toggleRowSelection(row); + }); + }, + tableRowClassName({ row, rowIndex }) { + if ((rowIndex + 1) % 2 === 0) { + return "warning-row"; + } else { + return "success-row"; + } + }, + getInspectionData() { + let path = this.$route.path; + + let data = { + current: this.currentPage, + pageSize: this.pageSize, + type: path.substring(path.length - 1, path.length), + videoId: this.seachData.videoId, + }; + if (this.seachData.alarmTime) { + data.beginTime = this.seachData.alarmTime[0]; + data.endTime = this.seachData.alarmTime[1]; + } + if (this.seachData.gradeId) { + data.gradeId = this.seachData.gradeId[1]; + } + basecase + .getInspectionData(data) + .then(({ records, total }) => { + this.tableData = records; + this.totalNum = total; + }) + .catch((err) => this.$message.error(err)); + }, + + filterTime(time) { + return helper(time); + }, + handleLearn(row) { + this.dialogAdd = true; + this.videoInspection = row; + + }, + handleClose(done) { + this.changeCurrentPage(1); + done(); + }, + resetAll() { + this.seachData = {}; + }, }, - handleLearn(row) { - this.dialogAdd = true; - this.videoInspection = row; - - }, - handleClose(done) { - this.changeCurrentPage(1); - done(); - }, - resetAll() { - this.seachData = {}; - }, - }, }; </script> <style scoped lang="scss"> .tools { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 20px; - - .funs-sp { - //border: 1px solid #DCDFE6; - } - - .funs { display: flex; + justify-content: space-between; + align-items: center; + padding: 0 20px; - .funsItem { - border: 1px solid #dcdfe6; - line-height: 28px; - display: flex; - align-items: center; - 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; - } + .funs-sp { + //border: 1px solid #DCDFE6; } - } - .pagination { - margin-top: 50px; - display: flex; - line-height: 50px; - justify-content: center; + .funs { + display: flex; - .el-pagination { - &::v-deep li, - &::v-deep .btn-prev, - &::v-deep .btn-next { - // background-color: #071f39; - color: #4b9bb7; - } + .funsItem { + border: 1px solid #dcdfe6; + line-height: 28px; + display: flex; + align-items: center; + border-radius: 4px; + font-size: 12px; + margin-left: 10px; - &::v-deep .active { - background-color: #409eff; - color: #fff; - } + .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; + } + } + } } .el-table { - // color: #4b9bb7; - // font-size: 10px; + // color: #4b9bb7; + // font-size: 10px; - .operation { - display: flex; - color: var(--operation-color); - .line { - padding: 0 5px; - } + .operation { + display: flex; + color: var(--operation-color); + .line { + padding: 0 5px; + } - span:hover { - cursor: pointer; + span:hover { + cursor: pointer; + } } - } } .header { - line-height: normal; + line-height: normal; } </style> \ No newline at end of file -- Gitblit v1.8.0