cpp/cpp-ui/src/views/largeScreen/index.vue

<template>
  <div class="largeScreen">
    <div class="app-title-bg">
      <span class="sys-time">{{ sysTime }}</span>
      <div class="top-right-style flex items-center">
        <div class="top-badge">
          <el-badge :value="allBadgeValue.alarm" v-if="allBadgeValue.alarm !== 0">
            <img src="../../assets/images/svg/remind.svg" class="badge-img" @click="openAlarm()"/>
          </el-badge>
          <img src="../../assets/images/svg/remind.svg" class="badge-img" @click="openAlarm()" v-else/>
        </div>

        <div class="cpp-btu-background home-jump-btu">
          <span @click="jumpRout">后台管理</span>
        </div>
      </div>

      <div class="titleBg">
        <span class="title-text">集 中 功 率 预 测</span>
      </div>
    </div>
    <div class="home-main-container flex">
      <!--      左-->
      <div class="width-20 ml-0 flex-column justify-between">
        <div class="border-style">
          <div class="barTitleBg right-title-style">场站数据统计</div>
          <div class="flex flex-wrap" style="height: 25vh">
            <div class="flex width-50">
              <img src="../../assets/images/dashboard/num3.png" class="left-img"/>
              <div class="flex-column justify-center items-center">
                <span>风速</span>
                <span>{{ envData.wsAvg }} m/s</span>
              </div>
            </div>
            <div class="flex width-50">
              <img src="../../assets/images/dashboard/num2.png" class="left-img"/>
              <div class="flex-column justify-center items-center">
                <span>风电开机容量</span>
                <span>{{ envData.fdOpenCapcitySum }} MW</span>
              </div>
            </div>
            <div class="flex width-50">
              <img src="../../assets/images/dashboard/num4.png" class="left-img"/>
              <div class="flex-column justify-center items-center">
                <span>辐照度</span>
                <span>{{ envData.fzdAvg }} W/㎡</span>
              </div>
            </div>
            <div class="flex width-50">
              <img src="../../assets/images/dashboard/num2.png" class="left-img"/>
              <div class="flex-column justify-center items-center">
                <span>光伏开机容量</span>
                <span>{{ envData.gfOpenCapcitySum }} MW</span>
              </div>
            </div>
          </div>
        </div>
        <div class="border-style">
          <div class="barTitleBg right-title-style">生产数据统计</div>
          <div class="flex-column justify-center" style="height: 25vh">
            <left-middle :params="leftMiddleParams"/>
          </div>
        </div>
        <div class="border-style position-r">
          <div class="barTitleBg right-title-style">短期偏差统计</div>
          <div style="height: 30vh">
            <left-bottom :params="leftBottomParams"/>
          </div>
        </div>
      </div>
      <!--    中  -->
      <div class="width-48 mr-0 ml-0">
        <div class="height-58vh">
          <div class="position-r height-58vh centerMap">
            <center-top />
          </div>
        </div>
        <div class="border-style position-r" style="margin-top: 1%">
          <div class="barTitleBg right-title-style">
            功率曲线
          </div>
          <center-bottom :params="centerBottomParams"/>
        </div>
      </div>
      <!--      右-->
      <div class="width-20 mr-0 flex-column justify-between">
        <div class="border-style position-r">
          <div class="barTitleBg right-title-style ">准确率排名</div>
          <div style="height: 25vh">
            <right-top :params="rightTopParams"/>
          </div>
        </div>
        <div class="border-style position-r">
          <div class="barTitleBg right-title-style">气象预测</div>
          <div style="height: 25vh">
            <right-middle :params="rightMiddleParams"/>
          </div>
        </div>
        <div class="border-style position-r">
          <div class="barTitleBg right-title-style">未来10天预测电量</div>
          <div style="height: 30vh">
            <right-bottom :params="rightBottomParams"/>
          </div>
        </div>
      </div>


    </div>

    <div class="dark-el-dialog">
      <el-dialog width="60%" style="top:15%" :visible.sync="outerVisible" :close-on-click-modal="false">
        <div slot="title" class="dialog-title flex justify-between">
          <div class="flex justify-between" style="width: 80%">
            <el-button @click="acknowledgeAll()">全部确认</el-button>
            <div id="btuAll" class="clickAfter" @click="clickBtuClass('btuAll')">
              <el-button @click="getAbnormalAlarms('')">全部告警</el-button>
            </div>
            <div id="btuE1" class="clickBefore" @click="clickBtuClass('btuE1')">
              <el-button @click="getAbnormalAlarms('E1')">通道告警</el-button>
            </div>
            <div id="btuE2" class="clickBefore" @click="clickBtuClass('btuE2')">
              <el-button @click="getAbnormalAlarms('E2')">上报告警</el-button>
            </div>
            <div id="btuE3" class="clickBefore" @click="clickBtuClass('btuE3')">
              <el-button @click="getAbnormalAlarms('E3')">站端硬件告警</el-button>
            </div>
            <div id="btuE4" class="clickBefore" @click="clickBtuClass('btuE4')">
              <el-button @click="getAbnormalAlarms('E4')">中心解析告警</el-button>
            </div>
            <div id="btuE5" class="clickBefore" @click="clickBtuClass('btuE5')">
              <el-button @click="getAbnormalAlarms('E5')">通用告警</el-button>
            </div>
            <el-button @click="getAlarmConfs()">不告警配置</el-button>
          </div>
          <div class="dialog-title-badge flex justify-between">
            <el-badge :value="this.badgeValue.alarm">
              <img src="../../assets/images/svg/remind.svg" width="20px"/>
            </el-badge>
            <!--            <el-badge :value="badgeValue.confirm">-->
            <!--              <img src="../../assets/images/svg/right.svg" width="20px"/>-->
            <!--            </el-badge>-->
          </div>
        </div>
        <div>
          <el-table
            :data="tableDataAlarm"
            border max-height="300px"
            element-loading-background="rgba(8, 61, 92,1)"
            v-loading="loadingAlarm"
            style="width: 100%">
            <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
            <el-table-column
              prop="stationCode" align="center" :formatter="formatStation" :show-overflow-tooltip="true"
              label="场站名称"
            >
            </el-table-column>
            <el-table-column
              prop="startTime" align="center"
              label="报警开始时间" :formatter="formatStartDate"
            >
            </el-table-column>
            <el-table-column
              prop="endTime" align="center"
              label="报警结束时间" :formatter="formatEndDate"
            >
            </el-table-column>
            <el-table-column
              prop="msg" align="center" :show-overflow-tooltip="true"
              label="报警描述">
            </el-table-column>
            \
            <el-table-column
              prop="alarmType" align="center" :formatter="formatAlarmSource"
              label="报警来源">
            </el-table-column>
            <el-table-column
              prop="operate" align="center"
              label="操作" width="80">
              <template v-slot="{ row }">
                <img src="../../assets/images/svg/remind.svg" @click="acknowledge(row)" width="20px"/>
                <!--                <img src="../../assets/images/svg/right.svg" width="20px"/>-->
              </template>
            </el-table-column>
          </el-table>
          <div class="block flex" style="justify-content: end">
            <el-pagination
              popper-class="cpp-popper"
              @size-change="handleSizeChangeAlarm"
              @current-change="handleCurrentChangeAlarm"
              :current-page=this.alarmPage.currentPage
              :page-sizes="[10, 15, 30, 50]"
              :page-size=this.alarmPage.pageSize
              layout="total, sizes, prev, pager, next, jumper"
              :total=this.alarmPage.total>
            </el-pagination>
          </div>

          <el-dialog
            width="40%" style="top:20%"
            title="不告警配置"
            :visible.sync="innerVisible"
            append-to-body>
            <!--  TODO 移植v3        -->
            <div class="dark-el-dialog" style="margin-top: -20px">
              <el-row>
                <el-col :span="1.5">失效时间：</el-col>
                <el-col :span="10">
                  <el-date-picker
                    :clearable="false"
                    v-model="expireTime"
                    type="datetime"
                    value-format="timestamp"
                    placeholder="选择失效时间"
                    popper-class="cpp-popper"
                    size="small"
                    @change="changeInfo">
                  </el-date-picker>
                </el-col>
              </el-row>
              <el-row :gutter="10" class="mb8" style="margin-top: 5px">
                <el-col :span="1.5">
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    popper-class="cpp-popper"
                    @click="handleAdd"
                  >新增
                  </el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="success"
                    icon="el-icon-edit"
                    size="mini"
                    popper-class="cpp-popper"
                    @click="handleUpdate"
                  >修改
                  </el-button>
                </el-col>
                <el-col :span="1.5">
                  <el-button
                    type="danger"
                    icon="el-icon-delete"
                    size="mini"
                    popper-class="cpp-popper"
                    @click="handleDelete"
                  >删除
                  </el-button>
                </el-col>
                <!--                  <el-col :span="1.5">-->
                <!--                    <el-button-->
                <!--                      type="danger"-->
                <!--                      plain-->
                <!--                      icon="el-icon-select"-->
                <!--                      size="mini"-->
                <!--                      popper-class="cpp-popper"-->
                <!--                      @click="getAlarmConfs"-->
                <!--                    >查询-->
                <!--                    </el-button>-->
                <!--                  </el-col>-->
              </el-row>

              <div style="padding-top: 10px">
                <vxe-table
                  ref="xTable"
                  align="center"
                  class="mytable-style"
                  auto-resize
                  border
                  resizable
                  export-config
                  highlight-current-row
                  show-overflow
                  :data="tableDataAlarmConf"
                  :radio-config="{trigger: 'row',checkMethod: checkRadioMethod}"
                >
                  <vxe-column type="radio" width="60"/>
                  <vxe-table-column field="stationCode" title="场站名称"
                                    :formatter="alarmConfTypeStationFormat"></vxe-table-column>
                  <vxe-table-column field="keyword" title="关键词"></vxe-table-column>
                  <vxe-table-column field="type" title="类型" :formatter="alarmConfTypeFormat"></vxe-table-column>
                  <vxe-table-column field="expireTime" title="失效时间"></vxe-table-column>
                </vxe-table>
                <vxe-pager
                  background
                  :loading="loadingAlarmConf"
                  :current-page.sync="alarmConfPage.currentPage"
                  :page-size.sync="alarmConfPage.pageSize"
                  :total="alarmConfPage.total"
                  @page-change="handleSizeChangeAlarmConf"
                  :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
                </vxe-pager>
              </div>

            </div>

            <el-dialog :title="title" :visible.sync="open" :close-on-click-modal="false" width="850px"
                       height="600px" style="top:30%"
                       append-to-body>
              <div class="dark-el-dialog">
                <el-form ref="form" :model="form" :rules="rules" width="830px" label-width="150px">
                  <el-row class="mb4">
                    <el-col :span="12">
                      <el-form-item label="场站" prop="stationCode">
                        <el-select v-model="form.stationCode" placeholder="请选择" style="width: 100%"
                                   popper-class="cpp-popper">
                          <el-option
                            v-for="item in this.stationSelect()"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="关键词" prop="keyword">
                        <el-input style="width: 100%" v-model="form.keyword" maxlength="50"
                                  popper-class="cpp-popper"/>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row class="mb4">
                    <el-col :span="12">
                      <el-form-item label="类型" prop="type">
                        <el-select v-model="form.type" placeholder="请选择" style="width: 100%"
                                   popper-class="cpp-popper">
                          <el-option
                            v-for="item in this.alarmConfType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item label="失效时间" prop="expireTime">
                        <el-date-picker
                          :clearable="false"
                          v-model="form.expireTime"
                          type="datetime"
                          value-format="yyyy-MM-dd HH:mm:ss"
                          placeholder="选择失效时间"
                          :picker-options="pickerOptions"
                          popper-class="cpp-popper">
                        </el-date-picker>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button type="primary" @click="commitChannel">确 定</el-button>
                  <el-button @click="cancelChannel">取 消</el-button>
                </div>
              </div>
            </el-dialog>
          </el-dialog>
        </div>
      </el-dialog>
    </div>

  </div>
