Web/admin-govern
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面截图

Browse Source
This commit is contained in:
仲么了
2024-01-12 14:05:36 +08:00
parent 8d18e53d51
commit df192a9a7f
6 changed files with 130 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/layouts/admin/components/navMenus.vue
View File

@@ -1,5 +1,13 @@
<template>
<div class="nav-menus" :class="configStore.layout.layoutMode">
<div @click="savePng" class="nav-menu-item">
<Icon
:color="configStore.getColorVal('headerBarTabColor')"
class="nav-menu-icon"
name="el-icon-Camera"
size="18"
/>
</div>
<div @click="onFullScreen" class="nav-menu-item" :class="state.isFullScreen ? 'hover' : ''">
<Icon
:color="configStore.getColorVal('headerBarTabColor')"
@@ -75,6 +83,7 @@ import { ADMIN_INFO } from '@/stores/constant/cacheKey'
import router from '@/router'
import { routePush } from '@/utils/router'
import { fullUrl } from '@/utils/common'
import html2canvas from 'html2canvas'
const adminInfo = useAdminInfo()
const configStore = useConfig()
@@ -89,7 +98,18 @@ const state = reactive({
const onCurrentNavMenu = (status: boolean, name: string) => {
state.currentNavMenu = status ? name : ''
}
const savePng = () => {
html2canvas(document.body,{
scale: 1,
useCORS: true
}).then(function (canvas) {
var link = document.createElement('a')
link.href = canvas.toDataURL('image/png')
link.download = 'screenshot.png'
link.click()
})
}
const onFullScreen = () => {
if (!screenfull.isEnabled) {
ElMessage.warning('layouts.Full screen is not supported')

2
src/layouts/admin/index.vue
View File

@@ -98,7 +98,7 @@ const init = async () => {
icon: 'el-icon-List',
menu_type: 'tab',
url: '',
component: '/src/views/govern/analyze/APF/index.vue',
component: '/src/views/govern/analyze/DVR/index.vue',
keepalive: 'auth/role',
extend: 'none',
children: []

58
src/views/govern/analyze/APF/index.vue
View File

@@ -1,48 +1,50 @@
<template>
<div class='default-main analyze-apf' :style='{ height: pageHeight.height }' v-loading='loading'>
<DeviceTree @node-click='nodeClick' @init='nodeClick'></DeviceTree>
<div class='analyze-apf-right'>
<el-form :inline='true'>
<el-form-item label='统计指标:'>
<el-select v-model='formInline.statisticalId' filterable placeholder='请选择'>
<div class="default-main analyze-apf" :style="{ height: pageHeight.height }" v-loading="loading">
<DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
<div class="analyze-apf-right">
<el-form :inline="true">
<el-form-item label="统计指标:">
<el-select v-model="formInline.statisticalId" filterable placeholder="请选择">
<el-option
v-for='item in zblist'
:key='item.value'
:label='item.label'
:value='item.value'
v-for="item in zblist"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label='值类型:'>
<el-select v-model='formInline.valueType' filterable placeholder='请选择'>
<el-form-item label="值类型:">
<el-select v-model="formInline.valueType" filterable placeholder="请选择">
<el-option
v-for='item in typelist'
:key='item.value'
:label='item.label'
:value='item.value'
v-for="item in typelist"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label='时间:'>
<DatePicker ref='datePickerRef'></DatePicker>
<el-form-item label="时间:">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item>
<el-button type='primary' @click='search' icon='el-icon-Search'>查询</el-button>
<el-button type="primary" @click="search" icon="el-icon-Search">查询</el-button>
</el-form-item>
<el-form-item>
<div style="display: flex;align-items: center;">
<Icon name="el-icon-InfoFilled" style="color: #ff9912"></Icon>
总输出电流阈值和总输出电流比较
</div>
</el-form-item>
</el-form>
<el-empty description='暂无数据' v-if='!echartsData' style='flex: 1'></el-empty>
<el-empty description="暂无数据" v-if="!echartsData" style="flex: 1"></el-empty>
<template v-else>
<MyEchart :options='echartsData' style='flex: 1' />
<span style='position: absolute; right: 10px; top: 10px'>
<i style='color: #ff9912' type='warning' class='el-icon-warning'></i>
总输出电流阈值和总输出电流比较
</span>
<MyEchart :options="echartsData" style="flex: 1" />
</template>
</div>
</div>
</template>
<script setup lang='ts'>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { mainHeight } from '@/utils/layout'
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
@@ -229,7 +231,7 @@ const search = () => {
boundaryGap: false,
data: xAxis,
axisLabel: {
formatter: function(value: string) {
formatter: function (value: string) {
return value.split(' ').join('\n')
}
},
@@ -289,7 +291,7 @@ const search = () => {
}
</script>
<style lang='scss'>
<style lang="scss">
.analyze-apf {
display: flex;

39
src/views/govern/analyze/DVR/index.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<div class="default-main analyze-dvr" :style="{ height: pageHeight.height }" v-loading="loading">
<DeviceTree @node-click="nodeClick" @init="nodeClick"></DeviceTree>
<div class="analyze-dvr-right"></div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { mainHeight } from '@/utils/layout'
import DeviceTree from '@/components/tree/govern/deviceTree.vue'
defineOptions({
name: 'govern/analyze/DVR'
})
const pageHeight = mainHeight(20)
const loading = ref(false)
const nodeClick = async (e: anyObj) => {
if (e.level == 2) {
}
}
</script>
<style lang="scss">
.analyze-dvr {
display: flex;
&-right {
height: 100%;
overflow: hidden;
flex: 1;
padding: 10px 10px 10px 0;
display: flex;
flex-direction: column;
}
}
</style>