575 lines
11 KiB
Vue
575 lines
11 KiB
Vue
<template>
|
||
<view class="fullHeight">
|
||
<headers :showBack="true" class="">
|
||
<view class="headerName">
|
||
制梁进度详情
|
||
<view class="headerBack" @click="returnBack">
|
||
<u-icon name="arrow-left" color="#333333" size="40"></u-icon>
|
||
</view>
|
||
</view>
|
||
</headers>
|
||
<view class="task-detail">
|
||
<view class="detail-row">
|
||
<view class="row-title">
|
||
梁号:
|
||
</view>
|
||
<view class="row-detail">
|
||
1#-1
|
||
</view>
|
||
</view>
|
||
<view class="detail-row">
|
||
<view class="row-title">
|
||
所属桥段:
|
||
</view>
|
||
<view class="row-detail">
|
||
新市枢纽D匝道1号桥
|
||
</view>
|
||
</view>
|
||
<view class="detail-row">
|
||
<view class="row-title">
|
||
梁板类型:
|
||
</view>
|
||
<view class="row-detail">
|
||
箱梁
|
||
</view>
|
||
</view>
|
||
<view class="detail-row">
|
||
<view class="row-title">
|
||
制梁状态:
|
||
</view>
|
||
<view class="row-detail">
|
||
<text style="color: #21C28E;">已完成</text>
|
||
</view>
|
||
</view>
|
||
<view class="detail-row">
|
||
<view class="row-title">
|
||
存梁台座编号:
|
||
</view>
|
||
<view class="row-detail">
|
||
21#-1
|
||
</view>
|
||
</view>
|
||
<view class="detail-row">
|
||
<view class="row-title">
|
||
计划制梁时间:
|
||
</view>
|
||
<view class="row-detail" style="width: 290rpx;">
|
||
2022-08-11 08:00:00~ 2022-08-11 08:00:00
|
||
</view>
|
||
</view>
|
||
<view class="detail-row">
|
||
<view class="row-title">
|
||
计划架梁时间：
|
||
</view>
|
||
<view class="row-detail" style="width: 290rpx;">
|
||
2022-08-11 08:00:00~ 2022-08-11 08:00:00
|
||
</view>
|
||
</view>
|
||
<view class="detail-row">
|
||
<view class="row-title">
|
||
跨:
|
||
</view>
|
||
<view class="row-detail">
|
||
5m
|
||
</view>
|
||
</view>
|
||
<view class="detail-row">
|
||
<view class="row-title">
|
||
幅:
|
||
</view>
|
||
<view class="row-detail">
|
||
左幅
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="diliver-line"></view>
|
||
|
||
<view class="makeBeamProgress">
|
||
<view class="list-top">
|
||
<view class="progress-title">
|
||
制梁进度
|
||
</view>
|
||
<view class="progress-tool">
|
||
<view class="bindProduct" @click="openProductLineDialog">
|
||
绑定生产线
|
||
</view>
|
||
<view class="bindSaveBeam" @click="openSaveBeamDialog">
|
||
绑定存梁台座
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list-item" v-for="item in 3" @click="toProcessDetail">
|
||
<!-- 左侧进度线 -->
|
||
<view class="left-line">
|
||
<view class="circle"></view>
|
||
<view class="line"> </view>
|
||
</view>
|
||
|
||
<view class="item-state">
|
||
<view class="state-text" :style="{color: '#21C28E'}">
|
||
已完成
|
||
</view>
|
||
<view class="state-circle">
|
||
<u-icon name="arrow-right" color="#fff" size="16"></u-icon>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="title">
|
||
钢筋绑扎
|
||
</view>
|
||
<view class="item-detail">
|
||
<view class="text-left">
|
||
台座编号:
|
||
</view>
|
||
<view class="text-right">
|
||
1#-1
|
||
</view>
|
||
</view>
|
||
<view class="item-detail">
|
||
<view class="text-left">
|
||
工序负责人:
|
||
</view>
|
||
<view class="text-right">
|
||
曹德康
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 绑定生产线弹窗 -->
|
||
<u-popup v-model="bindProductShow" mode="bottom" border-radius="50">
|
||
<view class="dialog-content">
|
||
<view class="product-title">
|
||
绑定生产线
|
||
</view>
|
||
<view class="choice-list">
|
||
<view class="table-head">
|
||
<view class="thead-1">
|
||
序号
|
||
</view>
|
||
<view class="thead-2">
|
||
生产线
|
||
</view>
|
||
<view class="thead-3">
|
||
是否被绑定
|
||
</view>
|
||
</view>
|
||
<view class="table-body" v-for="(item,index) in productList" :key="index">
|
||
<view class="thead-1">
|
||
{{ index + 1 }}
|
||
</view>
|
||
<view class="thead-2">
|
||
生产线A
|
||
</view>
|
||
<view class="thead-3">
|
||
是
|
||
</view>
|
||
<view class="radio">
|
||
<label class="radio" @click="productRadioChange(index,item)">
|
||
<radio :checked="index == indexs?true:false" />
|
||
</label>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="dialog-footer">
|
||
<view class="cancle">
|
||
取消
|
||
</view>
|
||
<view class="confirm">
|
||
确认
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 绑定存梁台座弹窗 -->
|
||
<u-popup v-model="bindSaveBeamShow" mode="bottom" border-radius="50">
|
||
<view class="dialog-content">
|
||
<view class="product-title">
|
||
绑定存梁台座
|
||
</view>
|
||
<view class="choice-list">
|
||
<view class="table-head">
|
||
<view class="thead-1">
|
||
序号
|
||
</view>
|
||
<view class="thead-2">
|
||
存梁台座编号
|
||
</view>
|
||
<view class="thead-3">
|
||
是否被绑定
|
||
</view>
|
||
</view>
|
||
<view class="table-body" v-for="(item,index) in productList" :key="index">
|
||
<view class="thead-1">
|
||
{{ index + 1 }}
|
||
</view>
|
||
<view class="thead-2">
|
||
1#-1
|
||
</view>
|
||
<view class="thead-3">
|
||
是
|
||
</view>
|
||
<view class="radio">
|
||
<label :disabled="true" class="radio" @click="saveBeamRadioChange(index,item)">
|
||
<radio :disabled="true" :checked="index == indexs?true:false" />
|
||
</label>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="dialog-footer">
|
||
<view class="cancle">
|
||
取消
|
||
</view>
|
||
<view class="confirm">
|
||
确认
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
indexs:0,
|
||
selectProductLine: "",
|
||
bindSaveBeamShow: false,
|
||
bindProductShow: false,
|
||
beamSectionId: "", // 桥段ID
|
||
beamNumSearch: "",
|
||
searchStyle: {
|
||
position: "absolute",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
justifyContent: "center",
|
||
right: "13%",
|
||
width: "90rpx",
|
||
height: "40rpx",
|
||
color: "#fff",
|
||
fontSize: "23rpx",
|
||
background: "#5181F6",
|
||
borderRadius: "70rpx 70rpx 70rpx 70rpx",
|
||
},
|
||
productList: [{
|
||
field1: "1",
|
||
field2: "1",
|
||
field3: ""
|
||
},
|
||
{
|
||
field1: "2",
|
||
field2: "2",
|
||
field3: ""
|
||
},
|
||
{
|
||
field1: "2",
|
||
field2: "2",
|
||
field3: ""
|
||
},
|
||
{
|
||
field1: "2",
|
||
field2: "2",
|
||
field3: ""
|
||
},
|
||
{
|
||
field1: "2",
|
||
field2: "2",
|
||
field3: ""
|
||
},
|
||
{
|
||
field1: "2",
|
||
field2: "2",
|
||
field3: ""
|
||
},
|
||
]
|
||
};
|
||
},
|
||
methods: {
|
||
saveBeamRadioChange(index,item) {
|
||
this.indexs = index
|
||
console.log("选中任意一条", item)
|
||
},
|
||
|
||
productRadioChange(index,item) {
|
||
this.indexs = index
|
||
console.log("选中任意一条", item)
|
||
},
|
||
|
||
openProductLineDialog() {
|
||
console.log("打开绑定生产线弹窗")
|
||
this.bindProductShow = true
|
||
},
|
||
openSaveBeamDialog() {
|
||
console.log("打开绑定存梁台座弹窗")
|
||
this.bindSaveBeamShow = true
|
||
},
|
||
returnBack() {
|
||
console.log("返回")
|
||
uni.navigateBack()
|
||
},
|
||
toProcessDetail() {
|
||
uni.navigateTo({
|
||
url: "/pages/projectEnd/smartBeamField/processDetail"
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.dialog-content {
|
||
width: 750rpx;
|
||
padding: 0 50rpx;
|
||
height: 787rpx;
|
||
background: #FFFFFF;
|
||
position: relative;
|
||
|
||
.dialog-footer {
|
||
width: 600rpx;
|
||
position: absolute;
|
||
bottom: 50rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
font-size: 35rpx;
|
||
font-family: Advent Pro, Advent Pro;
|
||
color: #5680FA;
|
||
.cancle {
|
||
margin-left: 30rpx;
|
||
}
|
||
.confirm {
|
||
|
||
}
|
||
}
|
||
|
||
.choice-list {
|
||
height: 550rpx;
|
||
overflow: scroll;
|
||
margin-top: 20rpx;
|
||
font-size: 30rpx;
|
||
font-family: Acme, Acme;
|
||
text-align: center;
|
||
|
||
.table-head {
|
||
color: #8C8C8C;
|
||
padding: 30rpx 0;
|
||
display: flex;
|
||
border-bottom: 1px solid #E6E6E6;
|
||
|
||
.thead-1 {
|
||
width: 100rpx;
|
||
}
|
||
|
||
.thead-2 {
|
||
width: 200rpx;
|
||
}
|
||
|
||
.thead-3 {
|
||
width: 200rpx;
|
||
}
|
||
}
|
||
|
||
.table-body {
|
||
padding: 40rpx 0;
|
||
display: flex;
|
||
color: #333333;
|
||
border-bottom: 1px solid #E6E6E6;
|
||
.radio {
|
||
margin-left: 30rpx;
|
||
}
|
||
|
||
.thead-1 {
|
||
width: 100rpx;
|
||
}
|
||
|
||
.thead-2 {
|
||
width: 200rpx;
|
||
}
|
||
|
||
.thead-3 {
|
||
width: 200rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.product-title {
|
||
margin-top: 50rpx;
|
||
text-align: center;
|
||
color: #111111;
|
||
font-size: 38rpx;
|
||
}
|
||
|
||
|
||
|
||
}
|
||
|
||
.makeBeamProgress {
|
||
padding: 0 30rpx;
|
||
padding-bottom: 50rpx;
|
||
|
||
.list-item {
|
||
width: 644rpx;
|
||
height: 229rpx;
|
||
padding: 0rpx 24rpx;
|
||
margin-left: 30rpx;
|
||
margin-top: 30rpx;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 0 19rpx 0px #E6E6E6;
|
||
border-radius: 19rpx;
|
||
position: relative;
|
||
font-family: Acme, Acme;
|
||
|
||
.item-state {
|
||
display: flex;
|
||
position: absolute;
|
||
top: 40%;
|
||
right: 30rpx;
|
||
|
||
.state-text {
|
||
margin-right: 15rpx;
|
||
font-size: 23rpx;
|
||
}
|
||
|
||
.state-circle {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
width: 37rpx;
|
||
height: 37rpx;
|
||
background: #21C28E;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
|
||
.title {
|
||
padding-top: 30rpx;
|
||
font-size: 27rpx;
|
||
color: #595959;
|
||
}
|
||
|
||
.item-detail {
|
||
margin-top: 28rpx;
|
||
display: flex;
|
||
|
||
.text-left {
|
||
width: 180rpx;
|
||
color: #8C8C8C;
|
||
}
|
||
|
||
.text-right {
|
||
color: #595959;
|
||
font-family: Advent Pro, Advent Pro;
|
||
}
|
||
}
|
||
|
||
.left-line {
|
||
width: 20rpx;
|
||
position: absolute;
|
||
left: -35rpx;
|
||
|
||
.circle {
|
||
width: 20rpx;
|
||
height: 20rpx;
|
||
border: 6rpx solid #5680FA;
|
||
/* 设置圆环的边框宽度和颜色 */
|
||
border-radius: 50%;
|
||
/* 将元素的边框半径设置为 50%，使其变成一个圆形 */
|
||
}
|
||
|
||
.line {
|
||
width: 1px;
|
||
height: 240rpx;
|
||
margin: auto;
|
||
background: #5181F6;
|
||
}
|
||
}
|
||
}
|
||
|
||
.list-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 50rpx;
|
||
|
||
.progress-title {
|
||
color: #545454;
|
||
font-size: 31rpx;
|
||
margin-left: 12rpx;
|
||
}
|
||
|
||
.progress-tool {
|
||
display: flex;
|
||
|
||
.bindProduct {
|
||
font-size: 19rpx;
|
||
padding: 10rpx;
|
||
color: #FFFFFF;
|
||
background: #5680FA;
|
||
border-radius: 8rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.bindSaveBeam {
|
||
font-size: 19rpx;
|
||
padding: 10rpx;
|
||
color: #FFFFFF;
|
||
background: #5680FA;
|
||
border-radius: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.headerBack {
|
||
position: absolute;
|
||
left: 5%;
|
||
top: 5%;
|
||
}
|
||
|
||
.diliver-line {
|
||
width: 688rpx;
|
||
margin: auto;
|
||
border-bottom: 1px solid #E6E6E6;
|
||
}
|
||
|
||
.task-detail {
|
||
padding: 30rpx 40rpx;
|
||
|
||
.detail-row {
|
||
display: flex;
|
||
margin-top: 35rpx;
|
||
|
||
.qrCode {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
text-align: center;
|
||
|
||
.download-text {
|
||
color: #5181F6;
|
||
font-size: 27rpx;
|
||
}
|
||
|
||
.img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.row-title {
|
||
width: 200rpx;
|
||
font-size: 27rpx;
|
||
font-family: Advent Pro, Advent Pro;
|
||
color: #8C8C8C;
|
||
}
|
||
|
||
.row-detail {
|
||
font-size: 27rpx;
|
||
font-family: Advent Pro, Advent Pro;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
</style> |