提交内容

whychdw

2021-03-05 34ce414625429ba841e1b4e43fa4fa80f9a241b6

提交内容

 src/assets/js/apis/dataMager/powerMager.js

@@ -73,6 +73,32 @@
    });
  },
  /**
   * 查询电源的ＡＣＤＣ信息
   * @param id  电源的id
   * @returns {AxiosPromise}
   */
  getACDCData(id) {
    return axios({
      method: 'post',
      url: 'PowerACDCDataAction_power_getDataByDevId',
      data: 'json=' + JSON.stringify({
        powerDeviceId: id
      }),
    });
  },
  /**
   * 查询电源实时告警
   * @param data
   * @returns {AxiosPromise}
   */
  getAlarmData(data) {
    return axios({
      method: 'post',
      url: 'PowerAlarmAction_power_getAllPage',
      data: 'json=' + JSON.stringify(data),
    });
  },
  /**
   * 查询已经存在的机房站点
   *   @param   {[Object]}  data  电源设备ID
   */

 src/assets/js/axios.js

@@ -2,7 +2,7 @@
import axios from 'axios';
if(process.env.NODE_ENV == 'dev') {
    // 跨域请求
    axios.defaults.baseURL = 'http://localhost:8919/fg/';
    axios.defaults.baseURL = 'https://localhost:8443/fg/';
    axios.defaults.withCredentials = true;  // 保持请求头
}


 src/components/PageHeader.vue

