src/assets/styles/index.scss

@@ -21,9 +21,11 @@ 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;
 }
@@ -153,13 +155,11 @@ aside {
 	text-align: right;
 	padding-right: 20px;
 	transition: 600ms ease position;
-	background: linear-gradient(
+	background: linear-gradient(90deg,
-		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,10 +204,85 @@ 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
+	background: url(../images/no-data-bg.png) 50% 100% / contain no-repeat;
-		no-repeat;
 	position: relative;
 
 	&::after {

src/components/Breadcrumb/index.vue

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

src/layout/components/Navbar.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container"
+      @toggleClick="toggleSideBar" />
 
     <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
     <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
@@ -8,41 +9,6 @@
     <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>
 
@@ -55,7 +21,6 @@ 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 {
@@ -117,7 +82,7 @@ export default {
   box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
 
   .hamburger-container {
-    line-height: 52px;
+    line-height: 44px;
     height: 100%;
     float: left;
     cursor: pointer;
@@ -185,6 +150,7 @@ export default {
           height: 35px;
           border-radius: 50%;
         }
+
         .user-nickname {
           margin-left: 5px;
           font-size: 14px;

src/layout/index.vue

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

src/styles/index.scss

@@ -1,5 +1,7 @@
 $editorTabsborderColor: #121315;
-body, html{
+
+body,
+html {
   margin: 0;
   padding: 0;
   background: #F2F4F9;
@@ -9,19 +11,23 @@ body, html{
   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
 }
 
-input, textarea{
+input,
+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;
@@ -31,17 +37,21 @@ input, 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;
@@ -54,28 +64,34 @@ input, 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;
@@ -91,18 +107,22 @@ input, 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;
@@ -114,15 +134,19 @@ input, 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;
   }
@@ -136,76 +160,7 @@ input, 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,7 +12,8 @@
               <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}}</p>
+                {{ item.name }}
+              </p>
             </div>
           </div>
         </div>
@@ -37,7 +38,7 @@ import LineChart from './../../components/lineChart'
 import SearchArea from './../../components/searchArea'
 import moment from 'moment'
 export default {
-  name: 'Voc',
+  name: 'VocManagement',
   data() {
     return {
       realtimeList: [],
@@ -85,34 +86,41 @@ 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;
@@ -120,26 +128,33 @@ export default {
             color: #3E6AF7;
             text-align: right;
           }
+
           .itemDescribe {
             font-size: 16px;
             text-align: right;
-            white-space: nowrap; /* 防止换行 */
+            white-space: nowrap;
-            overflow: hidden; /* 隐藏超出部分 */
+            /* 防止换行 */
-            text-overflow: ellipsis; /* 添加省略号 */
+            overflow: hidden;
+            /* 隐藏超出部分 */
+            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;
@@ -147,6 +162,7 @@ export default {
     color: #000000;
     margin: 0 10px 20px 0;
   }
+
   .blueTitle {
     content: '';
     display: inline-block;