功能区和投资主体

main
严飞永 1 week ago
parent c98e5dd1a8
commit 0a4113e2ba

@ -672,18 +672,20 @@ export function allinformation(params){
} }
// //投资主体 // //投资主体
export function investall() { export function investall(params) {
return request({ return request({
url: '/gysl/zwStats/investors', url: '/gysl/zwStats/investors',
method: 'get' method: 'get',
params
}) })
} }
// 功能区 // 功能区
export function fungong(){ export function fungong(params){
return request({ return request({
url:'/gysl/zwStats/ribbon', url:'/gysl/zwStats/ribbon',
method:'get' method:'get',
params
}) })
} }

@ -171,7 +171,7 @@ export default {
form: { form: {
...this.qyrzInfo ...this.qyrzInfo
}, },
tableData: [], // tableData: [],
pagination: { pagination: {
currentPage: 1, currentPage: 1,
pageSize: 10, pageSize: 10,
@ -192,7 +192,7 @@ export default {
}; };
}, },
created() { created() {
this.fetchTableData(); // this.fetchTableData();
}, },
methods: { methods: {
async fetchTableData() { async fetchTableData() {
@ -202,21 +202,19 @@ export default {
this.tableData = response.data.records.map(item => ({ ...item, isEditing: false })); this.tableData = response.data.records.map(item => ({ ...item, isEditing: false }));
this.pagination.total = response.data.total; this.pagination.total = response.data.total;
// form.rzqys // form.rzqys
this.form.rzqys = this.tableData.length; this.form.rzqys = this.tableData.length;
this.$emit('update-data', { ...this.form }); // this.$emit('update-data', { ...this.form });
} catch (error) { } catch (error) {}
console.error('获取数据失败:', error);
}
} }
}, },
watch: { watch: {
qyrzInfo: { qyrzInfo: {
handler(newVal) { handler(newVal) {
// tableData rzqys // tableData rzqys
this.form = { this.form = {
...newVal, ...newVal,
rzqys: this.tableData.length // 使 rzqys rzqys: this.tableData.length //rzqys
}; };
}, },
immediate: true, immediate: true,
@ -232,12 +230,10 @@ export default {
size: this.pagination.pageSize size: this.pagination.pageSize
}; };
return getqyBasicInformationPage(params).then(response => { return getqyBasicInformationPage(params).then(response => {
// console.log('Fetched Data:', response.data.records);
this.tableData = response.data.records.map(item => ({ this.tableData = response.data.records.map(item => ({
...item, ...item,
isEditing: false isEditing: false
})); }));
// console.log('Table Data:', this.tableData);
this.pagination.total = response.data.total; this.pagination.total = response.data.total;
}).catch(); }).catch();
}, },
@ -270,7 +266,6 @@ export default {
updateqyBasicInformation(row).then(response => { updateqyBasicInformation(row).then(response => {
this.$modal.msgSuccess('保存成功'); this.$modal.msgSuccess('保存成功');
}).catch(error => { }).catch(error => {
console.error('保存失败:', error);
this.$modal.msgError('保存失败'); this.$modal.msgError('保存失败');
}); });
}, },
@ -279,15 +274,11 @@ export default {
deleteqyBasicInformation([id]).then(response => { deleteqyBasicInformation([id]).then(response => {
this.$modal.msgSuccess('删除成功'); this.$modal.msgSuccess('删除成功');
this.tableData.splice(index, 1); this.tableData.splice(index, 1);
//
this.fetchTableData().then(() => { this.fetchTableData().then(() => {
// form
this.form.rzqys = this.tableData.length; this.form.rzqys = this.tableData.length;
// save
this.save(); this.save();
}); });
}).catch(error => { }).catch(error => {
console.error('删除失败:', error);
this.$modal.msgError('删除失败'); this.$modal.msgError('删除失败');
}); });
}, },
@ -331,7 +322,7 @@ export default {
this.$modal.msgWarning("请先选择文件"); this.$modal.msgWarning("请先选择文件");
return; return;
} }
// xmId // xmId
const formData = new FormData(); const formData = new FormData();
formData.append('file', this.$refs.upload.uploadFiles[0].raw); formData.append('file', this.$refs.upload.uploadFiles[0].raw);
formData.append('xmId', this.upload.data.xmId); formData.append('xmId', this.upload.data.xmId);

