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

merge

Browse Source
This commit is contained in:
helloDy 2024-07-23 18:01:22 +08:00
commit 99d60a14bd
29 changed files with 522 additions and 361 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/views/components/ChartContainer.vue
View File

@ -1,10 +1,11 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-03 15:38:31 * @Date: 2024-07-10 15:17:28
* @LastEditTime: 2024-07-09 15:59:41 * @LastEditTime: 2024-07-19 15:18:00
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
<!-- <!--
filename: ChartContainer.vue filename: ChartContainer.vue
author: liubin author: liubin

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

@ -9,7 +9,7 @@
<chart-container class="bar-chart-base"> <chart-container class="bar-chart-base">
<div class="legend"> <div class="legend">
<span v-for="item in legend" :key="item.label" class="legend-item" <span v-for="item in legend" :key="item.label" 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>
<div ref="chart" style="height:94%;width:100%"></div> <div ref="chart" style="height:94%;width:100%"></div>
</chart-container> </chart-container>
@ -70,22 +70,26 @@ 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: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
backgroundColor: '#001829', extraCssText: 'padding:0;border-width:0',
borderColor: '#001829',
formatter: params => { formatter: params => {
console.log('params', params) var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${params[0].axisValueLabel}</span>`;
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++) { 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 : '' 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); // console.log(item.color, color);
res += res +=
"<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:12px;height:12px;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:16px;letter-spacing: 2px;'>${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: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: { xAxis: {
@ -98,24 +102,24 @@ export default {
}, },
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 12, fontSize: 16,
}, },
data: this.xAxis, data: this.xAxis,
}, },
yAxis: { yAxis: {
name: "单位/片", name: "单位/片",
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 12, fontSize: 16,
align: "right", align: "right",
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 12, fontSize: 16,
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -133,7 +137,7 @@ export default {
{ {
name: "", // this.series[0].name, name: "", // this.series[0].name,
type: "bar", type: "bar",
barWidth: 12, barWidth: 16,
itemStyle: { itemStyle: {
borderRadius: [10, 10, 0, 0], borderRadius: [10, 10, 0, 0],
color: { color: {
@ -168,7 +172,7 @@ export default {
{ {
name: "", // this.series[1].name, name: "", // this.series[1].name,
type: "bar", type: "bar",
barWidth: 12, barWidth: 16,
// tooltip: { // tooltip: {
// valueFormatter: function (value) { // valueFormatter: function (value) {
// return value + " ml"; // return value + " ml";
@ -214,18 +218,18 @@ export default {
}, },
isFullscreen(val) { isFullscreen(val) {
this.options.series.map((item) => { 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.xAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12; this.options.yAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12; this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options); this.initChart(this.options);
// this.actualOptions.series.map((item) => { // 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.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// this.initChart(this.actualOptions); // this.initChart(this.actualOptions);
this.canvasReset() this.canvasReset()
}, },

5
src/views/copilot/components/Container.vue
View File

@ -73,6 +73,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -142,8 +143,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.95vw; width: 0.7vw;
height: 0.95vw; height: 0.7vw;
} }
.corner.tl { .corner.tl {

4
src/views/copilot/components/button.vue
View File

@ -75,8 +75,8 @@ button {
.copilot-btn::after { .copilot-btn::after {
content: ""; content: "";
position: absolute; position: absolute;
width: 16px; width: 0.7vw;
height: 16px; height: 0.7vw;
top: 0; top: 0;
background: transparent; background: transparent;
border-style: solid; border-style: solid;

7
src/views/copilot/components/efficiencyLeftContainer.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-07-09 15:15:00 * @Date: 2024-07-09 15:15:00
* @LastEditTime: 2024-07-09 15:36:49 * @LastEditTime: 2024-07-19 16:11:37
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -73,6 +73,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -146,8 +147,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.95vw; width: 0.7vw;
height: 0.95vw; height: 0.7vw;
} }
.corner.tl { .corner.tl {

5
src/views/copilot/components/efficiencyRightContainer.vue
View File

@ -74,6 +74,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -147,8 +148,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.95vw; width: 0.7vw;
height: 0.95vw; height: 0.7vw;
} }
.corner.tl { .corner.tl {

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

@ -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-07-19 16:08:27
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -10,7 +10,7 @@
<chart-container class="bar-chart-base"> <chart-container class="bar-chart-base">
<div class="legend"> <div class="legend">
<span v-for="item in legend" :key="item.label" class="legend-item" <span v-for="item in legend" :key="item.label" 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>
<div ref="ftoChart" style="height:94%;width:100%"></div> <div ref="ftoChart" style="height:94%;width:100%"></div>
</chart-container> </chart-container>
@ -71,22 +71,26 @@ 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: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
backgroundColor: '#001829', extraCssText: 'padding:0;border-width:0',
borderColor: '#001829',
formatter: params => { formatter: params => {
console.log('params', params) var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${params[0].axisValueLabel}</span>`;
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++) { 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 : '' 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); // console.log(item.color, color);
res += res +=
"<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:12px;height:12px;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:16px;letter-spacing: 2px;'>${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: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: { xAxis: {
@ -99,24 +103,24 @@ export default {
}, },
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 12, fontSize: 16,
}, },
data: this.xAxis, data: this.xAxis,
}, },
yAxis: { yAxis: {
name: "单位/片", name: "单位/片",
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 12, fontSize: 16,
align: "right", align: "right",
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 12, fontSize: 16,
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -134,7 +138,7 @@ export default {
{ {
name: "", // this.series[0].name, name: "", // this.series[0].name,
type: "bar", type: "bar",
barWidth: 12, barWidth: 16,
itemStyle: { itemStyle: {
borderRadius: [10, 10, 0, 0], borderRadius: [10, 10, 0, 0],
color: { color: {
@ -169,7 +173,7 @@ export default {
{ {
name: "", // this.series[1].name, name: "", // this.series[1].name,
type: "bar", type: "bar",
barWidth: 12, barWidth: 16,
// tooltip: { // tooltip: {
// valueFormatter: function (value) { // valueFormatter: function (value) {
// return value + " ml"; // return value + " ml";
@ -215,18 +219,18 @@ export default {
}, },
isFullscreen(val) { isFullscreen(val) {
this.options.series.map((item) => { 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.xAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 12; this.options.yAxis.axisLabel.fontSize = val ? 18 : 16;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12; this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options); this.initChart(this.options);
// this.actualOptions.series.map((item) => { // 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.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// this.initChart(this.actualOptions); // this.initChart(this.actualOptions);
this.canvasReset() this.canvasReset()
}, },

7
src/views/copilot/components/leftContainer.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-05 09:43:51 * @Date: 2024-06-05 09:43:51
* @LastEditTime: 2024-07-09 15:35:19 * @LastEditTime: 2024-07-19 16:11:59
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -73,6 +73,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -144,8 +145,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.95vw; width: 0.7vw;
height: 0.95vw; height: 0.7vw;
} }
.corner.tl { .corner.tl {

5
src/views/copilot/components/rightContainer.vue
View File

@ -74,6 +74,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -147,8 +148,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.95vw; width: 0.7vw;
height: 0.95vw; height: 0.7vw;
} }
.corner.tl { .corner.tl {

7
src/views/copilot/components/twoContainer.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-05 09:48:37 * @Date: 2024-06-05 09:48:37
* @LastEditTime: 2024-07-09 15:35:04 * @LastEditTime: 2024-07-19 16:14:07
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -100,6 +100,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -171,8 +172,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.95vw; width: 0.7vw;
height: 0.95vw; height: 0.7vw;
} }
.corner.tl { .corner.tl {

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

@ -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-09 14:51:21 * @LastEditTime: 2024-07-19 16:10:10
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -9,7 +9,7 @@
<chart-container class="bar-chart-base"> <chart-container class="bar-chart-base">
<div class="legend"> <div class="legend">
<span v-for="(item,index) in legend" :key="index" class="legend-item" <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>
<div ref="oeeChart" style="height:94%;width:100%"></div> <div ref="oeeChart" style="height:94%;width:100%"></div>
</chart-container> </chart-container>
@ -70,25 +70,32 @@ 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: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
backgroundColor: '#001829', extraCssText: 'padding:0;border-width:0',
borderColor: '#001829',
formatter: params => { formatter: params => {
console.log('params', 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++) { 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 : '' 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); // console.log(item.color, color);
res += res +=
"<br/>" + "<br/>" +
`${params[i].seriesType === "line" `${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; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
: `<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: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${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='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${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: { xAxis: {
@ -101,23 +108,23 @@ export default {
}, },
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 12, fontSize: 16,
}, },
data: this.xAxis, data: this.xAxis,
}, },
yAxis: { yAxis: {
name: "单位/%", name: "单位/%",
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 12, fontSize: 16,
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 12, fontSize: 16,
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -135,7 +142,7 @@ export default {
{ {
name: "", // this.series[0].name, name: "", // this.series[0].name,
type: "bar", type: "bar",
barWidth: 12, barWidth: 16,
itemStyle: { itemStyle: {
borderRadius: [10, 10, 0, 0], borderRadius: [10, 10, 0, 0],
color: { color: {
@ -170,7 +177,7 @@ export default {
{ {
name: "", // this.series[1].name, name: "", // this.series[1].name,
type: "bar", type: "bar",
barWidth: 12, barWidth: 16,
// tooltip: { // tooltip: {
// valueFormatter: function (value) { // valueFormatter: function (value) {
// return value + " ml"; // return value + " ml";
@ -250,11 +257,11 @@ export default {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */ /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) { isFullscreen(val) {
// this.actualOptions.series.map((item) => { // 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.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// if (val === false && this.isOpen === true) { // if (val === false && this.isOpen === true) {
// console.log(val) // console.log(val)
// this.width = 97 + '%' // this.width = 97 + '%'
@ -264,11 +271,11 @@ export default {
// this.canvasReset() // this.canvasReset()
// } // }
// this.actualOptions.series.map((item) => { // 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.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options) this.initChart(this.options)
this.canvasReset() this.canvasReset()
}, },

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

@ -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-09 14:57:49 * @LastEditTime: 2024-07-19 16:10:19
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -9,7 +9,7 @@
<chart-container class="bar-chart-base"> <chart-container class="bar-chart-base">
<div class="legend"> <div class="legend">
<span v-for="(item,index) in legend" :key="index" class="legend-item" <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>
<div ref="oeeChart" style="height:94%;width:100%"></div> <div ref="oeeChart" style="height:94%;width:100%"></div>
</chart-container> </chart-container>
@ -70,25 +70,32 @@ 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: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
backgroundColor: '#001829', extraCssText: 'padding:0;border-width:0',
borderColor: '#001829',
formatter: params => { formatter: params => {
console.log('params', 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++) { 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 : '' 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); // console.log(item.color, color);
res += res +=
"<br/>" + "<br/>" +
`${params[i].seriesType === "line" `${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; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span>
: `<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: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px'>${params[i].seriesName}</span>`
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:${color}"></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px'>${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='display:inline-block;text-align: right;width:180px;color:rgba(255,255,255,0.65);;font-size:16px;letter-spacing: 2px;'>${params[i].value ? params[i].value + '%' : 0 + '%'}</span>`;
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${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: { xAxis: {
@ -101,23 +108,23 @@ export default {
}, },
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 12, fontSize: 16,
}, },
data: this.xAxis, data: this.xAxis,
}, },
yAxis: { yAxis: {
name: "单位/%", name: "单位/%",
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 12, fontSize: 16,
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 12, fontSize: 16,
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -135,7 +142,7 @@ export default {
{ {
name: "", // this.series[0].name, name: "", // this.series[0].name,
type: "bar", type: "bar",
barWidth: 12, barWidth: 16,
itemStyle: { itemStyle: {
borderRadius: [10, 10, 0, 0], borderRadius: [10, 10, 0, 0],
color: { color: {
@ -170,7 +177,7 @@ export default {
{ {
name: "", // this.series[1].name, name: "", // this.series[1].name,
type: "bar", type: "bar",
barWidth: 12, barWidth: 16,
// tooltip: { // tooltip: {
// valueFormatter: function (value) { // valueFormatter: function (value) {
// return value + " ml"; // return value + " ml";
@ -250,11 +257,11 @@ export default {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */ /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) { isFullscreen(val) {
// this.actualOptions.series.map((item) => { // 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.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
// if (val === false && this.isOpen === true) { // if (val === false && this.isOpen === true) {
// console.log(val) // console.log(val)
// this.width = 97 + '%' // this.width = 97 + '%'
@ -264,11 +271,11 @@ export default {
// this.canvasReset() // this.canvasReset()
// } // }
// this.actualOptions.series.map((item) => { // 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.xAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initChart(this.options) this.initChart(this.options)
this.canvasReset() this.canvasReset()
}, },

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

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

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

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

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

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

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

@ -1,7 +1,8 @@
<template> <template>
<div class="order-container"> <div class="order-container">
<div class="table"> <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>
<div class="chart"> <div class="chart">
<div class="chart-title"> <div class="chart-title">
@ -12,8 +13,7 @@
<CopilotButton v-for="i in ['目标产量', '计划投入', '实际投入', '实际产出', '废品数量', '待再加工']" :key="i" :label="i" <CopilotButton v-for="i in ['目标产量', '计划投入', '实际投入', '实际产出', '废品数量', '待再加工']" :key="i" :label="i"
:active="i === type" @click="() => $emit('update:type', i)" /> :active="i === type" @click="() => $emit('update:type', i)" />
</div> </div>
<barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart" <barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart" style="height: 0;flex:1"></barChartBase>
style="height: 0;flex:1"></barChartBase>
</div> </div>
</div> </div>
@ -40,7 +40,7 @@ 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, fontSize:16,
waitTime: 3000, waitTime: 3000,
columnWidth: [150], columnWidth: [150],
align: ["left"], align: ["left"],
@ -100,20 +100,20 @@ export default {
let arr = []; let arr = [];
// arr.push(i + 1); // arr.push(i + 1);
arr.push( 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 || "" this.prodOrder[i].workOrderNumber || ""
}</span>`, }</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>`,
`<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>`,
`<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>`,
`<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>`,
`<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>`,
`<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 + "%" ? this.prodOrder[i].productionProgress.toFixed(2) * 100 + "%"
: "0%" : "0%"
}</span> }</span>

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

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

7
src/views/copilot/factoryData/components/leftContainer.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-06-05 09:36:07 * @Date: 2024-06-05 09:36:07
* @LastEditTime: 2024-07-09 16:54:24 * @LastEditTime: 2024-07-19 16:16:02
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -81,6 +81,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -152,8 +153,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.95vw; width: 0.7vw;
height: 0.95vw; height: 0.7vw;
} }
.corner.tl { .corner.tl {

5
src/views/copilot/factoryData/components/rightContainer.vue
View File

@ -79,6 +79,7 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 100%; height: 100%;
flex: 1; flex: 1;
@ -147,8 +148,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.95vw; width: 0.7vw;
height: 0.95vw; height: 0.7vw;
} }
.corner.tl { .corner.tl {

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

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-05-20 13:32:59 * @Date: 2024-05-20 13:32:59
* @LastEditTime: 2024-07-09 08:58:47 * @LastEditTime: 2024-07-19 16:05:46
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -165,10 +165,15 @@ export default {
subtitle = subtitle =
this.period == "日" ? `${yesterday}日累计完成值` : this.period == "周" ? `本周累计完成值` : this.period == "月" ? `${month}月累计完成值` : `${year}年累计完成值`; this.period == "日" ? `${yesterday}日累计完成值` : this.period == "周" ? `本周累计完成值` : this.period == "月" ? `${month}月累计完成值` : `${year}年累计完成值`;
console.log('titleValue', items) console.log('titleValue', items)
let titleSize = fontSize(0.35)
let subtitleSize = fontSize(0.14)
// console.log(this.valueTuple[2]- this.valueTuple[1]) // console.log(this.valueTuple[2]- this.valueTuple[1])
return getOptions({ return getOptions({
titleValue, titleValue,
subtitle, subtitle,
titleSize,
subtitleSize,
currentName: items[0].label, currentName: items[0].label,
preName: items[1].label, preName: items[1].label,
previousSum: this.valueTuple[0], 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) { function calculateItems(period, valueTuple, than) {
console.log('valueTuple', valueTuple); console.log('valueTuple', valueTuple);
let items = []; let items = [];
@ -296,8 +306,9 @@ function calculateItems(period, valueTuple, than) {
</script> </script>
<style scoped> <style scoped>
.double-ring-chart { .double-ring-chart {
height: 100%; height: 98%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -321,6 +332,7 @@ function calculateItems(period, valueTuple, than) {
.legend-item { .legend-item {
display: flex; display: flex;
/* font-size:16px; */
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
} }

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

@ -3,6 +3,8 @@ export default ({
subtitle, subtitle,
previousSum, previousSum,
currentSum, currentSum,
subtitleSize,
titleSize,
targetSum, targetSum,
currentName, currentName,
preName, preName,
@ -16,25 +18,27 @@ export default ({
}, },
tooltip: { tooltip: {
trigger: "item", 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);', // 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', // backgroundColor: '#001829',
borderColor: '#001829', // borderColor: '#001829',
}, },
title: { title: {
text: titleValue, text: titleValue,
left: "48.5%", left: "48.5%",
top: "35%", top: "middle",
itemGap: 12,
textVerticalAlign:'auto',
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
fontWeight: 400, fontWeight: 400,
fontSize: 32, fontSize: titleSize,
color: "#fffd", color: "rgba(223,241,254,.8)",
}, },
subtext: `\u2002${subtitle}\u2002`, subtext: `\u2002${subtitle}\u2002`,
subtextStyle: { subtextStyle: {
fontSize: 14, fontSize: subtitleSize,
fontWeight: 100, fontWeight: 100,
color: "#fffd", color: "rgba(255,255,255,.7)",
align: "right", align: "right",
}, },
}, },
@ -43,7 +47,7 @@ export default ({
{ {
type: "pie", type: "pie",
name: "当前目标", name: "当前目标",
radius: ["80%", "95%"], radius: ["74%", "86%"],
center: ["50%", "48%"], center: ["50%", "48%"],
emptyCircleStyle: { emptyCircleStyle: {
color: "#042c5f33", color: "#042c5f33",
@ -52,7 +56,7 @@ export default ({
// 数据 series // 数据 series
{ {
type: "pie", type: "pie",
radius: ["80%", "95%"], radius: ["74%", "86%"],
center: ["50%", "48%"], center: ["50%", "48%"],
avoidLabelOvervlap: false, avoidLabelOvervlap: false,
label: { label: {
@ -67,8 +71,15 @@ export default ({
name: currentName, name: currentName,
selected: false, selected: false,
tooltip: { tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` + backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>` 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: { itemStyle: {
borderJoin: "round", borderJoin: "round",
@ -92,8 +103,15 @@ export default ({
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum), value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName, name: currentName,
tooltip: { tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` + backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>` 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" }, itemStyle: { color: "transparent" },
label: { show: false }, label: { show: false },
@ -103,7 +121,7 @@ export default ({
// 数据 series2 - 2023累计 // 数据 series2 - 2023累计
{ {
type: "pie", type: "pie",
radius: ["65%", "80%"], radius: ["61%", "74%"],
center: ["50%", "48%"], center: ["50%", "48%"],
avoidLabelOvervlap: false, avoidLabelOvervlap: false,
label: { label: {
@ -118,8 +136,15 @@ export default ({
name: preName, name: preName,
selected: false, selected: false,
tooltip: { tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` + backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>` 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: { itemStyle: {
borderJoin: "round", borderJoin: "round",
@ -144,8 +169,15 @@ export default ({
value:previousSum === 0 ? 1 : 0, value:previousSum === 0 ? 1 : 0,
name: preName, name: preName,
tooltip: { tooltip: {
formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` + backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>` 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" }, itemStyle: { color: "transparent" },
label: { show: false }, label: { show: false },

108
src/views/dashboard/charts/ChipYieldChart.vue
View File

@ -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-08 13:43:52 * @LastEditTime: 2024-07-18 16:37:41
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -61,23 +61,8 @@ 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: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
backgroundColor: '#001829', extraCssText: 'padding:0;border-width:0',
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%",
@ -127,7 +112,6 @@ export default {
name: `${year}累计产出`, name: `${year}累计产出`,
selected: false, selected: false,
tooltip: { tooltip: {
formatter: null,
}, },
itemStyle: { itemStyle: {
borderJoin: "round", borderJoin: "round",
@ -151,7 +135,6 @@ export default {
value: 0, value: 0,
name: `${year}目标`, name: `${year}目标`,
tooltip: { tooltip: {
formatter: null,
}, },
itemStyle: { color: "transparent" }, itemStyle: { color: "transparent" },
label: { show: false }, label: { show: false },
@ -176,7 +159,17 @@ export default {
name: `${year - 1}累计产出`, name: `${year - 1}累计产出`,
selected: false, selected: false,
tooltip: { tooltip: {
formatter: null, trigger: "item",
// axisPointer: {
// // type: "cross",
// crossStyle: {
// color: "rgba(237,237,237,0.5)",
// },
// },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
extraCssText: 'padding:0;border-width:0',
formatter: params => {
},
}, },
itemStyle: { itemStyle: {
borderJoin: "round", borderJoin: "round",
@ -200,7 +193,15 @@ export default {
value: 0, value: 0,
name: `${year - 1}累计产出`, name: `${year - 1}累计产出`,
tooltip: { tooltip: {
formatter:null, trigger: "item",
// axisPointer: {
// // type: "cross",
// crossStyle: {
// color: "rgba(237,237,237,0.5)",
// },
// },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
extraCssText: 'padding:0;border-width:0',
}, },
itemStyle: { color: "transparent" }, itemStyle: { color: "transparent" },
label: { show: false }, label: { show: false },
@ -263,34 +264,65 @@ export default {
this.options.series[1].data[0].value = 0; this.options.series[1].data[0].value = 0;
this.options.series[1].data[1].value = 1; this.options.series[1].data[1].value = 1;
this.options.series[1].data[0].tooltip.formatter = 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>` + `<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='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`; <span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></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='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`; <span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span>
</div>`;
this.options.series[1].data[1].tooltip.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;letter-spacing: 2px;'>${year + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0 }</span>
</div>`;
} else { } else {
this.options.series[1].data[0].value = this.output.current; this.options.series[1].data[0].value = this.output.current;
this.options.series[1].data[1].value = this.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>` + this.options.series[1].data[0].tooltip.formatter =
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`; `<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);">
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='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#4CF0E8'></span>
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.current + '片'}</span>`; <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.current}</span>
</div>`;
this.options.series[1].data[1].tooltip.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;letter-spacing: 2px;'>${year + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.current}</span>
</div>`;
} }
// 内环 // 内环
if (this.output.previous == 0) { if (this.output.previous == 0) {
this.options.series[2].data[0].value = 0; this.options.series[2].data[0].value = 0;
this.options.series[2].data[1].value = 1; this.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>` + this.options.series[2].data[0].tooltip.formatter =
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`; `<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);">
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='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${0 + '片'}</span>`; <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span>
</div>`;
this.options.series[2].data[1].tooltip.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;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span>
</div>`;
} else { } else {
this.options.series[2].data[0].value = this.output.previous; this.options.series[2].data[0].value = this.output.previous;
this.options.series[2].data[1].value = 0; this.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>` + this.options.series[2].data[0].tooltip.formatter =
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`; `<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);">
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='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span>
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${this.output.previous + '片'}</span>`; <span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span>
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.previous}</span>
</div>`;
this.options.series[2].data[1].tooltip.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;letter-spacing: 2px;'>${year - 1 + '累计完成'}</span> +
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${this.output.previous}</span>
</div>`;
} }
console.log('options', options); console.log('options', options);
return options; return options;

80
src/views/dashboard/charts/LeftChartBase.vue
View File

@ -8,19 +8,10 @@
<template> <template>
<chart-container class="left-chart-base"> <chart-container class="left-chart-base">
<div class="legend"> <div class="legend">
<span <span style="color: rgba(223,241,254,.8);" v-for="item in legend" :key="item.label" class="legend-item"
v-for="item in legend" :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }"
>{{ item.label }}</span
>
</div> </div>
<div <div ref="chart" style="max-width: 22vw" :style="{ height: vHeight + 'vh' }"></div>
ref="chart"
style="max-width: 22vw"
:style="{ height: vHeight + 'vh' }"
></div>
</chart-container> </chart-container>
</template> </template>
@ -73,25 +64,32 @@ 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: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明
backgroundColor: '#001829', extraCssText: 'padding:0;border-width:0',
borderColor: '#001829',
formatter: params => { formatter: params => {
console.log('params', params) console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`; 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++) { 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 : '' 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); // console.log(item.color, color);
res += res +=
"<br/>" + "<br/>" +
`<span style='display:inline-block;margin-right:4px;border-radius:2px;width:10px;height:10px;background-color:${color}'></span>` + `<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;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:16px;letter-spacing: 2px;'>${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='width:60px;display:inline-block;color:rgba(255,255,255,0.65);font-size:16px;text-align: right;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: { xAxis: {
type:'category',
axisTick: { axisTick: {
show: false, show: false,
}, },
@ -101,25 +99,27 @@ export default {
}, },
}, },
axisLabel: { axisLabel: {
color: "#fff", textStyle: {
fontSize: 14, color: "rgba(223,241,254,.8)",
fontSize: 16,
},
}, },
data: this.xAxis, data: this.xAxis,
}, },
yAxis: { yAxis: {
name: "单位/片", name: "单位/片",
position:'left', // position:'left',
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 14, fontSize: 16,
align:'right' align:'right'
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 14, fontSize: 16,
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -143,7 +143,7 @@ export default {
align: 'right', //在上方显示 align: 'right', //在上方显示
position: 'top', //在上方显示 position: 'top', //在上方显示
textStyle: { //数值样式 textStyle: { //数值样式
color: '#DFF1FE', color: "rgba(223,241,254,.8)",
fontSize: 14 fontSize: 14
} }
}, },
@ -187,8 +187,8 @@ export default {
align: 'left', //在上方显示 align: 'left', //在上方显示
position: 'top', //在上方显示 position: 'top', //在上方显示
textStyle: { //数值样式 textStyle: { //数值样式
color: '#DFF1FE', color: "rgba(223,241,254,.8)",
fontSize: 14 fontSize: 16
} }
}, },
itemStyle: { itemStyle: {
@ -260,9 +260,25 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.left-chart-base { .echarts-tooltip{
// position: relative; background: #001829;
// background-color: ;
box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38);
opacity: 0.6;
border-radius: 4px;
.content {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
backdrop-filter: blur(6px);
// transition: .3s transform;
}
}
.left-chart-base {
.legend { .legend {
position: absolute; position: absolute;
top: 5.2vh; top: 5.2vh;

75
src/views/dashboard/charts/RightChartBase.vue
View File

@ -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-08 14:30:44 * @LastEditTime: 2024-07-19 15:25:37
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -15,19 +15,10 @@
<template> <template>
<chart-container class="right-chart-base"> <chart-container class="right-chart-base">
<div class="legend"> <div class="legend">
<span <span style="color: rgba(223,241,254,.8);" v-for="item in legend" :key="item.label" class="legend-item"
v-for="item in legend" :style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span>
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }"
>{{ item.label }}</span
>
</div> </div>
<div <div ref="chart" style="max-width: 22vw" :style="{ height: vHeight + 'vh' }"></div>
ref="chart"
style="max-width: 22vw"
:style="{ height: vHeight + 'vh' }"
></div>
</chart-container> </chart-container>
</template> </template>
@ -65,7 +56,7 @@ export default {
isFullscreen: false, isFullscreen: false,
options: { options: {
grid: { grid: {
left: "5%", left: "6%",
right: "4%", right: "4%",
bottom: "0", bottom: "0",
top: "18%", top: "18%",
@ -79,25 +70,33 @@ 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);', confine:true,
backgroundColor: '#001829', backgroundColor: 'rgba(50,50,50,0)', // tooltip默认背景为白色，手动置为透明
borderColor: '#001829', extraCssText: 'padding:0;border-width:0',
formatter: params => { formatter: params => {
console.log('params', params) console.log('params', params)
var res = `<span style='color:rgba(255,255,255,0.85)'>${params[0].axisValueLabel}</span>`; 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++) { 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 : '' 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); // console.log(item.color, color);
res += res +=
"<br/>" + "<br/>" +
`${params[i].seriesType === "line" `${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; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:42.3%;left:4%;'></span>
: `<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: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:38.82%;left:5%;'></span>
<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size:16px;margin-left:20px;letter-spacing: 2px;'>${params[i].seriesName}</span>`
: `<span style="display:inline-block;margin-right:4px;border-radius:2px;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:150px;color:rgba(255,255,255,.85);font-size:14px;'>${params[i].seriesName}</span>` + `<span style='width:180px;display:inline-block;color:rgba(255,255,255,0.65);font-size:16px;text-align: right;letter-spacing: 2px;'>${params[i].value ? params[i].value : 0 }</span>`;
`<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${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;
}, },
}, },
@ -111,25 +110,25 @@ export default {
}, },
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 14, fontSize: 16,
}, },
data: this.xAxis, data: this.xAxis,
}, },
yAxis: { yAxis: {
name: "单位/片", name: "单位/片",
position: 'left', // position: 'left',
nameTextStyle: { nameTextStyle: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 14, fontSize: 16,
align: 'right' align: 'right'
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "#fff", color: "rgba(223,241,254,.8)",
fontSize: 14, fontSize: 16,
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -257,9 +256,9 @@ export default {
this.actualOptions.series.map((item) => { this.actualOptions.series.map((item) => {
item.barWidth = val ? 18 : 12; item.barWidth = val ? 18 : 12;
}); });
this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 14; this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 14; this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 14; this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16;
this.initOptions(this.actualOptions); this.initOptions(this.actualOptions);
}, },
series(val) { series(val) {
@ -322,13 +321,13 @@ export default {
.legend-item:nth-child(1):before { .legend-item:nth-child(1):before {
// width: 12px; // width: 12px;
// height: 2px; // height: 2px;
width: 0.638vw; width: 1vw;
height: 0.1064vw; height: 0.1064vw;
background-color: #f3c000; background-color: #f3c000;
position: absolute; position: absolute;
top: 50%; top: 50%;
// left: -16px; // left: -16px;
left: -0.851vw; left: -1.2vw;
transform: translateY(-50%); transform: translateY(-50%);
} }
.legend-item:nth-child(1):after { .legend-item:nth-child(1):after {
@ -338,11 +337,11 @@ export default {
position: absolute; position: absolute;
// width: 6px; // width: 6px;
// height: 6px; // height: 6px;
width: 0.3191vw; width: 0.4vw;
height: 0.3191vw; height: 0.4vw;
border-radius: 100%; border-radius: 100%;
top: 50%; top: 50%;
left: -0.851vw; left: -1.1vw;
// left: -16px; // left: -16px;
transform: translateY(-50%) translateX(50%); transform: translateY(-50%) translateX(50%);
} }

4
src/views/dashboard/components/CompanyInfo.vue
View File

@ -92,7 +92,7 @@ export default {
} }
h2 { h2 {
padding: 0 1vw; // padding: 0 1vw;
margin: 6px 0; margin: 6px 0;
font-family: 优设标题黑; font-family: 优设标题黑;
color: #fff; color: #fff;
@ -116,7 +116,7 @@ ul {
} }
li { li {
font-size: 0.851em; font-size: 0.77em;
} }
.corner { .corner {

5
src/views/dashboard/components/Container.vue
View File

@ -82,6 +82,7 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.dashboard-container { .dashboard-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -132,8 +133,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.95vw; width: 0.7vw;
height: 0.95vw; height: 0.7vw;
} }
.corner.tl { .corner.tl {

6
src/views/dashboard/components/leftContainer.vue
View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-07-08 13:51:30 * @Date: 2024-07-08 13:51:30
* @LastEditTime: 2024-07-08 13:53:26 * @LastEditTime: 2024-07-19 10:43:18
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -133,8 +133,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.95vw; width: 0.7vw;
height: 0.95vw; height: 0.7vw;
} }
.corner.tl { .corner.tl {

4
src/views/index.vue
View File

@ -70,11 +70,11 @@ const LOCATIONS = [
// 蚌埠2 // 蚌埠2
// { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' }, // { x: 61, y: 53, tx: 39, ty: 68, path: 'factoryData/ksIndex' },
// 江西 瑞昌 // 江西 瑞昌
{ x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:69.5,lty:52, path: 'factoryData/factory-data' }, { x: 60, y: 58, tx: 68, ty: 51,lx:61,ly:61.5,ltx:69.3,lty:51.4, path: 'factoryData/factory-data' },
// 湖南 株洲 // 湖南 株洲
// { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' }, // { x: 56, y: 60, tx: 60, ty: 95, path: 'factoryData/zzIndex' },
// 邯郸 // 邯郸
{ x: 58, y: 45, tx: 47.4, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' }, { x: 58, y: 45, tx: 48.5, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' },
]; ];
// rcLine.style.left = `66.8%`; // rcLine.style.left = `66.8%`;
// rcLine.style.top = `52%`; // rcLine.style.top = `52%`;

2
src/views/produce/data/index.vue
View File

@ -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-23 17:58:28 * @LastEditTime: 2024-07-23 18:00:55
* @LastEditors: DY * @LastEditors: DY
* @Description: * @Description:
--> -->