underway-vue.git

feiyu02

2024-05-06 9e0df95ffda0ef9f2339f7caf413b357640aea28

完成历史轨迹展示

已修改17个文件

已添加4个文件

	index.html	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	package-lock.json	14 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	package.json	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/api/monitorDataApi.js	23 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/3dmap.css	11 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/assets/base.css	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/map/MapToolbox.vue	10 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/monitor/FactorRadio.vue	24 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/search/OptionMission.vue	4 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/search/OptionTime.vue	1 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/search/OptionType.vue	2 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/components/search/SearchBar.vue	27 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/constant/device-type.js	12 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/constant/radio-options.js	156 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/model/Factor.js	222 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/model/FactorDatas.js	168 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/model/Legend.js	294 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/styles/elementUI.scss	12 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/utils/map/calculate.js	57 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	src/views/historymode/HistoryMode.vue	87 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史
	vite.config.js	1 ●●●●● 补丁 \| 查看 \| 原始文档 \| blame \| 历史

 index.html

@@ -4,7 +4,7 @@
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <title>é£ç¾½å¤§æ°ç¯å¢æºè½èµ°èªçæµç³»ç»</title>
  </head>
  <body>
    <div id="app"></div>

 package-lock.json

@@ -33,7 +33,7 @@
        "eslint-plugin-vue": "^9.17.0",
        "jsdom": "^24.0.0",
        "prettier": "^3.0.3",
        "sass": "^1.72.0",
        "sass": "^1.76.0",
        "vite": "^5.1.6",
        "vitest": "^1.4.0"
      }
@@ -3514,9 +3514,9 @@
      "dev": true
    },
    "node_modules/sass": {
      "version": "1.72.0",
      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.72.0.tgz",
      "integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==",
      "version": "1.76.0",
      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.76.0.tgz",
      "integrity": "sha512-nc3LeqvF2FNW5xGF1zxZifdW3ffIz5aBb7I7tSvOoNu7z1RQ6pFt9MBuiPtjgaI62YWrM/txjWlOCFiGtf2xpw==",
      "dev": true,
      "dependencies": {
        "chokidar": ">=3.0.0 <4.0.0",
@@ -6966,9 +6966,9 @@
      "dev": true
    },
    "sass": {
      "version": "1.72.0",
      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.72.0.tgz",
      "integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==",
      "version": "1.76.0",
      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.76.0.tgz",
      "integrity": "sha512-nc3LeqvF2FNW5xGF1zxZifdW3ffIz5aBb7I7tSvOoNu7z1RQ6pFt9MBuiPtjgaI62YWrM/txjWlOCFiGtf2xpw==",
      "dev": true,
      "requires": {
        "chokidar": ">=3.0.0 <4.0.0",

 package.json

@@ -37,7 +37,7 @@
    "eslint-plugin-vue": "^9.17.0",
    "jsdom": "^24.0.0",
    "prettier": "^3.0.3",
    "sass": "^1.72.0",
    "sass": "^1.76.0",
    "vite": "^5.1.6",
    "vitest": "^1.4.0"
  }

 src/api/monitorDataApi.js

@@ -1,11 +1,26 @@
import { $http } from './index';

/**
 *
 * èµ°èªçæµæ°æ®ç¸å³API
 */
export default {
  fethcRealtimeData(deviceCode, type, page, perPage) {
    const params = `deviceCode=${deviceCode}&type=${type}&page=${page}&perPage=${perPage}`;
    $http.get(`air/realtime/sec?${params}`);
  /**
   * è·åææ°æ°æ®
   * @returns
   */
  fethcRealtimeData({ deviceCode, type, page, perPage }) {
    return this.fetchHistroyData({ deviceCode, type, page, perPage });
  },

  /**
   * è·ååå²æ°æ®
   * @returns
   */
  fetchHistroyData({ deviceCode, startTime, endTime, type, page, perPage }) {
    let params = `deviceCode=${deviceCode}&page=${page}&perPage=${perPage}`;
    params += type ? `&type=${type}` : '';
    params += startTime ? `&startTime=${startTime}` : '';
    params += endTime ? `&type=${endTime}` : '';
    return $http.get(`air/realtime/sec?${params}`).then((res) => res.data);
  }
};

 src/assets/3dmap.css

@@ -68,7 +68,7 @@
.map-factor-selector {
    position: absolute;
    left: 1px;
    top: 64px;
    top: 41px;
    z-index: 100px;
}

@@ -96,12 +96,11 @@
}

.map-date-selector {
    position: absolute;
    position: relative;
    left: 0;
    right: 0;
    top: 70px;
    padding: 0 4px;
    /* background-color: #ffffffb0; */
    top: 0px;
    /* padding: 0 4px; */
    /* color: ffffffbd; */
}

@@ -165,7 +164,7 @@
.map-mode-change {
    position: absolute;
    left: 10px;
    top: 80px;
    top: 104px;
    z-index: 1000px;
    padding: 1px;
    font-size: 1rem;

 src/assets/base.css

@@ -12,7 +12,7 @@
}

body {
  --screen-min-width: 1200px;
  --screen-min-width: 1440px;
  --screen-min-height: 600px;
  min-height: var(--screen-min-height);
  min-width: var(--screen-min-width);

 src/components/map/MapToolbox.vue

@@ -101,17 +101,7 @@
  left: 2px;
}

.el-button-custom {
  --el-button-bg-color: var(--bg-color);
  --el-button-hover-text-color: var(--select_color);
  --el-button-hover-bg-color: var(--bg-color);
  --el-button-border-color: var(--font-color);
  --el-button-active-border-color: transparent;
}

.el-button-custom:focus-visible {
  outline: 0px solid var(--el-button-outline-color);
}

.el-button {
  margin: initial !important;

 src/components/monitor/FactorRadio.vue

@@ -13,14 +13,34 @@
<script>
// çæµå ååéæ¡
import { radioOptions } from '@/constant/radio-options';
import { TYPE0 } from '@/constant/device-type';

export default {
  props: {
    deviceType: {
      type: String,
      // type0: è½¦è½½ææ äººæº; type1:æ äººè¹
      default: TYPE0
    }
  },
  emits: ['change'],
  data() {
    return {
      radio: radioOptions.type0[0].value,
      options: radioOptions.type0
      radio: radioOptions(TYPE0)[0].value
    };
  },
  computed: {
    options() {
      return radioOptions(this.deviceType);
    }
  },
  watch: {
    deviceType(nV, oV) {
      if (nV != oV) {
        this.radio = this.options[0].value;
      }
    }
  },
  method: {
    handleChange(value) {
      this.$emit('change', value);

 src/components/search/OptionMission.vue

@@ -18,7 +18,7 @@
</template>

<script>
import missionApi from '../../api/missionApi';
import missionApi from '@/api/missionApi';
import { useFetchData } from '@/composables/fetchData';

export default {
@@ -64,7 +64,7 @@
  }
};
</script>
<style scoped>
<style>
/* :deep() .el-form-item__label {
  color: red !important;
} */

 src/components/search/OptionTime.vue

@@ -37,4 +37,3 @@
  }
};
</script>
<style scoped></style>

 src/components/search/OptionType.vue

@@ -43,6 +43,7 @@
  },
  methods: {
    handleChange(value) {
      // todo æ ¹æ®è®¾å¤ç±»ååæ¢å°å¾è½½å·çå¾æ ã
      this.$emit('update:modelValue', value);
    }
  },
@@ -51,4 +52,3 @@
  }
};
</script>
<style scoped></style>

 src/components/search/SearchBar.vue

@@ -1,5 +1,5 @@
<template>
  <BaseCard class="map-date-selector">
  <BaseCard class="map-date-selector flexbox-col align-items">
    <template #content>
      <el-form :inline="true">
        <OptionMission v-model="formSearch.missionCode"></OptionMission>
@@ -9,6 +9,9 @@
          v-model="formSearch.deviceCode"
        ></OptionDevice>
        <OptionTime v-model="formSearch.timeArray"></OptionTime>
        <el-button type="primary" class="el-button-custom" @click="handleClick">
          åæ
        </el-button>
      </el-form>
    </template>
  </BaseCard>
@@ -17,6 +20,9 @@
<script>
// æç´¢æ¡
export default {
  props: {
    searchTime: Array
  },
  data() {
    return {
      formSearch: {
@@ -27,7 +33,22 @@
      }
    };
  },
  method: {}
  emits: ['search'],
  watch: {
    searchTime(nV, oV) {
      if (nV != oV) {
        this.timeArray = this.searchTime;
      }
    }
  },
  method: {
    handleClick() {
      this.$emit('search', this.formSearch);
    }
  }
};
</script>
<style scoped></style>
<style lang="scss">
.fy-container {
}
</style>

 src/constant/device-type.js

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,12 @@
// è½¦è½½
const TYPE0 = '0a';
// æ äººæº
const TYPE1 = '0b';
// æ äººè¹
const TYPE2 = '0c';
// å®ç¹çæµ
const TYPE3 = '0d';
// ç¨çµé
const TYPE4 = '31';

export { TYPE0, TYPE1, TYPE2, TYPE3, TYPE4 };

 src/constant/radio-options.js

@@ -1,74 +1,84 @@
import { TYPE0, TYPE1, TYPE2 } from '@/constant/device-type';

// çæµå ååéæ¡éé¡¹
export const radioOptions = {
  type0: [
    //æ äººæº
    {
      label: 'NO2',
      name: 'NO2',
      value: '1'
    },
    {
      label: 'CO',
      name: 'CO',
      value: '2'
    },
    {
      label: 'H2S',
      name: 'H2S',
      value: '3'
    },
    {
      label: 'SO2',
      name: 'SO2',
      value: '4'
    },
    {
      label: 'O3',
      name: 'NO2',
      value: '5'
    },
    {
      label: 'PM2.5',
      name: 'PM25',
      value: '6'
    },
    {
      label: 'PM10',
      name: 'PM10',
      value: '7'
    },
    {
      label: 'TVOC',
      name: 'VOC',
      value: '10'
    }
  ],
  type1: [
    //æ äººè¹
    {
      label: 'æ¸©åº¦',
      name: 'æ¸©åº¦',
      value: '1'
    },
    {
      label: 'çµå¯¼ç',
      name: 'çµå¯¼ç',
      value: '2'
    },
    {
      label: 'æµåº¦',
      name: 'æµåº¦',
      value: '3'
    },
    {
      label: 'æº¶è§£æ°§',
      name: 'æº¶è§£æ°§',
      value: '4'
    },
    {
      label: 'PH',
      name: 'PH',
      value: '5'
    }
  ]
};
function radioOptions(deviceType) {
  if ([TYPE0, TYPE1].includes(deviceType)) {
    return option1;
  } else if (deviceType == TYPE2) {
    return option2;
  } else {
    return [];
  }
}

