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

Compare commits

base: mt-fe-group:99d60a14bd76727181b24fdbd0b855d4f776c54c
Branches Tags
mt-fe-group:projects/mescc/develop
mt-fe-group:projects/mescc/zhp
mt-fe-group:projects/mescc/dy
mt-fe-group:projects/mescc/zjl
mt-fe-group:projects/mescc/main
mt-fe-group:projects/mescc/lb
mt-fe-group:drone
mt-fe-group:projects/mescc/lb-home-map
mt-fe-group:master
..
compare: mt-fe-group:efa5a7c383eced5daa2e944696b99e744bac37eb
Branches Tags
mt-fe-group:projects/mescc/develop
mt-fe-group:projects/mescc/zhp
mt-fe-group:projects/mescc/dy
mt-fe-group:projects/mescc/zjl
mt-fe-group:projects/mescc/main
mt-fe-group:projects/mescc/lb
mt-fe-group:drone
mt-fe-group:projects/mescc/lb-home-map
mt-fe-group:master

No commits in common. "99d60a14bd76727181b24fdbd0b855d4f776c54c" and "efa5a7c383eced5daa2e944696b99e744bac37eb" have entirely different histories.
99d60a14bd ... efa5a7c383

29 changed files with 380 additions and 540 deletions
Show Stats Expand all files Collapse all files

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

