`fix 告警&故障`

ruoyi-ui-vue3/src/views/alarm/alarmmanager/index.vue

@@ -1,11 +1,102 @@
 <template>
   <div style="padding: 10px 15px">
     <el-card class="box-card">
+      <div style="display: flex; flex-direction: row; justify-content: space-between">
+        <div style="display: flex">
+          <div
+            style="
+                  display: flex;
+                  flex-direction: row;
+                  flex-wrap: nowrap;
+                  align-items: center;
+                "
+          >
+            <div style="font-size: 12px; width: 80px">告警名称:</div>
+            <el-input
+              v-model="searchform.alarmname"
+              placeholder="告警名称"
+            ></el-input>
+          </div>
+          <div
+            style="
+                  display: flex;
+                  flex-direction: row;
+                  flex-wrap: nowrap;
+                  align-items: center;
+                "
+          >
+            <div style="font-size: 12px; width: 80px;text-align: right;margin-right: 15px">告警时间:</div>
+             <el-date-picker type="daterange"></el-date-picker>
+          </div>
+        </div>
+        <div>
+          <el-button type="primary" plain>重置</el-button>
+          <el-button type="primary">搜索</el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <el-card class="box-card" style="margin-top: 10px">
       <template #header>
         <div class="card-header">
-          <span>东门立柱摄像-详情</span>
+          <span>实时告警</span>
+
         </div>
       </template>
+      <div>
+        <el-row>
+          <el-col :span="24">
+            <el-table :data="tabledata" border>
+              <el-table-column label="告警名称"></el-table-column>
+              <el-table-column label="告警值"></el-table-column>
+              <el-table-column label="告警设备"></el-table-column>
+              <el-table-column label="告警内容"></el-table-column>
+              <el-table-column label="处理人"></el-table-column>
+              <el-table-column label="处理方式"></el-table-column>
+              <el-table-column label="处理时间"></el-table-column>
+              <el-table-column label="状态"></el-table-column>
+              <el-table-column label="告警时间"></el-table-column>
+              <el-table-column label="操作">
+                <template #default="scope">
+                  <div>
+                    <el-button link>
+                      <el-tooltip effect="dark" content="编辑">
+                        <el-icon>
+                          <Edit />
+                        </el-icon>
+                      </el-tooltip>
+                    </el-button>
+                    <el-popconfirm title="确定删除该标签?">
+                      <template #reference>
+                        <el-button link
+                        ><el-tooltip effect="dark" content="删除"
+                        ><el-icon><Delete /></el-icon></el-tooltip
+                        ></el-button>
+                      </template>
+                    </el-popconfirm>
+                  </div>
+                </template>
+              </el-table-column>
+
+            </el-table>
+          </el-col>
+          <el-col :span="24" style="margin-top: 10px;">
+            <el-pagination style="float: right;"
+                           small
+                           background
+                           layout="prev, pager, next"
+                           :total="50"
+                           class="mt-4"
+            />
+          </el-col>
+
+        </el-row>
+
+
+
+
+      </div>
+
 
     </el-card>
 
@@ -21,6 +112,13 @@ import {useRoute, useRouter} from "vue-router";
 const route = useRoute();
 const router = useRouter();
 
+const searchform = ref({
+  alarmname: '',
+  alarmtime:['','']
+});
+
+const tabledata = ref([1])
+
 
 </script>
 

ruoyi-ui-vue3/src/views/alarm/faultmanager/index.vue

@@ -1,11 +1,102 @@
 <template>
   <div style="padding: 10px 15px">
     <el-card class="box-card">
+      <div style="display: flex; flex-direction: row; justify-content: space-between">
+        <div style="display: flex">
+          <div
+            style="
+                  display: flex;
+                  flex-direction: row;
+                  flex-wrap: nowrap;
+                  align-items: center;
+                "
+          >
+            <div style="font-size: 12px; width: 80px">故障名称:</div>
+            <el-input
+              v-model="searchform.alarmname"
+              placeholder="故障名称"
+            ></el-input>
+          </div>
+          <div
+            style="
+                  display: flex;
+                  flex-direction: row;
+                  flex-wrap: nowrap;
+                  align-items: center;
+                "
+          >
+            <div style="font-size: 12px; width: 80px;text-align: right;margin-right: 15px">故障时间:</div>
+            <el-date-picker type="daterange"></el-date-picker>
+          </div>
+        </div>
+        <div>
+          <el-button type="primary" plain>重置</el-button>
+          <el-button type="primary">搜索</el-button>
+        </div>
+      </div>
+    </el-card>
+
+    <el-card class="box-card" style="margin-top: 10px">
       <template #header>
         <div class="card-header">
-          <span>东门立柱摄像-详情</span>
+          <span>实时故障</span>
+
         </div>
       </template>
+      <div>
+        <el-row>
+          <el-col :span="24">
+            <el-table :data="tabledata" border>
+              <el-table-column label="故障名称"></el-table-column>
+              <el-table-column label="故障值"></el-table-column>
+              <el-table-column label="故障设备"></el-table-column>
+              <el-table-column label="故障内容"></el-table-column>
+              <el-table-column label="处理人"></el-table-column>
+              <el-table-column label="处理方式"></el-table-column>
+              <el-table-column label="处理时间"></el-table-column>
+              <el-table-column label="状态"></el-table-column>
+              <el-table-column label="故障时间"></el-table-column>
+              <el-table-column label="操作">
+                <template #default="scope">
+                  <div>
+                    <el-button link>
+                      <el-tooltip effect="dark" content="编辑">
+                        <el-icon>
+                          <Edit />
+                        </el-icon>
+                      </el-tooltip>
+                    </el-button>
+                    <el-popconfirm title="确定删除该标签?">
+                      <template #reference>
+                        <el-button link
+                        ><el-tooltip effect="dark" content="删除"
+                        ><el-icon><Delete /></el-icon></el-tooltip
+                        ></el-button>
+                      </template>
+                    </el-popconfirm>
+                  </div>
+                </template>
+              </el-table-column>
+
+            </el-table>
+          </el-col>
+          <el-col :span="24" style="margin-top: 10px;">
+            <el-pagination style="float: right;"
+                           small
+                           background
+                           layout="prev, pager, next"
+                           :total="50"
+                           class="mt-4"
+            />
+          </el-col>
+
+        </el-row>
+
+
+
+
+      </div>
+
 
     </el-card>
 
@@ -21,6 +112,13 @@ import {useRoute, useRouter} from "vue-router";
 const route = useRoute();
 const router = useRouter();
 
+const searchform = ref({
+  alarmname: '',
+  alarmtime:['','']
+});
+
+const tabledata = ref([1])
+
 
 </script>