对接接口

package-lock.json

@@ -8,6 +8,7 @@
       "name": "vitevue",
       "version": "0.0.0",
       "dependencies": {
+        "axios": "^1.6.7",
         "echarts": "^5.4.3",
         "echarts-gl": "^2.0.9",
         "element-plus": "^2.4.3",
@@ -952,6 +953,21 @@
       "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.7.tgz",
+      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -1035,6 +1051,17 @@
       "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
       "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
@@ -1060,6 +1087,14 @@
       "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
       "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/echarts": {
       "version": "5.4.3",
       "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
@@ -1280,6 +1315,32 @@
         "node": ">=8"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.5",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
@@ -1546,7 +1607,6 @@
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
       "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
-      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -1555,7 +1615,6 @@
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "peer": true,
       "dependencies": {
         "mime-db": "1.52.0"
       },
@@ -1668,6 +1727,11 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
@@ -2786,6 +2850,21 @@
       "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
     },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "axios": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.7.tgz",
+      "integrity": "sha512-/hDJGff6/c7u0hDkvkGxR/oy6CbCs8ziCsC7SqmhjfozqiJGc8Z11wrv9z9lYfY4K8l+H9TpjcMDX0xOZmx+RA==",
+      "requires": {
+        "follow-redirects": "^1.15.4",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -2849,6 +2928,14 @@
       "resolved": "https://registry.npmmirror.com/claygl/-/claygl-1.3.0.tgz",
       "integrity": "sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ=="
     },
+    "combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
     "commander": {
       "version": "2.20.3",
       "resolved": "https://registry.npmmirror.com/commander/-/commander-2.20.3.tgz",
@@ -2874,6 +2961,11 @@
       "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.10.tgz",
       "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
     },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
+    },
     "echarts": {
       "version": "5.4.3",
       "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.4.3.tgz",
@@ -3058,6 +3150,21 @@
         "to-regex-range": "^5.0.1"
       }
     },
+    "follow-redirects": {
+      "version": "1.15.5",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.5.tgz",
+      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw=="
+    },
+    "form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      }
+    },
     "fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.3.tgz",
@@ -3253,14 +3360,12 @@
     "mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
-      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="
-      "peer": true
     },
     "mime-types": {
       "version": "2.1.35",
       "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
       "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
-      "peer": true,
       "requires": {
         "mime-db": "1.52.0"
       }
@@ -3340,6 +3445,11 @@
         "source-map-js": "^1.0.2"
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.6.7",
     "echarts": "^5.4.3",
     "echarts-gl": "^2.0.9",
     "element-plus": "^2.4.3",

src/api/overview.js

@@ -0,0 +1,49 @@
+import http from '@/utils/http'
+// 获取用电量
+export function getPower(params){
+    console.log(params,http);
+    return http({
+        url:'/api/GetElctricityConsumption',
+        method:'get',
+        params
+    })
+}
+// 获取实时负荷
+export function getRealtimeLoad(){
+    return http({
+        url:'/api/GetRealtimeLoad',
+        method:'get'
+    })
+}
+// 获取能耗日历
+export function getEnergyCalendar(params){
+    return http({
+        url:'/api/GetEnergyCalendar',
+        method:'get',
+        params
+    })
+}
+// 获取碳排放
+export function getCarbonEmission(params){
+    return http({
+        url:'/api/GetCarbonEmission',
+        method:'get',
+        params
+    })
+}
+// 获取气象站数据
+export function getMeteorologicalStation(params){
+    return http({
+        url:'/api/GetMeteorologicalStation',
+        method:'get',
+        params
+    })
+}
+// 获取系统用电排名
+export function getSystemRanking(params){
+    return http({
+        url:'/api/GetSystemRanking',
+        method:'get',
+        params
+    })
+}

src/utils/http.js

@@ -0,0 +1,32 @@
+import axios from "axios";
+
+console.log(import.meta.env.VITE_APP_BASE_API);
+// 创建axios实例
+const service = axios.create({
+    baseURL: import.meta.env.VITE_APP_BASE_API,
+    timeout: 6000, // 请求超时日期
+});
+
+// 实例添加请求拦截器
+
+service.interceptors.request.use((requestConfig) => {
+    return Promise.resolve(requestConfig);
+}, (error) => {
+    return Promise.reject(error);
+})
+
+// 实例添加响应拦截器
+service.interceptors.response.use((response) => {
+
+    // loading.hideLoading();
+    if ((response.status >= 200 && response.status < 300) || response.status === 304) {
+        // 如果http状态码正常，则直接返回数据
+        return response.data;
+    }
+}, (error) => {
+    // 对响应错误做处理...
+    // loading.hideLoading();
+    return Promise.reject(error.response);
+})
+
+export default service

src/views/overview/index.vue

@@ -2,7 +2,7 @@
 import calendar from "@/components/calendar/index.vue";
 import * as echarts from "echarts";
 import { onMounted, ref } from "vue";
-
+import {getPower,getRealtimeLoad,getCarbonEmission,getEnergyCalendar,getMeteorologicalStation,getSystemRanking} from '@/api/overview'
 import getPath from "@/utils/getPath.js";
 // 实时负荷
 const realTimeLoad = ref([
@@ -13,35 +13,44 @@ const realTimeLoad = ref([
 // 气象站
 const weatherStation = ref([
   { pic: getPath.rain, name: "雨量", value: 100, unit: "mm" },
-  { pic: getPath.rainsnow, name: "雨雪", value: "实际取值", unit: "" },
+  { pic: getPath.rainsnow, name: "雨雪", value: "实际取值", unit: "mm" },
   { pic: getPath.wind, name: "风向", value: "东南风" },
   { pic: getPath.illuminance, name: "光照度", value: 101, unit: "lux" },
   { pic: getPath.windspeed, name: "风速", value: "东南风3级" },
-  { pic: getPath.air, name: "今日电量", value: "优" },
+  { pic: getPath.air, name: "空气质量", value: "优" },
 ]);
 // const getImageUrl=(name)=>{
 //   return `url(${new URL(name, import.meta.url).href})`
 // }
+
+// 用电量列表 
+const powerList = ref([])
 onMounted(() => {
-  // 用电量
+  // 用电量接口
-  drawPowerEcharts();
+  powerInterface()
-  // 系统用电排名
+  // 实时负荷接口
-  drawRankEcharts();
+  realtimeLoadInterface()
+  // 气象站接口
+  stationInterface()
+  // 系统用电排名接口
+  systemRankingInterface()
   //碳排放
-  getCarbonEmission();
+  getCarbonEmissionEcahrts();
 });
 // 用电量时间切换
 const powerDate = ref("year");
 
 const togglePower = (event) => {
+
   powerDate.value = event.srcElement.className;
+  powerInterface()
 };
 // 碳排放时间切换
 const carbonEmissionDate = ref("month");
 const toggleCarbonEmission = (event) => {
   carbonEmissionDate.value = event.srcElement.className;
 };
-const drawPowerEcharts = () => {
+const drawPowerEcharts = (item) => {
   let myChart = echarts.init(document.getElementById("power"));
   const option = {
     // backgroundColor: "#05224d",
@@ -75,7 +84,10 @@ const drawPowerEcharts = () => {
 
         axisTick: { show: false },
         boundaryGap: true,
-        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+        // data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+        data:item.map(el=>{
+          return el.time
+        })
       },
     ],
     yAxis: [
@@ -137,7 +149,10 @@ const drawPowerEcharts = () => {
             shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
           },
         },
-        data: [110, 200, 300, 325, 400, 322, 250],
+        // data: [110, 200, 300, 325, 400, 322, 250],
+        data:item.map(el=>{
+          return el.EH
+        })
       },
     ],
   };
@@ -147,7 +162,7 @@ const drawPowerEcharts = () => {
     myChart.resize(); // 调用 resize 函数进行自适应大小调整
   });
 };
