From f5624d6a7ad32ee475e00edbad26bc98ea4629e1 Mon Sep 17 00:00:00 2001 From: riku <risaku@163.com> Date: 星期五, 10 五月 2024 17:35:54 +0800 Subject: [PATCH] 实时走航模块 --- src/views/realtimemode/RealtimeMode.vue | 68 +++++++++++++++++++++++++++++++++- 1 files changed, 66 insertions(+), 2 deletions(-) diff --git a/src/views/realtimemode/RealtimeMode.vue b/src/views/realtimemode/RealtimeMode.vue index b991977..f1e9bf0 100644 --- a/src/views/realtimemode/RealtimeMode.vue +++ b/src/views/realtimemode/RealtimeMode.vue @@ -1,9 +1,73 @@ <template> - <div>RealtimeMode</div> + <div class="p-events-none m-t-2"> + <el-row justify="center" align="middle" class="top-wrap"> </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="m-t-2" justify="start"> + <DashBoard :factor-datas="factorDatas"></DashBoard> + </el-row> + </div> </template> <script> +import { useFetchData } from '@/composables/fetchData'; +import { TYPE0 } from '@/constant/device-type'; +import { FactorDatas } from '@/model/FactorDatas'; +import monitorDataApi from '@/api/monitorDataApi'; +import DashBoard from './component/DashBoard.vue'; + export default { - name: 'HistoryPage' + components: { DashBoard }, + setup() { + const { loading, fetchData } = useFetchData(10000); + return { loading, fetchData }; + }, + data() { + return { + // 鐩戞祴璁惧绫诲瀷 + deviceType: TYPE0, + // 鐩戞祴鍥犲瓙鐨勭被鍨嬬紪鍙� + factorType: '1', + // 鐩戞祴鏁版嵁 + factorDatas: new FactorDatas() + }; + }, + methods: { + onFetchData(type, data) { + // todo 鏍规嵁璁惧绫诲瀷鍒囨崲鍦板浘鐩戞祴鍥犲瓙灞曠ず鍗曢�夋銆佹姌绾垮浘澶嶉�夋銆佹暟鎹〃鏍煎閫夋鐨勫洜瀛愮被鍨� + this.deviceType = type; + this.factorDatas.setData(data, this.drawMode, () => { + this.factorDatas.refreshHeight(this.factorType); + // this.draw(); + }); + }, + fetchRealTimeData() { + // fixme 2024.5.3 姝ゅ鍒濆鑾峰彇鐨勬暟鎹紝鍙傛暟搴旇鐢眘earchbar鍐冲畾锛屽悗缁慨鏀� + this.fetchData((page) => { + return monitorDataApi + .fetchHistroyData({ + deviceCode: '0a0000000001', + page, + perPage: 100 + }) + .then((res) => { + this.onFetchData(TYPE0, res.data); + }); + }); + } + }, + mounted() { + this.fetchRealTimeData(); + } }; </script> -- Gitblit v1.9.3