From 5dab587b8a1618386ed061ea64e87694e41dbedd Mon Sep 17 00:00:00 2001
From: fuguobin <fgbin2008@163.com>
Date: Fri, 19 Jan 2024 09:50:39 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=82=E6=95=B0=E5=9B=BE=E8=A1=A8=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lang/en.ts                              |  10 +-
 src/lang/zh-cn.ts                           |  10 +-
 src/layout/components/AppMain.vue           |   2 +-
 src/types/auto-imports.d.ts                 |   6 +
 src/views/details/index.scss                | 153 ++++++++++++++++----
 src/views/details/index.vue                 | 103 +++++++++++--
 src/views/login/index.vue                   |   2 +-
 src/views/monitoring/devicemanage/index.vue |   2 +-
 src/views/monitoring/screen/index.vue       |   2 +-
 9 files changed, 239 insertions(+), 51 deletions(-)

diff --git a/src/lang/en.ts b/src/lang/en.ts
index 7a40081..c19df83 100644
--- a/src/lang/en.ts
+++ b/src/lang/en.ts
@@ -14,14 +14,18 @@ export default {
     login: 'Login',
     verifyCode: 'Verify Code',
     remember: 'Remember Password',
-    group: 'Luen Mei Intelligence Energy Technology (Shenyang) Co., Ltd',
-    abbreviation: 'Luen Mei Intelligence',
-    copyright: 'All Rights Reserved.'
   },
   // 导航栏国际化
   navbar: {
     dashboard: 'Dashboard',
     logout: 'Logout',
     document: 'Document'
+  },
+  //版权信息
+  copyright: {
+    year: '2024',
+    company: 'Luen Mei Intelligence Energy Technology (Shenyang) Co., Ltd',
+    abbr:'Luen Mei Intelligence',
+    document: 'All Rights Reserved.'
   }
 };
diff --git a/src/lang/zh-cn.ts b/src/lang/zh-cn.ts
index 534acc6..31e56e5 100644
--- a/src/lang/zh-cn.ts
+++ b/src/lang/zh-cn.ts
@@ -14,14 +14,18 @@ export default {
     login: '登 录',
     verifyCode: '验证码',
     remember: '记住密码',
-    group: '联美智慧能源科技(沈阳)有限公司',
-    abbreviation: '联美智慧',
-    copyright: '版权所有'
   },
   // 导航栏国际化
   navbar: {
     dashboard: '首页',
     logout: '注销',
     document: '项目文档'
+  },
+  //版权信息
+  copyright: {
+    year: '2024',
+    company: '联美智慧能源科技(沈阳)有限公司',
+    abbr:'联美智慧',
+    document: '版权所有'
   }
 };
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
index eece381..d172c06 100644
--- a/src/layout/components/AppMain.vue
+++ b/src/layout/components/AppMain.vue
@@ -7,7 +7,7 @@
         </keep-alive>
       </transition>
     </router-view>
-    <div class="copyright">Copyright © 2023 {{ $t('login.abbreviation') }} {{ $t('login.copyright') }}</div>
+    <div class="copyright">Copyright © {{ $t('copyright.year') }} {{ $t('copyright.abbr') }} {{ $t('copyright.document') }}</div>
   </section>
 </template>
 
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 9ea2d5d..5742656 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -2,8 +2,11 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const ElForm: typeof import('element-plus/es')['ElForm']
   const ElMessage: typeof import('element-plus/es')['ElMessage']
   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
+  const ElNotification: typeof import('element-plus/es')['ElNotification']
+  const NEllipsis: typeof import('naive-ui')['NEllipsis']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
   const computed: typeof import('vue')['computed']
