From 7ce6f4361b22ff88f863ad5293c37d9e8bff0c7d Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Wed, 20 Dec 2023 13:06:25 +0800
Subject: [PATCH] fix:热力图播放
---
src/views/hotMap/components/img/icon-pause.png | 0
.gitignore | 2
package-lock.json | 142 +++++++
src/views/hotMap/components/timeLinePlay.vue | 97 ++++
src/views/hotMap/index.vue | 249 +++++++++++--
package.json | 1
src/components/Wind/Map.vue | 514 ++++++++++++++++++----------
src/views/hotMap/components/img/icon-play.png | 0
src/views/hotMap/components/selectHour.vue | 6
src/components/Wind/dataModel.css | 32 +
10 files changed, 765 insertions(+), 278 deletions(-)
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..6737c9e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+request
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index fef7c7d..38fffa5 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 34f39b3..890cfff 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Wind/Map.vue b/src/components/Wind/Map.vue
index 1883977..68813ac 100644
--- a/src/components/Wind/Map.vue
+++ b/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>
diff --git a/src/components/Wind/dataModel.css b/src/components/Wind/dataModel.css
index 2b70606..b5b76b8 100644
--- a/src/components/Wind/dataModel.css
+++ b/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;
-}
\ No newline at end of file
+}
diff --git a/src/views/hotMap/components/img/icon-pause.png b/src/views/hotMap/components/img/icon-pause.png
index 831d4c2..3a8a8c6 100644
--- a/src/views/hotMap/components/img/icon-pause.png
+++ b/src/views/hotMap/components/img/icon-pause.png
Binary files differ
diff --git a/src/views/hotMap/components/img/icon-play.png b/src/views/hotMap/components/img/icon-play.png
index a2ef607..a64a94b 100644
--- a/src/views/hotMap/components/img/icon-play.png
+++ b/src/views/hotMap/components/img/icon-play.png
Binary files differ
diff --git a/src/views/hotMap/components/selectHour.vue b/src/views/hotMap/components/selectHour.vue
index 1d60226..b044d22 100644
--- a/src/views/hotMap/components/selectHour.vue
+++ b/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')
]
}
diff --git a/src/views/hotMap/components/timeLinePlay.vue b/src/views/hotMap/components/timeLinePlay.vue
index d9c0622..e92c531 100644
--- a/src/views/hotMap/components/timeLinePlay.vue
+++ b/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>
diff --git a/src/views/hotMap/index.vue b/src/views/hotMap/index.vue
index 5756426..ebbd572 100644
--- a/src/views/hotMap/index.vue
+++ b/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;
--
Gitblit v1.8.0