<template>
  <div id="ZHHM">
    <div :class="['LeftBox', 'animate__animated', showPanel ? 'animate__fadeOutLeft' : 'animate__fadeInLeft']">
      <div class="ComBox LeftBox1_1">
        <div class="Box_header" style="cursor: pointer" @click="TuChengMoRenClick('00')">
          空间格局 <span class="Box_header_miniFont">(一心三轴多组团)</span>
        </div>
        <div class="Box_Body">
          <div class="KJGJ_List1">
            <div class="KJGJ_List1_List">
              <span class="KJGJ_List1_List_yuan color_yellow"></span>
              <span class="KJGJ_List1_List_name">平均海拔</span>
              <span class="KJGJ_List1_List_value">1200</span>
              <span class="KJGJ_List1_List_unit">m</span>
            </div>
            <div class="KJGJ_List1_List">
              <span class="KJGJ_List1_List_yuan color_lime"></span>
              <span class="KJGJ_List1_List_name">最高海拔</span>
              <span class="KJGJ_List1_List_value">1809</span>
              <span class="KJGJ_List1_List_unit">m</span>
            </div>
          </div>
          <div class="KJGJ_List1">
            <div class="KJGJ_List1_List">
              <span class="KJGJ_List1_List_yuan color_yellow"></span>
              <span class="KJGJ_List1_List_name">最低海拔</span>
              <span class="KJGJ_List1_List_value">388</span>
              <span class="KJGJ_List1_List_unit">m</span>
            </div>
            <div class="KJGJ_List1_List">
              <span class="KJGJ_List1_List_yuan color_lime"></span>
              <span class="KJGJ_List1_List_name">西南高东北低</span>
            </div>
          </div>
          <div class="KJGJ_List2">
            <div class="KJGJ_List2_XH">01</div>
            <div class="KJGJ_List2_WFont">一心</div>
            <div class="KJGJ_List2_Font">以山体公园形成的自然生态中心</div>
          </div>
          <div class="KJGJ_List2">
            <div class="KJGJ_List2_XH">02</div>
            <div class="KJGJ_List2_WFont">三轴</div>
            <div class="KJGJ_List2_Font">以东川、南川、西北川为发展轴</div>
          </div>
          <div class="KJGJ_List2">
            <div class="KJGJ_List2_XH">03</div>
            <div class="KJGJ_List2_WFont">一环</div>
            <div class="KJGJ_List2_Font">由山体公园形成的海绵生态发展环</div>
          </div>
          <div class="KJGJ_List2">
            <div class="KJGJ_List2_XH">04</div>
            <div class="KJGJ_List2_WFont">三廊</div>
            <div class="KJGJ_List2_Font">北川、沿河和南川组成Y型走廊</div>
          </div>
          <div class="KJGJ_List2">
            <div class="KJGJ_List2_XH">05</div>
            <div class="KJGJ_List2_WFont">绿楔</div>
            <div class="KJGJ_List2_Font">以山体林地为骨架的生态绿楔</div>
          </div>
        </div>
      </div>
      <div class="ComBox LeftBox1_2">
        <div class="Box_header">
          降雨特征
          <div class="head-right" style="">
            <div
              class="head-item"
              v-for="(item, index) in yearList"
              :key="item"
              :class="activedname == item.name ? 'activedright' : ''"
              @click="yearclick(item, index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="Box_Body">
          <div class="HeadContent" v-if="activedname == '年际降雨变化'">丰、枯年交替出现，且降雨量变化幅度大</div>
          <div class="HeadContent" v-else>年内降雨量分配不均匀，冬季干旱，雨雪稀少</div>
          <div class="box-body">
            <div style="height: 100%">
              <RainfallEcharts
                :data="chartData2"
                :refresh="chartData2.refresh"
                v-if="activedname == '年际降雨变化'"
              ></RainfallEcharts>
              <RainfallLegend :data="chartData3" :refresh1="chartData3.refresh1" v-else></RainfallLegend>
            </div>
          </div>
        </div>
      </div>
      <div class="ComBox LeftBox1_3">
        <div class="Box_header" style="cursor: pointer" @click="AllData.WTShow = !AllData.WTShow">
          问题识别
          <!-- <img
            class="Box_headerIcon"
            src="@/assets/images/Sponge_screen/HaiMian/HaiMian_FangAn.png"
            alt=""
            @click="AllData.WTShow = !AllData.WTShow"
          /> -->
        </div>
        <div class="Box_Body">
          <div class="WTSBList" v-for="item in AllData.WTSBData" @click="TuChengMoRenClick(item.num)">
            <div class="WTSBList_num">{{ item.num }}</div>
            <div class="WTSBList_font">{{ item.font }}</div>
          </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="SCPLTX_changeBox">
            <div
              class="SCPLTX_changeBox_List"
              :class="AllData.SCPLTX_changeId == item.id ? 'SCPLTX_changeBox_Check' : ''"
              v-for="item in AllData.SCPLTX_changeData"
              @click="SCPLTX_change(item)"
            >
              {{ item.name }}
            </div>
          </div>

          <div class="CSPLTXBox" id="CSPLTXBox1" v-if="AllData.SCPLTX_changeId == 1">
            <img class="SCPLTXImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu2.png" alt="" />
            <div class="ClickDiv ClickDiv1" @click="ClickDiv(1)"></div>
            <div class="ClickDiv ClickDiv2" @click="ClickDiv(2)"></div>
            <div class="ClickDiv ClickDiv3" @click="ClickDiv(3)"></div>
            <div class="ClickDiv ClickDiv4" @click="ClickDiv(4)"></div>
            <div class="ClickDiv ClickDiv5" @click="ClickDiv(5)"></div>
          </div>
          <div class="CSPLTXBox" id="CSPLTXBox2" v-if="AllData.SCPLTX_changeId == 2"></div>
          <div class="CSPLTXBox" v-if="AllData.SCPLTX_changeId == 3">
            <div id="CSPLTXBox3"></div>
            <div id="lengedBox">
              <div class="LengedList" v-for="(item, index) in AllData.Echarts3Data">
                <span class="LengedListSK" :class="`LengedListSK` + index"></span>
                <div class="LengedListName">{{ item.name }}</div>
                <div class="LengedListValue">{{ item.value }}%</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="ComBox RightBox1_2">
        <div class="Box_header">城市排涝保障提升</div>
        <div class="Box_Body">
          <!-- <div class="SCPLBZ_changeBox">
            <div
              class="SCPLBZ_changeBox_List"
              :class="AllData.SCPLBZ_changeId == item.id ? 'SCPLBZ_changeBox_Check' : ''"
              v-for="item in AllData.SCPLBZ_changeData"
              @click="AllData.SCPLBZ_changeId = item.id"
            >
              {{ item.name }}
            </div>
          </div> -->
          <img class="SCPBZXImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu1.png" alt="" />
          <div class="ClickDiv_2 ClickDiv_21" @click="ClickDiv(21)"></div>
          <div class="ClickDiv_2 ClickDiv_22" @click="ClickDiv(22)"></div>
          <div class="ClickDiv_2 ClickDiv_23" @click="ClickDiv(23)"></div>
          <div class="ClickDiv_2 ClickDiv_24" @click="ClickDiv(24)"></div>
          <div class="ClickDiv_2 ClickDiv_25" @click="ClickDiv(25)"></div>
        </div>
      </div>
      <div class="ComBox RightBox1_3">
        <div class="Box_header">水环境改善提升</div>
        <div class="Box_Body SHJGS">
          <img class="SHJGSImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu5.png" alt="" />
          <img class="SHJGSImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu6.png" alt="" />
          <img class="SHJGSImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu4.png" alt="" />
        </div>
      </div>
    </div>
    <Transition name="slideWT">
      <div class="XFK" v-show="AllData.WTShow">
        <img class="XFKImg" src="@/assets/images/Sponge_screen/HaiMian/HaiMian_jiatu3.png" alt="" />
      </div>
    </Transition>
  </div>