@@ -270,8 +273,11 @@ import { UnwrapRef } from 'vue'
 declare module 'vue' {
   interface ComponentCustomProperties {
     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly ElForm: UnwrapRef<typeof import('element-plus/es')['ElForm']>
     readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
     readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
+    readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>
+    readonly NEllipsis: UnwrapRef<typeof import('naive-ui')['NEllipsis']>
     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
     readonly computed: UnwrapRef<typeof import('vue')['computed']>
diff --git a/src/views/details/index.scss b/src/views/details/index.scss
index 2c0eaa7..666c3d4 100644
--- a/src/views/details/index.scss
+++ b/src/views/details/index.scss
@@ -1,16 +1,15 @@
 @import url('@/assets/fonts/font.css');
 .details {
-  padding: 1.5rem 1.5rem 0 1.5rem;
-  .header {
-    margin-bottom: 1.5rem;
-  }
+  padding: 15px 15px 0 15px;
   .search {
-    margin-bottom: 1.5rem;
+    position: relative;
+    margin-bottom: 15px;
+    overflow: visible;
     :deep(.el-card__header) {
       padding: 10px;
     }
     :deep(.el-card__body) {
-      padding: 20px 20px 0 20px;
+      padding: 0 20px;
     }
     .cardHeader {
       display: flex;
@@ -35,23 +34,92 @@
     }
     .searchForm {
       .item {
-        margin-bottom: 20px;
+        margin: 20px 0;
         .searchCheckbox {
           margin-right: 30px;
         }
       }
       .formBtn {
-        padding: 0 20px;
+        margin: 20px;
       }
     }
+    .searchTips {
+      position: absolute;
+      bottom: 0;
+      right: 30px;
+      cursor: pointer;
+    }
+    .searchTips.isShow {
+      bottom: -15px;
+    }
+
+    .searchTips.isHide::after {
+      content: '隐藏';
+      position: absolute;
+      top: -130%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 40px;
+      height: fit-content;
+      background-color: var(--el-menu-active-color);
+      padding: 4px 8px;
+      border-radius: 5px;
+      transition: 0.2s linear;
+      transition-delay: 0.2s;
+      color: white;
+      // text-transform: uppercase;
+      font-size: 12px;
+      opacity: 0;
+      // visibility: hidden;
+    }
+
+    .searchTips.isShow::after {
+      content: '显示';
+      position: absolute;
+      top: -130%;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 40px;
+      height: fit-content;
+      background-color: var(--el-menu-active-color);
+      padding: 4px 8px;
+      border-radius: 5px;
+      transition: 0.2s linear;
+      transition-delay: 0.2s;
+      color: white;
+      // text-transform: uppercase;
+      font-size: 12px;
+      opacity: 0;
+      // visibility: hidden;
+    }
+
+    .icon {
+      transform: scale(1.2);
+      transition: 0.2s linear;
+    }
+
+    .searchTips:hover > .icon {
+      transform: scale(1.5);
+    }
+
+    .searchTips:hover > .icon path {
+      fill: var(--el-menu-active-color);
+    }
+
+    .searchTips:hover::after {
+      visibility: visible;
+      opacity: 1;
+      top: -160%;
+    }
   }
   .echart {
     :deep(.el-card__body) {
       display: flex;
-      padding: 1.5rem;
+      padding: 15px;
       .sidebar {
         width: 200px;
         border: 1px solid #e8eaec;
+        height: calc(100vh - 150px - 30px - 40px - 2px);
 
         h3 {
           height: 25px;
@@ -63,7 +131,7 @@
           text-align: center;
         }
         .deviceMenu {
-          height: calc(100vh - 205px - 7.5rem);
+          height: calc(100vh - 150px - 30px - 40px - 55px - 4px);
           border-right: none;
           overflow: auto;
           .el-menu-item {
@@ -92,7 +160,7 @@
         }
 
         .paramList {
-          height: calc(100vh - 150px - 7.5rem);
+          // height: calc(100vh - 150px - 7.5rem);
           padding: 20px 10px;
           overflow: auto;
           .item {
@@ -156,18 +224,35 @@
       }
       .comparisonInfo {
         flex: 1;
-        margin: 0 1.5rem;
+        margin: 0 15px;
         .stackedLine {
           width: 100%;
-          height: calc(100vh - 150px - 7.5rem);
+          height: calc(100vh - 150px - 30px - 40px - 2px);
+          line-height: calc(100vh - 150px - 30px - 40px - 2px);
           font-size: 1.4rem;
           text-align: center;
           color: #606266;
-          line-height: calc(100vh - 150px - 7.5rem);
         }
       }
     }
   }
+  .echart.echartHide {
+    :deep(.el-card__body) {
+      .sidebar {
+        height: calc(100vh - 78px - 30px - 40px - 2px);
+        .deviceMenu {
+          height: calc(100vh - 78px - 30px - 40px - 55px - 4px);
+        }
+      }
+      .comparisonInfo {
+        .stackedLine {
+          height: calc(100vh - 78px - 30px - 40px - 2px);
+          line-height: calc(100vh - 78px - 30px - 40px - 2px);
+        }
+      }
+    }
+  }
+
   .copyright {
     height: 40px;
     line-height: 40px;
@@ -180,20 +265,34 @@
 }
 /** pc **/
 @media only screen and (min-width: 768px) and (max-width: 1680px) {
-  .details {
-    color: red;
-    .echart {
-      :deep(.el-card__body) {
-        .sidebar {
-          .deviceMenu {
-            height: calc(100vh - 266px - 7.5rem) !important;
-          }
+  .echart {
+    :deep(.el-card__body) {
+      .sidebar {
+        height: calc(100vh - 222px - 30px - 40px - 2px) !important;
+        .deviceMenu {
+          height: calc(100vh - 222px - 30px - 40px - 55px - 4px) !important;
         }
-        .comparisonInfo {
-          .stackedLine {
-            height: calc(100vh - 211px - 7.5rem);
-            line-height: calc(100vh - 211px - 7.5rem) !important;
-          }
+      }
+      .comparisonInfo {
+        .stackedLine {
+          height: calc(100vh - 222px - 30px - 40px - 2px) !important;
+          line-height: calc(100vh - 222px - 30px - 40px - 2px) !important;
+        }
+      }
+    }
+  }
+  .echart.echartHide {
+    :deep(.el-card__body) {
+      .sidebar {
+        height: calc(100vh - 78px - 30px - 40px - 2px) !important;
+        .deviceMenu {
+          height: calc(100vh - 78px - 30px - 40px - 55px - 4px) !important;
+        }
+      }
+      .comparisonInfo {
+        .stackedLine {
+          height: calc(100vh - 78px - 30px - 40px - 2px) !important;
+          line-height: calc(100vh - 78px - 30px - 40px - 2px) !important;
         }
       }
     }
diff --git a/src/views/details/index.vue b/src/views/details/index.vue
index 6639224..6a91536 100644
--- a/src/views/details/index.vue
+++ b/src/views/details/index.vue
@@ -18,7 +18,15 @@
           </n-tooltip>
         </div>
       </template>
-      <el-form class="searchForm" ref="searchRef" :rules="rules" :inline="true" :model="searchForm" label-width="100px">
+      <el-form
+        class="searchForm animate__animated animate__fadeInUp"
+        ref="searchRef"
+        :rules="rules"
+        :inline="true"
+        :model="searchForm"
+        label-width="100px"
+        v-show="searchShow"
+      >
         <!-- <el-form-item class="item" label="时间:" prop="time">
           <el-date-picker
             v-model="searchForm.time"
@@ -31,7 +39,7 @@
             @change="timeChange"
           />
         </el-form-item> -->
-        <el-form-item label="起始时间:">
+        <el-form-item class="item" label="起始时间:">
           <el-date-picker
             v-model="searchForm.date"
             type="date"
@@ -126,14 +134,53 @@
             />
           </el-select>
         </el-form-item>
+        <el-form-item class="formBtn">
+          <el-button type="primary" @click="stepClickDebounce">确认</el-button>
+        </el-form-item>
         <!-- <el-form-item class="item" label="是否显示0值">
           <el-checkbox class="searchCheckbox" v-model="searchForm.showZero" @change="showZeroChange" />
           <el-button type="primary" @click="submitForm(searchRef)">搜索</el-button>
           <el-button @click="resetForm(searchRef)">重置</el-button>
         </el-form-item> -->
       </el-form>
+      <div class="searchTips isHide" @click="searchClick('hide')" v-if="searchShow">
+        <svg
+          t="1705471366268"
+          class="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="2797"
+          width="12"
+          height="12"
+        >
+          <path
+            d="M204.98 558.99l-93.99-93.98L512 64l401 401.01-93.99 93.98L512 251.97 204.98 558.99z m0 401.01l-93.99-93.99 401.01-401 401 401L819.02 960 512 652.98 204.98 960z"
+            fill="#717171"
+            p-id="2798"
+          ></path>
+        </svg>
+      </div>
+      <div class="searchTips isShow" @click="searchClick('show')" v-if="!searchShow">
+        <svg
+          t="1705471928104"
+          class="icon"
+          viewBox="0 0 1024 1024"
+          version="1.1"
+          xmlns="http://www.w3.org/2000/svg"
+          p-id="3076"
+          width="12"
+          height="12"
+        >
+          <path
+            d="M819.02 465.01l93.99 93.98L512 960 110.99 558.99l93.99-93.98L512 772.03l307.02-307.02z m0-401.01l93.99 93.99-401 401-401.01-401L204.98 64 512 371.02 819.02 64z"
+            fill="#717171"
+            p-id="3077"
+          ></path>
+        </svg>
+      </div>
     </el-card>
-    <el-card class="echart" shadow="always">
+    <el-card class="echart" :class="{'echartHide':!searchShow }" shadow="always">
       <div class="sidebar">
         <h3>换热站</h3>
         <el-menu :default-active="filterForm.deviceUuid" class="deviceMenu" @select="deviceSelect" @open="deviceOpen">
@@ -169,7 +216,7 @@
         </div>
       </div>
     </el-card>
-    <div class="copyright">Copyright © 2023 {{ $t('login.abbreviation') }} {{ $t('login.copyright') }}</div>
+    <div class="copyright">Copyright © {{ $t('copyright.year') }} {{ $t('copyright.abbr') }} {{ $t('copyright.document') }}</div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -178,7 +225,6 @@ import { Ref } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import { useDateFormat, useNow } from '@vueuse/core';
 import { randomColor, endTime, debounce } from '@/utils/index';
-const stackedRef: Ref<HTMLElement | any> = ref(null);
 import type { FormInstance, FormRules } from 'element-plus';
 import { ReturnDownBack } from '@vicons/ionicons5';
 
@@ -200,9 +246,12 @@ const currentEndTime = ref();
 // const nowTime = ref();
 const timer = ref();
 const isCurrentRoute = ref(true);
+const searchShow = ref(true);
 // const currentSecond = useDateFormat(useNow(), 'YYYY-MM-DD HH:mm:ss');
 
 const searchRef = ref<FormInstance>();
+const stackedRef: Ref<HTMLElement | any> = ref(null);
+const mapEcharts = ref();
 // const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 2, 1, 12, 0, 0)];
 // const multipleLimit = ref(0);
 // const parameterLimit = ref(0);
@@ -236,7 +285,7 @@ const searchForm: any = reactive({
   class: '',
   parameter: [],
   partition: '',
-  showZero: false
+  showZero: true
 });
 const filterForm = reactive({
   startTime: '',
@@ -245,7 +294,7 @@ const filterForm = reactive({
   deviceUuid: '',
   paramCode: '',
   partion: '',
-  showZero: false,
+  showZero: true,
   queryType: 1 //1:正常查询，2:实时查询
 });
 const rules = reactive<FormRules>({
@@ -654,6 +703,11 @@ onUnmounted(() => {
   if (timer.value !== null || timer.value !== undefined) {
     clearTimeout(timer.value);
   }
+  if (mapEcharts.value) {
+    //echarts销毁函数
+    echarts.dispose(mapEcharts.value);
+    mapEcharts.value = null;
+  }
 });
 
 const deviceSelect = (key: string, keyPath: string[], item: object) => {
@@ -689,7 +743,7 @@ document.addEventListener('keyup', e => {
 });
 const keyClickDebounce = debounce(() => {
   keyClick(keyupType.value);
-}, 500);
+}, 800);
 function keyClick(res: string) {
   //键盘事件
   if (filterForm.startTime === '') {
@@ -820,10 +874,10 @@ function getweatherHoursList() {
 }
 
 const debounceClick = debounce(() => {
-  getDeviceInfoss();
+  getDevicePolling();
 }, 360000);
 
-function getDeviceInfoss() {
+function getDevicePolling() {
   //轮询获取折线图数据
   console.log(useDateFormat(new Date(), 'YYYY-MM-DD HH:mm:ss').value);
   const params = filterForm;
@@ -837,7 +891,7 @@ function getDeviceInfoss() {
       if (isCurrentRoute.value) {
         timer.value = setTimeout(async () => {
           await (timer.value && clearTimeout(timer.value));
-          await getDeviceInfoss();
+          await getDevicePolling();
         }, 360000);
       }
       if (res.data.additionalInfo != null) {
@@ -854,7 +908,7 @@ function getDeviceInfoss() {
         });
       });
       console.log(options.series);
-      const chart = echarts.init(document.getElementById('stackedLine'));
+      const chart = echarts.init(stackedRef.value);
       chart.setOption(options);
       // mainInfoList.value = res.data.mainInfos;
       // init(res.data);
@@ -873,7 +927,8 @@ function init(data: any) {
     options.title.text = '暂无数据';
     options.title.x = 'center';
     options.title.y = 'center';
-    const chart = echarts.init(document.getElementById('stackedLine'));
+    const chart = echarts.init(stackedRef.value);
+    mapEcharts.value = chart;
     chart.clear();
     chart.resize();
     console.log('options--', options);
@@ -927,8 +982,12 @@ function init(data: any) {
       data: item.data
     });
   });
-  const chart = echarts.init(document.getElementById('stackedLine'));
+  const chart = echarts.init(stackedRef.value);
   chart.clear();
+  window.addEventListener('resize', function () {
+    chart.resize();
+  });
+  mapEcharts.value=chart
   chart.resize();
   console.log('options--', options);
   chart.setOption(options);
@@ -982,6 +1041,7 @@ function timeChange(res: any) {
 function stepChange(num: any) {
   //时间长度
   filterForm.step = num;
+  stepClickDebounce();
 }
 function stepTypeChange(value: string) {
   //时间长度
@@ -1020,6 +1080,11 @@ function partitionChange(res: string) {
   filterForm.partion = res;
   verifyInfo();
 }
+
+const stepClickDebounce = debounce(() => {
+  verifyInfo();
+}, 800);
+
 function verifyInfo() {
   if (filterForm.deviceUuid === '') {
     ElMessage({
@@ -1031,6 +1096,11 @@ function verifyInfo() {
       message: '请选择起始时间',
       type: 'warning'
     });
+  } else if (filterForm.step === null) {
+    ElMessage({
+      message: '请选择时间长度',
+      type: 'warning'
+    });
   } else if (filterForm.paramCode === '') {
     ElMessage({
       message: '请选择曲线参数',
@@ -1040,6 +1110,11 @@ function verifyInfo() {
     getDeviceInfo();
   }
 }
+function searchClick(type: string) {
+  //显示/隐藏筛选栏
+  searchShow.value = type === 'hide' ? false : true;
+  verifyInfo();
+}
 // const submitForm = (formEl: FormInstance | undefined) => {
 //   //筛选确认
 //   if (!formEl) return;
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 006a0de..549ba99 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -73,7 +73,7 @@
     <div class="videoCover" v-if="!videoCanPlay && settingsStore.showVideo">
       <img :style="resizeStyle" src="../../assets/images/login-bg.png" alt="视频封面" />
     </div>
-    <div class="copyright">Copyright © 2023 {{ $t('login.group') }} {{ $t('login.copyright') }}</div>
+    <div class="copyright">Copyright © {{ $t('copyright.year') }} {{ $t('copyright.company') }} {{ $t('copyright.document') }}</div>
   </div>
 </template>
 
diff --git a/src/views/monitoring/devicemanage/index.vue b/src/views/monitoring/devicemanage/index.vue
index 0517a71..3b84049 100644
--- a/src/views/monitoring/devicemanage/index.vue
+++ b/src/views/monitoring/devicemanage/index.vue
@@ -11,7 +11,7 @@
         <Main :sidebarHeight="sidebarHeight" />
       </div>
     </section>
-    <div class="copyright">Copyright © 2023 {{ $t('login.abbreviation') }} {{ $t('login.copyright') }}</div>
+    <div class="copyright">Copyright © {{ $t('copyright.year') }} {{ $t('copyright.abbr') }} {{ $t('copyright.document') }}</div>
   </div>
 </template>
 <script lang="ts" setup>
diff --git a/src/views/monitoring/screen/index.vue b/src/views/monitoring/screen/index.vue
index 34a22ae..2794411 100644
--- a/src/views/monitoring/screen/index.vue
+++ b/src/views/monitoring/screen/index.vue
@@ -79,7 +79,7 @@
     </div>
     <div class="panelBtn" :class="menuShow ? 'left' : 'right'" @click="panelClick">
       <i class="iconfont icon-arrow-up" :class="!panelShow ? 'up' : 'down'"></i>
-      <div class="copyright">Copyright © 2023 {{ $t('login.abbreviation') }} {{ $t('login.copyright') }}</div>
+      <div class="copyright">Copyright © {{ $t('copyright.year') }} {{ $t('copyright.abbr') }} {{ $t('copyright.document') }}</div>
       <!-- <n-button type="info" size="tiny" ghost @click="panelClick">按钮</n-button> -->
     </div>
   </div>