forked from integrated_whb/integrated_whb_vue
504 lines
14 KiB
Vue
504 lines
14 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div
|
|
v-for="(item, index) in data.bottomOptionsList"
|
|
:key="item.title"
|
|
class="options"
|
|
@click="fnBottomOptionsListChange(item, index)"
|
|
>
|
|
<div class="option">
|
|
<img :src="item.check ? item.imgSelect : item.img" alt="" />
|
|
<div class="title">{{ item.title }}</div>
|
|
<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, { active: item.check }]"
|
|
>
|
|
<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";
|
|
import WorkSafely from "@/views/BI/components/work_safely.vue";
|
|
import EntranceControl from "@/views/BI/components/entrance_control.vue";
|
|
import GraveDangerous from "@/views/BI/components/grave_dangerous.vue";
|
|
import VideoAIAnalysis from "@/views/BI/components/video_ai_analysis.vue";
|
|
import VideoAIAnalysisRight from "@/views/BI/components/video_ai_analysisRight.vue";
|
|
import { useVModels } from "@vueuse/core";
|
|
import { handleTrajectory, handleFence } from "@/views/BI/js/trajectory.js";
|
|
import {
|
|
handleHortwork,
|
|
handleConfinedspaceWork,
|
|
handleHighWork,
|
|
} from "@/views/BI/js/eight_work.js";
|
|
import { handleCamera } from "@/views/BI/js/camera.js";
|
|
|
|
const props = defineProps({
|
|
leftCurrentComponent: {
|
|
type: [Object, Function, String],
|
|
required: true,
|
|
default: "",
|
|
},
|
|
rightCurrentComponent: {
|
|
type: [Object, Function, String],
|
|
required: true,
|
|
default: "",
|
|
},
|
|
rightOption: {
|
|
type: Boolean,
|
|
required: true,
|
|
default: false,
|
|
},
|
|
isHistoricalTrajectory: {
|
|
type: Boolean,
|
|
required: true,
|
|
default: false,
|
|
},
|
|
});
|
|
const emits = defineEmits([
|
|
"update:leftCurrentComponent",
|
|
"update:rightCurrentComponent",
|
|
"update:isHistoricalTrajectory",
|
|
"update:rightOption",
|
|
]);
|
|
const {
|
|
leftCurrentComponent,
|
|
rightCurrentComponent,
|
|
rightOption,
|
|
isHistoricalTrajectory,
|
|
} = useVModels(props, emits);
|
|
|
|
const bottomOptionsList = [
|
|
{
|
|
img: new URL("/src/assets/images/map/bico1.png", import.meta.url).href,
|
|
imgSelect: new URL("/src/assets/images/map/bico1_on.png", import.meta.url)
|
|
.href,
|
|
title: "人员定位",
|
|
type: "personnelPositioning",
|
|
check: false,
|
|
components: [markRaw(Personnel)],
|
|
list: [
|
|
{
|
|
img: new URL("/src/assets/images/map/bottom/ico1.png", import.meta.url)
|
|
.href,
|
|
imgSelect: new URL(
|
|
"/src/assets/images/map/bottom/ico1_on.png",
|
|
import.meta.url
|
|
).href,
|
|
title: "人员",
|
|
type: "personnel",
|
|
check: false,
|
|
action: handleTrajectory,
|
|
},
|
|
// {
|
|
// img: new URL("/src/assets/images/map/bottom/ico2.png", import.meta.url)
|
|
// .href,
|
|
// imgSelect: new URL(
|
|
// "/src/assets/images/map/bottom/ico2_on.png",
|
|
// import.meta.url
|
|
// ).href,
|
|
// title: "视频",
|
|
// type: "video",
|
|
// check: false,
|
|
// },
|
|
{
|
|
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: "electronicFence",
|
|
check: false,
|
|
action: handleFence,
|
|
},
|
|
{
|
|
img: new URL("/src/assets/images/map/bottom/ico18.png", import.meta.url)
|
|
.href,
|
|
imgSelect: new URL(
|
|
"/src/assets/images/map/bottom/ico18_on.png",
|
|
import.meta.url
|
|
).href,
|
|
title: "历史轨迹",
|
|
type: "historicalTrajectory",
|
|
check: false,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
img: new URL("/src/assets/images/map/bico2.png", import.meta.url).href,
|
|
imgSelect: new URL("/src/assets/images/map/bico2_on.png", import.meta.url)
|
|
.href,
|
|
title: "安全作业",
|
|
type: "workSafely",
|
|
check: false,
|
|
components: [markRaw(WorkSafely)],
|
|
list: [
|
|
{
|
|
img: new URL("/src/assets/images/map/bottom/ico4.png", import.meta.url)
|
|
.href,
|
|
imgSelect: new URL(
|
|
"/src/assets/images/map/bottom/ico4_on.png",
|
|
import.meta.url
|
|
).href,
|
|
title: "动火作业",
|
|
type: "hotWork",
|
|
check: false,
|
|
action: handleHortwork,
|
|
},
|
|
{
|
|
img: new URL("/src/assets/images/map/bottom/ico5.png", import.meta.url)
|
|
.href,
|
|
imgSelect: new URL(
|
|
"/src/assets/images/map/bottom/ico5_on.png",
|
|
import.meta.url
|
|
).href,
|
|
title: "受限空间作业",
|
|
type: "acceptance",
|
|
check: false,
|
|
action: handleConfinedspaceWork,
|
|
},
|
|
{
|
|
img: new URL("/src/assets/images/map/bottom/ico6.png", import.meta.url)
|
|
.href,
|
|
imgSelect: new URL(
|
|
"/src/assets/images/map/bottom/ico6_on.png",
|
|
import.meta.url
|
|
).href,
|
|
title: "临时用电作业",
|
|
type: "temporaryElectricalWork",
|
|
check: false,
|
|
},
|
|
{
|
|
img: new URL("/src/assets/images/map/bottom/ico7.png", import.meta.url)
|
|
.href,
|
|
imgSelect: new URL(
|
|
"/src/assets/images/map/bottom/ico7_on.png",
|
|
import.meta.url
|
|
).href,
|
|
title: "高处作业",
|
|
type: "workAtHeight",
|
|
check: false,
|
|
action: handleHighWork,
|
|
},
|
|
{
|
|
img: new URL("/src/assets/images/map/bottom/ico8.png", import.meta.url)
|
|
.href,
|
|
imgSelect: new URL(
|
|
"/src/assets/images/map/bottom/ico8_on.png",
|
|
import.meta.url
|
|
).href,
|
|
title: "断路作业",
|
|
type: "circuitBreakingOperations",
|
|
check: false,
|
|
},
|
|
{
|
|
img: new URL("/src/assets/images/map/bottom/ico9.png", import.meta.url)
|
|
.href,
|
|
imgSelect: new URL(
|
|
"/src/assets/images/map/bottom/ico9_on.png",
|
|
import.meta.url
|
|
).href,
|
|
title: "动土作业",
|
|
type: "groundbreakingWork",
|
|
check: false,
|
|
},
|
|
{
|
|
img: new URL("/src/assets/images/map/bottom/ico10.png", import.meta.url)
|
|
.href,
|
|
imgSelect: new URL(
|
|
"/src/assets/images/map/bottom/ico10_on.png",
|
|
import.meta.url
|
|
).href,
|
|
title: "吊装作业",
|
|
type: "hoistingOperations",
|
|
check: false,
|
|
},
|
|
{
|
|
img: new URL("/src/assets/images/map/bottom/ico11.png", import.meta.url)
|
|
.href,
|
|
imgSelect: new URL(
|
|
"/src/assets/images/map/bottom/ico11_on.png",
|
|
import.meta.url
|
|
).href,
|
|
title: "盲板抽堵作业",
|
|
type: "blindPlatePluggingOperation",
|
|
check: false,
|
|
},
|
|
{
|
|
img: new URL("/src/assets/images/map/bottom/ico12.png", import.meta.url)
|
|
.href,
|
|
imgSelect: new URL(
|
|
"/src/assets/images/map/bottom/ico12_on.png",
|
|
import.meta.url
|
|
).href,
|
|
title: "摄像头",
|
|
type: "workSafelyCamera",
|
|
check: false,
|
|
action: handleCamera,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
img: new URL("/src/assets/images/map/bico3.png", import.meta.url).href,
|
|
imgSelect: new URL("/src/assets/images/map/bico3_on.png", import.meta.url)
|
|
.href,
|
|
title: "口门门禁",
|
|
type: "entranceControl",
|
|
check: false,
|
|
components: [markRaw(EntranceControl)],
|
|
list: [
|
|
{
|
|
img: new URL("/src/assets/images/map/bottom/ico13.png", import.meta.url)
|
|
.href,
|
|
imgSelect: new URL(
|
|
"/src/assets/images/map/bottom/ico13_on.png",
|
|
import.meta.url
|
|
).href,
|
|
title: "人员",
|
|
type: "personnel",
|
|
check: false,
|
|
// action:
|
|
},
|
|
{
|
|
img: new URL("/src/assets/images/map/bottom/ico14.png", import.meta.url)
|
|
.href,
|
|
imgSelect: new URL(
|
|
"/src/assets/images/map/bottom/ico14_on.png",
|
|
import.meta.url
|
|
).href,
|
|
title: "车辆",
|
|
type: "vehicle",
|
|
check: false,
|
|
},
|
|
{
|
|
img: new URL("/src/assets/images/map/bottom/ico15.png", import.meta.url)
|
|
.href,
|
|
imgSelect: new URL(
|
|
"/src/assets/images/map/bottom/ico15_on.png",
|
|
import.meta.url
|
|
).href,
|
|
title: "摄像头",
|
|
type: "camera",
|
|
check: false,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
img: new URL("/src/assets/images/map/bico4.png", import.meta.url).href,
|
|
imgSelect: new URL("/src/assets/images/map/bico4_on.png", import.meta.url)
|
|
.href,
|
|
title: "重大危险源",
|
|
type: "significantSourcesOfDanger",
|
|
check: false,
|
|
components: [markRaw(GraveDangerous)],
|
|
list: [
|
|
{
|
|
img: new URL("/src/assets/images/map/bottom/ico16.png", import.meta.url)
|
|
.href,
|
|
imgSelect: new URL(
|
|
"/src/assets/images/map/bottom/ico16_on.png",
|
|
import.meta.url
|
|
).href,
|
|
title: "储罐区",
|
|
type: "tankFarms",
|
|
check: false,
|
|
},
|
|
{
|
|
img: new URL("/src/assets/images/map/bottom/ico17.png", import.meta.url)
|
|
.href,
|
|
imgSelect: new URL(
|
|
"/src/assets/images/map/bottom/ico17_on.png",
|
|
import.meta.url
|
|
).href,
|
|
title: "压力管道",
|
|
type: "pressurePiping",
|
|
check: false,
|
|
},
|
|
],
|
|
},
|
|
{
|
|
img: new URL("/src/assets/images/map/bico5.png", import.meta.url).href,
|
|
imgSelect: new URL("/src/assets/images/map/bico5_on.png", import.meta.url)
|
|
.href,
|
|
title: "视频AI分析",
|
|
type: "videoAIAnalysis",
|
|
check: false,
|
|
components: [markRaw(VideoAIAnalysis), markRaw(VideoAIAnalysisRight)],
|
|
action: handleCamera,
|
|
list: [],
|
|
},
|
|
];
|
|
const data = reactive({
|
|
bottomOptionsList,
|
|
});
|
|
const fnBottomOptionsListChange = (item, index) => {
|
|
const currentItem = data.bottomOptionsList[index];
|
|
// ai 视频报警
|
|
if (index === 4) {
|
|
if (currentItem.action) currentItem.action(!currentItem.check, item.type);
|
|
}
|
|
for (let i = 0; i < data.bottomOptionsList.length; i++) {
|
|
if (index === i) {
|
|
currentItem.check = !currentItem.check;
|
|
continue;
|
|
}
|
|
data.bottomOptionsList[i].check = false;
|
|
}
|
|
leftCurrentComponent.value = currentItem.check ? item.components[0] : "";
|
|
rightCurrentComponent.value = currentItem.check ? item.components[1] : "";
|
|
rightOption.value = index !== 4;
|
|
};
|
|
const fnBottomChildOptionsListChange = (index, item1, index1) => {
|
|
const currentItem = data.bottomOptionsList[index].list[index1];
|
|
if (item1.type === "historicalTrajectory") {
|
|
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.check) {
|
|
if (currentForItem.type !== item1.type) currentForItem.check = false;
|
|
if (currentForItem.action) currentForItem.action(false, item1.type);
|
|
}
|
|
}
|
|
}
|
|
currentItem.check = !currentItem.check;
|
|
isHistoricalTrajectory.value = !isHistoricalTrajectory.value;
|
|
} 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") {
|
|
currentForItem.check = false;
|
|
isHistoricalTrajectory.value = false;
|
|
isSelf = true;
|
|
break;
|
|
}
|
|
}
|
|
if (isSelf) break;
|
|
}
|
|
currentItem.check = !currentItem.check;
|
|
if (currentItem.action) currentItem.action(currentItem.check, item1.type);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.container {
|
|
width: 100%;
|
|
position: relative;
|
|
|
|
.options {
|
|
width: 80px;
|
|
height: 95px;
|
|
position: absolute;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
|
|
&:nth-child(1) {
|
|
left: 130px;
|
|
bottom: -54px;
|
|
}
|
|
|
|
&:nth-child(2) {
|
|
left: 280px;
|
|
bottom: -34px;
|
|
}
|
|
|
|
&:nth-child(3) {
|
|
left: 430px;
|
|
bottom: -25px;
|
|
}
|
|
|
|
&:nth-child(4) {
|
|
left: 580px;
|
|
bottom: -34px;
|
|
}
|
|
|
|
&:nth-child(5) {
|
|
left: 730px;
|
|
bottom: -54px;
|
|
}
|
|
|
|
.title {
|
|
margin-top: 5px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.child_container {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: -100px;
|
|
transform: translateX(-50%);
|
|
|
|
.child_options {
|
|
position: relative;
|
|
background-image: linear-gradient(
|
|
to right,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 0.4) 50%,
|
|
rgba(0, 0, 0, 0) 100%
|
|
);
|
|
border: 1px solid;
|
|
border-image: linear-gradient(
|
|
to right,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(2, 119, 142, 1) 50%,
|
|
rgba(255, 255, 255, 0) 100%
|
|
)
|
|
1;
|
|
border-left: none;
|
|
border-right: none;
|
|
display: none;
|
|
&.active {
|
|
display: flex;
|
|
}
|
|
|
|
.child_option {
|
|
text-align: center;
|
|
display: inline-block;
|
|
padding: 15px 25px;
|
|
|
|
.tit {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.active {
|
|
color: #28b9fe;
|
|
}
|
|
}
|
|
|
|
&.workSafely {
|
|
left: 20%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|