重庆大屏页面
This commit is contained in:
parent
d769327701
commit
681ad62181
BIN
packages/screen/src/assets/RiskWarning_img/二级标题栏bg1@2x.png
Normal file
BIN
packages/screen/src/assets/RiskWarning_img/二级标题栏bg1@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
BIN
packages/screen/src/assets/RiskWarning_img/蓝色@2x (1).png
Normal file
BIN
packages/screen/src/assets/RiskWarning_img/蓝色@2x (1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
packages/screen/src/assets/RiskWarning_img/蓝色@2x1.png
Normal file
BIN
packages/screen/src/assets/RiskWarning_img/蓝色@2x1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
BIN
packages/screen/src/assets/RiskWarning_img/队伍icon1@2x.png
Normal file
BIN
packages/screen/src/assets/RiskWarning_img/队伍icon1@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
packages/screen/src/assets/RiskWarning_img/队伍icon@2x.png
Normal file
BIN
packages/screen/src/assets/RiskWarning_img/队伍icon@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
packages/screen/src/assets/RiskWarning_img/队伍icon定位@2x.png
Normal file
BIN
packages/screen/src/assets/RiskWarning_img/队伍icon定位@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
packages/screen/src/assets/RiskWarning_img/隧洞icon定位@2x.png
Normal file
BIN
packages/screen/src/assets/RiskWarning_img/隧洞icon定位@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
BIN
packages/screen/src/assets/RiskWarning_img/项目@2x.png
Normal file
BIN
packages/screen/src/assets/RiskWarning_img/项目@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
@ -87,7 +87,9 @@
|
||||
.f3 {
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.mt_5{
|
||||
margin-top: 5px;
|
||||
}
|
||||
.mt_10 {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 气象预警监测表格 -->
|
||||
<div class="weather-warning-wrapper" style="padding-left: 6px">
|
||||
<div class="weather-warning-wrapper">
|
||||
<div class="weather-warning-panel">
|
||||
<img
|
||||
class="clear-icon"
|
||||
@ -53,31 +53,40 @@
|
||||
:cell-style="cellStyle"
|
||||
:row-class-name="rowClassName"
|
||||
>
|
||||
<el-table-column prop="time" label="预警时间" min-width="140" />
|
||||
<el-table-column prop="type" label="类型" min-width="80" align="center" />
|
||||
<el-table-column label="预警等级" min-width="100" align="center">
|
||||
<el-table-column prop="time" label="预警时间" min-width="vw(140)" />
|
||||
<el-table-column
|
||||
prop="type"
|
||||
label="类型"
|
||||
min-width="vw(80)"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
label="预警等级"
|
||||
min-width="vw(100)"
|
||||
align="center"
|
||||
>
|
||||
<template #default="{ row }">
|
||||
<!-- <span class="warning-level" :class="row.levelClass">
|
||||
<i class="level-icon"></i>
|
||||
{{ row.level }}
|
||||
</span> -->
|
||||
<div class="warning-level">
|
||||
<img
|
||||
:src="
|
||||
row.levelClass === 'red'
|
||||
? redIcon
|
||||
: row.levelClass === 'blue'
|
||||
? blueIcon
|
||||
: row.levelClass === 'orange'
|
||||
? orangeIcon
|
||||
: yellowIcon
|
||||
? blueIcon
|
||||
: row.levelClass === 'orange'
|
||||
? orangeIcon
|
||||
: yellowIcon
|
||||
"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="district" label="预警区县" min-width="80" />
|
||||
<el-table-column
|
||||
prop="district"
|
||||
label="预警区县"
|
||||
min-width="vw(80)"
|
||||
/>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
@ -98,12 +107,14 @@ import tunnelIconIcon from "../../assets/RiskWarning_img/隧道icon@2x.png";
|
||||
import slopeIconIcon from "../../assets/RiskWarning_img/边坡icon@2x.png";
|
||||
import bridgeIconIcon from "../../assets/RiskWarning_img/桥梁icon@2x.png";
|
||||
import roadIconIcon from "../../assets/RiskWarning_img/线路路段icon@2x.png";
|
||||
import teamIconIcon from "../../assets/RiskWarning_img/队伍icon@2x.png";
|
||||
|
||||
import warningIconIcon1 from "../../assets/RiskWarning_img/风险预警icon1@2x.png";
|
||||
import tunnelIconIcon1 from "../../assets/RiskWarning_img/隧道icon1@2x.png";
|
||||
import slopeIconIcon1 from "../../assets/RiskWarning_img/边坡icon1@2x.png";
|
||||
import bridgeIconIcon1 from "../../assets/RiskWarning_img/桥梁icon1@2x.png";
|
||||
import roadIconIcon1 from "../../assets/RiskWarning_img/线路路段icon1@2x.png";
|
||||
import teamIconIcon1 from "../../assets/RiskWarning_img/队伍icon1@2x.png";
|
||||
|
||||
const activeIndex = ref(0);
|
||||
|
||||
@ -143,6 +154,13 @@ const menuItems = [
|
||||
icon: roadIconIcon,
|
||||
icon1: roadIconIcon1,
|
||||
},
|
||||
{
|
||||
label: "队伍",
|
||||
icon: "icon-team",
|
||||
iconClass: "team",
|
||||
icon: teamIconIcon,
|
||||
icon1: teamIconIcon1,
|
||||
},
|
||||
];
|
||||
|
||||
// 筛选状态
|
||||
@ -205,15 +223,15 @@ const filteredData = computed(() => {
|
||||
|
||||
// el-table 样式
|
||||
const headerCellStyle = () => ({
|
||||
background: "transparent",
|
||||
background: "#17466F",
|
||||
color: "rgba(255, 255, 255, 0.6)",
|
||||
fontWeight: "normal",
|
||||
borderBottom: "1px solid rgba(64, 169, 255, 0.2)",
|
||||
padding: "10px 8px",
|
||||
padding: "5px 20px",
|
||||
});
|
||||
|
||||
const cellStyle = () => ({
|
||||
background: "transparent",
|
||||
background: "#142E49",
|
||||
color: "rgba(255, 255, 255, 0.9)",
|
||||
borderBottom: "1px solid rgba(64, 169, 255, 0.1)",
|
||||
padding: "5px 5px",
|
||||
@ -232,7 +250,12 @@ const scrollStep = 1; // 每次滚动像素
|
||||
|
||||
// 检查是否有筛选条件
|
||||
const hasFilter = computed(() => {
|
||||
return filters.value.red || filters.value.blue || filters.value.orange || filters.value.yellow;
|
||||
return (
|
||||
filters.value.red ||
|
||||
filters.value.blue ||
|
||||
filters.value.orange ||
|
||||
filters.value.yellow
|
||||
);
|
||||
});
|
||||
|
||||
// 开始自动滚动
|
||||
@ -242,7 +265,9 @@ const startAutoScroll = () => {
|
||||
}
|
||||
if (!isScrolling.value || hasFilter.value) return;
|
||||
|
||||
const tableBody = document.querySelector('.weather-warning-panel .el-table__body-wrapper .el-scrollbar__wrap');
|
||||
const tableBody = document.querySelector(
|
||||
".weather-warning-panel .el-table__body-wrapper .el-scrollbar__wrap",
|
||||
);
|
||||
if (!tableBody) return;
|
||||
|
||||
scrollTimer.value = setInterval(() => {
|
||||
@ -267,7 +292,9 @@ const stopAutoScroll = () => {
|
||||
|
||||
// 重置滚动到顶部
|
||||
const resetScrollToTop = () => {
|
||||
const tableBody = document.querySelector('.weather-warning-panel .el-table__body-wrapper .el-scrollbar__wrap');
|
||||
const tableBody = document.querySelector(
|
||||
".weather-warning-panel .el-table__body-wrapper .el-scrollbar__wrap",
|
||||
);
|
||||
if (tableBody) {
|
||||
tableBody.scrollTop = 0;
|
||||
}
|
||||
@ -305,20 +332,24 @@ onMounted(() => {
|
||||
nextTick(() => {
|
||||
startAutoScroll();
|
||||
// 添加鼠标事件监听
|
||||
const tableContainer = document.querySelector('.weather-warning-panel .table-container');
|
||||
const tableContainer = document.querySelector(
|
||||
".weather-warning-panel .table-container",
|
||||
);
|
||||
if (tableContainer) {
|
||||
tableContainer.addEventListener('mouseenter', handleMouseEnter);
|
||||
tableContainer.addEventListener('mouseleave', handleMouseLeave);
|
||||
tableContainer.addEventListener("mouseenter", handleMouseEnter);
|
||||
tableContainer.addEventListener("mouseleave", handleMouseLeave);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
stopAutoScroll();
|
||||
const tableContainer = document.querySelector('.weather-warning-panel .table-container');
|
||||
const tableContainer = document.querySelector(
|
||||
".weather-warning-panel .table-container",
|
||||
);
|
||||
if (tableContainer) {
|
||||
tableContainer.removeEventListener('mouseenter', handleMouseEnter);
|
||||
tableContainer.removeEventListener('mouseleave', handleMouseLeave);
|
||||
tableContainer.removeEventListener("mouseenter", handleMouseEnter);
|
||||
tableContainer.removeEventListener("mouseleave", handleMouseLeave);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
@ -334,27 +365,30 @@ onUnmounted(() => {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: vw(10);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
|
||||
// 小屏幕适配
|
||||
@media (max-width: 1366px) {
|
||||
padding: 8px;
|
||||
padding: vw(8);
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
padding: 6px;
|
||||
padding: vw(6);
|
||||
}
|
||||
}
|
||||
.nav-menu {
|
||||
width: vw(50);
|
||||
min-width: 40px;
|
||||
min-width: vw(40);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
align-items: center;
|
||||
gap: vw(5);
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
||||
.nav-item {
|
||||
display: flex;
|
||||
@ -378,12 +412,12 @@ onUnmounted(() => {
|
||||
.nav-icon-box {
|
||||
width: vw(50);
|
||||
height: vw(50);
|
||||
min-width: 36px;
|
||||
min-height: 36px;
|
||||
min-width: vw(36);
|
||||
min-height: vw(36);
|
||||
margin-bottom: vw(5);
|
||||
background: rgba(64, 169, 255, 0.1);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
border-radius: vw(8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -391,8 +425,8 @@ onUnmounted(() => {
|
||||
img {
|
||||
width: vw(50);
|
||||
height: vw(50);
|
||||
min-width: 32px;
|
||||
min-height: 32px;
|
||||
min-width: vw(32);
|
||||
min-height: vw(32);
|
||||
}
|
||||
|
||||
i {
|
||||
@ -440,57 +474,48 @@ onUnmounted(() => {
|
||||
|
||||
// 气象预警监测包装器
|
||||
.weather-warning-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
width: 90%;
|
||||
width: 92%;
|
||||
height: 50%;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
// 气象预警监测面板样式
|
||||
.weather-warning-panel {
|
||||
height: 50%;
|
||||
background: rgba(64, 169, 255, 0.1);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
padding: vw(15);
|
||||
// border-radius: vw(8);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.clear-icon {
|
||||
position: absolute;
|
||||
top: vw(-50);
|
||||
right: 0px;
|
||||
width: vw(40) !important;
|
||||
height: vw(40) !important;
|
||||
min-width: 28px;
|
||||
min-height: 28px;
|
||||
min-width: vw(28);
|
||||
min-height: vw(28);
|
||||
}
|
||||
|
||||
.panel-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: vw(15);
|
||||
background-image: url("../../assets/RiskWarning_img/二级标题栏bg1@2x.png");
|
||||
background-size: 100% 100%;
|
||||
background-position: left top;
|
||||
padding: vw(15);
|
||||
|
||||
.header-title {
|
||||
font-size: vw(18);
|
||||
font-weight: bold;
|
||||
color: #40a9ff;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
position: relative;
|
||||
padding-left: vw(12);
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: vw(4);
|
||||
height: vw(16);
|
||||
background: linear-gradient(180deg, #40a9ff 0%, #1890ff 100%);
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.filter-tags {
|
||||
@ -506,8 +531,8 @@ onUnmounted(() => {
|
||||
input {
|
||||
width: vw(14);
|
||||
height: vw(14);
|
||||
min-width: 12px;
|
||||
min-height: 12px;
|
||||
min-width: vw(12);
|
||||
min-height: vw(12);
|
||||
accent-color: #40a9ff;
|
||||
}
|
||||
|
||||
@ -536,6 +561,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: rgb(20, 46, 74, 0.95);
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
|
||||
@ -566,10 +592,28 @@ onUnmounted(() => {
|
||||
|
||||
.el-table__header-wrapper {
|
||||
background: transparent;
|
||||
|
||||
th.el-table__cell {
|
||||
background: transparent;
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
padding: vw(10) vw(8);
|
||||
}
|
||||
}
|
||||
|
||||
.el-table__body-wrapper {
|
||||
background: transparent;
|
||||
|
||||
td.el-table__cell {
|
||||
background: transparent;
|
||||
font-size: vw(12);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
padding: vw(5) vw(5);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
tr {
|
||||
@ -579,33 +623,17 @@ onUnmounted(() => {
|
||||
background: rgba(64, 169, 255, 0.05) !important;
|
||||
}
|
||||
}
|
||||
|
||||
th.el-table__cell {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
td.el-table__cell {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.warning-level {
|
||||
// display: inline-flex;
|
||||
// align-items: center;
|
||||
// gap: 5px;
|
||||
// padding: 4px 10px;
|
||||
// border-radius: 4px;
|
||||
// font-size: 12px;
|
||||
// width: 15px;
|
||||
// height: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
img {
|
||||
width: vw(15);
|
||||
height: vw(15);
|
||||
min-width: 10px;
|
||||
min-height: 10px;
|
||||
min-width: vw(10);
|
||||
min-height: vw(10);
|
||||
}
|
||||
|
||||
// .level-icon {
|
||||
|
||||
@ -13,128 +13,382 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import axios from 'axios';
|
||||
|
||||
const mapContainer = ref(null)
|
||||
const loading = ref(false)
|
||||
const error = ref(null)
|
||||
let mapInstance = null
|
||||
const mapContainer = ref(null);
|
||||
const loading = ref(false);
|
||||
const error = ref(null);
|
||||
let mapInstance = null;
|
||||
let geoJsonLayer = null;
|
||||
|
||||
// 重庆地图GeoJSON API地址
|
||||
const GEOJSON_URL = 'https://geo.datav.aliyun.com/areas_v3/bound/500000_full.json'
|
||||
// 定义 emits
|
||||
const emit = defineEmits(["districtClick"]);
|
||||
|
||||
// 当前选中的区县
|
||||
const selectedDistrict = ref(null);
|
||||
let selectedLayer = 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
|
||||
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)
|
||||
// 部署需要放开注释
|
||||
// const response = await axios.get('/aliyun-geo/bound/500000_full.json');
|
||||
// const geoJsonData = response.data;
|
||||
// if (!geoJsonData) {
|
||||
// throw new Error('地图数据为空');
|
||||
// }
|
||||
|
||||
|
||||
// // 处理行政区划变更：渝北区和江北区合并为两江新区
|
||||
processDistrictMerge(geoJsonData);
|
||||
initMap(geoJsonData)
|
||||
} catch (err) {
|
||||
console.error('加载地图数据失败:', err)
|
||||
error.value = '地图数据加载失败，请检查网络连接'
|
||||
console.error("加载地图数据失败:", err);
|
||||
error.value = "地图数据加载失败，请检查网络连接";
|
||||
} finally {
|
||||
loading.value = false
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 处理行政区划合并
|
||||
const processDistrictMerge = (geoJsonData) => {
|
||||
if (!geoJsonData || !geoJsonData.features) return;
|
||||
|
||||
// 查找渝北区和江北区的特征
|
||||
const yubeiIndex = geoJsonData.features.findIndex(
|
||||
(f) => f.properties && f.properties.name === "渝北区",
|
||||
);
|
||||
const jiangbeiIndex = geoJsonData.features.findIndex(
|
||||
(f) => f.properties && f.properties.name === "江北区",
|
||||
);
|
||||
|
||||
// 如果两个区都存在，合并为两江新区
|
||||
if (yubeiIndex !== -1 && jiangbeiIndex !== -1) {
|
||||
const yubeiFeature = geoJsonData.features[yubeiIndex];
|
||||
const jiangbeiFeature = geoJsonData.features[jiangbeiIndex];
|
||||
|
||||
// 创建两江新区的特征
|
||||
const liangjiangFeature = JSON.parse(JSON.stringify(yubeiFeature));
|
||||
liangjiangFeature.properties.name = "两江新区";
|
||||
liangjiangFeature.properties.adcode = "500006"; // 使用新的行政区划代码
|
||||
|
||||
// 如果是 MultiPolygon，合并两个区的坐标
|
||||
if (
|
||||
yubeiFeature.geometry.type === "MultiPolygon" &&
|
||||
jiangbeiFeature.geometry.type === "MultiPolygon"
|
||||
) {
|
||||
liangjiangFeature.geometry.coordinates = [
|
||||
...yubeiFeature.geometry.coordinates,
|
||||
...jiangbeiFeature.geometry.coordinates,
|
||||
];
|
||||
} else if (
|
||||
yubeiFeature.geometry.type === "Polygon" &&
|
||||
jiangbeiFeature.geometry.type === "Polygon"
|
||||
) {
|
||||
liangjiangFeature.geometry.type = "MultiPolygon";
|
||||
liangjiangFeature.geometry.coordinates = [
|
||||
[yubeiFeature.geometry.coordinates],
|
||||
[jiangbeiFeature.geometry.coordinates],
|
||||
];
|
||||
}
|
||||
|
||||
// 移除原来的两个区
|
||||
geoJsonData.features.splice(Math.max(yubeiIndex, jiangbeiIndex), 1);
|
||||
geoJsonData.features.splice(Math.min(yubeiIndex, jiangbeiIndex), 1);
|
||||
|
||||
// 添加合并后的两江新区
|
||||
geoJsonData.features.push(liangjiangFeature);
|
||||
|
||||
console.log("已合并渝北区和江北区为两江新区");
|
||||
}
|
||||
};
|
||||
|
||||
// 计算区县中心点
|
||||
const getCentroid = (coordinates) => {
|
||||
let sumLat = 0;
|
||||
let sumLng = 0;
|
||||
let count = 0;
|
||||
|
||||
const processCoordinates = (coords) => {
|
||||
if (typeof coords[0] === "number") {
|
||||
// 单个坐标点 [lng, lat]
|
||||
sumLng += coords[0];
|
||||
sumLat += coords[1];
|
||||
count++;
|
||||
} else if (Array.isArray(coords[0])) {
|
||||
// 坐标数组
|
||||
coords.forEach(processCoordinates);
|
||||
}
|
||||
};
|
||||
|
||||
processCoordinates(coordinates);
|
||||
|
||||
return count > 0 ? [sumLat / count, sumLng / count] : null;
|
||||
};
|
||||
|
||||
// 初始化地图
|
||||
const initMap = (geoJsonData) => {
|
||||
if (!mapContainer.value) return
|
||||
if (!mapContainer.value) return;
|
||||
|
||||
try {
|
||||
// 清除旧地图实例
|
||||
if (mapInstance) {
|
||||
mapInstance.remove()
|
||||
mapInstance.remove();
|
||||
}
|
||||
|
||||
// 创建地图实例
|
||||
mapInstance = new window.L.Map(mapContainer.value, {
|
||||
center: [29.563, 106.551], // 重庆中心坐标
|
||||
zoom: 8,
|
||||
minZoom: 7,
|
||||
zoom: 7,
|
||||
minZoom: 6,
|
||||
maxZoom: 18,
|
||||
zoomControl: false,
|
||||
attributionControl: 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
|
||||
// 添加瓦片图层 - 使用深色样式
|
||||
const tileLayer = new window.L.TileLayer(
|
||||
"https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png",
|
||||
{
|
||||
attribution:
|
||||
'© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <a href="https://carto.com/attributions">CARTO</a>',
|
||||
subdomains: "abcd",
|
||||
maxZoom: 19,
|
||||
},
|
||||
);
|
||||
mapInstance.addLayer(tileLayer);
|
||||
|
||||
// 添加 GeoJSON 图层
|
||||
geoJsonLayer = new window.L.GeoJSON(geoJsonData, {
|
||||
style: (feature) => ({
|
||||
fillColor: "#1890ff",
|
||||
weight: 1.5,
|
||||
opacity: 0.6,
|
||||
color: "#40a9ff",
|
||||
fillOpacity: 0.15,
|
||||
}),
|
||||
onEachFeature: (feature, layer) => {
|
||||
if (feature.properties && feature.properties.name) {
|
||||
// 区县点击事件
|
||||
layer.on("click", (e) => {
|
||||
// 清除之前选中的样式
|
||||
if (selectedLayer) {
|
||||
selectedLayer.setStyle({
|
||||
fillColor: "#1890ff",
|
||||
fillOpacity: 0.15,
|
||||
weight: 1.5,
|
||||
color: "#40a9ff",
|
||||
});
|
||||
}
|
||||
|
||||
// 设置当前选中样式
|
||||
layer.setStyle({
|
||||
fillColor: "#ff4d4f",
|
||||
fillOpacity: 0.6,
|
||||
weight: 2.5,
|
||||
color: "#ff7875",
|
||||
});
|
||||
|
||||
selectedLayer = layer;
|
||||
selectedDistrict.value = feature.properties.name;
|
||||
|
||||
// 触发事件
|
||||
emit("districtClick", {
|
||||
name: feature.properties.name,
|
||||
feature: feature,
|
||||
latlng: e.latlng,
|
||||
});
|
||||
|
||||
// 平滑移动到点击位置
|
||||
mapInstance.panTo(e.latlng, { animate: true, duration: 0.5 });
|
||||
});
|
||||
|
||||
// 鼠标悬停效果
|
||||
layer.on("mouseover", () => {
|
||||
layer.setStyle({
|
||||
fillColor: "#1890ff",
|
||||
fillOpacity: 0.4,
|
||||
weight: 2,
|
||||
color: "#69c0ff",
|
||||
});
|
||||
});
|
||||
|
||||
layer.on("mouseout", () => {
|
||||
layer.setStyle({
|
||||
fillColor: "#1890ff",
|
||||
fillOpacity: 0.15,
|
||||
weight: 1.5,
|
||||
color: "#40a9ff",
|
||||
});
|
||||
});
|
||||
|
||||
// 添加 popup
|
||||
layer.bindPopup(`<div class="map-popup">
|
||||
<strong>${feature.properties.name}</strong>
|
||||
</div>`)
|
||||
</div>`);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
mapInstance.addLayer(geoJsonLayer);
|
||||
|
||||
// 添加区县标签
|
||||
geoJsonData.features.forEach((feature) => {
|
||||
if (feature.properties && feature.properties.name) {
|
||||
let centroid;
|
||||
|
||||
if (feature.geometry.type === "Polygon") {
|
||||
centroid = getCentroid(feature.geometry.coordinates);
|
||||
} else if (feature.geometry.type === "MultiPolygon") {
|
||||
// 取第一个多边形的中心
|
||||
centroid = getCentroid(feature.geometry.coordinates[0]);
|
||||
}
|
||||
|
||||
if (centroid) {
|
||||
const label = window.L.divIcon({
|
||||
className: "district-label",
|
||||
html: `<div class="label-content">${feature.properties.name}</div>`,
|
||||
iconSize: [80, 30],
|
||||
iconAnchor: [40, 15],
|
||||
});
|
||||
|
||||
const marker = window.L.marker(centroid, { icon: label });
|
||||
marker.on("click", (e) => {
|
||||
// 清除之前选中的样式
|
||||
if (selectedLayer) {
|
||||
selectedLayer.setStyle({
|
||||
fillColor: "#1E3A8A",
|
||||
fillOpacity: 0.3,
|
||||
weight: 2,
|
||||
});
|
||||
}
|
||||
|
||||
// 找到对应的区县图层并设置样式
|
||||
geoJsonLayer.eachLayer((layer) => {
|
||||
if (
|
||||
layer.feature &&
|
||||
layer.feature.properties.name === feature.properties.name
|
||||
) {
|
||||
layer.setStyle({
|
||||
fillColor: "#ff4d4f",
|
||||
fillOpacity: 0.6,
|
||||
weight: 2.5,
|
||||
color: "#ff7875",
|
||||
});
|
||||
selectedLayer = layer;
|
||||
selectedDistrict.value = feature.properties.name;
|
||||
}
|
||||
});
|
||||
|
||||
// 触发事件
|
||||
emit("districtClick", {
|
||||
name: feature.properties.name,
|
||||
feature: feature,
|
||||
latlng: e.latlng,
|
||||
});
|
||||
|
||||
// 平滑移动到点击位置
|
||||
mapInstance.panTo(e.latlng, { animate: true, duration: 0.5 });
|
||||
});
|
||||
mapInstance.addLayer(marker);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
mapInstance.addLayer(geoJsonLayer)
|
||||
});
|
||||
|
||||
// 调整视图以适应重庆边界
|
||||
mapInstance.fitBounds(geoJsonLayer.getBounds())
|
||||
|
||||
mapInstance.fitBounds(geoJsonLayer.getBounds());
|
||||
} catch (err) {
|
||||
console.error('初始化地图失败:', err)
|
||||
error.value = '地图初始化失败'
|
||||
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)
|
||||
// 检查 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)
|
||||
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()
|
||||
loadMapData();
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
// 组件卸载时清理资源
|
||||
onUnmounted(() => {
|
||||
if (mapInstance) {
|
||||
mapInstance.remove()
|
||||
mapInstance = null
|
||||
mapInstance.remove();
|
||||
mapInstance = null;
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
// 区县标签样式（需要全局样式，因为 Leaflet 动态添加元素）
|
||||
.district-label {
|
||||
background: transparent !important;
|
||||
border: none !important;
|
||||
|
||||
.label-content {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
padding: vw(4) vw(8);
|
||||
border-radius: vw(2);
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
text-shadow:
|
||||
0 1px 3px rgba(0, 0, 0, 0.8),
|
||||
0 0 2px rgba(0, 0, 0, 0.5);
|
||||
letter-spacing: 0.5px;
|
||||
cursor: pointer;
|
||||
width: fit-content;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
color: #40a9ff;
|
||||
text-shadow: 0 0 10px rgba(64, 169, 255, 0.8);
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 视频屏幕自适应 - 基于视口宽度动态调整
|
||||
@function vw($px) {
|
||||
@return calc($px / 1920 * 100vw);
|
||||
}
|
||||
|
||||
.chongqing-map-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@ -163,61 +417,84 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #3B82F6;
|
||||
border-top: 4px solid transparent;
|
||||
width: vw(40);
|
||||
height: vw(40);
|
||||
border: vw(4) solid #3b82f6;
|
||||
border-top: vw(4) solid transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin-bottom: 10px;
|
||||
margin-bottom: vw(10);
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-size: vw(14);
|
||||
}
|
||||
|
||||
.error-text {
|
||||
color: #ff6b6b;
|
||||
font-size: 14px;
|
||||
margin-bottom: 10px;
|
||||
font-size: vw(14);
|
||||
margin-bottom: vw(10);
|
||||
}
|
||||
|
||||
.retry-btn {
|
||||
background: #3B82F6;
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 8px 16px;
|
||||
border-radius: 4px;
|
||||
padding: vw(8) vw(16);
|
||||
border-radius: vw(4);
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-size: vw(12);
|
||||
|
||||
&:hover {
|
||||
background: #2563EB;
|
||||
background: #2563eb;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Leaflet地图样式覆盖
|
||||
// Leaflet 地图样式覆盖
|
||||
:deep(.leaflet-container) {
|
||||
background: #0f1c2e !important;
|
||||
|
||||
.leaflet-popup-content-wrapper {
|
||||
background: rgba(64, 169, 255, 0.9);
|
||||
border-radius: 4px;
|
||||
background: rgba(24, 144, 255, 0.95);
|
||||
border-radius: vw(4);
|
||||
padding: vw(6) vw(12);
|
||||
min-width: vw(80);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
|
||||
|
||||
.map-popup {
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-size: vw(12);
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.leaflet-popup-tip {
|
||||
background: rgba(64, 169, 255, 0.9);
|
||||
background: rgba(24, 144, 255, 0.95);
|
||||
}
|
||||
|
||||
.leaflet-popup-content {
|
||||
width: max-content !important;
|
||||
margin: vw(10) 10px vw(10) 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
}
|
||||
|
||||
// 区县高亮样式
|
||||
:deep(.leaflet-interactive) {
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@ -160,7 +160,8 @@ watch(
|
||||
}
|
||||
|
||||
.ai-dialog {
|
||||
width: 1000px;
|
||||
width: 80vw;
|
||||
max-width: 1000px;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
|
||||
@ -51,16 +51,14 @@
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-section">
|
||||
<div class="table-header">
|
||||
<div class="th" style="width: 50px">序号</div>
|
||||
<div class="th" style="width: 80px">行政区域</div>
|
||||
<div class="th" style="width: 80px">线路编号</div>
|
||||
<div class="th" style="width: 100px">起止桩号</div>
|
||||
<div class="th" style="width: 100px">路况位置</div>
|
||||
<div class="th" style="width: 140px">发生时间</div>
|
||||
<div class="th" style="width: 80px">线路编号</div>
|
||||
<div class="th" style="width: 80px">类型</div>
|
||||
<div class="th" style="width: 100px">管控措施</div>
|
||||
<div class="th" style="flex: 1">操作</div>
|
||||
<div
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
class="th"
|
||||
:style="{ width: column.width, flex: column.flex || 'none' }"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div
|
||||
@ -122,6 +120,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { Close } from "@element-plus/icons-vue";
|
||||
import { regionOptions, typeOptions, controlMeasureOptions } from "./index.js";
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
@ -140,27 +139,26 @@ const filterForm = ref({
|
||||
});
|
||||
|
||||
// 行政区域选项
|
||||
const regionOptions = ref([
|
||||
{ label: "巫溪县", value: "巫溪县" },
|
||||
{ label: "万州区", value: "万州区" },
|
||||
{ label: "沙坪坝区", value: "沙坪坝区" },
|
||||
{ label: "渝中区", value: "渝中区" },
|
||||
]);
|
||||
// 已从 index.js 导入
|
||||
|
||||
// 类型选项
|
||||
const typeOptions = ref([
|
||||
{ label: "边坡坍塌", value: "边坡坍塌" },
|
||||
{ label: "路面塌陷", value: "路面塌陷" },
|
||||
{ label: "桥梁损坏", value: "桥梁损坏" },
|
||||
{ label: "隧道事故", value: "隧道事故" },
|
||||
]);
|
||||
// 已从 index.js 导入
|
||||
|
||||
// 管控措施选项
|
||||
const controlMeasureOptions = ref([
|
||||
{ label: "全幅封闭", value: "全幅封闭" },
|
||||
{ label: "半幅封闭", value: "半幅封闭" },
|
||||
{ label: "正常通行", value: "正常通行" },
|
||||
{ label: "限制通行", value: "限制通行" },
|
||||
// 已从 index.js 导入
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ label: "序号", width: "50px" },
|
||||
{ label: "行政区域", width: "80px" },
|
||||
{ label: "线路编号", width: "80px" },
|
||||
{ label: "起止桩号", width: "100px" },
|
||||
{ label: "路况位置", width: "100px" },
|
||||
{ label: "发生时间", width: "140px" },
|
||||
{ label: "线路编号", width: "80px" },
|
||||
{ label: "类型", width: "80px" },
|
||||
{ label: "管控措施", width: "100px" },
|
||||
{ label: "操作", flex: "1" },
|
||||
]);
|
||||
|
||||
// 表格数据
|
||||
@ -314,7 +312,8 @@ watch(
|
||||
}
|
||||
|
||||
.clearance-dialog {
|
||||
width: 1000px;
|
||||
width: 80vw;
|
||||
max-width: 1000px;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
@ -365,7 +364,8 @@ watch(
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
|
||||
@ -88,12 +88,30 @@ const handleOverlayClick = () => {
|
||||
}
|
||||
|
||||
.confirm-dialog {
|
||||
width: 360px;
|
||||
width: 80vw;
|
||||
max-width: 400px;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
animation: dialogSlideIn 0.3s ease-out;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 90vw;
|
||||
max-width: 90vw;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dialogSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8) translateY(-50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
// 标题栏
|
||||
@ -109,18 +127,23 @@ const handleOverlayClick = () => {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-size: 13px;
|
||||
transition: color 0.3s;
|
||||
flex-shrink: 0;
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
@ -132,12 +155,16 @@ const handleOverlayClick = () => {
|
||||
.dialog-content {
|
||||
padding: 24px 20px;
|
||||
text-align: center;
|
||||
max-height: 40vh;
|
||||
overflow-y: auto;
|
||||
|
||||
.confirm-message {
|
||||
font-size: 14px;
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
|
||||
@ -147,16 +174,20 @@ const handleOverlayClick = () => {
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
padding: 0 20px 20px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.btn-cancel {
|
||||
min-width: 80px;
|
||||
height: 32px;
|
||||
height: 26px;
|
||||
padding: 0 16px;
|
||||
background-color: transparent;
|
||||
border: 1px solid rgba(64, 169, 255, 0.4);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 13px;
|
||||
font-size: 10px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
flex: 1;
|
||||
min-flex: 64px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(64, 169, 255, 0.1);
|
||||
@ -167,13 +198,16 @@ const handleOverlayClick = () => {
|
||||
|
||||
.btn-confirm {
|
||||
min-width: 80px;
|
||||
height: 32px;
|
||||
height: 26px;
|
||||
padding: 0 16px;
|
||||
background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-size: 10px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.3s;
|
||||
flex: 1;
|
||||
min-flex: 64px;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #69c0ff 0%, #40a9ff 100%);
|
||||
|
||||
@ -40,12 +40,14 @@
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-section">
|
||||
<div class="table-header">
|
||||
<div class="th" style="width: 60px">序号</div>
|
||||
<div class="th" style="width: 100px">行政区域</div>
|
||||
<div class="th" style="width: 200px">驻地名称</div>
|
||||
<div class="th" style="width: 200px">所属项目</div>
|
||||
<div class="th" style="width: 80px">驻地人数</div>
|
||||
<div class="th" style="flex: 1">驻地风险等级</div>
|
||||
<div
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
class="th"
|
||||
:style="{ width: column.width, flex: column.flex || 'none' }"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div
|
||||
@ -101,6 +103,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { Close } from "@element-plus/icons-vue";
|
||||
import { regionOptions, riskLevelOptions } from "./index.js";
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
@ -118,19 +121,19 @@ const filterForm = ref({
|
||||
});
|
||||
|
||||
// 行政区域选项
|
||||
const regionOptions = ref([
|
||||
{ label: "沙坪坝区", value: "沙坪坝区" },
|
||||
{ label: "万州区", value: "万州区" },
|
||||
{ label: "渝中区", value: "渝中区" },
|
||||
{ label: "江北区", value: "江北区" },
|
||||
]);
|
||||
// 已从 index.js 导入
|
||||
|
||||
// 风险等级选项
|
||||
const riskLevelOptions = ref([
|
||||
{ label: "Ⅰ级", value: "Ⅰ级" },
|
||||
{ label: "Ⅱ级", value: "Ⅱ级" },
|
||||
{ label: "Ⅲ级", value: "Ⅲ级" },
|
||||
{ label: "Ⅳ级", value: "Ⅳ级" },
|
||||
// 已从 index.js 导入
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ label: "序号", width: "60px" },
|
||||
{ label: "行政区域", width: "100px" },
|
||||
{ label: "驻地名称", width: "200px" },
|
||||
{ label: "所属项目", width: "200px" },
|
||||
{ label: "驻地人数", width: "80px" },
|
||||
{ label: "驻地风险等级", flex: "1" },
|
||||
]);
|
||||
|
||||
// 表格数据
|
||||
@ -267,7 +270,8 @@ watch(
|
||||
}
|
||||
|
||||
.control-dialog {
|
||||
width: 900px;
|
||||
width: 80vw;
|
||||
max-width: 900px;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
@ -318,7 +322,8 @@ watch(
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
|
||||
@ -40,13 +40,14 @@
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-section">
|
||||
<div class="table-header">
|
||||
<div class="th" style="width: 50px">序号</div>
|
||||
<div class="th" style="width: 100px">区县/镇街</div>
|
||||
<div class="th" style="width: 80px">姓名</div>
|
||||
<div class="th" style="width: 120px">电话</div>
|
||||
<div class="th" style="width: 100px">类型</div>
|
||||
<div class="th" style="width: 140px">角色</div>
|
||||
<div class="th" style="flex: 1">调度时间</div>
|
||||
<div
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
class="th"
|
||||
:style="{ width: column.width, flex: column.flex || 'none' }"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div
|
||||
@ -93,6 +94,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { Close } from "@element-plus/icons-vue";
|
||||
import { regionOptions, typeOptions } from "./index.js";
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
@ -110,19 +112,20 @@ const filterForm = ref({
|
||||
});
|
||||
|
||||
// 行政区域选项
|
||||
const regionOptions = ref([
|
||||
{ label: "柏梓镇", value: "柏梓镇" },
|
||||
{ label: "万州区", value: "万州区" },
|
||||
{ label: "沙坪坝区", value: "沙坪坝区" },
|
||||
{ label: "渝中区", value: "渝中区" },
|
||||
]);
|
||||
// 已从 index.js 导入
|
||||
|
||||
// 类型选项
|
||||
const typeOptions = ref([
|
||||
{ label: "交通主管部门", value: "交通主管部门" },
|
||||
{ label: "公路机构", value: "公路机构" },
|
||||
{ label: "养护站", value: "养护站" },
|
||||
{ label: "护路员", value: "护路员" },
|
||||
// 已从 index.js 导入
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ label: "序号", width: "50px" },
|
||||
{ label: "区县/镇街", width: "100px" },
|
||||
{ label: "姓名", width: "80px" },
|
||||
{ label: "电话", width: "120px" },
|
||||
{ label: "类型", width: "100px" },
|
||||
{ label: "角色", width: "140px" },
|
||||
{ label: "调度时间", flex: "1" },
|
||||
]);
|
||||
|
||||
// 表格数据
|
||||
@ -252,7 +255,8 @@ watch(
|
||||
}
|
||||
|
||||
.dispatch-detail-dialog {
|
||||
width: 900px;
|
||||
width: 80vw;
|
||||
max-width: 900px;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
@ -303,7 +307,8 @@ watch(
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
|
||||
@ -29,10 +29,14 @@
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-section">
|
||||
<div class="table-header">
|
||||
<div class="th" style="width: 60px">序号</div>
|
||||
<div class="th" style="width: 120px">行政区域</div>
|
||||
<div class="th" style="width: 100px">调度数</div>
|
||||
<div class="th" style="flex: 1">最近调度时间</div>
|
||||
<div
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
class="th"
|
||||
:style="{ width: column.width, flex: column.flex || 'none' }"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div
|
||||
@ -78,6 +82,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { Close } from "@element-plus/icons-vue";
|
||||
import { regionOptions } from "./index.js";
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
@ -94,11 +99,14 @@ const filterForm = ref({
|
||||
});
|
||||
|
||||
// 行政区域选项
|
||||
const regionOptions = ref([
|
||||
{ label: "重庆市", value: "重庆市" },
|
||||
{ label: "万州区", value: "万州区" },
|
||||
{ label: "沙坪坝区", value: "沙坪坝区" },
|
||||
{ label: "渝中区", value: "渝中区" },
|
||||
// 已从 index.js 导入
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ label: "序号", width: "60px" },
|
||||
{ label: "行政区域", width: "120px" },
|
||||
{ label: "调度数", width: "100px" },
|
||||
{ label: "最近调度时间", flex: "1" },
|
||||
]);
|
||||
|
||||
// 表格数据
|
||||
@ -221,7 +229,8 @@ watch(
|
||||
}
|
||||
|
||||
.dispatch-dialog {
|
||||
width: 700px;
|
||||
width: 80vw;
|
||||
max-width: 700px;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
@ -272,7 +281,8 @@ watch(
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
|
||||
@ -243,7 +243,8 @@ watch(
|
||||
}
|
||||
|
||||
.event-dialog {
|
||||
width: 700px;
|
||||
width: 80vw;
|
||||
max-width: 700px;
|
||||
max-height: 85vh;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
|
||||
@ -234,7 +234,8 @@ watch(
|
||||
}
|
||||
|
||||
.impact-detail-dialog {
|
||||
width: 650px;
|
||||
width: 80vw;
|
||||
max-width: 650px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
|
||||
@ -8,32 +8,59 @@
|
||||
<el-icon><Close /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">影响桥梁</div>
|
||||
<div class="stat-value">2933</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">影响边坡</div>
|
||||
<div class="stat-value">2933</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">影响隧道</div>
|
||||
<div class="stat-value">2933</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">影响项目</div>
|
||||
<div class="stat-value">2933</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选区域 -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-row">
|
||||
<div class="filter-item">
|
||||
<el-select v-model="filterForm.pointType" placeholder="影响点类型" class="filter-select">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="边坡" value="slope" />
|
||||
<el-option label="桥梁" value="bridge" />
|
||||
<el-option label="隧道" value="tunnel" />
|
||||
<el-option label="路面" value="road" />
|
||||
<el-option
|
||||
v-for="option in pointTypeOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="filterForm.pointLevel" placeholder="影响点等级" class="filter-select">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="一般隐患" value="normal" />
|
||||
<el-option label="重大隐患" value="serious" />
|
||||
<el-option
|
||||
v-for="option in pointLevelOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="filterForm.region" placeholder="行政区域" class="filter-select">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="万州区" value="wanzhou" />
|
||||
<el-option label="涪陵区" value="fuling" />
|
||||
<el-option label="合川区" value="hechuan" />
|
||||
<el-option
|
||||
v-for="option in regionOptionsWithAll"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@ -47,16 +74,14 @@
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-section">
|
||||
<div class="table-header">
|
||||
<div class="th" style="width: 50px">序号</div>
|
||||
<div class="th" style="width: 80px">行政区域</div>
|
||||
<div class="th" style="width: 80px">影响点类型</div>
|
||||
<div class="th" style="width: 180px">影响点位置</div>
|
||||
<div class="th" style="width: 90px">影响点等级</div>
|
||||
<div class="th" style="width: 130px">交通主管部门负责人</div>
|
||||
<div class="th" style="width: 110px">公路机构责任人</div>
|
||||
<div class="th" style="width: 110px">养护站负责人</div>
|
||||
<div class="th" style="width: 100px">护路员</div>
|
||||
<div class="th" style="width: 60px">操作</div>
|
||||
<div
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
class="th"
|
||||
:style="{ width: column.width, flex: column.flex || 'none' }"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div
|
||||
@ -131,6 +156,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { Close, ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
|
||||
import { pointTypeOptions, pointLevelOptions, regionOptionsWithAll } from "./index.js";
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
@ -148,6 +174,20 @@ const filterForm = ref({
|
||||
region: "",
|
||||
});
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ label: "序号", width: "50px" },
|
||||
{ label: "行政区域", width: "80px" },
|
||||
{ label: "影响点类型", width: "80px" },
|
||||
{ label: "影响点位置", width: "180px" },
|
||||
{ label: "影响点等级", width: "90px" },
|
||||
{ label: "交通主管部门负责人", width: "130px" },
|
||||
{ label: "公路机构责任人", width: "110px" },
|
||||
{ label: "养护站负责人", width: "110px" },
|
||||
{ label: "护路员", width: "100px" },
|
||||
{ label: "操作", width: "60px" },
|
||||
]);
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([
|
||||
{
|
||||
@ -273,6 +313,11 @@ watch(
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 视频屏幕自适应 - 基于视口宽度动态调整
|
||||
@function vw($px) {
|
||||
@return calc($px / 1920 * 100vw);
|
||||
}
|
||||
|
||||
.impact-dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -287,11 +332,12 @@ watch(
|
||||
}
|
||||
|
||||
.impact-dialog {
|
||||
width: 1050px;
|
||||
width: 80vw;
|
||||
max-width: 1200px;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
border-radius: vw(12);
|
||||
padding: vw(24);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
@ -301,29 +347,29 @@ watch(
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: vw(20);
|
||||
|
||||
.header-title {
|
||||
font-size: 20px;
|
||||
font-size: vw(20);
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
padding: 8px 40px;
|
||||
padding: vw(8) vw(40);
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(64, 169, 255, 0.2) 20%, rgba(64, 169, 255, 0.2) 80%, transparent 100%);
|
||||
border-bottom: 2px solid #40a9ff;
|
||||
border-bottom: vw(2) solid #40a9ff;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: vw(32);
|
||||
height: vw(32);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
font-size: vw(20);
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
@ -332,29 +378,69 @@ watch(
|
||||
}
|
||||
}
|
||||
|
||||
// 统计卡片
|
||||
.stats-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: vw(16);
|
||||
margin-bottom: vw(20);
|
||||
|
||||
.stat-card {
|
||||
background: linear-gradient(135deg, rgba(30, 70, 120, 0.6) 0%, rgba(20, 50, 90, 0.8) 100%);
|
||||
border: vw(2) solid rgba(64, 169, 255, 0.4);
|
||||
border-radius: vw(8);
|
||||
padding: vw(16) vw(20);
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(64, 169, 255, 0.8);
|
||||
box-shadow: 0 0 20px rgba(64, 169, 255, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: vw(14);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: vw(8);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: vw(28);
|
||||
font-weight: bold;
|
||||
color: #40a9ff;
|
||||
text-shadow: 0 0 10px rgba(64, 169, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 筛选区域
|
||||
.filter-section {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: vw(20);
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
.filter-select {
|
||||
width: 150px;
|
||||
width: vw(150);
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: rgba(30, 70, 120, 0.4);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
box-shadow: none;
|
||||
border-radius: 4px;
|
||||
border-radius: vw(4);
|
||||
|
||||
.el-input__inner {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
font-size: vw(13);
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
@ -372,10 +458,10 @@ watch(
|
||||
.search-btn {
|
||||
background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 0 24px;
|
||||
height: 32px;
|
||||
font-size: 13px;
|
||||
border-radius: vw(4);
|
||||
padding: 0 vw(24);
|
||||
height: vw(32);
|
||||
font-size: vw(13);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #69c0ff 0%, #40a9ff 100%);
|
||||
@ -387,17 +473,17 @@ watch(
|
||||
// 表格区域
|
||||
.table-section {
|
||||
background-color: rgba(30, 70, 120, 0.3);
|
||||
border-radius: 8px;
|
||||
border-radius: vw(8);
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: vw(20);
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
background-color: rgba(64, 169, 255, 0.2);
|
||||
padding: 12px 16px;
|
||||
padding: vw(12) vw(16);
|
||||
|
||||
.th {
|
||||
font-size: 13px;
|
||||
font-size: vw(13);
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
@ -410,10 +496,10 @@ watch(
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 12px 16px;
|
||||
padding: vw(12) vw(16);
|
||||
align-items: center;
|
||||
transition: background-color 0.3s;
|
||||
min-height: 60px;
|
||||
min-height: vw(60);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(64, 169, 255, 0.1);
|
||||
@ -424,17 +510,17 @@ watch(
|
||||
}
|
||||
|
||||
.td {
|
||||
font-size: 12px;
|
||||
font-size: vw(12);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
text-align: center;
|
||||
word-break: break-all;
|
||||
padding: 0 4px;
|
||||
padding: 0 vw(4);
|
||||
|
||||
.level-tag {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 11px;
|
||||
padding: vw(2) vw(8);
|
||||
border-radius: vw(4);
|
||||
font-size: vw(11);
|
||||
|
||||
&.level-normal {
|
||||
background-color: rgba(250, 219, 95, 0.2);
|
||||
@ -452,15 +538,15 @@ watch(
|
||||
.person-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
gap: vw(2);
|
||||
|
||||
.person-name {
|
||||
font-size: 12px;
|
||||
font-size: vw(12);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.person-phone {
|
||||
font-size: 11px;
|
||||
font-size: vw(11);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
@ -468,7 +554,7 @@ watch(
|
||||
.detail-link {
|
||||
color: #40a9ff;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
font-size: vw(12);
|
||||
|
||||
&:hover {
|
||||
color: #69c0ff;
|
||||
@ -485,27 +571,27 @@ watch(
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
gap: vw(16);
|
||||
|
||||
.total {
|
||||
font-size: 13px;
|
||||
font-size: vw(13);
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.page-btns {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: vw(8);
|
||||
|
||||
.page-btn {
|
||||
min-width: 28px;
|
||||
height: 28px;
|
||||
min-width: vw(28);
|
||||
height: vw(28);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(64, 169, 255, 0.1);
|
||||
border: 1px solid rgba(64, 169, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
border-radius: vw(4);
|
||||
font-size: vw(12);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
@ -531,17 +617,17 @@ watch(
|
||||
|
||||
// 滚动条样式
|
||||
.table-body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
width: vw(6);
|
||||
}
|
||||
|
||||
.table-body::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 3px;
|
||||
border-radius: vw(3);
|
||||
}
|
||||
|
||||
.table-body::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, #40a9ff 0%, #1890ff 100%);
|
||||
border-radius: 3px;
|
||||
border-radius: vw(3);
|
||||
}
|
||||
|
||||
.table-body::-webkit-scrollbar-thumb:hover {
|
||||
|
||||
109
packages/screen/src/views/RiskWarning/component/index.js
Normal file
109
packages/screen/src/views/RiskWarning/component/index.js
Normal file
@ -0,0 +1,109 @@
|
||||
// 弹窗组件统一数据配置
|
||||
|
||||
// 行政区域选项
|
||||
export const regionOptions = [
|
||||
{ label: "重庆市", value: "重庆市" },
|
||||
{ label: "万州区", value: "万州区" },
|
||||
{ label: "沙坪坝区", value: "沙坪坝区" },
|
||||
{ label: "渝中区", value: "渝中区" },
|
||||
{ label: "巫溪县", value: "巫溪县" },
|
||||
{ label: "涪陵区", value: "涪陵区" },
|
||||
{ label: "合川区", value: "合川区" },
|
||||
{ label: "万盛区", value: "万盛区" },
|
||||
{ label: "长寿区", value: "长寿区" },
|
||||
{ label: "城口区", value: "城口区" },
|
||||
{ label: "柏梓镇", value: "柏梓镇" },
|
||||
{ label: "江北区", value: "江北区" },
|
||||
];
|
||||
|
||||
// 类型选项
|
||||
export const typeOptions = [
|
||||
{ label: "边坡坍塌", value: "边坡坍塌" },
|
||||
{ label: "路面塌陷", value: "路面塌陷" },
|
||||
{ label: "桥梁损坏", value: "桥梁损坏" },
|
||||
{ label: "隧道事故", value: "隧道事故" },
|
||||
{ label: "交通主管部门", value: "交通主管部门" },
|
||||
{ label: "公路机构", value: "公路机构" },
|
||||
{ label: "养护站", value: "养护站" },
|
||||
{ label: "护路员", value: "护路员" },
|
||||
];
|
||||
|
||||
// 管控措施选项
|
||||
export const controlMeasureOptions = [
|
||||
{ label: "全幅封闭", value: "全幅封闭" },
|
||||
{ label: "半幅封闭", value: "半幅封闭" },
|
||||
{ label: "正常通行", value: "正常通行" },
|
||||
{ label: "限制通行", value: "限制通行" },
|
||||
];
|
||||
|
||||
// 风险等级选项
|
||||
export const riskLevelOptions = [
|
||||
{ label: "一级", value: "一级" },
|
||||
{ label: "二级", value: "二级" },
|
||||
{ label: "三级", value: "三级" },
|
||||
{ label: "四级", value: "四级" },
|
||||
];
|
||||
|
||||
// 影响点类型选项
|
||||
export const pointTypeOptions = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "边坡", value: "slope" },
|
||||
{ label: "桥梁", value: "bridge" },
|
||||
{ label: "隧道", value: "tunnel" },
|
||||
{ label: "路面", value: "road" },
|
||||
];
|
||||
|
||||
// 影响点等级选项
|
||||
export const pointLevelOptions = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "一般隐患", value: "normal" },
|
||||
{ label: "重大隐患", value: "serious" },
|
||||
];
|
||||
|
||||
// 是否回应选项
|
||||
export const isRespondedOptions = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "是", value: "yes" },
|
||||
{ label: "否", value: "no" },
|
||||
];
|
||||
|
||||
// 预警等级选项
|
||||
export const warningLevelOptions = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "红色预警", value: "red" },
|
||||
{ label: "橙色预警", value: "orange" },
|
||||
{ label: "黄色预警", value: "yellow" },
|
||||
{ label: "蓝色预警", value: "blue" },
|
||||
];
|
||||
|
||||
// 是否结束选项
|
||||
export const isEndedOptions = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "是", value: "yes" },
|
||||
{ label: "否", value: "no" },
|
||||
];
|
||||
|
||||
// 行政区域选项（带全部）
|
||||
export const regionOptionsWithAll = [
|
||||
{ label: "全部", value: "" },
|
||||
{ label: "万州区", value: "wanzhou" },
|
||||
{ label: "涪陵区", value: "fuling" },
|
||||
{ label: "合川区", value: "hechuan" },
|
||||
{ label: "万盛区", value: "wansheng" },
|
||||
{ label: "长寿区", value: "changshou" },
|
||||
{ label: "城口区", value: "chengkou" },
|
||||
];
|
||||
|
||||
// 默认导出所有选项
|
||||
export default {
|
||||
regionOptions,
|
||||
typeOptions,
|
||||
controlMeasureOptions,
|
||||
riskLevelOptions,
|
||||
pointTypeOptions,
|
||||
pointLevelOptions,
|
||||
isRespondedOptions,
|
||||
warningLevelOptions,
|
||||
isEndedOptions,
|
||||
regionOptionsWithAll,
|
||||
};
|
||||
@ -271,7 +271,8 @@ watch(
|
||||
}
|
||||
|
||||
.response-dialog {
|
||||
width: 700px;
|
||||
width: 80vw;
|
||||
max-width: 700px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
|
||||
@ -305,7 +305,8 @@ watch(
|
||||
}
|
||||
|
||||
.response-info-dialog {
|
||||
width: 750px;
|
||||
width: 80vw;
|
||||
max-width: 750px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
|
||||
@ -52,13 +52,14 @@
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-section">
|
||||
<div class="table-header">
|
||||
<div class="th" style="width: 60px">序号</div>
|
||||
<div class="th" style="width: 120px">区县/镇街</div>
|
||||
<div class="th" style="width: 100px">姓名</div>
|
||||
<div class="th" style="width: 120px">电话</div>
|
||||
<div class="th" style="flex: 1">角色</div>
|
||||
<div class="th" style="width: 100px">职务</div>
|
||||
<div class="th" style="width: 120px">操作</div>
|
||||
<div
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
class="th"
|
||||
:style="{ width: column.width, flex: column.flex || 'none' }"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div
|
||||
@ -135,6 +136,17 @@ const stats = ref({
|
||||
village: 1099,
|
||||
});
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ label: "序号", width: "60px" },
|
||||
{ label: "区县/镇街", width: "120px" },
|
||||
{ label: "姓名", width: "100px" },
|
||||
{ label: "电话", width: "120px" },
|
||||
{ label: "角色", flex: "1" },
|
||||
{ label: "职务", width: "100px" },
|
||||
{ label: "操作", width: "120px" },
|
||||
]);
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([
|
||||
{ id: 1, district: "万州区柏梓镇", name: "赵海浪", phone: "1862352068", role: "一般人员（路长履职）", position: "其他" },
|
||||
@ -251,11 +263,13 @@ watch(
|
||||
}
|
||||
|
||||
.response-dialog {
|
||||
width: 900px;
|
||||
width: 70vw;
|
||||
max-width: 700px;
|
||||
max-height: 80vh;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
@ -265,13 +279,13 @@ watch(
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.header-title {
|
||||
font-size: 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
padding: 8px 40px;
|
||||
padding: 4px 24px;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(64, 169, 255, 0.2) 20%, rgba(64, 169, 255, 0.2) 80%, transparent 100%);
|
||||
border-bottom: 2px solid #40a9ff;
|
||||
}
|
||||
@ -280,14 +294,14 @@ watch(
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
font-size: 16px;
|
||||
transition: color 0.3s;
|
||||
|
||||
&:hover {
|
||||
@ -299,55 +313,55 @@ watch(
|
||||
// 统计卡片
|
||||
.stats-cards {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-bottom: 24px;
|
||||
gap: 12px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.stat-card {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
background: linear-gradient(135deg, rgba(30, 80, 140, 0.6) 0%, rgba(20, 60, 110, 0.8) 100%);
|
||||
border: 1px solid rgba(64, 169, 255, 0.2);
|
||||
border-radius: 8px;
|
||||
padding: 16px 20px;
|
||||
border-radius: 4px;
|
||||
padding: 10px 12px;
|
||||
|
||||
.card-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(64, 169, 255, 0.15);
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
|
||||
.stat-icon {
|
||||
font-size: 28px;
|
||||
font-size: 18px;
|
||||
color: #40a9ff;
|
||||
}
|
||||
}
|
||||
|
||||
.card-info {
|
||||
.card-label {
|
||||
font-size: 14px;
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: 4px;
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 4px;
|
||||
gap: 2px;
|
||||
|
||||
.value-num {
|
||||
font-size: 28px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: #40a9ff;
|
||||
text-shadow: 0 0 10px rgba(64, 169, 255, 0.5);
|
||||
text-shadow: 0 0 6px rgba(64, 169, 255, 0.5);
|
||||
}
|
||||
|
||||
.value-unit {
|
||||
font-size: 13px;
|
||||
font-size: 10px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
@ -358,17 +372,17 @@ watch(
|
||||
// 表格区域
|
||||
.table-section {
|
||||
background-color: rgba(30, 70, 120, 0.3);
|
||||
border-radius: 8px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.table-header {
|
||||
display: flex;
|
||||
background-color: rgba(64, 169, 255, 0.2);
|
||||
padding: 12px 16px;
|
||||
padding: 8px 12px;
|
||||
|
||||
.th {
|
||||
font-size: 14px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
@ -376,12 +390,12 @@ watch(
|
||||
}
|
||||
|
||||
.table-body {
|
||||
max-height: 240px;
|
||||
max-height: 30vh;
|
||||
overflow-y: auto;
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 12px 16px;
|
||||
padding: 10px 12px;
|
||||
align-items: center;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
@ -394,23 +408,23 @@ watch(
|
||||
}
|
||||
|
||||
.td {
|
||||
font-size: 13px;
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
text-align: center;
|
||||
|
||||
.action-btns {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
gap: 8px;
|
||||
|
||||
.action-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(64, 169, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
color: #40a9ff;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
@ -431,27 +445,27 @@ watch(
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 16px;
|
||||
gap: 10px;
|
||||
|
||||
.total {
|
||||
font-size: 13px;
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
|
||||
.page-btns {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
gap: 4px;
|
||||
|
||||
.page-btn {
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(64, 169, 255, 0.1);
|
||||
border: 1px solid rgba(64, 169, 255, 0.2);
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
border-radius: 2px;
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
@ -477,17 +491,17 @@ watch(
|
||||
|
||||
// 滚动条样式
|
||||
.table-body::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
.table-body::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.table-body::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg, #40a9ff 0%, #1890ff 100%);
|
||||
border-radius: 4px;
|
||||
border-radius: 2px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,9 @@
|
||||
<template>
|
||||
<div v-if="visible" class="response-status-dialog-overlay" @click="handleOverlayClick">
|
||||
<div
|
||||
v-if="visible"
|
||||
class="response-status-dialog-overlay"
|
||||
@click="handleOverlayClick"
|
||||
>
|
||||
<div class="response-status-dialog" @click.stop>
|
||||
<!-- 标题栏 -->
|
||||
<div class="dialog-header">
|
||||
@ -9,30 +13,69 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计卡片 -->
|
||||
<div class="stats-cards">
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">影响桥梁</div>
|
||||
<div class="stat-value">2933</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">影响边坡</div>
|
||||
<div class="stat-value">2933</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">影响隧道</div>
|
||||
<div class="stat-value">2933</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<div class="stat-label">影响项目</div>
|
||||
<div class="stat-value">2933</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 筛选区域 -->
|
||||
<div class="filter-section">
|
||||
<div class="filter-row">
|
||||
<div class="filter-item">
|
||||
<el-select v-model="filterForm.pointType" placeholder="影响点类型" class="filter-select">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="边坡" value="slope" />
|
||||
<el-option label="桥梁" value="bridge" />
|
||||
<el-option label="隧道" value="tunnel" />
|
||||
<el-option label="路面" value="road" />
|
||||
<el-select
|
||||
v-model="filterForm.pointType"
|
||||
placeholder="影响点类型"
|
||||
class="filter-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in pointTypeOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="filterForm.pointLevel" placeholder="影响点等级" class="filter-select">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="一般隐患" value="normal" />
|
||||
<el-option label="重大隐患" value="serious" />
|
||||
<el-select
|
||||
v-model="filterForm.pointLevel"
|
||||
placeholder="影响点等级"
|
||||
class="filter-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in pointLevelOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="filterForm.isResponded" placeholder="是否回应" class="filter-select">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="是" value="yes" />
|
||||
<el-option label="否" value="no" />
|
||||
<el-select
|
||||
v-model="filterForm.isResponded"
|
||||
placeholder="是否回应"
|
||||
class="filter-select"
|
||||
>
|
||||
<el-option
|
||||
v-for="option in isRespondedOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
@ -41,18 +84,14 @@
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-section">
|
||||
<div class="table-header">
|
||||
<div class="th" style="width: 50px">序号</div>
|
||||
<div class="th" style="width: 80px">影响点类型</div>
|
||||
<div class="th" style="width: 180px">影响点位置</div>
|
||||
<div class="th" style="width: 90px">影响点等级</div>
|
||||
<div class="th" style="width: 60px">查次数</div>
|
||||
<div class="th" style="width: 120px">交通主管部门负责人</div>
|
||||
<div class="th" style="width: 110px">公路机构责任人</div>
|
||||
<div class="th" style="width: 110px">养护站负责人</div>
|
||||
<div class="th" style="width: 80px">护路员</div>
|
||||
<div class="th" style="width: 70px">回应状态</div>
|
||||
<div class="th" style="width: 110px">最新催告时间</div>
|
||||
<div class="th" style="width: 50px">操作</div>
|
||||
<div
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
class="th"
|
||||
:style="{ width: column.width, flex: column.flex || 'none' }"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div
|
||||
@ -63,9 +102,11 @@
|
||||
>
|
||||
<div class="td" style="width: 50px">{{ item.id }}</div>
|
||||
<div class="td" style="width: 80px">{{ item.pointType }}</div>
|
||||
<div class="td" style="width: 180px">{{ item.pointLocation }}</div>
|
||||
<div class="td" style="width: 150px">{{ item.pointLocation }}</div>
|
||||
<div class="td" style="width: 90px">
|
||||
<span class="level-tag" :class="item.levelClass">{{ item.pointLevel }}</span>
|
||||
<span class="level-tag" :class="item.levelClass">{{
|
||||
item.pointLevel
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="td" style="width: 60px">{{ item.checkCount }}</div>
|
||||
<div class="td" style="width: 120px">
|
||||
@ -93,7 +134,9 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="td" style="width: 70px">
|
||||
<span class="response-status" :class="item.responseClass">{{ item.responseStatus }}</span>
|
||||
<span class="response-status" :class="item.responseClass">{{
|
||||
item.responseStatus
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="td" style="width: 110px">
|
||||
<div class="time-info">
|
||||
@ -112,7 +155,11 @@
|
||||
<div class="pagination">
|
||||
<span class="total">共{{ total }}条数据</span>
|
||||
<div class="page-btns">
|
||||
<div class="page-btn" :class="{ disabled: currentPage === 1 }" @click="prevPage">
|
||||
<div
|
||||
class="page-btn"
|
||||
:class="{ disabled: currentPage === 1 }"
|
||||
@click="prevPage"
|
||||
>
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
</div>
|
||||
<div
|
||||
@ -124,7 +171,11 @@
|
||||
>
|
||||
{{ page }}
|
||||
</div>
|
||||
<div class="page-btn" :class="{ disabled: currentPage === totalPages }" @click="nextPage">
|
||||
<div
|
||||
class="page-btn"
|
||||
:class="{ disabled: currentPage === totalPages }"
|
||||
@click="nextPage"
|
||||
>
|
||||
<el-icon><ArrowRight /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
@ -136,6 +187,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { Close, ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
|
||||
import { pointTypeOptions, pointLevelOptions, isRespondedOptions } from "./index.js";
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
@ -153,6 +205,22 @@ const filterForm = ref({
|
||||
isResponded: "",
|
||||
});
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ label: "序号", width: "50px" },
|
||||
{ label: "影响点类型", width: "80px" },
|
||||
{ label: "影响点位置", width: "150px" },
|
||||
{ label: "影响点等级", width: "90px" },
|
||||
{ label: "查次数", width: "60px" },
|
||||
{ label: "交通主管部门负责人", width: "120px" },
|
||||
{ label: "公路机构责任人", width: "110px" },
|
||||
{ label: "养护站负责人", width: "110px" },
|
||||
{ label: "护路员", width: "80px" },
|
||||
{ label: "回应状态", width: "70px" },
|
||||
{ label: "最新催告时间", width: "110px" },
|
||||
{ label: "操作", width: "50px" },
|
||||
]);
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([
|
||||
{
|
||||
@ -260,7 +328,7 @@ watch(
|
||||
currentPage.value = 1;
|
||||
fetchData();
|
||||
}
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
@ -279,8 +347,13 @@ watch(
|
||||
}
|
||||
|
||||
.response-status-dialog {
|
||||
width: 1150px;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
width: 80vw;
|
||||
max-width: 1150px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(20, 50, 90, 0.95) 0%,
|
||||
rgba(10, 30, 60, 0.98) 100%
|
||||
);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
@ -300,7 +373,13 @@ watch(
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
padding: 8px 40px;
|
||||
background: linear-gradient(90deg, transparent 0%, rgba(64, 169, 255, 0.2) 20%, rgba(64, 169, 255, 0.2) 80%, transparent 100%);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
rgba(64, 169, 255, 0.2) 20%,
|
||||
rgba(64, 169, 255, 0.2) 80%,
|
||||
transparent 100%
|
||||
);
|
||||
border-bottom: 2px solid #40a9ff;
|
||||
}
|
||||
|
||||
@ -331,6 +410,7 @@ watch(
|
||||
.filter-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
@ -373,7 +453,7 @@ watch(
|
||||
.table-header {
|
||||
display: flex;
|
||||
background-color: rgba(64, 169, 255, 0.2);
|
||||
padding: 12px 16px;
|
||||
padding: 12px 0;
|
||||
|
||||
.th {
|
||||
font-size: 13px;
|
||||
@ -389,7 +469,7 @@ watch(
|
||||
|
||||
.table-row {
|
||||
display: flex;
|
||||
padding: 12px 16px;
|
||||
padding: 12px 0px;
|
||||
align-items: center;
|
||||
transition: background-color 0.3s;
|
||||
|
||||
@ -570,4 +650,46 @@ watch(
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 统计卡片
|
||||
.stats-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 16px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.stat-card {
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(30, 70, 120, 0.6) 0%,
|
||||
rgba(20, 50, 90, 0.8) 100%
|
||||
);
|
||||
border: 2px solid rgba(64, 169, 255, 0.4);
|
||||
border-radius: 8px;
|
||||
padding: 16px 20px;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(64, 169, 255, 0.8);
|
||||
box-shadow: 0 0 20px rgba(64, 169, 255, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #40a9ff;
|
||||
text-shadow: 0 0 10px rgba(64, 169, 255, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -93,9 +93,14 @@
|
||||
</div>
|
||||
<div class="responsible-table">
|
||||
<div class="table-header">
|
||||
<div class="th" style="width: 30%">责任人类型</div>
|
||||
<div class="th" style="width: 40%">责任人</div>
|
||||
<div class="th" style="width: 30%">巡查频率</div>
|
||||
<div
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
class="th"
|
||||
:style="{ width: column.width }"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div
|
||||
@ -192,6 +197,13 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(["update:visible", "close", "viewTrack"]);
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ label: "责任人类型", width: "30%" },
|
||||
{ label: "责任人", width: "40%" },
|
||||
{ label: "巡查频率", width: "30%" },
|
||||
]);
|
||||
|
||||
// 基本信息
|
||||
const basicInfo = ref({
|
||||
district: "合川区",
|
||||
@ -338,7 +350,8 @@ watch(
|
||||
}
|
||||
|
||||
.risk-dialog {
|
||||
width: 800px;
|
||||
width: 80vw;
|
||||
max-width: 800px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
|
||||
@ -24,7 +24,7 @@ defineProps({
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section-header {
|
||||
height: 50px;
|
||||
height: 6.6667vw;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -35,20 +35,51 @@ defineProps({
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
gap: 1.0667vw;
|
||||
font-size: 1.3333vw;
|
||||
.title {
|
||||
margin-left: 35px;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
margin-left: 2.667vw;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
gap: 1.0667vw;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 10.6667vw;
|
||||
|
||||
.header-left {
|
||||
gap: 2.1333vw;
|
||||
|
||||
.title {
|
||||
margin-left: 8vw;
|
||||
font-size: 1vw;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.header-right {
|
||||
gap: 2.1333vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 插槽内容自适应
|
||||
::v-deep(.header-left .title),
|
||||
::v-deep(.header-left > span),
|
||||
::v-deep(.header-left > div) {
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 4vw;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,13 +12,14 @@
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-section">
|
||||
<div class="table-header">
|
||||
<div class="th" style="width: 60px">序号</div>
|
||||
<div class="th" style="width: 140px">区县/镇街</div>
|
||||
<div class="th" style="width: 100px">姓名</div>
|
||||
<div class="th" style="width: 120px">电话</div>
|
||||
<div class="th" style="width: 180px">驻地名称</div>
|
||||
<div class="th" style="flex: 1">类型</div>
|
||||
<div class="th" style="width: 140px">调度</div>
|
||||
<div
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
class="th"
|
||||
:style="{ width: column.width, flex: column.flex || 'none' }"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div
|
||||
@ -92,6 +93,17 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(["update:visible", "close", "video", "voice", "call", "stationNameClick"]);
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ label: "序号", width: "60px" },
|
||||
{ label: "区县/镇街", width: "140px" },
|
||||
{ label: "姓名", width: "100px" },
|
||||
{ label: "电话", width: "120px" },
|
||||
{ label: "驻地名称", width: "180px" },
|
||||
{ label: "类型", flex: "1" },
|
||||
{ label: "调度", width: "140px" },
|
||||
]);
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([
|
||||
{
|
||||
@ -233,7 +245,8 @@ watch(
|
||||
}
|
||||
|
||||
.tongnan-dialog {
|
||||
width: 1000px;
|
||||
width: 80vw;
|
||||
max-width: 1000px;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
|
||||
@ -12,16 +12,14 @@
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-section">
|
||||
<div class="table-header">
|
||||
<div class="th" style="width: 60px">序号</div>
|
||||
<div class="th" style="width: 100px">区县/镇街</div>
|
||||
<div class="th" style="width: 70px">总人数</div>
|
||||
<div class="th" style="width: 70px">吹哨人</div>
|
||||
<div class="th" style="width: 130px">建设单位包保责任人</div>
|
||||
<div class="th" style="width: 130px">施工单位包保责任人</div>
|
||||
<div class="th" style="width: 120px">驻地包保责任人</div>
|
||||
<div class="th" style="width: 120px">区县级包保责任人</div>
|
||||
<div class="th" style="width: 120px">市级包保责任人</div>
|
||||
<div class="th" style="width: 60px">操作</div>
|
||||
<div
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
class="th"
|
||||
:style="{ width: column.width, flex: column.flex || 'none' }"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div
|
||||
@ -84,6 +82,20 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(["update:visible", "close", "detail"]);
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ label: "序号", width: "60px" },
|
||||
{ label: "区县/镇街", width: "100px" },
|
||||
{ label: "总人数", width: "70px" },
|
||||
{ label: "吹哨人", width: "70px" },
|
||||
{ label: "建设单位包保责任人", width: "130px" },
|
||||
{ label: "施工单位包保责任人", width: "130px" },
|
||||
{ label: "驻地包保责任人", width: "120px" },
|
||||
{ label: "区县级包保责任人", width: "120px" },
|
||||
{ label: "市级包保责任人", width: "120px" },
|
||||
{ label: "操作", width: "60px" },
|
||||
]);
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([
|
||||
{
|
||||
@ -202,7 +214,8 @@ watch(
|
||||
}
|
||||
|
||||
.responsible-dialog {
|
||||
width: 1100px;
|
||||
width: 80vw;
|
||||
max-width: 1100px;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
@ -268,7 +281,7 @@ watch(
|
||||
}
|
||||
|
||||
.table-body {
|
||||
max-height: 320px;
|
||||
max-height: 40vh;
|
||||
overflow-y: auto;
|
||||
|
||||
.table-row {
|
||||
|
||||
@ -12,14 +12,14 @@
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-section">
|
||||
<div class="table-header">
|
||||
<div class="th" style="width: 60px">序号</div>
|
||||
<div class="th" style="width: 100px">区县</div>
|
||||
<div class="th" style="width: 80px">总人数</div>
|
||||
<div class="th" style="width: 140px">交通主管部门责任人</div>
|
||||
<div class="th" style="width: 120px">公路机构责任人</div>
|
||||
<div class="th" style="width: 140px">养护站道班责任人</div>
|
||||
<div class="th" style="width: 80px">护路员</div>
|
||||
<div class="th" style="flex: 1">操作</div>
|
||||
<div
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
class="th"
|
||||
:style="{ width: column.width, flex: column.flex || 'none' }"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div
|
||||
@ -79,6 +79,18 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(["update:visible", "close", "view"]);
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ label: "序号", width: "60px" },
|
||||
{ label: "区县", width: "100px" },
|
||||
{ label: "总人数", width: "80px" },
|
||||
{ label: "交通主管部门责任人", width: "140px" },
|
||||
{ label: "公路机构责任人", width: "120px" },
|
||||
{ label: "养护站道班责任人", width: "140px" },
|
||||
{ label: "护路员", width: "80px" },
|
||||
{ label: "操作", flex: "1" },
|
||||
]);
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([
|
||||
{
|
||||
@ -211,7 +223,8 @@ watch(
|
||||
}
|
||||
|
||||
.team-dialog {
|
||||
width: 900px;
|
||||
width: 80vw;
|
||||
max-width: 900px;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
@ -277,7 +290,7 @@ watch(
|
||||
}
|
||||
|
||||
.table-body {
|
||||
max-height: 320px;
|
||||
max-height: 40vh;
|
||||
overflow-y: auto;
|
||||
|
||||
.table-row {
|
||||
|
||||
@ -8,22 +8,35 @@
|
||||
|
||||
<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="" />
|
||||
<span class="title-text">{{ rescueTeamData.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">
|
||||
<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">
|
||||
<div class="info-item" v-for="(item, index) in rescueTeamData.items" :key="index">
|
||||
<label class="info-label">{{ item.label }}：</label>
|
||||
<span class="info-value">{{ item.value }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-imgs">
|
||||
<img
|
||||
class="dialog-img"
|
||||
v-for="(img, index) in rescueTeamData.imgs"
|
||||
:key="index"
|
||||
:src="img"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -56,7 +69,6 @@ defineProps({
|
||||
],
|
||||
}),
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
// 边坡信息数据
|
||||
@ -123,6 +135,7 @@ const rescueTeamData = {
|
||||
{ label: "地址", value: "重庆市江津区双福工业园区赵坪路 157 号" },
|
||||
{ label: "物资装备", value: "应急物资:8100 件;应急装备:33 台" },
|
||||
],
|
||||
imgs: ["", "", "", "", ""],
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
@ -145,22 +158,30 @@ const closeDialog = () => {
|
||||
@return calc($px / 1920 * 100vw);
|
||||
}
|
||||
.tunnel-info-dialog {
|
||||
max-width: vw(300);
|
||||
width: vw(300);
|
||||
width: 250px;
|
||||
max-height: vw(600);
|
||||
overflow-y: auto;
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
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%;
|
||||
z-index: 1000;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
// 四个角的装饰
|
||||
.corner {
|
||||
position: absolute;
|
||||
width: vw(20);
|
||||
height: vw(20);
|
||||
border: 2px solid #40a9ff;
|
||||
border: 1px solid #40a9ff;
|
||||
pointer-events: none;
|
||||
|
||||
&.corner-top-left {
|
||||
@ -168,7 +189,6 @@ const closeDialog = () => {
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
border-top-left-radius: 6px;
|
||||
}
|
||||
|
||||
&.corner-top-right {
|
||||
@ -176,7 +196,6 @@ const closeDialog = () => {
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
border-top-right-radius: 6px;
|
||||
}
|
||||
|
||||
&.corner-bottom-left {
|
||||
@ -184,7 +203,6 @@ const closeDialog = () => {
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
border-bottom-left-radius: 6px;
|
||||
}
|
||||
|
||||
&.corner-bottom-right {
|
||||
@ -192,7 +210,6 @@ const closeDialog = () => {
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
border-bottom-right-radius: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -264,4 +281,14 @@ const closeDialog = () => {
|
||||
}
|
||||
}
|
||||
}
|
||||
.dialog-imgs {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: vw(6);
|
||||
padding: vw(16) vw(20);
|
||||
.dialog-img {
|
||||
width: vw(75);
|
||||
height: vw(75);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,35 +14,42 @@
|
||||
<div class="filter-row">
|
||||
<div class="filter-item">
|
||||
<el-select v-model="filterForm.warningLevel" placeholder="预警等级" class="filter-select">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="红色预警" value="red" />
|
||||
<el-option label="橙色预警" value="orange" />
|
||||
<el-option label="黄色预警" value="yellow" />
|
||||
<el-option label="蓝色预警" value="blue" />
|
||||
<el-option
|
||||
v-for="option in warningLevelOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="filterForm.region" placeholder="行政区域" class="filter-select">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="万州区" value="wanzhou" />
|
||||
<el-option label="涪陵区" value="fuling" />
|
||||
<el-option label="万盛区" value="wansheng" />
|
||||
<el-option label="长寿区" value="changshou" />
|
||||
<el-option label="城口区" value="chengkou" />
|
||||
<el-option
|
||||
v-for="option in regionOptionsWithAll"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="filterForm.isEnded" placeholder="是否结束" class="filter-select">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="是" value="yes" />
|
||||
<el-option label="否" value="no" />
|
||||
<el-option
|
||||
v-for="option in isEndedOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<el-select v-model="filterForm.isResponded" placeholder="是否回应" class="filter-select">
|
||||
<el-option label="全部" value="" />
|
||||
<el-option label="是" value="yes" />
|
||||
<el-option label="否" value="no" />
|
||||
<el-option
|
||||
v-for="option in isRespondedOptions"
|
||||
:key="option.value"
|
||||
:label="option.label"
|
||||
:value="option.value"
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
@ -57,16 +64,14 @@
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-section">
|
||||
<div class="table-header">
|
||||
<div class="th" style="width: 60px">序号</div>
|
||||
<div class="th" style="width: 100px">预警等级</div>
|
||||
<div class="th" style="width: 100px">行政区域</div>
|
||||
<div class="th" style="width: 160px">预警时间</div>
|
||||
<div class="th" style="width: 160px">结束时间</div>
|
||||
<div class="th" style="width: 100px">影响点数量</div>
|
||||
<div class="th clickable" style="width: 80px">已叫应</div>
|
||||
<div class="th" style="width: 80px">已回应</div>
|
||||
<div class="th" style="width: 80px">未回应</div>
|
||||
<div class="th" style="width: 80px">已催告</div>
|
||||
<div
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
class="th"
|
||||
:style="{ width: column.width, flex: column.flex || 'none' }"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div
|
||||
@ -119,6 +124,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { Close, Search, ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
|
||||
import { warningLevelOptions, regionOptionsWithAll, isEndedOptions, isRespondedOptions } from "./index.js";
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
@ -137,6 +143,20 @@ const filterForm = ref({
|
||||
isResponded: "",
|
||||
});
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ label: "序号", width: "60px" },
|
||||
{ label: "预警等级", width: "100px" },
|
||||
{ label: "行政区域", width: "100px" },
|
||||
{ label: "预警时间", width: "160px" },
|
||||
{ label: "结束时间", width: "160px" },
|
||||
{ label: "影响点数量", width: "100px" },
|
||||
{ label: "已叫应", width: "80px" },
|
||||
{ label: "已回应", width: "80px" },
|
||||
{ label: "未回应", width: "80px" },
|
||||
{ label: "已催告", width: "80px" },
|
||||
]);
|
||||
|
||||
// 表格数据
|
||||
const tableData = ref([
|
||||
{
|
||||
@ -204,6 +224,45 @@ const tableData = ref([
|
||||
notResponded: 0,
|
||||
urged: 15,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
warningLevel: "红色预警",
|
||||
levelClass: "level-red",
|
||||
region: "城口区",
|
||||
warningTime: "2025-08-11 04:53:42",
|
||||
endTime: "2025-08-11 04:53:42",
|
||||
impactPoints: 0,
|
||||
called: 0,
|
||||
responded: 0,
|
||||
notResponded: 0,
|
||||
urged: 15,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
warningLevel: "红色预警",
|
||||
levelClass: "level-red",
|
||||
region: "城口区",
|
||||
warningTime: "2025-08-11 04:53:42",
|
||||
endTime: "2025-08-11 04:53:42",
|
||||
impactPoints: 0,
|
||||
called: 0,
|
||||
responded: 0,
|
||||
notResponded: 0,
|
||||
urged: 15,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
warningLevel: "红色预警",
|
||||
levelClass: "level-red",
|
||||
region: "城口区",
|
||||
warningTime: "2025-08-11 04:53:42",
|
||||
endTime: "2025-08-11 04:53:42",
|
||||
impactPoints: 0,
|
||||
called: 0,
|
||||
responded: 0,
|
||||
notResponded: 0,
|
||||
urged: 15,
|
||||
},
|
||||
]);
|
||||
|
||||
// 分页
|
||||
@ -305,7 +364,8 @@ watch(
|
||||
}
|
||||
|
||||
.warning-dialog {
|
||||
width: 1100px;
|
||||
width: 80vw;
|
||||
max-width: 1000px;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
@ -363,7 +423,7 @@ watch(
|
||||
|
||||
.filter-item {
|
||||
.filter-select {
|
||||
width: 140px;
|
||||
width: 120px;
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: rgba(30, 70, 120, 0.4);
|
||||
|
||||
@ -45,19 +45,35 @@
|
||||
/>
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="filter-item">
|
||||
<span class="filter-label">时间范围</span>
|
||||
<el-date-picker
|
||||
v-model="filterForm.dateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
class="date-range-picker"
|
||||
width="210px"
|
||||
style="width: 210px"
|
||||
clearable
|
||||
value-format="YYYY-MM-DD"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 数据表格 -->
|
||||
<div class="table-section">
|
||||
<div class="table-header">
|
||||
<div class="th" style="width: 50px">序号</div>
|
||||
<div class="th" style="width: 100px">预警等级</div>
|
||||
<div class="th" style="width: 100px">气象类型</div>
|
||||
<div class="th" style="width: 100px">行政区域</div>
|
||||
<div class="th" style="width: 160px">预警时间</div>
|
||||
<div class="th" style="width: 160px">结束时间</div>
|
||||
<div class="th" style="flex: 1">影响点数量</div>
|
||||
<div
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
class="th"
|
||||
:style="{ width: column.width, flex: column.flex || 'none' }"
|
||||
>
|
||||
{{ column.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-body">
|
||||
<div
|
||||
@ -108,6 +124,7 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { Close } from "@element-plus/icons-vue";
|
||||
import { warningLevelOptions, regionOptions, isEndedOptions } from "./index.js";
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
@ -123,28 +140,27 @@ const filterForm = ref({
|
||||
warningLevel: "",
|
||||
region: "",
|
||||
isEnded: "",
|
||||
dateRange: [],
|
||||
});
|
||||
|
||||
// 预警等级选项
|
||||
const warningLevelOptions = ref([
|
||||
{ label: "红色预警", value: "红色预警" },
|
||||
{ label: "橙色预警", value: "橙色预警" },
|
||||
{ label: "黄色预警", value: "黄色预警" },
|
||||
{ label: "蓝色预警", value: "蓝色预警" },
|
||||
]);
|
||||
// 已从 index.js 导入
|
||||
|
||||
// 行政区域选项
|
||||
const regionOptions = ref([
|
||||
{ label: "重庆市", value: "重庆市" },
|
||||
{ label: "万州区", value: "万州区" },
|
||||
{ label: "沙坪坝区", value: "沙坪坝区" },
|
||||
{ label: "渝中区", value: "渝中区" },
|
||||
]);
|
||||
// 已从 index.js 导入
|
||||
|
||||
// 是否结束选项
|
||||
const isEndedOptions = ref([
|
||||
{ label: "是", value: "是" },
|
||||
{ label: "否", value: "否" },
|
||||
// 已从 index.js 导入
|
||||
|
||||
// 表格列配置
|
||||
const tableColumns = ref([
|
||||
{ label: "序号", width: "50px" },
|
||||
{ label: "预警等级", width: "100px" },
|
||||
{ label: "气象类型", width: "100px" },
|
||||
{ label: "行政区域", width: "100px" },
|
||||
{ label: "预警时间", width: "160px" },
|
||||
{ label: "结束时间", width: "160px" },
|
||||
{ label: "影响点数量", flex: "1" },
|
||||
]);
|
||||
|
||||
// 表格数据
|
||||
@ -290,7 +306,8 @@ watch(
|
||||
}
|
||||
|
||||
.warning-dialog {
|
||||
width: 950px;
|
||||
width: 80vw;
|
||||
max-width: 900px;
|
||||
background: linear-gradient(135deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 30, 60, 0.98) 100%);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
@ -341,7 +358,8 @@ watch(
|
||||
|
||||
.filter-row {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.filter-item {
|
||||
@ -363,6 +381,7 @@ watch(
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
box-shadow: none;
|
||||
border-radius: 4px;
|
||||
width: 210px !important;
|
||||
|
||||
.el-input__inner {
|
||||
color: #fff;
|
||||
@ -380,6 +399,47 @@ watch(
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date-range-picker {
|
||||
:deep(.el-input__wrapper) {
|
||||
background-color: rgba(30, 70, 120, 0.4);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
box-shadow: none;
|
||||
border-radius: 4px;
|
||||
width: 210px !important;
|
||||
|
||||
.el-input__inner {
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
background: transparent;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.el-input__suffix {
|
||||
.el-icon {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-range-input) {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
font-size: 13px;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-range-separator) {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -555,3 +615,62 @@ watch(
|
||||
background: linear-gradient(180deg, #69c0ff 0%, #40a9ff 100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
// 日期选择器弹出面板深色主题
|
||||
.el-picker-panel {
|
||||
background: rgba(20, 50, 90, 0.98) !important;
|
||||
border: 1px solid rgba(64, 169, 255, 0.3) !important;
|
||||
|
||||
.el-picker-panel__content {
|
||||
color: #fff;
|
||||
|
||||
.el-date-table th {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
border-bottom-color: rgba(64, 169, 255, 0.3);
|
||||
}
|
||||
|
||||
.el-date-table td {
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
|
||||
&.selected .el-date-table-cell {
|
||||
background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
|
||||
}
|
||||
|
||||
&.today span {
|
||||
color: #40a9ff;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.in-range,
|
||||
&.start-date,
|
||||
&.end-date {
|
||||
background: rgba(64, 169, 255, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-picker-panel__footer {
|
||||
border-top: 1px solid rgba(64, 169, 255, 0.3);
|
||||
|
||||
.el-button {
|
||||
background: rgba(30, 70, 120, 0.4);
|
||||
border-color: rgba(64, 169, 255, 0.3);
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background: rgba(64, 169, 255, 0.3);
|
||||
}
|
||||
}
|
||||
|
||||
.el-button--primary {
|
||||
background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #69c0ff 0%, #40a9ff 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -7,7 +7,11 @@
|
||||
alt=""
|
||||
/>
|
||||
<div class="title_img_box">
|
||||
<img class="title_img1" src="../../assets/RiskWarning_img/位图@2x.png" alt="" />
|
||||
<img
|
||||
class="title_img1"
|
||||
src="../../assets/RiskWarning_img/位图@2x.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="title_img2"
|
||||
src="../../assets/RiskWarning_img/渝路畅行-风险预警一键响应@2x.png"
|
||||
@ -44,7 +48,9 @@
|
||||
|
||||
<div
|
||||
class="center-info-card"
|
||||
v-if="showCenterCard.type === 'second' || showCenterCard.type === 'third'"
|
||||
v-if="
|
||||
showCenterCard.type === 'second' || showCenterCard.type === 'third'
|
||||
"
|
||||
>
|
||||
<div
|
||||
class="card-title"
|
||||
@ -52,8 +58,8 @@
|
||||
showCenterCard.type === 'second'
|
||||
? openDialog('tongnanTeam')
|
||||
: showCenterCard.type === 'third'
|
||||
? openDialog('responseSituation')
|
||||
: ''
|
||||
? openDialog('responseSituation')
|
||||
: ''
|
||||
"
|
||||
>
|
||||
潼南
|
||||
@ -90,7 +96,6 @@
|
||||
@openClearanceSituation="openDialog('clearanceSituation')"
|
||||
@openControlSituation="openDialog('controlSituation')"
|
||||
></right>
|
||||
|
||||
</div>
|
||||
<!-- 地图中心 -->
|
||||
<div class="center">
|
||||
@ -245,8 +250,8 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import useMapStore from '@/map/stores/mapStore'
|
||||
import { useMapBase } from '../cockpit/composables/useMapBase'
|
||||
import useMapStore from "@/map/stores/mapStore";
|
||||
import { useMapBase } from "../cockpit/composables/useMapBase";
|
||||
import left from "./left.vue";
|
||||
import right from "./right.vue";
|
||||
import bottom from "./bottom.vue";
|
||||
@ -296,7 +301,7 @@ const dialogVisible = ref({
|
||||
dispatchDistrict: false,
|
||||
tongnanTeam: false,
|
||||
warningSituation: false,
|
||||
tunnelInfo: true,
|
||||
tunnelInfo: false,
|
||||
});
|
||||
|
||||
// 打开弹窗
|
||||
@ -307,7 +312,7 @@ const openDialog = (dialogName) => {
|
||||
// 关闭弹窗
|
||||
const closeDialog = (dialogName) => {
|
||||
// 关闭弹窗时，重置弹窗数据
|
||||
console.log('关闭弹窗', dialogName)
|
||||
console.log("关闭弹窗", dialogName);
|
||||
dialogVisible.value[dialogName] = false;
|
||||
};
|
||||
|
||||
@ -330,12 +335,12 @@ const showCenterCard = ref(false);
|
||||
|
||||
// ==================== 地图状态管理 ====================
|
||||
|
||||
const mapStore = useMapStore()
|
||||
const mapStore = useMapStore();
|
||||
|
||||
/**
|
||||
* 加载地图的业务底图与聚焦中心点
|
||||
*/
|
||||
const mapBase = useMapBase(mapStore)
|
||||
const mapBase = useMapBase(mapStore);
|
||||
|
||||
// ==================== 生命周期 ====================
|
||||
|
||||
@ -344,8 +349,8 @@ const mapBase = useMapBase(mapStore)
|
||||
*/
|
||||
onMounted(() => {
|
||||
// 加载地图业务底图 并 聚焦中心点
|
||||
mapBase.loadBaseData()
|
||||
})
|
||||
mapBase.loadBaseData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -369,7 +374,6 @@ onMounted(() => {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: vw(100);
|
||||
min-height: 70px;
|
||||
z-index: 100;
|
||||
|
||||
.title_bg {
|
||||
@ -410,32 +414,35 @@ onMounted(() => {
|
||||
.left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: vw(100);
|
||||
top: vw(90);
|
||||
width: 25%;
|
||||
height: calc(100% - #{vw(100)});
|
||||
height: calc(100% - #{vw(90)});
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: vw(100);
|
||||
top: vw(90);
|
||||
width: 25%;
|
||||
height: calc(100% - #{vw(100)});
|
||||
height: calc(100% - #{vw(90)});
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
left: 30%;
|
||||
width: 40%;
|
||||
height: 50%;
|
||||
bottom: 5px;
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
height: 43%;
|
||||
}
|
||||
|
||||
.top {
|
||||
position: absolute;
|
||||
top: vw(120);
|
||||
left: 30%;
|
||||
width: 40%;
|
||||
top: vw(100);
|
||||
left: 25%;
|
||||
width: 50%;
|
||||
z-index: 2;
|
||||
// height: 15%;
|
||||
// background-color: #15293B;
|
||||
}
|
||||
@ -446,7 +453,7 @@ onMounted(() => {
|
||||
// left: 25%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 地图底层 - 填满整个容器 */
|
||||
@ -464,17 +471,16 @@ onMounted(() => {
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
/* 不阻挡交互 */
|
||||
background: url(../../assets/RiskWarning_img/遮罩层.png) no-repeat center/cover;
|
||||
background: url(../../assets/RiskWarning_img/遮罩层.png) no-repeat
|
||||
center/cover;
|
||||
}
|
||||
|
||||
// 四个角的装饰
|
||||
.corner {
|
||||
position: absolute;
|
||||
width: vw(30);
|
||||
height: vw(30);
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
border: 2px solid #40a9ff;
|
||||
width: vw(20);
|
||||
height: vw(20);
|
||||
border: 1px solid #40a9ff;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
|
||||
@ -483,7 +489,6 @@ onMounted(() => {
|
||||
left: vw(10);
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
border-top-left-radius: 4px;
|
||||
}
|
||||
|
||||
&.corner-top-right {
|
||||
@ -491,7 +496,6 @@ onMounted(() => {
|
||||
right: vw(10);
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
border-top-right-radius: 4px;
|
||||
}
|
||||
|
||||
&.corner-bottom-left {
|
||||
@ -499,7 +503,6 @@ onMounted(() => {
|
||||
left: vw(10);
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
&.corner-bottom-right {
|
||||
@ -507,17 +510,16 @@ onMounted(() => {
|
||||
right: vw(10);
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.center-info-card-container {
|
||||
position: absolute;
|
||||
top: 30%;
|
||||
left: 35%;
|
||||
left: 32%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: vw(250);
|
||||
min-width: 180px;
|
||||
width: vw(200);
|
||||
min-width: 200px;
|
||||
z-index: 200;
|
||||
}
|
||||
// 中心数据展示卡片
|
||||
@ -525,7 +527,9 @@ onMounted(() => {
|
||||
background: rgba(64, 169, 255, 0.2);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
z-index: 50;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 4px 20px rgba(0, 0, 0, 0.3),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
margin-bottom: vw(10);
|
||||
@ -541,7 +545,7 @@ onMounted(() => {
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin-bottom: vw(12);
|
||||
background: rgba(64, 169, 255, 0.8);
|
||||
background: rgba(64, 169, 255, 0.8);
|
||||
padding: vw(16) vw(20);
|
||||
border-bottom: 1px solid rgba(64, 169, 255, 0.1);
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="left-panel">
|
||||
<!-- 智能研判头部 -->
|
||||
<SectionHeader>
|
||||
<SectionHeader title="智能研判">
|
||||
<template #left>
|
||||
<div class="filter-header">
|
||||
<span>智能研判</span>
|
||||
<span class="title">智能研判</span>
|
||||
<img
|
||||
class="filter-icon-ai"
|
||||
src="../../assets/RiskWarning_img/AI1@2x.png"
|
||||
@ -32,8 +32,8 @@
|
||||
alt=""
|
||||
/>
|
||||
<div class="card-info">
|
||||
<div class="card-num mt_10">{{ item.value }}</div>
|
||||
<div class="card-label mb_10">{{ item.label }}</div>
|
||||
<div class="card-num mt_5">{{ item.value }}</div>
|
||||
<div class="card-label mb_5">{{ item.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -86,7 +86,12 @@
|
||||
<div class="district-table-section">
|
||||
<el-table
|
||||
:data="districtData"
|
||||
style="width: 100%; background: transparent; font-size: 12px"
|
||||
style="
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
font-size: 12px;
|
||||
height: 150px;
|
||||
"
|
||||
:header-cell-style="headerCellStyle"
|
||||
:cell-style="cellStyle"
|
||||
size="small"
|
||||
@ -172,7 +177,8 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import request from "../../../../shared/api/request";
|
||||
|
||||
import SectionHeader from "./component/sectionHeader.vue";
|
||||
|
||||
@ -236,27 +242,49 @@ import imgHelp from "../../assets/RiskWarning_img/响应图标5@2x.png";
|
||||
import imgCheck from "../../assets/RiskWarning_img/抽查人数icon@2x.png";
|
||||
|
||||
// 气象预警数据
|
||||
const weatherWarningData = [
|
||||
{ label: "红色预警", value: '8/13', class: "red" },
|
||||
{ label: "橙色预警", value: '12/14', class: "orange" },
|
||||
{ label: "黄色预警", value: '27/15', class: "yellow" },
|
||||
{ label: "蓝色预警", value: '15/15', class: "blue" },
|
||||
];
|
||||
const weatherWarningData = ref([
|
||||
{ label: "红色预警", value: "8/13", class: "red" },
|
||||
{ label: "橙色预警", value: "12/14", class: "orange" },
|
||||
{ label: "黄色预警", value: "27/15", class: "yellow" },
|
||||
{ label: "蓝色预警", value: "15/15", class: "blue" },
|
||||
]);
|
||||
|
||||
// 影响点数据
|
||||
const impactData = [
|
||||
const impactData = ref([
|
||||
{ label: "路段", value: 830 },
|
||||
{ label: "桥梁", value: 312 },
|
||||
{ label: "隧道", value: 405 },
|
||||
{ label: "边坡", value: 634 },
|
||||
{ label: "项目", value: 523 },
|
||||
];
|
||||
]);
|
||||
|
||||
// 日期范围选择器
|
||||
const dateRange = ref([]);
|
||||
|
||||
// 加载气象预警和影响点数据
|
||||
const loadData = async () => {
|
||||
try {
|
||||
const response = await request.get(
|
||||
"/snow-ops-platform/weatherWarning/statistics",
|
||||
);
|
||||
if (response.data) {
|
||||
const data = response.data;
|
||||
if (data.weatherWarning) {
|
||||
weatherWarningData.value = data.weatherWarning;
|
||||
}
|
||||
if (data.impactData) {
|
||||
impactData.value = data.impactData;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("加载数据失败:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// 计算最大值用于动态计算高度
|
||||
const maxValue = Math.max(...impactData.map((item) => item.value));
|
||||
const maxValue = computed(() => {
|
||||
return Math.max(...impactData.value.map((item) => item.value));
|
||||
});
|
||||
|
||||
// 计算每个柱子的高度百分比
|
||||
const getBarHeight = (value) => {
|
||||
@ -353,21 +381,27 @@ const cellStyle = () => ({
|
||||
textAlign: "center",
|
||||
lineHeight: "1.2",
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.filter-header {
|
||||
margin-left: 35px;
|
||||
margin-left: 2.667vw;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: vw(8);
|
||||
color: #fff;
|
||||
font-size: vw(24);
|
||||
font-weight: bold;
|
||||
.title {
|
||||
font-size: 1vw;
|
||||
}
|
||||
}
|
||||
.filter-icon-ai {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
margin-left: 10px;
|
||||
}
|
||||
// 视频屏幕自适应 - 基于视口宽度动态调整
|
||||
@ -400,7 +434,6 @@ const cellStyle = () => ({
|
||||
|
||||
.section-header {
|
||||
height: vw(50);
|
||||
min-height: 40px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -415,7 +448,6 @@ const cellStyle = () => ({
|
||||
gap: vw(8);
|
||||
margin-left: vw(35);
|
||||
color: #fff;
|
||||
font-size: vw(24);
|
||||
font-weight: bold;
|
||||
|
||||
.icon-back {
|
||||
@ -423,7 +455,7 @@ const cellStyle = () => ({
|
||||
height: vw(20);
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
|
||||
background: linear-gradient(135deg, #18f2f9 0%, #1890ff 100%);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -432,15 +464,8 @@ const cellStyle = () => ({
|
||||
&::before {
|
||||
content: "←";
|
||||
color: #fff;
|
||||
font-size: vw(12);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: vw(12);
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.header-date {
|
||||
@ -463,18 +488,16 @@ const cellStyle = () => ({
|
||||
.warning-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: vw(10);
|
||||
display: flex;
|
||||
gap: vw(5);
|
||||
|
||||
.warning-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: vw(10);
|
||||
flex: 1;
|
||||
// padding: 12px;
|
||||
background: rgba(64, 169, 255, 0.1);
|
||||
border: 1px solid rgba(64, 169, 255, 0.2);
|
||||
border-radius: 6px;
|
||||
|
||||
.card-icon {
|
||||
width: 100%;
|
||||
@ -493,7 +516,7 @@ const cellStyle = () => ({
|
||||
.card-info {
|
||||
flex: 1;
|
||||
.card-num {
|
||||
font-size: vw(20);
|
||||
font-size: vw(18);
|
||||
font-weight: bold;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
@ -514,7 +537,7 @@ const cellStyle = () => ({
|
||||
color: #ffc53d;
|
||||
}
|
||||
&.blue .card-num {
|
||||
color: #40a9ff;
|
||||
color: #379afd;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -537,7 +560,7 @@ const cellStyle = () => ({
|
||||
|
||||
.impact-detail {
|
||||
font-size: vw(14);
|
||||
color: #40a9ff;
|
||||
color: #18f2f9;
|
||||
cursor: pointer;
|
||||
|
||||
&.clickable {
|
||||
@ -553,8 +576,7 @@ const cellStyle = () => ({
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
height: vw(120);
|
||||
height: 70px;
|
||||
height: vw(100);
|
||||
display: flex;
|
||||
// padding: 10px 0 30px 40px;
|
||||
|
||||
@ -608,7 +630,7 @@ const cellStyle = () => ({
|
||||
background: rgba(64, 169, 255, 0.15);
|
||||
|
||||
.bar-value {
|
||||
color: #40a9ff;
|
||||
color: #18f2f9;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
@ -639,7 +661,7 @@ const cellStyle = () => ({
|
||||
min-width: 16px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
#40a9ff 0%,
|
||||
#18f2f9 0%,
|
||||
rgba(64, 169, 255, 0.3) 100%
|
||||
);
|
||||
border-radius: 2px 2px 0 0;
|
||||
@ -688,19 +710,18 @@ const cellStyle = () => ({
|
||||
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;
|
||||
border: 1px solid #1d4c60;
|
||||
box-shadow: inset 0px 0px 8px 0px rgba(55, 155, 255, 0.2);
|
||||
|
||||
.card-label {
|
||||
font-size: vw(14);
|
||||
font-size: vw(18);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: vw(24);
|
||||
font-size: vw(22);
|
||||
font-weight: bold;
|
||||
color: #40a9ff;
|
||||
color: #18f2f9;
|
||||
text-shadow: 0 0 10px rgba(64, 169, 255, 0.5);
|
||||
}
|
||||
}
|
||||
@ -769,6 +790,7 @@ const cellStyle = () => ({
|
||||
margin-top: vw(20);
|
||||
|
||||
.section-header {
|
||||
height: vw(50);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@ -788,7 +810,7 @@ const cellStyle = () => ({
|
||||
height: vw(20);
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
|
||||
background: linear-gradient(135deg, #18f2f9 0%, #1890ff 100%);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -800,12 +822,6 @@ const cellStyle = () => ({
|
||||
font-size: vw(12);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: vw(14);
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.header-filters {
|
||||
@ -815,17 +831,11 @@ const cellStyle = () => ({
|
||||
font-size: vw(10);
|
||||
|
||||
.filter-item {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
padding: vw(3) vw(8);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
padding: vw(8) vw(8);
|
||||
background: #183c67;
|
||||
box-shadow: inset 0px 0px 8px 0px #4fecff;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background: rgba(64, 169, 255, 0.2);
|
||||
color: #40a9ff;
|
||||
border-color: rgba(64, 169, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-separator {
|
||||
@ -838,16 +848,18 @@ const cellStyle = () => ({
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: vw(10);
|
||||
margin-bottom: vw(15);
|
||||
// gap: vw(10);
|
||||
background: rgba(64, 169, 255, 0.1);
|
||||
border: 1px solid rgba(64, 169, 255, 0.2);
|
||||
|
||||
margin-bottom: vw(10);
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: vw(8);
|
||||
// gap: vw(8);
|
||||
padding: vw(10);
|
||||
background: rgba(64, 169, 255, 0.08);
|
||||
border-radius: 6px;
|
||||
// background: rgba(64, 169, 255, 0.08);
|
||||
|
||||
.stat-icon {
|
||||
width: 100%;
|
||||
@ -882,7 +894,7 @@ const cellStyle = () => ({
|
||||
.stat-num {
|
||||
font-size: vw(24);
|
||||
font-weight: bold;
|
||||
color: #40a9ff;
|
||||
color: #18f2f9;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
@ -898,7 +910,7 @@ const cellStyle = () => ({
|
||||
|
||||
&:hover {
|
||||
background: rgba(64, 169, 255, 0.2);
|
||||
transform: translateY(-2px);
|
||||
// transform: translateY(-2px);
|
||||
|
||||
.stat-num {
|
||||
color: #69c0ff;
|
||||
@ -919,7 +931,6 @@ const cellStyle = () => ({
|
||||
padding: vw(12);
|
||||
background: rgba(64, 169, 255, 0.1);
|
||||
border: 1px solid rgba(64, 169, 255, 0.2);
|
||||
border-radius: 6px;
|
||||
text-align: center;
|
||||
|
||||
&.clickable {
|
||||
@ -940,7 +951,7 @@ const cellStyle = () => ({
|
||||
.card-num {
|
||||
font-size: vw(20);
|
||||
font-weight: bold;
|
||||
color: #40a9ff;
|
||||
color: #18f2f9;
|
||||
margin-bottom: vw(6);
|
||||
|
||||
.unit {
|
||||
@ -962,11 +973,12 @@ const cellStyle = () => ({
|
||||
|
||||
.date-range-wrapper {
|
||||
:deep(.el-date-editor) {
|
||||
width: vw(200);
|
||||
min-width: 140px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
border-radius: 0px !important;
|
||||
height: 3.1em !important;
|
||||
}
|
||||
:deep(.el-date-editor) {
|
||||
width: 200px;
|
||||
max-width: vw(200);
|
||||
background: #183c67;
|
||||
box-shadow: inset 0px 0px 8px 0px #4fecff;
|
||||
|
||||
|
||||
@ -26,8 +26,13 @@
|
||||
|
||||
<!-- 管控路段数 -->
|
||||
<div class="control-section">
|
||||
<div class="control-title">
|
||||
管控路段数 <span class="control-num">2</span>
|
||||
<div class="control-title display jc_sb ai_center">
|
||||
<div class="f1">
|
||||
管控路段数 <span class="control-num">2</span>
|
||||
</div>
|
||||
<div class="f1">
|
||||
管控项目 <span class="control-num">2</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
<div class="control-grid">
|
||||
@ -65,9 +70,15 @@
|
||||
|
||||
<!-- 巡查公路里程 -->
|
||||
<div class="patrol-section">
|
||||
<div class="patrol-header">
|
||||
<span class="patrol-title">巡查公路里程</span>
|
||||
<span class="patrol-mileage">234882km</span>
|
||||
<div class="patrol-header display jc_sb ai_center">
|
||||
<div>
|
||||
<span class="patrol-title">巡查公路里程</span>
|
||||
<span class="patrol-mileage ml_10">234882km</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="patrol-title">巡查项目数</span>
|
||||
<span class="patrol-mileage ml_10">6处</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="patrol-grid">
|
||||
<div
|
||||
@ -212,8 +223,8 @@ import icon3 from "../../assets/RiskWarning_img/icon3@2x.png";
|
||||
import icon4 from "../../assets/RiskWarning_img/icon4@2x.png";
|
||||
|
||||
import icon11 from "../../assets/RiskWarning_img/icon-1@2x.png";
|
||||
import icon12 from "../../assets/RiskWarning_img/icon-1@2x.png";
|
||||
import icon13 from "../../assets/RiskWarning_img/icon-1@2x.png";
|
||||
import icon12 from "../../assets/RiskWarning_img/icon-2@2x.png";
|
||||
import icon13 from "../../assets/RiskWarning_img/icon-3@2x.png";
|
||||
|
||||
import icon51 from "../../assets/RiskWarning_img/编组5@2x.png";
|
||||
import icon52 from "../../assets/RiskWarning_img/编组22@2x.png";
|
||||
@ -277,7 +288,7 @@ const patrolData = [
|
||||
{ label: "巡查桥梁数", value: "1" },
|
||||
{ label: "巡查边坡数", value: "6" },
|
||||
{ label: "巡查隧道数", value: "10" },
|
||||
{ label: "巡查项目数", value: "6" },
|
||||
{ label: "发现隐患数", value: "6" },
|
||||
];
|
||||
|
||||
// 抢险投入数据
|
||||
@ -373,19 +384,20 @@ const majorEvent = "0";
|
||||
justify-content: space-between;
|
||||
background-image: url("../../assets/RiskWarning_img/标题bg@2x.png");
|
||||
align-items: center;
|
||||
margin-bottom: vw(15);
|
||||
margin-bottom: vw(8);
|
||||
height: vw(50);
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: vw(8);
|
||||
gap: vw(6);
|
||||
|
||||
.icon-back {
|
||||
width: vw(20);
|
||||
height: vw(20);
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
|
||||
width: vw(16);
|
||||
height: vw(16);
|
||||
min-width: 14px;
|
||||
min-height: 14px;
|
||||
background: linear-gradient(135deg, #18F2F9 0%, #1890ff 100%);
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -394,12 +406,12 @@ const majorEvent = "0";
|
||||
&::before {
|
||||
content: "←";
|
||||
color: #fff;
|
||||
font-size: vw(12);
|
||||
font-size: vw(10);
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: vw(12);
|
||||
font-size: vw(14);
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
@ -410,34 +422,34 @@ const majorEvent = "0";
|
||||
.resource-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: vw(10);
|
||||
margin-bottom: vw(10);
|
||||
gap: vw(6);
|
||||
margin-bottom: vw(6);
|
||||
|
||||
.resource-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: vw(10);
|
||||
padding: vw(8) vw(12);
|
||||
background: linear-gradient(270deg, rgba(18, 84, 97, 0) 0%, #204a55 100%);
|
||||
gap: vw(6);
|
||||
padding: vw(4) vw(8);
|
||||
background: linear-gradient(270deg, rgba(18, 52, 97, 0) 0%, #203555 100%);
|
||||
border: 2px solid transparent;
|
||||
border-image: linear-gradient(
|
||||
270deg,
|
||||
rgba(80, 201, 191, 0),
|
||||
rgba(39, 135, 153, 1)
|
||||
rgba(80, 145, 201, 0),
|
||||
rgba(39, 77, 153, 1)
|
||||
)
|
||||
2 2;
|
||||
border-radius: 6px;
|
||||
border-right: 0px;
|
||||
|
||||
.resource-icon {
|
||||
width: vw(32);
|
||||
height: vw(32);
|
||||
min-width: 20px;
|
||||
min-height: 20px;
|
||||
width: vw(24);
|
||||
height: vw(24);
|
||||
min-width: 16px;
|
||||
min-height: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: vw(20);
|
||||
font-size: vw(18);
|
||||
|
||||
&.icon-team::before {
|
||||
content: "👷";
|
||||
@ -462,13 +474,13 @@ const majorEvent = "0";
|
||||
width: 48%;
|
||||
font-size: vw(12);
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-bottom: vw(4);
|
||||
margin-bottom: vw(2);
|
||||
}
|
||||
|
||||
.resource-value {
|
||||
font-size: vw(18);
|
||||
font-size: vw(16);
|
||||
font-weight: bold;
|
||||
color: #40a9ff;
|
||||
color: #18F2F9;
|
||||
|
||||
.unit {
|
||||
font-size: vw(12);
|
||||
@ -486,14 +498,15 @@ const majorEvent = "0";
|
||||
margin-bottom: vw(10);
|
||||
|
||||
.control-title {
|
||||
font-size: vw(14);
|
||||
font-size: vw(16);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-bottom: vw(10);
|
||||
font-weight: 600;
|
||||
|
||||
.control-num {
|
||||
font-size: vw(16);
|
||||
|
||||
color: #40a9ff;
|
||||
color: #18F2F9;
|
||||
font-weight: bold;
|
||||
margin-left: vw(5);
|
||||
}
|
||||
@ -503,13 +516,13 @@ const majorEvent = "0";
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
background: rgba(64, 169, 255, 0.1);
|
||||
background: rgba(62, 106, 172, 0.36);
|
||||
box-shadow: inset 0px 0px 8px 0px #379bff;
|
||||
gap: vw(8);
|
||||
|
||||
.control-item {
|
||||
text-align: center;
|
||||
padding: vw(6) vw(5);
|
||||
padding: vw(5) vw(5);
|
||||
// background: rgba(64, 169, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
|
||||
@ -520,18 +533,14 @@ const majorEvent = "0";
|
||||
&:hover {
|
||||
background-color: rgba(64, 169, 255, 0.15);
|
||||
|
||||
.control-value {
|
||||
color: #69c0ff;
|
||||
text-shadow: 0 0 8px rgba(105, 192, 255, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.control-value {
|
||||
font-size: vw(18);
|
||||
font-weight: bold;
|
||||
color: #40a9ff;
|
||||
margin-bottom: vw(4);
|
||||
color: #18F2F9;
|
||||
// margin-bottom: vw(4);
|
||||
}
|
||||
|
||||
.control-label {
|
||||
@ -553,14 +562,14 @@ const majorEvent = "0";
|
||||
margin-bottom: vw(10);
|
||||
|
||||
.patrol-title {
|
||||
font-size: vw(14);
|
||||
font-size: vw(16);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
.patrol-mileage {
|
||||
font-size: vw(16);
|
||||
font-weight: bold;
|
||||
color: #40a9ff;
|
||||
color: #4FECFF;
|
||||
}
|
||||
}
|
||||
|
||||
@ -581,7 +590,7 @@ const majorEvent = "0";
|
||||
.patrol-value {
|
||||
font-size: vw(18);
|
||||
font-weight: bold;
|
||||
color: #40a9ff;
|
||||
color: #4FECFF;
|
||||
margin-bottom: vw(4);
|
||||
text-align: left;
|
||||
margin-left: vw(5);
|
||||
@ -598,7 +607,7 @@ const majorEvent = "0";
|
||||
// 抢险投入情况
|
||||
.rescue-section {
|
||||
.rescue-title {
|
||||
font-size: vw(14);
|
||||
font-size: vw(16);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-bottom: vw(10);
|
||||
}
|
||||
@ -621,10 +630,8 @@ const majorEvent = "0";
|
||||
background-position: right;
|
||||
|
||||
.rescue-icon {
|
||||
width: vw(36);
|
||||
height: vw(36);
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
width: vw(40);
|
||||
height: vw(40);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@ -646,7 +653,7 @@ const majorEvent = "0";
|
||||
.rescue-value {
|
||||
font-size: vw(18);
|
||||
font-weight: bold;
|
||||
color: #40a9ff;
|
||||
color: #fff;
|
||||
margin-bottom: vw(4);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -670,7 +677,7 @@ const majorEvent = "0";
|
||||
|
||||
// 受灾情况样式
|
||||
.disaster-section {
|
||||
margin-top: vw(15);
|
||||
margin-top: vw(10);
|
||||
|
||||
.block-section {
|
||||
margin-bottom: vw(10);
|
||||
@ -689,7 +696,7 @@ const majorEvent = "0";
|
||||
}
|
||||
|
||||
.block-title {
|
||||
font-size: vw(14);
|
||||
font-size: vw(16);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: vw(10);
|
||||
}
|
||||
@ -713,7 +720,7 @@ const majorEvent = "0";
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
transparent 0%,
|
||||
#40a9ff 50%,
|
||||
#18F2F9 50%,
|
||||
transparent 100%
|
||||
);
|
||||
// margin: 0 auto;
|
||||
@ -734,7 +741,7 @@ const majorEvent = "0";
|
||||
margin-bottom: vw(6);
|
||||
|
||||
.current {
|
||||
color: #40a9ff;
|
||||
color: #18F2F9;
|
||||
}
|
||||
|
||||
.separator {
|
||||
@ -756,7 +763,7 @@ const majorEvent = "0";
|
||||
.death-num {
|
||||
font-size: vw(18);
|
||||
font-weight: bold;
|
||||
color: #40a9ff;
|
||||
color: #fff;
|
||||
margin-bottom: vw(6);
|
||||
}
|
||||
|
||||
@ -770,10 +777,10 @@ const majorEvent = "0";
|
||||
}
|
||||
|
||||
.damage-section {
|
||||
margin-bottom: vw(10);
|
||||
margin-bottom: vw(5);
|
||||
|
||||
.damage-title {
|
||||
font-size: vw(14);
|
||||
font-size: vw(16);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
margin-bottom: vw(10);
|
||||
}
|
||||
@ -781,7 +788,7 @@ const majorEvent = "0";
|
||||
.damage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: vw(10);
|
||||
gap: vw(5);
|
||||
|
||||
.damage-item {
|
||||
text-align: center;
|
||||
@ -810,7 +817,7 @@ const majorEvent = "0";
|
||||
}
|
||||
|
||||
&.blue .damage-value {
|
||||
color: #40a9ff;
|
||||
color: #18F2F9;
|
||||
.unit {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
@ -854,17 +861,11 @@ const majorEvent = "0";
|
||||
font-size: vw(10);
|
||||
|
||||
.filter-item {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
padding: vw(3) vw(8);
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
padding: vw(8) vw(8);
|
||||
background: #183c67;
|
||||
box-shadow: inset 0px 0px 8px 0px #4fecff;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background: rgba(64, 169, 255, 0.2);
|
||||
color: #40a9ff;
|
||||
border-color: rgba(64, 169, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.filter-separator {
|
||||
@ -873,10 +874,12 @@ const majorEvent = "0";
|
||||
}
|
||||
.date-range-wrapper {
|
||||
:deep(.el-date-editor) {
|
||||
width: 200px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
border-radius: 0px !important;
|
||||
height: 3.1em !important;
|
||||
}
|
||||
:deep(.el-date-editor) {
|
||||
width: vw(200);
|
||||
max-width: vw(200);
|
||||
background: #183c67;
|
||||
box-shadow: inset 0px 0px 8px 0px #4fecff;
|
||||
|
||||
|
||||
@ -64,17 +64,11 @@ const handleAIClick = () => {
|
||||
font-size: vw(13);
|
||||
|
||||
.filter-item {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
padding: 0 vw(12);
|
||||
height: vw(24);
|
||||
min-height: 20px;
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
color: #fff;
|
||||
padding: vw(8) vw(8);
|
||||
background: #183c67;
|
||||
box-shadow: inset 0px 0px 8px 0px #4fecff;
|
||||
cursor: pointer;
|
||||
|
||||
// &:hover {
|
||||
// border-color: rgba(64, 169, 255, 0.5);
|
||||
@ -89,12 +83,13 @@ const handleAIClick = () => {
|
||||
}
|
||||
|
||||
.date-range-wrapper {
|
||||
:deep(.el-date-editor) {
|
||||
border-radius: 0px !important;
|
||||
height: 2.6em !important;
|
||||
}
|
||||
:deep(.el-date-editor) {
|
||||
width: vw(200);
|
||||
min-width: 140px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(64, 169, 255, 0.3);
|
||||
border-radius: 4px;
|
||||
max-width: vw(200);
|
||||
background: #183c67;
|
||||
box-shadow: inset 0px 0px 8px 0px #4fecff;
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user