tmzn-weihe/src/views/comprehensive-overview/right.vue

<template>
  <BasePanelRight>
    <div class="comprehensive-container">
      <div class="right">
        <BaseMain title="水文监测">
          <template v-slot:mainArea>
            <div class="sw-container">
              <div class="left">
                <img src="@/assets/image/comprehensive/swIcon.png" alt="" class="icon1" />
                <span class="value"><span class="big">2</span> / 2</span>
              </div>
              <div class="right">
                <div class="icon-text">
                  <div class="txt">水位</div>
                  <div class="txt2">雨量</div>
                </div>
                <div class="icon-text">
                  <div class="txt3">流速</div>
                  <div class="txt4">流量</div>
                </div>
              </div>
            </div>
          </template>
        </BaseMain>
        <BaseMain title="四乱监测">
          <template v-slot:mainArea>
            <div class="sl-container">
              <div class="seach-btn">
                <el-radio-group v-model="dateVal" size="mini" class="slRadio" @input="getData">
                  <el-radio-button label="1">今日</el-radio-button>
                  <el-radio-button label="2">近七日</el-radio-button>
                  <el-radio-button label="3">近30日</el-radio-button>
                  <el-radio-button label="4">全部</el-radio-button>
                </el-radio-group>
              </div>
              <div class="dottTitle">事件总数</div>
              <div class="data-info">
                <div class="left">
                  <div class="val">{{eventInfo.total}}</div>
                  <img src="@/assets/image/comprehensive/midBg2.png" />
                </div>
                <div class="right">
                  <div class="em" v-for="(item,index) in eventInfo.list" :key="index">
                    <div :class="`color${index+1}`">{{item.name}}</div>
                    <div>{{item.num}}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>
        </BaseMain>
        <BaseMain title="采砂监测">
          <template v-slot:mainArea>
            <div class="card-item">
              <div class="warning-content">
                <div class="warning-title">
                  <div class="title">预警总数</div>
                  <div class="num">30</div>
                  <div class="unit">条</div>
                </div>
                <PieChart style="height: 1.45rem" />
              </div>
            </div>
          </template>
        </BaseMain>
      </div>
    </div>
  </BasePanelRight>
</template>

