能源消耗

package.json

@@ -20,6 +20,7 @@
     "jsencrypt": "^3.3.2",
     "less": "^4.2.0",
     "mitt": "^3.0.1",
+    "mockjs": "^1.1.0",
     "node-sass": "^9.0.0",
     "public-ip": "^6.0.2",
     "virtual-list": "^1.0.1",

src/api/api.js

+/*
+整个项目api的统一管理
+*/
+
+import request from "./request";
+
+// 请求首页左侧的表格的数据
+
+export default{
+  getEnergyData(params) {
+    return request({
+      url:'/home/getEnergyData',
+      method:"get",
+      data:params
+    })
+  },
+  deleteEnergy(params) {
+    return request({
+      url:'/home/deleteEnergy',
+      method:"get",
+      data:params
+    })
+  },
+  addEnergy(params) {
+    return request({
+      url:'/home/AddEnergy',
+      method:"get",
+      data:params
+    })
+  },
+  editEnergy(params) {
+    return request({
+      url: '/home/editEnergy',
+      method: 'get',
+      data: params
+    })
+  },
+}

src/api/mock.js

+import Mock from 'mockjs'
+import energyApi from './mockData/energy'
+// 1.拦截的路径  2.拦截的方法 3.制造出的假数据
+// Mock.mock('/api/home/getEnergyData','get',energyApi.getEnergyList)
+Mock.mock(/home\/getEnergyData/,"get", energyApi.getEnergyList)
+Mock.mock(/home\/deleteEnergy/,"get", energyApi.deleteEnergy)
+Mock.mock(/home\/AddEnergy/,"get", energyApi.createEnery)
+Mock.mock(/home\/editEnergy/,"get", energyApi.updateEnergy)
\ No newline at end of file

src/api/mockData/energy.js

