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

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',
+    })
+}

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',
+    })
+}

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: {
+    // tooltip: {
-      backgroundColor: "#033b77",
+    //   backgroundColor: "#033b77",
-      borderColor: "#21f2c4",
+    //   borderColor: "#21f2c4",
-      textStyle: {
+    //   textStyle: {
-        color: "#fff",
+    //     color: "#fff",
-        fontSize: 13,
+    //     fontSize: 13,
-      },
+    //   },
-      formatter: (params) => {
+    //   formatter: (params) => {
-        if (
+    //     if (
-          params.seriesName !== "mouseoutSeries" &&
+    //       params.seriesName !== "mouseoutSeries" &&
-          params.seriesName !== "信用评价"
+    //       params.seriesName !== "信用评价"
-        ) {
+    //     ) {
-          // console.log(option.series,params.seriesName,'option.series[params.seriesIndex].pieData');
+    //       // console.log(option.series,params.seriesName,'option.series[params.seriesIndex].pieData');
-          const bfb = (
+    //       const bfb = (
-            (option.series[params.seriesIndex].pieData.endRatio -
+    //         (option.series[params.seriesIndex].pieData.endRatio -
-              option.series[params.seriesIndex].pieData.startRatio) *
+    //           option.series[params.seriesIndex].pieData.startRatio) *
-            100
+    //         100
-          ).toFixed(2);
+    //       ).toFixed(2);
-          return (
+    //       return (
-            `${params.seriesName}<br/>` +
+    //         `${params.seriesName}<br/>` +
-            `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
+    //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
-            `${bfb}%`
+    //         `${bfb}%`
-          );
+    //       );
-        }
+    //     }
-      },
+    //   },
-    },
+    // },
     xAxis3D: {
       min: -1,
       max: 1,

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 xAxisData = xData;
-  let seriesData = [100, 200, 400, 250, 360, 250, 340];
+  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",
+  //   name: "CCER",
-    value: 176,
+  //   value: 176,
-  },
+  // },
-  {
+  // {
-    name: "绿电",
+  //   name: "绿电",
-    value: 288,
+  //   value: 288,
-  },
+  // },
-  {
+  // {
-    name: "绿证",
+  //   name: "绿证",
-    value: 88,
+  //   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();
-  //碳排放强度
-  getCarbonIntensity();
-  //各系统碳排放量统计
-  getCarbonEmissionStatistics();
-  //碳中和
-  getCarbonNeutrality();
   //碳流图
-  drawEnergyFlow();
+  carbonFlowChart();
+  //碳排放趋势
+  carboEmissionTrends();
+  //碳排放强度
+  carbonStrength();
+  //各系统碳排放量统计
+  eachSystem();
+  //碳中和
+  neutralization();
 });
 </script>
 

src/views/screen/index.vue

@@ -1,231 +1,84 @@
 <script setup>
 import { ref, onMounted } from "vue";
-
+import { getOperatingState, getBigScreen } from "@/api/screen";
-const faultAlarmList = ref([
+const faultAlarmList = ref([]);
-  {
+const runTimeList = 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,
-  },
-
-]);
 // 楼层控制
-const floorList = ref(
+const floorList = ref([
-    [{
+  {
-      name: '一层'
+    name: "一层",
   },
   {
-        name: '二层'
+    name: "二层",
   },
   {
-        name: '三层'
+    name: "三层",
-      }
+  },
-    ]
+]);
-)
+const floorIndex = ref(-1);
-const floorIndex = ref(-1)
+const emit = defineEmits(["sendVal"]);
-const emit = defineEmits(["sendVal"])
 // 楼层选择方法
 const toggleFloor = (item, index) => {
   if (item.name === "一层") {
-    emit('sendVal',10)
+    emit("sendVal", 10);
   } else if (item.name === "二层") {
-    emit('sendVal',11)
+    emit("sendVal", 11);
   } else if (item.name === "三层") {
-    emit('sendVal',12)
+    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'"
+      <div
-           @click="toggleFloor(item,index)">{{ item.name }}
+        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>
+              <span>{{ item.Name }}</span>
-              <el-switch v-model="item.value" style="left: 8px" />
+              <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;