<script>
import BasePanelRight from '@/components/base-panel/base-panel-right'
import BaseMain from '@/components/base-main/base-main.vue'
import PieChart from './pie-chart/index.vue'
export default {
  components: {
    BaseMain,
    BasePanelRight,
    PieChart
  },
  data() {
    return {
      dateVal: 1,
      eventInfo:{
        total:0,
        list:[]
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      window
        .requestSDK(
          '/sddnWeiHe/event/getEventStatistics',
          {
            type:this.dateVal
          },
          {},
          'get'
        )
        .then(async (res) => {
          console.info(res)
            this.eventInfo = res.data
            console.info(this.eventInfo)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.comprehensive-container {
  position: absolute;
  top: px-to-rem(30);
  z-index: 1;
  .sw-container {
    padding: px-to-rem(59) px-to-rem(12) px-to-rem(70) px-to-rem(16);
    display: flex;
    justify-content: flex-start;
    .left {
      position: relative;
      margin-right: px-to-rem(24);
      .icon1 {
        width: px-to-rem(124);
        height: px-to-rem(124);
      }
      .value {
        position: absolute;
        font-weight: bold;
        font-size: px-to-rem(14);
        color: #fff;
        left: px-to-rem(45);
        bottom: px-to-rem(35);
        .big {
          font-size: px-to-rem(18);
          color: #91ffab;
        }
      }
    }
    .right {
      font-weight: 500;
      font-size: px-to-rem(14);
      color: #ffffff;
      width: calc(100% - px-to-rem(124));
      .icon-text {
        display: flex;
        justify-content: space-between;
        margin-bottom: px-to-rem(32);
        .txt {
          background: url('@/assets/image/comprehensive/swIcon1.png') no-repeat;
          background-size: contain;
          width: px-to-rem(80);
          height: px-to-rem(32);
          line-height: px-to-rem(32);
          padding-left: px-to-rem(39);
        }
        .txt2 {
          background: url('@/assets/image/comprehensive/swIcon2.png') no-repeat;
          background-size: contain;
          width: px-to-rem(80);
          height: px-to-rem(32);
          line-height: px-to-rem(32);
          padding-left: px-to-rem(39);
        }
        .txt3 {
          background: url('@/assets/image/comprehensive/swIcon3.png') no-repeat;
          background-size: contain;
          width: px-to-rem(80);
          height: px-to-rem(32);
          line-height: px-to-rem(32);
          padding-left: px-to-rem(39);
        }
        .txt4 {
          background: url('@/assets/image/comprehensive/swIcon4.png') no-repeat;
          background-size: contain;
          width: px-to-rem(80);
          height: px-to-rem(32);
          line-height: px-to-rem(32);
          padding-left: px-to-rem(39);
        }
      }
      .icon-text:first-child {
        margin-top: px-to-rem(9);
      }
    }
  }
  .sl-container {
    padding: px-to-rem(16) px-to-rem(15) px-to-rem(55) px-to-rem(11);
    height: px-to-rem(253);
    .slRadio {
      margin-bottom: px-to-rem(24);
      :deep(.el-radio-button__inner) {
        background: rgba(79, 159, 255, 0.12);
        color: #4f9fff;
        border-color: #4f9fff;
        font-weight: 400;
        padding: px-to-rem(6);
        font-size: px-to-rem(14);
      }
      :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
        background-color: rgba(79, 159, 255, 0.8);
        color: #fff;
      }
    }
    .dottTitle {
      position: relative;
      display: inline-block;
      font-weight: bold;
      font-size: px-to-rem(14);
      color: #f5f5f5;
      margin-bottom: px-to-rem(10);
      margin-left: px-to-rem(16);
      &::before,
      &::after {
        content: ' ';
        display: inline-block;
        width: px-to-rem(30);
        height: px-to-rem(2);
        background-color: #4487d8;
        vertical-align: middle;
        margin: 0 0.5em;
      }
      &::before {
        margin-left: 0;
      }
      &::after {
        margin-right: 0;
      }
    }
    .data-info {
      display: flex;
      justify-content: space-between;
      .left {
        margin-top: px-to-rem(26);
        .val {
          font-weight: bold;
          font-size: px-to-rem(30);
          color: #f5f5f5;
          background: url('@/assets/image/comprehensive/midBg.png') no-repeat;
          background-size: contain;
          width: px-to-rem(86);
          height: px-to-rem(50);
          text-align: center;
          margin-left: px-to-rem(50);
        }
        img {
          width: px-to-rem(197);
          height: px-to-rem(33);
        }
      }
      .right {
        width: 30%;
        .em {
          display: flex;
          justify-content: space-between;
          font-weight: 400;
          font-size: px-to-rem(14);
          color: #f5f5f5;
          margin-bottom: px-to-rem(12);
          .color1::before {
            content: ' ';
            display: inline-block;
            width: px-to-rem(12);
            height: px-to-rem(6);
            background-color: #6bfe91;
            border-radius: px-to-rem(2);
            vertical-align: middle;
            margin-right: px-to-rem(6);
          }
          .color2::before {
            content: ' ';
            display: inline-block;
            width: px-to-rem(12);
            height: px-to-rem(6);
            background-color: #efd800;
            border-radius: px-to-rem(2);
            vertical-align: middle;
            margin-right: px-to-rem(6);
          }
          .color3::before {
            content: ' ';
            display: inline-block;
            width: px-to-rem(12);
            height: px-to-rem(6);
            background-color: #f17a23;
            border-radius: px-to-rem(2);
            vertical-align: middle;
            margin-right: px-to-rem(6);
          }
          .color4::before {
            content: ' ';
            display: inline-block;
            width: px-to-rem(12);
            height: px-to-rem(6);
            background-color: #4487d8;
            border-radius: px-to-rem(2);
            vertical-align: middle;
            margin-right: px-to-rem(6);
          }
        }
      }
    }
  }
  .card-item {
    position: relative;
    width: 3.68rem;
    padding: px-to-rem(22) px-to-rem(16) px-to-rem(27) px-to-rem(26);
    .icon-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        .icon-item-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .item-content {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin-left: px-to-rem(10);
            margin-bottom: px-to-rem(-6);
            .label {
              font-weight: 500;
              font-size: px-to-rem(16);
              color: #ffffff;
            }
            .value {
              font-weight: bold;
              font-size: px-to-rem(18);
            }
          }
        }
      }
    }
    .progress-content {
      display: flex;
      flex-direction: column;
      margin-top: px-to-rem(10);
      .progress-item {
        display: flex;
        flex-direction: column;
        margin-bottom: px-to-rem(6);
        .progress-item-text {
          display: flex;
          justify-content: space-between;
          margin-bottom: px-to-rem(4);
          span {
            font-size: px-to-rem(16);
            color: #fff;
          }
        }
      }
    }
    .warning-content {
      height: px-to-rem(200);
      .warning-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        font-size: px-to-rem(16);
        .title {
          &::before {
            content: '';
            display: inline-block;
            background: #4487d8;
            width: px-to-rem(30);
            height: px-to-rem(2);
            margin-bottom: px-to-rem(4);
            margin-right: px-to-rem(6);
          }
          &::after {
            content: '';
            display: inline-block;
            background: #4487d8;
            width: px-to-rem(30);
            height: px-to-rem(2);
            margin-bottom: px-to-rem(4);
            margin-left: px-to-rem(6);
          }
        }
        .num {
          text-align: center;
          width: px-to-rem(75);
          height: px-to-rem(45);
          font-size: px-to-rem(30);
          color: #f5f5f5;
          background: url('@/assets/image/sand-monitor/mid-bg.png') no-repeat;
          background-size: 100% 100%;
        }
        .unit {
          margin-right: px-to-rem(10);
        }
      }
    }
    .info-content {
      color: #fff;
      .base-info-container {
        .title {
          font-size: px-to-rem(16);
          text-align: left;
          &::before {
            content: '';
            display: inline-block;
            width: px-to-rem(8);
            height: px-to-rem(10);
            background: #81b1f5;
            margin-right: px-to-rem(6);
          }
        }
        .base-info-card {
          display: flex;
          justify-content: space-between;
          .base-info-item {
            display: flex;
            flex-direction: column;
            margin-bottom: px-to-rem(10);
            span {
              font-weight: bold;
              font-size: px-to-rem(12);
              color: #c4c6c8;
            }
            .value {
              font-size: px-to-rem(14);
              color: #81b1f5;
            }
          }
        }
      }
    }
  }
}
</style>