处理水滴图卡屏bug、页面优化

index.html

@@ -16,6 +16,13 @@
       height: 100%;
       margin: 0px;
       padding: 0px;
+      overflow-y: auto;
+    }
+
+    #app::-webkit-scrollbar {
+      display: none;
+      scrollbar-width: none;
+      scrollbar-color: transparent transparent;
     }
 
     .chromeframe {

src/components/HeadlineTag/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="type == 'left' ? 'head_left_bj' : 'head_right_bj'">
+    <div :class="type == 'left' ? 'headline_left_bj' : 'headline_right_bj'">
         <div class="desk_box_head"
             :style="{ marginRight: type == 'right' ? '50px' : '0px', marginLeft: type == 'left' ? '50px' : '0px' }">
             <span class="text_desk_head" v-if="type == 'right'" style="padding-right: 15px;">{{ value }}</span>
@@ -70,7 +70,7 @@ const props = defineProps({
     transform: skewX(45deg);
 }
 
-.head_left_bj {
+.headline_left_bj {
     position: relative;
     display: flex;
     align-items: center;
@@ -91,7 +91,7 @@ const props = defineProps({
     }
 }
 
-.head_right_bj {
+.headline_right_bj {
     position: relative;
     display: flex;
     align-items: center;

src/layout/components/Navbar.vue

@@ -7,25 +7,27 @@
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
       </template>
       <div class="avatar-container">
-        <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
-          <div class="avatar-wrapper">
-            <img :src="userStore.avatar" class="user-avatar" />
-            <el-icon><caret-bottom /></el-icon>
-          </div>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <router-link to="/user/profile">
-                <el-dropdown-item>个人中心</el-dropdown-item>
-              </router-link>
-              <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
-                <span>布局设置</span>
-              </el-dropdown-item>
-              <el-dropdown-item divided command="logout">
-                <span>退出登录</span>
-              </el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
+        <dv-full-screen-container>
+          <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
+            <div class="avatar-wrapper">
+              <img :src="userStore.avatar" class="user-avatar" />
+              <el-icon><caret-bottom /></el-icon>
+            </div>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <!-- <router-link to="/user/profile">
+                  <el-dropdown-item>个人中心</el-dropdown-item>
+                </router-link>
+                <el-dropdown-item command="setLayout" v-if="settingsStore.showSettings">
+                  <span>布局设置</span>
+                </el-dropdown-item> -->
+                <el-dropdown-item divided command="logout">
+                  <span>退出登录</span>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </dv-full-screen-container>
       </div>
     </div>
   </div>
@@ -156,7 +158,7 @@ function toggleTheme() {
 
         svg {
           transition: transform 0.3s;
-          
+
           &:hover {
             transform: scale(1.15);
           }

src/layout/components/Sidebar/Logo.vue

@@ -13,14 +13,15 @@
     <div class="avatar-container">
       <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
-          <img :src="userStore.avatar" class="user-avatar" />
-          <el-icon><caret-bottom /></el-icon>
+          <!-- <img :src="userStore.avatar" class="user-avatar" /> -->
+          <span>{{ name }}</span>
+          <el-icon color="#fff"><caret-bottom /></el-icon>
         </div>
         <template #dropdown>
           <el-dropdown-menu>
-            <router-link to="/user/profile">
+            <!-- <router-link to="/user/profile">
               <el-dropdown-item>个人中心</el-dropdown-item>
-            </router-link>
+            </router-link> -->
             <el-dropdown-item divided command="logout">
               <span>退出登录</span>
             </el-dropdown-item>
@@ -45,6 +46,7 @@ defineProps({
 })
 
 const userStore = useUserStore()
+const name = userStore.name
 const title = import.meta.env.VITE_APP_TITLE;
 const settingsStore = useSettingsStore();
 const sideTheme = computed(() => settingsStore.sideTheme);
@@ -110,10 +112,13 @@ function logout() {
   align-items: center;
   position: relative;
 
+
   & .sidebar-logo-link {
     position: absolute;
     height: 100%;
-    width: 100%;
+    left: calc(50% - 280px);
+    width: 560px;
+
 
     & .sidebar-logo {
       display: inline-block;
@@ -170,11 +175,11 @@ function logout() {
   margin-right: 20px;
 
   .avatar-wrapper {
-    margin-top: 5px;
     position: relative;
     display: flex;
     align-items: center;
     cursor: pointer;
+    height: 46px;
 
     .user-avatar {
       cursor: pointer;
@@ -188,6 +193,10 @@ function logout() {
       font-size: 18px;
       margin-left: 6px;
     }
+
+    span {
+      color: #fff;
+    }
   }
 }
 </style>

src/layout/index.vue

@@ -1,5 +1,5 @@
 <template>
-    <dv-full-screen-container>
+    <dv-full-screen-container style="position: unset;">
         <div class="app">
             <div :class="classObj" class="app-wrapper">
                 <logo :collapse="isCollapse" class="fixed-header" />

src/permission.js

@@ -18,13 +18,13 @@ const isWhiteList = (path) => {
 }
 
 router.beforeEach((to, from, next) => {
-  NProgress.start()
+  // NProgress.start()
   if (getToken()) {
     to.meta.title && useSettingsStore().setTitle(to.meta.title)
     /* has token*/
     if (to.path === '/login') {
       next({ path: '/' })
-      NProgress.done()
+      // NProgress.done()
     } else if (isWhiteList(to.path)) {
       next()
     } else {
@@ -59,11 +59,11 @@ router.beforeEach((to, from, next) => {
       next()
     } else {
       next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
-      NProgress.done()
+      // NProgress.done()
     }
   }
 })
 
 router.afterEach(() => {
-  NProgress.done()
+  // NProgress.done()
 })

src/views/login.vue

@@ -1,43 +1,45 @@
 <template>
-  <div class="login">
-    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
-      <h3 class="title">{{ title }}</h3>
-      <el-form-item prop="username">
-        <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
-          <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="password">
-        <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码"
-          @keyup.enter="handleLogin">
-          <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
-        </el-input>
-      </el-form-item>
-      <el-form-item prop="code" v-if="captchaEnabled">
-        <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%"
-          @keyup.enter="handleLogin">
-          <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
-        </el-input>
-        <div class="login-code">
-          <img :src="codeUrl" @click="getCode" class="login-code-img" />
-        </div>
-      </el-form-item>
-      <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
-      <el-form-item style="width:100%;">
-        <el-button :loading="loading" size="large" type="primary" style="width:100%;" @click.prevent="handleLogin">
-          <span v-if="!loading">登 录</span>
-          <span v-else>登 录 中...</span>
-        </el-button>
-        <div style="float: right;" v-if="register">
-          <router-link class="link-type" :to="'/register'">立即注册</router-link>
-        </div>
-      </el-form-item>
-    </el-form>
-    <!--  底部  -->
-    <div class="el-login-footer">
-      <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
+  <dv-full-screen-container>
+    <div class="login">
+      <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+        <h3 class="title">{{ title }}</h3>
+        <el-form-item prop="username">
+          <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
+            <template #prefix><svg-icon icon-class="user" class="el-input__icon input-icon" /></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="password">
+          <el-input v-model="loginForm.password" type="password" size="large" auto-complete="off" placeholder="密码"
+            @keyup.enter="handleLogin">
+            <template #prefix><svg-icon icon-class="password" class="el-input__icon input-icon" /></template>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="code" v-if="captchaEnabled">
+          <el-input v-model="loginForm.code" size="large" auto-complete="off" placeholder="验证码" style="width: 63%"
+            @keyup.enter="handleLogin">
+            <template #prefix><svg-icon icon-class="validCode" class="el-input__icon input-icon" /></template>
+          </el-input>
+          <div class="login-code">
+            <img :src="codeUrl" @click="getCode" class="login-code-img" />
+          </div>
+        </el-form-item>
+        <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;">记住密码</el-checkbox>
+        <el-form-item style="width:100%;">
+          <el-button :loading="loading" size="large" type="primary" style="width:100%;" @click.prevent="handleLogin">
+            <span v-if="!loading">登 录</span>
+            <span v-else>登 录 中...</span>
+          </el-button>
+          <div style="float: right;" v-if="register">
+            <router-link class="link-type" :to="'/register'">立即注册</router-link>
+          </div>
+        </el-form-item>
+      </el-form>
+      <!--  底部  -->
+      <div class="el-login-footer">
+        <span>Copyright © 2018-2025 ruoyi.vip All Rights Reserved.</span>
+      </div>
     </div>
-  </div>
+  </dv-full-screen-container>
 </template>
 
 <script setup>

src/views/system/intruderalarm/index.vue

@@ -27,7 +27,7 @@
         <div class="right_spection">
             <div class="operation_spection">
                 <HeadlineTag type="right" value="24小时告警数量趋势"></HeadlineTag>
-                <div class="entry">
+                <div class="entry" style="margin-right: 15px;">
                     <div class="entry-box">
                         <div class="entry-box-item">
                             <div class="item-center-line"></div>
@@ -295,6 +295,7 @@ const chartWater = ref(null);
 let chartInstanceWater = null;
 const initWaterDrop = () => {
     var value = 0.45;
+    chartInstanceWater = null
     chartInstanceWater = echarts.init(chartWater.value);
     chartInstanceWater.setOption({
         series: [
@@ -567,6 +568,10 @@ onMounted(() => {
     initWaterDrop()
     initFacility()
 });
+onUnmounted(() => {
+    chartInstanceWater.clear()
+    chartInstanceWater = null
+})
 // 窗口自适应
 window.addEventListener('resize', () => {
     chartInstance?.resize();
@@ -695,7 +700,7 @@ window.addEventListener('resize', () => {
 }
 
 .entry {
-    width: 100%;
+    width: calc(100% - 15px);
     height: calc(100% - 45px);
     display: flex;
     position: relative;

src/views/system/passageway/index.vue

@@ -16,15 +16,9 @@
       </div>
     </div>
     <div class="right_spection">
-      <div class="flex_spection">
-        <HeadlineTag type="right" value="设备排名"></HeadlineTag>
-        <div class="box_arch">
-          <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
-        </div>
-      </div>
       <div class="operation_spection">
         <HeadlineTag type="right" value="监控设备"></HeadlineTag>
-        <div class="box_arch">
+        <div class="box_arch" style="margin-right: 15px;margin-top: 10px;height: calc(100% - 55px);">
           <dv-border-box-1>
             <div class="box_monitoring">
               <div class="flex_spection box_tion_zx">
@@ -64,10 +58,16 @@
           </dv-border-box-1>
         </div>
       </div>
-      <div class="flex_spection">
+      <!-- <div class="flex_spection">
         <HeadlineTag type="right" value="实时巡检"></HeadlineTag>
         <div class="box_arch">
-          <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
+          <dv-scroll-board :config="config" style="width:97%;height:calc(100% - 10px);margin-top: 10px;" />
+        </div>
+      </div> -->
+      <div class="flex_spection">
+        <HeadlineTag type="right" value="设备排名"></HeadlineTag>
+        <div class="box_arch">
+          <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
         </div>
       </div>
       <div class="flex_spection">

src/views/system/receptiondesk/conference.vue

@@ -43,7 +43,16 @@ const initAccess = () => {
             right: '2%'
         },
         tooltip: {
-            trigger: 'axis'
+            trigger: 'axis',
+            axisPointer: {
+                type: 'line',
+            },
+            textStyle: {
+                color: '#fafafa',
+            },
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            extraCssText: 'backdrop-filter: blur(6px);',
         },
         xAxis: {
             type: 'category',
@@ -51,7 +60,7 @@ const initAccess = () => {
                 lineStyle: {
                     color: '#C0C4CC',
                     width: 2
-                }
+                },
             },
             boundaryGap: false,
             data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
@@ -67,6 +76,11 @@ const initAccess = () => {
                     width: 2
                 }
             },
+            splitLine: {
+                lineStyle: {
+                    color: 'rgba(255,255,255,0.3)',
+                }
+            },
         },
         series: [{
             name: '最高气温',
@@ -101,6 +115,7 @@ const initAccess = () => {
                         color: '#0ED638'
                     },
                     label: {
+                        position: 'insideEndTop',
                         formatter: "{b}{c}°C",
                         color: '#0ED638'
                     }
@@ -112,6 +127,7 @@ const initAccess = () => {
                         color: '#FF6464'
                     },
                     label: {
+                        position: 'insideEndTop',
                         formatter: "{b}{c}°C",
                         color: '#FF6464'
                     }

src/views/system/receptiondesk/feedback.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="person_box">
-        <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
+        <dv-scroll-board :config="config"
+            style="width:calc(100% - 15px);height:calc(100% - 10px);margin-top: 10px;margin-left: 15px;" />
     </div>
 </template>
 

src/views/system/receptiondesk/formerly.vue

@@ -144,15 +144,15 @@ const initAccess = () => {
     // tooltip
     let tooltip = {
         trigger: 'axis',
-        textStyle: {
-            fontSize: 18
-        },
         axisPointer: {
-            type: 'cross',
-            label: {
-                backgroundColor: '#283b56'
-            }
+            type: 'line',
+        },
+        textStyle: {
+            color: '#fafafa',
         },
+        borderColor: 'transparent',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        extraCssText: 'backdrop-filter: blur(6px);',
         formatter: v => {
             let [a] = v
             return `
@@ -164,7 +164,7 @@ const initAccess = () => {
     }
     // grid
     let grid = {
-        top: '10%',
+        top: '15%',
         left: '10%',
         right: '3%',
         bottom: '10%'
@@ -236,7 +236,6 @@ const initAccess = () => {
             end: 50 // 100 - 1500 / 31, //默认为100
         },
     ]
-
     // series
     let series = [{
         name: '中高风险地区',
@@ -260,7 +259,7 @@ const initAccess = () => {
 
             },
             textStyle: {
-                fontSize: 16,
+                fontSize: 14,
                 color: '#fff'
             }
         },
@@ -280,6 +279,16 @@ const initAccess = () => {
     chartDom.on('mouseout', goMove);
     autoMove()
     function autoMove() {
+        if (!timeOut) {
+            if (Number(option.dataZoom[0].end) > 100) {
+                option.dataZoom[0].end = 50;
+                option.dataZoom[0].start = 0;
+            } else {
+                option.dataZoom[0].end = option.dataZoom[0].end + 1 * (100 / option.series[0].data.length);
+                option.dataZoom[0].start = option.dataZoom[0].start + 1 * (100 / option.series[0].data.length);
+            }
+            chartDom.setOption(option)
+        }
         timeOut = setInterval(() => {
             if (Number(option.dataZoom[0].end) > 100) {
                 option.dataZoom[0].end = 50;
@@ -298,7 +307,6 @@ const initAccess = () => {
     //鼠标松开继续滚动
     function goMove() {
         autoMove()
-
     }
 };
 // 生命周期

src/views/system/receptiondesk/gambit.vue

@@ -37,6 +37,15 @@ const initAccess = () => {
         },
         tooltip: {
             show: true,
+            axisPointer: {
+                type: 'line',
+            },
+            textStyle: {
+                color: '#fafafa',
+            },
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            extraCssText: 'backdrop-filter: blur(6px);',
         },
         series: [
             // 最外层圆

src/views/system/receptiondesk/index.vue

@@ -14,7 +14,7 @@
         </div>
       </div>
       <div class="flex_spection">
-        <HeadlineTag value="会议话题总数"></HeadlineTag>
+        <HeadlineTag value="会议话题列表"></HeadlineTag>
         <div class="box_arch">
           <feedback></feedback>
         </div>
@@ -22,7 +22,7 @@
     </div>
     <div class="right_tiondesk">
       <div class="flex_spection">
-        <HeadlineTag type="right" value="竞争对手"></HeadlineTag>
+        <HeadlineTag type="right" value="会议话题"></HeadlineTag>
         <div class="box_arch">
           <wordcloud></wordcloud>
         </div>

src/views/system/receptiondesk/satisfaction.vue

@@ -20,6 +20,15 @@ const initAccess = () => {
         tooltip: {
             trigger: 'item',
             formatter: '{a}<br/>{b}:{c}千万元',
+            axisPointer: {
+                type: 'line',
+            },
+            textStyle: {
+                color: '#fafafa',
+            },
+            borderColor: 'transparent',
+            backgroundColor: 'rgba(0, 0, 0, 0.5)',
+            extraCssText: 'backdrop-filter: blur(6px);',
         },
         title: {
             show: true,

src/views/system/receptiondesk/wordcloud.vue

@@ -147,9 +147,9 @@ const initAccess = () => {
             radius: '60%',
             indicator: indicator,
             axisName: {
-                color: '#b7e9fd',
-                fontSize: 24,
-                padding: -10
+                color: '#fff',
+                fontSize: 16,
+                padding: -25
             },
             nameGap: 45,
             splitNumber: 4,
@@ -236,7 +236,7 @@ const initAccess = () => {
             {
                 type: 'scatter',
                 coordinateSystem: 'polar',
-                symbolSize: 20,
+                symbolSize: 10,
                 data: setSpot()
             }
         ]

src/views/system/video/modules/sameDay.vue

@@ -29,6 +29,7 @@ const initCPUDrop = () => {
     // 检查 DOM 元素是否存在
     if (chartRefCPU.value) {
         var value = 0.45;
+        chartInstanceCPU = null
         chartInstanceCPU = echarts.init(chartRefCPU.value);
         chartInstanceCPU.setOption({
             series: [
@@ -68,7 +69,7 @@ const initCPUDrop = () => {
                         formatter: '50%', //显示文本,
                         textStyle: {
                             // 修改字体大小，例如改为 20px
-                            fontSize: '20px', 
+                            fontSize: '20px',
                             color: '#fff',
                         },
                     },
@@ -88,6 +89,7 @@ const initRAMDrop = () => {
     // 检查 DOM 元素是否存在
     if (chartRefRAM.value) {
         var value = 0.65;
+        chartInstanceRAM = null
         chartInstanceRAM = echarts.init(chartRefRAM.value);
         chartInstanceRAM.setOption({
             series: [
@@ -109,17 +111,17 @@ const initRAMDrop = () => {
                                 {
                                     offset: 0,
                                     // 例如改成红色系
-                                    color: '#ff4444', 
+                                    color: '#ff4444',
                                 },
                                 {
                                     offset: 1,
                                     // 例如改成橙色系
-                                    color: '#ff8800', 
+                                    color: '#ff8800',
                                 },
                             ],
                             globalCoord: false,
                         },
-                    ], 
+                    ],
                     backgroundStyle: {
                         borderWidth: 1, //外边框
                         color: 'RGBA(51, 66, 127, 0.7)',
@@ -128,10 +130,10 @@ const initRAMDrop = () => {
                         //标签设置
                         position: ['50%', '45%'],
                         // 修改 formatter 为函数，动态显示百分比
-                        formatter: () => `${Math.round(value * 100)}%`, 
+                        formatter: () => `${Math.round(value * 100)}%`,
                         textStyle: {
                             // 修改字体大小，例如改为 20px
-                            fontSize: '20px', 
+                            fontSize: '20px',
                             color: '#fff',
                         },
                     },
@@ -154,6 +156,12 @@ onMounted(() => {
         initRAMDrop()
     })
 });
+onUnmounted(() => {
+    chartInstanceCPU.clear()
+    chartInstanceRAM.clear()
+    chartInstanceCPU = null
+    chartInstanceRAM = null
+})
 // 窗口自适应
 window.addEventListener('resize', () => {
     chartInstanceRAM?.resize();
@@ -162,24 +170,10 @@ window.addEventListener('resize', () => {
 </script>
 
 <style lang="scss" scoped>
-// 样式部分保持不变
-.tuan_1 {
-    background: url("@/assets/images/video_he.png");
-    animation: scanning 5s linear infinite;
-}
-._left_1{
-    color: #01baff;
-}
-.tuan_2 {
-    background: url("@/assets/images/video_he_.png");	
-    animation: scanning 6s linear infinite;
-}
-._left_2{
-    color: #de4034 !important;	
-}
 ._runnin {
     display: flex;
     flex-direction: column;
+
     &_mains {
         flex: 1;
         margin: 30px;
@@ -187,6 +181,7 @@ window.addEventListener('resize', () => {
         align-items: center;
         justify-content: space-around;
         gap: 30px;
+
         &_item {
             display: flex;
             align-items: center;

src/views/system/visitor/index.vue

@@ -89,7 +89,7 @@
           </div>
         </div>
       </div>
-      <div class="flex_spection">
+      <div style="height: 300px;">
         <HeadlineTag type="right" value="访客统计"></HeadlineTag>
         <div class="box_arch">
           <starView></starView>

src/views/system/visitor/starView.vue

@@ -112,7 +112,7 @@
     width: 90px;
     height: 90px;
     border-radius: 50%;
-    top: calc(50% - 60px);
+    // top: calc(50% - 25px);
     border: 1px solid rgb(156, 192, 218);
     background: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(30, 144, 255, 0.7));
     border-radius: 50%;