xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

优化页面UI,修改测试bug

Browse Source
This commit is contained in:
fks-xuxinyue
2024-08-15 15:30:36 +08:00
parent 07f1903c98
commit 897db024e0
12 changed files with 889 additions and 1060 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
View File

@@ -49,6 +49,7 @@ export enum carbonInventoryCheck {
createOrUpdate = '/carbon-smart/api/carbon/report/createOrUpdate',
findById = '/carbon-smart/api/carbon/report/findById',
delete = '/carbon-smart/api/carbon/report/delete',
downloadZip = '/carbon-smart/api/carbon/report/downloadZip',
// 填报页面接口
// 最左侧碳盘查报告树
getCategoryTree = '/carbon-smart/api/carbon/inventory/contact/getCategoryTree',
@@ -77,6 +78,8 @@ export enum carbonAssets {
createOrUpdate = '/carbon-smart/api/carbon/trade/details/createOrUpdate',
delete = '/carbon-smart/api/carbon/trade/details/delete',
quotaStatistics = '/carbon-smart/api/carbon/trade/details/quotaStatistics',
import = '/carbon-smart/api/carbon/trade/details/import',
export = '/carbon-smart/api/carbon/trade/details/export',
}
// 上传图片接口
export enum uploadPic {

63
hx-ai-intelligent/src/view/carbonEmissionManage/carbonAssets/carbonAssetsDetail/index.vue
View File

@@ -51,10 +51,17 @@
<a-card>
<div class="ns-form-title">
<div class="title">交易明细</div>
<div class="operation">
<div class="operation" style="display: flex">
<a-button type="primary" @click="addDetail">新增</a-button>
<a-button type="primary" style="margin-left: 6px">导入</a-button>
<a-button type="primary" style="margin-left: 6px">导出</a-button>
<a-upload
v-model:file-list="importFileList"
name="file"
accept=".xlsx"
:showUploadList="false"
:custom-request="importFile">
<a-button type="primary" style="margin-left: 6px">导入</a-button>
</a-upload>
<a-button type="primary" style="margin-left: 6px" @click="exportFile">导出</a-button>
<a-button
type="primary"
style="margin-left: 6px"
@@ -196,8 +203,8 @@
const orgId = ref('');
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
const fetch = (api, params = { orgId }) => {
return http.post(api, params);
const fetch = (api, params = { orgId }, config) => {
return http.post(api, params, config);
};
// 详情部分变量
const selectedRowKeys = ref([]);
@@ -400,6 +407,52 @@
visible.value = true;
getDictList();
};
const importFileList = ref<UploadProps['fileList']>([]);
const importFile = (options: UploadRequestOption) => {
const { file, onSuccess, onError } = options;
const formData = ref(new FormData());
formData.value.append('file', file as any);
formData.value.append('orgId', orgId.value);
formData.value.append('year', queryParams.value.year);
fetch(carbonAssets.import, formData.value)
.then((res) => {
message.success('操作成功！');
getDetailList();
})
.catch((error) => {
console.log('error', error);
});
};
const exportFile = () => {
const exportQuery = ref({
orgId: orgId.value,
pageNum: 1,
pageSize: 999,
year: queryParams.value.year,
ids: selectedRowKeys.value,
});
const config = {
responseType: 'blob',
};
fetch(carbonAssets.export, exportQuery.value, config)
.then((res) => {
// 创建一个 URL 对象，指向图片数据的 blob
const url = window.URL.createObjectURL(new Blob([res]));
// 创建一个 <a> 标签，用于触发下载
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'carbonTradeDetails.xlsx'); // 设置下载的文件名
document.body.appendChild(link);
link.click();
// 清理 URL 对象
window.URL.revokeObjectURL(url);
selectedRowKeys.value = []
})
.catch((error) => {
console.error('下载失败：', error);
});
};
// 上传附件
const fileList = ref<UploadProps['fileList']>([]);
const beforeUpload: UploadProps['beforeUpload'] = (file) => {

11
hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue
View File

@@ -429,7 +429,7 @@
};
// 点击数据点的复选框
const checkedIds = ref([]);
const emissionType = ref();
const emissionList = ref([]);
const checkTreeNode = (checkedKeys, info) => {
checkedTreeNodeKeys.value = checkedKeys;
checkedIds.value = [];
@@ -437,7 +437,7 @@
checkedIds.value.push(item.id);
});
sessionStorage.setItem('checkedTreeNode', checkedIds.value);
emissionType.value = checkedIds.value.join(',');
emissionList.value = checkedIds.value;
mainRef.value?.nsTableRef.reload();
};
// 点击新增树节点
@@ -522,7 +522,7 @@
getDefaultIds(items.children);
}
});
emissionType.value = defaultIds.value.join(',');
emissionList.value = defaultIds.value.join(',');
checkedIds.value = defaultIds.value;
sessionStorage.setItem('checkedTreeNode', checkedIds.value);
};
@@ -609,7 +609,7 @@
api: carbonEmissionFactorLibrary.getTableList,
params: {
orgId,
emissionType,
emissionList,
},
headerActions: [
{
@@ -661,10 +661,12 @@
label: '导出',
type: 'primary',
handle: () => {
// console.log( mainRef.value.nsTableRef.tableState.selectedRowKeys)
const exportQuery = {
orgId: orgId.value,
pageNum: 1,
pageSize: 999,
ids: mainRef.value.nsTableRef.tableState.selectedRowKeys,
};
const config = {
responseType: 'blob',
@@ -682,6 +684,7 @@
// 清理 URL 对象
window.URL.revokeObjectURL(url);
mainRef.value.nsTableRef.tableState.selectedRowKeys = [];
})
.catch((error) => {
console.error('下载失败：', error);

952
hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/energyConsumption/index copy.vue
View File

@@ -1,952 +0,0 @@
<template>
<div>
<!-- <a-table
:columns="tableColumns"
:data-source="data"
bordered
:pagination="false"
:scroll="{ x: 2000 }">
<template #bodyCell="{ column, text, record }">
<template v-if="column.key === 'action'">
<span>
<a @click="editData(record)">编辑</a>
<a-divider type="vertical" />
<a @click="delData(record)">删除</a>
</span>
</template>
</template>
<template #title>
<a-date-picker v-model:value="selectYear" picker="year" @change="changeYearData" valueFormat="YYYY" />
<div class="buttonGroup">
<a-button type="primary" @click="addNewData">新增</a-button>
<a-button type="primary">导入</a-button>
<a-button type="primary">导出</a-button>
<a-button type="primary">模板下载</a-button>
<a-button type="primary" @click="uploadVoucher">上传凭证</a-button>
<a-button type="primary">凭证下载</a-button>
</div>
</template>
</a-table> -->
<ns-view-list-table
v-bind="tableConfig"
:model="data"
ref="mainRef"
:scroll="{ x: 1500, y: 350 }">
<!-- <template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'janFlag'">
<span v-if="record.janFlag===1" style="color: rgba(243, 97, 99, 1);">{{text}}</span>
<span v-else style="color: rgba(57, 215, 287, 1);">{{text}}</span>
</template>
</template> -->
</ns-view-list-table>
<!-- <a-pagination
:current="queryParams.pageNum"
:total="total"
:page-size="queryParams.pageSize"
style="display: flex;justify-content: center;margin-top: 16px;"
:show-size-changer="true"
:show-quick-jumper="true"
@change="onChange" /> -->
<!-- 新增数据库数据 -->
<a-drawer
:width="500"
:visible="visible"
:body-style="{ paddingBottom: '80px' }"
:footer-style="{ textAlign: 'right' }"
destroyOnClose
@close="onClose">
<a-form
ref="formRef"
:model="formState"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol">
<a-form-item ref="name" label="能耗名称" name="energyType">
<a-input v-model:value="formState.energyType" placeholder="请输入能源种类" />
</a-form-item>
<a-form-item label="计量单位" name="unit">
<a-cascader v-model:value="formState.unit" :options="measurementUnit" />
</a-form-item>
<a-form-item label="能耗类型" name="emissionType" :required="isRequired">
<a-select v-model:value="formState.emissionType" placeholder="请选择能耗类型">
<a-select-option v-for="(item, index) in energyTypeOptions" :key="index" :value="item.dicKey">
{{ item.cnValue }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item label="自动采集节点" name="collectionNode">
<a-tree-select
v-model:value="formState.collectionNode"
:tree-line="true"
:tree-data="treeData">
</a-tree-select>
</a-form-item>
<a-form-item label="计算碳排" name="isComputeCarbon">
<a-radio-group v-model:value="formState.isComputeCarbon" @change="changeRadio">
<a-radio :value="0">是</a-radio>
<a-radio :value="1">否</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="排放类型" name="emissionType" :required="isRequired">
<a-select v-model:value="formState.emissionType" placeholder="请选择排放类型">
<a-select-option v-for="(item, index) in emissionTypeDic" :key="index" :value="item.id">
{{ item.cnValue }}
</a-select-option>
</a-select>
</a-form-item>
<a-row>
<a-col :span="24" style="display: flex; justify-content: space-around">
<a-form-item
label="1月"
name="janFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.janFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
<a-form-item
label="2月"
name="febFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.febFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
<a-form-item
label="3月"
name="marFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.marFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
</a-col>
<a-col :span="24" style="display: flex; justify-content: space-around">
<a-form-item
label="4月"
name="aprFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.aprFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
<a-form-item
label="5月"
name="mayFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.mayFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
<a-form-item
label="6月"
name="junFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.junFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
</a-col>
<a-col :span="24" style="display: flex; justify-content: space-around">
<a-form-item
label="7月"
name="julFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.julFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
<a-form-item
label="8月"
name="augFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.augFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
<a-form-item
label="9月"
name="sepFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.sepFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
</a-col>
<a-col :span="24" style="display: flex; justify-content: space-around">
<a-form-item
label="10月"
name="octFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.octFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
<a-form-item
label="11月"
name="novFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.novFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
<a-form-item
label="12月"
name="decFlag"
:label-col="switchLabelCol"
:wrapper-col="switchWrapperCol">
<a-switch
v-model:checked="formState.decFlag"
:checked-value="1"
:unCheckedValue="0" />
</a-form-item>
</a-col>
</a-row>
<a-form-item ref="name" label="上传凭证">
<a-upload
:file-list="fileList"
name="file"
accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf"
@remove="handleFileRemove"
:before-upload="beforeUpload"
@change="handleChange">
<a-button>
<upload-outlined></upload-outlined>
上传
</a-button>
</a-upload>
</a-form-item>
</a-form>
<template #footer>
<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
<a-button type="primary" @click="onSubmit">确定</a-button>
</template>
</a-drawer>
<!-- 上传凭证弹窗 -->
<!-- <a-modal :visible="openUpload" title="凭证上传" @ok="handleOk" @cancel="closeOpenUpload">
<a-upload-dragger
v-model:fileList="fileList"
name="file"
:multiple="true"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
@change="handleChange"
@drop="handleDrop"
>
<p class="ant-upload-drag-icon">
<inbox-outlined></inbox-outlined>
</p>
<p class="ant-upload-hint" style="display: flex;flex-direction: column;">
<p>1.仅支持pdf格式文件或文件夹</p>
<p>2.文件命名规则为【能源种类_年份】</p>
<p>3.每次上传自动覆盖</p>
</p>
</a-upload-dragger>
</a-modal> -->
<!-- 凭证下载 -->
<a-drawer
:visible="downLoadVisible"
title="凭证列表"
:width="500"
@close="onCloseDownLoad"
:footer-style="{ textAlign: 'right' }">
<div></div>
<a-table
:columns="downLoadColumns"
:data-source="downLoadData"
bordered
rowKey="id"
:rowSelection="{
selectedRowKeys: selectedRowKeysSet,
onChange: onSelectionChangeSet,
}"
:pagination="false">
<template #bodyCell="{ column, text, record }">
<template v-if="column.key === 'action'">
<span>
<a @click="downLoad(record)">下载</a>
</span>
</template>
</template>
</a-table>
<template #footer>
<a-button style="margin-right: 8px" @click="onCloseDownLoad">取消</a-button>
<a-button type="primary" @click="onSubmitDownLoad">确定</a-button>
</template>
</a-drawer>
</div>
</template>
<script lang="ts" setup>
import { ref, toRaw, defineExpose } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import { Pagination, message, Modal } from 'ant-design-vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import type { TreeSelectProps, UploadChangeParam, UploadProps } from 'ant-design-vue';
import { NsMessage } from '/nerv-lib/component';
import dayjs, { Dayjs } from 'dayjs';
import { http } from '/nerv-lib/util/http';
import { Cookies } from '/nerv-lib/util/cookie';
import { tableColumns } from '../config';
import {
energyConsumption,
carbonEmissionFactorLibrary,
uploadPic,
} from '/@/api/carbonEmissionFactorLibrary';
import { dict } from '/@/api';
import { group } from '/@/api/deviceManage';
defineOptions({
energyType: 'EnergyConsumption', // 与页面路由name一致缓存才可生效
components: {
'a-pagination': Pagination,
},
});
const orgId = ref('');
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
const fetch = (api, params = { orgId }, config) => {
return http.post(api, params, config);
};
const selectYear = ref<Dayjs>(dayjs(new Date().getFullYear().toString()));
const total = ref<number>();
const queryParams = ref({
pageNum: 1,
pageSize: 10,
orgId: orgId.value,
year: selectYear.value.format('YYYY'),
});
const isRequired = ref(false);
const visible = ref(false);
const openUpload = ref<boolean>(false);
const data = ref([]);
interface FormState {
energyType: string;
unit: string;
collectionNode: string;
emissionType: string | undefined;
isComputeCarbon: string;
janFlag: string;
febFlag: string;
marFlag: string;
aprFlag: string;
mayFlag: string;
junFlag: string;
julFlag: string;
augFlag: string;
sepFlag: string;
octFlag: string;
novFlag: string;
decFlag: string;
}
const formRef = ref();
const labelCol = { span: 5 };
const wrapperCol = { span: 19 };
const switchLabelCol = { span: 10 };
const switchWrapperCol = { span: 14 };
const formState = ref({
orgId: orgId.value,
});
// 定义form表单的必填
const rules: Record<string, Rule[]> = {
energyType: [{ required: true, message: '请输入能源种类', trigger: 'change' }],
isComputeCarbon: [{ required: true, message: '请选择是否计算碳排', trigger: 'change' }],
unit: [{ required: true, message: '请选择计量单位', trigger: 'change' }],
};
// 排放类型的变量
const emissionTypeDic = ref();
// 计量单位的变量
const measurementUnit = ref([]);
// 定义自动采集节点数的变量
const treeData = ref<TreeSelectProps['treeData']>([]);
// 年份选择改变触发
const changeYearData = () => {
queryParams.value.year = selectYear.value;
getTableList();
};
const mainRef = ref();
const year = selectYear.value.format('YYYY');
const tableConfig = ref({
title: '能耗统计',
api: energyConsumption.pageList,
params: queryParams.value,
headerActions: [
{
label: '新增',
name: 'userAdd',
type: 'primary',
handle: () => {
getDictList();
visible.value = true;
},
},
{
label: '导入',
type: 'primary',
name: 'userImport',
handle: () => {},
},
{
label: '导出',
type: 'primary',
name: 'userExports',
},
{
label: '模板下载',
type: 'primary',
},
// {
// label: '上传凭证',
// type: 'primary',
// handle: () => {
// openUpload.value = true;
// },
// },
{
label: '凭证下载',
type: 'primary',
handle: () => {
fetch(energyConsumption.voucherDownloadList, { bizType: 3 }).then((res) => {
downLoadData.value = res.data;
});
downLoadVisible.value = true;
},
},
],
columns: [
{
title: '序号',
customRender: (text: any) => {
return text.index + 1;
},
},
{
title: '能源种类',
dataIndex: 'energyType',
},
{
title: '计量单位',
className: 'unitName',
dataIndex: 'unitName',
},
{
title: '全年',
dataIndex: 'yearly',
},
{
title: '1月',
dataIndex: 'jan',
// customRender: ({ text }: { text: string }) => {
// return <span :style="{ color: getColor(text) }">{text}</span>;
// }
},
{
title: '2月',
dataIndex: 'feb',
},
{
title: '3月',
dataIndex: 'mar',
},
{
title: '4月',
dataIndex: 'apr',
},
{
title: '5月',
dataIndex: 'may',
},
{
title: '6月',
dataIndex: 'jun',
},
{
title: '7月',
dataIndex: 'jul',
},
{
title: '8月',
dataIndex: 'aug',
},
{
title: '9月',
dataIndex: 'sep',
},
{
title: '10月',
dataIndex: 'oct',
},
{
title: '11月',
dataIndex: 'nov',
},
{
title: '12月',
dataIndex: 'dec',
},
],
columnActions: {
title: '操作',
actions: [
{
label: '编辑',
name: 'userEdit',
handle: (record: any) => {
getDictList();
visible.value = true;
fetch(energyConsumption.findById, { id: record.id }).then((res) => {
if (res.data.emissionType) {
res.data.emissionType = Number(res.data.emissionType);
}
if (res.data.unit) {
let selectDevice = ref([Number(res.data.unit)]);
findParentIds(measurementUnit.value, res.data.unit, selectDevice.value);
res.data.unit = selectDevice;
}
formState.value = res.data;
emissionType.value = res.data.emissionType;
if (formState.value.isComputeCarbon === 0) {
isRequired.value = true;
} else {
isRequired.value = false;
}
});
fetch(uploadPic.select, { bizId: record.id, bizType: 3 }).then((res) => {
fileList.value = res.data.map((item) => ({
uid: item.id.toString(), // 使用文件的id作为唯一标识
name: item.fileName, // 文件名
status: 'done', // 设置默认状态为已完成
type: 'done',
url: item.filePath, // 文件的URL，这里假设用示例的URL格式
}));
});
},
},
{
label: '删除',
name: 'userDelete',
dynamicParams: { id: 'id' },
confirm: true,
isReload: true,
api: energyConsumption.del,
},
],
},
formConfig: {
schemas: [
{
field: 'year',
label: '年份',
component: 'NsDatePicker',
componentProps: {
picker: 'year',
valueFormat: 'YYYY',
defaultValue: selectYear.value.format('YYYY'),
},
},
],
params: {},
},
rowKey: 'id',
});
const getColor = (value: string | number): string => {
debugger;
if (typeof value === 'string') {
switch (value) {
case 'active':
return 'green';
case 'inactive':
return 'red';
default:
return 'black';
}
} else if (typeof value === 'number') {
return value > 30 ? 'blue' : 'purple'; // 示例：根据年龄设置颜色
}
return 'black';
};
defineExpose({
mainRef,
});
// 定义一个递归函数来查找每一级的id 设备类型回显 层级方法
function findParentIds(tree: any, targetId: number, result: any) {
for (let item of tree) {
if (item.children && item.children.length > 0) {
if (item.children.some((child: any) => child.value === targetId)) {
result.unshift(item.value); // 将当前节点的id添加到结果数组的最前面
findParentIds(tree, item.value, result); // 递归查找父级节点的id
break; // 找到后可以退出循环
}
}
}
}
// 获取表格数据
const getTableList = () => {
fetch(energyConsumption.pageList, queryParams.value).then((res) => {
data.value = res.data.records;
});
};
// 分页器
const onChange = (pageNumber: number, size: number) => {
queryParams.value.pageNum = pageNumber;
queryParams.value.pageSize = size;
mainRef.value?.nsTableRef.reload();
};
// 计算碳排切换
const emissionType = ref();
const changeRadio = (e) => {
if (e.target.value === 0) {
isRequired.value = true;
if (emissionType.value) {
formState.value.emissionType = emissionType.value;
}
} else {
isRequired.value = false;
formState.value.emissionType = '';
}
};
// 点击确定提交
const onSubmit = () => {
formRef.value
.validate()
.then(() => {
console.log('values', formState, toRaw(formState));
formState.value.year = selectYear.value.format('YYYY');
if (formState.value.unit) {
formState.value.unit = formState.value.unit.join(',').split(',')[1];
}
if (formState.value.id) {
fetch(energyConsumption.update, formState.value).then((res) => {
if (fileList.value.length !== 0) {
const formData = ref(new FormData());
fileList.value.forEach((file) => {
if (file.type !== 'done') {
formData.value.append('files', file.originFileObj);
}
});
formData.value.append('bizType', 3);
formData.value.append('bizId', formState.value.id);
delIds.value.forEach((item) => {
formData.value.append('deleteList', item);
});
fetch(uploadPic.uploadfiles, formData.value)
.then((res) => {
message.success('操作成功！');
visible.value = false;
delIds.value = [];
formState.value = {
orgId: orgId.value,
};
mainRef.value?.nsTableRef.reload();
})
.catch((error) => {
console.log('error', error);
});
} else {
visible.value = false;
delIds.value = [];
formState.value = {
orgId: orgId.value,
};
message.success('操作成功！');
mainRef.value?.nsTableRef.reload();
}
});
} else {
fetch(energyConsumption.creat, formState.value).then((res) => {
if (res.data === '新增数据已存在') {
visible.value = false;
delIds.value = [];
NsMessage.warning(res.data);
} else {
if (fileList.value.length !== 0) {
const formData = ref(new FormData());
fileList.value.forEach((file) => {
formData.value.append('files', file.originFileObj);
});
formData.value.append('bizType', 3);
formData.value.append('bizId', res.data);
fetch(uploadPic.uploadfiles, formData.value)
.then((res) => {
message.success('操作成功！');
visible.value = false;
delIds.value = [];
formState.value = {
orgId: orgId.value,
};
mainRef.value?.nsTableRef.reload();
})
.catch((error) => {
console.log('error', error);
});
} else {
visible.value = false;
delIds.value = [];
formState.value = {
orgId: orgId.value,
};
message.success('操作成功！');
mainRef.value?.nsTableRef.reload();
}
}
});
}
})
.catch((error) => {
console.log('error', error);
});
};
const energyTypeOptions = ref([]);
// 获取字典值
const getDictList = async () => {
// 获取能耗类型
const options = await dict({ params: { dicKey: 'ENERGY_TYPE' } });
energyTypeOptions.value = options.data.data
console.log(energyTypeOptions);
debugger
// 获取排放类型的数据
fetch(energyConsumption.getDicList, { grp: 'EMISSION_TYPE' }).then((res) => {
emissionTypeDic.value = res.data;
});
// 获取计量单位的数据
fetch(carbonEmissionFactorLibrary.dictionaryUnitManagement, { grp: 'MEASUREMENT_UNIT' }).then(
(res) => {
measurementUnit.value = res.data;
measurementUnit.value = measurementUnit.value.map((item) => ({
value: item.id,
label: item.cnValue,
children: item.children
? item.children.map((child) => ({
value: child.id,
label: child.cnValue,
}))
: [],
}));
},
);
// 获取自动采集节点的数据
fetch(group.queryDeviceGroupTree, { energyType: 'ELECTRICITY_USAGE', orgId: orgId.value }).then(
(res) => {
treeData.value = res.data;
treeData.value = treeData.value.map((item) => ({
value: item.id,
label: item.pointName,
children: item.children
? item.children.map((child) => ({
value: child.id,
label: child.pointName,
}))
: [],
}));
},
);
};
// 点击新增按钮
const addNewData = () => {
getDictList();
visible.value = true;
};
// 点击编辑按钮
const editData = (record) => {
getDictList();
visible.value = true;
fetch(energyConsumption.findById, { id: record.id }).then((res) => {
if (res.data.unitName) {
res.data.unitName = res.data.unitName.split(',');
}
formState.value = res.data;
});
};
// 点击删除
const delData = (record) => {
Modal.confirm({
title: '警告',
content: '确定要删除吗?',
okText: '确定',
okType: 'primary',
cancelText: '取消',
onOk() {
fetch(energyConsumption.del, { id: record.id }).then((res) => {
message.success('操作成功！');
mainRef.value?.nsTableRef.reload();
});
},
onCancel() {
console.log('Cancel');
},
});
};
// 关闭新增抽屉
const onClose = () => {
visible.value = false;
delIds.value = [];
formState.value = {
orgId: orgId.value,
};
formRef.value.resetFields();
};
// 点击上传凭证按钮
const uploadVoucher = () => {
openUpload.value = true;
};
// 上传凭证弹窗点击确定
const handleOk = (e: MouseEvent) => {
console.log(e);
openUpload.value = false;
};
// 上传凭证相关方法及变量
const fileList = ref<UploadProps['fileList']>([]);
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
return false;
};
const handleChange = (info: UploadChangeParam) => {
fileList.value = [...info.fileList];
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} 文件上传成功`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 文件上传失败`);
}
};
const delIds = ref([]);
const handleFileRemove = (file) => {
delIds.value.push(file.uid);
const newFileList = [];
fileList.value.forEach((item) => {
if (item.uid !== file.uid) {
newFileList.push(item);
}
});
fileList.value = newFileList;
};
// 关闭上传凭证弹窗
const closeOpenUpload = () => {
openUpload.value = false;
};
// 凭证下载
const downLoadVisible = ref(false);
const downLoadColumns = [
{
title: '序号',
customRender: (text: any) => {
return text.index + 1;
},
},
{
title: '能源类型',
dataIndex: 'bizName',
},
{
title: '文件名',
dataIndex: 'fileName',
ellipsis: true,
},
{
title: '操作',
key: 'action',
},
];
const downLoadData = ref([]);
const selectedRowKeysSet = ref([]);
const onSelectionChangeSet = (selectedKeys, selectedRows) => {
selectedRowKeysSet.value = selectedKeys;
};
const downLoad = (record) => {
const deleteId = ref(new FormData());
deleteId.value.append('id', record.id);
const config = {
headers: {
responseType: 'blob',
},
};
fetch(uploadPic.download, deleteId.value, config)
.then((res) => {
// 创建一个 URL 对象，指向图片数据的 blob
const url = window.URL.createObjectURL(new Blob([res.data]));
// 创建一个 <a> 标签，用于触发下载
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', record.fileName); // 设置下载的文件名
document.body.appendChild(link);
link.click();
// 清理 URL 对象
window.URL.revokeObjectURL(url);
})
.catch((error) => {
console.error('下载图片失败：', error);
});
};
const onSubmitDownLoad = () => {
const deleteIds = ref(new FormData());
selectedRowKeysSet.value.forEach((item) => {
deleteIds.value.append('ids', item);
});
fetch(uploadPic.downloadZip, deleteIds.value)
.then((res) => {
// 创建一个 URL 对象，指向图片数据的 blob
const url = window.URL.createObjectURL(new Blob([res.data]));
// 创建一个 <a> 标签，用于触发下载
const link = document.createElement('a');
link.href = url;
debugger;
link.setAttribute('download', ''); // 设置下载的文件名
document.body.appendChild(link);
link.click();
// 清理 URL 对象
window.URL.revokeObjectURL(url);
onCloseDownLoad();
})
.catch((error) => {
console.error('下载图片失败：', error);
});
};
const onCloseDownLoad = () => {
selectedRowKeysSet.value = [];
downLoadVisible.value = false;
};
</script>
<style scoped lang="less">
:deep(.ant-table-title) {
display: flex;
}
:deep(.ant-table-container) {
padding: 0px 16px;
}
.buttonGroup {
margin-left: 1vw;
width: 30vw;
display: flex;
justify-content: space-around;
}
</style>
<style scoped>
th.column-money,
td.column-money {
text-align: right !important;
}
</style>

56
hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/energyConsumption/index.vue
View File

@@ -210,22 +210,33 @@
</template>
</template>
</a-table>
<div class="ns-form-title"><div class="title">凭证上传</div></div>
<div class="ns-form-title" style="display: flex">
<div class="title">凭证上传</div>
</div>
<a-upload
:file-list="fileList"
name="file"
accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf"
accept=".pdf"
@remove="handleFileRemove"
:before-upload="beforeUpload"
@change="handleChange">
<a-button>
<a-button style="margin-left: 6px; color: #4f95ff; border-color: #4f95ff">
<upload-outlined></upload-outlined>
上传
上传凭证
</a-button>
</a-upload>
<div style="display: flex; flex-direction: column">
<div
style="
display: flex;
flex-direction: column;
border-radius: 4px;
background: rgba(250, 250, 250, 1);
color: rgba(153, 153, 153, 1);
padding: 5px;
">
<span>1.仅支持pdf格式文件或文件夹</span>
<span>2.文件名命名规则为【能源种类_年份】</span>
<span>3.每次上传自动覆盖</span>
</div>
<template #footer>
@@ -289,7 +300,7 @@
<script lang="ts" setup>
import { ref, toRaw, defineExpose, createVNode } from 'vue';
import type { Rule } from 'ant-design-vue/es/form';
import { Pagination, message, Modal } from 'ant-design-vue';
import { Pagination, message, Modal, Upload } from 'ant-design-vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import type { TreeSelectProps, UploadChangeParam, UploadProps } from 'ant-design-vue';
import { NsMessage } from '/nerv-lib/component';
@@ -1058,19 +1069,29 @@
};
// 上传凭证相关方法及变量
const fileList = ref<UploadProps['fileList']>([]);
const isValidFileName = (filename: string): boolean => {
const regex = /^[\s\S]+_\d{4}\.pdf$/;
return regex.test(filename);
};
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
const filename = file.name;
if (!isValidFileName(filename)) {
message.error('文件名不符合规则');
return Upload.LIST_IGNORE; // 阻止文件上传
}
return false;
};
const handleChange = (info: UploadChangeParam) => {
fileList.value = [...info.fileList];
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} 文件上传成功`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 文件上传失败`);
// fileList.value = [...info.fileList];
const { fileList: newFileList } = info;
delIds.value.push(info.fileList[0].uid);
// 删除fileList中的第一条数据
if (newFileList.length > 1) {
newFileList.shift(); // 删除第一条数据
}
// 更新fileList
fileList.value = [...newFileList];
};
const delIds = ref([]);
const handleFileRemove = (file) => {
@@ -1229,6 +1250,13 @@
.grey-background.ant-switch .ant-switch-handle {
background-color: rgba(238, 238, 238, 1) !important;
}
.ant-switch-checked {
background-color: rgba(57, 215, 187, 1) !important;
}
.grey-background.ant-switch .ant-switch-handle {
background-color: rgba(238, 238, 238, 1) !important;
}
</style>
<style scoped>
th.column-money,

587
hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/quickCalculation/index copy.vue Normal file
View File

@@ -0,0 +1,587 @@
<template>
<div class="main">
<div class="left">
<div class="top">
<a-form style="width: 100%; margin: 0 auto">
<div class="ns-form-title"><div class="title">因子分类</div></div>
<div style="padding: 0 16px !important; width: 100%">
<a-row>
<a-col :span="24" style="margin-bottom: 16px">
<a-input-search
v-model:value="searchValue"
placeholder="请输入关键词"
@search="onSearchTreeData" />
</a-col>
</a-row>
</div>
</a-form>
<a-tree
v-if="gData && gData.length > 0"
:expanded-keys="expandedKeys"
:auto-expand-parent="autoExpandParent"
:selectedKeys="selectedKeys"
:tree-data="gData"
show-line
@expand="onExpand"
@select="onSelect"
style="padding: 0 16px !important">
<template #title="data">
<span
v-if="data.energyType && searchValue && data.energyType.indexOf(searchValue) > -1">
{{ data.energyType.substring(0, data.energyType.indexOf(searchValue)) }}
<span style="color: #f50">{{ searchValue }}</span>
{{
data.energyType.substring(data.energyType.indexOf(searchValue) + searchValue.length)
}}
</span>
<span v-else>{{ data.energyType }}</span>
</template>
</a-tree>
</div>
</div>
<div class="right">
<!-- <a-table
:columns="columns"
:data-source="tableData"
bordered
:pagination="false">
<template #bodyCell="{ column, text, record }">
<template v-if="column.key === 'action'">
<span>
<a @click="editData(record)">编辑</a>
<a-divider type="vertical" />
<a @click="delData(record)">删除</a>
</span>
</template>
</template>
<template #title>
<div class="ns-table-title"><span>排放因子库</span></div>
<div class="buttonGroup">
<a-button type="primary" @click="addNewData">新增</a-button>
</div>
</template>
</a-table> -->
<ns-view-list-table
v-bind="tableConfig"
:model="tableData"
ref="mainRef"
:scroll="{ x: 1000 }" />
<a-pagination
:current="queryParams.pageNum"
:total="total"
:page-size="queryParams.pageSize"
style="display: flex; justify-content: center; margin-top: 16px"
:show-size-changer="true"
:show-quick-jumper="true"
@change="onChange" />
<!-- 新增/编辑 -->
<a-drawer
:width="500"
:visible="visible"
:body-style="{ paddingBottom: '80px' }"
:footer-style="{ textAlign: 'right' }"
destroyOnClose
@close="onClose">
<a-form
ref="formRef"
:model="formState"
:rules="rules"
:label-col="labelCol"
:wrapper-col="wrapperCol">
<a-row>
<a-col :span="24">
<a-form-item ref="name" label="日期范围" name="dateRange">
<a-range-picker
v-model:value="formState.dateRange"
picker="month"
valueFormat="YYYY-MM" />
</a-form-item>
</a-col>
<a-col :span="24">
<a-form-item ref="name" label="排放因子" name="emissionFactors">
<ns-input v-model:value="formState.emissionFactors" disabled />
</a-form-item>
</a-col>
</a-row>
<span
key=""
style="font-size: 16px; font-weight: 700; color: rgba(51, 51, 51, 1); text-align: left">
因子列表
</span>
<a-row>
<a-col :span="12">
<a-form-item ref="name">
<ns-input style="margin-top: 5px" v-model:value="selectData" @change="keyChange" />
</a-form-item>
</a-col>
</a-row>
</a-form>
<a-table
:columns="drawerColumns"
:data-source="newTableData"
bordered
rowKey="id"
:rowSelection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectionChange,
type: 'radio',
}"
:pagination="false">
</a-table>
<template #footer>
<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
<a-button type="primary" @click="onSubmit">确定</a-button>
</template>
</a-drawer>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, watch, toRaw, defineExpose } from 'vue';
import type { TreeProps } from 'ant-design-vue';
import { Pagination, Modal } from 'ant-design-vue';
import { columns, drawerColumns } from '../config';
import { http } from '/nerv-lib/util/http';
import {
quickCalculation,
carbonEmissionFactorLibrary,
} from '/@/api/carbonEmissionFactorLibrary';
import { or } from '@vueuse/core';
defineOptions({
energyType: 'quickCalculation', // 与页面路由name一致缓存才可生效
components: {
'a-pagination': Pagination,
},
});
const orgId = ref('');
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
const fetch = (api, params = { orgId }) => {
return http.post(api, params);
};
const mainRef = ref();
// 数结构
const x = 3;
const y = 2;
const z = 1;
const genData: TreeProps['treeData'] = [];
const generateData = (_level: number, _preKey?: string, _tns?: TreeProps['treeData']) => {
const preKey = _preKey || '0';
const tns = _tns || genData;
const children = [];
for (let i = 0; i < x; i++) {
const key = `${preKey}-${i}`;
tns.push({ title: key, key });
if (i < y) {
children.push(key);
}
}
if (_level < 0) {
return tns;
}
const level = _level - 1;
children.forEach((key, index) => {
tns[index].children = [];
return generateData(level, key, tns[index].children);
});
};
generateData(z);
const dataList: TreeProps['treeData'] = [];
const generateList = (data: TreeProps['treeData']) => {
for (let i = 0; i < data.length; i++) {
const node = data[i];
const key = node.key;
dataList.push({ key, title: key });
if (node.children) {
generateList(node.children);
}
}
};
generateList(genData);
const getParentKey = (
key: string | number,
tree: TreeProps['treeData'],
): string | number | undefined => {
let parentKey;
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.children) {
if (node.children.some((item) => item.key === key)) {
parentKey = node.key;
} else if (getParentKey(key, node.children)) {
parentKey = getParentKey(key, node.children);
}
}
}
return parentKey;
};
const expandedKeys = ref<(string | number)[]>(['0-0']);
const selectedKeys = ref<string[]>(['0-0-0']);
const searchValue = ref<string>('');
const autoExpandParent = ref<boolean>(true);
const gData = ref<TreeProps['treeData']>(genData);
const onExpand = (keys: string[]) => {
expandedKeys.value = keys;
autoExpandParent.value = false;
};
// 被选中的树节点
const energyType = ref();
const onSelect = (selectedKey: string[], info: any) => {
selectedKeys.value = selectedKey;
if (info.selected) {
energyType.value = info.node.id;
statsId.value = info.node.id;
mainRef.value?.nsTableRef.reload();
}
};
watch(searchValue, (value) => {
const expanded = dataList
.map((item: TreeProps['treeData'][number]) => {
if (item.title.indexOf(value) > -1) {
return getParentKey(item.key, gData.value);
}
return null;
})
.filter((item, i, self) => item && self.indexOf(item) === i);
expandedKeys.value = expanded;
searchValue.value = value;
autoExpandParent.value = true;
});
// 查询因子分类树数据
const onSearchTreeData = () => {};
const statsId = ref();
// 获取因子分类树数据
const getTreeData = () => {
fetch(quickCalculation.carbonQuickTree, { orgId: orgId.value }).then((res) => {
gData.value = res.data;
energyType.value = gData.value[0].children[0].id;
statsId.value = gData.value[0].children[0].id;
mainRef.value?.nsTableRef.reload();
});
};
getTreeData();
// 列表数据
const total = ref<number>();
const queryParams = ref({
pageNum: 1,
pageSize: 10,
orgId: orgId.value,
});
const tableData = ref([]);
const emissionSources = ref();
const tableConfig = ref({
title: '排放因子库',
api: quickCalculation.queryCarbonEmissionPage,
params: {
orgId,
energyType,
},
headerActions: [
{
label: '新增',
name: 'userAdd',
type: 'primary',
handle: () => {
visible.value = true;
// getNewTable();
},
},
],
columns: [
{
title: '序号',
customRender: (text: any) => {
return text.index + 1;
},
},
{
title: '因子值',
dataIndex: 'emissionFactors',
},
{
title: '计量单位',
className: 'carbonEmissionSuffix',
dataIndex: 'carbonEmissionSuffix',
},
{
title: '更新时间',
className: 'updateTime',
dataIndex: 'updateTime',
ellipsis: true,
},
{
title: '启用时间',
className: 'startTime',
dataIndex: 'startTime',
},
{
title: '结束时间',
className: 'endTime',
dataIndex: 'endTime',
},
{
title: '数据来源',
className: 'dataSources',
dataIndex: 'dataSources',
},
],
columnActions: {
title: '操作',
actions: [
{
label: '编辑',
name: 'userEdit',
handle: (record: any) => {
selectedRowKeys.value = [record.factorId];
formState.value.id = record.id;
formState.value.emissionFactors = record.emissionFactors;
formState.value.dateRange = [record.startTime, record.endTime];
formState.value.factorId = record.factorId;
visible.value = true;
emissionSources.value = record.emissionSources;
queryData.value.emissionSources = emissionSources.value;
getNewTable();
},
},
{
label: '删除',
name: 'userDelete',
dynamicParams: { id: 'id' },
confirm: true,
isReload: true,
api: quickCalculation.del,
},
],
},
rowKey: 'id',
});
defineExpose({
getTreeData,
});
// 获取列表数据
const getTableList = () => {
fetch(quickCalculation.queryCarbonEmissionPage, queryParams.value).then((res) => {
tableData.value = res.data.records;
total.value = res.data.total;
});
};
// 分页器
const onChange = (pageNumber: number, size: number) => {
queryParams.value.pageNum = pageNumber;
queryParams.value.pageSize = size;
mainRef.value?.nsTableRef.reload();
};
// 新增/编辑
const formRef = ref();
const labelCol = { span: 6 };
const wrapperCol = { span: 18 };
const formState = ref({
orgId: orgId.value,
});
const visible = ref(false);
// 定义form表单的必填
const rules: Record<string, Rule[]> = {
dateRange: [{ required: true, message: '请选择日期范围', trigger: 'change' }],
emissionFactors: [{ required: true, message: '请输入能源种类', trigger: 'change' }],
};
// 点击新增按钮
const addNewData = () => {
visible.value = true;
// getNewTable();
};
// 获取新增页面的列表
const selectedRowKeys = ref([]);
const onSelectionChange = (selectedKeys, selectedRows) => {
selectedRowKeys.value = selectedKeys;
formState.value.emissionFactors = selectedRows[0].emissionFactors;
formState.value.factorId = selectedRows[0].id;
};
const queryData = ref({
orgId: orgId.value,
pageNum: 1,
pageSize: 999,
});
const newTableData = ref([]);
const getNewTable = () => {
fetch(carbonEmissionFactorLibrary.getTableList, queryData.value).then((res) => {
newTableData.value = res.data.records;
});
};
const selectData = ref();
const keyChange = () => {
if (selectData.value === '') {
queryData.value.emissionSources = emissionSources.value;
} else {
queryData.value.emissionSources = selectData.value;
}
getNewTable();
};
// 点击编辑按钮
const editData = (record) => {
selectedRowKeys.value = [record.factorId];
formState.value.id = record.id;
formState.value.emissionFactors = record.emissionFactors;
formState.value.dateRange = [record.startTime, record.endTime];
formState.value.factorId = record.factorId;
visible.value = true;
getNewTable();
};
// 点击确定提交
const onSubmit = () => {
formRef.value
.validate()
.then(() => {
formState.value.statsId = statsId.value;
formState.value.startTime = formState.value.dateRange[0];
formState.value.endTime = formState.value.dateRange[1];
console.log('values', formState, toRaw(formState));
if (formState.value.id) {
fetch(quickCalculation.update, formState.value).then((res) => {
visible.value = false;
selectedRowKeys.value = [];
formState.value = {};
formRef.value.resetFields();
mainRef.value?.nsTableRef.reload();
});
} else {
fetch(quickCalculation.creat, formState.value).then((res) => {
visible.value = false;
selectedRowKeys.value = [];
formState.value = {};
formRef.value.resetFields();
mainRef.value?.nsTableRef.reload();
});
}
})
.catch((error) => {
console.log('error', error);
});
};
// 删除数据
const delData = (record) => {
Modal.confirm({
title: '警告',
content: '确定要删除吗?',
okText: '确定',
okType: 'primary',
cancelText: '取消',
onOk() {
fetch(quickCalculation.del, { id: record.id }).then((res) => {
message.success('操作成功！');
getTableList();
});
},
onCancel() {
console.log('Cancel');
},
});
};
// 关闭新增抽屉
const onClose = () => {
visible.value = false;
selectedRowKeys.value = [];
formState.value = {};
formRef.value.resetFields();
};
</script>
<style lang="less" scoped>
.main {
background-color: @ns-content-bg;
display: flex;
height: 100%;
}
.left {
width: 300px;
margin-right: @ns-gap;
min-width: fit-content;
> div {
background-color: @white;
flex: 1;
}
display: flex;
flex-direction: column;
.top {
position: relative;
.addTreeNode {
width: 100%;
padding: 16px;
position: absolute;
bottom: 0;
}
}
}
.right {
flex: 1;
min-width: 0;
height: 100%;
background: #ffffff;
}
:deep(.ant-table-container) {
padding: 0px 16px;
}
:deep(.ns-table-main) {
margin-top: unset !important;
}
.top {
overflow: auto;
}
.ns-form-title {
font-weight: bold;
user-select: text;
padding: 16px;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px solid #e9e9e9;
}
.title {
text-align: left;
height: 32px;
line-height: 32px;
font-weight: bold;
user-select: text;
position: relative;
padding-left: 9px;
}
.title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
height: 13px;
width: 3px;
border-radius: 1px;
background-color: #2778ff;
}
:deep(.ant-table-title) {
display: flex;
height: 100%;
align-items: center;
}
.ns-table-title {
font-weight: bold;
}
.buttonGroup {
margin-left: 1vw;
width: 5vw;
display: flex;
justify-content: space-around;
}
</style>
<style scoped>
th.column-money,
td.column-money {
text-align: right !important;
}
</style>

14
hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/quickCalculation/index.vue
View File

@@ -66,14 +66,14 @@
:model="tableData"
ref="mainRef"
:scroll="{ x: 1000 }" />
<a-pagination
<!-- <a-pagination
:current="queryParams.pageNum"
:total="total"
:page-size="queryParams.pageSize"
style="display: flex; justify-content: center; margin-top: 16px"
:show-size-changer="true"
:show-quick-jumper="true"
@change="onChange" />
@change="onChange" /> -->
<!-- 新增/编辑 -->
<a-drawer
:width="500"
@@ -499,14 +499,19 @@
background-color: @ns-content-bg;
display: flex;
height: 100%;
padding: 16px;
}
.left {
width: 300px;
margin-right: @ns-gap;
min-width: fit-content;
border-radius: 8px;
background: rgba(255, 255, 255, 1);
box-shadow: 0px 2px 20px rgb(69 123 234 / 20%);
> div {
background-color: @white;
flex: 1;
border-radius: 8px;
}
display: flex;
@@ -526,6 +531,11 @@
min-width: 0;
height: 100%;
background: #ffffff;
border-radius: 8px !important;
box-shadow: 0px 2px 20px rgb(69 123 234 / 20%);
:deep(.ns-table-main) {
border-radius: 8px !important;
}
}
:deep(.ant-table-container) {
padding: 0px 16px;

61
hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/fillInPage/index.vue
View File

@@ -248,7 +248,7 @@
</a-drawer>
<!-- 点击编辑弹出框 -->
<a-drawer
:width="700"
:width="500"
:visible="editData"
:body-style="{ paddingBottom: '80px' }"
:footer-style="{ textAlign: 'right' }"
@@ -260,7 +260,7 @@
:label-col="labelCol"
:wrapper-col="wrapperCol">
<a-row>
<a-col :span="12">
<a-col :span="24">
<a-form-item ref="name" label="数据来源" name="dataSources">
<a-select
ref="select"
@@ -272,14 +272,14 @@
</a-select>
</a-form-item>
</a-col>
<a-col :span="12">
<a-col :span="24">
<a-form-item ref="name" label="消耗量" name="consumption">
<ns-input v-model:value="editFormState.consumption" :disabled="canEdit" />
</a-form-item>
</a-col>
</a-row>
<a-row v-if="automatic">
<a-col :span="12">
<a-col :span="24">
<a-form-item ref="name" label="采集节点" name="collectionNode">
<a-tree-select
v-model:value="editFormState.collectionNode"
@@ -291,12 +291,12 @@
</a-col>
</a-row>
<a-row>
<a-col :span="12">
<a-col :span="24">
<a-form-item ref="name" label="因子值" name="factorId">
<ns-input v-model:value="editFormState.factorId" />
</a-form-item>
</a-col>
<a-col :span="12">
<a-col :span="24">
<a-form-item ref="name" label="关键字" name="emissionFactors">
<a-input-search
v-model:value="editFormState.emissionFactors"
@@ -325,24 +325,14 @@
:current="queryData.pageNum"
:total="total"
:page-size="queryData.pageSize"
:pageSizeOptions="['5']"
style="display: flex; justify-content: center; margin-top: 16px"
:show-size-changer="true"
:show-quick-jumper="true"
@change="onChange" />
<!-- <a-upload
v-model:file-list="fileList"
name="file"
accept=".jpg,.jpeg,.png,.gif,.bmp,.pdf"
@remove="handleFileRemove"
:before-upload="beforeUpload"
@change="handleChange">
<a-button>
<upload-outlined></upload-outlined>
点击上传凭证
</a-button>
</a-upload> -->
<a-upload-dragger
v-model:fileList="fileList"
accept=".pdf"
name="file"
@remove="handleFileRemove"
:before-upload="beforeUpload"
@@ -365,7 +355,7 @@
<script lang="ts" setup>
import { ref, watch, toRaw, defineEmits, nextTick } from 'vue';
import { http } from '/nerv-lib/util/http';
import { Pagination, Modal, message } from 'ant-design-vue';
import { Pagination, Modal, message, Upload } from 'ant-design-vue';
import type { TreeProps, UploadChangeParam } from 'ant-design-vue';
import {
EditOutlined,
@@ -935,7 +925,7 @@
const queryData = ref({
orgId: orgId.value,
pageNum: 1,
pageSize: 10,
pageSize: 5,
});
const edit = (record) => {
getDictList();
@@ -975,6 +965,8 @@
if (value === '3') {
canEdit.value = true;
automatic.value = true;
} else {
automatic.value = false;
}
};
// 定义采集节点数的变量
@@ -997,24 +989,31 @@
},
);
};
const selectNode = (value) => {
debugger;
};
// 上传附件
const fileList = ref<UploadProps['fileList']>([]);
const isValidFileName = (filename: string): boolean => {
const regex = /^[\s\S]+_\d{4}\.pdf$/;
return regex.test(filename);
};
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
const filename = file.name;
if (!isValidFileName(filename)) {
message.error('文件名不符合规则');
return Upload.LIST_IGNORE; // 阻止文件上传
}
return false;
};
const handleChange = (info: UploadChangeParam) => {
fileList.value = [...info.fileList];
if (info.file.status !== 'uploading') {
console.log(info.file, info.fileList);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} 文件上传成功`);
} else if (info.file.status === 'error') {
message.error(`${info.file.name} 文件上传失败`);
// fileList.value = [...info.fileList];
const { fileList: newFileList } = info;
delIds.value.push(info.fileList[0].uid);
// 删除fileList中的第一条数据
if (newFileList.length > 1) {
newFileList.shift(); // 删除第一条数据
}
// 更新fileList
fileList.value = [...newFileList];
};
const delIds = ref([]);
const handleFileRemove = (file) => {

29
hx-ai-intelligent/src/view/carbonEmissionManage/carbonInventoryCheck/index.vue
View File

@@ -68,8 +68,8 @@
const orgId = ref('');
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
const fetch = (api, params = { orgId }) => {
return http.post(api, params);
const fetch = (api, params = { orgId }, config) => {
return http.post(api, params, config);
};
// 判断展示哪个页面
const isMainPage = ref(true);
@@ -205,7 +205,30 @@
{
label: '下载',
name: 'download',
handle: (record: any) => {},
handle: (record: any) => {
const deleteId = ref(new FormData());
deleteId.value.append('id', record.id);
const config = {
responseType: 'blob',
};
fetch(carbonInventoryCheck.downloadZip, deleteId.value, config)
.then((res) => {
// 创建一个 URL 对象，指向图片数据的 blob
const url = window.URL.createObjectURL(new Blob([res]));
// 创建一个 <a> 标签，用于触发下载
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', '碳盘查凭证.zip'); // 设置下载的文件名
document.body.appendChild(link);
link.click();
// 清理 URL 对象
window.URL.revokeObjectURL(url);
})
.catch((error) => {
console.error('下载图片失败：', error);
});
},
},
{
label: '删除',

88
hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/all/index.vue
View File

@@ -100,8 +100,20 @@
const drawEcharts = () => {
data.value.forEach((item, index) => {
const chart = echarts.init(document.getElementById(`ydlChart_${index}`)!);
const handred = 100;
const bottomColor = [
'rgba(219, 222, 232, 1)',
'rgba(221, 226, 223, 1)',
'rgba(233, 228, 219, 1)',
'rgba(221, 216, 235, 1)',
'rgba(240, 228, 228, 1)',
];
const mianColor = [
'rgba(24, 106, 255, 1)',
'rgba(58, 194, 127, 1)',
'rgba(249, 183, 50, 1)',
'rgba(120, 76, 212, 1)',
'rgba(255, 55, 103, 1)',
];
let point = parseInt(item.budgetAchievement.replace('%', ''));
const option = {
backgroundColor: 'transparent',
@@ -127,55 +139,61 @@
},
},
],
// tooltip: {
// formatter: function (params) {
// return params.name + '：' + params.percent + ' %';
// },
// },
series: [
{
name: 'circle',
type: 'pie',
clockWise: true,
radius: ['40%', '50%'],
center: ['50%', '40%'],
itemStyle: {
label: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
show: false,
},
},
hoverAnimation: false,
data: [
{
value: point,
name: '占比',
name: '',
value: 100,
itemStyle: {
normal: {
color: '#4FADFD',
label: {
show: false,
},
labelLine: {
show: false,
},
},
},
},
{
name: '剩余',
value: handred - point,
itemStyle: {
normal: {
color: '#E1E8EE',
color: bottomColor[index],
},
},
},
],
zlevel: 1,
},
{
name: 'main',
type: 'pie',
radius: ['38%', '55%'],
center: ['50%', '40%'],
data: [
{
value: point,
label: {
show: true,
position: 'center',
fontSize: 40,
},
labelLine: { show: false },
itemStyle: {
normal: {
color: mianColor[index],
shadowBlur: 10,
shadowColor: mianColor[index],
},
},
},
{
value: 100 - point,
itemStyle: {
normal: {
color: 'transparent',
},
},
},
],
zlevel: 2,
},
],
};

49
hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/categoryDeatil.vue
View File

@@ -459,7 +459,26 @@
barWidth: 18,
itemStyle: {
normal: {
color: '#6395f9',
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(45, 178, 246, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 255, 255, 0)', // 100% 处的颜色
},
],
false,
),
borderWidth: 2,
borderColor: 'rgba(45, 178, 246, 1)',
padding: 0,
},
},
data: lastYearActualUsageList.value,
@@ -469,9 +488,26 @@
type: 'bar',
barWidth: 18,
itemStyle: {
normal: {
color: '#62daab',
},
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(28, 184, 142, 1)', // 0% 处的颜色
},
{
offset: 1,
color: 'rgba(255, 255, 255, 0)', // 100% 处的颜色
},
],
false,
),
borderWidth: 2,
borderColor: 'rgba(28, 184, 142, 1)',
padding: 0,
},
data: actualUsageList.value,
},
@@ -481,7 +517,7 @@
smooth: true, // 开启平滑曲线
symbol: 'none', //标记的图形为实心圆
lineStyle: {
color: '#f4664a',
color: 'rgba(255, 188, 70, 1)',
width: 2,
},
data: budgetList.value,
@@ -492,7 +528,7 @@
smooth: true, // 开启平滑曲线
symbol: 'none', //标记的图形为实心圆
lineStyle: {
color: '#f4664a',
color: 'rgba(195, 142, 255, 1)',
width: 2,
},
data: referenceValueList.value,
@@ -559,6 +595,7 @@
.contant {
width: 100%;
height: calc(100% - 5vh);
overflow: auto;
.chartsPart {
width: 100%;
height: 63%;

36
hx-ai-intelligent/src/view/carbonEmissionManage/carbonPlanning/category/index.vue
View File

@@ -260,25 +260,45 @@
series: [
{
name: '实际用量',
type: 'bar',
barWidth: 18,
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
color: '#6395f9',
},
symbolRepeat: true,
symbolSize: [14, 4],
symbolMargin: 0.5,
symbolPosition: 'start',
z: -20,
data: actualUsage.value,
label: {
normal: {
color: '#6395f9',
show: false,
position: 'top',
verticalAlign: 'top',
},
},
data: actualUsage.value,
},
{
name: '预算量',
type: 'bar',
barWidth: 18,
type: 'pictorialBar',
symbol: 'rect',
itemStyle: {
color: '#62daab',
},
symbolRepeat: true,
symbolSize: [14, 4],
symbolMargin: 0.5,
symbolPosition: 'start',
z: -20,
data: budget.value,
label: {
normal: {
color: '#62daab',
show: false,
position: 'top',
verticalAlign: 'top',
},
},
data: budget.value,
},
{
name: '基准线',