高水平大学建设大学网站深圳外贸推广公司
可视化平台中，数据分别通过仪表盘、环状图、柱形图、曲线图、 滚动表格等多种形式展示数据变化。 可视化平台大致分为左、中、右三部分，左侧由能耗总览、耗能 占比、库存预警构成，中间由数据总览、销售计划完成率构成，右侧 由销售统计、销售排名（TOP8）、生产统计构成。平台右上角动态 显示当前系统日期、星期、时间，格式。 在管理端进行添加数据后，数据可视化图表进行相应变化。 1.能耗总览仪表盘，统计分析耗电量、耗水量、碳排放量的总数， 以不同颜色的仪表盘形式展示耗电量、耗水量、碳排放量的总数，在 环状图中间区域显示各数据的数据值。 2.能耗占比环状图，请分析各能耗的消耗数占能耗总数的比例， 扇形图中包括两部分内容：能耗占比图中需显示办公耗电量、办公用 水量、生产用水量、生产耗电量的数量及占能耗总数的比例。环状图 应用不同颜色区分显示各个能耗的占比，中间区域需显示能耗总数。
下面展示左边代码，部分代码，一键三连私聊博主获得完整文件+后端。此大屏数据与后端联动。！！！！！！！！！
<template>
<div>
<div class="top">
<!-- 能耗总览 仪表盘-->
<dv-border-box-8
style="width: 100%; height: 18.5em; margin-top: 19px; background: none"
>
<dv-decoration-7 style="width: 120px; height: 30px; margin-left: 40%"
>能耗总览</dv-decoration-7
>
<div id="topinit" style="width: 33.3%; height: 250px"></div>
<div id="topinit2" style="width: 33.3%; height: 250px"></div>
<div id="topinit3" style="width: 33.3%; height: 250px"></div>
</dv-border-box-8>
</div>
<div class="center">
<!-- 能耗占比 环状图-->
<dv-border-box-8 style="width: 100%; height: 18.5em; margin-top: 19px">
<dv-decoration-7 style="width: 120px; height: 30px; margin-left: 40%"
>能耗占比</dv-decoration-7
>
<div id="centerinit" style="width: 100%; height: 260px"></div>
</dv-border-box-8>
</div>
<div class="footer">
<!-- 库存预警 排序表-->
<dv-border-box-8 style="width: 100%; height: 18.5em; margin-top: 19px">
<dv-decoration-7 style="width: 120px; height: 30px; margin-left: 40%"
>库存预警</dv-decoration-7
>
<dv-scroll-board
:config="config"
style="width: 99%; height: 260px; margin-left: 4px"
/>
</dv-border-box-8>
</div>
</div>
</template>
<script>
// 均是日数据化
// 能耗总览
import { productPowerReportByDay } from "@/api/dv/carbon.js";
// 能耗占比
import { getEmissionPercent } from "@/api/dv/carbon.js";
// 库存预警
import { listInventory } from "@/api/dv/carbon.js";
export default {
name: "LeftContain",
components: {},
data() {
return {
paramsFrom: {
pageNum: 1,
pageSize: 20,
},
// 库存预警
config: {},
// 能耗总览
// 耗电量
totalPowerConsume: 0,
// 耗水量
totalWaterConsume: 0,
// 碳排放量
totalCarbonEmission: 0,
// 耗能占比
totals: 0,
// 办公用水量 + 办公耗电量
totalOfficeWaterConsumes: 0,
totalOfficePowerConsumes: 0,
// 生产用水量 + 生产耗电量
totalWaterConsumes: 0,
totalPowerConsumes: 0,
};
},
created() {
this.getDataTop();
},
methods: {
// 获取数据
getDataTop() {
productPowerReportByDay().then((res) => {
this.$nextTick(() => {
this.inittop();
this.inittop2();
this.inittop3();
});
this.totalCarbonEmission = res.rows[0].totalCarbonEmission;
this.totalPowerConsume =
res.rows[0].totalOfficePowerConsume + res.rows[0].totalPowerConsume;
this.totalWaterConsume =
res.rows[0].totalWaterConsume + res.rows[0].totalOfficeWaterConsume;
});
getEmissionPercent().then((res) => {
this.$nextTick(() => {
this.initcenter();
});
this.totalOfficePowerConsumes = res.data[0].totalOfficePowerConsume;
this.totalOfficeWaterConsumes = res.data[0].totalOfficeWaterConsume;
this.totalPowerConsumes = res.data[0].totalPowerConsume;
this.totalWaterConsumes = res.data[0].totalWaterConsume;
this.totals =
res.data[0].totalOfficePowerConsume +
res.data[0].totalOfficeWaterConsume +
res.data[0].totalPowerConsume +
res.data[0].totalOfficePowerConsume;
});
listInventory(this.paramsFrom).then((res) => {
this.config = {
header: ["编号", "物料", "仓库", "库存", "状态"],
data: [],
index: false,
headerBGC: "#43f5ff",
oddRowBGC: "rgba(190,20,128,0.5)",
evenRowBGC: "#43ad7f7f",
columnWidth: [50],
align: ["center"],
};
this.config.data = res.rows.map((item) => {
return [
item.id,
item.materialName,
item.warehouseName,
item.totalInventory,
this.getStatus(item),
];
});
});
},
getStatus(item) {
if (
item.inventoryLimit > item.totalInventory &&
item.totalInventory > item.inventoryLower
) {
return "正常";
} else if (item.totalInventory < item.inventoryLower) {
return "不足";
} else {
return "溢出";
}
},
// 能耗总览-定义仪表盘
inittop() {
let totalPowerConsume = this.totalPowerConsume;
let totalCarbonEmission = this.totalCarbonEmission;
let totalWaterConsume = this.totalWaterConsume;
var chartDom = document.getElementById("topinit");
var myChart = this.$echarts.init(chartDom);
var option;
option = {
tooltip: {
formatter: "{a} <br/>{b} : {c}%",
},
series: [
{
// 最大数
max: totalPowerConsume + 1000,
name: "Pressure",
type: "gauge",
// 进度
progress: {
show: true,
},
// 数据数字
detail: {
color: "orange",
fontSize: 22,
valueAnimation: true,
formatter: "{value}",
},
// 标题
title: {
show: true,
offsetCenter: [0, "80%"],
color: "white",
},
// 刻度数字
axisLabel: {
show: false,
},
// 指针大小
pointer: {
width: 4,
},
// 数据
data: [
{
value: totalPowerConsume,
name: "耗电量",
},
],
// 指针颜色
itemStyle: {
color: "orange",
},
},
],
};
option && myChart.setOption(option);
},
inittop2() {
let totalPowerConsume = this.totalPowerConsume;
let totalCarbonEmission = this.totalCarbonEmission;
let totalWaterConsume = this.totalWaterConsume;
var chartDom = document.getElementById("topinit2");
var myChart = this.$echarts.init(chartDom);
var option;
option = {
tooltip: {
formatter: "{a} <br/>{b} : {c}%",
},
series: [
{
max: totalWaterConsume + 5000,
name: "Pressure",
type: "gauge",
title: {
show: true,
offsetCenter: [0, "80%"],
color: "white",
},
axisLabel: {
show: false,
},
progress: {
show: true,
},
pointer: {
width: 4,
},
detail: {
color: "green",
fontSize: 22,
valueAnimation: true,
formatter: "{value}",
},
data: [
{
value: totalWaterConsume,
name: "耗水量",
},
],
itemStyle: {
color: "green",
},
},
],
};
option && myChart.setOption(option);
},
inittop3() {
let totalPowerConsume = this.totalPowerConsume;
let totalCarbonEmission = this.totalCarbonEmission;
let totalWaterConsume = this.totalWaterConsume;
var chartDom = document.getElementById("topinit3");
var myChart = this.$echarts.init(chartDom);
var option;
option = {
tooltip: {
formatter: "{a} <br/>{b} : {c}%",
},
series: [
{
max: totalCarbonEmission + 10000,
name: "Pressure",
type: "gauge",
progress: {
show: true,
},
pointer: {
width: 4,
},
axisLabel: {
show: false,
},
axisLine: {
show: true,
lineStyle: {},
},
detail: {
color: "blue",
fontSize: 22,
valueAnimation: true,
formatter: "{value}",
},
title: {
show: true,
offsetCenter: [0, "80%"],
color: "white",
},
data: [
{
value: totalCarbonEmission,
name: "碳排放量",
},
],
itemStyle: {
color: "blue",
},
},
],
};
option && myChart.setOption(option);
},
// 能耗占比-环状图
initcenter() {
let totalOfficePowerConsumes = this.totalOfficePowerConsumes;
let totalOfficeWaterConsumes = this.totalOfficeWaterConsumes;
let totalPowerConsumes = this.totalPowerConsumes;
let totalWaterConsumes = this.totalWaterConsumes;
let totalS = this.totals;
var chartDom = document.getElementById("centerinit");
var myChart = this.$echarts.init(chartDom);
var option;
option = {
tooltip: {
trigger: "item",
},
// 是否显示隐藏图例的一些操作
legend: {
show: false,
top: "5%",
left: "center",
},
series: [
// 外圈 暂时不加引导线
{
name: "能耗占比",
type: "pie",
radius: ["40%", "70%"],
avoidLabelOverlap: false,
label: {
show: true,
position: "outside",
// formatter: "{b} : {c*100}%",
formatter(params) {
return params.name + (params.value / totalS) * 100 + "%";
},
},
labelLine: {
show: true,
length: 6,
length2: 7,
lineStyle: {
color: "red",
width: 21,
},
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: "bold",
},
},
labelLine: {
show: false,
},
data: [
{ value: totalOfficePowerConsumes, name: "办公耗电量" },
{ value: totalOfficeWaterConsumes, name: "办公用水量" },
{ value: totalPowerConsumes, name: "生产耗电量" },
{ value: totalWaterConsumes, name: "生产耗水量" },
],
},
// 内圈，把半径设为0
{
name: "能耗总数",
type: "pie",
radius: ["0%", "0%"],
avoidLabelOverlap: false,
// 显示数据
label: {
show: true,
color: "#fff",
position: "inside",
formatter: "{c}\n{b}",
},
// 鼠标放上去变大
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: "bold",
color: "#fff",
},
},
labelLine: {
show: false,
},
data: [
{
value: totalS,
name: "总数",
},
],
},
],
};
option && myChart.setOption(option);
},
},
};
</script>
<style lang="scss" scoped>
* {
background: none;
}
.top {
background: none;
}
#topinit,
#topinit3,
#topinit2 {
display: flex;
float: left;
}
</style>
