From 829f5116884f98643ffc5b2a548a600d40c0cedb Mon Sep 17 00:00:00 2001
From: zhanghua <314079846@qq.com>
Date: 星期一, 14 四月 2025 23:09:32 +0800
Subject: [PATCH] 处理图片显示问题
---
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 7b782bc..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.algoName }}</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