const option1 = [
  {
    label: 'NO2',
    name: 'NO2',
    value: '1'
  },
  {
    label: 'CO',
    name: 'CO',
    value: '2'
  },
  {
    label: 'H2S',
    name: 'H2S',
    value: '3'
  },
  {
    label: 'SO2',
    name: 'SO2',
    value: '4'
  },
  {
    label: 'O3',
    name: 'NO2',
    value: '5'
  },
  {
    label: 'PM2.5',
    name: 'PM25',
    value: '6'
  },
  {
    label: 'PM10',
    name: 'PM10',
    value: '7'
  },
  {
    label: 'TVOC',
    name: 'VOC',
    value: '10'
  }
];

const option2 = [
  {
    label: 'æ¸©åº¦',
    name: 'æ¸©åº¦',
    value: '1'
  },
  {
    label: 'çµå¯¼ç',
    name: 'çµå¯¼ç',
    value: '2'
  },
  {
    label: 'æµåº¦',
    name: 'æµåº¦',
    value: '3'
  },
  {
    label: 'æº¶è§£æ°§',
    name: 'æº¶è§£æ°§',
    value: '4'
  },
  {
    label: 'PH',
    name: 'PH',
    value: '5'
  }
];
export { radioOptions };

 src/model/Factor.js

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,222 @@
import { Legend } from './Legend';

const _hMap = {
  1: [0, 1000], //NO2
  2: [0, 2000], //CO
  3: [0, 1000], //H2S
  4: [0, 1000], //SO2
  5: [0, 1000], //O3
  6: [0, 1000], //PM2.5
  7: [0, 1000], //PM10
  8: [0, 100], //TEMPERATURE
  9: [0, 100], //HUMIDITY
  10: [0, 500], //VOC
  11: [0, 1000] //NOI
};
const _hRange = [0, 1000];

function getFactorHeight(type, data, _range) {
  var range = _range == undefined ? _hMap.get(type) : _range;
  var min = range[0];
  var max = range[1];
  var scale = max - min == 0 ? 0 : (_hRange[1] - _hRange[0]) / (max - min);
  var offset = min;
  // console.log("height:" + (data - offset) * scale * 10);
  if (data < range[0]) {
    return (range[0] - offset) * scale * 10;
  } else if (data > range[1]) {
    return (range[1] - offset) * scale * 10;
  } else {
    return (data - offset) * scale * 10;
  }
}

/**
 * çæµå åç±»
 * åå¨æä¸ç±»åççæµå åæ°æ®ï¼æä¾3då°å¾ç»å¶é«åº¦æ¢ç®ï¼ç»å¾èå´è®¾å®çåè½
 * ç¨äº3då°å¾ç»å¶
 */
function Factor(options) {
  /**
    * {factorData: 43.209
        factorId: "1"
        factorName: "NO2"
        physicalQuantity: 211.1
        sensorId: null
        statusList: null}
    */
  this.datas = []; // åå§æ°æ®
  // this.lnglats = [] //3då°å¾å½åå±ç¤ºåæ ç¹æ°ç»
  this.factorName;
  this.factorId;
  this.heights = []; //3då°å¾å½åå±ç¤ºåæ ç¹å¯¹åºçé«åº¦æ°ç»
  this.colors = []; // 3då°å¾å½åå±ç¤ºåæ ç¹å¯¹åºçé¢è²æ°ç»
  this.bottomColor; //æå°å¼å¯¹åºçå¾ä¾è²
  this.min = -1; // å½åæ¾ç¤ºçæå°å¼
  this.max = -1; // å½åæ¾ç¤ºçæå¤§å¼
  this.originMin = -1; // åå§æ°æ®ä¸çæå°å¼
  this.originMax = -1; // åå§æ°æ®ä¸çæå¤§å¼
  this.standardMin = -1; //çæµå åç±»åå¯¹åºçæ åæå°å¼
  this.standardMax = -1; //çæµå åç±»åå¯¹åºçæ åæå¤§å¼

  this.legendType = Legend.S_TYPE; //å¾ä¾æ¨¡å¼

  if (options != undefined) {
    this.datas = options.datas;
    this.heights = options.heights;
    this.min = options.min;
    this.max = options.max;
    this.originMin = options.originMin;
    this.originMax = options.originMax;

    this.factorName = options.factorName;
    this.factorId = options.factorId;
    this.colors = options.colors;
    this.bottomColor = options.bottomColor;
    this.standardMin = options.standardMin;
    this.standardMax = options.standardMax;
  }
}

Factor.prototype = {
  // drawMode: ç»å¶æ¨¡å¼ï¼0ï¼èªå¨æ¨¡å¼ï¼èªå¨è®¡ç®å½åæ°æ®çèå´ï¼ç»å¶åéçæ¯ä¾ï¼1ï¼æå¨æ¨¡å¼ï¼æ ¹æ®é¡µé¢è®¾ç½®çç»å¾èå´è¿è¡ç»å¶
  pushData: function (data, drawMode) {
    if (this.factorName == undefined) {
      this.factorName = data.factorName;
      this.factorId = data.factorId;
    } else {
      if (this.factorName != data.factorName) {
        console.log(
          'éè¯¯: Factorä¸æå¥çæ°æ®åååç§°ä¸ä¸è´ï¼åå åï¼' +
            this.factorName +
            'ï¼æ°å åï¼' +
            data.factorName
        );
      }
    }
    this.datas.push(data);
    this.getRange(data, drawMode);

    if (this.standardMin == -1) {
      var range = Legend.getStandardRange(this.factorName);
      this.standardMin = range[0];
      this.standardMax = range[1];
    }
  },
  getRange: function (data, drawMode) {
    if (this.min == -1) {
      this.min = data.factorData;
      this.max = data.factorData;
    }
    if (this.originMin == -1) {
      this.originMin = data.factorData;
      this.originMax = data.factorData;
    }
    if (drawMode == 0) {
      this.min = Math.min(this.min, data.factorData);
      this.max = Math.max(this.max, data.factorData);
      // this.min = this.standardMin
      // this.max = this.standardMax
    }
    this.originMin = Math.min(this.originMin, data.factorData);
    this.originMax = Math.max(this.originMax, data.factorData);
  },
  getHeight: function () {
    this.heights = [];
    this.colors = [];
    this.datas.forEach((d) => {
      var h = getFactorHeight(d.factorId, d.factorData, [this.min, this.max]);
      if (d.factorData == -1) {
        h = -1;
      }
      this.heights.push(h);
      var c = Legend.getColor(
        this.factorName,
        this.legendType,
        d.factorData,
        this.min,
        this.max
      );
      this.colors.push(c);
      // this.heights.push(d.factorData)
    });
    this.bottomColor = Legend.getColor(
      this.factorName,
      this.legendType,
      this.standardMin,
      this.min,
      this.max
    );
    // console.log(this.factorName + ':' + this.bottomColor);
  },
  setRange: function (range) {
    this.min = range[0];
    this.max = range[1];
    this.legendType = Legend.C_TYPE;
    this.getHeight();
  },
  clearRange: function () {
    this.min = this.originMin;
    this.max = this.originMax;
    this.legendType = Legend.D_TYPE;
    this.getHeight();
  },
  standardRange: function () {
    this.min = this.originMin;
    this.max = this.originMax;
    // this.min = this.standardMin
    // this.max = this.standardMax
    this.legendType = Legend.S_TYPE;
    this.getHeight();
  },
  // æ ¹æ®å¼å§åç»æä¸æ è·åå¯¹åºä½ç½®æ°æ®é
  getByIndex: function (s, e) {
    var d = this.datas.slice(s, e);
    var h = this.heights.slice(s, e);
    return new Factor({
      datas: d,
      heights: h,
      min: this.min,
      max: this.max,
      originMin: this.originMin,
      originMax: this.originMax,
      factorName: this.factorName,
      colors: this.colors,
      bottomColor: this.bottomColor,
      standardMin: this.standardMin,
      standardMax: this.standardMax
    });
  },
  // æ°å¢æ°æ®åæ¶æå¸§
  insertFrame: function (factor, count, isDraw) {
    var d1 = this.datas[this.datas.length - 1];
    var d2 = factor.datas[0];
    if (d1 == undefined || d2 == undefined) {
      return;
    }
    // åå¸§æ°æ®å¼çå·®å¼
    var dValue = {
      factorData: (d2.factorData - d1.factorData) / count,
      physicalQuantity: (d2.physicalQuantity - d2.physicalQuantity) / count
    };
    for (let i = 0; i < count - 1; i++) {
      var _data = {
        factorData: d1.factorData + dValue.factorData * (i + 1),
        factorId: d1.factorId,
        factorName: d1.factorName,
        physicalQuantity:
          d1.physicalQuantity + dValue.physicalQuantity * (i + 1),
        sensorId: d1.sensorId,
        statusList: d1.statusList
      };
      if (!isDraw) {
        _data.factorData = -1;
        _data.physicalQuantity = -1;
      }
      this.datas.push(_data);
    }
    // this.datas.push(d2)
  }
};

export { Factor };

 src/model/FactorDatas.js

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,168 @@
import { Factor } from "./Factor";
import calculate from "@/utils/map/calculate";

/**
 *
 */
function FactorDatas(options) {
  // æ¶é´
  this.times = [];
  // åå§ç»çº¬åº¦ï¼GPSï¼
  this.lnglats_GPS = [];
  // é«å¾·ç»çº¬åº¦
  this.lnglats_GD = [];
  // ï¼é«å¾·å°å¾ï¼è½¬æ¢åç3då°å¾ç»å¶åæ 
  this.coors_GD = [];
  // çæµå åæ°æ®ï¼Map<String, Factor>
  this.factor = new Map();

  if (options != undefined) {
    this.times = options.times;
    this.lnglats_GPS = options.lnglats_GPS;
    this.lnglats_GD = options.lnglats_GD;
    this.coors_GD = options.coors_GD;
    this.factor = options.factor;
  }
}

