no message

src/api/bigView.js

@@ -0,0 +1,37 @@
+import request, { postBlob, getBlob, handleImport } from '@/utils/request'
+
+// 辅配件统计
+export function getMaterialStats(params) {
+  return request({
+    url: '/big/getLarge4',
+    method: 'post',
+    params
+  })
+}
+
+// 工单统计
+export function getWorkorderStats(params) {
+  return request({
+    url: '/big/getLarge5',
+    method: 'post',
+    params
+  })
+}
+
+// 订单统计
+export function getOrderStats(params) {
+  return request({
+    url: '/big/getLarge7',
+    method: 'post',
+    params
+  })
+}
+
+// 订单金额趋势
+export function getOrderAmountTrend(params) {
+  return request({
+    url: '/big/getLarge8',
+    method: 'post',
+    params
+  })
+}

src/views/bigViews/dataView1/components/accessoryStatistics.vue

@@ -1,33 +1,33 @@
 <template>
 	<moduleEnclosure title="近30日辅配件统计">
-		<div class="heat-lay">
-			<div class="mode">
+		<div class="all-container">
+			<div class="item">
 				<div class="title">辅材销售</div>
-				<div class="num">12342</div>
+				<div class="num">{{statsData.fcxs || 0}}单</div>
 			</div>
-			<div class="mode">
+			<div class="item">
 				<div class="title">辅材退货</div>
-				<div class="num">12342</div>
+				<div class="num">{{statsData.fcth || 0}}单</div>
 			</div>
-			<div class="mode">
+			<div class="item">
 				<div class="title">配件销售</div>
-				<div class="num">12342</div>
+				<div class="num">{{statsData.pjxs || 0}}单</div>
 			</div>
-			<div class="mode">
+			<div class="item">
 				<div class="title">配件退货</div>
-				<div class="num">12342</div>
+				<div class="num">{{statsData.pjth || 0}}单</div>
 			</div>
-			<div class="mode">
+			<div class="item">
 				<div class="title">新件待返还</div>
-				<div class="num">12342</div>
+				<div class="num">{{statsData.xjdfh || 0}}件</div>
 			</div>
-			<div class="mode">
+			<div class="item">
 				<div class="title">旧件待返还</div>
-				<div class="num">12342</div>
+				<div class="num">{{statsData.jjdfh || 0}}件</div>
 			</div>
-			<div class="mode">
+			<div class="item">
 				<div class="title">旧件待返厂</div>
-				<div class="num">12342</div>
+				<div class="num">{{statsData.jjdfc || 0}}件</div>
 			</div>
 		</div>
 	</moduleEnclosure>
@@ -35,46 +35,58 @@
 
 <script>
 	import moduleEnclosure from '@/components/moduleEnclosure.vue';
+	import { getMaterialStats } from '@/api/bigView.js';
+
 	export default {
 		components: {
 			moduleEnclosure,
 		},
+		
 		data() {
 			return {
-
+				statsData: {},
 			};
 		},
-		mounted() {
 
+		mounted() {
+			this.getData();
 		},
+
 		beforeUnmount() {
 
 		},
-		methods: {
 
+		methods: {
+			getData() {
+				getMaterialStats().then(res => {
+					this.statsData = res.data;
+				})
+			},
 		},
 	};
 </script>
 
 <style scoped lang="scss">
-	.heat-lay {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		flex-wrap: wrap;
-		padding-top: 20px;
-		.mode {
-			width: 25%;
-			.title {
-				font-size: 16px;
-				color: #ffffff;
-				margin-bottom: 10px;
-			}
-			.num {
-				color: #33a8c9;
-				font-size: 22px;
-				font-weight: bold;
-			}
+.all-container {
+	width: 100%;
+	height: 100%;
+	padding-top: 12px;
+	box-sizing: border-box;
+	display: flex;
+	flex-wrap: wrap;
+	.item {
+		width: 25%;
+		height: 50%;
+		.title {
+			font-size: 14px;
+			color: #ffffff;
+			margin-bottom: 8px;
+		}
+		.num {
+			color: #33a8c9;
+			font-size: 18px;
+			font-weight: bold;
 		}
 	}
+}
 </style>

src/views/bigViews/dataView1/components/orderAmountTrend.vue

@@ -9,24 +9,38 @@
 <script>
 import * as echarts from 'echarts';
 import moduleEnclosure from '@/components/moduleEnclosure.vue';
-import { getQuery13, getQuery14 } from '@/api/bigView.js';
-var timeling = 5000;
+import { getOrderAmountTrend } from '@/api/bigView.js';
+
 export default {
   components: {
     moduleEnclosure,
   },
+
   data() {
     return {
-     
+      
     };
   },
-  mounted() {
+
+  async mounted() {
+    const data = await this.getData();
+
     this.initEcharts();
   },
+
   beforeUnmount() {
     
   },
+
   methods: {
+    getData() {
+      return new Promise((resolve, reject) => {
+        getOrderAmountTrend().then(res => {
+          resolve(res.data);
+        })
+      })
+    },
+
     initEcharts() {
       var chartDom = document.getElementById('orderEcharts2');
       var myChart = echarts.init(chartDom);

src/views/bigViews/dataView1/components/orderStatistics.vue

@@ -1,14 +1,6 @@
 <template>
   <moduleEnclosure title="近30日累计订单统计">
-    <div
-      style="
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        padding-top: 12px;
-        position: relative;
-      "
-    >
+    <div class="all-container">
       <div class="table-container">
         <div class="th row">
           <div>订单类型</div>
@@ -17,23 +9,23 @@
         </div>
         <div class="td row">
           <div>销售订单</div>
-          <div>12345</div>
-          <div>12345</div>
+          <div>{{statsData.sxdds}}</div>
+          <div>{{statsData.sxddje}}</div>
         </div>
         <div class="td row">
           <div>辅材订单</div>
-          <div>12345</div>
-          <div>12345</div>
+          <div>{{statsData.fcdds}}</div>
+          <div>{{statsData.fcddje}}</div>
         </div>
         <div class="td row">
           <div>配件订单</div>
-          <div>12345</div>
-          <div>12345</div>
+          <div>{{statsData.pjdds}}</div>
+          <div>{{statsData.pjddje}}</div>
         </div>
         <div class="td row">
           <div>增值订单</div>
-          <div>12345</div>
-          <div>12345</div>
+          <div>{{statsData.zzdds}}</div>
+          <div>{{statsData.zzddje}}</div>
         </div>
       </div>
     </div>
@@ -41,33 +33,42 @@
 </template>
 
 <script>
-import moduleEnclosure from '@/components/moduleEnclosure.vue';
-import * as echarts from 'echarts';
-import { getQuery8 } from '@/api/bigView.js';
-import { csize } from '@/utils/const.js';
-import bus from '@/utils/eventBus.js';
-export default {
-  components: { moduleEnclosure },
-  data() {
-    return {
-      list: [],
-    };
-  },
-  watch: {
-    
-  },
-  mounted() {
-    
-  },
-  beforeUnmount() {
-    
-  },
-  methods: {
-    
-  },
-};
+  import moduleEnclosure from '@/components/moduleEnclosure.vue';
+	import { getOrderStats } from '@/api/bigView.js';
+  export default {
+    components: { moduleEnclosure },
+
+    data() {
+      return {
+        statsData: {},
+      };
+    },
+
+    mounted() {
+      this.getData();
+    },
+
+    beforeUnmount() {
+      
+    },
+
+    methods: {
+      getData() {
+				getOrderStats().then(res => {
+					this.statsData = res.data;
+				})
+			},
+    },
+  };
 </script>
 <style scoped lang="scss">
+.all-container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding-top: 12px;
+  position: relative;
+}
 .table-container {
   height: 100%;
   display: flex;
@@ -85,6 +86,12 @@ export default {
     div {
       flex: 1;
       font-size: 14px;
+      &:nth-child(2) {
+        text-align: center;
+      }
+      &:nth-child(3) {
+        text-align: right;
+      }
     }
   }
 }

src/views/bigViews/dataView1/components/workOrderStatistics.vue

@@ -1,29 +1,37 @@
 <template>
 	<moduleEnclosure title="近30天累计工单统计">
-		<div id="main4" style="width: 100%; height: 100%">
-			<div class="mode mode1">
-				<div class="title">工单类型</div>
-				<div class="text">累计安装台数</div>
-				<div class="text">累计维修台数</div>
-				<div class="text">累计清洗台数</div>
-				<div class="text">增值服务工单</div>
-				<div class="text">维修工程工单</div>
-			</div>
-			<div class="mode mode2">
-				<div class="title">数量</div>
-				<div class="text">123412</div>
-				<div class="text">1225</div>
-				<div class="text">342</div>
-				<div class="text">234234</div>
-				<div class="text">6234</div>
-			</div>
-			<div class="mode mode3">
-				<div class="title">占比</div>
-				<div class="up">12%<i class="el-icon-top"></i></div>
-				<div class="up">45%<i class="el-icon-top"></i></div>
-				<div class="down">11%<i class="el-icon-bottom"></i></div>
-				<div class="up">20%<i class="el-icon-top"></i></div>
-				<div class="down">12%<i class="el-icon-bottom"></i></div>
+		<div class="all-container">
+			<div class="table-container">
+        <div class="th row">
+          <div>订单类型</div>
+          <div>数量</div>
+          <div>占比</div>
+        </div>
+        <div class="td row">
+          <div>累计安装台数</div>
+          <div>{{statsData.azgd || 0}}</div>
+          <div>{{statsData.azgdzb || 0}}%</div>
+        </div>
+				<div class="td row">
+          <div>累计维修台数</div>
+          <div>{{statsData.wxgd || 0}}</div>
+          <div>{{statsData.wxgdzb || 0}}%</div>
+        </div>
+				<div class="td row">
+          <div>累计清洗台数</div>
+          <div>{{statsData.qxgd || 0}}</div>
+          <div>{{statsData.qxgdzb || 0}}%</div>
+        </div>
+				<div class="td row">
+          <div>增值服务工单</div>
+          <div>{{statsData.zzgd || 0}}</div>
+          <div>{{statsData.zzgdzb || 0}}%</div>
+        </div>
+				<div class="td row">
+          <div>维保工程工单</div>
+          <div>{{statsData.wbgd || 0}}</div>
+          <div>{{statsData.wbgdzb || 0}}%</div>
+        </div>
 			</div>
 		</div>
 	</moduleEnclosure>
@@ -31,258 +39,71 @@
 
 <script>
 	import moduleEnclosure from '@/components/moduleEnclosure.vue';
-	import * as echarts from 'echarts';
-	import {
-		getQuery9
-	} from '@/api/bigView.js';
-	import {
-		csize
-	} from '@/utils/const.js';
-	let myChart1;
+	import { getWorkorderStats } from '@/api/bigView.js';
+
 	export default {
 		components: {
 			moduleEnclosure,
 		},
 		data() {
 			return {
-				myChart: null,
+				statsData: {},
 			};
 		},
+
 		mounted() {
-			this.timeId = getQuery9((res) => {
-				this.eac(res.data);
-			}, 60000);
+			this.getData();
 		},
+
 		beforeUnmount() {
-			this.timeId();
+			
 		},
+
 		methods: {
-			eac(value) {
-				var names = [];
-				var fz = 2000;
-				var values1 = [...value].sort((a, b) => {
-					return b.cut - a.cut;
-				});
-				var values2 = [...value].sort((a, b) => {
-					return b.machine_num - a.machine_num;
-				});
-				for (var i = 0; i < 4; i++) {
-					var name1 = values1[i].sales_type;
-					var name2 = values2[i].sales_type;
-					if (!~names.indexOf(name1)) {
-						names.push(name1);
-					}
-					if (!~names.indexOf(name2)) {
-						names.push(name2);
-					}
-				}
-				var obj = {
-					sales_type: '其他',
-					cut: 0,
-					machine_num: 0,
-				};
-				var list = value.filter((item) => {
-					if (
-						~names.indexOf(item.sales_type) ||
-						item.cut > fz ||
-						item.machine_num > fz
-					) {
-						return true;
-					} else {
-						obj.cut += item.cut;
-						obj.machine_num += item.machine_num;
-						return false;
-					}
-				});
-				list.push(obj);
-				var dataAxis = list.map((item) => item.sales_type);
-				var data1 = list.map((item) => item.cut);
-				var data2 = list.map((item) => item.machine_num);
-				var option = {
-					tooltip: {
-						trigger: 'axis',
-						formatter: function(params) {
-							var res = '新增工单' + ' : ' + params[0].value + '<br/>';
-							res += '设备总量' + ' : ' + params[1].value + '<br/>';
-							return `<div style="color:#fff;"><div>${params[0].name}</div>${res}</div>`;
-						},
-						transitionDuration: 0,
-						backgroundColor: '#092a66',
-						borderColor: '#0462b5',
-						borderRadius: 8,
-						borderWidth: 2,
-						padding: [5, 10],
-						axisPointer: {
-							type: 'line',
-							lineStyle: {
-								type: 'dashed',
-								color: '#8AB1DC',
-							},
-						},
-					},
-					title: {
-						text: '',
-						subtext: '',
-					},
-					legend: {
-						icon: 'circle',
-						itemWidth: 8,
-						itemHeight: 8,
-						itemGap: 10,
-						top: '16',
-						right: '10',
-						data: ['新增工单', '设备总量'],
-						textStyle: {
-							fontSize: csize(16),
-							color: '#8AB1DC',
-						},
-					},
-					grid: {
-						x: csize(65),
-						y: csize(50),
-						x2: csize(30),
-						y2: csize(30),
-					},
-					xAxis: {
-						data: dataAxis,
-						axisLabel: {
-							/*inside: true,*/
-							interval: 0,
-							textStyle: {
-								fontSize: csize(16),
-							},
-						},
-						axisTick: {
-							show: false,
-						},
-						axisLine: {
-							show: false,
-							symbol: ['none', 'arrow'],
-							symbolOffset: 12,
-							lineStyle: {
-								fontSize: csize(12),
-								color: '#8AB1DC',
-							},
-						},
-					},
-					yAxis: [{
-						type: 'value',
-						name: '单',
-						nameTextStyle: {
-							fontSize: csize(16),
-						},
-						axisLine: {
-							show: false,
-							lineStyle: {
-								color: '#8AB1DC',
-							},
-						},
-						axisLabel: {
-							margin: 10,
-							textStyle: {
-								fontSize: csize(12),
-							},
-						},
-						splitLine: {
-							lineStyle: {
-								color: '#364D95',
-							},
-						},
-						axisTick: {
-							show: false,
-						},
-					}, ],
-					dataZoom: [{
-						type: 'inside',
-					}, ],
-					series: [{
-							name: '新增工单',
-							type: 'bar',
-							barGap: 0.2,
-							barWidth: 8,
-							itemStyle: {
-								normal: {
-									show: true,
-									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-											offset: 0,
-											color: '#35d4cb',
-										},
-										{
-											offset: 1,
-											color: '#3cf8ed',
-										},
-									]),
-									barBorderRadius: 10,
-								},
-							},
-							data: data1,
-						},
-						{
-							name: '设备总量',
-							type: 'bar',
-							barGap: 0.2,
-							barWidth: 8,
-							itemStyle: {
-								normal: {
-									show: true,
-									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
-											offset: 0,
-											color: '#3077bd',
-										},
-										{
-											offset: 1,
-											color: '#3d99fd',
-										},
-									]),
-									barBorderRadius: 10,
-								},
-							},
-							data: data2,
-						},
-					],
-				};
-				if (myChart1) {
-					myChart1.dispose();
-				}
-				myChart1 = new echarts.init(document.getElementById('main4'));
-				myChart1.setOption(option);
+			getData() {
+				getWorkorderStats().then(res => {
+					this.statsData = res.data;
+				})
 			},
 		},
 	};
 </script>
 
 <style scoped lang="scss">
-	#main4 {
-		display: flex;
-		padding-top: 20px;
-		.mode {
-			line-height: 34px;
-			.title {
-				font-size: 18px;
-				color: #1a8dc8;
-			}
-
-			.text {
-				color: #ffffff;
-				
-			}
-
-			.up {
+.all-container {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding-top: 12px;
+  position: relative;
+}
+.table-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .row {
+    display: flex;
+    &.th {
+      font-weight: bold;
+      color: #26A3CE;
+    }
+    &.td {
+      color: #ffffff;
+			div:last-child {
 				color: #e4f824;
 			}
-
-			.down {
-				color: #c81637;
-			}
-		}
-		.mode1{
-			width: 40%;
-		}
-		.mode2{
-			width: 40%;
-		}
-		.mode3{
-			width: 20%;
-		}
-	}
+    }
+    div {
+      flex: 1;
+      font-size: 14px;
+      &:nth-child(2) {
+        text-align: center;
+      }
+      &:nth-child(3) {
+        text-align: right;
+      }
+    }
+  }
+}
 </style>

src/views/bigViews/dataView1/components/workOrderTrend.vue

@@ -2,13 +2,18 @@
   <moduleEnclosure title="近30天工单趋势">
 	  <template v-slot:rightce>
 	    <div class="tabbar">
-	    	<div :class="tabIndex == index?'tab active':'tab'" v-for="(item,index) in tabs" :key="index" @click="tabIndex = index">{{item}}</div>
+	    	<div
+          class="tab"
+          :class="tabIndex == index ? 'active' : ''"
+          v-for="(item,index) in tabList"
+          :key="index"
+          @click="tabIndex = index">
+          {{item}}
+        </div>
 	    </div>
 	  </template>
 		
-    <div id="main2" style="width: 100%; height: 100%">
-			
-	</div>
+    <div id="main2" style="width: 100%; height: 100%"></div>
   </moduleEnclosure>
 </template>
 
@@ -24,8 +29,8 @@ export default {
   },
   data() {
     return {
-		tabs: ['安装','维修','回收'],
-		tabIndex: 0,
+      tabList: ['安装', '维修', '回收'],
+      tabIndex: 0,
       myChart2: null,
     };
   },
@@ -250,6 +255,9 @@ export default {
 			margin-right: 14px;
 			text-align: center;
 			cursor: pointer;
+      &:last-child {
+        margin-right: 0;
+      }
 		}
 		.active{
 			border: 1px solid #153781;

src/views/bigViews/dataView1/index.vue

@@ -34,15 +34,15 @@
           </div>
           <div style="width: 26%">
             <zj-page-container>
-              <div class="module-inner-margin h47">
+              <div class="module-inner-margin" style="height: 28%">
                 <orderStatistics />
               </div>
-              <div class="module-inner-margin h53">
+              <div class="module-inner-margin" style="height: 38%">
                 <orderTrend />
               </div>
               <div
                 class="module-inner-margin"
-                style="min-height: 30.32%; height: 30.32%"
+                style="min-height: 30.32%; height: 44.32%"
               >
                 <orderAmountTrend />
               </div>