<!--智慧排水左右侧面板 -->
<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">
<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: "超控制常水位",
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: ['12/1', '12/2', '12/3', '12/4', '12/5', '12/6'],
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',
},
{
siteName: '大桥街与延河西路交叉口',
onlineStatus: 'online',
riskAnalysis: '无风险',
siteNo: '2024101613',
},
{ siteName: '文化沟路与延河西路交叉口', siteStatus: 'online', warnInfo: '无风险',siteNo: '2024101634' },
];
} 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(() => {});
</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 #2cfce9;
color: #e4f5ff;
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, #008599 0%, #08596d 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, #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;
// 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, #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: 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: 43px;
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: 35px;
text-align: center;
width: 22%;
}
}
}
}
.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, #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;
// 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, #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;
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: #00344f;
height: 23px;
text-align: center;
position: relative;
left: 40px;
font-size: 16px;
}
.activedright {
border: 1px solid #2cfce9;
color: #e4f5ff;
background: #166f84;
}
}
}
}
.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>
