feat: 分组切换

hx-ai-intelligent/src/router/equipmentManage.ts

@@ -44,25 +44,25 @@ const equipment = {
         },
       ],
     },
-    {
+    // {
-      path: 'energyMapping',
+    //   path: 'energyMapping',
-      name: 'EnergyMapping',
+    //   name: 'EnergyMapping',
-      meta: { title: '能耗映射', hideChildren: true, icon: 'shebeiguanli' },
+    //   meta: { title: '能耗映射', hideChildren: true, icon: 'shebeiguanli' },
-      component: Base,
+    //   component: Base,
-      redirect: { name: 'EnergyMappingIndex' },
+    //   redirect: { name: 'EnergyMappingIndex' },
-      children: [
+    //   children: [
-        {
+    //     {
-          path: 'index',
+    //       path: 'index',
-          name: 'EnergyMappingIndex',
+    //       name: 'EnergyMappingIndex',
-          component: () => import('/@/view/equipmentManage/energyMapping/index.vue'),
+    //       component: () => import('/@/view/equipmentManage/energyMapping/index.vue'),
-          meta: {
+    //       meta: {
-            title: '能耗映射',
+    //         title: '能耗映射',
-            keepAlive: true,
+    //         keepAlive: true,
-            // backApi: [],
+    //         // backApi: [],
-          },
+    //       },
-        },
+    //     },
-      ],
+    //   ],
-    },
+    // },
   ],
 };
 export default equipment;

hx-ai-intelligent/src/view/equipmentManage/group/config.ts

@@ -30,6 +30,22 @@ const tableKeyMap = [
     dataIndex: 'position',
   },
 ];
+const tableCalKeyMap = [
+  {
+    title: '来源企业',
+    dataIndex: 'id',
+  },
+  {
+    title: '节点编号',
+    dataIndex: 'deviceName',
+    textNumber: 8,
+    textEllipsis: true,
+  },
+  {
+    title: '节点路径',
+    dataIndex: 'position',
+  },
+];
 const doWnload = (url) => {
   const a = document.createElement('a');
   document.body.appendChild(a);
@@ -41,54 +57,55 @@ const doWnload = (url) => {
 };
 
 const mockData = ref(data.listData);
+export const treeConfig = {
+  defaultExpandAll: true,
+  header: {
+    icon: 'orgLink',
+    title: '能耗分组',
+  },
+
+  api: () => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(data);
+      }, 100);
+    });
+  },
+  formConfig: {
+    schemas: [
+      {
+        field: 'type',
+        label: '',
+        component: 'NsSelect',
+        autoSubmit: true,
+        defaultValue: 1,
+        componentProps: {
+          options: [
+            { label: '碳排', value: 1 },
+            { label: '用电量', value: 2 },
+            { label: '用水量', value: 3 },
+            { label: '燃气量', value: 4 },
+            { label: '供热量', value: 5 },
+          ],
+        },
+      },
+      {
+        field: 'name',
+        label: '',
+        component: 'NsInput',
+        autoSubmit: true,
+        componentProps: {
+          placeholder: '请输入',
+        },
+      },
+    ],
+  },
+};
 export const tableConfig = (el, elGroup, elFormula) => {
   return {
-    title: '设备台账',
+    title: '点位信息',
     // api: '/carbon_emission/device/getDeviceList',
     value: mockData.value,
-    treeConfig: {
-      defaultExpandAll: true,
-      header: {
-        icon: 'orgLink',
-        title: '分组管理',
-      },
-      api: () => {
-        return new Promise((resolve) => {
-          setTimeout(() => {
-            resolve(data);
-          }, 100);
-        });
-      },
-      formConfig: {
-        schemas: [
-          {
-            field: 'type',
-            label: '',
-            component: 'NsRadioGroup',
-            autoSubmit: true,
-            defaultValue: 1,
-            componentProps: {
-              options: [
-                { label: '碳排', value: 1 },
-                { label: '用电量', value: 2 },
-                { label: '用水量', value: 3 },
-                { label: '燃气量', value: 4 },
-                { label: '供热量', value: 5 },
-              ],
-            },
-          },
-          {
-            field: 'name',
-            label: '',
-            component: 'NsInput',
-            autoSubmit: true,
-            componentProps: {
-              placeholder: '请输入',
-            },
-          },
-        ],
-      },
-    },
 
     headerActions: [
       {
@@ -249,11 +266,108 @@ export const tableConfig = (el, elGroup, elFormula) => {
   };
 };
 
-export const treeConfig = {
+export const tableConfigCal = (el, elGroup, elFormula) => {
-  defaultExpandAll: true,
+  return {
-  defaultSelectedKeys: ['A008'],
+    title: '点位信息',
-  resultField: 'insertData',
+    // api: '/carbon_emission/device/getDeviceList',
-  api: () => {
+    value: mockData.value,
-    return Promise.resolve(data);
+
-  },
+    headerActions: [
+      {
+        label: '编辑',
+        name: 'groupEdit',
+        type: 'primary',
+        handle: (a, b) => {
+          el.value.toggle();
+        },
+      },
+      {
+        label: '批量删除',
+        name: 'groupTemDownload',
+        type: 'primary',
+        dynamicDisabled: (data: any) => {
+          return data.list.length === 0;
+        },
+        handle: () => {
+          mockData.value.splice(0, 2);
+        },
+      },
+      {
+        label: '批量导出',
+        name: 'groupExports',
+        type: 'primary',
+        dynamicDisabled: (data: any) => {
+          return data.list.length === 0;
+        },
+        extra: {
+          xlsxMap: tableKeyMap,
+          xlsxName: '分组信息YYYY-MM-DD',
+        },
+      },
+      {
+        label: '批量导入',
+        name: 'groupImport',
+        type: 'primary',
+        extra: {
+          // api: props.postImportApi, // 导入接口名
+          title: '设备信息', // 弹窗title
+          templateName: 'whiteListUser', // 所使用的文件名称
+          indexName: '设备id', // 匹配类型字段
+          message: [
+            { label: '1、若必填项未填写，则不能进行导入操作' },
+            { label: `2、当重复时，则更新数据。` },
+            { label: '3、数据将从模版的第五行进行导入。' },
+            { label: '4、文件导入勿超过5MB。' },
+          ],
+        },
+      },
+
+      {
+        label: '模板下载',
+        name: 'groupTemDownload',
+        type: 'primary',
+        handle: () => {
+          // http.get('/asset/file/whiteListUser.xlsx');
+          doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
+        },
+      },
+    ],
+    columns: tableCalKeyMap,
+    columnActions: {
+      title: '操作',
+      actions: [
+        {
+          label: '删除',
+          name: 'FeedBackDetail',
+          dynamicParams: ['uuid', 'appealType'],
+          confirm: true,
+          handle: () => {
+            mockData.value.splice(0, 1);
+          },
+        },
+      ],
+    },
+
+    formConfig: {
+      schemas: [
+        {
+          field: 'name',
+          label: '设备名称',
+          component: 'NsInput',
+          componentProps: {
+            placeholder: '请选择公司',
+          },
+        },
+        {
+          field: 'provider',
+          component: 'NsInput',
+          componentProps: {
+            placeholder: '请输入节点编号',
+          },
+        },
+      ],
+    },
+    // pagination: { pageSizeOptions: false },
+    rowKey: 'id',
+  };
 };

hx-ai-intelligent/src/view/equipmentManage/group/index.vue

@@ -2,11 +2,17 @@
   <editDrawer ref="editDrawerRef" />
   <editGroup ref="editGroupRef" />
   <editFormula ref="editFormulaRef" />
-  <ns-view-list-table v-bind="config" />
+  <div class="groupContainer">
+    <div class="tree">
+      <ns-tree-api v-bind="treeConfig" @select="handleSelect" />
+    </div>
+    <ns-view-list-table v-show="defaultType" class="table" v-bind="config" />
+    <ns-view-list-table v-show="!defaultType" class="table" v-bind="configCal" />
+  </div>
 </template>
 <script lang="ts" setup>
   import { createVNode, onMounted, ref } from 'vue';
-  import { tableConfig, treeConfig } from './config';
+  import { tableConfig, treeConfig, tableConfigCal } from './config';
   import { useParams } from '/nerv-lib/use';
   import editDrawer from './edit.vue';
   import editGroup from './editGroup.vue';
@@ -16,6 +22,37 @@
   const editDrawerRef = ref();
   const editGroupRef = ref();
   const editFormulaRef = ref();
+  const defaultType = ref(true);
   const config = tableConfig(editDrawerRef, editGroupRef, editFormulaRef);
+  const configCal = tableConfigCal(editDrawerRef, editGroupRef, editFormulaRef);
+  const handleSelect = () => {
+    defaultType.value = !defaultType.value;
+  };
 </script>
-<style lang="less" scoped></style>
+<style lang="less" scoped>
+  .groupContainer {
+    height: 100%;
+    overflow-y: auto;
+    background-color: @ns-content-bg;
+    display: flex;
+    // gap: @ns-gap;
+    .tree,
+    .table {
+      background-color: @white;
+      border-radius: @ns-border-radius;
+      overflow-y: auto;
+    }
+
+    .tree {
+      margin-right: @ns-gap;
+      :deep(.ant-spin-nested-loading) {
+        width: 300px;
+        background-color: @white;
+      }
+    }
+    .table {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+</style>

lib/component/tree/tree-api.vue

@@ -31,6 +31,8 @@
   });
   const props = defineProps(treeProps);
 
+  console.log(props);
+
   const treeData = ref<TreeDataItem[]>([]);
   const selectedKeys = ref(props.selectedKeys || []);
   const { httpRequest } = useApi();