FactorDatas.prototype = {
  /**
     * @param drawMode ç»å¶æ¨¡å¼ï¼0ï¼èªå¨æ¨¡å¼ï¼èªå¨è®¡ç®å½åæ°æ®çèå´ï¼ç»å¶åéçæ¯ä¾ï¼1ï¼æå¨æ¨¡å¼ï¼æ ¹æ®é¡µé¢è®¾ç½®çç»å¾èå´è¿è¡ç»å¶
     * @param  dataList ç»æå¦ä¸
     * [{
        "time": "2021-04-21 21:11:59",
        "deviceCode": "0a",
        "lng": 121.229385,
        "lat": 30.828487
        "values": [
            {
            "factorId": "1",
            "factorName": "NO2",
            "sensorId": null,
            "factorData": 65.4,
            "physicalQuantity": 215.39,
            "statusList": null
            },
        ],
        }]
        */
  setData: function (dataList, drawMode, callback) {
    this.clearData();

    dataList.forEach((d) => {
      this.times.push(d.time);
      this.lnglats_GPS.push([d.lng, d.lat]);
      d.values.forEach((v) => {
        var f = this.factor[v.factorId];
        if (f == undefined) {
          f = new Factor();
          this.factor[v.factorId] = f;
        }
        f.pushData(v, drawMode == undefined ? 0 : drawMode);
      });
    });

    

    this.convertGPS(this.lnglats_GPS, callback);
  },

  // æ°å¢ä¸ä¸ªæ°æ°æ®
  addData: function (dataList, drawMode, callback) {
    var newGps = [];
    dataList.forEach((data) => {
      this.times.push(data.time);
      this.lnglats_GPS.push([data.lng, data.lat]);
      newGps.push([data.lng, data.lat]);
      // this.coors_GDï¼ 3då°å¾çåæ éè¿ç¬¬ä¸æ¬¡ç»å¶ä¹åè·å¾
      data.values.forEach((d) => {
        var f = this.factor[d.factorId];
        if (f == undefined) {
          f = new Factor();
          this.factor[d.factorId] = f;
        }
        f.pushData(d, drawMode == undefined ? 0 : drawMode);
      });
    });
    this.convertGPS(newGps, callback);
  },

  convertGPS: function (gpsList, callback) {
    var that = this;
    calculate.convertFromGPS(gpsList, function (result) {
      var gd = that.lnglats_GD;
      gd.push.apply(gd, result);

      var coor_GD = calculate.lngLatToGeodeticCoord(result);
      var coor = that.coors_GD;
      coor.push.apply(coor, coor_GD);

      if (typeof callback === 'function') {
        callback();
      }
    });
  },

  clearData: function () {
    this.times = [];
    this.lnglats_GPS = [];
    this.lnglats_GD = [];
    this.coors_GD = [];
    this.factor = new Map();
  },

  // è®¾ç½®ç»å¾èå´
  setRange: function (key, range) {
    this.factor[key].setRange(range);
  },

  // éç½®ç»å¾èå´
  resetRange: function (key) {
    this.factor[key].clearRange();
  },

  // è®¾ç½®ä¸ºæ åç»å¾èå´
  standardRange: function (key) {
    this.factor[key].standardRange();
  },

  // æ ¹æ®å½åç»å¾èå´éæ°è®¡ç®ç»å¾é«åº¦
  refreshHeight: function (key) {
    if (key != undefined) {
      this.factor[key].getHeight();
    } else {
      for (const k in this.factor) {
        this.factor[k].getHeight();
      }
    }
  },

  // æ ¹æ®å¼å§åç»æä¸æ è·åå¯¹åºä½ç½®æ°æ®é
  getByIndex: function (s, e) {
    var t = this.times.slice(s, e);
    var l = this.lnglats_GPS.slice(s, e);
    var l_GD = this.lnglats_GD.slice(s, e);
    var c = this.coors_GD.slice(s, e);
    var f = new Map();
    for (const key in this.factor) {
      if (Object.hasOwnProperty.call(this.factor, key)) {
        const element = this.factor[key];
        f[key] = element.getByIndex(s, e);
      }
    }
    return new FactorDatas({
      times: t,
      lnglats_GPS: l,
      lnglats_GD: l_GD,
      coors_GD: c,
      factor: f
    });
  },

  // è·åæ°æ®é¿åº¦
  length: function () {
    return this.lnglats_GD.length;
  },
};

export { FactorDatas };

 src/model/Legend.js

¶Ô±ÈÐÂÎÄ¼þ
@@ -0,0 +1,294 @@
/**
 * çæµå åå¾ä¾
 */
const Legend = {
  S_TYPE: 0, //æ åå¾ä¾
  D_TYPE: 1, //å¨æå¾ä¾
  C_TYPE: 2, //èªå®ä¹èå´å¾ä¾

  //åçæµå åæ°æ®åçº§ï¼æ åï¼
  _legend_r: {
    NO2: [0, 100, 200, 700, 1200, 2340],
    CO: [0, 5, 10, 35, 60, 90],
    H2S: [0, 150, 500, 650, 800, 1600],
    SO2: [0, 150, 500, 650, 800, 1600],
    O3: [0, 160, 200, 300, 400, 800],
    PM25: [0, 35, 75, 115, 150, 250],
    PM10: [0, 50, 150, 250, 350, 420],
    VOC: [0, 200, 400, 600, 1000, 2000, 4000],
    TMP: [-10, 0, 10, 20, 30, 40],
    spC: [0, 200, 400, 600, 800, 1000],
    tur: [0, 50, 100, 150, 200, 250],
    DO: [0, 3, 5, 7, 9, 11],
    PH: [1, 3, 5, 7, 9, 11, 13]
  },

  //åçæµå åæ°æ®åçº§ï¼æ åï¼å¯¹åºé¢è²
  _legend_c: {
    NO2: [
      [0, 0.89, 0, 0.75],
      [1, 1, 0, 0.75],
      [1, 0.49, 0, 0.75],
      [1, 0, 0, 0.75],
      [0.6, 0, 0.3, 0.75],
      [0.49, 0, 0.14, 0.75]
    ],
    CO: [
      [0, 0.89, 0, 0.75],
      [1, 1, 0, 0.75],
      [1, 0.49, 0, 0.75],
      [1, 0, 0, 0.75],
      [0.6, 0, 0.3, 0.75],
      [0.49, 0, 0.14, 0.75]
    ],
    H2S: [
      [0, 0.89, 0, 0.75],
      [1, 1, 0, 0.75],
      [1, 0.49, 0, 0.75],
      [1, 0, 0, 0.75],
      [0.6, 0, 0.3, 0.75],
      [0.49, 0, 0.14, 0.75]
    ],
    SO2: [
      [0, 0.89, 0, 0.75],
      [1, 1, 0, 0.75],
      [1, 0.49, 0, 0.75],
      [1, 0, 0, 0.75],
      [0.6, 0, 0.3, 0.75],
      [0.49, 0, 0.14, 0.75]
    ],
    O3: [
      [0, 0.89, 0, 0.75],
      [1, 1, 0, 0.75],
      [1, 0.49, 0, 0.75],
      [1, 0, 0, 0.75],
      [0.6, 0, 0.3, 0.75],
      [0.49, 0, 0.14, 0.75]
    ],
    PM25: [
      [0, 0.89, 0, 0.75],
      [1, 1, 0, 0.75],
      [1, 0.49, 0, 0.75],
      [1, 0, 0, 0.75],
      [0.6, 0, 0.3, 0.75],
      [0.49, 0, 0.14, 0.75]
    ],
    PM10: [
      [0, 0.89, 0, 0.75],
      [1, 1, 0, 0.75],
      [1, 0.49, 0, 0.75],
      [1, 0, 0, 0.75],
      [0.6, 0, 0.3, 0.75],
      [0.49, 0, 0.14, 0.75]
    ],
    VOC: [
      [0, 0.89, 0, 0.75],
      [0, 0.7, 0, 0.75],
      [0.8, 1, 0, 0.75],
      [1, 0.49, 0, 0.75],
      [1, 0, 0, 0.75],
      [0.4, 0, 0.3, 0.75],
      [0.6, 0, 0.3, 0.75]
    ],
    TMP: [
      [0, 0.89, 0, 0.75],
      [1, 1, 0, 0.75],
      [1, 0.49, 0, 0.75],
      [1, 0, 0, 0.75],
      [0.6, 0, 0.3, 0.75],
      [0.49, 0, 0.14, 0.75]
    ],
    spC: [
      [0, 0.89, 0, 0.75],
      [1, 1, 0, 0.75],
      [1, 0.49, 0, 0.75],
      [1, 0, 0, 0.75],
      [0.6, 0, 0.3, 0.75],
      [0.49, 0, 0.14, 0.75]
    ],
    tur: [
      [0, 0.89, 0, 0.75],
      [1, 1, 0, 0.75],
      [1, 0.49, 0, 0.75],
      [1, 0, 0, 0.75],
      [0.6, 0, 0.3, 0.75],
      [0.49, 0, 0.14, 0.75]
    ],
    DO: [
      [0.49, 0, 0.14, 0.75],
      [0.6, 0, 0.3, 0.75],
      [1, 0, 0, 0.75],
      [1, 0.49, 0, 0.75],
      [1, 1, 0, 0.75],
      [0, 0.89, 0, 0.75]
    ],
    PH: [
      [0, 0.89, 0, 0.75],
      [0, 0.7, 0, 0.75],
      [0.8, 1, 0, 0.75],
      [1, 0.49, 0, 0.75],
      [1, 0, 0, 0.75],
      [0.4, 0, 0.3, 0.75],
      [0.6, 0, 0.3, 0.75]
    ]
  },

  _custom: [
    [0.05, 0.9, 0.03, 0.75],
    [0.3, 0.65, 0.02, 0.75],
    [0.87, 0.92, 0.03, 0.75],
    [0.8, 0.67, 0.04, 0.75],
    [0.92, 0.28, 0.07, 0.75],
    [0.6, 0.05, 0.05, 0.75]
  ],

  getStandardRange: function (name) {
    var range = this._legend_r[name];
    if (range == undefined) {
      range = this._legend_r['PM25'];
    }
    var min = range[0];
    var max = range[range.length - 1];
    // for (const key in range) {
    //   if (min == undefined) {
    //     min = parseInt(key)
    //   }
    //   max = parseInt(key)
    // }
    if (name == 'CO') {
      min *= 1000;
      max *= 1000;
    }

    return [min, max];
  },

  getColor: function (name, type, data, min, max) {
    if (type == this.S_TYPE) {
      return this.getStandardColor(name, data);
    } else {
      return this.getCustomColor(data, min, max);
    }
  },

  /**
   * è·åçæµå åå½åæµåº¦å¯¹åºçé¢è²
   * @param name çæµå ååç§°
   * @param data çæµå åæµåº¦
   */
  getStandardColor: function (name, data) {
    var range = this._legend_r[name];
    var colors = this._legend_c[name];
    if (range == undefined) {
      range = this._legend_r['PM25'];
      colors = this._legend_c['PM25'];
    }
    // return colors[0]

    var selected = undefined;
    for (let i = 0; i < range.length; i++) {
      const d = range[i];
      var d1 = d;
      if (name == 'CO') {
        d1 *= 1000;
      }
      if (data >= d1) {
        selected = i;
      } else {
        break;
      }
    }

    // é¿åä¸æ è¶ç
    if (selected >= colors.length) {
      selected = colors.length - 1;
    }

    // console.log(name + ': ' + selected);
    return colors[selected];
  },

  getCustomColor: function (data, min, max) {
    var per = (max - min) / this._custom.length;
    var i = parseInt(data / per);
    if (i >= this._custom.length) {
      i = this._custom.length - 1;
    }
    return this._custom[i];
  },

  /**
   * è·ååæå¾ä¾
   */
  refreshLegend: function (eId, name, animation, type, min, max) {
    var legend = $('#' + eId);
    legend.empty();

    var r = this._legend_r[name];
    var c = this._legend_c[name];
    // æ²¡ææ¾å°æ åå¾ä¾çå åï¼é»è®¤ä½¿ç¨èªå®ä¹èå´å¾ä¾
    if (r == undefined) {
      type = this.C_TYPE;
    }
    var range = [];
    if (type != this.S_TYPE && min != undefined && max != undefined) {
      var count = this._custom.length;
      var per = (max - min) / count;
      for (let i = 0; i < count; i++) {
        range.push([(min + per * i).toFixed(1), this._custom[i]]);
      }
    } else {
      for (let i = 0; i < r.length; i++) {
        range.push([r[i], c[i]]);
      }
    }

    for (let i = 0; i < range.length; i++) {
      const r = range[i];
      const nextR = range[i + 1];
      var div1 = $('<div></div>');
      div1.addClass('flexbox align-items margin-top');
      var div2 = $('<div></div>');
      div2.addClass('rectangle');

      var color = r[1];
      var bgcolor =
        'rgba(' +
        color[0] * 255 +
        ', ' +
        color[1] * 255 +
        ', ' +
        color[2] * 255 +
        ', ' +
        color[3] +
        ')';
      div2.css('background-color', bgcolor);
      var div3 = $('<div></div>');
      var d;
      if (nextR != undefined) {
        d = r[0] + '&nbsp;~' + nextR[0] + '&nbsp;' + Util.factorUnit2[name];
      } else {
        d =
          '&nbsp;&nbsp;&nbsp;&nbsp; > &nbsp;' +
          r[0] +
          ' &nbsp;' +
          Util.factorUnit2[name];
      }
      div3.append(d);
      div1.append(div2);
      div1.append(div3);
      legend.append(div1);
    }

    if (animation == false) {
      return;
    }
    legend.hide('fast', function () {
      setTimeout(() => {
        legend.show('fast');
      }, 500);
    });
  }
};

