Merge branch 'temp' of http://123.60.103.97:3000/xuziqiang/SaaS-lib into temp
This commit is contained in:
@@ -1,3 +1,4 @@
|
|||||||
|
// 碳排因子库接口
|
||||||
export enum carbonEmissionFactorLibrary {
|
export enum carbonEmissionFactorLibrary {
|
||||||
getTableList = '/carbon-smart/api/carbon/emission/factor/queryCarbonFactorPage',
|
getTableList = '/carbon-smart/api/carbon/emission/factor/queryCarbonFactorPage',
|
||||||
creatOrUpdate = '/carbon-smart/api/carbon/emission/factor/creatOrUpdate',
|
creatOrUpdate = '/carbon-smart/api/carbon/emission/factor/creatOrUpdate',
|
||||||
@@ -8,3 +9,7 @@ export enum carbonEmissionFactorLibrary {
|
|||||||
creat = '/carbon-smart/api/carbon/emission/type/creatOrUpdate',
|
creat = '/carbon-smart/api/carbon/emission/type/creatOrUpdate',
|
||||||
delTreeNode = '/carbon-smart/api/carbon/emission/type/del',
|
delTreeNode = '/carbon-smart/api/carbon/emission/type/del',
|
||||||
}
|
}
|
||||||
|
// 碳排管理-碳排统计接口
|
||||||
|
export enum energyConsumption {
|
||||||
|
pageList = '/carbon-smart/api/carbon/stats/pageList',
|
||||||
|
}
|
||||||
@@ -83,24 +83,39 @@ export const formConfig = (disabled) => {
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
// {
|
||||||
|
// field: 'emissionProcess',
|
||||||
|
// label: '排放环节',
|
||||||
|
// component: 'NsSelectApi',
|
||||||
|
// componentProps: {
|
||||||
|
// api: carbonEmissionFactorLibrary.getEmissionProcess,
|
||||||
|
// params: {
|
||||||
|
// emissionType: sessionStorage.getItem('checkedTreeNode'),
|
||||||
|
// },
|
||||||
|
// resultField: 'data',
|
||||||
|
// labelField: 'emissionProcess',
|
||||||
|
// valueField: 'emissionProcess',
|
||||||
|
// immediate: true,
|
||||||
|
// autoSelectFirst: false,
|
||||||
|
// filterOption:false,
|
||||||
|
// showSearch:true,
|
||||||
|
// autoClearSearchValue:false
|
||||||
|
// },
|
||||||
|
// },
|
||||||
{
|
{
|
||||||
field: 'emissionProcess',
|
|
||||||
label: '排放环节',
|
label: '排放环节',
|
||||||
component: 'NsSelectApi',
|
field: 'emissionProcess',
|
||||||
|
component: 'NsInput',
|
||||||
componentProps: {
|
componentProps: {
|
||||||
api: carbonEmissionFactorLibrary.getEmissionProcess,
|
placeholder: '请输入排放环节',
|
||||||
params: {
|
maxLength: 20,
|
||||||
emissionType: sessionStorage.getItem('checkedTreeNode'),
|
|
||||||
},
|
},
|
||||||
resultField: 'data',
|
rules: [
|
||||||
labelField: 'emissionProcess',
|
{
|
||||||
valueField: 'emissionProcess',
|
required: true,
|
||||||
immediate: true,
|
message: '请输入排放环节',
|
||||||
autoSelectFirst: false,
|
|
||||||
filterOption:false,
|
|
||||||
showSearch:true,
|
|
||||||
autoClearSearchValue:false
|
|
||||||
},
|
},
|
||||||
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
label: '排放因子',
|
label: '排放因子',
|
||||||
|
|||||||
@@ -306,6 +306,7 @@ import { log } from 'node:console';
|
|||||||
}
|
}
|
||||||
// 点击新增树节点
|
// 点击新增树节点
|
||||||
const addTreeNodeData = () => {
|
const addTreeNodeData = () => {
|
||||||
|
operationTree.value='新增'
|
||||||
treeNodeAdd.value = true;
|
treeNodeAdd.value = true;
|
||||||
editTreeNode.value.type = 'create'
|
editTreeNode.value.type = 'create'
|
||||||
};
|
};
|
||||||
@@ -389,6 +390,7 @@ import { log } from 'node:console';
|
|||||||
level:info.selectedNodes[0].level,
|
level:info.selectedNodes[0].level,
|
||||||
dataNumber:info.selectedNodes[0].dataNumber,
|
dataNumber:info.selectedNodes[0].dataNumber,
|
||||||
sortNumber:info.selectedNodes[0].sortNumber,
|
sortNumber:info.selectedNodes[0].sortNumber,
|
||||||
|
parentEmissionId:info.selectedNodes[0].parentEmissionId,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,15 +1,4 @@
|
|||||||
import { dateUtil } from '/nerv-lib/util/date-util';
|
export const tableColumns = [
|
||||||
import data from './mock.json';
|
|
||||||
export const tableConfig = {
|
|
||||||
title: '设备台账',
|
|
||||||
// api: '/carbon_emission/device/getDeviceList',
|
|
||||||
value: data.dataSource,
|
|
||||||
params: {
|
|
||||||
page: 0,
|
|
||||||
pageSize: 10,
|
|
||||||
},
|
|
||||||
rowSelection: null,
|
|
||||||
columns: [
|
|
||||||
{
|
{
|
||||||
title: '序号',
|
title: '序号',
|
||||||
customRender: (text: any) => {
|
customRender: (text: any) => {
|
||||||
@@ -18,94 +7,68 @@ export const tableConfig = {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '能源种类',
|
title: '能源种类',
|
||||||
dataIndex: 'id',
|
dataIndex: 'money',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '计量单位',
|
title: '计量单位',
|
||||||
dataIndex: 'deviceCode',
|
className: 'column-money',
|
||||||
|
dataIndex: 'money',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '全年',
|
title: '全年',
|
||||||
dataIndex: 'deviceName',
|
dataIndex: 'address',
|
||||||
textNumber: 8,
|
|
||||||
textEllipsis: true,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '设备一级区域',
|
title: '1月',
|
||||||
dataIndex: 'position',
|
dataIndex: 'address',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '设备二级区域',
|
title: '2月',
|
||||||
dataIndex: 'position',
|
dataIndex: 'address',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '设备详细位置',
|
title: '3月',
|
||||||
dataIndex: 'position',
|
dataIndex: 'address',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '设备规格',
|
title: '4月',
|
||||||
dataIndex: 'position',
|
dataIndex: 'address',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '设备厂商纳税人识别号',
|
title: '5月',
|
||||||
dataIndex: 'position',
|
dataIndex: 'address',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '厂商联系人',
|
title: '6月',
|
||||||
dataIndex: 'position',
|
dataIndex: 'address',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '设备描述',
|
title: '7月',
|
||||||
dataIndex: 'position',
|
dataIndex: 'address',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'IP地址',
|
title: '8月',
|
||||||
dataIndex: 'position',
|
dataIndex: 'address',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '生产日期',
|
title: '9月',
|
||||||
dataIndex: 'position',
|
dataIndex: 'address',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '采购日期',
|
title: '10月',
|
||||||
dataIndex: 'position',
|
dataIndex: 'address',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '启用日期',
|
title: '11月',
|
||||||
dataIndex: 'position',
|
dataIndex: 'address',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '设备成本(元)',
|
title: '12月',
|
||||||
dataIndex: 'position',
|
dataIndex: 'address',
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '使用期限',
|
title: '操作',
|
||||||
dataIndex: 'position',
|
key: 'action',
|
||||||
|
width: 130
|
||||||
},
|
},
|
||||||
{
|
];
|
||||||
title: '额定功率',
|
|
||||||
dataIndex: 'position',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '特殊参数',
|
|
||||||
dataIndex: 'position',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
|
|
||||||
formConfig: {
|
|
||||||
schemas: [
|
|
||||||
{
|
|
||||||
field: 'createTime',
|
|
||||||
label: '生产日期',
|
|
||||||
component: 'NsRangePicker',
|
|
||||||
fieldMap: ['queryStartDate', 'queryEndDate'],
|
|
||||||
componentProps: {
|
|
||||||
valueFormat: 'YYYY-MM-DD',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
params: {},
|
|
||||||
},
|
|
||||||
// pagination: { pageSizeOptions: false },
|
|
||||||
rowKey: 'uuid',
|
|
||||||
};
|
|
||||||
@@ -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>
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<a-tabs v-model:activeKey="activeKey">
|
<a-tabs v-model:activeKey="activeKey">
|
||||||
<a-tab-pane key="1" tab="能耗统计">
|
<a-tab-pane key="1" tab="能耗统计">
|
||||||
<ns-view-list-table v-bind="tableConfig" />
|
<energyConsumption ref="energyConsumptionRef" />
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
<a-tab-pane key="2" tab="碳排统计" force-render>Content of Tab Pane 2</a-tab-pane>
|
<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-tab-pane key="3" tab="碳排速算">Content of Tab Pane 3</a-tab-pane>
|
||||||
@@ -9,7 +9,7 @@
|
|||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from 'vue';
|
import { ref } from 'vue';
|
||||||
import { tableConfig } from './config';
|
import energyConsumption from './energyConsumption/index.vue';
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'CarbonEmissionStatisticsIndex', // 与页面路由name一致缓存才可生效
|
name: 'CarbonEmissionStatisticsIndex', // 与页面路由name一致缓存才可生效
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -11,18 +11,16 @@
|
|||||||
:tree-data="treeData1"
|
:tree-data="treeData1"
|
||||||
@change="changeDeviceType" />
|
@change="changeDeviceType" />
|
||||||
|
|
||||||
|
<a-spin :spinning="treeLoading">
|
||||||
<a-tree
|
<a-tree
|
||||||
v-model:expandedKeys="expandedKeys"
|
v-model:expandedKeys="expandedKeys"
|
||||||
v-model:selectedKeys="selectedKeys"
|
v-model:selectedKeys="selectedKeys"
|
||||||
v-model:checkedKeys="checkedKeys"
|
v-model:checkedKeys="checkedKeys"
|
||||||
checkable
|
checkable
|
||||||
style="width: 100%; margin-bottom: 10px"
|
:height="340"
|
||||||
:tree-data="treeData2">
|
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
|
||||||
<!-- <template #title="{ title, key }">
|
:tree-data="treeData2" />
|
||||||
<span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
|
</a-spin>
|
||||||
<template v-else>{{ title }}</template>
|
|
||||||
</template> -->
|
|
||||||
</a-tree>
|
|
||||||
|
|
||||||
<div class="fixed-bottom">
|
<div class="fixed-bottom">
|
||||||
<a-divider />
|
<a-divider />
|
||||||
@@ -56,18 +54,18 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
|
import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
|
||||||
import { defineComponent, ref, onMounted } from 'vue';
|
import { defineComponent, ref, onMounted } from 'vue';
|
||||||
import { Dayjs } from 'dayjs';
|
import { Dayjs } from 'dayjs';
|
||||||
import { inject } from 'vue';
|
import { inject } from 'vue';
|
||||||
import { http } from '/nerv-lib/util';
|
import { http } from '/nerv-lib/util';
|
||||||
import { device } from '/@/api/deviceManage';
|
import { device } from '/@/api/deviceManage';
|
||||||
// import { device } from '/@/api/deviceManage';
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
// eslint-disable-next-line vue/multi-word-component-names
|
// eslint-disable-next-line vue/multi-word-component-names
|
||||||
name: 'Tree',
|
name: 'Tree',
|
||||||
setup() {
|
setup() {
|
||||||
|
const treeLoading = ref(false);
|
||||||
const treeLine = ref(true);
|
const treeLine = ref(true);
|
||||||
const showLeafIcon = ref(false);
|
const showLeafIcon = ref(false);
|
||||||
const value = ref<string>();
|
const value = ref<string>();
|
||||||
@@ -76,90 +74,31 @@
|
|||||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||||
orgId.value = result;
|
orgId.value = result;
|
||||||
|
|
||||||
const treeData1 = ref<TreeSelectProps['treeData']>([
|
const treeData1 = ref<TreeSelectProps['treeData']>([]);
|
||||||
// {
|
|
||||||
// title: '3.电梯',
|
|
||||||
// value: '3',
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// title: '301.扶梯',
|
|
||||||
// value: '301',
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// title: '302.直梯',
|
|
||||||
// value: '302',
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// title: '4.冷热源',
|
|
||||||
// value: '4',
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// title: '401.冷水机组',
|
|
||||||
// value: '401',
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// title: '402.热泵机组',
|
|
||||||
// value: '402',
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// title: '403.锅炉',
|
|
||||||
// value: '403',
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// title: '404.水处理机组',
|
|
||||||
// value: '404',
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
]);
|
|
||||||
|
|
||||||
http.post(device.queryDeviceTree, { orgId: orgId.value }).then((res) => {
|
http.post(device.queryDeviceTree, { orgId: orgId.value }).then((res) => {
|
||||||
treeData1.value = formatTreeData(res.data);
|
treeData1.value = formatTreeData(res.data);
|
||||||
});
|
});
|
||||||
|
|
||||||
const formatTreeData = (data) => {
|
const formatTreeData = (data: any) => {
|
||||||
return data.map((item) => ({
|
return data.map((item: any) => ({
|
||||||
title: item.code + '.' + item.deviceType,
|
title: item.code + '.' + item.deviceType,
|
||||||
value: item.code,
|
value: item.code,
|
||||||
children: item.children ? formatTreeData(item.children) : [],
|
children: item.children ? formatTreeData(item.children) : [],
|
||||||
}));
|
}));
|
||||||
};
|
};
|
||||||
|
|
||||||
// const treeData2: TreeProps['treeData'] = [
|
const treeData2 = ref<TreeSelectProps['treeData']>([]);
|
||||||
const treeData2 = ref<TreeSelectProps['treeData']>([
|
|
||||||
// {
|
|
||||||
// title: 'AC_001(总电表)',
|
|
||||||
// key: '1',
|
|
||||||
// children: [
|
|
||||||
// {
|
|
||||||
// title: 'AC_002(暖通电表)',
|
|
||||||
// key: '2',
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// title: 'AC_003(照明电表)',
|
|
||||||
// key: '3',
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// title: 'AC_004(给排水电表)',
|
|
||||||
// key: '4',
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// title: 'AC_005(通风电表)',
|
|
||||||
// key: '5',
|
|
||||||
// },
|
|
||||||
// {
|
|
||||||
// title: 'AC_006(电动门电表)',
|
|
||||||
// key: '6',
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// },
|
|
||||||
]);
|
|
||||||
|
|
||||||
const changeDeviceType = (val, label, extra) => {
|
const changeDeviceType = (val: any, label: any) => {
|
||||||
|
treeLoading.value = true;
|
||||||
http
|
http
|
||||||
.post(device.queryDevicePage, { code: val, orgId: orgId.value, pageNum: 1, pageSize: 10 })
|
.post(device.queryDevicePage, {
|
||||||
|
code: val,
|
||||||
|
orgId: orgId.value,
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 1000,
|
||||||
|
})
|
||||||
.then((res) => {
|
.then((res) => {
|
||||||
if (!val) {
|
if (!val) {
|
||||||
val = '999999999';
|
val = '999999999';
|
||||||
@@ -174,6 +113,9 @@
|
|||||||
let a: TreeSelectProps['treeData'] = [{ title: label[0], key: val, children: records }];
|
let a: TreeSelectProps['treeData'] = [{ title: label[0], key: val, children: records }];
|
||||||
treeData2.value = a;
|
treeData2.value = a;
|
||||||
expandedKeys.value = [val];
|
expandedKeys.value = [val];
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
treeLoading.value = false;
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -531,11 +473,9 @@
|
|||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getDianWeiList();
|
getDianWeiList();
|
||||||
changeDeviceType();
|
changeDeviceType(null, null);
|
||||||
});
|
});
|
||||||
|
|
||||||
// const dateFormat = 'YYYY-MM-DD';
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
treeLine,
|
treeLine,
|
||||||
showLeafIcon,
|
showLeafIcon,
|
||||||
@@ -560,6 +500,7 @@
|
|||||||
hackValue,
|
hackValue,
|
||||||
pageData,
|
pageData,
|
||||||
changeDeviceType,
|
changeDeviceType,
|
||||||
|
treeLoading,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -3,129 +3,62 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, onMounted, ref } from 'vue';
|
import { defineComponent, onMounted, ref, inject, watch } from 'vue';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
const data = [
|
|
||||||
{
|
|
||||||
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',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'GraphGraph',
|
name: 'GraphGraph',
|
||||||
setup() {
|
setup() {
|
||||||
|
let data = ref<any[]>([]);
|
||||||
|
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) => {
|
||||||
|
// 执行你的逻辑代码
|
||||||
|
draw();
|
||||||
|
},
|
||||||
|
{ deep: true },
|
||||||
|
);
|
||||||
const graphGraphchart = ref(null);
|
const graphGraphchart = ref(null);
|
||||||
|
|
||||||
let chartInstance: echarts.ECharts | null = null;
|
let chartInstance: echarts.ECharts | null = null;
|
||||||
onMounted(() => {
|
|
||||||
|
const draw = () => {
|
||||||
|
data.value = pageData.graphGraphList;
|
||||||
|
if (chartInstance) {
|
||||||
|
chartInstance.dispose();
|
||||||
|
}
|
||||||
chartInstance = echarts.init(graphGraphchart.value);
|
chartInstance = echarts.init(graphGraphchart.value);
|
||||||
var seriesList = [];
|
var seriesList = [];
|
||||||
var date = [];
|
var date = [];
|
||||||
var legendList: string | any[] = [];
|
var legendList: string | any[] = [];
|
||||||
for (let i = 0; i < data.length; i++) {
|
for (let i = 0; i < data.value.length; i++) {
|
||||||
date.push(data[i].date);
|
date.push(data.value[i].date);
|
||||||
|
|
||||||
for (let j = 0; j < data[i].data.length; j++) {
|
for (let j = 0; j < data.value[i].data.length; j++) {
|
||||||
if (seriesList.length < j + 1) {
|
if (seriesList.length < j + 1) {
|
||||||
seriesList.push({
|
seriesList.push({
|
||||||
name: data[i].data[j].name,
|
name: data.value[i].data[j].name,
|
||||||
data: [data[i].data[j].value],
|
data: [data.value[i].data[j].value],
|
||||||
type: 'line',
|
type: 'line',
|
||||||
smooth: true,
|
smooth: true,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
seriesList[j].data.push(data[i].data[j].value);
|
seriesList[j].data.push(data.value[i].data[j].value);
|
||||||
}
|
}
|
||||||
if (legendList.length == 0 || legendList.length < j + 1) {
|
if (legendList.length == 0 || legendList.length < j + 1) {
|
||||||
legendList.push(data[i].data[j].name);
|
legendList.push(data.value[i].data[j].name);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -142,7 +75,7 @@
|
|||||||
const date = params[0].name;
|
const date = params[0].name;
|
||||||
const values = params
|
const values = params
|
||||||
.map((param: any) => {
|
.map((param: any) => {
|
||||||
const unit = data.find((d) => d.date === date)?.unit || '';
|
const unit = data.value.find((d) => d.date === date)?.unit || '';
|
||||||
return `<tr>
|
return `<tr>
|
||||||
<td>${param.marker}${param.seriesName}</td>
|
<td>${param.marker}${param.seriesName}</td>
|
||||||
<td style="text-align: right;">${param.value} ${unit}</td>
|
<td style="text-align: right;">${param.value} ${unit}</td>
|
||||||
@@ -159,27 +92,14 @@
|
|||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
},
|
},
|
||||||
// dataZoom: [
|
|
||||||
// {
|
|
||||||
// height: 10,
|
|
||||||
// start: 0,
|
|
||||||
// end: 100,
|
|
||||||
// handleSize: '300%', // 设置滑块的大小
|
|
||||||
// bottom: 15,
|
|
||||||
// },
|
|
||||||
// ],
|
|
||||||
// toolbox: {
|
|
||||||
// show: true,
|
|
||||||
// feature: {
|
|
||||||
// mark: { show: true },
|
|
||||||
// saveAsImage: { show: true },
|
|
||||||
// },
|
|
||||||
// },
|
|
||||||
series: seriesList,
|
series: seriesList,
|
||||||
};
|
};
|
||||||
|
|
||||||
chartInstance = echarts.init(graphGraphchart.value);
|
chartInstance = echarts.init(graphGraphchart.value);
|
||||||
chartInstance.setOption(option);
|
chartInstance.setOption(option);
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
draw();
|
||||||
});
|
});
|
||||||
|
|
||||||
// 下载图表
|
// 下载图表
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -1,88 +1,19 @@
|
|||||||
<!-- eslint-disable vue/multi-word-component-names -->
|
<!-- eslint-disable vue/multi-word-component-names -->
|
||||||
<template>
|
<template>
|
||||||
<a-tabs v-model:activeKey="activeKey" style="height: 8%">
|
<page />
|
||||||
<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>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { reactive, provide } from 'vue';
|
||||||
import tree from './tree/index.vue';
|
import page from './page.vue';
|
||||||
import graphGraph from './graphGraph/index.vue';
|
|
||||||
import environmentTable from './table/index.vue';
|
|
||||||
|
|
||||||
const iconName = ref('biaoge');
|
// 创建一个响应式对象
|
||||||
|
const pageData = reactive({
|
||||||
const treeRef = ref();
|
graphTableList: [],
|
||||||
const graphRef = ref();
|
graphTableColumns: [],
|
||||||
const tableRef = ref();
|
graphGraphList: [],
|
||||||
|
|
||||||
let isGraph = ref(true);
|
|
||||||
const activeKey = ref('1');
|
|
||||||
|
|
||||||
defineOptions({
|
|
||||||
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const downloadChart = () => {
|
// 使用 provide 函数来提供这个响应式对象
|
||||||
if (activeKey.value == '1' && isGraph) {
|
provide('pageData', pageData);
|
||||||
if (graphRef.value) {
|
|
||||||
graphRef.value.downloadChart();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
function change() {
|
|
||||||
isGraph.value = !isGraph.value;
|
|
||||||
if (iconName.value == 'biaoge') {
|
|
||||||
iconName.value = 'bingtu';
|
|
||||||
} else {
|
|
||||||
iconName.value = 'biaoge';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</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>
|
|
||||||
|
|||||||
88
hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
Normal file
88
hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
Normal file
@@ -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>
|
||||||
@@ -4,30 +4,29 @@
|
|||||||
<div class="ns-tree-title">
|
<div class="ns-tree-title">
|
||||||
<span>数据点位</span>
|
<span>数据点位</span>
|
||||||
</div>
|
</div>
|
||||||
<!-- <a-tree-select
|
|
||||||
v-model:value="value"
|
|
||||||
style="width: 100%"
|
|
||||||
|
|
||||||
:tree-line="treeLine && { showLeafIcon }"
|
|
||||||
:tree-data="treeData1"
|
|
||||||
>
|
|
||||||
</a-tree-select> -->
|
|
||||||
<a-select
|
<a-select
|
||||||
ref="select"
|
ref="select"
|
||||||
v-model:value="selectedValue"
|
v-model:value="selectedValue"
|
||||||
placeholder="请选择能耗类型"
|
placeholder="请选择能耗类型"
|
||||||
style="width: 100%; margin-bottom: 10px"
|
style="width: 100%; margin-bottom: 10px"
|
||||||
:options="options1" />
|
:options="options1"
|
||||||
|
@change="changeEnergyType" />
|
||||||
<a-radio-group
|
<a-radio-group
|
||||||
v-model:value="mode"
|
v-model:value="mode"
|
||||||
@change="changeMode"
|
@change="changeMode"
|
||||||
style="padding-bottom: 10px; width: 100%">
|
style="padding-bottom: 10px; width: 100%">
|
||||||
<a-radio-button value="1" style="width: 50%; text-align: center">设备</a-radio-button>
|
<a-radio-button value="1" style="width: 50%; text-align: center" :disabled="shebei"
|
||||||
|
>设备</a-radio-button
|
||||||
|
>
|
||||||
<a-radio-button value="2" style="width: 50%; text-align: center">节点</a-radio-button>
|
<a-radio-button value="2" style="width: 50%; text-align: center">节点</a-radio-button>
|
||||||
</a-radio-group>
|
</a-radio-group>
|
||||||
<a-input v-model:value="value" placeholder="请输入设备名称" v-if="mode == '1'" />
|
<a-input
|
||||||
<a-input v-model:value="value" placeholder="请输入节点名称" v-else />
|
v-model:value="deviceName"
|
||||||
|
placeholder="请输入设备名称"
|
||||||
|
v-if="mode == '1'"
|
||||||
|
@change="changeMode" />
|
||||||
|
<a-input v-model:value="pointName" placeholder="请输入节点名称" v-else @change="changeMode" />
|
||||||
|
<a-spin :spinning="treeLoading">
|
||||||
<a-tree
|
<a-tree
|
||||||
v-model:expandedKeys="expandedKeys"
|
v-model:expandedKeys="expandedKeys"
|
||||||
v-model:selectedKeys="selectedKeys"
|
v-model:selectedKeys="selectedKeys"
|
||||||
@@ -36,6 +35,7 @@
|
|||||||
:height="300"
|
:height="300"
|
||||||
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
|
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
|
||||||
:tree-data="treeData2" />
|
:tree-data="treeData2" />
|
||||||
|
</a-spin>
|
||||||
|
|
||||||
<div class="fixed-bottom">
|
<div class="fixed-bottom">
|
||||||
<a-divider />
|
<a-divider />
|
||||||
@@ -52,71 +52,65 @@
|
|||||||
@calendarChange="onCalendarChange"
|
@calendarChange="onCalendarChange"
|
||||||
style="width: 100%; margin-bottom: 10px"
|
style="width: 100%; margin-bottom: 10px"
|
||||||
:placeholder="['请选择日期', '请选择日期']" />
|
:placeholder="['请选择日期', '请选择日期']" />
|
||||||
<a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect"
|
<a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect">
|
||||||
>查询</a-button
|
查询
|
||||||
>
|
</a-button>
|
||||||
|
<!-- <a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect11">
|
||||||
|
模拟不同数据查询
|
||||||
|
</a-button> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
|
import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
|
||||||
import { defineComponent, ref, onMounted } from 'vue';
|
import { defineComponent, ref, onMounted, inject } from 'vue';
|
||||||
import { Dayjs } from 'dayjs';
|
import { Dayjs } from 'dayjs';
|
||||||
|
import { http } from '/nerv-lib/util';
|
||||||
|
import { device, group } from '/@/api/deviceManage';
|
||||||
|
import { dict } from '/@/api';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
// eslint-disable-next-line vue/multi-word-component-names
|
// eslint-disable-next-line vue/multi-word-component-names
|
||||||
name: 'Tree',
|
name: 'Tree',
|
||||||
setup() {
|
setup() {
|
||||||
// const treeLine = ref(true);
|
|
||||||
// const showLeafIcon = ref(false);
|
|
||||||
const value = ref<string>();
|
const value = ref<string>();
|
||||||
|
const deviceName = ref<string>();
|
||||||
|
const pointName = ref<string>();
|
||||||
|
const treeLoading = ref(false);
|
||||||
|
const shebei = ref(false);
|
||||||
|
|
||||||
const treeData1 = ref<TreeSelectProps['treeData']>([
|
// 树打开节点
|
||||||
{
|
const expandedKeys = ref<string[]>([]);
|
||||||
title: '3.电梯',
|
// 树勾选节点
|
||||||
value: '3',
|
const selectedKeys = ref<string[]>([]);
|
||||||
children: [
|
// 树点击节点
|
||||||
{
|
const checkedKeys = ref<string[]>([]);
|
||||||
title: '301.扶梯',
|
|
||||||
value: '301',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '302.直梯',
|
|
||||||
value: '302',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '4.冷热源',
|
|
||||||
value: '4',
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
title: '401.冷水机组',
|
|
||||||
value: '401',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '402.热泵机组',
|
|
||||||
value: '402',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '403.锅炉',
|
|
||||||
value: '403',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '404.水处理机组',
|
|
||||||
value: '404',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
|
|
||||||
const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
|
||||||
const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
|
||||||
const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
|
|
||||||
|
|
||||||
|
// 能耗类型list
|
||||||
const options1 = ref<SelectProps['options']>([]);
|
const options1 = ref<SelectProps['options']>([]);
|
||||||
const options2 = ref<SelectProps['options']>([
|
// 采集频率list
|
||||||
|
const options2 = ref<SelectProps['options']>([]);
|
||||||
|
const mode = ref<String>('1');
|
||||||
|
// 能耗类型
|
||||||
|
const selectedValue = ref<string | undefined>();
|
||||||
|
// 采集频率
|
||||||
|
const frequencyValue = ref<string | undefined>();
|
||||||
|
// 时间
|
||||||
|
const dateRange = ref<[Dayjs, Dayjs] | undefined>();
|
||||||
|
|
||||||
|
// 页面初始化参数
|
||||||
|
const getOptionsList = async () => {
|
||||||
|
try {
|
||||||
|
const options = await dict({ params: { dicKey: 'ENERGY_TYPE' } });
|
||||||
|
options.data.data.forEach((item: any) => {
|
||||||
|
(item.value = item.cnValue), (item.label = item.cnValue);
|
||||||
|
});
|
||||||
|
options1.value = options.data.data; // 根据返回数据的结构来更新 options1.value
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch options:', error);
|
||||||
|
}
|
||||||
|
options2.value = [
|
||||||
{
|
{
|
||||||
value: '1',
|
value: '1',
|
||||||
label: '5分钟',
|
label: '5分钟',
|
||||||
@@ -133,112 +127,407 @@
|
|||||||
value: '4',
|
value: '4',
|
||||||
label: '1小时',
|
label: '1小时',
|
||||||
},
|
},
|
||||||
]);
|
];
|
||||||
const mode = ref<String>('1');
|
};
|
||||||
const selectedValue = ref<string | undefined>();
|
interface PageData {
|
||||||
const frequencyValue = ref<string | undefined>();
|
graphTableList: any[];
|
||||||
const dateRange = ref<[Dayjs, Dayjs] | undefined>();
|
graphTableColumns: any[];
|
||||||
|
graphGraphList: any[];
|
||||||
|
}
|
||||||
|
const pageData = inject<PageData>('pageData');
|
||||||
|
if (!pageData) {
|
||||||
|
throw new Error('pageData is not provided');
|
||||||
|
}
|
||||||
|
|
||||||
const getDianWeiList = () => {
|
// 选择能耗类型
|
||||||
console.log('getDianWeiList 被调用');
|
const changeEnergyType = () => {
|
||||||
options1.value = [
|
if (selectedValue.value == '8') {
|
||||||
{ value: '1', label: '用电量' },
|
shebei.value = true;
|
||||||
{ value: '2', label: '用水量' },
|
mode.value = '2';
|
||||||
{ value: '3', label: '碳排量' },
|
} else {
|
||||||
{ value: '4', label: '标煤量' },
|
shebei.value = false;
|
||||||
|
}
|
||||||
|
changeMode();
|
||||||
|
};
|
||||||
|
const getSelect = () => {
|
||||||
|
pageData.graphTableList = [
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
name: 'AC_002(暖通电表)',
|
||||||
|
paramName: '用电量(kWh)',
|
||||||
|
date: '2023-12-01',
|
||||||
|
'1:00': '3626',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
name: 'AC_002(暖通电表)',
|
||||||
|
paramName: '用电量(kWh)',
|
||||||
|
date: '2023-12-01',
|
||||||
|
'1:00': '3626',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
name: 'AC_003(照明电表)',
|
||||||
|
paramName: '用电量(kWh)',
|
||||||
|
date: '2023-12-01',
|
||||||
|
'1:00': '3626',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
name: 'AC_003(照明电表)',
|
||||||
|
paramName: '用电量(kWh)',
|
||||||
|
date: '2023-12-01',
|
||||||
|
'1:00': '3626',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3',
|
||||||
|
name: 'AC_004(给排水电表)',
|
||||||
|
paramName: '用电量(kWh)',
|
||||||
|
date: '2023-12-01',
|
||||||
|
'1:00': '3626',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
pageData.graphTableColumns = [
|
||||||
|
{
|
||||||
|
title: '日期',
|
||||||
|
dataIndex: 'date',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '1:00',
|
||||||
|
dataIndex: '1:00',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
pageData.graphGraphList = [
|
||||||
|
{
|
||||||
|
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',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
};
|
||||||
|
const getSelect11 = () => {
|
||||||
|
pageData.graphTableList = [
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
name: 'AC_002(暖通电表)',
|
||||||
|
paramName: '用电量(kWh)',
|
||||||
|
date: '2023-12-01',
|
||||||
|
'1:00': '3626',
|
||||||
|
'2:00': '3626',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '1',
|
||||||
|
name: 'AC_002(暖通电表)',
|
||||||
|
paramName: '用电量(kWh)',
|
||||||
|
date: '2023-12-01',
|
||||||
|
'1:00': '3626',
|
||||||
|
'2:00': '3626',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
name: 'AC_003(照明电表)',
|
||||||
|
paramName: '用电量(kWh)',
|
||||||
|
date: '2023-12-01',
|
||||||
|
'1:00': '3626',
|
||||||
|
'2:00': '3626',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '2',
|
||||||
|
name: 'AC_003(照明电表)',
|
||||||
|
paramName: '用电量(kWh)',
|
||||||
|
date: '2023-12-01',
|
||||||
|
'1:00': '3626',
|
||||||
|
'2:00': '3626',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '3',
|
||||||
|
name: 'AC_004(给排水电表)',
|
||||||
|
paramName: '用电量(kWh)',
|
||||||
|
date: '2023-12-01',
|
||||||
|
'1:00': '3626',
|
||||||
|
'2:00': '3626',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
pageData.graphTableColumns = [
|
||||||
|
{
|
||||||
|
title: '日期',
|
||||||
|
dataIndex: 'date',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '1:00',
|
||||||
|
dataIndex: '1:00',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '2:00',
|
||||||
|
dataIndex: '2:00',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
pageData.graphGraphList = [
|
||||||
|
{
|
||||||
|
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(333333333)',
|
||||||
|
value: '22',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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(333333333)',
|
||||||
|
value: '28',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2023-12-03 0:00',
|
||||||
|
unit: 'V',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: 'AC_002(暖通电表)',
|
||||||
|
value: '18',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_003(照明电表)',
|
||||||
|
value: '22',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_004(给排水电表)',
|
||||||
|
value: '26',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_005(333333333)',
|
||||||
|
value: '44',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2023-12-04 0:00',
|
||||||
|
unit: 'V',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: 'AC_002(暖通电表)',
|
||||||
|
value: '40',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_003(照明电表)',
|
||||||
|
value: '15',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_004(给排水电表)',
|
||||||
|
value: '12',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_005(333333333)',
|
||||||
|
value: '26',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: '2023-12-05 0:00',
|
||||||
|
unit: 'V',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
name: 'AC_002(暖通电表)',
|
||||||
|
value: '15',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_003(照明电表)',
|
||||||
|
value: '18',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_004(给排水电表)',
|
||||||
|
value: '15',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AC_005(333333333)',
|
||||||
|
value: '35',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
];
|
];
|
||||||
};
|
};
|
||||||
|
|
||||||
const getSelect = () => {};
|
const orgId = ref('');
|
||||||
|
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||||
const treeData2 = ref<TreeProps['treeData']>([]);
|
orgId.value = result;
|
||||||
|
const treeData2 = ref<TreeSelectProps['treeData']>([]);
|
||||||
|
// 切换树结构
|
||||||
const changeMode = () => {
|
const changeMode = () => {
|
||||||
|
treeLoading.value = true;
|
||||||
if (mode.value == '1') {
|
if (mode.value == '1') {
|
||||||
treeData2.value = [
|
http
|
||||||
{
|
.post(device.queryDevicePage, {
|
||||||
title: 'AC_001(总电表)',
|
deviceName: deviceName.value,
|
||||||
key: '101',
|
energyType: selectedValue.value,
|
||||||
children: [
|
orgId: orgId.value,
|
||||||
{
|
pageNum: 1,
|
||||||
title: 'AC_002(暖通电表)',
|
pageSize: 9999,
|
||||||
key: '102',
|
})
|
||||||
},
|
.then((res) => {
|
||||||
{
|
let val = '999999999';
|
||||||
title: 'AC_003(照明电表)',
|
|
||||||
key: '103',
|
let label = '所有设备';
|
||||||
},
|
|
||||||
{
|
let records = res.data.records;
|
||||||
title: 'AC_004(给排水电表)',
|
records.forEach((item: any) => {
|
||||||
key: '104',
|
(item.title = item.deviceModel + ' ' + item.deviceName), (item.key = item.id);
|
||||||
},
|
});
|
||||||
{
|
let a: TreeSelectProps['treeData'] = [{ title: label, key: val, children: records }];
|
||||||
title: 'AC_005(通风电表)',
|
treeData2.value = a;
|
||||||
key: '105',
|
expandedKeys.value = [val];
|
||||||
},
|
})
|
||||||
{
|
.finally(() => {
|
||||||
title: 'AC_006(电动门电表)',
|
treeLoading.value = false;
|
||||||
key: '106',
|
});
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
} else {
|
} else {
|
||||||
treeData2.value = [
|
http
|
||||||
{
|
.post(group.queryDeviceGroupTree, {
|
||||||
title: '功能分项',
|
pointName: pointName.value,
|
||||||
key: '1',
|
energyType: selectedValue.value,
|
||||||
children: [
|
orgId: orgId.value,
|
||||||
{
|
})
|
||||||
title: '照明',
|
.then((res) => {
|
||||||
key: '2',
|
treeData2.value = [];
|
||||||
children: [
|
treeData2.value = formatTreeData(pointName.value ? res.data[0].searchList : res.data);
|
||||||
{
|
|
||||||
title: '站台照明',
|
expandedKeys.value = getAllKeys(treeData2.value);
|
||||||
key: '3',
|
})
|
||||||
},
|
.finally(() => {
|
||||||
{
|
treeLoading.value = false;
|
||||||
title: '站厅照明',
|
});
|
||||||
key: '4',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '应急照明',
|
|
||||||
key: '5',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '广告照明',
|
|
||||||
key: '6',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '暖通',
|
|
||||||
key: '7',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '排放',
|
|
||||||
key: '8',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '给排水',
|
|
||||||
key: '9',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '光伏',
|
|
||||||
key: '10',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '电梯',
|
|
||||||
key: '11',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '电动门',
|
|
||||||
key: '12',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
const getAllKeys = (data: any) => {
|
||||||
|
let keys: any[] = [];
|
||||||
|
data.forEach((item: any) => {
|
||||||
|
if (item.children) {
|
||||||
|
keys.push(item.key);
|
||||||
|
keys = keys.concat(getAllKeys(item.children));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return keys;
|
||||||
|
};
|
||||||
|
const formatTreeData = (data: any) => {
|
||||||
|
return data.map((item: any) => ({
|
||||||
|
title: item.pointName,
|
||||||
|
key: item.id,
|
||||||
|
children: item.children ? formatTreeData(item.children) : [],
|
||||||
|
}));
|
||||||
|
};
|
||||||
|
|
||||||
type RangeValue = [Dayjs, Dayjs];
|
type RangeValue = [Dayjs, Dayjs];
|
||||||
const dates = ref<RangeValue>();
|
const dates = ref<RangeValue>();
|
||||||
@@ -270,17 +559,14 @@
|
|||||||
dates.value = val;
|
dates.value = val;
|
||||||
};
|
};
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
getDianWeiList();
|
getOptionsList();
|
||||||
changeMode();
|
changeMode();
|
||||||
});
|
});
|
||||||
|
|
||||||
// const dateFormat = 'YYYY-MM-DD';
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
// treeLine,
|
|
||||||
// showLeafIcon,
|
|
||||||
value,
|
value,
|
||||||
treeData1,
|
deviceName,
|
||||||
|
pointName,
|
||||||
treeData2,
|
treeData2,
|
||||||
expandedKeys,
|
expandedKeys,
|
||||||
selectedKeys,
|
selectedKeys,
|
||||||
@@ -291,14 +577,18 @@
|
|||||||
selectedValue,
|
selectedValue,
|
||||||
frequencyValue,
|
frequencyValue,
|
||||||
dateRange,
|
dateRange,
|
||||||
getDianWeiList,
|
getOptionsList,
|
||||||
getSelect,
|
getSelect,
|
||||||
|
getSelect11,
|
||||||
changeMode,
|
changeMode,
|
||||||
disabledDate,
|
disabledDate,
|
||||||
onCalendarChange,
|
onCalendarChange,
|
||||||
onOpenChange,
|
onOpenChange,
|
||||||
onChange,
|
onChange,
|
||||||
hackValue,
|
hackValue,
|
||||||
|
treeLoading,
|
||||||
|
changeEnergyType,
|
||||||
|
shebei,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user