质量管理up 添加SPC分析修改center1

src/views/bigScreen/qualityManage/center.vue

@@ -4,30 +4,33 @@
 			<div class="data">
 				<div class="data-item">
 					<div><span style="font-weight: bold">质量体系整改率</span></div>
-					<div class="box"><span>{{}}</span>%</div>
+					<div class="box">
-					<div style="width: 100%"><progressBar :percentage="98" /></div>
+						<span v-if="percentage">{{ percentage }}%</span>
+					</div>
+					<div style="width: 100%">
+						<progressBar :percentage="percentage" v-if="percentage" />
+					</div>
 				</div>
 				<div class="data-item">
 					<div><span style="font-weight: bold">产品合格率</span></div>
 					<div class="box">
-						<span>{{ dataInfo.productCate }}</span
+						<span>{{ dataInfo.productCate }}%</span>
-						>%
 					</div>
 					<div style="width: 100%"><progressBar :percentage="dataInfo.productCate" /></div>
 				</div>
 				<div class="data-item">
 					<div><span style="font-weight: bold">一般性质量问题数量</span></div>
-					<div class="box" style="font-size: 18px">
+					<div class="box" style="font-size: 18px"><span style="color: #55c5a2; margin: 0 5px">↓</span>20%</div>
-						<span style="color: #55c5a2; margin: 0 5px">↓</span>{{ dataInfo.rectificationRate }}%
-					</div>
 					<div class="box">
-						<i>{{ dataInfo.commonlyProblemTotal }}/{{}}</i><span class="num2"></span>
+						<i>{{ dataInfo.commonlyProblemTotal }}</i
+						><span class="num2"></span>
 					</div>
 				</div>
 				<div class="data-item">
 					<div><span style="font-weight: bold">低层次问题数</span></div>
 					<div class="box">
-						<i>{{ dataInfo.lowProblemTotal }}/{{}}</i><span class="num2"></span>
+						<i>{{ dataInfo.lowProblemTotal }}</i
+						><span class="num2"></span>
 					</div>
 				</div>
 				<div class="data-item">
@@ -90,6 +93,11 @@ export default {
 			dataInfo: {},
 		}
 	},
+	computed: {
+		percentage() {
+			return Math.floor(this.dataInfo.rectificationRate * 100) / 100
+		},
+	},
 	mounted() {
 		this.getData()
 	},

src/views/bigScreen/qualityManage/center2.vue

@@ -13,6 +13,7 @@
 import center2 from './components/center2/index.vue'
 import rocketTit from '../components/rocketTit/index.vue'
 import bigScreenTabs from '../components/bigScreenTabs/index.vue'
+import colorList from '@/utils/colorPalette'
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
 import resize from '../../dashboard/mixins/resize'
