页面截图

2024-01-12 14:05:36 +08:00
parent 8d18e53d51
commit df192a9a7f
6 changed files with 130 additions and 34 deletions
--- a/package.json
+++ b/package.json
@@ -17,6 +17,7 @@
    "echarts": "^5.4.3",
    "echarts4": "npm:echarts@^4.9.0",
    "element-plus": "^2.4.4",
+    "html2canvas": "^1.4.1",
    "lodash-es": "^4.17.21",
    "mitt": "^3.0.1",
    "nprogress": "^0.2.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'

-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
  '@element-plus/icons-vue':
    specifier: ^2.3.1
@@ -29,6 +25,9 @@ dependencies:
  element-plus:
    specifier: ^2.4.4
    version: 2.4.4(vue@3.3.13)
+  html2canvas:
+    specifier: ^1.4.1
+    version: 1.4.1
  lodash-es:
    specifier: ^4.17.21
    version: 4.17.21
@@ -1113,6 +1112,11 @@ packages:
  /balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==, tarball: https://registry.npmmirror.com/balanced-match/-/balanced-match-1.0.2.tgz}

+  /base64-arraybuffer@1.0.2:
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
+    engines: {node: '>= 0.6.0'}
+    dev: false
+
  /binary-extensions@2.2.0:
    resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==, tarball: https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz}
    engines: {node: '>=8'}
@@ -1211,6 +1215,12 @@ packages:
    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==, tarball: https://registry.npmmirror.com/crypto-js/-/crypto-js-4.2.0.tgz}
    dev: false

+  /css-line-break@2.1.0:
+    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
+    dependencies:
+      utrie: 1.0.2
+    dev: false
+
  /csstype@3.1.3:
    resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==, tarball: https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz}

@@ -1424,6 +1434,14 @@ packages:
    engines: {node: '>=8'}
    dev: true

+  /html2canvas@1.4.1:
+    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      css-line-break: 2.1.0
+      text-segmentation: 1.0.3
+    dev: false
+
  /immutable@4.3.4:
    resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==, tarball: https://registry.npmmirror.com/immutable/-/immutable-4.3.4.tgz}

@@ -1755,6 +1773,12 @@ packages:
    resolution: {integrity: sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==}
    dev: true

+  /text-segmentation@1.0.3:
+    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
+    dependencies:
+      utrie: 1.0.2
+    dev: false
+
  /to-fast-properties@2.0.0:
    resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==, tarball: https://registry.npmmirror.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz}
    engines: {node: '>=4'}
@@ -1814,6 +1838,12 @@ packages:
      - vite
    dev: false

+  /utrie@1.0.2:
+    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
+    dependencies:
+      base64-arraybuffer: 1.0.2
+    dev: false
+
  /validator@13.11.0:
    resolution: {integrity: sha512-Ii+sehpSfZy+At5nPdnyMhx78fEoPDkR2XW/zimHEL3MyGJQOCQ7WeP20jPYRz7ZCpcKLB21NxuXHF3bxjStBQ==}
    engines: {node: '>= 0.10'}
@@ -1978,3 +2008,7 @@ packages:
    dependencies:
      tslib: 2.3.0
    dev: false
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
--- a/src/layouts/admin/components/navMenus.vue
+++ b/src/layouts/admin/components/navMenus.vue
@@ -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')
--- a/src/layouts/admin/index.vue
+++ b/src/layouts/admin/index.vue
@@ -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: []
--- a/src/views/govern/analyze/APF/index.vue
+++ b/src/views/govern/analyze/APF/index.vue
@@ -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;

--- a/src/views/govern/analyze/DVR/index.vue
+++ b/src/views/govern/analyze/DVR/index.vue
@@ -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>