实时追踪

src/views/BI/components/bottom_options.vue

@@ -74,18 +74,25 @@ const props = defineProps({
     required: true,
     default: false,
   },
+  isRealTimeTracking: {
+    type: Boolean,
+    required: true,
+    default: false,
+  },
 });
 const emits = defineEmits([
   "update:leftCurrentComponent",
   "update:rightCurrentComponent",
   "update:rightOption",
   "update:isHistoricalTrajectory",
+  "update:isRealTimeTracking",
 ]);
 const {
   leftCurrentComponent,
   rightCurrentComponent,
   rightOption,
   isHistoricalTrajectory,
+  isRealTimeTracking,
 } = useVModels(props, emits);
 
 const bottomOptionsList = [
@@ -144,6 +151,17 @@ const bottomOptionsList = [
         type: "historicalTrajectory",
         check: false,
       },
+      {
+        img: new URL("/src/assets/images/map/bottom/ico19.png", import.meta.url)
+          .href,
+        imgSelect: new URL(
+          "/src/assets/images/map/bottom/ico19_on.png",
+          import.meta.url
+        ).href,
+        title: "实时追踪",
+        type: "realTimeTracking",
+        check: false,
+      },
     ],
   },
   {
@@ -376,8 +394,9 @@ const fnBottomOptionsListChange = (item, index) => {
   rightOption.value = index !== 4;
 };
 const fnBottomChildOptionsListChange = (index, item1, index1) => {
+  const singleChoiceType = ["historicalTrajectory", "realTimeTracking"];
   const currentItem = data.bottomOptionsList[index].list[index1];
-  if (item1.type === "historicalTrajectory") {
+  if (singleChoiceType.includes(item1.type)) {
     for (let i = 0; i < data.bottomOptionsList.length; i++) {
       for (let j = 0; j < data.bottomOptionsList[i].list.length; j++) {
         const currentForItem = data.bottomOptionsList[i].list[j];
@@ -388,20 +407,26 @@ const fnBottomChildOptionsListChange = (index, item1, index1) => {
       }
     }
     currentItem.check = !currentItem.check;
+    if (item1.type === "historicalTrajectory") {
       isHistoricalTrajectory.value = !isHistoricalTrajectory.value;
+      isRealTimeTracking.value = false;
+    }
+    if (item1.type === "realTimeTracking") {
+      isRealTimeTracking.value = !isRealTimeTracking.value;
+      isHistoricalTrajectory.value = false;
+    }
   } else {
-    let isSelf = false;
     for (let i = 0; i < data.bottomOptionsList.length; i++) {
       for (let j = 0; j < data.bottomOptionsList[i].list.length; j++) {
         const currentForItem = data.bottomOptionsList[i].list[j];
-        if (currentForItem.type === "historicalTrajectory") {
+        if (singleChoiceType.includes(currentForItem.type)) {
+          if (currentForItem.check) {
             currentForItem.check = false;
             isHistoricalTrajectory.value = false;
-          isSelf = true;
+            isRealTimeTracking.value = false;
-          break;
+          }
         }
       }
-      if (isSelf) break;
     }
     currentItem.check = !currentItem.check;
     if (currentItem.action) currentItem.action(currentItem.check, item1.type);

src/views/BI/components/real_time_tracking.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="container">
+    <el-row align="middle">
+      <el-col :span="24">
+        <el-form
+          :model="data.searchForm"
+          label-width="10px"
+          @submit.prevent="fnGetData"
+        >
+          <el-row>
+            <el-col :span="16">
+              <el-form-item prop="personnel">
+                <el-select v-model="data.searchForm.personnel" filterable>
+                  <el-option
+                    v-for="item in data.personList"
+                    :key="item.id"
+                    :label="`${item.name}(${item.id})`"
+                    :value="item.id"
+                  />
+                </el-select>
+              </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" @click="fnReset"
+                  >更新数据</el-button
+                >
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { onBeforeUnmount, reactive } from "vue";
+import { getRealTimeList } from "@/request/map.js";
+import { ElMessage } from "element-plus";
+import { trackUser } from "../js/trajectory.js";
+
+const data = reactive({
+  searchForm: {
+    personnel: "",
+  },
+  personList: [],
+});
+const fnGetPersonList = async () => {
+  const resData = await getRealTimeList();
+  const personList = resData.data.data.list;
+  for (let i = 0; i < personList.length; i++) {
+    personList[i] = personList[i].split(",");
+    data.personList.push({
+      id: personList[i][0],
+      name: personList[i][5],
+    });
+  }
+};
+fnGetPersonList();
+const fnGetData = () => {
+  if (!data.searchForm.personnel) {
+    ElMessage.warning("请选择人员");
+    return;
+  }
+  trackUser(data.searchForm.personnel, true);
+};
+const fnReset = () => {
+  fnGetPersonList();
+  trackUser("", false);
+};
+onBeforeUnmount(() => {
+  trackUser("", false);
+});
+</script>
+
+<style scoped lang="scss">
+.container {
+  position: absolute;
+  left: 500px;
+  bottom: 240px;
+  background-color: rgba(42, 86, 158, 0.53);
+  width: 30%;
+  padding: 18px 10px 0;
+  border-radius: 5px;
+}
+</style>

src/views/BI/index.vue

@@ -38,6 +38,7 @@
             v-model:right-current-component="rightCurrentComponent"
             v-model:right-option="right_option"
             v-model:is-historical-trajectory="isHistoricalTrajectory"
+            v-model:is-real-time-tracking="isRealTimeTracking"
           />
         </div>
       </transition>
@@ -68,6 +69,13 @@
         v-if="isHistoricalTrajectory && !isPureMap"
       />
     </transition>
+    <transition
+      enter-active-class="animate__animated animate__fadeInDown"
+      leave-active-class="animate__animated animate__fadeOutDown"
+      mode="out-in"
+    >
+      <real-time-tracking v-if="isRealTimeTracking && !isPureMap" />
+    </transition>
   </div>
 </template>
 
@@ -81,6 +89,7 @@ import { initMap } from "./js/map";
 import { useUserStore } from "@/pinia/user.js";
 import { getEnterpriseInfo } from "@/request/enterprise_management.js";
 import HistoricalTrajectoryOptions from "@/views/BI/components/historical_trajectory_options.vue";
+import RealTimeTracking from "@/views/BI/components/real_time_tracking.vue";
 
 const router = useRouter();
 const right_option = ref(true);
@@ -88,6 +97,7 @@ const transitionKey = ref(0);
 const leftCurrentComponent = ref("");
 const rightCurrentComponent = ref("");
 const isHistoricalTrajectory = ref(false);
+const isRealTimeTracking = ref(false);
 const isPureMap = ref(false);
 const userStore = useUserStore();
 const CORPINFO_ID = userStore.getUserInfo.CORPINFO_ID;