@@ -65,31 +66,26 @@ export default {
 			})
 		},
 		setOptions(resData) {
-			let product = []
+			let productName = []
-			let lowerLimit = []
+			let realValue = []
-			let upperLimit = []
+			for (let i = 0; i < resData.product.length; i++) {
-			for (let i = 0; i < resData.length; i++) {
+				const item = resData.product[i]
-				const item = resData[i]
+				productName.push(item.productName)
-				product.push(item.product)
+				realValue.push(item.realValue)
-				upperLimit.push(item.upperLimit)
-				lowerLimit.push(item.lowerLimit)
 			}
 			this.chart.setOption({
+				tooltip: {
+					trigger: 'axis',
+				},
 				legend: {
 					textStyle: {
 						color: '#fff',
 					},
 				},
-				grid: {
-					left: '3%',
-					right: '6%',
-					bottom: '3%',
-					containLabel: true,
-				},
 				xAxis: [
 					{
 						type: 'category',
-						data: product,
+						data: productName,
 						axisPointer: {
 							type: 'shadow',
 						},
@@ -100,81 +96,78 @@ export default {
 						},
 					},
 				],
-				yAxis: [
+				yAxis: {
-					{
+					type: 'value',
-						type: 'value',
+					name: '',
-						name: '',
+					min: 0,
-						min: 0,
+					// max: 250,
-						// max: 250,
+					// interval: 50,
-						// interval: 50,
+					axisLabel: {
-						axisLabel: {
+						formatter: '{value}',
-							formatter: '{value}',
+					},
-						},
+					splitLine: {
-						splitLine: {
+						show: false, //不显示网格线
-							show: false, //不显示网格线
+					},
-						},
+					splitArea: {
-						splitArea: {
+						show: false, //不显示网格区域
-							show: false, //不显示网格区域
+					},
-						},
+					axisLine: {
-						axisLine: {
+						lineStyle: {
-							lineStyle: {
+							color: 'rgb(255, 255, 255)',
-								color: 'rgb(255, 255, 255)',
-							},
 						},
 					},
-					{
+				},
-						type: 'value',
-						min: 0,
-						max: 0.8,
-						interval: 0.2,
-						axisLabel: {
-							formatter: '{value}',
-						},
-						splitLine: {
-							show: false, //不显示网格线
-						},
-						splitArea: {
-							show: false, //不显示网格区域
-						},
-						axisLine: {
-							lineStyle: {
-								color: 'rgb(255, 255, 255)',
-							},
-						},
-					},
-				],
 				grid: {
 					containLabel: true,
-					width: '99%',
 					left: 0,
-					top: 50,
+					right: 20,
-					bottom: 10,
+					top: 30,
+					bottom: 50,
+				},
+				dataZoom: {
+					type: 'slider',
+					start: 0,
+					end: this.dataZoomEnd(productName.length, 7),
 				},
-				// dataZoom: {
-				// 	type: 'slider',
-				// 	start: 0,
-				// 	end: this.dataZoomEnd(titData.length, 7),
-				// },
 				series: [
 					{
-						name: 'R管制图',
+						name: '实际',
+						data: realValue,
 						type: 'line',
-						barWidth: 20,
-						data: upperLimit,
-						itemStyle: {
-							color: '#61DDAA',
-						},
 						symbol: 'none',
-					},
+						markLine: {
-					{
+							symbol: 'none', //去掉警戒线最后面的箭头
-						name: 'X管制图',
+							label: {
-						type: 'line',
+								position: 'end', //三个值“start”,"middle","end"  开始  中点 结束
-						smooth: false,
+							},
-						data: lowerLimit,
+							silent: true,
-						itemStyle: {
+							data: [
-							color: '#7EA7FC',
+								{
+									lineStyle: {
+										type: 'dotted', // type: 'solid'  //'dotted'虚线 'solid'实线
+										color: colorList[0],
+									},
+									label: { show: true, position: 'middle', formatter: '上限' + resData.spc.upperLimit },
+									yAxis: resData.spc.upperLimit,
+								},
+								{
+									lineStyle: {
+										type: 'dotted', // type: 'solid'  //'dotted'虚线 'solid'实线
+										color: colorList[1],
+									},
+									label: { show: true, position: 'middle', formatter: '中心线' + resData.spc.centerLine },
+									yAxis: resData.spc.centerLine,
+								},
+								{
+									lineStyle: {
+										type: 'dotted', // type: 'solid'  //'dotted'虚线 'solid'实线
+										color: colorList[2],
+									},
+									label: { show: true, position: 'middle', formatter: '下限' + resData.spc.lowerLimit },
+									yAxis: resData.spc.lowerLimit,
+								},
+							],
 						},
-						symbol: 'none',
 					},
 				],
 			})

src/views/bigScreen/qualityManage/left2.vue

@@ -109,7 +109,7 @@ export default {
 					source[i].unshift(item)
 				}
 				source.unshift(product)
-				console.log(source)
+				// console.log(source)
 				// console.log(newData)
 				this.chart = echarts.init(this.$refs.chart)
 				this.chart.setOption({
@@ -196,7 +196,7 @@ export default {
 					name: str,
 				})
 			}
-			console.log(newList)
+			// console.log(newList)
 			this.chart2.setOption({
 				tooltip: {
 					trigger: 'item',