parent
cd2ecc1ef5
commit
d77fa4b624
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<div class="chart-container">
|
||||
<!-- 自定义标题 -->
|
||||
<div class="custom-title">项目投资趋势</div>
|
||||
|
||||
<!-- 筛选区域 -->
|
||||
<div class="filter-bar">
|
||||
<!-- 年份 -->
|
||||
<el-date-picker v-model="years" type="year" value-format="yyyy" placeholder="选择年份"
|
||||
@change="fetchData"></el-date-picker>
|
||||
|
||||
<!-- 年度/季度 -->
|
||||
<el-select v-model="type" placeholder="选择类型" @change="fetchData">
|
||||
<el-option label="年度统计" :value="1"></el-option>
|
||||
<el-option label="季度统计" :value="2"></el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<!-- 折线图容器 -->
|
||||
<div ref="lineChart" style="width: 110%; height: 400px;"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import { fetchInvestmentData } from '@/api/ManageApi/index';
|
||||
|
||||
export default {
|
||||
name: 'YueDuTouZi',
|
||||
props: {
|
||||
xmId: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null,
|
||||
type: 1,
|
||||
years: new Date().getFullYear().toString(),
|
||||
chartOption: {
|
||||
grid: {
|
||||
left: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: ['月投资额', '月投资比例', '累计投资额']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: []
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '月投资额',
|
||||
type: 'line',
|
||||
data: [],
|
||||
smooth: true,
|
||||
itemStyle: { color: '#4CAF50' }
|
||||
},
|
||||
{
|
||||
name: '累计投资额',
|
||||
type: 'line',
|
||||
data: [],
|
||||
smooth: true,
|
||||
itemStyle: { color: '#2B62F1' }
|
||||
|
||||
},
|
||||
{
|
||||
name: '月投资比例',
|
||||
type: 'line',
|
||||
data: [],
|
||||
smooth: true,
|
||||
itemStyle: { color: '#FF9800' }
|
||||
}
|
||||
]
|
||||
}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.initChart();
|
||||
this.fetchData();
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.lineChart);
|
||||
this.chart.setOption(this.chartOption);
|
||||
},
|
||||
async fetchData() {
|
||||
try {
|
||||
const params = {
|
||||
xmId: this.xmId,
|
||||
type: this.type
|
||||
};
|
||||
|
||||
if (this.years) {
|
||||
params.years = this.years;
|
||||
}
|
||||
|
||||
const res = await fetchInvestmentData(params);
|
||||
|
||||
if (res.code === 200 && Array.isArray(res.data)) {
|
||||
let categories = [];
|
||||
let seriesData = [];
|
||||
|
||||
if (this.type === 1) {
|
||||
// 年度模式
|
||||
const months = Array.from({ length: 12 }, (_, i) => `${i + 1}月`);
|
||||
const dataMap = res.data.reduce((acc, item) => {
|
||||
const month = item.month ? parseInt(item.month.split('-')[1]) : -1;
|
||||
if (month >= 1 && month <= 12) {
|
||||
acc[month] = item;
|
||||
}
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
categories = months;
|
||||
|
||||
const ytzeData = months.map((_, index) => dataMap[index + 1]?.ytze ?? 0);
|
||||
const ljtzeData = months.map((_, index) => dataMap[index + 1]?.ljtze ?? 0);
|
||||
const ytzblData = months.map((_, index) => dataMap[index + 1]?.ytzbl ?? 0);
|
||||
|
||||
seriesData = [
|
||||
{ name: '月投资额', type: 'line', data: ytzeData, itemStyle: { color: '#4CAF50' } },
|
||||
{ name: '累计投资额', type: 'line', data: ljtzeData, itemStyle: { color: '#2B62F1' } },
|
||||
{ name: '月投资比例', type: 'line', data: ytzblData, itemStyle: { color: '#FF9800' } }
|
||||
];
|
||||
} else if (this.type === 2) {
|
||||
// 季度模式
|
||||
const quarters = ['第一季度', '第二季度', '第三季度', '第四季度'];
|
||||
const dataMap = {};
|
||||
|
||||
res.data.forEach(item => {
|
||||
if (item.jd >= 1 && item.jd <= 4) {
|
||||
dataMap[item.jd] = item;
|
||||
}
|
||||
});
|
||||
|
||||
categories = quarters;
|
||||
const jdtzeData = quarters.map((_, idx) => dataMap[idx + 1]?.jdtze ?? 0);
|
||||
|
||||
seriesData = [
|
||||
{ name: '季度投资额', type: 'line', data: jdtzeData, itemStyle: { color: '#2B62F1' } }
|
||||
];
|
||||
}
|
||||
|
||||
this.chart.setOption({
|
||||
grid: {
|
||||
left: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
legend: {
|
||||
data: this.type === 1 ? ['月投资额', '累计投资额', '月投资比例'] : ['季度投资额']
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: categories
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: seriesData
|
||||
}, true);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取投资数据失败:', error);
|
||||
this.$message.error('获取数据失败');
|
||||
}
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.chart-container {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.custom-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.filter-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 97%;
|
||||
justify-content: flex-end;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
</style>
|
||||
@ -1,259 +1,258 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<!-- 1 -->
|
||||
<div class="dashboard-row">
|
||||
<div class="dashboard-col wide">
|
||||
<div class="allarea">
|
||||
<AllArea @year-change="handleYearChange" />
|
||||
</div>
|
||||
<!-- 正式的统计页面 -->
|
||||
<div class="dashboard-container">
|
||||
<!-- 1 -->
|
||||
<div class="dashboard-row">
|
||||
<div class="dashboard-col wide">
|
||||
<div class="allarea">
|
||||
<AllArea @year-change="handleYearChange" />
|
||||
</div>
|
||||
<div class="dashboard-col narrow">
|
||||
<div class="itemhead">
|
||||
<span>消息通知</span>
|
||||
</div>
|
||||
<div class="mainarea">
|
||||
<Message />
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-col narrow">
|
||||
<div class="itemhead">
|
||||
<span>消息通知</span>
|
||||
</div>
|
||||
<div class="mainarea">
|
||||
<Message />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2区-->
|
||||
<div class="dashboard-rowtwo">
|
||||
<div class="dashboard-col wide bgcicon">
|
||||
<MapArea />
|
||||
</div>
|
||||
|
||||
<!-- 2区-->
|
||||
<div class="dashboard-rowtwo">
|
||||
<div class="dashboard-col wide bgcicon">
|
||||
<MapArea />
|
||||
</div>
|
||||
<div class="dashboard-col narrow">
|
||||
<div class="itemhead" style="margin: .5rem 0 0 0;">
|
||||
<span>功能区</span>
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<FunctionArea :years="years" />
|
||||
</div>
|
||||
<div class="dashboard-col narrow">
|
||||
<div class="itemhead" style="margin: .5rem 0 0 0;">
|
||||
<span>功能区</span>
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<FunctionArea :years="years" />
|
||||
</div>
|
||||
|
||||
<div class="itemhead" style="margin: 0;">
|
||||
<span>投资主体</span>
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<InvestArea :years="years" />
|
||||
</div>
|
||||
|
||||
<div class="itemhead" style="margin: 0;">
|
||||
<span>投资主体</span>
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<InvestArea :years="years" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3 -->
|
||||
<div class="dashboard-row">
|
||||
<div class="dashboard-col">
|
||||
<div class="itemhead">
|
||||
<span>产业数据分析</span>
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<Cyeshuju />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3 -->
|
||||
<div class="dashboard-row">
|
||||
<div class="dashboard-col">
|
||||
<div class="itemhead">
|
||||
<span>产业数据分析</span>
|
||||
</div>
|
||||
<div class="dashboard-col">
|
||||
<div class="itemhead">
|
||||
<span>产业导向目录分析</span>
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<Cydxml />
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<Cyeshuju />
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-col">
|
||||
<div class="itemhead">
|
||||
<span>产业导向目录分析</span>
|
||||
</div>
|
||||
<div class="dashboard-col">
|
||||
<div class="itemhead">
|
||||
<span>产业导向细分产业分析</span>
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<Cydxxfgl />
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<Cydxml />
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-col" style="height: 11rem;">
|
||||
<div class="itemhead">
|
||||
<span>产业导向细分产业分析</span>
|
||||
</div>
|
||||
<div class="relaitem" style="height: 9rem;">
|
||||
<Cydxxfgl />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AllArea from '@/views/components/analysis/all.vue'
|
||||
import FunctionArea from '@/views/components/analysis/function.vue'
|
||||
import InvestArea from '@/views/components/analysis/invest.vue'
|
||||
import Message from '@/views/components/analysis/message.vue'
|
||||
import ProjectList from '@/views/components/analysis/projectList.vue'
|
||||
import MapArea from '@/views/components/analysis/map.vue'
|
||||
import Cyeshuju from '@/views/components/analysis/chanyeshuju.vue'
|
||||
import Cydxml from '@/views/components/analysis/chanyedxml.vue'
|
||||
import Cydxxfgl from '@/views/components/analysis/chanyexfgl.vue'
|
||||
import { investall, fungong } from '@/api/ManageApi/index'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AllArea,
|
||||
FunctionArea,
|
||||
InvestArea,
|
||||
Message,
|
||||
ProjectList,
|
||||
MapArea,
|
||||
Cyeshuju,
|
||||
Cydxml,
|
||||
Cydxxfgl
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AllArea from '@/views/components/analysis/all.vue'
|
||||
import FunctionArea from '@/views/components/analysis/function.vue'
|
||||
import InvestArea from '@/views/components/analysis/invest.vue'
|
||||
import Message from '@/views/components/analysis/message.vue'
|
||||
import ProjectList from '@/views/components/analysis/projectList.vue'
|
||||
import MapArea from '@/views/components/analysis/map.vue'
|
||||
import Cyeshuju from '@/views/components/analysis/chanyeshuju.vue'
|
||||
import Cydxml from '@/views/components/analysis/chanyedxml.vue'
|
||||
import Cydxxfgl from '@/views/components/analysis/chanyexfgl.vue'
|
||||
import { investall, fungong } from '@/api/ManageApi/index'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AllArea,
|
||||
FunctionArea,
|
||||
InvestArea,
|
||||
Message,
|
||||
ProjectList,
|
||||
MapArea,
|
||||
Cyeshuju,
|
||||
Cydxml,
|
||||
Cydxxfgl
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
years: new Date().getFullYear().toString(),
|
||||
allnumber: {
|
||||
touzinumber: 0
|
||||
},
|
||||
functionnumber: {
|
||||
functionnumber: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleYearChange(years) {
|
||||
this.years = years;
|
||||
console.log("index.vue: handleYearChange called with years:", years);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
years: new Date().getFullYear().toString(),
|
||||
allnumber: {
|
||||
touzinumber: 0
|
||||
},
|
||||
functionnumber: {
|
||||
functionnumber: 0
|
||||
}
|
||||
};
|
||||
async getData() {
|
||||
const response = await investall();
|
||||
if (response && response.data) {
|
||||
const totalCount = response.data.reduce((sum, item) => sum + item.count, 0);
|
||||
this.allnumber = {
|
||||
touzinumber: totalCount
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleYearChange(years) {
|
||||
this.years = years;
|
||||
console.log("index.vue: handleYearChange called with years:", years);
|
||||
},
|
||||
async getData() {
|
||||
const response = await investall();
|
||||
if (response && response.data) {
|
||||
const totalCount = response.data.reduce((sum, item) => sum + item.count, 0);
|
||||
this.allnumber = {
|
||||
touzinumber: totalCount
|
||||
};
|
||||
}
|
||||
},
|
||||
async getfuncdata() {
|
||||
const response2 = await fungong();
|
||||
if (response2 && response2.data) {
|
||||
const totalCount2 = response2.data.reduce(
|
||||
(sum, item) => sum + item.count, 0
|
||||
);
|
||||
this.functionnumber = {
|
||||
functionnumber: totalCount2
|
||||
}
|
||||
async getfuncdata() {
|
||||
const response2 = await fungong();
|
||||
if (response2 && response2.data) {
|
||||
const totalCount2 = response2.data.reduce(
|
||||
(sum, item) => sum + item.count, 0
|
||||
);
|
||||
this.functionnumber = {
|
||||
functionnumber: totalCount2
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
this.getfuncdata();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dashboard-row {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 0.5rem;
|
||||
|
||||
}
|
||||
|
||||
.dashboard-rowtwo {
|
||||
display: flex;
|
||||
height: auto;
|
||||
gap: 0.5rem;
|
||||
|
||||
}
|
||||
|
||||
.dashboard-col {
|
||||
flex: 1;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dashboard-col.wide {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.dashboard-col.narrow {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.itemhead {
|
||||
width: 100%;
|
||||
border-left: 0.25rem solid #2B62F1;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
height: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.relaitem {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.itemsall {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 33%;
|
||||
left: 23%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.itemsall span:nth-child(1) {
|
||||
font-family: DINbold;
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
color: #292C33;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.itemsall span:nth-child(2) {
|
||||
font-family: alibold;
|
||||
font-weight: 400;
|
||||
font-size: 0.68rem;
|
||||
color: #9E9E9E;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.itemhead span {
|
||||
margin-left: 1rem;
|
||||
font-family: alibold;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: #3D424C;
|
||||
line-height: 1.69rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.mainarea {
|
||||
flex: 1;
|
||||
padding: 0 0 0 .5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.allarea {
|
||||
flex: 1;
|
||||
padding: 0rem 1rem 0 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bgcicon {
|
||||
padding: 0 !important;
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
this.getfuncdata();
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dashboard-row {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 0.5rem;
|
||||
|
||||
}
|
||||
|
||||
.dashboard-rowtwo {
|
||||
display: flex;
|
||||
height: auto;
|
||||
gap: 0.5rem;
|
||||
|
||||
}
|
||||
|
||||
.dashboard-col {
|
||||
flex: 1;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dashboard-col.wide {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.dashboard-col.narrow {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.itemhead {
|
||||
width: 100%;
|
||||
border-left: 0.25rem solid #2B62F1;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
height: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.relaitem {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.itemsall {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 33%;
|
||||
left: 23%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.itemsall span:nth-child(1) {
|
||||
font-family: DINbold;
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
color: #292C33;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.itemsall span:nth-child(2) {
|
||||
font-family: alibold;
|
||||
font-weight: 400;
|
||||
font-size: 0.68rem;
|
||||
color: #9E9E9E;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.itemhead span {
|
||||
margin-left: 1rem;
|
||||
font-family: alibold;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: #3D424C;
|
||||
line-height: 1.69rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.mainarea {
|
||||
flex: 1;
|
||||
padding: 0 0 0 .5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.allarea {
|
||||
flex: 1;
|
||||
padding: 0rem 1rem 0 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bgcicon {
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@ -1,295 +1,296 @@
|
||||
<template>
|
||||
<div class="dashboard-container">
|
||||
<!-- 1 -->
|
||||
<div class="dashboard-row">
|
||||
<div class="dashboard-col wide">
|
||||
<div class="allarea">
|
||||
<AllArea @year-change="handleYearChange" />
|
||||
</div>
|
||||
<!-- 这是测试的页面 -->
|
||||
<div class="dashboard-container">
|
||||
<!-- 1 -->
|
||||
<div class="dashboard-row">
|
||||
<div class="dashboard-col wide">
|
||||
<div class="allarea">
|
||||
<AllArea @year-change="handleYearChange" />
|
||||
</div>
|
||||
<div class="dashboard-col narrow">
|
||||
<div class="itemhead">
|
||||
<span>消息通知</span>
|
||||
</div>
|
||||
<div class="mainarea">
|
||||
<Message />
|
||||
</div>
|
||||
</div>
|
||||
<div class="dashboard-col narrow">
|
||||
<div class="itemhead">
|
||||
<span>消息通知</span>
|
||||
</div>
|
||||
<div class="mainarea">
|
||||
<Message />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2区-->
|
||||
<div class="dashboard-rowtwo">
|
||||
<div class="dashboard-col wide bgcicon">
|
||||
<MapArea />
|
||||
</div>
|
||||
<div class="dashboard-col narrow">
|
||||
<div class="itemhead" style="margin: .5rem 0 0 0;">
|
||||
<span>功能区</span>
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<FunctionArea :years="years" />
|
||||
</div>
|
||||
|
||||
<div class="itemhead" style="margin: 0;">
|
||||
<span>投资主体</span>
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<InvestArea :years="years" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3 -->
|
||||
<div class="dashboard-row">
|
||||
<div class="dashboard-col">
|
||||
<div class="itemhead">
|
||||
<span>产业数据分析</span>
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<Cyeshuju />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2区-->
|
||||
<div class="dashboard-rowtwo">
|
||||
<div class="dashboard-col wide bgcicon">
|
||||
<MapArea />
|
||||
<div class="dashboard-col">
|
||||
<div class="itemhead">
|
||||
<span>产业导向目录分析</span>
|
||||
</div>
|
||||
<div class="dashboard-col narrow">
|
||||
<div class="itemhead" style="margin: .5rem 0 0 0;">
|
||||
<span>功能区</span>
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<FunctionArea :years="years" />
|
||||
</div>
|
||||
|
||||
<div class="itemhead" style="margin: 0;">
|
||||
<span>投资主体</span>
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<InvestArea :years="years" />
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<Cydxml />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3 -->
|
||||
<div class="dashboard-row">
|
||||
<div class="dashboard-col">
|
||||
<div class="itemhead">
|
||||
<span>产业数据分析</span>
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<Cyeshuju />
|
||||
</div>
|
||||
<div class="dashboard-col" style="height: 11rem;">
|
||||
<div class="itemhead">
|
||||
<!-- <span>产业导向细分产业分析</span> -->
|
||||
<span>年度任务完成情况</span>
|
||||
</div>
|
||||
<div class="relaitem" style="height: 9rem;">
|
||||
<!-- <Cydxxfgl /> -->
|
||||
<Ndwcqk />
|
||||
</div>
|
||||
<div class="dashboard-col">
|
||||
<div class="itemhead">
|
||||
<span>产业导向目录分析</span>
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<Cydxml />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4 -->
|
||||
<div class="dashboard-row">
|
||||
<div class="dashboard-col">
|
||||
<div class="itemhead">
|
||||
<span>储备项目统计分析</span>
|
||||
</div>
|
||||
<div class="dashboard-col" style="height: 11rem;">
|
||||
<div class="itemhead">
|
||||
<!-- <span>产业导向细分产业分析</span> -->
|
||||
<span>年度任务完成情况</span>
|
||||
</div>
|
||||
<div class="relaitem" style="height: 9rem;">
|
||||
<!-- <Cydxxfgl /> -->
|
||||
<Ndwcqk />
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<Cbxm />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4 -->
|
||||
<div class="dashboard-row">
|
||||
<div class="dashboard-col">
|
||||
<div class="itemhead">
|
||||
<span>储备项目统计分析</span>
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<Cbxm />
|
||||
</div>
|
||||
<div class="dashboard-col">
|
||||
<div class="itemhead">
|
||||
<span>产业导向细分产业分析</span>
|
||||
<!-- <span>年度任务完成情况</span> -->
|
||||
</div>
|
||||
<div class="dashboard-col">
|
||||
<div class="itemhead">
|
||||
<span>产业导向细分产业分析</span>
|
||||
<!-- <span>年度任务完成情况</span> -->
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<Cydxxfgl />
|
||||
<!-- <Ndwcqk /> -->
|
||||
</div>
|
||||
<div class="relaitem">
|
||||
<Cydxxfgl />
|
||||
<!-- <Ndwcqk /> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AllArea from '@/views/components/analysis/all.vue'
|
||||
import FunctionArea from '@/views/components/analysis/function.vue'
|
||||
import InvestArea from '@/views/components/analysis/invest.vue'
|
||||
import Message from '@/views/components/analysis/message.vue'
|
||||
import ProjectList from '@/views/components/analysis/projectList.vue'
|
||||
import MapArea from '@/views/components/analysis/map.vue'
|
||||
import Cyeshuju from '@/views/components/analysis/chanyeshuju.vue'
|
||||
import Cydxml from '@/views/components/analysis/chanyedxml.vue'
|
||||
import Cydxxfgl from '@/views/components/analysis/chanyexfgl.vue'
|
||||
import Cbxm from '@/views/components/analysis/chubeixm.vue'
|
||||
import Ndwcqk from '@/views/components/analysis/ndwcqk.vue'
|
||||
import { investall, fungong } from '@/api/ManageApi/index'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AllArea,
|
||||
FunctionArea,
|
||||
InvestArea,
|
||||
Message,
|
||||
ProjectList,
|
||||
MapArea,
|
||||
Cyeshuju,
|
||||
Cydxml,
|
||||
Cydxxfgl,
|
||||
Cbxm,
|
||||
Ndwcqk
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AllArea from '@/views/components/analysis/all.vue'
|
||||
import FunctionArea from '@/views/components/analysis/function.vue'
|
||||
import InvestArea from '@/views/components/analysis/invest.vue'
|
||||
import Message from '@/views/components/analysis/message.vue'
|
||||
import ProjectList from '@/views/components/analysis/projectList.vue'
|
||||
import MapArea from '@/views/components/analysis/map.vue'
|
||||
import Cyeshuju from '@/views/components/analysis/chanyeshuju.vue'
|
||||
import Cydxml from '@/views/components/analysis/chanyedxml.vue'
|
||||
import Cydxxfgl from '@/views/components/analysis/chanyexfgl.vue'
|
||||
import Cbxm from '@/views/components/analysis/chubeixm.vue'
|
||||
import Ndwcqk from '@/views/components/analysis/ndwcqk.vue'
|
||||
import { investall, fungong } from '@/api/ManageApi/index'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
AllArea,
|
||||
FunctionArea,
|
||||
InvestArea,
|
||||
Message,
|
||||
ProjectList,
|
||||
MapArea,
|
||||
Cyeshuju,
|
||||
Cydxml,
|
||||
Cydxxfgl,
|
||||
Cbxm,
|
||||
Ndwcqk
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
years: new Date().getFullYear().toString(),
|
||||
allnumber: {
|
||||
touzinumber: 0
|
||||
},
|
||||
functionnumber: {
|
||||
functionnumber: 0
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleYearChange(years) {
|
||||
this.years = years;
|
||||
console.log("index.vue: handleYearChange called with years:", years);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
years: new Date().getFullYear().toString(),
|
||||
allnumber: {
|
||||
touzinumber: 0
|
||||
},
|
||||
functionnumber: {
|
||||
functionnumber: 0
|
||||
}
|
||||
};
|
||||
async getData() {
|
||||
const response = await investall();
|
||||
if (response && response.data) {
|
||||
const totalCount = response.data.reduce((sum, item) => sum + item.count, 0);
|
||||
this.allnumber = {
|
||||
touzinumber: totalCount
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleYearChange(years) {
|
||||
this.years = years;
|
||||
console.log("index.vue: handleYearChange called with years:", years);
|
||||
},
|
||||
async getData() {
|
||||
const response = await investall();
|
||||
if (response && response.data) {
|
||||
const totalCount = response.data.reduce((sum, item) => sum + item.count, 0);
|
||||
this.allnumber = {
|
||||
touzinumber: totalCount
|
||||
};
|
||||
}
|
||||
},
|
||||
async getfuncdata() {
|
||||
const response2 = await fungong();
|
||||
if (response2 && response2.data) {
|
||||
const totalCount2 = response2.data.reduce(
|
||||
(sum, item) => sum + item.count, 0
|
||||
);
|
||||
this.functionnumber = {
|
||||
functionnumber: totalCount2
|
||||
}
|
||||
async getfuncdata() {
|
||||
const response2 = await fungong();
|
||||
if (response2 && response2.data) {
|
||||
const totalCount2 = response2.data.reduce(
|
||||
(sum, item) => sum + item.count, 0
|
||||
);
|
||||
this.functionnumber = {
|
||||
functionnumber: totalCount2
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
this.getfuncdata();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dashboard-row {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 0.5rem;
|
||||
|
||||
}
|
||||
|
||||
.dashboard-rowtwo {
|
||||
display: flex;
|
||||
height: auto;
|
||||
gap: 0.5rem;
|
||||
|
||||
}
|
||||
|
||||
.dashboard-col {
|
||||
flex: 1;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dashboard-col.wide {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.dashboard-col.narrow {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.itemhead {
|
||||
width: 100%;
|
||||
border-left: 0.25rem solid #2B62F1;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
height: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.top {
|
||||
width: auto;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
font-size: 0.88rem;
|
||||
color: gray!important;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
this.getfuncdata();
|
||||
}
|
||||
|
||||
.relaitem {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.itemsall {
|
||||
position: absolute;
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.dashboard-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 0.5rem;
|
||||
gap: 0.5rem;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dashboard-row {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 0.5rem;
|
||||
|
||||
}
|
||||
|
||||
.dashboard-rowtwo {
|
||||
display: flex;
|
||||
height: auto;
|
||||
gap: 0.5rem;
|
||||
|
||||
}
|
||||
|
||||
.dashboard-col {
|
||||
flex: 1;
|
||||
background-color: #FFFFFF;
|
||||
border-radius: 0.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dashboard-col.wide {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
.dashboard-col.narrow {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.itemhead {
|
||||
width: 100%;
|
||||
border-left: 0.25rem solid #2B62F1;
|
||||
margin: 0.5rem 0;
|
||||
margin: 0.5rem 0;
|
||||
height: 1.25rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.top {
|
||||
width: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 33%;
|
||||
left: 23%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.itemsall span:nth-child(1) {
|
||||
font-family: DINbold;
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
color: #292C33;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.itemsall span:nth-child(2) {
|
||||
font-family: alibold;
|
||||
font-weight: 400;
|
||||
font-size: 0.68rem;
|
||||
color: #9E9E9E;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.itemhead span {
|
||||
margin-left: 1rem;
|
||||
font-family: alibold;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: #3D424C;
|
||||
line-height: 1.69rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.mainarea {
|
||||
flex: 1;
|
||||
padding: 0 0 0 .5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.allarea {
|
||||
flex: 1;
|
||||
padding: 0rem 1rem 0 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bgcicon {
|
||||
padding: 0 !important;
|
||||
margin-bottom: 10px;
|
||||
font-size: 0.88rem;
|
||||
color: gray!important;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
.relaitem {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.itemsall {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
top: 33%;
|
||||
left: 23%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.itemsall span:nth-child(1) {
|
||||
font-family: DINbold;
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
color: #292C33;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.itemsall span:nth-child(2) {
|
||||
font-family: alibold;
|
||||
font-weight: 400;
|
||||
font-size: 0.68rem;
|
||||
color: #9E9E9E;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.itemhead span {
|
||||
margin-left: 1rem;
|
||||
font-family: alibold;
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: #3D424C;
|
||||
line-height: 1.69rem;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
.mainarea {
|
||||
flex: 1;
|
||||
padding: 0 0 0 .5rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.allarea {
|
||||
flex: 1;
|
||||
padding: 0rem 1rem 0 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.bgcicon {
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue