|
|
|
@ -16,7 +16,7 @@ |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
<template #title> |
|
|
|
<a-date-picker v-model:value="selectYear" picker="year" /> |
|
|
|
<a-date-picker v-model:value="selectYear" picker="year" @change="changeYearData" /> |
|
|
|
<div class="buttonGroup"> |
|
|
|
<a-button type="primary" @click="addNewData">新增</a-button> |
|
|
|
<a-button type="primary">导入</a-button> |
|
|
|
@ -27,11 +27,14 @@ |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</a-table> |
|
|
|
<a-pagination |
|
|
|
:current="current" |
|
|
|
:page-size="pageSize" |
|
|
|
:total="0" |
|
|
|
:show-total="(total, range) => `${range[0]}-${range[1]} of ${total} items`" /> |
|
|
|
<a-pagination |
|
|
|
:current="current" |
|
|
|
:total="total" |
|
|
|
:page-size="pageSize" |
|
|
|
style="display: flex;justify-content: center;margin-top: 16px;" |
|
|
|
:show-size-changer="true" |
|
|
|
:show-quick-jumper="true" |
|
|
|
@change="onChange" /> |
|
|
|
<!-- 新增数据库数据 --> |
|
|
|
<a-drawer |
|
|
|
:width="500" |
|
|
|
@ -47,42 +50,80 @@ |
|
|
|
:label-col="labelCol" |
|
|
|
:wrapper-col="wrapperCol" |
|
|
|
> |
|
|
|
<a-form-item ref="name" label="能源种类" name="name"> |
|
|
|
<a-input v-model:value="formState.name" /> |
|
|
|
<a-form-item ref="name" label="能源种类" name="energyType"> |
|
|
|
<a-input v-model:value="formState.energyType" placeholder="请输入能源种类" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="计量单位"> |
|
|
|
<a-cascader v-model:value="value" :options="options" placeholder="Please select" /> |
|
|
|
<a-form-item label="计量单位" name="unit"> |
|
|
|
<a-cascader v-model:value="formState.unit" :options="options" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="自动采集节点"> |
|
|
|
<a-form-item label="自动采集节点" name="collectionNode"> |
|
|
|
<a-tree-select |
|
|
|
v-model:value="treeValue" |
|
|
|
style="width: 300px" |
|
|
|
placeholder="Please select" |
|
|
|
v-model:value="formState.collectionNode" |
|
|
|
:tree-line="true" |
|
|
|
:tree-data="treeData" |
|
|
|
tree-node-filter-prop="title" |
|
|
|
> |
|
|
|
<template #title="{ value: val, title }"> |
|
|
|
<b v-if="val === 'parent 1-1'" style="color: #08c">sss</b> |
|
|
|
<template v-else>{{ title }}</template> |
|
|
|
</template> |
|
|
|
</a-tree-select> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="计算碳排" name="resource"> |
|
|
|
<a-radio-group v-model:value="formState.resource"> |
|
|
|
<a-radio value="1">是</a-radio> |
|
|
|
<a-radio value="2">否</a-radio> |
|
|
|
<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="region"> |
|
|
|
<a-select v-model:value="formState.region" placeholder="请选择排放类型"> |
|
|
|
<a-select-option value="shanghai">Zone one</a-select-option> |
|
|
|
<a-select-option value="beijing">Zone two</a-select-option> |
|
|
|
<a-form-item label="排放类型" name="emissionType"> |
|
|
|
<a-select v-model:value="formState.emissionType" placeholder="请选择排放类型"> |
|
|
|
<a-select-option value="直接排放">直接排放</a-select-option> |
|
|
|
<a-select-option value="间接排放">间接排放</a-select-option> |
|
|
|
<a-select-option value="其他">其他</a-select-option> |
|
|
|
</a-select> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="1月" name="delivery"> |
|
|
|
<a-switch v-model:checked="formState.delivery" /> |
|
|
|
</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" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="2月" name="febFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol"> |
|
|
|
<a-switch v-model:checked="formState.febFlag" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="3月" name="marFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol"> |
|
|
|
<a-switch v-model:checked="formState.marFlag" /> |
|
|
|
</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" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="5月" name="mayFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol"> |
|
|
|
<a-switch v-model:checked="formState.mayFlag" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="6月" name="junFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol"> |
|
|
|
<a-switch v-model:checked="formState.junFlag" /> |
|
|
|
</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" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="8月" name="augFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol"> |
|
|
|
<a-switch v-model:checked="formState.augFlag" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="9月" name="sepFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol"> |
|
|
|
<a-switch v-model:checked="formState.sepFlag" /> |
|
|
|
</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" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="11月" name="novFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol"> |
|
|
|
<a-switch v-model:checked="formState.novFlag" /> |
|
|
|
</a-form-item> |
|
|
|
<a-form-item label="12月" name="decFlag" :label-col="switchLabelCol" :wrapper-col="switchWrapperCol"> |
|
|
|
<a-switch v-model:checked="formState.decFlag" /> |
|
|
|
</a-form-item> |
|
|
|
</a-col> |
|
|
|
</a-row> |
|
|
|
</a-form> |
|
|
|
<template #footer> |
|
|
|
<a-button style="margin-right: 8px" @click="onClose">取消</a-button> |
|
|
|
@ -95,46 +136,81 @@ |
|
|
|
import { ref,reactive, toRaw } from 'vue'; |
|
|
|
import type { UnwrapRef } from 'vue'; |
|
|
|
import type { Rule } from 'ant-design-vue/es/form'; |
|
|
|
import { Pagination } from 'ant-design-vue'; |
|
|
|
import type { CascaderProps,TreeSelectProps } from 'ant-design-vue'; |
|
|
|
import type { Dayjs } from 'dayjs'; |
|
|
|
import { http } from '/nerv-lib/util/http'; |
|
|
|
import { tableColumns } from '../config'; |
|
|
|
import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary'; |
|
|
|
defineOptions({ |
|
|
|
name: 'EnergyConsumption', // 与页面路由name一致缓存才可生效 |
|
|
|
energyType: 'EnergyConsumption', // 与页面路由name一致缓存才可生效 |
|
|
|
components: { |
|
|
|
'a-pagination': Pagination, |
|
|
|
}, |
|
|
|
}); |
|
|
|
|
|
|
|
const orgId = JSON.parse(sessionStorage.getItem(import.meta.env.VITE_PUBLIC_PATH)).orgId; |
|
|
|
const orgId = JSON.parse(sessionStorage.getItem('userInfo')).orgId; |
|
|
|
const fetch = (api, params = { orgId }) => { |
|
|
|
return http.post(api, params); |
|
|
|
}; |
|
|
|
const selectYear = ref<Dayjs>(); |
|
|
|
const current = ref<number>(1); |
|
|
|
const pageSize = ref<number>(10); |
|
|
|
const total = ref<number>() |
|
|
|
const queryParams = ref({ |
|
|
|
pageNum:current.value, |
|
|
|
pageSize:pageSize.value, |
|
|
|
}) |
|
|
|
const visible = ref(false); |
|
|
|
const value = ref<string[]>([]); |
|
|
|
const data = ref([]); |
|
|
|
interface FormState { |
|
|
|
name: string; |
|
|
|
region: string | undefined; |
|
|
|
delivery: boolean; |
|
|
|
resource: string; |
|
|
|
energyType: string; |
|
|
|
unit: string; |
|
|
|
collectionNode: string; |
|
|
|
emissionType: string | undefined; |
|
|
|
isComputeCarbon: string; |
|
|
|
janFlag: boolean; |
|
|
|
febFlag: boolean; |
|
|
|
marFlag: boolean; |
|
|
|
aprFlag: boolean; |
|
|
|
mayFlag: boolean; |
|
|
|
junFlag: boolean; |
|
|
|
julFlag: boolean; |
|
|
|
augFlag: boolean; |
|
|
|
sepFlag: boolean; |
|
|
|
octFlag: boolean; |
|
|
|
novFlag: boolean; |
|
|
|
decFlag: boolean; |
|
|
|
} |
|
|
|
const formRef = ref(); |
|
|
|
const labelCol = { span: 5 }; |
|
|
|
const wrapperCol = { span: 13 }; |
|
|
|
const wrapperCol = { span: 19 }; |
|
|
|
const switchLabelCol = { span: 10 }; |
|
|
|
const switchWrapperCol = { span: 14 }; |
|
|
|
const formState: UnwrapRef<FormState> = reactive({ |
|
|
|
name: '', |
|
|
|
region: undefined, |
|
|
|
delivery: false, |
|
|
|
resource: '', |
|
|
|
energyType: '', |
|
|
|
unit: '', |
|
|
|
collectionNode: '', |
|
|
|
emissionType: undefined, |
|
|
|
isComputeCarbon: '', |
|
|
|
janFlag: false, |
|
|
|
febFlag: false, |
|
|
|
marFlag: false, |
|
|
|
aprFlag: false, |
|
|
|
mayFlag: false, |
|
|
|
junFlag: false, |
|
|
|
julFlag: false, |
|
|
|
augFlag: false, |
|
|
|
sepFlag: false, |
|
|
|
octFlag: false, |
|
|
|
novFlag: false, |
|
|
|
decFlag: false, |
|
|
|
}); |
|
|
|
// 定义form表单的必填 |
|
|
|
const rules: Record<string, Rule[]> = { |
|
|
|
name: [ |
|
|
|
{ required: true, message: '请输入能源种类', trigger: 'change' }, |
|
|
|
], |
|
|
|
resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }], |
|
|
|
energyType: [{ required: true, message: '请输入能源种类', trigger: 'change' }], |
|
|
|
isComputeCarbon: [{ required: true, message: '请选择是否计算碳排', trigger: 'change' }], |
|
|
|
emissionType : [{ required: false, message: '请输入选择排放类型', trigger: 'change' }] |
|
|
|
}; |
|
|
|
// 定义计量单位级联选择的变量 |
|
|
|
const options: CascaderProps['options'] = [ |
|
|
|
@ -172,7 +248,6 @@ |
|
|
|
}, |
|
|
|
]; |
|
|
|
// 定义自动采集节点数的变量 |
|
|
|
const treeValue = ref<string>(); |
|
|
|
const treeData = ref<TreeSelectProps['treeData']>([ |
|
|
|
{ |
|
|
|
title: 'parent 1', |
|
|
|
@ -199,13 +274,33 @@ |
|
|
|
], |
|
|
|
}, |
|
|
|
]); |
|
|
|
// 年份选择改变触发 |
|
|
|
const changeYearData = () => { |
|
|
|
queryParams.value.year = selectYear.value.format('YYYY') |
|
|
|
getTableList() |
|
|
|
} |
|
|
|
// 获取表格数据 |
|
|
|
const getTableList = () => { |
|
|
|
fetch(energyConsumption.pageList).then((res) => { |
|
|
|
console.log(res,'aaaaaa'); |
|
|
|
fetch(energyConsumption.pageList , queryParams.value).then((res) => { |
|
|
|
data.value = res.data.records |
|
|
|
total.value = res.data.total |
|
|
|
}); |
|
|
|
}; |
|
|
|
getTableList() |
|
|
|
// 分页器 |
|
|
|
const onChange = (pageNumber: number,size: number) => { |
|
|
|
current.value = pageNumber; |
|
|
|
pageSize.value = size; |
|
|
|
}; |
|
|
|
// 计算碳排切换 |
|
|
|
const changeRadio = (e) => { |
|
|
|
if(e.target.value==='0'){ |
|
|
|
rules.emissionType.required = true |
|
|
|
}else{ |
|
|
|
rules.emissionType.required = false |
|
|
|
} |
|
|
|
console.log(rules); |
|
|
|
}; |
|
|
|
// 点击确定提交 |
|
|
|
const onSubmit = () => { |
|
|
|
formRef.value |
|
|
|
@ -217,9 +312,6 @@ |
|
|
|
console.log('error', error); |
|
|
|
}); |
|
|
|
}; |
|
|
|
const resetForm = () => { |
|
|
|
formRef.value.resetFields(); |
|
|
|
}; |
|
|
|
// 点击新增按钮 |
|
|
|
const addNewData = () => { |
|
|
|
visible.value = true |
|
|
|
@ -227,6 +319,7 @@ |
|
|
|
// 关闭新增抽屉 |
|
|
|
const onClose = () => { |
|
|
|
visible.value = false; |
|
|
|
formRef.value.resetFields(); |
|
|
|
}; |
|
|
|
</script> |
|
|
|
<style scoped lang="less"> |
|
|
|
|
fks-xuxinyue
2 months ago