项目详情模块完善

main
严飞永 1 month ago
parent 7015c6a1e2
commit 87fb0ffa43

Binary file not shown.

After

Width:  |  Height:  |  Size: 287 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

@ -19,9 +19,9 @@
</div>
<!-- 内容区 -->
<div class="content">
<div class="picturediv">图片信息</div>
<div class="picturediv"></div>
<div class="descriptionsdiv">
<el-descriptions class="margin-top" :column="3" :size="size" border>
<el-descriptions class="margin-top" :column="3" border>
<el-descriptions-item>
<template slot="label">
项目名称
@ -153,7 +153,14 @@
</template>
<script>
export default {
props: {
size: {
type: String,
default: 'mini'
}
},
}
</script>
<style scoped>
@ -207,7 +214,7 @@
.picturediv {
width: 18.31rem;
height: 25.31rem;
height: 25rem;
background-color: lightblue;
}
.descriptionsdiv{

@ -7,6 +7,12 @@
<span>建筑信息</span>
</div>
<div class="topright">
<el-button type="primary" size="mini" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;" @click="addBuildingTag">
<img src="../../../assets/images/detailsicon/icon-xz@2x.png" alt="编辑"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
新增
</el-button>
<el-button type="primary" size="mini" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
<img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
@ -21,113 +27,95 @@
</el-button>
</div>
</div>
<!-- 栋数 -->
<div class="tagdiv">
<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
@close="handleClose(tag)">
@close="handleClose(tag)"
@click="handleTagClick(tag)"
:class="{'active-tag': activeTag === tag}">
<img src="../../../assets/images/detailsicon/icon-楼栋@2x.png" alt="">
{{ tag }}
</el-tag>
<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
@keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+</el-button>
</div>
<!-- 内容区 -->
<div class="content">
<div class="descriptionsdiv">
<el-descriptions class="margin-top" :column="4" :size="size" border>
<el-descriptions-item>
<template slot="label">
总用地面积(平方米)
</template>
THi SIP高端装备工业港
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
容积率
</template>
泰凌医药中国)有限公司
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
总建筑面积平方米
</template>
项目法人单位性质
</el-descriptions-item>
<el-descriptions class="margin-top" :column="4" border>
<el-descriptions-item>
<template slot="label">
标准层建筑面积平方米
是否为重要楼栋
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
计容积率建筑面积(平方米)
层数
</template>
18100000000
6
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
建筑密度(%)
总建筑高度
</template>
苏州市
41.2
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
绿地率(%)
首层高度平方米
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
建筑栋数
二至四层层高()
</template>
18100000000
3.2
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
地上建筑面积(平方米)
4层以上层高
</template>
苏州市
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
地下建筑面积(平方米)
首层地面荷载(/平方米)
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
最高建筑层数
二至三层楼面荷载(/平方米)
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
最高建筑高度()
标准层面积(千平方)
</template>
苏州市
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
机动车停车位()
柱距
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
非机动车停车位()
是否有吊装口
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
防火等级
是否有汽车盘道
</template>
苏州市
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
规划文件
四层及以上楼面荷载(/平方米)
</template>
kooriookami
</el-descriptions-item>
@ -138,36 +126,46 @@
</template>
<script>
export default {
export default {
props: {
size: {
type: String,
default: ''
}
},
data() {
return {
dynamicTags: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: ''
};
return {
dynamicTags: ['1栋', '2栋', '3栋'],
inputVisible: false,
inputValue: '',
currentBuildingNumber: 3,
activeTag: '1栋'
};
},
methods: {
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
},
showInput() {
this.inputVisible = true;
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus();
});
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
handleClose(tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
if (this.activeTag === tag) {
this.activeTag = null;
}
},
handleInputConfirm() {
let inputValue = this.inputValue;
if (inputValue) {
this.dynamicTags.push(inputValue);
}
this.inputVisible = false;
this.inputValue = '';
},
handleTagClick(tag) {
this.activeTag = tag;
},
addBuildingTag() {
this.currentBuildingNumber++;
this.dynamicTags.push(`${this.currentBuildingNumber}`);
}
this.inputVisible = false;
this.inputValue = '';
}
}
}
}
</script>
<style scoped>
@ -234,22 +232,42 @@
.two-row-item {
height: 20rem;
}
.tagdiv{
padding: 1rem 2rem 0 2rem;
.tagdiv {
padding: 1rem 2rem 0 2rem;
display: flex;
}
.tagdiv img{
width: 1.4rem;
height: 1.5rem;
}
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
.el-tag{
border-radius: 1rem;
width: 6.25rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: space-around;
}
.el-tag+.el-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
border-radius: 1rem;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>
border-radius: 1rem;
}
.el-tag {
cursor: pointer;
}
.active-tag {
background-color: rgba(43,98,241,0.1);
color: #2B62F1 !important;
}
</style>

