提取公共的表格样式新增故障告警页面

2025-06-23 13:56:43 +08:00
parent 02d3ab04bb
commit 282568273d
8 changed files with 217 additions and 76 deletions
--- a/src/assets/styles/common.scss
+++ b/src/assets/styles/common.scss
@ -86,3 +86,27 @@
    }
  }
 }
+
+//公共表格样式
+.common-table.el-table{
+  color:#333333;
+  .el-table__header-wrapper th, .el-table__fixed-header-wrapper th {
+    background: #f1f5fc;
+    border-bottom: none;
+    .table-head {
+      color: #515a6e;
+    }
+  }
+  .warning-status{
+    color:#FC6B69;
+    &.circle::before {
+      content: "";
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+      background-color: #FC6B69;
+      margin-right: 8px;
+    }
+  }
+}
--- a/src/router/ems.js
+++ b/src/router/ems.js
@ -37,12 +37,12 @@ export const dzjk=[
        redirect: '/dzjk/home',
        hidden: true,
        children: [
-            {
-              path: '/dzjk/home',
-              component: () => import('@/views/ems/dzjk/home/index.vue'),
-              name: 'DjzkHome',
-              meta: { title: '首页',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkHome' }
-            },
+          {
+            path: '/dzjk/home',
+            component: () => import('@/views/ems/dzjk/home/index.vue'),
+            name: 'DjzkHome',
+            meta: { title: '首页',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkHome' }
+          },
          {
            path: '/dzjk/sbjk',
            component: () => import('@/views/ems/dzjk/sbjk/index.vue'),
@ -93,7 +93,13 @@ export const dzjk=[
                meta: { title: '液冷',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkSbjk'},
              }
            ]
-          }
+          },
+          {
+            path: '/dzjk/gzgj',
+            component: () => import('@/views/ems/dzjk/gzgj/index.vue'),
+            name: 'DjzkGzgj',
+            meta: { title: '故障告警',breadcrumb: false,activeMenu: '/dzjk',activeSecondMenuName:'DjzkGzgj' }
+          },
        ]
      }
    ]
--- a/src/views/ems/dzjk/gzgj/index.vue
+++ b/src/views/ems/dzjk/gzgj/index.vue
@ -1,14 +1,171 @@
-<script setup lang="ts">
-
-</script>

 <template>
