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