故障告警,搜索栏 告警等级宽度调整

src/views/ems/dzjk/gzgj/index.vue

@@ -1,16 +1,19 @@
-
 <template>
   <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-select v-model="search.deviceId" clearable placeholder="请选择" :loading="loading"
-          <el-option :label="item.deviceName" :value="item.deviceId" v-for="(item,key) in deviceOptions" :key="key+'deviceIdOptions'"></el-option>
+                   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-select v-model="search.alarmLevel" clearable placeholder="请选择" :loading="loading"
-          <el-option :label="value" :value="key" v-for="(value,key) in $store.state.ems.alarmLevelOptions" :key="key+'alarmLevelOptions'"></el-option>
+                   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="时间选择">
@@ -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>
@@ -80,7 +85,8 @@
         <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>
+            <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
@@ -89,7 +95,9 @@
             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="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>
@@ -113,10 +121,11 @@
 
 
 <script>
-import {getAlarmDetailList,createTicketNo} from'@/api/ems/dzjk'
+import {createTicketNo, getAlarmDetailList} from '@/api/ems/dzjk'
 import {getDeviceList} from '@/api/ems/site'
 import getQuerySiteId from "@/mixins/ems/getQuerySiteId";
 import {formatDate} from '@/filters/ems'
+
 export default {
   name: 'DzjkGzgj',
   mixins: [getQuerySiteId],
@@ -154,7 +163,9 @@ export default {
       this.loading = true
       createTicketNo({id}).then(response => {
         response?.data && this.toTicket()
-      }).finally(()=>{this.loading = false})
+      }).finally(() => {
+        this.loading = false
+      })
     },
     // 判断是否是同一天
     isSameDay(day1, day2) {
@@ -204,10 +215,21 @@ export default {
       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 => {
+      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() {
       getDeviceList(this.siteId).then(response => {