|
|
<template>
|
|
|
<div class="container">
|
|
|
<!-- 顶部信息 -->
|
|
|
<div class="containertop">
|
|
|
<div class="topleft">
|
|
|
<img src="../../../assets/images/detailsicon/1.png" alt="">
|
|
|
<span>项目画像</span>
|
|
|
</div>
|
|
|
<div class="topright" style="visibility: hidden;">
|
|
|
<el-button type="primary" size="medium" plain>
|
|
|
编辑
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 内容区 -->
|
|
|
<div class="content">
|
|
|
<div class="picturediv">
|
|
|
<div ref="chart" style="width: 38rem; height: 28rem;"></div>
|
|
|
</div>
|
|
|
<div class="descriptionsdiv">
|
|
|
<div class="tablehead">
|
|
|
<img src="@/assets/images/icon-pjdj@2x.png" alt="">
|
|
|
<span>评价等级：</span>
|
|
|
<span style="margin-top: .3rem;"></span>
|
|
|
</div>
|
|
|
<div class="tablebody">
|
|
|
<div class="table-container">
|
|
|
<div class="table-column">
|
|
|
<div class="table-header">评价要素</div>
|
|
|
<div v-for="(description, index) in descriptionData" :key="index" class="table-row">
|
|
|
{{ description.ysmc }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="table-column">
|
|
|
<div class="table-header">评价排名</div>
|
|
|
<div v-for="(description, index) in descriptionData" :key="index" class="table-row">
|
|
|
{{ description.pjpm }} /{{ description.count }}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import * as echarts from 'echarts';
|
|
|
import { getpicture, getpicturelist } from '@/api/ManageApi/index'; // 确保路径正确
|
|
|
|
|
|
export default {
|
|
|
props: {
|
|
|
size: {
|
|
|
type: String,
|
|
|
default: ''
|
|
|
},
|
|
|
id: {
|
|
|
type: Number,
|
|
|
default: 0
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
evaluations: [],
|
|
|
radarData: {
|
|
|
project: [],
|
|
|
median: []
|
|
|
},
|
|
|
maxValues: {},
|
|
|
descriptionData: []
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.fetchData();
|
|
|
this.fetchDescriptionData();
|
|
|
},
|
|
|
methods: {
|
|
|
fetchData() {
|
|
|
if (this.id) {
|
|
|
getpicture(this.id)
|
|
|
.then(response => {
|
|
|
this.processData(response.data);
|
|
|
this.initChart();
|
|
|
})
|
|
|
.catch(error => {
|
|
|
console.error('获取项目画像失败:', error);
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
fetchDescriptionData() {
|
|
|
if (this.id) {
|
|
|
getpicturelist(this.id)
|
|
|
.then(response => {
|
|
|
this.processDescriptionData(response.data);
|
|
|
})
|
|
|
.catch(error => {
|
|
|
console.error('获取项目画像解释说明失败:', error);
|
|
|
});
|
|
|
}
|
|
|
},
|
|
|
processData(data) {
|
|
|
const projectData = [];
|
|
|
const medianData = [];
|
|
|
const evaluations = [];
|
|
|
const maxValues = {};
|
|
|
|
|
|
// 创建一个映射来存储每个要素的数据
|
|
|
const elementMap = {};
|
|
|
|
|
|
data.forEach(item => {
|
|
|
item.list.forEach(subItem => {
|
|
|
const element = subItem.ysmc;
|
|
|
const value = parseFloat(subItem.pjpm);
|
|
|
|
|
|
if (!elementMap[element]) {
|
|
|
elementMap[element] = {
|
|
|
max: null,
|
|
|
project: null,
|
|
|
median: null
|
|
|
};
|
|
|
}
|
|
|
|
|
|
if (item.type === 1) { // 最大值
|
|
|
elementMap[element].max = value;
|
|
|
} else if (item.type === 2) { // 本项目
|
|
|
elementMap[element].project = value;
|
|
|
} else if (item.type === 3) { // 中位数
|
|
|
elementMap[element].median = value;
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
// 填充 evaluations 数组
|
|
|
for (const element in elementMap) {
|
|
|
const data = elementMap[element];
|
|
|
evaluations.push({
|
|
|
element: element,
|
|
|
ranking: data.project // 假设 pjpm 是排名
|
|
|
});
|
|
|
projectData.push(data.project);
|
|
|
medianData.push(data.median);
|
|
|
maxValues[element] = data.max;
|
|
|
}
|
|
|
|
|
|
this.evaluations = evaluations;
|
|
|
this.radarData.project = projectData;
|
|
|
this.radarData.median = medianData;
|
|
|
this.maxValues = maxValues;
|
|
|
},
|
|
|
processDescriptionData(data) {
|
|
|
// 处理雷达图解释说明的数据
|
|
|
// 假设 data 是一个数组，包含解释说明的信息
|
|
|
this.descriptionData = data;
|
|
|
},
|
|
|
initChart() {
|
|
|
const chartDom = this.$refs.chart;
|
|
|
const myChart = echarts.init(chartDom);
|
|
|
|
|
|
const option = {
|
|
|
legend: {
|
|
|
data: ['本项目', '中位数'],
|
|
|
top: '0%',
|
|
|
},
|
|
|
radar: {
|
|
|
center: ['50%', '55%'],
|
|
|
indicator: this.evaluations.map(evaluation => ({
|
|
|
name: evaluation.element,
|
|
|
max: this.maxValues[evaluation.element] || 65000 // 根据实际情况调整 max 值
|
|
|
}))
|
|
|
},
|
|
|
series: [
|
|
|
{
|
|
|
name: 'Budget vs spending',
|
|
|
type: 'radar',
|
|
|
data: [
|
|
|
{
|
|
|
value: this.radarData.project,
|
|
|
name: '本项目',
|
|
|
itemStyle: {
|
|
|
color: '#2B62F1' // 自定义线条颜色
|
|
|
},
|
|
|
areaStyle: {
|
|
|
color: {
|
|
|
type: 'linear',
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
colorStops: [{
|
|
|
offset: 0, color: 'rgba(43, 98, 241, 0.3)' // 阴影起始颜色
|
|
|
}, {
|
|
|
offset: 1, color: 'rgba(43, 98, 241, 0)' // 阴影结束颜色
|
|
|
}]
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
{
|
|
|
value: this.radarData.median,
|
|
|
name: '中位数',
|
|
|
itemStyle: {
|
|
|
color: '#FF9900' // 自定义线条颜色
|
|
|
},
|
|
|
areaStyle: {
|
|
|
color: {
|
|
|
type: 'linear',
|
|
|
x: 0,
|
|
|
y: 0,
|
|
|
x2: 0,
|
|
|
y2: 1,
|
|
|
colorStops: [{
|
|
|
offset: 0, color: 'rgba(255, 153, 0, 0.3)' // 阴影起始颜色
|
|
|
}, {
|
|
|
offset: 1, color: 'rgba(255, 153, 0, 0)' // 阴影结束颜色
|
|
|
}]
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
]
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
|
|
|
myChart.setOption(option);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
.container {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
width: 100%;
|
|
|
background-color: #FFFFFF;
|
|
|
box-shadow: 0rem 0.13rem 0.63rem 0rem rgba(177, 177, 177, 0.1);
|
|
|
border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
padding: 1rem;
|
|
|
display: flex;
|
|
|
}
|
|
|
|
|
|
.containertop {
|
|
|
height: auto;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
padding: .7rem 0;
|
|
|
padding: .5rem;
|
|
|
border-bottom: 1px solid #E5E5E5;
|
|
|
}
|
|
|
|
|
|
.topleft {
|
|
|
width: 8rem;
|
|
|
display: flex;
|
|
|
gap: 0.4rem;
|
|
|
align-items: center;
|
|
|
}
|
|
|
|
|
|
.topleft img {
|
|
|
width: 0.81rem;
|
|
|
height: 0.81rem;
|
|
|
}
|
|
|
|
|
|
.topleft span {
|
|
|
width: auto;
|
|
|
height: 0.88rem;
|
|
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
|
|
font-weight: 500;
|
|
|
font-size: 0.88rem;
|
|
|
color: #3D424C;
|
|
|
line-height: 0.88rem;
|
|
|
text-align: right;
|
|
|
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;
|
|
|
}
|
|
|
|
|
|
.tablebody {
|
|
|
margin-top: 2rem;
|
|
|
}
|
|
|
|
|
|
.table-container {
|
|
|
display: flex;
|
|
|
width: 100%;
|
|
|
}
|
|
|
|
|
|
.table-column {
|
|
|
flex: 1;
|
|
|
}
|
|
|
|
|
|
.table-header {
|
|
|
font-weight: bold;
|
|
|
text-align: center;
|
|
|
background-color: #F2F4F7;
|
|
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
|
|
font-weight: 600;
|
|
|
font-size: 0.88rem;
|
|
|
color: #3D3D3D;
|
|
|
line-height: 2.19rem;
|
|
|
text-align: center;
|
|
|
font-style: normal;
|
|
|
text-transform: none;
|
|
|
padding: .3rem 0;
|
|
|
}
|
|
|
|
|
|
.table-row {
|
|
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
|
|
font-weight: 400;
|
|
|
font-size: 0.88rem;
|
|
|
color: #3D424C;
|
|
|
line-height: 2.56rem;
|
|
|
text-align: center;
|
|
|
font-style: normal;
|
|
|
text-transform: none;
|
|
|
padding: .3rem 0;
|
|
|
}
|
|
|
|
|
|
.tablehead {
|
|
|
width: auto;
|
|
|
height: 2.38rem;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: .3rem;
|
|
|
}
|
|
|
|
|
|
.tablehead img {
|
|
|
width: 1.13rem;
|
|
|
height: 1.13rem;
|
|
|
}
|
|
|
</style> |