@@ -314,6 +314,7 @@
        let rs = JSON.parse(res.data.result);
        if (rs.code == 1) {
          let data = rs.data[0];
          console.log(data);
          let totalDiscSpace = data.total_disc_space;
          // 设置服务器磁盘信息
          let disc_spance_percent = totalDiscSpace?((data.total_disc_space - data.free_disc_space) * 100 /totalDiscSpace ).toFixed(0):0;

 src/pages/alarmMager/powerRealtimeInfo.vue

@@ -1,699 +1,682 @@
<template>
    <flex-layout>
        <div slot="header">
            <div class="table-layout filter-box-table">
                <div class="table-row">
                    <div class="table-cell text-right">省：</div>
                    <div class="table-cell">
                        <el-select 
                        v-model="filters.values.province"
                        @change="searchCity"  
                        size="small" placeholder="请选择省">
                            <el-option
                            v-for="item in filters.data.province"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="table-cell text-right">市：</div>
                    <div class="table-cell">
                        <el-select 
                        v-model="filters.values.city"
                        @change="searchCounty"  
                        size="small" placeholder="请选择市">
                            <el-option
                            v-for="item in filters.data.city"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="table-cell text-right">区/县：</div>
                    <div class="table-cell">
                        <el-select 
                        v-model="filters.values.county"
                        @change="searchHome"  
                        size="small" placeholder="请选择区/县">
                            <el-option
                            v-for="item in filters.data.county"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="table-cell text-right">机房名称：</div>
                    <div class="table-cell w360">
                        <el-select 
                        v-model="filters.values.home"
                        @change="changeHome"  
                        size="small" placeholder="请选择机房名称">
                            <el-option
                            v-for="item in filters.data.home"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <!-- 过滤条件 -->
            <table class="condiOpt" border="1">
                <tr class="trTitle">
                    <td>
                        <center>交流A/B/C</center>
                    </td>
                    <td>
                        <center>整流器</center>
                    </td>
                    <td>
                        <center>故障</center>
                    </td>
                </tr>
                <tr class="trBody">
                    <td class="tdOne">
                        <ul class="inputOne">
                            <li v-for="(list,i) in checkboxs.jl" :key="i">
                                <el-checkbox v-model="list.model">{{ list.label }}</el-checkbox>
                            </li>
                        </ul>
                    </td>
                    <td class="tdOne">
                        <ul class="inputOne">
                            <li v-for="(list,i) in checkboxs.zlq" :key="i">
                                <el-checkbox v-model="list.model">{{ list.label }}</el-checkbox>
                            </li>
                        </ul>
                    </td>
                    <td class="tdOne">
                        <ul class="inputOne inputTwo">
                            <li v-for="(list,i) in checkboxs.gz" :key="i">
                                <el-checkbox v-model="list.model">{{ list.label }}</el-checkbox>
                            </li>
                        </ul>
                    </td>
                </tr>
                <tr class="trTitle">
                    <td>
                        <center>状态</center>
                    </td>
                    <td>
                        <center>电池组</center>
                    </td>
                    <td>
                        <center>交流输入</center>
                    </td>
                </tr>
                <tr class="trBody">
                    <td class="tdOne">
                        <ul class="inputOne">
                            <li v-for="(list,i) in checkboxs.zt" :key="i">
                                <el-checkbox v-model="list.model">{{ list.label }}</el-checkbox>
                            </li>
                        </ul>
                    </td>
                    <td class="tdOne">
                        <ul class="inputOne">
                            <li v-for="(list,i) in checkboxs.dcz" :key="i">
                                <el-checkbox v-model="list.model">{{ list.label }}</el-checkbox>
                            </li>
                        </ul>
                    </td>
                    <td class="tdOne">
                        <ul class="inputOne">
                            <li v-for="(list,i) in checkboxs.jlsr" :key="i">
                                <el-checkbox v-model="list.model">{{ list.label }}</el-checkbox>
                            </li>
                        </ul>
                    </td>
                </tr>
            </table>
        </div>
        <!-- 表单 -->
        <div class="flex-page-content">
            <el-table id="batteryrTimequeryTable" stripe size="small" :data="table.datas" height="100%" class="tableCent">
                <el-table-column label="编号" align="center" :width="50">
                    <template slot-scope="scope">
                        <span>{{ scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <el-table-column v-for="header in table.headers" :key="header.prop" :prop="header.prop" :label="header.label"
                 :width="header.width" :min-width="header.minWidth" align="center"></el-table-column>
                 <el-table-column label="确认告警时间" align="center" :width="180">
                    <template slot-scope="scope">
                        {{ scope.row.alarmConfirmedTimeStr }}
                    </template>
                </el-table-column>
                <el-table-column label="确认告警" align="center" :width="80">
                    <template slot-scope="scope">
                        <el-checkbox :value="scope.row.alarmIsConfirmed !=0" disabled></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column prop="cztime" fixed="right" width="257px" align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button :disabled="!isCanConfirm" type="primary" size="mini" @click="okAlarm(scope.row,1,'确认')">确认告警</el-button>
                        <el-button :disabled="!isCanQuit" type="success" size="mini" @click="okAlarm(scope.row,0,'取消')">取消确认</el-button>
                        <el-button :disabled="!isCanDel" type="danger" size="mini" @click="delteTim(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
  <flex-layout>
    <div slot="header">
      <div class="table-layout filter-box-table">
        <div class="table-row">
          <div class="table-cell text-right">省：</div>
          <div class="table-cell">
            <el-select
                v-model="filters.values.province"
                @change="searchCity"
                size="small" placeholder="请选择省">
              <el-option
                  v-for="item in filters.data.province"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="table-cell text-right">市：</div>
          <div class="table-cell">
            <el-select
                v-model="filters.values.city"
                @change="searchCounty"
                size="small" placeholder="请选择市">
              <el-option
                  v-for="item in filters.data.city"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="table-cell text-right">区/县：</div>
          <div class="table-cell">
            <el-select
                v-model="filters.values.county"
                @change="searchHome"
                size="small" placeholder="请选择区/县">
              <el-option
                  v-for="item in filters.data.county"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="table-cell text-right">机房名称：</div>
          <div class="table-cell w360">
            <el-select
                v-model="filters.values.home"
                @change="changeHome"
                size="small" placeholder="请选择机房名称">
              <el-option
                  v-for="item in filters.data.home"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <!-- 过滤条件 -->
      <table class="condiOpt" border="1">
        <tr class="trTitle">
          <td>
            <center>交流A/B/C</center>
          </td>
          <td>
            <center>整流器</center>
          </td>
          <td>
            <center>故障</center>
          </td>
        </tr>
        <tr class="trBody">
          <td class="tdOne">
            <ul class="inputOne">
              <li v-for="(list,i) in checkboxs.jl" :key="i">
                <el-checkbox v-model="list.model">{{ list.label }}</el-checkbox>
              </li>
            </ul>
          </td>
          <td class="tdOne">
            <ul class="inputOne">
              <li v-for="(list,i) in checkboxs.zlq" :key="i">
                <el-checkbox v-model="list.model">{{ list.label }}</el-checkbox>
              </li>
            </ul>
          </td>
          <td class="tdOne">
            <ul class="inputOne inputTwo">
              <li v-for="(list,i) in checkboxs.gz" :key="i">
                <el-checkbox v-model="list.model">{{ list.label }}</el-checkbox>
              </li>
            </ul>
          </td>
        </tr>
        <tr class="trTitle">
          <td>
            <center>状态</center>
          </td>
          <td>
            <center>电池组</center>
          </td>
          <td>
            <center>交流输入</center>
          </td>
        </tr>
        <tr class="trBody">
          <td class="tdOne">
            <ul class="inputOne">
              <li v-for="(list,i) in checkboxs.zt" :key="i">
                <el-checkbox v-model="list.model">{{ list.label }}</el-checkbox>
              </li>
            </ul>
          </td>
          <td class="tdOne">
            <ul class="inputOne">
              <li v-for="(list,i) in checkboxs.dcz" :key="i">
                <el-checkbox v-model="list.model">{{ list.label }}</el-checkbox>
              </li>
            </ul>
          </td>
          <td class="tdOne">
            <ul class="inputOne">
              <li v-for="(list,i) in checkboxs.jlsr" :key="i">
                <el-checkbox v-model="list.model">{{ list.label }}</el-checkbox>
              </li>
            </ul>
          </td>
        </tr>
      </table>
    </div>
    <!-- 表单 -->
    <div class="flex-page-content">
      <el-table id="batteryrTimequeryTable" stripe size="small" :data="table.datas" height="100%" class="tableCent">
        <el-table-column label="编号" align="center" :width="50">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column v-for="header in table.headers" :key="header.prop" :prop="header.prop" :label="header.label"
                         :width="header.width" :min-width="header.minWidth" align="center"></el-table-column>
        <el-table-column label="确认告警时间" align="center" :width="180">
          <template slot-scope="scope">
            {{ scope.row.alarmConfirmedTimeStr }}
          </template>
        </el-table-column>
        <el-table-column label="确认告警" align="center" :width="80">
          <template slot-scope="scope">
            <el-checkbox :value="scope.row.alarmIsConfirmed !=0" disabled></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column prop="cztime" fixed="right" width="257px" align="center" label="操作">
          <template slot-scope="scope">
            <el-button :disabled="!isCanConfirm" type="primary" size="mini" @click="okAlarm(scope.row,1,'确认')">确认告警
            </el-button>
            <el-button :disabled="!isCanQuit" type="success" size="mini" @click="okAlarm(scope.row,0,'取消')">取消确认
            </el-button>
            <el-button :disabled="!isCanDel" type="danger" size="mini" @click="delteTim(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

        <!-- 底部分页 -->
        <div class="flex-page-footer" slot="footer">
            <div class="el-pagination-btns">
                <el-button type="primary" round size="mini" icon="el-icon-search" @click="searchData">查询</el-button>
                <el-button type="primary" round size="mini" icon="el-icon-wallet" @click="exportFile">导出</el-button>
            </div>
            <el-pagination class="pagess" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum"
             :page-sizes="[10, 20, 30, 50, 100]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper"
             :total="total"></el-pagination>
            <!--  <el-button type="primary" round size="mini" icon="el-icon-wallet">全部选中</el-button> -->
        </div>
    </flex-layout>
    <!-- 底部分页 -->
    <div class="flex-page-footer" slot="footer">
      <div class="el-pagination-btns">
        <el-button type="primary" round size="mini" icon="el-icon-search" @click="startSearchData">查询</el-button>
        <el-button type="primary" round size="mini" icon="el-icon-wallet" @click="exportFile">导出</el-button>
      </div>
      <el-pagination class="pagess" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryInfo.pagenum"
                     :page-sizes="[10, 20, 30, 50, 100]" :page-size="queryInfo.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total"></el-pagination>
      <!--  <el-button type="primary" round size="mini" icon="el-icon-wallet">全部选中</el-button> -->
    </div>
  </flex-layout>
</template>

<script>
    import {getWsUrl} from "@/assets/js/tools";
    import { isHasPermit, Timeout, } from "../../assets/js/tools";
    // 引入导出表格
    import {export_json_to_excel} from '../../assets/js/excel/Export2Excel.js'
    import { checkboxs,estateFn } from '../../assets/js/alarmAdmian/powerInfoData'
    export default {
        data() {
            let permits = this.$store.state.user.permits;
            let isCanConfirm = isHasPermit('batt_alm_confirm_permit', permits);
            let isCanQuit = isHasPermit('batt_alm_clear_permit', permits);
            let isCanDel = isHasPermit('batt_alm_delete_permit', permits);
            return {
                isCanConfirm: isCanConfirm,
                isCanQuit: isCanQuit,
                isCanDel: isCanDel,
                queryInfo: {
                    pagenum: 1 /* 当前页码 绑定queryInfo.pagenum */ ,
                    pagesize: 10 /* 每页显示的数据 绑定queryInfo.pagesize */
                },
                total: 0 /* 总共有多少条 */ ,
                filters: {
                    values: {
                        province: '',
                        city: '',
                        county: '',
                        home: '',
                    },
                    data: {
                        province: [],
                        city: [],
                        county: [],
                        home: [],
                    },
                },
                checkboxs:checkboxs,
                /* 表单 */
                table: {
                    headers: [
                        {
                            prop: "stationName",
                            label: "机房名称",
                            minWidth: 220
                        },
                        {
                            prop: "alarmName",
                            label: "告警名称",
                            width: 162
                        },
                        {
                            prop: "alarmValue",
                            label: "告警值",
                            width: 80
                        },
                        {
                            prop: "estateStr",
                            label: "告警等级",
                            width: 120
                        },
                        {
                            prop: "alarmStartTime",
                            label: "告警开始时间",
                            width: 180
                        },
                    ],
                    datas: []
                },
                isOpen:false
            };
        },
        mounted() {
            this.searchProvince();//查询省
        },
        methods: {
            searchData() {
                // 初始化WebSocket
                this.close();
                this.initSocket();
            },
            initSocket() {
                // 未被初始化初始化
                if(!this.isOpen) {
                    const wsUri = getWsUrl("", 55001);
                    this.socket = new WebSocket(wsUri);
                    this.socket.onmessage = this.onMessage;
                    this.socket.onopen = this.onOpen;
                    this.socket.onerror = this.onError;
                    this.socket.onclose = this.close;
                }
            },
            onMessage(res) {
                let rs = JSON.parse(res.data);
                if (rs.code == 1 && rs.data && rs.data.obj.length > 0) {
                    this.total=rs.data.totalSize;
                    this.table.datas = rs.data.obj.map(function(item){
                        item.estateStr = estateFn(item.alarmLevel);
                        item.alarmConfirmedTimeStr = item.alarmIsConfirmed > 0?item.alarmConfirmedTime:"";
                        return item;
                    })
                }else {
                    this.total=0;
                    this.table.datas = [];
                }
            },
            onOpen() {
                // 标识正在运行
                this.isOpen = true;
import {getWsUrl} from "@/assets/js/tools";
import {isHasPermit, Timeout,} from "../../assets/js/tools";
// 引入导出表格
import {export_json_to_excel} from '../../assets/js/excel/Export2Excel.js'
import {checkboxs, estateFn} from '../../assets/js/alarmAdmian/powerInfoData'

                let obj = {
                        userId:'1',
                        pageInfo:{
                            pageNum:this.queryInfo.pagenum,
                            pageSize:this.queryInfo.pagesize
                        }
                    }
                // 向后台发送请求数据
                this.socket.send(JSON.stringify(this.paramsData()));
            },
            onError() {
                console.log('链接失败')
            },
            close() {
                // 关闭websocket
                if (this.isOpen) {
                    // 打印关闭信息
                    console.log("关闭电源实时告警WebSocket");
                    this.isOpen = false;
                    this.socket.close();
                }
            },
            // 构造查询条件
            paramsData:function(){
                let vm = this;
                let checkArr = [];
                let userId = window.sessionStorage.getItem('userId');
                    Object.keys(vm.checkboxs).forEach((item, index) => {
                        vm.checkboxs[item].forEach((list,i) => {
                            if(list.model){
                                checkArr.push(list.value);
                            }
                        });
                    });
                let params = {
                        pageInfo:{
                            pageNum:vm.queryInfo.pagenum,
                            pageSize:vm.queryInfo.pagesize
                        },
                        alarmName:checkArr.join(','),
                        stationName1:vm.filters.values.province,//省
                        stationName2:vm.filters.values.city,//市
                        stationName5:vm.filters.values.county,//区县
                        stationName3:vm.filters.values.home,//机房
                        userId:userId
                    }
                    return params;
					
            },
            changeHome: function() {
                // 重置分页信息
                this.queryInfo.pagenum = 1;
                // 查询数据
                this.searchData();
            },
            searchProvince() {      // 查询省
                // this.loading = this.$layer.loading(1);
                this.$apis.dataMager.powerMager.searchProvince().then((res)=>{
                    var rs = JSON.parse(res.data.result);
                    var data = [];
                    if(rs.code == 1) {
                        var rsData = rs.data;
                        // 遍历结果集
                        for(var i=0; i<rsData.length; i++) {
                            var _rsData = rsData[i];
                            var tmp = {
                                label: _rsData.stationName1,
                                value: _rsData.stationName1
                            };
                            data.push(tmp);
                        }
                    }
                    // 设置第一笔数据
                    data.unshift({
                        label: "全部（共"+data.length+"种)",
                        value: ''
                    });
                    // 设置省
                    this.filters.data.province = data;
                    // 查询市
                    this.searchCity();
                });
            },
            searchCity() {      // 查询市
                // 重置值
                this.filters.values.city="";
                this.filters.values.county="";
                this.filters.values.home="";
                // 构造查询条件
                let searchParams = {
                    stationName1: this.filters.values.province
                };
                // 请求后台
                this.$apis.dataMager.powerMager.searchCity(searchParams).then((res)=>{
                    var rs = JSON.parse(res.data.result);
                    var data = [];
                    if(rs.code == 1) {
                        var rsData = rs.data;
                        // 遍历结果集
                        for(var i=0; i<rsData.length; i++) {
                            var _rsData = rsData[i];
                            var tmp = {
                                label: _rsData.stationName1,
                                value: _rsData.stationName1
                            };
                            data.push(tmp);
                        }
                    }
                    // 设置第一笔数据
                    data.unshift({
                        label: "全部（共"+data.length+"种)",
                        value: ''
                    });
                    // 设置市
                    this.filters.data.city = data;
                    // 查询区县
                    this.searchCounty();
                });
            },
            searchCounty() { //查询区县
                // 重置值
                this.filters.values.county="";
                this.filters.values.home="";
                // 构造查询条件
                let searchParams = {
                    stationName1: this.filters.values.province,
                    stationName2: this.filters.values.city
                };
                // 请求后台
                this.$apis.dataMager.powerMager.searchCounty(searchParams).then((res)=>{
                    var rs = JSON.parse(res.data.result);
                    var data = [];
                    if(rs.code == 1) {
                        var rsData = rs.data;
                        // 遍历结果集
                        for(var i=0; i<rsData.length; i++) {
                            var _rsData = rsData[i];
                            var tmp = {
                                label: _rsData.stationName1,
                                value: _rsData.stationName1
                            };
                            data.push(tmp);
                        }
                    }
                    // 设置第一笔数据
                    data.unshift({
                        label: "全部（共"+data.length+"种)",
                        value: ''
                    });
                    // 设置区县
                    this.filters.data.county = data;
                    // 查询机房
                    this.searchHome();
                });
            },
            searchHome() {//查询机房
                // 重置分页信息
                this.queryInfo.pagenum = 1;
                // 重置值
                this.filters.values.home="";                        // 构造查询条件
                var searchParams = {
                    stationName1: this.filters.values.province,
                    stationName2: this.filters.values.city,
                    stationName5: this.filters.values.county,
                };
                // 未选择区县
                if(searchParams.stationName5 == "") {
                    // 设置机房
                    this.filters.data.home = [{
                        label: "请选择机房名称",
                        value: ''
                    }];
                    // 查询数据
                    this.initSocket();
                    return;
                }
export default {
  data() {
    let permits = this.$store.state.user.permits;
    let isCanConfirm = isHasPermit('batt_alm_confirm_permit', permits);
    let isCanQuit = isHasPermit('batt_alm_clear_permit', permits);
    let isCanDel = isHasPermit('batt_alm_delete_permit', permits);
    return {
      timer: new Timeout(),
      isCanConfirm: isCanConfirm,
      isCanQuit: isCanQuit,
      isCanDel: isCanDel,
      queryInfo: {
        pagenum: 1 /* 当前页码 绑定queryInfo.pagenum */,
        pagesize: 10 /* 每页显示的数据 绑定queryInfo.pagesize */
      },
      total: 0 /* 总共有多少条 */,
      filters: {
        values: {
          province: '',
          city: '',
          county: '',
          home: '',
        },
        data: {
          province: [],
          city: [],
          county: [],
          home: [],
        },
      },
      checkboxs: checkboxs,
      /* 表单 */
      table: {
        headers: [
          {
            prop: "stationName",
            label: "机房名称",
            minWidth: 220
          },
          {
            prop: "alarmName",
            label: "告警名称",
            width: 162
          },
          {
            prop: "alarmValue",
            label: "告警值",
            width: 80
          },
          {
            prop: "estateStr",
            label: "告警等级",
            width: 120
          },
          {
            prop: "alarmStartTime",
            label: "告警开始时间",
            width: 180
          },
        ],
        datas: []
      },
      isOpen: false
    };
  },
  mounted() {
    this.searchProvince();//查询省
  },
  methods: {
    startSearchData() {
      this.timer.start(()=>{
        this.$axios.all([this.searchData()]).then(res=>{
          this.timer.open();
        }).catch(error=>{
          this.timer.open();
          console.log(error);
        });
      }, 4000);
    },
    searchData() {
      this.$apis.dataMager.powerMager.getAlarmData(this.paramsData()).then(res=>{
        let rs = JSON.parse(res.data.result);
        if (rs.code == 1 && rs.data && rs.data.obj.length > 0) {
          this.total = rs.data.totalSize;
          this.table.datas = rs.data.obj.map(function (item) {
            item.estateStr = estateFn(item.alarmLevel);
            item.alarmConfirmedTimeStr = item.alarmIsConfirmed > 0 ? item.alarmConfirmedTime : "";
            return item;
          })
        } else {
          this.total = 0;
          this.table.datas = [];
        }
      }).catch(error=>{
        this.total = 0;
        this.table.datas = [];
        console.log(error);
      })
    },
    // 构造查询条件
    paramsData: function () {
      let vm = this;
      let checkArr = [];
      let userId = window.sessionStorage.getItem('userId');
      Object.keys(vm.checkboxs).forEach((item, index) => {
        vm.checkboxs[item].forEach((list, i) => {
          if (list.model) {
            checkArr.push(list.value);
          }
        });
      });
      let params = {
        pageInfo: {
          pageNum: vm.queryInfo.pagenum,
          pageSize: vm.queryInfo.pagesize
        },
        alarmName: checkArr.join(','),
        stationName1: vm.filters.values.province,//省
        stationName2: vm.filters.values.city,//市
        stationName5: vm.filters.values.county,//区县
        stationName3: vm.filters.values.home,//机房
        userId: userId
      }
      return params;

                // 请求后台
                this.$apis.dataMager.powerMager.getStations(searchParams).then((res)=>{
                    let rs = JSON.parse(res.data.result);
                    let data = [];
                    if(rs.code == 1) {
                        let rsData = rs.data;
                        // 遍历结果集
                        for(let i=0; i<rsData.length; i++) {
                            let _rsData = rsData[i];
                            let index = this.checkValIsIn(_rsData.stationName1, data);
                            if(index == -1) {
                                let tmp = {
                                    label: _rsData.stationName1,
                                    value: _rsData.stationName1
                                };
                                data.push(tmp);
                            }
							
                        }
                    }
                    // 设置第一笔数据
                    data.unshift({
                        label: "全部（共"+data.length+"种)",
                        value: ''
                    });
                    // 设置机房
                    this.filters.data.home = data;
					
                    // 查询数据
                    this.searchData(true);
                });
            },
            // 数据处理
            checkValIsIn(val, arr) {
                for(let i=0; i<arr.length; i++) {
                    if(arr[i].label == val) {
                        return i;
                    }
                }
                return -1;
            },
    },
    changeHome: function () {
      // 重置分页信息
      this.queryInfo.pagenum = 1;
      // 查询数据
      this.startSearchData();
    },
    searchProvince() {      // 查询省
      // this.loading = this.$layer.loading(1);
      this.$apis.dataMager.powerMager.searchProvince().then((res) => {
        var rs = JSON.parse(res.data.result);
        var data = [];
        if (rs.code == 1) {
          var rsData = rs.data;
          // 遍历结果集
          for (var i = 0; i < rsData.length; i++) {
            var _rsData = rsData[i];
            var tmp = {
              label: _rsData.stationName1,
              value: _rsData.stationName1
            };
            data.push(tmp);
          }
        }
        // 设置第一笔数据
        data.unshift({
          label: "全部（共" + data.length + "种)",
          value: ''
        });
        // 设置省
        this.filters.data.province = data;
        // 查询市
        this.searchCity();
      });
    },
    searchCity() {      // 查询市
      // 重置值
      this.filters.values.city = "";
      this.filters.values.county = "";
      this.filters.values.home = "";
      // 构造查询条件
      let searchParams = {
        stationName1: this.filters.values.province
      };
      // 请求后台
      this.$apis.dataMager.powerMager.searchCity(searchParams).then((res) => {
        var rs = JSON.parse(res.data.result);
        var data = [];
        if (rs.code == 1) {
          var rsData = rs.data;
          // 遍历结果集
          for (var i = 0; i < rsData.length; i++) {
            var _rsData = rsData[i];
            var tmp = {
              label: _rsData.stationName1,
              value: _rsData.stationName1
            };
            data.push(tmp);
          }
        }
        // 设置第一笔数据
        data.unshift({
          label: "全部（共" + data.length + "种)",
          value: ''
        });
        // 设置市
        this.filters.data.city = data;
        // 查询区县
        this.searchCounty();
      });
    },
    searchCounty() { //查询区县
      // 重置值
      this.filters.values.county = "";
      this.filters.values.home = "";
      // 构造查询条件
      let searchParams = {
        stationName1: this.filters.values.province,
        stationName2: this.filters.values.city
      };
      // 请求后台
      this.$apis.dataMager.powerMager.searchCounty(searchParams).then((res) => {
        var rs = JSON.parse(res.data.result);
        var data = [];
        if (rs.code == 1) {
          var rsData = rs.data;
          // 遍历结果集
          for (var i = 0; i < rsData.length; i++) {
            var _rsData = rsData[i];
            var tmp = {
              label: _rsData.stationName1,
              value: _rsData.stationName1
            };
            data.push(tmp);
          }
        }
        // 设置第一笔数据
        data.unshift({
          label: "全部（共" + data.length + "种)",
          value: ''
        });
        // 设置区县
        this.filters.data.county = data;
        // 查询机房
        this.searchHome();
      });
    },
    searchHome() {//查询机房
      // 重置分页信息
      this.queryInfo.pagenum = 1;
      // 重置值
      this.filters.values.home = "";                        // 构造查询条件
      var searchParams = {
        stationName1: this.filters.values.province,
        stationName2: this.filters.values.city,
        stationName5: this.filters.values.county,
      };
      // 未选择区县
      if (searchParams.stationName5 == "") {
        // 设置机房
        this.filters.data.home = [{
          label: "请选择机房名称",
          value: ''
        }];
        // 查询数据
        this.startSearchData();
        return;
      }

      // 请求后台
      this.$apis.dataMager.powerMager.getStations(searchParams).then((res) => {
        let rs = JSON.parse(res.data.result);
        let data = [];
        if (rs.code == 1) {
          let rsData = rs.data;
          // 遍历结果集
          for (let i = 0; i < rsData.length; i++) {
            let _rsData = rsData[i];
            let index = this.checkValIsIn(_rsData.stationName1, data);
            if (index == -1) {
              let tmp = {
                label: _rsData.stationName1,
                value: _rsData.stationName1
              };
              data.push(tmp);
            }

          }
        }
        // 设置第一笔数据
        data.unshift({
          label: "全部（共" + data.length + "种)",
          value: ''
        });
        // 设置机房
        this.filters.data.home = data;

        // 查询数据
        this.startSearchData(true);
      });
    },
    // 数据处理
    checkValIsIn(val, arr) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].label == val) {
          return i;
        }
      }
      return -1;
    },


    // 导出表格
    exportFile() {
      let tHeader = ['编号'];
      let filterVal = ['Index'];
      this.table.headers.map((item, index) => {
        tHeader.push(item.label)
        filterVal.push(item.prop)
      })
      tHeader.push('确认告警时间')
      filterVal.push('alarmConfirmedTimeStr')
      tHeader.push('确认告警')
      filterVal.push('alarmIsConfirmed')
      let list = this.table.datas;
      if (list.length > 0) {
        list.map((item, index) => {
          item.Index = index + 1;
          if (item.alarmIsConfirmed > 0) {
            item.alarmIsConfirmed = '是'
          } else {
            item.alarmIsConfirmed = '否'
          }
        })
      }
      let excelData = this.formatJson(filterVal, list);
      export_json_to_excel(tHeader, excelData, "电源实时信息告警");
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    /* 告警信息 */
    /* 删除 */
    delteTim(val) {
      let vm = this;
      vm.$confirm(
          "此操作将永久删除该文件, 是否继续?",
          "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
      ).then(index => {
        vm.$axios({
          method: 'post',
          url: 'PowerAlarmAction_power_clear',
          data: 'json=' + JSON.stringify({recordId: val.recordIdStr})
        }).then(res => {
          let result = JSON.parse(res.data.result);
          if (result.code == 1) {
            vm.$message({
              type: 'success',
              message: '删除成功！'
            });
            vm.startSearchData();
          } else {
            vm.$message({
              type: 'error',
              message: '删除失败，请重试！'
            });
          }
        }).catch(err => {
          vm.$message({
            type: 'error',
            message: '网络链接失败，请重试！'
          });
        })
      }).catch(close => {

            // 导出表格
            exportFile() {
                let tHeader = ['编号'];
                let filterVal = ['Index'];
                this.table.headers.map((item, index) => {
                    tHeader.push(item.label)
                    filterVal.push(item.prop)
                })
                tHeader.push('确认告警时间')
                filterVal.push('alarmConfirmedTimeStr')
                tHeader.push('确认告警')
                filterVal.push('alarmIsConfirmed')
                let list = this.table.datas;
                if (list.length > 0) {
                    list.map((item, index) => {
                        item.Index = index + 1;
                        if (item.alarmIsConfirmed > 0) {
                            item.alarmIsConfirmed = '是'
                        } else {
                            item.alarmIsConfirmed = '否'
                        }
                    })
                }
                let excelData = this.formatJson(filterVal, list);
                export_json_to_excel(tHeader, excelData, "电源实时信息告警");
            },
            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]));
            },
            /* 告警信息 */
            /* 删除 */
            delteTim(val) {
                let vm = this;
                    vm.$confirm(
                        "此操作将永久删除该文件, 是否继续?",
                        "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning"
                        }
                    ).then(index=>{
                        vm.$axios({
                            method:'post',
                            url:'PowerAlarmAction_power_clear',
                            data:'json=' + JSON.stringify({recordId:val.recordIdStr})
                        }).then(res=>{
                            let result = JSON.parse(res.data.result);
                                if(result.code == 1){
                                    vm.$message({
                                        type: 'success',
                                        message:'删除成功！'
                                    });
                                    vm.searchData();
                                }else{
                                    vm.$message({
                                        type: 'error',
                                        message:'删除失败，请重试！'
                                    });
                                }
                        }).catch(err=>{
                            vm.$message({
                                type: 'error',
                                message:'网络链接失败，请重试！'
                            });
                        })
                    }).catch(close=>{
						
                    })
            },
            /*确认告警/取消告警 */
            okAlarm(vlas,num,msg) {
                let vm = this;
                let params = {
                        recordId:vlas.recordIdStr,
                        alarmIsConfirmed:num
                    };
                let title = num == 1?'确认告警？':'取消告警？'
                    vm.$confirm(
                        title,
                        "提示", {
                            confirmButtonText: "确定",
                            cancelButtonText: "取消",
                            type: "warning"
                        }
                    ).then(index=>{
                        vm.$axios({
                            method:'post',
                            url:'PowerAlarmAction_power_confirm',
                            data:'json=' + JSON.stringify(params)
                        }).then(res=>{
                            let result = JSON.parse(res.data.result);
                                if(result.code == 1){
                                    vm.$message({
                                        type: 'success',
                                        message: msg + '告警成功！'
                                    });
                                    vm.searchData();
                                }
                        }).catch(err=>{
                            this.$message({
                                type: 'error',
                                message: msg + '告警失败！'
                            });
                        })
                    }).catch(close=>{
						
                    })
            },
            handleSizeChange(newSize) {
                this.queryInfo.pagesize = newSize;
                /*console.log(`每页 ${val} 条`); */
                this.searchData();
            },
            handleCurrentChange(newPage) {
                this.queryInfo.pagenum = newPage;
                /*console.log(`当前页: ${val}`); */
                this.searchData();
            },
        },
        destroyed() {
            window.onresize = null;
            this.close();
        }
    };
      })
    },
    /*确认告警/取消告警 */
    okAlarm(vlas, num, msg) {
      let vm = this;
      let params = {
        recordId: vlas.recordIdStr,
        alarmIsConfirmed: num
      };
      let title = num == 1 ? '确认告警？' : '取消告警？'
      vm.$confirm(
          title,
          "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
      ).then(index => {
        vm.$axios({
          method: 'post',
          url: 'PowerAlarmAction_power_confirm',
          data: 'json=' + JSON.stringify(params)
        }).then(res => {
          let result = JSON.parse(res.data.result);
          if (result.code == 1) {
            vm.$message({
              type: 'success',
              message: msg + '告警成功！'
            });
            vm.startSearchData();
          }
        }).catch(err => {
          this.$message({
            type: 'error',
            message: msg + '告警失败！'
          });
        })
      }).catch(close => {

      })
    },
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      /*console.log(`每页 ${val} 条`); */
      this.startSearchData();
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      /*console.log(`当前页: ${val}`); */
      this.startSearchData();
    },
  },
  destroyed() {
    window.onresize = null;
    this.timer.stop();
  }
};
</script>

