fix:配置设备告警 联系方式

hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/index.vue

@@ -1,15 +1,15 @@
 <template>
   <ns-drawer
     v-model:visible="visible"
-    width="520"
-    :title="' '"
+    width="600"
+    :title="'设置通知联系人'"
     :ok="btnClick"
     :cancel="handleClose"
     placement="right"
     :footer-style="{ textAlign: 'right' }"
     @close="handleClose">
-    <div style="padding: 18px; width: 100%; overflow: hidden">
-      <a-form ref="formRef" :model="infoObject" :rules="rules">
+    <div style="width: 100%; overflow: hidden; overflow-y: hidden; height: 100%">
+      <a-form ref="formRef" :model="infoObject" :rules="rules" style="width: 80%">
         <a-form-item ref="notification" label="通知方式" name="notification">
           <a-select
             ref="select"
@@ -22,7 +22,7 @@
             placeholder="请选择通知方式"
             :filter-option="filterDevicePoint" />
         </a-form-item>
-        <a-form-item label="启用规则" name="enableRules">
+        <a-form-item label="启用规则">
           <a-switch
             :checked="infoObject.enableRules === 1 ? true : false"
             :class="{
@@ -31,28 +31,57 @@
             }"
             @click="clickSwitch" />
         </a-form-item>
-        <a-form-item label="通知用户" name="user">
-          <a-cascader
-            v-model:value="infoObject.user"
-            style="width: 100%"
-            multiple
-            :max-tag-count="1"
-            :options="options"
-            :load-data="loadData"
-            placeholder="请选择通知用户"
-            :show-checked-strategy="Cascader.SHOW_CHILD" />
-        </a-form-item>
       </a-form>
-      <a-table :dataSource="dataSource" :columns="columns" :pagination="false" />
+      <div style="width: 100%; height: 765px; overflow-y: auto">
+        <div style="margin-bottom: 8px">
+          <div style="width: 100%; display: flex; position: relative">
+            <div
+              style="
+                border-width: 0px;
+                position: absolute;
+                left: 0px;
+                top: 5px;
+                width: 5px;
+                height: 15px;
+                background: inherit;
+                background-color: rgba(251, 156, 67, 1);
+                border: none;
+                border-radius: 5px;
+                -moz-box-shadow: none;
+                -webkit-box-shadow: none;
+                box-shadow: none;
+              "></div>
+            <span style="margin-left: 24px; color: #333333">联系人名单</span>
+          </div>
+          <img
+            style="width: 100%; margin-top: -10px"
+            src="https://files.axshare.com/gsc/4T0UQR/7e/5d/a2/7e5da2a277344db8af30521cefeb70cc/images/告警设置/u150.svg?pageId=1f58c1ba-b461-4fe8-a2b3-295f1e7b0aa0" />
+        </div>
+        <div style="margin-bottom: 16px">
+          <a-button type="primary" @click="chengUser">选择联系人 </a-button>
+        </div>
+        <a-table
+          :dataSource="dataSource"
+          :columns="columns"
+          :scroll="{ x: 800, y: 700 }"
+          :pagination="pagination">
+          <template #bodyCell="{ record, column }">
+            <template v-if="column.dataIndex === 'operation'">
+              <a style="color: rgb(210, 0, 5)" @click="remove(record)">移除</a>
+            </template>
+          </template>
+        </a-table>
+      </div>
     </div>
+    <linkPeople v-show="visibleModel" ref="linkPeoples" @handleCancel="handleCancel" />
   </ns-drawer>
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
-  import { Cascader } from 'ant-design-vue';
-
-  import { NsMessage } from '/nerv-lib/component';
-  import { http } from '/nerv-lib/util';
+  // import { NsMessage } from '/nerv-lib/component';
+  // import { http } from '/nerv-lib/util';
+  // import { number } from 'vue-types';
+  import linkPeople from './linkPeople/index.vue';
 
   // import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';
 
@@ -61,25 +90,191 @@
     {
       title: '序号',
       dataIndex: 'address',
+      width: 80,
+      fixed: 'left',
       customRender: (text: any) => {
         return text.index + 1;
       },
     },
     {
-      title: '通知名单',
+      title: '姓名',
       dataIndex: 'name',
+      width: 80,
+      fixed: 'left',
       key: 'name',
     },
-  ];
-  const dataSource = [
     {
-      name: '运维>运维1部>张三',
+      title: '性别',
+      dataIndex: 'sex',
+      width: 80,
+      key: 'sex',
     },
     {
-      name: '运维>运维1部>李四',
+      title: '组织关系',
+      dataIndex: 'site',
+      key: 'site',
+    },
+    {
+      title: '部门',
+      dataIndex: 'department',
+      key: 'department',
+    },
+    {
+      title: '操作',
+      width: 80,
+      dataIndex: 'operation',
+      fixed: 'right',
     },
   ];
