tmzn-weihe/src/views/hydrologic-info/left.vue

<template>
  <BasePanelLeft>
    <div class="hydrologic-container">
      <BaseMain title="水文监测点总览">
        <template v-slot:headerR>
          <el-radio-group v-model="dateVal" size="mini" class="dateRadio">
            <el-radio-button label="1">近7日</el-radio-button>
            <el-radio-button label="2">近30日</el-radio-button>
            <el-radio-button label="3">近3个月</el-radio-button>
          </el-radio-group>
        </template>
        <template v-slot:mainArea>
          <div class="main-container">
            <div class="sector-info">
              <div class="img">
                <img src="@/assets/image/hydrologic/sectorBg.png" />
                <div class="val">
                  <span>0.0</span>
                  <span>2</span>
                </div>
              </div>
              <div class="info">
                <div class="row">
                  <div class="col">在线率：</div>
                  <div class="col bg"><span>2个</span><span>100%</span></div>
                </div>
                <div class="row">
                  <div class="col">设备总数：</div>
                  <div class="col">2个</div>
                </div>
                <div class="row">
                  <div class="col">离线数：</div>
                  <div class="col">2个</div>
                </div>
              </div>
            </div>
            <div class="progress-content">
              <div class="progress-item" v-for="item in progressList" :key="item.id">
                <div class="progress-item-text">
                  <span>{{ item.name }}</span>
                  <span
                    >{{ item.value }}<span class="green"> / {{ item.total }}</span></span
                  >
                </div>
                <el-progress size="large" :percentage="item.percentage" color="#4183D3" :show-text="false" define-back-color="#213F61" :stroke-width="10"></el-progress>
              </div>
            </div>
          </div>
        </template>
      </BaseMain>
      <BaseMain title="水文监测点信息">
        <template v-slot:mainArea>
          <div class="sw-container">
            <ScrollPanel>
              <ul>
                <li class="li-item" v-for="(item, index) in [...swList, ...swList]" :key="index">
                  <div class="item">
                    <div class="titile">
                      <div>{{ item.title }}</div>
                      <div class="btn"></div>
                    </div>
                    <div class="content">
                      <img :src="item.url" />
                      <div class="info">
                        <div>监测指标：{{ item.indicator }}</div>
                        <div>监测点位置：{{ item.address }}</div>
                        <div>
                          在线状态：<span class="green">{{ item.status }}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </ScrollPanel>
          </div>
        </template>
      </BaseMain>
      <BaseMain title="今日气象监测">
        <template v-slot:mainArea>
          <div class="qx-container">
            <div class="qx-content">
              <div class="qx-item" v-for="(item, index) in qxList" :key="index">
                <img :src="item.img" alt="" class="img1" />
                <img src="@/assets/image/hydrologic/lj.png" alt="" class="img2" />
                <div class="txt-val">
                  <div class="txt" :style="{ backgroundColor: item.bgColor, borderColor: item.borderColor }">{{ item.txt }}</div>
                  <div class="val">{{ item.val }}</div>
                </div>
              </div>
            </div>
          </div>
        </template>
      </BaseMain>
    </div>
  </BasePanelLeft>
</template>

