2022-12-15 趋势分析 地图位置 ，弹窗修改

odc.xiaohui

2022-12-15 426c8b34e6c0a6f97de69864c537cf5e0d7dbb08

2022-12-15
趋势分析
地图位置 ，弹窗修改

 src/components/map/index.vue

@@ -12,7 +12,7 @@
    };
  },
  created() {
    debugger

    // if (this.point) {
    //   this._point = this.point;
    // }
@@ -23,8 +23,8 @@
  methods: {
    locationMap() {
      const that = this;
      debugger
      setTimeout(() => {


        // console.log("_zoom---", that.zoom);
        // console.log("_point---", JSON.stringify(that.point));
        that.map.setZoomAndCenter(that._zoom, [that.point.x, that.point.y]);
@@ -37,8 +37,14 @@

          // 将创建的点标记添加到已有的地图实例：
          that.map.add(marker);
          marker.on('click',function(e){
            console.log('666')
            that.$emit('fatherMethod')
            // that.$parent.fatherMethod();

          })
        }
      }, 1000);

    },
  },
  mounted() {

 src/views/intelligentPatrol/studyJudge/index.vue

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

 src/views/intelligentPatrol/trendAnalysis/index.vue

@@ -6,11 +6,11 @@
      <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 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">
@@ -28,7 +28,7 @@
        <!-- 对应数据 -->
        <div class="trend-data-main">
          <div class="point-item" v-for="item in trendAnalysisList" :key="item.id" @click="pointClick(item)">
            <span>{{ item.name }}</span>
            <span class="point-name">{{ item.name }}</span>
            <span>{{ item.count }}</span>
          </div>
        </div>
@@ -37,12 +37,18 @@
    <div class="trend-main">

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

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

@@ -59,7 +65,7 @@
  },

  mounted() {
    this.renderEchart();
    // this.renderEchart();
  },

  computed: {
@@ -70,6 +76,8 @@

  data() {
    return {
      echartsList:null,
      echartsDialogVisible:false,
      search: {
        type: null,
        timeRange: null
@@ -85,6 +93,17 @@
    }
  },
  methods: {
    fatherMethod(){
      console.log('7777')
      this.echartsDialogVisible=true
      this.$nextTick(function (){
        this.renderEchart(this.echartsList);

      })
    },
    handleClose(){
      this.echartsDialogVisible = false
    },
    renderEchart(dataList) {
      if (!this.echarts) {
        this.echarts = echarts.init(document.getElementById('echarts'));
@@ -132,8 +151,9 @@
      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);
            // const countList = res.map(item => +item.count);
            this.echartsList= res.map(item => +item.count);
            // this.renderEchart(countList);
          })
          .catch(err => this.$message.error(err))
    }
@@ -192,6 +212,10 @@
          display: flex;
          padding: 0 2vw;
          justify-content: space-between;
          .point-name{
            cursor: pointer;
            color: #66b1ff;
          }
        }
      }
    }
@@ -214,7 +238,7 @@
  }
}
.map {
  height: 488px;
  min-width: 460px;
  height: 100%;
  min-width: 80%;
}
</style>
</style>