优化

zhanghua

2024-01-21 e1aa0ecffbabd618c71e4ad94370fb8dffe6ee1c

 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>