1189 lines
31 KiB
Vue
1189 lines
31 KiB
Vue
<template>
|
||
<div class="right-panel">
|
||
<SectionHeader title="防范应对" />
|
||
<!-- 防范应对 -->
|
||
<div class="control-section">
|
||
<div class="control-title">应急力量</div>
|
||
</div>
|
||
<div class="prevention-section">
|
||
<!-- 第一行：队伍、人员、装备、物资 -->
|
||
<div class="resource-grid">
|
||
<div
|
||
v-for="(item, index) in resourceData"
|
||
:key="index"
|
||
class="resource-item"
|
||
@click="handleResourceClick(item)"
|
||
>
|
||
<!-- <div class="resource-icon" :class="item.iconClass"></div> -->
|
||
<img class="resource-icon" :src="item.img" alt="" />
|
||
<div class="resource-info">
|
||
<div class="resource-label">{{ item.label }}</div>
|
||
<div class="resource-value">
|
||
{{ item.value }}<span class="unit">{{ item.unit }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 管控路段数 -->
|
||
<div class="control-section">
|
||
<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">
|
||
<div
|
||
v-for="(item, index) in controlData1"
|
||
:key="index"
|
||
class="control-item"
|
||
:class="{
|
||
clickable: item.label === '封闭管控数',
|
||
}"
|
||
@click="handleControlClick(item)"
|
||
>
|
||
<div class="control-value">{{ item.value }}</div>
|
||
<div class="control-label">{{ item.label }}</div>
|
||
</div>
|
||
</div>
|
||
<div style="width: 10px"></div>
|
||
|
||
<div class="control-grid">
|
||
<div
|
||
v-for="(item, index) in controlData2"
|
||
:key="index"
|
||
class="control-item"
|
||
:class="{
|
||
clickable: item.label === '关闭驻地数',
|
||
}"
|
||
@click="handleControlClick(item)"
|
||
>
|
||
<div class="control-value">{{ item.value }}</div>
|
||
<div class="control-label">{{ item.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 巡查公路里程 -->
|
||
<div class="patrol-section">
|
||
<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
|
||
v-for="(item, index) in patrolData"
|
||
:key="index"
|
||
class="patrol-item"
|
||
>
|
||
<div class="patrol-value">{{ item.value }}</div>
|
||
<div class="patrol-label">{{ item.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 抢险投入情况 -->
|
||
<div class="rescue-section">
|
||
<div class="rescue-title">抢险投入情况</div>
|
||
<div class="rescue-grid">
|
||
<div
|
||
v-for="(item, index) in rescueData"
|
||
:key="index"
|
||
class="rescue-item"
|
||
>
|
||
<!-- <div class="rescue-icon" :class="item.iconClass"></div> -->
|
||
<img class="rescue-icon" :src="item.img" alt="" />
|
||
<div class="rescue-info">
|
||
<div class="rescue-value">
|
||
{{ item.value }}<span class="unit">{{ item.unit }}</span>
|
||
</div>
|
||
<div class="rescue-label">{{ item.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 受灾情况 -->
|
||
<div class="disaster-section">
|
||
<SectionHeader title="受灾情况">
|
||
<template #right>
|
||
<div class="header-filters">
|
||
<span class="filter-item active">本轮</span>
|
||
<div class="date-range-wrapper">
|
||
<el-date-picker
|
||
v-model="dateRange"
|
||
type="daterange"
|
||
range-separator="-"
|
||
start-placeholder="开始时间"
|
||
end-placeholder="结束时间"
|
||
size="small"
|
||
popper-class="custom-date-picker"
|
||
:teleported="false"
|
||
:prefix-icon="Calendar"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</SectionHeader>
|
||
|
||
<!-- 阻断情况 -->
|
||
<div class="block-section clickable" @click="handleBlockClick">
|
||
<div class="block-title">阻断情况(已抢通/阻断数)</div>
|
||
<div class="block-grid">
|
||
<div class="block-item">
|
||
<div class="block-num">
|
||
<span class="current">{{ blockData[0].current }}</span>
|
||
<span class="separator">/</span>
|
||
<span class="total">{{ blockData[0].total }}</span>
|
||
</div>
|
||
<div class="block-label">{{ blockData[0].label }}</div>
|
||
</div>
|
||
<div class="divider-line"></div>
|
||
|
||
<div class="block-item">
|
||
<div class="block-num">
|
||
<span class="current">{{ blockData[1].current }}</span>
|
||
<span class="separator">/</span>
|
||
<span class="total">{{ blockData[1].total }}</span>
|
||
</div>
|
||
<div class="block-label">{{ blockData[1].label }}</div>
|
||
</div>
|
||
|
||
<div class="divider-line"></div>
|
||
|
||
<div class="block-item death-item">
|
||
<div class="death-num">{{ deathData.value }}</div>
|
||
<div class="death-label">{{ deathData.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 灾害情况 -->
|
||
<div class="damage-section">
|
||
<div class="damage-title">灾害情况</div>
|
||
<div class="damage-grid">
|
||
<div
|
||
v-for="(item, index) in damageData"
|
||
:key="index"
|
||
class="damage-item"
|
||
:class="item.class"
|
||
>
|
||
<div class="damage-value">
|
||
{{ item.value }}<span class="unit">{{ item.unit }}</span>
|
||
</div>
|
||
<div class="damage-label">{{ item.label }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 重大事件 -->
|
||
<div class="event-section">
|
||
<span class="event-title">重大事件：</span>
|
||
<span class="event-num">{{ majorEvent }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from "vue";
|
||
import { request } from "@/utils/request";
|
||
|
||
import SectionHeader from "./component/sectionHeader.vue";
|
||
import { Calendar } from "@element-plus/icons-vue";
|
||
|
||
import icon1 from "../../assets/RiskWarning_img/icon1@2x.png";
|
||
import icon2 from "../../assets/RiskWarning_img/icon2@2x.png";
|
||
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-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";
|
||
import icon55 from "../../assets/RiskWarning_img/路径55@2x.png";
|
||
|
||
import icon62 from "../../assets/RiskWarning_img/路径62@2x.png";
|
||
import icon621 from "../../assets/RiskWarning_img/路径62@2x (1).png";
|
||
import icon622 from "../../assets/RiskWarning_img/路径62@2x (2).png";
|
||
|
||
const emit = defineEmits([
|
||
"openClearanceSituation",
|
||
"openControlSituation",
|
||
"openResourceDetail",
|
||
]);
|
||
|
||
// 组件挂载时获取数据
|
||
onMounted(() => {
|
||
getYhYjllList();
|
||
getYhYjllListMaterials();
|
||
getControlStats();
|
||
getRescueInputStats();
|
||
getDisasterStats();
|
||
});
|
||
|
||
// 获取应急力量列表数据
|
||
const getYhYjllList = async () => {
|
||
try {
|
||
const res = await request({
|
||
url: "/snow-ops-platform/yhYjll/list",
|
||
method: "GET",
|
||
params: {
|
||
// longitude: 114.305556,
|
||
// latitude: 22.624722,
|
||
// maxDistance: 10 // 1000km
|
||
},
|
||
});
|
||
console.log(res);
|
||
if (res.code == "00000") {
|
||
let gl1Rysls = 0; // 人员数
|
||
let gl1Yjllmcs = 0; // 队伍数
|
||
res.data.forEach((item) => {
|
||
if (item.gl1Lx == 1 || item.gl1Lx == 2) {
|
||
gl1Yjllmcs = gl1Yjllmcs + 1;
|
||
}
|
||
gl1Rysls = Number(item.gl1Rysl) + gl1Rysls;
|
||
});
|
||
if (gl1Rysls > 10000) {
|
||
gl1Rysls = (gl1Rysls / 10000).toFixed(2);
|
||
resourceData.value[1].unit = "万人";
|
||
} else {
|
||
resourceData.value[1].value = gl1Rysls;
|
||
resourceData.value[1].unit = "人";
|
||
}
|
||
resourceData.value[0].value = gl1Yjllmcs;
|
||
}
|
||
} catch (error) {
|
||
console.error("获取应急力量列表失败:", error);
|
||
}
|
||
};
|
||
|
||
// 根据类型获取图标
|
||
const getIconByType = (type) => {
|
||
const iconMap = {
|
||
1: icon1, // 队伍
|
||
2: icon2, // 人员
|
||
3: icon3, // 装备
|
||
4: icon4, // 物资
|
||
};
|
||
return iconMap[type] || icon1;
|
||
};
|
||
|
||
// 获取物资列表数据
|
||
const getYhYjllListMaterials = async () => {
|
||
try {
|
||
const res = await request({
|
||
url: "/snow-ops-platform/yhYjll/listMaterials",
|
||
method: "GET",
|
||
params: {},
|
||
});
|
||
console.log("物资列表:", res);
|
||
if (res.code == "00000" && res.data) {
|
||
let equipment = 0; // 装备数
|
||
let materials = 0; // 物资数
|
||
|
||
res.data.forEach((item) => {
|
||
if (item.gl1Wzlx == 1) {
|
||
equipment = equipment + extractAndSumNumbers(item.gl1Wzsl);
|
||
} else if (item.gl1Wzlx == 2) {
|
||
materials = materials + extractAndSumNumbers(item.gl1Wzsl);
|
||
}
|
||
});
|
||
if (materials > 10000) {
|
||
resourceData.value[3].value = (materials / 10000).toFixed(2);
|
||
resourceData.value[3].unit = "万件";
|
||
} else {
|
||
resourceData.value[3].value = materials;
|
||
resourceData.value[3].unit = "件";
|
||
}
|
||
|
||
console.log(equipment, materials);
|
||
// 更新物资数据
|
||
resourceData.value[2].value = equipment || "0";
|
||
}
|
||
} catch (error) {
|
||
console.error("获取物资列表失败:", error);
|
||
}
|
||
};
|
||
|
||
// 获取管控统计数据
|
||
const getControlStats = async () => {
|
||
try {
|
||
const res = await request({
|
||
url: "/snow-ops-platform/sm-event/dashboard/control-stats",
|
||
method: "GET",
|
||
});
|
||
console.log("管控统计数据:", res);
|
||
if (res.code == "00000" && res.data) {
|
||
const data = res.data;
|
||
// 更新controlData1数组的value值
|
||
controlData1.value.forEach((item) => {
|
||
if (item.label === "封闭管控数") {
|
||
item.value = data.fullClosureCount || "0";
|
||
} else if (item.label === "半幅通行数") {
|
||
item.value = data.halfClosureCount || "0";
|
||
} else if (item.label === "限速(限车型)数") {
|
||
item.value = data.speedLimitCount || "0";
|
||
} else if (item.label === "告警阻拦处数") {
|
||
item.value = data.warningBlockCount || "0";
|
||
}
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error("获取管控统计数据失败:", error);
|
||
}
|
||
};
|
||
|
||
// 获取抢险投入统计数据
|
||
const getRescueInputStats = async () => {
|
||
try {
|
||
const res = await request({
|
||
url: "/snow-ops-platform/sm-event/dashboard/rescue-input-stats",
|
||
method: "GET",
|
||
});
|
||
console.log("抢险投入统计数据:", res);
|
||
if (res.code == "00000" && res.data) {
|
||
const data = res.data;
|
||
// 更新rescueData数组的value值
|
||
rescueData.value.forEach((item) => {
|
||
if (item.label === "本轮出动人次") {
|
||
item.value = data.investedManpower || "0";
|
||
item.unit = "人";
|
||
if (item.value > 10000) {
|
||
item.value = (item.value / 10000).toFixed(2);
|
||
item.unit = "万人";
|
||
}
|
||
} else if (item.label === "本轮出动设备") {
|
||
item.value = data.investedMachinery || "0";
|
||
item.unit = "台";
|
||
if (item.value > 10000) {
|
||
item.value = (item.value / 10000).toFixed(2);
|
||
item.unit = "万台";
|
||
}
|
||
} else if (item.label === "清理塌方") {
|
||
// 将立方米转换为万立方米
|
||
item.value = data.clearedLandslide.toFixed(2) || 0;
|
||
item.unit = "立方米";
|
||
if (item.value > 10000) {
|
||
item.value = (item.value / 10000).toFixed(2);
|
||
item.unit = "万立方米";
|
||
}
|
||
}
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error("获取抢险投入统计数据失败:", error);
|
||
}
|
||
};
|
||
|
||
// 获取灾害统计数据
|
||
const getDisasterStats = async () => {
|
||
try {
|
||
const res = await request({
|
||
url: "/snow-ops-platform/sm-event/dashboard/disaster-stats",
|
||
method: "GET",
|
||
});
|
||
console.log("灾害统计数据:", res);
|
||
if (res.code == "00000" && res.data) {
|
||
const data = res.data;
|
||
// 更新blockData数组的value值
|
||
blockData.value.forEach((item) => {
|
||
if (item.label === "今日新增阻断数") {
|
||
item.current = data.todayNormalCount || "0";
|
||
item.total = data.todayTotalCount || "0";
|
||
} else if (item.label === "本轮累计阻断数") {
|
||
item.current = data.roundNormalCount || "0";
|
||
item.total = data.roundTotalCount || "0";
|
||
}
|
||
});
|
||
|
||
// 更新deathData的value值
|
||
deathData.value.value = data.roundDeadCount || "0";
|
||
|
||
// 更新damageData数组的value值
|
||
damageData.value.forEach((item) => {
|
||
if (item.label === "本轮塌方量") {
|
||
data.roundLandslideVolume = data.roundLandslideVolume.toFixed(2);
|
||
if (data.roundLandslideVolume > 10000) {
|
||
item.value = (data.roundLandslideVolume / 10000).toFixed(2) || "0";
|
||
item.unit = "万立方米";
|
||
} else {
|
||
item.value = data.roundLandslideVolume || "0";
|
||
item.unit = "立方米";
|
||
}
|
||
} else if (item.label === "汛期塌方量") {
|
||
data.floodSeasonLandslideVolume =
|
||
data.floodSeasonLandslideVolume.toFixed(2);
|
||
if (data.floodSeasonLandslideVolume > 10000) {
|
||
item.value =
|
||
(data.floodSeasonLandslideVolume / 10000).toFixed(2) || "0";
|
||
item.unit = "万立方米";
|
||
} else {
|
||
item.value = data.floodSeasonLandslideVolume || "0";
|
||
item.unit = "立方米";
|
||
}
|
||
} else if (item.label === "当年塌方量") {
|
||
data.yearLandslideVolume = data.yearLandslideVolume.toFixed(2);
|
||
if (data.yearLandslideVolume > 10000) {
|
||
item.value = (data.yearLandslideVolume / 10000).toFixed(2) || "0";
|
||
item.unit = "万立方米";
|
||
} else {
|
||
item.value = data.yearLandslideVolume || "0";
|
||
item.unit = "立方米";
|
||
}
|
||
} else if (item.label === "本轮已损失") {
|
||
data.roundTotalLossAmount = data.roundTotalLossAmount.toFixed(2);
|
||
if (data.roundTotalLossAmount > 10000) {
|
||
item.value = (data.roundTotalLossAmount / 10000).toFixed(2) || "0";
|
||
item.unit = "亿元";
|
||
} else {
|
||
item.value = data.roundTotalLossAmount || "0";
|
||
item.unit = "万元";
|
||
}
|
||
} else if (item.label === "汛期已损失") {
|
||
data.floodSeasonTotalLossAmount =
|
||
data.floodSeasonTotalLossAmount.toFixed(2);
|
||
if (data.floodSeasonTotalLossAmount > 10000) {
|
||
item.value =
|
||
(data.floodSeasonTotalLossAmount / 10000).toFixed(2) || "0";
|
||
item.unit = "亿元";
|
||
} else {
|
||
item.value = data.floodSeasonTotalLossAmount || "0";
|
||
item.unit = "万元";
|
||
}
|
||
} else if (item.label === "当年已损失") {
|
||
data.yearTotalLossAmount = data.yearTotalLossAmount.toFixed(2);
|
||
if (data.yearTotalLossAmount > 10000) {
|
||
item.value = (data.yearTotalLossAmount / 10000).toFixed(2) || "0";
|
||
item.unit = "亿元";
|
||
} else {
|
||
item.value = data.yearTotalLossAmount || "0";
|
||
item.unit = "万元";
|
||
}
|
||
}
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error("获取灾害统计数据失败:", error);
|
||
}
|
||
};
|
||
|
||
// 从字符串中提取数字并相加
|
||
const extractAndSumNumbers = (value) => {
|
||
// 如果是数字，直接返回
|
||
if (typeof value === "number") {
|
||
return value;
|
||
}
|
||
// 如果不是字符串，返回 0
|
||
if (!value || typeof value !== "string") return 0;
|
||
// 匹配所有数字（包括小数）
|
||
const numbers = value.match(/\d+\.?\d*/g);
|
||
if (!numbers) return 0;
|
||
// 将提取的数字相加
|
||
return numbers.reduce((sum, num) => sum + Number(num), 0);
|
||
};
|
||
|
||
// 点击管控项
|
||
const handleControlClick = (item) => {
|
||
if (item.label === "封闭管控数") {
|
||
emit("openClearanceSituation");
|
||
} else if (item.label === "关闭驻地数") {
|
||
emit("openControlSituation");
|
||
}
|
||
};
|
||
|
||
// 点击阻断情况
|
||
const handleBlockClick = () => {
|
||
emit("openClearanceSituation");
|
||
};
|
||
|
||
// 日期范围选择器
|
||
const dateRange = ref([]);
|
||
|
||
// 资源数据（队伍、人员、装备、物资）
|
||
const resourceData = ref([
|
||
{
|
||
label: "全市普通公路抢险队伍",
|
||
value: "",
|
||
unit: "支",
|
||
iconClass: "icon-team",
|
||
img: icon1,
|
||
},
|
||
{
|
||
label: "人员",
|
||
value: "",
|
||
unit: "人",
|
||
iconClass: "icon-person",
|
||
img: icon2,
|
||
},
|
||
{
|
||
label: "储备装备",
|
||
value: "",
|
||
unit: "台",
|
||
iconClass: "icon-equip",
|
||
img: icon3,
|
||
},
|
||
{
|
||
label: "物资",
|
||
value: "",
|
||
unit: "件",
|
||
iconClass: "icon-material",
|
||
img: icon4,
|
||
},
|
||
]);
|
||
|
||
// 点击资源项
|
||
const handleResourceClick = (item) => {
|
||
emit("openResourceDetail", item);
|
||
};
|
||
|
||
// 管控路段数据
|
||
const controlData1 = ref([
|
||
{ label: "封闭管控数", value: "40" },
|
||
{ label: "半幅通行数", value: "40" },
|
||
{ label: "限速(限车型)数", value: "24" },
|
||
{ label: "告警阻拦处数", value: "32" },
|
||
]);
|
||
const controlData2 = [
|
||
{ label: "停工项目数", value: "30" },
|
||
{ label: "关闭驻地数", value: "42" },
|
||
{ label: "转移撤离人员数", value: "58" },
|
||
];
|
||
|
||
// 巡查数据
|
||
const patrolData = [
|
||
{ label: "巡查路段数", value: "2" },
|
||
{ label: "巡查桥梁数", value: "1" },
|
||
{ label: "巡查边坡数", value: "6" },
|
||
{ label: "巡查隧道数", value: "10" },
|
||
{ label: "发现隐患数", value: "6" },
|
||
];
|
||
|
||
// 抢险投入数据
|
||
const rescueData = ref([
|
||
{
|
||
label: "本轮出动人次",
|
||
value: "22341",
|
||
unit: "人次",
|
||
iconClass: "icon-rescue-person",
|
||
img: icon11,
|
||
},
|
||
{
|
||
label: "本轮出动设备",
|
||
value: "341",
|
||
unit: "台次",
|
||
iconClass: "icon-rescue-equip",
|
||
img: icon12,
|
||
},
|
||
{
|
||
label: "清理塌方",
|
||
value: "1367",
|
||
unit: "立方米",
|
||
iconClass: "icon-rescue-clear",
|
||
img: icon13,
|
||
},
|
||
]);
|
||
|
||
// 受灾情况 - 阻断数据
|
||
const blockData = ref([
|
||
{ label: "今日新增阻断数", current: "19", total: "23" },
|
||
{ label: "本轮累计阻断数", current: "10", total: "23" },
|
||
]);
|
||
|
||
// 死亡人数
|
||
const deathData = ref({ label: "本轮因灾死亡人数", value: "5" });
|
||
|
||
// 灾害情况数据
|
||
const damageData = ref([
|
||
{ label: "本轮塌方量", value: "23", unit: "万立方米", class: "blue" },
|
||
{ label: "汛期塌方量", value: "23", unit: "万立方米", class: "blue" },
|
||
{ label: "当年塌方量", value: "23", unit: "万立方米", class: "blue" },
|
||
{ label: "本轮已损失", value: "80", unit: "万元", class: "red" },
|
||
{ label: "汛期已损失", value: "18", unit: "万元", class: "red" },
|
||
{ label: "当年已损失", value: "350", unit: "万元", class: "red" },
|
||
]);
|
||
|
||
// 重大事件数
|
||
const majorEvent = "0";
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
// 视频屏幕自适应 - 基于视口宽度动态调整
|
||
// 基准宽度 1920px，使用 vw 单位实现自适应
|
||
@function vw($px) {
|
||
@return calc($px / 1920 * 100vw);
|
||
}
|
||
|
||
.right-panel {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: vw(20);
|
||
box-sizing: border-box;
|
||
overflow-y: auto;
|
||
scrollbar-width: none;
|
||
-ms-overflow-style: none;
|
||
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
// 小屏幕适配
|
||
@media (max-width: 1366px) {
|
||
padding: 12px;
|
||
}
|
||
|
||
@media (max-width: 1024px) {
|
||
padding: 8px;
|
||
}
|
||
}
|
||
|
||
.prevention-section {
|
||
// background: linear-gradient(
|
||
// 180deg,
|
||
// rgba(21, 41, 59, 0.95) 0%,
|
||
// rgba(13, 28, 42, 0.95) 100%
|
||
// );
|
||
// border: 1px solid rgba(64, 169, 255, 0.3);
|
||
border-radius: 8px;
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
background-image: url("../../assets/RiskWarning_img/标题bg@2x.png");
|
||
align-items: center;
|
||
margin-bottom: vw(8);
|
||
height: vw(50);
|
||
|
||
.header-left {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: vw(6);
|
||
|
||
.icon-back {
|
||
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;
|
||
justify-content: center;
|
||
|
||
&::before {
|
||
content: "←";
|
||
color: #fff;
|
||
font-size: vw(10);
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-size: vw(14);
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 资源网格（队伍、人员、装备、物资）
|
||
.resource-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
gap: vw(6);
|
||
margin-bottom: vw(6);
|
||
|
||
.resource-item {
|
||
display: flex;
|
||
align-items: center;
|
||
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, 145, 201, 0),
|
||
rgba(39, 77, 153, 1)
|
||
)
|
||
2 2;
|
||
border-radius: 6px;
|
||
border-right: 0px;
|
||
|
||
.resource-icon {
|
||
width: vw(24);
|
||
height: vw(24);
|
||
min-width: 16px;
|
||
min-height: 16px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: vw(18);
|
||
|
||
&.icon-team::before {
|
||
content: "👷";
|
||
}
|
||
&.icon-person::before {
|
||
content: "👤";
|
||
}
|
||
&.icon-equip::before {
|
||
content: "🚛";
|
||
}
|
||
&.icon-material::before {
|
||
content: "📦";
|
||
}
|
||
}
|
||
|
||
.resource-info {
|
||
flex: 1;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.resource-label {
|
||
width: 48%;
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
margin-bottom: vw(2);
|
||
}
|
||
|
||
.resource-value {
|
||
font-size: vw(16);
|
||
font-weight: bold;
|
||
color: #18f2f9;
|
||
|
||
.unit {
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-weight: normal;
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 管控路段
|
||
.control-section {
|
||
margin-bottom: vw(10);
|
||
|
||
.control-title {
|
||
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: #18f2f9;
|
||
font-weight: bold;
|
||
margin-left: vw(5);
|
||
}
|
||
}
|
||
|
||
.control-grid {
|
||
flex: 1;
|
||
display: grid;
|
||
grid-template-columns: repeat(2, 1fr);
|
||
// background: rgba(62, 106, 172, 0.36);
|
||
// box-shadow: inset 0px 0px 8px 0px #379bff;
|
||
background-image: url("../../assets/RiskWarning_img/路径 62@2x.png");
|
||
background-size: 100% 100%;
|
||
background-position: right;
|
||
gap: vw(8);
|
||
|
||
.control-item {
|
||
text-align: center;
|
||
padding: vw(5) vw(5);
|
||
// background: rgba(64, 169, 255, 0.1);
|
||
border-radius: 4px;
|
||
|
||
&.clickable {
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
background-color: rgba(64, 169, 255, 0.15);
|
||
}
|
||
}
|
||
|
||
.control-value {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
color: #18f2f9;
|
||
// margin-bottom: vw(4);
|
||
}
|
||
|
||
.control-label {
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 巡查公路里程
|
||
.patrol-section {
|
||
margin-bottom: vw(10);
|
||
|
||
.patrol-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: vw(10);
|
||
margin-bottom: vw(10);
|
||
|
||
.patrol-title {
|
||
font-size: vw(16);
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.patrol-mileage {
|
||
font-size: vw(16);
|
||
font-weight: bold;
|
||
color: #4fecff;
|
||
}
|
||
}
|
||
|
||
.patrol-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: vw(8);
|
||
|
||
.patrol-item {
|
||
text-align: center;
|
||
padding: vw(6) vw(5);
|
||
// background: rgba(64, 169, 255, 0.1);
|
||
// border-radius: 4px;
|
||
background-image: url("../../assets/RiskWarning_img/路径62@2x (1).png");
|
||
background-size: 100% 100%;
|
||
background-position: right;
|
||
|
||
.patrol-value {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
color: #4fecff;
|
||
margin-bottom: vw(4);
|
||
text-align: left;
|
||
margin-left: vw(5);
|
||
}
|
||
|
||
.patrol-label {
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 抢险投入情况
|
||
.rescue-section {
|
||
.rescue-title {
|
||
font-size: vw(16);
|
||
color: rgba(255, 255, 255, 0.9);
|
||
margin-bottom: vw(10);
|
||
}
|
||
|
||
.rescue-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: vw(10);
|
||
|
||
.rescue-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: vw(4);
|
||
padding: vw(8) 0;
|
||
// background: rgba(64, 169, 255, 0.1);
|
||
// border: 1px solid rgba(64, 169, 255, 0.2);
|
||
// border-radius: 6px;
|
||
background-image: url("../../assets/RiskWarning_img/路径62@2x (1).png");
|
||
background-size: 100% 100%;
|
||
background-position: right;
|
||
|
||
.rescue-icon {
|
||
width: vw(40);
|
||
height: vw(40);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: vw(22);
|
||
margin-left: vw(5);
|
||
|
||
&.icon-rescue-person::before {
|
||
content: "👷";
|
||
}
|
||
&.icon-rescue-equip::before {
|
||
content: "🚜";
|
||
}
|
||
&.icon-rescue-clear::before {
|
||
content: "🏔️";
|
||
}
|
||
}
|
||
|
||
.rescue-info {
|
||
.rescue-value {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
color: #fff;
|
||
margin-bottom: vw(4);
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.unit {
|
||
font-size: vw(10);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-weight: normal;
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
|
||
.rescue-label {
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 受灾情况样式
|
||
.disaster-section {
|
||
margin-top: vw(10);
|
||
|
||
.block-section {
|
||
margin-bottom: vw(10);
|
||
|
||
&.clickable {
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
opacity: 0.9;
|
||
|
||
.block-title {
|
||
color: #69c0ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.block-title {
|
||
font-size: vw(16);
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin-bottom: vw(10);
|
||
}
|
||
|
||
.block-grid {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
height: 100%;
|
||
padding: 0 vw(20);
|
||
// display: grid;
|
||
// grid-template-columns: repeat(5, 1fr);
|
||
// gap: 10px;
|
||
background-image: url("../../assets/RiskWarning_img/编组22@2x.png");
|
||
background-size: 100% 100%;
|
||
background-position: center;
|
||
|
||
.divider-line {
|
||
width: 2px;
|
||
height: vw(40);
|
||
margin: auto 0;
|
||
background: linear-gradient(
|
||
180deg,
|
||
transparent 0%,
|
||
#18f2f9 50%,
|
||
transparent 100%
|
||
);
|
||
// margin: 0 auto;
|
||
}
|
||
|
||
.block-item {
|
||
text-align: center;
|
||
padding: vw(8);
|
||
// background: rgba(64, 169, 255, 0.1);
|
||
// border-radius: 6px;
|
||
// background-image: url("../../assets/RiskWarning_img/路径62@2x (1).png");
|
||
// background-size: 100% 100%;
|
||
// background-position: left;
|
||
|
||
.block-num {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
margin-bottom: vw(6);
|
||
|
||
.current {
|
||
color: #18f2f9;
|
||
}
|
||
|
||
.separator {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
margin: 0 2px;
|
||
}
|
||
|
||
.total {
|
||
color: #ff4d4f;
|
||
}
|
||
}
|
||
|
||
.block-label {
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
&.death-item {
|
||
.death-num {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
color: #fff;
|
||
margin-bottom: vw(6);
|
||
}
|
||
|
||
.death-label {
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.damage-section {
|
||
margin-bottom: vw(5);
|
||
|
||
.damage-title {
|
||
font-size: vw(16);
|
||
color: rgba(255, 255, 255, 0.8);
|
||
margin-bottom: vw(10);
|
||
}
|
||
|
||
.damage-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: vw(5);
|
||
|
||
.damage-item {
|
||
text-align: center;
|
||
padding: vw(8);
|
||
// background: rgba(64, 169, 255, 0.1);
|
||
// border-radius: 6px;
|
||
background-image: url("../../assets/RiskWarning_img/路径62@2x.png");
|
||
background-size: 100% 100%;
|
||
background-position: left;
|
||
|
||
.damage-value {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
margin-bottom: vw(6);
|
||
|
||
.unit {
|
||
font-size: vw(14);
|
||
font-weight: normal;
|
||
margin-left: 2px;
|
||
}
|
||
}
|
||
|
||
.damage-label {
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
|
||
&.blue .damage-value {
|
||
color: #18f2f9;
|
||
.unit {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
|
||
&.red .damage-value {
|
||
color: #ff4d4f;
|
||
.unit {
|
||
color: rgba(255, 255, 255, 0.7);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.event-section {
|
||
text-align: center;
|
||
padding: vw(12);
|
||
// background: rgba(64, 169, 255, 0.1);
|
||
// border-radius: 6px;
|
||
background-image: url("../../assets/RiskWarning_img/编组5@2x.png");
|
||
background-size: 100% 100%;
|
||
background-position: left;
|
||
|
||
.event-title {
|
||
font-size: vw(14);
|
||
color: rgba(255, 255, 255, 0.9);
|
||
}
|
||
|
||
.event-num {
|
||
font-size: vw(18);
|
||
font-weight: bold;
|
||
color: #ff4d4f;
|
||
}
|
||
}
|
||
}
|
||
.header-filters {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: vw(6);
|
||
font-size: vw(10);
|
||
|
||
.filter-item {
|
||
color: #fff;
|
||
padding: vw(8) vw(8);
|
||
background: #183c67;
|
||
box-shadow: inset 0px 0px 8px 0px #4fecff;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.filter-separator {
|
||
color: rgba(255, 255, 255, 0.4);
|
||
}
|
||
}
|
||
.date-range-wrapper {
|
||
:deep(.el-date-editor) {
|
||
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;
|
||
|
||
.el-range-input {
|
||
background: transparent;
|
||
color: rgba(255, 255, 255, 0.8);
|
||
|
||
&::placeholder {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
}
|
||
|
||
.el-range-separator {
|
||
color: rgba(255, 255, 255, 0.4);
|
||
}
|
||
|
||
.el-icon {
|
||
color: rgba(255, 255, 255, 0.5);
|
||
}
|
||
|
||
// &:hover {
|
||
// border-color: rgba(64, 169, 255, 0.5);
|
||
// }
|
||
}
|
||
}
|
||
</style>
|