mt-fe-group/yudao-init
9
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

修改ui

Browse Source
This commit is contained in:
‘937886381’
2024-07-19 08:37:54 +08:00
parent 5444ff92f7
commit 7d6a0e228f
16 changed files with 467 additions and 325 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/views/copilot/components/BarChartBase.vue
View File

@@ -70,22 +70,26 @@ export default {
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',
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${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>`;
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0}</span>`;
}
return res;
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
},
},
xAxis: {
@@ -98,24 +102,24 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -133,7 +137,7 @@ export default {
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -168,7 +172,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -214,18 +218,18 @@ export default {
},
isFullscreen(val) {
this.options.series.map((item) => {
item.barWidth = val ? 18 : 12;
item.barWidth = val ? 18 : 16;
});
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.options.xAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options);
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// this.initChart(this.actualOptions);
this.canvasReset()
},

56
src/views/copilot/components/ftoBarChartBase.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:49:14
* @LastEditTime: 2024-07-03 14:08:52
* @LastEditTime: 2024-07-18 15:43:56
* @LastEditors: zhp
* @Description:
-->
@@ -71,22 +71,26 @@ export default {
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',
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${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>`;
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align: right;'>${params[i].value ? params[i].value : 0 }</span>`;
}
return res;
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
},
},
xAxis: {
@@ -99,24 +103,24 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
yAxis: {
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -134,7 +138,7 @@ export default {
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -169,7 +173,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -215,18 +219,18 @@ export default {
},
isFullscreen(val) {
this.options.series.map((item) => {
item.barWidth = val ? 18 : 12;
item.barWidth = val ? 18 : 16;
});
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.options.xAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options);
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// this.initChart(this.actualOptions);
this.canvasReset()
},

53
src/views/copilot/efficiency/components/sub/bar/BarChartChipOEE.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-07 13:22:43
* @LastEditTime: 2024-07-09 14:51:21
* @LastEditTime: 2024-07-18 15:44:36
* @LastEditors: zhp
* @Description:
-->
@@ -70,12 +70,11 @@ export default {
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',
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
var res = `<span style='color:rgba(255,255,255,0.85);margin-bottom:8px'>${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);
@@ -85,10 +84,16 @@ export default {
? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;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>`;
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
`<span style='display:inline-block;text-align: right;width:60px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
}
return res;
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
},
},
xAxis: {
@@ -101,23 +106,23 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
yAxis: {
name: "单位/%",
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -135,7 +140,7 @@ export default {
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -170,7 +175,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -250,11 +255,11 @@ export default {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// if (val === false && this.isOpen === true) {
// console.log(val)
// this.width = 97 + '%'
@@ -264,11 +269,11 @@ export default {
// this.canvasReset()
// }
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options)
this.canvasReset()
},

61
src/views/copilot/efficiency/components/sub/bar/BarChartChipTrans.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-23 15:50:44
* @LastEditTime: 2024-07-09 14:57:49
* @LastEditTime: 2024-07-18 15:44:46
* @LastEditors: zhp
* @Description:
-->
@@ -70,25 +70,30 @@ export default {
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',
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`;
var res = `<span style='color:rgba(255,255,255,0.85);margin-bottom:8px'>${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/>" +
`${params[i].seriesType === "line"
? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;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>`;
`${params[i].seriesType === "line"
? '<img width="11" height="11" style="margin-right:4px;" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTIuNzIxNjM5NXB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDEyLjcyMTYzOTUgOCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4KICAgIDx0aXRsZT7nvJbnu4QgNjwvdGl0bGU+CiAgICA8ZyBpZD0iMDTmiqXooajnrqHnkIYiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLmjIfmoIflrozmiJDmg4XlhrUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDUxLjYzOTE4MCwgLTQyNS4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9Iue8lue7hC025aSH5Lu9LTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwMjEuNTAwMDAwLCAzNDQuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0i57yW57uELTYiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI5LjUwMDAwMCwgNzguMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IuefqeW9oiIgeD0iMCIgeT0iMCIgd2lkdGg9IjE0IiBoZWlnaHQ9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTcuMTM5MTgwMjYsMyBDOS4wMDMxMDczNywzIDEwLjU2OTI2NzMsNC4yNzQ4OTI3MiAxMS4wMTMyMjU0LDYuMDAwMjQzNDcgTDEyLjM2MDgxOTcsNiBDMTIuOTEzMTA0NSw2IDEzLjM2MDgxOTcsNi40NDc3MTUyNSAxMy4zNjA4MTk3LDcgQzEzLjM2MDgxOTcsNy41NTIyODQ3NSAxMi45MTMxMDQ1LDggMTIuMzYwODE5Nyw4IEwxMS4wMTI5NjY3LDguMDAwNzYxMzQgQzEwLjU2ODY1OTIsOS43MjU2MDIyNCA5LjAwMjc0NTUxLDExIDcuMTM5MTgwMjYsMTEgQzUuMjc1NjE1MDEsMTEgMy43MDk3MDEzMSw5LjcyNTYwMjI0IDMuMjY1MzkzNzgsOC4wMDA3NjEzNCBMMS42MzkxODAyNiw4IEMxLjA4Njg5NTUxLDggMC42MzkxODAyNTgsNy41NTIyODQ3NSAwLjYzOTE4MDI1OCw3IEMwLjYzOTE4MDI1OCw2LjQ0NzcxNTI1IDEuMDg2ODk1NTEsNiAxLjYzOTE4MDI2LDYgTDMuMjY1MTM1MDksNi4wMDAyNDM0NyBDMy43MDkwOTMyLDQuMjc0ODkyNzIgNS4yNzUyNTMxNSwzIDcuMTM5MTgwMjYsMyBaIiBpZD0i5b2i54q257uT5ZCIIiBmaWxsPSIjRkZDRTZBIiBmaWxsLXJ1bGU9Im5vbnplcm8iPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+" />'
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${color}"></span>`
}` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
`<span style='display:inline-block;text-align: right;width:60px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
}
return res;
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
},
},
xAxis: {
@@ -101,23 +106,23 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
yAxis: {
name: "单位/%",
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -135,7 +140,7 @@ export default {
{
name: "", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -170,7 +175,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -250,11 +255,11 @@ export default {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// if (val === false && this.isOpen === true) {
// console.log(val)
// this.width = 97 + '%'
@@ -264,11 +269,11 @@ export default {
// this.canvasReset()
// }
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options)
this.canvasReset()
},

50
src/views/copilot/efficiency/options/chipOptions.js
View File

@@ -24,18 +24,18 @@
title: {
text: titleValue,
left: "48%",
top: "37%",
top: "middle",
textAlign: "center",
textStyle: {
fontWeight: 600,
fontSize: 36,
color: "#fffd",
color: "rgba(223,241,254,.8)",
},
subtext: `\u2002${yesterday + '日良率'}\u2002`,
subtextStyle: {
fontSize: 16,
fontWeight: 100,
color: "#fffd",
color: "rgba(255,255,255,.7)",
align: "right",
},
},
@@ -67,8 +67,15 @@
value: currentSum,
name: currentName,
tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
</div>
`
},
selected: false,
itemStyle: {
@@ -93,8 +100,15 @@
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName,
tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
</div>
`
},
itemStyle: { color: "transparent" },
label: { show: false },
@@ -118,8 +132,15 @@
value: previousSum,
name: preName,
tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
</div>
`
},
selected: false,
itemStyle: {
@@ -144,8 +165,15 @@
value:previousSum === 0 ? 1 : 0,
name: preName,
tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
</div>
`
},
itemStyle: { color: "transparent" },
label: { show: false },

45
src/views/copilot/factoryData/components/BarChartBase.vue
View File

@@ -55,7 +55,7 @@ export default {
options: {
color: ["#FFD160", "#2760FF", "#12FFF5"],
grid: {
left: "6%",
left: "9%",
right: "3%",
bottom: "15%",
top: "15%",
@@ -68,21 +68,26 @@ export default {
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',
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
extraCssText: 'padding:0;border-width:0',
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>`;
`<span style='display:inline-block;margin-right:4px;width:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value : 0}</span>`;
}
return res;
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
// return res;
},
},
xAxis: {
@@ -97,8 +102,8 @@ export default {
axisLabel: {
interval: 0,//设置横坐标为斜
rotate:45,
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
// formatter: function (value) {
// console.log(value);
@@ -119,16 +124,16 @@ export default {
name: "单位/片",
position: 'left',
nameTextStyle: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 10,
color: "rgba(223,241,254,.8)",
fontSize:16,
},
axisLine: {
show: true,
@@ -196,7 +201,7 @@ export default {
// { offset: 1, color: "#12FFF5" + "00" },
// ]),
// },
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -240,11 +245,11 @@ export default {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
// isFullscreen(val) {
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// this.initOptions(this.actualOptions);
// },
// series(val) {

81
src/views/copilot/factoryData/components/BarChartChipOEE.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-30 08:58:39
* @LastEditTime: 2024-07-03 14:10:06
* @LastEditTime: 2024-07-18 16:48:10
* @LastEditors: zhp
* @Description:
-->
@@ -9,7 +9,7 @@
<chart-container class="bar-chart-base">
<div class="legend">
<span v-for="(item,index) in legend" :key="index" class="legend-item"
:style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ item.label }}</span>
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
</div>
<div ref="oeeChart" style="height:100%"></div>
</chart-container>
@@ -56,7 +56,7 @@ export default {
actualOptions: null,
options: {
grid: {
left: "5%",
left: "8%",
right: "0%",
bottom: "3%",
top: "15%",
@@ -97,23 +97,28 @@ export default {
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;
},
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
var res = `<span style='display:inline-block;color:rgba(255,255,255,0.85);margin-bottom:8px;font-size:16px;letter-spacing: 2px;'>${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:12px;height:12px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;letter-spacing: 2px;'>${params[i].seriesName}</span>` +
`<span style='display:inline-block;width:60px;color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;text-align:right'>${params[i].value ? params[i].value : 0}</span>`;
}
const htmlContent = `
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
${res}
</div>
`;
return htmlContent;
// return res;
},
},
xAxis: {
axisTick: {
@@ -125,8 +130,8 @@ export default {
},
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
data: this.xAxis,
},
@@ -134,16 +139,16 @@ export default {
name: "单位/片",
position: 'left',
nameTextStyle: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "#fff",
fontSize: 12,
color: "rgba(223,241,254,.8)",
fontSize: 16,
},
axisLine: {
show: true,
@@ -161,7 +166,7 @@ export default {
{
name: "FTO", // this.series[0].name,
type: "bar",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color: {
@@ -196,7 +201,7 @@ export default {
{
name: "", // this.series[1].name,
type: "bar",
barWidth: 12,
barWidth: 16,
// tooltip: {
// valueFormatter: function (value) {
// return value + " ml";
@@ -228,7 +233,7 @@ export default {
{
name: "", // "2024年目标值",
type: "line",
barWidth: 12,
barWidth: 16,
itemStyle: {
borderRadius: [10, 10, 0, 0],
color:'#f3c000'
@@ -255,11 +260,11 @@ export default {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) {
this.options.series.map((item) => {
item.barWidth = val ? 18 : 12;
item.barWidth = val ? 18 : 16;
});
this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.options.xAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// if (val === false && this.isOpen === true) {
// console.log(val)
// this.width = 97 + '%'
@@ -269,11 +274,11 @@ export default {
// this.canvasReset()
// }
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// item.barWidth = val ? 18 : 16;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options)
this.canvasReset()
},
@@ -350,7 +355,7 @@ export default {
.legend-item {
position: relative;
// font-size: 12px;
font-size: 1.2vw;
margin-right:1.2vw;
color: #DFF1FE;
&::before {

22
src/views/copilot/factoryData/components/Order.vue
View File

@@ -1,7 +1,8 @@
<template>
<div class="order-container">
<div class="table">
<dv-scroll-board v-if="showTable" :config="config" style="width: 100%; height: 100%; color: rgba(255, 255, 255, .6);" ref="orderScrollBoard" />
<dv-scroll-board v-if="showTable" :config="config"
style="width: 100%; height: 100%; color: rgba(255, 255, 255,1);font-size:16," ref="orderScrollBoard" />
</div>
<div class="chart">
<div class="chart-title">
@@ -12,8 +13,7 @@
<CopilotButton v-for="i in ['目标产量', '计划投入', '实际投入', '实际产出', '废品数量', '待再加工']" :key="i" :label="i"
:active="i === type" @click="() => $emit('update:type', i)" />
</div>
<barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart"
style="height: 0;flex:1"></barChartBase>
<barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1"></barChartBase>
</div>
</div>
@@ -40,7 +40,7 @@ export default {
evenRowBGC: "rgba(rgba(2, 13, 45, 0.18)",
data: [],
rowNum: 12,
fontSize:14,
fontSize:16,
waitTime: 3000,
columnWidth: [150],
align: ["left"],
@@ -100,20 +100,20 @@ export default {
let arr = [];
// arr.push(i + 1);
arr.push(
`<span title=${this.prodOrder[i].workOrderNumber || ""}>${
`<span title=${this.prodOrder[i].workOrderNumber || ""} style='color: rgba(223,241,254,.8);font-size:16px' >${
this.prodOrder[i].workOrderNumber || ""
}</span>`,
`<span title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || ""
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || ""
}</span>`,
`<span title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || ""
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || ""
}</span>`,
`<span title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
}</span>`,
`<span title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
}</span>`,
`<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
}</span>`,
`<span style="display:inline-block;width:45px;">${this.prodOrder[i].productionProgress
`<span style="display:inline-block;width:45px;color: rgba(223,241,254,.8)">${this.prodOrder[i].productionProgress
? this.prodOrder[i].productionProgress.toFixed(2) * 100 + "%"
: "0%"
}</span>

6
src/views/copilot/factoryData/components/chartButton.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-07 08:37:17
* @LastEditTime: 2024-06-07 11:04:41
* @LastEditTime: 2024-07-18 16:16:24
* @LastEditors: zhp
* @Description:
-->
@@ -59,7 +59,7 @@ button {
font-size: 18px; */
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
font-size: 14px;
color: #FFFFFF;
line-height: 22px;
letter-spacing: 5px;
@@ -91,7 +91,7 @@ button {
font-size: 18px; */
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 12px;
font-size: 14px;
color: #FFFFFF;
line-height: 22px;
letter-spacing: 5px;

16
src/views/copilot/yield/components/sub/ring/DoubleRingChart.vue
View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-05-20 13:32:59
* @LastEditTime: 2024-07-09 08:58:47
* @LastEditTime: 2024-07-18 15:27:38
* @LastEditors: zhp
* @Description:
-->
@@ -165,10 +165,15 @@ export default {
subtitle =
this.period == "日" ? `${yesterday}日累计完成值` : this.period == "周" ? `本周累计完成值` : this.period == "月" ? `${month}月累计完成值` : `${year}年累计完成值`;
console.log('titleValue', items)
let titleSize = fontSize(0.35)
let subtitleSize = fontSize(0.14)
// console.log(this.valueTuple[2]- this.valueTuple[1])
return getOptions({
titleValue,
subtitle,
titleSize,
subtitleSize,
currentName: items[0].label,
preName: items[1].label,
previousSum: this.valueTuple[0],
@@ -219,7 +224,12 @@ export default {
// },
},
};
function fontSize(res){
let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (!clientWidth) return;
let fontSize = 100 * (clientWidth / 1920);
return res * fontSize;
}
function calculateItems(period, valueTuple, than) {
console.log('valueTuple', valueTuple);
let items = [];
@@ -297,7 +307,7 @@ function calculateItems(period, valueTuple, than) {
<style scoped>
.double-ring-chart {
height: 100%;
height: 98%;
display: flex;
flex-direction: column;
}

80
src/views/copilot/yield/options/double-ring-chart-options.js
View File

@@ -3,6 +3,8 @@ export default ({
subtitle,
previousSum,
currentSum,
subtitleSize,
titleSize,
targetSum,
currentName,
preName,
@@ -16,25 +18,27 @@ export default ({
},
tooltip: {
trigger: "item",
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',
// 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',
},
title: {
text: titleValue,
text: '99.99%',
left: "48.5%",
top: "35%",
top: "middle",
itemGap: 12,
textVerticalAlign:'auto',
textAlign: "center",
textStyle: {
fontWeight: 400,
fontSize: 32,
color: "#fffd",
fontSize: titleSize,
color: "rgba(223,241,254,.8)",
},
subtext: `\u2002${subtitle}\u2002`,
subtextStyle: {
fontSize: 14,
fontSize: subtitleSize,
fontWeight: 100,
color: "#fffd",
color: "rgba(255,255,255,.7)",
align: "right",
},
},
@@ -43,7 +47,7 @@ export default ({
{
type: "pie",
name: "当前目标",
radius: ["80%", "95%"],
radius: ["74%", "86%"],
center: ["50%", "48%"],
emptyCircleStyle: {
color: "#042c5f33",
@@ -52,7 +56,7 @@ export default ({
// 数据 series
{
type: "pie",
radius: ["80%", "95%"],
radius: ["74%", "86%"],
center: ["50%", "48%"],
avoidLabelOvervlap: false,
label: {
@@ -66,9 +70,16 @@ export default ({
value: currentSum,
name: currentName,
selected: false,
tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
</div>
`
},
itemStyle: {
borderJoin: "round",
@@ -91,9 +102,16 @@ export default ({
{
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName,
tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${currentName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${currentSum}</span>
</div>
`
},
itemStyle: { color: "transparent" },
label: { show: false },
@@ -103,7 +121,7 @@ export default ({
// 数据 series2 - 2023累计
{
type: "pie",
radius: ["65%", "80%"],
radius: ["61%", "74%"],
center: ["50%", "48%"],
avoidLabelOvervlap: false,
label: {
@@ -114,12 +132,19 @@ export default ({
},
data: [
{
value: previousSum,
value: 99.99,
name: preName,
selected: false,
tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
</div>
`
},
itemStyle: {
borderJoin: "round",
@@ -143,9 +168,16 @@ export default ({
value:previousSum === 0 ? 1 : 0,
name: preName,
tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter:`
<div style="padding: 12px 16px;background:rgba(0,24,41,.5);box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);backdrop-filter: blur(10px);">
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;'>${preName}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;'>${previousSum}</span>
</div>
`
},
itemStyle: { color: "transparent" },
label: { show: false },