537 lines
13 KiB
Vue
537 lines
13 KiB
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/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>
|