修改
This commit is contained in:
@@ -6,7 +6,7 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="number">{{ item.targetValue }}</div>
|
<div class="number">{{ item.targetValue }}</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<div class="barTop">
|
<div class="barTop">
|
||||||
<div class="title">销售指标趋势</div>
|
<div class="title">销售指标趋势</div>
|
||||||
<div class="legend">
|
<div class="legend">
|
||||||
<span class="legend-item target">目标</span>
|
<span class="legend-item target">预算</span>
|
||||||
<span class="legend-item real">实际</span>
|
<span class="legend-item real">实际</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="button-group">
|
<div class="button-group">
|
||||||
@@ -97,7 +97,7 @@ export default {
|
|||||||
|
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
stack: 'Total',
|
stack: 'Total',
|
||||||
symbol: 'circle',
|
symbol: 'circle',
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<div class="barTop-left" style="display: flex;">
|
<div class="barTop-left" style="display: flex;">
|
||||||
<div class="title">财务指标趋势</div>
|
<div class="title">财务指标趋势</div>
|
||||||
<div class="legend">
|
<div class="legend">
|
||||||
<span class="legend-item target">目标</span>
|
<span class="legend-item target">预算</span>
|
||||||
<span class="legend-item real">实际</span>
|
<span class="legend-item real">实际</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -85,7 +85,7 @@ export default {
|
|||||||
|
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
symbol: 'circle',
|
symbol: 'circle',
|
||||||
symbolSize: 6,
|
symbolSize: 6,
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="number">{{ item.targetValue || 0 }}</div>
|
<div class="number">{{ item.targetValue || 0 }}</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
|
|||||||
@@ -102,7 +102,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0, // 左侧Y轴(万元)
|
yAxisIndex: 0, // 左侧Y轴(万元)
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
@@ -185,7 +185,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="number">{{ itemList[0].targetValue }}</div>
|
<div class="number">{{ itemList[0].targetValue }}</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
@@ -43,12 +43,12 @@
|
|||||||
<!-- 循环渲染剩余的item(从索引1开始) -->
|
<!-- 循环渲染剩余的item(从索引1开始) -->
|
||||||
<div class="item groupData" style="display: flex;padding: 0;" v-for="(item, index) in itemList.slice(1)"
|
<div class="item groupData" style="display: flex;padding: 0;" v-for="(item, index) in itemList.slice(1)"
|
||||||
:key="index">
|
:key="index">
|
||||||
<!-- 左侧目标值/实际值部分(不变) -->
|
<!-- 左侧预算值/实际值部分(不变) -->
|
||||||
<div class="left" style="display: flex;align-items: start;gap: 4px;padding: 12px 0 0 12px;">
|
<div class="left" style="display: flex;align-items: start;gap: 4px;padding: 12px 0 0 12px;">
|
||||||
<div class="groupName">{{ item.unit }}</div>
|
<div class="groupName">{{ item.unit }}</div>
|
||||||
<div class="left-target">
|
<div class="left-target">
|
||||||
<div class="number">{{ item.targetValue }}</div>
|
<div class="number">{{ item.targetValue }}</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="left-real">
|
<div class="left-real">
|
||||||
<div class="number" :style="{ color: getColor(item.currentValue, item.targetValue) }">
|
<div class="number" :style="{ color: getColor(item.currentValue, item.targetValue) }">
|
||||||
@@ -233,7 +233,7 @@ export default {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
// 颜色判断核心方法:实际值≥目标值返回绿色,否则返回橙色
|
// 颜色判断核心方法:实际值≥预算值返回绿色,否则返回橙色
|
||||||
getColor(currentValue, targetValue) {
|
getColor(currentValue, targetValue) {
|
||||||
return currentValue >= targetValue
|
return currentValue >= targetValue
|
||||||
? "rgba(98, 213, 180, 1)"
|
? "rgba(98, 213, 180, 1)"
|
||||||
@@ -344,7 +344,7 @@ export default {
|
|||||||
background-image: url("../../../assets/img/order-item-bg.png");
|
background-image: url("../../../assets/img/order-item-bg.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
// 实际值 >= 目标值:绿色背景图
|
// 实际值 >= 预算值:绿色背景图
|
||||||
.bg-green {
|
.bg-green {
|
||||||
background-image: url("../../../assets/img/order-item-greenbg.png");
|
background-image: url("../../../assets/img/order-item-greenbg.png");
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -75,7 +75,7 @@ export default {
|
|||||||
value: 0,
|
value: 0,
|
||||||
proportion: 0,
|
proportion: 0,
|
||||||
route: 'profitAnalysis',
|
route: 'profitAnalysis',
|
||||||
completed: 1 // 未达目标值,不达标
|
completed: 1 // 未达预算值,不达标
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "年度",
|
name: "年度",
|
||||||
@@ -83,7 +83,7 @@ export default {
|
|||||||
value: 0,
|
value: 0,
|
||||||
proportion: 0,
|
proportion: 0,
|
||||||
route: 'profitAnalysis',
|
route: 'profitAnalysis',
|
||||||
completed: 1 // 超出目标值,达标
|
completed: 1 // 超出预算值,达标
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<div class="legend">
|
<div class="legend">
|
||||||
<span class="legend-item-line">
|
<span class="legend-item-line">
|
||||||
<span class="line target"></span>
|
<span class="line target"></span>
|
||||||
目标
|
预算
|
||||||
</span>
|
</span>
|
||||||
<span class="legend-item-line">
|
<span class="legend-item-line">
|
||||||
<span class="line real"></span>
|
<span class="line real"></span>
|
||||||
@@ -187,7 +187,7 @@ export default {
|
|||||||
data: realData // 使用提取出的 "实际" 数据
|
data: realData // 使用提取出的 "实际" 数据
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
// stack: 'Total',
|
// stack: 'Total',
|
||||||
symbol: 'circle',
|
symbol: 'circle',
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="number">{{ item.targetValue || 0 }}</div>
|
<div class="number">{{ item.targetValue || 0 }}</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="number">{{ item.targetValue ||0 }}</div>
|
<div class="number">{{ item.targetValue ||0 }}</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
|
|||||||
@@ -113,7 +113,7 @@ export default {
|
|||||||
symbolSize: 6
|
symbolSize: 6
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
barWidth: 18,
|
barWidth: 18,
|
||||||
|
|||||||
@@ -78,7 +78,7 @@ export default {
|
|||||||
return PlaceNames.map(place => {
|
return PlaceNames.map(place => {
|
||||||
const targetItem = dataSource.find(item => item.name === place);
|
const targetItem = dataSource.find(item => item.name === place);
|
||||||
return {
|
return {
|
||||||
targetValue: targetItem?.[`${field}Target`] || 0, // 对应指标的目标值字段(如 profitTarget)
|
targetValue: targetItem?.[`${field}Target`] || 0, // 对应指标的预算值字段(如 profitTarget)
|
||||||
value: targetItem?.[field] || 0, // 对应指标的实际值
|
value: targetItem?.[field] || 0, // 对应指标的实际值
|
||||||
proportion: (targetItem?.[`${field}Proportion`] || 0), // 对应指标的占比(转百分比)
|
proportion: (targetItem?.[`${field}Proportion`] || 0), // 对应指标的占比(转百分比)
|
||||||
completed: targetItem?.[`${field}Completed`] ?? 0 // 状态字段(复用分公司的 completed)
|
completed: targetItem?.[`${field}Completed`] ?? 0 // 状态字段(复用分公司的 completed)
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="number">{{ item.targetValue || 0 }}</div>
|
<div class="number">{{ item.targetValue || 0 }}</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="number">{{ item.target }}</div>
|
<div class="number">{{ item.target }}</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
@@ -132,7 +132,7 @@ export default {
|
|||||||
getColor(index) {
|
getColor(index) {
|
||||||
const { actual, target, progress } = this.itemList[index];
|
const { actual, target, progress } = this.itemList[index];
|
||||||
|
|
||||||
// 新增条件:如果实际值、目标值和进度都为0,则显示绿色
|
// 新增条件:如果实际值、预算值和进度都为0,则显示绿色
|
||||||
if (actual === 0 && target === 0 && progress === 0) {
|
if (actual === 0 && target === 0 && progress === 0) {
|
||||||
return "rgba(98, 213, 180, 1)"; // 绿色
|
return "rgba(98, 213, 180, 1)"; // 绿色
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -7,7 +7,7 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="number"> {{ item.targetValue || 0 }}</div>
|
<div class="number"> {{ item.targetValue || 0 }}</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<!-- 实际值:使用当前item的flag判断颜色 -->
|
<!-- 实际值:使用当前item的flag判断颜色 -->
|
||||||
|
|||||||
@@ -137,7 +137,7 @@ export default {
|
|||||||
series: [
|
series: [
|
||||||
// 目标数据柱状图
|
// 目标数据柱状图
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
barWidth: 24,
|
barWidth: 24,
|
||||||
|
|||||||
@@ -183,7 +183,7 @@ export default {
|
|||||||
symbolSize: 6
|
symbolSize: 6
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -9,11 +9,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<!-- 目标值 + 分割线 + 实际值 -->
|
<!-- 预算值 + 分割线 + 实际值 -->
|
||||||
<div class="value-group">
|
<div class="value-group">
|
||||||
<div class="value-item">
|
<div class="value-item">
|
||||||
<div class="number">{{ item.targetValue || 0 }}</div>
|
<div class="number">{{ item.targetValue || 0 }}</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="middle-line"></div>
|
<div class="middle-line"></div>
|
||||||
<div class="value-item">
|
<div class="value-item">
|
||||||
|
|||||||
@@ -9,11 +9,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<!-- 目标值 + 分割线 + 实际值 -->
|
<!-- 预算值 + 分割线 + 实际值 -->
|
||||||
<div class="value-group">
|
<div class="value-group">
|
||||||
<div class="value-item">
|
<div class="value-item">
|
||||||
<div class="number">{{ item.value }}</div>
|
<div class="number">{{ item.value }}</div>
|
||||||
<!-- <div class="title">目标值</div> -->
|
<!-- <div class="title">预算值</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -130,7 +130,7 @@ export default {
|
|||||||
// 更新 ECharts 数据(包含 flag 字段)
|
// 更新 ECharts 数据(包含 flag 字段)
|
||||||
this.echartData = {
|
this.echartData = {
|
||||||
locations, // x轴:地名列表
|
locations, // x轴:地名列表
|
||||||
target, // 目标值数组
|
target, // 预算值数组
|
||||||
value, // 实际值数组
|
value, // 实际值数组
|
||||||
proportion,
|
proportion,
|
||||||
flag
|
flag
|
||||||
|
|||||||
@@ -9,11 +9,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<!-- 目标值 + 分割线 + 实际值 -->
|
<!-- 预算值 + 分割线 + 实际值 -->
|
||||||
<div class="value-group">
|
<div class="value-group">
|
||||||
<div class="value-item">
|
<div class="value-item">
|
||||||
<div class="number">{{ item.targetValue }}</div>
|
<div class="number">{{ item.targetValue }}</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="middle-line"></div>
|
<div class="middle-line"></div>
|
||||||
<div class="value-item">
|
<div class="value-item">
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
<div class="value-group">
|
<div class="value-group">
|
||||||
<div class="value-item">
|
<div class="value-item">
|
||||||
<div class="number" style="color: rgba(103, 103, 103, 0.79);">{{ item.target }}</div>
|
<div class="number" style="color: rgba(103, 103, 103, 0.79);">{{ item.target }}</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="middle-line"></div>
|
<div class="middle-line"></div>
|
||||||
<!-- 当前值数字:根据 flag 变色 -->
|
<!-- 当前值数字:根据 flag 变色 -->
|
||||||
|
|||||||
@@ -9,11 +9,11 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="item-content">
|
<div class="item-content">
|
||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<!-- 目标值 + 分割线 + 实际值 -->
|
<!-- 预算值 + 分割线 + 实际值 -->
|
||||||
<div class="value-group">
|
<div class="value-group">
|
||||||
<div class="value-item">
|
<div class="value-item">
|
||||||
<div class="number">{{ item.targetValue || 0 }}</div>
|
<div class="number">{{ item.targetValue || 0 }}</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="middle-line"></div>
|
<div class="middle-line"></div>
|
||||||
<div class="value-item">
|
<div class="value-item">
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="number">{{ item.targetValue }}</div>
|
<div class="number">{{ item.targetValue }}</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
|
|||||||
@@ -7,12 +7,12 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="number">16</div>
|
<div class="number">16</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="number">16</div>
|
<div class="number">16</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 进度条和百分比容器:横向排列 -->
|
<!-- 进度条和百分比容器:横向排列 -->
|
||||||
@@ -34,12 +34,12 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="number">16</div>
|
<div class="number">16</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="number">16</div>
|
<div class="number">16</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 进度条和百分比容器:横向排列 -->
|
<!-- 进度条和百分比容器:横向排列 -->
|
||||||
@@ -61,12 +61,12 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="number">16</div>
|
<div class="number">16</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="number">16</div>
|
<div class="number">16</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 进度条和百分比容器:横向排列 -->
|
<!-- 进度条和百分比容器:横向排列 -->
|
||||||
@@ -88,12 +88,12 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="number">16</div>
|
<div class="number">16</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="number">16</div>
|
<div class="number">16</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 进度条和百分比容器:横向排列 -->
|
<!-- 进度条和百分比容器:横向排列 -->
|
||||||
@@ -115,12 +115,12 @@
|
|||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<div class="number">16</div>
|
<div class="number">16</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="line"></div>
|
<div class="line"></div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<div class="number">16</div>
|
<div class="number">16</div>
|
||||||
<div class="title">目标值</div>
|
<div class="title">预算值</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- 进度条和百分比容器:横向排列 -->
|
<!-- 进度条和百分比容器:横向排列 -->
|
||||||
|
|||||||
@@ -95,10 +95,10 @@ export default {
|
|||||||
case 2: // 实际值:低~高
|
case 2: // 实际值:低~高
|
||||||
dataWithIndex.sort((a, b) => a.real - b.real);
|
dataWithIndex.sort((a, b) => a.real - b.real);
|
||||||
break;
|
break;
|
||||||
case 3: // 目标值:高~低
|
case 3: // 预算值:高~低
|
||||||
dataWithIndex.sort((a, b) => b.rate - a.rate);
|
dataWithIndex.sort((a, b) => b.rate - a.rate);
|
||||||
break;
|
break;
|
||||||
case 4: // 目标值:低~高
|
case 4: // 预算值:低~高
|
||||||
dataWithIndex.sort((a, b) => a.rate - b.rate);
|
dataWithIndex.sort((a, b) => a.rate - b.rate);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
|||||||
@@ -100,7 +100,7 @@ export default {
|
|||||||
this.groupData = this.monthData.group || { rate: 0, diff: 0, real: 0, target: 0 };
|
this.groupData = this.monthData.group || { rate: 0, diff: 0, real: 0, target: 0 };
|
||||||
|
|
||||||
// 集团各维度数据数组(单条数据,对应凯盛新能)
|
// 集团各维度数据数组(单条数据,对应凯盛新能)
|
||||||
const groupTarget = [this.groupData.target]; // 目标值数组
|
const groupTarget = [this.groupData.target]; // 预算值数组
|
||||||
const groupDiff = [this.groupData.diff]; // 差值数组
|
const groupDiff = [this.groupData.diff]; // 差值数组
|
||||||
const groupReal = [this.groupData.real]; // 实际值数组
|
const groupReal = [this.groupData.real]; // 实际值数组
|
||||||
const groupRate = [this.groupData.rate]; // 完成率数组
|
const groupRate = [this.groupData.rate]; // 完成率数组
|
||||||
@@ -133,7 +133,7 @@ export default {
|
|||||||
// 集团数据(对应凯盛新能)
|
// 集团数据(对应凯盛新能)
|
||||||
group: {
|
group: {
|
||||||
locations: ['凯盛新能'], // 集团名称
|
locations: ['凯盛新能'], // 集团名称
|
||||||
targets: groupTarget, // 集团目标值数组
|
targets: groupTarget, // 集团预算值数组
|
||||||
diff: groupDiff, // 集团差值数组
|
diff: groupDiff, // 集团差值数组
|
||||||
reals: groupReal, // 集团实际值数组
|
reals: groupReal, // 集团实际值数组
|
||||||
rate: groupRate, // 集团完成率数组
|
rate: groupRate, // 集团完成率数组
|
||||||
|
|||||||
@@ -95,7 +95,7 @@ export default {
|
|||||||
this.groupData = this.ytdData.group || { rate: 0, diff: 0, real: 0, target: 0 };
|
this.groupData = this.ytdData.group || { rate: 0, diff: 0, real: 0, target: 0 };
|
||||||
|
|
||||||
// 集团各维度数据数组(单条数据,对应凯盛新能)
|
// 集团各维度数据数组(单条数据,对应凯盛新能)
|
||||||
const groupTarget = [this.groupData.target]; // 目标值数组
|
const groupTarget = [this.groupData.target]; // 预算值数组
|
||||||
const groupDiff = [this.groupData.diff]; // 差值数组
|
const groupDiff = [this.groupData.diff]; // 差值数组
|
||||||
const groupReal = [this.groupData.real]; // 实际值数组
|
const groupReal = [this.groupData.real]; // 实际值数组
|
||||||
const groupRate = [this.groupData.rate]; // 完成率数组
|
const groupRate = [this.groupData.rate]; // 完成率数组
|
||||||
@@ -128,7 +128,7 @@ export default {
|
|||||||
// 集团数据(对应凯盛新能)
|
// 集团数据(对应凯盛新能)
|
||||||
group: {
|
group: {
|
||||||
locations: ['凯盛新能'], // 集团名称
|
locations: ['凯盛新能'], // 集团名称
|
||||||
targets: groupTarget, // 集团目标值数组
|
targets: groupTarget, // 集团预算值数组
|
||||||
diff: groupDiff, // 集团差值数组
|
diff: groupDiff, // 集团差值数组
|
||||||
reals: groupReal, // 集团实际值数组
|
reals: groupReal, // 集团实际值数组
|
||||||
rate: groupRate, // 集团完成率数组
|
rate: groupRate, // 集团完成率数组
|
||||||
|
|||||||
@@ -270,7 +270,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -145,7 +145,7 @@ export default {
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
offset: [-60, 25],
|
offset: [0, 25],
|
||||||
// 固定label尺寸:68px×20px
|
// 固定label尺寸:68px×20px
|
||||||
width: 68,
|
width: 68,
|
||||||
height: 20,
|
height: 20,
|
||||||
|
|||||||
@@ -1,6 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="dayReport" class="dayReport" :style="styles">
|
<div id="dayReport" class="dayReport" :style="styles">
|
||||||
<div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
|
|
||||||
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
|
<sidebar v-if="!sidebar.hide" class="sidebar-container" />
|
||||||
<ReportHeader :dateData="dateData" top-title="全成本分析" :is-full-screen="isFullScreen"
|
<ReportHeader :dateData="dateData" top-title="全成本分析" :is-full-screen="isFullScreen"
|
||||||
@screenfullChange="screenfullChange" @timeRangeChange="handleTimeChange" />
|
@screenfullChange="screenfullChange" @timeRangeChange="handleTimeChange" />
|
||||||
|
|||||||
@@ -76,7 +76,7 @@ export default {
|
|||||||
months: [], // 月份数组(x轴标签)
|
months: [], // 月份数组(x轴标签)
|
||||||
rates: [], // 完成率(completeRate)
|
rates: [], // 完成率(completeRate)
|
||||||
reals: [], // 实际值(real)
|
reals: [], // 实际值(real)
|
||||||
targets: [], // 目标值(target)
|
targets: [], // 预算值(target)
|
||||||
flags: [], // 达标状态
|
flags: [], // 达标状态
|
||||||
diffs:[]
|
diffs:[]
|
||||||
};
|
};
|
||||||
@@ -155,7 +155,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
@@ -171,7 +171,7 @@ export default {
|
|||||||
borderRadius: [4, 4, 0, 0],
|
borderRadius: [4, 4, 0, 0],
|
||||||
borderWidth: 0
|
borderWidth: 0
|
||||||
},
|
},
|
||||||
data: targets, // 动态目标值
|
data: targets, // 动态预算值
|
||||||
},
|
},
|
||||||
// 3. 实际(柱状图,含达标状态)
|
// 3. 实际(柱状图,含达标状态)
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -95,10 +95,10 @@ export default {
|
|||||||
case 2: // 实际值:低~高
|
case 2: // 实际值:低~高
|
||||||
dataWithIndex.sort((a, b) => a.real - b.real);
|
dataWithIndex.sort((a, b) => a.real - b.real);
|
||||||
break;
|
break;
|
||||||
case 3: // 目标值:高~低
|
case 3: // 预算值:高~低
|
||||||
dataWithIndex.sort((a, b) => b.rate - a.rate);
|
dataWithIndex.sort((a, b) => b.rate - a.rate);
|
||||||
break;
|
break;
|
||||||
case 4: // 目标值:低~高
|
case 4: // 预算值:低~高
|
||||||
dataWithIndex.sort((a, b) => a.rate - b.rate);
|
dataWithIndex.sort((a, b) => a.rate - b.rate);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
|||||||
@@ -153,7 +153,7 @@ export default {
|
|||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '万元',
|
name: '元/m2',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: 'rgba(0, 0, 0, 0.45)',
|
color: 'rgba(0, 0, 0, 0.45)',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
|||||||
@@ -111,7 +111,7 @@ export default {
|
|||||||
// 左侧Y轴:营业收入、成本(单位万元)
|
// 左侧Y轴:营业收入、成本(单位万元)
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '万元',
|
name: '元/m2',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: 'rgba(0, 0, 0, 0.45)',
|
color: 'rgba(0, 0, 0, 0.45)',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
|||||||
@@ -116,7 +116,7 @@ export default {
|
|||||||
// 3. 组装工厂chartData(格式与集团一致,适配子组件)
|
// 3. 组装工厂chartData(格式与集团一致,适配子组件)
|
||||||
this.chartData = {
|
this.chartData = {
|
||||||
locations: factoryKeys, // 工厂名称数组
|
locations: factoryKeys, // 工厂名称数组
|
||||||
targets: factoryDataList.map(item => item.target || 0), // 目标值
|
targets: factoryDataList.map(item => item.target || 0), // 预算值
|
||||||
diff: factoryDataList.map(item => item.diff || 0), // 差值
|
diff: factoryDataList.map(item => item.diff || 0), // 差值
|
||||||
reals: factoryDataList.map(item => item.real || 0), // 实际值
|
reals: factoryDataList.map(item => item.real || 0), // 实际值
|
||||||
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
|
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
|
||||||
|
|||||||
@@ -116,7 +116,7 @@ export default {
|
|||||||
// 3. 组装工厂chartData(格式与集团一致,适配子组件)
|
// 3. 组装工厂chartData(格式与集团一致,适配子组件)
|
||||||
this.chartData = {
|
this.chartData = {
|
||||||
locations: factoryKeys, // 工厂名称数组
|
locations: factoryKeys, // 工厂名称数组
|
||||||
targets: factoryDataList.map(item => item.target || 0), // 目标值
|
targets: factoryDataList.map(item => item.target || 0), // 预算值
|
||||||
diff: factoryDataList.map(item => item.diff || 0), // 差值
|
diff: factoryDataList.map(item => item.diff || 0), // 差值
|
||||||
reals: factoryDataList.map(item => item.real || 0), // 实际值
|
reals: factoryDataList.map(item => item.real || 0), // 实际值
|
||||||
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
|
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
|
||||||
|
|||||||
@@ -270,7 +270,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -107,7 +107,7 @@ export default {
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
offset: [-60, 25],
|
offset: [0, 25],
|
||||||
width: 68,
|
width: 68,
|
||||||
height: 20,
|
height: 20,
|
||||||
formatter: `{rate|${diffValue}}{text|差值}`,
|
formatter: `{rate|${diffValue}}{text|差值}`,
|
||||||
|
|||||||
@@ -262,7 +262,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -95,10 +95,10 @@ export default {
|
|||||||
case 2: // 实际值:低~高
|
case 2: // 实际值:低~高
|
||||||
dataWithIndex.sort((a, b) => a.real - b.real);
|
dataWithIndex.sort((a, b) => a.real - b.real);
|
||||||
break;
|
break;
|
||||||
case 3: // 目标值:高~低
|
case 3: // 预算值:高~低
|
||||||
dataWithIndex.sort((a, b) => b.rate - a.rate);
|
dataWithIndex.sort((a, b) => b.rate - a.rate);
|
||||||
break;
|
break;
|
||||||
case 4: // 目标值:低~高
|
case 4: // 预算值:低~高
|
||||||
dataWithIndex.sort((a, b) => a.rate - b.rate);
|
dataWithIndex.sort((a, b) => a.rate - b.rate);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
|||||||
@@ -153,7 +153,7 @@ export default {
|
|||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '万元',
|
name: '%',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: 'rgba(0, 0, 0, 0.45)',
|
color: 'rgba(0, 0, 0, 0.45)',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
|||||||
@@ -111,7 +111,7 @@ export default {
|
|||||||
// 左侧Y轴:营业收入、成本(单位万元)
|
// 左侧Y轴:营业收入、成本(单位万元)
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '万元',
|
name: '%',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: 'rgba(0, 0, 0, 0.45)',
|
color: 'rgba(0, 0, 0, 0.45)',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
|||||||
@@ -102,7 +102,7 @@ export default {
|
|||||||
this.groupData = this.monthData.group || { rate: 0, diff: 0, real: 0, target: 0 };
|
this.groupData = this.monthData.group || { rate: 0, diff: 0, real: 0, target: 0 };
|
||||||
|
|
||||||
// 集团各维度数据数组(单条数据,对应凯盛新能)
|
// 集团各维度数据数组(单条数据,对应凯盛新能)
|
||||||
const groupTarget = [this.groupData.target]; // 目标值数组
|
const groupTarget = [this.groupData.target]; // 预算值数组
|
||||||
const groupDiff = [this.groupData.diff]; // 差值数组
|
const groupDiff = [this.groupData.diff]; // 差值数组
|
||||||
const groupReal = [this.groupData.real]; // 实际值数组
|
const groupReal = [this.groupData.real]; // 实际值数组
|
||||||
const groupRate = [this.groupData.rate]; // 完成率数组
|
const groupRate = [this.groupData.rate]; // 完成率数组
|
||||||
@@ -135,7 +135,7 @@ export default {
|
|||||||
// 集团数据(对应凯盛新能)
|
// 集团数据(对应凯盛新能)
|
||||||
group: {
|
group: {
|
||||||
locations: ['凯盛新能'], // 集团名称
|
locations: ['凯盛新能'], // 集团名称
|
||||||
targets: groupTarget, // 集团目标值数组
|
targets: groupTarget, // 集团预算值数组
|
||||||
diff: groupDiff, // 集团差值数组
|
diff: groupDiff, // 集团差值数组
|
||||||
reals: groupReal, // 集团实际值数组
|
reals: groupReal, // 集团实际值数组
|
||||||
rate: groupRate, // 集团完成率数组
|
rate: groupRate, // 集团完成率数组
|
||||||
|
|||||||
@@ -97,7 +97,7 @@ export default {
|
|||||||
this.groupData = this.ytdData.group || { rate: 0, diff: 0, real: 0, target: 0 };
|
this.groupData = this.ytdData.group || { rate: 0, diff: 0, real: 0, target: 0 };
|
||||||
|
|
||||||
// 集团各维度数据数组(单条数据,对应凯盛新能)
|
// 集团各维度数据数组(单条数据,对应凯盛新能)
|
||||||
const groupTarget = [this.groupData.target]; // 目标值数组
|
const groupTarget = [this.groupData.target]; // 预算值数组
|
||||||
const groupDiff = [this.groupData.diff]; // 差值数组
|
const groupDiff = [this.groupData.diff]; // 差值数组
|
||||||
const groupReal = [this.groupData.real]; // 实际值数组
|
const groupReal = [this.groupData.real]; // 实际值数组
|
||||||
const groupRate = [this.groupData.rate]; // 完成率数组
|
const groupRate = [this.groupData.rate]; // 完成率数组
|
||||||
@@ -130,7 +130,7 @@ export default {
|
|||||||
// 集团数据(对应凯盛新能)
|
// 集团数据(对应凯盛新能)
|
||||||
group: {
|
group: {
|
||||||
locations: ['凯盛新能'], // 集团名称
|
locations: ['凯盛新能'], // 集团名称
|
||||||
targets: groupTarget, // 集团目标值数组
|
targets: groupTarget, // 集团预算值数组
|
||||||
diff: groupDiff, // 集团差值数组
|
diff: groupDiff, // 集团差值数组
|
||||||
reals: groupReal, // 集团实际值数组
|
reals: groupReal, // 集团实际值数组
|
||||||
rate: groupRate, // 集团完成率数组
|
rate: groupRate, // 集团完成率数组
|
||||||
|
|||||||
@@ -145,7 +145,7 @@ export default {
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
offset: [-60, 25],
|
offset: [0, 25],
|
||||||
// 固定label尺寸:68px×20px
|
// 固定label尺寸:68px×20px
|
||||||
width: 68,
|
width: 68,
|
||||||
height: 20,
|
height: 20,
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="dayReport" class="dayReport" :style="styles">
|
<div id="dayReport" class="dayReport" :style="styles">
|
||||||
|
<!-- <sidebar v-if="!sidebar.hide" class="sidebar-container" /> -->
|
||||||
<ReportHeader top-title="洛玻集团运营驾驶舱" :is-full-screen="isFullScreen" @screenfullChange="screenfullChange"
|
<ReportHeader top-title="洛玻集团运营驾驶舱" :is-full-screen="isFullScreen" @screenfullChange="screenfullChange"
|
||||||
@timeRangeChange="handleTimeChange" />
|
@timeRangeChange="handleTimeChange" />
|
||||||
<div class="main-body"
|
<div class="main-body"
|
||||||
@@ -11,7 +12,7 @@
|
|||||||
grid-template-columns: 560px 745px 560px ;
|
grid-template-columns: 560px 745px 560px ;
|
||||||
">
|
">
|
||||||
<coreSalesKPIs :sale="sale" :dateData="dateData" />
|
<coreSalesKPIs :sale="sale" :dateData="dateData" />
|
||||||
<financeCosts :finance="finance" :dateData="dateData" :cost="cost" />
|
<financeCosts :finance="finance" :dateData="dateData" :cost="cost" />
|
||||||
<keyProductionIndicators :productData="productData" :dateData="dateData" />
|
<keyProductionIndicators :productData="productData" :dateData="dateData" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -40,9 +41,10 @@ import orderProgress from './components/orderProgress.vue'
|
|||||||
import keyWork from './components/keyWork.vue'
|
import keyWork from './components/keyWork.vue'
|
||||||
// import moment from 'moment'
|
// import moment from 'moment'
|
||||||
import { getOperateCockpit, getOrderDetail } from '@/api/cockpit'
|
import { getOperateCockpit, getOrderDetail } from '@/api/cockpit'
|
||||||
|
import { Sidebar } from "../../layout/components";
|
||||||
export default {
|
export default {
|
||||||
name: 'DayReport',
|
name: 'DayReport',
|
||||||
components: { ReportHeader, coreSalesKPIs, keyProductionIndicators, coreBottomLeft, keyWork, orderProgress, financeCosts },
|
components: { ReportHeader, coreSalesKPIs, keyProductionIndicators, coreBottomLeft, keyWork, orderProgress, financeCosts, Sidebar },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
isFullScreen: false,
|
isFullScreen: false,
|
||||||
@@ -68,6 +70,25 @@ export default {
|
|||||||
this.windowWidth(document.documentElement.clientWidth)
|
this.windowWidth(document.documentElement.clientWidth)
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
// ...mapState({
|
||||||
|
// theme: (state) => state.settings.theme,
|
||||||
|
// sideTheme: (state) => state.settings.sideTheme,
|
||||||
|
// sidebar: (state) => state.app.sidebar,
|
||||||
|
// device: (state) => state.app.device,
|
||||||
|
// needTagsView: (state) => state.settings.tagsView,
|
||||||
|
// fixedHeader: (state) => state.settings.fixedHeader,
|
||||||
|
// }),
|
||||||
|
// classObj() {
|
||||||
|
// return {
|
||||||
|
// hideSidebar: !this.sidebar.opened,
|
||||||
|
// openSidebar: this.sidebar.opened,
|
||||||
|
// withoutAnimation: this.sidebar.withoutAnimation,
|
||||||
|
// mobile: this.device === "mobile",
|
||||||
|
// };
|
||||||
|
// },
|
||||||
|
// variables() {
|
||||||
|
// return variables;
|
||||||
|
// },
|
||||||
// ...mapGetters(['sidebar']),
|
// ...mapGetters(['sidebar']),
|
||||||
styles() {
|
styles() {
|
||||||
const v = Math.floor(this.value * this.beilv * 100) / 10000
|
const v = Math.floor(this.value * this.beilv * 100) / 10000
|
||||||
|
|||||||
@@ -95,10 +95,10 @@ export default {
|
|||||||
case 2: // 实际值:低~高
|
case 2: // 实际值:低~高
|
||||||
dataWithIndex.sort((a, b) => a.real - b.real);
|
dataWithIndex.sort((a, b) => a.real - b.real);
|
||||||
break;
|
break;
|
||||||
case 3: // 目标值:高~低
|
case 3: // 预算值:高~低
|
||||||
dataWithIndex.sort((a, b) => b.rate - a.rate);
|
dataWithIndex.sort((a, b) => b.rate - a.rate);
|
||||||
break;
|
break;
|
||||||
case 4: // 目标值:低~高
|
case 4: // 预算值:低~高
|
||||||
dataWithIndex.sort((a, b) => a.rate - b.rate);
|
dataWithIndex.sort((a, b) => a.rate - b.rate);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
|||||||
@@ -153,7 +153,7 @@ export default {
|
|||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '万元',
|
name: '%',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: 'rgba(0, 0, 0, 0.45)',
|
color: 'rgba(0, 0, 0, 0.45)',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
|||||||
@@ -111,7 +111,7 @@ export default {
|
|||||||
// 左侧Y轴:营业收入、成本(单位万元)
|
// 左侧Y轴:营业收入、成本(单位万元)
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '万元',
|
name: '%',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: 'rgba(0, 0, 0, 0.45)',
|
color: 'rgba(0, 0, 0, 0.45)',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
|||||||
@@ -102,7 +102,7 @@ export default {
|
|||||||
this.groupData = this.monthData.group || { rate: 0, diff: 0, real: 0, target: 0 };
|
this.groupData = this.monthData.group || { rate: 0, diff: 0, real: 0, target: 0 };
|
||||||
|
|
||||||
// 集团各维度数据数组(单条数据,对应凯盛新能)
|
// 集团各维度数据数组(单条数据,对应凯盛新能)
|
||||||
const groupTarget = [this.groupData.target]; // 目标值数组
|
const groupTarget = [this.groupData.target]; // 预算值数组
|
||||||
const groupDiff = [this.groupData.diff]; // 差值数组
|
const groupDiff = [this.groupData.diff]; // 差值数组
|
||||||
const groupReal = [this.groupData.real]; // 实际值数组
|
const groupReal = [this.groupData.real]; // 实际值数组
|
||||||
const groupRate = [this.groupData.rate]; // 完成率数组
|
const groupRate = [this.groupData.rate]; // 完成率数组
|
||||||
@@ -135,7 +135,7 @@ export default {
|
|||||||
// 集团数据(对应凯盛新能)
|
// 集团数据(对应凯盛新能)
|
||||||
group: {
|
group: {
|
||||||
locations: ['凯盛新能'], // 集团名称
|
locations: ['凯盛新能'], // 集团名称
|
||||||
targets: groupTarget, // 集团目标值数组
|
targets: groupTarget, // 集团预算值数组
|
||||||
diff: groupDiff, // 集团差值数组
|
diff: groupDiff, // 集团差值数组
|
||||||
reals: groupReal, // 集团实际值数组
|
reals: groupReal, // 集团实际值数组
|
||||||
rate: groupRate, // 集团完成率数组
|
rate: groupRate, // 集团完成率数组
|
||||||
|
|||||||
@@ -96,7 +96,7 @@ export default {
|
|||||||
this.groupData = this.ytdData.group || { rate: 0, diff: 0, real: 0, target: 0 };
|
this.groupData = this.ytdData.group || { rate: 0, diff: 0, real: 0, target: 0 };
|
||||||
|
|
||||||
// 集团各维度数据数组(单条数据,对应凯盛新能)
|
// 集团各维度数据数组(单条数据,对应凯盛新能)
|
||||||
const groupTarget = [this.groupData.target]; // 目标值数组
|
const groupTarget = [this.groupData.target]; // 预算值数组
|
||||||
const groupDiff = [this.groupData.diff]; // 差值数组
|
const groupDiff = [this.groupData.diff]; // 差值数组
|
||||||
const groupReal = [this.groupData.real]; // 实际值数组
|
const groupReal = [this.groupData.real]; // 实际值数组
|
||||||
const groupRate = [this.groupData.rate]; // 完成率数组
|
const groupRate = [this.groupData.rate]; // 完成率数组
|
||||||
@@ -129,7 +129,7 @@ export default {
|
|||||||
// 集团数据(对应凯盛新能)
|
// 集团数据(对应凯盛新能)
|
||||||
group: {
|
group: {
|
||||||
locations: ['凯盛新能'], // 集团名称
|
locations: ['凯盛新能'], // 集团名称
|
||||||
targets: groupTarget, // 集团目标值数组
|
targets: groupTarget, // 集团预算值数组
|
||||||
diff: groupDiff, // 集团差值数组
|
diff: groupDiff, // 集团差值数组
|
||||||
reals: groupReal, // 集团实际值数组
|
reals: groupReal, // 集团实际值数组
|
||||||
rate: groupRate, // 集团完成率数组
|
rate: groupRate, // 集团完成率数组
|
||||||
|
|||||||
@@ -270,7 +270,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -145,7 +145,7 @@ export default {
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
offset: [-60, 25],
|
offset: [0, 25],
|
||||||
// 固定label尺寸:68px×20px
|
// 固定label尺寸:68px×20px
|
||||||
width: 68,
|
width: 68,
|
||||||
height: 20,
|
height: 20,
|
||||||
|
|||||||
@@ -75,7 +75,7 @@ export default {
|
|||||||
months: [], // 月份数组(x轴标签)
|
months: [], // 月份数组(x轴标签)
|
||||||
rates: [], // 完成率(completeRate)
|
rates: [], // 完成率(completeRate)
|
||||||
reals: [], // 实际值(real)
|
reals: [], // 实际值(real)
|
||||||
targets: [], // 目标值(target)
|
targets: [], // 预算值(target)
|
||||||
flags: [], // 达标状态
|
flags: [], // 达标状态
|
||||||
diffs: [],
|
diffs: [],
|
||||||
};
|
};
|
||||||
@@ -152,7 +152,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
@@ -168,7 +168,7 @@ export default {
|
|||||||
borderRadius: [4, 4, 0, 0],
|
borderRadius: [4, 4, 0, 0],
|
||||||
borderWidth: 0
|
borderWidth: 0
|
||||||
},
|
},
|
||||||
data: targets, // 动态目标值
|
data: targets, // 动态预算值
|
||||||
},
|
},
|
||||||
// 3. 实际(柱状图,含达标状态)
|
// 3. 实际(柱状图,含达标状态)
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -95,10 +95,10 @@ export default {
|
|||||||
case 2: // 实际值:低~高
|
case 2: // 实际值:低~高
|
||||||
dataWithIndex.sort((a, b) => a.real - b.real);
|
dataWithIndex.sort((a, b) => a.real - b.real);
|
||||||
break;
|
break;
|
||||||
case 3: // 目标值:高~低
|
case 3: // 预算值:高~低
|
||||||
dataWithIndex.sort((a, b) => b.rate - a.rate);
|
dataWithIndex.sort((a, b) => b.rate - a.rate);
|
||||||
break;
|
break;
|
||||||
case 4: // 目标值:低~高
|
case 4: // 预算值:低~高
|
||||||
dataWithIndex.sort((a, b) => a.rate - b.rate);
|
dataWithIndex.sort((a, b) => a.rate - b.rate);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
|||||||
@@ -153,7 +153,7 @@ export default {
|
|||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '万元',
|
name: '元',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: 'rgba(0, 0, 0, 0.45)',
|
color: 'rgba(0, 0, 0, 0.45)',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
|||||||
@@ -111,7 +111,7 @@ export default {
|
|||||||
// 左侧Y轴:营业收入、成本(单位万元)
|
// 左侧Y轴:营业收入、成本(单位万元)
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '万元',
|
name: '元',
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: 'rgba(0, 0, 0, 0.45)',
|
color: 'rgba(0, 0, 0, 0.45)',
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
|||||||
@@ -116,7 +116,7 @@ export default {
|
|||||||
// 3. 组装工厂chartData(格式与集团一致,适配子组件)
|
// 3. 组装工厂chartData(格式与集团一致,适配子组件)
|
||||||
this.chartData = {
|
this.chartData = {
|
||||||
locations: factoryKeys, // 工厂名称数组
|
locations: factoryKeys, // 工厂名称数组
|
||||||
targets: factoryDataList.map(item => item.target || 0), // 目标值
|
targets: factoryDataList.map(item => item.target || 0), // 预算值
|
||||||
diff: factoryDataList.map(item => item.diff || 0), // 差值
|
diff: factoryDataList.map(item => item.diff || 0), // 差值
|
||||||
reals: factoryDataList.map(item => item.real || 0), // 实际值
|
reals: factoryDataList.map(item => item.real || 0), // 实际值
|
||||||
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
|
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
|
||||||
|
|||||||
@@ -116,7 +116,7 @@ export default {
|
|||||||
// 3. 组装工厂chartData(格式与集团一致,适配子组件)
|
// 3. 组装工厂chartData(格式与集团一致,适配子组件)
|
||||||
this.chartData = {
|
this.chartData = {
|
||||||
locations: factoryKeys, // 工厂名称数组
|
locations: factoryKeys, // 工厂名称数组
|
||||||
targets: factoryDataList.map(item => item.target || 0), // 目标值
|
targets: factoryDataList.map(item => item.target || 0), // 预算值
|
||||||
diff: factoryDataList.map(item => item.diff || 0), // 差值
|
diff: factoryDataList.map(item => item.diff || 0), // 差值
|
||||||
reals: factoryDataList.map(item => item.real || 0), // 实际值
|
reals: factoryDataList.map(item => item.real || 0), // 实际值
|
||||||
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
|
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
|
||||||
|
|||||||
@@ -270,7 +270,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -107,7 +107,7 @@ export default {
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
offset: [-60, 25],
|
offset: [0, 25],
|
||||||
width: 68,
|
width: 68,
|
||||||
height: 20,
|
height: 20,
|
||||||
formatter: `{rate|${diffValue}}{text|差值}`,
|
formatter: `{rate|${diffValue}}{text|差值}`,
|
||||||
|
|||||||
@@ -95,10 +95,10 @@ export default {
|
|||||||
case 2: // 实际值:低~高
|
case 2: // 实际值:低~高
|
||||||
dataWithIndex.sort((a, b) => a.real - b.real);
|
dataWithIndex.sort((a, b) => a.real - b.real);
|
||||||
break;
|
break;
|
||||||
case 3: // 目标值:高~低
|
case 3: // 预算值:高~低
|
||||||
dataWithIndex.sort((a, b) => b.rate - a.rate);
|
dataWithIndex.sort((a, b) => b.rate - a.rate);
|
||||||
break;
|
break;
|
||||||
case 4: // 目标值:低~高
|
case 4: // 预算值:低~高
|
||||||
dataWithIndex.sort((a, b) => a.rate - b.rate);
|
dataWithIndex.sort((a, b) => a.rate - b.rate);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
|||||||
@@ -102,7 +102,7 @@ export default {
|
|||||||
this.groupData = this.monthData.group || { rate: 0, diff: 0, real: 0, target: 0 };
|
this.groupData = this.monthData.group || { rate: 0, diff: 0, real: 0, target: 0 };
|
||||||
|
|
||||||
// 集团各维度数据数组(单条数据,对应凯盛新能)
|
// 集团各维度数据数组(单条数据,对应凯盛新能)
|
||||||
const groupTarget = [this.groupData.target]; // 目标值数组
|
const groupTarget = [this.groupData.target]; // 预算值数组
|
||||||
const groupDiff = [this.groupData.diff]; // 差值数组
|
const groupDiff = [this.groupData.diff]; // 差值数组
|
||||||
const groupReal = [this.groupData.real]; // 实际值数组
|
const groupReal = [this.groupData.real]; // 实际值数组
|
||||||
const groupRate = [this.groupData.rate]; // 完成率数组
|
const groupRate = [this.groupData.rate]; // 完成率数组
|
||||||
@@ -135,7 +135,7 @@ export default {
|
|||||||
// 集团数据(对应凯盛新能)
|
// 集团数据(对应凯盛新能)
|
||||||
group: {
|
group: {
|
||||||
locations: ['凯盛新能'], // 集团名称
|
locations: ['凯盛新能'], // 集团名称
|
||||||
targets: groupTarget, // 集团目标值数组
|
targets: groupTarget, // 集团预算值数组
|
||||||
diff: groupDiff, // 集团差值数组
|
diff: groupDiff, // 集团差值数组
|
||||||
reals: groupReal, // 集团实际值数组
|
reals: groupReal, // 集团实际值数组
|
||||||
rate: groupRate, // 集团完成率数组
|
rate: groupRate, // 集团完成率数组
|
||||||
|
|||||||
@@ -98,7 +98,7 @@ export default {
|
|||||||
this.groupData = this.ytdData.group || { rate: 0, diff: 0, real: 0, target: 0 };
|
this.groupData = this.ytdData.group || { rate: 0, diff: 0, real: 0, target: 0 };
|
||||||
|
|
||||||
// 集团各维度数据数组(单条数据,对应凯盛新能)
|
// 集团各维度数据数组(单条数据,对应凯盛新能)
|
||||||
const groupTarget = [this.groupData.target]; // 目标值数组
|
const groupTarget = [this.groupData.target]; // 预算值数组
|
||||||
const groupDiff = [this.groupData.diff]; // 差值数组
|
const groupDiff = [this.groupData.diff]; // 差值数组
|
||||||
const groupReal = [this.groupData.real]; // 实际值数组
|
const groupReal = [this.groupData.real]; // 实际值数组
|
||||||
const groupRate = [this.groupData.rate]; // 完成率数组
|
const groupRate = [this.groupData.rate]; // 完成率数组
|
||||||
@@ -131,7 +131,7 @@ export default {
|
|||||||
// 集团数据(对应凯盛新能)
|
// 集团数据(对应凯盛新能)
|
||||||
group: {
|
group: {
|
||||||
locations: ['凯盛新能'], // 集团名称
|
locations: ['凯盛新能'], // 集团名称
|
||||||
targets: groupTarget, // 集团目标值数组
|
targets: groupTarget, // 集团预算值数组
|
||||||
diff: groupDiff, // 集团差值数组
|
diff: groupDiff, // 集团差值数组
|
||||||
reals: groupReal, // 集团实际值数组
|
reals: groupReal, // 集团实际值数组
|
||||||
rate: groupRate, // 集团完成率数组
|
rate: groupRate, // 集团完成率数组
|
||||||
|
|||||||
@@ -270,7 +270,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -145,7 +145,7 @@ export default {
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
offset: [-60, 25],
|
offset: [0, 25],
|
||||||
// 固定label尺寸:68px×20px
|
// 固定label尺寸:68px×20px
|
||||||
width: 68,
|
width: 68,
|
||||||
height: 20,
|
height: 20,
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ export default {
|
|||||||
const timeArr = []; // 格式化后的年月数组
|
const timeArr = []; // 格式化后的年月数组
|
||||||
const valueArr = []; // 实际值数组
|
const valueArr = []; // 实际值数组
|
||||||
const diffValueArr = []; // 差异值数组
|
const diffValueArr = []; // 差异值数组
|
||||||
const targetValueArr = []; // 目标值数组
|
const targetValueArr = []; // 预算值数组
|
||||||
const proportionArr = []; // 占比数组
|
const proportionArr = []; // 占比数组
|
||||||
const completedArr = []; // 完成率数组
|
const completedArr = []; // 完成率数组
|
||||||
|
|
||||||
|
|||||||
@@ -120,7 +120,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0, // 左侧Y轴(万元)
|
yAxisIndex: 0, // 左侧Y轴(万元)
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -95,10 +95,10 @@ export default {
|
|||||||
case 2: // 实际值:低~高
|
case 2: // 实际值:低~高
|
||||||
dataWithIndex.sort((a, b) => a.real - b.real);
|
dataWithIndex.sort((a, b) => a.real - b.real);
|
||||||
break;
|
break;
|
||||||
case 3: // 目标值:高~低
|
case 3: // 预算值:高~低
|
||||||
dataWithIndex.sort((a, b) => b.rate - a.rate);
|
dataWithIndex.sort((a, b) => b.rate - a.rate);
|
||||||
break;
|
break;
|
||||||
case 4: // 目标值:低~高
|
case 4: // 预算值:低~高
|
||||||
dataWithIndex.sort((a, b) => a.rate - b.rate);
|
dataWithIndex.sort((a, b) => a.rate - b.rate);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
|||||||
@@ -71,7 +71,7 @@ export default {
|
|||||||
topBarData: { // levelId=1的整合数据
|
topBarData: { // levelId=1的整合数据
|
||||||
locations: [], // 固定为["凯盛新能"]
|
locations: [], // 固定为["凯盛新能"]
|
||||||
diff: [], // 差值数组
|
diff: [], // 差值数组
|
||||||
targets: [], // 目标值数组
|
targets: [], // 预算值数组
|
||||||
reals: [], // 实际值数组
|
reals: [], // 实际值数组
|
||||||
rate: [], // 完成率数组
|
rate: [], // 完成率数组
|
||||||
flags: [] // 完成状态数组(0/1)
|
flags: [] // 完成状态数组(0/1)
|
||||||
@@ -79,7 +79,7 @@ export default {
|
|||||||
barData: { // levelId≠1的整合数据
|
barData: { // levelId≠1的整合数据
|
||||||
locations: [], // levelId对应的baseIndexToNameMap中的地名
|
locations: [], // levelId对应的baseIndexToNameMap中的地名
|
||||||
diff: [], // 对应差值数组
|
diff: [], // 对应差值数组
|
||||||
targets: [], // 目标值数组
|
targets: [], // 预算值数组
|
||||||
reals: [], // 实际值数组
|
reals: [], // 实际值数组
|
||||||
rate: [], // 完成率数组
|
rate: [], // 完成率数组
|
||||||
flags: [] // 完成状态数组(0/1)
|
flags: [] // 完成状态数组(0/1)
|
||||||
|
|||||||
@@ -71,7 +71,7 @@ export default {
|
|||||||
topBarData: { // levelId=1的整合数据
|
topBarData: { // levelId=1的整合数据
|
||||||
locations: [], // 固定为["凯盛新能"]
|
locations: [], // 固定为["凯盛新能"]
|
||||||
diff: [], // 差值数组
|
diff: [], // 差值数组
|
||||||
targets: [], // 目标值数组
|
targets: [], // 预算值数组
|
||||||
reals: [], // 实际值数组
|
reals: [], // 实际值数组
|
||||||
rate: [], // 完成率数组
|
rate: [], // 完成率数组
|
||||||
flags: [] // 完成状态数组(0/1)
|
flags: [] // 完成状态数组(0/1)
|
||||||
@@ -79,7 +79,7 @@ export default {
|
|||||||
barData: { // levelId≠1的整合数据
|
barData: { // levelId≠1的整合数据
|
||||||
locations: [], // levelId对应的baseIndexToNameMap中的地名
|
locations: [], // levelId对应的baseIndexToNameMap中的地名
|
||||||
diff: [], // 对应差值数组
|
diff: [], // 对应差值数组
|
||||||
targets: [], // 目标值数组
|
targets: [], // 预算值数组
|
||||||
reals: [], // 实际值数组
|
reals: [], // 实际值数组
|
||||||
rate: [], // 完成率数组
|
rate: [], // 完成率数组
|
||||||
flags: [] // 完成状态数组(0/1)
|
flags: [] // 完成状态数组(0/1)
|
||||||
|
|||||||
@@ -270,7 +270,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -108,7 +108,7 @@ export default {
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
offset: [-60, 25],
|
offset: [0, 25],
|
||||||
width: 68,
|
width: 68,
|
||||||
height: 20,
|
height: 20,
|
||||||
formatter: `{rate|${diffValue}}{text|差值}`,
|
formatter: `{rate|${diffValue}}{text|差值}`,
|
||||||
|
|||||||
@@ -77,7 +77,7 @@ export default {
|
|||||||
months: [], // 月份数组(x轴标签)
|
months: [], // 月份数组(x轴标签)
|
||||||
rates: [], // 完成率(completeRate)
|
rates: [], // 完成率(completeRate)
|
||||||
reals: [], // 实际值(real)
|
reals: [], // 实际值(real)
|
||||||
targets: [], // 目标值(target)
|
targets: [], // 预算值(target)
|
||||||
flags: [], // 达标状态
|
flags: [], // 达标状态
|
||||||
diffs: [],
|
diffs: [],
|
||||||
};
|
};
|
||||||
@@ -155,7 +155,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
@@ -171,7 +171,7 @@ export default {
|
|||||||
borderRadius: [4, 4, 0, 0],
|
borderRadius: [4, 4, 0, 0],
|
||||||
borderWidth: 0
|
borderWidth: 0
|
||||||
},
|
},
|
||||||
data: targets, // 动态目标值
|
data: targets, // 动态预算值
|
||||||
},
|
},
|
||||||
// 3. 实际(柱状图,含达标状态)
|
// 3. 实际(柱状图,含达标状态)
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -95,10 +95,10 @@ export default {
|
|||||||
case 2: // 实际值:低~高
|
case 2: // 实际值:低~高
|
||||||
dataWithIndex.sort((a, b) => a.real - b.real);
|
dataWithIndex.sort((a, b) => a.real - b.real);
|
||||||
break;
|
break;
|
||||||
case 3: // 目标值:高~低
|
case 3: // 预算值:高~低
|
||||||
dataWithIndex.sort((a, b) => b.rate - a.rate);
|
dataWithIndex.sort((a, b) => b.rate - a.rate);
|
||||||
break;
|
break;
|
||||||
case 4: // 目标值:低~高
|
case 4: // 预算值:低~高
|
||||||
dataWithIndex.sort((a, b) => a.rate - b.rate);
|
dataWithIndex.sort((a, b) => a.rate - b.rate);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
|||||||
@@ -116,7 +116,7 @@ export default {
|
|||||||
// 3. 组装工厂chartData(格式与集团一致,适配子组件)
|
// 3. 组装工厂chartData(格式与集团一致,适配子组件)
|
||||||
this.chartData = {
|
this.chartData = {
|
||||||
locations: factoryKeys, // 工厂名称数组
|
locations: factoryKeys, // 工厂名称数组
|
||||||
targets: factoryDataList.map(item => item.target || 0), // 目标值
|
targets: factoryDataList.map(item => item.target || 0), // 预算值
|
||||||
diff: factoryDataList.map(item => item.diff || 0), // 差值
|
diff: factoryDataList.map(item => item.diff || 0), // 差值
|
||||||
reals: factoryDataList.map(item => item.real || 0), // 实际值
|
reals: factoryDataList.map(item => item.real || 0), // 实际值
|
||||||
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
|
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
|
||||||
|
|||||||
@@ -116,7 +116,7 @@ export default {
|
|||||||
// 3. 组装工厂chartData(格式与集团一致,适配子组件)
|
// 3. 组装工厂chartData(格式与集团一致,适配子组件)
|
||||||
this.chartData = {
|
this.chartData = {
|
||||||
locations: factoryKeys, // 工厂名称数组
|
locations: factoryKeys, // 工厂名称数组
|
||||||
targets: factoryDataList.map(item => item.target || 0), // 目标值
|
targets: factoryDataList.map(item => item.target || 0), // 预算值
|
||||||
diff: factoryDataList.map(item => item.diff || 0), // 差值
|
diff: factoryDataList.map(item => item.diff || 0), // 差值
|
||||||
reals: factoryDataList.map(item => item.real || 0), // 实际值
|
reals: factoryDataList.map(item => item.real || 0), // 实际值
|
||||||
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
|
rates: factoryDataList.map(item => item.completeRate || 0), // 完成率
|
||||||
|
|||||||
@@ -107,7 +107,7 @@ export default {
|
|||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'right',
|
position: 'right',
|
||||||
offset: [-60, 25],
|
offset: [0, 25],
|
||||||
width: 68,
|
width: 68,
|
||||||
height: 20,
|
height: 20,
|
||||||
formatter: `{rate|${diffValue}}{text|差值}`,
|
formatter: `{rate|${diffValue}}{text|差值}`,
|
||||||
|
|||||||
@@ -16,7 +16,7 @@
|
|||||||
gap: 12px;
|
gap: 12px;
|
||||||
grid-template-columns:1624px;
|
grid-template-columns:1624px;
|
||||||
">
|
">
|
||||||
<operatingLineChart :dateData="dateData" :baseUrl="baseUrl" :monData="monData" />
|
<operatingLineChart :yName=" '元/㎡'" :dateData="dateData" :baseUrl="baseUrl" :monData="monData" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top" style="display: flex; gap: 16px;margin-top: 6px;">
|
<div class="top" style="display: flex; gap: 16px;margin-top: 6px;">
|
||||||
@@ -25,7 +25,8 @@
|
|||||||
gap: 12px;
|
gap: 12px;
|
||||||
grid-template-columns: 1624px;
|
grid-template-columns: 1624px;
|
||||||
">
|
">
|
||||||
<operatingLineChartCumulative :dateData="dateData" :baseUrl="baseUrl" :totalData="totalData" />
|
<operatingLineChartCumulative :yName="'元/㎡'" :dateData="dateData" :baseUrl="baseUrl"
|
||||||
|
:totalData="totalData" />
|
||||||
<!-- <keyWork /> -->
|
<!-- <keyWork /> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -16,7 +16,7 @@
|
|||||||
gap: 12px;
|
gap: 12px;
|
||||||
grid-template-columns:1624px;
|
grid-template-columns:1624px;
|
||||||
">
|
">
|
||||||
<operatingLineChart :dateData="dateData" :baseUrl="baseUrl" :monData="monData" />
|
<operatingLineChart :yName="'元/㎡'" :dateData="dateData" :baseUrl="baseUrl" :monData="monData" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top" style="display: flex; gap: 16px;margin-top: 6px;">
|
<div class="top" style="display: flex; gap: 16px;margin-top: 6px;">
|
||||||
@@ -25,7 +25,8 @@
|
|||||||
gap: 12px;
|
gap: 12px;
|
||||||
grid-template-columns: 1624px;
|
grid-template-columns: 1624px;
|
||||||
">
|
">
|
||||||
<operatingLineChartCumulative :dateData="dateData" :baseUrl="baseUrl" :totalData="totalData" />
|
<operatingLineChartCumulative :yName="'元/㎡'" :dateData="dateData" :baseUrl="baseUrl"
|
||||||
|
:totalData="totalData" />
|
||||||
<!-- <keyWork /> -->
|
<!-- <keyWork /> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -16,7 +16,7 @@
|
|||||||
gap: 12px;
|
gap: 12px;
|
||||||
grid-template-columns:1624px;
|
grid-template-columns:1624px;
|
||||||
">
|
">
|
||||||
<operatingLineChart :dateData="dateData" :baseUrl="baseUrl" :monData="monData" />
|
<operatingLineChart :yName="'元/㎡'" :dateData="dateData" :baseUrl="baseUrl" :monData="monData" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="top" style="display: flex; gap: 16px;margin-top: 6px;">
|
<div class="top" style="display: flex; gap: 16px;margin-top: 6px;">
|
||||||
@@ -25,7 +25,7 @@
|
|||||||
gap: 12px;
|
gap: 12px;
|
||||||
grid-template-columns: 1624px;
|
grid-template-columns: 1624px;
|
||||||
">
|
">
|
||||||
<operatingLineChartCumulative :dateData="dateData" :baseUrl="baseUrl" :totalData="totalData" />
|
<operatingLineChartCumulative :yName="'元/㎡'" :dateData="dateData" :baseUrl="baseUrl" :totalData="totalData" />
|
||||||
<!-- <keyWork /> -->
|
<!-- <keyWork /> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ export default {
|
|||||||
const timeArr = []; // 格式化后的年月数组
|
const timeArr = []; // 格式化后的年月数组
|
||||||
const valueArr = []; // 实际值数组
|
const valueArr = []; // 实际值数组
|
||||||
const diffValueArr = []; // 差异值数组
|
const diffValueArr = []; // 差异值数组
|
||||||
const targetValueArr = []; // 目标值数组
|
const targetValueArr = []; // 预算值数组
|
||||||
const proportionArr = []; // 占比数组
|
const proportionArr = []; // 占比数组
|
||||||
const completedArr = []; // 完成率数组
|
const completedArr = []; // 完成率数组
|
||||||
|
|
||||||
|
|||||||
@@ -119,7 +119,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0, // 左侧Y轴(万元)
|
yAxisIndex: 0, // 左侧Y轴(万元)
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -117,7 +117,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0, // 左侧Y轴(万元)
|
yAxisIndex: 0, // 左侧Y轴(万元)
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -118,7 +118,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0, // 左侧Y轴(万元)
|
yAxisIndex: 0, // 左侧Y轴(万元)
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -119,7 +119,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0, // 左侧Y轴(万元)
|
yAxisIndex: 0, // 左侧Y轴(万元)
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -117,7 +117,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0, // 左侧Y轴(万元)
|
yAxisIndex: 0, // 左侧Y轴(万元)
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -117,7 +117,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0, // 左侧Y轴(万元)
|
yAxisIndex: 0, // 左侧Y轴(万元)
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -119,7 +119,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0, // 左侧Y轴(万元)
|
yAxisIndex: 0, // 左侧Y轴(万元)
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -116,7 +116,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0, // 左侧Y轴(万元)
|
yAxisIndex: 0, // 左侧Y轴(万元)
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -120,7 +120,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0, // 左侧Y轴(万元)
|
yAxisIndex: 0, // 左侧Y轴(万元)
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -116,7 +116,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0, // 左侧Y轴(万元)
|
yAxisIndex: 0, // 左侧Y轴(万元)
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -118,7 +118,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0, // 左侧Y轴(万元)
|
yAxisIndex: 0, // 左侧Y轴(万元)
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -117,7 +117,7 @@ export default {
|
|||||||
},
|
},
|
||||||
// 2. 目标(柱状图)
|
// 2. 目标(柱状图)
|
||||||
{
|
{
|
||||||
name: '目标',
|
name: '预算',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
yAxisIndex: 0, // 左侧Y轴(万元)
|
yAxisIndex: 0, // 左侧Y轴(万元)
|
||||||
barWidth: 14,
|
barWidth: 14,
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ export default {
|
|||||||
const timeArr = []; // 格式化后的年月数组
|
const timeArr = []; // 格式化后的年月数组
|
||||||
const valueArr = []; // 实际值数组
|
const valueArr = []; // 实际值数组
|
||||||
const diffValueArr = []; // 差异值数组
|
const diffValueArr = []; // 差异值数组
|
||||||
const targetValueArr = []; // 目标值数组
|
const targetValueArr = []; // 预算值数组
|
||||||
const proportionArr = []; // 占比数组
|
const proportionArr = []; // 占比数组
|
||||||
const completedArr = []; // 完成率数组
|
const completedArr = []; // 完成率数组
|
||||||
|
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ export default {
|
|||||||
const timeArr = []; // 格式化后的年月数组
|
const timeArr = []; // 格式化后的年月数组
|
||||||
const valueArr = []; // 实际值数组
|
const valueArr = []; // 实际值数组
|
||||||
const diffValueArr = []; // 差异值数组
|
const diffValueArr = []; // 差异值数组
|
||||||
const targetValueArr = []; // 目标值数组
|
const targetValueArr = []; // 预算值数组
|
||||||
const proportionArr = []; // 占比数组
|
const proportionArr = []; // 占比数组
|
||||||
const completedArr = []; // 完成率数组
|
const completedArr = []; // 完成率数组
|
||||||
|
|
||||||
|
|||||||
@@ -45,7 +45,7 @@ export default {
|
|||||||
const timeArr = []; // 格式化后的年月数组
|
const timeArr = []; // 格式化后的年月数组
|
||||||
const valueArr = []; // 实际值数组
|
const valueArr = []; // 实际值数组
|
||||||
const diffValueArr = []; // 差异值数组
|
const diffValueArr = []; // 差异值数组
|
||||||
const targetValueArr = []; // 目标值数组
|
const targetValueArr = []; // 预算值数组
|
||||||
const proportionArr = []; // 占比数组
|
const proportionArr = []; // 占比数组
|
||||||
const completedArr = []; // 完成率数组
|
const completedArr = []; // 完成率数组
|
||||||
|
|
||||||
|
|||||||
@@ -44,7 +44,7 @@ export default {
|
|||||||
const timeArr = []; // 格式化后的年月数组
|
const timeArr = []; // 格式化后的年月数组
|
||||||
const valueArr = []; // 实际值数组
|
const valueArr = []; // 实际值数组
|
||||||
const diffValueArr = []; // 差异值数组
|
const diffValueArr = []; // 差异值数组
|
||||||
const targetValueArr = []; // 目标值数组
|
const targetValueArr = []; // 预算值数组
|
||||||
const proportionArr = []; // 占比数组
|
const proportionArr = []; // 占比数组
|
||||||
const completedArr = []; // 完成率数组
|
const completedArr = []; // 完成率数组
|
||||||
|
|
||||||
|
|||||||
@@ -44,7 +44,7 @@ export default {
|
|||||||
const timeArr = []; // 格式化后的年月数组
|
const timeArr = []; // 格式化后的年月数组
|
||||||
const valueArr = []; // 实际值数组
|
const valueArr = []; // 实际值数组
|
||||||
const diffValueArr = []; // 差异值数组
|
const diffValueArr = []; // 差异值数组
|
||||||
const targetValueArr = []; // 目标值数组
|
const targetValueArr = []; // 预算值数组
|
||||||
const proportionArr = []; // 占比数组
|
const proportionArr = []; // 占比数组
|
||||||
const completedArr = []; // 完成率数组
|
const completedArr = []; // 完成率数组
|
||||||
|
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user