Newer
Older
urbanLifeline_YanAn / src / views / oneMap / OverallOverview / RightBox.vue
@zhangqy zhangqy on 3 Oct 13 KB first commit
<!-- 总体概览右侧面板 -->
<template>
  <!-- 风险评估 -->
  <div class="RiskAssessment">
    <div class="partTitleHM">风险评估</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="partTitleHM">预警处置</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>
#ZTGL {
  .LeftBox {
    width: 450px;
    height: calc(100% - 98px);
    position: absolute;
    left: 10px;
    top: 70px;
    background: url('@/assets/images/LeftContent.png') no-repeat;
    // background: linear-gradient(0deg, rgba(0, 93, 114, 0.8) 0%, rgba(0, 93, 114, 0.8) 100%);
    border-radius: 6px;
    border: 1px solid #47eef3;
  }
  .RightBox {
    width: 450px;
    height: calc(100% - 98px);
    position: absolute;
    right: 10px;
    top: 70px;
    // background: url('@/assets/images/rightContent.png') no-repeat;
    background: linear-gradient(0deg, rgba(0, 43, 67, 0.8) 0%, rgba(0, 76, 118, 0.8) 100%);
    border-radius: 6px;
    border: 1px solid #47eef3;
    box-shadow: inset 0 0 5px 5px #47eef38a;
    .RiskAssessment {
      width: 450px;
      height: 50%;
      .RiskProportion {
        margin-top: 15px;
        width: 450px;
        height: 175px;
        .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% - 255px);
        // background: #b2cad6;
      }
    }
    .WarningSisposal {
      width: 450px;
      height: 50%;
      .WarningSj {
        width: 450px;
        height: 190px;
        margin-top: 15px;
        // background: red;
        .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% - 255px);
        // background: red;
      }
    }
    .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;
          }
        }
      }
    }
  }
}
</style>