zhgdyun/src/views/projectAdmin/fourEngin/govComp/leftMiddle.vue

<template>
  <Card title="监督巡查">
    <div class="contentBox">
      <div>监督员</div>
      <div class="person">
        <span>冯发娟</span>
        <span>王斌</span>
        <span>王章浩</span>
        <span>陈伟斌</span>
        <span>陈鑫华</span>
      </div>
      <div class="carbonEmission">
        <div class="photovoltaicOne">
          <div class="textKwh" style="margin-left: 62px">21</div>
          <div class="textBottom">下发整改通知书</div>
        </div>
        <div class="photovoltaicTwo">
          <div class="textKwh">63</div>
          <div class="textBottom">累计监督签到人数</div>
        </div>
        <div class="photovoltaicThree">
          <div class="textKwh" style="margin-left: 62px">21</div>
          <div class="textBottom" style="margin-left: 50px">已整改</div>
        </div>
        <div class="photovoltaicFour">
          <div class="textKwh" style="margin-left: 70px">0</div>
          <div class="textBottom" style="margin-left: 50px">未整改</div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '../components/Card.vue'
import echarts from 'echarts4'
export default {
  components: { Card },
  data() {
    return {}
  },
  mounted() {
    this.createChart()
  },
  methods: {
    createChart() {
      const checkChart = echarts.init(this.$refs.checkChart)
      const option = {
        grid: {
          x: '6%', //x 偏移量
          y: '10%', // y 偏移量
          width: '88%', // 宽度
          height: '70%' // 高度
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['2022-1', '2022-3', '2022-6', '2022-8'],
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        yAxis: {
          type: 'value',
          splitNumber: 3,
          splitLine: {
            show: true,
            lineStyle: {
              type: 'dashed',
              color: '#777f8a'
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff'
            }
          }
        },
        series: [
          {
            data: [3.5, 4.5, 3.5, 4],
            type: 'line',
            smooth: true,
            showSymbol: false,
            color: '#f56c35',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: 'rgba(213, 97, 52,0.3)' },
                { offset: 1, color: 'rgba(213, 97, 52,0.1)' }
              ])
            }
          },
          {
            data: [0.5, 2.0, 1.4, 1.2],
            type: 'line',
            smooth: true,
            showSymbol: false,
            color: '#51a4ac',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: 'rgba(53, 98, 111,0.5)' },
                { offset: 1, color: 'rgba(53, 98, 111,0.3)' }
              ])
            }
          }
        ]
      }
      checkChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.contentBox {
  width: 100%;
  height: 100%;
  margin-top: 2%;
  margin-left: 10px;
  color: #fff;
  .person {
    span {
      margin: 5px 5px 10px 0px;
      display: inline-block;
      width: 84px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-size: 19px;
      background-image: url(../assets/images/common/num_bg.png);
      background-repeat: no-repeat;
      background-size: 100%;
      color: #6ee4f0;
    }
  }

  .contentTop {
    display: flex;
    justify-content: center;
    align-items: center;
    .img,
    .contentBtn {
      margin-right: 20px;
      font-size: 14px;
      .num1 {
        color: #53a9b1;
        font-size: 22px;
      }
      .num2 {
        color: #f56c35;
        font-size: 22px;
      }
      .text {
        margin-top: 5px;
        color: #fff;
        font-size: 16px;
      }
    }
    .img {
      img {
        height: 56px;
        width: 56px;
      }
    }
  }
  .rowInfo {
    color: #fff;
    margin-top: 3%;
    position: relative;
    span {
      font-size: 16px;
      margin-left: 10px;
      display: inline-block;
      height: 25px;
      line-height: 30px;
    }
    .leftlogo::after {
      position: absolute;
      content: url(../assets/images/common/icon_jt.png);
      top: 10%;
      width: 20px;
      height: 20px;
      left: 44%;
    }
    .leftnum {
      display: inline-block;
      margin-left: 40px;
    }
  }
  .mintit {
    box-sizing: border-box;
    padding: 5px;
    padding-left: 20px;
    margin-top: 5px;
    position: relative;
    span {
      margin-left: 20px;
    }
    .blueline::after {
      position: absolute;
      content: '';
      width: 30px;
      height: 2px;
      border-radius: 10%;
      background-color: #5ce2f6;
      top: 88%;
      left: 13%;
    }
  }

  .echarts {
    width: 100%;
    height: 55%;
    display: flex;
    .checkChart {
      width: 78%;
      height: 100%;
    }
    .right {
      margin-top: 45px;
      font-size: 12px;
      .point {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
        background-color: #fb6a2e;
        margin-right: 15px;
      }
      .point2 {
        background-color: #65d3d8;
      }

      .num {
        color: #fff;
        margin: 5px 0px 30px 25px;
      }
    }
  }
}
.carbonEmission {
  // width: 100%;
  // height: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
  .photovoltaicOne {
    width: 150px;
    height: 100px;
    background-image: url('../assets/images/carbon/kwh1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .photovoltaicTwo {
    width: 150px;
    height: 100px;
    background-image: url('../assets/images/carbon/kwh2.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: 100px;
  }
  .photovoltaicThree {
    margin-top: 60px;
    width: 150px;
    height: 100px;
    background-image: url('../assets/images/carbon/kwh4.png');

    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .photovoltaicFour {
    margin-top: 60px;
    width: 150px;
    height: 100px;
    background-image: url('../assets/images/carbon/kwh3.png');

    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-left: 100px;
  }
  .textKwh {
    font-size: 24px;
    font-weight: bold;
    margin: 15px 0 0 60px;
  }
  .textBottom {
    font-size: 14px;
    margin: 64px 0 0 20px;
  }
}
</style>