轨迹动画和任务管理

riku

2024-05-09 75aeb4e63339b60f9559af984c7d9f87a7cba24a

 src/views/historymode/HistoryMode.vue

@@ -1,10 +1,12 @@
<template>
  <div class="p-events-none m-t-2">
    <el-row v-show="status == 0" justify="center">
    <el-row justify="center" align="middle" class="top-wrap">
      <SearchBar
        v-show="status == 0"
        :search-time="searchTime"
        @search="fetchHistroyData"
      ></SearchBar>
      <TrajectoryState v-show="status != 0" :status="status"></TrajectoryState>
    </el-row>
    <el-row class="m-t-2">
      <FactorRadio
@@ -17,6 +19,14 @@
        class="m-t-2"
        :factor="factorDatas.factor[factorType]"
      ></FactorLegend>
    </el-row>
    <el-row class="historical" justify="center">
      <HistoricalTrajectory
        :factor-datas="factorDatas"
        :factor-type="factorType"
        @change="(e) => (status = e)"
        @stop="draw"
      ></HistoricalTrajectory>
    </el-row>
    <TrendAnalysis
      class="trend-analysis"
@@ -32,11 +42,6 @@
      :factor-datas="factorDatas"
      :device-type="deviceType"
    ></DataSheet>
    <el-row class="historical" justify="center">
      <HistoricalTrajectory
        @change="(e) => (status = e)"
      ></HistoricalTrajectory>
    </el-row>
  </div>
</template>

@@ -82,7 +87,7 @@
  },
  watch: {
    factorType(nValue, oValue) {
      if (nValue != oValue) {
      if (nValue != oValue && this.status == 0) {
        this.draw();
      }
    }
@@ -115,10 +120,6 @@
      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;
      });
@@ -188,6 +189,10 @@
};
</script>
<style scoped>
.top-wrap {
  height: 40px;
}

.trend-analysis {
  position: absolute;
  left: 0;
@@ -202,7 +207,7 @@

.historical {
  position: absolute;
  bottom: 0;
  bottom: 10px;
  left: 0;
  right: 0;
}