src/assets/styles/index.scss

@@ -21,11 +21,9 @@ body {
 .searchBarBox .el-form-item--medium .el-form-item__label {
   line-height: 40px;
 }
-
 .searchBarBox .el-form-item--medium .el-form-item__content {
   line-height: 40px;
 }
-
 .searchBarBox .el-range-editor--small.el-input__inner {
   height: 34px;
 }
@@ -155,11 +153,13 @@ aside {
 	text-align: right;
 	padding-right: 20px;
 	transition: 600ms ease position;
-	background: linear-gradient(90deg,
+	background: linear-gradient(
+		90deg,
 		rgba(32, 182, 249, 1) 0%,
 		rgba(32, 182, 249, 1) 0%,
 		rgba(33, 120, 241, 1) 100%,
-			rgba(33, 120, 241, 1) 100%);
+		rgba(33, 120, 241, 1) 100%
+	);
 
 	.subtitle {
 		font-size: 20px;
@@ -204,85 +204,10 @@ aside {
 	z-index: 1000 !important;
 }
 
-// 滚动条
-::-webkit-scrollbar {
-	width: 8px;
-	height: 8px;
-	background-color: transparent;
-}
-
-::-webkit-scrollbar-track-piece {
-	background-color: rgba(144, 147, 153, 0);
-}
-
-::-webkit-scrollbar-corner {
-	background-color: rgba(144, 147, 153, 0);
-}
-
-::-webkit-scrollbar-track {
-	width: 6px;
-	background: rgba(144, 147, 153, 0);
-	-webkit-border-radius: 2em;
-	-moz-border-radius: 2em;
-	border-radius: 2em;
-}
-
-::-webkit-scrollbar-thumb {
-	background-color: #EDEDED;
-	background-clip: padding-box;
-	min-height: 28px;
-	-webkit-border-radius: 2em;
-	-moz-border-radius: 2em;
-	border-radius: 2em;
-	transition: background-color .3s;
-	cursor: pointer;
-}
-
-::-webkit-scrollbar-thumb:hover {
-	background-color: #D9D9D9;
-}
-
-// 抽屉head区域---start
-.el-drawer__header {
-	padding-bottom: 20px;
-	padding-left: 30px;
-	margin-bottom: 23px;
-	font-size: 20px;
-	font-weight: 500;
-	color: rgba(0, 0, 0, 0.85);
-	border-bottom: 1px solid rgba(233, 233, 233, 1);
-}
-
-.el-drawer__header> :first-child::before {
-	content: '';
-	display: inline-block;
-	width: 4px;
-	height: 24px;
-	background-color: #0b58ff;
-	margin-right: 8px;
-	vertical-align: middle;
-}
-
-// 抽屉head区域---end
-// 弹出框，上下分布，去掉label的padding-bottom
-.el-form--label-top .el-form-item__label {
-	padding: 0;
-}
-
-// 大屏滚动表格
-.dv-scroll-board .rows .ceil,
-.dv-scroll-board .header .header-item {
-	border-right: 1px solid rgba(13, 23, 40, 1);
-}
-
-.dv-scroll-board .rows .ceil:last-child,
-.dv-scroll-board .header .header-item:last-child {
-	border-right: none;
-}
-
 .no-data-bg {
 	height: 240px;
-	background: url(../images/no-data-bg.png) 50% 100% / contain no-repeat;
+	background: url(../images/no-data-bg.png) 50% 100% / contain
+		no-repeat;
 	position: relative;
 
 	&::after {

src/components/Breadcrumb/index.vue

@@ -2,8 +2,7 @@
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
       <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
-        <span v-if="item.redirect === 'noRedirect' || index === levelList.length - 1" class="no-redirect">{{ item.meta.title
+        <span v-if="item.redirect==='noRedirect'||index===levelList.length-1" class="no-redirect">{{ item.meta.title }}</span>
-          }}</span>
         <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a>
       </el-breadcrumb-item>
     </transition-group>
@@ -65,7 +64,7 @@ export default {
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
   font-size: 14px;
-  line-height: 48px;
+  line-height: 56px;
   margin-left: 8px;
 
   .no-redirect {
@@ -74,8 +73,7 @@ export default {
   }
 }
 
-.app-breadcrumb .el-breadcrumb__inner a,
+.app-breadcrumb .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link {
-.el-breadcrumb__inner.is-link {
   color: rgba(0, 0, 0, 0.45);
 }
 </style>

src/layout/components/Navbar.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
-      @toggleClick="toggleSideBar" />
 
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav"/>
     <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
@@ -9,6 +8,41 @@
     <div style="padding-top: 5px; padding-right: 38px;">
       <navbar-right :blackTitle='true'/>
     </div>
+
+    <!-- <div class="right-menu"> -->
+      <!-- <template v-if="device!=='mobile'"> -->
+        <!-- <search id="header-search" class="right-menu-item" /> -->
+
+        <!-- 站内信 -->
+        <!-- <notify-message class="right-menu-item hover-effect" /> -->
+
+        <!-- <screenfull id="screenfull" class="right-menu-item hover-effect" /> -->
+
+        <!-- <el-tooltip content="布局大小" effect="dark" placement="bottom">
+          <size-select id="size-select" class="right-menu-item hover-effect" />
+        </el-tooltip> -->
+
+      <!-- </template> -->
+
+      <!-- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+        <div class="avatar-wrapper"> -->
+          <!-- <img :src="avatar" class="user-avatar"> -->
+          <!-- <span v-if="nickname" class="user-nickname">{{ nickname }}</span>
+          <i class="el-icon-caret-bottom" />
+        </div>
+        <el-dropdown-menu slot="dropdown">
+          <router-link to="/user/profile">
+            <el-dropdown-item>个人中心</el-dropdown-item>
+          </router-link> -->
+          <!-- <el-dropdown-item @click.native="setting = true">
+            <span>布局设置</span>
+          </el-dropdown-item> -->
+          <!-- <el-dropdown-item divided @click.native="logout">
+            <span>退出登录</span>
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown> -->
+    <!-- </div> -->
   </div>
 </template>
 
@@ -21,6 +55,7 @@ import Screenfull from '@/components/Screenfull'
 import SizeSelect from '@/components/SizeSelect'
 import Search from '@/components/HeaderSearch'
 import NotifyMessage from '@/layout/components/Message'
+// import {getPath} from "@/utils/ruoyi";
 import NavbarRight from './NavbarRight.vue'
 
 export default {
@@ -82,7 +117,7 @@ export default {
   box-shadow: 0 1px 4px rgba(0,21,41,.08);
 
   .hamburger-container {
-    line-height: 44px;
+    line-height: 52px;
     height: 100%;
     float: left;
     cursor: pointer;
@@ -150,7 +185,6 @@ export default {
           height: 35px;
           border-radius: 50%;
         }
-
         .user-nickname{
           margin-left: 5px;
           font-size: 14px;

src/layout/index.vue

@@ -8,15 +8,17 @@
         <tags-view v-if="needTagsView" />
       </div>
       <app-main />
-      <div class="main-footer"
+      <div class="main-footer" style="color: #C7C7C7; user-select: none; font-size: 14px; letter-spacing: 1px; height: 30px; display: grid; place-content: center;">&copy; 中建材智能自动化研究院有限公司</div>
-        style="color: #C7C7C7; user-select: none; font-size: 14px; letter-spacing: 1px; height: 30px; display: grid; place-content: center;">
+      <right-panel>
-        &copy; 中建材智能自动化研究院有限公司</div>
+        <settings />
+      </right-panel>
     </div>
   </div>
 </template>
 
 <script>
-import { AppMain, Navbar, Sidebar, TagsView } from './components'
+import RightPanel from '@/components/RightPanel'
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 import variables from '@/assets/styles/variables.scss'
@@ -26,6 +28,8 @@ export default {
   components: {
     AppMain,
     Navbar,
+    RightPanel,
+    Settings,
     Sidebar,
     TagsView
   },

src/styles/index.scss

@@ -1,7 +1,5 @@
 $editorTabsborderColor: #121315;
-
+body, html{
-body,
-html {
   margin: 0;
   padding: 0;
   background: #F2F4F9;
@@ -11,23 +9,19 @@ html {
   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
 }
 
-input,
+input, textarea{
-textarea {
   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
 }
 
 .editor-tabs{
   background: $editorTabsborderColor;
-
   .el-tabs__header{
     margin: 0;
     border-bottom-color: $editorTabsborderColor;
-
     .el-tabs__nav{
       border-color: $editorTabsborderColor;
     }
   }
-
   .el-tabs__item{
     height: 32px;
     line-height: 32px;
@@ -37,21 +31,17 @@ textarea {
     margin-right: 5px;
     user-select: none;
   }
-
   .el-tabs__item.is-active{
     background: #1e1e1e;
     border-bottom-color: #1e1e1e!important;
     color: #fff;
   }
-
   .el-icon-edit{
     color: #f1fa8c;
   }
-
   .el-icon-document{
     color: #a95812;
   }
-
   :focus.is-active.is-focus:not(:active) {
     box-shadow: none;
     border-radius: 0;
@@ -64,34 +54,28 @@ textarea {
     padding: 12px 18px 15px 15px;
   }
 }
-
 .el-scrollbar__wrap {
   box-sizing: border-box;
   overflow-x: hidden !important;
   margin-bottom: 0 !important;
 }
-
 .center-tabs{
   .el-tabs__header{
     margin-bottom: 0!important;
   }
-
   .el-tabs__item{
     width: 50%;
     text-align: center;
   }
-
   .el-tabs__nav{
     width: 100%;
   }
 }
-
 .reg-item{
   padding: 12px 6px;
   background: #f8f8f8;
   position: relative;
   border-radius: 4px;
-
   .close-btn{
     position: absolute;
     right: -6px;
@@ -107,22 +91,18 @@ textarea {
     z-index: 1;
     cursor: pointer;
     font-size: 12px;
-
     &:hover{
       background: rgba(210, 23, 23, 0.5)
     }
   }
-
   & + .reg-item{
     margin-top: 18px;
   }
 }
-
 .action-bar{
   & .el-button+.el-button {
     margin-left: 15px;
   }
-
   & i {
     font-size: 20px;
     vertical-align: middle;
@@ -134,19 +114,15 @@ textarea {
 .custom-tree-node{
   width: 100%;
   font-size: 14px;
-
   .node-operation{
     float: right;
   }
-
   i[class*="el-icon"] + i[class*="el-icon"]{
     margin-left: 6px;
   }
-
   .el-icon-plus{
     color: #409EFF;
   }
-
   .el-icon-delete{
     color: #157a0c;
   }
@@ -160,7 +136,76 @@ textarea {
   display: inline-block;
   vertical-align: text-top;
 }
-
 .el-upload__tip{
   line-height: 1.2;
 }
+// 滚动条
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-track-piece {
+  background-color:rgba(144,147,153,0);
+}
+
+::-webkit-scrollbar-corner {
+  background-color:rgba(144,147,153,0);
+}
+
+::-webkit-scrollbar-track {
+  width: 6px;
+  background: rgba(144,147,153,0);
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #EDEDED;
+  background-clip: padding-box;
+  min-height: 28px;
+  -webkit-border-radius: 2em;
+  -moz-border-radius: 2em;
+  border-radius: 2em;
+  transition: background-color .3s;
+  cursor: pointer;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #D9D9D9;
+}
+
+// 抽屉head区域---start
+.el-drawer__header {
+  padding-bottom: 20px;
+  padding-left: 30px;
+  margin-bottom: 23px;
+  font-size: 20px;
+  font-weight: 500;
+  color: rgba(0,0,0,0.85);
+  border-bottom: 1px solid rgba(233, 233, 233, 1);
+}
+.el-drawer__header > :first-child::before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 24px;
+  background-color: #0b58ff;
+  margin-right: 8px;
+  vertical-align: middle;
+}
+// 抽屉head区域---end
+// 弹出框，上下分布，去掉label的padding-bottom
+.el-form--label-top .el-form-item__label {
+  padding: 0;
+}
+
+// 大屏滚动表格
+.dv-scroll-board .rows .ceil, .dv-scroll-board .header .header-item {
+  border-right: 1px solid rgba(13, 23, 40, 1);
+}
+.dv-scroll-board .rows .ceil:last-child, .dv-scroll-board .header .header-item:last-child {
+  border-right: none;
+}

src/views/safetyEnvironmental/environmental/voc/vocManagement/index.vue

@@ -12,8 +12,7 @@
               <p class="itemNum">{{item.checkValue ? (item.checkValue).toFixed(2) : '-'}}</p>
               <p class="itemDescribe" :title="item.name">
                 <img src="./../../../../../assets/images/detectionData.png" alt="">
-                {{ item.name }}
+              {{item.name}}</p>
-              </p>
             </div>
           </div>
         </div>
@@ -38,7 +37,7 @@ import LineChart from './../../components/lineChart'
 import SearchArea from './../../components/searchArea'
 import moment from 'moment'
 export default {
-  name: 'VocManagement',
+  name: 'Voc',
   data(){
     return {
       realtimeList:[],
@@ -86,41 +85,34 @@ export default {
 <style lang='scss' scoped>
 .voc {
   background-color: #f2f4f9;
-
   .box1 {
     height: 172px;
     padding: 12px 16px 0;
     margin-bottom: 8px;
     background-color: #fff;
     border-radius: 9px;
-
     .itemBox {
       display: flex;
       flex-flow: row nowrap;
       overflow: auto;
-
       .itemClass {
         width: 198px;
         height: 88px;
         // border: 1px solid green;
         padding: 12px 0px 12px 18px;
-
         .itemSub {
           width: 176px;
           height: 65px;
           padding-right: 26px;
           border-right: 1px solid #E8E8E8;
-
           P{
             margin: 0;
-
             img {
               width: 24px;
               height: 24px;
               vertical-align: middle;
             }
           }
-
           .itemNum {
             font-size: 32px;
             font-weight: 600;
@@ -128,33 +120,26 @@ export default {
             color: #3E6AF7;
             text-align: right;
           }
-
           .itemDescribe {
             font-size: 16px;
             text-align: right;
-            white-space: nowrap;
+            white-space: nowrap; /* 防止换行 */
-            /* 防止换行 */
+            overflow: hidden; /* 隐藏超出部分 */
-            overflow: hidden;
+            text-overflow: ellipsis; /* 添加省略号 */
-            /* 隐藏超出部分 */
-            text-overflow: ellipsis;
-            /* 添加省略号 */
           }
         }
       }
     }
-
     .itemClass:last-child > .itemSub{
       border: none !important;
     }
   }
-
   .box2 {
     background-color: #fff;
     border-radius: 9px;
     padding: 16px;
     height: calc(100vh - 308px);
   }
-
   .boxTitle {
     display: inline-block;
     font-size: 16px;
@@ -162,7 +147,6 @@ export default {
     color: #000000;
     margin:0 10px 20px 0;
   }
-
   .blueTitle {
     content: '';
     display: inline-block;