@ -39,8 +39,6 @@ import 'mars2d/mars2d.css';
import * as mars2d from 'mars2d'; import * as mars2d from 'mars2d';
import axios from 'axios'; import axios from 'axios';
const attributionHtml = `©2024 高德软件- <span>审图号GS(2021)6375号</span>
- 甲测资字11111093 - <a href="https://map.amap.com/doc/serviceitem.html" target="_blank" trace="tos">服务条款</a> `
export default { export default {
data() { data() {
@ -163,7 +161,6 @@ export default {
this.$message.warning('未能获取详细地址信息'); this.$message.warning('未能获取详细地址信息');
} }
}).catch(error => { }).catch(error => {
console.error('逆地理编码失败:', error);
this.$message.error('获取地址信息失败'); this.$message.error('获取地址信息失败');
}).finally(() => { }).finally(() => {
this.loadingAddress = false; this.loadingAddress = false;

@ -137,6 +137,7 @@ export default {
if (year) { if (year) {
this.selectedYear = year; this.selectedYear = year;
this.fetchProjectData(); this.fetchProjectData();
this.$emit('year-change', this.selectedYear); //
} }
}, },

@ -1,12 +1,11 @@
<template> <template>
<!-- 功能区 --> <!-- 功能区 -->
<div style="width: 100%;height: 100%;"> <div style="width: 100%; height: 100%;">
<div class="itemsall"> <div class="itemsall">
<span>{{ functionnumber }}</span> <span>{{ functionnumber }}</span>
<span>项目总数</span> <span>项目总数</span>
</div> </div>
<div ref="chart" style="width: 30rem; height: 100%;"> <div ref="chart" style="width: 30rem; height: 100%;"></div>
</div>
</div> </div>
</template> </template>
@ -16,6 +15,12 @@ import { fungong } from '@/api/ManageApi/index';
export default { export default {
name: 'FunctionChart', name: 'FunctionChart',
props: {
years: {
type: String,
default: new Date().getFullYear().toString()
}
},
data() { data() {
return { return {
functionnumber: 0, functionnumber: 0,
@ -30,18 +35,33 @@ export default {
}, },
mounted() { mounted() {
this.getData(); this.getData();
console.log("function.vue: mounted with years:", this.years); //
},
watch: {
years: {
immediate: true,
handler(newVal) {
console.log("function.vue: years changed to:", newVal); //
this.getData();
}
}
}, },
methods: { methods: {
async getData() { async getData() {
console.log("function.vue: getData called with years:", this.years); //
try { try {
const response = await fungong(); const response = await fungong({ years: this.years });
if (response && response.code === 200 && response.data) { if (response && response.code === 200 && response.data) {
const totalnumber = response.data.reduce((sum, item) => sum + item.count, 0); const totalnumber = response.data.reduce((sum, item) => sum + item.count, 0);
this.functionnumber = totalnumber; this.functionnumber = totalnumber;
this.chartData = this.processData(response.data); this.chartData = this.processData(response.data);
this.renderChart(); this.renderChart();
} else { } } else {
} catch (error) { } console.error("function.vue: 获取数据失败:", response); //
}
} catch (error) {
console.error("function.vue: 请求失败:", error); //
}
}, },
processData(data) { processData(data) {
const names = ['高端制造与国际贸易区', '独墅湖科教创新区', '阳澄湖半岛旅游度假区', '金鸡湖商务区', '苏相合作区']; const names = ['高端制造与国际贸易区', '独墅湖科教创新区', '阳澄湖半岛旅游度假区', '金鸡湖商务区', '苏相合作区'];

@ -1,6 +1,6 @@
<template> <template>
<!-- 投资主体 --> <!-- 投资主体 -->
<div style="width: 100%;height: 100%;"> <div style="width: 100%; height: 100%;">
<div class="itemsall"> <div class="itemsall">
<span>{{ functionnumber }}</span> <span>{{ functionnumber }}</span>
<span>项目总数</span> <span>项目总数</span>
@ -10,15 +10,20 @@
</template> </template>
<script> <script>
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { investall } from '@/api/ManageApi/index'; import { investall } from '@/api/ManageApi/index';
export default { export default {
name: 'RingChart', name: 'RingChart',
props: {
years: {
type: String,
default: new Date().getFullYear().toString()
}
},
data() { data() {
return { return {
functionnumber:0, functionnumber: 0,
chartData: [ chartData: [
{ value: 54, name: '国企', itemStyle: { color: '#36C3FB' } }, { value: 54, name: '国企', itemStyle: { color: '#36C3FB' } },
{ value: 65, name: '民企', itemStyle: { color: '#5B76F9' } }, { value: 65, name: '民企', itemStyle: { color: '#5B76F9' } },
@ -29,17 +34,31 @@ export default {
}, },
mounted() { mounted() {
this.getData(); this.getData();
console.log("invest.vue: mounted with years:", this.years); //
},
watch: {
years: {
immediate: true,
handler(newVal) {
console.log("invest.vue: years changed to:", newVal); //
this.getData();
}
}
}, },
methods: { methods: {
async getData() { async getData() {
const response = await investall(); console.log("invest.vue: getData called with years:", this.years); //
const response = await investall({
years: this.years,
});
if (response && response.code === 200 && response.data) { if (response && response.code === 200 && response.data) {
const totalCount = response.data.reduce((sum, item) => sum + item.count, 0); const totalCount = response.data.reduce((sum, item) => sum + item.count, 0);
this.functionnumber = totalCount; this.functionnumber = totalCount;
this.chartData = this.processData(response.data); this.chartData = this.processData(response.data);
this.renderChart(); this.renderChart();
} else {
} else {} console.error("invest.vue: 获取数据失败:", response); //
}
}, },
processData(data) { processData(data) {
const names = ['国企', '民企', '外企', '其他']; const names = ['国企', '民企', '外企', '其他'];
@ -47,7 +66,7 @@ export default {
return names.map((name, index) => ({ return names.map((name, index) => ({
value: counts[index] || 0, value: counts[index] || 0,
name: name, name: name,
itemStyle: { color: ['#36C3FB', '#5B76F9', '#FAC858'][index] }, itemStyle: { color: ['#36C3FB', '#5B76F9', '#FAC858', '#50DFB3'][index] },
})); }));
}, },
renderChart() { renderChart() {
@ -58,12 +77,11 @@ export default {
trigger: 'item' trigger: 'item'
}, },
legend: { legend: {
orient: 'vertical', // orient: 'vertical',
right: '18.5%', // right: '18.5%',
top: 'center', // top: 'center',
itemGap: 18, // itemGap: 18,
formatter: function (name) { formatter: function (name) {
//
const item = this.chartData.find(item => item.name === name); const item = this.chartData.find(item => item.name === name);
return `${name} ${item.value}`; return `${name} ${item.value}`;
}.bind(this) }.bind(this)
@ -76,7 +94,7 @@ export default {
center: ['30%', '50%'], center: ['30%', '50%'],
data: this.chartData, data: this.chartData,
label: { label: {
show: false show: false
}, },
emphasis: { emphasis: {
itemStyle: { itemStyle: {

@ -4,7 +4,7 @@
<div class="dashboard-row"> <div class="dashboard-row">
<div class="dashboard-col wide"> <div class="dashboard-col wide">
<div class="allarea"> <div class="allarea">
<AllArea /> <AllArea @year-change="handleYearChange" />
</div> </div>
</div> </div>
<div class="dashboard-col narrow"> <div class="dashboard-col narrow">
@ -27,15 +27,14 @@
<span>功能区</span> <span>功能区</span>
</div> </div>
<div class="relaitem"> <div class="relaitem">
<FunctionArea :years="years" />
<FunctionArea />
</div> </div>
<div class="itemhead" style="margin: 0;"> <div class="itemhead" style="margin: 0;">
<span>投资主体</span> <span>投资主体</span>
</div> </div>
<div class="relaitem"> <div class="relaitem">
<InvestArea /> <InvestArea :years="years" />
</div> </div>
</div> </div>
</div> </div>
@ -96,6 +95,7 @@ export default {
}, },
data() { data() {
return { return {
years: new Date().getFullYear().toString(),
allnumber: { allnumber: {
touzinumber: 0 touzinumber: 0
}, },
@ -105,6 +105,10 @@ export default {
}; };
}, },
methods: { methods: {
handleYearChange(years) {
this.years = years;
console.log("index.vue: handleYearChange called with years:", years); //
},
async getData() { async getData() {
const response = await investall(); const response = await investall();
if (response && response.data) { if (response && response.data) {
@ -133,6 +137,7 @@ export default {
}; };
</script> </script>
<style scoped> <style scoped>
.dashboard-container { .dashboard-container {
display: flex; display: flex;
@ -147,25 +152,27 @@ export default {
.dashboard-row { .dashboard-row {
display: flex; display: flex;
flex: 1; flex: 1;
gap: 0.5rem; gap: 0.5rem;
} }
.dashboard-rowtwo{
.dashboard-rowtwo {
display: flex; display: flex;
flex: 3; flex: 3;
gap: 0.5rem; gap: 0.5rem;
flex-wrap: nowrap; flex-wrap: nowrap;
} }
.dashboard-col { .dashboard-col {
flex: 1; flex: 1;
background-color: #FFFFFF; background-color: #FFFFFF;
border-radius: 0.5rem; border-radius: 0.5rem;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
} }
.dashboard-col.wide { .dashboard-col.wide {
flex: 2; flex: 2;
} }
.dashboard-col.narrow { .dashboard-col.narrow {
@ -184,7 +191,7 @@ export default {
.relaitem { .relaitem {
flex: 1; flex: 1;
position: relative; position: relative;
} }
.itemsall { .itemsall {
@ -252,12 +259,12 @@ export default {
.dashboard-row { .dashboard-row {
flex-direction: column; flex-direction: column;
} }
.dashboard-col.wide, .dashboard-col.wide,
.dashboard-col.narrow { .dashboard-col.narrow {
flex: 1; flex: 1;
} }
.itemsall { .itemsall {
top: 2rem; top: 2rem;
left: 50%; left: 50%;

Loading…
Cancel
Save