`fix`

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

@@ -1,3 +1,5 @@
+<!--suppress ALL -->
+
 <template>
   <div style="padding: 10px 15px">
     <el-card class="box-card">
@@ -11,10 +13,10 @@
                   align-items: center;
                 "
           >
-            <div style="font-size: 12px; width: 80px">故障名称:</div>
+            <div style="font-size: 12px; width: 80px">告警名称:</div>
             <el-input
-              v-model="searchform.alarmname"
-              placeholder="故障名称"
+              v-model="searchform.name"
+              placeholder="告警名称"
             ></el-input>
           </div>
           <div
@@ -25,13 +27,13 @@
                   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 style="font-size: 12px; width: 80px;text-align: right;margin-right: 15px">告警时间:</div>
+            <el-date-picker type="daterange" v-model="searchform.alarmtime"   placeholder="请选择"></el-date-picker>
           </div>
         </div>
         <div>
-          <el-button type="primary" plain>重置</el-button>
-          <el-button type="primary">搜索</el-button>
+          <el-button type="primary" plain @click="initdata">重置</el-button>
+          <el-button type="primary" @click="searchdata">搜索</el-button>
         </div>
       </div>
     </el-card>
@@ -39,34 +41,31 @@
     <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 :data="tabledata" border  :columns="cloumdata" >
+              <el-table-column v-for="item in cloumdata.filter(i=>i.visible)" :prop="item.prop" :label="item.label" >
+                <template #default="scope">
+                  <div v-html=" initcloumdata(scope.row,item.prop) ">
+                  </div>
+                </template>
+              </el-table-column>
               <el-table-column label="操作">
                 <template #default="scope">
                   <div>
-                    <el-button link>
-                      <el-tooltip effect="dark" content="编辑">
+                    <el-button link @click="handleEdit(scope.row)">
+                      <el-tooltip effect="dark" content="处理">
                         <el-icon>
                           <Edit />
                         </el-icon>
                       </el-tooltip>
                     </el-button>
-                    <el-popconfirm title="确定删除该标签?">
+                    <el-popconfirm title="确定删除该记录?" @confirm="handleDelete(scope.row)">
                       <template #reference>
                         <el-button link
                         ><el-tooltip effect="dark" content="删除"
@@ -85,7 +84,10 @@
                            small
                            background
                            layout="prev, pager, next"
-                           :total="50"
+                           :total="pagedata.total"
+                           :page-size="pagedata.size"
+                           :current-page="pagedata.current"
+                           @current-change="onchangepage"
                            class="mt-4"
             />
           </el-col>
@@ -101,23 +103,152 @@
     </el-card>
 
 
+    <el-dialog
+      title="处理"
+      v-model="handleshow"
+      width="50%"
+      @close="handleshow = false"
+    >
+      <el-form ref="form" :model="currentdata" label-width="100px" label-position="left">
+        <el-form-item label="处理人" >
+          <el-input v-model="currentdata.handler" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item label="处理方式" >
+          <el-input v-model="currentdata.handlerWay" placeholder="请输入"></el-input>
+        </el-form-item>
+        <el-form-item label="处理内容" >
+          <el-input type="textarea" v-model="currentdata.handlerContent" placeholder="请输入"></el-input>
+        </el-form-item>
+      </el-form>
+
+      <div slot="footer" class="dialog-footer" style="text-align: right">
+        <el-button @click="handleshow = false">取 消</el-button>
+        <el-button type="primary" @click="handleSubmit">确 定</el-button>
+      </div>
+    </el-dialog>
+
   </div>
 </template>
 
-<script setup lang="ts" name="Units">
-import {ref} from "vue";
+<script setup lang="ts" >
+import {ref, h, watchEffect, watch} from "vue";
 import {useRoute, useRouter} from "vue-router";
+import {listBreakdown,updateBreakdown,delBreakdown} from "@/api/data/breakdown"
+import { cloneDeep } from "lodash";
+import moment from "moment";
+import {ElMessage} from "element-plus";
 
 
 const route = useRoute();
 const router = useRouter();
 
+const tabledata = ref([])
 const searchform = ref({
-  alarmname: '',
-  alarmtime:['','']
+  name: '',
+  alarmtime:[moment().subtract(1,'month'),moment().add(1,'day')]
 });
 
-const tabledata = ref([1])
+const currentdata = ref({
+  "id": 0,
+  "name": "",
+  "val": 0,
+  "equipmentId": 0,
+  "equipmentName": "",
+  "content": "",
+  "handler": "",
+  "handlerWay": "",
+  "handlerContent": "",
+  "handleTime": "",
+  "alarmTime": "",
+  "status": "",
+  "remark": "",
+})
+
+const handleshow = ref(false);
+
+const handleSubmit = () => {
+  updateBreakdown(currentdata.value).then(res=>{
+    ElMessage.success("处理成功");
+    handleshow.value = false;
+    getalldata();
+  })
+}
+
+const handleEdit = (row) => {
+  currentdata.value = cloneDeep(row);
+  handleshow.value = true;
+}
+const handleDelete = (row) => {
+  delBreakdown(row.id).then(res=>{
+    ElMessage.success("删除成功");
+    getalldata();
+  })
+}
+const initdata = ()=>{
+  searchform.value = {
+    name: '',
+    alarmtime:[moment().subtract(1,'month'),moment().add(1,'day')]
+  }
+  pagedata.value = {
+    total:0,
+    size:10,
+    current:1
+  }
+}
+const initcloumdata = (row,prop)=>{
+  if(prop == ("status")){
+    return  `<span style="color: ${row[prop]=="1"?"green":"red"}"> ${row[prop]=="1"?"已处理":"未理中"} </span>`;
+  }
+
+  return row[prop];
+
+}
+const cloumdata = ref([
+  {label: '故障名称', prop:'name',visible:true},
+  {label: '故障值', prop:'val',visible:true},
+  {label: '故障设备', prop:'equipmentName',visible:true},
+  {label: '故障内容', prop:'content',visible:true},
+  {label: '处理人', prop:'handler',visible:true},
+  {label: '处理方式', prop:'handlerWay',visible:true},
+  {label: '处理时间', prop:'handlerTime',visible:true},
+  {label: '状态', prop:'status',visible:true},
+  {label: '故障时间', prop:'faultTime',visible:true},
+]);
+
+const onchangepage = (page) => {
+  pagedata.value.current = page;
+  getalldata();
+}
+const pagedata = ref({
+  total:0,
+  size:10,
+  current:1
+});
+
+const getalldata = () => {
+
+  //@ts-ignore
+  var p = cloneDeep(searchform.value);
+  p["params"]={
+    "beginTime":moment(p.alarmtime[0]).format("YYYY-MM-DD HH:mm:ss"),
+    "endTime":moment(p.alarmtime[1]).format("YYYY-MM-DD HH:mm:ss")
+  }
+  delete p.alarmtime;
+
+  listBreakdown({...p,pageSize:pagedata.value.size,pageNum:pagedata.value.current}).then(res => {
+    const {rows,total,page} = res;
+    pagedata.value = {total:total,current:page, size:10};
+    tabledata.value = rows
+  })
+}
+getalldata()
+
+
+
+const searchdata= ()=>{
+  pagedata.value = {total:0,size:10,current:1};
+  getalldata();
+}
 
 
 </script>