<!-- 总体概览右侧面板 -->
<template>
  <!-- 风险评估 -->
  <div class="RiskAssessment">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">风险评估</div>
    </div>
    <div class="RiskProportion">
      <div class="TopProportion">
        <div class="riskMc">
          <div class="icon"></div>
          <div class="text">风险占比</div>
        </div>
        <div class="riskZs">
          <div class="eachDescribe">
            <div class="icon bgcblue"></div>
            <div class="text">总数</div>
          </div>
          <div class="eachDescribe">
            <div class="icon bgcYellow"></div>
            <div class="text">风险数量</div>
          </div>
        </div>
      </div>
      <div class="ContentNum">
        <img :src="fxzb" alt="" style="width: 399px; height: 117px; position: relative; top: 18px; left: 28px" />
        <div class="dfFlxa">
          <!-- <div class="middleextA">
            <div class="GasList">
              <div class="iconTb">
                <img :src="item.Imgurl" alt="" class="iconTbimg" />
              </div>
              <div class="GasMc">{{ item.name }}</div>
            </div>
            <div class="Gasprogress">
           
            </div>
          </div>
          <div class="middleextB">
            <div class="GasNum">{{ item.num }}</div>
            <div class="GasGl">{{ item.dw }}</div>
          </div> -->
        </div>
      </div>
    </div>

    <div class="DrainageRisk">
      <div class="TopProportion">
        <div class="riskMc">
          <div class="icon"></div>
          <div class="text">排水风险评估</div>
        </div>
      </div>

      <tslyqk_constituent_3d />
    </div>
  </div>
  <!-- 预警处置 -->
  <div class="WarningSisposal">
    <div class="ListBoxHeader">
      <div class="ListBoxHeader_font">预警处置</div>
    </div>
    <div class="WarningSj">
      <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="item"
              :class="activedname == item.name ? 'activedright' : ''"
              @click="yearclick(item, index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
      <div class="WarningList">
        <div class="Warningpart flex flex-justcontent-spacebetween">
          <div class="part" v-for="(item, index) in tableData" :key="index">
            <div class="parttop">
              <div class="upper">
                <div class="Major">
                  <img :src="item.Imgurl" class="upImg" />
                </div>
                <div class="lower">{{ item.name }}</div>
              </div>
              <div class="below">
                <div class="handIn">{{ item.num }}</div>
                <div
                  class="oflower"
                  :style="{ color: item.gm == '较多' ? '#FF4D5DFF' : item.gm == '正常' ? '#2BE7ABFF' : '#F8E270FF' }"
                >
                  {{ item.gm }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="WarningEcharts">
      <AssessmentjsEcharts :data="chartData2" :refresh="chartData2.refresh"></AssessmentjsEcharts>
    </div>
  </div>
</template>

<script setup>
import tslyqk_constituent_3d from '@/views/oneMap/Echarts/tslyqk_constituent_3d.vue'; //3d图例
import AssessmentjsEcharts from '@/views/oneMap/Echarts/AssessmentjsEcharts.vue';

import { ref, reactive, toRefs, onMounted } from 'vue';
const AllData = reactive({});
import yjsj from '@/assets/newImgs/yjsj.png'; //预警数据
import czsj from '@/assets/newImgs/czsj.png'; //处置数据
import czl from '@/assets/newImgs/czl.png'; //处置率

import ranqi_icon from '@/assets/newImgs/ranqi_icon.png'; //燃气
import qiaoliang from '@/assets/newImgs/qiaoliang.png'; //桥梁
import sd_icon from '@/assets/newImgs/sd_icon.png'; //隧道
import ps_icon from '@/assets/newImgs/ps_icon.png'; //隧道
import fxzb from '@/assets/newImgs/fxzb.png'; //风险占比

const yearList = ref([
  { name: '月', value: 1 },
  { name: '年', value: 2 },
]);
const chartData2 = ref({
  xAxis: ['12/1', '12/2', '12/3', '12/4', '12/5', '12/6'],
  refresh: 1,
});
const riskData = ref([
  { name: '燃气', num: '234', sl: 70, Imgurl: ranqi_icon, dw: '公里', refresh: 1 },
  { name: '排水', num: '234', sl: 80, Imgurl: ps_icon, dw: '公里', refresh: 1 },
  { name: '桥梁', num: '1', sl: 90, Imgurl: qiaoliang, dw: '座', refresh: 1 },
  { name: '隧道', num: '1', sl: 60, Imgurl: sd_icon, dw: '座', refresh: 1 },
]);
const tableData = ref([
  { name: '预警数据', num: '60', gm: '较多', Imgurl: yjsj },
  { name: '处置数据', num: '60', gm: '正常', Imgurl: czsj },
  { name: '处置率', num: '75%', gm: '未完成', Imgurl: czl },
]);

const activedname = ref('月');
function yearclick(val) {
  activedname.value = val.name;
}
const format = percentage => {
  return percentage ? `${percentage}` : `${percentage}`;
};
const showPanel = ref(true); //面板展开收起
// 面板内容展开收起控制
const props = defineProps({
  showPanel: {
    type: Boolean,
  },
});
watch(
  () => props.showPanel,
  () => {
    showPanel.value = props.showPanel;
  },
  { immediate: true }
);
onMounted(() => {});
</script>

<style lang="scss" scoped>
.RiskAssessment {
  width: 450px;
  height: 49%;
  // background: yellowgreen;
  .RiskProportion {
    width: 450px;
    height: 175px;
    // background: red;
    .ContentNum {
      margin-top: 4px;
      width: 450px;
      height: 140px;
      .dfFlxa {
        width: 400px;
        height: 30px;
        margin: 5px auto;
        display: flex;
        align-items: center;
        justify-content: center;

        .middleextA {
          width: 75%;
          display: flex;
          .GasList {
            display: flex;
            width: 20%;
            .iconTb {
              width: 40%;
              .iconTbimg {
                width: 20px;
                height: 20px;
              }
            }
            .GasMc {
              width: 60%;
              font-family: Source Han Sans CN;
              font-weight: 500;
              font-size: 14px;
              color: #ebfeff;
            }
          }
          .Gasprogress {
            width: 80%;
          }
        }
        .middleextB {
          width: 25%;
          display: flex;
          .GasNum {
            width: 60%;
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 20px;
            color: #12f9ff;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .GasGl {
            width: 40%;
            font-family: Source Han Sans CN;
            font-weight: bold;
            font-size: 14px;
            color: #34909f;
            display: flex;
            align-items: center;
          }
        }
      }
    }
  }
  .DrainageRisk {
    margin-top: 5px;
    width: 450px;
    // height: 41%;
    height: calc(100% - 240px);
    // background: #b2cad6;
  }
}
.WarningSisposal {
  width: 450px;
  height: 49%;
  // background: red;
  .WarningSj {
    width: 450px;
    height: 190px;
    margin-top: 5px;
    // background: yellowgreen;
    .WarningList {
      margin-top: 5px;
      width: 425px;
      height: 85%;
      // background: yellow;
      margin: auto;
      .Warningpart {
        margin-top: 5px;
        .part {
          width: 130px;
          height: 160px;
          background: url('@/assets/newImgs/iSpt.png') no-repeat;
          background-size: 100% 100%;
          .parttop {
            height: 160px;
            .upper {
              height: 50%;
              .Major {
                height: 70%;
                .upImg {
                  width: 30px;
                  height: 30px;
                  position: relative;
                  top: 20px;
                  left: 38%;
                }
              }
              .lower {
                height: 30%;
                font-family: Source Han Sans CN;
                font-weight: 500;
                font-size: 14px;
                color: #c1d3d4;
                display: flex;
                // align-items: center;
                justify-content: center;
              }
            }
            .below {
              height: 50%;
              .handIn {
                height: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                font-family: Source Han Sans CN;
                font-weight: bold;
                font-size: 22px;
                color: #12f9ff;
              }
              .oflower {
                height: 50%;
                display: flex;
                // align-items: center;
                justify-content: center;
                font-family: Source Han Sans CN;
                font-weight: 500;
                font-size: 14px;
                color: #c1d3d4;
              }
            }
          }
        }
      }
    }
  }
  .WarningEcharts {
    margin-top: 5px;
    width: 450px;
    // height: 38%;
    height: calc(100% - 245px);
    // background: rgb(228, 228, 228);
  }
}
.partTitleHM {
  top: 8px;
  position: relative;
  width: 408px;
  height: 44px;
  background: url('@/assets/newImgs/partBg.png') no-repeat;
  background-size: 100% 100%;
  font-family: PangMenZhengDao;
  font-weight: 400;
  font-size: 23px;
  color: #ebfeff;
  line-height: 44px;
  padding-left: 35px;
  margin-left: 10px;
}
.TopProportion {
  display: flex;
  width: 100%;
  .riskMc {
    display: flex;
    width: 60%;
    .icon {
      margin-left: 5px;
      width: 25px;
      height: 25px;
      background: url('@/assets/newImgs/xtb_img.png') no-repeat;
    }
    .text {
      font-family: Source Han Sans CN;
      font-weight: bold;
      font-size: 14px;
      color: #ebfeff;
      line-height: 25px;
      padding-left: 5px;
      box-shadow: inset 0px -8px 10px -5px #47eef38a;
    }
  }
  .riskZs {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 40%;
    .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: #f8744bff;
      }
      .bgcblue {
        background: #18ffff;
      }
      .text {
        padding: 0 10px 0 6px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        color: #c1d3d4;
      }
    }
  }
  .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;
      }
      .activedright {
        border: 1px solid #2cfce9;
        color: #e4f5ff;
        background: #166f84;
      }
    }
  }
}
.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;
  }
}
</style>