lilei 2 years ago
parent
commit
54368b9b12

+ 52 - 2
src/api/bigScreen.js

@@ -1,21 +1,71 @@
 import { axios } from '@/utils/request'
-
+// 加盟商数量
 export function countSubareaDealerQty () {
   return axios({
     url: '/report/dealerLs/countSubareaDealerQty',
     method: 'get'
   })
 }
+// 加盟商分布统计
 export function countProvinceDealerQty () {
   return axios({
     url: '/report/dealerLs/countProvinceDealerQty',
     method: 'get'
   })
 }
+// 产品数量统计
 export function countLevelProductQty () {
   return axios({
     url: '/report/productLs/countLevelProductQty',
     method: 'get'
   })
 }
-
+// 实时销售看板-区域销售金额占比
+export function queryAreaSaleAmount () {
+  return axios({
+    url: '/report/dataScreen/queryAreaSaleAmount',
+    method: 'get'
+  })
+}
+// 实时销售看板-品类销售分布
+export function queryBrandTypeSaleAmount () {
+  return axios({
+    url: '/report/dataScreen/queryBrandTypeSaleAmount',
+    method: 'get'
+  })
+}
+// 实时销售看板-地图
+export function queryMapSaleData () {
+  return axios({
+    url: '/report/dataScreen/queryMapSaleData',
+    method: 'get'
+  })
+}
+// 实时销售看板-销售金额top15省份
+export function queryProvinceSaleAmount () {
+  return axios({
+    url: '/report/dataScreen/queryProvinceSaleAmount',
+    method: 'get'
+  })
+}
+// 实时销售看板-本月/周销售
+export function querySaleMonthWeek () {
+  return axios({
+    url: '/report/dataScreen/querySaleMonthWeek',
+    method: 'get'
+  })
+}
+// 实时销售看板-今日销售
+export function querySaleToday () {
+  return axios({
+    url: '/report/dataScreen/querySaleToday',
+    method: 'get'
+  })
+}
+// 实时销售看板-销售趋势分析
+export function querySaleTrend () {
+  return axios({
+    url: '/report/dataScreen/querySaleTrend',
+    method: 'get'
+  })
+}

+ 52 - 23
src/views/bigScreen/realTimeSalesReport/center-bottom.vue

@@ -1,41 +1,71 @@
 <template>
   <div class="center_bottom">
-    <Echart
-      :options="options"
-      id="bottomLeftChart"
-      class="echarts_bottom"
-    ></Echart>
+    <Echart id="bottomLeftChart" :options="options" class="echarts_bottom" v-if="pageflag" ref="charts" />
+    <Reacquire v-else @onclick="getData" style="line-height:200px">
+      重新获取
+    </Reacquire>
   </div>
 </template>
 
 <script>
 import { graphic } from 'echarts'
