Merge branch 'ft' into 'main'

fix:修复设备取消客户不能编辑，fix:修复告警管理批量删除，feat:新增设备列表和设备配置表格图片显示

See merge request huang/yun-teng-iot-front!179

@@ -90,7 +90,7 @@
       ContactDrawer,
     },
     setup() {
-      const selectArray: any = ref([]);
+      let selectArray: any = [];
       const hasBatchDelete = ref(true);
       const searchInfo = reactive<Recordable>({});
       const { organizationIdTreeRef, resetFn } = useResetOrganizationTree(searchInfo);
@@ -140,17 +140,20 @@
         }
       };
       const useSelectionChange = () => {
-        selectArray.value = getSelectRows()
-          .filter((f) => f.status !== 1)
-          .map((m) => m.id);
-        if (selectArray.value.length > 0) {
-          hasBatchDelete.value = false;
-        } else {
+        let getRows = getSelectRows();
+        getRows.forEach((f) => {
+          if (f.status == 1 && f.status !== 0) {
+            hasBatchDelete.value = true;
+          } else if (f.status == 0 && f.status !== 1) {
+            hasBatchDelete.value = false;
+          } else if (f.status == 0 && f.status == 1) {
+            hasBatchDelete.value = true;
+          }
+        });
+        selectArray = getRows.filter((f) => f.status !== 1).map((m) => m.id);
+        if (selectArray.length == 0) {
           hasBatchDelete.value = true;
         }
-        // const isJude = getSelectRows().some((s) => {
-        //   if (s.status == 1) return createMessage.error('不能删除已经启用的，请选择未启用的');
-        // });
       };
       // 删除或批量删除
       const handleDeleteOrBatchDelete = async (record: Recordable | null) => {
@@ -160,17 +163,19 @@
             createMessage.success('删除成功');
             handleSuccess();
           } catch (e: any) {
-            createMessage.error(e.msg);
+            // createMessage.error(e.msg);
           }
         } else {
           try {
-            await deleteAlarmConfig(selectArray.value);
+            await deleteAlarmConfig(selectArray);
             createMessage.success('批量删除成功');
             handleSuccess();
-            selectArray.value.length = 0;
+            selectArray.length = 0;
           } catch (e: any) {
-            createMessage.error(e.msg);
-            selectArray.value.length = 0;
+            // createMessage.error(e.msg);
+            selectArray.length = 0;
+          } finally {
+            selectArray.length = 0;
           }
         }
       };

