add:对接设备告警 对接设备告警 设备类型 设备名称 设备点位

hx-ai-intelligent/src/view/alarmManagement/alarmSettings/equipmentAlarm/configureDeviceAlarms.vue

@@ -1,13 +1,36 @@
 <!-- 配置设备告警 -->
 <template>
-  <ns-view-list-table v-if="show" class="table" v-bind="tableConfig" />
+  <ns-view-list-table v-if="show" ref="mainRef" class="table" v-bind="tableConfig">
+    <template #bodyCell="{ record, column }">
+      <template v-if="column.dataIndex === 'enableRules'">
+        <a-switch
+          :checked="record.enableRules === 1 ? true : false"
+          :class="{
+            'blue-background': record.enableRules === 1 ? true : false,
+            'grey-background': record.enableRules === 1 ? false : true,
+          }"
+          @click="clickSwitch({ enableRules: record.enableRules, record: record })" />
+      </template>
+      <template v-if="column.dataIndex === 'equipmentInfo'">
+        {{
+          record?.enableRules
+            ? record.enableRules + '>' + record.deviceType + '>' + record.deviceName
+            : '-'
+        }}
+      </template>
+    </template>
+  </ns-view-list-table>
   <!-- 新增or编辑界面 -->
   <editConfigureDeviceAlarm ref="editConfigureDeviceAlarms" />
 </template>
 <script lang="ts">
-  import { ref } from 'vue';
+  import { ref, createVNode } from 'vue';
+  import { http } from '/nerv-lib/util';
   import data from '../notificationManagementMock.json';
+  import { NsMessage, NsModal } from '/nerv-lib/component';
   import editConfigureDeviceAlarm from '../equipmentAlarm/editConfigureDeviceAlarm.vue';
+  import { deviceAlarms } from '/@/api/alarmSettings/deviceAlarms';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
 
   export default {
     components: { editConfigureDeviceAlarm },
@@ -17,9 +40,28 @@
       const configureDeviceAlarmsData = ref({});
       const show = ref(false);
       const tableConfig = ref({});
+      const mainRef = ref({});
       const editConfigureDeviceAlarms = ref({});
       const mockData = ref(data.listData);
-      const doWnload = (url) => {
+      const clickSwitch = (data: any) => {
+        NsModal.confirm({
+          title: '启用状态',
+          icon: createVNode(ExclamationCircleOutlined),
+          content: '确定' + (data.record.enableRules === 1 ? '关闭' : '启用') + '吗?',
+          onOk: () => {
+            http
+              .post(deviceAlarms.addOrUpNewData, {
+                id: data.record.id,
+                enableRules: data.record.enableRules === 1 ? 0 : 1,
+              })
+              .then(() => {
+                NsMessage.success('操作成功');
+                mainRef.value?.nsTableRef.reload();
+              });
+          },
+        });
+      };
+      const doWnload = (url: any) => {
         const a = document.createElement('a');
         document.body.appendChild(a);
         a.href = encodeURI(url);
@@ -33,7 +75,7 @@
         show.value = true;
         tableConfig.value = {
           title: '告警规则',
-          // api: '/carbon_emission/device/getDeviceList',
+          api: deviceAlarms.getTableList,
           value: mockData.value,
           headerActions: [
             {
@@ -93,38 +135,34 @@
             },
             {
               title: '规则id',
-              dataIndex: 'id',
+              dataIndex: 'ruleId',
             },
             {
               title: '设备信息',
-              dataIndex: 'deviceCode',
+              dataIndex: 'equipmentInfo',
             },
             {
               title: '告警点位',
-              dataIndex: 'deviceName',
+              dataIndex: 'devicePoint',
             },
             {
               title: '判断条件',
-              dataIndex: 'position',
+              dataIndex: 'ruleType',
             },
             {
               title: '取值类型',
-              dataIndex: 'position',
+              dataIndex: 'valueType',
               textEllipsis: true,
             },
             {
               title: '异常描述',
-              dataIndex: 'position',
+              dataIndex: 'abnormalDescription',
             },
             {
               title: '启用通知',
-              dataIndex: 'isUse',
+              dataIndex: 'enableRules',
             },
           ],
-          params: {
-            page: 0,
-            pageSize: 10,
-          },
           // rowSelection: null, 选择按钮
           columnActions: {
             title: '操作',
@@ -150,7 +188,7 @@
             ],
           },
           formConfig: {
-            title: value.position,
+            title: value.errorCode,
             schemas: [
               {
                 field: 'provider',
@@ -163,19 +201,19 @@
               {
                 field: 'provider',
                 label: '设备点位',
-                component: 'NsSelect',
+                component: 'nsSelectApi',
                 componentProps: {
-                  placeholder: '请选择告警优先级',
-                  options: [
-                    {
-                      label: '电流',
-                      value: '1',
-                    },
-                    {
-                      label: '电压',
-                      value: '0',
-                    },
-                  ],
+                  api: '/api/community/objs/DictItem',
+                  params: {
+                    pageSize: 100,
+                    code: 'MZ',
+                  },
+                  placeholder: '请选择设备点位',
+                  resultField: 'data',
+                  labelField: 'dictName',
+                  valueField: 'dictValue',
+                  immediate: true,
+                  autoSelectFirst: false,
                 },
               },
               {
@@ -206,6 +244,7 @@
               },
             ],
           },
+          params: { id: value.id },
           // pagination: { pageSizeOptions: false },
           rowKey: 'id',
         };
@@ -213,6 +252,7 @@
       return {
         configureDeviceAlarmsData,
         show,
+        clickSwitch,
         doWnload,
         tableConfig,
         editConfigureDeviceAlarms,
@@ -221,3 +261,28 @@
     },
   };
 </script>
+<style lang="less" scoped>
+  .blue-background.ant-switch-checked {
+    background-color: linear-gradient(
+      180deg,
+      rgba(1, 206, 255, 1) 0%,
+      rgba(0, 150, 229, 1) 100%
+    ) !important;
+  }
+
+  .grey-background.ant-switch {
+    background-color: grey !important;
+  }
+
+  .blue-background.ant-switch-checked .ant-switch-handle {
+    background-color: linear-gradient(
+      180deg,
+      rgba(1, 206, 255, 1) 0%,
+      rgba(0, 150, 229, 1) 100%
+    ) !important;
+  }
+
+  .grey-background.ant-switch .ant-switch-handle {
+    background-color: grey !important;
+  }
+</style>