<script>
import BasePanelLeft from '@/components/base-panel/base-panel-left'
import BaseMain from '@/components/base-main/base-main.vue'
import imgUrl from '@/assets/image/hydrologic/imgT.png'
import ScrollPanel from '@/components/scroll-panel/index.vue'
import iconUrl1 from '@/assets/image/hydrologic/icon5.png'
import iconUrl2 from '@/assets/image/hydrologic/icon6.png'
import iconUrl3 from '@/assets/image/hydrologic/icon4.png'
import iconUrl4 from '@/assets/image/hydrologic/icon1.png'
import iconUrl5 from '@/assets/image/hydrologic/icon3.png'
import iconUrl6 from '@/assets/image/hydrologic/icon2.png'
import {getAirNow} from '@/api/largeScreenApi'
export default {
  data() {
    return {
      dateVal: 1,
      progressList: [
        { id: 1, name: '降雨', value: 2, total: 2, percentage: 50, color: '#4183D3' },
        { id: 2, name: '水位', value: 2, total: 2, percentage: 50, color: '#FCD294' },
        { id: 3, name: '流量', value: 2, total: 2, percentage: 50, color: '#4183D3' },
        { id: 4, name: '流速', value: 2, total: 2, percentage: 50, color: '#4183D3' }
      ],
      swList: [
        {
          id: 1,
          title: '水文监测点详情',
          indicator: '降雨、水位、流量、流速',
          address: '兴平市合家庄东沿河堤路100米',
          status: '在线',
          url: imgUrl
        },
        {
          id: 2,
          title: '水文监测点详情',
          indicator: '降雨、水位、流量、流速',
          address: '兴平市合家庄东沿河堤路100米',
          status: '在线',
          url: imgUrl
        }
      ],
      qxList: [
        {
          img: iconUrl1,
          bgColor: '#FF6B6B4C',
          borderColor: '#FF6B6B',
          txt: '高温',
          val: '36℃'
        },
        {
          img: iconUrl2,
          bgColor: '#3E92FF4C',
          borderColor: '#3E92FF',
          txt: '低温',
          val: '20℃'
        },
        {
          img: iconUrl3,
          bgColor: '##FBC5754C',
          borderColor: '#FBC575',
          txt: 'PM值',
          val: '10μm'
        },
        {
          img: iconUrl4,
          bgColor: '#34F5F74C',
          borderColor: '#34F5F7',
          txt: '风级',
          val: '5级'
        },
        {
          img: iconUrl5,
          bgColor: '#3883E34C',
          borderColor: '#3883E3',
          txt: '日出',
          val: '05:00'
        },
        {
          img: iconUrl6,
          bgColor: '#FBC5754C',
          borderColor: '#FBC575',
          txt: '日落',
          val: '19:00'
        }
      ]
    }
  },
  components: {
    BasePanelLeft,
    BaseMain,
    ScrollPanel
  },
  mounted(){
    this.getAirInfo()
  },
  methods:{
    getAirInfo(){
      getAirNow({adcode:'610481'}).then((res)=>{
        console.info(res)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.hydrologic-container {
  position: absolute;
   top: px-to-rem(30);
  z-index: 1;
  left: px-to-rem(-4);
  .dateRadio {
    :deep(.el-radio-button__inner) {
      background: transparent;
      color: #4f9fff;
      border-color: #4f9fff;
      font-size: px-to-rem(14);
      font-weight: 400;
      padding: px-to-rem(5);
    }
    :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
      background-color: rgba(79, 159, 255, 0.8);
      font-weight: 400;
      color: #f2f6ff;
    }
  }
  .main-container {
    padding: px-to-rem(22) px-to-rem(14);
    .sector-info {
      display: flex;
      justify-content: space-between;
      img {
        width: px-to-rem(133);
        height: px-to-rem(74);
      }
      .img {
        .val {
          display: flex;
          justify-content: space-between;
          font-weight: 500;
          font-size: px-to-rem(14);
          color: #ffffff;
          margin-top: px-to-rem(-8);
        }
      }
      .info {
        width: calc(100% - px-to-rem(143));
        font-weight: 500;
        font-size: px-to-rem(14);
        color: #ffffff;
        .row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: px-to-rem(9);
          .col span {
            font-weight: bold;
            font-size: px-to-rem(16);
            color: #0dc985;
            &:first-child {
              margin-right: px-to-rem(19);
            }
          }
          .bg {
            background: url('@/assets/image/hydrologic/bg.png') no-repeat 0 0 / 100% 100%;
            width: px-to-rem(121);
            text-align: center;
          }
        }
      }
    }
    .progress-content {
      display: flex;
      justify-content: space-between;
      margin-top: px-to-rem(10);
      flex-wrap: wrap;
      .progress-item {
        display: flex;
        flex-direction: column;
        margin-bottom: px-to-rem(10);
        flex-basis: calc(50% - px-to-rem(14));
        .progress-item-text {
          display: flex;
          justify-content: space-between;
          margin-bottom: px-to-rem(4);
          span {
            font-size: px-to-rem(16);
            color: #fff;
          }
          .green {
            color: #0dc985;
          }
        }
      }
    }
  }
  .sw-container {
    padding: px-to-rem(10);
    height: px-to-rem(250);
    .li-item {
      .item {
        background: rgba(79, 159, 255, 0.2);
        border-radius: px-to-rem(4);
        border: px-to-rem(1) solid #4f9fff;
        padding: px-to-rem(6);
        margin-bottom: px-to-rem(6);
        .titile {
          display: flex;
          justify-content: space-between;
          font-weight: bold;
          font-size: px-to-rem(16);
          color: #ffffff;
          margin-bottom: px-to-rem(10);
          .btn {
            width: px-to-rem(10);
            height: px-to-rem(10);
            border-color: #407ed5;
            border-style: solid;
            border-width: 0px 2px 2px 0px;
            transform: rotate(-45deg);
          }
        }
        .content {
          display: flex;
          gap: px-to-rem(9);
          justify-content: space-between;
          img {
            width: px-to-rem(100);
            height: px-to-rem(100);
          }
          .info {
            font-weight: 400;
            font-size: px-to-rem(14);
            color: #ffffff;
            vertical-align: middle;
          }
          .green {
            color: #0dc985;
          }
          .green::before {
            content: '•';
            margin-right: px-to-rem(8);
            color: #0dc985;
          }
        }
      }
    }
  }
  .qx-container {
    padding: px-to-rem(23) px-to-rem(21);
    .qx-content {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: px-to-rem(32);
      .qx-item {
        display: flex;
        justify-content: space-around;
        flex-basis: calc(50% - px-to-rem(30));
        align-items: center;
        .img1 {
          width: px-to-rem(54);
          height: px-to-rem(46);
        }
        .img2 {
          width: px-to-rem(6);
          height: px-to-rem(27);
        }
        .txt-val {
          font-weight: 400;
          font-size: px-to-rem(14);
          color: #ffffff;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          gap: px-to-rem(6);
          .txt {
            border: px-to-rem(1) solid;
            border-radius: px-to-rem(4);
            padding: px-to-rem(1) px-to-rem(8);
          }
        }
      }
    }
  }
}
</style>