This commit is contained in:
‘937886381’
2026-01-06 13:48:11 +08:00
parent 20ef2b9763
commit 5605eeab06
287 changed files with 1890 additions and 1381 deletions

View File

@@ -63,9 +63,9 @@ export default {
deep: true,
},
},
mounted() {
this.processTrendData(this.trend);
},
// mounted() {
// this.processTrendData(this.trend);
// },
methods: {
handleChange(value) {
this.$emit("handleChange", value);
@@ -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 = [];

View File

@@ -2,9 +2,6 @@
<div class="coreBar">
<!-- 新增行容器包裹各基地情况和barTop -->
<div class="header-row">
<div class="base-title">
各基地情况
</div>
<div class="barTop">
<!-- 关键新增右侧容器包裹图例和按钮组实现整体靠右 -->
<div class="right-container">
@@ -263,9 +260,9 @@ export default {
// 新增:头部行容器,实现一行排列
.header-row {
display: flex;
justify-content: space-between; // 左右两端对齐
justify-content: flex-end; // 左右两端对齐
align-items: center; // 垂直居中
width: 100%;
// width: 100%;
margin-bottom: 8px; // 与下方图表区保留间距(可根据需求调整)
}
@@ -287,7 +284,6 @@ export default {
// 保留原有align-items确保内部元素垂直居中
align-items: center;
gap: 16px;
// 1. 右侧容器:包裹图例和按钮组,整体靠右
.right-container {
display: flex;

View File

@@ -6,7 +6,7 @@
<!-- 管理费用模块 -->
<div class="dashboard">
<div class="title">
管理费用·单位/万元
管理费用·万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="manageCostData"></operatingSingleBar>
@@ -15,7 +15,7 @@
<!-- 销售费用模块 -->
<div class="dashboard">
<div class="title">
销售费用·单位/万元
销售费用·万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="saleCostData"></operatingSingleBar>
@@ -24,7 +24,7 @@
<!-- 财务费用模块 -->
<div class="dashboard">
<div class="title">
财务费用·单位/万元
财务费用·万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="financeCostData"></operatingSingleBar>

View File

@@ -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 {

View File

@@ -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)',

View File

@@ -117,7 +117,7 @@ export default {
fontSize: 12,
align: 'right'
},
scale: true,
splitNumber: 4,
axisTick: { show: false },
axisLabel: {

View File

@@ -28,7 +28,11 @@ export default {
chartData: {
type: Object,
default: () => ({}),
}
},
dateData: {
type: Object,
default: () => ({}),
},
},
mounted() {
this.$nextTick(() => {
@@ -80,7 +84,8 @@ export default {
path: 'expenseAnalysisBase',
query: { // 使用query传递参数推荐也可使用params
// baseName: itemName,
factory: baseIndex
factory: baseIndex,
dateData: this.dateData
}
// 若仍需用base作为参数
// base: itemName,
@@ -116,11 +121,11 @@ export default {
}
}
},
grid: {
grid: {
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: {

View File

@@ -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,
}
],

View File

@@ -123,7 +123,7 @@ export default {
type: 'solid' // 实线可选dashed虚线、dotted点线
}
},
scale: true,
splitNumber: 2,
axisTick: { show: false },
axisLabel: {

View File

@@ -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>
@@ -56,8 +56,11 @@ export default {
target: 0
},
factory: []
}),
required: true
})
},
dateData: {
type: Object,
default: () => ({})
},
},
data() {

View File

@@ -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 {

View File

@@ -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>

View File

@@ -99,7 +99,7 @@ export default {
// boundaryGap: [10, 0], // 可根据需要开启,控制轴的留白
axisTick: { show: false },
min: 0,
// scale: true,
//
splitNumber: 4,
axisLine: {
show: true,

View File

@@ -6,7 +6,7 @@
<!-- 管理费用模块 -->
<div class="dashboard">
<div class="title">
管理费用·单位/万元
管理费用·万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="manageCostData"></operatingSingleBar>
@@ -15,7 +15,7 @@
<!-- 销售费用模块 -->
<div class="dashboard">
<div class="title">
销售费用·单位/万元
销售费用·万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="saleCostData"></operatingSingleBar>
@@ -24,7 +24,7 @@
<!-- 财务费用模块 -->
<div class="dashboard">
<div class="title">
财务费用·单位/万元
财务费用·万元
</div>
<div class="chart-wrap">
<operatingSingleBar :detailData="financeCostData"></operatingSingleBar>