65 changed files with 9374 additions and 343 deletions
@ -0,0 +1,9 @@ |
|||||||
|
import request from "@/utils/request"; |
||||||
|
// 历史天气查询
|
||||||
|
export function weatherTempData(query) { |
||||||
|
return request({ |
||||||
|
url: "/device/cs/getWeatherTemp", |
||||||
|
method: "get", |
||||||
|
params: query, |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
import request from "@/utils/request"; |
||||||
|
|
||||||
|
// 数据分析-月
|
||||||
|
export function queryMonthDatas(query) { |
||||||
|
return request({ |
||||||
|
url: "/hot_energy/analysis/queryMonth", |
||||||
|
method: "get", |
||||||
|
params: query, |
||||||
|
}); |
||||||
|
} |
||||||
|
// 数据分析-年
|
||||||
|
export function queryYearDatas(query) { |
||||||
|
return request({ |
||||||
|
url: "/hot_energy/analysis/queryYear", |
||||||
|
method: "get", |
||||||
|
params: query, |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1,34 @@ |
|||||||
|
import request from "@/utils/request"; |
||||||
|
|
||||||
|
// 楼层
|
||||||
|
export function hotBuildList(query) { |
||||||
|
return request({ |
||||||
|
url: "/space/building/hot_list", |
||||||
|
method: "get", |
||||||
|
params: query, |
||||||
|
}); |
||||||
|
} |
||||||
|
// 楼栋能耗环比
|
||||||
|
export function hotEnergySum(query) { |
||||||
|
return request({ |
||||||
|
url: "/hot_energy/energySum", |
||||||
|
method: "get", |
||||||
|
params: query, |
||||||
|
}); |
||||||
|
} |
||||||
|
// 温度变化表
|
||||||
|
export function hotWaterTemp(query) { |
||||||
|
return request({ |
||||||
|
url: "/hot_energy/waterTemp", |
||||||
|
method: "get", |
||||||
|
params: query, |
||||||
|
}); |
||||||
|
} |
||||||
|
// 温度变化表
|
||||||
|
export function hotWaterLevel(query) { |
||||||
|
return request({ |
||||||
|
url: "/hot_energy/waterLevel", |
||||||
|
method: "get", |
||||||
|
params: query, |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1,10 @@ |
|||||||
|
import request from "@/utils/request"; |
||||||
|
|
||||||
|
// 水电表读数
|
||||||
|
export function queryDeviceDatas(query) { |
||||||
|
return request({ |
||||||
|
url: "/hot_energy/queryDeviceDatas", |
||||||
|
method: "get", |
||||||
|
params: query, |
||||||
|
}); |
||||||
|
} |
||||||
@ -0,0 +1,18 @@ |
|||||||
|
import request from "@/utils/request"; |
||||||
|
|
||||||
|
// 设备状态
|
||||||
|
export function deviceState(query) { |
||||||
|
return request({ |
||||||
|
url: "/device/hotWater/deviceState", |
||||||
|
method: "get", |
||||||
|
params: query, |
||||||
|
}); |
||||||
|
} |
||||||
|
// 楼栋能耗
|
||||||
|
export function hotEnergyQuery(query) { |
||||||
|
return request({ |
||||||
|
url: "/hot_energy/query", |
||||||
|
method: "get", |
||||||
|
params: query, |
||||||
|
}); |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 3.7 KiB |
@ -0,0 +1,460 @@ |
|||||||
|
<template> |
||||||
|
<div class="sys_content"> |
||||||
|
<div class="charts" ref="chart_ref"></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import * as echarts from "echarts"; |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
subData: { |
||||||
|
type: Array, |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
chartInstance: null, |
||||||
|
option: {}, |
||||||
|
chartData1: "", |
||||||
|
chartData2: "", |
||||||
|
allData: "", |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
subData: { |
||||||
|
immediate: true, // 页面加载时立即触发一次监听 |
||||||
|
handler(newVal) { |
||||||
|
console.log("检测到传功来的数据", this.subData); |
||||||
|
if (Object.keys(newVal).length > 0) { |
||||||
|
console.log("newval", newVal); |
||||||
|
let data = newVal; |
||||||
|
this.chartData1 = ""; |
||||||
|
this.chartData2 = ""; |
||||||
|
data.forEach((item) => { |
||||||
|
if (item.name.includes("运行")) { |
||||||
|
this.chartData1 = parseInt(item.value); |
||||||
|
} |
||||||
|
if (item.name.includes("停止")) { |
||||||
|
this.chartData2 = parseInt(item.value); |
||||||
|
} |
||||||
|
// 计算总和 |
||||||
|
this.allData = this.chartData1 + this.chartData2; |
||||||
|
}); |
||||||
|
this.$nextTick(() => { |
||||||
|
// // 销毁现有的 ECharts 实例 |
||||||
|
// if (this.chartInstance) { |
||||||
|
// this.chartInstance.dispose(); |
||||||
|
// } |
||||||
|
// // 重新初始化图表 |
||||||
|
// this.initChart(); |
||||||
|
this.echartsData(); |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initChart(); |
||||||
|
window.addEventListener("resize", this.screenAdapter); |
||||||
|
this.screenAdapter(); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//取消监听器 |
||||||
|
window.removeEventListener("resize", this.screenAdapter); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||||
|
screenAdapter() { |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; |
||||||
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||||
|
const adapterOption = {}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance.resize(); |
||||||
|
}, |
||||||
|
echartsData() { |
||||||
|
console.log("父组件传过来的值", this.subData); |
||||||
|
if (this.subData) { |
||||||
|
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
||||||
|
const colorList = ["#0882ff", "#ffe21e"]; // 提取颜色列表 |
||||||
|
const adapterOption = { |
||||||
|
//环形图中间文字 |
||||||
|
title: { |
||||||
|
subtextStyle: { |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
}, |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: "item", |
||||||
|
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
itemWidth: titleFontSize, |
||||||
|
itemHeight: titleFontSize, |
||||||
|
itemGap: titleFontSize * 2, |
||||||
|
formatter: function (name) { |
||||||
|
var arr = []; |
||||||
|
let data = adapterOption.series[0].data; |
||||||
|
var index = 0; |
||||||
|
var total = 0; |
||||||
|
// 计算总和 |
||||||
|
for (var i = 0; i < data.length; i++) { |
||||||
|
total += data[i].value; |
||||||
|
if (data[i].name == name) { |
||||||
|
index = i; |
||||||
|
} |
||||||
|
} |
||||||
|
// 检查当前项的值是否为 0 |
||||||
|
var percentage = |
||||||
|
data[index].value === 0 |
||||||
|
? "0.00" |
||||||
|
: ((data[index].value / total) * 100).toFixed(2); |
||||||
|
arr.push( |
||||||
|
"{name|" + name + "}", |
||||||
|
"{text|" + " " + ":" + " " + "}", |
||||||
|
"{value|" + data[index].value + " " + "}", |
||||||
|
"{percentage|" + " " + percentage + "%}" |
||||||
|
); |
||||||
|
return arr.join(""); |
||||||
|
}, |
||||||
|
textStyle: { |
||||||
|
color: function (name) { |
||||||
|
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
||||||
|
const index = dataSeries.findIndex( |
||||||
|
(item) => item.name === name |
||||||
|
); |
||||||
|
const colorList = ["#0882ff", "#ffe21e"]; // 数据圆的颜色列表 |
||||||
|
return colorList[index]; |
||||||
|
}, |
||||||
|
rich: { |
||||||
|
name: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
}, |
||||||
|
text: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
}, |
||||||
|
value: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
// color: function (params) { |
||||||
|
// let data = adapterOption.series[1].data; |
||||||
|
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||||
|
// }, |
||||||
|
}, |
||||||
|
percentage: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
// color: function (params) { |
||||||
|
// let data = adapterOption.series[1].data; |
||||||
|
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||||
|
// }, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "风柜系统:", |
||||||
|
data: [ |
||||||
|
{ value: this.chartData1, name: "运行数" }, |
||||||
|
{ value: this.chartData2, name: "停止数" }, |
||||||
|
], |
||||||
|
itemStyle: { |
||||||
|
color: function (params) { |
||||||
|
var colorList = ["#0882ff", "#ffe21e"]; |
||||||
|
return colorList[params.dataIndex]; |
||||||
|
}, |
||||||
|
// borderWidth: 5, |
||||||
|
borderColor: "#002a56", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
data: [ |
||||||
|
{ value: this.chartData1, name: "运行数" }, |
||||||
|
{ value: this.chartData2, name: "停止数" }, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
this.chartInstance.setOption(adapterOption); |
||||||
|
this.chartInstance.resize(); |
||||||
|
} else { |
||||||
|
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
||||||
|
const adapterOption = { |
||||||
|
//环形图中间文字 |
||||||
|
title: { |
||||||
|
subtextStyle: { |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
}, |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: "item", |
||||||
|
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
itemWidth: titleFontSize, |
||||||
|
itemHeight: titleFontSize, |
||||||
|
itemGap: titleFontSize * 2, |
||||||
|
formatter: function (name) { |
||||||
|
var arr = []; |
||||||
|
let data = adapterOption.series[0].data; |
||||||
|
var index = 0; |
||||||
|
var total = 0; |
||||||
|
// 计算总和 |
||||||
|
for (var i = 0; i < data.length; i++) { |
||||||
|
total += data[i].value; |
||||||
|
if (data[i].name == name) { |
||||||
|
index = i; |
||||||
|
} |
||||||
|
} |
||||||
|
// 检查当前项的值是否为 0 |
||||||
|
var percentage = |
||||||
|
data[index].value === 0 |
||||||
|
? "0.00" |
||||||
|
: ((data[index].value / total) * 100).toFixed(2); |
||||||
|
arr.push( |
||||||
|
"{name|" + name + "}", |
||||||
|
"{text|" + " " + ":" + " " + "}", |
||||||
|
"{value|" + data[index].value + " " + "}", |
||||||
|
"{percentage|" + " " + percentage + "%}" |
||||||
|
); |
||||||
|
return arr.join(""); |
||||||
|
}, |
||||||
|
textStyle: { |
||||||
|
color: function (name) { |
||||||
|
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
||||||
|
const index = dataSeries.findIndex( |
||||||
|
(item) => item.name === name |
||||||
|
); |
||||||
|
const colorList = ["#0882ff", "#ffe21e"]; // 数据圆的颜色列表 |
||||||
|
return colorList[index]; |
||||||
|
}, |
||||||
|
rich: { |
||||||
|
name: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 1.6, |
||||||
|
}, |
||||||
|
text: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 1.6, |
||||||
|
}, |
||||||
|
value: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 1.6, |
||||||
|
// color: function (params) { |
||||||
|
// let data = adapterOption.series[1].data; |
||||||
|
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||||
|
// }, |
||||||
|
}, |
||||||
|
percentage: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 1.6, |
||||||
|
// color: function (params) { |
||||||
|
// let data = adapterOption.series[1].data; |
||||||
|
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||||
|
// }, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "风柜系统:", |
||||||
|
data: [ |
||||||
|
{ value: 0, name: "运行数" }, |
||||||
|
{ value: 0, name: "停止数" }, |
||||||
|
], |
||||||
|
itemStyle: { |
||||||
|
color: function (params) { |
||||||
|
var colorList = ["#0882ff", "#ffe21e"]; |
||||||
|
return colorList[params.dataIndex]; |
||||||
|
}, |
||||||
|
// borderWidth: 5, |
||||||
|
borderColor: "#002a56", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
data: [ |
||||||
|
{ value: 0, name: "运行数" }, |
||||||
|
{ value: 0, name: "停止数" }, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
this.chartInstance.setOption(adapterOption); |
||||||
|
this.chartInstance.resize(); |
||||||
|
} |
||||||
|
}, |
||||||
|
//初始化chartInstance对象 |
||||||
|
initChart() { |
||||||
|
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||||
|
this.option = { |
||||||
|
//环形图中间文字 |
||||||
|
title: { |
||||||
|
subtext: "运行状态", |
||||||
|
textStyle: { |
||||||
|
color: "#ffffff", |
||||||
|
}, |
||||||
|
subtextStyle: { |
||||||
|
color: "#ffffff", |
||||||
|
}, |
||||||
|
textAlign: "center", |
||||||
|
x: "49%", |
||||||
|
y: "36%", //距离上边的距离 |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: "item", |
||||||
|
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||||
|
}, |
||||||
|
//图例 |
||||||
|
legend: { |
||||||
|
orient: "horizontal", // 水平布局 |
||||||
|
bottom: 0, // 位于最底部 |
||||||
|
left: "center", // 水平居中 |
||||||
|
//图例文字颜色 |
||||||
|
textStyle: { |
||||||
|
color: "#ffffff", |
||||||
|
// fontSize: 18, |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
// 数据圆 |
||||||
|
{ |
||||||
|
name: "风柜系统:", |
||||||
|
type: "pie", |
||||||
|
radius: ["60%", "72%"], |
||||||
|
center: ["50%", "44%"], |
||||||
|
avoidLabelOverlap: false, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
position: "center", |
||||||
|
}, |
||||||
|
labelLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
itemStyle: { |
||||||
|
color: function (params) { |
||||||
|
var colorList = ["#0882ff", "#ffe21e"]; |
||||||
|
return colorList[params.dataIndex]; |
||||||
|
}, |
||||||
|
borderWidth: 5, |
||||||
|
borderColor: "#002a56", |
||||||
|
}, |
||||||
|
z: 10, //设置层级更高,否则会被阴影圆遮住 |
||||||
|
}, |
||||||
|
// 阴影圆 |
||||||
|
{ |
||||||
|
type: "pie", |
||||||
|
radius: ["50%", "62%"], |
||||||
|
center: ["50%", "44%"], |
||||||
|
avoidLabelOverlap: false, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
position: "center", |
||||||
|
}, |
||||||
|
silent: true, |
||||||
|
labelLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
//颜色 |
||||||
|
itemStyle: { |
||||||
|
color: function (colors) { |
||||||
|
var colorList = ["#02427f", "#385f5c"]; |
||||||
|
return colorList[colors.dataIndex]; |
||||||
|
}, |
||||||
|
}, |
||||||
|
z: 15, |
||||||
|
}, |
||||||
|
// 内圈边框 |
||||||
|
{ |
||||||
|
// 颜色 |
||||||
|
color: ["#305376"], |
||||||
|
type: "pie", |
||||||
|
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||||
|
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||||
|
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||||
|
// 这里开启silent: true, 就达到效果了 |
||||||
|
// center与非内圈一致 |
||||||
|
radius: ["38%", "39%"], |
||||||
|
center: ["50%", "44%"], |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
value: 0, |
||||||
|
name: "", |
||||||
|
itemStyle: {}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
// 最里面渐变小圆 |
||||||
|
{ |
||||||
|
// 颜色 |
||||||
|
type: "pie", |
||||||
|
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||||
|
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||||
|
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||||
|
// 这里开启silent: true, 就达到效果了 |
||||||
|
// center与非内圈一致 |
||||||
|
radius: ["0%", "38%"], |
||||||
|
center: ["50%", "44%"], |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
value: 0, |
||||||
|
name: "", |
||||||
|
itemStyle: {}, |
||||||
|
}, |
||||||
|
], |
||||||
|
itemStyle: { |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 1, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ offset: 0, color: "#002a55" }, // 0% 处的颜色 |
||||||
|
{ offset: 1, color: "#0a457a" }, // 100% 处的颜色 |
||||||
|
], |
||||||
|
global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.chartInstance.setOption(this.option, true); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.sys_content { |
||||||
|
padding: 20px; |
||||||
|
.charts { |
||||||
|
width: 100%; |
||||||
|
height: 250px; |
||||||
|
} |
||||||
|
} |
||||||
|
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||||
|
@media (min-width: 2000px) { |
||||||
|
.sys_content { |
||||||
|
padding: 0.2rem !important; |
||||||
|
.charts { |
||||||
|
width: 100%; |
||||||
|
height: 2.5rem !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,142 @@ |
|||||||
|
<template> |
||||||
|
<div class="card-div"> |
||||||
|
<div class="card-li room-temp"> |
||||||
|
<div class="card-header"> |
||||||
|
<h2 class="card-title">回水平均温度</h2> |
||||||
|
<div class="icon"> |
||||||
|
<i class="fas fa-home"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="thermometer"> |
||||||
|
<div class="temprogress" :style="{ height: temData1 * 2 + '%' }"></div> |
||||||
|
</div> |
||||||
|
<div class="temperature">{{temData1}}℃</div> |
||||||
|
</div> |
||||||
|
<div class="card-li amb-temp"> |
||||||
|
<div class="card-header"> |
||||||
|
<h2 class="card-title">供水平均温度</h2> |
||||||
|
<div class="icon"> |
||||||
|
<i class="fas fa-home"></i> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="thermometer"> |
||||||
|
<div class="temprogress" :style="{ height: temData2 * 2 + '%' }"></div> |
||||||
|
</div> |
||||||
|
<div class="temperature">{{temData2}}℃</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
subData: { |
||||||
|
type: Array, |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
temData1: "", |
||||||
|
temData2: "", |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
subData: { |
||||||
|
immediate: true, // 页面加载时立即触发一次监听 |
||||||
|
handler(newVal) { |
||||||
|
console.log("检测到传功来的数据", this.subData); |
||||||
|
if (Object.keys(newVal).length > 0) { |
||||||
|
console.log("newval", newVal); |
||||||
|
let data = newVal; |
||||||
|
this.temData1 = ""; |
||||||
|
this.temData2 = ""; |
||||||
|
data.forEach((item) => { |
||||||
|
if (item.name.includes("回水")) { |
||||||
|
this.temData1 = parseInt(item.value); |
||||||
|
} |
||||||
|
if (item.name.includes("供水")) { |
||||||
|
this.temData2 = parseInt(item.value); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.card-div { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
.card-li { |
||||||
|
width: 50%; |
||||||
|
padding: 0.2rem 0; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
.card-header { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
margin-bottom: 0.1rem; |
||||||
|
.card-title { |
||||||
|
font-size: 15px; |
||||||
|
font-weight: 600; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
} |
||||||
|
.temperature { |
||||||
|
font-size: 20px; |
||||||
|
font-weight: 700; |
||||||
|
position: relative; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
.thermometer { |
||||||
|
height: 180px; |
||||||
|
width: 40px; |
||||||
|
background: #3d5581; |
||||||
|
border-radius: 20px; |
||||||
|
margin: 0 auto 0.25rem; |
||||||
|
overflow: hidden; |
||||||
|
box-shadow: inset 0 0 1rem rgba(0, 0, 0, 0.1); |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.temprogress { |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
width: 100%; |
||||||
|
border-top-left-radius: 20px; |
||||||
|
border-top-right-radius:20px; |
||||||
|
background: linear-gradient(to top, #3498db, #2ecc71) !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
@media (min-width: 2000px) { |
||||||
|
.card-div { |
||||||
|
.card-li { |
||||||
|
.card-header { |
||||||
|
.card-title { |
||||||
|
font-size: 0.15rem !important; |
||||||
|
} |
||||||
|
} |
||||||
|
.temperature { |
||||||
|
font-size: 0.2rem !important; |
||||||
|
} |
||||||
|
.thermometer { |
||||||
|
height: 1.8rem !important; |
||||||
|
width: 0.4rem !important; |
||||||
|
border-radius: 0.2rem !important; |
||||||
|
} |
||||||
|
.temprogress { |
||||||
|
border-top-left-radius: 0.2rem !important; |
||||||
|
border-top-right-radius:0.2rem !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,460 @@ |
|||||||
|
<template> |
||||||
|
<div class="sys_content"> |
||||||
|
<div class="charts" ref="chart_ref"></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import * as echarts from "echarts"; |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
subData: { |
||||||
|
type: Array, |
||||||
|
required: true, |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
chartInstance: null, |
||||||
|
option: {}, |
||||||
|
chartData1: "", |
||||||
|
chartData2: "", |
||||||
|
allData: "", |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
subData: { |
||||||
|
immediate: true, // 页面加载时立即触发一次监听 |
||||||
|
handler(newVal) { |
||||||
|
console.log("检测到传功来的数据", this.subData); |
||||||
|
if (Object.keys(newVal).length > 0) { |
||||||
|
console.log("newval", newVal); |
||||||
|
let data = newVal; |
||||||
|
this.chartData1 = ""; |
||||||
|
this.chartData2 = ""; |
||||||
|
data.forEach((item) => { |
||||||
|
if (item.name.includes("在线")) { |
||||||
|
this.chartData1 = parseInt(item.value); |
||||||
|
} |
||||||
|
if (item.name.includes("离线")) { |
||||||
|
this.chartData2 = parseInt(item.value); |
||||||
|
} |
||||||
|
// 计算总和 |
||||||
|
this.allData = this.chartData1 + this.chartData2; |
||||||
|
}); |
||||||
|
this.$nextTick(() => { |
||||||
|
// // 销毁现有的 ECharts 实例 |
||||||
|
// if (this.chartInstance) { |
||||||
|
// this.chartInstance.dispose(); |
||||||
|
// } |
||||||
|
// // 重新初始化图表 |
||||||
|
// this.initChart(); |
||||||
|
this.echartsData(); |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initChart(); |
||||||
|
window.addEventListener("resize", this.screenAdapter); |
||||||
|
this.screenAdapter(); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//取消监听器 |
||||||
|
window.removeEventListener("resize", this.screenAdapter); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||||
|
screenAdapter() { |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; |
||||||
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||||
|
const adapterOption = {}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance.resize(); |
||||||
|
}, |
||||||
|
echartsData() { |
||||||
|
console.log("父组件传过来的值", this.subData); |
||||||
|
if (this.subData) { |
||||||
|
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
||||||
|
const colorList = ["#ffe21e", "#08c8ff"]; // 提取颜色列表 |
||||||
|
const adapterOption = { |
||||||
|
//环形图中间文字 |
||||||
|
title: { |
||||||
|
subtextStyle: { |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
}, |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: "item", |
||||||
|
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
itemWidth: titleFontSize, |
||||||
|
itemHeight: titleFontSize, |
||||||
|
itemGap: titleFontSize * 2, |
||||||
|
formatter: function (name) { |
||||||
|
var arr = []; |
||||||
|
let data = adapterOption.series[0].data; |
||||||
|
var index = 0; |
||||||
|
var total = 0; |
||||||
|
// 计算总和 |
||||||
|
for (var i = 0; i < data.length; i++) { |
||||||
|
total += data[i].value; |
||||||
|
if (data[i].name == name) { |
||||||
|
index = i; |
||||||
|
} |
||||||
|
} |
||||||
|
// 检查当前项的值是否为 0 |
||||||
|
var percentage = |
||||||
|
data[index].value === 0 |
||||||
|
? "0.00" |
||||||
|
: ((data[index].value / total) * 100).toFixed(2); |
||||||
|
arr.push( |
||||||
|
"{name|" + name + "}", |
||||||
|
"{text|" + " " + ":" + " " + "}", |
||||||
|
"{value|" + data[index].value + " " + "}", |
||||||
|
"{percentage|" + " " + percentage + "%}" |
||||||
|
); |
||||||
|
return arr.join(""); |
||||||
|
}, |
||||||
|
textStyle: { |
||||||
|
color: function (name) { |
||||||
|
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
||||||
|
const index = dataSeries.findIndex( |
||||||
|
(item) => item.name === name |
||||||
|
); |
||||||
|
const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表 |
||||||
|
return colorList[index]; |
||||||
|
}, |
||||||
|
rich: { |
||||||
|
name: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
}, |
||||||
|
text: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
}, |
||||||
|
value: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
// color: function (params) { |
||||||
|
// let data = adapterOption.series[1].data; |
||||||
|
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||||
|
// }, |
||||||
|
}, |
||||||
|
percentage: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
// color: function (params) { |
||||||
|
// let data = adapterOption.series[1].data; |
||||||
|
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||||
|
// }, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "温度监测:", |
||||||
|
data: [ |
||||||
|
{ value: this.chartData1, name: "在线数" }, |
||||||
|
{ value: this.chartData2, name: "离线数" }, |
||||||
|
], |
||||||
|
itemStyle: { |
||||||
|
color: function (params) { |
||||||
|
var colorList = ["#2df499", "#08c8ff"]; |
||||||
|
return colorList[params.dataIndex]; |
||||||
|
}, |
||||||
|
// borderWidth: 5, |
||||||
|
borderColor: "#002a56", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
data: [ |
||||||
|
{ value: this.chartData1, name: "在线数" }, |
||||||
|
{ value: this.chartData2, name: "离线数" }, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
this.chartInstance.setOption(adapterOption); |
||||||
|
this.chartInstance.resize(); |
||||||
|
} else { |
||||||
|
const titleFontSize = (this.$refs.chart_ref.offsetWidth / 100) * 2; |
||||||
|
const adapterOption = { |
||||||
|
//环形图中间文字 |
||||||
|
title: { |
||||||
|
subtextStyle: { |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
}, |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: "item", |
||||||
|
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
itemWidth: titleFontSize, |
||||||
|
itemHeight: titleFontSize, |
||||||
|
itemGap: titleFontSize * 2, |
||||||
|
formatter: function (name) { |
||||||
|
var arr = []; |
||||||
|
let data = adapterOption.series[0].data; |
||||||
|
var index = 0; |
||||||
|
var total = 0; |
||||||
|
// 计算总和 |
||||||
|
for (var i = 0; i < data.length; i++) { |
||||||
|
total += data[i].value; |
||||||
|
if (data[i].name == name) { |
||||||
|
index = i; |
||||||
|
} |
||||||
|
} |
||||||
|
// 检查当前项的值是否为 0 |
||||||
|
var percentage = |
||||||
|
data[index].value === 0 |
||||||
|
? "0.00" |
||||||
|
: ((data[index].value / total) * 100).toFixed(2); |
||||||
|
arr.push( |
||||||
|
"{name|" + name + "}", |
||||||
|
"{text|" + " " + ":" + " " + "}", |
||||||
|
"{value|" + data[index].value + " " + "}", |
||||||
|
"{percentage|" + " " + percentage + "%}" |
||||||
|
); |
||||||
|
return arr.join(""); |
||||||
|
}, |
||||||
|
textStyle: { |
||||||
|
color: function (name) { |
||||||
|
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
||||||
|
const index = dataSeries.findIndex( |
||||||
|
(item) => item.name === name |
||||||
|
); |
||||||
|
const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表 |
||||||
|
return colorList[index]; |
||||||
|
}, |
||||||
|
rich: { |
||||||
|
name: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 1.6, |
||||||
|
}, |
||||||
|
text: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 1.6, |
||||||
|
}, |
||||||
|
value: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 1.6, |
||||||
|
// color: function (params) { |
||||||
|
// let data = adapterOption.series[1].data; |
||||||
|
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||||
|
// }, |
||||||
|
}, |
||||||
|
percentage: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 1.6, |
||||||
|
// color: function (params) { |
||||||
|
// let data = adapterOption.series[1].data; |
||||||
|
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||||
|
// }, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "温度监测:", |
||||||
|
data: [ |
||||||
|
{ value: 0, name: "在线数" }, |
||||||
|
{ value: 0, name: "离线数" }, |
||||||
|
], |
||||||
|
itemStyle: { |
||||||
|
color: function (params) { |
||||||
|
var colorList = ["#2df499", "#08c8ff"]; |
||||||
|
return colorList[params.dataIndex]; |
||||||
|
}, |
||||||
|
// borderWidth: 5, |
||||||
|
borderColor: "#002a56", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
data: [ |
||||||
|
{ value: 0, name: "在线数" }, |
||||||
|
{ value: 0, name: "离线数" }, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
this.chartInstance.setOption(adapterOption); |
||||||
|
this.chartInstance.resize(); |
||||||
|
} |
||||||
|
}, |
||||||
|
//初始化chartInstance对象 |
||||||
|
initChart() { |
||||||
|
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||||
|
this.option = { |
||||||
|
//环形图中间文字 |
||||||
|
title: { |
||||||
|
subtext: "在线状态", |
||||||
|
textStyle: { |
||||||
|
color: "#ffffff", |
||||||
|
}, |
||||||
|
subtextStyle: { |
||||||
|
color: "#ffffff", |
||||||
|
}, |
||||||
|
textAlign: "center", |
||||||
|
x: "49%", |
||||||
|
y: "36%", //距离上边的距离 |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: "item", |
||||||
|
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||||
|
}, |
||||||
|
//图例 |
||||||
|
legend: { |
||||||
|
orient: "horizontal", // 水平布局 |
||||||
|
bottom: 0, // 位于最底部 |
||||||
|
left: "center", // 水平居中 |
||||||
|
//图例文字颜色 |
||||||
|
textStyle: { |
||||||
|
color: "#ffffff", |
||||||
|
// fontSize: 18, |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
// 数据圆 |
||||||
|
{ |
||||||
|
name: "温度监测:", |
||||||
|
type: "pie", |
||||||
|
radius: ["60%", "72%"], |
||||||
|
center: ["50%", "44%"], |
||||||
|
avoidLabelOverlap: false, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
position: "center", |
||||||
|
}, |
||||||
|
labelLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
itemStyle: { |
||||||
|
color: function (params) { |
||||||
|
var colorList = ["#2df499", "#08c8ff"]; |
||||||
|
return colorList[params.dataIndex]; |
||||||
|
}, |
||||||
|
borderWidth: 5, |
||||||
|
borderColor: "#002a56", |
||||||
|
}, |
||||||
|
z: 10, //设置层级更高,否则会被阴影圆遮住 |
||||||
|
}, |
||||||
|
// 阴影圆 |
||||||
|
{ |
||||||
|
type: "pie", |
||||||
|
radius: ["50%", "62%"], |
||||||
|
center: ["50%", "44%"], |
||||||
|
avoidLabelOverlap: false, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
position: "center", |
||||||
|
}, |
||||||
|
silent: true, |
||||||
|
labelLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
//颜色 |
||||||
|
itemStyle: { |
||||||
|
color: function (colors) { |
||||||
|
var colorList = ["#09596b", "#024e7d"]; |
||||||
|
return colorList[colors.dataIndex]; |
||||||
|
}, |
||||||
|
}, |
||||||
|
z: 15, |
||||||
|
}, |
||||||
|
// 内圈边框 |
||||||
|
{ |
||||||
|
// 颜色 |
||||||
|
color: ["#305376"], |
||||||
|
type: "pie", |
||||||
|
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||||
|
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||||
|
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||||
|
// 这里开启silent: true, 就达到效果了 |
||||||
|
// center与非内圈一致 |
||||||
|
radius: ["38%", "39%"], |
||||||
|
center: ["50%", "44%"], |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
value: 0, |
||||||
|
name: "", |
||||||
|
itemStyle: {}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
// 最里面渐变小圆 |
||||||
|
{ |
||||||
|
// 颜色 |
||||||
|
type: "pie", |
||||||
|
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||||
|
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||||
|
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||||
|
// 这里开启silent: true, 就达到效果了 |
||||||
|
// center与非内圈一致 |
||||||
|
radius: ["0%", "38%"], |
||||||
|
center: ["50%", "44%"], |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
value: 0, |
||||||
|
name: "", |
||||||
|
itemStyle: {}, |
||||||
|
}, |
||||||
|
], |
||||||
|
itemStyle: { |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 1, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ offset: 0, color: "#002a55" }, // 0% 处的颜色 |
||||||
|
{ offset: 1, color: "#0a457a" }, // 100% 处的颜色 |
||||||
|
], |
||||||
|
global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.chartInstance.setOption(this.option, true); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.sys_content { |
||||||
|
padding: 20px; |
||||||
|
.charts { |
||||||
|
width: 100%; |
||||||
|
height: 250px; |
||||||
|
} |
||||||
|
} |
||||||
|
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||||
|
@media (min-width: 2000px) { |
||||||
|
.sys_content { |
||||||
|
padding: 0.2rem !important; |
||||||
|
.charts { |
||||||
|
width: 100%; |
||||||
|
height: 2.5rem !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,746 @@ |
|||||||
|
<!-- 报表查询-用能查询-年数据 --> |
||||||
|
<template> |
||||||
|
<div class="analy-table"> |
||||||
|
<div class="findwatercharts" ref="findwater_ref"></div> |
||||||
|
<!-- 表格 --> |
||||||
|
<el-table |
||||||
|
class="maintable" |
||||||
|
header-align="center" |
||||||
|
:data="tableData" |
||||||
|
style="margin-right: 0.13rem" |
||||||
|
:cell-style="tableRowStyle" |
||||||
|
> |
||||||
|
<el-table-column prop="itemType" label="类别" width="160" fixed="left"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day01" label="1日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day02" label="2日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day03" label="3日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day04" label="4日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day05" label="5日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day06" label="6日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day07" label="7日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day08" label="8日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day09" label="9日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day10" label="10日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day11" label="11日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day12" label="12日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day13" label="13日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day14" label="14日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day15" label="15日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day16" label="16日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day17" label="17日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day18" label="18日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day19" label="19日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day20" label="20日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day21" label="21日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day22" label="22日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day23" label="23日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day24" label="24日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day25" label="25日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day26" label="26日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day27" label="27日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day28" label="28日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day29" label="29日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day30" label="30日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="day31" label="31日" width="100"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="totalValue" |
||||||
|
label="合计" |
||||||
|
fixed="right" |
||||||
|
width="130" |
||||||
|
> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { getDay, getMonth, getYear } from "@/utils/datetime"; |
||||||
|
import { queryMonthDatas } from "@/api/hotWater/dataAnalysis"; |
||||||
|
import * as echarts from "echarts"; |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
chType: { |
||||||
|
type: Number, |
||||||
|
}, |
||||||
|
chTime: { |
||||||
|
type: String, |
||||||
|
}, |
||||||
|
chBuild: { |
||||||
|
type: String, |
||||||
|
}, |
||||||
|
currentIndex: { |
||||||
|
type: Number, |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
chartInstance1: null, |
||||||
|
option1: { |
||||||
|
series: [], |
||||||
|
}, |
||||||
|
// 给后端日期 |
||||||
|
endTime: "", |
||||||
|
//表格数据 |
||||||
|
tableData: [], |
||||||
|
// 四条折线图 |
||||||
|
data1: [], |
||||||
|
data2: [], |
||||||
|
data3: [], |
||||||
|
data4: [], |
||||||
|
data5: [], |
||||||
|
// 图例 |
||||||
|
data6: [], |
||||||
|
// x轴数据 |
||||||
|
data8: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
currentIndex: { |
||||||
|
immediate: true, |
||||||
|
deep: true, |
||||||
|
handler(newVal, val) { |
||||||
|
// console.log("子组件改变的值", newVal); |
||||||
|
this.$nextTick(function () { |
||||||
|
console.log("子组件接受的type类型", this.chType); |
||||||
|
console.log("子组件这时候有building吗", this.chBuild); |
||||||
|
this.getMothData(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
// this.getMothData(); |
||||||
|
this.initChart1(); |
||||||
|
window.addEventListener("resize", this.screenAdapter); |
||||||
|
this.screenAdapter(); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||||
|
window.removeEventListener("resize", this.screenAdapter); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||||
|
// 如果第1列，修改颜色 |
||||||
|
if (columnIndex === 0) { |
||||||
|
return "background-color:rgb(11 ,100, 201) !important;"; |
||||||
|
} |
||||||
|
}, |
||||||
|
// 查询表格数据 |
||||||
|
getMothData() { |
||||||
|
// 本月 本年参数 |
||||||
|
// 选择时间的参数 父传子 |
||||||
|
// 楼栋id 兄弟组件传值 |
||||||
|
// select选择的值 父传子 |
||||||
|
if (this.chTime) { |
||||||
|
this.endTime = this.chTime; |
||||||
|
} else { |
||||||
|
this.endTime = getMonth(0); |
||||||
|
} |
||||||
|
let params = { |
||||||
|
curDate: this.endTime, |
||||||
|
buildingId: this.chBuild, |
||||||
|
type: this.chType, |
||||||
|
}; |
||||||
|
console.log("月参数", params); |
||||||
|
queryMonthDatas(params).then((res) => { |
||||||
|
// console.log("月表格返回", res); |
||||||
|
if (res.code == 200 && res.rows.length > 0) { |
||||||
|
var line1 = []; |
||||||
|
var line2 = []; |
||||||
|
var line3 = []; |
||||||
|
var line4 = []; |
||||||
|
this.tableData = res.rows; |
||||||
|
// Object.values 把数组对象 转化为 数组 |
||||||
|
line1 = Object.values(this.tableData[0]).slice(3, 35); |
||||||
|
line2 = Object.values(this.tableData[1]).slice(3, 35); |
||||||
|
line3 = Object.values(this.tableData[2]).slice(3, 35); |
||||||
|
line4 = Object.values(this.tableData[3]).slice(3, 35); |
||||||
|
// 四条折线图 filter里过滤掉空值 |
||||||
|
this.data1 = line1.filter(function (s) { |
||||||
|
return s && s.trim(); |
||||||
|
}); |
||||||
|
this.data2 = line2.filter(function (s) { |
||||||
|
return s && s.trim(); |
||||||
|
}); |
||||||
|
// 含百分比的数组数据还需要处理 |
||||||
|
var line5 = line3.filter(function (s) { |
||||||
|
return s && s.trim(); |
||||||
|
}); |
||||||
|
this.data3 = []; |
||||||
|
this.data4 = []; |
||||||
|
// 遍历去除掉%，拼接后返回新数组 |
||||||
|
line5.forEach((item) => { |
||||||
|
this.data3.push(item.split("%").join("")); |
||||||
|
}); |
||||||
|
var line6 = line4.filter(function (s) { |
||||||
|
return s && s.trim(); |
||||||
|
}); |
||||||
|
line6.forEach((item) => { |
||||||
|
this.data4.push(item.split("%").join("")); |
||||||
|
}); |
||||||
|
// 折线图x轴 数据 |
||||||
|
// 先拿到数组的一个对象 tableData[0] [1] [2] [3]都行,并且先过滤掉对象的空值 |
||||||
|
//定义一个新数组 |
||||||
|
let newObj = {}; |
||||||
|
for (let key in this.tableData[0]) { |
||||||
|
if (this.tableData[0][key]) { |
||||||
|
newObj[key] = this.tableData[0][key]; |
||||||
|
} |
||||||
|
} |
||||||
|
// console.log("不含空的数组对象", newObj); |
||||||
|
// 在返回的新的对象中，取出对象的所有key值返回新数组 |
||||||
|
// Object.setPrototypeOf(this.newObj); |
||||||
|
let data7 = Object.keys(newObj); |
||||||
|
// console.log("不含空的x轴数据", data7); |
||||||
|
// 先返回月的数组 |
||||||
|
let allArr = [ |
||||||
|
"day01", |
||||||
|
"day02", |
||||||
|
"day03", |
||||||
|
"day04", |
||||||
|
"day05", |
||||||
|
"day06", |
||||||
|
"day07", |
||||||
|
"day08", |
||||||
|
"day09", |
||||||
|
"day10", |
||||||
|
"day11", |
||||||
|
"day12", |
||||||
|
"day13", |
||||||
|
"day14", |
||||||
|
"day15", |
||||||
|
"day16", |
||||||
|
"day17", |
||||||
|
"day18", |
||||||
|
"day19", |
||||||
|
"day20", |
||||||
|
"day21", |
||||||
|
"day22", |
||||||
|
"day23", |
||||||
|
"day24", |
||||||
|
"day25", |
||||||
|
"day26", |
||||||
|
"day27", |
||||||
|
"day28", |
||||||
|
"day29", |
||||||
|
"day30", |
||||||
|
"day31", |
||||||
|
]; |
||||||
|
// 非空数组和所有月的数组进行筛选出重复的元素 |
||||||
|
function compare(data7, allArr) { |
||||||
|
return data7.filter((v) => { |
||||||
|
return allArr.includes(v); |
||||||
|
}); |
||||||
|
} |
||||||
|
// console.log("x轴未分割日份", compare(data7, allArr)); |
||||||
|
// 分割data7，返回月份 xx月 |
||||||
|
this.data8 = []; |
||||||
|
compare(data7, allArr).forEach((item) => { |
||||||
|
if (item) { |
||||||
|
this.data8.push(item.split("day").join("") + "日"); |
||||||
|
} |
||||||
|
}); |
||||||
|
// console.log("x轴数据", this.data8); |
||||||
|
// 图例 |
||||||
|
this.data6 = []; |
||||||
|
this.data5 = this.tableData.forEach((item) => { |
||||||
|
return this.data6.push(item.itemType); |
||||||
|
}); |
||||||
|
// console.log("data1数据", this.data1); |
||||||
|
// console.log("data2数据", this.data2); |
||||||
|
// console.log("data3数据", this.data3); |
||||||
|
// console.log("data4数据", this.data4); |
||||||
|
// console.log("图例文字", this.data6); |
||||||
|
// 月数据 |
||||||
|
var Min1 = Math.floor(Math.min(...this.data1, ...this.data2)), |
||||||
|
Min2 = Math.floor(Math.min(...this.data3, ...this.data4) - 4), |
||||||
|
Max1 = Math.ceil(Math.max(...this.data1, ...this.data2) + 4), |
||||||
|
Max2 = Math.ceil(Math.max(...this.data3, ...this.data4) + 4); |
||||||
|
// console.log("Min1", Min1); |
||||||
|
// console.log("Min2", Min2); |
||||||
|
// console.log("Max1", Max1); |
||||||
|
// console.log("Max2", Max2); |
||||||
|
this.chartInstance1 = echarts.init(this.$refs.findwater_ref); |
||||||
|
const adapterOption = { |
||||||
|
legend: { |
||||||
|
data: this.data6, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
data: this.data8, |
||||||
|
}, |
||||||
|
yAxis: [ |
||||||
|
//两个y轴 |
||||||
|
{ |
||||||
|
min: Min1, |
||||||
|
max: Max1, |
||||||
|
splitNumber: 10, |
||||||
|
interval: (Max1 - Min1) / 10, |
||||||
|
}, |
||||||
|
{ |
||||||
|
min: Min2, |
||||||
|
max: Max2, |
||||||
|
splitNumber: 10, |
||||||
|
interval: (Max2 - Min2) / 10, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: this.data6[0], |
||||||
|
data: this.data1, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: this.data6[1], |
||||||
|
data: this.data2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: this.data6[2], |
||||||
|
data: this.data3, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: this.data6[3], |
||||||
|
data: this.data4, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance1.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance1.resize(); |
||||||
|
} else { |
||||||
|
this.tableData = []; |
||||||
|
this.chartInstance1 = echarts.init(this.$refs.findwater_ref); |
||||||
|
const adapterOption = { |
||||||
|
legend: { |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
yAxis: [ |
||||||
|
//两个y轴 |
||||||
|
{ |
||||||
|
min: 0, |
||||||
|
max: 0, |
||||||
|
splitNumber: 10, |
||||||
|
interval: 0, |
||||||
|
}, |
||||||
|
{ |
||||||
|
min: 0, |
||||||
|
max: 0, |
||||||
|
splitNumber: 10, |
||||||
|
interval: 0, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "", |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "", |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "", |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "", |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance1.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance1.resize(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 导出数据 |
||||||
|
outTable() { |
||||||
|
// console.log("月数据啦"); |
||||||
|
import("@/assets/excel/Export2Excel").then((excel) => { |
||||||
|
const tHeader = [ |
||||||
|
"类别", |
||||||
|
"1日", |
||||||
|
"2日", |
||||||
|
"3日", |
||||||
|
"4日", |
||||||
|
"5日", |
||||||
|
"6日", |
||||||
|
"7日", |
||||||
|
"8日", |
||||||
|
"9日", |
||||||
|
"10日", |
||||||
|
"11日", |
||||||
|
"12日", |
||||||
|
"13日", |
||||||
|
"14日", |
||||||
|
"15日", |
||||||
|
"16日", |
||||||
|
"17日", |
||||||
|
"18日", |
||||||
|
"19日", |
||||||
|
"20日", |
||||||
|
"21日", |
||||||
|
"22日", |
||||||
|
"23日", |
||||||
|
"24日", |
||||||
|
"25日", |
||||||
|
"26日", |
||||||
|
"27日", |
||||||
|
"28日", |
||||||
|
"29日", |
||||||
|
"30日", |
||||||
|
"31日", |
||||||
|
"合计", |
||||||
|
]; // 导出的excel表头名信息 |
||||||
|
const filterVal = [ |
||||||
|
"itemType", |
||||||
|
"day01", |
||||||
|
"day02", |
||||||
|
"day03", |
||||||
|
"day04", |
||||||
|
"day05", |
||||||
|
"day06", |
||||||
|
"day07", |
||||||
|
"day08", |
||||||
|
"day09", |
||||||
|
"day10", |
||||||
|
"day11", |
||||||
|
"day12", |
||||||
|
"day13", |
||||||
|
"day14", |
||||||
|
"day15", |
||||||
|
"day16", |
||||||
|
"day17", |
||||||
|
"day18", |
||||||
|
"day19", |
||||||
|
"day20", |
||||||
|
"day21", |
||||||
|
"day22", |
||||||
|
"day23", |
||||||
|
"day24", |
||||||
|
"day25", |
||||||
|
"day26", |
||||||
|
"day27", |
||||||
|
"day28", |
||||||
|
"day29", |
||||||
|
"day30", |
||||||
|
"day31", |
||||||
|
"totalValue", |
||||||
|
]; // 导出的excel表头字段名，需要导出表格字段名 |
||||||
|
// const list = this.tableData; |
||||||
|
// console.log(list) |
||||||
|
if (this.chTime) { |
||||||
|
this.endTime = this.chTime; |
||||||
|
} else { |
||||||
|
this.endTime = getMonth(0); |
||||||
|
} |
||||||
|
let params = { |
||||||
|
curDate: this.endTime, |
||||||
|
buildingId: this.chBuild, |
||||||
|
type: this.chType, |
||||||
|
}; |
||||||
|
console.log("月参数", params); |
||||||
|
queryMonthDatas(params).then((res) => { |
||||||
|
if (res.code == 200 && res.rows.length > 0) { |
||||||
|
// console.log(res); |
||||||
|
const data = this.formatJson(filterVal, res.rows); |
||||||
|
const autoWidth = true; |
||||||
|
excel.export_json_to_excel({ |
||||||
|
header: tHeader, //表头 |
||||||
|
data, //数据 |
||||||
|
filename: "月数据报表", //名称 |
||||||
|
autoWidth: true, //宽度自适应 |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
//格式转换,不需要改动 |
||||||
|
formatJson(filterVal, jsonData) { |
||||||
|
return jsonData.map((v) => |
||||||
|
filterVal.map((j) => { |
||||||
|
if (j === "installDate") { |
||||||
|
return format(v[j]); |
||||||
|
} else { |
||||||
|
return v[j]; |
||||||
|
} |
||||||
|
}) |
||||||
|
); |
||||||
|
}, |
||||||
|
//初始化chartInstance1对象 |
||||||
|
// 如果父组件点击了月 x轴数据 1号 2号 3号。。。 |
||||||
|
// 如果父组件点击了年 x轴数据 1月 2月 3月。。。 |
||||||
|
initChart1() { |
||||||
|
this.$emit("initChart1"); |
||||||
|
this.chartInstance1 = echarts.init(this.$refs.findwater_ref); |
||||||
|
this.option1 = { |
||||||
|
tooltip: { |
||||||
|
trigger: "axis", |
||||||
|
// 以下为鼠标hover时的背景颜色 |
||||||
|
showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms |
||||||
|
axisPointer: { |
||||||
|
type: "shadow", |
||||||
|
shadowStyle: { |
||||||
|
color: "rgba(30, 69, 113, 0.15)", |
||||||
|
width: "1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
// 折柱混合的图表，不显示icon，图例就可以根据不同的类型不同 |
||||||
|
// icon: "cricle", |
||||||
|
//图例文字颜色 |
||||||
|
textStyle: { |
||||||
|
color: "#ffff", |
||||||
|
fontSize: 12, //这里改字体大小 |
||||||
|
}, |
||||||
|
left: "56%", |
||||||
|
top: "5%", |
||||||
|
//图例距离饼图的距离 |
||||||
|
itemGap: 5, |
||||||
|
itemWidth: 10, |
||||||
|
itemHeight: 5, |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
left: "3%", |
||||||
|
right: "4%", |
||||||
|
bottom: "3%", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: "category", |
||||||
|
//设置为true代表离零刻度间隔一段距离 |
||||||
|
boundaryGap: true, |
||||||
|
// 修饰刻度标签的颜色即x坐标数据 |
||||||
|
axisLabel: { |
||||||
|
// interval: 0, //强制显示所有x轴数据 |
||||||
|
// rotate: 30, //x轴坐标字体倾斜30度 |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, // 不显示坐标轴刻度线 |
||||||
|
}, |
||||||
|
// x坐标轴的颜色 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#e2e6f0", |
||||||
|
}, |
||||||
|
}, //x轴分割线 |
||||||
|
}, |
||||||
|
yAxis: [ |
||||||
|
//两个y轴 |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
// 显示y坐标轴 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", // 设置 y 轴线的颜色 |
||||||
|
}, |
||||||
|
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||||
|
}, |
||||||
|
//y轴分割线段数 |
||||||
|
// splitNumber: 10, |
||||||
|
// 修改y轴分割线的颜色 |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#1a3d62", // 设置分割线的颜色 |
||||||
|
type: "dashed", // 设置分割线为虚线 |
||||||
|
}, |
||||||
|
}, |
||||||
|
//y轴分割线段数 |
||||||
|
splitNumber: 10, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
// 显示y坐标轴 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", // 设置 y 轴线的颜色 |
||||||
|
}, |
||||||
|
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||||
|
}, |
||||||
|
//y轴分割线段数 |
||||||
|
// splitNumber: 10, |
||||||
|
// 修改y轴分割线的颜色 |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#1a3d62", // 设置分割线的颜色 |
||||||
|
type: "dashed", // 设置分割线为虚线 |
||||||
|
}, |
||||||
|
}, |
||||||
|
//y轴分割线段数 |
||||||
|
splitNumber: 10, |
||||||
|
}, |
||||||
|
], |
||||||
|
|
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "bar", |
||||||
|
barWidth: 10, // 柱子宽度 |
||||||
|
// tooltip: { |
||||||
|
// valueFormatter: function (value) { |
||||||
|
// return value + "吨"; |
||||||
|
// }, |
||||||
|
// }, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#db9215", |
||||||
|
lineStyle: { |
||||||
|
color: "#db9215", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bar", |
||||||
|
// tooltip: { |
||||||
|
// valueFormatter: function (value) { |
||||||
|
// return value + "吨"; |
||||||
|
// }, |
||||||
|
// }, |
||||||
|
barWidth: 10, // 柱子宽度 |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#1ab395", |
||||||
|
lineStyle: { |
||||||
|
color: "#1ab395", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "line", |
||||||
|
tooltip: { |
||||||
|
valueFormatter: function (value) { |
||||||
|
return value + "%"; |
||||||
|
}, |
||||||
|
}, |
||||||
|
// stack: 'Total', |
||||||
|
symbol: "circle", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 6, |
||||||
|
yAxisIndex: 1, |
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
// data: this.data3, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#e23131", |
||||||
|
lineStyle: { |
||||||
|
color: "#e23131", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "line", |
||||||
|
tooltip: { |
||||||
|
valueFormatter: function (value) { |
||||||
|
return value + "%"; |
||||||
|
}, |
||||||
|
}, |
||||||
|
// stack: 'Total', |
||||||
|
symbol: "circle", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 6, |
||||||
|
//第二个y轴 |
||||||
|
yAxisIndex: 1, |
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
// data: this.data4, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#4a98ff", |
||||||
|
lineStyle: { |
||||||
|
color: "#4a98ff", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.chartInstance1.setOption(this.option1, true); |
||||||
|
}, |
||||||
|
// 折线图自适应 |
||||||
|
screenAdapter() { |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = (this.$refs.findwater_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 scoped> |
||||||
|
.findwatercharts { |
||||||
|
margin-bottom: 0.35rem; |
||||||
|
width: 100%; |
||||||
|
height: 4.5rem; |
||||||
|
/* background-color: pink; */ |
||||||
|
} |
||||||
|
.analy-table >>> .el-table th.el-table__cell.is-leaf, |
||||||
|
.analy-table >>> .el-table td.el-table__cell { |
||||||
|
border-bottom: 1px solid #093769 !important; |
||||||
|
border-right: 1px solid #093769 !important; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,691 @@ |
|||||||
|
<!-- 报表查询-用能查询-年数据 --> |
||||||
|
<template> |
||||||
|
<div class="analy-table"> |
||||||
|
<div class="findwatercharts" ref="findwater_ref"></div> |
||||||
|
<!-- 表格 --> |
||||||
|
<el-table |
||||||
|
class="maintable" |
||||||
|
header-align="center" |
||||||
|
:data="tableData" |
||||||
|
style="margin-right: 0.13rem" |
||||||
|
:cell-style="tableRowStyle" |
||||||
|
> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="itemType" |
||||||
|
label="类别" |
||||||
|
width="160" |
||||||
|
fixed="left" |
||||||
|
> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="month01" label="1月"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="month02" label="2月"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="month03" label="3月"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="month04" label="4月"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="month05" label="5月"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="month06" label="6月"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="month07" label="7月"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="month08" label="8月"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="month09" label="9月"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="month10" label="10月"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="month11" label="11月"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column align="center" prop="month12" label="12月"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column |
||||||
|
align="center" |
||||||
|
prop="totalValue" |
||||||
|
label="合计" |
||||||
|
fixed="right" |
||||||
|
width="100" |
||||||
|
> |
||||||
|
</el-table-column> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { getYear } from "@/utils/datetime"; |
||||||
|
import { queryYearDatas } from "@/api/hotWater/dataAnalysis"; |
||||||
|
import * as echarts from "echarts"; |
||||||
|
export default { |
||||||
|
props: { |
||||||
|
chType: { |
||||||
|
type: Number, |
||||||
|
}, |
||||||
|
chTime: { |
||||||
|
type: String, |
||||||
|
}, |
||||||
|
chBuild: { |
||||||
|
type: String, |
||||||
|
}, |
||||||
|
currentIndex: { |
||||||
|
type: Number, |
||||||
|
}, |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
chartInstance1: null, |
||||||
|
option1: { |
||||||
|
series: [], |
||||||
|
}, |
||||||
|
// 给后端日期 |
||||||
|
endTime: "", |
||||||
|
//表格数据 |
||||||
|
tableData: [], |
||||||
|
// 四条折线图 |
||||||
|
data1: [], |
||||||
|
data2: [], |
||||||
|
data3: [], |
||||||
|
data4: [], |
||||||
|
data5: [], |
||||||
|
// 图例 |
||||||
|
data6: [], |
||||||
|
// x轴数据 |
||||||
|
data8: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
watch: { |
||||||
|
currentIndex: { |
||||||
|
immediate: true, |
||||||
|
deep: true, |
||||||
|
handler(newVal, val) { |
||||||
|
// console.log("子组件改变的值", newVal); |
||||||
|
this.$nextTick(function () { |
||||||
|
this.getYearData(); |
||||||
|
}); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
// this.getYearData(); |
||||||
|
this.initChart1(); |
||||||
|
window.addEventListener("resize", this.screenAdapter); |
||||||
|
this.screenAdapter(); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
||||||
|
window.removeEventListener("resize", this.screenAdapter); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||||
|
// 如果第1列，修改颜色 |
||||||
|
if (columnIndex === 0) { |
||||||
|
return "background-color:rgb(11 ,100, 201) !important;"; |
||||||
|
} |
||||||
|
}, |
||||||
|
// 查询表格数据 |
||||||
|
getYearData() { |
||||||
|
// 本月 本年参数 |
||||||
|
// 选择时间的参数 父传子 |
||||||
|
// 楼栋id 兄弟组件传值 |
||||||
|
// select选择的值 父传子 |
||||||
|
if (this.chTime) { |
||||||
|
this.endTime = this.chTime; |
||||||
|
} else { |
||||||
|
this.endTime = getYear(0); |
||||||
|
} |
||||||
|
let params = { |
||||||
|
curDate: this.endTime, |
||||||
|
buildingId: this.chBuild, |
||||||
|
type: this.chType, |
||||||
|
}; |
||||||
|
console.log("年表格参数", params); |
||||||
|
queryYearDatas(params).then((res) => { |
||||||
|
// console.log("年表格返回", res); |
||||||
|
if (res.code == 200 && res.rows.length > 0) { |
||||||
|
var line1 = []; |
||||||
|
var line2 = []; |
||||||
|
var line3 = []; |
||||||
|
var line4 = []; |
||||||
|
this.tableData = res.rows; |
||||||
|
// Object.values 把数组对象 转化为 数组 |
||||||
|
line1 = Object.values(this.tableData[0]).slice(3, 15); |
||||||
|
line2 = Object.values(this.tableData[1]).slice(3, 15); |
||||||
|
line3 = Object.values(this.tableData[2]).slice(3, 15); |
||||||
|
line4 = Object.values(this.tableData[3]).slice(3, 15); |
||||||
|
// 四条折线图 filter里过滤掉空值 |
||||||
|
this.data1 = line1.filter(function (s) { |
||||||
|
return s && s.trim(); |
||||||
|
}); |
||||||
|
this.data2 = line2.filter(function (s) { |
||||||
|
return s && s.trim(); |
||||||
|
}); |
||||||
|
// 含百分比的数组数据还需要处理 |
||||||
|
var line5 = line3.filter(function (s) { |
||||||
|
return s && s.trim(); |
||||||
|
}); |
||||||
|
this.data3 = []; |
||||||
|
this.data4 = []; |
||||||
|
// 遍历去除掉%，拼接后返回新数组 |
||||||
|
line5.forEach((item) => { |
||||||
|
this.data3.push(item.split("%").join("")); |
||||||
|
}); |
||||||
|
var line6 = line4.filter(function (s) { |
||||||
|
return s && s.trim(); |
||||||
|
}); |
||||||
|
line6.forEach((item) => { |
||||||
|
this.data4.push(item.split("%").join("")); |
||||||
|
}); |
||||||
|
// 折线图x轴 数据 |
||||||
|
// 先拿到数组的一个对象 tableData[0] [1] [2] [3]都行,并且先过滤掉对象的空值 |
||||||
|
//定义一个新数组 |
||||||
|
let newObj = {}; |
||||||
|
for (let key in this.tableData[0]) { |
||||||
|
if (this.tableData[0][key]) { |
||||||
|
newObj[key] = this.tableData[0][key]; |
||||||
|
} |
||||||
|
} |
||||||
|
// console.log("不含空的数组对象", newObj); |
||||||
|
// 在返回的新的对象中，取出对象的所有key值返回新数组 |
||||||
|
// Object.setPrototypeOf(this.newObj); |
||||||
|
let data7 = Object.keys(newObj); |
||||||
|
// console.log("不含空的x轴数据", data7); |
||||||
|
// 先返回月的数组 |
||||||
|
let allArr = [ |
||||||
|
"month01", |
||||||
|
"month02", |
||||||
|
"month03", |
||||||
|
"month04", |
||||||
|
"month05", |
||||||
|
"month06", |
||||||
|
"month07", |
||||||
|
"month08", |
||||||
|
"month09", |
||||||
|
"month10", |
||||||
|
"month11", |
||||||
|
"month12", |
||||||
|
]; |
||||||
|
// 非空数组和所有月的数组进行筛选出重复的元素 |
||||||
|
function compare(data7, allArr) { |
||||||
|
return data7.filter((v) => { |
||||||
|
return allArr.includes(v); |
||||||
|
}); |
||||||
|
} |
||||||
|
// console.log("x轴未分割月份", compare(data7, allArr)); |
||||||
|
// 分割data7，返回月份 xx月 |
||||||
|
this.data8 = []; |
||||||
|
compare(data7, allArr).forEach((item) => { |
||||||
|
if (item) { |
||||||
|
this.data8.push(item.split("month").join("") + "月"); |
||||||
|
} |
||||||
|
}); |
||||||
|
// console.log("x轴数据", this.data8); |
||||||
|
// 图例 |
||||||
|
this.data6 = []; |
||||||
|
this.data5 = this.tableData.forEach((item) => { |
||||||
|
return this.data6.push(item.itemType); |
||||||
|
}); |
||||||
|
// console.log("data1数据", this.data1); |
||||||
|
// console.log("data2数据", this.data2); |
||||||
|
// console.log("data3数据", this.data3); |
||||||
|
// console.log("data4数据", this.data4); |
||||||
|
// console.log("图例文字", this.data6); |
||||||
|
// 月数据 |
||||||
|
var Min1 = Math.floor(Math.min(...this.data1, ...this.data2)), |
||||||
|
Min2 = Math.floor(Math.min(...this.data3, ...this.data4) - 4), |
||||||
|
Max1 = Math.ceil(Math.max(...this.data1, ...this.data2) + 4), |
||||||
|
Max2 = Math.ceil(Math.max(...this.data3, ...this.data4) + 4); |
||||||
|
// console.log("Min1", Min1); |
||||||
|
// console.log("Min2", Min2); |
||||||
|
// console.log("Max1", Max1); |
||||||
|
// console.log("Max2", Max2); |
||||||
|
this.chartInstance1 = echarts.init(this.$refs.findwater_ref); |
||||||
|
const adapterOption = { |
||||||
|
legend: { |
||||||
|
data: this.data6, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
data: this.data8, |
||||||
|
}, |
||||||
|
yAxis: [ |
||||||
|
//两个y轴 |
||||||
|
{ |
||||||
|
min: Min1, |
||||||
|
max: Max1, |
||||||
|
splitNumber: 10, |
||||||
|
interval: (Max1 - Min1) / 10, |
||||||
|
}, |
||||||
|
{ |
||||||
|
min: Min2, |
||||||
|
max: Max2, |
||||||
|
splitNumber: 10, |
||||||
|
interval: (Max2 - Min2) / 10, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: this.data6[0], |
||||||
|
data: this.data1, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: this.data6[1], |
||||||
|
data: this.data2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: this.data6[2], |
||||||
|
data: this.data3, |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: this.data6[3], |
||||||
|
data: this.data4, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance1.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance1.resize(); |
||||||
|
} else { |
||||||
|
this.tableData = []; |
||||||
|
this.chartInstance1 = echarts.init(this.$refs.findwater_ref); |
||||||
|
const adapterOption = { |
||||||
|
legend: { |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
yAxis: [ |
||||||
|
//两个y轴 |
||||||
|
{ |
||||||
|
min: 0, |
||||||
|
max: 0, |
||||||
|
splitNumber: 10, |
||||||
|
interval: 0, |
||||||
|
}, |
||||||
|
{ |
||||||
|
min: 0, |
||||||
|
max: 0, |
||||||
|
splitNumber: 10, |
||||||
|
interval: 0, |
||||||
|
}, |
||||||
|
], |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "", |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "", |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "", |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "", |
||||||
|
data: [], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance1.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance1.resize(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 导出数据 |
||||||
|
outTable() { |
||||||
|
// console.log("年数据啦"); |
||||||
|
import("@/assets/excel/Export2Excel").then((excel) => { |
||||||
|
const tHeader = [ |
||||||
|
"类别", |
||||||
|
"1月", |
||||||
|
"2月", |
||||||
|
"3月", |
||||||
|
"4月", |
||||||
|
"5月", |
||||||
|
"6月", |
||||||
|
"7月", |
||||||
|
"8月", |
||||||
|
"9月", |
||||||
|
"10月", |
||||||
|
"11月", |
||||||
|
"12月", |
||||||
|
"合计", |
||||||
|
]; // 导出的excel表头名信息 |
||||||
|
const filterVal = [ |
||||||
|
"itemType", |
||||||
|
"month01", |
||||||
|
"month02", |
||||||
|
"month03", |
||||||
|
"month04", |
||||||
|
"month05", |
||||||
|
"month06", |
||||||
|
"month07", |
||||||
|
"month08", |
||||||
|
"month09", |
||||||
|
"month10", |
||||||
|
"month11", |
||||||
|
"month12", |
||||||
|
"totalValue", |
||||||
|
]; // 导出的excel表头字段名，需要导出表格字段名 |
||||||
|
// const list = this.tableData; |
||||||
|
// console.log(list) |
||||||
|
if (this.chTime) { |
||||||
|
this.endTime = this.chTime; |
||||||
|
} else { |
||||||
|
this.endTime = getYear(0); |
||||||
|
} |
||||||
|
let params = { |
||||||
|
curDate: this.endTime, |
||||||
|
buildingId: this.chBuild, |
||||||
|
type: this.chType, |
||||||
|
}; |
||||||
|
console.log("年表格参数", params); |
||||||
|
queryYearDatas(params).then((res) => { |
||||||
|
if (res.code == 200 && res.rows.length > 0) { |
||||||
|
// console.log(res); |
||||||
|
const data = this.formatJson(filterVal, res.rows); |
||||||
|
const autoWidth = true; |
||||||
|
excel.export_json_to_excel({ |
||||||
|
header: tHeader, //表头 |
||||||
|
data, //数据 |
||||||
|
filename: "年数据报表", //名称 |
||||||
|
autoWidth: true, //宽度自适应 |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
}, |
||||||
|
//格式转换,不需要改动 |
||||||
|
formatJson(filterVal, jsonData) { |
||||||
|
return jsonData.map((v) => |
||||||
|
filterVal.map((j) => { |
||||||
|
if (j === "installDate") { |
||||||
|
return format(v[j]); |
||||||
|
} else { |
||||||
|
return v[j]; |
||||||
|
} |
||||||
|
}) |
||||||
|
); |
||||||
|
}, |
||||||
|
//初始化chartInstance1对象 |
||||||
|
// 如果父组件点击了月 x轴数据 1号 2号 3号。。。 |
||||||
|
// 如果父组件点击了年 x轴数据 1月 2月 3月。。。 |
||||||
|
initChart1() { |
||||||
|
this.$emit("initChart1"); |
||||||
|
this.chartInstance1 = echarts.init(this.$refs.findwater_ref); |
||||||
|
this.option1 = { |
||||||
|
tooltip: { |
||||||
|
trigger: "axis", |
||||||
|
// 以下为鼠标hover时的背景颜色 |
||||||
|
showDelay: 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms |
||||||
|
axisPointer: { |
||||||
|
type: "shadow", |
||||||
|
shadowStyle: { |
||||||
|
color: "rgba(30, 69, 113, 0.15)", |
||||||
|
width: "1", |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
// 折柱混合的图表，不显示icon，图例就可以根据不同的类型不同 |
||||||
|
// icon: "cricle", |
||||||
|
//图例文字颜色 |
||||||
|
textStyle: { |
||||||
|
color: "#ffff", |
||||||
|
fontSize: 12, //这里改字体大小 |
||||||
|
}, |
||||||
|
left: "56%", |
||||||
|
top: "5%", |
||||||
|
//图例距离饼图的距离 |
||||||
|
itemGap: 5, |
||||||
|
itemWidth: 10, |
||||||
|
itemHeight: 5, |
||||||
|
}, |
||||||
|
grid: { |
||||||
|
left: "3%", |
||||||
|
right: "4%", |
||||||
|
bottom: "3%", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: "category", |
||||||
|
//设置为true代表离零刻度间隔一段距离 |
||||||
|
boundaryGap: true, |
||||||
|
// 修饰刻度标签的颜色即x坐标数据 |
||||||
|
axisLabel: { |
||||||
|
// interval: 0, //强制显示所有x轴数据 |
||||||
|
// rotate: 30, //x轴坐标字体倾斜30度 |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, // 不显示坐标轴刻度线 |
||||||
|
}, |
||||||
|
// x坐标轴的颜色 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#e2e6f0", |
||||||
|
}, |
||||||
|
}, //x轴分割线 |
||||||
|
}, |
||||||
|
yAxis: [ |
||||||
|
//两个y轴 |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
// 显示y坐标轴 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", // 设置 y 轴线的颜色 |
||||||
|
}, |
||||||
|
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||||
|
}, |
||||||
|
//y轴分割线段数 |
||||||
|
// splitNumber: 10, |
||||||
|
// 修改y轴分割线的颜色 |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#1a3d62", // 设置分割线的颜色 |
||||||
|
type: "dashed", // 设置分割线为虚线 |
||||||
|
}, |
||||||
|
}, |
||||||
|
//y轴分割线段数 |
||||||
|
splitNumber: 10, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "value", |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
// 显示y坐标轴 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", // 设置 y 轴线的颜色 |
||||||
|
}, |
||||||
|
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||||
|
}, |
||||||
|
//y轴分割线段数 |
||||||
|
// splitNumber: 10, |
||||||
|
// 修改y轴分割线的颜色 |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#1a3d62", // 设置分割线的颜色 |
||||||
|
type: "dashed", // 设置分割线为虚线 |
||||||
|
}, |
||||||
|
}, |
||||||
|
//y轴分割线段数 |
||||||
|
splitNumber: 10, |
||||||
|
}, |
||||||
|
], |
||||||
|
|
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "bar", |
||||||
|
barWidth: 10, // 柱子宽度 |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#db9215", |
||||||
|
lineStyle: { |
||||||
|
color: "#db9215", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "bar", |
||||||
|
// tooltip: { |
||||||
|
// valueFormatter: function (value) { |
||||||
|
// return value + "吨"; |
||||||
|
// }, |
||||||
|
// }, |
||||||
|
tooltip: { |
||||||
|
trigger: "axis", |
||||||
|
formatter: function (params) { |
||||||
|
//数据单位格式化 |
||||||
|
var relVal = params[0].name; //x轴名称 |
||||||
|
if (params[0].seriesName == "2022年用水量") { |
||||||
|
relVal = |
||||||
|
params[0].name + |
||||||
|
"<br/>" + |
||||||
|
params[0].seriesName + |
||||||
|
" : " + |
||||||
|
params[0].value + |
||||||
|
" 吨"; |
||||||
|
} else if (params[0].seriesName == "用电量") { |
||||||
|
relVal = |
||||||
|
params[0].name + |
||||||
|
"<br/>" + |
||||||
|
params[0].seriesName + |
||||||
|
" : " + |
||||||
|
params[0].value + |
||||||
|
" 度"; |
||||||
|
} else if (params[0].seriesName == "耗能") { |
||||||
|
relVal = |
||||||
|
params[0].name + |
||||||
|
"<br/>" + |
||||||
|
params[0].seriesName + |
||||||
|
" : " + |
||||||
|
params[0].value + |
||||||
|
" 度/吨"; |
||||||
|
} else { |
||||||
|
relVal = |
||||||
|
params[0].name + |
||||||
|
"<br/>" + |
||||||
|
params[0].seriesName + |
||||||
|
" : " + |
||||||
|
params[0].value + |
||||||
|
" 次"; |
||||||
|
} |
||||||
|
return relVal; |
||||||
|
}, |
||||||
|
}, |
||||||
|
barWidth: 10, // 柱子宽度 |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#1ab395", |
||||||
|
lineStyle: { |
||||||
|
color: "#1ab395", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "line", |
||||||
|
tooltip: { |
||||||
|
valueFormatter: function (value) { |
||||||
|
return value + "%"; |
||||||
|
}, |
||||||
|
}, |
||||||
|
// stack: 'Total', |
||||||
|
symbol: "circle", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 6, |
||||||
|
yAxisIndex: 1, |
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
// data: this.data3, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#e23131", |
||||||
|
lineStyle: { |
||||||
|
color: "#e23131", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
type: "line", |
||||||
|
tooltip: { |
||||||
|
valueFormatter: function (value) { |
||||||
|
return value + "%"; |
||||||
|
}, |
||||||
|
}, |
||||||
|
// stack: 'Total', |
||||||
|
symbol: "circle", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 6, |
||||||
|
//第二个y轴 |
||||||
|
yAxisIndex: 1, |
||||||
|
// 开始不显示拐点， 鼠标经过显示 |
||||||
|
showSymbol: false, |
||||||
|
// data: this.data4, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#4a98ff", |
||||||
|
lineStyle: { |
||||||
|
color: "#4a98ff", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.chartInstance1.setOption(this.option1, true); |
||||||
|
}, |
||||||
|
// 折线图自适应 |
||||||
|
screenAdapter() { |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = (this.$refs.findwater_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 scoped> |
||||||
|
.findwatercharts { |
||||||
|
margin-bottom: 0.35rem; |
||||||
|
width: 100%; |
||||||
|
height: 4.5rem; |
||||||
|
/* background-color: pink; */ |
||||||
|
} |
||||||
|
.analy-table >>> .el-table th.el-table__cell.is-leaf, |
||||||
|
.analy-table >>> .el-table td.el-table__cell { |
||||||
|
border-bottom: 1px solid #093769 !important; |
||||||
|
border-right: 1px solid #093769 !important; |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,321 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container"> |
||||||
|
<div class="right-monitor"> |
||||||
|
<div class="buildingDiv"> |
||||||
|
<div class="buildingDiv-left"> |
||||||
|
<img |
||||||
|
class="title-bg" |
||||||
|
src="../../../assets/images/title-bg.png" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<div class="title-word">位置：{{ currentName }}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- 条件 --> |
||||||
|
<div class="condition"> |
||||||
|
<div class="condition-left"> |
||||||
|
<el-select |
||||||
|
style="margin-right: 0.1rem" |
||||||
|
v-model="building" |
||||||
|
placeholder="请选择楼栋" |
||||||
|
clearable |
||||||
|
@change="handleBuildingChange" |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="(item, index) in builds" |
||||||
|
:key="index" |
||||||
|
:label="item.building_name" |
||||||
|
:value="item.id" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
<el-select |
||||||
|
style="margin-right: 0.1rem" |
||||||
|
v-model="analysisType" |
||||||
|
placeholder="请选择" |
||||||
|
clearable |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="(item, index) in analysisTypes" |
||||||
|
:key="index" |
||||||
|
:label="item.label" |
||||||
|
:value="item.value" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
<div class="choice"> |
||||||
|
<div |
||||||
|
class="mr20" |
||||||
|
v-for="(item, index) in timeData2" |
||||||
|
:key="index" |
||||||
|
@click="handleEnter(index, $event)" |
||||||
|
:class="{ timeStyle: currentIndex == index }" |
||||||
|
> |
||||||
|
{{ item.title }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-date-picker |
||||||
|
v-model="monthDate" |
||||||
|
type="month" |
||||||
|
v-if="currentIndex === 0" |
||||||
|
placeholder="选择开始月份" |
||||||
|
value-format="yyyy-MM" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<el-date-picker |
||||||
|
v-model="yearDate" |
||||||
|
v-if="currentIndex === 1" |
||||||
|
type="year" |
||||||
|
placeholder="选择开始年份" |
||||||
|
style="width: 180px" |
||||||
|
value-format="yyyy" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div class="success-btn" style="margin: 0 0.12rem"> |
||||||
|
<el-button type="success" @click="findData">查询</el-button> |
||||||
|
</div> |
||||||
|
<div class="warning-btn"> |
||||||
|
<el-button type="warning" @click="exportData">导出</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<analyze-month |
||||||
|
v-if="currentIndex === 0" |
||||||
|
ref="monthRef" |
||||||
|
:currentIndex="currentIndex" |
||||||
|
:chType="analysisType" |
||||||
|
:chTime="monthDate" |
||||||
|
:chBuild="building" |
||||||
|
></analyze-month> |
||||||
|
<analyze-year |
||||||
|
v-if="currentIndex === 1" |
||||||
|
:currentIndex="currentIndex" |
||||||
|
ref="yearRef" |
||||||
|
:chType="analysisType" |
||||||
|
:chTime="yearDate" |
||||||
|
:chBuild="building" |
||||||
|
></analyze-year> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { hotBuildList } from "@/api/hotWater/energyAnalysis"; |
||||||
|
import analyzeMonth from "./components/analyzeMonth.vue"; |
||||||
|
import analyzeYear from "./components/analyzeYear.vue"; |
||||||
|
export default { |
||||||
|
components: { analyzeMonth, analyzeYear }, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
loading: false, |
||||||
|
currentName: "", |
||||||
|
building: "", //选中的楼栋 |
||||||
|
builds: [], //楼栋列表 |
||||||
|
analysisType: 1, |
||||||
|
analysisTypes: [ |
||||||
|
{ |
||||||
|
label: "用水量", |
||||||
|
value: 1, |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "用电量", |
||||||
|
value: 2, |
||||||
|
}, |
||||||
|
{ |
||||||
|
label: "耗能", |
||||||
|
value: 3, |
||||||
|
}, |
||||||
|
], |
||||||
|
monthDate: "", |
||||||
|
yearDate: "", |
||||||
|
timeData2: [{ title: "月" }, { title: "年" }], |
||||||
|
currentIndex: null, //月 |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.getBuildList(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
handleEnter(index) { |
||||||
|
this.currentIndex = index; |
||||||
|
// this.renderingBroken(); |
||||||
|
console.log("切换日月"); |
||||||
|
}, |
||||||
|
handleBuildingChange(selectedId) { |
||||||
|
// 找到选中项的对象 |
||||||
|
const selectedItem = this.builds.find((item) => item.id === selectedId); |
||||||
|
if (selectedItem) { |
||||||
|
this.currentName = selectedItem.building_name; |
||||||
|
console.log("选中的楼栋 ID:", selectedId); |
||||||
|
console.log("选中的楼栋名称:", this.currentName); |
||||||
|
// 这里可以添加你需要执行的其他操作 |
||||||
|
} |
||||||
|
}, |
||||||
|
/** 查询楼栋 */ |
||||||
|
getBuildList() { |
||||||
|
let data = { |
||||||
|
systemType: "1", |
||||||
|
}; |
||||||
|
hotBuildList(data).then((res) => { |
||||||
|
if (res.code == 200) { |
||||||
|
// 只需要保留热水的系统 |
||||||
|
console.log("楼栋返回值", res); |
||||||
|
// 过滤掉 building_name 是 "所有" 的第一个对象 |
||||||
|
const filteredRows = res.rows.filter((row, index) => { |
||||||
|
if (index === 0 && row.building_name === "所有") { |
||||||
|
return false; |
||||||
|
} |
||||||
|
return true; |
||||||
|
}); |
||||||
|
|
||||||
|
this.builds = filteredRows; |
||||||
|
// console.log("筛选后的新结果", this.builds); |
||||||
|
|
||||||
|
if (this.builds.length > 0) { |
||||||
|
this.building = this.builds[0].id; |
||||||
|
this.currentName = this.builds[0].building_name; |
||||||
|
console.log("选中的第一个楼栋id-传给子组件", this.building); |
||||||
|
this.handleEnter(0); //默认月 |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 查询 |
||||||
|
findData() { |
||||||
|
if (this.currentIndex == 0) { |
||||||
|
// 调用月的更新表格数据函数 |
||||||
|
this.$refs.monthRef.getMothData(); |
||||||
|
} else { |
||||||
|
//年 |
||||||
|
this.$refs.yearRef.getYearData(); |
||||||
|
} |
||||||
|
}, |
||||||
|
// 导出 |
||||||
|
exportData() { |
||||||
|
if (this.currentIndex == 0) { |
||||||
|
// 月 |
||||||
|
this.$refs.monthRef.outTable(); |
||||||
|
} else { |
||||||
|
//年 |
||||||
|
this.$refs.yearRef.outTable(); |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</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; |
||||||
|
} |
||||||
|
} |
||||||
|
.app-container { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: space-between; |
||||||
|
flex-wrap: nowrap; |
||||||
|
align-items: stretch; |
||||||
|
height: 100%; |
||||||
|
.left-tree { |
||||||
|
width: 256px; |
||||||
|
padding: 15px 10px 10px 10px; |
||||||
|
border: 1px solid #004b8c; |
||||||
|
} |
||||||
|
.right-monitor { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: flex-start; |
||||||
|
.buildingDiv { |
||||||
|
padding-left: 54px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 20px; |
||||||
|
position: relative; |
||||||
|
.title-bg { |
||||||
|
width: 208px; |
||||||
|
height: 38px; |
||||||
|
position: absolute; |
||||||
|
left: 0; |
||||||
|
z-index: 0; |
||||||
|
} |
||||||
|
.title-word { |
||||||
|
z-index: 10; |
||||||
|
font-family: YouSheBiaoTiHei; |
||||||
|
font-size: 24px; |
||||||
|
color: #ffffff; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.choice { |
||||||
|
margin-left: 0px; |
||||||
|
.mr20 { |
||||||
|
padding: 0.05rem 0.3rem; |
||||||
|
white-space: nowrap; |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
.charts { |
||||||
|
width: 870px; |
||||||
|
height: 300px; |
||||||
|
} |
||||||
|
.tree-container { |
||||||
|
height: 330px; /* 设置固定高度 */ |
||||||
|
overflow-y: auto; /* 启用垂直滚动条 */ |
||||||
|
} |
||||||
|
// 滚动条 |
||||||
|
:-webkit-scrollbar { |
||||||
|
width: 10px; /* 滚动条宽度 */ |
||||||
|
} |
||||||
|
|
||||||
|
::-webkit-scrollbar-track { |
||||||
|
background: transparent !important; /* 滚动条轨道背景色 */ |
||||||
|
} |
||||||
|
.custom-tree-node { |
||||||
|
flex: 1; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
font-size: 14px; |
||||||
|
padding-right: 8px; |
||||||
|
.tree-left { |
||||||
|
.custom-tree-icon { |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
@media (min-width: 1200px) and (max-width: 1540px) { |
||||||
|
.tem-li { |
||||||
|
width: calc(49% - 20px) !important; |
||||||
|
} |
||||||
|
} |
||||||
|
@media (max-width: 1200px) { |
||||||
|
.tem-li { |
||||||
|
width: calc(100% - 40px) !important; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
|
<style scoped> |
||||||
|
/* 自定义高亮颜色 */ |
||||||
|
.left-tree |
||||||
|
>>> .el-tree--highlight-current |
||||||
|
.el-tree-node.is-current |
||||||
|
> .el-tree-node__content { |
||||||
|
background-color: #285b9e !important; |
||||||
|
/* color: #f56c6c; */ |
||||||
|
color: #25f1f8; |
||||||
|
} |
||||||
|
</style> |
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,711 @@ |
|||||||
|
<template> |
||||||
|
<div class="big-machine" v-loading="listLoading"> |
||||||
|
<div class="condition"> |
||||||
|
<div class="condition-left"> |
||||||
|
<el-select |
||||||
|
style="margin-right: 0.1rem" |
||||||
|
v-model="building" |
||||||
|
placeholder="请选择楼栋" |
||||||
|
clearable |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="(item, index) in builds" |
||||||
|
:key="index" |
||||||
|
:label="item.building_name" |
||||||
|
:value="item.id" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
<el-date-picker |
||||||
|
v-model="dayDate" |
||||||
|
type="date" |
||||||
|
value-format="yyyy-MM-dd" |
||||||
|
placeholder="选择日期" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div class="success-btn" style="margin: 0 0.12rem"> |
||||||
|
<el-button type="success" @click="findData">查询</el-button> |
||||||
|
</div> |
||||||
|
<div class="warning-btn"> |
||||||
|
<el-button type="warning" @click="goExport">导出</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="charts" ref="chart_ref"></div> |
||||||
|
<el-table |
||||||
|
:data="tableData" |
||||||
|
@row-click="handlerow" |
||||||
|
highlight-current-row |
||||||
|
height="500" |
||||||
|
ref="maintable" |
||||||
|
:cell-style="tableRowStyle" |
||||||
|
> |
||||||
|
<el-table-column v-if="showBuild" prop="buildingName" label="楼栋名称"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column v-if="!showBuild" prop="deviceName" label="热泵名称"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="0点" align="center" prop="temp00" /> |
||||||
|
<el-table-column label="2点" align="center" prop="temp02" /> |
||||||
|
<el-table-column label="6点" align="center" prop="temp06" /> |
||||||
|
<el-table-column label="8点" align="center" prop="temp08" /> |
||||||
|
<el-table-column label="11点" align="center" prop="temp11" /> |
||||||
|
<el-table-column label="13点" align="center" prop="temp13" /> |
||||||
|
<el-table-column label="14点" align="center" prop="temp14" /> |
||||||
|
<el-table-column label="15点" align="center" prop="temp15" /> |
||||||
|
<el-table-column label="16点" align="center" prop="temp16" /> |
||||||
|
<el-table-column label="17点" align="center" prop="temp17" /> |
||||||
|
<el-table-column label="18点" align="center" prop="temp18" /> |
||||||
|
<el-table-column label="19点" align="center" prop="temp19" /> |
||||||
|
<el-table-column label="20点" align="center" prop="temp20" /> |
||||||
|
<el-table-column label="21点" align="center" prop="temp21" /> |
||||||
|
<el-table-column label="22点" align="center" prop="temp22" /> |
||||||
|
<el-table-column label="23点" align="center" prop="temp23" /> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { formatDay } from "@/utils/datetime"; |
||||||
|
import { hotBuildList, hotWaterTemp } from "@/api/hotWater/energyAnalysis"; |
||||||
|
import * as echarts from "echarts"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
showBuild: true, //控制表格显示楼栋名称还是热泵名称 |
||||||
|
listLoading: false, |
||||||
|
dayDate: [], //日值 |
||||||
|
dialogVisible: false, |
||||||
|
building: "", //选中的楼栋 |
||||||
|
builds: [], //楼栋列表 |
||||||
|
// 遮罩层 |
||||||
|
loading: false, |
||||||
|
// 总条数 |
||||||
|
total: 0, |
||||||
|
// 表格数据 |
||||||
|
tableData: [], |
||||||
|
// 查询参数 |
||||||
|
queryParams: { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10, |
||||||
|
startTime: "", |
||||||
|
endTime: "", |
||||||
|
}, |
||||||
|
brokenInstanc: null, |
||||||
|
brokenOption: {}, |
||||||
|
brokenData1: [], |
||||||
|
brokenTime: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
// 表格第一行高亮 |
||||||
|
watch: { |
||||||
|
// 请求后端才有效果 |
||||||
|
tableData: function () { |
||||||
|
this.$nextTick(function () { |
||||||
|
this.$refs.maintable.setCurrentRow(this.tableData[0]); |
||||||
|
}); |
||||||
|
}, |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// 在组件创建完成后，设置默认值 |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initializeTimeDate(); |
||||||
|
this.getBuildList(); |
||||||
|
this.getList(); |
||||||
|
this.initChart(); |
||||||
|
window.addEventListener("resize", this.screenAdapter); |
||||||
|
this.screenAdapter(); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//取消监听器 |
||||||
|
window.removeEventListener("resize", this.screenAdapter); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** 查询楼栋 */ |
||||||
|
getBuildList() { |
||||||
|
let data = { |
||||||
|
systemType: "1", |
||||||
|
}; |
||||||
|
hotBuildList(data).then((res) => { |
||||||
|
if (res.code == 200) { |
||||||
|
// 只需要保留热水的系统 |
||||||
|
console.log("楼栋返回值", res); |
||||||
|
this.builds = res.rows; |
||||||
|
// console.log("筛选后的新结果", this.builds); |
||||||
|
this.building = res.rows[0].id; |
||||||
|
this.getList(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 初始化时间 |
||||||
|
initializeTimeDate() { |
||||||
|
this.dayDate = formatDay(new Date()); // 更新 |
||||||
|
}, |
||||||
|
// 查询 |
||||||
|
findData() { |
||||||
|
this.getList(); |
||||||
|
}, |
||||||
|
/* 加入小手状态 */ |
||||||
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||||
|
if (row) { |
||||||
|
return "cursor:pointer;text-align:center"; |
||||||
|
} |
||||||
|
}, |
||||||
|
//请求数据 |
||||||
|
getList() { |
||||||
|
if (this.building == "所有") { |
||||||
|
this.showBuild = true; |
||||||
|
} else { |
||||||
|
this.showBuild = false; |
||||||
|
} |
||||||
|
let data = { |
||||||
|
buildingId: this.building, |
||||||
|
curDate: this.dayDate, |
||||||
|
}; |
||||||
|
console.log("查询数据参数", data); |
||||||
|
this.listLoading = true; |
||||||
|
// 请求数据 |
||||||
|
hotWaterTemp(data).then((res) => { |
||||||
|
if (res.code == 200 && res.rows.length > 0) { |
||||||
|
this.tableData = res.rows; |
||||||
|
// this.firstRow(); |
||||||
|
this.handlerow(this.tableData[0]); |
||||||
|
} else { |
||||||
|
this.tableData = []; |
||||||
|
} |
||||||
|
}); |
||||||
|
// Just to simulate the time of the request |
||||||
|
setTimeout(() => { |
||||||
|
this.listLoading = false; |
||||||
|
}, 1.0 * 1000); |
||||||
|
}, |
||||||
|
//查询单个热泵状态 点击表格的某一行 |
||||||
|
handlerow(row, event, column) { |
||||||
|
console.log("点击的行数据----", row); |
||||||
|
if (row) { |
||||||
|
const obj = Object.assign({}, row); |
||||||
|
// 先截取掉不需要的对象属性和值 |
||||||
|
delete obj.buildingId; |
||||||
|
delete obj.curDate; |
||||||
|
delete obj.deviceNum; |
||||||
|
delete obj.deviceName; |
||||||
|
delete obj.buildingName; |
||||||
|
//定义一个新数组 |
||||||
|
let newObj = {}; |
||||||
|
for (let key in obj) { |
||||||
|
if (obj[key]) { |
||||||
|
newObj[key] = obj[key]; |
||||||
|
} |
||||||
|
} |
||||||
|
// console.log("不含空的x轴数据", data7); |
||||||
|
const keysArr = Object.keys(newObj); // 获取对象所有属性名的数组 |
||||||
|
this.brokenTime = []; |
||||||
|
keysArr.forEach((item) => { |
||||||
|
if (item) { |
||||||
|
this.brokenTime.push(item.split("temp").join("") + ":00"); |
||||||
|
} |
||||||
|
}); |
||||||
|
const valuesArr = keysArr.map((key) => newObj[key]); // 将属性名对应的值提取出来存入一个新的数组中 |
||||||
|
// console.log("值", valuesArr); |
||||||
|
// console.log("坐标", this.brokenTime); |
||||||
|
this.brokenData1 = valuesArr; |
||||||
|
} else { |
||||||
|
this.brokenTime = []; |
||||||
|
this.brokenData1 = []; |
||||||
|
} |
||||||
|
this.renderingBroken(); |
||||||
|
}, |
||||||
|
//渲染 |
||||||
|
renderingBroken() { |
||||||
|
this.brokenOption.series[0].data = this.brokenData1; |
||||||
|
this.brokenOption.series[0].itemStyle.color = "#1f8dee"; |
||||||
|
this.brokenOption.series[0].areaStyle.color.colorStops = [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(31, 141, 238, 0.3)", // 0% 处的颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 0.8, |
||||||
|
color: "rgba(31, 141, 238,0)", // 100% 处的颜色 |
||||||
|
}, |
||||||
|
]; |
||||||
|
// 动态设置 tooltip 格式化函数 |
||||||
|
this.brokenOption.tooltip = { |
||||||
|
trigger: "axis", |
||||||
|
formatter: function (params) { |
||||||
|
// 获取当前数据点信息 |
||||||
|
const data = params[0]; |
||||||
|
const month = data.name; |
||||||
|
const value = data.value; |
||||||
|
return `${month}<br/>温度: ${value} ℃`; |
||||||
|
}, |
||||||
|
}; |
||||||
|
this.brokenOption.xAxis.data = this.brokenTime; |
||||||
|
this.brokenInstanc.setOption(this.brokenOption); |
||||||
|
}, |
||||||
|
// 导出 |
||||||
|
goExport() { |
||||||
|
if (this.tableData) { |
||||||
|
import("@/assets/excel/Export2Excel").then((excel) => { |
||||||
|
// 所有楼栋 |
||||||
|
if (this.showBuild) { |
||||||
|
var tHeader = [ |
||||||
|
"楼栋名称", |
||||||
|
"0点", |
||||||
|
"02点", |
||||||
|
"06点", |
||||||
|
"8点", |
||||||
|
"11点", |
||||||
|
"13点", |
||||||
|
"14点", |
||||||
|
"15点", |
||||||
|
"16点", |
||||||
|
"17点", |
||||||
|
"18点", |
||||||
|
"19点", |
||||||
|
"20点", |
||||||
|
"21点", |
||||||
|
"22点", |
||||||
|
"23点", |
||||||
|
]; // 导出的excel表头名信息 |
||||||
|
var filterVal = [ |
||||||
|
"buildingName", |
||||||
|
"temp00", |
||||||
|
"temp02", |
||||||
|
"temp06", |
||||||
|
"temp08", |
||||||
|
"temp11", |
||||||
|
"temp13", |
||||||
|
"temp14", |
||||||
|
"temp15", |
||||||
|
"temp16", |
||||||
|
"temp17", |
||||||
|
"temp18", |
||||||
|
"temp19", |
||||||
|
"temp20", |
||||||
|
"temp21", |
||||||
|
"temp22", |
||||||
|
"temp23", |
||||||
|
]; // 导出的excel表头字段名，需要导出表格字段名 |
||||||
|
} else { |
||||||
|
var tHeader = [ |
||||||
|
"热泵名称", |
||||||
|
"0点", |
||||||
|
"02点", |
||||||
|
"06点", |
||||||
|
"8点", |
||||||
|
"11点", |
||||||
|
"13点", |
||||||
|
"14点", |
||||||
|
"15点", |
||||||
|
"16点", |
||||||
|
"17点", |
||||||
|
"18点", |
||||||
|
"19点", |
||||||
|
"20点", |
||||||
|
"21点", |
||||||
|
"22点", |
||||||
|
"23点", |
||||||
|
]; // 导出的excel表头名信息 |
||||||
|
var filterVal = [ |
||||||
|
"deviceName", |
||||||
|
"temp00", |
||||||
|
"temp02", |
||||||
|
"temp06", |
||||||
|
"temp08", |
||||||
|
"temp11", |
||||||
|
"temp13", |
||||||
|
"temp14", |
||||||
|
"temp15", |
||||||
|
"temp16", |
||||||
|
"temp17", |
||||||
|
"temp18", |
||||||
|
"temp19", |
||||||
|
"temp20", |
||||||
|
"temp21", |
||||||
|
"temp22", |
||||||
|
"temp23", |
||||||
|
]; // 导出的excel表头字段名，需要导出表格字段名 |
||||||
|
} |
||||||
|
const data = this.formatJson(filterVal, this.tableData); |
||||||
|
const autoWidth = true; |
||||||
|
excel.export_json_to_excel({ |
||||||
|
header: tHeader, //表头 |
||||||
|
data, //数据 |
||||||
|
filename: "温度变化报表", //名称 |
||||||
|
autoWidth: true, //宽度自适应 |
||||||
|
}); |
||||||
|
}); |
||||||
|
this.$message({ |
||||||
|
type: "success", |
||||||
|
message: "导出成功!", |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$message.error("导出失败!"); |
||||||
|
} |
||||||
|
}, |
||||||
|
//格式转换,不需要改动 |
||||||
|
formatJson(filterVal, jsonData) { |
||||||
|
return jsonData.map((v) => |
||||||
|
filterVal.map((j) => { |
||||||
|
if (j === "installDate") { |
||||||
|
return format(v[j]); |
||||||
|
} else { |
||||||
|
return v[j]; |
||||||
|
} |
||||||
|
}) |
||||||
|
); |
||||||
|
}, |
||||||
|
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||||
|
screenAdapter() { |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||||
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||||
|
const adapterOption = {}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.brokenInstanc.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.brokenInstanc.resize(); |
||||||
|
}, |
||||||
|
//初始化chartInstance对象 |
||||||
|
initChart() { |
||||||
|
this.brokenInstanc = echarts.init(this.$refs.chart_ref); |
||||||
|
this.brokenOption = { |
||||||
|
tooltip: { |
||||||
|
trigger: "axis", |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
show: false, |
||||||
|
selectedMode: false, // 是否允许图例进行点击 |
||||||
|
icon: "cricle", //图例样式，可以自行查看样式选择 |
||||||
|
//图例文字颜色 |
||||||
|
textStyle: { |
||||||
|
color: "#ffff", |
||||||
|
fontSize: 16, //这里改字体大小 |
||||||
|
}, |
||||||
|
// left: "73%", |
||||||
|
left: "66%", |
||||||
|
top: "0", |
||||||
|
//图例距离饼图的距离 |
||||||
|
itemGap: 5, |
||||||
|
itemWidth: 10, |
||||||
|
itemHeight: 5, |
||||||
|
}, |
||||||
|
|
||||||
|
grid: { |
||||||
|
top: "4%", |
||||||
|
left: "3%", |
||||||
|
right: "4%", |
||||||
|
bottom: "5%", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: "category", |
||||||
|
//设置为true代表离零刻度间隔一段距离 |
||||||
|
boundaryGap: true, |
||||||
|
// 修饰刻度标签的颜色即x坐标数据 |
||||||
|
axisLabel: { |
||||||
|
// interval: 0, //强制显示所有x轴数据 |
||||||
|
// rotate: 30, //x轴坐标字体倾斜30度 |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, // 不显示坐标轴刻度线 |
||||||
|
}, |
||||||
|
// x坐标轴的颜色 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#e2e6f0", |
||||||
|
}, |
||||||
|
}, //x轴分割线 |
||||||
|
data: this.brokenTime, |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
min: 0, |
||||||
|
// max:20, |
||||||
|
// // // min:'dataMin', |
||||||
|
// // // max:'dataMax', |
||||||
|
// name: "kwh", // 第一个 y 轴的单位描述 |
||||||
|
// 设置 name 的样式 |
||||||
|
nameTextStyle: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
fontSize: 12, |
||||||
|
}, |
||||||
|
miniInterval: 5, |
||||||
|
type: "value", |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
// 显示y坐标轴 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", // 设置 y 轴线的颜色 |
||||||
|
}, |
||||||
|
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||||
|
}, |
||||||
|
//y轴分割线段数 |
||||||
|
// splitNumber: 10, |
||||||
|
// 修改y轴分割线的颜色 |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#1a3d62", // 设置分割线的颜色 |
||||||
|
type: "dashed", // 设置分割线为虚线 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "line", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
smooth: true, |
||||||
|
showSymbol: false, |
||||||
|
data: this.brokenData1, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#d48e17", //折线点的颜色 |
||||||
|
lineStyle: { |
||||||
|
color: "#d48e17", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
//线性渐变 |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [], |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.brokenInstanc.setOption(this.brokenOption, 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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.data-content { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: space-between; |
||||||
|
width: 100%; |
||||||
|
margin-top: 23px; |
||||||
|
.data-li { |
||||||
|
background-color: transparent; |
||||||
|
border-radius: 8px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
padding: 0.3rem; |
||||||
|
width: 31%; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 0.24rem; |
||||||
|
font-family: SourceHanSansCN-Regular; |
||||||
|
font-size: 0.16rem; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
.use-icon { |
||||||
|
width: 0.6rem; |
||||||
|
height: 0.6rem; |
||||||
|
} |
||||||
|
.use-text { |
||||||
|
width: 33%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: flex-start; |
||||||
|
color: #dbdbdb; |
||||||
|
.data-text { |
||||||
|
z-index: 11 !important; |
||||||
|
font-family: DIN-Bold; |
||||||
|
font-size: 0.24rem; |
||||||
|
margin-top: 0.05rem; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
.downText { |
||||||
|
color: #ff4027; |
||||||
|
z-index: 11 !important; |
||||||
|
font-family: DIN-Bold; |
||||||
|
font-size: 0.24rem; |
||||||
|
margin-top: 0.05rem; |
||||||
|
.el-icon-bottom { |
||||||
|
margin-right: 0.08rem; |
||||||
|
} |
||||||
|
} |
||||||
|
.upText { |
||||||
|
color: #2ff016; |
||||||
|
z-index: 11 !important; |
||||||
|
font-family: DIN-Bold; |
||||||
|
font-size: 0.24rem; |
||||||
|
margin-top: 0.05rem; |
||||||
|
.el-icon-bottom, |
||||||
|
.el-icon-top { |
||||||
|
margin-right: 0.08rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.type-img { |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
width: 3.17rem; |
||||||
|
height: 0.52rem; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
.type1 { |
||||||
|
border: 1px solid #e8aa13; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5)); |
||||||
|
} |
||||||
|
.type1::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.type2 { |
||||||
|
border: 1px solid #27a0f2; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5)); |
||||||
|
} |
||||||
|
.type2::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.type3 { |
||||||
|
border: 1px solid #1ad3ef; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5)); |
||||||
|
} |
||||||
|
.type3::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.type4 { |
||||||
|
border: 1px solid #11d47b; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5)); |
||||||
|
} |
||||||
|
.type4::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
.choice { |
||||||
|
margin: 20px; |
||||||
|
.mr20 { |
||||||
|
padding: 0.05rem 0.2rem; |
||||||
|
white-space: nowrap; |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
.charts { |
||||||
|
width: 100%; |
||||||
|
height: 300px; |
||||||
|
margin-bottom: 0.1rem; |
||||||
|
} |
||||||
|
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||||
|
@media (min-width: 2000px) { |
||||||
|
.condition { |
||||||
|
.condition-left { |
||||||
|
.years-div { |
||||||
|
.years-word { |
||||||
|
font-size: 0.14rem !important; |
||||||
|
margin: 0 0.05rem !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.time-label { |
||||||
|
font-size: 0.16rem !important; |
||||||
|
line-height: 0.07rem !important; |
||||||
|
margin-right: 0.12rem !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,711 @@ |
|||||||
|
<template> |
||||||
|
<div class="big-machine" v-loading="listLoading"> |
||||||
|
<div class="condition"> |
||||||
|
<div class="condition-left"> |
||||||
|
<el-select |
||||||
|
style="margin-right: 0.1rem" |
||||||
|
v-model="building" |
||||||
|
placeholder="请选择楼栋" |
||||||
|
clearable |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="(item, index) in builds" |
||||||
|
:key="index" |
||||||
|
:label="item.building_name" |
||||||
|
:value="item.id" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
<el-date-picker |
||||||
|
v-model="dayDate" |
||||||
|
type="date" |
||||||
|
value-format="yyyy-MM-dd" |
||||||
|
placeholder="选择日期" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div class="success-btn" style="margin: 0 0.12rem"> |
||||||
|
<el-button type="success" @click="findData">查询</el-button> |
||||||
|
</div> |
||||||
|
<div class="warning-btn"> |
||||||
|
<el-button type="warning" @click="goExport">导出</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="charts" ref="chart_ref"></div> |
||||||
|
<el-table |
||||||
|
:data="tableData" |
||||||
|
@row-click="handlerow" |
||||||
|
highlight-current-row |
||||||
|
height="500" |
||||||
|
ref="maintable" |
||||||
|
:cell-style="tableRowStyle" |
||||||
|
> |
||||||
|
<el-table-column prop="buildingName" label="楼栋名称"> </el-table-column> |
||||||
|
<el-table-column v-if="showDeviceName" prop="deviceName" label="设备名称"> |
||||||
|
</el-table-column> |
||||||
|
<el-table-column label="0点" align="center" prop="temp00" /> |
||||||
|
<el-table-column label="2点" align="center" prop="temp02" /> |
||||||
|
<el-table-column label="6点" align="center" prop="temp06" /> |
||||||
|
<el-table-column label="8点" align="center" prop="temp08" /> |
||||||
|
<el-table-column label="11点" align="center" prop="temp11" /> |
||||||
|
<el-table-column label="13点" align="center" prop="temp13" /> |
||||||
|
<el-table-column label="14点" align="center" prop="temp14" /> |
||||||
|
<el-table-column label="15点" align="center" prop="temp15" /> |
||||||
|
<el-table-column label="16点" align="center" prop="temp16" /> |
||||||
|
<el-table-column label="17点" align="center" prop="temp17" /> |
||||||
|
<el-table-column label="18点" align="center" prop="temp18" /> |
||||||
|
<el-table-column label="19点" align="center" prop="temp19" /> |
||||||
|
<el-table-column label="20点" align="center" prop="temp20" /> |
||||||
|
<el-table-column label="21点" align="center" prop="temp21" /> |
||||||
|
<el-table-column label="22点" align="center" prop="temp22" /> |
||||||
|
<el-table-column label="23点" align="center" prop="temp23" /> |
||||||
|
</el-table> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { formatDay } from "@/utils/datetime"; |
||||||
|
import { hotBuildList, hotWaterLevel } from "@/api/hotWater/energyAnalysis"; |
||||||
|
import * as echarts from "echarts"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
showDeviceName: false, //是否显示设备名称 |
||||||
|
listLoading: false, |
||||||
|
dayDate: [], //日值 |
||||||
|
dialogVisible: false, |
||||||
|
building: "", //选中的楼栋 |
||||||
|
builds: [], //楼栋列表 |
||||||
|
// 遮罩层 |
||||||
|
loading: false, |
||||||
|
// 总条数 |
||||||
|
total: 0, |
||||||
|
// 表格数据 |
||||||
|
tableData: [], |
||||||
|
// 查询参数 |
||||||
|
queryParams: { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10, |
||||||
|
startTime: "", |
||||||
|
endTime: "", |
||||||
|
}, |
||||||
|
brokenInstanc: null, |
||||||
|
brokenOption: {}, |
||||||
|
brokenData1: [], |
||||||
|
brokenTime: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
// 表格第一行高亮 |
||||||
|
watch: { |
||||||
|
// 请求后端才有效果 |
||||||
|
tableData: function () { |
||||||
|
this.$nextTick(function () { |
||||||
|
this.$refs.maintable.setCurrentRow(this.tableData[0]); |
||||||
|
}); |
||||||
|
}, |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// 在组件创建完成后，设置默认值 |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initializeTimeDate(); |
||||||
|
this.getBuildList(); |
||||||
|
this.getList(); |
||||||
|
this.initChart(); |
||||||
|
window.addEventListener("resize", this.screenAdapter); |
||||||
|
this.screenAdapter(); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//取消监听器 |
||||||
|
window.removeEventListener("resize", this.screenAdapter); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** 查询楼栋 */ |
||||||
|
getBuildList() { |
||||||
|
let data = { |
||||||
|
systemType: "1", |
||||||
|
}; |
||||||
|
hotBuildList(data).then((res) => { |
||||||
|
if (res.code == 200) { |
||||||
|
// 只需要保留热水的系统 |
||||||
|
console.log("楼栋返回值", res); |
||||||
|
this.builds = res.rows; |
||||||
|
// console.log("筛选后的新结果", this.builds); |
||||||
|
this.building = res.rows[0].id; |
||||||
|
this.getList(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 初始化时间 |
||||||
|
initializeTimeDate() { |
||||||
|
this.dayDate = formatDay(new Date()); // 更新 |
||||||
|
}, |
||||||
|
// 查询 |
||||||
|
findData() { |
||||||
|
this.getList(); |
||||||
|
}, |
||||||
|
/* 加入小手状态 */ |
||||||
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||||
|
if (row) { |
||||||
|
return "cursor:pointer;text-align:center"; |
||||||
|
} |
||||||
|
}, |
||||||
|
//请求数据 |
||||||
|
getList() { |
||||||
|
if (this.building == "所有") { |
||||||
|
this.showDeviceName = false; |
||||||
|
} else { |
||||||
|
this.showDeviceName = true; |
||||||
|
} |
||||||
|
let data = { |
||||||
|
buildingId: this.building, |
||||||
|
curDate: this.dayDate, |
||||||
|
}; |
||||||
|
console.log("查询数据参数", data); |
||||||
|
this.listLoading = true; |
||||||
|
// 请求数据 |
||||||
|
hotWaterLevel(data).then((res) => { |
||||||
|
if (res.code == 200 && res.rows.length > 0) { |
||||||
|
this.tableData = res.rows; |
||||||
|
// this.firstRow(); |
||||||
|
this.handlerow(this.tableData[0]); |
||||||
|
} else { |
||||||
|
this.tableData = []; |
||||||
|
} |
||||||
|
}); |
||||||
|
// Just to simulate the time of the request |
||||||
|
setTimeout(() => { |
||||||
|
this.listLoading = false; |
||||||
|
}, 1.0 * 1000); |
||||||
|
}, |
||||||
|
//查询单个热泵状态 点击表格的某一行 |
||||||
|
handlerow(row, event, column) { |
||||||
|
console.log("点击的行数据----", row); |
||||||
|
if (row) { |
||||||
|
const obj = Object.assign({}, row); |
||||||
|
// 先截取掉不需要的对象属性和值 |
||||||
|
delete obj.buildingId; |
||||||
|
delete obj.curDate; |
||||||
|
delete obj.deviceNum; |
||||||
|
delete obj.deviceName; |
||||||
|
delete obj.buildingName; |
||||||
|
//定义一个新数组 |
||||||
|
let newObj = {}; |
||||||
|
for (let key in obj) { |
||||||
|
if (obj[key]) { |
||||||
|
newObj[key] = obj[key]; |
||||||
|
} |
||||||
|
} |
||||||
|
// console.log("不含空的x轴数据", data7); |
||||||
|
const keysArr = Object.keys(newObj); // 获取对象所有属性名的数组 |
||||||
|
this.brokenTime = []; |
||||||
|
keysArr.forEach((item) => { |
||||||
|
if (item) { |
||||||
|
this.brokenTime.push(item.split("temp").join("") + ":00"); |
||||||
|
} |
||||||
|
}); |
||||||
|
const valuesArr = keysArr.map((key) => newObj[key]); // 将属性名对应的值提取出来存入一个新的数组中 |
||||||
|
// console.log("值", valuesArr); |
||||||
|
// console.log("坐标", this.brokenTime); |
||||||
|
this.brokenData1 = valuesArr; |
||||||
|
} else { |
||||||
|
this.brokenTime = []; |
||||||
|
this.brokenData1 = []; |
||||||
|
} |
||||||
|
this.renderingBroken(); |
||||||
|
}, |
||||||
|
//渲染 |
||||||
|
renderingBroken() { |
||||||
|
this.brokenOption.series[0].data = this.brokenData1; |
||||||
|
this.brokenOption.series[0].itemStyle.color = "#1f8dee"; |
||||||
|
this.brokenOption.series[0].areaStyle.color.colorStops = [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(31, 141, 238, 0.3)", // 0% 处的颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 0.8, |
||||||
|
color: "rgba(31, 141, 238,0)", // 100% 处的颜色 |
||||||
|
}, |
||||||
|
]; |
||||||
|
// 动态设置 tooltip 格式化函数 |
||||||
|
this.brokenOption.tooltip = { |
||||||
|
trigger: "axis", |
||||||
|
formatter: function (params) { |
||||||
|
// 获取当前数据点信息 |
||||||
|
const data = params[0]; |
||||||
|
const month = data.name; |
||||||
|
const value = data.value; |
||||||
|
return `${month}<br/>温度: ${value} ℃`; |
||||||
|
}, |
||||||
|
}; |
||||||
|
this.brokenOption.xAxis.data = this.brokenTime; |
||||||
|
this.brokenInstanc.setOption(this.brokenOption); |
||||||
|
}, |
||||||
|
// 导出 |
||||||
|
goExport() { |
||||||
|
if (this.tableData) { |
||||||
|
import("@/assets/excel/Export2Excel").then((excel) => { |
||||||
|
if (this.showDeviceName) { |
||||||
|
var tHeader = [ |
||||||
|
"楼栋名称", |
||||||
|
"设备名称", |
||||||
|
"0点", |
||||||
|
"02点", |
||||||
|
"06点", |
||||||
|
"8点", |
||||||
|
"11点", |
||||||
|
"13点", |
||||||
|
"14点", |
||||||
|
"15点", |
||||||
|
"16点", |
||||||
|
"17点", |
||||||
|
"18点", |
||||||
|
"19点", |
||||||
|
"20点", |
||||||
|
"21点", |
||||||
|
"22点", |
||||||
|
"23点", |
||||||
|
]; // 导出的excel表头名信息 |
||||||
|
var filterVal = [ |
||||||
|
"buildingName", |
||||||
|
"deviceName", |
||||||
|
"temp00", |
||||||
|
"temp02", |
||||||
|
"temp06", |
||||||
|
"temp08", |
||||||
|
"temp11", |
||||||
|
"temp13", |
||||||
|
"temp14", |
||||||
|
"temp15", |
||||||
|
"temp16", |
||||||
|
"temp17", |
||||||
|
"temp18", |
||||||
|
"temp19", |
||||||
|
"temp20", |
||||||
|
"temp21", |
||||||
|
"temp22", |
||||||
|
"temp23", |
||||||
|
]; // 导出的excel表头字段名，需要导出表格字段名 |
||||||
|
} else { |
||||||
|
var tHeader = [ |
||||||
|
"楼栋名称", |
||||||
|
"0点", |
||||||
|
"02点", |
||||||
|
"06点", |
||||||
|
"8点", |
||||||
|
"11点", |
||||||
|
"13点", |
||||||
|
"14点", |
||||||
|
"15点", |
||||||
|
"16点", |
||||||
|
"17点", |
||||||
|
"18点", |
||||||
|
"19点", |
||||||
|
"20点", |
||||||
|
"21点", |
||||||
|
"22点", |
||||||
|
"23点", |
||||||
|
]; // 导出的excel表头名信息 |
||||||
|
var filterVal = [ |
||||||
|
"buildingName", |
||||||
|
"temp00", |
||||||
|
"temp02", |
||||||
|
"temp06", |
||||||
|
"temp08", |
||||||
|
"temp11", |
||||||
|
"temp13", |
||||||
|
"temp14", |
||||||
|
"temp15", |
||||||
|
"temp16", |
||||||
|
"temp17", |
||||||
|
"temp18", |
||||||
|
"temp19", |
||||||
|
"temp20", |
||||||
|
"temp21", |
||||||
|
"temp22", |
||||||
|
"temp23", |
||||||
|
]; // 导出的excel表头字段名，需要导出表格字段名 |
||||||
|
} |
||||||
|
const data = this.formatJson(filterVal, this.tableData); |
||||||
|
const autoWidth = true; |
||||||
|
excel.export_json_to_excel({ |
||||||
|
header: tHeader, //表头 |
||||||
|
data, //数据 |
||||||
|
filename: "温度变化报表", //名称 |
||||||
|
autoWidth: true, //宽度自适应 |
||||||
|
}); |
||||||
|
}); |
||||||
|
this.$message({ |
||||||
|
type: "success", |
||||||
|
message: "导出成功!", |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$message.error("导出失败!"); |
||||||
|
} |
||||||
|
}, |
||||||
|
//格式转换,不需要改动 |
||||||
|
formatJson(filterVal, jsonData) { |
||||||
|
return jsonData.map((v) => |
||||||
|
filterVal.map((j) => { |
||||||
|
if (j === "installDate") { |
||||||
|
return format(v[j]); |
||||||
|
} else { |
||||||
|
return v[j]; |
||||||
|
} |
||||||
|
}) |
||||||
|
); |
||||||
|
}, |
||||||
|
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||||
|
screenAdapter() { |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||||
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||||
|
const adapterOption = {}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.brokenInstanc.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.brokenInstanc.resize(); |
||||||
|
}, |
||||||
|
//初始化chartInstance对象 |
||||||
|
initChart() { |
||||||
|
this.brokenInstanc = echarts.init(this.$refs.chart_ref); |
||||||
|
this.brokenOption = { |
||||||
|
tooltip: { |
||||||
|
trigger: "axis", |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
show: false, |
||||||
|
selectedMode: false, // 是否允许图例进行点击 |
||||||
|
icon: "cricle", //图例样式，可以自行查看样式选择 |
||||||
|
//图例文字颜色 |
||||||
|
textStyle: { |
||||||
|
color: "#ffff", |
||||||
|
fontSize: 16, //这里改字体大小 |
||||||
|
}, |
||||||
|
// left: "73%", |
||||||
|
left: "66%", |
||||||
|
top: "0", |
||||||
|
//图例距离饼图的距离 |
||||||
|
itemGap: 5, |
||||||
|
itemWidth: 10, |
||||||
|
itemHeight: 5, |
||||||
|
}, |
||||||
|
|
||||||
|
grid: { |
||||||
|
top: "4%", |
||||||
|
left: "3%", |
||||||
|
right: "4%", |
||||||
|
bottom: "5%", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: "category", |
||||||
|
//设置为true代表离零刻度间隔一段距离 |
||||||
|
boundaryGap: true, |
||||||
|
// 修饰刻度标签的颜色即x坐标数据 |
||||||
|
axisLabel: { |
||||||
|
// interval: 0, //强制显示所有x轴数据 |
||||||
|
// rotate: 30, //x轴坐标字体倾斜30度 |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, // 不显示坐标轴刻度线 |
||||||
|
}, |
||||||
|
// x坐标轴的颜色 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#e2e6f0", |
||||||
|
}, |
||||||
|
}, //x轴分割线 |
||||||
|
data: this.brokenTime, |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
min: 0, |
||||||
|
// max:20, |
||||||
|
// // // min:'dataMin', |
||||||
|
// // // max:'dataMax', |
||||||
|
// name: "kwh", // 第一个 y 轴的单位描述 |
||||||
|
// 设置 name 的样式 |
||||||
|
nameTextStyle: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
fontSize: 12, |
||||||
|
}, |
||||||
|
miniInterval: 5, |
||||||
|
type: "value", |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
// 显示y坐标轴 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", // 设置 y 轴线的颜色 |
||||||
|
}, |
||||||
|
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||||
|
}, |
||||||
|
//y轴分割线段数 |
||||||
|
// splitNumber: 10, |
||||||
|
// 修改y轴分割线的颜色 |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#1a3d62", // 设置分割线的颜色 |
||||||
|
type: "dashed", // 设置分割线为虚线 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "line", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
smooth: true, |
||||||
|
showSymbol: false, |
||||||
|
data: this.brokenData1, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#d48e17", //折线点的颜色 |
||||||
|
lineStyle: { |
||||||
|
color: "#d48e17", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
//线性渐变 |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [], |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.brokenInstanc.setOption(this.brokenOption, 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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.data-content { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: space-between; |
||||||
|
width: 100%; |
||||||
|
margin-top: 23px; |
||||||
|
.data-li { |
||||||
|
background-color: transparent; |
||||||
|
border-radius: 8px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
padding: 0.3rem; |
||||||
|
width: 31%; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 0.24rem; |
||||||
|
font-family: SourceHanSansCN-Regular; |
||||||
|
font-size: 0.16rem; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
.use-icon { |
||||||
|
width: 0.6rem; |
||||||
|
height: 0.6rem; |
||||||
|
} |
||||||
|
.use-text { |
||||||
|
width: 33%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: flex-start; |
||||||
|
color: #dbdbdb; |
||||||
|
.data-text { |
||||||
|
z-index: 11 !important; |
||||||
|
font-family: DIN-Bold; |
||||||
|
font-size: 0.24rem; |
||||||
|
margin-top: 0.05rem; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
.downText { |
||||||
|
color: #ff4027; |
||||||
|
z-index: 11 !important; |
||||||
|
font-family: DIN-Bold; |
||||||
|
font-size: 0.24rem; |
||||||
|
margin-top: 0.05rem; |
||||||
|
.el-icon-bottom { |
||||||
|
margin-right: 0.08rem; |
||||||
|
} |
||||||
|
} |
||||||
|
.upText { |
||||||
|
color: #2ff016; |
||||||
|
z-index: 11 !important; |
||||||
|
font-family: DIN-Bold; |
||||||
|
font-size: 0.24rem; |
||||||
|
margin-top: 0.05rem; |
||||||
|
.el-icon-bottom, |
||||||
|
.el-icon-top { |
||||||
|
margin-right: 0.08rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.type-img { |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
width: 3.17rem; |
||||||
|
height: 0.52rem; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
.type1 { |
||||||
|
border: 1px solid #e8aa13; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5)); |
||||||
|
} |
||||||
|
.type1::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.type2 { |
||||||
|
border: 1px solid #27a0f2; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5)); |
||||||
|
} |
||||||
|
.type2::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.type3 { |
||||||
|
border: 1px solid #1ad3ef; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5)); |
||||||
|
} |
||||||
|
.type3::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.type4 { |
||||||
|
border: 1px solid #11d47b; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5)); |
||||||
|
} |
||||||
|
.type4::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
.choice { |
||||||
|
margin: 20px; |
||||||
|
.mr20 { |
||||||
|
padding: 0.05rem 0.2rem; |
||||||
|
white-space: nowrap; |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
.charts { |
||||||
|
width: 100%; |
||||||
|
height: 300px; |
||||||
|
margin-bottom: 0.1rem; |
||||||
|
} |
||||||
|
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||||
|
@media (min-width: 2000px) { |
||||||
|
.condition { |
||||||
|
.condition-left { |
||||||
|
.years-div { |
||||||
|
.years-word { |
||||||
|
font-size: 0.14rem !important; |
||||||
|
margin: 0 0.05rem !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.time-label { |
||||||
|
font-size: 0.16rem !important; |
||||||
|
line-height: 0.07rem !important; |
||||||
|
margin-right: 0.12rem !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,94 @@ |
|||||||
|
<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"> |
||||||
|
<energy-report v-if="activeName === 'first'"></energy-report> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="温度变化表" name="second"> |
||||||
|
<tem-report v-if="activeName === 'second'"></tem-report> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="水位变化表" name="three"> |
||||||
|
<water-report v-if="activeName === 'three'"></water-report> |
||||||
|
</el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import EnergyReport from "./components/energyReport.vue"; |
||||||
|
import TemReport from "./components/temReport.vue"; |
||||||
|
import WaterReport from "./components/waterReport.vue"; |
||||||
|
|
||||||
|
export default { |
||||||
|
components: { EnergyReport, TemReport, WaterReport }, |
||||||
|
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,483 @@ |
|||||||
|
<template> |
||||||
|
<div class="big-machine" v-loading="listLoading"> |
||||||
|
<div class="condition"> |
||||||
|
<div class="condition-left"> |
||||||
|
<el-select |
||||||
|
style="margin-right: 0.1rem" |
||||||
|
v-model="building" |
||||||
|
placeholder="请选择楼栋" |
||||||
|
clearable |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="(item, index) in builds" |
||||||
|
:key="index" |
||||||
|
:label="item.building_name" |
||||||
|
:value="item.id" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
<el-date-picker |
||||||
|
v-model="dayDate" |
||||||
|
type="daterange" |
||||||
|
range-separator="至" |
||||||
|
value-format="yyyy-MM-dd" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
@change="dateChange" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div class="success-btn" style="margin: 0 0.12rem"> |
||||||
|
<el-button type="success" @click="findData">查询</el-button> |
||||||
|
</div> |
||||||
|
<div class="warning-btn"> |
||||||
|
<el-button type="warning" @click="exportData">导出</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table |
||||||
|
:data="postList" |
||||||
|
stripe |
||||||
|
:cell-style="tableRowStyle" |
||||||
|
highlight-current-row |
||||||
|
height="500" |
||||||
|
> |
||||||
|
<el-table-column |
||||||
|
type="index" |
||||||
|
:index="indexAdd" |
||||||
|
prop="number" |
||||||
|
label="序号" |
||||||
|
width="90" |
||||||
|
></el-table-column> |
||||||
|
<el-table-column label="所属楼栋" align="center" prop="buildingName" /> |
||||||
|
<el-table-column label="设备编号" align="center" prop="deviceNum" /> |
||||||
|
<el-table-column label="设备名称" align="center" prop="deviceName" /> |
||||||
|
<el-table-column label="抄表时间" align="center" prop="curTime" /> |
||||||
|
<el-table-column label="采集读数" align="center" prop="curValue" /> |
||||||
|
<el-table-column label="用量" align="center" prop="usedValue" /> |
||||||
|
<el-table-column label="倍率" align="center" prop="ratio" /> |
||||||
|
<el-table-column label="计算量" align="center" prop="calcValue" /> |
||||||
|
</el-table> |
||||||
|
|
||||||
|
<pagination |
||||||
|
v-show="total > 0" |
||||||
|
:total="total" |
||||||
|
:page.sync="queryParams.pageNum" |
||||||
|
:limit.sync="queryParams.pageSize" |
||||||
|
@pagination="getList" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { formatDay } from "@/utils/datetime"; |
||||||
|
import { hotBuildList } from "@/api/hotWater/energyAnalysis"; |
||||||
|
import { queryDeviceDatas } from "@/api/hotWater/energyQuery"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
listLoading: false, |
||||||
|
dayDate: [], //日值 |
||||||
|
dialogVisible: false, |
||||||
|
building: "", //选中的楼栋 |
||||||
|
builds: [], //楼栋列表 |
||||||
|
// 遮罩层 |
||||||
|
loading: false, |
||||||
|
// 总条数 |
||||||
|
total: 0, |
||||||
|
// 表格数据 |
||||||
|
postList: [], |
||||||
|
// 查询参数 |
||||||
|
queryParams: { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10, |
||||||
|
startTime: "", |
||||||
|
endTime: "", |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// 在组件创建完成后，设置默认值 |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initializeTimeDate(); |
||||||
|
this.getBuildList(); |
||||||
|
this.getList(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 选中日期事件 |
||||||
|
dateChange() { |
||||||
|
// console.log("打印时间", this.timeform.time1); |
||||||
|
if (!this.dayDate) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.dayDate = []; |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
/** 查询楼栋 */ |
||||||
|
getBuildList() { |
||||||
|
let data = { |
||||||
|
systemType: "1", |
||||||
|
}; |
||||||
|
hotBuildList(data).then((res) => { |
||||||
|
if (res.code == 200) { |
||||||
|
// 只需要保留热水的系统 |
||||||
|
console.log("楼栋返回值", res); |
||||||
|
this.builds = res.rows; |
||||||
|
// console.log("筛选后的新结果", this.builds); |
||||||
|
this.building = res.rows[0].id; |
||||||
|
this.getList(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 初始化时间 |
||||||
|
initializeTimeDate() { |
||||||
|
let date = new Date(); //获取新的时间 |
||||||
|
//获取当前年份,并且转为字符串 |
||||||
|
let year = date.getFullYear().toString(); |
||||||
|
//获取当前月份，因为月份是要从0开始，此处要加1， |
||||||
|
//使用三元表达式，判断是否小于10，如果是的话，就在字符串前面拼接'0' |
||||||
|
let month = |
||||||
|
date.getMonth() + 1 < 10 |
||||||
|
? "0" + (date.getMonth() + 1).toString() |
||||||
|
: (date.getMonth() + 1).toString(); |
||||||
|
//获取天，判断是否小于10，如果是的话，就在在字符串前面拼接'0' |
||||||
|
let day = |
||||||
|
date.getDate() < 10 |
||||||
|
? "0" + date.getDate().toString() |
||||||
|
: date.getDate().toString(); |
||||||
|
//字符串拼接，将开始时间和结束时间进行拼接 |
||||||
|
let start1 = year + "-" + month + "-01"; //当月第一天 |
||||||
|
let end1 = year + "-" + month + "-" + day; //当天 |
||||||
|
this.dayDate = [start1, end1]; // 更新 |
||||||
|
}, |
||||||
|
// 查询 |
||||||
|
findData() { |
||||||
|
this.queryParams.pageNum = 1; |
||||||
|
this.getList(); |
||||||
|
}, |
||||||
|
// 序号 |
||||||
|
indexAdd(index) { |
||||||
|
return ( |
||||||
|
index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize |
||||||
|
); |
||||||
|
}, |
||||||
|
//请求数据 |
||||||
|
getList() { |
||||||
|
if (this.dayDate.length == 0) { |
||||||
|
this.initializeTimeDate(); |
||||||
|
} |
||||||
|
let data = { |
||||||
|
pageNum: this.queryParams.pageNum, |
||||||
|
pageSize: this.queryParams.pageSize, |
||||||
|
startDate: this.dayDate[0], |
||||||
|
endDate: this.dayDate[1], |
||||||
|
buildingId: this.building, |
||||||
|
deviceType: "16", |
||||||
|
}; |
||||||
|
console.log("查询数据参数", data); |
||||||
|
this.listLoading = true; |
||||||
|
queryDeviceDatas(data).then((res) => { |
||||||
|
console.log("返回", res); |
||||||
|
if (res.code == 200) { |
||||||
|
this.postList = res.rows; |
||||||
|
this.total = res.total; |
||||||
|
} else { |
||||||
|
this.postList = []; |
||||||
|
this.total = 0; |
||||||
|
} |
||||||
|
}); |
||||||
|
// 请求数据 |
||||||
|
// Just to simulate the time of the request |
||||||
|
setTimeout(() => { |
||||||
|
this.listLoading = false; |
||||||
|
}, 1.0 * 1000); |
||||||
|
}, |
||||||
|
// 导出 |
||||||
|
exportData() { |
||||||
|
if (this.dayDate.length == 0) { |
||||||
|
this.initializeTimeDate(); |
||||||
|
} |
||||||
|
let data = { |
||||||
|
pageNum: this.queryParams.pageNum, |
||||||
|
pageSize: this.total, |
||||||
|
startDate: this.dayDate[0], |
||||||
|
endDate: this.dayDate[1], |
||||||
|
buildingId: this.building, |
||||||
|
deviceType: "16", |
||||||
|
}; |
||||||
|
console.log("查询数据参数", data); |
||||||
|
queryDeviceDatas(data).then((res) => { |
||||||
|
console.log("返回", res); |
||||||
|
if (res.code == 200) { |
||||||
|
import("@/assets/excel/Export2Excel").then((excel) => { |
||||||
|
var tHeader = [ |
||||||
|
"所属楼栋", |
||||||
|
"设备编号", |
||||||
|
"设备名称", |
||||||
|
"抄表时间", |
||||||
|
"采集读数", |
||||||
|
"用量", |
||||||
|
"倍率", |
||||||
|
"计算量", |
||||||
|
]; // 导出的excel表头名信息 改参数 |
||||||
|
var filterVal = [ |
||||||
|
"buildingName", |
||||||
|
"deviceNum", |
||||||
|
"deviceName", |
||||||
|
"curTime", |
||||||
|
"curValue", |
||||||
|
"usedValue", |
||||||
|
"ratio", |
||||||
|
"calcValue", |
||||||
|
]; |
||||||
|
const data = this.formatJson(filterVal, res.rows); |
||||||
|
const autoWidth = true; |
||||||
|
excel.export_json_to_excel({ |
||||||
|
header: tHeader, //表头 |
||||||
|
data, //数据 |
||||||
|
filename: "电表读数报表", //名称 |
||||||
|
autoWidth: true, //宽度自适应 |
||||||
|
}); |
||||||
|
this.$message({ |
||||||
|
type: "success", |
||||||
|
message: "导出成功!", |
||||||
|
}); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$message.error("导出失败!"); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
//格式转换,不需要改动 |
||||||
|
formatJson(filterVal, jsonData) { |
||||||
|
return jsonData.map((v) => |
||||||
|
filterVal.map((j) => { |
||||||
|
if (j === "installDate") { |
||||||
|
return format(v[j]); |
||||||
|
} else { |
||||||
|
return v[j]; |
||||||
|
} |
||||||
|
}) |
||||||
|
); |
||||||
|
}, |
||||||
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||||
|
if (columnIndex === 6 || columnIndex === 8) { |
||||||
|
return "color: #75d148;!important;text-align:center"; |
||||||
|
} |
||||||
|
// return "text-align:center"; |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.data-content { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: space-between; |
||||||
|
width: 100%; |
||||||
|
margin-top: 23px; |
||||||
|
.data-li { |
||||||
|
background-color: transparent; |
||||||
|
border-radius: 8px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
padding: 0.3rem; |
||||||
|
width: 31%; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 0.24rem; |
||||||
|
font-family: SourceHanSansCN-Regular; |
||||||
|
font-size: 0.16rem; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
.use-icon { |
||||||
|
width: 0.6rem; |
||||||
|
height: 0.6rem; |
||||||
|
} |
||||||
|
.use-text { |
||||||
|
width: 33%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: flex-start; |
||||||
|
color: #dbdbdb; |
||||||
|
.data-text { |
||||||
|
z-index: 11 !important; |
||||||
|
font-family: DIN-Bold; |
||||||
|
font-size: 0.24rem; |
||||||
|
margin-top: 0.05rem; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
.downText { |
||||||
|
color: #ff4027; |
||||||
|
z-index: 11 !important; |
||||||
|
font-family: DIN-Bold; |
||||||
|
font-size: 0.24rem; |
||||||
|
margin-top: 0.05rem; |
||||||
|
.el-icon-bottom { |
||||||
|
margin-right: 0.08rem; |
||||||
|
} |
||||||
|
} |
||||||
|
.upText { |
||||||
|
color: #2ff016; |
||||||
|
z-index: 11 !important; |
||||||
|
font-family: DIN-Bold; |
||||||
|
font-size: 0.24rem; |
||||||
|
margin-top: 0.05rem; |
||||||
|
.el-icon-bottom, |
||||||
|
.el-icon-top { |
||||||
|
margin-right: 0.08rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.type-img { |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
width: 3.17rem; |
||||||
|
height: 0.52rem; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
.type1 { |
||||||
|
border: 1px solid #e8aa13; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5)); |
||||||
|
} |
||||||
|
.type1::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.type2 { |
||||||
|
border: 1px solid #27a0f2; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5)); |
||||||
|
} |
||||||
|
.type2::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.type3 { |
||||||
|
border: 1px solid #1ad3ef; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5)); |
||||||
|
} |
||||||
|
.type3::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.type4 { |
||||||
|
border: 1px solid #11d47b; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5)); |
||||||
|
} |
||||||
|
.type4::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
.choice { |
||||||
|
margin: 20px; |
||||||
|
.mr20 { |
||||||
|
padding: 0.05rem 0.2rem; |
||||||
|
white-space: nowrap; |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
.charts { |
||||||
|
width: 100%; |
||||||
|
height: 300px; |
||||||
|
margin-bottom: 0.1rem; |
||||||
|
} |
||||||
|
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||||
|
@media (min-width: 2000px) { |
||||||
|
.condition { |
||||||
|
.condition-left { |
||||||
|
.years-div { |
||||||
|
.years-word { |
||||||
|
font-size: 0.14rem !important; |
||||||
|
margin: 0 0.05rem !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.time-label { |
||||||
|
font-size: 0.16rem !important; |
||||||
|
line-height: 0.07rem !important; |
||||||
|
margin-right: 0.12rem !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,568 @@ |
|||||||
|
<template> |
||||||
|
<div class="big-machine" v-loading="listLoading"> |
||||||
|
<div class="condition"> |
||||||
|
<div class="condition-left"> |
||||||
|
<el-select |
||||||
|
style="margin-right: 0.1rem" |
||||||
|
v-model="building" |
||||||
|
placeholder="请选择楼栋" |
||||||
|
clearable |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="(item, index) in builds" |
||||||
|
:key="index" |
||||||
|
:label="item.building_name" |
||||||
|
:value="item.id" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
<el-date-picker |
||||||
|
v-model="dayDate" |
||||||
|
type="date" |
||||||
|
value-format="yyyy-MM-dd" |
||||||
|
placeholder="选择日期" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div class="success-btn" style="margin: 0 0.12rem"> |
||||||
|
<el-button type="success" @click="findData">查询</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="choice"> |
||||||
|
<div |
||||||
|
class="mr20" |
||||||
|
v-for="(item, index) in timeData2" |
||||||
|
:key="index" |
||||||
|
@click="handleEnter(index, $event)" |
||||||
|
:class="{ timeStyle: currentIndex == index }" |
||||||
|
> |
||||||
|
{{ item.title }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="charts" ref="chart_ref"></div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { formatDay } from "@/utils/datetime"; |
||||||
|
import { hotBuildList } from "@/api/hotWater/energyAnalysis"; |
||||||
|
import { hotEnergyQuery } from "@/api/hotWater/overview"; |
||||||
|
import * as echarts from "echarts"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
listLoading: false, |
||||||
|
dayDate: [], //日值 |
||||||
|
dialogVisible: false, |
||||||
|
building: "", //选中的楼栋 |
||||||
|
builds: [], //楼栋列表 |
||||||
|
timeData2: [{ title: "用水量" }, { title: "用电量" }], |
||||||
|
currentIndex: 0, |
||||||
|
// 遮罩层 |
||||||
|
loading: false, |
||||||
|
// 查询参数 |
||||||
|
queryParams: { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10, |
||||||
|
startTime: "", |
||||||
|
endTime: "", |
||||||
|
}, |
||||||
|
brokenInstanc: null, |
||||||
|
brokenOption: {}, |
||||||
|
brokenData1: [], |
||||||
|
brokenTime: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// 在组件创建完成后，设置默认值 |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initializeTimeDate(); |
||||||
|
this.getBuildList(); |
||||||
|
this.initChart(); |
||||||
|
window.addEventListener("resize", this.screenAdapter); |
||||||
|
this.screenAdapter(); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//取消监听器 |
||||||
|
window.removeEventListener("resize", this.screenAdapter); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
/** 查询楼栋 */ |
||||||
|
getBuildList() { |
||||||
|
let data = { |
||||||
|
systemType: "1", |
||||||
|
}; |
||||||
|
hotBuildList(data).then((res) => { |
||||||
|
if (res.code == 200) { |
||||||
|
// 只需要保留热水的系统 |
||||||
|
console.log("楼栋返回值", res); |
||||||
|
this.builds = res.rows; |
||||||
|
// console.log("筛选后的新结果", this.builds); |
||||||
|
this.building = res.rows[0].id; |
||||||
|
this.getList(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 初始化时间 |
||||||
|
initializeTimeDate() { |
||||||
|
this.dayDate = formatDay(new Date()); // 更新 |
||||||
|
}, |
||||||
|
// 查询 |
||||||
|
findData() { |
||||||
|
this.getList(); |
||||||
|
}, |
||||||
|
//请求数据 |
||||||
|
getList() { |
||||||
|
let data = { |
||||||
|
type: 0, |
||||||
|
page: 1, |
||||||
|
limit: 31, |
||||||
|
// curDate:this.dayDate, |
||||||
|
startDate: this.dayDate, |
||||||
|
endDate: this.dayDate, |
||||||
|
buildingId: this.building, |
||||||
|
}; |
||||||
|
console.log("查询数据参数", data); |
||||||
|
this.listLoading = true; |
||||||
|
// 请求数据 |
||||||
|
hotEnergyQuery(data).then((res) => { |
||||||
|
console.log("图表返回的数据", res); |
||||||
|
this.brokenData1 = []; |
||||||
|
this.brokenData2 = []; |
||||||
|
this.brokenTime = []; |
||||||
|
if (res.code == 200 && res.rows.length > 0) { |
||||||
|
this.exportData = res.rows; |
||||||
|
res.rows.forEach((item) => { |
||||||
|
this.brokenData1.push(item.useHotWater); |
||||||
|
this.brokenData2.push(item.electValue); |
||||||
|
if (item.curDate.includes(" ")) { |
||||||
|
var oneStr = item.curDate.split(" "); |
||||||
|
this.brokenTime.push(oneStr[oneStr.length - 1] + ":00"); |
||||||
|
} |
||||||
|
}); |
||||||
|
// 对数组进行反转操作 |
||||||
|
this.brokenData1.reverse(); |
||||||
|
this.brokenData2.reverse(); |
||||||
|
this.brokenTime.reverse(); |
||||||
|
} else { |
||||||
|
this.brokenData1 = []; |
||||||
|
this.brokenData2 = []; |
||||||
|
this.brokenTime = []; |
||||||
|
} |
||||||
|
|
||||||
|
this.getChartData(); |
||||||
|
}); |
||||||
|
// Just to simulate the time of the request |
||||||
|
setTimeout(() => { |
||||||
|
this.listLoading = false; |
||||||
|
}, 1.0 * 1000); |
||||||
|
}, |
||||||
|
// |
||||||
|
getChartData() { |
||||||
|
if (this.currentIndex === 0) { |
||||||
|
this.brokenOption.series[0].data = this.brokenData1; |
||||||
|
this.brokenOption.series[0].itemStyle.color = "#1f8dee"; |
||||||
|
this.brokenOption.series[0].areaStyle.color.colorStops = [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(31, 141, 238, 0.3)", // 0% 处的颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 0.8, |
||||||
|
color: "rgba(31, 141, 238,0)", // 100% 处的颜色 |
||||||
|
}, |
||||||
|
]; |
||||||
|
} else if (this.currentIndex === 1) { |
||||||
|
this.brokenOption.series[0].data = this.brokenData2; |
||||||
|
this.brokenOption.series[0].itemStyle.color = "#1ab395"; |
||||||
|
this.brokenOption.series[0].areaStyle.color.colorStops = [ |
||||||
|
{ |
||||||
|
offset: 0, |
||||||
|
color: "rgba(26, 179, 149, 0.3)", // 0% 处的颜色 |
||||||
|
}, |
||||||
|
{ |
||||||
|
offset: 0.8, |
||||||
|
color: "rgba(26, 179, 149,0)", // 100% 处的颜色 |
||||||
|
}, |
||||||
|
]; |
||||||
|
} |
||||||
|
// 保存当前索引用于闭包 |
||||||
|
const currentIndex = this.currentIndex; |
||||||
|
// 动态设置 tooltip 格式化函数 |
||||||
|
this.brokenOption.tooltip = { |
||||||
|
trigger: "axis", |
||||||
|
formatter: function (params) { |
||||||
|
// 获取当前数据点信息 |
||||||
|
const data = params[0]; |
||||||
|
const month = data.name; |
||||||
|
const value = data.value; |
||||||
|
|
||||||
|
// 根据索引返回不同内容 |
||||||
|
if (currentIndex === 0) { |
||||||
|
return `${month}<br/>用水量: ${value} 吨`; |
||||||
|
} else if (currentIndex === 1) { |
||||||
|
return `${month}<br/>用电量: ${value} 度`; |
||||||
|
} |
||||||
|
}, |
||||||
|
}; |
||||||
|
this.brokenOption.xAxis.data = this.brokenTime; |
||||||
|
this.brokenInstanc.setOption(this.brokenOption); |
||||||
|
}, |
||||||
|
handleEnter(index) { |
||||||
|
this.currentIndex = index; |
||||||
|
this.getChartData(); |
||||||
|
}, |
||||||
|
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||||
|
screenAdapter() { |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||||
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||||
|
const adapterOption = {}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.brokenInstanc.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.brokenInstanc.resize(); |
||||||
|
}, |
||||||
|
//初始化chartInstance对象 |
||||||
|
initChart() { |
||||||
|
this.brokenInstanc = echarts.init(this.$refs.chart_ref); |
||||||
|
this.brokenOption = { |
||||||
|
tooltip: { |
||||||
|
trigger: "axis", |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
show: false, |
||||||
|
selectedMode: false, // 是否允许图例进行点击 |
||||||
|
icon: "cricle", //图例样式，可以自行查看样式选择 |
||||||
|
//图例文字颜色 |
||||||
|
textStyle: { |
||||||
|
color: "#ffff", |
||||||
|
fontSize: 16, //这里改字体大小 |
||||||
|
}, |
||||||
|
// left: "73%", |
||||||
|
left: "66%", |
||||||
|
top: "0", |
||||||
|
//图例距离饼图的距离 |
||||||
|
itemGap: 5, |
||||||
|
itemWidth: 10, |
||||||
|
itemHeight: 5, |
||||||
|
}, |
||||||
|
|
||||||
|
grid: { |
||||||
|
top: "4%", |
||||||
|
left: "3%", |
||||||
|
right: "4%", |
||||||
|
bottom: "5%", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: "category", |
||||||
|
//设置为true代表离零刻度间隔一段距离 |
||||||
|
boundaryGap: true, |
||||||
|
// 修饰刻度标签的颜色即x坐标数据 |
||||||
|
axisLabel: { |
||||||
|
// interval: 0, //强制显示所有x轴数据 |
||||||
|
// rotate: 30, //x轴坐标字体倾斜30度 |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, // 不显示坐标轴刻度线 |
||||||
|
}, |
||||||
|
// x坐标轴的颜色 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#e2e6f0", |
||||||
|
}, |
||||||
|
}, //x轴分割线 |
||||||
|
data: this.brokenTime, |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
min: 0, |
||||||
|
// max:20, |
||||||
|
// // // min:'dataMin', |
||||||
|
// // // max:'dataMax', |
||||||
|
// name: "kwh", // 第一个 y 轴的单位描述 |
||||||
|
// 设置 name 的样式 |
||||||
|
nameTextStyle: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
fontSize: 12, |
||||||
|
}, |
||||||
|
miniInterval: 5, |
||||||
|
type: "value", |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
// 显示y坐标轴 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", // 设置 y 轴线的颜色 |
||||||
|
}, |
||||||
|
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||||
|
}, |
||||||
|
//y轴分割线段数 |
||||||
|
// splitNumber: 10, |
||||||
|
// 修改y轴分割线的颜色 |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#1a3d62", // 设置分割线的颜色 |
||||||
|
type: "dashed", // 设置分割线为虚线 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "line", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
smooth: true, |
||||||
|
showSymbol: false, |
||||||
|
data: this.brokenData1, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#d48e17", //折线点的颜色 |
||||||
|
lineStyle: { |
||||||
|
color: "#d48e17", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
areaStyle: { |
||||||
|
color: { |
||||||
|
//线性渐变 |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 0, |
||||||
|
y2: 1, |
||||||
|
colorStops: [], |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.brokenInstanc.setOption(this.brokenOption, 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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.data-content { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: space-between; |
||||||
|
width: 100%; |
||||||
|
margin-top: 23px; |
||||||
|
.data-li { |
||||||
|
background-color: transparent; |
||||||
|
border-radius: 8px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
padding: 0.3rem; |
||||||
|
width: 31%; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 0.24rem; |
||||||
|
font-family: SourceHanSansCN-Regular; |
||||||
|
font-size: 0.16rem; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
.use-icon { |
||||||
|
width: 0.6rem; |
||||||
|
height: 0.6rem; |
||||||
|
} |
||||||
|
.use-text { |
||||||
|
width: 33%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: flex-start; |
||||||
|
color: #dbdbdb; |
||||||
|
.data-text { |
||||||
|
z-index: 11 !important; |
||||||
|
font-family: DIN-Bold; |
||||||
|
font-size: 0.24rem; |
||||||
|
margin-top: 0.05rem; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
.downText { |
||||||
|
color: #ff4027; |
||||||
|
z-index: 11 !important; |
||||||
|
font-family: DIN-Bold; |
||||||
|
font-size: 0.24rem; |
||||||
|
margin-top: 0.05rem; |
||||||
|
.el-icon-bottom { |
||||||
|
margin-right: 0.08rem; |
||||||
|
} |
||||||
|
} |
||||||
|
.upText { |
||||||
|
color: #2ff016; |
||||||
|
z-index: 11 !important; |
||||||
|
font-family: DIN-Bold; |
||||||
|
font-size: 0.24rem; |
||||||
|
margin-top: 0.05rem; |
||||||
|
.el-icon-bottom, |
||||||
|
.el-icon-top { |
||||||
|
margin-right: 0.08rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.type-img { |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
width: 3.17rem; |
||||||
|
height: 0.52rem; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
.type1 { |
||||||
|
border: 1px solid #e8aa13; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5)); |
||||||
|
} |
||||||
|
.type1::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.type2 { |
||||||
|
border: 1px solid #27a0f2; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5)); |
||||||
|
} |
||||||
|
.type2::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.type3 { |
||||||
|
border: 1px solid #1ad3ef; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5)); |
||||||
|
} |
||||||
|
.type3::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.type4 { |
||||||
|
border: 1px solid #11d47b; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5)); |
||||||
|
} |
||||||
|
.type4::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
.choice { |
||||||
|
margin: 20px; |
||||||
|
.mr20 { |
||||||
|
padding: 0.05rem 0.2rem; |
||||||
|
white-space: nowrap; |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
.charts { |
||||||
|
width: 100%; |
||||||
|
height: 700px; |
||||||
|
margin-bottom: 0.1rem; |
||||||
|
} |
||||||
|
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||||
|
@media (min-width: 2000px) { |
||||||
|
.condition { |
||||||
|
.condition-left { |
||||||
|
.years-div { |
||||||
|
.years-word { |
||||||
|
font-size: 0.14rem !important; |
||||||
|
margin: 0 0.05rem !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.time-label { |
||||||
|
font-size: 0.16rem !important; |
||||||
|
line-height: 0.07rem !important; |
||||||
|
margin-right: 0.12rem !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,483 @@ |
|||||||
|
<template> |
||||||
|
<div class="big-machine" v-loading="listLoading"> |
||||||
|
<div class="condition"> |
||||||
|
<div class="condition-left"> |
||||||
|
<el-select |
||||||
|
style="margin-right: 0.1rem" |
||||||
|
v-model="building" |
||||||
|
placeholder="请选择楼栋" |
||||||
|
clearable |
||||||
|
> |
||||||
|
<el-option |
||||||
|
v-for="(item, index) in builds" |
||||||
|
:key="index" |
||||||
|
:label="item.building_name" |
||||||
|
:value="item.id" |
||||||
|
/> |
||||||
|
</el-select> |
||||||
|
<el-date-picker |
||||||
|
v-model="dayDate" |
||||||
|
type="daterange" |
||||||
|
range-separator="至" |
||||||
|
value-format="yyyy-MM-dd" |
||||||
|
start-placeholder="开始日期" |
||||||
|
end-placeholder="结束日期" |
||||||
|
@change="dateChange" |
||||||
|
> |
||||||
|
</el-date-picker> |
||||||
|
<div class="success-btn" style="margin: 0 0.12rem"> |
||||||
|
<el-button type="success" @click="findData">查询</el-button> |
||||||
|
</div> |
||||||
|
<div class="warning-btn"> |
||||||
|
<el-button type="warning" @click="exportData">导出</el-button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<el-table |
||||||
|
:data="postList" |
||||||
|
stripe |
||||||
|
:cell-style="tableRowStyle" |
||||||
|
highlight-current-row |
||||||
|
height="500" |
||||||
|
> |
||||||
|
<el-table-column |
||||||
|
type="index" |
||||||
|
:index="indexAdd" |
||||||
|
prop="number" |
||||||
|
label="序号" |
||||||
|
width="90" |
||||||
|
></el-table-column> |
||||||
|
<el-table-column label="所属楼栋" align="center" prop="buildingName" /> |
||||||
|
<el-table-column label="设备编号" align="center" prop="deviceNum" /> |
||||||
|
<el-table-column label="设备名称" align="center" prop="deviceName" /> |
||||||
|
<el-table-column label="抄表时间" align="center" prop="curTime" /> |
||||||
|
<el-table-column label="采集读数" align="center" prop="curValue" /> |
||||||
|
<el-table-column label="用量" align="center" prop="usedValue" /> |
||||||
|
<el-table-column label="倍率" align="center" prop="ratio" /> |
||||||
|
<el-table-column label="计算量" align="center" prop="calcValue" /> |
||||||
|
</el-table> |
||||||
|
|
||||||
|
<pagination |
||||||
|
v-show="total > 0" |
||||||
|
:total="total" |
||||||
|
:page.sync="queryParams.pageNum" |
||||||
|
:limit.sync="queryParams.pageSize" |
||||||
|
@pagination="getList" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import { formatDay } from "@/utils/datetime"; |
||||||
|
import { hotBuildList } from "@/api/hotWater/energyAnalysis"; |
||||||
|
import { queryDeviceDatas } from "@/api/hotWater/energyQuery"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
listLoading: false, |
||||||
|
dayDate: [], //日值 |
||||||
|
dialogVisible: false, |
||||||
|
building: "", //选中的楼栋 |
||||||
|
builds: [], //楼栋列表 |
||||||
|
// 遮罩层 |
||||||
|
loading: false, |
||||||
|
// 总条数 |
||||||
|
total: 0, |
||||||
|
// 表格数据 |
||||||
|
postList: [], |
||||||
|
// 查询参数 |
||||||
|
queryParams: { |
||||||
|
pageNum: 1, |
||||||
|
pageSize: 10, |
||||||
|
startTime: "", |
||||||
|
endTime: "", |
||||||
|
}, |
||||||
|
}; |
||||||
|
}, |
||||||
|
created() { |
||||||
|
// 在组件创建完成后，设置默认值 |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initializeTimeDate(); |
||||||
|
this.getBuildList(); |
||||||
|
this.getList(); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 选中日期事件 |
||||||
|
dateChange() { |
||||||
|
// console.log("打印时间", this.timeform.time1); |
||||||
|
if (!this.dayDate) { |
||||||
|
this.$nextTick(() => { |
||||||
|
this.dayDate = []; |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
/** 查询楼栋 */ |
||||||
|
getBuildList() { |
||||||
|
let data = { |
||||||
|
systemType: "1", |
||||||
|
}; |
||||||
|
hotBuildList(data).then((res) => { |
||||||
|
if (res.code == 200) { |
||||||
|
// 只需要保留热水的系统 |
||||||
|
console.log("楼栋返回值", res); |
||||||
|
this.builds = res.rows; |
||||||
|
// console.log("筛选后的新结果", this.builds); |
||||||
|
this.building = res.rows[0].id; |
||||||
|
this.getList(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
// 初始化时间 |
||||||
|
initializeTimeDate() { |
||||||
|
let date = new Date(); //获取新的时间 |
||||||
|
//获取当前年份,并且转为字符串 |
||||||
|
let year = date.getFullYear().toString(); |
||||||
|
//获取当前月份，因为月份是要从0开始，此处要加1， |
||||||
|
//使用三元表达式，判断是否小于10，如果是的话，就在字符串前面拼接'0' |
||||||
|
let month = |
||||||
|
date.getMonth() + 1 < 10 |
||||||
|
? "0" + (date.getMonth() + 1).toString() |
||||||
|
: (date.getMonth() + 1).toString(); |
||||||
|
//获取天，判断是否小于10，如果是的话，就在在字符串前面拼接'0' |
||||||
|
let day = |
||||||
|
date.getDate() < 10 |
||||||
|
? "0" + date.getDate().toString() |
||||||
|
: date.getDate().toString(); |
||||||
|
//字符串拼接，将开始时间和结束时间进行拼接 |
||||||
|
let start1 = year + "-" + month + "-01"; //当月第一天 |
||||||
|
let end1 = year + "-" + month + "-" + day; //当天 |
||||||
|
this.dayDate = [start1, end1]; // 更新 |
||||||
|
}, |
||||||
|
// 查询 |
||||||
|
findData() { |
||||||
|
this.queryParams.pageNum = 1; |
||||||
|
this.getList(); |
||||||
|
}, |
||||||
|
// 序号 |
||||||
|
indexAdd(index) { |
||||||
|
return ( |
||||||
|
index + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize |
||||||
|
); |
||||||
|
}, |
||||||
|
//请求数据 |
||||||
|
getList() { |
||||||
|
if (this.dayDate.length == 0) { |
||||||
|
this.initializeTimeDate(); |
||||||
|
} |
||||||
|
let data = { |
||||||
|
pageNum: this.queryParams.pageNum, |
||||||
|
pageSize: this.queryParams.pageSize, |
||||||
|
startDate: this.dayDate[0], |
||||||
|
endDate: this.dayDate[1], |
||||||
|
buildingId: this.building, |
||||||
|
deviceType: "18", |
||||||
|
}; |
||||||
|
console.log("查询数据参数", data); |
||||||
|
this.listLoading = true; |
||||||
|
queryDeviceDatas(data).then((res) => { |
||||||
|
console.log("返回", res); |
||||||
|
if (res.code == 200) { |
||||||
|
this.postList = res.rows; |
||||||
|
this.total = res.total; |
||||||
|
} else { |
||||||
|
this.postList = []; |
||||||
|
this.total = 0; |
||||||
|
} |
||||||
|
}); |
||||||
|
// 请求数据 |
||||||
|
// Just to simulate the time of the request |
||||||
|
setTimeout(() => { |
||||||
|
this.listLoading = false; |
||||||
|
}, 1.0 * 1000); |
||||||
|
}, |
||||||
|
// 导出 |
||||||
|
exportData() { |
||||||
|
if (this.dayDate.length == 0) { |
||||||
|
this.initializeTimeDate(); |
||||||
|
} |
||||||
|
let data = { |
||||||
|
pageNum: this.queryParams.pageNum, |
||||||
|
pageSize: this.total, |
||||||
|
startDate: this.dayDate[0], |
||||||
|
endDate: this.dayDate[1], |
||||||
|
buildingId: this.building, |
||||||
|
deviceType: "18", |
||||||
|
}; |
||||||
|
console.log("查询数据参数", data); |
||||||
|
queryDeviceDatas(data).then((res) => { |
||||||
|
console.log("返回", res); |
||||||
|
if (res.code == 200) { |
||||||
|
import("@/assets/excel/Export2Excel").then((excel) => { |
||||||
|
var tHeader = [ |
||||||
|
"所属楼栋", |
||||||
|
"设备编号", |
||||||
|
"设备名称", |
||||||
|
"抄表时间", |
||||||
|
"采集读数", |
||||||
|
"用量", |
||||||
|
"倍率", |
||||||
|
"计算量", |
||||||
|
]; // 导出的excel表头名信息 改参数 |
||||||
|
var filterVal = [ |
||||||
|
"buildingName", |
||||||
|
"deviceNum", |
||||||
|
"deviceName", |
||||||
|
"curTime", |
||||||
|
"curValue", |
||||||
|
"usedValue", |
||||||
|
"ratio", |
||||||
|
"calcValue", |
||||||
|
]; |
||||||
|
const data = this.formatJson(filterVal, res.rows); |
||||||
|
const autoWidth = true; |
||||||
|
excel.export_json_to_excel({ |
||||||
|
header: tHeader, //表头 |
||||||
|
data, //数据 |
||||||
|
filename: "水表读数报表", //名称 |
||||||
|
autoWidth: true, //宽度自适应 |
||||||
|
}); |
||||||
|
this.$message({ |
||||||
|
type: "success", |
||||||
|
message: "导出成功!", |
||||||
|
}); |
||||||
|
}); |
||||||
|
} else { |
||||||
|
this.$message.error("导出失败!"); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
//格式转换,不需要改动 |
||||||
|
formatJson(filterVal, jsonData) { |
||||||
|
return jsonData.map((v) => |
||||||
|
filterVal.map((j) => { |
||||||
|
if (j === "installDate") { |
||||||
|
return format(v[j]); |
||||||
|
} else { |
||||||
|
return v[j]; |
||||||
|
} |
||||||
|
}) |
||||||
|
); |
||||||
|
}, |
||||||
|
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||||
|
if (columnIndex === 6 || columnIndex === 8) { |
||||||
|
return "color: #75d148;!important;text-align:center"; |
||||||
|
} |
||||||
|
// return "text-align:center"; |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</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; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.data-content { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
flex-wrap: wrap; |
||||||
|
justify-content: space-between; |
||||||
|
width: 100%; |
||||||
|
margin-top: 23px; |
||||||
|
.data-li { |
||||||
|
background-color: transparent; |
||||||
|
border-radius: 8px; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
padding: 0.3rem; |
||||||
|
width: 31%; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 0.24rem; |
||||||
|
font-family: SourceHanSansCN-Regular; |
||||||
|
font-size: 0.16rem; |
||||||
|
position: relative; |
||||||
|
overflow: hidden; |
||||||
|
.use-icon { |
||||||
|
width: 0.6rem; |
||||||
|
height: 0.6rem; |
||||||
|
} |
||||||
|
.use-text { |
||||||
|
width: 33%; |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: flex-start; |
||||||
|
color: #dbdbdb; |
||||||
|
.data-text { |
||||||
|
z-index: 11 !important; |
||||||
|
font-family: DIN-Bold; |
||||||
|
font-size: 0.24rem; |
||||||
|
margin-top: 0.05rem; |
||||||
|
color: #ffffff; |
||||||
|
} |
||||||
|
.downText { |
||||||
|
color: #ff4027; |
||||||
|
z-index: 11 !important; |
||||||
|
font-family: DIN-Bold; |
||||||
|
font-size: 0.24rem; |
||||||
|
margin-top: 0.05rem; |
||||||
|
.el-icon-bottom { |
||||||
|
margin-right: 0.08rem; |
||||||
|
} |
||||||
|
} |
||||||
|
.upText { |
||||||
|
color: #2ff016; |
||||||
|
z-index: 11 !important; |
||||||
|
font-family: DIN-Bold; |
||||||
|
font-size: 0.24rem; |
||||||
|
margin-top: 0.05rem; |
||||||
|
.el-icon-bottom, |
||||||
|
.el-icon-top { |
||||||
|
margin-right: 0.08rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.type-img { |
||||||
|
position: absolute; |
||||||
|
bottom: 0; |
||||||
|
width: 3.17rem; |
||||||
|
height: 0.52rem; |
||||||
|
z-index: 10; |
||||||
|
} |
||||||
|
.type1 { |
||||||
|
border: 1px solid #e8aa13; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(26, 56, 65, 0.5), rgba(184, 196, 51, 0.5)); |
||||||
|
} |
||||||
|
.type1::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(243, 166, 23, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.type2 { |
||||||
|
border: 1px solid #27a0f2; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(2, 43, 88, 0.5), rgba(8, 96, 179, 0.5)); |
||||||
|
} |
||||||
|
.type2::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(28, 128, 241, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.type3 { |
||||||
|
border: 1px solid #1ad3ef; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(2, 50, 89, 0.5), rgba(17, 145, 151, 0.5)); |
||||||
|
} |
||||||
|
.type3::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(117, 242, 248, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
.type4 { |
||||||
|
border: 1px solid #11d47b; |
||||||
|
border-radius: 10px; |
||||||
|
/* 设置渐变背景 */ |
||||||
|
background: linear-gradient(rgba(2, 57, 82, 0.5), rgba(5, 91, 90, 0.5)); |
||||||
|
} |
||||||
|
.type4::after { |
||||||
|
content: ""; |
||||||
|
width: 100%; |
||||||
|
height: 90%; |
||||||
|
box-shadow: 0 0 30px 40px rgba(115, 245, 176, 0.3); |
||||||
|
border-radius: 50%; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
position: absolute; |
||||||
|
bottom: -100% !important; |
||||||
|
z-index: 1; |
||||||
|
} |
||||||
|
} |
||||||
|
.choice { |
||||||
|
margin: 20px; |
||||||
|
.mr20 { |
||||||
|
padding: 0.05rem 0.2rem; |
||||||
|
white-space: nowrap; |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
.charts { |
||||||
|
width: 100%; |
||||||
|
height: 300px; |
||||||
|
margin-bottom: 0.1rem; |
||||||
|
} |
||||||
|
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||||
|
@media (min-width: 2000px) { |
||||||
|
.condition { |
||||||
|
.condition-left { |
||||||
|
.years-div { |
||||||
|
.years-word { |
||||||
|
font-size: 0.14rem !important; |
||||||
|
margin: 0 0.05rem !important; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.time-label { |
||||||
|
font-size: 0.16rem !important; |
||||||
|
line-height: 0.07rem !important; |
||||||
|
margin-right: 0.12rem !important; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,94 @@ |
|||||||
|
<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"> |
||||||
|
<energy v-if="activeName === 'first'"></energy> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="水表读数" name="second"> |
||||||
|
<water-reading v-if="activeName === 'second'"></water-reading> |
||||||
|
</el-tab-pane> |
||||||
|
<el-tab-pane label="电表读数" name="three"> |
||||||
|
<elect-reading v-if="activeName === 'three'"></elect-reading> |
||||||
|
</el-tab-pane> |
||||||
|
</el-tabs> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import ElectReading from "./components/electReading.vue"; |
||||||
|
import WaterReading from "./components/waterReading.vue"; |
||||||
|
import Energy from "./components/energy.vue"; |
||||||
|
|
||||||
|
export default { |
||||||
|
components: { Energy, ElectReading, WaterReading }, |
||||||
|
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,827 @@ |
|||||||
|
<template> |
||||||
|
<div class="app-container" v-loading="loading"> |
||||||
|
<div class="overview-top"> |
||||||
|
<div class="overview-top-left"> |
||||||
|
<div class="special-div"> |
||||||
|
<div class="special-top"> |
||||||
|
<div class="special-title">项目概况</div> |
||||||
|
</div> |
||||||
|
<div class="overview-data"> |
||||||
|
<div class="overview-data-li"> |
||||||
|
<img |
||||||
|
class="overview-img" |
||||||
|
src="../../../assets/images/overview1.png" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<div class="overview-num">{{ useHotWater }}</div> |
||||||
|
<div class="overview-title">昨日用水量(吨)</div> |
||||||
|
</div> |
||||||
|
<div class="overview-data-li"> |
||||||
|
<img |
||||||
|
class="overview-img" |
||||||
|
src="../../../assets/images/overview2.png" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<div class="overview-num">{{ electValue }}</div> |
||||||
|
<div class="overview-title">昨日用电量(度)</div> |
||||||
|
</div> |
||||||
|
<div class="overview-data-li"> |
||||||
|
<img |
||||||
|
class="overview-img" |
||||||
|
src="../../../assets/images/overview3.png" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<div class="overview-num">{{ electWater }}</div> |
||||||
|
<div class="overview-title">昨日单耗(度/吨)</div> |
||||||
|
</div> |
||||||
|
<div class="overview-data-li"> |
||||||
|
<img |
||||||
|
class="overview-img" |
||||||
|
src="../../../assets/images/overview4.png" |
||||||
|
alt="" |
||||||
|
/> |
||||||
|
<div class="overview-num">{{ allData }}</div> |
||||||
|
<div class="overview-title">通讯设备设备总数(台)</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="overview-top-right"> |
||||||
|
<div class="special-div"> |
||||||
|
<div class="special-top"> |
||||||
|
<div class="special-title">热泵运行状态</div> |
||||||
|
</div> |
||||||
|
<div class="pump-charts" ref="pumpChart_ref"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="overview-bottom"> |
||||||
|
<div class="overview-top-left"> |
||||||
|
<div class="special-div"> |
||||||
|
<div class="special-top"> |
||||||
|
<div class="special-title">当月数据统计</div> |
||||||
|
</div> |
||||||
|
<div class="choice"> |
||||||
|
<div |
||||||
|
class="mr20" |
||||||
|
v-for="(item, index) in timeData2" |
||||||
|
:key="index" |
||||||
|
@click="handleEnter(index, $event)" |
||||||
|
:class="{ timeStyle: currentIndex == index }" |
||||||
|
> |
||||||
|
{{ item.title }} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="brokenEcharts" ref="analyse_ref"></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
<script> |
||||||
|
import * as echarts from "echarts"; |
||||||
|
import { getDay } from "@/utils/datetime"; |
||||||
|
import { deviceState, hotEnergyQuery } from "@/api/hotWater/overview"; |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
electWater: "", |
||||||
|
electValue: "", |
||||||
|
useHotWater: "", |
||||||
|
loading: false, |
||||||
|
chartInstance: null, |
||||||
|
option: {}, |
||||||
|
chartData1: "", |
||||||
|
chartData2: "", |
||||||
|
allData: "", |
||||||
|
|
||||||
|
timeData2: [{ title: "用水量" }, { title: "用电量" }, { title: "单耗" }], |
||||||
|
currentIndex: 0, |
||||||
|
brokenOption: "", |
||||||
|
brokenInstanc: null, |
||||||
|
brokenData1: [], |
||||||
|
brokenData2: [], |
||||||
|
brokenData3: [], |
||||||
|
brokenTime: [], |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.initChart(); |
||||||
|
this.initChart2(); |
||||||
|
this.getTableData(); |
||||||
|
window.addEventListener("resize", this.screenAdapter); |
||||||
|
window.addEventListener("resize", this.screenAdapter2); |
||||||
|
this.screenAdapter(); |
||||||
|
// this.screenAdapter2(); |
||||||
|
this.pumpEchartsData(); |
||||||
|
}, |
||||||
|
destroyed() { |
||||||
|
//取消监听器 |
||||||
|
window.removeEventListener("resize", this.screenAdapter); |
||||||
|
window.removeEventListener("resize", this.screenAdapter2); |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
// 饼图自适应 |
||||||
|
screenAdapter() { |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = this.$refs.pumpChart_ref.offsetWidth / 30; |
||||||
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||||
|
const adapterOption = { |
||||||
|
title: { |
||||||
|
subtextStyle: { |
||||||
|
fontSize: titleFontSize, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.chartInstance.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.chartInstance.resize(); |
||||||
|
}, |
||||||
|
|
||||||
|
// 获取热泵运行状态 |
||||||
|
pumpEchartsData() { |
||||||
|
let data = { |
||||||
|
systemType: 1, |
||||||
|
}; |
||||||
|
deviceState(data).then((res) => { |
||||||
|
if (res.rows) { |
||||||
|
console.log("进行赋值", res.rows); |
||||||
|
this.chartData1 = res.rows[0].pumpOnline; |
||||||
|
this.chartData2 = parseInt( |
||||||
|
res.rows[0].pumpNum - res.rows[0].pumpOnline |
||||||
|
); |
||||||
|
this.allData = res.rows[0].pumpNum; |
||||||
|
const titleFontSize = |
||||||
|
(this.$refs.pumpChart_ref.offsetWidth / 100) * 2; |
||||||
|
const colorList = ["#ffe21e", "#08c8ff"]; // 提取颜色列表 |
||||||
|
const adapterOption = { |
||||||
|
tooltip: { |
||||||
|
trigger: "item", |
||||||
|
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||||
|
}, |
||||||
|
//环形图中间文字 |
||||||
|
title: { |
||||||
|
subtext: this.allData, |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
itemWidth: titleFontSize, |
||||||
|
itemHeight: titleFontSize, |
||||||
|
itemGap: titleFontSize * 2, |
||||||
|
formatter: function (name) { |
||||||
|
var arr = []; |
||||||
|
let data = adapterOption.series[0].data; |
||||||
|
var index = 0; |
||||||
|
var total = 0; |
||||||
|
for (var i = 0; i < data.length; i++) { |
||||||
|
total += data[i].value; |
||||||
|
if (data[i].name == name) { |
||||||
|
index = i; |
||||||
|
} |
||||||
|
} |
||||||
|
arr.push( |
||||||
|
"{name|" + name + "}", |
||||||
|
"{text|" + " " + ":" + " " + "}", |
||||||
|
"{value|" + data[index].value + "}", |
||||||
|
"{text|" + " " + "台" + "}" |
||||||
|
); |
||||||
|
return arr.join(""); |
||||||
|
}, |
||||||
|
textStyle: { |
||||||
|
color: function (name) { |
||||||
|
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
||||||
|
const index = dataSeries.findIndex( |
||||||
|
(item) => item.name === name |
||||||
|
); |
||||||
|
const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表 |
||||||
|
return colorList[index]; |
||||||
|
}, |
||||||
|
rich: { |
||||||
|
name: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 1.6, |
||||||
|
}, |
||||||
|
text: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 1.6, |
||||||
|
}, |
||||||
|
value: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 1.6, |
||||||
|
// color: function (params) { |
||||||
|
// let data = adapterOption.series[1].data; |
||||||
|
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||||
|
// }, |
||||||
|
}, |
||||||
|
percentage: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 2, |
||||||
|
// color: function (params) { |
||||||
|
// let data = adapterOption.series[1].data; |
||||||
|
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||||
|
// }, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "温度监测:", |
||||||
|
data: [ |
||||||
|
{ value: this.chartData1, name: "运行" }, |
||||||
|
{ value: this.chartData2, name: "不运行" }, |
||||||
|
], |
||||||
|
itemStyle: { |
||||||
|
color: function (params) { |
||||||
|
var colorList = ["#2df499", "#08c8ff"]; |
||||||
|
return colorList[params.dataIndex]; |
||||||
|
}, |
||||||
|
// borderWidth: 5, |
||||||
|
borderColor: "#002a56", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
data: [ |
||||||
|
{ value: this.chartData1, name: "运行" }, |
||||||
|
{ value: this.chartData2, name: "不运行" }, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
this.chartInstance.setOption(adapterOption); |
||||||
|
this.chartInstance.resize(); |
||||||
|
} else { |
||||||
|
this.allData = 0; |
||||||
|
const titleFontSize = |
||||||
|
(this.$refs.pumpChart_ref.offsetWidth / 100) * 2; |
||||||
|
const adapterOption = { |
||||||
|
tooltip: { |
||||||
|
trigger: "item", |
||||||
|
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||||
|
}, |
||||||
|
//环形图中间文字 |
||||||
|
title: { |
||||||
|
subtext: 0, |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
itemWidth: titleFontSize, |
||||||
|
itemHeight: titleFontSize, |
||||||
|
itemGap: titleFontSize * 2, |
||||||
|
formatter: function (name) { |
||||||
|
var arr = []; |
||||||
|
let data = adapterOption.series[0].data; |
||||||
|
var index = 0; |
||||||
|
var total = 0; |
||||||
|
for (var i = 0; i < data.length; i++) { |
||||||
|
total += data[i].value; |
||||||
|
if (data[i].name == name) { |
||||||
|
index = i; |
||||||
|
} |
||||||
|
} |
||||||
|
arr.push( |
||||||
|
"{name|" + name + "}", |
||||||
|
"{text|" + " " + ":" + " " + "}", |
||||||
|
"{value|" + data[index].value + "}", |
||||||
|
"{text|" + " " + "台" + "}" |
||||||
|
); |
||||||
|
return arr.join(""); |
||||||
|
}, |
||||||
|
textStyle: { |
||||||
|
color: function (name) { |
||||||
|
const dataSeries = adapterOption.series[1].data; // 数据圆的data |
||||||
|
const index = dataSeries.findIndex( |
||||||
|
(item) => item.name === name |
||||||
|
); |
||||||
|
const colorList = ["#2df499", "#08c8ff"]; // 数据圆的颜色列表 |
||||||
|
return colorList[index]; |
||||||
|
}, |
||||||
|
rich: { |
||||||
|
name: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 1.6, |
||||||
|
}, |
||||||
|
text: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 1.6, |
||||||
|
}, |
||||||
|
value: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 1.6, |
||||||
|
// color: function (params) { |
||||||
|
// let data = adapterOption.series[1].data; |
||||||
|
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||||
|
// }, |
||||||
|
}, |
||||||
|
percentage: { |
||||||
|
align: "left", |
||||||
|
fontSize: titleFontSize * 1.6, |
||||||
|
// color: function (params) { |
||||||
|
// let data = adapterOption.series[1].data; |
||||||
|
// return data.itemStyle.color({ dataIndex: params.dataIndex }); |
||||||
|
// }, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
name: "温度监测:", |
||||||
|
data: [ |
||||||
|
{ value: 0, name: "运行" }, |
||||||
|
{ value: 0, name: "不运行" }, |
||||||
|
], |
||||||
|
itemStyle: { |
||||||
|
color: function (params) { |
||||||
|
var colorList = ["#2df499", "#08c8ff"]; |
||||||
|
return colorList[params.dataIndex]; |
||||||
|
}, |
||||||
|
// borderWidth: 5, |
||||||
|
borderColor: "#002a56", |
||||||
|
}, |
||||||
|
}, |
||||||
|
{ |
||||||
|
data: [ |
||||||
|
{ value: 0, name: "运行" }, |
||||||
|
{ value: 0, name: "不运行" }, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
this.chartInstance.setOption(adapterOption); |
||||||
|
this.chartInstance.resize(); |
||||||
|
} |
||||||
|
}); |
||||||
|
}, |
||||||
|
//初始化chartInstance对象-饼图 |
||||||
|
initChart() { |
||||||
|
this.chartInstance = echarts.init(this.$refs.pumpChart_ref); |
||||||
|
this.option = { |
||||||
|
//环形图中间文字 |
||||||
|
title: { |
||||||
|
subtext: this.allData, |
||||||
|
textStyle: { |
||||||
|
color: "#ffffff", |
||||||
|
fontSize: 20, |
||||||
|
}, |
||||||
|
subtextStyle: { |
||||||
|
color: "#ffffff", |
||||||
|
}, |
||||||
|
textAlign: "center", |
||||||
|
x: "28.5%", |
||||||
|
y: "35%", //距离上边的距离 |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
trigger: "item", |
||||||
|
formatter: "{a} <br/>{b} : {c} ({d}%)", |
||||||
|
}, |
||||||
|
//图例 |
||||||
|
legend: { |
||||||
|
orient: "vertical", // 垂直分布 |
||||||
|
right: "10%", // 位于最右边 |
||||||
|
top: "center", // 垂直居中 |
||||||
|
//图例文字颜色 |
||||||
|
textStyle: { |
||||||
|
color: "#ffffff", |
||||||
|
// fontSize: 18, |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
// 数据圆 |
||||||
|
{ |
||||||
|
name: "温度监测:", |
||||||
|
type: "pie", |
||||||
|
radius: ["50%", "62%"], |
||||||
|
center: ["30%", "44%"], |
||||||
|
avoidLabelOverlap: false, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
position: "center", |
||||||
|
}, |
||||||
|
labelLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
itemStyle: { |
||||||
|
color: function (params) { |
||||||
|
var colorList = ["#2df499", "#08c8ff"]; |
||||||
|
return colorList[params.dataIndex]; |
||||||
|
}, |
||||||
|
borderWidth: 5, |
||||||
|
borderColor: "#002a56", |
||||||
|
}, |
||||||
|
z: 10, //设置层级更高,否则会被阴影圆遮住 |
||||||
|
}, |
||||||
|
// 阴影圆 |
||||||
|
{ |
||||||
|
type: "pie", |
||||||
|
radius: ["40%", "52%"], |
||||||
|
center: ["30%", "44%"], |
||||||
|
avoidLabelOverlap: false, |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
position: "center", |
||||||
|
}, |
||||||
|
silent: true, |
||||||
|
labelLine: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
//颜色 |
||||||
|
itemStyle: { |
||||||
|
color: function (colors) { |
||||||
|
var colorList = ["#09596b", "#024e7d"]; |
||||||
|
return colorList[colors.dataIndex]; |
||||||
|
}, |
||||||
|
}, |
||||||
|
z: 15, |
||||||
|
}, |
||||||
|
// 内圈边框 |
||||||
|
{ |
||||||
|
// 颜色 |
||||||
|
color: ["#305376"], |
||||||
|
type: "pie", |
||||||
|
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||||
|
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||||
|
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||||
|
// 这里开启silent: true, 就达到效果了 |
||||||
|
// center与非内圈一致 |
||||||
|
radius: ["28%", "29%"], |
||||||
|
center: ["30%", "44%"], |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
value: 0, |
||||||
|
name: "", |
||||||
|
itemStyle: {}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
// 最里面渐变小圆 |
||||||
|
{ |
||||||
|
// 颜色 |
||||||
|
type: "pie", |
||||||
|
silent: true, //鼠标移入不显示内容，不触发鼠标事件 |
||||||
|
// hoverAnimation: false, //鼠标移入不放大，此属性已被废弃 |
||||||
|
// 使用emphasis.scale 是否开启高亮后扇区的放大效果，默认true |
||||||
|
// 这里开启silent: true, 就达到效果了 |
||||||
|
// center与非内圈一致 |
||||||
|
radius: ["0%", "29%"], |
||||||
|
center: ["30%", "44%"], |
||||||
|
label: { |
||||||
|
show: false, |
||||||
|
}, |
||||||
|
data: [ |
||||||
|
{ |
||||||
|
value: 0, |
||||||
|
name: "", |
||||||
|
itemStyle: {}, |
||||||
|
}, |
||||||
|
], |
||||||
|
itemStyle: { |
||||||
|
color: { |
||||||
|
type: "linear", |
||||||
|
x: 0, |
||||||
|
y: 0, |
||||||
|
x2: 1, |
||||||
|
y2: 1, |
||||||
|
colorStops: [ |
||||||
|
{ offset: 0, color: "#002a55" }, // 0% 处的颜色 |
||||||
|
{ offset: 1, color: "#0a457a" }, // 100% 处的颜色 |
||||||
|
], |
||||||
|
global: false, // 缺省为 false |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.chartInstance.setOption(this.option, true); |
||||||
|
}, |
||||||
|
handleEnter(index) { |
||||||
|
this.currentIndex = index; |
||||||
|
this.renderingBroken(); |
||||||
|
}, |
||||||
|
//初始化chartInstance2对象 折线图 |
||||||
|
initChart2() { |
||||||
|
this.brokenInstanc = echarts.init(this.$refs.analyse_ref); |
||||||
|
this.brokenOption = { |
||||||
|
tooltip: { |
||||||
|
trigger: "axis", |
||||||
|
}, |
||||||
|
legend: { |
||||||
|
show: false, |
||||||
|
selectedMode: false, // 是否允许图例进行点击 |
||||||
|
icon: "cricle", //图例样式，可以自行查看样式选择 |
||||||
|
//图例文字颜色 |
||||||
|
textStyle: { |
||||||
|
color: "#ffff", |
||||||
|
fontSize: 16, //这里改字体大小 |
||||||
|
}, |
||||||
|
// left: "73%", |
||||||
|
left: "66%", |
||||||
|
top: "0", |
||||||
|
//图例距离饼图的距离 |
||||||
|
itemGap: 5, |
||||||
|
itemWidth: 10, |
||||||
|
itemHeight: 5, |
||||||
|
}, |
||||||
|
|
||||||
|
grid: { |
||||||
|
top: "4%", |
||||||
|
left: "3%", |
||||||
|
right: "4%", |
||||||
|
bottom: "5%", |
||||||
|
containLabel: true, |
||||||
|
}, |
||||||
|
xAxis: { |
||||||
|
type: "category", |
||||||
|
//设置为true代表离零刻度间隔一段距离 |
||||||
|
boundaryGap: true, |
||||||
|
// 修饰刻度标签的颜色即x坐标数据 |
||||||
|
axisLabel: { |
||||||
|
// interval: 0, //强制显示所有x轴数据 |
||||||
|
// rotate: 30, //x轴坐标字体倾斜30度 |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||||
|
}, |
||||||
|
axisTick: { |
||||||
|
show: false, // 不显示坐标轴刻度线 |
||||||
|
}, |
||||||
|
// x坐标轴的颜色 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", |
||||||
|
}, |
||||||
|
}, |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#e2e6f0", |
||||||
|
}, |
||||||
|
}, //x轴分割线 |
||||||
|
data: this.brokenTime, |
||||||
|
}, |
||||||
|
yAxis: { |
||||||
|
min: 0, |
||||||
|
// max:20, |
||||||
|
// // // min:'dataMin', |
||||||
|
// // // max:'dataMax', |
||||||
|
// name: "kwh", // 第一个 y 轴的单位描述 |
||||||
|
// 设置 name 的样式 |
||||||
|
nameTextStyle: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
fontSize: 12, |
||||||
|
}, |
||||||
|
miniInterval: 5, |
||||||
|
type: "value", |
||||||
|
// 修饰刻度标签的颜色即y坐标数据 |
||||||
|
axisLabel: { |
||||||
|
color: "rgba(255, 255, 255, 1)", |
||||||
|
}, |
||||||
|
// 显示y坐标轴 |
||||||
|
axisLine: { |
||||||
|
show: true, |
||||||
|
lineStyle: { |
||||||
|
color: "#365576", // 设置 y 轴线的颜色 |
||||||
|
}, |
||||||
|
fontSize: 14, // 设置字体大小，可根据需要调整 |
||||||
|
}, |
||||||
|
//y轴分割线段数 |
||||||
|
// splitNumber: 10, |
||||||
|
// 修改y轴分割线的颜色 |
||||||
|
splitLine: { |
||||||
|
lineStyle: { |
||||||
|
color: "#1a3d62", // 设置分割线的颜色 |
||||||
|
type: "dashed", // 设置分割线为虚线 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
series: [ |
||||||
|
{ |
||||||
|
type: "line", |
||||||
|
// 拐点大小 |
||||||
|
symbolSize: 8, |
||||||
|
data: this.brokenData1, |
||||||
|
//折线颜色 |
||||||
|
itemStyle: { |
||||||
|
color: "#d48e17", //折线点的颜色 |
||||||
|
lineStyle: { |
||||||
|
color: "#d48e17", //折线的颜色 |
||||||
|
}, |
||||||
|
}, |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
|
//把配置项给实例对象 |
||||||
|
this.brokenInstanc.setOption(this.brokenOption, true); |
||||||
|
}, |
||||||
|
//折线图自适应 |
||||||
|
screenAdapter2() { |
||||||
|
console.log("没有数据吗", this.brokenData1); |
||||||
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||||
|
const titleFontSize = this.$refs.analyse_ref.offsetWidth / 130; |
||||||
|
const adapterOption = {}; |
||||||
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||||
|
this.brokenInstanc.setOption(adapterOption); |
||||||
|
//手动的调用图标对象的resize才能产生效果 |
||||||
|
this.brokenInstanc.resize(); |
||||||
|
}, |
||||||
|
// 获取折线图数据 |
||||||
|
getTableData() { |
||||||
|
let date = new Date(); |
||||||
|
let year = date.getFullYear().toString(); |
||||||
|
let month = |
||||||
|
date.getMonth() + 1 < 10 |
||||||
|
? "0" + (date.getMonth() + 1).toString() |
||||||
|
: (date.getMonth() + 1).toString(); |
||||||
|
let day = |
||||||
|
date.getDate() < 10 |
||||||
|
? "0" + date.getDate().toString() |
||||||
|
: date.getDate().toString(); |
||||||
|
let start = year + "-" + month + "-01"; //当月第一天 |
||||||
|
let end = year + "-" + month + "-" + day; //当天 |
||||||
|
|
||||||
|
const dailyParams = { |
||||||
|
type: 1, |
||||||
|
buildingId: "所有", |
||||||
|
page: 1, |
||||||
|
limit: 31, |
||||||
|
startDate: getDay(-1), |
||||||
|
endDate: getDay(-1), |
||||||
|
}; |
||||||
|
const monthlyParams = { |
||||||
|
type: 1, |
||||||
|
buildingId: "所有", |
||||||
|
page: 1, |
||||||
|
limit: 31, |
||||||
|
startDate: start, |
||||||
|
endDate: end, |
||||||
|
}; |
||||||
|
|
||||||
|
// 并发请求日数据和月数据 |
||||||
|
Promise.all([hotEnergyQuery(dailyParams), hotEnergyQuery(monthlyParams)]) |
||||||
|
.then(([dailyResponse, monthlyResponse]) => { |
||||||
|
console.log("昨日数据", dailyResponse); |
||||||
|
if ( |
||||||
|
dailyResponse.code == 200 && |
||||||
|
dailyResponse.rows !== null && |
||||||
|
dailyResponse.rows.length > 0 |
||||||
|
) { |
||||||
|
this.electWater = dailyResponse.rows[0].electWater; |
||||||
|
this.electValue = dailyResponse.rows[0].electValue; |
||||||
|
this.useHotWater = dailyResponse.rows[0].useHotWater; |
||||||
|
} else { |
||||||
|
this.electWater = 0; |
||||||
|
this.electValue = 0; |
||||||
|
this.useHotWater = 0; |
||||||
|
} |
||||||
|
console.log("当月数据", monthlyResponse); |
||||||
|
this.brokenData1 = []; |
||||||
|
this.brokenData2 = []; |
||||||
|
this.brokenData3 = []; |
||||||
|
this.brokenTime = []; |
||||||
|
if (monthlyResponse.code == 200) { |
||||||
|
monthlyResponse.rows.forEach((item) => { |
||||||
|
this.brokenData1.push(item.useHotWater); |
||||||
|
this.brokenData2.push(item.electValue); |
||||||
|
this.brokenData3.push(item.electWater); |
||||||
|
if (item.curDate.includes("-")) { |
||||||
|
var oneStr = item.curDate.split("-"); |
||||||
|
this.brokenTime.push( |
||||||
|
oneStr[oneStr.length - 2] + "-" + oneStr[oneStr.length - 1] |
||||||
|
); |
||||||
|
} |
||||||
|
}); |
||||||
|
// 对数组进行反转操作 |
||||||
|
this.brokenData1.reverse(); |
||||||
|
this.brokenData2.reverse(); |
||||||
|
this.brokenData3.reverse(); |
||||||
|
this.brokenTime.reverse(); |
||||||
|
this.renderingBroken(); |
||||||
|
} else { |
||||||
|
this.brokenData1 = []; |
||||||
|
this.brokenData2 = []; |
||||||
|
this.brokenData3 = []; |
||||||
|
this.brokenTime = []; |
||||||
|
this.renderingBroken(); |
||||||
|
} |
||||||
|
}) |
||||||
|
.catch((error) => { |
||||||
|
console.error("请求数据时出错:", error); |
||||||
|
}); |
||||||
|
}, |
||||||
|
renderingBroken() { |
||||||
|
if (this.currentIndex === 0) { |
||||||
|
this.brokenOption.series[0].data = this.brokenData1; |
||||||
|
this.brokenOption.series[0].itemStyle.color = "#d48e17"; |
||||||
|
} else if (this.currentIndex === 1) { |
||||||
|
this.brokenOption.series[0].data = this.brokenData2; |
||||||
|
this.brokenOption.series[0].itemStyle.color = "#1ab395"; |
||||||
|
} else if (this.currentIndex === 2) { |
||||||
|
this.brokenOption.series[0].data = this.brokenData3; |
||||||
|
this.brokenOption.series[0].itemStyle.color = "#1f8dee"; |
||||||
|
} |
||||||
|
// 保存当前索引用于闭包 |
||||||
|
const currentIndex = this.currentIndex; |
||||||
|
// 动态设置 tooltip 格式化函数 |
||||||
|
this.brokenOption.tooltip = { |
||||||
|
trigger: "axis", |
||||||
|
formatter: function (params) { |
||||||
|
// 获取当前数据点信息 |
||||||
|
const data = params[0]; |
||||||
|
const month = data.name; |
||||||
|
const value = data.value; |
||||||
|
|
||||||
|
// 根据索引返回不同内容 |
||||||
|
if (currentIndex === 0) { |
||||||
|
return `${month}<br/>用水量: ${value} 吨`; |
||||||
|
} else if (currentIndex === 1) { |
||||||
|
return `${month}<br/>用电量: ${value} 度`; |
||||||
|
} else if (currentIndex === 2) { |
||||||
|
return `${month}<br/>单耗: ${value} 度/吨`; |
||||||
|
} |
||||||
|
}, |
||||||
|
}; |
||||||
|
this.brokenOption.xAxis.data = this.brokenTime; |
||||||
|
this.brokenInstanc.setOption(this.brokenOption); |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
<style lang="scss" scoped> |
||||||
|
.overview-top { |
||||||
|
width: 100%; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: stretch; |
||||||
|
justify-content: space-between; |
||||||
|
margin-bottom: 0.2rem; |
||||||
|
.overview-top-left { |
||||||
|
width: 65%; |
||||||
|
.overview-data { |
||||||
|
width: 100%; |
||||||
|
padding: 0.5rem; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
align-items: center; |
||||||
|
justify-content: space-between; |
||||||
|
.overview-data-li { |
||||||
|
width: 1.8rem; |
||||||
|
height: 1.65rem; |
||||||
|
position: relative; |
||||||
|
.overview-img { |
||||||
|
width: 1.8rem; |
||||||
|
height: 1.65rem; |
||||||
|
position: absolute; |
||||||
|
top: 0; |
||||||
|
} |
||||||
|
.overview-num { |
||||||
|
font-family: DIN-Bold; |
||||||
|
font-size: 0.3rem; |
||||||
|
font-weight: bold; |
||||||
|
font-stretch: normal; |
||||||
|
line-height: 0.5rem; |
||||||
|
letter-spacing: 0px; |
||||||
|
color: #ffffff; |
||||||
|
position: absolute; |
||||||
|
top: 0.28rem; |
||||||
|
right: 0; |
||||||
|
} |
||||||
|
.overview-title { |
||||||
|
font-family: SourceHanSansCN-Regular; |
||||||
|
font-size: 0.18rem; |
||||||
|
font-weight: normal; |
||||||
|
font-stretch: normal; |
||||||
|
line-height: 0.22rem; |
||||||
|
letter-spacing: 0px; |
||||||
|
color: #ffffff; |
||||||
|
position: absolute; |
||||||
|
top: 0.77rem; |
||||||
|
right: 0; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.overview-top-right { |
||||||
|
width: 33%; |
||||||
|
.pump-charts { |
||||||
|
width: 100%; |
||||||
|
height: 2.65rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
.overview-bottom { |
||||||
|
.choice { |
||||||
|
margin: 20px; |
||||||
|
.mr20 { |
||||||
|
padding: 0.05rem 0.2rem; |
||||||
|
white-space: nowrap; |
||||||
|
width: auto; |
||||||
|
} |
||||||
|
} |
||||||
|
.brokenEcharts { |
||||||
|
width: 100%; |
||||||
|
height: 4rem; |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue