xuziqiang
5 months ago
12 changed files with 1127 additions and 599 deletions
@ -0,0 +1,251 @@ |
|||
<template> |
|||
<div> |
|||
<a-table |
|||
:columns="tableColumns" |
|||
:data-source="data" |
|||
bordered |
|||
:pagination="false" |
|||
:scroll="{ x: 2000 }"> |
|||
<template #bodyCell="{ column, text }"> |
|||
<template v-if="column.key === 'action'"> |
|||
<span> |
|||
<a>编辑</a> |
|||
<a-divider type="vertical" /> |
|||
<a>删除</a> |
|||
</span> |
|||
</template> |
|||
</template> |
|||
<template #title> |
|||
<a-date-picker v-model:value="selectYear" picker="year" /> |
|||
<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">上传凭证</a-button> |
|||
<a-button type="primary">凭证下载</a-button> |
|||
</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-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="name"> |
|||
<a-input v-model:value="formState.name" /> |
|||
</a-form-item> |
|||
<a-form-item label="计量单位"> |
|||
<a-cascader v-model:value="value" :options="options" placeholder="Please select" /> |
|||
</a-form-item> |
|||
<a-form-item label="自动采集节点"> |
|||
<a-tree-select |
|||
v-model:value="treeValue" |
|||
style="width: 300px" |
|||
placeholder="Please select" |
|||
: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-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-select> |
|||
</a-form-item> |
|||
<a-form-item label="1月" name="delivery"> |
|||
<a-switch v-model:checked="formState.delivery" /> |
|||
</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> |
|||
</div> |
|||
</template> |
|||
<script lang="ts" setup> |
|||
import { ref,reactive, toRaw } from 'vue'; |
|||
import type { UnwrapRef } from 'vue'; |
|||
import type { Rule } from 'ant-design-vue/es/form'; |
|||
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一致缓存才可生效 |
|||
}); |
|||
|
|||
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 visible = ref(false); |
|||
const value = ref<string[]>([]); |
|||
const data = ref([]); |
|||
interface FormState { |
|||
name: string; |
|||
region: string | undefined; |
|||
delivery: boolean; |
|||
resource: string; |
|||
} |
|||
const formRef = ref(); |
|||
const labelCol = { span: 5 }; |
|||
const wrapperCol = { span: 13 }; |
|||
const formState: UnwrapRef<FormState> = reactive({ |
|||
name: '', |
|||
region: undefined, |
|||
delivery: false, |
|||
resource: '', |
|||
}); |
|||
// 定义form表单的必填 |
|||
const rules: Record<string, Rule[]> = { |
|||
name: [ |
|||
{ required: true, message: '请输入能源种类', trigger: 'change' }, |
|||
], |
|||
resource: [{ required: true, message: 'Please select activity resource', trigger: 'change' }], |
|||
}; |
|||
// 定义计量单位级联选择的变量 |
|||
const options: CascaderProps['options'] = [ |
|||
{ |
|||
value: 'zhejiang', |
|||
label: 'Zhejiang', |
|||
children: [ |
|||
{ |
|||
value: 'hangzhou', |
|||
label: 'Hangzhou', |
|||
children: [ |
|||
{ |
|||
value: 'xihu', |
|||
label: 'West Lake', |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
value: 'jiangsu', |
|||
label: 'Jiangsu', |
|||
children: [ |
|||
{ |
|||
value: 'nanjing', |
|||
label: 'Nanjing', |
|||
children: [ |
|||
{ |
|||
value: 'zhonghuamen', |
|||
label: 'Zhong Hua Men', |
|||
}, |
|||
], |
|||
}, |
|||
], |
|||
}, |
|||
]; |
|||
// 定义自动采集节点数的变量 |
|||
const treeValue = ref<string>(); |
|||
const treeData = ref<TreeSelectProps['treeData']>([ |
|||
{ |
|||
title: 'parent 1', |
|||
value: 'parent 1', |
|||
children: [ |
|||
{ |
|||
title: 'parent 1-0', |
|||
value: 'parent 1-0', |
|||
children: [ |
|||
{ |
|||
title: 'my leaf', |
|||
value: 'leaf1', |
|||
}, |
|||
{ |
|||
title: 'your leaf', |
|||
value: 'leaf2', |
|||
}, |
|||
], |
|||
}, |
|||
{ |
|||
title: 'parent 1-1', |
|||
value: 'parent 1-1', |
|||
}, |
|||
], |
|||
}, |
|||
]); |
|||
// 获取表格数据 |
|||
const getTableList = () => { |
|||
fetch(energyConsumption.pageList).then((res) => { |
|||
console.log(res,'aaaaaa'); |
|||
}); |
|||
}; |
|||
getTableList() |
|||
// 点击确定提交 |
|||
const onSubmit = () => { |
|||
formRef.value |
|||
.validate() |
|||
.then(() => { |
|||
console.log('values', formState, toRaw(formState)); |
|||
}) |
|||
.catch(error => { |
|||
console.log('error', error); |
|||
}); |
|||
}; |
|||
const resetForm = () => { |
|||
formRef.value.resetFields(); |
|||
}; |
|||
// 点击新增按钮 |
|||
const addNewData = () => { |
|||
visible.value = true |
|||
} |
|||
// 关闭新增抽屉 |
|||
const onClose = () => { |
|||
visible.value = false; |
|||
}; |
|||
</script> |
|||
<style scoped lang="less"> |
|||
::v-deep .ant-table-title{ |
|||
display: flex; |
|||
} |
|||
::v-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,122 @@ |
|||
<template> |
|||
<a-table :columns="columns" :data-source="data" bordered /> |
|||
</template> |
|||
|
|||
<script lang="ts"> |
|||
import { defineComponent, watch, inject, ref, onMounted } from 'vue'; |
|||
import type { TableColumnType } from 'ant-design-vue'; |
|||
|
|||
export default defineComponent({ |
|||
name: 'EnvironmentTable', |
|||
setup() { |
|||
let data = ref<any[]>([]); |
|||
let columns = ref<TableColumnType[]>([]); |
|||
|
|||
interface PageData { |
|||
graphTableList: any[]; |
|||
graphTableColumns: any[]; |
|||
graphGraphList: any[]; |
|||
} |
|||
const pageData = inject<PageData>('pageData'); |
|||
|
|||
if (!pageData) { |
|||
throw new Error('pageData is not provided'); |
|||
} |
|||
// 监听 pageData 的变化 |
|||
watch( |
|||
() => pageData as PageData, |
|||
(_newValue, _oldValue) => { |
|||
data.value = pageData.graphTableList; |
|||
|
|||
let columnA: any[] = [...column]; |
|||
columnA.push(...pageData.graphTableColumns); |
|||
columns.value = columnA; |
|||
// pageData.graphList; |
|||
// 执行你的逻辑代码 |
|||
}, |
|||
{ deep: true }, |
|||
); |
|||
|
|||
const getRowSpan = (dataIndex: string, record: any, data: any, dependents: string[] = []) => { |
|||
let rowSpan = 1; |
|||
for (let i = data.indexOf(record) + 1; i < data.length; i++) { |
|||
let shouldMerge = true; |
|||
for (const dependent of dependents) { |
|||
if (data[i][dependent] !== record[dependent]) { |
|||
shouldMerge = false; |
|||
break; |
|||
} |
|||
} |
|||
if (shouldMerge && data[i][dataIndex] === record[dataIndex]) { |
|||
rowSpan++; |
|||
} else { |
|||
break; |
|||
} |
|||
} |
|||
return rowSpan; |
|||
}; |
|||
|
|||
const column: TableColumnType[] = [ |
|||
{ |
|||
title: '设备/组名', |
|||
dataIndex: 'name', |
|||
customCell: (record, rowIndex) => { |
|||
if (rowIndex == undefined) { |
|||
return { |
|||
rowSpan: 0, |
|||
colSpan: 0, |
|||
}; |
|||
} |
|||
const rowSpan = getRowSpan('name', record, data.value); |
|||
if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) { |
|||
return { |
|||
rowSpan: 0, |
|||
colSpan: 0, |
|||
}; |
|||
} |
|||
return { |
|||
rowSpan: rowSpan, |
|||
}; |
|||
}, |
|||
}, |
|||
{ |
|||
title: '参数名称', |
|||
dataIndex: 'paramName', |
|||
customCell: (record, rowIndex) => { |
|||
if (rowIndex == undefined) { |
|||
return { |
|||
rowSpan: 0, |
|||
colSpan: 0, |
|||
}; |
|||
} |
|||
const rowSpan = getRowSpan('paramName', record, data.value, ['name']); |
|||
if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) { |
|||
return { |
|||
rowSpan: 0, |
|||
colSpan: 0, |
|||
}; |
|||
} |
|||
return { |
|||
rowSpan: rowSpan, |
|||
}; |
|||
}, |
|||
}, |
|||
]; |
|||
|
|||
onMounted(() => { |
|||
data.value = pageData.graphTableList; |
|||
|
|||
let columnA: any[] = [...column]; |
|||
columnA.push(...pageData.graphTableColumns); |
|||
columns.value = columnA; |
|||
}); |
|||
return { |
|||
data, |
|||
column, |
|||
columns, |
|||
}; |
|||
}, |
|||
}); |
|||
</script> |
|||
|
|||
<style lang="less" scoped></style> |
|||
@ -0,0 +1,88 @@ |
|||
<!-- eslint-disable vue/multi-word-component-names --> |
|||
<template> |
|||
<a-tabs v-model:activeKey="activeKey" style="height: 8%"> |
|||
<a-tab-pane key="1" tab="图表" /> |
|||
<a-tab-pane key="2" tab="分析" /> |
|||
</a-tabs> |
|||
<a-row type="flex" style="height: 92%"> |
|||
<a-col :span="4"> |
|||
<div style="padding: 0 20px; width: 100%; height: 100%"> |
|||
<tree ref="treeRef" /> |
|||
</div> |
|||
</a-col> |
|||
<a-col :span="20"> |
|||
<div style="width: 100%; height: 100%"> |
|||
<div class="ns-right-title"> |
|||
<span>统计数据</span> |
|||
<div class="button"> |
|||
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" /> |
|||
<ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" /> |
|||
</div> |
|||
</div> |
|||
<div v-if="activeKey == '1'" style="height: 90%"> |
|||
<graph-graph ref="graphRef" v-if="isGraph" /> |
|||
<environment-table ref="tableRef" v-else /> |
|||
</div> |
|||
</div> |
|||
</a-col> |
|||
</a-row> |
|||
</template> |
|||
|
|||
<script lang="ts" setup> |
|||
import { ref } from 'vue'; |
|||
import tree from './tree/index.vue'; |
|||
import graphGraph from './graphGraph/index.vue'; |
|||
import environmentTable from './graphTable/index.vue'; |
|||
|
|||
const iconName = ref('biaoge'); |
|||
|
|||
const treeRef = ref(); |
|||
const graphRef = ref(); |
|||
const tableRef = ref(); |
|||
|
|||
let isGraph = ref(true); |
|||
const activeKey = ref('1'); |
|||
|
|||
defineOptions({ |
|||
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效 |
|||
}); |
|||
|
|||
const downloadChart = () => { |
|||
if (activeKey.value == '1' && isGraph) { |
|||
if (graphRef.value) { |
|||
graphRef.value.downloadChart(); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
function change() { |
|||
isGraph.value = !isGraph.value; |
|||
if (iconName.value == 'biaoge') { |
|||
iconName.value = 'bingtu'; |
|||
} else { |
|||
iconName.value = 'biaoge'; |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.ns-right-title { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
user-select: text; |
|||
margin-bottom: 5px; |
|||
padding-bottom: 10px; |
|||
padding-top: 10px; |
|||
border-bottom: 1px solid #e9e9e9; |
|||
|
|||
> span { |
|||
padding-left: 10px; |
|||
line-height: 20px; |
|||
} |
|||
} |
|||
.button { |
|||
display: inline-block; |
|||
padding-right: 10px; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue