代码提交
This commit is contained in:
parent
d2e1cb4541
commit
fb7b38ff66
|
|
@ -55,49 +55,55 @@
|
|||
<!-- :style="{ bottom: boxNone ? '166px' : '0' }" -->
|
||||
|
||||
<div :class="[boxNone ? 'centerBottom' : 'centerBottom2']">
|
||||
<el-scrollbar>
|
||||
<div class="centerBottom3">
|
||||
<div class="boxChild" v-for="item in boxList">
|
||||
<div>{{ item.c1 }}</div>
|
||||
<div>{{ item.c2 }}</div>
|
||||
<div
|
||||
v-if="item.c4 === '未开始'"
|
||||
:style="{
|
||||
'background-image': `url(${require(`../assets/pic/delay.png`)}`,
|
||||
}"
|
||||
></div>
|
||||
<!-- <div v-else-if="item.c1 === '完工'" :style="{ 'background-image': `url(${require(`../assets/pic/no.png`)}` }">
|
||||
<el-scrollbar>
|
||||
<div class="centerBottom3">
|
||||
<div class="boxChild" v-for="item in boxList">
|
||||
<div>{{ item.c1 }}</div>
|
||||
<div>{{ item.c2 }}</div>
|
||||
<div
|
||||
v-if="item.c4 === '未开始'"
|
||||
:style="{
|
||||
'background-image': `url(${require(`../assets/pic/delay.png`)}`,
|
||||
}"
|
||||
></div>
|
||||
<!-- <div v-else-if="item.c1 === '完工'" :style="{ 'background-image': `url(${require(`../assets/pic/no.png`)}` }">
|
||||
</div> -->
|
||||
<div
|
||||
v-if="item.c4 === '实施中'"
|
||||
:style="{
|
||||
'background-image': `url(${require(`../assets/pic/no.png`)}`,
|
||||
}"
|
||||
></div>
|
||||
<!-- <div v-eles :style="{ 'background-image': `url(${require(`../assets/pic/finish.png`)}` }"></div> -->
|
||||
<div
|
||||
:style="{
|
||||
'background-image': `url(${require(`../assets/pic/finish.png`)}`,
|
||||
}"
|
||||
></div>
|
||||
<div>{{ item.c3 }}</div>
|
||||
<div
|
||||
:style="{
|
||||
color:
|
||||
item.c4 == '逾期中' || item.c4 == '逾期完成'
|
||||
? '#FFA700'
|
||||
: '#00FFF6',
|
||||
}"
|
||||
>
|
||||
{{ item.c4 }}
|
||||
<div
|
||||
v-if="item.c4 === '实施中'"
|
||||
:style="{
|
||||
'background-image': `url(${require(`../assets/pic/no.png`)}`,
|
||||
}"
|
||||
></div>
|
||||
<!-- <div v-eles :style="{ 'background-image': `url(${require(`../assets/pic/finish.png`)}` }"></div> -->
|
||||
<div
|
||||
:style="{
|
||||
'background-image': `url(${require(`../assets/pic/finish.png`)}`,
|
||||
}"
|
||||
></div>
|
||||
<div>{{ item.c3 }}</div>
|
||||
<div
|
||||
:style="{
|
||||
color:
|
||||
item.c4 == '逾期中' || item.c4 == '逾期完成'
|
||||
? '#FFA700'
|
||||
: '#00FFF6',
|
||||
}"
|
||||
>
|
||||
{{ item.c4 }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineBox" :style="'width:' + jinduList * 20 + '%;'">
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
status="success"
|
||||
:show-text="false"
|
||||
:stroke-width="9"
|
||||
:percentage="progress"
|
||||
style="z-index: 10"
|
||||
></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineBox">
|
||||
<!-- <el-progress :text-inside="true" status="success" :stroke-width="9" :percentage="70" style="z-index:10"></el-progress> -->
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 左侧模块1 -->
|
||||
|
|
@ -357,6 +363,8 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
jinduList:0, //计算进度条的宽度
|
||||
progress:0, //计算进度条的值
|
||||
securityCheck: [], //安全检查统计
|
||||
introduction: "", //基本情况
|
||||
projectId: "", //项目Id
|
||||
|
|
@ -667,6 +675,20 @@ export default {
|
|||
getProjectStatus({
|
||||
projectId: this.projectId,
|
||||
}).then((res) => {
|
||||
console.log(res.data.data,'==================');
|
||||
this.jinduList = res.data.data.length
|
||||
for(var i = 0; i < res.data.data.length; i++){
|
||||
if (res.data.data[i].completionStatusValue == '正常完成') {
|
||||
if (i==0) {
|
||||
this.progress = (i + 1) * 5
|
||||
}else if (i+1 >= this.jinduList) {
|
||||
this.progress = 95
|
||||
}else{
|
||||
this.progress = (i + 1) * 12.5
|
||||
}
|
||||
}
|
||||
}
|
||||
console.log(this.progress,'----------------');
|
||||
this.boxList = Object.keys(res.data.data).map((item, index) => {
|
||||
if (res.data.data[item].planEndTime != null) {
|
||||
res.data.data[item].planEndTime = res.data.data[
|
||||
|
|
@ -939,32 +961,33 @@ export default {
|
|||
bottom: 164px;
|
||||
}
|
||||
}
|
||||
.centerBottom3{
|
||||
.centerBottom3 {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// display: flex;
|
||||
z-index: 999;
|
||||
position: relative;
|
||||
display: -webkit-box;
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.lineBox {
|
||||
width: 810px;
|
||||
// width: 100%;
|
||||
height: 9px;
|
||||
// background: #ffffff;
|
||||
// border-radius: 5px;
|
||||
// opacity: 0.5;
|
||||
position: absolute;
|
||||
top: 80px;
|
||||
left: 20px;
|
||||
// left: 20px;
|
||||
z-index: 10 !important;
|
||||
}
|
||||
|
||||
.boxChild {
|
||||
// margin-left: 70px;
|
||||
text-align: center;
|
||||
width: 140px !important;
|
||||
width: 20% !important;
|
||||
height: 100%;
|
||||
z-index: 999 !important;
|
||||
// display: inline;
|
||||
|
|
@ -1689,10 +1712,10 @@ export default {
|
|||
/* element滚动条组件 隐藏水平滚动条 */
|
||||
/deep/.el-scrollbar__thumb {
|
||||
//可设置滚动条颜色
|
||||
background: greenyellow;//这里我设置成了透明色,可以根据需求添加自己想要的颜色
|
||||
background: rgb(55,142,136); //这里我设置成了透明色,可以根据需求添加自己想要的颜色
|
||||
}
|
||||
/deep/ .el-scrollbar__wrap{
|
||||
margin-bottom:10px !important
|
||||
/deep/ .el-scrollbar__wrap {
|
||||
margin-bottom: 10px !important;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue