| | |
| | | <div class="media-wrapper" v-if="root.$route.name === ERouterName.MEDIA"> |
| | | <MediaPanel /> |
| | | </div> |
| | | <div class="media-wrapper" v-if="root.$route.name === ERouterName.TASK"> |
| | | <div class="task-wrapper" v-if="root.$route.name === ERouterName.TASK"> |
| | | <TaskPanel /> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </template> |
| | | <script lang="ts" setup> |
| | | |
| | | import Sidebar from '/@/components/common/sidebar.vue' |
| | | import MediaPanel from '/@/components/MediaPanel.vue' |
| | | import TaskPanel from '/@/components/TaskPanel.vue' |
| | | import TaskPanel from '/@/components/task/TaskPanel.vue' |
| | | import GMap from '/@/components/GMap.vue' |
| | | import { EBizCode, ERouterName } from '/@/types' |
| | | import { getRoot } from '/@/root' |
| | | import { useMyStore } from '/@/store' |
| | | import { useConnectWebSocket } from '/@/hooks/use-connect-websocket' |
| | | import EventBus from '/@/event-bus' |
| | | |
| | | const root = getRoot() |
| | | const store = useMyStore() |
| | |
| | | break |
| | | } |
| | | case EBizCode.FlightTaskProgress: { |
| | | store.commit('SET_FLIGHT_TASK_PROGRESS', payload.data) |
| | | EventBus.emit('deviceTaskProgress', payload) |
| | | break |
| | | } |
| | | case EBizCode.DeviceHms: { |
| | |
| | | |
| | | .project-app-wrapper { |
| | | display: flex; |
| | | position: absolute; |
| | | transition: width 0.2s ease; |
| | | height: 100%; |
| | | width: 100%; |
| | | |
| | | .left { |
| | | width: 400px; |
| | | display: flex; |
| | | width: 335px; |
| | | flex: 0 0 335px; |
| | | background-color: #232323; |
| | | float: left; |
| | | |
| | | .main-content { |
| | | flex: 1; |
| | | color: $text-white-basic; |
| | | } |
| | | } |
| | | |
| | | .right { |
| | | width: 100%; |
| | | height: 100%; |
| | | .map-wrapper { |
| | | flex-grow: 1; |
| | | position: relative; |
| | | |
| | | .map-wrapper{ |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | } |
| | | .main-content { |
| | | flex: 1; |
| | | color: $text-white-basic; |
| | | } |
| | | .media-wrapper { |
| | | position: absolute; |
| | | top: 0; |
| | | bottom: 0; |
| | | z-index: 100; |
| | | background: #f6f8fa; |
| | | } |
| | | .wayline-wrapper { |
| | | position: absolute; |
| | | top: 0; |
| | | bottom: 0; |
| | | z-index: 100; |
| | | background: #f6f8fa; |
| | | padding: 16px; |
| | | |
| | | .media-wrapper, |
| | | .task-wrapper { |
| | | position: absolute; |
| | | top: 0; |
| | | bottom: 0; |
| | | left: 0; |
| | | right: 0; |
| | | z-index: 100; |
| | | background: #f6f8fa; |
| | | } |
| | | } |
| | | } |
| | | </style> |