xuziqiang
/
SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'temp' of http://123.60.103.97:3000/xuziqiang/SaaS-lib into temp

deploy-dev
xuziqiang 5 months ago
parent
131913e52d 5ed7449392
commit
4d49ef4e42
12 changed files with 1127 additions and 599 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 5
      hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
  2. 43
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/config.ts
  3. 2
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue
  4. 183
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/config.ts
  5. 251
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/energyConsumption/index.vue
  6. 4
      hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/index.vue
  7. 117
      hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
  8. 158
      hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
  9. 122
      hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
  10. 91
      hx-ai-intelligent/src/view/monitor/energyMonitor/index.vue
  11. 88
      hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
  12. 662
      hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue

5
hx-ai-intelligent/src/api/carbonEmissionFactorLibrary.ts
View File

@ -1,3 +1,4 @@
// 碳排因子库接口
export enum carbonEmissionFactorLibrary {
getTableList = '/carbon-smart/api/carbon/emission/factor/queryCarbonFactorPage',
creatOrUpdate = '/carbon-smart/api/carbon/emission/factor/creatOrUpdate',
@ -8,3 +9,7 @@ export enum carbonEmissionFactorLibrary {
creat = '/carbon-smart/api/carbon/emission/type/creatOrUpdate',
delTreeNode = '/carbon-smart/api/carbon/emission/type/del',
}
// 碳排管理-碳排统计接口
export enum energyConsumption {
pageList = '/carbon-smart/api/carbon/stats/pageList',
}

43
hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/config.ts
View File

@ -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: '排放环节',
component: 'NsSelectApi',
field: 'emissionProcess',
component: 'NsInput',
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
placeholder: '请输入排放环节',
maxLength: 20,
},
rules: [
{
required: true,
message: '请输入排放环节',
},
],
},
{
label: '排放因子',

2
hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionFactorLibrary/index.vue
View File

@ -306,6 +306,7 @@ import { log } from 'node:console';
}
// 点击新增树节点
const addTreeNodeData = () => {
operationTree.value='新增'
treeNodeAdd.value = true;
editTreeNode.value.type = 'create'
};
@ -389,6 +390,7 @@ import { log } from 'node:console';
level:info.selectedNodes[0].level,
dataNumber:info.selectedNodes[0].dataNumber,
sortNumber:info.selectedNodes[0].sortNumber,
parentEmissionId:info.selectedNodes[0].parentEmissionId,
}
}
};

183
hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/config.ts
View File

@ -1,111 +1,74 @@
import { dateUtil } from '/nerv-lib/util/date-util';
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: '序号',
customRender: (text: any) => {
return text.index + 1;
},
export const tableColumns = [
{
title: '序号',
customRender: (text: any) => {
return text.index + 1;
},
{
title: '能源种类',
dataIndex: 'id',
},
{
title: '计量单位',
dataIndex: 'deviceCode',
},
{
title: '全年',
dataIndex: 'deviceName',
textNumber: 8,
textEllipsis: true,
},
{
title: '设备一级区域',
dataIndex: 'position',
},
{
title: '设备二级区域',
dataIndex: 'position',
},
{
title: '设备详细位置',
dataIndex: 'position',
},
{
title: '设备规格',
dataIndex: 'position',
},
{
title: '设备厂商纳税人识别号',
dataIndex: 'position',
},
{
title: '厂商联系人',
dataIndex: 'position',
},
{
title: '设备描述',
dataIndex: 'position',
},
{
title: 'IP地址',
dataIndex: 'position',
},
{
title: '生产日期',
dataIndex: 'position',
},
{
title: '采购日期',
dataIndex: 'position',
},
{
title: '启用日期',
dataIndex: 'position',
},
{
title: '设备成本（元）',
dataIndex: 'position',
},
{
title: '使用期限',
dataIndex: 'position',
},
{
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',
};
},
{
title: '能源种类',
dataIndex: 'money',
},
{
title: '计量单位',
className: 'column-money',
dataIndex: 'money',
},
{
title: '全年',
dataIndex: 'address',
},
{
title: '1月',
dataIndex: 'address',
},
{
title: '2月',
dataIndex: 'address',
},
{
title: '3月',
dataIndex: 'address',
},
{
title: '4月',
dataIndex: 'address',
},
{
title: '5月',
dataIndex: 'address',
},
{
title: '6月',
dataIndex: 'address',
},
{
title: '7月',
dataIndex: 'address',
},
{
title: '8月',
dataIndex: 'address',
},
{
title: '9月',
dataIndex: 'address',
},
{
title: '10月',
dataIndex: 'address',
},
{
title: '11月',
dataIndex: 'address',
},
{
title: '12月',
dataIndex: 'address',
},
{
title: '操作',
key: 'action',
width: 130
},
];

