change css style

src/layout/components/Header/index.vue

     }
 
     const handleClick = (list) => {
-      inspectionStore.setList(list)
       router.push('/')
+      inspectionStore.setList(list)
     }
 
     data.timer = setInterval(() => {

src/views/dashboard/components/Extend.vue

      * @return {*}
      */
     const queryTaskList = async() => {
+      task.taskList.length = 0
       const res = await getMissionList(task.taskParams)
       if (res.code === 0) {
-        task.taskList.length = 0
         var taskCount = 0
         res.data?.records?.map((item) => {
           if (item.type === 1) {

src/views/dashboard/components/FireAlarm.vue

         position: absolute;
         right: 20px;
         top: 10px;
-        width: 407px;
-        height: 860px;
+        width: 427px;
+        height: 600px;
         opacity: 0.85;
         border-radius: 1px;
-        background: rgba(0, 0, 0, 1);
+        background: rgb(0, 0, 0);
+        overflow: auto;
       }
 
       .close-content {
           .verify-btns {
             width: 100%;
             height: 32px;
+            margin: 15px 0;
             span {
               width: 162px;
               height: 32px;

src/views/dashboard/components/MonitorVideo.vue

+<template>
+  <div class="monitor">
+    <p class="monitor-title">
+      <span class="monitor-name">{{ monitorName }}</span>
+      <span class="close-monitor" @click="closeMonitor">x</span>
+    </p>
+
+    <VideoPlayer
+      id="monitor-video"
+      ref="monitorVideo"
+      style="position: absolute; top: 40px; left: 32px;"
+    />
+
+  </div>
+</template>
+
+<script>
+import VideoPlayer from '@/components/VideoPlayer/index.vue'
+import { onBeforeUnmount, reactive, ref, toRefs, watch } from 'vue'
+export default {
+  name: 'MonitorVideo',
+  components: { VideoPlayer },
+  props: {
+    data: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  emits: ['close'],
+  setup(props, { emit }) {
+    const monitorVideo = ref()
+    const data = reactive({
+      monitorName: null
+    })
+
+    watch(() => props.data, (value) => {
+      if (value.flvUrl) {
+        data.monitorName = value.cameraName
+        monitorVideo.value?.init({
+          id: 'monitor-video',
+          width: '467px',
+          height: '260px',
+          source: value.flvUrl,
+          isLive: true
+        })
+      }
+    })
+
+    const closeMonitor = () => {
+      emit('close')
+      monitorVideo.value?.disposeVideo()
+    }
+
+    onBeforeUnmount(() => {
+      monitorVideo.value?.disposeVideo()
+    })
+
+    return {
+      ...toRefs(data),
+      monitorVideo,
+      closeMonitor
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+.monitor{
+  width: 530px;
+  height: 320px;
+  background-color: rgba(0, 0, 0, 0.5);
+  .monitor-title {
+    width: 100%;
+    height: 30px;
+  }
+  .monitor-name {
+  width: 400px;
+  height: 30px;
+  line-height: 30px;
+  color: #fff;
+  font-size: 14px;
+  display: inline-block;
+  margin-left: 10px;
+}
+.close-monitor {
+  width: 28px;
+  height: 28px;
+  position: relative;
+  color: #fff;
+  font-size: 20px;
+  cursor: pointer;
+  float: right;
+  text-align: center;
+  line-height: 28px;
+}
+}
+
+</style>

src/views/dashboard/components/OneMap.vue

     <problem-info :detail="problemDetail" />
   </div>
   <!-- 物资弹框 -->
-  <div id="suppliesOverlay" class="supplies-overlay">
-    <supplies-info :data="suppliesDetail" @close="hideSupplies" />
-  </div>
+  <supplies-info id="suppliesOverlay" :data="suppliesDetail" @close="hideSupplies" />
 
   <!-- 监控弹框 -->
-  <div id="monitorOverlay" class="monitor-overlay">
-    <p>
-      <span class="monitor-name">{{ montiorName }}</span>
-      <span class="close-overlay" @click="hideMonitor">x</span>
-    </p>
-    <VideoPlayer
-      id="monitor-video"
-      ref="monitorVideo"
-      style="position: absolute; top: 40px; left: 32px;"
-    />
-  </div>
+  <monitor-video id="monitorOverlay" :data="monitorDetail" @close="hideMonitor" />
 
   <fire-alarm ref="Warning" :data="warningDetail" @start="handleExecute" @close="closeWarningTab" />
 
 import AirInfo from './AirInfo.vue'
 import ProblemInfo from './ProblemInfo.vue'
 import SuppliesInfo from './SuppliesInfo.vue'
+import MonitorVideo from './MonitorVideo.vue'
 import FireAlarm from './FireAlarm.vue'
 import WarningDrawer from './WarningDrawer.vue'
-import VideoPlayer from '@/components/VideoPlayer/index.vue'
 import gcj02Mecator from '@/utils/map/gcj02Mecator.js'
 import { useInspectionStore } from '@/store/modules/inspection.js'
 
 export default {
   name: 'OneMap',
-  components: { AirInfo, ProblemInfo, SuppliesInfo, VideoPlayer, FireAlarm, WarningDrawer },
+  components: { AirInfo, ProblemInfo, SuppliesInfo, FireAlarm, WarningDrawer, MonitorVideo },
   props: {
     id: {
       type: String,
     }
   },
   setup(props) {
-    const monitorVideo = ref()
     const Warning = ref()
     const inspectionStore = useInspectionStore()
     const data = reactive({
       suppliesOverlay: null,
       suppliesDetail: {},
       monitorOverlay: null,
+      monitorDetail: null,
       montiorName: null,
       // 预警定时器
       warningTimer: null,
         // 监控视频
         if (properties.type === 'camera') {
           const coord = properties.geometry.flatCoordinates
+          data.monitorDetail = properties.props
           data.map.addOverlay(data.monitorOverlay)
           data.monitorOverlay.setPosition(coord)
           // 设置属性
           data.monitorOverlay.setProperties({ 'type': properties.type })
-          data.montiorName = properties.props.cameraName
-          monitorVideo.value?.init({
-            id: 'monitor-video',
-            width: '467px',
-            height: '260px',
-            source: properties.props.flvUrl,
-            isLive: true
-          })
           // 设置z-index
           data.monitorOverlay.getElement().parentElement.style.zIndex = getMaxZOverlay() + 1
         }
-        // 监控视频
+        // 物资
         if (properties.type === 'materials') {
           const coord = properties.geometry.flatCoordinates
           data.suppliesDetail = properties.props
     const hideMonitor = () => {
       if (data.map.getOverlayById('monitor_overlay')) {
         data.map.removeOverlay(data.monitorOverlay)
-        monitorVideo.value?.disposeVideo()
       }
     }
 
                   if (layer.getProperties().type === item.values_.type) {
                     data.map.removeOverlay(item)
                   }
-                  // 关闭监控
-                  if (layer.getProperties().type === 'camera') {
-                    monitorVideo.value?.disposeVideo()
-                  }
                   if (layer.getProperties().type === 'materials') {
                     data.suppliesDetail = {}
                   }
     const removeAllOverlays = () => {
       data.map.removeOverlay(data.suppliesOverlay)
       data.map.removeOverlay(data.monitorOverlay)
-      monitorVideo.value?.disposeVideo()
     }
 
     const handleExecute = async(value) => {
     })
 
     onBeforeUnmount(() => {
-      monitorVideo.value?.disposeVideo()
       if (data.warningTimer !== null) {
         clearInterval(data.warningTimer)
         data.warningTimer = null
       addVectorLayer,
       removeVectorLayer,
       hideSupplies,
-      monitorVideo,
       hideMonitor,
       removeAllOverlays,
       removeProblemLayer,
   background-color: rgba(0, 0, 0, 0.5);
 }
 
-.monitor-overlay {
-  width: 530px;
-  height: 320px;
-  background-color: rgba(0, 0, 0, 0.5);
-  p {
-    width: 100%;
-    height: 30px;
-  }
-}
-
-.monitor-name {
-  width: 400px;
-  height: 30px;
-  line-height: 30px;
-  color: #fff;
-  font-size: 14px;
-  display: inline-block;
-  margin-left: 10px;
-}
-
 .close-overlay {
   width: 28px;
   height: 28px;

src/views/dashboard/components/SpeedChart.vue

           },
           {
             type: 'value',
-            name: '高度(s)',
+            name: '高度(m)',
             position: 'right',
             nameTextStyle: {
               color: 'rgba(255,255,255,1)'

src/views/dashboard/components/SuppliesInfo.vue

 
 <template>
-  <div v-show="suppliesShow" class="supplies-content">
+  <div v-if="suppliesShow" class="supplies-content">
     <div class="supplies-title">
       <p>消防物资</p>
       <span class="close-supplies" @click="closeSupplies" />

src/views/dashboard/components/WarningDrawer.vue

     const getUavInfo = async(id) => {
       const res = await uavInfo(id)
       if (res.code === 0) {
-        data.uavInfo = res.data
+        if (res.data?.length) {
+          data.uavInfo = res.data
+        }
       }
     }
 

src/views/dashboard/index.vue

 <template>
   <div class="basic">
-    <OneMap ref="Map" />
+    <OneMap ref="Map" @send="getDetail" />
     <Extend ref="extendRef" class="extend" @send="getmessage" />
   </div>
 </template>
 import { useRouter } from 'vue-router'
 import OneMap from './components/OneMap.vue'
 import Extend from './components/Extend.vue'
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, watch, toRefs, reactive } from 'vue'
 export default {
   name: 'HomePage',
   components: { OneMap, Extend },
     const getmessage = (data) => {
       Map.value.addPonit(data)
     }
-    const data = ref({
-      currentDroneInfo: {
-        auth: 1,
-        ground_station_url: 'xxxxxxxxxxxxxxx'
-      }
-    })
+
     onMounted(() => {
       extendRef.value.handleClick(0)
     })
     //   console.log(params)
     // }
     return {
-      data,
       toSystem,
       extendRef,
       getmessage,

src/views/task-manage/all-task/components/LiveDrawer.vue

           }
         })
       }, 1000)
-
-      // 移动要素
-      const moveFeature = function(event) {
-        var lastTime
-        const speed = Number(50)
-        const time = event.frameState.time
-        const elapsedTime = time - lastTime
-        data.disdance = (data.disdance + (speed * elapsedTime) / 1e6) % 2
-        if (data.disdance > 1) {
-          stopAnimation(data.trackInfo)
-        }
-        lastTime = time
-
-        const currentCoordinate = data.trackInfo.route.getCoordinateAt(
-          data.disdance > 1 ? 2 - data.disdance : data.disdance
-        )
-        data.trackInfo.position.setCoordinates(currentCoordinate)
-        const vectorContext = getVectorContext(event)
-        vectorContext.setStyle(styleList['geoMarker'])
-        vectorContext.drawGeometry(data.trackInfo.position)
-        data.mapData.render()
-      }
-
-      // 停止动画
-      const stopAnimation = function(trackInfo) {
-        const { vectorLayer, geoMarker } = trackInfo
-        data.animating = false
-        geoMarker.setGeometry(trackInfo.position)
-        vectorLayer.un('postrender', moveFeature)
-      }
     }
 
     function handleVideoStatus(status) {