Merge branch 'sqy_dev' into 'main'

'feat:设备详情页面'

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

@@ -6,7 +6,7 @@ VITE_PUBLIC_PATH = /
 
 # Cross-domain proxy, you can configure multiple
 # Please note that no line breaks
-VITE_PROXY = [["/api","http://192.168.10.117:8082/api"],["/upload","http://192.168.10.116:3300/upload"]]
+VITE_PROXY = [["/api","http://192.168.10.123:8082/api"],["/upload","http://192.168.10.116:3300/upload"]]
 # VITE_PROXY=[["/api","https://vvbin.cn/test"]]
 
 # Delete console

@@ -15,6 +15,7 @@
         :title="getMergeProps.title"
         @dblclick="handleTitleDbClick"
       />
+      <slot name="titleSlot" v-if="!getMergeProps.title"></slot>
     </template>
 
     <template #footer v-if="!$slots.footer">

-import { BasicColumn } from '/@/components/Table';
-import { FormSchema } from '/@/components/Table';
-import { findDictItemByCode } from '/@/api/system/dict';
-import { MessageEnum } from '/@/enums/messageEnum';
-import { DeviceTypeEnum, DeviceState } from '/@/api/device/model/deviceModel';
-// 表格列数据
-export const columns: BasicColumn[] = [
-  {
-    title: '默认',
-  },
-  {
-    title: '设备名称',
-    dataIndex: 'name',
-    width: 200,
-  },
-  {
-    title: '设备类型',
-    dataIndex: 'deviceType',
-    width: 200,
-    slots: { customRender: 'deviceType' },
-  },
-  {
-    title: '设备配置',
-    dataIndex: 'deviceProfile.name',
-    width: 180,
-    slots: { customRender: 'deviceProfile' },
-  },
-  {
-    title: '标签',
-    dataIndex: 'label',
-    width: 180,
-  },
-  {
-    title: '配置信息',
-    dataIndex: 'deviceInfo',
-    width: 180,
-    slots: { customRender: 'config' },
-  },
-  {
-    title: '状态',
-    dataIndex: 'deviceState',
-    width: 120,
-    slots: { customRender: 'deviceState' },
-  },
-  {
-    title: '最后连接时间',
-    dataIndex: 'lastConnectTime',
-    width: 180,
-  },
-  {
-    title: '创建时间',
-    dataIndex: 'createTime',
-    width: 180,
-  },
-];
-
-// 查询字段
-export const searchFormSchema: FormSchema[] = [
-  {
-    field: 'deviceType',
-    label: '设备类型',
-    component: 'Select',
-    componentProps: {
-      options: [
-        { label: '网关设备', value: DeviceTypeEnum.GATEWAY },
-        { label: '直连设备', value: DeviceTypeEnum.DIRECT_CONNECTION },
-        { label: '网关子设备', value: DeviceTypeEnum.SENSOR },
-      ],
-    },
-    colProps: { span: 4 },
-  },
-  {
-    field: 'deviceState',
-    label: '设备状态',
-    component: 'Select',
-    componentProps: {
-      options: [
-        { label: '待激活', value: DeviceState.INACTIVE },
-        { label: '在线', value: DeviceState.ONLINE },
-        { label: '离线', value: DeviceState.OFFLINE },
-      ],
-    },
-    colProps: { span: 4 },
-  },
-  {
-    field: 'name',
-    label: '设备名称',
-    component: 'Input',
-    colProps: { span: 8 },
-  },
-];
-
-// 弹框配置项
-export const formSchema: FormSchema[] = [
-  {
-    field: 'configName',
-    label: '配置名称',
-    required: true,
-    component: 'Input',
-  },
-  {
-    field: 'messageType',
-    label: '消息类型',
-    required: true,
-    component: 'ApiSelect',
-    componentProps: {
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'message_type',
-      },
-      labelField: 'itemText',
-      valueField: 'itemValue',
-    },
-  },
-  {
-    field: 'platformType',
-    label: '平台类型',
-    required: true,
-    component: 'ApiSelect',
-    componentProps: {
-      api: findDictItemByCode,
-      params: {
-        dictCode: 'platform_type',
-      },
-      labelField: 'itemText',
-      valueField: 'itemValue',
-    },
-    ifShow: ({ values }) => isMessage(Reflect.get(values, 'messageType')),
-  },
-  {
-    field: 'accessKeyId',
-    label: 'accessKeyId',
-    required: true,
-    component: 'Input',
-    ifShow: ({ values }) => isMessage(Reflect.get(values, 'messageType')),
-  },
-  {
-    field: 'accessKeySecret',
-    label: 'accessKeySecret',
-    required: true,
-    component: 'Input',
-    ifShow: ({ values }) => isMessage(Reflect.get(values, 'messageType')),
-  },
-  {
-    field: 'host',
-    label: '服务器地址',
-    defaultValue: 'smtp.163.com',
-    required: true,
-    component: 'Input',
-    ifShow: ({ values }) => isEmail(Reflect.get(values, 'messageType')),
-  },
-  {
-    field: 'port',
-    label: '端口',
-    defaultValue: 25,
-    required: true,
-    component: 'InputNumber',
-    ifShow: ({ values }) => isEmail(Reflect.get(values, 'messageType')),
-  },
-  {
-    field: 'username',
-    label: '用户名',
-    required: true,
-    component: 'Input',
-    ifShow: ({ values }) => isEmail(Reflect.get(values, 'messageType')),
-  },
-  {
-    field: 'password',
-    label: '密码',
-    required: true,
-    component: 'InputPassword',
-    ifShow: ({ values }) => isEmail(Reflect.get(values, 'messageType')),
-  },
-  {
-    field: 'config',
-    label: '消息配置',
-    component: 'Input',
-    show: false,
-  },
-  {
-    field: 'id',
-    label: '主键',
-    component: 'Input',
-    show: false,
-  },
-  {
-    field: 'status',
-    label: '状态',
-    component: 'RadioButtonGroup',
-    defaultValue: 0,
-    componentProps: {
-      options: [
-        { label: '启用', value: 1 },
-        { label: '停用', value: 0 },
-      ],
-    },
-  },
-  {
-    label: '备注',
-    field: 'remark',
-    component: 'InputTextArea',
-  },
-];
-
-export const isMessage = (type: string) => {
-  return type === MessageEnum.IS_SMS;
-};
-export const isEmail = (type: string) => {
-  return type === MessageEnum.IS_EMAIL;
-};

