524 lines
12 KiB
Vue
524 lines
12 KiB
Vue
<template>
|
||
<view class="content">
|
||
<statusNav returnColor="#c2c2c2" navBarTitle="项目详情"></statusNav>
|
||
<container-subgroup-two>
|
||
<view slot="content" style="margin: 0 -30rpx;">
|
||
<view class="head-top">
|
||
<view class="details-head">
|
||
<view class="swiper-head">
|
||
<swiper class="swiper" @change="changeAutoplay" :autoplay="autoplay" :interval="interval" circular>
|
||
<swiper-item v-for="(item,index) in projectObj.completed_img" :key="index">
|
||
<view class="swiper-item uni-bg-red">
|
||
<image class="img" :src="item" mode="aspectFill"></image>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
<view class="indication-point fon24 disjcac">{{index}}/{{imgNum}}</view>
|
||
</view>
|
||
<view class="title">{{projectObj.project_name}}</view>
|
||
<view class="code">{{projectObj.project_number}}</view>
|
||
<view class="address">
|
||
<image class="img" src="../../static/iocn/im.png" mode=""></image>
|
||
<view class="text">{{projectObj.address}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="last-date">
|
||
<view class="last-date-content">
|
||
<image class="icon" src="../../static/iocn/gzzt.png" mode=""></image>
|
||
<view class="text">最近一次维保时间：{{projectObj.downtime}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="project-message-title">
|
||
<view class="icon"></view>
|
||
<view class="text">项目概况</view>
|
||
</view>
|
||
<view class="project-message-content">
|
||
<view class="li">
|
||
<view class="title-one">客户名称</view>
|
||
<view class="text">：上海弘焱电子科技有限公司</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title-one">竣工日期</view>
|
||
<view class="text">：2022/2/26</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title-one">质保年限</view>
|
||
<view class="text">：1 年</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title-one">产品品类：</view>
|
||
<view class="text">单色LED屏</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title-one">品牌</view>
|
||
<view class="text">：海康威视</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title-one">维保次数</view>
|
||
<view class="text">：4 次</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">规格型号</view>
|
||
<view class="text">：DS-CK15FI</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">尺寸</view>
|
||
<view class="text">：4.57m*2.88m</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">合同类型：</view>
|
||
<view class="text">制作安装</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">合同开始</view>
|
||
<view class="text">： 2021/02/26</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">合同结束</view>
|
||
<view class="text">：2021/02/2</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">应用场景 </view>
|
||
<view class="text">：会议室</view>
|
||
</view>
|
||
<view class="li">
|
||
<view class="title">安装位置</view>
|
||
<view class="text">：地下负二层总控电机室</view>
|
||
</view>
|
||
</view>
|
||
<view class="project-message-title">
|
||
<view class="icon"></view>
|
||
<view class="text">项目材料</view>
|
||
</view>
|
||
<view class="project-materials-content">
|
||
<view class="project-materials-title">
|
||
<view class="text">名称</view>
|
||
<view class="text">品牌</view>
|
||
<view class="text">型号</view>
|
||
<view class="text">批次</view>
|
||
<view class="text">尺寸</view>
|
||
<view class="text">数量</view>
|
||
</view>
|
||
<view class="project-materials-text">
|
||
<view class="text">接收卡</view>
|
||
<view class="text">卡莱特</view>
|
||
<view class="text">5A-75E</view>
|
||
<view class="text">1033876</view>
|
||
<view class="text">*</view>
|
||
<view class="text">1台</view>
|
||
</view>
|
||
</view>
|
||
<view class="record-nav">
|
||
<view class="li" @click="recordNav(index)" :class="item.state?'on':''"
|
||
v-for="(item,index) in recordState">
|
||
{{item.title}}
|
||
</view>
|
||
</view>
|
||
<view class="record-content">
|
||
<view class="title">过程追踪</view>
|
||
<view class="list">
|
||
<view class="li pad-z40 fon27 col9" :class="index==0 ? 'activeTrack' : ''" v-for="(item,index) in recordList" :key="index">
|
||
<view class="disac fw line-h60">
|
||
<view class="text">{{item.time_line}}</view>
|
||
<!-- <view class="date">2020-05-15 16:00</view> -->
|
||
</view>
|
||
</view>
|
||
<pitera v-if="recordList.length==0" :textStr="nomoreText"></pitera>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</container-subgroup-two>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
|
||
import statusNav from "../../components/status-nav.vue"
|
||
import pitera from '@/components/nothing/pitera.vue';
|
||
export default {
|
||
components: {
|
||
statusNav,
|
||
containerSubgroupTwo,
|
||
pitera
|
||
},
|
||
data() {
|
||
return {
|
||
autoplay: true,
|
||
interval: 3000,
|
||
index: 1,
|
||
recordState: [{
|
||
title: '维保记录',
|
||
state: true
|
||
},
|
||
{
|
||
title: '保养记录',
|
||
state: false
|
||
},
|
||
{
|
||
title: '巡检记录',
|
||
state: false
|
||
},
|
||
],
|
||
projectObj:'',
|
||
imgNum:0,//图片数量
|
||
typeId:1,//记录类型 1：维修记录 2:保养记录 3: 巡检记录
|
||
list_rows:200,
|
||
page:1,
|
||
recordList:[],//记录列表
|
||
nomoreText:'',
|
||
projectId: "",//项目id
|
||
}
|
||
},
|
||
onLoad(op) {
|
||
if(op.id!=undefined) {
|
||
this.projectId = op.id
|
||
this.getData(this.projectId);
|
||
this.getRecord();
|
||
}
|
||
},
|
||
methods: {
|
||
// 查询维保记录、保养记录、巡检记录
|
||
getRecord(){
|
||
let params = {
|
||
project_id: this.projectId,
|
||
type_id: this.typeId, //记录类型 1：维修记录 2:保养记录 3: 巡检记录
|
||
list_rows: this.list_rows,
|
||
page:this.page
|
||
}
|
||
this.$requst.get('/universal/api.project/recording',params).then(res=>{
|
||
if(res.code) {
|
||
/**
|
||
* {
|
||
* time_line:''
|
||
* }
|
||
*/
|
||
this.recordList = res.data.data;
|
||
} else {
|
||
this.nomoreText = res.msg;
|
||
}
|
||
})
|
||
},
|
||
changeAutoplay(data) {
|
||
this.index = data.detail.current - 0 + 1
|
||
},
|
||
getData(id) {
|
||
this.$requst.get('/universal/api.project/project_info', {
|
||
project_id: id,
|
||
}).then(res => {
|
||
if (res.code) {
|
||
this.projectObj = res.data;
|
||
this.imgNum = this.projectObj.completed_img.length;
|
||
} else {
|
||
|
||
}
|
||
})
|
||
},
|
||
recordNav(index) {
|
||
if(index==0) this.typeId = 1;
|
||
if(index==1) this.typeId = 2;
|
||
if(index==2) this.typeId = 3;
|
||
for (var i = 0; i < this.recordState.length; i++) {
|
||
this.recordState[i].state = false
|
||
}
|
||
this.recordState[index].state = true
|
||
this.getRecord();
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #F7F7F7;
|
||
}
|
||
|
||
.content {
|
||
padding: 16rpx 0;
|
||
|
||
}
|
||
|
||
.swiper {
|
||
width: 100%;
|
||
height: 500rpx;
|
||
}
|
||
|
||
.swiper .img {
|
||
height: 500rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.details-head {
|
||
width: 725rpx;
|
||
margin: auto;
|
||
padding: 24rpx 12rpx;
|
||
box-sizing: border-box;
|
||
height: 682rpx;
|
||
background-color: #FFFFFF;
|
||
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
.swiper-head {
|
||
position: relative;
|
||
}
|
||
|
||
.indication-point {
|
||
width: 102rpx;
|
||
height: 46rpx;
|
||
border-radius: 26rpx 0 0 0;
|
||
right: 0px;
|
||
bottom: 0rpx;
|
||
text-align: center;
|
||
color: #fff;
|
||
position: absolute;
|
||
background-color: #e64545;
|
||
}
|
||
|
||
.details-head .title {
|
||
font-size: 28rpx;
|
||
padding: 13rpx 0rpx;
|
||
}
|
||
|
||
.details-head .code {
|
||
font-size: 24rpx;
|
||
padding: 0rpx 0rpx 13rpx 0rpx;
|
||
color: #ff8800;
|
||
}
|
||
|
||
.address {
|
||
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.address .img {
|
||
width: 18rpx;
|
||
margin-right: 14rpx;
|
||
height: 24rpx;
|
||
}
|
||
|
||
.address .text {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.last-date {
|
||
width: 100%;
|
||
padding: 10rpx 13rpx 10rpx;
|
||
box-shadow: 0rpx 5rpx 3rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.last-date-content {
|
||
width: 100%;
|
||
height: 57rpx;
|
||
display: flex;
|
||
padding-left: 20rpx;
|
||
align-items: center;
|
||
border-radius: 10rpx;
|
||
background: linear-gradient(to right, #FFEBEB, #F7F7F7);
|
||
}
|
||
|
||
.last-date-content .icon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.last-date-content .text {
|
||
font-size: 22rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.project-message-title {
|
||
display: flex;
|
||
padding: 0 33rpx;
|
||
align-items: center;
|
||
border-top: 2rpx solid #ebebeb;
|
||
border-bottom: 2rpx solid #ebebeb;
|
||
padding-top: 23rpx;
|
||
background-color: #FFFFFF;
|
||
padding-bottom: 21rpx;
|
||
}
|
||
|
||
.project-message-title .icon {
|
||
width: 8rpx;
|
||
height: 27rpx;
|
||
margin-right: 15rpx;
|
||
border-radius: 50rpx;
|
||
background: linear-gradient(#00A2e9, #bbe6f9);
|
||
}
|
||
|
||
.project-message-title .text {
|
||
font-size: 26rpx
|
||
}
|
||
|
||
.project-message-content {
|
||
display: flex;
|
||
padding: 30rpx 25rpx 0rpx;
|
||
flex-wrap: wrap;
|
||
margin-bottom: 8rpx;
|
||
background-color: #FFFFFF;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.project-message-content .title-one {
|
||
color: #4d4c4c;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
}
|
||
|
||
.project-message-content .li {
|
||
display: flex;
|
||
margin-bottom: 31rpx;
|
||
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.project-message-content .title {
|
||
color: #4d4c4c;
|
||
font-weight: bold;
|
||
font-size: 24rpx
|
||
}
|
||
|
||
.project-message-content .text {
|
||
color: #4d4c4c;
|
||
font-size: 24rpx
|
||
}
|
||
|
||
.record-nav {
|
||
padding: 33rpx 50rpx 33rpx;
|
||
display: flex;
|
||
margin-top: 10rpx;
|
||
background-color: #FFFFFF;
|
||
justify-content: space-between;
|
||
border-bottom: 2rpx solid #D5D4D4;
|
||
}
|
||
|
||
.record-nav .li {
|
||
font-size: 24rpx;
|
||
width: 128rpx;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
position: relative;
|
||
}
|
||
|
||
.record-nav .on {
|
||
color: #00b1ff;
|
||
}
|
||
|
||
.record-nav .on::after {
|
||
content: "";
|
||
width: 100%;
|
||
height: 2rpx;
|
||
position: absolute;
|
||
background-color: #00B1FF;
|
||
top: 65rpx;
|
||
left: 0rpx;
|
||
}
|
||
|
||
.record-content {
|
||
padding: 0 52rpx;
|
||
|
||
padding-top: 33rpx;
|
||
padding-bottom: 40rpx;
|
||
background-color: #FFFFFF;
|
||
}
|
||
|
||
.record-content .title {
|
||
color: #333333;
|
||
margin-left: 12rpx;
|
||
font-size: 30rpx;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.record-content .list .li {
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 20rpx;
|
||
border-left: 2rpx solid #999999;
|
||
|
||
}
|
||
|
||
.record-content .list .li::before {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
left: -8rpx;
|
||
width: 14rpx;
|
||
height: 14rpx;
|
||
background-color: #999999;
|
||
border-radius: 100%;
|
||
}
|
||
|
||
.record-content .list .activeTrack {
|
||
color: #0084ff;
|
||
padding-top: 0rpx;
|
||
}
|
||
|
||
.record-content .list .activeTrack::before {
|
||
background-color: rgba(0, 132, 255, .5);
|
||
top: -4rpx;
|
||
width: 22rpx;
|
||
height: 22rpx;
|
||
left: -12rpx;
|
||
z-index: 1;
|
||
}
|
||
|
||
.record-content .list .activeTrack::after {
|
||
content: '';
|
||
display: block;
|
||
position: absolute;
|
||
top: 0;
|
||
left: -8rpx;
|
||
width: 14rpx;
|
||
height: 14rpx;
|
||
background-color: #999999;
|
||
border-radius: 100%;
|
||
}
|
||
|
||
.record-content .list .activeTrack .line-h60 {
|
||
margin-top: -26rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.record-content .list .date {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.project-materials-title {
|
||
display: flex;
|
||
color: #00a2e9;
|
||
font-size: 24rpx;
|
||
background-color: #FFFFFF;
|
||
border-bottom: 2rpx solid #EDEDED;
|
||
|
||
font-weight: bold;
|
||
padding: 26rpx 20rpx;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.project-materials-title .text {
|
||
width: 16%;
|
||
text-align: center;
|
||
}
|
||
|
||
.project-materials-text {
|
||
display: flex;
|
||
background-color: #FFFFFF;
|
||
border-bottom: 2rpx solid #EDEDED;
|
||
padding: 26rpx 20rpx;
|
||
font-size: 24rpx;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.project-materials-text .text {
|
||
width: 16%;
|
||
text-align: center;
|
||
}
|
||
</style>
|