From 2765bcab1049fd409d5aa9f297554e9189f1502b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=99=BD=E8=8F=9C?=
 <43331987+JiaLiBai@users.noreply.github.com>
Date: Thu, 29 Jan 2026 20:08:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=85=E9=9A=9C=E5=91=8A=E8=AD=A6,=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E6=A0=8F=20=E5=91=8A=E8=AD=A6=E7=AD=89=E7=BA=A7?=
 =?UTF-8?q?=E5=AE=BD=E5=BA=A6=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/ems/dzjk/gzgj/index.vue | 238 ++++++++++++++++--------------
 1 file changed, 130 insertions(+), 108 deletions(-)

diff --git a/src/views/ems/dzjk/gzgj/index.vue b/src/views/ems/dzjk/gzgj/index.vue
index bcd1463..df51763 100644
--- a/src/views/ems/dzjk/gzgj/index.vue
+++ b/src/views/ems/dzjk/gzgj/index.vue
@@ -1,27 +1,30 @@
-
 <template>
-  <div  v-loading="loading" class="ems-dashboard-editor-container ems-content-container-padding">
+  <div v-loading="loading" class="ems-dashboard-editor-container ems-content-container-padding">
     <!--    搜索栏-->
     <el-form :inline="true" class="select-container">
       <el-form-item label="设备清单">
-        <el-select v-model="search.deviceId" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
-          <el-option :label="item.deviceName" :value="item.deviceId" v-for="(item,key) in deviceOptions" :key="key+'deviceIdOptions'"></el-option>
+        <el-select v-model="search.deviceId" clearable placeholder="请选择" :loading="loading"
+                   loading-text="正在加载数据">
+          <el-option :label="item.deviceName" :value="item.deviceId" v-for="(item,key) in deviceOptions"
+                     :key="key+'deviceIdOptions'"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="告警等级">
-        <el-select v-model="search.alarmLevel" clearable placeholder="请选择" :loading="loading" loading-text="正在加载数据">
-          <el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.alarmLevelOptions" :key="key+'alarmLevelOptions'"></el-option>
+        <el-select v-model="search.alarmLevel" clearable placeholder="请选择" :loading="loading"
+                   loading-text="正在加载数据" style="width: 130px">
+          <el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.alarmLevelOptions"
+                     :key="key+'alarmLevelOptions'"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item label="时间选择">
         <el-date-picker
-          v-model="dateRange"
-          type="daterange"
-          range-separator="至"
-          start-placeholder="开始时间"
-          :picker-options="pickerOptions"
-          :default-value="defaultDateRange"
-          end-placeholder="结束时间">
+            v-model="dateRange"
+            type="daterange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            :picker-options="pickerOptions"
+            :default-value="defaultDateRange"
+            end-placeholder="结束时间">
         </el-date-picker>
       </el-form-item>
       <el-form-item>
@@ -36,7 +39,9 @@
       <el-row style="">
         <el-col :xs="24" :sm="24" :lg="24">
           <el-button-group class="ems-btns-group">
-            <el-button v-for="(item,index) in btnList" :key="index+'dtdcBtns'" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
+            <el-button v-for="(item,index) in btnList" :key="index+'dtdcBtns'"
+                       :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{ item.name }}
+            </el-button>
           </el-button-group>
         </el-col>
       </el-row>
@@ -47,64 +52,67 @@
           stripe
           max-height="500"
           style="width: 100%;margin-top:25px;">
-          <el-table-column
+        <el-table-column
             prop="deviceName"
             label="设备名称">
-          </el-table-column>
-          <el-table-column
+        </el-table-column>
+        <el-table-column
             label="告警等级"
