forked from integrated_whb/integrated_whb_vue
历史轨迹
parent
2530d035c5
commit
96b7ae4aaf
|
|
@ -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(
|
||||
props,
|
||||
emits
|
||||
);
|
||||
const {
|
||||
leftCurrentComponent,
|
||||
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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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(() => {
|
||||
|
|
|
|||
Loading…
Reference in New Issue