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

<template>
  <Card title="监督巡查">
    <div class="contentBox">
      <div>监督员</div>
      <div class="person">
        <span>李四</span>
        <span>张三毛</span>
        <span>王明</span>
        <span>吴老五</span>
      </div>

      <div class="contentTop">
        <div class="img">
          <img src="../assets/images/common/num_skyblue.png" />
        </div>
        <div class="contentBtn">
          <p class="num1">68</p>
          <p class="text">下发整改通知书</p>
        </div>
        <div class="img">
          <img src="../assets/images/common/icon_zg.png" />
        </div>
        <div class="contentBtn">
          <p class="num2">312</p>
          <p class="text">累计监督签到人数</p>
        </div>
      </div>
      <div class="rowInfo">
        <span>
          下发整改通知书
          <span style="font-size:20px;color:#e1e2e4">36</span> 份
        </span>
        <span>
          <img class="image" src="../assets/images/common/icon_jt.png" />
        </span>
        <span>
          已整改
          <span style="font-size:20px;color:#66d4d9">18</span>
        </span>
        <span>
          未整改
          <span style="font-size:20px;color:#f89872">18</span>
        </span>
      </div>

      <div class="echarts">
        <div class="checkChart" ref="checkChart"></div>
        <div class="right">
        <span class="point"></span>
        <span>监督检查<p class="num">(数)</p></span>
        
        <span class="point point2"></span>
        <span>下发整改</span>
        <div class="num">(份)</div>
      </div>
        <div class="right">
        </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: "86%", // 宽度
        height: "60%"// 高度
      },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2022-1", "2022-3", "2022-6", "2022-8"],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#9ea3ab"
            }
          }
        },
        yAxis: {
          type: "value",
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#777f8a"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#9ea3ab"
            }
          }
        },
        series: [
          {
            data: [3.5, 4.5, 3.5, 4],
            type: "line",
            smooth: true,
            color: "#f56c35",
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "rgba(213, 97, 52,0.5)" },
                { offset: 1, color: "rgba(213, 97, 52,0.3)" }
              ])
            }
          },
          {
            data: [0.5, 2.5, 1.8, 1.2],
            type: "line",
            smooth: true,
            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: #bec1c7;
  .person {
    span {
      margin: 5px 5px 10px 0px;
      display: inline-block;
      width: 88px;
      height: 40px;
      text-align: center;
      line-height: 40px;
      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;
    margin-right: 15px;
    .img,
    .contentBtn {
      margin-right: 20px;
      font-size: 14px;
      .num1 {
        color: #53a9b1;
        font-size: 20px;
      }
      .num2 {
        color: #f56c35;
        font-size: 20px;
      }
      .text {
        margin-top: 5px;
        color: #a4a9b0;
      }
    }
    .img {
      img {
        height: 56px;
        width: 56px;
      }
    }
  }
  .rowInfo {
    color: #69717d;
    span {
      margin-left: 10px;
      display: inline-block;
      height: 25px;
      line-height: 30px;
    }
  }
  .echarts {
    width: 100%;
    height: 55%;
    display: flex;
    .checkChart {
      width: 70%;
      height: 100%;
    }
    .right {
    margin-top: 30px;
    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: #d2a104;
      margin: 5px 0px 30px 25px;
    }
  }
  }
}
</style>