export { Legend };

 src/styles/elementUI.scss

@@ -13,3 +13,15 @@
// .el-radio {
//   --el-radio-text-color: white;
// }

.el-button-custom {
  --el-button-bg-color: var(--bg-color);
  --el-button-hover-text-color: var(--select_color);
  --el-button-hover-bg-color: var(--bg-color);
  --el-button-border-color: var(--font-color);
  --el-button-active-border-color: transparent;
}

.el-button-custom:focus-visible {
  outline: 0px solid var(--el-button-outline-color);
}

 src/utils/map/calculate.js

@@ -4,6 +4,52 @@

import { map } from './index_old';

function _prepare4convert(lnglats) {
  var coor = [];
  var maxLength = 1000;
  var start = 0;
  var end = start + maxLength;
  while (end <= lnglats.length) {
    coor.push(lnglats.slice(start, end));
    start += maxLength;
    end += maxLength;
  }
  if (start < lnglats.length) {
    coor.push(lnglats.slice(start));
  }
  return coor;
}

function parse2LngLat(lnglats) {
  // åå»ºåå«4ä¸ªèç¹çæçº¿åæåæ æ³¨
  var path = [];
  lnglats.forEach(function (value) {
    // eslint-disable-next-line no-undef
    path.push(new AMap.LngLat(value[0], value[1]));
  });
  return path;
}

/**
 * å°gpsç»çº¬åº¦è½¬æ¢ä¸ºé«å¾·å°å¾ç»çº¬åº¦
 * @param {*} lnglats
 * @param {*} callback
 */
function _convertLatlng(index, coor, lnglats, callback) {
  if (index < coor.length) {
    var path = parse2LngLat(coor[index]);
    // eslint-disable-next-line no-undef
    AMap.convertFrom(path, 'gps', function (status, result) {
      if (result.info === 'ok') {
        lnglats.push.apply(lnglats, result.locations);
        _convertLatlng(index + 1, coor, lnglats, callback);
      }
    });
  } else {
    callback(lnglats);
  }
}

