364 lines
8.4 KiB
Vue
364 lines
8.4 KiB
Vue
<template>
|
||
<div class="center-container">
|
||
<div class="statistics-panel">
|
||
<div v-for="(stat, index) in statistics" :key="index" class="stat-card">
|
||
<div class="card-background"></div>
|
||
<div class="icon-wrapper">
|
||
<img :src="stat.image" :alt="stat.label" />
|
||
</div>
|
||
<div class="stat-content">
|
||
<div class="stat-label">{{ stat.label }}</div>
|
||
<div class="stat-value">
|
||
<span class="number">{{ stat.value }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div v-if="showServiceArea" class="map-container">
|
||
<div class="map-title">
|
||
<div class="title-content">
|
||
<span class="title-text">南皮服务区</span>
|
||
</div>
|
||
<div class="close-btn" @click="closeDialog">×</div>
|
||
</div>
|
||
<div class="map-con">
|
||
<RealTimeImageCenter />
|
||
</div>
|
||
</div>
|
||
<div class="map-container bg-header bg-header-one" style="width: 1800px;" v-if="showDeviceInfo">
|
||
<div class="map-title">
|
||
<div class="title-content">
|
||
<span class="title-text">设备信息（NO：3_ZFJ12_3）</span>
|
||
</div>
|
||
<div class="close-btn" @click="closeDeviceInfo">×</div>
|
||
</div>
|
||
<div class="map-con">
|
||
<DeviceInfoComponent :deviceInfo="deviceInfo" />
|
||
</div>
|
||
</div>
|
||
<div class="map-container bg-header bg-header-two" style="width: 1800px;height: 1000px;" v-if="showDeviceInfoTwo">
|
||
<div class="map-title">
|
||
<div class="title-content">
|
||
<span class="title-text">设备信息（NO：3_TCMS1）</span>
|
||
</div>
|
||
<div class="close-btn" @click="closeDeviceInfo">×</div>
|
||
</div>
|
||
<div class="map-con">
|
||
<DeviceInfoComponentTwo :deviceInfo="deviceInfoTwo" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, nextTick } from "vue";
|
||
import { onMounted } from 'vue';
|
||
import fee from "@/assets/img/fee.png";
|
||
import km from "@/assets/img/km.png";
|
||
import toll from "@/assets/img/toll.png";
|
||
import RealTimeImageCenter from "./RealTimeImageCenter.vue";
|
||
import DeviceInfoComponent from "./DeviceInfoComponent.vue";
|
||
import bridge from "@/assets/img/bridge.png";
|
||
import hub from "@/assets/img/hub.png";
|
||
import { getDeviceList } from "@/api/modules/index";
|
||
import DeviceInfoComponentTwo from "./DeviceInfoComponentTwo.vue";
|
||
import Map from "./map.vue"
|
||
import { emitter } from '@/utils/eventBus';
|
||
const showServiceArea = ref(false);
|
||
const showMap = ref(true);
|
||
const showDeviceInfo = ref(false);
|
||
const showDeviceInfoTwo = ref(false);
|
||
const closeDialog = () => {
|
||
showServiceArea.value = false;
|
||
};
|
||
// 统计数据配置
|
||
const statistics = ref([
|
||
{
|
||
image: km,
|
||
value: "78.338",
|
||
label: "全里程（公里）",
|
||
},
|
||
{
|
||
image: toll,
|
||
value: "5",
|
||
label: "收费站",
|
||
},
|
||
{
|
||
image: fee,
|
||
value: "2",
|
||
label: "服务区",
|
||
},
|
||
{
|
||
image: bridge,
|
||
value: "7",
|
||
label: "桥梁（座）",
|
||
},
|
||
{
|
||
image: hub,
|
||
value: "7",
|
||
label: "隧道互通（座）",
|
||
},
|
||
]);
|
||
|
||
// 设备信息数据
|
||
const deviceInfo = ref({
|
||
deviceType: '视频监控',
|
||
cameraType: '枪机',
|
||
deviceCode: '3_CAM1_0',
|
||
roadSection: '路段名称',
|
||
direction: '邯郸方向',
|
||
stakeNumber: 'K18+324',
|
||
longitude: '44.230145',
|
||
latitude: '45.65412',
|
||
ipAddress: '13.106.2.10'
|
||
});
|
||
|
||
const deviceInfoTwo = ref({
|
||
deviceType: '视频监控',
|
||
cameraType: '枪机',
|
||
deviceCode: '3_CAM1_0',
|
||
roadSection: '路段名称',
|
||
direction: '邯郸方向',
|
||
stakeNumber: 'K18+324',
|
||
longitude: '44.230145',
|
||
latitude: '45.65412',
|
||
ipAddress: '13.106.2.10'
|
||
});
|
||
|
||
// const deviceInfo = ref({});
|
||
function handleShowDeviceInfo(data) {
|
||
console.log("接收到设备信息:", data);
|
||
|
||
// 关闭其他面板
|
||
showDeviceInfo.value = false;
|
||
showDeviceInfoTwo.value = false;
|
||
|
||
if (data.deviceTypeId === "22" || data.deviceTypeId === "44") {
|
||
showDeviceInfo.value = true;
|
||
} else if (data.deviceTypeId === "15" || data.deviceTypeId === "53") {
|
||
showDeviceInfoTwo.value = true;
|
||
}
|
||
|
||
deviceInfo.value = data;
|
||
}
|
||
const closeDeviceInfo = () => {
|
||
showDeviceInfo.value = false;
|
||
showDeviceInfoTwo.value = false;
|
||
showMap.value = true;
|
||
};
|
||
const mapFlag = ref(true);
|
||
onMounted(() => {
|
||
emitter.on("show-device-info", handleShowDeviceInfo);
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.center-container {
|
||
width: 100%;
|
||
// height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
position: relative;
|
||
.map-container.bg-header {
|
||
position: absolute;
|
||
top: 500px;
|
||
left: 42.5%;
|
||
// transform: translate(-50%, -50%);
|
||
z-index: 2000;
|
||
// box-shadow: 0 8px 40px rgba(0,0,0,0.3);
|
||
}
|
||
.bg-header-one{
|
||
background-image: url("@/assets/img/eqm/eqminfo.png");
|
||
}
|
||
.bg-header-two{
|
||
background-image: url("@/assets/img/eqm/eqminfo2.png");
|
||
}
|
||
}
|
||
|
||
.statistics-panel {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
width: 40%;
|
||
padding: 20px;
|
||
gap: 30px;
|
||
padding-top: 200px;
|
||
padding-bottom: 50px;
|
||
}
|
||
|
||
.stat-card {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 15px 20px;
|
||
}
|
||
|
||
.card-background {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: linear-gradient(135deg,
|
||
rgba(0, 170, 255, 0.1) 0%,
|
||
transparent 100%);
|
||
border-radius: 8px;
|
||
opacity: 0.5;
|
||
transition: opacity 0.3s ease;
|
||
}
|
||
|
||
.icon-wrapper {
|
||
position: relative;
|
||
margin-right: 15px;
|
||
|
||
img {
|
||
width: 160px;
|
||
height: 160px;
|
||
}
|
||
}
|
||
|
||
.stat-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: relative;
|
||
}
|
||
|
||
.stat-value {
|
||
.number {
|
||
font-size: 64px !important;
|
||
font-weight: bold;
|
||
color: #1ae9ee;
|
||
}
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 32px !important;
|
||
color: rgba(255, 255, 255, 0.9);
|
||
margin-top: 8px;
|
||
letter-spacing: 1px;
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.map-container {
|
||
width: 78%;
|
||
margin-top: 30px;
|
||
// background: linear-gradient(360deg,
|
||
// rgba(15, 43, 89, 0.3) 0%,
|
||
// rgba(15, 43, 89, 0) 100%),
|
||
// rgba(15, 43, 89, 0.85);
|
||
// box-shadow: inset 0px 0px 57px 0px rgba(0, 149, 255, 0.41),
|
||
// inset 0px 0px 21px 0px rgba(49, 176, 255, 0.47);
|
||
// border-radius: 8px;
|
||
// border: 1px solid;
|
||
// border-image: linear-gradient(180deg,
|
||
// rgba(186, 213, 255, 0.3),
|
||
// rgba(186, 213, 255, 0)) 1 1;
|
||
// padding: 20px;
|
||
// box-sizing: border-box;
|
||
height: 1700px;
|
||
}
|
||
|
||
.map-title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 15px;
|
||
padding: 15px 40px;
|
||
position: relative;
|
||
border-bottom: 1px solid rgba(26, 233, 238, 0.2);
|
||
height: 150px;
|
||
background: repeating-linear-gradient(-65deg,
|
||
rgba(15, 43, 89, 0.3) 0px,
|
||
rgba(15, 43, 89, 0.3) 50px,
|
||
rgba(26, 233, 238, 0.05) 50px,
|
||
rgba(26, 233, 238, 0.05) 100px);
|
||
|
||
.title-content {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.title-text {
|
||
font-size: 52px;
|
||
color: #fff;
|
||
font-weight: 700;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.close-btn {
|
||
font-size: 24px;
|
||
color: #fff;
|
||
cursor: pointer;
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 50%;
|
||
transition: all 0.3s ease;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
position: relative;
|
||
|
||
&::before,
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
width: 20px;
|
||
height: 2px;
|
||
background-color: #fff;
|
||
top: 50%;
|
||
left: 50%;
|
||
}
|
||
|
||
&::before {
|
||
transform: translate(-50%, -50%) rotate(45deg);
|
||
}
|
||
|
||
&::after {
|
||
transform: translate(-50%, -50%) rotate(-45deg);
|
||
}
|
||
|
||
&:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
border-color: rgba(255, 255, 255, 0.3);
|
||
transform: scale(1.05);
|
||
}
|
||
}
|
||
}
|
||
|
||
.map-con {
|
||
width: 100%;
|
||
height: 90%;
|
||
/* background-color: #1ae9ee; */
|
||
// 用户可以在这里添加地图相关的内容
|
||
}
|
||
|
||
.eqm-info {
|
||
width: 1788px;
|
||
margin-top: 30px;
|
||
background: linear-gradient(360deg,
|
||
rgba(15, 43, 89, 0.3) 0%,
|
||
rgba(15, 43, 89, 0) 100%),
|
||
rgba(15, 43, 89, 0.85);
|
||
box-shadow: inset 0px 0px 57px 0px rgba(0, 149, 255, 0.41),
|
||
inset 0px 0px 21px 0px rgba(49, 176, 255, 0.47);
|
||
border-radius: 8px;
|
||
border: 1px solid;
|
||
border-image: linear-gradient(180deg,
|
||
rgba(186, 213, 255, 0.3),
|
||
rgba(186, 213, 255, 0)) 1 1;
|
||
padding: 20px;
|
||
box-sizing: border-box;
|
||
height: 1700px;
|
||
|
||
.eqm-title {
|
||
width: 100%;
|
||
height: 56px;
|
||
background-image: url("../../assets/img/eqm/eqmtitle.png");
|
||
}
|
||
}
|
||
|
||
</style>
|