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

Compare commits

base: mt-fe-group:d8592611b67ce2235b889ac7036177e969494d72
Branches Tags
mt-fe-group:master
mt-fe-group:lb
mt-fe-group:zjl
mt-fe-group:gtz
...
compare: mt-fe-group:0b9dfa27ab509e8e1153b88226a445792d75c9a8
Branches Tags
mt-fe-group:lb
mt-fe-group:master
mt-fe-group:zjl
mt-fe-group:gtz

15 Commits
d8592611b6 ... 0b9dfa27ab

Author SHA1 Message Date
lb
0b9dfa27ab update data 2022-11-24 17:01:30 +08:00
lb
2f9f9f90bc update 3d 报警提示 2022-11-24 16:46:18 +08:00
lb
71e6f2eb85 update 3d 设备数据 2022-11-24 16:36:51 +08:00
lb
705da46633 update 3d，实时产量 2022-11-24 16:31:23 +08:00
lb
c943481826 update 质量，产品成品率 2022-11-24 16:11:48 +08:00
lb
df8ffa3676 update 3d 设备数据 2022-11-24 16:08:20 +08:00
lb
e756b39e6c update 生产监控实时数据 2022-11-24 15:33:08 +08:00
lb
123cdd59a5 update 班组交接班记录 2022-11-24 15:30:56 +08:00
lb
be18358b9c update 设备当前状态 2022-11-24 15:19:13 +08:00
lb
eb525fce24 update 设备巡检管理 2022-11-24 15:17:15 +08:00
lb
899b9fa879 update 质量 2022-11-24 15:02:30 +08:00
lb
9e48b2103a update 2022-11-24 13:43:45 +08:00
lb
3db6ac92fe update 产线缺陷 2022-11-24 13:38:53 +08:00
lb
f37dfbb328 update 产品成品率 2022-11-24 11:06:06 +08:00
lb
539235fcfb update 3d 公用工程 2022-11-24 09:45:11 +08:00
19 changed files with 1365 additions and 1039 deletions
Show Stats Expand all files Collapse all files

177
src/views/3DOverview/components/DianChart.vue
View File

@ -5,74 +5,30 @@
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize' import resize from '@/views/OperationalOverview/components/mixins/resize'
import { Random } from 'mockjs'
export default { class ChartOption {
name: 'DianLineChart', constructor() {
mixins: [resize], this.color = ['#E02094', '#F0D63C', '#1A99FF']
/** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
inject: ['resizeStatus'],
/** End Fn.1 */
props: {
id: {
type: String,
default: 'default-dian-line-chart'
}
},
data() {
const colors = ['#E02094', '#F0D63C', '#1A99FF']
// const computeInterval = numArr => Math.floor(numArr.reduce((p, c) => p + c, 0) / numArr.length / 10) * 10 this.legend = {
let data = [ top: 11,
// 温度走势 right: 32,
[90, 93, 95, 96, 95, 90, 89, 84, 60, 77, 93, 93.5].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 30) {
v = Math.floor(Math.random() * 100)
}
return v
}),
// 电流走势
[60, 72, 69, 77, 72, 70, 71, 69.5, 55, 60, 70.5, 71].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 30) {
v = Math.floor(Math.random() * 100)
}
return v
}),
// 电压走势
[45, 50, 55, 60, 65, 78, 63, 66, 54, 62, 72, 73].map(_ => {
let v = Math.floor(Math.random() * 100)
while (v < 30) {
v = Math.floor(Math.random() * 100)
}
return v
})
]
let wendu = data[0]
let dianliu = data[1]
let dianya = data[2]
return {
chart: null,
option: {
color: colors,
legend: {
top: 16,
right: 64,
itemWidth: 8, itemWidth: 8,
itemHeight: 8, itemHeight: 8,
textStyle: { textStyle: {
color: '#fff9', color: '#fff9',
fontSize: 12 fontSize: 10
} }
// data: ['ABC三相电压/v', 'ABC三相电流/a', '电缆温度'] }
},
grid: { this.grid = {
top: 48, top: 36,
left: 64, left: 64,
bottom: 36 bottom: 36
}, }
tooltip: {
this.tooltip = {
show: true, show: true,
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -86,15 +42,16 @@ export default {
} }
}, },
extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;' extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
}, }
xAxis: [
{ this.xAxis = {
type: 'category', type: 'category',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
color: '#fff9', color: '#fff9',
fontSize: 14 fontSize: 12,
margin: 10
}, },
axisLine: { axisLine: {
lineStyle: { lineStyle: {
@ -102,16 +59,16 @@ export default {
} }
} }
} }
],
yAxis: [ this.yAxis = [
{ {
name: '电流/A ', name: '电流/A ',
nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' }, nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
onZero: true, onZero: true,
position: 'left', position: 'left',
offset: 32, offset: 28,
axisTick: { show: false }, axisTick: { show: false },
axisLine: { axisLine: {
show: true, show: true,
@ -122,7 +79,7 @@ export default {
}, },
axisLabel: { axisLabel: {
color: '#fff9', color: '#fff9',
fontSize: 12 fontSize: 10
}, },
splitLine: { splitLine: {
show: true, show: true,
@ -134,7 +91,7 @@ export default {
}, },
{ {
name: ' 电压/V ', name: ' 电压/V ',
nameTextStyle: { align: 'right', fontSize: 12, color: '#fff9' }, nameTextStyle: { align: 'right', fontSize: 10, color: '#fff9' },
type: 'value', type: 'value',
splitNumber: 4, splitNumber: 4,
axisTick: { show: false }, axisTick: { show: false },
@ -150,7 +107,7 @@ export default {
}, },
axisLabel: { axisLabel: {
color: '#fff9', color: '#fff9',
fontSize: 12 fontSize: 10
}, },
splitLine: { splitLine: {
show: true, show: true,
@ -162,7 +119,7 @@ export default {
}, },
{ {
name: ' 温度', name: ' 温度',
nameTextStyle: { align: 'left', color: '#fff9', fontSize: 12 }, nameTextStyle: { align: 'left', color: '#fff9', fontSize: 10 },
axisTick: { show: false }, axisTick: { show: false },
axisLine: { axisLine: {
show: false, show: false,
@ -182,11 +139,12 @@ export default {
}, },
axisLabel: { axisLabel: {
color: '#fff9', color: '#fff9',
fontSize: 12 fontSize: 10
} }
} }
], ]
series: [
this.series = [
{ {
name: 'ABC三相电压/v', name: 'ABC三相电压/v',
type: 'line', type: 'line',
@ -195,7 +153,9 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: dianliu, data: Array(12)
.fill(1)
.map(_ => Random.integer(30, 100)),
symbol: 'none' symbol: 'none'
}, },
{ {
@ -206,7 +166,9 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: dianya, data: Array(12)
.fill(1)
.map(_ => Random.integer(30, 100)),
symbol: 'none' symbol: 'none'
}, },
{ {
@ -217,11 +179,61 @@ export default {
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: wendu, data: Array(12)
.fill(1)
.map(_ => Random.integer(30, 100)),
symbol: 'none' symbol: 'none'
} }
] ]
} }
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: 'DianLineChart',
mixins: [resize],
/** Fn.1: 保证全屏切换时也刷新图表 ，应该在每个父组件为flex:1的echarts组件里都加上，以确保能正确地伸缩 */
inject: ['resizeStatus'],
/** End Fn.1 */
props: {
id: {
type: String,
default: 'default-dian-line-chart'
}
},
data() {
return {
chart: null,
option: null
} }
}, },
computed: { computed: {
@ -239,7 +251,7 @@ export default {
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart']) if (!this.chart) this.chart = echarts.init(this.$refs['techy-line-chart'])
this.chart.setOption(this.option) this.setChartOption()
}) })
}, },
beforeDestroy() { beforeDestroy() {
@ -247,7 +259,14 @@ export default {
this.chart = null this.chart = null
}, },
methods: { methods: {
initOption(legendSize, labelSize, axisLabelSize, splitLineNumber) {} calcSize(num) {
const beilv = document.documentElement.style.getPropertyValue('--beilv')
return num * beilv
},
setChartOption() {
let chartOption = new ChartOption()
this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize))
}
} }
} }
</script> </script>

44
src/views/3DOverview/components/LeftContentEquipmentCheck.vue
View File

