增加多船轨迹回放区域

src/views/home/Header.vue

@@ -36,6 +36,7 @@
 
     <LunDuMessage v-if="checkLinDu" @closeThis="closeLundu" :datas="ldData.value"/>
 
+    <HuiFangArea v-if="checkArea" />
 
     <SelectForUnit  v-if="showSelect"  />
   </div>
@@ -59,6 +60,7 @@ export default {
   } from '@/utils/UIInteractions'
   import WaterLevel from './cpns/WaterLevel.vue'
   import MiForChange from './cpns/MiForChange.vue'
+  import HuiFangArea from './cpns/tools/HuiFangArea.vue'
   import Tools from './cpns/tools/Tools.vue'
   import LunDuMessage from './cpns/boatPanel/LunDuMessage.vue'
   import SelectForUnit from './SelectForUnit.vue'
@@ -73,6 +75,7 @@ export default {
 
   let ldData=reactive({value: ''})
   const  checkLinDu=ref(false)
+  const checkArea = ref(false)
   const checkSelect = ref(false)
   const checkTool = ref(false)
   const checkSouXiao = ref(false)
@@ -95,6 +98,7 @@ export default {
   const  isCheck=ref({
     data: [
       { name: '搜索', icon: require('@/assets/imgs/header/ssou-wei.png'), iconOn: require('@/assets/imgs/header/ssou-select.png'), imageName: 'ssou' ,click:false,checkIoc:showSelect},
+      { name: '回放', icon: require('@/assets/imgs/area/bj_wei.png'), iconOn: require('@/assets/imgs/area/bj_select.png'), imageName: 'hf' ,click:false,checkIoc:checkArea},
       { name: '图层', icon: require('@/assets/imgs/header/tc-wei.png'), iconOn: require('@/assets/imgs/header/tc-select.png'), imageName: 'tc' ,click:false,checkIoc:checkTool},
       { name: '收缩', icon: require('@/assets/imgs/header/ss-wei.png'), iconOn: require('@/assets/imgs/header/ss-select.png'), imageName: 'ss' ,click:false,checkIoc:checkSouXiao},
       { name: '全景', icon: require('@/assets/imgs/page_ylcbq/qj-wei.png'), iconOn: require('@/assets/imgs/page_ylcbq/qj-xuan.png'), imageName: 'qj' ,click:false,checkIoc:checkQuanjing},

src/views/home/cpns/tools/HuiFangArea.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="huiFangArea" >
+    <div class="cb-time">
+      <div>
+          <i class="cbt-icon"></i>
+          <el-date-picker
+                  v-model="timeRange.time1"
+                  type="datetime"
+                  placeholder="请选择"
+                  size="small"
+                  popper-class="date-popper"
+                  class="date-picker-custom1"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+          />
+      </div>
+      <div>
+          <i class="cbt-icon"></i>
+          <el-date-picker
+                  v-model="timeRange.time2"
+                  type="datetime"
+                  placeholder="请选择"
+                  size="small"
+                  popper-class="date-popper"
+                  class="date-picker-custom1"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+          />
+      </div>
+      <div>
+        <span>确定</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'huiFangArea'
+}
+</script>
+
+<script setup>
+  import {reactive} from "vue";
+  import { ElDatePicker,ElMessage } from 'element-plus'
+  import 'element-plus/es/components/message/style/css'
+  import 'element-plus/es/components/date-picker/style/css'
+
+  const timeRange = reactive({
+    time1: '2023-05-06 12:30:00',
+    time2: '2023-08-06 12:30:00',
+  })
+</script>
+
+<style lang="scss" scoped>
+.huiFangArea{
+  position: absolute;
+  top: 10vh;
+  right: 15vw;
+  width: 20vh;
+  height: 150px;
+  background: url('@/assets/imgs/area/bg.png') no-repeat;
+  background-size: 100% 100%;
+  .cb-time {
+    width: 100%;
+    height: 30%;
+    div{
+      margin: 0 auto;
+      height: 100%;
+      width: 80%;
+      display: flex;
+      align-items: center;
+      align-content: center;
+      .cbt-icon{
+          display: block;
+          width: 20px;
+          height: 13px;
+          background: url('@/assets/imgs/area/time.png') no-repeat;
+          background-size: 100% 100%;
+         }
+    }
+    span{
+      margin: 0 auto;
+      height: 30px;
+      width: 40%;
+        text-align: center;
+      line-height:30px;
+      font-size: 11px;
+      background: url('@/assets/imgs/area/button.png') no-repeat;
+      background-size: 100% 100%;
+    }
+
+  }
+}
+</style>