|
|
@@ -0,0 +1,299 @@
|
|
|
+<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">
|
|
|
+ <vxe-grid
|
|
|
+ id="windTowerStatusDataTable"
|
|
|
+ border
|
|
|
+ show-header-overflow
|
|
|
+ show-overflow
|
|
|
+ export-config
|
|
|
+ highlight-hover-row
|
|
|
+ @sort-change="sortChangeEvent"
|
|
|
+ :toolbar="tableToolbar"
|
|
|
+ :custom-config="{storage: true, checkMethod: checkColumnMethod}"
|
|
|
+ :auto-resize="true"
|
|
|
+ :header-cell-style="{background:'black',color:'white'}"
|
|
|
+ max-height="91%"
|
|
|
+ :cell-style="{background:'black',color:'white'}"
|
|
|
+ align="center"
|
|
|
+ :sort-config="{remote:'true'}"
|
|
|
+ :loading="loading"
|
|
|
+ :columns="tableColumn"
|
|
|
+ :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"></vxe-grid>
|
|
|
+ </div>
|
|
|
+ <div class="rtPageturning">
|
|
|
+ <vxe-pager
|
|
|
+ background
|
|
|
+ :loading="loading"
|
|
|
+ :current-page="currentPage"
|
|
|
+ :page-size="pageSize"
|
|
|
+ :total="total"
|
|
|
+ @page-change="handlePageChange"
|
|
|
+ :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
|
|
|
+ </vxe-pager>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ 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.windTowerInfoId = Number(queryTimeList[2])
|
|
|
+ this.windTowerInfoName = queryTimeList[3]
|
|
|
+ this.eqTimeInterval()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ queryTime:{
|
|
|
+ type:String,
|
|
|
+ },
|
|
|
+ thFormat:{
|
|
|
+ type:Array
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ startTime: new Date(new Date().toLocaleDateString()).getTime(),
|
|
|
+ endTime: new Date(new Date().toLocaleDateString()).getTime() + 60 * 60 * 24 * 1000 - 1,
|
|
|
+ thLoadSign:true,
|
|
|
+ loading:false,
|
|
|
+ tableData:[],
|
|
|
+ total:0,
|
|
|
+ sortOrder:'asc',
|
|
|
+ pageSize: 10,
|
|
|
+ currentPage: 1,
|
|
|
+ windTowerInfoId:'',
|
|
|
+ windTowerInfoName:'',
|
|
|
+ tableHead:[],
|
|
|
+ tablePage: {
|
|
|
+ total: 0,
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ align: 'right',
|
|
|
+ pageSizes: [10, 20, 50, 100, 200, 500],
|
|
|
+ layouts: ['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total'],
|
|
|
+ perfect: true
|
|
|
+ },
|
|
|
+ tableToolbar: {
|
|
|
+ custom: true
|
|
|
+ },
|
|
|
+ tableColumn: [
|
|
|
+ { field: 'time', title: '接入时间',formatter:this.dateFormat,sortable:true,width:"180" },
|
|
|
+ { field: 'equipmentNo', title: '设备编号',minWidth:"130",formatter:this.nameFormat },
|
|
|
+ ],
|
|
|
+ jgTime:3600000,
|
|
|
+ jgTimes:[
|
|
|
+ {label: "1分钟",value:60000},
|
|
|
+ {label: "15分钟",value:900000},
|
|
|
+ {label: "1小时",value:3600000}
|
|
|
+ ],
|
|
|
+ displayConfigJgTime:{
|
|
|
+ id:"",
|
|
|
+ displayCode:"timeInterval",
|
|
|
+ showCode:"",
|
|
|
+ hiddenCode:""
|
|
|
+ },
|
|
|
+ displayConfigPageSize:{
|
|
|
+ id:"",
|
|
|
+ displayCode:"pageSize",
|
|
|
+ showCode:"",
|
|
|
+ hiddenCode:""
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ exportDataEvent() {
|
|
|
+ this.loading = true
|
|
|
+ this.$axios.get('export/windTowerStatusData/'+this.startTime+'/'+this.endTime+'/'+this.windTowerInfoId+'/'+this.jgTime+'?sortOrder='+this.sortOrder, {
|
|
|
+ responseType: 'blob'// 用于解决中文乱码
|
|
|
+ }).then((response) => {
|
|
|
+ this.loading = false
|
|
|
+ }).catch((error) => {
|
|
|
+ this.loading = false
|
|
|
+ this.$message.error('导出失败' + error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ 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)
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message.error('间隔时间设置出错' + error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getTable(){
|
|
|
+ this.loading = true
|
|
|
+ this.$emit('sendLoading', this.loading)
|
|
|
+ this.$axios.get('/windTowerStatusData/'+this.startTime+'/'+this.endTime+'/'+this.windTowerInfoId+'/'+this.jgTime+'?sortOrder='+this.sortOrder).then((res) => {
|
|
|
+ this.tableData = res.data.content
|
|
|
+ // 表分页格数据总条数
|
|
|
+ this.total = res.data.count
|
|
|
+ //表头
|
|
|
+ this.tableHead = res.data.tableHead
|
|
|
+
|
|
|
+ this.tableColumn = [
|
|
|
+ { field: 'time', title: '接入时间',formatter:this.dateFormat,sortable:true,width:"180" },
|
|
|
+ { field: 'equipmentNo', title: '设备编号',minWidth:"130",formatter:this.nameFormat },
|
|
|
+ ]
|
|
|
+
|
|
|
+ //只加载一次
|
|
|
+ for(var i = 0 ;i<this.tableHead.length;i++){
|
|
|
+ var th = new Object();
|
|
|
+ th.field = this.tableHead[i]
|
|
|
+ for(var j = 0;j<this.thFormat.length;j++){
|
|
|
+ if(this.tableHead[i] == this.thFormat[j].key ){
|
|
|
+ th.title = this.thFormat[j].value
|
|
|
+ }
|
|
|
+ }
|
|
|
+ th.minWidth = "130"
|
|
|
+ this.tableColumn.push(th)
|
|
|
+ }
|
|
|
+
|
|
|
+ this.thLoadSign = false
|
|
|
+
|
|
|
+
|
|
|
+ this.loading = false
|
|
|
+ this.$emit('sendLoading', this.loading)
|
|
|
+
|
|
|
+ }).catch((error) => {
|
|
|
+ this.loading = false
|
|
|
+ this.$emit('sendLoading', this.loading)
|
|
|
+ this.$message.error('查询table出错' + error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ changePageSize(pageSize){
|
|
|
+ this.displayConfigPageSize.showCode = pageSize
|
|
|
+ this.$axios.post('displayConfig/',this.displayConfigPageSize).then((res) => {
|
|
|
+ this.displayConfigPageSize = res.data
|
|
|
+ // this.$message.success('PageSize设置成功' )
|
|
|
+ }).catch((error) => {
|
|
|
+ this.$message.error('PageSize设置出错' + error)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handlePageChange ({ currentPage, pageSize }) {
|
|
|
+ this.currentPage = currentPage
|
|
|
+ if(this.pageSize!=pageSize){
|
|
|
+ this.changePageSize(pageSize)
|
|
|
+ }
|
|
|
+ this.pageSize = pageSize
|
|
|
+ // this.getTable();
|
|
|
+ },
|
|
|
+ dateFormat({ cellValue, row, column }) {
|
|
|
+ return this.$XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:mm:ss')
|
|
|
+ },
|
|
|
+ nameFormat({ cellValue, row, column }) {
|
|
|
+ return this.windTowerInfoName
|
|
|
+ },
|
|
|
+ sortChangeEvent ({ column, property, order }) {
|
|
|
+ if(order == null){
|
|
|
+ order = 'asc'
|
|
|
+ }
|
|
|
+ this.currentPage = 1
|
|
|
+ this.sortOrder = order
|
|
|
+ this.getTable()
|
|
|
+ },
|
|
|
+ checkColumnMethod ({ column }) {
|
|
|
+ if (column.property === 'time') {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ return true
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<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;
|
|
|
+ }
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+</style>
|
xusl