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">62461.5m³</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
            v-for="(item, index) in dataList"
            :key="index"
            :timestamp="item.date"
            placement="top"
          >
            <el-card>
              <p>{{ item.date }}</p>
              <span>{{ item.building }}</span>
              <span class="area">{{ item.quantity }}m³</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 },
  data() {
    return {
      dataList: [
        {
          date: "2022.12.20",
          building: "3号桩",
          quantity: 97,
        },
        {
          date: "2022.12.20",
          building: "11号桩",
          quantity: 91.5,
        },
        {
          date: "2022.12.15",
          building: "7号桩",
          quantity: 134,
        },
        {
          date: "2022.12.14",
          building: "26号桩",
          quantity: 28,
        },
        {
          date: "2022.12.14",
          building: "16号桩",
          quantity: 91.5,
        },
        {
          date: "2022.12.14",
          building: "14号桩",
          quantity: 98.5,
        },
        {
          date: "2022.12.12",
          building: "20号桩",
          quantity: 120,
        },
        {
          date: "2022.12.12",
          building: "18号桩",
          quantity: 90.5,
        },
        {
          date: "2022.12.12",
          building: "基坑承台垫层",
          quantity: 40,
        },

        {
          date: "2022.12.12",
          building: "22号桩",
          quantity: 122,
        },

        {
          date: "2022.12.11",
          building: "23号桩",
          quantity: 110,
        },
        {
          date: "2022.12.10",
          building: "基坑承台垫层",
          quantity: 40,
        },

        {
          date: "2022.12.7",
          building: "北侧道路",
          quantity: 115,
        },
        {
          date: "2022.12.6",
          building: "21号桩",
          quantity: 132,
        },
        {
          date: "2022.12.6",
          building: "4号桩",
          quantity: 86,
        },
        {
          date: "2022.12.6",
          building: "北侧道路",
          quantity: 47.5,
        },
        {
          date: "2022.12.5",
          building: "北侧道路",
          quantity: 246.5,
        },
        {
          date: "2022.12.3",
          building: "北侧道路",
          quantity: 60.5,
        },
        {
          date: "2022.12.2",
          building: "北侧道路",
          quantity: 90,
        },

        {
          date: "2022.11.22",
          building: "垫层",
          quantity: 3,
        },

        {
          date: "2022.11.21",
          building: "抗拔实验基础",
          quantity: 13,
        },

        {
          date: "2022.11.21",
          building: "5号桩",
          quantity: 93,
        },
        {
          date: "2022.11.20",
          building: "25号桩",
          quantity: 31,
        },
      ],
    };
  },
  mounted() {
    this.createChart();
  },
  methods: {
    createChart() {
      const checkChart = echarts.init(this.$refs.checkChart);
     const option = {
        grid: {
          x: "9%", //x 偏移量
          y: "5%", // y 偏移量
          right: "0%", // 宽度
          left: "12%", // 高度
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        xAxis: {
          type: "category",
          data: ["2022-8", "2022-9", "2022-10", "2022-11", "2022-12"],
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
          },
          color: "#fff",

        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#777f8a",
            },
          },
        },
        series: [
          {
            data: [12111.5, 12111.5, 12619.5, 12809.5, 12809.5],
            type: "line",
            smooth: true,
            color: "#f56c35",
          },
        ],
      };
      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>