+import { FormSchema } from '/@/components/Form';
+import { BasicColumn } from '/@/components/Table';
+export const columns: BasicColumn[] = [
+  {
+    title: '设备名称',
+    dataIndex: 'name',
+    width: 120,
+    key: 'name',
+  },
+  {
+    title: '设备标签',
+    dataIndex: 'label',
+    width: 100,
+    key: 'label',
+  },
+  {
+    title: '设备配置',
+    dataIndex: 'deviceProfile.name',
+    width: 160,
+    key: 'deviceProfile.name',
+  },
+
+  {
+    title: '设备类型',
+    dataIndex: 'deviceType',
+    key: 'deviceType',
+  },
+  {
+    title: '描述',
+    dataIndex: 'label',
+    width: 180,
+    key: 'label',
+  },
+];
+
+// 实时数据
+export const realTimeDataSearchSchemas: FormSchema[] = [
+  {
+    field: 'key',
+    label: '键 / 值',
+    component: 'Input',
+    colProps: { span: 12 },
+  },
+];
+export const realTimeDataColumns: BasicColumn[] = [
+  {
+    title: '最后更新时间',
+    dataIndex: 'update',
+    width: 120,
+  },
+  {
+    title: '键',
+    dataIndex: 'label',
+    width: 100,
+  },
+  {
+    title: '值',
+    dataIndex: 'name',
+    width: 160,
+  },
+];
+
+// 告警
+export const alarmSearchSchemas: FormSchema[] = [
+  {
+    field: 'icon',
+    label: '告警状态',
+    component: 'Select',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'icon',
+    label: '      ',
+    component: 'DatePicker',
+    colProps: { span: 8 },
+  },
+  {
+    field: 'icon',
+    label: '告警类型',
+    component: 'Input',
+    colProps: { span: 8 },
+  },
+];
+export const alarmColumns: BasicColumn[] = [
+  {
+    title: '告警时间',
+    dataIndex: 'aaa',
+    width: 120,
+  },
+  {
+    title: '告警设备',
+    dataIndex: 'label',
+    width: 100,
+  },
+  {
+    title: '类型',
+    dataIndex: 'ccc',
+    width: 160,
+  },
+  {
+    title: '告警级别',
+    dataIndex: 'ddd',
+    width: 160,
+  },
+  {
+    title: '状态',
+    dataIndex: 'eee',
+    width: 160,
+  },
+  {
+    title: '操作',
+    dataIndex: 'name',
+    width: 160,
+  },
+];
+
+// 子设备
+export const childDeviceSchemas: FormSchema[] = [
+  {
+    field: 'icon',
+    label: '设备配置',
+    component: 'Select',
+    colProps: { span: 12 },
+  },
+  {
+    field: 'icon',
+    label: '设备名称',
+    component: 'Input',
+    colProps: { span: 12 },
+  },
+];
+export const childDeviceColumns: BasicColumn[] = [
+  {
+    title: '名称',
+    dataIndex: 'name',
+    width: 120,
+  },
+  {
+    title: '设备配置',
+    dataIndex: 'label',
+    width: 100,
+  },
+  {
+    title: '标签',
+    dataIndex: 'aaa',
+    width: 160,
+  },
+  {
+    title: '状态',
+    dataIndex: 'bbb',
+    width: 160,
+  },
+  {
+    title: '最后连接时间',
+    dataIndex: 'ccc',
+    width: 160,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'ddd',
+    width: 160,
+  },
+];

