tmzn-weihe/src/views/sand-monitor/left.vue

<template>
  <BasePanelLeft>
    <div class="sand-monitor-left-container">
      <base-header title="采砂区总览"></base-header>
      <div class="card-item">
        <div class="icon-content">
          <div class="icon-item">
            <div class="icon-item-content">
              <img src="@/assets/image/sand-monitor/采砂区.png" style="width: 0.38rem; height: 0.32rem" />
              <div class="item-content">
                <span class="label">采砂区个数</span>
                <span class="value" style="color: #4183d3">2个</span>
              </div>
            </div>
            <img src="@/assets/image/sand-monitor/icon-bg.png" style="width: 1.6rem" />
          </div>
          <div class="icon-item">
            <div class="icon-item-content">
              <img src="@/assets/image/sand-monitor/监控设备.png" style="width: 0.32rem; height: 0.3rem" />
              <div class="item-content">
                <span class="label">监控设备</span>
                <span class="value" style="color: #fcd294">2个</span>
              </div>
            </div>
            <img src="@/assets/image/sand-monitor/icon-bg.png" style="width: 1.6rem" />
          </div>
        </div>
        <div class="progress-content">
          <div class="progress-item" v-for="(item, index) in progressList" :key="index">
            <div class="progress-item-text">
              <span>{{ item.name }}</span>
              <span>{{ item.value }}</span>
            </div>
            <el-progress size="large" :percentage="item.percentage" :color="item.color" :show-text="false" define-back-color="#213F61" :stroke-width="10"></el-progress>
          </div>
        </div>
      </div>
      <base-header title="采砂预警总览"></base-header>
      <div class="card-item">
        <div class="warning-content">
          <div class="warning-title">
            <div class="title">预警总数</div>
            <div class="num">0</div>
            <div class="unit">条</div>
          </div>
          <PieChart style="height: 1.45rem" />
        </div>
      </div>
      <base-header title="采砂区详情">
        <div style="position: absolute; top: -2px; right: 0.1rem">
          <el-radio-group v-model="date" size="mini">
            <el-radio-button label="日"></el-radio-button>
            <el-radio-button label="周"></el-radio-button>
            <el-radio-button label="月"></el-radio-button>
          </el-radio-group>
        </div>
      </base-header>
      <div class="card-item">
        <div class="info-content">
          <div class="base-info-container">
            <div class="title">基本信息</div>
            <div class="base-info-card">
              <div class="base-info-item">
                <span>采砂区名称</span>
                <span class="value">1#采砂区</span>
              </div>
              <div class="base-info-item">
                <span>采砂区面积</span>
                <span class="value">1#采砂区 <span>万㎡</span></span>
              </div>
              <div class="base-info-item">
                <span>采砂区状态</span>
                <span class="value">正常开采</span>
              </div>
            </div>
          </div>
          <div class="base-info-container">
            <div class="title">采砂信息</div>
            <div class="base-info-card">
              <div class="base-info-item">
                <span>采砂控制总量</span>
                <span class="value">50<span>万吨</span></span>
              </div>
              <div class="base-info-item">
                <span>过磅总量</span>
                <span class="value">25<span>万吨</span></span>
              </div>
              <div class="base-info-item">
                <span>监测已采总量</span>
                <span class="value">24<span>万吨</span></span>
              </div>
            </div>
          </div>
          <div class="base-info-container">
            <div class="title">趋势分析</div>
            <LineChart style="height: 1.05rem" />
          </div>
        </div>
      </div>
    </div>
  </BasePanelLeft>
</template>
<script>
import BasePanelLeft from '@/components/base-panel/base-panel-left'
import BaseHeader from '@/components/base-header/base-header'
import PieChart from './pie-chart'
import LineChart from './line-chart'
export default {
  name: 'sandMonitorLeft',
  components: { BasePanelLeft, BaseHeader, PieChart, LineChart },
  data() {
    return {
      progressList: [
        { name: '允许采砂总量', value: '400吨', percentage: 50, color: '#3FEBED' },
        { name: '监测已采总量', value: '0吨', percentage: 50, color: '#FCD294' },
        { name: '过磅采砂总量', value: '0吨', percentage: 50, color: '#4183D3' }
      ],
      date: '日'
    }
  },

  methods: {}
}
</script>
<style scoped lang="scss">
@import url('@/assets/scss/px-to-rem.scss');
.sand-monitor-left-container {
  position: relative;
  height: 100%;
  z-index: 1;
  // height: calc(100vh - 100px);
  // overflow: auto;
  &::-webkit-scrollbar {
    display: none; // 针对 webkit 内核隐藏滚动条
  }
  :deep(.el-radio-button__inner) {
    background: transparent;
    color: #4487d8;
    border-color: #4487d8;
    font-size: px-to-rem(14);
  }
  :deep(.el-radio-button__orig-radio:checked + .el-radio-button__inner) {
    background-color: #409eff;
    color: #fff;
  }
  .card-item {
    position: relative;
    width: 3.68rem;
    padding: px-to-rem(10);
    margin-bottom: px-to-rem(19);
    background: url('@/assets/image/common/areaBg.png') no-repeat 0 0 / 100% 100%;
    .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>