实时走航

riku

2024-05-11 e94ea7f723e616a0566ac5c7f9d77435333d9e92

 src/views/realtimemode/RealtimeMode.vue

@@ -16,6 +16,11 @@
    <el-row class="m-t-2" justify="start">
      <DashBoard :factor-datas="factorDatas"></DashBoard>
    </el-row>
    <RealTimeTrend
      class="real-time-trend"
      :factor-datas="factorDatas"
      :device-type="deviceType"
    ></RealTimeTrend>
  </div>
</template>

@@ -25,9 +30,13 @@
import { FactorDatas } from '@/model/FactorDatas';
import monitorDataApi from '@/api/monitorDataApi';
import DashBoard from './component/DashBoard.vue';
import RealTimeTrend from './component/RealTimeTrend.vue';
import { MapAnimation } from '@/utils/map/animation';

const mapAnimation = new MapAnimation();

export default {
  components: { DashBoard },
  components: { DashBoard, RealTimeTrend },
  setup() {
    const { loading, fetchData } = useFetchData(10000);
    return { loading, fetchData };
@@ -36,19 +45,33 @@
    return {
      // 监测设备类型
      deviceType: TYPE0,
      deviceCode: '0a0000000001',
      // 监测因子的类型编号
      factorType: '1',
      // 监测数据
      factorDatas: new FactorDatas()
      // 新获取的监测数据
      factorDatas: new FactorDatas(),
      // 全部监测数据
      allFactorDatas: new FactorDatas()
    };
  },
  computed: {
    latestTime() {
      if (this.factorDatas.times.length == 0) {
        return '----/--/-- --:--:--';
      } else {
        return this.factorDatas.times[this.factorDatas.times.length - 1];
      }
    }
  },
  methods: {
    onFetchData(type, data) {
    onFetchData(data) {
      // todo 根据设备类型切换地图监测因子展示单选框、折线图复选框、数据表格复选框的因子类型
      this.deviceType = type;
      this.factorDatas.setData(data, this.drawMode, () => {
        this.factorDatas.refreshHeight(this.factorType);
      // this.deviceType = type;
      const fDatas = new FactorDatas();
      fDatas.setData(data, this.drawMode, () => {
        fDatas.refreshHeight(this.factorType);
        // this.draw();
        this.factorDatas = fDatas;
      });
    },
    fetchRealTimeData() {
@@ -56,18 +79,75 @@
      this.fetchData((page) => {
        return monitorDataApi
          .fetchHistroyData({
            deviceCode: '0a0000000001',
            deviceCode: this.deviceCode,
            startTime: '2021-11-04 09:53:35',
            page,
            perPage: 100
          })
          .then((res) => {
            this.onFetchData(TYPE0, res.data);
            this.onFetchData(res.data);
            this.onMapData(res.data);
            this.fetchNextData();
          });
      });
    },
    clearFetchingTask() {
      if (this.fetchingTask) {
        clearInterval(this.fetchingTask);
      }
    },
    fetchNextData() {
      this.clearFetchingTask();
      this.fetchingTask = setInterval(() => {
        if (this.isFetching) {
          return;
        }

        this.isFetching = true;
        this.fetchData(() => {
          return monitorDataApi
            .fetchNextData({
              deviceCode: this.deviceCode,
              updateTime: this.latestTime,
              perPage: 2
            })
            .then((res) => {
              this.onFetchData(res.data);
              this.onMapData(res.data);
            })
            .finally(() => (this.isFetching = false));
        });
      }, 10000);
    },
    onMapData(dataList) {
      let startIndex = this.allFactorDatas.length() - 1;
      if (!this.notFirstFetch) {
        startIndex = dataList.length - 2;
        this.notFirstFetch = true;
      }
      startIndex = startIndex < 0 ? 0 : startIndex;
      this.allFactorDatas.addData(dataList, this.drawMode, () => {
        mapAnimation.moveAnimation(
          this.allFactorDatas,
          this.factorType,
          startIndex
        );
      });
    }
  },
  mounted() {
    this.fetchRealTimeData();
  },
  unmounted() {
    this.clearFetchingTask();
    mapAnimation.stop();
  }
};
</script>
<style scoped>
.real-time-trend {
  position: absolute;
  right: 0;
  top: 0;
}
</style>