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:32:24 +08:00
parent 96b7ae4aaf
commit f7a81d10f3
1 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
src/views/BI/components/historical_trajectory_options.vue
View File

@ -36,12 +36,14 @@
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<div class="play_options"> <div class="play_options">
<el-icon :size="30" class="icon" @click="fnPlay"> <el-icon v-if="!data.isPlay" :size="30" class="icon" @click="fnPlay">
<video-play v-if="!data.isPlay" /> <video-play />
<video-pause v-else />
</el-icon> </el-icon>
<div class="schedule ml-10 pb-10"> <el-icon v-else :size="30" class="icon" @click="fnPause">
<el-slider v-model="data.currentSchedule" :max="data.maxSchedule" /> <video-pause />
</el-icon>
<div class="schedule ml-20 pb-10">
<el-slider v-model="currentSchedule" :max="data.maxSchedule" />
<div> <div>
<span class="time">{{ data.time }}</span> <span class="time">{{ data.time }}</span>
<span class="text-yellow ml-10"> <span class="text-yellow ml-10">
@ -49,7 +51,7 @@
</span> </span>
</div> </div>
</div> </div>
<div class="speed ml-10"> <div class="speed ml-20">
<el-select v-model="data.speed"> <el-select v-model="data.speed">
<el-option label="X 16.0" :value="16.0" /> <el-option label="X 16.0" :value="16.0" />
<el-option label="X 8.0" :value="8.0" /> <el-option label="X 8.0" :value="8.0" />
@ -69,6 +71,7 @@
import { reactive } from "vue"; import { reactive } from "vue";
import { ElMessage } from "element-plus"; import { ElMessage } from "element-plus";
import { VideoPause, VideoPlay } from "@element-plus/icons-vue"; import { VideoPause, VideoPlay } from "@element-plus/icons-vue";
import { useInterval } from "@vueuse/core";
const data = reactive({ const data = reactive({
searchForm: { searchForm: {
@ -76,12 +79,19 @@ const data = reactive({
dates: [], dates: [],
}, },
isPlay: false, isPlay: false,
currentSchedule: 10,
maxSchedule: 100, maxSchedule: 100,
time: "2021-08-01 12:00:00", time: "2021-08-01 12:00:00",
position: "图层1", position: "图层1",
speed: 1.0, speed: 1.0,
}); });
const {
counter: currentSchedule,
pause,
resume,
} = useInterval(() => 1000 / data.speed, {
immediate: false,
controls: true,
});
const fnGetData = () => { const fnGetData = () => {
if (data.searchForm.personnel === "") { if (data.searchForm.personnel === "") {
ElMessage.warning("请选择人员"); ElMessage.warning("请选择人员");
@ -94,7 +104,12 @@ const fnGetData = () => {
ElMessage.success("搜索成功"); ElMessage.success("搜索成功");
}; };
const fnPlay = () => { const fnPlay = () => {
data.isPlay = !data.isPlay; data.isPlay = true;
resume();
};
const fnPause = () => {
data.isPlay = false;
pause();
}; };
</script> </script>