1. 完成表格模块的功能迁移； 2. 完成表格、折线图、地图标记三者点击联动

riku

2024-05-08 f16acb06ab278cdcb1d39a29680634010638326d

 src/views/historymode/HistoryMode.vue

@@ -1,25 +1,55 @@
<template>
  <div class="fy-container">
  <div class="p-events-none m-t-2">
    <el-row justify="center">
      <SearchBar search-time="" @search="fetchHistroyData"></SearchBar>
      <SearchBar
        :search-time="searchTime"
        @search="fetchHistroyData"
      ></SearchBar>
    </el-row>
    <FactorRadio
    <el-row class="m-t-2">
      <FactorRadio
        :device-type="deviceType"
        @change="(e) => (factorType = e)"
      ></FactorRadio>
    </el-row>
    <el-row class="m-t-2">
      <FactorLegend
        class="m-t-2"
        :factor="factorDatas.factor[factorType]"
      ></FactorLegend>
    </el-row>
    <TrendAnalysis
      class="trend-analysis"
      :locate-index="locateIndex"
      @chart-click="handelIndexChange"
      :factor-datas="factorDatas"
      :device-type="deviceType"
      @change="(e) => (factorType = e)"
    ></FactorRadio>
    ></TrendAnalysis>
    <DataSheet
      class="data-sheet"
      :locate-index="locateIndex"
      @table-click="handelIndexChange"
      :factor-datas="factorDatas"
      :device-type="deviceType"
    ></DataSheet>
  </div>
</template>

<script>
import Layer from '@/utils/map/3dLayer';
import marks from '@/utils/map/marks';
import sector from '@/utils/map/sector';
import { DialogUtil } from '@/utils/map/dialog';
import monitorDataApi from '@/api/monitorDataApi';
import { useFetchData } from '@/composables/fetchData';
import moment from 'moment';
import { TYPE0 } from '@/constant/device-type';
import { FactorDatas } from '@/model/FactorDatas';
import TrendAnalysis from './component/TrendAnalysis.vue';
import DataSheet from './component/DataSheet.vue';

export default {
  components: { TrendAnalysis, DataSheet },
  setup() {
    const { loading, fetchData } = useFetchData(10000);
    return { loading, fetchData };
@@ -38,7 +68,9 @@
      setCenter: true,
      // 绘制模式，0：自动模式，自动计算当前数据的范围，绘制合适的比例；1：手动模式，根据页面设置的绘图范围进行绘制
      drawMode: 0,
      searchTime: []
      searchTime: [],
      // 当前选中高亮的数据点索引
      locateIndex: undefined
    };
  },
  watch: {
@@ -49,6 +81,11 @@
    }
  },
  methods: {
    // 监听折线图和表格的点击事件
    handelIndexChange(index) {
      this.locateIndex = index;
      this.drawSector(index);
    },
    draw() {
      // todo 刷新图例
      const factor = this.factorDatas.factor[this.factorType];
@@ -60,8 +97,7 @@
      //   this.factorMode = factorMode;
      // this.factorType = factorType;
      // this.factorName = factorName;
      // this.factorDatas.refreshHeight(this.factorType + 1 + '');
      // this.refreshLegend(this.factorDatas);
      this.factorDatas.refreshHeight(this.factorType);
      // this.mapMaker.setFactorType(factorType);
      // if (!this.mapMaker.runStatus()) {

@@ -69,13 +105,24 @@
      // }
    },
    drawMassMarks(e) {
      marks.drawMassMarks(this.factorDatas, e, () => {
      marks.drawMassMarks(this.factorDatas, e, (index) => {
        // 查询范围内的监测站点
        // SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance);
        // 3. 趋势图跳转定位
        // const progress = FChart.locate(lineChart.chart, lineChart.option, i, _factor.factorName);
        // 4. 表格数据跳转定位
        // Table.locate(i);
        this.drawSector(index);
        this.locateIndex = index;
      });
    },
    drawSector(index) {
      // 1. 绘制扇形区域
      sector.drawSector(this.factorDatas, index);
      // 2. 绘制对话框
      DialogUtil.openNewWindow(this.factorDatas, index, () => {
        // 移除扇形区域
        // clearSector3();
      });
    },
    onFetchData(type, data) {
@@ -99,7 +146,6 @@
            deviceCode,
            startTime,
            endTime,
            type,
            page,
            perPage: pageSize
          })
@@ -108,7 +154,7 @@
    },
    fetchRealTimeData() {
      // fixme 2024.5.3 此处初始获取的数据，参数应该由searchbar决定，后续修改
      this.fetchData((page, pageSize) => {
      this.fetchData((page) => {
        return monitorDataApi
          .fetchHistroyData({
            deviceCode: '0a0000000001',
@@ -118,8 +164,10 @@
          })
          .then((res) => {
            if (res.data.length > 0) {
              const s = new Date(res.data[0].time);
              const e = new Date(res.data[res.data.length - 1].time);
              const s = new Date(res.data[0].time.replace(' ', 'T'));
              const e = new Date(
                res.data[res.data.length - 1].time.replace(' ', 'T')
              );
              this.searchTime = [s, e];
            }
            this.onFetchData(TYPE0, res.data);
@@ -133,6 +181,15 @@
};
</script>
<style scoped>
.fy-container {
.trend-analysis {
  position: absolute;
  left: 0;
  bottom: 2px;
}

.data-sheet {
  position: absolute;
  right: 0;
  top: 0;
}
</style>