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

1.设备监控 图表下载 时间选择改为三天

Browse Source 
2.能耗监控 - 图表前台页面
This commit is contained in:
fks-yangshouda
2024-07-09 10:10:17 +08:00
parent ab17c4a1f9
commit fb1980d73a
11 changed files with 1249 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,76 +1,80 @@
<template>
<a-row type="flex">
<a-col :span="4">
<div style="padding: 0 20px; width: 100%; height: 100%;">
<tree ref="treeRef"></tree>
<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 style="width: 100%; height: 100%">
<div class="ns-right-title">
<span>历史数据</span>
<div class="button">
<ns-icon name="biaoge" size="18" style="margin-right: 10px;"/>
<ns-icon :name="iconName" size="18" style="margin-right: 10px;" @click="change"/>
<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>
<graph ref="graphRef" v-if="isGraph"></graph>
<environment-table ref="tableRef" v-else></environment-table>
<graph ref="graphRef" v-if="isGraph" />
<environment-table ref="tableRef" v-else />
</div>
</a-col>
</a-row>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import tree from './tree/index.vue';
import graph from './graph/index.vue';
import environmentTable from './table/index.vue';
import { ref } from 'vue';
import tree from './tree/index.vue';
import graph from './graph/index.vue';
import environmentTable from './table/index.vue';
const iconName = ref('biaoge');
const iconName = ref('biaoge');
const treeRef = ref();
const graphRef = ref();
const tableRef = ref();
const treeRef = ref();
const graphRef = ref();
const tableRef = ref();
let isGraph = ref(true)
let isGraph = ref(true);
defineOptions({
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
});
defineOptions({
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
});
function change() {
const downloadChart = () => {
if (isGraph.value) {
if (graphRef.value) {
graphRef.value.downloadChart();
}
}
};
isGraph.value = !isGraph.value
if (iconName.value == 'biaoge') {
iconName.value = 'bingtu'
} else {
iconName.value = 'biaoge'
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;
.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;
> span {
padding-left: 10px;
line-height: 20px;
}
}
.button {
display: inline-block;
padding-right: 10px;
}
}
.button {
display: inline-block;
padding-right: 10px;
}
</style>