diff --git a/src/api/carbonEmission.js b/src/api/carbonEmission.js new file mode 100644 index 0000000..0d013bc --- /dev/null +++ b/src/api/carbonEmission.js @@ -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', + }) +} \ No newline at end of file diff --git a/src/api/screen.js b/src/api/screen.js new file mode 100644 index 0000000..4cdd11a --- /dev/null +++ b/src/api/screen.js @@ -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', + }) +} \ No newline at end of file diff --git a/src/utils/carbonNeutrality.js b/src/utils/carbonNeutrality.js index d982589..03f8463 100644 --- a/src/utils/carbonNeutrality.js +++ b/src/utils/carbonNeutrality.js @@ -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}
` + - `` + - `${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}
` + + // `` + + // `${bfb}%` + // ); + // } + // }, + // }, xAxis3D: { min: -1, max: 1, diff --git a/src/views/carbonEmission/index.vue b/src/views/carbonEmission/index.vue index 32c4485..a919f08 100644 --- a/src/views/carbonEmission/index.vue +++ b/src/views/carbonEmission/index.vue @@ -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(); }); diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue index 87ac65e..abe5cc3 100644 --- a/src/views/screen/index.vue +++ b/src/views/screen/index.vue @@ -1,231 +1,84 @@