</template>

<script setup name="ZHHM">
import { ref, reactive, toRefs, onMounted, nextTick } from 'vue';
import * as echarts from 'echarts';
const AllData = reactive({
  // 问题识别
  WTSBData: [
    {
      num: '01',
      font: '新区雨水入老城，雨季内涝积水频发',
    },
    {
      num: '02',
      font: '水资源严重短缺，雨水资源利用难度大',
    },
    {
      num: '03',
      font: '排水系统不完善，雨季延河水质不稳定',
    },
    {
      num: '04',
      font: '山体沟道人居环境较差，局部存在安全隐患',
    },
    // {
    //   num: '05',
    //   font: '湖泊面积萎缩，城市海绵体受损',
    // },
  ],
  // 城市排涝体系提升
  SCPLTX_changeData: [
    {
      id: 1,
      name: '源头减排',
    },
    {
      id: 2,
      name: '过程控制',
    },
    {
      id: 3,
      name: '系统治理',
    },
  ],
  SCPLTX_changeId: 1,
  Charts1: null,
  Charts2: null,
  Charts3: null,
  Echarts3Data: [
    { value: 48, name: '沿河' },
    { value: 22, name: '西川河' },
    { value: 13, name: '王瑶水库' },
    { value: 10, name: '杜甫川河' },
    { value: 7, name: '南川河' },
  ],
  // 城市排涝保障提升
  SCPLBZ_changeData: [
    {
      id: 1,
      name: '上栏',
    },
    {
      id: 2,
      name: '中滞',
    },
    {
      id: 3,
      name: '下排',
    },
  ],
  SCPLBZ_changeId: 1,
  // 问题识别弹窗
  WTShow: false,
});
const showPanel = ref(true); //面板展开收起
const chartData2 = ref({
  xAxis: [1985, 1990, 1995, 2000, 2005, 2010, 2015, 2020, 2021],
  yAxis: [650, 800, 502, 630, 820, 800, 510, 805, 1203],
  refresh: 1,
});
const chartData3 = ref({
  XName: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
  data1: [8, 15, 24, 36, 58, 63, 165, 125, 72, 30, 23, 10],
  data: [
    {
      coords: [
        ['1', 8],
        ['2', 15],
        ['3', 24],
        ['4', 36],
        ['5', 58],
        ['6', 63],
        ['7', 165],
        ['8', 125],
        ['9', 72],
        ['10', 30],
        ['11', 23],
        ['12', 10],
      ],
    },
  ],
  refresh1: 1,
});
const activedname = ref('年际降雨变化');
const weatherTimer = ref(null);
const yearList = ref([
  { name: '年际降雨变化', value: 1 },
  { name: '年内降雨量', value: 2 },
]);
import RainfallEcharts from '@/views/oneMap/Echarts/RainfallEcharts.vue'; //年际降雨变化
import RainfallLegend from '@/views/oneMap/Echarts/RainfallLegend.vue'; //年内降雨量
import { onBeforeUnmount } from 'vue';
import bus from '@/bus';
import yanAnProjection from '@/assets/yanAnProjection.json';
import mapBoxVectorLayer from '@/utils/GISdocument/mapboxVectorLayer.js';
// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);
//添加海绵项目
const addProjectionLayer = () => {
  let projectionList = [
    {
      layername: 'HMJZYSQ',
      data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('建筑'))),
    },
    {
      layername: 'HMXGYLD',
      data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('公园'))),
    },
    {
      layername: 'HMXDLGC',
      data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('道路'))),
    },
    {
      layername: 'HMXSX',
      data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('水系'))),
    },
    {
      layername: 'GWPCYXF',
      data: turf.featureCollection(yanAnProjection.features.filter(i => i.properties.projectionType.includes('管网'))),
    },
    // 'HMXSX', 'GWPCYXF', 'GWJBZ', 'GIS', 'other'
  ];
  console.log('projectionList---', projectionList);
  projectionList.forEach(item => {
    bus.emit('setGeoJSON', { json: item.data, key: item.layername });
  });
  //bus.emit('setLegendData', projectionList);
};
const yearclick = val => {
  activedname.value = val.name;
  bus.emit('checkRainL', val.value);
  // bus.emit("checkLandXDM", false);
};

