|
@@ -1,56 +1,73 @@
|
|
<template>
|
|
<template>
|
|
- <div style="width: 100%;height: 100%" >
|
|
|
|
- <div style="width: 100%;background-color: transparent;height: 1%;display:inline-block">
|
|
|
|
- <div class="filter">
|
|
|
|
- <div class="startTime">
|
|
|
|
- <span class="timeText">间隔时间</span>
|
|
|
|
- <el-select v-model="jgTime" placeholder="请选择" @change="changeJgTime">
|
|
|
|
- <el-option
|
|
|
|
- v-for="item in jgTimes"
|
|
|
|
- :key="item.value"
|
|
|
|
- :label="item.label"
|
|
|
|
- :value="item.value">
|
|
|
|
- </el-option>
|
|
|
|
- </el-select>
|
|
|
|
- <vxe-button style="background:transparent;border:none" @click="exportDataEvent"><i class="vxe-icon--download" style="color: white"></i></vxe-button>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- </div>
|
|
|
|
- <div class="tableContent" style="padding-top: 10px">
|
|
|
|
-
|
|
|
|
- <vxe-table
|
|
|
|
- id="weatherStationStatusDataTable"
|
|
|
|
- ref="wTable"
|
|
|
|
- border
|
|
|
|
- @sort-change="sortChangeEvent"
|
|
|
|
- :loading="loading"
|
|
|
|
- export-config
|
|
|
|
- :custom-config="{storage: true, checkMethod: checkColumnMethod}"
|
|
|
|
- :auto-resize="true"
|
|
|
|
- highlight-hover-row
|
|
|
|
- :header-cell-style="{background:'black',color:'white'}"
|
|
|
|
- max-height="90%"
|
|
|
|
- :cell-style="{background:'black',color:'white'}"
|
|
|
|
- align="center"
|
|
|
|
- :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)">
|
|
|
|
- <vxe-table-column field="time" title="接收时间" :formatter="dateFormat" min-width="150" sortable ></vxe-table-column>
|
|
|
|
- <vxe-table-column field="globalR" title="总辐射" min-width="60"></vxe-table-column>
|
|
|
|
- <vxe-table-column field="directR" title="直接辐射" min-width="60"></vxe-table-column>
|
|
|
|
- <vxe-table-column field="diffuseR" title="散射辐射" min-width="60"></vxe-table-column>
|
|
|
|
- <vxe-table-column field="obliqueR" title="斜面辐射" min-width="60"></vxe-table-column>
|
|
|
|
- <vxe-table-column field="airT" title="环境温度" min-width="60"></vxe-table-column>
|
|
|
|
- <vxe-table-column field="p" title="气压" min-width="60"></vxe-table-column>
|
|
|
|
- <vxe-table-column field="rh" title="湿度"min-width="60"></vxe-table-column>
|
|
|
|
- <vxe-table-column field="cellT" title="背板温度" min-width="60"></vxe-table-column>
|
|
|
|
- <vxe-table-column field="ws" title="风速" min-width="60"></vxe-table-column>
|
|
|
|
- <vxe-table-column field="wd" title="风向" min-width="60"></vxe-table-column>
|
|
|
|
- <vxe-table-column field="hourDA" title="日照小时数" min-width="60"></vxe-table-column>
|
|
|
|
- <vxe-table-column field="globalRDA" title="总辐射日累计" min-width="60"></vxe-table-column>
|
|
|
|
- <vxe-table-column field="directRDA" title="直接辐射日累计" min-width="60"></vxe-table-column>
|
|
|
|
- <vxe-table-column field="diffuseRDA" title="散射辐射日累计" min-width="60"></vxe-table-column>
|
|
|
|
- <vxe-table-column field="obliqueRDA" title="斜面辐射日累计" min-width="60"></vxe-table-column>
|
|
|
|
- </vxe-table>
|
|
|
|
|
|
+ <div class="chart-container">
|
|
|
|
+ <div class="filter">
|
|
|
|
+ <span style="font-weight: bold;font-size: 14px">场站名称:</span>
|
|
|
|
+ <el-select style="width:250px" clearable v-model="stationCode" size="small" @change="stationCodeChange">
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in stationList"
|
|
|
|
+ :key="item.stationCode"
|
|
|
|
+ :label="item.name"
|
|
|
|
+ :value="item.stationCode">
|
|
|
|
+ <span style="float: left">{{ item.name }}</span>
|
|
|
|
+ <span style="float: right; color: #8492a6;font-size: 13px">{{ item.stationCode }}</span>
|
|
|
|
+ </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ <span style="font-weight: bold;font-size: 14px">气象站:</span>
|
|
|
|
+ <el-select v-model="weatherStationInfoId" clearable placeholder="请选择">
|
|
|
|
+ <el-option
|
|
|
|
+ v-for="item in weatherStationInfos"
|
|
|
|
+ :key="item.id"
|
|
|
|
+ :label="item.name"
|
|
|
|
+ :value="item.id">
|
|
|
|
+ </el-option>
|
|
|
|
+ </el-select>
|
|
|
|
+ <span style="font-weight: bold;font-size: 14px">起始时间:</span>
|
|
|
|
+ <el-date-picker
|
|
|
|
+ v-model="startTime"
|
|
|
|
+ :clearable="false"
|
|
|
|
+ type="datetime"
|
|
|
|
+ value-format="timestamp"
|
|
|
|
+ placeholder="选择日期">
|
|
|
|
+ </el-date-picker>
|
|
|
|
+ <span style="font-weight: bold;font-size: 14px">截止时间:</span>
|
|
|
|
+ <el-date-picker
|
|
|
|
+ v-model="endTime"
|
|
|
|
+ :clearable="false"
|
|
|
|
+ type="datetime"
|
|
|
|
+ value-format="timestamp"
|
|
|
|
+ placeholder="选择日期">
|
|
|
|
+ </el-date-picker>
|
|
|
|
+ <el-button :loading=loading size="small" @click="queryData">查询</el-button>
|
|
</div>
|
|
</div>
|
|
|
|
+ <vxe-table
|
|
|
|
+ id="weatherStationStatusDataTable"
|
|
|
|
+ ref="wTable"
|
|
|
|
+ :loading="loading"
|
|
|
|
+ border
|
|
|
|
+ @sort-change="sortChangeEvent"
|
|
|
|
+ :auto-resize="true"
|
|
|
|
+ highlight-hover-row
|
|
|
|
+ max-height="90%"
|
|
|
|
+ :resizable="true"
|
|
|
|
+ align="center"
|
|
|
|
+ :data="tableData">
|
|
|
|
+ <vxe-table-column field="time" title="接收时间" :formatter="dateFormat" min-width="150" sortable ></vxe-table-column>
|
|
|
|
+ <vxe-table-column field="globalR" title="总辐射" min-width="60"></vxe-table-column>
|
|
|
|
+ <vxe-table-column field="directR" title="直接辐射" min-width="60"></vxe-table-column>
|
|
|
|
+ <vxe-table-column field="diffuseR" title="散射辐射" min-width="60"></vxe-table-column>
|
|
|
|
+ <vxe-table-column field="obliqueR" title="斜面辐射" min-width="60"></vxe-table-column>
|
|
|
|
+ <vxe-table-column field="airT" title="环境温度" min-width="60"></vxe-table-column>
|
|
|
|
+ <vxe-table-column field="p" title="气压" min-width="60"></vxe-table-column>
|
|
|
|
+ <vxe-table-column field="rh" title="湿度"min-width="60"></vxe-table-column>
|
|
|
|
+ <vxe-table-column field="cellT" title="背板温度" min-width="60"></vxe-table-column>
|
|
|
|
+ <vxe-table-column field="ws" title="风速" min-width="60"></vxe-table-column>
|
|
|
|
+ <vxe-table-column field="wd" title="风向" min-width="60"></vxe-table-column>
|
|
|
|
+ <vxe-table-column field="hourDA" title="日照小时数" min-width="60"></vxe-table-column>
|
|
|
|
+ <vxe-table-column field="globalRDA" title="总辐射日累计" min-width="60"></vxe-table-column>
|
|
|
|
+ <vxe-table-column field="directRDA" title="直接辐射日累计" min-width="60"></vxe-table-column>
|
|
|
|
+ <vxe-table-column field="diffuseRDA" title="散射辐射日累计" min-width="60"></vxe-table-column>
|
|
|
|
+ <vxe-table-column field="obliqueRDA" title="斜面辐射日累计" min-width="60"></vxe-table-column>
|
|
|
|
+ </vxe-table>
|
|
<div class="rtPageturning">
|
|
<div class="rtPageturning">
|
|
<vxe-pager
|
|
<vxe-pager
|
|
:loading="loading"
|
|
:loading="loading"
|
|
@@ -67,54 +84,21 @@
|
|
|
|
|
|
<script>
|
|
<script>
|
|
export default {
|
|
export default {
|
|
- watch: {
|
|
|
|
- // 如果 `question` 发生改变,这个函数就会运行
|
|
|
|
- queryTime: function(newQuestion, oldQuestion) {
|
|
|
|
- var queryTimeList = newQuestion.split(",")
|
|
|
|
- this.currentPage = 1
|
|
|
|
- this.startTime=Number(queryTimeList[0])
|
|
|
|
- this.endTime=Number(queryTimeList[1])
|
|
|
|
- this.weatherStationInfoId = Number(queryTimeList[2])
|
|
|
|
- this.eqTimeInterval()
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- props: {
|
|
|
|
- width: {
|
|
|
|
- type: String,
|
|
|
|
- default: '200px'
|
|
|
|
- },
|
|
|
|
- height: {
|
|
|
|
- type: String,
|
|
|
|
- default: '200px'
|
|
|
|
- },
|
|
|
|
- queryTime:{
|
|
|
|
- type:String,
|
|
|
|
- },
|
|
|
|
- },
|
|
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- startTime:'',
|
|
|
|
- endTime: '',
|
|
|
|
|
|
+ stationCode: '',
|
|
|
|
+ stationList: [],
|
|
|
|
+ startTime:new Date(new Date().toLocaleDateString()).getTime(),
|
|
|
|
+ endTime:new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000-1,
|
|
tableData:[],
|
|
tableData:[],
|
|
total:0,
|
|
total:0,
|
|
sortOrder:'asc',
|
|
sortOrder:'asc',
|
|
pageSize: 10,
|
|
pageSize: 10,
|
|
currentPage: 1,
|
|
currentPage: 1,
|
|
- weatherStationInfoId:'',
|
|
|
|
|
|
+ weatherStationInfos: [],
|
|
|
|
+ weatherStationInfoId: '',
|
|
columns:[],
|
|
columns:[],
|
|
loading:false,
|
|
loading:false,
|
|
- jgTime:3600000,
|
|
|
|
- jgTimes:[
|
|
|
|
- {label: "1分钟",value:60000},
|
|
|
|
- {label: "15分钟",value:900000},
|
|
|
|
- {label: "1小时",value:3600000}
|
|
|
|
- ],
|
|
|
|
- displayConfigJgTime:{
|
|
|
|
- id:"",
|
|
|
|
- displayCode:"timeInterval",
|
|
|
|
- showCode:"",
|
|
|
|
- hiddenCode:""
|
|
|
|
- },
|
|
|
|
displayConfigPageSize:{
|
|
displayConfigPageSize:{
|
|
id:"",
|
|
id:"",
|
|
displayCode:"pageSize",
|
|
displayCode:"pageSize",
|
|
@@ -124,55 +108,67 @@
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted() {
|
|
mounted() {
|
|
-
|
|
|
|
|
|
+ this.getStationList()
|
|
},
|
|
},
|
|
-
|
|
|
|
methods: {
|
|
methods: {
|
|
- exportDataEvent() {
|
|
|
|
|
|
+ queryData(){
|
|
|
|
+ let queryParam = this.stationCode;
|
|
|
|
+ if (queryParam==''){
|
|
|
|
+ this.$message.error("请选择场站")
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
|
|
+ let infoId = this.weatherStationInfoId;
|
|
|
|
+ if (infoId==''){
|
|
|
|
+ this.$message.error("请选择气象站")
|
|
|
|
+ return;
|
|
|
|
+ }
|
|
this.loading = true
|
|
this.loading = true
|
|
- this.$axios.get('export/weatherStationStatusData/'+this.startTime+'/'+this.endTime+'/'+this.weatherStationInfoId+'/'+this.jgTime+'?sortOrder='+this.sortOrder, {
|
|
|
|
- responseType: 'blob'// 用于解决中文乱码
|
|
|
|
- }).then((response) => {
|
|
|
|
|
|
+ if(this.endTime<=this.startTime){
|
|
|
|
+ this.$message.error("开始时间不能小于结束时间")
|
|
|
|
+ this.startTime = this.queryStartTime
|
|
|
|
+ this.endTime = this.queryEndTime
|
|
this.loading = false
|
|
this.loading = false
|
|
- }).catch((error) => {
|
|
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ if(this.endTime-this.startTime> 60 * 60 * 24 * 1000*3){
|
|
|
|
+ this.startTime = this.queryStartTime
|
|
|
|
+ this.endTime = this.queryEndTime
|
|
|
|
+ this.$message.error("只能最多查询3天的数据")
|
|
this.loading = false
|
|
this.loading = false
|
|
- this.$message.error('导出失败' + error)
|
|
|
|
- })
|
|
|
|
|
|
+ return
|
|
|
|
+ }
|
|
|
|
+ this.queryStartTime = this.startTime
|
|
|
|
+ this.queryEndTime = this.endTime
|
|
|
|
+ this.getTable()
|
|
},
|
|
},
|
|
- eqTimeInterval(){
|
|
|
|
- this.$axios.get('displayConfig/eqTimeInterval').then((res) => {
|
|
|
|
- this.displayConfigJgTime = res.data
|
|
|
|
- this.jgTime = parseInt(this.displayConfigJgTime.showCode)
|
|
|
|
- this.getTable()
|
|
|
|
- // this.$message.success('间隔时间获取成功' )
|
|
|
|
- this.dialogVisible = false
|
|
|
|
- }).catch((error) => {
|
|
|
|
- this.$message.error('间隔时间获取出错' + error)
|
|
|
|
- })
|
|
|
|
- this.$axios.get('displayConfig/pageSize').then((res) => {
|
|
|
|
- this.displayConfigPageSize = res.data
|
|
|
|
- this.pageSize = parseInt(this.displayConfigPageSize.showCode)
|
|
|
|
- // this.$message.success('PageSize获取成功' )
|
|
|
|
- this.dialogVisible = false
|
|
|
|
- }).catch((error) => {
|
|
|
|
- this.$message.error('PageSize获取出错' + error)
|
|
|
|
- })
|
|
|
|
|
|
+ stationCodeChange() {
|
|
|
|
+ // 获取逆变器设备
|
|
|
|
+ let queryParam = this.stationCode;
|
|
|
|
+ if (queryParam==''){
|
|
|
|
+ // 清除设备下拉框
|
|
|
|
+ this.weatherStationInfos = ''
|
|
|
|
+ }
|
|
|
|
+ else{
|
|
|
|
+ this.$axios.get('/weatherStationInfo/' + queryParam).then((res) => {
|
|
|
|
+ this.weatherStationInfos = res.data
|
|
|
|
+ })
|
|
|
|
+ }
|
|
},
|
|
},
|
|
- changeJgTime(){
|
|
|
|
- this.displayConfigJgTime.showCode = this.jgTime
|
|
|
|
- this.$axios.post('displayConfig/',this.displayConfigJgTime).then((res) => {
|
|
|
|
- this.displayConfigJgTime = res.data
|
|
|
|
- // this.$message.success('间隔时间设置成功' )
|
|
|
|
- this.dialogVisible = false
|
|
|
|
- this.getTable(this.startTime,this.endTime)
|
|
|
|
|
|
+ getStationList() {
|
|
|
|
+ this.$axios.get('/electricField/getElectricField').then((res) => {
|
|
|
|
+ this.stationList = res.data
|
|
}).catch((error) => {
|
|
}).catch((error) => {
|
|
- this.$message.error('间隔时间设置出错' + error)
|
|
|
|
|
|
+ this.$message.error('获取场站下拉框出错' + error)
|
|
})
|
|
})
|
|
},
|
|
},
|
|
getTable(){
|
|
getTable(){
|
|
this.loading = true
|
|
this.loading = true
|
|
this.$emit('sendLoading', this.loading)
|
|
this.$emit('sendLoading', this.loading)
|
|
- this.$axios.get('/weatherStationStatusData/'+this.startTime+'/'+this.endTime+'/'+this.weatherStationInfoId+'/'+this.jgTime+'?sortOrder='+this.sortOrder).then((res) => {
|
|
|
|
|
|
+ let weatherStationId = this.weatherStationInfoId;
|
|
|
|
+ if (weatherStationId==''){
|
|
|
|
+ weatherStationId="ALL"
|
|
|
|
+ }
|
|
|
|
+ this.$axios.get('/weatherStationStatusData/'+this.stationCode+'/'+this.startTime+'/'+this.endTime+'/'+this.currentPage+'/'+this.pageSize+'/'+weatherStationId).then((res) => {
|
|
this.tableData = res.data.content
|
|
this.tableData = res.data.content
|
|
// 表分页格数据总条数
|
|
// 表分页格数据总条数
|
|
this.total = res.data.count
|
|
this.total = res.data.count
|
|
@@ -196,14 +192,20 @@
|
|
},
|
|
},
|
|
handlePageChange ({ currentPage, pageSize }) {
|
|
handlePageChange ({ currentPage, pageSize }) {
|
|
this.currentPage = currentPage
|
|
this.currentPage = currentPage
|
|
- if(this.pageSize!=pageSize){
|
|
|
|
- this.changePageSize(pageSize)
|
|
|
|
- }
|
|
|
|
this.pageSize = pageSize
|
|
this.pageSize = pageSize
|
|
- // this.getTable();
|
|
|
|
|
|
+ this.startTime = this.queryStartTime
|
|
|
|
+ this.endTime = this.queryEndTime
|
|
|
|
+ this.getTable();
|
|
},
|
|
},
|
|
dateFormat({ cellValue, row, column }) {
|
|
dateFormat({ cellValue, row, column }) {
|
|
- return this.$XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
|
|
|
|
|
|
+ const date = new Date(cellValue) // 时间戳为10位需*1000,时间戳为13位的话不需乘1000
|
|
|
|
+ const Y = date.getFullYear() + '-'
|
|
|
|
+ const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
|
|
|
|
+ const D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
|
|
|
|
+ const H = (date.getHours() < 10 ? '0' + (date.getHours()) : date.getHours()) + ':'
|
|
|
|
+ const m = (date.getMinutes() < 10 ? '0' + (date.getMinutes()) : date.getMinutes()) + ':'
|
|
|
|
+ const s = (date.getSeconds() < 10 ? '0' + (date.getSeconds()) : date.getSeconds())
|
|
|
|
+ return Y + M + D + H + m + s
|
|
},
|
|
},
|
|
sortChangeEvent ({ column, property, order }) {
|
|
sortChangeEvent ({ column, property, order }) {
|
|
if(order == null){
|
|
if(order == null){
|
|
@@ -223,60 +225,8 @@
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
<style scoped>
|
|
<style scoped>
|
|
- .tableContent{
|
|
|
|
- width: 100%;
|
|
|
|
- height:90%;
|
|
|
|
- }
|
|
|
|
- .tableContent >>> td{
|
|
|
|
- border:1px solid #ffffff;
|
|
|
|
- }
|
|
|
|
- .rtPageturning{
|
|
|
|
- width: 100%;
|
|
|
|
- height: 10%;
|
|
|
|
- }
|
|
|
|
- .rtPageturning >>> button,
|
|
|
|
- .rtPageturning >>> span,
|
|
|
|
- .rtPageturning >>> input,
|
|
|
|
- .rtPageturning >>> .vxe-pager--btn-wrapper li{
|
|
|
|
- background-color: transparent !important;
|
|
|
|
- color: #ffffff !important;
|
|
|
|
- border: 1px solid #ffffff;
|
|
|
|
- }
|
|
|
|
- .rtPageturning >>> span{
|
|
|
|
- border:none
|
|
|
|
- }
|
|
|
|
- .rtPageturning >>> .vxe-pager--wrapper .vxe-pager--btn-wrapper li:not(.disabled).is--active {
|
|
|
|
- background-color: #9f9fa0 !important;
|
|
|
|
- }
|
|
|
|
- .tableContent >>> .vxe-button.type--button.is--circle {
|
|
|
|
- padding: 0 .5em;
|
|
|
|
- min-width: 34px;
|
|
|
|
- border-radius: 10%;
|
|
|
|
- border: none;
|
|
|
|
- background: transparent;
|
|
|
|
- color: white;
|
|
|
|
- }
|
|
|
|
- .timeText{
|
|
|
|
|
|
|
|
- display:inline-block;
|
|
|
|
- opacity:0.69;
|
|
|
|
- padding-right:7px;
|
|
|
|
- font-size:14px;
|
|
|
|
- }
|
|
|
|
- .filter{
|
|
|
|
- position:relative;
|
|
|
|
- display:flex;
|
|
|
|
- padding:0px 0px 10px 10px;
|
|
|
|
- font-size:12px;
|
|
|
|
- line-height:11px;
|
|
|
|
- color:white;
|
|
|
|
- }
|
|
|
|
- .filter >>> input{
|
|
|
|
- background:transparent;
|
|
|
|
- border:none;
|
|
|
|
- color:white;
|
|
|
|
- }
|
|
|
|
- .startTime{
|
|
|
|
- display:inline-block;
|
|
|
|
|
|
+ .my_table_insert .vxe-body--row.is--new {
|
|
|
|
+ background-color: #f1fdf1;
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|