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

Merge branch 'master' of http://172.16.1.12/luoshiwen/long_IslandOcean

This commit is contained in:
luoshiwen 2024-03-11 15:11:41 +08:00
parent d2a5b4ece5 4a716021e5
commit e0aaa4aa8f
5 changed files with 336 additions and 292 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/api/carbonEmission.js Normal file
View File

@ -0,0 +1,47 @@
import http from '@/utils/http'
//总览
export function getCarbonOverview(params) {
return http({
url: '/api/GetCarbonOverview',
method: 'get',
params
})
}
//碳流图
export function getCarbonFlux() {
return http({
url: '/api/GetCarbonFlux',
method: 'get',
})
}
//碳排放趋势
export function getCarbonTrend(params) {
return http({
url: '/api/GetCarbonTrend',
method: 'get',
params
})
}
//碳排放强度
export function getCarbonIntensity() {
return http({
url: '/api/GetCarbonIntensity',
method: 'get',
})
}
//各系统碳排放统计
export function getSystemPurge() {
return http({
url: '/api/GetSystemPurge',
method: 'get',
})
}
//碳中和
export function getCarbonNeutral() {
return http({
url: '/api/GetCarbonNeutral',
method: 'get',
})
}

17
src/api/screen.js Normal file
View File

@ -0,0 +1,17 @@
import http from '@/utils/http'
//故障报警
export function getBigScreen(){
return http({
url:'/api/GetBigScreen',
method:'get',
})
}
// 运行状态
export function getOperatingState(){
return http({
url:'/api/GetOperatingState',
method:'get',
})
}

54
src/utils/carbonNeutrality.js
View File

