You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
596 lines
19 KiB
596 lines
19 KiB
<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}" />
|
|
<!-- <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="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>
|
|
<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>
|
|
</div>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref,reactive, toRaw } from 'vue';
|
|
import type { UnwrapRef } from 'vue';
|
|
import type { Rule } from 'ant-design-vue/es/form';
|
|
import { Pagination,message,Modal } from 'ant-design-vue';
|
|
import { InboxOutlined } from '@ant-design/icons-vue';
|
|
import type { CascaderProps,TreeSelectProps,UploadChangeParam } from 'ant-design-vue';
|
|
import { NsMessage } from '/nerv-lib/component';
|
|
import dayjs, { Dayjs } from 'dayjs';
|
|
import { http } from '/nerv-lib/util/http';
|
|
import { tableColumns } from '../config';
|
|
import { energyConsumption,carbonEmissionFactorLibrary } from '/@/api/carbonEmissionFactorLibrary';
|
|
import { group } from '/@/api/deviceManage';
|
|
import { dict } from '/@/api';
|
|
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 } ) => {
|
|
return http.post(api, params);
|
|
};
|
|
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' }]
|
|
};
|
|
// 排放类型的变量
|
|
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',
|
|
name: 'userExports',
|
|
},
|
|
{
|
|
label: '上传凭证',
|
|
type: 'primary',
|
|
handle: () => {
|
|
openUpload.value = true;
|
|
},
|
|
},
|
|
{
|
|
label: '凭证下载',
|
|
type: 'primary',
|
|
name: 'userExports',
|
|
},
|
|
],
|
|
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, record }) => ({
|
|
// children: text,
|
|
// attrs: {
|
|
// style: record.janFlag === 1 ? 'color: red' : 'color: blue'
|
|
// }
|
|
// })
|
|
},
|
|
{
|
|
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.unit) {
|
|
let selectDevice = ref([Number(res.data.unit)]);
|
|
findParentIds(measurementUnit.value, res.data.unit, selectDevice.value);
|
|
res.data.unit = selectDevice
|
|
}
|
|
formState.value = res.data
|
|
});
|
|
},
|
|
},
|
|
{
|
|
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',
|
|
});
|
|
// 定义一个递归函数来查找每一级的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 changeRadio = (e) => {
|
|
if(e.target.value === 0){
|
|
isRequired.value = true
|
|
}else{
|
|
isRequired.value = false
|
|
}
|
|
};
|
|
// 点击确定提交
|
|
const onSubmit = () => {
|
|
formRef.value
|
|
.validate()
|
|
.then(() => {
|
|
console.log('values', formState, toRaw(formState));
|
|
if(formState.value.unit){
|
|
formState.value.unit = formState.value.unit.join(',').split(',')[1]
|
|
}
|
|
if(formState.value.id){
|
|
fetch(energyConsumption.update , formState.value).then((res) => {
|
|
visible.value = false
|
|
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
|
|
NsMessage.warning(res.data);
|
|
}else{
|
|
visible.value = false
|
|
formState.value = {
|
|
orgId: orgId.value,
|
|
}
|
|
message.success('操作成功！');
|
|
mainRef.value?.nsTableRef.reload();
|
|
}
|
|
});
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.log('error', error);
|
|
});
|
|
};
|
|
// 获取字典值
|
|
const getDictList = () => {
|
|
// 获取排放类型的数据
|
|
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;
|
|
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([]);
|
|
const handleChange = (info: UploadChangeParam) => {
|
|
const status = info.file.status;
|
|
if (status !== 'uploading') {
|
|
console.log(info.file, info.fileList);
|
|
}
|
|
if (status === 'done') {
|
|
message.success(`${info.file.name} 文件上传成功`);
|
|
} else if (status === 'error') {
|
|
message.error(`${info.file.name} 文件上传失败`);
|
|
}
|
|
};
|
|
function handleDrop(e: DragEvent) {
|
|
console.log(e);
|
|
}
|
|
// 关闭上传凭证弹窗
|
|
const closeOpenUpload = () =>{
|
|
openUpload.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>
|