fks-xuxinyue
3 months ago
12 changed files with 882 additions and 1053 deletions
@ -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> |
|
||||
@ -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> |
||||
Loading…
Reference in new issue