lilei пре 2 година
родитељ
комит
4ad9e33b64

+ 12 - 0
src/bigScreenComponents/item-wrap/item-wrap.vue

@@ -59,6 +59,18 @@ export default {
     padding:0;
     margin:0;
   }
+  /deep/ .loading{
+    position:absolute;
+    z-index: 1000;
+    left:0;
+    top:0;
+    width:100%;
+    height:100%;
+    background:rgba(0,0,0,0.5);
+    display:flex;
+    align-items: center;
+    justify-content: center;
+  }
   .item_title,
   .item_title_left {
     height: @item-title-height;

+ 10 - 0
src/utils/util.js

@@ -121,4 +121,14 @@ export function formatTime(time, fmt) {
     }
     return fmt;
   }
+}
+
+// 千分位分隔符
+export function formatThousands (number) {
+  const numbers = number.toString().split('').reverse()
+  const segs = []
+
+  while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
+
+  return segs.join(',').split('').reverse().join('').replace(",.",".")
 }

+ 5 - 1
src/views/bigScreen/fPanalysisReport/center-bottom.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="center_bottom">
+    <div class="loading" v-if="loading"><a-spin /></div>
     <Echart id="bottomLeftChart" :options="options" class="echarts_bottom" v-if="pageflag" ref="charts" />
     <Reacquire v-else @onclick="getData" style="line-height:200px">
       重新获取
@@ -15,7 +16,8 @@ export default {
     return {
       options: {},
       pageflag: true,
-      timer: null
+      timer: null,
+      loading: false
     }
   },
   props: {},
@@ -35,6 +37,7 @@ export default {
       }
     },
     getData () {
+      this.loading = true
       countLevelProductQty({}).then((res) => {
         console.log('产品总数量', res)
         if (res.status == 200) {
@@ -56,6 +59,7 @@ export default {
         } else {
           this.pageflag = false
         }
+        this.loading = false
       })
     },
     // 轮询

+ 1 - 16
src/views/bigScreen/fPanalysisReport/index.vue

@@ -147,7 +147,7 @@ export default {
     justify-content: space-around;
   }
   .contetn_center-top{
-	margin-top: 10px;
+    margin-top: 10px;
   }
 
   //左边 右边 结构一样
@@ -209,19 +209,4 @@ export default {
       }
   }
 }
-
-@keyframes rotating {
-    0% {
-        -webkit-transform: rotate(0) scale(1);
-        transform: rotate(0) scale(1);
-    }
-    50% {
-        -webkit-transform: rotate(180deg) scale(1.1);
-        transform: rotate(180deg) scale(1.1);
-    }
-    100% {
-        -webkit-transform: rotate(360deg) scale(1);
-        transform: rotate(360deg) scale(1);
-    }
-}
 </style>

+ 5 - 2
src/views/bigScreen/fPanalysisReport/left-bottom.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="left-bottom">
+    <div class="loading" v-if="loading"><a-spin /></div>
     <dv-capsule-chart :config="config" style="width:100%;height:910px" />
   </div>
 </template>
