feat: 能耗映射

2024-05-31 09:54:39 +08:00
parent 65230bf066
commit 31479608c0
9 changed files with 545 additions and 8 deletions
--- a/hx-ai-intelligent/src/api/user.ts
+++ b/hx-ai-intelligent/src/api/user.ts
@@ -8,13 +8,10 @@ enum Api {
  USER_INFO = 'api/web/objs/CurrentUser', //获取用户信息
  USER_RESOURCE = '/api/community/objs/User/Resource', //获取用户资源
 }
-export const userLogin = (data: RoomListModel) => http.post(Api.USER_LOGIN, data);
+export const userLogin = (data) => http.post(Api.USER_LOGIN, data);
 export const userInfo = () => http.get(Api.USER_INFO);
 export const userResource = () => http.get(Api.USER_RESOURCE);
 /**
 * @description 用户登录
 * @property `[fatherRegionUuid]` 父级区域唯一标识
 */
-interface RoomListModel {
-  data: string;
-}
--- a/hx-ai-intelligent/src/router/equipmentManage.ts
+++ b/hx-ai-intelligent/src/router/equipmentManage.ts
@@ -43,6 +43,25 @@ const equipment = {
        },
      ],
    },
+    {
+      path: 'energyMapping',
+      name: 'EnergyMapping',
+      meta: { title: '能耗映射', hideChildren: true, icon: 'dicizhishou' },
+      component: Base,
+      redirect: { name: 'EnergyMappingIndex' },
+      children: [
+        {
+          path: 'index',
+          name: 'EnergyMappingIndex',
+          component: () => import('/@/view/equipmentManage/energyMapping/index.vue'),
+          meta: {
+            title: '能耗映射',
+            keepAlive: true,
+            backApi: [],
+          },
+        },
+      ],
+    },
  ],
 };
 export default equipment;
--- a/hx-ai-intelligent/src/view/equipmentManage/energyMapping/config.ts
+++ b/hx-ai-intelligent/src/view/equipmentManage/energyMapping/config.ts
@@ -0,0 +1,232 @@
+import { dateUtil } from '/nerv-lib/util/date-util';
+import data from './mock.json';
+import { cloneDeep } from 'lodash-es';
+import { ref } from 'vue';
+const columns = [
+  {
+    title: '能源种类',
+    dataIndex: '能源种类',
+  },
+  {
+    title: '计量单位',
+    dataIndex: '计量单位',
+  },
+  {
+    title: '速算系数',
+    dataIndex: '速算系数',
+  },
+  {
+    title: '全年',
+    dataIndex: '全年',
+  },
+  {
+    title: '1月',
+    dataIndex: '1月',
+  },
+  {
+    title: '2月',
+    dataIndex: '2月',
+  },
+  {
+    title: '3月',
+    dataIndex: '3月',
+  },
+  {
+    title: '4月',
+    dataIndex: '4月',
+  },
+  {
+    title: '5月',
+    dataIndex: '5月',
+  },
+  {
+    title: '6月',
+    dataIndex: '6月',
+  },
+  {
+    title: '7月',
+    dataIndex: '7月',
+  },
+  {
+    title: '8月',
+    dataIndex: '8月',
+  },
+  {
+    title: '9月',
+    dataIndex: '9月',
+  },
+  {
+    title: '10月',
+    dataIndex: '10月',
+  },
+  {
+    title: '11月',
+    dataIndex: '11月',
+  },
+  {
+    title: '12月',
+    dataIndex: '12月',
+  },
+];
+const formConfig = {
+  schemas: [
+    {
+      field: 'time',
+      label: '年份',
+      component: 'NsDatePicker',
+      componentProps: {
+        picker: 'year',
+        valueFormat: 'YYYY-MM-DD',
+      },
+    },
+  ],
+  params: {},
+};
+
+const mockData = ref(cloneDeep(data.dataSource));
+
+const doWnload = (url) => {
+  const a = document.createElement('a');
+  document.body.appendChild(a);
+  a.href = encodeURI(url);
+  //设置下载的文件名
+  // a.download = fileName.value;
+  //触发a标签的点击事件，进行下载
+  a.click();
+};
+export const tableConfig1 = (el, fileDownRef) => {
+  return {
+    title: '能耗',
+    value: mockData.value,
+    rowSelection: null,
+    columns,
+    formConfig,
+    headerActions: [
+      {
+        label: '新增',
+        name: 'groupEdit',
+        type: 'primary',
+        handle: (a, b) => {
+          el.value.toggle();
+        },
+      },
+      {
+        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: 'groupExports',
+        type: 'primary',
+        handle: () => {
+          doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
+        },
+      },
+
+      {
+        label: '模板下载',
+        name: 'groupTemDownload',
+        type: 'primary',
+        handle: () => {
+          // http.get('/asset/file/whiteListUser.xlsx');
+          doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
+        },
+      },
+      {
+        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: () => {
+          fileDownRef.value.toggle();
+        },
+      },
+    ],
+    columnActions: {
+      title: '操作',
+      actions: [
+        {
+          label: '编辑',
+          name: 'edit',
+          handle: () => {
+            mockData.value.splice(0, 1);
+          },
+        },
+        {
+          label: '删除',
+          name: 'FeedBackDetail',
+          dynamicParams: ['uuid', 'appealType'],
+          confirm: true,
+          handle: () => {
+            mockData.value.splice(0, 1);
+          },
+        },
+      ],
+    },
+  };
+};
+export const tableConfig2 = {
+  title: '碳排',
+  value: data.dataSource,
+  rowSelection: null,
+  columns,
+  formConfig,
+  headerActions: [
+    {
+      label: '导出',
+      name: 'groupTemDownload',
+      type: 'primary',
+      handle: () => {
+        // http.get('/asset/file/whiteListUser.xlsx');
+        doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
+      },
+    },
+  ],
+};
+export const tableConfig3 = {
+  title: '标煤',
+  value: data.dataSource,
+  rowSelection: null,
+  columns,
+  formConfig,
+  headerActions: [
+    {
+      label: '导出',
+      name: 'groupTemDownload',
+      type: 'primary',
+      handle: () => {
+        // http.get('/asset/file/whiteListUser.xlsx');
+        doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
+      },
+    },
+  ],
+};
--- a/hx-ai-intelligent/src/view/equipmentManage/energyMapping/fileDown.vue
+++ b/hx-ai-intelligent/src/view/equipmentManage/energyMapping/fileDown.vue
@@ -0,0 +1,116 @@
+<template>
+  <ns-drawer
+    v-model:visible="visible"
+    width="520"
+    title="新增"
+    :ok="btnClick"
+    :cancel="() => (visible = false)"
+    placement="right">
+    <ns-view-list-table v-bind="tableConfig" />
+  </ns-drawer>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { NsMessage } from '/nerv-lib/component';
+
+  const visible = ref(false);
+  const model = ref({});
+  const toggle = () => {
+    visible.value = !visible.value;
+  };
+  const doWnload = (url) => {
+    const a = document.createElement('a');
+    document.body.appendChild(a);
+    a.href = encodeURI(url);
+    //设置下载的文件名
+    // a.download = fileName.value;
+    //触发a标签的点击事件，进行下载
+    a.click();
+  };
+
+  const mockDataSource = ref([
+    {
+      type: '电力',
+      fileName: '电力_2024.pdf',
+    },
+    {
+      type: '水',
+      fileName: '电力_2024.pdf',
+    },
+    {
+      type: '天然气',
+      fileName: '电力_2024.pdf',
+    },
+    {
+      type: '汽油',
+      fileName: '电力_2024.pdf',
+    },
+    {
+      type: '煤油',
+      fileName: '电力_2024.pdf',
+    },
+  ]);
+
+  const tableConfig = {
+    value: mockDataSource.value,
+    sticky: false,
+    rowKey: 'type',
+    columns: [
+      {
+        title: '序号',
+        dataIndex: 'index',
+        customRender: ({ index }) => index + 1,
+      },
+      {
+        title: '能源类型',
+        dataIndex: 'type',
+      },
+      {
+        title: '文件名',
+        dataIndex: 'fileName',
+      },
+    ],
+    headerActions: [
+      {
+        label: '批量下载',
+        name: 'groupTemDownload',
+        type: 'primary',
+        handle: () => {
+          // http.get('/asset/file/whiteListUser.xlsx');
+          doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
+        },
+      },
+    ],
+    columnActions: {
+      title: '操作',
+      actions: [
+        {
+          label: '下载',
+          name: 'groupTemDownload',
+          handle: () => {
+            // http.get('/asset/file/whiteListUser.xlsx');
+            doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx');
+          },
+        },
+      ],
+    },
+  };
+
+  const btnClick = () => {
+    visible.value = false;
+    NsMessage.success('操作成功');
+  };
+
+  defineExpose({
+    toggle,
+  });
+</script>
+<style scoped lang="less">
+  :deep(.ns-table-header) {
+    min-width: 200px;
+  }
+  :deep(.ns-table-container),
+  :deep(.ns-table-main) {
+    border-top: 0px !important;
+  }
+</style>
--- a/hx-ai-intelligent/src/view/equipmentManage/energyMapping/index.vue
+++ b/hx-ai-intelligent/src/view/equipmentManage/energyMapping/index.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <a-tabs>
+      <a-tab-pane v-for="(item, index) in tabList" :key="index" v-bind="item">
+        <ns-view-list-table v-bind="item.config" />
+      </a-tab-pane>
+    </a-tabs>
+    <opForm ref="opFormRef" />
+    <fileDown ref="fileDownRef" />
+  </div>
+</template>
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { tableConfig1, tableConfig2, tableConfig3 } from './config';
+  import opForm from './op.vue';
+  import fileDown from './fileDown.vue';
+  const opFormRef = ref();
+  const fileDownRef = ref();
+  const tabList = [
+    { tab: '能耗', config: tableConfig1(opFormRef, fileDownRef) },
+    { tab: '碳排', config: tableConfig2 },
+    { tab: '标煤', config: tableConfig3 },
+  ];
+  defineOptions({
+    name: 'EnergyMappingIndex', // 与页面路由name一致缓存才可生效
+  });
+</script>
+<style lang="less" scoped></style>
--- a/hx-ai-intelligent/src/view/equipmentManage/energyMapping/mock.json
+++ b/hx-ai-intelligent/src/view/equipmentManage/energyMapping/mock.json
@@ -0,0 +1,10 @@
+{
+  "dataSource":[
+    {"序号": "1", "能源种类": "电力", "计量单位": "tce", "速算系数": "0.5tce/kWh", "全年": "19900", "1月": "10000", "2月": "9900", "3月": "", "4月": "", "5月": "", "6月": "", "7月": "", "8月": "", "9月": "", "10月": "", "11月": "", "12月": ""},
+    {"序号": "2", "能源种类": "水", "计量单位": "tce", "速算系数": "0.5tce/t", "全年": "16500", "1月": "8000", "2月": "8500", "3月": "",  "4月": "", "5月": "", "6月": "", "7月": "", "8月": "", "9月": "", "10月": "", "11月": "", "12月": ""},
+    {"序号": "3", "能源种类": "天然气", "计量单位": "tce", "速算系数": "0.5tce/𝑚3/m3", "全年": "590", "1月": "300", "2月": "290", "3月": "", "4月": "", "5月": "", "6月": "", "7月": "", "8月": "", "9月": "", "10月": "",  "11月": "", "12月": ""},
+    {"序号": "4", "能源种类": "汽油", "计量单位": "tce", "速算系数": "0.5tce/𝑚3/m3", "全年": "330", "1月": "150", "2月": "180", "3月": "", "4月": "", "5月": "", "6月": "", "7月": "", "8月": "", "9月": "", "10月": "", "11月": "",  "12月": ""},
+    {"序号": "5", "能源种类": "煤油", "计量单位": "tce", "速算系数": "0.5tce/t", "全年": "43", "1月": "20", "2月": "23", "3月": "", "4月": "", "5月": "", "6月": "", "7月": "", "8月": "", "9月": "", "10月": "", "11月": "",  "12月": ""}
+  ]
+  
+}
--- a/hx-ai-intelligent/src/view/equipmentManage/energyMapping/op.vue
+++ b/hx-ai-intelligent/src/view/equipmentManage/energyMapping/op.vue
@@ -0,0 +1,135 @@
+<template>
+  <ns-drawer
+    v-model:visible="visible"
+    width="520"
+    title="新增"
+    :ok="btnClick"
+    :cancel="() => (visible = false)"
+    placement="right">
+    <a-tabs>
+      <a-tab-pane class="pane" key="1" tab="能源种类">
+        <ns-form :schemas="schemas" :model="model" formLayout="vertical" />
+      </a-tab-pane>
+      <a-tab-pane class="pane" key="2" tab="能耗统计">
+        <ns-basic-table v-bind="tableConfig" formLayout="vertical" />
+      </a-tab-pane>
+    </a-tabs>
+  </ns-drawer>
+</template>
+<script lang="ts" setup>
+  import { createVNode, ref, toRef, toRefs } from 'vue';
+  import { NsMessage } from '/nerv-lib/component';
+  import { Switch } from 'ant-design-vue';
+  const visible = ref(false);
+  const model = ref({});
+  const toggle = () => {
+    visible.value = !visible.value;
+  };
+
+  const mockDataSource = ref([]);
+  for (let index = 0; index < 12; index++) {
+    mockDataSource.value.push({ type: '手动', op: true });
+  }
+  const schemas = [
+    {
+      label: '能源种类',
+      field: 'formula1',
+      component: 'NsInput',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      rules: [{ required: true }],
+    },
+    {
+      label: '计量单位',
+      field: 'formula2',
+      component: 'NsInput',
+      componentProps: {
+        placeholder: '请输入',
+      },
+      rules: [{ required: true }],
+    },
+    {
+      label: '计算碳排',
+      field: 'formula3',
+      component: 'NsRadioGroup',
+      defaultValue: 1,
+      componentProps: {
+        radioType: 'radio',
+        options: [
+          { label: '是', value: 1 },
+          { label: '否', value: 0 },
+        ],
+      },
+      rules: [{ required: true }],
+    },
+    {
+      label: '计算标煤',
+      field: 'formula4',
+      component: 'NsRadioGroup',
+      defaultValue: 1,
+      componentProps: {
+        radioType: 'radio',
+        options: [
+          { label: '是', value: 1 },
+          { label: '否', value: 0 },
+        ],
+      },
+      rules: [{ required: true }],
+    },
+    {
+      label: '采集节点',
+      field: 'formula5',
+      component: 'NsInput',
+      componentProps: {
+        placeholder: '请输入',
+      },
+    },
+  ];
+  const tableConfig = {
+    dataSource: mockDataSource.value,
+    pagination: false,
+    rowKey: (record) => record.groupName,
+    columns: [
+      {
+        title: '月份',
+        dataIndex: 'month',
+        customRender: ({ index }) => index + 1 + '月',
+        width: 80,
+        align: 'center',
+      },
+      {
+        title: '汇总方式',
+        dataIndex: 'type',
+        align: 'center',
+      },
+      {
+        title: '操作',
+        dataIndex: 'op',
+        align: 'center',
+        customRender: (data) =>
+          createVNode(Switch, {
+            checked: Boolean(data.record.op),
+            onChange: (val) => {
+              setTimeout(() => {
+                data.record.op = val;
+              }, 10);
+            },
+          }),
+      },
+    ],
+  };
+  const btnClick = () => {
+    visible.value = false;
+    NsMessage.success('操作成功');
+  };
+
+  defineExpose({
+    toggle,
+  });
+</script>
+<style scoped lang="less">
+  .pane {
+    margin-top: 16px;
+  }
+</style>