@@ -11,6 +11,12 @@ export const columns: BasicColumn[] = [
     width: 120,
   },
   {
+    title: '设备图片',
+    dataIndex: 'deviceInfo.avatar',
+    width: 120,
+    slots: { customRender: 'img' },
+  },
+  {
     title: '设备类型',
     dataIndex: 'deviceType',
     width: 100,

@@ -18,6 +18,20 @@
             批量删除
           </a-button>
         </template>
+        <template #img="{ record }">
+          <TableImg
+            :size="30"
+            :showBadge="false"
+            :simpleShow="true"
+            :imgList="
+              typeof record.deviceInfo.avatar !== 'undefined' &&
+              record.deviceInfo.avatar !== '' &&
+              record.deviceInfo.avatar != null
+                ? [record.deviceInfo.avatar]
+                : null
+            "
+          />
+        </template>
         <template #deviceProfile="{ record }">
           <a-button type="link" class="ml-2" @click="goDeviceProfile(record.deviceProfile.name)">
             {{ record.deviceProfile.name }}
@@ -83,7 +97,7 @@
               {
                 label: '编辑',
                 icon: 'clarity:note-edit-line',
-                ifShow: authBtn(role),
+                ifShow: authBtn(role) && record.customerId === undefined,
                 onClick: handleEdit.bind(null, record),
               },
               {
@@ -109,7 +123,7 @@
 <script lang="ts">
   import { defineComponent, reactive } from 'vue';
   import { DeviceState, DeviceTypeEnum } from '/@/api/device/model/deviceModel';
-  import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { BasicTable, useTable, TableAction, TableImg } from '/@/components/Table';
   import { columns, searchFormSchema } from './config/device.data';
   import { Tag } from 'ant-design-vue';
   import {
@@ -145,6 +159,7 @@
       DeviceModal,
       DeviceDetailDrawer,
       CustomerModal,
+      TableImg,
     },
     setup(_) {
       const go = useGo();

@@ -11,6 +11,12 @@ export const columns: BasicColumn[] = [
     width: 120,
   },
   {
+    title: '配置图片', //图标
+    dataIndex: 'image',
+    width: 80,
+    slots: { customRender: 'img' },
+  },
+  {
     title: '配置类型',
     dataIndex: 'type',
     width: 90,

@@ -15,6 +15,18 @@
           批量删除
         </a-button>
       </template>
+      <template #img="{ record }">
+        <TableImg
+          :size="30"
+          :showBadge="false"
+          :simpleShow="true"
+          :imgList="
+            typeof record.image !== 'undefined' && record.image !== '' && record.image != null
+              ? [record.image]
+              : null
+          "
+        />
+      </template>
       <template #action="{ record }">
         <TableAction
           :actions="[
@@ -62,8 +74,8 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, reactive, nextTick, onUnmounted } from 'vue';
-  import { BasicTable, useTable, TableAction, BasicColumn } from '/@/components/Table';
+  import { defineComponent, ref, nextTick, onUnmounted } from 'vue';
+  import { BasicTable, TableImg, useTable, TableAction, BasicColumn } from '/@/components/Table';
   import { columns, searchFormSchema } from './device.profile.data';
   import { useMessage } from '/@/hooks/web/useMessage';
   import {
@@ -78,10 +90,10 @@
 
   export default defineComponent({
     name: 'DeviceProfileManagement',
-    components: { BasicTable, DeviceProfileModal, TableAction, ImpExcel },
+    components: { BasicTable, DeviceProfileModal, TableAction, ImpExcel, TableImg },
     setup() {
       const deviceDetailRef = ref(null);
-      let selectedRowKeys: string[] = reactive([]);
+      let selectedRowKeys: any = [];
       const getPathUrl = ref('');
       const getPathUrlName = ref('');
       const disabled = ref(true);
@@ -90,7 +102,7 @@
       const { createMessage } = useMessage();
       const [registerModal, { openModal }] = useModal();
       const [registerModalDetail] = useModal();
-      const [registerTable, { reload, getSelectRowKeys, setTableData, getForm }] = useTable({
+      const [registerTable, { reload, getSelectRows, setTableData, getForm }] = useTable({
         title: '设备配置列表',
         clickToRowSelect: false,
         api: deviceConfigGetQuery,
@@ -212,7 +224,7 @@
         }, 10);
       }
       const useSelectionChange = () => {
-        selectedRowKeys = getSelectRowKeys();
+        selectedRowKeys = getSelectRows();
         if (selectedRowKeys.length > 0) {
           disabled.value = false;
         } else {
@@ -220,6 +232,9 @@
         }
       };
       async function handleTableDel() {
+        selectedRowKeys = selectedRowKeys
+          .filter((f: any) => f.default !== true)
+          .map((m: any) => m.id);
         await deviceConfigDelete(selectedRowKeys);
         createMessage.success('删除成功');
         handleSuccess();

@@ -11,6 +11,9 @@
       <div v-else-if="isMqttType == 'LWM2M'">
         <Lwm2mCpns ref="lwm2mRef" />
       </div>
+      <div v-else-if="isMqttType == 'SNMP1'">
+        <SnmpCpns ref="snmpRef" />
+      </div>
       <div
         style="
           display: flex;
@@ -40,6 +43,7 @@
   import MqttCpns from '../step/cpns/mqtt/Mqtt.vue';
   import CoapCpns from '../step/cpns/coap/Coap.vue';
   import Lwm2mCpns from '../step/cpns/lwm2m/index.vue';
+  import SnmpCpns from '../step/cpns/snmp/index.vue';
 
   export default defineComponent({
     components: {
@@ -52,6 +56,7 @@
       MqttCpns,
       CoapCpns,
       Lwm2mCpns,
+      SnmpCpns,
     },
     emits: ['next', 'prev', 'register'],
     setup(_, { emit }) {
@@ -59,6 +64,7 @@
       const mqttRef = ref(null);
       const coapRef = ref(null);
       const lwm2mRef = ref(null);
+      const snmpRef = ref(null);
       const isMqttType = ref('');
       let step2Data = reactive({
         transportConfiguration: {},
@@ -104,6 +110,7 @@
                 { label: 'MQTT', value: 'MQTT' },
                 { label: 'CoAP', value: 'COAP' },
                 { label: 'LWM2M', value: 'LWM2M' },
+                // { label: 'SNMP', value: 'SNMP' },
               ],
               onChange(e) {
                 isMqttType.value = e;
@@ -139,6 +146,7 @@
         mqttRef,
         coapRef,
         lwm2mRef,
+        snmpRef,
       };
     },
   });

@@ -498,6 +498,7 @@ export const deviceSchemas: FormSchema[] = [
     colProps: { span: 22 },
     component: 'InputTextArea',
     componentProps: {
+      disabled: true,
       autoSize: {
         maxRows: 50,
       },

@@ -78,6 +78,7 @@
         observe: [],
         telemetry: [],
       });
+
       const [
         registerModel,
         { resetFields: resetObjectListValue, getFieldsValue: getObjectListValue },
@@ -147,7 +148,11 @@
                   port1: allEchoObj?.bootstrap?.lwm2mServer?.port,
                   serverId1: allEchoObj?.bootstrap?.lwm2mServer?.serverId,
                   securityMode1: allEchoObj?.bootstrap?.lwm2mServer?.securityMode,
-                  serverPublicKey1: allEchoObj?.bootstrap?.lwm2mServer?.serverPublicKey,
+                  serverPublicKey1:
+                    allEchoObj?.bootstrap?.lwm2mServer?.serverPublicKey == null
+                      ? `3059301306072a8648ce3d020106082a8648ce3d03010703420004e353af009b814ee2f9ab393a975e0c
+    39e2fff60e3603fd6ee54a43b89a4f56258a7aa9c7e4a577760edb289dc955d91968473ee8a1bfc2b9c423563796113009`
+                      : allEchoObj?.bootstrap?.lwm2mServer?.serverPublicKey,
                   clientHoldOffTime1: allEchoObj?.bootstrap?.lwm2mServer?.clientHoldOffTime,
                   bootstrapServerAccountTimeout1:
                     allEchoObj?.bootstrap?.lwm2mServer?.bootstrapServerAccountTimeout,
@@ -157,7 +162,11 @@
                   port: allEchoObj?.bootstrap?.bootstrapServer?.port,
                   serverId: allEchoObj?.bootstrap?.bootstrapServer?.serverId,
                   securityMode: allEchoObj?.bootstrap?.bootstrapServer?.securityMode,
-                  serverPublicKey: allEchoObj?.bootstrap?.bootstrapServer?.serverPublicKey,
+                  serverPublicKey:
+                    allEchoObj?.bootstrap?.bootstrapServer?.serverPublicKey == null
+                      ? `3059301306072a8648ce3d020106082a8648ce3d03010703420004e353af009b814ee2f9ab393a975e0c
+    39e2fff60e3603fd6ee54a43b89a4f56258a7aa9c7e4a577760edb289dc955d91968473ee8a1bfc2b9c423563796113009`
+                      : allEchoObj?.bootstrap?.bootstrapServer?.serverPublicKey,
                   clientHoldOffTime: allEchoObj?.bootstrap?.bootstrapServer?.clientHoldOffTime,
                   bootstrapServerAccountTimeout2:
                     allEchoObj?.bootstrap?.servers?.bootstrapServerAccountTimeout,

+<template>
+  <div style="display: flex; flex-direction: row; width: 30vw">
+    <div style="width: 9vw">
+      <BasicForm
+        :showResetButton="false"
+        :showSubmitButton="false"
+        @register="registerRightSelect"
+      />
+    </div>
+    <div style="width: 20vw">
+      <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerRightInput"
+    /></div>
+    <div style="width: 1vw; margin-left: -0.8vw">
+      <span @click="handleDelScopeAndKeyAndVal" style="color: red; cursor: pointer">X</span>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { snmpRightSelectSchemas, snmpRightInputSchemas } from '../index';
+
+  export default defineComponent({
+    components: {
+      BasicForm,
+    },
+
+    emits: ['next', 'prev', 'register', 'clear'],
+    setup(_, { emit }) {
+      const [registerRightSelect] = useForm({
+        labelWidth: 80,
+        schemas: snmpRightSelectSchemas,
+        actionColOptions: {
+          span: 14,
+        },
+      });
+      const [registerRightInput] = useForm({
+        labelWidth: 80,
+        schemas: snmpRightInputSchemas,
+        actionColOptions: {
+          span: 14,
+        },
+      });
+      const handleDelScopeAndKeyAndVal = () => {
+        emit('clear');
+      };
+      return {
+        registerRightSelect,
+        registerRightInput,
+        handleDelScopeAndKeyAndVal,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped></style>

+import { FormSchema } from '/@/components/Form';
+
+export const snmpSchemas: FormSchema[] = [
+  {
+    field: 'timeoutMs',
+    component: 'InputNumber',
+    label: 'Timeout,ns',
+    required: true,
+    defaultValue: 500,
+    colProps: { span: 11 },
+  },
+  {
+    field: 'retries',
+    component: 'InputNumber',
+    label: 'Retries',
+    required: true,
+    defaultValue: 0,
+    colProps: { span: 11 },
+  },
+  {
+    field: 'noknown',
+    component: 'Input',
+    label: '',
+    slot: 'add',
+    colProps: { span: 11 },
+  },
+];
+
+export const snmpLeftSchemas: FormSchema[] = [
+  {
+    field: 'spec',
+    component: 'Select',
+    label: 'Scope',
+    defaultValue: 'CLIENT_ATTRIBUTES_QUERYING',
+    componentProps: {
+      options: [
+        {
+          label: 'Telemetry',
+          value: 'TELEMETRY_QUERYING',
+        },
+        {
+          label: 'Client attributes',
+          value: 'CLIENT_ATTRIBUTES_QUERYING',
+        },
+        {
+          label: 'Shared attributes',
+          value: 'SHARED_ATTRIBUTES_SETTING',
+        },
+        {
+          label: 'RPC request',
+          value: 'TO_DEVICE_RPC_REQUEST',
+        },
+      ],
+    },
+    colProps: { span: 11 },
+  },
+];
+
+export const snmpRightSchemas: FormSchema[] = [
+  {
+    field: 'queryingFrequencyMs',
+    component: 'InputNumber',
+    label: '查询频率，毫秒',
+    required: true,
+    defaultValue: 5000,
+    colProps: { span: 22 },
+  },
+];
+
+export const snmpRightSelectSchemas: FormSchema[] = [
+  {
+    field: 'dataType',
+    component: 'Select',
+    label: 'Type',
+    defaultValue: '字符串',
+    componentProps: {
+      options: [
+        {
+          label: '字符串',
+          value: '字符串',
+        },
+        {
+          label: '数字',
+          value: '数字',
+        },
+        {
+          label: '布尔值',
+          value: '布尔值',
+        },
+        {
+          label: '双精度小数',
+          value: '双精度小数',
+        },
+        {
+          label: 'JSON',
+          value: 'JSON',
+        },
+      ],
+    },
+    colProps: { span: 11 },
+  },
+];
+
+export const snmpRightInputSchemas: FormSchema[] = [
+  {
+    field: 'key',
+    component: 'Input',
+    label: 'Data key',
+    required: true,
+    colProps: { span: 11 },
+  },
+  {
+    field: 'oid',
+    component: 'Input',
+    label: 'OID',
+    required: true,
+    colProps: { span: 11 },
+  },
+];

+<template>
+  <div
+    style="
+      margin-top: -5vh;
+      border: 0.5px solid gray;
+      margin-left: 0.1vw;
+      border-radius: 5px;
+      padding-left: 1.5vw;
+    "
+  >
+    <div style="margin-top: 1.2vh">
+      <BasicForm :showResetButton="false" :showSubmitButton="false" @register="register">
+        <template #add>
+          <div>
+            <template v-for="(item, index) in scopeData" :key="item.id1">
+              <span style="display: none">{{ item }}</span>
+              <div
+                style="
+                  display: flex;
+                  width: 45vw;
+                  flex-direction: row;
+                  border: 0.5px solid gray;
+                  border-radius: 5px;
+                  margin-left: -1.5vw;
+                "
+              >
+                <div
+                  style="
+                    width: 14vw;
+                    border: 0.5px solid gray;
+                    border-radius: 5px;
+                    margin-left: -2vw;
+                  "
+                >
+                  <BasicForm
+                    :showResetButton="false"
+                    :showSubmitButton="false"
+                    @register="registerLeft"
+                  />
+                </div>
+                <div style="width: 29.3vw; border: 0.5px solid gray; border-radius: 5px">
+                  <BasicForm
+                    :showResetButton="false"
+                    :showSubmitButton="false"
+                    @register="registerRight"
+                  />
+                  <div>
+                    <template v-for="(item1, index1) in item.mappings" :key="item1.id2">
+                      <span style="display: none">{{ index1 }}</span>
+                      <span style="display: none">{{ item1 }}</span>
+                      <KeyAndValVue @clear="clearFun(index, index1)" />
+                    </template>
+                    <div
+                      style="
+                        margin-top: -3.8vh;
+                        margin-left: 2.3vw;
+                        position: relative;
+                        top: -1.5vh;
+                      "
+                    >
+                      <a-button size="small" type="default" @click="handleAddMapping(index)">
+                        Add mapping
+                      </a-button>
+                    </div>
+                  </div>
+                </div>
+                <div style="width: 1vw; margin-top: 8.5vh; margin-left: 0.5vw">
+                  <span @click="handleDelScope(index)" style="color: red; cursor: pointer">X</span>
+                </div>
+              </div>
+              <div style="height: 2vh"></div>
+            </template>
+            <div style="margin-left: -1vw">
+              <a-button size="small" type="default" @click="handleAddScope">
+                Add communication config
+              </a-button>
+            </div>
+          </div>
+        </template>
+      </BasicForm>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { snmpSchemas, snmpLeftSchemas, snmpRightSchemas } from './index';
+  import { Alert, Divider, Descriptions } from 'ant-design-vue';
+  import KeyAndValVue from './cpns/KeyAndVal.vue';
+
+  export default defineComponent({
+    components: {
+      BasicForm,
+      [Alert.name]: Alert,
+      [Divider.name]: Divider,
+      [Descriptions.name]: Descriptions,
+      [Descriptions.Item.name]: Descriptions.Item,
+      KeyAndValVue,
+    },
+
+    emits: ['next', 'prev', 'register'],
+    setup() {
+      const scopeData: any = ref([
+        {
+          id1: 1,
+          mappings: [
+            {
+              id2: 2,
+            },
+          ],
+        },
+      ]);
+
+      const [register] = useForm({
+        labelWidth: 150,
+        schemas: snmpSchemas,
+        actionColOptions: {
+          span: 14,
+        },
+      });
+      const [registerLeft] = useForm({
+        labelWidth: 100,
+        schemas: snmpLeftSchemas,
+        actionColOptions: {
+          span: 14,
+        },
+      });
+      const [registerRight] = useForm({
+        labelWidth: 150,
+        schemas: snmpRightSchemas,
+        actionColOptions: {
+          span: 14,
+        },
+      });
+
+      const handleAddMapping = (i) => {
+        scopeData.value[i].mappings.push({
+          id2: Date.now() + 3,
+        });
+      };
+      const clearFun = (i1, i2) => {
+        scopeData.value[i1].mappings.splice(i2, 1);
+      };
+
+      const handleDelScope = (i) => {
+        scopeData.value.splice(i, 1);
+      };
+
+      const handleAddScope = () => {
+        if (scopeData.value.length < 4) {
+          scopeData.value.push({
+            id1: Date.now() + 1,
+            mappings: [
+              {
+                id2: Date.now() + 2,
+              },
+            ],
+          });
+        }
+      };
+
+      return {
+        register,
+        registerLeft,
+        registerRight,
+        handleAddMapping,
+        scopeData,
+        handleDelScope,
+        handleAddScope,
+        clearFun,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped></style>

@@ -78,6 +78,7 @@ export const step2Schemas: FormSchema[] = [
           { label: 'MQTT', value: 'MQTT' },
           { label: 'CoAP', value: 'COAP' },
           { label: 'LWM2M', value: 'LWM2M' },
+          // { label: 'SNMP', value: 'SNMP' },
         ],
         onChange(e) {},
       };

@@ -46,7 +46,7 @@
         //编辑
         if (data.isUpdate) {
           noticeId.value = data.record.id;
-          Reflect.set(data.record, 'receiverType', data.record.receiverType === '全部' ? 0 : 1);
+          Reflect.set(data.record, 'receiverType', data.record.receiverType === 0 ? 0 : 1);
           if (data.record.receiverType === 1) {
             if (!data.record.pointId.length) return;
             const organizationId = data.record.pointId.split(',');