-          >
-            <template slot-scope="scope">
-              <span>{{$store.state.ems.alarmLevelOptions[scope.row.alarmLevel]}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
+        >
+          <template slot-scope="scope">
+            <span>{{ $store.state.ems.alarmLevelOptions[scope.row.alarmLevel] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
             prop="alarmContent"
             show-overflow-tooltip
             label="告警内容">
-          </el-table-column>
-          <el-table-column
+        </el-table-column>
+        <el-table-column
             prop="alarmStartTime"
             label="告警发生时间">
-            <template slot-scope="scope">
-              <span>{{formatDate(scope.row.alarmStartTime,true)}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
+          <template slot-scope="scope">
+            <span>{{ formatDate(scope.row.alarmStartTime, true) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
             prop="alarmEndTime"
             label="告警结束时间">
-            <template slot-scope="scope">
-              <span>{{formatDate(scope.row.alarmEndTime,true)}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
+          <template slot-scope="scope">
+            <span>{{ formatDate(scope.row.alarmEndTime, true) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
             label="状态">
-            <template slot-scope="scope">
-              <span :class="['0','2'].includes(scope.row.status) ? 'warning-status' : ''">{{$store.state.ems.alarmStatusOptions[scope.row.status]}}</span>
-            </template>
-          </el-table-column>
-          <el-table-column
+          <template slot-scope="scope">
+            <span
+                :class="['0','2'].includes(scope.row.status) ? 'warning-status' : ''">{{ $store.state.ems.alarmStatusOptions[scope.row.status] }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column
             label="工单"
             fixed="right"
             width="250"
-          >
-            <template slot-scope="scope">
-              <el-button type="text" size="mini"  v-if="scope.row.ticketNo" @click="toTicket">已生成工单(工单号:{{scope.row.ticketNo}})</el-button>
-              <el-button type="primary" size="mini" v-else @click="createTicket(scope.row.id)">生成工单</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
+        >
+          <template slot-scope="scope">
+            <el-button type="text" size="mini" v-if="scope.row.ticketNo" @click="toTicket">
+              已生成工单(工单号:{{ scope.row.ticketNo }})
+            </el-button>
+            <el-button type="primary" size="mini" v-else @click="createTicket(scope.row.id)">生成工单</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
       <el-pagination
-        v-show="tableData.length>0"
-        background
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="pageNum"
-        :page-size="pageSize"
-        :page-sizes="[10, 20, 30, 40]"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="totalSize"
-        style="margin-top:15px;text-align: center"
+          v-show="tableData.length>0"
+          background
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          :current-page="pageNum"
+          :page-size="pageSize"
+          :page-sizes="[10, 20, 30, 40]"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="totalSize"
+          style="margin-top:15px;text-align: center"
       >
       </el-pagination>
     </div>
@@ -113,113 +121,127 @@
 
 
 <script>
-import {getAlarmDetailList,createTicketNo} from'@/api/ems/dzjk'
-import {getDeviceList} from'@/api/ems/site'
+import {createTicketNo, getAlarmDetailList} from '@/api/ems/dzjk'
+import {getDeviceList} from '@/api/ems/site'
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
-import { formatDate } from '@/filters/ems'
+import {formatDate} from '@/filters/ems'
+
 export default {
-  name:'DzjkGzgj',
-  mixins:[getQuerySiteId],
+  name: 'DzjkGzgj',
+  mixins: [getQuerySiteId],
   data() {
     return {
-      loading:false,
-      btnList:[
-        {name:'未处理告警',id:'today'},
-        {name:'历史告警',id:'history'},
+      loading: false,
+      btnList: [
+        {name: '未处理告警', id: 'today'},
+        {name: '历史告警', id: 'history'},
       ],
-      deviceOptions:[],//设备列表
-      pickerOptions:{
+      deviceOptions: [],//设备列表
+      pickerOptions: {
         disabledDate(time) {
           return time.getTime() > Date.now();
         },
       },
-      defaultDateRange:[],//默认展示的时间
-      dateRange:[],//alarmStartTime,alarmEndTime
-      activeBtn:'today',
-      search:{deviceId:'',alarmLevel:''},
+      defaultDateRange: [],//默认展示的时间
+      dateRange: [],//alarmStartTime,alarmEndTime
+      activeBtn: 'today',
+      search: {deviceId: '', alarmLevel: ''},
       // 表格、分页
-      tableData:[],
-      pageSize:10,//分页栏当前每个数据总数
-      pageNum:1,//分页栏当前页数
-      totalSize:0,//table表格数据总数
+      tableData: [],
+      pageSize: 10,//分页栏当前每个数据总数
+      pageNum: 1,//分页栏当前页数
+      totalSize: 0,//table表格数据总数
     }
   },
-  methods:{
+  methods: {
     formatDate,
-    toTicket(){
-      this.$router.push({path:'/ticket'})
+    toTicket() {
+      this.$router.push({path: '/ticket'})
     },
     //生成工单
-    createTicket(id){
+    createTicket(id) {
       this.loading = true
-      createTicketNo({id}).then(response=>{
+      createTicketNo({id}).then(response => {
         response?.data && this.toTicket()
-      }).finally(()=>{this.loading = false})
+      }).finally(() => {
+        this.loading = false
+      })
     },
     // 判断是否是同一天
     isSameDay(day1, day2) {
-      const date1 = new Date(day1),date2 = new Date(day2)
+      const date1 = new Date(day1), date2 = new Date(day2)
       return date1.getFullYear() === date2.getFullYear() &&
-        date1.getMonth() === date2.getMonth() &&
-        date1.getDate() === date2.getDate();
+          date1.getMonth() === date2.getMonth() &&
+          date1.getDate() === date2.getDate();
     },
     // 分页
     handleSizeChange(val) {
       this.pageSize = val;
-      this.$nextTick(()=>{
+      this.$nextTick(() => {
         this.getData()
       })
     },
     handleCurrentChange(val) {
       this.pageNum = val
-      this.$nextTick(()=>{
+      this.$nextTick(() => {
         this.getData()
       })
     },
     // 搜索
-    onSearch(){
-      this.pageNum =1//每次搜索从1开始搜索
+    onSearch() {
+      this.pageNum = 1//每次搜索从1开始搜索
       this.getData()
     },
     // 重置
-    onReset(){
-      this.search={deviceId:'',alarmLevel:''}
-      this.dateRange=[]
-      this.pageNum =1//每次搜索从1开始搜索
+    onReset() {
+      this.search = {deviceId: '', alarmLevel: ''}
+      this.dateRange = []
+      this.pageNum = 1//每次搜索从1开始搜索
       this.getData()
     },
     // 切换今日、历史告警
-    changeDataType(id){
-      if(id !== this.activeBtn){
+    changeDataType(id) {
+      if (id !== this.activeBtn) {
         console.log('点击了不同的菜单，更新数据')
-        this.activeBtn=id;
+        this.activeBtn = id;
         this.getData()
       }
     },
     // 获取数据
-    getData(){
-      this.$store.dispatch('getSiteAlarmNum',this.siteId)
-      this.loading=true
-      const {deviceId,alarmLevel} = this.search
-      const {siteId,pageNum,pageSize,activeBtn} =this
-      const [alarmStartTime='',alarmEndTime='']=(this.dateRange || [])
+    getData() {
+      this.$store.dispatch('getSiteAlarmNum', this.siteId)
+      this.loading = true
+      const {deviceId, alarmLevel} = this.search
+      const {siteId, pageNum, pageSize, activeBtn} = this
+      const [alarmStartTime = '', alarmEndTime = ''] = (this.dateRange || [])
       let status = activeBtn === 'today' ? '0' : '1,2'
-      getAlarmDetailList({status,deviceId,alarmLevel,siteId,pageSize,pageNum,alarmStartTime:formatDate(alarmStartTime),alarmEndTime:formatDate(alarmEndTime)}).then(response => {
-        this.tableData=response?.rows || [];
+      getAlarmDetailList({
+        status,
+        deviceId,
+        alarmLevel,
+        siteId,
+        pageSize,
+        pageNum,
+        alarmStartTime: formatDate(alarmStartTime),
+        alarmEndTime: formatDate(alarmEndTime)
+      }).then(response => {
+        this.tableData = response?.rows || [];
         this.totalSize = response?.total || 0
-      }).finally(() => {this.loading=false})
+      }).finally(() => {
+        this.loading = false
+      })
     },
-    getDeviceOptions(){
+    getDeviceOptions() {
       getDeviceList(this.siteId).then(response => {
         this.deviceOptions = JSON.parse(JSON.stringify(response?.data || []))
       })
     },
-    init(){
+    init() {
       this.getDeviceOptions()
       this.onReset()
     },
   },
-  mounted(){
+  mounted() {
     const now = new Date();
     const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
     this.defaultDateRange = [lastMonth, now];