77 lines
1.7 KiB
Vue
77 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<a-row type="flex">
|
||
|
|
<a-col :span="4">
|
||
|
|
<div style="padding: 0 20px; width: 100%; height: 100%;">
|
||
|
|
<tree ref="treeRef"></tree>
|
||
|
|
</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="biaoge" size="18" style="margin-right: 10px;"/>
|
||
|
|
<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>
|
||
|
|
</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';
|
||
|
|
|
||
|
|
const iconName = ref('biaoge');
|
||
|
|
|
||
|
|
const treeRef = ref();
|
||
|
|
const graphRef = ref();
|
||
|
|
const tableRef = ref();
|
||
|
|
|
||
|
|
let isGraph = ref(true)
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
|
||
|
|
});
|
||
|
|
|
||
|
|
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>
|