代码提交
This commit is contained in:
parent
4025d90774
commit
0301249248
|
|
@ -5,7 +5,7 @@ VITE_APP_TITLE = 若依管理系统
|
|||
VITE_APP_ENV = 'production'
|
||||
|
||||
#生产环境
|
||||
VITE_APP_BASE_API = '/prod-api'
|
||||
VITE_APP_BASE_API = ''
|
||||
|
||||
# 是否在打包时开启压缩，支持 gzip 和 brotli
|
||||
VITE_BUILD_COMPRESS = gzip
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"loginIp": "http://localhost:8011/api/GetDrainHeading"
|
||||
}
|
||||
|
|
@ -6,7 +6,8 @@
|
|||
<title>Unity WebGL Player | CD</title>
|
||||
<link rel="shortcut icon" href="TemplateData/favicon.ico">
|
||||
<link rel="stylesheet" href="TemplateData/style.css">
|
||||
</head><style>body,html{
|
||||
</head>
|
||||
<style>body,html{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
|
@ -60,11 +61,11 @@
|
|||
}
|
||||
|
||||
var buildUrl = "Build";
|
||||
var loaderUrl = buildUrl + "/build.loader.js";
|
||||
var loaderUrl = buildUrl + "/BUILD.loader.js";
|
||||
var config = {
|
||||
dataUrl: buildUrl + "/build.data.unityweb",
|
||||
frameworkUrl: buildUrl + "/build.framework.js.unityweb",
|
||||
codeUrl: buildUrl + "/build.wasm.unityweb",
|
||||
dataUrl: buildUrl + "/BUILD.data.unityweb",
|
||||
frameworkUrl: buildUrl + "/BUILD.framework.js.unityweb",
|
||||
codeUrl: buildUrl + "/BUILD.wasm.unityweb",
|
||||
streamingAssetsUrl: "StreamingAssets",
|
||||
companyName: "DefaultCompany",
|
||||
productName: "CD",
|
||||
|
|
@ -97,13 +98,14 @@
|
|||
} else {
|
||||
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
|
||||
|
||||
// canvas.style.width = "1920px";
|
||||
// canvas.style.height = "1080px";
|
||||
canvas.style.width = "1920px";
|
||||
canvas.style.height = "1080px";
|
||||
}
|
||||
|
||||
loadingBar.style.display = "block";
|
||||
var unityInstanceA
|
||||
|
||||
var script = document.createElement("script");
|
||||
var unityInstanceA
|
||||
script.src = loaderUrl;
|
||||
script.onload = () => {
|
||||
createUnityInstance(canvas, config, (progress) => {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 422 B |
|
|
@ -210,7 +210,7 @@ onMounted(() => {
|
|||
// }
|
||||
background: url(../../assets/images/overview/thisMonthAc.png) no-repeat;
|
||||
background-size: 100% 100%;
|
||||
border: 0.5px dashed rgba(255, 255, 255, 0.3) !important;
|
||||
// border: 0.5px dashed rgba(255, 255, 255, 0.3) !important;
|
||||
.el-calendar-day {
|
||||
.day {
|
||||
color: rgba(255, 251, 222, 1);
|
||||
|
|
|
|||
|
|
@ -69,6 +69,12 @@ const tabName = shallowRef(overview)
|
|||
const closeUnity = () =>{
|
||||
dome.value.contentWindow.closeLight()
|
||||
}
|
||||
|
||||
const heart = ref('4')
|
||||
function getHeart(val){
|
||||
console.log(val,'室外温度');
|
||||
heart.value = val
|
||||
}
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
|
@ -110,8 +116,8 @@ onMounted(() => {
|
|||
<span>{{ nowMin }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="m10 weaIcon">晴</span>
|
||||
<span>4~13℃</span>
|
||||
<!-- <span class="m10 weaIcon">晴</span> -->
|
||||
<span>{{heart}}℃</span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
|
@ -119,15 +125,15 @@ onMounted(() => {
|
|||
<ul>
|
||||
<li v-for="(item,index) in menuList" :class="'menu-icon'+index"
|
||||
:style="menuIndex===index?'background-image:url('+ item.select + ')':'background-image:url('+ item.default + ')'"
|
||||
@click="toggleClick(item,index)"></li>
|
||||
@click="toggleClick(item,index)" :key="'icon'+index"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- <overview></overview>-->
|
||||
<!-- <router-view />-->
|
||||
<!-- <transition appear mode="out-in">-->
|
||||
<keep-alive>
|
||||
<component :key="tabName" :is="tabName" @sendVal="getState" @closeBox="closeUnity" @closeAir="dome.contentWindow.closeStrategy()"></component>
|
||||
</keep-alive>
|
||||
<!-- <keep-alive> -->
|
||||
<component :key="tabName" :is="tabName" @getHeart="getHeart" @sendVal="getState" @closeBox="closeUnity" @closeAir="dome.contentWindow.closeStrategy()"></component>
|
||||
<!-- </keep-alive> -->
|
||||
<!-- </transition>-->
|
||||
</div>
|
||||
|
||||
|
|
@ -235,20 +241,21 @@ onMounted(() => {
|
|||
position: fixed;
|
||||
bottom: vh(24);
|
||||
z-index: 999;
|
||||
left: 29.15%;
|
||||
width: vw(800);
|
||||
left: 25.7%;
|
||||
width: vw(940);
|
||||
height: vh(100);
|
||||
|
||||
justify-content: space-between;
|
||||
ul {
|
||||
//width: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
cursor: pointer;
|
||||
width: 12.5%;
|
||||
width: 10.6%;
|
||||
height: 100%;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -51,12 +51,12 @@ p,ul,li{
|
|||
}
|
||||
|
||||
&-right-box {
|
||||
padding-right: 2.375rem;
|
||||
padding-right: 2.5rem;
|
||||
animation: slide-out 2s ease-in-out;
|
||||
}
|
||||
|
||||
&-left-box {
|
||||
padding-left: 2.375rem;
|
||||
padding-left: 2.5rem;
|
||||
animation: slide-out 2s ease-in-out;
|
||||
//transform: translateX(-100%);
|
||||
}
|
||||
|
|
@ -174,6 +174,10 @@ p,ul,li{
|
|||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
span:nth-child(1){
|
||||
flex-basis: 65%;
|
||||
text-align: center;
|
||||
}
|
||||
span{
|
||||
flex-basis: 33%;
|
||||
text-align: center;
|
||||
|
|
@ -196,6 +200,10 @@ p,ul,li{
|
|||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin-top: .3rem;
|
||||
span:nth-child(1){
|
||||
flex-basis: 65%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
|
|
|
|||
|
|
@ -198,7 +198,7 @@ const generalSituationInterface = () =>{
|
|||
getGeneralSituation().then(res=>{
|
||||
systemNumList.value[0].num = res.data[0].Operation
|
||||
systemNumList.value[1].num = res.data[0].Stop
|
||||
overviewList.value[0].num = res.data[0].Area / 10000
|
||||
overviewList.value[0].num = res.data[0].Area
|
||||
overviewList.value[1].num = res.data[0].Amount
|
||||
})
|
||||
}
|
||||
|
|
@ -288,7 +288,7 @@ onMounted(()=>{
|
|||
</div>
|
||||
</div>
|
||||
<div v-for="(item,index) in overviewList" :class="'overview-item' + index">
|
||||
<span class="unit">{{ item.name }}</span>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<p>
|
||||
<span class="value">{{ item.num }}</span>
|
||||
<span class="unit">{{ item.unit }}</span>
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
v-for="(item, index) in overviewList"
|
||||
:class="'overview-item' + index"
|
||||
>
|
||||
<span class="unit" style="margin-left: 1rem">{{ item.name }}</span>
|
||||
<span class="">{{ item.name }}</span>
|
||||
<p class="overviewValue">
|
||||
<span class="value">{{ item.num }}</span>
|
||||
<span class="unit">{{ item.unit }}</span>
|
||||
|
|
@ -151,7 +151,11 @@ function getCarbonTrends(params) {
|
|||
xData.push(item.time);
|
||||
yData.push(item.EH);
|
||||
});
|
||||
let myChart = echarts.init(document.getElementById("carbonTrends"));
|
||||
// let myChart = echarts.init(document.getElementById("carbonTrends"));
|
||||
let dom = document.getElementById("carbonTrends");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
tooltip: {
|
||||
|
|
@ -201,14 +205,14 @@ function getCarbonTrends(params) {
|
|||
// align: "right",
|
||||
padding: [0, 10, 0, 0],
|
||||
},
|
||||
min: 0,
|
||||
max: 2000,
|
||||
splitNumber: 5,
|
||||
// min: 0,
|
||||
// max: 2000,
|
||||
// splitNumber: 5,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
color: "rgba(255, 255, 255, 0.30)",
|
||||
},
|
||||
},
|
||||
axisLine: { show: false },
|
||||
|
|
@ -265,7 +269,7 @@ const getCarbonIntensityChat = (params) => {
|
|||
let yData = [];
|
||||
params.forEach((item) => {
|
||||
xData.push(item.time);
|
||||
yData.push(item.CarbonIntensity);
|
||||
yData.push(parseInt(item.CarbonIntensity));
|
||||
});
|
||||
const offsetX = 10; //bar宽
|
||||
const offsetY = 5; //倾斜角度
|
||||
|
|
@ -345,7 +349,11 @@ const getCarbonIntensityChat = (params) => {
|
|||
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
|
||||
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
|
||||
];
|
||||
let myChart = echarts.init(document.getElementById("carbonIntensity"));
|
||||
// let myChart = echarts.init(document.getElementById("carbonIntensity"));
|
||||
let dom = document.getElementById("carbonIntensity");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
|
@ -384,7 +392,7 @@ const getCarbonIntensityChat = (params) => {
|
|||
lineStyle: {
|
||||
width: 1,
|
||||
type: "solid",
|
||||
color: "rgba(255, 255, 255, 0.20)",
|
||||
color: "#557775",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
|
|
@ -409,13 +417,13 @@ const getCarbonIntensityChat = (params) => {
|
|||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "单位:万tCO₂/人·年",
|
||||
name: "单位:万tCO₂/m²",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
padding: [0, 0, 0, 35],
|
||||
padding: [0, 0, 0, 27],
|
||||
},
|
||||
max: 500,
|
||||
min: 0,
|
||||
// max: 500,
|
||||
// min: 0,
|
||||
// minInterval: 1,
|
||||
// y轴（竖直线）
|
||||
axisLine: {
|
||||
|
|
@ -426,7 +434,7 @@ const getCarbonIntensityChat = (params) => {
|
|||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
color: "rgba(255, 255, 255, 0.30)",
|
||||
},
|
||||
},
|
||||
// y轴刻度线
|
||||
|
|
@ -437,6 +445,19 @@ const getCarbonIntensityChat = (params) => {
|
|||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: "#DDFFFD",
|
||||
formatter: function (params) {
|
||||
console.log(params,'定额');
|
||||
if(params=== (Math.max(...seriesData) / 2)){
|
||||
return '{a|'+params+'}'
|
||||
}else{
|
||||
return params
|
||||
}
|
||||
},
|
||||
rich:{
|
||||
a:{
|
||||
color:'rgba(255, 221, 0, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
series: [
|
||||
|
|
@ -548,7 +569,7 @@ const getCarbonIntensityChat = (params) => {
|
|||
symbol: "none",
|
||||
data: [
|
||||
{
|
||||
yAxis: 400,
|
||||
yAxis: Math.max(...seriesData) / 2,
|
||||
lineStyle: {
|
||||
color: "rgba(255, 221, 0, 1)",
|
||||
type: "dashed",
|
||||
|
|
@ -572,15 +593,22 @@ const getCarbonIntensityChat = (params) => {
|
|||
};
|
||||
//各系统碳排放量统计
|
||||
const getCarbonEmissionStatistics = (params) => {
|
||||
let total = 0;
|
||||
let xData = [];
|
||||
let yData = [];
|
||||
params.forEach((item) => {
|
||||
total += item.CarbonEmission;
|
||||
xData.push(item.name);
|
||||
yData.push(item.CarbonEmission);
|
||||
});
|
||||
let myChart = echarts.init(
|
||||
document.getElementById("carbonEmissionStatistics")
|
||||
);
|
||||
console.log(total);
|
||||
// let myChart = echarts.init(
|
||||
// document.getElementById("carbonEmissionStatistics")
|
||||
// );
|
||||
let dom = document.getElementById("carbonEmissionStatistics");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
let option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
|
|
@ -601,14 +629,13 @@ const getCarbonEmissionStatistics = (params) => {
|
|||
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
|
||||
params[0].seriesName +
|
||||
"" +
|
||||
Number(
|
||||
(params[0].value.toFixed(4) / 10000).toFixed(2)
|
||||
).toLocaleString() +
|
||||
" kWh<br/>"
|
||||
Number(params[0].value.toFixed(2)).toLocaleString() +
|
||||
" 万tCO₂<br/>"
|
||||
);
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
max: total,
|
||||
show: false,
|
||||
type: "value",
|
||||
},
|
||||
|
|
@ -649,13 +676,12 @@ const getCarbonEmissionStatistics = (params) => {
|
|||
inside: true,
|
||||
textStyle: {},
|
||||
formatter: function (value) {
|
||||
return (
|
||||
"{a|" + (value / 10000).toLocaleString() + "}" + "{b|万tCO₂}"
|
||||
);
|
||||
return "{a|" + value.toLocaleString() + "}" + "{b|万tCO₂}";
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: "16",
|
||||
fontSize: "20",
|
||||
fontFamily:'D-DIN-Bold',
|
||||
color: "rgba(0, 255, 240, 1)",
|
||||
padding: [0, 6, 0, 0],
|
||||
},
|
||||
|
|
@ -693,9 +719,11 @@ const getCarbonEmissionStatistics = (params) => {
|
|||
type: "bar",
|
||||
barWidth: 10,
|
||||
barGap: "-115%",
|
||||
data: [50000000, 50000000, 50000000, 50000000, 50000000],
|
||||
data: [total, total, total, total, total],
|
||||
itemStyle: {
|
||||
color: "rgba(5, 33, 31, 0.32)",
|
||||
borderColor:'rgba(4, 24, 44, 1)',
|
||||
borderWidth:2,
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
@ -709,31 +737,46 @@ const getCarbonEmissionStatistics = (params) => {
|
|||
const optionData = ref([
|
||||
// {
|
||||
// name: "CCER",
|
||||
// value: 176,
|
||||
// value: '35',
|
||||
// },
|
||||
// {
|
||||
// name: "绿电",
|
||||
// value: 288,
|
||||
// value: '35',
|
||||
// },
|
||||
// {
|
||||
// name: "绿证",
|
||||
// value: 88,
|
||||
// value: '30',
|
||||
// },
|
||||
]);
|
||||
const color = [
|
||||
// "rgba(1, 225, 242, 1)",
|
||||
"rgba(27, 255, 118, 1)", //绿色
|
||||
'rgba(1, 225, 242, 1)',
|
||||
// "rgba(0, 140, 255, 1)",
|
||||
|
||||
|
||||
// "rgba(1, 225, 242, 1)", //浅蓝
|
||||
|
||||
|
||||
|
||||
"rgba(0, 140, 255, 1)",
|
||||
"rgba(1, 225, 242, 1)",
|
||||
"rgba(27, 255, 118, 1)",
|
||||
// "rgba(1, 225, 242, 1)",
|
||||
];
|
||||
const color1 = [
|
||||
"rgba(0, 140, 255, 1)",
|
||||
'rgba(1, 225, 242, 1)',
|
||||
"rgba(27, 255, 118, 1)"
|
||||
]
|
||||
const setLabel = () => {
|
||||
optionData.value.forEach((item, index) => {
|
||||
item.itemStyle = {
|
||||
color: color[index],
|
||||
};
|
||||
console.log(color[index]);
|
||||
item.label = {
|
||||
normal: {
|
||||
show: true,
|
||||
color: color[index],
|
||||
// color: color[index],
|
||||
// position: "right",
|
||||
padding: [0, -50],
|
||||
// distance:-10,
|
||||
|
|
@ -757,10 +800,10 @@ const setLabel = () => {
|
|||
textShadowOffsetX: 0,
|
||||
textShadowOffsetY: 2,
|
||||
textShadowBlur: 5,
|
||||
color: color[index],
|
||||
// color: color[index],
|
||||
},
|
||||
d: {
|
||||
color: color[index],
|
||||
color: color1[index],
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
align: "left",
|
||||
|
|
@ -773,7 +816,7 @@ const setLabel = () => {
|
|||
length2: 100,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: color[index],
|
||||
color: color1[index],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -782,7 +825,12 @@ const setLabel = () => {
|
|||
//碳中和
|
||||
const getCarbonNeutrality = () => {
|
||||
setLabel();
|
||||
let myChart = echarts.init(document.getElementById("carbonNeutrality"));
|
||||
let dom = document.getElementById("carbonNeutrality");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
// let myChart = echarts.init(document.getElementById("carbonNeutrality"));
|
||||
// console.log(optionData.value,'xxxxxxxxx');
|
||||
let option = getPie3D(optionData.value, 0, 270, 26, 30, 1);
|
||||
// myChart.setOption(option);
|
||||
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
|
||||
|
|
@ -795,7 +843,7 @@ const getCarbonNeutrality = () => {
|
|||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
startAngle: -40, // 起始角度，支持范围[0, 360]。
|
||||
startAngle:-40, // 起始角度，支持范围[0, 360]。
|
||||
clockwise: true, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
|
||||
radius: ["20%", "60%"],
|
||||
center: ["50%", "50%"],
|
||||
|
|
@ -812,10 +860,14 @@ const getCarbonNeutrality = () => {
|
|||
};
|
||||
// 碳流图
|
||||
const drawEnergyFlow = (params) => {
|
||||
let myChart = echarts.init(document.getElementById("energyFlow"));
|
||||
let dom = document.getElementById("energyFlow");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
// let myChart = echarts.init(document.getElementById("energyFlow"));
|
||||
let sourceData = [
|
||||
{
|
||||
name: "电",
|
||||
name: "碳",
|
||||
nameValue: params[0].Amount,
|
||||
valueUnit: "万tCO₂",
|
||||
},
|
||||
|
|
@ -849,7 +901,7 @@ const drawEnergyFlow = (params) => {
|
|||
];
|
||||
let itemStyleSource = [];
|
||||
for (let d = 0; d < sourceData.length; d++) {
|
||||
if (sourceData[d].name === "电") {
|
||||
if (sourceData[d].name === "碳") {
|
||||
sourceData[d].label = {
|
||||
position: "right",
|
||||
};
|
||||
|
|
@ -879,22 +931,22 @@ const drawEnergyFlow = (params) => {
|
|||
data: itemStyleSource,
|
||||
links: [
|
||||
{
|
||||
source: "电",
|
||||
source: "碳",
|
||||
target: "空调",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
source: "电",
|
||||
source: "碳",
|
||||
target: "照明",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
source: "电",
|
||||
source: "碳",
|
||||
target: "电梯",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
source: "电",
|
||||
source: "碳",
|
||||
target: "其他",
|
||||
value: 8,
|
||||
},
|
||||
|
|
@ -913,7 +965,9 @@ const drawEnergyFlow = (params) => {
|
|||
params.data.nameValue +
|
||||
"}" +
|
||||
" " +
|
||||
params.data.valueUnit
|
||||
"{c|" +
|
||||
params.data.valueUnit +
|
||||
"}"
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
|
|
@ -924,28 +978,36 @@ const drawEnergyFlow = (params) => {
|
|||
params.data.nameValue +
|
||||
"}" +
|
||||
// " " +
|
||||
params.data.valueUnit
|
||||
"{c|" +
|
||||
params.data.valueUnit +
|
||||
"}"
|
||||
);
|
||||
}
|
||||
},
|
||||
rich: {
|
||||
c:{
|
||||
fontSize:'12',
|
||||
},
|
||||
a: {
|
||||
padding: [0, 15, 10, 0],
|
||||
fontSize: "14",
|
||||
},
|
||||
b: {
|
||||
fontFamily: 'D-DIN-Bold',
|
||||
color: "rgba(91, 250, 241, 1)",
|
||||
fontWeight: "600",
|
||||
fontSize: "16",
|
||||
fontSize: "20",
|
||||
},
|
||||
name: {
|
||||
|
||||
fontSize: 14,
|
||||
// padding: [10, 0, 0, 0],
|
||||
},
|
||||
value: {
|
||||
fontFamily: 'D-DIN-Bold',
|
||||
color: "rgba(91, 250, 241, 1)",
|
||||
fontWeight: "600",
|
||||
fontSize: "16",
|
||||
fontSize: "20",
|
||||
padding: [0, 10, 0, 10],
|
||||
},
|
||||
},
|
||||
|
|
@ -1006,7 +1068,7 @@ function carboEmissionTrends() {
|
|||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
//碳趋势图表
|
||||
getCarbonTrends(res.data);
|
||||
getCarbonTrends(res.data.slice(-10));
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -1048,8 +1110,12 @@ function neutralization(params) {
|
|||
getCarbonNeutral()
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
console.log(res.data, "碳中和数据");
|
||||
optionData.value = Object.keys(res.data).map((item, index) => {
|
||||
return { name: res.data[index].name, value: res.data[index].CarbonNeutral };
|
||||
return {
|
||||
name: res.data[index].name,
|
||||
value: Number(res.data[index].CarbonNeutral),
|
||||
};
|
||||
});
|
||||
getCarbonNeutrality();
|
||||
} else {
|
||||
|
|
@ -1099,15 +1165,21 @@ onMounted(() => {
|
|||
}
|
||||
}
|
||||
.overview-item0 {
|
||||
padding-left:4.625rem;
|
||||
padding-right: 1.3rem;
|
||||
width: 24.125rem;
|
||||
height: 27%;
|
||||
background: url("@/assets/images/carbonEmission/totalEmissions.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
justify-content:space-between;
|
||||
box-sizing: border-box;
|
||||
|
||||
}
|
||||
.overview-item1 {
|
||||
padding-left:4.625rem;
|
||||
padding-right:1.3rem;
|
||||
width: 24.125rem;
|
||||
height: 27%;
|
||||
background: url("@/assets/images/carbonEmission/carbonOffsettingAmount.png")
|
||||
|
|
@ -1115,9 +1187,12 @@ onMounted(() => {
|
|||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.overview-item2 {
|
||||
padding-left:4.625rem;
|
||||
padding-right: 1.3rem;
|
||||
width: 24.125rem;
|
||||
height: 27%;
|
||||
background: url("@/assets/images/carbonEmission/carbonEmissionReduction.png")
|
||||
|
|
@ -1125,19 +1200,22 @@ onMounted(() => {
|
|||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.overviewValue {
|
||||
left: 10%;
|
||||
// left: 10%;
|
||||
position: relative;
|
||||
// margin-left: 8rem;
|
||||
.unit {
|
||||
font-size: 0.8rem;
|
||||
color: rgba(221, 255, 253, 1);
|
||||
}
|
||||
.value {
|
||||
margin-right: 0.3rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
font-size: 1.875rem;
|
||||
// font-weight: 700;
|
||||
font-family: "D-DIN-Bold";
|
||||
color: rgba(91, 250, 241, 1);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -189,6 +189,7 @@ const operationRightList = ref([
|
|||
])
|
||||
const waterDrainingInterface = () =>{
|
||||
getWaterDraining().then(res=>{
|
||||
console.log(res,'排水数据');
|
||||
operationLeftList.value = res.data.slice(0,7).map(el=>{
|
||||
return {
|
||||
name:el.WaterName,
|
||||
|
|
@ -219,12 +220,12 @@ onMounted(()=>{
|
|||
|
||||
</div>
|
||||
<div class="page-big-box margin10">
|
||||
<div v-for="(item,index) in operationLeftList" class="system-item">
|
||||
<div v-for="(item,index) in operationLeftList" class="system-item" :key="'sys'+index">
|
||||
<span class="system-item-title">{{ item.name }}</span>
|
||||
<div class="system-item-right">
|
||||
<p v-for="(s,i) in item.children">
|
||||
<span>{{ s.name }}</span>
|
||||
<span :class="'state' + s.state"></span>
|
||||
<span>{{ s.DrainingName }}</span>
|
||||
<span :class="'state' + (s.DrainingState===0?'0':s.DrainingState===1?'1':'2')"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -236,12 +237,12 @@ onMounted(()=>{
|
|||
|
||||
</div>
|
||||
<div class="page-big-box margin10">
|
||||
<div v-for="(item,index) in operationRightList" class="system-item">
|
||||
<div v-for="(item,index) in operationRightList" class="system-item" :key="'sys'+index">
|
||||
<span class="system-item-title">{{ item.name }}</span>
|
||||
<div class="system-item-right">
|
||||
<p v-for="(s,i) in item.children">
|
||||
<span>{{ s.name }}</span>
|
||||
<span :class="'state' + s.state"></span>
|
||||
<span>{{ s.DrainingName }}</span>
|
||||
<span :class="'state' + (s.DrainingState===0?'0':s.DrainingState===1?'1':'2')"></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -286,7 +287,7 @@ onMounted(()=>{
|
|||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
box-sizing: border-box;
|
||||
height: 40%;
|
||||
height: 44%;
|
||||
width: 100%;
|
||||
//background-color: #fff;
|
||||
display: flex;
|
||||
|
|
@ -297,7 +298,7 @@ onMounted(()=>{
|
|||
}
|
||||
}
|
||||
|
||||
.state0, .state1 {
|
||||
.state0, .state1,.state2 {
|
||||
width: 1.7rem;
|
||||
height: 1.7rem;
|
||||
background-size: 100% 100%;
|
||||
|
|
@ -310,4 +311,7 @@ onMounted(()=>{
|
|||
.state1 {
|
||||
background-image: url("@/assets/images/drainage/state1.png");
|
||||
}
|
||||
.state2{
|
||||
background-image: url("@/assets/images/drainage/state2.png");
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref, onMounted, onUnmounted, nextTick } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import {
|
||||
getTotalEnergy,
|
||||
|
|
@ -10,6 +10,8 @@ import {
|
|||
getElectricityRate,
|
||||
} from "@/api/energyEfficiency";
|
||||
import moment from "moment";
|
||||
// import { formatter } from "element-plus";
|
||||
|
||||
// 各系统能耗概况
|
||||
const systemTab = [
|
||||
{ name: "空调" },
|
||||
|
|
@ -35,12 +37,12 @@ const systemRightList = ref([
|
|||
{
|
||||
name: "今日",
|
||||
value: "3122",
|
||||
unit: "kWh",
|
||||
unit: "kgce",
|
||||
},
|
||||
{
|
||||
name: "昨日",
|
||||
value: "9400",
|
||||
unit: "kWh",
|
||||
unit: "kgce",
|
||||
},
|
||||
{
|
||||
name: "同比",
|
||||
|
|
@ -52,12 +54,12 @@ const systemRightList = ref([
|
|||
{
|
||||
name: "本月",
|
||||
value: "3122",
|
||||
unit: "kWh",
|
||||
unit: "kgce",
|
||||
},
|
||||
{
|
||||
name: "上月",
|
||||
value: "9400",
|
||||
unit: "kWh",
|
||||
unit: "kgce",
|
||||
},
|
||||
{
|
||||
name: "同比",
|
||||
|
|
@ -69,12 +71,12 @@ const systemRightList = ref([
|
|||
{
|
||||
name: "今年",
|
||||
value: "3122",
|
||||
unit: "kWh",
|
||||
unit: "kgce",
|
||||
},
|
||||
{
|
||||
name: "去年",
|
||||
value: "9400",
|
||||
unit: "kWh",
|
||||
unit: "kgce",
|
||||
},
|
||||
{
|
||||
name: "同比",
|
||||
|
|
@ -105,15 +107,26 @@ const toggleExhibitionLoad = (event) => {
|
|||
const selectSystemTab = (item, index) => {
|
||||
systemTabIndex.value = index;
|
||||
systemTabName.value = item.name;
|
||||
systemEnergyInterface()
|
||||
systemEnergyInterface();
|
||||
};
|
||||
|
||||
// 能耗总量echarts
|
||||
const drawTotalChart = (data) => {
|
||||
let myChart = echarts.init(document.getElementById("totalEnergy"));
|
||||
let dom = document.getElementById("totalEnergy");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
tooltip: {},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: "#57617B",
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "18%",
|
||||
left: "4%",
|
||||
|
|
@ -166,21 +179,21 @@ const drawTotalChart = (data) => {
|
|||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "单位:kWh",
|
||||
name: "单位:kgce",
|
||||
// padding:[0,10,0,0],
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
align: "center",
|
||||
padding: [0, 15, 0, 0],
|
||||
},
|
||||
min: 0,
|
||||
max: 500,
|
||||
// min: 0,
|
||||
// max: 500,
|
||||
splitNumber: 5,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
color: "rgba(255, 255, 255, 0.30)",
|
||||
},
|
||||
},
|
||||
axisLine: { show: false },
|
||||
|
|
@ -188,18 +201,31 @@ const drawTotalChart = (data) => {
|
|||
textStyle: {
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
// 使用formatter格式化y轴的标签
|
||||
formatter: function (value) {
|
||||
// 如果数值大于1000，则以千位分隔
|
||||
if (value >= 1000) {
|
||||
return value / 10000 + "万";
|
||||
} else if (value >= 10000000) {
|
||||
return value / 100000000 + "亿";
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "异常流量",
|
||||
name: "能耗总量",
|
||||
type: "line",
|
||||
smooth: true, //是否平滑曲线显示
|
||||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||
symbolSize: 0,
|
||||
|
||||
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
|
||||
// symbolSize: 0,
|
||||
itemStyle: {
|
||||
color: "rgba(1, 246, 139, 1)",
|
||||
},
|
||||
lineStyle: {
|
||||
color: "rgba(1, 246, 139, 1)", // 线条颜色
|
||||
},
|
||||
|
|
@ -236,20 +262,44 @@ const drawTotalChart = (data) => {
|
|||
};
|
||||
// 定额管理charts
|
||||
const drawManagement = (data) => {
|
||||
let myChart = echarts.init(document.getElementById("management"));
|
||||
let dom = document.getElementById("management");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
// let myChart = echarts.init(document.getElementById("management"));
|
||||
let yData = data.map((el) => {
|
||||
return el.EnergyIndexing;
|
||||
});
|
||||
console.log(Math.max(...yData) / 2);
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
tooltip: {},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: "#57617B",
|
||||
},
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
icon: "rect",
|
||||
right: "10",
|
||||
top: "5",
|
||||
right: "12",
|
||||
top: "12",
|
||||
layout: "vertical",
|
||||
itemHeight: "10",
|
||||
itemHeight: "12",
|
||||
// itemWidth:"18",
|
||||
// itemGap: "80",
|
||||
formatter: ["{a|{name}}"].join("\n"),
|
||||
// itemWidth:'10',
|
||||
textStyle: {
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
rich: {
|
||||
a: {
|
||||
padding: [2, 0, 0, 0],
|
||||
// verticalAlign: 'bottom',
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
|
|
@ -277,6 +327,16 @@ const drawManagement = (data) => {
|
|||
color: "#DDFFFD",
|
||||
margin: 40,
|
||||
},
|
||||
formatter: function (value) {
|
||||
// 如果数值大于1000，则以千位分隔
|
||||
if (value >= 1000) {
|
||||
return value / 10000 + "万";
|
||||
} else if (value >= 10000000) {
|
||||
return value / 100000000 + "亿";
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
axisTick: { show: false },
|
||||
|
|
@ -291,20 +351,20 @@ const drawManagement = (data) => {
|
|||
{
|
||||
type: "value",
|
||||
name: "单位:kgce/m²",
|
||||
// padding:[0,10,0,0],
|
||||
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
align: "middle",
|
||||
padding: [0, -30, 0, 0],
|
||||
padding: [0, -15, 0, 0],
|
||||
},
|
||||
min: 0,
|
||||
max: 18,
|
||||
// min: 0,
|
||||
// max: 18,
|
||||
splitNumber: 6,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
color: "rgba(255, 255, 255, 0.30)",
|
||||
},
|
||||
},
|
||||
axisLine: { show: false },
|
||||
|
|
@ -312,6 +372,19 @@ const drawManagement = (data) => {
|
|||
textStyle: {
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
formatter: function (params) {
|
||||
console.log(params,'定额');
|
||||
if(params === (Math.max(...yData) / 2)){
|
||||
return '{a|'+params+'}'
|
||||
}else{
|
||||
return params
|
||||
}
|
||||
},
|
||||
rich:{
|
||||
a:{
|
||||
color:'rgba(255, 221, 0, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
axisTick: { show: false },
|
||||
},
|
||||
|
|
@ -324,10 +397,13 @@ const drawManagement = (data) => {
|
|||
//最大值和最小值
|
||||
data: [
|
||||
{
|
||||
yAxis: 9,
|
||||
yAxis: Math.max(...yData) / 2,
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
show: false,
|
||||
},
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
color: "rgba(255, 221, 0, 1)",
|
||||
|
|
@ -339,8 +415,8 @@ const drawManagement = (data) => {
|
|||
},
|
||||
type: "line",
|
||||
smooth: true, //是否平滑曲线显示
|
||||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||
symbolSize: 0,
|
||||
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
|
||||
// symbolSize: 0,
|
||||
itemStyle: {
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
},
|
||||
|
|
@ -367,9 +443,7 @@ const drawManagement = (data) => {
|
|||
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
||||
},
|
||||
// data: [5, 7, 9, 6, 2, 5, 4],
|
||||
data: data.map((el) => {
|
||||
return el.EnergyIndexing;
|
||||
}),
|
||||
data: yData,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -381,27 +455,31 @@ const drawManagement = (data) => {
|
|||
};
|
||||
// 能效流向
|
||||
const drawEnergyFlow = (params) => {
|
||||
let myChart = echarts.init(document.getElementById("energyFlow"));
|
||||
let dom = document.getElementById("energyFlow");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
// let myChart = echarts.init(document.getElementById("energyFlow"));
|
||||
let sourceData = [
|
||||
{
|
||||
name: "电",
|
||||
name: "能耗",
|
||||
nameValue: params[0].Amont,
|
||||
valueUnit: "kWh",
|
||||
valueUnit: "kgce",
|
||||
},
|
||||
{
|
||||
name: "空调",
|
||||
nameValue: params[0].data[0].AirConditioner,
|
||||
valueUnit: "kWh",
|
||||
valueUnit: "kgce",
|
||||
},
|
||||
{
|
||||
name: "照明",
|
||||
nameValue: params[0].data[0].Illumination,
|
||||
valueUnit: "kWh",
|
||||
valueUnit: "kgce",
|
||||
},
|
||||
{
|
||||
name: "电梯",
|
||||
nameValue: params[0].data[0].Elevator,
|
||||
valueUnit: "kWh",
|
||||
valueUnit: "kgce",
|
||||
},
|
||||
];
|
||||
let sangjiColor = [
|
||||
|
|
@ -412,7 +490,7 @@ const drawEnergyFlow = (params) => {
|
|||
];
|
||||
let itemStyleSource = [];
|
||||
for (let d = 0; d < sourceData.length; d++) {
|
||||
if (sourceData[d].name === "电") {
|
||||
if (sourceData[d].name === "能耗") {
|
||||
sourceData[d].label = {
|
||||
position: "right",
|
||||
};
|
||||
|
|
@ -442,17 +520,17 @@ const drawEnergyFlow = (params) => {
|
|||
data: itemStyleSource,
|
||||
links: [
|
||||
{
|
||||
source: "电",
|
||||
source: "能耗",
|
||||
target: "空调",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
source: "电",
|
||||
source: "能耗",
|
||||
target: "照明",
|
||||
value: 8,
|
||||
},
|
||||
{
|
||||
source: "电",
|
||||
source: "能耗",
|
||||
target: "电梯",
|
||||
value: 8,
|
||||
},
|
||||
|
|
@ -527,7 +605,11 @@ const drawEnergyFlow = (params) => {
|
|||
};
|
||||
//复费率
|
||||
function getExhibitionLoad(data) {
|
||||
let myChart = echarts.init(document.getElementById("exhibitionLoad"));
|
||||
let dom = document.getElementById("exhibitionLoad");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
// let myChart = echarts.init(document.getElementById("exhibitionLoad"));
|
||||
var option = {
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
|
|
@ -541,7 +623,7 @@ function getExhibitionLoad(data) {
|
|||
borderWidth: 0,
|
||||
top: 40,
|
||||
bottom: 40,
|
||||
left: 40,
|
||||
left: 50,
|
||||
right: 20,
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
|
|
@ -599,13 +681,14 @@ function getExhibitionLoad(data) {
|
|||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
// align:"right",
|
||||
padding: [0, 0, 0, 0],
|
||||
padding: [0, 30, 0, 0],
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
color: "rgba(255,255,255, 0.30)",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
|
|
@ -621,6 +704,16 @@ function getExhibitionLoad(data) {
|
|||
textStyle: {
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
formatter: function (value) {
|
||||
// 如果数值大于1000，则以千位分隔
|
||||
if (value >= 1000) {
|
||||
return value / 10000 + "万";
|
||||
} else if (value >= 10000000) {
|
||||
return value / 100000000 + "亿";
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
show: false,
|
||||
|
|
@ -823,7 +916,11 @@ function getExhibitionLoad(data) {
|
|||
|
||||
// 电费电价
|
||||
const drawElectricityPrice = (data) => {
|
||||
let myChart = echarts.init(document.getElementById("electricity-price"));
|
||||
let dom = document.getElementById("electricity-price");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
// let myChart = echarts.init(document.getElementById("electricity-price"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
|
@ -895,11 +992,11 @@ const drawElectricityPrice = (data) => {
|
|||
name: "单位:kWh",
|
||||
nameTextStyle: {
|
||||
color: "rgba(221, 255, 253, 1)",
|
||||
padding: [0, 0, 0, 10],
|
||||
padding: [0, 20, 0, 10],
|
||||
},
|
||||
// 表现为上下位置
|
||||
type: "value",
|
||||
max: "50",
|
||||
// max: "50",
|
||||
splitNumber: 5,
|
||||
axisLine: {
|
||||
show: false,
|
||||
|
|
@ -919,7 +1016,7 @@ const drawElectricityPrice = (data) => {
|
|||
},
|
||||
},
|
||||
{
|
||||
// splitNumber:
|
||||
splitNumber: 5,
|
||||
name: "单位:元/kWh",
|
||||
position: "right", // 放在右边
|
||||
nameTextStyle: {
|
||||
|
|
@ -998,13 +1095,13 @@ const drawElectricityPrice = (data) => {
|
|||
|
||||
// 时间选择器参数
|
||||
const dateValue = ref([
|
||||
moment().subtract(1, "days").format("YYYY-MM-DD"),
|
||||
moment().format("YYYY-MM-DD"),
|
||||
moment().add(1, "days").format("YYYY-MM-DD"),
|
||||
]);
|
||||
// 默认时间
|
||||
const defaultTime = ref([
|
||||
moment().subtract(1, "days").format("YYYY-MM-DD"),
|
||||
moment().format("YYYY-MM-DD"),
|
||||
moment().add(1, "days").format("YYYY-MM-DD"),
|
||||
]);
|
||||
|
||||
// 获取能耗总量数据
|
||||
|
|
@ -1013,7 +1110,7 @@ const totalEnergyInterface = () => {
|
|||
date: totalEnergyDate.value === "month" ? "月" : "日",
|
||||
};
|
||||
getTotalEnergy(params).then((res) => {
|
||||
drawTotalChart(res.data);
|
||||
drawTotalChart(res.data.slice(-10));
|
||||
});
|
||||
};
|
||||
// 获取能效对标数据
|
||||
|
|
@ -1022,7 +1119,7 @@ const energyIndexingInterface = () => {
|
|||
date: managementDate.value === "month" ? "月" : "年",
|
||||
};
|
||||
getEnergyIndexing(params).then((res) => {
|
||||
drawManagement(res.data);
|
||||
drawManagement(res.data.slice(-10));
|
||||
});
|
||||
};
|
||||
// 获取各系统能耗数据
|
||||
|
|
@ -1034,8 +1131,19 @@ const systemEnergyInterface = () => {
|
|||
systemLeftList.value[0].value = res.data[0].DayPeak;
|
||||
systemLeftList.value[1].value = res.data[0].MonthPeak;
|
||||
systemRightList.value.forEach((el, i) => {
|
||||
if (res.data[0].data[i].This > 10000) {
|
||||
el[0].value = (res.data[0].data[i].This / 10000).toFixed(3);
|
||||
el[0].unit = "万" + el[0].unit;
|
||||
} else {
|
||||
el[0].value = res.data[0].data[i].This;
|
||||
}
|
||||
if (res.data[0].data[i].Last > 10000) {
|
||||
el[1].value = (res.data[0].data[i].Last / 10000).toFixed(3);
|
||||
el[1].unit = "万" + el[1].unit;
|
||||
} else {
|
||||
el[1].value = res.data[0].data[i].Last;
|
||||
}
|
||||
|
||||
el[2].value = res.data[0].data[i].Year;
|
||||
});
|
||||
});
|
||||
|
|
@ -1053,13 +1161,13 @@ const multiRateInterface = () => {
|
|||
params.date = "日";
|
||||
}
|
||||
getMultiRate(params).then((res) => {
|
||||
getExhibitionLoad(res.data);
|
||||
getExhibitionLoad(res.data.slice(-10));
|
||||
});
|
||||
};
|
||||
// 获取电费电价数据
|
||||
const electricityRateInterface = () => {
|
||||
getElectricityRate().then((res) => {
|
||||
drawElectricityPrice(res.data);
|
||||
drawElectricityPrice(res.data.slice(-10));
|
||||
});
|
||||
};
|
||||
//事件选择
|
||||
|
|
@ -1102,6 +1210,7 @@ onMounted(() => {
|
|||
multiRateInterface();
|
||||
// getExhibitionLoad();
|
||||
});
|
||||
onUnmounted(() => {});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -1186,7 +1295,18 @@ onMounted(() => {
|
|||
class="system-content-left-item"
|
||||
>
|
||||
<p class="system-content-left-item-p1">{{ item.name }}</p>
|
||||
<p class="system-content-left-item-p2">{{ item.value }}</p>
|
||||
<p class="system-content-left-item-p2">
|
||||
{{
|
||||
item.value > 10000
|
||||
? (item.value / 10000).toFixed(3)
|
||||
: item.value > 100000000
|
||||
? (item.value / 100000000).toFixed(3)
|
||||
: item.value
|
||||
}}
|
||||
<span style="color: rgb(221, 255, 253)">{{
|
||||
item.value > 10000 ? "万" : item.value > 100000000 ? "亿" : ""
|
||||
}}</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="system-content-right">
|
||||
|
|
@ -1311,6 +1431,7 @@ onMounted(() => {
|
|||
|
||||
&-p1 {
|
||||
height: 29%;
|
||||
line-height: 25px;
|
||||
text-align: center;
|
||||
font-size: 0.875rem;
|
||||
color: rgba(221, 255, 253, 1);
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { ref, onMounted, onUnmounted } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import {
|
||||
getRealLoad,
|
||||
|
|
@ -48,16 +48,26 @@ import {
|
|||
getDisplayLoad,
|
||||
getLoopRanking,
|
||||
} from "@/api/energyMonitoring";
|
||||
import getPath from '@/utils/getPath.js'
|
||||
const getImageUrl = (name) => {
|
||||
return new URL(name, import.meta.url).href;
|
||||
};
|
||||
//实时负荷
|
||||
const getRealTimeLoad = (data) => {
|
||||
let dom = document.getElementById("realTimeLoad");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(document.getElementById("realTimeLoad"));
|
||||
myChart = echarts.init(dom);
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
tooltip: {},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: "#57617B",
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "18%",
|
||||
left: "4%",
|
||||
|
|
@ -73,7 +83,7 @@ const getRealTimeLoad = (data) => {
|
|||
show: true,
|
||||
lineStyle: {
|
||||
// type:'dashed',
|
||||
color: "rgba(1, 39, 37, .3)",
|
||||
color: "#557775",
|
||||
// color: "#233e64",
|
||||
},
|
||||
},
|
||||
|
|
@ -96,16 +106,18 @@ const getRealTimeLoad = (data) => {
|
|||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "单位:kWh",
|
||||
name: "单位:kW",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
align: "right",
|
||||
padding: [0, -10, 0, 0],
|
||||
},
|
||||
splitNumber: 5,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
color: "rgba(255, 255, 255, 0.20)",
|
||||
},
|
||||
},
|
||||
axisLine: { show: false },
|
||||
|
|
@ -240,9 +252,10 @@ const getDailyElectricityConsumption = (data) => {
|
|||
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
|
||||
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
|
||||
];
|
||||
let myChart = echarts.init(
|
||||
document.getElementById("dailyElectricityConsumption")
|
||||
);
|
||||
let dom = document.getElementById("dailyElectricityConsumption");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
|
@ -269,7 +282,7 @@ const getDailyElectricityConsumption = (data) => {
|
|||
lineStyle: {
|
||||
width: 1,
|
||||
type: "solid",
|
||||
color: "rgba(255, 255, 255, 0.20)",
|
||||
color: "#557775",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
|
|
@ -297,7 +310,8 @@ const getDailyElectricityConsumption = (data) => {
|
|||
name: "单位:kWh",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
padding: [0, 5, 0, 0],
|
||||
align:'right',
|
||||
padding: [0, -17, 0, 0],
|
||||
},
|
||||
// minInterval: 1,
|
||||
// y轴（竖直线）
|
||||
|
|
@ -309,7 +323,7 @@ const getDailyElectricityConsumption = (data) => {
|
|||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
color: "rgba(255, 255, 255, 0.30)",
|
||||
},
|
||||
},
|
||||
// y轴刻度线
|
||||
|
|
@ -438,10 +452,21 @@ const getDailyElectricityConsumption = (data) => {
|
|||
|
||||
//空调负荷
|
||||
const drawAirConditioningLoad = (data) => {
|
||||
let myChart = echarts.init(document.getElementById("airConditioningLoad"));
|
||||
let dom = document.getElementById("airConditioningLoad");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
// let myChart = echarts.init(document.getElementById("airConditioningLoad"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
tooltip: {},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: "#57617B",
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "18%",
|
||||
left: "4%",
|
||||
|
|
@ -484,15 +509,14 @@ const drawAirConditioningLoad = (data) => {
|
|||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
align: "right",
|
||||
padding: [0, -10, 0, 0],
|
||||
},
|
||||
min: 0,
|
||||
max: 2000,
|
||||
splitNumber: 5,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
color: "rgba(255, 255, 255, 0.30)",
|
||||
},
|
||||
},
|
||||
axisLine: { show: false },
|
||||
|
|
@ -506,12 +530,15 @@ const drawAirConditioningLoad = (data) => {
|
|||
],
|
||||
series: [
|
||||
{
|
||||
name: "异常流量",
|
||||
name: "空调负荷",
|
||||
type: "line",
|
||||
smooth: true, //是否平滑曲线显示
|
||||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||
symbolSize: 0,
|
||||
|
||||
itemStyle: {
|
||||
color: "#5BFAF1",
|
||||
},
|
||||
lineStyle: {
|
||||
color: "#5BFAF1", // 线条颜色
|
||||
},
|
||||
|
|
@ -548,10 +575,21 @@ const drawAirConditioningLoad = (data) => {
|
|||
};
|
||||
// 展陈负荷
|
||||
const drawExhibitionLoad = (data) => {
|
||||
let myChart = echarts.init(document.getElementById("exhibitionLoad"));
|
||||
let dom = document.getElementById("exhibitionLoad");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
// let myChart = echarts.init(document.getElementById("exhibitionLoad"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
tooltip: {},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: "#57617B",
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "18%",
|
||||
left: "4%",
|
||||
|
|
@ -594,15 +632,14 @@ const drawExhibitionLoad = (data) => {
|
|||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
align: "right",
|
||||
padding: [0, -10, 0, 0],
|
||||
},
|
||||
min: 0,
|
||||
max: 2000,
|
||||
splitNumber: 5,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
color: "rgba(255, 255, 255, 0.30)",
|
||||
},
|
||||
},
|
||||
axisLine: { show: false },
|
||||
|
|
@ -616,11 +653,14 @@ const drawExhibitionLoad = (data) => {
|
|||
],
|
||||
series: [
|
||||
{
|
||||
name: "异常流量",
|
||||
name: "展陈负荷",
|
||||
type: "line",
|
||||
smooth: true, //是否平滑曲线显示
|
||||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
|
||||
symbolSize: 0,
|
||||
itemStyle: {
|
||||
color: "rgba(1, 246, 139, 1)",
|
||||
},
|
||||
|
||||
lineStyle: {
|
||||
color: "rgba(1, 246, 139, 1)", // 线条颜色
|
||||
|
|
@ -658,13 +698,21 @@ const drawExhibitionLoad = (data) => {
|
|||
};
|
||||
// 配电回路排名
|
||||
const drawRanking = (params) => {
|
||||
let total = 0;
|
||||
params.forEach((el) => {
|
||||
total += el.EH;
|
||||
});
|
||||
let xData = [];
|
||||
let yData = [];
|
||||
params.forEach((item) => {
|
||||
yData.push(item.Ranking + " " + item.DeviceName);
|
||||
xData.push(item.EH);
|
||||
xData.push(parseInt(item.EH));
|
||||
});
|
||||
let myChart = echarts.init(document.getElementById("ranking"));
|
||||
let dom = document.getElementById("ranking");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
// let myChart = echarts.init(document.getElementById("ranking"));
|
||||
let option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
|
|
@ -685,9 +733,7 @@ const drawRanking = (params) => {
|
|||
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
|
||||
params[0].seriesName +
|
||||
" : " +
|
||||
Number(
|
||||
(params[0].value.toFixed(4) / 10000).toFixed(2)
|
||||
).toLocaleString() +
|
||||
Number(params[0].value).toLocaleString() +
|
||||
"kWh<br/>"
|
||||
);
|
||||
},
|
||||
|
|
@ -695,6 +741,7 @@ const drawRanking = (params) => {
|
|||
xAxis: {
|
||||
show: false,
|
||||
type: "value",
|
||||
max: total,
|
||||
},
|
||||
// dataZoom: [
|
||||
// {
|
||||
|
|
@ -721,16 +768,20 @@ const drawRanking = (params) => {
|
|||
fontSize: "14",
|
||||
},
|
||||
formatter: function (value, index) {
|
||||
return "{a|" + value + "}";
|
||||
return "{a|" + value.slice(0,4) + "}{b|" + value.slice(4) + "}";
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
width: 45,
|
||||
// padding: [0, 8, 0,0],
|
||||
fontSize: "14",
|
||||
fontSize: "16",
|
||||
fontFamily:'title',
|
||||
backgroundColor: {
|
||||
image: getImageUrl("../../assets/images/rank-bg.png"),
|
||||
},
|
||||
b:{
|
||||
fontSize: "14",
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
@ -760,13 +811,14 @@ const drawRanking = (params) => {
|
|||
inside: true,
|
||||
textStyle: {},
|
||||
formatter: function (value) {
|
||||
return "{a|" + (value / 10000).toLocaleString() + "}" + "{b|kWh}";
|
||||
return "{a|" + value.toLocaleString() + "}" + "{b|kWh}";
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: "16",
|
||||
fontSize: "20",
|
||||
color: "rgba(0, 255, 240, 1)",
|
||||
padding: [0, 6, 0, 0],
|
||||
fontFamily:'D-DIN-Bold'
|
||||
},
|
||||
b: {
|
||||
color: "#fff",
|
||||
|
|
@ -802,8 +854,10 @@ const drawRanking = (params) => {
|
|||
type: "bar",
|
||||
barWidth: 10,
|
||||
barGap: "-115%",
|
||||
data: [50000000, 50000000, 50000000, 50000000, 50000000],
|
||||
data: [total, total, total, total, total],
|
||||
itemStyle: {
|
||||
borderColor:'rgba(4, 24, 44, 1)',
|
||||
borderWidth:2,
|
||||
color: "rgba(5, 33, 31, 0.32)",
|
||||
},
|
||||
},
|
||||
|
|
@ -828,10 +882,21 @@ const drawLoadClassification = (item) => {
|
|||
// },
|
||||
// {
|
||||
// name: "三级",
|
||||
// value: 50,
|
||||
// value: 50000,
|
||||
// },
|
||||
// ];
|
||||
console.log(item[0].Amount, "xxx");
|
||||
let unit = "kW";
|
||||
if (item[0].Amount > 1000) {
|
||||
unit = "万kW";
|
||||
} else if (item[0].Amount > 10000000) {
|
||||
unit = "亿kW";
|
||||
}
|
||||
if (item[0].Amount > 1000) {
|
||||
item[0].Amount = (item[0].Amount / 10000).toFixed(2);
|
||||
} else if (item[0].Amount > 10000000) {
|
||||
item[0].Amount = (item[0].Amount / 100000000).toFixed(2);
|
||||
}
|
||||
|
||||
var trafficWay = item[0].list.map((el) => {
|
||||
return {
|
||||
name: el.type,
|
||||
|
|
@ -851,6 +916,7 @@ const drawLoadClassification = (item) => {
|
|||
"rgba(255, 221, 0, 1)",
|
||||
];
|
||||
for (var i = 0; i < trafficWay.length; i++) {
|
||||
console.log(trafficWay[i].value);
|
||||
data.push(
|
||||
{
|
||||
value: trafficWay[i].value,
|
||||
|
|
@ -883,8 +949,12 @@ const drawLoadClassification = (item) => {
|
|||
}
|
||||
);
|
||||
}
|
||||
var img = "/src/assets/images/energyMonitoring/loadClassification.png";
|
||||
let myChart = echarts.init(document.getElementById("loadClassification"));
|
||||
var img = "../../../src/assets/images/energyMonitoring/loadClassification.png";
|
||||
let dom = document.getElementById("loadClassification");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
// let myChart = echarts.init(document.getElementById("loadClassification"));
|
||||
let option = {
|
||||
graphic: {
|
||||
elements: [
|
||||
|
|
@ -892,9 +962,9 @@ const drawLoadClassification = (item) => {
|
|||
type: "image",
|
||||
z: 3,
|
||||
style: {
|
||||
image: img,
|
||||
width: 170,
|
||||
height: 170,
|
||||
image: getPath.loadClassification,
|
||||
width: 180,
|
||||
height: 180,
|
||||
},
|
||||
left: "center",
|
||||
top: "center",
|
||||
|
|
@ -916,12 +986,12 @@ const drawLoadClassification = (item) => {
|
|||
},
|
||||
},
|
||||
{
|
||||
text: "kw",
|
||||
text: unit,
|
||||
x: "58%",
|
||||
y: "45%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontSize: "14",
|
||||
fontSize: "12",
|
||||
fontWeight: "100",
|
||||
color: "#FFF",
|
||||
},
|
||||
|
|
@ -947,7 +1017,7 @@ const drawLoadClassification = (item) => {
|
|||
name: "",
|
||||
type: "pie",
|
||||
clockWise: false,
|
||||
radius: [55, 59],
|
||||
radius: [53, 60],
|
||||
hoverAnimation: false,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
|
|
@ -957,6 +1027,7 @@ const drawLoadClassification = (item) => {
|
|||
color: "#FFFFFF",
|
||||
fontSize: 16,
|
||||
formatter: function (params) {
|
||||
console.log(params, "xxxxxxxxxx");
|
||||
var percent = 0;
|
||||
// var total = 0
|
||||
// for (var i = 0; i < trafficWay.length; i++) {
|
||||
|
|
@ -968,13 +1039,15 @@ const drawLoadClassification = (item) => {
|
|||
if (params.name !== "") {
|
||||
return (
|
||||
`{a${params.dataIndex / 2}|` +
|
||||
percent +
|
||||
params.value +
|
||||
"}" +
|
||||
`{s0|` +
|
||||
unit +
|
||||
"}" +
|
||||
"\n" +
|
||||
params.name
|
||||
`{s1|` +
|
||||
params.name +
|
||||
"}"
|
||||
);
|
||||
} else {
|
||||
return "";
|
||||
|
|
@ -1003,12 +1076,17 @@ const drawLoadClassification = (item) => {
|
|||
padding: [0, 0, 10, 5],
|
||||
fontSize: 12,
|
||||
},
|
||||
s1: {
|
||||
color: "#fff",
|
||||
padding: [0, 10, 0, 0],
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
length: 20,
|
||||
length2: 60,
|
||||
length: 60,
|
||||
length2: 70,
|
||||
show: true,
|
||||
color: "#00ffff",
|
||||
},
|
||||
|
|
@ -1029,13 +1107,13 @@ const drawLoadClassification = (item) => {
|
|||
// 获取实时负荷数据
|
||||
const realTimeLoadInterface = () => {
|
||||
getRealLoad().then((res) => {
|
||||
getRealTimeLoad(res.data);
|
||||
getRealTimeLoad(res.data.slice(-10));
|
||||
});
|
||||
};
|
||||
// 获取当日累计用电量数据
|
||||
const dailyElectricityInterface = () => {
|
||||
getDailyElectricity().then((res) => {
|
||||
getDailyElectricityConsumption(res.data);
|
||||
getDailyElectricityConsumption(res.data.slice(-10));
|
||||
});
|
||||
};
|
||||
// 获取负荷分类数据
|
||||
|
|
@ -1047,13 +1125,13 @@ const loadClassificationInterface = () => {
|
|||
// 获取空调负荷数据
|
||||
const airconditioningLoadInteface = () => {
|
||||
getAirconditioningLoad().then((res) => {
|
||||
drawAirConditioningLoad(res.data);
|
||||
drawAirConditioningLoad(res.data.slice(-10));
|
||||
});
|
||||
};
|
||||
// 获取展陈负荷数据
|
||||
const displayLoadInterface = () => {
|
||||
getDisplayLoad().then((res) => {
|
||||
drawExhibitionLoad(res.data);
|
||||
drawExhibitionLoad(res.data.slice(-10));
|
||||
});
|
||||
};
|
||||
// 获取配电回路数据
|
||||
|
|
@ -1078,6 +1156,7 @@ onMounted(() => {
|
|||
//负荷分类接口
|
||||
loadClassificationInterface();
|
||||
});
|
||||
onUnmounted(() => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
|
|||
|
|
@ -11,11 +11,13 @@ const toggleControl = (event) => {
|
|||
name: props.name,
|
||||
value: "全关",
|
||||
};
|
||||
lightControl.value.forEach((ele) => {
|
||||
|
||||
setSingleSwitch(dataMap)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
lightControl.value.forEach((ele) => {
|
||||
ele.State = false;
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -23,19 +25,19 @@ const toggleControl = (event) => {
|
|||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
});
|
||||
} else if (event.srcElement.className === "on") {
|
||||
controlBtn.value = "on";
|
||||
lightControl.value.forEach((ele) => {
|
||||
let dataMap = {
|
||||
name: props.name,
|
||||
value: "全开",
|
||||
};
|
||||
lightControl.value.forEach((ele) => {
|
||||
|
||||
setSingleSwitch(dataMap)
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
lightControl.value.forEach((ele) => {
|
||||
ele.State = true;
|
||||
});
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -43,8 +45,6 @@ const toggleControl = (event) => {
|
|||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
const props = defineProps({
|
||||
|
|
@ -60,6 +60,7 @@ const props = defineProps({
|
|||
type: Array,
|
||||
},
|
||||
});
|
||||
console.log(props.name,props.show);
|
||||
const emit = defineEmits(["update"]);
|
||||
const closeDialog = () => {
|
||||
// 向父组件传值
|
||||
|
|
@ -105,12 +106,12 @@ watch(
|
|||
<span>{{ props.name }}</span>
|
||||
</div>
|
||||
<div class="control-btn">
|
||||
<span
|
||||
<!-- <span
|
||||
class="on"
|
||||
:class="controlBtn === 'on' ? 'select' : ''"
|
||||
@click="toggleControl"
|
||||
>全开</span
|
||||
>
|
||||
> -->
|
||||
<span
|
||||
style="margin-left: 0.7rem"
|
||||
class="off"
|
||||
|
|
|
|||
|
|
@ -16,17 +16,17 @@ import {
|
|||
// 照明监测
|
||||
const lightingNumList = ref([
|
||||
{
|
||||
name: "照明四路数量",
|
||||
name: "照明回路数量",
|
||||
num: 0,
|
||||
pic: getPath.lightTotal,
|
||||
},
|
||||
{
|
||||
name: "照明四路灭灯数量",
|
||||
name: "照明回路灭灯数量",
|
||||
num: 0,
|
||||
pic: getPath.noLightNum,
|
||||
},
|
||||
{
|
||||
name: "照明四路亮灯数量",
|
||||
name: "照明回路亮灯数量",
|
||||
num: 0,
|
||||
pic: getPath.lightingNum,
|
||||
},
|
||||
|
|
@ -120,7 +120,7 @@ const drawFaultConditionsChart = (params) => {
|
|||
value: params[0].Normality,
|
||||
},
|
||||
{
|
||||
name: "故障",
|
||||
name: "离线",
|
||||
value: params[0].Malfunction,
|
||||
},
|
||||
];
|
||||
|
|
@ -161,7 +161,12 @@ const drawFaultConditionsChart = (params) => {
|
|||
);
|
||||
}
|
||||
var img = "/src/assets/images/energyMonitoring/loadClassification.png";
|
||||
let myChart = echarts.init(document.getElementById("faultConditions"));
|
||||
|
||||
// let myChart = echarts.init(document.getElementById("faultConditions"));
|
||||
let dom = document.getElementById("faultConditions");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
let option = {
|
||||
graphic: {
|
||||
elements: [
|
||||
|
|
@ -169,7 +174,7 @@ const drawFaultConditionsChart = (params) => {
|
|||
type: "image",
|
||||
z: 3,
|
||||
style: {
|
||||
image: img,
|
||||
image: getPath.loadClassification,
|
||||
width: 175,
|
||||
height: 175,
|
||||
},
|
||||
|
|
@ -183,19 +188,19 @@ const drawFaultConditionsChart = (params) => {
|
|||
title: [
|
||||
{
|
||||
text: total,
|
||||
x: "47%",
|
||||
x: "48%",
|
||||
y: "42%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
fontFamily: "Verdana-Bold",
|
||||
fontSize: "20",
|
||||
fontFamily: "D-DIN-Bold",
|
||||
fontSize: "24",
|
||||
fontWeight: "bold",
|
||||
color: "#FFF",
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "个",
|
||||
x: "58%",
|
||||
x: "55%",
|
||||
y: "45%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
|
|
@ -205,7 +210,7 @@ const drawFaultConditionsChart = (params) => {
|
|||
},
|
||||
},
|
||||
{
|
||||
text: "照明四路数量",
|
||||
text: "照明回路数量",
|
||||
left: "49%",
|
||||
top: "55%",
|
||||
textAlign: "center",
|
||||
|
|
@ -264,12 +269,14 @@ const drawFaultConditionsChart = (params) => {
|
|||
a0: {
|
||||
color: "rgba(1, 246, 139, 1)",
|
||||
padding: [0, 0, 10, 0],
|
||||
fontSize: 15,
|
||||
fontSize: 20,
|
||||
fontFamily:'D-DIN-Bold',
|
||||
},
|
||||
a1: {
|
||||
color: color[1],
|
||||
padding: [0, 0, 10, 0],
|
||||
fontSize: 15,
|
||||
fontSize: 20,
|
||||
fontFamily:'D-DIN-Bold',
|
||||
},
|
||||
s0: {
|
||||
color: "#fff",
|
||||
|
|
@ -375,7 +382,11 @@ const drawHallLightingChart = (params) => {
|
|||
// 绿色渐变
|
||||
// let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
|
||||
let colorArr;
|
||||
let myChart = echarts.init(document.getElementById("hallLighting"));
|
||||
let dom = document.getElementById("hallLighting");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
// let myChart = echarts.init(document.getElementById("hallLighting"));
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
|
@ -402,7 +413,7 @@ const drawHallLightingChart = (params) => {
|
|||
lineStyle: {
|
||||
width: 1,
|
||||
type: "solid",
|
||||
color: "rgba(255, 255, 255, 0.20)",
|
||||
color: "#557775",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
|
|
@ -442,7 +453,7 @@ const drawHallLightingChart = (params) => {
|
|||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
color: "rgba(255, 255, 255, 0.30)",
|
||||
},
|
||||
},
|
||||
// y轴刻度线
|
||||
|
|
@ -582,6 +593,18 @@ const drawHallLightingChart = (params) => {
|
|||
};
|
||||
// 照明负荷
|
||||
const drawLightLoadChart = (params) => {
|
||||
let boforeDate =
|
||||
lightLoadDate.value == "year"
|
||||
? "去年"
|
||||
: lightLoadDate.value == "month"
|
||||
? "上月"
|
||||
: "昨日";
|
||||
let nowDate =
|
||||
lightLoadDate.value == "year"
|
||||
? "今年"
|
||||
: lightLoadDate.value == "month"
|
||||
? "本月"
|
||||
: "今日";
|
||||
let xData = [];
|
||||
let toDay = [];
|
||||
let lastDay = [];
|
||||
|
|
@ -590,7 +613,11 @@ const drawLightLoadChart = (params) => {
|
|||
toDay.push(item.TP);
|
||||
lastDay.push(item.YP);
|
||||
});
|
||||
let myChart = echarts.init(document.getElementById("lightLoad"));
|
||||
let dom = document.getElementById("lightLoad");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
// let myChart = echarts.init(document.getElementById("lightLoad"));
|
||||
let option = {
|
||||
grid: {
|
||||
top: "18%",
|
||||
|
|
@ -610,8 +637,9 @@ const drawLightLoadChart = (params) => {
|
|||
legend: [
|
||||
{
|
||||
icon: "rect",
|
||||
top: 5,
|
||||
left: "right",
|
||||
top: 10,
|
||||
// left: "right",
|
||||
right:10,
|
||||
orient: "horizontal",
|
||||
// data: ['进水量', '出水量'],
|
||||
borderRadius: 20,
|
||||
|
|
@ -644,12 +672,20 @@ const drawLightLoadChart = (params) => {
|
|||
textStyle: {
|
||||
color: "#DDFFFD", //X轴文字颜色
|
||||
},
|
||||
formatter: function (value) {
|
||||
// 如果数值大于1000，则以千位分隔
|
||||
if (value >= 1000) {
|
||||
return value / 10000 + "万";
|
||||
} else if (value >= 10000000) {
|
||||
return value / 100000000 + "亿";
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
min: 0,
|
||||
max: 500,
|
||||
type: "value",
|
||||
name: "单位/kW",
|
||||
nameTextStyle: {
|
||||
|
|
@ -663,19 +699,29 @@ const drawLightLoadChart = (params) => {
|
|||
axisLabel: {
|
||||
color: "#DDFFFD",
|
||||
fontSize: 12,
|
||||
formatter: function (value) {
|
||||
// 如果数值大于1000，则以千位分隔
|
||||
if (value >= 1000) {
|
||||
return value / 10000 + "万";
|
||||
} else if (value >= 10000000) {
|
||||
return value / 100000000 + "亿";
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
color: "rgba(255, 255, 255, 0.30)",
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "昨日",
|
||||
name: boforeDate,
|
||||
type: "line",
|
||||
//显示所有图形。
|
||||
//标记的图形为实心圆
|
||||
|
|
@ -695,7 +741,7 @@ const drawLightLoadChart = (params) => {
|
|||
data: lastDay,
|
||||
},
|
||||
{
|
||||
name: "今日",
|
||||
name: nowDate,
|
||||
type: "line",
|
||||
symbol: "none",
|
||||
itemStyle: {
|
||||
|
|
@ -704,11 +750,11 @@ const drawLightLoadChart = (params) => {
|
|||
borderWidth: "2",
|
||||
borderColor: "#91cc75",
|
||||
normal: {
|
||||
color: "#91cc75", //拐点颜色
|
||||
color: "rgba(1, 246, 139, 1)", //拐点颜色
|
||||
},
|
||||
},
|
||||
lineStyle: {
|
||||
color: "#91cc75",
|
||||
color: "rgba(1, 246, 139, 1)",
|
||||
},
|
||||
data: toDay,
|
||||
},
|
||||
|
|
@ -743,7 +789,8 @@ function lightingCircuit() {
|
|||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
res.data.forEach((item) => {
|
||||
item.state = item.state == "0" ? false : true;
|
||||
item.state =
|
||||
item.state == "0" ? "0" : item.state == "255" ? "1" : "2";
|
||||
});
|
||||
lightDetail.value = res.data;
|
||||
} else {
|
||||
|
|
@ -765,7 +812,7 @@ function lightingLoad() {
|
|||
getLightingLoad({ date })
|
||||
.then((res) => {
|
||||
if (res.code == 200) {
|
||||
drawLightLoadChart(res.data);
|
||||
drawLightLoadChart(res.data.slice(-10));
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
|
@ -869,6 +916,7 @@ onMounted(() => {
|
|||
v-for="(item, index) in floorList"
|
||||
@click="toggleFloor(item, index)"
|
||||
:class="index === floorIndex ? 'floor-select' : 'floor-default'"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
|
|
@ -914,7 +962,7 @@ onMounted(() => {
|
|||
>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span>{{ item.location }}</span>
|
||||
<span><i :class="item.state ? 'state1' : 'state0'"></i></span>
|
||||
<span><i :class="'state' + item.state"></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -955,12 +1003,12 @@ onMounted(() => {
|
|||
<div class="title margin10">
|
||||
<span>照明控制</span>
|
||||
<p class="control-btn">
|
||||
<span
|
||||
<!-- <span
|
||||
:class="controlBtn === 'on' ? 'select' : ''"
|
||||
class="on"
|
||||
@click="toggleControl"
|
||||
>全开</span
|
||||
>
|
||||
> -->
|
||||
<span
|
||||
:class="controlBtn === 'off' ? 'select' : ''"
|
||||
class="off"
|
||||
|
|
@ -1014,7 +1062,9 @@ onMounted(() => {
|
|||
height: 4.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.light-item:nth-child(2n){
|
||||
padding-left: 1.2rem;
|
||||
}
|
||||
.light-item {
|
||||
display: flex;
|
||||
flex-basis: 50%;
|
||||
|
|
@ -1044,12 +1094,17 @@ onMounted(() => {
|
|||
display: block;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
.num{
|
||||
font-family: 'D-DIN-Bold';
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//照明回路详情
|
||||
.state0,
|
||||
.state1 {
|
||||
.state1,
|
||||
.state2 {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
display: block;
|
||||
|
|
@ -1064,6 +1119,9 @@ onMounted(() => {
|
|||
.state1 {
|
||||
background-image: url("@/assets/images/lighting/state1.png");
|
||||
}
|
||||
.state2 {
|
||||
background-image: url("@/assets/images/lighting/state2.png");
|
||||
}
|
||||
|
||||
//照明控制
|
||||
.control {
|
||||
|
|
|
|||
|
|
@ -11,8 +11,7 @@ import {
|
|||
getSystemRanking,
|
||||
} from "@/api/overview";
|
||||
import getPath from "@/utils/getPath.js";
|
||||
|
||||
console.log(getPath)
|
||||
const emit = defineEmits(["getHeart"]);
|
||||
// 实时负荷
|
||||
const realTimeLoad = ref([
|
||||
{ pic: getPath.roomnum, name: "配电室数量", value: 8, unit: "个" },
|
||||
|
|
@ -21,17 +20,17 @@ const realTimeLoad = ref([
|
|||
]);
|
||||
// 气象站
|
||||
const weatherStation = ref([
|
||||
{ pic: getPath.rain, name: "雨量", value: 100, unit: "mm" },
|
||||
{ pic: getPath.rainsnow, name: "雨雪", value: "实际取值", unit: "mm" },
|
||||
{ pic: getPath.rain, name: "雨量", value: 100 },
|
||||
{ pic: getPath.rainsnow, name: "雨雪", value: "实际取值" },
|
||||
{ pic: getPath.wind, name: "风向", value: "东南风" },
|
||||
{ pic: getPath.illuminance, name: "光照度", value: 101, unit: "lux" },
|
||||
{ pic: getPath.windspeed, name: "风速", value: "东南风3级" },
|
||||
{ pic: getPath.air, name: "空气质量", value: "优" },
|
||||
{ pic: getPath.illuminance, name: "光照度", value: 101, unit: "万Lux" },
|
||||
{ pic: getPath.windspeed, name: "风速", value: "东南风3级", unit: "m/s" },
|
||||
{ pic: getPath.air, name: "空气质量", value: "优", unit: "ug/m³" },
|
||||
]);
|
||||
// const getImageUrl=(name)=>{
|
||||
// return `url(${new URL(name, import.meta.url).href})`
|
||||
// }
|
||||
|
||||
const windList = ref(["北", "东北", "东", "东南", "南", "西南", "西", "西北"]);
|
||||
// 用电量列表
|
||||
const powerList = ref([]);
|
||||
onMounted(() => {
|
||||
|
|
@ -49,7 +48,7 @@ onMounted(() => {
|
|||
// getCarbonEmissionEcahrts();
|
||||
});
|
||||
// 用电量时间切换
|
||||
const powerDate = ref("year");
|
||||
const powerDate = ref("month");
|
||||
|
||||
const togglePower = (event) => {
|
||||
powerDate.value = event.srcElement.className;
|
||||
|
|
@ -63,10 +62,21 @@ const toggleCarbonEmission = (event) => {
|
|||
CarbonEmissionInterface();
|
||||
};
|
||||
const drawPowerEcharts = (item) => {
|
||||
let myChart = echarts.init(document.getElementById("power"));
|
||||
let dom = document.getElementById("power");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
// let myChart = echarts.init(document.getElementById("power"));
|
||||
const option = {
|
||||
// backgroundColor: "#05224d",
|
||||
tooltip: {},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
lineStyle: {
|
||||
color: "#57617B",
|
||||
},
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "18%",
|
||||
left: "4%",
|
||||
|
|
@ -86,6 +96,7 @@ const drawPowerEcharts = (item) => {
|
|||
// color: "#233e64",
|
||||
},
|
||||
},
|
||||
|
||||
axisLabel: {
|
||||
//坐标轴刻度标签的相关设置
|
||||
textStyle: {
|
||||
|
|
@ -108,15 +119,14 @@ const drawPowerEcharts = (item) => {
|
|||
name: "单位:kWh",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
padding: [0, 15, 0, 0],
|
||||
},
|
||||
min: 0,
|
||||
max: 500,
|
||||
splitNumber: 5,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
color: "rgba(255, 255, 255, 0.20)",
|
||||
},
|
||||
},
|
||||
axisLine: { show: false },
|
||||
|
|
@ -124,23 +134,39 @@ const drawPowerEcharts = (item) => {
|
|||
textStyle: {
|
||||
color: "#DDFFFD",
|
||||
},
|
||||
// 使用formatter格式化y轴的标签
|
||||
formatter: function (value) {
|
||||
// 如果数值大于1000，则以千位分隔
|
||||
if (value >= 1000) {
|
||||
return value / 10000 + "万";
|
||||
} else if (value >= 10000000) {
|
||||
return value / 100000000 + "亿";
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
},
|
||||
axisTick: { show: false },
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "异常流量",
|
||||
name: "用电量",
|
||||
type: "line",
|
||||
smooth: true, //是否平滑曲线显示
|
||||
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
||||
symbolSize: 0,
|
||||
|
||||
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
|
||||
// symbolSize: 8,
|
||||
showSymbol: true,
|
||||
lineStyle: {
|
||||
normal: {
|
||||
color: "#5BFAF1", // 线条颜色
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#5BFAF1",
|
||||
},
|
||||
},
|
||||
areaStyle: {
|
||||
//区域填充样式
|
||||
normal: {
|
||||
|
|
@ -175,7 +201,15 @@ const drawPowerEcharts = (item) => {
|
|||
});
|
||||
};
|
||||
const drawRankEcharts = (data) => {
|
||||
let myChart = echarts.init(document.getElementById("rank"));
|
||||
let total = 0;
|
||||
data.forEach((el) => {
|
||||
total += el.EH;
|
||||
});
|
||||
let dom = document.getElementById("rank");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
// let myChart = echarts.init(document.getElementById("rank"));
|
||||
let option = {
|
||||
grid: {
|
||||
left: "5%",
|
||||
|
|
@ -196,16 +230,15 @@ const drawRankEcharts = (data) => {
|
|||
"<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
|
||||
params[0].seriesName +
|
||||
" : " +
|
||||
Number(
|
||||
(params[0].value.toFixed(4) / 10000).toFixed(2)
|
||||
).toLocaleString() +
|
||||
" 万元<br/>"
|
||||
Number(params[0].value).toLocaleString() +
|
||||
" kWh<br/>"
|
||||
);
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
show: false,
|
||||
type: "value",
|
||||
max: total,
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
|
|
@ -247,7 +280,7 @@ const drawRankEcharts = (data) => {
|
|||
inside: true,
|
||||
textStyle: {},
|
||||
formatter: function (value) {
|
||||
return "{a|" + (value / 10000).toLocaleString() + "}" + "{b|kWh}";
|
||||
return "{a|" + value + "}" + "{b|kWh}";
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
|
|
@ -269,7 +302,7 @@ const drawRankEcharts = (data) => {
|
|||
],
|
||||
series: [
|
||||
{
|
||||
name: "金额",
|
||||
name: "用电",
|
||||
type: "bar",
|
||||
zlevel: 1,
|
||||
itemStyle: {
|
||||
|
|
@ -295,8 +328,10 @@ const drawRankEcharts = (data) => {
|
|||
type: "bar",
|
||||
barWidth: 10,
|
||||
barGap: "-115%",
|
||||
data: [50000000, 50000000, 50000000, 50000000, 50000000],
|
||||
data: [total, total, total, total, total],
|
||||
itemStyle: {
|
||||
borderColor:'rgba(4, 24, 44, 1)',
|
||||
borderWidth:2,
|
||||
color: "rgba(5, 33, 31, 0.32)",
|
||||
},
|
||||
},
|
||||
|
|
@ -394,7 +429,11 @@ function getCarbonEmissionEcahrts(data) {
|
|||
["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
|
||||
["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
|
||||
];
|
||||
let myChart = echarts.init(document.getElementById("carbonEmission"));
|
||||
let dom = document.getElementById("carbonEmission");
|
||||
dom.removeAttribute("_echarts_instance_");
|
||||
let myChart;
|
||||
myChart = echarts.init(dom);
|
||||
// let myChart = echarts.init(document.getElementById("carbonEmission"));
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
|
|
@ -417,13 +456,15 @@ function getCarbonEmissionEcahrts(data) {
|
|||
type: "category",
|
||||
data: xAxisData,
|
||||
axisLine: {
|
||||
//坐标轴轴线相关设置。数学上的x轴
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: "solid",
|
||||
color: "rgba(255, 255, 255, 0.20)",
|
||||
// type:'dashed',
|
||||
color: "#557775",
|
||||
// color: "#233e64",
|
||||
},
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
|
|
@ -446,7 +487,7 @@ function getCarbonEmissionEcahrts(data) {
|
|||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
name: "单位:kWh",
|
||||
name: "单位:tCO₂",
|
||||
nameTextStyle: {
|
||||
color: "#DDFFFD",
|
||||
padding: [0, 5, 0, 0],
|
||||
|
|
@ -461,7 +502,7 @@ function getCarbonEmissionEcahrts(data) {
|
|||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "rgba(1, 39, 37, 0.30)",
|
||||
color: "rgba(255, 255, 255, 0.20)",
|
||||
},
|
||||
},
|
||||
// y轴刻度线
|
||||
|
|
@ -472,6 +513,17 @@ function getCarbonEmissionEcahrts(data) {
|
|||
axisLabel: {
|
||||
fontSize: 12,
|
||||
color: "#DDFFFD",
|
||||
// 使用formatter格式化y轴的标签
|
||||
formatter: function (value) {
|
||||
// 如果数值大于1000，则以千位分隔
|
||||
if (value >= 1000) {
|
||||
return value / 10000 + "万";
|
||||
} else if (value >= 10000000) {
|
||||
return value / 100000000 + "亿";
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
|
|
@ -594,7 +646,7 @@ const powerInterface = () => {
|
|||
};
|
||||
getPower(params).then((res) => {
|
||||
// 渲染用电量图表
|
||||
drawPowerEcharts(res.data);
|
||||
drawPowerEcharts(res.data.slice(-10));
|
||||
});
|
||||
};
|
||||
// 获取实时负荷
|
||||
|
|
@ -614,11 +666,20 @@ const realtimeLoadInterface = () => {
|
|||
// 获取气象站数据
|
||||
const stationInterface = () => {
|
||||
getMeteorologicalStation().then((res) => {
|
||||
res.data.forEach((el) => {
|
||||
if (el.name === "空气温度") {
|
||||
emit("getHeart", el.value);
|
||||
}
|
||||
});
|
||||
weatherStation.value.forEach((item) => {
|
||||
res.data.forEach((el) => {
|
||||
if (el.name.indexOf(item.name) !== -1) {
|
||||
if (el.name === "光照度") {
|
||||
item.value = (el.value / 10000).toFixed(2);
|
||||
} else {
|
||||
item.value = el.value;
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -638,7 +699,6 @@ const CarbonEmissionInterface = () => {
|
|||
getCarbonEmissionEcahrts(res.data);
|
||||
});
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -704,9 +764,11 @@ const CarbonEmissionInterface = () => {
|
|||
v-for="(item, index) in realTimeLoad"
|
||||
:style="'background-image:url(' + item.pic + ')'"
|
||||
>
|
||||
<span class="unit">{{ item.name }}</span>
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<p>
|
||||
<span class="value">{{ item.value }}</span>
|
||||
<span class="value" style="font-family: D-DIN-Bold">{{
|
||||
item.value
|
||||
}}</span>
|
||||
<span class="unit">{{ item.unit }}</span>
|
||||
</p>
|
||||
</li>
|
||||
|
|
@ -723,8 +785,20 @@ const CarbonEmissionInterface = () => {
|
|||
<span>{{ item.name }}</span>
|
||||
</p>
|
||||
<p>
|
||||
<span class="wea-value">{{ item.value }}</span
|
||||
><span class="unit" v-if="item.unit">{{ item.unit }}</span>
|
||||
<span
|
||||
class="wea-value"
|
||||
style="font-family: D-DIN-Bold; font-size: 1.625rem"
|
||||
v-if="item.name !== '风向'"
|
||||
>{{ item.value }}</span
|
||||
>
|
||||
<span
|
||||
class="wea-value"
|
||||
style="font-family: D-DIN-Bold; font-size: 1.125rem"
|
||||
v-else
|
||||
>
|
||||
{{ windList[index] }}
|
||||
</span>
|
||||
<span class="unit" v-if="item.unit">{{ item.unit }}</span>
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -757,7 +831,7 @@ const CarbonEmissionInterface = () => {
|
|||
box-sizing: border-box;
|
||||
.value {
|
||||
margin-right: 0.7rem;
|
||||
font-size: 1.5rem;
|
||||
font-size: 1.875rem;
|
||||
font-weight: 700;
|
||||
color: rgba(91, 250, 241, 1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ export default defineConfig({
|
|||
proxy: {
|
||||
// https://cn.vitejs.dev/config/#server-proxy
|
||||
'/dev-api': {
|
||||
target: 'http://172.16.1.134:8021/',
|
||||
target: 'http://172.16.1.253:1234/',
|
||||
changeOrigin: true,
|
||||
rewrite: (p) => p.replace(/^\/dev-api/, '')
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue