34 changed files with 9847 additions and 18 deletions
@ -0,0 +1,93 @@ |
|||||||
|
import request from '@/utils/request' |
||||||
|
|
||||||
|
// 系统能耗分析-瞬时能耗分析
|
||||||
|
export const sysEnergy = (data) => { |
||||||
|
return request({ |
||||||
|
url: '/energy/sys', |
||||||
|
method: 'post', |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
// 系统能耗分析-同比分析-查询
|
||||||
|
export const yoyEnergy = (data) => { |
||||||
|
return request({ |
||||||
|
url: '/energy/yoy', |
||||||
|
method: 'post', |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
// 系统能耗分析-环比分析-查询
|
||||||
|
export const momEnergy = (data) => { |
||||||
|
return request({ |
||||||
|
url: '/energy/mom', |
||||||
|
method: 'post', |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
// 系统能耗分析-同比环比分析-查询
|
||||||
|
export const yoyMomEnergy = (data) => { |
||||||
|
return request({ |
||||||
|
url: '/energy/yoyMom', |
||||||
|
method: 'post', |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
// 能源查询
|
||||||
|
export const energyInquiry = (data) => { |
||||||
|
return request({ |
||||||
|
url: '/energy/sys/query', |
||||||
|
method: 'post', |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
// 能源查询-导出
|
||||||
|
export const exportData = (data) => { |
||||||
|
return request({ |
||||||
|
url: '/energy/sys/query/export', |
||||||
|
method: 'post', |
||||||
|
data, |
||||||
|
responseType: 'blob', |
||||||
|
}) |
||||||
|
} |
||||||
|
// 能源分析-机房能耗
|
||||||
|
export const energyAnalyze = (data) => { |
||||||
|
return request({ |
||||||
|
url: '/energy/sys/analyze', |
||||||
|
method: 'post', |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
// 能源分析-机房能耗-导出
|
||||||
|
export const analyzeExport = (data) => { |
||||||
|
return request({ |
||||||
|
url: '/energy/sys/analyze/export', |
||||||
|
method: 'post', |
||||||
|
data, |
||||||
|
responseType: 'blob', |
||||||
|
}) |
||||||
|
} |
||||||
|
// 能源分析-设备能耗
|
||||||
|
export const deviceAnalyze = (data) => { |
||||||
|
return request({ |
||||||
|
url: '/energy/sys/analyze/device', |
||||||
|
method: 'post', |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
|
// 能源分析-设备能耗-导出
|
||||||
|
export const deviceAnalyzeExport = (data) => { |
||||||
|
return request({ |
||||||
|
url: '/energy/sys/analyze/device/export', |
||||||
|
method: 'post', |
||||||
|
data, |
||||||
|
responseType: 'blob', |
||||||
|
}) |
||||||
|
} |
||||||
|
// 能源分析-设备组能耗
|
||||||
|
export const deviceEnergy = (data) => { |
||||||
|
return request({ |
||||||
|
url: '/energy/device', |
||||||
|
method: 'post', |
||||||
|
data |
||||||
|
}) |
||||||
|
} |
||||||
@ -0,0 +1,27 @@ |
|||||||
|
import request from '@/utils/request' |
||||||
|
|
||||||
|
// 查询设备参数列表
|
||||||
|
export function cmpList(query) { |
||||||
|
return request({ |
||||||
|
url: '/device/cmp/list', |
||||||
|
method: 'get', |
||||||
|
params: query |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 根据id查询设备参数信息
|
||||||
|
export function getCMP(cmpId) { |
||||||
|
return request({ |
||||||
|
url: '/device/cmp/' + cmpId, |
||||||
|
method: 'get' |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// 新增设备参数
|
||||||
|
export function addCMP(data) { |
||||||
|
return request({ |
||||||
|
url: '/device/cmp', |
||||||
|
method: 'post', |
||||||
|
data: data |
||||||
|
}) |
||||||
|
} |
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 37 KiB |
|
After Width: | Height: | Size: 154 KiB |
|
After Width: | Height: | Size: 18 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 139 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
|
After Width: | Height: | Size: 4.4 KiB |
@ -0,0 +1,714 @@ |
|||||||
|
<template> |
||||||
|
<div class="main-body"> |
||||||
|
<div class="irregular-border"> |
||||||
|
<div class="main-content"> |
||||||
|
<div class="condition"> |
||||||
|
<div class="condition-left"> |
||||||
|
<div class="time-label">时间类型:</div> |
||||||
|
<el-radio-group |
||||||
|
v-model="dateType" |
||||||
|
style="margin-right: 0.24rem" |
||||||
|
@change="updateDateType" |
||||||
|
> |
||||||
|
<el-radio label="hour">小时</el-radio> |
||||||
|
<el-radio label="day">日</el-radio> |
||||||
|
<el-radio label="month">月</el-radio> |
||||||
|
<el-radio label="year">年</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
<el-date-picker |
||||||
|
v-if="dateType == 'hour'" |
||||||
|
v-model="timeDate" |
||||||
|
@change="handleConfirm" |
||||||
|
type="datetimerange" |
||||||
|
:default-time="['00:00:00', '23:59:59']" |
||||||
|
range-separator="至" |
||||||
|
placeholder="选择日期" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<el-date-picker |
||||||
|
v-model="dayDate" |
||||||
|
type="daterange" |
||||||
|
v-if="dateType == 'day'" |
||||||
|
:key="this.dateType" |
||||||
|
range-separator="至" |
||||||
|
value-format="yyyy-MM-dd" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
@change="dateChange" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<el-date-picker |
||||||
|
v-model="monthDate" |
||||||
|
type="monthrange" |
||||||
|
v-if="dateType == 'month'" |
||||||
|
:key="this.dateType" |
||||||
|
range-separator="至" |
||||||
|
start-placeholder="开始月份" |
||||||
|
end-placeholder="结束月份" |
||||||
|
value-format="yyyy-MM" |
||||||
|
@change="dateChange" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div |
||||||
|
class="years-div" |
||||||
|
v-if="dateType == 'year'" |
||||||
|
:key="this.dateType" |
||||||
|
> |
||||||
|
<el-date-picker |
||||||
|
v-model="startYear" |
||||||
|
type="year" |
||||||
|
placeholder="选择开始年份" |
||||||
|
style="width: 180px" |
||||||
|
value-format="yyyy" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div class="years-word">至</div> |
||||||
|
<el-date-picker |
||||||
|
v-model="endYear" |
||||||
|
type="year" |
||||||
|
placeholder="选择结束年份" |
||||||
|
style="width: 180px" |
||||||
|
value-format="yyyy" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
</div> |
||||||
|
<el-select |
||||||
|
v-model="deviceType" |
||||||
|
placeholder="请选择设备类型" |
||||||
|
style="margin-left: 0.24rem" |
||||||
|
@change="changeData" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in deviceTypes" |
||||||
|
:key="item.dictValue" |
||||||
|
:label="item.dictLabel" |
||||||
|
:value="item.dictValue" |
||||||
|
> |
||||||
|
</el-option> |
||||||
|
</el-select> |
||||||
|
<el-select |
||||||
|
style="margin-left: 0.24rem" |
||||||
|
v-model="systemType" |
||||||
|
placeholder="请选择系统类型" |
||||||
|
clearable |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="dict in systemTypes" |
||||||
|
:key="dict.dictValue" |
||||||
|
:label="dict.dictLabel" |
||||||
|
:value="dict.dictValue" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
<div class="success-btn"> |
||||||
|
<el-button |
||||||
|
type="success" |
||||||
|
style="margin-left: 0.24rem" |
||||||
|
@click="findData" |
||||||
|
>查询</el-button |
||||||
|
> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- <div class="condition-right"> |
||||||
|
<el-button type="warning">导出</el-button> |
||||||
|
</div> --> |
||||||
|
</div> |
||||||
|
<div class="charts-table" v-loading="listLoading"> |
||||||
|
<div class="charts-title"> |
||||||
|
{{ this.titleDate }} {{ this.deviceTitle }} 用电量 |
||||||
|
</div> |
||||||
|
<div class="charts_refs" ref="charts_refs"></div> |
||||||
|
<div class="analysis-table"> |
||||||
|
<table> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th v-if="dateList.length > 0">数据类型</th> |
||||||
|
<th v-for="(item, index) in dateList" :key="index"> |
||||||
|
{{ item }} |
||||||
|
</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr> |
||||||
|
<td v-if="electData.length > 0">用电量(kwh)</td> |
||||||
|
<td v-for="(item, index) in electData" :key="index"> |
||||||
|
{{ item }} |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { format2 } from "@/utils/datetime"; |
||||||
|
import { deviceEnergy } from "@/api/centerairC/energyManage"; |
||||||
|
import * as echarts from "echarts"; |
||||||
|
import { listData } from "@/api/system/dict/data"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
listLoading: false, |
||||||
|
deviceType: "", |
||||||
|
deviceTypes: [], |
||||||
|
dateType: "hour", //默认选择小时 |
||||||
|
timeDate: [], //小时值 |
||||||
|
deviceTitle: "冷水机组", |
||||||
|
dayDate: [], //日值 |
||||||
|
monthDate: [], //月值 |
||||||
|
startYear: "", //开始年份 |
||||||
|
endYear: "", //结束年份 |
||||||
|
startTime: "", //开始日期 |
||||||
|
endTime: "", //结束日期 |
||||||
|
// 表格数据 |
||||||
|
dateList: [], |
||||||
|
electData: [], |
||||||
|
// 折线图数据 |
||||||
|
dateList2: [], |
||||||
|
electData2: [], |
||||||
|
chartInstance2: null, |
||||||
|
option2: {}, |
||||||
|
titleDate: "", |
||||||
|
systemType: "", //系统类型 |
||||||
|
systemTypes: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initializeTimeDate(); |
||||||
|
this.initChart2(); |
||||||
|
this.screenAdapter(); |
||||||
|
window.addEventListener("resize", this.screenAdapter); |
||||||
|
this.initData(); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||||
|
window.removeEventListener("resize", this.screenAdapter); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** 查询系统类型-字典数据列表 */ |
||||||
|
getDictList() { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
let data = { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 100, |
||||||
|
dictType: "sys_type", |
||||||
|
}; |
||||||
|
listData(data) |
||||||
|
.then((response) => { |
||||||
|
this.systemTypes = response.rows; |
||||||
|
if (this.systemTypes.length > 0) { |
||||||
|
this.systemType = this.systemTypes[0].dictValue; |
||||||
|
} |
||||||
|
resolve(); |
||||||
|
}) |
||||||
|
.catch((error) => { |
||||||
|
reject(error); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
/** 查询设备类型列表-字典数据列表 */ |
||||||
|
getList() { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
let data = { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 100, |
||||||
|
dictType: "sys_device_type", |
||||||
|
}; |
||||||
|
listData(data) |
||||||
|
.then((response) => { |
||||||
|
this.electType = []; |
||||||
|
this.deviceTypes = response.rows; |
||||||
|
if (this.deviceTypes.length > 0) { |
||||||
|
this.deviceType = this.deviceTypes[0].dictValue; |
||||||
|
} |
||||||
|
resolve(); |
||||||
|
}) |
||||||
|
.catch((error) => { |
||||||
|
reject(error); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
/** 初始化数据 */ |
||||||
|
initData() { |
||||||
|
Promise.all([this.getDictList(), this.getList()]) |
||||||
|
.then(() => { |
||||||
|
this.getTableData(); |
||||||
|
}) |
||||||
|
.catch((error) => { |
||||||
|
console.error("数据获取失败:", error); |
||||||
|
}); |
||||||
|
}, |
||||||
|
handleConfirm() { |
||||||
|
console.log("打印选择的时间", this.timeDate); |
||||||
|
// const start = new Date(this.timeDate[0]); |
||||||
|
// start.setHours(0, 0, 0, 0); |
||||||
|
// const end = new Date(this.timeDate[1]); |
||||||
|
// end.setHours(23, 59, 59, 999); |
||||||
|
// this.timeDate = [start, end]; |
||||||
|
}, |
||||||
|
// 初始化时间 |
||||||
|
initializeTimeDate() { |
||||||
|
const start = new Date(new Date().setHours(0, 0, 0, 0)); |
||||||
|
const end = new Date(new Date().setHours(23, 59, 59, 59)); |
||||||
|
this.timeDate = [format2(start), format2(end)]; // 更新 |
||||||
|
this.titleDate = format2(start) + "至" + format2(end); |
||||||
|
}, |
||||||
|
// 选择时间类型 |
||||||
|
updateDateType() { |
||||||
|
// this.dateType = this.radio; |
||||||
|
console.log(this.dateType); |
||||||
|
(this.timeDate = []), //小时值 |
||||||
|
(this.dayDate = []), //日值 |
||||||
|
(this.monthDate = []), //月值 |
||||||
|
(this.startYear = ""), //开始年份 |
||||||
|
(this.endYear = ""); //结束年份 |
||||||
|
}, |
||||||
|
// 选中日期事件 |
||||||
|
dateChange() { |
||||||
|
// console.log("打印时间", this.timeform.time1); |
||||||
|
if (!this.dayDate) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.dayDate = []; |
||||||
|
}); |
||||||
|
} |
||||||
|
if (!this.monthDate) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.monthDate = []; |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 选中类型 |
||||||
|
changeData(value) { |
||||||
|
console.log(value); |
||||||
|
// let obj = {}; |
||||||
|
// obj = this.deviceTypes.find((item) => { |
||||||
|
// return item.value === value; |
||||||
|
// }); |
||||||
|
// console.log(obj.label); |
||||||
|
}, |
||||||
|
// 查询 |
||||||
|
findData() { |
||||||
|
console.log(this.dateType); |
||||||
|
switch (this.dateType) { |
||||||
|
case "hour": |
||||||
|
if (!this.timeDate) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
this.titleDate = |
||||||
|
format2(this.timeDate[0]) + "至" + format2(this.timeDate[1]); |
||||||
|
this.getTableData(); |
||||||
|
} |
||||||
|
break; |
||||||
|
case "day": |
||||||
|
if (this.dayDate.length === 0) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
const newLength = |
||||||
|
new Date(this.dayDate[1]).getTime() - |
||||||
|
new Date(this.dayDate[0]).getTime(); |
||||||
|
const dayDiff = Math.floor(newLength / (1000 * 60 * 60 * 24)); |
||||||
|
if (dayDiff > 31) { |
||||||
|
this.showMessage( |
||||||
|
"最多只能选择30天区间，请重新选择再查询！", |
||||||
|
"warning" |
||||||
|
); |
||||||
|
} else { |
||||||
|
this.titleDate = this.dayDate[0] + "至" + this.dayDate[1]; |
||||||
|
this.getTableData(); |
||||||
|
} |
||||||
|
} |
||||||
|
break; |
||||||
|
case "month": |
||||||
|
if (this.monthDate.length === 0) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
const [start, end] = this.monthDate; |
||||||
|
const startDate = new Date(start); |
||||||
|
const endDate = new Date(end); |
||||||
|
const startYear = startDate.getFullYear(); |
||||||
|
const startMonth = startDate.getMonth(); |
||||||
|
const endYear = endDate.getFullYear(); |
||||||
|
const endMonth = endDate.getMonth(); |
||||||
|
const monthDiff = |
||||||
|
(endYear - startYear) * 12 + (endMonth - startMonth); |
||||||
|
if (monthDiff > 12) { |
||||||
|
this.showMessage( |
||||||
|
"最多只能选择12个月区间，请重新选择再查询！", |
||||||
|
"warning" |
||||||
|
); |
||||||
|
} else { |
||||||
|
this.titleDate = this.monthDate[0] + "至" + this.monthDate[1]; |
||||||
|
this.getTableData(); |
||||||
|
} |
||||||
|
} |
||||||
|
break; |
||||||
|
case "year": |
||||||
|
if (!this.startYear || !this.endYear) { |
||||||
|
this.showMessage("请选择全年份区间！", "warning"); |
||||||
|
} else if (this.startYear > this.endYear) { |
||||||
|
this.showMessage("结束年份要大于开始年份！", "warning"); |
||||||
|
} else { |
||||||
|
this.titleDate = this.startYear + "至" + this.endYear; |
||||||
|
this.getTableData(); |
||||||
|
} |
||||||
|
break; |
||||||
|
default: |
||||||
|
break; |
||||||
|
} |
||||||
|
|
||||||
|
// 找到el-select的label的值 |
||||||
|
let value = this.deviceType; |
||||||
|
let obj = {}; |
||||||
|
obj = this.deviceTypes.find((item) => { |
||||||
|
return item.dictValue === value; |
||||||
|
}); |
||||||
|
this.deviceTitle = obj.dictLabel; |
||||||
|
console.log(obj.dictLabel); |
||||||
|
}, |
||||||
|
// 显示消息的函数 |
||||||
|
showMessage(message, type) { |
||||||
|
this.$message({ |
||||||
|
message: message, |
||||||
|
type: type, |
||||||
|
}); |
||||||
|
}, |
||||||
|
//请求数据 |
||||||
|
getTableData() { |
||||||
|
if (this.dateType == "hour") { |
||||||
|
this.startTime = format2(this.timeDate[0]); |
||||||
|
this.endTime = format2(this.timeDate[1]); |
||||||
|
} else if (this.dateType == "day") { |
||||||
|
this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : ""; |
||||||
|
this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : ""; |
||||||
|
} else if (this.dateType == "month") { |
||||||
|
this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : ""; |
||||||
|
this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : ""; |
||||||
|
} else if (this.dateType == "year") { |
||||||
|
(this.startTime = this.startYear), (this.endTime = this.endYear); |
||||||
|
} |
||||||
|
let data = { |
||||||
|
timeType: this.dateType, |
||||||
|
startTime: this.startTime, |
||||||
|
endTime: this.endTime, |
||||||
|
deviceType: this.deviceType, |
||||||
|
systemType: this.systemType, |
||||||
|
}; |
||||||
|
console.log("查询数据参数", data); |
||||||
|
// this.option2.series[0].data = ["1"]; |
||||||
|
// this.option2.xAxis.data = ["1"]; |
||||||
|
// this.screenAdapter(); |
||||||
|
// this.chartInstance2.setOption(this.option2); |
||||||
|
this.listLoading = true; |
||||||
|
deviceEnergy(data).then((res) => { |
||||||
|
console.log("查询返回", res); |
||||||
|
if (res.code == 200 && res.data.lineTimes) { |
||||||
|
if (res.data.times && res.data.times.length > 0) { |
||||||
|
// 表格数据 .map(time => `${time}:00`) |
||||||
|
this.dateList = res.data.times; |
||||||
|
this.electData = res.data.data[0].meter; |
||||||
|
console.log("表头", this.dateList); |
||||||
|
console.log("表格内容", this.electData); |
||||||
|
} else { |
||||||
|
this.dateList = []; |
||||||
|
this.electData = []; |
||||||
|
} |
||||||
|
|
||||||
|
// 图例数据 |
||||||
|
this.dateList2 = res.data.lineTimes.map((item) => { |
||||||
|
// 使用slice()方法截取需要的部分 |
||||||
|
return item.slice(0, 16); |
||||||
|
}); |
||||||
|
this.electData2 = res.data.data[1].lineMeter; |
||||||
|
|
||||||
|
this.option2.series[0].data = this.electData2; |
||||||
|
this.option2.xAxis.data = this.dateList2; |
||||||
|
console.log("x轴", this.dateList2); |
||||||
|
console.log("折线图数据", this.electData2); |
||||||
|
this.screenAdapter(); |
||||||
|
this.chartInstance2.setOption(this.option2); |
||||||
|
} else { |
||||||
|
this.dateList = []; |
||||||
|
this.electData = []; |
||||||
|
this.option2.series[0].data = []; |
||||||
|
this.option2.xAxis.data = []; |
||||||
|
this.screenAdapter(); |
||||||
|
this.chartInstance2.setOption(this.option2); |
||||||
|
} |
||||||
|
}); |
||||||
|
// Just to simulate the time of the request |
||||||
|
setTimeout(() => { |
||||||
|
this.listLoading = false; |
||||||
|
}, 1.0 * 1000); |
||||||
|
}, |
||||||
|
//初始化chartInstance2对象 折线图 |
||||||
|
initChart2() { |
||||||
|
this.chartInstance2 = echarts.init(this.$refs.charts_refs); |
||||||
|
this.option2 = { |
||||||
|
tooltip: { |
||||||
|
trigger: "axis", |
||||||
|
// 使用 formatter 设定 tooltip 内容格式 |
||||||
|
formatter: function (params) { |
||||||
|
let seriesHTML = ""; |
||||||
|
params.forEach(function (item) { |
||||||
|
seriesHTML += |
||||||
|
"<div>" + |
||||||
|
item.seriesName + |
||||||
|
': <span style="color: #000000; font-weight: bold;">' + |
||||||
|
item.value + |
||||||
|
"</span></div>"; |
||||||
|
}); |
||||||
|
return "<div>" + params[0].name + "</div>" + seriesHTML; |
||||||
|
}, |
||||||
|
// 自定义 tooltip 内容 |
||||||
|
formatter: function (params) { |
||||||
|
var res = params[0].name + "<br/>"; |
||||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||||
|
var seriesName = params[i].seriesName; |
||||||
|
var value = params[i].value; |
||||||
|
var marker = |
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + |
||||||
|
params[i].color + |
||||||
|
'"></span>'; |
||||||
|
// 根据不同德seriesName 返回不同的单位 |
||||||
|
if (seriesName === "用电量") { |
||||||
|
res += |
||||||
|
marker + |
||||||
|
seriesName + |
||||||
|
":" + |
||||||
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||||
|
value + |
||||||
|
" " + |
||||||
|
"kwh" + |
||||||
|
"</span><br>"; |
||||||
|
} else { |
||||||
|
res += |
||||||
|
marker + |
||||||
|
seriesName + |
||||||
|
":" + |
||||||
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||||
|
value + |
||||||
|
"</span><br>"; |
||||||
|
} |
||||||
|
} |
||||||
|
return res; |
||||||
|
}, |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
show: false, // 不显示图例 |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
top: "5%", |
||||||
|
left: "3%", |
||||||
|
right: "4.4%", |
||||||
|
bottom: "20%", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: "category", |
||||||
|
data: this.dateList2, |
||||||
|
//设置为true代表离零刻度间隔一段距离 |
||||||
|
boundaryGap: true, |
||||||
|
// 修饰刻度标签的颜色即x坐标数据 |
||||||
|
axisLabel: { |
||||||
|
// interval: 0, //强制显示所有x轴数据 |
||||||
|
// rotate: 30, //x轴坐标字体倾斜30度 |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, // 不显示坐标轴刻度线 |
||||||
|
}, |
||||||
|
// x坐标轴的颜色 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#e2e6f0", |
||||||
|
}, |
||||||
|
}, //x轴分割线 |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
min: 0, |
||||||
|
miniInterval: 5, |
||||||
|
type: "value", |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
// 显示y坐标轴 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", // 设置 y 轴线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#1a3d62", // 设置分割线的颜色 |
||||||
|
type: "dashed", // 设置分割线为虚线 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "用电量", |
||||||
|
type: "line", |
||||||
|
smooth: true, |
||||||
|
symbol: "circle", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
data: this.electData2, |
||||||
|
sampling: "lttb", //降采样策略 |
||||||
|
// 设置拐点颜色以及边框 |
||||||
|
// itemStyle: { |
||||||
|
// color: "#0184d5", |
||||||
|
// borderColor: "rgba(221, 220, 107, .1)", |
||||||
|
// borderWidth: 12 |
||||||
|
// }, |
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#01c29b", //折线点的颜色 |
||||||
|
lineStyle: { |
||||||
|
color: "#01c29b", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
//线性渐变 |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(1, 194, 155, 1)", // 0% 处的颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 0.8, |
||||||
|
color: "rgba(1, 194, 155,0.2)", // 100% 处的颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
// global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.chartInstance2.setOption(this.option2, true); |
||||||
|
}, |
||||||
|
// 元素大小 |
||||||
|
screenAdapter() { |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = this.$refs.charts_refs.offsetWidth / 130; |
||||||
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||||
|
const adapterOption = { |
||||||
|
// x轴坐标字体大小 |
||||||
|
xAxis: { |
||||||
|
axisLabel: { |
||||||
|
fontSize: titleFontSize * 1.5, |
||||||
|
}, |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
axisLabel: { |
||||||
|
fontSize: titleFontSize * 1.5, |
||||||
|
}, |
||||||
|
}, |
||||||
|
// 拖拽X轴 |
||||||
|
dataZoom: [ |
||||||
|
{ |
||||||
|
type: "slider", //inside鼠标缩放 |
||||||
|
show: this.showZoom, |
||||||
|
height: titleFontSize, // 设置控制区域的高度为 20 像素 |
||||||
|
// fillerColor: 'rgba(255, 0, 0, 0.5)', // 设置选中区域的颜色为半透明的红色 |
||||||
|
// backgroundColor: 'rgba(0, 0, 0, 0.1)', // 设置背景颜色为透明度为 0.1 的黑色 |
||||||
|
start: 0, |
||||||
|
end: 100, |
||||||
|
xAxisIndex: [0], |
||||||
|
handleSize: "120%", // 设置滑块大小为默认大小的 120% |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance2.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance2.resize(); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.condition { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 0.24rem; |
||||||
|
|
||||||
|
.condition-left { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
.years-div { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.years-word { |
||||||
|
font-size: 14px; |
||||||
|
margin: 0 5px; |
||||||
|
color: #388ff3; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.time-label { |
||||||
|
font-size: 16px; |
||||||
|
line-height: 7px; |
||||||
|
margin-right: 12px; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.charts-title { |
||||||
|
font-size: 0.24rem; |
||||||
|
line-height: 0.07rem; |
||||||
|
letter-spacing: 0.02rem; |
||||||
|
color: #1f70e9; |
||||||
|
margin: 0.3rem 0; |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.analysis-table table thead th { |
||||||
|
min-width: 1.6rem; |
||||||
|
} |
||||||
|
|
||||||
|
.analysis-table { |
||||||
|
margin-bottom: 0.37rem; |
||||||
|
} |
||||||
|
|
||||||
|
.main-content { |
||||||
|
min-height: 6.9rem; |
||||||
|
} |
||||||
|
|
||||||
|
.charts_refs { |
||||||
|
width: 17rem; |
||||||
|
height: 4.55rem; |
||||||
|
margin-left: -0.35rem; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,816 @@ |
|||||||
|
<template> |
||||||
|
<div class="main-body"> |
||||||
|
<div class="irregular-border"> |
||||||
|
<div class="main-content"> |
||||||
|
<div class="condition"> |
||||||
|
<div class="condition-left"> |
||||||
|
<div class="time-label">时间类型:</div> |
||||||
|
<el-radio-group |
||||||
|
v-model="dateType" |
||||||
|
style="margin-right: 0.24rem" |
||||||
|
@change="updateDateType" |
||||||
|
> |
||||||
|
<el-radio label="hour">小时</el-radio> |
||||||
|
<el-radio label="day">日</el-radio> |
||||||
|
<el-radio label="month">月</el-radio> |
||||||
|
<el-radio label="year">年</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
<el-date-picker |
||||||
|
v-model="timeDate" |
||||||
|
:default-time="['00:00:00', '23:59:59']" |
||||||
|
type="datetimerange" |
||||||
|
range-separator="至" |
||||||
|
v-if="dateType == 'hour'" |
||||||
|
placeholder="选择日期" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<el-date-picker |
||||||
|
v-model="dayDate" |
||||||
|
type="daterange" |
||||||
|
v-if="dateType == 'day'" |
||||||
|
:key="this.dateType" |
||||||
|
range-separator="至" |
||||||
|
value-format="yyyy-MM-dd" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
@change="dateChange" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<el-date-picker |
||||||
|
v-model="monthDate" |
||||||
|
type="monthrange" |
||||||
|
v-if="dateType == 'month'" |
||||||
|
:key="this.dateType" |
||||||
|
range-separator="至" |
||||||
|
start-placeholder="开始月份" |
||||||
|
end-placeholder="结束月份" |
||||||
|
value-format="yyyy-MM" |
||||||
|
@change="dateChange" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div |
||||||
|
class="years-div" |
||||||
|
v-if="dateType == 'year'" |
||||||
|
:key="this.dateType" |
||||||
|
> |
||||||
|
<el-date-picker |
||||||
|
v-model="startYear" |
||||||
|
type="year" |
||||||
|
placeholder="选择开始年份" |
||||||
|
style="width: 180px" |
||||||
|
value-format="yyyy" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div class="years-word">至</div> |
||||||
|
<el-date-picker |
||||||
|
v-model="endYear" |
||||||
|
type="year" |
||||||
|
placeholder="选择结束年份" |
||||||
|
style="width: 180px" |
||||||
|
value-format="yyyy" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
</div> |
||||||
|
<el-select |
||||||
|
multiple |
||||||
|
collapse-tags |
||||||
|
style="margin: 0 0.24rem; width: 250px" |
||||||
|
v-model="electType" |
||||||
|
placeholder="请选择查询类型" |
||||||
|
@change="handleSelectChange" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="item in electTypes" |
||||||
|
:key="item.id" |
||||||
|
:label="item.otherName" |
||||||
|
:value="item.id" |
||||||
|
></el-option> |
||||||
|
</el-select> |
||||||
|
<el-select |
||||||
|
style="margin: 0 10px" |
||||||
|
v-model="systemType" |
||||||
|
placeholder="请选择系统类型" |
||||||
|
clearable |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="dict in systemTypes" |
||||||
|
:key="dict.dictValue" |
||||||
|
:label="dict.dictLabel" |
||||||
|
:value="dict.dictValue" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
<div class="success-btn"> |
||||||
|
<el-button type="success" @click="findData">查询</el-button> |
||||||
|
</div> |
||||||
|
<div class="primary-btn"> |
||||||
|
<el-button type="primary" @click="leadingPrint">打印</el-button> |
||||||
|
</div> |
||||||
|
<div class="warning-btn"> |
||||||
|
<el-button type="warning" @click="exportData">导出</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="charts-table" v-loading="listLoading"> |
||||||
|
<div class="details_ref" ref="details_ref"></div> |
||||||
|
<div class="table-content" style="width: 100%"> |
||||||
|
<el-table |
||||||
|
border |
||||||
|
:data="tableData" |
||||||
|
style="width: 100%" |
||||||
|
v-if="tableData && tableData.length > 0" |
||||||
|
> |
||||||
|
<el-table-column |
||||||
|
v-for="header in headers" |
||||||
|
:key="header.key" |
||||||
|
:prop="header.key" |
||||||
|
:label="header.label" |
||||||
|
> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
<div class="page" v-if="tableData && tableData.length > 0"> |
||||||
|
<el-pagination |
||||||
|
background |
||||||
|
style="width: 100%; height: 20%" |
||||||
|
@size-change="handleSizeChange" |
||||||
|
@current-change="handleCurrentChange" |
||||||
|
:current-page="this.pageParm.page" |
||||||
|
:page-size="10" |
||||||
|
layout="->,total, sizes, prev, pager, next, jumper" |
||||||
|
:page-sizes="[10, 20, 30, 50, 100, 200, 9999]" |
||||||
|
:total="this.pageParm.total" |
||||||
|
> |
||||||
|
</el-pagination> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-dialog |
||||||
|
:visible.sync="dialogPrintVisible" |
||||||
|
title="打印预览" |
||||||
|
width="900px" |
||||||
|
> |
||||||
|
<div id="report" ref="report" class="report"> |
||||||
|
<table |
||||||
|
border="1" |
||||||
|
style=" |
||||||
|
table-layout: fixed; |
||||||
|
width: 100%; |
||||||
|
border: 1px solid #e2e6f0; |
||||||
|
margin-bottom: 35px; |
||||||
|
" |
||||||
|
> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th rowspan="1" :colspan="headers.length">设备能耗报表</th> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<th |
||||||
|
align="center" |
||||||
|
v-for="(item, index) in headers" |
||||||
|
:key="index + 2" |
||||||
|
> |
||||||
|
{{ item.label }} |
||||||
|
</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tr v-for="(item, index) in tableData" :key="index"> |
||||||
|
<td align="center" v-for="(value, key) in item" :key="key"> |
||||||
|
{{ value }} |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
<div |
||||||
|
class="detail" |
||||||
|
style=" |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
font-size: 14px; |
||||||
|
justify-content: space-between; |
||||||
|
flex-wrap: nowrap; |
||||||
|
width: 40%; |
||||||
|
color: #ffffff; |
||||||
|
" |
||||||
|
> |
||||||
|
<div>操作员: {{ this.userName }}</div> |
||||||
|
<div class="print-date">日期： {{ this.operationDate }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-row type="flex" justify="end" style="margin-top: 0.2rem"> |
||||||
|
<el-col :span="2"> |
||||||
|
<el-button type="info" @click="dialogPrintVisible = false" |
||||||
|
>取消</el-button |
||||||
|
> |
||||||
|
</el-col> |
||||||
|
<el-col :span="2" style="margin-left: 60px"> |
||||||
|
<el-button type="success" @click="surePrint">确认</el-button> |
||||||
|
</el-col> |
||||||
|
</el-row> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { getDay, format2 } from "@/utils/datetime"; |
||||||
|
import * as echarts from "echarts"; |
||||||
|
import { |
||||||
|
deviceAnalyze, |
||||||
|
deviceAnalyzeExport, |
||||||
|
} from "@/api/centerairC/energyManage"; |
||||||
|
import { cpmList } from "@/api/device/gather"; |
||||||
|
import { listData } from "@/api/system/dict/data"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
listLoading: false, |
||||||
|
dateType: "hour", //默认选择小时 |
||||||
|
timeDate: [], //小时值 |
||||||
|
dayDate: [], //日值 |
||||||
|
monthDate: [], //月值 |
||||||
|
startYear: "", //开始年份 |
||||||
|
endYear: "", //结束年份 |
||||||
|
startTime: "", //开始日期 |
||||||
|
endTime: "", //结束日期 |
||||||
|
// 图例数据 |
||||||
|
timeData: [], |
||||||
|
dataArr: [], |
||||||
|
//表格数据 |
||||||
|
curValue2: [], |
||||||
|
lastValue2: [], |
||||||
|
mom2: [], |
||||||
|
unitValue: "", //单位 |
||||||
|
electType: [], |
||||||
|
electTypes: [], |
||||||
|
selectElect: [], |
||||||
|
// 动态表头 |
||||||
|
headers: [ |
||||||
|
// { key: 'name', label: 'Name' }, |
||||||
|
// { key: 'age', label: 'Age' }, |
||||||
|
// { key: 'gender', label: 'Gender' } |
||||||
|
], |
||||||
|
tableData: [ |
||||||
|
// { name: 'Alice', age: 26, gender: 'Female' }, |
||||||
|
// { name: 'Bob', age: 30, gender: 'Male' }, |
||||||
|
// { name: 'Charlie', age: 25, gender: 'Male' } |
||||||
|
], |
||||||
|
pageParm: { |
||||||
|
page: 1, //开始页面页数，初始页 |
||||||
|
pageSize: 10, //每页的数据条数 |
||||||
|
total: null, //页数总数 |
||||||
|
}, |
||||||
|
dialogPrintVisible: false, |
||||||
|
userName: "", //操作员 |
||||||
|
operationDate: getDay(0), //操作日期 |
||||||
|
systemType: "", //系统类型 |
||||||
|
systemTypes: [], |
||||||
|
electType: "", |
||||||
|
electTypes: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initData(); |
||||||
|
this.initializeTimeDate(); |
||||||
|
this.initChart1(); |
||||||
|
window.addEventListener("resize", this.screenAdapter); |
||||||
|
this.screenAdapter(); |
||||||
|
this.userName = sessionStorage.getItem("userName"); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||||
|
window.removeEventListener("resize", this.screenAdapter); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** 查询系统类型-字典数据列表 */ |
||||||
|
getDictList() { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
let data = { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 100, |
||||||
|
dictType: "sys_type", |
||||||
|
}; |
||||||
|
listData(data) |
||||||
|
.then((response) => { |
||||||
|
this.systemTypes = response.rows; |
||||||
|
if (this.systemTypes.length > 0) { |
||||||
|
this.systemType = this.systemTypes[0].dictValue; |
||||||
|
} |
||||||
|
resolve(); |
||||||
|
}) |
||||||
|
.catch((error) => { |
||||||
|
reject(error); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
/** 查询设备类型列表 */ |
||||||
|
getList() { |
||||||
|
return new Promise((resolve, reject) => { |
||||||
|
let data = { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 100, |
||||||
|
mtType: "5", // 标准ModBus电表 |
||||||
|
}; |
||||||
|
cpmList(data) |
||||||
|
.then((response) => { |
||||||
|
this.electType = []; |
||||||
|
this.electTypes = response.rows; |
||||||
|
this.electType = [this.electTypes[0].id]; |
||||||
|
console.log("this.electTypes", this.electTypes); |
||||||
|
console.log("this.electType", this.electType); |
||||||
|
this.handleSelectChange(); |
||||||
|
resolve(); |
||||||
|
}) |
||||||
|
.catch((error) => { |
||||||
|
reject(error); |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
/** 初始化数据 */ |
||||||
|
initData() { |
||||||
|
Promise.all([this.getDictList(), this.getList()]) |
||||||
|
.then(() => { |
||||||
|
this.getTableData(); |
||||||
|
this.getChartsData(); |
||||||
|
}) |
||||||
|
.catch((error) => { |
||||||
|
console.error("数据获取失败:", error); |
||||||
|
}); |
||||||
|
}, |
||||||
|
|
||||||
|
//分页组件切换每页数量 |
||||||
|
handleSizeChange(val) { |
||||||
|
this.pageParm.pageSize = val; |
||||||
|
this.pageParm.page = 1; |
||||||
|
// 更新表格 |
||||||
|
this.getTableData(); |
||||||
|
}, |
||||||
|
//分页组件转页 |
||||||
|
handleCurrentChange(val) { |
||||||
|
this.pageParm.page = val; |
||||||
|
// 更新表格 |
||||||
|
this.getTableData(); |
||||||
|
}, |
||||||
|
// 选择el-select |
||||||
|
handleSelectChange() { |
||||||
|
console.log("----和默认选中值比较", this.electType); |
||||||
|
this.selectElect = this.electType.map((v) => { |
||||||
|
const selectedItem = this.electTypes.find((item) => item.id === v); |
||||||
|
return { |
||||||
|
name: selectedItem ? selectedItem.otherName : "", |
||||||
|
value: v, |
||||||
|
}; |
||||||
|
}); |
||||||
|
console.log("this.selectElect", this.selectElect); |
||||||
|
}, |
||||||
|
// 初始化时间 |
||||||
|
initializeTimeDate() { |
||||||
|
const start = new Date(new Date().setHours(0, 0, 0, 0)); |
||||||
|
const end = new Date(new Date().setHours(23, 59, 59, 59)); |
||||||
|
this.timeDate = [format2(start), format2(end)]; // 更新 |
||||||
|
}, |
||||||
|
// 选择时间类型 |
||||||
|
updateDateType() { |
||||||
|
// this.dateType = this.radio; |
||||||
|
console.log(this.dateType); |
||||||
|
(this.timeDate = []), //小时值 |
||||||
|
(this.dayDate = []), //日值 |
||||||
|
(this.monthDate = []), //月值 |
||||||
|
(this.startYear = ""), //开始年份 |
||||||
|
(this.endYear = ""); //结束年份 |
||||||
|
}, |
||||||
|
// 选中日期事件 |
||||||
|
dateChange() { |
||||||
|
// console.log("打印时间", this.timeform.time1); |
||||||
|
if (!this.dayDate) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.dayDate = []; |
||||||
|
}); |
||||||
|
} |
||||||
|
if (!this.monthDate) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.monthDate = []; |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 查询 |
||||||
|
findData() { |
||||||
|
this.pageParm.page = 1; |
||||||
|
console.log("this.dateType", this.dateType); |
||||||
|
console.log("this.timeDate", this.timeDate); |
||||||
|
switch (this.dateType) { |
||||||
|
case "hour": |
||||||
|
if (!this.timeDate) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
this.getTableData(); |
||||||
|
this.getChartsData(); |
||||||
|
} |
||||||
|
break; |
||||||
|
case "day": |
||||||
|
if (this.dayDate.length === 0) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
this.getTableData(); |
||||||
|
this.getChartsData(); |
||||||
|
} |
||||||
|
break; |
||||||
|
case "month": |
||||||
|
if (this.monthDate.length === 0) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
this.getTableData(); |
||||||
|
this.getChartsData(); |
||||||
|
} |
||||||
|
break; |
||||||
|
case "year": |
||||||
|
if (!this.startYear || !this.endYear) { |
||||||
|
this.showMessage("请选择全年份区间！", "warning"); |
||||||
|
} else if (this.startYear > this.endYear) { |
||||||
|
this.showMessage("结束年份要大于开始年份！", "warning"); |
||||||
|
} else { |
||||||
|
this.getTableData(); |
||||||
|
this.getChartsData(); |
||||||
|
} |
||||||
|
break; |
||||||
|
default: |
||||||
|
break; |
||||||
|
} |
||||||
|
}, |
||||||
|
// 显示消息的函数 |
||||||
|
showMessage(message, type) { |
||||||
|
this.$message({ |
||||||
|
message: message, |
||||||
|
type: type, |
||||||
|
}); |
||||||
|
}, |
||||||
|
//请求表格数据 |
||||||
|
getTableData() { |
||||||
|
if (this.dateType == "hour") { |
||||||
|
this.startTime = format2(this.timeDate[0]); |
||||||
|
this.endTime = format2(this.timeDate[1]); |
||||||
|
} else if (this.dateType == "day") { |
||||||
|
this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : ""; |
||||||
|
this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : ""; |
||||||
|
} else if (this.dateType == "month") { |
||||||
|
this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : ""; |
||||||
|
this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : ""; |
||||||
|
} else if (this.dateType == "year") { |
||||||
|
(this.startTime = this.startYear), (this.endTime = this.endYear); |
||||||
|
} |
||||||
|
let data = { |
||||||
|
timeType: this.dateType, |
||||||
|
startTime: this.startTime, |
||||||
|
endTime: this.endTime, |
||||||
|
pageNum: this.pageParm.page, |
||||||
|
pageSize: this.pageParm.pageSize, |
||||||
|
searchParams: this.selectElect, |
||||||
|
systemType: this.systemType, |
||||||
|
}; |
||||||
|
console.log("查询数据参数", data); |
||||||
|
this.listLoading = true; |
||||||
|
deviceAnalyze(data).then((res) => { |
||||||
|
console.log("查询返回", res); |
||||||
|
if (res.code == 200 && res.data.content) { |
||||||
|
// 格式化 content 填充 this.tableData |
||||||
|
this.tableData = res.data.content[1].timeStr.map((date, index) => { |
||||||
|
const rowData = { date }; |
||||||
|
res.data.content[0].dataList.forEach((data, dataIndex) => { |
||||||
|
rowData[`data${dataIndex + 1}`] = data.value[index]; |
||||||
|
}); |
||||||
|
return rowData; |
||||||
|
}); |
||||||
|
console.log("tableData", this.tableData); |
||||||
|
// 格式化 content 填充 header |
||||||
|
this.headers = [ |
||||||
|
{ key: "date", label: "时间" }, |
||||||
|
...res.data.content[0].dataList.map((data, index) => { |
||||||
|
const matched = this.electTypes.find( |
||||||
|
(item) => item.value === data.name |
||||||
|
); |
||||||
|
const label = matched ? matched.label : ""; |
||||||
|
return { |
||||||
|
key: `data${index + 1}`, |
||||||
|
label: label, |
||||||
|
}; |
||||||
|
}), |
||||||
|
]; |
||||||
|
this.pageParm.total = res.data.totalSize; |
||||||
|
console.log("header", this.headers); |
||||||
|
} else { |
||||||
|
this.tableData = []; |
||||||
|
this.headers = []; |
||||||
|
} |
||||||
|
}); |
||||||
|
// Just to simulate the time of the request |
||||||
|
setTimeout(() => { |
||||||
|
this.listLoading = false; |
||||||
|
}, 1.0 * 1000); |
||||||
|
}, |
||||||
|
//请求图表数据 |
||||||
|
getChartsData() { |
||||||
|
console.log("???????????????"); |
||||||
|
debugger; |
||||||
|
this.timeData = []; |
||||||
|
this.dataArr = []; |
||||||
|
if (this.dateType == "hour") { |
||||||
|
this.startTime = format2(this.timeDate[0]); |
||||||
|
this.endTime = format2(this.timeDate[1]); |
||||||
|
} else if (this.dateType == "day") { |
||||||
|
this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : ""; |
||||||
|
this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : ""; |
||||||
|
} else if (this.dateType == "month") { |
||||||
|
this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : ""; |
||||||
|
this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : ""; |
||||||
|
} else if (this.dateType == "year") { |
||||||
|
(this.startTime = this.startYear), (this.endTime = this.endYear); |
||||||
|
} |
||||||
|
let data = { |
||||||
|
timeType: this.dateType, |
||||||
|
startTime: this.startTime, |
||||||
|
endTime: this.endTime, |
||||||
|
pageNum: 0, |
||||||
|
pageSize: 10, |
||||||
|
searchParams: this.selectElect, |
||||||
|
systemType: this.systemType, |
||||||
|
}; |
||||||
|
console.log("查询数据参数", data); |
||||||
|
deviceAnalyze(data).then((res) => { |
||||||
|
console.log("查询返回", res); |
||||||
|
if (res.code == 200 && res.data.content) { |
||||||
|
this.timeData = res.data.content[1].timeStr; |
||||||
|
// 具体看看怎么拿到x组数据 得到一个数组，对象{name：需要匹配select数据源,data} |
||||||
|
console.log( |
||||||
|
"res.data.content[0].dataList", |
||||||
|
res.data.content[0].dataList |
||||||
|
); |
||||||
|
this.dataArr = []; |
||||||
|
this.dataArr = res.data.content[0].dataList; |
||||||
|
this.dataArr.forEach((obj) => { |
||||||
|
const match = this.electTypes.find((s) => s.value === obj.name); |
||||||
|
if (match) { |
||||||
|
obj.name = match.label; |
||||||
|
} |
||||||
|
obj.type = "line"; |
||||||
|
obj.smooth = true; |
||||||
|
(obj.sampling = "lttb"), |
||||||
|
(obj.showSymbol = false), |
||||||
|
(obj.data = obj.value); |
||||||
|
delete obj.value; |
||||||
|
}); |
||||||
|
console.log("图表数据", this.dataArr); |
||||||
|
this.option1.series = this.dataArr; |
||||||
|
this.option1.xAxis.data = this.timeData; |
||||||
|
// 清空图表 |
||||||
|
this.chartInstance1.clear(); |
||||||
|
this.screenAdapter(); |
||||||
|
this.chartInstance1.setOption(this.option1); |
||||||
|
} else { |
||||||
|
this.timeData = []; |
||||||
|
this.curValue2 = []; |
||||||
|
this.lastValue2 = []; |
||||||
|
this.mom2 = []; |
||||||
|
this.option1.series = []; |
||||||
|
this.option1.xAxis.data = []; |
||||||
|
// 清空图表 |
||||||
|
this.chartInstance1.clear(); |
||||||
|
this.screenAdapter(); |
||||||
|
this.chartInstance1.setOption(this.option1); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
initChart1() { |
||||||
|
this.chartInstance1 = echarts.init(this.$refs.details_ref); |
||||||
|
this.option1 = { |
||||||
|
tooltip: { |
||||||
|
trigger: "axis", |
||||||
|
// 以下为鼠标hover时的背景颜色 |
||||||
|
showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms |
||||||
|
axisPointer: { |
||||||
|
type: "shadow", |
||||||
|
shadowStyle: { |
||||||
|
color: "rgba(30, 69, 113, 0.15)", |
||||||
|
width: "", |
||||||
|
}, |
||||||
|
}, |
||||||
|
valueFormatter: function (value) { |
||||||
|
return value + " " + "kwh"; |
||||||
|
}, |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
show: true, |
||||||
|
top: "0%", |
||||||
|
textStyle: { |
||||||
|
fontSize: 14, // 设置图例文字的大小为 14 像素 |
||||||
|
color: "#ffffff", |
||||||
|
}, |
||||||
|
}, |
||||||
|
|
||||||
|
grid: { |
||||||
|
top: "9%", |
||||||
|
left: "3%", |
||||||
|
right: "2%", |
||||||
|
bottom: "25%", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: "category", |
||||||
|
//设置为true代表离零刻度间隔一段距离 |
||||||
|
boundaryGap: true, |
||||||
|
// 修饰刻度标签的颜色即x坐标数据 |
||||||
|
axisLabel: { |
||||||
|
// interval: 0, //强制显示所有x轴数据 |
||||||
|
// rotate: 30, //x轴坐标字体倾斜30度 |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, // 不显示坐标轴刻度线 |
||||||
|
}, |
||||||
|
// x坐标轴的颜色 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#e2e6f0", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
min: 0, |
||||||
|
miniInterval: 5, |
||||||
|
type: "value", |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
// 显示y坐标轴 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", // 设置 y 轴线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#1a3d62", // 设置分割线的颜色 |
||||||
|
type: "dashed", // 设置分割线为虚线 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
// 拖拽X轴 |
||||||
|
dataZoom: [ |
||||||
|
{ |
||||||
|
type: "slider", //inside鼠标缩放 |
||||||
|
show: true, |
||||||
|
height: 15, // 设置控制区域的高度为 20 像素 |
||||||
|
// fillerColor: 'rgba(255, 0, 0, 0.5)', // 设置选中区域的颜色为半透明的红色 |
||||||
|
// backgroundColor: 'rgba(0, 0, 0, 0.1)', // 设置背景颜色为透明度为 0.1 的黑色 |
||||||
|
start: 0, |
||||||
|
end: 100, |
||||||
|
xAxisIndex: [0], |
||||||
|
handleSize: "120%", // 设置滑块大小为默认大小的 120% |
||||||
|
textStyle: { |
||||||
|
fontSize: 12, // 设置字体大小为 12px |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.chartInstance1.setOption(this.option1, true); |
||||||
|
}, |
||||||
|
// 折线图自适应 |
||||||
|
screenAdapter() { |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = (this.$refs.details_ref.offsetWidth / 100) * 1.8; |
||||||
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||||
|
const adapterOption = { |
||||||
|
//比如fontSize |
||||||
|
textStyle: { |
||||||
|
fontSize: titleFontSize, |
||||||
|
}, |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance1.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance1.resize(); |
||||||
|
}, |
||||||
|
// 导出 |
||||||
|
exportData() { |
||||||
|
if (this.dateType == "hour") { |
||||||
|
this.startTime = format2(this.timeDate[0]); |
||||||
|
this.endTime = format2(this.timeDate[1]); |
||||||
|
} else if (this.dateType == "day") { |
||||||
|
this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : ""; |
||||||
|
this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : ""; |
||||||
|
} else if (this.dateType == "month") { |
||||||
|
this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : ""; |
||||||
|
this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : ""; |
||||||
|
} else if (this.dateType == "year") { |
||||||
|
(this.startTime = this.startYear), (this.endTime = this.endYear); |
||||||
|
} |
||||||
|
let data = { |
||||||
|
timeType: this.dateType, |
||||||
|
startTime: this.startTime, |
||||||
|
endTime: this.endTime, |
||||||
|
pageNum: 0, |
||||||
|
pageSize: 10, |
||||||
|
searchParams: this.selectElect, |
||||||
|
}; |
||||||
|
console.log("导出数据参数", data); |
||||||
|
deviceAnalyzeExport(data).then((res) => { |
||||||
|
console.log("导出返回", res); |
||||||
|
if (res) { |
||||||
|
// 请求的结果就是文件 |
||||||
|
// 创建一个blob URL，用于生成下载链接 |
||||||
|
const url = window.URL.createObjectURL(new Blob([res])); |
||||||
|
// 创建一个<a>元素，并设置其href和download属性 |
||||||
|
const link = document.createElement("a"); |
||||||
|
link.href = url; |
||||||
|
link.setAttribute("download", "设备能耗报表.xls"); // 设置下载的文件名 |
||||||
|
// 模拟点击下载链接 |
||||||
|
document.body.appendChild(link); |
||||||
|
link.click(); |
||||||
|
document.body.removeChild(link); |
||||||
|
// 释放blob URL资源 |
||||||
|
window.URL.revokeObjectURL(url); |
||||||
|
this.$message({ |
||||||
|
type: "success", |
||||||
|
message: "导出成功!", |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$message.error("导出失败!"); |
||||||
|
} |
||||||
|
}); |
||||||
|
// .catch((err) => { |
||||||
|
// this.$message.error('导出失败!'); |
||||||
|
// }) |
||||||
|
}, |
||||||
|
// 打印 |
||||||
|
leadingPrint() { |
||||||
|
this.dialogPrintVisible = true; |
||||||
|
console.log("头部数据", this.headers); |
||||||
|
console.log("表格数据", this.tableData); |
||||||
|
}, |
||||||
|
// 打印 |
||||||
|
surePrint() { |
||||||
|
const printHTML = document.querySelector("#report").innerHTML; |
||||||
|
// 将打印的区域赋值，进行打印 |
||||||
|
window.document.body.innerHTML = printHTML; |
||||||
|
window.print(); // 调用window打印方法 |
||||||
|
window.location.reload(); // 打印完成后重新加载页面 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.condition { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 0.24rem; |
||||||
|
|
||||||
|
.condition-left { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
.years-div { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.years-word { |
||||||
|
font-size: 14px; |
||||||
|
margin: 0 5px; |
||||||
|
color: #388ff3; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.time-label { |
||||||
|
font-size: 16px; |
||||||
|
line-height: 7px; |
||||||
|
margin-right: 12px; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.main-content { |
||||||
|
min-height: 6.6rem; |
||||||
|
} |
||||||
|
|
||||||
|
.details_ref { |
||||||
|
width: 16.5rem; |
||||||
|
height: 3.55rem; |
||||||
|
margin-bottom: 0.39rem; |
||||||
|
margin-left: -0.3rem; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,218 @@ |
|||||||
|
<template> |
||||||
|
<div class="prop-content"> |
||||||
|
<div class="elect" ref="elect"></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import * as echarts from "echarts"; |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
chartsData: { |
||||||
|
type: Array, // 明确指定为数组类型 |
||||||
|
required: true, // 如果该属性是必需的，可以设置为 true |
||||||
|
}, |
||||||
|
// chartInstance1: "", |
||||||
|
// option1: {}, |
||||||
|
deviceStatus: [], //饼图数据 |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
chartInstance1: null, |
||||||
|
option1: {}, |
||||||
|
// legendData: ["冷水机组", "冷冻水泵", "冷却水泵", "冷却塔"], |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
chartsData: { |
||||||
|
handler(newDataA, oldDataA) { |
||||||
|
if (newDataA) { |
||||||
|
// this.chartInstance1.dispose(); // 销毁实例 |
||||||
|
this.screenAdapter(); // 数据变化时更新图表 |
||||||
|
// console.log("做出了改变") |
||||||
|
} |
||||||
|
}, |
||||||
|
deep: true, // 深度监听 |
||||||
|
}, |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initChart1(); |
||||||
|
this.screenAdapter(); |
||||||
|
window.addEventListener("resize", this.screenAdapter); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||||
|
window.removeEventListener("resize", this.screenAdapter); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
initChart1() { |
||||||
|
this.chartInstance1 = echarts.init(this.$refs.elect); |
||||||
|
this.option1 = { |
||||||
|
// backgroundColor: '#031a40', |
||||||
|
// 提示框组件 |
||||||
|
tooltip: { |
||||||
|
trigger: "item", //触发类型 |
||||||
|
backgroundColor: "rgba(50,50,50,0.7)", //提示框浮层的背景颜色 |
||||||
|
// borderColor: '#0ac1c7',//提示框浮层的边框颜色 |
||||||
|
textStyle: { |
||||||
|
color: "#fff", |
||||||
|
fontSize: "15", |
||||||
|
}, |
||||||
|
// formatter: '{a0}：<br />{b0}：{c0} kwh'//1.字符串模板 |
||||||
|
formatter: "{b0}：{c0} kwh", //1.字符串模板 |
||||||
|
// formatter:function(params){ //2.回调函数,可return dom 自定义样式 |
||||||
|
// console.log('params',params) |
||||||
|
// return params[0].name |
||||||
|
// } |
||||||
|
}, |
||||||
|
//图表背景色 |
||||||
|
// backgroundColor: '#081736', |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "详情", |
||||||
|
type: "pie", |
||||||
|
minAngle: 2, //最小的扇区角度（0 ~ 360） |
||||||
|
radius: ["30%", "50%"], |
||||||
|
center: ["50%", "50%"], |
||||||
|
emphasis: { |
||||||
|
scale: true, // 启用鼠标悬停时的缩放效果 |
||||||
|
}, |
||||||
|
color: [ |
||||||
|
"#0ac1c7", |
||||||
|
"#deb140", |
||||||
|
"#49dff0", |
||||||
|
"#034079", |
||||||
|
"#6f81da", |
||||||
|
"#00ffb4", |
||||||
|
, |
||||||
|
"#FFE900", |
||||||
|
"#F5B157", |
||||||
|
"#1DA7FF", |
||||||
|
"#2967EA", |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.chartInstance1.setOption(this.option1); |
||||||
|
}, |
||||||
|
//饼状图自适应 |
||||||
|
screenAdapter() { |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = (this.$refs.elect.offsetWidth / 100) * 2.4; |
||||||
|
// console.log("chartsData", this.chartsData) |
||||||
|
// 将父组件得来的value值从字符串转换为数字 |
||||||
|
for (let i = 0; i < this.chartsData.length; i++) { |
||||||
|
this.chartsData[i].value = parseFloat(this.chartsData[i].value); |
||||||
|
} |
||||||
|
var scale = 1; |
||||||
|
var echartData = this.chartsData; |
||||||
|
var rich = { |
||||||
|
yellow: { |
||||||
|
color: "#ffc72b", |
||||||
|
fontSize: titleFontSize * 1.5, |
||||||
|
padding: [5, 4], |
||||||
|
align: "center", |
||||||
|
}, |
||||||
|
total: { |
||||||
|
color: "#ffc72b", |
||||||
|
fontSize: titleFontSize * 1.4, |
||||||
|
align: "center", |
||||||
|
}, |
||||||
|
white: { |
||||||
|
color: "#fff", |
||||||
|
align: "center", |
||||||
|
fontSize: titleFontSize * 1.4, |
||||||
|
padding: [5, 0], |
||||||
|
}, |
||||||
|
blue: { |
||||||
|
color: "#49dff0", |
||||||
|
fontSize: titleFontSize * 1.09, |
||||||
|
align: "center", |
||||||
|
}, |
||||||
|
hr: { |
||||||
|
borderColor: "#eee", |
||||||
|
width: "100%", |
||||||
|
borderWidth: titleFontSize * 0.1, |
||||||
|
height: 0, |
||||||
|
}, |
||||||
|
}; |
||||||
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||||
|
const option1 = { |
||||||
|
tooltip: { |
||||||
|
textStyle: { |
||||||
|
fontSize: titleFontSize * 1.3, |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
label: { |
||||||
|
formatter: function (params, ticket, callback) { |
||||||
|
var total = 0; |
||||||
|
var percent = 0; |
||||||
|
|
||||||
|
echartData.forEach(function (value, index, array) { |
||||||
|
total += value.value; |
||||||
|
}); |
||||||
|
|
||||||
|
if (total !== 0) { |
||||||
|
percent = ((params.value / total) * 100).toFixed(2); |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
"{white|" + |
||||||
|
params.name + |
||||||
|
"}\n" + |
||||||
|
"{hr|}\n" + |
||||||
|
"{yellow|" + |
||||||
|
params.value + |
||||||
|
"}" + |
||||||
|
"{blue| (" + |
||||||
|
(total !== 0 ? percent : 0) + |
||||||
|
"%)}" |
||||||
|
); |
||||||
|
}, |
||||||
|
rich: rich, |
||||||
|
}, |
||||||
|
data: echartData, |
||||||
|
labelLine: { |
||||||
|
//标签的视觉引导线配置 |
||||||
|
length: titleFontSize * 2, |
||||||
|
length2: 0, |
||||||
|
lineStyle: { |
||||||
|
color: "#fff", |
||||||
|
}, |
||||||
|
}, |
||||||
|
itemStyle: { |
||||||
|
// color: "#052f37" |
||||||
|
borderRadius: 5, |
||||||
|
borderColor: "#052f37", |
||||||
|
borderWidth: 2, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance1.setOption(option1); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance1.resize(); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.prop-content { |
||||||
|
color: rgb(243, 223, 106); |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.elect { |
||||||
|
width: 100%; |
||||||
|
height: 3.3rem; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,638 @@ |
|||||||
|
<template> |
||||||
|
<div class="big-machine" v-loading="listLoading"> |
||||||
|
<div class="condition"> |
||||||
|
<div class="condition-left"> |
||||||
|
<div class="time-label">时间类型:</div> |
||||||
|
<el-radio-group |
||||||
|
v-model="dateType" |
||||||
|
style="margin-right: 0.24rem" |
||||||
|
@change="updateDateType" |
||||||
|
> |
||||||
|
<el-radio label="hour">小时</el-radio> |
||||||
|
<el-radio label="day">日</el-radio> |
||||||
|
<el-radio label="month">月</el-radio> |
||||||
|
<el-radio label="year">年</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
<el-date-picker |
||||||
|
v-model="timeDate" |
||||||
|
:default-time="['00:00:00', '23:59:59']" |
||||||
|
type="datetimerange" |
||||||
|
range-separator="至" |
||||||
|
v-if="dateType == 'hour'" |
||||||
|
placeholder="选择日期" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<el-date-picker |
||||||
|
v-model="dayDate" |
||||||
|
type="daterange" |
||||||
|
v-if="dateType == 'day'" |
||||||
|
:key="this.dateType" |
||||||
|
range-separator="至" |
||||||
|
value-format="yyyy-MM-dd" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
@change="dateChange" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<el-date-picker |
||||||
|
v-model="monthDate" |
||||||
|
type="monthrange" |
||||||
|
v-if="dateType == 'month'" |
||||||
|
:key="this.dateType" |
||||||
|
range-separator="至" |
||||||
|
start-placeholder="开始月份" |
||||||
|
end-placeholder="结束月份" |
||||||
|
value-format="yyyy-MM" |
||||||
|
@change="dateChange" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div class="years-div" v-if="dateType == 'year'" :key="this.dateType"> |
||||||
|
<el-date-picker |
||||||
|
v-model="startYear" |
||||||
|
type="year" |
||||||
|
placeholder="选择开始年份" |
||||||
|
style="width: 180px" |
||||||
|
value-format="yyyy" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div class="years-word">至</div> |
||||||
|
<el-date-picker |
||||||
|
v-model="endYear" |
||||||
|
type="year" |
||||||
|
placeholder="选择结束年份" |
||||||
|
style="width: 180px" |
||||||
|
value-format="yyyy" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
</div> |
||||||
|
<el-select |
||||||
|
style="margin-left: 10px" |
||||||
|
v-model="systemType" |
||||||
|
placeholder="请选择系统类型" |
||||||
|
clearable |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="dict in systemTypes" |
||||||
|
:key="dict.dictValue" |
||||||
|
:label="dict.dictLabel" |
||||||
|
:value="dict.dictValue" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
<div class="success-btn" style="margin: 0 0.24rem"> |
||||||
|
<el-button type="success" @click="findData" |
||||||
|
>查询</el-button |
||||||
|
> |
||||||
|
</div> |
||||||
|
<div class="warning-btn"> |
||||||
|
<el-button type="warning" @click="exportData">导出</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="machine"> |
||||||
|
<div class="machine-left"> |
||||||
|
<div class="machine-li"> |
||||||
|
<div class="tit">冷水机组</div> |
||||||
|
<div class="machine-center-li"> |
||||||
|
<div class="machine-context"> |
||||||
|
<div class="chart"> |
||||||
|
<machine-chart :chartsData="chiller"></machine-chart> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="machine-li"> |
||||||
|
<div class="tit">冷冻水泵</div> |
||||||
|
<div class="machine-center-li"> |
||||||
|
<div class="machine-context"> |
||||||
|
<div class="chart"> |
||||||
|
<machine-chart :chartsData="chillerPump"></machine-chart> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="machine-center"> |
||||||
|
<div class="total"> |
||||||
|
<div class="data1"> |
||||||
|
<span>冷水机组</span> |
||||||
|
<div class="p-class"> |
||||||
|
<countTo |
||||||
|
class="p-class2" |
||||||
|
:startVal="startVal" |
||||||
|
:endVal="allDataArr[0].value" |
||||||
|
:duration="duration" |
||||||
|
:separator="separator" |
||||||
|
:decimals="2" |
||||||
|
ref="CountToPower" |
||||||
|
></countTo |
||||||
|
>kwh |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="data2"> |
||||||
|
<span>冷冻水泵</span> |
||||||
|
<div class="p-class"> |
||||||
|
<countTo |
||||||
|
class="p-class2" |
||||||
|
:startVal="startVal" |
||||||
|
:endVal="allDataArr[1].value" |
||||||
|
:duration="duration" |
||||||
|
:separator="separator" |
||||||
|
:decimals="2" |
||||||
|
ref="CountToPower" |
||||||
|
></countTo |
||||||
|
>kwh |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="data3"> |
||||||
|
<span>冷却水泵</span> |
||||||
|
<div class="p-class"> |
||||||
|
<countTo |
||||||
|
class="p-class2" |
||||||
|
:startVal="startVal" |
||||||
|
:endVal="allDataArr[2].value" |
||||||
|
:duration="duration" |
||||||
|
:separator="separator" |
||||||
|
:decimals="2" |
||||||
|
ref="CountToPower" |
||||||
|
></countTo |
||||||
|
>kwh |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="data4"> |
||||||
|
<span>冷却塔</span> |
||||||
|
<div class="p-class"> |
||||||
|
<countTo |
||||||
|
class="p-class2" |
||||||
|
:startVal="startVal" |
||||||
|
:endVal="allDataArr[3].value" |
||||||
|
:duration="duration" |
||||||
|
:separator="separator" |
||||||
|
:decimals="2" |
||||||
|
ref="CountToPower" |
||||||
|
></countTo |
||||||
|
>kwh |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<canvas class="rain"></canvas> |
||||||
|
<canvas class="dashed"></canvas> |
||||||
|
<div class="sphere"> |
||||||
|
<div class="sphere-bg"></div> |
||||||
|
<div class="sum"> |
||||||
|
<div class="sum-title">总耗电量</div> |
||||||
|
<div class="p-all"> |
||||||
|
<countTo |
||||||
|
:startVal="startVal" |
||||||
|
:endVal="allElect" |
||||||
|
:duration="duration" |
||||||
|
:separator="separator" |
||||||
|
:decimals="2" |
||||||
|
ref="CountToPower" |
||||||
|
></countTo |
||||||
|
>kwh |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="cicle3"></div> |
||||||
|
<div class="cicle4"></div> |
||||||
|
<div class="cicle5"></div> |
||||||
|
<div class="cicle6"></div> |
||||||
|
<div class="cicle7"></div> |
||||||
|
<div class="cicle8"> |
||||||
|
<span>{{ electProp[0] }}%</span> |
||||||
|
<p>冷水机组</p> |
||||||
|
</div> |
||||||
|
<div class="cicle9"> |
||||||
|
<span>{{ electProp[1] }}%</span> |
||||||
|
<p>冷冻水泵</p> |
||||||
|
</div> |
||||||
|
<div class="cicle10"> |
||||||
|
<span>{{ electProp[2] }}%</span> |
||||||
|
<p>冷却水泵</p> |
||||||
|
</div> |
||||||
|
<div class="cicle11"> |
||||||
|
<span>{{ electProp[3] }}%</span> |
||||||
|
<p>冷却塔</p> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="machine-right"> |
||||||
|
<div class="machine-li"> |
||||||
|
<div class="tit">冷却水泵</div> |
||||||
|
<div class="machine-center-li"> |
||||||
|
<div class="machine-context"> |
||||||
|
<div class="chart"> |
||||||
|
<machine-chart :chartsData="coolPump"></machine-chart> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="machine-li"> |
||||||
|
<div class="tit">冷却塔</div> |
||||||
|
<div class="machine-center-li"> |
||||||
|
<div class="machine-context"> |
||||||
|
<div class="chart"> |
||||||
|
<machine-chart :chartsData="coolTower"></machine-chart> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-dialog title="" :visible.sync="dialogVisible" width="750px"> |
||||||
|
<prop-chart></prop-chart> |
||||||
|
</el-dialog> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { format2 } from "@/utils/datetime"; |
||||||
|
import machineChart from "./machineChart.vue"; |
||||||
|
// import propChart from './propChart.vue'; |
||||||
|
import countTo from "vue-count-to"; |
||||||
|
import { energyAnalyze, analyzeExport } from "@/api/centerairC/energyManage"; |
||||||
|
import { listData } from "@/api/system/dict/data"; |
||||||
|
export default { |
||||||
|
components: { machineChart, countTo }, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
listLoading: false, |
||||||
|
dateType: "hour", //默认选择小时 |
||||||
|
timeDate: [], //小时值 |
||||||
|
dayDate: [], //日值 |
||||||
|
monthDate: [], //月值 |
||||||
|
startYear: "", //开始年份 |
||||||
|
endYear: "", //结束年份 |
||||||
|
startTime: "", //开始日期 |
||||||
|
endTime: "", //结束日期 |
||||||
|
allDataArr: [ |
||||||
|
{ value: 0 }, // 初始化元素及其属性 |
||||||
|
{ value: 0 }, |
||||||
|
{ value: 0 }, |
||||||
|
{ value: 0 }, |
||||||
|
], |
||||||
|
chillerPump: [], //冷冻泵 |
||||||
|
chiller: [], //主机 |
||||||
|
coolPump: [], //冷却泵 |
||||||
|
coolTower: [], //冷却塔 |
||||||
|
allElect: 0, //总耗电量 |
||||||
|
electProp: [], //耗电占比 |
||||||
|
dialogVisible: false, |
||||||
|
startVal: 0, //开始的数 |
||||||
|
duration: 1000, // 持续时间 |
||||||
|
separator: "", // 分隔符 |
||||||
|
systemType: "", //系统类型 |
||||||
|
systemTypes: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// 在组件创建完成后，设置默认值 |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initializeTimeDate(); |
||||||
|
this.getDictList(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** 查询系统类型-字典数据列表 */ |
||||||
|
getDictList() { |
||||||
|
let data = { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 100, |
||||||
|
dictType: "sys_type", |
||||||
|
}; |
||||||
|
listData(data).then((response) => { |
||||||
|
this.systemTypes = response.rows; |
||||||
|
this.systemType = this.systemTypes[0].dictValue; |
||||||
|
this.getTableData(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 初始化时间 |
||||||
|
initializeTimeDate() { |
||||||
|
const start = new Date(new Date().setHours(0, 0, 0, 0)); |
||||||
|
const end = new Date(new Date().setHours(23, 59, 59, 59)); |
||||||
|
this.timeDate = [format2(start), format2(end)]; // 更新 |
||||||
|
}, |
||||||
|
// 选择时间类型 |
||||||
|
updateDateType() { |
||||||
|
// this.dateType = this.radio; |
||||||
|
console.log(this.dateType); |
||||||
|
(this.timeDate = []), //小时值 |
||||||
|
(this.dayDate = []), //日值 |
||||||
|
(this.monthDate = []), //月值 |
||||||
|
(this.startYear = ""), //开始年份 |
||||||
|
(this.endYear = ""); //结束年份 |
||||||
|
}, |
||||||
|
// 选中日期事件 |
||||||
|
dateChange() { |
||||||
|
// console.log("打印时间", this.timeform.time1); |
||||||
|
if (!this.dayDate) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.dayDate = []; |
||||||
|
}); |
||||||
|
} |
||||||
|
if (!this.monthDate) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.monthDate = []; |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 查询 |
||||||
|
findData() { |
||||||
|
console.log("this.dateType", this.dateType); |
||||||
|
console.log("this.timeDate", this.timeDate); |
||||||
|
switch (this.dateType) { |
||||||
|
case "hour": |
||||||
|
if (!this.timeDate) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
this.getTableData(); |
||||||
|
} |
||||||
|
break; |
||||||
|
case "day": |
||||||
|
if (this.dayDate.length === 0) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
const newLength = |
||||||
|
new Date(this.dayDate[1]).getTime() - |
||||||
|
new Date(this.dayDate[0]).getTime(); |
||||||
|
const dayDiff = Math.floor(newLength / (1000 * 60 * 60 * 24)); |
||||||
|
if (dayDiff > 31) { |
||||||
|
this.showMessage( |
||||||
|
"最多只能选择30天区间，请重新选择再查询！", |
||||||
|
"warning" |
||||||
|
); |
||||||
|
} else { |
||||||
|
this.getTableData(); |
||||||
|
} |
||||||
|
} |
||||||
|
break; |
||||||
|
case "month": |
||||||
|
if (this.monthDate.length === 0) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
const [start, end] = this.monthDate; |
||||||
|
const startDate = new Date(start); |
||||||
|
const endDate = new Date(end); |
||||||
|
const startYear = startDate.getFullYear(); |
||||||
|
const startMonth = startDate.getMonth(); |
||||||
|
const endYear = endDate.getFullYear(); |
||||||
|
const endMonth = endDate.getMonth(); |
||||||
|
const monthDiff = |
||||||
|
(endYear - startYear) * 12 + (endMonth - startMonth); |
||||||
|
if (monthDiff > 12) { |
||||||
|
this.showMessage( |
||||||
|
"最多只能选择12个月区间，请重新选择再查询！", |
||||||
|
"warning" |
||||||
|
); |
||||||
|
} else { |
||||||
|
this.getTableData(); |
||||||
|
} |
||||||
|
} |
||||||
|
break; |
||||||
|
case "year": |
||||||
|
if (!this.startYear || !this.endYear) { |
||||||
|
this.showMessage("请选择全年份区间！", "warning"); |
||||||
|
} else if (this.startYear > this.endYear) { |
||||||
|
this.showMessage("结束年份要大于开始年份！", "warning"); |
||||||
|
} else { |
||||||
|
this.getTableData(); |
||||||
|
} |
||||||
|
break; |
||||||
|
default: |
||||||
|
break; |
||||||
|
} |
||||||
|
}, |
||||||
|
// 显示消息的函数 |
||||||
|
showMessage(message, type) { |
||||||
|
this.$message({ |
||||||
|
message: message, |
||||||
|
type: type, |
||||||
|
}); |
||||||
|
}, |
||||||
|
//请求数据 |
||||||
|
getTableData() { |
||||||
|
if (this.dateType == "hour") { |
||||||
|
this.startTime = format2(this.timeDate[0]); |
||||||
|
this.endTime = format2(this.timeDate[1]); |
||||||
|
} else if (this.dateType == "day") { |
||||||
|
this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : ""; |
||||||
|
this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : ""; |
||||||
|
} else if (this.dateType == "month") { |
||||||
|
this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : ""; |
||||||
|
this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : ""; |
||||||
|
} else if (this.dateType == "year") { |
||||||
|
(this.startTime = this.startYear), (this.endTime = this.endYear); |
||||||
|
} |
||||||
|
let data = { |
||||||
|
timeType: this.dateType, |
||||||
|
startTime: this.startTime, |
||||||
|
endTime: this.endTime, |
||||||
|
systemType: this.systemType, |
||||||
|
}; |
||||||
|
console.log("查询数据参数", data); |
||||||
|
this.listLoading = true; |
||||||
|
energyAnalyze(data).then((res) => { |
||||||
|
console.log("能源返回", res); |
||||||
|
if (res.code == 200 && res.data.length > 0) { |
||||||
|
this.allDataArr = res.data.all; |
||||||
|
this.allDataArr = this.allDataArr.map((item) => { |
||||||
|
item.value = parseFloat(item.value); |
||||||
|
return item; |
||||||
|
}); |
||||||
|
this.chillerPump = res.data.chillerPump; |
||||||
|
this.chiller = res.data.chiller; |
||||||
|
this.coolPump = res.data.coolPump; |
||||||
|
this.coolTower = res.data.coolTower; |
||||||
|
console.log("this.allDataArr", this.allDataArr); |
||||||
|
// 总电量 |
||||||
|
this.allElect = this.allDataArr.reduce( |
||||||
|
(sum, item) => sum + item.value, |
||||||
|
0 |
||||||
|
); |
||||||
|
console.log("this.allElect ", this.allElect); |
||||||
|
this.electProp = []; |
||||||
|
// 计算每个指标的百分比 |
||||||
|
this.allDataArr.forEach((item) => { |
||||||
|
console.log("两数相除", item.value, this.allElect); |
||||||
|
let percentage; |
||||||
|
if (this.allElect === 0) { |
||||||
|
percentage = 0; // 或者设为其他特定值，如 null |
||||||
|
} else { |
||||||
|
percentage = (parseFloat(item.value) / this.allElect) * 100; |
||||||
|
percentage = percentage.toFixed(2); |
||||||
|
} |
||||||
|
this.electProp.push(percentage); |
||||||
|
}); |
||||||
|
|
||||||
|
console.log("百分比数组", this.electProp); |
||||||
|
} else { |
||||||
|
this.chiller = []; |
||||||
|
this.chillerPump = []; |
||||||
|
this.coolPump = []; |
||||||
|
this.coolTower = []; |
||||||
|
} |
||||||
|
}); |
||||||
|
// Just to simulate the time of the request |
||||||
|
setTimeout(() => { |
||||||
|
this.listLoading = false; |
||||||
|
}, 1.0 * 1000); |
||||||
|
}, |
||||||
|
// 导出 |
||||||
|
exportData() { |
||||||
|
let data = { |
||||||
|
timeType: this.dateType, |
||||||
|
startTime: this.startTime, |
||||||
|
endTime: this.endTime, |
||||||
|
systemType: this.systemType, |
||||||
|
}; |
||||||
|
console.log("导出数据参数", data); |
||||||
|
analyzeExport(data).then((res) => { |
||||||
|
console.log("导出返回", res); |
||||||
|
if (res) { |
||||||
|
// 请求的结果就是文件 |
||||||
|
// 创建一个blob URL，用于生成下载链接 |
||||||
|
const url = window.URL.createObjectURL(new Blob([res])); |
||||||
|
// 创建一个<a>元素，并设置其href和download属性 |
||||||
|
const link = document.createElement("a"); |
||||||
|
link.href = url; |
||||||
|
link.setAttribute("download", "机房能耗报表.xls"); // 设置下载的文件名 |
||||||
|
// 模拟点击下载链接 |
||||||
|
document.body.appendChild(link); |
||||||
|
link.click(); |
||||||
|
document.body.removeChild(link); |
||||||
|
// 释放blob URL资源 |
||||||
|
window.URL.revokeObjectURL(url); |
||||||
|
this.$message({ |
||||||
|
type: "success", |
||||||
|
message: "导出成功!", |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$message.error("导出失败!"); |
||||||
|
} |
||||||
|
}); |
||||||
|
// .catch((err) => { |
||||||
|
// this.$message.error('导出失败!'); |
||||||
|
// }) |
||||||
|
}, |
||||||
|
onReversal() { |
||||||
|
this.dialogVisible = true; |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.condition { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 0.24rem; |
||||||
|
|
||||||
|
.condition-left { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
.years-div { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.years-word { |
||||||
|
font-size: 14px; |
||||||
|
margin: 0 5px; |
||||||
|
color: #388ff3; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.time-label { |
||||||
|
font-size: 16px; |
||||||
|
line-height: 7px; |
||||||
|
margin-right: 12px; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.machine { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-between; |
||||||
|
flex-wrap: nowrap; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.machine-center { |
||||||
|
width: 50%; |
||||||
|
} |
||||||
|
|
||||||
|
.machine-left, |
||||||
|
.machine-right { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
width: 25%; |
||||||
|
// background: #00be97; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: space-between; |
||||||
|
margin-right: 1px; |
||||||
|
|
||||||
|
.machine-li { |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 0.18rem; |
||||||
|
border: 1px solid rgba(9, 83, 133, 0.5); |
||||||
|
box-shadow: inset 0 0 30px rgba(9, 83, 133, 0.4); |
||||||
|
position: relative; |
||||||
|
border-radius: 0.07rem; |
||||||
|
|
||||||
|
.tit { |
||||||
|
padding: 0.1rem 0.1rem 0.1rem 0.25rem; |
||||||
|
border-bottom: 1px solid rgba(9, 83, 133, 0.5); |
||||||
|
font-size:0.18rem; |
||||||
|
font-weight: 500; |
||||||
|
position: relative; |
||||||
|
// background: rgba(64, 72, 71, 0.5); |
||||||
|
border-radius: 0.07rem 0.07rem 0 0; |
||||||
|
box-shadow: 0 0 5px rgba(9, 83, 133, 0.5); |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.tit::before { |
||||||
|
position: absolute; |
||||||
|
content: ""; |
||||||
|
width: 6px; |
||||||
|
height: 6px; |
||||||
|
background: rgba(20, 231, 231, 0.9); |
||||||
|
box-shadow: 0 0 5px rgba(0, 93, 130, 0.9); |
||||||
|
border-radius: 50%; |
||||||
|
left: 0.1rem; |
||||||
|
top: 0.18rem; |
||||||
|
} |
||||||
|
|
||||||
|
.machine-center-li { |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.machine-context { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-between; |
||||||
|
width: 100%; |
||||||
|
|
||||||
|
.chart { |
||||||
|
width: 100%; |
||||||
|
height: 280px; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,97 @@ |
|||||||
|
<template> |
||||||
|
<div class="paramsDetails"> |
||||||
|
<div class="details-content"> |
||||||
|
<div class="details-header"> |
||||||
|
<el-tabs v-model="activeName" @tab-click="handleClick"> |
||||||
|
<el-tab-pane label="机房能耗" name="first"> |
||||||
|
<machineRoom |
||||||
|
v-if="activeName === 'first'" |
||||||
|
@switch-tab="switchToEquitesMess" |
||||||
|
@switch-fourth="switchToPatrolTem" |
||||||
|
></machineRoom> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="设备能耗" name="second"> |
||||||
|
<equipment v-if="activeName === 'second'"></equipment> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="设备组能耗" name="three"> |
||||||
|
<device-energy v-if="activeName === 'three'"></device-energy> |
||||||
|
</el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import machineRoom from "./components/machineRoom.vue"; |
||||||
|
import equipment from "./components/equipment.vue"; |
||||||
|
import DeviceEnergy from "./components/deviceEnergy.vue"; |
||||||
|
export default { |
||||||
|
components: { machineRoom, equipment, DeviceEnergy }, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
activeName: "first", //设备管理 |
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleClick(tab, event) { |
||||||
|
console.log(tab, event); |
||||||
|
}, |
||||||
|
|
||||||
|
//当在子页面中点击按钮时，会触发switch-tab事件， |
||||||
|
// 然后在父组件中监听到这个事件，并将activeName设置为'second'，从而让第二个tab成为当前选中的tab。 |
||||||
|
switchToEquitesMess() { |
||||||
|
this.activeName = "second"; |
||||||
|
}, |
||||||
|
switchToPatrolTem() { |
||||||
|
// this.activeName = 'fourth'; |
||||||
|
}, |
||||||
|
// 记得请求冷水机组数据时，默认选中第一个冷水机组 |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.paramsDetails { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: stretch; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.details-content { |
||||||
|
width: 100%; |
||||||
|
// height: 0.42rem; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
<style scoped> |
||||||
|
.none-div { |
||||||
|
padding-top: 0.31rem; |
||||||
|
} |
||||||
|
|
||||||
|
.none-div >>> .el-tree { |
||||||
|
background: transparent; |
||||||
|
color: #789d9f; |
||||||
|
} |
||||||
|
|
||||||
|
.none-div >>> .el-tree-node:focus > .el-tree-node__content { |
||||||
|
background-color: #00be97; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.none-div >>> .el-tree-node__content:hover, |
||||||
|
.none-div >>> .el-upload-list__item:hover { |
||||||
|
background-color: #00be97; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.none-div >>> .el-tree-node__content { |
||||||
|
height: 0.48rem; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.none-div >>> .el-tree-node__expand-icon.is-leaf { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,835 @@ |
|||||||
|
<template> |
||||||
|
<div class="main-body"> |
||||||
|
<div class="irregular-border"> |
||||||
|
<div class="main-content"> |
||||||
|
<div class="condition"> |
||||||
|
<div class="condition-left"> |
||||||
|
<div class="time-label">时间类型:</div> |
||||||
|
<el-radio-group |
||||||
|
v-model="dateType" |
||||||
|
style="margin-right: 0.24rem" |
||||||
|
@change="updateDateType" |
||||||
|
> |
||||||
|
<el-radio label="hour">小时</el-radio> |
||||||
|
<el-radio label="day">日</el-radio> |
||||||
|
<el-radio label="month">月</el-radio> |
||||||
|
<el-radio label="year">年</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
<el-date-picker |
||||||
|
v-model="timeDate" |
||||||
|
:default-time="['00:00:00', '23:59:59']" |
||||||
|
type="datetimerange" |
||||||
|
range-separator="至" |
||||||
|
v-if="dateType == 'hour'" |
||||||
|
placeholder="选择日期" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<el-date-picker |
||||||
|
v-model="dayDate" |
||||||
|
type="daterange" |
||||||
|
v-if="dateType == 'day'" |
||||||
|
:key="this.dateType" |
||||||
|
range-separator="至" |
||||||
|
value-format="yyyy-MM-dd" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
@change="dateChange" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<el-date-picker |
||||||
|
v-model="monthDate" |
||||||
|
type="monthrange" |
||||||
|
v-if="dateType == 'month'" |
||||||
|
:key="this.dateType" |
||||||
|
range-separator="至" |
||||||
|
start-placeholder="开始月份" |
||||||
|
end-placeholder="结束月份" |
||||||
|
value-format="yyyy-MM" |
||||||
|
@change="dateChange" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div |
||||||
|
class="years-div" |
||||||
|
v-if="dateType == 'year'" |
||||||
|
:key="this.dateType" |
||||||
|
> |
||||||
|
<el-date-picker |
||||||
|
v-model="startYear" |
||||||
|
type="year" |
||||||
|
placeholder="选择开始年份" |
||||||
|
style="width: 180px" |
||||||
|
value-format="yyyy" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div class="years-word">至</div> |
||||||
|
<el-date-picker |
||||||
|
v-model="endYear" |
||||||
|
type="year" |
||||||
|
placeholder="选择结束年份" |
||||||
|
style="width: 180px" |
||||||
|
value-format="yyyy" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
</div> |
||||||
|
<el-select |
||||||
|
style="margin-left: 10px" |
||||||
|
v-model="systemType" |
||||||
|
placeholder="请选择系统类型" |
||||||
|
clearable |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="dict in systemTypes" |
||||||
|
:key="dict.dictValue" |
||||||
|
:label="dict.dictLabel" |
||||||
|
:value="dict.dictValue" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
<div class="success-btn" style="margin-left: 0.24rem"> |
||||||
|
<el-button type="success" @click="findData">查询</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- <div class="condition-right"> |
||||||
|
<el-button type="warning">导出</el-button> |
||||||
|
</div> --> |
||||||
|
</div> |
||||||
|
<div class="charts-table"> |
||||||
|
<div class="charts-title"> |
||||||
|
{{ this.titleDate }} {{ this.checkList }} |
||||||
|
</div> |
||||||
|
<!-- 选择 --> |
||||||
|
<div class="charts-check"> |
||||||
|
<el-radio-group |
||||||
|
v-model="checkList" |
||||||
|
style="margin-right: 0.24rem" |
||||||
|
@change="handleCheckChange" |
||||||
|
> |
||||||
|
<el-radio label="瞬时冷量"></el-radio> |
||||||
|
<el-radio label="瞬时功率"></el-radio> |
||||||
|
<el-radio label="瞬时系统EER"></el-radio> |
||||||
|
</el-radio-group> |
||||||
|
</div> |
||||||
|
<div class="connect-div" v-loading="listLoading"> |
||||||
|
<div class="charts_refs" ref="charts_refs"></div> |
||||||
|
<div class="analysis-table" style="margin-bottom: 0.2rem"> |
||||||
|
<table> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th v-if="dateList">时间</th> |
||||||
|
<th v-for="(item, index) in dateList" :key="index"> |
||||||
|
{{ item }} |
||||||
|
</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr> |
||||||
|
<td v-if="coldData">制冷量(kwr)</td> |
||||||
|
<td v-for="(item, index) in coldData" :key="index"> |
||||||
|
{{ item }} |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td v-if="electData">用电量(kwh)</td> |
||||||
|
<td v-for="(item, index) in electData" :key="index"> |
||||||
|
{{ item }} |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td v-if="copData">瞬时系统EER</td> |
||||||
|
<td v-for="(item, index) in copData" :key="index"> |
||||||
|
{{ item }} |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { format2 } from "@/utils/datetime"; |
||||||
|
import * as echarts from "echarts"; |
||||||
|
import { sysEnergy } from "@/api/centerairC/energyManage"; |
||||||
|
import { listData } from "@/api/system/dict/data"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
listLoading: false, |
||||||
|
dateType: "hour", //默认选择小时 |
||||||
|
timeDate: [], //小时值 |
||||||
|
dayDate: [], //日值 |
||||||
|
monthDate: [], //月值 |
||||||
|
startYear: "", //开始年份 |
||||||
|
endYear: "", //结束年份 |
||||||
|
startTime: "", //开始日期 |
||||||
|
endTime: "", //结束日期 |
||||||
|
// 表格数据 |
||||||
|
dateList: [], |
||||||
|
coldData: [], |
||||||
|
electData: [], |
||||||
|
copData: [], |
||||||
|
checkList: "瞬时冷量", //默认选择瞬时冷量 |
||||||
|
chartInstance2: null, |
||||||
|
option2: {}, |
||||||
|
// 标题日期 |
||||||
|
titleDate: "", |
||||||
|
showZoom: true, |
||||||
|
systemType: "", //系统类型 |
||||||
|
systemTypes: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initializeTimeDate(); |
||||||
|
this.initChart2(); |
||||||
|
this.screenAdapter(); |
||||||
|
this.screenAdapter2(); |
||||||
|
window.addEventListener("resize", this.screenAdapter2); |
||||||
|
window.addEventListener("resize", this.screenAdapter); |
||||||
|
this.getDictList(); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||||
|
window.removeEventListener("resize", this.screenAdapter2); |
||||||
|
window.removeEventListener("resize", this.screenAdapter); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** 查询系统类型-字典数据列表 */ |
||||||
|
getDictList() { |
||||||
|
let data = { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 100, |
||||||
|
dictType: "sys_type", |
||||||
|
}; |
||||||
|
listData(data).then((response) => { |
||||||
|
this.systemTypes = response.rows; |
||||||
|
this.systemType = this.systemTypes[0].dictValue; |
||||||
|
this.getTableData(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 初始化时间 |
||||||
|
initializeTimeDate() { |
||||||
|
const start = new Date(new Date().setHours(0, 0, 0, 0)); |
||||||
|
const end = new Date(new Date().setHours(23, 59, 59, 59)); |
||||||
|
this.timeDate = [format2(start), format2(end)]; // 更新 |
||||||
|
this.titleDate = format2(start) + "至" + format2(end); |
||||||
|
}, |
||||||
|
|
||||||
|
// 选择时间类型 |
||||||
|
updateDateType() { |
||||||
|
// this.dateType = this.radio; |
||||||
|
console.log(this.dateType); |
||||||
|
(this.timeDate = []), //小时值 |
||||||
|
(this.dayDate = []), //日值 |
||||||
|
(this.monthDate = []), //月值 |
||||||
|
(this.startYear = ""), //开始年份 |
||||||
|
(this.endYear = ""); //结束年份 |
||||||
|
}, |
||||||
|
// 选择的类型 |
||||||
|
handleCheckChange() { |
||||||
|
console.log("选中的值：", this.checkList); |
||||||
|
this.screenAdapter2(); |
||||||
|
}, |
||||||
|
// 选中日期事件 |
||||||
|
dateChange() { |
||||||
|
// console.log("打印时间", this.timeform.time1); |
||||||
|
if (!this.dayDate) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.dayDate = []; |
||||||
|
}); |
||||||
|
} |
||||||
|
if (!this.monthDate) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.monthDate = []; |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 查询 |
||||||
|
findData() { |
||||||
|
console.log("this.dateType", this.dateType); |
||||||
|
console.log("this.timeDate", this.timeDate); |
||||||
|
switch (this.dateType) { |
||||||
|
case "hour": |
||||||
|
if (!this.timeDate) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
this.titleDate = |
||||||
|
format2(this.timeDate[0]) + "至" + format2(this.timeDate[1]); |
||||||
|
this.getTableData(); |
||||||
|
} |
||||||
|
break; |
||||||
|
case "day": |
||||||
|
if (this.dayDate.length === 0) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
const newLength = |
||||||
|
new Date(this.dayDate[1]).getTime() - |
||||||
|
new Date(this.dayDate[0]).getTime(); |
||||||
|
const dayDiff = Math.floor(newLength / (1000 * 60 * 60 * 24)); |
||||||
|
if (dayDiff > 31) { |
||||||
|
this.showMessage( |
||||||
|
"最多只能选择30天区间，请重新选择再查询！", |
||||||
|
"warning" |
||||||
|
); |
||||||
|
} else { |
||||||
|
this.titleDate = this.dayDate[0] + "至" + this.dayDate[1]; |
||||||
|
this.getTableData(); |
||||||
|
} |
||||||
|
} |
||||||
|
break; |
||||||
|
case "month": |
||||||
|
if (this.monthDate.length === 0) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
const [start, end] = this.monthDate; |
||||||
|
const startDate = new Date(start); |
||||||
|
const endDate = new Date(end); |
||||||
|
const startYear = startDate.getFullYear(); |
||||||
|
const startMonth = startDate.getMonth(); |
||||||
|
const endYear = endDate.getFullYear(); |
||||||
|
const endMonth = endDate.getMonth(); |
||||||
|
const monthDiff = |
||||||
|
(endYear - startYear) * 12 + (endMonth - startMonth); |
||||||
|
if (monthDiff > 12) { |
||||||
|
this.showMessage( |
||||||
|
"最多只能选择12个月区间，请重新选择再查询！", |
||||||
|
"warning" |
||||||
|
); |
||||||
|
} else { |
||||||
|
this.titleDate = this.monthDate[0] + "至" + this.monthDate[1]; |
||||||
|
this.getTableData(); |
||||||
|
} |
||||||
|
} |
||||||
|
break; |
||||||
|
case "year": |
||||||
|
if (!this.startYear || !this.endYear) { |
||||||
|
this.showMessage("请选择全年份区间！", "warning"); |
||||||
|
} else if (this.startYear > this.endYear) { |
||||||
|
this.showMessage("结束年份要大于开始年份！", "warning"); |
||||||
|
} else { |
||||||
|
this.titleDate = this.startYear + "至" + this.endYear; |
||||||
|
this.getTableData(); |
||||||
|
} |
||||||
|
break; |
||||||
|
default: |
||||||
|
break; |
||||||
|
} |
||||||
|
}, |
||||||
|
// 显示消息的函数 |
||||||
|
showMessage(message, type) { |
||||||
|
this.$message({ |
||||||
|
message: message, |
||||||
|
type: type, |
||||||
|
}); |
||||||
|
}, |
||||||
|
//请求数据 |
||||||
|
getTableData() { |
||||||
|
if (this.dateType == "hour") { |
||||||
|
this.startTime = format2(this.timeDate[0]); |
||||||
|
this.endTime = format2(this.timeDate[1]); |
||||||
|
} else if (this.dateType == "day") { |
||||||
|
this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : ""; |
||||||
|
this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : ""; |
||||||
|
} else if (this.dateType == "month") { |
||||||
|
this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : ""; |
||||||
|
this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : ""; |
||||||
|
} else if (this.dateType == "year") { |
||||||
|
(this.startTime = this.startYear), (this.endTime = this.endYear); |
||||||
|
} |
||||||
|
let data = { |
||||||
|
timeType: this.dateType, |
||||||
|
startTime: this.startTime, |
||||||
|
endTime: this.endTime, |
||||||
|
systemType: this.systemType, |
||||||
|
}; |
||||||
|
console.log("查询数据参数", data); |
||||||
|
// this.showZoom = true |
||||||
|
// this.copData2 = ["3", "4"] |
||||||
|
// this.dateList2 = ["2022", "2023"] |
||||||
|
// this.option2.dataZoom[0].show = this.showZoom; |
||||||
|
// this.option2.series[0].data = this.coldData2; |
||||||
|
// this.option2.series[1].data = this.electData2; |
||||||
|
// this.option2.series[2].data = this.copData2; |
||||||
|
// this.option2.xAxis.data = this.dateList2; |
||||||
|
// this.chartInstance2.setOption(this.option2); |
||||||
|
// this.screenAdapter2(); |
||||||
|
this.listLoading = true; |
||||||
|
|
||||||
|
sysEnergy(data).then((res) => { |
||||||
|
console.log("查询返回", res.data.times); |
||||||
|
if (res.code == 200 && res.data.data !== null) { |
||||||
|
// 图例数据 |
||||||
|
this.dateList2 = res.data.lineTimes; |
||||||
|
this.copData2 = res.data.data[5].lineCop; |
||||||
|
this.nowColdData2 = res.data.data[6].lineInstantaneousCold; |
||||||
|
this.nowElectData2 = res.data.data[7].lineInstantaneousMeter; |
||||||
|
// if (this.dateType == 'hour' && this.dateType == 'day') { |
||||||
|
// this.showZoom = true |
||||||
|
// } else { |
||||||
|
// this.showZoom = false |
||||||
|
// } |
||||||
|
|
||||||
|
// this.option2.dataZoom[0].show = this.showZoom |
||||||
|
this.option2.series[0].data = this.nowColdData2; |
||||||
|
this.option2.series[1].data = this.nowElectData2; |
||||||
|
this.option2.series[2].data = this.copData2; |
||||||
|
// this.option2.series[3].data = this.nowColdData2; |
||||||
|
// this.option2.series[4].data = this.nowElectData2; |
||||||
|
this.option2.xAxis.data = this.dateList2; |
||||||
|
this.chartInstance2.setOption(this.option2); |
||||||
|
this.screenAdapter2(); |
||||||
|
} else { |
||||||
|
this.dateList2 = []; |
||||||
|
this.copData2 = []; |
||||||
|
this.nowColdData2 = []; |
||||||
|
this.nowElectData2 = []; |
||||||
|
this.option2.series[0].data = []; |
||||||
|
this.option2.series[1].data = []; |
||||||
|
this.option2.series[2].data = []; |
||||||
|
// this.option2.series[3].data = []; |
||||||
|
// this.option2.series[4].data = []; |
||||||
|
this.option2.xAxis.data = []; |
||||||
|
this.chartInstance2.setOption(this.option2); |
||||||
|
this.screenAdapter2(); |
||||||
|
} |
||||||
|
if (res.code == 200 && res.data.data !== null) { |
||||||
|
console.log("cop的值", res.data.data[0].cold); |
||||||
|
// 表格数据 |
||||||
|
this.dateList = res.data.times; |
||||||
|
this.coldData = res.data.data[0].cold; |
||||||
|
this.electData = res.data.data[1].meter; |
||||||
|
this.copData = res.data.data[2].cop; |
||||||
|
} else { |
||||||
|
this.dateList = []; |
||||||
|
this.coldData = []; |
||||||
|
this.electData = []; |
||||||
|
this.copData = []; |
||||||
|
} |
||||||
|
console.log(" this.dateList", this.dateList); |
||||||
|
}); |
||||||
|
// Just to simulate the time of the request |
||||||
|
setTimeout(() => { |
||||||
|
this.listLoading = false; |
||||||
|
}, 1.0 * 1000); |
||||||
|
}, |
||||||
|
//初始化chartInstance2对象 折线图 |
||||||
|
initChart2() { |
||||||
|
this.chartInstance2 = echarts.init(this.$refs.charts_refs); |
||||||
|
this.option2 = { |
||||||
|
tooltip: { |
||||||
|
trigger: "axis", |
||||||
|
// 使用 formatter 设定 tooltip 内容格式 |
||||||
|
formatter: function (params) { |
||||||
|
let seriesHTML = ""; |
||||||
|
params.forEach(function (item) { |
||||||
|
seriesHTML += |
||||||
|
"<div>" + |
||||||
|
item.seriesName + |
||||||
|
': <span style="color: #000000; font-weight: bold;">' + |
||||||
|
item.value + |
||||||
|
"</span></div>"; |
||||||
|
}); |
||||||
|
return "<div>" + params[0].name + "</div>" + seriesHTML; |
||||||
|
}, |
||||||
|
// 自定义 tooltip 内容 |
||||||
|
formatter: function (params) { |
||||||
|
var res = params[0].name + "<br/>"; |
||||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||||
|
var seriesName = params[i].seriesName; |
||||||
|
var value = params[i].value; |
||||||
|
var marker = |
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + |
||||||
|
params[i].color + |
||||||
|
'"></span>'; |
||||||
|
// 根据不同的seriesName 返回不同的单位 |
||||||
|
if (seriesName === "瞬时冷量") { |
||||||
|
res += |
||||||
|
marker + |
||||||
|
seriesName + |
||||||
|
":" + |
||||||
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||||
|
value + |
||||||
|
" " + |
||||||
|
"kwr" + |
||||||
|
"</span><br>"; |
||||||
|
} else if (seriesName === "瞬时功率") { |
||||||
|
res += |
||||||
|
marker + |
||||||
|
seriesName + |
||||||
|
":" + |
||||||
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||||
|
value + |
||||||
|
" " + |
||||||
|
"kw" + |
||||||
|
"</span><br>"; |
||||||
|
} else { |
||||||
|
res += |
||||||
|
marker + |
||||||
|
seriesName + |
||||||
|
":" + |
||||||
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||||
|
value + |
||||||
|
" " + |
||||||
|
"</span><br>"; |
||||||
|
} |
||||||
|
} |
||||||
|
return res; |
||||||
|
}, |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
data: ["瞬时系统EER", "瞬时冷量", "瞬时功率"], |
||||||
|
selectedMode: false, // 是否允许图例进行点击 |
||||||
|
show: false, // 不显示图例 |
||||||
|
}, |
||||||
|
|
||||||
|
grid: { |
||||||
|
top: "5%", |
||||||
|
left: "3%", |
||||||
|
right: "4.4%", |
||||||
|
bottom: "20%", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: "category", |
||||||
|
//设置为true代表离零刻度间隔一段距离 |
||||||
|
boundaryGap: true, |
||||||
|
// 修饰刻度标签的颜色即x坐标数据 |
||||||
|
axisLabel: { |
||||||
|
// interval: 0, //强制显示所有x轴数据 |
||||||
|
// rotate: 30, //x轴坐标字体倾斜30度 |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, // 不显示坐标轴刻度线 |
||||||
|
}, |
||||||
|
// x坐标轴的颜色 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#e2e6f0", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
min: 0, |
||||||
|
miniInterval: 5, |
||||||
|
type: "value", |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
// 显示y坐标轴 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", // 设置 y 轴线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#1a3d62", // 设置分割线的颜色 |
||||||
|
type: "dashed", // 设置分割线为虚线 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
// 拖拽X轴 |
||||||
|
dataZoom: [ |
||||||
|
{ |
||||||
|
type: "slider", //inside鼠标缩放 |
||||||
|
show: this.showZoom, |
||||||
|
height: 15, // 设置控制区域的高度为 20 像素 |
||||||
|
// fillerColor: 'rgba(255, 0, 0, 0.5)', // 设置选中区域的颜色为半透明的红色 |
||||||
|
// backgroundColor: 'rgba(0, 0, 0, 0.1)', // 设置背景颜色为透明度为 0.1 的黑色 |
||||||
|
start: 0, |
||||||
|
end: 100, |
||||||
|
xAxisIndex: [0], |
||||||
|
handleSize: "120%", // 设置滑块大小为默认大小的 120% |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "瞬时系统EER", |
||||||
|
type: "line", |
||||||
|
smooth: true, |
||||||
|
symbol: "circle", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
// 设置拐点颜色以及边框 |
||||||
|
// itemStyle: { |
||||||
|
// color: "#0184d5", |
||||||
|
// borderColor: "rgba(221, 220, 107, .1)", |
||||||
|
// borderWidth: 12 |
||||||
|
// }, |
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#e45050", //折线点的颜色 |
||||||
|
lineStyle: { |
||||||
|
color: "#e45050", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
//线性渐变 |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(228, 80, 80, 1)", // 0% 处的颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 0.8, |
||||||
|
color: "rgba(228, 80, 80,0.2)", // 100% 处的颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
// global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "瞬时冷量", |
||||||
|
type: "line", |
||||||
|
smooth: true, |
||||||
|
symbol: "circle", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
// 设置拐点颜色以及边框 |
||||||
|
// itemStyle: { |
||||||
|
// color: "#0184d5", |
||||||
|
// borderColor: "rgba(221, 220, 107, .1)", |
||||||
|
// borderWidth: 12 |
||||||
|
// }, |
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#0b75d3", //折线点的颜色 |
||||||
|
lineStyle: { |
||||||
|
color: "#0b75d3", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
//线性渐变 |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(11, 117, 211, 1)", // 0% 处的颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 0.8, |
||||||
|
color: "rgba(11, 117, 211,0.2)", // 100% 处的颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
// global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "瞬时功率", |
||||||
|
type: "line", |
||||||
|
smooth: true, |
||||||
|
symbol: "circle", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
// 设置拐点颜色以及边框 |
||||||
|
// itemStyle: { |
||||||
|
// color: "#0184d5", |
||||||
|
// borderColor: "rgba(221, 220, 107, .1)", |
||||||
|
// borderWidth: 12 |
||||||
|
// }, |
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#01c29b", //折线点的颜色 |
||||||
|
lineStyle: { |
||||||
|
color: "#01c29b", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
//线性渐变 |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(1, 194, 155, 1)", // 0% 处的颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 0.8, |
||||||
|
color: "rgba(1, 194, 155,0.2)", // 100% 处的颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
// global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.chartInstance2.setOption(this.option2, true); |
||||||
|
}, |
||||||
|
// 控制图例 |
||||||
|
screenAdapter2() { |
||||||
|
// console.log("checkList:", this.checkList); |
||||||
|
const selected = { |
||||||
|
瞬时系统EER: false, |
||||||
|
瞬时冷量: false, |
||||||
|
瞬时功率: false, |
||||||
|
}; |
||||||
|
const updatedSelected = { |
||||||
|
...selected, |
||||||
|
[this.checkList]: true, |
||||||
|
}; |
||||||
|
// console.log(updatedSelected); |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = this.$refs.charts_refs.offsetWidth / 130; |
||||||
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||||
|
const adapterOption = { |
||||||
|
legend: { |
||||||
|
selected: updatedSelected, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
// data: ["2021", "2022", "2023"], |
||||||
|
data: this.dateList2, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "瞬时系统EER", |
||||||
|
// data: ["1", "2", "6"], |
||||||
|
data: this.copData2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "瞬时冷量", |
||||||
|
// data: ["1", "2", "6"], |
||||||
|
data: this.nowColdData2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "瞬时功率", |
||||||
|
// data: ["1", "2", "6"], |
||||||
|
data: this.nowElectData2, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance2.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance2.resize(); |
||||||
|
}, |
||||||
|
// 元素大小 |
||||||
|
screenAdapter() { |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = this.$refs.charts_refs.offsetWidth / 130; |
||||||
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||||
|
const adapterOption = { |
||||||
|
// x轴坐标字体大小 |
||||||
|
xAxis: { |
||||||
|
axisLabel: { |
||||||
|
fontSize: titleFontSize * 1.5, |
||||||
|
}, |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
axisLabel: { |
||||||
|
fontSize: titleFontSize * 1.5, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance2.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance2.resize(); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.condition-left { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
.years-div { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.years-word { |
||||||
|
font-size: 14px; |
||||||
|
margin: 0 5px; |
||||||
|
color: #388ff3; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.time-label { |
||||||
|
font-size: 16px; |
||||||
|
line-height: 7px; |
||||||
|
margin-right: 12px; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
} |
||||||
|
.charts-title { |
||||||
|
font-size: 0.24rem; |
||||||
|
line-height: 0.07rem; |
||||||
|
letter-spacing: 0.02rem; |
||||||
|
color: #1f70e9; |
||||||
|
margin: 0.3rem 0; |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.charts-check { |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.main-content { |
||||||
|
min-height: 6.6rem; |
||||||
|
} |
||||||
|
|
||||||
|
.analysis-table table thead th { |
||||||
|
min-width: 1.6rem; |
||||||
|
} |
||||||
|
|
||||||
|
.connect-div { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
width: 16rem; |
||||||
|
} |
||||||
|
|
||||||
|
.charts_refs { |
||||||
|
width: 16rem; |
||||||
|
height: 4.55rem; |
||||||
|
margin-left: -0.35rem; |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
媒体查询 |
||||||
|
*/ |
||||||
|
@media (max-width: 1210px) { |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,904 @@ |
|||||||
|
<template> |
||||||
|
<div class="main-body"> |
||||||
|
<div class="irregular-border"> |
||||||
|
<div class="main-content"> |
||||||
|
<div class="condition"> |
||||||
|
<div class="condition-left"> |
||||||
|
<div class="time-label">时间类型:</div> |
||||||
|
<el-radio-group |
||||||
|
v-model="dateType" |
||||||
|
style="margin-right: 0.24rem" |
||||||
|
@change="updateDateType" |
||||||
|
> |
||||||
|
<el-radio label="hour">小时</el-radio> |
||||||
|
<el-radio label="day">日</el-radio> |
||||||
|
<el-radio label="month">月</el-radio> |
||||||
|
<el-radio label="year">年</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
<div class="condition-btn"> |
||||||
|
<div |
||||||
|
class="legend-li" |
||||||
|
v-for="(item, index) in timeData2" |
||||||
|
:key="index + 1" |
||||||
|
@click="handleEnter(item.title, index)" |
||||||
|
:class="{ timeStyle2: timeIndex2 == index }" |
||||||
|
> |
||||||
|
{{ item.title }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-date-picker |
||||||
|
v-model="timeDate" |
||||||
|
:default-time="['00:00:00', '23:59:59']" |
||||||
|
type="datetimerange" |
||||||
|
range-separator="至" |
||||||
|
v-if="dateType == 'hour'" |
||||||
|
placeholder="选择日期" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<el-date-picker |
||||||
|
v-model="dayDate" |
||||||
|
type="daterange" |
||||||
|
v-if="dateType == 'day'" |
||||||
|
:key="this.dateType" |
||||||
|
range-separator="至" |
||||||
|
value-format="yyyy-MM-dd" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
@change="dateChange" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<el-date-picker |
||||||
|
v-model="monthDate" |
||||||
|
type="monthrange" |
||||||
|
v-if="dateType == 'month'" |
||||||
|
:key="this.dateType" |
||||||
|
range-separator="至" |
||||||
|
start-placeholder="开始月份" |
||||||
|
end-placeholder="结束月份" |
||||||
|
value-format="yyyy-MM" |
||||||
|
@change="dateChange" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div |
||||||
|
class="years-div" |
||||||
|
v-if="dateType == 'year'" |
||||||
|
:key="this.dateType" |
||||||
|
> |
||||||
|
<el-date-picker |
||||||
|
v-model="startYear" |
||||||
|
type="year" |
||||||
|
placeholder="选择开始年份" |
||||||
|
style="width: 180px" |
||||||
|
value-format="yyyy" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div class="years-word">至</div> |
||||||
|
<el-date-picker |
||||||
|
v-model="endYear" |
||||||
|
type="year" |
||||||
|
placeholder="选择结束年份" |
||||||
|
style="width: 180px" |
||||||
|
value-format="yyyy" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
</div> |
||||||
|
<el-select |
||||||
|
style="margin-left: 10px" |
||||||
|
v-model="systemType" |
||||||
|
placeholder="请选择系统类型" |
||||||
|
clearable |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="dict in systemTypes" |
||||||
|
:key="dict.dictValue" |
||||||
|
:label="dict.dictLabel" |
||||||
|
:value="dict.dictValue" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
<div class="success-btn" style="margin-left: 0.24rem"> |
||||||
|
<el-button type="success" @click="findData">查询</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- <div class="condition-right"> |
||||||
|
<el-button type="warning">导出</el-button> |
||||||
|
</div> --> |
||||||
|
</div> |
||||||
|
<div class="charts-table" v-loading="listLoading"> |
||||||
|
<div class="charts-title"> |
||||||
|
{{ this.titleDate }} {{ this.checkList }} |
||||||
|
</div> |
||||||
|
<div class="details_ref" ref="details_ref"></div> |
||||||
|
<div class="analysis-table" style="margin-bottom: 0.2rem"> |
||||||
|
<table> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th v-if="dateList.length > 0">类型</th> |
||||||
|
<th v-for="(item, index) in dateList" :key="index + 2"> |
||||||
|
{{ item }} |
||||||
|
</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr> |
||||||
|
<td v-if="curValue2.length > 0">本期{{ this.unitValue }}</td> |
||||||
|
<td v-for="(item, index) in curValue2" :key="index + 3"> |
||||||
|
{{ item }} |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td v-if="lastValue2.length > 0">上期{{ this.unitValue }}</td> |
||||||
|
<td v-for="(item, index) in lastValue2" :key="index + 4"> |
||||||
|
{{ item }} |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td v-if="mom2.length > 0">环比(%)</td> |
||||||
|
<td v-for="(item, index) in mom2" :key="index + 5"> |
||||||
|
{{ item }} |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { format2 } from "@/utils/datetime"; |
||||||
|
import * as echarts from "echarts"; |
||||||
|
import { momEnergy } from "@/api/centerairC/energyManage"; |
||||||
|
import { listData } from "@/api/system/dict/data"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
listLoading: false, |
||||||
|
dateType: "hour", //默认选择小时 |
||||||
|
timeDate: [], //小时值 |
||||||
|
dayDate: [], //日值 |
||||||
|
monthDate: [], //月值 |
||||||
|
startYear: "", //开始年份 |
||||||
|
endYear: "", //结束年份 |
||||||
|
startTime: "", //开始日期 |
||||||
|
endTime: "", //结束日期 |
||||||
|
timeData2: [{ title: "制冷量" }, { title: "用电量" }, { title: "EER" }], |
||||||
|
timeIndex2: 0, //制冷量 |
||||||
|
paramType: "cloud", //传给后端的类型 |
||||||
|
// 标题日期 |
||||||
|
titleDate: "", |
||||||
|
checkList: "制冷量", //默认选择制冷量 |
||||||
|
// 图例数据 |
||||||
|
dateList: [], |
||||||
|
curValue: [], |
||||||
|
lastValue: [], |
||||||
|
mom: [], |
||||||
|
//表格数据 |
||||||
|
curValue2: [], |
||||||
|
lastValue2: [], |
||||||
|
mom2: [], |
||||||
|
unitValue: "", //单位 |
||||||
|
systemType: "", //系统类型 |
||||||
|
systemTypes: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initializeTimeDate(); |
||||||
|
this.initChart1(); |
||||||
|
window.addEventListener("resize", this.screenAdapter); |
||||||
|
this.screenAdapter(); |
||||||
|
this.getDictList(); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||||
|
window.removeEventListener("resize", this.screenAdapter); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** 查询系统类型-字典数据列表 */ |
||||||
|
getDictList() { |
||||||
|
let data = { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 100, |
||||||
|
dictType: "sys_type", |
||||||
|
}; |
||||||
|
listData(data).then((response) => { |
||||||
|
this.systemTypes = response.rows; |
||||||
|
this.systemType = this.systemTypes[0].dictValue; |
||||||
|
this.getTableData(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 初始化时间 |
||||||
|
initializeTimeDate() { |
||||||
|
const start = new Date(new Date().setHours(0, 0, 0, 0)); |
||||||
|
const end = new Date(new Date().setHours(23, 59, 59, 59)); |
||||||
|
this.timeDate = [format2(start), format2(end)]; // 更新 |
||||||
|
this.titleDate = format2(start) + "至" + format2(end); |
||||||
|
}, |
||||||
|
// 选择时间类型 |
||||||
|
updateDateType() { |
||||||
|
// this.dateType = this.radio; |
||||||
|
console.log(this.dateType); |
||||||
|
(this.timeDate = []), //小时值 |
||||||
|
(this.dayDate = []), //日值 |
||||||
|
(this.monthDate = []), //月值 |
||||||
|
(this.startYear = ""), //开始年份 |
||||||
|
(this.endYear = ""); //结束年份 |
||||||
|
}, |
||||||
|
// 选择查询类型 |
||||||
|
handleEnter(title, index) { |
||||||
|
console.log("打印", title, index); |
||||||
|
this.timeIndex2 = index; |
||||||
|
if (index == "0") { |
||||||
|
this.paramType = "cloud"; |
||||||
|
} else if (index == "1") { |
||||||
|
this.paramType = "meter"; |
||||||
|
} else if (index == "2") { |
||||||
|
this.paramType = "cop"; |
||||||
|
} |
||||||
|
}, |
||||||
|
// 选中日期事件 |
||||||
|
dateChange() { |
||||||
|
// console.log("打印时间", this.timeform.time1); |
||||||
|
if (!this.dayDate) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.dayDate = []; |
||||||
|
}); |
||||||
|
} |
||||||
|
if (!this.monthDate) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.monthDate = []; |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 查询 |
||||||
|
findData() { |
||||||
|
console.log("this.dateType", this.dateType); |
||||||
|
console.log("this.timeDate", this.timeDate); |
||||||
|
switch (this.dateType) { |
||||||
|
case "hour": |
||||||
|
if (!this.timeDate) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
this.titleDate = |
||||||
|
format2(this.timeDate[0]) + "至" + format2(this.timeDate[1]); |
||||||
|
this.checkList = this.timeData2[this.timeIndex2].title; |
||||||
|
this.getTableData(); |
||||||
|
} |
||||||
|
break; |
||||||
|
case "day": |
||||||
|
if (this.dayDate.length === 0) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
this.titleDate = this.dayDate[0] + "至" + this.dayDate[1]; |
||||||
|
this.checkList = this.timeData2[this.timeIndex2].title; |
||||||
|
this.getTableData(); |
||||||
|
// const newLength = new Date(this.dayDate[1]).getTime() - new Date(this.dayDate[0]).getTime(); |
||||||
|
// const dayDiff = Math.floor(newLength / (1000 * 60 * 60 * 24)); |
||||||
|
// if (dayDiff > 31) { |
||||||
|
// this.showMessage('最多只能选择30天区间，请重新选择再查询！', 'warning'); |
||||||
|
// } else { |
||||||
|
// this.titleDate = this.dayDate[0] + "至" + this.dayDate[1]; |
||||||
|
// this.getTableData(); |
||||||
|
// } |
||||||
|
} |
||||||
|
break; |
||||||
|
case "month": |
||||||
|
if (this.monthDate.length === 0) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
this.titleDate = this.monthDate[0] + "至" + this.monthDate[1]; |
||||||
|
this.checkList = this.timeData2[this.timeIndex2].title; |
||||||
|
this.getTableData(); |
||||||
|
// const [start, end] = this.monthDate; |
||||||
|
// const startDate = new Date(start); |
||||||
|
// const endDate = new Date(end); |
||||||
|
// const startYear = startDate.getFullYear(); |
||||||
|
// const startMonth = startDate.getMonth(); |
||||||
|
// const endYear = endDate.getFullYear(); |
||||||
|
// const endMonth = endDate.getMonth(); |
||||||
|
// const monthDiff = (endYear - startYear) * 12 + (endMonth - startMonth); |
||||||
|
// if (monthDiff > 12) { |
||||||
|
// this.showMessage('最多只能选择12个月区间，请重新选择再查询！', 'warning'); |
||||||
|
// } else { |
||||||
|
// this.titleDate = this.monthDate[0] + "至" + this.monthDate[1]; |
||||||
|
// this.getTableData(); |
||||||
|
// } |
||||||
|
} |
||||||
|
break; |
||||||
|
case "year": |
||||||
|
if (!this.startYear || !this.endYear) { |
||||||
|
this.showMessage("请选择全年份区间！", "warning"); |
||||||
|
} else if (this.startYear > this.endYear) { |
||||||
|
this.showMessage("结束年份要大于开始年份！", "warning"); |
||||||
|
} else { |
||||||
|
this.titleDate = this.startYear + "至" + this.endYear; |
||||||
|
this.checkList = this.timeData2[this.timeIndex2].title; |
||||||
|
this.getTableData(); |
||||||
|
} |
||||||
|
break; |
||||||
|
default: |
||||||
|
break; |
||||||
|
} |
||||||
|
}, |
||||||
|
// 显示消息的函数 |
||||||
|
showMessage(message, type) { |
||||||
|
this.$message({ |
||||||
|
message: message, |
||||||
|
type: type, |
||||||
|
}); |
||||||
|
}, |
||||||
|
//请求数据 |
||||||
|
getTableData() { |
||||||
|
if (this.dateType == "hour") { |
||||||
|
this.startTime = format2(this.timeDate[0]); |
||||||
|
this.endTime = format2(this.timeDate[1]); |
||||||
|
} else if (this.dateType == "day") { |
||||||
|
this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : ""; |
||||||
|
this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : ""; |
||||||
|
} else if (this.dateType == "month") { |
||||||
|
this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : ""; |
||||||
|
this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : ""; |
||||||
|
} else if (this.dateType == "year") { |
||||||
|
(this.startTime = this.startYear), (this.endTime = this.endYear); |
||||||
|
} |
||||||
|
let data = { |
||||||
|
timeType: this.dateType, |
||||||
|
startTime: this.startTime, |
||||||
|
endTime: this.endTime, |
||||||
|
paramType: this.paramType, |
||||||
|
systemType: this.systemType, |
||||||
|
}; |
||||||
|
console.log("查询数据参数", data); |
||||||
|
this.listLoading = true; |
||||||
|
momEnergy(data).then((res) => { |
||||||
|
console.log("查询返回", res); |
||||||
|
if (res.code == 200 && res.data.data !== null) { |
||||||
|
this.dateList = res.data.times; |
||||||
|
// 具体看看怎么拿到三组数据 |
||||||
|
this.curValue2 = []; |
||||||
|
this.lastValue2 = []; |
||||||
|
this.mom2 = []; |
||||||
|
this.curValue2 = res.data.data[0].curValue; |
||||||
|
this.lastValue2 = res.data.data[1].lastValue; |
||||||
|
this.mom2 = res.data.data[2].mom; |
||||||
|
console.log("后端返回的时间", this.dateList); |
||||||
|
console.log("后端返回的本期值", this.curValue2); |
||||||
|
console.log("后端返回的上期值", this.lastValue2); |
||||||
|
console.log("后端返回的环比值", this.mom2); |
||||||
|
// 折线图的上期值和环比值需要单独处理 |
||||||
|
this.curValue = this.curValue2.map(function (value) { |
||||||
|
if (value === null) { |
||||||
|
return 0; |
||||||
|
} else if (typeof value === "string") { |
||||||
|
return parseFloat(value); |
||||||
|
} |
||||||
|
return value; |
||||||
|
}); |
||||||
|
this.lastValue = this.lastValue2.map(function (value) { |
||||||
|
if (value === null) { |
||||||
|
return 0; |
||||||
|
} else if (typeof value === "string") { |
||||||
|
return parseFloat(value); |
||||||
|
} |
||||||
|
return value; |
||||||
|
}); |
||||||
|
this.mom = this.mom2.map(function (value) { |
||||||
|
if (value === "上期无数据") { |
||||||
|
return 0; |
||||||
|
} else if (typeof value === "string") { |
||||||
|
if (value.endsWith("%")) { |
||||||
|
return parseFloat(value); |
||||||
|
} else { |
||||||
|
return parseFloat(value); |
||||||
|
} |
||||||
|
} |
||||||
|
return value; |
||||||
|
}); |
||||||
|
console.log("处理过的本期值", this.curValue); |
||||||
|
console.log("处理过的上期值", this.lastValue); |
||||||
|
console.log("处理过的环比值", this.mom); |
||||||
|
// 计算双y轴最大最小值， |
||||||
|
// var Min1 = Math.floor(Math.min(...this.curValue, ...this.lastValue)), |
||||||
|
// 希望左侧y轴数据最小为0 |
||||||
|
var Min1 = 0, |
||||||
|
Min2 = Math.floor(Math.min(...this.mom)), |
||||||
|
Max1 = Math.ceil(Math.max(...this.curValue, ...this.lastValue)), |
||||||
|
Max2 = Math.ceil(Math.max(...this.mom)); |
||||||
|
console.log("Min1", Min1); |
||||||
|
console.log("Min2", Min2); |
||||||
|
console.log("Max1", Max1); |
||||||
|
console.log("Max2", Max2); |
||||||
|
// 修改tooltip的数据单位，需求点击“查询”-请求成功后才改变 |
||||||
|
if (this.timeIndex2 == 0) { |
||||||
|
this.unitValue = "(kwr)"; |
||||||
|
} else if (this.timeIndex2 == 1) { |
||||||
|
this.unitValue = "(kwh)"; |
||||||
|
} else { |
||||||
|
this.unitValue = " "; |
||||||
|
} |
||||||
|
const adapterOption = { |
||||||
|
xAxis: { |
||||||
|
data: this.dateList, |
||||||
|
}, |
||||||
|
yAxis: [ |
||||||
|
//两个y轴 |
||||||
|
{ |
||||||
|
min: Min1, |
||||||
|
max: Max1, |
||||||
|
splitNumber: 10, |
||||||
|
interval: (Max1 - Min1) / 10, |
||||||
|
}, |
||||||
|
{ |
||||||
|
min: Min2, |
||||||
|
max: Max2, |
||||||
|
splitNumber: 10, |
||||||
|
interval: (Max2 - Min2) / 10, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "本期", |
||||||
|
data: this.curValue, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "环比", |
||||||
|
data: this.mom, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance1.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance1.resize(); |
||||||
|
} else { |
||||||
|
// console.log("后端返回的时间", this.dateList) |
||||||
|
// console.log("后端返回的本期值", this.curValue2) |
||||||
|
// console.log("后端返回的上期值", this.lastValue2) |
||||||
|
// console.log("后端返回的环比值", this.mom2) |
||||||
|
this.dateList = []; |
||||||
|
(this.curValue2 = []), (this.lastValue2 = []), (this.mom2 = []); |
||||||
|
var Min1 = 0, |
||||||
|
Min2 = 0, |
||||||
|
Max1 = 0, |
||||||
|
Max2 = 0; |
||||||
|
const adapterOption = { |
||||||
|
xAxis: { |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
yAxis: [ |
||||||
|
//两个y轴 |
||||||
|
{ |
||||||
|
min: Min1, |
||||||
|
max: Max1, |
||||||
|
splitNumber: 10, |
||||||
|
interval: (Max1 - Min1) / 10, |
||||||
|
}, |
||||||
|
{ |
||||||
|
min: Min2, |
||||||
|
max: Max2, |
||||||
|
splitNumber: 10, |
||||||
|
interval: (Max2 - Min2) / 10, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "本期", |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "环比", |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance1.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance1.resize(); |
||||||
|
} |
||||||
|
}); |
||||||
|
// Just to simulate the time of the request |
||||||
|
setTimeout(() => { |
||||||
|
this.listLoading = false; |
||||||
|
}, 1.0 * 1000); |
||||||
|
}, |
||||||
|
initChart1() { |
||||||
|
// // 计算双y轴最大最小值， |
||||||
|
// var Min1 = 1; |
||||||
|
// var Min2 = 3; |
||||||
|
// var Max1 = 10; |
||||||
|
// var Max2 = 12; |
||||||
|
// console.log("Min1", Min1); |
||||||
|
// console.log("Min2", Min2); |
||||||
|
// console.log("Max1", Max1); |
||||||
|
// console.log("Max2", Max2); |
||||||
|
this.chartInstance1 = echarts.init(this.$refs.details_ref); |
||||||
|
this.option1 = { |
||||||
|
tooltip: { |
||||||
|
trigger: "axis", |
||||||
|
// 使用 formatter 设定 tooltip 内容格式 |
||||||
|
formatter: function (params) { |
||||||
|
let seriesHTML = ""; |
||||||
|
params.forEach(function (item) { |
||||||
|
seriesHTML += |
||||||
|
"<div>" + |
||||||
|
item.seriesName + |
||||||
|
': <span style="color: #000000; font-weight: bold;">' + |
||||||
|
item.value + |
||||||
|
"</span></div>"; |
||||||
|
}); |
||||||
|
return "<div>" + params[0].name + "</div>" + seriesHTML; |
||||||
|
}, |
||||||
|
// 自定义 tooltip 内容 |
||||||
|
formatter: function (params) { |
||||||
|
var res = params[0].name + "<br/>"; |
||||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||||
|
var seriesName = params[i].seriesName; |
||||||
|
var value = params[i].value; |
||||||
|
// console.log("打印颜色", params[i].color.colorStops[0].color) |
||||||
|
var marker = |
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + |
||||||
|
params[i].color.colorStops[0].color + |
||||||
|
'"></span>'; |
||||||
|
// 根据不同的seriesName 返回不同的单位 |
||||||
|
if (seriesName === "本期") { |
||||||
|
res += |
||||||
|
marker + |
||||||
|
seriesName + |
||||||
|
":" + |
||||||
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||||
|
value + |
||||||
|
" " + |
||||||
|
"kwr" + |
||||||
|
"</span><br>"; |
||||||
|
} else if (seriesName === "上期") { |
||||||
|
res += |
||||||
|
marker + |
||||||
|
seriesName + |
||||||
|
":" + |
||||||
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||||
|
value + |
||||||
|
" " + |
||||||
|
"kwh" + |
||||||
|
"</span><br>"; |
||||||
|
} else { |
||||||
|
res += |
||||||
|
marker + |
||||||
|
seriesName + |
||||||
|
":" + |
||||||
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||||
|
value + |
||||||
|
" " + |
||||||
|
"%" + |
||||||
|
"</span><br>"; |
||||||
|
} |
||||||
|
} |
||||||
|
return res; |
||||||
|
}, |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
data: ["本期", "环比"], |
||||||
|
textStyle: { |
||||||
|
color: "#ffff", |
||||||
|
fontSize: 16, //这里改字体大小 |
||||||
|
}, |
||||||
|
left: "41%", |
||||||
|
top: "0%", |
||||||
|
bottom: "10%", |
||||||
|
//图例距离饼图的距离 |
||||||
|
itemGap: 50, |
||||||
|
itemWidth: 16, |
||||||
|
itemHeight: 8, |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
top: "20%", |
||||||
|
left: "3%", |
||||||
|
right: "4%", |
||||||
|
bottom: "0%", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: "category", |
||||||
|
//设置为true代表离零刻度间隔一段距离 |
||||||
|
boundaryGap: true, |
||||||
|
// 修饰刻度标签的颜色即x坐标数据 |
||||||
|
axisLabel: { |
||||||
|
// interval: 0, //强制显示所有x轴数据 |
||||||
|
// rotate: 30, //x轴坐标字体倾斜30度 |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, // 不显示坐标轴刻度线 |
||||||
|
}, |
||||||
|
// x坐标轴的颜色 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#e2e6f0", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
yAxis: [ |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
name: "本期", // 第一个 y 轴的单位描述 |
||||||
|
nameTextStyle: { |
||||||
|
fontSize: 15, // 调整字体大小 |
||||||
|
color: "#fff", // 调整字体颜色 |
||||||
|
// 其他样式属性... |
||||||
|
}, |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
// 显示y坐标轴 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", // 设置 y 轴线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#1a3d62", // 设置分割线的颜色 |
||||||
|
type: "dashed", // 设置分割线为虚线 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
name: "环比", // 第二个 y 轴的单位描述 |
||||||
|
nameTextStyle: { |
||||||
|
fontSize: 15, // 调整字体大小 |
||||||
|
color: "#fff", // 调整字体颜色 |
||||||
|
// 其他样式属性... |
||||||
|
}, |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
formatter: "{value} %", |
||||||
|
}, |
||||||
|
// 显示y坐标轴 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", // 设置 y 轴线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#1a3d62", // 设置分割线的颜色 |
||||||
|
type: "dashed", // 设置分割线为虚线 |
||||||
|
}, |
||||||
|
}, |
||||||
|
// min: Min2, |
||||||
|
// max: Max2, |
||||||
|
// splitNumber: 10, |
||||||
|
// interval: (Max2 - Min2) / 10, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "本期", |
||||||
|
type: "bar", |
||||||
|
smooth: true, |
||||||
|
symbol: "circle", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
|
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#0b75d3", |
||||||
|
// 使用颜色渐变 |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(1, 102, 251, 1)", // 起始颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(1, 102, 251, 0)", // 结束颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径 |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "上期", |
||||||
|
type: "bar", |
||||||
|
smooth: true, |
||||||
|
symbol: "circle", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#0b75d3", |
||||||
|
// 使用颜色渐变 |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(0, 224, 225, 1)", // 起始颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(0, 224, 225, 0)", // 结束颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
borderRadius: [5, 5, 0, 0], |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "环比", |
||||||
|
type: "line", |
||||||
|
smooth: false, |
||||||
|
symbol: "circle", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
yAxisIndex: 1, |
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#EE5217", //折线点的颜色 |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "#EE5217", // 起始颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "#EE5217", // 结束颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
lineStyle: { |
||||||
|
color: "#EE5217", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.chartInstance1.setOption(this.option1, true); |
||||||
|
}, |
||||||
|
// 折线图自适应 |
||||||
|
screenAdapter() { |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = (this.$refs.details_ref.offsetWidth / 100) * 1.8; |
||||||
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||||
|
const adapterOption = { |
||||||
|
//比如fontSize |
||||||
|
textStyle: { |
||||||
|
fontSize: titleFontSize, |
||||||
|
}, |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance1.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance1.resize(); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.condition-left { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
.years-div { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.years-word { |
||||||
|
font-size: 14px; |
||||||
|
margin: 0 5px; |
||||||
|
color: #388ff3; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.time-label { |
||||||
|
font-size: 16px; |
||||||
|
line-height: 7px; |
||||||
|
margin-right: 12px; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
} |
||||||
|
.charts-title { |
||||||
|
font-size: 0.24rem; |
||||||
|
line-height: 0.07rem; |
||||||
|
letter-spacing: 0.02rem; |
||||||
|
color: #1f70e9; |
||||||
|
margin: 0.3rem 0; |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.main-content { |
||||||
|
min-height: 6.6rem; |
||||||
|
} |
||||||
|
|
||||||
|
.analysis-table table thead th { |
||||||
|
min-width: 1.6rem; |
||||||
|
} |
||||||
|
|
||||||
|
.details_ref { |
||||||
|
width: 16.5rem; |
||||||
|
height: 3.55rem; |
||||||
|
margin-bottom: 0.39rem; |
||||||
|
margin-left: -0.3rem; |
||||||
|
} |
||||||
|
|
||||||
|
.condition-btn { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
overflow: hidden; |
||||||
|
cursor: pointer; |
||||||
|
border-radius: 4px; |
||||||
|
margin-right: 0.24rem; |
||||||
|
background-color: #324868; |
||||||
|
|
||||||
|
.legend-li { |
||||||
|
text-align: center; |
||||||
|
line-height: 100%; |
||||||
|
padding: 7px 13px; |
||||||
|
white-space: nowrap; |
||||||
|
font-size: 16px; |
||||||
|
color: #9eb5cf; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.timeStyle2 { |
||||||
|
color: #ffffff !important; |
||||||
|
background-color: #2886e3; |
||||||
|
border: 1px solid #2886e3; |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
媒体查询 |
||||||
|
*/ |
||||||
|
@media (max-width: 1210px) { |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,917 @@ |
|||||||
|
<template> |
||||||
|
<div class="main-body"> |
||||||
|
<div class="irregular-border"> |
||||||
|
<div class="main-content"> |
||||||
|
<div class="condition"> |
||||||
|
<div class="condition-left"> |
||||||
|
<div class="time-label">时间类型:</div> |
||||||
|
<el-radio-group |
||||||
|
v-model="dateType" |
||||||
|
style="margin-right: 0.24rem" |
||||||
|
@change="updateDateType" |
||||||
|
> |
||||||
|
<el-radio label="hour">小时</el-radio> |
||||||
|
<el-radio label="day">日</el-radio> |
||||||
|
<el-radio label="month">月</el-radio> |
||||||
|
<el-radio label="year">年</el-radio> |
||||||
|
</el-radio-group> |
||||||
|
<div class="condition-btn"> |
||||||
|
<div |
||||||
|
class="legend-li" |
||||||
|
v-for="(item, index) in timeData2" |
||||||
|
:key="index + 1" |
||||||
|
@click="handleEnter(item.title, index)" |
||||||
|
:class="{ timeStyle2: timeIndex2 == index }" |
||||||
|
> |
||||||
|
{{ item.title }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-date-picker |
||||||
|
v-model="timeDate" |
||||||
|
:default-time="['00:00:00', '23:59:59']" |
||||||
|
type="datetimerange" |
||||||
|
range-separator="至" |
||||||
|
v-if="dateType == 'hour'" |
||||||
|
placeholder="选择日期" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<el-date-picker |
||||||
|
v-model="dayDate" |
||||||
|
type="daterange" |
||||||
|
v-if="dateType == 'day'" |
||||||
|
:key="this.dateType" |
||||||
|
range-separator="至" |
||||||
|
value-format="yyyy-MM-dd" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
@change="dateChange" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<el-date-picker |
||||||
|
v-model="monthDate" |
||||||
|
type="monthrange" |
||||||
|
v-if="dateType == 'month'" |
||||||
|
:key="this.dateType" |
||||||
|
range-separator="至" |
||||||
|
start-placeholder="开始月份" |
||||||
|
end-placeholder="结束月份" |
||||||
|
value-format="yyyy-MM" |
||||||
|
@change="dateChange" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div |
||||||
|
class="years-div" |
||||||
|
v-if="dateType == 'year'" |
||||||
|
:key="this.dateType" |
||||||
|
> |
||||||
|
<el-date-picker |
||||||
|
v-model="startYear" |
||||||
|
type="year" |
||||||
|
placeholder="选择开始年份" |
||||||
|
style="width: 180px" |
||||||
|
value-format="yyyy" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div class="years-word">至</div> |
||||||
|
<el-date-picker |
||||||
|
v-model="endYear" |
||||||
|
type="year" |
||||||
|
placeholder="选择结束年份" |
||||||
|
style="width: 180px" |
||||||
|
value-format="yyyy" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
</div> |
||||||
|
<el-select |
||||||
|
style="margin-left: 10px" |
||||||
|
v-model="systemType" |
||||||
|
placeholder="请选择系统类型" |
||||||
|
clearable |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="dict in systemTypes" |
||||||
|
:key="dict.dictValue" |
||||||
|
:label="dict.dictLabel" |
||||||
|
:value="dict.dictValue" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
<div class="success-btn" style="margin-left: 0.24rem"> |
||||||
|
<el-button type="success" @click="findData">查询</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- <div class="condition-right"> |
||||||
|
<el-button type="warning">导出</el-button> |
||||||
|
</div> --> |
||||||
|
</div> |
||||||
|
<div class="charts-table" v-loading="listLoading"> |
||||||
|
<div class="charts-title"> |
||||||
|
{{ this.titleDate }} {{ this.checkList }} |
||||||
|
</div> |
||||||
|
<div class="details_ref" ref="details_ref"></div> |
||||||
|
<div class="analysis-table" style="margin-bottom: 0.2rem"> |
||||||
|
<table> |
||||||
|
<thead> |
||||||
|
<tr> |
||||||
|
<th v-if="dateList.length > 0">类型</th> |
||||||
|
<th v-for="(item, index) in dateList" :key="index + 2"> |
||||||
|
{{ item }} |
||||||
|
</th> |
||||||
|
</tr> |
||||||
|
</thead> |
||||||
|
<tbody> |
||||||
|
<tr> |
||||||
|
<td v-if="curValue2.length > 0">本期{{ this.unitValue }}</td> |
||||||
|
<td v-for="(item, index) in curValue2" :key="index + 3"> |
||||||
|
{{ item }} |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td v-if="lastValue2.length > 0">上期{{ this.unitValue }}</td> |
||||||
|
<td v-for="(item, index) in lastValue2" :key="index + 4"> |
||||||
|
{{ item }} |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td v-if="yoy2.length > 0">同比(%)</td> |
||||||
|
<td v-for="(item, index) in yoy2" :key="index + 5"> |
||||||
|
{{ item }} |
||||||
|
</td> |
||||||
|
</tr> |
||||||
|
</tbody> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { format2 } from "@/utils/datetime"; |
||||||
|
import * as echarts from "echarts"; |
||||||
|
import { yoyEnergy } from "@/api/centerairC/energyManage"; |
||||||
|
import { listData } from "@/api/system/dict/data"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
listLoading: false, |
||||||
|
dateType: "hour", //默认选择小时 |
||||||
|
timeDate: [], //小时值 |
||||||
|
dayDate: [], //日值 |
||||||
|
monthDate: [], //月值 |
||||||
|
startYear: "", //开始年份 |
||||||
|
endYear: "", //结束年份 |
||||||
|
startTime: "", //开始日期 |
||||||
|
endTime: "", //结束日期 |
||||||
|
timeData2: [{ title: "制冷量" }, { title: "用电量" }, { title: "EER" }], |
||||||
|
timeIndex2: 0, //制冷量 |
||||||
|
paramType: "cloud", //传给后端的类型 |
||||||
|
// 标题日期 |
||||||
|
titleDate: "", |
||||||
|
checkList: "制冷量", //默认选择制冷量 |
||||||
|
// 图例数据 |
||||||
|
dateList: [], |
||||||
|
curValue: [], |
||||||
|
lastValue: [], |
||||||
|
yoy: [], |
||||||
|
//表格数据 |
||||||
|
curValue2: [], |
||||||
|
lastValue2: [], |
||||||
|
yoy2: [], |
||||||
|
unitValue: "", //单位 |
||||||
|
systemType: "", //系统类型 |
||||||
|
systemTypes: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initializeTimeDate(); |
||||||
|
this.initChart1(); |
||||||
|
window.addEventListener("resize", this.screenAdapter); |
||||||
|
this.screenAdapter(); |
||||||
|
this.getDictList(); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||||
|
window.removeEventListener("resize", this.screenAdapter); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** 查询系统类型-字典数据列表 */ |
||||||
|
getDictList() { |
||||||
|
let data = { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 100, |
||||||
|
dictType: "sys_type", |
||||||
|
}; |
||||||
|
listData(data).then((response) => { |
||||||
|
this.systemTypes = response.rows; |
||||||
|
this.systemType = this.systemTypes[0].dictValue; |
||||||
|
this.getTableData(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 初始化时间 |
||||||
|
initializeTimeDate() { |
||||||
|
const start = new Date(new Date().setHours(0, 0, 0, 0)); |
||||||
|
const end = new Date(new Date().setHours(23, 59, 59, 59)); |
||||||
|
this.timeDate = [format2(start), format2(end)]; // 更新 |
||||||
|
this.titleDate = format2(start) + "至" + format2(end); |
||||||
|
}, |
||||||
|
// 选择时间类型 |
||||||
|
updateDateType() { |
||||||
|
// this.dateType = this.radio; |
||||||
|
console.log(this.dateType); |
||||||
|
(this.timeDate = ""), //小时值 |
||||||
|
(this.dayDate = []), //日值 |
||||||
|
(this.monthDate = []), //月值 |
||||||
|
(this.startYear = ""), //开始年份 |
||||||
|
(this.endYear = ""); //结束年份 |
||||||
|
}, |
||||||
|
handleEnter(title, index) { |
||||||
|
console.log("打印", title, index); |
||||||
|
this.timeIndex2 = index; |
||||||
|
if (index == "0") { |
||||||
|
this.paramType = "cloud"; |
||||||
|
} else if (index == "1") { |
||||||
|
this.paramType = "meter"; |
||||||
|
} else if (index == "2") { |
||||||
|
this.paramType = "cop"; |
||||||
|
} |
||||||
|
}, |
||||||
|
// 选中日期事件 |
||||||
|
dateChange() { |
||||||
|
// console.log("打印时间", this.timeform.time1); |
||||||
|
if (!this.dayDate) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.dayDate = []; |
||||||
|
}); |
||||||
|
} |
||||||
|
if (!this.monthDate) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.monthDate = []; |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 查询 |
||||||
|
findData() { |
||||||
|
console.log("this.dateType", this.dateType); |
||||||
|
console.log("this.timeDate", this.timeDate); |
||||||
|
switch (this.dateType) { |
||||||
|
case "hour": |
||||||
|
if (!this.timeDate) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
this.titleDate = |
||||||
|
format2(this.timeDate[0]) + "至" + format2(this.timeDate[1]); |
||||||
|
this.checkList = this.timeData2[this.timeIndex2].title; |
||||||
|
this.getTableData(); |
||||||
|
} |
||||||
|
break; |
||||||
|
case "day": |
||||||
|
if (this.dayDate.length === 0) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
this.titleDate = this.dayDate[0] + "至" + this.dayDate[1]; |
||||||
|
this.checkList = this.timeData2[this.timeIndex2].title; |
||||||
|
this.getTableData(); |
||||||
|
// const newLength = new Date(this.dayDate[1]).getTime() - new Date(this.dayDate[0]).getTime(); |
||||||
|
// const dayDiff = Math.floor(newLength / (1000 * 60 * 60 * 24)); |
||||||
|
// if (dayDiff > 31) { |
||||||
|
// this.showMessage('最多只能选择30天区间，请重新选择再查询！', 'warning'); |
||||||
|
// } else { |
||||||
|
// this.titleDate = this.dayDate[0] + "至" + this.dayDate[1]; |
||||||
|
// this.getTableData(); |
||||||
|
// } |
||||||
|
} |
||||||
|
break; |
||||||
|
case "month": |
||||||
|
if (this.monthDate.length === 0) { |
||||||
|
this.showMessage("请选择时间！", "warning"); |
||||||
|
} else { |
||||||
|
this.titleDate = this.monthDate[0] + "至" + this.monthDate[1]; |
||||||
|
this.checkList = this.timeData2[this.timeIndex2].title; |
||||||
|
this.getTableData(); |
||||||
|
// const [start, end] = this.monthDate; |
||||||
|
// const startDate = new Date(start); |
||||||
|
// const endDate = new Date(end); |
||||||
|
// const startYear = startDate.getFullYear(); |
||||||
|
// const startMonth = startDate.getMonth(); |
||||||
|
// const endYear = endDate.getFullYear(); |
||||||
|
// const endMonth = endDate.getMonth(); |
||||||
|
// const monthDiff = (endYear - startYear) * 12 + (endMonth - startMonth); |
||||||
|
// if (monthDiff > 12) { |
||||||
|
// this.showMessage('最多只能选择12个月区间，请重新选择再查询！', 'warning'); |
||||||
|
// } else { |
||||||
|
// this.titleDate = this.monthDate[0] + "至" + this.monthDate[1]; |
||||||
|
// this.getTableData(); |
||||||
|
// } |
||||||
|
} |
||||||
|
break; |
||||||
|
case "year": |
||||||
|
if (!this.startYear || !this.endYear) { |
||||||
|
this.showMessage("请选择全年份区间！", "warning"); |
||||||
|
} else if (this.startYear > this.endYear) { |
||||||
|
this.showMessage("结束年份要大于开始年份！", "warning"); |
||||||
|
} else { |
||||||
|
this.titleDate = this.startYear + "至" + this.endYear; |
||||||
|
this.checkList = this.timeData2[this.timeIndex2].title; |
||||||
|
this.getTableData(); |
||||||
|
} |
||||||
|
break; |
||||||
|
default: |
||||||
|
break; |
||||||
|
} |
||||||
|
}, |
||||||
|
// 显示消息的函数 |
||||||
|
showMessage(message, type) { |
||||||
|
this.$message({ |
||||||
|
message: message, |
||||||
|
type: type, |
||||||
|
}); |
||||||
|
}, |
||||||
|
//请求数据 |
||||||
|
getTableData() { |
||||||
|
if (this.dateType == "hour") { |
||||||
|
this.startTime = format2(this.timeDate[0]); |
||||||
|
this.endTime = format2(this.timeDate[1]); |
||||||
|
} else if (this.dateType == "day") { |
||||||
|
this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : ""; |
||||||
|
this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : ""; |
||||||
|
} else if (this.dateType == "month") { |
||||||
|
this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : ""; |
||||||
|
this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : ""; |
||||||
|
} else if (this.dateType == "year") { |
||||||
|
(this.startTime = this.startYear), (this.endTime = this.endYear); |
||||||
|
} |
||||||
|
let data = { |
||||||
|
timeType: this.dateType, |
||||||
|
startTime: this.startTime, |
||||||
|
endTime: this.endTime, |
||||||
|
paramType: this.paramType, |
||||||
|
systemType: this.systemType, |
||||||
|
}; |
||||||
|
console.log("查询数据参数", data); |
||||||
|
this.listLoading = true; |
||||||
|
yoyEnergy(data).then((res) => { |
||||||
|
console.log("查询返回", res); |
||||||
|
if (res.code == 200 && res.data.data !== null) { |
||||||
|
this.dateList = res.data.times; |
||||||
|
// 具体看看怎么拿到三组数据 |
||||||
|
this.curValue2 = []; |
||||||
|
this.lastValue2 = []; |
||||||
|
this.yoy2 = []; |
||||||
|
this.curValue2 = res.data.data[0].curValue; |
||||||
|
this.lastValue2 = res.data.data[1].lastValue; |
||||||
|
this.yoy2 = res.data.data[2].yoy; |
||||||
|
console.log("后端返回的时间", this.dateList); |
||||||
|
console.log("后端返回的本期值", this.curValue2); |
||||||
|
console.log("后端返回的上期值", this.lastValue2); |
||||||
|
console.log("后端返回的同比值", this.yoy2); |
||||||
|
// 折线图的上期值和同比值需要单独处理 |
||||||
|
this.curValue = this.curValue2.map(function (value) { |
||||||
|
if (value === null) { |
||||||
|
return 0; |
||||||
|
} else if (typeof value === "string") { |
||||||
|
return parseFloat(value); |
||||||
|
} |
||||||
|
return value; |
||||||
|
}); |
||||||
|
this.lastValue = this.lastValue2.map(function (value) { |
||||||
|
if (value === null) { |
||||||
|
return 0; |
||||||
|
} else if (typeof value === "string") { |
||||||
|
return parseFloat(value); |
||||||
|
} |
||||||
|
return value; |
||||||
|
}); |
||||||
|
this.yoy = this.yoy2.map(function (value) { |
||||||
|
if (value === "同期无数据") { |
||||||
|
return 0; |
||||||
|
} else if (typeof value === "string") { |
||||||
|
if (value.endsWith("%")) { |
||||||
|
return parseFloat(value); |
||||||
|
} else { |
||||||
|
return parseFloat(value); |
||||||
|
} |
||||||
|
} |
||||||
|
return value; |
||||||
|
}); |
||||||
|
console.log("处理过的本期值", this.curValue); |
||||||
|
console.log("处理过的上期值", this.lastValue); |
||||||
|
console.log("处理过的同比值", this.yoy); |
||||||
|
// 计算双y轴最大最小值， |
||||||
|
// var Min1 = Math.floor(Math.min(...this.curValue, ...this.lastValue)), |
||||||
|
var Min1 = 0, |
||||||
|
Min2 = Math.floor(Math.min(...this.yoy)), |
||||||
|
Max1 = Math.ceil(Math.max(...this.curValue, ...this.lastValue)), |
||||||
|
Max2 = Math.ceil(Math.max(...this.yoy)); |
||||||
|
console.log("Min1", Min1); |
||||||
|
console.log("Min2", Min2); |
||||||
|
console.log("Max1", Max1); |
||||||
|
console.log("Max2", Max2); |
||||||
|
// 修改tooltip的数据单位，需求点击“查询”-请求成功后才改变 |
||||||
|
if (this.timeIndex2 == 0) { |
||||||
|
this.unitValue = "(kwr)"; |
||||||
|
} else if (this.timeIndex2 == 1) { |
||||||
|
this.unitValue = "(kwh)"; |
||||||
|
} else { |
||||||
|
this.unitValue = " "; |
||||||
|
} |
||||||
|
const adapterOption = { |
||||||
|
xAxis: { |
||||||
|
data: this.dateList, |
||||||
|
}, |
||||||
|
yAxis: [ |
||||||
|
//两个y轴 |
||||||
|
{ |
||||||
|
min: Min1, |
||||||
|
max: Max1, |
||||||
|
splitNumber: 10, |
||||||
|
interval: (Max1 - Min1) / 10, |
||||||
|
}, |
||||||
|
{ |
||||||
|
min: Min2, |
||||||
|
max: Max2, |
||||||
|
splitNumber: 10, |
||||||
|
interval: (Max2 - Min2) / 10, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "本期", |
||||||
|
data: this.curValue, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "上期", |
||||||
|
data: this.lastValue, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "同比", |
||||||
|
data: this.yoy, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance1.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance1.resize(); |
||||||
|
} else { |
||||||
|
console.log("后端返回的时间", this.dateList); |
||||||
|
console.log("后端返回的本期值", this.curValue2); |
||||||
|
console.log("后端返回的上期值", this.lastValue2); |
||||||
|
console.log("后端返回的同比值", this.yoy2); |
||||||
|
this.dateList = []; |
||||||
|
(this.curValue2 = []), (this.lastValue2 = []), (this.yoy2 = []); |
||||||
|
var Min1 = 0, |
||||||
|
Min2 = 0, |
||||||
|
Max1 = 0, |
||||||
|
Max2 = 0; |
||||||
|
const adapterOption = { |
||||||
|
xAxis: { |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
yAxis: [ |
||||||
|
//两个y轴 |
||||||
|
{ |
||||||
|
min: Min1, |
||||||
|
max: Max1, |
||||||
|
splitNumber: 10, |
||||||
|
interval: (Max1 - Min1) / 10, |
||||||
|
}, |
||||||
|
{ |
||||||
|
min: Min2, |
||||||
|
max: Max2, |
||||||
|
splitNumber: 10, |
||||||
|
interval: (Max2 - Min2) / 10, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "本期", |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "上期", |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "同比", |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance1.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance1.resize(); |
||||||
|
} |
||||||
|
}); |
||||||
|
// Just to simulate the time of the request |
||||||
|
setTimeout(() => { |
||||||
|
this.listLoading = false; |
||||||
|
}, 1.0 * 1000); |
||||||
|
}, |
||||||
|
initChart1() { |
||||||
|
// // 计算双y轴最大最小值， |
||||||
|
// var Min1 = 1; |
||||||
|
// var Min2 = 3; |
||||||
|
// var Max1 = 10; |
||||||
|
// var Max2 = 12; |
||||||
|
// console.log("Min1", Min1); |
||||||
|
// console.log("Min2", Min2); |
||||||
|
// console.log("Max1", Max1); |
||||||
|
// console.log("Max2", Max2); |
||||||
|
this.chartInstance1 = echarts.init(this.$refs.details_ref); |
||||||
|
this.option1 = { |
||||||
|
tooltip: { |
||||||
|
trigger: "axis", |
||||||
|
// 使用 formatter 设定 tooltip 内容格式 |
||||||
|
formatter: function (params) { |
||||||
|
let seriesHTML = ""; |
||||||
|
params.forEach(function (item) { |
||||||
|
seriesHTML += |
||||||
|
"<div>" + |
||||||
|
item.seriesName + |
||||||
|
': <span style="color: #000000; font-weight: bold;">' + |
||||||
|
item.value + |
||||||
|
"</span></div>"; |
||||||
|
}); |
||||||
|
return "<div>" + params[0].name + "</div>" + seriesHTML; |
||||||
|
}, |
||||||
|
// 自定义 tooltip 内容 |
||||||
|
formatter: function (params) { |
||||||
|
var res = params[0].name + "<br/>"; |
||||||
|
for (var i = 0, l = params.length; i < l; i++) { |
||||||
|
var seriesName = params[i].seriesName; |
||||||
|
var value = params[i].value; |
||||||
|
// console.log("打印颜色", params[i].color.colorStops[0].color) |
||||||
|
var marker = |
||||||
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + |
||||||
|
params[i].color.colorStops[0].color + |
||||||
|
'"></span>'; |
||||||
|
// 根据不同的seriesName 返回不同的单位 |
||||||
|
if (seriesName === "本期") { |
||||||
|
res += |
||||||
|
marker + |
||||||
|
seriesName + |
||||||
|
":" + |
||||||
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||||
|
value + |
||||||
|
" " + |
||||||
|
"kwr" + |
||||||
|
"</span><br>"; |
||||||
|
} else if (seriesName === "上期") { |
||||||
|
res += |
||||||
|
marker + |
||||||
|
seriesName + |
||||||
|
":" + |
||||||
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||||
|
value + |
||||||
|
" " + |
||||||
|
"kwh" + |
||||||
|
"</span><br>"; |
||||||
|
} else { |
||||||
|
res += |
||||||
|
marker + |
||||||
|
seriesName + |
||||||
|
":" + |
||||||
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
||||||
|
value + |
||||||
|
" " + |
||||||
|
"%" + |
||||||
|
"</span><br>"; |
||||||
|
} |
||||||
|
} |
||||||
|
return res; |
||||||
|
}, |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
data: ["本期", "上期", "同比"], |
||||||
|
textStyle: { |
||||||
|
color: "#ffff", |
||||||
|
fontSize: 16, //这里改字体大小 |
||||||
|
}, |
||||||
|
left: "41%", |
||||||
|
top: "0%", |
||||||
|
bottom: "10%", |
||||||
|
//图例距离饼图的距离 |
||||||
|
itemGap: 50, |
||||||
|
itemWidth: 16, |
||||||
|
itemHeight: 8, |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
top: "20%", |
||||||
|
left: "3%", |
||||||
|
right: "4%", |
||||||
|
bottom: "0%", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: "category", |
||||||
|
//设置为true代表离零刻度间隔一段距离 |
||||||
|
boundaryGap: true, |
||||||
|
// 修饰刻度标签的颜色即x坐标数据 |
||||||
|
axisLabel: { |
||||||
|
// interval: 0, //强制显示所有x轴数据 |
||||||
|
// rotate: 30, //x轴坐标字体倾斜30度 |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, // 不显示坐标轴刻度线 |
||||||
|
}, |
||||||
|
// x坐标轴的颜色 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#e2e6f0", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
yAxis: [ |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
name: "本期、上期", // 第一个 y 轴的单位描述 |
||||||
|
nameTextStyle: { |
||||||
|
fontSize: 15, // 调整字体大小 |
||||||
|
color: "#fff", // 调整字体颜色 |
||||||
|
// 其他样式属性... |
||||||
|
}, |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "#ffffff", |
||||||
|
}, |
||||||
|
// 显示y坐标轴 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", // 设置 y 轴线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#1a3d62", // 设置分割线的颜色 |
||||||
|
type: "dashed", // 设置分割线为虚线 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "#ffffff", |
||||||
|
formatter: "{value} %", |
||||||
|
// formatter: function (val) { |
||||||
|
// return val + "%"; |
||||||
|
// } |
||||||
|
}, |
||||||
|
// 不显示y轴侧边 |
||||||
|
axisLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
name: "同比", // 第二个 y 轴的单位描述 |
||||||
|
nameTextStyle: { |
||||||
|
fontSize: 15, // 调整字体大小 |
||||||
|
color: "#fff", // 调整字体颜色 |
||||||
|
// 其他样式属性... |
||||||
|
}, |
||||||
|
// 显示y坐标轴 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", // 设置 y 轴线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#1a3d62", // 设置分割线的颜色 |
||||||
|
type: "dashed", // 设置分割线为虚线 |
||||||
|
}, |
||||||
|
}, |
||||||
|
// min: Min2, |
||||||
|
// max: Max2, |
||||||
|
// splitNumber: 10, |
||||||
|
// interval: (Max2 - Min2) / 10, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "本期", |
||||||
|
type: "bar", |
||||||
|
smooth: true, |
||||||
|
symbol: "circle", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
|
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#0b75d3", |
||||||
|
// 使用颜色渐变 |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(1, 102, 251, 1)", // 起始颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(1, 102, 251, 0)", // 结束颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径 |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "上期", |
||||||
|
type: "bar", |
||||||
|
smooth: true, |
||||||
|
symbol: "circle", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#0b75d3", |
||||||
|
// 使用颜色渐变 |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(0, 224, 225, 1)", // 起始颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "rgba(0, 224, 225, 0)", // 结束颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
borderRadius: [5, 5, 0, 0], |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "同比", |
||||||
|
type: "line", |
||||||
|
smooth: false, |
||||||
|
symbol: "circle", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
yAxisIndex: 1, |
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#EE5217", //折线点的颜色 |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "#EE5217", // 起始颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 1, |
||||||
|
color: "#EE5217", // 结束颜色 |
||||||
|
}, |
||||||
|
], |
||||||
|
global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
lineStyle: { |
||||||
|
color: "#EE5217", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.chartInstance1.setOption(this.option1, true); |
||||||
|
}, |
||||||
|
// 折线图自适应 |
||||||
|
screenAdapter() { |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = (this.$refs.details_ref.offsetWidth / 100) * 1.8; |
||||||
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||||
|
const adapterOption = { |
||||||
|
//比如fontSize |
||||||
|
textStyle: { |
||||||
|
fontSize: titleFontSize, |
||||||
|
}, |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance1.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance1.resize(); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.condition-left { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
|
||||||
|
.years-div { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
|
||||||
|
.years-word { |
||||||
|
font-size: 14px; |
||||||
|
margin: 0 5px; |
||||||
|
color: #388ff3; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.time-label { |
||||||
|
font-size: 16px; |
||||||
|
line-height: 7px; |
||||||
|
margin-right: 12px; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
} |
||||||
|
.charts-title { |
||||||
|
font-size: 0.24rem; |
||||||
|
line-height: 0.07rem; |
||||||
|
letter-spacing: 0.02rem; |
||||||
|
color: #1f70e9; |
||||||
|
margin: 0.3rem 0; |
||||||
|
width: 100%; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.main-content { |
||||||
|
min-height: 6.6rem; |
||||||
|
} |
||||||
|
|
||||||
|
.analysis-table table thead th { |
||||||
|
min-width: 1.6rem; |
||||||
|
} |
||||||
|
|
||||||
|
.details_ref { |
||||||
|
width: 16.5rem; |
||||||
|
height: 3.55rem; |
||||||
|
margin-bottom: 0.39rem; |
||||||
|
margin-left: -0.3rem; |
||||||
|
} |
||||||
|
|
||||||
|
.condition-btn { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
overflow: hidden; |
||||||
|
cursor: pointer; |
||||||
|
border-radius: 4px; |
||||||
|
margin-right: 0.24rem; |
||||||
|
background-color: #324868; |
||||||
|
|
||||||
|
.legend-li { |
||||||
|
text-align: center; |
||||||
|
line-height: 100%; |
||||||
|
padding: 7px 13px; |
||||||
|
white-space: nowrap; |
||||||
|
font-size: 16px; |
||||||
|
color: #9eb5cf; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.timeStyle2 { |
||||||
|
color: #ffffff !important; |
||||||
|
background-color: #2886e3; |
||||||
|
border: 1px solid #2886e3; |
||||||
|
border-radius: 4px; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* |
||||||
|
媒体查询 |
||||||
|
*/ |
||||||
|
@media (max-width: 1210px) { |
||||||
|
} |
||||||
|
</style> |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,91 @@ |
|||||||
|
<template> |
||||||
|
<div class="paramsDetails"> |
||||||
|
<div class="details-content"> |
||||||
|
<div class="details-header"> |
||||||
|
<el-tabs v-model="activeName" @tab-click="handleClick" lazy> |
||||||
|
<el-tab-pane label="能耗分析" name="first"> |
||||||
|
<energy-analysis v-if="activeName === 'first'"></energy-analysis> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="环比分析" name="third"> |
||||||
|
<qnq-analysis v-if="activeName === 'third'"></qnq-analysis> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="同比分析" name="second"> |
||||||
|
<yny-analysis v-if="activeName === 'second'"></yny-analysis> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="同比环比分析" name="four"> |
||||||
|
<yny-qnq-analysis v-if="activeName === 'four'"></yny-qnq-analysis> |
||||||
|
</el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import energyAnalysis from "./components/energyAnalysis.vue"; |
||||||
|
import qnqAnalysis from "./components/qnqAnalysis.vue"; |
||||||
|
import ynyAnalysis from "./components/ynyAnalysis.vue"; |
||||||
|
import ynyQnqAnalysis from "./components/ynyQnqAnalysis.vue"; |
||||||
|
export default { |
||||||
|
components: { energyAnalysis, qnqAnalysis, ynyAnalysis, ynyQnqAnalysis }, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
activeName: "first", //能耗分析 |
||||||
|
}; |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleClick(tab, event) { |
||||||
|
console.log(tab, event); |
||||||
|
}, |
||||||
|
handleNodeClick(data) { |
||||||
|
console.log(data); |
||||||
|
}, |
||||||
|
// 记得请求冷水机组数据时，默认选中第一个冷水机组 |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.paramsDetails { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: stretch; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
.details-content { |
||||||
|
width: 100%; |
||||||
|
// height: 0.42rem; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
<style scoped> |
||||||
|
.none-div { |
||||||
|
padding-top: 0.31rem; |
||||||
|
} |
||||||
|
|
||||||
|
.none-div >>> .el-tree { |
||||||
|
background: transparent; |
||||||
|
color: #789d9f; |
||||||
|
} |
||||||
|
|
||||||
|
.none-div >>> .el-tree-node:focus > .el-tree-node__content { |
||||||
|
background-color: #00be97; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.none-div >>> .el-tree-node__content:hover, |
||||||
|
.none-div >>> .el-upload-list__item:hover { |
||||||
|
background-color: #00be97; |
||||||
|
color: #fff; |
||||||
|
} |
||||||
|
|
||||||
|
.none-div >>> .el-tree-node__content { |
||||||
|
height: 0.48rem; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.none-div >>> .el-tree-node__expand-icon.is-leaf { |
||||||
|
display: none !important; |
||||||
|
} |
||||||
|
</style> |
||||||
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue