269 lines
6.7 KiB
Vue
269 lines
6.7 KiB
Vue
<template>
|
|
<Card title="实测实量">
|
|
<div class="DataTime">
|
|
<el-date-picker
|
|
v-model="time1"
|
|
type="daterange"
|
|
range-separator="-"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
value-format="yyyy-MM-dd"
|
|
size="mini"
|
|
></el-date-picker>
|
|
</div>
|
|
<div class="list">
|
|
<vue-scroll style="width: 100%; height: 250px">
|
|
<div class="list-item" v-for="(item, index) in listData" :key="index">
|
|
<div class="imgDiv">
|
|
<img
|
|
:preview="item.imageUrl[0] ? item.imageUrl[0].url : []"
|
|
:src="item.imageUrl[0] ? item.imageUrl[0].url : []"
|
|
alt=""
|
|
width="50px"
|
|
/>
|
|
<!-- <img :src="$store.state.FILEURL+item.imageUrl" alt="" /> -->
|
|
</div>
|
|
<div class="textDiv">
|
|
<p style="margin: -70px 0 0 120px; font-size: 16px">
|
|
{{ item.title }}
|
|
</p>
|
|
<p style="margin-top: 10px; font-size: 10px;margin-left:120px">
|
|
{{ item.measuredRealQuantityNumber }}/{{ item.qualifiedNumber }}次
|
|
</p>
|
|
<el-progress
|
|
:percentage="item.qualifiedRatio"
|
|
style="width: 260px; margin-left: 120px"
|
|
></el-progress>
|
|
</div>
|
|
<div class="dateDiv">
|
|
{{ item.surveyingDate }}
|
|
</div>
|
|
</div>
|
|
</vue-scroll>
|
|
</div>
|
|
<div class="tbody" v-if="listData.length == 0">
|
|
<div class="dataImg">
|
|
<img src="@/assets/images/noData3.png" alt srcset />
|
|
<p>{{ $t("message.dataBoard.nodata") }}</p>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
|
|
<script>
|
|
import Card from "../components/Card.vue";
|
|
import { getLimitOrderBySurveyingDateApi } from "@/assets/js/api/zhongjianFourth";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
time1: "",
|
|
// listData:[
|
|
// {
|
|
// img:'~@/assets/images/zjsj/progress1.jpg',
|
|
// name:'结构工程',
|
|
// moen:'94/100',
|
|
// progress:20,
|
|
// date:' 2022-12-20'
|
|
// },
|
|
// {
|
|
// img:'~@/assets/images/zjsj/progress1.jpg',
|
|
// name:'结构工程',
|
|
// moen:'94/100',
|
|
// progress:20,
|
|
// date:' 2022-12-20'
|
|
// },
|
|
// {
|
|
// img:'~@/assets/images/zjsj/progress1.jpg',
|
|
// name:'结构工程',
|
|
// moen:'94/100',
|
|
// progress:20,
|
|
// date:' 2022-12-20'
|
|
// },
|
|
// {
|
|
// img:'~@/assets/images/zjsj/progress1.jpg',
|
|
// name:'结构工程',
|
|
// moen:'94/100',
|
|
// progress:20,
|
|
// date:' 2022-12-20'
|
|
// },
|
|
// // {
|
|
// // img:'~@/assets/images/zjsj/progress1.jpg',
|
|
// // name:'结构工程',
|
|
// // moen:'94/100',
|
|
// // progress:20,
|
|
// // date:' 2022-12-20'
|
|
// // },
|
|
// // {
|
|
// // img:'~@/assets/images/zjsj/progress1.jpg',
|
|
// // name:'结构工程',
|
|
// // moen:'94/100',
|
|
// // progress:20,
|
|
// // date:' 2022-12-20'
|
|
// // },
|
|
// // {
|
|
// // img:'~@/assets/images/zjsj/progress1.jpg',
|
|
// // name:'结构工程',
|
|
// // moen:'94/100',
|
|
// // progress:20,
|
|
// // date:' 2022-12-20'
|
|
// // },
|
|
// // {
|
|
// // img:'~@/assets/images/zjsj/progress1.jpg',
|
|
// // name:'结构工程',
|
|
// // moen:'94/100',
|
|
// // progress:20,
|
|
// // date:' 2022-12-20'
|
|
// // },
|
|
// // {
|
|
// // img:'~@/assets/images/zjsj/progress1.jpg',
|
|
// // name:'结构工程',
|
|
// // moen:'94/100',
|
|
// // progress:20,
|
|
// // date:' 2022-12-20'
|
|
// // },
|
|
// // {
|
|
// // img:'~@/assets/images/zjsj/progress1.jpg',
|
|
// // name:'结构工程',
|
|
// // moen:'94/100',
|
|
// // progress:20,
|
|
// // date:' 2022-12-20'
|
|
// // },
|
|
// ],
|
|
sn: "",
|
|
listData: [],
|
|
time1: "",
|
|
};
|
|
},
|
|
created() {
|
|
this.sn = this.$store.state.projectSn;
|
|
this.getData();
|
|
},
|
|
methods: {
|
|
//查询实测实量数据
|
|
getData() {
|
|
getLimitOrderBySurveyingDateApi({
|
|
projectSn: this.sn,
|
|
}).then((res) => {
|
|
console.log("实测实量", res);
|
|
this.listData = res.result;
|
|
res.result.map((item) => {
|
|
if (item.imageUrl.includes("[")) {
|
|
item.imageUrl = JSON.parse(item.imageUrl);
|
|
console.log("亮点展示 ====");
|
|
if (
|
|
item.imageUrl.length !== 0 &&
|
|
!item.imageUrl[0].url.includes(this.$store.state.FILEURL)
|
|
) {
|
|
item.imageUrl[0].url =
|
|
this.$store.state.FILEURL + item.imageUrl[0].url;
|
|
}
|
|
} else {
|
|
let url = item.imageUrl;
|
|
|
|
if (url.length !== 0 && !url.includes(this.$store.state.FILEURL)) {
|
|
item.imageUrl = [{}];
|
|
item.imageUrl[0].url = this.$store.state.FILEURL + url;
|
|
}
|
|
}
|
|
});
|
|
});
|
|
},
|
|
},
|
|
components: {
|
|
Card,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.list {
|
|
// width: 1000px;
|
|
height: 525px;
|
|
// display: flex;
|
|
// flex-wrap: wrap;
|
|
// margin-left: -290%;
|
|
margin-top: 20px;
|
|
.list-item {
|
|
width: 375px;
|
|
height: 100px;
|
|
// display: flex;
|
|
background: url("~@/assets/images/zjsj/zjsj_scsl.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
// margin-right: 18px;
|
|
margin-top: 10px;
|
|
.dateDiv {
|
|
margin-left: 300px;
|
|
margin-top: -80px;
|
|
font-size: 10px;
|
|
}
|
|
.imgDiv {
|
|
img {
|
|
width: 100px;
|
|
height: 80px;
|
|
margin: 10px 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.DataTime {
|
|
cursor: pointer;
|
|
margin-top: 10px;
|
|
margin-left: 37.5%;
|
|
width: 210;
|
|
height: 17px;
|
|
}
|
|
.dataImg {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: -120% 0px 0px 40%;
|
|
p {
|
|
margin: 6px 0 0 13px;
|
|
}
|
|
}
|
|
::v-deep .el-date-editor--daterange.el-input__inner {
|
|
cursor: pointer;
|
|
width: 235px;
|
|
height: 30px;
|
|
border: 1px solid #66d3d8;
|
|
background: transparent;
|
|
}
|
|
::v-deep .el-range-input {
|
|
cursor: pointer;
|
|
background: transparent;
|
|
color: #fff;
|
|
}
|
|
::v-deep .el-date-editor {
|
|
cursor: pointer;
|
|
.el-range__icon {
|
|
line-height: 23px;
|
|
color: #6ee4f0;
|
|
}
|
|
.el-range-separator {
|
|
line-height: 23px;
|
|
color: #757d88;
|
|
}
|
|
.el-range__close-icon {
|
|
color: #757d88;
|
|
line-height: 23px;
|
|
}
|
|
}
|
|
#trendContainer {
|
|
width: 100%;
|
|
height: 100%;
|
|
left: 0;
|
|
margin-top: -0px;
|
|
}
|
|
::v-deep .el-progress-bar {
|
|
width: 100%;
|
|
::v-deep .el-progress-bar__outer {
|
|
height: 10px !important;
|
|
}
|
|
}
|
|
::v-deep .el-progress__text {
|
|
color: #fff;
|
|
}
|
|
::v-deep .el-progress-bar__inner {
|
|
background-color: #5ce2f6;
|
|
}
|
|
</style> |