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.
1036 lines
32 KiB
1036 lines
32 KiB
<template> |
|
<div class="main-body"> |
|
<div class="irregular-border"> |
|
<div class="main-content"> |
|
<div class="condition"> |
|
<div class="condition-left"> |
|
<div class="time-label">时间类型:</div> |
|
<el-radio-group |
|
v-model="dateType" |
|
style="margin-right: 0.24rem" |
|
@change="updateDateType" |
|
> |
|
<el-radio label="hour">小时</el-radio> |
|
<el-radio label="day">日</el-radio> |
|
<el-radio label="month">月</el-radio> |
|
<el-radio label="year">年</el-radio> |
|
</el-radio-group> |
|
<div class="condition-btn"> |
|
<div |
|
class="legend-li" |
|
v-for="(item, index) in timeData2" |
|
:key="index + 1" |
|
@click="handleEnter(item.title, index)" |
|
:class="{ timeStyle2: timeIndex2 == index }" |
|
> |
|
{{ item.title }} |
|
</div> |
|
</div> |
|
<el-date-picker |
|
v-model="timeDate" |
|
:default-time="['00:00:00', '23:59:59']" |
|
type="datetimerange" |
|
range-separator="至" |
|
v-if="dateType == 'hour'" |
|
placeholder="选择日期" |
|
start-placeholder="开始日期" |
|
end-placeholder="结束日期" |
|
> |
|
</el-date-picker> |
|
<el-date-picker |
|
v-model="dayDate" |
|
type="daterange" |
|
v-if="dateType == 'day'" |
|
:key="this.dateType" |
|
range-separator="至" |
|
value-format="yyyy-MM-dd" |
|
start-placeholder="开始日期" |
|
end-placeholder="结束日期" |
|
@change="dateChange" |
|
> |
|
</el-date-picker> |
|
<el-date-picker |
|
v-model="monthDate" |
|
type="monthrange" |
|
v-if="dateType == 'month'" |
|
:key="this.dateType" |
|
range-separator="至" |
|
start-placeholder="开始月份" |
|
end-placeholder="结束月份" |
|
value-format="yyyy-MM" |
|
@change="dateChange" |
|
> |
|
</el-date-picker> |
|
<div |
|
class="years-div" |
|
v-if="dateType == 'year'" |
|
:key="this.dateType" |
|
> |
|
<el-date-picker |
|
v-model="startYear" |
|
type="year" |
|
placeholder="选择开始年份" |
|
style="width: 180px" |
|
value-format="yyyy" |
|
> |
|
</el-date-picker> |
|
<div class="years-word">至</div> |
|
<el-date-picker |
|
v-model="endYear" |
|
type="year" |
|
placeholder="选择结束年份" |
|
style="width: 180px" |
|
value-format="yyyy" |
|
> |
|
</el-date-picker> |
|
</div> |
|
<!-- <el-select |
|
style="margin-left: 10px" |
|
v-model="systemType" |
|
placeholder="请选择系统类型" |
|
clearable |
|
> |
|
<el-option |
|
v-for="dict in systemTypes" |
|
:key="dict.dictValue" |
|
:label="dict.dictLabel" |
|
:value="dict.dictValue" |
|
/> |
|
</el-select> --> |
|
<div class="success-btn" style="margin-left: 0.24rem"> |
|
<el-button type="success" @click="findData">查询</el-button> |
|
</div> |
|
<!-- <div class="warning-bnt" style="margin-left: 0.24rem"> |
|
<el-button type="warning" @click="exportData">导出</el-button> |
|
</div> --> |
|
</div> |
|
</div> |
|
<div class="charts-table" v-loading="listLoading"> |
|
<div class="charts-title"> |
|
{{ this.titleDate }} {{ this.checkList }} |
|
</div> |
|
<div class="details_ref" ref="details_ref"></div> |
|
<div class="analysis-table" style="margin-bottom: 0.2rem"> |
|
<table> |
|
<thead> |
|
<tr> |
|
<th v-if="dateList.length > 0">类型</th> |
|
<th v-for="(item, index) in dateList" :key="index + 2"> |
|
{{ item }} |
|
</th> |
|
</tr> |
|
</thead> |
|
<tbody> |
|
<tr> |
|
<td v-if="curValue2.length > 0">本期{{ this.unitValue }}</td> |
|
<td v-for="(item, index) in curValue2" :key="index + 3"> |
|
{{ item }} |
|
</td> |
|
</tr> |
|
<tr> |
|
<td v-if="lastValue2.length > 0">同期{{ this.unitValue }}</td> |
|
<td v-for="(item, index) in lastValue2" :key="index + 4"> |
|
{{ item }} |
|
</td> |
|
</tr> |
|
<tr> |
|
<td v-if="yoy2.length > 0">同比(%)</td> |
|
<td v-for="(item, index) in yoy2" :key="index + 5"> |
|
{{ item }} |
|
</td> |
|
</tr> |
|
<tr> |
|
<td v-if="mom2.length > 0">环比(%)</td> |
|
<td v-for="(item, index) in mom2" :key="index + 5"> |
|
{{ item }} |
|
</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { format2 } from "@/utils/datetime"; |
|
import * as echarts from "echarts"; |
|
import { yoyMomEnergy } from "@/api/centerairC/energyManage"; |
|
import { listData } from "@/api/system/dict/data"; |
|
export default { |
|
data() { |
|
return { |
|
listLoading: false, |
|
dateType: "hour", //默认选择小时 |
|
timeDate: [], //小时值 |
|
dayDate: [], //日值 |
|
monthDate: [], //月值 |
|
startYear: "", //开始年份 |
|
endYear: "", //结束年份 |
|
startTime: "", //开始日期 |
|
endTime: "", //结束日期 |
|
timeData2: [{ title: "制冷量" }, { title: "用电量" }, { title: "EER" }], |
|
timeIndex2: 0, //制冷量 |
|
paramType: "cloud", //传给后端的类型 |
|
// 标题日期 |
|
titleDate: "", |
|
checkList: "制冷量", //默认选择制冷量 |
|
// 图例数据 |
|
dateList: [], |
|
curValue: [], |
|
lastValue: [], |
|
yoy: [], |
|
mom: [], |
|
//表格数据 |
|
curValue2: [], |
|
lastValue2: [], |
|
yoy2: [], |
|
mom2: [], |
|
unitValue: "", //单位 |
|
exportArr: [], |
|
systemType: "", //系统类型 |
|
systemTypes: [], |
|
}; |
|
}, |
|
mounted() { |
|
this.initializeTimeDate(); |
|
this.initChart1(); |
|
window.addEventListener("resize", this.screenAdapter); |
|
this.screenAdapter(); |
|
// this.getDictList(); |
|
this.getTableData(); |
|
}, |
|
destroyed() { |
|
//与mounted中的监听对应，在组件销毁的时候，需要将监听器取消掉 |
|
window.removeEventListener("resize", this.screenAdapter); |
|
}, |
|
methods: { |
|
/** 查询系统类型-字典数据列表 */ |
|
getDictList() { |
|
let data = { |
|
pageNum: 1, |
|
pageSize: 100, |
|
dictType: "sys_type", |
|
}; |
|
listData(data).then((response) => { |
|
this.systemTypes = response.rows; |
|
this.systemType = this.systemTypes[0].dictValue; |
|
this.getTableData(); |
|
}); |
|
}, |
|
// 初始化时间 |
|
initializeTimeDate() { |
|
const start = new Date(new Date().setHours(0, 0, 0, 0)); |
|
const end = new Date(new Date().setHours(23, 59, 59, 59)); |
|
this.timeDate = [format2(start), format2(end)]; // 更新 |
|
this.titleDate = format2(start) + "至" + format2(end); |
|
}, |
|
// 选择时间类型 |
|
updateDateType() { |
|
// this.dateType = this.radio; |
|
console.log(this.dateType); |
|
(this.timeDate = ""), //小时值 |
|
(this.dayDate = []), //日值 |
|
(this.monthDate = []), //月值 |
|
(this.startYear = ""), //开始年份 |
|
(this.endYear = ""); //结束年份 |
|
}, |
|
handleEnter(title, index) { |
|
console.log("打印", title, index); |
|
this.timeIndex2 = index; |
|
if (index == "0") { |
|
this.paramType = "cloud"; |
|
} else if (index == "1") { |
|
this.paramType = "meter"; |
|
} else if (index == "2") { |
|
this.paramType = "cop"; |
|
} |
|
}, |
|
// 选中日期事件 |
|
dateChange() { |
|
// console.log("打印时间", this.timeform.time1); |
|
if (!this.dayDate) { |
|
this.$nextTick(() => { |
|
this.dayDate = []; |
|
}); |
|
} |
|
if (!this.monthDate) { |
|
this.$nextTick(() => { |
|
this.monthDate = []; |
|
}); |
|
} |
|
}, |
|
// 查询 |
|
findData() { |
|
console.log("this.dateType", this.dateType); |
|
console.log("this.timeDate", this.timeDate); |
|
switch (this.dateType) { |
|
case "hour": |
|
if (!this.timeDate) { |
|
this.showMessage("请选择时间！", "warning"); |
|
} else { |
|
this.titleDate = |
|
format2(this.timeDate[0]) + "至" + format2(this.timeDate[1]); |
|
this.checkList = this.timeData2[this.timeIndex2].title; |
|
this.getTableData(); |
|
} |
|
break; |
|
case "day": |
|
if (this.dayDate.length === 0) { |
|
this.showMessage("请选择时间！", "warning"); |
|
} else { |
|
this.titleDate = this.dayDate[0] + "至" + this.dayDate[1]; |
|
this.checkList = this.timeData2[this.timeIndex2].title; |
|
this.getTableData(); |
|
} |
|
break; |
|
case "month": |
|
if (this.monthDate.length === 0) { |
|
this.showMessage("请选择时间！", "warning"); |
|
} else { |
|
this.titleDate = this.monthDate[0] + "至" + this.monthDate[1]; |
|
this.checkList = this.timeData2[this.timeIndex2].title; |
|
this.getTableData(); |
|
} |
|
break; |
|
case "year": |
|
if (!this.startYear || !this.endYear) { |
|
this.showMessage("请选择全年份区间！", "warning"); |
|
} else if (this.startYear > this.endYear) { |
|
this.showMessage("结束年份要大于开始年份！", "warning"); |
|
} else { |
|
this.titleDate = this.startYear + "至" + this.endYear; |
|
this.checkList = this.timeData2[this.timeIndex2].title; |
|
this.getTableData(); |
|
} |
|
break; |
|
default: |
|
break; |
|
} |
|
}, |
|
// 显示消息的函数 |
|
showMessage(message, type) { |
|
this.$message({ |
|
message: message, |
|
type: type, |
|
}); |
|
}, |
|
//请求数据 |
|
getTableData() { |
|
this.initChart1(); |
|
if (this.dateType == "hour") { |
|
this.startTime = format2(this.timeDate[0]); |
|
this.endTime = format2(this.timeDate[1]); |
|
} else if (this.dateType == "day") { |
|
this.startTime = this.dayDate.length > 0 ? this.dayDate[0] : ""; |
|
this.endTime = this.dayDate.length > 0 ? this.dayDate[1] : ""; |
|
} else if (this.dateType == "month") { |
|
this.startTime = this.monthDate.length > 0 ? this.monthDate[0] : ""; |
|
this.endTime = this.monthDate.length > 0 ? this.monthDate[1] : ""; |
|
} else if (this.dateType == "year") { |
|
(this.startTime = this.startYear), (this.endTime = this.endYear); |
|
} |
|
let data = { |
|
timeType: this.dateType, |
|
startTime: this.startTime, |
|
endTime: this.endTime, |
|
paramType: this.paramType, |
|
systemType: "0", |
|
}; |
|
console.log("查询数据参数", data); |
|
this.listLoading = true; |
|
yoyMomEnergy(data).then((res) => { |
|
console.log("查询返回", res); |
|
if (res.code == 200 && res.data.data !== null) { |
|
this.dateList = res.data.times; |
|
// 具体看看怎么拿到三组数据 |
|
this.curValue2 = []; |
|
this.lastValue2 = []; |
|
this.yoy = []; |
|
this.mom = []; |
|
this.curValue2 = res.data.data[2].curValue; |
|
this.lastValue2 = res.data.data[0].lastValue; |
|
this.yoy2 = res.data.data[1].yoy; |
|
this.mom2 = res.data.data[3].mom; |
|
// console.log("后端返回的时间", this.dateList) |
|
// console.log("后端返回的本期值", this.curValue2) |
|
// console.log("后端返回的上期值", this.lastValue2) |
|
// console.log("后端返回的同比值", this.yoy2) |
|
// console.log("后端返回的环比值", this.mom2) |
|
// 折线图的上期值和同比值需要单独处理 |
|
this.curValue = this.curValue2.map(function (value) { |
|
if (value === null) { |
|
return 0; |
|
} else if (typeof value === "string") { |
|
return parseFloat(value); |
|
} |
|
return value; |
|
}); |
|
this.lastValue = this.lastValue2.map(function (value) { |
|
if (value === null) { |
|
return 0; |
|
} else if (typeof value === "string") { |
|
return parseFloat(value); |
|
} |
|
return value; |
|
}); |
|
this.yoy = this.yoy2.map(function (value) { |
|
if (value === "同期无数据") { |
|
return 0; |
|
} else if (typeof value === "string") { |
|
if (value.endsWith("%")) { |
|
return parseFloat(value); |
|
} else { |
|
return parseFloat(value); |
|
} |
|
} |
|
return value; |
|
}); |
|
this.mom = this.mom2.map(function (value) { |
|
if (value === "上期无数据") { |
|
return 0; |
|
} else if (typeof value === "string") { |
|
if (value.endsWith("%")) { |
|
return parseFloat(value); |
|
} else { |
|
return parseFloat(value); |
|
} |
|
} |
|
return value; |
|
}); |
|
// console.log("处理过的本期值", this.curValue) |
|
// console.log("处理过的上期值", this.lastValue) |
|
// console.log("处理过的同比值", this.yoy) |
|
// 计算双y轴最大最小值， |
|
// var Min1 = Math.floor(Math.min(...this.curValue, ...this.lastValue)), |
|
var Min1 = 0, |
|
Min2 = Math.floor(Math.min(...this.yoy, ...this.mom)), |
|
Max1 = Math.ceil(Math.max(...this.curValue, ...this.lastValue)), |
|
Max2 = Math.ceil(Math.max(...this.yoy, ...this.mom)); |
|
// console.log("Min1", Min1); |
|
// console.log("Min2", Min2); |
|
// console.log("Max1", Max1); |
|
// console.log("Max2", Max2); |
|
// 修改tooltip的数据单位，需求点击“查询”-请求成功后才改变 |
|
if (this.timeIndex2 == 0) { |
|
this.unitValue = "(kwr)"; |
|
} else if (this.timeIndex2 == 1) { |
|
this.unitValue = "(kwh)"; |
|
} else { |
|
this.unitValue = " "; |
|
} |
|
const adapterOption = { |
|
xAxis: { |
|
data: this.dateList, |
|
}, |
|
yAxis: [ |
|
//两个y轴 |
|
{ |
|
min: Min1, |
|
max: Max1, |
|
splitNumber: 10, |
|
interval: (Max1 - Min1) / 10, |
|
}, |
|
{ |
|
min: Min2, |
|
max: Max2, |
|
splitNumber: 10, |
|
interval: (Max2 - Min2) / 10, |
|
}, |
|
], |
|
series: [ |
|
{ |
|
name: "本期", |
|
data: this.curValue, |
|
}, |
|
{ |
|
name: "同期", |
|
data: this.lastValue, |
|
}, |
|
{ |
|
name: "同比", |
|
data: this.yoy, |
|
}, |
|
{ |
|
name: "环比", |
|
data: this.mom, |
|
}, |
|
], |
|
}; |
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
|
this.chartInstance1.setOption(adapterOption); |
|
//手动的调用图标对象的resize才能产生效果 |
|
this.chartInstance1.resize(); |
|
} else { |
|
// console.log("后端返回的时间", this.dateList) |
|
// console.log("后端返回的本期值", this.curValue2) |
|
// console.log("后端返回的上期值", this.lastValue2) |
|
// console.log("后端返回的同比值", this.yoy2) |
|
this.dateList = []; |
|
(this.curValue2 = []), (this.lastValue2 = []), (this.yoy2 = []); |
|
this.mom2 = []; |
|
var Min1 = 0, |
|
Min2 = 0, |
|
Max1 = 0, |
|
Max2 = 0; |
|
const adapterOption = { |
|
xAxis: { |
|
data: [], |
|
}, |
|
yAxis: [ |
|
//两个y轴 |
|
{ |
|
min: Min1, |
|
max: Max1, |
|
splitNumber: 10, |
|
interval: (Max1 - Min1) / 10, |
|
}, |
|
{ |
|
min: Min2, |
|
max: Max2, |
|
splitNumber: 10, |
|
interval: (Max2 - Min2) / 10, |
|
}, |
|
], |
|
series: [ |
|
{ |
|
name: "本期", |
|
data: [], |
|
}, |
|
{ |
|
name: "同期", |
|
data: [], |
|
}, |
|
{ |
|
name: "同比", |
|
data: [], |
|
}, |
|
{ |
|
name: "环比", |
|
data: [], |
|
}, |
|
], |
|
}; |
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
|
this.chartInstance1.setOption(adapterOption); |
|
//手动的调用图标对象的resize才能产生效果 |
|
this.chartInstance1.resize(); |
|
} |
|
}); |
|
// Just to simulate the time of the request |
|
setTimeout(() => { |
|
this.listLoading = false; |
|
}, 1.0 * 1000); |
|
}, |
|
initChart1() { |
|
var paramType = this.paramType; |
|
this.chartInstance1 = echarts.init(this.$refs.details_ref); |
|
this.option1 = { |
|
tooltip: { |
|
trigger: "axis", |
|
// 使用 formatter 设定 tooltip 内容格式 |
|
formatter: function (params) { |
|
let seriesHTML = ""; |
|
params.forEach(function (item) { |
|
seriesHTML += |
|
"<div>" + |
|
item.seriesName + |
|
': <span style="color: #000000; font-weight: bold;">' + |
|
item.value + |
|
"</span></div>"; |
|
}); |
|
return "<div>" + params[0].name + "</div>" + seriesHTML; |
|
}, |
|
// 自定义 tooltip 内容 |
|
formatter: function (params) { |
|
var res = params[0].name + "<br/>"; |
|
for (var i = 0, l = params.length; i < l; i++) { |
|
var seriesName = params[i].seriesName; |
|
var value = params[i].value; |
|
// console.log("打印颜色", params[i].color.colorStops[0].color) |
|
var marker = |
|
'<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + |
|
params[i].color.colorStops[0].color + |
|
'"></span>'; |
|
// 根据不同的seriesName 返回不同的单位 |
|
if ( |
|
(seriesName === "本期" || seriesName === "同期") && |
|
paramType === "cloud" |
|
) { |
|
res += |
|
marker + |
|
seriesName + |
|
":" + |
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
|
value + |
|
" " + |
|
"kwr" + |
|
"</span><br>"; |
|
} else if ( |
|
(seriesName === "本期" || seriesName === "同期") && |
|
paramType === "meter" |
|
) { |
|
res += |
|
marker + |
|
seriesName + |
|
":" + |
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
|
value + |
|
" " + |
|
"kwh" + |
|
"</span><br>"; |
|
} else if ( |
|
(seriesName === "本期" || seriesName === "同期") && |
|
paramType === "cop" |
|
) { |
|
res += |
|
marker + |
|
seriesName + |
|
":" + |
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
|
value + |
|
" " + |
|
"</span><br>"; |
|
} else { |
|
res += |
|
marker + |
|
seriesName + |
|
":" + |
|
'<span style="color: #000000; font-weight: bold;margin-left:5px">' + |
|
value + |
|
" " + |
|
"%" + |
|
"</span><br>"; |
|
} |
|
} |
|
return res; |
|
}, |
|
}, |
|
legend: { |
|
data: ["本期", "同期", "同比", "环比"], |
|
textStyle: { |
|
color: "#ffff", |
|
fontSize: 16, //这里改字体大小 |
|
}, |
|
left: "41%", |
|
top: "0%", |
|
bottom: "10%", |
|
//图例距离饼图的距离 |
|
itemGap: 50, |
|
itemWidth: 16, |
|
itemHeight: 8, |
|
}, |
|
grid: { |
|
top: "20%", |
|
left: "3%", |
|
right: "4%", |
|
bottom: "0%", |
|
containLabel: true, |
|
}, |
|
xAxis: { |
|
type: "category", |
|
//设置为true代表离零刻度间隔一段距离 |
|
boundaryGap: true, |
|
// 修饰刻度标签的颜色即x坐标数据 |
|
axisLabel: { |
|
// interval: 0, //强制显示所有x轴数据 |
|
// rotate: 30, //x轴坐标字体倾斜30度 |
|
color: "rgba(255, 255, 255, 1)", |
|
}, |
|
axisTick: { |
|
show: false, // 不显示坐标轴刻度线 |
|
}, |
|
// x坐标轴的颜色 |
|
axisLine: { |
|
show: true, |
|
lineStyle: { |
|
color: "#365576", |
|
}, |
|
}, |
|
splitLine: { |
|
lineStyle: { |
|
color: "#e2e6f0", |
|
}, |
|
}, |
|
}, |
|
yAxis: [ |
|
{ |
|
type: "value", |
|
name: "本期、同期", // 第一个 y 轴的单位描述 |
|
nameTextStyle: { |
|
fontSize: 15, // 调整字体大小 |
|
color: "#fff", // 调整字体颜色 |
|
// 其他样式属性... |
|
}, |
|
// 修饰刻度标签的颜色即y坐标数据 |
|
axisLabel: { |
|
color: "rgba(255, 255, 255, 1)", |
|
}, |
|
// 显示y坐标轴 |
|
axisLine: { |
|
show: true, |
|
lineStyle: { |
|
color: "#365576", // 设置 y 轴线的颜色 |
|
}, |
|
}, |
|
splitLine: { |
|
lineStyle: { |
|
color: "#1a3d62", // 设置分割线的颜色 |
|
type: "dashed", // 设置分割线为虚线 |
|
}, |
|
}, |
|
}, |
|
{ |
|
type: "value", |
|
name: "同比、环比", // 第二个 y 轴的单位描述 |
|
nameTextStyle: { |
|
fontSize: 15, // 调整字体大小 |
|
color: "#fff", // 调整字体颜色 |
|
// 其他样式属性... |
|
}, |
|
// 修饰刻度标签的颜色即y坐标数据 |
|
axisLabel: { |
|
color: "rgba(255, 255, 255, 1)", |
|
formatter: "{value} %", |
|
}, |
|
// 显示y坐标轴 |
|
axisLine: { |
|
show: true, |
|
lineStyle: { |
|
color: "#365576", // 设置 y 轴线的颜色 |
|
}, |
|
}, |
|
splitLine: { |
|
lineStyle: { |
|
color: "#1a3d62", // 设置分割线的颜色 |
|
type: "dashed", // 设置分割线为虚线 |
|
}, |
|
}, |
|
// min: Min2, |
|
// max: Max2, |
|
// splitNumber: 10, |
|
// interval: (Max2 - Min2) / 10, |
|
}, |
|
], |
|
series: [ |
|
{ |
|
name: "本期", |
|
type: "bar", |
|
smooth: true, |
|
symbol: "circle", |
|
// 拐点大小 |
|
symbolSize: 8, |
|
|
|
// 开始不显示拐点， 鼠标经过显示 |
|
showSymbol: false, |
|
//折线颜色 |
|
itemStyle: { |
|
color: "#0b75d3", |
|
// 使用颜色渐变 |
|
color: { |
|
type: "linear", |
|
x: 0, |
|
y: 0, |
|
x2: 0, |
|
y2: 1, |
|
colorStops: [ |
|
{ |
|
offset: 0, |
|
color: "rgba(1, 102, 251, 1)", // 起始颜色 |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(1, 102, 251, 0)", // 结束颜色 |
|
}, |
|
], |
|
global: false, // 缺省为 false |
|
}, |
|
borderRadius: [5, 5, 0, 0], // 分别对应左上、右上、右下、左下的圆角半径 |
|
}, |
|
}, |
|
{ |
|
name: "同期", |
|
type: "bar", |
|
smooth: true, |
|
symbol: "circle", |
|
// 拐点大小 |
|
symbolSize: 8, |
|
// 开始不显示拐点， 鼠标经过显示 |
|
showSymbol: false, |
|
//折线颜色 |
|
itemStyle: { |
|
color: "#0b75d3", |
|
// 使用颜色渐变 |
|
color: { |
|
type: "linear", |
|
x: 0, |
|
y: 0, |
|
x2: 0, |
|
y2: 1, |
|
colorStops: [ |
|
{ |
|
offset: 0, |
|
color: "rgba(0, 224, 225, 1)", // 起始颜色 |
|
}, |
|
{ |
|
offset: 1, |
|
color: "rgba(0, 224, 225, 0)", // 结束颜色 |
|
}, |
|
], |
|
global: false, // 缺省为 false |
|
}, |
|
borderRadius: [5, 5, 0, 0], |
|
}, |
|
}, |
|
{ |
|
name: "同比", |
|
type: "line", |
|
smooth: false, |
|
symbol: "circle", |
|
// 拐点大小 |
|
symbolSize: 8, |
|
yAxisIndex: 1, |
|
// 开始不显示拐点， 鼠标经过显示 |
|
showSymbol: false, |
|
//折线颜色 |
|
itemStyle: { |
|
color: "#EE5217", //折线点的颜色 |
|
color: { |
|
type: "linear", |
|
x: 0, |
|
y: 0, |
|
x2: 0, |
|
y2: 1, |
|
colorStops: [ |
|
{ |
|
offset: 0, |
|
color: "#EE5217", // 起始颜色 |
|
}, |
|
{ |
|
offset: 1, |
|
color: "#EE5217", // 结束颜色 |
|
}, |
|
], |
|
global: false, // 缺省为 false |
|
}, |
|
lineStyle: { |
|
color: "#EE5217", //折线的颜色 |
|
}, |
|
}, |
|
}, |
|
{ |
|
name: "环比", |
|
type: "line", |
|
smooth: false, |
|
symbol: "circle", |
|
// 拐点大小 |
|
symbolSize: 8, |
|
yAxisIndex: 1, |
|
// 开始不显示拐点， 鼠标经过显示 |
|
showSymbol: false, |
|
//折线颜色 |
|
itemStyle: { |
|
color: "#f0ad01", //折线点的颜色 |
|
color: { |
|
type: "linear", |
|
x: 0, |
|
y: 0, |
|
x2: 0, |
|
y2: 1, |
|
colorStops: [ |
|
{ |
|
offset: 0, |
|
color: "#f0ad01", // 起始颜色 |
|
}, |
|
{ |
|
offset: 1, |
|
color: "#f0ad01", // 结束颜色 |
|
}, |
|
], |
|
global: false, // 缺省为 false |
|
}, |
|
lineStyle: { |
|
color: "#f0ad01", //折线的颜色 |
|
}, |
|
}, |
|
}, |
|
], |
|
}; |
|
//把配置项给实例对象 |
|
this.chartInstance1.setOption(this.option1, true); |
|
}, |
|
// 折线图自适应 |
|
screenAdapter() { |
|
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
|
const titleFontSize = (this.$refs.details_ref.offsetWidth / 100) * 1.8; |
|
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
|
const adapterOption = { |
|
//比如fontSize |
|
textStyle: { |
|
fontSize: titleFontSize, |
|
}, |
|
}; |
|
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
|
this.chartInstance1.setOption(adapterOption); |
|
//手动的调用图标对象的resize才能产生效果 |
|
this.chartInstance1.resize(); |
|
}, |
|
// 导出 |
|
exportData() { |
|
this.exportArr = []; |
|
for (var i = 0; i < this.dateList.length; i++) { |
|
var newData = { |
|
dateList: this.dateList[i], |
|
curValue2: this.curValue2[i], |
|
lastValue2: this.lastValue2[i], |
|
yoy2: this.yoy2[i], |
|
mom2: this.mom2[i], |
|
}; |
|
this.exportArr.push(newData); |
|
} |
|
|
|
// // console.log("导出的数据", this.exportArr); |
|
// import("@/assets/excel/Export2Excel").then((excel) => { |
|
// let filterVal = ["dateList", "curValue2", "lastValue2", "yoy2", "mom2"]; // 导出的excel表头字段名，需要导出表格字段名 |
|
// let tHeader = ["时间", "本期", "同期", "同比", "环比"]; // 导出的excel表头名信息 |
|
// const data = this.formatJson(filterVal, this.exportArr); |
|
// const autoWidth = true; |
|
// excel.export_json_to_excel({ |
|
// header: tHeader, //表头 |
|
// data, //数据 |
|
// filename: `${this.checkList}同比环比分析报表`, //名称 |
|
// autoWidth: true, //宽度自适应 |
|
// }); |
|
// this.$message.success("导出成功!"); |
|
// }); |
|
}, |
|
//格式转换,不需要改动 |
|
formatJson(filterVal, jsonData) { |
|
return jsonData.map((v) => |
|
filterVal.map((j) => { |
|
if (j === "installDate") { |
|
return format(v[j]); |
|
} else { |
|
return v[j]; |
|
} |
|
}) |
|
); |
|
}, |
|
}, |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.condition-left { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
flex-wrap: wrap; |
|
|
|
.years-div { |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
|
|
.years-word { |
|
font-size: 14px; |
|
margin: 0 5px; |
|
color: #388ff3; |
|
} |
|
} |
|
|
|
.time-label { |
|
font-size: 16px; |
|
line-height: 7px; |
|
margin-right: 12px; |
|
white-space: nowrap; |
|
} |
|
} |
|
.charts-title { |
|
font-size: 0.24rem; |
|
line-height: 0.07rem; |
|
letter-spacing: 0.02rem; |
|
color: #1f70e9; |
|
margin: 0.3rem 0; |
|
width: 100%; |
|
text-align: center; |
|
} |
|
.main-content { |
|
min-height: 6.6rem; |
|
} |
|
|
|
.analysis-table table thead th { |
|
min-width: 1.6rem; |
|
} |
|
|
|
.details_ref { |
|
width: 16.5rem; |
|
height: 3.55rem; |
|
margin-bottom: 0.39rem; |
|
margin-left: -0.3rem; |
|
} |
|
|
|
.condition-btn { |
|
display: flex; |
|
flex-direction: row; |
|
overflow: hidden; |
|
cursor: pointer; |
|
border-radius: 4px; |
|
margin-right: 0.24rem; |
|
background-color: #324868; |
|
|
|
.legend-li { |
|
text-align: center; |
|
line-height: 100%; |
|
padding: 7px 13px; |
|
white-space: nowrap; |
|
font-size: 16px; |
|
color: #9eb5cf; |
|
display: flex; |
|
flex-direction: row; |
|
align-items: center; |
|
justify-content: center; |
|
} |
|
|
|
.timeStyle2 { |
|
color: #ffffff !important; |
|
background-color: #2886e3; |
|
border: 1px solid #2886e3; |
|
border-radius: 4px; |
|
} |
|
} |
|
|
|
// 媒体查询，适配大于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; |
|
} |
|
} |
|
} |
|
.condition-btn { |
|
border-radius: 0.04rem !important; |
|
|
|
.legend-li { |
|
padding: 0.07rem 0.13rem !important; |
|
font-size: 0.16rem !important; |
|
} |
|
|
|
.timeStyle2 { |
|
border-radius: 0.04rem !important; |
|
} |
|
} |
|
} |
|
</style>
|
|
|