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

纯净地图和增加动画

pull/3/head
LiuJiaNan 2024-02-27 16:02:35 +08:00
parent 939817eff8
commit 9f58dbdd9c
3 changed files with 96 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,25 +9,32 @@
<div class="option">
<img :src="item.check ? item.imgSelect : item.img" alt="" />
<div class="title">{{ item.title }}</div>
</div>
<div :class="['child_container', { active: item.check }]">
<div :class="['child_options', item.type]">
<div
v-for="(item1, index1) in item.list"
:key="item1.title"
class="child_option"
@click.stop="fnBottomChildOptionsListChange(index, item1, index1)"
>
<img :src="item1.check ? item1.imgSelect : item1.img" alt="" />
<div class="tit" :class="item1.check ? 'active' : ''">
{{ item1.title }}
<div class="child_container">
<!-- <transition-->
<!-- enter-active-class="animate__animated animate__bounceIn"-->
<!-- leave-active-class="animate__animated animate__bounceOut"-->
<!-- mode="out-in"-->
<!-- >-->
<div v-show="item.check" :class="['child_options', item.type]">
<div
v-for="(item1, index1) in item.list"
:key="item1.title"
class="child_option"
@click.stop="fnBottomChildOptionsListChange(index, item1, index1)"
>
<img :src="item1.check ? item1.imgSelect : item1.img" alt="" />
<div class="tit" :class="item1.check ? 'active' : ''">
{{ item1.title }}
</div>
</div>
</div>
<!-- </transition>-->
</div>
</div>
</div>
</div>
</template>
<script setup>
import { reactive, markRaw } from "vue";
import Personnel from "@/views/BI/components/personnel.vue";
@ -346,27 +353,20 @@ const data = reactive({
bottomOptionsList,
});
const fnBottomOptionsListChange = (item, index) => {
const currentItem = data.bottomOptionsList[index];
// ai 视频报警
if (index === 4) {
data.bottomOptionsList[index].action(
!data.bottomOptionsList[index].check,
item.type
);
if (currentItem.action) currentItem.action(!currentItem.check, item.type);
}
for (let i = 0; i < data.bottomOptionsList.length; i++) {
if (index === i) {
data.bottomOptionsList[index].check =
!data.bottomOptionsList[index].check;
currentItem.check = !currentItem.check;
continue;
}
data.bottomOptionsList[i].check = false;
}
leftCurrentComponent.value = data.bottomOptionsList[index].check
? item.components[0]
: "";
rightCurrentComponent.value = data.bottomOptionsList[index].check
? item.components[1]
: "";
leftCurrentComponent.value = currentItem.check ? item.components[0] : "";
rightCurrentComponent.value = currentItem.check ? item.components[1] : "";
rightOption.value = index !== 4;
};
const fnBottomChildOptionsListChange = (index, item1, index1) => {
@ -402,6 +402,7 @@ const fnBottomChildOptionsListChange = (index, item1, index1) => {
}
};
</script>
<style scoped lang="scss">
.container {
width: 100%;
@ -445,22 +446,13 @@ const fnBottomChildOptionsListChange = (index, item1, index1) => {
}
.child_container {
position: relative;
width: 80px;
height: 95px;
left: 0;
top: -95px;
display: none;
&.active {
display: block;
}
position: absolute;
left: 50%;
top: -100px;
transform: translateX(-50%);
.child_options {
position: absolute;
left: 50%;
top: -120px;
transform: translateX(-50%);
position: relative;
background-image: linear-gradient(
to right,
rgba(0, 0, 0, 0) 0%,
@ -478,7 +470,6 @@ const fnBottomChildOptionsListChange = (index, item1, index1) => {
border-left: none;
border-right: none;
display: flex;
animation: 0.5s all;
.child_option {
text-align: center;
@ -495,7 +486,7 @@ const fnBottomChildOptionsListChange = (index, item1, index1) => {
}
&.workSafely {
left: 100%;
left: 20%;
}
}
}

20
src/views/BI/components/rightico.vue
View File

@ -17,8 +17,17 @@
<script setup>
import { reactive } from "vue";
import { reduction } from "../js/map";
import { useFullscreen } from "@vueuse/core";
import { useFullscreen, useVModel } from "@vueuse/core";
const props = defineProps({
isPureMap: {
type: Boolean,
required: true,
default: false,
},
});
const emits = defineEmits(["update:isPureMap"]);
const isPureMap = useVModel(props, "isPureMap", emits);
const { isFullscreen, toggle } = useFullscreen();
const data = reactive({
rightOptionsList: [
@ -45,23 +54,18 @@ const data = reactive({
check: false,
label: "返回中心点",
},
{
img: new URL("/src/assets/images/map/rico3.png", import.meta.url).href,
checkImg: new URL("/src/assets/images/map/rico3_on.png", import.meta.url)
.href,
check: false,
label: "切换视角",
},
{
img: new URL("/src/assets/images/map/rico4.png", import.meta.url).href,
checkImg: new URL("/src/assets/images/map/rico4_on.png", import.meta.url)
.href,
check: false,
label: "纯净地图",
action: () => (isPureMap.value = !isPureMap.value),
},
],
});
</script>
<style scoped lang="scss">
.right_options {
width: 40px;

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

@ -13,37 +13,62 @@
<div class="title" />
</div>
</transition>
<div v-if="leftCurrentComponent" class="left_container">
<transition
enter-active-class="animate__animated animate__fadeInLeft"
leave-active-class="animate__animated animate__fadeOutLeft"
mode="out-in"
<transition
enter-active-class="animate__animated animate__fadeInLeft"
leave-active-class="animate__animated animate__fadeOutLeft"
mode="out-in"
>
<div
v-if="leftCurrentComponent && !isPureMap"
:key="Math.random()"
class="left_container"
>
<component :is="leftCurrentComponent" />
</div>
</transition>
<div class="mid-external-container">
<transition
enter-active-class="animate__animated animate__fadeInDown"
leave-active-class="animate__animated animate__fadeOutDown"
mode="out-in"
>
<div v-show="!isPureMap" class="mid-container">
<bottom-options
v-model:left-current-component="leftCurrentComponent"
v-model:right-current-component="rightCurrentComponent"
v-model:right-option="right_option"
v-model:is-historical-trajectory="isHistoricalTrajectory"
/>
</div>
</transition>
</div>
<div class="mid-container">
<bottom-options
v-model:left-current-component="leftCurrentComponent"
v-model:right-current-component="rightCurrentComponent"
v-model:right-option="right_option"
v-model:is-historical-trajectory="isHistoricalTrajectory"
/>
</div>
<transition
enter-active-class="animate__animated animate__fadeInRight"
leave-active-class="animate__animated animate__fadeOutRight"
mode="out-in"
>
<div v-if="rightCurrentComponent" class="right_container">
<div
v-if="rightCurrentComponent && !isPureMap"
:key="Math.random()"
class="right_container"
>
<component :is="rightCurrentComponent" />
</div>
</transition>
<div v-show="right_option" class="right_ico">
<right-ico></right-ico>
<right-ico v-model:is-pure-map="isPureMap" />
</div>
<historical-trajectory-options v-if="isHistoricalTrajectory" />
<transition
enter-active-class="animate__animated animate__fadeInDown"
leave-active-class="animate__animated animate__fadeOutDown"
mode="out-in"
>
<historical-trajectory-options
v-if="isHistoricalTrajectory && !isPureMap"
/>
</transition>
</div>
</template>
@ -64,9 +89,9 @@ const transitionKey = ref(0);
const leftCurrentComponent = ref("");
const rightCurrentComponent = ref("");
const isHistoricalTrajectory = ref(false);
const isPureMap = ref(false);
const userStore = useUserStore();
const CORPINFO_ID = userStore.getUserInfo.CORPINFO_ID;
onMounted(async () => {
autofit.init({
dh: document.querySelector(".map_bg").offsetHeight,
@ -85,6 +110,7 @@ onBeforeUnmount(() => {
autofit.off();
});
</script>
<style scoped lang="scss">
#bi_container {
width: 100%;
@ -161,6 +187,7 @@ onBeforeUnmount(() => {
left: 20px;
top: 100px;
}
.right_container {
width: 435px;
position: absolute;
@ -168,15 +195,18 @@ onBeforeUnmount(() => {
top: 100px;
}
.mid-container {
width: 934px;
height: 88px;
background-image: url("/src/assets/images/map/bottombg.png");
background-repeat: no-repeat;
position: fixed;
.mid-external-container {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
.mid-container {
width: 934px;
height: 88px;
background-image: url("/src/assets/images/map/bottombg.png");
background-repeat: no-repeat;
}
}
.right_ico {