预警研判

zhanghua

2023-04-03 91a2e0d1cdc2b4ad816d5ee450f159ef6cd57486

预警研判

 src/components/map/leafletMap.vue

@@ -9,6 +9,7 @@
    data() {
        return {
            map: null,
      marker: null,
            map_point: { x: "119.27179890", y: "28.59027084" },
            map_zoom: 15,
            mapUrl:
@@ -42,7 +43,7 @@
        };
    },
    mounted() {
        console.log('/* 创建地图实例 */')
    console.log("/* 创建地图实例 */");
        setTimeout(() => {
            this.createrMap();
        }, 100);
@@ -50,7 +51,6 @@
    methods: {
        /* 创建地图实例 */
        createrMap() {

            this.option.center = [eval(this.map_point.y), eval(this.map_point.x)];
            this.option.zoom = this.map_zoom;
            this.map = this.$map.createrMap("map-container", this.option);
@@ -71,22 +71,24 @@
            //   // // });
            // });
            this.locationMap();

        },
        locationMap() {
            debugger
            if (this.map_point && this.map_point.y) {
                this.map.setView([eval(this.map_point.y), eval(this.map_point.x)], this.map_zoom);

        this.map.setView(
          [eval(this.map_point.y), eval(this.map_point.x)],
          this.map_zoom
        );
            }
            if (this.mark && this.map) {
        if (this.marker) this.map.removeLayer(this.marker);
                // 创建一个 Marker 实例：
                var marker = L.marker([eval(this.map_point.y), eval(this.map_point.x)]).addTo(
                    this.map
                );
                let that = this
        this.marker = L.marker([
          eval(this.map_point.y),
          eval(this.map_point.x),
        ]).addTo(this.map);
        let that = this;
                // 将创建的点标记添加到已有的地图实例：
                marker.on("click", function (e) {
        this.marker.on("click", function (e) {
                    that.$emit("fatherMethod");
                });
            }

 src/router/index.js

@@ -358,7 +358,7 @@
  {
    path: 'studyJudge', // 预警研判
    name: 'studyJudge',
    component: () => import('@/views/intelligentPatrol/studyJudge'),
    component: () => import('@/views/intelligentPatrol/studyJudge/tablePage'),
  },
  {
    path: 'illegalSearch', // 违规检索

 src/views/intelligentPatrol/studyJudge/index.vue

@@ -53,11 +53,7 @@
                          >报警时间：{{ currentEvent.alarmTime }}</span
                      >
                  </div>
                  <div
                      class="img-item"
                      v-for="item in imageList"
                      :key="item.id"
                  >
          <div class="img-item" v-for="item in imageList" :key="item.id">
                      <img :src="item" />
                  </div>
                  <el-form
@@ -68,9 +64,9 @@
                      label-position="left"
                      class="left-form"
                  >
                      <el-form-item label="事件编号:">
            <!-- <el-form-item label="事件编号:">
                          <span>{{ currentEvent.code }}</span>
                      </el-form-item>
            </el-form-item> -->
                      <el-form-item label="事件等级:">
                          <span>{{ currentEvent.grade }}</span>
                      </el-form-item>
@@ -92,62 +88,9 @@
                  <!-- <iframe src="https://183.245.159.161:8282/OneMap/index.html#/OneMap?code=2&clientVersion=&skin=white&locale=zh&otherAuthor=allowable"></iframe> -->
              </div>
              <div class="sjm-content-right">
                  <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>
                  <div class="card-box">
                      <div class="but-live">
                          <el-button
                              size="small"
                              @click="createVideo(currentEvent, 'live')"
              <el-button size="small" @click="createVideo(currentEvent, 'live')"
                              >实时预览</el-button
                          >
                          <el-button
@@ -195,13 +138,9 @@
                                  />
                              </el-select>
                          </el-form-item>
                          <el-form-item
                              v-if="eventInfoData.store"
                              label="店铺得分:"
                          >
              <el-form-item v-if="eventInfoData.store" label="店铺得分:">
                              <span>{{
                                  selectStoreChange(eventInfoData.store)
                                      .storeScore
                  selectStoreChange(eventInfoData.store).storeScore
                              }}</span>
                          </el-form-item>
                          <el-form-item label="处理意见:" prop="state">
@@ -263,9 +202,7 @@
                              <el-button @click.native.prevent="handleConfirm"
                                  >确认</el-button
                              >
                              <el-button @click="pageChange('next')"
                                  >下一条</el-button
                              >
                <el-button @click="pageChange('next')">下一条</el-button>
                          </el-form-item>
                      </el-form>
                  </div>
@@ -287,10 +224,7 @@
          v-show="dialogCreate"
          :before-close="handleClose2"
      >
          <div
              class="dom"
              style="width: 100%; height: 600px; position: relative"
          >
      <div class="dom" style="width: 100%; height: 600px; position: relative">
              <div id="dom1" class="dom1"></div>
          </div>
      </el-dialog>
@@ -307,18 +241,19 @@
import { FILE_ORIGINAL_URL } from "@/utils";
import { validateCarNum } from "@/utils/validate";
import MyDispatch from "@/components/dispatch";
import InspectionTable from "@/views/intelligentPatrol/studyJudge/inspectionTable/index.vue";
// import InspectionTable from "@/views/intelligentPatrol/studyJudge/inspectionTable/index.vue";
// import MyMap from "@/components/map";
import MyMap from "@/components/map/leafletMap.vue";
import videoPoint from "@/api/system/videoPoint";
import { getTypeList } from "@/utils/helper"

export default {
  components: { MyDispatch, MyMap, InspectionTable },
  components: { MyDispatch, MyMap },
  created() {
      this.loadVideo();
      this.loadEventGrade();
    if (this.info) {
      this.currentEvent = this.info;
      this.loadData();
    } else {
      this.getInspectionData();
    }
      this.initEventParams();
      this.getInspectionCount();
      getStoreInfoList({ current: 1, size: 100 })
@@ -436,31 +371,9 @@
          point: null,
          mark: null,
          zoom: null,
          eventGradeOptions: [],
          videoOptions: [],
          options: {
              label: 'name',
              value: 'id',
          },
          seachData: {}
      };
  },
  methods: {
      loadVideo() {
          videoPoint
              .getVideoPointList({
                  current: 1,
                  size: 1000
              })
              .then(({ records, total }) => {
                  this.videoOptions = records;
              })
      },
      loadEventGrade() {
          getTypeList("1", "02").then((result) => {
              this.eventGradeOptions = result;
          })
      },
      getInspectionCount() {
          basecase
              .getInspectionCountData({
@@ -486,20 +399,32 @@
      getInspectionData() {
          let data = {
              current: this.currentPage,
        pageSize: 1,
              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]
        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.countData.review = total
          this.countData.review = total;
                  if (records.length > 0) {
                      this.currentEvent = records[0];
            this.loadData();
          } else {
            this.currentEvent = {};
            this.$message("当前查询条件无数据");
          }
        })
        .catch((err) => this.$message.error(err));
    },
    loadData() {
      debugger;
                      this.point = {
                          x: this.currentEvent.longitude,
                          y: this.currentEvent.latitude,
@@ -511,10 +436,7 @@
                              .split(",")
                              .map((item) => `${FILE_ORIGINAL_URL}sccg/API/img?fileUrl=${item}`);
                      }
                      if (
                          this.currentEvent?.alarmTime ||
                          this.currentEvent?.currentAlarmTime
                      ) {
      if (this.currentEvent?.alarmTime || this.currentEvent?.currentAlarmTime) {
                          const { alarmTime, currentAlarmTime } = this.currentEvent;
                          const continueAlarmTime =
                              new Date().getTime() -
@@ -527,14 +449,7 @@
                              CONTINUE_DAY
                          )}天${parseInt(CONTINUE_HOURS)}小时`;
                      }
                  } else {
                      this.currentEvent = {}
                      this.$message("当前查询条件无数据");
                  }
              })
              .catch((err) => this.$message.error(err));
      },

      // 确认点击事件
      handleConfirm() {
          this.$refs.currentEvent.validate((flag) => {
@@ -751,13 +666,15 @@
          return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
      },
      resetAll() {
          this.seachData = {}
      }
      this.seachData = {};
    },
  },
  beforeDestroy() {
      clearInterval(this.timer);
      this.timer = null;
  },

  props: ["info", "seachData"],
};
</script>


 src/views/intelligentPatrol/studyJudge/tablePage.vue

New file
@@ -0,0 +1,332 @@
<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"
        >
        </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>
</template>
  
  <script>
import basecase from "@/api/operate/basecase";
import videoPoint from "@/api/system/videoPoint";
import helper from "@/utils/mydate";
import { getTypeList } from "@/utils/helper";
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;
        });
    },
    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;
      }
    },

    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));
    },

    filterTime(time) {
      return helper(time);
    },
    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;

    .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;
      }
    }
  }

  .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;

  .operation {
    display: flex;
    color: var(--operation-color);
    .line {
      padding: 0 5px;
    }

    span:hover {
      cursor: pointer;
    }
  }
}

.header {
  line-height: normal;
}
</style>