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">13143.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 class="addr">{{ 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/28",
          building: "1/2轴往西3.5米-8轴×C轴往北4.5米-K轴承台底板",
          quantity: 1124.5,
        },
        {
          date: "2022/12/27",
          building: "1/2轴往西3.5米-8轴×C轴往北4.5米-K轴承台底板",
          quantity: 2000,
        },
        {
          date: "2022/12/26",
          building: "1/2轴往西3.5米-8轴×C轴往北4.5米-K轴承台底板",
          quantity: 1000,
        },
        {
          date: "2022/12/25",
          building: "1/2轴往西3.5米-8轴×C轴往北4.5米-K轴承台底板",
          quantity: 1000,
        },
        {
          date: "2022/12/23",
          building: "1-8轴×A-C轴往北4.5米承台底板",
          quantity: 1260,
        },
        {
          date: "2022/11/28",
          building: "3#人工挖孔桩",
          quantity: 97,
        },
        {
          date: "2022/11/28",
          building: "5#人工挖孔桩",
          quantity: 93,
        },
        {
          date: "2022/11/28",
          building: "25#人工挖孔桩",
          quantity: 31,
        },
        {
          date: "2022/11/27",
          building: "8#人工挖孔桩",
          quantity: 110,
        },
        {
          date: "2022/11/27",
          building: "28#人工挖孔桩",
          quantity: 25,
        },
        {
          date: "2022/11/27",
          building: "6#人工挖孔桩",
          quantity: 120,
        },
        {
          date: "2022/11/25",
          building: "7#人工挖孔桩",
          quantity: 134,
        },
        {
          date: "2022/11/25",
          building: "27#人工挖孔桩",
          quantity: 35,
        },
        {
          date: "2022/11/24",
          building: "9#人工挖孔桩",
          quantity: 113,
        },
        {
          date: "2022/11/24",
          building: "26#人工挖孔桩",
          quantity: 35,
        },
        {
          date: "2022/11/22",
          building: "11#人工挖孔桩",
          quantity: 106,
        },
        {
          date: "2022/11/22",
          building: "22#人工挖孔桩",
          quantity: 122,
        },
        {
          date: "2022/11/21",
          building: "10#人工挖孔桩",
          quantity: 99,
        },
        {
          date: "2022/11/20",
          building: "2#人工挖孔桩",
          quantity: 94,
        },
        {
          date: "2022/11/20",
          building: "12#人工挖孔桩",
          quantity: 88,
        },
        {
          date: "2022/11/18",
          building: "17#人工挖孔桩",
          quantity: 116.5,
        },
        {
          date: "2022/11/17",
          building: "15#人工挖孔桩",
          quantity: 105,
        },
        {
          date: "2022/11/17",
          building: "13#人工挖孔桩",
          quantity: 96,
        },
        {
          date: "2022/11/15",
          building: "19#人工挖孔桩",
          quantity: 100,
        },
        {
          date: "2022/11/15",
          building: "1#人工挖孔桩",
          quantity: 85,
        },
        {
          date: "2022/11/14",
          building: "16#人工挖孔桩",
          quantity: 91.5,
        },
        {
          date: "2022/11/14",
          building: "14#人工挖孔桩",
          quantity: 98.5,
        },
        {
          date: "2022/11/12",
          building: "18#人工挖孔桩",
          quantity: 75,
        },
        {
          date: "2022/11/12",
          building: "20#人工挖孔桩",
          quantity: 120,
        },
        {
          date: "2022/11/11",
          building: "23#人工挖孔桩",
          quantity: 111,
        },
        {
          date: "2022/11/6",
          building: "21#人工挖孔桩",
          quantity: 134,
        },
        {
          date: "2022/11/6",
          building: "4#人工挖孔桩",
          quantity: 86,
        },
      ],
    };
  },
  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: ["4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
          },
          color: "#fff",

        },
        yAxis: {
          type: "value",
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "#777f8a",
            },
          },
        },
        series: [
          {
            data: [556, 16, 58, 26, 308,293.5,358.5,2257.5,9270],
            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: #2B528C ;
  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;
  }
  .addr{
    width: calc(100% - 80px);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .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>