fix:热力图播放

quanyawei

2023-12-20 7ce6f4361b22ff88f863ad5293c37d9e8bff0c7d

fix:热力图播放

 .gitignore

New file
@@ -0,0 +1,2 @@
node_modules
request

 package-lock.json

@@ -2088,6 +2088,19 @@
            "text-table": "~0.2.0"
          }
        },
        "eslint-loader": {
          "version": "2.2.1",
          "resolved": "https://registry.npmmirror.com/eslint-loader/-/eslint-loader-2.2.1.tgz",
          "integrity": "sha512-RLgV9hoCVsMLvOxCuNjdqOrUqIj9oJg8hF44vzJaYqsAHuY9G2YAeN3joQ9nxP0p5Th9iFSIpKo+SD8KISxXRg==",
          "dev": true,
          "requires": {
            "loader-fs-cache": "^1.0.0",
            "loader-utils": "^1.0.2",
            "object-assign": "^4.0.1",
            "object-hash": "^1.1.4",
            "rimraf": "^2.6.1"
          }
        },
        "eslint-plugin-vue": {
          "version": "4.7.1",
          "resolved": "https://registry.npm.taobao.org/eslint-plugin-vue/download/eslint-plugin-vue-4.7.1.tgz",
@@ -4717,6 +4730,11 @@
        }
      }
    },
    "base64-arraybuffer": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz",
      "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="
    },
    "base64-js": {
      "version": "1.5.1",
      "resolved": "https://registry.npm.taobao.org/base64-js/download/base64-js-1.5.1.tgz",
@@ -5575,6 +5593,12 @@
        "q": "^1.1.2"
      }
    },
    "coalescy": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/coalescy/-/coalescy-1.0.0.tgz",
      "integrity": "sha512-OmRR46eVfyaXZYI7Ai5/vnLHjWhhh99sugx+UTsmVhwaYzARb+Tcdit59/HkVxF8KdqJG5NN8ClUhzQXS3Hh+w==",
      "dev": true
    },
    "code-point-at": {
      "version": "1.1.0",
      "resolved": "https://registry.npm.taobao.org/code-point-at/download/code-point-at-1.1.0.tgz",
@@ -6226,6 +6250,14 @@
      "requires": {
        "postcss": "^7.0.1",
        "timsort": "^0.3.0"
      }
    },
    "css-line-break": {
      "version": "2.1.0",
      "resolved": "https://registry.npmmirror.com/css-line-break/-/css-line-break-2.1.0.tgz",
      "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==",
      "requires": {
        "utrie": "^1.0.2"
      }
    },
    "css-loader": {
@@ -7797,6 +7829,61 @@
      "integrity": "sha512-UkFojTV1o0GOe1edOEiuI5ccYLJSuNngtqSeClNzhsmG8KPJ+7mRxgtp2oYhqZAK/brlXMoCd+VgXViE0AfyKw==",
      "dev": true
    },
    "eslint-friendly-formatter": {
      "version": "3.0.0",
      "resolved": "https://registry.npmmirror.com/eslint-friendly-formatter/-/eslint-friendly-formatter-3.0.0.tgz",
      "integrity": "sha512-QJnemSH+g5i9yxQQNGQo1yM6VPR1PdNVIE8krQTNdTf3MDg9D22At/BfZpTPRkCdWEtiFCTZnZUOKTPNufqOYw==",
      "dev": true,
      "requires": {
        "chalk": "^1.0.0",
        "coalescy": "1.0.0",
        "extend": "^3.0.0",
        "minimist": "^1.2.0",
        "text-table": "^0.2.0"
      },
      "dependencies": {
        "ansi-regex": {
          "version": "2.1.1",
          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-2.1.1.tgz",
          "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA==",
          "dev": true
        },
        "ansi-styles": {
          "version": "2.2.1",
          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-2.2.1.tgz",
          "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA==",
          "dev": true
        },
        "chalk": {
          "version": "1.1.3",
          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-1.1.3.tgz",
          "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
          "dev": true,
          "requires": {
            "ansi-styles": "^2.2.1",
            "escape-string-regexp": "^1.0.2",
            "has-ansi": "^2.0.0",
            "strip-ansi": "^3.0.0",
            "supports-color": "^2.0.0"
          }
        },
        "strip-ansi": {
          "version": "3.0.1",
          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-3.0.1.tgz",
          "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
          "dev": true,
          "requires": {
            "ansi-regex": "^2.0.0"
          }
        },
        "supports-color": {
          "version": "2.0.0",
          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-2.0.0.tgz",
          "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g==",
          "dev": true
        }
      }
    },
    "eslint-import-resolver-node": {
      "version": "0.3.9",
      "resolved": "https://registry.npmmirror.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
@@ -7837,9 +7924,9 @@
      }
    },
    "eslint-loader": {
      "version": "2.2.1",
      "resolved": "https://registry.npm.taobao.org/eslint-loader/download/eslint-loader-2.2.1.tgz",
      "integrity": "sha1-KLnBLaVAV68IReKmEScBova/gzc=",
      "version": "1.9.0",
      "resolved": "https://registry.npmmirror.com/eslint-loader/-/eslint-loader-1.9.0.tgz",
      "integrity": "sha512-40aN976qSNPyb9ejTqjEthZITpls1SVKtwguahmH1dzGCwQU/vySE+xX33VZmD8csU0ahVNCtFlsPgKqRBiqgg==",
      "dev": true,
      "requires": {
        "loader-fs-cache": "^1.0.0",
@@ -10152,6 +10239,15 @@
            "object.getownpropertydescriptors": "^2.0.3"
          }
        }
      }
    },
    "html2canvas": {
      "version": "1.4.1",
      "resolved": "https://registry.npmmirror.com/html2canvas/-/html2canvas-1.4.1.tgz",
      "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==",
      "requires": {
        "css-line-break": "^2.1.0",
        "text-segmentation": "^1.0.3"
      }
    },
    "htmlparser2": {
@@ -12729,8 +12825,8 @@
    },
    "loader-fs-cache": {
      "version": "1.0.3",
      "resolved": "https://registry.npm.taobao.org/loader-fs-cache/download/loader-fs-cache-1.0.3.tgz",
      "integrity": "sha1-8IZXZG1gcHi+LwoDL4vWndbyd9k=",
      "resolved": "https://registry.npmmirror.com/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
      "integrity": "sha512-ldcgZpjNJj71n+2Mf6yetz+c9bM4xpKtNds4LbqXzU/PTdeAX0g3ytnU1AJMEcTk2Lex4Smpe3Q/eCTsvUBxbA==",
      "dev": true,
      "requires": {
        "find-cache-dir": "^0.1.1",
@@ -12739,8 +12835,8 @@
      "dependencies": {
        "find-cache-dir": {
          "version": "0.1.1",
          "resolved": "https://registry.npm.taobao.org/find-cache-dir/download/find-cache-dir-0.1.1.tgz",
          "integrity": "sha1-yN765XyKUqinhPnjHFfHQumToLk=",
          "resolved": "https://registry.npmmirror.com/find-cache-dir/-/find-cache-dir-0.1.1.tgz",
          "integrity": "sha512-Z9XSBoNE7xQiV6MSgPuCfyMokH2K7JdpRkOYE1+mu3d4BFJtx3GW+f6Bo4q8IX6rlf5MYbLBKW0pjl2cWdkm2A==",
          "dev": true,
          "requires": {
            "commondir": "^1.0.1",
@@ -12750,8 +12846,8 @@
        },
        "find-up": {
          "version": "1.1.2",
          "resolved": "https://registry.npm.taobao.org/find-up/download/find-up-1.1.2.tgz?cache=0&sync_timestamp=1597170240264&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffind-up%2Fdownload%2Ffind-up-1.1.2.tgz",
          "integrity": "sha1-ay6YIrGizgpgq2TWEOzK1TyyTQ8=",
          "resolved": "https://registry.npmmirror.com/find-up/-/find-up-1.1.2.tgz",
          "integrity": "sha512-jvElSjyuo4EMQGoTwo1uJU5pQMwTW5lS1x05zzfJuTIyLR3zwO27LYrxNg+dlvKpGOuGy/MzBdXh80g0ve5+HA==",
          "dev": true,
          "requires": {
            "path-exists": "^2.0.0",
@@ -12760,8 +12856,8 @@
        },
        "path-exists": {
          "version": "2.1.0",
          "resolved": "https://registry.npm.taobao.org/path-exists/download/path-exists-2.1.0.tgz",
          "integrity": "sha1-D+tsZPD8UY2adU3V77YscCJ2H0s=",
          "resolved": "https://registry.npmmirror.com/path-exists/-/path-exists-2.1.0.tgz",
          "integrity": "sha512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ==",
          "dev": true,
          "requires": {
            "pinkie-promise": "^2.0.0"
@@ -12769,8 +12865,8 @@
        },
        "pkg-dir": {
          "version": "1.0.0",
          "resolved": "https://registry.npm.taobao.org/pkg-dir/download/pkg-dir-1.0.0.tgz?cache=0&sync_timestamp=1602858957553&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpkg-dir%2Fdownload%2Fpkg-dir-1.0.0.tgz",
          "integrity": "sha1-ektQio1bstYp1EcFb/TpyTFM89Q=",
          "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-1.0.0.tgz",
          "integrity": "sha512-c6pv3OE78mcZ92ckebVDqg0aWSoKhOTbwCV6qbCWMk546mAL9pZln0+QsN/yQ7fkucd4+yJPLrCBXNt8Ruk+Eg==",
          "dev": true,
          "requires": {
            "find-up": "^1.0.0"
@@ -15672,8 +15768,8 @@
    },
    "object-hash": {
      "version": "1.3.1",
      "resolved": "https://registry.npm.taobao.org/object-hash/download/object-hash-1.3.1.tgz?cache=0&sync_timestamp=1608924025400&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fobject-hash%2Fdownload%2Fobject-hash-1.3.1.tgz",
      "integrity": "sha1-/eRSCYqVHLFF8Dm7fUVUSd3BJt8=",
      "resolved": "https://registry.npmmirror.com/object-hash/-/object-hash-1.3.1.tgz",
      "integrity": "sha512-OSuu/pU4ENM9kmREg0BdNrUDIl1heYa4mBZacJc+vVWz4GtAwu7jO8s4AIt2aGRUTqxykpWzI3Oqnsm13tTMDA==",
      "dev": true
    },
    "object-inspect": {
@@ -20489,6 +20585,14 @@
        }
      }
    },
    "text-segmentation": {
      "version": "1.0.3",
      "resolved": "https://registry.npmmirror.com/text-segmentation/-/text-segmentation-1.0.3.tgz",
      "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==",
      "requires": {
        "utrie": "^1.0.2"
      }
    },
    "text-table": {
      "version": "0.2.0",
      "resolved": "https://registry.npm.taobao.org/text-table/download/text-table-0.2.0.tgz",
@@ -21201,6 +21305,14 @@
      "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=",
      "dev": true
    },
    "utrie": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/utrie/-/utrie-1.0.2.tgz",
      "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==",
      "requires": {
        "base64-arraybuffer": "^1.0.2"
      }
    },
    "uuid": {
      "version": "3.4.0",
      "resolved": "https://registry.npm.taobao.org/uuid/download/uuid-3.4.0.tgz?cache=0&sync_timestamp=1607460052228&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fuuid%2Fdownload%2Fuuid-3.4.0.tgz",

 package.json

@@ -28,6 +28,7 @@
    "element-ui": "^2.15.5",
    "esri-leaflet": "^3.0.7",
    "file-saver": "^2.0.5",
    "html2canvas": "^1.4.1",
    "image-size": "^1.0.2",
    "jquery": "^3.5.1",
    "js-cookie": "2.2.0",

 src/components/Wind/Map.vue

@@ -5,7 +5,12 @@
    element-loading-text="请稍等"

    element-loading-background="rgba(0, 0, 0, 0.6)"

  >

    <div v-if="noneData" class="noneData">当前区域设备没有风场</div>

    <div

      v-if="noneData"

      class="noneData"

    >

      当前区域设备没有风场

    </div>

    <div class="top">

      <span

        v-for="(item, index) in params"

@@ -13,8 +18,7 @@
        class="left"

        :class="{ click: changeColor === index }"

        @click="change(index)"

        >{{ item }}</span

      >

      >{{ item }}</span>

      <!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->

      <span class="right">{{ times }}秒</span>

      <span class="dropDown">

@@ -23,13 +27,24 @@
          :src="require('@/assets/images/regionalOverview/realTimeImg.png')"

          alt=""

          @click="turnState"

        />

        >

        <span class="text_Time">{{ dateFormat }}</span>

        <img class="drop-icon" :src="turnImg" alt="" @click="turnState" />

        <img

          class="drop-icon"

          :src="turnImg"

          alt=""

          @click="turnState"

        >

      </span>

    </div>

    <div class="topDate" style="height: 60px">

      <div id="eventPro" class="jdt">

    <div

      class="topDate"

      style="height: 60px"

    >

      <div

        id="eventPro"

        class="jdt"

      >

        <div class="mouseDiv">

          <span class="inText" />

          <div class="sjDiv" />

@@ -111,7 +126,10 @@
        <li />

        <li />

      </div>

      <div class="timeDiv" style="position: relative">

      <div

        class="timeDiv"

        style="position: relative"

      >

        <ul id="timeUl">

          <li style="width: 0.83%" />

          <li />

@@ -225,7 +243,11 @@
        </div>

      </div>

    </div>

    <regional-overview :key="timerKey" :map="map" :show-flag="showOrHidden" />

    <regional-overview

      :key="timerKey"

      :map="map"

      :show-flag="showOrHidden"

    />

    <div

      :style="{ background: 'url(' + bg + ') no-repeat' }"

      class="buttom-left"

@@ -248,7 +270,10 @@
            end-placeholder="结束日期"

            value-format="yyyy-MM-dd"

          />

          <el-select v-model="factorValue" placeholder="选择因子">

          <el-select

            v-model="factorValue"

            placeholder="选择因子"

          >

            <el-option

              v-for="item in factorOptions"

              :key="item.value"

@@ -256,7 +281,10 @@
              :value="item.value"

            />

          </el-select>

          <el-select v-model="alartValue" placeholder="选择报警类型">

          <el-select

            v-model="alartValue"

            placeholder="选择报警类型"

          >

            <el-option

              v-for="item in alertOptions"

              :key="item.value"

@@ -264,7 +292,10 @@
              :value="item.value"

            />

          </el-select>

          <el-button type="primary" @click="alertData(PageSize, currentPage)">

          <el-button

            type="primary"

            @click="alertData(PageSize, currentPage)"

          >

            查询

          </el-button>

        </div>

@@ -284,8 +315,16 @@
          width="50"

          align="center"

        />

        <el-table-column property="alarm_time" label="报警时间" width="150" />

        <el-table-column property="deviceName" label="站点名称" width="200" />

        <el-table-column

          property="alarm_time"

          label="报警时间"

          width="150"

        />

        <el-table-column

          property="deviceName"

          label="站点名称"

          width="200"

        />

        <el-table-column

          property="index"

          label="因子"

@@ -313,8 +352,14 @@
        @size-change="handleSizeChange"

        @current-change="handleCurrentChange"

      />

      <div slot="footer" class="dialog-footer">

        <el-button size="mini" @click="alarmTableVisible = false">

      <div

        slot="footer"

        class="dialog-footer"

      >

        <el-button

          size="mini"

          @click="alarmTableVisible = false"

        >

          关 闭

        </el-button>

      </div>

@@ -333,7 +378,7 @@
import { WWindUtil } from '@/components/Wind/WRatingArr.js'

import RegionalOverview from '@/components/Wind/RegionalOverview' // 实时监控组件

import { mapGetters } from 'vuex'

import { gcj02towgs84 } from '@/assets/json/transform'

// import { gcj02towgs84 } from '@/assets/json/transform'

export default {

  components: { RegionalOverview },

  props: {

@@ -342,7 +387,7 @@
    jingdu: Number,

    monitorPointId: Number,

    monitorPointIds: Array,

    defaultData: Array,

    defaultData: Array

  },

  data () {

    return {

@@ -393,70 +438,70 @@
      factorOptions: [

        {

          label: '全部因子',

          value: 'all',

          value: 'all'

        },

        {

          label: 'PM10',

          value: 'PM10',

          value: 'PM10'

        },

        {

          label: 'PM2.5',

          value: 'PM2.5',

          value: 'PM2.5'

        },

        {

          label: 'SO2',

          value: 'SO2',

          value: 'SO2'

        },

        {

          label: 'NO2',

          value: 'NO2',

          value: 'NO2'

        },

        {

          label: 'CO',

          value: 'CO',

          value: 'CO'

        },

        {

          label: 'O3',

          value: 'O3',

        },

          value: 'O3'

        }

      ],

      alertOptions: [

        {

          label: '全部报警类型',

          value: 'all',

          value: 'all'

        },

        {

          label: '超限',

          value: 'overrun',

          value: 'overrun'

        },

        {

          label: '突然高',

          value: 'sudden',

          value: 'sudden'

        },

        {

          label: '超过国控站点100%',

          value: 'state100',

          value: 'state100'

        },

        {

          label: '超过国控站点150%',

          value: 'state150',

          value: 'state150'

        },

        {

          label: '超过国控站点250%',

          value: 'state250',

          value: 'state250'

        },

        {

          label: '超过市区均值100%',

          value: 'city100',

          value: 'city100'

        },

        {

          label: '超过市区均值150%',

          value: 'city150',

          value: 'city150'

        },

        {

          label: '超过市区均值250%',

          value: 'city250',

        },

          value: 'city250'

        }

      ],

      currentDate: '',

      turnImg: require('@/assets/images/regionalOverview/dropDown.png'),

@@ -476,7 +521,7 @@
    }

  },

  computed: {

    ...mapGetters(['regionCode']),

    ...mapGetters(['regionCode'])

  },

  watch: {

    dateValue (n, o) {

@@ -489,13 +534,14 @@
      this.$nextTick(() => {

        this.canvasWind(newCode)

      })

    },

    }

  },

  mounted () {

    this.currentHour()

    this.$Bus.$on(

      'alarmTableVisible',

      (res) => (

      res => (

        // eslint-disable-next-line no-sequences

        (this.alarmTableVisible = res),

        this.alertData(this.PageSize, this.currentPage)

      )

@@ -531,8 +577,7 @@
  methods: {

    // 拿到某天的日期和星期

    getDayXQ (day) {

      var days = new Date()

        .getDay() // 星期

      var days = new Date().getDay() // 星期

      var rq = '' // 日期

      if (day === 'today') {

        rq = this.newData(0)

@@ -603,7 +648,7 @@
      p1.innerHTML = this.getDayXQ('beforeYea')

      var greenInfo = 0

      var that = this

      ul.onclick = (e) => {

      ul.onclick = e => {

        var target = e.target

        if (target.tagName.toLowerCase() === 'li') {

          // 给所有的li颜色设为初始值

@@ -641,7 +686,7 @@
        that.getParamsData(true)

      }

      // timeUl绑定点击事件

      timeUl.onclick = (e) => {

      timeUl.onclick = e => {

        // 给所有的li颜色设为初始值

        var target = e.target

        if (target.tagName.toLowerCase() === 'li') {

@@ -676,7 +721,6 @@
              lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'

            }

          }



        }

        that.times = 1

        that.getParamsData(true)

@@ -766,9 +810,8 @@
          // 卸载之前的风场图层

          if (

            !layer._container &&

            ('' + $(layer._container)

              .attr('class')).replace(/\s/g, '') !==

            'leaflet-layer'

            ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==

              'leaflet-layer'

          ) {

            layer.remove()

          }

@@ -782,12 +825,11 @@
          organizationId: this.$store.state.orgId,

          regionCode: this.$store.state.regionCode,

          chooseTime: this.chooseTime,

          time: this.nyr,

        },

          time: this.nyr

        }

      }).then(data => {

        this.markDeviceSite(data)

      })

        .then((data) => {

          this.markDeviceSite(data)

        })

    },

    // 标记设备点

    markDeviceSite (data) {

@@ -795,10 +837,8 @@
      this.keyData = data.data.devices

      // 遍历国控站位置

      // this.stateControlStation()

      var groupIcon = L.layerGroup()

        .addTo(this.map)

      var groupText = L.layerGroup()

        .addTo(this.map)

      var groupIcon = L.layerGroup().addTo(this.map)

      var groupText = L.layerGroup().addTo(this.map)

      this.keys = []

      for (let i = 0; i < keyData.length; i++) {

        if (keyData[i].a34002) {

@@ -808,16 +848,13 @@
        } else if (keyData[i].a21026) {

          this.keys.push(Math.floor(JSON.parse(keyData[i].a21026)))

        } else if (keyData[i].a21004) {

          this.keys.push(Math.floor(JSON.parse(keyData[i].a21004)

            .toFixed(0)))

          this.keys.push(Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)))

        } else if (keyData[i].a21005) {

          this.keys.push(JSON.parse(keyData[i].a21005)

            .toFixed(3))

          this.keys.push(JSON.parse(keyData[i].a21005).toFixed(3))

        } else if (keyData[i].a05024) {

          this.keys.push(Math.floor(JSON.parse(keyData[i].a05024)))

        } else if (keyData[i].a99054) {

          this.keys.push(JSON.parse(keyData[i].a99054)

            .toFixed(3))

          this.keys.push(JSON.parse(keyData[i].a99054).toFixed(3))

        } else {

          // for (let j = 0; j < keyData.length; j++) {

          this.keys.push(JSON.parse('null'))

@@ -830,7 +867,7 @@
        // 对比各个key中的标准数据，标记展示不同的颜色

        var colorNum = 7

        if (keyData[i].a34002) {

          var data = Math.floor(JSON.parse(keyData[i].a34002))

          let data = Math.floor(JSON.parse(keyData[i].a34002))

          switch (true) {

            case data < 0: {

              colorNum = 7

@@ -868,7 +905,7 @@
              break

          }

        } else if (keyData[i].a34004) {

          var data = Math.floor(JSON.parse(keyData[i].a34004))

          let data = Math.floor(JSON.parse(keyData[i].a34004))

          switch (true) {

            case data < 0: {

              colorNum = 7

@@ -906,7 +943,7 @@
              break

          }

        } else if (keyData[i].a21026) {

          var data = Math.floor(JSON.parse(keyData[i].a21026))

          let data = Math.floor(JSON.parse(keyData[i].a21026))

          switch (true) {

            case data < 0: {

              colorNum = 7

@@ -944,9 +981,8 @@
              break

          }

        } else if (keyData[i].a21004) {

          var data = Math.floor(

            Math.floor(JSON.parse(keyData[i].a21004)

              .toFixed(0))

          let data = Math.floor(

            Math.floor(JSON.parse(keyData[i].a21004).toFixed(0))

          )

          switch (true) {

            case data < 0: {

@@ -985,8 +1021,7 @@
              break

          }

        } else if (keyData[i].a21005) {

          var data = JSON.parse(keyData[i].a21005)

            .toFixed(3)

          let data = JSON.parse(keyData[i].a21005).toFixed(3)

          switch (true) {

            case data < 0: {

              colorNum = 7

@@ -1024,7 +1059,7 @@
              break

          }

        } else if (keyData[i].a05024) {

          var data = Math.floor(JSON.parse(keyData[i].a05024))

          let data = Math.floor(JSON.parse(keyData[i].a05024))

          switch (true) {

            case data < 0: {

              colorNum = 7

@@ -1062,8 +1097,7 @@
              break

          }

        } else if (keyData[i].a99054) {

          var data = JSON.parse(keyData[i].a99054)

            .toFixed(3)

          let data = JSON.parse(keyData[i].a99054).toFixed(3)

          switch (true) {

            case data < 0: {

              colorNum = 7

@@ -1107,19 +1141,19 @@
          // iconUrl: require('@/assets/icon/ico2.png'),

          iconSize: [60, 60],

          iconAnchor: [30, 48],

          className: 'my-device',

          className: 'my-device'

        })



        // 添加标记到地图

        const iconMarker = L.marker([lat, lng], {

          icon: blueIcon,

          icon: blueIcon

        })

        groupIcon.addLayer(iconMarker)

        var myIcon = L.divIcon({

          html: this.keys[i],

          className: 'my-div-icon',

          iconSize: [60, 60],

          iconAnchor: [40, 40],

          iconAnchor: [40, 40]

        })



        const TexteMarker = L.marker([lat, lng], { icon: myIcon })

@@ -1145,17 +1179,18 @@
      let bgColorList = {

        pm25colorbg: '',

        pm10colorbg: '',

        so2colorbg: '', //二氧化硫

        no210colorbg: '', //二氧化氮

        cocolorbg: '', //一氧化碳

        o3colorbg: '', //臭氧

        tvoccolorbg: '', //TVOC

        so2colorbg: '', // 二氧化硫

        no210colorbg: '', // 二氧化氮

        cocolorbg: '', // 一氧化碳

        o3colorbg: '', // 臭氧

        tvoccolorbg: '' // TVOC

      }



      let data = ''

      // eslint-disable-next-line no-unused-vars

      for (let i in keyName) {

        if (i === 'a34002') {

          data = Math.floor(JSON.parse(keyName.a34002))

          data = Math.floor(JSON.parse(keyName.a34002) || 0)

          switch (true) {

            case data < 0: {

              bgColorList.pm10colorbg = '#999999'

@@ -1193,7 +1228,7 @@
              break

          }

        } else if (i === 'a34004') {

          data = Math.floor(JSON.parse(keyName.a34004))

          data = Math.floor(JSON.parse(keyName.a34004) || 0)

          switch (true) {

            case data < 0: {

              bgColorList.pm25colorbg = '#999999'

@@ -1231,7 +1266,7 @@
              break

          }

        } else if (i === 'a21026') {

          data = Math.floor(JSON.parse(keyName.a21026))

          data = Math.floor(JSON.parse(keyName.a21026) || 0)

          switch (true) {

            case data < 0: {

              bgColorList.so2colorbg = '#999999'

@@ -1269,8 +1304,9 @@
              break

          }

        } else if (i === 'a21004') {

          data = Math.floor(Math.floor(JSON.parse(keyName.a21004)

            .toFixed(0)))

          data = Math.floor(

            Math.floor(JSON.parse(keyName.a21004 || 0).toFixed(0))

          )

          switch (true) {

            case data < 0: {

              bgColorList.no210colorbg = '#999999'

@@ -1308,8 +1344,7 @@
              break

          }

        } else if (i === 'a21005') {

          data = JSON.parse(keyName.a21005)

            .toFixed(3)

          data = JSON.parse(keyName.a21005 || 0).toFixed(3)

          switch (true) {

            case data < 0: {

              bgColorList.cocolorbg = '#999999'

@@ -1347,7 +1382,7 @@
              break

          }

        } else if (i === 'a05024') {

          data = Math.floor(JSON.parse(keyName.a05024))

          data = Math.floor(JSON.parse(keyName.a05024) || 0)

          switch (true) {

            case data < 0: {

              bgColorList.o3colorbg = '#999999'

@@ -1385,8 +1420,7 @@
              break

          }

        } else if (i === 'a99054') {

          data = JSON.parse(keyName.a99054)

            .toFixed(3)

          data = JSON.parse(keyName.a99054 || 0).toFixed(3)

          switch (true) {

            case data < 0: {

              bgColorList.tvoccolorbg = '#999999'

@@ -1471,28 +1505,41 @@
        params: {

          mac: data.mac,

          chooseTime: this.chooseTime,

          time: this.nyr,

        },

          time: this.nyr

        }

      })

        .then((res) => {

        .then(res => {

          if (res.message === '操作目标不存在') {

            var datafalse = '暂无五分钟数据'

            marker.bindPopup(datafalse)

              .openPopup()

            marker.bindPopup(datafalse).openPopup()

            return

          }

          this.childerItem.name = res.data.name

          let colorliststyleBgColor = this.styleBgColor(res.data)

          console.log('colorliststyleBgColor', colorliststyleBgColor)

          let deviceDetails = res.data

          let deviceDetails = _.cloneDeep(res.data)

          // eslint-disable-next-line no-unused-vars

          for (let key in deviceDetails) {

            if (deviceDetails[key] === null) {

              deviceDetails[key] = '-'

            }

          }

          console.log('deviceDetails', deviceDetails)

          let windTip = 'inline'

          let windDeg = 0

          let windDir = ''

          let dushu = deviceDetails.a01008 === '-' ? '-' : JSON.parse(deviceDetails.a01008)

            .toFixed(0)

          let levelNumber = deviceDetails.a01007 === '-' ? '0.0' : Number(deviceDetails.a01007)

            .toFixed(1)

          let level = deviceDetails.a01007 === '0.0' ? '-' : WWindUtil.WindtoLevel(levelNumber).name

          let dushu =

            deviceDetails.a01008 === '-'

              ? '-'

              : JSON.parse(deviceDetails.a01008).toFixed(0)

          let levelNumber =

            deviceDetails.a01007 === '-'

              ? '0.0'

              : Number(deviceDetails.a01007).toFixed(1)

          let level =

            deviceDetails.a01007 === '0.0'

              ? '-'

              : WWindUtil.WindtoLevel(levelNumber).name

          console.log('level', level)

          if (deviceDetails.a01008) {

            var windDirs = dushu === '-' ? 0 : Number(dushu)

@@ -1526,6 +1573,7 @@
            }

          }

          // 请求数据更新弹框内容

          let htmlClassName = 'mypopup'

          let html = ` <div data-reactroot="" class="marker_maptip">

          <div class="marker_title_1nQ">

            <span style='color:#66b1ff;cursor: pointer;' onclick='deviceDetail()'>设备详情</span>

@@ -1538,8 +1586,9 @@
            <div class="marker_indexpart_2UI">

              <div

                class="marker_indexname_3TP"

                style="color: black;background:${colorliststyleBgColor.tvoccolorbg

            }"

                style="color: black;background:${

  colorliststyleBgColor.tvoccolorbg

}"

              >

                TVOC

              </div>

@@ -1552,8 +1601,9 @@
            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black;background:${colorliststyleBgColor.pm25colorbg

            } "

                style="color: black;background:${

  colorliststyleBgColor.pm25colorbg

} "

              >

                PM2.5

              </div>

@@ -1564,8 +1614,9 @@
            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black;background:${colorliststyleBgColor.pm10colorbg

            }"

                style="color: black;background:${

  colorliststyleBgColor.pm10colorbg

}"

              >

                PM10

              </div>

@@ -1576,8 +1627,9 @@
            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black;background:${colorliststyleBgColor.so2colorbg

            }"

                style="color: black;background:${

  colorliststyleBgColor.so2colorbg

}"

              >

                SO2

              </div>

@@ -1588,8 +1640,9 @@
            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black;background:${colorliststyleBgColor.no210colorbg

            }"

                style="color: black;background:${

  colorliststyleBgColor.no210colorbg

}"

              >

                NO2

              </div>

@@ -1600,8 +1653,7 @@
            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black;background:${colorliststyleBgColor.cocolorbg

            }"

                style="color: black;background:${colorliststyleBgColor.cocolorbg}"

              >

                CO

              </div>

@@ -1612,8 +1664,7 @@
            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black; background:${colorliststyleBgColor.o3colorbg

            }"

                style="color: black; background:${colorliststyleBgColor.o3colorbg}"

              >

                O3

              </div>

@@ -1630,47 +1681,138 @@
              >

            </div>

            <div class='windInfor'>

              <div>风向: ${windDir} ( ${dushu} ° )</div>

              <div v-if="false">风向: ${windDir} ( ${dushu} ° )</div>

              <div>风速: ${levelNumber} m/s</div>

              <div>等级: ${level}</div>

            </div>

          </div>

         

        </div>`

          marker.bindPopup(html, { className: 'mypopup' })

            .openPopup()

          if (deviceDetails.a01007 === '-' && deviceDetails.a01008 === '-') {

            htmlClassName = 'mypopupNoWind'

            html = ` <div data-reactroot="" class="marker_maptip">

          <div class="marker_title_1nQ">

            <span style='color:#66b1ff;cursor: pointer;' onclick='deviceDetail()'>设备详情</span>

          </div>

          <div class="marker_firstline_2WH">

            <div class="marker_citypart_keg">

              <div class="marker_name_small_1VU">${deviceDetails.name}</div>

              <div class="marker_time_w5m">${deviceDetails.dataTime}</div>

            </div>

            <div class="marker_indexpart_2UI">

              <div

                class="marker_indexname_3TP"

                style="color: black;background:${colorliststyleBgColor.tvoccolorbg}"

              >

                TVOC

              </div>

              <div class="marker_indexvalue_1O7">

                ${this.handleCutZero(deviceDetails.a99054)}

              </div>

            </div>

          </div>

          <div class="marker_secondline_2Om">

            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black;background:${colorliststyleBgColor.pm25colorbg} "

              >

                PM2.5

              </div>

              <div class="marker_itemvalue_1l1">

                 ${this.handleCutZero(deviceDetails.a34004)}

              </div>

            </div>

            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black;background:${colorliststyleBgColor.pm10colorbg}"

              >

                PM10

              </div>

              <div class="marker_itemvalue_1l1">

                 ${this.handleCutZero(deviceDetails.a34002)}

              </div>

            </div>

            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black;background:${colorliststyleBgColor.so2colorbg}"

              >

                SO2

              </div>

              <div class="marker_itemvalue_1l1">

                   ${this.handleCutZero(deviceDetails.a21026)}

              </div>

            </div>

            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black;background:${colorliststyleBgColor.no210colorbg}"

              >

                NO2

              </div>

              <div class="marker_itemvalue_1l1">

                ${this.handleCutZero(deviceDetails.a21004)}

              </div>

            </div>

            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black;background:${colorliststyleBgColor.cocolorbg}"

              >

                CO

              </div>

              <div class="marker_itemvalue_1l1">

                ${this.handleCutZero(deviceDetails.a21005)}

              </div>

            </div>

            <div class="marker_item_2Kk">

              <div

                class="marker_itemname_Wq5"

                style="color: black; background:${colorliststyleBgColor.o3colorbg}"

              >

                O3

              </div>

              <div class="marker_itemvalue_1l1">

                 ${this.handleCutZero(deviceDetails.a05024)}

              </div>

            </div>

          </div>        
        </div>`

          }

          marker.bindPopup(html, { className: htmlClassName }).openPopup()

        })

        .catch((err) => {

        .catch(err => {

          console.log(err)

        })

    },

    handleCutZero (data) {



      let num = data.substring(0, data.indexOf(".") + 4);

      //拷贝一份 返回去掉零的新串

      let num = data.substring(0, data.indexOf('.') + 4)

      // 拷贝一份 返回去掉零的新串

      // let num = Number(data).toFixed(3).toString()

      let newstr = num

      //循环变量 小数部分长度

      // 循环变量 小数部分长度

      let leng = num.length - num.indexOf('.') - 1

      //判断是否有效数

      // 判断是否有效数

      if (num.indexOf('.') > -1) {

        //循环小数部分

        // 循环小数部分

        for (let i = leng; i > 0; i--) {

          //如果newstr末尾有0

          // 如果newstr末尾有0

          if (

            newstr.lastIndexOf('0') > -1 &&

            newstr.substr(newstr.length - 1, 1) === 0

          ) {

            let k = newstr.lastIndexOf('0')

            //如果小数点后只有一个0 去掉小数点

            // 如果小数点后只有一个0 去掉小数点

            if (newstr.charAt(k - 1) === '.') {

              return newstr.substring(0, k - 1)

            } else {

              //否则 去掉一个0

              // 否则 去掉一个0

              newstr = newstr.substring(0, k)

            }

          } else {

            //如果末尾没有0

            // 如果末尾没有0

            return newstr

          }

        }

@@ -1684,27 +1826,25 @@
        params: {

          mac: data.mac,

          chooseTime: this.chooseTime,

          time: this.nyr,

        },

          time: this.nyr

        }

      })

        .then((res) => {

        .then(res => {

          if (res.message === '操作目标不存在') {

            var datafalse = '暂无五分钟数据'

            this.bindPopup(datafalse)

              .openPopup()

            this.bindPopup(datafalse).openPopup()

            return

          }

          // eslint-disable-next-line no-unused-vars

          for (const key in res.data) {

            var tempDecimal = res.data[key].replace(/[^\d.]/g, '')

              .split('.')[1]

            var tempDecimal = res.data[key].replace(/[^\d.]/g, '').split('.')[1]

            if (key !== '名称' && key !== '时间') {

              if (Number(tempDecimal) === 0) {

                res.data[key] =

                  parseInt(res.data[key]) + res.data[key].split(' ')[1]

              } else {

                res.data[key] =

                  Number(res.data[key].split(' ')[0])

                    .toFixed(2) +

                  Number(res.data[key].split(' ')[0]).toFixed(2) +

                  res.data[key].split(' ')[1]

              }

            }

@@ -1713,10 +1853,9 @@
            .replace(/,/g, `<br>`)

            .replace(/{|}|"/g, '')

          console.log(data)

          marker.bindPopup(data)

            .openPopup()

          marker.bindPopup(data).openPopup()

        })

        .catch((err) => {

        .catch(err => {

          console.log(err)

        })

      return data

@@ -1732,9 +1871,8 @@
          // 卸载之前的风场图层

          if (

            !layer._container &&

            ('' + $(layer._container)

              .attr('class')).replace(/\s/g, '') !==

            'leaflet-layer'

            ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==

              'leaflet-layer'

          ) {

            layer.remove()

          }

@@ -1750,7 +1888,7 @@
        $.getJSON(

          'http://47.99.64.149:8080/api/screen_api_v2/screen/windAndDeviceDataByArea',

          { monitorPointId: this.$store.state.monitorPointId },

          (data) => {

          data => {

            this.map.setView([data[2], data[1]], 12)

            //   console.log('跳转成功')

          }

@@ -1802,6 +1940,7 @@
      }

      const gisMap_layers = this.map._layers

      let layer = null

      // eslint-disable-next-line no-unused-vars

      for (const i in gisMap_layers) {

        if (gisMap_layers[i].options.id === layerName) {

          layer = gisMap_layers[i]

@@ -1820,13 +1959,12 @@
        renderer: L.canvas(),

        zoomControl: false, // 缩放组件

        attributionControl: false, // 去掉右下角logol

        crs: L.CRS.EPSG3857, // 设置坐标类型，EPSG3857伪墨卡托投影，EPSG3395，墨卡托投影坐标 EPSG4326 WGS84

        crs: L.CRS.EPSG3857 // 设置坐标类型，EPSG3857伪墨卡托投影，EPSG3395，墨卡托投影坐标 EPSG4326 WGS84

      })

      // 定义图层样式

      L.tileLayer(

        'https://wprd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'

      )

        .addTo(map)

      ).addTo(map)

      this.map = map // data上需要挂载

      // const that = this

      // this.map.on('mousedown', function(ev) {

@@ -1892,9 +2030,8 @@
          // 卸载之前的风场图层

          if (

            !layer._container &&

            ('' + $(layer._container)

              .attr('class')).replace(/\s/g, '') !==

            'leaflet-layer'

            ('' + $(layer._container).attr('class')).replace(/\s/g, '') !==

              'leaflet-layer'

          ) {

            layer.remove()

          }

@@ -1911,14 +2048,14 @@
        params: {

          monitorPointIds: this.monitorPointIds.toString(),

          chooseTime: this.chooseTime,

          time: this.nyr,

        },

          time: this.nyr

        }

      })

        .then((res) => {

        .then(res => {

          this.windJsonData = res.data[0]

          return this.windJsonData

        })

        .catch((err) => {

        .catch(err => {

          console.log(err)

        })

    },

@@ -1935,7 +2072,7 @@
          // velocityType: 'Global Wind',

          velocityType: 'GBR Wind',

          displayPosition: 'bottomleft',

          displayEmptyString: 'No wind data',

          displayEmptyString: 'No wind data'

        },

        data: data, // 数据  格式可参照

        // data: data2,

@@ -1955,8 +2092,8 @@
          '#345B1B',

          '#186303',

          '#175103',

          '#053F03',

        ],

          '#053F03'

        ]

        // colorScale: ['#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03', '#053F03']

      })

      velocityLayer.addTo(this.map) // 添加到图上

@@ -1979,22 +2116,21 @@
          startTime: this.dateValue[0],

          endTime: this.dateValue[1],

          index: this.factorValue,

          alarmType: this.alartValue,

        },

          alarmType: this.alartValue

        }

      }).then(res => {

        // console.log('分页数据')

        // console.log(res)

        var tempData = res.data

        // console.log(tempData)

        for (let i = 0; i < tempData.alarmInfos.length; i++) {

          tempData.alarmInfos[i].alarmInfoId = i + 1

        }

        // 将数据赋值给tableData

        this.gridData = tempData.alarmInfos

        // 将数据的长度赋值给totalCount

        this.totalCount = tempData.alarmInfos.length

      })

        .then((res) => {

          // console.log('分页数据')

          // console.log(res)

          var tempData = res.data

          // console.log(tempData)

          for (let i = 0; i < tempData.alarmInfos.length; i++) {

            tempData.alarmInfos[i].alarmInfoId = i + 1

          }

          // 将数据赋值给tableData

          this.gridData = tempData.alarmInfos

          // 将数据的长度赋值给totalCount

          this.totalCount = tempData.alarmInfos.length

        })

    },

    // 分页

    // 每页显示的条数

@@ -2012,6 +2148,7 @@
    },

    // 单元格样式

    tableCellClassName ({ row, column, rowIndex, columnIndex }) {

      // eslint-disable-next-line no-unused-vars

      for (const key in row) {

        if (key === column.property) {

          const code = column.property

@@ -2048,15 +2185,14 @@
        method: 'get',

        params: {

          regionCode: 130900,

          sensorCode: 'a34002',

        },

          sensorCode: 'a34002'

        }

      })

        .then((res) => {

        .then(res => {

          // console.log('国控站信息')

          // console.log(res)

          var gkData = res.data

          var group = L.layerGroup()

            .addTo(this.map)

          var group = L.layerGroup().addTo(this.map)

          for (let i = 0; i < gkData.length; i++) {

            var glat = gkData[i].latitude

            var glng = gkData[i].longitude

@@ -2065,25 +2201,23 @@
              // iconUrl:require('@/assets/images/tl_PM10.png'),

              iconSize: [55, 55],

              iconAnchor: [13, 21],

              className: 'my-device',

              className: 'my-device'

            })

            // 添加标记到地图

            L.marker([glat, glng], {

              icon: gIcon,

            })

              .addTo(group)

              icon: gIcon

            }).addTo(group)

            var myIcon = L.divIcon({

              html: gkData[i].data,

              className: 'my-div-icon-g',

              iconSize: 30,

              iconSize: 30

            })

            L.marker([glat, glng], {

              icon: myIcon,

            })

              .addTo(group)

              icon: myIcon

            }).addTo(group)

          }

        })

        .catch((err) => {

        .catch(err => {

          console.log(err)

        })

    },

@@ -2106,8 +2240,8 @@
    },

    closeAlarmTableVisible () {

      this.$store.state.alarmTableVisible = false

    },

  },

    }

  }

}

</script>




 src/components/Wind/dataModel.css

@@ -2,11 +2,14 @@
  .leaflet-popup-content-wrapper {
    width: 415px;
    height: 300px;

  }

}

.mypopupNoWind {
  .leaflet-popup-content-wrapper {
    width: 415px;
    height: 160px;
  }
}
.marker_maptip {
  width: 380px;
  background: #fff;
@@ -50,7 +53,10 @@
  white-space: nowrap;
}

.marker_maptip .marker_firstline_2WH .marker_citypart_keg .marker_name_small_1VU {
.marker_maptip
  .marker_firstline_2WH
  .marker_citypart_keg
  .marker_name_small_1VU {
  font-size: 16px;
  height: 28px;
  line-height: 28px;
@@ -67,12 +73,18 @@
  margin-right: 0.8%;
}

.marker_maptip .marker_firstline_2WH .marker_indexpart_2UI .marker_indexname_3TP {
.marker_maptip
  .marker_firstline_2WH
  .marker_indexpart_2UI
  .marker_indexname_3TP {
  height: 20px;
  line-height: 20px;
}

.marker_maptip .marker_firstline_2WH .marker_indexpart_2UI .marker_indexvalue_1O7 {
.marker_maptip
  .marker_firstline_2WH
  .marker_indexpart_2UI
  .marker_indexvalue_1O7 {
  height: 24px;
  font-size: 16px;
  line-height: 24px;
@@ -112,7 +124,11 @@
  text-align: center;
}

.marker_maptip .marker_secondline_2Om .marker_item_2Kk .marker_itemvalue_1l1 .marker_redpoint_2aL {
.marker_maptip
  .marker_secondline_2Om
  .marker_item_2Kk
  .marker_itemvalue_1l1
  .marker_redpoint_2aL {
  width: 4px;
  height: 4px;
  padding: 3px;
@@ -170,4 +186,4 @@
  font-size: 15px;
  width: 50%;
  color: #999;
}
}

 src/views/hotMap/components/img/icon-pause.png

 src/views/hotMap/components/img/icon-play.png

 src/views/hotMap/components/selectHour.vue

@@ -63,8 +63,9 @@
        this.endPlaceholderData = '结束日期时间'
        this.format = 'yyyy-MM-dd HH'
        this.valueFormat = 'yyyy-MM-dd HH'
        let starTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
        this.value1 = [
          dayjs().subtract(3, 'day').format('YYYY-MM-DD HH'),
          `${starTime} 00`,
          dayjs().format('YYYY-MM-DD HH')
        ]
      } else if (nv === 'daterange') {
@@ -85,8 +86,9 @@
    console.log('this.value1', this.value1)
    // this.currentHour()
    if (this.dataType === 'datetimerange') {
      let starTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
      this.value1 = [
        dayjs().subtract(3, 'day').format('YYYY-MM-DD HH'),
        `${starTime} 00`,
        dayjs().format('YYYY-MM-DD HH')
      ]
    }

 src/views/hotMap/components/timeLinePlay.vue

@@ -7,7 +7,10 @@
        @click="togglePlay"
      />
    </div>
    <div class="dayDataList">
    <div
      ref="dayDataList"
      class="dayDataList"
    >
      <div class="oneDayData">
        <div
          v-for="item in dataFormList"
@@ -97,8 +100,9 @@
    return {
      intervalTimer: null, // 定时器
      playing: false,
      activeIndex: 0,
      activeIndex: 1,
      activeItem: {},
      activeFarterItem: {},
      timeLineData: [ // 数据格式
        {
          id: 0,
@@ -121,6 +125,7 @@
    dataFormList () {
      let dataList = _.cloneDeep(this.dateTimes)
      let hourListTime = dataList[dataList.length - 1].hourListTime
      let hourListTimeStar = dataList[0].hourListTime
      if (hourListTime.length < 24 && this.dateType === 'hour') {
        const newArr = hourListTime.concat(Array(24 - hourListTime.length).fill({
          id: 9999,
@@ -130,6 +135,16 @@
        console.log('newArr', newArr)
        dataList[dataList.length - 1].hourListTime = newArr
      }
      if (hourListTimeStar.length < 24 && this.dateType === 'hour') {
        const newArr = (Array(24 - hourListTimeStar.length).fill({
          id: 9999,
          name: '9999',
          isShow: true
        })).concat(hourListTimeStar)
        console.log('newArr', newArr)
        dataList[0].hourListTime = newArr
      }
      console.log('dataList', dataList)
      return dataList
    }
  },
@@ -137,7 +152,7 @@
  watch: {
    dateTimes: {
      handler (newVal, oldVal) {
        this.activeIndex = 0
        this.activeIndex = 1
        this.playing = false
        console.log('newVal', newVal)
      },
@@ -151,8 +166,10 @@
        clearInterval(this.intervalTimer)
        if (this.dateType === 'hour' && this.activeIndex === this.dataFormList[0].idLength) {
          this.activeIndex = 1
          this.chanScroll(0)
        } else if (this.dateType !== 'hour' && this.activeIndex === this.dataFormList.length) {
          this.activeIndex = 1
          this.chanScroll(0)
        } else {
          this.activeIndex = (this.activeIndex + 1)
        }
@@ -194,25 +211,47 @@
                id: item.id,
                name: `${element.name} ${item.name}`,
              }
              this.activeFarterItem = element
            }
          })
        })
      } else {
        activeItem = this.dataFormList[this.activeIndex - 1]
        this.activeFarterItem = activeItem
      }
      console.log('activeItem', activeItem, this.activeIndex)
      this.chanScroll()
      this.$emit('getDateFun', activeItem)
    }
  },
  // 生命周期 - 创建完成（可以访问当前 this 实例）
  created () {
    console.log('this.dataFormList', this.dataFormList)
    if (this.dateType === 'hour') {
      let data = this.dataFormList[this.dataFormList.length - 1].hourListTime
      this.activeIndex = data[0].id + 1
    }
  },
  methods: {
    chanScroll () {
      const scrollableDiv = this.$refs.dayDataList
      let farterElementChild = scrollableDiv.firstElementChild
      let sunElementChild = farterElementChild.firstElementChild.clientWidth
      let activElementWidth = sunElementChild * (this.activeFarterItem.id + 1)
      // let childrenlist = farterElementChild.children.length
      console.log('scrollableDiv.index', this.activeFarterItem.id + 1)
      console.log('scrollableDiv.index', activElementWidth)
      // console.log('scrollableDiv.childrenlist', childrenlist)
      // console.log('scrollableDiv.scrollWidth', scrollableDiv.scrollWidth)
      console.log('scrollableDiv.clientWidth', scrollableDiv.clientWidth)
      if (scrollableDiv.scrollWidth > scrollableDiv.clientWidth) {
        scrollableDiv.scrollTo(((this.activeFarterItem.id) * sunElementChild), 0)
      }
    },
    changeActiveIndex (data, item) {
      if (item.isShow && this.dateType === 'hour') {
        return
      }
      this.activeItem = item
      this.activeIndex = data + 1
      console.log('changeActiveIndex', data, item)
      if (this.playing) {
@@ -230,9 +269,10 @@
</script>
<style scoped  lang="scss">
.timeLineBox{
    background: hsla(0,0%,80%,.8);
    background: rgba(51,51,51,.8);
    width:100%;
    box-shadow: 1px 1px 5px #666;
    color: #fff;
   // box-shadow: 1px 1px 5px #666;
    cursor: pointer;
    padding: 10px;
    padding-bottom: 5px;
@@ -241,7 +281,7 @@
    align-items: center;
    .dayDataList{
       width: calc(100% - 60px);
       overflow: auto;
       overflow-x: auto;
      .oneDayData{
        display: flex;
        // justify-content: space-around;
@@ -250,7 +290,7 @@
          flex: 1;
          text-align: center;
          min-width: 100px;
          border-left: 1px solid #fff;
          border-left: 1px solid rgba(255, 255, 255, 0.7);;
          .lineBox{
            width: 100%;
            height: 10px;
@@ -267,7 +307,7 @@
                  width: 100%;
                  height: 10px;
                  // border-left: 1px solid #fff;
                  border-right: 1px solid #fff;
                  border-right: 1px solid rgba(255, 255, 255, 0.7);;
                }
              }
            }
@@ -275,11 +315,38 @@
          .dataFont{
            margin-top: 5px;
            padding-top: 5px;
            border-top: 1px solid #fff;
            border-top: 1px solid rgba(255, 255, 255, 0.7);;
            // border-top: 1px solid #fff;
          }
        }
      }

    }
    .dayDataList::-webkit-scrollbar-track
    {
      -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
      background-color: #F5F5F5;
      border-radius: 10px;
    }

    .dayDataList::-webkit-scrollbar
    {
      width: 5px;
      background-color: #F5F5F5;
    }

    .dayDataList::-webkit-scrollbar-thumb
    {
     background-color: #AAA;
     border-radius: 10px;
     background-image: -webkit-linear-gradient(90deg,
                                           rgba(0, 0, 0, .2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(0, 0, 0, .2) 50%,
    rgba(0, 0, 0, .2) 75%,
    transparent 75%,
    transparent)
    }

}
@@ -314,7 +381,7 @@
  text-align: center;
}
.activeBg{
  background: green !important;
  background: #009845 !important;
}
.activeIhShow{
  border: none!important;
@@ -333,15 +400,15 @@
</style>
<style>
 .tooltip-style.el-tooltip__popper {
      background: green;
      background: #009845;
    }
 .tooltip-style.el-tooltip__popper.is-dark {
      background: green;
      background: #009845;
    }
.tooltip-style.el-tooltip__popper[x-placement^='top'] .popper__arrow:after{
  border-top-color:green;
  border-top-color:#009845;
}
.el-tooltip__popper[x-placement^='top'] .popper__arrow{
  border-top-color:green;
  border-top-color:#009845;
}
</style>

 src/views/hotMap/index.vue

@@ -1,5 +1,8 @@
<template>
  <div class="content">
  <div
    ref="content"
    class="content"
  >
    <div class="formInBox ">
      <el-form
        :inline="true"
@@ -19,10 +22,20 @@
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <RegionCity
            :select-size="'small'"
            @regionForm="regionData"
          />
          <el-select
            v-model="orgId"
            size="small"
            placeholder="请选择"
            disabled
            @change="regionData"
          >
            <el-option
              v-for="item in orgData"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-radio-group
@@ -48,11 +61,22 @@
          >
            查询
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="download"
          >
            截图
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="mapd" />
    <div class="timeLine">
      <div
        :style="{ background: 'url(' + selectSensor.src + ') no-repeat' }"
        class="buttomColorLine"
      />
      <Main
        v-if="dateTimes.length > 0&&formInline.city!==''"
        :options="options"
@@ -65,36 +89,135 @@
</template>

<script>
import dayjs from 'dayjs'
import _ from 'lodash'
import RegionCity from '@/components/Cascader/regionCity'
import selectHour from './components/selectHour.vue'
import Main from './components/timeLinePlay.vue'
import html2canvas from 'html2canvas'
export default {
  components: { RegionCity, selectHour, Main },
  components: { selectHour, Main },
  data () {
    return {
      map: null,
      heatmap: null,
      markerClusterer: null,
      orgData: [],
      orgId: 71,
      city: '苏州',
      formInline: {
        city: '',
        cityCode: '',
        city: '鞍山市',
        cityCode: '210300',
        dayType: 'hour',
        starTime: '',
        endTime: '',
        dateRadio: '小时',
        pollutant: 'PM10',
      },
      selectSensor: {code: 'a34002', name: 'PM10', maxNumber: 500},
      selectSensor: {code: 'a34002',
        name: 'PM10',
        maxNumber: 500,
        src: require('@/assets/images/tl_PM10.png'),
        gradient: {
          '0': '#12a112',
          '0.1': '#12a112',
          '0.3': '#feff01',
          '0.5': '#fd8200',
          '0.7': '#fd0001',
          '0.84': '#95014b',
          '1': '#7e0226'
        }},
      sensorArr: [
        { code: 'a34002', name: 'PM10', maxNumber: 500 },
        { code: 'a34004', name: 'PM2.5', maxNumber: 350 },
        { code: 'a21026', name: 'SO2', maxNumber: 2100 },
        { code: 'a21004', name: 'NO2', maxNumber: 750 },
        { code: 'a21005', name: 'CO', maxNumber: 48 },
        { code: 'a05024', name: 'O3', maxNumber: 1000 },
        { code: 'a99054', name: 'TVOC', maxNumber: 4 }
        { code: 'a34002',
          name: 'PM10',
          maxNumber: 500,
          src: require('@/assets/images/tl_PM10.png'),
          gradient: {
            '0': '#12a112',
            '0.1': '#12a112',
            '0.3': '#feff01',
            '0.5': '#fd8200',
            '0.7': '#fd0001',
            '0.84': '#95014b',
            '1': '#7e0226'
          }},
        { code: 'a34004',
          name: 'PM2.5',
          maxNumber: 350,
          src: require('@/assets/images/tl_PM2.5.png'),
          gradient: {
            '0': '#12a112',
            '0.1': '#12a112',
            '0.21': '#feff01',
            '0.32': '#fd8200',
            '0.42': '#fd0001',
            '0.71': '#95014b',
            '1': '#7e0226'
          } },
        { code: 'a21026',
          name: 'SO2',
          maxNumber: 2100,
          src: require('@/assets/images/tl_SO2.png'),
          gradient: {
            '0': '#12a112',
            '0.02': '#12a112',
            '0.07': '#feff01',
            '0.22': '#fd8200',
            '0.38': '#fd0001',
            '0.76': '#95014b',
            '1': '#7e0226'
          } },
        { code: 'a21004',
          name: 'NO2',
          maxNumber: 750,
          src: require('@/assets/images/tl_NO2.png'),
          gradient: {
            '0': '#12a112',
            '0.05': '#12a112',
            '0.1': '#feff01',
            '0.24': '#fd8200',
            '0.37': '#fd0001',
            '0.75': '#95014b',
            '1': '#7e0226'
          }},
        { code: 'a21005',
          name: 'CO',
          maxNumber: 48,
          src: require('@/assets/images/tl_CO.png'),
          gradient: {
            '0': '#12a112',
            '0.04': '#12a112',
            '0.083': '#feff01',
            '0.29': '#fd8200',
            '0.5': '#fd0001',
            '0.75': '#95014b',
            '1': '#7e0226'
          }},
        { code: 'a05024',
          name: 'O3',
          maxNumber: 1000,
          src: require('@/assets/images/tl_O3.png'),
          gradient: {
            '0': '#12a112',
            '0.16': '#12a112',
            '0.2': '#feff01',
            '0.3': '#fd8200',
            '0.4': '#fd0001',
            '0.8': '#95014b',
            '1': '#7e0226'
          } },
        { code: 'a99054',
          name: 'TVOC',
          maxNumber: 4,
          src: require('@/assets/images/tl_TVOCNew.png'),
          gradient: {
            '0': '#12a112',
            '0.12': '#12a112',
            '0.25': '#feff01',
            '0.375': '#fd8200',
            '0.5': '#fd0001',
            '0.75': '#95014b',
            '1': '#7e0226'
          }}
      ],
      heatMapData: [],
      dataType: 'datetimerange',
@@ -131,7 +254,6 @@
        console.log('newVal', newVal === '')
        if (newVal !== '') {
          this.init1()
          this.map.setCity(newVal)
          if (!!this.formInline.starTime && !!this.formInline.endTime) {
            this.onSubmit()
          }
@@ -165,29 +287,51 @@
    }
  },
  methods: {
    download () {
      const ref = this.$refs.content // 截图区域
      html2canvas(ref, {
        backgroundColor: '#e8f4ff',
        useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
      }).then((canvas) => {
        const dataURL = canvas.toDataURL('image/png')
        const creatDom = document.createElement('a')
        document.body.appendChild(creatDom)
        creatDom.href = dataURL
        creatDom.download = '图片'
        creatDom.click()
      })
    },
    getDateFun (item) {
      console.log(item)
      this.activeItem = item
    },
    getPollutant (data) {
      this.selectSensor = _.find(this.sensorArr, { name: data })
      console.log(this.selectSensor)
      if (this.heatmap) {
        this.map.remove(this.heatmap)
        this.heatmap = null
      }
      console.log('this.heatmap', this.heatmap)
    },
    // 初始化地图
    initMap () {
      var map = new AMap.Map('mapd', {
        resizeEnable: true,
        zooms: [3, 18],
        zoom: 11,
        zooms: [10, 10],
        zoom: 10,
      })
      this.map = map
      this.init1()
      // let that = this
    },
    init1 () { // 区域遮盖
      var that = this
      this.map.setCity(this.formInline.city)
      console.log('this.formInline.city', this.formInline.cityCode)
      if (that.polygon) {
        that.map.remove(that.polygon)
      }
      console.log('that.polygon', that.polygon)
      AMap.plugin('AMap.DistrictSearch', function () {
        new AMap.DistrictSearch({
          extensions: 'all',
@@ -206,7 +350,7 @@
            pathL: pathArray,
            strokeColor: 'red', // 城市边界颜色
            strokeWeight: 3,
            fillColor: '#FFF', // 遮罩背景色黑色
            fillColor: '#ccc', // 遮罩背景色黑色
            fillOpacity: 1
          })
          that.polygon.setPath(pathArray)
@@ -219,7 +363,7 @@
        url: '/heatMap/query',
        method: 'get',
        params: {
          code: this.formInline.cityCode,
          id: this.orgId,
          startTime: newVal,
          type: this.selectSensor.code,
          form: this.formInline.dayType
@@ -227,7 +371,6 @@
      })
        .then(res => {
          if (res.data !== '0') {
            // this.map.remove(this.heatmap)
            if (this.heatmap === null) {
              this.createHeatMap()
            }
@@ -237,9 +380,8 @@
              data: this.heatMapData,
              max: this.selectSensor.maxNumber
            })
            // let zoomLevel = this.map.getZoom()
            //
            this.setMarkers(this.heatMapData)
            console.log('000', this.map.getZoom())
            console.log('1111', this.heatmap.getDataSet())
          } else {
            this.heatmap = null
          }
@@ -248,7 +390,7 @@
          console.log(err)
        })
    },

    // 聚合点
    setMarkers (curData) {
      curData.forEach((item, index) => {
        let div = document.createElement('div')
@@ -292,9 +434,11 @@
          gridSize: 100,
          renderClusterMarker: function (context) {
            let contNumber = 0
            context.markers.forEach(item => {
            context.markers.forEach((item, index) => {
              console.log('indexitem', index, item.getExtData())
              contNumber += item.getExtData()
            })
            console.log('contNumber', contNumber)
            let factor = Math.pow(context.count / count, 1 / 18)
            let div = document.createElement('div')
            let Hue = 180 - factor * 180
@@ -315,6 +459,7 @@
            div.style.textAlign = 'center'
            context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2))
            context.marker.setContent(div)
            console.log('context.marker----------------', context.marker)
          }
        })
      })
@@ -336,21 +481,26 @@
          console.log(err)
        })
    },
    getOrganizationId () {
      this.$request({
        url: '/organization/getOrganizationId',
        method: 'get'
      })
        .then(res => {
          this.orgData = res.data
        })
        .catch(err => {
          console.log(err)
        })
    },
    createHeatMap () {
      let that = this
      this.map.plugin(['AMap.Heatmap'], function () {
        // 初始化heatmap对象
        that.heatmap = new AMap.Heatmap(that.map, {
          radius: 100, // 给定半径
          opacity: [0.2, 0.8],
          gradient: {
            '0': '#d81e06',
            '0.2': '#ea9518',
            '0.4': '#fd8200',
            '0.6': '#fd0001',
            '0.8': '#95014b',
            '1': '#7e0226'
          }
          opacity: [0.5, 1],
          gradient: that.selectSensor.gradient
        })
      })
    },
@@ -371,20 +521,20 @@
        })
      }
    },
    regionData (city) {
      console.log(city)
      if (city.org) {
        this.formInline.city = city.org
        this.formInline.cityCode = city.orgid
      } else {
        this.formInline.city = ''
        this.formInline.cityCode = ''
      }
    regionData (id) {
      let cityData = _.find(this.orgData, { id: id })
      this.formInline.city = cityData.cityName
      this.formInline.cityCode = cityData.cityCode
    },
    selectHourData (data) {
      if (data) {
        this.formInline.starTime = data[0]
        this.formInline.endTime = data[1]
        console.log('selectHourData', data)
        let dataTime = dayjs().format('YYYY-MM-DD')
        this.getOrganizationId()
        this.getDayListData()
        this.getData(`${dataTime} 00`)
      } else {
        this.formInline.starTime = ''
        this.formInline.endTime = ''
@@ -422,9 +572,12 @@
.timeLine{
   position: absolute;
    padding: 5px 10px;
    bottom: 15px;
    bottom: 5px;
    width: 100%;
    z-index: 999;
    .buttomColorLine{
      height: 50px;
    }
}
/deep/.menu-icon {
  font-size: 20px;