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

<template>
  <Card title="混泥土浇筑">
    <div class="contentBox">
      <div class="point"></div>
      <span class="mintit">混凝土浇筑统计</span>
      <div class="rowInfo">
        <!-- <span class="point"></span> -->
        <span>混凝土浇筑重量</span>
        <span style="color:#5ec2c8;">58974㎡</span>
      </div>
      <div class="checkChart" ref="checkChart"></div>
      <div class="midTit">
        <div class="point"></div>
        <span class="mintit">混凝土浇筑记录</span>
      </div>
      <div class="timeBox">
        <el-timeline class="timeline">
        <el-timeline-item timestamp="2022-01-28" placement="top">
          <el-card>
            <p>2022-01-28</p>
            <span>C栋2号楼十一层</span>
            <span class="area">2400㎡</span>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2022-03-12" placement="top">
          <el-card>
            <p>2022-03-12</p>
            <span>A栋4号楼三层</span>
            <span class="area">1560㎡</span>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2022-06-20" placement="top">
          <el-card>
            <p>2022-06-20</p>
            <span>E栋1号楼十四层</span>
            <span class="area">1390㎡</span>
          </el-card>
        </el-timeline-item>
        <el-timeline-item timestamp="2022-08-08" placement="top">
          <el-card>
            <p>2022-08-08</p>
            <span>B栋2号楼六层</span>
            <span class="area">1780㎡</span>
          </el-card>
        </el-timeline-item>
        <!-- <el-timeline-item timestamp="2022-07-28" placement="top">
          <el-card>
            <span>2022-07-28</span>
            <p>C栋2号楼十一层</p>
            <span class="area">78㎡</span>
          </el-card>
        </el-timeline-item> -->
      </el-timeline>
      </div>
      
    </div>
  </Card>
</template>

<script>
import Card from "../components/Card.vue";
import echarts from "echarts4";
export default {
  components: { Card },
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      const checkChart = echarts.init(this.$refs.checkChart);
      const option = {
        grid: {
          x: "9%", //x 偏移量
          y: "10%", // y 偏移量
          width: "86%", // 宽度
          height: "60%" // 高度
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["2022-1", "2022-3", "2022-6", "2022-7","2022-8"],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff"
            }
          }
        },
        yAxis: {
          type: "value",
          splitNumber: 4,
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#777f8a"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff"
            }
          }
        },
        series: [
          {
            data: [1200,6200,1200,6200,1200],
            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)" }
            //   ])
            // }
          }
        ]
      };
      checkChart.setOption(option);
    }
  }
};
</script>

<style lang="less" scoped>
.contentBox {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  color: #fff;
  padding-top: 2%;
  margin-left: 1%;
  .point {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #fff;
    display: inline-block;
    margin-right: 2%;
    margin-top: 15px;
  }
  .mintit {
    font-size: 16px;
    color: #fff;
  }
  .rowInfo {
    margin-top: 3%;
    margin-bottom: 3%;
    height: 45px;
    line-height: 45px;
    color: #fff;
    background-image: url(../assets/images/common/bg-intro.png);
    background-size: 120%;
    background-repeat: no-repeat;
    span {
      margin-left: 5%;
    }
  }
  .midTit {
    box-sizing: border-box;
    padding-bottom: 3%;
  }
  .checkChart {
    width: 95%;
    height: 20%;
  }
  // .timeline {
  //   height: 30%;
  // }
  .timeBox{
    height: 65%;
    width: 98%;
    overflow: auto;
  }
}
::v-deep .el-timeline{
  margin: 5px;
}
::v-deep .el-timeline-item__timestamp.is-top {
    font-size: 20px;
    color: #fff;
}
::v-deep .el-timeline-item__node--normal{
  left: 0px;
}
::v-deep .el-card {
  border: none;
  font-size: 16px;
  background-color: #182337;
  background-image: url(../assets/images/common/bg_time.png);
  background-size: 100%;
  background-repeat: no-repeat;
  p {
    color: #63cfd4;
    font-weight: bold;
    margin-bottom: 20px;
  }
  span {
    // margin-top: 20px;
    color: white;
  }
  
  .area {
    float: right;
    color: #63cfd4;
    font-weight: bold;
    margin-bottom: 20px;
  }
}
::v-deep .el-timeline-item__tail {
  position: absolute;
  left: 4px;
  height: 100%;
  border-left: 3px solid #274b5f;
}
::v-deep .el-timeline-item__node{
  box-shadow: 0px 0px 6px 2px #bddade;
}
</style>