Merge pull request 'projects/mesxc-zjl' (#291) from projects/mesxc-zjl into projects/mesxc-test

Reviewed-on: #291

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

@@ -1,8 +1,9 @@
 <template>
   <el-breadcrumb class="app-breadcrumb" separator="/">
     <transition-group name="breadcrumb">
-      <el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
+      <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>
@@ -35,7 +36,7 @@ export default {
       const first = matched[0]
 
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/', meta: { title: '首页' }}].concat(matched)
+        matched = [{ path: '/', meta: { title: '首页' } }].concat(matched)
       }
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
@@ -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,48 +1,14 @@
 <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"/>
+    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />
-    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav"/>
+    <top-nav id="topmenu-container" class="topmenu-container" v-if="topNav" />
 
     <div style="padding-top: 5px; padding-right: 38px;">
-      <navbar-right :blackTitle='true'/>
+      <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 {
@@ -102,7 +67,7 @@ export default {
         this.$store.dispatch('LogOut').then(() => {
           location.href = getPath('/');
         })
-      }).catch(() => {});
+      }).catch(() => { });
     }
   }
 }
@@ -114,15 +79,15 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
 
   .hamburger-container {
-    line-height: 52px;
+    line-height: 44px;
     height: 100%;
     float: left;
     cursor: pointer;
     transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
+    -webkit-tap-highlight-color: transparent;
 
     &:hover {
       background: rgba(0, 0, 0, .025)
@@ -185,7 +150,8 @@ export default {
           height: 35px;
           border-radius: 50%;
         }
-        .user-nickname{
+
+        .user-nickname {
           margin-left: 5px;
           font-size: 14px;
         }

src/layout/index.vue

@@ -1,24 +1,22 @@
 <template>
-  <div :class="classObj" class="app-wrapper" :style="{'--current-color': theme}">
+  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
-    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
+    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
     <sidebar v-if="!sidebar.hide" class="sidebar-container" />
-    <div :class="{hasTagsView:needTagsView,sidebarHide:sidebar.hide}" class="main-container">
+    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
+      <div :class="{ 'fixed-header': fixedHeader }">
         <navbar />
         <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,47 +1,57 @@
 $editorTabsborderColor: #121315;
-body, html{
+
+body,
+html {
   margin: 0;
   padding: 0;
   background: #F2F4F9;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
 }
 
-input, textarea{
+input,
-  font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;
+textarea {
+  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
 }
 
-.editor-tabs{
+.editor-tabs {
   background: $editorTabsborderColor;
-  .el-tabs__header{
+
+  .el-tabs__header {
     margin: 0;
     border-bottom-color: $editorTabsborderColor;
-    .el-tabs__nav{
+
+    .el-tabs__nav {
       border-color: $editorTabsborderColor;
     }
   }
-  .el-tabs__item{
+
+  .el-tabs__item {
     height: 32px;
     line-height: 32px;
     color: #888a8e;
-    border-left: 1px solid $editorTabsborderColor!important;
+    border-left: 1px solid $editorTabsborderColor !important;
     background: #363636;
     margin-right: 5px;
     user-select: none;
   }
-  .el-tabs__item.is-active{
+
+  .el-tabs__item.is-active {
     background: #1e1e1e;
-    border-bottom-color: #1e1e1e!important;
+    border-bottom-color: #1e1e1e !important;
     color: #fff;
   }
-  .el-icon-edit{
+
+  .el-icon-edit {
     color: #f1fa8c;
   }
-  .el-icon-document{
+
+  .el-icon-document {
     color: #a95812;
   }
+
   :focus.is-active.is-focus:not(:active) {
     box-shadow: none;
     border-radius: 0;
@@ -54,29 +64,35 @@ 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{
+.center-tabs {
-    margin-bottom: 0!important;
+  .el-tabs__header {
+    margin-bottom: 0 !important;
   }
-  .el-tabs__item{
+
+  .el-tabs__item {
     width: 50%;
     text-align: center;
   }
-  .el-tabs__nav{
+
+  .el-tabs__nav {
     width: 100%;
   }
 }
-.reg-item{
+
+.reg-item {
   padding: 12px 6px;
   background: #f8f8f8;
   position: relative;
   border-radius: 4px;
-  .close-btn{
+
+  .close-btn {
     position: absolute;
     right: -6px;
     top: -6px;
@@ -91,18 +107,22 @@ input, textarea{
     z-index: 1;
     cursor: pointer;
     font-size: 12px;
-    &:hover{
+
+    &:hover {
       background: rgba(210, 23, 23, 0.5)
     }
   }
-  & + .reg-item{
+
+  &+.reg-item {
     margin-top: 18px;
   }
 }
-.action-bar{
+
+.action-bar {
   & .el-button+.el-button {
     margin-left: 15px;
   }
+
   & i {
     font-size: 20px;
     vertical-align: middle;
@@ -111,101 +131,36 @@ input, textarea{
   }
 }
 
-.custom-tree-node{
+.custom-tree-node {
   width: 100%;
   font-size: 14px;
-  .node-operation{
+
+  .node-operation {
     float: right;
   }
-  i[class*="el-icon"] + i[class*="el-icon"]{
+
+  i[class*="el-icon"]+i[class*="el-icon"] {
     margin-left: 6px;
   }
-  .el-icon-plus{
+
+  .el-icon-plus {
     color: #409EFF;
   }
-  .el-icon-delete{
+
+  .el-icon-delete {
     color: #157a0c;
   }
 }
 
-.el-scrollbar__view{
+.el-scrollbar__view {
-//   overflow-x: hidden;
+  //   overflow-x: hidden;
 }
 
-.el-rate{
+.el-rate {
   display: inline-block;
   vertical-align: text-top;
 }
-.el-upload__tip{
+
+.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

@@ -9,10 +9,11 @@
         <div class="itemBox">
           <div class="itemClass" v-for="(item, index) in realtimeList" :key='index'>
             <div class="itemSub">
-              <p class="itemNum">{{item.checkValue ? (item.checkValue).toFixed(2) : '-'}}</p>
+              <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>
@@ -24,8 +25,8 @@
         <span>检测指标趋势图</span>
       </div>
       <!-- 搜索工作栏 -->
-      <search-area @submit="getTrend"/>
+      <search-area @submit="getTrend" />
-      <line-chart :chartData="chartData" v-show='Object.keys(chartData).length !== 0' :timeDim="queryParams.timeDim"/>
+      <line-chart :chartData="chartData" v-show='Object.keys(chartData).length !== 0' :timeDim="queryParams.timeDim" />
       <!-- 没有数据 -->
       <div class="no-data-bg" v-show='Object.keys(chartData).length === 0'></div>
     </div>
@@ -37,11 +38,11 @@ import LineChart from './../../components/lineChart'
 import SearchArea from './../../components/searchArea'
 import moment from 'moment'
 export default {
-  name: 'Voc',
+  name: 'VocManagement',
-  data(){
+  data() {
     return {
-      realtimeList:[],
+      realtimeList: [],
-      queryParams:{
+      queryParams: {
         checkType: 3,
         timeDim: null,
         timeRange: []
@@ -53,18 +54,18 @@ export default {
   mounted() {
     this.getMsg()
     this.queryParams.timeDim = this.getDictDatas(this.DICT_TYPE.TIME_DIM)[0].value // 默认时
-    this.queryParams.timeRange = [moment().startOf('day')+0, moment().endOf('day')-59*61*1000]
+    this.queryParams.timeRange = [moment().startOf('day') + 0, moment().endOf('day') - 59 * 61 * 1000]
     this.getTrend()
   },
   methods: {
     getMsg() {
-      environmentalCheckRealtime({checkType: 3}).then(res => {
+      environmentalCheckRealtime({ checkType: 3 }).then(res => {
         console.log(res)
         this.realtimeList = res.data || []
       })
     },
     getTrend() {
-      environmentalCheckRealtimeTrend({...this.queryParams}).then(res => {
+      environmentalCheckRealtimeTrend({ ...this.queryParams }).then(res => {
         if (res.code === 0) {
           this.chartData = res.data
         } else {
@@ -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{
+
+          P {
             margin: 0;
+
             img {
               width: 24px;
               height: 24px;
               vertical-align: middle;
             }
           }
+
           .itemNum {
             font-size: 32px;
             font-weight: 600;
@@ -120,33 +128,41 @@ 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{
+
+    .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;
     font-weight: 400;
     color: #000000;
-    margin:0 10px 20px 0;
+    margin: 0 10px 20px 0;
   }
+
   .blueTitle {
     content: '';
     display: inline-block;