+  const visibleModel = ref(false);
+  const dataSource = ref([
+    {
+      id: 1,
+      name: '张三1',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+    {
+      id: 2,
+      name: '张三2',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+    {
+      id: 3,
+      name: '张三3',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+    {
+      id: 4,
+      name: '张三',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+    {
+      id: 5,
+      name: '张三',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+    {
+      id: 6,
+      name: '张三',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+    {
+      id: 7,
+      name: '张三',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+    {
+      id: 8,
+      name: '张三',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+    {
+      id: 9,
+      name: '张三',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+    {
+      id: 10,
+      name: '张三',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+    {
+      id: 11,
+      name: '张三',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+    {
+      id: 12,
+      name: '张三',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+    {
+      id: 13,
+      name: '张三',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+    {
+      id: 14,
+      name: '张三',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+    {
+      id: 15,
+      name: '张三',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+    {
+      id: 16,
+      name: '张三',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+    {
+      id: 17,
+      name: '张三',
+      sex: '男',
+      site: '济阳站',
+      department: '济阳站/产品/产品经理',
+    },
+  ]);
   const visible = ref(false);
+  const linkPeoples = ref(null);
+  const handleChangePage = (current: number, pageSize: number) => {
+    pagination.value.current = current;
+    pagination.value.pageSize = pageSize;
+  };
+  const pagination = ref({
+    total: 0,
+    size: 'small',
+    current: 1,
+    pageSize: 10,
+    showQuickJumper: true,
+    showLessItems: true,
+    // showSizeChanger: true,
+    showTotal: (total: number, range: any) =>
+      total && range ? `显示第${range[0]}到${range[1]}条记录,共 ${total} 条记录` : '',
+    onChange: handleChangePage,
+  });
+  //点击联系人
+  const chengUser = () => {
+    visibleModel.value = true;
+    linkPeoples.value.getData();
+  };
+  //取消弹窗
+  const handleCancel = () => {
+    visibleModel.value = false;
+  };
   //表单数据
   const infoObject = ref({
     enableRules: 0,
@@ -101,63 +296,10 @@
     { label: '站内信息', value: 1 },
     { label: '邮件', value: 2 },
   ]);
-  //通知用户
-  const options = ref([
-    {
-      value: 1,
-      label: 'Zhejiang',
-      isLeaf: false,
-    },
-    {
-      value: 2,
-      label: 'Jiangsu',
-      isLeaf: false,
-    },
-  ]);
-  //加载用户
-  const loadData = (selectedOptions: any) => {
-    const targetOption = selectedOptions[selectedOptions.length - 1];
-    targetOption.loading = true;
-    // load options lazily
-    setTimeout(() => {
-      targetOption.loading = false;
-      console.log(targetOption, '数据');
-      targetOption.children = [
-        {
-          label: `${targetOption.label} Dynamic 1`,
-          value: 3,
-          isLeaf: false,
-        },
-        {
-          label: `${targetOption.label} Dynamic 2`,
-          value: 4,
-          isLeaf: false,
-        },
-      ];
-      options.value = [...options.value];
-    }, 1000);
-  };
 
   const rules = {
-    notification: [{ required: true, message: '请选择站点', trigger: 'change' }],
-    enableRules: [{ required: true, message: '请选择启用规则', trigger: 'change' }],
+    notification: [{ required: true, message: '请选择通知方式', trigger: 'change' }],
     user: [{ required: true, message: '请选择通知人', trigger: 'change' }],
-    abnormalDescription: [
-      {
-        required: true,
-        message: '请输入异常描述',
-        trigger: 'blur',
-        validator: (rules: any, abnormalDescription: any, cbfn: any) => {
-          if (abnormalDescription.trim() !== '') {
-            cbfn();
-          } else {
-            cbfn('告警标题不能为空');
-          }
-        },
-      },
-    ],
-    alarm: [{ required: true, message: '请选择逻辑', trigger: 'blur' }],
-    number: [{ required: true, message: '请输入数值', trigger: 'blur' }],
   };
   const formRef = ref();
   const emit = defineEmits(['editObject']);
@@ -165,7 +307,9 @@
     //判断 是新增 还是修改
     if (value) {
       // infoObject.value = value;
-      infoObject.value = {};
+      infoObject.value = {
+        enableRules: 0,
+      };
     } else {
       infoObject.value = {
         enableRules: 0,
@@ -173,7 +317,15 @@
     }
     visible.value = !visible.value;
   };
-
+  //移除数据
+  const remove = (data: any) => {
+    dataSource.value.forEach((item, index) => {
+      if (item.id === data.id) {
+        dataSource.value.splice(index, 1);
+      }
+    });
+    dataSource.value = [...dataSource.value];
+  };
   const btnClick = () => {
     console.log(infoObject.value);
     //表单校验
@@ -190,22 +342,13 @@
     // 清楚校验错误信息
     formRef.value.resetFields();
     visible.value = false;
-    options.value = [
-      {
-        value: 'zhejiang',
-        label: 'Zhejiang',
-        isLeaf: false,
-      },
-      {
-        value: 'jiangsu',
-        label: 'Jiangsu',
-        isLeaf: false,
-      },
-    ];
+    visibleModel.value = false;
   };
   defineExpose({
     toggle,
     handleClose,
+    handleCancel,
+    handleChangePage,
     formRef,
   });
 </script>
@@ -240,7 +383,7 @@
   }
   /deep/ .ant-form-item-label {
     z-index: 20;
-    text-align: right;
-    width: 23%;
+    text-align: left;
+    width: 20%;
   }
 </style>

hx-ai-intelligent/src/view/alarmManagement/alarmSettings/notificationManagement/linkPeople/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <a-modal
+    v-model:visible="show"
+    width="1000px"
+    style="top: 50%; transform: translateY(-50%)"
+    title="添加联系人"
+    @ok="handleOk"
+    @cancel="handleCancel">
+    <div style="width: 100%; height: 100%">
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+      <p>Some contents...</p>
+    </div>
+  </a-modal>
+</template>
+
+<script lang="ts">
+  import { ref } from 'vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    setup(props, { emit }) {
+      const handleOk = () => {
+        // 处理确定按钮的逻辑
+        console.log('点击了确定按钮');
+      };
+      const getData = () => {
+        show.value = true;
+      };
+      const show = ref(false);
+      const handleCancel = () => {
+        // 处理取消按钮的逻辑
+        console.log('点击了取消按钮');
+        emit('handleCancel', null);
+        show.value = false;
+      };
+      return {
+        handleOk,
+        show,
+        getData,
+        handleCancel,
+      };
+    },
+  });
+</script>