From 4ce851bff7d96335c7f6bb31355401520e9fabe6 Mon Sep 17 00:00:00 2001
From: fhysy <1149505133@qq.com>
Date: Thu, 8 May 2025 16:48:10 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8C=B7=20UI(=E6=8A=A5=E8=AD=A6=E3=80=81?=
 =?UTF-8?q?=E9=A2=84=E8=AD=A6):=20=E6=8A=A5=E8=AD=A6=E3=80=81=E9=A2=84?=
 =?UTF-8?q?=E8=AD=A6=E8=AE=B0=E5=BD=95=EF=BC=88=E8=BF=90=E8=90=A5=E3=80=81?=
 =?UTF-8?q?=E4=BC=81=E4=B8=9A=E7=AB=AF=EF=BC=89=E6=B7=BB=E5=8A=A0=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E5=BC=8F=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/alarm-card.scss          | 138 +++++++++++++++
 src/views/iot/alarm/record/index.vue       | 147 ++++++++++++++--
 src/views/iot/alarm/waringRecord/index.vue | 185 ++++++++++++++++-----
 src/views/tenant/alarm/record.vue          | 138 +++++++++++++--
 src/views/tenant/alarm/warning.vue         | 134 +++++++++++++--
 5 files changed, 651 insertions(+), 91 deletions(-)
 create mode 100644 src/assets/styles/alarm-card.scss

diff --git a/src/assets/styles/alarm-card.scss b/src/assets/styles/alarm-card.scss
new file mode 100644
index 00000000..df50ae15
--- /dev/null
+++ b/src/assets/styles/alarm-card.scss
@@ -0,0 +1,138 @@
+// 卡片视图样式
+.card-list-box {
+  .card-item-col {
+    margin-top: 15px;
+  }
+
+  .card-item {
+    height: 100%;
+    border-radius: 10px;
+    border: 1px solid #ebeef5;
+    background-color: #fff;
+    overflow: hidden;
+    color: #303133;
+    transition: 0.3s;
+    cursor: pointer;
+    &:hover {
+      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
+      //border: 1px solid #409EFF;
+    }
+
+    .card-header {
+      padding: 10px 20px 0px 20px;
+      position: relative;
+      .card-header-top{
+        display: flex;
+        align-items: center;
+        .device-img-box{
+          width: 60px;
+          height: 60px;
+          img{
+            width: 100%;
+            height: 100%;
+          }
+        }
+        .card-item-name {
+          margin-left: 10px;
+          font-size: 18px;
+          line-height: 18px;
+          font-weight: bold;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          max-width: calc(100% - 110px);
+        }
+      }
+
+      .card-status{
+        position: absolute;
+        top: 30px;
+        line-height: 24px;
+        right: -12px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100px;
+        padding: 2px 0;
+        background-color: rgba(89, 149, 245, 0.15);
+        border-radius: 15px 0 0 15px;
+        box-sizing: border-box;
+        &::before{
+          content: '';
+          border-radius: 50%;
+          display: inline-block;
+          height: 6px;
+          top: -1px;
+          vertical-align: middle;
+          width: 6px;
+          background: rgba(102, 102, 102, 0.1);
+          margin-right: 5px;
+        }
+        &.card-status0{
+          background-color: rgba(229, 0, 18, 0.1);
+          &::before{
+            background: rgb(229, 0, 18);
+          }
+        }
+        &.card-status1{
+          background-color: rgba(24,144,255, 0.1);
+          &::before{
+            background: rgb(24,144,255);
+          }
+        }
+        &.card-status2{
+          background-color: rgba(255, 144, 0, 0.1);
+          &::before{
+            background: rgb(255, 144, 0);
+          }
+        }
+
+      }
+    }
+    .card-content {
+      padding: 10px 20px;
+      display: flex;
+      flex-wrap: wrap;
+      .info-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 5px;
+        font-size: 11px;
+        width: 50%;
+        .label {
+          color: #909399;
+          width: 70px;
+        }
+        .value {
+          width: calc(100% - 70px);
+          color: #606266;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        //&:nth-child(2n){
+        //  width: 50%;
+        //  .label {
+        //    width: 70px;
+        //  }
+        //}
+      }
+    }
+
+    .card-footer {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      padding: 10px 15px;
+      border-top: 1px solid #ebeef5;
+
+      .el-button {
+        padding: 5px 8px;
+
+        &:hover {
+          color: #409EFF;
+        }
+      }
+    }
+  }
+}
diff --git a/src/views/iot/alarm/record/index.vue b/src/views/iot/alarm/record/index.vue
index 5c9252db..28798d87 100644
--- a/src/views/iot/alarm/record/index.vue
+++ b/src/views/iot/alarm/record/index.vue
@@ -51,18 +51,38 @@
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
           >重置</el-button
         >
