Skip to content

W
web-project
Commit aba77d57 authored by 每天都要敲代码's avatar 每天都要敲代码
Browse files
Options

能源消耗

parent b9028bac
Hide whitespace changes
Inline Side-by-side
Showing with 1048 additions and 323 deletions
package.json
View file @ aba77d57
......@@ -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 0 → 100644
View file @ aba77d57
/*
整个项目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 0 → 100644
View file @ aba77d57
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 0 → 100644
View file @ aba77d57
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 0 → 100644
View file @ aba77d57
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 0 → 100644
View file @ aba77d57
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 0 → 100644
View file @ aba77d57
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
View file @ aba77d57
......@@ -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
View file @ aba77d57
// 创建路由为历史
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'
......@@ -67,328 +67,337 @@ const routes = [
title: '实时能耗'
}
},
// },{
// path: '/RealGas',
// name: 'RealGasPage',
// component: () => import('@/views/RealPage/RealGasPage.vue'),
// meta: {
// title: '实时燃气'
// }
// },{
// path: '/RealHeat',
// name: 'RealHeatPage',
// component: () => import('@/views/RealPage/RealHeatPage.vue'),
// meta: {
// title: '实时热表'
// }
// },{
// path: '/RealWater',
// name: 'RealWaterPage',
// component: () => import('@/views/RealPage/RealWaterPage.vue'),
// meta: {
// title: '实时水表'
// }
// },{
// path: '/RealElec',
// name: 'RealElecPage',
// component: () => import('@/views/RealPage/RealElecPage.vue'),
// meta: {
// title: '实时电表'
// }
// },
{
path: '/PipeStatus',
name: 'PipeStatusPage',
component: () => import('@/views/StatusPage/PipeStatusPage.vue'),
meta: {
title: '总管状态'
}
}, {
path: '/BoilerStatus',
name: 'BoilerStatusPage',
component: () => import('@/views/StatusPage/BoilerStatusPage.vue'),
meta: {
title: '锅炉状态'
}
}, {
path: '/TransferStatus',
name: 'TransferStatusPage',
component: () => import('@/views/StatusPage/TransferStatusPage.vue'),
meta: {
title: '换热站状态'
}
}, {
path: '/BoilerArtwork',
name: 'BoilerArtworkPage',
component: () => import('@/views/ArtworkPage/BoilerArtworkPage.vue'),
meta: {
title: '锅炉工艺图'
}
}, {
path: '/MeasurementArtwork',
name: 'MeasurementArtworkPage',
component: () => import('@/views/ArtworkPage/MeasurementArtworkPage.vue'),
meta: {
title: '计量站工艺图'
}
}, {
path: '/AllBoilerArtwork',
name: 'AllBoilerArtworkPage',
component: () => import('@/views/ArtworkPage/AllBoilerArtworkPage.vue'),
meta: {
title: '全景工艺图'
}
}, {
path: '/TransferArtwork',
name: 'TransferArtworkPage',
component: () => import('@/views/ArtworkPage/TransferArtworkPage.vue'),
meta: {
title: '换热站工艺图'
}
}, {
path: '/AlarmStatus',
name: 'AlarmStatusPage',
component: () => import('@/views/AlarmPage/AlarmStatusPage.vue'),
meta: {
title: '报警状态'
}
}, {
path: '/Alarm',
name: 'AlarmInfoPage',
component: () => import('@/views/AlarmPage/AlarmInfoPage.vue'),
meta: {
title: '报警信息'
}
}, {
path: '/DataAnalysis',
name: 'DataAnalysisPage',
component: () => import('@/views/HandlerPage/DataAnalysisPage.vue'),
meta: {
title: '能耗分析'
}
}, {
path: '/EnergyConsumption',
name: 'EnergyConsumptionPage',
component: () => import('@/views/HandlerPage/EnergyConsumptionPage.vue'),
meta: {
title: '能耗排名'
}
}, {
path: '/Handler/EnerpriseEnergyView',
name: 'EnerpriseEnergyView',
component: () => import('@/views/HandlerPage/EnerpriseEnergyView.vue'),
meta: {
title: '企业趋势图'
}
}, {
path: '/Handler/TransferEnergyView',
name: 'EnergyViewPage',
component: () => import('@/views/HandlerPage/TransferEnergyView.vue'),
meta: {
title: '换热站趋势图'
}
}, {
path: '/Handler/QOQView',
name: 'QOQView',
component: () => import('@/views/HandlerPage/QOQ.vue'),
meta: {
title: '用量环比'
}
}, {
path: '/Handler/YOYView',
name: 'YOYView',
component: () => import('@/views/HandlerPage/YOY.vue'),
meta: {
title: '用量同比'
}
}, {
path: '/HeatAnalysis',
name: 'HeatAnalysisPage',
component: () => import('@/views/Report/HeatAnalysisPage.vue'),
meta: {
title: '热量分析'
}
}, {
path: '/Forecast',
name: 'ForecastPage',
component: () => import('@/views/Report/ForecastPage.vue'),
meta: {
title: '明日预测'
}
}, {
path: '/RealAnalysis',
name: 'RealAnalysisPage',
component: () => import('@/views/Report/RealAnalysisPage.vue'),
meta: {
title: '实时热量分析'
}
}, {
path: '/TransferEnergy',
name: 'TransferEnergyPage',
component: () => import('@/views/Report/TransferEnergyPage.vue'),
meta: {
title: '换热站能耗'
}
}, {
path: '/AreaInfo',
name: 'AreaInfoPage',
component: () => import('@/views/Report/AreaInfoPage.vue'),
meta: {
title: '面积统计'
}
}, {
path: '/TodayPatrol',
name: 'PatrolPage',
component: () => import('@/views/PatrolPage/TodayPatrolPage.vue'),
meta: {
title: '今日巡更'
}
}, {
path: '/HisPatrol',
name: 'HisPatrolPage',
component: () => import('@/views/PatrolPage/HisPatrolPage.vue'),
meta: {
title: '巡更历史'
}
}, {
path: '/HeatUser',
name: 'HeatUserPage',
component: () => import('@/views/HeatUserPage/HeatUserPage.vue'),
meta: {
title: '热用户'
}
}, {
path: '/HeatUser/Tap',
name: 'TapPage',
component: () => import('@/views/HeatUserPage/TapPage.vue'),
meta: {
title: '阀门'
}
}, {
path: '/History/Pipe',
name: 'HisPipe',
component: () => import('@/views/HistoryPage/HisPipePage.vue'),
meta: {
title: '总管历史数据'
}
}, {
path: '/History/Boiler',
name: 'HisBoiler',
component: () => import('@/views/HistoryPage/HisBoilerPage.vue'),
meta: {
title: '锅炉历史数据'
}
}, {
path: '/History/Transfer',
name: 'HisTransfer',
component: () => import('@/views/HistoryPage/HisTransPage.vue'),
meta: {
title: '换热站历史数据'
}
}, {
path: '/History/Gas',
name: 'HisGas',
component: () => import('@/views/HistoryPage/HisGasPage.vue'),
meta: {
title: '燃气历史数据'
}
}, {
path: '/History/Water',
name: 'HisWater',
component: () => import('@/views/HistoryPage/HisWaterPage.vue'),
meta: {
title: '水表历史数据'
}
}, {
path: '/History/Heat',
name: 'HisHeat',
component: () => import('@/views/HistoryPage/HisHeatPage.vue'),
meta: {
title: '热表历史数据'
}
}, {
path: '/History/Electric',
name: 'HisElectric',
component: () => import('@/views/HistoryPage/HisElecPage.vue'),
meta: {
title: '电表历史数据'
}
}, {
path: '/Handler/Overview',
name: 'Overview',
component: () => import('@/views/HandlerPage/OverviewPage.vue'),
meta: {
title: '数据总览'
}
}, {
path: '/Handler/EnergyView',
name: 'EnergyView',
component: () => import('@/views/HandlerPage/QOQ.vue'),//EnergyViewPage
meta: {
title: '趋势图'
}
}, {
path: '/Remote/Boiler',
name: 'BoilerRemotePage',
component: () => import('@/views/RemotePage/BoilerControlPage.vue'),
meta: {
title: '锅炉远程控制'
}
},
{
path: '/Remote/ZdlmSelfTest',
name: 'ZdlmSelfTestPage',
component: () => import('@/views/RemotePage/ZdlmSelfTest.vue'),
meta: {
title: '电动阀自检'
}
},
{
path: '/Remote/Transfer',
name: 'TransferRemotePage',
component: () => import('@/views/RemotePage/TransControlPage.vue'),
meta: {
title: '换热站远程控制'
}
}, {
path: '/Remote/TransferPump',
name: 'TransferPumpPage',
component: () => import('@/views/RemotePage/TransferPumpPage.vue'),
meta: {
title: '循环泵压差控制'
}
}, {
path: '/Video',
name: 'VideoPage',
component: () => import('@/views/Video/VideoViewPage.vue'),
meta: {
title: '视频监控'
}
}, {
path: '/Scheduling/WeatherManage',
name: 'WeatherManagePage',
component: () => import('@/views/Scheduling/WeatherManagePage.vue'),
meta: {
title: '气象干预'
}
},
{
path: '/Scheduling/ConfigBoiler',
name:'ConfigBoiler',
component: ()=> import('../views/SchedulingPage/ConfigBoilerPage.vue'),
meta:{
title:'参数配置'
}
// },{
// path: '/RealGas',
// name: 'RealGasPage',
// component: () => import('@/views/RealPage/RealGasPage.vue'),
// meta: {
// title: '实时燃气'
// }
// },{
// path: '/RealHeat',
// name: 'RealHeatPage',
// component: () => import('@/views/RealPage/RealHeatPage.vue'),
// meta: {
// title: '实时热表'
// }
// },{
// path: '/RealWater',
// name: 'RealWaterPage',
// component: () => import('@/views/RealPage/RealWaterPage.vue'),
// meta: {
// title: '实时水表'
// }
// },{
// path: '/RealElec',
// name: 'RealElecPage',
// component: () => import('@/views/RealPage/RealElecPage.vue'),
// meta: {
// title: '实时电表'
// }
// },
{
path: '/PipeStatus',
name: 'PipeStatusPage',
component: () => import('@/views/StatusPage/PipeStatusPage.vue'),
meta: {
title: '总管状态'
}
}, {
path: '/BoilerStatus',
name: 'BoilerStatusPage',
component: () => import('@/views/StatusPage/BoilerStatusPage.vue'),
meta: {
title: '锅炉状态'
}
}, {
path: '/TransferStatus',
name: 'TransferStatusPage',
component: () => import('@/views/StatusPage/TransferStatusPage.vue'),
meta: {
title: '换热站状态'
}
}, {
path: '/BoilerArtwork',
name: 'BoilerArtworkPage',
component: () => import('@/views/ArtworkPage/BoilerArtworkPage.vue'),
meta: {
title: '锅炉工艺图'
}
}, {
path: '/MeasurementArtwork',
name: 'MeasurementArtworkPage',
component: () => import('@/views/ArtworkPage/MeasurementArtworkPage.vue'),
meta: {
title: '计量站工艺图'
}
}, {
path: '/AllBoilerArtwork',
name: 'AllBoilerArtworkPage',
component: () => import('@/views/ArtworkPage/AllBoilerArtworkPage.vue'),
meta: {
title: '全景工艺图'
}
}, {
path: '/TransferArtwork',
name: 'TransferArtworkPage',
component: () => import('@/views/ArtworkPage/TransferArtworkPage.vue'),
meta: {
title: '换热站工艺图'
}
}, {
path: '/AlarmStatus',
name: 'AlarmStatusPage',
component: () => import('@/views/AlarmPage/AlarmStatusPage.vue'),
meta: {
title: '报警状态'
}
}, {
path: '/Alarm',
name: 'AlarmInfoPage',
component: () => import('@/views/AlarmPage/AlarmInfoPage.vue'),
meta: {
title: '报警信息'
}
}, {
path: '/DataAnalysis',
name: 'DataAnalysisPage',
component: () => import('@/views/HandlerPage/DataAnalysisPage.vue'),
meta: {
title: '能耗分析'
}
}, {
path: '/EnergyConsumption',
name: 'EnergyConsumptionPage',
component: () => import('@/views/HandlerPage/EnergyConsumptionPage.vue'),
meta: {
title: '能耗排名'
}
}, {
path: '/Handler/EnerpriseEnergyView',
name: 'EnerpriseEnergyView',
component: () => import('@/views/HandlerPage/EnerpriseEnergyView.vue'),
meta: {
title: '企业趋势图'
}
}, {
path: '/Handler/TransferEnergyView',
name: 'EnergyViewPage',
component: () => import('@/views/HandlerPage/TransferEnergyView.vue'),
meta: {
title: '换热站趋势图'
}
}, {
path: '/Handler/QOQView',
name: 'QOQView',
component: () => import('@/views/HandlerPage/QOQ.vue'),
meta: {
title: '用量环比'
}
}, {
path: '/Handler/YOYView',
name: 'YOYView',
component: () => import('@/views/HandlerPage/YOY.vue'),
meta: {
title: '用量同比'
}
}, {
path: '/HeatAnalysis',
name: 'HeatAnalysisPage',
component: () => import('@/views/Report/HeatAnalysisPage.vue'),
meta: {
title: '热量分析'
}
}, {
path: '/Forecast',
name: 'ForecastPage',
component: () => import('@/views/Report/ForecastPage.vue'),
meta: {
title: '明日预测'
}
}, {
path: '/RealAnalysis',
name: 'RealAnalysisPage',
component: () => import('@/views/Report/RealAnalysisPage.vue'),
meta: {
title: '实时热量分析'
}
}, {
path: '/TransferEnergy',
name: 'TransferEnergyPage',
component: () => import('@/views/Report/TransferEnergyPage.vue'),
meta: {
title: '换热站能耗'
}
}, {
path: '/AreaInfo',
name: 'AreaInfoPage',
component: () => import('@/views/Report/AreaInfoPage.vue'),
meta: {
title: '面积统计'
}
}, {
path: '/TodayPatrol',
name: 'PatrolPage',
component: () => import('@/views/PatrolPage/TodayPatrolPage.vue'),
meta: {
title: '今日巡更'
}
}, {
path: '/HisPatrol',
name: 'HisPatrolPage',
component: () => import('@/views/PatrolPage/HisPatrolPage.vue'),
meta: {
title: '巡更历史'
}
}, {
path: '/HeatUser',
name: 'HeatUserPage',
component: () => import('@/views/HeatUserPage/HeatUserPage.vue'),
meta: {
title: '热用户'
}
}, {
path: '/HeatUser/Tap',
name: 'TapPage',
component: () => import('@/views/HeatUserPage/TapPage.vue'),
meta: {
title: '阀门'
}
}, {
path: '/History/Pipe',
name: 'HisPipe',
component: () => import('@/views/HistoryPage/HisPipePage.vue'),
meta: {
title: '总管历史数据'
}
}, {
path: '/History/Boiler',
name: 'HisBoiler',
component: () => import('@/views/HistoryPage/HisBoilerPage.vue'),
meta: {
title: '锅炉历史数据'
}
}, {
path: '/History/Transfer',
name: 'HisTransfer',
component: () => import('@/views/HistoryPage/HisTransPage.vue'),
meta: {
title: '换热站历史数据'
}
}, {
path: '/History/Gas',
name: 'HisGas',
component: () => import('@/views/HistoryPage/HisGasPage.vue'),
meta: {
title: '燃气历史数据'
}
}, {
path: '/History/Water',
name: 'HisWater',
component: () => import('@/views/HistoryPage/HisWaterPage.vue'),
meta: {
title: '水表历史数据'
}
}, {
path: '/History/Heat',
name: 'HisHeat',
component: () => import('@/views/HistoryPage/HisHeatPage.vue'),
meta: {
title: '热表历史数据'
}
}, {
path: '/History/Electric',
name: 'HisElectric',
component: () => import('@/views/HistoryPage/HisElecPage.vue'),
meta: {
title: '电表历史数据'
}
}, {
path: '/Handler/Overview',
name: 'Overview',
component: () => import('@/views/HandlerPage/OverviewPage.vue'),
meta: {
title: '数据总览'
}
}, {
path: '/Handler/EnergyView',
name: 'EnergyView',
component: () => import('@/views/HandlerPage/QOQ.vue'),//EnergyViewPage
meta: {
title: '趋势图'
}
}, {
path: '/Remote/Boiler',
name: 'BoilerRemotePage',
component: () => import('@/views/RemotePage/BoilerControlPage.vue'),
meta: {
title: '锅炉远程控制'
}
},
{
path: '/Remote/ZdlmSelfTest',
name: 'ZdlmSelfTestPage',
component: () => import('@/views/RemotePage/ZdlmSelfTest.vue'),
meta: {
title: '电动阀自检'
}
},
{
path: '/Remote/Transfer',
name: 'TransferRemotePage',
component: () => import('@/views/RemotePage/TransControlPage.vue'),
meta: {
title: '换热站远程控制'
}
}, {
path: '/Remote/TransferPump',
name: 'TransferPumpPage',
component: () => import('@/views/RemotePage/TransferPumpPage.vue'),
meta: {
title: '循环泵压差控制'
}
}, {
path: '/Video',
name: 'VideoPage',
component: () => import('@/views/Video/VideoViewPage.vue'),
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'),
meta: {
title: '气象干预'
}
},
{
path: '/Scheduling/ConfigBoiler',
name: 'ConfigBoiler',
component: () => import('../views/SchedulingPage/ConfigBoilerPage.vue'),
meta: {
title: '参数配置'
}
},
{
path: '/Scheduling/Phenomenon',
name:'Phenomenon',
component: ()=> import('../views/SchedulingPage/PhenomenonPage.vue'),
meta:{
title:'天气工况管理'
}
},
{
path: '/Scheduling/Phenomenon',
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
......
src/views/SchedulingPage/EnergyManagePage.vue 0 → 100644
View file @ aba77d57
<script setup>
import { ref, onMounted, getCurrentInstance, reactive, nextTick } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import axios from 'axios'
import { Search, Document } from "@element-plus/icons-vue"
const { proxy } = getCurrentInstance()
const tableData = ref([])
const dialogVisible = ref(false)
const getEnergyData = async () => {
const data = await proxy.$api.getEnergyData(config)
// console.log(data);
tableData.value = data.list.map(item => ({
...item
}))
config.total = data.count
}
const tableLabel = reactive([
{
prop: 'id',
label: "序号",
width: 120
},
{
prop: 'name',
label: '名称',
width: 230
},
{
prop: 'type',
label: "能源类型"
},
{
prop: 'used',
label: "用度",
width: 220
},
{
prop: 'date',
label: "日期",
width: 300
}
])
const formInline = reactive({
keyWord: ''
})
const config = reactive({
total: 0,
page: 1,
name: "",
})
const handleSearch = () => {
config.name
getEnergyData()
config.name = ''
}
const timeFormat = (time) => {
var time = new Date(time)
var year = time.getFullYear()
var month = time.getMonth()
var date = time.getDate()
function add(m) {
return m < 10 ? '0' + m : m
}
return year + '/' + add(month) + '/' + add(date) + ' 0:00:00'
}
//表单校验规则
const rules = reactive({
name: [{ required: true, message: "名称是必填项", trigger: "blur" }],
type: [
{ required: true, message: "能源类型是必填项", trigger: "blur" },
],
used: [{ required: true, message: "能源用度是必选项", trigger: "change" }],
date: [{ required: true, message: "日期是必选项" }]
})
const handleChange = (page) => {
config.page = page,
getEnergyData()
}
// 删除
const handleDelete = (row) => {
// console.log(row.id);
ElMessageBox.confirm("你确定要删除吗？",{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
confirmButtonClass:'ExitConfirmButton'
}).then(async () => {
await proxy.$api.deleteEnergy({ id: row.id })
ElMessage({
showClose: true,
message: '删除成功',
type: 'success'
})
getEnergyData()
})
}
// 新增
const action = ref('add')
const formEnergy = reactive({})
const handleClose = () => {
dialogVisible.value = false
proxy.$ref['energyForm'].resetFields()
}
const handleCancel = () => {
dialogVisible.value = false
proxy.$ref['energyForm'].resetFields()
}
const handleAdd = () => {
action.value = "add",
dialogVisible.value = true;
proxy.$refs['energyForm'].resetFields()
formEnergy.name='',
formEnergy.type=''
}
const handleEdit = (val) => {
action.value = "edit"
dialogVisible.value = true
nextTick(() => {
Object.assign(formEnergy, {...val})
})
}
const onSubmit = () => {
proxy.$refs['energyForm'].validate(async (valid) => {
if (valid) {
let res = null;
formEnergy.date = /^\d{4}-\d{2}-\d{2}$/.test(formEnergy.date) ? formEnergy.date : timeFormat(formEnergy.date)
if (action.value === 'add') {
res = await proxy.$api.addEnergy(formEnergy)
if (res) {
dialogVisible.value = false
proxy.$refs['energyForm'].resetFields()
getEnergyData()
}
} else {
res = await proxy.$api.editEnergy(formEnergy)
proxy.$refs['energyForm'].resetFields()
dialogVisible.value = false
getEnergyData()
}
} else {
ElMessage({
showClose: true,
message: '请输入正确的内容',
type: 'error'
})
}
})
}
onMounted(() => {
getEnergyData()
})
</script>
<template>
<table cellpadding="0" cellspacing="1" style="background-color: #99bbe8;width: 100%;">
<tr style="height: 10px;">
<th width="30%">
<span>能源类型：</span>
</th>
<th style=" background-color: #ffffff;">
<div class="th_div">
<el-form ref="formRef" :model="formInline" :inline="true"
style="display: flex; justify-content: center; align-items: center; margin: 0;">
<el-form-item class="select-clean" prop="name" label-width="280px" style="margin: 0;">
<el-select v-model="config.name" placeholder="请选择" style="width:360px; margin-left: 20px;">
<el-option label="东部供热站" value="东部供热站" />
<el-option label="行政区供热站" value="行政区供热站" />
<el-option label="福宛里供热站" value="福宛里供热站" />
</el-select>
</el-form-item>
</el-form>
</div>
</th>
<th width="100%" style="background-color: #ffffff;text-align: left;">
<el-button type="primary" @click="handleSearch"
>
<Search style="width: 1em; height: 1em; margin-right: 8px" />
查询
</el-button>
<el-button type="primary" @click="handleAdd"
>
<Document style="width: 1em; height: 1em; margin-right: 8px" />
新增
</el-button>
</th>
</tr>
</table>
<div class="table">
<el-table :data="tableData" style="width: 100%;font-size: 12px;color: #181818;"
:header-cell-style="{ color: '#225475', backgroundColor: '#B8CFEE', 'text-align': 'center', height: '30px', padding: '0px', border: '1px solid #99bbe8' }"
:cell-style="{ 'text-align': 'center', padding: '0px' }" :row-style="{ height: '30px', padding: '0px' }" border
stripe>
<el-table-column v-for="item in tableLabel" :key="item.prop" :width="item.width ? item.width : 150"
:prop="item.prop" :label="item.label" />
<el-table-column fixed="right" label="操作" min-width="140">
<template #="scope">
<el-button link type="primary" size="small" @click="handleEdit(scope.row)">
编辑
</el-button>
<el-button link type="primary" size="small" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div class="bottom">
<div class="bottom-left" style="color: #4B4847; font-size: 12px;">
共{{ config.total }}条记录,当前为第{{ config.page }}页,共{{ parseInt(config.total / 10 + 0.9) }}页
</div>
<el-pagination background layout="prev, pager, next" next-text="下一页" class="pager" :total="config.total"
size="small" @current-change="handleChange" />
</div>
</div>
<el-dialog v-model="dialogVisible" :title="action == 'add' ? '数据新增' : '数据修改'" width="50%" :before-close="handleClose">
<el-form :inline="true" :model="formEnergy" :rules="rules" ref="energyForm" :hide-required-asterisk="true">
<table cellpadding="0" cellspacing="1" style="background-color: #99bbe8">
<tr>
<th style="width: 25%">名称</th>
<td style="width: 60%; margin:0; padding: 0">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: left">
<el-select v-model="formEnergy.name" placeholder="请选择">
<el-option label="东部供热站" value="东部供热站" />
<el-option label="行政区供热站" value="行政区供热站" />
<el-option label="福宛里供热站" value="福宛里供热站" />
</el-select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th style="width: 25%">能源类型</th>
<td style="width: 60%; margin:0; padding: 0">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: left">
<el-select v-model="formEnergy.type" placeholder="请选择">
<el-option label="热" value="1" />
<el-option label="水" value="2" />
<el-option label="电" value="3" />
<el-option label="机械" value="机械" />
</el-select>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th style="width: 25%">能源用度</th>
<td style="width: 60%; margin:0; padding: 0">
<table cellpadding="0" cellspacing="0">
<tr>
<td style="text-align: left;">
<el-form-item prop="used" style="margin: 0;padding: 0;width: 100%;">
<el-input v-model="formEnergy.used" placeholder="请输入能源用度" />
</el-form-item>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<th style="width: 25%">日期</th>
<td style="width: 60%; margin:0; padding: 0">
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<el-form-item prop="date" style="margin: 0;padding: 0;width: 100%;">
<el-date-picker value-format="YYYY-MM-DD HH:mm:ss" v-model="formEnergy.date" type="datetime" placeholder="请输入日期" style="width: 100%" />
</el-form-item>
</td>
</tr>
</table>
</td>
</tr>
</table>
<div class="dialog-footer">
<el-button type="primary" @click="handleCancel">关闭</el-button>
<el-button type="primary" @click="onSubmit">保存</el-button>
</div>
</el-form>
</el-dialog>
<!-- <el-dialog v-model="dialogVisible" :title="action == 'add' ? '数据新增' : '数据修改'"
width="800" class="showAll_dialog">
<el-form :inline="true" :model="formEnergy" :rules="rules" ref="energyForm">
<div class="dialog_div">
<table border="3px">
<tr>
<th>供应站编号：</th>
<th><el-select v-model="formEnergy.name" placeholder="请选择">
<el-option label="东部供热站" value="东部供热站" />
<el-option label="行政区供热站" value="行政区供热站" />
<el-option label="福宛里供热站" value="福宛里供热站" />
</el-select></th>
</tr>
<tr>
<th>能源类型</th>
<th><input type="text"></th>
</tr>
<tr>
<th>用度</th>
<th><input type="text"></th>
</tr>
<tr>
<th>日期</th>
<th><input type="text"></th>
</tr>
</table>
<el-button>Default</el-button>
<el-button>Default</el-button>
</div>
</el-form>
<template #footer>
<div style="height: 400px;"></div>
</template>
</el-dialog> -->
</template>
<style scoped lang="less">
.energy-header {
display: flex;
}
.select-clean {
display: flex;
}
.table {
margin-top: 10px;
}
table {
width: 100%;
}
table,
tr,
th,
td {
font-size: 14px;
margin: 0;
padding: 0;
}
table {
width: 100%;
}
table th {
background-color: #dfe8f6;
text-align: center;
padding: 5px 10px;
}
table td {
text-align: center;
background-color: #ffffff;
padding: 5px 10px;
}
.dialog-footer {
text-align: center;
margin-top: 10px;
background-color: #ffffff;
}
//鼠标所在行的颜色
::v-deep .el-table__body tr:hover>td {
background: linear-gradient(to top, rgb(0, 198, 255), rgb(255, 255, 255)) !important;
}
::v-deep .el-table__body tr.current-row>td {
background-color: #92cbf1 !important;
}
.bottom {
// border: 1px solid red;
margin-top: 10px;
width: 100%;
display: flex;
right: 10px;
bottom: 30px;
justify-content: space-between;
.bottom-left {
display: flex;
}
.pager {
display: flex;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment