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

odc.xiaohui

2022-12-15 426c8b34e6c0a6f97de69864c537cf5e0d7dbb08

 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>