-const drawRankEcharts = () => {
+const drawRankEcharts = (data) => {
   let myChart = echarts.init(document.getElementById("rank"));
   let option = {
     grid: {
@@ -203,7 +218,10 @@ const drawRankEcharts = () => {
         axisLine: {
           show: false,
         },
-        data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"],
+        // data: ["空调系统", "照明系统", "消防系统", "电梯系统", "展陈系统"],
+        data:data.map(el=>{
+          return el.name
+        })
       },
       {
         type: "category",
@@ -231,7 +249,10 @@ const drawRankEcharts = () => {
             },
           },
         },
-        data: [50000000, 22000000, 10000000, 5000000, 1],
+        // data: [50000000, 22000000, 10000000, 5000000, 1],
+        data:data.map(el=>{
+          return el.EH
+        })
       },
     ],
     series: [
@@ -252,7 +273,10 @@ const drawRankEcharts = () => {
           ]),
         },
         barWidth: 8,
-        data: [50000000, 22000000, 10000000, 5000000, 200],
+        // data: [50000000, 22000000, 10000000, 5000000, 200],
+        data:data.map(el=>{
+          return el.EH
+        })
       },
       {
         name: "背景",
@@ -273,7 +297,7 @@ const drawRankEcharts = () => {
   });
 };
 //碳排放
-function getCarbonEmission() {
+function getCarbonEmissionEcahrts() {
   const offsetX = 10; //bar宽
   const offsetY = 5; //倾斜角度
   // 绘制左侧面
@@ -545,6 +569,49 @@ function getCarbonEmission() {
     myChart.resize(); // 调用 resize 函数进行自适应大小调整
   });
 }
+// 获取用电量
+const powerInterface=()=>{
+  let params = {
+    date:powerDate.value==='year'?'年':'月'
+  }
+  getPower(params).then(res=>{
+    // 渲染用电量图表
+    drawPowerEcharts(res.data);
+  })
+}
+// 获取实时负荷
+const realtimeLoadInterface = () =>{
+    getRealtimeLoad().then(res=>{
+      realTimeLoad.value.forEach(item=>{
+        if(item.name==='配电室数量'){
+          item.value = res.data[0].Amount
+        }else if(item.name==='实时负荷'){
+          item.value = res.data[0].P
+        }else if(item.name==='今日电量'){
+          item.value = res.data[0].EH
+        }
+      })
+    })
+}
+// 获取气象站数据
+const stationInterface = () =>{
+  getMeteorologicalStation().then(res=>{
+    weatherStation.value.forEach(item=>{
+      res.data.forEach(el=>{
+        if(el.name.indexOf(item.name)!==-1){
+            item.value = el.value
+        }
+      })
+    })
+  })
+}
+// 系统用电量排名
+const systemRankingInterface = () =>{
+  getSystemRanking().then(res=>{
+    // 系统用电排名chart图
+    drawRankEcharts(res.data)
+  })
+}
 </script>
 
 <template>

vite.config.js

@@ -6,6 +6,9 @@ import path from "path";
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [vue()],
+  define: {
+    'process.env': process.env
+  },
   resolve: {
     // 配置路径别名
     alias: {
@@ -20,7 +23,7 @@ export default defineConfig({
     proxy: {
       // https://cn.vitejs.dev/config/#server-proxy
       '/dev-api': {
-        target: 'http://localhost:8080',
+        target: 'http://172.16.1.156:8021/',
         changeOrigin: true,
         rewrite: (p) => p.replace(/^\/dev-api/, '')
       }