切换背景图

src/views/energySources/component/all.vue

@@ -130,7 +130,6 @@ export default {
     getTotal() {
       getTotalElectricity({ manufacturerBrand: this.deptName }).then(res => {
         let data = res.data.data
-        console.log(data, 'datadatadata')
         this.yearNum.arr = this.formatNumber(data.currentYear).arr
         this.yearNum.unit = this.formatNumber(data.currentYear).unit
 

src/views/energySources/component/emodal.vue

@@ -23,7 +23,7 @@
               <span>{{ scope.row.loadRate }}%</span>
             </template>
           </el-table-column>
-          <el-table-column prop="sendTime" label="负载最长时段" show-overflow-tooltip>
+          <el-table-column prop="sendTime" label="时间" show-overflow-tooltip>
             <template slot-scope="scope">
               <span>{{ scope.row.sendTime }}</span>
             </template>

src/views/energySources/component/equipmentLoad.vue

@@ -15,7 +15,7 @@
           <span>{{ scope.row.loadRate }}%</span>
         </template>
       </el-table-column>
-      <el-table-column prop="sendTime" label="负载最长时段" show-overflow-tooltip>
+      <el-table-column prop="sendTime" label="时间" show-overflow-tooltip>
         <template slot-scope="scope">
           <span>{{ scope.row.sendTime }}</span>
         </template>

src/views/energySources/component/header.vue

@@ -20,12 +20,12 @@
       </div>
 
     </div>
-    <div class="htitle">
+    <div class="htitle" :style="htitleStyle">
-      <div class="htitle-t" :style="{ fontSize: divFontSize }">
+      <div class="htitle-t">
 
         {{ deptName }}能耗监测系统
       </div>
-      <div class="htitle-b" :style="{ fontSize: divFontSize }">
+      <div class="htitle-b">
         {{ deptName }}能耗监测系统
       </div>
     </div>
@@ -48,8 +48,7 @@ export default {
       timeFun: null,
       temp: '',
       text: '',
-
+      htitleStyle: ''
-      divFontSize: "0.32rem",
     };
   },
   computed: {
@@ -58,16 +57,25 @@ export default {
   created() {
 
     if (this.deptName.length <= 12) {
-      this.divFontSize = "0.32rem"
+      this.htitleStyle = {}
     }
     if (this.deptName.length == 13) {
-      this.divFontSize = "0.3rem"
+      this.htitleStyle = {
+        left: '6.52rem',
+        width: '6.1rem'
+      }
     }
     if (this.deptName.length == 14) {
-      this.divFontSize = "0.29rem"
+      this.htitleStyle = {
+        left: '6.4rem',
+        width: '6.4rem'
+      }
     }
     if (this.deptName.length == 15) {
-      this.divFontSize = "0.28rem"
+      this.htitleStyle = {
+        left: '6.2rem',
+        width: '6.78rem'
+      }
     }
     getWeather().then(res => {
       this.temp = res.data.now.temp
@@ -147,6 +155,7 @@ export default {
     left: 0;
     width: 100%;
     height: 100%;
+    font-size: 0.32rem;
     text-align: center;
     font-family: Microsoft YaHei;
     font-weight: bold;
@@ -162,6 +171,7 @@ export default {
 
     text-align: center;
     font-family: Microsoft YaHei;
+    font-size: 0.32rem;
     font-weight: bold;
     color: rgba(0, 0, 0, 0);
     top: 0;

src/views/energySources/index.vue

@@ -1,6 +1,8 @@
 <template>
   <div style="height: 100%">
-    <div class="modelBox">
+    <div class="modelBox" :style="{
+      background: background
+    }">
       <Header v-if="deptName" :deptName="deptName" />
       <all v-if="deptName" :deptName="deptName" />
       <div class="box-two">
@@ -29,12 +31,17 @@ import equipmentAnalyze from "./component/equipmentAnalyze.vue";
 import { getDeptTree } from "@/api/system/dept"
 import { mapGetters } from "vuex";
 
+import background12 from "../../../public/img/energySources/background12.jpg"
+import background13 from "../../../public/img/energySources/background13.jpg"
+import background14 from "../../../public/img/energySources/background14.jpg"
+import background15 from "../../../public/img/energySources/background15.jpg"
 
 export default {
   data() {
     return {
       deptId: '',
-      deptName:''
+      deptName: '',
+      background: ''
     };
   },
   components: {
@@ -70,6 +77,22 @@ export default {
       return data;
     },
   },
+  watch: {
+    deptName() {
+      if (this.deptName.length <= 12) {
+        this.background = `url(${background12}) 0 0 / 100% 100%`
+      }
+      if (this.deptName.length == 13) {
+        this.background = `url(${background13}) 0 0 / 100% 100%`
+      }
+      if (this.deptName.length == 14) {
+        this.background = `url(${background14}) 0 0 / 100% 100%`
+      }
+      if (this.deptName.length == 15) {
+        this.background = `url(${background15}) 0 0 / 100% 100%`
+      }
+    }
+  },
   methods: {
     getDept(id) {
       getDeptTree().then(res => {
@@ -125,9 +148,8 @@ export default {
   height: 10.8rem;
   position: relative;
   padding: 0.96rem 0.24rem 0 0.24rem;
-  background: url("../../../public/img/energySources/background2.png");
-  background-size: 100% 100%;
   box-sizing: border-box;
+
   .box-two {
     display: flex;
     margin-top: 0.22rem;

src/views/energySourcesProvince/component/statistics.vue

@@ -16,7 +16,10 @@
       :row-class-name="tableRowClassName">
       <el-table-column prop="name" label="企业名称" width="200%">
         <template slot-scope="scope">
-          <span style="font-size: 0.14rem;">{{ scope.row.name }}</span>
+          <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top">
+            <div class="rankname" style="font-size: 0.14rem;">{{ scope.row.name }}</div>
+          </el-tooltip>
+
           <span class="rank" v-if="scope.$index <= 2" :style="rankStyle(scope.$index)">TOP.{{ scope.$index + 1 }}</span>
         </template>
       </el-table-column>
@@ -128,6 +131,7 @@ export default {
   font-size: 0.18rem;
   font-family: Acumin-Pro-Condensed-Regular-2;
 }
+
 .statistics /deep/ .el-table::before {
   height: 0 !important;
 }
@@ -179,6 +183,15 @@ export default {
     }
   }
 
+  .rankname {
+    display: inline-block;
+    max-width: 78%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+  }
+
   .rank {
     display: inline-block;
     width: 0.32rem;
@@ -190,7 +203,7 @@ export default {
     color: #FFFFFF;
     // padding: 0.04rem 0.06rem;
     border-radius: 0.08rem;
-    margin-left: 0.1rem;
+    margin-left: 0.04rem;
   }
 
 }