diff --git a/public/images/icons/text/文字报.png b/public/images/icons/text/文字报.png new file mode 100644 index 000000000..0b1637850 Binary files /dev/null and b/public/images/icons/text/文字报.png differ diff --git a/src/assets/image/multiTraj/开.png b/src/assets/image/multiTraj/开.png new file mode 100644 index 000000000..4a147783f Binary files /dev/null and b/src/assets/image/multiTraj/开.png differ diff --git a/src/assets/image/multiTraj/编组.png b/src/assets/image/multiTraj/编组.png new file mode 100644 index 000000000..0c23c272e Binary files /dev/null and b/src/assets/image/multiTraj/编组.png differ diff --git a/src/views/Content/index.vue b/src/views/Content/index.vue index c46a600d2..d4a11900f 100644 --- a/src/views/Content/index.vue +++ b/src/views/Content/index.vue @@ -11,7 +11,10 @@ import HisImages from '../BaseMB/components/HisImages/index.vue' import Hangjing from '../Hangjing/index.vue' import Mubiao from '../Mubiao/index.vue' import MubiaoHisTrajectory from '../Mubiao/components/HisTrajectory/index.vue' -import MultiHisTrajectory from '../Mubiao/components/MultiHisTrajectory/index.vue' +// import MultiHisTrajectory from '../Mubiao/components/MultiHisTrajectory/index.vue' + +import MultiHisTrajectory from '../MultiTrajPlayback/components/MultiHisTrajectory.vue' +import MultiTrajPlayback from '../MultiTrajPlayback' // import YsHangjing from '../YsHangjing/index.vue' import Daodan from '../Daodan' @@ -25,7 +28,9 @@ import DaodanTestConfig from '../Daodan/components/ConfigContainer' import { useTextReport } from '../TextReport/hooks/text' import { useHisImage } from '../BaseMB/components/HisImages/hooks/hisImage' import { useMBTrajectory } from '../Mubiao/components/HisTrajectory/hooks/mbTraj' -import { useMultiMBTrajectory } from '../Mubiao/components/MultiHisTrajectory/hooks/multiMbTraj' +// import { useMultiMBTrajectory } from '../Mubiao/components/MultiHisTrajectory/hooks/multiMbTraj' +import { useMultiTraj } from '../MultiTrajPlayback/hooks/useMultiTraj' + import { useDaodan } from '../Daodan/ddHooks' // import { useWeather } from '../Weather/hooks/weather' import DetailsModal from './components/DetailsModal/index.vue' @@ -34,7 +39,7 @@ const { getTextConfigs, initWebSocket } = useTextReport() const { showHisImageCom } = useHisImage() const { showHisTrajCom } = useMBTrajectory() -const { showMultiHisTrajCom } = useMultiMBTrajectory() +const { showMultiHisTrajCom, showMultiHisTrajDrawer } = useMultiTraj() const { showDdConfigCom } = useDaodan() const getConfig = async () => { const res = await getTextConfigs() @@ -205,27 +210,41 @@ const showOrHideTextReport = () => { -
+
- + +
+
+ + ))} -
+ {/*
添加拦截 -
+
*/}
) : ( diff --git a/src/views/Daodan/components/TrajTable.jsx b/src/views/Daodan/components/TrajTable.jsx index d1c68a85f..8676f0c1a 100644 --- a/src/views/Daodan/components/TrajTable.jsx +++ b/src/views/Daodan/components/TrajTable.jsx @@ -154,13 +154,13 @@ export default defineComponent({
{props.title}
-
+ {/*
{props.title.indexOf('拦截') > -1 && ( 删除拦截 )} -
+
*/}
diff --git a/src/views/MultiTrajPlayback/components/MultiHisTrajectory.vue b/src/views/MultiTrajPlayback/components/MultiHisTrajectory.vue new file mode 100644 index 000000000..d04be9d66 --- /dev/null +++ b/src/views/MultiTrajPlayback/components/MultiHisTrajectory.vue @@ -0,0 +1,198 @@ + + + diff --git a/src/views/MultiTrajPlayback/hooks/useMultiTraj.js b/src/views/MultiTrajPlayback/hooks/useMultiTraj.js new file mode 100644 index 000000000..be5c163ea --- /dev/null +++ b/src/views/MultiTrajPlayback/hooks/useMultiTraj.js @@ -0,0 +1,91 @@ +import { ref } from 'vue' +import { useMultiTrajReq } from './useMultiTrajReq' + +export function useMultiTraj() { + const timesMap = ref(new Map()) + const times = ref([]) + + const customElapsedTime = ref(0) + const animationSpeed = ref(1) + // const lastFrameTime = ref(performance.now()) + const isAnimationRunning = ref(false) + const isPaused = ref(false) + + function play() { + isAnimationRunning.value = true + isPaused.value = false + } + function pause() { + isAnimationRunning.value = false + isPaused.value = true + } + + function reset() { + isAnimationRunning.value = false + isPaused.value = false + customElapsedTime.value = 0 + } + + function setSpeed(speed) { + animationSpeed.value = speed + } + + function changeTime(time) { + customElapsedTime.value = time + } + return { + checkedAllKeys, + showMultiHisTrajCom, + showOrHideMultiHisTraj, + times, + isAnimationRunning, + isPaused, + play, + pause, + reset, + animationSpeed, + setSpeed, + changeTime, + customElapsedTime, + loadMultiHisTraj, + showMultiHisTrajDrawer, + showOrHideMultiHisTrajDrawer, + } +} + +const checkedAllKeys = ref({ + zb: [], + dd: [], + satellite: [], + hj: [], +}) + +const showMultiHisTrajCom = ref(false) + +const showMultiHisTrajDrawer = ref(false) + +function showOrHideMultiHisTrajDrawer() { + showMultiHisTrajDrawer.value = !showMultiHisTrajDrawer.value +} + +function showOrHideMultiHisTraj() { + showMultiHisTrajCom.value = !showMultiHisTrajCom.value +} + +const { getZBHisTraj } = useMultiTrajReq() + +function loadMultiHisTraj(timeRange) { + console.log(timeRange) + + const dictFunc = { + zb: getZBHisTraj, + dd: null, + satellite: null, + hj: null, + } + Object.keys(checkedAllKeys.value).forEach(key => { + checkedAllKeys.value[key].forEach(item => { + typeof dictFunc[key] === 'function' && dictFunc[key](item, timeRange) + }) + }) +} diff --git a/src/views/MultiTrajPlayback/hooks/useMultiTrajReq.js b/src/views/MultiTrajPlayback/hooks/useMultiTrajReq.js new file mode 100644 index 000000000..30f2da405 --- /dev/null +++ b/src/views/MultiTrajPlayback/hooks/useMultiTrajReq.js @@ -0,0 +1,96 @@ +import { ref } from 'vue' +import { getMubiao, getMubiaoHisTraj } from '../../../api/Mubiao' +import { getSatellite } from '../../../api/Satellite' +import { getHangjing } from '../../../api/Hangjing' +import { getDaodanTree } from '../../../api/Daodan' + +export function useMultiTrajReq() { + return { allTreeData, getAllTree, getZBHisTraj } +} + +const allTreeData = ref([]) + +function getAllTree() { + Promise.all([getZBTree(), getDDTree(), getSatelliteTree(), getHJTree()]) + .then(res => { + allTreeData.value = { + zb: [res[0]], + dd: [res[1]], + satellite: res[2], + hj: [res[3]], + } + }) + .catch(err => {}) +} +async function getZBTree() { + const { code, data } = await getMubiao() + if (code === '200') { + data.nodeName = '装备' + return data + } else { + return [] + } +} + +async function getDDTree() { + const { code, data } = await getDaodanTree() + if (code === '200') { + data.nodeName = 'DD' + return data + } else { + return [] + } +} + +async function getSatelliteTree() { + const { code, data } = await getSatellite() + if (code === '200') { + return data + } else { + return [] + } +} + +async function getHJTree() { + const { code, data } = await getHangjing() + if (code === '200') { + data.nodeName = 'hj' + return data + } else { + return [] + } +} + +async function getZBHisTraj(id, params) { + const [timeBegin, timeEnd] = params + const { code, data } = await getMubiaoHisTraj({ + target_id: id, + timeBegin, + timeEnd, + }) + if (code === '200') { + return data + } + return [] +} + +async function getSatelliteHisTraj(id, params) { + const { timeBegin, timeEnd } = params + const { code, data } = await getSatellite() + if (code === '200') { + } +} + +async function getDDHisTraj(id, params) { + const { timeBegin, timeEnd } = params + const { code, data } = await getSatellite() + if (code === '200') { + } +} + +async function getHJHisTraj(id, params) { + const { timeBegin, timeEnd } = params + const { code, data } = await getSatellite() + if (code === '200') { + } +} diff --git a/src/views/MultiTrajPlayback/index.jsx b/src/views/MultiTrajPlayback/index.jsx new file mode 100644 index 000000000..f348c6834 --- /dev/null +++ b/src/views/MultiTrajPlayback/index.jsx @@ -0,0 +1,95 @@ +import { defineComponent, onMounted } from 'vue' +import { NButton, NIcon, NScrollbar } from 'naive-ui' +import Panel from '@/components/Panel/index.vue' +import Tree from '@/components/Tree/index.vue' +import TabsCom from '@/components/Tabs/index.vue' + +import Bg from '@/assets/image/multiTraj/编组.png' +import RadarSwitch from '@/assets/image/multiTraj/开.png' +import { useMultiTrajReq } from './hooks/useMultiTrajReq' +import { useMultiTraj } from './hooks/useMultiTraj' + +export default defineComponent({ + name: 'MultiTrajPlayback', + setup() { + const { allTreeData, getAllTree } = useMultiTrajReq() + onMounted(() => { + getAllTree() + }) + + const dict = { + satellite: '卫星', + zb: '装备', + dd: 'dd', + hj: 'hj', + } + function renderSuffix({ option }) { + return option.data ? ( +
+ { + e.stopPropagation() + }} + > + + +
+ ) : undefined + } + + const { + checkedAllKeys, + showOrHideMultiHisTraj, + showOrHideMultiHisTrajDrawer, + } = useMultiTraj() + + const multiTrajAllTreeTabConfig = computed(() => { + return Object.keys(allTreeData.value).map((key, index) => { + return { + name: dict[key], + value: key, + component: () => ( + + ), + } + }) + }) + + function playMultiTraj() { + // TODO: 轨迹回放 + showOrHideMultiHisTraj() + } + + return () => ( +
+
+ +
+ + +
+ + + 轨迹回放 +
+ +
+ ) + }, +})