+
+import Mock from 'mockjs'
+import { ref } from 'vue'
+// get请求从config.url获取参数，post从config.body中获取参数
+function param2Obj(url) {
+  const search = url.split('?')[1]
+  if (!search) {
+    return {}
+  }
+  return JSON.parse(
+    '{"' +
+    decodeURIComponent(search)
+      .replace(/"/g, '\\"')
+      .replace(/&/g, '","')
+      .replace(/=/g, '":"') +
+    '"}'
+  )
+}
+
+
+let List = []
+const count = 100
+for (let i = 0; i < count; i++) {
+  List.push(
+    Mock.mock({
+      id: "@increment()",
+      'name|1': Mock.mock(['东部供热站', '行政区供热站', '福宛里供热站']),
+      'type|1-4': 1,
+      'type|1': Mock.mock(['热', '光', '电','机械']),
+      'used|100-3000': 1,
+      date: Mock.mock('@date("yyyy/MM/dd")') + ' 0:00:00'
+    })
+  )
+}
+
+
+export default {
+  /**
+   * 获取列表
+   * 要带参数 name, page, limt; name可以不填, page,limit有默认值。
+   * @param name, page, limit
+   * @return {{code: number, count: number, data: *[]}}
+   */
+  getEnergyList: config => {
+    //limit默认是10，因为分页器默认也是一页10个
+    const { name, page = 1, limit = 10 } = param2Obj(config.url)
+
+    const mockList = List.filter(energy => {
+      //如果name存在会，根据name筛选数据
+      if (name && energy.name.indexOf(name) === -1) return false
+      return true
+    })
+    //分页
+    const pageList = mockList.filter((item, index) => index < limit * page && index >= limit * (page - 1))
+    return {
+      code: 200,
+      data: {
+        list: pageList,
+        count: mockList.length, //数据总条数需要返回
+      }
+    }
+  },
+  /**
+   * 删除
+   * @param id
+   * @return {*}
+   */
+  deleteEnergy: config => {
+    const { id } = param2Obj(config.url)
+    // console.log("前端传来的id:"+id);
+
+
+    if (!id) {
+      return {
+        code: -999,
+        message: '参数不正确'
+      }
+    } else {
+      List = List.filter(item => item.id != id)
+      console.log(List);
+      return {
+        code: 200,
+        message: '删除成功'
+      }
+    }
+  },
+
+  /**
+ * 增加
+ * @param name, type, used, date
+ * @return {{code: number, data: {message: string}}}
+ */
+  createEnery: config => {
+    const { name, type, used, date } = JSON.parse(config.body)
+    List.unshift({
+
+      id:Mock.mock('@increment()'),
+      name:name,
+      type:type,
+      used:used,
+      date:date
+    })
+    return {
+      code: 200,
+      data: {
+        message: '添加成功'
+      }
+    }
+  },
+
+  updateEnergy: config => {
+    const { id, name, type, used, date } = JSON.parse(config.body)
+    const type_num = parseInt(type)
+    List.some(e => {
+      if (e.id === id) {
+        e.name = name
+        e.type = type
+        e.used = used
+        e.date = date
+        return true
+      }
+    })
+    return {
+      code: 200,
+      data: {
+        message: '编辑成功'
+      }
+    }
+  }
+}
\ No newline at end of file

src/api/request.js

+import axios from 'axios';
+import {ElMessage}  from 'element-plus';
+import config from '../config/index';
+const service = axios.create({
+  baseURL:config.baseApi,
+});
+const NETWORK_ERROR = '网络错误...';
+// 添加请求拦截器
+service.interceptors.request.use(function (config) {
+  // 在发送请求之前做些什么
+  return config;
+}, function (error) {
+  // 对请求错误做些什么
+  return Promise.reject(error);
+});
+
+// 添加响应拦截器
+service.interceptors.response.use(
+(res) => {
+  // console.log(res);
+  const {code,data,msg}= res.data;
+  if(code === 200) {
+    return data;
+  }else {
+    ElMessage.error(msg || NETWORK_ERROR);
+    return Promise.reject(msg || NETWORK_ERROR);
+  }
+}
+);
+
+function request(options) {
+  options.method = options.method || "get";
+  // 关于get请求参数的调整
+  if(options.method.toLowerCase()==='get') {
+    options.params = options.data;
+  }
+  //对mock的开关做处理
+  let isMock = config.mock;
+  if(typeof options.mock !== "undefined") {
+    isMock = options.mock;
+  }
+
+  // 针对环境做一个处理
+  if(config.env === 'prod') {
+    // 不能mock
+    service,defaults.baseURL = config.baseApi;
+  }else {
+    service.defaults.baseURL = isMock ? config.mockApi : config.baseApi
+  }
+  return service(options);
+}
+
+export default request;
\ No newline at end of file

src/api/scheduling.js

+import http from './http'
+//能源消耗
+export const postEnergyManage = params => {
+  return http.post(`/api/manage/sheduling/EnergyManage`, params).then(res => res).catch(function (error) {
+      console.log(error);
+  })
+}
\ No newline at end of file

src/config/index.js

+const env = import.meta.env.MODE || "prod";
+const EnvConfig = {
+  development:{
+    baseApi:"/api",
+    mockApi:"https://apifoxmock.com/m1/4068509-0-default/api/home/getTable"
+  },
+  test:{
+    baseApi:"//test.future.com/api",
+    mockApi:"https://apifoxmock.com/m1/4068509-0-default/api/home/getTable"
+  },
+  prod:{
+    baseApi:"//future.com/api",
+    mockApi:"https://apifoxmock.com/m1/4068509-0-default/api/home/getTable"
+  }
+};
+
+export default {
+  env,
+  ...EnvConfig[env],
+  //mock
+  mock:false,
+}
\ No newline at end of file

src/main.js

@@ -23,6 +23,9 @@ import http from './api/http'
 import store from './store'
 import $ from 'jquery'
 // import {WebControl} from '@/assets/script/video/web-control.esm.min.js'
+import "@/api/mock.js"
+import api from '@/api/api'
+
 
 const app = createApp(App)
 //注册element图标
@@ -33,7 +36,7 @@ for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
 app.component('Notification', Notification)
 
 app.config.globalProperties.http = http;
-
+app.config.globalProperties.$api = api;
 //将element-plus注册成全局可用组件库
 app.use(store)
     .use(ElementPlus)

src/router/index.js

 // 创建路由为历史
-import {createRouter, createWebHistory} from "vue-router";
+import { createRouter, createWebHistory } from "vue-router";
 import LoginPage from '@/views/login/login.vue'
 import HomePage from '@/views/home.vue'
 import AboutPage from '@/components/About.vue'
@@ -364,7 +364,16 @@ const routes = [
             meta: {
                 title: '视频监控'
             }
-            }, {
+        },
+        {
+            path: '/Scheduling/EnergyManage',
+            name: 'EnergyManagePage',
+            component: () => import('@/views/SchedulingPage/EnergyManagePage.vue'),
+            meta: {
+                title: '能源消耗'
+            }
+        },
+        {
             path: '/Scheduling/WeatherManage',
             name: 'WeatherManagePage',
             component: () => import('@/views/Scheduling/WeatherManagePage.vue'),
@@ -374,19 +383,19 @@ const routes = [
         },
         {
             path: '/Scheduling/ConfigBoiler',
-                name:'ConfigBoiler',
-                component: ()=> import('../views/SchedulingPage/ConfigBoilerPage.vue'),
-                meta:{
-                    title:'参数配置'
+            name: 'ConfigBoiler',
+            component: () => import('../views/SchedulingPage/ConfigBoilerPage.vue'),
+            meta: {
+                title: '参数配置'
             }
 
         },
         {
             path: '/Scheduling/Phenomenon',
-                name:'Phenomenon',
-                component: ()=> import('../views/SchedulingPage/PhenomenonPage.vue'),
-                meta:{
-                    title:'天气工况管理'
+            name: 'Phenomenon',
+            component: () => import('../views/SchedulingPage/PhenomenonPage.vue'),
+            meta: {
+                title: '天气工况管理'
             }
         }
         ]
@@ -487,7 +496,7 @@ router.beforeEach(async (to, from, next) => {
     if (!userInfo && to.path !== '/login') return next('/login')
     //如果已登录避免重复登录
     if (userInfo && to.path == '/login') {
-        return next({path: from.path ? from.path : '/'})
+        return next({ path: from.path ? from.path : '/' })
     }
 
     let hasNewRoutes = false