质量管理up 添加SPC分析修改center1
This commit is contained in:
熊丽君
@ -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 style="width: 100%"><progressBar :percentage="98" /></div>
|
||||
<div class="box">
|
||||
<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">
|
||||
<span style="color: #55c5a2; margin: 0 5px">↓</span>{{ dataInfo.rectificationRate }}%
|
||||
</div>
|
||||
<div class="box" style="font-size: 18px"><span style="color: #55c5a2; margin: 0 5px">↓</span>20%</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()
|
||||
},
|
||||
|
||||
@ -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 lowerLimit = []
|
||||
let upperLimit = []
|
||||
for (let i = 0; i < resData.length; i++) {
|
||||
const item = resData[i]
|
||||
product.push(item.product)
|
||||
upperLimit.push(item.upperLimit)
|
||||
lowerLimit.push(item.lowerLimit)
|
||||
let productName = []
|
||||
let realValue = []
|
||||
for (let i = 0; i < resData.product.length; i++) {
|
||||
const item = resData.product[i]
|
||||
productName.push(item.productName)
|
||||
realValue.push(item.realValue)
|
||||
}
|
||||
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: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '',
|
||||
min: 0,
|
||||
// max: 250,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: '',
|
||||
min: 0,
|
||||
// max: 250,
|
||||
// interval: 50,
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
splitLine: {
|
||||
show: false, //不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false, //不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
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,
|
||||
bottom: 10,
|
||||
right: 20,
|
||||
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',
|
||||
},
|
||||
{
|
||||
name: 'X管制图',
|
||||
type: 'line',
|
||||
smooth: false,
|
||||
data: lowerLimit,
|
||||
itemStyle: {
|
||||
color: '#7EA7FC',
|
||||
markLine: {
|
||||
symbol: 'none', //去掉警戒线最后面的箭头
|
||||
label: {
|
||||
position: 'end', //三个值“start”,"middle","end" 开始 中点 结束
|
||||
},
|
||||
silent: true,
|
||||
data: [
|
||||
{
|
||||
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',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
@ -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',
|
||||
|
||||
Reference in New Issue
Block a user