瀏覽代碼

图表对接

lilei 2 年之前
父節點
當前提交
47e0b383e3

+ 21 - 0
src/api/bigScreen.js

@@ -0,0 +1,21 @@
+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'
+  })
+}
+

+ 37 - 33
src/bigScreenComponents/reacquire/reacquire.vue

@@ -1,52 +1,53 @@
 <template>
-    <div class='reacquire flex justify-center  blocks  cursor-pointer' :style="{ lineHeight: lineHeight }"
-        @click="getData">
-        <span>
-             重新获取
-        </span>
-       
-    </div>
+  <div
+    class="reacquire flex justify-center  blocks  cursor-pointer"
+    :style="{ lineHeight: lineHeight }"
+    @click="getData">
+    <span>
+      点击重新获取
+    </span>
+  </div>
 </template>
 
 <script>
 
 export default {
-    components: {},
-    props: {
-        lineHeight: {
-            type: String,
-            default: '200px'
-        }
-    },
-    data() {
-        return {
+  components: {},
+  props: {
+    lineHeight: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data () {
+    return {
 
-        };
-    },
-    computed: {},
-    methods: {
-        init() {
-        },
-        getData(e){
-            this.$emit("onclick",e)
-        }
+    }
+  },
+  computed: {},
+  methods: {
+    init () {
     },
-    created() {
+    getData (e) {
+      this.$emit('onclick', e)
+    }
+  },
+  created () {
 
-    },
-    mounted() {
+  },
+  mounted () {
 
-    },
-    beforeDestroy() {
-    },
+  },
+  beforeDestroy () {
+  }
 }
 </script>
 
 <style lang="less" scoped>
 .reacquire {
-
     user-select:none;
     color: rgb(168, 168, 168);
+    font-size: 30px;
     span:hover{
         color: #1890ff ;
         text-decoration: underline;
@@ -56,9 +57,12 @@ export default {
 .blocks {
     width: 100%;
     height: 100%;
+    display:flex;
+    align-items:center;
+    justify-content: center;
 }
 
 .cursor-pointer {
     cursor: pointer;
 }
-</style>
+</style>

+ 2 - 1
src/store/getters.js

@@ -18,7 +18,8 @@ const getters = {
   loadingStatus: state => state.app.loadingStatus,
   employeeList: state => state.app.employeeList,
   tempBillOfData: state => state.app.tempBillOfData,
-  returnReason: state => state.app.returnReason
+  returnReason: state => state.app.returnReason,
+  echartsAutoTime: state => state.setting.echartsAutoTime
 }
 
 export default getters

+ 1 - 6
src/store/modules/setting.js

@@ -8,8 +8,6 @@
 import {isObject} from '@/libs/types'
 export default {
     state: () => ({
-        sbtxSwiper: true,//设备提醒轮播
-        ssyjSwiper:true,//实时预警轮播
         isScale:true,//是否进行全局适配
         defaultOption: {
             step: 3.4, // 数值越大速度滚动越快
@@ -21,7 +19,7 @@ export default {
             singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
             waitTime: 3000 // 单步运动停止的时间(默认值1000ms)
           },
-          echartsAutoTime:3000,//echarts 图自动请求接口时间
+          echartsAutoTime:90000,//echarts 图自动请求接口时间
     }),
     getters: {
         //根据菜单路径获取 菜单信息
@@ -42,9 +40,6 @@ export default {
         updateSwiper(state, {val,type}) {
             state[type]=val
             localStorage.setItem('settingData',JSON.stringify({
-                sbtxSwiper:state.sbtxSwiper,
-                ssyjSwiper:state.ssyjSwiper,
-                aztpSwiper:state.aztpSwiper,
                 isScale:state.isScale
             }))
         },

+ 62 - 21
src/views/bigScreen/fPanalysisReport/center-bottom.vue

@@ -1,37 +1,79 @@
 <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 { countLevelProductQty } from '@/api/bigScreen'
 import { graphic } from 'echarts'
 export default {
   data () {
     return {
-      options: {}
+      options: {},
+      pageflag: true,
+      timer: null
     }
   },
   props: {},
-  mounted () {
+  created () {
     this.getData()
   },
+  mounted () {
+  },
+  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
-      //   }
-      // })
+      countLevelProductQty({}).then((res) => {
+        console.log('产品总数量', res)
+        if (res.status == 200) {
+          const ret = { category: [], barData: [] }
+          let totalQty = 0
+          res.data.map(item => {
+            if (item.productLevel != 'totalQty') {
+              ret.category.push(item.productLevel + '级')
+              ret.barData.push(item.productQty)
+            } else {
+              totalQty = item.productQty
+            }
+          })
+          this.$emit('total', totalQty)
+          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 = {
@@ -53,7 +95,7 @@ export default {
                   item.seriesName +
                   ' : ' +
                   item.value +
-                  '</br>'
+                  '</br>'
               } else {
                 result += item.marker + ' ' + item.seriesName + ' :  - </br>'
               }
@@ -93,7 +135,6 @@ export default {
                 color: '#B4B4B4'
               }
             },
-
             axisLabel: {
               formatter: '{value}'
             }
@@ -112,9 +153,9 @@ export default {
         ],
         series: [
           {
-            name: '销售额',
+            name: '数量',
             type: 'bar',
-            barWidth: 15,
+            barWidth: 30,
             itemStyle: {
               borderRadius: 0,
               color: new graphic.LinearGradient(0, 0, 0, 1, [

+ 10 - 32
src/views/bigScreen/fPanalysisReport/center-top.vue

@@ -1,41 +1,19 @@
 <template>
   <div class="center-top-wrap">
-    <div v-if="id == 'n1'">
-      <dv-digital-flop :config="config" style="width:90%;height:50px;" />
-    </div>
-    <div v-if="id == 'n2'">
-      <dv-digital-flop :config="config1" style="width:90%;height:50px;" />
-    </div>
+    <div>{{ total }}</div>
   </div>
 </template>
 
 <script>
 export default {
   props: {
-    id: {
-      type: String,
-      default: 'n1'
+    total: {
+      type: [Number, String],
+      default: 0
     }
   },
   data () {
     return {
-      config: {
-        number: [56487],
-        content: '{nt}',
-        style: {
-          fill: '#00aaff',
-          fontSize: 40
-        }
-      },
-      config1: {
-        number: [564598],
-        toFixed: 0,
-        content: '{nt}',
-        style: {
-          fill: '#E6A23C',
-          fontSize: 40
-        }
-      }
     }
   }
 }
@@ -45,15 +23,15 @@ export default {
 	.center-top-wrap{
 		display: flex;
 		align-items: center;
-		justify-content: space-between;
 		> div{
 			width: 100%;
 			text-align: center;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
-			color: rgba(255, 255, 255, 0.8);
+			color: #00aaff;
+      font-size:40px;
+      height: 45px;
+      line-height:45px;
+      overflow: hidden;
+      font-weight:bold;
 		}
 	}
 </style>

+ 13 - 5
src/views/bigScreen/fPanalysisReport/index.vue

@@ -17,12 +17,12 @@
     </div>
     <div class="contetn_center">
       <ItemWrap class="contetn_center-bottom contetn_lr-item" title="加盟商总数量">
-        <CenterTop id="n1" />
-        <LeftTop style="height: 380px;" />
+        <CenterTop :total="jmsTotal" />
+        <LeftTop @total="setJmsTotal" style="height: 380px;" />
       </ItemWrap>
       <ItemWrap class="contetn_center-bottom contetn_lr-bitem" title="产品总数量">
-        <CenterTop id="n2"/>
-        <CenterBottom style="height: 370px;"/>
+        <CenterTop :total="cpTotal"/>
+        <CenterBottom @total="setCpTotal" style="height: 370px;"/>
       </ItemWrap>
     </div>
     <div class="contetn_right">
@@ -79,7 +79,9 @@ export default {
   },
   data () {
     return {
-      curTab: 1
+      curTab: 1,
+      jmsTotal: 0,
+      cpTotal: 0
     }
   },
   filters: {
@@ -97,6 +99,12 @@ export default {
     toPage () {
       this.$router.push({ name: 'realTimeSalesReport' })
     },
+    setJmsTotal (val) {
+      this.jmsTotal = val
+    },
+    setCpTotal (val) {
+      this.cpTotal = val
+    },
     nextFocus (e) {
       console.log(e)
       this.curTab = e

+ 23 - 24
src/views/bigScreen/fPanalysisReport/left-bottom.vue

@@ -12,6 +12,7 @@
 </template>
 
 <script>
+import { countProvinceDealerQty } from '@/api/bigScreen'
 export default {
   data () {
     return {
@@ -51,30 +52,28 @@ 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 = []
-      //     this.$Message({
-      //       text: res.msg,
-      //       type: 'warning'
-      //     })
-      //   }
-      // })
+      countProvinceDealerQty({}).then(res => {
+        if (!this.timer) {
+          console.log('加盟商分布', res)
+        }
+        if (res.status == 200) {
+          const ret = []
+          res.data.map(item => {
+            ret.push({
+              name: item.provinceName,
+              value: item.dealerQty
+            })
+          })
+          this.config = {
+            ...this.config,
+            data: ret
+          }
+          this.switper()
+        } else {
+          this.pageflag = false
+          this.srcList = []
+        }
+      })
     }
   }
 }

+ 33 - 97
src/views/bigScreen/fPanalysisReport/left-top.vue

@@ -13,16 +13,12 @@
 </template>
 
 <script>
+import { countSubareaDealerQty } from '@/api/bigScreen'
 export default {
   data () {
     return {
       options: {},
-      countUserNumData: {
-        lockNum: 0,
-        onlineNum: 0,
-        offlineNum: 0,
-        totalNum: 0
-      },
+      listData: [],
       pageflag: true,
       timer: null
     }
@@ -43,26 +39,33 @@ export default {
       }
     },
     getData () {
-      this.countUserNumData = { 'offlineNum': 1786, 'lockNum': 647, 'totalNum': 2218, 'onlineNum': -215 }
-      this.$nextTick(() => {
-        this.init()
+      this.listData = []
+      countSubareaDealerQty().then(res => {
+        // 只打印一次
+        if (!this.timer) {
+          console.log('加盟商总数量', res)
+        }
+        if (res.status == 200) {
+          let totalQty = 0
+          res.data.map(item => {
+            if (item.subareaName != 'totalQty') {
+              this.listData.push({
+                value: item.dealerQty,
+                name: item.subareaName
+              })
+            } else {
+              totalQty = item.dealerQty
+            }
+          })
+          this.$emit('total', totalQty)
+          this.$nextTick(() => {
+            this.init()
+            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 () {
@@ -72,6 +75,7 @@ export default {
       const looper = (a) => {
         this.getData()
       }
+      console.log(this.$store.state.setting)
       this.timer = setInterval(looper, this.$store.state.setting.echartsAutoTime)
       const myChart = this.$refs.charts.chart
       myChart.on('mouseover', params => {
@@ -82,8 +86,6 @@ export default {
       })
     },
     init () {
-      const total = this.countUserNumData.totalNum
-      const colors = ['#ECA444', '#33A1DB', '#56B557']
       const piedata = {
         name: '加盟商数量',
         type: 'pie',
@@ -94,52 +96,7 @@ 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]
-            }
-          },
-		  {
-		    value: this.countUserNumData.lockNum,
-		    name: 'E区',
-		    label: {
-		      shadowColor: colors[0]
-		    }
-		  },
-		  {
-		    value: this.countUserNumData.onlineNum,
-		    name: '西部区',
-		    label: {
-		      shadowColor: colors[2]
-		    }
-		  },
-		  {
-		    value: this.countUserNumData.offlineNum,
-		    name: '东部区',
-		    label: {
-		      shadowColor: colors[1]
-		    }
-		  }
-        ]
+        data: this.listData
       }
       this.options = {
         tooltip: {
@@ -162,7 +119,7 @@ export default {
             tooltip: { show: true },
             label: {
               formatter: '   {b|{b}}   \n   {c|{c}个}   {per|{d}%}  ',
-              //   position: "outside",
+              position: 'outside',
               rich: {
                 b: {
                   color: '#fff',
@@ -180,34 +137,13 @@ export default {
               }
             },
             labelLine: {
-              length: 20, // 第一段线 长度
-              length2: 36, // 第二段线 长度
+              length: 40, // 第一段线 长度
+              length2: 10, // 第二段线 长度
               show: true
-
             },
             emphasis: {
               show: true
             }
-          },
-          {
-            ...piedata,
-            tooltip: { show: true },
-            itemStyle: {},
-            label: {
-              backgroundColor: 'inherit', // 圆点颜色,auto:映射的系列色
-              height: 0,
-              width: 0,
-              lineHeight: 0,
-              borderRadius: 2.5,
-              shadowBlur: 8,
-              shadowColor: 'auto',
-              padding: [2.5, -2.5, 2.5, -2.5]
-            },
-            labelLine: {
-              length: 20, // 第一段线 长度
-              length2: 36, // 第二段线 长度
-              show: false
-            }
           }
         ]
       }

+ 1 - 1
src/views/bigScreen/fPanalysisReport/right-bottom.vue

@@ -64,7 +64,7 @@ export default {
   data () {
     return {
       list: [],
-      pageflag: true
+      pageflag: false
     }
   },
   created () {

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

@@ -7,7 +7,7 @@
 -->
 <template>
   <div class="centermap">
-    <div class="mapwrap">
+    <div class="mapwrap" v-if="pageflag">
       <dv-border-box-12>
         <div class="quanguo" @click="getData('china')" v-if="code !== 'china'">
           返回
@@ -16,6 +16,7 @@
         <Echart id="CenterMap" :options="options" ref="CenterMap" />
       </dv-border-box-12>
     </div>
+    <Reacquire v-else @onclick="getData('china')" style="line-height:200px" />
   </div>
 </template>
 
@@ -29,7 +30,8 @@ export default {
       options: {},
       code: 'china', // china 代表中国 其他地市是行政编码
       echartBindClick: false,
-      isSouthChinaSea: false // 是否要展示南海群岛  修改此值请刷新页面
+      isSouthChinaSea: false, // 是否要展示南海群岛  修改此值请刷新页面
+      pageflag: true
     }
   },
   created () {},
@@ -42,6 +44,7 @@ export default {
     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) {

+ 2 - 2
vue.config.js

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