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

各工厂数据

Browse Source
This commit is contained in:
朱菊兰
2024-05-09 15:43:02 +08:00
parent df50f7dcbe
commit 31da2a55a3
21 changed files with 1612 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

357
src/views/copilot/factoryData/components/Energy.vue Normal file
View File

@@ -0,0 +1,357 @@
<template>
<div class="left-chart-base">
<div class="legend">
<span
v-for="item in legend"
:key="item.label"
class="legend-item"
:style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }"
>{{ item.label }}</span
>
</div>
<div
ref="chart"
style="width: 100%"
:style="{ height: vHeight + 'vh' }"
></div>
</div>
</template>
<script>
import chartMixin from "@/mixins/chart.js";
import * as echarts from "echarts";
export default {
name: "Energy",
mixins: [chartMixin],
props: {
vHeight: {
type: Number,
default: 34,
},
legend: {
type: Array,
required: true,
},
xAxis: {
type: Array,
required: true,
},
series: {
type: Array,
required: true,
},
},
data() {
return {
isFullscreen: false,
actualOptions: null,
options: {
color: ["#FFD160", "#2760FF", "#12FFF5"],
grid: {
left: "3%",
right: "4%",
bottom: "0",
top: "15%",
containLabel: true,
},
tooltip: {
trigger: "axis",
},
xAxis: {
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#4561AE",
},
},
axisLabel: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
},
data: this.xAxis,
},
yAxis: [
{
type: "value",
name: "KW/h",
nameTextStyle: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
align: "right",
},
axisTick: {
show: false,
},
axisLabel: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: "#4561AE",
},
},
splitLine: {
lineStyle: {
color: "#4561AE",
},
},
},
{
type: "value",
name: "m³/h",
nameTextStyle: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
align: "left",
},
axisTick: {
show: false,
},
axisLabel: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 12,
},
axisLine: {
show: true,
lineStyle: {
color: "#4561AE",
},
},
splitLine: {
lineStyle: {
color: "#4561AE",
},
},
},
],
series: [
{
name: "",
data: [],
type: "line",
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#FFD160" + "80" },
{ offset: 0.5, color: "#FFD160" + "20" },
{ offset: 1, color: "#FFD160" + "00" },
]),
},
lineStyle: {
width: 2,
},
symbol: "circle",
symbolSize: 8,
emphasis: {
focus: "series",
},
},
{
name: "",
data: [],
type: "line",
yAxisIndex: 1,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#2760FF" + "80" },
{ offset: 0.5, color: "#2760FF" + "20" },
{ offset: 1, color: "#2760FF" + "00" },
]),
},
lineStyle: {
width: 2,
},
symbol: "circle",
symbolSize: 8,
emphasis: {
focus: "series",
},
},
{
name: "",
data: [],
type: "line",
yAxisIndex: 1,
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: "#12FFF5" + "80" },
{ offset: 0.5, color: "#12FFF5" + "20" },
{ offset: 1, color: "#12FFF5" + "00" },
]),
},
lineStyle: {
width: 2,
},
symbol: "circle",
symbolSize: 8,
emphasis: {
focus: "series",
},
},
],
},
};
},
watch: {
/** 全屏状态切换时，对柱子粗细和字体大小进行相应调整 */
// isFullscreen(val) {
// this.actualOptions.series.map((item) => {
// item.barWidth = val ? 18 : 12;
// });
// this.actualOptions.xAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.axisLabel.fontSize = val ? 18 : 12;
// this.actualOptions.yAxis.nameTextStyle.fontSize = val ? 18 : 12;
// this.initOptions(this.actualOptions);
// },
series(val) {
if (!val) {
this.initOptions(this.options);
return;
}
const actualOptions = JSON.parse(JSON.stringify(this.options));
actualOptions.series[0].data = val[0].data;
actualOptions.series[0].name = val[0].name;
actualOptions.series[1].data = val[1].data;
actualOptions.series[1].name = val[1].name;
actualOptions.series[2].data = val[2].data;
actualOptions.series[2].name = val[2].name;
this.actualOptions = actualOptions;
this.initOptions(actualOptions);
},
},
mounted() {
console.log("00000000000000000000");
const actualOptions = JSON.parse(JSON.stringify(this.options));
actualOptions.series[0].data = this.series[0].data;
actualOptions.series[0].name = this.series[0].name;
actualOptions.series[1].data = this.series[1].data;
actualOptions.series[1].name = this.series[1].name;
actualOptions.series[2].data = this.series[2].data;
actualOptions.series[2].name = this.series[2].name;
this.actualOptions = actualOptions;
console.log(actualOptions);
console.log("1111111111");
this.initOptions(actualOptions);
// this.actualOptions = this.options;
// this.initOptions(this.options);
// if (screenfull.isEnabled) {
// screenfull.on("change", () => {
// this.isFullscreen = screenfull.isFullscreen;
// });
// }
},
};
</script>
<style scoped lang="scss">
.left-chart-base {
// position: relative;
.legend {
position: absolute;
top: 5.2vh;
right: 4vw;
}
.legend-item {
position: relative;
// font-size: 12px;
margin-right: 1.34vw;
&::before {
content: "";
display: inline-block;
// width: 10px;
// height: 10px;
width: 0.531vw;
height: 0.531vw;
background-color: #ccc;
border-radius: 2px;
margin-right: 0.22vw;
}
}
.legend-item:nth-child(1):before {
// width: 12px;
// height: 2px;
width: 0.638vw;
height: 0.1064vw;
background-color: #ffd160;
position: absolute;
top: 50%;
// left: -16px;
left: -0.851vw;
transform: translateY(-50%);
}
.legend-item:nth-child(1):after {
background-color: #ffd160;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(2):before {
// width: 12px;
// height: 2px;
width: 0.638vw;
height: 0.1064vw;
background-color: #2760ff;
position: absolute;
top: 50%;
// left: -16px;
left: -0.851vw;
transform: translateY(-50%);
}
.legend-item:nth-child(2):after {
background-color: #2760ff;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
.legend-item:nth-child(3):before {
// width: 12px;
// height: 2px;
width: 0.638vw;
height: 0.1064vw;
background-color: #12fff5;
position: absolute;
top: 50%;
// left: -16px;
left: -0.851vw;
transform: translateY(-50%);
}
.legend-item:nth-child(3):after {
background-color: #12fff5;
content: "";
display: inline-block;
position: absolute;
// width: 6px;
// height: 6px;
width: 0.3191vw;
height: 0.3191vw;
border-radius: 100%;
top: 50%;
left: -0.851vw;
// left: -16px;
transform: translateY(-50%) translateX(50%);
}
}
</style>