数字修改

src/views/energySources/component/all.vue

@@ -21,56 +21,56 @@
         <div class="card">
           <div class="card-tit">{{ $moment().format('YYYY') }}年</div>
           <div class="card-num">
-            <div class="card-num-item" v-for="(item, index) in yearNum" :key="index">
+            <div class="card-num-item" v-for="(item, index) in yearNum.arr" :key="index">
               <div :style="item === '.' ? 'background: transparent' : ''"></div>
               <div :style="item === '.' ? 'background: transparent' : ''"></div>
               <div style="color: #CADEFF;">
                 {{ item }}
               </div>
             </div>
-            <span>万</span>
+            <span v-if="yearNum.unit">万</span>
           </div>
           <div class="card-unit">kw · h</div>
         </div>
         <div class="card">
           <div class="card-tit">{{ $moment().format('M') }}月</div>
           <div class="card-num">
-            <div class="card-num-item" v-for="(item, index) in monthNum" :key="index">
+            <div class="card-num-item" v-for="(item, index) in monthNum.arr" :key="index">
               <div :style="item === '.' ? 'background: transparent' : ''"></div>
               <div :style="item === '.' ? 'background: transparent' : ''"></div>
               <div style="color: #00FFC6;">
                 {{ item }}
               </div>
             </div>
-            <span>万</span>
+            <span v-if="monthNum.unit">万</span>
           </div>
           <div class="card-unit">kw · h</div>
         </div>
         <div class="card">
           <div class="card-tit">昨日</div>
           <div class="card-num">
-            <div class="card-num-item" v-for="(item, index) in yesterdayNum" :key="index">
+            <div class="card-num-item" v-for="(item, index) in yesterdayNum.arr" :key="index">
               <div :style="item === '.' ? 'background: transparent' : ''"></div>
               <div :style="item === '.' ? 'background: transparent' : ''"></div>
               <div style="color: #E0B42F;">
                 {{ item }}
               </div>
             </div>
-            <!-- <span>万</span> -->
+            <span v-if="yesterdayNum.unit">万</span>
           </div>
           <div class="card-unit">kw · h</div>
         </div>
         <div class="card">
           <div class="card-tit">今日</div>
           <div class="card-num">
-            <div class="card-num-item" v-for="(item, index) in todayNum" :key="index">
+            <div class="card-num-item" v-for="(item, index) in todayNum.arr" :key="index">
               <div :style="item === '.' ? 'background: transparent' : ''"></div>
               <div :style="item === '.' ? 'background: transparent' : ''"></div>
               <div style="color: #00FFFC;">
                 {{ item }}
               </div>
             </div>
-            <!-- <span>万</span> -->
+            <span v-if="todayNum.unit">万</span>
           </div>
           <div class="card-unit">kw · h</div>
         </div>
@@ -95,10 +95,10 @@ export default {
   data() {
     return {
       num: 0,
-      yearNum: 0,
-      monthNum: 0,
-      yesterdayNum: 0,
-      todayNum: 0,
+      yearNum: { arr: [], unit: false },
+      monthNum: { arr: [], unit: false },
+      yesterdayNum: { arr: [], unit: false },
+      todayNum: { arr: [], unit: false },
       selectMonth: '',
       currentMonthData: [120, 200, 150, 80, 70, 110, 130],
       lastMonthData: [150, 120, 180, 60, 40, 130, 150],
@@ -130,12 +130,42 @@ export default {
     getTotal() {
       getTotalElectricity({ manufacturerBrand: this.deptName }).then(res => {
         let data = res.data.data
-        this.yearNum = data.currentYear.toString().split('')
-        this.monthNum = data.currentMonth.toString().split('')
-        this.yesterdayNum = data.yesterday.toString().split('')
-        this.todayNum = data.today.toString().split('')
+        console.log(data, 'datadatadata')
+        this.yearNum.arr = this.formatNumber(data.currentYear).arr
+        this.yearNum.unit = this.formatNumber(data.currentYear).unit
+
+        this.monthNum.arr = this.formatNumber(data.currentMonth).arr
+        this.monthNum.unit = this.formatNumber(data.currentMonth).unit
+
+        this.yesterdayNum.arr = this.formatNumber(data.yesterday).arr
+        this.yesterdayNum.unit = this.formatNumber(data.yesterday).unit
+
+        this.todayNum.arr = this.formatNumber(data.today).arr
+        this.todayNum.unit = this.formatNumber(data.today).unit
       })
     },
+    formatNumber(n) {
+      let num = Number(n);
+      let val = ''
+      let unit = false
+      let json = {
+        unit,
+        arr: []
+      }
+      if (num == 0 || (num > 0 && num < 10000)) {
+        val = num;
+      } else {
+        unit = true
+        if (Number.isInteger(num)) {
+          val = (num / 10000).toFixed(2)
+        } else {
+          val = (Math.round(num) / 10000).toFixed(2)
+        }
+      }
+      json.unit = unit
+      json.arr = val.toString().split('')
+      return json
+    },
     getTrend() {
       this.currentMonthData = [];
       this.lastMonthData = []

src/views/energySourcesProvince/component/tendency.vue

@@ -42,13 +42,19 @@ export default {
           if (i == 0) {
             json.label.offset = [12, 0]
           } else if (i == datas.length - 1) {
-            json.label.offset = [-20, 0]
+            if (json.value >= 1000) {
+              json.label.offset = [-22, 0]
+            } else if (json.value >= 10 && json.value < 1000) {
+              json.label.offset = [-14, 0]
+            } else {
+              json.label.offset = [-4, 0]
+            }
           } else {
             json.label.offset = [0, 0]
           }
           return json
         })
-        
+
         this.echartsInit(xAxisData, seriesData)
       })
     },

vue.config.js

@@ -33,6 +33,7 @@ module.exports = {
         // target: "http://192.168.3.36:82",
         // 发布内网地址
         // target: "http://192.168.1.5:80/api",
+        // target: "http://124.221.142.15/api",
         ws: true,
         pathRewrite: {
           "^/api": "/",