zhaohy 3 months ago
parent
commit
6cb09f631b
  1. 8
      hx-ai-intelligent/src/icon/biaoge1.svg
  2. 8
      hx-ai-intelligent/src/icon/zhexiantu.svg
  3. 31
      hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue
  4. 10
      hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue
  5. 1
      hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue
  6. 25
      hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue
  7. 29
      hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue
  8. 8
      hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue
  9. 38
      hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue
  10. 56
      hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue
  11. 6
      hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue

8
hx-ai-intelligent/src/icon/biaoge1.svg

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<g id="组_22740" data-name="组 22740" transform="translate(-1845.881 -208.881)">
<g id="组_24427" data-name="组 24427">
<rect id="矩形_16486" data-name="矩形 16486" width="20" height="20" transform="translate(1845.881 208.881)" fill="none"/>
<path id="路径_31099" data-name="路径 31099" d="M63.9,114.958h4.606v3.835H63.9Zm5.862,5.122h4.774V124.3H69.762Zm0-5.122h4.774v3.835H69.762Zm6.284,5.122H80.4V124.3H75.793v-3.964A.255.255,0,0,1,76.046,120.08Zm-12.146,0h4.606V124.3H63.9Zm0-10.98H80.4v4.571H63.9Zm12.146,5.858H80.4v3.835H75.793v-3.577A.255.255,0,0,1,76.046,114.958Z" transform="translate(1783.72 101.781)" fill="#2778ff"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 765 B

8
hx-ai-intelligent/src/icon/zhexiantu.svg

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
<g id="组_24431" data-name="组 24431" transform="translate(-1871 -212)">
<g id="组_24430" data-name="组 24430" transform="translate(25.119 3.119)">
<rect id="矩形_16486" data-name="矩形 16486" width="20" height="20" transform="translate(1845.881 208.881)" fill="none"/>
<path id="减去_1098" data-name="减去 1098" d="M15432.129,4587.351H15419.1a1.23,1.23,0,0,1-1.224-1.29v-12.89a1.231,1.231,0,0,1,1.224-1.29h13.026a1.229,1.229,0,0,1,1.22,1.29v12.89A1.243,1.243,0,0,1,15432.129,4587.351Zm-11.3-3.614a.7.7,0,1,0,0,1.4h10.1a.7.7,0,0,0,0-1.4Zm2.913-6.2a.891.891,0,0,0-.449.217l-3.215,4a.752.752,0,0,0,.081,1.03.674.674,0,0,0,.938-.128l2.809-3.439,2.075,1.762a.712.712,0,0,0,.488.17.975.975,0,0,0,.449-.255l4.233-5.458a.637.637,0,0,0-.085-.86h0a.049.049,0,0,1-.039-.021.055.055,0,0,0-.042-.021.67.67,0,0,0-.934.128l-3.784,4.814-2.037-1.763A.688.688,0,0,0,15423.743,4577.54Z" transform="translate(-13570 -4360.604)" fill="#2778ff"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

31
hx-ai-intelligent/src/view/monitor/deviceMonitor/graph/index.vue

@ -1,5 +1,26 @@
<template>
<div ref="graphChart" style="width: 100%; height: 80%"></div>
<div
v-show="!haveData"
style="
height: 80%;
width: 96%;
position: absolute;
margin: 0 1% 0 1%;
z-index: 5;
top: 20%;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
">
<a-empty />
</div>
<!-- <div
v-else
style="height: 80%; width: 100%; display: flex; justify-content: center; align-items: center">
<a-empty />
</div> -->
</template>
<script lang="ts">
@ -36,8 +57,16 @@
const graphChart = ref(null);
let chartInstance: echarts.ECharts | null = null;
let haveData = ref(false);
const draw = () => {
data.value = pageData.graphList;
if (data.value && data.value.length > 0) {
haveData.value = true;
} else {
haveData.value = false;
return;
}
let XData = pageData.XData;
if (chartInstance) {
chartInstance.dispose();
@ -144,9 +173,11 @@
};
return {
data,
draw,
graphChart,
downloadChart,
haveData,
};
},
});

10
hx-ai-intelligent/src/view/monitor/deviceMonitor/page.vue

