zhaohy
3 months ago
26 changed files with 1298 additions and 1217 deletions
@ -0,0 +1,10 @@ |
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="37.921875" height="30.218994140625" viewBox="0 0 37.921875 30.218994140625" fill="none"> |
|||
<path d="M37.6256 11.8506L0.296264 11.8506C0.133319 11.8506 0 11.9839 0 12.1469L0 21.9236C0 22.5791 0.529573 23.1086 1.18506 23.1086L17.4796 23.1086C17.6426 23.1086 17.7759 23.242 17.7759 23.4049L17.7759 26.3676C17.7759 26.5305 17.6426 26.6638 17.4796 26.6638L10.9618 26.6638C10.7988 26.6638 10.6655 26.7972 10.6655 26.9601L10.6655 28.8118C10.6655 28.9747 10.7988 29.108 10.9618 29.108L17.4796 29.108C17.6426 29.108 17.7759 29.2413 17.7759 29.4043L17.7759 30.0709C17.7759 30.1523 17.8425 30.219 17.924 30.219L19.9979 30.219C20.0793 30.219 20.146 30.1523 20.146 30.0709L20.146 29.4043C20.146 29.2413 20.2793 29.108 20.4422 29.108L26.9601 29.108C27.123 29.108 27.2563 28.9747 27.2563 28.8118L27.2563 26.9601C27.2563 26.7972 27.123 26.6638 26.9601 26.6638L20.4422 26.6638C20.2793 26.6638 20.146 26.5305 20.146 26.3676L20.146 23.4049C20.146 23.242 20.2793 23.1086 20.4422 23.1086L36.7368 23.1086C37.3923 23.1086 37.9219 22.5791 37.9219 21.9236L37.9219 12.1469C37.9219 11.9839 37.7885 11.8506 37.6256 11.8506ZM4.74023 16.5908C4.74023 15.9353 5.2698 15.4057 5.92529 15.4057C6.58078 15.4057 7.11035 15.9353 7.11035 16.5908C7.11035 17.2463 6.58078 17.7759 5.92529 17.7759C5.2698 17.7759 4.74023 17.2463 4.74023 16.5908ZM32.8335 17.4278C32.6187 17.6425 32.3225 17.7759 31.9966 17.7759L10.6655 17.7759C10.01 17.7759 9.48046 17.2463 9.48046 16.5908C9.48046 15.9353 10.01 15.4057 10.6655 15.4057L31.9966 15.4057C32.6521 15.4057 33.1816 15.9353 33.1816 16.5908C33.1816 16.9167 33.0483 17.213 32.8335 17.4278ZM36.7368 0L1.18506 0C0.529573 0 0 0.529572 0 1.18507L0 10.9618C0 11.1247 0.133319 11.2581 0.296264 11.2581L37.6256 11.2581C37.7885 11.2581 37.9219 11.1247 37.9219 10.9618L37.9219 1.18507C37.9219 0.529572 37.3923 0 36.7368 0ZM4.74023 4.74022C4.74023 4.08473 5.2698 3.55516 5.92529 3.55516C6.58078 3.55516 7.11035 4.08473 7.11035 4.74022C7.11035 5.39571 6.58078 5.92529 5.92529 5.92529C5.2698 5.92529 4.74023 5.39571 4.74023 4.74022ZM32.8335 5.57718C32.6187 5.79196 32.3225 5.92529 31.9966 5.92529L10.6655 5.92529C10.01 5.92529 9.48046 5.39571 9.48046 4.74022C9.48046 4.08473 10.01 3.55516 10.6655 3.55516L31.9966 3.55516C32.6521 3.55516 33.1816 4.08473 33.1816 4.74022C33.1816 5.06613 33.0483 5.36238 32.8335 5.57718Z" fill="url(#linear_fill_0_5271)" > |
|||
</path> |
|||
<defs> |
|||
<linearGradient id="linear_fill_0_5271" x1="18.9609375" y1="0" x2="18.9609375" y2="30.218994140625" gradientUnits="userSpaceOnUse"> |
|||
<stop offset="0" stop-color="#2BC69C" /> |
|||
<stop offset="1" stop-color="#0CA87E" /> |
|||
</linearGradient> |
|||
</defs> |
|||
</svg> |
|||
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
@ -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> |
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue