Merge pull request '邓洁: 优化界面' (#237) from dengjie into dev

Reviewed-on: http://git.feashow.cn/clay/tunnel-cloud-web/pulls/237

src/components/content/airInfo/AirInfo.vue

@@ -403,10 +403,13 @@ const initAirChart = (type, values) => {
   //position: absolute;
   z-index: 100;
   width: 824px;
+  border: 2px solid #0f82af;
+  background: rgba(6, 34, 71, 0.78);
+  border-radius: 20px;
   //height: 400px;
   //top: 1003px;
   //right: 72px;
-  background-image: url(@/assets/images/airInfo/bg.png);
+  //background-image: url(@/assets/images/airInfo/bg.png);
   //padding: 25px 20px 1px 21px;
 
   .fan-speed {

src/components/content/fanInfo/FanInfo.vue

@@ -15,10 +15,10 @@
           <!-- 功能 -->
           <div class="option-nav">
             <div>
-              <div class="state " :class="{ 'blue-state': !item.breakdown }">
+              <div class="state">
-                <div :class="{ stopColor: item.breakdown }">
+                <div class="blue-state" :class="{ stopColor: item.breakdown }">
                   <div :style="{ backgroundImage: 'url(' +getImageUrl(item.breakdown)+')' }" class="state-icon"></div>
-                  状态：{{ item.breakdown ? '故障' : '运行' }}
+                  状态：<span class="fan-state">{{ item.breakdown ? '故障' : '运行' }}</span>
                 </div>
                 <div class="switch">
                   <div
@@ -39,7 +39,7 @@
               </div>
               <div class="power">
                 <div class="check-box">
-                  <el-radio-group v-model="item.autoMode" class="radio-group">
+                  <el-radio-group v-model="item.autoMode">
                     <el-radio :label="true">自动</el-radio>
                     <el-radio :label="false">手动</el-radio>
                   </el-radio-group>
@@ -75,7 +75,8 @@
     </div>
 
     <div class="digital-tunnel">
-      <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="changeNum(fanIndex)+'号风机电流监控数据'" width="2175px"
+      <el-dialog :close-on-click-modal="false" v-model="isVisited" :title="changeNum(fanIndex)+'号风机电流监控数据'"
+                 width="2175px"
                  :modal="false">
         <div class="left-top-icon"></div>
         <div class="right-top-icon"></div>
@@ -313,7 +314,7 @@ const handleOnMounted = () => {
               }
             },
           },
-          max: 1000,
+          max: 50,
           splitLine: {
             show: false,
           },
@@ -530,10 +531,17 @@ input::-webkit-inner-spin-button {
 input[type="number"] {
   -moz-appearance: textfield;
 }
+:deep(.el-radio-group){
+ .el-radio{
+   display: flex;
+   align-items: center;
+ }
+
+}
 
 :deep( .el-radio__input) {
-  width: 24px;
+  width: 28px;
-  height: 24px;
+  height: 28px;
   border: 2px solid #38cafb;
   border-radius: 50%;
   display: flex;
@@ -544,7 +552,7 @@ input[type="number"] {
 :deep( .el-radio__label) {
   font-size: 28px;
   color: #38cafb;
-  line-height: 37px;
+  margin-top: -5px;
 }
 
 #fan_info {
@@ -631,55 +639,49 @@ input[type="number"] {
               display: flex;
               flex-direction: column;
               justify-content: center;
-              font-size: 26px;
+              font-size: 28px;
               color: #38cafb;
               line-height: 35px;
               gap: 40px;
 
+              .stopColor {
+                background-color: red !important;
+              }
+
               .blue-state {
-                > div:first-child:hover {
-                  color: #fff;
-                  background-color: #127399;
-                  width: 180px;
-                  padding-left: 5px;
-                  border-radius: 8px;
-
-                  > div:first-child {
-                    background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
-                  }
-                }
-              }
-
-              > div:first-child {
                 display: flex;
                 align-items: center;
-                padding-left: 5px;
+                height: 45px;
-
+                margin-right: 15px;
-                > div {
+                color: #fff;
-                  margin-right: 10px;
+                background-color: #127399;
-                }
+                padding-left: 10px;
-              }
+                border-radius: 8px;
-
+                margin-left: -5px;
-              img {
-                margin-right: 4px;
-                transform: translateY(15%);
-              }
 
                 .state-icon {
-                width: 26px;
+                  width: 28px;
-                height: 26px;
+                  height: 28px;
+                  background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
+                  margin-right: 10px;
                 }
 
+                .fan-state {
+                  color: #FFFFFF;
+                }
+              }
+
+
               .switch {
                 display: flex;
-                width: 160px;
+                width: 165px;
-                height: 40px;
+                height: 45px;
                 border-radius: 22px;
                 border: 2px solid #0f82af;
                 overflow: hidden;
                 font-weight: bold;
                 color: #127399;
-                line-height: 35px;
+                line-height: 40px;
 
                 & > div {
                   flex: 1;
@@ -700,6 +702,13 @@ input[type="number"] {
               line-height: 37px;
               gap: 33px;
 
+              .check-box {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                //margin-left: 20px;
+              }
+
               .edit-power {
                 margin-top: 10px;
 
@@ -793,6 +802,7 @@ input[type="number"] {
         font-size: 28px;
         color: #FFFFFF;
         cursor: pointer;
+
         &:hover {
           background-color: #2E5589;
           border-radius: 6px;
@@ -808,18 +818,15 @@ input[type="number"] {
   background: #0f7da9;
 }
 
-.stopColor {
-  color: red;
-}
 
-.stopColor:hover {
+//.stopColor:hover {
-  color: #fff;
+//  color: #fff;
-  width: 180px;
+//  width: 180px;
-  background: #9B2222;
+//  background: #9B2222;
-  border-radius: 8px;
+//  border-radius: 8px;
-
+//
-  > div:first-child {
+//  > div:first-child {
-    background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
+//    background-image: url('../../../assets/images/fanInfo/white-state-icon.png') !important;
-  }
+//  }
-}
+//}
 </style>

src/components/content/tunnelScene/sceneClass/previewTunnelInit/index.js

@@ -10,7 +10,7 @@ export default function previewtunnelModeInit(equipmentList) {
     //         this.scene.getObjectByName(wall).visible = false
     //     }
     // }
-    console.log(equipmentList);
+    // console.log(equipmentList);
 
     equipmentList.forEach((item) => {
         this.addEquipment(this.scene.getObjectByName(item.position), item);

src/components/content/usedEle/UsedEle.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="used-ele" :style="{ backgroundImage: 'url(' +getImageUrl(bgImage)+')' }" @click="handleOpenChart">
+  <div id="used-ele" :style="{ backgroundColor: bgImage }" @click="handleOpenChart">
     <div class="content">
       <div class="item">
         <div class="container" ref="length">
@@ -19,6 +19,8 @@
           <span>当月节省量：{{ monthlySavings }}kwh</span>
         </div>
       </div>
+      <div class="ele-left-bottom-icon"></div>
+      <div class="ele-right-bottom-icon"></div>
     </div>
     <div class="digital-tunnel">
       <el-dialog :close-on-click-modal="false" v-model="isVisited" width="2175px" :modal="false">
@@ -56,6 +58,7 @@
 <script setup>
 import * as echarts from 'echarts';
 import {dateFormat} from "@/utils/date.js";
+
 const props = defineProps({
   list: Array,
   eleData: Array
@@ -71,8 +74,8 @@ const month = ref(dateFormat('',true));
 const valueB = ref(monthlySavings.value);
 const bgImage = computed(() =>
     isVisited.value
-        ? "bpq_active.png"
+        ? "#2E5589"
-        : "bg.png"
+        : "rgba(6,34,71,0.78)"
 );
 watch(() => props.eleData, (now) => {
   if (now.frequencyChangerList.length === 0) {
@@ -238,12 +241,31 @@ const getImageUrl = (name) => {
   width: 830px;
   //height: 373px;
   color: aliceblue;
-  //position: absolute;
+  border: 2px solid #0f82af;
-  //top: 1220px;
+  background: rgba(6, 34, 71, 0.78);
-  //top: 1680px;
+  border-radius: 20px;
-  //left: 68px;
-  background-image: url(../../../assets/images/usedEle/bg.png);
   padding: 21px 62px 35px 62px;
+  position: relative;
+
+  .ele-left-bottom-icon {
+    position: absolute;
+    bottom: -3px;
+    left: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+    transform: rotate(-90deg);
+  }
+
+  .ele-right-bottom-icon {
+    position: absolute;
+    bottom: -3px;
+    right: -3px;
+    width: 41px;
+    height: 41px;
+    background-image: url(@/assets/images/badGasInfo/sp_jz.png);
+    transform: rotate(180deg);
+  }
 
   .title {
     width: 96px;
@@ -274,7 +296,7 @@ const getImageUrl = (name) => {
         width: 60px;
         height: 210px;
         border-radius: 31px;
-        border: 1px solid #0f82af;
+        border: 1px solid rgba(105, 231, 253, 1);
         position: relative;
         margin-bottom: 20px;
 
@@ -283,7 +305,7 @@ const getImageUrl = (name) => {
           bottom: 0;
           width: 60px;
           height: inherit;
-          background: #60ddde;
+          background: linear-gradient(180deg, #38CAFB 0%, #2775E7 100%);
           border-radius: 31px;
           transition: width 0.5s linear 0s;
         }

src/components/content/windPressure/childComps/WindPressureItem.vue

@@ -76,13 +76,13 @@ let isWaring = computed(() => {
     border-radius: 6px;
   }
 
-  &:last-child {
+  //&:last-child {
-    .label {
+  //  .label {
-      span {
+  //    span {
-        margin: 0 5px 0 14px;
+  //      margin: 0 5px 0 14px;
-      }
+  //    }
-    }
+  //  }
-  }
+  //}
 
   .label {
     display: flex;

src/router/index.js

@@ -94,7 +94,6 @@ const router = createRouter({
 });
 router.beforeEach((to, form, next) => {
   NProgress.start()
-  console.log('token-----',getToken())
   if (!getToken()) {
     if (to.path === '/login') {
       next()
@@ -103,7 +102,6 @@ router.beforeEach((to, form, next) => {
       next({ path: '/login' })
     }
   } else {
-    console.log('有token')
     // if (to.path === '/login') {
     //   next('/')
     //   NProgress.done()