趋势分析经纬度修改

fangyuan

2022-12-15 0bc97726ed2c14d075557ef897d0d8b1ecfe5c4f

 src/views/intelligentPatrol/trendAnalysis/index.vue

@@ -7,12 +7,13 @@
        <span class="trend-title">趋势分析</span>
        <el-form ref="form" :model="search" label-width="6vw">
          <el-form-item label="类型查询">
            <el-select v-model="search.type" placeholder="内容信息">
            <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 v-model="search.timeRange" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss">
            <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>
@@ -34,6 +35,10 @@
      </div>
    </div>
    <div class="trend-main">

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

      </div>
@@ -45,8 +50,10 @@
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},
  created() {
    this.searchList()
  },
@@ -71,7 +78,10 @@
      trendAnalysisList: [],
      highFlag: true,
      echarts: null,
      pointName: null
      pointName: null,
      point: null,
      mark: null,
      zoom: null,
    }
  },
  methods: {
@@ -106,6 +116,7 @@
      this.trendAnalysisList = this.highFlag ? await basecase.getTrendAnalysisData(trendAnalysisParam)
          : await basecase.getFirstTrendAnalysisData(trendAnalysisParam);
    },

    tabChange(params) {
      this.highFlag = params === 1;
      this.searchList();
@@ -113,7 +124,13 @@

    pointClick(data) {
      this.pointName = data.name;
      basecase.getPointTrendAnalysisData({ id: data.id })
      this.point = {
            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.renderEchart(countList);
@@ -127,7 +144,7 @@
<style lang="scss" scoped>
.trend-analysis {
  height: 100%;
  padding: 10vh 10vw;
  padding: 10vh 0vw;
  color: #4b9bb7;
  display: flex;

@@ -183,7 +200,7 @@
  .trend-main {
    flex: 1;
    border: 1px solid #09152f;

    display: flex;
    .trend-main-echarts {
      width: 500px;
      height: 400px;
@@ -196,4 +213,8 @@
    }
  }
}
.map {
  height: 488px;
  min-width: 460px;
}
</style>