- <!--智慧排水左右侧面板 -->
- <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>