切换背景图

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,18 +1,20 @@
 <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">
         <load v-if="deptName" :deptName="deptName" />
-        <dosage v-if="deptName" :deptName="deptName" /> 
+        <dosage v-if="deptName" :deptName="deptName" />
       </div>
       <div class="box-two">
-      <equipmentLoad v-if="deptName" :deptName="deptName" />
+        <equipmentLoad v-if="deptName" :deptName="deptName" />
         <equipmentStatus v-if="deptName" :deptName="deptName" />
-          <equipmentAnalyze v-if="deptName" :deptName="deptName" />
+        <equipmentAnalyze v-if="deptName" :deptName="deptName" />
       </div>
-      
+
 
     </div>
   </div>
@@ -26,15 +28,20 @@ import dosage from "./component/dosage.vue";
 import equipmentLoad from "./component/equipmentLoad.vue";
 import equipmentStatus from "./component/equipmentStatus.vue";
 import equipmentAnalyze from "./component/equipmentAnalyze.vue";
-import {getDeptTree} from "@/api/system/dept"
+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:'',
+      deptId: '',
-      deptName:''
+      deptName: '',
+      background: ''
     };
   },
   components: {
@@ -46,13 +53,13 @@ export default {
     equipmentStatus,
     equipmentAnalyze,
   },
-  computed:{
+  computed: {
     ...mapGetters(["userInfo", "permission"]),
   },
   created() {
     this.$nextTick(() => {
-        this.deptId = this.$route.query.deptId ? this.$route.query.deptId : this.userInfo.dept_id
+      this.deptId = this.$route.query.deptId ? this.$route.query.deptId : this.userInfo.dept_id
-      console.log('dep ===>',this.deptId)
+      console.log('dep ===>', this.deptId)
       this.getDept()
       this.setRemPc();
       window.addEventListener('resize', this.setRemPc);//浏览器窗口大小改变时调用rem换算方法
@@ -70,33 +77,49 @@ 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){
+    getDept(id) {
       getDeptTree().then(res => {
-        this.deptName = this.getAllIds(res.data.data,'id',this.deptId)
+        this.deptName = this.getAllIds(res.data.data, 'id', this.deptId)
       });
     },
     getAllIds(data, key, value) {
-          let result = null
+      let result = null
-          let fn = function (d) {
+      let fn = function (d) {
-            if (Array.isArray(d)) {
+        if (Array.isArray(d)) {
-              // 判断是否是数组
+          // 判断是否是数组
-              for (let i = 0; i < d.length; i++) {
+          for (let i = 0; i < d.length; i++) {
-                const e = d[i]
+            const e = d[i]
-                  console.log('e ===>',e)
+            console.log('e ===>', e)
 
-                if (e[key] == value) {
+            if (e[key] == value) {
-                  // 数据循环每个子项，并且判断子项下边是否有id值
+              // 数据循环每个子项，并且判断子项下边是否有id值
-                  result = e // 返回的结果等于每一项
+              result = e // 返回的结果等于每一项
-                  break
+              break
-                } else if (e.children) {
+            } else if (e.children) {
-                  fn(e.children) // 递归调用下边的子项
+              fn(e.children) // 递归调用下边的子项
-                }
-              }
             }
           }
-          fn(data) // 调用一下
+        }
-          return result.title
+      }
+      fn(data) // 调用一下
+      return result.title
     },
     setRemPc() {
       /**
@@ -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

@@ -14,9 +14,12 @@
     </tit>
     <el-table :data="tableData" style="width: 100%;" height="98%" :stripe="true" :size="mini"
       :row-class-name="tableRowClassName">
-      <el-table-column prop="name" label="企业名称"  width="200%">
+      <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>
@@ -35,7 +38,7 @@
 </template>
 
 <script>
-import {getEnterprisePower} from "@/api/energySourcesProvince/energySourcesProvince";
+import { getEnterprisePower } from "@/api/energySourcesProvince/energySourcesProvince";
 import tit from "./tit.vue";
 export default {
   data() {
@@ -47,9 +50,9 @@ export default {
       ],
       timeActiveIndex1: 0,
       tableData: [],
-      today:this.$moment().format('YYYY-MM-DD'),
+      today: this.$moment().format('YYYY-MM-DD'),
-      month:this.$moment().format('YYYY-MM'),
+      month: this.$moment().format('YYYY-MM'),
-      year:this.$moment().format('YYYY'),
+      year: this.$moment().format('YYYY'),
       timeFun: null,
       params: null
     };
@@ -58,20 +61,20 @@ export default {
     tit
   },
   created() {
-    this.params = {currentYear:this.year}
+    this.params = { currentYear: this.year }
     this.getData()
     this.timeFun = setInterval(() => {
       this.getData()
     }, 300000)
   },
- 
+
   beforeDestroy() {
     clearInterval(this.timeFun)
   },
   methods: {
-    getData(){
+    getData() {
-      getEnterprisePower(this.params).then(res =>{
+      getEnterprisePower(this.params).then(res => {
-        console.log('res ===>',res)
+        console.log('res ===>', res)
         this.tableData = res.data.data
       })
     },
@@ -86,8 +89,8 @@ export default {
     },
     timeClick(index) {
       this.timeActiveIndex1 = index;
-      this.params = index == 0 ? {currentYear:this.year} : index == 1 ? {currentMonth:this.month} : index == 2 ? {today:this.today} : ''
+      this.params = index == 0 ? { currentYear: this.year } : index == 1 ? { currentMonth: this.month } : index == 2 ? { today: this.today } : ''
-      console.log('params ====>',this.params)
+      console.log('params ====>', this.params)
       this.getData()
     },
     tableRowClassName({ row, rowIndex }) {
@@ -124,10 +127,11 @@ export default {
   border: 0 !important;
 }
 
-.statistics /deep/ .el-table td span{
+.statistics /deep/ .el-table td span {
   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;
   }
 
 }