切换背景图

2 years ago · 0d3efddfcb
parent 86629ab5eb
commit 0d3efddfcb
11 changed files with 103 additions and 59 deletions
--- a/dist.zip
+++ b/dist.zip
--- a/public/img/energySources/background12.jpg
+++ b/public/img/energySources/background12.jpg
--- a/public/img/energySources/background13.jpg
+++ b/public/img/energySources/background13.jpg
--- a/public/img/energySources/background14.jpg
+++ b/public/img/energySources/background14.jpg
--- a/public/img/energySources/background15.jpg
+++ b/public/img/energySources/background15.jpg
--- a/src/views/energySources/component/all.vue
+++ b/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

--- a/src/views/energySources/component/emodal.vue
+++ b/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>
--- a/src/views/energySources/component/equipmentLoad.vue
+++ b/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>
--- a/src/views/energySources/component/header.vue
+++ b/src/views/energySources/component/header.vue
@ -20,12 +20,12 @@
      </div>

    </div>
-    <div class="htitle">
-      <div class="htitle-t" :style="{ fontSize: divFontSize }">
+    <div class="htitle" :style="htitleStyle">
+      <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: '',
-
-      divFontSize: "0.32rem",
+      htitleStyle: ''
    };
  },
  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;
--- a/src/views/energySources/index.vue
+++ b/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:'',
-      deptName:''
+      deptId: '',
+      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
-      console.log('dep ===>',this.deptId)
+      this.deptId = this.$route.query.deptId ? this.$route.query.deptId : this.userInfo.dept_id
+      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 fn = function (d) {
-            if (Array.isArray(d)) {
-              // 判断是否是数组
-              for (let i = 0; i < d.length; i++) {
-                const e = d[i]
-                  console.log('e ===>',e)
+      let result = null
+      let fn = function (d) {
+        if (Array.isArray(d)) {
+          // 判断是否是数组
+          for (let i = 0; i < d.length; i++) {
+            const e = d[i]
+            console.log('e ===>', e)

-                if (e[key] == value) {
-                  // 数据循环每个子项，并且判断子项下边是否有id值
-                  result = e // 返回的结果等于每一项
-                  break
-                } else if (e.children) {
-                  fn(e.children) // 递归调用下边的子项
-                }
-              }
+            if (e[key] == value) {
+              // 数据循环每个子项，并且判断子项下边是否有id值
+              result = e // 返回的结果等于每一项
+              break
+            } else if (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;
--- a/src/views/energySourcesProvince/component/statistics.vue
+++ b/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'),
-      month:this.$moment().format('YYYY-MM'),
-      year:this.$moment().format('YYYY'),
+      today: this.$moment().format('YYYY-MM-DD'),
+      month: this.$moment().format('YYYY-MM'),
+      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(){
-      getEnterprisePower(this.params).then(res =>{
-        console.log('res ===>',res)
+    getData() {
+      getEnterprisePower(this.params).then(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} : ''
-      console.log('params ====>',this.params)
+      this.params = index == 0 ? { currentYear: this.year } : index == 1 ? { currentMonth: this.month } : index == 2 ? { today: this.today } : ''
+      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;
  }

 }