fks-yangshouda
4 months ago
5 changed files with 605 additions and 346 deletions
@ -0,0 +1,81 @@ |
|||||
|
<!-- eslint-disable vue/multi-word-component-names --> |
||||
|
<template> |
||||
|
<a-row type="flex"> |
||||
|
<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> |
||||
|
<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'; |
||||
|
|
||||
|
const iconName = ref('biaoge'); |
||||
|
|
||||
|
const treeRef = ref(); |
||||
|
const graphRef = ref(); |
||||
|
const tableRef = ref(); |
||||
|
|
||||
|
let isGraph = ref(true); |
||||
|
|
||||
|
defineOptions({ |
||||
|
name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效 |
||||
|
}); |
||||
|
|
||||
|
const downloadChart = () => { |
||||
|
if (isGraph.value) { |
||||
|
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> |
Loading…
Reference in new issue