+<!--        <el-button-->
+<!--          icon="el-icon-download"-->
+<!--          plain-->
+<!--          size="mini"-->
+<!--          type="warning"-->
+<!--          @click="handleExport"-->
+<!--          >导出</el-button-->
+<!--        >-->
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
         <el-button
           icon="el-icon-download"
           plain
           size="mini"
           type="warning"
           @click="handleExport"
-          >导出</el-button
+        >导出</el-button
         >
-      </el-form-item>
-    </el-form>
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        :view-type="viewType"
+        @changeViewType="changeViewType"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
 
     <el-table
+      v-if="viewType!='card'"
       v-loading="loading"
       :data="recordList"
       :default-sort="{ prop: 'alarmTime', order: 'descending' }"
@@ -76,10 +96,14 @@
         width="80px"
       ></el-table-column>
       <el-table-column
-        align="left"
+        align="center"
+        label="告警类型"
+        prop="typeName"
+      />
+      <el-table-column
+        align="center"
         label="设备名称"
         prop="deviceName"
-        width="200px"
       />
       <!-- <el-table-column label="设备当前值" align="left" prop="currentValue" >
         <template slot-scope="scope">
@@ -87,13 +111,12 @@
         </template>
       </el-table-column>-->
       <el-table-column align="center" label="所属项目" prop="inProjectName" />
-      <el-table-column align="left" label="推送内容" prop="alarmContent" />
+      <el-table-column align="center" label="报警内容" prop="alarmContent" />
       <el-table-column
         align="center"
         label="报警时间"
         prop="alarmTime"
         sortable="custom"
-        width="150"
       >
         <template slot-scope="scope">
           <span>{{
@@ -105,14 +128,20 @@
         :formatter="stateFormatter"
         align="center"
         label="处理状态"
-        prop="processState"
+        prop="processStatus"
         width="100px"
-      />
+      >
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.processStatus === '1'" >{{ stateFormatter(scope.row) }}</el-tag>
+          <el-tag v-else-if="scope.row.processStatus === '0'" type="danger" >{{ stateFormatter(scope.row) }}</el-tag>
+          <el-tag v-else-if="scope.row.processStatus === '2'" type="warning" >{{ stateFormatter(scope.row) }}</el-tag>
+          <el-tag v-else type="info" >{{ stateFormatter(scope.row) }}</el-tag>
+        </template>
+      </el-table-column>
       <el-table-column
-        align="left"
+        align="center"
         label="处理结果"
         prop="processResult"
-        width="150px"
       />
       <el-table-column
         align="center"
@@ -127,12 +156,7 @@
           }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        align="left"
-        label="告警类型"
-        prop="typeName"
-        width="150px"
-      />
+
       <!-- <el-table-column label="类型编码" align="left" width="150px" prop="typeCode" /> -->
       <el-table-column
         align="center"
@@ -159,9 +183,88 @@
       </el-table-column>
     </el-table>
 
+    <div v-else class="card-list-box">
+      <el-row :gutter="20">
+        <el-col v-for="(item, index) in recordList" :key="index" :lg="8" :md="12" :sm="12" :xs="24" class="card-item-col">
+          <div class="card-item">
+            <div class="card-header">
+              <div class="card-header-top">
+                <div class="device-img-box">
+                  <el-image
+                    :src="'http://static.drgyen.com/pc/smart-power-ui/alarm/alarm-config.png'"
+                    style="width: 100%; height: 100%">
+                  </el-image>
+                </div>
+                <div class="card-item-name">{{ item.typeName }}</div>
+              </div>
+              <div :class="'card-status'+item.processStatus" class="card-status">
+                {{ stateFormatter(item) }}
+              </div>
+            </div>
+            <div class="card-content">
+              <div class="info-item">
+                <span class="label">报警设备：</span>
+                <el-tooltip :content="item.deviceName" effect="dark" placement="top">
+                  <span class="value">{{ item.deviceName }}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">所属项目：</span>
+                <el-tooltip :content="item.inProjectName" effect="dark" placement="top">
+                  <span class="value">{{ item.inProjectName }}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">报警内容：</span>
+                <el-tooltip :content="item.alarmContent" effect="dark" placement="top">
+                  <span class="value">{{ item.alarmContent }}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">报警时间：</span>
+                <el-tooltip :content="item.alarmTime" effect="dark" placement="top">
+                  <span class="value">{{parseTime(item.alarmTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">处理结果：</span>
+                <el-tooltip :content="item.processResult" effect="dark" placement="top">
+                  <span class="value">{{ item.processResult }}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">处理时间：</span>
+                <el-tooltip :content="item.processTime" effect="dark" placement="top">
+                  <span class="value">{{parseTime(item.processTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
+                </el-tooltip>
+              </div>
+            </div>
+            <div class="card-footer">
+              <el-button
+                :disabled="item.processStatus !== '0'"
+                icon="el-icon-edit"
+                size="mini"
+                type="text"
+                @click="handleUpdate(item)"
+              >处理</el-button>
+              <el-divider direction="vertical"></el-divider>
+              <el-button
+                icon="el-icon-document-add"
+                size="mini"
+                type="text"
+                @click="handleWork(item)"
+              >创建工单</el-button
+              >
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
     <pagination
       v-show="total > 0"
       :limit.sync="queryParams.pageSize"
+      :page-sizes="[12, 24, 36, 60]"
       :page.sync="queryParams.pageNum"
       :total="total"
       @pagination="getList"
@@ -210,6 +313,8 @@ export default {
   },
   data() {
     return {
+      //列表显示视图
+      viewType: "card",
       // 遮罩层
       loading: true,
       // 选中数组
@@ -231,7 +336,7 @@ export default {
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 12,
         typeName: null,
         typeCode: null,
         inProject: null,
@@ -254,6 +359,9 @@ export default {
     this.getInProjectList();
   },
   methods: {
+    changeViewType(type) {
+      this.viewType=type;
+    },
     // 查询所属项目列表
     getInProjectList() {
       listProject({
@@ -415,3 +523,6 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+@import "~@/assets/styles/alarm-card.scss";
+</style>
diff --git a/src/views/iot/alarm/waringRecord/index.vue b/src/views/iot/alarm/waringRecord/index.vue
index f1665a07..62216ff6 100644
--- a/src/views/iot/alarm/waringRecord/index.vue
+++ b/src/views/iot/alarm/waringRecord/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <!-- 告警记录功能 -->
+  <!-- 预警记录功能 -->
   <div class="app-container alarm-record">
     <el-form
       v-show="showSearch"
@@ -52,6 +52,11 @@
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
           >重置</el-button
         >
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
         <el-button
           icon="el-icon-download"
           plain
@@ -60,10 +65,17 @@
           @click="handleExport"
           >导出</el-button
         >
-      </el-form-item>
-    </el-form>
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        :view-type="viewType"
+        @changeViewType="changeViewType"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
 
     <el-table
+      v-if="viewType!='card'"
       v-loading="loading"
       :data="recordList"
       :default-sort="{ prop: 'alarmTime', order: 'descending' }"
@@ -77,17 +89,17 @@
         width="60"
       ></el-table-column>
       <el-table-column
-        align="left"
+        align="center"
+        label="预警类型"
+        prop="typeName"
+      />
+      <el-table-column
+        align="center"
         label="设备名称"
         prop="deviceName"
       />
       <el-table-column align="center" label="所属项目" prop="inProjectName" />
-      <!-- <el-table-column label="设备当前值" align="left" width="200px" prop="currentValue" >
-        <template slot-scope="scope">
-          <span style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{scope.row.currentValue}}</span>
-        </template>
-      </el-table-column> -->
-      <el-table-column align="left" label="推送内容" prop="alarmContent" />
+      <el-table-column align="center" label="预警内容" prop="alarmContent" />
       <el-table-column
         align="center"
         label="预警时间"
@@ -102,21 +114,24 @@
         </template>
       </el-table-column>
       <el-table-column
-        :formatter="stateFormatter"
         align="center"
         label="处理状态"
-        prop="processState"
-      />
-      <el-table-column
-        align="left"
-        label="处理结果"
-        prop="processResult"
-        sortable="custom"
-      />
+        prop="processStatus"
+        width="100"
+      >
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.processStatus === '1'" >{{ stateFormatter(scope.row) }}</el-tag>
+          <el-tag v-else-if="scope.row.processStatus === '0'" type="danger" >{{ stateFormatter(scope.row) }}</el-tag>
+          <el-tag v-else-if="scope.row.processStatus === '2'" type="warning" >{{ stateFormatter(scope.row) }}</el-tag>
+          <el-tag v-else type="info" >{{ stateFormatter(scope.row) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="处理结果" prop="processResult" />
       <el-table-column
         align="center"
         label="处理时间"
         prop="processTime"
+        sortable="custom"
       >
         <template slot-scope="scope">
           <span>{{
@@ -124,16 +139,12 @@
           }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        align="left"
-        label="告警类型"
-        prop="typeName"
-      />
-      <!-- <el-table-column label="类型编码" align="left" width="150px" prop="typeCode" /> -->
+
       <el-table-column
         align="center"
         class-name="small-padding fixed-width"
         label="操作"
+        width="150"
       >
         <template slot-scope="scope">
           <el-button
@@ -155,9 +166,87 @@
       </el-table-column>
     </el-table>
 
+    <div v-else class="card-list-box">
+      <el-row :gutter="20">
+        <el-col v-for="(item, index) in recordList" :key="index" :lg="8" :md="12" :sm="12" :xs="24" class="card-item-col">
+          <div class="card-item">
+            <div class="card-header">
+              <div class="card-header-top">
+                <div class="device-img-box">
+                  <el-image
+                    :src="'http://static.drgyen.com/pc/smart-power-ui/alarm/device.png'"
+                    style="width: 100%; height: 100%">
+                  </el-image>
+                </div>
+                <div class="card-item-name">{{ item.typeName }}</div>
+              </div>
+              <div :class="'card-status'+item.processStatus" class="card-status">
+                {{ stateFormatter(item) }}
+              </div>
+            </div>
+            <div class="card-content">
+              <div class="info-item">
+                <span class="label">预警设备：</span>
+                <el-tooltip :content="item.deviceName" effect="dark" placement="top">
+                  <span class="value">{{ item.deviceName }}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">所属项目：</span>
+                <el-tooltip :content="item.inProjectName" effect="dark" placement="top">
+                  <span class="value">{{ item.inProjectName }}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">预警内容：</span>
+                <el-tooltip :content="item.alarmContent" effect="dark" placement="top">
+                  <span class="value">{{ item.alarmContent }}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">预警时间：</span>
+                <el-tooltip :content="item.alarmTime" effect="dark" placement="top">
+                  <span class="value">{{parseTime(item.alarmTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">处理结果：</span>
+                <el-tooltip :content="item.processResult" effect="dark" placement="top">
+                  <span class="value">{{ item.processResult }}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">处理时间：</span>
+                <el-tooltip :content="item.processTime" effect="dark" placement="top">
+                  <span class="value">{{parseTime(item.processTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
+                </el-tooltip>
+              </div>
+            </div>
+            <div class="card-footer">
+              <el-button
+                :disabled="item.processStatus !== '0'"
+                icon="el-icon-edit"
+                size="mini"
+                type="text"
+                @click="handleUpdate(item)"
+              >处理</el-button>
+              <el-divider direction="vertical"></el-divider>
+              <el-button
+                icon="el-icon-document-add"
+                size="mini"
+                type="text"
+                @click="handleWork(item)"
+              >创建工单</el-button>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
     <pagination
       v-show="total > 0"
       :limit.sync="queryParams.pageSize"
+      :page-sizes="[12, 24, 36, 60]"
       :page.sync="queryParams.pageNum"
       :total="total"
       @pagination="getList"
@@ -180,6 +269,8 @@ export default {
   components: {},
   data() {
     return {
+      // 视图类型
+      viewType: "card",
       // 遮罩层
       loading: true,
       // 选中数组
@@ -196,12 +287,10 @@ export default {
       recordList: [],
       // 弹出层标题
       title: "",
-      // 是否显示弹出层
-      open: false,
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 12,
         typeName: null,
         typeCode: null,
         inProject: null,
@@ -224,6 +313,10 @@ export default {
     this.getInProjectList();
   },
   methods: {
+    // 切换视图类型
+    changeViewType(type) {
+      this.viewType = type;
+    },
     // 查询所属项目列表
     getInProjectList() {
       listProject({
@@ -235,7 +328,7 @@ export default {
         this.inProjectList = response.rows;
       });
     },
-    // 处理告警
+    // 处理预警
     handleUpdate(row) {
       const recordId = row.recordId || this.ids;
       this.$confirm("是否设置此预警为已处理状态?", "警告", {
@@ -260,7 +353,7 @@ export default {
       })
         .then(function () {
           return addAlarmRecord({
-            recordId: row.recordId, //告警记录id
+            recordId: row.recordId, //预警记录id
             deviceId: row.deviceId,
             deviceName: row.deviceName,
             faultType: "4", //固定
@@ -326,19 +419,6 @@ export default {
         this.loading = false;
       });
     },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 根据id获取记录详情
-    getRecordInfo(id) {
-      getRecord(id).then((res) => {
-        this.form = res.data;
-        this.open = true;
-        this.title = `告警记录详情`;
-      });
-    },
     /** 搜索按钮操作 */
     handleQuery() {
       this.queryParams.pageNum = 1;
@@ -367,6 +447,25 @@ export default {
           this.download(response.msg);
         });
     },
+    submitForm() {
+      this.$refs["dialogForm"].validate((v) => {
+        if (v) {
+          this.form.processTime = this.parseTime(
+            new Date(),
+            "{y}-{m}-{d} {h}:{i}:{s}"
+          );
+          this.form.processStatus = "2";
+          updateRecord(this.form).then((response) => {
+            this.msgSuccess("修改成功");
+            this.open = false;
+            this.getList();
+          });
+        }
+      });
+    },
   },
 };
 </script>
+<style lang="scss" scoped>
+@import "~@/assets/styles/alarm-card.scss";
+</style>
diff --git a/src/views/tenant/alarm/record.vue b/src/views/tenant/alarm/record.vue
index 2f195387..ae5ccf58 100644
--- a/src/views/tenant/alarm/record.vue
+++ b/src/views/tenant/alarm/record.vue
@@ -53,18 +53,29 @@
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
           >重置</el-button
         >
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
         <el-button
           icon="el-icon-download"
           plain
           size="mini"
           type="warning"
           @click="handleExport"
-          >导出</el-button
-        >
-      </el-form-item>
-    </el-form>
+        >导出</el-button>
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        :view-type="viewType"
+        @changeViewType="changeViewType"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
 
     <el-table
+      v-if="viewType!='card'"
       v-loading="loading"
       :data="recordList"
       :default-sort="{ prop: 'alarmTime', order: 'descending' }"
@@ -78,13 +89,17 @@
         width="60"
       ></el-table-column>
       <el-table-column
-        align="left"
+        align="center"
+        label="告警类型"
+        prop="typeName"
+      />
+      <el-table-column
+        align="center"
         label="设备名称"
         prop="deviceName"
       />
       <el-table-column align="center" label="所属项目" prop="inProjectName" />
-      <!-- <el-table-column label="设备当前值" align="left"  width="200px" prop="currentValue" /> -->
-      <el-table-column align="left" label="推送内容" prop="alarmContent" />
+      <el-table-column align="center" label="报警内容" prop="alarmContent" />
       <el-table-column
         align="center"
         label="报警时间"
@@ -99,12 +114,19 @@
         </template>
       </el-table-column>
       <el-table-column
-        :formatter="stateFormatter"
         align="center"
         label="处理状态"
         prop="processStatus"
-      />
-      <el-table-column align="left" label="处理结果" prop="processResult" />
+        width="100"
+      >
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.processStatus === '1'" >{{ stateFormatter(scope.row) }}</el-tag>
+          <el-tag v-else-if="scope.row.processStatus === '0'" type="danger" >{{ stateFormatter(scope.row) }}</el-tag>
+          <el-tag v-else-if="scope.row.processStatus === '2'" type="warning" >{{ stateFormatter(scope.row) }}</el-tag>
+          <el-tag v-else type="info" >{{ stateFormatter(scope.row) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="处理结果" prop="processResult" />
       <el-table-column
         align="center"
         label="处理时间"
@@ -117,15 +139,12 @@
           }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        align="left"
-        label="告警类型"
-        prop="typeName"
-      />
+
       <el-table-column
         align="center"
         class-name="small-padding fixed-width"
         label="操作"
+        width="150"
       >
         <template slot-scope="scope">
           <el-button
@@ -147,9 +166,87 @@
       </el-table-column>
     </el-table>
 
+    <div v-else class="card-list-box">
+      <el-row :gutter="20">
+        <el-col v-for="(item, index) in recordList" :key="index" :lg="8" :md="12" :sm="12" :xs="24" class="card-item-col">
+          <div class="card-item">
+            <div class="card-header">
+              <div class="card-header-top">
+                <div class="device-img-box">
+                  <el-image
+                    :src="'http://static.drgyen.com/pc/smart-power-ui/alarm/alarm-config.png'"
+                    style="width: 100%; height: 100%">
+                  </el-image>
+                </div>
+                <div class="card-item-name">{{ item.typeName }}</div>
+              </div>
+              <div :class="'card-status'+item.processStatus" class="card-status">
+                {{ stateFormatter(item) }}
+              </div>
+            </div>
+            <div class="card-content">
+              <div class="info-item">
+                <span class="label">报警设备：</span>
+                <el-tooltip :content="item.deviceName" effect="dark" placement="top">
+                  <span class="value">{{ item.deviceName }}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">所属项目：</span>
+                <el-tooltip :content="item.inProjectName" effect="dark" placement="top">
+                  <span class="value">{{ item.inProjectName }}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">报警内容：</span>
+                <el-tooltip :content="item.alarmContent" effect="dark" placement="top">
+                  <span class="value">{{ item.alarmContent }}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">报警时间：</span>
+                <el-tooltip :content="item.alarmTime" effect="dark" placement="top">
+                  <span class="value">{{parseTime(item.alarmTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">处理结果：</span>
+                <el-tooltip :content="item.processResult" effect="dark" placement="top">
+                  <span class="value">{{ item.processResult }}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">处理时间：</span>
+                <el-tooltip :content="item.processTime" effect="dark" placement="top">
+                  <span class="value">{{parseTime(item.processTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
+                </el-tooltip>
+              </div>
+            </div>
+            <div class="card-footer">
+              <el-button
+                :disabled="item.processStatus !== '0'"
+                icon="el-icon-edit"
+                size="mini"
+                type="text"
+                @click="handleUpdate(item)"
+              >处理</el-button>
+              <el-divider direction="vertical"></el-divider>
+              <el-button
+                icon="el-icon-document-add"
+                size="mini"
+                type="text"
+                @click="handleWork(item)"
+              >创建工单</el-button>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
     <pagination
       v-show="total > 0"
       :limit.sync="queryParams.pageSize"
+      :page-sizes="[12, 24, 36, 60]"
       :page.sync="queryParams.pageNum"
       :total="total"
       @pagination="getList"
@@ -208,6 +305,8 @@ export default {
   },
   data() {
     return {
+      // 视图类型
+      viewType: "card",
       // 遮罩层
       loading: true,
       // 选中数组
@@ -229,7 +328,7 @@ export default {
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 12,
         typeName: null,
         typeCode: null,
         inProject: null,
@@ -253,6 +352,10 @@ export default {
     this.getInProjectList();
   },
   methods: {
+    // 切换视图类型
+    changeViewType(type) {
+      this.viewType = type;
+    },
     // 查询所属项目列表
     getInProjectList() {
       listProject({
@@ -445,3 +548,6 @@ export default {
   },
 };
 </script>
+<style lang="scss" scoped>
+@import "~@/assets/styles/alarm-card.scss";
+</style>
diff --git a/src/views/tenant/alarm/warning.vue b/src/views/tenant/alarm/warning.vue
index a5572811..b4a9b829 100644
--- a/src/views/tenant/alarm/warning.vue
+++ b/src/views/tenant/alarm/warning.vue
@@ -52,6 +52,11 @@
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
           >重置</el-button
         >
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
         <el-button
           icon="el-icon-download"
           plain
@@ -60,10 +65,17 @@
           @click="handleExport"
           >导出</el-button
         >
-      </el-form-item>
-    </el-form>
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        :view-type="viewType"
+        @changeViewType="changeViewType"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
 
     <el-table
+      v-if="viewType!='card'"
       v-loading="loading"
       :data="recordList"
       :default-sort="{ prop: 'alarmTime', order: 'descending' }"
@@ -77,13 +89,17 @@
         width="60"
       ></el-table-column>
       <el-table-column
-        align="left"
+        align="center"
+        label="预警类型"
+        prop="typeName"
+      />
+      <el-table-column
+        align="center"
         label="设备名称"
         prop="deviceName"
       />
       <el-table-column align="center" label="所属项目" prop="inProjectName" />
-      <!-- <el-table-column label="设备当前值" align="left"  width="200px" prop="currentValue" /> -->
-      <el-table-column align="left" label="推送内容" prop="alarmContent" />
+      <el-table-column align="center" label="预警内容" prop="alarmContent" />
       <el-table-column
         align="center"
         label="预警时间"
@@ -98,12 +114,19 @@
         </template>
       </el-table-column>
       <el-table-column
-        :formatter="stateFormatter"
         align="center"
         label="处理状态"
         prop="processStatus"
-      />
-      <el-table-column align="left" label="处理结果" prop="processResult" />
+        width="100"
+      >
+        <template slot-scope="scope">
+          <el-tag v-if="scope.row.processStatus === '1'" >{{ stateFormatter(scope.row) }}</el-tag>
+          <el-tag v-else-if="scope.row.processStatus === '0'" type="danger" >{{ stateFormatter(scope.row) }}</el-tag>
+          <el-tag v-else-if="scope.row.processStatus === '2'" type="warning" >{{ stateFormatter(scope.row) }}</el-tag>
+          <el-tag v-else type="info" >{{ stateFormatter(scope.row) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="处理结果" prop="processResult" />
       <el-table-column
         align="center"
         label="处理时间"
@@ -116,15 +139,11 @@
           }}</span>
         </template>
       </el-table-column>
-      <el-table-column
-        align="left"
-        label="预警类型"
-        prop="typeName"
-      />
       <el-table-column
         align="center"
         class-name="small-padding fixed-width"
         label="操作"
+        width="150"
       >
         <template slot-scope="scope">
           <el-button
@@ -146,9 +165,87 @@
       </el-table-column>
     </el-table>
 
+    <div v-else class="card-list-box">
+      <el-row :gutter="20">
+        <el-col v-for="(item, index) in recordList" :key="index" :lg="8" :md="12" :sm="12" :xs="24" class="card-item-col">
+          <div class="card-item">
+            <div class="card-header">
+              <div class="card-header-top">
+                <div class="device-img-box">
+                  <el-image
+                    :src="'http://static.drgyen.com/pc/smart-power-ui/alarm/device.png'"
+                    style="width: 100%; height: 100%">
+                  </el-image>
+                </div>
+                <div class="card-item-name">{{ item.typeName }}</div>
+              </div>
+              <div :class="'card-status'+item.processStatus" class="card-status">
+                {{ stateFormatter(item) }}
+              </div>
+            </div>
+            <div class="card-content">
+              <div class="info-item">
+                <span class="label">预警设备：</span>
+                <el-tooltip :content="item.deviceName" effect="dark" placement="top">
+                  <span class="value">{{ item.deviceName }}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">所属项目：</span>
+                <el-tooltip :content="item.inProjectName" effect="dark" placement="top">
+                  <span class="value">{{ item.inProjectName }}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">预警内容：</span>
+                <el-tooltip :content="item.alarmContent" effect="dark" placement="top">
+                  <span class="value">{{ item.alarmContent }}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">预警时间：</span>
+                <el-tooltip :content="item.alarmTime" effect="dark" placement="top">
+                  <span class="value">{{parseTime(item.alarmTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">处理结果：</span>
+                <el-tooltip :content="item.processResult" effect="dark" placement="top">
+                  <span class="value">{{ item.processResult }}</span>
+                </el-tooltip>
+              </div>
+              <div class="info-item">
+                <span class="label">处理时间：</span>
+                <el-tooltip :content="item.processTime" effect="dark" placement="top">
+                  <span class="value">{{parseTime(item.processTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
+                </el-tooltip>
+              </div>
+            </div>
+            <div class="card-footer">
+              <el-button
+                :disabled="item.processStatus !== '0'"
+                icon="el-icon-edit"
+                size="mini"
+                type="text"
+                @click="handleUpdate(item)"
+              >处理</el-button>
+              <el-divider direction="vertical"></el-divider>
+              <el-button
+                icon="el-icon-document-add"
+                size="mini"
+                type="text"
+                @click="handleWork(item)"
+              >创建工单</el-button>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+
     <pagination
       v-show="total > 0"
       :limit.sync="queryParams.pageSize"
+      :page-sizes="[12, 24, 36, 60]"
       :page.sync="queryParams.pageNum"
       :total="total"
       @pagination="getList"
@@ -206,6 +303,8 @@ export default {
   },
   data() {
     return {
+      // 视图类型
+      viewType: "card",
       // 遮罩层
       loading: true,
       // 选中数组
@@ -227,7 +326,7 @@ export default {
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 12,
         typeName: null,
         typeCode: null,
         inProject: null,
@@ -251,6 +350,9 @@ export default {
     this.getInProjectList();
   },
   methods: {
+    changeViewType(type) {
+      this.viewType=type;
+    },
     // 查询所属项目列表
     getInProjectList() {
       listProject({
@@ -439,3 +541,7 @@ export default {
   },
 };
 </script>
+
+<style lang="scss" scoped>
+@import "~@/assets/styles/alarm-card.scss";
+</style>