|
@@ -0,0 +1,330 @@
|
|
|
+
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class='update-record-detail'>
|
|
|
+ <van-nav-bar title='重要维保 ...' left-arrow @click-left='backPage' />
|
|
|
+ <div class='info'>
|
|
|
+ <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>
|
|
|
+ </div>
|
|
|
+ <div class='acceptance-date'>
|
|
|
+ <span>验收日期</span>
|
|
|
+ <span>2020-08-29</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class='detail'>此处显示事项描述的具体内容,内容过多时自动折行,直到全部显示完成,卡片无固定高度,根据事项描述内容进行自适应高度</div>
|
|
|
+ <ul class='card'>
|
|
|
+ <li class='title'>更换配件</li>
|
|
|
+ <li class='name-model'>配件名称型号:VX00223-123</li>
|
|
|
+ <li class='cost'>费用出处:重点设备维修保养资金</li>
|
|
|
+ <li class='num-amount'>
|
|
|
+ <span>数量: 2个</span>
|
|
|
+ <span>金额: 1.5万元</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class='bottom'>
|
|
|
+ <div class='photo' @click='showPhoto'>现场照片: 3张</div>
|
|
|
+ <div class='task-No' @click='showTaskInfo'>任务编号: 230238</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 其他事项-->
|
|
|
+ <div v-else-if='type === 3' class='container-3'>
|
|
|
+ <div class='deal-date'>
|
|
|
+ <div class='name'>处理时间:</div>
|
|
|
+ <div>2020-08-25</div>
|
|
|
+ </div>
|
|
|
+ <div class='record'>
|
|
|
+ <div class='name'>记录事项:</div>
|
|
|
+ <div>三明万达广场顶层4座空调冷却塔噪声超标 排放(已整改),三明万达广场顶层4座空调冷 却塔噪声超标排放(已整改),三明万达广场 顶层4座空调冷却塔噪声超标排放(已整改)</div>
|
|
|
+ </div>
|
|
|
+ <div class='detail-location'>
|
|
|
+ <div class='name'>详细位置:</div>
|
|
|
+ <div>吴忠万达广场(WZ)/商业楼/1楼/娱乐楼/电 梯间/娱乐楼货梯间</div>
|
|
|
+ </div>
|
|
|
+ <div class='deatil-info'>
|
|
|
+ <div class='name'>具体内容:</div>
|
|
|
+ <div>三明万达广场顶层4座空调冷却塔噪声超标 排放(已整改),三明万达广场顶层4座空调冷 却塔噪声超标排放(已整改),三明万达广场 顶层4座空调冷却塔噪声超标排放(已整改)</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 综合事项 -->
|
|
|
+ <div v-else class='container-4'>
|
|
|
+ <div class='date'>
|
|
|
+ <div class='name'>日期:</div>
|
|
|
+ <div>2020-08-25</div>
|
|
|
+ </div>
|
|
|
+ <div class='record'>
|
|
|
+ <div class='name'>记录事项:</div>
|
|
|
+ <div>三明万达广场顶层4座空调冷却塔噪声超标 排放(已整改),三明万达广场顶层4座空调冷 却塔噪声超标排放(已整改),三明万达广场 顶层4座空调冷却塔噪声超标排放(已整改)</div>
|
|
|
+ </div>
|
|
|
+ <div class='work'>
|
|
|
+ <div class='name'>工作要求:</div>
|
|
|
+ <div>这里是工作要求具体内容</div>
|
|
|
+ </div>
|
|
|
+ <div class='rectification-matters'>
|
|
|
+ <div class='name'>整改事项:</div>
|
|
|
+ <div>三明万达广场顶层4座空调冷却塔噪声超标 排放(已整改),三明万达广场顶层4座空调冷 却塔噪声超标排放(已整改),三明万达广场 顶层4座空调冷却塔噪声超标排放(已整改)</div>
|
|
|
+ </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' />
|
|
|
+ <ul class='task-info'>
|
|
|
+ <li>
|
|
|
+ <span class='name'>工单编号:</span>
|
|
|
+ <span class='data'>2890531</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class='name'>工单状态:</span>
|
|
|
+ <span class='data'>新建</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class='name'>工单描述:</span>
|
|
|
+ <span class='data'>这是一条工单任务描述</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class='name'>填报人:</span>
|
|
|
+ <span class='data'>新建</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class='name'>联系电话:</span>
|
|
|
+ <span class='data'>18820293022</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class='name'>填报时间:</span>
|
|
|
+ <span class='data'>2020-09-21</span>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class='name'>验收时间:</span>
|
|
|
+ <span class='data'>2020-09-21</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+/**
|
|
|
+ * 说明书更新记录详情页面
|
|
|
+ */
|
|
|
+import Vue from 'vue'
|
|
|
+import { NavBar } from 'vant'
|
|
|
+Vue.use(NavBar)
|
|
|
+import ImagePreview from '../../components/ImagePreview'
|
|
|
+export default {
|
|
|
+ name: 'UpdateRecordDetail',
|
|
|
+ props: {},
|
|
|
+ components: { ImagePreview },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ type: 1,
|
|
|
+ showTask: false,
|
|
|
+ showImgPreview: false,
|
|
|
+ imgList: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeMount() {},
|
|
|
+ mounted() {
|
|
|
+ console.log(this.$route.params)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 返回上一个页面(项目概况)
|
|
|
+ backPage() {
|
|
|
+ this.$router.go(-1)
|
|
|
+ },
|
|
|
+ // 点击任务编号,显示任务信息
|
|
|
+ showTaskInfo(data) {
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang='less' scoped>
|
|
|
+.update-record-detail {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #f5f6f7;
|
|
|
+ // background-color: lightblue;
|
|
|
+ // 下拉菜单
|
|
|
+ /deep/.van-dropdown-menu__item {
|
|
|
+ justify-content: flex-start !important;
|
|
|
+ padding-left: 8px;
|
|
|
+ }
|
|
|
+ // 主体内容
|
|
|
+ .info {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 50px);
|
|
|
+ // padding: 15px;
|
|
|
+ overflow: auto;
|
|
|
+ .container-1,
|
|
|
+ .container-3,
|
|
|
+ .container-4 {
|
|
|
+ padding: 15px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ // 维修/维保
|
|
|
+ .container-1 {
|
|
|
+ .date {
|
|
|
+ width: 100%;
|
|
|
+ height: 17px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 5px 0 10px 0;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 17px;
|
|
|
+ }
|
|
|
+ .detail {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ margin: 10px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .card {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ padding: 8px 16px;
|
|
|
+ background: #eff0f1;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 14px;
|
|
|
+ .title {
|
|
|
+ height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .name-model,
|
|
|
+ .cost,
|
|
|
+ .num-amount {
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ .num-amount {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ width: 100%;
|
|
|
+ height: 17px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 5px 0 10px 0;
|
|
|
+ color: #025baa;
|
|
|
+ line-height: 17px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #025baa;
|
|
|
+ margin-top: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .container-3 {
|
|
|
+ .deal-date,
|
|
|
+ .record,
|
|
|
+ .detail-location,
|
|
|
+ .deatil-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ div {
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ width: 70px;
|
|
|
+ }
|
|
|
+ .name + div {
|
|
|
+ flex: 1;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 综合事项
|
|
|
+ .container-4 {
|
|
|
+ .date,
|
|
|
+ .record,
|
|
|
+ .work,
|
|
|
+ .rectification-matters {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 20px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ div {
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ width: 70px;
|
|
|
+ }
|
|
|
+ .name + div {
|
|
|
+ flex: 1;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 全屏的任务信息
|
|
|
+ .task-info-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ background-color: #fff;
|
|
|
+ .task-info {
|
|
|
+ width: 100%;
|
|
|
+ padding: 15px;
|
|
|
+ li {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 12px;
|
|
|
+ .name {
|
|
|
+ color: #666666;
|
|
|
+ width: 70px;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .data {
|
|
|
+ flex: 1;
|
|
|
+ height: auto;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|