const TuChengMoRenClick = num => {
  newfiberMapbox.map.easeTo({
    center: [109.488, 36.596],
    zoom: 12,
    pitch: 55,
  });
  // 先清空
  bus.emit('clearAllLayer');
  let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
  removedLayer.forEach(layer => {
    bus.emit('setLayerVisible', { layername: layer, isCheck: false });
  });
  switch (num) {
    case '00':
      // 再显示
      bus.emit('SetLayerShow', ['空间格局']);
      break;
    case '01':
      // 再显示
      bus.emit('SetLayerShow', ['雨水分区', '中心城区']);
      break;
    case '02':
      // 再显示
      bus.emit('SetLayerShow', ['河流水系']);
      break;
    case '03':
      // 再显示
      bus.emit('SetLayerShow', ['河流水系', '排水分区']);
      break;
    case '04':
      // 再显示
      bus.emit('SetLayerShow', ['山体修复']);
      break;
  }
};
const ClickDiv = num => {
  newfiberMapbox.map.easeTo({
    center: [109.488, 36.596],
    zoom: 12,
    pitch: 55,
  });
  // 先清空
  bus.emit('clearAllLayer');
  let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
  removedLayer.forEach(layer => {
    bus.emit('setLayerVisible', { layername: layer, isCheck: false });
  });
  switch (num) {
    case 1:
      bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: true }); //建筑
      bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路
      bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园
      bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网
      bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系
      break;
    case 2:
      bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑
      bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: true }); //道路
      bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园
      bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网
      bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系
      break;
    case 3:
      bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑
      bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路
      bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: true }); //公园
      bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网
      bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系
      break;
    case 4:
      bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑
      bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路
      bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园
      bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: true }); //管网
      bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系
      break;
    case 5:
      bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑
      bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路
      bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园
      bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网
      bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: true }); //水系
      break;
    case 21:
      bus.emit('SetLayerShow', ['防洪河道']);
      break;
    case 22:
      bus.emit('SetLayerShow', ['河堤加固']);
      break;
    case 23:
      bus.emit('SetLayerShow', ['河堤治理']);
      break;
    case 24:
      bus.emit('SetLayerShow', ['河堤疏浚']);
      break;
    case 25:
      break;
  }
};
const SCPLTX_change = item => {
  AllData.SCPLTX_changeId = item.id;
  if (AllData.SCPLTX_changeId == 1) {
  } else if (AllData.SCPLTX_changeId == 2) {
    ClearAllProjectMap();
    nextTick(() => {
      initEcharts2();
    });
    newfiberMapbox.map.easeTo({
      center: [109.488, 36.596],
      zoom: 12,
      pitch: 55,
    });
    // 先清空
    bus.emit('clearAllLayer');
    let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
    removedLayer.forEach(layer => {
      bus.emit('setLayerVisible', { layername: layer, isCheck: false });
    });
    bus.emit('SetLayerShow', ['雨水管网', '污水管网']);
  } else {
    ClearAllProjectMap();
    nextTick(() => {
      initEcharts3();
    });
  }
};
const initEcharts2 = () => {
  if (!!AllData.Charts2) {
    AllData.Charts2.dispose();
  }
  AllData.Charts2 = echarts.init(document.getElementById('CSPLTXBox2'));
  // AllData.Charts2.value.off("click");
  AllData.Charts2.setOption({
    color: ['#00F2FF'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    legend: {},
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      top: '5%',
      containLabel: true,
    },
    xAxis: {
      type: 'value',
      max: 120,
      axisPointer: {
        type: 'shadow',
      },
      textStyle: {
        color: 'aqua',
      },
      axisLine: {
        lineStyle: {
          color: 'aqua',
          type: 'dashed',
        },
      },
    },
    yAxis: {
      type: 'category',
      data: ['沿河北岸', '沿河南岸', '水库水面', '南川河西岸', '杜甫川河', '李渠-姚店'],

      axisLabel: {
        formatter: '{value}',
      },
      axisLine: {
        lineStyle: {
          color: 'white',
        },
      },
      splitLine: {
        lineStyle: {
          // 使用深浅的间隔色
          color: ['#184E5A'],
        },
      },
    },
    series: [
      {
        type: 'bar',
        data: [90, 78, 50, 42, 68, 61],
        barWidth: '12px',
        showBackground: true,
        itemStyle: {
          // borderRadius: 10, // 统一设置四个角的圆角大小
          borderRadius: [10, 10, 10, 10], //（顺时针左上，右上，右下，左下）
        },
      },
    ],
  });
  // AllData.Charts2.on("click", (param) => {
  //   console.log(param);
  //   let data = {
  //     title: "风险监测",
  //     comIDs: ["RQ_FengXianJianCe"],
  //   };
  //   bus.emit("publicDialog", data);
  // });
};
const initEcharts3 = () => {
  if (!!AllData.Charts3) {
    AllData.Charts3.dispose();
  }
  AllData.Charts3 = echarts.init(document.getElementById('CSPLTXBox3'));
  // AllData.Charts3.value.off("click");
  AllData.Charts3.setOption({
    color: ['#159AFF', '#34FFBD', '#68BEFF', '#BC6DFF', '#F17777'],
    // tooltip: {
    //   trigger: "item",
    // },
    legend: {
      type: 'scroll',
      orient: 'vertical',
      right: 10,
      top: 20,
      bottom: 20,
      textStyle: {
        color: '#fffd', // 图例文字颜色
      },
      show: false,
    },
    series: [
      {
        type: 'pie',
        radius: ['70%', '90%'],
        center: ['30%', '50%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 0,
        },
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: AllData.Echarts3Data,
      },
    ],
  });
  // AllData.Charts3.on("click", (param) => {
  //   console.log(param);
  //   let data = {
  //     title: "风险监测",
  //     comIDs: ["RQ_FengXianJianCe"],
  //   };
  //   bus.emit("publicDialog", data);
  // });
};
// 清除地图上所有的海绵项目
const ClearAllProjectMap = () => {
  bus.emit('setLayerVisible', { layername: 'HMJZYSQ', isCheck: false }); //建筑
  bus.emit('setLayerVisible', { layername: 'HMXDLGC', isCheck: false }); //道路
  bus.emit('setLayerVisible', { layername: 'HMXGYLD', isCheck: false }); //公园
  bus.emit('setLayerVisible', { layername: 'GWPCYXF', isCheck: false }); //管网
  bus.emit('setLayerVisible', { layername: 'HMXSX', isCheck: false }); //水系
};
onMounted(() => {
  addProjectionLayer();
  //mapBoxVectorLayer.addGeojsonPolygonWithLabel('yanAnPaiShuiArea', yanAnPaiShuiArea);
});

