<template>
<div id="ZHRQ">
<!-- 头部预警 -->
<div class="warningPrompt flex flex-align-center" v-if="showTips">
已启动
<span>
{{
AllData.showTipsData.warningLevel == "1"
? "Ⅰ级"
: AllData.showTipsData.warningLevel == "2"
? "Ⅱ级"
: AllData.showTipsData.warningLevel == "3"
? "Ⅲ级"
: AllData.showTipsData.warningLevel == "4"
? "Ⅳ级"
: AllData.showTipsData.warningLevel == "5"
? "预警"
: null
}}</span
>
级响应，从:
<span class="colorR">{{
moment(AllData.showTipsData.warnStartTime).format("YYYY-MM-DD HH:mm")
}}</span>
起，预计到:<span class="colorR"
>{{ moment(AllData.showTipsData.warnEndTime).format("YYYY-MM-DD HH:mm") }}
</span>
<div>准备时间:</div>
<div class="flex flex-align-center">
<span class="radBg">{{ countdown.daysQ }}</span
>天 <span class="radBg">{{ countdown.hoursQ }}</span
>时 <span class="radBg">{{ countdown.minutesQ }}</span
>分 <span class="radBg">{{ countdown.secondsQ }}</span
>秒
</div>
</div>
<div
:class="[
'LeftBox',
'animate__animated',
showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft',
]"
>
<div class="ComBox LeftBox1_1">
<div class="Box_header">管道风险评估</div>
<div class="Box_Body">
<div class="TJListBox">
<div class="TJList TJList_RQ" @click="TuChengClick(0)">
<img
class="TJListImg"
src="@/assets/images/Sponge_screen/RQ/RQ_RQ.png"
alt=""
/>
<span class="TJListName">燃气管道</span>
<span class="TJListValue">4549km</span>
</div>
<div class="TJList TJList_GZ">
<img
class="TJListImg"
src="@/assets/images/Sponge_screen/RQ/RQ_GZ.png"
alt=""
/>
<span class="TJListName">需改造</span>
<span class="TJListValue">1922km</span>
</div>
</div>
<div class="RQ_EchartsBox" id="Echarts2Box"></div>
</div>
</div>
<div class="ComBox LeftBox1_2">
<div class="Box_header">风险监测</div>
<div class="Box_Body">
<div class="TJListBox">
<div class="TJList2" @click="showIndexOver()">
<span class="TJList2Name">指标超标</span>
<span class="TJList2Value">10</span>
</div>
<div class="TJList2" @click="showIndexWarning()">
<span class="TJList2Name">预警站点数</span>
<span class="TJList2Value">1</span>
</div>
</div>
<div class="TableChange">
<div
class="TableChangeList"
:class="AllData.TableChangeIndex == item.id ? 'TableCheck' : ''"
v-for="item in AllData.ChangeData"
@click="AllData.TableChangeIndex = item.id"
>
{{ item.name }}
</div>
</div>
<!-- 弹性盒子 -->
<div class="TableBox">
<div class="tableHeader">
<span class="tableHeaderList tableList1">指标</span>
<span class="tableHeaderList tableList2">数值</span>
<span class="tableHeaderList tableList3">状态</span>
<span class="tableHeaderList tableList4">操作</span>
</div>
<div class="tableBody">
<div class="tableBodyList" v-for="item in AllData.FXJCData">
<span class="tableBodyList_span1" @click="FengXianClick(item)">{{
item.zb
}}</span>
<span class="tableBodyList_span2" @click="FengXianClick(item)"
>{{ item.sz }}
<el-icon v-if="item.szzt" color="lime" size="14"><Top /> </el-icon>
<el-icon v-else color="#f54444" size="14">
<Bottom />
</el-icon>
</span>
<span
class="tableBodyList_span3"
:class="item.zt == 0 ? 'YJClass' : ''"
>{{ item.zt == 0 ? "预警" : "正常" }}</span
>
<span class="tableBodyList_span4" @click="PaiFa(item)">派发</span>
</div>
</div>
<div class="tableFoot">更新时间：2024-09-27 10:00</div>
</div>
</div>
</div>
<div class="ComBox LeftBox1_3">
<div class="Box_header">预警统计</div>
<div class="Box_Body">
<div class="TableChange2">
<div
class="TableChangeList2"
:class="AllData.YJChangeIndex == item.id ? 'TableCheck2' : ''"
v-for="item in AllData.YJChangeData"
@click="initEcharts(item.id)"
>
{{ item.name }}
</div>
</div>
<div id="YJEchartsBox"></div>
</div>
</div>
</div>
<div
:class="[
'RightBox',
'animate__animated',
showPanel ? 'animate__fadeOutRight' : 'animate__fadeInRight',
]"
>
<div class="ComBox RightBox1_1">
<div class="Box_header">辅助决策</div>
<div class="Box_Body">
<div class="JCListBox" v-for="item in AllData.JCData">
<div class="JCListBox_List">
<span class="JCListBox_List_label">风险区域:</span>
<span class="JCListBox_List_value">{{ item.qy }}</span>
</div>
<div class="JCListBox_List">
<span class="JCListBox_List_label">风险特征:</span>
<span class="JCListBox_List_value">{{ item.tz }}</span>
</div>
<div class="JCListBox_List">
<span class="JCListBox_List_label">历史事件:</span>
<span class="JCListBox_List_value">{{ item.sj }}</span>
</div>
<div class="JCListBox_List">
<span class="JCListBox_List_label">问题研判:</span>
<span class="JCListBox_List_value color_red">{{ item.yp }}</span>
</div>
<div class="JCListBox_List JCListBox_List_BTN">
<el-button
style="background: #03b6a0; color: white; border: none"
size="small"
@click="GongDanPaiFa(item)"
>工单派发</el-button
>
<el-button
style="background: #03b6a0; color: white; border: none"
size="small"
@click="XianChangLianXian(item)"
>现场联线</el-button
>
</div>
</div>
</div>
</div>
<div class="ComBox RightBox1_2">
<div class="Box_header">预警处置</div>
<div class="Box_Body">
<div class="FK_headerBox">
<div class="FK_headerBox_list" @click="dealOrNoDeal(1)">
<span class="FK_headerBox_list_colorBox1"></span> 未处理
</div>
<div class="FK_headerBox_list" @click="dealOrNoDeal(2)">
<span class="FK_headerBox_list_colorBox2"></span> 已处理
</div>
</div>
<div class="FK_bodyBox">
<div class="FK_bodyBox_list" v-for="item in AllData.XCFKData">
<span class="FK_bodyBox_list_label" @click="XunChaFanKui(item)">{{
item.name
}}</span>
<div class="FK_BigBox">
<div class="FK_CenBox1" :style="getWidth(item, 1)">{{ item.num1 }}</div>
<div class="FK_CenBox2" :style="getWidth(item, 2)">{{ item.num2 }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- <div :class="['TopBox', 'animate__animated', showPanel ? 'animate__fadeOutUp' : 'animate__fadeInDown']">
<div class="TopTableHeader">
<span class="TopTableListSpan TopTableListSpan1">时间</span>
<span class="TopTableListSpan TopTableListSpan2">事件明细</span>
<span class="TopTableListSpan TopTableListSpan3">地点</span>
<span class="TopTableListSpan TopTableListSpan4">状态</span>
<span class="TopTableListSpan TopTableListSpan5">责任单位</span>
<span class="TopTableListSpan TopTableListSpan6">督办</span>
</div>
<Vue3SeamlessScroll :list="AllData.TopTableData" :singleHeight="34" :hover="true" class="TopTableBody">
<div class="TopTableBody_list" v-for="item in AllData.TopTableData">
<span class="TopTableListSpan TopTableListSpan1">{{ item.sj }}</span>
<span class="TopTableListSpan TopTableListSpan2">{{ item.mx }}</span>
<span class="TopTableListSpan TopTableListSpan3">{{ item.dd }}</span>
<span class="TopTableListSpan TopTableListSpan4">{{
item.zt == 0 ? "未处理" : "已处理"
}}</span>
<span class="TopTableListSpan TopTableListSpan5">{{ item.dw }}</span>
<span class="TopTableListSpan TopTableListSpan6">
<img
class="TopTableListSpanImg2"
src="@/assets/images/Sponge_screen/RQ/RQ_XX.png"
alt=""
@click="PaiFa(item)"
/>
<img
class="TopTableListSpanImg"
src="@/assets/images/Sponge_screen/RQ/RQ_SP.png"
alt=""
@click="XianChangLianXian(item)"
/>
</span>
</div>
</Vue3SeamlessScroll>
</div> -->
<div
:class="[
'bottomBox',
'animate__animated',
showPanel ? 'animate__bounceOutDown' : 'animate__fadeInUpBig',
]"
>
<div class="TopTableHeader">
<span class="TopTableListSpan TopTableListSpan1">指挥中心</span>
<span class="TopTableListSpan TopTableListSpan2">动态</span>
<span class="TopTableListSpan TopTableListSpan3">时间</span>
<span class="TopTableListSpan TopTableListSpan4">指令状态</span>
</div>
<Vue3SeamlessScroll
:list="AllData.bottomTableData"
:singleHeight="34"
:hover="true"
class="TopTableBody"
>
<div class="TopTableBody_list" v-for="item in AllData.bottomTableData">
<span class="TopTableListSpan TopTableListSpan1">{{ item.zhzx }}</span>
<span class="TopTableListSpan TopTableListSpan2">{{ item.dt }}</span>
<span class="TopTableListSpan TopTableListSpan3">{{ item.sj }}</span>
<span class="TopTableListSpan TopTableListSpan4">{{ item.zlzt }}</span>
</div>
</Vue3SeamlessScroll>
</div>
<div class="IssueWarning" @click="WarningClick">发布预警</div>
</div>
</template>
<script setup name="ZHRQ">
import { ref, reactive, toRefs, onMounted, onBeforeUnmount, nextTick } from "vue";
import moment from "moment";
import * as echarts from "echarts";
import bus from "@/bus";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import sheBeiLost from "@/assets/sheBeiLost.json";
import xiaXian from "@/assets/xiaXian.json";
import yiBian from "@/assets/yiBian.json";
import zaWuDuiFang from "@/assets/zaWuDuiFang.json";
import rq_QiTa from "@/assets/rq_QiTa.json";
import no_sheBeiLost from "@/assets/no_sheBeiLost.json";
import no_xiaXian from "@/assets/no_xiaXian.json";
import no_yiBian from "@/assets/no_yiBian.json";
import no_zaWuDuiFang from "@/assets/no_zaWuDuiFang.json";
import no_rq_QiTa from "@/assets/no_rq_QiTa.json";
import yanAnRQoverindex from "@/assets/yanAnRQoverindex.json";
import yanAnWarring from "@/assets/yanAnWarring.json";
const { proxy } = getCurrentInstance();
const AllData = reactive({
xunChaStatic: null,
showTipsData: {},
xunChaLayers: [
"alreadyDeal_DF",
"alreadyDeal_DS",
"alreadyDeal_XX",
"alreadyDeal_YB",
"alreadyDeal_QT",
"noDeal_DF",
"noDeal_DS",
"noDeall_XX",
"noDeal_YB",
"noDeal_QT",
],
ChangeData: [
{
name: "枣园",
id: 1,
},
{
name: "杨家湾",
id: 2,
},
{
name: "丰富川",
id: 3,
},
],
TableChangeIndex: 1,
// 风险监测
FXJCData: [
{
zb: "甲烷浓度",
sz: "3%",
szzt: true,
zt: 0, //0预警 1 正常
value: "JWND",
},
{
zb: "压力",
sz: "5MPa",
szzt: false,
zt: 1, //0预警 1 正常
value: "YL",
},
{
zb: "温度",
sz: "25C°",
szzt: true,
zt: 1, //0预警 1 正常
value: "WD",
},
],
YJChangeData: [
{
name: "综合",
id: 1,
},
{
name: "压力",
id: 2,
},
{
name: "温度",
id: 3,
},
],
YJChangeIndex: 1,
//辅助决策
JCData: [
{
qy: "宝塔区凤凰山街道二道街",
tz: "压力监测异常波动",
sj: 5,
yp: "设施故障",
value: "001", //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
},
{
qy: "宝塔区凤凰山街道二道街",
tz: "燃气管道压力过大",
sj: 5,
yp: "燃气爆管风险",
value: "002",
},
{
qy: "宝塔区凤凰山街道二道街",
tz: "高峰期流量持续降低",
sj: 4,
yp: "燃气泄漏风险",
value: "003",
},
],
// 巡查反馈
XCFKData: [
{
name: "堆放杂物",
num1: 20,
num2: 80,
},
{
name: "设备丢失",
num1: 12,
num2: 88,
},
{
name: "下陷",
num1: 32,
num2: 68,
},
{
name: "异变",
num1: 30,
num2: 70,
},
{
name: "其他",
num1: 20,
num2: 80,
},
],
// 顶部表格数据
TopTableData: [
{
sj: "2024-09-26 10:00:29",
mx: "燃气常规检查发现泄漏",
dd: "宝塔区凤凰山街道二道街",
zt: 0, //0未处理 1已处理
dw: "延安市燃气总公司",
value: null,
},
{
sj: "2024-09-27 16:10:248",
mx: "燃气常规检查发现泄漏",
dd: "宝塔区凤凰山街道二道街",
zt: 0, //0未处理 1已处理
dw: "延安市燃气总公司",
value: null,
},
{
sj: "2024-09-26 10:00:29",
mx: "燃气常规检查发现泄漏",
dd: "宝塔区凤凰山街道二道街",
zt: 0, //0未处理 1已处理
dw: "延安市燃气总公司",
value: null,
},
{
sj: "2024-09-27 16:10:248",
mx: "燃气常规检查发现泄漏",
dd: "宝塔区凤凰山街道二道街",
zt: 0, //0未处理 1已处理
dw: "延安市燃气总公司",
value: null,
},
],
// 底部表格数据
bottomTableData: [
{
zhzx: "预警发布",
dt: "启动预警并通知成员单位",
sj: "10-20 08:30",
zlzt: "预警下发给城管局各单位，燃气供应处",
},
{
zhzx: "预警启动",
dt: "起草燃气安全预警应急行动",
sj: "10-20 07:00",
zlzt: "起草了预警通知",
},
],
timer: null,
});
const showTips = ref(false);
let countdown = ref({
daysQ: "",
hoursQ: "",
minutesQ: "",
secondsQ: "",
});
// 预警统计echarts实例
const myChart = shallowRef(null);
// 管道风险评估echarts实例
const myChart2 = shallowRef(null);
//面板展开收起
const showPanel = ref(true);
// 面板内容展开收起控制
const props = defineProps({
showPanel: {
type: Boolean,
},
});
// 获取要显示倒计时的HTML元素
const intervalId = ref(null);
const currentTime = ref(null);
const futureTime2 = ref(null);
const futureTime = ref(null);
const timeDifference = ref(null);
function runTime() {
futureTime2.value = new Date(AllData.showTipsData.warnStartTime).getTime(); //开始时间
currentTime.value = new Date().getTime();
futureTime.value = new Date(currentTime.value).getTime(); // 当前时间
// console.log(futureTime, '当前时间');
timeDifference.value = futureTime2.value - futureTime.value;
let days = Math.floor(timeDifference.value / (1000 * 60 * 60 * 24));
let hours = Math.floor(
(timeDifference.value % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
let minutes = Math.floor((timeDifference.value % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((timeDifference.value % (1000 * 60)) / 1000);
// console.log(`剩余时间: ${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`);
// 每秒更新一次倒计时
intervalId.value = setInterval(runTime, 1000);
// 检查倒计时是否结束
if (timeDifference.value <= 0) {
clearInterval(intervalId.value); // 清除定时器
showTips.value = false;
} else {
// 更新HTML元素的内容 hoursQ
countdown.value.daysQ = days;
countdown.value.hoursQ = hours;
countdown.value.minutesQ = minutes;
countdown.value.secondsQ = seconds;
// console.log(`倒计时: ${days}天 ${hours}小时 ${minutes}分钟 ${seconds}秒`, '111111111');
}
}
// 初始化预警统计的Echarts
const initEcharts = (id) => {
AllData.YJChangeIndex = id;
let Data1 = [];
let Data2 = [];
if (AllData.YJChangeIndex == 1) {
Data1 = [6, 2, 1, 5, 7, 6, 3];
Data2 = [16, 7, 8, 12, 16, 13, 12];
} else if (AllData.YJChangeIndex == 2) {
Data1 = [2, 3, 8, 3, 2, 1, 4];
Data2 = [7, 16, 13, 16, 12, 8, 12];
} else {
Data1 = [6, 4, 3, 5, 8, 3, 8];
Data2 = [8, 12, 16, 13, 16, 7, 12];
}
if (!!AllData.timer) {
clearTimeout(AllData.timer);
}
if (!!myChart.value) {
myChart.value.dispose();
}
myChart.value = echarts.init(document.getElementById("YJEchartsBox"));
myChart.value.off("click");
myChart.value.setOption({
color: ["#18A7F2", "#1AF7AA"],
tooltip: {
trigger: "axis",
},
grid: {
top: "30%",
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true,
},
legend: {
data: ["预警次数", "持续时长"],
textStyle: {
color: "#fffd", // 图例文字颜色
},
x: "40",
y: "10",
},
xAxis: [
{
type: "category",
data: ["今日", "09/27", "09/26", "09/25", "09/24", "09/23", "09/22"],
axisPointer: {
type: "shadow",
},
textStyle: {
color: "#EBFEFF",
},
axisLine: {
lineStyle: {
color: "#EBFEFF",
},
},
// boundaryGap: false,
},
],
yAxis: [
{
type: "value",
name: "预警次数",
min: 0,
max: 12,
interval: 2,
axisLabel: {
formatter: "{value}",
},
axisLine: {
lineStyle: {
color: "#AAC1CF",
},
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ["#184E5A"],
},
},
},
{
type: "value",
name: "持续时长",
min: 0,
max: 30,
interval: 5,
axisLabel: {
formatter: "{value}",
},
axisLine: {
lineStyle: {
color: "#AAC1CF",
},
},
splitLine: {
lineStyle: {
// 使用深浅的间隔色
color: ["#184E5A"],
},
},
},
],
series: [
{
name: "预警次数",
type: "bar",
barWidth: "10px",
showBackground: true,
tooltip: {
valueFormatter: function (value) {
return value + " 次";
},
},
itemStyle: {
// borderRadius: 10, // 统一设置四个角的圆角大小
borderRadius: [10, 10, 0, 0], //（顺时针左上，右上，右下，左下）
},
data: Data1,
},
{
name: "持续时长",
type: "line",
yAxisIndex: 1,
tooltip: {
valueFormatter: function (value) {
return value + "min";
},
},
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#1AF7AA",
},
{
offset: 1,
color: "#1AF7AA00",
},
]),
},
data: Data2,
},
],
});
myChart.value.on("click", (param) => {
console.log(param);
let data = {
title: "风险监测",
comIDs: ["RQ_FengXianJianCe"],
};
bus.emit("publicDialog", data);
let a = {
value: "全部",
endTime: "2024-10-05",
};
setTimeout(() => {
bus.emit("getDataListFxjc", a);
}, 500);
});
animateChart();
};
const animateChart = () => {
let length = 7;
let i = 0;
AllData.timer = setInterval(() => {
i++;
if (i == length) i = 0;
myChart.value.dispatchAction({
type: "showTip",
seriesIndex: 0,
dataIndex: i,
});
}, 2000);
};
// 初始化管道风险的Echarts: ["市政老化", "庭院老化", "立管老化", "其他"]
const initEcharts2 = () => {
if (!!myChart2.value) {
myChart2.value.dispose();
}
myChart2.value = echarts.init(document.getElementById("Echarts2Box"));
myChart2.value.off("click");
myChart2.value.setOption({
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "5%",
top: "5%",
right: "5%",
bottom: "5%",
containLabel: true,
},
xAxis: {
type: "category",
triggerEvent: true,
axisLine: {
show: false,
},
axisLabel: {
color: "#FFFFFF",
fontSize: "14",
// interval: 0,
// rotate: rotate//文字旋转角度
},
axisTick: {
// show: false,
alignWithLabel: true,
lineStyle: {
color: "#0C4F81",
type: "solid",
},
},
// data: xAxisData,
data: ["市政老化", "庭院老化", "立管老化", "其他"],
},
yAxis: {
type: "value",
nameTextStyle: {
color: "#4F88BD",
padding: [0, 25, -5, 0],
fontSize: 12,
fontFamily: "Microsoft YaHei",
},
axisLine: {
show: true,
lineStyle: {
color: "#0C4F81",
},
},
axisLabel: {
color: "#4F88BD",
fontSize: "12",
formatter: "{value}",
},
splitLine: {
lineStyle: {
type: "dotted",
color: "#0C4F81",
},
},
axisTick: {
show: false,
},
},
series: [
{
z: 2,
type: "pictorialBar",
symbolPosition: "end",
data: [410, 420, 520, 520],
symbol: "diamond",
symbolOffset: ["0", "-40%"], //盖子的位置
symbolSize: [15, 13], //盖子的大小
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(1, 224, 238, 1 )" },
{ offset: 1, color: "rgba(1, 224, 238, 1)" },
],
}, //盖子的颜色
},
tooltip: {
show: false,
},
},
{
z: 1,
type: "bar",
barWidth: 15,
barGap: "50%",
data: [410, 420, 520, 520],
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(1, 224, 238, 0.8)" },
{ offset: 0.5, color: "rgba(1, 224, 238, 0.5)" },
{ offset: 0.5, color: "rgba(1, 224, 238, 0.1)" },
{ offset: 1, color: "rgba(1, 224, 238, 0.8)" },
],
},
},
},
],
});
myChart2.value.on("click", (param) => {
console.log(param);
TuChengClick(param.dataIndex - 1);
});
};
// 动态计算盒子的宽度
const getWidth = (item, num) => {
let widthNum = 0;
if (num == 1) {
widthNum = (item.num1 / (item.num1 + item.num2)) * 100;
} else {
widthNum = (item.num2 / (item.num1 + item.num2)) * 100;
}
return `width:${widthNum}%`;
};
// 工单派发
const GongDanPaiFa = (item) => {
console.log(item);
let data = {
title: item.qy,
comIDs: ["gdpf"],
getSiteId: item.value,
};
bus.emit("publicDialog", data);
};
// // 风险
// const FengXianClick = (item) => {
// console.log(item);
// let data = {
// title: item.zb + " 风险监测",
// comIDs: ["RQ_FengXianJianCe"],
// };
// bus.emit("publicDialog", data);
// };
// 风险监测派发
const PaiFa = (item) => {
console.log(item);
let data = {
title: "智慧外呼",
comIDs: ["RQ_ZhiHuiWaiHu"],
getSiteId: item.value,
};
bus.emit("publicDialog", data);
};
//巡查反馈处理、未处理
const dealOrNoDeal = (item) => {
AllData.xunChaStatic = item;
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 12,
pitch: 55,
});
bus.emit("removeMapDatas", ["warning_monitor"]);
if (item == 1) {
let removedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
let selectedLayer = AllData.xunChaLayers.filter((layer) =>
layer.includes("alreadyDeal")
);
bus.emit("removeMapDatas", AllData.xunChaLayers);
bus.emit("setGeoJSON", { json: zaWuDuiFang, key: "alreadyDeal_DF" });
bus.emit("setGeoJSON", { json: sheBeiLost, key: "alreadyDeal_DS" });
bus.emit("setGeoJSON", { json: xiaXian, key: "alreadyDeal_XX" });
bus.emit("setGeoJSON", { json: yiBian, key: "alreadyDeal_YB" });
bus.emit("setGeoJSON", { json: rq_QiTa, key: "alreadyDeal_QT" });
selectedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: true });
});
} else {
let removedLayer = AllData.xunChaLayers.filter((layer) =>
layer.includes("alreadyDeal")
);
let selectedLayer = AllData.xunChaLayers.filter((layer) => layer.includes("noDeal"));
bus.emit("removeMapDatas", AllData.xunChaLayers);
bus.emit("setGeoJSON", { json: no_zaWuDuiFang, key: "onDeal_DF" });
bus.emit("setGeoJSON", { json: no_sheBeiLost, key: "onDeal_DS" });
bus.emit("setGeoJSON", { json: no_xiaXian, key: "onDeal_XX" });
bus.emit("setGeoJSON", { json: no_yiBian, key: "onDeal_YB" });
bus.emit("setGeoJSON", { json: no_rq_QiTa, key: "onDeal_QT" });
selectedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: true });
});
}
};
// 巡查反馈
const XunChaFanKui = (item) => {
let removedLayer = [];
let selectedLayer = [];
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 12,
pitch: 55,
});
switch (item.name) {
case "堆放杂物":
removedLayer = AllData.xunChaLayers.filter(
(layer) => layer != "alreadyDeal_DF" && layer != "noDeal_DF"
);
selectedLayer = AllData.xunChaLayers.filter(
(layer) => layer == "alreadyDeal_DF" || layer == "noDeal_DF"
);
selectedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: true });
});
removedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: false });
});
break;
case "设备丢失":
removedLayer = AllData.xunChaLayers.filter(
(layer) => layer != "alreadyDeal_DS" && layer != "noDeal_DS"
);
selectedLayer = AllData.xunChaLayers.filter(
(layer) => layer == "alreadyDeal_DS" || layer == "noDeal_DS"
);
selectedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: true });
});
removedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: false });
});
break;
case "下陷":
removedLayer = AllData.xunChaLayers.filter(
(layer) => layer != "alreadyDeal_XX" && layer != "noDeal_XX"
);
selectedLayer = AllData.xunChaLayers.filter(
(layer) => layer == "alreadyDeal_XX" || layer == "noDeal_XX"
);
selectedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: true });
});
removedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: false });
});
break;
case "异变":
removedLayer = AllData.xunChaLayers.filter(
(layer) => layer != "alreadyDeal_YB" && layer != "noDeal_YB"
);
selectedLayer = AllData.xunChaLayers.filter(
(layer) => layer == "alreadyDeal_YB" || layer == "noDeal_YB"
);
selectedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: true });
});
removedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: false });
});
break;
case "其他":
removedLayer = AllData.xunChaLayers.filter(
(layer) => layer != "alreadyDeal_QT" && layer != "noDeal_QT"
);
selectedLayer = AllData.xunChaLayers.filter(
(layer) => layer == "alreadyDeal_QT" || layer == "noDeal_QT"
);
selectedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: true });
});
removedLayer.forEach((layer) => {
bus.emit("setLayerVisible", { layername: layer, isCheck: false });
});
break;
}
};
// 风险评估
const TuChengClick = (item) => {
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 12,
pitch: 55,
});
switch (item) {
case 0:
bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_all", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
break;
case 1:
bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: true });
bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
break;
case 2:
bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: true });
bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
break;
case 3:
bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: true });
bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
break;
case 4:
bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_other", isCheck: true });
break;
}
};
// 风险
const FengXianClick = (item) => {
let data = {
title: item.zb + " 风险监测",
comIDs: ["RQ_FengXianJianCe"],
};
bus.emit("publicDialog", data);
// 传给组件数据
setTimeout(() => {
bus.emit("getDataListFxjc", item);
}, 500);
};
// 现场连线
const XianChangLianXian = (item) => {
bus.emit("OpenRY");
};
// 发布预警
const WarningClick = (item) => {
let data = {
title: "发布预警",
comIDs: ["RQ_Warning"],
};
bus.emit("publicDialog", data);
};
watch(
() => props.showPanel,
() => {
showPanel.value = props.showPanel;
},
{ immediate: true }
);
//燃气超标
const showIndexOver = () => {
bus.emit("removeMapDatas", AllData.xunChaLayers);
let key = "warning_monitor";
bus.emit("getGeojsonByType", {
type: key,
callback: (geojson) => {
if (!!!geojson.features.length)
bus.emit("setGeoJSON", { json: yanAnRQoverindex, key: "warning_monitor" });
bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
},
});
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 13,
});
};
//燃气告警
const showIndexWarning = () => {
bus.emit("removeMapDatas", AllData.xunChaLayers);
let key = "warning_monitor";
bus.emit("getGeojsonByType", {
type: key,
callback: (geojson) => {
if (!!!geojson.features.length)
bus.emit("setGeoJSON", { json: yanAnWarring, key: "warning_monitor" });
bus.emit("setLayerVisible", { type: "point", layername: key, isCheck: true });
},
});
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 13,
});
};
onMounted(() => {
bus.on("Rq_head", (val) => {
if (val == false) {
showTips.value = false;
} else {
showTips.value = true;
AllData.showTipsData = val;
runTime();
}
});
let initeRQTimer = setInterval(() => {
if (!newfiberMapbox) return;
if (!newfiberMapbox.map.getLayer("rq_pipeline_info")) return;
if (!newfiberMapbox.map.getLayer("sx_ya_smx_rq_point")) return;
newfiberMapbox.map.easeTo({
center: [109.488, 36.596],
zoom: 12,
});
//告警点事件
let warningPoint = newfiberMapbox
.getLayers()
.filter((feature) => feature.newfiberId == "warning_monitor")[0];
if (warningPoint) {
warningPoint.on("click", (e) => {
let popupData = e.feature.properties;
debugger;
console.log("popupData---", "告警---------", popupData);
FengXianClick({
zb: "甲烷浓度",
sz: "3%",
szzt: true,
zt: 0, //0预警 1 正常
value: "JWND",
});
});
}
bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: true }); //所有管网rq_all、市政rq_SZLH、庭院rq_TYLH、立管rq_LGLH、其他rq_other
bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: true });
bus.emit("setLayerVisible", { layername: "sx_ya_smx_rq_line_sz", isCheck: true });
bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: true });
bus.emit("setLayerVisible", { layername: "sx_ya_smx_rq_line_zg", isCheck: true });
clearInterval(initeRQTimer);
}, 100);
initEcharts(1);
initEcharts2();
});
onBeforeUnmount(() => {
bus.off("Rq_head");
bus.emit("setLayerVisible", { layername: "rq_all", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_SZLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_TYLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_LGLH", isCheck: false });
bus.emit("setLayerVisible", { layername: "rq_other", isCheck: false });
bus.emit("removeMapDatas", AllData.xunChaLayers);
bus.emit("removeMapDatas", ["warning_monitor"]);
bus.emit("setLayerVisible", { layername: "warning_monitor", isCheck: false });
bus.emit("closeCesiumPopup");
bus.emit("SetLayerShow", ["蓝色地图"]);
if (!!newfiberMapbox.getLayerByName("rqLine")) {
newfiberMapbox.removeLayer(newfiberMapbox.getLayerByName("rqLine"));
}
});
</script>
<style lang="scss" scoped>
@import "@/assets/styles/transition_oneMap.scss";
#ZHRQ {
.warningPrompt {
position: absolute;
top: 250px;
left: 950px;
width: 730px;
height: 34px;
// background: rgba(49, 91, 124, 0.5);
// background: red;
border-radius: 48px;
transform: translateX(-50%);
z-index: 20;
padding: 0 12px;
font-size: 14px;
font-weight: 400;
color: #ffffff;
border: 1px solid #ff0303;
animation: blink 1s linear infinite;
span {
margin: 0 2px;
}
@keyframes blink {
0% {
box-shadow: 0 0 0 rgba(255, 3, 3, 0.1) inset;
}
50% {
box-shadow: 0 0 10px rgba(255, 3, 3, 0.6) inset;
}
100% {
box-shadow: 0 0 20px rgba(255, 3, 3, 0.8) inset;
}
}
}
.radBg {
display: block;
line-height: 22px;
background: linear-gradient(180deg, #5c0000 0%, #ff0000 100%);
border-radius: 2px 2px 2px 2px;
border: 1px solid #ff5449;
padding: 0 3px;
}
.LeftBox {
width: 450px;
height: calc(100% - 98px);
position: absolute;
left: 10px;
top: 70px;
background: linear-gradient(
0deg,
rgba(0, 43, 67, 0.8) 0%,
rgba(0, 69, 108, 0.8) 100%
);
border-radius: 6px;
border: 1px solid #47eef3;
box-sizing: border-box;
padding: 10px;
box-shadow: inset 0 0 5px 5px #47eef38a;
.LeftBox1_1 {
height: 365px;
.TJListBox {
height: 42px;
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
.TJList {
height: 42px;
width: calc(50% - 9px);
display: flex;
.TJListImg {
width: 22px;
height: 22px;
margin: 9px;
}
.TJListName {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #f4f9ff;
width: 65px;
height: 40px;
line-height: 40px;
}
.TJListValue {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 20px;
width: calc(100% - 110px);
height: 40px;
line-height: 40px;
text-align: right;
}
}
.TJList_RQ {
background: rgba(7, 54, 102, 0.3);
border-radius: 4px;
border: 1px solid #15d2fd;
box-shadow: inset 0 0 10px #15d2fdb0; /* 水平偏移|垂直偏移|模糊半径|颜色 */
cursor: pointer;
.TJListValue {
color: #12f9ff;
}
}
.TJList_GZ {
background: rgba(164, 74, 8, 0.3);
border-radius: 4px;
border: 1px solid #ffd97f;
box-shadow: inset 0 0 10px #ffd97fb0; /* 水平偏移|垂直偏移|模糊半径|颜色 */
.TJListValue {
color: #ffd97f;
}
}
}
.RQ_EchartsBox {
width: 100%;
height: calc(100% - 72px);
margin-top: 10px;
// background: url("@/assets/images/Sponge_screen/RQ/Ech.png") no-repeat center;
position: relative;
.ClickDiv1 {
width: 80px;
height: 250px;
// background: #ff000063;
position: absolute;
bottom: 0px;
left: 60px;
cursor: pointer;
}
.ClickDiv2 {
width: 80px;
height: 250px;
// background: #ff000063;
position: absolute;
bottom: 0px;
left: 160px;
cursor: pointer;
}
.ClickDiv3 {
width: 80px;
height: 250px;
// background: #ff000063;
position: absolute;
bottom: 0px;
left: 255px;
cursor: pointer;
}
.ClickDiv4 {
width: 80px;
height: 250px;
// background: #ff000063;
position: absolute;
bottom: 0px;
left: 340px;
cursor: pointer;
}
}
}
.LeftBox1_2 {
height: calc(100% - 365px - 275px - 10px);
margin-bottom: 10px;
// 风险监测
.TJListBox {
height: 42px;
margin-top: 10px;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
.TJList2 {
height: 42px;
width: calc(50% - 9px);
display: flex;
background: url("@/assets/images/Sponge_screen/RQ/RQ_FX.png") no-repeat center;
background-size: 100% 100%;
cursor: pointer;
.TJList2Name {
width: 50%;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #f4f9ff;
height: 40px;
line-height: 40px;
text-align: left;
box-sizing: border-box;
padding-left: 20px;
}
.TJList2Value {
width: 50%;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 20px;
color: #12f9ff;
height: 40px;
line-height: 40px;
text-align: center;
}
}
}
.TableChange {
height: 42px;
width: 100%;
box-sizing: border-box;
padding: 10px 0px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: center;
.TableChangeList {
width: 60px;
height: 22px;
background: #00344f;
border-radius: 2px;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 14px;
color: #c1d3d4;
text-align: center;
line-height: 20px;
cursor: pointer;
}
.TableCheck {
background: #00344f;
border-radius: 2px;
border: 1px solid #1cf5fc;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 12px;
color: #ebfeff;
background: #1cf4fc22;
}
}
.TableBox {
width: 100%;
height: calc(100% - 94px);
.tableHeader {
width: 100%;
height: 34px;
background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
border-radius: 2px;
border: 1px solid #74dde1;
display: flex;
.tableHeaderList {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 34px;
text-align: center;
}
.tableList1 {
width: 20%;
}
.tableList2 {
width: 30%;
}
.tableList3 {
width: 30%;
}
.tableList4 {
width: 20%;
}
}
.tableBody {
width: 100%;
height: calc(100% - 68px);
overflow: auto;
.tableBodyList {
height: 34px;
line-height: 34px;
width: 100%;
display: flex;
/* 选择偶数行 */
&:nth-child(even) {
background: linear-gradient(0deg, #008599 0%, #08596d 100%);
}
.tableBodyList_span1 {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 34px;
text-align: center;
width: 20%;
cursor: pointer;
}
.tableBodyList_span2 {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 34px;
text-align: center;
width: 30%;
cursor: pointer;
}
.tableBodyList_span3 {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 34px;
text-align: center;
width: 30%;
}
.YJClass {
color: #ffe243;
}
.tableBodyList_span4 {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 34px;
text-align: center;
width: 20%;
cursor: pointer;
}
}
}
.tableFoot {
width: 100%;
height: 34px;
background: linear-gradient(0deg, #008599b7 0%, #08596d91 100%);
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ebfeff;
line-height: 34px;
text-align: center;
}
}
}
.LeftBox1_3 {
height: 275px;
.TableChange2 {
height: 42px;
width: 200px;
box-sizing: border-box;
padding: 10px 0px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-end;
align-items: center;
position: absolute;
top: 0px;
right: 0px;
z-index: 999;
.TableChangeList2 {
width: 60px;
height: 22px;
background: #00344f;
border-radius: 2px;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 16px;
color: #c1d3d4;
text-align: center;
line-height: 20px;
cursor: pointer;
}
.TableCheck2 {
background: #00344f;
border-radius: 2px;
border: 1px solid #1cf5fc;
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 16px;
color: #ebfeff;
background: #1cf4fc22;
}
}
#YJEchartsBox {
width: 100%;
height: 100%;
}
}
}
.RightBox {
width: 450px;
height: calc(100% - 98px);
position: absolute;
right: 10px;
top: 70px;
background: linear-gradient(
0deg,
rgba(0, 43, 67, 0.8) 0%,
rgba(0, 69, 108, 0.8) 100%
);
border-radius: 6px;
border: 1px solid #47eef3;
box-sizing: border-box;
padding: 10px;
box-shadow: inset 0 0 5px 5px #47eef38a;
.RightBox1_1 {
height: calc(100% - 298px);
margin-bottom: 10px;
box-sizing: border-box;
// padding: 0 10px;
.JCListBox {
margin-top: 10px;
width: 100%;
height: 196px;
background: linear-gradient(0deg, #008599 0%, #08596d 100%);
border-radius: 4px;
overflow: hidden;
.JCListBox_List {
width: 100%;
height: 28px;
margin-top: 10px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-evenly;
align-items: center;
.JCListBox_List_label {
display: inline-block;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 28px;
line-height: 28px;
text-align: right;
width: 70px;
}
.JCListBox_List_value {
display: inline-block;
border: 1px solid #1cf5fc;
width: 290px;
height: 28px;
line-height: 28px;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
text-align: center;
}
}
.JCListBox_List_BTN {
justify-content: center;
align-items: center;
}
}
}
.RightBox1_2 {
height: 288px;
.FK_headerBox {
width: 100%;
height: 45px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
cursor: pointer;
.FK_headerBox_list {
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 14px;
color: #ebfeff;
width: 100px;
text-align: center;
.FK_headerBox_list_colorBox1 {
display: inline-block;
width: 10px;
height: 10px;
background: #ee5777;
}
.FK_headerBox_list_colorBox2 {
display: inline-block;
width: 10px;
height: 10px;
background: #00ffbe;
}
}
}
.FK_bodyBox {
width: 100%;
height: 200px;
overflow: auto;
box-sizing: border-box;
padding: 0 30px;
.FK_bodyBox_list {
width: 100%;
height: 20px;
margin-bottom: 20px;
display: flex;
.FK_bodyBox_list_label {
display: block;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 14px;
color: #ffffff;
width: 80px;
cursor: pointer;
}
.FK_BigBox {
display: block;
width: calc(100% - 80px);
height: 20px;
.FK_CenBox1 {
display: inline-block;
height: 20px;
background: linear-gradient(-90deg, #f35f7f 0%, #c21439 100%);
font-family: Source Han Sans CN;
font-weight: bold;
font-size: 14px;
color: #ffffff;
text-align: right;
line-height: 20px;
box-sizing: border-box;
padding: 0 10px;
}
.FK_CenBox2 {
display: inline-block;
height: 20px;
background: linear-gradient(90deg, #20d9aa 0%, #0882a0 100%);
font-weight: bold;
font-size: 14px;
color: #ffffff;
text-align: right;
line-height: 20px;
box-sizing: border-box;
padding: 0 10px;
}
}
}
}
}
}
.TopBox {
width: calc(100% - 1040px);
height: 122px;
position: absolute;
left: 520px;
top: 110px;
background: linear-gradient(
0deg,
rgba(0, 43, 67, 0.8) 0%,
rgba(0, 69, 108, 0.8) 100%
);
border-radius: 6px;
border: 1px solid #47eef3;
box-sizing: border-box;
box-shadow: inset 0 0 5px 5px #47eef38a;
padding: 10px;
.TopTableHeader {
width: 100%;
height: 34px;
background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
border: 1px solid #74dde1;
display: flex;
}
.TopTableBody {
width: 100%;
height: calc(100% - 34px);
overflow: auto;
// display: flex;
// flex-direction: column;
// flex-wrap: nowrap;
.TopTableBody_list {
display: inline-block;
width: 100%;
height: 34px;
/* 选择偶数行 */
&:nth-child(even) {
background: linear-gradient(0deg, #008599 0%, #08596d 100%);
}
}
}
.TopTableListSpan {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 34px;
display: inline-block;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis; /* 超出宽度后显示省略号 */
white-space: nowrap; /* 限制不允许换行 */
}
.TopTableListSpan1 {
width: 20%;
text-align: left;
padding-left: 10px;
}
.TopTableListSpan2 {
width: 25%;
text-align: center;
}
.TopTableListSpan3 {
width: 20%;
text-align: center;
}
.TopTableListSpan4 {
width: 10%;
text-align: center;
}
.TopTableListSpan5 {
width: 15%;
text-align: center;
}
.TopTableListSpan6 {
width: 10%;
text-align: right;
padding-right: 10px;
.TopTableListSpanImg {
width: 15px;
height: 19px;
margin: 7px;
cursor: pointer;
}
.TopTableListSpanImg2 {
width: 19px;
height: 19px;
margin: 7px;
cursor: pointer;
}
}
}
.bottomBox {
width: calc(100% - 1040px);
height: 122px;
position: absolute;
left: 510px;
bottom: 180px;
background: linear-gradient(
0deg,
rgba(0, 43, 67, 0.8) 0%,
rgba(0, 69, 108, 0.8) 100%
);
border-radius: 6px;
border: 1px solid #47eef3;
box-sizing: border-box;
box-shadow: inset 0 0 5px 5px #47eef38a;
padding: 10px;
.TopTableHeader {
width: 100%;
height: 34px;
background: linear-gradient(0deg, #00fbffa3 0%, #00fbff00 100%);
border: 1px solid #74dde1;
display: flex;
}
.TopTableBody {
width: 100%;
height: calc(100% - 34px);
overflow: auto;
// display: flex;
// flex-direction: column;
// flex-wrap: nowrap;
.TopTableBody_list {
display: inline-block;
width: 100%;
height: 34px;
/* 选择偶数行 */
&:nth-child(even) {
background: linear-gradient(0deg, #008599 0%, #08596d 100%);
}
}
}
.TopTableListSpan {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 34px;
display: inline-block;
box-sizing: border-box;
overflow: hidden;
text-overflow: ellipsis; /* 超出宽度后显示省略号 */
white-space: nowrap; /* 限制不允许换行 */
}
.TopTableListSpan1 {
width: 25%;
text-align: left;
padding-left: 10px;
}
.TopTableListSpan2 {
width: 25%;
text-align: center;
}
.TopTableListSpan3 {
width: 25%;
text-align: center;
}
.TopTableListSpan4 {
width: 25%;
text-align: right;
padding-right: 10px;
}
}
// 左右两侧展示板块公共样式
.ComBox {
width: 100%;
box-sizing: border-box;
.Box_header {
width: 100%;
height: 43px;
background: url("@/assets/images/Sponge_screen/Box_HeaderBackground.png") no-repeat
center;
background-size: cover;
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 23px;
color: #ebfeff;
line-height: 43px;
box-sizing: border-box;
padding-left: 35px;
}
.Box_Body {
width: 100%;
height: calc(100% - 43px);
box-sizing: border-box;
position: relative;
overflow: auto;
}
}
.color_red {
color: #ff3f3f !important;
}
.IssueWarning {
width: 40px;
height: 60px;
position: absolute;
bottom: 150px;
left: 1400px;
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 13px;
color: #ffffff;
text-align: center;
background: #003756;
border-radius: 28px;
border: 1px solid #53c6c9;
display: flex;
align-items: center;
cursor: pointer;
box-shadow: inset 0 0 5px 2px #47eef38a;
}
}
</style>
