<!--智慧排水左右侧面板 -->
<template>
<!-- 风险评估 -->
<div class="riskAssessment">
<div class="ListBoxHeader" style="cursor: pointer" @click="ShowSiSetu(true)">
<div class="ListBoxHeader_font">监测与分析</div>
</div>
<div class="Assessmentop">
<div class="subRightBox">
<div
class="headcenter"
v-for="(item, index) in monitorData"
:key="item"
:class="monitorname == item.name ? 'activedright' : ''"
@click="monitorclick(item, index)"
>
{{ item.name }}
</div>
</div>
<div class="waterBox" v-if="monitorname == '流量监测(0/4)'">
<div class="waterroll">
<div class="tableHeader">
<span class="tableHeaderList tableList1">序号</span>
<span class="tableHeaderList tableList2">河道</span>
<span class="tableHeaderList tableList3">当前流量m³/s</span>
<span class="tableHeaderList tableList4">警戒流量m³/s</span>
<span class="tableHeaderList tableList5">状态</span>
</div>
<div class="tableBody">
<div
class="tableBodyList"
v-for="item in FXJCData"
:class="HhName == item.hd ? 'activedright' : ''"
>
<span class="tableBodyList_span1">{{ item.xh }}</span>
<span class="tableBodyList_span2" @click="WzTrigger(item.hd)"
>{{ item.hd }}
</span>
<span class="tableBodyList_span3">{{ item.dqsw }}</span>
<span class="tableBodyList_span4">{{ item.kzsw }} </span>
<span class="tableBodyList_span5">
<el-tag type="success" v-if="item.zt == '正常'">正常</el-tag>
<el-tag
@click="showcswDalog(item)"
style="cursor: pointer"
type="warning"
v-if="item.zt == '超控制常水位'"
>超控制常水位</el-tag
>
</span>
</div>
</div>
</div>
<div class="watercontent">
<div class="Titlelarge">河湖简介：{{ HhName }}</div>
<div class="Contentdetails">
{{ hdJj }}
</div>
</div>
</div>
<div class="leftSubTabsBox">
<div class="tabContent" v-if="monitorname == '漫溢监测(1/29)'">
<ul>
<li
class="listOne curCick"
v-for="(i, index) in listData"
:key="index"
@click="showMapDalog(i)"
>
<div class="line flex flex-align-center">
<div class="lable">站点名称：</div>
<div class="box flex flex-align-center flex-justcontent-center">
{{ i.siteName }}
</div>
<span
class="box_Status"
:class="i.onlineStatus == 'online' ? 'green' : 'rad'"
>{{ i.onlineStatus == "online" ? "在线" : "离线" }}</span
>
</div>
<div class="line flex flex-align-center">
<div class="lable">水<i></i>深：</div>
<div class="box flex flex-align-center flex-justcontent-center">
{{ i.z || 0 }}米
</div>
</div>
<div class="line flex flex-align-center">
<div class="lable">风险分析：</div>
<div
class="box flex flex-align-center flex-justcontent-center"
:class="i.riskAnalysis != '无风险' ? 'cRad' : 'cGreen'"
>
{{ i.riskAnalysis }}
</div>
</div>
</li>
</ul>
</div>
<div class="tabContent" v-if="monitorname == '积水监测(0/16)'">
<ul>
<li
class="listOne curCick"
v-for="(i, index) in listData"
:key="index"
@click="JSshowMapDalog(i)"
>
<div class="line flex flex-align-center">
<div class="lable">站点名称：</div>
<div class="box flex flex-align-center flex-justcontent-center">
{{ i.siteName }}
</div>
<span
class="box_Status"
:class="i.onlineStatus == 'online' ? 'green' : 'rad'"
>{{ i.onlineStatus == "online" ? "在线" : "离线" }}</span
>
</div>
<div class="line flex flex-align-center">
<div class="lable">水<i></i>深：</div>
<div class="box flex flex-align-center flex-justcontent-center">
{{ i.z || 0 }}米
</div>
</div>
<div class="line flex flex-align-center">
<div class="lable">风险分析：</div>
<div
class="box flex flex-align-center flex-justcontent-center"
:class="i.riskAnalysis != '无风险' ? 'cRad' : 'cGreen'"
>
{{ i.riskAnalysis }}
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 实时预警 -->
<div class="WarningSou">
<div class="ListBoxHeader">
<div class="ListBoxHeader_font">实时预警</div>
</div>
<div class="WarningSouTop">
<div class="tableHeader">
<span class="tableHeaderList tableList1">位置</span>
<span class="tableHeaderList tableList2">数据(cm)</span>
<span class="tableHeaderList tableList3">状态</span>
<span class="tableHeaderList tableList4">操作</span>
</div>
<Vue3SeamlessScroll
:list="SSYJData"
:singleHeight="34"
:singleWaitTime="1500"
:hover="true"
class="tableBody"
>
<div class="tableBodyList" v-for="item in SSYJData">
<span class="tableBodyList_span1">{{ item.wranLocation }}</span>
<span class="tableBodyList_span2"> {{ item.riskProfile }}</span>
<span class="tableBodyList_span3">{{ item.assessment }}</span>
<span class="tableBodyList_span4">
<el-tag
style="cursor: pointer"
type="danger"
v-if="item.distribute == 0"
@click="paidan(item)"
size="small"
>派单</el-tag
>
<el-tag size="small" type="success" v-if="item.distribute == 1"
>已派单</el-tag
>
</span>
</div>
</Vue3SeamlessScroll>
</div>
</div>
<!-- 预警与处置 -->
<div class="WarningAssess">
<div class="ListBoxHeader">
<div class="ListBoxHeader_font">预警与处置</div>
</div>
<div class="TopProportion">
<div class="WarningSl">
<div class="eachDescribe">
<div class="icon bgcls"></div>
<div class="text">预警数量</div>
</div>
<div class="eachDescribe">
<div class="icon bgcYellow"></div>
<div class="text">处置数量</div>
</div>
</div>
<div class="WarningNy">
<div class="head-right" style="">
<div
class="head-item"
v-for="(item, index) in yearList"
:key="index"
:class="activedname == item.name ? 'activedright' : ''"
@click="yearclick(item, index)"
>
{{ item.name }}
</div>
</div>
</div>
</div>
<div class="fxChart">
<AssessmentjsEcharts
:data="chartData2"
:refresh="chartData2.refresh"
></AssessmentjsEcharts>
</div>
</div>
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue";
import AssessmentjsEcharts from "@/views/oneMap/Echarts/AssessmentjsEcharts.vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import bus from "@/bus";
import { commonWarningList } from "@/api/RQWarning";
import mapBoxVectorLayer from "@/utils/GISdocument/mapboxVectorLayer.js";
import {
selectBoxBySiteNo,
selectSiteMonitorBySiteType,
waterloggingArchiveList,
} from "@/api/system/tanchuang";
import dialogTabsStore from "@/store/modules/dialogTabs";
const useDialogTabs = dialogTabsStore();
const FXJCData = ref([
{
xh: "1",
hd: "延河",
dqsw: 130,
kzsw: 2000,
// zt: '超控制常水位',
zt: "正常",
siteNo: "2024101614",
position: [109.497341, 36.603151],
},
{
xh: "2",
hd: "杜甫川河",
dqsw: 10,
kzsw: 300,
zt: "正常",
siteNo: "2024101615",
position: [109.417646, 36.571427],
},
{
xh: "3",
hd: "西川河",
dqsw: 11,
kzsw: 700,
zt: "正常",
siteNo: "2024101616",
position: [109.383491, 36.634602],
},
{
xh: "4",
hd: "南川河",
dqsw: 12,
kzsw: 700,
zt: "正常",
siteNo: "2024101617",
position: [109.476953, 36.536511],
},
]);
const listData = ref([
{
siteName: "东关大街与长青路交叉口",
onlineStatus: "online",
riskAnalysis: "无风险",
siteNo: "2024101612",
position: "109.504561,36.60637",
},
{
siteName: "大桥街与延河西路交叉口",
onlineStatus: "online",
riskAnalysis: "无风险",
siteNo: "2024101613",
position: "109.497323,36.60318",
},
{
siteName: "文化沟路与延河西路交叉口",
siteStatus: "在线",
riskAnalysis: "无风险",
siteNo: "2024101634",
position: "109.480944,36.613436",
},
]);
const jsjcData = ref([
// { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险', siteNo: '2024101612' },
// { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险', siteNo: '2024101613' },
// // { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo}
]);
const SSYJData = ref([
// {
// wz: '东大街管网',
// sj: 25,
// zk: '高水位',
// cz: '派单',
// value: '004', //语音识别内容编码-前段自己设置的,后期项目有接口就直接替换数据唯一id
// },
// {
// wz: '枣园南路与枣园五路管网',
// sj: 40,
// zk: '满管',
// cz: '派单',
// value: '005',
// },
// {
// wz: '王家坪旧址门口',
// sj: 12,
// zk: '积水',
// cz: '派单',
// value: '006',
// },
// {
// wz: '金延安路与枣园大道管网 ',
// sj: 50,
// zk: '满管',
// cz: '已派单',
// },
// {
// wz: '延大路与杨家岭路管网 ',
// sj: 50,
// zk: '满管',
// cz: '已派单',
// },
]);
const yearList = ref([
{ name: "月", value: 1 },
{ name: "年", value: 2 },
]);
const monitorData = ref([
{ name: "积水监测(0/16)", value: 2 },
{ name: "漫溢监测(1/29)", value: 1 },
{ name: "流量监测(0/4)", value: 2 },
]);
const chartData2 = ref({
xAxis: ["11/7", "11/8", "11/9", "11/10", "11/11", "11/12"],
refresh: 1,
});
const HhName = ref("延河");
const hdJj = ref(
"延河属黄河一级支流,发源于陕西省靖边县东南山区的天赐湾乡高峁山,流向东南经安塞、延安市区、延长县于南河沟乡凉水岸汇入黄河,全长286.9km,流域面积7725km2。以安塞化子坪、延安市的甘谷驿为界,可将延河分为上、中、下游河段,上游河谷狭窄,多呈“V”型,宽度10～80m,中游平均宽度600m,甘谷驿以下河段一般在1500m左右。"
);
const activedname = ref("月");
const monitorname = ref("漫溢监测(1/29)");
function yearclick(val) {
activedname.value = val.name;
}
function monitorclick(val) {
monitorname.value = val.name;
if (monitorname.value == "漫溢监测(1/29)") {
listData.value = [
{
siteName: "东关大街与长青路交叉口",
onlineStatus: "online",
riskAnalysis: "无风险",
siteNo: "2024101612",
position: "109.504561,36.60637",
},
{
siteName: "大桥街与延河西路交叉口",
onlineStatus: "online",
riskAnalysis: "无风险",
siteNo: "2024101613",
position: "109.504561,36.60637",
},
{
siteName: "文化沟路与延河西路交叉口",
siteStatus: "online",
warnInfo: "无风险",
siteNo: "2024101634",
position: "109.504561,36.60637",
},
];
} else if (monitorname.value == "积水监测(0/16)") {
listData.value = jsjcData.value;
// listData.value = [
// { siteName: '东关大街与长青路交叉口', siteStatus: '在线', warnInfo: '无风险' },
// { siteName: '大桥街与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
// // { siteName: '文化沟路与延河西路交叉口', siteStatus: '在线', warnInfo: '无风险' },
// ];
} else {
console.log(monitorname.value, " monitorname.value");
}
}
// 弹框
function showMapDalog(val) {
console.log("val.siteName", val);
useDialogTabs.addPosition(val.position.split(",").map((item) => parseFloat(item)));
let data = {
title: val.siteName,
// comIDs: ['gwpm', 'jcsj', 'danganInfo'], //满溢监测
comIDs: [], //满溢监测
SiteNo: val.siteNo,
};
getTabsList(val.siteNo).then((res) => {
data.comIDs = res;
bus.emit("publicDialog", data);
});
// showPipe.value = true;
}
// 积水弹框
function JSshowMapDalog(val) {
console.log("🚀 ~ JSshowMapDalog ~ val:", val);
// let data = {
// title: val.siteName,
// comIDs: ['spjk', 'jcsj', 'danganInfo'], //积水监测
// };
// bus.emit('publicDialog', data);
// useDialogTabs.addPosition(val.position); // 添加全景位置
useDialogTabs.addPosition(val.position.split(",").map((item) => parseFloat(item)));
let data = {
title: val.siteName,
// comIDs: ['gwpm', 'jcsj', 'danganInfo'], //满溢监测
comIDs: [], //满溢监测
SiteNo: val.siteNo,
};
getTabsList(val.siteNo).then((res) => {
// console.log('🚀 ~ getTabsList ~ res:', res);
data.comIDs = res;
bus.emit("publicDialog", data);
});
// showPipe.value = true;
}
// 派单
const paidan = (item) => {
let data = {
title: item.wranLocation,
comIDs: ["gdpf"],
getSiteId: item.id,
};
bus.emit("publicDialog", data);
};
// 超控制常水位
function showcswDalog(val) {
console.log(val, "val");
let data = {
title: val.hd + "监测点",
comIDs: ["PS_ckzcsw"],
};
bus.emit("publicDialog", data);
// showPipe.value = true;
}
// 获取实时预警列表
const getRealTimeWarning = async () => {
try {
const res = await commonWarningList({ moduleType: "drainage" });
SSYJData.value = res.data;
// console.log('🚀 ~ getCommonWarningList ~ res:', res);
} catch (error) {
console.log("🚀 ~ getCommonWarningList ~ error:", error);
}
};
// 获取站点弹窗 tab列表
const getTabsList = async (siteNo) => {
try {
const res = await selectBoxBySiteNo(siteNo);
const tabsList = res.data.boxList.map((item) => item.boxId);
return tabsList;
} catch (error) {
console.log(" ~ getTabsList ~ error:", error);
}
};
// 积水监测
const getWaterlogging = async () => {
try {
const res = await selectSiteMonitorBySiteType({
monitorTargetType: "waterlogging",
orderBy: "online_status asc",
siteType: "water_level",
});
jsjcData.value = res.data;
// console.log('🚀 ~ getWaterlogging ~ res:', res);
} catch (error) {
console.log("🚀 ~ getWaterlogging ~ error:", error);
}
};
// 展示四色图
const ShowSiSetu = (bol) => {
bus.emit("SetLayerShow", ["排水风险评估"]);
// bus.emit("SiSeTuBol", true);
};
// 河道点击
const WzTrigger = (val) => {
HhName.value = val;
if (val == "延河") {
hdJj.value =
"延河属黄河一级支流,发源于陕西省靖边县东南山区的天赐湾乡高峁山,流向东南经安塞、延安市区、延长县于南河沟乡凉水岸汇入黄河,全长286.9km,流域面积7725km2。以安塞化子坪、延安市的甘谷驿为界,可将延河分为上、中、下游河段,上游河谷狭窄,多呈“V”型,宽度10～80m,中游平均宽度600m,甘谷驿以下河段一般在1500m左右。";
} else if (val == "杜甫川河") {
hdJj.value =
"杜甫川河发源于延安市佛道坪,自西向东流经万花,在延安市马家湾汇入南川河,为南川河的一级支流,河长21km,流域面积166km2,河道平均比降9.3‰,多年平均径流量0.04 亿m 3,最大流量100m3 /s,流量最小时河道断流,河谷狭窄,宽度200～300m,最宽约400m。阶地零星分布,阶面倾向河床,川地高程一般在975～1000m。左岸岸坡低缓,坡高在75m 左右,坡度小于40°；右岸斜坡坡高 50～100m,坡度30°～50°,多为黄土斜坡。";
} else if (val == "西川河") {
hdJj.value =
"西川河为延河一级支流,发源于安塞区李盆窑子,自西向东流经安塞县的砖窑湾镇高桥乡,在延安市枣园以东、延安兰家坪桥下游汇入延河。西川河流域面积801.1km2,河长61.5km,河道平均比降5.7‰, 多年平均径流量0.29亿m3,最大流量440m3/s,最小流量 0.001m3/s。西川河下游设有枣园水文站,距河口 13km,枣园水文站以上控制流量面积719km2。西川河河谷在横剖面上呈宽阔的“U”型,宽度一般为400~500m,最大宽度700m；川地高950～965m,河床稍向下游倾斜,受水流影响,河床两岸阶地呈不对称,凸岸阶地发育,阶面微向河床倾斜,凹岸很少有阶地。";
} else {
hdJj.value =
"南川河发源于延安市元庄,自南向北流径柳林镇,在宝塔山下附近入延河,属延河一级支流,河长24.2km,流域面积432.5km2,河道平均比降9.6‰,多年平均径流量0.15亿m 3,最大流量650m3 /s,流量最小时南川河断流。南川河河谷相对较窄,宽度为450m 左右,川地高程960～990m,阶地不甚发育,河床向两侧以缓坡形式过度到两岸斜坡；宝塔山至七里铺段,河谷两岸斜坡高度多在50～100m,坡度普遍大于40°,部分达70°；由于河流14下切,基岩出露,在左右岸坡脚处分别形成 10～20m 和 10～30m的基岩陡坎,坡角普遍大于 80°。在七里铺至柳林河段,岸坡明显减缓,坡度多小于40°,坡高在50m以上。";
}
};
onMounted(() => {
// 获取预警列表
getRealTimeWarning();
// 积水监测
getWaterlogging();
});
onBeforeUnmount(() => {
bus.emit("clearAllLayer");
});
</script>
<style lang="scss" scoped>
.riskAssessment {
z-index: 999;
width: 450px;
height: 43%;
.Assessmentop {
width: 450px;
height: calc(100% - 50px);
.subRightBox {
// background: #2cfce9;
width: 440px;
margin: 0 auto;
height: 35px;
display: flex;
cursor: pointer;
font-size: 14px;
color: #ffffff;
line-height: 25px;
.headcenter {
width: 132px;
height: 30px;
padding: 2px 3px;
background: url("@/assets/images/zhps/fxpgw.png") no-repeat;
background-size: 100% 100%;
text-align: center;
margin-top: 5px;
margin-left: 10px;
}
.activedright {
border: 1px solid #1c8aff;
color: #e4f5ff;
background-color: #004285;
background: url("@/assets/images/zhps/fxpgxz.png") no-repeat;
background-size: 100% 100%;
}
}
.leftSubTabsBox {
width: 440px;
height: calc(100% - 50px);
margin: 0 auto;
.tabContent {
height: calc(100% - 1px);
ul {
height: 100%;
// overflow: hidden;
overflow-y: auto;
padding: 0 16px;
list-style: none;
cursor: pointer;
.listOne {
margin-top: 5px;
background: linear-gradient(0deg, #003c99 0%, #1d448d 100%);
border-radius: 4px;
padding: 2px 20px;
.line {
position: relative;
padding: 6px 0;
overflow: hidden;
.lable {
width: 80px;
font-size: 14px;
font-weight: 400;
color: #39f7ff;
padding-right: 4px;
i {
display: inline-block;
width: 28px;
}
span {
display: inline-block;
width: 7px;
}
}
.lable2 {
width: 190px;
}
.box {
// height: 26px;
width: 240px;
padding: 3px 0;
line-height: 20px;
border-radius: 2px 2px 2px 2px;
border: 1px solid #1cf4fc48;
text-align: center;
font-size: 14px;
font-weight: 400;
color: #ffffff;
}
.box_Status {
font-size: 16px;
}
.box2 {
width: 120px;
}
span {
display: block;
padding: 0 6px;
line-height: 18px;
margin-left: 10px;
font-size: 12px;
border: 1px solid #b7b7b7;
border-radius: 14px;
color: #b7b7b7;
background: rgba(183, 183, 183, 0.15);
white-space: nowrap;
&.rad {
border-color: #ff3737;
color: #ff3737;
background: rgba(255, 55, 55, 0.15);
}
&.green {
border-color: lime;
color: lime;
background: rgba(12, 134, 24, 0.15);
}
}
}
}
}
}
}
.waterBox {
margin: 5px auto;
width: 430px;
height: calc(100% - 45px);
.waterroll {
height: 60%;
// background: yellowgreen;
.tableHeader {
width: 100%;
height: 34px;
background: linear-gradient(
0deg,
rgba(74, 164, 255, 0.6392156863) 0%,
rgba(0, 251, 255, 0) 100%
);
border-radius: 2px;
border: 1px solid #004285;
display: flex;
.tableHeaderList {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 34px;
// padding-left: 5px;
// text-align: center;
}
.tableList1 {
width: 10%;
text-align: center;
}
.tableList2 {
width: 15%;
text-align: center;
}
.tableList3 {
width: 25%;
text-align: center;
// background: red;
}
.tableList4 {
width: 35%;
text-align: center;
}
.tableList5 {
width: 20%;
text-align: center;
}
}
.tableBody {
width: 100%;
height: calc(100% - 38px);
overflow: auto;
// background: red;
.tableBodyList {
height: 34px;
line-height: 34px;
width: 100%;
display: flex;
/* 选择偶数行 */
&:nth-child(even) {
background: linear-gradient(
0deg,
rgba(21, 141, 253, 0.2) 0%,
rgba(21, 141, 253, 0.05) 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: 10%;
// background: red;
// padding-left: 5px;
}
.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: 15%;
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: 20%;
}
.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: 33%;
}
.tableBodyList_span5 {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 34px;
text-align: center;
width: 22%;
}
}
.activedright {
border: 1px solid #1c8aff;
color: #e4f5ff;
background: #004285;
}
}
}
.watercontent {
height: 40%;
.Titlelarge {
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 23px;
color: #ebfeff;
}
.Contentdetails {
height: calc(100% - 30px);
overflow: auto;
// background: red;
text-indent: 20px;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 14px;
color: #c1d3d4;
}
}
}
}
}
.WarningSou {
width: 450px;
height: 26%;
.WarningSouTop {
margin: 0 auto;
width: 430px;
height: calc(100% - 50px);
.tableHeader {
width: 100%;
height: 34px;
background: linear-gradient(
0deg,
rgba(74, 164, 255, 0.6392156863) 0%,
rgba(0, 251, 255, 0) 100%
);
border-radius: 2px;
border: 1px solid #004285;
display: flex;
.tableHeaderList {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 34px;
// padding-left: 5px;
// text-align: center;
}
.tableList1 {
width: 40%;
padding-left: 15px;
}
.tableList2 {
width: 20%;
text-align: center;
}
.tableList3 {
width: 20%;
text-align: center;
}
.tableList4 {
width: 20%;
text-align: center;
}
}
.tableBody {
height: calc(100% - 35px);
overflow: hidden;
.tableBodyList {
height: 34px;
line-height: 34px;
width: 100%;
display: flex;
/* 选择偶数行 */
&:nth-child(even) {
background: linear-gradient(
0deg,
rgba(21, 141, 253, 0.2) 0%,
rgba(21, 141, 253, 0.05) 100%
);
}
.tableBodyList_span1 {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 34px;
width: 40%;
padding-left: 10px;
}
.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: 20%;
}
.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: 20%;
}
.tableBodyList_span4 {
font-family: Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #ffffff;
height: 34px;
line-height: 30px;
text-align: center;
width: 20%;
// background: red;
// cursor: pointer;
}
}
}
}
}
.WarningAssess {
width: 450px;
height: 27%;
.TopProportion {
margin-top: 5px;
display: flex;
width: 100%;
.WarningSl {
display: flex;
justify-content: space-around;
align-items: center;
width: 55%;
.eachDescribe {
display: flex;
align-items: center;
font-family: Source Han Sans CN;
font-weight: 400;
// padding-top: 5px;
.icon {
width: 8px;
height: 8px;
border-radius: 50%;
}
.bgcYellow {
background: #2be7abff;
}
.bgcls {
background: #18a7f2ff;
}
.text {
padding: 0 10px 0 6px;
font-family: Source Han Sans CN;
font-weight: 500;
font-size: 14px;
color: #c1d3d4;
}
}
}
.WarningNy {
display: flex;
width: 45%;
.head-right {
cursor: pointer;
font-size: 14px;
color: #ffffff;
display: flex;
line-height: 18px;
.head-item {
width: 70px;
margin-right: 10px;
padding: 2px 3px;
background: #0d4c7d;
height: 23px;
text-align: center;
position: relative;
left: 40px;
font-size: 16px;
}
.activedright {
border: 1px solid #1c8aff;
color: #e4f5ff;
background: #004285;
}
}
}
}
.fxChart {
margin: 5px auto;
width: 420px;
height: calc(100% - 80px);
}
}
.ListBoxHeader {
height: 44px;
line-height: 50px;
width: 98%;
background: url("@/assets/newImgs/partBg.png") no-repeat;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 7px 0px 0px 8px;
.ListBoxHeader_font {
font-family: PangMenZhengDao;
font-weight: 400;
font-size: 23px;
color: #ebfeff;
padding-left: 34px;
}
}
::-webkit-scrollbar {
width: 5px; /* 设置滚动条的宽度 */
}
</style>