onBeforeUnmount(() => {
  clearInterval(weatherTimer.value);
  weatherTimer.value = null;
  ClearAllProjectMap();
  newfiberMapbox.map.easeTo({
    center: [109.488, 36.596],
    zoom: 12,
    pitch: 55,
  });
  // 先清空
  bus.emit('clearAllLayer');
  let removedLayer = ['HMJZYSQ', 'HMXGYLD', 'HMXDLGC', 'HMXSX', 'GWPCYXF'];
  removedLayer.forEach(layer => {
    bus.emit('setLayerVisible', { layername: layer, isCheck: false });
  });
  // mapBoxVectorLayer.removeByIds(['yanAnPaiShuiArea', 'yanAnPaiShuiArea__label']);
});
</script>

<style lang="scss" scoped>
#ZHHM {
  .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;
    z-index: 120;

    .LeftBox1_1 {
      height: 348px;
      .KJGJ_List1 {
        width: 100%;
        height: 36px;
        background: linear-gradient(0deg, rgba(0, 180, 255, 0.2) 0%, rgba(0, 180, 255, 0) 100%);
        margin-top: 10px;
        display: flex;
        .KJGJ_List1_List {
          width: 50%;
          height: 36px;
          position: relative;

          .KJGJ_List1_List_yuan {
            float: left;
            width: 7px;
            height: 7px;
            clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
            transition: 1s clip-path;
            margin: 16px 13px;
          }
          .KJGJ_List1_List_name {
            float: left;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 16px;
            color: #b8ecff;
            height: 36px;
            line-height: 36px;
          }

          .KJGJ_List1_List_value {
            float: left;
            font-family: Myriad Pro;
            font-weight: 400;
            font-size: 18px;
            color: #ffed52;
            height: 36px;
            line-height: 36px;
            margin-left: 10px;
          }

          .KJGJ_List1_List_unit {
            float: left;
            font-family: Source Han Sans CN;
            font-weight: 400;
            font-size: 12px;
            color: #b8ecff;
            height: 36px;
            line-height: 36px;
            margin-left: 10px;
          }
        }
      }
      .KJGJ_List2 {
        width: 100%;
        height: 30px;
        margin-top: 10px;
        background: rgba(35, 173, 245, 0.16);

        .KJGJ_List2_XH {
          width: 30px;
          height: 30px;
          line-height: 28px;
          border: 2px solid #33d1ff;
          font-family: DIN;
          font-weight: 500;
          font-size: 18px;
          color: #d1dff7;
          text-align: center;
          float: left;
          box-sizing: border-box;
          background: url('@/assets/images/Sponge_screen/HaiMian/HaiMian_hezi.png') no-repeat center;
        }
        .KJGJ_List2_WFont {
          float: left;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 16px;
          color: #42e2ff;
          height: 30px;
          line-height: 30px;
          margin: 0 10px;
        }
        .KJGJ_List2_Font {
          float: left;
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 14px;
          color: #b8ecff;
          height: 30px;
          line-height: 30px;
        }
      }
    }
    .LeftBox1_2 {
      height: calc(100% - 348px - 310px);
      .HeadContent {
        width: 100%;
        height: 30px;
        background: rgba(34, 112, 255, 0.4);
        text-align: center;
        line-height: 30px;
        color: #ffffff;
      }
      .box-body {
        height: calc(100% - 30px);
        padding-left: 5px;
        position: relative;
        overflow: auto;
      }
      .head-right {
        cursor: pointer;
        position: relative;
        font-size: 14px;
        left: 200px;
        top: -32px;
        color: #ffffff;
        display: flex;
        max-width: 200px;
        overflow: hidden;
        overflow-x: auto;
        line-height: 18px;

        .head-item {
          margin-left: 10px;
          padding: 2px 3px;
          border: 1px solid transparent;
          background: #013a73;
          height: 23px;
          text-align: center;
          min-width: 42px;
          border: 1px solid #2270ff;
        }

        .activedright {
          border: 1px solid #2cfce9;
          color: #e4f5ff;
          background: #166f84;
        }
      }
    }
    .LeftBox1_3 {
      height: 310px;
      .Box_headerIcon {
        width: 24px;
        height: 26px;
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
      }

      .WTSBList {
        width: 100%;
        height: 44px;
        background: url('@/assets/images/Sponge_screen/HaiMian/HaiMian_ListBack.png');
        margin-top: 9px;
        cursor: pointer;

        .WTSBList_num {
          width: 44px;
          height: 44px;
          line-height: 44px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 20px;
          color: #00f2ff;
          text-align: center;
          float: left;
        }
        .WTSBList_font {
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 16px;
          color: #a5d2ff;
          height: 44px;
          line-height: 44px;
          float: left;
          margin-left: 30px;
        }
      }
    }
  }
  .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: 302px;

      .SCPLTX_changeBox {
        width: 100%;
        height: 26px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-around;
        align-items: center;
        margin: 10px 0;

        .SCPLTX_changeBox_List {
          width: 136px;
          height: 26px;
          line-height: 26px;
          text-align: center;
          background: #00344f;
          border-radius: 2px;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 14px;
          color: #c1d3d4;
          cursor: pointer;
        }
        .SCPLTX_changeBox_Check {
          background: #002d44;
          border-radius: 2px;
          border: 1px solid #1cf5fc;
          font-family: Source Han Sans CN;
          font-weight: bold;
          font-size: 14px;
          color: #ebfeff;
        }
      }
      .CSPLTXBox {
        width: 100%;
        height: calc(100% - 70px);
        margin-top: 5px;
        position: relative;
        #CSPLTXBox3 {
          width: 100%;
          height: 100%;
        }

        #lengedBox {
          width: 180px;
          height: 100%;
          position: absolute;
          right: 0;
          top: 0;
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          justify-content: space-evenly;
          align-items: center;

          .LengedList {
            width: 180px;
            height: 24px;
            line-height: 24px;
            background: #ffffff33;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;

            .LengedListSK {
              display: inline-block;
              width: 12px;
              height: 12px;
              margin-left: 10px;
            }
            .LengedListSK0 {
              background: #159aff;
            }
            .LengedListSK1 {
              background: #34ffbd;
            }
            .LengedListSK2 {
              background: #68beff;
            }
            .LengedListSK3 {
              background: #bc6dff;
            }
            .LengedListSK4 {
              background: #f17777;
            }
            .LengedListName {
              font-family: Source Han Sans CN;
              font-weight: 400;
              font-size: 12px;
              color: #f4f4f4;
              display: inline-block;
              width: 100px;
              text-align: left;
              box-sizing: border-box;
              padding-left: 10px;
            }

            .LengedListValue {
              font-family: TeXGyreAdventor;
              font-weight: normal;
              font-size: 16px;
              color: #f4f4f4;
            }
          }
        }

        .ClickDiv {
          // background: #4f20004d;
          width: 100%;
          height: 34px;
          position: absolute;
          cursor: pointer;
        }
        .ClickDiv1 {
          left: 0;
          top: 0;
        }
        .ClickDiv2 {
          left: 0;
          top: 34px;
        }
        .ClickDiv3 {
          left: 0;
          top: 68px;
        }
        .ClickDiv4 {
          left: 0;
          top: 102px;
        }
        .ClickDiv5 {
          left: 0;
          top: 136px;
        }
      }
      .SCPLTXImg {
        width: 100%;
        height: 100%;
      }
    }
    .RightBox1_2 {
      height: calc(100% - 632px);
      // .SCPLBZ_changeBox {
      //   width: 100%;
      //   height: 26px;
      //   display: flex;
      //   flex-direction: row;
      //   flex-wrap: nowrap;
      //   justify-content: space-around;
      //   align-items: center;
      //   margin: 10px 0;

      //   .SCPLBZ_changeBox_List {
      //     width: 136px;
      //     height: 26px;
      //     line-height: 26px;
      //     text-align: center;
      //     background: #00344f;
      //     border-radius: 2px;
      //     font-family: Source Han Sans CN;
      //     font-weight: 500;
      //     font-size: 14px;
      //     color: #c1d3d4;
      //     cursor: pointer;
      //   }
      //   .SCPLBZ_changeBox_Check {
      //     background: #002d44;
      //     border-radius: 2px;
      //     border: 1px solid #1cf5fc;
      //     font-family: Source Han Sans CN;
      //     font-weight: bold;
      //     font-size: 14px;
      //     color: #ebfeff;
      //   }
      // }
      .SCPBZXImg {
        width: 100%;
        height: calc(100% - 10px);
        margin-top: 5px;
      }
      .ClickDiv_2 {
        width: 60px;
        height: 100%;
        position: absolute;
        cursor: pointer;
      }
      .ClickDiv_21 {
        top: 0;
        left: 50px;
      }
      .ClickDiv_22 {
        top: 0;
        left: 120px;
      }
      .ClickDiv_23 {
        top: 0;
        left: 195px;
      }
      .ClickDiv_24 {
        top: 0;
        left: 270px;
      }
      .ClickDiv_25 {
        top: 0;
        left: 345px;
      }
    }
    .RightBox1_3 {
      height: 330px;
      .SHJGS {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        /* align-content: center; */
        justify-content: space-around;
        align-items: center;
        .SHJGSImg {
          width: 136px;
          height: 266px;
          cursor: pointer;
        }
      }
    }
  }

  .XFK {
    width: 885px;
    height: 125px;
    position: absolute;
    left: 50%;
    margin-left: -442px;
    bottom: 170px;

    .XFKImg {
      width: 100%;
      height: 100%;
    }
  }
  // 左右两侧展示板块公共样式
  .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;
      position: relative;

      .Box_header_miniFont {
        font-size: 16px;
      }
    }

    .Box_Body {
      width: 100%;
      height: calc(100% - 43px);
      box-sizing: border-box;
      position: relative;
      overflow: auto;
    }
  }
  .color_red {
    color: #ff3f3f !important;
  }
  .color_yellow {
    background: #ffed52 !important;
  }
  .color_lime {
    background: #18e87a !important;
  }

  // 动画
  /*
    进入和离开动画可以使用不同
    持续时间和速度曲线。
  */
  .slideWT-enter-active,
  .slideWT-leave-active {
    transition: all 0.3s ease-out;
  }

  .slideWT-enter-from,
  .slideWT-leave-to {
    transform: translateY(200px);
    opacity: 0;
  }
}
</style>