@ -1,11 +1,10 @@
<!-- <!--
* @Author: zhp * @Author: zhp
* @Date: 2024-07-10 15:17:28 * @Date: 2024-06-03 15:38:31
* @LastEditTime: 2024-07-19 15:18:00 * @LastEditTime: 2024-07-09 15:59:41
* @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.72vw' : '0.7vw' }">{{ item.label }}</span> :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ 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,26 +70,22 @@ export default {
color: "rgba(237,237,237,0.5)", color: "rgba(237,237,237,0.5)",
}, },
}, },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
extraCssText: 'padding:0;border-width:0', backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => { formatter: params => {
var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${params[0].axisValueLabel}</span>`; 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++) { 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:12px;height:12px;background-color:${color}'></span>` + `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size: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='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>`; `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
} }
const htmlContent = ` return res;
<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: {
@ -102,24 +98,24 @@ export default {
}, },
}, },
axisLabel: { axisLabel: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 12,
}, },
data: this.xAxis, data: this.xAxis,
}, },
yAxis: { yAxis: {
name: "单位/片", name: "单位/片",
nameTextStyle: { nameTextStyle: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 12,
align: "right", align: "right",
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 12,
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -137,7 +133,7 @@ export default {
{ {
name: "", // this.series[0].name, name: "", // this.series[0].name,
type: "bar", type: "bar",
barWidth: 16, barWidth: 12,
itemStyle: { itemStyle: {
borderRadius: [10, 10, 0, 0], borderRadius: [10, 10, 0, 0],
color: { color: {
@ -172,7 +168,7 @@ export default {
{ {
name: "", // this.series[1].name, name: "", // this.series[1].name,
type: "bar", type: "bar",
barWidth: 16, barWidth: 12,
// tooltip: { // tooltip: {
// valueFormatter: function (value) { // valueFormatter: function (value) {
// return value + " ml"; // return value + " ml";
@ -218,18 +214,18 @@ export default {
}, },
isFullscreen(val) { isFullscreen(val) {
this.options.series.map((item) => { this.options.series.map((item) => {
item.barWidth = val ? 18 : 16; item.barWidth = val ? 18 : 12;
}); });
this.options.xAxis.axisLabel.fontSize = val ? 18 : 16; this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 16; this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16; this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.options); this.initChart(this.options);
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 16; // item.barWidth = val ? 18 : 12;
// }); // });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.initChart(this.actualOptions); // this.initChart(this.actualOptions);
this.canvasReset() this.canvasReset()
}, },

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

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

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

@ -74,7 +74,6 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -148,8 +147,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.7vw; width: 0.95vw;
height: 0.7vw; height: 0.95vw;
} }
.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-19 16:08:27 * @LastEditTime: 2024-07-03 14:08:52
* @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.72vw' : '0.7vw' }">{{ item.label }}</span> :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ 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,26 +71,22 @@ export default {
color: "rgba(237,237,237,0.5)", color: "rgba(237,237,237,0.5)",
}, },
}, },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
extraCssText: 'padding:0;border-width:0', backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => { formatter: params => {
var res = `<span style='color:rgba(255,255,255,0.85);display:inline-block;margin-bottom:8px;'>${params[0].axisValueLabel}</span>`; 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++) { 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:12px;height:12px;background-color:${color}'></span>` + `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size: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='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>`; `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
} }
const htmlContent = ` return res;
<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: {
@ -103,24 +99,24 @@ export default {
}, },
}, },
axisLabel: { axisLabel: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 12,
}, },
data: this.xAxis, data: this.xAxis,
}, },
yAxis: { yAxis: {
name: "单位/片", name: "单位/片",
nameTextStyle: { nameTextStyle: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 12,
align: "right", align: "right",
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 12,
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -138,7 +134,7 @@ export default {
{ {
name: "", // this.series[0].name, name: "", // this.series[0].name,
type: "bar", type: "bar",
barWidth: 16, barWidth: 12,
itemStyle: { itemStyle: {
borderRadius: [10, 10, 0, 0], borderRadius: [10, 10, 0, 0],
color: { color: {
@ -173,7 +169,7 @@ export default {
{ {
name: "", // this.series[1].name, name: "", // this.series[1].name,
type: "bar", type: "bar",
barWidth: 16, barWidth: 12,
// tooltip: { // tooltip: {
// valueFormatter: function (value) { // valueFormatter: function (value) {
// return value + " ml"; // return value + " ml";
@ -219,18 +215,18 @@ export default {
}, },
isFullscreen(val) { isFullscreen(val) {
this.options.series.map((item) => { this.options.series.map((item) => {
item.barWidth = val ? 18 : 16; item.barWidth = val ? 18 : 12;
}); });
this.options.xAxis.axisLabel.fontSize = val ? 18 : 16; this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 16; this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16; this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.options); this.initChart(this.options);
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 16; // item.barWidth = val ? 18 : 12;
// }); // });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// 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-19 16:11:59 * @LastEditTime: 2024-07-09 15:35:19
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -73,7 +73,6 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -145,8 +144,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.7vw; width: 0.95vw;
height: 0.7vw; height: 0.95vw;
} }
.corner.tl { .corner.tl {

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

@ -74,7 +74,6 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -148,8 +147,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.7vw; width: 0.95vw;
height: 0.7vw; height: 0.95vw;
} }
.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-19 16:14:07 * @LastEditTime: 2024-07-09 15:35:04
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -100,7 +100,6 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -172,8 +171,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.7vw; width: 0.95vw;
height: 0.7vw; height: 0.95vw;
} }
.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-19 16:10:10 * @LastEditTime: 2024-07-09 14:51:21
* @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.72vw' : '0.7vw' }">{{ item.label }}</span> :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ 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,32 +70,25 @@ export default {
color: "rgba(237,237,237,0.5)", color: "rgba(237,237,237,0.5)",
}, },
}, },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
extraCssText: 'padding:0;border-width:0', backgroundColor: '#001829',
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);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/>" +
`${params[i].seriesType === "line" `${params[i].seriesType === "line"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span> ? '<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: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></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: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;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='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>`;
} }
const htmlContent = ` return res;
<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: {
@ -108,23 +101,23 @@ export default {
}, },
}, },
axisLabel: { axisLabel: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 12,
}, },
data: this.xAxis, data: this.xAxis,
}, },
yAxis: { yAxis: {
name: "单位/%", name: "单位/%",
nameTextStyle: { nameTextStyle: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 12,
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 12,
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -142,7 +135,7 @@ export default {
{ {
name: "", // this.series[0].name, name: "", // this.series[0].name,
type: "bar", type: "bar",
barWidth: 16, barWidth: 12,
itemStyle: { itemStyle: {
borderRadius: [10, 10, 0, 0], borderRadius: [10, 10, 0, 0],
color: { color: {
@ -177,7 +170,7 @@ export default {
{ {
name: "", // this.series[1].name, name: "", // this.series[1].name,
type: "bar", type: "bar",
barWidth: 16, barWidth: 12,
// tooltip: { // tooltip: {
// valueFormatter: function (value) { // valueFormatter: function (value) {
// return value + " ml"; // return value + " ml";
@ -257,11 +250,11 @@ export default {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */ /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) { isFullscreen(val) {
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 16; // item.barWidth = val ? 18 : 12;
// }); // });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// if (val === false && this.isOpen === true) { // if (val === false && this.isOpen === true) {
// console.log(val) // console.log(val)
// this.width = 97 + '%' // this.width = 97 + '%'
@ -271,11 +264,11 @@ export default {
// this.canvasReset() // this.canvasReset()
// } // }
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 16; // item.barWidth = val ? 18 : 12;
// }); // });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
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-19 16:10:19 * @LastEditTime: 2024-07-09 14:57:49
* @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.72vw' : '0.7vw' }">{{ item.label }}</span> :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ 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,32 +70,25 @@ export default {
color: "rgba(237,237,237,0.5)", color: "rgba(237,237,237,0.5)",
}, },
}, },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
extraCssText: 'padding:0;border-width:0', backgroundColor: '#001829',
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);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/>" +
`${params[i].seriesType === "line" `${params[i].seriesType === "line"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:76.3%;left:3.5%;'></span> ? '<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: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:72.6%;left:4.8%;'></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: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;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='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>`;
} }
const htmlContent = ` return res;
<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: {
@ -108,23 +101,23 @@ export default {
}, },
}, },
axisLabel: { axisLabel: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 12,
}, },
data: this.xAxis, data: this.xAxis,
}, },
yAxis: { yAxis: {
name: "单位/%", name: "单位/%",
nameTextStyle: { nameTextStyle: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 12,
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 12,
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -142,7 +135,7 @@ export default {
{ {
name: "", // this.series[0].name, name: "", // this.series[0].name,
type: "bar", type: "bar",
barWidth: 16, barWidth: 12,
itemStyle: { itemStyle: {
borderRadius: [10, 10, 0, 0], borderRadius: [10, 10, 0, 0],
color: { color: {
@ -177,7 +170,7 @@ export default {
{ {
name: "", // this.series[1].name, name: "", // this.series[1].name,
type: "bar", type: "bar",
barWidth: 16, barWidth: 12,
// tooltip: { // tooltip: {
// valueFormatter: function (value) { // valueFormatter: function (value) {
// return value + " ml"; // return value + " ml";
@ -257,11 +250,11 @@ export default {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */ /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) { isFullscreen(val) {
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 16; // item.barWidth = val ? 18 : 12;
// }); // });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// if (val === false && this.isOpen === true) { // if (val === false && this.isOpen === true) {
// console.log(val) // console.log(val)
// this.width = 97 + '%' // this.width = 97 + '%'
@ -271,11 +264,11 @@ export default {
// this.canvasReset() // this.canvasReset()
// } // }
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 16; // item.barWidth = val ? 18 : 12;
// }); // });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
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: "middle", top: "37%",
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
fontWeight: 600, fontWeight: 600,
fontSize: 36, fontSize: 36,
color: "rgba(223,241,254,.8)", color: "#fffd",
}, },
subtext: `\u2002${yesterday + '日良率'}\u2002`, subtext: `\u2002${yesterday + '日良率'}\u2002`,
subtextStyle: { subtextStyle: {
fontSize: 16, fontSize: 16,
fontWeight: 100, fontWeight: 100,
color: "rgba(255,255,255,.7)", color: "#fffd",
align: "right", align: "right",
}, },
}, },
@ -67,15 +67,8 @@
value: currentSum, value: currentSum,
name: currentName, name: currentName,
tooltip: { tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
extraCssText: 'padding:0;border-width:0', `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
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: {
@ -100,15 +93,8 @@
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum), value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName, name: currentName,
tooltip: { tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
extraCssText: 'padding:0;border-width:0', `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
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 },
@ -132,15 +118,8 @@
value: previousSum, value: previousSum,
name: preName, name: preName,
tooltip: { tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
extraCssText: 'padding:0;border-width:0', `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
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: {
@ -165,15 +144,8 @@
value:previousSum === 0 ? 1 : 0, value:previousSum === 0 ? 1 : 0,
name: preName, name: preName,
tooltip: { tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
extraCssText: 'padding:0;border-width:0', `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
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: "9%", left: "6%",
right: "3%", right: "3%",
bottom: "15%", bottom: "15%",
top: "15%", top: "15%",
@ -68,26 +68,21 @@ export default {
color: "rgba(237,237,237,0.5)", color: "rgba(237,237,237,0.5)",
}, },
}, },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
extraCssText: 'padding:0;border-width:0', backgroundColor: '#001829',
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:12px;height:12px;background-color:${color}'></span>` + `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${params[0].axisValueLabel}</span>` + `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
`<span style='color:rgba(255,255,255,0.65);font-size: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>`;
} }
const htmlContent = ` return res;
<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: {
@ -102,8 +97,8 @@ export default {
axisLabel: { axisLabel: {
interval: 0,//设置横坐标为斜 interval: 0,//设置横坐标为斜
rotate:45, rotate:45,
color: "rgba(223,241,254,.8)", color: "rgba(255, 255, 255, 0.7)",
fontSize: 16, fontSize: 12,
// formatter: function (value) { // formatter: function (value) {
// console.log(value); // console.log(value);
@ -124,16 +119,16 @@ export default {
name: "单位/片", name: "单位/片",
position: 'left', position: 'left',
nameTextStyle: { nameTextStyle: {
color: "rgba(223,241,254,.8)", color: "rgba(255, 255, 255, 0.7)",
fontSize: 16, fontSize: 12,
align: "right", align: "right",
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "rgba(223,241,254,.8)", color: "rgba(255, 255, 255, 0.7)",
fontSize:16, fontSize: 10,
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -201,7 +196,7 @@ export default {
// { offset: 1, color: "#12FFF5" + "00" }, // { offset: 1, color: "#12FFF5" + "00" },
// ]), // ]),
// }, // },
barWidth: 16, barWidth: 12,
itemStyle: { itemStyle: {
borderRadius: [10, 10, 0, 0], borderRadius: [10, 10, 0, 0],
color: { color: {
@ -245,11 +240,11 @@ export default {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */ /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
// isFullscreen(val) { // isFullscreen(val) {
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 16; // item.barWidth = val ? 18 : 12;
// }); // });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// 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-18 16:48:10 * @LastEditTime: 2024-07-03 14:10:06
* @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.72vw' : '0.7vw' }">{{ item.label }}</span> :style="{ fontSize: isFullscreen ? '0.58vw' : '0.54vw' }">{{ 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: "8%", left: "5%",
right: "0%", right: "0%",
bottom: "3%", bottom: "3%",
top: "15%", top: "15%",
@ -97,27 +97,22 @@ export default {
color: "rgba(237,237,237,0.5)", color: "rgba(237,237,237,0.5)",
}, },
}, },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
extraCssText: 'padding:0;border-width:0', backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => { 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>`; 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++) { 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:12px;height:12px;background-color:${color}'></span>` + `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
`<span style='display:inline-block;width:150px;color:rgba(255,255,255,.85);font-size: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='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>`; `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
} }
const htmlContent = ` return res;
<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: {
@ -130,8 +125,8 @@ export default {
}, },
}, },
axisLabel: { axisLabel: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 12,
}, },
data: this.xAxis, data: this.xAxis,
}, },
@ -139,16 +134,16 @@ export default {
name: "单位/片", name: "单位/片",
position: 'left', position: 'left',
nameTextStyle: { nameTextStyle: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 12,
align: "right", align: "right",
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 12,
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -166,7 +161,7 @@ export default {
{ {
name: "FTO", // this.series[0].name, name: "FTO", // this.series[0].name,
type: "bar", type: "bar",
barWidth: 16, barWidth: 12,
itemStyle: { itemStyle: {
borderRadius: [10, 10, 0, 0], borderRadius: [10, 10, 0, 0],
color: { color: {
@ -201,7 +196,7 @@ export default {
{ {
name: "", // this.series[1].name, name: "", // this.series[1].name,
type: "bar", type: "bar",
barWidth: 16, barWidth: 12,
// tooltip: { // tooltip: {
// valueFormatter: function (value) { // valueFormatter: function (value) {
// return value + " ml"; // return value + " ml";
@ -233,7 +228,7 @@ export default {
{ {
name: "", // "2024年目标值", name: "", // "2024年目标值",
type: "line", type: "line",
barWidth: 16, barWidth: 12,
itemStyle: { itemStyle: {
borderRadius: [10, 10, 0, 0], borderRadius: [10, 10, 0, 0],
color:'#f3c000' color:'#f3c000'
@ -260,11 +255,11 @@ export default {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */ /** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
isFullscreen(val) { isFullscreen(val) {
this.options.series.map((item) => { this.options.series.map((item) => {
item.barWidth = val ? 18 : 16; item.barWidth = val ? 18 : 12;
}); });
this.options.xAxis.axisLabel.fontSize = val ? 18 : 16; this.options.xAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.axisLabel.fontSize = val ? 18 : 16; this.options.yAxis.axisLabel.fontSize = val ? 18 : 12;
this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 16; this.options.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// if (val === false && this.isOpen === true) { // if (val === false && this.isOpen === true) {
// console.log(val) // console.log(val)
// this.width = 97 + '%' // this.width = 97 + '%'
@ -274,11 +269,11 @@ export default {
// this.canvasReset() // this.canvasReset()
// } // }
// this.actualOptions.series.map((item) => { // this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 16; // item.barWidth = val ? 18 : 12;
// }); // });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; // this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
this.initChart(this.options) this.initChart(this.options)
this.canvasReset() this.canvasReset()
}, },
@ -355,7 +350,7 @@ export default {
.legend-item { .legend-item {
position: relative; position: relative;
font-size: 1.2vw; // font-size: 12px;
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,8 +1,7 @@
<template> <template>
<div class="order-container"> <div class="order-container">
<div class="table"> <div class="table">
<dv-scroll-board v-if="showTable" :config="config" <dv-scroll-board v-if="showTable" :config="config" style="width: 100%; height: 100%; color: rgba(255, 255, 255, .6);" ref="orderScrollBoard" />
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">
@ -13,7 +12,8 @@
<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" style="height: 0;flex:1"></barChartBase> <barChartBase :type="type" :energyCockpits="prodOrder" ref="barChart"
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:16, fontSize:14,
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 || ""} style='color: rgba(223,241,254,.8);font-size:16px' >${ `<span title=${this.prodOrder[i].workOrderNumber || ""}>${
this.prodOrder[i].workOrderNumber || "" this.prodOrder[i].workOrderNumber || ""
}</span>`, }</span>`,
`<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 title=${this.prodOrder[i].orderStatus || ""}>${this.prodOrder[i].orderStatus === 1 ? '未开始' : this.prodOrder[i].orderStatus === 2 ? '进行中' : '已完成' || ""
}</span>`, }</span>`,
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || "" `<span title=${this.prodOrder[i].plannedInvestment || ""}>${this.prodOrder[i].plannedInvestment || ""
}</span>`, }</span>`,
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || "" `<span title=${this.prodOrder[i].actualInvestment || ""}>${this.prodOrder[i].actualInvestment || ""
}</span>`, }</span>`,
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || "" `<span title=${this.prodOrder[i].targetProduction || ""}>${this.prodOrder[i].targetProduction || ""
}</span>`, }</span>`,
`<span style='color: rgba(223,241,254,.8);font-size:16px' title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || "" `<span title=${this.prodOrder[i].actualProduction || ""}>${this.prodOrder[i].actualProduction || ""
}</span>`, }</span>`,
`<span style="display:inline-block;width:45px;color: rgba(223,241,254,.8)">${this.prodOrder[i].productionProgress `<span style="display:inline-block;width:45px;">${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-07-18 16:16:24 * @LastEditTime: 2024-06-07 11:04:41
* @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: 14px; font-size: 12px;
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: 14px; font-size: 12px;
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-19 16:16:02 * @LastEditTime: 2024-07-09 16:54:24
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -81,7 +81,6 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -153,8 +152,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.7vw; width: 0.95vw;
height: 0.7vw; height: 0.95vw;
} }
.corner.tl { .corner.tl {

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

@ -79,7 +79,6 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.copilot-container { .copilot-container {
height: 100%; height: 100%;
flex: 1; flex: 1;
@ -148,8 +147,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.7vw; width: 0.95vw;
height: 0.7vw; height: 0.95vw;
} }
.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-19 16:05:46 * @LastEditTime: 2024-07-09 08:58:47
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -165,15 +165,10 @@ 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],
@ -224,12 +219,7 @@ 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 = [];
@ -306,9 +296,8 @@ function calculateItems(period, valueTuple, than) {
</script> </script>
<style scoped> <style scoped>
.double-ring-chart { .double-ring-chart {
height: 98%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
@ -332,7 +321,6 @@ 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,8 +3,6 @@ export default ({
subtitle, subtitle,
previousSum, previousSum,
currentSum, currentSum,
subtitleSize,
titleSize,
targetSum, targetSum,
currentName, currentName,
preName, preName,
@ -18,27 +16,25 @@ 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: "middle", top: "35%",
itemGap: 12,
textVerticalAlign:'auto',
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
fontWeight: 400, fontWeight: 400,
fontSize: titleSize, fontSize: 32,
color: "rgba(223,241,254,.8)", color: "#fffd",
}, },
subtext: `\u2002${subtitle}\u2002`, subtext: `\u2002${subtitle}\u2002`,
subtextStyle: { subtextStyle: {
fontSize: subtitleSize, fontSize: 14,
fontWeight: 100, fontWeight: 100,
color: "rgba(255,255,255,.7)", color: "#fffd",
align: "right", align: "right",
}, },
}, },
@ -47,7 +43,7 @@ export default ({
{ {
type: "pie", type: "pie",
name: "当前目标", name: "当前目标",
radius: ["74%", "86%"], radius: ["80%", "95%"],
center: ["50%", "48%"], center: ["50%", "48%"],
emptyCircleStyle: { emptyCircleStyle: {
color: "#042c5f33", color: "#042c5f33",
@ -56,7 +52,7 @@ export default ({
// 数据 series // 数据 series
{ {
type: "pie", type: "pie",
radius: ["74%", "86%"], radius: ["80%", "95%"],
center: ["50%", "48%"], center: ["50%", "48%"],
avoidLabelOvervlap: false, avoidLabelOvervlap: false,
label: { label: {
@ -71,15 +67,8 @@ export default ({
name: currentName, name: currentName,
selected: false, selected: false,
tooltip: { tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
extraCssText: 'padding:0;border-width:0', `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
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",
@ -103,15 +92,8 @@ export default ({
value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum), value:(targetSum - currentSum) === 0 ? 1 : (targetSum - currentSum),
name: currentName, name: currentName,
tooltip: { tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${currentName}</span>` +
extraCssText: 'padding:0;border-width:0', `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${currentSum}</span>`
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 },
@ -121,7 +103,7 @@ export default ({
// 数据 series2 - 2023累计 // 数据 series2 - 2023累计
{ {
type: "pie", type: "pie",
radius: ["61%", "74%"], radius: ["65%", "80%"],
center: ["50%", "48%"], center: ["50%", "48%"],
avoidLabelOvervlap: false, avoidLabelOvervlap: false,
label: { label: {
@ -136,15 +118,8 @@ export default ({
name: preName, name: preName,
selected: false, selected: false,
tooltip: { tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
extraCssText: 'padding:0;border-width:0', `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
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",
@ -169,15 +144,8 @@ export default ({
value:previousSum === 0 ? 1 : 0, value:previousSum === 0 ? 1 : 0,
name: preName, name: preName,
tooltip: { tooltip: {
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 formatter: `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${preName}</span>` +
extraCssText: 'padding:0;border-width:0', `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${previousSum}</span>`
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-18 16:37:41 * @LastEditTime: 2024-07-08 13:43:52
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -61,8 +61,23 @@ export default {
// color: "rgba(237,237,237,0.5)", // color: "rgba(237,237,237,0.5)",
// }, // },
// }, // },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
extraCssText: 'padding:0;border-width:0', backgroundColor: '#001829',
borderColor: '#001829',
// formatter: params => {
// console.log('params', params)
// var res = ``;
// for (var i = 0, l = params.length; i < l; i++) {
// let color = Object.prototype.toString.call(params[i].color) == "[object String]" ? params[i].color : params[i].color.colorStops ? params[i].color.colorStops[0].color : ''
// // console.log(item.color, color);
// res +=
// // `<span style='display:inline-block;margin-right:4px;width:10px;height:10px;background-color:${color}'></span>` +
// `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${params[0].axisValueLabel}</span>` +
// `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
// }
// console.log('res',res)
// return res;
// },
}, },
title: { title: {
text: "0%", text: "0%",
@ -112,6 +127,7 @@ export default {
name: `${year}累计产出`, name: `${year}累计产出`,
selected: false, selected: false,
tooltip: { tooltip: {
formatter: null,
}, },
itemStyle: { itemStyle: {
borderJoin: "round", borderJoin: "round",
@ -135,6 +151,7 @@ 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 },
@ -159,17 +176,7 @@ export default {
name: `${year - 1}累计产出`, name: `${year - 1}累计产出`,
selected: false, selected: false,
tooltip: { tooltip: {
trigger: "item", formatter: null,
// 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",
@ -193,15 +200,7 @@ export default {
value: 0, value: 0,
name: `${year - 1}累计产出`, name: `${year - 1}累计产出`,
tooltip: { tooltip: {
trigger: "item", formatter:null,
// 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 },
@ -264,65 +263,34 @@ 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 =
`<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;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;'>${0 + '片'}</span>`;
<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:16px;letter-spacing: 2px;'>${year + '累计完成'}</span> this.options.series[1].data[1].tooltip.formatter = `<span style='display:inline-block;width:150px;color:rgba(255,255,255,0855);font-size:14px;'>${year + '累计完成'}</span>` +
<span style='color:rgba(255,255,255,0.65);font-size:16px;letter-spacing: 2px;'>${0}</span> `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${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 = 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;'>${this.output.current + '片'}</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;'>${this.output.current + '片'}</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 = 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>` +
`<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:#1065ff'></span> 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;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:14px;'>${0 + '片'}</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 = 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>` +
`<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;'>${this.output.previous + '片'}</span>`;
<span style='display:inline-block;margin-right:4px;border-radius:2px;width:12px;height:12px;background-color:#1065ff'></span> 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;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:14px;'>${this.output.previous + '片'}</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,10 +8,19 @@
<template> <template>
<chart-container class="left-chart-base"> <chart-container class="left-chart-base">
<div class="legend"> <div class="legend">
<span style="color: rgba(223,241,254,.8);" v-for="item in legend" :key="item.label" class="legend-item" <span
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span> v-for="item in legend"
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }"
>{{ item.label }}</span
>
</div> </div>
<div ref="chart" style="max-width: 22vw" :style="{ height: vHeight + 'vh' }"></div> <div
ref="chart"
style="max-width: 22vw"
:style="{ height: vHeight + 'vh' }"
></div>
</chart-container> </chart-container>
</template> </template>
@ -64,32 +73,25 @@ export default {
color: "rgba(237,237,237,0.5)", color: "rgba(237,237,237,0.5)",
}, },
}, },
backgroundColor: 'rgba(0,0,0,0)', // tooltip默认背景为白色，手动置为透明 extraCssText: 'box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.38); border- radius: 4px;opacity: 0.6;backdrop- filter: blur(6px);',
extraCssText: 'padding:0;border-width:0', backgroundColor: '#001829',
borderColor: '#001829',
formatter: params => { formatter: params => {
console.log('params', 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;border-radius:2px;width:12px;height:12px;background-color:${color}'></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: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: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>`; `<span style='color:rgba(255,255,255,0.65);font-size:14px;'>${params[i].value ? params[i].value + '片' : 0 + '片'}</span>`;
} }
const htmlContent = ` return res;
<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,
}, },
@ -99,27 +101,25 @@ export default {
}, },
}, },
axisLabel: { axisLabel: {
textStyle: { 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: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 14,
align:'right' align:'right'
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 14,
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -143,7 +143,7 @@ export default {
align: 'right', //在上方显示 align: 'right', //在上方显示
position: 'top', //在上方显示 position: 'top', //在上方显示
textStyle: { //数值样式 textStyle: { //数值样式
color: "rgba(223,241,254,.8)", color: '#DFF1FE',
fontSize: 14 fontSize: 14
} }
}, },
@ -187,8 +187,8 @@ export default {
align: 'left', //在上方显示 align: 'left', //在上方显示
position: 'top', //在上方显示 position: 'top', //在上方显示
textStyle: { //数值样式 textStyle: { //数值样式
color: "rgba(223,241,254,.8)", color: '#DFF1FE',
fontSize: 16 fontSize: 14
} }
}, },
itemStyle: { itemStyle: {
@ -260,25 +260,9 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.echarts-tooltip{
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 { .left-chart-base {
// position: relative;
.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-19 15:25:37 * @LastEditTime: 2024-07-08 14:30:44
* @LastEditors: zhp * @LastEditors: zhp
* @Description: * @Description:
--> -->
@ -15,10 +15,19 @@
<template> <template>
<chart-container class="right-chart-base"> <chart-container class="right-chart-base">
<div class="legend"> <div class="legend">
<span style="color: rgba(223,241,254,.8);" v-for="item in legend" :key="item.label" class="legend-item" <span
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }">{{ item.label }}</span> v-for="item in legend"
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.72vw' : '0.7vw' }"
>{{ item.label }}</span
>
</div> </div>
<div ref="chart" style="max-width: 22vw" :style="{ height: vHeight + 'vh' }"></div> <div
ref="chart"
style="max-width: 22vw"
:style="{ height: vHeight + 'vh' }"
></div>
</chart-container> </chart-container>
</template> </template>
@ -56,7 +65,7 @@ export default {
isFullscreen: false, isFullscreen: false,
options: { options: {
grid: { grid: {
left: "6%", left: "5%",
right: "4%", right: "4%",
bottom: "0", bottom: "0",
top: "18%", top: "18%",
@ -70,33 +79,25 @@ export default {
color: "rgba(237,237,237,0.5)", color: "rgba(237,237,237,0.5)",
}, },
}, },
confine:true, 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(50,50,50,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='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/>" +
`${params[i].seriesType === "line" `${params[i].seriesType === "line"
? `<span style='display:inline-block; width: 20px;height: 2px;background-color: #f3c000;position: absolute;top:42.3%;left:4%;'></span> ? '<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: 10px;height: 10px;border-radius: 100%;background-color: #f3c000;position: absolute;top:38.82%;left: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: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='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='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>`;
} }
const htmlContent = ` return res;
<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;
}, },
}, },
@ -110,25 +111,25 @@ export default {
}, },
}, },
axisLabel: { axisLabel: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 14,
}, },
data: this.xAxis, data: this.xAxis,
}, },
yAxis: { yAxis: {
name: "单位/片", name: "单位/片",
// position: 'left', position: 'left',
nameTextStyle: { nameTextStyle: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 14,
align: 'right' align: 'right'
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
axisLabel: { axisLabel: {
color: "rgba(223,241,254,.8)", color: "#fff",
fontSize: 16, fontSize: 14,
}, },
axisLine: { axisLine: {
show: true, show: true,
@ -256,9 +257,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 : 16; this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 14;
this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 16; this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 14;
this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 16; this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 14;
this.initOptions(this.actualOptions); this.initOptions(this.actualOptions);
}, },
series(val) { series(val) {
@ -321,13 +322,13 @@ export default {
.legend-item:nth-child(1):before { .legend-item:nth-child(1):before {
// width: 12px; // width: 12px;
// height: 2px; // height: 2px;
width: 1vw; width: 0.638vw;
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: -1.2vw; left: -0.851vw;
transform: translateY(-50%); transform: translateY(-50%);
} }
.legend-item:nth-child(1):after { .legend-item:nth-child(1):after {
@ -337,11 +338,11 @@ export default {
position: absolute; position: absolute;
// width: 6px; // width: 6px;
// height: 6px; // height: 6px;
width: 0.4vw; width: 0.3191vw;
height: 0.4vw; height: 0.3191vw;
border-radius: 100%; border-radius: 100%;
top: 50%; top: 50%;
left: -1.1vw; left: -0.851vw;
// 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.77em; font-size: 0.851em;
} }
.corner { .corner {

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

@ -82,7 +82,6 @@ export default {
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.dashboard-container { .dashboard-container {
height: 0; height: 0;
flex: 1; flex: 1;
@ -133,8 +132,8 @@ export default {
position: absolute; position: absolute;
// width: 16px; // width: 16px;
// height: 16px; // height: 16px;
width: 0.7vw; width: 0.95vw;
height: 0.7vw; height: 0.95vw;
} }
.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-19 10:43:18 * @LastEditTime: 2024-07-08 13:53:26
* @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.7vw; width: 0.95vw;
height: 0.7vw; height: 0.95vw;
} }
.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: 51,lx:61,ly:61.5,ltx:69.3,lty:51.4, path: 'factoryData/factory-data' }, { x: 60, y: 58, tx: 68, ty: 52,lx:61,ly:61.5,ltx:69.5,lty:52, 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: 48.5, ty: 34.3, lx: 58.7, ly: 34, ltx: 53.2, lty: 34, path: 'factoryData/hdIndex' }, { x: 58, y: 45, tx: 47.4, 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%`;

41
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 18:00:55 * @LastEditTime: 2024-07-16 17:47:40
* @LastEditors: DY * @LastEditors: DY
* @Description: * @Description:
--> -->
@ -392,8 +392,8 @@ export default {
// 工厂名称 this.factoryListabbr // 工厂名称 this.factoryListabbr
const factoryNameArray = (this.listQuery.factory.length === 0 || this.listQuery.factory.length === this.factoryListabbr.length) ? [0, 1] : this.listQuery.factory const factoryNameArray = (this.listQuery.factory.length === 0 || this.listQuery.factory.length === this.factoryListabbr.length) ? [0, 1] : this.listQuery.factory
const seriesArray = [] const seriesArray = []
factoryNameArray.forEach((fac, facIndex) => {
typeArray.forEach((type, typeIndex) => { typeArray.forEach((type, typeIndex) => {
factoryNameArray.forEach((fac, facIndex) => {
const series = { const series = {
data: Array(xAxisData.length).fill(0), data: Array(xAxisData.length).fill(0),
type: 'bar', type: 'bar',
@ -407,26 +407,27 @@ export default {
seriesArray.push(series) seriesArray.push(series)
}) })
}) })
// 构造series的data
// 按工厂分 const seriesDataArray = []
const arrayByFacArray = Object.groupBy(dataList, (member) => member.factory) Object.values(data).forEach((item) => {
// const seriesDataArray = [] let seriesData = []
let n = 0 // item[0].datestr 为日期
Object.values(arrayByFacArray).forEach((item) => { typeArray.forEach(t => {
typeArray.forEach(type => { const zidr = ['chipYield', 'componentYield', 'bipvProductOutput'][t]
const typeName = ['chipYield', 'componentYield', 'bipvProductOutput'][type]
let seriesData = Array(xAxisData.length).fill(0)
item.forEach(it => { item.forEach(it => {
xAxisData.forEach((x, xindex) => { seriesData.push(it[zidr])
if (x === it['datestr']) { })
seriesData[xindex] = it[typeName] })
seriesDataArray.push(seriesData)
})
for (let y = 0; y < seriesArray.length; y ++) {
const days = []
seriesDataArray.forEach(a => {
days.push(a[y])
})
// 赋值完成
seriesArray[y].data = days
} }
})
})
seriesArray[n].data = seriesData
n ++
})
})
// 添加工厂 // 添加工厂
const validSeriesArray = [] const validSeriesArray = []