@@ -102,72 +102,145 @@
export default {
name: "Container",
components: {},
- props: ["name", "size", "icon"],
+ props: ["orderOutput"],
data() {
return {
progress: 90, // 进度值基础参数
itemList: [
+ // {
+ // unit: "总进度",
+ // targetValue: 16,
+ // currentValue: 14.5,
+ // progress: 90,
+ // cities: [] // 总进度无需城市数据，留空
+ // },
+ // {
+ // unit: "一组",
+ // targetValue: 16,
+ // currentValue: 17,
+ // progress: 106,
+ // cities: [
+ // { name: "桐城", completed: 12, total: 13, progress: 92 },
+ // { name: "自贡", completed: 15, total: 16, progress: 93 } // 新增城市示例
+ // ]
+ // },
+ // {
+ // unit: "二组",
+ // targetValue: 16,
+ // currentValue: 16,
+ // progress: 100,
+ // cities: [
+ // { name: "蚌埠", completed: 10, total: 12, progress: 83 },
+ // { name: "合肥", completed: 8, total: 10, progress: 80 }
+ // ]
+ // },
+ // // 其他组同理，按需添加 cities 数据
+ // {
+ // unit: "三组",
+ // targetValue: 16,
+ // currentValue: 15.2,
+ // progress: 85,
+ // cities: [{ name: "宜兴", completed: 9, total: 11, progress: 81 }]
+ // },
+ // {
+ // unit: "四组",
+ // targetValue: 16,
+ // currentValue: 18,
+ // progress: 112,
+ // cities: [
+ // { name: "漳州", completed: 14, total: 15, progress: 93 },
+ // { name: "洛阳", completed: 12, total: 14, progress: 85 }
+ // ]
+ // },
+ // {
+ // unit: "五组",
+ // targetValue: 16,
+ // currentValue: 14,
+ // progress: 80,
+ // cities: [{ name: "桐城", completed: 7, total: 9, progress: 77 }]
+ // }
+ ]
+ };
+ },
+ watch: {
+ orderOutput: {
+ handler(newValue, oldValue) {
+ this.getItemData(newValue)
+ },
+ deep: true // 若对象内属性变化需触发，需加 deep: true
+ }
+ },
+ methods: {
+ getItemData(data) {
+ this.itemList = [
{
unit: "总进度",
- targetValue: 16,
- currentValue: 14.5,
- progress: 90,
+ targetValue: data.totalProgress.target,
+ currentValue: data.totalProgress.real,
+ progress: data.totalProgress.rate,
cities: [] // 总进度无需城市数据，留空
},
{
unit: "一组",
- targetValue: 16,
- currentValue: 17,
- progress: 106,
+ targetValue: data.group1.target,
+ currentValue: data.group1.real,
+ progress: data.group1.rate,
cities: [
- { name: "桐城", completed: 12, total: 13, progress: 92 },
- { name: "自贡", completed: 15, total: 16, progress: 93 } // 新增城市示例
+ { name: "桐城", completed: data[2].real, total: data[2].target, progress: data[2].rate,num:2 },
+ { name: "自贡", completed: data[3].real, total: data[3].target, progress: data[3].rate, num: 3 } // 新增城市示例
]
},
{
unit: "二组",
- targetValue: 16,
- currentValue: 16,
- progress: 100,
+ targetValue: data.group2.target,
+ currentValue: data.group2.real,
+ progress: data.group2.rate,
cities: [
- { name: "蚌埠", completed: 10, total: 12, progress: 83 },
- { name: "合肥", completed: 8, total: 10, progress: 80 }
+ { name: "蚌埠", completed: data[4].real, total: data[4].target, progress: data[4].rate, num: 4 },
+ { name: "合肥", completed: data[5].real, total: data[5].target, progress: data[5].rate, num: 5 }
]
},
// 其他组同理，按需添加 cities 数据
{
unit: "三组",
- targetValue: 16,
- currentValue: 15.2,
- progress: 85,
- cities: [{ name: "宜兴", completed: 9, total: 11, progress: 81 }]
+ targetValue: data.group3.target,
+ currentValue: data.group3.real,
+ progress: data.group3.rate,
+ cities: [{ name: "江苏凯盛", completed: data[6].real, total: data[6].target, progress: data[6].rate, num: 6 },
+ { name: "宜兴", completed: data[7].real, total: data[7].target, progress: data[7].rate, num: 7 }
+ ]
},
{
unit: "四组",
- targetValue: 16,
- currentValue: 18,
- progress: 112,
+ targetValue: data.group4.target,
+ currentValue: data.group4.real,
+ progress: data.group4.rate,
cities: [
- { name: "漳州", completed: 14, total: 15, progress: 93 },
- { name: "洛阳", completed: 12, total: 14, progress: 85 }
+ { name: "漳州", completed: data[8].real, total: data[8].target, progress: data[8].rate, num: 8 },
+ { name: "洛阳", completed: data[9].real, total: data[9].target, progress: data[9].rate, num: 9 }
]
},
{
unit: "五组",
- targetValue: 16,
- currentValue: 14,
- progress: 80,
- cities: [{ name: "桐城", completed: 7, total: 9, progress: 77 }]
+ targetValue: data.group5.target,
+ currentValue: data.group5.real,
+ progress: data.group5.rate,
+ cities: [{ name: "秦皇岛", completed: data[10].real, total: data[10].target, progress: data[10].rate, num: 10 },
+ // { name: "秦皇岛", completed: 7, total: 9, progress: 77 }
+ ]
}
]
- };
- },
- methods: {
+ },
// 颜色判断核心方法：实际值≥目标值返回绿色，否则返回橙色
getColor(currentValue, targetValue) {
return currentValue >= targetValue
? "rgba(98, 213, 180, 1)"
: "rgba(249, 164, 74, 1)";
+ },
+ getTableData(data) {
+ console.log(data, 'data');
+ this.$emit('handleShowTable',data)
+
}
}
};
@@ -466,15 +539,16 @@ export default {
}
/* 右上角折现边框（主边框） */
-.groupData::before {
- content: "";
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
-}
+// .groupData::before {
+// content: "";
+// position: absolute;
+// top: 0;
+// left: 0;
+// width: 100%;
+// height: 100%;
+// background-color: #000000;
+// clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
+// }
/* 右上角折现细节 */
.groupData::after {
diff --git a/src/views/home/components/orderColor.vue b/src/views/home/components/orderColor.vue
new file mode 100644
index 00000000..0d59ba1b
--- /dev/null
+++ b/src/views/home/components/orderColor.vue
@@ -0,0 +1,38 @@
+
+
+
+
+ {{ injectData.status === 2 ? '已完成' : injectData.status === 1 ? '生产中' : '' }}
+
+
+
+
+
+
+
diff --git a/src/views/home/components/orderProgress.vue b/src/views/home/components/orderProgress.vue
index 0d596ae6..f0536c20 100644
--- a/src/views/home/components/orderProgress.vue
+++ b/src/views/home/components/orderProgress.vue
@@ -1,9 +1,12 @@
@@ -11,52 +14,56 @@
diff --git a/src/views/home/components/proColor.vue b/src/views/home/components/proColor.vue
new file mode 100644
index 00000000..024cfef2
--- /dev/null
+++ b/src/views/home/components/proColor.vue
@@ -0,0 +1,41 @@
+
+
+
+
+ {{ injectData.progress }}
+
+
+
+
+
+
+
diff --git a/src/views/home/components/productBar.vue b/src/views/home/components/productBar.vue
index a2568f03..329e7c7d 100644
--- a/src/views/home/components/productBar.vue
+++ b/src/views/home/components/productBar.vue
@@ -19,30 +19,74 @@ import * as echarts from 'echarts';
export default {
name: 'Container',
+ props: ["chartData",'dateData'],
components: {},
data() {
- return {};
+ return {
+ myChart: null, // 存储 echarts 实例
+ };
+ },
+ // 关键：监听 chartData 变化
+ watch: {
+ chartData: {
+ handler(newData) {
+ this.updateChart(newData);
+ },
+ immediate: true, // 组件初始化时立即执行一次
+ deep: true, // 深度监听对象内部变化
+ }
},
- computed: {},
mounted() {
this.$nextTick(() => {
- this.initData();
+ this.initChart();
});
},
methods: {
- initData() {
- // 优先使用 ref 获取 DOM，避免 id 冲突
+ // 初始化图表实例
+ initChart() {
const chartDom = this.$refs.cockpitEffChip;
if (!chartDom) {
console.error('图表容器未找到！');
return;
}
- const myChart = echarts.init(chartDom);
+ this.myChart = echarts.init(chartDom);
+
+ // 初始化时调用一次更新
+ this.updateChart(this.chartData);
+
+ // 监听窗口缩放
+ window.addEventListener('resize', () => {
+ this.myChart?.resize();
+ });
+ },
+
+ // 核心：根据数据更新图表
+ updateChart(data) {
+ if (!this.myChart) {
+ // 如果实例还未初始化，则等待 initChart 完成后再更新
+ setTimeout(() => this.updateChart(data), 0);
+ return;
+ }
+
+ // 1. 处理数据，如果 data 无效则清空图表
+ if (!data || typeof data !== 'object' || (!data.real && !data.target)) {
+ this.myChart.setOption({
+ xAxis: { data: [] },
+ series: [{ data: [] }, { data: [] }]
+ });
+ return;
+ }
+
+ // 2. 提取 X 轴数据（从 real 或 target 中取键名）
+ const xAxisData = data.real ? Object.keys(data.real) : Object.keys(data.target);
+ console.log('xAxisData', xAxisData);
+
+ // 3. 提取 "实际" 和 "目标" 系列的数据
+ const realData = data.real ? Object.values(data.real) : [];
+ const targetData = data.target ? Object.values(data.target) : [];
+
+ // 4. 准备 echarts 的 option 配置
const option = {
- // color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
- // title: {
- // text: 'Gradient Stacked Area Chart'
- // },
tooltip: {
trigger: 'axis',
axisPointer: {
@@ -55,60 +99,56 @@ export default {
grid: {
top: 20,
bottom: 20,
- // top: 10,
- // bottom: 20,
right: 25,
},
- // legend: {
- // data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5']
- // },
- // toolbox: {
- // feature: {
- // saveAsImage: {}
- // }
- // },
xAxis: [
{
type: 'category',
boundaryGap: false,
- axisTick: {
- show: false
- },
+ axisTick: { show: false },
axisLine: {
show: true,
onZero: false,
- lineStyle: {
- color: 'rgba(0, 0, 0, 0.15)'
- }
+ lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
},
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12,
interval: 0,
- width: 38,
- overflow: 'break'
+ // 这里可以根据需要调整标签的显示方式
+ formatter: (value) => {
+ const dateParts = value.split('-'); // ["2025", "07", "01"]
+ if (dateParts.length < 2) return value; // 处理异常格式
+
+ switch (this.dateData.mode) {
+ case 1: // 日模式，显示“月-日”
+ // 确保有日的部分
+ return dateParts.length >= 3
+ ? `${dateParts[1]}月${dateParts[2]}日`
+ : `${dateParts[1]}月`; // fallback
+ case 2: // 月模式，显示“月”
+ return `${dateParts[1]}月`;
+ case 3: // 年模式，显示“年”
+ return `${dateParts[0]}年`;
+ default: // 默认月模式
+ return `${dateParts[1]}月`;
+ }
+ }
},
- data: ['6月', '7月', '8月', '9月', '10月', '11月']
+ data: xAxisData // 使用提取出的 X 轴数据
}
],
yAxis: {
type: 'value',
- // name: '单位/片',
nameTextStyle: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 14,
align: 'left'
},
- min: function (value) {
- return 0
- },
- max: function (value) {
- return Math.ceil(value.max)
- },
+ min: 0,
+ // max: function (value) { return Math.ceil(value.max * 1.1); }, // 增加一点余量
scale: true,
- axisTick: {
- show: false
- },
+ axisTick: { show: false },
axisLabel: {
color: 'rgba(0, 0, 0, 0.45)',
fontSize: 12
@@ -116,101 +156,88 @@ export default {
splitLine: {
lineStyle: {
color: 'rgba(0, 0, 0, 0.15)',
- // type: 'dashed'
}
},
axisLine: {
show: true,
- lineStyle: {
- color: 'rgba(0, 0, 0, 0.15)'
- }
+ lineStyle: { color: 'rgba(0, 0, 0, 0.15)' }
}
},
series: [
{
name: '实际',
type: 'line',
- stack: 'Total',
- symbol: 'circle', // 点的形状（circle为圆形）
+ // stack: 'Total', // 趋势图通常不需要堆叠
+ symbol: 'circle',
+ symbolSize: 8,
lineStyle: {
- color: 'rgba(255, 132, 0, .5)',
+ color: 'rgba(255, 132, 0, 1)', // 加深颜色
+ width: 2,
},
itemStyle: {
- color: 'rgba(255, 132, 0, .5)',
- borderColor: 'rgba(255, 132, 0, .5)', // 数据点边框色（白色）
- borderWidth: 2, // 数据点边框宽度
+ color: 'rgba(255, 132, 0, 1)',
+ borderColor: '#fff',
+ borderWidth: 2,
},
areaStyle: {
- opacity: 0.5,
+ opacity: 0.3,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(255, 132, 0, .4)',
- },
- {
- offset: 1,
- color: 'rgba(18, 255, 245, 0)',
- },
+ { offset: 0, color: 'rgba(255, 132, 0, .5)' },
+ { offset: 1, color: 'rgba(255, 132, 0, 0)' },
]),
},
- // emphasis: { focus: 'series' },
- data: [140, 232, 101, 264, 90, 340, 250]
+ data: realData // 使用提取出的 "实际" 数据
},
{
name: '目标',
type: 'line',
- stack: 'Total',
- symbol: 'circle', // 点的形状（circle为圆形）
+ // stack: 'Total',
+ symbol: 'circle',
+ symbolSize: 8,
lineStyle: {
- color: 'rgba(98, 213, 180, .5)',
+ color: 'rgba(98, 213, 180, 1)', // 加深颜色
+ width: 2,
+ type: 'dashed' // 目标线使用虚线
},
itemStyle: {
- color: 'rgba(98, 213, 180, .5)',
- borderColor: 'rgba(98, 213, 180, .5)', // 数据点边框色（白色）
- borderWidth: 2, // 数据点边框宽度
+ color: 'rgba(98, 213, 180, 1)',
+ borderColor: '#fff',
+ borderWidth: 2,
},
areaStyle: {
- opacity: 0.5,
+ opacity: 0.3,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: 'rgba(98, 213, 180,.4)',
- },
- {
- offset: 1,
- color: 'rgba(18, 255, 245, 0)',
- },
+ { offset: 0, color: 'rgba(98, 213, 180, .5)' },
+ { offset: 1, color: 'rgba(98, 213, 180, 0)' },
]),
},
- // emphasis: { focus: 'series' },
- data: [120, 282, 111, 234, 220, 340, 310]
+ data: targetData // 使用提取出的 "目标" 数据
},
]
};
- option && myChart.setOption(option);
-
- // 监听窗口缩放
- window.addEventListener('resize', () => {
- myChart.resize();
- });
-
- // 组件销毁时清理
- this.$once('hook:destroyed', () => {
- window.removeEventListener('resize', () => {
- myChart.resize();
- });
- myChart.dispose();
- });
+ // 5. 应用配置项更新图表
+ this.myChart.setOption(option, true);
}
},
+ beforeDestroy() {
+ // 组件销毁时清理
+ window.removeEventListener('resize', () => {
+ this.myChart?.resize();
+ });
+ this.myChart?.dispose();
+ }
};
diff --git a/src/views/home/components/productBottomBar.vue b/src/views/home/components/productBottomBar.vue
index ef820ec3..278eb111 100644
--- a/src/views/home/components/productBottomBar.vue
+++ b/src/views/home/components/productBottomBar.vue
@@ -1,107 +1,81 @@
-
生产指标趋势
-
-
-
- 投入产出率
-
+ 投入产出率