251
hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/energyConsumption/index.vue
View File

@ -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>

4
hx-ai-intelligent/src/view/carbonEmissionManage/carbonEmissionStatistics/index.vue
View File

@ -1,7 +1,7 @@
<template>
<a-tabs v-model:activeKey="activeKey">
<a-tab-pane key="1" tab="能耗统计">
<ns-view-list-table v-bind="tableConfig" />
<energyConsumption ref="energyConsumptionRef" />
</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>
@ -9,7 +9,7 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { tableConfig } from './config';
import energyConsumption from './energyConsumption/index.vue';
defineOptions({
name: 'CarbonEmissionStatisticsIndex', // 与页面路由name一致缓存才可生效
});

117
hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
View File

@ -11,18 +11,16 @@
:tree-data="treeData1"
@change="changeDeviceType" />
<a-tree
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
v-model:checkedKeys="checkedKeys"
checkable
style="width: 100%; margin-bottom: 10px"
:tree-data="treeData2">
<!-- <template #title="{ title, key }">
<span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
<template v-else>{{ title }}</template>
</template> -->
</a-tree>
<a-spin :spinning="treeLoading">
<a-tree
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
v-model:checkedKeys="checkedKeys"
checkable
:height="340"
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
:tree-data="treeData2" />
</a-spin>
<div class="fixed-bottom">
<a-divider />
@ -56,18 +54,18 @@
</template>
<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 { Dayjs } from 'dayjs';
import { inject } from 'vue';
import { http } from '/nerv-lib/util';
import { device } from '/@/api/deviceManage';
// import { device } from '/@/api/deviceManage';
export default defineComponent({
// eslint-disable-next-line vue/multi-word-component-names
name: 'Tree',
setup() {
const treeLoading = ref(false);
const treeLine = ref(true);
const showLeafIcon = ref(false);
const value = ref<string>();
@ -76,90 +74,31 @@
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
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',
// },
// ],
// },
]);
const treeData1 = ref<TreeSelectProps['treeData']>([]);
http.post(device.queryDeviceTree, { orgId: orgId.value }).then((res) => {
treeData1.value = formatTreeData(res.data);
});
const formatTreeData = (data) => {
return data.map((item) => ({
const formatTreeData = (data: any) => {
return data.map((item: any) => ({
title: item.code + '.' + item.deviceType,
value: item.code,
children: item.children ? formatTreeData(item.children) : [],
}));
};
// const treeData2: TreeProps['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 treeData2 = ref<TreeSelectProps['treeData']>([]);
const changeDeviceType = (val, label, extra) => {
const changeDeviceType = (val: any, label: any) => {
treeLoading.value = true;
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) => {
if (!val) {
val = '999999999';
@ -174,6 +113,9 @@
let a: TreeSelectProps['treeData'] = [{ title: label[0], key: val, children: records }];
treeData2.value = a;
expandedKeys.value = [val];
})
.finally(() => {
treeLoading.value = false;
});
};
@ -531,11 +473,9 @@
onMounted(() => {
getDianWeiList();
changeDeviceType();
changeDeviceType(null, null);
});
// const dateFormat = 'YYYY-MM-DD';
return {
treeLine,
showLeafIcon,
@ -560,6 +500,7 @@
hackValue,
pageData,
changeDeviceType,
treeLoading,
};
},
});

158
hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
View File

@ -3,129 +3,62 @@
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import { defineComponent, onMounted, ref, inject, watch } from 'vue';
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({
name: 'GraphGraph',
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);
let chartInstance: echarts.ECharts | null = null;
onMounted(() => {
const draw = () => {
data.value = pageData.graphGraphList;
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(graphGraphchart.value);
var seriesList = [];
var date = [];
var legendList: string | any[] = [];
for (let i = 0; i < data.length; i++) {
date.push(data[i].date);
for (let i = 0; i < data.value.length; i++) {
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) {
seriesList.push({
name: data[i].data[j].name,
data: [data[i].data[j].value],
name: data.value[i].data[j].name,
data: [data.value[i].data[j].value],
type: 'line',
smooth: true,
});
} 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) {
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 values = params
.map((param: any) => {
const unit = data.find((d) => d.date === date)?.unit || '';
const unit = data.value.find((d) => d.date === date)?.unit || '';
return `<tr>
<td>${param.marker}${param.seriesName}</td>
<td style="text-align: right;">${param.value} ${unit}</td>
@ -159,27 +92,14 @@
yAxis: {
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,
};
chartInstance = echarts.init(graphGraphchart.value);
chartInstance.setOption(option);
};
onMounted(() => {
draw();
});
// 下载图表

122
hx-ai-intelligent/src/view/monitor/energyMonitor/graphTable/index.vue
View File

@ -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>

91
hx-ai-intelligent/src/view/monitor/energyMonitor/index.vue
View File

@ -1,88 +1,19 @@
<!-- 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>
<page />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import tree from './tree/index.vue';
import graphGraph from './graphGraph/index.vue';
import environmentTable from './table/index.vue';
<script setup>
import { reactive, provide } from 'vue';
import page from './page.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 pageData = reactive({
graphTableList: [],
graphTableColumns: [],
graphGraphList: [],
});
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';
}
}
// 使用 provide 函数来提供这个响应式对象
provide('pageData', pageData);
</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
View 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>

662
hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
View File

@ -4,38 +4,38 @@
<div class="ns-tree-title">
<span>数据点位</span>
</div>
<!-- <a-tree-select
v-model:value="value"
style="width: 100%"
:tree-line="treeLine && { showLeafIcon }"
:tree-data="treeData1"
>
</a-tree-select> -->
<a-select
ref="select"
v-model:value="selectedValue"
placeholder="请选择能耗类型"
style="width: 100%; margin-bottom: 10px"
:options="options1" />
:options="options1"
@change="changeEnergyType" />
<a-radio-group
v-model:value="mode"
@change="changeMode"
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-group>
<a-input v-model:value="value" placeholder="请输入设备名称" v-if="mode == '1'" />
<a-input v-model:value="value" placeholder="请输入节点名称" v-else />
<a-tree
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
v-model:checkedKeys="checkedKeys"
checkable
:height="300"
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
:tree-data="treeData2" />
<a-input
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
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
v-model:checkedKeys="checkedKeys"
checkable
:height="300"
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
:tree-data="treeData2" />
</a-spin>
<div class="fixed-bottom">
<a-divider />
@ -52,193 +52,482 @@
@calendarChange="onCalendarChange"
style="width: 100%; margin-bottom: 10px"
:placeholder="['请选择日期', '请选择日期']" />
<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="getSelect">
查询
</a-button>
<!-- <a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect11">
模拟不同数据查询
</a-button> -->
</div>
</div>
</template>
<script lang="ts">
import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
import { defineComponent, ref, onMounted } from 'vue';
import type { TreeSelectProps, SelectProps } from 'ant-design-vue';
import { defineComponent, ref, onMounted, inject } from 'vue';
import { Dayjs } from 'dayjs';
import { http } from '/nerv-lib/util';
import { device, group } from '/@/api/deviceManage';
import { dict } from '/@/api';
export default defineComponent({
// eslint-disable-next-line vue/multi-word-component-names
name: 'Tree',
setup() {
// const treeLine = ref(true);
// const showLeafIcon = ref(false);
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']>([
{
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',
},
],
},
]);
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']);
// 树打开节点
const expandedKeys = ref<string[]>([]);
// 树勾选节点
const selectedKeys = ref<string[]>([]);
// 树点击节点
const checkedKeys = ref<string[]>([]);
// 能耗类型list
const options1 = ref<SelectProps['options']>([]);
const options2 = ref<SelectProps['options']>([
{
value: '1',
label: '5分钟',
},
{
value: '2',
label: '10分钟',
},
{
value: '3',
label: '30分钟',
},
{
value: '4',
label: '1小时',
},
]);
// 采集频率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 getDianWeiList = () => {
console.log('getDianWeiList 被调用');
options1.value = [
{ value: '1', label: '用电量' },
{ value: '2', label: '用水量' },
{ value: '3', label: '碳排量' },
{ value: '4', label: '标煤量' },
// 页面初始化参数
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',
label: '5分钟',
},
{
value: '2',
label: '10分钟',
},
{
value: '3',
label: '30分钟',
},
{
value: '4',
label: '1小时',
},
];
};
interface PageData {
graphTableList: any[];
graphTableColumns: any[];
graphGraphList: any[];
}
const pageData = inject<PageData>('pageData');
if (!pageData) {
throw new Error('pageData is not provided');
}
const getSelect = () => {};
// 选择能耗类型
const changeEnergyType = () => {
if (selectedValue.value == '8') {
shebei.value = true;
mode.value = '2';
} else {
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 treeData2 = ref<TreeProps['treeData']>([]);
const orgId = ref('');
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
orgId.value = result;
const treeData2 = ref<TreeSelectProps['treeData']>([]);
// 切换树结构
const changeMode = () => {
treeLoading.value = true;
if (mode.value == '1') {
treeData2.value = [
{
title: 'AC_001(总电表)',
key: '101',
children: [
{
title: 'AC_002(暖通电表)',
key: '102',
},
{
title: 'AC_003(照明电表)',
key: '103',
},
{
title: 'AC_004(给排水电表)',
key: '104',
},
{
title: 'AC_005(通风电表)',
key: '105',
},
{
title: 'AC_006(电动门电表)',
key: '106',
},
],
},
];
http
.post(device.queryDevicePage, {
deviceName: deviceName.value,
energyType: selectedValue.value,
orgId: orgId.value,
pageNum: 1,
pageSize: 9999,
})
.then((res) => {
let val = '999999999';
let label = '所有设备';
let records = res.data.records;
records.forEach((item: any) => {
(item.title = item.deviceModel + ' ' + item.deviceName), (item.key = item.id);
});
let a: TreeSelectProps['treeData'] = [{ title: label, key: val, children: records }];
treeData2.value = a;
expandedKeys.value = [val];
})
.finally(() => {
treeLoading.value = false;
});
} else {
treeData2.value = [
{
title: '功能分项',
key: '1',
children: [
{
title: '照明',
key: '2',
children: [
{
title: '站台照明',
key: '3',
},
{
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',
},
],
},
];
http
.post(group.queryDeviceGroupTree, {
pointName: pointName.value,
energyType: selectedValue.value,
orgId: orgId.value,
})
.then((res) => {
treeData2.value = [];
treeData2.value = formatTreeData(pointName.value ? res.data[0].searchList : res.data);
expandedKeys.value = getAllKeys(treeData2.value);
})
.finally(() => {
treeLoading.value = false;
});
}
};
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];
const dates = ref<RangeValue>();
@ -270,17 +559,14 @@
dates.value = val;
};
onMounted(() => {
getDianWeiList();
getOptionsList();
changeMode();
});
// const dateFormat = 'YYYY-MM-DD';
return {
// treeLine,
// showLeafIcon,
value,
treeData1,
deviceName,
pointName,
treeData2,
expandedKeys,
selectedKeys,
@ -291,14 +577,18 @@
selectedValue,
frequencyValue,
dateRange,
getDianWeiList,
getOptionsList,
getSelect,
getSelect11,
changeMode,
disabledDate,
onCalendarChange,
onOpenChange,
onChange,
hackValue,
treeLoading,
changeEnergyType,
shebei,
};
},
});

Write Preview
Loading…
Cancel
Save