+<template>
+  <!-- <BasicModal v-bind="$attrs" width="55rem" @register="register" centered /> -->
+  <BasicDrawer
+    v-bind="$attrs"
+    isDetail
+    :title="deviceInfo?.name"
+    @register="register"
+    :destroyOnClose="true"
+    @close="closeDrawer"
+  >
+    <Tabs v-model:activeKey="activeKey" :size="size" type="card">
+      <TabPane key="1" tab="详情"
+        ><Detail :deviceDetail="deviceInfo" ref="deviceDetailRef"
+      /></TabPane>
+      <TabPane key="2" tab="实时数据"><RealTimeData /></TabPane>
+      <TabPane key="3" tab="告警"><Alarm /></TabPane>
+      <TabPane key="4" tab="子设备"><ChildDevice /></TabPane>
+    </Tabs>
+  </BasicDrawer>
+</template>
+<script lang="ts">
+  import { defineComponent, ref } from 'vue';
+  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
+
+  import { Tabs, TabPane } from 'ant-design-vue';
+  import Detail from '../tabs/Detail.vue';
+  import RealTimeData from '../tabs/RealTimeData.vue';
+  import Alarm from '../tabs/Alarm.vue';
+  import ChildDevice from '../tabs/ChildDevice.vue';
+  export default defineComponent({
+    name: 'DeviceModal',
+    components: {
+      BasicDrawer,
+      Tabs,
+      TabPane,
+      Detail,
+      RealTimeData,
+      Alarm,
+      ChildDevice,
+    },
+    emits: ['reload', 'register'],
+    setup() {
+      const activeKey = ref('1');
+      const size = ref('small');
+      const deviceInfo = ref({});
+      const deviceDetailRef = ref();
+      // 详情回显
+      const [register] = useDrawerInner((data) => {
+        deviceInfo.value = data.record;
+        const { latitude, longitude, address } = data.record.deviceInfo;
+        deviceDetailRef.value.initMap(longitude, latitude, address);
+      });
+
+      const closeDrawer = () => {
+        activeKey.value = '1';
+      };
+
+      return {
+        size,
+        activeKey,
+        deviceInfo,
+        register,
+        closeDrawer,
+        deviceDetailRef,
+      };
+    },
+  });
+</script>

@@ -34,8 +34,8 @@
   import { defineComponent, ref, computed, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { createOrEditDevice, getDeviceToken } from '/@/api/device/deviceManager';
-  import DeviceStep1 from '/@/views/device/step/DeviceStep1.vue';
-  import DeviceStep2 from '/@/views/device/step/DeviceStep2.vue';
+  import DeviceStep1 from '../step/DeviceStep1.vue';
+  import DeviceStep2 from '../step/DeviceStep2.vue';
   import { Steps } from 'ant-design-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
 

@@ -59,7 +59,7 @@
 <script lang="ts">
   import { defineComponent, ref, nextTick, unref, reactive, watch } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { step1Schemas } from './data';
+  import { step1Schemas } from '../../config/data';
   import { useScript } from '/@/hooks/web/useScript';
   import { Input, Divider, Upload, message, Modal, Form, Row, Col } from 'ant-design-vue';
   import { EnvironmentTwoTone, PlusOutlined } from '@ant-design/icons-vue';

+<template>
+  <BasicTable @register="registerTable" />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { alarmColumns, alarmSearchSchemas } from '../../config/detail.config';
+  export default defineComponent({
+    name: 'DeviceManagement',
+    components: {
+      BasicTable,
+    },
+    setup(_) {
+      const [registerTable] = useTable({
+        columns: alarmColumns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: alarmSearchSchemas,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        showIndexColumn: false,
+      });
+
+      return {
+        registerTable,
+      };
+    },
+  });
+</script>

+<template>
+  <BasicTable @register="registerTable" />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { childDeviceColumns, childDeviceSchemas } from '../../config/detail.config';
+
+  export default defineComponent({
+    name: 'DeviceManagement',
+    components: {
+      BasicTable,
+    },
+    setup(_) {
+      const [registerTable] = useTable({
+        columns: childDeviceColumns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: childDeviceSchemas,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        showIndexColumn: false,
+      });
+
+      return {
+        registerTable,
+      };
+    },
+  });
+</script>

+<template>
+  <div class="tabs-detail">
+    <div v-if="deviceDetail?.deviceInfo?.avatar">
+      <p>设备图片</p>
+      <Image :src="deviceDetail.deviceInfo.avatar" :width="100" />
+    </div>
+    <div>
+      <p>设备信息</p>
+      <Table
+        bordered
+        :columns="columns"
+        :data-source="[{ ...deviceDetail, key: 'name' }]"
+        :pagination="false"
+      />
+    </div>
+    <div v-if="deviceDetail?.deviceInfo?.address">
+      <p>设备位置</p>
+      <div ref="wrapRef" style="height: 400px; width: 90%" class="ml-6"></div>
+    </div>
+    <div class="mt-4">
+      <a-button type="primary" class="mr-4">复制设备ID</a-button>
+      <a-button type="primary">复制访问令牌</a-button>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, unref, nextTick } from 'vue';
+  import { Image, Table } from 'ant-design-vue';
+  import { columns } from '../../config/detail.config';
+  import { useScript } from '/@/hooks/web/useScript';
+  export default defineComponent({
+    components: {
+      Image,
+      Table,
+    },
+    props: {
+      deviceDetail: {
+        type: Object,
+        required: true,
+      },
+    },
+    setup() {
+      const BAI_DU_MAP_URL =
+        'https://api.map.baidu.com/getscript?v=3.0&ak=7uOPPyAHn2Y2ZryeQqHtcRqtIY374vKa';
+      const wrapRef = ref<HTMLDivElement | null>(null);
+      const { toPromise } = useScript({ src: BAI_DU_MAP_URL });
+
+      async function initMap(longitude, latitude, address) {
+        await toPromise();
+        await nextTick();
+        const wrapEl = unref(wrapRef);
+        const BMap = (window as any).BMap;
+        if (!wrapEl) return;
+        const map = new BMap.Map(wrapEl);
+        let myIcon = new BMap.Icon(
+          'http://api.map.baidu.com/img/markers.png',
+          new BMap.Size(40, 25),
+          {
+            offset: new BMap.Size(0, 0), // 指定定位位置
+            imageOffset: new BMap.Size(20, -260), // 设置图片偏移
+          }
+        );
+        const point = new BMap.Point(Number(longitude), Number(latitude));
+        var content = `我在 ${address}`;
+        var label = new BMap.Label(content, {
+          // 创建文本标注
+          position: point,
+          offset: new BMap.Size(15, -35),
+        });
+        map.addOverlay(label); // 将标注添加到地图中
+        label.setStyle({
+          // 设置label的样式
+          color: '#000',
+          fontSize: '10px',
+          border: '1px solid #1E90FF',
+        });
+        let marker = new BMap.Marker(point, { icon: myIcon });
+        map.centerAndZoom(point, 15);
+        map.enableScrollWheelZoom(true);
+        map.addOverlay(marker);
+      }
+
+      return {
+        columns,
+        wrapRef,
+        initMap,
+      };
+    },
+  });
+</script>
+<style lang="less" scoped></style>

