|
@@ -6,7 +6,8 @@
|
|
|
<div class='my-swipe'>
|
|
|
<van-swipe :autoplay='0' indicator-color='white'>
|
|
|
<van-swipe-item v-for='(image, index) in imgList' :key='index'>
|
|
|
- <van-image fit='contain' :src='image' />
|
|
|
+ <span class='type-name'>{{ image.typename }}</span>
|
|
|
+ <van-image fit='contain' :src='image.url' />
|
|
|
</van-swipe-item>
|
|
|
</van-swipe>
|
|
|
</div>
|
|
@@ -15,11 +16,15 @@
|
|
|
<!-- 建筑综合信息 -->
|
|
|
<van-tab class='buiding-tab' title='建筑综合信息'>
|
|
|
<div class='building-info'>
|
|
|
- <div class='cell'>
|
|
|
+ <!-- <div class='cell'>
|
|
|
<span class='left'>项目名称:</span>
|
|
|
- <span class='right'>三明万达广场</span>
|
|
|
+ <span class='right'>{{plazaName}}</span>
|
|
|
+ </div>-->
|
|
|
+ <div class='cell' v-for='(item, index) in build' :key='index'>
|
|
|
+ <span class='left'>{{ item.project }}:</span>
|
|
|
+ <span class='right'>{{ item.basic }}</span>
|
|
|
</div>
|
|
|
- <div class='cell'>
|
|
|
+ <!-- <div class='cell'>
|
|
|
<span class='left'>项目地址:</span>
|
|
|
<span class='right'>福建省三明市梅列区东乾二路1号15幢三明万达广场4楼办公室</span>
|
|
|
</div>
|
|
@@ -51,40 +56,60 @@
|
|
|
<div class='cell'>
|
|
|
<span class='left'>移交时间:</span>
|
|
|
<span class='right'>6.45㎡,其中地上5.82万㎡、地下0.63万㎡</span>
|
|
|
- </div>
|
|
|
+ </div>-->
|
|
|
</div>
|
|
|
</van-tab>
|
|
|
<!-- 施工单位信息 -->
|
|
|
<van-tab title='施工单位信息' class='sgdw-info'>
|
|
|
<van-tabs type='card' color='#E5EEF6' title-active-color='#025baa' title-inactive-color='#666666'>
|
|
|
<van-tab title='总包'>
|
|
|
- <ul class='zb'>
|
|
|
+ <ul class='zb' v-if='showTotalContractInfo'>
|
|
|
<li class='title'>
|
|
|
- <i>icon</i>中国建筑第二工程局有限公司
|
|
|
+ <!-- <i>icon</i>中国建筑第二工程局有限公司 -->
|
|
|
+ <i class='iconfont wanda-gongsiqiye'></i>
|
|
|
+ {{ totalContractInfo.unit }}
|
|
|
</li>
|
|
|
<li class='system'>
|
|
|
- <span class='card'>消防电</span>
|
|
|
- <span class='card'>土建</span>
|
|
|
- <span class='card'>弱电</span>
|
|
|
- <span class='card'>机电</span>
|
|
|
- <span class='card'>给排水</span>
|
|
|
<!-- <span class='card'>消防电</span>
|
|
|
<span class='card'>土建</span>
|
|
|
<span class='card'>弱电</span>
|
|
|
<span class='card'>机电</span>
|
|
|
<span class='card'>给排水</span>-->
|
|
|
+ <span class='card' v-for='(item, index) in totalContractInfo.professional' :key='index'>{{ item }}</span>
|
|
|
</li>
|
|
|
<li class='name'>
|
|
|
- <i>icon</i>张三
|
|
|
+ <i class='iconfont wanda-renwu-ren'></i>
|
|
|
+ {{ totalContractInfo.name }}
|
|
|
</li>
|
|
|
<li class='phone'>
|
|
|
- <i>icon</i>19220010211
|
|
|
+ <i class='iconfont wanda-dianhua'></i>
|
|
|
+ {{ totalContractInfo.phone }}
|
|
|
</li>
|
|
|
</ul>
|
|
|
+ <ul class='zb' v-else>
|
|
|
+ <!-- TODO: 暂无数据 -->
|
|
|
+ <van-empty description='暂无数据' />
|
|
|
+ </ul>
|
|
|
</van-tab>
|
|
|
<van-tab title='分包'>
|
|
|
- <ul class='fb'>
|
|
|
- <li class='fb-card' v-for='i in 5' :key='i'>
|
|
|
+ <ul class='fb' v-if='subcontractInfo.length'>
|
|
|
+ <li class='fb-card' v-for='(item, index) in subcontractInfo' :key='index'>
|
|
|
+ <div class='card-left'>{{ item[0].professional }}</div>
|
|
|
+ <div class='card-right'>
|
|
|
+ <div class='info' v-for='(detail, dIndex) in item' :key='dIndex'>
|
|
|
+ <p class='company'>{{ detail.unit }}</p>
|
|
|
+ <p class='name-phone'>
|
|
|
+ <span>{{ detail.name || '--' }}</span>
|
|
|
+ <span>{{ detail.phone || '--' }}</span>
|
|
|
+ </p>
|
|
|
+ <!-- <p class='name-phone'>
|
|
|
+ <span>张伟</span>
|
|
|
+ <span>0411-86666924</span>
|
|
|
+ </p>-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </li>
|
|
|
+ <!-- <li class='fb-card' v-for='i in 5' :key='i'>
|
|
|
<div class='card-left'>消防水</div>
|
|
|
<div class='card-right'>
|
|
|
<div class='info'>
|
|
@@ -122,7 +147,11 @@
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </li>
|
|
|
+ </li>-->
|
|
|
+ </ul>
|
|
|
+ <ul class='fb' v-else>
|
|
|
+ <!-- TODO: 暂无数据 -->
|
|
|
+ <van-empty description='暂无数据' />
|
|
|
</ul>
|
|
|
</van-tab>
|
|
|
</van-tabs>
|
|
@@ -131,28 +160,34 @@
|
|
|
<div class='bottom'>
|
|
|
<!-- <span v-if='false'>近一个月,重要维保8条,重要维修3条,其他事项5条,综合事项10条</span> -->
|
|
|
<van-notice-bar
|
|
|
- v-if='true'
|
|
|
+ v-if='showNoticeBar'
|
|
|
class='bottom-notice'
|
|
|
background='#e5eef6'
|
|
|
color='#025baa'
|
|
|
speed='50'
|
|
|
scrollable
|
|
|
- text='近一个月,重要维保8条,重要维修3条,其他事项5条,综合事项10条'
|
|
|
+ :text='noticeBarText'
|
|
|
/>
|
|
|
<span v-else>近一个月,说明书无更新</span>
|
|
|
- <van-icon v-show='true' class='building-arrow' name='arrow' size='14px' @click='goToUpdateRecord' />
|
|
|
+ <van-icon v-show='showNoticeBar' class='building-arrow' name='arrow' size='14px' @click='goToUpdateRecord' />
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import Vue from 'vue'
|
|
|
-import { Button, Icon, Swipe, SwipeItem, Lazyload, Image as VanImage, Tab, Tabs } from 'vant'
|
|
|
+// vant 按需引入
|
|
|
+import { Button, Icon, Swipe, SwipeItem, Lazyload, Image as VanImage, Tab, Tabs, Empty, NoticeBar } from 'vant'
|
|
|
Vue.use(Button).use(Icon).use(Swipe).use(SwipeItem).use(Lazyload).use(VanImage)
|
|
|
Vue.use(Tab).use(Tabs)
|
|
|
-import { NoticeBar } from 'vant'
|
|
|
Vue.use(NoticeBar)
|
|
|
+Vue.use(Empty)
|
|
|
+// lodash
|
|
|
+import { isEmpty } from 'lodash'
|
|
|
+// moment
|
|
|
+import moment from 'moment'
|
|
|
import ImagePreview1 from '@/components/ImagePreview'
|
|
|
-// import ConstructionUnitInfo from './ConstructionUnitInfo'
|
|
|
+// 接口
|
|
|
+import { queryFact, queryRecordCount } from '@/api/overview'
|
|
|
export default {
|
|
|
name: 'Overview',
|
|
|
props: {},
|
|
@@ -161,7 +196,21 @@ export default {
|
|
|
return {
|
|
|
showImgPreview: true,
|
|
|
imgList: ['https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg'],
|
|
|
- active: 0,
|
|
|
+ active: 0, // 激活的tab页 0:建筑综合信息 1:施工单位信息
|
|
|
+ plazaId: '1000423', //广场ID
|
|
|
+ plazaName: '', //广场名称
|
|
|
+ build: [], //建筑综合信息
|
|
|
+ totalContractInfo: {}, //总包信息
|
|
|
+ showTotalContractInfo: true, //是否显示总包信息
|
|
|
+ subcontractInfo: [], //分包信息
|
|
|
+ showNoticeBar: true, //底部noticeBar 显隐
|
|
|
+ noticeBarText: '', //底部noticeBar 文本
|
|
|
+ objtypeDict: {
|
|
|
+ 1: '重要维保',
|
|
|
+ 3: '综合事项',
|
|
|
+ 4: '重要维修',
|
|
|
+ 5: '其他事项',
|
|
|
+ },
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
@@ -170,6 +219,11 @@ export default {
|
|
|
console.log(val)
|
|
|
},
|
|
|
},
|
|
|
+ created() {
|
|
|
+ this.queryBaseInfo()
|
|
|
+ this.queryRecordCountFunc()
|
|
|
+ },
|
|
|
+
|
|
|
beforeMount() {},
|
|
|
mounted() {
|
|
|
console.log('项目概况页面mounted')
|
|
@@ -179,18 +233,111 @@ export default {
|
|
|
this.openPreview()
|
|
|
},
|
|
|
methods: {
|
|
|
+ /**
|
|
|
+ * 查询广场概况
|
|
|
+ */
|
|
|
+ async queryBaseInfo() {
|
|
|
+ let getParams = {
|
|
|
+ plazaId: this.plazaId,
|
|
|
+ }
|
|
|
+ let data = await queryFact({ getParams })
|
|
|
+ console.log(data)
|
|
|
+ // 顶部轮播图
|
|
|
+ this.imgList = data.pic2.concat(data.pic1)
|
|
|
+ this.plazaName = data.plazaName
|
|
|
+ // 建筑综合信息
|
|
|
+ this.build = data.build
|
|
|
+ //总包信息
|
|
|
+ let totalContractInfoArr = data.constructions.filter((v) => v.type === '总包')
|
|
|
+ if (totalContractInfoArr) {
|
|
|
+ this.showTotalContractInfo = true
|
|
|
+ } else {
|
|
|
+ this.showTotalContractInfo = false
|
|
|
+ }
|
|
|
+ let totalContractInfo = {
|
|
|
+ unit: totalContractInfoArr[0]?.unit || '--',
|
|
|
+ name: totalContractInfoArr[0]?.name || '--',
|
|
|
+ phone: totalContractInfoArr[0]?.phone || '--',
|
|
|
+ professional: [],
|
|
|
+ }
|
|
|
+ totalContractInfoArr.map((item) => {
|
|
|
+ item.professional && totalContractInfo.professional.push(item.professional)
|
|
|
+ })
|
|
|
+ this.totalContractInfo = totalContractInfo
|
|
|
+ //分包信息,组合页面需要展示的分包信息
|
|
|
+ let subcontractInfoArr = data.constructions.filter((v) => v.type === '分包')
|
|
|
+ subcontractInfoArr.sort((a, b) => b.professional.localeCompare(a.professional, 'zh'))
|
|
|
+ let subcontractInfo = []
|
|
|
+ /**
|
|
|
+ * 构造二维数组
|
|
|
+ */
|
|
|
+ subcontractInfo[0] = [subcontractInfoArr[0]]
|
|
|
+ let __index = 0
|
|
|
+ subcontractInfoArr.map((item, index) => {
|
|
|
+ if (index >= 1) {
|
|
|
+ if (item.professional === subcontractInfo[__index][0].professional) {
|
|
|
+ subcontractInfo[__index].push(item)
|
|
|
+ } else {
|
|
|
+ __index++
|
|
|
+ subcontractInfo[__index] = [item]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.subcontractInfo = subcontractInfo
|
|
|
+ console.log(subcontractInfo)
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 查询近三十天说明书更新记录
|
|
|
+ *
|
|
|
+ */
|
|
|
+ async queryRecordCountFunc() {
|
|
|
+ let getParams = {
|
|
|
+ plazaId: this.plazaId, //广场id 必填
|
|
|
+ changeDateStartDate: moment().subtract(1, 'months').format('YYYYMMDD000000'), //变更记录开始时间 格式yyyyMMddHHmiss 必填
|
|
|
+ changeDateEndDate: moment().format('YYYYMMDD000000'), //变更记录结束时间 格式yyyyMMddHHmiss 必填
|
|
|
+ }
|
|
|
+ let data = await queryRecordCount({ getParams })
|
|
|
+ console.log(data)
|
|
|
+ if (!data || data.result !== 'success') {
|
|
|
+ this.showNoticeBar = false //底部noticeBar 显隐
|
|
|
+ this.noticeBarText = ''
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ data = data.data
|
|
|
+ data.sort((a, b) => a.objtype - b.objtype)
|
|
|
+ this.showNoticeBar = true
|
|
|
+ this.noticeBarText = ''
|
|
|
+
|
|
|
+ /*
|
|
|
+ // 测试数据
|
|
|
+ data = [
|
|
|
+ {
|
|
|
+ cnt: 6,
|
|
|
+ objtype: 4, //变更内容类型(1:重要维保 3:综合事项 4:重要维修 5:其他事项)
|
|
|
+ },
|
|
|
+ { cnt: 10, objtype: 1 },
|
|
|
+ { cnt: 45, objtype: 3 },
|
|
|
+ { cnt: 4, objtype: 5 },
|
|
|
+ ] */
|
|
|
+ // 文本处理
|
|
|
+ let noticeBarText = '近一个月,'
|
|
|
+ data.map((item) => {
|
|
|
+ noticeBarText += `${this.objtypeDict[item.objtype]} ${item.cnt} 条,`
|
|
|
+ })
|
|
|
+ this.noticeBarText = noticeBarText.slice(0, noticeBarText.length - 1)
|
|
|
+ },
|
|
|
openPreview() {
|
|
|
this.showImgPreview = true
|
|
|
- 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.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))
|
|
|
},
|
|
|
/**
|
|
|
* 跳转说明书更新记录
|
|
@@ -201,7 +348,7 @@ export default {
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
-<style lang='less' scoped>
|
|
|
+<style lang="less" scoped>
|
|
|
.overview {
|
|
|
width: 100%;
|
|
|
height: calc(100% - 150px);
|
|
@@ -218,6 +365,19 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
.van-swipe-item {
|
|
|
+ position: relative;
|
|
|
+ .type-name {
|
|
|
+ display: inline-block;
|
|
|
+ width: 100px;
|
|
|
+ padding: 10px 0 10px 20px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10;
|
|
|
+ left: 0;
|
|
|
+ background: linear-gradient(270deg, rgba(4, 22, 39, 0) 0%, #020d18 100%);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
.van-image {
|
|
|
height: 100%;
|
|
|
}
|
|
@@ -290,13 +450,13 @@ export default {
|
|
|
height: 25px;
|
|
|
line-height: 25px;
|
|
|
margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
}
|
|
|
i {
|
|
|
display: inline-block;
|
|
|
overflow: hidden;
|
|
|
- width: 15px;
|
|
|
- height: 15px;
|
|
|
- margin-right: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
|
|
|
.title {
|
|
@@ -369,9 +529,10 @@ export default {
|
|
|
padding-right: 10px;
|
|
|
}
|
|
|
& > :nth-child(2) {
|
|
|
- width: auto;
|
|
|
+ width: 100px;
|
|
|
+ text-align: right;
|
|
|
height: auto;
|
|
|
- display: flex;
|
|
|
+ display: inline-block;
|
|
|
align-items: center;
|
|
|
}
|
|
|
}
|
|
@@ -422,4 +583,4 @@ export default {
|
|
|
color: lightgreen;
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|