Compare commits
No commits in common. "486cffd64e8f7ad6ad5e2c84d17c1abd68593964" and "aa6ae82607ddd8195f2916c063ce740fe7ce7e9a" have entirely different histories.
486cffd64e
...
aa6ae82607
@ -62,32 +62,7 @@ export default {
|
|||||||
top: "15%",
|
top: "15%",
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {},
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
// type: "cross",
|
|
||||||
crossStyle: {
|
|
||||||
color: "rgba(237,237,237,0.5)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
|
|
||||||
backgroundColor: '#001829',
|
|
||||||
borderColor: '#001829',
|
|
||||||
formatter: params => {
|
|
||||||
console.log('params', params)
|
|
||||||
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
|
|
||||||
for (var i = 0, l = params.length; i < l; i++) {
|
|
||||||
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
|
|
||||||
// console.log(item.color, color);
|
|
||||||
res +=
|
|
||||||
"<br/>" +
|
|
||||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
|
||||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
|
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
|
|
||||||
}
|
|
||||||
return res;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
@ -213,13 +188,13 @@ export default {
|
|||||||
this.canvasReset()
|
this.canvasReset()
|
||||||
},
|
},
|
||||||
isFullscreen(val) {
|
isFullscreen(val) {
|
||||||
this.options.series.map((item) => {
|
this.actualOptions.series.map((item) => {
|
||||||
item.barWidth = val ? 18 : 12;
|
item.barWidth = val ? 18 : 12;
|
||||||
});
|
});
|
||||||
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||||
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||||
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||||
this.initChart(this.options);
|
this.initChart(this.actualOptions);
|
||||||
// this.actualOptions.series.map((item) => {
|
// this.actualOptions.series.map((item) => {
|
||||||
// item.barWidth = val ? 18 : 12;
|
// item.barWidth = val ? 18 : 12;
|
||||||
// });
|
// });
|
||||||
@ -234,14 +209,14 @@ export default {
|
|||||||
this.initChart(this.options);
|
this.initChart(this.options);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// const actualOptions = JSON.parse(JSON.stringify(this.options));
|
const actualOptions = JSON.parse(JSON.stringify(this.options));
|
||||||
// console.log('actualOptions', this.options)
|
console.log('actualOptions', this.options)
|
||||||
this.options.series[0].data = val[0].data;
|
actualOptions.series[0].data = val[0].data;
|
||||||
this.options.series[0].name = val[0].name;
|
actualOptions.series[0].name = val[0].name;
|
||||||
this.options.series[1].data = val?.[1]?.data || [];
|
actualOptions.series[1].data = val?.[1]?.data || [];
|
||||||
this.options.series[1].name = val?.[1]?.name || "";
|
actualOptions.series[1].name = val?.[1]?.name || "";
|
||||||
// this.actualOptions = actualOptions;
|
this.actualOptions = actualOptions;
|
||||||
this.initChart(this.options);
|
this.initChart(actualOptions);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -250,7 +225,7 @@ export default {
|
|||||||
this.isFullscreen = screenfull.isFullscreen;
|
this.isFullscreen = screenfull.isFullscreen;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// this.actualOptions = this.options
|
this.actualOptions = this.options
|
||||||
this.canvasReset();
|
this.canvasReset();
|
||||||
window.addEventListener("resize", this.canvasReset);
|
window.addEventListener("resize", this.canvasReset);
|
||||||
},
|
},
|
||||||
@ -274,7 +249,7 @@ export default {
|
|||||||
this.chart.dispose();
|
this.chart.dispose();
|
||||||
}
|
}
|
||||||
this.chart = echarts.init(this.$refs.chart);
|
this.chart = echarts.init(this.$refs.chart);
|
||||||
this.chart.setOption(this.options);
|
this.chart.setOption(this.actualOptions);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-23 15:49:14
|
* @Date: 2024-05-23 15:49:14
|
||||||
* @LastEditTime: 2024-07-03 14:08:52
|
* @LastEditTime: 2024-06-04 08:54:10
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -63,32 +63,7 @@ export default {
|
|||||||
top: "15%",
|
top: "15%",
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {},
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
// type: "cross",
|
|
||||||
crossStyle: {
|
|
||||||
color: "rgba(237,237,237,0.5)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
|
|
||||||
backgroundColor: '#001829',
|
|
||||||
borderColor: '#001829',
|
|
||||||
formatter: params => {
|
|
||||||
console.log('params', params)
|
|
||||||
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
|
|
||||||
for (var i = 0, l = params.length; i < l; i++) {
|
|
||||||
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
|
|
||||||
// console.log(item.color, color);
|
|
||||||
res +=
|
|
||||||
"<br/>" +
|
|
||||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
|
||||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
|
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
|
|
||||||
}
|
|
||||||
return res;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
@ -214,13 +189,13 @@ export default {
|
|||||||
this.canvasReset()
|
this.canvasReset()
|
||||||
},
|
},
|
||||||
isFullscreen(val) {
|
isFullscreen(val) {
|
||||||
this.options.series.map((item) => {
|
this.actualOptions.series.map((item) => {
|
||||||
item.barWidth = val ? 18 : 12;
|
item.barWidth = val ? 18 : 12;
|
||||||
});
|
});
|
||||||
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||||
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||||
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||||
this.initChart(this.options);
|
this.initChart(this.actualOptions);
|
||||||
// this.actualOptions.series.map((item) => {
|
// this.actualOptions.series.map((item) => {
|
||||||
// item.barWidth = val ? 18 : 12;
|
// item.barWidth = val ? 18 : 12;
|
||||||
// });
|
// });
|
||||||
@ -235,14 +210,14 @@ export default {
|
|||||||
this.initChart(this.options);
|
this.initChart(this.options);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// const actualOptions = JSON.parse(JSON.stringify(this.options));
|
const actualOptions = JSON.parse(JSON.stringify(this.options));
|
||||||
// console.log('actualOptions', this.options)
|
console.log('actualOptions', this.options)
|
||||||
this.options.series[0].data = val[0].data;
|
actualOptions.series[0].data = val[0].data;
|
||||||
this.options.series[0].name = val[0].name;
|
actualOptions.series[0].name = val[0].name;
|
||||||
this.options.series[1].data = val[1].data;
|
actualOptions.series[1].data = val[1].data;
|
||||||
this.options.series[1].name = val[1].name;
|
actualOptions.series[1].name = val[1].name;
|
||||||
// this.actualOptions = actualOptions;
|
this.actualOptions = actualOptions;
|
||||||
this.initChart(this.options);
|
this.initChart(actualOptions);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -251,7 +226,7 @@ export default {
|
|||||||
this.isFullscreen = screenfull.isFullscreen;
|
this.isFullscreen = screenfull.isFullscreen;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// this.actualOptions = this.options
|
this.actualOptions = this.options
|
||||||
this.canvasReset();
|
this.canvasReset();
|
||||||
window.addEventListener("resize", this.canvasReset);
|
window.addEventListener("resize", this.canvasReset);
|
||||||
},
|
},
|
||||||
@ -275,7 +250,7 @@ export default {
|
|||||||
this.chart.dispose();
|
this.chart.dispose();
|
||||||
}
|
}
|
||||||
this.chart = echarts.init(this.$refs.ftoChart);
|
this.chart = echarts.init(this.$refs.ftoChart);
|
||||||
this.chart.setOption(this.options);
|
this.chart.setOption(this.actualOptions);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-07 13:22:43
|
* @Date: 2024-05-07 13:22:43
|
||||||
* @LastEditTime: 2024-07-03 14:08:44
|
* @LastEditTime: 2024-06-17 09:22:17
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -62,32 +62,7 @@ export default {
|
|||||||
top: "15%",
|
top: "15%",
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {},
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
// type: "cross",
|
|
||||||
crossStyle: {
|
|
||||||
color: "rgba(237,237,237,0.5)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
|
|
||||||
backgroundColor: '#001829',
|
|
||||||
borderColor: '#001829',
|
|
||||||
formatter: params => {
|
|
||||||
console.log('params', params)
|
|
||||||
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
|
|
||||||
for (var i = 0, l = params.length; i < l; i++) {
|
|
||||||
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
|
|
||||||
// console.log(item.color, color);
|
|
||||||
res +=
|
|
||||||
"<br/>" +
|
|
||||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
|
||||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
|
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
|
|
||||||
}
|
|
||||||
return res;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
@ -266,7 +241,7 @@ export default {
|
|||||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||||
this.initChart(this.options)
|
this.initChart(this.actualOptions)
|
||||||
this.canvasReset()
|
this.canvasReset()
|
||||||
},
|
},
|
||||||
series(val) {
|
series(val) {
|
||||||
@ -277,14 +252,14 @@ export default {
|
|||||||
// console.log('val', val)
|
// console.log('val', val)
|
||||||
const actualOptions = JSON.parse(JSON.stringify(this.options))
|
const actualOptions = JSON.parse(JSON.stringify(this.options))
|
||||||
console.log(actualOptions)
|
console.log(actualOptions)
|
||||||
this.options.series[0].data = val[0].data;
|
actualOptions.series[0].data = val[0].data;
|
||||||
this.options.series[0].name = val[0].name;
|
actualOptions.series[0].name = val[0].name;
|
||||||
this.options.series[1].data = val?.[1]?.data;
|
actualOptions.series[1].data = val?.[1]?.data;
|
||||||
this.options.series[1].name = val?.[1]?.name;
|
actualOptions.series[1].name = val?.[1]?.name;
|
||||||
this.options.series[2].data = val?.[2]?.data || [];
|
actualOptions.series[2].data = val?.[2]?.data || [];
|
||||||
this.options.series[2].name = val?.[2]?.name || "";
|
actualOptions.series[2].name = val?.[2]?.name || "";
|
||||||
this.actualOptions = actualOptions;
|
this.actualOptions = actualOptions;
|
||||||
this.initChart(this.options);
|
this.initChart(actualOptions);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -298,7 +273,7 @@ export default {
|
|||||||
this.isFullscreen = screenfull.isFullscreen;
|
this.isFullscreen = screenfull.isFullscreen;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// this.actualOptions = this.options
|
this.actualOptions = this.options
|
||||||
this.canvasReset();
|
this.canvasReset();
|
||||||
window.addEventListener("resize", this.canvasReset);
|
window.addEventListener("resize", this.canvasReset);
|
||||||
},
|
},
|
||||||
@ -321,7 +296,7 @@ export default {
|
|||||||
this.chart.dispose();
|
this.chart.dispose();
|
||||||
}
|
}
|
||||||
this.chart = echarts.init(this.$refs.oeeChart);
|
this.chart = echarts.init(this.$refs.oeeChart);
|
||||||
this.chart.setOption(this.options);
|
this.chart.setOption(this.actualOptions);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-23 15:50:44
|
* @Date: 2024-05-23 15:50:44
|
||||||
* @LastEditTime: 2024-07-03 14:08:12
|
* @LastEditTime: 2024-06-17 09:23:39
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -62,32 +62,7 @@ export default {
|
|||||||
top: "15%",
|
top: "15%",
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {},
|
||||||
trigger: "axis",
|
|
||||||
axisPointer: {
|
|
||||||
// type: "cross",
|
|
||||||
crossStyle: {
|
|
||||||
color: "rgba(237,237,237,0.5)",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
|
|
||||||
backgroundColor: '#001829',
|
|
||||||
borderColor: '#001829',
|
|
||||||
formatter: params => {
|
|
||||||
console.log('params', params)
|
|
||||||
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
|
|
||||||
for (var i = 0, l = params.length; i < l; i++) {
|
|
||||||
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
|
|
||||||
// console.log(item.color, color);
|
|
||||||
res +=
|
|
||||||
"<br/>" +
|
|
||||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
|
||||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
|
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
|
|
||||||
}
|
|
||||||
return res;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
axisTick: {
|
axisTick: {
|
||||||
show: false,
|
show: false,
|
||||||
@ -266,7 +241,7 @@ export default {
|
|||||||
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||||
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
|
||||||
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
|
||||||
this.initChart(this.options)
|
this.initChart(this.actualOptions)
|
||||||
this.canvasReset()
|
this.canvasReset()
|
||||||
},
|
},
|
||||||
series(val) {
|
series(val) {
|
||||||
@ -275,15 +250,15 @@ export default {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
console.log(val)
|
console.log(val)
|
||||||
// const actualOptions = JSON.parse(JSON.stringify(this.options))
|
const actualOptions = JSON.parse(JSON.stringify(this.options))
|
||||||
this.options.series[0].data = val[0].data;
|
actualOptions.series[0].data = val[0].data;
|
||||||
this.options.series[0].name = val[0].name;
|
actualOptions.series[0].name = val[0].name;
|
||||||
this.options.series[1].data = val?.[1]?.data || [];
|
actualOptions.series[1].data = val?.[1]?.data || [];
|
||||||
this.options.series[1].name = val?.[1]?.name || "";
|
actualOptions.series[1].name = val?.[1]?.name || "";
|
||||||
this.options.series[2].data = val?.[2]?.data || [];
|
actualOptions.series[2].data = val?.[2]?.data || [];
|
||||||
this.options.series[2].name = val?.[2]?.name || "";
|
actualOptions.series[2].name = val?.[2]?.name || "";
|
||||||
// this.actualOptions = actualOptions;
|
this.actualOptions = actualOptions;
|
||||||
this.initChart(this.options);
|
this.initChart(actualOptions);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -297,7 +272,7 @@ export default {
|
|||||||
this.isFullscreen = screenfull.isFullscreen;
|
this.isFullscreen = screenfull.isFullscreen;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
// this.actualOptions = this.options
|
this.actualOptions = this.options
|
||||||
this.canvasReset();
|
this.canvasReset();
|
||||||
window.addEventListener("resize", this.canvasReset);
|
window.addEventListener("resize", this.canvasReset);
|
||||||
},
|
},
|
||||||
@ -320,7 +295,7 @@ export default {
|
|||||||
this.chart.dispose();
|
this.chart.dispose();
|
||||||
}
|
}
|
||||||
this.chart = echarts.init(this.$refs.oeeChart);
|
this.chart = echarts.init(this.$refs.oeeChart);
|
||||||
this.chart.setOption(this.options);
|
this.chart.setOption(this.actualOptions);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -318,8 +318,6 @@ export default {
|
|||||||
.legend-item {
|
.legend-item {
|
||||||
margin-left: 15px;
|
margin-left: 15px;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-size: 16px;
|
|
||||||
// font-weight: 600;
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
// align-items: center;
|
// align-items: center;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@ -373,6 +371,8 @@ export default {
|
|||||||
background: #003982;
|
background: #003982;
|
||||||
}
|
}
|
||||||
.legend-item__value {
|
.legend-item__value {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -80,7 +80,7 @@ export default {
|
|||||||
res +=
|
res +=
|
||||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
||||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
|
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
|
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value + '片'}</span>`;
|
||||||
}
|
}
|
||||||
return res;
|
return res;
|
||||||
},
|
},
|
||||||
@ -117,7 +117,6 @@ export default {
|
|||||||
yAxis: {
|
yAxis: {
|
||||||
type: "value",
|
type: "value",
|
||||||
name: "单位/片",
|
name: "单位/片",
|
||||||
position: 'left',
|
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: "rgba(255, 255, 255, 0.7)",
|
color: "rgba(255, 255, 255, 0.7)",
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-05-30 08:58:39
|
* @Date: 2024-05-30 08:58:39
|
||||||
* @LastEditTime: 2024-07-03 14:10:06
|
* @LastEditTime: 2024-07-02 10:53:34
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -110,7 +110,7 @@ export default {
|
|||||||
"<br/>" +
|
"<br/>" +
|
||||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
||||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
|
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
|
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value + '片'}</span>`;
|
||||||
}
|
}
|
||||||
return res;
|
return res;
|
||||||
},
|
},
|
||||||
@ -132,7 +132,6 @@ export default {
|
|||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
name: "单位/片",
|
name: "单位/片",
|
||||||
position: 'left',
|
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
@ -338,7 +337,6 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
|
||||||
.bar-chart-base {
|
.bar-chart-base {
|
||||||
// position: relative;
|
// position: relative;
|
||||||
|
|
||||||
@ -352,7 +350,7 @@ export default {
|
|||||||
position: relative;
|
position: relative;
|
||||||
// font-size: 12px;
|
// font-size: 12px;
|
||||||
margin-right:1.2vw;
|
margin-right:1.2vw;
|
||||||
color: #DFF1FE;
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: "";
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -40,7 +40,6 @@ export default {
|
|||||||
evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
|
evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
|
||||||
data: [],
|
data: [],
|
||||||
rowNum: 12,
|
rowNum: 12,
|
||||||
fontSize:14,
|
|
||||||
waitTime: 3000,
|
waitTime: 3000,
|
||||||
columnWidth: [150],
|
columnWidth: [150],
|
||||||
align: ["left"],
|
align: ["left"],
|
||||||
@ -114,19 +113,19 @@ export default {
|
|||||||
`<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
|
`<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
|
||||||
}</span>`,
|
}</span>`,
|
||||||
`<span style="display:inline-block;width:45px;">${this.prodOrder[i].productionProgress
|
`<span style="display:inline-block;width:45px;">${this.prodOrder[i].productionProgress
|
||||||
? this.prodOrder[i].productionProgress.toFixed(0) * 100 + "%"
|
? this.prodOrder[i].productionProgress.toFixed(0) + "%"
|
||||||
: "0%"
|
: "0%"
|
||||||
}</span>
|
}</span>
|
||||||
<div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
|
<div style="display:inline-block;height:20px;margin-top:-5px;vertical-align:middle;">
|
||||||
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
|
<svg xmlns="http://www.w3.org/200/svg" height="20" width="20">
|
||||||
<circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
|
<circle cx="10" cy="10" r="6" fill="none" stroke="#283851" stroke-width="4" stroke-linecap="round"/>
|
||||||
<circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${this.prodOrder[i].productionProgress
|
<circle style="transform-origin: center;transform: rotate(-90deg);" id="J_progress_bar" cx="10" cy="10" r="6" fill="none" stroke="#47FF27" stroke-width="4" stroke-dasharray="${this.prodOrder[i].productionProgress
|
||||||
? this.prodOrder[i].productionProgress.toFixed(0) *100 *
|
? this.prodOrder[i].productionProgress.toFixed(0) *
|
||||||
37.68 *
|
37.68 *
|
||||||
0.01 +
|
0.01 +
|
||||||
"," +
|
"," +
|
||||||
(1 -
|
(1 -
|
||||||
this.prodOrder[i].productionProgress.toFixed(0) * 0.01) * 100 *
|
this.prodOrder[i].productionProgress.toFixed(0) * 0.01) *
|
||||||
37.68
|
37.68
|
||||||
: 0 + "," + 37.68
|
: 0 + "," + 37.68
|
||||||
}"/>
|
}"/>
|
||||||
|
@ -249,7 +249,7 @@ export default {
|
|||||||
// width: 5vw;
|
// width: 5vw;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
// text-align: left;
|
text-align: left;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-06-06 14:22:56
|
* @Date: 2024-06-06 14:22:56
|
||||||
* @LastEditTime: 2024-07-02 13:54:08
|
* @LastEditTime: 2024-06-07 10:53:39
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -62,7 +62,7 @@ button {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
line-height: 22px;
|
line-height: 22px;
|
||||||
/* letter-spacing: 5px; */
|
letter-spacing: 5px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
letter-spacing: 10px;
|
letter-spacing: 10px;
|
||||||
|
@ -116,12 +116,7 @@ export default {
|
|||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
left: 8%;
|
left: 8%;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background: radial-gradient(
|
background: linear-gradient(to right, #024798, transparent);
|
||||||
circle at center,
|
|
||||||
#024798 2%,
|
|
||||||
#024798 30%,
|
|
||||||
transparent
|
|
||||||
);
|
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -79,13 +79,14 @@ export default {
|
|||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.copilot-container {
|
.copilot-container {
|
||||||
height: 100%;
|
height: 0;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: inset 0 0 20px 1px #fff1;
|
box-shadow: inset 0 0 20px 1px #fff1;
|
||||||
backdrop-filter: blur(4px);
|
backdrop-filter: blur(4px);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -196,7 +196,7 @@ export default {
|
|||||||
gap: 16px;
|
gap: 16px;
|
||||||
.flex {
|
.flex {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 16px;
|
gap: 20px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
.top > div,
|
.top > div,
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-04-28 13:42:51
|
* @Date: 2024-04-28 13:42:51
|
||||||
* @LastEditTime: 2024-07-03 15:56:48
|
* @LastEditTime: 2024-06-14 09:03:26
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -53,32 +53,7 @@ export default {
|
|||||||
top: 0,
|
top: 0,
|
||||||
containLabel: true,
|
containLabel: true,
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {},
|
||||||
trigger: "item",
|
|
||||||
// axisPointer: {
|
|
||||||
// // type: "cross",
|
|
||||||
// crossStyle: {
|
|
||||||
// color: "rgba(237,237,237,0.5)",
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
|
|
||||||
backgroundColor: '#001829',
|
|
||||||
borderColor: '#001829',
|
|
||||||
formatter: params => {
|
|
||||||
console.log('params', params)
|
|
||||||
var res = ``;
|
|
||||||
for (var i = 0, l = params.length; i < l; i++) {
|
|
||||||
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
|
|
||||||
// console.log(item.color, color);
|
|
||||||
res +=
|
|
||||||
// `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
|
||||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
|
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
|
|
||||||
}
|
|
||||||
console.log('res',res)
|
|
||||||
return res;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
title: {
|
title: {
|
||||||
text: "0%",
|
text: "0%",
|
||||||
left: "48%",
|
left: "48%",
|
||||||
@ -248,49 +223,40 @@ export default {
|
|||||||
actualOptions() {
|
actualOptions() {
|
||||||
console.log('this.output.current / this.output.target', this.output.current/this.output.target);
|
console.log('this.output.current / this.output.target', this.output.current/this.output.target);
|
||||||
const year = new Date().getFullYear()
|
const year = new Date().getFullYear()
|
||||||
const options = this.options
|
const options = JSON.parse(JSON.stringify(this.options));
|
||||||
// console.log('options', options);
|
// console.log('options', options);
|
||||||
// 标题
|
// 标题
|
||||||
if (!this.output.target && !this.output.current) options.title.text = "0%";
|
if (!this.output.target) options.title.text = "0%";
|
||||||
else if (!this.output.target && this.output.current) options.title.text = "100%";
|
else
|
||||||
else options.title.text =
|
options.title.text =
|
||||||
((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
|
((this.output.current / this.output.target).toFixed(2)) * 100 + "%";
|
||||||
// 外环
|
// 外环
|
||||||
if (
|
if (
|
||||||
this.output.current == this.output.target &&
|
this.output.current == this.output.target &&
|
||||||
this.output.current == 0
|
this.output.current == 0
|
||||||
) {
|
) {
|
||||||
this.options.series[1].data[0].value = 0;
|
options.series[1].data[0].value = 0;
|
||||||
this.options.series[1].data[1].value = 1;
|
options.series[1].data[1].value = 1;
|
||||||
this.options.series[1].data[0].tooltip.formatter =
|
options.series[1].data[0].tooltip.formatter = year + '累计完成:0';
|
||||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
|
options.series[1].data[1].tooltip.formatter = year + '累计完成:0';
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
|
|
||||||
this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
|
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
|
|
||||||
} else {
|
} else {
|
||||||
this.options.series[1].data[0].value = this.output.current;
|
options.series[1].data[0].value = this.output.current;
|
||||||
this.options.series[1].data[1].value =
|
options.series[1].data[1].value =
|
||||||
this.output.target - this.output.current;
|
this.output.target - this.output.current;
|
||||||
this.options.series[1].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
|
options.series[1].data[0].tooltip.formatter = year + '累计完成:' + this.output.current;
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`;
|
options.series[1].data[1].tooltip.formatter = year + '累计完成:' + this.output.current;
|
||||||
this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
|
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`;
|
|
||||||
}
|
}
|
||||||
// 内环
|
// 内环
|
||||||
if (this.output.previous == 0) {
|
if (this.output.previous == 0) {
|
||||||
this.options.series[2].data[0].value = 0;
|
options.series[2].data[0].value = 0;
|
||||||
this.options.series[2].data[1].value = 1;
|
options.series[2].data[1].value = 1;
|
||||||
this.options.series[2].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
|
options.series[2].data[0].tooltip.formatter = year-1 + '累计完成:' + 0;
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
|
options.series[2].data[1].tooltip.formatter = year-1 + '累计完成:' + 0;
|
||||||
this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
|
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`;
|
|
||||||
} else {
|
} else {
|
||||||
this.options.series[2].data[0].value = this.output.previous;
|
options.series[2].data[0].value = this.output.previous;
|
||||||
this.options.series[2].data[1].value = 0;
|
options.series[2].data[1].value = 0;
|
||||||
this.options.series[2].data[0].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year -1 + '累计完成'}</span>` +
|
options.series[2].data[0].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`;
|
options.series[2].data[1].tooltip.formatter = year - 1 + '累计完成:' + this.output.previous;
|
||||||
this.options.series[2].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year - 1 + '累计完成'}</span>` +
|
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`;
|
|
||||||
}
|
}
|
||||||
console.log('options', options);
|
console.log('options', options);
|
||||||
return options;
|
return options;
|
||||||
@ -308,9 +274,6 @@ export default {
|
|||||||
factory(val) {
|
factory(val) {
|
||||||
this.initOptions(this.actualOptions);
|
this.initOptions(this.actualOptions);
|
||||||
},
|
},
|
||||||
actualOptions() {
|
|
||||||
this.initOptions(this.actualOptions);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log("mounted", this.actualOptions);
|
console.log("mounted", this.actualOptions);
|
||||||
|
@ -73,23 +73,27 @@ export default {
|
|||||||
color: "rgba(237,237,237,0.5)",
|
color: "rgba(237,237,237,0.5)",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
|
// backgroundColor: '#000000',
|
||||||
backgroundColor: '#001829',
|
// textStyle: {
|
||||||
borderColor: '#001829',
|
// color: '#ffff'
|
||||||
|
// }
|
||||||
formatter: params => {
|
formatter: params => {
|
||||||
console.log('params', params)
|
// console.log(params);
|
||||||
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
|
// 获取xAxis data中的数据
|
||||||
for (var i = 0, l = params.length; i < l; i++) {
|
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
|
||||||
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
|
params.forEach(item => {
|
||||||
// console.log(item.color, color);
|
let color = item.color.colorStops ? item.color.colorStops[0].color : ''
|
||||||
res +=
|
console.log(item.color, color);
|
||||||
"<br/>" +
|
dataStr += `<div>
|
||||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
<div style="margin: 0 8px;">
|
||||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
|
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${item.color.colorStops[0].color};"></span>
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
|
<span>${item.seriesName}</span>
|
||||||
}
|
<span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
|
||||||
return res;
|
</div>
|
||||||
},
|
</div>`
|
||||||
|
})
|
||||||
|
return dataStr
|
||||||
|
}
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
axisTick: {
|
axisTick: {
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-04-28 13:42:51
|
* @Date: 2024-04-28 13:42:51
|
||||||
* @LastEditTime: 2024-07-03 14:13:59
|
* @LastEditTime: 2024-06-28 09:28:56
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -79,23 +79,22 @@ export default {
|
|||||||
color: "rgba(237,237,237,0.5)",
|
color: "rgba(237,237,237,0.5)",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
|
|
||||||
backgroundColor: '#001829',
|
|
||||||
borderColor: '#001829',
|
|
||||||
formatter: params => {
|
formatter: params => {
|
||||||
console.log('params', params)
|
// 获取xAxis data中的数据
|
||||||
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
|
let dataStr = `<div><p style="font-weight:bold;margin:0 8px 15px;">${params[0].name}</p></div>`
|
||||||
for (var i = 0, l = params.length; i < l; i++) {
|
params.forEach(item => {
|
||||||
let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
|
let color = Object.prototype.toString.call(item.color) == "[object String]" ? item.color : item.color.colorStops ? item.color.colorStops[0].color : ''
|
||||||
// console.log(item.color, color);
|
console.log(item.color, color);
|
||||||
res +=
|
dataStr += `<div>
|
||||||
"<br/>" +
|
<div style="margin: 0 8px;">
|
||||||
`<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
|
<span style="display:inline-block;margin-right:5px;width:10px;height:10px;background-color:${color};"></span>
|
||||||
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` +
|
<span>${item.seriesName}</span>
|
||||||
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
|
<span style="float:right;color:#000000;margin-left:20px;">${item.data}</span>
|
||||||
}
|
</div>
|
||||||
return res;
|
</div>`
|
||||||
},
|
})
|
||||||
|
return dataStr
|
||||||
|
}
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
axisTick: {
|
axisTick: {
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-04-15 10:49:13
|
* @Date: 2024-04-15 10:49:13
|
||||||
* @LastEditTime: 2024-07-02 16:33:59
|
* @LastEditTime: 2024-06-27 14:56:20
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -16,8 +16,8 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime">
|
<el-form-item v-show="listQuery.type === 0 || listQuery.type === ''" label="时间范围" prop="reportTime">
|
||||||
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="daterange" range-separator="至"
|
<el-date-picker size="small" clearable v-model="listQuery.reportTime" type="datetimerange" range-separator="至"
|
||||||
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期" :picker-options="{ }">
|
start-placeholder="开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd" @change="changeDayTime" end-placeholder="结束日期">
|
||||||
</el-date-picker>
|
</el-date-picker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime">
|
<el-form-item v-show="listQuery.type === 1" label="时间范围" prop="reportTime">
|
||||||
@ -234,7 +234,7 @@ export default {
|
|||||||
{
|
{
|
||||||
prop: 'goodRatio',
|
prop: 'goodRatio',
|
||||||
label: '良品率%',
|
label: '良品率%',
|
||||||
filter: (val) => val.toFixed(2) + '%'
|
filter: (val) => val + '%'
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
tableData: [],
|
tableData: [],
|
||||||
@ -535,23 +535,11 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
/* .blueTip { */
|
/* .blueTip { */
|
||||||
/* padding-bottom: 10px; */
|
/* padding-bottom: 10px; */
|
||||||
/* } */
|
/* } */
|
||||||
/* .blueTi */
|
/* .blueTi */
|
||||||
.blueTip .el-date-editor .el-range__icon {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #0b58ff;
|
|
||||||
}
|
|
||||||
.blueTip .el-input__prefix .el-icon-date {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #0b58ff;
|
|
||||||
}
|
|
||||||
.blueTip .el-input__prefix .el-icon-time {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #0b58ff;
|
|
||||||
}
|
|
||||||
.blueTip::before{
|
.blueTip::before{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
content: '';
|
content: '';
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
* @Author: zwq
|
* @Author: zwq
|
||||||
* @Date: 2022-01-21 14:43:06
|
* @Date: 2022-01-21 14:43:06
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @LastEditTime: 2024-07-01 16:54:41
|
* @LastEditTime: 2024-06-24 11:13:48
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
@ -74,6 +74,7 @@ export default {
|
|||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
initChart(xAxis, seriesList) {
|
initChart(xAxis, seriesList) {
|
||||||
|
console.log('2', xAxis, seriesList)
|
||||||
if (xAxis.length === 0) {
|
if (xAxis.length === 0) {
|
||||||
this.chart.clear()
|
this.chart.clear()
|
||||||
}
|
}
|
||||||
@ -99,35 +100,27 @@ export default {
|
|||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
|
||||||
type: 'shadow',
|
|
||||||
color: "rgba(237,237,237,0.5)"
|
|
||||||
},
|
|
||||||
formatter: function(params) {
|
formatter: function(params) {
|
||||||
let result = `
|
let result = `
|
||||||
<div style="width: 270px; display: flex">
|
<div style="width: 270px; display: flex">
|
||||||
<div style="width: 150px">${params[0].name}</div>
|
<div style="width: 150px">${params[0].name}</div>
|
||||||
<div style="width: 60px; text-align: right">${factoryListabbr[0]}</div>
|
<div style="width: 60px">${factoryListabbr[0]}</div>
|
||||||
<div style="width: 60px; text-align: right">${factoryListabbr[1]}</div>
|
<div style="width: 60px">${factoryListabbr[1]}</div>
|
||||||
</div>`
|
</div>`
|
||||||
const newArray = params.map(p => {
|
const newArray = params.map(p => {
|
||||||
console.log(factoryListabbr[p.seriesName.split('-')[1]], p.seriesName.split('-')[0])
|
|
||||||
return {
|
return {
|
||||||
glass: p.seriesName.split('-')[0], // 玻璃类型
|
glass: p.seriesName.split('-')[0], // 玻璃类型
|
||||||
factoryName: factoryListabbr[p.seriesName.split('-')[1]], // 工厂名称
|
factoryName: factoryListabbr[p.seriesName.split('-')[1]], // 工厂名称
|
||||||
value: p.value,
|
value: p.value,
|
||||||
name: p.name,
|
name: p.name,
|
||||||
marker: p.marker,
|
marker: p.marker
|
||||||
color: p.color
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
const analyzeList = Object.groupBy(newArray, (member) => member.glass)
|
const analyzeList = Object.groupBy(newArray, (member) => member.glass)
|
||||||
for (let g in analyzeList) {
|
for (let g in analyzeList) {
|
||||||
// date => 玻璃类型
|
// date => 玻璃类型
|
||||||
let oneData = `<div style="width: 270px; display: flex">
|
let oneData = `<div style="width: 270px; display: flex">
|
||||||
<div style="width: 150px; display: flex; align-items: center">
|
<div style="width: 150px">${analyzeList[g][0].marker} ${g}</div>`
|
||||||
<div style="background-color: ${analyzeList[g][0].color}; width: 10px; height: 10px; margin-right: 5px"></div>
|
|
||||||
<div>${g}</div></div>`
|
|
||||||
for (let fac of factoryListabbr) {
|
for (let fac of factoryListabbr) {
|
||||||
let goodNum = 0
|
let goodNum = 0
|
||||||
for (let ana of analyzeList[g]) {
|
for (let ana of analyzeList[g]) {
|
||||||
@ -135,7 +128,7 @@ export default {
|
|||||||
goodNum = ana.value
|
goodNum = ana.value
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
oneData += `<div style="width: 60px; text-align: right">${goodNum}</div>`
|
oneData += `<div style="width: 60px">${goodNum}</div>`
|
||||||
}
|
}
|
||||||
result = result + oneData + '</div>'
|
result = result + oneData + '</div>'
|
||||||
}
|
}
|
||||||
@ -157,12 +150,12 @@ export default {
|
|||||||
yAxis: [
|
yAxis: [
|
||||||
{
|
{
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: '单位:片'
|
name: '单位:个'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
grid: {
|
grid: {
|
||||||
top: '10%',
|
top: '10%',
|
||||||
left: "2%",
|
left: "1%",
|
||||||
right: "5%",
|
right: "5%",
|
||||||
bottom: "0%",
|
bottom: "0%",
|
||||||
containLabel: true
|
containLabel: true
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-04-15 10:49:13
|
* @Date: 2024-04-15 10:49:13
|
||||||
* @LastEditTime: 2024-07-02 16:35:01
|
* @LastEditTime: 2024-06-20 16:41:48
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -691,22 +691,11 @@ export default {
|
|||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style scoped>
|
||||||
/* .blueTip { */
|
/* .blueTip { */
|
||||||
/* padding-bottom: 10px; */
|
/* padding-bottom: 10px; */
|
||||||
/* } */
|
/* } */
|
||||||
.blueTip .el-date-editor .el-range__icon {
|
/* .blueTi */
|
||||||
font-size: 16px;
|
|
||||||
color: #0b58ff;
|
|
||||||
}
|
|
||||||
.blueTip .el-input__prefix .el-icon-date {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #0b58ff;
|
|
||||||
}
|
|
||||||
.blueTip .el-input__prefix .el-icon-time {
|
|
||||||
font-size: 16px;
|
|
||||||
color: #0b58ff;
|
|
||||||
}
|
|
||||||
.blueTip::before{
|
.blueTip::before{
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
content: '';
|
content: '';
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-04-15 10:49:13
|
* @Date: 2024-04-15 10:49:13
|
||||||
* @LastEditTime: 2024-07-01 17:06:29
|
* @LastEditTime: 2024-06-24 15:08:34
|
||||||
* @LastEditors: DY
|
* @LastEditors: DY
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -242,7 +242,7 @@ export default {
|
|||||||
{
|
{
|
||||||
prop: 'productionProgress',
|
prop: 'productionProgress',
|
||||||
label: '生产进度',
|
label: '生产进度',
|
||||||
filter: (val) => (val * 100).toFixed(2) + '%'
|
filter: (val) => (val * 100) + '%'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'orderStatus',
|
prop: 'orderStatus',
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: zhp
|
* @Author: zhp
|
||||||
* @Date: 2024-06-21 09:05:14
|
* @Date: 2024-06-21 09:05:14
|
||||||
* @LastEditTime: 2024-07-03 16:07:42
|
* @LastEditTime: 2024-07-02 08:33:22
|
||||||
* @LastEditors: zhp
|
* @LastEditors: zhp
|
||||||
* @Description:
|
* @Description:
|
||||||
-->
|
-->
|
||||||
@ -51,7 +51,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
console.log('params', params)
|
// console.log('params', params)
|
||||||
let arr = []
|
let arr = []
|
||||||
var res = ``;
|
var res = ``;
|
||||||
// for (var i = 0, l = params.length; i < l; i++) {
|
// for (var i = 0, l = params.length; i < l; i++) {
|
||||||
@ -64,7 +64,7 @@ export default {
|
|||||||
? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%"
|
? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%"
|
||||||
: params[0].name === "转化效率"
|
: params[0].name === "转化效率"
|
||||||
? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%"
|
? (params[0].value ? params[0].value.toFixed(2) : 0.0) + "%"
|
||||||
: params[0].axisValueLabel.search('总功率') != -1
|
: params[0].seriesName.search('总功率') != -1
|
||||||
? (params[0].value ? params[0].value : 0) + "MW"
|
? (params[0].value ? params[0].value : 0) + "MW"
|
||||||
: (params[0].value ? params[0].value : 0) + "片"
|
: (params[0].value ? params[0].value : 0) + "片"
|
||||||
}</span>`;
|
}</span>`;
|
||||||
@ -78,7 +78,7 @@ export default {
|
|||||||
? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%"
|
? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%"
|
||||||
: params[1].name === "转化效率"
|
: params[1].name === "转化效率"
|
||||||
? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%"
|
? (params[1].value ? params[1].value.toFixed(2) : 0.0) + "%"
|
||||||
: params[1].axisValueLabel.search('总功率') != -1
|
: params[1].seriesName.search('总功率') != -1
|
||||||
? (params[1].value ? params[1].value : 0) + "MW"
|
? (params[1].value ? params[1].value : 0) + "MW"
|
||||||
: (params[1].value ? params[1].value : 0) + "片"
|
: (params[1].value ? params[1].value : 0) + "片"
|
||||||
}</span>`;
|
}</span>`;
|
||||||
|
@ -215,7 +215,7 @@ export default {
|
|||||||
barWidth: 20,
|
barWidth: 20,
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: [0, -16],
|
position: [-18, -16],
|
||||||
color: "#68C483",
|
color: "#68C483",
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
return params.value
|
return params.value
|
||||||
@ -230,7 +230,7 @@ export default {
|
|||||||
barWidth: 20,
|
barWidth: 20,
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: [0, -16],
|
position: [-18, -16],
|
||||||
color: "#68C483",
|
color: "#68C483",
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
return params.value
|
return params.value
|
||||||
@ -290,7 +290,7 @@ export default {
|
|||||||
barWidth: 20,
|
barWidth: 20,
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: [-0, -16],
|
position: [-20, -16],
|
||||||
color: "#68C483",
|
color: "#68C483",
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
return params.value.toFixed(2)
|
return params.value.toFixed(2)
|
||||||
@ -305,7 +305,7 @@ export default {
|
|||||||
barWidth: 20,
|
barWidth: 20,
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: [0, -16],
|
position: [10, -16],
|
||||||
color: "#288AFF",
|
color: "#288AFF",
|
||||||
formatter: function (params) {
|
formatter: function (params) {
|
||||||
return params.value.toFixed(2)
|
return params.value.toFixed(2)
|
||||||
|
Loading…
Reference in New Issue
Block a user