mt-fe-group/11-mes-new
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 产品成品率

Browse Source
This commit is contained in:
lb 2022-11-24 10:28:11 +08:00
parent 539235fcfb
commit f37dfbb328
3 changed files with 389 additions and 338 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/views/QualityManager/HomePage.vue
View File

@ -186,7 +186,7 @@
</div>
<div class="grow">
<techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header class="production-rate">
<techy-analysis-header type="production-rate" class="production-rate">
产品成品率
<template v-slot:dateSelect>
<div class="date-select">
@ -627,13 +627,38 @@ export default {
width: calc(375px * var(--beilv));
}
@media all and (max-width: 2040px) {
/* @media all and (max-width: 1680px) {
.production-rate {
/* text-align: left; */
text-align: center;
}
.production-rate >>> .top-icon:last-of-type {
.production-rate >>> .top-icon,
.production-rate >>> .date-select {
display: none;
}
}
@media all and (min-width: 1680px) {
.production-rate {
text-align: left;
}
.production-rate >>> .top-icon {
display: none;
}
}
@media all and (min-width: 2048px) {
.production-rate {
text-align: center;
}
.production-rate >>> .date-select > span {
background-color: #568588;
}
.production-rate >>> .date-select > span.date-select__active {
background-color: #42bbb7;
}
} */
</style>

126
src/views/QualityManager/components/TechyAnalysisHeader.vue
View File

@ -55,7 +55,131 @@
</g>
</svg>
</span>
<span class="techy-analysis-header__title" style="display: inline-block; transform: translateX(-4px) skewX(-32deg); ">
<span
class="techy-analysis-header__title"
style="display: inline-block; transform: translateX(-4px) skewX(-32deg); "
>
<slot />
</span>
<span class="top-icon" style="transform: skewX(-32deg); ">
<svg
width="100%"
height="100%"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>right</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-653.000000, -808.000000)" fill="#31A6AE">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
<g
id="编组-2备份-2"
transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)"
>
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
<polygon
id="路径-11备份"
opacity="0.8"
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
></polygon>
<polygon
id="路径-11备份-3"
opacity="0.4"
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
></polygon>
<polygon
id="路径-11备份-2"
opacity="0.601434"
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
></polygon>
<polygon
id="路径-11备份-4"
opacity="0.201434"
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</span>
</div>
<div
class="legend legend-right"
style="transform: skewX(-32deg); background: #fff0; width: calc(126px * var(--beilv)); padding-left: calc(8px * var(--beilv));"
>
<div class="legend-item pla" style=" margin-right: calc(8px * var(--beilv));">产线A</div>
<div class="legend-item plb" style=" ">产线B</div>
</div>
</div>
</template>
<template v-else-if="type === 'production-rate'">
<div
style="transform: skewX(32deg); background: #fff0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;"
>
<div class="legend" style="background: #fff0; width: calc(126px * var(--beilv));"></div>
<div style="flex: 1; white-space: nowrap; overflow: hidden;">
<span class="top-icon" style="transform: skewX(-32deg); ">
<svg
width="100%"
height="100%"
viewBox="0 0 56 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>left</title>
<g id="2MES。2-6蓝底-7、8白底" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="2-5质量管理" transform="translate(-419.000000, -808.000000)" fill="#31A6AE">
<g id="编组-16备份-7" transform="translate(360.000000, 513.000000)">
<g id="编组-20备份" transform="translate(24.000000, 277.000000)">
<g id="编组-13备份" transform="translate(35.000000, 16.000000)">
<g
id="编组-2备份"
transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)"
>
<polygon id="路径-11" points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"></polygon>
<polygon
id="路径-11备份"
opacity="0.8"
points="36.1645736 7.79376563e-14 32 0 41.2664792 13 45 13"
></polygon>
<polygon
id="路径-11备份-3"
opacity="0.4"
points="14.1645736 7.79376563e-14 10 0 19.2664792 13 23 13"
></polygon>
<polygon
id="路径-11备份-2"
opacity="0.601434"
points="25.1645736 7.79376563e-14 21 0 30.2664792 13 34 13"
></polygon>
<polygon
id="路径-11备份-4"
opacity="0.201434"
points="4.16457365 7.79376563e-14 5.06480115e-16 0 9.26647921 13 13 13"
></polygon>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
</span>
<span
class="techy-analysis-header__title"
style="display: inline-block; transform: translateX(-4px) skewX(-32deg); "
>
<slot />
</span>
<span class="top-icon" style="transform: skewX(-32deg); ">