<style lang="less" scoped>
    .table-head {
        color: #ffff;
        border: 1px solid #ffffff;
.table-head {
  color: #ffff;
  border: 1px solid #ffffff;

        thead tr {
            height: 35px;
        }
  thead tr {
    height: 35px;
  }

        tbody tr {
            height: 70%;
        }
    }
  tbody tr {
    height: 70%;
  }
}

    .weihu {
        width: 100%;
    }
.weihu {
  width: 100%;
}

    .dainchi {
        width: 100%;
    }
.dainchi {
  width: 100%;
}

    .rooms {
        width: 100%;
    }
.rooms {
  width: 100%;
}

    /* 表单 */
    /* .tableCent {
  padding-top: 3px;
/* 表单 */
/* .tableCent {
padding-top: 3px;
} */

    /* 条件选择 */
    .condiOpt {
/* 条件选择 */
.condiOpt {

        width: 100%;
        border: 1px solid #4ba1fa;
  width: 100%;
  border: 1px solid #4ba1fa;

        .trTitle {
            height: 35px;
            font-size: 14px;
            font-weight: bold;
            color: #00ffff;
        }
  .trTitle {
    height: 35px;
    font-size: 14px;
    font-weight: bold;
    color: #00ffff;
  }

        /* 过滤条件 */
        .tdOne {
            width: 30%;
            .inputOne {
                display: flex;
                flex-wrap: wrap;
                li {
                    display: block;
                    width: 22%;
                    padding: 3px 6px;
                    line-height: 1rem;
                }
            }
            .inputTwo{
                li {
                    width: 30%;
                }
            }
        }
    }
  /* 过滤条件 */

  .tdOne {
    width: 30%;

    .inputOne {
      display: flex;
      flex-wrap: wrap;

      li {
        display: block;
        width: 22%;
        padding: 3px 6px;
        line-height: 1rem;
      }
    }

    .inputTwo {
      li {
        width: 30%;
      }
    }
  }
}
</style>

 src/pages/dataMager/realTimeData.vue

