xuziqiang
6 months ago
9 changed files with 545 additions and 8 deletions
@ -0,0 +1,232 @@ |
|||||
|
import { dateUtil } from '/nerv-lib/util/date-util'; |
||||
|
import data from './mock.json'; |
||||
|
import { cloneDeep } from 'lodash-es'; |
||||
|
import { ref } from 'vue'; |
||||
|
const columns = [ |
||||
|
{ |
||||
|
title: '能源种类', |
||||
|
dataIndex: '能源种类', |
||||
|
}, |
||||
|
{ |
||||
|
title: '计量单位', |
||||
|
dataIndex: '计量单位', |
||||
|
}, |
||||
|
{ |
||||
|
title: '速算系数', |
||||
|
dataIndex: '速算系数', |
||||
|
}, |
||||
|
{ |
||||
|
title: '全年', |
||||
|
dataIndex: '全年', |
||||
|
}, |
||||
|
{ |
||||
|
title: '1月', |
||||
|
dataIndex: '1月', |
||||
|
}, |
||||
|
{ |
||||
|
title: '2月', |
||||
|
dataIndex: '2月', |
||||
|
}, |
||||
|
{ |
||||
|
title: '3月', |
||||
|
dataIndex: '3月', |
||||
|
}, |
||||
|
{ |
||||
|
title: '4月', |
||||
|
dataIndex: '4月', |
||||
|
}, |
||||
|
{ |
||||
|
title: '5月', |
||||
|
dataIndex: '5月', |
||||
|
}, |
||||
|
{ |
||||
|
title: '6月', |
||||
|
dataIndex: '6月', |
||||
|
}, |
||||
|
{ |
||||
|
title: '7月', |
||||
|
dataIndex: '7月', |
||||
|
}, |
||||
|
{ |
||||
|
title: '8月', |
||||
|
dataIndex: '8月', |
||||
|
}, |
||||
|
{ |
||||
|
title: '9月', |
||||
|
dataIndex: '9月', |
||||
|
}, |
||||
|
{ |
||||
|
title: '10月', |
||||
|
dataIndex: '10月', |
||||
|
}, |
||||
|
{ |
||||
|
title: '11月', |
||||
|
dataIndex: '11月', |
||||
|
}, |
||||
|
{ |
||||
|
title: '12月', |
||||
|
dataIndex: '12月', |
||||
|
}, |
||||
|
]; |
||||
|
const formConfig = { |
||||
|
schemas: [ |
||||
|
{ |
||||
|
field: 'time', |
||||
|
label: '年份', |
||||
|
component: 'NsDatePicker', |
||||
|
componentProps: { |
||||
|
picker: 'year', |
||||
|
valueFormat: 'YYYY-MM-DD', |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
params: {}, |
||||
|
}; |
||||
|
|
||||
|
const mockData = ref(cloneDeep(data.dataSource)); |
||||
|
|
||||
|
const doWnload = (url) => { |
||||
|
const a = document.createElement('a'); |
||||
|
document.body.appendChild(a); |
||||
|
a.href = encodeURI(url); |
||||
|
//设置下载的文件名
|
||||
|
// a.download = fileName.value;
|
||||
|
//触发a标签的点击事件,进行下载
|
||||
|
a.click(); |
||||
|
}; |
||||
|
export const tableConfig1 = (el, fileDownRef) => { |
||||
|
return { |
||||
|
title: '能耗', |
||||
|
value: mockData.value, |
||||
|
rowSelection: null, |
||||
|
columns, |
||||
|
formConfig, |
||||
|
headerActions: [ |
||||
|
{ |
||||
|
label: '新增', |
||||
|
name: 'groupEdit', |
||||
|
type: 'primary', |
||||
|
handle: (a, b) => { |
||||
|
el.value.toggle(); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '导入', |
||||
|
name: 'groupImport', |
||||
|
type: 'primary', |
||||
|
extra: { |
||||
|
// api: props.postImportApi, // 导入接口名
|
||||
|
title: '设备信息', // 弹窗title
|
||||
|
templateName: 'whiteListUser', // 所使用的文件名称
|
||||
|
indexName: '设备id', // 匹配类型字段
|
||||
|
message: [ |
||||
|
{ label: '1、若必填项未填写,则不能进行导入操作' }, |
||||
|
{ label: `2、当重复时,则更新数据。` }, |
||||
|
{ label: '3、数据将从模版的第五行进行导入。' }, |
||||
|
{ label: '4、文件导入勿超过5MB。' }, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '导出', |
||||
|
name: 'groupExports', |
||||
|
type: 'primary', |
||||
|
handle: () => { |
||||
|
doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx'); |
||||
|
}, |
||||
|
}, |
||||
|
|
||||
|
{ |
||||
|
label: '模板下载', |
||||
|
name: 'groupTemDownload', |
||||
|
type: 'primary', |
||||
|
handle: () => { |
||||
|
// http.get('/asset/file/whiteListUser.xlsx');
|
||||
|
doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx'); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '上传凭证', |
||||
|
name: 'groupImport', |
||||
|
type: 'primary', |
||||
|
extra: { |
||||
|
// api: props.postImportApi, // 导入接口名
|
||||
|
title: '设备信息', // 弹窗title
|
||||
|
templateName: 'whiteListUser', // 所使用的文件名称
|
||||
|
indexName: '设备id', // 匹配类型字段
|
||||
|
message: [ |
||||
|
{ label: '1、若必填项未填写,则不能进行导入操作' }, |
||||
|
{ label: `2、当重复时,则更新数据。` }, |
||||
|
{ label: '3、数据将从模版的第五行进行导入。' }, |
||||
|
{ label: '4、文件导入勿超过5MB。' }, |
||||
|
], |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '凭证下载', |
||||
|
name: 'groupTemDownload', |
||||
|
type: 'primary', |
||||
|
handle: () => { |
||||
|
fileDownRef.value.toggle(); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
columnActions: { |
||||
|
title: '操作', |
||||
|
actions: [ |
||||
|
{ |
||||
|
label: '编辑', |
||||
|
name: 'edit', |
||||
|
handle: () => { |
||||
|
mockData.value.splice(0, 1); |
||||
|
}, |
||||
|
}, |
||||
|
{ |
||||
|
label: '删除', |
||||
|
name: 'FeedBackDetail', |
||||
|
dynamicParams: ['uuid', 'appealType'], |
||||
|
confirm: true, |
||||
|
handle: () => { |
||||
|
mockData.value.splice(0, 1); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
}; |
||||
|
export const tableConfig2 = { |
||||
|
title: '碳排', |
||||
|
value: data.dataSource, |
||||
|
rowSelection: null, |
||||
|
columns, |
||||
|
formConfig, |
||||
|
headerActions: [ |
||||
|
{ |
||||
|
label: '导出', |
||||
|
name: 'groupTemDownload', |
||||
|
type: 'primary', |
||||
|
handle: () => { |
||||
|
// http.get('/asset/file/whiteListUser.xlsx');
|
||||
|
doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx'); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
export const tableConfig3 = { |
||||
|
title: '标煤', |
||||
|
value: data.dataSource, |
||||
|
rowSelection: null, |
||||
|
columns, |
||||
|
formConfig, |
||||
|
headerActions: [ |
||||
|
{ |
||||
|
label: '导出', |
||||
|
name: 'groupTemDownload', |
||||
|
type: 'primary', |
||||
|
handle: () => { |
||||
|
// http.get('/asset/file/whiteListUser.xlsx');
|
||||
|
doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx'); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}; |
@ -0,0 +1,116 @@ |
|||||
|
<template> |
||||
|
<ns-drawer |
||||
|
v-model:visible="visible" |
||||
|
width="520" |
||||
|
title="新增" |
||||
|
:ok="btnClick" |
||||
|
:cancel="() => (visible = false)" |
||||
|
placement="right"> |
||||
|
<ns-view-list-table v-bind="tableConfig" /> |
||||
|
</ns-drawer> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { ref } from 'vue'; |
||||
|
import { NsMessage } from '/nerv-lib/component'; |
||||
|
|
||||
|
const visible = ref(false); |
||||
|
const model = ref({}); |
||||
|
const toggle = () => { |
||||
|
visible.value = !visible.value; |
||||
|
}; |
||||
|
const doWnload = (url) => { |
||||
|
const a = document.createElement('a'); |
||||
|
document.body.appendChild(a); |
||||
|
a.href = encodeURI(url); |
||||
|
//设置下载的文件名 |
||||
|
// a.download = fileName.value; |
||||
|
//触发a标签的点击事件,进行下载 |
||||
|
a.click(); |
||||
|
}; |
||||
|
|
||||
|
const mockDataSource = ref([ |
||||
|
{ |
||||
|
type: '电力', |
||||
|
fileName: '电力_2024.pdf', |
||||
|
}, |
||||
|
{ |
||||
|
type: '水', |
||||
|
fileName: '电力_2024.pdf', |
||||
|
}, |
||||
|
{ |
||||
|
type: '天然气', |
||||
|
fileName: '电力_2024.pdf', |
||||
|
}, |
||||
|
{ |
||||
|
type: '汽油', |
||||
|
fileName: '电力_2024.pdf', |
||||
|
}, |
||||
|
{ |
||||
|
type: '煤油', |
||||
|
fileName: '电力_2024.pdf', |
||||
|
}, |
||||
|
]); |
||||
|
|
||||
|
const tableConfig = { |
||||
|
value: mockDataSource.value, |
||||
|
sticky: false, |
||||
|
rowKey: 'type', |
||||
|
columns: [ |
||||
|
{ |
||||
|
title: '序号', |
||||
|
dataIndex: 'index', |
||||
|
customRender: ({ index }) => index + 1, |
||||
|
}, |
||||
|
{ |
||||
|
title: '能源类型', |
||||
|
dataIndex: 'type', |
||||
|
}, |
||||
|
{ |
||||
|
title: '文件名', |
||||
|
dataIndex: 'fileName', |
||||
|
}, |
||||
|
], |
||||
|
headerActions: [ |
||||
|
{ |
||||
|
label: '批量下载', |
||||
|
name: 'groupTemDownload', |
||||
|
type: 'primary', |
||||
|
handle: () => { |
||||
|
// http.get('/asset/file/whiteListUser.xlsx'); |
||||
|
doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx'); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
columnActions: { |
||||
|
title: '操作', |
||||
|
actions: [ |
||||
|
{ |
||||
|
label: '下载', |
||||
|
name: 'groupTemDownload', |
||||
|
handle: () => { |
||||
|
// http.get('/asset/file/whiteListUser.xlsx'); |
||||
|
doWnload('/hx-ai-intelligent/asset/file/whiteListUser.xlsx'); |
||||
|
}, |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
}; |
||||
|
|
||||
|
const btnClick = () => { |
||||
|
visible.value = false; |
||||
|
NsMessage.success('操作成功'); |
||||
|
}; |
||||
|
|
||||
|
defineExpose({ |
||||
|
toggle, |
||||
|
}); |
||||
|
</script> |
||||
|
<style scoped lang="less"> |
||||
|
:deep(.ns-table-header) { |
||||
|
min-width: 200px; |
||||
|
} |
||||
|
:deep(.ns-table-container), |
||||
|
:deep(.ns-table-main) { |
||||
|
border-top: 0px !important; |
||||
|
} |
||||
|
</style> |
@ -0,0 +1,28 @@ |
|||||
|
<template> |
||||
|
<div> |
||||
|
<a-tabs> |
||||
|
<a-tab-pane v-for="(item, index) in tabList" :key="index" v-bind="item"> |
||||
|
<ns-view-list-table v-bind="item.config" /> |
||||
|
</a-tab-pane> |
||||
|
</a-tabs> |
||||
|
<opForm ref="opFormRef" /> |
||||
|
<fileDown ref="fileDownRef" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { ref } from 'vue'; |
||||
|
import { tableConfig1, tableConfig2, tableConfig3 } from './config'; |
||||
|
import opForm from './op.vue'; |
||||
|
import fileDown from './fileDown.vue'; |
||||
|
const opFormRef = ref(); |
||||
|
const fileDownRef = ref(); |
||||
|
const tabList = [ |
||||
|
{ tab: '能耗', config: tableConfig1(opFormRef, fileDownRef) }, |
||||
|
{ tab: '碳排', config: tableConfig2 }, |
||||
|
{ tab: '标煤', config: tableConfig3 }, |
||||
|
]; |
||||
|
defineOptions({ |
||||
|
name: 'EnergyMappingIndex', // 与页面路由name一致缓存才可生效 |
||||
|
}); |
||||
|
</script> |
||||
|
<style lang="less" scoped></style> |
@ -0,0 +1,10 @@ |
|||||
|
{ |
||||
|
"dataSource":[ |
||||
|
{"序号": "1", "能源种类": "电力", "计量单位": "tce", "速算系数": "0.5tce/kWh", "全年": "19900", "1月": "10000", "2月": "9900", "3月": "", "4月": "", "5月": "", "6月": "", "7月": "", "8月": "", "9月": "", "10月": "", "11月": "", "12月": ""}, |
||||
|
{"序号": "2", "能源种类": "水", "计量单位": "tce", "速算系数": "0.5tce/t", "全年": "16500", "1月": "8000", "2月": "8500", "3月": "", "4月": "", "5月": "", "6月": "", "7月": "", "8月": "", "9月": "", "10月": "", "11月": "", "12月": ""}, |
||||
|
{"序号": "3", "能源种类": "天然气", "计量单位": "tce", "速算系数": "0.5tce/𝑚3/m3", "全年": "590", "1月": "300", "2月": "290", "3月": "", "4月": "", "5月": "", "6月": "", "7月": "", "8月": "", "9月": "", "10月": "", "11月": "", "12月": ""}, |
||||
|
{"序号": "4", "能源种类": "汽油", "计量单位": "tce", "速算系数": "0.5tce/𝑚3/m3", "全年": "330", "1月": "150", "2月": "180", "3月": "", "4月": "", "5月": "", "6月": "", "7月": "", "8月": "", "9月": "", "10月": "", "11月": "", "12月": ""}, |
||||
|
{"序号": "5", "能源种类": "煤油", "计量单位": "tce", "速算系数": "0.5tce/t", "全年": "43", "1月": "20", "2月": "23", "3月": "", "4月": "", "5月": "", "6月": "", "7月": "", "8月": "", "9月": "", "10月": "", "11月": "", "12月": ""} |
||||
|
] |
||||
|
|
||||
|
} |
@ -0,0 +1,135 @@ |
|||||
|
<template> |
||||
|
<ns-drawer |
||||
|
v-model:visible="visible" |
||||
|
width="520" |
||||
|
title="新增" |
||||
|
:ok="btnClick" |
||||
|
:cancel="() => (visible = false)" |
||||
|
placement="right"> |
||||
|
<a-tabs> |
||||
|
<a-tab-pane class="pane" key="1" tab="能源种类"> |
||||
|
<ns-form :schemas="schemas" :model="model" formLayout="vertical" /> |
||||
|
</a-tab-pane> |
||||
|
<a-tab-pane class="pane" key="2" tab="能耗统计"> |
||||
|
<ns-basic-table v-bind="tableConfig" formLayout="vertical" /> |
||||
|
</a-tab-pane> |
||||
|
</a-tabs> |
||||
|
</ns-drawer> |
||||
|
</template> |
||||
|
<script lang="ts" setup> |
||||
|
import { createVNode, ref, toRef, toRefs } from 'vue'; |
||||
|
import { NsMessage } from '/nerv-lib/component'; |
||||
|
import { Switch } from 'ant-design-vue'; |
||||
|
const visible = ref(false); |
||||
|
const model = ref({}); |
||||
|
const toggle = () => { |
||||
|
visible.value = !visible.value; |
||||
|
}; |
||||
|
|
||||
|
const mockDataSource = ref([]); |
||||
|
for (let index = 0; index < 12; index++) { |
||||
|
mockDataSource.value.push({ type: '手动', op: true }); |
||||
|
} |
||||
|
const schemas = [ |
||||
|
{ |
||||
|
label: '能源种类', |
||||
|
field: 'formula1', |
||||
|
component: 'NsInput', |
||||
|
componentProps: { |
||||
|
placeholder: '请输入', |
||||
|
}, |
||||
|
rules: [{ required: true }], |
||||
|
}, |
||||
|
{ |
||||
|
label: '计量单位', |
||||
|
field: 'formula2', |
||||
|
component: 'NsInput', |
||||
|
componentProps: { |
||||
|
placeholder: '请输入', |
||||
|
}, |
||||
|
rules: [{ required: true }], |
||||
|
}, |
||||
|
{ |
||||
|
label: '计算碳排', |
||||
|
field: 'formula3', |
||||
|
component: 'NsRadioGroup', |
||||
|
defaultValue: 1, |
||||
|
componentProps: { |
||||
|
radioType: 'radio', |
||||
|
options: [ |
||||
|
{ label: '是', value: 1 }, |
||||
|
{ label: '否', value: 0 }, |
||||
|
], |
||||
|
}, |
||||
|
rules: [{ required: true }], |
||||
|
}, |
||||
|
{ |
||||
|
label: '计算标煤', |
||||
|
field: 'formula4', |
||||
|
component: 'NsRadioGroup', |
||||
|
defaultValue: 1, |
||||
|
componentProps: { |
||||
|
radioType: 'radio', |
||||
|
options: [ |
||||
|
{ label: '是', value: 1 }, |
||||
|
{ label: '否', value: 0 }, |
||||
|
], |
||||
|
}, |
||||
|
rules: [{ required: true }], |
||||
|
}, |
||||
|
{ |
||||
|
label: '采集节点', |
||||
|
field: 'formula5', |
||||
|
component: 'NsInput', |
||||
|
componentProps: { |
||||
|
placeholder: '请输入', |
||||
|
}, |
||||
|
}, |
||||
|
]; |
||||
|
const tableConfig = { |
||||
|
dataSource: mockDataSource.value, |
||||
|
pagination: false, |
||||
|
rowKey: (record) => record.groupName, |
||||
|
columns: [ |
||||
|
{ |
||||
|
title: '月份', |
||||
|
dataIndex: 'month', |
||||
|
customRender: ({ index }) => index + 1 + '月', |
||||
|
width: 80, |
||||
|
align: 'center', |
||||
|
}, |
||||
|
{ |
||||
|
title: '汇总方式', |
||||
|
dataIndex: 'type', |
||||
|
align: 'center', |
||||
|
}, |
||||
|
{ |
||||
|
title: '操作', |
||||
|
dataIndex: 'op', |
||||
|
align: 'center', |
||||
|
customRender: (data) => |
||||
|
createVNode(Switch, { |
||||
|
checked: Boolean(data.record.op), |
||||
|
onChange: (val) => { |
||||
|
setTimeout(() => { |
||||
|
data.record.op = val; |
||||
|
}, 10); |
||||
|
}, |
||||
|
}), |
||||
|
}, |
||||
|
], |
||||
|
}; |
||||
|
const btnClick = () => { |
||||
|
visible.value = false; |
||||
|
NsMessage.success('操作成功'); |
||||
|
}; |
||||
|
|
||||
|
defineExpose({ |
||||
|
toggle, |
||||
|
}); |
||||
|
</script> |
||||
|
<style scoped lang="less"> |
||||
|
.pane { |
||||
|
margin-top: 16px; |
||||
|
} |
||||
|
</style> |
Loading…
Reference in new issue