优化

zhanghua

2022-12-15 0a8e4f9371a403db92f2894a78363600e5583908

优化

 src/components/map/index.vue

@@ -27,7 +27,7 @@

        // console.log("_zoom---", that.zoom);
        // console.log("_point---", JSON.stringify(that.point));
        that.map.setZoomAndCenter(that._zoom, [that.point.x, that.point.y]);
        that.map.setZoomAndCenter(that.zoom, [that.point.x, that.point.y]);
        if (that.mark) {
          // 创建一个 Marker 实例：
          var marker = new AMap.Marker({

 src/views/intelligentPatrol/studyJudge/index.vue

@@ -31,7 +31,7 @@
          <!--            <span>{{ currentEvent.address }}</span>-->
          <!--          </div>-->
          <span @click="openDialogTable" class="count-data-span"
          >您有{{ countData.review }}条待审核报警信息,今日立案{{
            >您有{{ countData.review }}条待审核报警信息,今日立案{{
              countData.register
            }}条,再学习{{ countData.study }}条</span
          >
@@ -229,7 +229,7 @@
      </div>
    </el-dialog>
    <el-dialog :visible.sync="isShowTable" title="报警信息" width="1200px">
      <inspection-table/>
      <inspection-table />
    </el-dialog>
  </div>
</template>
@@ -245,17 +245,11 @@
import MyMap from "@/components/map";

export default {
  components: { MyDispatch, MyMap,InspectionTable },
  components: { MyDispatch, MyMap, InspectionTable },
  created() {
    this.getInspectionData();
    this.initEventParams();
    basecase
      .getInspectionCountData()
      .then((res) => {
        this.countData = res;
      })
      .catch((err) => this.$message.error(err));

    this.getInspectionCount();
    getStoreInfoList({ current: 1, size: 100 })
      .then(({ list }) => {
        this.storeList = list;
@@ -280,7 +274,7 @@
  },
  mounted() {
    this.timer = setInterval(() => {
      setTimeout(this.getInspectionData, 0);
      this.getInspectionCount();
    }, 1000 * 10);
  },
  data() {
@@ -296,7 +290,7 @@
      }
    };
    return {
      isShowTable:false,
      isShowTable: false,
      timer: null,
      countData: {
        study: 0,
@@ -374,8 +368,18 @@
    };
  },
  methods: {
    openDialogTable(){
      this.isShowTable = true
    getInspectionCount() {
      basecase
        .getInspectionCountData({
          showLoading: false,
        })
        .then((res) => {
          this.countData = res;
        })
        .catch((err) => this.$message.error(err));
    },
    openDialogTable() {
      this.isShowTable = true;
    },
    pageChange(type) {
      if (type === "next") {
@@ -689,13 +693,12 @@

      .sjm-content-left {
        line-height: 4.8vh;
        .count-data-span{
        .count-data-span {
          cursor: pointer;
          color: #66b1ff;
        }
        .left-form > ::v-deep.el-form-item__label {
          font-size: 16px !important;

        }
        .img-item {
          display: flex;

 src/views/intelligentPatrol/trendAnalysis/index.vue

@@ -1,67 +1,83 @@
<template>
  <div class="trend-analysis">
    <!-- 侧边栏 -->
    <div class="trend-side">
      <!-- 输入区域 -->
      <div class="trend-input-area">
        <span class="trend-title">趋势分析</span>
        <el-form ref="form" :model="search" label-width="6vw">
<!--          <el-form-item label="类型查询">-->
<!--            <el-select v-model="search.type" @change="searchList" placeholder="内容信息">-->
<!--              <el-option v-for="option in categoryOptions" :key="option.value" :value="option.value" :label="option.label" ></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item class="time-area" label="时间范围">
            <el-date-picker @change="searchList" start-placeholder="开始时间" end-placeholder="结束时间" v-model="search.timeRange"
                            type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss">
            </el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <!-- 数据展示 -->
      <div class="trend-data-show">
        <!-- 点位切换 -->
        <div class="trend-data-header">
          <el-button type="text" @click="tabChange(1)">高发点位</el-button>
          <el-button type="text" @click="tabChange(2)">首次违规点位</el-button>
  <div style="height: 95%">
    <div class="trend-title">趋势分析</div>
    <div class="trend-analysis">
      <div class="trend-side">
        <!-- 输入区域 -->
        <div class="trend-input-area">
          <el-form ref="form" :model="search" label-width="6vw">
            <!--          <el-form-item label="类型查询">-->
            <!--            <el-select v-model="search.type" @change="searchList" placeholder="内容信息">-->
            <!--              <el-option v-for="option in categoryOptions" :key="option.value" :value="option.value" :label="option.label" ></el-option>-->
            <!--            </el-select>-->
            <!--          </el-form-item>-->
            <el-form-item class="time-area" label="时间范围">
              <el-date-picker
                @change="searchList"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                v-model="search.timeRange"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <!-- 对应数据 -->
        <div class="trend-data-main">
          <div class="point-item" v-for="item in trendAnalysisList" :key="item.id" @click="pointClick(item)">
            <span class="point-name">{{ item.name }}</span>
            <span>{{ item.count }}</span>
        <!-- 数据展示 -->
        <div class="trend-data-show">
          <!-- 点位切换 -->
          <div class="trend-data-header">
            <el-button type="text" @click="tabChange(1)">高发点位</el-button>
            <el-button type="text" @click="tabChange(2)"
              >首次违规点位</el-button
            >
          </div>
          <!-- 对应数据 -->
          <div class="trend-data-main">
            <div
              class="point-item"
              v-for="item in trendAnalysisList"
              :key="item.id"
              @click="pointClick(item)"
            >
              <span class="point-name">{{ item.name }}</span>
              <span>{{ item.count }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="trend-main">

      <div class="map">
            <MyMap :point="point" :zoom="zoom" :mark="mark" @fatherMethod="fatherMethod"></MyMap>
      <div class="trend-main">
        <div class="map">
          <MyMap
            :point="point"
            :zoom="zoom"
            :mark="mark"
            @fatherMethod="fatherMethod"
          ></MyMap>
        </div>
      </div>

    </div>
    <el-dialog
        title="提示"
      <el-dialog
        title="趋势图"
        :visible.sync="echartsDialogVisible"
        width="30%"
        :before-close="handleClose">
      <div style="height: 500px;width: 500px;" id="echarts">
      </div>
    </el-dialog>
        :before-close="handleClose"
      >
        <div style="height: 500px; width: 500px" id="echarts"></div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import * as echarts from "echarts";
import basecase from "@/api/operate/basecase";
import { CATEGOTY } from "@/utils/helper";
import MyMap from "@/components/map";

export default {
  components :{MyMap},
  components: { MyMap },
  created() {
    this.searchList()
    this.searchList();
  },

  mounted() {
@@ -71,16 +87,17 @@
  computed: {
    categoryOptions() {
      return CATEGOTY;
    }
    },
  },

  data() {
    return {
      echartsList:null,
      echartsDialogVisible:false,
      echartsDateList: [],
      echartsDataList: null,
      echartsDialogVisible: false,
      search: {
        type: null,
        timeRange: null
        timeRange: null,
      },
      timeRangeFlag: false,
      trendAnalysisList: [],
@@ -89,40 +106,39 @@
      pointName: null,
      point: { x: "119.27179890", y: "28.59027084" },
      mark: null,
      zoom: 15,
    }
      zoom: 13,
    };
  },
  methods: {
    fatherMethod(){
      console.log('7777')
      this.echartsDialogVisible=true
      this.$nextTick(function (){
        this.renderEchart(this.echartsList);

      })
    fatherMethod() {
      this.echartsDialogVisible = true;
      this.$nextTick(function () {
        this.renderEchart(this.echartsDateList, this.echartsDataList);
      });
    },
    handleClose(){
      this.echartsDialogVisible = false
    handleClose() {
      this.echartsDialogVisible = false;
    },
    renderEchart(dataList) {
    renderEchart(dateTimeList, dataList) {
      if (!this.echarts) {
        this.echarts = echarts.init(document.getElementById('echarts'));
        this.echarts = echarts.init(document.getElementById("echarts"));
      }
      // 绘制图表
      this.echarts.setOption({
        xAxis: {
          name: '日/周',
          name: "日/周",
          data: dateTimeList,
        },
        yAxis: {
          name: '报警量(次)',
          name: "报警量(次)",
        },
        series: [
          {
            data: dataList,
            type: 'line',
            smooth: true
          }
        ]
            type: "line",
            smooth: true,
          },
        ],
      });
    },
    async searchList() {
@@ -130,10 +146,11 @@
      const trendAnalysisParam = {
        startTime,
        endTime,
        type: this.search.type
      }
      this.trendAnalysisList = this.highFlag ? await basecase.getTrendAnalysisData(trendAnalysisParam)
          : await basecase.getFirstTrendAnalysisData(trendAnalysisParam);
        type: this.search.type,
      };
      this.trendAnalysisList = this.highFlag
        ? await basecase.getTrendAnalysisData(trendAnalysisParam)
        : await basecase.getFirstTrendAnalysisData(trendAnalysisParam);
    },

    tabChange(params) {
@@ -144,27 +161,43 @@
    pointClick(data) {
      this.pointName = data.name;
      this.point = {
            x: data.longitude,
            y: data.latitude,
          };
        x: data.longitude,
        y: data.latitude,
      };
      this.zoom = 19;
      this.mark = { title: data.address };
      basecase.getPointTrendAnalysisData({ longitude: data.longitude,latitude: data.latitude })
          .then(res => {
            // const countList = res.map(item => +item.count);
            this.echartsList= res.map(item => +item.count);
            // this.renderEchart(countList);
          })
          .catch(err => this.$message.error(err))
    }
      basecase
        .getPointTrendAnalysisData({
          longitude: data.longitude,
          latitude: data.latitude,
        })
        .then((res) => {
          // const countList = res.map(item => +item.count);
          this.echartsDataList = [];
          this.echartsDateList = [];
          res.forEach((item) => {
            this.echartsDataList.push(item.count);
            this.echartsDateList.push(item.dateTime);
          });
          // this.renderEchart(countList);
        })
        .catch((err) => this.$message.error(err));
    },
  },
}
};
</script>

<style lang="scss" scoped>
.trend-title {
  color: #4b9bb7;
  line-height: 40px;
  font-size: 26px;
  text-align: left;
  margin-left: 20px;
}
.trend-analysis {
  height: 100%;
  padding: 10vh 0vw;
  padding: 10px 0px;
  color: #4b9bb7;
  display: flex;

@@ -179,7 +212,7 @@
      flex-direction: column;
      padding: 0 2vw;

      &>span {
      & > span {
        line-height: 40px;
      }

@@ -202,7 +235,7 @@
          border: 2px solid #09152f;
        }

        .el-button+.el-button {
        .el-button + .el-button {
          margin: 0;
        }
      }
@@ -212,7 +245,7 @@
          display: flex;
          padding: 0 2vw;
          justify-content: space-between;
          .point-name{
          .point-name {
            cursor: pointer;
            color: #66b1ff;
          }
@@ -225,6 +258,7 @@
    flex: 1;
    border: 1px solid #09152f;
    display: flex;
    margin-left: 20px;
    .trend-main-echarts {
      width: 500px;
      height: 400px;
@@ -239,6 +273,6 @@
}
.map {
  height: 100%;
  min-width: 80%;
  width: 98%;
}
</style>