Compare commits
37 Commits
v-lijf43
22 changed files with 2174 additions and 1333 deletions
|
Before Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 13 MiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,391 @@
|
||||
<template> |
||||
<div class="app-container"> |
||||
<div class="btn-condition"> |
||||
<div class="condition-left" v-show="showSearch"> |
||||
<el-form |
||||
:model="queryParams" |
||||
ref="queryForm" |
||||
size="small" |
||||
:inline="true" |
||||
> |
||||
<el-form-item label="日期" prop="msgCode"> |
||||
<el-date-picker |
||||
style="width: auto" |
||||
v-model="monthValue" |
||||
type="month" |
||||
placeholder="选择月" |
||||
value-format="yyyy-MM" |
||||
> |
||||
</el-date-picker> |
||||
</el-form-item> |
||||
</el-form> |
||||
<div class="primary-btn"> |
||||
<el-button |
||||
type="primary" |
||||
icon="el-icon-search" |
||||
size="mini" |
||||
@click="handleQuery" |
||||
>搜索</el-button |
||||
> |
||||
</div> |
||||
<div class="cancel-btn"> |
||||
<el-button |
||||
type="cancel" |
||||
icon="el-icon-refresh" |
||||
size="mini" |
||||
@click="resetQuery" |
||||
>重置</el-button |
||||
> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-row :gutter="10" class="mb8"> |
||||
<!-- <el-col :span="1.5"> |
||||
<div class="warning-btn" v-hasPermi="['system:post:export']"> |
||||
<el-button |
||||
type="warning" |
||||
icon="el-icon-download" |
||||
size="mini" |
||||
@click="handleExport" |
||||
>导出</el-button |
||||
> |
||||
</div> |
||||
</el-col> --> |
||||
</el-row> |
||||
<div class="charts" ref="chart_ref"></div> |
||||
<el-table |
||||
v-loading="loading" |
||||
:data="postList" |
||||
stripe |
||||
:cell-style="tableRowStyle" |
||||
> |
||||
<el-table-column label="日期" align="center" prop="dateAndWeek" /> |
||||
<el-table-column label="最高气温" align="center" prop="maxTemp" /> |
||||
<el-table-column label="最低气温" align="center" prop="minTemp" /> |
||||
<el-table-column label="天气" align="center" prop="weatherConditions" /> |
||||
<el-table-column label="风向" align="center" prop="windDirection" /> |
||||
</el-table> |
||||
|
||||
<pagination |
||||
v-show="total > 0" |
||||
:total="total" |
||||
:page.sync="queryParams.pageNum" |
||||
:limit.sync="queryParams.pageSize" |
||||
@pagination="getList" |
||||
/> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { weatherTempData } from "@/api/centerairC/temHistory"; |
||||
import * as echarts from "echarts"; |
||||
export default { |
||||
name: "temHistoryQuery", |
||||
data() { |
||||
return { |
||||
// 遮罩层 |
||||
loading: true, |
||||
// 选中数组 |
||||
ids: [], |
||||
// 非单个禁用 |
||||
single: true, |
||||
// 非多个禁用 |
||||
multiple: true, |
||||
// 显示搜索条件 |
||||
showSearch: true, |
||||
// 总条数 |
||||
total: 0, |
||||
// 表格数据 |
||||
postList: [], |
||||
// 弹出层标题 |
||||
title: "", |
||||
// 是否显示弹出层 |
||||
open: false, |
||||
// 查询参数 |
||||
queryParams: { |
||||
pageNum: 1, |
||||
pageSize: 10, |
||||
startTime: "", |
||||
endTime: "", |
||||
}, |
||||
monthValue: "", |
||||
chartInstance: null, |
||||
option: {}, |
||||
}; |
||||
}, |
||||
created() { |
||||
// 获取当前日期 |
||||
const currentDate = new Date(); |
||||
// 获取当前年份 |
||||
const year = currentDate.getFullYear(); |
||||
// 获取当前月份，注意月份是从 0 开始的，所以要加 1 |
||||
const month = String(currentDate.getMonth() + 1).padStart(2, "0"); |
||||
// 格式化日期为 yyyy-MM 格式 |
||||
this.monthValue = `${year}-${month}`; |
||||
}, |
||||
mounted() { |
||||
this.getList(); |
||||
this.initChart(); |
||||
window.addEventListener("resize", this.screenAdapter); |
||||
this.screenAdapter(); |
||||
this.getChartData(); |
||||
}, |
||||
methods: { |
||||
tableRowStyle({ row, column, rowIndex, columnIndex }) { |
||||
// 修改颜色 |
||||
if (columnIndex === 1) { |
||||
return "color: #fd1e00;!important;text-align:center"; |
||||
} |
||||
if (columnIndex === 2) { |
||||
return "color: #3390ff;!important;text-align:center"; |
||||
} |
||||
if (columnIndex === 4) { |
||||
return "color: #75d148;!important;text-align:center"; |
||||
} |
||||
// return "text-align:center"; |
||||
}, |
||||
/** 查询报警编码列表 */ |
||||
getList() { |
||||
this.loading = true; |
||||
this.queryParams.startTime = this.queryParams.endTime = this.monthValue; |
||||
console.log("参数", this.queryParams); |
||||
weatherTempData(this.queryParams).then((response) => { |
||||
this.postList = response.rows; |
||||
this.total = response.total; |
||||
this.loading = false; |
||||
}); |
||||
}, |
||||
getChartData() { |
||||
this.loading = true; |
||||
this.queryParams.pageNum = 0; |
||||
this.queryParams.startTime = this.queryParams.endTime = this.monthValue; |
||||
console.log("图表参数", this.queryParams); |
||||
weatherTempData(this.queryParams).then((response) => { |
||||
console.log("处理值然后渲染"); |
||||
if (response.rows.length > 0) { |
||||
let data = response.rows; |
||||
let timeValue = []; |
||||
let hightValue = []; |
||||
let lowValue = []; |
||||
data.forEach((element) => { |
||||
timeValue.push(element.weatherDate); |
||||
hightValue.push(element.maxTemp); |
||||
lowValue.push(element.minTemp); |
||||
}); |
||||
let adapterOption = {}; |
||||
adapterOption = { |
||||
xAxis: { |
||||
data: timeValue, |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: hightValue, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "rgb(18, 126, 226)", //折线的颜色 |
||||
}, |
||||
lineStyle: { |
||||
color: "rgb(18, 126, 226)", //折线点的颜色 |
||||
}, |
||||
}, |
||||
{ |
||||
data: lowValue, |
||||
//折线颜色 |
||||
itemStyle: { |
||||
color: "rgb(250, 169, 19)", //折线的颜色 |
||||
}, |
||||
lineStyle: { |
||||
color: "rgb(250, 169, 19)", //折线点的颜色 |
||||
}, |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
} else { |
||||
let adapterOption = {}; |
||||
adapterOption = { |
||||
xAxis: { |
||||
data: [], |
||||
}, |
||||
series: [ |
||||
{ |
||||
data: [], |
||||
}, |
||||
{ |
||||
data: [], |
||||
}, |
||||
], |
||||
}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
} |
||||
}); |
||||
}, |
||||
/** 搜索按钮操作 */ |
||||
handleQuery() { |
||||
this.queryParams.pageNum = 1; |
||||
this.getList(); |
||||
this.getChartData(); |
||||
}, |
||||
/** 重置按钮操作 */ |
||||
resetQuery() { |
||||
this.handleQuery(); |
||||
}, |
||||
/** 导出按钮操作 */ |
||||
handleExport() { |
||||
this.download( |
||||
"device/gateway/export", |
||||
{ |
||||
...this.queryParams, |
||||
}, |
||||
`post_${new Date().getTime()}.xlsx` |
||||
); |
||||
}, |
||||
// 折线图自适应+ 根据按钮切换图例仅限一条且不可点击+ 折线图数据 |
||||
screenAdapter() { |
||||
//自己定义的比较合适的适配大小,2.6 mes_ref是图表盒子 |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 130; |
||||
//因为option可以多次配置的，所以这里的option只需要写 需要配置大小的相关数据 |
||||
const adapterOption = {}; |
||||
//记得重新给配置项给实例对象。只要实例对象.chartInstance不变，option就可以多次配置不同的条件。也可以配置一个dataoption只写需要从后台请求的数据相关 |
||||
this.chartInstance.setOption(adapterOption); |
||||
//手动的调用图标对象的resize才能产生效果 |
||||
this.chartInstance.resize(); |
||||
}, |
||||
//初始化chartInstance对象 |
||||
initChart() { |
||||
this.chartInstance = echarts.init(this.$refs.chart_ref); |
||||
const titleFontSize = this.$refs.chart_ref.offsetWidth / 100; |
||||
this.option = { |
||||
tooltip: { |
||||
// 设置触发方式为 axis，鼠标移动到 x 轴对应位置时触发 |
||||
trigger: "axis", |
||||
textStyle: { |
||||
// 设置提示框内文字的大小 |
||||
fontSize: titleFontSize, |
||||
}, |
||||
}, |
||||
legend: { |
||||
show: false, |
||||
// textStyle: { |
||||
// // 设置图例文字的大小 |
||||
// fontSize: 14 |
||||
// } |
||||
}, |
||||
grid: { |
||||
top: "10%", |
||||
left: "4%", |
||||
right: "6%", |
||||
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: titleFontSize, //x轴文字大小 |
||||
}, |
||||
axisTick: { |
||||
show: false, // 不显示坐标轴刻度线 |
||||
}, |
||||
// x坐标轴的颜色 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", |
||||
}, |
||||
}, |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#e2e6f0", |
||||
}, |
||||
}, //x轴分割线 |
||||
}, |
||||
yAxis: { |
||||
min: 0, |
||||
// max:20, |
||||
// name: "kwh", // 第一个 y 轴的单位描述 |
||||
// 设置 name 的样式 |
||||
nameTextStyle: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: 12, //y轴单位文字大小 |
||||
}, |
||||
miniInterval: 5, |
||||
type: "value", |
||||
// 修饰刻度标签的颜色即y坐标数据 |
||||
axisLabel: { |
||||
color: "rgba(255, 255, 255, 1)", |
||||
fontSize: titleFontSize, //x轴文字大小 |
||||
}, |
||||
// 显示y坐标轴 |
||||
axisLine: { |
||||
show: true, |
||||
lineStyle: { |
||||
color: "#365576", // 设置 y 轴线的颜色 |
||||
}, |
||||
}, |
||||
//y轴分割线段数 |
||||
// splitNumber: 10, |
||||
// 修改y轴分割线的颜色 |
||||
splitLine: { |
||||
lineStyle: { |
||||
color: "#1a3d62", // 设置分割线的颜色 |
||||
type: "dashed", // 设置分割线为虚线 |
||||
}, |
||||
}, |
||||
}, |
||||
series: [ |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: titleFontSize * 0.5, |
||||
lineStyle: { |
||||
// 设置折线的厚度 |
||||
width: titleFontSize * 0.1, |
||||
}, |
||||
symbol: "circle", |
||||
name: "最高气温", |
||||
}, |
||||
{ |
||||
type: "line", |
||||
// 拐点大小 |
||||
symbolSize: titleFontSize * 0.5, |
||||
lineStyle: { |
||||
// 设置折线的厚度 |
||||
width: titleFontSize * 0.1, |
||||
}, |
||||
symbol: "circle", |
||||
name: "最低气温", |
||||
}, |
||||
], |
||||
}; |
||||
//把配置项给实例对象 |
||||
this.chartInstance.setOption(this.option, true); |
||||
}, |
||||
}, |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.charts { |
||||
width: 100%; |
||||
height: 300px; |
||||
margin-bottom: 0.1rem; |
||||
} |
||||
// 媒体查询，适配大于2000px分辨率的大屏样式 |
||||
@media (min-width: 2000px) { |
||||
.charts { |
||||
height: 3rem !important; |
||||
} |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue