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