luoshiwen
/
long_IslandOcean
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

代码提交

This commit is contained in:
yun 2024-08-21 09:35:26 +08:00
parent 4025d90774
commit 0301249248
23 changed files with 748 additions and 313 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.production
View File

@ -5,7 +5,7 @@ VITE_APP_TITLE = 若依管理系统
VITE_APP_ENV = 'production' VITE_APP_ENV = 'production'
#生产环境 #生产环境
VITE_APP_BASE_API = '/prod-api' VITE_APP_BASE_API = ''
# 是否在打包时开启压缩，支持 gzip 和 brotli # 是否在打包时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip VITE_BUILD_COMPRESS = gzip

BIN
dist.zip Normal file
View File

Binary file not shown.

BIN
public/ChangDaobuild/Build/build.data.unityweb
View File

Binary file not shown.

BIN
public/ChangDaobuild/Build/build.framework.js.unityweb
View File

Binary file not shown.

BIN
public/ChangDaobuild/Build/build.wasm.unityweb
View File

Binary file not shown.

3
public/ChangDaobuild/StreamingAssets/ipConfig.json Normal file
View File

@ -0,0 +1,3 @@
{
"loginIp": "http://localhost:8011/api/GetDrainHeading"
}

18
public/ChangDaobuild/index.html
View File

@ -6,7 +6,8 @@
<title>Unity WebGL Player | CD</title> <title>Unity WebGL Player | CD</title>
<link rel="shortcut icon" href="TemplateData/favicon.ico"> <link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css"> <link rel="stylesheet" href="TemplateData/style.css">
</head><style>body,html{ </head>
<style>body,html{
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
@ -60,11 +61,11 @@
} }
var buildUrl = "Build"; var buildUrl = "Build";
var loaderUrl = buildUrl + "/build.loader.js"; var loaderUrl = buildUrl + "/BUILD.loader.js";
var config = { var config = {
dataUrl: buildUrl + "/build.data.unityweb", dataUrl: buildUrl + "/BUILD.data.unityweb",
frameworkUrl: buildUrl + "/build.framework.js.unityweb", frameworkUrl: buildUrl + "/BUILD.framework.js.unityweb",
codeUrl: buildUrl + "/build.wasm.unityweb", codeUrl: buildUrl + "/BUILD.wasm.unityweb",
streamingAssetsUrl: "StreamingAssets", streamingAssetsUrl: "StreamingAssets",
companyName: "DefaultCompany", companyName: "DefaultCompany",
productName: "CD", productName: "CD",
@ -97,13 +98,14 @@
} else { } else {
// Desktop style: Render the game canvas in a window that can be maximized to fullscreen: // Desktop style: Render the game canvas in a window that can be maximized to fullscreen:
// canvas.style.width = "1920px"; canvas.style.width = "1920px";
// canvas.style.height = "1080px"; canvas.style.height = "1080px";
} }
loadingBar.style.display = "block"; loadingBar.style.display = "block";
var unityInstanceA
var script = document.createElement("script"); var script = document.createElement("script");
var unityInstanceA
script.src = loaderUrl; script.src = loaderUrl;
script.onload = () => { script.onload = () => {
createUnityInstance(canvas, config, (progress) => { createUnityInstance(canvas, config, (progress) => {

BIN
src/assets/images/drainage/state0.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/images/drainage/state1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/images/drainage/state2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
src/assets/images/lighting/state2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 422 B

2
src/components/calendar/index.vue
View File

@ -210,7 +210,7 @@ onMounted(() => {
// } // }
background: url(../../assets/images/overview/thisMonthAc.png) no-repeat; background: url(../../assets/images/overview/thisMonthAc.png) no-repeat;
background-size: 100% 100%; 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 { .el-calendar-day {
.day { .day {
color: rgba(255, 251, 222, 1); color: rgba(255, 251, 222, 1);

27
src/components/mainHeader/index.vue
View File

@ -69,6 +69,12 @@ const tabName = shallowRef(overview)
const closeUnity = () =>{ const closeUnity = () =>{
dome.value.contentWindow.closeLight() dome.value.contentWindow.closeLight()
} }
const heart = ref('4')
function getHeart(val){
console.log(val,'室外温度');
heart.value = val
}
onMounted(() => { onMounted(() => {
}) })
@ -110,8 +116,8 @@ onMounted(() => {
<span>{{ nowMin }}</span> <span>{{ nowMin }}</span>
</p> </p>
<p> <p>
<span class="m10 weaIcon">晴</span> <!-- <span class="m10 weaIcon">晴</span> -->
<span>4~13℃</span> <span>{{heart}}℃</span>
</p> </p>
</div> </div>
@ -119,15 +125,15 @@ onMounted(() => {
<ul> <ul>
<li v-for="(item,index) in menuList" :class="'menu-icon'+index" <li v-for="(item,index) in menuList" :class="'menu-icon'+index"
:style="menuIndex===index?'background-image:url('+ item.select + ')':'background-image:url('+ item.default + ')'" :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> </ul>
</div> </div>
<!-- <overview></overview>--> <!-- <overview></overview>-->
<!-- <router-view />--> <!-- <router-view />-->
<!-- <transition appear mode="out-in">--> <!-- <transition appear mode="out-in">-->
<keep-alive> <!-- <keep-alive> -->
<component :key="tabName" :is="tabName" @sendVal="getState" @closeBox="closeUnity" @closeAir="dome.contentWindow.closeStrategy()"></component> <component :key="tabName" :is="tabName" @getHeart="getHeart" @sendVal="getState" @closeBox="closeUnity" @closeAir="dome.contentWindow.closeStrategy()"></component>
</keep-alive> <!-- </keep-alive> -->
<!-- </transition>--> <!-- </transition>-->
</div> </div>
@ -235,20 +241,21 @@ onMounted(() => {
position: fixed; position: fixed;
bottom: vh(24); bottom: vh(24);
z-index: 999; z-index: 999;
left: 29.15%; left: 25.7%;
width: vw(800); width: vw(940);
height: vh(100); height: vh(100);
justify-content: space-between;
ul { ul {
//width: 100%; //width: 100%;
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
justify-content: space-between;
li { li {
list-style: none; list-style: none;
cursor: pointer; cursor: pointer;
width: 12.5%; width: 10.6%;
height: 100%; height: 100%;
background-size: 100% 100%; background-size: 100% 100%;
} }

12
src/style.scss
View File

@ -51,12 +51,12 @@ p,ul,li{
} }
&-right-box { &-right-box {
padding-right: 2.375rem; padding-right: 2.5rem;
animation: slide-out 2s ease-in-out; animation: slide-out 2s ease-in-out;
} }
&-left-box { &-left-box {
padding-left: 2.375rem; padding-left: 2.5rem;
animation: slide-out 2s ease-in-out; animation: slide-out 2s ease-in-out;
//transform: translateX(-100%); //transform: translateX(-100%);
} }
@ -174,6 +174,10 @@ p,ul,li{
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
font-size: 16px; font-size: 16px;
span:nth-child(1){
flex-basis: 65%;
text-align: center;
}
span{ span{
flex-basis: 33%; flex-basis: 33%;
text-align: center; text-align: center;
@ -196,6 +200,10 @@ p,ul,li{
align-items: center; align-items: center;
font-size: 14px; font-size: 14px;
margin-top: .3rem; margin-top: .3rem;
span:nth-child(1){
flex-basis: 65%;
text-align: center;
}
} }
} }
::-webkit-scrollbar { ::-webkit-scrollbar {

4
src/views/air-conditioning/index.vue
View File

@ -198,7 +198,7 @@ const generalSituationInterface = () =>{
getGeneralSituation().then(res=>{ getGeneralSituation().then(res=>{
systemNumList.value[0].num = res.data[0].Operation systemNumList.value[0].num = res.data[0].Operation
systemNumList.value[1].num = res.data[0].Stop 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 overviewList.value[1].num = res.data[0].Amount
}) })
} }
@ -288,7 +288,7 @@ onMounted(()=>{
</div> </div>
</div> </div>
<div v-for="(item,index) in overviewList" :class="'overview-item' + index"> <div v-for="(item,index) in overviewList" :class="'overview-item' + index">
<span class="unit">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
<p> <p>
<span class="value">{{ item.num }}</span> <span class="value">{{ item.num }}</span>
<span class="unit">{{ item.unit }}</span> <span class="unit">{{ item.unit }}</span>

190
src/views/carbonEmission/index.vue
View File

@ -29,7 +29,7 @@
v-for="(item, index) in overviewList" v-for="(item, index) in overviewList"
:class="'overview-item' + index" :class="'overview-item' + index"
> >
<span class="unit" style="margin-left: 1rem">{{ item.name }}</span> <span class="">{{ item.name }}</span>
<p class="overviewValue"> <p class="overviewValue">
<span class="value">{{ item.num }}</span> <span class="value">{{ item.num }}</span>
<span class="unit">{{ item.unit }}</span> <span class="unit">{{ item.unit }}</span>
@ -151,7 +151,11 @@ function getCarbonTrends(params) {
xData.push(item.time); xData.push(item.time);
yData.push(item.EH); 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 = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
tooltip: { tooltip: {
@ -201,14 +205,14 @@ function getCarbonTrends(params) {
// align: "right", // align: "right",
padding: [0, 10, 0, 0], padding: [0, 10, 0, 0],
}, },
min: 0, // min: 0,
max: 2000, // max: 2000,
splitNumber: 5, // splitNumber: 5,
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: "dashed", type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(255, 255, 255, 0.30)",
}, },
}, },
axisLine: { show: false }, axisLine: { show: false },
@ -265,7 +269,7 @@ const getCarbonIntensityChat = (params) => {
let yData = []; let yData = [];
params.forEach((item) => { params.forEach((item) => {
xData.push(item.time); xData.push(item.time);
yData.push(item.CarbonIntensity); yData.push(parseInt(item.CarbonIntensity));
}); });
const offsetX = 10; //bar宽 const offsetX = 10; //bar宽
const offsetY = 5; //倾斜角度 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)"],
["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 = { const option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -384,7 +392,7 @@ const getCarbonIntensityChat = (params) => {
lineStyle: { lineStyle: {
width: 1, width: 1,
type: "solid", type: "solid",
color: "rgba(255, 255, 255, 0.20)", color: "#557775",
}, },
}, },
axisTick: { axisTick: {
@ -409,13 +417,13 @@ const getCarbonIntensityChat = (params) => {
}, },
yAxis: { yAxis: {
type: "value", type: "value",
name: "单位:万tCO₂/人·年", name: "单位:万tCO₂/m²",
nameTextStyle: { nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
padding: [0, 0, 0, 35], padding: [0, 0, 0, 27],
}, },
max: 500, // max: 500,
min: 0, // min: 0,
// minInterval: 1, // minInterval: 1,
// y轴（竖直线） // y轴（竖直线）
axisLine: { axisLine: {
@ -426,7 +434,7 @@ const getCarbonIntensityChat = (params) => {
show: true, show: true,
lineStyle: { lineStyle: {
type: "dashed", type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(255, 255, 255, 0.30)",
}, },
}, },
// y轴刻度线 // y轴刻度线
@ -437,6 +445,19 @@ const getCarbonIntensityChat = (params) => {
axisLabel: { axisLabel: {
fontSize: 12, fontSize: 12,
color: "#DDFFFD", 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: [ series: [
@ -548,7 +569,7 @@ const getCarbonIntensityChat = (params) => {
symbol: "none", symbol: "none",
data: [ data: [
{ {
yAxis: 400, yAxis: Math.max(...seriesData) / 2,
lineStyle: { lineStyle: {
color: "rgba(255, 221, 0, 1)", color: "rgba(255, 221, 0, 1)",
type: "dashed", type: "dashed",
@ -572,15 +593,22 @@ const getCarbonIntensityChat = (params) => {
}; };
//各系统碳排放量统计 //各系统碳排放量统计
const getCarbonEmissionStatistics = (params) => { const getCarbonEmissionStatistics = (params) => {
let total = 0;
let xData = []; let xData = [];
let yData = []; let yData = [];
params.forEach((item) => { params.forEach((item) => {
total += item.CarbonEmission;
xData.push(item.name); xData.push(item.name);
yData.push(item.CarbonEmission); yData.push(item.CarbonEmission);
}); });
let myChart = echarts.init( console.log(total);
document.getElementById("carbonEmissionStatistics") // let myChart = echarts.init(
); // document.getElementById("carbonEmissionStatistics")
// );
let dom = document.getElementById("carbonEmissionStatistics");
dom.removeAttribute("_echarts_instance_");
let myChart;
myChart = echarts.init(dom);
let option = { let option = {
grid: { grid: {
left: "5%", 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>" + "<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 + params[0].seriesName +
"" + "" +
Number( Number(params[0].value.toFixed(2)).toLocaleString() +
(params[0].value.toFixed(4) / 10000).toFixed(2) " 万tCO₂<br/>"
).toLocaleString() +
" kWh<br/>"
); );
}, },
}, },
xAxis: { xAxis: {
max: total,
show: false, show: false,
type: "value", type: "value",
}, },
@ -649,13 +676,12 @@ const getCarbonEmissionStatistics = (params) => {
inside: true, inside: true,
textStyle: {}, textStyle: {},
formatter: function (value) { formatter: function (value) {
return ( return "{a|" + value.toLocaleString() + "}" + "{b|万tCO₂}";
"{a|" + (value / 10000).toLocaleString() + "}" + "{b|万tCO₂}"
);
}, },
rich: { rich: {
a: { a: {
fontSize: "16", fontSize: "20",
fontFamily:'D-DIN-Bold',
color: "rgba(0, 255, 240, 1)", color: "rgba(0, 255, 240, 1)",
padding: [0, 6, 0, 0], padding: [0, 6, 0, 0],
}, },
@ -693,9 +719,11 @@ const getCarbonEmissionStatistics = (params) => {
type: "bar", type: "bar",
barWidth: 10, barWidth: 10,
barGap: "-115%", barGap: "-115%",
data: [50000000, 50000000, 50000000, 50000000, 50000000], data: [total, total, total, total, total],
itemStyle: { itemStyle: {
color: "rgba(5, 33, 31, 0.32)", 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([ const optionData = ref([
// { // {
// name: "CCER", // name: "CCER",
// value: 176, // value: '35',
// }, // },
// { // {
// name: "绿电", // name: "绿电",
// value: 288, // value: '35',
// }, // },
// { // {
// name: "绿证", // name: "绿证",
// value: 88, // value: '30',
// }, // },
]); ]);
const color = [ 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(0, 140, 255, 1)",
"rgba(1, 225, 242, 1)", // "rgba(1, 225, 242, 1)",
"rgba(27, 255, 118, 1)",
]; ];
const color1 = [
"rgba(0, 140, 255, 1)",
'rgba(1, 225, 242, 1)',
"rgba(27, 255, 118, 1)"
]
const setLabel = () => { const setLabel = () => {
optionData.value.forEach((item, index) => { optionData.value.forEach((item, index) => {
item.itemStyle = { item.itemStyle = {
color: color[index], color: color[index],
}; };
console.log(color[index]);
item.label = { item.label = {
normal: { normal: {
show: true, show: true,
color: color[index], // color: color[index],
// position: "right", // position: "right",
padding: [0, -50], padding: [0, -50],
// distance:-10, // distance:-10,
@ -757,10 +800,10 @@ const setLabel = () => {
textShadowOffsetX: 0, textShadowOffsetX: 0,
textShadowOffsetY: 2, textShadowOffsetY: 2,
textShadowBlur: 5, textShadowBlur: 5,
color: color[index], // color: color[index],
}, },
d: { d: {
color: color[index], color: color1[index],
fontSize: 18, fontSize: 18,
fontWeight: 600, fontWeight: 600,
align: "left", align: "left",
@ -773,7 +816,7 @@ const setLabel = () => {
length2: 100, length2: 100,
lineStyle: { lineStyle: {
width: 1, width: 1,
color: color[index], color: color1[index],
}, },
}, },
}; };
@ -782,7 +825,12 @@ const setLabel = () => {
//碳中和 //碳中和
const getCarbonNeutrality = () => { const getCarbonNeutrality = () => {
setLabel(); 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); let option = getPie3D(optionData.value, 0, 270, 26, 30, 1);
// myChart.setOption(option); // myChart.setOption(option);
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption // 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
@ -812,10 +860,14 @@ const getCarbonNeutrality = () => {
}; };
// 碳流图 // 碳流图
const drawEnergyFlow = (params) => { 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 = [ let sourceData = [
{ {
name: "电", name: "碳",
nameValue: params[0].Amount, nameValue: params[0].Amount,
valueUnit: "万tCO₂", valueUnit: "万tCO₂",
}, },
@ -849,7 +901,7 @@ const drawEnergyFlow = (params) => {
]; ];
let itemStyleSource = []; let itemStyleSource = [];
for (let d = 0; d < sourceData.length; d++) { for (let d = 0; d < sourceData.length; d++) {
if (sourceData[d].name === "电") { if (sourceData[d].name === "碳") {
sourceData[d].label = { sourceData[d].label = {
position: "right", position: "right",
}; };
@ -879,22 +931,22 @@ const drawEnergyFlow = (params) => {
data: itemStyleSource, data: itemStyleSource,
links: [ links: [
{ {
source: "电", source: "碳",
target: "空调", target: "空调",
value: 8, value: 8,
}, },
{ {
source: "电", source: "碳",
target: "照明", target: "照明",
value: 8, value: 8,
}, },
{ {
source: "电", source: "碳",
target: "电梯", target: "电梯",
value: 8, value: 8,
}, },
{ {
source: "电", source: "碳",
target: "其他", target: "其他",
value: 8, value: 8,
}, },
@ -913,7 +965,9 @@ const drawEnergyFlow = (params) => {
params.data.nameValue + params.data.nameValue +
"}" + "}" +
" " + " " +
params.data.valueUnit "{c|" +
params.data.valueUnit +
"}"
); );
} else { } else {
return ( return (
@ -924,28 +978,36 @@ const drawEnergyFlow = (params) => {
params.data.nameValue + params.data.nameValue +
"}" + "}" +
// " " + // " " +
params.data.valueUnit "{c|" +
params.data.valueUnit +
"}"
); );
} }
}, },
rich: { rich: {
c:{
fontSize:'12',
},
a: { a: {
padding: [0, 15, 10, 0], padding: [0, 15, 10, 0],
fontSize: "14", fontSize: "14",
}, },
b: { b: {
fontFamily: 'D-DIN-Bold',
color: "rgba(91, 250, 241, 1)", color: "rgba(91, 250, 241, 1)",
fontWeight: "600", fontWeight: "600",
fontSize: "16", fontSize: "20",
}, },
name: { name: {
fontSize: 14, fontSize: 14,
// padding: [10, 0, 0, 0], // padding: [10, 0, 0, 0],
}, },
value: { value: {
fontFamily: 'D-DIN-Bold',
color: "rgba(91, 250, 241, 1)", color: "rgba(91, 250, 241, 1)",
fontWeight: "600", fontWeight: "600",
fontSize: "16", fontSize: "20",
padding: [0, 10, 0, 10], padding: [0, 10, 0, 10],
}, },
}, },
@ -1006,7 +1068,7 @@ function carboEmissionTrends() {
.then((res) => { .then((res) => {
if (res.code == 200) { if (res.code == 200) {
//碳趋势图表 //碳趋势图表
getCarbonTrends(res.data); getCarbonTrends(res.data.slice(-10));
} else { } else {
return false; return false;
} }
@ -1048,8 +1110,12 @@ function neutralization(params) {
getCarbonNeutral() getCarbonNeutral()
.then((res) => { .then((res) => {
if (res.code == 200) { if (res.code == 200) {
console.log(res.data, "碳中和数据");
optionData.value = Object.keys(res.data).map((item, index) => { 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(); getCarbonNeutrality();
} else { } else {
@ -1099,15 +1165,21 @@ onMounted(() => {
} }
} }
.overview-item0 { .overview-item0 {
padding-left:4.625rem;
padding-right: 1.3rem;
width: 24.125rem; width: 24.125rem;
height: 27%; height: 27%;
background: url("@/assets/images/carbonEmission/totalEmissions.png") no-repeat; background: url("@/assets/images/carbonEmission/totalEmissions.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content:space-between;
box-sizing: border-box;
} }
.overview-item1 { .overview-item1 {
padding-left:4.625rem;
padding-right:1.3rem;
width: 24.125rem; width: 24.125rem;
height: 27%; height: 27%;
background: url("@/assets/images/carbonEmission/carbonOffsettingAmount.png") background: url("@/assets/images/carbonEmission/carbonOffsettingAmount.png")
@ -1115,9 +1187,12 @@ onMounted(() => {
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-between;
box-sizing: border-box;
} }
.overview-item2 { .overview-item2 {
padding-left:4.625rem;
padding-right: 1.3rem;
width: 24.125rem; width: 24.125rem;
height: 27%; height: 27%;
background: url("@/assets/images/carbonEmission/carbonEmissionReduction.png") background: url("@/assets/images/carbonEmission/carbonEmissionReduction.png")
@ -1125,19 +1200,22 @@ onMounted(() => {
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-between;
box-sizing: border-box;
} }
.overviewValue { .overviewValue {
left: 10%; // left: 10%;
position: relative; position: relative;
// margin-left: 8rem;
.unit { .unit {
font-size: 0.8rem; font-size: 0.8rem;
color: rgba(221, 255, 253, 1); color: rgba(221, 255, 253, 1);
} }
.value { .value {
margin-right: 0.3rem; margin-right: 0.3rem;
font-size: 1.5rem; font-size: 1.875rem;
font-weight: 700; // font-weight: 700;
font-family: "D-DIN-Bold";
color: rgba(91, 250, 241, 1); color: rgba(91, 250, 241, 1);
} }
} }

20
src/views/drainage/index.vue
View File

@ -189,6 +189,7 @@ const operationRightList = ref([
]) ])
const waterDrainingInterface = () =>{ const waterDrainingInterface = () =>{
getWaterDraining().then(res=>{ getWaterDraining().then(res=>{
console.log(res,'排水数据');
operationLeftList.value = res.data.slice(0,7).map(el=>{ operationLeftList.value = res.data.slice(0,7).map(el=>{
return { return {
name:el.WaterName, name:el.WaterName,
@ -219,12 +220,12 @@ onMounted(()=>{
</div> </div>
<div class="page-big-box margin10"> <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> <span class="system-item-title">{{ item.name }}</span>
<div class="system-item-right"> <div class="system-item-right">
<p v-for="(s,i) in item.children"> <p v-for="(s,i) in item.children">
<span>{{ s.name }}</span> <span>{{ s.DrainingName }}</span>
<span :class="'state' + s.state"></span> <span :class="'state' + (s.DrainingState===0?'0':s.DrainingState===1?'1':'2')"></span>
</p> </p>
</div> </div>
</div> </div>
@ -236,12 +237,12 @@ onMounted(()=>{
</div> </div>
<div class="page-big-box margin10"> <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> <span class="system-item-title">{{ item.name }}</span>
<div class="system-item-right"> <div class="system-item-right">
<p v-for="(s,i) in item.children"> <p v-for="(s,i) in item.children">
<span>{{ s.name }}</span> <span>{{ s.DrainingName }}</span>
<span :class="'state' + s.state"></span> <span :class="'state' + (s.DrainingState===0?'0':s.DrainingState===1?'1':'2')"></span>
</p> </p>
</div> </div>
</div> </div>
@ -286,7 +287,7 @@ onMounted(()=>{
padding-left: 2rem; padding-left: 2rem;
padding-right: 2rem; padding-right: 2rem;
box-sizing: border-box; box-sizing: border-box;
height: 40%; height: 44%;
width: 100%; width: 100%;
//background-color: #fff; //background-color: #fff;
display: flex; display: flex;
@ -297,7 +298,7 @@ onMounted(()=>{
} }
} }
.state0, .state1 { .state0, .state1,.state2 {
width: 1.7rem; width: 1.7rem;
height: 1.7rem; height: 1.7rem;
background-size: 100% 100%; background-size: 100% 100%;
@ -310,4 +311,7 @@ onMounted(()=>{
.state1 { .state1 {
background-image: url("@/assets/images/drainage/state1.png"); background-image: url("@/assets/images/drainage/state1.png");
} }
.state2{
background-image: url("@/assets/images/drainage/state2.png");
}
</style> </style>

239
src/views/energyEfficiency/index.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted, onUnmounted, nextTick } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { import {
getTotalEnergy, getTotalEnergy,
@ -10,6 +10,8 @@ import {
getElectricityRate, getElectricityRate,
} from "@/api/energyEfficiency"; } from "@/api/energyEfficiency";
import moment from "moment"; import moment from "moment";
// import { formatter } from "element-plus";
// 各系统能耗概况 // 各系统能耗概况
const systemTab = [ const systemTab = [
{ name: "空调" }, { name: "空调" },
@ -35,12 +37,12 @@ const systemRightList = ref([
{ {
name: "今日", name: "今日",
value: "3122", value: "3122",
unit: "kWh", unit: "kgce",
}, },
{ {
name: "昨日", name: "昨日",
value: "9400", value: "9400",
unit: "kWh", unit: "kgce",
}, },
{ {
name: "同比", name: "同比",
@ -52,12 +54,12 @@ const systemRightList = ref([
{ {
name: "本月", name: "本月",
value: "3122", value: "3122",
unit: "kWh", unit: "kgce",
}, },
{ {
name: "上月", name: "上月",
value: "9400", value: "9400",
unit: "kWh", unit: "kgce",
}, },
{ {
name: "同比", name: "同比",
@ -69,12 +71,12 @@ const systemRightList = ref([
{ {
name: "今年", name: "今年",
value: "3122", value: "3122",
unit: "kWh", unit: "kgce",
}, },
{ {
name: "去年", name: "去年",
value: "9400", value: "9400",
unit: "kWh", unit: "kgce",
}, },
{ {
name: "同比", name: "同比",
@ -105,15 +107,26 @@ const toggleExhibitionLoad = (event) => {
const selectSystemTab = (item, index) => { const selectSystemTab = (item, index) => {
systemTabIndex.value = index; systemTabIndex.value = index;
systemTabName.value = item.name; systemTabName.value = item.name;
systemEnergyInterface() systemEnergyInterface();
}; };
// 能耗总量echarts // 能耗总量echarts
const drawTotalChart = (data) => { 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 = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
tooltip: {}, tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#57617B",
},
},
},
grid: { grid: {
top: "18%", top: "18%",
left: "4%", left: "4%",
@ -166,21 +179,21 @@ const drawTotalChart = (data) => {
yAxis: [ yAxis: [
{ {
type: "value", type: "value",
name: "单位:kWh", name: "单位:kgce",
// padding:[0,10,0,0], // padding:[0,10,0,0],
nameTextStyle: { nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
align: "center", align: "center",
padding: [0, 15, 0, 0], padding: [0, 15, 0, 0],
}, },
min: 0, // min: 0,
max: 500, // max: 500,
splitNumber: 5, splitNumber: 5,
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: "dashed", type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(255, 255, 255, 0.30)",
}, },
}, },
axisLine: { show: false }, axisLine: { show: false },
@ -188,18 +201,31 @@ const drawTotalChart = (data) => {
textStyle: { textStyle: {
color: "#DDFFFD", 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 }, axisTick: { show: false },
}, },
], ],
series: [ series: [
{ {
name: "异常流量", name: "能耗总量",
type: "line", type: "line",
smooth: true, //是否平滑曲线显示 smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
symbolSize: 0, // symbolSize: 0,
itemStyle: {
color: "rgba(1, 246, 139, 1)",
},
lineStyle: { lineStyle: {
color: "rgba(1, 246, 139, 1)", // 线条颜色 color: "rgba(1, 246, 139, 1)", // 线条颜色
}, },
@ -236,20 +262,44 @@ const drawTotalChart = (data) => {
}; };
// 定额管理charts // 定额管理charts
const drawManagement = (data) => { 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 = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
tooltip: {}, tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#57617B",
},
},
},
legend: { legend: {
show: true, show: true,
icon: "rect", icon: "rect",
right: "10", right: "12",
top: "5", top: "12",
layout: "vertical", layout: "vertical",
itemHeight: "10", itemHeight: "12",
// itemWidth:"18",
// itemGap: "80",
formatter: ["{a|{name}}"].join("\n"),
// itemWidth:'10', // itemWidth:'10',
textStyle: { textStyle: {
color: "rgba(221, 255, 253, 1)", color: "rgba(221, 255, 253, 1)",
rich: {
a: {
padding: [2, 0, 0, 0],
// verticalAlign: 'bottom',
},
},
}, },
}, },
grid: { grid: {
@ -277,6 +327,16 @@ const drawManagement = (data) => {
color: "#DDFFFD", color: "#DDFFFD",
margin: 40, 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 }, axisTick: { show: false },
@ -291,20 +351,20 @@ const drawManagement = (data) => {
{ {
type: "value", type: "value",
name: "单位:kgce/m²", name: "单位:kgce/m²",
// padding:[0,10,0,0],
nameTextStyle: { nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
align: "middle", align: "middle",
padding: [0, -30, 0, 0], padding: [0, -15, 0, 0],
}, },
min: 0, // min: 0,
max: 18, // max: 18,
splitNumber: 6, splitNumber: 6,
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: "dashed", type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(255, 255, 255, 0.30)",
}, },
}, },
axisLine: { show: false }, axisLine: { show: false },
@ -312,6 +372,19 @@ const drawManagement = (data) => {
textStyle: { textStyle: {
color: "#DDFFFD", 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 }, axisTick: { show: false },
}, },
@ -324,10 +397,13 @@ const drawManagement = (data) => {
//最大值和最小值 //最大值和最小值
data: [ data: [
{ {
yAxis: 9, yAxis: Math.max(...yData) / 2,
label: { label: {
show: false, show: false,
}, },
tooltip: {
show: false,
},
lineStyle: { lineStyle: {
width: 1, width: 1,
color: "rgba(255, 221, 0, 1)", color: "rgba(255, 221, 0, 1)",
@ -339,8 +415,8 @@ const drawManagement = (data) => {
}, },
type: "line", type: "line",
smooth: true, //是否平滑曲线显示 smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
symbolSize: 0, // symbolSize: 0,
itemStyle: { itemStyle: {
color: "rgba(221, 255, 253, 1)", color: "rgba(221, 255, 253, 1)",
}, },
@ -367,9 +443,7 @@ const drawManagement = (data) => {
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。 shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
}, },
// data: [5, 7, 9, 6, 2, 5, 4], // data: [5, 7, 9, 6, 2, 5, 4],
data: data.map((el) => { data: yData,
return el.EnergyIndexing;
}),
}, },
], ],
}; };
@ -381,27 +455,31 @@ const drawManagement = (data) => {
}; };
// 能效流向 // 能效流向
const drawEnergyFlow = (params) => { 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 = [ let sourceData = [
{ {
name: "电", name: "能耗",
nameValue: params[0].Amont, nameValue: params[0].Amont,
valueUnit: "kWh", valueUnit: "kgce",
}, },
{ {
name: "空调", name: "空调",
nameValue: params[0].data[0].AirConditioner, nameValue: params[0].data[0].AirConditioner,
valueUnit: "kWh", valueUnit: "kgce",
}, },
{ {
name: "照明", name: "照明",
nameValue: params[0].data[0].Illumination, nameValue: params[0].data[0].Illumination,
valueUnit: "kWh", valueUnit: "kgce",
}, },
{ {
name: "电梯", name: "电梯",
nameValue: params[0].data[0].Elevator, nameValue: params[0].data[0].Elevator,
valueUnit: "kWh", valueUnit: "kgce",
}, },
]; ];
let sangjiColor = [ let sangjiColor = [
@ -412,7 +490,7 @@ const drawEnergyFlow = (params) => {
]; ];
let itemStyleSource = []; let itemStyleSource = [];
for (let d = 0; d < sourceData.length; d++) { for (let d = 0; d < sourceData.length; d++) {
if (sourceData[d].name === "电") { if (sourceData[d].name === "能耗") {
sourceData[d].label = { sourceData[d].label = {
position: "right", position: "right",
}; };
@ -442,17 +520,17 @@ const drawEnergyFlow = (params) => {
data: itemStyleSource, data: itemStyleSource,
links: [ links: [
{ {
source: "电", source: "能耗",
target: "空调", target: "空调",
value: 8, value: 8,
}, },
{ {
source: "电", source: "能耗",
target: "照明", target: "照明",
value: 8, value: 8,
}, },
{ {
source: "电", source: "能耗",
target: "电梯", target: "电梯",
value: 8, value: 8,
}, },
@ -527,7 +605,11 @@ const drawEnergyFlow = (params) => {
}; };
//复费率 //复费率
function getExhibitionLoad(data) { 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 = { var option = {
tooltip: { tooltip: {
axisPointer: { axisPointer: {
@ -541,7 +623,7 @@ function getExhibitionLoad(data) {
borderWidth: 0, borderWidth: 0,
top: 40, top: 40,
bottom: 40, bottom: 40,
left: 40, left: 50,
right: 20, right: 20,
textStyle: { textStyle: {
color: "#fff", color: "#fff",
@ -599,13 +681,14 @@ function getExhibitionLoad(data) {
nameTextStyle: { nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
// align:"right", // align:"right",
padding: [0, 0, 0, 0], padding: [0, 30, 0, 0],
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: "dashed", type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(255,255,255, 0.30)",
}, },
}, },
axisLine: { axisLine: {
@ -621,6 +704,16 @@ function getExhibitionLoad(data) {
textStyle: { textStyle: {
color: "#DDFFFD", color: "#DDFFFD",
}, },
formatter: function (value) {
// 如果数值大于1000，则以千位分隔
if (value >= 1000) {
return value / 10000 + "万";
} else if (value >= 10000000) {
return value / 100000000 + "亿";
} else {
return value;
}
},
}, },
splitArea: { splitArea: {
show: false, show: false,
@ -823,7 +916,11 @@ function getExhibitionLoad(data) {
// 电费电价 // 电费电价
const drawElectricityPrice = (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 = { let option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -895,11 +992,11 @@ const drawElectricityPrice = (data) => {
name: "单位:kWh", name: "单位:kWh",
nameTextStyle: { nameTextStyle: {
color: "rgba(221, 255, 253, 1)", color: "rgba(221, 255, 253, 1)",
padding: [0, 0, 0, 10], padding: [0, 20, 0, 10],
}, },
// 表现为上下位置 // 表现为上下位置
type: "value", type: "value",
max: "50", // max: "50",
splitNumber: 5, splitNumber: 5,
axisLine: { axisLine: {
show: false, show: false,
@ -919,7 +1016,7 @@ const drawElectricityPrice = (data) => {
}, },
}, },
{ {
// splitNumber: splitNumber: 5,
name: "单位:元/kWh", name: "单位:元/kWh",
position: "right", // 放在右边 position: "right", // 放在右边
nameTextStyle: { nameTextStyle: {
@ -998,13 +1095,13 @@ const drawElectricityPrice = (data) => {
// 时间选择器参数 // 时间选择器参数
const dateValue = ref([ const dateValue = ref([
moment().subtract(1, "days").format("YYYY-MM-DD"),
moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD"),
moment().add(1, "days").format("YYYY-MM-DD"),
]); ]);
// 默认时间 // 默认时间
const defaultTime = ref([ const defaultTime = ref([
moment().subtract(1, "days").format("YYYY-MM-DD"),
moment().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" ? "月" : "日", date: totalEnergyDate.value === "month" ? "月" : "日",
}; };
getTotalEnergy(params).then((res) => { getTotalEnergy(params).then((res) => {
drawTotalChart(res.data); drawTotalChart(res.data.slice(-10));
}); });
}; };
// 获取能效对标数据 // 获取能效对标数据
@ -1022,7 +1119,7 @@ const energyIndexingInterface = () => {
date: managementDate.value === "month" ? "月" : "年", date: managementDate.value === "month" ? "月" : "年",
}; };
getEnergyIndexing(params).then((res) => { 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[0].value = res.data[0].DayPeak;
systemLeftList.value[1].value = res.data[0].MonthPeak; systemLeftList.value[1].value = res.data[0].MonthPeak;
systemRightList.value.forEach((el, i) => { 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; 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[1].value = res.data[0].data[i].Last;
}
el[2].value = res.data[0].data[i].Year; el[2].value = res.data[0].data[i].Year;
}); });
}); });
@ -1053,13 +1161,13 @@ const multiRateInterface = () => {
params.date = "日"; params.date = "日";
} }
getMultiRate(params).then((res) => { getMultiRate(params).then((res) => {
getExhibitionLoad(res.data); getExhibitionLoad(res.data.slice(-10));
}); });
}; };
// 获取电费电价数据 // 获取电费电价数据
const electricityRateInterface = () => { const electricityRateInterface = () => {
getElectricityRate().then((res) => { getElectricityRate().then((res) => {
drawElectricityPrice(res.data); drawElectricityPrice(res.data.slice(-10));
}); });
}; };
//事件选择 //事件选择
@ -1102,6 +1210,7 @@ onMounted(() => {
multiRateInterface(); multiRateInterface();
// getExhibitionLoad(); // getExhibitionLoad();
}); });
onUnmounted(() => {});
</script> </script>
<template> <template>
@ -1186,7 +1295,18 @@ onMounted(() => {
class="system-content-left-item" class="system-content-left-item"
> >
<p class="system-content-left-item-p1">{{ item.name }}</p> <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> </div>
<div class="system-content-right"> <div class="system-content-right">
@ -1311,6 +1431,7 @@ onMounted(() => {
&-p1 { &-p1 {
height: 29%; height: 29%;
line-height: 25px;
text-align: center; text-align: center;
font-size: 0.875rem; font-size: 0.875rem;
color: rgba(221, 255, 253, 1); color: rgba(221, 255, 253, 1);

185
src/views/energyMonitoring/index.vue
View File

@ -38,7 +38,7 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted } from "vue"; import { ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
import { import {
getRealLoad, getRealLoad,
@ -48,16 +48,26 @@ import {
getDisplayLoad, getDisplayLoad,
getLoopRanking, getLoopRanking,
} from "@/api/energyMonitoring"; } from "@/api/energyMonitoring";
import getPath from '@/utils/getPath.js'
const getImageUrl = (name) => { const getImageUrl = (name) => {
return new URL(name, import.meta.url).href; return new URL(name, import.meta.url).href;
}; };
//实时负荷 //实时负荷
const getRealTimeLoad = (data) => { const getRealTimeLoad = (data) => {
let dom = document.getElementById("realTimeLoad");
dom.removeAttribute("_echarts_instance_");
let myChart; let myChart;
myChart = echarts.init(document.getElementById("realTimeLoad")); myChart = echarts.init(dom);
const option = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
tooltip: {}, tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#57617B",
},
},
},
grid: { grid: {
top: "18%", top: "18%",
left: "4%", left: "4%",
@ -73,7 +83,7 @@ const getRealTimeLoad = (data) => {
show: true, show: true,
lineStyle: { lineStyle: {
// type:'dashed', // type:'dashed',
color: "rgba(1, 39, 37, .3)", color: "#557775",
// color: "#233e64", // color: "#233e64",
}, },
}, },
@ -96,16 +106,18 @@ const getRealTimeLoad = (data) => {
yAxis: [ yAxis: [
{ {
type: "value", type: "value",
name: "单位:kWh", name: "单位:kW",
nameTextStyle: { nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
align: "right",
padding: [0, -10, 0, 0],
}, },
splitNumber: 5, splitNumber: 5,
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: "dashed", type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(255, 255, 255, 0.20)",
}, },
}, },
axisLine: { show: false }, 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)"],
["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"], ["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
]; ];
let myChart = echarts.init( let dom = document.getElementById("dailyElectricityConsumption");
document.getElementById("dailyElectricityConsumption") dom.removeAttribute("_echarts_instance_");
); let myChart;
myChart = echarts.init(dom);
const option = { const option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -269,7 +282,7 @@ const getDailyElectricityConsumption = (data) => {
lineStyle: { lineStyle: {
width: 1, width: 1,
type: "solid", type: "solid",
color: "rgba(255, 255, 255, 0.20)", color: "#557775",
}, },
}, },
axisTick: { axisTick: {
@ -297,7 +310,8 @@ const getDailyElectricityConsumption = (data) => {
name: "单位:kWh", name: "单位:kWh",
nameTextStyle: { nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
padding: [0, 5, 0, 0], align:'right',
padding: [0, -17, 0, 0],
}, },
// minInterval: 1, // minInterval: 1,
// y轴（竖直线） // y轴（竖直线）
@ -309,7 +323,7 @@ const getDailyElectricityConsumption = (data) => {
show: true, show: true,
lineStyle: { lineStyle: {
type: "dashed", type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(255, 255, 255, 0.30)",
}, },
}, },
// y轴刻度线 // y轴刻度线
@ -438,10 +452,21 @@ const getDailyElectricityConsumption = (data) => {
//空调负荷 //空调负荷
const drawAirConditioningLoad = (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 = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
tooltip: {}, tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#57617B",
},
},
},
grid: { grid: {
top: "18%", top: "18%",
left: "4%", left: "4%",
@ -484,15 +509,14 @@ const drawAirConditioningLoad = (data) => {
nameTextStyle: { nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
align: "right", align: "right",
padding: [0, -10, 0, 0],
}, },
min: 0,
max: 2000,
splitNumber: 5, splitNumber: 5,
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: "dashed", type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(255, 255, 255, 0.30)",
}, },
}, },
axisLine: { show: false }, axisLine: { show: false },
@ -506,12 +530,15 @@ const drawAirConditioningLoad = (data) => {
], ],
series: [ series: [
{ {
name: "异常流量", name: "空调负荷",
type: "line", type: "line",
smooth: true, //是否平滑曲线显示 smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 // symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
symbolSize: 0, symbolSize: 0,
itemStyle: {
color: "#5BFAF1",
},
lineStyle: { lineStyle: {
color: "#5BFAF1", // 线条颜色 color: "#5BFAF1", // 线条颜色
}, },
@ -548,10 +575,21 @@ const drawAirConditioningLoad = (data) => {
}; };
// 展陈负荷 // 展陈负荷
const drawExhibitionLoad = (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 = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
tooltip: {}, tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#57617B",
},
},
},
grid: { grid: {
top: "18%", top: "18%",
left: "4%", left: "4%",
@ -594,15 +632,14 @@ const drawExhibitionLoad = (data) => {
nameTextStyle: { nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
align: "right", align: "right",
padding: [0, -10, 0, 0],
}, },
min: 0,
max: 2000,
splitNumber: 5, splitNumber: 5,
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: "dashed", type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(255, 255, 255, 0.30)",
}, },
}, },
axisLine: { show: false }, axisLine: { show: false },
@ -616,11 +653,14 @@ const drawExhibitionLoad = (data) => {
], ],
series: [ series: [
{ {
name: "异常流量", name: "展陈负荷",
type: "line", type: "line",
smooth: true, //是否平滑曲线显示 smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
symbolSize: 0, symbolSize: 0,
itemStyle: {
color: "rgba(1, 246, 139, 1)",
},
lineStyle: { lineStyle: {
color: "rgba(1, 246, 139, 1)", // 线条颜色 color: "rgba(1, 246, 139, 1)", // 线条颜色
@ -658,13 +698,21 @@ const drawExhibitionLoad = (data) => {
}; };
// 配电回路排名 // 配电回路排名
const drawRanking = (params) => { const drawRanking = (params) => {
let total = 0;
params.forEach((el) => {
total += el.EH;
});
let xData = []; let xData = [];
let yData = []; let yData = [];
params.forEach((item) => { params.forEach((item) => {
yData.push(item.Ranking + " " + item.DeviceName); 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 = { let option = {
grid: { grid: {
left: "5%", 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>" + "<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 + params[0].seriesName +
" : " + " : " +
Number( Number(params[0].value).toLocaleString() +
(params[0].value.toFixed(4) / 10000).toFixed(2)
).toLocaleString() +
"kWh<br/>" "kWh<br/>"
); );
}, },
@ -695,6 +741,7 @@ const drawRanking = (params) => {
xAxis: { xAxis: {
show: false, show: false,
type: "value", type: "value",
max: total,
}, },
// dataZoom: [ // dataZoom: [
// { // {
@ -721,16 +768,20 @@ const drawRanking = (params) => {
fontSize: "14", fontSize: "14",
}, },
formatter: function (value, index) { formatter: function (value, index) {
return "{a|" + value + "}"; return "{a|" + value.slice(0,4) + "}{b|" + value.slice(4) + "}";
}, },
rich: { rich: {
a: { a: {
width: 45, width: 45,
// padding: [0, 8, 0,0], // padding: [0, 8, 0,0],
fontSize: "14", fontSize: "16",
fontFamily:'title',
backgroundColor: { backgroundColor: {
image: getImageUrl("../../assets/images/rank-bg.png"), image: getImageUrl("../../assets/images/rank-bg.png"),
}, },
b:{
fontSize: "14",
}
}, },
}, },
}, },
@ -760,13 +811,14 @@ const drawRanking = (params) => {
inside: true, inside: true,
textStyle: {}, textStyle: {},
formatter: function (value) { formatter: function (value) {
return "{a|" + (value / 10000).toLocaleString() + "}" + "{b|kWh}"; return "{a|" + value.toLocaleString() + "}" + "{b|kWh}";
}, },
rich: { rich: {
a: { a: {
fontSize: "16", fontSize: "20",
color: "rgba(0, 255, 240, 1)", color: "rgba(0, 255, 240, 1)",
padding: [0, 6, 0, 0], padding: [0, 6, 0, 0],
fontFamily:'D-DIN-Bold'
}, },
b: { b: {
color: "#fff", color: "#fff",
@ -802,8 +854,10 @@ const drawRanking = (params) => {
type: "bar", type: "bar",
barWidth: 10, barWidth: 10,
barGap: "-115%", barGap: "-115%",
data: [50000000, 50000000, 50000000, 50000000, 50000000], data: [total, total, total, total, total],
itemStyle: { itemStyle: {
borderColor:'rgba(4, 24, 44, 1)',
borderWidth:2,
color: "rgba(5, 33, 31, 0.32)", color: "rgba(5, 33, 31, 0.32)",
}, },
}, },
@ -828,10 +882,21 @@ const drawLoadClassification = (item) => {
// }, // },
// { // {
// name: "三级", // 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) => { var trafficWay = item[0].list.map((el) => {
return { return {
name: el.type, name: el.type,
@ -851,6 +916,7 @@ const drawLoadClassification = (item) => {
"rgba(255, 221, 0, 1)", "rgba(255, 221, 0, 1)",
]; ];
for (var i = 0; i < trafficWay.length; i++) { for (var i = 0; i < trafficWay.length; i++) {
console.log(trafficWay[i].value);
data.push( data.push(
{ {
value: trafficWay[i].value, value: trafficWay[i].value,
@ -883,8 +949,12 @@ const drawLoadClassification = (item) => {
} }
); );
} }
var img = "/src/assets/images/energyMonitoring/loadClassification.png"; var img = "../../../src/assets/images/energyMonitoring/loadClassification.png";
let myChart = echarts.init(document.getElementById("loadClassification")); let dom = document.getElementById("loadClassification");
dom.removeAttribute("_echarts_instance_");
let myChart;
myChart = echarts.init(dom);
// let myChart = echarts.init(document.getElementById("loadClassification"));
let option = { let option = {
graphic: { graphic: {
elements: [ elements: [
@ -892,9 +962,9 @@ const drawLoadClassification = (item) => {
type: "image", type: "image",
z: 3, z: 3,
style: { style: {
image: img, image: getPath.loadClassification,
width: 170, width: 180,
height: 170, height: 180,
}, },
left: "center", left: "center",
top: "center", top: "center",
@ -916,12 +986,12 @@ const drawLoadClassification = (item) => {
}, },
}, },
{ {
text: "kw", text: unit,
x: "58%", x: "58%",
y: "45%", y: "45%",
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
fontSize: "14", fontSize: "12",
fontWeight: "100", fontWeight: "100",
color: "#FFF", color: "#FFF",
}, },
@ -947,7 +1017,7 @@ const drawLoadClassification = (item) => {
name: "", name: "",
type: "pie", type: "pie",
clockWise: false, clockWise: false,
radius: [55, 59], radius: [53, 60],
hoverAnimation: false, hoverAnimation: false,
itemStyle: { itemStyle: {
normal: { normal: {
@ -957,6 +1027,7 @@ const drawLoadClassification = (item) => {
color: "#FFFFFF", color: "#FFFFFF",
fontSize: 16, fontSize: 16,
formatter: function (params) { formatter: function (params) {
console.log(params, "xxxxxxxxxx");
var percent = 0; var percent = 0;
// var total = 0 // var total = 0
// for (var i = 0; i < trafficWay.length; i++) { // for (var i = 0; i < trafficWay.length; i++) {
@ -968,13 +1039,15 @@ const drawLoadClassification = (item) => {
if (params.name !== "") { if (params.name !== "") {
return ( return (
`{a${params.dataIndex / 2}|` + `{a${params.dataIndex / 2}|` +
percent + params.value +
"}" + "}" +
`{s0|` + `{s0|` +
unit + unit +
"}" + "}" +
"\n" + "\n" +
params.name `{s1|` +
params.name +
"}"
); );
} else { } else {
return ""; return "";
@ -1003,12 +1076,17 @@ const drawLoadClassification = (item) => {
padding: [0, 0, 10, 5], padding: [0, 0, 10, 5],
fontSize: 12, fontSize: 12,
}, },
s1: {
color: "#fff",
padding: [0, 10, 0, 0],
fontSize: 12,
},
}, },
}, },
}, },
labelLine: { labelLine: {
length: 20, length: 60,
length2: 60, length2: 70,
show: true, show: true,
color: "#00ffff", color: "#00ffff",
}, },
@ -1029,13 +1107,13 @@ const drawLoadClassification = (item) => {
// 获取实时负荷数据 // 获取实时负荷数据
const realTimeLoadInterface = () => { const realTimeLoadInterface = () => {
getRealLoad().then((res) => { getRealLoad().then((res) => {
getRealTimeLoad(res.data); getRealTimeLoad(res.data.slice(-10));
}); });
}; };
// 获取当日累计用电量数据 // 获取当日累计用电量数据
const dailyElectricityInterface = () => { const dailyElectricityInterface = () => {
getDailyElectricity().then((res) => { getDailyElectricity().then((res) => {
getDailyElectricityConsumption(res.data); getDailyElectricityConsumption(res.data.slice(-10));
}); });
}; };
// 获取负荷分类数据 // 获取负荷分类数据
@ -1047,13 +1125,13 @@ const loadClassificationInterface = () => {
// 获取空调负荷数据 // 获取空调负荷数据
const airconditioningLoadInteface = () => { const airconditioningLoadInteface = () => {
getAirconditioningLoad().then((res) => { getAirconditioningLoad().then((res) => {
drawAirConditioningLoad(res.data); drawAirConditioningLoad(res.data.slice(-10));
}); });
}; };
// 获取展陈负荷数据 // 获取展陈负荷数据
const displayLoadInterface = () => { const displayLoadInterface = () => {
getDisplayLoad().then((res) => { getDisplayLoad().then((res) => {
drawExhibitionLoad(res.data); drawExhibitionLoad(res.data.slice(-10));
}); });
}; };
// 获取配电回路数据 // 获取配电回路数据
@ -1078,6 +1156,7 @@ onMounted(() => {
//负荷分类接口 //负荷分类接口
loadClassificationInterface(); loadClassificationInterface();
}); });
onUnmounted(() => {});
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>

17
src/views/lighting/components/dialog.vue
View File

@ -11,11 +11,13 @@ const toggleControl = (event) => {
name: props.name, name: props.name,
value: "全关", value: "全关",
}; };
lightControl.value.forEach((ele) => {
setSingleSwitch(dataMap) setSingleSwitch(dataMap)
.then((res) => { .then((res) => {
if (res.code == 200) { if (res.code == 200) {
lightControl.value.forEach((ele) => {
ele.State = false; ele.State = false;
});
} else { } else {
return false; return false;
} }
@ -23,19 +25,19 @@ const toggleControl = (event) => {
.catch((err) => { .catch((err) => {
console.log(err); console.log(err);
}); });
});
} else if (event.srcElement.className === "on") { } else if (event.srcElement.className === "on") {
controlBtn.value = "on"; controlBtn.value = "on";
lightControl.value.forEach((ele) => {
let dataMap = { let dataMap = {
name: props.name, name: props.name,
value: "全开", value: "全开",
}; };
lightControl.value.forEach((ele) => {
setSingleSwitch(dataMap) setSingleSwitch(dataMap)
.then((res) => { .then((res) => {
if (res.code == 200) { if (res.code == 200) {
lightControl.value.forEach((ele) => {
ele.State = true; ele.State = true;
});
} else { } else {
return false; return false;
} }
@ -43,8 +45,6 @@ const toggleControl = (event) => {
.catch((err) => { .catch((err) => {
console.log(err); console.log(err);
}); });
});
});
} }
}; };
const props = defineProps({ const props = defineProps({
@ -60,6 +60,7 @@ const props = defineProps({
type: Array, type: Array,
}, },
}); });
console.log(props.name,props.show);
const emit = defineEmits(["update"]); const emit = defineEmits(["update"]);
const closeDialog = () => { const closeDialog = () => {
// 向父组件传值 // 向父组件传值
@ -105,12 +106,12 @@ watch(
<span>{{ props.name }}</span> <span>{{ props.name }}</span>
</div> </div>
<div class="control-btn"> <div class="control-btn">
<span <!-- <span
class="on" class="on"
:class="controlBtn === 'on' ? 'select' : ''" :class="controlBtn === 'on' ? 'select' : ''"
@click="toggleControl" @click="toggleControl"
>全开</span >全开</span
> > -->
<span <span
style="margin-left: 0.7rem" style="margin-left: 0.7rem"
class="off" class="off"

124
src/views/lighting/index.vue
View File

@ -16,17 +16,17 @@ import {
// 照明监测 // 照明监测
const lightingNumList = ref([ const lightingNumList = ref([
{ {
name: "照明四路数量", name: "照明回路数量",
num: 0, num: 0,
pic: getPath.lightTotal, pic: getPath.lightTotal,
}, },
{ {
name: "照明四路灭灯数量", name: "照明回路灭灯数量",
num: 0, num: 0,
pic: getPath.noLightNum, pic: getPath.noLightNum,
}, },
{ {
name: "照明四路亮灯数量", name: "照明回路亮灯数量",
num: 0, num: 0,
pic: getPath.lightingNum, pic: getPath.lightingNum,
}, },
@ -120,7 +120,7 @@ const drawFaultConditionsChart = (params) => {
value: params[0].Normality, value: params[0].Normality,
}, },
{ {
name: "故障", name: "离线",
value: params[0].Malfunction, value: params[0].Malfunction,
}, },
]; ];
@ -161,7 +161,12 @@ const drawFaultConditionsChart = (params) => {
); );
} }
var img = "/src/assets/images/energyMonitoring/loadClassification.png"; 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 = { let option = {
graphic: { graphic: {
elements: [ elements: [
@ -169,7 +174,7 @@ const drawFaultConditionsChart = (params) => {
type: "image", type: "image",
z: 3, z: 3,
style: { style: {
image: img, image: getPath.loadClassification,
width: 175, width: 175,
height: 175, height: 175,
}, },
@ -183,19 +188,19 @@ const drawFaultConditionsChart = (params) => {
title: [ title: [
{ {
text: total, text: total,
x: "47%", x: "48%",
y: "42%", y: "42%",
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
fontFamily: "Verdana-Bold", fontFamily: "D-DIN-Bold",
fontSize: "20", fontSize: "24",
fontWeight: "bold", fontWeight: "bold",
color: "#FFF", color: "#FFF",
}, },
}, },
{ {
text: "个", text: "个",
x: "58%", x: "55%",
y: "45%", y: "45%",
textAlign: "center", textAlign: "center",
textStyle: { textStyle: {
@ -205,7 +210,7 @@ const drawFaultConditionsChart = (params) => {
}, },
}, },
{ {
text: "照明四路数量", text: "照明回路数量",
left: "49%", left: "49%",
top: "55%", top: "55%",
textAlign: "center", textAlign: "center",
@ -264,12 +269,14 @@ const drawFaultConditionsChart = (params) => {
a0: { a0: {
color: "rgba(1, 246, 139, 1)", color: "rgba(1, 246, 139, 1)",
padding: [0, 0, 10, 0], padding: [0, 0, 10, 0],
fontSize: 15, fontSize: 20,
fontFamily:'D-DIN-Bold',
}, },
a1: { a1: {
color: color[1], color: color[1],
padding: [0, 0, 10, 0], padding: [0, 0, 10, 0],
fontSize: 15, fontSize: 20,
fontFamily:'D-DIN-Bold',
}, },
s0: { s0: {
color: "#fff", 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 = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
let colorArr; 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 = { const option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -402,7 +413,7 @@ const drawHallLightingChart = (params) => {
lineStyle: { lineStyle: {
width: 1, width: 1,
type: "solid", type: "solid",
color: "rgba(255, 255, 255, 0.20)", color: "#557775",
}, },
}, },
axisTick: { axisTick: {
@ -442,7 +453,7 @@ const drawHallLightingChart = (params) => {
show: true, show: true,
lineStyle: { lineStyle: {
type: "dashed", type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(255, 255, 255, 0.30)",
}, },
}, },
// y轴刻度线 // y轴刻度线
@ -582,6 +593,18 @@ const drawHallLightingChart = (params) => {
}; };
// 照明负荷 // 照明负荷
const drawLightLoadChart = (params) => { const drawLightLoadChart = (params) => {
let boforeDate =
lightLoadDate.value == "year"
? "去年"
: lightLoadDate.value == "month"
? "上月"
: "昨日";
let nowDate =
lightLoadDate.value == "year"
? "今年"
: lightLoadDate.value == "month"
? "本月"
: "今日";
let xData = []; let xData = [];
let toDay = []; let toDay = [];
let lastDay = []; let lastDay = [];
@ -590,7 +613,11 @@ const drawLightLoadChart = (params) => {
toDay.push(item.TP); toDay.push(item.TP);
lastDay.push(item.YP); 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 = { let option = {
grid: { grid: {
top: "18%", top: "18%",
@ -610,8 +637,9 @@ const drawLightLoadChart = (params) => {
legend: [ legend: [
{ {
icon: "rect", icon: "rect",
top: 5, top: 10,
left: "right", // left: "right",
right:10,
orient: "horizontal", orient: "horizontal",
// data: ['进水量', '出水量'], // data: ['进水量', '出水量'],
borderRadius: 20, borderRadius: 20,
@ -644,12 +672,20 @@ const drawLightLoadChart = (params) => {
textStyle: { textStyle: {
color: "#DDFFFD", //X轴文字颜色 color: "#DDFFFD", //X轴文字颜色
}, },
formatter: function (value) {
// 如果数值大于1000，则以千位分隔
if (value >= 1000) {
return value / 10000 + "万";
} else if (value >= 10000000) {
return value / 100000000 + "亿";
} else {
return value;
}
},
}, },
}, },
yAxis: [ yAxis: [
{ {
min: 0,
max: 500,
type: "value", type: "value",
name: "单位/kW", name: "单位/kW",
nameTextStyle: { nameTextStyle: {
@ -663,19 +699,29 @@ const drawLightLoadChart = (params) => {
axisLabel: { axisLabel: {
color: "#DDFFFD", color: "#DDFFFD",
fontSize: 12, fontSize: 12,
formatter: function (value) {
// 如果数值大于1000，则以千位分隔
if (value >= 1000) {
return value / 10000 + "万";
} else if (value >= 10000000) {
return value / 100000000 + "亿";
} else {
return value;
}
},
}, },
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: "dashed", type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(255, 255, 255, 0.30)",
}, },
}, },
}, },
], ],
series: [ series: [
{ {
name: "昨日", name: boforeDate,
type: "line", type: "line",
//显示所有图形。 //显示所有图形。
//标记的图形为实心圆 //标记的图形为实心圆
@ -695,7 +741,7 @@ const drawLightLoadChart = (params) => {
data: lastDay, data: lastDay,
}, },
{ {
name: "今日", name: nowDate,
type: "line", type: "line",
symbol: "none", symbol: "none",
itemStyle: { itemStyle: {
@ -704,11 +750,11 @@ const drawLightLoadChart = (params) => {
borderWidth: "2", borderWidth: "2",
borderColor: "#91cc75", borderColor: "#91cc75",
normal: { normal: {
color: "#91cc75", //拐点颜色 color: "rgba(1, 246, 139, 1)", //拐点颜色
}, },
}, },
lineStyle: { lineStyle: {
color: "#91cc75", color: "rgba(1, 246, 139, 1)",
}, },
data: toDay, data: toDay,
}, },
@ -743,7 +789,8 @@ function lightingCircuit() {
.then((res) => { .then((res) => {
if (res.code == 200) { if (res.code == 200) {
res.data.forEach((item) => { 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; lightDetail.value = res.data;
} else { } else {
@ -765,7 +812,7 @@ function lightingLoad() {
getLightingLoad({ date }) getLightingLoad({ date })
.then((res) => { .then((res) => {
if (res.code == 200) { if (res.code == 200) {
drawLightLoadChart(res.data); drawLightLoadChart(res.data.slice(-10));
} else { } else {
return false; return false;
} }
@ -869,6 +916,7 @@ onMounted(() => {
v-for="(item, index) in floorList" v-for="(item, index) in floorList"
@click="toggleFloor(item, index)" @click="toggleFloor(item, index)"
:class="index === floorIndex ? 'floor-select' : 'floor-default'" :class="index === floorIndex ? 'floor-select' : 'floor-default'"
:key="index"
> >
{{ item.name }} {{ item.name }}
</div> </div>
@ -914,7 +962,7 @@ onMounted(() => {
> >
<span class="name">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
<span>{{ item.location }}</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> </div>
</div> </div>
@ -955,12 +1003,12 @@ onMounted(() => {
<div class="title margin10"> <div class="title margin10">
<span>照明控制</span> <span>照明控制</span>
<p class="control-btn"> <p class="control-btn">
<span <!-- <span
:class="controlBtn === 'on' ? 'select' : ''" :class="controlBtn === 'on' ? 'select' : ''"
class="on" class="on"
@click="toggleControl" @click="toggleControl"
>全开</span >全开</span
> > -->
<span <span
:class="controlBtn === 'off' ? 'select' : ''" :class="controlBtn === 'off' ? 'select' : ''"
class="off" class="off"
@ -1014,7 +1062,9 @@ onMounted(() => {
height: 4.375rem; height: 4.375rem;
} }
} }
.light-item:nth-child(2n){
padding-left: 1.2rem;
}
.light-item { .light-item {
display: flex; display: flex;
flex-basis: 50%; flex-basis: 50%;
@ -1044,12 +1094,17 @@ onMounted(() => {
display: block; display: block;
font-size: 0.75rem; font-size: 0.75rem;
} }
.num{
font-family: 'D-DIN-Bold';
font-size: 1.25rem;
}
} }
} }
//照明回路详情 //照明回路详情
.state0, .state0,
.state1 { .state1,
.state2 {
width: 1.1rem; width: 1.1rem;
height: 1.1rem; height: 1.1rem;
display: block; display: block;
@ -1064,6 +1119,9 @@ onMounted(() => {
.state1 { .state1 {
background-image: url("@/assets/images/lighting/state1.png"); background-image: url("@/assets/images/lighting/state1.png");
} }
.state2 {
background-image: url("@/assets/images/lighting/state2.png");
}
//照明控制 //照明控制
.control { .control {

152
src/views/overview/index.vue
View File

@ -11,8 +11,7 @@ import {
getSystemRanking, getSystemRanking,
} from "@/api/overview"; } from "@/api/overview";
import getPath from "@/utils/getPath.js"; import getPath from "@/utils/getPath.js";
const emit = defineEmits(["getHeart"]);
console.log(getPath)
// 实时负荷 // 实时负荷
const realTimeLoad = ref([ const realTimeLoad = ref([
{ pic: getPath.roomnum, name: "配电室数量", value: 8, unit: "个" }, { pic: getPath.roomnum, name: "配电室数量", value: 8, unit: "个" },
@ -21,17 +20,17 @@ const realTimeLoad = ref([
]); ]);
// 气象站 // 气象站
const weatherStation = ref([ const weatherStation = ref([
{ pic: getPath.rain, name: "雨量", value: 100, unit: "mm" }, { pic: getPath.rain, name: "雨量", value: 100 },
{ pic: getPath.rainsnow, name: "雨雪", value: "实际取值", unit: "mm" }, { pic: getPath.rainsnow, name: "雨雪", value: "实际取值" },
{ pic: getPath.wind, name: "风向", value: "东南风" }, { pic: getPath.wind, name: "风向", value: "东南风" },
{ pic: getPath.illuminance, name: "光照度", value: 101, unit: "lux" }, { pic: getPath.illuminance, name: "光照度", value: 101, unit: "万Lux" },
{ pic: getPath.windspeed, name: "风速", value: "东南风3级" }, { pic: getPath.windspeed, name: "风速", value: "东南风3级", unit: "m/s" },
{ pic: getPath.air, name: "空气质量", value: "优" }, { pic: getPath.air, name: "空气质量", value: "优", unit: "ug/m³" },
]); ]);
// const getImageUrl=(name)=>{ // const getImageUrl=(name)=>{
// return `url(${new URL(name, import.meta.url).href})` // return `url(${new URL(name, import.meta.url).href})`
// } // }
const windList = ref(["北", "东北", "东", "东南", "南", "西南", "西", "西北"]);
// 用电量列表 // 用电量列表
const powerList = ref([]); const powerList = ref([]);
onMounted(() => { onMounted(() => {
@ -49,7 +48,7 @@ onMounted(() => {
// getCarbonEmissionEcahrts(); // getCarbonEmissionEcahrts();
}); });
// 用电量时间切换 // 用电量时间切换
const powerDate = ref("year"); const powerDate = ref("month");
const togglePower = (event) => { const togglePower = (event) => {
powerDate.value = event.srcElement.className; powerDate.value = event.srcElement.className;
@ -63,10 +62,21 @@ const toggleCarbonEmission = (event) => {
CarbonEmissionInterface(); CarbonEmissionInterface();
}; };
const drawPowerEcharts = (item) => { 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 = { const option = {
// backgroundColor: "#05224d", // backgroundColor: "#05224d",
tooltip: {}, tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#57617B",
},
},
},
grid: { grid: {
top: "18%", top: "18%",
left: "4%", left: "4%",
@ -86,6 +96,7 @@ const drawPowerEcharts = (item) => {
// color: "#233e64", // color: "#233e64",
}, },
}, },
axisLabel: { axisLabel: {
//坐标轴刻度标签的相关设置 //坐标轴刻度标签的相关设置
textStyle: { textStyle: {
@ -108,15 +119,14 @@ const drawPowerEcharts = (item) => {
name: "单位:kWh", name: "单位:kWh",
nameTextStyle: { nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
padding: [0, 15, 0, 0],
}, },
min: 0,
max: 500,
splitNumber: 5, splitNumber: 5,
splitLine: { splitLine: {
show: true, show: true,
lineStyle: { lineStyle: {
type: "dashed", type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(255, 255, 255, 0.20)",
}, },
}, },
axisLine: { show: false }, axisLine: { show: false },
@ -124,23 +134,39 @@ const drawPowerEcharts = (item) => {
textStyle: { textStyle: {
color: "#DDFFFD", 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 }, axisTick: { show: false },
}, },
], ],
series: [ series: [
{ {
name: "异常流量", name: "用电量",
type: "line", type: "line",
smooth: true, //是否平滑曲线显示 smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆 symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
symbolSize: 0, // symbolSize: 8,
showSymbol: true,
lineStyle: { lineStyle: {
normal: { normal: {
color: "#5BFAF1", // 线条颜色 color: "#5BFAF1", // 线条颜色
}, },
}, },
itemStyle: {
normal: {
color: "#5BFAF1",
},
},
areaStyle: { areaStyle: {
//区域填充样式 //区域填充样式
normal: { normal: {
@ -175,7 +201,15 @@ const drawPowerEcharts = (item) => {
}); });
}; };
const drawRankEcharts = (data) => { 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 = { let option = {
grid: { grid: {
left: "5%", 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>" + "<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 + params[0].seriesName +
" : " + " : " +
Number( Number(params[0].value).toLocaleString() +
(params[0].value.toFixed(4) / 10000).toFixed(2) " kWh<br/>"
).toLocaleString() +
" 万元<br/>"
); );
}, },
}, },
xAxis: { xAxis: {
show: false, show: false,
type: "value", type: "value",
max: total,
}, },
yAxis: [ yAxis: [
{ {
@ -247,7 +280,7 @@ const drawRankEcharts = (data) => {
inside: true, inside: true,
textStyle: {}, textStyle: {},
formatter: function (value) { formatter: function (value) {
return "{a|" + (value / 10000).toLocaleString() + "}" + "{b|kWh}"; return "{a|" + value + "}" + "{b|kWh}";
}, },
rich: { rich: {
a: { a: {
@ -269,7 +302,7 @@ const drawRankEcharts = (data) => {
], ],
series: [ series: [
{ {
name: "金额", name: "用电",
type: "bar", type: "bar",
zlevel: 1, zlevel: 1,
itemStyle: { itemStyle: {
@ -295,8 +328,10 @@ const drawRankEcharts = (data) => {
type: "bar", type: "bar",
barWidth: 10, barWidth: 10,
barGap: "-115%", barGap: "-115%",
data: [50000000, 50000000, 50000000, 50000000, 50000000], data: [total, total, total, total, total],
itemStyle: { itemStyle: {
borderColor:'rgba(4, 24, 44, 1)',
borderWidth:2,
color: "rgba(5, 33, 31, 0.32)", 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)"],
["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 = { const option = {
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -417,13 +456,15 @@ function getCarbonEmissionEcahrts(data) {
type: "category", type: "category",
data: xAxisData, data: xAxisData,
axisLine: { axisLine: {
//坐标轴轴线相关设置。数学上的x轴
show: true, show: true,
lineStyle: { lineStyle: {
width: 1, // type:'dashed',
type: "solid", color: "#557775",
color: "rgba(255, 255, 255, 0.20)", // color: "#233e64",
}, },
}, },
axisTick: { axisTick: {
show: false, show: false,
}, },
@ -446,7 +487,7 @@ function getCarbonEmissionEcahrts(data) {
}, },
yAxis: { yAxis: {
type: "value", type: "value",
name: "单位:kWh", name: "单位:tCO₂",
nameTextStyle: { nameTextStyle: {
color: "#DDFFFD", color: "#DDFFFD",
padding: [0, 5, 0, 0], padding: [0, 5, 0, 0],
@ -461,7 +502,7 @@ function getCarbonEmissionEcahrts(data) {
show: true, show: true,
lineStyle: { lineStyle: {
type: "dashed", type: "dashed",
color: "rgba(1, 39, 37, 0.30)", color: "rgba(255, 255, 255, 0.20)",
}, },
}, },
// y轴刻度线 // y轴刻度线
@ -472,6 +513,17 @@ function getCarbonEmissionEcahrts(data) {
axisLabel: { axisLabel: {
fontSize: 12, fontSize: 12,
color: "#DDFFFD", 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: [ series: [
@ -594,7 +646,7 @@ const powerInterface = () => {
}; };
getPower(params).then((res) => { getPower(params).then((res) => {
// 渲染用电量图表 // 渲染用电量图表
drawPowerEcharts(res.data); drawPowerEcharts(res.data.slice(-10));
}); });
}; };
// 获取实时负荷 // 获取实时负荷
@ -614,11 +666,20 @@ const realtimeLoadInterface = () => {
// 获取气象站数据 // 获取气象站数据
const stationInterface = () => { const stationInterface = () => {
getMeteorologicalStation().then((res) => { getMeteorologicalStation().then((res) => {
res.data.forEach((el) => {
if (el.name === "空气温度") {
emit("getHeart", el.value);
}
});
weatherStation.value.forEach((item) => { weatherStation.value.forEach((item) => {
res.data.forEach((el) => { res.data.forEach((el) => {
if (el.name.indexOf(item.name) !== -1) { if (el.name.indexOf(item.name) !== -1) {
if (el.name === "光照度") {
item.value = (el.value / 10000).toFixed(2);
} else {
item.value = el.value; item.value = el.value;
} }
}
}); });
}); });
}); });
@ -638,7 +699,6 @@ const CarbonEmissionInterface = () => {
getCarbonEmissionEcahrts(res.data); getCarbonEmissionEcahrts(res.data);
}); });
}; };
</script> </script>
<template> <template>
@ -704,9 +764,11 @@ const CarbonEmissionInterface = () => {
v-for="(item, index) in realTimeLoad" v-for="(item, index) in realTimeLoad"
:style="'background-image:url(' + item.pic + ')'" :style="'background-image:url(' + item.pic + ')'"
> >
<span class="unit">{{ item.name }}</span> <span class="name">{{ item.name }}</span>
<p> <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> <span class="unit">{{ item.unit }}</span>
</p> </p>
</li> </li>
@ -723,8 +785,20 @@ const CarbonEmissionInterface = () => {
<span>{{ item.name }}</span> <span>{{ item.name }}</span>
</p> </p>
<p> <p>
<span class="wea-value">{{ item.value }}</span <span
><span class="unit" v-if="item.unit">{{ item.unit }}</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> </p>
</li> </li>
</ul> </ul>
@ -757,7 +831,7 @@ const CarbonEmissionInterface = () => {
box-sizing: border-box; box-sizing: border-box;
.value { .value {
margin-right: 0.7rem; margin-right: 0.7rem;
font-size: 1.5rem; font-size: 1.875rem;
font-weight: 700; font-weight: 700;
color: rgba(91, 250, 241, 1); color: rgba(91, 250, 241, 1);
} }

2
vite.config.js
View File

@ -23,7 +23,7 @@ export default defineConfig({
proxy: { proxy: {
// https://cn.vitejs.dev/config/#server-proxy // https://cn.vitejs.dev/config/#server-proxy
'/dev-api': { '/dev-api': {
target: 'http://172.16.1.134:8021/', target: 'http://172.16.1.253:1234/',
changeOrigin: true, changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '') rewrite: (p) => p.replace(/^\/dev-api/, '')
} }