parent
aed1adb622
commit
e912954367
@ -1,8 +1,8 @@
|
||||
# 页面标题
|
||||
VUE_APP_TITLE = 苏州工业园区工业上楼项目系统
|
||||
VUE_APP_TITLE = 苏州工业园区工业上楼管理系统
|
||||
|
||||
# 生产环境配置
|
||||
ENV = 'production'
|
||||
|
||||
# 苏州工业园区工业上楼项目系统/生产环境
|
||||
# 苏州工业园区工业上楼管理系统/生产环境
|
||||
# VUE_APP_BASE_API = 'http://39.101.188.84:7071'
|
||||
|
||||
@ -1,96 +1,146 @@
|
||||
<template>
|
||||
<div class="projectList">
|
||||
<el-table :data="tableData" style="width: 100%">
|
||||
<el-table-column prop="name" label="项目名称" width="170">
|
||||
<template slot-scope="scope">
|
||||
<span style="color: #2B62F1;">{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="ssgnq" label="所在区域">
|
||||
</el-table-column>
|
||||
<el-table-column prop="ztze" label='总投资额(万元)' width="88">
|
||||
</el-table-column>
|
||||
<el-table-column prop="zydmj" label='建筑面积(万平方米)' width="88">
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="70">
|
||||
<template slot-scope="scope">
|
||||
<span :style="getStatusColor(scope.row.status)">{{ scope.row.status }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div>
|
||||
<!-- 表格内容区 -->
|
||||
<div class="tablebox">
|
||||
<!-- 标签行 -->
|
||||
<el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange" stripe>
|
||||
<el-table-column label="项目名称" align="center" width="150" >
|
||||
<template slot-scope="scope">
|
||||
<span style="color: #2B62F1;cursor: pointer;" @click="getInfo(scope.row, 'detail')">{{ scope.row.name }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="总投资额（万元）" align="center" prop="ztze" />
|
||||
<el-table-column label="所在区域" align="center" width="100" prop="ssgnq">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ ssgnqMap[scope.row.ssgnq] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="总用地面积（平方米）" align="center" width="100" prop="zydmj" />
|
||||
<el-table-column label="状态" align="center" width="100" prop="xzfl">
|
||||
<template slot-scope="scope">
|
||||
<span :style="{ color: xzflColors[xzflMap[scope.row.xzfl]] }">{{
|
||||
xzflMap[scope.row.xzfl] }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { xmlist } from '@/api/ManageApi'
|
||||
import { getBasicInformationPage } from "@/api/ManageApi/index";
|
||||
import { checkPermi, checkRole } from "@/utils/permission";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
ssgnqMap:{
|
||||
1:'高贸区',
|
||||
2:'科创区',
|
||||
3:'度假区',
|
||||
4:'商务区',
|
||||
5:'苏相合作区'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getxmList();
|
||||
},
|
||||
methods: {
|
||||
async getxmList() {
|
||||
const response = await xmlist();
|
||||
if (response && response.code === 200 && response.data.records) {
|
||||
this.tableData = this.processData(response.data.records);
|
||||
}
|
||||
name: "TableContent",
|
||||
dicts: ["xzfl"],
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 选中数组
|
||||
ids: [],
|
||||
// 非单个禁用
|
||||
single: true,
|
||||
// 非多个禁用
|
||||
multiple: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
// 总条数
|
||||
total: 0,
|
||||
// 项目表格数据
|
||||
postList: [],
|
||||
// 状态颜色映射
|
||||
xzflColors: {
|
||||
'在建': '#6EDABE',
|
||||
'拟建': '#FFBF6B',
|
||||
'已建': '#2B62F1'
|
||||
},
|
||||
//状态文本映射
|
||||
ssgnqMap: {
|
||||
1: '高贸区',
|
||||
2: '科创区',
|
||||
3: '度假区',
|
||||
4: '商务区',
|
||||
5: '苏相合作区'
|
||||
},
|
||||
xzflMap: {
|
||||
1: '已建',
|
||||
2: '在建',
|
||||
3: '拟建'
|
||||
},
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
xzfl: '',
|
||||
name: '',
|
||||
xmfrdwxz: '',
|
||||
dateRange: '', // 日期范围
|
||||
status: ''
|
||||
},
|
||||
};
|
||||
},
|
||||
processData(data) {
|
||||
return data.map(item => ({
|
||||
name: item.name,
|
||||
ssgnq: this.getRegion(item.ssgnq),
|
||||
ztze: item.ztze,
|
||||
zydmj: item.zydmj || 0,
|
||||
status: this.getStatus(item.xzfl)
|
||||
}));
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
getStatus(xzfl) {
|
||||
switch (xzfl) {
|
||||
case 1:
|
||||
return '已建';
|
||||
case 2:
|
||||
return '在建';
|
||||
case 3:
|
||||
return '拟建';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
},
|
||||
getRegion(ssgnq) {
|
||||
return this.ssgnqMap[ssgnq] || '未知区域';
|
||||
methods: {
|
||||
checkPermi,
|
||||
checkRole,
|
||||
/** 查询项目列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
|
||||
// 处理日期范围参数
|
||||
const params = {
|
||||
...this.queryParams,
|
||||
begainTime: this.queryParams.dateRange ? this.queryParams.dateRange[0] : undefined,
|
||||
endTime: this.queryParams.dateRange ? this.queryParams.dateRange[1] : undefined
|
||||
};
|
||||
|
||||
console.log('【查询参数】', params); // 打印查询参数
|
||||
|
||||
getBasicInformationPage(params).then((response) => {
|
||||
this.postList = response.data.records;
|
||||
this.total = response.data.total;
|
||||
this.loading = false;
|
||||
}).catch(error => {
|
||||
console.error('查询失败:', error);
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
handleSelectionChange(selection) {
|
||||
this.ids = selection.map(item => item.id);
|
||||
this.single = selection.length !== 1;
|
||||
this.multiple = !selection.length;
|
||||
},
|
||||
|
||||
/** 详情按钮操作 */
|
||||
getInfo(row, type) {
|
||||
this.$store.commit("SET_CRUMBS", this.$route.meta.title + "详情");
|
||||
const id = row.id || this.ids[0];
|
||||
this.$router.push({ path: `/manage-info/${id}`, query: { action: type } });
|
||||
},
|
||||
},
|
||||
getStatusColor(status) {
|
||||
switch (status) {
|
||||
case '在建':
|
||||
return 'color: #2DD29F;';
|
||||
case '拟建':
|
||||
return 'color: #F08445;';
|
||||
case '已建':
|
||||
return 'color: #2B62F1;';
|
||||
default:
|
||||
return 'color: #000000;';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.projectList {
|
||||
padding: 0 .5rem 0rem 0;
|
||||
height: 15rem;
|
||||
overflow-y: auto;
|
||||
.tablebox {
|
||||
background-color: #fff;
|
||||
border-radius: .5rem;
|
||||
margin: .5rem;
|
||||
}
|
||||
|
||||
.tablehead {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tablebtntwo {
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue