历史轨迹

src/views/BI/components/bottom_options.vue

@@ -61,16 +61,23 @@ const props = defineProps({
     required: true,
     default: false,
   },
+  currentCheckChildren: {
+    type: String,
+    required: true,
+    default: "",
+  },
 });
 const emits = defineEmits([
   "update:leftCurrentComponent",
   "update:rightCurrentComponent",
   "update:rightOption",
 ]);
-const { leftCurrentComponent, rightCurrentComponent, rightOption } = useVModels(
+const {
-  props,
+  leftCurrentComponent,
-  emits
+  rightCurrentComponent,
-);
+  rightOption,
+  currentCheckChildren,
+} = useVModels(props, emits);
 
 const bottomOptionsList = [
   {
@@ -117,6 +124,17 @@ const bottomOptionsList = [
         check: false,
         action: handleFence,
       },
+      {
+        img: new URL("/src/assets/images/map/bottom/ico3.png", import.meta.url)
+          .href,
+        imgSelect: new URL(
+          "/src/assets/images/map/bottom/ico3_on.png",
+          import.meta.url
+        ).href,
+        title: "历史轨迹",
+        type: "historicalTrajectory",
+        check: false,
+      },
     ],
   },
   {
@@ -320,6 +338,7 @@ const bottomOptionsList = [
     check: false,
     components: [markRaw(VideoAIAnalysis), markRaw(VideoAIAnalysisRight)],
     action: handleCamera,
+    list: [],
   },
 ];
 const data = reactive({
@@ -350,12 +369,16 @@ const fnBottomOptionsListChange = (item, index) => {
   rightOption.value = index !== 4;
 };
 const fnBottomChildOptionsListChange = (index, item1, index1) => {
+  currentCheckChildren.value = "";
   data.bottomOptionsList[index].list[index1].check =
     !data.bottomOptionsList[index].list[index1].check;
+  if (data.bottomOptionsList[index].list[index1].action) {
     data.bottomOptionsList[index].list[index1].action(
       data.bottomOptionsList[index].list[index1].check,
       item1.type
     );
+  }
+  currentCheckChildren.value = item1.type;
 };
 </script>
 <style scoped lang="scss">

src/views/BI/components/historical_trajectory_options.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="container">
+    <el-row align="middle">
+      <el-col :span="12">
+        <el-form
+          :model="data.searchForm"
+          label-width="10px"
+          @submit.prevent="fnGetData"
+        >
+          <el-row>
+            <el-col :span="6">
+              <el-form-item prop="personnel">
+                <el-select v-model="data.searchForm.personnel" filterable>
+                  <el-option label="河北秦安" value="河北秦安" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item prop="dates">
+                <el-date-picker
+                  v-model="data.searchForm.dates"
+                  type="datetimerange"
+                  format="YYYY-MM-DD HH:mm:ss"
+                  value-format="YYYY-MM-DD HH:mm:ss"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item>
+                <el-button type="primary" native-type="submit">搜索</el-button>
+                <el-button native-type="reset"> 重置</el-button>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-col>
+      <el-col :span="12">
+        <div class="play_options">
+          <el-icon :size="30" class="icon" @click="fnPlay">
+            <video-play v-if="!data.isPlay" />
+            <video-pause v-else />
+          </el-icon>
+          <div class="schedule ml-10 pb-10">
+            <el-slider v-model="data.currentSchedule" :max="data.maxSchedule" />
+            <div>
+              <span class="time">{{ data.time }}</span>
+              <span class="text-yellow ml-10">
+                当前所在图层：<el-tag size="small">{{ data.position }}</el-tag>
+              </span>
+            </div>
+          </div>
+          <div class="speed ml-10">
+            <el-select v-model="data.speed">
+              <el-option label="X 16.0" :value="16.0" />
+              <el-option label="X 8.0" :value="8.0" />
+              <el-option label="X 4.0" :value="4.0" />
+              <el-option label="X 2.0" :value="2.0" />
+              <el-option label="X 1.0" :value="1.0" />
+              <el-option label="X 0.5" :value="0.5" />
+            </el-select>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+import { ElMessage } from "element-plus";
+import { VideoPause, VideoPlay } from "@element-plus/icons-vue";
+
+const data = reactive({
+  searchForm: {
+    personnel: "",
+    dates: [],
+  },
+  isPlay: false,
+  currentSchedule: 10,
+  maxSchedule: 100,
+  time: "2021-08-01 12:00:00",
+  position: "图层1",
+  speed: 1.0,
+});
+const fnGetData = () => {
+  if (data.searchForm.personnel === "") {
+    ElMessage.warning("请选择人员");
+    return;
+  }
+  if (data.searchForm.dates.length === 0) {
+    ElMessage.warning("请选择时间");
+    return;
+  }
+  ElMessage.success("搜索成功");
+};
+const fnPlay = () => {
+  data.isPlay = !data.isPlay;
+};
+</script>
+
+<style scoped lang="scss">
+.container {
+  position: absolute;
+  left: 500px;
+  bottom: 240px;
+  background-color: rgba(42, 86, 158, 0.53);
+  width: 60%;
+  padding: 18px 10px 0;
+  border-radius: 5px;
+
+  .play_options {
+    display: flex;
+
+    .icon {
+      cursor: pointer;
+    }
+
+    .schedule {
+      flex: 1;
+    }
+
+    .speed {
+      flex-basis: 100px;
+    }
+  }
+}
+</style>

src/views/BI/index.vue

@@ -27,6 +27,7 @@
         v-model:left-current-component="leftCurrentComponent"
         v-model:right-current-component="rightCurrentComponent"
         v-model:right-option="right_option"
+        v-model:current-check-children="currentCheckChildren"
       />
     </div>
     <transition
@@ -42,6 +43,9 @@
     <div v-show="right_option" class="right_ico">
       <right-ico></right-ico>
     </div>
+    <historical-trajectory-options
+      v-if="currentCheckChildren === 'historicalTrajectory'"
+    />
   </div>
 </template>
 
@@ -50,6 +54,7 @@ import autofit from "autofit.js";
 import { onBeforeUnmount, onMounted, ref } from "vue";
 import RightIco from "./components/rightico.vue";
 import BottomOptions from "./components/bottom_options.vue";
+import HistoricalTrajectoryOptions from "./components/historical_trajectory_options.vue";
 import { useRouter } from "vue-router";
 import { initMap } from "./js/map";
 
@@ -58,6 +63,7 @@ const right_option = ref(true);
 const transitionKey = ref(0);
 const leftCurrentComponent = ref("");
 const rightCurrentComponent = ref("");
+const currentCheckChildren = ref("");
 const corp = { CORP_NAME: "河北秦安", lng: 119.44758654, lat: 39.91845908 };
 
 onMounted(() => {