|
@@ -0,0 +1,288 @@
|
|
|
+<template>
|
|
|
+ <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="inverterInfoId" clearable placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in inverterInfos"
|
|
|
+ :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="dateQuery">查询</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <!--<el-tabs type="card" v-model="activeName" >-->
|
|
|
+ <!--<el-tab-pane label="指定逆变器" name="first">-->
|
|
|
+ <div class="tableContent">
|
|
|
+ <vxe-table
|
|
|
+ id="inverterNoTable"
|
|
|
+ ref="inTable"
|
|
|
+ :loading="loading"
|
|
|
+ border
|
|
|
+ @sort-change="sortChangeEventNo"
|
|
|
+ :auto-resize="true"
|
|
|
+ highlight-hover-row
|
|
|
+ :header-cell-style="{background:'black',color:'white',border:'white'}"
|
|
|
+ max-height="90%"
|
|
|
+ :resizable="true"
|
|
|
+ :cell-style="{background:'black',color:'white'}"
|
|
|
+ align="center"
|
|
|
+ :data="inverterStatusDataNo">
|
|
|
+ <vxe-table-column field="time" title="接收时间" :formatter="dateFormat" min-width="150" sortable ></vxe-table-column>
|
|
|
+ <vxe-table-column field="equipmentId" title="名称" min-width="60" :formatter="nameFormat"></vxe-table-column>
|
|
|
+ <vxe-table-column field="activePower" title="有功(KW)" min-width="60"></vxe-table-column>
|
|
|
+ <vxe-table-column field="reactivePower" title="无功(KW)" min-width="60"></vxe-table-column>
|
|
|
+ <vxe-table-column field="powerFactor" title="功率因数" min-width="60"></vxe-table-column>
|
|
|
+ <vxe-table-column field="voltage" title="电压(V)" min-width="60"></vxe-table-column>
|
|
|
+ <vxe-table-column field="electricalCurrent" title="电流(A)" min-width="60"></vxe-table-column>
|
|
|
+ <vxe-table-column field="dayElectricQuantity" title="当日发电量(kW·h)" min-width="60"></vxe-table-column>
|
|
|
+ <vxe-table-column field="dayGridConnectedHours" title="当日并网小时"min-width="60"></vxe-table-column>
|
|
|
+ <vxe-table-column field="status" title="状态"min-width="60"></vxe-table-column>
|
|
|
+ </vxe-table>
|
|
|
+ <div class="rtPageturning">
|
|
|
+ <div class="toolbar">
|
|
|
+ <vxe-toolbar ref="fstToolBar" >
|
|
|
+ <template v-slot:buttons>
|
|
|
+ <vxe-button style="background:transparent;border:none" @click="exportDataEvent"><i class="vxe-icon--download" style="color: white"></i></vxe-button>
|
|
|
+ </template>
|
|
|
+ </vxe-toolbar></div>
|
|
|
+ <vxe-pager
|
|
|
+ background
|
|
|
+ :loading="loading"
|
|
|
+ :current-page.sync="currentPageNo"
|
|
|
+ :page-size.sync="pageSizeNo"
|
|
|
+ :total="totalNo"
|
|
|
+ @page-change="handlePageChangeNo"
|
|
|
+ :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
|
|
|
+ </vxe-pager>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ stationCode: '',
|
|
|
+ stationList: [],
|
|
|
+ loading:false,
|
|
|
+ queryStartTime:"",
|
|
|
+ queryEndTime:"",
|
|
|
+ startTime:new Date(new Date().toLocaleDateString()).getTime(),
|
|
|
+ endTime:new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000-1,
|
|
|
+ inverterInfoId:[],
|
|
|
+ inverterInfos:[],
|
|
|
+ inverterStatusDataNo:[],
|
|
|
+ inverterStatusDataAll:[],
|
|
|
+ activeName: 'first',
|
|
|
+ totalNo:0,
|
|
|
+ pageSizeNo: 10,
|
|
|
+ currentPageNo: 1,
|
|
|
+ sortOrderNo:'asc',
|
|
|
+ totalAll:0,
|
|
|
+ pageSizeAll: 10,
|
|
|
+ currentPageAll: 1,
|
|
|
+ sortOrderTime:'asc',
|
|
|
+ sortOrderNumber:'asc',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created () {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 手动将表格和工具栏进行关联
|
|
|
+ this.$refs.inTable.connect(this.$refs.inverterToolbar)
|
|
|
+ // this.$refs.iaTable.connect(this.$refs.inverterAllToolbar)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.getStationList()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ stationCodeChange() {
|
|
|
+ // 获取逆变器设备
|
|
|
+ let queryParam = this.stationCode;
|
|
|
+ if (queryParam==''){
|
|
|
+ // 清除设备下拉框
|
|
|
+ this.inverterInfos = ''
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ this.$axios.get('/findInverterInfoByStation/' + queryParam).then((res) => {
|
|
|
+ this.inverterInfos = res.data
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getStationList() {
|
|
|
+ this.$axios.get('/electricField/getElectricField').then((res) => {
|
|
|
+ this.stationList = res.data
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message.error('获取场站下拉框出错' + error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ queryInverterDataNo(){
|
|
|
+ this.loading=true
|
|
|
+ let inverterId = this.inverterInfoId;
|
|
|
+ if (inverterId==''){
|
|
|
+ inverterId="ALL"
|
|
|
+ }
|
|
|
+ this.$axios.get('/inverterStatusData/'+this.stationCode+'/'+this.queryStartTime+'/'+this.queryEndTime+'/'+this.currentPageNo+'/'+this.pageSizeNo+'/'+inverterId).then((res) => {
|
|
|
+ this.inverterStatusDataNo = res.data.content
|
|
|
+ // 表分页格数据总条数
|
|
|
+ this.totalNo = res.data.count
|
|
|
+ this.loading=false
|
|
|
+ }).catch((error) => {
|
|
|
+ this.loading=false
|
|
|
+ this.$message.error('查询逆变器根据number出错' + error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ dateQuery(){
|
|
|
+ let queryParam = this.stationCode;
|
|
|
+ if (queryParam==''){
|
|
|
+ this.$message.error("请选择场站")
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.loading=true
|
|
|
+ if(this.endTime<=this.startTime){
|
|
|
+ this.$message.error("开始时间不能小于结束时间")
|
|
|
+ this.startTime = this.queryStartTime
|
|
|
+ this.endTime = this.queryEndTime
|
|
|
+ this.loading=false
|
|
|
+ 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
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.windTurbineInfoId=="") {
|
|
|
+ this.$message.error("设备选项不能为空")
|
|
|
+ this.loading=false
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.queryStartTime = this.startTime
|
|
|
+ this.queryEndTime = this.endTime
|
|
|
+ this.currentPageNo = 1
|
|
|
+ this.queryInverterDataNo()
|
|
|
+ this.currentPageAll = 1
|
|
|
+ },
|
|
|
+ sortChangeEventNo ({ column, property, order }) {
|
|
|
+ if(order == null){
|
|
|
+ order = 'asc'
|
|
|
+ }
|
|
|
+ this.currentPageNo = 1
|
|
|
+ this.sortOrderNo = order
|
|
|
+ this.queryInverterDataNo()
|
|
|
+ this.startTime = this.queryStartTime
|
|
|
+ this.endTime = this.queryEndTime
|
|
|
+ },
|
|
|
+ sortChangeEventAll ({ column, property, order }) {
|
|
|
+ if(order == null){
|
|
|
+ order = 'asc'
|
|
|
+ }
|
|
|
+
|
|
|
+ if(property == 'time'){
|
|
|
+ this.sortOrderTime = order
|
|
|
+ }
|
|
|
+
|
|
|
+ if(property == 'equipmentNo'){
|
|
|
+ this.sortOrderNumber = order
|
|
|
+ }
|
|
|
+ this.currentPageAll = 1
|
|
|
+ // this.queryInverterDataAll()
|
|
|
+ this.startTime = this.queryStartTime
|
|
|
+ this.endTime = this.queryEndTime
|
|
|
+ },
|
|
|
+ checkColumnMethod ({ column }) {
|
|
|
+ if (column.property === 'time') {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ dateFormat({ cellValue, row, column }) {
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ nameFormat({ cellValue, row, column }) {
|
|
|
+ var name ='未知设备'
|
|
|
+ for(let index in this.inverterInfos) {
|
|
|
+ if(cellValue == this.inverterInfos[index].id){
|
|
|
+ name = this.inverterInfos[index].name
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return name
|
|
|
+ },
|
|
|
+ handlePageChangeNo ({ currentPage, pageSize }) {
|
|
|
+ this.currentPageNo = currentPage
|
|
|
+ this.pageSizeNo = pageSize
|
|
|
+ this.startTime = this.queryStartTime
|
|
|
+ this.endTime = this.queryEndTime
|
|
|
+ this.queryInverterDataNo();
|
|
|
+ },
|
|
|
+ handlePageChangeAll({ currentPage, pageSize }){
|
|
|
+ this.currentPageAll = currentPage
|
|
|
+ this.pageSizeAll = pageSize
|
|
|
+ this.startTime = this.queryStartTime
|
|
|
+ this.endTime = this.queryEndTime
|
|
|
+ // this.queryInverterDataAll();
|
|
|
+ },
|
|
|
+ exportDataEvent() {
|
|
|
+ this.loading = true
|
|
|
+ this.$axios.get('/export/inverterStatusData/'+this.queryStartTime+'/'+this.queryEndTime+'/'+this.inverterInfoId, {
|
|
|
+ responseType: 'blob'// 用于解决中文乱码
|
|
|
+ }).then((response) => {
|
|
|
+ this.loading = false
|
|
|
+ }).catch((error) => {
|
|
|
+ this.loading = false
|
|
|
+ this.$message.error('导出失败' + error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+ .my_table_insert .vxe-body--row.is--new {
|
|
|
+ background-color: #f1fdf1;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|