xiugai
This commit is contained in:
@@ -76,9 +76,9 @@ export default {
|
||||
*/
|
||||
processTrendData(trendData) {
|
||||
// 数据兜底:确保是数组且长度为12
|
||||
const validTrend = Array.isArray(trendData) && trendData.length === 12
|
||||
const validTrend = Array.isArray(trendData)
|
||||
? trendData
|
||||
: this.$props.trend.default();
|
||||
: []
|
||||
|
||||
// 初始化空数组
|
||||
const months = [];
|
||||
|
||||
@@ -2,9 +2,6 @@
|
||||
<div class="coreBar">
|
||||
<!-- 新增行容器:包裹“各基地情况”和barTop -->
|
||||
<div class="header-row">
|
||||
<div class="base-title">
|
||||
各基地情况
|
||||
</div>
|
||||
<div class="barTop">
|
||||
<!-- 关键:新增右侧容器,包裹图例和按钮组,实现整体靠右 -->
|
||||
<div class="right-container">
|
||||
@@ -342,10 +339,10 @@ export default {
|
||||
|
||||
// 新增:头部行容器,实现一行排列
|
||||
.header-row {
|
||||
display: flex;
|
||||
justify-content: space-between; // 左右两端对齐
|
||||
display: flex;
|
||||
justify-content: flex-end; // 左右两端对齐
|
||||
align-items: center; // 垂直居中
|
||||
width: 100%;
|
||||
// width: 100%;
|
||||
margin-bottom: 8px; // 与下方图表区保留间距(可根据需求调整)
|
||||
}
|
||||
|
||||
|
||||
@@ -50,6 +50,7 @@ export default {
|
||||
type: Object,
|
||||
default: () => {} // 默认空数组,避免报错
|
||||
},
|
||||
|
||||
title: { // 接收父组件传递的设备数据数组
|
||||
type: String,
|
||||
default: () => '' // 默认空数组,避免报错
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<!-- 累计指标1 -->
|
||||
<div class="dashboard left" @click="handleDashboardClick('/operatingRevenue/operatingRevenueBase')">
|
||||
<div class="title">
|
||||
收入·单位/万元
|
||||
收入·万元
|
||||
</div>
|
||||
<div class="chart-wrap">
|
||||
<operatingSingleBar :detailData="ytdIncomeData"></operatingSingleBar>
|
||||
@@ -15,7 +15,7 @@
|
||||
<!-- 累计指标2 -->
|
||||
<div class="dashboard right" @click="handleDashboardClick('/fullCostAnalysis/fullCostAnalysisBase')">
|
||||
<div class="title">
|
||||
全成本·单位/万元
|
||||
全成本·元/㎡
|
||||
</div>
|
||||
<div class="chart-wrap">
|
||||
<operatingSingleBar :detailData="ytdCostData"></operatingSingleBar>
|
||||
@@ -43,6 +43,10 @@ export default {
|
||||
{ title: "累计全成本", budget: 0, real: 0, rate: 0, diff: 0 }
|
||||
]
|
||||
},
|
||||
dateData: { // 接收父组件传递的设备数据数组
|
||||
type: Object,
|
||||
default: () => { } // 默认空数组,避免报错
|
||||
},
|
||||
factory: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
@@ -75,7 +79,8 @@ export default {
|
||||
this.$router.push({
|
||||
path: path,
|
||||
query: {
|
||||
factory: this.$route.query.factory ? this.$route.query.factory : this.factory
|
||||
factory: this.$route.query.factory ? this.$route.query.factory : this.factory,
|
||||
dateData:this.dateData
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="lineBottom" style="height: 100%; width: 100%">
|
||||
<operatingLineBar :chartData="chartD" style="height: 99%; width: 100%" />
|
||||
<operatingLineBar :dateData="dateData" :chartData="chartD" style="height: 99%; width: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -51,7 +51,7 @@ import * as echarts from 'echarts';
|
||||
export default {
|
||||
name: "Container",
|
||||
components: { operatingLineBar },
|
||||
props: ["chartData"],
|
||||
props: ["chartData",'dateData'],
|
||||
emits: ['sort-change'], // 声明事件(Vue3 推荐)
|
||||
data() {
|
||||
return {
|
||||
|
||||
@@ -120,7 +120,7 @@ export default {
|
||||
},
|
||||
// min: 0,
|
||||
// max: (value) => Math.ceil((value.max || 0) * 1.1),
|
||||
scale: true,
|
||||
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
color: 'rgba(0, 0, 0, 0.45)',
|
||||
|
||||
@@ -117,7 +117,7 @@ export default {
|
||||
fontSize: 12,
|
||||
align: 'right'
|
||||
},
|
||||
scale: true,
|
||||
|
||||
splitNumber: 4,
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
|
||||
@@ -28,7 +28,11 @@ export default {
|
||||
chartData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
}
|
||||
},
|
||||
dateData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
@@ -80,7 +84,8 @@ export default {
|
||||
path: 'grossMarginBase',
|
||||
query: { // 使用query传递参数(推荐),也可使用params
|
||||
// baseName: itemName,
|
||||
factory: baseIndex
|
||||
factory: baseIndex,
|
||||
dateData:this.dateData
|
||||
}
|
||||
// 若仍需用base作为参数:
|
||||
// base: itemName,
|
||||
@@ -120,7 +125,7 @@ export default {
|
||||
top: 30,
|
||||
bottom: 30,
|
||||
right: 70,
|
||||
left: 40
|
||||
left: 60
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
@@ -154,7 +159,7 @@ export default {
|
||||
fontSize: 12,
|
||||
align: 'right'
|
||||
},
|
||||
scale: true,
|
||||
|
||||
splitNumber: 4,
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
|
||||
@@ -117,7 +117,7 @@ export default {
|
||||
fontSize: 12,
|
||||
align: 'right'
|
||||
},
|
||||
scale: true,
|
||||
|
||||
splitNumber: 4,
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
@@ -146,7 +146,7 @@ export default {
|
||||
},
|
||||
splitLine: { show: false },
|
||||
axisLine: { lineStyle: { color: 'rgba(0, 0, 0, 0.15)' } },
|
||||
// scale: true,
|
||||
//
|
||||
splitNumber: 4,
|
||||
}
|
||||
],
|
||||
|
||||
@@ -83,11 +83,11 @@ export default {
|
||||
// return html;
|
||||
// }
|
||||
},
|
||||
grid: {
|
||||
top: 40,
|
||||
bottom: 40,
|
||||
right: 70,
|
||||
left: 60,
|
||||
grid: {
|
||||
top: 30,
|
||||
bottom: 60,
|
||||
right: 30,
|
||||
left: 50,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
@@ -123,7 +123,7 @@ export default {
|
||||
type: 'solid' // 实线(可选:dashed虚线、dotted点线)
|
||||
}
|
||||
},
|
||||
scale: true,
|
||||
|
||||
splitNumber: 2,
|
||||
axisTick: { show: false },
|
||||
axisLabel: {
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
">
|
||||
<!-- <top-item /> -->
|
||||
<operatingBar :chartData="chartData" @sort-change="sortChange" />
|
||||
<operatingBar :dateData="dateData" :chartData="chartData" @sort-change="sortChange" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
@@ -59,6 +59,10 @@ export default {
|
||||
}),
|
||||
required: true
|
||||
},
|
||||
dateData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -85,12 +89,10 @@ export default {
|
||||
* @param {number} rate 处理后的rate值(已*100)
|
||||
* @returns {0|1} flag值
|
||||
*/
|
||||
getRateFlag(rate) {
|
||||
// 处理非数字/空值,默认返回 0
|
||||
if (isNaN(rate) || rate === null || rate === undefined) return 0;
|
||||
// 核心逻辑:≥100 → 1;<100 → 0
|
||||
return rate >= 100 ? 1 : 0;
|
||||
},
|
||||
getRateFlag(rate) {
|
||||
if (isNaN(rate) || rate === null || rate === undefined) return 0;
|
||||
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字(true→1,false→0)
|
||||
},
|
||||
|
||||
/**
|
||||
* 核心处理函数:在所有数据都准备好后,才组装 chartData
|
||||
|
||||
@@ -30,7 +30,7 @@
|
||||
background-color: rgba(249, 252, 255, 1);
|
||||
">
|
||||
<!-- <top-item /> -->
|
||||
<operatingBar @sort-change="sortChange" :chartData="chartData" />
|
||||
<operatingBar :dateData="dateData" @sort-change="sortChange" :chartData="chartData" />
|
||||
</div>
|
||||
</div>
|
||||
</Container>
|
||||
@@ -53,6 +53,10 @@ export default {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
dateData: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -79,12 +83,11 @@ export default {
|
||||
* @param {number} rate 处理后的rate值(已*100)
|
||||
* @returns {0|1} flag值
|
||||
*/
|
||||
getRateFlag(rate) {
|
||||
// 处理非数字/空值,默认返回 0
|
||||
if (isNaN(rate) || rate === null || rate === undefined) return 0;
|
||||
// 核心逻辑:≥100 → 1;<100 → 0
|
||||
return rate >= 100 ? 1 : 0;
|
||||
},
|
||||
|
||||
getRateFlag(rate) {
|
||||
if (isNaN(rate) || rate === null || rate === undefined) return 0;
|
||||
return +(rate >= 100 || rate === 0); // + 号将布尔值转为数字(true→1,false→0)
|
||||
},
|
||||
|
||||
/**
|
||||
* 核心处理函数:在所有数据都准备好后,才组装 chartData
|
||||
|
||||
@@ -242,90 +242,8 @@ export default {
|
||||
]
|
||||
};
|
||||
|
||||
// 毛利率场景数据
|
||||
const grossProfitData = {
|
||||
series: [
|
||||
// 1. 完成率(折线图)
|
||||
{
|
||||
name: '完成率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
lineStyle: { color: 'rgba(40, 138, 255, .5)', width: 2 },
|
||||
itemStyle: {
|
||||
color: 'rgba(40, 138, 255, 1)',
|
||||
borderColor: 'rgba(40, 138, 255, 1)',
|
||||
borderWidth: 2,
|
||||
radius: 4
|
||||
},
|
||||
areaStyle: {
|
||||
opacity: 0.2,
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(40, 138, 255, .9)' },
|
||||
{ offset: 1, color: 'rgba(40, 138, 255, 0)' }
|
||||
])
|
||||
},
|
||||
data: [106.7, 96.9, 106.5, 106.1, 93.8, 105.9], // 毛利率完成率(%)
|
||||
symbol: 'circle',
|
||||
symbolSize: 6
|
||||
},
|
||||
// 2. 目标(柱状图)
|
||||
{
|
||||
name: '目标',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(130, 204, 255, 1)' },
|
||||
{ offset: 1, color: 'rgba(75, 157, 255, 1)' }
|
||||
]
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: [30, 32, 31, 33, 32, 34] // 目标毛利率(万元)
|
||||
},
|
||||
// 3. 实际(柱状图)
|
||||
{
|
||||
name: '实际',
|
||||
type: 'bar',
|
||||
yAxisIndex: 0,
|
||||
barWidth: 14,
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
const safeFlag = [1, 0, 1, 1, 0, 1]; // 达标状态
|
||||
const currentFlag = safeFlag[params.dataIndex] || 0;
|
||||
return currentFlag === 1
|
||||
? {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(174, 239, 224, 1)' },
|
||||
{ offset: 1, color: 'rgba(118, 218, 190, 1)' }
|
||||
]
|
||||
}
|
||||
: {
|
||||
type: 'linear',
|
||||
x: 0, y: 0, x2: 0, y2: 1,
|
||||
colorStops: [
|
||||
{ offset: 0, color: 'rgba(253, 209, 129, 1)' },
|
||||
{ offset: 1, color: 'rgba(249, 164, 74, 1)' }
|
||||
]
|
||||
};
|
||||
},
|
||||
borderRadius: [4, 4, 0, 0],
|
||||
borderWidth: 0
|
||||
},
|
||||
data: [32, 31, 33, 35, 30, 36] // 实际毛利率(万元)
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// 根据按钮状态返回对应数据
|
||||
return this.activeButton === 0 ? salesData : grossProfitData;
|
||||
return salesData
|
||||
}
|
||||
},
|
||||
methods: {},
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
{{ ytdData?.rate || 0 }}%
|
||||
</div>
|
||||
<div class="mom">
|
||||
环比{{ ytdData?.yoyRate || 0 }}%
|
||||
同比{{ ytdData?.yoyRate || 0 }}%
|
||||
<img v-if="ytdData?.yoyRate >= 0" class="arrow" src="../../../assets/img/topArrow.png" alt="">
|
||||
<img v-else class="arrow" src="../../../assets/img/downArrow.png" alt="">
|
||||
</div>
|
||||
|
||||
@@ -99,7 +99,7 @@ export default {
|
||||
// boundaryGap: [10, 0], // 可根据需要开启,控制轴的留白
|
||||
axisTick: { show: false },
|
||||
min: 0,
|
||||
// scale: true,
|
||||
//
|
||||
splitNumber: 4,
|
||||
axisLine: {
|
||||
show: true,
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<!-- 收入模块(传递整合了flag的incomeData) -->
|
||||
<div class="dashboard left" @click="handleDashboardClick('/operatingRevenue/operatingRevenueBase')">
|
||||
<div class="title">
|
||||
收入·单位/万元
|
||||
收入·万元
|
||||
</div>
|
||||
<div class="chart-wrap">
|
||||
<operatingSingleBar :detailData="incomeData"></operatingSingleBar>
|
||||
@@ -15,7 +15,7 @@
|
||||
<!-- 全成本模块(传递整合了flag的totalCostData) -->
|
||||
<div class="dashboard right" @click="handleDashboardClick('/fullCostAnalysis/fullCostAnalysisBase')">
|
||||
<div class="title">
|
||||
全成本·单位/万元
|
||||
全成本·万元
|
||||
</div>
|
||||
<div class="chart-wrap">
|
||||
<operatingSingleBar :detailData="totalCostData"></operatingSingleBar>
|
||||
@@ -44,6 +44,10 @@ export default {
|
||||
{ title: "全成本", budget: 0, real: 0, rate: 0, diff: 0 }
|
||||
]
|
||||
},
|
||||
dateData: { // 接收父组件传递的设备数据数组
|
||||
type: Object,
|
||||
default: () => { } // 默认空数组,避免报错
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
@@ -80,7 +84,8 @@ export default {
|
||||
this.$router.push({
|
||||
path: path,
|
||||
query: {
|
||||
factory: this.$route.query.factory ? this.$route.query.factory : this.factory
|
||||
factory: this.$route.query.factory ? this.$route.query.factory : this.factory,
|
||||
dateData: this.dateData
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user