原材料需求差异分析

src/views/plan/workbench/materialAnalysis/chart/commonLineChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="height:250px;width:100%;margin-top: 30px;" />
+  <div style="height:calc(100% - 5px);width:100%;margin-top: 0px;" />
 </template>
 <script>
 import * as echarts from 'echarts'
@@ -43,7 +43,7 @@ export default {
 				if (currentValue && currentValue.SortKeys) {
 					this.xDataArray = currentValue.SortKeys
 				}
-				newValue.PerCustomerDeviationDetailItem.forEach(el => {
+				(newValue.PerCustomerDeviationDetailItem || []).forEach(el => {
 					receivableArray = []
 					this.xDataArray.forEach(elChild => {
 						receivableArray.push(el.Item[elChild])
@@ -72,11 +72,43 @@ export default {
       this.chart = echarts.init(this.$el, 'macarons')
       this.chart.setOption({
         color: ['#126db9'],
+        dataZoom: [
+          {
+            // start: 0,//默认为0
+            // end: 100,//默认为100
+            type: 'slider',
+            show: true,
+            // xAxisIndex: [0],
+            handleSize: 0,//滑动条的 左右2个滑动条的大小
+            startValue: 0, // 初始显示值
+            endValue: 30, // 结束显示值
+            height: 10,//组件高度
+            left: '5%', //左边的距离
+            right: '5%',//右边的距离
+            bottom: 10,//底边的距离
+            borderColor: "#000",
+            fillerColor: '#269cdb',
+            borderRadius: 5,
+            backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
+            showDataShadow: false,//是否显示数据阴影 默认auto
+            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
+            realtime: false, //是否实时更新
+            filterMode: 'filter',
+          },
+          //下面这个属性是里面拖到
+          {
+            type: 'inside',
+            show: true,
+            // xAxisIndex: [0],
+            start: 1,//默认为1
+            end: 10,//默认为100
+          },
+        ],
         grid: {
           top: '10%',
           left: '5%',
-          right: '15%',
-          bottom: '0%',
+          right: '5%',
+          bottom: '15%',
           containLabel: true
         },
         xAxis: {

src/views/plan/workbench/materialAnalysis/chart/index.vue

@@ -1,6 +1,5 @@
 <template>
 	<div class="chart-analysis-container">
-		
 		<div class="chart-normal-wrap">
 			<div class="chart-info clearfix">
 				<div class="fl">原材料：</div>
@@ -14,11 +13,11 @@
 				@download="download"
 			/>
 		</div>
-		<div class="chart-bottom-wrap clearfix">
-			<div class="chart-bottom-left fl">
+		<div class="chart-bottom-wrap">
+			<div class="chart-bottom-top">
 				<CommonLineChart :dataList="dataList" />
 			</div>
-			<div class="chart-bottom-right fl">
+			<div class="chart-bottom-bottom">
 				<LineBarChart :dataList="dataList" />
 			</div>
 		</div>
@@ -95,13 +94,16 @@ export default {
 	}
 	.chart-bottom-wrap {
 		height: calc(100% - 90px);
-		padding: 0 18px 20px 18px;
-		.chart-bottom-left, .chart-bottom-right {
-			width: 49%;
-			height: 100%;
+		// padding: 0 18px 20px 18px;
+		.chart-bottom-top, .chart-bottom-bottom {
+			width: 100%;
+			overflow-x: auto;
+			height: calc(50% - 15px);
+			min-height: 160px;
 		}
-		.chart-bottom-right {
-			margin-left: 2%;
+		.chart-bottom-bottom {
+			// margin-left: 2%;
+			margin-top: 30px;
 		}
 	}
 }

src/views/plan/workbench/materialAnalysis/chart/lineBarChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div style="height:250px;width:100%;margin-top: 30px;" />
+  <div style="height:calc(100% - 5px);width:100%;" />
 </template>
 <script>
 import * as echarts from 'echarts'
@@ -71,12 +71,53 @@ export default {
     initChart() {
       this.chart = echarts.init(this.$el, 'macarons')
       this.chart.setOption({
+        tooltip: {
+					trigger: "axis",
+					textStyle: {
+						color: '#fff'
+					}
+				},
+        dataZoom: [
+          {
+            // start: 0,//默认为0
+            // end: 100,//默认为100
+            type: 'slider',
+            show: true,
+            // xAxisIndex: [0],
+            handleSize: 0,//滑动条的 左右2个滑动条的大小
+            startValue: 0, // 初始显示值
+            endValue: 30, // 结束显示值
+            height: 10,//组件高度
+            left: '5%', //左边的距离
+            right: '5%',//右边的距离
+            bottom: 10,//底边的距离
+            borderColor: "#000",
+            fillerColor: '#269cdb',
+            borderRadius: 5,
+            backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
+            showDataShadow: false,//是否显示数据阴影 默认auto
+            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
+            realtime: true, //是否实时更新
+            filterMode: 'filter',
+          },
+          //下面这个属性是里面拖到
+          {
+            type: 'inside',
+            show: true,
+            // xAxisIndex: [0],
+            start: 1,//默认为1
+            end: 100,//默认为100
+          },
+        ],
         color: ['#126db9'],
+        legend: {
+          data: this.seriesArray.map(e=>e.name)
+        },
         grid: {
           top: '10%',
           left: '5%',
-          right: '15%',
-          bottom: '0%',
+          right: '5%',
+          bottom: '15%',
           containLabel: true
         },
         xAxis: {
@@ -86,19 +127,10 @@ export default {
 						interval: 0,
 						rotate:'80',//旋转度数
 					},
-        },
-				legend: {
-          data: this.seriesArray.map(e=>e.name)
         },
         yAxis: {
 					type: 'value',
         },
-				tooltip: {
-					trigger: 'axis',
-					textStyle: {
-						color: '#fff'
-					}
-				},
         series: this.seriesArray
       })
     }

src/views/plan/workbench/materialAnalysis/filter/index.vue

@@ -13,7 +13,7 @@
 						placeholder="请选择原材料">
 						<el-option v-for="item in specificationsData"
 											:key="item['Article-ArtId']"
-											:label="item['Article-Descr1']"
+											:label="item['Article-ArtId']+ '-' +item['Article-Descr1']"
 											:value="item['Article-ArtId']" />
 					</el-select>
 				</el-form-item>
@@ -25,7 +25,7 @@
 						placeholder="请选择规格">
 						<el-option v-for="item in attributeData"
 											:key="item['Attribute-AttrCode']"
-											:label="item['Attribute-Descr']"
+											:label="item['Attribute-AttrCode']+'-'+item['Attribute-Descr']"
 											:value="item['Attribute-AttrCode']" />
 					</el-select>
 				</el-form-item>