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: '2023/3/1',
          building: '1-4轴×C-K轴及1-1/2轴往西5.5米×A-C轴负一层梁板 ',
          quantity: 645.5
        },
        {
          date: '2023/3/1',
          building: '1-4轴×C-K轴及1-1/2轴往西5.5米×A-C轴负一层梁板 ',
          quantity: 645.5
        },
        {
          date: '2023/3/1',
          building: '1-4轴×C-K轴负二层型钢柱 ',
          quantity: 38
        },
        {
          date: '2023/3/1',
          building: '1-4轴×C-K轴负二层型钢柱 ',
          quantity: 38
        },
        {
          date: '2023/3/1',
          building: '1-4轴×C-K轴及1-1/2轴往西5.5米×A-C轴负二层外墙 ',
          quantity: 283
        },
        {
          date: '2023/3/1',
          building: '1-4轴×C-K轴及1-1/2轴往西5.5米×A-C轴负二层外墙 ',
          quantity: 283
        },
        {
          date: '2023/3/1',
          building: '1-4轴×C-K轴及1-1/2轴往西5.5米×A-C轴负二层外墙 ',
          quantity: 283
        },
        {
          date: '2023/3/1',
          building: '1-4轴×H轴及2-2/1轴×G轴负一层梁',
          quantity: 29.5
        },
        {
          date: '2023/3/1',
          building: '1-4轴×H轴及2-2/1轴×G轴负一层梁',
          quantity: 29.5
        },
        {
          date: '2023/2/27',
          building: '一层消防水池底板',
          quantity: 250
        },
        {
          date: '2023/2/27',
          building: '一层消防水池底板',
          quantity: 250
        },
        {
          date: '2023/2/27',
          building: '一层消防水池底板',
          quantity: 250
        },
        {
          date: '2023/2/27',
          building: '1/2轴往西5.5米-8轴×A-C轴及4-8轴×C-K轴负一层梁板',
          quantity: 625
        },
        {
          date: '2023/2/26',
          building: '负二层核心筒剪力墙柱',
          quantity: 257
        },
        {
          date: '2023/2/26',
          building: '负二层核心筒剪力墙柱',
          quantity: 257
        },
        {
          date: '2023/2/26',
          building: '1/2轴往西5.5米-8轴×A-C轴及4-8轴×C-K轴负二层外墙',
          quantity: 439.5
        },
        {
          date: '2023/2/26',
          building: '1/2轴往西5.5米-8轴×A-C轴及4-8轴×C-K轴负二层外墙',
          quantity: 439.5
        },
        {
          date: '2023/2/26',
          building: '1/2轴往西5.5米-8轴×A-C轴及4-8轴×C-K轴负二层外墙',
          quantity: 439.5
        },
        {
          date: '2023/2/26',
          building: '1/2轴往西5.5米-8轴×A-C轴及4-8轴×C-K轴负一层梁板',
          quantity: 925
        },
        {
          date: '2023/2/26',
          building: '1/2轴往西5.5米-8轴×A-C轴及4-8轴×C-K轴负一层梁板',
          quantity: 925
        },
        {
          date: '2023/2/22',
          building: '负二层钢管柱',
          quantity: 82
        },
        {
          date: '2023/2/22',
          building: '负二层钢管柱',
          quantity: 82
        },
        {
          date: '2023/1/19',
          building: '1-4轴×C-K轴负三层人防墙柱',
          quantity: 90
        },
        {
          date: '2023/1/19',
          building: '1-4轴×C-K轴负三层人防墙柱',
          quantity: 90
        },
        {
          date: '2023/1/18',
          building: '1-4轴×C-K轴负二层梁、板',
          quantity: 650
        },
        {
          date: '2023/1/18',
          building: '1-4轴×C-K轴负二层梁、板',
          quantity: 650
        },
        {
          date: '2023/1/18',
          building: '1-4轴×C-K轴负三层柱',
          quantity: 60
        },
        {
          date: '2023/1/18',
          building: '1-4轴×C-K轴负三层柱',
          quantity: 60
        },
        {
          date: '2023/1/18',
          building: '1-4轴×C-K轴负三层外墙',
          quantity: 204.5
        },
        {
          date: '2023/1/18',
          building: '1-4轴×C-K轴负三层外墙',
          quantity: 204.5
        },
        {
          date: '2023/1/18',
          building: '1-4轴×C-K轴负三层外墙',
          quantity: 204.5
        },
        {
          date: '2023/1/18',
          building: '负三层钢管柱',
          quantity: 70
        },
        {
          date: '2023/1/18',
          building: '负三层钢管柱',
          quantity: 70
        },
        {
          date: '2023/1/16',
          building: '4-8轴×F轴往南4.3米-K轴负三层外墙',
          quantity: 231
        },
        {
          date: '2023/1/16',
          building: '4-8轴×F轴往南4.3米-K轴负三层外墙',
          quantity: 231
        },
        {
          date: '2023/1/16',
          building: '4-8轴×F轴往南4.3米-K轴负三层外墙',
          quantity: 231
        },
        {
          date: '2023/1/16',
          building: '4-8轴×F轴往南4.3米-K轴负三层人防墙柱',
          quantity: 128
        },
        {
          date: '2023/1/16',
          building: '4-8轴×F轴往南4.3米-K轴负三层人防墙柱',
          quantity: 128
        },
        {
          date: '2023/1/16',
          building: '4-8轴×F轴往南4.3米-K轴负二层梁、板',
          quantity: 618
        },
        {
          date: '2023/1/16',
          building: '4-8轴×F轴往南4.3米-K轴负二层梁、板',
          quantity: 618
        },
        {
          date: '2023/1/16',
          building: '负三层核心筒剪力墙、柱',
          quantity: 354.5
        },
        {
          date: '2023/1/16',
          building: '负三层核心筒剪力墙、柱',
          quantity: 354.5
        },
        {
          date: '2023/1/14',
          building: '1-8轴×A-C轴及4-8轴×C-F轴往南4.3米负三层人防墙、柱',
          quantity: 180
        },
        {
          date: '2023/1/14',
          building: '1-8轴×A-C轴及4-8轴×C-F轴往南4.3米负三层人防墙、柱',
          quantity: 180
        },
        {
          date: '2023/1/14',
          building: '1-8轴×A-C轴及4-8轴×C-F轴往南4.3米负二层梁、板',
          quantity: 464.5
        },
        {
          date: '2023/1/14',
          building: '1-8轴×A-C轴及4-8轴×C-F轴往南4.3米负二层梁、板',
          quantity: 464.5
        },
        {
          date: '2023/1/14',
          building: '1-8轴×A-C轴及4-8轴×C-F轴往南4.3米负三层人防墙、柱',
          quantity: 193
        },
        {
          date: '2023/1/14',
          building: '1-8轴×A-C轴及4-8轴×C-F轴往南4.3米负三层人防墙、柱',
          quantity: 193
        },
        {
          date: '2023/1/13',
          building: '1-8轴×A-C轴及4-8轴×C-F轴往南4.3米负三层外墙',
          quantity: 170
        },
        {
          date: '2023/1/13',
          building: '1-8轴×A-C轴及4-8轴×C-F轴往南4.3米负三层外墙',
          quantity: 170
        },
        {
          date: '2023/1/13',
          building: '1-8轴×A-C轴及4-8轴×C-F轴往南4.3米负三层外墙',
          quantity: 170
        },
        {
          date: '2023/1/11',
          building: '负三层钢管柱',
          quantity: 70
        },
        {
          date: '2023/1/11',
          building: '负三层钢管柱',
          quantity: 70
        },
        {
          date: '2022/12/31',
          building: '1-1/2轴往西3.5米×C轴往北4.5米-K轴承台底板',
          quantity: 1219
        },
        {
          date: '2022/12/31',
          building: '1-1/2轴往西3.5米×C轴往北4.5米-K轴承台底板',
          quantity: 1219
        },
        {
          date: '2022/12/31',
          building: '1-1/2轴往西3.5米×C轴往北4.5米-K轴承台底板',
          quantity: 1219
        },
        {
          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>