@ -53,31 +53,31 @@ const PriorityComponent = {
const tableProps = [ const tableProps = [
{ prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 120 }, { prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 120 },
{ prop: 'pl', label: '所属产线', align: 'center', 'min-width': 100 }, // { prop: 'pl', label: '所属产线', align: 'center', 'min-width': 100 },
{ prop: 'warningLevel', label: '提示等级', align: 'center', 'min-width': 100, subcomponent: PriorityComponent }, { prop: 'warningLevel', label: '提示等级', align: 'center', 'min-width': 70, subcomponent: PriorityComponent },
{ prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 } { prop: 'checkContent', label: '巡检内容', align: 'center', 'min-width': 120 }
] ]
const tableData = [ const tableData = [
{ eqName: '钢化', pl: 'A', priority: 1, checkContent: '表面检测光源和相机的卫生' }, { eqName: 'A1钢化', pl: 'A', priority: 1, checkContent: '表面检测光源和相机的卫生' },
{ eqName: '一镀', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' }, // { eqName: '一镀', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
{ eqName: '钢化', pl: 'B', priority: 3, checkContent: '边角检测设备水平的校正' }, { eqName: 'B2钢化', pl: 'B', priority: 3, checkContent: '边角检测设备水平的校正' },
{ eqName: '冷却', pl: 'B', priority: 2, checkContent: '表面检测光源和相机的卫生' }, { eqName: 'B1冷却机', pl: 'B', priority: 2, checkContent: '表面检测光源和相机的卫生' },
{ eqName: '预热', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' }, // { eqName: '预热', pl: 'A', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
{ eqName: '钢后清洗机', pl: 'B', priority: 3, checkContent: '检查每日不良是否存在误检' }, { eqName: 'B1钢后清洗机', pl: 'B', priority: 3, checkContent: '检查每日不良是否存在误检' },
{ eqName: '磨边', pl: 'B', priority: 3, checkContent: '设备表面的卫生' }, { eqName: 'B2磨边', pl: 'B', priority: 3, checkContent: '设备表面的卫生' },
{ eqName: '打孔', pl: 'B', priority: 2, checkContent: '边角检测光源和相机的卫生' }, { eqName: 'B1打孔', pl: 'B', priority: 2, checkContent: '边角检测光源和相机的卫生' },
{ eqName: '磨边后清洗机', pl: 'B', priority: 1, checkContent: '边角检测光源和相机的卫生' }, { eqName: 'B1磨边后清洗机', pl: 'B', priority: 1, checkContent: '边角检测光源和相机的卫生' },
{ eqName: '冷却', pl: 'B', priority: 1, checkContent: '辊道下方的碎玻璃清理' }, // { eqName: '冷却', pl: 'B', priority: 1, checkContent: '辊道下方的碎玻璃清理' },
{ eqName: '丝印', pl: 'B', priority: 3, checkContent: '操作台保持整洁' }, // { eqName: '丝印', pl: 'B', priority: 3, checkContent: '操作台保持整洁' },
{ eqName: '丝印', pl: 'A', priority: 2, checkContent: '检查每日不良是否存在误检' }, // { eqName: '丝印', pl: 'A', priority: 2, checkContent: '检查每日不良是否存在误检' },
{ eqName: '钢化', pl: 'B', priority: 2, checkContent: '检查每日不良是否存在误检' }, { eqName: 'B1钢化', pl: 'B', priority: 2, checkContent: '检查每日不良是否存在误检' },
{ eqName: '冷却', pl: 'A', priority: 2, checkContent: '辊道下方的碎玻璃清理' }, // { eqName: '冷却', pl: 'A', priority: 2, checkContent: '辊道下方的碎玻璃清理' },
{ eqName: '下片', pl: 'A', priority: 1, checkContent: '水冷机内水量充足并且清洁' }, { eqName: 'A1下片', pl: 'A', priority: 1, checkContent: '水冷机内水量充足并且清洁' },
{ eqName: '钢化', pl: 'A', priority: 2, checkContent: '操作台保持整洁' }, { eqName: 'A2钢化', pl: 'A', priority: 2, checkContent: '操作台保持整洁' },
{ eqName: '预热', pl: 'B', priority: 3, checkContent: '水冷机内水量充足并且清洁' }, // { eqName: '预热', pl: 'B', priority: 3, checkContent: '水冷机内水量充足并且清洁' },
{ eqName: '磨边后清洗机', pl: 'A', priority: 2, checkContent: '水冷机内水量充足并且清洁' }, { eqName: 'A3磨边后清洗机', pl: 'A', priority: 2, checkContent: '水冷机内水量充足并且清洁' },
{ eqName: '上片', pl: 'B', priority: 3, checkContent: '边角检测光源和相机的卫生' }, { eqName: 'B3上片', pl: 'B', priority: 3, checkContent: '边角检测光源和相机的卫生' },
{ eqName: '预热', pl: 'A', priority: 2, checkContent: '表面检测光源和相机的卫生' } // { eqName: '预热', pl: 'A', priority: 2, checkContent: '表面检测光源和相机的卫生' }
] ]
export default { export default {

45
src/views/3DOverview/components/RightContentAlert.vue
View File

@ -53,45 +53,38 @@ const PriorityComponent = {
const tableProps = [ const tableProps = [
{ prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 90 }, { prop: 'eqName', label: '设备名称', align: 'center', 'min-width': 90 },
{ prop: 'plName', label: '所属产线', align: 'center', 'min-width': 90 }, // { prop: 'plName', label: '所属产线', align: 'center', 'min-width': 90 },
{ prop: 'priority', label: '提示等级', align: 'center', 'min-width': 90, subcomponent: PriorityComponent }, { prop: 'priority', label: '提示等级', align: 'center', 'min-width': 70, subcomponent: PriorityComponent },
{ prop: 'content', label: '巡检内容', align: 'center', 'min-width': 120 }, { prop: 'content', label: '报警内容', align: 'center', 'min-width': 120 },
{ prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 125 } { prop: 'duration', label: '累计时间(min)', align: 'center', 'min-width': 125 }
] ]
const tableData = [ const tableData = [
{ eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 1, duration: '30 min' }, { eqName: 'B1磨边', plName: 'B', content: '磨轮过载', priority: 1, duration: '30 min' },
{ eqName: '冷却', plName: 'A', content: '辊道下方的碎玻璃清理', priority: 3, duration: '1 min' }, { eqName: 'A2丝印', plName: 'A', content: '网版推出异常', priority: 2, duration: '57 min' },
{ eqName: '丝印', plName: 'A', content: '边角检测设备水平的校正', priority: 2, duration: '57 min' }, { eqName: 'B1打孔后清洗', plName: 'B', content: '毛刷过载', priority: 3, duration: '17 min' },
{ eqName: '打孔后清洗机', plName: 'B', content: '设备表面的卫生', priority: 3, duration: '17 min' }, { eqName: 'B1固化', plName: 'B', content: '传动变频器故障', priority: 2, duration: '22 min' },
{ eqName: '固化', plName: 'B', content: '操作台保持整洁', priority: 2, duration: '22 min' }, { eqName: 'A钢化', plName: 'A', content: '加热炉体超温报警', priority: 2, duration: '23 min' },
{ eqName: '一镀', plName: 'B', content: '辊道下方的碎玻璃清理', priority: 3, duration: '2 min' }, { eqName: 'B2磨边', plName: 'B', content: '磨轮过载', priority: 3, duration: '6 min' },
{ eqName: '钢化', plName: 'A', content: '检查每日不良是否存在误检', priority: 2, duration: '23 min' }, { eqName: 'B1磨边', plName: 'B', content: '磨轮过载', priority: 2, duration: '23 min' },
{ eqName: '磨边', plName: 'B', content: '水冷机内水量充足并且清洁', priority: 3, duration: '6 min' },
{ eqName: '磨边', plName: 'B', content: '表面检测光源和相机的卫生', priority: 2, duration: '23 min' },
{ {
eqName: '磨边后清洗机', eqName: 'A2磨边后清洗',
plName: 'A', plName: 'A',
content: '马华部地般平感为转出形就特务把提存。', content: '进料检测异常',
priority: 2, priority: 2,
duration: '18 min' duration: '18 min'
}, },
{ eqName: '预热', plName: 'B', content: '米织类劳约相查个而美五千老。', priority: 3, duration: '24 min' }, { eqName: 'A3打孔后清洗', plName: 'A', content: '进料检测异常', priority: 1, duration: '48 min' },
{ eqName: '打孔后清洗机', plName: 'A', content: '历红群色务口史验话备必工少光。', priority: 1, duration: '48 min' }, { eqName: 'A3磨边', plName: 'A', content: '磨轮过载', priority: 3, duration: '29 min' },
{ eqName: '磨边', plName: 'A', content: '三其由体管严能习使为已身月。', priority: 3, duration: '29 min' }, { eqName: 'A2钢化后清洗', plName: 'A', content: '进料检测异常', priority: 1, duration: '47 min' },
{ eqName: '钢后清洗机', plName: 'A', content: '什近率期开构产府收由制期周。', priority: 1, duration: '47 min' }, { eqName: 'A2下片', plName: 'A', content: '磨轮过载', priority: 2, duration: '49 min' },
{ eqName: '下片', plName: 'A', content: '花公建了办间话个做直志利更在于。', priority: 2, duration: '49 min' },
{ eqName: '一镀', plName: 'B', content: '术任该石代并战面广西处面住王规从他算。', priority: 3, duration: '42 min' },
{ eqName: '二镀', plName: 'A', content: '体才眼自造统六识进后历定因受国。', priority: 2, duration: '42 min' },
{ {
eqName: '钢后清洗机', eqName: 'A3钢化后清洗',
plName: 'A', plName: 'A',
content: '就门务程过志率难每维原就快没省为满候。', content: '输送变频报警',
priority: 2, priority: 2,
duration: '33 min' duration: '33 min'
}, }
{ eqName: '预热', plName: 'A', content: '金单能信较生七族接处人门例图取之。', priority: 2, duration: '34 min' },
{ eqName: '预热', plName: 'B', content: '会带给山气己进相构位节采调而音集。', priority: 3, duration: '6 min' }
] ]
export default { export default {

31
src/views/3DOverview/components/RightContentProductRate.vue
View File

@ -5,6 +5,7 @@
<script> <script>
import echarts from 'echarts' import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize' import resize from '@/views/OperationalOverview/components/mixins/resize'
import { Random } from 'mockjs'
class ChartOption { class ChartOption {
constructor() { constructor() {
@ -51,13 +52,16 @@ class ChartOption {
formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%' formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
} }
let d = new Date()
this.xAxis = { this.xAxis = {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
// data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
data: Array(12) data: Array(7)
.fill(0) .fill(0)
.map((_, idx) => (idx >= 10 ? idx : '0' + idx) + ':00'), .map((_, idx) => {
return d.getMonth() + 1 + '-' + (d.getDate() + idx)
}),
axisTick: { axisTick: {
show: false show: false
}, },
@ -74,7 +78,8 @@ class ChartOption {
this.yAxis = { this.yAxis = {
type: 'value', type: 'value',
name: '成品率 ', name: '成品率 ',
min: 'dataMin', // min: 'dataMin',
min: 50,
splitNumber: 3, splitNumber: 3,
nameTextStyle: { nameTextStyle: {
color: '#fff9', color: '#fff9',
@ -121,15 +126,9 @@ class ChartOption {
global: false // 缺省为 false global: false // 缺省为 false
} }
}, },
data: Array(12) data: Array(7)
.fill(0) .fill(0)
.map(_ => { .map(_ => Random.integer(93, 98))
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
}, },
{ {
name: 'B', name: 'B',
@ -155,15 +154,9 @@ class ChartOption {
global: false // 缺省为 false global: false // 缺省为 false
} }
}, },
data: Array(12) data: Array(7)
.fill(0) .fill(0)
.map(_ => { .map(_ => Random.integer(93, 98))
let v = Math.floor(Math.random() * 100)
while (v < 80) {
v = Math.floor(Math.random() * 100)
}
return v
})
} }
] ]
} }

20
src/views/3DOverview/components/RightContentQualityAnalysis.vue
View File

@ -26,16 +26,16 @@ export default {
data() { data() {
return { return {
datalist: [ datalist: [
{ name: '热端', value: 2023233, color: '#0b88ff' }, { name: '热端', value: 66, color: '#0b88ff' },
{ name: '丝印', value: 2023233, color: '#0bffa6' }, { name: '丝印', value: 93, color: '#0bffa6' },
{ name: '原片', value: 20, color: '#0bffa6' }, { name: '原片', value: 121, color: '#0bffa6' },
{ name: '钢化', value: 20, color: '#e3ff0b' }, { name: '钢化', value: 2, color: '#e3ff0b' },
{ name: '上片磨边', value: 20, color: '#e3ff0b' }, { name: '上片磨边', value: 211, color: '#e3ff0b' },
{ name: '下片铺纸', value: 202324, color: '#950bff' }, { name: '下片铺纸', value: 27, color: '#950bff' },
{ name: '镀膜', value: 20, color: '#950bff' }, { name: '镀膜', value: 44, color: '#950bff' },
{ name: '物流仓储', value: 202324, color: '#ff7d0b' }, { name: '物流仓储', value: 3, color: '#ff7d0b' },
{ name: '清洗', value: 20, color: '#0bffa6' }, { name: '清洗', value: 2, color: '#0bffa6' },
{ name: '包装', value: 2, color: '#ff0bc2' } { name: '包装', value: 22, color: '#ff0bc2' }
] ]
} }
}, },

97
src/views/3DOverview/components/RightContentRealtimeProduction.vue
View File

@ -19,17 +19,7 @@ import { Random } from 'mockjs'
class ChartOption { class ChartOption {
constructor() { constructor() {
const wenduData = Array(12) this.color = ['#1A99FF', '#F0D63C', '#E02094', '#559833']
.fill(1)
.map(_ => Random.integer(30, 100))
const dianyaData = Array(12)
.fill(1)
.map(_ => Random.integer(30, 100))
const dianliuData = Array(12)
.fill(1)
.map(_ => Random.integer(30, 100))
this.color = ['#1A99FF', '#F0D63C', '#E02094']
this.legend = { this.legend = {
top: 28, top: 28,
@ -62,9 +52,14 @@ class ChartOption {
extraCssText: 'width: calc(100px*var(--beilv)) !important;' extraCssText: 'width: calc(100px*var(--beilv)) !important;'
} }
let d = new Date()
this.xAxis = { this.xAxis = {
type: 'category', type: 'category',
data: ['01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00'], data: Array(7)
.fill(1)
.map((_, idx) => {
return d.getMonth() + 1 + '-' + (d.getDate() + idx)
}),
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
color: '#fff9', color: '#fff9',
@ -138,14 +133,16 @@ class ChartOption {
this.series = [ this.series = [
{ {
name: '产线1', name: 'A能耗',
type: 'line', type: 'line',
yAxisIndex: 0, yAxisIndex: 0,
// smooth: true, // smooth: true,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: dianliuData, data: Array(7)
.fill(0)
.map(_ => Random.integer(30, 100)),
symbol: 'none', symbol: 'none',
areaStyle: { areaStyle: {
color: { color: {
@ -169,14 +166,16 @@ class ChartOption {
} }
}, },
{ {
name: '产线2', name: 'A产量',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
// smooth: true, // smooth: true,
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: dianyaData, data: Array(7)
.fill(0)
.map(_ => Random.integer(30, 100)),
symbol: 'none', symbol: 'none',
areaStyle: { areaStyle: {
color: { color: {
@ -198,6 +197,72 @@ class ChartOption {
global: false // 缺省为 false global: false // 缺省为 false
} }
} }
},
{
name: 'B能耗',
type: 'line',
yAxisIndex: 0,
// smooth: true,
emphasis: {
focus: 'series'
},
data: Array(7)
.fill(0)
.map(_ => Random.integer(30, 100)),
symbol: 'none',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#E0209466' // 0% 处的颜色
},
{
offset: 1,
color: 'transparent' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
},
{
name: 'B产量',
type: 'line',
yAxisIndex: 1,
// smooth: true,
emphasis: {
focus: 'series'
},
data: Array(7)
.fill(0)
.map(_ => Random.integer(30, 100)),
symbol: 'none',
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: '#55983366' // 0% 处的颜色
},
{
offset: 1,
color: 'transparent' // 100% 处的颜色
}
],
global: false // 缺省为 false
}
}
} }
] ]
} }

125
src/views/3DOverview/v3dApp/data.js
View File

@ -1,73 +1,66 @@
export default [ export default [
{ id: 'C1-0', pl: 'A', name: '上片', amount: 32, status: '生产中' }, { id: 'C1-0', pl: 'A1', name: 'A1上片', amount: 32, status: '生产中' },
{ id: 'C1-1', pl: 'A', name: '磨边', amount: 32, status: '生产中' }, { id: 'C1-1', pl: 'A1', name: 'A1磨边', amount: 32, status: '生产中' },
{ id: 'C1-2', pl: 'A', name: '磨边', amount: 32, status: '调试中' }, { id: 'C1-2', pl: 'A1', name: 'A1磨边后清洗', amount: 32, status: '调试中' },
{ id: 'C1-3', pl: 'A', name: '清洗', amount: 32, status: '生产中' }, { id: 'C1-3', pl: 'A1', name: 'A1打孔', amount: 32, status: '生产中' },
{ id: 'C1-4', pl: 'A', name: '打孔', amount: 32, status: '生产中' }, { id: 'C1-4', pl: 'A1', name: 'A1打孔后清洗', amount: 32, status: '生产中' },
{ id: 'C1-5', pl: 'A', name: '清洗', amount: 32, status: '生产中' }, { id: 'C1-5', pl: 'A1', name: 'A1丝印', amount: 32, status: '生产中' },
{ id: 'C1-6', pl: 'A', name: '丝印', amount: 32, status: '生产中' }, { id: 'C1-6', pl: 'A1', name: 'A1固化', amount: 32, status: '生产中' },
{ id: 'C1-7', pl: 'A', name: '固化', amount: 32, status: '生产中' }, { id: 'C1-7', pl: 'A1', name: 'A1储片', amount: 32, status: '生产中' },
{ id: 'C1-8', pl: 'A', name: '储片', amount: 32, status: '生产中' }, { id: 'C1-8', pl: 'A1', name: 'A钢化', amount: 32, status: '生产中' },
{ id: 'C1-9', pl: 'A', name: '清洗', amount: 32, status: '生产中' }, { id: 'C1-9', pl: 'A1', name: 'A1钢化后清洗', amount: 32, status: '生产中' },
{ id: 'C1-10', pl: 'A', name: '下片', amount: 32, status: '生产中' }, { id: 'C1-10', pl: 'A1', name: 'A1下片', amount: 32, status: '生产中' },
{ id: 'C2-0', pl: 'B', name: '上片', amount: 32, status: '调试中' }, { id: 'C2-0', pl: 'A2', name: 'A2上片', amount: 32, status: '调试中' },
{ id: 'C2-1', pl: 'B', name: '磨边', amount: 32, status: '生产中' }, { id: 'C2-1', pl: 'A2', name: 'A2磨边', amount: 32, status: '生产中' },
{ id: 'C2-2', pl: 'B', name: '磨边', amount: 32, status: '调试中' }, { id: 'C2-2', pl: 'A2', name: 'A2磨边后清洗', amount: 32, status: '调试中' },
{ id: 'C2-3', pl: 'B', name: '清洗', amount: 32, status: '调试中' }, { id: 'C2-3', pl: 'A2', name: 'A2打孔', amount: 32, status: '调试中' },
{ id: 'C2-4', pl: 'B', name: '打孔', amount: 32, status: '调试中' }, { id: 'C2-4', pl: 'A2', name: 'A2打孔后清洗', amount: 32, status: '调试中' },
{ id: 'C2-5', pl: 'B', name: '清洗', amount: 32, status: '生产中' }, { id: 'C2-5', pl: 'A2', name: 'A2丝印', amount: 32, status: '生产中' },
{ id: 'C2-6', pl: 'B', name: '丝印', amount: 32, status: '生产中' }, { id: 'C2-6', pl: 'A2', name: 'A2固化', amount: 32, status: '生产中' },
{ id: 'C2-7', pl: 'B', name: '固化', amount: 32, status: '生产中' }, { id: 'C2-7', pl: 'A2', name: 'A2储片', amount: 32, status: '生产中' },
{ id: 'C2-8', pl: 'B', name: '储片', amount: 32, status: '生产中' }, { id: 'C2-8', pl: 'A2', name: 'A2钢化后清洗', amount: 32, status: '生产中' },
{ id: 'C2-9', pl: 'B', name: '清洗', amount: 32, status: '生产中' }, { id: 'C2-9', pl: 'A2', name: 'A2下片', amount: 32, status: '生产中' },
{ id: 'C2-10', pl: 'B', name: '下片', amount: 32, status: '生产中' },
{ id: 'C3-0', pl: 'C', name: '上片', amount: 32, status: '生产中' }, { id: 'C3-0', pl: 'A3', name: 'A3上片', amount: 32, status: '生产中' },
{ id: 'C3-1', pl: 'C', name: '磨边', amount: 32, status: '生产中' }, { id: 'C3-1', pl: 'A3', name: 'A3磨边', amount: 32, status: '生产中' },
{ id: 'C3-2', pl: 'C', name: '磨边', amount: 32, status: '生产中' }, { id: 'C3-2', pl: 'A3', name: 'A3磨边后清洗', amount: 32, status: '生产中' },
{ id: 'C3-3', pl: 'C', name: '清洗', amount: 32, status: '生产中' }, { id: 'C3-3', pl: 'A3', name: 'A3打孔', amount: 32, status: '生产中' },
{ id: 'C3-4', pl: 'C', name: '打孔', amount: 32, status: '生产中' }, { id: 'C3-4', pl: 'A3', name: 'A3打孔后清洗', amount: 32, status: '生产中' },
{ id: 'C3-5', pl: 'C', name: '清洗', amount: 32, status: '故障' }, { id: 'C3-5', pl: 'A3', name: 'A3丝印', amount: 32, status: '故障' },
{ id: 'C3-6', pl: 'C', name: '丝印', amount: 32, status: '生产中' }, { id: 'C3-6', pl: 'A3', name: 'A3固化', amount: 32, status: '生产中' },
{ id: 'C3-7', pl: 'C', name: '固化', amount: 32, status: '生产中' }, { id: 'C3-7', pl: 'A3', name: 'A3储片', amount: 32, status: '生产中' },
{ id: 'C3-8', pl: 'C', name: '储片', amount: 32, status: '生产中' }, { id: 'C3-8', pl: 'A3', name: 'A3钢化后清洗', amount: 32, status: '生产中' },
{ id: 'C3-9', pl: 'C', name: '清洗', amount: 32, status: '生产中' }, { id: 'C3-9', pl: 'A3', name: 'A3下片', amount: 32, status: '生产中' },
{ id: 'C3-10', pl: 'C', name: '下片', amount: 32, status: '生产中' },
{ id: 'C4-0', pl: 'D', name: '上片', amount: 32, status: '故障' }, { id: 'C4-0', pl: 'B1', name: 'B1上片', amount: 32, status: '故障' },
{ id: 'C4-1', pl: 'D', name: '磨边', amount: 32, status: '生产中' }, { id: 'C4-1', pl: 'B1', name: 'B1磨边', amount: 32, status: '生产中' },
{ id: 'C4-2', pl: 'D', name: '磨边', amount: 32, status: '生产中' }, { id: 'C4-2', pl: 'B1', name: 'B1磨边后清洗', amount: 32, status: '生产中' },
{ id: 'C4-3', pl: 'D', name: '清洗', amount: 32, status: '故障' }, { id: 'C4-3', pl: 'B1', name: 'B1打孔', amount: 32, status: '故障' },
{ id: 'C4-4', pl: 'D', name: '打孔', amount: 32, status: '故障' }, { id: 'C4-4', pl: 'B1', name: 'B1打孔后清洗', amount: 32, status: '故障' },
{ id: 'C4-5', pl: 'D', name: '清洗', amount: 32, status: '生产中' }, { id: 'C4-5', pl: 'B1', name: 'B1丝印', amount: 32, status: '生产中' },
{ id: 'C4-6', pl: 'D', name: '丝印', amount: 32, status: '生产中' }, { id: 'C4-6', pl: 'B1', name: 'B1固化', amount: 32, status: '生产中' },
{ id: 'C4-7', pl: 'D', name: '固化', amount: 32, status: '生产中' }, { id: 'C4-7', pl: 'B1', name: 'B1储片', amount: 32, status: '生产中' },
{ id: 'C4-8', pl: 'D', name: '储片', amount: 32, status: '生产中' }, { id: 'C4-8', pl: 'B1', name: 'B钢化', amount: 32, status: '生产中' },
{ id: 'C4-9', pl: 'D', name: '清洗', amount: 32, status: '生产中' }, { id: 'C4-9', pl: 'B1', name: 'B1钢化后清洗', amount: 32, status: '生产中' },
{ id: 'C4-10', pl: 'D', name: '下片', amount: 32, status: '生产中' }, { id: 'C4-10', pl: 'B1', name: 'B下片', amount: 32, status: '生产中' },
{ id: 'C5-0', pl: 'E', name: '上片', amount: 32, status: '生产中' }, { id: 'C5-0', pl: 'B2', name: 'B2上片', amount: 32, status: '生产中' },
{ id: 'C5-1', pl: 'E', name: '磨边', amount: 32, status: '生产中' }, { id: 'C5-1', pl: 'B2', name: 'B2磨边', amount: 32, status: '生产中' },
{ id: 'C5-2', pl: 'E', name: '磨边', amount: 32, status: '生产中' }, { id: 'C5-2', pl: 'B2', name: 'B2磨边后清洗', amount: 32, status: '生产中' },
{ id: 'C5-3', pl: 'E', name: '清洗', amount: 32, status: '生产中' }, { id: 'C5-3', pl: 'B2', name: 'B2打孔', amount: 32, status: '生产中' },
{ id: 'C5-4', pl: 'E', name: '打孔', amount: 32, status: '生产中' }, { id: 'C5-4', pl: 'B2', name: 'B2打孔后清洗', amount: 32, status: '生产中' },
{ id: 'C5-5', pl: 'E', name: '清洗', amount: 32, status: '生产中' }, { id: 'C5-5', pl: 'B2', name: 'B2丝印', amount: 32, status: '生产中' },
{ id: 'C5-6', pl: 'E', name: '丝印', amount: 32, status: '生产中' }, { id: 'C5-6', pl: 'B2', name: 'B2固化', amount: 32, status: '生产中' },
{ id: 'C5-7', pl: 'E', name: '固化', amount: 32, status: '生产中' }, { id: 'C5-7', pl: 'B2', name: 'B2储片', amount: 32, status: '生产中' },
{ id: 'C5-8', pl: 'E', name: '储片', amount: 32, status: '生产中' }, { id: 'C5-8', pl: 'B2', name: 'B2钢化后清洗', amount: 32, status: '生产中' },
{ id: 'C5-9', pl: 'E', name: '清洗', amount: 32, status: '生产中' },
// { id: 'C5-10', pl: 'E', name: '下片', amount: 32, status: '生产中' },
{ id: 'C6-0', pl: 'F', name: '上片', amount: 32, status: '生产中' }, { id: 'C6-0', pl: 'B3', name: 'B3上片', amount: 32, status: '生产中' },
{ id: 'C6-1', pl: 'F', name: '磨边', amount: 32, status: '生产中' }, { id: 'C6-1', pl: 'B3', name: 'B3磨边', amount: 32, status: '生产中' },
{ id: 'C6-2', pl: 'F', name: '磨边', amount: 32, status: '生产中' }, { id: 'C6-2', pl: 'B3', name: 'B3磨边后清洗', amount: 32, status: '生产中' },
{ id: 'C6-3', pl: 'F', name: '清洗', amount: 32, status: '生产中' }, { id: 'C6-3', pl: 'B3', name: 'B3打孔', amount: 32, status: '生产中' },
{ id: 'C6-4', pl: 'F', name: '打孔', amount: 32, status: '生产中' }, { id: 'C6-4', pl: 'B3', name: 'B3打孔后清洗', amount: 32, status: '生产中' },
{ id: 'C6-5', pl: 'F', name: '清洗', amount: 32, status: '生产中' }, { id: 'C6-5', pl: 'B3', name: 'B3丝印', amount: 32, status: '生产中' },
{ id: 'C6-6', pl: 'F', name: '丝印', amount: 32, status: '生产中' }, { id: 'C6-6', pl: 'B3', name: 'B3固化', amount: 32, status: '生产中' },
{ id: 'C6-7', pl: 'F', name: '固化', amount: 32, status: '故障' }, { id: 'C6-7', pl: 'B3', name: 'B3储片', amount: 32, status: '故障' },
{ id: 'C6-8', pl: 'F', name: '储片', amount: 32, status: '故障' },
// { id: 'C6-9', pl: 'F', name: '清洗', amount: 32, status: '生产中' },
// { id: 'C6-10', pl: 'F', name: '下片', amount: 32, status: '生产中' },
] ]

140
src/views/EquipmentManager/components/charts/pl-JDL-Chart.vue
View File

@ -32,7 +32,7 @@ export default {
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: ['A', 'B', 'C', 'D', 'E'], data: ['A', 'B' ],
axisTick: { axisTick: {
alignWithLabel: true alignWithLabel: true
}, },
@ -116,75 +116,75 @@ export default {
} }
} }
}, },
{ // {
value: 200, // value: 200,
itemStyle: { // itemStyle: {
color: { // color: {
type: 'linear', // type: 'linear',
x: 0, // x: 0,
y: 0, // y: 0,
x2: 0, // x2: 0,
y2: 1, // y2: 1,
colorStops: [ // colorStops: [
{ // {
offset: 0, // offset: 0,
color: '#85F6E9' // color: '#85F6E9'
}, // },
{ // {
offset: 1, // offset: 1,
color: '#2EC6B4' // color: '#2EC6B4'
} // }
], // ],
global: false // global: false
} // }
} // }
}, // },
{ // {
value: 320, // value: 320,
itemStyle: { // itemStyle: {
color: { // color: {
type: 'linear', // type: 'linear',
x: 0, // x: 0,
y: 0, // y: 0,
x2: 0, // x2: 0,
y2: 1, // y2: 1,
colorStops: [ // colorStops: [
{ // {
offset: 0, // offset: 0,
color: '#C79DFF' // color: '#C79DFF'
}, // },
{ // {
offset: 1, // offset: 1,
color: '#A490FF' // color: '#A490FF'
} // }
], // ],
global: false // global: false
} // }
} // }
}, // },
{ // {
value: 95, // value: 95,
itemStyle: { // itemStyle: {
color: { // color: {
type: 'linear', // type: 'linear',
x: 0, // x: 0,
y: 0, // y: 0,
x2: 0, // x2: 0,
y2: 1, // y2: 1,
colorStops: [ // colorStops: [
{ // {
offset: 0, // offset: 0,
color: '#FFE873' // color: '#FFE873'
}, // },
{ // {
offset: 1, // offset: 1,
color: '#E7AE2A' // color: '#E7AE2A'
} // }
], // ],
global: false // global: false
} // }
} // }
} // }
] ]
} }
] ]

5
src/views/EquipmentManager/equipmentMonitoring/currentState.vue
View File

@ -185,7 +185,10 @@ export default {
list({ ...this.listQuery, pdlId, name }).then(response => { list({ ...this.listQuery, pdlId, name }).then(response => {
if (response.data.records) { if (response.data.records) {
this.dataList = response.data.records // this.dataList = response.data.records
// 11-mes 修改模拟数据
this.dataList = response.data.records.map(item => ({...item, error: '无故障'}))
} else { } else {
this.dataList.splice(0) this.dataList.splice(0)
} }

46
src/views/EquipmentManager/inspectionManage/inspectionRecord.vue
View File

@ -33,7 +33,10 @@
</div> </div>
<!-- right --> <!-- right -->
<div class="right-container"> <div class="right-container">
<top-title :base-title="this.$t('module.equipmentManager.inspectionManage.inspectionItem')" style="font-size: 14px; padding-bottom: 14px;" /> <top-title
:base-title="this.$t('module.equipmentManager.inspectionManage.inspectionItem')"
style="font-size: 14px; padding-bottom: 14px;"
/>
<base-table <base-table
:page="1" :page="1"
:limit="999" :limit="999"
@ -64,13 +67,22 @@ import BaseTable from '@/components/BaseTable'
import Pagination from '@/components/Pagination' import Pagination from '@/components/Pagination'
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn' import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
import { tableHeight } from '@/utils/index' import { tableHeight } from '@/utils/index'
import { equipmentList, inspectionLog, einspectionLogD, einspectionItList, einspectionItemLogU } from '@/api/equipment/inspectionManager' import {
equipmentList,
inspectionLog,
einspectionLogD,
einspectionItList,
einspectionItemLogU
} from '@/api/equipment/inspectionManager'
import einspectionitemAdd from './components/einspectionitemAdd.vue' import einspectionitemAdd from './components/einspectionitemAdd.vue'
import einspectionitemlogAdd from './components/einspectionitemlogAdd.vue' import einspectionitemlogAdd from './components/einspectionitemlogAdd.vue'
import { timeFormatter } from '@/filters' import { timeFormatter } from '@/filters'
import StatusBtn from './components/statusBtn.vue' import StatusBtn from './components/statusBtn.vue'
import statusTag from './components/statusTag.vue' import statusTag from './components/statusTag.vue'
// import newBasicData from '@/filters/newBasicData' // import newBasicData from '@/filters/newBasicData'
import { Random } from 'mockjs'
const topBtnConfig = [ const topBtnConfig = [
{ {
type: 'add', type: 'add',
@ -246,7 +258,8 @@ export default {
cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'), cancelButtonText: this.$t('module.basicData.visual.cancelButtonText'),
type: 'warning' type: 'warning'
} }
).then(() => { )
.then(() => {
einspectionLogD({ einspectionLogD({
id: raw.data.id id: raw.data.id
}).then(res => { }).then(res => {
@ -260,7 +273,8 @@ export default {
} }
}) })
}) })
}).catch(() => { }) })
.catch(() => {})
} else if (raw.type === 'detail') { } else if (raw.type === 'detail') {
this.addNew(raw.data.id, 'detail') this.addNew(raw.data.id, 'detail')
} else if (raw.type === 'edit') { } else if (raw.type === 'edit') {
@ -274,8 +288,25 @@ export default {
this.listQuery.endTime = this.headFormValue.searchTime ? this.headFormValue.searchTime[1] + 'T23:59:59' : '' this.listQuery.endTime = this.headFormValue.searchTime ? this.headFormValue.searchTime[1] + 'T23:59:59' : ''
inspectionLog(this.listQuery).then(res => { inspectionLog(this.listQuery).then(res => {
if (res.data.records) { if (res.data.records) {
this.list = res.data.records // this.list = res.data.records
// 11-mes 修改模拟时间
this.list = res.data.records.map(item => {
let startDate = 2022 + '-' + '11-' + Random.integer(1, 29)
let startHour = Random.integer(1, 22)
return {
...item,
inspectionStartTime:
startDate + ' ' + (startHour < 10 ? '0' + startHour : '' + startHour) + Random.datetime(':mm:ss'),
inspectionEndTime:
startDate +
' ' +
(startHour + 1 < 10 ? +'0' + (startHour + 1) : 1 + startHour + '') +
Random.datetime(':mm:ss')
}
})
// console.log('list;', this.list)
this.equipmentInspectionId = this.list[0].id this.equipmentInspectionId = this.list[0].id
this.getInspectionItem() this.getInspectionItem()
} else { } else {
this.list = [] this.list = []
@ -299,7 +330,8 @@ export default {
}) })
} }
}, },
selectRow(val) { // 点击左侧列表 selectRow(val) {
// 点击左侧列表
this.equipmentInspectionId = val.id this.equipmentInspectionId = val.id
this.getInspectionItem() this.getInspectionItem()
}, },
@ -340,7 +372,7 @@ export default {
}) })
}, },
handleClickR(raw) { handleClickR(raw) {
if ((raw.type === 'detail') || (raw.type === 'edit')) { if (raw.type === 'detail' || raw.type === 'edit') {
this.addOrUpdateVisibleR = true this.addOrUpdateVisibleR = true
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.addOrUpdateR.init(raw.data.id, raw.type) this.$refs.addOrUpdateR.init(raw.data.id, raw.type)

100
src/views/EquipmentManager/mockData.js
View File

@ -34,7 +34,7 @@ const PriorityComponent = {
export const equipmentExceptionProps = [ export const equipmentExceptionProps = [
{ label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 55 }, { label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 55 },
{ label: '所属产线', prop: 'pl', align: 'center', 'min-width': 55 }, // { label: '所属产线', prop: 'pl', align: 'center', 'min-width': 55 },
{ label: '报修/异常内容', prop: 'content', align: 'center', 'min-width': 80 }, { label: '报修/异常内容', prop: 'content', align: 'center', 'min-width': 80 },
{ label: '报修/发现人', prop: 'creator', align: 'center', 'min-width': 60 }, { label: '报修/发现人', prop: 'creator', align: 'center', 'min-width': 60 },
{ label: '时间', prop: 'time', align: 'center', 'min-width': 80 }, { label: '时间', prop: 'time', align: 'center', 'min-width': 80 },
@ -42,26 +42,26 @@ export const equipmentExceptionProps = [
] ]
export const equipmentExceptionDatalist = [ export const equipmentExceptionDatalist = [
{ "eqName": "丝印机", "pl": "A", "content": "网版推出异常", "creator": "马磊", "time": "2022-11-20 22:00:34", "priority": 3 }, { "eqName": "A1丝印", "pl": "A", "content": "网版推出异常", "creator": "马磊", "time": "2022-11-20 22:00:34", "priority": 3 },
{ "eqName": "清洗机", "pl": "B", "content": "毛刷过载", "creator": "贺刚", "time": "2022-11-20 06:30:01", "priority": 2 }, { "eqName": "B1磨边后清洗", "pl": "B", "content": "毛刷过载", "creator": "贺刚", "time": "2022-11-20 06:30:01", "priority": 2 },
{ "eqName": "磨边机", "pl": "B", "content": "磨轮过载", "creator": "冯丽", "time": "2022-11-20 07:09:16", "priority": 2 }, { "eqName": "B1磨边", "pl": "B", "content": "磨轮过载", "creator": "冯丽", "time": "2022-11-20 07:09:16", "priority": 2 },
{ "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "梁秀兰", "time": "2022-11-20 08:21:36", "priority": 3 }, // { "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "梁秀兰", "time": "2022-11-20 08:21:36", "priority": 3 },
{ "eqName": "丝印机", "pl": "B", "content": "印刷轴异常", "creator": "卢敏", "time": "2022-11-20 04:45:00", "priority": 2 }, { "eqName": "B2丝印", "pl": "B", "content": "印刷轴异常", "creator": "卢敏", "time": "2022-11-20 04:45:00", "priority": 2 },
{ "eqName": "磨边机", "pl": "A", "content": "磨轮过载", "creator": "方勇", "time": "2022-11-20 06:41:06", "priority": 2 }, { "eqName": "A3磨边", "pl": "A", "content": "磨轮过载", "creator": "方勇", "time": "2022-11-20 06:41:06", "priority": 2 },
{ "eqName": "清洗机", "pl": "B", "content": "毛刷过载", "creator": "赵静", "time": "2022-11-20 03:36:47", "priority": 2 }, { "eqName": "B2打孔后清洗", "pl": "B", "content": "毛刷过载", "creator": "赵静", "time": "2022-11-20 03:36:47", "priority": 2 },
{ "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "姜洋", "time": "2022-11-20 07:56:26", "priority": 3 }, // { "eqName": "镀膜", "pl": "A", "content": "胶辊变频异常", "creator": "姜洋", "time": "2022-11-20 07:56:26", "priority": 3 },
{ "eqName": "磨边机", "pl": "A", "content": "磨轮过载", "creator": "赖艳", "time": "2022-11-20 12:01:14", "priority": 1 }, { "eqName": "A2磨边", "pl": "A", "content": "磨轮过载", "creator": "赖艳", "time": "2022-11-20 12:01:14", "priority": 1 },
{ "eqName": "丝印机", "pl": "A", "content": "进气压力过低", "creator": "熊静", "time": "2022-11-20 03:24:33", "priority": 1 }, { "eqName": "A2丝印", "pl": "A", "content": "进气压力过低", "creator": "熊静", "time": "2022-11-20 03:24:33", "priority": 1 },
{ "eqName": "清洗机", "pl": "B", "content": "进料检测异常", "creator": "龚明", "time": "2022-11-21 16:26:11", "priority": 2 }, { "eqName": "B1打孔后清洗", "pl": "B", "content": "进料检测异常", "creator": "龚明", "time": "2022-11-21 16:26:11", "priority": 2 },
{ "eqName": "钢化炉", "pl": "A", "content": "传动变频器故障", "creator": "万娟", "time": "2022-11-21 08:44:41", "priority": 2 }, { "eqName": "A钢化", "pl": "A", "content": "传动变频器故障", "creator": "万娟", "time": "2022-11-21 08:44:41", "priority": 2 },
{ "eqName": "丝印机", "pl": "B", "content": "进气压力过低", "creator": "徐丽", "time": "2022-11-21 21:15:10", "priority": 2 }, { "eqName": "B3丝印", "pl": "B", "content": "进气压力过低", "creator": "徐丽", "time": "2022-11-21 21:15:10", "priority": 2 },
{ "eqName": "镀膜", "pl": "A", "content": "固化变频异常", "creator": "叶娜", "time": "2022-11-21 22:45:13", "priority": 1 }, // { "eqName": "镀膜", "pl": "A", "content": "固化变频异常", "creator": "叶娜", "time": "2022-11-21 22:45:13", "priority": 1 },
{ "eqName": "钢化炉", "pl": "A", "content": "传动变频器故障", "creator": "田磊", "time": "2022-11-21 07:24:59", "priority": 2 }, { "eqName": "A钢化", "pl": "A", "content": "传动变频器故障", "creator": "田磊", "time": "2022-11-21 07:24:59", "priority": 2 },
{ "eqName": "钢化炉", "pl": "A", "content": "加热炉体超温报警", "creator": "邱平", "time": "2022-11-21 17:53:18", "priority": 2 }, { "eqName": "A钢化", "pl": "A", "content": "加热炉体超温报警", "creator": "邱平", "time": "2022-11-21 17:53:18", "priority": 2 },
{ "eqName": "磨边机", "pl": "B", "content": "磨轮过载", "creator": "赵艳", "time": "2022-11-21 18:10:32", "priority": 2 }, { "eqName": "B2磨边后清洗", "pl": "B", "content": "磨轮过载", "creator": "赵艳", "time": "2022-11-21 18:10:32", "priority": 2 },
{ "eqName": "钢化炉", "pl": "B", "content": "传动变频器故障", "creator": "江伟", "time": "2022-11-21 17:29:44", "priority": 2 }, { "eqName": "B钢化", "pl": "B", "content": "传动变频器故障", "creator": "江伟", "time": "2022-11-21 17:29:44", "priority": 2 },
{ "eqName": "清洗机", "pl": "B", "content": "输送变频报警", "creator": "周洋", "time": "2022-11-21 02:49:09", "priority": 3 }, { "eqName": "B3磨边后清洗", "pl": "B", "content": "输送变频报警", "creator": "周洋", "time": "2022-11-21 02:49:09", "priority": 3 },
{ "eqName": "磨边机", "pl": "A", "content": "磨轮过载", "creator": "邱超", "time": "2022-11-21 20:41:53", "priority": 1 }, { "eqName": "A1磨边", "pl": "A", "content": "磨轮过载", "creator": "邱超", "time": "2022-11-21 20:41:53", "priority": 1 },
] ]
/** 设备异常报警 */ /** 设备异常报警 */
@ -100,42 +100,42 @@ const LifeRemainComponent = {
export const equipmentAlarmProps = [ export const equipmentAlarmProps = [
{ label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 100 }, { label: '设备名称', prop: 'eqName', align: 'center', 'min-width': 100 },
{ label: '设备编码', prop: 'eqCode', align: 'center', 'min-width': 100 }, { label: '设备编码', prop: 'eqCode', align: 'center', 'min-width': 100 },
{ label: '所属产线', prop: 'pl', align: 'center' }, // { label: '所属产线', prop: 'pl', align: 'center' },
{ label: '报警级别', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 85 }, { label: '报警级别', prop: 'priority', align: 'center', subcomponent: PriorityComponent, 'min-width': 85 },
{ label: '报警内容', prop: 'content', align: 'center' } { label: '报警内容', prop: 'content', align: 'center' }
] ]
export const equipmentAlarmDatalist = [ export const equipmentAlarmDatalist = [
{ {
"pl": "B", "eqName": "丝印机", "eqCode": "B5SP20200109025453", "content": "网版推出异常", "priority": 3 "pl": "B", "eqName": "B1丝印", "eqCode": "B5SP20200109025453", "content": "网版推出异常", "priority": 3
}, },
{ "pl": "A", "eqName": "磨边后清洗机", "eqCode": "A2CAE20210605043851", "content": "输送变频报警", "priority": 2 }, { "pl": "A", "eqName": "A2磨边后清洗", "eqCode": "A2CAE20210605043851", "content": "输送变频报警", "priority": 2 },
{ "pl": "B", "eqName": "磨边机", "eqCode": "B4ED20200328154356", "content": "磨轮过载", "priority": 1 }, { "pl": "B", "eqName": "B2磨边", "eqCode": "B4ED20200328154356", "content": "磨轮过载", "priority": 1 },
{ "pl": "B", "eqName": "镀膜", "eqCode": "B5FC20220307070115", "content": "胶辊变频异常", "priority": 2 }, // { "pl": "B", "eqName": "镀膜", "eqCode": "B5FC20220307070115", "content": "胶辊变频异常", "priority": 2 },
{ "pl": "B", "eqName": "丝印机", "eqCode": "B7SP20190927110003", "content": "印刷轴异常", "priority": 2 }, { "pl": "B", "eqName": "B2丝印", "eqCode": "B7SP20190927110003", "content": "印刷轴异常", "priority": 2 },
{ {
"pl": "A", "eqName": "清洗机", "eqCode": "A3CAP20200727075125", "content": "进料检测异常", "priority": 3 "pl": "A", "eqName": "A1磨边后清洗", "eqCode": "A3CAP20200727075125", "content": "进料检测异常", "priority": 3
}, },
{ "pl": "A", "eqName": "丝印机", "eqCode": "A7SP20200512213432", "content": "进气压力过低", "priority": 3 }, { "pl": "A", "eqName": "A3丝印", "eqCode": "A7SP20200512213432", "content": "进气压力过低", "priority": 3 },
{ {
"pl": "A", "eqName": "磨边机", "eqCode": "A4ED20220608145053", "content": "磨轮过载", "priority": 2 "pl": "A", "eqName": "A2磨边", "eqCode": "A4ED20220608145053", "content": "磨轮过载", "priority": 2
}, },
{ "pl": "B", "eqName": "钢化炉", "eqCode": "B4CO20200526045602", "content": "传动变频器故障", "priority": 1 }, { "pl": "B", "eqName": "B钢化", "eqCode": "B4CO20200526045602", "content": "传动变频器故障", "priority": 1 },
{ {
"pl": "B", "eqName": "清洗机", "eqCode": "B6CAP20220326162041", "content": "毛刷过载", "priority": 2 "pl": "B", "eqName": "B1磨边后清洗", "eqCode": "B6CAP20220326162041", "content": "毛刷过载", "priority": 2
}, },
{ "pl": "A", "eqName": "磨边机", "eqCode": "A4ED20200325081934", "content": "磨轮过载", "priority": 2 }, { "pl": "A", "eqName": "A1磨边", "eqCode": "A4ED20200325081934", "content": "磨轮过载", "priority": 2 },
{ {
"pl": "B", "eqName": "丝印机", "eqCode": "B1SP20201220183649", "content": "印刷轴异常", "priority": 2 "pl": "B", "eqName": "B1丝印", "eqCode": "B1SP20201220183649", "content": "印刷轴异常", "priority": 2
}, },
{ "pl": "A", "eqName": "镀膜", "eqCode": "A3SC20220414054819", "content": "固化变频异常", "priority": 2 }, // { "pl": "A", "eqName": "镀膜", "eqCode": "A3SC20220414054819", "content": "固化变频异常", "priority": 2 },
{ "pl": "A", "eqName": "磨边机", "eqCode": "A8ED20200704010549", "content": "磨轮过载", "priority": 2 }, { "pl": "A", "eqName": "A3磨边", "eqCode": "A8ED20200704010549", "content": "磨轮过载", "priority": 2 },
{ "pl": "B", "eqName": "清洗机", "eqCode": "B1CAT20200323134700", "content": "进料检测异常", "priority": 3 }, { "pl": "B", "eqName": "B3磨边后清洗", "eqCode": "B1CAT20200323134700", "content": "进料检测异常", "priority": 3 },
{ "pl": "A", "eqName": "丝印机", "eqCode": "A1SP20200513020427", "content": "网版推出异常", "priority": 1 }, { "pl": "A", "eqName": "A3丝印", "eqCode": "A1SP20200513020427", "content": "网版推出异常", "priority": 1 },
{ "pl": "A", "eqName": "钢化炉", "eqCode": "A7CO20210928172616", "content": "加热炉体超温报警", "priority": 2 }, { "pl": "A", "eqName": "A钢化", "eqCode": "A7CO20210928172616", "content": "加热炉体超温报警", "priority": 2 },
{ "pl": "A", "eqName": "镀膜", "eqCode": "A5SC20210104132647", "content": "固化变频异常", "priority": 1 }, // { "pl": "A", "eqName": "镀膜", "eqCode": "A5SC20210104132647", "content": "固化变频异常", "priority": 1 },
{ "pl": "A", "eqName": "钢化炉", "eqCode": "A4ED20210225140150", "content": "加热炉体超温报警", "priority": 1 }, { "pl": "A", "eqName": "A钢化", "eqCode": "A4ED20210225140150", "content": "加热炉体超温报警", "priority": 1 },
{ "pl": "B", "eqName": "清洗机", "eqCode": "B6CAP20200831083210", "content": "进料检测异常", "priority": 2 }, { "pl": "B", "eqName": "B2磨边后清洗", "eqCode": "B6CAP20200831083210", "content": "进料检测异常", "priority": 2 },
] ]
/** 设备分析 */ /** 设备分析 */
@ -258,9 +258,9 @@ export const wwwOrderProps = [
] ]
export const rightSideDatalist = [ export const rightSideDatalist = [
{ "orderId": "WOD20200807030135", "time": "2021-02-12 14:08:04", "eq": "磨边", "status": 3, "team": "白班", "duration": "26min" }, { "orderId": "WOD20200807030135", "time": "2022-11-12 14:08:04", "eq": "A1磨边", "status": 3, "team": "白班", "duration": "26min" },
{ "orderId": "WOD20200413103728", "time": "2020-11-26 20:11:39", "eq": "固化", "status": 1, "team": "夜班", "duration": "24min" }, { "orderId": "WOD20210217143647", "time": "2022-11-15 18:48:40", "eq": "A1打孔", "status": 2, "team": "白班", "duration": "27min" },
{ "orderId": "WOD20210217143647", "time": "2021-08-15 18:48:40", "eq": "预热", "status": 2, "team": "白班", "duration": "27min" }, { "orderId": "WOD20200413103728", "time": "2022-11-26 20:11:39", "eq": "A1固化", "status": 1, "team": "夜班", "duration": "24min" },
] ]
export const rightSideDatalist2 = [ export const rightSideDatalist2 = [
{ "orderId": "WOD20220403013343", "pl": "A", "status": 3, "team": "白班", "duration": "24min" }, { "orderId": "WOD20220403013343", "pl": "A", "status": 3, "team": "白班", "duration": "24min" },
@ -268,14 +268,14 @@ export const rightSideDatalist2 = [
{ "orderId": "WOD20210902180855", "pl": "A", "status": 2, "team": "夜班", "duration": "23min" }, { "orderId": "WOD20210902180855", "pl": "A", "status": 2, "team": "夜班", "duration": "23min" },
] ]
export const rightSideDatalist3 = [ export const rightSideDatalist3 = [
{ "orderId": "WOD20210829073921", "eq": "钢后清洗机", "status": 2, "team": "白班", "duration": "29min" }, { "orderId": "WOD20210829073921", "eq": "A3钢化后清洗", "status": 2, "team": "白班", "duration": "29min" },
{ "orderId": "WOD20220429180823", "eq": "丝印", "status": 2, "team": "夜班", "duration": "26min" }, { "orderId": "WOD20220429180823", "eq": "A3丝印", "status": 2, "team": "夜班", "duration": "26min" },
{ "orderId": "WOD20220915050149", "eq": "磨边后清洗机", "status": 3, "team": "白班", "duration": "21min" }, { "orderId": "WOD20220915050149", "eq": "A3磨边后清洗", "status": 3, "team": "白班", "duration": "21min" },
] ]
export const rightSideDatalist4 = [ export const rightSideDatalist4 = [
{ "orderId": "WOD20210522165229", "pl": "A", "status": 2, "team": "夜班", "time": "2021-12-17 13:31:24" }, { "orderId": "WOD20210522165229", "pl": "A", "status": 2, "team": "夜班", "time": "2022-12-17 13:31:24" },
{ "orderId": "WOD20211205183921", "pl": "B", "status": 1, "team": "白班", "time": "2022-06-27 10:52:19" },
{ "orderId": "WOD20210114183705", "pl": "A", "status": 1, "team": "夜班", "time": "2022-11-22 02:59:50" }, { "orderId": "WOD20210114183705", "pl": "A", "status": 1, "team": "夜班", "time": "2022-11-22 02:59:50" },
{ "orderId": "WOD20211205183921", "pl": "B", "status": 1, "team": "白班", "time": "2022-11-27 10:52:19" },
] ]

31
src/views/FactoryManage/RealtimeDataOfOrder.vue
View File

@ -147,21 +147,22 @@ export default {
fetchList('order').then(response => { fetchList('order').then(response => {
if (response.data) { if (response.data) {
this.dataList = response.data this.dataList = response.data
this.dataList.push({ // 11-mes:
orderName: '22订单', // this.dataList.push({
productName: 'xxx光伏玻璃2.0B', // orderName: '22订单',
productSize: '2*1128*2272', // productName: 'xxx光伏玻璃2.0B',
productionLine: 'C线 D线 A线', // productSize: '2*1128*2272',
det: Array(3).fill({ // productionLine: 'C线 D线 A线',
inputNum: '-259730', // det: Array(3).fill({
outputNum: '-772443', // inputNum: '-259730',
passRate: 100, // outputNum: '-772443',
recordTime: '2022-09-06T14:00:00', // passRate: 100,
scrapNum: '0', // recordTime: '2022-09-06T14:00:00',
sumInputNum: '259730', // scrapNum: '0',
sumOutputNum: '772443' // sumInputNum: '259730',
}) // sumOutputNum: '772443'
}) // })
// })
this.transformData() this.transformData()
} else { } else {
this.dataList.splice(0) this.dataList.splice(0)

47
src/views/FactoryManage/TeamInfo.vue
View File

@ -8,10 +8,7 @@
--> -->
<template> <template>
<div class="app-container"> <div class="app-container">
<head-form <head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
:form-config="headFormConfig"
@headBtnClick="btnClick"
/>
<base-table <base-table
:top-btn-config="topBtnConfig" :top-btn-config="topBtnConfig"
:page="listQuery.current" :page="listQuery.current"
@ -21,12 +18,7 @@
:is-loading="listLoading" :is-loading="listLoading"
@clickTopBtn="clickTopBtn" @clickTopBtn="clickTopBtn"
> >
<method-btn <method-btn slot="handleBtn" :width="trueWidth" :method-list="tableBtn" @clickBtn="handleClick" />
slot="handleBtn"
:width="trueWidth"
:method-list="tableBtn"
@clickBtn="handleClick"
/>
</base-table> </base-table>
<pagination <pagination
v-show="total > 0" v-show="total > 0"
@ -35,11 +27,7 @@
:limit.sync="listQuery.size" :limit.sync="listQuery.size"
@pagination="getList()" @pagination="getList()"
/> />
<team-info-detail <team-info-detail v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList" />
v-if="addOrUpdateVisible"
ref="addOrUpdate"
@refreshDataList="getList"
/>
<team-info-add <team-info-add
v-if="addVisible" v-if="addVisible"
ref="addNew" ref="addNew"
@ -61,6 +49,7 @@ import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
import { timeFormatter } from '@/filters' import { timeFormatter } from '@/filters'
import i18n from '@/lang' import i18n from '@/lang'
// import data from '../pdf/content' // import data from '../pdf/content'
import { Random } from 'mockjs'
/** /**
* 表格表头配置项 TypeScript接口注释 * 表格表头配置项 TypeScript接口注释
@ -218,9 +207,31 @@ export default {
this.listQuery.planHandoverEndTime = this.headFormValue.timeSlot ? this.headFormValue.timeSlot[1] : '' this.listQuery.planHandoverEndTime = this.headFormValue.timeSlot ? this.headFormValue.timeSlot[1] : ''
this.$nextTick(() => { this.$nextTick(() => {
this.listLoading = true this.listLoading = true
list(this.listQuery).then((response) => { list(this.listQuery).then(response => {
if (response.data.records) { if (response.data.records) {
this.list = response.data.records // this.list = response.data.records
// 11-mes 数据模拟修改
this.list = response.data.records.map(item => {
let startDate = 2022 + '-' + '11-' + Random.integer(1, 29)
let endDate = startDate.split('-')
endDate[2] = +endDate[2] + Random.integer(0, 3)
let startHour = Random.integer(1, 22)
return {
...item,
planHandoverTime:
startDate + ' ' + (startHour < 10 ? '0' + startHour : '' + startHour) + Random.datetime(':mm:ss'),
planOfflineTime:
endDate.join('-') +
' ' +
(startHour + 1 < 10 ? +'0' + (startHour + 1) : 1 + startHour + '') +
Random.datetime(':mm:ss')
}
})
console.log("list;', ", this.list)
} else { } else {
this.list.splice(0, this.list.length) this.list.splice(0, this.list.length)
} }
@ -263,7 +274,7 @@ export default {
const blob = new Blob([response.data]) const blob = new Blob([response.data])
const reader = new FileReader() const reader = new FileReader()
reader.readAsDataURL(blob) reader.readAsDataURL(blob)
reader.onload = (e) => { reader.onload = e => {
const a = document.createElement('a') const a = document.createElement('a')
a.download = fileName a.download = fileName
a.href = e.target.result a.href = e.target.result

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

@ -38,8 +38,8 @@
<!-- 第一行 --> <!-- 第一行 -->
<div class="quality-analysis__body__row-1"> <div class="quality-analysis__body__row-1">
<!-- 第一列 --> <!-- 第一列 -->
<div class="flex gap-16"> <div class="flex gap-16" style="flex: 1;">
<div class="grow" style="max-width: 24vw;"> <div style="width: calc(400px * var(--beilv)); flex: 1;">
<techy-box class="" style="padding: calc(8px * var(--beilv));"> <techy-box class="" style="padding: calc(8px * var(--beilv));">
<techy-analysis-header type="special">产线缺陷日对比</techy-analysis-header> <techy-analysis-header type="special">产线缺陷日对比</techy-analysis-header>
<div <div
@ -80,7 +80,7 @@
</div> </div>
</techy-box> </techy-box>
</div> </div>
<div class="grow" style="max-width: 24vw;"> <div style="width: calc(400px * var(--beilv)); flex: 1;">
<techy-box class="" style="padding: calc(8px * var(--beilv));"> <techy-box class="" style="padding: calc(8px * var(--beilv));">
<techy-analysis-header type="special">产线缺陷月对比</techy-analysis-header> <techy-analysis-header type="special">产线缺陷月对比</techy-analysis-header>
<div <div
@ -126,8 +126,8 @@
</div> </div>
<!-- 第二列 --> <!-- 第二列 -->
<div class="grow flex gap-16"> <div class="flex gap-16" style="flex: 1; width: 1px;">
<div class="width-222"> <div class="" style="width: calc(380px * var(--beilv)); flex: 1;">
<techy-box class="" style="padding: calc(16px * var(--beilv));"> <techy-box class="" style="padding: calc(16px * var(--beilv));">
<techy-analysis-header :show-top-icon="false"> <techy-analysis-header :show-top-icon="false">
产线缺陷分析 产线缺陷分析
@ -184,33 +184,9 @@
</div> </div>
</techy-box> </techy-box>
</div> </div>
<div class="grow"> <div class="" style="width: calc(400px * var(--beilv)); flex: 1;">
<techy-box class="" style="padding: calc(16px * var(--beilv));"> <techy-box class="" style="padding: 0 calc(16px * var(--beilv));">
<techy-analysis-header class="production-rate"> <productionRateHeader @update-data="obj => { dataUpdateToken = obj.str; dateMode2 = obj.mode }">产品成品率</productionRateHeader>
产品成品率
<template v-slot:dateSelect>
<div class="date-select">
<span
:class="{ 'date-select__active': dateMode2 === 'day' }"
@click="
dateMode2 = 'day'
dataUpdateToken = '' + Math.random()
"
>
日
</span>
<span
:class="{ 'date-select__active': dateMode2 === 'month' }"
@click="
dateMode2 = 'month'
dataUpdateToken = '' + Math.random()
"
>
月
</span>
</div>
</template>
</techy-analysis-header>
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"> <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" /> <new-line-stack :data-update-token="dataUpdateToken" :mode="dateMode2" />
</div> </div>
@ -285,6 +261,7 @@ import TechyBox from './components/TechyBox.vue'
import TechyTable from './components/TechyTable.vue' import TechyTable from './components/TechyTable.vue'
import TechyAnalysisBar from './components/TechyAnalysisBar.vue' import TechyAnalysisBar from './components/TechyAnalysisBar.vue'
import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue' import TechyAnalysisHeader from './components/TechyAnalysisHeader.vue'
import productionRateHeader from './components/productionRateHeader.vue'
// import FaultCategoryChart from './components/charts/FaultCategoryChart.vue' // import FaultCategoryChart from './components/charts/FaultCategoryChart.vue'
import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue' import PlFaultAnalysisPieChart from './components/charts/PlFaultAnalysisPieChart.vue'
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
@ -307,7 +284,8 @@ export default {
// FaultCategoryChart, // FaultCategoryChart,
PlFaultAnalysisPieChart, PlFaultAnalysisPieChart,
TechyBar, TechyBar,
NewLineStack NewLineStack,
productionRateHeader
}, },
data() { data() {
const quexianDatalist = [ const quexianDatalist = [
@ -425,23 +403,26 @@ export default {
</script> </script>
<style scoped> <style scoped>
::-webkit-scrollbar { .visual-container >>> ::-webkit-scrollbar {
width: calc(8px * var(--beilv)); width: calc(8px * var(--beilv));
} }
::-webkit-scrollbar-track { .visual-container >>> ::-webkit-scrollbar-track {
background-color: #14243f; background-color: #14243f;
border-radius: 0; border-radius: 0;
} }
::-webkit-scrollbar-button { .visual-container >>> ::-webkit-scrollbar-button {
width: calc(8px * var(--beilv)); /* width: calc(8px * var(--beilv));
height: calc(8px * var(--beilv)); height: calc(8px * var(--beilv)); */
display: none;
width: 0;
height: 0;
background: #5bc4bf9f; background: #5bc4bf9f;
position: relative; position: relative;
} }
::-webkit-scrollbar-thumb { .visual-container >>> ::-webkit-scrollbar-thumb {
border-radius: calc(8px * var(--beilv)); border-radius: calc(8px * var(--beilv));
background: #5bc4bf9f; background: #5bc4bf9f;
} }
@ -627,13 +608,38 @@ export default {
width: calc(375px * var(--beilv)); width: calc(375px * var(--beilv));
} }
@media all and (max-width: 2040px) { /* @media all and (max-width: 1680px) {
.production-rate { .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; 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> </style>

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

@ -1,13 +1,12 @@
<template> <template>
<div class="techy-analysis-header"> <div class="techy-analysis-header">
<template v-if="type === 'special'"> <template v-if="type === 'special'">
<div <div class="special-wrapper">
style="transform: skewX(32deg); background: #fff0; width: 100%; height: calc(22px * var(--beilv)); display: flex; justify-content: center; align-items: center;" <div class="special-wrapper__left"></div>
> <div class="special-wrapper__middle">
<div class="legend" style="background: #fff0; width: calc(126px * var(--beilv));"></div> <div class="special-wrapper__middle--inner">
<div style="transform: translateX(12%)">
<div style="flex: 1; white-space: nowrap; overflow: hidden;"> <span class="top-icon">
<span class="top-icon" style="transform: skewX(-32deg); ">
<svg <svg
width="100%" width="100%"
height="100%" height="100%"
@ -26,7 +25,10 @@
id="编组-2备份" id="编组-2备份"
transform="translate(28.000000, 8.500000) scale(1, -1) translate(-28.000000, -8.500000) translate(0.000000, 2.000000)" 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"
points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"
></polygon>
<polygon <polygon
id="路径-11备份" id="路径-11备份"
opacity="0.8" opacity="0.8"
@ -55,10 +57,10 @@
</g> </g>
</svg> </svg>
</span> </span>
<span class="techy-analysis-header__title" style="display: inline-block; transform: translateX(-4px) skewX(-32deg); "> <span class="techy-analysis-header__title">
<slot /> <slot />
</span> </span>
<span class="top-icon" style="transform: skewX(-32deg); "> <span class="top-icon">
<svg <svg
width="100%" width="100%"
height="100%" height="100%"
@ -77,7 +79,10 @@
id="编组-2备份-2" id="编组-2备份-2"
transform="translate(262.000000, 8.500000) scale(-1, -1) translate(-262.000000, -8.500000) translate(234.000000, 2.000000)" 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"
points="47.1645736 7.79376563e-14 43 0 52.2664792 13 56 13"
></polygon>
<polygon <polygon
id="路径-11备份" id="路径-11备份"
opacity="0.8" opacity="0.8"
@ -107,13 +112,14 @@
</svg> </svg>
</span> </span>
</div> </div>
</div>
</div>
<div <div class="special-wrapper__right">
class="legend legend-right" <div class="special-wrapper__right--inner">
style="transform: skewX(-32deg); background: #fff0; width: calc(126px * var(--beilv)); padding-left: calc(8px * var(--beilv));" <div class="pla" style="margin-right: calc(2px * var(--beilv));">产线A</div>
> <div class="plb">产线B</div>
<div class="legend-item pla" style=" margin-right: calc(8px * var(--beilv));">产线A</div> </div>
<div class="legend-item plb" style=" ">产线B</div>
</div> </div>
</div> </div>
</template> </template>
@ -286,13 +292,67 @@ export default {
width: calc(8px * var(--beilv)); width: calc(8px * var(--beilv));
height: calc(8px * var(--beilv)); height: calc(8px * var(--beilv));
background: #fffc; background: #fffc;
margin-right: calc(8px * var(--beilv)); margin-right: calc(4px * var(--beilv));
} }
.pla::before { .special-wrapper {
position: absolute;
top: 0;
left: 0;
transform: skewX(35deg);
background: #fff0;
width: 100%;
height: calc(22px * var(--beilv));
display: flex;
justify-content: center;
align-items: center;
}
.special-wrapper__left {
width: 1px;
flex: 1;
}
.special-wrapper__middle {
overflow: hidden;
}
.special-wrapper__middle--inner {
transform: skewX(-35deg);
white-space: nowrap;
display: flex;
height: 100%;
align-items: center;
}
.special-wrapper__right {
padding-left: calc(8px * var(--beilv));
padding-right: calc(8px * var(--beilv));
}
.special-wrapper__right--inner {
transform: skewX(-35deg);
display: flex;
align-items: center;
gap: calc(4px * var(--beilv));
height: 100%;
width: calc(100px * var(--beilv));
padding-left: calc(6px * var(--beilv));
font-size: calc(12px * var(--beilv));
color: #fff9;
}
.special-wrapper__right--inner > div::before {
content: '';
display: inline-block;
margin-right: calc(2px * var(--beilv));
width: calc(8px * var(--beilv));
height: calc(8px * var(--beilv));
}
.plb::before {
background: linear-gradient(to top, #49fbd6, transparent); background: linear-gradient(to top, #49fbd6, transparent);
} }
.plb::before { .pla::before {
background: linear-gradient(to top, #49b2ff, transparent); background: linear-gradient(to top, #49b2ff, transparent);
} }
</style> </style>

9
src/views/QualityManager/components/charts/TechyBar.vue
View File

@ -159,7 +159,7 @@ export default {
option: { option: {
grid: { grid: {
left: '10%', left: '10%',
top: 48, top: 72,
bottom: 28 bottom: 28
}, },
xAxis: { xAxis: {
@ -195,13 +195,14 @@ export default {
type: 'value', type: 'value',
// min: -25, // min: -25,
min: this.extraSpaceBetweenZero * -1, min: this.extraSpaceBetweenZero * -1,
name: this.unitName, name: this.unitName + ' ',
nameTextStyle: { nameTextStyle: {
color: '#fff8', color: '#fff8',
fontSize: 8, fontSize: 12,
verticalAlign: 'top', verticalAlign: 'top',
align: 'right' align: 'right'
}, },
nameGap: 20,
axisLine: { axisLine: {
show: true, show: true,
lineStyle: { lineStyle: {
@ -210,7 +211,7 @@ export default {
}, },
axisLabel: { axisLabel: {
color: '#fff8', color: '#fff8',
fontSize: 10, fontSize: 12,
/** y轴不从0开始，也可以用 xAxis 向下 offset 的方式模拟 **/ /** y轴不从0开始，也可以用 xAxis 向下 offset 的方式模拟 **/
formatter: function(value, index) { formatter: function(value, index) {
if (value < 0) { if (value < 0) {

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

@ -6,26 +6,30 @@
import echarts from 'echarts' import echarts from 'echarts'
import resize from '@/views/OperationalOverview/components/mixins/resize' import resize from '@/views/OperationalOverview/components/mixins/resize'
export default { class ChartOption {
name: 'PlFaultAnalysisPieChart', constructor() {
mixins: [resize], this.color = ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6']
props: {
mode: { // this.legend = {
type: String, // top: 11,
default: '', // right: 32,
validator: val => ['month', 'day'].indexOf(val) !== -1 // itemWidth: 8,
}, // itemHeight: 8,
dataUpdateToken: { // textStyle: {
type: String, // color: '#fff9',
default: 'default-token' // fontSize: 10
// }
// }
this.grid = {
top: 64,
left: 12,
right: 28,
bottom: 20,
containLabel: true
} }
},
data() { this.tooltip = {
return {
chart: null,
configs: {
color: ['#DDB112', '#1A99FF', '#FB418C', '#A691FF', '#49FBD6'],
tooltip: {
trigger: 'axis', trigger: 'axis',
extraCssText: 'width: 180px !important; ', extraCssText: 'width: 180px !important; ',
axisPointer: { axisPointer: {
@ -34,26 +38,20 @@ export default {
backgroundColor: '#6a7985' backgroundColor: '#6a7985'
} }
} }
}, }
grid: {
top: 56, this.xAxis = {
left: '2%',
right: '5%',
bottom: '5%',
containLabel: true
},
xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: '#ffffff66' color: '#fff3'
} }
}, },
axisTick: { show: false }, axisTick: { show: false },
axisLabel: { axisLabel: {
textStyle: { textStyle: {
fontSize: 10, fontSize: 12,
color: '#fff8' // color: '#fff8' //
}, },
margin: 12 margin: 12
@ -62,17 +60,18 @@ export default {
this.mode === 'month' this.mode === 'month'
? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20] ? [1, 2, 3, 4, 5, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] : ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}, }
yAxis: [ this.yAxis = [
{ {
name: '成品率 ', name: '成品率 ',
type: 'value', type: 'value',
min: 'dataMin', min: 'dataMin',
splitNumber: 4, splitNumber: 4,
nameGap: 16,
nameTextStyle: { nameTextStyle: {
color: 'rgba(255,255,255,0.7)', color: 'rgba(255,255,255,0.7)',
fontSize: 10, fontSize: 12,
align: 'left', align: 'left',
verticalAlign: 'bottom' verticalAlign: 'bottom'
}, },
@ -89,6 +88,7 @@ export default {
axisLabel: { axisLabel: {
formatter: '{value} %', formatter: '{value} %',
textStyle: { textStyle: {
fontSize: 12,
color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色 color: 'rgba(255,255,255,0.5)' // 坐标值得具体的颜色
} }
}, },
@ -99,8 +99,9 @@ export default {
} }
} }
} }
], ]
series: [
this.series = [
{ {
name: 'A1下片机', name: 'A1下片机',
type: 'line', type: 'line',
@ -116,7 +117,7 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: '#FB418C66' // 0% 处的颜色 color: '#DDB11266' // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
@ -164,7 +165,7 @@ export default {
colorStops: [ colorStops: [
{ {
offset: 0, offset: 0,
color: '#DDB11266' // 0% 处的颜色 color: '#1A99FFCC' // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
@ -196,156 +197,58 @@ export default {
return v 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 +259,9 @@ export default {
}, },
mounted() { mounted() {
window.addEventListener('resize', function() {
if (this.chart) {
this.chart.resize()
}
})
this.$nextTick(() => { 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) if (!this.chart) this.chart = echarts.init(this.$refs.chartContainer)
this.setChartOption()
this.chart.setOption(this.configs)
this.chart.resize()
}) })
}, },
methods: { methods: {
@ -401,6 +295,15 @@ export default {
}) })
if (this.chart) this.chart.setOption(this.configs) 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)
} }
} }
} }

243
src/views/QualityManager/components/productionRateHeader.vue Normal file
View File

@ -0,0 +1,243 @@
<template>
<div class="techy-analysis-header">
<div class="special-wrapper">
<div class="special-wrapper__left"></div>
<div class="special-wrapper__middle">
<div class="special-wrapper__middle--inner">
<div style="transform: translateX(4%)">
<span class="top-icon">
<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">
<slot />
</span>
<span class="top-icon">
<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>
</div>
<div class="special-wrapper__right">
<div class="special-wrapper__right--inner">
<span
:class="{ 'date-select__active': dateMode === 'day' }"
@click="
dateMode = 'day'
$emit('update-data', { str: '' + Math.random(), mode: dateMode })
"
>
日
</span>
<span
:class="{ 'date-select__active': dateMode === 'month' }"
@click="
dateMode = 'month'
$emit('update-data', { str: '' + Math.random(), mode: dateMode })
"
>
月
</span>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'TechyAnalysisHeader',
props: {
type: {
type: String,
default: 'dafault-type'
},
showTopIcon: {
type: Boolean,
default: true
}
},
data() {
return {
dateMode: 'day'
}
}
}
</script>
<style scoped>
.techy-analysis-header {
text-align: center;
margin-bottom: calc(16px * var(--beilv));
position: relative;
white-space: nowrap;
z-index: 1;
}
.techy-analysis-header__title {
color: #01cfcc;
font-size: calc(15px * var(--beilv));
line-height: calc(18px * var(--beilv));
}
.top-icon {
display: inline-block;
width: calc(56px * var(--beilv));
height: calc(12px * var(--beilv));
margin-bottom: calc(2px * var(--beilv));
}
.special-wrapper {
position: absolute;
top: calc(12px * var(--beilv));
left: 0;
transform: skewX(35deg);
background: #fff0;
width: 100%;
height: calc(22px * var(--beilv));
display: flex;
justify-content: center;
align-items: center;
}
.special-wrapper__left {
flex: 1;
min-width: calc(56px * var(--beilv));
}
.special-wrapper__middle {
overflow: hidden;
}
.special-wrapper__middle--inner {
transform: skewX(-35deg);
white-space: nowrap;
display: flex;
height: 100%;
align-items: center;
}
.special-wrapper__right {
width: calc(100px * var(--beilv));
padding-left: calc(8px * var(--beilv));
padding-right: calc(8px * var(--beilv));
display: flex;
align-items: center;
justify-content: flex-end;
}
.special-wrapper__right--inner {
transform: skewX(-35deg);
border-radius: calc(2px * var(--beilv));
overflow: hidden;
display: flex;
align-items: center;
height: 100%;
cursor: pointer;
}
.special-wrapper__right--inner > span {
display: inline-block;
width: calc(40px * var(--beilv));
text-align: center;
font-size: calc(12px * var(--beilv));
line-height: calc(18px * var(--beilv));
color: white;
background-color: #31878c94;
}
.special-wrapper__right--inner span.pl-select__active,
.special-wrapper__right--inner span.date-select__active {
background-color: #42bbb7;
}
</style>

3
src/views/report-manage/ReportSortChoise.vue
View File

@ -227,7 +227,10 @@ export default {
return { ...item, reportNames: ['班组加工数量统计'] } return { ...item, reportNames: ['班组加工数量统计'] }
} else if (item.name === '产线') { } else if (item.name === '产线') {
return { ...item, reportNames: ['产线日产量统计', '产线历史产量记录'] } return { ...item, reportNames: ['产线日产量统计', '产线历史产量记录'] }
} else if (item.name === '质量') {
return { ...item, quantity: 1, reportNames: ['质量缺陷分析'] }
} else { } else {
// mock
return item return item
} }
}) })