projects/mescc/develop #24
@ -1,31 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="left-chart-base">
|
||||||
<div class="left-chart-base">
|
<div class="legend">
|
||||||
<NotMsg v-show="notMsg" />
|
<span
|
||||||
<div class="legend" v-show="!notMsg">
|
v-for="item in legend"
|
||||||
<span
|
:key="item.label"
|
||||||
v-for="item in legend"
|
class="legend-item"
|
||||||
:key="item.label"
|
:style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }"
|
||||||
class="legend-item"
|
>{{ item.label }}</span
|
||||||
:style="{ fontSize: isFullscreen ? '0.85vw' : '0.73vw' }"
|
>
|
||||||
>{{ item.label }}</span
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
id="factoryEnergyChart"
|
|
||||||
style="width: 100%; height: 100%"
|
|
||||||
v-show="!notMsg"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div id="factoryEnergyChart" style="width: 100%; height: 100%"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { debounce } from "@/utils/debounce";
|
import { debounce } from "@/utils/debounce";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import NotMsg from "./../../components/NotMsg";
|
|
||||||
export default {
|
export default {
|
||||||
name: "Energy",
|
name: "Energy",
|
||||||
components: { NotMsg },
|
|
||||||
props: {
|
props: {
|
||||||
legend: {
|
legend: {
|
||||||
type: Array,
|
type: Array,
|
||||||
@ -40,16 +31,14 @@ export default {
|
|||||||
return {
|
return {
|
||||||
isFullscreen: false,
|
isFullscreen: false,
|
||||||
actualOptions: null,
|
actualOptions: null,
|
||||||
notMsg: false,
|
|
||||||
chart: "",
|
chart: "",
|
||||||
options: {
|
options: {
|
||||||
color: ["#FFD160", "#2760FF", "#12FFF5"],
|
color: ["#FFD160", "#2760FF", "#12FFF5"],
|
||||||
grid: {
|
grid: {
|
||||||
left: "3%",
|
left: "7%",
|
||||||
right: "4%",
|
right: "7%",
|
||||||
bottom: "0",
|
bottom: "8%",
|
||||||
top: "15%",
|
top: "15%",
|
||||||
containLabel: true,
|
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: "axis",
|
trigger: "axis",
|
||||||
@ -274,7 +263,6 @@ export default {
|
|||||||
},
|
},
|
||||||
];
|
];
|
||||||
if (this.energyCockpits.length > 0) {
|
if (this.energyCockpits.length > 0) {
|
||||||
this.notMsg = false;
|
|
||||||
let dataArr = this.energyCockpits.map((item) => {
|
let dataArr = this.energyCockpits.map((item) => {
|
||||||
return item.groupName;
|
return item.groupName;
|
||||||
});
|
});
|
||||||
@ -296,8 +284,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
|
||||||
this.notMsg = true;
|
|
||||||
}
|
}
|
||||||
if (this.chart) {
|
if (this.chart) {
|
||||||
this.chart.dispose();
|
this.chart.dispose();
|
||||||
|
@ -1,20 +1,11 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div id="factoryStoreChart" style="width: 100%; height: 100%"></div>
|
||||||
<NotMsg v-show="notMsg" />
|
|
||||||
<div
|
|
||||||
id="factoryStoreChart"
|
|
||||||
style="width: 100%; height: 100%"
|
|
||||||
v-show="!notMsg"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import { debounce } from "@/utils/debounce";
|
import { debounce } from "@/utils/debounce";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import NotMsg from "./../../components/NotMsg";
|
|
||||||
export default {
|
export default {
|
||||||
name: "Store",
|
name: "Store",
|
||||||
components: { NotMsg },
|
|
||||||
props: {
|
props: {
|
||||||
stock: {
|
stock: {
|
||||||
type: Object,
|
type: Object,
|
||||||
@ -30,15 +21,13 @@ export default {
|
|||||||
return {
|
return {
|
||||||
isFullscreen: false,
|
isFullscreen: false,
|
||||||
actualOptions: null,
|
actualOptions: null,
|
||||||
notMsg: false,
|
|
||||||
chart: "",
|
chart: "",
|
||||||
options: {
|
options: {
|
||||||
grid: {
|
grid: {
|
||||||
left: "3%",
|
left: "8%",
|
||||||
right: "1%",
|
right: "1%",
|
||||||
bottom: "0",
|
bottom: "8%",
|
||||||
top: "15%",
|
top: "15%",
|
||||||
containLabel: true,
|
|
||||||
},
|
},
|
||||||
tooltip: {},
|
tooltip: {},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
@ -157,12 +146,9 @@ export default {
|
|||||||
let xAxis = Object.keys(this.stock) || [];
|
let xAxis = Object.keys(this.stock) || [];
|
||||||
let data = [];
|
let data = [];
|
||||||
if (xAxis.length > 0) {
|
if (xAxis.length > 0) {
|
||||||
this.notMsg = false;
|
|
||||||
data = xAxis.map((item) => {
|
data = xAxis.map((item) => {
|
||||||
return this.stock[item].total;
|
return this.stock[item].total;
|
||||||
});
|
});
|
||||||
} else {
|
|
||||||
this.notMsg = true;
|
|
||||||
}
|
}
|
||||||
if (this.chart) {
|
if (this.chart) {
|
||||||
this.chart.dispose();
|
this.chart.dispose();
|
||||||
|
Loading…
Reference in New Issue
Block a user