292
src/views/QualityManager/components/charts/newLineStack.vue
View File

@ -6,26 +6,30 @@
import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize'
export default {
name: 'PlFaultAnalysisPieChart',
mixins: [resize],
props: {
mode: {
type: String,
default: '',
validator: val => ['month', 'day'].indexOf(val) !== -1
},
dataUpdateToken: {
type: String,
default: 'default-token'
class ChartOption {
constructor() {
this.color = ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6']
// this.legend = {
// top: 11,
// right: 32,
// itemWidth: 8,
// itemHeight: 8,
// textStyle: {
// color: '#fff9',
// fontSize: 10
// }
// }
this.grid = {
top: 64,
left: 12,
right: 28,
bottom: 20,
containLabel: true
}
},
data() {
return {
chart: null,
configs: {
color: ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6'],
tooltip: {
this.tooltip = {
trigger: 'axis',
extraCssText: 'width: 180px !important; ',
axisPointer: {
@ -34,26 +38,20 @@ export default {
backgroundColor: '#6a7985'
}
}
},
grid: {
top: 56,
left: '2%',
right: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
}
this.xAxis = {
type: 'category',
boundaryGap: false,
axisLine: {
lineStyle: {
color: '#ffffff66'
color: '#fff3'
}
},
axisTick: { show: false },
axisLabel: {
textStyle: {
fontSize: 10,
fontSize: 12,
color: '#fff8' //
},
margin: 12
@ -62,9 +60,9 @@ export default {
this.mode === 'month'
? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
}
yAxis: [
this.yAxis = [
{
name: '成品率 ',
type: 'value',
@ -72,7 +70,7 @@ export default {
splitNumber: 4,
nameTextStyle: {
color: 'rgba(255,255,255,0.7)',
fontSize: 10,
fontSize: 12,
align: 'left',
verticalAlign: 'bottom'
},
@ -89,6 +87,7 @@ export default {
axisLabel: {
formatter: '{value} %',
textStyle: {
fontSize: 12,
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
}
},
@ -99,8 +98,9 @@ export default {
}
}
}
],
series: [
]
this.series = [
{
name: 'A1下片机',
type: 'line',
@ -116,7 +116,7 @@ export default {
colorStops: [
{
offset: 0,
color: '#FB418C66' // 0% 处的颜色
color: '#DDB11266' // 0% 处的颜色
},
{
offset: 1,
@ -164,7 +164,7 @@ export default {
colorStops: [
{
offset: 0,
color: '#DDB11266' // 0% 处的颜色
color: '#1A99FFCC' // 0% 处的颜色
},
{
offset: 1,
@ -196,156 +196,58 @@ export default {
return v
})
}
// {
// name: '镀膜机',
// type: 'line',
// symbol: 'none',
// areaStyle: {
// // color: 'rgba(50,145,152,0.5)'
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: '#1A99FF66' // 0% 处的颜色
// },
// {
// offset: 1,
// color: 'transparent' // 100% 处的颜色
// }
// ],
// global: false // 缺省为 false
// }
// },
// emphasis: {
// focus: 'series'
// },
// data:
// this.mode === 'month'
// ? Array(30)
// .fill(1)
// .map(_ => {
// let v = Math.floor(Math.random() * 100)
// while (v < 80) {
// v = Math.floor(Math.random() * 100)
// }
// return v
// })
// : [11, 199, 140, 63, 185, 5, 78].map(_ => {
// let v = Math.floor(Math.random() * 100)
// while (v < 80) {
// v = Math.floor(Math.random() * 100)
// }
// return v
// })
// },
// {
// name: '包装纸',
// type: 'line',
// symbol: 'none',
// areaStyle: {
// // color: 'rgba(50,145,152,0.5)'
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: '#A691FF66' // 0% 处的颜色
// },
// {
// offset: 1,
// color: 'transparent' // 100% 处的颜色
// }
// ],
// global: false // 缺省为 false
// }
// },
// emphasis: {
// focus: 'series'
// },
// data:
// this.mode === 'month'
// ? Array(30)
// .fill(1)
// .map(_ => {
// let v = Math.floor(Math.random() * 100)
// while (v < 80) {
// v = Math.floor(Math.random() * 100)
// }
// return v
// })
// : [11, 199, 140, 63, 185, 5, 78].map(_ => {
// let v = Math.floor(Math.random() * 100)
// while (v < 80) {
// v = Math.floor(Math.random() * 100)
// }
// return v
// })
// },
// {
// name: '丝印',
// type: 'line',
// symbol: 'none',
// label: {
// show: true,
// position: 'top'
// },
// areaStyle: {
// // color: 'rgba(50,145,152,0.5)'
// color: {
// type: 'linear',
// x: 0,
// y: 0,
// x2: 0,
// y2: 1,
// colorStops: [
// {
// offset: 0,
// color: '#49FBD666' // 0% 处的颜色
// },
// {
// offset: 1,
// color: 'transparent' // 100% 处的颜色
// }
// ],
// global: false // 缺省为 false
// }
// },
// emphasis: {
// focus: 'series'
// },
// data:
// this.mode === 'month'
// ? Array(30)
// .fill(1)
// .map(_ => {
// let v = Math.floor(Math.random() * 100)
// while (v < 80) {
// v = Math.floor(Math.random() * 100)
// }
// return v
// })
// : [11, 199, 140, 63, 185, 5, 78].map(_ => {
// let v = Math.floor(Math.random() * 100)
// while (v < 80) {
// v = Math.floor(Math.random() * 100)
// }
// return v
// })
// }
]
}
get option() {
return this
}
optionFilter(option, calcSize = () => {} /** callback */) {
let newOption
if (Array.isArray(option)) {
newOption = []
option.forEach(item => {
newOption.push(this.optionFilter(item, calcSize))
})
return newOption
} else if (typeof option === 'object') {
newOption = {}
for (const key in option) {
if (key === 'colorStops') newOption[key] = option[key]
else if (
typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1
) {
newOption[key] = calcSize(option[key])
} else newOption[key] = this.optionFilter(option[key], calcSize)
}
return newOption
} else {
newOption = calcSize(option)
return option
}
}
}
export default {
name: 'PlFaultAnalysisPieChart',
mixins: [resize],
props: {
mode: {
type: String,
default: '',
validator: val => ['month', 'day'].indexOf(val) !== -1
},
dataUpdateToken: {
type: String,
default: 'default-token'
}
},
data() {
return {
chart: null,
configs: null
}
},
@ -356,18 +258,9 @@ export default {
},
mounted() {
window.addEventListener('resize', function() {
if (this.chart) {
this.chart.resize()
}
})
this.$nextTick(() => {
// if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer, { width: '100%', height: '100%' })
if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
this.chart.setOption(this.configs)
this.chart.resize()
this.setChartOption()
})
},
methods: {
@ -401,6 +294,15 @@ export default {
})
if (this.chart) this.chart.setOption(this.configs)
},
calcSize(num) {
const beilv = document.documentElement.style.getPropertyValue('--beilv')
return num * beilv
},
setChartOption() {
let chartOption = new ChartOption()
this.configs = chartOption.optionFilter(chartOption.option, this.calcSize)
this.chart.setOption(this.configs)
}
}
}