xuhongjie
parent
8156f91be1
commit
ac7ccff395
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="title">整体项目情况</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>项目总数</th>
|
||||
<th>建筑面积(万平方米)</th>
|
||||
<th>已建数量(个)</th>
|
||||
<th>在建数量(个)</th>
|
||||
<th>拟建数量(个)</th>
|
||||
<th style="visibility: hidden;">拟建数量(个)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ projectData.allProject }}</td>
|
||||
<td>{{ projectData.allGrossArea }}</td>
|
||||
<td>{{ projectData.allBuilding1 }}</td>
|
||||
<td>{{ projectData.allBuilding2 }}</td>
|
||||
<td>{{ projectData.allBuilding3 }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div>
|
||||
<div class="title">当年项目情况</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>新开工项目数</th>
|
||||
<th>建筑面积(万平方米)</th>
|
||||
<th>已建数量(个)</th>
|
||||
<th>在建数量(个)</th>
|
||||
<th style="visibility: hidden;">拟建数量(个)</th>
|
||||
<th style="visibility: hidden;">拟建数量(个)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>{{ currentYearData.currentYearProject }}</td>
|
||||
<td>{{ currentYearData.currentYearGrossArea }}</td>
|
||||
<td>{{ currentYearData.currentYearBuilding1 }}</td>
|
||||
<td>{{ currentYearData.currentBuilding2 || 0 }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { allproject } from '@/api/ManageApi';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
projectData: {
|
||||
allProject: 0, // 项目总数
|
||||
allGrossArea: 0, //建筑面积
|
||||
allBuilding1: 0, // 已建
|
||||
allBuilding2: 0, // 在建
|
||||
allBuilding3: 0 // 拟建
|
||||
},
|
||||
currentYearData: {
|
||||
currentYearProject: 0, //总数
|
||||
currentYearGrossArea: 0, //面积
|
||||
currentYearBuilding1: 0, //已建
|
||||
currentBuilding2: 0 //在建
|
||||
},
|
||||
loading: false,
|
||||
error: null
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.fetchProjectData();
|
||||
},
|
||||
methods: {
|
||||
async fetchProjectData() {
|
||||
this.loading = true;
|
||||
try {
|
||||
const response = await allproject();
|
||||
this.projectData = {
|
||||
allProject: response.data.allProject || 0,
|
||||
allGrossArea: response.data.allGrossArea || 0,
|
||||
allBuilding1: response.data.allBuilding1 || 0,
|
||||
allBuilding2: response.data.allBuilding2 || 0,
|
||||
allBuilding3: response.data.allBuilding3 || 0
|
||||
};
|
||||
this.currentYearData = {
|
||||
currentYearProject: response.data.currentYearProject || 0,
|
||||
currentYearGrossArea: response.data.currentYearGrossArea || 0,
|
||||
currentYearBuilding1: response.data.currentYearBuilding1 || 0,
|
||||
currentBuilding2: response.data.currentBuilding2 || 0
|
||||
};
|
||||
}
|
||||
finally {
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: none;
|
||||
padding: 8px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
th {
|
||||
width: 7rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
color: #3D424C;
|
||||
line-height: 1.69rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-bottom: .5rem;
|
||||
margin-left: .4rem;
|
||||
}
|
||||
|
||||
thead tr {
|
||||
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
||||
font-weight: 400;
|
||||
font-size: 0.88rem;
|
||||
color: #7B8599;
|
||||
line-height: 1.19rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
tbody tr {
|
||||
font-family: DIN, DIN;
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
color: #292C33;
|
||||
line-height: 2.11rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
</style>
|
||||
@ -1,74 +1,87 @@
|
||||
<template>
|
||||
<div>分析</div>
|
||||
</template><template>
|
||||
<div ref="chart" style="width: 30rem; height: 15rem;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
export default {
|
||||
name: 'RingChart',
|
||||
mounted() {
|
||||
this.renderChart();
|
||||
<!-- 投资主体 -->
|
||||
<div ref="chart" style="width: 30rem; height: 15rem;"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import * as echarts from 'echarts';
|
||||
import { investall } from '@/api/ManageApi/index';
|
||||
|
||||
export default {
|
||||
name: 'RingChart',
|
||||
data() {
|
||||
return {
|
||||
chartData: [
|
||||
{ value: 54, name: '国企', itemStyle: { color: '#36C3FB' } },
|
||||
{ value: 65, name: '民企', itemStyle: { color: '#5B76F9' } },
|
||||
{ value: 32, name: '外企', itemStyle: { color: '#FAC858' } },
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
const response = await investall();
|
||||
if (response && response.code === 200 && response.data) {
|
||||
this.chartData = this.processData(response.data);
|
||||
this.renderChart();
|
||||
} else {}
|
||||
},
|
||||
methods: {
|
||||
renderChart() {
|
||||
const chartDom = this.$refs.chart;
|
||||
const myChart = echarts.init(chartDom);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical', // 图例垂直排列
|
||||
right: '10%', // 图例在右侧
|
||||
top: 'center', // 图例垂直居中
|
||||
itemGap: 40, //右侧间隔
|
||||
formatter: function (name) {
|
||||
// 自定义图例显示格式
|
||||
const data = [
|
||||
{ value: 54, name: '国企' },
|
||||
{ value: 65, name: '民企' },
|
||||
{ value: 32, name: '外企' },
|
||||
];
|
||||
// 文本标签
|
||||
const item = data.find(item => item.name === name);
|
||||
return `${name} ${item.value}个`;
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '项目分布',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center: ['30%', '50%'],
|
||||
data: [
|
||||
{ value: 54, name: '国企' , itemStyle:{color:'#36C3FB'}},
|
||||
{ value: 65, name: '民企' , itemStyle:{color:'#5B76F9'} },
|
||||
{ value: 32, name: '外企' , itemStyle:{color:'#FAC858'} },
|
||||
],
|
||||
label: {
|
||||
show: false // 隐藏饼图内部的标签
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
processData(data) {
|
||||
const names = ['国企', '民企', '外企'];
|
||||
const counts = data.map(item => item.count);
|
||||
return names.map((name, index) => ({
|
||||
value: counts[index] || 0,
|
||||
name: name,
|
||||
itemStyle: { color: ['#36C3FB', '#5B76F9', '#FAC858'][index] },
|
||||
}));
|
||||
},
|
||||
renderChart() {
|
||||
const chartDom = this.$refs.chart;
|
||||
const myChart = echarts.init(chartDom);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical', // 图例垂直排列
|
||||
right: '10%', // 图例在右侧
|
||||
top: 'center', // 图例垂直居中
|
||||
itemGap: 40, // 右侧间隔
|
||||
formatter: function (name) {
|
||||
// 自定义图例显示格式
|
||||
const item = this.chartData.find(item => item.name === name);
|
||||
return `${name} ${item.value}个`;
|
||||
}.bind(this)
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '项目分布',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center: ['30%', '50%'],
|
||||
data: this.chartData,
|
||||
label: {
|
||||
show: false // 隐藏标签
|
||||
},
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
myChart.setOption(option);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 你可以在这里添加样式 */
|
||||
</style>
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<el-table :data="tableData" style="width: 100%" :show-header="false">
|
||||
<el-table-column width="80">
|
||||
<template slot-scope="scope">
|
||||
<img :src="getIcon(scope.$index)" alt="icon" style="width: 2.19rem; height: 1.25rem;">
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" width="300">
|
||||
</el-table-column>
|
||||
<el-table-column prop="date" width="100">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAllMessagestwo } from '@/api/ManageApi/index';
|
||||
|
||||
export default {
|
||||
name: 'MessageTable',
|
||||
data() {
|
||||
return {
|
||||
tableData: []
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
async getData() {
|
||||
const response = await getAllMessagestwo();
|
||||
if (response && response.code === 200 && response.data) {
|
||||
this.tableData = this.processData(response.data);
|
||||
}
|
||||
},
|
||||
processData(data) {
|
||||
return data.map(item => ({
|
||||
name: item.content,
|
||||
date: this.formatDate(item.createTime)
|
||||
}));
|
||||
},
|
||||
getIcon(index) {
|
||||
return index === 0 ? require('@/assets/images/new@2x.png') : require('@/assets/images/other.png');
|
||||
},
|
||||
formatDate(dateString) {
|
||||
const date = new Date(dateString);
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
width: 30rem;
|
||||
height: 14.5rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,99 +1,96 @@
|
||||
<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="address"
|
||||
label="所在区域">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="data"
|
||||
label='总投资额(万元)'
|
||||
width="88"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="data"
|
||||
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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
tableData: [
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: '大众电脑生成制造基地',
|
||||
address: '高贸区',
|
||||
data: '1000',
|
||||
status: '在建'
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: '大众电脑生成制造基地',
|
||||
address: ' 科创区',
|
||||
data: '1500',
|
||||
status: '拟建'
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: '大众电脑生成制造基地',
|
||||
address: ' 度假区',
|
||||
data: '2000',
|
||||
status: '已建'
|
||||
},
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: '大众电脑生成制造基地',
|
||||
address: ' 苏相合作区',
|
||||
data: '2500',
|
||||
status: '在建'
|
||||
}
|
||||
],
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { xmlist } from '@/api/ManageApi'
|
||||
|
||||
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);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getStatusColor(status) {
|
||||
switch (status) {
|
||||
case '在建':
|
||||
return 'color: #2DD29F;';
|
||||
case '拟建':
|
||||
return 'color: #F08445;';
|
||||
case '已建':
|
||||
return 'color: #2B62F1;';
|
||||
}
|
||||
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)
|
||||
}));
|
||||
},
|
||||
getStatus(xzfl) {
|
||||
switch (xzfl) {
|
||||
case 1:
|
||||
return '已建';
|
||||
case 2:
|
||||
return '在建';
|
||||
case 3:
|
||||
return '拟建';
|
||||
default:
|
||||
return '未知';
|
||||
}
|
||||
},
|
||||
getRegion(ssgnq) {
|
||||
return this.ssgnqMap[ssgnq] || '未知区域';
|
||||
},
|
||||
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;
|
||||
}
|
||||
|
||||
</style>
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.projectList {
|
||||
padding: 0 .5rem 0rem 0;
|
||||
height: 15rem;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue