Merge branch 'temp' of http://123.60.103.97:3000/xuziqiang/SaaS-lib into temp
This commit is contained in:
BIN
hx-ai-intelligent/public/asset/file/emissionSource.xlsx
Normal file
BIN
hx-ai-intelligent/public/asset/file/emissionSource.xlsx
Normal file
Binary file not shown.
@@ -26,6 +26,7 @@ export enum energyConsumption {
|
||||
update = '/carbon-smart/api/carbon/stats/update',
|
||||
del = '/carbon-smart/api/carbon/stats/del',
|
||||
voucherDownloadList = '/carbon-smart/api/carbon/stats/voucherDownloadList',
|
||||
energyAcquisition = '/carbon-smart/api/carbon/stats/energyAcquisition',
|
||||
}
|
||||
// 碳排管理-碳排速算接口
|
||||
export enum quickCalculation {
|
||||
|
@@ -644,8 +644,8 @@
|
||||
params: {
|
||||
orgId,
|
||||
},
|
||||
title: '设备信息', // 弹窗title
|
||||
templateName: 'whiteListUser', // 所使用的文件名称
|
||||
title: '排放源', // 弹窗title
|
||||
templateName: 'emissionSource', // 所使用的文件名称
|
||||
indexName: '设备id', // 匹配类型字段
|
||||
message: [
|
||||
{ label: '1、若必填项未填写,则不能进行导入操作' },
|
||||
|
@@ -0,0 +1,952 @@
|
||||
<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>
|
@@ -32,15 +32,10 @@
|
||||
:model="data"
|
||||
ref="mainRef"
|
||||
:scroll="{ x: 1500, y: 350 }">
|
||||
<!-- <template #bodyCell="{ record, column }">
|
||||
<template v-if="column.dataIndex === 'enableRules'">
|
||||
<a-switch
|
||||
:checked="record.enableRules === 1 ? true : false"
|
||||
:class="{
|
||||
'blue-background': record.enableRules === 1 ? true : false,
|
||||
'grey-background': record.enableRules === 1 ? false : true,
|
||||
}"
|
||||
@click="clickSwitch({ enableRules: record.enableRules, record: record })" />
|
||||
<!-- <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>
|
||||
@@ -60,18 +55,29 @@
|
||||
:footer-style="{ textAlign: 'right' }"
|
||||
destroyOnClose
|
||||
@close="onClose">
|
||||
<div class="ns-form-title"><div class="title">能源种类</div></div>
|
||||
<a-form
|
||||
ref="formRef"
|
||||
:model="formState"
|
||||
:rules="rules"
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol">
|
||||
<a-form-item ref="name" label="能源种类" name="energyType">
|
||||
<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"
|
||||
@@ -92,7 +98,8 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-row>
|
||||
</a-form>
|
||||
<!-- <a-row>
|
||||
<a-col :span="24" style="display: flex; justify-content: space-around">
|
||||
<a-form-item
|
||||
label="1月"
|
||||
@@ -221,22 +228,35 @@
|
||||
: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>
|
||||
</a-row> -->
|
||||
<div class="ns-form-title"><div class="title">能耗统计</div></div>
|
||||
<a-table :columns="addColumns" :data-source="addData" size="small" :pagination="false">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
<a-switch
|
||||
:checked="record.age === 1 ? true : false"
|
||||
:class="{
|
||||
'blue-background': record.age === 1 ? true : false,
|
||||
'grey-background': record.age === 1 ? false : true,
|
||||
}"
|
||||
@click="changeSwitch(record)" />
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<div class="ns-form-title"><div class="title">凭证上传</div></div>
|
||||
<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>
|
||||
|
||||
<template #footer>
|
||||
<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
|
||||
<a-button type="primary" @click="onSubmit">确定</a-button>
|
||||
@@ -304,12 +324,14 @@
|
||||
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一致缓存才可生效
|
||||
@@ -320,8 +342,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 selectYear = ref<Dayjs>(dayjs(new Date().getFullYear().toString()));
|
||||
const total = ref<number>();
|
||||
@@ -392,6 +414,7 @@
|
||||
type: 'primary',
|
||||
handle: () => {
|
||||
getDictList();
|
||||
getSummaryMethod();
|
||||
visible.value = true;
|
||||
},
|
||||
},
|
||||
@@ -451,12 +474,9 @@
|
||||
{
|
||||
title: '1月',
|
||||
dataIndex: 'jan',
|
||||
// customRender: ({ text, record }) => ({
|
||||
// children: text,
|
||||
// attrs: {
|
||||
// style: record.janFlag === 1 ? 'color: red' : 'color: blue'
|
||||
// }
|
||||
// })
|
||||
// customRender: ({ text }: { text: string }) => {
|
||||
// return <span :style="{ color: getColor(text) }">{text}</span>;
|
||||
// }
|
||||
},
|
||||
{
|
||||
title: '2月',
|
||||
@@ -568,7 +588,39 @@
|
||||
},
|
||||
rowKey: 'id',
|
||||
});
|
||||
|
||||
const getColor = (value: string | number): string => {
|
||||
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';
|
||||
};
|
||||
const getSummaryMethod = () => {
|
||||
fetch(energyConsumption.energyAcquisition, { orgId: orgId.value }).then((res) => {
|
||||
addData.value = res.data.records;
|
||||
});
|
||||
};
|
||||
const addColumns = [
|
||||
{ title: '月份', dataIndex: 'key' },
|
||||
{ title: '汇总方式', dataIndex: 'name' },
|
||||
{ title: '操作', key: 'action', dataIndex: 'age' },
|
||||
];
|
||||
const addData = ref([]);
|
||||
//开关
|
||||
const changeSwitch = (data: any) => {
|
||||
data.age = data.age === 1 ? 0 : 1;
|
||||
data.name = data.age === 1 ? '自动' : '手动';
|
||||
addData.value = [...addData.value];
|
||||
console.log(addData.value);
|
||||
};
|
||||
defineExpose({
|
||||
mainRef,
|
||||
});
|
||||
@@ -700,8 +752,12 @@
|
||||
console.log('error', error);
|
||||
});
|
||||
};
|
||||
const energyTypeOptions = ref([]);
|
||||
// 获取字典值
|
||||
const getDictList = () => {
|
||||
const getDictList = async () => {
|
||||
// 获取能耗类型
|
||||
const options = await dict({ params: { dicKey: 'ENERGY_TYPE' } });
|
||||
energyTypeOptions.value = options.data.data;
|
||||
// 获取排放类型的数据
|
||||
fetch(energyConsumption.getDicList, { grp: 'EMISSION_TYPE' }).then((res) => {
|
||||
emissionTypeDic.value = res.data;
|
||||
@@ -854,10 +910,16 @@
|
||||
const downLoad = (record) => {
|
||||
const deleteId = ref(new FormData());
|
||||
deleteId.value.append('id', record.id);
|
||||
fetch(uploadPic.download, deleteId.value)
|
||||
const config = {
|
||||
headers: {
|
||||
responseType: 'blob',
|
||||
},
|
||||
};
|
||||
fetch(uploadPic.download, deleteId.value, config)
|
||||
.then((res) => {
|
||||
debugger
|
||||
// 创建一个 URL 对象,指向图片数据的 blob
|
||||
const url = window.URL.createObjectURL(new Blob([res.data]));
|
||||
const url = window.URL.createObjectURL(new Blob([res]));
|
||||
// 创建一个 <a> 标签,用于触发下载
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
@@ -884,20 +946,20 @@
|
||||
// 创建一个 <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 = []
|
||||
selectedRowKeysSet.value = [];
|
||||
downLoadVisible.value = false;
|
||||
};
|
||||
</script>
|
||||
@@ -914,6 +976,51 @@
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.ns-form-title {
|
||||
font-weight: bold;
|
||||
user-select: text;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.blue-background.ant-switch-checked {
|
||||
background-color: linear-gradient(
|
||||
180deg,
|
||||
rgba(1, 206, 255, 1) 0%,
|
||||
rgba(57, 215, 187, 1) 100%
|
||||
) !important;
|
||||
}
|
||||
.blue-background.ant-switch-checked .ant-switch-handle {
|
||||
background-color: linear-gradient(
|
||||
180deg,
|
||||
rgba(1, 206, 255, 1) 0%,
|
||||
rgba(57, 215, 187, 1) 100%
|
||||
) !important;
|
||||
}
|
||||
.grey-background.ant-switch {
|
||||
background-color: rgba(238, 238, 238, 1) !important;
|
||||
}
|
||||
.grey-background.ant-switch .ant-switch-handle {
|
||||
background-color: rgba(238, 238, 238, 1) !important;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
th.column-money,
|
||||
|
@@ -72,7 +72,7 @@
|
||||
@change="onChange" />
|
||||
<!-- 新增/编辑 -->
|
||||
<a-drawer
|
||||
:width="700"
|
||||
:width="500"
|
||||
:visible="visible"
|
||||
:body-style="{ paddingBottom: '80px' }"
|
||||
:footer-style="{ textAlign: 'right' }"
|
||||
@@ -85,7 +85,7 @@
|
||||
:label-col="labelCol"
|
||||
:wrapper-col="wrapperCol">
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-col :span="24">
|
||||
<a-form-item ref="name" label="日期范围" name="dateRange">
|
||||
<a-range-picker
|
||||
v-model:value="formState.dateRange"
|
||||
@@ -93,16 +93,21 @@
|
||||
valueFormat="YYYY-MM" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<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" label="关键词">
|
||||
<ns-input v-model:value="selectData" @change="keyChange" />
|
||||
<a-form-item ref="name">
|
||||
<ns-input style="margin-top: 5px;" v-model:value="selectData" @change="keyChange" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
File diff suppressed because it is too large
Load Diff
@@ -45,7 +45,7 @@
|
||||
</template>
|
||||
</a-tree>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<!-- <div class="bottom">
|
||||
<a-form style="width: 100%; margin: 0 auto">
|
||||
<div class="ns-form-title"><div class="title">报告相关</div></div>
|
||||
<div class="button" style="padding: 0 16px !important">
|
||||
@@ -53,80 +53,82 @@
|
||||
<div :class="{ tplx: isClickedTplx }" @click="showTplx">碳排流向</div>
|
||||
</div>
|
||||
</a-form>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="right">
|
||||
<div style="display: flex">
|
||||
<div class="ns-table-title ns-title-extra-box">排放源</div>
|
||||
<a-button type="primary" style="margin-left: 12px" @click="changeParentData">返回</a-button>
|
||||
</div>
|
||||
<div style="display: flex; height: 100%" v-if="fillInPage">
|
||||
<div class="mainLeft">
|
||||
<a-tree
|
||||
:expandedKeys="expandedKeysR"
|
||||
:selectedKeys="selectedKeysR"
|
||||
:checkedKeys="checkedKeys"
|
||||
:tree-data="treeData"
|
||||
@select="onSelectR"
|
||||
block-node>
|
||||
<template #title="data">
|
||||
<div class="treeRow">
|
||||
<div>
|
||||
<span>{{ data.emissionSource }}</span>
|
||||
</div>
|
||||
<div class="actionMore">
|
||||
<EditOutlined @click="editUnit(data)" />
|
||||
<MinusCircleOutlined style="margin-left: 6px" @click="delUnit(data)" />
|
||||
</div>
|
||||
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange" style="height: 100%">
|
||||
<a-tab-pane key="1" tab="排放源">
|
||||
<div style="display: flex; height: 100%">
|
||||
<div class="mainLeft">
|
||||
<a-tree
|
||||
:expandedKeys="expandedKeysR"
|
||||
:selectedKeys="selectedKeysR"
|
||||
:checkedKeys="checkedKeys"
|
||||
:tree-data="treeData"
|
||||
@select="onSelectR"
|
||||
block-node>
|
||||
<template #title="data">
|
||||
<div class="treeRow">
|
||||
<div>
|
||||
<span>{{ data.emissionSource }}</span>
|
||||
</div>
|
||||
<div class="actionMore">
|
||||
<EditOutlined @click="editUnit(data)" />
|
||||
<MinusCircleOutlined style="margin-left: 6px" @click="delUnit(data)" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</a-tree>
|
||||
<div class="addTreeNode">
|
||||
<a-button type="primary" style="width: 100%" @click="addTreeNodeData"
|
||||
>新增</a-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
</a-tree>
|
||||
<div class="addTreeNode">
|
||||
<a-button type="primary" style="width: 100%" @click="addTreeNodeData">新增</a-button>
|
||||
</div>
|
||||
<div class="mainRight">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="data"
|
||||
:pagination="false"
|
||||
bordered
|
||||
size="middle"
|
||||
:scroll="{ y: 500 }">
|
||||
<template #title>
|
||||
<a-button type="primary" @click="downLoadVoucher">凭证</a-button>
|
||||
</template>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="column.dataIndex === 'dataSources'">
|
||||
<span v-if="record.dataSources">{{ record.dataSources.label }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'carbonSource'">
|
||||
<span v-if="record.carbonSource">{{ record.carbonSource.label }}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<span>
|
||||
<a @click="edit(record)">编辑</a>
|
||||
</span>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mainRight">
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="2" tab="排放统计">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="data"
|
||||
:pagination="false"
|
||||
:columns="pftjColumn"
|
||||
:data-source="pftjData"
|
||||
bordered
|
||||
size="middle"
|
||||
:scroll="{ y: 480 }">
|
||||
<template #title>
|
||||
<a-button type="primary" @click="downLoadVoucher">凭证</a-button>
|
||||
</template>
|
||||
:pagination="false"
|
||||
:scroll="{ x: 2000, y: 500 }">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="column.dataIndex === 'dataSources'">
|
||||
<span v-if="record.dataSources">{{ record.dataSources.label }}</span>
|
||||
</template>
|
||||
<template v-if="column.dataIndex === 'carbonSource'">
|
||||
<span v-if="record.carbonSource">{{ record.carbonSource.label }}</span>
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<span>
|
||||
<a @click="edit(record)">编辑</a>
|
||||
</span>
|
||||
</template>
|
||||
{{ text || '-' }}
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="isClickedPftj">
|
||||
<a-table
|
||||
:columns="pftjColumn"
|
||||
:data-source="pftjData"
|
||||
bordered
|
||||
:pagination="false"
|
||||
:scroll="{ x: 2000 }">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
{{ text || '-' }}
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
<div v-if="isClickedTplx" style="width: 100%; height: 100%">
|
||||
<div ref="tplxChart" style="width: 100%; height: 68vh"></div>
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="碳排流向">
|
||||
<div ref="tplxChart" style="width: 100%; height: 68vh"></div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
</div>
|
||||
<!-- 类别配置 -->
|
||||
<a-drawer
|
||||
@@ -225,6 +227,7 @@
|
||||
:columns="voucherColumns"
|
||||
:data-source="voucherData"
|
||||
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectionChange }"
|
||||
rowKey="id"
|
||||
:pagination="false">
|
||||
<template #bodyCell="{ column, text }">
|
||||
<template v-if="column.dataIndex === 'name'">
|
||||
@@ -340,7 +343,7 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref, watch, toRaw, defineEmits } from 'vue';
|
||||
import { ref, watch, toRaw, defineEmits, nextTick } from 'vue';
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { Pagination, Modal, message } from 'ant-design-vue';
|
||||
import type { TreeProps, UploadChangeParam } from 'ant-design-vue';
|
||||
@@ -381,7 +384,7 @@
|
||||
type: String,
|
||||
},
|
||||
});
|
||||
|
||||
const activeKey = ref('1');
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
@@ -859,7 +862,33 @@
|
||||
};
|
||||
|
||||
const voucherData = ref([]);
|
||||
const downLoadMore = () => {
|
||||
const deleteIds = ref(new FormData());
|
||||
selectedRowKeys.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);
|
||||
onCloseVoucher();
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error('下载图片失败:', error);
|
||||
});
|
||||
};
|
||||
const onCloseVoucher = () => {
|
||||
selectedRowKeys.value = [];
|
||||
openVoucher.value = false;
|
||||
};
|
||||
// 点击编辑弹出框
|
||||
@@ -1361,6 +1390,20 @@
|
||||
chartInstance = echarts.init(tplxChart.value);
|
||||
chartInstance.setOption(option);
|
||||
};
|
||||
|
||||
const handleTabChange = (key) => {
|
||||
console.log('Tab changed:', key);
|
||||
// 在这里可以执行需要在页面切换时执行的逻辑
|
||||
if (key === '2') {
|
||||
nextTick(() => {
|
||||
getEmissionStatistic();
|
||||
});
|
||||
} else if (key === '3') {
|
||||
nextTick(() => {
|
||||
getCarbonFlowDirection();
|
||||
});
|
||||
}
|
||||
};
|
||||
// 点击返回
|
||||
const emit = defineEmits(['change-data']);
|
||||
const changeParentData = () => {
|
||||
@@ -1386,7 +1429,7 @@
|
||||
flex-direction: column;
|
||||
.top {
|
||||
position: relative;
|
||||
height: 80%;
|
||||
height: 100%;
|
||||
margin-bottom: 20px;
|
||||
.ns-form-title {
|
||||
font-weight: bold;
|
||||
@@ -1465,10 +1508,12 @@
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
padding: @ns-gap;
|
||||
background-color: @white;
|
||||
border-radius: @ns-border-radius;
|
||||
box-shadow: @ns-content-box-shadow;
|
||||
:deep(.ant-tabs-content-holder) {
|
||||
padding: 20px;
|
||||
}
|
||||
.ns-table-title {
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
|
@@ -41,7 +41,7 @@
|
||||
<div class="quantityTitle">基准值</div>
|
||||
</div>
|
||||
<div class="model">
|
||||
<div class="quantity">
|
||||
<div class="quantity" style="align-items: center; display: flex">
|
||||
<img
|
||||
width="20px"
|
||||
height="28px"
|
||||
@@ -278,8 +278,12 @@
|
||||
.validate()
|
||||
.then(() => {
|
||||
console.log('values', formState, toRaw(formState));
|
||||
if (formState.value.ids[0] === undefined) {
|
||||
if (formState.value.ids === undefined) {
|
||||
formState.value.ids = ids.value;
|
||||
} else {
|
||||
if (formState.value.ids[0] === undefined) {
|
||||
formState.value.ids = ids.value;
|
||||
}
|
||||
}
|
||||
fetch(carbonPlanning.batchOrUpdate, formState.value).then((res) => {
|
||||
open.value = false;
|
||||
@@ -314,7 +318,11 @@
|
||||
];
|
||||
const newTableData = ref([]);
|
||||
const setBasicData = () => {
|
||||
fetch(carbonPlanning.benchmarkSetting, { orgId: orgId.value }).then((res) => {
|
||||
fetch(carbonPlanning.benchmarkSetting, {
|
||||
orgId: orgId.value,
|
||||
type: props.type,
|
||||
itemizeId: props.parentId,
|
||||
}).then((res) => {
|
||||
newTableData.value = res.data;
|
||||
});
|
||||
visible.value = true;
|
||||
|
@@ -8,6 +8,7 @@
|
||||
v-if="selectedTime"
|
||||
style="margin-left: 5%"
|
||||
v-model:value="selectYearValue"
|
||||
:disabled-date="disabledDate"
|
||||
valueFormat="YYYY"
|
||||
@change="changeYear"
|
||||
picker="year" />
|
||||
@@ -35,6 +36,9 @@
|
||||
:data-source="data"
|
||||
bordered
|
||||
:pagination="false"
|
||||
row-key="itemizeId"
|
||||
:onRow="onRow"
|
||||
:customRow="customRow"
|
||||
:scroll="{ x: 1300, y: 250 }">
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<template v-if="column.key === 'action'">
|
||||
@@ -115,6 +119,10 @@
|
||||
const selectYearValue = ref<Dayjs>(dayjs(new Date().getFullYear().toString()));
|
||||
const selectMonthValue = ref<Dayjs>(dayjs().startOf('year').month(0));
|
||||
const electricTotal = ref(true);
|
||||
const disabledDate = (current: any) => {
|
||||
return current && current.year() > new Date().getFullYear();
|
||||
};
|
||||
|
||||
// 年/月切换
|
||||
const monthStyles = ref('background: #f2f2f2');
|
||||
const yearStyles = ref('background: #2778ff');
|
||||
@@ -127,7 +135,6 @@
|
||||
selectedTime.value = false;
|
||||
getMonthData();
|
||||
getBallQuery.value.yearAndMonth = 'month';
|
||||
getBallData();
|
||||
getMonthPillarData();
|
||||
};
|
||||
const changeToYear = () => {
|
||||
@@ -138,7 +145,6 @@
|
||||
selectedTime.value = true;
|
||||
getYearData();
|
||||
getBallQuery.value.yearAndMonth = 'year';
|
||||
getBallData();
|
||||
getYearPillarData();
|
||||
};
|
||||
// echarts图
|
||||
@@ -148,6 +154,7 @@
|
||||
orgId: orgId.value,
|
||||
type: props.tabId,
|
||||
year: selectYearValue.value.format('YYYY'),
|
||||
selectedMonth: selectMonthValue.value.format('YYYY-DD'),
|
||||
});
|
||||
const xAxisData = ref([]);
|
||||
const referenceValue = ref([]);
|
||||
@@ -160,6 +167,8 @@
|
||||
budget.value = res.data.budget;
|
||||
actualUsage.value = res.data.actualUsage;
|
||||
drawPillarChart();
|
||||
getBallQuery.value.selectActualUsage = res.data.selectActualUsage;
|
||||
getBallData();
|
||||
});
|
||||
};
|
||||
const getMonthPillarData = () => {
|
||||
@@ -169,6 +178,8 @@
|
||||
budget.value = res.data.budget;
|
||||
actualUsage.value = res.data.actualUsage;
|
||||
drawPillarChart();
|
||||
getBallQuery.value.selectActualUsage = res.data.selectActualUsage;
|
||||
getBallData();
|
||||
});
|
||||
};
|
||||
const drawPillarChart = () => {
|
||||
@@ -445,9 +456,11 @@
|
||||
});
|
||||
const changeYear = () => {
|
||||
yearQueryParams.value.year = selectYearValue.value;
|
||||
year.value = selectYearValue.value;
|
||||
getPillarQuery.value.year = selectYearValue.value;
|
||||
getBallQuery.value.year = selectYearValue.value;
|
||||
addTreeNode.value.year = selectYearValue.value;
|
||||
getYearData();
|
||||
getYearPillarData();
|
||||
};
|
||||
const getYearData = () => {
|
||||
fetch(carbonPlanning.searchListByYear, yearQueryParams.value).then((res) => {
|
||||
@@ -466,9 +479,10 @@
|
||||
});
|
||||
const changeMonth = () => {
|
||||
monthQueryParams.value.yearMonth = selectMonthValue.value;
|
||||
getPillarQuery.value.selectedMonth = selectMonthValue.value;
|
||||
getBallQuery.value.yearMonth = selectMonthValue.value;
|
||||
getMonthData();
|
||||
getBallData();
|
||||
getMonthPillarData();
|
||||
};
|
||||
const getMonthData = () => {
|
||||
fetch(carbonPlanning.searchListByMonth, monthQueryParams.value).then((res) => {
|
||||
@@ -489,6 +503,21 @@
|
||||
type.value = props.tabId;
|
||||
nodeName.value = record.itemizeName;
|
||||
};
|
||||
const customRow = (record) => {
|
||||
return {
|
||||
//点击 行 进行查看详情
|
||||
onClick: (event) => {
|
||||
getPillarQuery.value.itemizeId = record.itemizeId;
|
||||
getBallQuery.value.itemizeId = record.itemizeId;
|
||||
if (selectedTime.value) {
|
||||
getYearPillarData();
|
||||
} else {
|
||||
getMonthPillarData();
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
// 子页面点击返回
|
||||
const updateData = (type) => {
|
||||
electricTotal.value = type;
|
||||
|
@@ -78,7 +78,7 @@
|
||||
}
|
||||
});
|
||||
} else if (key === '5') {
|
||||
tabId.value = 4;
|
||||
tabId.value = 5;
|
||||
energyType.value = 'CARBON_EMISSIONS'
|
||||
nextTick(() => {
|
||||
if (carbonEmissionsRef.value) {
|
||||
@@ -87,7 +87,7 @@
|
||||
}
|
||||
});
|
||||
} else if (key === '6') {
|
||||
tabId.value = 5;
|
||||
tabId.value = 4;
|
||||
energyType.value = 'HEAT_SUPPLY'
|
||||
nextTick(() => {
|
||||
if (provideHotRef.value) {
|
||||
|
Reference in New Issue
Block a user