You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.2 KiB
88 lines
2.2 KiB
<!-- 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>
|
|
|