+<template>
+  <BasicTable @register="registerTable" />
+</template>
+<script lang="ts">
+  import { defineComponent } from 'vue';
+  import { BasicTable, useTable } from '/@/components/Table';
+  import { realTimeDataColumns, realTimeDataSearchSchemas } from '../../config/detail.config';
+  export default defineComponent({
+    name: 'DeviceManagement',
+    components: {
+      BasicTable,
+    },
+    setup(_) {
+      const [registerTable] = useTable({
+        columns: realTimeDataColumns,
+        formConfig: {
+          labelWidth: 120,
+          schemas: realTimeDataSearchSchemas,
+        },
+        useSearchForm: true,
+        showTableSetting: true,
+        bordered: true,
+        showIndexColumn: false,
+      });
+
+      return {
+        registerTable,
+      };
+    },
+  });
+</script>

@@ -48,6 +48,11 @@
         <TableAction
           :actions="[
             {
+              label: '详情',
+              icon: 'ant-design:eye-outlined',
+              onClick: handleDetail.bind(null, record),
+            },
+            {
               label: '编辑',
               icon: 'clarity:note-edit-line',
               onClick: handleEdit.bind(null, record),
@@ -65,6 +70,7 @@
         />
       </template>
     </BasicTable>
+    <DeviceDetailDrawer @register="registerDetailDrawer" />
     <DeviceModal @register="registerModal" @success="handleSuccess" @reload="handleReload" />
   </PageWrapper>
 </template>
@@ -72,16 +78,18 @@
   import { defineComponent, reactive } from 'vue';
   import { DeviceState, DeviceTypeEnum } from '/@/api/device/model/deviceModel';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { columns, searchFormSchema } from './device.data';
+  import { columns, searchFormSchema } from './config/device.data';
   import { Tag } from 'ant-design-vue';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { deleteDevice, devicePage } from '/@/api/device/deviceManager';
   import { PageEnum } from '/@/enums/pageEnum';
   import { useGo } from '/@/hooks/web/usePage';
   import { PageWrapper } from '/@/components/Page';
-  import OrganizationIdTree from '/@/views/common/OrganizationIdTree.vue';
   import { useModal } from '/@/components/Modal';
-  import DeviceModal from '/@/views/device/DeviceModal.vue';
+  import OrganizationIdTree from '/@/views/common/OrganizationIdTree.vue';
+  import DeviceModal from './cpns/modal/DeviceModal.vue';
+  import { useDrawer } from '/@/components/Drawer';
+  import DeviceDetailDrawer from './cpns/modal/DeviceDetailDrawer.vue';
 
   export default defineComponent({
     name: 'DeviceManagement',
@@ -92,6 +100,7 @@
       OrganizationIdTree,
       Tag,
       DeviceModal,
+      DeviceDetailDrawer,
     },
     setup(_) {
       const { createMessage } = useMessage();
@@ -99,6 +108,7 @@
 
       const searchInfo = reactive<Recordable>({});
       const [registerModal, { openModal }] = useModal();
+      const [registerDetailDrawer, { openDrawer }] = useDrawer();
       const [registerTable, { reload }] = useTable({
         title: '设备列表',
         api: devicePage,
@@ -113,7 +123,7 @@
         showIndexColumn: false,
         searchInfo: searchInfo,
         actionColumn: {
-          width: 180,
+          width: 200,
           title: '操作',
           dataIndex: 'action',
           slots: { customRender: 'action' },
@@ -130,6 +140,12 @@
         });
       }
 
+      function handleDetail(record: Recordable) {
+        openDrawer(true, {
+          record,
+        });
+      }
+
       function handleEdit(record: Recordable) {
         openModal(true, {
           isUpdate: true,
@@ -155,9 +171,11 @@
       function goDeviceProfile() {
         go(PageEnum.DEVICE_PROFILE);
       }
+
       return {
         registerTable,
         handleCreate,
+        handleDetail,
         handleEdit,
         handleDelete,
         handleSuccess,
@@ -165,6 +183,7 @@
         handleSelect,
         registerModal,
         handleReload,
+        registerDetailDrawer,
         DeviceTypeEnum,
         DeviceState,
         searchInfo,

+export interface DeviceType {
+  alarmStatus: number;
+  createTime: string;
+  creator: string;
+  deviceInfo: Object;
+  deviceProfile: Object;
+  deviceState: string;
+  deviceToken: string;
+  deviceType: string;
+  enabled: boolean;
+  id: string;
+  key: string;
+  label: string;
+  name: string;
+  organizationDTO: Object;
+  organizationId: string;
+  profileId: string;
+  tenantCode: string;
+  updateTime: string;
+}