wangpeng
/
integrated_traffic_vue
forked from integrated_whb/integrated_whb_vue
1
0
Fork 0
Code Pull Requests Activity

历史轨迹

pull/1/head
LiuJiaNan 2024-02-21 16:18:58 +08:00
parent 2530d035c5
commit 96b7ae4aaf
3 changed files with 164 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/views/BI/components/bottom_options.vue
View File

@ -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;
data.bottomOptionsList[index].list[index1].action(
data.bottomOptionsList[index].list[index1].check,
item1.type
);
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">

127
src/views/BI/components/historical_trajectory_options.vue Normal file
View File

@ -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>

6
src/views/BI/index.vue
View File

@ -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(() => {