@ -19,7 +19,7 @@
<span><ns-icon name="title" size="11" style="margin-right: 3px" />历史数据</span>
<div class="button">
<ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
<ns-icon :name="iconName" size="15" style="margin-right: 10px" @click="change" />
<ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
</div>
</div>
<graph ref="graphRef" v-if="isGraph" />
@ -35,7 +35,7 @@
import graph from './graph/index.vue';
import environmentTable from './table/index.vue';
const iconName = ref('biaoge');
const iconName = ref('biaoge1');
const treeRef = ref();
const graphRef = ref();
@ -57,10 +57,10 @@
function change() {
isGraph.value = !isGraph.value;
if (iconName.value == 'biaoge') {
iconName.value = 'bingtu';
if (iconName.value == 'biaoge1') {
iconName.value = 'zhexiantu';
} else {
iconName.value = 'biaoge';
iconName.value = 'biaoge1';
}
}
</script>

1
hx-ai-intelligent/src/view/monitor/deviceMonitor/table/index.vue

@ -96,6 +96,7 @@
const column: TableColumnType[] = [
{
title: '序号',
width: 50,
customRender: ({ record, index }) => {
//
if (index == 0) {

25
hx-ai-intelligent/src/view/monitor/deviceMonitor/tree/index.vue

@ -7,6 +7,7 @@
</div>
<a-tree-select
ref="select"
placeholder="请选择设备类型"
v-model:value="value"
style="width: 100%"
:tree-line="treeLine && { showLeafIcon }"
@ -18,6 +19,7 @@
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
v-model:checkedKeys="checkedKeys"
:show-line="{ showLeafIcon: false }"
checkable
:height="560"
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
@ -124,23 +126,24 @@
http.post(device.queryDeviceTree, { orgId: orgId.value }).then((res) => {
treeData1.value = formatTreeData(res.data);
if (treeData1.value && treeData1.value.length > 0) {
if (treeData1.value[0].children) {
value.value = treeData1.value[0].children[0].value;
changeDeviceType(treeData1.value[0].children[0].value, [
treeData1.value[0].children[0].title,
]);
} else {
value.value = treeData1.value[0].value;
changeDeviceType(treeData1.value[0].value, [treeData1.value[0].title]);
}
}
// if (treeData1.value && treeData1.value.length > 0) {
// if (treeData1.value[0].children) {
// value.value = treeData1.value[0].children[0].value;
// changeDeviceType(treeData1.value[0].children[0].value, [
// treeData1.value[0].children[0].title,
// ]);
// } else {
// value.value = treeData1.value[0].value;
// changeDeviceType(treeData1.value[0].value, [treeData1.value[0].title]);
// }
// }
});
const formatTreeData = (data: any) => {
return data.map((item: any) => ({
title: item.code + '.' + item.deviceType,
value: item.code,
disabled: item.children.length != 0 ? true : false,
children: item.children ? formatTreeData(item.children) : [],
}));
};

29
hx-ai-intelligent/src/view/monitor/energyMonitor/graphGraph/index.vue

@ -1,5 +1,21 @@
<template>
<div ref="graphGraphchart" style="width: 100%; height: 100%"></div>
<div
v-show="!haveData"
style="
height: 80%;
width: 96%;
position: absolute;
margin: 0 1% 0 1%;
z-index: 5;
top: 20%;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
">
<a-empty />
</div>
</template>
<script lang="ts">
@ -41,12 +57,19 @@
let chartInstance: echarts.ECharts | null = null;
let haveData = ref(true);
const draw = () => {
data.value = pageData.graphGraphList;
if (data.value && data.value.length > 0) {
haveData.value = true;
} else {
haveData.value = false;
return;
}
if (chartInstance) {
chartInstance.dispose();
}
chartInstance = echarts.init(graphGraphchart.value);
// chartInstance = echarts.init(graphGraphchart.value);
var seriesList = [];
var date = pageData.graphTableColumns;
var legendList: string | any[] = [];
@ -132,7 +155,7 @@
chartInstance.setOption(option);
};
onMounted(() => {
draw();
// draw();
});
//
@ -152,6 +175,8 @@
return {
graphGraphchart,
downloadChart,
data,
haveData,
};
},
});

8
hx-ai-intelligent/src/view/monitor/energyMonitor/page.vue

@ -58,7 +58,7 @@
import analysisTable from './analysisTable/index.vue';
import analysisGraph from './analysisGraph/index.vue';
const iconName = ref('biaoge');
const iconName = ref('biaoge1');
const treeRef = ref();
const graphRef = ref();
@ -95,10 +95,10 @@
function change() {
isGraph.value = !isGraph.value;
if (iconName.value == 'biaoge') {
iconName.value = 'bingtu';
if (iconName.value == 'biaoge1') {
iconName.value = 'zhexiantu';
} else {
iconName.value = 'biaoge';
iconName.value = 'biaoge1';
}
}
</script>

38
hx-ai-intelligent/src/view/monitor/energyMonitor/tree/index.vue

@ -6,11 +6,17 @@
<span>数据点位</span>
</div>
<a-select
v-model:value="selectedValue"
placeholder="请选择能耗类型"
style="margin-bottom: 10px; width: 100%"
:options="options1"
@change="changeEnergyType" />
<a-radio-group
ref="select"
v-model:value="mode"
@change="changeMode"
style="padding-bottom: 10px; width: 100%">
style="margin-bottom: 10px; width: 100%">
<a-radio-button
value="0"
style="width: 47.5%; margin-right: 2.5%; text-align: center; border-radius: 4px"
@ -34,6 +40,7 @@
v-model:expandedKeys="expandedKeys"
v-model:selectedKeys="selectedKeys"
v-model:checkedKeys="checkedKeys"
:show-line="{ showLeafIcon: false }"
checkable
:height="600"
style="width: 100%; overflow-y: auto; margin-bottom: 10px; margin-top: 10px"
@ -57,24 +64,13 @@
<!-- <div class="fixed-bottom"> -->
<div>
<!-- <a-divider /> -->
<a-select
v-model:value="selectedValue"
placeholder="请选择能耗类型"
:style="{
top: '100px',
left: `${divWidth + 55}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
}"
:options="options1"
@change="changeEnergyType" />
<a-select
v-model:value="frequencyValue"
placeholder="请选择日期类型"
:style="{
top: '100px',
left: `${divWidth * 2 + 65}px`,
left: `${divWidth + 55}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
@ -84,7 +80,7 @@
<a-range-picker
:style="{
top: '100px',
left: `${divWidth * 3 + 75}px`,
left: `${divWidth * 2 + 65}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
@ -97,7 +93,7 @@
<a-date-picker
:style="{
top: '100px',
left: `${divWidth * 3 + 75}px`,
left: `${divWidth * 2 + 65}px`,
zIndex: 9,
position: 'absolute',
width: `${divWidth}px`,
@ -110,7 +106,7 @@
type="primary"
:style="{
top: '100px',
left: `${divWidth * 4 + 85}px`,
left: `${divWidth * 3 + 75}px`,
zIndex: 9,
position: 'absolute',
}"
@ -445,7 +441,7 @@
if (mode.value == '0') {
http
.post(group.queryDeviceToEnergy, {
deviceName: deviceName.value,
deviceNum: deviceName.value,
energyType: selectedValue.value,
orgId: orgId.value,
// pageNum: 1,
@ -478,10 +474,12 @@
})
.then((res) => {
treeData2.value = [];
treeData2.value = formatTreeData(pointName.value ? res.data[0].searchList : res.data);
treeData2.value = formatTreeData(res.data);
expandedKeys.value = getAllKeys(treeData2.value);
checkedKeys.value.push(treeData2.value[0].key, treeData2.value[1].key);
if (treeData2.value?.length >= 2) {
checkedKeys.value.push(treeData2.value[0].key, treeData2.value[1].key);
}
getSelect(null);
})
.finally(() => {

56
hx-ai-intelligent/src/view/monitor/environmentMonitor/aggregateData/index.vue

@ -326,10 +326,10 @@
.get(environmentMonitor.queryDeviceArea, { orgId: orgId.value, point: typeValue.value })
.then((res) => {
treeData2.value = res.data;
if (treeData2.value && treeData2.value.length > 0) {
quyuvalue.value = [treeData2.value[0].childList[0].id];
getDeviceHotMap();
}
// if (treeData2.value && treeData2.value.length > 0) {
// quyuvalue.value = [treeData2.value[0].childList[0].id];
// getDeviceHotMap();
// }
});
};
@ -342,12 +342,13 @@
break;
}
}
let time = timeValue.value.format('YYYY-MM-DD');
http
.post(environmentMonitor.getDeviceHotMap, {
orgId: orgId.value,
environmentType: environmentType,
location: quyuvalue.value, // idname
time: '2024-07-01',
time: time,
timeRate: frequencyValue.value, //
})
@ -383,7 +384,7 @@
//
await queryDeviceArea();
// await getDeviceHotMap();
getDeviceHotMap();
// let hotData = {
// timeList: [
@ -749,6 +750,33 @@
hotChar.dispose();
}
hotChar = echarts.init(hotChartRef.value);
let min = 0;
let max = 100;
if (typeValue.value == 'MFStem') {
//
min = -20;
max = 40;
} else if (typeValue.value == 'MFSCORAr') {
// CO2
min = 350;
max = 2000;
} else if (typeValue.value == 'MFSPM') {
// PM2.5
min = 0;
max = 500;
} else if (typeValue.value == 'MFSwf') {
//
min = 0;
max = 10000;
} else if (typeValue.value == 'MFSvf') {
// TVOC
min = 0;
max = 1;
} else if (typeValue.value == 'MFShum') {
//湿
min = 0;
max = 100;
}
const option = {
tooltip: {
@ -772,11 +800,21 @@
splitArea: {
show: true,
},
axisLabel: {
formatter: function (value) {
//
if (value.length > 5) {
return value.match(/.{1,5}/g).join('\n');
}
return value;
},
lineHeight: 20,
},
},
visualMap: {
show: false,
min: 0,
max: 30,
min: min,
max: max,
// calculable: true,
// orient: 'horizontal',
// left: 'center',
@ -803,7 +841,7 @@
],
};
hotChar = echarts.init(hotChartRef.value);
// hotChar = echarts.init(hotChartRef.value);
hotChar.setOption(option);
}
};

6
hx-ai-intelligent/src/view/monitor/environmentMonitor/index.vue

@ -9,7 +9,11 @@
margin-top: 0.5%;
padding-left: 1.5%;
background: #ffffff;
font-family: 'PingFangSC-Regular', sans-serif;
font-family: 'PingFang SC';
font-size: 16px;
font-weight: 700;
letter-spacing: 1.33px;
line-height: 21px;
">
<a-tab-pane key="1" tab="综合数据" />
<a-tab-pane key="2" tab="历史数据" />

Loading…
Cancel
Save