</template>
<script>

import {formatToDateTime} from "../../utils/dateUtil";
import leftMiddle from './components/left-middle.vue'
import rightTop from './components/right-top.vue'
import rightBottom from './components/right-bottom.vue'
import centerBottom from "./components/center-bottom.vue";
import rightMiddle from "./components/right-middle.vue";
import leftBottom from "./components/left-bottom.vue";
import centerTop from "./components/center-top.vue";
export default {
  name: 'largeScreen',
  components: {leftMiddle, rightTop, rightBottom, centerBottom, rightMiddle, leftBottom,centerTop},
  data() {
    const checkExpireTime = (rule, value, callback) => {
      if (value == null || value === '') {
        callback(new Error('失效时间不能为空'))
      }
      if (value < formatToDateTime(new Date().getTime())) {
        callback(new Error('失效不能在当前时间之前'))
      }
      callback()
    }

    return {
      xdbl: 0,
      // 限电场站数
      xdczs: 0,
      // 总场站数
      zczs: 0,
      realList: [],
      ableList: [],
      theoryList: [],
      cdqList: [],
      dqList: [],
      sysBizDataTimer: "",
      sysTime: '',
      sysInterval: null,
      outerVisible: false,
      innerVisible: false,
      tableDataAlarm: [],
      tableDataAlarmConf: [],
      loadingAlarm: false,
      loadingAlarmConf: false,
      tableDataAlarmBak: [],
      digitalDisk: [
        {
          name: '实际功率',
          num: '0'
        }, {
          name: '可用功率',
          num: '0'
        }, {
          name: '理论功率',
          num: '0'
        }, {
          name: '超短期预测功率',
          num: '0'
        }, {
          name: '短期预测功率',
          num: '0'
        }],
      totality: {
        number: 0,
        capacity: 0
      },
      envData: {
        wsAvg: 0,
        fzdAvg: 0,
        gfOpenCapcitySum: 0,
        fdOpenCapcitySum: 0,
      },
      // 告警统计值
      allBadgeValue: {
        alarm: 0,
        confirm: 0
      },
      // 告警统计值
      badgeValue: {
        alarm: 0,
        confirm: 0
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      alarmPage: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      alarmConfPage: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      stationList: [],
      alarmEnum: [],
      alarmType: '',
      form: {
        stationCode: '',
        keyword: '',
        type: 1,
        expireTime: undefined
      },
      // 表单校验
      rules: {
        stationCode: [
          {required: true, message: "场站编号不能为空", trigger: "blur"}
        ],
        keyword: [
          {required: true, message: "关键词", trigger: "blur"}
        ],
        type: [
          {required: true, message: "类型不能为空", trigger: "blur"}
        ],
        expireTime: [
          {required: true, validator: checkExpireTime}
        ],
      },
      title: '',
      open: false,
      alarmConfType: [
        {
          label: "等于",
          value: 1
        },
        {
          label: "包含",
          value: 0
        }
      ],
      //当前日期之前日期不可选
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
          // return time.getTime() <= Date.now();
        }
      },
      expireTime: new Date().getTime(),
      leftMiddleParams: {}, //生产数据模块值
      rightBottomParams: {}, // 未来10天预测电量
      rightTopParams: [], // 准确率排名
      centerBottomParams: {},//功率曲线
      rightMiddleParams: {},//气象预测
      leftBottomParams: {}//短期偏差统计


    }
  },
  beforeDestroy() {
    const _this = this
    window.removeEventListener('resize', function () {
      _this.myChart0.resize();
      _this.myChart1.resize();
    })
    clearInterval(this.sysInterval);
    clearInterval(this.sysBizDataTimer);
  },
  mounted() {
    this.init()
    const _this = this
    this.sysInterval = setInterval(function () {
      _this.sysTime = formatToDateTime(new Date())
    }, 1000)
    if (this.sysBizDataTimer) {
      clearInterval(this.sysBizDataTimer);
    } else {
      this.sysBizDataTimer = setInterval(() => {
        this.getBizData(this);//再次加载数据,自己定义的方法
      }, 60000);//每隔60秒刷新一次
    }
  },
  methods: {
    formatNumber(num) {
      if (Number(num) == 0) {
        return 0
      }
      // 转换为字符串以便处理
      const numStr = num.toString();
      let nums = numStr.split(".")
      if (nums[0].length == 1 || nums[0].length == 2) {
        return num.toFixed(2);
      }
      if (nums[0].length == 3) {

        return parseFloat(num.toFixed(1));
      } else {
        return nums[0];
      }
    },
    async getBizData() {
      // 气象站预测按钮类型
      let weatherType
      if(sessionStorage.getItem('screen-weather-type')){
        weatherType = sessionStorage.getItem('screen-weather-type')
      }else{
        weatherType = 'wind'
      }
      let queryParams = {
        "weatherType": weatherType
      }

      await this.$axios({url: '/largeScreenController/getBizData', method: 'get',params: queryParams}).then(response => {
        this.mockData()
        // 顶部场站数据统计值
        let electricFieldDataTotalDto = response.data.electricFieldDataTotalDto
        this.envData.wsAvg = electricFieldDataTotalDto.wsAvg
        this.envData.fzdAvg = electricFieldDataTotalDto.fzdAvg
        this.envData.gfOpenCapcitySum = electricFieldDataTotalDto.gfOpenCapcitySum
        this.envData.fdOpenCapcitySum = electricFieldDataTotalDto.fdOpenCapcitySum
        // 首页左中部生产数据统计
        let productionDataTotalDto = response.data.productionDataTotalDto
        this.leftMiddleParams ={
          realGeneratingSum: productionDataTotalDto.realGeneratingSum,
          forecastGeneratingSum: productionDataTotalDto.forecastGeneratingSum,
          realPowerSum: productionDataTotalDto.realPowerSum,
          theoryPowerSum: productionDataTotalDto.theoryPowerSum,
        }

        this.rightBottomParams = response.data.forecastGeneratingMap


        this.rightMiddleParams = response.data.forecastNwpMap


        // this.digitalDisk[0].num = this.formatNumber(sumMap.realSum) + ''
        // this.digitalDisk[1].num = this.formatNumber(sumMap.ableSum) + ''
        // this.digitalDisk[2].num = this.formatNumber(sumMap.theorySum) + ''
        // this.digitalDisk[3].num = this.formatNumber(sumMap.cdqSum) + ''
        // this.digitalDisk[4].num = this.formatNumber(sumMap.dqSum) + ''
        // 曲线图
        let curveMap = response.data.curveMap
        this.centerBottomParams = {
          realList: curveMap.realList,
          ableList: curveMap.ableList,
          theoryList: curveMap.theoryList,
          cdqList: curveMap.cdqList,
          dqList: curveMap.dqList
        }

        // 限电信息
        let xdMap = response.data.xdMap
        this.totality.number = xdMap.zczs
        this.totality.capacity = xdMap.totalCapacity
        this.xdczs = xdMap.xdczs
        this.zczs = xdMap.zczs
        this.xdbl = xdMap.xdbl
        // 风速、辐照度平均值
        let envDataMap = response.data.envDataMap
        this.envData.ws = envDataMap.wsAvg
        this.envData.radiance = envDataMap.fzdAvg
      }).catch(err => {
        clearInterval(this.sysBizDataTimer);
      })
    },
    mockData(){
      this.rightBottomParams ={
        xData: [],
        pData: []
      }
      this.rightTopParams = [
        {sort: 1, name: '新疆光伏电站', accuracy: '99.8%'},
        {sort: 2, name: '新疆光伏电站', accuracy: '97.8%'},
        {sort: 3, name: '新疆光伏电站', accuracy: '96.8%'},
        {sort: 3, name: '新疆光伏电站', accuracy: '96.8%'},
        {sort: 4, name: '新疆光伏电站', accuracy: '95.8%'},
        {sort: 4, name: '新疆光伏电站', accuracy: '95.8%'}]
      this.leftBottomParams = {
        boxplotData: [
          [-8.09, -3.11, -2.11, 0.21, 5.19],
          [-8.65, -2.04, 0.19, 2.36, 8.97],
          [-6.46, -0.83, 0.52, 2.92, 8.55],
          [-7.97, -1.55, 0.37, 2.74, 9.16],
          [-5.56, -0.89, 1.31, 2.23, 6.91],
          [-6.23, -1.18, 0.28, 2.19, 7.24]
        ],
        scatterData: [
          ["10月26", -8.41],
          ["10月27", -10.48],
          ["10月28", 10.61],
          ["10月29", 10.1],
          ["10月30", -9.39],
          ["10月31", 7.88]
        ],
        xData: ["10月26", "10月27", "10月28", "10月29", "10月30", "10月31"]
      }
      // this.leftMiddleParams ={
      //   dayValue: 456,
      //   daySum: 1000,
      //   realValue: 987,
      //   realSum: 2000
      // }
    },
    jumpRout() {
      this.$router.push({path: "/cloudDataQuery"})
    },
    openAlarm() {
      this.alarmPage = {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      }
      this.getAbnormalAlarms("")
      this.outerVisible = true
    },
    init() {
      this.getBizData()
      this.getStationCode()
      this.drawTable()
      // this.drawChart()
    },
    async getStationCode() {
      await this.$axios({url: '/electricfield/all', method: 'get'}).then(response => {
        this.stationList = response.data
      })
      await this.$axios({url: '/enumSelect/alarmEnum', method: 'get'}).then(response => {
        this.alarmEnum = response.data
      })
    },
    drawTable() {
      // let data = [
      //   {name: 'xxx', date: 1728700191000, describe: 'xxxx', operate: 1, type: 'report'},
      //   {name: 'xxx', date: 1728613791000, describe: 'xxxx', operate: 1, type: 'tunnel'},
      //   {name: 'xxx', date: 1728440991000, describe: 'xxxx', operate: 1, type: 'report'},
      //   {name: 'xxx', date: 1728527391000, describe: 'xxxx', operate: 1, type: ''},
      //   {name: 'xxx', date: 1728354591000, describe: 'xxxx', operate: 0, type: ''}
      // ]
      // this.tableDataAlarmBak = data
      // this.tableDataAlarm = data
      // this.page.total = this.tableDataAlarm.length
      this.getAlarmSize()

      // this.badgeValue.confirm = this.tableDataAlarm.filter(w => w.operate === 0).length
      // this.badgeValue.alarm = this.tableDataAlarm.filter(w => w.operate === 1).length
    },
    getAlarmSize() {
      this.$axios.get('/abnormalAlarm/alarmCountStatus1').then(response => {
        this.allBadgeValue.alarm = response.data
      }).catch(() => {

      })
    },
    changeInfo() {
      this.getAlarmConfs()
    },
    getAlarmConfs() {
      this.loadingAlarmConf = true

      let queryParams = {
        currentPage: this.alarmConfPage.currentPage,
        pageSize: this.alarmConfPage.pageSize,
        time: this.expireTime
      }
      this.innerVisible = true
      this.$axios.get('/alarmConf/pageByExpireTime', {params: queryParams}).then(response => {
        this.tableDataAlarmConf = response.data.records
        this.alarmConfPage.total = response.data.total
        this.loadingAlarmConf = false
      }).catch(() => {
        this.loadingAlarmConf = false
      })
    },
    getAbnormalAlarms(prop) {
      this.alarmPage = {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      }
      this.alarmType = prop
      this.filterInfo()
    },
    filterInfo() {
      this.getAlarmSize()
      this.loadingAlarm = true
      let queryParams = {
        currentPage: this.alarmPage.currentPage,
        pageSize: this.alarmPage.pageSize,
        alarmType: this.alarmType
      }
      this.$axios.get('/abnormalAlarm/dashboard', {params: queryParams}).then(response => {
        this.tableDataAlarm = response.data.records
        this.alarmPage.total = response.data.total
        this.badgeValue.alarm = response.data.total
        this.loadingAlarm = false
      }).catch(() => {
        this.loadingAlarm = false
      })

      // if (prop !== null) {
      //   this.tableDataAlarm  = this.tableDataAlarmBak.filter(w => w.type === prop)
      // } else {
      //   this.tableDataAlarm = JSON.parse(JSON.stringify(this.tableDataAlarmBak))
      // }

    },
    clickBtuClass(id) {
      let clickItem = document.getElementById(id)
      let activeItem = document.querySelector('.clickAfter')
      activeItem.classList.remove('clickAfter')
      activeItem.classList.add('clickBefore')
      clickItem.classList.remove('clickBefore')
      clickItem.classList.add('clickAfter')
    },



    formatStartDate(row) {
      return formatToDateTime(row.startTime)
    },
    formatEndDate(row) {
      if (row.endTime) {
        return formatToDateTime(row.startTime)
      } else {
        return "未结束"
      }
    },
    formatStation(row) {
      let name = '未知场站名称'
      this.stationList.forEach(s => {
        if (row.stationCode == s.value) {
          name = s.label
          return
        }
      })
      return name
    },
    formatAlarmSource(row) {
      let name = '未知场站名称'
      this.alarmEnum.forEach(s => {
        if (row.alarmType === s.value) {
          name = s.label
          return name
        }
      })
      return name
    },
    handleSizeChangeAlarm(val) {
      this.alarmPage.pageSize = val
      this.alarmPage.currentPage = 1
      this.filterInfo()

    },
    handleCurrentChangeAlarm(val) {
      this.alarmPage.currentPage = val
      this.filterInfo()
    },

    handleSizeChangeAlarmConf({currentPage, pageSize}) {
      this.currentPage = currentPage
      this.pageSize = pageSize
      this.getAlarmConfs();
    },
    acknowledgeAll() {
      this.$confirm('是否确认执行"所有场站告警全部确认"操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.get('/abnormalAlarm/acknowledgeAll').then(response => {
          this.filterInfo()
          this.$message.info("确认成功！")
        }).catch(() => {
          this.loading = false
        })
      })
    },
    acknowledge(row) {
      this.$confirm('是否对 【' + this.formatStation(row) + '：' + row.msg + '】进行"确认"操作？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.status = 1
        this.$axios.post('/abnormalAlarm/updateStatus1', row).then(response => {
          this.$message.info("【" + row.msg + "】 已确认！")
          this.filterInfo()
        }).catch(() => {
          this.loading = false
        })
      })
    },
    // 表单重置
    reset() {
      this.edit = false;
      this.form = {
        stationCode: '',
        name: '',
        electricFieldTypeEnum: '',
        capacity: '',
        longitude: '',
        latitude: '',
        provinceEnum: '',
        ftpChanelId: '',
        ftpUrl: '',
      },
        this.resetForm("form");
    },
    // 取消按钮
    cancelChannel() {
      this.open = false;
      this.reset();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增场站信息";
      this.edit = false;
    },
    /** 修改按钮操作 */
    handleUpdate() {
      this.title = "修改场站信息";
      this.reset();
      const _selectData = this.$refs.xTable.getRadioRecord(true)
      if (_selectData == null) {
        this.$message({
          type: 'warning',
          message: '请选择记录!'
        });
        return
      }
      this.open = true;
      this.edit = true;
      this.form = JSON.parse(JSON.stringify(_selectData))
    },
    // 提交按钮
    commitChannel() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          if (this.form.id != undefined) {
            // 更新操作
            this.$axios.post('/alarmConf/updateById', this.form).then((res) => {
              this.$message.success('修改成功')
              this.open = false;
              this.getAlarmConfs()
              this.getAlarmSize()
              this.filterInfo()
            }).catch((error) => {
            })
          } else {
            // 新增操作
            this.$axios.post('/alarmConf/save', this.form).then((res) => {
              if (res == undefined) {
                this.$message.success('新增失败')
              } else {
                this.$message.success('新增成功')
                this.getAlarmConfs()
                this.getAlarmSize()
                this.filterInfo()
                this.open = false;
              }
            }).catch((error) => {
            })
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete() {
      const _selectData = this.$refs.xTable.getRadioRecord(true)
      if (_selectData == null) {
        this.$message({
          type: 'warning',
          message: '请选择记录!'
        });
        return
      }

      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.doDelete(_selectData)
      }).catch(() => {
      });
    },
    /**
     * 删除提交
     */
    doDelete(row) {
      this.$axios.post('/alarmConf/remove', row).then((res) => {
        this.$message.success('删除成功！')
        this.getAlarmConfs()
      }).catch((error) => {
      })
      this.loading = false
    },
    stationSelect() {
      let a = [{label: '所有场站', value: 'all'}]
      this.stationList.forEach(s => {
        a.push(s)
      })
      return a
    },
    alarmConfTypeFormat({cellValue, row, column}) {
      let result = '未知类型'
      this.alarmConfType.forEach(a => {
        if (a.value == cellValue) {
          result = a.label
        }
      })
      return result
    },
    alarmConfTypeStationFormat({cellValue, row, column}) {
      let result = '未知'
      this.stationSelect().forEach(a => {
        if (a.value == cellValue) {
          result = a.label
        }
      })
      return result
    },
    checkRadioMethod({row}) {
      return row.expireTime > formatToDateTime(new Date().getTime())
    },

  }

}
</script>

<style scoped lang="scss">
$top-container-height: 11vh;
.largeScreen {
  width: 100%;
  height: calc(100vh);
  color: white;
  background-color: #101C38;
  background-image: url('../../assets/images/pageBg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.top-right-style {
  width: 15%;
  position: absolute !important;
  right: .8vw;
  justify-content: end;
}

.top-badge {
  cursor: pointer;
  margin-right: 1.5vw;
  padding-top: .5vh;

  ::v-deep .el-badge__content.is-fixed {
    top: 5px;
    right: 5px;
  }

  ::v-deep .el-badge__content {
    border-radius: .5vw;
    font-size: .6vw;
    height: 2vh;
    line-height: 2vh;
    padding: 0 .2vw;
  }
}

.home-jump-btu {
  border-color: #1890ff;
  width: 5vw;
  height: 3.15vh;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85vw;
}

.home-jump-btu:active {
  transform: translateY(2px);
}

.chartStyle {
  width: 100%;
  height: 30vh;
}

.home-main-container {
  position: relative;
}

.float-container {
  position: absolute;
}

.right-container-style {
  width: 30%;
  margin-top: 3vh;
  //height: calc(100vh - 10rem);
}

.left-container-style {
  width: 12%;
  height: calc(50%);
  left: 3vw;
  font-size: 1vw;
}

.left-img {
  width: 6vw;
}

.badge-img {
  width: 1.5vw;
}

.border-style {
  border-radius: 5px;
  box-shadow: 0px 1px 5px 3px rgba(29, 128, 218, 0.85);
}

.right-top-style {
  font-size: 1vw;
  width: 50%;
}

.top-1 {
  top: 1rem;
}

.top-2 {
  top: 5vh;
}

.top-default {
  top: $top-container-height;
}

.right-1 {
  right: 1rem;
}

.width-100 {
  width: 100%;
}

.height-10r {
  height: $top-container-height;
}

.width-20 {
  width: 25vw;
}

.width-48 {
  width: 48vw;
}

.width-50 {
  width: 50%;
}

.height-58vh {
  height: 58vh
}

.text-style {
  width: 70%;
  height: 3.5vh;
  padding: .6vh 0 0 2.2vw;
  font-size: .9vw;
}

.unit-style {
  margin-left: .5vw;
  font-size: 1vw;
}

.num-style {
  width: 1.55vw;
  height: 5vh;
  font-size: 1.5vw;
  margin-left: 0.5vw;
}

.number-bg-style {
  margin-top: 10px;
}

.right-title-style {
  width: 90%;
  padding: .5vh 0 0 2vw;
  font-size: 1vw;
  height: 3.6vh;
}

.barTitleBg {
  background-image: url('../../assets/images/dashboard/barTitleBg.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.centerMap {
  background-image: url('../../assets/images/dashboard/map.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}


.dialog-title {
  width: 90%;
}

.dialog-title-badge {
  //width: 10%;

  ::v-deep .el-badge__content.is-fixed {
    top: 10px;
    right: 5px;
  }

  ::v-deep .el-badge__content {
    background-color: transparent;
    font-size: 14px;
    border: none;
  }
}


</style>