@@ -14,8 +15,8 @@ export default {
         showValue: true,
         unit: '个',
         data: []
-      }
-
+      },
+      loading: false
     }
   },
   created () {
@@ -45,6 +46,7 @@ export default {
       this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
     },
     getData () {
+      this.loading = true
       countProvinceDealerQty({}).then(res => {
         if (!this.timer) {
           console.log('加盟商分布', res)
@@ -66,6 +68,7 @@ export default {
           this.pageflag = false
           this.srcList = []
         }
+        this.loading = false
       })
     }
   }

+ 11 - 5
src/views/bigScreen/fPanalysisReport/left-top.vue

@@ -1,8 +1,11 @@
 <template>
-  <Echart id="leftTop" :options="options" class="left_top_inner" v-if="pageflag" ref="charts" />
-  <Reacquire v-else @onclick="getData" style="line-height:200px">
-    重新获取
-  </Reacquire>
+  <div>
+    <div class="loading" v-if="loading"><a-spin /></div>
+    <Echart id="leftTop" :options="options" class="left_top_inner" v-if="pageflag" ref="charts" />
+    <Reacquire v-else @onclick="getData" style="line-height:200px">
+      重新获取
+    </Reacquire>
+  </div>
 </template>
 
 <script>
@@ -13,7 +16,8 @@ export default {
       options: {},
       listData: [],
       pageflag: true,
-      timer: null
+      timer: null,
+      loading: false
     }
   },
   created () {
@@ -33,6 +37,7 @@ export default {
     },
     getData () {
       this.listData = []
+      this.loading = true
       countSubareaDealerQty().then(res => {
         // 只打印一次
         if (!this.timer) {
@@ -58,6 +63,7 @@ export default {
         } else {
           this.pageflag = false
         }
+        this.loading = false
       })
     },
     // 轮询

+ 12 - 4
src/views/bigScreen/fPanalysisReport/right-bottom.vue

@@ -1,6 +1,7 @@
 <template>
   <div v-if="pageflag" class="right_center_wrap beautify-scroll-def">
-    <div class="rowup2">
+    <div id="scrollView2" class="rowup2">
+      <div class="loading" v-if="loading"><a-spin /></div>
       <ul class="right_center">
         <li class="right_center_item" v-for="(item, i) in list" :key="i">
           <div class="inner_right">
@@ -60,11 +61,14 @@ export default {
       list: [],
       pageflag: true,
       timer: null,
-      queryType: 'amount'
+      queryType: 'amount',
+      loading: false
     }
   },
   created () {
-    this.getData()
+    this.$nextTick(() => {
+      this.getData()
+    })
   },
   watch: {
   	curTab (newValue, oldValue) {
@@ -94,10 +98,13 @@ export default {
       this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
     },
     getData () {
+      this.loading = true
       const date = new Date().getFullYear() + '-01-01'
+      document.getElementById('scrollView2').className = ''
       queryProductPurchase({ queryDate: date, queryType: this.queryType }).then(res => {
         if (res.status == 200) {
           this.list = res.data
+          document.getElementById('scrollView2').className = 'rowup2'
           if (!this.timer) {
             console.log('销售数量/金额TOP100产品', res)
             // 无缝滚动
@@ -109,16 +116,17 @@ export default {
         } else {
           this.pageflag = false
         }
+        this.loading = false
       })
     }
   }
 }
 </script>
 <style lang="less" scoped>
+
 .right_center {
   width: 100%;
   height: 100%;
-
   .right_center_item {
     padding: 13px 0;
     font-size: 14px;

+ 5 - 1
src/views/bigScreen/fPanalysisReport/right-top.vue

@@ -1,6 +1,7 @@
 <template>
   <div v-if="pageflag" class="right_center_wrap beautify-scroll-def">
     <div class="rowup1">
+      <div class="loading" v-if="loading"><a-spin /></div>
       <ul class="right_center">
         <li class="right_center_item" v-for="(item, i) in list" :key="i">
           <div class="inner_right">
@@ -51,7 +52,8 @@ export default {
     return {
       list: [],
       pageflag: true,
-      timer: null
+      timer: null,
+      loading: false
     }
   },
   created () {
@@ -80,6 +82,7 @@ export default {
     },
     getData () {
       const date = new Date().getFullYear() + '-01-01'
+      this.loading = true
       queryDealerPurchase({ queryDate: date }).then(res => {
         if (res.status == 200) {
           this.list = res.data
@@ -94,6 +97,7 @@ export default {
         } else {
           this.pageflag = false
         }
+        this.loading = false
       })
     }
   }

+ 5 - 1
src/views/bigScreen/realTimeSalesReport/center-bottom.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="center_bottom">
+    <div class="loading" v-if="loading"><a-spin /></div>
     <Echart id="bottomLeftChart" :options="options" class="echarts_bottom" v-if="pageflag" ref="charts" />
     <Reacquire v-else @onclick="getData" style="line-height:200px">
       重新获取
@@ -15,7 +16,8 @@ export default {
     return {
       options: {},
       pageflag: true,
-      timer: null
+      timer: null,
+      loading: false
     }
   },
   props: {},
@@ -33,6 +35,7 @@ export default {
       }
     },
     getData () {
+      this.loading = true
       queryBrandTypeSaleAmount().then((res) => {
         console.log('品类销售分布', res)
         if (res.status == 200) {
@@ -48,6 +51,7 @@ export default {
         } else {
           this.pageflag = false
         }
+        this.loading = false
       })
     },
     // 轮询

+ 33 - 18
src/views/bigScreen/realTimeSalesReport/center-map.vue

@@ -2,6 +2,7 @@
   <div class="centermap">
     <div class="mapwrap" v-if="pageflag">
       <dv-border-box-12>
+        <div class="loading" v-if="loading"><a-spin /></div>
         <div class="quanguo" @click="getData('china')" v-if="code !== 'china'">
           返回
         </div>
@@ -25,7 +26,8 @@ export default {
       echartBindClick: false,
       isSouthChinaSea: false, // 是否要展示南海群岛  修改此值请刷新页面
       pageflag: true,
-      timer: null
+      timer: null,
+      loading: false
     }
   },
   created () {},
@@ -53,6 +55,7 @@ export default {
       this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
     },
     getData (code) {
+      this.loading = true
       queryMapSaleData().then((res) => {
         console.log('地图', res)
         if (res.status == 200) {
@@ -63,6 +66,7 @@ export default {
         } else {
           this.$Message.warning(res.msg)
         }
+        this.loading = false
       })
     },
     /**
@@ -102,12 +106,12 @@ export default {
         if (cityCenter[item.provinceName]) {
           newData.push({
             name: item.provinceName,
-            value: cityCenter[item.provinceName].concat(item.resultQty)
+            value: cityCenter[item.provinceName].concat(item.resultAmount)
           })
         }
         retData.push({
           name: item.provinceName,
-          value: item.resultQty
+          value: item.resultAmount
         })
       })
       this.init(name, retData, newData)
@@ -128,22 +132,22 @@ export default {
           left: 20,
           bottom: 20,
           pieces: [
-            { gte: 1000000, label: '100万元以上' }, // 不指定 max,表示 max 为无限大(Infinity)。
+            { gte: 10000000, label: '1000万元以上' }, // 不指定 max,表示 max 为无限大(Infinity)。
+            { gte: 5000000, lte: 9999999, label: '500万元-1000万元' },
+            { gte: 1000000, lte: 4999999, label: '100万元-500万元' },
             { gte: 500000, lte: 999999, label: '50万元-100万元' },
-            { gte: 100000, lte: 499999, label: '10万元-50万元' },
-            { gte: 50000, lte: 99999, label: '5万元-10万元' },
-            { gte: 10000, lte: 49999, label: '1万元-5万元' },
-            { lte: 9999, label: '1-1万元' } // 不指定 min,表示 min 为无限大(-Infinity)。
+            { gte: 50000, lte: 499999, label: '5万元-50万元' },
+            { lte: 49999, label: '1-5万元' } // 不指定 min,表示 min 为无限大(-Infinity)。
           ],
           inRange: {
             // 渐变颜色,从小到大
             color: [
-              '#1781b5',
-              '#2f90b9',
-              '#5cb3cc',
-              '#66a9c9',
-              '#8abcd1',
-              '#c3d7df'
+              '#aaffff',
+              '#aaaaff',
+              '#00aa7f',
+              '#00aaff',
+              '#ffaa00',
+              '#ff5500'
             ]
           },
           textStyle: {
@@ -174,7 +178,7 @@ export default {
               show: true,
               formatter: function (params) {
                 if (params.data) {
-                  return params.name + ':' + params.data['value'] + '元'
+                  return params.name + ':' + (params.data['value'] / 10000).toFixed(2) + '元'
                 } else {
                   return params.name
                 }
@@ -334,9 +338,20 @@ export default {
       line-height: 26px;
       letter-spacing: 6px;
       cursor: pointer;
-      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5),
-        0 0 6px rgba(0, 237, 237, 0.4);
-		z-index: 10000;
+      box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
+		  z-index: 10000;
+    }
+    .loading{
+      position:absolute;
+      z-index: 1000;
+      left:0;
+      top:0;
+      width:100%;
+      height:100%;
+      background:rgba(0,0,0,0.5);
+      display:flex;
+      align-items: center;
+      justify-content: center;
     }
   }
 }

+ 5 - 2
src/views/bigScreen/realTimeSalesReport/center-top.vue

@@ -12,6 +12,7 @@
 </template>
 
 <script>
+import { formatThousands } from '@/utils/util.js'
 export default {
   props: {
     totalNums: {
@@ -42,7 +43,8 @@ export default {
         style: {
           fill: '#00aaff',
           fontSize: 40
-        }
+        },
+        formatter: formatThousands
       }
     },
     totalAmount (newValue, oldValue) {
@@ -54,7 +56,8 @@ export default {
         style: {
           fill: '#E6A23C',
           fontSize: 40
-        }
+        },
+        formatter: formatThousands
       }
     }
   }

+ 5 - 1
src/views/bigScreen/realTimeSalesReport/left-bottom.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="left-bottom">
+    <div class="loading" v-if="loading"><a-spin /></div>
     <dv-capsule-chart :config="config" style="width:98%;height:505px" />
   </div>
 </template>
@@ -15,7 +16,8 @@ export default {
         unit: '万元',
         data: []
       },
-      timer: null
+      timer: null,
+      loading: false
     }
   },
   created () {
@@ -45,6 +47,7 @@ export default {
       this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
     },
     getData () {
+      this.loading = true
       queryProvinceSaleAmount().then(res => {
         if (!this.timer) {
           console.log('销售金额top15省份', res)
@@ -65,6 +68,7 @@ export default {
         } else {
           this.pageflag = false
         }
+        this.loading = false
       })
     }
   }

+ 11 - 5
src/views/bigScreen/realTimeSalesReport/left-top.vue

@@ -1,8 +1,11 @@
 <template>
-  <Echart id="leftTop" :options="options" class="left_top_inner" v-if="pageflag" ref="charts" />
-  <Reacquire v-else @onclick="getData" style="line-height:200px">
-    重新获取
-  </Reacquire>
+  <div style="height:100%">
+    <div class="loading" v-if="loading"><a-spin /></div>
+    <Echart id="leftTop" :options="options" class="left_top_inner" v-if="pageflag" ref="charts" />
+    <Reacquire v-else @onclick="getData" style="line-height:200px">
+      重新获取
+    </Reacquire>
+  </div>
 </template>
 
 <script>
@@ -12,7 +15,8 @@ export default {
     return {
       options: {},
       pageflag: true,
-      timer: null
+      timer: null,
+      loading: false
     }
   },
   created () {
@@ -31,6 +35,7 @@ export default {
       }
     },
     getData () {
+      this.loading = true
       queryAreaSaleAmount({}).then(res => {
         // 只打印一次
         if (!this.timer) {
@@ -51,6 +56,7 @@ export default {
         } else {
           this.pageflag = false
         }
+        this.loading = false
       })
     },
     // 轮询

+ 8 - 3
src/views/bigScreen/realTimeSalesReport/right-bottom.vue

@@ -1,5 +1,6 @@
 <template>
   <div v-if="pageflag" class="right_center_wrap beautify-scroll-def">
+    <div class="loading" v-if="loading"><a-spin /></div>
     <ul class="right_center ">
       <li class="right_center_item" v-for="(item, i) in list" :key="i">
         <div class="dibu" v-if="i < 1"></div>
@@ -25,12 +26,14 @@
 
 <script>
 import { querySaleMonthWeek } from '@/api/bigScreen.js'
+import { formatThousands } from '@/utils/util.js'
 export default {
   data () {
     return {
       list: [],
       pageflag: true,
-      timer: null
+      timer: null,
+      loading: false
     }
   },
   computed: {
@@ -60,6 +63,7 @@ export default {
       this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
     },
     getData () {
+      this.loading = true
       querySaleMonthWeek().then(res => {
         if (!this.timer) {
           console.log('本月/周销售', res)
@@ -67,13 +71,14 @@ export default {
         if (res.status == 200) {
           const data = res.data
           this.list = [
-            { 'salesAmount': data.monthAmount, 'saleNums': data.monthQty, 'name': '月' },
-            { 'salesAmount': data.weekAmount, 'saleNums': data.weekQty, 'name': '周' }
+            { 'salesAmount': data.monthAmount, 'saleNums': formatThousands(data.monthQty), 'name': '月' },
+            { 'salesAmount': data.weekAmount, 'saleNums': formatThousands(data.weekQty), 'name': '周' }
           ]
           this.switper()
         } else {
           this.pageflag = false
         }
+        this.loading = false
       })
     }
   }

+ 5 - 1
src/views/bigScreen/realTimeSalesReport/right-today.vue

@@ -1,5 +1,6 @@
 <template>
   <div v-if="pageflag" class="right_center_wrap beautify-scroll-def">
+    <div class="loading" v-if="loading"><a-spin /></div>
     <div class="rowup">
       <ul class="right_center">
         <li class="right_center_item" v-for="(item, i) in list" :key="i">
@@ -55,7 +56,8 @@ export default {
     return {
       list: [],
       pageflag: true,
-      timer: null
+      timer: null,
+      loading: false
     }
   },
   created () {
@@ -83,6 +85,7 @@ export default {
       this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
     },
     getData () {
+      this.loading = true
       querySaleToday().then(res => {
         if (res.status == 200) {
           this.list = res.data
@@ -97,6 +100,7 @@ export default {
         } else {
           this.pageflag = false
         }
+        this.loading = false
       })
     }
   }

+ 17 - 11
src/views/bigScreen/realTimeSalesReport/right-top.vue

@@ -1,14 +1,17 @@
 <template>
-  <Echart
-    id="rightTop"
-    :options="option"
-    class="right_top_inner"
-    v-if="pageflag"
-    ref="charts"
-  />
-  <Reacquire v-else @onclick="getData" style="line-height: 200px">
-    重新获取
-  </Reacquire>
+  <div>
+    <div class="loading" v-if="loading"><a-spin /></div>
+    <Echart
+      id="rightTop"
+      :options="option"
+      class="right_top_inner"
+      v-if="pageflag"
+      ref="charts"
+    />
+    <Reacquire v-else @onclick="getData" style="line-height: 200px">
+      重新获取
+    </Reacquire>
+  </div>
 </template>
 
 <script>
@@ -19,7 +22,8 @@ export default {
     return {
       option: {},
       pageflag: true,
-      timer: null
+      timer: null,
+      loading: false
     }
   },
   mounted () {
@@ -36,6 +40,7 @@ export default {
       }
     },
     getData () {
+      this.loading = true
       querySaleTrend().then((res) => {
         if (!this.timer) {
           console.log('销售趋势分析', res)
@@ -48,6 +53,7 @@ export default {
         } else {
           this.pageflag = false
         }
+        this.loading = false
       })
     },
     // 轮询