@ -1,144 +1,129 @@
<template>
<div class="container">
<!-- 顶部信息 -->
<div class="containertop">
<div class="topleft">
<img src="../../../assets/images/detailsicon/1.png" alt="">
<span>企业入驻信息</span>
</div>
<div class="topright">
<el-button type="primary" size="mini" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
<img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
编辑
</el-button>
<el-button type="primary" size="mini" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
<img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
导出
</el-button>
</div>
</div>
<!-- 内容区上方的表格 -->
<div class="tagdiv">
<div class="descriptionsdiv">
<el-descriptions class="margin-top" :column="4" :size="size" border>
<el-descriptions-item>
<template slot="label">
计容积率建筑面积(平方米)
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
建筑密度(%)
</template>
苏州市
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
绿地率(%)
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
建筑栋数
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
地上建筑面积(平方米)
</template>
苏州市
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
地下建筑面积(平方米)
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
最高建筑层数
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
最高建筑高度()
</template>
苏州市
</el-descriptions-item>
</el-descriptions>
</div>
</div>
<!-- 内容区 -->
<div class="content">
<div class="descriptionsdiv">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="项目名称"
width="210">
<template slot-scope="scope">
<span style="color: #2B62F1;">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
prop="address"
label="状态"
width="200">
</el-table-column>
<el-table-column
prop="name"
label="当月完成投资"
width="240">
<template slot-scope="scope">
<span style="color: #2B62F1;">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="累计完成投资"
width="220">
<template slot-scope="scope">
<span style="color: #2B62F1;">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
prop="data"
label='截止目前累计建成面积(平方米)'
width="260"
>
</el-table-column>
<el-table-column
prop="data"
label='贷款额度(万元)'
width="200">
</el-table-column>
<el-table-column
prop="data"
label='项目进展详情'
width="140">
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="80">
<template slot-scope="scope">
<span :style="getStatusColor(scope.row.status)">{{ scope.row.status }}</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="container">
<!-- 顶部信息 -->
<div class="containertop">
<div class="topleft">
<img src="../../../assets/images/detailsicon/1.png" alt="">
<span>企业入驻信息</span>
</div>
<div class="topright">
<el-button type="primary" size="mini" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
<img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
编辑
</el-button>
<el-button type="primary" size="mini" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
<img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
导出
</el-button>
</div>
</div>
<!-- 内容区上方的表格 -->
<div class="tagdiv">
<div class="descriptionsdiv">
<el-descriptions class="margin-top" :column="4" border>
<el-descriptions-item>
<template slot="label">
入驻企业数
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
入驻企业行业类型
</template>
苏州市
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
人员数量
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
入住率%
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
已出租面积平方米
</template>
苏州市
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
空置出租面积平方米
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
工业厂房平均租金/平方米*
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
工业厂房平均物业费(/平方米*)
</template>
苏州市
</el-descriptions-item>
</el-descriptions>
</div>
</div>
<!-- 内容区 -->
<div class="content">
<div class="descriptionsdiv">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="address" label="序号" width="200">
</el-table-column>
<el-table-column prop="name" label="企业名称" width="300">
<template slot-scope="scope">
<span style="color: #2B62F1;">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="name" label="统一社会信用代码" width="300">
<template slot-scope="scope">
<span style="color: #2B62F1;">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="name" label="所属行业" width="300">
<template slot-scope="scope">
<span style="color: #2B62F1;">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="data" label='租金价格' width="250">
</el-table-column>
<el-table-column prop="data" label='操作' width="200">
</el-table-column>
</el-table>
<div class="block">
<div style="visibility: hidden;"></div>
<!-- @size-change="handleSizeChange"
@current-change="handleCurrentChange" -->
<el-pagination
:current-page="4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
layout="total, prev, pager, next, jumper" :total="400">
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
size: {
type: String,
default: 'mini' //
}
},
data() {
return {
tableData: [
@ -190,67 +175,76 @@ export default {
<style scoped>
.container {
display: flex;
flex-direction: column;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
display: flex;
flex-direction: column;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}
.content {
padding: 1rem;
display: flex;
padding: 1rem;
display: flex;
}
.containertop {
height: auto;
display: flex;
justify-content: space-between;
padding: .7rem 0;
padding: .5rem;
border-bottom: 1px solid #E5E5E5;
height: auto;
display: flex;
justify-content: space-between;
padding: .7rem 0;
padding: .5rem;
border-bottom: 1px solid #E5E5E5;
}
.topleft {
width: 8rem;
display: flex;
gap: 0.4rem;
align-items: center;
width: 8rem;
display: flex;
gap: 0.4rem;
align-items: center;
}
.topleft img {
width: 0.81rem;
height: 0.81rem;
width: 0.81rem;
height: 0.81rem;
}
.topleft span {
width: auto;
height: 0.88rem;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 500;
font-size: 0.88rem;
color: #3D424C;
line-height: 0.88rem;
text-align: right;
font-style: normal;
text-transform: none;
width: auto;
height: 0.88rem;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 500;
font-size: 0.88rem;
color: #3D424C;
line-height: 0.88rem;
text-align: right;
font-style: normal;
text-transform: none;
}
.picturediv {
width: 18.31rem;
height: 25.31rem;
background-color: lightblue;
width: 18.31rem;
height: 25.31rem;
background-color: lightblue;
}
.descriptionsdiv{
width: 100%;
margin-left: 1rem;
height: auto;
.descriptionsdiv {
width: 100%;
margin-left: 1rem;
height: auto;
}
.two-row-item{
height: 20rem;
.two-row-item {
height: 20rem;
}
.tagdiv {
padding: 1rem 3em 1rem 1rem;
}
.tagdiv{
padding: 1rem 3em 1rem 1rem;
.block{
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 1rem;
}
</style>

@ -7,123 +7,54 @@
<span>五要素模型信息</span>
</div>
<div class="topright">
<el-button type="primary" size="mini" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
<img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
<el-button type="primary" size="mini" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
<img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
编辑
</el-button>
<el-button type="primary" size="mini" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
<img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
导出
</el-button>
</el-button>
</div>
</div>
<!-- 内容区 -->
<div class="content">
<div class="descriptionsdiv">
<el-descriptions class="margin-top" :column="4" :size="size" border>
<el-descriptions-item>
<template slot="label">
总用地面积(平方米)
</template>
THi SIP高端装备工业港
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
容积率
</template>
泰凌医药中国)有限公司
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
总建筑面积平方米
</template>
项目法人单位性质
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
标准层建筑面积平方米
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
计容积率建筑面积(平方米)
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
建筑密度(%)
</template>
苏州市
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
绿地率(%)
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
建筑栋数
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
地上建筑面积(平方米)
</template>
苏州市
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
地下建筑面积(平方米)
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
最高建筑层数
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
最高建筑高度()
</template>
苏州市
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
机动车停车位()
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
非机动车停车位()
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
防火等级
</template>
苏州市
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
规划文件
</template>
kooriookami
</el-descriptions-item>
</el-descriptions>
<div>
<table class="custom-table">
<tr v-for="(row, index) in tableData" :key="index">
<td class="left-column">{{ row.left }}</td>
<td class="right-columns">{{ row.right1 }}</td>
<td class="right-columns">{{ row.right2 }}</td>
<td class="right-columns">{{ row.right3 }}</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "CustomTable",
data() {
return {
tableData: [
{ left: "环保安全", right1: "危化品等级7.65", right2: "生产火灾危险等级:丙类", right3: "环境保护:无" },
{ left: "设备载重", right1: "设备载重:无", right2: "", right3: "" },
{ left: "垂直交通", right1: "货梯要求:原材料质量是否<3吨", right2: "货梯要求1人/15m³", right3: "" },
{ left: "减震措施", right1: "加工精度:纳米级", right2: "减震措施:无", right3: "" },
{ left: "工艺需求", right1: "生产类型:无", right2: "层高要求:无", right3: "" },
],
props: {
size: {
type: String,
default: 'mini'
}
},
};
},
};
</script>
@ -181,12 +112,35 @@
height: 25.31rem;
background-color: lightblue;
}
.descriptionsdiv{
.descriptionsdiv {
width: 100%;
margin-left: 1rem;
height: auto;
}
.two-row-item{
.two-row-item {
height: 20rem;
}
.custom-table {
width: 100%;
border-collapse: collapse;
border: 1px solid #ccc;
}
.custom-table th,
.custom-table td {
padding: 8px;
text-align: left;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
.left-column {
border-right: 1px solid black;
}
.right-columns {
border-right: none;
}
</style>

@ -1,85 +1,69 @@
<template>
<div class="container">
<!-- 顶部信息 -->
<div class="containertop">
<div class="topleft">
<img src="../../../assets/images/detailsicon/1.png" alt="">
<span>月度进展信息</span>
</div>
<div class="topright">
<el-button type="primary" size="mini" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
<img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
编辑
</el-button>
<el-button type="primary" size="mini" plain style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
<img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑" style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
导出
</el-button>
</div>
</div>
<!-- 内容区 -->
<div class="content">
<div class="descriptionsdiv">
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="name"
label="项目名称"
width="210">
<template slot-scope="scope">
<span style="color: #2B62F1;">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
prop="address"
label="状态"
width="200">
</el-table-column>
<el-table-column
prop="name"
label="当月完成投资"
width="240">
<template slot-scope="scope">
<span style="color: #2B62F1;">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="累计完成投资"
width="220">
<template slot-scope="scope">
<span style="color: #2B62F1;">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column
prop="data"
label='截止目前累计建成面积(平方米)'
width="260"
>
</el-table-column>
<el-table-column
prop="data"
label='贷款额度(万元)'
width="200">
</el-table-column>
<el-table-column
prop="data"
label='项目进展详情'
width="140">
</el-table-column>
<el-table-column
prop="status"
label="状态"
width="80">
<template slot-scope="scope">
<span :style="getStatusColor(scope.row.status)">{{ scope.row.status }}</span>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="container">
<!-- 顶部信息 -->
<div class="containertop">
<div class="topleft">
<img src="../../../assets/images/detailsicon/1.png" alt="">
<span>月度进展信息</span>
</div>
<div class="topright">
<el-button type="primary" size="mini" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
<img src="../../../assets/images/detailsicon/icon-bj@2x.png" alt="编辑"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
编辑
</el-button>
<el-button type="primary" size="mini" plain
style="border: none;background-color: rgba(43,98,241,0.1);color: #2B62F1;">
<img src="../../../assets/images/detailsicon/icon-dc@2x.png" alt="编辑"
style="width: 0.6rem; height: 0.6rem; margin-right: 4px;">
导出
</el-button>
</div>
</div>
<!-- 内容区 -->
<div class="content">
<div class="descriptionsdiv">
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="name" label="进度月份" width="210">
<template slot-scope="scope">
<span style="color: #2B62F1;">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="address" label="状态" width="200">
</el-table-column>
<el-table-column prop="name" label="当月完成投资" width="240">
<template slot-scope="scope">
<span style="color: #2B62F1;">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="name" label="累计完成投资" width="220">
<template slot-scope="scope">
<span style="color: #2B62F1;">{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="data" label='截止目前累计建成面积(平方米)' width="260">
</el-table-column>
<el-table-column prop="data" label='贷款额度(万元)' width="200">
</el-table-column>
<el-table-column prop="data" label='项目进展详情' width="140">
</el-table-column>
<el-table-column prop="status" label="状态" width="80">
<template slot-scope="scope">
<span :style="getStatusColor(scope.row.status)">{{ scope.row.status }}</span>
</template>
</el-table-column>
</el-table>
<div class="block">
<div style="visibility: hidden;"></div>
<el-pagination
:current-page="4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
layout="total, prev, pager, next, jumper" :total="400">
</el-pagination>
</div>
</div>
</div>
</div>
</template>
<script>
@ -135,64 +119,72 @@ export default {
<style scoped>
.container {
display: flex;
flex-direction: column;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
display: flex;
flex-direction: column;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}
.content {
padding: 1rem;
display: flex;
padding: 1rem;
display: flex;
}
.containertop {
height: auto;
display: flex;
justify-content: space-between;
padding: .7rem 0;
padding: .5rem;
border-bottom: 1px solid #E5E5E5;
height: auto;
display: flex;
justify-content: space-between;
padding: .7rem 0;
padding: .5rem;
border-bottom: 1px solid #E5E5E5;
}
.topleft {
width: 8rem;
display: flex;
gap: 0.4rem;
align-items: center;
width: 8rem;
display: flex;
gap: 0.4rem;
align-items: center;
}
.topleft img {
width: 0.81rem;
height: 0.81rem;
width: 0.81rem;
height: 0.81rem;
}
.topleft span {
width: auto;
height: 0.88rem;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 500;
font-size: 0.88rem;
color: #3D424C;
line-height: 0.88rem;
text-align: right;
font-style: normal;
text-transform: none;
width: auto;
height: 0.88rem;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
font-weight: 500;
font-size: 0.88rem;
color: #3D424C;
line-height: 0.88rem;
text-align: right;
font-style: normal;
text-transform: none;
}
.picturediv {
width: 18.31rem;
height: 25.31rem;
background-color: lightblue;
width: 18.31rem;
height: 25.31rem;
background-color: lightblue;
}
.descriptionsdiv {
width: 100%;
margin-left: 1rem;
height: auto;
}
.descriptionsdiv{
width: 100%;
margin-left: 1rem;
height: auto;
.two-row-item {
height: 20rem;
}
.two-row-item{
height: 20rem;
.block{
width: 100%;
display: flex;
justify-content: space-between;
margin-top: 1rem;
}
</style>

@ -20,7 +20,7 @@
<!-- 内容区 -->
<div class="content">
<div class="descriptionsdiv">
<el-descriptions class="margin-top" :column="4" :size="size" border>
<el-descriptions class="margin-top" :column="4" border>
<el-descriptions-item>
<template slot="label">
总用地面积(平方米)
@ -124,7 +124,14 @@
</template>
<script>
export default {
props: {
size: {
type: String,
default: ''
}
}
}
</script>
<style scoped>

@ -27,90 +27,26 @@
<div ref="chart" style="width: 30rem; height: 25rem; margin-left: 2rem;"></div>
</div>
<div class="descriptionsdiv">
<el-descriptions class="margin-top" :column="2" :size="size" border>
<el-descriptions-item>
<template slot="label">
总投资额万元
</template>
苏州市
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
所属功能区
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
建设起止时间
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
现状分类
</template>
苏州市
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
建设地点
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
重点发展产业
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
建设模式
</template>
苏州市
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
项目标签
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
项目负责人
</template>
18100000000
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
联系方式
</template>
苏州市
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
施工许可证发放时间
</template>
kooriookami
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
竣工验收时间
</template>
18100000000
</el-descriptions-item>
<div>评价等级</div>
<el-descriptions direction="vertical" :column="4" border>
<el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
<el-descriptions-item label="手机号">18100000000</el-descriptions-item>
</el-descriptions>
</div>
</div>
</div>
</template>
</template>
<script>
import * as echarts from 'echarts';
export default {
props: {
size: {
type: String,
default: ''
}
},
mounted() {
this.initChart();
},
@ -126,7 +62,7 @@ export default {
},
tooltip: {},
legend: {
data: ['本项目', '中位数']
data: ['本项目', '中位数'],
},
radar: {
// shape: 'circle',
@ -162,7 +98,6 @@ export default {
}
};
</script>
<style scoped>
.container {
display: flex;

@ -1,59 +0,0 @@
<template>
<div class="detail-container">
<h1>项目详情</h1>
<el-form :model="project" label-width="120px">
<el-form-item label="项目编号">
<span>{{ project.postId }}</span>
</el-form-item>
<el-form-item label="项目编码">
<span>{{ project.postCode }}</span>
</el-form-item>
<el-form-item label="项目名称">
<span>{{ project.postName }}</span>
</el-form-item>
<el-form-item label="项目排序">
<span>{{ project.postSort }}</span>
</el-form-item>
<el-form-item label="状态">
<dict-tag :options="dict.type.sys_normal_disable" :value="project.status"/>
</el-form-item>
<el-form-item label="创建时间">
<span>{{ parseTime(project.createTime) }}</span>
</el-form-item>
<el-form-item label="备注">
<span>{{ project.remark }}</span>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { getPost } from "@/api/system/post";
export default {
name: "ProjectDetail",
dicts: ['sys_normal_disable'],
data() {
return {
project: {}
};
},
created() {
const postId = this.$route.params.postId;
this.getProjectDetail(postId);
},
methods: {
getProjectDetail(postId) {
getPost(postId).then(response => {
this.project = response.data;
});
}
}
};
</script>
<style scoped>
.detail-container {
padding: 20px;
}
</style>

@ -0,0 +1,7 @@
<template>
<div>
321
</div>
</template>
<script></script>

@ -0,0 +1,3 @@
<template>
<div>123</div>
</template>

@ -1,27 +1,46 @@
<template>
<div class="containerbody">
<!-- 目录 -->
<div class="containerhead">
<el-menu
:default-active="activeSection"
mode="horizontal"
@select="scrollToSection"
>
<el-menu-item
v-for="(item, index) in sections"
:key="index"
:index="item.id"
>
{{ item.label }}
</el-menu-item>
</el-menu>
</div>
<!-- 基本信息 -->
<Basic></Basic>
<Basic id="basic"></Basic>
<!-- 规划信息 -->
<Programme></Programme>
<!-- 建筑信息 -->
<Buildings></Buildings>
<Programme id="programme"></Programme>
<!-- 建筑信息 -->
<Buildings id="buildings"></Buildings>
<!-- 要素模型信息 -->
<Models></Models>
<Models id="models"></Models>
<!-- 月度进展信息 -->
<Months></Months>
<Months id="months"></Months>
<!-- 企业入驻信息 -->
<Companyenter></Companyenter>
<Companyenter id="companyenter"></Companyenter>
<!-- 项目画像 -->
<Projectpicture></Projectpicture>
<Projectpicture id="projectpicture"></Projectpicture>
<!-- 项目巡礼 -->
<Projectgift></Projectgift>
<Projectgift id="projectgift"></Projectgift>
<!-- 现场实况 -->
<Liver></Liver>
<Liver id="liver"></Liver>
<!-- 项目备忘录 -->
<Memo></Memo>
</div>
<Memo id="memo"></Memo>
<el-backtop
target="body">
</el-backtop>
</div>
</template>
<script>
@ -50,22 +69,54 @@ export default {
Projectpicture
},
data() {
return {};
},
mounted() {
return {
activeSection: 'basic',
sections: [
{ id: 'basic', label: '基本信息' },
{ id: 'programme', label: '规划信息' },
{ id: 'buildings', label: '建筑信息' },
{ id: 'models', label: '要素模型信息' },
{ id: 'months', label: '月度进展信息' },
{ id: 'companyenter', label: '企业入驻信息' },
{ id: 'projectpicture', label: '项目画像' },
{ id: 'projectgift', label: '项目巡礼' },
{ id: 'liver', label: '现场实况' },
{ id: 'memo', label: '项目备忘录' }
]
};
},
methods: {
},
scrollToSection(id) {
this.activeSection = id;
const element = document.getElementById(id);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
},
scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
}
};
</script>
<style scoped>
.containerbody{
.containerbody {
padding: .3rem .5rem;
display: flex;
flex-direction: column;
gap: 2rem;
position: relative;
overflow: auto;
}
.containerhead {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
}
</style>

@ -1,93 +0,0 @@
<template>
<div>
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
<el-form-item label="单行文本" prop="field106">
<el-input v-model="formData.field106" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item label="日期范围" prop="field103">
<el-date-picker type="daterange" v-model="formData.field103" format="yyyy-MM-dd"
value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期" end-placeholder="结束日期"
range-separator="至" clearable></el-date-picker>
</el-form-item>
<el-form-item label="下拉选择" prop="field105">
<el-select v-model="formData.field105" placeholder="请选择下拉选择" clearable :style="{width: '100%'}">
<el-option v-for="(item, index) in field105Options" :key="index" :label="item.label"
:value="item.value" :disabled="item.disabled"></el-option>
</el-select>
</el-form-item>
<el-form-item label="单行文本" prop="field107">
<el-input v-model="formData.field107" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
</el-input>
</el-form-item>
<el-form-item size="large">
<el-button type="primary" @click="submitForm"></el-button>
<el-button @click="resetForm"></el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
components: {},
props: [],
data() {
return {
formData: {
field106: undefined,
field103: null,
field105: undefined,
field107: undefined,
},
rules: {
field106: [{
required: true,
message: '请输入单行文本',
trigger: 'blur'
}],
field103: [{
required: true,
message: '日期范围不能为空',
trigger: 'change'
}],
field105: [{
required: true,
message: '请选择下拉选择',
trigger: 'change'
}],
field107: [{
required: true,
message: '请输入单行文本',
trigger: 'blur'
}],
},
field105Options: [{
"label": "选项一",
"value": 1
}, {
"label": "选项二",
"value": 2
}],
}
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {
submitForm() {
this.$refs['elForm'].validate(valid => {
if (!valid) return
// TODO
})
},
resetForm() {
this.$refs['elForm'].resetFields()
},
}
}
</script>
<style>
</style>

@ -34,12 +34,12 @@
</el-col>
</el-row>
<el-row>
<el-cow :span="8">
<el-col :span="8">
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery"></el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"></el-button>
</el-form-item>
</el-cow>
</el-col>
</el-row>
</el-form>
</div>

Loading…
Cancel
Save