-  <div>第二层路由 单站监控=>故障告警
-  <div>没有下级路由 页面直接展示</div>
-  </div>
-
+  <el-card shadow="always" class="common-card-container common-card-container-no-title-bg">
+    <!--    搜索栏-->
+    <div class="select-container">
+      <el-form :inline="true">
+        <el-form-item label="设备类型">
+          <el-select v-model="search.sblx" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.name" :value="item.id" v-for="(item,index) in sblxOptions" :key="index+'sblxOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="告警等级">
+          <el-select v-model="search.gjdj" placeholder="请选择" :loading="loading" loading-text="正在加载数据">
+            <el-option :label="item.name" :value="item.id" v-for="(item,index) in gjdjOptions" :key="index+'gjdjOptions'"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="时间选择">
+          <el-date-picker
+            v-model="dateRange"
+            type="datetimerange"
+            range-separator="至"
+            start-placeholder="开始时间"
+            :picker-options="pickerOptions"
+            :default-value="defaultDateRange"
+            end-placeholder="结束时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="warning" @click="onSearch" native-type="button">搜索</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="onReset" native-type="button">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div style="margin:30px 0;">
+      <!--        二个选择按钮-->
+      <el-row style="">
+        <el-col :xs="24" :sm="24" :lg="24">
+          <el-button-group>
+            <el-button v-for="(item,index) in btnList" :key="index+'dtdcBtns'"  type="warning" :class="{'activeBtn' : activeBtn === item.id}" @click="changeDataType(item.id)">{{item.name}}</el-button>
+          </el-button-group>
+        </el-col>
+      </el-row>
+      <!--表格-->
+      <el-table
+          class="common-table"
+          :data="tableData"
+          stripe
+          max-height="500"
+          style="width: 100%;margin-top:25px;">
+          <el-table-column
+            prop="name"
+            width="200"
+            label="设备名称">
+          </el-table-column>
+          <el-table-column
+            label="告警等级"
+          >
+            <template slot-scope="scope">
+              <span>{{scope.row.gjdj}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="告警内容">
+            <template slot-scope="scope">
+              <span>{{scope.row.gjnr}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="startTime"
+            label="告警发生时间">
+          </el-table-column>
+          <el-table-column
+            prop="finishTime"
+            label="告警结束时间">
+          </el-table-column>
+          <el-table-column
+            label="状态">
+            <template slot-scope="scope">
+              <span :class="scope.row.status === 2 ? 'warning-status' : ''">{{scope.row.status === 2 ? '告警中' :'已结束'}}</span>
+            </template>
+          </el-table-column>
+        </el-table>
+    </div>
+  </el-card>
 </template>

-<style scoped lang="scss">

+<script>
+export default {
+  name:'DzjkGzgj',
+  data() {
+    return {
+      btnList:[
+        {name:'今日告警',id:'today'},
+        {name:'历史告警',id:'yesterday'},
+      ],
+      pickerOptions:{
+        disabledDate(time) {
+          return time.getTime() > Date.now();
+        },
+      },
+      defaultDateRange:[],//默认展示的时间
+      dateRange:[],
+      activeBtn:'today',
+      loading:false,
+      search:{sblx:'',gjdj:''},
+      sblxOptions:[
+        {name:'类型一',id:1},
+        {name:'类型二',id:2},
+        {name:'类型三',id:3},
+      ],
+      gjdjOptions:[
+        {name:'严重',id:1},
+        {name:'普通',id:2},
+      ],
+      tableData:[
+        {name:'告警一',gjdj:'等级一',gjnr:'设备一温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:1},
+        {name:'告警二',gjdj:'等级一',gjnr:'设备二温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:2},
+        {name:'告警三',gjdj:'等级一',gjnr:'设备一温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:1},
+        {name:'告警四',gjdj:'等级一',gjnr:'设备二温度过高',startTime:'2025/06/20 18:09:40',finishTime:'2025/06/20 20:07:01',status:2}
+      ]
+    }
+  },
+  methods:{
+    // 搜索
+    onSearch(){
+      this.getData()
+    },
+    // 重置
+    onReset(){
+      this.search.dcd=''
+      this.search.dcc=''
+      this.getData()
+    },
+    // 获取数据
+    getData(){
+      this.loading=false
+    },
+    changeDataType(id){
+      if(id !== this.activeBtn){
+        console.log('点击了不同的菜单，更新数据')
+        this.activeBtn=id;
+      }
+    },
+
+  },
+  mounted(){
+    this.getData()
+    const now = new Date();
+    const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    this.defaultDateRange = [lastMonth, now];
+    // this.dateRange = [lastMonth, now];
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.select-container{
+  .el-form--inline .el-form-item{
+    margin-right: 20px;
+  }
+}
+.activeBtn{
+  background-color: #FFF2CB;
+  border-color: #FFF2CB;
+  color: #666666;
+  font-weight: 600;
+}
 </style>
--- a/src/views/ems/dzjk/home/index.vue
+++ b/src/views/ems/dzjk/home/index.vue
@ -24,6 +24,7 @@
          </div>
          <div class="ssgj-container">
            <el-table
+              class="common-table"
              :data="tableData"
              height="100%"
              stripe
@ -36,7 +37,7 @@
                label="状态"
                >
                  <template slot-scope="scope">
-                    <span class="warning-status">{{ scope.row.status === 0 ? '中断':'todo不是0是什么告警'}}</span>
+                    <span class="warning-status circle">{{ scope.row.status === 0 ? '中断':'todo不是0是什么告警'}}</span>
                  </template>
              </el-table-column>
              <el-table-column
@ -135,25 +136,6 @@ export default {
    ::v-deep{
      .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
        background:#FFF2CB ;
-        border-bottom: none;
-      }
-      .warning-status{
-        color:#FC6B69;
-        &::before {
-          content: "";
-          display: inline-block;
-          width: 10px;
-          height: 10px;
-          border-radius: 50%;
-          background-color: #FC6B69;
-          margin-right: 8px;
-        }
-      }
-      .table-head{
-        color:#515a6e;
-      }
-      .alarm-content{
-        color:#333333;
      }
    }
  }
--- a/src/views/ems/dzjk/sbjk/bmsdcc/index.vue
+++ b/src/views/ems/dzjk/sbjk/bmsdcc/index.vue
@ -25,12 +25,12 @@
          </div>
        </div>
    </el-card>
-    <div class="table-container">
-      <el-table
+    <el-table
+        class="common-table"
        :data="tableData"
        stripe
        max-height="500"
-        style="width: 100%">
+        style="width: 100%;margin-top:25px;">
        <el-table-column
          prop="name"
          width="190"
@ -84,7 +84,6 @@
        </el-table-column>

      </el-table>
-    </div>
  </div>
 </template>

@ -158,20 +157,4 @@ export default {
  }
 }

-
-//表格样式
-.table-container{
-  margin-top:25px;
-  ::v-deep{
-    .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
-      border-bottom: none;
-    }
-    .el-table .el-table__header-wrapper th{
-      background-color: #f1f5fc;
-    }
-    .table-head{
-      color:#515a6e;
-    }
-  }
-}
 </style>
--- a/src/views/ems/dzjk/sbjk/bmszl/index.vue
+++ b/src/views/ems/dzjk/sbjk/bmszl/index.vue
@ -25,11 +25,11 @@
        </div>
      </div>
    </el-card>
-    <div class="table-container">
-      <el-table
+    <el-table
+        class="common-table"
        :data="tableData"
        stripe
-        style="width: 100%;">
+        style="width: 100%;margin-top:25px;">
        <el-table-column
          prop=""
          label="名称">
@ -58,8 +58,7 @@
          prop="maxID"
          label="单体最大值ID">
        </el-table-column>
-      </el-table>
-    </div>
+  </el-table>
  </div>
 </template>

@ -138,16 +137,4 @@ export default {
  }
 }

-//表格样式
-.table-container{
-  margin-top:25px;
-  ::v-deep{
-    .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
-      border-bottom: none;
-    }
-    .table-head{
-      color:#515a6e;
-    }
-  }
-}
 </style>
--- a/src/views/ems/dzjk/sbjk/db/index.vue
+++ b/src/views/ems/dzjk/sbjk/db/index.vue
@ -10,7 +10,8 @@
              </div>
          </div>
          <el-table
-              :data="zbTableData"
+            class="common-table"
+            :data="zbTableData"
              stripe
              style="width: 100%;">
              <el-table-column
@ -49,6 +50,7 @@
            </div>
          </div>
          <el-table
+            class="common-table"
            :data="cnbTableData"
            stripe
            style="width: 100%;">
--- a/src/views/ems/dzjk/sbjk/yl/index.vue
+++ b/src/views/ems/dzjk/sbjk/yl/index.vue
@ -16,7 +16,7 @@

      <div class="yl-item-container yl-warn-item-container">
        <div class="header">
-          <div class="header-title">1#液冷</div>
+          <div class="header-title">2#液冷</div>
          <div>工作模式：<span class="header-values">运行</span></div>
          <div>当前温度：<span class="header-values">12&#8451;</span></div>
        </div>
@ -28,7 +28,7 @@
      </div>
      <div class="yl-item-container">
        <div class="header">
-          <div class="header-title">1#液冷</div>
+          <div class="header-title">3#液冷</div>
          <div>工作模式：<span class="header-values">运行</span></div>
          <div>当前温度：<span class="header-values">12&#8451;</span></div>
        </div>
@ -41,7 +41,7 @@

      <div class="yl-item-container yl-warn-item-container">
        <div class="header">
-          <div class="header-title">1#液冷</div>
+          <div class="header-title">4#液冷</div>
          <div>工作模式：<span class="header-values">运行</span></div>
          <div>当前温度：<span class="header-values">12&#8451;</span></div>
        </div>