Lvtianfang
parent
71aeb10cbc
commit
09a187c084
@ -1,310 +0,0 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-06-03 10:58:48
|
||||
* @LastEditTime: 2021-09-08 14:44:41
|
||||
* @LastEditors: 付刚
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: \MuduAPP\src\views\Leader\enterpriseInfo\gardenDataPage.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="main-page">
|
||||
<!-- 头 -->
|
||||
<van-nav-bar
|
||||
title="木渎金桥工业园"
|
||||
left-text
|
||||
left-arrow
|
||||
fixed
|
||||
:style="{ paddingTop: config.barHeight + 'px' }"
|
||||
@click-left="onBack()"
|
||||
/>
|
||||
<!-- 主体 -->
|
||||
<div
|
||||
class="conter"
|
||||
:style="{
|
||||
marginTop: 'calc(0.733rem + ' + config.barHeight + 'px)',
|
||||
}"
|
||||
>
|
||||
<van-tabs type="card" v-model="active">
|
||||
<van-tab title="工业区详情">
|
||||
<ul>
|
||||
<li>
|
||||
<div>工业园名称</div>
|
||||
<div>{{ parkList.name }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>归属地</div>
|
||||
<div>{{ parkList.locationName }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>园区负责人</div>
|
||||
<div>{{ parkList.personInCharge }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>负责人电话</div>
|
||||
<div>{{ parkList.personInChargePhone }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>园区地址</div>
|
||||
<div>{{ parkList.address }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>建成时间</div>
|
||||
<div>{{ parkList.buildDateTime }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>占地面积</div>
|
||||
<div>{{ parkList.floorSpace }}平方米</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>厂房总面积</div>
|
||||
<div>{{ parkList.factorySpace }}平方米</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>出租面积</div>
|
||||
<div>{{ parkList.rentSpace }}平方米</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>自用面积</div>
|
||||
<div>{{ parkList.selfUseSpace }}平方米</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>楼幢数量</div>
|
||||
<div>{{ parkList.buildCount }}幢</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>园区总人数</div>
|
||||
<div>{{ parkList.personCountSum }}人</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>入驻企业数量</div>
|
||||
<div>{{ parkList.enterpriseCountSum }}家</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>工业园性质</div>
|
||||
<div>{{ parkList.typeName }}</div>
|
||||
</li>
|
||||
<li>
|
||||
<div>运营状态</div>
|
||||
<div>{{ parkList.status | filterParkState }}</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 面积图 -->
|
||||
<div class="map-data">
|
||||
<div class="map-titel">工业园平面图:</div>
|
||||
<div class="map-poto">
|
||||
<div class="poto">
|
||||
<img :src="showImages[0]" alt="" @click="onShowImage()" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-info">
|
||||
<div class="map-titel">信息介绍:</div>
|
||||
<div class="info-text">
|
||||
{{ parkList.description }}
|
||||
</div>
|
||||
</div>
|
||||
</van-tab>
|
||||
<!-- 入驻企业 -->
|
||||
<van-tab title="入驻企业">
|
||||
<van-cell
|
||||
is-link
|
||||
v-for="item in enterprise"
|
||||
:key="item.certificateCode"
|
||||
@click="onInfoClcik(item)"
|
||||
>{{ item.name }}</van-cell
|
||||
>
|
||||
</van-tab>
|
||||
</van-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ImagePreview } from 'vant'
|
||||
import xApi from '../../../api/xApi'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: null,
|
||||
parkList: {},
|
||||
parkImage: '',
|
||||
enterprise: [],
|
||||
showImages: [],
|
||||
}
|
||||
},
|
||||
filters: {
|
||||
//判断状态码
|
||||
filterParkState(target) {
|
||||
if (target == 1) {
|
||||
return '运营中'
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
fiterImage() {
|
||||
//解决照片地址为空时候的404
|
||||
if (this.parkImage) {
|
||||
return process.env.VUE_APP_FILE_HOST + this.parkImage
|
||||
} else {
|
||||
return 'https://img01.yzcdn.cn/vant/cat.jpeg'
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
//根据id获取工业区详情
|
||||
getIdInfo(id) {
|
||||
xApi.getIdParkinfo(id).then((res) => {
|
||||
this.parkList = res.data
|
||||
// console.log(this.parkList)
|
||||
this.getShowIamges(this.parkList.attRelationMapID)
|
||||
})
|
||||
},
|
||||
getShowIamges(images) {
|
||||
//平面图
|
||||
if (images == null) {
|
||||
this.showImages = 'https://img01.yzcdn.cn/vant/cat.jpeg'
|
||||
return
|
||||
}
|
||||
xApi.getimages(images).then((res) => {
|
||||
// console.log(res, 'ss')
|
||||
res.data.forEach((item) => {
|
||||
this.showImages.push(process.env.VUE_APP_FILE_HOST + item.src)
|
||||
})
|
||||
// console.log(this.showImages)
|
||||
})
|
||||
},
|
||||
onShowImage() {
|
||||
//点击平面图预览照片
|
||||
ImagePreview({
|
||||
images: this.showImages,
|
||||
closeable: true, //显示关闭按钮
|
||||
})
|
||||
},
|
||||
|
||||
//根据id获取企业列表
|
||||
getEnterpriseList(data) {
|
||||
xApi.enterpriselist(data).then((res) => {
|
||||
this.enterprise = res.data
|
||||
// console.log('企业', this.enterprise)
|
||||
})
|
||||
},
|
||||
onBack() {
|
||||
let HISTORY_ACTIVE = JSON.parse(localStorage.getItem('HISTORY_ACTIVE'))
|
||||
if (HISTORY_ACTIVE) {
|
||||
localStorage.removeItem('HISTORY_ACTIVE')
|
||||
let HISTORY_ACTIVE = [0]
|
||||
localStorage.setItem('HISTORY_ACTIVE', JSON.stringify(HISTORY_ACTIVE))
|
||||
this.$router.back()
|
||||
}
|
||||
if (!HISTORY_ACTIVE) {
|
||||
let HISTORY_ACTIVE = [0]
|
||||
localStorage.setItem('HISTORY_ACTIVE', JSON.stringify(HISTORY_ACTIVE))
|
||||
this.$router.back()
|
||||
}
|
||||
},
|
||||
onInfoClcik(item) {
|
||||
//本地存储
|
||||
let HISTORY_ACTIVE = JSON.parse(localStorage.getItem('HISTORY_ACTIVE'))
|
||||
if (HISTORY_ACTIVE) {
|
||||
localStorage.removeItem('HISTORY_ACTIVE')
|
||||
let HISTORY_ACTIVE = [0]
|
||||
localStorage.setItem('HISTORY_ACTIVE', JSON.stringify(HISTORY_ACTIVE))
|
||||
}
|
||||
if (!HISTORY_ACTIVE) {
|
||||
let HISTORY_ACTIVE = [0]
|
||||
localStorage.setItem('HISTORY_ACTIVE', JSON.stringify(HISTORY_ACTIVE))
|
||||
}
|
||||
this.$router.push({ path: `/leader/company/${item.id}/0` })
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
let id = this.$route.params.id
|
||||
this.getEnterpriseList(id)
|
||||
this.getIdInfo(id)
|
||||
let active = JSON.parse(localStorage.getItem('HISTORY_ACTIVE') || [])
|
||||
this.active = active[0]
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
ul li {
|
||||
height: 0.417rem;
|
||||
display: flex;
|
||||
}
|
||||
ul li:nth-child(1) {
|
||||
padding-top: 0.308rem;
|
||||
}
|
||||
ul li:nth-child(n + 2) {
|
||||
padding-top: 0.1rem;
|
||||
}
|
||||
ul li div:nth-child(1) {
|
||||
width: 1.392rem;
|
||||
height: 0.417rem;
|
||||
line-height: 0.417rem;
|
||||
color: #999999;
|
||||
font-size: 0.217rem;
|
||||
|
||||
font-weight: 400;
|
||||
margin-left: 0.167rem;
|
||||
text-align: left;
|
||||
/* border: 1px solid; */
|
||||
}
|
||||
ul li div:nth-child(2) {
|
||||
width: 4.233rem;
|
||||
background: #f6f6f6;
|
||||
border-radius: 0rem;
|
||||
height: 0.417rem;
|
||||
margin-left: 0.367rem;
|
||||
line-height: 0.417rem;
|
||||
text-align: left;
|
||||
padding-left: 0.1rem;
|
||||
font-size: 0.217rem;
|
||||
|
||||
color: #333333;
|
||||
margin-right: 0.182rem;
|
||||
}
|
||||
.map-data {
|
||||
/* border: 1px solid; */
|
||||
}
|
||||
.map-titel {
|
||||
height: 0.208rem;
|
||||
line-height: 0.208rem;
|
||||
font-size: 0.217rem;
|
||||
|
||||
font-weight: bold;
|
||||
color: #2487ff;
|
||||
text-align: left;
|
||||
margin-top: 0.28rem;
|
||||
margin-left: 0.167rem;
|
||||
margin-bottom: 0.242rem;
|
||||
}
|
||||
.map-poto {
|
||||
/* background: #F2F2F2; */
|
||||
padding: 0 0.708rem;
|
||||
}
|
||||
.poto {
|
||||
width: 4.833rem;
|
||||
height: 3.45rem;
|
||||
background: #f2f2f2;
|
||||
padding: 0.083rem;
|
||||
}
|
||||
.poto img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
.info-text {
|
||||
padding: 0.167rem;
|
||||
padding-top: 0;
|
||||
font-size: 0.217rem;
|
||||
|
||||
font-weight: bold;
|
||||
color: #999999;
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue