feat(web): 新增设备管理功能

- 新增设备管理页面和相关功能

web/src/views/system/alarmLog.vue

@@ -0,0 +1,209 @@
+<template>
+  <div class="alarmLog">
+    <searchBox
+      :btn-option-list="btnOptionList"
+      @operateForm="operateForm"
+    ></searchBox>
+
+    <div class="content-table">
+      <ComTable
+        :columns="columns"
+        :table-data="tableData"
+        @handlePagesizeChange="handlePagesizeChange"
+        ref="comTable"
+        :table-option="tableOption"
+        :page-option="pageOption"
+        :table-h="tableH"
+      >
+        <template #type="record">
+          <span>{{ ['其它','系统日志','操作日志','设备日志'][record.type] }}</span>
+        </template>
+        <template #status="record">
+          <span><a-tag :color="record.status ? 'red' : 'green'">{{
+                record.status ? '异常' : '正常'
+              }}</a-tag></span>
+        </template>
+
+        <template #action="record">
+          <OperateCom :record="record" :operate-list="operateList" @operateForm="operateForm" />
+        </template>
+      </ComTable>
+    </div>
+  <a-modal v-model:open="formModal" width="750px" style="top: 20px" :footer="null">
+      <!-- action:edit add -->
+      <EditCom
+        :record="formState"
+        @operateForm="operateForm"
+        type="alarmLog"
+        :action="formStatus"
+      ></EditCom>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { columnList, alarmlogOptions } from '../../../public/config/columnList'
+import { getReq, postReq } from '@/request/api.js'
+import EditCom from '@/components/EditCom.vue'
+import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
+import { createVNode } from 'vue'
+import { Modal } from 'ant-design-vue'
+export default {
+  name: '',
+  components: {
+    EditCom,
+  },
+  props: {},
+  data() {
+    return {
+      formModal: false,
+      formState: {},
+      formStatus: 'add', //表单状态辑状态 add:新增 edit:编辑
+      pageOption: {
+        pageSize: 10,
+        page: 1
+      },
+      btnOptionList: [],
+      paramsDate: {}
+    }
+  },
+  computed: {},
+  created() {
+    let info = []
+    let col = columnList.find((i) => i.page == 'alarmLog').columns
+    if (col.length) {
+      col.forEach((item) => {
+        info.push(this.$setWidth(item))
+      })
+    }
+    this.columns = info
+  },
+
+  mounted() {
+    this.operateList = this.$getBtns(['查看',  '删除'])
+    // this.btnOptionList = this.$getBtns(['新增'])
+    this.getList()
+  },
+
+  methods: {
+    async getList() {
+      this.$refs.comTable.loading = true
+
+      const { page, pageSize } = this.pageOption
+
+      const params = {
+        ...this.paramsDate,
+        page_size: pageSize,
+        page
+      }
+
+      try {
+        const res = await getReq('/querySystemLogList', params)
+        if (res.errcode === 0) {
+          this.$refs.comTable.loading = false
+
+          this.tableData = res.data
+
+          this.pageOption = {
+            page: res.page,
+            pageSize: res.page_size,
+            count: res.count
+          }
+        } else {
+          const err = { tip: res.errmsg }
+          throw err
+        }
+      } catch (error) {
+        //统一处理报错提示
+      }
+    },
+    async operateForm(type, record = {}) {
+      this.formStatus = type
+    
+      if(type=='edit'||type=='read'){ 
+        await this.getRuleFormInfo(record)
+
+        this.formModal = true
+        this.formState = record
+      }else if(type=='del'){
+        this.handleDelete([record.device_id],this.getList)
+      }else if(type=='back'){
+        this.formModal = false
+        this.getList()
+      }
+      
+    },
+    //  删除操作
+    async handleDelete(id,callback) {
+      const that = this
+      Modal.confirm({
+        title: '你确认删除数据吗?',
+        icon: createVNode(ExclamationCircleOutlined),
+
+        async onOk() {
+          try {
+            const res = await getReq('/deleteUser',{user_id:id})
+            if (res.errcode === 0) {
+              this.$message.success(res.errmsg)
+              this.pageOption.page=1
+              callback()
+            } else {
+              throw res
+            }
+          } catch (error) {
+            callback()
+          }
+        },
+        onCancel() {
+          // console.log("Cancel");
+        },
+        class: 'test'
+      })
+    },
+    async getRuleFormInfo(record) {
+      
+
+      const row = record || {}
+
+      for (let e of alarmlogOptions) {
+        for (let i of e.list) {
+          e.ruleForm[i.key] = row[i.key] || ''
+          // if (i.key === 'id') {
+          //   e.ruleForm.id = row.id
+          // } else if (i.key === 'is_open') {
+          //   e.ruleForm.is_open = Boolean(row.is_open)
+          // } else {
+          //   e.ruleForm[i.key] = row[i.key] || ''
+          // }
+
+          // if (i.key === 'station_id') {
+          //   i.list =  this.stations
+          // }
+          // if(['rated_capacity', 'rated_current', 'rated_voltage', 'reted_power'].includes(i.key)){
+          //   const attrs=JSON.parse(row.attrs||"{}")
+          //   e.ruleForm[i.key] = attrs[i.key]
+          // }
+          
+
+        }
+      }
+    },
+    handlePagesizeChange(pageOption) {
+      this.pageOption.pageSize = pageOption.pageSize
+      this.pageOption.page = pageOption.page
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.alarmLog {
+  height: 100%;
+
+  .content-table {
+    height: calc(100% - 70px);
+    padding: 10px;
+  }
+}
+</style>