From 75aeb4e63339b60f9559af984c7d9f87a7cba24a Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期四, 09 五月 2024 17:40:47 +0800 Subject: [PATCH] 轨迹动画和任务管理 --- src/utils/map/animation.js | 22 src/views/historymode/HistoryMode.vue | 29 src/components/mission/MIssionCreate.vue | 74 +++ src/api/missionApi.js | 9 src/components.d.ts | 6 src/components/animation/TrajectoryState.vue | 31 + src/components/mission/MissionManage.vue | 148 +++++++ src/views/HomePage.vue | 12 src/components/CardDialog.vue | 45 ++ src/components/animation/HistoricalTrajectory.vue | 64 +++ src/components/mission/MissionImport.vue | 0 src/composables/formConfirm.js | 156 ++++++++ src/components/map/MapToolbox.vue | 8 src/components/core/CoreMenu.vue | 9 src/stores/map-animation.js | 19 + src/utils/expand/expand.js | 26 + src/api/index.js | 1 src/components/map/BaseMap.vue | 11 src/main.js | 5 src/utils/map/sector.js | 432 +++++++++++---------- src/components/search/OptionMission.vue | 6 src/stores/mission.js | 9 src/components/core/CoreHeader.vue | 10 src/model/FrameAnimation.js | 4 24 files changed, 879 insertions(+), 257 deletions(-) diff --git a/src/api/index.js b/src/api/index.js index 30f3296..21205a1 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -4,6 +4,7 @@ const debug = false; let ip1 = 'http://114.215.109.124:8805/'; +// let ip1 = 'http://47.100.191.150:9029/'; if (debug) { ip1 = 'http://192.168.0.138:8082/'; diff --git a/src/api/missionApi.js b/src/api/missionApi.js index e07e9fe..af08c4d 100644 --- a/src/api/missionApi.js +++ b/src/api/missionApi.js @@ -8,5 +8,14 @@ let params = `page=${page}&perPage=${pageSize}`; params += type ? `&type=${type}` : ''; return $http.get(`air/mission/type?${params}`).then((res) => res.data); + }, + + putNewMission(mission) { + return $http.post(`air/mission/create`, mission).then((res) => res.data); + }, + + deleteMission(missionCode) { + let params = `missionCode=${missionCode}`; + return $http.post(`air/mission/delete?${params}`).then((res) => res.data); } }; diff --git a/src/components.d.ts b/src/components.d.ts index 008a148..6880056 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -10,6 +10,7 @@ BaseCard: typeof import('./components/BaseCard.vue')['default'] BaseMap: typeof import('./components/map/BaseMap.vue')['default'] CardButton: typeof import('./components/CardButton.vue')['default'] + CardDialog: typeof import('./components/CardDialog.vue')['default'] CoreHeader: typeof import('./components/core/CoreHeader.vue')['default'] CoreMenu: typeof import('./components/core/CoreMenu.vue')['default'] DataSummary: typeof import('./components/monitor/DataSummary.vue')['default'] @@ -20,6 +21,7 @@ ElCol: typeof import('element-plus/es')['ElCol'] ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] ElDatePicker: typeof import('element-plus/es')['ElDatePicker'] + ElDialog: typeof import('element-plus/es')['ElDialog'] ElDropdown: typeof import('element-plus/es')['ElDropdown'] ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem'] ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu'] @@ -42,6 +44,9 @@ HistoricalTrajectory: typeof import('./components/animation/HistoricalTrajectory.vue')['default'] LineChart: typeof import('./components/monitor/LineChart.vue')['default'] MapToolbox: typeof import('./components/map/MapToolbox.vue')['default'] + MIssionCreate: typeof import('./components/mission/MIssionCreate.vue')['default'] + MissionImport: typeof import('./components/mission/MissionImport.vue')['default'] + MissionManage: typeof import('./components/mission/MissionManage.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'] @@ -50,6 +55,7 @@ RouterView: typeof import('vue-router')['RouterView'] SearchBar: typeof import('./components/search/SearchBar.vue')['default'] SliderBar: typeof import('./components/SliderBar.vue')['default'] + TrajectoryState: typeof import('./components/animation/TrajectoryState.vue')['default'] } export interface ComponentCustomProperties { vLoading: typeof import('element-plus/es')['ElLoadingDirective'] diff --git a/src/components/CardDialog.vue b/src/components/CardDialog.vue new file mode 100644 index 0000000..26608bc --- /dev/null +++ b/src/components/CardDialog.vue @@ -0,0 +1,45 @@ +<template> + <el-dialog + :model-value="modelValue" + @update-modelvalue="handleChange" + :show-close="false" + align-center + > + <template #header="{ close, titleId, titleClass }"> + <BaseCard direction="top-left" borderless="t"> + <template #content> + <el-row justify="space-between" align="middle"> + <el-row align="middle"> + <font-awesome-icon icon="fa fa-list" class="m-r-4" /> + <span :id="titleId" :class="titleClass">{{ title }}</span> + </el-row> + <font-awesome-icon + icon="fa fa-times" + class="cursor-p m-r-4" + @click="close" + /> + </el-row> + </template> + </BaseCard> + </template> + <BaseCard size="medium"> + <template #content> + <slot></slot> + </template> + </BaseCard> + </el-dialog> +</template> +<script> +export default { + props: { + title: String, + modelValue: Boolean + }, + emits: ['update:modelValue'], + methods: { + handleChange(value) { + this.$emit('update:modelValue', value); + } + } +}; +</script> diff --git a/src/components/animation/HistoricalTrajectory.vue b/src/components/animation/HistoricalTrajectory.vue index e2e50bf..3224b43 100644 --- a/src/components/animation/HistoricalTrajectory.vue +++ b/src/components/animation/HistoricalTrajectory.vue @@ -17,7 +17,7 @@ </div> <div class="label-date margin-left-2"> <span class="label-date-title">鍊嶉��</span> - <el-select v-model="speed" size="small" class="w-80"> + <el-select v-model="speed" size="small" class="w-60"> <el-option label="1.0X" :value="1" /> <el-option label="4.0X" :value="4" /> <el-option label="8.0X" :value="8" /> @@ -29,15 +29,37 @@ </BaseCard> </template> <script> +import { mapActions } from 'pinia'; +import { MapAnimation } from '@/utils/map/animation'; +import { FactorDatas } from '@/model/FactorDatas'; +import { useMapAnimationStore } from '@/stores/map-animation'; + +const mapAnimation = new MapAnimation(); + export default { - props: {}, - emits: ['change'], + props: { + factorDatas: FactorDatas, + factorType: String + }, + emits: ['change', 'stop'], data() { return { speed: 1, // 鍔ㄧ敾鐘舵�侊紝0锛氬仠姝紱1锛氭挱鏀撅紱2锛氭殏鍋� status: 0 }; + }, + watch: { + speed(nV, oV) { + if (nV != oV) { + this.changeSpeed(nV); + } + }, + factorType(nV, oV) { + if (nV != oV) { + mapAnimation.setFactorType(nV); + } + } }, computed: { btnStop() { @@ -53,26 +75,58 @@ } }, methods: { + ...mapActions(useMapAnimationStore, ['start', 'pause', 'stop']), handleStop() { if (this.status != 0) { this.status = 0; + this.stopAnimation(); this.handleChange(); } }, handlePlayOrPause() { if (this.status == 1) { this.status = 2; + this.pauseAnimation(); } else { this.status = 1; + this.startAnimation(); } this.handleChange(); }, handleChange() { - console.log(this.status); this.$emit('change', this.status); + }, + + newTimeTask() { + mapAnimation.setDynamicSpeed(false); //鍏抽棴鍔ㄦ�佺粯鍒堕�熷害璋冩暣 + mapAnimation.moveAnimation(this.factorDatas, this.factorType); + }, + startAnimation() { + this.changeSpeed(this.speed); + if (!mapAnimation.runStatus()) { + this.newTimeTask(); + } else { + mapAnimation.start(); + } + this.start(); + }, + changeSpeed(speed) { + mapAnimation.changeSpeed(speed); + }, + pauseAnimation() { + mapAnimation.pause(); + this.pause(); + }, + stopAnimation() { + mapAnimation.stop(); + this.stop(); } }, - mounted() {} + mounted() { + mapAnimation.setOnStopCallback(() => { + this.$emit('stop'); + }); + } }; </script> <style scoped> diff --git a/src/components/animation/TrajectoryState.vue b/src/components/animation/TrajectoryState.vue new file mode 100644 index 0000000..749cc09 --- /dev/null +++ b/src/components/animation/TrajectoryState.vue @@ -0,0 +1,31 @@ +<template> + <BaseCard size="middle-s" direction="down"> + <template #content> + <span style="margin: 36px; font-size: large">{{ stateText }}</span> + </template> + </BaseCard> +</template> +<script> +export default { + props: { + status: { + type: Number, + default: 0 + } + }, + computed: { + stateText() { + switch (this.status) { + case 0: + return '杞ㄨ抗鍔ㄧ敾宸插仠姝�'; + case 1: + return '杞ㄨ抗鍔ㄧ敾鎾斁涓�...'; + case 2: + return '杞ㄨ抗鍔ㄧ敾宸叉殏鍋�'; + default: + return '杞ㄨ抗鍔ㄧ敾宸插仠姝�'; + } + } + } +}; +</script> diff --git a/src/components/core/CoreHeader.vue b/src/components/core/CoreHeader.vue index 381807a..f3e83a5 100644 --- a/src/components/core/CoreHeader.vue +++ b/src/components/core/CoreHeader.vue @@ -1,6 +1,6 @@ <template> - <div class="map-title ff-title flexbox-col align-items p-events-auto"> - <div class="map-title-content"> + <div class="map-title ff-title flexbox-col align-items"> + <div class="map-title-content p-events-auto"> <div class="ff-border-bottom"></div> <div class="ff-border-top"> <div class="ff-border-content flexbox-col align-items"> @@ -25,4 +25,8 @@ methods: {} }; </script> -<style scoped></style> +<style scoped> +.map-title { + /* background-color: aliceblue; */ +} +</style> diff --git a/src/components/core/CoreMenu.vue b/src/components/core/CoreMenu.vue index a88e8cc..58050a8 100644 --- a/src/components/core/CoreMenu.vue +++ b/src/components/core/CoreMenu.vue @@ -1,5 +1,5 @@ <template> - <div class="map-mode-change p-events-auto"> + <div v-show="status == 0" class="map-mode-change p-events-auto"> <template v-for="(item, index) in menu" :key="item.path"> <a :class="btnClz(item.selected)" @click="navTo(index)"> <div>{{ item.name }}</div> @@ -41,6 +41,9 @@ </template> <script> +import { mapState } from 'pinia'; +import { useMapAnimationStore } from '@/stores/map-animation'; + export default { data() { return { @@ -69,7 +72,9 @@ ] }; }, - computed: {}, + computed: { + ...mapState(useMapAnimationStore, ['status']) + }, methods: { btnClz(selected) { return ( diff --git a/src/components/map/BaseMap.vue b/src/components/map/BaseMap.vue index 64f2e53..2da91ff 100644 --- a/src/components/map/BaseMap.vue +++ b/src/components/map/BaseMap.vue @@ -29,4 +29,15 @@ display: none; opacity: 0 !important; } + +.amap-marker-label { + font-size: 13px; + text-align: center; + color: white; + background-color: transparent; + text-shadow: black 2px 2px 2px; + border-radius: 2px; + border: 0px; + padding: 4px; +} </style> diff --git a/src/components/map/MapToolbox.vue b/src/components/map/MapToolbox.vue index 270e612..0b0db4d 100644 --- a/src/components/map/MapToolbox.vue +++ b/src/components/map/MapToolbox.vue @@ -1,6 +1,6 @@ <template> <el-dropdown - class="p-events-auto dropdown-wrap" + class="p-events-auto" trigger="click" size="small" @command="handleCommand" @@ -103,12 +103,6 @@ </script> <style scoped> -.dropdown-wrap { - position: absolute; - top: 10px; - left: 2px; -} - .el-button { margin: initial !important; } diff --git a/src/components/mission/MIssionCreate.vue b/src/components/mission/MIssionCreate.vue new file mode 100644 index 0000000..247fe32 --- /dev/null +++ b/src/components/mission/MIssionCreate.vue @@ -0,0 +1,74 @@ +<template> + <el-button + type="primary" + class="el-button-custom" + @click="dialogVisible = !dialogVisible" + > + 鏂板缓浠诲姟 + </el-button> + <CardDialog v-model="dialogVisible" title="鏂板缓璧拌埅浠诲姟"> + <el-form + :inline="false" + :model="formObj" + ref="formRef" + :rules="rules" + label-position="right" + label-width="150px" + > + <slot name="form-item" :formObj="formObj"></slot> + <el-form-item> + <el-button + :disabled="!edit" + type="primary" + @click="onSubmit" + :loading="loading" + >鎻愪氦</el-button + > + <el-button v-if="useCancel" @click="onCancel">鍙栨秷</el-button> + </el-form-item> + </el-form> + </CardDialog> +</template> +<script setup> +import { onActivated, onDeactivated, ref, reactive, watch } from 'vue'; +import missionApi from '@/api/missionApi'; +import { useFormConfirm } from '@/composables/formConfirm'; +import { useFetchData } from '@/composables/fetchData'; + +const dialogVisible = ref(false); +const { loading, fetchData } = useFetchData(); +const baseRules = reactive({ + _usertype: [ + { + required: true, + message: '鐢ㄦ埛绫诲瀷涓嶈兘涓虹┖', + trigger: 'change' + } + ], + _locations: [ + { + required: true, + message: '琛屾斂鍖哄垝涓嶈兘涓虹┖', + trigger: 'change' + } + ], + _scenetype: [ + { + required: true, + message: '鍦烘櫙绫诲瀷涓嶈兘涓虹┖', + trigger: 'change' + } + ] +}); +// 鍒涘缓浠诲姟 +function createMission() {} +const { formObj, formRef, edit, onSubmit, onCancel, onReset, clear } = + useFormConfirm({ + submit: { + do: createMission + }, + cancel: { + do: () => (dialogVisible.value = false) + } + }); +</script> diff --git a/src/components/mission/MissionImport.vue b/src/components/mission/MissionImport.vue new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/components/mission/MissionImport.vue diff --git a/src/components/mission/MissionManage.vue b/src/components/mission/MissionManage.vue new file mode 100644 index 0000000..124400a --- /dev/null +++ b/src/components/mission/MissionManage.vue @@ -0,0 +1,148 @@ +<template> + <el-button + type="primary" + icon="Memo" + class="el-button-custom p-events-auto" + @click="dialogVisible = !dialogVisible" + > + 浠诲姟绠$悊 + </el-button> + <el-dialog v-model="dialogVisible" :show-close="false" align-center> + <template #header="{ close, titleId, titleClass }"> + <BaseCard direction="top-left" borderless="t"> + <template #content> + <el-row justify="space-between" align="middle"> + <el-row align="middle"> + <font-awesome-icon icon="fa fa-list" class="m-r-4" /> + <span :id="titleId" :class="titleClass">璧拌埅浠诲姟绠$悊</span> + </el-row> + <font-awesome-icon + icon="fa fa-times" + class="cursor-p m-r-4" + @click="close" + /> + </el-row> + </template> + </BaseCard> + </template> + <BaseCard size="medium"> + <template #content> + <el-row class="mission-table"> + <el-col :span="20"> + <el-table + :data="missionList" + table-layout="fixed" + size="small" + :show-overflow-tooltip="true" + border + row-class-name="t-row" + cell-class-name="t-cell" + header-row-class-name="t-header-row" + header-cell-class-name="t-header-cell" + > + <el-table-column + type="index" + label="搴忓彿" + align="center" + width="50" + /> + <el-table-column + prop="missionCode" + label="浠诲姟缂栧彿" + align="center" + /> + <el-table-column + prop="startTime" + label="寮�濮嬫椂闂�" + align="center" + :formatter="timeFormatter" + /> + <el-table-column + prop="endTime" + label="缁撴潫鏃堕棿" + align="center" + :formatter="timeFormatter" + /> + <el-table-column label="绠$悊" width="70" align="center"> + <template #default="{ row }"> + <el-button + type="primary" + size="small" + class="el-button-custom" + @click="deleteMission(row)" + >鍒犻櫎</el-button + > + </template> + </el-table-column> + </el-table> + </el-col> + <el-col :span="4" class="flex-col"> + <div> + <el-button type="primary" class="el-button-custom"> + 鏂板缓浠诲姟 + </el-button> + </div> + <div> + <el-button type="primary" class="el-button-custom"> + 鏁版嵁瀵煎叆 + </el-button> + </div> + <div> + <el-button type="primary" class="el-button-custom"> + 涓嬭浇妯℃澘 + </el-button> + </div> + </el-col> + </el-row> + </template> + </BaseCard> + </el-dialog> +</template> +<script> +import moment from 'moment'; +import { mapState } from 'pinia'; +import { useMissionStore } from '@/stores/mission'; + +export default { + props: {}, + data() { + return { + dialogVisible: false + }; + }, + computed: { + ...mapState(useMissionStore, ['missionList']) + }, + methods: { + createMission() {}, + deleteMission(row) {}, + timeFormatter(row, col, cellValue, index) { + return moment(cellValue).format('YYYY-MM-DD HH:mm:ss'); + } + } +}; +</script> +<style> +.el-dialog { + --el-dialog-bg-color: transparent !important; + --el-dialog-title-font-size: var(--el-font-size-medium); + --el-dialog-content-font-size: 14px; + --el-dialog-padding-primary: 0px !important; +} + +.el-dialog__title { + color: var(--font-color); +} +</style> +<style scoped> +.flex-col { + display: flex; + flex-direction: column; + gap: 4px; + align-items: flex-end; +} + +.mission-table { + height: 60vh; +} +</style> diff --git a/src/components/search/OptionMission.vue b/src/components/search/OptionMission.vue index 8322c9d..5ac3d51 100644 --- a/src/components/search/OptionMission.vue +++ b/src/components/search/OptionMission.vue @@ -18,8 +18,10 @@ </template> <script> +import { mapStores } from 'pinia'; import missionApi from '@/api/missionApi'; import { useFetchData } from '@/composables/fetchData'; +import { useMissionStore } from '@/stores/mission'; export default { setup() { @@ -37,6 +39,9 @@ index: undefined }; }, + computed: { + ...mapStores(useMissionStore) + }, methods: { fetchMission() { this.fetchData((page, pageSize) => { @@ -44,6 +49,7 @@ .fethchMission({ type: this.type, page, pageSize }) .then((res) => { this.missionList = res.data; + this.missionStore.missionList = res.data; // if (this.missionList.length > 0) { // this.handleChange(0); // } diff --git a/src/composables/formConfirm.js b/src/composables/formConfirm.js new file mode 100644 index 0000000..430c790 --- /dev/null +++ b/src/composables/formConfirm.js @@ -0,0 +1,156 @@ +import { onActivated, onDeactivated, ref, watch } from 'vue'; +import { useCloned } from '@vueuse/core'; +// import { useMessageBoxTip, useMessageBox } from './messageBox'; + +// 琛ㄥ崟鐨勭‘璁ゅ拰鍙栨秷 +export function useFormConfirm({ + defaultForm = undefined, + submit = { + do: () => {} + }, + cancel = { + do: () => {} + }, + reset = { + do: () => {} + } +}) { + if (!submit.title) submit.title = '鎻愪氦'; + if (!submit.msg) submit.msg = '纭鏄惁鎻愪氦锛�'; + if (!cancel.title) cancel.title = '鍙栨秷'; + if (!cancel.msg) cancel.msg = '鏄惁鏀惧純宸茬紪杈戠殑鍐呭锛�'; + + // const formProps = defineProps({ + // // 鏄惁鍦ㄦ彁浜ゆ垚鍔熷悗娓呯┖琛ㄥ崟 + // clearAftSubmit: Boolean + // }); + + //琛ㄥ崟鍐呭 + const formObj = ref(defaultForm ? defaultForm : {}); + let formObjClone = useCloned(formObj, { manual: true }); + //琛ㄥ崟缁勪欢寮曠敤 + const formRef = ref(null); + + // 琛ㄥ崟缂栬緫鐘舵�� + const edit = ref(false); + let isReset = false; + const active = ref(true); + + // 鑻ョ粍浠跺疄渚嬫槸 <KeepAlive> 缂撳瓨鏍戠殑涓�閮ㄥ垎锛屽綋缁勪欢琚彃鍏ュ埌 DOM 涓椂璋冪敤 + onActivated(() => { + active.value = true; + }); + // 鑻ョ粍浠跺疄渚嬫槸 <KeepAlive> 缂撳瓨鏍戠殑涓�閮ㄥ垎锛屽綋缁勪欢浠� DOM 涓绉婚櫎鏃惰皟鐢� + onDeactivated(() => { + active.value = false; + }); + + // 褰撹〃鍗曡鍙栨秷婵�娲诲悗锛屾竻绌鸿〃鍗曟暟鎹� + watch(active, (nValue) => { + if (!nValue) { + clear(); + } + }); + + // 琛ㄥ崟琚慨鏀硅繃, 鏇存柊缂栬緫鐘舵�� + watch( + formObj, + (nv, ov) => { + if (!isReset && nv != ov) { + formObjClone = useCloned(nv, { manual: true }); + } + if (!isReset && nv === ov) { + edit.value = true; + } + isReset = false; + }, + { deep: true } + ); + + // 閲嶇疆琛ㄥ崟 + const _reset = function () { + formRef.value.clearValidate(); + edit.value = false; + isReset = true; + formObj.value = useCloned(formObjClone.cloned, { + manual: true + }).cloned.value; + }; + + // 娓呯┖琛ㄥ崟 + const clear = function () { + isReset = true; + formRef.value.resetFields(); + edit.value = false; + }; + + // 鎻愪氦鎴愬姛鍚� + const submited = function () { + // if (formProps.clearAftSubmit) clear(); + edit.value = false; + formObjClone = useCloned(formObj, { manual: true }); + }; + + // 鎻愪氦琛ㄥ崟 + const onSubmit = function (messageBox = true) { + formRef.value.validate(async (valid) => { + if (valid) { + if (messageBox) { + // useMessageBoxTip({ + // confirmMsg: submit.msg, + // confirmTitle: submit.title, + // onConfirm: async () => { + // const res = await submit.do(); + // submited(); + // return res; + // } + // }); + } else { + await submit.do(); + submited(); + } + } + }); + }; + + // 鍙栨秷鎻愪氦 + const onCancel = function () { + if (edit.value) { + // 寮瑰嚭纭妗� + // useMessageBox({ + // confirmMsg: cancel.msg, + // confirmTitle: cancel.title, + // onConfirm: () => { + // // clear(); + // return cancel.do(); + // } + // }); + } else { + cancel.do(); + } + }; + + // 閲嶇疆琛ㄥ崟 + const onReset = function (tips) { + if (edit.value) { + if (tips) { + // 寮瑰嚭纭妗� + // useMessageBox({ + // confirmMsg: '鏄惁閲嶇疆琛ㄥ崟鍐呭锛�', + // confirmTitle: '閲嶇疆琛ㄥ崟', + // onConfirm: () => { + // _reset(); + // return reset.do(); + // } + // }); + } else { + _reset(); + reset.do(); + } + } else { + reset.do(); + } + }; + + return { formObj, formRef, edit, onSubmit, onCancel, onReset, clear }; +} diff --git a/src/main.js b/src/main.js index d6c2bf4..06f7e7e 100644 --- a/src/main.js +++ b/src/main.js @@ -7,15 +7,14 @@ import App from './App.vue'; import router from './router'; +import './utils/expand/expand'; + /* import the fontawesome core */ import { library } from '@fortawesome/fontawesome-svg-core'; /* import font awesome icon component */ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; /* import specific icons */ -// import { all } from '@awesome.me/kit-KIT_CODE/icons'; import { fas } from '@fortawesome/free-solid-svg-icons'; -// import { faTwitter, faFontAwesome } from '@fortawesome/free-brands-svg-icons' -// import { faTwitter, faFontAwesome } from '@fortawesome/free-regular-svg-icons' /* add icons to the library */ library.add(fas); diff --git a/src/model/FrameAnimation.js b/src/model/FrameAnimation.js index ad4dd8c..b74d6d9 100644 --- a/src/model/FrameAnimation.js +++ b/src/model/FrameAnimation.js @@ -118,7 +118,9 @@ if (this.isPause) { return; } - if (index >= t.count) { + // 缁樺埗3D鍥惧舰鏃讹紝鏈�灏戦渶瑕�2涓偣鎵嶅彲缁樺埗鍥惧舰 + // 鍥犳姝ゅ绱㈠紩鍙埌鍊掓暟绗簩涓偣灏辩粨鏉� + if (index >= t.count - 1) { this._endTask(this.intervalFlag); return; } diff --git a/src/stores/map-animation.js b/src/stores/map-animation.js new file mode 100644 index 0000000..b8e906b --- /dev/null +++ b/src/stores/map-animation.js @@ -0,0 +1,19 @@ +import { ref } from 'vue'; +import { defineStore } from 'pinia'; + +export const useMapAnimationStore = defineStore('mapAnimation', () => { + // // 鍔ㄧ敾鐘舵�侊紝0锛氬仠姝紱1锛氭挱鏀撅紱2锛氭殏鍋� + const status = ref(0); + + function start() { + status.value = 1; + } + function pause() { + status.value = 2; + } + function stop() { + status.value = 0; + } + + return { status, start, pause, stop }; +}); diff --git a/src/stores/mission.js b/src/stores/mission.js new file mode 100644 index 0000000..cb79aa8 --- /dev/null +++ b/src/stores/mission.js @@ -0,0 +1,9 @@ +import { ref } from 'vue'; +import { defineStore } from 'pinia'; + +// 璧拌埅浠诲姟 +export const useMissionStore = defineStore('mission', () => { + const missionList = ref([]); + + return { missionList }; +}); diff --git a/src/utils/expand/expand.js b/src/utils/expand/expand.js new file mode 100644 index 0000000..6495211 --- /dev/null +++ b/src/utils/expand/expand.js @@ -0,0 +1,26 @@ +Date.prototype.format = function (fmt) { + var o = { + 'M+': this.getMonth() + 1, //鏈堜唤 + 'd+': this.getDate(), //鏃� + 'h+': this.getHours(), //灏忔椂 + 'm+': this.getMinutes(), //鍒� + 's+': this.getSeconds(), //绉� + 'q+': Math.floor((this.getMonth() + 3) / 3), //瀛e害 + S: this.getMilliseconds() //姣 + }; + if (/(y+)/.test(fmt)) { + fmt = fmt.replace( + RegExp.$1, + (this.getFullYear() + '').substr(4 - RegExp.$1.length) + ); + } + for (var k in o) { + if (new RegExp('(' + k + ')').test(fmt)) { + fmt = fmt.replace( + RegExp.$1, + RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length) + ); + } + } + return fmt; +}; diff --git a/src/utils/map/animation.js b/src/utils/map/animation.js index ab13719..05c8ba7 100644 --- a/src/utils/map/animation.js +++ b/src/utils/map/animation.js @@ -3,7 +3,7 @@ import Layer from '@/utils/map/3dLayer'; import sector from '@/utils/map/sector'; import { map } from '@/utils/map/index_old'; -import util from "@/utils/map/util"; +import util from '@/utils/map/util'; import car_driving from '@/assets/mipmap/car_driving.png'; import boat_driving from '@/assets/mipmap/boat_driving.png'; @@ -11,7 +11,7 @@ // 闈炶繛缁潗鏍囩偣鏈�澶ц窛绂�(绫�) this.maxD = 500; // 褰撳墠缁樺埗鐨勭洃娴嬪洜瀛愮被鍨� - this.factorType = 0; + this.factorType; this.factorDatas; // 杞藉叿绫诲瀷 this.vehicleType = 0; // 0: 杞﹁締锛�1锛氭棤浜烘満锛�2锛氭棤浜鸿埞 @@ -116,7 +116,7 @@ var fData2 = factorDatas.getByIndex(i + 1, i + 2); // 璁$畻鍔ㄧ敾杞ㄨ抗 - for (let i = 0; i < count - 1; i++) { + for (let i = 0; i < count; i++) { // path var length = d * (i + 1); if (isNaN(angle)) { @@ -149,26 +149,16 @@ animationData, function (data, index, count) { var length = data.length(); - var start = length - count + 1; + var start = length - count; // 1.鑾峰彇鏁版嵁 var d = data.getByIndex(0, start + index + 1); - var f = d.factor[that.factorType + 1 + '']; + var f = d.factor[that.factorType]; // 2.缁樺埗鍥惧舰 if (length > count || index > 0) { // 3d鍥惧舰 - // var lnglat = d.lnglats_GD[d.lnglats_GD.length - 1]; Layer.drawMesh(d, f); - // MapUtil.drawLine(lnglat) - // 椋庡悜椋庨�� - sector.drawSector(d, start + index); - // if (d.factor['17'] != undefined && d.factor['16'] != undefined) { - // var windDir = d.factor['17'].datas; - // windDir = windDir[windDir.length - 1].factorData; - // var windSpeed = d.factor['16'].datas; - // windSpeed = windSpeed[windSpeed.length - 1].factorData; - // MapUtil.drawSector4(lnglat, windDir, windSpeed); - // } + sector.drawSectorAna(d, start + index); } var pos = d.lnglats_GD[d.lnglats_GD.length - 1]; diff --git a/src/utils/map/sector.js b/src/utils/map/sector.js index f2aa490..0e3ced6 100644 --- a/src/utils/map/sector.js +++ b/src/utils/map/sector.js @@ -4,229 +4,247 @@ var _defaultDeg = 30, _sector = undefined, - _sectorViews = {}; + _sectorViews = new Map(), + // 鍔ㄧ敾杞ㄨ抗 + _sectorViewsAna = new Map(); + +const zoomStyleMapping = { + 14: 0, + 15: 0, + 16: 0, + 17: 0, + 18: 0, + 19: 0, + 20: 0 +}; + +function sectorParams(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; + // } + + 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]); + + distance = distance.toFixed(0); + distance2 = distance2.toFixed(0); + + return { sDeg, eDeg, lnglat, distance, distance2, list, list2 }; +} + +/** + * 鍙缉鏀剧殑鏍囪 + * 鏃犳硶淇敼position锛堝畼缃戞湭鎵惧埌鐩稿叧api锛� + */ +function elasticMarker(position, content) { + // eslint-disable-next-line no-undef + return new AMap.ElasticMarker({ + zoom: [14, 20], + position: position, + styles: [ + { + icon: { + img: imgLocation, + size: [16, 16], //鍙鍖哄煙鐨勫ぇ灏� + ancher: [8, 16], //閿氱偣 + fitZoom: 18, //鏈�鍚堥�傜殑绾у埆 + scaleFactor: 1, //鍦板浘鏀惧ぇ涓�绾х殑缂╂斁姣斾緥绯绘暟 + maxScale: 2, //鏈�澶ф斁澶ф瘮渚� + minScale: 1 //鏈�灏忔斁澶ф瘮渚� + }, + label: { + content: content, + offset: [-35, 0], + position: 'BM', + minZoom: 15 + } + } + ], + zoomStyleMapping: zoomStyleMapping + }); +} + +/** + * 鏂囨湰鏍囪 + * 鍙慨鏀筽osition + */ +function textMaker(position, text) { + // eslint-disable-next-line no-undef + return new AMap.Text({ + text: text, + position: position, + style: { + 'font-size': '13px', + 'text-align': 'center', + color: 'white', + 'background-color': 'transparent', + 'text-shadow': 'black 2px 2px 2px', + 'border-radius': '2px', + border: '0px', + padding: '4px' + } + }); +} + +function drawSectorMesh(sDeg, eDeg, lnglat, distance, distance2) { + // eslint-disable-next-line no-undef + var sector = new AMap.Object3D.Mesh(); + sector.transparent = true; + sector.backOrFront = 'both'; + + var unit = 5; + + 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; +} + +function drawTextMaker(list, list2, distance, distance2) { + //10鍒嗛挓鎵囧舰 + const a = _sectorViews.get('text10-t'); + if (a == undefined) { + const text10t = textMaker(list[2], '10鍒嗛挓'); + _sectorViews.set('text10-t', text10t); + const textM10t = textMaker(list[1], distance + 'm'); + _sectorViews.set('textM10-t', textM10t); + map.add([text10t, textM10t]); + } else { + _sectorViews.get('text10-t').setPosition(list[2]); + _sectorViews.get('textM10-t').setPosition(list[1]); + _sectorViews.get('textM10-t').setText(distance + 'm'); + } + //5鍒嗛挓鎵囧舰 + const b = _sectorViews.get('text5-t'); + if (b == undefined) { + const text5t = textMaker(list2[1], '5鍒嗛挓'); + _sectorViews.set('text5-t', text5t); + const textM5t = textMaker(list2[0], distance2 + 'm'); + _sectorViews.set('textM5-t', textM5t); + map.add([text5t, textM5t]); + } else { + _sectorViews.get('text5-t').setPosition(list2[1]); + _sectorViews.get('textM5-t').setPosition(list2[0]); + _sectorViews.get('textM5-t').setText(distance2 + 'm'); + } +} + +function drawElasticMarker(list, list2, distance, distance2) { + //10鍒嗛挓鎵囧舰 + const text10 = elasticMarker(list[2], '<div>10鍒嗛挓</div>'); + _sectorViews.set('text10', text10); + const textM = elasticMarker(list[1], `<div>${distance}m</div>`); + _sectorViews.set('textM10', textM); + map.add([text10, textM]); + + //5鍒嗛挓鎵囧舰 + const text5 = elasticMarker(list2[1], '<div>5鍒嗛挓</div>'); + _sectorViews.set('text5', text5); + const textM5 = elasticMarker(list2[0], `<div>${distance2}m</div>`); + _sectorViews.set('textM5', textM5); + map.add([text5, textM5]); +} export default { clearSector() { var list = []; - for (const key in _sectorViews) { - list.push(_sectorViews[key]); + for (const iterator of _sectorViews) { + list.push(iterator[1]); + } + for (const iterator of _sectorViewsAna) { + list.push(iterator[1]); } if (list.length > 0) { map.remove(list); - _sectorViews = {}; + _sectorViews.clear(); } + this.clearSectorMesh(); + }, + clearSectorMesh() { if (_sector) { object3Dlayer.remove(_sector); } }, 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) { this.clearSector(); } + const { sDeg, eDeg, lnglat, distance, distance2, list, list2 } = + sectorParams(fDatas, i); + drawSectorMesh(sDeg, eDeg, lnglat, distance, distance2); + drawElasticMarker(list, list2, distance, distance2); + }, - // 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: imgLocation, - 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: imgLocation, - 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: imgLocation, - 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: imgLocation, - 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']); + drawSectorAna(fDatas, i) { + this.clearSectorMesh(); + const { sDeg, eDeg, lnglat, distance, distance2, list, list2 } = + sectorParams(fDatas, i); + drawSectorMesh(sDeg, eDeg, lnglat, distance, distance2); + drawTextMaker(list, list2, distance, distance2); } }; diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue index 4d60672..afe27b3 100644 --- a/src/views/HomePage.vue +++ b/src/views/HomePage.vue @@ -2,7 +2,10 @@ <BaseMap></BaseMap> <div class="overlay-container"> <CoreHeader></CoreHeader> - <MapToolbox></MapToolbox> + <el-row class="dropdown-wrap"> + <MapToolbox></MapToolbox> + <MissionManage></MissionManage> + </el-row> <CoreMenu></CoreMenu> <router-view></router-view> </div> @@ -23,4 +26,11 @@ /* padding: 4px; */ pointer-events: none; } + +.dropdown-wrap { + position: absolute; + top: 10px; + left: 2px; + gap: 4px; +} </style> diff --git a/src/views/historymode/HistoryMode.vue b/src/views/historymode/HistoryMode.vue index f9b89f9..b40ea8a 100644 --- a/src/views/historymode/HistoryMode.vue +++ b/src/views/historymode/HistoryMode.vue @@ -1,10 +1,12 @@ <template> <div class="p-events-none m-t-2"> - <el-row v-show="status == 0" justify="center"> + <el-row justify="center" align="middle" class="top-wrap"> <SearchBar + v-show="status == 0" :search-time="searchTime" @search="fetchHistroyData" ></SearchBar> + <TrajectoryState v-show="status != 0" :status="status"></TrajectoryState> </el-row> <el-row class="m-t-2"> <FactorRadio @@ -17,6 +19,14 @@ class="m-t-2" :factor="factorDatas.factor[factorType]" ></FactorLegend> + </el-row> + <el-row class="historical" justify="center"> + <HistoricalTrajectory + :factor-datas="factorDatas" + :factor-type="factorType" + @change="(e) => (status = e)" + @stop="draw" + ></HistoricalTrajectory> </el-row> <TrendAnalysis class="trend-analysis" @@ -32,11 +42,6 @@ :factor-datas="factorDatas" :device-type="deviceType" ></DataSheet> - <el-row class="historical" justify="center"> - <HistoricalTrajectory - @change="(e) => (status = e)" - ></HistoricalTrajectory> - </el-row> </div> </template> @@ -82,7 +87,7 @@ }, watch: { factorType(nValue, oValue) { - if (nValue != oValue) { + if (nValue != oValue && this.status == 0) { this.draw(); } } @@ -115,10 +120,6 @@ marks.drawMassMarks(this.factorDatas, e, (index) => { // 鏌ヨ鑼冨洿鍐呯殑鐩戞祴绔欑偣 // SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance); - // 3. 瓒嬪娍鍥捐烦杞畾浣� - // const progress = FChart.locate(lineChart.chart, lineChart.option, i, _factor.factorName); - // 4. 琛ㄦ牸鏁版嵁璺宠浆瀹氫綅 - // Table.locate(i); this.drawSector(index); this.locateIndex = index; }); @@ -188,6 +189,10 @@ }; </script> <style scoped> +.top-wrap { + height: 40px; +} + .trend-analysis { position: absolute; left: 0; @@ -202,7 +207,7 @@ .historical { position: absolute; - bottom: 0; + bottom: 10px; left: 0; right: 0; } -- Gitblit v1.9.3