+import { queryBrandTypeSaleAmount } from '@/api/bigScreen.js'
 export default {
   data () {
     return {
-      options: {}
+      options: {},
+      pageflag: true,
+      timer: null
     }
   },
   props: {},
   mounted () {
     this.getData()
   },
+  beforeDestroy () {
+    this.clearData()
+  },
   methods: {
+    clearData () {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
     getData () {
-      this.init({ 'category': ['北京市', '张掖市', '咸阳市', '汕头市', '普洱市', '临沂市', '宿迁市'], 'barData': [1586, 1356, 9481, 9298, 2150, 8154, 2641] })
-      // this.pageflag = true
-      // currentGET('big6', { companyName: this.companyName }).then((res) => {
-      //   console.log('安装计划', res)
-      //   if (res.success) {
-      //     this.init(res.data)
-      //   } else {
-      //     this.pageflag = false
-      //     this.$Message({
-      //       text: res.msg,
-      //       type: 'warning'
-      //     })
-      //   }
-      // })
+      queryBrandTypeSaleAmount().then((res) => {
+        console.log('品类销售分布', res)
+        if (res.status == 200) {
+          const ret = { category: [], barData: [] }
+          res.data.map(item => {
+            ret.category.push(item.name)
+            ret.barData.push(item.value)
+          })
+          this.$nextTick(() => {
+            this.init(ret)
+            this.switper()
+          })
+        } else {
+          this.pageflag = false
+        }
+      })
+    },
+    // 轮询
+    switper () {
+      if (this.timer) {
+        return
+      }
+      const looper = (a) => {
+        this.getData()
+      }
+      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
+      const myChart = this.$refs.charts.chart
+      myChart.on('mouseover', params => {
+        this.clearData()
+      })
+      myChart.on('mouseout', params => {
+        this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
+      })
     },
     init (newData) {
       this.options = {
@@ -59,7 +89,7 @@ export default {
                   item.value +
                   '元</br>'
               } else {
-                result += item.marker + ' ' + item.seriesName + ' :  - </br>'
+                result += item.marker + ' ' + item.seriesName + ' :  0 </br>'
               }
             })
             return result
@@ -97,7 +127,6 @@ export default {
                 color: '#B4B4B4'
               }
             },
-
             axisLabel: {
               formatter: '{value}'
             }
@@ -118,7 +147,7 @@ export default {
           {
             name: '销售额',
             type: 'bar',
-            barWidth: 15,
+            barWidth: 30,
             itemStyle: {
               borderRadius: 0,
               color: new graphic.LinearGradient(0, 0, 0, 1, [

+ 17 - 19
src/views/bigScreen/realTimeSalesReport/center-map.vue

@@ -24,6 +24,7 @@
 import xzqCode from '@/utils/map/xzqCode'
 import * as echarts from 'echarts'
 import { GETNOBASE } from '@/utils/request'
+import { queryMapSaleData } from '@/api/bigScreen.js'
 export default {
   data () {
     return {
@@ -37,23 +38,20 @@ export default {
   created () {},
 
   mounted () {
-    // console.log(xzqCode);
     this.getData('china')
   },
   methods: {
     getData (code) {
-      this.getGeojson('china', [{ 'name': '青海省', 'value': 197 }, { 'name': '河南省', 'value': 433 }, { 'name': '天津', 'value': 227 }, { 'name': '福建省', 'value': 976 }, { 'name': '辽宁省', 'value': 370 }, { 'name': '西藏自治区', 'value': 321 }, { 'name': '山西省', 'value': 304 }, { 'name': '海南省', 'value': 908 }])
-      this.mapclick()
-      // this.pageflag = false
-      // currentGET('big8', { regionCode: code }).then((res) => {
-      //   console.log('设备分布', res)
-      //   if (res.success) {
-      //     this.getGeojson(res.data.regionCode, res.data.dataList)
-      //     this.mapclick()
-      //   } else {
-      //     this.$Message.warning(res.msg)
-      //   }
-      // })
+      queryMapSaleData().then((res) => {
+        console.log('地图', res)
+        if (res.status == 200) {
+          this.getGeojson('china', res.data.dataList)
+          // this.mapclick()
+          this.$emit('onData', res.data)
+        } else {
+          this.$Message.warning(res.msg)
+        }
+      })
     },
     /**
      * @description: 获取geojson
@@ -113,12 +111,12 @@ export default {
           left: 20,
           bottom: 20,
           pieces: [
-            { gte: 1000, label: '1000个以上' }, // 不指定 max,表示 max 为无限大(Infinity)。
-            { gte: 600, lte: 999, label: '600-999个' },
-            { gte: 200, lte: 599, label: '200-599个' },
-            { gte: 50, lte: 199, label: '49-199个' },
-            { gte: 10, lte: 49, label: '10-49个' },
-            { lte: 9, label: '1-9个' } // 不指定 min,表示 min 为无限大(-Infinity)。
+            { gte: 1000000, label: '100万元以上' }, // 不指定 max,表示 max 为无限大(Infinity)。
+            { 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)。
           ],
           inRange: {
             // 渐变颜色,从小到大

+ 31 - 7
src/views/bigScreen/realTimeSalesReport/center-top.vue

@@ -2,29 +2,53 @@
   <div class="center-top-wrap">
     <div>
       <dv-digital-flop :config="config" style="width:90%;height:50px;" />
-      <div>2022年总销售数量</div>
+      <div>{{ year }}年总销售数量</div>
     </div>
     <div>
       <dv-digital-flop :config="config1" style="width:90%;height:50px;" />
-      <div>2022年总销售金额</div>
+      <div>{{ year }}年总销售金额</div>
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    totalNums: {
+      type: [Number, String],
+      default: 0
+    },
+    totalAmount: {
+      type: [Number, String],
+      default: 0
+    }
+  },
   data () {
     return {
-      config: {
-        number: [56487],
+      year: 0,
+      config: null,
+      config1: null
+    }
+  },
+  mounted () {
+    this.year = new Date().getFullYear()
+  },
+  watch: {
+    totalNums (newValue, oldValue) {
+      console.log(newValue)
+      this.config = {
+        number: [newValue],
         content: '{nt}',
         style: {
           fill: '#00aaff',
           fontSize: 40
         }
-      },
-      config1: {
-        number: [564598.36],
+      }
+    },
+    totalAmount (newValue, oldValue) {
+      console.log(newValue)
+      this.config1 = {
+        number: [newValue],
         toFixed: 2,
         content: '{nt}',
         style: {

+ 17 - 11
src/views/bigScreen/realTimeSalesReport/index.vue

@@ -22,9 +22,9 @@
     </div>
     <div class="contetn_center">
       <dv-border-box-8 class="contetn_center-top">
-        <CenterTop />
+        <CenterTop :totalNums="yearTotalNums" :totalAmount="yearTotalAmount"/>
       </dv-border-box-8>
-      <CenterMap class="contetn_center_topMap" />
+      <CenterMap @onData="setYearData" class="contetn_center_topMap" />
       <ItemWrap class="contetn_center-bottom" title="品类销售分布">
         <CenterBottom />
       </ItemWrap>
@@ -38,10 +38,10 @@
       </ItemWrap>
       <ItemWrap class="contetn_center-bottom" title="今日销售">
         <div class="table-head">
-          <div class="col-1">排名</div>
-          <div class="col-2">加盟商</div>
-          <div class="col-3">级别</div>
-          <div class="col-4">采购金额(元)</div>
+          <div class="col-1">加盟商</div>
+          <div class="col-2">级别</div>
+          <div class="col-3">销售数量</div>
+          <div class="col-4">销售金额(元)</div>
         </div>
         <div style="padding-bottom: 20px;">
           <RightToday />
@@ -73,7 +73,8 @@ export default {
   },
   data () {
     return {
-
+      yearTotalNums: 0,
+      yearTotalAmount: 0
     }
   },
   filters: {
@@ -90,6 +91,11 @@ export default {
   methods: {
     toPage () {
       this.$router.push({ name: 'fPanalysisReport' })
+    },
+    setYearData (data) {
+      console.log(data)
+      this.yearTotalNums = data.totalQty
+      this.yearTotalAmount = data.totalAmount
     }
   }
 }
@@ -169,19 +175,19 @@ export default {
     align-items: center;
     font-size: 14px;
     .col-1 {
-      width: 10%;
+      width: 35%;
     }
 
     .col-2 {
-      width: 30%;
+      width: 25%;
     }
 
     .col-3 {
-      width: 30%;
+      width: 20%;
     }
 
     .col-4 {
-      width: 30%;
+      width: 20%;
     }
 
     >div {

+ 17 - 22
src/views/bigScreen/realTimeSalesReport/left-bottom.vue

@@ -12,6 +12,7 @@
 </template>
 
 <script>
+import { queryProvinceSaleAmount } from '@/api/bigScreen.js'
 export default {
   data () {
     return {
@@ -20,8 +21,8 @@ export default {
         showValue: true,
         unit: '元',
         data: []
-      }
-
+      },
+      timer: null
     }
   },
   created () {
@@ -51,26 +52,20 @@ export default {
       this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
     },
     getData () {
-      this.config = {
-        ...this.config,
-        data: [{ 'value': 840, 'name': '廊坊市' }, { 'value': 788, 'name': '三亚市' }, { 'value': 787, 'name': '淮安市' }, { 'value': 751, 'name': '景德镇市' }, { 'value': 656, 'name': '上海市' }, { 'value': 493, 'name': '固原市' }, { 'value': 482, 'name': '丹东市' }, { 'value': 440, 'name': '吉林市' }, { 'value': 299, 'name': '石嘴山市' }, { 'value': 293, 'name': '抚顺市' }, { 'value': 250, 'name': '永州市' }, { 'value': 215, 'name': '柳州市' }, { 'value': 214, 'name': '芜湖市' }, { 'value': 159, 'name': '萍乡市' }, { 'value': 144, 'name': '延安市' }]
-      }
-      // this.pageflag = true
-      // currentGET('big7', { gatewayno: this.gatewayno }).then(res => {
-      //   if (!this.timer) {
-      //     console.log('销售金额TOP15', res)
-      //   }
-      //   if (res.success) {
-      //     this.config = {
-      //       ...this.config,
-      //       data: res.data
-      //     }
-      //     // this.switper()
-      //   } else {
-      //     this.pageflag = false
-      //     this.srcList = []
-      //   }
-      // })
+      queryProvinceSaleAmount().then(res => {
+        if (!this.timer) {
+          console.log('销售金额top15省份', res)
+        }
+        if (res.status == 200) {
+          this.config = {
+            ...this.config,
+            data: res.data
+          }
+          this.switper()
+        } else {
+          this.pageflag = false
+        }
+      })
     }
   }
 }

+ 23 - 79
src/views/bigScreen/realTimeSalesReport/left-top.vue

@@ -13,16 +13,11 @@
 </template>
 
 <script>
+import { queryAreaSaleAmount } from '@/api/bigScreen.js'
 export default {
   data () {
     return {
       options: {},
-      countUserNumData: {
-        lockNum: 0,
-        onlineNum: 0,
-        offlineNum: 0,
-        totalNum: 0
-      },
       pageflag: true,
       timer: null
     }
@@ -43,26 +38,21 @@ export default {
       }
     },
     getData () {
-      this.countUserNumData = { 'offlineNum': 1786, 'lockNum': 647, 'totalNum': 2218, 'onlineNum': -215 }
-      this.$nextTick(() => {
-        this.init()
+      queryAreaSaleAmount({}).then(res => {
+        // 只打印一次
+        if (!this.timer) {
+          console.log('区域销售金额占比', res)
+        }
+        if (res.status == 200) {
+          const listData = res.data
+          this.$nextTick(() => {
+            this.init(listData)
+            this.switper()
+          })
+        } else {
+          this.pageflag = false
+        }
       })
-      // this.pageflag = true
-      // currentGET('big1').then(res => {
-      //   // 只打印一次
-      //   if (!this.timer) {
-      //     console.log('设备总览', res)
-      //   }
-      //   if (res.success) {
-      //     this.countUserNumData = res.data
-      //     this.$nextTick(() => {
-      //       this.init()
-      //       // this.switper()
-      //     })
-      //   } else {
-      //     this.pageflag = false
-      //   }
-      // })
     },
     // 轮询
     switper () {
@@ -81,11 +71,9 @@ export default {
         this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
       })
     },
-    init () {
-      const total = this.countUserNumData.totalNum
-      const colors = ['#ECA444', '#33A1DB', '#56B557']
+    init (list) {
       const piedata = {
-        name: '用户总览',
+        name: '区域销售金额占比',
         type: 'pie',
         radius: ['42%', '65%'],
         avoidLabelOverlap: false,
@@ -94,53 +82,9 @@ export default {
           borderColor: 'rgba(0,0,0,0)',
           borderWidth: 2
         },
-
-        color: colors,
-        data: [
-          {
-            value: this.countUserNumData.lockNum,
-            name: 'A区',
-            label: {
-              shadowColor: colors[0]
-            }
-          },
-          {
-            value: this.countUserNumData.onlineNum,
-            name: 'B区',
-            label: {
-              shadowColor: colors[2]
-            }
-          },
-          {
-            value: this.countUserNumData.offlineNum,
-            name: 'G区',
-            label: {
-              shadowColor: colors[1]
-            }
-          }
-        ]
+        data: list
       }
       this.options = {
-        title: {
-          // zlevel: 0,
-          text: ['{value|' + total + '}', '{name|总销售额}'].join('\n'),
-          top: 'center',
-          left: 'center',
-          textStyle: {
-            rich: {
-              value: {
-                color: '#ffffff',
-                fontSize: 24,
-                fontWeight: 'bold',
-                lineHeight: 20
-              },
-              name: {
-                color: '#ffffff',
-                lineHeight: 20
-              }
-            }
-          }
-        },
         tooltip: {
           trigger: 'item',
           backgroundColor: 'rgba(0,0,0,.6)',
@@ -160,7 +104,7 @@ export default {
             ...piedata,
             tooltip: { show: true },
             label: {
-              formatter: '   {b|{b}}   \n   {c|{c}元}   {per|{d}%}  ',
+              formatter: '   {b|{b}} {per|{d}%}  ',
               //   position: "outside",
               rich: {
                 b: {
@@ -179,8 +123,8 @@ export default {
               }
             },
             labelLine: {
-              length: 20, // 第一段线 长度
-              length2: 36, // 第二段线 长度
+              length: 30, // 第一段线 长度
+              length2: 10, // 第二段线 长度
               show: true
 
             },
@@ -203,8 +147,8 @@ export default {
               padding: [2.5, -2.5, 2.5, -2.5]
             },
             labelLine: {
-              length: 20, // 第一段线 长度
-              length2: 36, // 第二段线 长度
+              length: 30, // 第一段线 长度
+              length2: 10, // 第二段线 长度
               show: false
             }
           }

+ 37 - 13
src/views/bigScreen/realTimeSalesReport/right-bottom.vue

@@ -31,11 +31,13 @@
 </template>
 
 <script>
+import { querySaleMonthWeek } from '@/api/bigScreen.js'
 export default {
   data () {
     return {
       list: [],
-      pageflag: true
+      pageflag: true,
+      timer: null
     }
   },
   computed: {
@@ -44,20 +46,42 @@ export default {
     this.getData()
   },
   mounted () { },
+  beforeDestroy () {
+    this.clearData()
+  },
   methods: {
+    clearData () {
+      if (this.timer) {
+        clearInterval(this.timer)
+        this.timer = null
+      }
+    },
+    // 轮询
+    switper () {
+      if (this.timer) {
+        return
+      }
+      const looper = (a) => {
+        this.getData()
+      }
+      this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
+    },
     getData () {
-      this.pageflag = true
-      this.list = [{ 'salesAmount': 11105.301, 'saleNums': 4842, 'name': '月' }, { 'salesAmount': 2540.36233, 'saleNums': 1000, 'name': '周' }]
-      // this.pageflag = true
-      // currentGET('big5', { limitNum: 50 }).then(res => {
-      //   console.log('实时预警', res)
-      //   if (res.success) {
-      //     this.list = res.data.list
-      //   } else {
-      //     this.pageflag = false
-      //     this.$Message.warning(res.msg)
-      //   }
-      // })
+      querySaleMonthWeek().then(res => {
+        if (!this.timer) {
+          console.log('本月/周销售', res)
+        }
+        if (res.status == 200) {
+          const data = res.data
+          this.list = [
+            { 'salesAmount': data.monthAmount, 'saleNums': data.monthQty, 'name': '月' },
+            { 'salesAmount': data.weekAmount, 'saleNums': data.weekQty, 'name': '周' }
+          ]
+          this.switper()
+        } else {
+          this.pageflag = false
+        }
+      })
     }
   }
 }

File diff suppressed because it is too large
+ 40 - 16
src/views/bigScreen/realTimeSalesReport/right-today.vue


+ 20 - 33
src/views/bigScreen/realTimeSalesReport/right-top.vue

@@ -20,16 +20,14 @@
 
 <script>
 import { graphic } from 'echarts'
+import { querySaleTrend } from '@/api/bigScreen.js'
 export default {
   data () {
     return {
       option: {},
-      pageflag: false,
+      pageflag: true,
       timer: null
     }
-  },
-  created () {
-
   },
   mounted () {
     this.getData()
@@ -45,30 +43,19 @@ export default {
       }
     },
     getData () {
-      this.pageflag = true
-      const data = { 'dateList': ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], 'numList': [3042, 9936, 4403, 9264, 5467, 9174, 8918, 9256, 6869, 3247, 3964, 5030], 'numList2': [610, 209, 300, 571, 144, 400, 172, 894, 174, 69, 751, 886] }
-      this.countUserNumData = data
-      this.$nextTick(() => {
-        this.init(data.dateList, data.numList, data.numList2)
+      querySaleTrend().then((res) => {
+        if (!this.timer) {
+          console.log('销售趋势分析', res)
+        }
+        if (res.status == 200) {
+          this.$nextTick(() => {
+            this.init(res.data.dateList, res.data.amountList, res.data.qtyList)
+            this.switper()
+          })
+        } else {
+          this.pageflag = false
+        }
       })
-      // currentGET('big4').then((res) => {
-      //   if (!this.timer) {
-      //     console.log('报警次数', res)
-      //   }
-      //   if (res.success) {
-      //     this.countUserNumData = res.data
-      //     this.$nextTick(() => {
-      //       this.init(res.data.dateList, res.data.numList, res.data.numList2)
-      //       // this.switper();
-      //     })
-      //   } else {
-      //     this.pageflag = false
-      //     this.$Message({
-      //       text: res.msg,
-      //       type: 'warning'
-      //     })
-      //   }
-      // })
     },
     // 轮询
     switper () {
@@ -143,12 +130,12 @@ export default {
           }
         },
         legend: {
-		  show: true,
-		  top: '0',
-		  left: 'center',
-		  textStyle: {
-		    color: '#7EB7FD'
-		  }
+          show: true,
+          top: '0',
+          left: 'center',
+          textStyle: {
+            color: '#7EB7FD'
+          }
         },
         grid: {
           // 布局

+ 1 - 1
vue.config.js

@@ -107,7 +107,7 @@ const vueConfig = {
     // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
     proxy: {
       '/api': {
-        target: 'http://192.168.0.103/ocs-admin',
+        target: 'http://192.168.0.182/ocs-admin',
         // target: 'https://t.ocs.360arrow.com/ocs-admin', //  Á·Ï°
         // target: 'http://p.ocs.360arrow.com/ocs-admin', //  Ô¤·¢²¼
         ws: false,

Some files were not shown because too many files changed in this diff