Merge branch 'feature/pengyouhao_dapin' into pengyouhao_dev

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

@@ -1,37 +1,80 @@
 <template>
-  <moduleEnclosure title="近30日辅配件统计">
-    <div class="heat-lay">
-    </div>
-  </moduleEnclosure>
+	<moduleEnclosure title="近30日辅配件统计">
+		<div class="heat-lay">
+			<div class="mode">
+				<div class="title">辅材销售</div>
+				<div class="num">12342</div>
+			</div>
+			<div class="mode">
+				<div class="title">辅材退货</div>
+				<div class="num">12342</div>
+			</div>
+			<div class="mode">
+				<div class="title">配件销售</div>
+				<div class="num">12342</div>
+			</div>
+			<div class="mode">
+				<div class="title">配件退货</div>
+				<div class="num">12342</div>
+			</div>
+			<div class="mode">
+				<div class="title">新件待返还</div>
+				<div class="num">12342</div>
+			</div>
+			<div class="mode">
+				<div class="title">旧件待返还</div>
+				<div class="num">12342</div>
+			</div>
+			<div class="mode">
+				<div class="title">旧件待返厂</div>
+				<div class="num">12342</div>
+			</div>
+		</div>
+	</moduleEnclosure>
 </template>
 
 <script>
-import moduleEnclosure from '@/components/moduleEnclosure.vue';
-export default {
-  components: {
-    moduleEnclosure,
-  },
-  data() {
-    return {
-      
-    };
-  },
-  mounted() {
+	import moduleEnclosure from '@/components/moduleEnclosure.vue';
+	export default {
+		components: {
+			moduleEnclosure,
+		},
+		data() {
+			return {
 
-  },
-  beforeUnmount() {
+			};
+		},
+		mounted() {
 
-  },
-  methods: {
+		},
+		beforeUnmount() {
 
-  },
-};
+		},
+		methods: {
+
+		},
+	};
 </script>
 
 <style scoped lang="scss">
-.heat-lay {
-  width: 100%;
-  height: 100%;
- 
-}
-</style>
+	.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;
+			}
+		}
+	}
+</style>

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

@@ -1,232 +1,288 @@
 <template>
-  <moduleEnclosure title="近30天累计工单统计">
-    <div id="main4" style="width: 100%; height: 100%"></div>
-  </moduleEnclosure>
+	<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>
+		</div>
+	</moduleEnclosure>
 </template>
 
 <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;
-export default {
-  components: {
-    moduleEnclosure,
-  },
-  data() {
-    return {
-      myChart: null,
-    };
-  },
-  mounted() {
-    this.timeId = getQuery9((res) => {
-      this.eac(res.data);
-    }, 60000);
-  },
-  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);
-    },
-  },
-};
+	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;
+	export default {
+		components: {
+			moduleEnclosure,
+		},
+		data() {
+			return {
+				myChart: null,
+			};
+		},
+		mounted() {
+			this.timeId = getQuery9((res) => {
+				this.eac(res.data);
+			}, 60000);
+		},
+		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);
+			},
+		},
+	};
 </script>
 
-<style></style>
+<style scoped lang="scss">
+	#main4 {
+		display: flex;
+		padding-top: 20px;
+		.mode {
+			line-height: 34px;
+			.title {
+				font-size: 18px;
+				color: #1a8dc8;
+			}
+
+			.text {
+				color: #ffffff;
+				
+			}
+
+			.up {
+				color: #e4f824;
+			}
+
+			.down {
+				color: #c81637;
+			}
+		}
+		.mode1{
+			width: 40%;
+		}
+		.mode2{
+			width: 40%;
+		}
+		.mode3{
+			width: 20%;
+		}
+	}
+</style>

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

@@ -1,6 +1,14 @@
 <template>
   <moduleEnclosure title="近30天工单趋势">
-    <div id="main2" style="width: 100%; height: 100%"></div>
+	  <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>
+	  </template>
+		
+    <div id="main2" style="width: 100%; height: 100%">
+			
+	</div>
   </moduleEnclosure>
 </template>
 
@@ -16,6 +24,8 @@ export default {
   },
   data() {
     return {
+		tabs: ['安装','维修','回收'],
+		tabIndex: 0,
       myChart2: null,
     };
   },
@@ -227,4 +237,26 @@ export default {
 };
 </script>
 
-<style></style>
+<style scoped lang="scss">
+	.tabbar{
+		display: flex;
+		.tab{
+			width: 50px;
+			color: #ffffff;
+			border: 1px solid #254280;
+			font-size: 12px;
+			font-weight: bold;
+			padding: 2px 0;
+			margin-right: 14px;
+			text-align: center;
+			cursor: pointer;
+		}
+		.active{
+			border: 1px solid #153781;
+			color: #1a8dc8;
+		}
+	}
+	#main2{
+		
+	}
+</style>

src/views/bigViews/dataView1/index.vue

@@ -5,17 +5,17 @@
         <zj-page-container direction="row">
           <div style="width: 26%">
             <zj-page-container>
-              <div class="module-inner-margin h47">
+              <div class="module-inner-margin" style="height: 28%">
                 <!-- 辅配件统计 -->
                 <accessoryStatistics />
               </div>
-              <div class="module-inner-margin h53">
+              <div class="module-inner-margin" style="height: 38%">
                 <!-- 工单统计 -->
                 <workOrderStatistics />
               </div>
               <div
                 class="module-inner-margin"
-                style="min-height: 30.32%; height: 30.32%"
+                style="min-height: 30.32%; height: 44.32%"
               >
                 <!-- 工单趋势 -->
                 <workOrderTrend />