Merge branch 'temp' of http://123.60.103.97:3000/xuziqiang/SaaS-lib into temp
This commit is contained in:
@@ -48,169 +48,24 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
// :deep(.ant-menu-item),
|
||||
// :deep(.ant-menu-submenu-title) {
|
||||
// &:not(.ant-menu-item-selected) {
|
||||
// // &:not(.ant-menu-item-active) {
|
||||
// .anticon {
|
||||
// color: rgb(141, 150, 163);
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// :deep(.ns-content) {
|
||||
// // padding-top: 80px !important;
|
||||
// }
|
||||
// #app {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
|
||||
// :deep(.ant-menu-title-content) {
|
||||
// background: unset !important;
|
||||
// z-index: 9 !important;
|
||||
// }
|
||||
// :deep(.ns-left-menu) {
|
||||
// .ant-menu-item-selected {
|
||||
// // color: #fff !important;
|
||||
// background: @primary-color;
|
||||
// border-radius: 12px;
|
||||
// // height: 40px;
|
||||
// // line-height: 40px;
|
||||
// padding: 5px @ns-gap;
|
||||
// position: relative;
|
||||
// a {
|
||||
// color: @white !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .ant-menu-item-active,
|
||||
// .ant-submenu-item-active {
|
||||
// // color: rgba(@primary-color, 0.1) !important;
|
||||
// }
|
||||
// }
|
||||
|
||||
// :deep(.ant-menu-light.ant-menu-horizontal > .ant-menu-item:hover) {
|
||||
// // background: @primary-color;
|
||||
// }
|
||||
// // :deep(.ant-menu-inline .ant-menu-submenu-title) {
|
||||
// // color: rgba(255, 255, 255, 0.9) !important;
|
||||
// // }
|
||||
// :deep(.ns-left-menu .ant-layout-sider-children .ant-menu-sub.ant-menu-inline) {
|
||||
// // position: relative;
|
||||
// // &::before {
|
||||
// // display: flex;
|
||||
// // width: 2px;
|
||||
// // height: calc(100% - 40px);
|
||||
// // position: absolute;
|
||||
// // top: 20px;
|
||||
// // left: 20px;
|
||||
// // content: '';
|
||||
// // background-color: rgba(255, 255, 255, 0.2);
|
||||
// // }
|
||||
// }
|
||||
|
||||
// //*************************含tab的 list列表样式 */
|
||||
// :deep(.tabListTable) {
|
||||
// .ns-table-title {
|
||||
// text-align: left;
|
||||
// height: 46px;
|
||||
// line-height: 46px;
|
||||
// font-size: 18px;
|
||||
// font-weight: bold;
|
||||
// user-select: text;
|
||||
// padding-left: 16px;
|
||||
// background: #fff;
|
||||
// width: calc(100% + 32px);
|
||||
// margin-left: -16px;
|
||||
// }
|
||||
// .tabs-list {
|
||||
// overflow: visible !important;
|
||||
// }
|
||||
// .ant-tabs-nav {
|
||||
// width: calc(100% + 32px);
|
||||
// margin-left: -16px !important;
|
||||
// background: #fff;
|
||||
// }
|
||||
// .ant-tabs-nav-wrap {
|
||||
// padding: 0 16px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// //*********************详情页返回修改 */
|
||||
// :deep(.nsDetailView) {
|
||||
// min-height: 100%;
|
||||
// height: 100%;
|
||||
// .ns-detail-content {
|
||||
// padding: 0px 24px;
|
||||
// border-top: 16px solid #e5ebf0;
|
||||
// }
|
||||
// .ant-descriptions-item-label {
|
||||
// color: rgba(0, 0, 0, 0.5);
|
||||
// font-family: PingFang SC;
|
||||
// font-size: 14px;
|
||||
// }
|
||||
// .ant-descriptions-item-content {
|
||||
// color: rgba(0, 0, 0, 0.95);
|
||||
// font-family: PingFang SC;
|
||||
// font-size: 14px;
|
||||
// }
|
||||
// .ant-descriptions-title {
|
||||
// &::after {
|
||||
// content: '';
|
||||
// width: 75px;
|
||||
// height: 7px;
|
||||
// display: block;
|
||||
// background: linear-gradient(90deg, #537fff 0%, #fff 82.67%);
|
||||
// margin-left: 2px;
|
||||
// margin-top: -2px;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .ant-descriptions-row > th,
|
||||
// .ant-descriptions-row > td {
|
||||
// padding-bottom: 8px;
|
||||
// }
|
||||
// .ns-page-header {
|
||||
// margin-bottom: 0 !important;
|
||||
// padding-top: 7px !important;
|
||||
// padding-bottom: 7px !important;
|
||||
// width: calc(100% + 32px);
|
||||
// margin-left: -16px;
|
||||
// .title {
|
||||
// cursor: pointer;
|
||||
// font-size: 18px !important;
|
||||
// }
|
||||
// }
|
||||
// .ant-descriptions-header {
|
||||
// margin: 16px 0 16px 0 !important;
|
||||
|
||||
// .ant-descriptions-title {
|
||||
// line-height: 16px;
|
||||
// font-size: 16px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// :deep(.ns-detail .ant-descriptions-header .descriptions-title) {
|
||||
// &:after {
|
||||
// content: '';
|
||||
// width: 75px;
|
||||
// height: 7px;
|
||||
// display: block;
|
||||
// background: linear-gradient(90deg, @primary-color 0%, #fff 82.67%);
|
||||
// margin-left: 2px;
|
||||
// margin-top: -2px;
|
||||
// }
|
||||
// }
|
||||
// :deep(.ant-descriptions-header .descriptions-title) {
|
||||
// &:after {
|
||||
// content: '';
|
||||
// width: 75px;
|
||||
// height: 7px;
|
||||
// display: block;
|
||||
// background: linear-gradient(90deg, @primary-color 0%, #fff 82.67%);
|
||||
// margin-left: 2px;
|
||||
// margin-top: -2px;
|
||||
// }
|
||||
// }
|
||||
:deep(.ant-tree-node-content-wrapper) {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
:deep(.ns-table-search) {
|
||||
.ns-flexv2-form {
|
||||
.ns-operate {
|
||||
text-align: left;
|
||||
margin-left: 0;
|
||||
.ant-btn {
|
||||
margin: 0;
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ns-form-body {
|
||||
max-width: 1000px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@@ -31,4 +31,8 @@ export enum quickCalculation {
|
||||
creat = '/carbon-smart/api/carbon/energy/correlation/creat',
|
||||
update = '/carbon-smart/api/carbon/energy/correlation/update',
|
||||
del = '/carbon-smart/api/carbon/energy/correlation/del',
|
||||
}
|
||||
// 碳排管理-碳排统计接口
|
||||
export enum carbonEmission {
|
||||
carbonEmissionStatistics = '/carbon-smart/api/carbon/energy/correlation/carbonEmissionStatistics',
|
||||
}
|
13
hx-ai-intelligent/src/api/monitor.ts
Normal file
13
hx-ai-intelligent/src/api/monitor.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
export enum deviceMonitor {
|
||||
// getTableList = '/carbon/emission/factor/queryCarbonFactorPage',
|
||||
// addNewData = '/carbon/emission/factor/creatOrUpdate',
|
||||
// editUser = '/carbon-smart/api/user/edit',
|
||||
// frozen = '/carbon-smart/api/user/frozen',
|
||||
// resetPwd = '/carbon-smart/api/user/resetPwd',
|
||||
// del = '/carbon-smart/api/user/del',
|
||||
// batchDel = '/carbon-smart/api/user/batchDel',
|
||||
// getCarbonFactorTree = '/carbon/emission/type/getCarbonFactorTree',
|
||||
// queryDeptTree = '/carbon-smart/api/user/queryDeptTree',
|
||||
// queryUserPerList = '/carbon-smart/api/user/queryUserPerList',
|
||||
getDeviceGraph = '/carbon-smart/api/monitor/getDeviceGraph',
|
||||
}
|
@@ -31,7 +31,6 @@ const organizationManage = {
|
||||
{ title: '重置密码', code: 'userCodeReset' },
|
||||
{ title: '删除', code: 'userDelete' },
|
||||
],
|
||||
// backApi: [],
|
||||
},
|
||||
},
|
||||
],
|
||||
@@ -50,7 +49,16 @@ const organizationManage = {
|
||||
meta: {
|
||||
title: '部门/权限',
|
||||
keepAlive: true,
|
||||
// backApi: [],
|
||||
operates: [
|
||||
{ title: '新增部门', code: 'authorityDeptAdd' },
|
||||
{ title: '新增子部门', code: 'authorityDeptSonAdd' },
|
||||
{ title: '删除部门', code: 'authorityDeptDelete' },
|
||||
{ title: '编辑部门', code: 'authorityDeptEdit' },
|
||||
{ title: '新增角色', code: 'authorityRoleAdd' },
|
||||
{ title: '新增子角色', code: 'authorityRoleSonAdd' },
|
||||
{ title: '删除角色', code: 'authorityRoleDelete' },
|
||||
{ title: '编辑角色', code: 'authorityRoleEdit' },
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
|
@@ -1,179 +0,0 @@
|
||||
<template>
|
||||
<a-table :columns="columns" :data-source="data" bordered />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, watch, ref, onMounted } from 'vue';
|
||||
import type { TableColumnType } from 'ant-design-vue';
|
||||
import { inject } from 'vue';
|
||||
|
||||
// let data: any[] = [];
|
||||
|
||||
export default defineComponent({
|
||||
name: 'EnvironmentTable',
|
||||
setup() {
|
||||
let data = ref<any[]>([]);
|
||||
let columns = ref<TableColumnType[]>([]);
|
||||
|
||||
interface PageData {
|
||||
tableList: any[];
|
||||
tableColumns: any[];
|
||||
graphList: 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.tableList;
|
||||
|
||||
let columnA: any[] = [...column];
|
||||
columnA.push(...pageData.tableColumns);
|
||||
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: 'key',
|
||||
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].key == record.key) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
rowSpan: rowSpan,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
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: 'position',
|
||||
customCell: (record, rowIndex) => {
|
||||
if (rowIndex == undefined) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
const rowSpan = getRowSpan('position', record, data.value, ['name']);
|
||||
if (
|
||||
rowIndex != 0 &&
|
||||
data.value[rowIndex - 1].name == record.name &&
|
||||
data.value[rowIndex - 1].position == record.position
|
||||
) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
rowSpan: rowSpan,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '计量单位',
|
||||
dataIndex: 'unit',
|
||||
customCell: (record, rowIndex) => {
|
||||
if (rowIndex == undefined) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
const rowSpan = getRowSpan('unit', record, data.value, ['name', 'position']);
|
||||
if (
|
||||
rowIndex != 0 &&
|
||||
data.value[rowIndex - 1].name == record.name &&
|
||||
data.value[rowIndex - 1].position == record.position &&
|
||||
data.value[rowIndex - 1].unit == record.unit
|
||||
) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
rowSpan: rowSpan,
|
||||
};
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
onMounted(() => {
|
||||
data.value = pageData.tableList;
|
||||
|
||||
let columnA: any[] = [...column];
|
||||
columnA.push(...pageData.tableColumns);
|
||||
columns.value = columnA;
|
||||
});
|
||||
return {
|
||||
data,
|
||||
column,
|
||||
columns,
|
||||
pageData,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
@@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-table
|
||||
:columns="tableColumns"
|
||||
:columns="column"
|
||||
:data-source="data"
|
||||
bordered
|
||||
:pagination="false"
|
||||
:scroll="{ x: 2000 }">
|
||||
<template #title>
|
||||
<a-date-picker v-model:value="selectYear" picker="year" @change="changeYearData" />
|
||||
<a-date-picker v-model:value="selectYear" picker="year" @change="changeYearData" valueFormat="YYYY" />
|
||||
</template>
|
||||
</a-table>
|
||||
<a-pagination
|
||||
@@ -24,36 +24,146 @@
|
||||
import { ref } from 'vue';
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { Pagination } from 'ant-design-vue';
|
||||
import { tableColumns } from '../config';
|
||||
import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import { carbonEmission } from '/@/api/carbonEmissionFactorLibrary';
|
||||
defineOptions({
|
||||
energyType: 'CarbonEmissions', // 与页面路由name一致缓存才可生效
|
||||
components: {
|
||||
'a-pagination': Pagination,
|
||||
},
|
||||
});
|
||||
const data = ref([]);
|
||||
const selectYear = ref<Dayjs>();
|
||||
const total = ref<number>()
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
})
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
const fetch = (api, params = { orgId } ) => {
|
||||
return http.post(api, params);
|
||||
};
|
||||
const data = ref([]);
|
||||
const selectYear = ref<Dayjs>(dayjs( new Date().getFullYear().toString()));
|
||||
const total = ref<number>()
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
year: selectYear.value.format('YYYY'),
|
||||
orgId: orgId.value
|
||||
})
|
||||
|
||||
// 年份选择改变触发
|
||||
const changeYearData = () => {
|
||||
queryParams.value.year = selectYear.value.format('YYYY')
|
||||
queryParams.value.year = selectYear.value
|
||||
getTableList()
|
||||
}
|
||||
// 表头
|
||||
const column: TableColumnsType [] = [
|
||||
{
|
||||
title: '排放类型',
|
||||
dataIndex: 'cnValue',
|
||||
customCell: (record, rowIndex) => {
|
||||
if (rowIndex == undefined) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
const rowSpan = getRowSpan('cnValue', record, data.value);
|
||||
if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
return {
|
||||
rowSpan: rowSpan,
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '能源种类',
|
||||
dataIndex: 'energyType',
|
||||
},
|
||||
{
|
||||
title: '计量单位',
|
||||
dataIndex: 'unit',
|
||||
},
|
||||
{
|
||||
title: '加权平均',
|
||||
dataIndex: 'averageFactorValue',
|
||||
},
|
||||
{
|
||||
title: '全年',
|
||||
dataIndex: 'carbonYearly',
|
||||
},
|
||||
{
|
||||
title: '1月',
|
||||
dataIndex: 'jan',
|
||||
},
|
||||
{
|
||||
title: '2月',
|
||||
dataIndex: 'feb',
|
||||
},
|
||||
{
|
||||
title: '3月',
|
||||
dataIndex: 'mar',
|
||||
},
|
||||
{
|
||||
title: '4月',
|
||||
dataIndex: 'apr',
|
||||
},
|
||||
{
|
||||
title: '5月',
|
||||
dataIndex: 'may',
|
||||
},
|
||||
{
|
||||
title: '6月',
|
||||
dataIndex: 'jun',
|
||||
},
|
||||
{
|
||||
title: '7月',
|
||||
dataIndex: 'jul',
|
||||
},
|
||||
{
|
||||
title: '8月',
|
||||
dataIndex: 'aug',
|
||||
},
|
||||
{
|
||||
title: '9月',
|
||||
dataIndex: 'sep',
|
||||
},
|
||||
{
|
||||
title: '10月',
|
||||
dataIndex: 'oct',
|
||||
},
|
||||
{
|
||||
title: '11月',
|
||||
dataIndex: 'nov',
|
||||
},
|
||||
{
|
||||
title: '12月',
|
||||
dataIndex: 'dec',
|
||||
},
|
||||
];
|
||||
// 合并单元格
|
||||
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 getTableList = () => {
|
||||
fetch(energyConsumption.pageList , queryParams.value).then((res) => {
|
||||
fetch(carbonEmission.carbonEmissionStatistics , queryParams.value).then((res) => {
|
||||
data.value = res.data.records
|
||||
total.value = res.data.total
|
||||
});
|
||||
|
@@ -1,3 +1,4 @@
|
||||
// 能耗统计表表头
|
||||
export const tableColumns = [
|
||||
{
|
||||
title: '序号',
|
||||
@@ -78,6 +79,7 @@ export const tableColumns = [
|
||||
width: 130
|
||||
},
|
||||
];
|
||||
// 碳排速算表表头
|
||||
export const columns = [
|
||||
{
|
||||
title: '序号',
|
||||
@@ -101,8 +103,8 @@ export const columns = [
|
||||
},
|
||||
{
|
||||
title: '启用时间',
|
||||
className: 'startTime ',
|
||||
dataIndex: 'startTime ',
|
||||
className: 'startTime',
|
||||
dataIndex: 'startTime',
|
||||
},
|
||||
{
|
||||
title: '结束时间',
|
||||
@@ -120,6 +122,7 @@ export const columns = [
|
||||
width: 130
|
||||
},
|
||||
];
|
||||
// 碳排速算新增页中表头
|
||||
export const drawerColumns = [
|
||||
{
|
||||
title: '名称',
|
||||
|
@@ -16,7 +16,7 @@
|
||||
</template>
|
||||
</template>
|
||||
<template #title>
|
||||
<a-date-picker v-model:value="selectYear" picker="year" @change="changeYearData" />
|
||||
<a-date-picker v-model:value="selectYear" picker="year" @change="changeYearData" valueFormat="YYYY" />
|
||||
<div class="buttonGroup">
|
||||
<a-button type="primary" @click="addNewData">新增</a-button>
|
||||
<a-button type="primary">导入</a-button>
|
||||
@@ -54,14 +54,13 @@
|
||||
<a-input v-model:value="formState.energyType" placeholder="请输入能源种类" />
|
||||
</a-form-item>
|
||||
<a-form-item label="计量单位" name="unit">
|
||||
<a-cascader v-model:value="formState.unit" :options="options" />
|
||||
<a-cascader v-model:value="formState.unit" :options="measurementUnit" />
|
||||
</a-form-item>
|
||||
<a-form-item label="自动采集节点" name="collectionNode">
|
||||
<a-tree-select
|
||||
v-model:value="formState.collectionNode"
|
||||
:tree-line="true"
|
||||
:tree-data="treeData"
|
||||
tree-node-filter-prop="title"
|
||||
>
|
||||
</a-tree-select>
|
||||
</a-form-item>
|
||||
@@ -73,7 +72,7 @@
|
||||
</a-form-item>
|
||||
<a-form-item label="排放类型" name="emissionType" :required="isRequired">
|
||||
<a-select v-model:value="formState.emissionType" placeholder="请选择排放类型">
|
||||
<a-select-option v-for="(item, index) in emissionTypeDic" :key="index" :value="item.cnValue">
|
||||
<a-select-option v-for="(item, index) in emissionTypeDic" :key="index" :value="item.id">
|
||||
{{ item.cnValue }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
@@ -159,10 +158,11 @@
|
||||
import { Pagination,message,Modal } from 'ant-design-vue';
|
||||
import { InboxOutlined } from '@ant-design/icons-vue';
|
||||
import type { CascaderProps,TreeSelectProps,UploadChangeParam } from 'ant-design-vue';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
import dayjs, { Dayjs } from 'dayjs';
|
||||
import { http } from '/nerv-lib/util/http';
|
||||
import { tableColumns } from '../config';
|
||||
import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
|
||||
import { energyConsumption,carbonEmissionFactorLibrary } from '/@/api/carbonEmissionFactorLibrary';
|
||||
import { group } from '/@/api/deviceManage';
|
||||
import { dict } from '/@/api';
|
||||
defineOptions({
|
||||
energyType: 'EnergyConsumption', // 与页面路由name一致缓存才可生效
|
||||
@@ -176,12 +176,13 @@
|
||||
const fetch = (api, params = { orgId } ) => {
|
||||
return http.post(api, params);
|
||||
};
|
||||
const selectYear = ref<Dayjs>();
|
||||
const selectYear = ref<Dayjs>(dayjs( new Date().getFullYear().toString()));
|
||||
const total = ref<number>()
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
orgId: orgId.value,
|
||||
year: selectYear.value.format('YYYY')
|
||||
})
|
||||
const isRequired = ref(false);
|
||||
const visible = ref(false);
|
||||
@@ -217,74 +218,15 @@
|
||||
energyType: [{ required: true, message: '请输入能源种类', trigger: 'change' }],
|
||||
isComputeCarbon: [{ required: true, message: '请选择是否计算碳排', 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 options = ref([])
|
||||
// 排放类型的变量
|
||||
const emissionTypeDic = ref()
|
||||
// 计量单位的变量
|
||||
const measurementUnit = ref([])
|
||||
// 定义自动采集节点数的变量
|
||||
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 treeData = ref<TreeSelectProps['treeData']>([]);
|
||||
// 年份选择改变触发
|
||||
const changeYearData = () => {
|
||||
queryParams.value.year = selectYear.value.format('YYYY')
|
||||
queryParams.value.year = selectYear.value
|
||||
getTableList()
|
||||
}
|
||||
// 获取表格数据
|
||||
@@ -326,9 +268,19 @@
|
||||
});
|
||||
}else{
|
||||
fetch(energyConsumption.creat , formState.value).then((res) => {
|
||||
visible.value = false
|
||||
message.success('操作成功!');
|
||||
getTableList()
|
||||
if(res.data === '新增数据已存在'){
|
||||
visible.value = false
|
||||
queryParams.value = formState.value
|
||||
queryParams.value.pageNum = 1,
|
||||
queryParams.value.pageSize = 10,
|
||||
queryParams.value.orgId = orgId.value,
|
||||
queryParams.value.year = selectYear.value.format('YYYY')
|
||||
getTableList()
|
||||
}else{
|
||||
visible.value = false
|
||||
message.success('操作成功!');
|
||||
getTableList()
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
@@ -338,12 +290,34 @@
|
||||
};
|
||||
// 获取字典值
|
||||
const getDictList = () => {
|
||||
// 获取排放类型的数据
|
||||
fetch(energyConsumption.getDicList , {grp: 'EMISSION_TYPE'}).then((res) => {
|
||||
emissionTypeDic.value = res.data
|
||||
});
|
||||
// fetch(energyConsumption.getDicList , {grp: 'MEASUREMENT_UNIT'}).then((res) => {
|
||||
// options.value = res.data
|
||||
// });
|
||||
// 获取计量单位的数据
|
||||
fetch(carbonEmissionFactorLibrary.dictionaryUnitManagement, { grp: 'MEASUREMENT_UNIT'}).then((res) => {
|
||||
measurementUnit.value = res.data
|
||||
measurementUnit.value = measurementUnit.value.map(item => ({
|
||||
value: item.cnValue,
|
||||
label: item.cnValue,
|
||||
children: item.children ? item.children.map(child => ({
|
||||
value: child.cnValue,
|
||||
label: child.cnValue
|
||||
})) : []
|
||||
}));
|
||||
});
|
||||
// 获取自动采集节点的数据
|
||||
fetch(group.queryDeviceGroupTree, { energyType: 'ELECTRICITY_USAGE',orgId: orgId.value }).then((res) => {
|
||||
treeData.value = res.data
|
||||
treeData.value = treeData.value.map(item => ({
|
||||
value: item.pointName,
|
||||
label: item.pointName,
|
||||
children: item.children ? item.children.map(child => ({
|
||||
value: child.pointName,
|
||||
label: child.pointName
|
||||
})) : []
|
||||
}));
|
||||
});
|
||||
}
|
||||
// 点击新增按钮
|
||||
const addNewData = () => {
|
||||
|
@@ -20,6 +20,7 @@
|
||||
v-if="gData && gData.length > 0"
|
||||
:expanded-keys="expandedKeys"
|
||||
:auto-expand-parent="autoExpandParent"
|
||||
:selectedKeys="selectedKeys"
|
||||
:tree-data="gData"
|
||||
show-line
|
||||
@expand="onExpand"
|
||||
@@ -84,12 +85,12 @@
|
||||
>
|
||||
<a-row>
|
||||
<a-col :span="12">
|
||||
<a-form-item ref="name" label="能源种类" name="energyType">
|
||||
<a-range-picker v-model:value="formState.energyType" picker="month" style="width:200px;" />
|
||||
<a-form-item ref="name" label="日期范围" name="dateRange">
|
||||
<a-range-picker v-model:value="formState.dateRange" picker="month" valueFormat="YYYY-MM" />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item ref="name" label="排放因子" name="energyType">
|
||||
<a-form-item ref="name" label="排放因子" name="emissionFactors">
|
||||
<ns-input v-model:value="formState.emissionFactors" disabled />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
@@ -197,7 +198,8 @@
|
||||
}
|
||||
return parentKey;
|
||||
};
|
||||
const expandedKeys = ref<(string | number)[]>([]);
|
||||
const expandedKeys = ref<(string | number)[]>(['0-0']);
|
||||
const selectedKeys = ref<string[]>(['0-0-0']);
|
||||
const searchValue = ref<string>('');
|
||||
const autoExpandParent = ref<boolean>(true);
|
||||
const gData = ref<TreeProps['treeData']>(genData);
|
||||
@@ -207,9 +209,11 @@
|
||||
autoExpandParent.value = false;
|
||||
};
|
||||
// 被选中的树节点
|
||||
const onSelect = (selectedKeys: string[], info: any) => {
|
||||
const onSelect = (selectedKey: string[], info: any) => {
|
||||
selectedKeys.value = selectedKey;
|
||||
if(info.selected){
|
||||
queryParams.value.energyType = info.node.id
|
||||
statsId.value = info.node.id
|
||||
getTableList()
|
||||
}
|
||||
};
|
||||
@@ -230,10 +234,15 @@
|
||||
// 查询因子分类树数据
|
||||
const onSearchTreeData = () => {
|
||||
};
|
||||
const statsId = ref()
|
||||
// 获取因子分类树数据
|
||||
const getTreeData = () => {
|
||||
fetch(quickCalculation.carbonQuickTree).then((res) => {
|
||||
gData.value = res.data
|
||||
debugger
|
||||
queryParams.value.energyType = gData.value[0].children[0].id
|
||||
statsId.value = gData.value[0].children[0].id
|
||||
getTableList()
|
||||
});
|
||||
};
|
||||
getTreeData()
|
||||
@@ -242,7 +251,7 @@
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
orgId: orgId.value,
|
||||
orgId: orgId.value
|
||||
})
|
||||
const tableData = ref([]);
|
||||
// 获取列表数据
|
||||
@@ -252,7 +261,6 @@
|
||||
total.value = res.data.total
|
||||
});
|
||||
};
|
||||
getTableList()
|
||||
// 分页器
|
||||
const onChange = (pageNumber: number,size: number) => {
|
||||
queryParams.value.pageNum = pageNumber;
|
||||
@@ -268,7 +276,8 @@
|
||||
|
||||
// 定义form表单的必填
|
||||
const rules: Record<string, Rule[]> = {
|
||||
energyType: [{ required: true, message: '请输入能源种类', trigger: 'change' }],
|
||||
dateRange: [{ required: true, message: '请选择日期范围', trigger: 'change' }],
|
||||
emissionFactors: [{ required: true, message: '请输入能源种类', trigger: 'change' }],
|
||||
};
|
||||
// 点击新增按钮
|
||||
const addNewData = () => {
|
||||
@@ -280,6 +289,7 @@
|
||||
const onSelectionChange = (selectedKeys, selectedRows) => {
|
||||
selectedRowKeys.value = selectedKeys;
|
||||
formState.value.emissionFactors = selectedRows[0].emissionFactors
|
||||
formState.value.carbonId = selectedRows[0].id
|
||||
};
|
||||
const queryData = ref({
|
||||
orgId: orgId.value,
|
||||
@@ -294,18 +304,41 @@
|
||||
};
|
||||
// 点击编辑按钮
|
||||
const editData = (record) =>{
|
||||
selectedRowKeys.value = [record.carbonId];
|
||||
formState.value.id = record.id
|
||||
formState.value.emissionFactors = record.emissionFactors
|
||||
formState.value.dateRange = [record.startTime, record.endTime];
|
||||
formState.value.carbonId = record.carbonId
|
||||
visible.value = true
|
||||
getNewTable()
|
||||
};
|
||||
// 点击确定提交
|
||||
const onSubmit = () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(() => {
|
||||
formState.value.statsId = statsId.value
|
||||
formState.value.startTime = formState.value.dateRange[0]
|
||||
formState.value.endTime = formState.value.dateRange[1]
|
||||
console.log('values', formState, toRaw(formState));
|
||||
fetch(quickCalculation.creat,formState.value).then((res) => {
|
||||
console.log(res);
|
||||
|
||||
});
|
||||
debugger
|
||||
if(formState.value.id){
|
||||
fetch(quickCalculation.update,formState.value).then((res) => {
|
||||
visible.value = false
|
||||
selectedRowKeys.value = [];
|
||||
formState.value = {}
|
||||
formRef.value.resetFields();
|
||||
getTableList()
|
||||
});
|
||||
}else{
|
||||
fetch(quickCalculation.creat,formState.value).then((res) => {
|
||||
visible.value = false
|
||||
selectedRowKeys.value = [];
|
||||
formState.value = {}
|
||||
formRef.value.resetFields();
|
||||
getTableList()
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
console.log('error', error);
|
||||
@@ -334,6 +367,7 @@
|
||||
const onClose = () => {
|
||||
visible.value = false;
|
||||
selectedRowKeys.value = [];
|
||||
formState.value = {}
|
||||
formRef.value.resetFields();
|
||||
};
|
||||
</script>
|
||||
|
@@ -242,7 +242,7 @@ export const tableConfig = (orgId) => {
|
||||
fieldMap: ['manufactureBeginDate', 'manufactureEndDate'],
|
||||
componentProps: {
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
placeholder: ['设备生产开始日期', '设备生产结束日期'],
|
||||
placeholder: ['生产开始日期', '生产结束日期'],
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -252,7 +252,7 @@ export const tableConfig = (orgId) => {
|
||||
fieldMap: ['purchaseBeginDate', 'purchaseEndDate'],
|
||||
componentProps: {
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
placeholder: ['设备采购开始日期', '设备采购结束日期'],
|
||||
placeholder: ['采购开始日期', '采购结束日期'],
|
||||
},
|
||||
},
|
||||
{
|
||||
@@ -262,7 +262,7 @@ export const tableConfig = (orgId) => {
|
||||
fieldMap: ['startBeginDate', 'startEndDate'],
|
||||
componentProps: {
|
||||
valueFormat: 'YYYY-MM-DD',
|
||||
placeholder: ['设备启用开始日期', '设备启用结束日期'],
|
||||
placeholder: ['启用开始日期', '启用结束日期'],
|
||||
},
|
||||
},
|
||||
],
|
||||
|
@@ -17,6 +17,7 @@
|
||||
tableList: any[];
|
||||
tableColumns: any[];
|
||||
graphList: any[];
|
||||
XData: any[];
|
||||
}
|
||||
const pageData = inject<PageData>('pageData');
|
||||
|
||||
@@ -37,32 +38,40 @@
|
||||
|
||||
const draw = () => {
|
||||
data.value = pageData.graphList;
|
||||
let XData = pageData.XData;
|
||||
if (chartInstance) {
|
||||
chartInstance.dispose();
|
||||
}
|
||||
chartInstance = echarts.init(graphChart.value);
|
||||
|
||||
var seriesList = [];
|
||||
var date = [];
|
||||
// var date = [];
|
||||
var legendList: string | any[] = [];
|
||||
for (let i = 0; i < data.value.length; i++) {
|
||||
date.push(data.value[i].date);
|
||||
seriesList.push({
|
||||
name: data.value[i].deviceName,
|
||||
data: data.value[i].data,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
});
|
||||
legendList.push(data.value[i].deviceName);
|
||||
// date.push(data.value[i].date);
|
||||
|
||||
for (let j = 0; j < data.value[i].data.length; j++) {
|
||||
if (seriesList.length < j + 1) {
|
||||
seriesList.push({
|
||||
name: data.value[i].data[j].name,
|
||||
data: [data.value[i].data[j].value],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
});
|
||||
} else {
|
||||
seriesList[j].data.push(data.value[i].data[j].value);
|
||||
}
|
||||
if (legendList.length == 0 || legendList.length < j + 1) {
|
||||
legendList.push(data.value[i].data[j].name);
|
||||
}
|
||||
}
|
||||
// for (let j = 0; j < data.value[i].data.length; j++) {
|
||||
// if (seriesList.length < j + 1) {
|
||||
// seriesList.push({
|
||||
// name: data.value[i].data[j].name,
|
||||
// data: [data.value[i].data[j].value],
|
||||
// type: 'line',
|
||||
// smooth: true,
|
||||
// });
|
||||
// } else {
|
||||
// seriesList[j].data.push(data.value[i].data[j].value);
|
||||
// }
|
||||
// if (legendList.length == 0 || legendList.length < j + 1) {
|
||||
// legendList.push(data.value[i].data[j].name);
|
||||
// }
|
||||
// }
|
||||
}
|
||||
const option = {
|
||||
legend: {
|
||||
@@ -76,7 +85,7 @@
|
||||
const date = params[0].name;
|
||||
const values = params
|
||||
.map((param: any) => {
|
||||
const unit = data.value.find((d) => d.date === date)?.unit || '';
|
||||
const unit = data.value.find((d) => d.date === date)?.devicePositionUnit || '';
|
||||
return `<tr>
|
||||
<td>${param.marker}${param.seriesName}</td>
|
||||
<td style="text-align: right;">${param.value} ${unit}</td>
|
||||
@@ -88,7 +97,7 @@
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: date,
|
||||
data: XData,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
|
@@ -12,6 +12,7 @@
|
||||
tableList: [],
|
||||
tableColumns: [],
|
||||
graphList: [],
|
||||
XData: [],
|
||||
});
|
||||
|
||||
// 使用 provide 函数来提供这个响应式对象
|
||||
|
@@ -16,7 +16,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<graph ref="graphRef" v-if="isGraph" />
|
||||
<environment-table ref="tableRef" v-else />
|
||||
<environment-table ref="tableRef" style="width: 100%" v-else />
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
@@ -1,5 +1,10 @@
|
||||
<template>
|
||||
<a-table :columns="columns" :data-source="data" bordered />
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="data"
|
||||
bordered
|
||||
style="width: 100%"
|
||||
:scroll="{ x: 2000 }" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -7,14 +12,14 @@
|
||||
import type { TableColumnType } from 'ant-design-vue';
|
||||
import { inject } from 'vue';
|
||||
|
||||
// let data: any[] = [];
|
||||
|
||||
export default defineComponent({
|
||||
name: 'EnvironmentTable',
|
||||
setup() {
|
||||
let data = ref<any[]>([]);
|
||||
let columns = ref<TableColumnType[]>([]);
|
||||
|
||||
let index = ref(0);
|
||||
|
||||
interface PageData {
|
||||
tableList: any[];
|
||||
tableColumns: any[];
|
||||
@@ -29,13 +34,14 @@
|
||||
watch(
|
||||
() => pageData as PageData,
|
||||
(_newValue, _oldValue) => {
|
||||
data.value = pageData.tableList;
|
||||
// data.value = pageData.tableList;
|
||||
|
||||
let columnA: any[] = [...column];
|
||||
columnA.push(...pageData.tableColumns);
|
||||
columns.value = columnA;
|
||||
// pageData.graphList;
|
||||
// 执行你的逻辑代码
|
||||
// let columnA: any[] = [...column];
|
||||
// columnA.push(...pageData.tableColumns);
|
||||
// columns.value = columnA;
|
||||
// // pageData.graphList;
|
||||
// // 执行你的逻辑代码
|
||||
init();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
@@ -62,7 +68,13 @@
|
||||
const column: TableColumnType[] = [
|
||||
{
|
||||
title: '序号',
|
||||
dataIndex: 'key',
|
||||
customRender: ({ record, index }) => {
|
||||
// 自定义单元格内容,这里返回序号
|
||||
if (index == 0 || data.value[index - 1].deviceName == record.deviceName) {
|
||||
return index + 1;
|
||||
}
|
||||
return index;
|
||||
},
|
||||
customCell: (record, rowIndex) => {
|
||||
if (rowIndex == undefined) {
|
||||
return {
|
||||
@@ -70,8 +82,8 @@
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
const rowSpan = getRowSpan('name', record, data.value);
|
||||
if (rowIndex != 0 && data.value[rowIndex - 1].key == record.key) {
|
||||
const rowSpan = getRowSpan('deviceName', record, data.value);
|
||||
if (rowIndex != 0 && data.value[rowIndex - 1].deviceName == record.deviceName) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
@@ -82,9 +94,16 @@
|
||||
};
|
||||
},
|
||||
},
|
||||
// {
|
||||
// title: '序号',
|
||||
// customRender: (text: any) => {
|
||||
// index.value += 1;
|
||||
// return index.value;
|
||||
// },
|
||||
// },
|
||||
{
|
||||
title: '设备名称',
|
||||
dataIndex: 'name',
|
||||
dataIndex: 'deviceName',
|
||||
customCell: (record, rowIndex) => {
|
||||
if (rowIndex == undefined) {
|
||||
return {
|
||||
@@ -92,8 +111,8 @@
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
const rowSpan = getRowSpan('name', record, data.value);
|
||||
if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
|
||||
const rowSpan = getRowSpan('deviceName', record, data.value);
|
||||
if (rowIndex != 0 && data.value[rowIndex - 1].deviceName == record.deviceName) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
colSpan: 0,
|
||||
@@ -106,7 +125,7 @@
|
||||
},
|
||||
{
|
||||
title: '设备点位',
|
||||
dataIndex: 'position',
|
||||
dataIndex: 'devicePositionName',
|
||||
customCell: (record, rowIndex) => {
|
||||
if (rowIndex == undefined) {
|
||||
return {
|
||||
@@ -114,11 +133,11 @@
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
const rowSpan = getRowSpan('position', record, data.value, ['name']);
|
||||
const rowSpan = getRowSpan('devicePositionName', record, data.value, ['deviceName']);
|
||||
if (
|
||||
rowIndex != 0 &&
|
||||
data.value[rowIndex - 1].name == record.name &&
|
||||
data.value[rowIndex - 1].position == record.position
|
||||
data.value[rowIndex - 1].deviceName == record.deviceName &&
|
||||
data.value[rowIndex - 1].devicePositionName == record.devicePositionName
|
||||
) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
@@ -132,7 +151,7 @@
|
||||
},
|
||||
{
|
||||
title: '计量单位',
|
||||
dataIndex: 'unit',
|
||||
dataIndex: 'devicePositionUnit',
|
||||
customCell: (record, rowIndex) => {
|
||||
if (rowIndex == undefined) {
|
||||
return {
|
||||
@@ -140,12 +159,15 @@
|
||||
colSpan: 0,
|
||||
};
|
||||
}
|
||||
const rowSpan = getRowSpan('unit', record, data.value, ['name', 'position']);
|
||||
const rowSpan = getRowSpan('devicePositionUnit', record, data.value, [
|
||||
'deviceName',
|
||||
'devicePositionName',
|
||||
]);
|
||||
if (
|
||||
rowIndex != 0 &&
|
||||
data.value[rowIndex - 1].name == record.name &&
|
||||
data.value[rowIndex - 1].position == record.position &&
|
||||
data.value[rowIndex - 1].unit == record.unit
|
||||
data.value[rowIndex - 1].deviceName == record.deviceName &&
|
||||
data.value[rowIndex - 1].devicePositionName == record.devicePositionName &&
|
||||
data.value[rowIndex - 1].devicePositionUnit == record.devicePositionUnit
|
||||
) {
|
||||
return {
|
||||
rowSpan: 0,
|
||||
@@ -157,14 +179,26 @@
|
||||
};
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'time',
|
||||
},
|
||||
];
|
||||
|
||||
onMounted(() => {
|
||||
const init = () => {
|
||||
index.value = 0;
|
||||
data.value = pageData.tableList;
|
||||
|
||||
let columnA: any[] = [...column];
|
||||
columnA.push(...pageData.tableColumns);
|
||||
let columnB: any[] = [];
|
||||
pageData.tableColumns.forEach((item) => {
|
||||
columnB.push({ title: item, dataIndex: item });
|
||||
});
|
||||
columnA.push(...columnB);
|
||||
columns.value = columnA;
|
||||
};
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
return {
|
||||
data,
|
||||
|
@@ -46,9 +46,6 @@
|
||||
<a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect">
|
||||
查询
|
||||
</a-button>
|
||||
<a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect11">
|
||||
模拟不同数据查询
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -60,6 +57,7 @@
|
||||
import { inject } from 'vue';
|
||||
import { http } from '/nerv-lib/util';
|
||||
import { device } from '/@/api/deviceManage';
|
||||
import { deviceMonitor } from '/@/api/monitor';
|
||||
|
||||
export default defineComponent({
|
||||
// eslint-disable-next-line vue/multi-word-component-names
|
||||
@@ -163,6 +161,7 @@
|
||||
tableList: any[];
|
||||
tableColumns: any[];
|
||||
graphList: any[];
|
||||
XData: any[];
|
||||
}
|
||||
const pageData = inject<PageData>('pageData');
|
||||
if (!pageData) {
|
||||
@@ -170,278 +169,180 @@
|
||||
}
|
||||
// 查询数据后放入pageData
|
||||
const getSelect = () => {
|
||||
pageData.tableList = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'AC_002(暖通电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
'1:00': '3626',
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
name: 'AC_002(暖通电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
'1:00': '3626',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'AC_003(照明电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
'1:00': '3626',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'AC_003(照明电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
'1:00': '3626',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'AC_004(给排水电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
'1:00': '3626',
|
||||
},
|
||||
];
|
||||
pageData.tableColumns = [
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'date',
|
||||
},
|
||||
{
|
||||
title: '1:00',
|
||||
dataIndex: '1:00',
|
||||
},
|
||||
];
|
||||
pageData.graphList = [
|
||||
{
|
||||
date: '2023-12-01 0:00',
|
||||
unit: 'V',
|
||||
data: [
|
||||
{
|
||||
name: 'AC_002(暖通电表)',
|
||||
value: '21',
|
||||
},
|
||||
{
|
||||
name: 'AC_003(照明电表)',
|
||||
value: '36',
|
||||
},
|
||||
{
|
||||
name: 'AC_004(给排水电表)',
|
||||
value: '5',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2023-12-02 0:00',
|
||||
unit: 'V',
|
||||
data: [
|
||||
{
|
||||
name: 'AC_002(暖通电表)',
|
||||
value: '26',
|
||||
},
|
||||
{
|
||||
name: 'AC_003(照明电表)',
|
||||
value: '25',
|
||||
},
|
||||
{
|
||||
name: 'AC_004(给排水电表)',
|
||||
value: '47',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2023-12-03 0:00',
|
||||
unit: 'V',
|
||||
data: [
|
||||
{
|
||||
name: 'AC_002(暖通电表)',
|
||||
value: '18',
|
||||
},
|
||||
{
|
||||
name: 'AC_003(照明电表)',
|
||||
value: '22',
|
||||
},
|
||||
{
|
||||
name: 'AC_004(给排水电表)',
|
||||
value: '26',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2023-12-04 0:00',
|
||||
unit: 'V',
|
||||
data: [
|
||||
{
|
||||
name: 'AC_002(暖通电表)',
|
||||
value: '40',
|
||||
},
|
||||
{
|
||||
name: 'AC_003(照明电表)',
|
||||
value: '15',
|
||||
},
|
||||
{
|
||||
name: 'AC_004(给排水电表)',
|
||||
value: '12',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2023-12-05 0:00',
|
||||
unit: 'V',
|
||||
data: [
|
||||
{
|
||||
name: 'AC_002(暖通电表)',
|
||||
value: '15',
|
||||
},
|
||||
{
|
||||
name: 'AC_003(照明电表)',
|
||||
value: '18',
|
||||
},
|
||||
{
|
||||
name: 'AC_004(给排水电表)',
|
||||
value: '15',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2023-12-06 0:00',
|
||||
unit: 'V',
|
||||
data: [
|
||||
{
|
||||
name: 'AC_002(暖通电表)',
|
||||
value: '15',
|
||||
},
|
||||
{
|
||||
name: 'AC_003(照明电表)',
|
||||
value: '18',
|
||||
},
|
||||
{
|
||||
name: 'AC_004(给排水电表)',
|
||||
value: '15',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
};
|
||||
// 测试查询 模拟不同数据
|
||||
const getSelect11 = () => {
|
||||
pageData.tableList = [
|
||||
{
|
||||
key: '1',
|
||||
name: 'AC_002(暖通电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
'1:00': '3626',
|
||||
'2:00': '2222',
|
||||
},
|
||||
{
|
||||
key: '1',
|
||||
name: 'AC_002(暖通电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
'1:00': '3626',
|
||||
'2:00': '2222',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'AC_003(照明电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
'1:00': '3626',
|
||||
'2:00': '2222',
|
||||
},
|
||||
{
|
||||
key: '2',
|
||||
name: 'AC_003(照明电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
'1:00': '3626',
|
||||
'2:00': '2222',
|
||||
},
|
||||
{
|
||||
key: '3',
|
||||
name: 'AC_004(给排水电表)',
|
||||
position: 'A 相电压',
|
||||
unit: 'V',
|
||||
date: '2023-12-01',
|
||||
'1:00': '3626',
|
||||
'2:00': '2222',
|
||||
},
|
||||
];
|
||||
pageData.tableColumns = [
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'date',
|
||||
},
|
||||
{
|
||||
title: '1:00',
|
||||
dataIndex: '1:00',
|
||||
},
|
||||
{
|
||||
title: '2:00',
|
||||
dataIndex: '2:00',
|
||||
},
|
||||
];
|
||||
pageData.graphList = [
|
||||
{
|
||||
date: '2023-12-01 0:00',
|
||||
unit: 'V',
|
||||
data: [
|
||||
{
|
||||
name: 'AC_002(暖通电表)',
|
||||
value: '21',
|
||||
},
|
||||
{
|
||||
name: 'AC_003(照明电表)',
|
||||
value: '36',
|
||||
},
|
||||
{
|
||||
name: 'AC_004(给排水电表)',
|
||||
value: '5',
|
||||
},
|
||||
{
|
||||
name: 'AC_005(1111111)',
|
||||
value: '14',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
date: '2023-12-02 0:00',
|
||||
unit: 'V',
|
||||
data: [
|
||||
{
|
||||
name: 'AC_002(暖通电表)',
|
||||
value: '26',
|
||||
},
|
||||
{
|
||||
name: 'AC_003(照明电表)',
|
||||
value: '25',
|
||||
},
|
||||
{
|
||||
name: 'AC_004(给排水电表)',
|
||||
value: '47',
|
||||
},
|
||||
{
|
||||
name: 'AC_005(1111111)',
|
||||
value: '28',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
http
|
||||
.post(deviceMonitor.getDeviceGraph, {
|
||||
deviceIds: ['HLlmTZp8-0601-0001', 'HLlmTZp-0804-0001'],
|
||||
devicePointCode: 'ua',
|
||||
devicePointId: 32,
|
||||
endDate: '2024-07-02',
|
||||
startDate: '2024-07-01',
|
||||
timeRate: '2',
|
||||
})
|
||||
.then((res) => {
|
||||
pageData.tableList = res.data.tableList;
|
||||
pageData.tableColumns = res.data.tableHeaderList;
|
||||
|
||||
pageData.graphList = res.data.graphData;
|
||||
pageData.XData = res.data.XData;
|
||||
});
|
||||
// pageData.tableList = [
|
||||
// {
|
||||
// key: '1',
|
||||
// name: 'AC_002(暖通电表)',
|
||||
// position: 'A 相电压',
|
||||
// unit: 'V',
|
||||
// date: '2023-12-01',
|
||||
// '1:00': '3626',
|
||||
// },
|
||||
// {
|
||||
// key: '1',
|
||||
// name: 'AC_002(暖通电表)',
|
||||
// position: 'A 相电压',
|
||||
// unit: 'V',
|
||||
// date: '2023-12-01',
|
||||
// '1:00': '3626',
|
||||
// },
|
||||
// {
|
||||
// key: '2',
|
||||
// name: 'AC_003(照明电表)',
|
||||
// position: 'A 相电压',
|
||||
// unit: 'V',
|
||||
// date: '2023-12-01',
|
||||
// '1:00': '3626',
|
||||
// },
|
||||
// {
|
||||
// key: '2',
|
||||
// name: 'AC_003(照明电表)',
|
||||
// position: 'A 相电压',
|
||||
// unit: 'V',
|
||||
// date: '2023-12-01',
|
||||
// '1:00': '3626',
|
||||
// },
|
||||
// {
|
||||
// key: '3',
|
||||
// name: 'AC_004(给排水电表)',
|
||||
// position: 'A 相电压',
|
||||
// unit: 'V',
|
||||
// date: '2023-12-01',
|
||||
// '1:00': '3626',
|
||||
// },
|
||||
// ];
|
||||
// pageData.tableColumns = [
|
||||
// {
|
||||
// title: '00:00',
|
||||
// dataIndex: '00:00',
|
||||
// },
|
||||
// ];
|
||||
// pageData.graphList = [
|
||||
// {
|
||||
// date: '2023-12-01 0:00',
|
||||
// unit: 'V',
|
||||
// data: [
|
||||
// {
|
||||
// name: 'AC_002(暖通电表)',
|
||||
// value: '21',
|
||||
// },
|
||||
// {
|
||||
// name: 'AC_003(照明电表)',
|
||||
// value: '36',
|
||||
// },
|
||||
// {
|
||||
// name: 'AC_004(给排水电表)',
|
||||
// value: '5',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// date: '2023-12-02 0:00',
|
||||
// unit: 'V',
|
||||
// data: [
|
||||
// {
|
||||
// name: 'AC_002(暖通电表)',
|
||||
// value: '26',
|
||||
// },
|
||||
// {
|
||||
// name: 'AC_003(照明电表)',
|
||||
// value: '25',
|
||||
// },
|
||||
// {
|
||||
// name: 'AC_004(给排水电表)',
|
||||
// value: '47',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// date: '2023-12-03 0:00',
|
||||
// unit: 'V',
|
||||
// data: [
|
||||
// {
|
||||
// name: 'AC_002(暖通电表)',
|
||||
// value: '18',
|
||||
// },
|
||||
// {
|
||||
// name: 'AC_003(照明电表)',
|
||||
// value: '22',
|
||||
// },
|
||||
// {
|
||||
// name: 'AC_004(给排水电表)',
|
||||
// value: '26',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// date: '2023-12-04 0:00',
|
||||
// unit: 'V',
|
||||
// data: [
|
||||
// {
|
||||
// name: 'AC_002(暖通电表)',
|
||||
// value: '40',
|
||||
// },
|
||||
// {
|
||||
// name: 'AC_003(照明电表)',
|
||||
// value: '15',
|
||||
// },
|
||||
// {
|
||||
// name: 'AC_004(给排水电表)',
|
||||
// value: '12',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// date: '2023-12-05 0:00',
|
||||
// unit: 'V',
|
||||
// data: [
|
||||
// {
|
||||
// name: 'AC_002(暖通电表)',
|
||||
// value: '15',
|
||||
// },
|
||||
// {
|
||||
// name: 'AC_003(照明电表)',
|
||||
// value: '18',
|
||||
// },
|
||||
// {
|
||||
// name: 'AC_004(给排水电表)',
|
||||
// value: '15',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// date: '2023-12-06 0:00',
|
||||
// unit: 'V',
|
||||
// data: [
|
||||
// {
|
||||
// name: 'AC_002(暖通电表)',
|
||||
// value: '15',
|
||||
// },
|
||||
// {
|
||||
// name: 'AC_003(照明电表)',
|
||||
// value: '18',
|
||||
// },
|
||||
// {
|
||||
// name: 'AC_004(给排水电表)',
|
||||
// value: '15',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// ];
|
||||
};
|
||||
|
||||
type RangeValue = [Dayjs, Dayjs];
|
||||
@@ -493,7 +394,6 @@
|
||||
dateRange,
|
||||
getDianWeiList,
|
||||
getSelect,
|
||||
getSelect11,
|
||||
disabledDate,
|
||||
onCalendarChange,
|
||||
onOpenChange,
|
||||
|
@@ -0,0 +1,36 @@
|
||||
export const tableColumns = [
|
||||
{
|
||||
title: '序号',
|
||||
customRender: (text: any) => {
|
||||
return text.index + 1;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'areaName',
|
||||
},
|
||||
{
|
||||
title: '温度(℃)',
|
||||
dataIndex: 'point',
|
||||
},
|
||||
{
|
||||
title: '湿度(%)',
|
||||
dataIndex: 'date',
|
||||
},
|
||||
{
|
||||
title: 'CO2浓度(ppm)',
|
||||
dataIndex: 'areaName',
|
||||
},
|
||||
{
|
||||
title: 'PM2.5(μg/m³)',
|
||||
dataIndex: 'point',
|
||||
},
|
||||
{
|
||||
title: 'TVOC(mg/m³)',
|
||||
dataIndex: 'date',
|
||||
},
|
||||
{
|
||||
title: 'TVOC(mg/m³)',
|
||||
dataIndex: '光照度(lux)',
|
||||
},
|
||||
];
|
@@ -0,0 +1,250 @@
|
||||
<!-- eslint-disable vue/v-on-event-hyphenation -->
|
||||
<template>
|
||||
<div>
|
||||
<a-table :columns="tableColumns" :data-source="data" bordered :pagination="false">
|
||||
<template #title>
|
||||
<div
|
||||
style="display: flex; align-items: center; justify-content: space-between; width: 100%">
|
||||
<div style="display: flex; align-items: center; width: 85%">
|
||||
<div style="width: 10%">数据报表</div>
|
||||
|
||||
<a-select
|
||||
v-model:value="frequencyValue"
|
||||
placeholder="请选择频率"
|
||||
style="width: 17%; margin-left: 10px"
|
||||
:options="frequencyOptions" />
|
||||
<!-- <a-date-picker style="width: 13%; margin-left: 10px" v-model:value="timeValue" /> -->
|
||||
<a-range-picker
|
||||
:value="hackValue || dateRange"
|
||||
:disabled-date="disabledDate"
|
||||
@change="onChangeDate"
|
||||
@openChange="onOpenChange"
|
||||
@calendarChange="onCalendarChange"
|
||||
style="width: 17%; margin-left: 10px"
|
||||
:placeholder="['请选择日期', '请选择日期']" />
|
||||
<a-button type="primary" style="margin-left: 10px" @click="getSelect"> 查询 </a-button>
|
||||
</div>
|
||||
<a-button type="primary"> 导出 </a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-pagination
|
||||
:current="queryParams.pageNum"
|
||||
:total="total"
|
||||
:page-size="queryParams.pageSize"
|
||||
style="display: flex; justify-content: center; margin-top: 16px"
|
||||
:show-size-changer="true"
|
||||
:show-quick-jumper="true"
|
||||
@change="onChange" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
// import { http } from '/nerv-lib/util/http';
|
||||
import { Pagination, SelectProps, TreeSelectProps, TableColumnType } from 'ant-design-vue';
|
||||
import { tableColumns } from './config';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
// import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
|
||||
defineOptions({
|
||||
energyType: 'AverageData', // 与页面路由name一致缓存才可生效
|
||||
components: {
|
||||
'a-pagination': Pagination,
|
||||
},
|
||||
});
|
||||
|
||||
const typeList = ref();
|
||||
// 采集频率
|
||||
const frequencyValue = ref<string | undefined>();
|
||||
|
||||
// 采集频率list
|
||||
const frequencyOptions = ref<SelectProps['options']>([]);
|
||||
|
||||
const treeData2 = ref<TreeSelectProps['treeData']>([]);
|
||||
const data = ref([]);
|
||||
// let tableColumns = ref<TableColumnType[]>([]);
|
||||
|
||||
const total = ref<number>();
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
|
||||
type RangeValue = [Dayjs, Dayjs];
|
||||
const dates = ref<RangeValue>();
|
||||
const hackValue = ref<RangeValue>();
|
||||
const dateRange = ref<[Dayjs, Dayjs] | undefined>();
|
||||
|
||||
const onChangeDate = (val: RangeValue) => {
|
||||
dateRange.value = val;
|
||||
};
|
||||
const onOpenChange = (open: boolean) => {
|
||||
if (open) {
|
||||
dates.value = [] as any;
|
||||
hackValue.value = [] as any;
|
||||
} else {
|
||||
hackValue.value = undefined;
|
||||
}
|
||||
};
|
||||
const disabledDate = (current: Dayjs) => {
|
||||
if (!dates.value || (dates.value as any).length === 0) {
|
||||
return false;
|
||||
}
|
||||
const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 2;
|
||||
const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 2;
|
||||
return tooEarly || tooLate;
|
||||
};
|
||||
const onCalendarChange = (val: RangeValue) => {
|
||||
dates.value = val;
|
||||
};
|
||||
// 获取表格数据
|
||||
const getTableList = () => {
|
||||
// fetch(energyConsumption.pageList, queryParams.value).then((res) => {
|
||||
// data.value = res.data.records;
|
||||
// total.value = res.data.total;
|
||||
// });
|
||||
};
|
||||
onMounted(() => {
|
||||
frequencyOptions.value = [
|
||||
{
|
||||
value: '1',
|
||||
label: '30分钟',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '小时',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '天',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '月',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '年',
|
||||
},
|
||||
];
|
||||
typeList.value = [
|
||||
{
|
||||
id: 1,
|
||||
value: '温度',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: 'CO2浓度',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: 'PM2.5',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
value: '光照度',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
value: 'TVOC',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
value: '湿度',
|
||||
},
|
||||
];
|
||||
treeData2.value = [
|
||||
{
|
||||
label: '办公区',
|
||||
value: '0-0',
|
||||
children: [
|
||||
{
|
||||
label: '办公一区',
|
||||
value: '0-0-0',
|
||||
},
|
||||
{
|
||||
label: '办公二区',
|
||||
value: '0-0-1',
|
||||
},
|
||||
{
|
||||
label: '办公三区',
|
||||
value: '0-0-2',
|
||||
},
|
||||
{
|
||||
label: '办公四区',
|
||||
value: '0-0-3',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '站厅',
|
||||
value: '0-1',
|
||||
|
||||
children: [
|
||||
{
|
||||
label: '站厅一区',
|
||||
value: '0-1-0',
|
||||
// disabled: true,
|
||||
},
|
||||
{
|
||||
label: '站厅二区',
|
||||
value: '0-1-1',
|
||||
},
|
||||
{
|
||||
label: '站厅三区',
|
||||
value: '0-1-2',
|
||||
},
|
||||
{
|
||||
label: '站厅四区',
|
||||
value: '0-1-3',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
// let tableColumnsB = [
|
||||
// {
|
||||
// title: '1:00',
|
||||
// dataIndex: '1:00',
|
||||
// },
|
||||
// {
|
||||
// title: '2:00',
|
||||
// dataIndex: '2:00',
|
||||
// },
|
||||
// {
|
||||
// title: '3:00',
|
||||
// dataIndex: '3:00',
|
||||
// },
|
||||
// {
|
||||
// title: '4:00',
|
||||
// dataIndex: '4:00',
|
||||
// },
|
||||
// ];
|
||||
// let columnA: any[] = [...tableColumnsA];
|
||||
// columnA.push(...tableColumnsB);
|
||||
// tableColumns.value = columnA;
|
||||
});
|
||||
|
||||
getTableList();
|
||||
// 分页器
|
||||
const onChange = (pageNumber: number, size: number) => {
|
||||
queryParams.value.pageNum = pageNumber;
|
||||
queryParams.value.pageSize = size;
|
||||
getTableList();
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
::v-deep .ant-table-title {
|
||||
display: flex;
|
||||
}
|
||||
::v-deep .ant-table-container {
|
||||
padding: 0px 16px;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
th.column-money,
|
||||
td.column-money {
|
||||
text-align: right !important;
|
||||
}
|
||||
</style>
|
@@ -0,0 +1,20 @@
|
||||
export const tableColumns = [
|
||||
{
|
||||
title: '序号',
|
||||
customRender: (text: any) => {
|
||||
return text.index + 1;
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '区域名称',
|
||||
dataIndex: 'areaName',
|
||||
},
|
||||
{
|
||||
title: '点位',
|
||||
dataIndex: 'point',
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
dataIndex: 'date',
|
||||
},
|
||||
];
|
@@ -0,0 +1,243 @@
|
||||
<!-- eslint-disable vue/multi-word-component-names -->
|
||||
<template>
|
||||
<div>
|
||||
<a-table
|
||||
:columns="tableColumns"
|
||||
:data-source="data"
|
||||
bordered
|
||||
:pagination="false"
|
||||
:scroll="{ x: 100 }">
|
||||
<template #title>
|
||||
<div
|
||||
style="display: flex; align-items: center; justify-content: space-between; width: 100%">
|
||||
<div style="display: flex; align-items: center; width: 85%">
|
||||
<div style="width: 10%">数据报表</div>
|
||||
<a-select
|
||||
v-model:value="typeValue"
|
||||
placeholder="请选择环境参数"
|
||||
style="width: 15%"
|
||||
:options="typeList" />
|
||||
<a-tree-select
|
||||
v-model:value="quyuvalue"
|
||||
style="width: 15%; margin-left: 10px"
|
||||
:tree-data="treeData2"
|
||||
tree-checkable
|
||||
allow-clear
|
||||
placeholder="请选择区域"
|
||||
tree-node-filter-prop="label"
|
||||
:maxTagCount="1" />
|
||||
<a-select
|
||||
v-model:value="frequencyValue"
|
||||
placeholder="请选择采集频率"
|
||||
style="width: 15%; margin-left: 10px"
|
||||
:options="frequencyOptions" />
|
||||
<a-date-picker style="width: 15%; margin-left: 10px" v-model:value="timeValue" />
|
||||
<a-button type="primary" style="margin-left: 10px" @click="getSelect"> 查询 </a-button>
|
||||
</div>
|
||||
<a-button type="primary"> 导出 </a-button>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
<a-pagination
|
||||
:current="queryParams.pageNum"
|
||||
:total="total"
|
||||
:page-size="queryParams.pageSize"
|
||||
style="display: flex; justify-content: center; margin-top: 16px"
|
||||
:show-size-changer="true"
|
||||
:show-quick-jumper="true"
|
||||
@change="onChange" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted, defineOptions } from 'vue';
|
||||
// import { http } from '/nerv-lib/util/http';
|
||||
import { Pagination, SelectProps, TreeSelectProps, TableColumnType } from 'ant-design-vue';
|
||||
import { tableColumns as tableColumnsA } from './config';
|
||||
import type { Dayjs } from 'dayjs';
|
||||
// import { energyConsumption } from '/@/api/carbonEmissionFactorLibrary';
|
||||
defineOptions({
|
||||
energyType: 'HistoryData', // 与页面路由name一致缓存才可生效
|
||||
components: {
|
||||
'a-pagination': Pagination,
|
||||
},
|
||||
});
|
||||
const typeList = ref();
|
||||
const typeValue = ref();
|
||||
const quyuvalue = ref<string[]>([]);
|
||||
// 采集频率
|
||||
const frequencyValue = ref<string | undefined>();
|
||||
|
||||
// 采集频率list
|
||||
const frequencyOptions = ref<SelectProps['options']>([]);
|
||||
|
||||
const treeData2 = ref<TreeSelectProps['treeData']>([]);
|
||||
const data = ref([]);
|
||||
const timeValue = ref<Dayjs>();
|
||||
let tableColumns = ref<TableColumnType[]>([]);
|
||||
|
||||
const total = ref<number>();
|
||||
const queryParams = ref({
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
});
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
// const fetch = (api, params = { orgId }) => {
|
||||
// return http.post(api, params);
|
||||
// };
|
||||
|
||||
// 年份选择改变触发
|
||||
// const changeYearData = () => {
|
||||
// queryParams.value.year = selectYear.value.format('YYYY');
|
||||
// getTableList();
|
||||
// };
|
||||
// 获取表格数据
|
||||
const getTableList = () => {
|
||||
// fetch(energyConsumption.pageList, queryParams.value).then((res) => {
|
||||
// data.value = res.data.records;
|
||||
// total.value = res.data.total;
|
||||
// });
|
||||
};
|
||||
onMounted(() => {
|
||||
frequencyOptions.value = [
|
||||
{
|
||||
value: '1',
|
||||
label: '5分钟',
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '10分钟',
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '30分钟',
|
||||
},
|
||||
{
|
||||
value: '4',
|
||||
label: '1小时',
|
||||
},
|
||||
{
|
||||
value: '5',
|
||||
label: '天',
|
||||
},
|
||||
];
|
||||
typeList.value = [
|
||||
{
|
||||
id: 1,
|
||||
value: '温度',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: 'CO2浓度',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: 'PM2.5',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
value: '光照度',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
value: 'TVOC',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
value: '湿度',
|
||||
},
|
||||
];
|
||||
treeData2.value = [
|
||||
{
|
||||
label: '办公区',
|
||||
value: '0-0',
|
||||
children: [
|
||||
{
|
||||
label: '办公一区',
|
||||
value: '0-0-0',
|
||||
},
|
||||
{
|
||||
label: '办公二区',
|
||||
value: '0-0-1',
|
||||
},
|
||||
{
|
||||
label: '办公三区',
|
||||
value: '0-0-2',
|
||||
},
|
||||
{
|
||||
label: '办公四区',
|
||||
value: '0-0-3',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: '站厅',
|
||||
value: '0-1',
|
||||
|
||||
children: [
|
||||
{
|
||||
label: '站厅一区',
|
||||
value: '0-1-0',
|
||||
// disabled: true,
|
||||
},
|
||||
{
|
||||
label: '站厅二区',
|
||||
value: '0-1-1',
|
||||
},
|
||||
{
|
||||
label: '站厅三区',
|
||||
value: '0-1-2',
|
||||
},
|
||||
{
|
||||
label: '站厅四区',
|
||||
value: '0-1-3',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
let tableColumnsB = [
|
||||
{
|
||||
title: '1:00',
|
||||
dataIndex: '1:00',
|
||||
},
|
||||
{
|
||||
title: '2:00',
|
||||
dataIndex: '2:00',
|
||||
},
|
||||
{
|
||||
title: '3:00',
|
||||
dataIndex: '3:00',
|
||||
},
|
||||
{
|
||||
title: '4:00',
|
||||
dataIndex: '4:00',
|
||||
},
|
||||
];
|
||||
let columnA: any[] = [...tableColumnsA];
|
||||
columnA.push(...tableColumnsB);
|
||||
tableColumns.value = columnA;
|
||||
});
|
||||
|
||||
getTableList();
|
||||
// 分页器
|
||||
const onChange = (pageNumber: number, size: number) => {
|
||||
queryParams.value.pageNum = pageNumber;
|
||||
queryParams.value.pageSize = size;
|
||||
getTableList();
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
::v-deep .ant-table-title {
|
||||
display: flex;
|
||||
}
|
||||
::v-deep .ant-table-container {
|
||||
padding: 0px 16px;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
th.column-money,
|
||||
td.column-money {
|
||||
text-align: right !important;
|
||||
}
|
||||
</style>
|
@@ -4,14 +4,16 @@
|
||||
<a-tab-pane key="2" tab="历史数据" force-render>Content of Tab Pane 2</a-tab-pane>
|
||||
<a-tab-pane key="3" tab="平均数据">Content of Tab Pane 3</a-tab-pane>
|
||||
</a-tabs>
|
||||
<!-- <ns-view-list-table v-bind="tableConfig" v-if="activeKey == '1'" /> -->
|
||||
|
||||
<aggregate-data ref="aggregateDataRef" v-if="activeKey == '1'" style="height: 85%" />
|
||||
<history-data v-if="activeKey == '2'" />
|
||||
<average-data v-if="activeKey == '3'" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { tableConfig } from './config';
|
||||
import aggregateData from './aggregateData/index.vue';
|
||||
import historyData from './historyData/index.vue';
|
||||
import averageData from './averageData/index.vue';
|
||||
|
||||
const aggregateDataRef = ref();
|
||||
|
||||
|
@@ -17,7 +17,7 @@
|
||||
@select="SelectApartmentTree">
|
||||
<template #title="data">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<span>{{ data.deptInfo?.deptName }}</span>
|
||||
<span class="treeContent">{{ data.deptInfo?.deptName }}</span>
|
||||
<a-dropdown>
|
||||
<ns-icon name="actionMore" size="14" class="actionMore" />
|
||||
<template #overlay>
|
||||
@@ -96,7 +96,7 @@
|
||||
@select="SelectUserTree">
|
||||
<template #title="data">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center">
|
||||
<span> {{ data.zhName }}</span>
|
||||
<span class="treeContent"> {{ data.zhName }}</span>
|
||||
<a-dropdown>
|
||||
<ns-icon name="actionMore" size="14" class="actionMore" />
|
||||
<template #overlay>
|
||||
@@ -819,6 +819,7 @@
|
||||
border-radius: @ns-border-radius;
|
||||
border: 1px solid #ebeef5;
|
||||
padding: 16px;
|
||||
min-width: 100px;
|
||||
}
|
||||
.list {
|
||||
padding-left: @ns-gap;
|
||||
@@ -863,4 +864,10 @@
|
||||
.form {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.treeContent {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
@@ -343,22 +343,23 @@
|
||||
customRender: (text: any) => {
|
||||
return text.index + 1;
|
||||
},
|
||||
sorter: true,
|
||||
textNumber: 3,
|
||||
// sorter: true,
|
||||
},
|
||||
{
|
||||
title: '账号',
|
||||
dataIndex: 'accountNo',
|
||||
sorter: true,
|
||||
// sorter: true,
|
||||
},
|
||||
{
|
||||
title: '姓名',
|
||||
dataIndex: 'realName',
|
||||
sorter: true,
|
||||
// sorter: true,
|
||||
},
|
||||
{
|
||||
title: '性别',
|
||||
dataIndex: 'sex',
|
||||
sorter: true,
|
||||
// sorter: true,
|
||||
textNumber: 4,
|
||||
},
|
||||
{
|
||||
|
Reference in New Issue
Block a user