Pārlūkot izejas kodu

完成前端页面统计数据bug

oyq28 2 gadi atpakaļ
vecāks
revīzija
0a3f093188

+ 11 - 0
imcs-bt-fe/imcs-bt-fe/imcs-ui/src/api/Member.js

@@ -9,6 +9,10 @@ const apiList = {
     method: 'POST',
     url: `/authority/member/query`,
   },
+  getStatisticMap: {
+    method: 'GET',
+    url: `/authority/member/memberStatistics`,
+  },
   update: {
     method: 'PUT',
     url: `/authority/member`
@@ -50,6 +54,13 @@ export default {
       custom
     })
   },
+  getStatisticMap (data, custom = {}) {
+    return axiosApi({
+      ...apiList.getStatisticMap,
+      data,
+      custom
+    })
+  },
   save (data, custom = {}) {
     return axiosApi({
       ...apiList.save,

+ 20 - 4
imcs-bt-fe/imcs-bt-fe/imcs-ui/src/api/Order.js

@@ -10,8 +10,14 @@ const apiList = {
     method: 'GET',
     url: `/authority/order/getOrderDetail`,
   },
-
-
+  getStatisticMap: {
+    method: 'GET',
+    url: `/authority/order/orderStatistics`,
+  },
+  orderBarData: {
+    method: 'GET',
+    url: `/authority/order/orderBarData`,
+  },
   query: {
     method: 'POST',
     url: `/authority/order/query`,
@@ -58,8 +64,18 @@ export default {
     })
   },
 
-
-
+  getStatisticMap (data) {
+    return axiosApi({
+      ...apiList.getStatisticMap,
+      data,
+    })
+  },
+  orderBarData (data) {
+    return axiosApi({
+      ...apiList.orderBarData,
+      data,
+    })
+  },
   query (data, custom = {}) {
     return axiosApi({
       ...apiList.query,

+ 10 - 3
imcs-bt-fe/imcs-bt-fe/imcs-ui/src/api/goods/Goods.js

@@ -11,7 +11,10 @@ const apiList = {
     method: 'POST',
     url: `/authority/spe/updatePfgStatus`
   },
-
+  indexTable: {
+    method: 'GET',
+    url: `/authority/goods/indexTable`
+  },
   page: {
     method: 'POST',
     url: `/authority/goods/page`
@@ -109,7 +112,6 @@ export default {
     })
   },
 
-
   page(data) {
     return axiosApi({
       ...apiList.page,
@@ -117,7 +119,12 @@ export default {
     })
   },
 
-
+  indexTable(data) {
+    return axiosApi({
+      ...apiList.indexTable,
+      data
+    })
+  },
   selectEgPage(data) {
     return axiosApi({
       ...apiList.selectEgPage,

+ 23 - 5
imcs-bt-fe/imcs-bt-fe/imcs-ui/src/views/dashboard/components/LineChart.vue

@@ -9,6 +9,10 @@ import resize from './mixins/resize'
 export default {
   mixins: [resize],
   props: {
+    barData: {
+  		type: Array,
+  		default: ()=>[]
+  	},
     className: {
       type: String,
       default: 'chart'
@@ -31,6 +35,20 @@ export default {
       chart: null
     }
   },
+  watch: {
+      // 监听,路由传参数变化
+      barData: {
+	      deep: true,
+	      immediate: false,
+	      handler() {
+	        // 更新页面数据
+	        this.initChart();
+	      }
+	    },
+      filterText(val) {
+        this.$refs.tree.filter(val);
+      }
+  },
   mounted() {
     this.initChart()
   },
@@ -42,7 +60,7 @@ export default {
     this.chart = null
   },
   methods: {
-    initChart() {
+    initChart() {      
       this.chart = echarts.init(document.getElementById(this.id))
 
       this.chart.setOption({
@@ -93,11 +111,11 @@ export default {
               color: '#57617B'
             }
           },
-          data: ['00:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00'],
+          data: this.barData[0].xData,
         }],
         yAxis: [{
           type: 'value',
-          name: '(%)',
+          name: '',
           axisTick: {
             show: false
           },
@@ -151,7 +169,7 @@ export default {
 
             }
           },
-          data: [79, 152, 200, 334, 390, 330, 220, 145, 67, 432, 123, 100]
+          data: this.barData[0].yData
         }, {
           name: '销售销量',
           type: 'line',
@@ -185,7 +203,7 @@ export default {
 
             }
           },
-          data: [68, 146, 215, 308, 350, 320, 240, 148, 88, 401, 136, 90]
+          data: this.barData[1].yData
         }]
       })
     }

+ 171 - 52
imcs-bt-fe/imcs-bt-fe/imcs-ui/src/views/dashboard/index.vue

@@ -7,20 +7,23 @@
         <div class="blockDiv blockBg1">
 		  <p>在线设备</p>
           <h1>
-          	<countTo :duration="3000" :end-val="15" :start-val="0"/>
+          	<countTo :duration="3000" :end-val="indexCount.deviceCount.onlineCount" :start-val="0"/>
           	<span class="danweiSpan">{{$t("common.individual")}}</span>
-          </h1>
+          </h1>		   
 		   <h2 class="num">
-				<span><countTo :duration="3000" :end-val="25" :start-val="0"/></span>
-				<span><countTo :duration="3000" :end-val="2" :start-val="0"/></span>
-				<span><countTo :duration="3000" :end-val="3" :start-val="0"/></span>
-				<span><countTo :duration="3000" :end-val="3" :start-val="0"/></span>
+				<span><countTo :duration="3000" :end-val="indexCount.deviceCount.totalCount" :start-val="0"/></span>
+				<span><countTo :duration="3000" :end-val="indexCount.deviceCount.offlineCount" :start-val="0"/></span>
+				<span><countTo :duration="3000" :end-val="indexCount.deviceCount.exceptCount" :start-val="0"/></span>
+				
            </h2>
            <h3 class="col">
 				<span>总设备</span>
+				<span>离线设备</span>
 				<span>故障设备</span>
+				<!--
 				<span>人工下线</span>
 				<span>待补货</span>
+				-->
            </h3>
         </div>
       </el-col>
@@ -28,16 +31,14 @@
       <el-col :xs="24" :sm="12" :lg="8">
          <div class="blockDiv blockBg3">
 		  <p>今日销售额</p>
-          <h1>¥<countTo :duration="3000" :end-val="1534" :start-val="0"/><span class="danweiSpan">元</span></h1>
-          <h2>
-				<span style="width:30%;">¥<countTo :duration="3000" :end-val="2568" :start-val="0"/></span>
-				<span style="width:30%;">¥<countTo :duration="3000" :end-val="13246" :start-val="0"/></span>
-				<span style="width:30%;">¥<countTo :duration="3000" :end-val="53261" :start-val="0"/></span>
+          <h1>¥<countTo :duration="3000" :end-val="indexCount.amountCount.todayAmount" :start-val="0"/><span class="danweiSpan">元</span></h1>          
+		   <h2>
+				<span style="width:30%;">¥<countTo :duration="3000" :end-val="indexCount.amountCount.yesterdayAmount" :start-val="0"/></span>
+				<span style="width:30%;">¥<countTo :duration="3000" :end-val="indexCount.amountCount.sevenAmount" :start-val="0"/></span>				
            </h2>
            <h3 class="col">
 				<span>昨日收入</span>
-				<span>本周收入</span>
-				<span>本月收入</span>
+				<span>近七天收入</span>				
            </h3>
         </div>
       </el-col>
@@ -45,17 +46,15 @@
       <el-col :xs="24" :sm="12" :lg="8">
          <div class="blockDiv blockBg4">
 		  <p>今日新增会员</p>
-          <h1><countTo :duration="3000" :end-val="8" :start-val="0"/><span class="danweiSpan">{{$t("common.individual")}}</span></h1>
+          <h1><countTo :duration="3000" :end-val="indexCount.memberCount.todayCount" :start-val="0"/><span class="danweiSpan">{{$t("common.individual")}}</span></h1>
           <h2>
-				<span style="margin:0 12px;"><countTo :duration="3000" :end-val="6" :start-val="0"/></span>
-				<span style="margin:0 12px;"><countTo :duration="3000" :end-val="500" :start-val="0"/></span>
-				<span style="margin:0 12px;"><countTo :duration="3000" :end-val="900" :start-val="0"/></span>
-				<span style="margin:0 12px;"><countTo :duration="3000" :end-val="89098" :start-val="0"/></span>
+				<span style="margin:0 12px;"><countTo :duration="3000" :end-val="indexCount.memberCount.yesterdayCount" :start-val="0"/></span>
+				<span style="margin:0 12px;"><countTo :duration="3000" :end-val="indexCount.memberCount.sevenCount" :start-val="0"/></span>				
+				<span style="margin:0 12px;"><countTo :duration="3000" :end-val="indexCount.memberCount.totalCount" :start-val="0"/></span>
            </h2>
            <h3>
 				<span>昨日新增</span>
-				<span>本周新增</span>
-				<span>本月新增</span>
+				<span>本周新增</span>				
 				<span>全部会员</span>
            </h3>
         </div>
@@ -161,7 +160,7 @@
 						      	<a :class="btnActive == '2' ? 'tongjiA activeA' : 'tongjiA'" @click="searchDate('2')">{{ $t("index.dates.week" )}}</a>
 						      	<a :class="btnActive == '3' ? 'tongjiA activeA' : 'tongjiA'" @click="searchDate('3')">{{ $t("index.dates.month" )}}</a>
 						      	<a :class="btnActive == '4' ? 'tongjiA activeA' : 'tongjiA'" @click="searchDate('4')">{{ $t("index.dates.year" )}}</a>
-						      	<span style="margin-left: 40px;">
+						      	<span style="margin-left: 40px;" v-if="btnActive == '3'">
 						    			<el-date-picker
 								        type="daterange"
 								        v-model="timeRange"
@@ -171,7 +170,7 @@
 								        :range-separator='$t("common.separator")'
 								        :start-placeholder='$t("common.startTime")'
 								        :end-placeholder='$t("common.endTime")'
-								        :style="btnActive == '5' ? 'width: 250px;border: 1px solid #1890ff;' : 'width: 250px;'"
+								        style="width:250px;border: 1px solid #1890ff;"
 								        @change="changeDate"
 								      />
 						    		</span>
@@ -189,7 +188,7 @@
 			      <el-col :xs="24" :sm="10" :lg="8">
 			      	<div class="chart-wrapper">
 			      		<!-- 生产资源保养计划倒计时 -->
-			      		<h3>今日销售排行榜</h3>
+			      		<h3>销售排行榜</h3>
 			      		<table border="0" cellspacing="0" cellpadding="9" style="width: 100%;table-layout: fixed;">
 			      			<tr v-for="(item, index) in indexTable" :key="index">
 			      				<td>
@@ -197,7 +196,7 @@
 			      					<span v-else class="indexSpan">{{index+1}}</span>
 			      				</td>
 			      				<td width="60%"><div class="indexTd" :title="item.name">{{item.name}}</div></td>
-			      				<td width="30%"><countTo :duration="4000" :end-val="item.cnt" :start-val="0"/></td>
+			      				<td width="30%"><countTo :duration="4000" :end-val="parseInt(item.cnt)" :start-val="0"/></td>
 			      			</tr>
 			      		</table>
 			      	</div>
@@ -224,6 +223,9 @@
 	// 加载【共通】函数
   import { initQueryParams } from '@/utils/commons'
   import productionResourceApi from "@/api/Productionresource.js"
+  import orderApi from "@/api/Order.js"
+  import goodsApi from "@/api/goods/Goods.js"
+  import memberApi from "@/api/Member.js"
   import {regionData, CodeToText } from 'element-china-area-data'
 
   export default {
@@ -237,6 +239,25 @@
       	// 地图中心点
       	mapCenter: { lng: 121.472644, lat: 31.231706 },
       	BAddress: '',
+		indexCount:{
+			deviceCount:{
+				allCount: 0,
+				onlineCount: 0,
+				offlineCount: 0,
+				exceptCount: 0,
+			},
+			amountCount: {
+			  yesterdayAmount: 0.00,	
+			  todayAmount: 0.00,
+			  sevenAmount: 0.00,
+			},
+            memberCount: {
+               todayCount: 0,
+			   sevenCount: 0,
+			   totalCount: 0,
+			   yesterdayCount: 0
+			}
+		},
         areaIds:{
 			plc_pid:[],
 			plc_cid:[],
@@ -247,10 +268,11 @@
 		plc_pid:"",
 		plc_cid:"",
 		plc_aid:"",
-      	btnActive: "4",
+      	btnActive: "1",
       	timeRange: null,
+		initHour:['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'],
       	topTongjiData: {orderNum: 0, planNum: 0, taskNum: 0, onlineNum: 0, allNum: 0},
-      	indexTable: [{name:"燕麦奶茶",cnt:50},{name:"牛奶奶茶",cnt:40},{name:"咖啡奶茶",cnt:36},{name:"卡布奇诺",cnt:32},{name:"猫屎咖啡",cnt:18},{name:"果汁奶",cnt:12},{name:"蛋奶",cnt:8}],
+      	indexTable: [],
       	loading: false,
 				mapImg: 'map.png',
 				locImg: 'location.png',
@@ -278,34 +300,85 @@
         // 企业用户新增数量统计-数据
       	barData: [{
       		name: '销售金额',
-      		xData: ['00:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00'],
-      		yData: [79, 152, 200, 334, 390, 330, 220, 145, 67, 432, 123, 100]
+      		xData: this.initHour,
+      		//yData: [79, 152, 200, 334, 390, 330, 220, 145, 67, 432, 123, 100]
+			yData: []
       	},{
       		name: '销售销量',
-      		xData: ['00:00', '1:00', '2:00', '3:00', '4:00', '5:00', '6:00', '7:00', '8:00', '9:00', '10:00', '11:00'],
-      		yData: [68, 146, 215, 308, 350, 320, 240, 148, 88, 401, 136, 90]
+      		xData: this.initHour,
+      		//yData: [68, 146, 215, 308, 350, 320, 240, 148, 88, 401, 136, 90]
+			yData: []
       	}]
       }
     },
     created() {
-    	// 查询数据
-      this.searchBarData("4")
+    	// 查询数据      
+      this.searchBarData("1")	
       // 查询企业、产线、生产资源统计
-      this.searchBlock()
+      //this.searchBlock()
       // 查询企业生产资源数量排名   首页404
       // this.searchResourceNum()
       // 查询[登录监控]数据
-      this.getLoginData()
+      //this.getLoginData()
       // 查询【企产线运行时间统计】
       // this.getTaskCountStatistics()
 	  // 查询设备地址
 	  this.getResourceData()
+	  this.getDeviceCount()
+	  this.getAmountSum()
+	  this.getMemberSum()
+	  this.getIndexTable()
+	  
     },
     computed: {
     },
     mounted(){
   	},
     methods: {
+		getIndexTable(){
+            goodsApi.indexTable({}).then(response => {
+				const res = response.data;
+        		let that = this
+				if (res.isSuccess) {
+				   	that.indexTable = res.data	   
+				}
+			}).finally(() => this.loading = false);
+		},
+		getMemberSum(){
+            memberApi.getStatisticMap({}).then(response => {
+				const res = response.data;
+        		let that = this
+				if (res.isSuccess) {
+				   that.indexCount.memberCount.totalCount = parseInt(res.data.totalNum)
+				   that.indexCount.memberCount.sevenCount = parseInt(res.data.sevenNum)
+				   that.indexCount.memberCount.todayCount = parseInt(res.data.todayNum)
+				   that.indexCount.memberCount.yesterdayCount = parseInt(res.data.yesterdayNum)			   
+				}
+			}).finally(() => this.loading = false);
+		},
+	    getAmountSum(){
+            orderApi.getStatisticMap({}).then(response => {
+				const res = response.data;
+        		let that = this
+				if (res.isSuccess) {
+				   that.indexCount.amountCount.sevenAmount = parseFloat(res.data.sevenAmount)
+				   that.indexCount.amountCount.todayAmount = parseFloat(res.data.todayAmount)
+				   that.indexCount.amountCount.yesterdayAmount = parseFloat(res.data.yesterdayAmount)
+				}
+			}).finally(() => this.loading = false);
+		},	
+	   getDeviceCount(){
+		productionResourceApi.equStatistics({}).then(response => {
+        const res = response.data;
+        let that = this
+        if (res.isSuccess) {          
+          that.indexCount.deviceCount.onLineCount = res.data.onLineCount 
+		  that.indexCount.deviceCount.offlineCount = res.data.offlineCount 
+		  that.indexCount.deviceCount.exceptCount = res.data.exceptCount   
+		  that.indexCount.deviceCount.totalCount = res.data.onLineCount + res.data.offlineCount +res.data.exceptCount          
+        }
+      }).finally(() => this.loading = false);
+	  },
 	  getResourceData(){
 		this.loading = true;
 		this.queryParams.size = 100
@@ -369,7 +442,7 @@
       // 【日期期间】值变化-事件
       changeDate(val){
       	// 日期区间,被选中
-      	this.btnActive = "5";
+      	this.btnActive = "3";
       	//console.log("【日期期间】值变化 == ", val)
       	let start = new Date(val[0]);
       	let end = new Date(val[1]);
@@ -384,7 +457,7 @@
       		return false;
       	}
       	// 查询数据
-      	this.searchBarData("date", val);
+      	this.searchBarData("3");
       },
 
       // 【常用功能】点击-事件
@@ -399,26 +472,72 @@
       	}
       },
       // 查询企业新增统计数据-函数
-      searchBarData(flag, val){
+      async searchBarData(flag){
       	let obj = {
-      		type: this.btnActive,
+      		type: parseInt(flag),
       		startTime: this.timeRange ? this.timeRange[0] : undefined,
       		endTime: this.timeRange ? this.timeRange[1] : undefined
       	}
-      	//登陆首页  404  notfound
-      	// indexApi.getTaskCountStatistics(obj).then(res => {
-      	// 	res = res.data;
-      	// 	// console.log("【企产线运行时间统计】数据22122:",res)
-      	// 	if(res.isSuccess){
-      	// 		if(res.data.barData.xData && res.data.barData.xData.length < 10){
-      	// 			this.barData = res.data.barData;
-      	// 			// 防止数据太少,柱子太大,很丑。
-      	// 			this.barData.barWidth = "35px";
-      	// 		}else{
-      	// 			this.barData = res.data.barData;
-      	// 		}
-      	// 	}
-      	// })
+		
+		 let timeLen = 0;
+      	//获取图形数据
+		  let barArr = []
+		  let barArr2 = []
+		  if(flag=="1"){
+				this.barData[0].xData = this.initHour
+				this.barData[1].xData = this.barData[0].xData
+				timeLen = 24				
+		  }else if(flag=="4"){
+			    this.barData[0].xData = [1,2,3,4,5,6,7,8,9,10,11,12]
+			    this.barData[1].xData = this.barData[0].xData
+			    timeLen = 12
+			    
+		 }
+
+      	await orderApi.orderBarData(obj).then(res => {
+      		res = res.data;      
+			let that = this		
+      		if(res.isSuccess){	
+				if(res.data.length>0){
+					if(flag =="2" || flag=="3"){
+						let strDate = res.data[0].strDate						
+						that.barData[0].xData = strDate.split(',')						
+						that.barData[1].xData = that.barData[0].xData
+						timeLen = that.barData[1].xData.length                       
+					}
+					barArr = Array(timeLen).fill().map(()=>{
+						return 0.00;
+					});
+			    	barArr2 = Array(timeLen).fill().map(()=>{
+						return 0;
+					});
+					res.data.forEach(item=>{			
+						if(flag=="1"|| flag=="4"){		
+							barArr[item.xData]= parseFloat(item.orderAmount)
+							barArr2[item.xData]= parseInt(item.orderCount)
+						}else{							
+							let index = that.barData[0].xData.findIndex(e=>{
+                                 return e == item.xData;
+							});							
+							barArr[index]= parseFloat(item.orderAmount)
+							barArr2[index]= parseInt(item.orderCount)
+						}
+					})					
+					that.barData[0].yData = barArr
+					that.barData[1].yData = barArr2					
+				}
+				/*			
+      			if(res.data && res.data.length < 10){					
+      				//this.barData = res.data.barData;
+      				//this.barData.barWidth = "35px";
+      			}else{
+      				this.barData = res.data.barData;
+      			} */
+				//this.barData = res.data.barData;
+				
+      		}
+      	})
+		  console.log(this.barData)
       	/*var arr = []
       	for (let i = 0; i < 12; i++) {
       		arr.push(Math.floor(Math.random()*6000 + 500))