export default {
  /**
   * æ ¹æ®åæ ç¹ãè·ç¦»åè§åº¦ï¼å¾å°å¦ä¸ä¸ªåæ ç¹
@@ -55,5 +101,16 @@
      coors_GD.push(p);
    }
    return coors_GD;
  },

  convertFromGPS: function (gps, callback) {
    var coor = _prepare4convert(gps);
    _convertLatlng(0, coor, [], function (result) {
      var gd = [];
      result.forEach((r) => {
        gd.push([r.lng, r.lat]);
      });
      callback(gd);
    });
  }
};

 src/views/historymode/HistoryMode.vue

@@ -1,22 +1,44 @@
<template>
  <div class="fy-container">
    <FactorRadio @change="(e) => (factorType = e)"></FactorRadio>
    <SearchBar></SearchBar>
    <el-row justify="center">
      <SearchBar search-time="" @search="fetchHistroyData"></SearchBar>
    </el-row>
    <FactorRadio
      :device-type="deviceType"
      @change="(e) => (factorType = e)"
    ></FactorRadio>
  </div>
</template>

<script>
import Layer from '@/utils/map/3dLayer';
import marks from '@/utils/map/marks';
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';

export default {
  name: 'HistoryPage',
  setup() {
    const { loading, fetchData } = useFetchData(10000);
    return { loading, fetchData };
  },
  data() {
    return {
      factorType: '',
      factorDatas: [],
      // çæµè®¾å¤ç±»å
      deviceType: TYPE0,
      // çæµå åçç±»åç¼å·
      factorType: '1',
      // çæµæ°æ®
      factorDatas: new FactorDatas(),
      // å³å®ç»å¶3Då¾å½¢æ¶æ¯å¦ä¸åå¾ååå¹¶
      merge: false,
      setCenter: true
      // å³å®ç»å¶å®3Då¾å½¢åå°å¾è§è§æ¯å¦èªå¨åä¸
      setCenter: true,
      // ç»å¶æ¨¡å¼ï¼0ï¼èªå¨æ¨¡å¼ï¼èªå¨è®¡ç®å½åæ°æ®çèå´ï¼ç»å¶åéçæ¯ä¾ï¼1ï¼æå¨æ¨¡å¼ï¼æ ¹æ®é¡µé¢è®¾ç½®çç»å¾èå´è¿è¡ç»å¶
      drawMode: 0,
      searchTime: []
    };
  },
  watch: {
@@ -28,6 +50,7 @@
  },
  methods: {
    draw() {
      // todo å·æ°å¾ä¾
      const factor = this.factorDatas.factor[this.factorType];
      this.drawRoadMap(factor);
      this.drawMassMarks(factor);
@@ -54,12 +77,62 @@
        // 4. è¡¨æ ¼æ°æ®è·³è½¬å®ä½
        // Table.locate(i);
      });
    },
    onFetchData(type, data) {
      // todo æ ¹æ®è®¾å¤ç±»ååæ¢å°å¾çæµå åå±ç¤ºåéæ¡ãæçº¿å¾å¤éæ¡ãæ°æ®è¡¨æ ¼å¤éæ¡çå åç±»å
      this.deviceType = type;
      this.factorDatas.setData(data, this.drawMode, () => {
        this.factorDatas.refreshHeight(this.factorType);
        this.draw();
      });
    },
    fetchHistroyData(option) {
      const { deviceCode, type, timeArray } = option;
      let startTime, endTime;
      if (timeArray && timeArray.length == 2) {
        startTime = moment(timeArray[0]).format('YYYY-MM-DD HH:mm:ss');
        endTime = moment(timeArray[1]).format('YYYY-MM-DD HH:mm:ss');
      }
      this.fetchData((page, pageSize) => {
        return monitorDataApi
          .fetchHistroyData({
            deviceCode,
            startTime,
            endTime,
            type,
            page,
            perPage: pageSize
          })
          .then((res) => this.onFetchData(type, res.data));
      });
    },
    fetchRealTimeData() {
      // fixme 2024.5.3 æ¤å¤åå§è·åçæ°æ®ï¼åæ°åºè¯¥ç±searchbarå³å®ï¼åç»ä¿®æ¹
      this.fetchData((page, pageSize) => {
        return monitorDataApi
          .fetchHistroyData({
            deviceCode: '0a0000000001',
            // type: TYPE0,
            page,
            perPage: 100
          })
          .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);
              this.searchTime = [s, e];
            }
            this.onFetchData(TYPE0, res.data);
          });
      });
    }
  },
  mounted() {
    this.fetchRealTimeData();
  }
};
</script>
<style scoped>
.fy-container {
  background-color: antiquewhite;
}
</style>

 vite.config.js

@@ -34,6 +34,7 @@
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/index.scss" as *;`
        // additionalData: '@import   "@/styles/index.scss";'
      }
    }
  },

			@@ -4,7 +4,7 @@
			<meta charset="UTF-8" />
			<link rel="icon" href="/favicon.ico" />
			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
			<title>Vite App</title>
			<title>é£ç¾½å¤§æ°ç¯å¢æºè½èµ°èªçæµç³»ç»</title>
			</head>
			<body>
			<div id="app"></div>

			@@ -33,7 +33,7 @@
			"eslint-plugin-vue": "^9.17.0",
			"jsdom": "^24.0.0",
			"prettier": "^3.0.3",
			"sass": "^1.72.0",
			"sass": "^1.76.0",
			"vite": "^5.1.6",
			"vitest": "^1.4.0"
			}
			@@ -3514,9 +3514,9 @@
			"dev": true
			},
			"node_modules/sass": {
			"version": "1.72.0",
			"resolved": "https://registry.npmmirror.com/sass/-/sass-1.72.0.tgz",
			"integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==",
			"version": "1.76.0",
			"resolved": "https://registry.npmmirror.com/sass/-/sass-1.76.0.tgz",
			"integrity": "sha512-nc3LeqvF2FNW5xGF1zxZifdW3ffIz5aBb7I7tSvOoNu7z1RQ6pFt9MBuiPtjgaI62YWrM/txjWlOCFiGtf2xpw==",
			"dev": true,
			"dependencies": {
			"chokidar": ">=3.0.0 <4.0.0",
			@@ -6966,9 +6966,9 @@
			"dev": true
			},
			"sass": {
			"version": "1.72.0",
			"resolved": "https://registry.npmmirror.com/sass/-/sass-1.72.0.tgz",
			"integrity": "sha512-Gpczt3WA56Ly0Mn8Sl21Vj94s1axi9hDIzDFn9Ph9x3C3p4nNyvsqJoQyVXKou6cBlfFWEgRW4rT8Tb4i3XnVA==",
			"version": "1.76.0",
			"resolved": "https://registry.npmmirror.com/sass/-/sass-1.76.0.tgz",
			"integrity": "sha512-nc3LeqvF2FNW5xGF1zxZifdW3ffIz5aBb7I7tSvOoNu7z1RQ6pFt9MBuiPtjgaI62YWrM/txjWlOCFiGtf2xpw==",
			"dev": true,
			"requires": {
			"chokidar": ">=3.0.0 <4.0.0",

			@@ -37,7 +37,7 @@
			"eslint-plugin-vue": "^9.17.0",
			"jsdom": "^24.0.0",
			"prettier": "^3.0.3",
			"sass": "^1.72.0",
			"sass": "^1.76.0",
			"vite": "^5.1.6",
			"vitest": "^1.4.0"
			}

			@@ -1,11 +1,26 @@
			import { $http } from './index';

			/**
			*
			* èµ°èªçæµæ°æ®ç¸å³API
			*/
			export default {
			fethcRealtimeData(deviceCode, type, page, perPage) {
			const params = `deviceCode=${deviceCode}&type=${type}&page=${page}&perPage=${perPage}`;
			$http.get(`air/realtime/sec?${params}`);
			/**
			* è·åææ°æ°æ®
			* @returns
			*/
			fethcRealtimeData({ deviceCode, type, page, perPage }) {
			return this.fetchHistroyData({ deviceCode, type, page, perPage });
			},

			/**
			* è·ååå²æ°æ®
			* @returns
			*/
			fetchHistroyData({ deviceCode, startTime, endTime, type, page, perPage }) {
			let params = `deviceCode=${deviceCode}&page=${page}&perPage=${perPage}`;
			params += type ? `&type=${type}` : '';
			params += startTime ? `&startTime=${startTime}` : '';
			params += endTime ? `&type=${endTime}` : '';
			return $http.get(`air/realtime/sec?${params}`).then((res) => res.data);
			}
			};

			@@ -68,7 +68,7 @@
			.map-factor-selector {
			position: absolute;
			left: 1px;
			top: 64px;
			top: 41px;
			z-index: 100px;
			}

			@@ -96,12 +96,11 @@
			}

			.map-date-selector {
			position: absolute;
			position: relative;
			left: 0;
			right: 0;
			top: 70px;
			padding: 0 4px;
			/* background-color: #ffffffb0; */
			top: 0px;
			/* padding: 0 4px; */
			/* color: ffffffbd; */
			}

			@@ -165,7 +164,7 @@
			.map-mode-change {
			position: absolute;
			left: 10px;
			top: 80px;
			top: 104px;
			z-index: 1000px;
			padding: 1px;
			font-size: 1rem;

			@@ -12,7 +12,7 @@
			}

			body {
			--screen-min-width: 1200px;
			--screen-min-width: 1440px;
			--screen-min-height: 600px;
			min-height: var(--screen-min-height);
			min-width: var(--screen-min-width);

			@@ -101,17 +101,7 @@
			left: 2px;
			}

			.el-button-custom {
			--el-button-bg-color: var(--bg-color);
			--el-button-hover-text-color: var(--select_color);
			--el-button-hover-bg-color: var(--bg-color);
			--el-button-border-color: var(--font-color);
			--el-button-active-border-color: transparent;
			}

			.el-button-custom:focus-visible {
			outline: 0px solid var(--el-button-outline-color);
			}

			.el-button {
			margin: initial !important;

			@@ -13,14 +13,34 @@
			<script>
			// çæµå ååéæ¡
			import { radioOptions } from '@/constant/radio-options';
			import { TYPE0 } from '@/constant/device-type';

			export default {
			props: {
			deviceType: {
			type: String,
			// type0: è½¦è½½ææ äººæº; type1:æ äººè¹
			default: TYPE0
			}
			},
			emits: ['change'],
			data() {
			return {
			radio: radioOptions.type0[0].value,
			options: radioOptions.type0
			radio: radioOptions(TYPE0)[0].value
			};
			},
			computed: {
			options() {
			return radioOptions(this.deviceType);
			}
			},
			watch: {
			deviceType(nV, oV) {
			if (nV != oV) {
			this.radio = this.options[0].value;
			}
			}
			},
			method: {
			handleChange(value) {
			this.$emit('change', value);

			@@ -18,7 +18,7 @@
			</template>

			<script>
			import missionApi from '../../api/missionApi';
			import missionApi from '@/api/missionApi';
			import { useFetchData } from '@/composables/fetchData';

			export default {
			@@ -64,7 +64,7 @@
			}
			};
			</script>
			<style scoped>
			<style>
			/* :deep() .el-form-item__label {
			color: red !important;
			} */

			@@ -43,6 +43,7 @@
			},
			methods: {
			handleChange(value) {
			// todo æ ¹æ®è®¾å¤ç±»ååæ¢å°å¾è½½å·çå¾æ ã
			this.$emit('update:modelValue', value);
			}
			},
			@@ -51,4 +52,3 @@
			}
			};
			</script>
			<style scoped></style>

			@@ -1,5 +1,5 @@
			<template>
			<BaseCard class="map-date-selector">
			<BaseCard class="map-date-selector flexbox-col align-items">
			<template #content>
			<el-form :inline="true">
			<OptionMission v-model="formSearch.missionCode"></OptionMission>
			@@ -9,6 +9,9 @@
			v-model="formSearch.deviceCode"
			></OptionDevice>
			<OptionTime v-model="formSearch.timeArray"></OptionTime>
			<el-button type="primary" class="el-button-custom" @click="handleClick">
			åæ
			</el-button>
			</el-form>
			</template>
			</BaseCard>
			@@ -17,6 +20,9 @@
			<script>
			// æç´¢æ¡
			export default {
			props: {
			searchTime: Array
			},
			data() {
			return {
			formSearch: {
			@@ -27,7 +33,22 @@
			}
			};
			},
			method: {}
			emits: ['search'],
			watch: {
			searchTime(nV, oV) {
			if (nV != oV) {
			this.timeArray = this.searchTime;
			}
			}
			},
			method: {
			handleClick() {
			this.$emit('search', this.formSearch);
			}
			}
			};
			</script>
			<style scoped></style>
			<style lang="scss">
			.fy-container {
			}
			</style>

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,12 @@
			// è½¦è½½
			const TYPE0 = '0a';
			// æ äººæº
			const TYPE1 = '0b';
			// æ äººè¹
			const TYPE2 = '0c';
			// å®ç¹çæµ
			const TYPE3 = '0d';
			// ç¨çµé
			const TYPE4 = '31';

			export { TYPE0, TYPE1, TYPE2, TYPE3, TYPE4 };

			@@ -1,74 +1,84 @@
			import { TYPE0, TYPE1, TYPE2 } from '@/constant/device-type';

			// çæµå ååéæ¡éé¡¹
			export const radioOptions = {
			type0: [
			//æ äººæº
			{
			label: 'NO2',
			name: 'NO2',
			value: '1'
			},
			{
			label: 'CO',
			name: 'CO',
			value: '2'
			},
			{
			label: 'H2S',
			name: 'H2S',
			value: '3'
			},
			{
			label: 'SO2',
			name: 'SO2',
			value: '4'
			},
			{
			label: 'O3',
			name: 'NO2',
			value: '5'
			},
			{
			label: 'PM2.5',
			name: 'PM25',
			value: '6'
			},
			{
			label: 'PM10',
			name: 'PM10',
			value: '7'
			},
			{
			label: 'TVOC',
			name: 'VOC',
			value: '10'
			}
			],
			type1: [
			//æ äººè¹
			{
			label: 'æ¸©åº¦',
			name: 'æ¸©åº¦',
			value: '1'
			},
			{
			label: 'çµå¯¼ç',
			name: 'çµå¯¼ç',
			value: '2'
			},
			{
			label: 'æµåº¦',
			name: 'æµåº¦',
			value: '3'
			},
			{
			label: 'æº¶è§£æ°§',
			name: 'æº¶è§£æ°§',
			value: '4'
			},
			{
			label: 'PH',
			name: 'PH',
			value: '5'
			}
			]
			};
			function radioOptions(deviceType) {
			if ([TYPE0, TYPE1].includes(deviceType)) {
			return option1;
			} else if (deviceType == TYPE2) {
			return option2;
			} else {
			return [];
			}
			}

			const option1 = [
			{
			label: 'NO2',
			name: 'NO2',
			value: '1'
			},
			{
			label: 'CO',
			name: 'CO',
			value: '2'
			},
			{
			label: 'H2S',
			name: 'H2S',
			value: '3'
			},
			{
			label: 'SO2',
			name: 'SO2',
			value: '4'
			},
			{
			label: 'O3',
			name: 'NO2',
			value: '5'
			},
			{
			label: 'PM2.5',
			name: 'PM25',
			value: '6'
			},
			{
			label: 'PM10',
			name: 'PM10',
			value: '7'
			},
			{
			label: 'TVOC',
			name: 'VOC',
			value: '10'
			}
			];

			const option2 = [
			{
			label: 'æ¸©åº¦',
			name: 'æ¸©åº¦',
			value: '1'
			},
			{
			label: 'çµå¯¼ç',
			name: 'çµå¯¼ç',
			value: '2'
			},
			{
			label: 'æµåº¦',
			name: 'æµåº¦',
			value: '3'
			},
			{
			label: 'æº¶è§£æ°§',
			name: 'æº¶è§£æ°§',
			value: '4'
			},
			{
			label: 'PH',
			name: 'PH',
			value: '5'
			}
			];
			export { radioOptions };

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,222 @@
			import { Legend } from './Legend';

			const _hMap = {
			1: [0, 1000], //NO2
			2: [0, 2000], //CO
			3: [0, 1000], //H2S
			4: [0, 1000], //SO2
			5: [0, 1000], //O3
			6: [0, 1000], //PM2.5
			7: [0, 1000], //PM10
			8: [0, 100], //TEMPERATURE
			9: [0, 100], //HUMIDITY
			10: [0, 500], //VOC
			11: [0, 1000] //NOI
			};
			const _hRange = [0, 1000];

			function getFactorHeight(type, data, _range) {
			var range = _range == undefined ? _hMap.get(type) : _range;
			var min = range[0];
			var max = range[1];
			var scale = max - min == 0 ? 0 : (_hRange[1] - _hRange[0]) / (max - min);
			var offset = min;
			// console.log("height:" + (data - offset) * scale * 10);
			if (data < range[0]) {
			return (range[0] - offset) * scale * 10;
			} else if (data > range[1]) {
			return (range[1] - offset) * scale * 10;
			} else {
			return (data - offset) * scale * 10;
			}
			}

			/**
			* çæµå åç±»
			* åå¨æä¸ç±»åççæµå åæ°æ®ï¼æä¾3då°å¾ç»å¶é«åº¦æ¢ç®ï¼ç»å¾èå´è®¾å®çåè½
			* ç¨äº3då°å¾ç»å¶
			*/
			function Factor(options) {
			/**
			* {factorData: 43.209
			factorId: "1"
			factorName: "NO2"
			physicalQuantity: 211.1
			sensorId: null
			statusList: null}
			*/
			this.datas = []; // åå§æ°æ®
			// this.lnglats = [] //3då°å¾å½åå±ç¤ºåæ ç¹æ°ç»
			this.factorName;
			this.factorId;
			this.heights = []; //3då°å¾å½åå±ç¤ºåæ ç¹å¯¹åºçé«åº¦æ°ç»
			this.colors = []; // 3då°å¾å½åå±ç¤ºåæ ç¹å¯¹åºçé¢è²æ°ç»
			this.bottomColor; //æå°å¼å¯¹åºçå¾ä¾è²
			this.min = -1; // å½åæ¾ç¤ºçæå°å¼
			this.max = -1; // å½åæ¾ç¤ºçæå¤§å¼
			this.originMin = -1; // åå§æ°æ®ä¸çæå°å¼
			this.originMax = -1; // åå§æ°æ®ä¸çæå¤§å¼
			this.standardMin = -1; //çæµå åç±»åå¯¹åºçæ åæå°å¼
			this.standardMax = -1; //çæµå åç±»åå¯¹åºçæ åæå¤§å¼

			this.legendType = Legend.S_TYPE; //å¾ä¾æ¨¡å¼

			if (options != undefined) {
			this.datas = options.datas;
			this.heights = options.heights;
			this.min = options.min;
			this.max = options.max;
			this.originMin = options.originMin;
			this.originMax = options.originMax;

			this.factorName = options.factorName;
			this.factorId = options.factorId;
			this.colors = options.colors;
			this.bottomColor = options.bottomColor;
			this.standardMin = options.standardMin;
			this.standardMax = options.standardMax;
			}
			}

			Factor.prototype = {
			// drawMode: ç»å¶æ¨¡å¼ï¼0ï¼èªå¨æ¨¡å¼ï¼èªå¨è®¡ç®å½åæ°æ®çèå´ï¼ç»å¶åéçæ¯ä¾ï¼1ï¼æå¨æ¨¡å¼ï¼æ ¹æ®é¡µé¢è®¾ç½®çç»å¾èå´è¿è¡ç»å¶
			pushData: function (data, drawMode) {
			if (this.factorName == undefined) {
			this.factorName = data.factorName;
			this.factorId = data.factorId;
			} else {
			if (this.factorName != data.factorName) {
			console.log(
			'éè¯¯: Factorä¸æå¥çæ°æ®åååç§°ä¸ä¸è´ï¼åå åï¼' +
			this.factorName +
			'ï¼æ°å åï¼' +
			data.factorName
			);
			}
			}
			this.datas.push(data);
			this.getRange(data, drawMode);

			if (this.standardMin == -1) {
			var range = Legend.getStandardRange(this.factorName);
			this.standardMin = range[0];
			this.standardMax = range[1];
			}
			},
			getRange: function (data, drawMode) {
			if (this.min == -1) {
			this.min = data.factorData;
			this.max = data.factorData;
			}
			if (this.originMin == -1) {
			this.originMin = data.factorData;
			this.originMax = data.factorData;
			}
			if (drawMode == 0) {
			this.min = Math.min(this.min, data.factorData);
			this.max = Math.max(this.max, data.factorData);
			// this.min = this.standardMin
			// this.max = this.standardMax
			}
			this.originMin = Math.min(this.originMin, data.factorData);
			this.originMax = Math.max(this.originMax, data.factorData);
			},
			getHeight: function () {
			this.heights = [];
			this.colors = [];
			this.datas.forEach((d) => {
			var h = getFactorHeight(d.factorId, d.factorData, [this.min, this.max]);
			if (d.factorData == -1) {
			h = -1;
			}
			this.heights.push(h);
			var c = Legend.getColor(
			this.factorName,
			this.legendType,
			d.factorData,
			this.min,
			this.max
			);
			this.colors.push(c);
			// this.heights.push(d.factorData)
			});
			this.bottomColor = Legend.getColor(
			this.factorName,
			this.legendType,
			this.standardMin,
			this.min,
			this.max
			);
			// console.log(this.factorName + ':' + this.bottomColor);
			},
			setRange: function (range) {
			this.min = range[0];
			this.max = range[1];
			this.legendType = Legend.C_TYPE;
			this.getHeight();
			},
			clearRange: function () {
			this.min = this.originMin;
			this.max = this.originMax;
			this.legendType = Legend.D_TYPE;
			this.getHeight();
			},
			standardRange: function () {
			this.min = this.originMin;
			this.max = this.originMax;
			// this.min = this.standardMin
			// this.max = this.standardMax
			this.legendType = Legend.S_TYPE;
			this.getHeight();
			},
			// æ ¹æ®å¼å§åç»æä¸æ è·åå¯¹åºä½ç½®æ°æ®é
			getByIndex: function (s, e) {
			var d = this.datas.slice(s, e);
			var h = this.heights.slice(s, e);
			return new Factor({
			datas: d,
			heights: h,
			min: this.min,
			max: this.max,
			originMin: this.originMin,
			originMax: this.originMax,
			factorName: this.factorName,
			colors: this.colors,
			bottomColor: this.bottomColor,
			standardMin: this.standardMin,
			standardMax: this.standardMax
			});
			},
			// æ°å¢æ°æ®åæ¶æå¸§
			insertFrame: function (factor, count, isDraw) {
			var d1 = this.datas[this.datas.length - 1];
			var d2 = factor.datas[0];
			if (d1 == undefined \|\| d2 == undefined) {
			return;
			}
			// åå¸§æ°æ®å¼çå·®å¼
			var dValue = {
			factorData: (d2.factorData - d1.factorData) / count,
			physicalQuantity: (d2.physicalQuantity - d2.physicalQuantity) / count
			};
			for (let i = 0; i < count - 1; i++) {
			var _data = {
			factorData: d1.factorData + dValue.factorData * (i + 1),
			factorId: d1.factorId,
			factorName: d1.factorName,
			physicalQuantity:
			d1.physicalQuantity + dValue.physicalQuantity * (i + 1),
			sensorId: d1.sensorId,
			statusList: d1.statusList
			};
			if (!isDraw) {
			_data.factorData = -1;
			_data.physicalQuantity = -1;
			}
			this.datas.push(_data);
			}
			// this.datas.push(d2)
			}
			};

			export { Factor };

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,168 @@
			import { Factor } from "./Factor";
			import calculate from "@/utils/map/calculate";

			/**
			*
			*/
			function FactorDatas(options) {
			// æ¶é´
			this.times = [];
			// åå§ç»çº¬åº¦ï¼GPSï¼
			this.lnglats_GPS = [];
			// é«å¾·ç»çº¬åº¦
			this.lnglats_GD = [];
			// ï¼é«å¾·å°å¾ï¼è½¬æ¢åç3då°å¾ç»å¶åæ
			this.coors_GD = [];
			// çæµå åæ°æ®ï¼Map<String, Factor>
			this.factor = new Map();

			if (options != undefined) {
			this.times = options.times;
			this.lnglats_GPS = options.lnglats_GPS;
			this.lnglats_GD = options.lnglats_GD;
			this.coors_GD = options.coors_GD;
			this.factor = options.factor;
			}
			}

			FactorDatas.prototype = {
			/**
			* @param drawMode ç»å¶æ¨¡å¼ï¼0ï¼èªå¨æ¨¡å¼ï¼èªå¨è®¡ç®å½åæ°æ®çèå´ï¼ç»å¶åéçæ¯ä¾ï¼1ï¼æå¨æ¨¡å¼ï¼æ ¹æ®é¡µé¢è®¾ç½®çç»å¾èå´è¿è¡ç»å¶
			* @param dataList ç»æå¦ä¸
			* [{
			"time": "2021-04-21 21:11:59",
			"deviceCode": "0a",
			"lng": 121.229385,
			"lat": 30.828487
			"values": [
			{
			"factorId": "1",
			"factorName": "NO2",
			"sensorId": null,
			"factorData": 65.4,
			"physicalQuantity": 215.39,
			"statusList": null
			},
			],
			}]
			*/
			setData: function (dataList, drawMode, callback) {
			this.clearData();

			dataList.forEach((d) => {
			this.times.push(d.time);
			this.lnglats_GPS.push([d.lng, d.lat]);
			d.values.forEach((v) => {
			var f = this.factor[v.factorId];
			if (f == undefined) {
			f = new Factor();
			this.factor[v.factorId] = f;
			}
			f.pushData(v, drawMode == undefined ? 0 : drawMode);
			});
			});



			this.convertGPS(this.lnglats_GPS, callback);
			},

			// æ°å¢ä¸ä¸ªæ°æ°æ®
			addData: function (dataList, drawMode, callback) {
			var newGps = [];
			dataList.forEach((data) => {
			this.times.push(data.time);
			this.lnglats_GPS.push([data.lng, data.lat]);
			newGps.push([data.lng, data.lat]);
			// this.coors_GDï¼ 3då°å¾çåæ éè¿ç¬¬ä¸æ¬¡ç»å¶ä¹åè·å¾
			data.values.forEach((d) => {
			var f = this.factor[d.factorId];
			if (f == undefined) {
			f = new Factor();
			this.factor[d.factorId] = f;
			}
			f.pushData(d, drawMode == undefined ? 0 : drawMode);
			});
			});
			this.convertGPS(newGps, callback);
			},

			convertGPS: function (gpsList, callback) {
			var that = this;
			calculate.convertFromGPS(gpsList, function (result) {
			var gd = that.lnglats_GD;
			gd.push.apply(gd, result);

			var coor_GD = calculate.lngLatToGeodeticCoord(result);
			var coor = that.coors_GD;
			coor.push.apply(coor, coor_GD);

			if (typeof callback === 'function') {
			callback();
			}
			});
			},

			clearData: function () {
			this.times = [];
			this.lnglats_GPS = [];
			this.lnglats_GD = [];
			this.coors_GD = [];
			this.factor = new Map();
			},

			// è®¾ç½®ç»å¾èå´
			setRange: function (key, range) {
			this.factor[key].setRange(range);
			},

			// éç½®ç»å¾èå´
			resetRange: function (key) {
			this.factor[key].clearRange();
			},

			// è®¾ç½®ä¸ºæ åç»å¾èå´
			standardRange: function (key) {
			this.factor[key].standardRange();
			},

			// æ ¹æ®å½åç»å¾èå´éæ°è®¡ç®ç»å¾é«åº¦
			refreshHeight: function (key) {
			if (key != undefined) {
			this.factor[key].getHeight();
			} else {
			for (const k in this.factor) {
			this.factor[k].getHeight();
			}
			}
			},

			// æ ¹æ®å¼å§åç»æä¸æ è·åå¯¹åºä½ç½®æ°æ®é
			getByIndex: function (s, e) {
			var t = this.times.slice(s, e);
			var l = this.lnglats_GPS.slice(s, e);
			var l_GD = this.lnglats_GD.slice(s, e);
			var c = this.coors_GD.slice(s, e);
			var f = new Map();
			for (const key in this.factor) {
			if (Object.hasOwnProperty.call(this.factor, key)) {
			const element = this.factor[key];
			f[key] = element.getByIndex(s, e);
			}
			}
			return new FactorDatas({
			times: t,
			lnglats_GPS: l,
			lnglats_GD: l_GD,
			coors_GD: c,
			factor: f
			});
			},

			// è·åæ°æ®é¿åº¦
			length: function () {
			return this.lnglats_GD.length;
			},
			};

			export { FactorDatas };

¶Ô±ÈÐÂÎÄ¼þ
			@@ -0,0 +1,294 @@
			/**
			* çæµå åå¾ä¾
			*/
			const Legend = {
			S_TYPE: 0, //æ åå¾ä¾
			D_TYPE: 1, //å¨æå¾ä¾
			C_TYPE: 2, //èªå®ä¹èå´å¾ä¾

			//åçæµå åæ°æ®åçº§ï¼æ åï¼
			_legend_r: {
			NO2: [0, 100, 200, 700, 1200, 2340],
			CO: [0, 5, 10, 35, 60, 90],
			H2S: [0, 150, 500, 650, 800, 1600],
			SO2: [0, 150, 500, 650, 800, 1600],
			O3: [0, 160, 200, 300, 400, 800],
			PM25: [0, 35, 75, 115, 150, 250],
			PM10: [0, 50, 150, 250, 350, 420],
			VOC: [0, 200, 400, 600, 1000, 2000, 4000],
			TMP: [-10, 0, 10, 20, 30, 40],
			spC: [0, 200, 400, 600, 800, 1000],
			tur: [0, 50, 100, 150, 200, 250],
			DO: [0, 3, 5, 7, 9, 11],
			PH: [1, 3, 5, 7, 9, 11, 13]
			},

			//åçæµå åæ°æ®åçº§ï¼æ åï¼å¯¹åºé¢è²
			_legend_c: {
			NO2: [
			[0, 0.89, 0, 0.75],
			[1, 1, 0, 0.75],
			[1, 0.49, 0, 0.75],
			[1, 0, 0, 0.75],
			[0.6, 0, 0.3, 0.75],
			[0.49, 0, 0.14, 0.75]
			],
			CO: [
			[0, 0.89, 0, 0.75],
			[1, 1, 0, 0.75],
			[1, 0.49, 0, 0.75],
			[1, 0, 0, 0.75],
			[0.6, 0, 0.3, 0.75],
			[0.49, 0, 0.14, 0.75]
			],
			H2S: [
			[0, 0.89, 0, 0.75],
			[1, 1, 0, 0.75],
			[1, 0.49, 0, 0.75],
			[1, 0, 0, 0.75],
			[0.6, 0, 0.3, 0.75],
			[0.49, 0, 0.14, 0.75]
			],
			SO2: [
			[0, 0.89, 0, 0.75],
			[1, 1, 0, 0.75],
			[1, 0.49, 0, 0.75],
			[1, 0, 0, 0.75],
			[0.6, 0, 0.3, 0.75],
			[0.49, 0, 0.14, 0.75]
			],
			O3: [
			[0, 0.89, 0, 0.75],
			[1, 1, 0, 0.75],
			[1, 0.49, 0, 0.75],
			[1, 0, 0, 0.75],
			[0.6, 0, 0.3, 0.75],
			[0.49, 0, 0.14, 0.75]
			],
			PM25: [
			[0, 0.89, 0, 0.75],
			[1, 1, 0, 0.75],
			[1, 0.49, 0, 0.75],
			[1, 0, 0, 0.75],
			[0.6, 0, 0.3, 0.75],
			[0.49, 0, 0.14, 0.75]
			],
			PM10: [
			[0, 0.89, 0, 0.75],
			[1, 1, 0, 0.75],
			[1, 0.49, 0, 0.75],
			[1, 0, 0, 0.75],
			[0.6, 0, 0.3, 0.75],
			[0.49, 0, 0.14, 0.75]
			],
			VOC: [
			[0, 0.89, 0, 0.75],
			[0, 0.7, 0, 0.75],
			[0.8, 1, 0, 0.75],
			[1, 0.49, 0, 0.75],
			[1, 0, 0, 0.75],
			[0.4, 0, 0.3, 0.75],
			[0.6, 0, 0.3, 0.75]
			],
			TMP: [
			[0, 0.89, 0, 0.75],
			[1, 1, 0, 0.75],
			[1, 0.49, 0, 0.75],
			[1, 0, 0, 0.75],
			[0.6, 0, 0.3, 0.75],
			[0.49, 0, 0.14, 0.75]
			],
			spC: [
			[0, 0.89, 0, 0.75],
			[1, 1, 0, 0.75],
			[1, 0.49, 0, 0.75],
			[1, 0, 0, 0.75],
			[0.6, 0, 0.3, 0.75],
			[0.49, 0, 0.14, 0.75]
			],
			tur: [
			[0, 0.89, 0, 0.75],
			[1, 1, 0, 0.75],
			[1, 0.49, 0, 0.75],
			[1, 0, 0, 0.75],
			[0.6, 0, 0.3, 0.75],
			[0.49, 0, 0.14, 0.75]
			],
			DO: [
			[0.49, 0, 0.14, 0.75],
			[0.6, 0, 0.3, 0.75],
			[1, 0, 0, 0.75],
			[1, 0.49, 0, 0.75],
			[1, 1, 0, 0.75],
			[0, 0.89, 0, 0.75]
			],
			PH: [
			[0, 0.89, 0, 0.75],
			[0, 0.7, 0, 0.75],
			[0.8, 1, 0, 0.75],
			[1, 0.49, 0, 0.75],
			[1, 0, 0, 0.75],
			[0.4, 0, 0.3, 0.75],
			[0.6, 0, 0.3, 0.75]
			]
			},

			_custom: [
			[0.05, 0.9, 0.03, 0.75],
			[0.3, 0.65, 0.02, 0.75],
			[0.87, 0.92, 0.03, 0.75],
			[0.8, 0.67, 0.04, 0.75],
			[0.92, 0.28, 0.07, 0.75],
			[0.6, 0.05, 0.05, 0.75]
			],

			getStandardRange: function (name) {
			var range = this._legend_r[name];
			if (range == undefined) {
			range = this._legend_r['PM25'];
			}
			var min = range[0];
			var max = range[range.length - 1];
			// for (const key in range) {
			// if (min == undefined) {
			// min = parseInt(key)
			// }
			// max = parseInt(key)
			// }
			if (name == 'CO') {
			min *= 1000;
			max *= 1000;
			}

			return [min, max];
			},

			getColor: function (name, type, data, min, max) {
			if (type == this.S_TYPE) {
			return this.getStandardColor(name, data);
			} else {
			return this.getCustomColor(data, min, max);
			}
			},

			/**
			* è·åçæµå åå½åæµåº¦å¯¹åºçé¢è²
			* @param name çæµå ååç§°
			* @param data çæµå åæµåº¦
			*/
			getStandardColor: function (name, data) {
			var range = this._legend_r[name];
			var colors = this._legend_c[name];
			if (range == undefined) {
			range = this._legend_r['PM25'];
			colors = this._legend_c['PM25'];
			}
			// return colors[0]

			var selected = undefined;
			for (let i = 0; i < range.length; i++) {
			const d = range[i];
			var d1 = d;
			if (name == 'CO') {
			d1 *= 1000;
			}
			if (data >= d1) {
			selected = i;
			} else {
			break;
			}
			}

			// é¿åä¸æ è¶ç
			if (selected >= colors.length) {
			selected = colors.length - 1;
			}

			// console.log(name + ': ' + selected);
			return colors[selected];
			},

			getCustomColor: function (data, min, max) {
			var per = (max - min) / this._custom.length;
			var i = parseInt(data / per);
			if (i >= this._custom.length) {
			i = this._custom.length - 1;
			}
			return this._custom[i];
			},

			/**
			* è·ååæå¾ä¾
			*/
			refreshLegend: function (eId, name, animation, type, min, max) {
			var legend = $('#' + eId);
			legend.empty();

			var r = this._legend_r[name];
			var c = this._legend_c[name];
			// æ²¡ææ¾å°æ åå¾ä¾çå åï¼é»è®¤ä½¿ç¨èªå®ä¹èå´å¾ä¾
			if (r == undefined) {
			type = this.C_TYPE;
			}
			var range = [];
			if (type != this.S_TYPE && min != undefined && max != undefined) {
			var count = this._custom.length;
			var per = (max - min) / count;
			for (let i = 0; i < count; i++) {
			range.push([(min + per * i).toFixed(1), this._custom[i]]);
			}
			} else {
			for (let i = 0; i < r.length; i++) {
			range.push([r[i], c[i]]);
			}
			}

			for (let i = 0; i < range.length; i++) {
			const r = range[i];
			const nextR = range[i + 1];
			var div1 = $('<div></div>');
			div1.addClass('flexbox align-items margin-top');
			var div2 = $('<div></div>');
			div2.addClass('rectangle');

			var color = r[1];
			var bgcolor =
			'rgba(' +
			color[0] * 255 +
			', ' +
			color[1] * 255 +
			', ' +
			color[2] * 255 +
			', ' +
			color[3] +
			')';
			div2.css('background-color', bgcolor);
			var div3 = $('<div></div>');
			var d;
			if (nextR != undefined) {
			d = r[0] + ' ~' + nextR[0] + ' ' + Util.factorUnit2[name];
			} else {
			d =
			'     >  ' +
			r[0] +
			'  ' +
			Util.factorUnit2[name];
			}
			div3.append(d);
			div1.append(div2);
			div1.append(div3);
			legend.append(div1);
			}

			if (animation == false) {
			return;
			}
			legend.hide('fast', function () {
			setTimeout(() => {
			legend.show('fast');
			}, 500);
			});
			}
			};

			export { Legend };

			@@ -13,3 +13,15 @@
			// .el-radio {
			// --el-radio-text-color: white;
			// }

			.el-button-custom {
			--el-button-bg-color: var(--bg-color);
			--el-button-hover-text-color: var(--select_color);
			--el-button-hover-bg-color: var(--bg-color);
			--el-button-border-color: var(--font-color);
			--el-button-active-border-color: transparent;
			}

			.el-button-custom:focus-visible {
			outline: 0px solid var(--el-button-outline-color);
			}

			@@ -4,6 +4,52 @@

			import { map } from './index_old';

			function _prepare4convert(lnglats) {
			var coor = [];
			var maxLength = 1000;
			var start = 0;
			var end = start + maxLength;
			while (end <= lnglats.length) {
			coor.push(lnglats.slice(start, end));
			start += maxLength;
			end += maxLength;
			}
			if (start < lnglats.length) {
			coor.push(lnglats.slice(start));
			}
			return coor;
			}

			function parse2LngLat(lnglats) {
			// åå»ºåå«4ä¸ªèç¹çæçº¿åæåæ æ³¨
			var path = [];
			lnglats.forEach(function (value) {
			// eslint-disable-next-line no-undef
			path.push(new AMap.LngLat(value[0], value[1]));
			});
			return path;
			}

			/**
			* å°gpsç»çº¬åº¦è½¬æ¢ä¸ºé«å¾·å°å¾ç»çº¬åº¦
			* @param {*} lnglats
			* @param {*} callback
			*/
			function _convertLatlng(index, coor, lnglats, callback) {
			if (index < coor.length) {
			var path = parse2LngLat(coor[index]);
			// eslint-disable-next-line no-undef
			AMap.convertFrom(path, 'gps', function (status, result) {
			if (result.info === 'ok') {
			lnglats.push.apply(lnglats, result.locations);
			_convertLatlng(index + 1, coor, lnglats, callback);
			}
			});
			} else {
			callback(lnglats);
			}
			}

			export default {
			/**
			* æ ¹æ®åæ ç¹ãè·ç¦»åè§åº¦ï¼å¾å°å¦ä¸ä¸ªåæ ç¹
			@@ -55,5 +101,16 @@
			coors_GD.push(p);
			}
			return coors_GD;
			},

			convertFromGPS: function (gps, callback) {
			var coor = _prepare4convert(gps);
			_convertLatlng(0, coor, [], function (result) {
			var gd = [];
			result.forEach((r) => {
			gd.push([r.lng, r.lat]);
			});
			callback(gd);
			});
			}
			};

			@@ -1,22 +1,44 @@
			<template>
			<div class="fy-container">
			<FactorRadio @change="(e) => (factorType = e)"></FactorRadio>
			<SearchBar></SearchBar>
			<el-row justify="center">
			<SearchBar search-time="" @search="fetchHistroyData"></SearchBar>
			</el-row>
			<FactorRadio
			:device-type="deviceType"
			@change="(e) => (factorType = e)"
			></FactorRadio>
			</div>
			</template>

			<script>
			import Layer from '@/utils/map/3dLayer';
			import marks from '@/utils/map/marks';
			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';

			export default {
			name: 'HistoryPage',
			setup() {
			const { loading, fetchData } = useFetchData(10000);
			return { loading, fetchData };
			},
			data() {
			return {
			factorType: '',
			factorDatas: [],
			// çæµè®¾å¤ç±»å
			deviceType: TYPE0,
			// çæµå åçç±»åç¼å·
			factorType: '1',
			// çæµæ°æ®
			factorDatas: new FactorDatas(),
			// å³å®ç»å¶3Då¾å½¢æ¶æ¯å¦ä¸åå¾ååå¹¶
			merge: false,
			setCenter: true
			// å³å®ç»å¶å®3Då¾å½¢åå°å¾è§è§æ¯å¦èªå¨åä¸
			setCenter: true,
			// ç»å¶æ¨¡å¼ï¼0ï¼èªå¨æ¨¡å¼ï¼èªå¨è®¡ç®å½åæ°æ®çèå´ï¼ç»å¶åéçæ¯ä¾ï¼1ï¼æå¨æ¨¡å¼ï¼æ ¹æ®é¡µé¢è®¾ç½®çç»å¾èå´è¿è¡ç»å¶
			drawMode: 0,
			searchTime: []
			};
			},
			watch: {
			@@ -28,6 +50,7 @@
			},
			methods: {
			draw() {
			// todo å·æ°å¾ä¾
			const factor = this.factorDatas.factor[this.factorType];
			this.drawRoadMap(factor);
			this.drawMassMarks(factor);
			@@ -54,12 +77,62 @@
			// 4. è¡¨æ ¼æ°æ®è·³è½¬å®ä½
			// Table.locate(i);
			});
			},
			onFetchData(type, data) {
			// todo æ ¹æ®è®¾å¤ç±»ååæ¢å°å¾çæµå åå±ç¤ºåéæ¡ãæçº¿å¾å¤éæ¡ãæ°æ®è¡¨æ ¼å¤éæ¡çå åç±»å
			this.deviceType = type;
			this.factorDatas.setData(data, this.drawMode, () => {
			this.factorDatas.refreshHeight(this.factorType);
			this.draw();
			});
			},
			fetchHistroyData(option) {
			const { deviceCode, type, timeArray } = option;
			let startTime, endTime;
			if (timeArray && timeArray.length == 2) {
			startTime = moment(timeArray[0]).format('YYYY-MM-DD HH:mm:ss');
			endTime = moment(timeArray[1]).format('YYYY-MM-DD HH:mm:ss');
			}
			this.fetchData((page, pageSize) => {
			return monitorDataApi
			.fetchHistroyData({
			deviceCode,
			startTime,
			endTime,
			type,
			page,
			perPage: pageSize
			})
			.then((res) => this.onFetchData(type, res.data));
			});
			},
			fetchRealTimeData() {
			// fixme 2024.5.3 æ¤å¤åå§è·åçæ°æ®ï¼åæ°åºè¯¥ç±searchbarå³å®ï¼åç»ä¿®æ¹
			this.fetchData((page, pageSize) => {
			return monitorDataApi
			.fetchHistroyData({
			deviceCode: '0a0000000001',
			// type: TYPE0,
			page,
			perPage: 100
			})
			.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);
			this.searchTime = [s, e];
			}
			this.onFetchData(TYPE0, res.data);
			});
			});
			}
			},
			mounted() {
			this.fetchRealTimeData();
			}
			};
			</script>
			<style scoped>
			.fy-container {
			background-color: antiquewhite;
			}
			</style>

			@@ -34,6 +34,7 @@
			preprocessorOptions: {
			scss: {
			additionalData: `@use "@/styles/index.scss" as *;`
			// additionalData: '@import "@/styles/index.scss";'
			}
			}
			},