You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1033 lines
31 KiB
1033 lines
31 KiB
<template> |
|
<div class="big-machine" v-loading="listLoading"> |
|
<div class="data-content"> |
|
<div class="data-li type2"> |
|
<img class="use-icon" src="../../../../assets/images/use1.png" alt="" /> |
|
<div class="use-text"> |
|
<div>用水量(吨)</div> |
|
<div class="data-text">{{ useWater }}</div> |
|
</div> |
|
<div class="use-text"> |
|
<div v-if="dateType === 'day'">与昨日相比</div> |
|
<div v-if="dateType === 'month'">与上月相比</div> |
|
<div v-if="dateType === 'year'">与上年相比</div> |
|
<div class="upText" v-if="useWaterRadio > 0"> |
|
<i class="el-icon-bottom"></i> |
|
<span>+{{ useWaterRadio }}</span> |
|
</div> |
|
<div class="downText" v-else> |
|
<i class="el-icon-bottom"></i> |
|
<span>-{{ useWaterRadio }}</span> |
|
</div> |
|
</div> |
|
<img |
|
class="type-img" |
|
src="../../../../assets/images/texture2.png" |
|
alt="" |
|
/> |
|
</div> |
|
<div class="data-li type3"> |
|
<img class="use-icon" src="../../../../assets/images/use2.png" alt="" /> |
|
<div class="use-text"> |
|
<div>用电量(度)</div> |
|
<div class="data-text">{{ useElect }}</div> |
|
</div> |
|
<div class="use-text"> |
|
<div v-if="dateType === 'day'">与昨日相比</div> |
|
<div v-if="dateType === 'month'">与上月相比</div> |
|
<div v-if="dateType === 'year'">与上年相比</div> |
|
<div class="upText" v-if="useElectRadio > 0"> |
|
<i class="el-icon-bottom"></i> |
|
<span>+{{ useElectRadio }}</span> |
|
</div> |
|
<div class="downText" v-else> |
|
<i class="el-icon-bottom"></i> |
|
<span>-{{ useElectRadio }}</span> |
|
</div> |
|
</div> |
|
<img |
|
class="type-img" |
|
src="../../../../assets/images/texture2.png" |
|
alt="" |
|
/> |
|
</div> |
|
<div class="data-li type4"> |
|
<img class="use-icon" src="../../../../assets/images/use3.png" alt="" /> |
|
<div class="use-text"> |
|
<div>单耗(度/吨)</div> |
|
<div class="data-text">{{ useUnit }}</div> |
|
</div> |
|
<div class="use-text"> |
|
<div v-if="dateType === 'day'">与昨日相比</div> |
|
<div v-if="dateType === 'month'">与上月相比</div> |
|
<div v-if="dateType === 'year'">与上年相比</div> |
|
<div class="upText" v-if="useUnitRadio > 0"> |
|
<i class="el-icon-bottom"></i> |
|
<span>+{{ useUnitRadio }}</span> |
|
</div> |
|
<div class="downText" v-else> |
|
<i class="el-icon-bottom"></i> |
|
<span>-{{ useUnitRadio }}</span> |
|
</div> |
|
</div> |
|
<img |
|
class="type-img" |
|
src="../../../../assets/images/texture2.png" |
|
alt="" |
|
/> |
|
</div> |
|
</div> |
|
<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> |
|
<div class="time-label">时间类型:</div> |
|
<el-radio-group |
|
v-model="dateType" |
|
style="margin-right: 0.24rem" |
|
@change="updateDateType" |
|
> |
|
<el-radio label="day">日</el-radio> |
|
<el-radio label="month">月</el-radio> |
|
<el-radio label="year">年</el-radio> |
|
</el-radio-group> |
|
<el-date-picker |
|
v-model="dayDate" |
|
type="daterange" |
|
v-if="dateType == 'day'" |
|
:key="this.dateType" |
|
range-separator="至" |
|
value-format="yyyy-MM-dd" |
|
start-placeholder="开始日期" |
|
end-placeholder="结束日期" |
|
@change="dateChange" |
|
> |
|
</el-date-picker> |
|
<el-date-picker |
|
v-model="monthDate" |
|
type="monthrange" |
|
v-if="dateType == 'month'" |
|
:key="this.dateType" |
|
range-separator="至" |
|
start-placeholder="开始月份" |
|
end-placeholder="结束月份" |
|
value-format="yyyy-MM" |
|
@change="dateChange" |
|
> |
|
</el-date-picker> |
|
<div class="years-div" v-if="dateType == 'year'" :key="this.dateType"> |
|
<el-date-picker |
|
v-model="startYear" |
|
type="year" |
|
placeholder="选择开始年份" |
|
style="width: 180px" |
|
value-format="yyyy" |
|
> |
|
</el-date-picker> |
|
<div class="years-word">至</div> |
|
<el-date-picker |
|
v-model="endYear" |
|
type="year" |
|
placeholder="选择结束年份" |
|
style="width: 180px" |
|
value-format="yyyy" |
|
> |
|
</el-date-picker> |
|
</div> |
|
<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="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> |
|
<el-table :data="tableData" stripe> |
|
<el-table-column label="日期" align="center" prop="curDate" /> |
|
<el-table-column |
|
label="所属楼栋" |
|
v-if="isBuildNone" |
|
align="center" |
|
prop="buildingName" |
|
/> |
|
<el-table-column label="用水量(吨)" align="center" prop="useHotWater" /> |
|
<el-table-column label="用电量(度)" align="center" prop="electValue" /> |
|
<el-table-column label="单耗(度/吨)" align="center" prop="electWater" /> |
|
</el-table> |
|
|
|
<pagination |
|
v-show="total > 0" |
|
:total="total" |
|
:page.sync="queryParams.pageNum" |
|
:limit.sync="queryParams.pageSize" |
|
@pagination="getList" |
|
/> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { formatDay, getDay, getMonth, getYear } from "@/utils/datetime"; |
|
import { hotBuildList, hotEnergySum } from "@/api/hotWater/energyAnalysis"; |
|
import { hotEnergyQuery } from "@/api/hotWater/overview"; |
|
import * as echarts from "echarts"; |
|
export default { |
|
data() { |
|
return { |
|
isBuildNone: true, |
|
listLoading: false, |
|
dateType: "day", //默认选择天 |
|
dayDate: [], //日值 |
|
monthDate: [], //月值 |
|
startYear: "", //开始年份 |
|
endYear: "", //结束年份 |
|
|
|
dialogVisible: false, |
|
building: "", //选中的楼栋 |
|
builds: [], //楼栋列表 |
|
// 总条数 |
|
total: 0, |
|
// 表格数据 |
|
tableData: [], |
|
exportData: [], |
|
// 查询参数 |
|
queryParams: { |
|
pageNum: 1, |
|
pageSize: 10, |
|
startTime: "", |
|
endTime: "", |
|
}, |
|
brokenInstanc: null, |
|
brokenOption: {}, |
|
timeData2: [{ title: "用水量" }, { title: "用电量" }, { title: "单耗" }], |
|
currentIndex: 0, |
|
brokenData1: [], |
|
brokenData2: [], |
|
brokenData3: [], |
|
brokenTime: [], |
|
useWater: 0, |
|
useWaterRadio: 0, |
|
useElect: 0, |
|
useElectRadio: 0, |
|
useUnit: 0, |
|
useUnitRadio: 0, |
|
}; |
|
}, |
|
created() { |
|
// 在组件创建完成后，设置默认值 |
|
}, |
|
mounted() { |
|
this.initializeTimeDate(); |
|
this.getBuildList(); |
|
this.initChart(); |
|
window.addEventListener("resize", this.screenAdapter); |
|
this.screenAdapter(); |
|
}, |
|
destroyed() { |
|
//取消监听器 |
|
window.removeEventListener("resize", this.screenAdapter); |
|
}, |
|
methods: { |
|
handleEnter(index) { |
|
this.currentIndex = index; |
|
this.renderingBroken(); |
|
}, |
|
/** 查询楼栋 */ |
|
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(); |
|
this.getRadioData(); |
|
} |
|
}); |
|
}, |
|
// 递归函数，用于去除指定层级往后的 children 数据 |
|
// 使用this.removeChildrenAfterLevel(newRes.data[0], 1, targetLevel); |
|
removeChildrenAfterLevel(obj, currentLevel, targetLevel) { |
|
if (currentLevel >= targetLevel) { |
|
// 当达到指定层级时，将 children 属性置为空数组 |
|
obj.children = []; |
|
return; |
|
} |
|
if (obj.children && obj.children.length > 0) { |
|
// 若存在 children 数组，则递归处理每个子项 |
|
for (let i = 0; i < obj.children.length; i++) { |
|
this.removeChildrenAfterLevel( |
|
obj.children[i], |
|
currentLevel + 1, |
|
targetLevel |
|
); |
|
} |
|
} |
|
}, |
|
// 初始化时间 |
|
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; //当天 |
|
let start2 = year + "-" + "01"; //当年第一月 |
|
let end2 = getMonth(0); //当月 |
|
let start3 = getYear(0) - 1; //去年 |
|
let end3 = getYear(0); //今年 |
|
this.dayDate = [start1, end1]; // 更新 |
|
this.monthDate = [start2, end2]; |
|
this.startYear = start3.toString(); |
|
this.endYear = end3.toString(); |
|
}, |
|
// 选择时间类型 |
|
updateDateType() { |
|
console.log(this.dateType); |
|
// (this.dayDate = []), //日值 |
|
// (this.monthDate = []), //月值 |
|
// (this.startYear = ""), //开始年份 |
|
// (this.endYear = ""); //结束年份 |
|
this.getList(); |
|
this.getRadioData(); |
|
}, |
|
// 选中日期事件 |
|
dateChange() { |
|
// console.log("打印时间", this.timeform.time1); |
|
if (!this.dayDate) { |
|
this.$nextTick(() => { |
|
this.dayDate = []; |
|
}); |
|
} |
|
if (!this.monthDate) { |
|
this.$nextTick(() => { |
|
this.monthDate = []; |
|
}); |
|
} |
|
}, |
|
// 查询 |
|
findData() { |
|
console.log("this.dateType", this.dateType); |
|
switch (this.dateType) { |
|
case "day": |
|
if (this.dayDate.length === 0) { |
|
this.showMessage("请选择时间！", "warning"); |
|
} else { |
|
const newLength = |
|
new Date(this.dayDate[1]).getTime() - |
|
new Date(this.dayDate[0]).getTime(); |
|
const dayDiff = Math.floor(newLength / (1000 * 60 * 60 * 24)); |
|
if (dayDiff > 31) { |
|
this.showMessage( |
|
"最多只能选择30天区间，请重新选择再查询！", |
|
"warning" |
|
); |
|
} else { |
|
this.getList(); |
|
} |
|
} |
|
break; |
|
case "month": |
|
if (this.monthDate.length === 0) { |
|
this.showMessage("请选择时间！", "warning"); |
|
} else { |
|
const [start, end] = this.monthDate; |
|
const startDate = new Date(start); |
|
const endDate = new Date(end); |
|
const startYear = startDate.getFullYear(); |
|
const startMonth = startDate.getMonth(); |
|
const endYear = endDate.getFullYear(); |
|
const endMonth = endDate.getMonth(); |
|
const monthDiff = |
|
(endYear - startYear) * 12 + (endMonth - startMonth); |
|
if (monthDiff > 12) { |
|
this.showMessage( |
|
"最多只能选择12个月区间，请重新选择再查询！", |
|
"warning" |
|
); |
|
} else { |
|
this.getList(); |
|
} |
|
} |
|
break; |
|
case "year": |
|
if (!this.startYear || !this.endYear) { |
|
this.showMessage("请选择全年份区间！", "warning"); |
|
} else if (this.startYear > this.endYear) { |
|
this.showMessage("结束年份要大于开始年份！", "warning"); |
|
} else { |
|
this.getList(); |
|
} |
|
break; |
|
default: |
|
break; |
|
} |
|
this.getRadioData(); |
|
}, |
|
// 显示消息的函数 |
|
showMessage(message, type) { |
|
this.$message({ |
|
message: message, |
|
type: type, |
|
}); |
|
}, |
|
//请求表格数据 |
|
getList() { |
|
let timeType = null; |
|
if (this.dateType == "day") { |
|
timeType = 1; |
|
this.queryParams.startTime = |
|
this.dayDate.length > 0 ? this.dayDate[0] : ""; |
|
this.queryParams.endTime = |
|
this.dayDate.length > 0 ? this.dayDate[1] : ""; |
|
} else if (this.dateType == "month") { |
|
timeType = 2; |
|
this.queryParams.startTime = |
|
this.monthDate.length > 0 ? this.monthDate[0] : ""; |
|
this.queryParams.endTime = |
|
this.monthDate.length > 0 ? this.monthDate[1] : ""; |
|
} else if (this.dateType == "year") { |
|
timeType = 3; |
|
this.queryParams.startTime = this.startYear; |
|
this.queryParams.endTime = this.endYear; |
|
} |
|
let data = { |
|
type: timeType, |
|
page: this.queryParams.pageNum, |
|
limit: this.queryParams.pageSize, |
|
startDate: this.queryParams.startTime, |
|
endDate: this.queryParams.endTime, |
|
buildingId: this.building, |
|
}; |
|
console.log("查询表格数据参数", data); |
|
this.listLoading = true; |
|
hotEnergyQuery(data).then((res) => { |
|
console.log("表格返回的数据", res); |
|
if (res.code == 200 && res.rows.length > 0) { |
|
this.tableData = res.rows; |
|
this.total = res.total; |
|
if (this.building == "所有") { |
|
this.isBuildNone = false; |
|
} else { |
|
this.isBuildNone = true; |
|
} |
|
} else { |
|
this.tableData = []; |
|
this.total = 0; |
|
} |
|
this.getChartData(); |
|
}); |
|
// 请求数据 |
|
// Just to simulate the time of the request |
|
setTimeout(() => { |
|
this.listLoading = false; |
|
}, 1.0 * 1000); |
|
}, |
|
//请求折线图数据 |
|
getChartData() { |
|
console.log("图表参数", this.queryParams); |
|
let timeType = null; |
|
if (this.dateType == "day") { |
|
timeType = 1; |
|
this.queryParams.startTime = |
|
this.dayDate.length > 0 ? this.dayDate[0] : ""; |
|
this.queryParams.endTime = |
|
this.dayDate.length > 0 ? this.dayDate[1] : ""; |
|
} else if (this.dateType == "month") { |
|
timeType = 2; |
|
this.queryParams.startTime = |
|
this.monthDate.length > 0 ? this.monthDate[0] : ""; |
|
this.queryParams.endTime = |
|
this.monthDate.length > 0 ? this.monthDate[1] : ""; |
|
} else if (this.dateType == "year") { |
|
timeType = 3; |
|
this.queryParams.startTime = this.startYear; |
|
this.queryParams.endTime = this.endYear; |
|
} |
|
let data = { |
|
type: timeType, |
|
page: this.queryParams.pageNum, |
|
limit: this.total, |
|
startDate: this.queryParams.startTime, |
|
endDate: this.queryParams.endTime, |
|
buildingId: this.building, |
|
}; |
|
hotEnergyQuery(data).then((res) => { |
|
console.log("图表返回的数据", res); |
|
this.brokenData1 = []; |
|
this.brokenData2 = []; |
|
this.brokenData3 = []; |
|
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); |
|
this.brokenData3.push(item.electWater); |
|
this.brokenTime.push(item.curDate); |
|
}); |
|
// 对数组进行反转操作 |
|
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(); |
|
}); |
|
}, |
|
renderingBroken() { |
|
if (this.currentIndex === 0) { |
|
this.brokenOption.series[0].data = this.brokenData1; |
|
this.brokenOption.series[0].itemStyle.color = "#d48e17"; |
|
this.brokenOption.series[0].areaStyle.color.colorStops = [ |
|
{ |
|
offset: 0, |
|
color: "rgba(212, 142, 23, 0.3)", // 0% 处的颜色 |
|
}, |
|
{ |
|
offset: 0.8, |
|
color: "rgba(212, 142, 23,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% 处的颜色 |
|
}, |
|
]; |
|
} else if (this.currentIndex === 2) { |
|
this.brokenOption.series[0].data = this.brokenData3; |
|
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% 处的颜色 |
|
}, |
|
]; |
|
} |
|
// 保存当前索引用于闭包 |
|
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); |
|
}, |
|
// 请求环比数据 |
|
getRadioData() { |
|
let curType = ""; |
|
let curTime = ""; |
|
if (this.dateType == "day") { |
|
curType = 1; |
|
curTime = getDay(0); |
|
} else if (this.dateType == "month") { |
|
curType = 2; |
|
curTime = getMonth(0); |
|
} else if (this.dateType == "year") { |
|
curType = 3; |
|
curTime = getYear(0); |
|
} |
|
let data = { |
|
curDate: curTime, |
|
type: curType, |
|
buildingId: this.building, |
|
}; |
|
hotEnergySum(data).then((res) => { |
|
console.log("上层数据返回", res); |
|
if (res.code == 200) { |
|
this.useWater = res.rows[0].waterValue; |
|
this.useWaterRadio = res.rows[0].waterP; |
|
this.useElect = res.rows[0].electValue; |
|
this.useElectRadio = res.rows[0].electP; |
|
this.useUnit = res.rows[0].electWater; |
|
this.useUnitRadio = res.rows[0].electWaterP; |
|
} |
|
}); |
|
}, |
|
// 导出 |
|
goExport() { |
|
if (this.exportData) { |
|
import("@/assets/excel/Export2Excel").then((excel) => { |
|
// 导出的excel表头字段名，需要导出表格字段名 |
|
if (this.building == "所有") { |
|
var tHeader = [ |
|
"日期", |
|
"用水量(吨)", |
|
"用电量(度)", |
|
"单耗(度/吨)", |
|
]; // 导出的excel表头名信息 改参数 |
|
var filterVal = [ |
|
"curDate", |
|
"useHotWater", |
|
"electValue", |
|
"electWater", |
|
]; |
|
} else { |
|
var tHeader = [ |
|
"日期", |
|
"所属楼栋", |
|
"用水量(吨)", |
|
"用电量(度)", |
|
"单耗(度/吨)", |
|
]; // 导出的excel表头名信息 改参数 |
|
var filterVal = [ |
|
"curDate", |
|
"buildingName", |
|
"useHotWater", |
|
"electValue", |
|
"electWater", |
|
]; |
|
} |
|
const data = this.formatJson(filterVal, this.exportData); |
|
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 === "perWater") { |
|
return (v[j] * 1000).toFixed(1); |
|
} 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>
|
|
|