From add483d13841cf472a9adb5c0cc72454f501fb7c Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 30 四月 2024 16:49:54 +0800
Subject: [PATCH] 新增搜索框
---
src/composables/fetchData.js | 50 ++
src/assets/mipmap/title_bg.png | 0
src/utils/map/dialog.js | 260 ++++++++++
src/assets/mipmap/underway.png | 0
src/api/missionApi.js | 12
src/components/search/SearchBar.vue | 33 +
src/assets/mipmap/微信图片_202106081101331.png | 0
src/components/search/OptionTime.vue | 40 +
src/assets/mipmap/underway-2.png | 0
src/assets/mipmap/微信图片_202106081101332.png | 0
src/utils/map/index_old.js | 5
src/assets/mipmap/stink.png | 0
src/styles/base.scss | 6
src/components/search/OptionType.vue | 54 ++
src/views/historymode/HistoryMode.vue | 58 ++
src/assets/border.css | 5
src/assets/mipmap/ic_down_white.png | 0
src/assets/mipmap/scene.png | 0
src/assets/mipmap/other_smell.png | 0
src/assets/mipmap/pungent.png | 0
src/components/monitor/FactorRadio.vue | 6
src/assets/mipmap/location.png | 0
src/utils/map/3dLayer.js | 155 ++++++
src/assets/mipmap/car_stop.png | 0
src/assets/mipmap/oil_paint.png | 0
src/assets/mipmap/c_level_2.png | 0
src/assets/mipmap/shrink_right.png | 0
src/assets/mipmap/c_level_1.png | 0
src/components.d.ts | 11
src/utils/map/calculate.js | 59 ++
src/styles/elementUI.scss | 15
src/assets/mipmap/car_driving.png | 0
src/api/index.js | 84 +++
src/api/monitorDataApi.js | 11
src/constant/factor-name.js | 29 +
src/constant/factor-unit.js | 29 +
src/styles/index.scss | 1
src/assets/mipmap/slider_handle.png | 0
src/assets/mipmap/car_offline.png | 0
src/assets/mipmap/ic_up_white.png | 0
src/assets/mipmap/plastics.png | 0
src/assets/mipmap/c_level_no.png | 0
src/assets/mipmap/微信图片_20210608110133.png | 0
src/utils/map/marks.js | 89 +++
src/assets/mipmap/shrink_left.png | 0
src/assets/mipmap/border.png | 0
src/assets/mipmap/boat_driving.png | 0
src/stores/toolbox.js | 26 +
src/assets/mipmap/c_level_0.png | 0
src/assets/mipmap/data_chart.png | 0
src/utils/map/sector.js | 232 +++++++++
src/components/search/OptionDevice.vue | 59 ++
src/components/search/OptionMission.vue | 71 ++
.prettierrc.json | 2
src/assets/mipmap/dust.png | 0
src/constant/wind-dir.js | 22
src/assets/mipmap/company.png | 0
src/assets/mipmap/device.png | 0
src/utils/map/toolbox.js | 9
59 files changed, 1,413 insertions(+), 20 deletions(-)
diff --git a/.prettierrc.json b/.prettierrc.json
index 5eb97e4..12e3a09 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -3,6 +3,6 @@
"semi": true,
"tabWidth": 2,
"singleQuote": true,
- "printWidth": 100,
+ "printWidth": 80,
"trailingComma": "none"
}
\ No newline at end of file
diff --git a/src/api/index.js b/src/api/index.js
new file mode 100644
index 0000000..30f3296
--- /dev/null
+++ b/src/api/index.js
@@ -0,0 +1,84 @@
+import axios from 'axios';
+import { ElMessage } from 'element-plus';
+
+const debug = false;
+
+let ip1 = 'http://114.215.109.124:8805/';
+
+if (debug) {
+ ip1 = 'http://192.168.0.138:8082/';
+}
+
+const $http = axios.create({
+ baseURL: ip1,
+ timeout: 20000
+});
+
+//娣诲姞鎷︽埅鍣�
+[$http].forEach((i) => {
+ // 娣诲姞璇锋眰鎷︽埅鍣�
+ i.interceptors.request.use(
+ function (config) {
+ // 鍦ㄥ彂閫佽姹備箣鍓嶅仛浜涗粈涔�
+ console.log('==>璇锋眰寮�濮�');
+ console.log(`${config.baseURL}${config.url}`);
+ if (config.data) {
+ console.log('==>璇锋眰鏁版嵁', config.data);
+ }
+ return config;
+ },
+ function (error) {
+ // 瀵硅姹傞敊璇仛浜涗粈涔�
+ console.log('==>璇锋眰寮�濮�');
+ console.log(error);
+ ElMessage({
+ message: error,
+ type: 'error'
+ });
+ return Promise.reject(error);
+ }
+ );
+
+ // 娣诲姞鍝嶅簲鎷︽埅鍣�
+ i.interceptors.response.use(
+ function (response) {
+ // 2xx 鑼冨洿鍐呯殑鐘舵�佺爜閮戒細瑙﹀彂璇ュ嚱鏁般��
+ // 瀵瑰搷搴旀暟鎹仛鐐逛粈涔�
+ console.log(response);
+ console.log('==>璇锋眰缁撴潫');
+ if (response.status == 200) {
+ if (
+ response.data.success != undefined &&
+ response.data.success != null
+ ) {
+ if (response.data.success == true) {
+ return response;
+ } else {
+ ElMessage({
+ message: response.data.message,
+ type: 'error'
+ });
+ return Promise.reject(response.data.message);
+ }
+ } else {
+ return response;
+ }
+ } else {
+ return Promise.reject(response);
+ }
+ },
+ function (error) {
+ // 瓒呭嚭 2xx 鑼冨洿鐨勭姸鎬佺爜閮戒細瑙﹀彂璇ュ嚱鏁般��
+ // 瀵瑰搷搴旈敊璇仛鐐逛粈涔�
+ console.log(error);
+ console.log('==>璇锋眰缁撴潫');
+ ElMessage({
+ message: error,
+ type: 'error'
+ });
+ return Promise.reject(error);
+ }
+ );
+});
+
+export { $http };
diff --git a/src/api/missionApi.js b/src/api/missionApi.js
new file mode 100644
index 0000000..e07e9fe
--- /dev/null
+++ b/src/api/missionApi.js
@@ -0,0 +1,12 @@
+import { $http } from './index';
+
+/**
+ *
+ */
+export default {
+ fethchMission({ type, page, pageSize }) {
+ let params = `page=${page}&perPage=${pageSize}`;
+ params += type ? `&type=${type}` : '';
+ return $http.get(`air/mission/type?${params}`).then((res) => res.data);
+ }
+};
diff --git a/src/api/monitorDataApi.js b/src/api/monitorDataApi.js
new file mode 100644
index 0000000..0b9970f
--- /dev/null
+++ b/src/api/monitorDataApi.js
@@ -0,0 +1,11 @@
+import { $http } from './index';
+
+/**
+ *
+ */
+export default {
+ fethcRealtimeData(deviceCode, type, page, perPage) {
+ const params = `deviceCode=${deviceCode}&type=${type}&page=${page}&perPage=${perPage}`;
+ $http.get(`air/realtime/sec?${params}`);
+ }
+};
diff --git a/src/assets/border.css b/src/assets/border.css
index 11ac6b5..a8a5118 100644
--- a/src/assets/border.css
+++ b/src/assets/border.css
@@ -41,7 +41,7 @@
width: 100%;
height: 100%;
background-color: var(--border-color);
- z-index: 1000px;
+ z-index: 1000px;
}
/* 鑳屾櫙 */
@@ -49,7 +49,7 @@
position: relative;
color: var(--font-color);
background-color: var(--bg-color);
- z-index: 1000px;
+ z-index: 1000px;
}
.ff-border-top img.ff-img {
@@ -656,4 +656,5 @@
.ff-toggle-btn-down .ff-border-top .ff-border-content {
transform: rotateZ(90deg);
}
+
/*****************鎸夐挳鍖哄煙鏍峰紡 - end *************************/
\ No newline at end of file
diff --git a/src/assets/mipmap/boat_driving.png b/src/assets/mipmap/boat_driving.png
new file mode 100644
index 0000000..bb6456a
--- /dev/null
+++ b/src/assets/mipmap/boat_driving.png
Binary files differ
diff --git a/src/assets/mipmap/border.png b/src/assets/mipmap/border.png
new file mode 100644
index 0000000..12b9062
--- /dev/null
+++ b/src/assets/mipmap/border.png
Binary files differ
diff --git a/src/assets/mipmap/c_level_0.png b/src/assets/mipmap/c_level_0.png
new file mode 100644
index 0000000..f08d196
--- /dev/null
+++ b/src/assets/mipmap/c_level_0.png
Binary files differ
diff --git a/src/assets/mipmap/c_level_1.png b/src/assets/mipmap/c_level_1.png
new file mode 100644
index 0000000..1dcbfb3
--- /dev/null
+++ b/src/assets/mipmap/c_level_1.png
Binary files differ
diff --git a/src/assets/mipmap/c_level_2.png b/src/assets/mipmap/c_level_2.png
new file mode 100644
index 0000000..ae304ed
--- /dev/null
+++ b/src/assets/mipmap/c_level_2.png
Binary files differ
diff --git a/src/assets/mipmap/c_level_no.png b/src/assets/mipmap/c_level_no.png
new file mode 100644
index 0000000..e7bc7b9
--- /dev/null
+++ b/src/assets/mipmap/c_level_no.png
Binary files differ
diff --git a/src/assets/mipmap/car_driving.png b/src/assets/mipmap/car_driving.png
new file mode 100644
index 0000000..c0a737f
--- /dev/null
+++ b/src/assets/mipmap/car_driving.png
Binary files differ
diff --git a/src/assets/mipmap/car_offline.png b/src/assets/mipmap/car_offline.png
new file mode 100644
index 0000000..4dbf1ed
--- /dev/null
+++ b/src/assets/mipmap/car_offline.png
Binary files differ
diff --git a/src/assets/mipmap/car_stop.png b/src/assets/mipmap/car_stop.png
new file mode 100644
index 0000000..6e21859
--- /dev/null
+++ b/src/assets/mipmap/car_stop.png
Binary files differ
diff --git a/src/assets/mipmap/company.png b/src/assets/mipmap/company.png
new file mode 100644
index 0000000..ebd4090
--- /dev/null
+++ b/src/assets/mipmap/company.png
Binary files differ
diff --git a/src/assets/mipmap/data_chart.png b/src/assets/mipmap/data_chart.png
new file mode 100644
index 0000000..f0f615e
--- /dev/null
+++ b/src/assets/mipmap/data_chart.png
Binary files differ
diff --git a/src/assets/mipmap/device.png b/src/assets/mipmap/device.png
new file mode 100644
index 0000000..7e4d585
--- /dev/null
+++ b/src/assets/mipmap/device.png
Binary files differ
diff --git a/src/assets/mipmap/dust.png b/src/assets/mipmap/dust.png
new file mode 100644
index 0000000..b66b949
--- /dev/null
+++ b/src/assets/mipmap/dust.png
Binary files differ
diff --git a/src/assets/mipmap/ic_down_white.png b/src/assets/mipmap/ic_down_white.png
new file mode 100644
index 0000000..714a982
--- /dev/null
+++ b/src/assets/mipmap/ic_down_white.png
Binary files differ
diff --git a/src/assets/mipmap/ic_up_white.png b/src/assets/mipmap/ic_up_white.png
new file mode 100644
index 0000000..829e951
--- /dev/null
+++ b/src/assets/mipmap/ic_up_white.png
Binary files differ
diff --git a/src/assets/mipmap/location.png b/src/assets/mipmap/location.png
new file mode 100644
index 0000000..302b164
--- /dev/null
+++ b/src/assets/mipmap/location.png
Binary files differ
diff --git a/src/assets/mipmap/oil_paint.png b/src/assets/mipmap/oil_paint.png
new file mode 100644
index 0000000..cf76630
--- /dev/null
+++ b/src/assets/mipmap/oil_paint.png
Binary files differ
diff --git a/src/assets/mipmap/other_smell.png b/src/assets/mipmap/other_smell.png
new file mode 100644
index 0000000..8f1ea1f
--- /dev/null
+++ b/src/assets/mipmap/other_smell.png
Binary files differ
diff --git a/src/assets/mipmap/plastics.png b/src/assets/mipmap/plastics.png
new file mode 100644
index 0000000..94f4c9e
--- /dev/null
+++ b/src/assets/mipmap/plastics.png
Binary files differ
diff --git a/src/assets/mipmap/pungent.png b/src/assets/mipmap/pungent.png
new file mode 100644
index 0000000..782baaf
--- /dev/null
+++ b/src/assets/mipmap/pungent.png
Binary files differ
diff --git a/src/assets/mipmap/scene.png b/src/assets/mipmap/scene.png
new file mode 100644
index 0000000..2c0e28a
--- /dev/null
+++ b/src/assets/mipmap/scene.png
Binary files differ
diff --git a/src/assets/mipmap/shrink_left.png b/src/assets/mipmap/shrink_left.png
new file mode 100644
index 0000000..9f55023
--- /dev/null
+++ b/src/assets/mipmap/shrink_left.png
Binary files differ
diff --git a/src/assets/mipmap/shrink_right.png b/src/assets/mipmap/shrink_right.png
new file mode 100644
index 0000000..599a949
--- /dev/null
+++ b/src/assets/mipmap/shrink_right.png
Binary files differ
diff --git a/src/assets/mipmap/slider_handle.png b/src/assets/mipmap/slider_handle.png
new file mode 100644
index 0000000..560db1c
--- /dev/null
+++ b/src/assets/mipmap/slider_handle.png
Binary files differ
diff --git a/src/assets/mipmap/stink.png b/src/assets/mipmap/stink.png
new file mode 100644
index 0000000..80fd990
--- /dev/null
+++ b/src/assets/mipmap/stink.png
Binary files differ
diff --git a/src/assets/mipmap/title_bg.png b/src/assets/mipmap/title_bg.png
new file mode 100644
index 0000000..766aba8
--- /dev/null
+++ b/src/assets/mipmap/title_bg.png
Binary files differ
diff --git a/src/assets/mipmap/underway-2.png b/src/assets/mipmap/underway-2.png
new file mode 100644
index 0000000..7d57b9d
--- /dev/null
+++ b/src/assets/mipmap/underway-2.png
Binary files differ
diff --git a/src/assets/mipmap/underway.png b/src/assets/mipmap/underway.png
new file mode 100644
index 0000000..854952a
--- /dev/null
+++ b/src/assets/mipmap/underway.png
Binary files differ
diff --git "a/src/assets/mipmap/\345\276\256\344\277\241\345\233\276\347\211\207_20210608110133.png" "b/src/assets/mipmap/\345\276\256\344\277\241\345\233\276\347\211\207_20210608110133.png"
new file mode 100644
index 0000000..4dbf1ed
--- /dev/null
+++ "b/src/assets/mipmap/\345\276\256\344\277\241\345\233\276\347\211\207_20210608110133.png"
Binary files differ
diff --git "a/src/assets/mipmap/\345\276\256\344\277\241\345\233\276\347\211\207_202106081101331.png" "b/src/assets/mipmap/\345\276\256\344\277\241\345\233\276\347\211\207_202106081101331.png"
new file mode 100644
index 0000000..c0a737f
--- /dev/null
+++ "b/src/assets/mipmap/\345\276\256\344\277\241\345\233\276\347\211\207_202106081101331.png"
Binary files differ
diff --git "a/src/assets/mipmap/\345\276\256\344\277\241\345\233\276\347\211\207_202106081101332.png" "b/src/assets/mipmap/\345\276\256\344\277\241\345\233\276\347\211\207_202106081101332.png"
new file mode 100644
index 0000000..6e21859
--- /dev/null
+++ "b/src/assets/mipmap/\345\276\256\344\277\241\345\233\276\347\211\207_202106081101332.png"
Binary files differ
diff --git a/src/components.d.ts b/src/components.d.ts
index efd3d0d..f936b4c 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -13,15 +13,26 @@
CoreMenu: typeof import('./components/core/CoreMenu.vue')['default']
ElButton: typeof import('element-plus/es')['ElButton']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+ ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDropdown: typeof import('element-plus/es')['ElDropdown']
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+ ElForm: typeof import('element-plus/es')['ElForm']
+ ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
+ ElOption: typeof import('element-plus/es')['ElOption']
ElRadio: typeof import('element-plus/es')['ElRadio']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+ ElRow: typeof import('element-plus/es')['ElRow']
+ ElSelect: typeof import('element-plus/es')['ElSelect']
FactorRadio: typeof import('./components/monitor/FactorRadio.vue')['default']
MapToolbox: typeof import('./components/map/MapToolbox.vue')['default']
+ OptionDevice: typeof import('./components/search/OptionDevice.vue')['default']
+ OptionMission: typeof import('./components/search/OptionMission.vue')['default']
+ OptionTime: typeof import('./components/search/OptionTime.vue')['default']
+ OptionType: typeof import('./components/search/OptionType.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
+ SearchBar: typeof import('./components/search/SearchBar.vue')['default']
}
}
diff --git a/src/components/monitor/FactorRadio.vue b/src/components/monitor/FactorRadio.vue
index a5ebb94..8d8d1c6 100644
--- a/src/components/monitor/FactorRadio.vue
+++ b/src/components/monitor/FactorRadio.vue
@@ -14,16 +14,16 @@
// 鐩戞祴鍥犲瓙鍗曢�夋
import { radioOptions } from '@/constant/radio-options';
export default {
- emits:['change'],
+ emits: ['change'],
data() {
return {
radio: radioOptions.type0[0].value,
options: radioOptions.type0
};
},
- method:{
+ method: {
handleChange(value) {
- this.$emit('change', value)
+ this.$emit('change', value);
// todo 鍦板浘3d鍥惧儚鍒囨崲灞曠ず鐩戞祴鍥犲瓙
}
}
diff --git a/src/components/search/OptionDevice.vue b/src/components/search/OptionDevice.vue
new file mode 100644
index 0000000..d63fe7c
--- /dev/null
+++ b/src/components/search/OptionDevice.vue
@@ -0,0 +1,59 @@
+<template>
+ <el-form-item label="璁惧">
+ <el-select
+ :model-value="modelValue"
+ @change="handleChange"
+ placeholder="璁惧"
+ size="small"
+ class="w-120"
+ >
+ <el-option
+ v-for="(s, i) in deviceList"
+ :key="i"
+ :label="s.label"
+ :value="s.value"
+ />
+ </el-select>
+ </el-form-item>
+</template>
+
+<script>
+export default {
+ props: {
+ type: String,
+ modelValue: String
+ },
+ emits: ['update:modelValue'],
+ data() {
+ return {};
+ },
+ computed: {
+ deviceList() {
+ const t = this.type ? this.type : '0a';
+ return [1, 2, 3].map((v) => {
+ const text = `${t}000000000${v}`;
+ return {
+ label: text,
+ value: text
+ };
+ });
+ }
+ },
+ watch: {
+ deviceList(nV, oV) {
+ if (nV != oV) {
+ this.handleChange(nV[0].value);
+ }
+ }
+ },
+ methods: {
+ handleChange(value) {
+ this.$emit('update:modelValue', value);
+ }
+ },
+ mounted() {
+ this.handleChange(this.deviceList[0].value);
+ }
+};
+</script>
+<style scoped></style>
diff --git a/src/components/search/OptionMission.vue b/src/components/search/OptionMission.vue
new file mode 100644
index 0000000..8e200aa
--- /dev/null
+++ b/src/components/search/OptionMission.vue
@@ -0,0 +1,71 @@
+<template>
+ <el-form-item label="浠诲姟">
+ <el-select
+ :model-value="modelValue"
+ @change="handleChange"
+ placeholder="浠诲姟"
+ size="small"
+ class="w-150"
+ >
+ <el-option
+ v-for="(s, i) in missionList"
+ :key="i"
+ :label="s.label"
+ :value="s.value"
+ />
+ </el-select>
+ </el-form-item>
+</template>
+
+<script>
+import missionApi from '../../api/missionApi';
+import { useFetchData } from '@/composables/fetchData';
+
+export default {
+ setup() {
+ const { loading, fetchData } = useFetchData();
+ return { loading, fetchData };
+ },
+ props: {
+ type: String,
+ modelValue: String
+ },
+ emits: ['update:modelValue'],
+ data() {
+ return {
+ missionList: []
+ };
+ },
+ methods: {
+ fetchMission() {
+ this.fetchData((page, pageSize) => {
+ return missionApi
+ .fethchMission({ type: this.type, page, pageSize })
+ .then((res) => {
+ this.missionList = res.data.map((item) => {
+ return {
+ label: item.missionCode,
+ value: item.missionCode
+ };
+ });
+ if (this.missionList.length > 0) {
+ this.handleChange(this.missionList[0].value);
+ }
+ return res.head;
+ });
+ });
+ },
+ handleChange(value) {
+ this.$emit('update:modelValue', value);
+ }
+ },
+ mounted() {
+ this.fetchMission();
+ }
+};
+</script>
+<style scoped>
+/* :deep() .el-form-item__label {
+ color: red !important;
+} */
+</style>
diff --git a/src/components/search/OptionTime.vue b/src/components/search/OptionTime.vue
new file mode 100644
index 0000000..0f352f7
--- /dev/null
+++ b/src/components/search/OptionTime.vue
@@ -0,0 +1,40 @@
+<template>
+ <el-form-item label="鏃堕棿">
+ <el-date-picker
+ v-model="date"
+ @change="handleChange"
+ :type="type"
+ start-placeholder="閫夋嫨寮�濮嬫椂闂�"
+ end-placeholder="閫夋嫨缁撴潫鏃堕棿"
+ size="small"
+ class="w-150"
+ />
+ </el-form-item>
+</template>
+
+<script>
+export default {
+ props: {
+ modelValue: Array,
+ type: {
+ type: String,
+ default: 'datetimerange'
+ }
+ },
+ emits: ['update:modelValue'],
+ data() {
+ return {
+ date: this.modelValue
+ };
+ },
+ methods: {
+ handleChange(value) {
+ this.$emit('update:modelValue', value);
+ }
+ },
+ mounted() {
+ // this.handleChange();
+ }
+};
+</script>
+<style scoped></style>
diff --git a/src/components/search/OptionType.vue b/src/components/search/OptionType.vue
new file mode 100644
index 0000000..5b9334f
--- /dev/null
+++ b/src/components/search/OptionType.vue
@@ -0,0 +1,54 @@
+<template>
+ <el-form-item label="绫诲瀷">
+ <el-select
+ :model-value="modelValue"
+ @change="handleChange"
+ placeholder="绫诲瀷"
+ size="small"
+ class="w-80"
+ >
+ <el-option
+ v-for="(s, i) in typeList"
+ :key="i"
+ :label="s.label"
+ :value="s.value"
+ />
+ </el-select>
+ </el-form-item>
+</template>
+
+<script>
+export default {
+ props: {
+ modelValue: String
+ },
+ emits: ['update:modelValue'],
+ data() {
+ return {
+ typeList: [
+ {
+ label: '杞﹁浇',
+ value: '0a'
+ },
+ {
+ label: '鏃犱汉鏈�',
+ value: '0b'
+ },
+ {
+ label: '鏃犱汉鑸�',
+ value: '0c'
+ }
+ ]
+ };
+ },
+ methods: {
+ handleChange(value) {
+ this.$emit('update:modelValue', value);
+ }
+ },
+ mounted() {
+ this.handleChange(this.typeList[0].value);
+ }
+};
+</script>
+<style scoped></style>
diff --git a/src/components/search/SearchBar.vue b/src/components/search/SearchBar.vue
new file mode 100644
index 0000000..03e4082
--- /dev/null
+++ b/src/components/search/SearchBar.vue
@@ -0,0 +1,33 @@
+<template>
+ <BaseCard class="map-date-selector">
+ <template #content>
+ <el-form :inline="true">
+ <OptionMission v-model="formSearch.missionCode"></OptionMission>
+ <OptionType v-model="formSearch.type"></OptionType>
+ <OptionDevice
+ :type="formSearch.type"
+ v-model="formSearch.deviceCode"
+ ></OptionDevice>
+ <OptionTime v-model="formSearch.timeArray"></OptionTime>
+ </el-form>
+ </template>
+ </BaseCard>
+</template>
+
+<script>
+// 鎼滅储妗�
+export default {
+ data() {
+ return {
+ formSearch: {
+ missionCode: '',
+ type: '',
+ deviceCode: '',
+ timeArray: []
+ }
+ };
+ },
+ method: {}
+};
+</script>
+<style scoped></style>
diff --git a/src/composables/fetchData.js b/src/composables/fetchData.js
new file mode 100644
index 0000000..fb8cff0
--- /dev/null
+++ b/src/composables/fetchData.js
@@ -0,0 +1,50 @@
+// 鎺ュ彛鏁版嵁鐨勮幏鍙�
+import { ref, watch, computed } from 'vue';
+
+export function useFetchData(page_size) {
+ // 鍒嗛〉淇℃伅
+ const page = ref(1);
+ const pageNum = ref(1);
+ const pageSize = ref(page_size ? page_size : 20);
+ const total = ref(0);
+ watch(page, (nValue, oValue) => {
+ if (nValue != oValue) {
+ fetchData();
+ }
+ });
+ watch(pageSize, (nValue, oValue) => {
+ if (nValue != oValue) {
+ fetchData();
+ }
+ });
+
+ // 鍔犺浇鐘舵��, 0: 鍔犺浇瀹屾垚; 1: 鍔犺浇涓�; 2: 宸插叏閮ㄥ姞杞�; 3: 鍔犺浇澶辫触;
+ const loadStatus = ref(0);
+
+ const loading = computed(() => {
+ return loadStatus.value == 1;
+ });
+
+ // 鏁版嵁鑾峰彇
+ function fetchData(fetch) {
+ loadStatus.value = 1;
+ fetch(page.value, pageSize.value)
+ .then((pageInfo) => {
+ if (pageInfo) {
+ page.value = pageInfo.page ? pageInfo.page : 1;
+ pageNum.value = pageInfo.pageNum ? pageInfo.pageNum : 1;
+ total.value = pageInfo.total ? pageInfo.total : 0;
+ }
+
+ loadStatus.value = 0;
+ })
+ .catch(() => {
+ loadStatus.value = 3;
+ })
+ .finally(() => {
+ loadStatus.value = 2;
+ });
+ }
+
+ return { page, pageNum, pageSize, total, loadStatus, loading, fetchData };
+}
diff --git a/src/constant/factor-name.js b/src/constant/factor-name.js
new file mode 100644
index 0000000..d8b551a
--- /dev/null
+++ b/src/constant/factor-name.js
@@ -0,0 +1,29 @@
+/**
+ * 鐩戞祴鍥犲瓙鍚嶇О
+ */
+export const factorName = {
+ NO2: 'NO2', //2
+ CO: 'CO', //4
+ H2S: 'H2S', //6
+ SO2: 'SO2', //3
+ O3: 'O3', //1
+ PM25: 'PM2.5', //7
+ PM10: 'PM10', //8
+ TEMPERATURE: '娓╁害',
+ HUMIDITY: '婀垮害',
+ VOC: 'TVOC', //5
+ // 'NOI': 'NOI', //9
+ LNG: '缁忓害',
+ LAT: '绾害',
+ VELOCITY: '杞﹂��',
+ TIME: '鏃堕棿',
+ WIND_SPEED: '椋庨��',
+ WIND_DIRECTION: '椋庡悜',
+ HEIGHT: '楂樺害',
+
+ TMP: '娓╁害', //1
+ spC: '鐢靛鐜�', //2
+ tur: '娴婂害', //3
+ DO: '婧惰В姘�', //4
+ PH: 'PH' //5
+};
diff --git a/src/constant/factor-unit.js b/src/constant/factor-unit.js
new file mode 100644
index 0000000..767a03a
--- /dev/null
+++ b/src/constant/factor-unit.js
@@ -0,0 +1,29 @@
+/**
+ * 鐩戞祴鍥犲瓙鍗曚綅
+ */
+export const factorUnit = {
+ NO2: '渭g/m鲁', //2
+ CO: 'mg/m鲁', //4
+ H2S: '渭g/m鲁', //6
+ SO2: '渭g/m鲁', //3
+ O3: '渭g/m鲁', //1
+ PM25: '渭g/m鲁', //7
+ PM10: '渭g/m鲁', //8
+ TEMPERATURE: '鈩�',
+ HUMIDITY: '%',
+ VOC: '渭g/m鲁', //5
+ NOI: '渭g/m鲁', //9
+ LNG: '',
+ LAT: '',
+ VELOCITY: 'km/s',
+ TIME: '鏃堕棿',
+ WIND_SPEED: 'm/s',
+ WIND_DIRECTION: '掳',
+ HEIGHT: 'm',
+
+ TMP: '鈩�', //1
+ spC: '渭S/cm', //2, 鐢靛鐜囷紙瑗块棬瀛�/绫筹級
+ tur: 'NTU', //3, 娴婂害
+ DO: 'mg/L', //4, 婧惰В姘�
+ PH: '' //5
+};
diff --git a/src/constant/wind-dir.js b/src/constant/wind-dir.js
new file mode 100644
index 0000000..f7a24c3
--- /dev/null
+++ b/src/constant/wind-dir.js
@@ -0,0 +1,22 @@
+/**
+ * 椋庡悜涓枃杞瘧
+ */
+export function windDir(angle) {
+ if (angle == 0) {
+ return '鍖楅';
+ } else if (angle > 0 && angle < 90) {
+ return '涓滃寳椋�';
+ } else if (angle == 90) {
+ return '涓滈';
+ } else if (angle > 90 && angle < 180) {
+ return '涓滃崡椋�';
+ } else if (angle == 180) {
+ return '鍗楅';
+ } else if (angle > 180 && angle < 270) {
+ return '瑗垮崡椋�';
+ } else if (angle == 270) {
+ return '瑗块';
+ } else if (angle > 270 && angle < 360) {
+ return '瑗垮寳椋�';
+ }
+}
diff --git a/src/stores/toolbox.js b/src/stores/toolbox.js
new file mode 100644
index 0000000..639efcf
--- /dev/null
+++ b/src/stores/toolbox.js
@@ -0,0 +1,26 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+
+export const useToolboxStore = defineStore('toolbox', () => {
+ // 寮�鍏冲湴鐗╂爣娉�
+ const featuresStatus = ref(false);
+ // 寮�鍏冲崼鏄熷湴鍥�
+ const satelliteStatus = ref(false);
+ // 寮�鍏虫帶鍒剁綏鐩�
+ const controlbarStatus = ref(false);
+ // 寮�鍏冲潗鏍囨嬀鍙�
+ const coorPickStatus = ref(false);
+ // 寮�鍏虫暟鎹爣璁�
+ const dataMarkerStatus = ref(true);
+ // 寮�鍏虫暟鎹脊妗�
+ const dataDialogStatus = ref(true);
+
+ return {
+ featuresStatus,
+ satelliteStatus,
+ controlbarStatus,
+ coorPickStatus,
+ dataMarkerStatus,
+ dataDialogStatus
+ };
+});
diff --git a/src/styles/base.scss b/src/styles/base.scss
index 4347524..d993f48 100644
--- a/src/styles/base.scss
+++ b/src/styles/base.scss
@@ -71,7 +71,7 @@
default: var(--el-component-size-default),
large: var(--el-component-size-large)
);
-$ws: (20px, 40px, 60px, 100px, 150px, 300px);
+$ws: (20, 40, 60, 80, 100, 120, 150, 300);
@each $name, $value in $csize {
.w-#{$name} {
width: #{$value};
@@ -82,10 +82,10 @@
}
@each $i in $ws {
.w-#{$i} {
- width: #{$i};
+ width: #{$i}px;
}
.h-#{$i} {
- height: #{$i};
+ height: #{$i}px;
}
}
diff --git a/src/styles/elementUI.scss b/src/styles/elementUI.scss
new file mode 100644
index 0000000..281d6e2
--- /dev/null
+++ b/src/styles/elementUI.scss
@@ -0,0 +1,15 @@
+:root {
+ // --el-text-color-regular: #ffffff;
+}
+
+.el-form-item {
+ margin-bottom: 0px;
+}
+
+.el-form-item__label {
+ color: white;
+}
+
+// .el-radio {
+// --el-radio-text-color: white;
+// }
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 7a8ddf5..23285cd 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1 +1,2 @@
@use './base.scss';
+@use './elementUI.scss';
diff --git a/src/utils/map/3dLayer.js b/src/utils/map/3dLayer.js
index d0ad682..251ce09 100644
--- a/src/utils/map/3dLayer.js
+++ b/src/utils/map/3dLayer.js
@@ -1,3 +1,7 @@
+/**
+ * 楂樺痉鍦板浘3D鍥惧舰缁樺埗鐩稿叧
+ */
+
import { map, object3Dlayer } from './index_old';
// 3d鍥惧舰
@@ -25,17 +29,151 @@
}
const fDatas = _factorDatas;
const factor = _factor;
- // MapUtil._object3Dlayer.clear()
- // MapUtil.drawMesh(f.lnglats, f.heights, f.type, false)
- MapUtil.drawMesh2(fDatas, factor);
- MapUtil.drawMarker();
+ drawMesh(fDatas, factor);
+}
+
+var _maxHeight = 1000,
+ _minHeight = 100,
+ _lastZoom = -1;
+/**
+ * 鑾峰彇褰撳墠鍦板浘缂╂斁绛夌骇涓嬬殑缁樺埗楂樺害缂╂斁姣斾緥
+ * @param {*} minH 褰撳墠鐩戞祴鏁版嵁鐨勬渶灏忛珮搴�
+ * @param {*} maxH 褰撳墠鐩戞祴鏁版嵁鐨勬渶澶ч珮搴�
+ */
+function _getScale(minH, maxH) {
+ var zoom = map.getZoom();
+ if (_lastZoom == -1) {
+ _lastZoom = zoom;
+ } else if (_lastZoom <= 8) {
+ _lastZoom = zoom;
+ return;
+ } else if (_lastZoom >= 18) {
+ _lastZoom = zoom;
+ return;
+ }
+ if (zoom <= 8) {
+ _maxHeight = 10000;
+ _minHeight = 1000;
+ } else if (zoom <= 9) {
+ _maxHeight = 9000;
+ _minHeight = 900;
+ } else if (zoom <= 10) {
+ _maxHeight = 8000;
+ _minHeight = 800;
+ } else if (zoom <= 11) {
+ _maxHeight = 7000;
+ _minHeight = 700;
+ } else if (zoom <= 12) {
+ _maxHeight = 6000;
+ _minHeight = 600;
+ } else if (zoom <= 14) {
+ _maxHeight = 5000;
+ _minHeight = 500;
+ } else if (zoom <= 15) {
+ _maxHeight = 4500;
+ _minHeight = 450;
+ } else if (zoom <= 16) {
+ _maxHeight = 4000;
+ _minHeight = 400;
+ } else if (zoom <= 17) {
+ _maxHeight = 2500;
+ _minHeight = 250;
+ } else if (zoom > 17) {
+ _maxHeight = 1000;
+ _minHeight = 100;
+ }
+
+ var scale = (_maxHeight - _minHeight) / (maxH - minH);
+ return scale;
+}
+
+/**
+ * 缁樺浘
+ */
+function drawMesh(fDatas, factor, center, merge) {
+ const lnglats_GD = fDatas.lnglats_GD;
+ const coors = fDatas.coors_GD;
+ const heights = factor.heights;
+ const colors = factor.colors;
+ const bColor = factor.bottomColor;
+ if (center) {
+ map.setZoomAndCenter(16, center);
+ }
+
+ // eslint-disable-next-line no-undef
+ var cylinder = new AMap.Object3D.Mesh();
+ cylinder.backOrFront = 'both';
+ cylinder.transparent = true;
+
+ var geometry = cylinder.geometry;
+
+ const scale = _getScale(_minH, _maxH);
+ for (let i = 0; i < coors.length; i++) {
+ var r = lnglats_GD[i];
+ var lastP = lnglats_GD[i - 1];
+ var p = coors[i];
+ var h = (heights[i] - _minH) * scale + _minHeight;
+ if (heights[i] == -1) {
+ h = -1;
+ }
+
+ geometry.vertices.push(p.x, p.y, 0); //搴曢儴椤剁偣
+ geometry.vertices.push(p.x, p.y, 0 - h); //椤堕儴椤剁偣
+
+ if (i > 0) {
+ // eslint-disable-next-line no-undef
+ var distance = AMap.GeometryUtil.distance(r, lastP);
+ //涓や釜鏁版嵁鐐规渶灏忛棿闅旀椂闂翠负4s锛屽亣璁捐溅閫熸寜鐓�120km/h璁＄畻锛�4s琛岄┒鏈�澶ц窛绂讳綔涓�132绫筹紝
+ //璁惧畾瓒呰繃1鍒嗛挓鐨勬暟鎹粯鍒剁壒娈婄殑杩炵嚎
+ if (distance <= 500 && h != -1) {
+ var bottomIndex = i * 2;
+ var topIndex = bottomIndex + 1;
+ var lastBottomIndex = bottomIndex - 2;
+ var lastTopIndex = bottomIndex - 1;
+ geometry.faces.push(bottomIndex, topIndex, lastTopIndex);
+ geometry.faces.push(bottomIndex, lastBottomIndex, lastTopIndex);
+ }
+ }
+
+ // var bColor = bColor
+ var tColor = colors[i];
+ geometry.vertexColors.push.apply(geometry.vertexColors, bColor); //搴曢儴椤剁偣棰滆壊
+ geometry.vertexColors.push.apply(geometry.vertexColors, tColor); //椤堕儴椤剁偣棰滆壊
+ }
+
+ // 7.鏍规嵁鍚堝苟閫夐」閲嶇疆鎴栨柊澧炲綋鍓嶇紦瀛樻暟鎹�
+ if (merge != true) {
+ _factorDatas = fDatas;
+ _factor = factor;
+ if (_cylinder != undefined) {
+ object3Dlayer.remove(_cylinder);
+ }
+ } else {
+ // _factorDatas.lnglats.push.apply(
+ // _factorDatas.lnglats,
+ // lnglats_GD
+ // );
+ // _factorDatas.coors.push.apply(_factorDatas.coors, coors);
+ // _factorDatas.heights.push.apply(_factorDatas.heights, heights);
+ // _factorDatas.colors.push.apply(_factorDatas.colors, colors);
+ // _factorDatas.bottomColor = bColor;
+ }
+ object3Dlayer.add(cylinder);
+ /**************test ****************/
+ // object3Dlayer.on('mouseover', function (e) {
+ // console.log(
+ // `榧犳爣绉诲叆瑕嗙洊鐗�! [${e.lnglat.getlng()}, ${e.lnglat.getLat()}]`
+ // );
+ // });
+ /**************test ****************/
+ _cylinder = cylinder;
}
export default {
/**
* 缁樺埗3D璧拌璺嚎鍥�
* @param fDatas 瀹屾暣鐩戞祴鏁版嵁
- * @param factor 褰撳墠灞曠ず鐨勭洃娴嬪洜瀛愮殑鍊紇alue
+ * @param factor 褰撳墠灞曠ず鐨勭洃娴嬪洜瀛愬璞�
* @param merge 鏄惁鍜屼箣鍓嶇粯鍒剁殑鍥惧舰鍚堝苟
* @param setCenter 闀滃ご鏄惁鑷姩绉诲姩鑷冲浘褰腑蹇�
*/
@@ -44,7 +182,7 @@
const heights = factor.heights;
// 1.鍏抽棴鍦板浘缂╂斁鐩戝惉
- map.off('zoomend', this._onMapZoom);
+ map.off('zoomend', onMapZoom);
// 2.璁＄畻缁樺浘楂樺害鐨勮竟鐣屽��
if (merge != true) {
@@ -70,18 +208,19 @@
break;
}
}
+ // eslint-disable-next-line no-undef
center = new AMap.LngLat(...p);
}
// 5.缁樺埗3D鍥惧舰
- drawMesh2(fDatas, factor, center, merge);
+ drawMesh(fDatas, factor, center, merge);
// 缂╂斁鍦板浘鍒板悎閫傜殑瑙嗛噹绾у埆
// map.setFitView()
// 6.寮�鍚湴鍥剧缉鏀剧洃鍚�
if (lnglats_GD.length > 0) {
- map.on('zoomend', this._onMapZoom);
+ map.on('zoomend', onMapZoom);
}
}
};
diff --git a/src/utils/map/calculate.js b/src/utils/map/calculate.js
new file mode 100644
index 0000000..058531f
--- /dev/null
+++ b/src/utils/map/calculate.js
@@ -0,0 +1,59 @@
+/**
+ * 鍦板浘鍧愭爣鐩稿叧璁＄畻
+ */
+
+import { map } from './index_old';
+
+export default {
+ /**
+ * 鏍规嵁鍧愭爣鐐广�佽窛绂诲拰瑙掑害锛屽緱鍒板彟涓�涓潗鏍囩偣
+ * @param {*} pos
+ * @param {*} distance 绫�
+ * @param {*} angle
+ */
+ getLatLon: function (pos, distance, angle) {
+ var Ea = 6378137; // 璧ら亾鍗婂緞
+ var Eb = 6356725; // 鏋佸崐寰�
+ var dx = distance * Math.sin((angle * Math.PI) / 180);
+ var dy = distance * Math.cos((angle * Math.PI) / 180);
+ var ec = Eb + ((Ea - Eb) * (90.0 - pos[1])) / 90.0;
+ var ed = ec * Math.cos((pos[1] * Math.PI) / 180);
+ var lng = ((dx / ed + (pos[0] * Math.PI) / 180.0) * 180.0) / Math.PI;
+ var lat = ((dy / ec + (pos[1] * Math.PI) / 180.0) * 180.0) / Math.PI;
+ return [lng, lat];
+ },
+
+ /**
+ * 灏嗕簩缁存暟缁勫舰寮忕殑鍧愭爣鐐规暟缁勮浆鎹负楂樺痉鍦板浘涓� LngLat 绫�
+ * @param {*} lnglats
+ * @returns
+ */
+ parse2LngLat: function (lnglats) {
+ // 鍒涘缓鍖呭惈4涓妭鐐圭殑鎶樼嚎鍙婃枃瀛楁爣娉�
+ var path = [];
+ lnglats.forEach(function (value) {
+ // eslint-disable-next-line no-undef
+ path.push(new AMap.LngLat(value[0], value[1]));
+ });
+ return path;
+ },
+
+ /**
+ * 灏嗛珮寰峰湴鍥剧殑缁忕含搴﹀潗鏍囪浆鎹负鍥惧舰鍧愭爣
+ * @param {*} lnglats_GD
+ * @returns
+ */
+ lngLatToGeodeticCoord: function (lnglats_GD) {
+ var coors_GD = [];
+
+ for (let i = 0; i < lnglats_GD.length; i++) {
+ var gd = lnglats_GD[i];
+ // eslint-disable-next-line no-undef
+ var r = new AMap.LngLat(...gd);
+ var p = map.lngLatToGeodeticCoord(r);
+ // **璁板綍杞崲鍚庣殑3D鍦板浘鍥惧舰鍧愭爣
+ coors_GD.push(p);
+ }
+ return coors_GD;
+ }
+};
diff --git a/src/utils/map/dialog.js b/src/utils/map/dialog.js
new file mode 100644
index 0000000..54292bd
--- /dev/null
+++ b/src/utils/map/dialog.js
@@ -0,0 +1,260 @@
+import { factorName } from '../../constant/factor-name';
+import { factorUnit } from '../../constant/factor-unit';
+import { windDir } from '../../constant/wind-dir';
+
+export const DialogUtil = {
+ show: true,
+ toggleDataDialog() {
+ this.show = !this.show;
+ if (this.show) {
+ return '鏁版嵁寮规锛氬紑';
+ } else {
+ return '鏁版嵁寮规锛氬叧';
+ }
+ },
+ /**
+ * 鍒涘缓寮瑰嚭妗�
+ * @param {*} factorDatas 鐩戞祴鏁版嵁
+ * @param {*} i 褰撳墠鏄剧ず鐩戞祴鏁版嵁绱㈠紩
+ * @param {*} onClose 鍏抽棴寮瑰嚭妗嗗洖璋�
+ * @returns
+ */
+ createInfoWindow(factorDatas, i, onClose) {
+ let m = {
+ data: factorDatas,
+ index: i,
+ window: '',
+ close: onClose
+ };
+ // eslint-disable-next-line no-undef
+ m.window = new AMap.InfoWindow({
+ isCustom: true, //浣跨敤鑷畾涔夌獥浣�
+ content: this.createWindowContent(m),
+ // eslint-disable-next-line no-undef
+ offset: new AMap.Pixel(16, -45)
+ });
+ return m.window;
+ },
+
+ createInfoWindow2(factorData, onClose) {
+ let m = {
+ time: factorData.time,
+ factorList: factorData.values,
+ window: '',
+ close: onClose
+ };
+ // eslint-disable-next-line no-undef
+ m.window = new AMap.InfoWindow({
+ isCustom: true, //浣跨敤鑷畾涔夌獥浣�
+ content: this.createWindowContent2(m),
+ // eslint-disable-next-line no-undef
+ offset: new AMap.Pixel(16, -45)
+ });
+ return m.window;
+ },
+ /**
+ * 绔欑偣鏍囪淇℃伅绐椾綋
+ */
+ createWindowContent: function (marker) {
+ const factorDatas = marker.data;
+ const i = marker.index;
+ const time = factorDatas.times[i];
+ const factorList = [];
+ Object.keys(factorDatas.factor).forEach((k) => {
+ var f = factorDatas.factor[k].datas[i];
+ factorList.push(f);
+ });
+ marker.time = time;
+ marker.factorList = factorList;
+ return this.createWindowContent2(marker);
+ },
+
+ createWindowContent2(marker) {
+ const time = marker.time;
+ const factorList = marker.factorList;
+ //瀹炰緥鍖栦俊鎭獥浣�
+ // var title = '<div>' + site.name + '</div>' + '<div class="sub-title">缂栧彿:' + site.code + '</div>',
+ var title = '',
+ content = '',
+ tag = '';
+
+ tag += "<div class='time'>" + '鏃堕棿: ' + time;
+
+ // 閬嶅巻绔欑偣鏁版嵁涓殑姣忎竴椤圭洃娴嬪洜瀛愶紝鐢熸垚椤甸潰
+ content += "<div><table class='text-table'>";
+ var _contents = new Map();
+ factorList.forEach((f) => {
+ // 鍒犻�変笉鏄剧ず鐨勫洜瀛�
+ if (
+ f.factorName == 'NOI' ||
+ f.factorName == 'LNG' ||
+ f.factorName == 'LAT' ||
+ f.factorName == 'VELOCITY' ||
+ f.factorName == 'TIME' ||
+ f.factorName == 'HEIGHT'
+ ) {
+ return;
+ }
+
+ var factor = factorName[f.factorName];
+ var n = 1;
+ if (f.factorName == 'WIND_DIRECTION') {
+ n = 0;
+ }
+ var v = f.factorData.toFixed(n);
+ var unit = factorUnit[f.factorName];
+ if (f.factorName == 'CO') {
+ unit = '渭g/m鲁';
+ }
+ if (f.factorName == 'WIND_DIRECTION') {
+ unit += '(' + windDir(f.factorData) + ')';
+ }
+ var c = '<tr>';
+ if (f.factorName == 'H2S' || f.factorName == 'PM10') {
+ c = "<tr class='divide'>";
+ }
+ c += '<td>' + factor + '</td>';
+ c += '<td>' + ': ' + '</td>';
+ c += '<td>' + v + '</td>';
+ c += "<td class='last-col'>" + unit + '</td>';
+ c += '</tr>';
+
+ _contents.set(f.factorName, c);
+ });
+ var orderList = [
+ 'VOC',
+ 'H2S',
+ 'NO2',
+ 'CO',
+ 'SO2',
+ 'O3',
+ 'PM25',
+ 'PM10',
+ 'TEMPERATURE',
+ 'HUMIDITY',
+ 'WIND_SPEED',
+ 'WIND_DIRECTION'
+ ];
+ orderList.forEach((e) => {
+ content += _contents.get(e);
+ });
+
+ // content +=
+
+ content += '</table></div>';
+
+ var info = document.createElement('div');
+ // info.className = "custom-info input-card content-window-card";
+ info.className = 'flexbox-col';
+
+ //鍙互閫氳繃涓嬮潰鐨勬柟寮忎慨鏀硅嚜瀹氫箟绐椾綋鐨勫楂�
+ //info.style.width = "400px";
+ // 瀹氫箟椤堕儴鏍囬
+ var top = document.createElement('div');
+ // top.className = "info-top";
+ top.className = 'ff-content ff-content-top-left ff-content-small-borderless-t info-top';
+ var top_b = document.createElement('div');
+ top_b.className = 'ff-border-bottom';
+ var top_t = document.createElement('div');
+ top_t.className = 'ff-border-top';
+ var top_c = document.createElement('div');
+ top_c.className = 'ff-border-content flexbox flex-space-between';
+
+ var titleD = document.createElement('div');
+ var closeX = document.createElement('i');
+ titleD.innerHTML = title;
+ closeX.className = 'fa fa-times';
+ // eslint-disable-next-line no-undef
+ $(closeX).attr('aria-hidden', 'true');
+ closeX.onclick = function () {
+ marker.close();
+ marker.window.close();
+ };
+
+ top_c.appendChild(titleD);
+ top_c.appendChild(closeX);
+
+ top_t.appendChild(top_c);
+ top.appendChild(top_b);
+ top.appendChild(top_t);
+
+ info.appendChild(top);
+
+ // 瀹氫箟涓儴鍐呭
+ var refreshV = document.createElement('div');
+ refreshV.className = 'refresh-btn';
+ var refresh = document.createElement('i');
+ refresh.className = 'fa fa-refresh';
+ // eslint-disable-next-line no-undef
+ $(refresh).attr('aria-hidden', 'true');
+ // eslint-disable-next-line no-undef
+ $(refresh).css('color', '#ffffffc0');
+ // eslint-disable-next-line no-undef
+ $(refresh).css('cursor', 'pointer');
+ refresh.onclick = function () {
+ // $(this).addClass('fa-spin')
+ // that.fetchingData(site.code, function () {
+ // setTimeout(() => {
+ // $(this).removeClass('fa-spin')
+ // }, 1000);
+ // }.bind(this))
+ };
+ var m_top = document.createElement('div');
+ m_top.className = 'ff-content ff-content-left ff-content-medium';
+ var m_top_b = document.createElement('div');
+ m_top_b.className = 'ff-border-bottom';
+ var m_top_t = document.createElement('div');
+ m_top_t.className = 'ff-border-top';
+ var m_top_c = document.createElement('div');
+ m_top_c.className = 'ff-border-content';
+ var m_top_f = document.createElement('div');
+ m_top_f.className = 'ff-footer flexbox-col flex-center';
+ var m_top_tr = document.createElement('div');
+ m_top_tr.className = 'ff-triangle';
+ var m_top_trb = document.createElement('div');
+ m_top_trb.className = 'ff-triangle-border';
+ refreshV.appendChild(refresh);
+ // m_top_c.appendChild(refreshV);
+
+ var middle = document.createElement('div');
+ middle.className = 'info-middle';
+ middle.innerHTML = content;
+ m_top_f.innerHTML = tag;
+
+ m_top_c.appendChild(middle);
+
+ m_top_t.appendChild(m_top_c);
+ m_top_tr.appendChild(m_top_trb);
+
+ m_top.appendChild(m_top_b);
+ m_top.appendChild(m_top_t);
+ m_top.appendChild(m_top_f);
+ m_top.appendChild(m_top_tr);
+
+ info.appendChild(m_top);
+
+ // 瀹氫箟搴曢儴鍐呭
+ var bottom = document.createElement('div');
+ bottom.className = 'info-bottom';
+ bottom.style.position = 'relative';
+ bottom.style.top = '0px';
+ bottom.style.margin = '0 auto';
+ var sharp = document.createElement('img');
+ sharp.src = 'https://webapi.amap.com/images/sharp.png';
+ bottom.appendChild(sharp);
+ info.appendChild(bottom);
+ return info;
+ },
+
+ openNewWindow(factorDatas, i, map, position, onClose) {
+ if (!this.show) return;
+ const window = this.createInfoWindow(factorDatas, i, onClose);
+ window.open(map, position);
+ },
+
+ openNewWindow2(factorData, map, position, onClose) {
+ if (!this.show) return;
+ const window = this.createInfoWindow2(factorData, onClose);
+ window.open(map, position);
+ }
+};
diff --git a/src/utils/map/index_old.js b/src/utils/map/index_old.js
index dbe9f78..69704ff 100644
--- a/src/utils/map/index_old.js
+++ b/src/utils/map/index_old.js
@@ -1,5 +1,8 @@
/* eslint-disable no-undef */
// import '@/lib/AMap';
+import { useToolboxStore } from '@/stores/toolbox';
+
+const toolboxStore = useToolboxStore();
var mapInitDone = false;
var onMapMountedEvents = [];
@@ -58,6 +61,7 @@
satellite = new AMap.TileLayer.Satellite();
satellite.show();
map.add([satellite]);
+ toolboxStore.featuresStatus = true;
_initControlbar();
// _initMouseTool();
@@ -73,6 +77,7 @@
}
});
map.addControl(controlbar);
+ toolboxStore.controlbarStatus = true;
}
// 榧犳爣缁樺浘鍒濆鍖�
diff --git a/src/utils/map/marks.js b/src/utils/map/marks.js
new file mode 100644
index 0000000..94144d2
--- /dev/null
+++ b/src/utils/map/marks.js
@@ -0,0 +1,89 @@
+/**
+ * 楂樺痉鍦板浘鐐规爣璁扮粯鍒剁浉鍏�
+ */
+
+import { map } from './index_old';
+import sector from './sector';
+import { DialogUtil } from './dialog';
+import { useToolboxStore } from '@/stores/toolbox';
+
+const toolboxStore = useToolboxStore();
+
+var _massMarks = undefined;
+
+export default {
+ /**
+ * 缁樺埗娴烽噺鐐规爣璁�
+ * @param fDatas 瀹屾暣鐩戞祴鏁版嵁
+ * @param _factor 褰撳墠灞曠ず鐨勭洃娴嬪洜瀛愬璞�
+ */
+ drawMassMarks(fDatas, _factor, onClick) {
+ if (!toolboxStore.dataMarkerStatus) {
+ return;
+ }
+ if (_massMarks) {
+ map.remove(_massMarks);
+ _massMarks = undefined;
+ }
+ const lnglats = fDatas.lnglats_GD;
+ var data = [];
+ for (let i = 0; i < lnglats.length; i++) {
+ data.push({
+ lnglat: lnglats[i], //鐐规爣璁颁綅缃�
+ name: `${fDatas.times[i]}<br/>${_factor.factorName}: ${_factor.datas[i].factorData} mg/m鲁`,
+ id: i
+ });
+ }
+
+ // 鍒涘缓鏍峰紡瀵硅薄
+ var styleObject = {
+ url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
+ // url: './asset/mipmap/ic_up_white.png', // 鍥炬爣鍦板潃
+ // eslint-disable-next-line no-undef
+ size: new AMap.Size(11, 11), // 鍥炬爣澶у皬
+ // eslint-disable-next-line no-undef
+ anchor: new AMap.Pixel(5, 5) // 鍥炬爣鏄剧ず浣嶇疆鍋忕Щ閲忥紝鍩哄噯鐐逛负鍥炬爣宸︿笂瑙�
+ };
+ // eslint-disable-next-line no-undef
+ var massMarks = new AMap.MassMarks(data, {
+ zIndex: 5, // 娴烽噺鐐瑰浘灞傚彔鍔犵殑椤哄簭
+ zooms: [15, 18], // 鍦ㄦ寚瀹氬湴鍥剧缉鏀剧骇鍒寖鍥村唴灞曠ず娴烽噺鐐瑰浘灞�
+ style: styleObject // 璁剧疆鏍峰紡瀵硅薄
+ });
+ massMarks.on('click', (event) => {
+ const i = event.data.id;
+ // 1. 缁樺埗鎵囧舰鍖哄煙
+ sector.drawSector(fDatas, i);
+
+ // 2. 缁樺埗瀵硅瘽妗�
+ DialogUtil.openNewWindow(fDatas, i, map, lnglats[i], () => {
+ // 绉婚櫎鎵囧舰鍖哄煙
+ // clearSector3();
+ });
+
+ // 3. 鑷畾涔夌偣鍑讳簨浠�
+ onClick();
+ });
+ // eslint-disable-next-line no-undef
+ var marker = new AMap.Marker({
+ content: ' ',
+ map: map,
+ // eslint-disable-next-line no-undef
+ offset: new AMap.Pixel(13, 12)
+ });
+ var timeout;
+ massMarks.on('mouseover', (e) => {
+ if (timeout) {
+ clearTimeout(timeout);
+ }
+ marker.setPosition(e.data.lnglat);
+ marker.setLabel({ content: e.data.name });
+ map.add(marker);
+ timeout = setTimeout(() => {
+ map.remove(marker);
+ }, 2000);
+ });
+ _massMarks = massMarks;
+ map.add(massMarks);
+ }
+};
diff --git a/src/utils/map/sector.js b/src/utils/map/sector.js
new file mode 100644
index 0000000..846eff2
--- /dev/null
+++ b/src/utils/map/sector.js
@@ -0,0 +1,232 @@
+import { map, object3Dlayer } from './index_old';
+import calculate from './calculate';
+
+var _defaultDeg = 30,
+ _sector = undefined,
+ _sectorViews = {};
+
+function clearSector() {
+ var list = [];
+ for (const key in _sectorViews) {
+ list.push(_sectorViews[key]);
+ }
+ if (list.length > 0) {
+ map.remove(list);
+ _sectorViews = {};
+ }
+ if (_sector) {
+ object3Dlayer.remove(_sector);
+ }
+}
+
+export default {
+ drawSector(fDatas, i) {
+ const lnglat = fDatas.lnglats_GD[i];
+ let windDir = fDatas.factor[17].datas[i].factorData;
+ let windSpeed = fDatas.factor[16].datas[i].factorData;
+ if (!windDir) windDir = 0;
+ if (!windSpeed) windSpeed = 0;
+
+ if (windSpeed > 10) {
+ return;
+ }
+ if (_sector != undefined) {
+ clearSector();
+ }
+
+ // eslint-disable-next-line no-undef
+ var sector = new AMap.Object3D.Mesh();
+ sector.transparent = true;
+ sector.backOrFront = 'both';
+
+ var unit = 5;
+
+ var sDeg = windDir - _defaultDeg; //鎵囧舰璧峰瑙掑害锛堜互涓婃柟浣滀负0搴︼級
+ // sDeg = sDeg < 0 ? sDeg + 360 : sDeg
+ var eDeg = windDir + _defaultDeg; //鎵囧舰缁撴潫瑙掑害
+ // eDeg = eDeg < 0 ? eDeg + 360 : eDeg
+
+ var distance = windSpeed * 10 * 60; //鍗婂緞(椋庨��*鏃堕棿)
+ var lnglat2 = calculate.getLatLon(lnglat, distance, sDeg);
+ var lnglat3 = calculate.getLatLon(lnglat, distance, windDir);
+ var lnglat4 = calculate.getLatLon(lnglat, distance, eDeg);
+ var list = calculate.parse2LngLat([lnglat, lnglat2, lnglat3, lnglat4]);
+
+ var distance2 = windSpeed * 5 * 60; //鍗婂緞(椋庨��*鏃堕棿)
+ var lnglat2_2 = calculate.getLatLon(lnglat, distance2, sDeg);
+ var lnglat2_3 = calculate.getLatLon(lnglat, distance2, windDir);
+ var lnglat2_4 = calculate.getLatLon(lnglat, distance2, eDeg);
+ var list2 = calculate.parse2LngLat([lnglat2_2, lnglat2_3, lnglat2_4]);
+
+ var p0 = calculate.lngLatToGeodeticCoord([lnglat])[0];
+ var geometry = sector.geometry;
+
+ var count = distance / unit;
+ var unitDeg = (eDeg - sDeg) / count;
+ for (let i = 0; i < count; i++) {
+ var angle1 = sDeg + unitDeg * i;
+ var angle2 = sDeg + unitDeg * (i + 1);
+
+ var l1 = calculate.getLatLon(lnglat, distance, angle1);
+ var l2 = calculate.getLatLon(lnglat, distance, angle2);
+ var l3 = calculate.getLatLon(lnglat, distance2, angle1);
+ var l4 = calculate.getLatLon(lnglat, distance2, angle2);
+
+ var coors = calculate.lngLatToGeodeticCoord([l1, l2, l3, l4]);
+ l1 = coors[0];
+ l2 = coors[1];
+ l3 = coors[2];
+ l4 = coors[3];
+
+ // 鍐呮祴鎵囧舰
+ geometry.vertices.push(p0.x, p0.y, 0);
+ geometry.vertices.push(l3.x, l3.y, 0);
+ geometry.vertices.push(l4.x, l4.y, 0);
+ // 澶栦晶鎵囧舰
+ geometry.vertices.push(l3.x, l3.y, 0);
+ geometry.vertices.push(l4.x, l4.y, 0);
+ geometry.vertices.push(l1.x, l1.y, 0);
+ geometry.vertices.push(l2.x, l2.y, 0);
+ // console.log(l3.x + ',' + l3.y + ' | ' + l1.x + ',' + l1.y);
+
+ // 鍐呮祴鎵囧舰棰滆壊
+ geometry.vertexColors.push(1, 0.11, 0.25, 0.6);
+ geometry.vertexColors.push(1, 0.11, 0.25, 0.6);
+ geometry.vertexColors.push(1, 0.11, 0.25, 0.6);
+ //澶栦晶鎵囧舰棰滆壊
+ geometry.vertexColors.push(1, 0.37, 0.07, 0.5);
+ geometry.vertexColors.push(1, 0.37, 0.07, 0.5);
+ geometry.vertexColors.push(1, 0.37, 0.07, 0.5);
+ geometry.vertexColors.push(1, 0.37, 0.07, 0.5);
+
+ var index = i * 7;
+ geometry.faces.push(index, index + 1, index + 2);
+ geometry.faces.push(index + 3, index + 4, index + 5);
+ geometry.faces.push(index + 4, index + 5, index + 6);
+ }
+ object3Dlayer.add(sector);
+ _sector = sector;
+
+ distance = distance.toFixed(0);
+ distance2 = distance2.toFixed(0);
+ const zoomStyleMapping = {
+ 14: 0,
+ 15: 0,
+ 16: 0,
+ 17: 0,
+ 18: 0,
+ 19: 0,
+ 20: 0
+ };
+ //10鍒嗛挓鎵囧舰
+ // eslint-disable-next-line no-undef
+ var text15 = new AMap.ElasticMarker({
+ zoom: [14, 20],
+ position: list[2],
+ styles: [
+ {
+ icon: {
+ img: './asset/mipmap/location.png',
+ size: [16, 16], //鍙鍖哄煙鐨勫ぇ灏�
+ ancher: [8, 16], //閿氱偣
+ fitZoom: 18, //鏈�鍚堥�傜殑绾у埆
+ scaleFactor: 1, //鍦板浘鏀惧ぇ涓�绾х殑缂╂斁姣斾緥绯绘暟
+ maxScale: 2, //鏈�澶ф斁澶ф瘮渚�
+ minScale: 1 //鏈�灏忔斁澶ф瘮渚�
+ },
+ label: {
+ content: '<div>10鍒嗛挓</div>',
+ offset: [-35, 0],
+ position: 'BM',
+ minZoom: 15
+ }
+ }
+ ],
+ zoomStyleMapping: zoomStyleMapping
+ });
+ _sectorViews['text10'] = text15;
+ // eslint-disable-next-line no-undef
+ var textM = new AMap.ElasticMarker({
+ zoom: [14, 20],
+ position: list[1],
+ styles: [
+ {
+ icon: {
+ img: './asset/mipmap/location.png',
+ size: [16, 16], //鍙鍖哄煙鐨勫ぇ灏�
+ ancher: [8, 16], //閿氱偣
+ fitZoom: 18, //鏈�鍚堥�傜殑绾у埆
+ scaleFactor: 1, //鍦板浘鏀惧ぇ涓�绾х殑缂╂斁姣斾緥绯绘暟
+ maxScale: 2, //鏈�澶ф斁澶ф瘮渚�
+ minScale: 1 //鏈�灏忔斁澶ф瘮渚�
+ },
+ label: {
+ content: `<div>${distance}m</div>`,
+ offset: [-35, 0],
+ position: 'BM',
+ minZoom: 15
+ }
+ }
+ ],
+ zoomStyleMapping: zoomStyleMapping
+ });
+ _sectorViews['textM'] = textM;
+ map.add(_sectorViews['text10']);
+ map.add(_sectorViews['textM']);
+
+ //5鍒嗛挓鎵囧舰
+ let pList = list2;
+ // eslint-disable-next-line no-undef
+ var text5 = new AMap.ElasticMarker({
+ position: pList[1],
+ styles: [
+ {
+ icon: {
+ img: './asset/mipmap/location.png',
+ size: [16, 16], //鍙鍖哄煙鐨勫ぇ灏�
+ ancher: [8, 16], //閿氱偣
+ fitZoom: 18, //鏈�鍚堥�傜殑绾у埆
+ scaleFactor: 1, //鍦板浘鏀惧ぇ涓�绾х殑缂╂斁姣斾緥绯绘暟
+ maxScale: 2, //鏈�澶ф斁澶ф瘮渚�
+ minScale: 1 //鏈�灏忔斁澶ф瘮渚�
+ },
+ label: {
+ content: `<div>5鍒嗛挓</div>`,
+ offset: [-35, 0],
+ position: 'BM',
+ minZoom: 15
+ }
+ }
+ ],
+ zoomStyleMapping: zoomStyleMapping
+ });
+ _sectorViews['text5'] = text5;
+ // eslint-disable-next-line no-undef
+ var textM5 = new AMap.ElasticMarker({
+ position: pList[0],
+ styles: [
+ {
+ icon: {
+ img: './asset/mipmap/location.png',
+ size: [16, 16], //鍙鍖哄煙鐨勫ぇ灏�
+ ancher: [8, 16], //閿氱偣
+ fitZoom: 18, //鏈�鍚堥�傜殑绾у埆
+ scaleFactor: 1, //鍦板浘鏀惧ぇ涓�绾х殑缂╂斁姣斾緥绯绘暟
+ maxScale: 2, //鏈�澶ф斁澶ф瘮渚�
+ minScale: 1 //鏈�灏忔斁澶ф瘮渚�
+ },
+ label: {
+ content: `<div>${distance2}m</div>`,
+ offset: [-35, 0],
+ position: 'BM',
+ minZoom: 15
+ }
+ }
+ ],
+ zoomStyleMapping: zoomStyleMapping
+ });
+ _sectorViews['textM5'] = textM5;
+ map.add(_sectorViews['textM5']);
+ map.add(_sectorViews['text5']);
+ }
+};
diff --git a/src/utils/map/toolbox.js b/src/utils/map/toolbox.js
index ba75d5d..aa6fb9e 100644
--- a/src/utils/map/toolbox.js
+++ b/src/utils/map/toolbox.js
@@ -1,6 +1,9 @@
/* eslint-disable no-undef */
-import { map, satellite, controlbar } from './index_old';
+import { map, satellite } from './index_old';
+import { useToolboxStore } from '@/stores/toolbox';
// import '@/lib/jquery-3.5.1.min';
+
+const toolboxStore = useToolboxStore();
/**
* 鍧愭爣鎷惧彇榧犳爣鐐瑰嚮鍥炶皟浜嬩欢
@@ -42,6 +45,7 @@
*/
toggleFeatures(value) {
value ? map.setFeatures(['bg', 'road', 'point', 'building']) : map.setFeatures(['bg', 'road']);
+ toolboxStore.featuresStatus = value;
},
/**
@@ -50,6 +54,7 @@
*/
toggleSatellite(value) {
value ? satellite.show() : satellite.hide();
+ toolboxStore.satelliteStatus = value;
},
/**
@@ -59,6 +64,7 @@
toggleControlbar(value) {
// value ? controlbar.show() : controlbar.hide();
value ? $('.amap-controlbar').show() : $('.amap-controlbar').hide();
+ toolboxStore.controlbarStatus = value;
},
/**
@@ -74,5 +80,6 @@
_locationMarker = undefined;
_locationText = undefined;
}
+ toolboxStore.coorPickStatus = value;
}
};
diff --git a/src/views/historymode/HistoryMode.vue b/src/views/historymode/HistoryMode.vue
index a6576bf..1c71387 100644
--- a/src/views/historymode/HistoryMode.vue
+++ b/src/views/historymode/HistoryMode.vue
@@ -1,11 +1,65 @@
<template>
<div class="fy-container">
- <FactorRadio></FactorRadio>
+ <FactorRadio @change="(e) => (factorType = e)"></FactorRadio>
+ <SearchBar></SearchBar>
</div>
</template>
<script>
+import Layer from '@/utils/map/3dLayer';
+import marks from '@/utils/map/marks';
+
export default {
- name: 'HistoryPage'
+ name: 'HistoryPage',
+ data() {
+ return {
+ factorType: '',
+ factorDatas: [],
+ merge: false,
+ setCenter: true
+ };
+ },
+ watch: {
+ factorType(nValue, oValue) {
+ if (nValue != oValue) {
+ this.draw();
+ }
+ }
+ },
+ methods: {
+ draw() {
+ const factor = this.factorDatas.factor[this.factorType];
+ this.drawRoadMap(factor);
+ this.drawMassMarks(factor);
+ },
+ // 缁樺埗3D璧拌璺嚎鍥�
+ drawRoadMap(e) {
+ // this.factorMode = factorMode;
+ // this.factorType = factorType;
+ // this.factorName = factorName;
+ // this.factorDatas.refreshHeight(this.factorType + 1 + '');
+ // this.refreshLegend(this.factorDatas);
+ // this.mapMaker.setFactorType(factorType);
+ // if (!this.mapMaker.runStatus()) {
+
+ Layer.drawRoadMap(this.factorDatas, e, this.merge, this.setCenter);
+ // }
+ },
+ drawMassMarks(e) {
+ marks.drawMassMarks(this.factorDatas, e, () => {
+ // 鏌ヨ鑼冨洿鍐呯殑鐩戞祴绔欑偣
+ // SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance);
+ // 3. 瓒嬪娍鍥捐烦杞畾浣�
+ // const progress = FChart.locate(lineChart.chart, lineChart.option, i, _factor.factorName);
+ // 4. 琛ㄦ牸鏁版嵁璺宠浆瀹氫綅
+ // Table.locate(i);
+ });
+ }
+ }
};
</script>
+<style scoped>
+.fy-container {
+ background-color: antiquewhite;
+}
+</style>
--
Gitblit v1.9.3