大屏修改样式 增加弹窗
This commit is contained in:
parent
cf0ab0dca5
commit
d769327701
BIN
packages/screen/src/assets/RiskWarning_img/图标_media_dvr@2x.png
Normal file
BIN
packages/screen/src/assets/RiskWarning_img/图标_media_dvr@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
223
packages/screen/src/views/RiskWarning/component/ChongqingMap.vue
Normal file
223
packages/screen/src/views/RiskWarning/component/ChongqingMap.vue
Normal file
@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="chongqing-map-container">
|
||||
<div ref="mapContainer" class="map-container"></div>
|
||||
<div v-if="loading" class="loading-overlay">
|
||||
<div class="loading-spinner"></div>
|
||||
<span class="loading-text">地图加载中...</span>
|
||||
</div>
|
||||
<div v-if="error" class="error-overlay">
|
||||
<span class="error-text">{{ error }}</span>
|
||||
<button class="retry-btn" @click="loadMapData">重试</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
|
||||
const mapContainer = ref(null)
|
||||
const loading = ref(false)
|
||||
const error = ref(null)
|
||||
let mapInstance = null
|
||||
|
||||
// 重庆地图GeoJSON API地址
|
||||
const GEOJSON_URL = 'https://geo.datav.aliyun.com/areas_v3/bound/500000_full.json'
|
||||
|
||||
// 加载地图数据
|
||||
const loadMapData = async () => {
|
||||
loading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const response = await fetch(GEOJSON_URL)
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`)
|
||||
}
|
||||
|
||||
const geoJsonData = await response.json()
|
||||
|
||||
// 初始化地图
|
||||
initMap(geoJsonData)
|
||||
|
||||
} catch (err) {
|
||||
console.error('加载地图数据失败:', err)
|
||||
error.value = '地图数据加载失败，请检查网络连接'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 初始化地图
|
||||
const initMap = (geoJsonData) => {
|
||||
if (!mapContainer.value) return
|
||||
|
||||
try {
|
||||
// 清除旧地图实例
|
||||
if (mapInstance) {
|
||||
mapInstance.remove()
|
||||
}
|
||||
|
||||
// 创建地图实例
|
||||
mapInstance = new window.L.Map(mapContainer.value, {
|
||||
center: [29.563, 106.551], // 重庆中心坐标
|
||||
zoom: 8,
|
||||
minZoom: 7,
|
||||
maxZoom: 18,
|
||||
zoomControl: false,
|
||||
attributionControl: false
|
||||
})
|
||||
|
||||
// 添加瓦片图层
|
||||
const tileLayer = new window.L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
|
||||
})
|
||||
mapInstance.addLayer(tileLayer)
|
||||
|
||||
// 添加GeoJSON图层
|
||||
const geoJsonLayer = new window.L.GeoJSON(geoJsonData, {
|
||||
style: {
|
||||
fillColor: '#1E3A8A',
|
||||
weight: 2,
|
||||
opacity: 0.8,
|
||||
color: '#3B82F6',
|
||||
fillOpacity: 0.3
|
||||
},
|
||||
onEachFeature: (feature, layer) => {
|
||||
if (feature.properties && feature.properties.name) {
|
||||
layer.bindPopup(`<div class="map-popup">
|
||||
<strong>${feature.properties.name}</strong>
|
||||
</div>`)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
mapInstance.addLayer(geoJsonLayer)
|
||||
|
||||
// 调整视图以适应重庆边界
|
||||
mapInstance.fitBounds(geoJsonLayer.getBounds())
|
||||
|
||||
} catch (err) {
|
||||
console.error('初始化地图失败:', err)
|
||||
error.value = '地图初始化失败'
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载时加载地图
|
||||
onMounted(() => {
|
||||
// 检查Leaflet是否已加载
|
||||
if (typeof window.L === 'undefined') {
|
||||
// 动态加载Leaflet CSS和JS
|
||||
const link = document.createElement('link')
|
||||
link.rel = 'stylesheet'
|
||||
link.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css'
|
||||
link.integrity = 'sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY='
|
||||
link.crossOrigin = ''
|
||||
document.head.appendChild(link)
|
||||
|
||||
const script = document.createElement('script')
|
||||
script.src = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.js'
|
||||
script.integrity = 'sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo='
|
||||
script.crossOrigin = ''
|
||||
script.onload = loadMapData
|
||||
document.head.appendChild(script)
|
||||
} else {
|
||||
loadMapData()
|
||||
}
|
||||
})
|
||||
|
||||
// 组件卸载时清理资源
|
||||
onUnmounted(() => {
|
||||
if (mapInstance) {
|
||||
mapInstance.remove()
|
||||
mapInstance = null
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.chongqing-map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #0f1c2e;
|
||||
}
|
||||
|
||||
.loading-overlay,
|
||||
.error-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #3B82F6;
|
||||
border-top: 4px solid transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #ff6b6b;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
background: #3B82F6;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
|
||||
&:hover {
|
||||
background: #2563EB;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// Leaflet地图样式覆盖
|
||||
:deep(.leaflet-container) {
|
||||
background: #0f1c2e !important;
|
||||
|
||||
.leaflet-popup-content-wrapper {
|
||||
background: rgba(64, 169, 255, 0.9);
|
||||
border-radius: 4px;
|
||||
|
||||
.map-popup {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-popup-tip {
|
||||
background: rgba(64, 169, 255, 0.9);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,267 @@
|
||||
<template>
|
||||
<div class="tunnel-info-dialog" v-if="visible">
|
||||
<!-- 四个角的装饰 -->
|
||||
<div class="corner corner-top-left"></div>
|
||||
<div class="corner corner-top-right"></div>
|
||||
<div class="corner corner-bottom-left"></div>
|
||||
<div class="corner corner-bottom-right"></div>
|
||||
|
||||
<div class="dialog-header">
|
||||
<div class="header-title">
|
||||
<span class="title-text">{{ data.title }}</span>
|
||||
<img class="title-icon" src="../../../assets/RiskWarning_img/图标_media_dvr@2x.png" alt="" />
|
||||
</div>
|
||||
<!-- <div class="close-btn" @click="closeDialog">
|
||||
<span class="close-icon">×</span>
|
||||
</div> -->
|
||||
<div class="close-btn" style="pointer-events: auto;" @click="closeDialog">
|
||||
<el-icon color="#5DD7F6"><Close /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-content">
|
||||
<div class="info-item" v-for="(item, index) in data.items" :key="index">
|
||||
<label class="info-label">{{ item.label }}：</label>
|
||||
<span class="info-value">{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from "vue";
|
||||
import { Close } from "@element-plus/icons-vue";
|
||||
|
||||
defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
title: "隧道信息",
|
||||
items: [
|
||||
{ label: "隧道名称", value: "蔺市隧道右线" },
|
||||
{ label: "编号", value: "G212线" },
|
||||
{ label: "所属区县", value: "涪陵" },
|
||||
{ label: "隧道长度", value: "1782(米)" },
|
||||
{ label: "路线编号", value: "G50351" },
|
||||
{ label: "路线名称", value: "石柱-重庆" },
|
||||
{ label: "建成时间", value: "2023年" },
|
||||
{ label: "入口桩号", value: "159.079" },
|
||||
{ label: "隧道净宽", value: "22(米)" },
|
||||
{ label: "隧道净高", value: "5(米)" },
|
||||
{ label: "长度分类", value: "长隧道" },
|
||||
{ label: "评定等级", value: "2类" },
|
||||
],
|
||||
}),
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
// 边坡信息数据
|
||||
const slopeData = {
|
||||
title: "边坡信息",
|
||||
items: [
|
||||
{ label: "边坡坡长", value: "0.1(km)" },
|
||||
{ label: "边坡最大高度", value: "46(m)" },
|
||||
{ label: "边坡构成", value: "土石混合边坡 (坡高>=25m)" },
|
||||
{ label: "风险等级", value: "三级 (一般)" },
|
||||
{ label: "变形形式", value: "框架梁" },
|
||||
{ label: "监测设施设置", value: "无" },
|
||||
{ label: "起点桩号", value: "1447.7" },
|
||||
{ label: "止点桩号", value: "1447.8" },
|
||||
],
|
||||
};
|
||||
|
||||
// 隧道信息数据
|
||||
const tunnelData = {
|
||||
title: "隧道信息",
|
||||
items: [
|
||||
{ label: "隧道名称", value: "蔺市隧道右线" },
|
||||
{ label: "编号", value: "G212 线" },
|
||||
{ label: "所属区县", value: "涪陵" },
|
||||
{ label: "隧道长度", value: "1782(米)" },
|
||||
{ label: "路线编号", value: "G50351" },
|
||||
{ label: "路线名称", value: "石柱 - 重庆" },
|
||||
{ label: "建成时间", value: "2023 年" },
|
||||
{ label: "入口桩号", value: "159.079" },
|
||||
{ label: "隧道净宽", value: "22(米)" },
|
||||
{ label: "隧道净高", value: "5(米)" },
|
||||
{ label: "长度分类", value: "长隧道" },
|
||||
{ label: "评定等级", value: "2 类" },
|
||||
],
|
||||
};
|
||||
|
||||
// 桥梁信息数据
|
||||
const bridgeData = {
|
||||
title: "桥梁信息",
|
||||
items: [
|
||||
{ label: "桥梁名称", value: "蔺市隧道右线" },
|
||||
{ label: "编号", value: "K212 线" },
|
||||
{ label: "所属区县", value: "涪陵" },
|
||||
{ label: "桥梁长度", value: "46(米)" },
|
||||
{ label: "路线编号", value: "G50351" },
|
||||
{ label: "路线名称", value: "银川 - 重庆" },
|
||||
{ label: "建成时间", value: "2013" },
|
||||
{ label: "中心桩号", value: "1278.994" },
|
||||
{ label: "桥梁长度", value: "46 米" },
|
||||
{ label: "跨径总长", value: "40 米" },
|
||||
{ label: "跨径分类", value: "长隧道" },
|
||||
{ label: "技术状况", value: "一类" },
|
||||
],
|
||||
};
|
||||
|
||||
// 抢险队伍数据
|
||||
const rescueTeamData = {
|
||||
title: "抢险队伍",
|
||||
items: [
|
||||
{ label: "队伍名称", value: "重庆公路应急抢险指挥及物资储备中心" },
|
||||
{ label: "防范状态", value: "已出动" },
|
||||
{ label: "人数", value: "50" },
|
||||
{ label: "联系人", value: "18602981928" },
|
||||
{ label: "地址", value: "重庆市江津区双福工业园区赵坪路 157 号" },
|
||||
{ label: "物资装备", value: "应急物资:8100 件;应急装备:33 台" },
|
||||
],
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
slopeData,
|
||||
tunnelData,
|
||||
bridgeData,
|
||||
rescueTeamData,
|
||||
});
|
||||
|
||||
const emit = defineEmits(["close"]);
|
||||
|
||||
const closeDialog = () => {
|
||||
emit("close");
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 视频屏幕自适应 - 基于视口宽度动态调整
|
||||
@function vw($px) {
|
||||
@return calc($px / 1920 * 100vw);
|
||||
}
|
||||
.tunnel-info-dialog {
|
||||
width: vw(300);
|
||||
width: 250px;
|
||||
background: rgba(64, 169, 255, 0.2);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
position: fixed;
|
||||
top: 20%;
|
||||
left: 45%;
|
||||
// 四个角的装饰
|
||||
.corner {
|
||||
position: absolute;
|
||||
width: vw(20);
|
||||
height: vw(20);
|
||||
border: 2px solid #40a9ff;
|
||||
pointer-events: none;
|
||||
|
||||
&.corner-top-left {
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
border-top-left-radius: 6px;
|
||||
}
|
||||
|
||||
&.corner-top-right {
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
|
||||
&.corner-bottom-left {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
|
||||
&.corner-bottom-right {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: vw(16) vw(20);
|
||||
border-bottom: 1px solid rgba(64, 169, 255, 0.2);
|
||||
|
||||
.header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: vw(10);
|
||||
|
||||
.title-text {
|
||||
font-size: vw(16);
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.title-icon {
|
||||
width: vw(24);
|
||||
height: vw(24);
|
||||
}
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
.close-icon {
|
||||
font-size: vw(24);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.close-icon {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
padding: vw(16) vw(20);
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: vw(8) 0;
|
||||
border-bottom: 1px solid rgba(64, 169, 255, 0.1);
|
||||
|
||||
.info-label {
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
flex: 0 0 vw(100);
|
||||
}
|
||||
|
||||
.info-value {
|
||||
font-size: vw(14);
|
||||
color: #4fecff;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.info-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -78,6 +78,7 @@
|
||||
@openImpactDetail="openDialog('impactPoint')"
|
||||
@openWarningInfo="openDialog('warningInfo')"
|
||||
@openImpactPoint="openDialog('impactPoint')"
|
||||
@openAIResult="openDialog('aiWarningResult')"
|
||||
@openWarningSituation="openDialog('warningSituation')"
|
||||
@openResponseStatus="openDialog('responseStatus')"
|
||||
@openDispatchDistrict="openDialog('dispatchDistrict')"
|
||||
@ -95,7 +96,7 @@
|
||||
<div class="center">
|
||||
<!-- 地图底层 -->
|
||||
<div class="map-layer">
|
||||
<!-- <MapCenter /> -->
|
||||
<ChongqingMap />
|
||||
</div>
|
||||
|
||||
<!-- 地图遮罩层 -->
|
||||
@ -233,6 +234,12 @@
|
||||
@close="closeDialog('warningSituation')"
|
||||
@impactClick="openDialog('impactPoint')"
|
||||
/>
|
||||
|
||||
<!-- 隧道信息对话框 -->
|
||||
<tunnelInfoDialog
|
||||
v-model:visible="dialogVisible.tunnelInfo"
|
||||
@close="closeDialog('tunnelInfo')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -244,7 +251,7 @@ import left from "./left.vue";
|
||||
import right from "./right.vue";
|
||||
import bottom from "./bottom.vue";
|
||||
import top from "./top.vue";
|
||||
import MapCenter from "../cockpit/components/MapCenter.vue";
|
||||
import ChongqingMap from "./component/ChongqingMap.vue";
|
||||
|
||||
// 引入所有弹窗组件
|
||||
import responseSituationDiaLog from "./component/responseSituationDiaLog.vue";
|
||||
@ -266,6 +273,7 @@ import dispatchDetailDialog from "./component/dispatchDetailDialog.vue";
|
||||
import dispatchDistrictDialog from "./component/dispatchDistrictDialog.vue";
|
||||
import tongnanTeamDialog from "./component/tongnanTeamDialog.vue";
|
||||
import warningSituationDialog from "./component/warningSituationDialog.vue";
|
||||
import tunnelInfoDialog from "./component/tunnelInfoDialog.vue";
|
||||
|
||||
// 弹窗显示状态
|
||||
const dialogVisible = ref({
|
||||
@ -288,6 +296,7 @@ const dialogVisible = ref({
|
||||
dispatchDistrict: false,
|
||||
tongnanTeam: false,
|
||||
warningSituation: false,
|
||||
tunnelInfo: true,
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
@ -297,6 +306,8 @@ const openDialog = (dialogName) => {
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = (dialogName) => {
|
||||
// 关闭弹窗时，重置弹窗数据
|
||||
console.log('关闭弹窗', dialogName)
|
||||
dialogVisible.value[dialogName] = false;
|
||||
};
|
||||
|
||||
@ -367,7 +378,6 @@ onMounted(() => {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.title_img_box {
|
||||
@ -386,11 +396,15 @@ onMounted(() => {
|
||||
height: vw(40);
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.title_img2 {
|
||||
height: vw(40);
|
||||
min-height: 28px;
|
||||
width: auto;
|
||||
max-width: vw(300);
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
.left {
|
||||
|
||||
@ -1,7 +1,19 @@
|
||||
<template>
|
||||
<div class="left-panel">
|
||||
<!-- 智能研判头部 -->
|
||||
<SectionHeader title="智能研判" />
|
||||
<SectionHeader>
|
||||
<template #left>
|
||||
<div class="filter-header">
|
||||
<span>智能研判</span>
|
||||
<img
|
||||
class="filter-icon-ai"
|
||||
src="../../assets/RiskWarning_img/AI1@2x.png"
|
||||
alt=""
|
||||
@click="handleAIClick"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</SectionHeader>
|
||||
|
||||
<!-- 气象预警 -->
|
||||
<div class="weather-warning-section">
|
||||
@ -32,14 +44,21 @@
|
||||
<div class="impact-header">
|
||||
<div class="impact-title">影响点概况</div>
|
||||
<div class="impact-detail clickable" @click="handleImpactDetailClick">
|
||||
影响点明细
|
||||
一键清单(影响点)
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div class="chart-y-label">数量</div>
|
||||
<div class="bar-chart f1">
|
||||
<div v-for="(item, index) in impactData" :key="index" class="bar-item">
|
||||
<div class="bar" :style="{ height: getBarHeight(item.value) + '%' }"></div>
|
||||
<div
|
||||
v-for="(item, index) in impactData"
|
||||
:key="index"
|
||||
class="bar-item"
|
||||
>
|
||||
<div
|
||||
class="bar"
|
||||
:style="{ height: getBarHeight(item.value) + '%' }"
|
||||
></div>
|
||||
<div class="bar-value">{{ item.value }}</div>
|
||||
<div class="bar-label">{{ item.label }}</div>
|
||||
</div>
|
||||
@ -48,6 +67,21 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 影响公路类型情况 -->
|
||||
<div class="road-type-section">
|
||||
<div class="section-title">影响公路类型情况</div>
|
||||
<div class="road-type-cards">
|
||||
<div class="road-card">
|
||||
<span class="card-label">国省道：</span>
|
||||
<span class="card-value">100</span>
|
||||
</div>
|
||||
<div class="road-card">
|
||||
<span class="card-label">农村公路：</span>
|
||||
<span class="card-value">300</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 区县统计表格 -->
|
||||
<div class="district-table-section">
|
||||
<el-table
|
||||
@ -56,13 +90,15 @@
|
||||
:header-cell-style="headerCellStyle"
|
||||
:cell-style="cellStyle"
|
||||
size="small"
|
||||
:height="tableHeight"
|
||||
:scroll="{ y: true }"
|
||||
>
|
||||
<el-table-column prop="name" label="区县名称" min-width="80" />
|
||||
<el-table-column prop="road" label="路段" min-width="50" />
|
||||
<el-table-column prop="bridge" label="桥梁" min-width="50" />
|
||||
<el-table-column prop="tunnel" label="隧道" min-width="50" />
|
||||
<el-table-column prop="slope" label="边坡" min-width="50" />
|
||||
<el-table-column prop="project" label="项目" min-width="50" />
|
||||
<el-table-column prop="name" label="区县名称" :min-width="vw(80)" />
|
||||
<el-table-column prop="road" label="路段" :min-width="vw(50)" />
|
||||
<el-table-column prop="bridge" label="桥梁" :min-width="vw(50)" />
|
||||
<el-table-column prop="tunnel" label="隧道" :min-width="vw(50)" />
|
||||
<el-table-column prop="slope" label="边坡" :min-width="vw(50)" />
|
||||
<el-table-column prop="project" label="项目" :min-width="vw(50)" />
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
@ -125,7 +161,9 @@
|
||||
}"
|
||||
@click="handleDispatchCardClick(item)"
|
||||
>
|
||||
<div class="card-num">{{ item.value }}<span class="unit">人</span></div>
|
||||
<div class="card-num">
|
||||
{{ item.value }}<span class="unit">人</span>
|
||||
</div>
|
||||
<div class="card-label">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -134,7 +172,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { ref, computed } from "vue";
|
||||
|
||||
import SectionHeader from "./component/sectionHeader.vue";
|
||||
|
||||
@ -199,10 +237,10 @@ import imgCheck from "../../assets/RiskWarning_img/抽查人数icon@2x.png";
|
||||
|
||||
// 气象预警数据
|
||||
const weatherWarningData = [
|
||||
{ label: "红色预警", value: 8, class: "red" },
|
||||
{ label: "橙色预警", value: 12, class: "orange" },
|
||||
{ label: "黄色预警", value: 27, class: "yellow" },
|
||||
{ label: "蓝色预警", value: 15, class: "blue" },
|
||||
{ label: "红色预警", value: '8/13', class: "red" },
|
||||
{ label: "橙色预警", value: '12/14', class: "orange" },
|
||||
{ label: "黄色预警", value: '27/15', class: "yellow" },
|
||||
{ label: "蓝色预警", value: '15/15', class: "blue" },
|
||||
];
|
||||
|
||||
// 影响点数据
|
||||
@ -226,6 +264,19 @@ const getBarHeight = (value) => {
|
||||
const height = (value / maxValue) * 100;
|
||||
return Math.min(100, Math.max(20, Math.round(height)));
|
||||
};
|
||||
const handleAIClick = () => {
|
||||
emit("openAIResult");
|
||||
};
|
||||
|
||||
// 响应式单位转换函数（基于1920px设计稿）
|
||||
const vw = (px) => {
|
||||
return Math.round((px / 1920) * window.innerWidth);
|
||||
};
|
||||
|
||||
// 表格高度计算
|
||||
const tableHeight = computed(() => {
|
||||
return vw(100);
|
||||
});
|
||||
|
||||
// 区县数据
|
||||
const districtData = [
|
||||
@ -252,7 +303,7 @@ const responseStats = [
|
||||
img: imgReply,
|
||||
},
|
||||
{
|
||||
label: "叫应率",
|
||||
label: "回应率",
|
||||
value: "100%",
|
||||
iconClass: "icon-rate",
|
||||
img: imgRate,
|
||||
@ -305,6 +356,20 @@ const cellStyle = () => ({
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.filter-header {
|
||||
margin-left: 35px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: vw(8);
|
||||
color: #fff;
|
||||
font-size: vw(24);
|
||||
font-weight: bold;
|
||||
}
|
||||
.filter-icon-ai {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
// 视频屏幕自适应 - 基于视口宽度动态调整
|
||||
// 基准宽度 1920px，使用 vw 单位实现自适应
|
||||
@function vw($px) {
|
||||
@ -428,7 +493,7 @@ const cellStyle = () => ({
|
||||
.card-info {
|
||||
flex: 1;
|
||||
.card-num {
|
||||
font-size: vw(24);
|
||||
font-size: vw(20);
|
||||
font-weight: bold;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
@ -489,7 +554,7 @@ const cellStyle = () => ({
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: vw(120);
|
||||
min-height: 80px;
|
||||
height: 70px;
|
||||
display: flex;
|
||||
// padding: 10px 0 30px 40px;
|
||||
|
||||
@ -517,8 +582,13 @@ const cellStyle = () => ({
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: linear-gradient(to right, transparent 0%, transparent 100%),
|
||||
linear-gradient(to bottom, rgba(64, 169, 255, 0.1) 1px, transparent 1px);
|
||||
background-image:
|
||||
linear-gradient(to right, transparent 0%, transparent 100%),
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
rgba(64, 169, 255, 0.1) 1px,
|
||||
transparent 1px
|
||||
);
|
||||
background-size: 100% 25%;
|
||||
pointer-events: none;
|
||||
}
|
||||
@ -567,7 +637,11 @@ const cellStyle = () => ({
|
||||
.bar {
|
||||
width: vw(30);
|
||||
min-width: 16px;
|
||||
background: linear-gradient(180deg, #40a9ff 0%, rgba(64, 169, 255, 0.3) 100%);
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#40a9ff 0%,
|
||||
rgba(64, 169, 255, 0.3) 100%
|
||||
);
|
||||
border-radius: 2px 2px 0 0;
|
||||
min-height: 20px;
|
||||
transition: all 0.3s ease;
|
||||
@ -593,8 +667,51 @@ const cellStyle = () => ({
|
||||
}
|
||||
}
|
||||
|
||||
// 影响公路类型情况
|
||||
.road-type-section {
|
||||
margin-bottom: vw(20);
|
||||
|
||||
.section-title {
|
||||
font-size: vw(16);
|
||||
font-weight: 600;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-bottom: vw(12);
|
||||
}
|
||||
|
||||
.road-type-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: vw(10);
|
||||
|
||||
.road-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: vw(12) vw(16);
|
||||
background: rgba(64, 169, 255, 0.1);
|
||||
border: 1px solid rgba(64, 169, 255, 0.2);
|
||||
border-radius: 6px;
|
||||
box-shadow: inset 0px 0px 8px 0px rgba(55, 155, 255, 0.2);
|
||||
|
||||
.card-label {
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: vw(24);
|
||||
font-weight: bold;
|
||||
color: #40a9ff;
|
||||
text-shadow: 0 0 10px rgba(64, 169, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 区县统计表格
|
||||
.district-table-section {
|
||||
height: vw(100);
|
||||
overflow: hidden;
|
||||
|
||||
:deep(.el-table) {
|
||||
background: transparent;
|
||||
|
||||
@ -611,10 +728,21 @@ const cellStyle = () => ({
|
||||
|
||||
.el-table__header-wrapper {
|
||||
background: transparent;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
background: transparent;
|
||||
overflow-y: auto;
|
||||
max-height: calc(#{vw(100)} - #{vw(40)}); /* 减去表头高度 */
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
@ -645,7 +773,8 @@ const cellStyle = () => ({
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: vw(15);
|
||||
background-image: url("../../assets/RiskWarning_img/标题bg@2x.png") no-repeat;
|
||||
background-image: url("../../assets/RiskWarning_img/标题bg@2x.png")
|
||||
no-repeat;
|
||||
background-size: cover;
|
||||
background-position: left;
|
||||
|
||||
|
||||
@ -2,10 +2,17 @@
|
||||
<div class="right-panel">
|
||||
<SectionHeader title="防范应对" />
|
||||
<!-- 防范应对 -->
|
||||
<div class="control-section">
|
||||
<div class="control-title">应急力量</div>
|
||||
</div>
|
||||
<div class="prevention-section">
|
||||
<!-- 第一行：队伍、人员、装备、物资 -->
|
||||
<div class="resource-grid">
|
||||
<div v-for="(item, index) in resourceData" :key="index" class="resource-item">
|
||||
<div
|
||||
v-for="(item, index) in resourceData"
|
||||
:key="index"
|
||||
class="resource-item"
|
||||
>
|
||||
<!-- <div class="resource-icon" :class="item.iconClass"></div> -->
|
||||
<img class="resource-icon" :src="item.img" alt="" />
|
||||
<div class="resource-info">
|
||||
@ -19,17 +26,39 @@
|
||||
|
||||
<!-- 管控路段数 -->
|
||||
<div class="control-section">
|
||||
<div class="control-title">管控路段数 <span class="control-num">2</span></div>
|
||||
<div class="control-grid">
|
||||
<div
|
||||
v-for="(item, index) in controlData"
|
||||
:key="index"
|
||||
class="control-item"
|
||||
:class="{ clickable: item.label === '全幅封闭数' || item.label === '关闭驻地数' }"
|
||||
@click="handleControlClick(item)"
|
||||
>
|
||||
<div class="control-value">{{ item.value }}</div>
|
||||
<div class="control-label">{{ item.label }}</div>
|
||||
<div class="control-title">
|
||||
管控路段数 <span class="control-num">2</span>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div class="control-grid">
|
||||
<div
|
||||
v-for="(item, index) in controlData1"
|
||||
:key="index"
|
||||
class="control-item"
|
||||
:class="{
|
||||
clickable: item.label === '封闭管控数',
|
||||
}"
|
||||
@click="handleControlClick(item)"
|
||||
>
|
||||
<div class="control-value">{{ item.value }}</div>
|
||||
<div class="control-label">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 10px"></div>
|
||||
|
||||
<div class="control-grid">
|
||||
<div
|
||||
v-for="(item, index) in controlData2"
|
||||
:key="index"
|
||||
class="control-item"
|
||||
:class="{
|
||||
clickable: item.label === '关闭驻地数',
|
||||
}"
|
||||
@click="handleControlClick(item)"
|
||||
>
|
||||
<div class="control-value">{{ item.value }}</div>
|
||||
<div class="control-label">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -41,7 +70,11 @@
|
||||
<span class="patrol-mileage">234882km</span>
|
||||
</div>
|
||||
<div class="patrol-grid">
|
||||
<div v-for="(item, index) in patrolData" :key="index" class="patrol-item">
|
||||
<div
|
||||
v-for="(item, index) in patrolData"
|
||||
:key="index"
|
||||
class="patrol-item"
|
||||
>
|
||||
<div class="patrol-value">{{ item.value }}</div>
|
||||
<div class="patrol-label">{{ item.label }}</div>
|
||||
</div>
|
||||
@ -52,7 +85,11 @@
|
||||
<div class="rescue-section">
|
||||
<div class="rescue-title">抢险投入情况</div>
|
||||
<div class="rescue-grid">
|
||||
<div v-for="(item, index) in rescueData" :key="index" class="rescue-item">
|
||||
<div
|
||||
v-for="(item, index) in rescueData"
|
||||
:key="index"
|
||||
class="rescue-item"
|
||||
>
|
||||
<!-- <div class="rescue-icon" :class="item.iconClass"></div> -->
|
||||
<img class="rescue-icon" :src="item.img" alt="" />
|
||||
<div class="rescue-info">
|
||||
@ -157,7 +194,7 @@ const emit = defineEmits(["openClearanceSituation", "openControlSituation"]);
|
||||
|
||||
// 点击管控项
|
||||
const handleControlClick = (item) => {
|
||||
if (item.label === "全幅封闭数") {
|
||||
if (item.label === "封闭管控数") {
|
||||
emit("openClearanceSituation");
|
||||
} else if (item.label === "关闭驻地数") {
|
||||
emit("openControlSituation");
|
||||
@ -198,19 +235,39 @@ const resourceData = [
|
||||
iconClass: "icon-team",
|
||||
img: icon1,
|
||||
},
|
||||
{ label: "人员", value: "1612", unit: "人", iconClass: "icon-person", img: icon2 },
|
||||
{ label: "储备装备", value: "1157", unit: "台", iconClass: "icon-equip", img: icon3 },
|
||||
{ label: "物资", value: "41.5", unit: "万件", iconClass: "icon-material", img: icon4 },
|
||||
{
|
||||
label: "人员",
|
||||
value: "1612",
|
||||
unit: "人",
|
||||
iconClass: "icon-person",
|
||||
img: icon2,
|
||||
},
|
||||
{
|
||||
label: "储备装备",
|
||||
value: "1157",
|
||||
unit: "台",
|
||||
iconClass: "icon-equip",
|
||||
img: icon3,
|
||||
},
|
||||
{
|
||||
label: "物资",
|
||||
value: "41.5",
|
||||
unit: "万件",
|
||||
iconClass: "icon-material",
|
||||
img: icon4,
|
||||
},
|
||||
];
|
||||
|
||||
// 管控路段数据
|
||||
const controlData = [
|
||||
{ label: "全幅封闭数", value: "40" },
|
||||
const controlData1 = [
|
||||
{ label: "封闭管控数", value: "40" },
|
||||
{ label: "半幅通行数", value: "40" },
|
||||
{ label: "限速(限车型)数", value: "30" },
|
||||
{ label: "告警阻拦处数", value: "42" },
|
||||
{ label: "停工项目数", value: "24" },
|
||||
{ label: "关闭驻地数", value: "32" },
|
||||
{ label: "限速(限车型)数", value: "24" },
|
||||
{ label: "告警阻拦处数", value: "32" },
|
||||
];
|
||||
const controlData2 = [
|
||||
{ label: "停工项目数", value: "30" },
|
||||
{ label: "关闭驻地数", value: "42" },
|
||||
{ label: "转移撤离人员数", value: "58" },
|
||||
];
|
||||
|
||||
@ -363,8 +420,12 @@ const majorEvent = "0";
|
||||
padding: vw(8) vw(12);
|
||||
background: linear-gradient(270deg, rgba(18, 84, 97, 0) 0%, #204a55 100%);
|
||||
border: 2px solid transparent;
|
||||
border-image: linear-gradient(270deg, rgba(80, 201, 191, 0), rgba(39, 135, 153, 1)) 2
|
||||
2;
|
||||
border-image: linear-gradient(
|
||||
270deg,
|
||||
rgba(80, 201, 191, 0),
|
||||
rgba(39, 135, 153, 1)
|
||||
)
|
||||
2 2;
|
||||
border-radius: 6px;
|
||||
border-right: 0px;
|
||||
|
||||
@ -439,9 +500,10 @@ const majorEvent = "0";
|
||||
}
|
||||
|
||||
.control-grid {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
background: rgba(64, 169, 255, 0.1);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
background: rgba(64, 169, 255, 0.1);
|
||||
box-shadow: inset 0px 0px 8px 0px #379bff;
|
||||
gap: vw(8);
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<img class="filter-icon-ai" src="../../assets/RiskWarning_img/AI1@2x.png" alt="" @click="handleAIClick" />
|
||||
<!-- <img class="filter-icon-ai" src="../../assets/RiskWarning_img/AI1@2x.png" alt="" @click="handleAIClick" /> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user