From f57633ef165ae24ae858894e3b9583a00d3ef7f6 Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期三, 03 七月 2024 17:49:21 +0800
Subject: [PATCH] 分段轨迹
---
src/components/core/CoreMenu.vue | 4
src/api/index.js | 2
src/views/historymode/HistoryMode2.vue | 250 ++++++++++++++++++++++++++++++++++++++++++++++++++
src/api/monitorDataApi.js | 17 +++
src/components.d.ts | 1
src/router/index.js | 5 +
6 files changed, 278 insertions(+), 1 deletions(-)
diff --git a/src/api/index.js b/src/api/index.js
index ed45795..f657c25 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -1,7 +1,7 @@
import axios from 'axios';
import { ElMessage } from 'element-plus';
-const debug = false;
+const debug = true;
// let ip1 = 'http://114.215.109.124:8805/';
let ip1 = 'http://47.100.191.150:9029/';
diff --git a/src/api/monitorDataApi.js b/src/api/monitorDataApi.js
index fe2819d..f46fd05 100644
--- a/src/api/monitorDataApi.js
+++ b/src/api/monitorDataApi.js
@@ -33,8 +33,25 @@
return $http.get(`air/realtime/sec?${params}`).then((res) => res.data);
},
+ /**
+ * 鑾峰彇鏇存柊鏃堕棿涔嬪悗鐨勬柊鏁版嵁
+ * @param {*} param0
+ * @returns
+ */
fetchNextData({ deviceCode, updateTime, perPage = 50 }) {
let params = `deviceCode=${deviceCode}&updateTime=${updateTime}&perPage=${perPage}`;
return $http.get(`air/realtime/sec/next?${params}`).then((res) => res.data);
+ },
+
+ /**
+ * 鑾峰彇鎸夌収璺鍒嗗壊鐨勮蛋鑸暟鎹�
+ * @param {String} missionCode
+ * @returns
+ */
+ fetchSegmentData(missionCode) {
+ let params = `missionCode=${missionCode}`;
+ return $http
+ .get(`air/realtime/sec/segment?${params}`)
+ .then((res) => res.data);
}
};
diff --git a/src/components.d.ts b/src/components.d.ts
index cd496f3..93c0d11 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -29,6 +29,7 @@
ElFormItem: typeof import('element-plus/es')['ElFormItem']
ElIcon: typeof import('element-plus/es')['ElIcon']
ElInput: typeof import('element-plus/es')['ElInput']
+ ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
ElOption: typeof import('element-plus/es')['ElOption']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElPopover: typeof import('element-plus/es')['ElPopover']
diff --git a/src/components/core/CoreMenu.vue b/src/components/core/CoreMenu.vue
index e939907..a7aa2bf 100644
--- a/src/components/core/CoreMenu.vue
+++ b/src/components/core/CoreMenu.vue
@@ -57,6 +57,10 @@
name: '璧拌埅鐩戞祴',
path: 'rmode'
},
+ {
+ name: '姹℃煋婧簮2',
+ path: 'hmode2'
+ }
// {
// name: '缃戞牸鍖栫洃娴�',
// path: 'gridmonitor'
diff --git a/src/router/index.js b/src/router/index.js
index a614390..3587b77 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -25,6 +25,11 @@
name: 'historyMode',
component: () => import('@/views/historymode/HistoryMode.vue')
},
+ {
+ path: 'hmode2',
+ name: 'historyMode2',
+ component: () => import('@/views/historymode/HistoryMode2.vue')
+ },
// 璧拌埅鐩戞祴
{
path: 'rmode',
diff --git a/src/views/historymode/HistoryMode2.vue b/src/views/historymode/HistoryMode2.vue
new file mode 100644
index 0000000..660a02d
--- /dev/null
+++ b/src/views/historymode/HistoryMode2.vue
@@ -0,0 +1,250 @@
+<template>
+ <div class="p-events-none m-t-2">
+ <el-row justify="center" align="middle" class="top-wrap">
+ <SearchBar
+ v-show="status == 0"
+ :search-time="searchTime"
+ :loading="loading"
+ @search="fetchSegmentData"
+ ></SearchBar>
+ <TrajectoryState v-show="status != 0" :status="status"></TrajectoryState>
+ <el-input-number
+ class="p-events-auto"
+ v-model="num"
+ :min="0"
+ @change="handleChange"
+ />
+ </el-row>
+ <el-row class="m-t-2">
+ <FactorRadio
+ :device-type="deviceType"
+ @change="(e) => (factorType = e)"
+ ></FactorRadio>
+ </el-row>
+ <el-row class="m-t-2">
+ <FactorLegend
+ 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"
+ :locate-index="locateIndex"
+ @chart-click="handelIndexChange"
+ :factor-datas="factorDatas"
+ :device-type="deviceType"
+ ></TrendAnalysis>
+ <DataSheet
+ class="data-sheet"
+ :locate-index="locateIndex"
+ @table-click="handelIndexChange"
+ :factor-datas="factorDatas"
+ :device-type="deviceType"
+ ></DataSheet>
+ </div>
+</template>
+
+<script>
+import Layer from '@/utils/map/3dLayer';
+import marks from '@/utils/map/marks';
+import sector from '@/utils/map/sector';
+import { DialogUtil } from '@/utils/map/dialog';
+import monitorDataApi from '@/api/monitorDataApi';
+import { useFetchData } from '@/composables/fetchData';
+import moment from 'moment';
+import { TYPE0 } from '@/constant/device-type';
+import { FactorDatas } from '@/model/FactorDatas';
+import TrendAnalysis from './component/TrendAnalysis.vue';
+import DataSheet from './component/DataSheet.vue';
+
+export default {
+ components: { TrendAnalysis, DataSheet },
+ setup() {
+ const { loading, fetchData } = useFetchData(10000);
+ return { loading, fetchData };
+ },
+ data() {
+ return {
+ // 鐩戞祴璁惧绫诲瀷
+ deviceType: TYPE0,
+ // 鐩戞祴鍥犲瓙鐨勭被鍨嬬紪鍙�
+ factorType: '1',
+ // 鐩戞祴鏁版嵁
+ factorDatas: new FactorDatas(),
+ segmentFactorDatas: [],
+ num: 0,
+ // 鍐冲畾缁樺埗3D鍥惧舰鏃舵槸鍚︿笌鍘熷浘鍍忓悎骞�
+ merge: false,
+ // 鍐冲畾缁樺埗瀹�3D鍥惧舰鍚庡湴鍥捐瑙掓槸鍚﹁嚜鍔ㄥ洖涓�
+ setCenter: true,
+ // 缁樺埗妯″紡锛�0锛氳嚜鍔ㄦā寮忥紝鑷姩璁＄畻褰撳墠鏁版嵁鐨勮寖鍥达紝缁樺埗鍚堥�傜殑姣斾緥锛�1锛氭墜鍔ㄦā寮忥紝鏍规嵁椤甸潰璁剧疆鐨勭粯鍥捐寖鍥磋繘琛岀粯鍒�
+ drawMode: 0,
+ searchTime: [],
+ // 褰撳墠閫変腑楂樹寒鐨勬暟鎹偣绱㈠紩
+ locateIndex: undefined,
+ // 杞ㄨ抗鍔ㄧ敾鐘舵��
+ status: 0
+ };
+ },
+ watch: {
+ factorType(nValue, oValue) {
+ if (nValue != oValue && this.status == 0) {
+ this.draw();
+ }
+ }
+ },
+ methods: {
+ // 鐩戝惉鎶樼嚎鍥惧拰琛ㄦ牸鐨勭偣鍑讳簨浠�
+ handelIndexChange(index) {
+ this.locateIndex = index;
+ this.drawSector(index);
+ },
+ handleChange(value) {
+ if (value >= this.segmentFactorDatas.length) {
+ this.num = this.segmentFactorDatas.length - 1;
+ } else {
+ const factorDatas = this.segmentFactorDatas[value];
+ this.drawRoadMap(factorDatas);
+ this.drawMassMarks(factorDatas);
+ }
+ },
+ draw(factorDatas) {
+ // todo 鍒锋柊鍥句緥
+ const f = factorDatas ? factorDatas : this.factorDatas;
+ this.drawRoadMap(f);
+ this.drawMassMarks(f);
+ },
+ // 缁樺埗3D璧拌璺嚎鍥�
+ drawRoadMap(factorDatas) {
+ const factor = factorDatas.factor[this.factorType];
+ factorDatas.refreshHeight(this.factorType);
+
+ Layer.drawRoadMap(factorDatas, factor, this.merge, this.setCenter);
+ // }
+ },
+ drawMassMarks(factorDatas) {
+ const factor = factorDatas.factor[this.factorType];
+ marks.drawMassMarks(factorDatas, factor, (index) => {
+ // 鏌ヨ鑼冨洿鍐呯殑鐩戞祴绔欑偣
+ // SceneUtil.searchByCoordinate(lnglat[0], lnglat[1], distance);
+ this.drawSector(index);
+ this.locateIndex = index;
+ });
+ },
+ drawSector(index) {
+ // 1. 缁樺埗鏂版墖褰㈠尯鍩�
+ sector.drawSector(this.factorDatas, index);
+ // 2. 缁樺埗瀵硅瘽妗�
+ DialogUtil.openNewWindow(this.factorDatas, index, () => {
+ // 绉婚櫎鎵囧舰鍖哄煙
+ sector.clearSector();
+ });
+ },
+ onFetchData(type, data) {
+ // todo 鏍规嵁璁惧绫诲瀷鍒囨崲鍦板浘鐩戞祴鍥犲瓙灞曠ず鍗曢�夋銆佹姌绾垮浘澶嶉�夋銆佹暟鎹〃鏍煎閫夋鐨勫洜瀛愮被鍨�
+ this.deviceType = type;
+ this.factorDatas.setData(data, this.drawMode, () => {
+ this.factorDatas.refreshHeight(this.factorType);
+ this.draw();
+ });
+ },
+ onFetchSegmentData(type, data) {
+ this.deviceType = type;
+ const list = [];
+ data.forEach((d) => {
+ const factorDatas = new FactorDatas();
+ factorDatas.setData(d, this.drawMode, () => {
+ factorDatas.refreshHeight(this.factorType);
+ // this.draw(factorDatas);
+ });
+ list.push(factorDatas);
+ });
+ this.segmentFactorDatas = list;
+ },
+ fetchHistroyData(option) {
+ const { deviceCode, type, timeArray } = option;
+ let startTime, endTime;
+ if (timeArray && timeArray.length == 2) {
+ startTime = moment(timeArray[0]).format('YYYY-MM-DD HH:mm:ss');
+ endTime = moment(timeArray[1]).format('YYYY-MM-DD HH:mm:ss');
+ }
+ this.fetchData((page, pageSize) => {
+ return monitorDataApi
+ .fetchHistroyData({
+ deviceCode,
+ startTime,
+ endTime,
+ page,
+ perPage: pageSize
+ })
+ .then((res) => this.onFetchData(type, res.data));
+ });
+ },
+ fetchRealTimeData() {
+ // fixme 2024.5.3 姝ゅ鍒濆鑾峰彇鐨勬暟鎹紝鍙傛暟搴旇鐢眘earchbar鍐冲畾锛屽悗缁慨鏀�
+ this.fetchData((page) => {
+ return monitorDataApi
+ .fetchHistroyData({
+ deviceCode: '0a0000000001',
+ // type: TYPE0,
+ page,
+ perPage: 100
+ })
+ .then((res) => {
+ if (res.data.length > 0) {
+ const s = new Date(res.data[0].time.replace(' ', 'T'));
+ const e = new Date(
+ res.data[res.data.length - 1].time.replace(' ', 'T')
+ );
+ this.searchTime = [s, e];
+ }
+ this.onFetchData(TYPE0, res.data);
+ });
+ });
+ },
+ fetchSegmentData(option) {
+ const { type, mission } = option;
+ this.fetchData((page, pageSize) => {
+ return monitorDataApi
+ .fetchSegmentData(mission.missionCode)
+ .then((res) => this.onFetchSegmentData(type, res.data));
+ });
+ }
+ },
+ mounted() {
+ this.fetchRealTimeData();
+ }
+};
+</script>
+<style scoped>
+.top-wrap {
+ height: 40px;
+}
+
+.trend-analysis {
+ position: absolute;
+ left: 0;
+ bottom: 2px;
+}
+
+.data-sheet {
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+
+.historical {
+ position: absolute;
+ bottom: 10px;
+ left: 0;
+ right: 0;
+}
+</style>
--
Gitblit v1.9.3