|
|
|
@ -93,7 +93,7 @@ |
|
|
|
<template #bodyCell="{ column, text, record }"> |
|
|
|
<template v-if="column.key === 'action'"> |
|
|
|
<span> |
|
|
|
<a @click="editData(record)">修改</a> |
|
|
|
<a @click="editData(record)">修改预算值</a> |
|
|
|
</span> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
@ -109,12 +109,6 @@ |
|
|
|
<a-select-option :value="0">否</a-select-option> |
|
|
|
</a-select> |
|
|
|
</a-form-item> |
|
|
|
<!-- <a-form-item label="计算方式"> |
|
|
|
<a-select ref="select" v-model:value="formState.countMethod"> |
|
|
|
<a-select-option value="0">手动</a-select-option> |
|
|
|
<a-select-option value="1">自动</a-select-option> |
|
|
|
</a-select> |
|
|
|
</a-form-item> --> |
|
|
|
<a-form-item label="折算率"> |
|
|
|
<a-input v-model:value="formState.conversionRate" suffix="%" :disabled="disabled" /> |
|
|
|
</a-form-item> |
|
|
|
@ -124,40 +118,107 @@ |
|
|
|
</a-form> |
|
|
|
</a-modal> |
|
|
|
<!-- 基准值设置 --> |
|
|
|
<a-drawer |
|
|
|
:visible="visible" |
|
|
|
title="设置基准" |
|
|
|
:width="500" |
|
|
|
@close="onClose" |
|
|
|
:footer-style="{ textAlign: 'right' }"> |
|
|
|
<div> 节点：{{ props.nodeName }} </div> |
|
|
|
<a-table |
|
|
|
:columns="drawerColumns" |
|
|
|
:data-source="newTableData" |
|
|
|
bordered |
|
|
|
:rowKey="(record, index) => index" |
|
|
|
:rowSelection="{ |
|
|
|
selectedRowKeys: selectedRowKeysSet, |
|
|
|
onChange: onSelectionChangeSet, |
|
|
|
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> |
|
|
|
<a-modal :visible="visible" @ok="onSubmit" @cancel="onClose"> |
|
|
|
<a-tooltip placement="top"> |
|
|
|
<template #title> |
|
|
|
<span>月基准值设置：使用基准年相应月份的数据作为当前年相应月份的基准值。</span> |
|
|
|
</template> |
|
|
|
<QuestionCircleOutlined style="position: absolute; right: 60px; top: 22px; z-index: 7" /> |
|
|
|
</a-tooltip> |
|
|
|
<div style="display: flex; margin-top: 20px; justify-content: space-between"> |
|
|
|
<span> 节点：{{ props.nodeName }} </span> |
|
|
|
<a-date-picker |
|
|
|
v-if="activeKey === '1'" |
|
|
|
v-model:value="selectYear" |
|
|
|
picker="year" |
|
|
|
valueFormat="YYYY" |
|
|
|
@change="changeYearData" /> |
|
|
|
</div> |
|
|
|
<a-tabs v-model:activeKey="activeKey" @change="handleTabChange"> |
|
|
|
<a-tab-pane key="1" tab="年基准值设置"> |
|
|
|
<a-table |
|
|
|
:columns="yearColumns" |
|
|
|
:data-source="yearTableData" |
|
|
|
bordered |
|
|
|
:rowKey="(record, index) => record.referenceYear" |
|
|
|
:rowSelection="{ |
|
|
|
selectedRowKeys: selectedRowKeysSet, |
|
|
|
onChange: onSelectionChangeSet, |
|
|
|
type: 'radio', |
|
|
|
}" |
|
|
|
:pagination="false"> |
|
|
|
</a-table> |
|
|
|
</a-tab-pane> |
|
|
|
<a-tab-pane key="2" tab="月基准值设置" force-render> |
|
|
|
<a-table :columns="monthColumns" :data-source="dataSource" bordered :pagination="false"> |
|
|
|
<template #bodyCell="{ column, text, record }"> |
|
|
|
<template v-if="['referenceValue'].includes(column.dataIndex)"> |
|
|
|
<div> |
|
|
|
<a-input |
|
|
|
v-if="editableData[record.yearMonth]" |
|
|
|
v-model:value="editableData[record.yearMonth][column.dataIndex]" |
|
|
|
style="margin: -5px 0" /> |
|
|
|
<template v-else> |
|
|
|
{{ text }} |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<template v-else-if="column.dataIndex === 'operation'"> |
|
|
|
<div class="editable-row-operations"> |
|
|
|
<span v-if="editableData[record.yearMonth]"> |
|
|
|
<a-popconfirm |
|
|
|
title="确定要保存?" |
|
|
|
ok-text="确定" |
|
|
|
cancel-text="取消" |
|
|
|
@confirm="save(record.yearMonth)" |
|
|
|
@cancel="cancel(record.yearMonth)"> |
|
|
|
<a>保存</a> |
|
|
|
</a-popconfirm> |
|
|
|
</span> |
|
|
|
<span v-else> |
|
|
|
<a-button |
|
|
|
type="link" |
|
|
|
@click="edit(record.yearMonth)" |
|
|
|
:disabled="record.isAutoObtained === 0 ? true : false"> |
|
|
|
编辑 |
|
|
|
</a-button> |
|
|
|
</span> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
<template v-if="column.key === 'isAutoObtained'"> |
|
|
|
<a-switch |
|
|
|
checked-children="是" |
|
|
|
un-checked-children="否" |
|
|
|
:checked="record.isAutoObtained === 0 ? true : false" |
|
|
|
:class="{ |
|
|
|
'blue-background': record.isAutoObtained === 0 ? true : false, |
|
|
|
'grey-background': record.isAutoObtained === 0 ? false : true, |
|
|
|
}" |
|
|
|
@click="changeSwitch(record)" /> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</a-table> |
|
|
|
</a-tab-pane> |
|
|
|
</a-tabs> |
|
|
|
</a-modal> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script lang="ts" setup> |
|
|
|
import { cloneDeep } from 'lodash-es'; |
|
|
|
import type { UnwrapRef } from 'vue'; |
|
|
|
import { ref, defineEmits, reactive, toRaw } from 'vue'; |
|
|
|
import { http } from '/nerv-lib/util/http'; |
|
|
|
import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue'; |
|
|
|
import { |
|
|
|
CaretUpOutlined, |
|
|
|
CaretDownOutlined, |
|
|
|
QuestionCircleOutlined, |
|
|
|
} from '@ant-design/icons-vue'; |
|
|
|
import { carbonPlanning } from '/@/api/carbonEmissionFactorLibrary'; |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
import { any, string } from 'vue-types'; |
|
|
|
import type { Dayjs } from 'dayjs'; |
|
|
|
|
|
|
|
// 父组件id |
|
|
|
const props = defineProps({ |
|
|
|
parentId: { |
|
|
|
@ -185,6 +246,7 @@ |
|
|
|
const changeParentData = () => { |
|
|
|
emit('change-data', true); |
|
|
|
}; |
|
|
|
const activeKey = ref('1'); |
|
|
|
// 表格 |
|
|
|
const selectedRowKeys = ref([]); |
|
|
|
const onSelectionChange = (selectedKeys, selectedRows) => { |
|
|
|
@ -243,6 +305,7 @@ |
|
|
|
{ |
|
|
|
title: '操作', |
|
|
|
key: 'action', |
|
|
|
width: 200, |
|
|
|
}, |
|
|
|
]); |
|
|
|
|
|
|
|
@ -300,37 +363,114 @@ |
|
|
|
open.value = false; |
|
|
|
}; |
|
|
|
const visible = ref(false); |
|
|
|
const selectYear = ref<Dayjs>(); |
|
|
|
const selectedRowKeysSet = ref([]); |
|
|
|
const referenceQuery = ref(); |
|
|
|
const onSelectionChangeSet = (selectedKeys, selectedRows) => { |
|
|
|
selectedRowKeysSet.value = selectedKeys; |
|
|
|
referenceQuery.value = selectedRows[0].referenceValue; |
|
|
|
}; |
|
|
|
const drawerColumns = [ |
|
|
|
const yearColumns = [ |
|
|
|
{ |
|
|
|
title: '年份', |
|
|
|
dataIndex: 'year', |
|
|
|
dataIndex: 'referenceYear', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '用电量', |
|
|
|
dataIndex: 'referenceValue', |
|
|
|
}, |
|
|
|
]; |
|
|
|
const newTableData = ref([]); |
|
|
|
// 年份选择改变触发 |
|
|
|
const queryData = ref({ |
|
|
|
orgId: orgId.value, |
|
|
|
type: props.type, |
|
|
|
itemizeId: props.parentId, |
|
|
|
}); |
|
|
|
const changeYearData = () => { |
|
|
|
queryData.value.referenceYear = selectYear.value; |
|
|
|
setBasicData(); |
|
|
|
}; |
|
|
|
const yearTableData = ref([]); |
|
|
|
const setBasicData = () => { |
|
|
|
fetch(carbonPlanning.benchmarkSetting, { |
|
|
|
orgId: orgId.value, |
|
|
|
type: props.type, |
|
|
|
itemizeId: props.parentId, |
|
|
|
}).then((res) => { |
|
|
|
newTableData.value = res.data; |
|
|
|
fetch(carbonPlanning.benchmarkSetting, queryData.value).then((res) => { |
|
|
|
yearTableData.value = res.data; |
|
|
|
}); |
|
|
|
visible.value = true; |
|
|
|
}; |
|
|
|
const handleTabChange = (key) => { |
|
|
|
console.log('Tab changed:', key); |
|
|
|
// 在这里可以执行需要在页面切换时执行的逻辑 |
|
|
|
if (key === '1') { |
|
|
|
} else if (key === '2') { |
|
|
|
if (selectedRowKeysSet.value) { |
|
|
|
fetch(carbonPlanning.monthBenchmarkSetting, { |
|
|
|
type: props.type, |
|
|
|
referenceYear: selectedRowKeysSet.value[0], |
|
|
|
year: props.year, |
|
|
|
itemizeId: props.parentId, |
|
|
|
orgId: orgId.value, |
|
|
|
}).then((res) => { |
|
|
|
monthData.value = res.data; |
|
|
|
}); |
|
|
|
} else { |
|
|
|
activeKey.value = '1'; |
|
|
|
} |
|
|
|
} |
|
|
|
}; |
|
|
|
//开关 |
|
|
|
const changeSwitch = (data: any) => { |
|
|
|
data.isAutoObtained = data.isAutoObtained === 0 ? 1 : 0; |
|
|
|
monthData.value = [...monthData.value]; |
|
|
|
console.log(monthData.value); |
|
|
|
}; |
|
|
|
const monthColumns = [ |
|
|
|
{ |
|
|
|
title: '日期', |
|
|
|
dataIndex: 'yearMonth', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '用电量', |
|
|
|
dataIndex: 'referenceValue', |
|
|
|
width: '40%', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '是否自动获取', |
|
|
|
key: 'isAutoObtained', |
|
|
|
}, |
|
|
|
{ |
|
|
|
title: '操作', |
|
|
|
dataIndex: 'operation', |
|
|
|
}, |
|
|
|
]; |
|
|
|
const monthData = ref([]); |
|
|
|
|
|
|
|
const dataSource = ref(monthData); |
|
|
|
const editableData: UnwrapRef<Record<string, DataItem>> = reactive({}); |
|
|
|
const edit = (yearMonth: string) => { |
|
|
|
editableData[yearMonth] = cloneDeep( |
|
|
|
dataSource.value.filter((item) => yearMonth === item.yearMonth)[0], |
|
|
|
); |
|
|
|
}; |
|
|
|
const save = (yearMonth: string) => { |
|
|
|
Object.assign( |
|
|
|
dataSource.value.filter((item) => yearMonth === item.yearMonth)[0], |
|
|
|
editableData[yearMonth], |
|
|
|
); |
|
|
|
delete editableData[yearMonth]; |
|
|
|
|
|
|
|
monthData.value = [...monthData.value]; |
|
|
|
}; |
|
|
|
const cancel = (yearMonth: string) => { |
|
|
|
delete editableData[yearMonth]; |
|
|
|
}; |
|
|
|
const onSubmit = () => { |
|
|
|
const benchmark = monthData.value; |
|
|
|
fetch(carbonPlanning.benchmarkSubmit, { |
|
|
|
ids: ids.value, |
|
|
|
referenceValue: referenceQuery.value, |
|
|
|
benchmark: benchmark, |
|
|
|
orgId: orgId.value, |
|
|
|
type: props.type, |
|
|
|
year: props.year, |
|
|
|
itemizeId: props.parentId, |
|
|
|
}).then((res) => { |
|
|
|
visible.value = false; |
|
|
|
selectedRowKeysSet.value = []; |
|
|
|
@ -669,9 +809,34 @@ |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.blue-background.ant-switch-checked .ant-switch-handle { |
|
|
|
background-color: linear-gradient( |
|
|
|
180deg, |
|
|
|
rgba(1, 206, 255, 1) 0%, |
|
|
|
rgba(57, 215, 187, 1) 100% |
|
|
|
) !important; |
|
|
|
} |
|
|
|
.grey-background.ant-switch { |
|
|
|
background-color: rgba(238, 238, 238, 1) !important; |
|
|
|
} |
|
|
|
.grey-background.ant-switch .ant-switch-handle { |
|
|
|
background-color: rgba(238, 238, 238, 1) !important; |
|
|
|
} |
|
|
|
|
|
|
|
.ant-switch-checked { |
|
|
|
background-color: rgba(57, 215, 187, 1) !important; |
|
|
|
} |
|
|
|
.grey-background.ant-switch .ant-switch-handle { |
|
|
|
background-color: rgba(238, 238, 238, 1) !important; |
|
|
|
} |
|
|
|
:deep(.ant-card-body) { |
|
|
|
padding: unset; |
|
|
|
height: 100%; |
|
|
|
width: 100%; |
|
|
|
} |
|
|
|
</style> |
|
|
|
<style scoped> |
|
|
|
.editable-row-operations a { |
|
|
|
margin-right: 8px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
zhaohy
3 months ago