suzhou-jichuang-lanhai
/
Gyyq-Upstairs
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

项目详情模块

Browse Source
xuhongjie
严飞永 4 months ago
parent 6e6c32837d
commit 7015c6a1e2
14 changed files with 1287 additions and 173 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/images/detailsicon/icon-bj@2x.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 588 B

BIN
src/assets/images/detailsicon/icon-dc@2x.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 368 B

BIN
src/assets/images/detailsicon/icon-关闭@2x.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 728 B

BIN
src/assets/images/icon-bf@2x.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

10
src/views/components/ProjectDetails/Basic.vue
Unescape View File

@ -7,8 +7,14 @@
<span>基本信息</span>
</div>
<div class="topright">
<el-button type="primary" icon="el-icon-edit" size="mini" plain style="border: none;"> 编辑</el-button>
<el-button type="primary" icon="el-icon-upload2" size="mini" plain style="border: none;"> 导出</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="编辑" 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>
<!-- 内容区 -->

225
src/views/components/ProjectDetails/Buildings.vue
Unescape View File

@ -7,26 +7,167 @@
<span>建筑信息</span>
</div>
<div class="topright">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
plain
style="border: none;"> 导入</el-button>
<el-button
type="primary"
icon="el-icon-upload"
size="mini"
plain
style="border: none;"> 导出</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="编辑"
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">
<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
@close="handleClose(tag)">
{{ 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-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>
</div>
<div>123</div>
</div>
</template>
<script>
export default {
data() {
return {
dynamicTags: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: ''
};
},
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);
}
this.inputVisible = false;
this.inputValue = '';
}
}
}
</script>
<style scoped>
@ -35,29 +176,37 @@
flex-direction: column;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
gap: 1rem;
}
.containertop{
.content {
padding: 1rem;
display: flex;
}
.containertop {
height: auto;
display: flex;
justify-content: space-between;
padding: .7rem 0;
border-bottom: 1px solid #E5E5E5;
padding: .5rem;
border-bottom: 1px solid #E5E5E5;
}
.topleft{
width:8rem ;
.topleft {
width: 8rem;
display: flex;
gap: 0.4rem;
align-items: center;
}
.topleft img{
.topleft img {
width: 0.81rem;
height: 0.81rem;
}
.topleft span{
.topleft span {
width: auto;
height: 0.88rem;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@ -69,4 +218,38 @@
font-style: normal;
text-transform: none;
}
.picturediv {
width: 18.31rem;
height: 25.31rem;
background-color: lightblue;
}
.descriptionsdiv {
width: 100%;
margin-left: 1rem;
height: auto;
}
.two-row-item {
height: 20rem;
}
.tagdiv{
padding: 1rem 2rem 0 2rem;
}
.el-tag + .el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>

228
src/views/components/ProjectDetails/Companyenter.vue
Unescape View File

@ -7,26 +7,185 @@
<span>企业入驻信息</span>
</div>
<div class="topright">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
plain
style="border: none;"> 导入</el-button>
<el-button
type="primary"
icon="el-icon-upload"
size="mini"
plain
style="border: none;"> 导出</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="编辑" 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>
<div>123</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '大众电脑生成制造基地',
address: ' 1518 弄',
data: '1000',
status: '在建'
},
{
date: '2016-05-04',
name: '大众电脑生成制造基地',
address: ' 1517 弄',
data: '1500',
status: '拟建'
},
{
date: '2016-05-01',
name: '大众电脑生成制造基地',
address: ' 1519 弄',
data: '2000',
status: '已建'
},
{
date: '2016-05-03',
name: '大众电脑生成制造基地',
address: ' 1516 弄',
data: '2500',
status: '在建'
}
],
}
},
methods: {
getStatusColor(status) {
switch (status) {
case '在建':
return 'color: #2DD29F;';
case '拟建':
return 'color: #F08445;';
case '已建':
return 'color: #2B62F1;';
}
}
}
}
</script>
<style scoped>
@ -35,29 +194,37 @@
flex-direction: column;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
gap: 1rem;
}
.containertop{
.content {
padding: 1rem;
display: flex;
}
.containertop {
height: auto;
display: flex;
justify-content: space-between;
padding: .7rem 0;
border-bottom: 1px solid #E5E5E5;
padding: .5rem;
border-bottom: 1px solid #E5E5E5;
}
.topleft{
width:8rem ;
.topleft {
width: 8rem;
display: flex;
gap: 0.4rem;
align-items: center;
}
.topleft img{
.topleft img {
width: 0.81rem;
height: 0.81rem;
}
.topleft span{
.topleft span {
width: auto;
height: 0.88rem;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@ -69,4 +236,21 @@
font-style: normal;
text-transform: none;
}
.picturediv {
width: 18.31rem;
height: 25.31rem;
background-color: lightblue;
}
.descriptionsdiv{
width: 100%;
margin-left: 1rem;
height: auto;
}
.two-row-item{
height: 20rem;
}
.tagdiv{
padding: 1rem 3em 1rem 1rem;
}
</style>

87
src/views/components/ProjectDetails/Liver.vue
Unescape View File

@ -21,12 +21,38 @@
style="border: none;"> 导出</el-button>
</div>
</div>
<div>123</div>
<!-- 视频 -->
<div class="image-container">
<div v-for="(image, index) in images" :key="index" class="image-box">
<img :src="image.src" alt="项目录像" class="image">
<!-- 关闭按钮 -->
<div class = "close-button" @click="removeImage(index)">
<img src="../../../assets/images/detailsicon/icon-关闭@2x.png" alt="">
</div>
<!-- 播放按钮 -->
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
images: [
{ src: '' },
{ src: '' },
{ src: '' },
// 添加更多图片
]
};
},
methods: {
removeImage(index) {
this.images.splice(index, 1);
}
}
};
</script>
<style scoped>
@ -35,29 +61,34 @@
flex-direction: column;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
padding: 1rem;
gap: 1rem;
overflow: auto;
}
.containertop{
.containertop {
height: auto;
display: flex;
justify-content: space-between;
padding: .7rem 0;
border-bottom: 1px solid #E5E5E5;
padding: .5rem;
border-bottom: 1px solid #E5E5E5;
}
.topleft{
width:8rem ;
.topleft {
width: 8rem;
display: flex;
gap: 0.4rem;
align-items: center;
}
.topleft img{
.topleft img {
width: 0.81rem;
height: 0.81rem;
}
.topleft span{
.topleft span {
width: auto;
height: 0.88rem;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@ -69,4 +100,38 @@
font-style: normal;
text-transform: none;
}
</style>
.image-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.image-box {
position: relative;
width: 21.75rem;
height: 12.44rem;
background-color: #f0f0f0;
border-radius: 0.5rem;
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
.close-button {
width: 1.25rem;
height: 1.25rem;
position: absolute;
top: 0.2rem;
right: 0.2rem;
}
.close-button img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>

130
src/views/components/ProjectDetails/Memo.vue
Unescape View File

@ -7,26 +7,81 @@
<span>项目备忘录</span>
</div>
<div class="topright">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
plain
style="border: none;"> 导入</el-button>
<el-button
type="primary"
icon="el-icon-upload"
size="mini"
plain
style="border: none;"> 导出</el-button>
<el-button type="primary" icon="el-icon-edit" size="mini" plain style="border: none;"> 导入</el-button>
<el-button type="primary" icon="el-icon-upload" size="mini" plain style="border: none;"> 导出</el-button>
</div>
</div>
<div class="content">
<div class="descriptionsdiv">
<el-form :model="form" @submit.native.prevent="onSubmit">
<el-form-item>
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
style="width: 100%;"></el-date-picker>
</el-col>
</el-form-item>
</el-form>
</div>
<div class="descriptionsdiv">
<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
@close="handleClose(tag)">
{{ 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">+ New Tag</el-button>
</div>
</div>
<div>123</div>
</div>
</template>
<script>
export default {
data() {
return {
dynamicTags: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: '',
form: {
name: '',
region: '',
date1: null, // 确保初始值为 null 或者一个默认日期
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
};
},
methods: {
onSubmit() {
console.log('submit!');
console.log(this.form); // 确保在提交时可以正确读取 form 数据
},
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);
}
this.inputVisible = false;
this.inputValue = '';
}
}
};
</script>
<style scoped>
@ -35,11 +90,19 @@
flex-direction: column;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
gap: 1rem;
}
.containertop{
.content {
padding: 1rem;
display: flex;
flex-direction: column;
gap: 2rem;
}
.containertop {
height: auto;
display: flex;
justify-content: space-between;
@ -47,17 +110,20 @@
border-bottom: 1px solid #E5E5E5;
padding: .5rem;
}
.topleft{
width:8rem ;
.topleft {
width: 8rem;
display: flex;
gap: 0.4rem;
align-items: center;
}
.topleft img{
.topleft img {
width: 0.81rem;
height: 0.81rem;
}
.topleft span{
.topleft span {
width: auto;
height: 0.88rem;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@ -69,4 +135,28 @@
font-style: normal;
text-transform: none;
}
</style>
.descriptionsdiv {
width: 100%;
margin-left: 1rem;
height: auto;
}
.el-tag+.el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>

164
src/views/components/ProjectDetails/Models.vue
Unescape View File

@ -4,24 +4,122 @@
<div class="containertop">
<div class="topleft">
<img src="../../../assets/images/detailsicon/1.png" alt="">
<span>要素模型信息</span>
<span>五要素模型信息</span>
</div>
<div class="topright">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
plain
style="border: none;"> 导入</el-button>
<el-button
type="primary"
icon="el-icon-upload"
size="mini"
plain
style="border: none;"> 导出</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="编辑" 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-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>
</div>
<div>123</div>
</div>
</template>
@ -35,29 +133,37 @@
flex-direction: column;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
gap: 1rem;
}
.containertop{
.content {
padding: 1rem;
display: flex;
}
.containertop {
height: auto;
display: flex;
justify-content: space-between;
padding: .7rem 0;
border-bottom: 1px solid #E5E5E5;
padding: .5rem;
border-bottom: 1px solid #E5E5E5;
}
.topleft{
width:8rem ;
.topleft {
width: 8rem;
display: flex;
gap: 0.4rem;
align-items: center;
}
.topleft img{
.topleft img {
width: 0.81rem;
height: 0.81rem;
}
.topleft span{
.topleft span {
width: auto;
height: 0.88rem;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@ -69,4 +175,18 @@
font-style: normal;
text-transform: none;
}
.picturediv {
width: 18.31rem;
height: 25.31rem;
background-color: lightblue;
}
.descriptionsdiv{
width: 100%;
margin-left: 1rem;
height: auto;
}
.two-row-item{
height: 20rem;
}
</style>

170
src/views/components/ProjectDetails/Months.vue
Unescape View File

@ -7,26 +7,130 @@
<span>月度进展信息</span>
</div>
<div class="topright">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
plain
style="border: none;"> 导入</el-button>
<el-button
type="primary"
icon="el-icon-upload"
size="mini"
plain
style="border: none;"> 导出</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="编辑" 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>123</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: '2016-05-02',
name: '大众电脑生成制造基地',
address: ' 1518 弄',
data: '1000',
status: '在建'
},
{
date: '2016-05-04',
name: '大众电脑生成制造基地',
address: ' 1517 弄',
data: '1500',
status: '拟建'
},
{
date: '2016-05-01',
name: '大众电脑生成制造基地',
address: ' 1519 弄',
data: '2000',
status: '已建'
},
{
date: '2016-05-03',
name: '大众电脑生成制造基地',
address: ' 1516 弄',
data: '2500',
status: '在建'
}
],
}
},
methods: {
getStatusColor(status) {
switch (status) {
case '在建':
return 'color: #2DD29F;';
case '拟建':
return 'color: #F08445;';
case '已建':
return 'color: #2B62F1;';
}
}
}
}
</script>
<style scoped>
@ -35,29 +139,37 @@
flex-direction: column;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
gap: 1rem;
}
.containertop{
.content {
padding: 1rem;
display: flex;
}
.containertop {
height: auto;
display: flex;
justify-content: space-between;
padding: .7rem 0;
border-bottom: 1px solid #E5E5E5;
padding: .5rem;
border-bottom: 1px solid #E5E5E5;
}
.topleft{
width:8rem ;
.topleft {
width: 8rem;
display: flex;
gap: 0.4rem;
align-items: center;
}
.topleft img{
.topleft img {
width: 0.81rem;
height: 0.81rem;
}
.topleft span{
.topleft span {
width: auto;
height: 0.88rem;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@ -69,4 +181,18 @@
font-style: normal;
text-transform: none;
}
.picturediv {
width: 18.31rem;
height: 25.31rem;
background-color: lightblue;
}
.descriptionsdiv{
width: 100%;
margin-left: 1rem;
height: auto;
}
.two-row-item{
height: 20rem;
}
</style>

162
src/views/components/ProjectDetails/Programme.vue
Unescape View File

@ -7,21 +7,119 @@
<span>规划信息</span>
</div>
<div class="topright">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
plain
style="border: none;"> 导入</el-button>
<el-button
type="primary"
icon="el-icon-upload"
size="mini"
plain
style="border: none;"> 导出</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="编辑" 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-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>
</div>
<div>123</div>
</div>
</template>
@ -35,29 +133,37 @@
flex-direction: column;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
gap: 1rem;
}
.containertop{
.content {
padding: 1rem;
display: flex;
}
.containertop {
height: auto;
display: flex;
justify-content: space-between;
padding: .7rem 0;
border-bottom: 1px solid #E5E5E5;
padding: .5rem;
border-bottom: 1px solid #E5E5E5;
}
.topleft{
width:8rem ;
.topleft {
width: 8rem;
display: flex;
gap: 0.4rem;
align-items: center;
}
.topleft img{
.topleft img {
width: 0.81rem;
height: 0.81rem;
}
.topleft span{
.topleft span {
width: auto;
height: 0.88rem;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@ -69,4 +175,18 @@
font-style: normal;
text-transform: none;
}
.picturediv {
width: 18.31rem;
height: 25.31rem;
background-color: lightblue;
}
.descriptionsdiv{
width: 100%;
margin-left: 1rem;
height: auto;
}
.two-row-item{
height: 20rem;
}
</style>

85
src/views/components/ProjectDetails/Projectgift.vue
Unescape View File

@ -21,12 +21,36 @@
style="border: none;"> 导出</el-button>
</div>
</div>
<div>123</div>
<!-- 图片盒子容器 -->
<div class="image-container">
<div v-for="(image, index) in images" :key="index" class="image-box">
<img :src="image.src" alt="项目图片" class="image">
<div class = "close-button" @click="removeImage(index)">
<img src="../../../assets/images/detailsicon/icon-关闭@2x.png" alt="">
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
images: [
{ src: '' },
{ src: '' },
{ src: '' },
// 添加更多图片
]
};
},
methods: {
removeImage(index) {
this.images.splice(index, 1);
}
}
};
</script>
<style scoped>
@ -35,29 +59,34 @@
flex-direction: column;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
padding: 1rem;
gap: 1rem;
overflow: auto;
}
.containertop{
.containertop {
height: auto;
display: flex;
justify-content: space-between;
padding: .7rem 0;
border-bottom: 1px solid #E5E5E5;
padding: .5rem;
border-bottom: 1px solid #E5E5E5;
}
.topleft{
width:8rem ;
.topleft {
width: 8rem;
display: flex;
gap: 0.4rem;
align-items: center;
}
.topleft img{
.topleft img {
width: 0.81rem;
height: 0.81rem;
}
.topleft span{
.topleft span {
width: auto;
height: 0.88rem;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@ -69,4 +98,38 @@
font-style: normal;
text-transform: none;
}
</style>
.image-container {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.image-box {
position: relative;
width: 21.75rem;
height: 12.44rem;
background-color: #f0f0f0;
border-radius: 0.5rem;
overflow: hidden;
}
.image {
width: 100%;
height: 100%;
object-fit: cover;
}
.close-button {
width: 1.25rem;
height: 1.25rem;
position: absolute;
top: 0.2rem;
right: 0.2rem;
}
.close-button img {
width: 100%;
height: 100%;
object-fit: cover;
}
</style>

199
src/views/components/ProjectDetails/Projectpicture.vue
Unescape View File

@ -7,26 +7,160 @@
<span>项目画像</span>
</div>
<div class="topright">
<el-button
type="primary"
icon="el-icon-edit"
size="mini"
plain
style="border: none;"> 导入</el-button>
<el-button
type="primary"
icon="el-icon-upload"
size="mini"
plain
style="border: none;"> 导出</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="编辑"
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="picturediv">
<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>
</el-descriptions>
</div>
</div>
<div>123</div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
mounted() {
this.initChart();
},
methods: {
initChart() {
const chartDom = this.$refs.chart;
const myChart = echarts.init(chartDom);
const option = {
title: {
text: '',
left: 'center'
},
tooltip: {},
legend: {
data: ['本项目', '中位数']
},
radar: {
// shape: 'circle',
indicator: [
{ name: '总投资额', max: 6500 },
{ name: '首层层高', max: 16000 },
{ name: '二层及以上楼面荷载', max: 30000 },
{ name: '首层地面荷载', max: 38000 },
{ name: '二层及以上楼面荷载', max: 52000 },
{ name: '层数', max: 25000 }
]
},
series: [
{
name: 'Budget vs spending',
type: 'radar',
data: [
{
value: [4200, 3000, 20000, 35000, 50000, 18000],
name: '本项目'
},
{
value: [5000, 14000, 28000, 26000, 42000, 21000],
name: '中位数'
}
]
}
]
};
myChart.setOption(option);
}
}
};
</script>
<style scoped>
@ -35,29 +169,37 @@
flex-direction: column;
width: 100%;
background-color: #FFFFFF;
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177,177,177,0.1);
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
gap: 1rem;
}
.containertop{
.content {
padding: 1rem;
display: flex;
}
.containertop {
height: auto;
display: flex;
justify-content: space-between;
padding: .7rem 0;
border-bottom: 1px solid #E5E5E5;
padding: .5rem;
border-bottom: 1px solid #E5E5E5;
}
.topleft{
width:8rem ;
.topleft {
width: 8rem;
display: flex;
gap: 0.4rem;
align-items: center;
}
.topleft img{
.topleft img {
width: 0.81rem;
height: 0.81rem;
}
.topleft span{
.topleft span {
width: auto;
height: 0.88rem;
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
@ -69,4 +211,19 @@
font-style: normal;
text-transform: none;
}
.picturediv {
width: auto;
height: auto;
}
.descriptionsdiv {
width: 52rem;
margin-left: 10rem;
height: 25.31rem;
}
.two-row-item {
height: 20rem;
}
</style>

Write Preview
Loading…
Cancel
Save