@ -27,7 +27,7 @@ const getPie3D = (
});
// 为每一个饼图数据，生成一个 series-surface 配置
for (let i = 0; i < pieData.length; i++) {
sumValue += pieData[i].value;
sumValue += Number(pieData[i].value);
const seriesItem = {
name:
typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
@ -117,32 +117,32 @@ const getPie3D = (
position: "outside",
formatter: "{b} \n{c} {d}%",
},
tooltip: {
backgroundColor: "#033b77",
borderColor: "#21f2c4",
textStyle: {
color: "#fff",
fontSize: 13,
},
formatter: (params) => {
if (
params.seriesName !== "mouseoutSeries" &&
params.seriesName !== "信用评价"
) {
// console.log(option.series,params.seriesName,'option.series[params.seriesIndex].pieData');
const bfb = (
(option.series[params.seriesIndex].pieData.endRatio -
option.series[params.seriesIndex].pieData.startRatio) *
100
).toFixed(2);
return (
`${params.seriesName}<br/>` +
`<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
`${bfb}%`
);
}
},
},
// tooltip: {
// backgroundColor: "#033b77",
// borderColor: "#21f2c4",
// textStyle: {
// color: "#fff",
// fontSize: 13,
// },
// formatter: (params) => {
// if (
// params.seriesName !== "mouseoutSeries" &&
// params.seriesName !== "信用评价"
// ) {
// // console.log(option.series,params.seriesName,'option.series[params.seriesIndex].pieData');
// const bfb = (
// (option.series[params.seriesIndex].pieData.endRatio -
// option.series[params.seriesIndex].pieData.startRatio) *
// 100
// ).toFixed(2);
// return (
// `${params.seriesName}<br/>` +
// `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
// `${bfb}%`
// );
// }
// },
// },
xAxis3D: {
min: -1,
max: 1,

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

@ -88,7 +88,14 @@ import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import "echarts-gl";
import { getPie3D, getParametricEquation } from "@/utils/carbonNeutrality";
import {
getCarbonOverview,
getCarbonFlux,
getCarbonTrend,
getCarbonIntensity,
getSystemPurge,
getCarbonNeutral,
} from "@/api/carbonEmission";
const overviewDate = ref([
{
name: "年",
@ -119,10 +126,12 @@ const overviewList = ref([
//总览切换时间
function switchDate(index) {
activeDate.value = index;
getOverview();
}
//碳趋势切换时间
function trandSwitchDate(index) {
trendActiveDate.value = index;
carboEmissionTrends();
}
//碳趋势
const trendActiveDate = ref(0);
@ -135,11 +144,22 @@ const trendDate = ref([
},
]);
//碳趋势图表
function getCarbonTrends() {
function getCarbonTrends(params) {
let xData = [];
let yData = [];
params.forEach((item) => {
xData.push(item.time);
yData.push(item.EH);
});
let myChart = echarts.init(document.getElementById("carbonTrends"));
const option = {
// backgroundColor: "#05224d",
tooltip: {},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
top: "18%",
left: "4%",
@ -169,7 +189,7 @@ function getCarbonTrends() {
axisTick: { show: false },
boundaryGap: true,
data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
data: xData,
},
],
yAxis: [
@ -202,7 +222,7 @@ function getCarbonTrends() {
],
series: [
{
name: "异常流量",
name: "碳排放量",
type: "line",
smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
@ -229,7 +249,7 @@ function getCarbonTrends() {
shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
},
data: [200, 300, 400, 500, 600, 700, 800],
data: yData,
},
],
};
@ -240,7 +260,13 @@ function getCarbonTrends() {
});
}
//碳排放强度
const getCarbonIntensity = () => {
const getCarbonIntensityChat = (params) => {
let xData = [];
let yData = [];
params.forEach((item) => {
xData.push(item.time);
yData.push(item.CarbonIntensity);
});
const offsetX = 10; //bar宽
const offsetY = 5; //倾斜角度
// 绘制左侧面
@ -274,7 +300,7 @@ const getCarbonIntensity = () => {
const xAxisPoint = shape.xAxisPoint;
const c1 = [shape.x + 7, shape.y];
const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 5];
const c4 = [shape.x + 7 + 7, shape.y - 5];
ctx
.moveTo(c1[0], c1[1])
@ -309,8 +335,8 @@ const getCarbonIntensity = () => {
echarts.graphic.registerShape("CubeLeft", CubeLeft);
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);
let xAxisData = ["1月", "2月", "3月", "4月", "5月", "6月", "7月"];
let seriesData = [100, 200, 400, 250, 360, 250, 340];
let xAxisData = xData;
let seriesData = yData;
// 绿色渐变
// let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
// 蓝色渐变
@ -545,7 +571,13 @@ const getCarbonIntensity = () => {
});
};
//各系统碳排放量统计
const getCarbonEmissionStatistics = () => {
const getCarbonEmissionStatistics = (params) => {
let xData = [];
let yData = [];
params.forEach((item) => {
xData.push(item.name);
yData.push(item.CarbonEmission);
});
let myChart = echarts.init(
document.getElementById("carbonEmissionStatistics")
);
@ -603,7 +635,7 @@ const getCarbonEmissionStatistics = () => {
axisLine: {
show: false,
},
data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"],
data: xData,
},
{
type: "category",
@ -633,7 +665,7 @@ const getCarbonEmissionStatistics = () => {
},
},
},
data: [50000000, 22000000, 10000000, 5000000, 1],
data: yData,
},
],
series: [
@ -654,7 +686,7 @@ const getCarbonEmissionStatistics = () => {
]),
},
barWidth: 8,
data: [50000000, 22000000, 10000000, 5000000, 200],
data: yData,
},
{
name: "背景",
@ -675,18 +707,18 @@ const getCarbonEmissionStatistics = () => {
});
};
const optionData = ref([
{
name: "CCER",
value: 176,
},
{
name: "绿电",
value: 288,
},
{
name: "绿证",
value: 88,
},
// {
// name: "CCER",
// value: 176,
// },
// {
// name: "绿电",
// value: 288,
// },
// {
// name: "绿证",
// value: 88,
// },
]);
const color = [
"rgba(0, 140, 255, 1)",
@ -751,8 +783,7 @@ const setLabel = () => {
const getCarbonNeutrality = () => {
setLabel();
let myChart = echarts.init(document.getElementById("carbonNeutrality"));
let option = getPie3D(optionData.value, 0, 270, 26, 40, 1);
let option = getPie3D(optionData.value, 0, 270, 26, 30, 1);
// myChart.setOption(option);
// 是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
option.series.push({
@ -765,7 +796,7 @@ const getCarbonNeutrality = () => {
lineHeight: 20,
},
startAngle: -40, // 起始角度，支持范围[0, 360]。
clockwise: false, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
clockwise: true, // 饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
radius: ["20%", "60%"],
center: ["50%", "50%"],
data: optionData.value,
@ -778,35 +809,34 @@ const getCarbonNeutrality = () => {
window.addEventListener("resize", function () {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
// bindListen(myChart);
};
// 碳流图
const drawEnergyFlow = () => {
const drawEnergyFlow = (params) => {
let myChart = echarts.init(document.getElementById("energyFlow"));
let sourceData = [
{
name: "电",
nameValue: 1562,
nameValue: params[0].Amount,
valueUnit: "万tCO₂",
},
{
name: "空调",
nameValue: 562,
nameValue: params[0].data[0].AirConditioner,
valueUnit: "万tCO₂",
},
{
name: "照明",
nameValue: 490,
nameValue: params[0].data[0].Lighting,
valueUnit: "万tCO₂",
},
{
name: "电梯",
nameValue: 510,
nameValue: params[0].data[0].Elevator,
valueUnit: "万tCO₂",
},
{
name: "其他",
nameValue: 320,
nameValue: params[0].data[0].Other,
valueUnit: "万tCO₂",
},
];
@ -937,18 +967,113 @@ const drawEnergyFlow = () => {
myChart.resize(); // 调用 resize 函数进行自适应大小调整
});
};
//总览数据
function getOverview() {
let date = activeDate.value == 0 ? "年" : "月";
getCarbonOverview({ date })
.then((res) => {
if (res.code == 200) {
overviewList.value[0].num = res.data[0].TotalRelease;
overviewList.value[1].num = res.data[0].CarbonOffset;
overviewList.value[2].num = res.data[0].CarbonReduction;
} else {
return false;
}
})
.catch((err) => {
console.log(err);
});
}
//碳流图
function carbonFlowChart(params) {
getCarbonFlux()
.then((res) => {
if (res.code == 200) {
//碳流图
drawEnergyFlow(res.data);
} else {
return false;
}
})
.catch((err) => {
console.log(err);
});
}
//碳排放趋势
function carboEmissionTrends() {
let date = trendActiveDate.value == 0 ? "月" : "日";
getCarbonTrend({ date })
.then((res) => {
if (res.code == 200) {
//碳趋势图表
getCarbonTrends(res.data);
} else {
return false;
}
})
.catch((err) => {
console.log(err);
});
}
//碳排放强度
function carbonStrength() {
getCarbonIntensity()
.then((res) => {
if (res.code == 200) {
getCarbonIntensityChat(res.data);
} else {
return false;
}
})
.catch((err) => {
console.log(err);
});
}
//各系统碳排放量统计
function eachSystem() {
getSystemPurge()
.then((res) => {
if (res.code == 200) {
getCarbonEmissionStatistics(res.data);
} else {
return false;
}
})
.catch((err) => {
console.log(err);
});
}
//碳中和
function neutralization(params) {
getCarbonNeutral()
.then((res) => {
if (res.code == 200) {
optionData.value = Object.keys(res.data).map((item, index) => {
return { name: res.data[index].name, value: res.data[index].CarbonNeutral };
});
getCarbonNeutrality();
} else {
return false;
}
})
.catch((err) => {
console.log(err);
});
}
//加载完dom执行
onMounted(() => {
//碳趋势图表
getCarbonTrends();
//总览
getOverview();
//碳流图
carbonFlowChart();
//碳排放趋势
carboEmissionTrends();
//碳排放强度
getCarbonIntensity();
carbonStrength();
//各系统碳排放量统计
getCarbonEmissionStatistics();
eachSystem();
//碳中和
getCarbonNeutrality();
// 碳流图
drawEnergyFlow();
neutralization();
});
</script>

291
src/views/screen/index.vue
View File

@ -1,231 +1,84 @@
<script setup>
import { ref, onMounted } from "vue";
const faultAlarmList = ref([
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED1",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED2",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED3",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED4",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED4",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED4",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED4",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED4",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED4",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED4",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED4",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED4",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED4",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED4",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED4",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED4",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED4",
},
{
location: "1楼中庭",
time: "2023-11-28 16:58:02",
name: "LED4",
},
]);
const runTimeList = ref([
{
name: "西大厅1",
value: false,
},
{
name: "西大厅2",
value: true,
},
{
name: "西大厅3",
value: true,
},
{
name: "西大厅4",
value: true,
},
{
name: "西大厅5",
value: false,
},
{
name: "西大厅6",
value: true,
},
{
name: "西大厅7",
value: true,
},
{
name: "西大厅8",
value: true,
},
{
name: "西大厅9",
value: false,
},
{
name: "西大厅10",
value: true,
},
{
name: "西大厅11",
value: true,
},
{
name: "西大厅12",
value: true,
},
{
name: "西大厅13",
value: false,
},
{
name: "西大厅14",
value: true,
},
{
name: "西大厅15",
value: true,
},
{
name: "西大厅16",
value: true,
},
{
name: "西大厅17",
value: false,
},
{
name: "西大厅18",
value: true,
},
{
name: "西大厅19",
value: true,
},
{
name: "西大厅20",
value: true,
},
{
name: "西大厅21",
value: false,
},
{
name: "西大厅22",
value: true,
},
{
name: "西大厅23",
value: true,
},
{
name: "西大厅24",
value: true,
},
]);
import { getOperatingState, getBigScreen } from "@/api/screen";
const faultAlarmList = ref([]);
const runTimeList = ref([]);
// 楼层控制
const floorList = ref(
[{
name: '一层'
const floorList = ref([
{
name: "一层",
},
{
name: '二层'
name: "二层",
},
{
name: '三层'
}
]
)
const floorIndex = ref(-1)
const emit = defineEmits(["sendVal"])
name: "三层",
},
]);
const floorIndex = ref(-1);
const emit = defineEmits(["sendVal"]);
// 楼层选择方法
const toggleFloor = (item,index) => {
if(item.name==="一层"){
emit('sendVal',10)
}else if(item.name === "二层"){
emit('sendVal',11)
}else if(item.name === "三层"){
emit('sendVal',12)
const toggleFloor = (item, index) => {
if (item.name === "一层") {
emit("sendVal", 10);
} else if (item.name === "二层") {
emit("sendVal", 11);
} else if (item.name === "三层") {
emit("sendVal", 12);
}
floorIndex.value = index
floorIndex.value = index;
};
//初始化获取故障报警数据
function faultalarm() {
getBigScreen().then((res)=>{
if (res.code == 200) {
faultAlarmList.value = res.data
}else{
return false
}
}).catch((err)=>{
console.log(err);
})
}
//初始化获取运行状态数据
function runningState() {
getOperatingState()
.then((res) => {
if (res.code == 200) {
res.data.forEach((item) => {
if (item.State == "1") {
item.State = true;
} else {
item.State = false;
}
});
runTimeList.value = res.data;
} else {
return false;
}
})
.catch((err) => {
console.log(err);
});
}
onMounted(() => {
//获取报警数据、
faultalarm()
//获取运行状态
runningState();
});
</script>
<template>
<div class="page m100">
<!-- 层级控制 -->
<div class="floor">
<div v-for="(item,index) in floorList" :class="index===floorIndex?'floor-select':'floor-default'"
@click="toggleFloor(item,index)">{{ item.name }}
<div
v-for="(item, index) in floorList"
:class="index === floorIndex ? 'floor-select' : 'floor-default'"
@click="toggleFloor(item, index)"
>
{{ item.name }}
</div>
</div>
<div class="page-left-box">
@ -242,9 +95,9 @@ const toggleFloor = (item,index) => {
v-for="(item, index) in faultAlarmList"
:key="index"
>
<span class="name">{{ item.name }}</span>
<span class="name">{{ item.Device }}</span>
<div class="content">
<span class="location">地点：{{ item.location }}</span>
<span class="location">地点：{{ item.Place }}</span>
<span class="time">时间：{{ item.time }}</span>
</div>
</div>
@ -267,8 +120,8 @@ const toggleFloor = (item,index) => {
v-for="(item, index) in runTimeList"
:key="index"
>
<span>{{ item.name }}</span>
<el-switch v-model="item.value" style="left: 8px" />
<span>{{ item.Name }}</span>
<el-switch v-model="item.State" style="left: 8px" />
</div>
</div>
</div>
@ -335,7 +188,7 @@ const toggleFloor = (item,index) => {
width: 100%;
height: 4.5%;
display: flex;
justify-content: space-around;
justify-content: space-evenly;
align-items: center;
font-size: 16px;
}
@ -343,12 +196,14 @@ const toggleFloor = (item,index) => {
width: 100%;
height: calc(100% - 4.5%);
overflow: auto;
display: flex;
flex-direction: column;
scrollbar-width: none; /* firefox */
-ms-overflow-style: none; /* IE 10+ */
.tableBoby {
background: url("../../assets/images/overview/runTime.png") no-repeat;
background-size: 100% 100%;
width: 100%;
width: 88%;
height: 3.5%;
display: flex;
justify-content: space-around;