@@ -22,23 +22,20 @@
import AnalogTabPane from "@/pages/dataMager/components/AnalogTabPane";
import WarnTabPane from "@/pages/dataMager/components/WarnTabPane";
import StateTabPane from "@/pages/dataMager/components/StateTabPane";
import IsolatingDeviceTabPane from "@/pages/dataMager/components/IsolatingDeviceTabPane";
import ChargerStatusTabPane from "@/pages/dataMager/components/ChargerStatusTabPane";
import {getPowerInfo} from "@/pages/dataMager/js";
import {getWsUrl} from "@/assets/js/tools";
import {Timeout} from "@/assets/js/tools";
import ContentBox from "@/components/ContentBox";

export default {
  components: {
    ContentBox,
    // ChargerStatusTabPane,
    // IsolatingDeviceTabPane,
    StateTabPane,
    WarnTabPane,
    AnalogTabPane,
  },
  data() {
    return {
      timer: new Timeout(),
      acTabs: 'analog',
      info: getPowerInfo(),
      socket: "",
@@ -69,7 +66,7 @@
  },
  methods: {
    getPowerInfo(powerDeviceId) {
      this.powerInfo = powerDeviceId;
      this.powerInfo.powerDeviceId = powerDeviceId;
      this.$apis.dataMager.powerMager.getInfoById({
        powerDeviceId: powerDeviceId
      }).then(res => {
@@ -88,9 +85,8 @@
            stationName5: "",
          };
        }
        // 初始化WebSocket
        this.close();
        this.initSocket();
        // 启动查询
        this.startSearch();
      }).catch(error => {
        console.log(error);
      });
@@ -112,21 +108,28 @@
          break;
      }
    },
    initSocket() {
      let isInit = this.acTabs == "analog" || this.acTabs == "warn" || this.acTabs == "state";
      if (isInit) {
        // 未被初始化初始化
        if (!this.isOpen) {
          const wsUri = getWsUrl("websocket/powerACDCData", 55000);
          this.socket = new WebSocket(wsUri);
          this.socket.onmessage = this.onMessage;
          this.socket.onopen = this.onOpen;
          this.socket.onerror = this.onError;
          this.socket.onclose = this.close;
        }
      } else {
        this.close();
      }
    startSearch() {
      this.timer.start(()=>{
          this.$axios.all([this.searchPowerACDCInfo()]).then(()=>{
            // 启动循环
            this.timer.open();
          }).catch(error=>{
            // 启动循环
            this.timer.open();
          });
      }, 4000);
    },
    searchPowerACDCInfo() {
      this.$apis.dataMager.powerMager.getACDCData(this.powerInfo.powerDeviceId).then(res=>{
          let rs = JSON.parse(res.data.result);
          if (rs.code == 1 && rs.data.length != 0) {
            this.info = rs.data[0];
          } else {
            this.info = getPowerInfo();
          }
      }).catch(error=>{
        console.log(error);
      });
    },
    onMessage(res) {
      let rs = JSON.parse(res.data);
@@ -134,24 +137,6 @@
        this.info = rs.data[0];
      } else {
        this.info = getPowerInfo();
      }
    },
    onOpen() {
      // 标识正在运行
      this.isOpen = true;
      // 向后台发送请求数据
      this.socket.send(this.powerInfo.powerDeviceId);
    },
    onError() {

    },
    close() {
      // 关闭websocket
      if (this.isOpen) {
        // 打印关闭信息
        console.log("关闭电源实时监控WebSocket");
        this.isOpen = false;
        this.socket.close();
      }
    },
  },
@@ -183,7 +168,8 @@
  destroyed() {
    // 关闭监听
    window.removeEventListener('resize', this.resize);
    this.close();
    //  关闭计时器
    this.timer.stop();
  }
}
</script>