样式

src/views/energySources/component/all.vue

@@ -9,7 +9,7 @@
         <span style="font-size: 0.14rem">连续两个月用量对比</span>
       </template>
       <div class="tit-r">
-        <span style="color: #fff;">选择月份：</span>
+        <span style="color: #fff;">选择时间：</span>
         <el-date-picker size="mini" v-model="selectMonth" type="month" placeholder="选择月" @change="changeMonth"
           style="width: 1.2rem;margin-right: 0.26rem;" format="yyyy-MM" value-format="yyyy-MM">
         </el-date-picker>

src/views/energySources/component/dosage.vue

@@ -4,7 +4,7 @@
       <div class="tit-r">
         <span style="color: #0096FF;" @click="visible=true">监测明细</span>
         &nbsp;&nbsp;&nbsp;
-        <span style="color: #fff;">选择月份：</span>
+        <span style="color: #fff;">选择时间：</span>
         <el-date-picker size="mini" v-model="selectDay" type="date" placeholder="选择月" @change="changeDate"
           style="width: 1.3rem;margin-right: 0.26rem;" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
         </el-date-picker>
@@ -122,6 +122,22 @@ export default {
         return "background: #1AD0A3"
       }
     },
+    tableRowClassName({ row, rowIndex }) {
+      if (rowIndex % 2 === 0) {
+        if (row.loadRate > 0) {
+          return 'trEven';
+        } else {
+          return 'trEven';
+        }
+
+      } else {
+        if (row.loadRate > 0) {
+          return 'trOdd';
+        } else {
+          return 'trOdd';
+        }
+      }
+    },
     getPeriodData() {
       getPeriodElectricity({ manufacturerBrand: this.userInfo.dept_name, today: this.selectDay }).then(res => {
         console.log('period =====>', res)
@@ -260,6 +276,10 @@ export default {
   background-color: transparent !important;
   border: 0 !important;
 }
+.dosage /deep/ .trEven td {
+  background: rgba($color: #0de5ff, $alpha: 0.1) !important;
+}
+
 
 .dosage /deep/ .el-table td span {
   font-size: 0.14rem !important;
@@ -349,12 +369,16 @@ export default {
   }
 
   .rank {
+    display: inline-block;
+    width: 0.44rem;
+    height: 0.22rem;
+    line-height: 0.21rem;
+    text-align: center;
     font-size: 0.14rem;
     font-family: Acumin Variable Concept;
     font-weight: normal;
     color: #FFFFFF;
-    padding: 0.04rem 0.06rem;
     border-radius: 0.08rem;
-    margin-left: 0.04rem;
+    margin-left: 0.1rem;
   }
 }</style>

src/views/energySources/component/equipmentAnalyze.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="equipmentAnalyze box">
     <tit :title="'设备日均负载分析'">
-      <div class="tit-r">选择月份：
+      <div class="tit-r" >
+        <span style="color: #fff;">选择时间：</span>
         <el-date-picker size="mini" v-model="selectDay" type="date" placeholder="选择月" @change="changeDate"
           style="width: 1.3rem;margin-right: 0.26rem;" value-format="yyyy-MM-dd" format="yyyy-MM-dd">
         </el-date-picker>

src/views/energySources/component/header.vue

@@ -12,16 +12,23 @@
         {{ $moment().format('dddd') }}
       </div>
       <div>
-        {{temp}}℃ {{text}}
+        {{ temp }}℃ {{ text }}
       </div>
-      <div @click="$router.replace({path: `/wel/index`})">
+      <div @click="$router.replace({ path: `/wel/index` })">
         <img src="../../../../public/img/energySources/r.png" style="width: 0.2rem;height: 0.2rem;" srcset="">
         返回首页
       </div>
 
     </div>
     <div class="htitle">
-      {{ userInfo.dept_name }}实业公司能耗监测系统
+      <div class="htitle-t">
+
+        {{ userInfo.dept_name }}实业公司能耗监测系统
+      </div>
+      <div class="htitle-b">
+
+        {{ userInfo.dept_name }}实业公司能耗监测系统
+      </div>
     </div>
   </div>
 </template>
@@ -34,11 +41,11 @@ export default {
     return {
       time: '',
       timeFun: null,
-      temp:'',
+      temp: '',
-      text:'',
+      text: '',
     };
   },
-  computed:{
+  computed: {
     ...mapGetters(["userInfo", "permission"]),
   },
   created() {
@@ -53,7 +60,7 @@ export default {
   },
   methods: {
   },
-  beforeDestroyed() { 
+  beforeDestroyed() {
     clearInterval(this.timeFun)
   },
 };
@@ -97,6 +104,7 @@ export default {
     line-height: 0.48rem;
     margin-left: 0.36rem;
   }
+
   div:nth-child(5) {
     font-size: 0.2rem;
     line-height: 0.48rem;
@@ -112,14 +120,38 @@ export default {
   left: 7.2rem;
   width: 4.82rem;
   height: 0.46rem;
-  text-align: center;
+
-  font-size: 0.34rem;
+  .htitle-t {
-  font-family: Microsoft YaHei;
+    position: absolute;
-  font-weight: bold;
+    top: 0;
-  color: #FFFFFF;
+    left: 0;
-  text-shadow: 3px 4px 2px rgba(0, 0, 0, 0.2);
+    width: 100%;
-  background: linear-gradient(-12deg, #C9E7FF 0%, #ECFCFF 100%);
+    height: 100%;
-  -webkit-background-clip: text;
+    text-align: center;
-  -webkit-text-fill-color: transparent;
+    font-size: 0.3rem;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: #FFFFFF;
+    background: linear-gradient(-12deg, #C9E7FF 0%, #ECFCFF 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    z-index: 2;
+  }
+
+  .htitle-b {
+    position: absolute;
+    
+    text-align: center;
+    font-size: 0.3rem;
+    font-family: Microsoft YaHei;
+    font-weight: bold;
+    color: rgba(0, 0, 0, 0);
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    text-shadow: 4px 5px 2px rgba(0, 0, 0, 0.3);
+  }
 }
 </style>

src/views/energySources/component/load.vue

@@ -2,7 +2,7 @@
   <div class="box load">
     <tit :title="'设备负载监控'">
       <div class="tit-r">
-        <span style="color: #fff;">选择月份：</span>
+        <span style="color: #fff;">选择时间：</span>
         <el-date-picker size="mini" v-model="selectDate" type="date" placeholder="选择月" :prefix-icon="null"
           style="width: 1.3rem;margin-right: 0.26rem;" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
         </el-date-picker>
@@ -118,6 +118,7 @@ export default {
 
         let data = res.data.data
         let xAxisArr = Object.keys(data)
+        xAxisArr.sort()
         let seriesJson = {
           jian: [],
           feng: [],

src/views/energySourcesProvince/component/statistics.vue

@@ -170,13 +170,18 @@ export default {
   }
 
   .rank {
+    display: inline-block;
+    width: 0.44rem;
+    height: 0.22rem;
+    line-height: 0.21rem;
+    text-align: center;
     font-size: 0.14rem;
     font-family: Acumin Variable Concept;
     font-weight: normal;
     color: #FFFFFF;
-    padding: 0.04rem 0.06rem;
+    // padding: 0.04rem 0.06rem;
     border-radius: 0.08rem;
-    margin-left: 0.04rem;
+    margin-left: 0.1rem;
   }
 
 }