|
@@ -4,79 +4,113 @@
|
|
|
<div class='update-record-detail'>
|
|
|
<van-nav-bar :title='title' left-arrow @click-left='backPage' />
|
|
|
<div class='info'>
|
|
|
- <i class='iconfont wanda-nuantong2'></i>
|
|
|
- <!-- 维保/维修 -->
|
|
|
- <div v-if='type === 1' class='container-1'>
|
|
|
+ <!-- <i class='iconfont wanda-nuantong2'></i> -->
|
|
|
+ <!-- 维保 -->
|
|
|
+ <div v-if='type === 1 ' class='container-1'>
|
|
|
<div class='date'>
|
|
|
<div class='report-date'>
|
|
|
<span>填报时间</span>
|
|
|
- <span>2020-08-25</span>
|
|
|
+ <span>{{data.tbDate || '--'}}</span>
|
|
|
</div>
|
|
|
<div class='acceptance-date'>
|
|
|
<span>验收日期</span>
|
|
|
- <span>2020-08-29</span>
|
|
|
+ <span>{{data.ysDate || '--'}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class='detail'>此处显示事项描述的具体内容,内容过多时自动折行,直到全部显示完成,卡片无固定高度,根据事项描述内容进行自适应高度</div>
|
|
|
+ <div class='detail'>{{data.matters || '--'}}</div>
|
|
|
<ul class='card'>
|
|
|
- <li class='title'>更换配件</li>
|
|
|
- <li class='name-model'>配件名称型号:VX00223-123</li>
|
|
|
- <li class='cost'>费用出处:重点设备维修保养资金</li>
|
|
|
+ <!-- <li class='title'>更换配件</li> -->
|
|
|
+ <li class='title'>{{data.description || '--'}}</li>
|
|
|
+ <li class='name-model'>配件名称型号:{{data.model||'--'}}</li>
|
|
|
+ <!-- <li class='cost'>费用出处:重点设备维修保养资金</li> -->
|
|
|
+ <li class='cost'>费用出处:{{data.source ||'--'}}</li>
|
|
|
<li class='num-amount'>
|
|
|
- <span>数量: 2个</span>
|
|
|
- <span>金额: 1.5万元</span>
|
|
|
+ <span>数量: {{data.sl || '--'}}个</span>
|
|
|
+ <span>金额: {{data.cost ||'--'}}万元</span>
|
|
|
</li>
|
|
|
</ul>
|
|
|
<div class='bottom'>
|
|
|
- <div class='photo' @click='showPhoto'>现场照片: 3张</div>
|
|
|
- <div class='task-No' @click='showTaskInfo'>任务编号: 230238</div>
|
|
|
+ <div class='photo' @click='showPhoto'>现场照片: {{imgList.length || '--'}}张</div>
|
|
|
+ <div class='task-No' @click='showTaskInfo'>任务编号: {{data.wb_gzglid || '--'}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 维修 -->
|
|
|
+ <div v-else-if='type===4' class='container-1'>
|
|
|
+ <div class='date'>
|
|
|
+ <div class='report-date'>
|
|
|
+ <span>填报时间</span>
|
|
|
+ <span>{{data.tbDate || '--'}}</span>
|
|
|
+ </div>
|
|
|
+ <div class='acceptance-date'>
|
|
|
+ <span>验收日期</span>
|
|
|
+ <span>{{data.ysDate || '--'}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='detail'>{{data.matters || '--'}}</div>
|
|
|
+ <ul class='card'>
|
|
|
+ <!-- <li class='title'>更换配件</li> -->
|
|
|
+ <li class='title'>{{data.description || '--'}}</li>
|
|
|
+ <li class='name-model'>配件名称型号:{{data.model || '--'}}</li>
|
|
|
+ <!-- <li class='cost'>费用出处:重点设备维修保养资金</li> -->
|
|
|
+ <li class='cost'>费用出处:{{data.source || '--'}}</li>
|
|
|
+ <li class='num-amount'>
|
|
|
+ <span>数量: {{data.sl || '--'}}个</span>
|
|
|
+ <span>金额: {{data.cost || '--'}}万元</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class='bottom'>
|
|
|
+ <div class='photo' @click='showPhoto'>现场照片: {{imgList.length || '--'}}张</div>
|
|
|
+ <div class='task-No' @click='showTaskInfo'>工单编号: {{data.wonum || '--'}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 其他事项-->
|
|
|
- <div v-else-if='type === 3' class='container-3'>
|
|
|
+ <div v-else-if='type === 5' class='container-3'>
|
|
|
<div class='deal-date'>
|
|
|
<div class='name'>处理时间:</div>
|
|
|
- <div>2020-08-25</div>
|
|
|
+ <div>{{data.handleDate || '--'}}</div>
|
|
|
</div>
|
|
|
<div class='record'>
|
|
|
<div class='name'>记录事项:</div>
|
|
|
- <div>三明万达广场顶层4座空调冷却塔噪声超标 排放(已整改),三明万达广场顶层4座空调冷 却塔噪声超标排放(已整改),三明万达广场 顶层4座空调冷却塔噪声超标排放(已整改)</div>
|
|
|
+ <div>{{data.jlsx || '--'}}</div>
|
|
|
</div>
|
|
|
<div class='detail-location'>
|
|
|
<div class='name'>详细位置:</div>
|
|
|
- <div>吴忠万达广场(WZ)/商业楼/1楼/娱乐楼/电 梯间/娱乐楼货梯间</div>
|
|
|
+ <div>{{data.description || '--'}}</div>
|
|
|
</div>
|
|
|
<div class='deatil-info'>
|
|
|
<div class='name'>具体内容:</div>
|
|
|
- <div>三明万达广场顶层4座空调冷却塔噪声超标 排放(已整改),三明万达广场顶层4座空调冷 却塔噪声超标排放(已整改),三明万达广场 顶层4座空调冷却塔噪声超标排放(已整改)</div>
|
|
|
+ <div>{{data.content || '--'}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 综合事项 -->
|
|
|
- <div v-else class='container-4'>
|
|
|
+ <div v-else-if='type === 3' class='container-4'>
|
|
|
<div class='date'>
|
|
|
<div class='name'>日期:</div>
|
|
|
- <div>2020-08-25</div>
|
|
|
+ <div>{{data.createDate || '--'}}</div>
|
|
|
</div>
|
|
|
<div class='record'>
|
|
|
<div class='name'>记录事项:</div>
|
|
|
- <div>三明万达广场顶层4座空调冷却塔噪声超标 排放(已整改),三明万达广场顶层4座空调冷 却塔噪声超标排放(已整改),三明万达广场 顶层4座空调冷却塔噪声超标排放(已整改)</div>
|
|
|
+ <div>{{data.recordsx || '--'}}</div>
|
|
|
</div>
|
|
|
<div class='work'>
|
|
|
<div class='name'>工作要求:</div>
|
|
|
- <div>这里是工作要求具体内容</div>
|
|
|
+ <div>{{data.workyq || '--'}}</div>
|
|
|
</div>
|
|
|
<div class='rectification-matters'>
|
|
|
+ <!-- TODO: 整改事项 -->
|
|
|
<div class='name'>整改事项:</div>
|
|
|
- <div>三明万达广场顶层4座空调冷却塔噪声超标 排放(已整改),三明万达广场顶层4座空调冷 却塔噪声超标排放(已整改),三明万达广场 顶层4座空调冷却塔噪声超标排放(已整改)</div>
|
|
|
+ <div>{{data.zgyq || '--'}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!-- TODO: -->
|
|
|
+ <!-- <div>暂无数据</div> -->
|
|
|
</div>
|
|
|
- <!-- 现场找平预览 -->
|
|
|
+ <!-- 现场照片预览 -->
|
|
|
<ImagePreview class='update-img-preview' :visible.sync='showImgPreview' :imgList='imgList' />
|
|
|
|
|
|
<!-- 任务信息 -->
|
|
|
<div class='task-info-container' v-show='showTask'>
|
|
|
- <van-nav-bar title='任务信息' left-arrow @click-left='showTask = false' />
|
|
|
+ <van-nav-bar :title='taskTitle' left-arrow @click-left='showTask = false' />
|
|
|
<ul class='task-info'>
|
|
|
<li>
|
|
|
<span class='name'>工单编号:</span>
|
|
@@ -117,46 +151,158 @@
|
|
|
import Vue from 'vue'
|
|
|
import { NavBar } from 'vant'
|
|
|
Vue.use(NavBar)
|
|
|
-import ImagePreview from '../../components/ImagePreview'
|
|
|
+import ImagePreview from '@/components/ImagePreview'
|
|
|
+import { mapGetters } from 'vuex'
|
|
|
+import { getUpdateDetail1, getUpdateDetail4, getUpdateDetail5, getUpdateDetail3 } from '@/api/overview'
|
|
|
+import moment from 'moment'
|
|
|
export default {
|
|
|
name: 'UpdateRecordDetail',
|
|
|
props: {},
|
|
|
components: { ImagePreview },
|
|
|
data() {
|
|
|
return {
|
|
|
- type: 1,
|
|
|
- title: '重要维保',
|
|
|
- showTask: false,
|
|
|
- showImgPreview: false,
|
|
|
- imgList: [],
|
|
|
+ type: 1, // 1,4,5,3 维保, 维保, 其他事项, 综合事项
|
|
|
+ title: '', //页面title
|
|
|
+ showTask: false, //是否展示工单/任务信息 页面
|
|
|
+ showImgPreview: false, //是否展示图片预览
|
|
|
+ imgList: [], //图片数组
|
|
|
+ data: {}, //页面显示数据
|
|
|
+ taskTitle: '', // 工单,任务信息 页面title
|
|
|
}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['plazaId', 'objtypeDict']),
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getData()
|
|
|
+ },
|
|
|
beforeMount() {},
|
|
|
mounted() {
|
|
|
- console.log(this.$route.params)
|
|
|
+ // console.log(this.$route.params)
|
|
|
},
|
|
|
methods: {
|
|
|
+ /**
|
|
|
+ * 查询页面需要的详情信息
|
|
|
+ */
|
|
|
+ getData() {
|
|
|
+ const { info } = this.$route.params
|
|
|
+ console.log(JSON.stringify(info, null, 2))
|
|
|
+ this.type = info.objtype
|
|
|
+ this.title = this.objtypeDict[info.objtype]
|
|
|
+ switch (info.objtype) {
|
|
|
+ case 1:
|
|
|
+ // 维保
|
|
|
+ this.getUpdateDetail1Func(info)
|
|
|
+ break
|
|
|
+ case 4:
|
|
|
+ // 维保
|
|
|
+ this.getUpdateDetail4Func(info)
|
|
|
+ break
|
|
|
+ case 5:
|
|
|
+ // 其他事项
|
|
|
+ this.getUpdateDetail5Func(info)
|
|
|
+ break
|
|
|
+ case 3:
|
|
|
+ // 综合事项
|
|
|
+ this.getUpdateDetail3Func(info)
|
|
|
+ break
|
|
|
+ default:
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 维保
|
|
|
+ */
|
|
|
+ async getUpdateDetail1Func(info) {
|
|
|
+ let getParams = {
|
|
|
+ id: info.objid,
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ onlyMainAsset: false,
|
|
|
+ }
|
|
|
+ let res = await getUpdateDetail1({ getParams })
|
|
|
+ console.log(res)
|
|
|
+ let data = res?.data[0] || {}
|
|
|
+ data.reportdate && (data.tbDate = moment(data.reportdate).format('YYYY-MM-DD'))
|
|
|
+ data.sjjssj && (data.ysDate = moment(data.sjjssj).format('YYYY-MM-DD'))
|
|
|
+ this.data = data
|
|
|
+ // 图片处理
|
|
|
+ this.imgList = []
|
|
|
+ if (data?.glsmsImage?.length) {
|
|
|
+ data.glsmsImage.map((item) => {
|
|
|
+ this.imgList.push(item.url)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 维修
|
|
|
+ */
|
|
|
+ async getUpdateDetail4Func(info) {
|
|
|
+ let getParams = {
|
|
|
+ wonum: info.objid,
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ }
|
|
|
+ let res = await getUpdateDetail4({ getParams })
|
|
|
+ console.log(res)
|
|
|
+ let data = res?.data[0] || {}
|
|
|
+ data.reportdate && (data.tbDate = moment(data.reportdate).format('YYYY-MM-DD'))
|
|
|
+ data.sjjssj && (data.ysDate = moment(data.sjjssj).format('YYYY-MM-DD'))
|
|
|
+ this.data = data
|
|
|
+ // 图片处理
|
|
|
+ this.imgList = []
|
|
|
+ if (data?.glsmsImage?.length) {
|
|
|
+ data.glsmsImage.map((item) => {
|
|
|
+ this.imgList.push(item.url)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 其他事项
|
|
|
+ */
|
|
|
+ async getUpdateDetail5Func(info) {
|
|
|
+ let getParams = {
|
|
|
+ id: info.objid,
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ }
|
|
|
+ let res = await getUpdateDetail5({ getParams })
|
|
|
+ let data = res?.data[0] || {}
|
|
|
+ data.handledate && (data.handleDate = moment(data.handledate).format('YYYY-MM-DD'))
|
|
|
+ this.data = data
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 综合事项
|
|
|
+ */
|
|
|
+ async getUpdateDetail3Func(info) {
|
|
|
+ let getParams = {
|
|
|
+ id: info.objid,
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ }
|
|
|
+ let res = await getUpdateDetail3({ getParams })
|
|
|
+ console.log(res)
|
|
|
+ let data = res?.data[0] || {}
|
|
|
+ data.createdate && (data.createDate = moment(data.createdate).format('YYYY-MM-DD'))
|
|
|
+ this.data = data
|
|
|
+ },
|
|
|
// 返回上一个页面(项目概况)
|
|
|
backPage() {
|
|
|
this.$router.go(-1)
|
|
|
},
|
|
|
// 点击任务编号,显示任务信息
|
|
|
- showTaskInfo(data) {
|
|
|
- this.showTask = true
|
|
|
+ showTaskInfo() {
|
|
|
+ // 维保有任务编号,或者维修有工单编号,显示
|
|
|
+ if (this.type === 1) {
|
|
|
+ this.taskTitle = '任务信息'
|
|
|
+ } else if (this.type === 4) {
|
|
|
+ this.taskTitle = '工单信息'
|
|
|
+ }
|
|
|
+ if (this.data.wb_gzglid || this.data.wonum) {
|
|
|
+ this.showTask = true
|
|
|
+ }
|
|
|
},
|
|
|
// 显示图片预览弹窗
|
|
|
showPhoto() {
|
|
|
- this.imgList = [
|
|
|
- 'https://img.yzcdn.cn/vant/apple-1.jpg',
|
|
|
- 'https://img.yzcdn.cn/vant/apple-2.jpg',
|
|
|
- 'https://img.yzcdn.cn/vant/apple-1.jpg',
|
|
|
- 'https://img.yzcdn.cn/vant/apple-2.jpg',
|
|
|
- 'https://img.yzcdn.cn/vant/apple-1.jpg',
|
|
|
- 'https://img.yzcdn.cn/vant/apple-2.jpg',
|
|
|
- 'https://img.yzcdn.cn/vant/apple-1.jpg',
|
|
|
- 'https://img.yzcdn.cn/vant/apple-2.jpg',
|
|
|
- ].slice(0, parseInt(Math.random() * 8 + 1))
|
|
|
- this.showImgPreview = true
|
|
|
+ if (this.imgList?.length) {
|
|
|
+ this.showImgPreview = true
|
|
|
+ }
|
|
|
},
|
|
|
},
|
|
|
}
|
|
@@ -201,8 +347,8 @@ export default {
|
|
|
width: 100%;
|
|
|
height: auto;
|
|
|
margin: 10px 0;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
color: #333333;
|
|
|
line-height: 20px;
|
|
|
}
|