|
@@ -0,0 +1,445 @@
|
|
|
+<template>
|
|
|
+ <div class="chart-container">
|
|
|
+ <div class="filter">
|
|
|
+ <div class="startTime">
|
|
|
+ <span class="timeText">起始时间</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="startTime"
|
|
|
+ :clearable="false"
|
|
|
+ type="datetime"
|
|
|
+ value-format="timestamp"
|
|
|
+ placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div class="endTime">
|
|
|
+ <span class="timeText">截止时间</span>
|
|
|
+ <el-date-picker
|
|
|
+ v-model="endTime"
|
|
|
+ :clearable="false"
|
|
|
+ type="datetime"
|
|
|
+ value-format="timestamp"
|
|
|
+ placeholder="选择日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span class="timeText">设备编号</span>
|
|
|
+ <el-select v-model="windTurbineInfoId" multiple filterable placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in windTurbineInfos"
|
|
|
+ :key="item.id"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="timeQuery">
|
|
|
+ <el-button :loading=loading size="small" @click="dateQuery">查询</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <!--<el-tabs type="card" v-model="activeName" >-->
|
|
|
+ <!--<el-tab-pane label="指定风机" name="first">-->
|
|
|
+ <div class="tableContent">
|
|
|
+ <vxe-table
|
|
|
+ id="wtNoTable"
|
|
|
+ ref="wtNoTable"
|
|
|
+ :loading="loading"
|
|
|
+ border
|
|
|
+ export-config
|
|
|
+ @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="wtDataNo">
|
|
|
+ <vxe-table-column field="time" title="接收时间" :formatter="dateFormat" min-width="150" sortable ></vxe-table-column>
|
|
|
+ <vxe-table-column field="equipmentNo" 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="windWheelRatedSpeed" title="转速(rpm)"min-width="60"></vxe-table-column>
|
|
|
+ <vxe-table-column field="ws" title="风速(m/s)"min-width="60"></vxe-table-column>
|
|
|
+ <vxe-table-column field="wd" title="风向(°)"min-width="60"></vxe-table-column>
|
|
|
+ <vxe-table-column field="t" title="温度(℃)"min-width="60"></vxe-table-column>
|
|
|
+ <vxe-table-column field="pitchAngle" 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>
|
|
|
+ <!--</el-tab-pane>-->
|
|
|
+ <!--<el-tab-pane label="所有风机" name="second">-->
|
|
|
+ <!--<div class="tableContent">-->
|
|
|
+ <!--<vxe-table-->
|
|
|
+ <!--id="wtAllTable"-->
|
|
|
+ <!--ref="wtAllTable"-->
|
|
|
+ <!--border-->
|
|
|
+ <!--:loading="loading"-->
|
|
|
+ <!--export-config-->
|
|
|
+ <!--@sort-change="sortChangeEventAll"-->
|
|
|
+ <!--:sync-resize="startTime"-->
|
|
|
+ <!--:auto-resize="true"-->
|
|
|
+ <!--:sort-config="{remote:'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="wtDataAll">-->
|
|
|
+ <!--<vxe-table-column field="time" title="接收时间" :formatter="dateFormat" min-width="150" sortable ></vxe-table-column>-->
|
|
|
+ <!--<vxe-table-column field="equipmentNo" title="编号" min-width="60" sortable></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="windWheelRatedSpeed" title="转速(rpm)"min-width="60"></vxe-table-column>-->
|
|
|
+ <!--<vxe-table-column field="ws" title="风速(m/s)"min-width="60"></vxe-table-column>-->
|
|
|
+ <!--<vxe-table-column field="wd" title="风向(°)"min-width="60"></vxe-table-column>-->
|
|
|
+ <!--<vxe-table-column field="t" title="温度(℃)"min-width="60"></vxe-table-column>-->
|
|
|
+ <!--<vxe-table-column field="pitchAngle" title="桨距角(°)"min-width="60"></vxe-table-column>-->
|
|
|
+ <!--</vxe-table>-->
|
|
|
+ <!--<div class="rtPageturning">-->
|
|
|
+ <!--<vxe-toolbar ref="wtAllToolbar" export></vxe-toolbar>-->
|
|
|
+ <!--<vxe-pager-->
|
|
|
+ <!--:loading="loading"-->
|
|
|
+ <!--background-->
|
|
|
+ <!--:current-page.sync="currentPageAll"-->
|
|
|
+ <!--:page-size.sync="pageSizeAll"-->
|
|
|
+ <!--:total="totalAll"-->
|
|
|
+ <!--@page-change="handlePageChangeAll"-->
|
|
|
+ <!--:layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">-->
|
|
|
+ <!--</vxe-pager>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</div>-->
|
|
|
+ <!--</el-tab-pane>-->
|
|
|
+ <!--</el-tabs>-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'inverterTable',
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ loading:false,
|
|
|
+ queryStartTime:"",
|
|
|
+ queryEndTime:"",
|
|
|
+ startTime:new Date(new Date().toLocaleDateString()).getTime(),
|
|
|
+ endTime:new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000-1,
|
|
|
+ windTurbineInfoId:[],
|
|
|
+ windTurbineInfos:[],
|
|
|
+ wtDataNo:[],
|
|
|
+ wtDataAll:[],
|
|
|
+ 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.wtAllTable.connect(this.$refs.wtAllToolbar)
|
|
|
+ this.$refs.wtNoTable.connect(this.$refs.wtNoToolbar)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ mounted(){
|
|
|
+ this.querywtInfo()
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ querywtInfo() {
|
|
|
+ this.loading = true
|
|
|
+ this.$axios.get('/windTurbineInfos').then((res) => {
|
|
|
+ if (res.data != null && res.data.length > 0) {
|
|
|
+ this.windTurbineInfos = res.data
|
|
|
+ this.windTurbineInfoId.push(this.windTurbineInfos[0].id)
|
|
|
+ this.queryStartTime = this.startTime
|
|
|
+ this.queryEndTime = this.endTime
|
|
|
+ this.querywtDataNo()
|
|
|
+ // this.querywtDataAll()
|
|
|
+ } else {
|
|
|
+ this.loading = false
|
|
|
+ this.$message.warning("没有风机设备信息")
|
|
|
+ }
|
|
|
+ }).catch((error) => {
|
|
|
+ this.loading = false
|
|
|
+ this.$message.error('查询风机设备信息出错' + error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ querywtDataNo(){
|
|
|
+ this.loading=true
|
|
|
+ this.$axios.get('/windTurbineStatusData/'+this.queryStartTime+'/'+this.queryEndTime+'/'+this.currentPageNo+'/'+this.pageSizeNo+'/'+this.windTurbineInfoId+'?timeSortOrder='+this.sortOrderTime+'&noSortOrder='+this.sortOrderNumber).then((res) => {
|
|
|
+ this.wtDataNo = res.data.content
|
|
|
+ // 表分页格数据总条数
|
|
|
+ this.totalNo = res.data.count
|
|
|
+ this.loading=false
|
|
|
+ }).catch((error) => {
|
|
|
+ this.loading=false
|
|
|
+ this.$message.error('查询风机根据number出错' + error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // querywtDataAll(){
|
|
|
+ // this.loading=true
|
|
|
+ // this.$axios.get('/windTurbineStatusData/'+this.queryStartTime+'/'+this.queryEndTime+'/'+this.currentPageAll+'/'+this.pageSizeAll+'?timeSortOrder='+this.sortOrderTime+'&noSortOrder='+this.sortOrderNumber).then((res) => {
|
|
|
+ // this.wtDataAll = res.data.content
|
|
|
+ // // 表分页格数据总条数
|
|
|
+ // this.totalAll = res.data.count
|
|
|
+ // this.loading=false
|
|
|
+ // }).catch((error) => {
|
|
|
+ // this.loading=false
|
|
|
+ // this.$message.error('查询所有风机出错' + error)
|
|
|
+ // })
|
|
|
+ // },
|
|
|
+ dateQuery(){
|
|
|
+ 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*31){
|
|
|
+ this.startTime = this.queryStartTime
|
|
|
+ this.endTime = this.queryEndTime
|
|
|
+ this.$message.error("只能最多查询31天的数据哦")
|
|
|
+ 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.querywtDataNo()
|
|
|
+ this.currentPageAll = 1
|
|
|
+ // this.querywtDataAll()
|
|
|
+ },
|
|
|
+ sortChangeEventNo ({ column, property, order }) {
|
|
|
+ if(order == null){
|
|
|
+ order = 'asc'
|
|
|
+ }
|
|
|
+ this.currentPageNo = 1
|
|
|
+ this.sortOrderNo = order
|
|
|
+ this.querywtDataNo()
|
|
|
+ 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.querywtDataAll()
|
|
|
+ this.startTime = this.queryStartTime
|
|
|
+ this.endTime = this.queryEndTime
|
|
|
+ },
|
|
|
+ checkColumnMethod ({ column }) {
|
|
|
+ if (column.property === 'time') {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ nameFormat({ cellValue, row, column }) {
|
|
|
+ var name ='未知设备'
|
|
|
+ for(let index in this.windTurbineInfos) {
|
|
|
+ if(cellValue == this.windTurbineInfos[index].id){
|
|
|
+ name = this.windTurbineInfos[index].name
|
|
|
+ }
|
|
|
+ };
|
|
|
+ return name
|
|
|
+ },
|
|
|
+ handlePageChangeNo ({ currentPage, pageSize }) {
|
|
|
+ this.currentPageNo = currentPage
|
|
|
+ this.pageSizeNo = pageSize
|
|
|
+ this.querywtDataNo();
|
|
|
+ this.startTime = this.queryStartTime
|
|
|
+ this.endTime = this.queryEndTime
|
|
|
+ },
|
|
|
+ handlePageChangeAll({ currentPage, pageSize }){
|
|
|
+ this.currentPageAll = currentPage
|
|
|
+ this.pageSizeAll = pageSize
|
|
|
+ // this.querywtDataAll();
|
|
|
+ this.startTime = this.queryStartTime
|
|
|
+ this.endTime = this.queryEndTime
|
|
|
+ },exportDataEvent() {
|
|
|
+ this.loading = true
|
|
|
+ this.$axios.get('/export/windTurbineStatusData/'+this.queryStartTime+'/'+this.queryEndTime+'/'+this.windTurbineInfoId, {
|
|
|
+ responseType: 'blob'// 用于解决中文乱码
|
|
|
+ }).then((response) => {
|
|
|
+ this.loading = false
|
|
|
+ }).catch((error) => {
|
|
|
+ this.loading = false
|
|
|
+ this.$message.error('导出失败' + error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .chart-container{
|
|
|
+ position:relative;
|
|
|
+ width:100%;
|
|
|
+ height:calc(100vh - 50px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter{
|
|
|
+ position:relative;
|
|
|
+ display:flex;
|
|
|
+ padding:20px 0 10px 15px;
|
|
|
+ font-size:12px;
|
|
|
+ line-height:11px;
|
|
|
+ color:white;
|
|
|
+ width: 100%;
|
|
|
+ background-color: transparent;
|
|
|
+ height: 10%;
|
|
|
+ }
|
|
|
+
|
|
|
+ input{
|
|
|
+ background:transparent;
|
|
|
+ border:none;
|
|
|
+ color:white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .timeText{
|
|
|
+ opacity:0.69;
|
|
|
+ padding-right:7px;
|
|
|
+ font-size:14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .startTime{
|
|
|
+ display:inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ .endTime{
|
|
|
+ display:inline-block;
|
|
|
+ padding-left:42px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .timeQuery{
|
|
|
+ margin-left: 2%;
|
|
|
+ background:transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button{
|
|
|
+ background:transparent;
|
|
|
+ color:white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .filter >>> input{
|
|
|
+ background:transparent;
|
|
|
+ border:none;
|
|
|
+ color:white;
|
|
|
+ }
|
|
|
+
|
|
|
+ .rtPageturning{
|
|
|
+ width: 100%;
|
|
|
+ height: 10%;
|
|
|
+ display: flex;
|
|
|
+ justify-content:space-between
|
|
|
+ }
|
|
|
+ .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{
|
|
|
+ width: 100%;
|
|
|
+ height:calc(80vh - 50px);
|
|
|
+ }
|
|
|
+ .tableContent >>> td{
|
|
|
+ border:1px solid #ffffff;
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ width: 100%;
|
|
|
+ background-color: transparent;
|
|
|
+ height: 90%;
|
|
|
+ padding-left: 5px;
|
|
|
+ padding-right: 5px;
|
|
|
+ }
|
|
|
+ .content >>> .el-tabs__item{
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ .content >>> .el-tabs__item.is-active {
|
|
|
+ color: #409EFF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content >>> .vxe-button.type--button.is--circle{
|
|
|
+ padding: 0 .5em;
|
|
|
+ min-width: 34px;
|
|
|
+ border-radius: 10%;
|
|
|
+ border: none;
|
|
|
+ background: transparent;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+</style>
|
|
|
+
|