You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1413 lines
37 KiB
Vue
1413 lines
37 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="headTitle">注塑车间品质生产监控平台</div>
|
|
<div class="title" v-for="(i,k) in title"
|
|
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
|
|
{{ i }}
|
|
</div>
|
|
<!--每日人力出勤-->
|
|
<div class="manpowerAttendance" id="manpowerAttendance">
|
|
<Chart ref="manpowerAttendance"></Chart>
|
|
</div>
|
|
|
|
<!--IQC-->
|
|
<div class="IQC" id="IQC">
|
|
<div style="background-color: #09417088">
|
|
<div class="scrollTableItem" style="font-weight: bold; width: 8%;">
|
|
序号
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold; width:20%;">
|
|
订单编号
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold;width: 37%">
|
|
产品型号
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold; width: 12%;">
|
|
订单数量
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold; width: 12%;">
|
|
完成数量
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold; width: 11%;">
|
|
差异数
|
|
</div>
|
|
</div>
|
|
<vue-seamless-scroll
|
|
:class-option="scrollTableOption"
|
|
:data="scrollTableData"
|
|
class="case-item"
|
|
style="height: calc(100% - 35px);overflow: hidden;"
|
|
>
|
|
<div
|
|
v-for="(item, index) in scrollTableData"
|
|
:key="index"
|
|
|
|
>
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#05346088":"#032d5788")+";line-height:1.8vw"'>
|
|
<div
|
|
class="scrollTableItem" style=" width: 8%;">
|
|
{{ item.COLUMN_A }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style=" width:20%;">
|
|
{{ item.COLUMN_B }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style="width: 37%">
|
|
{{ item.COLUMN_C }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style=" width: 12%;">
|
|
{{ item.COLUMN_D }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style=" width: 12%;">
|
|
{{ item.COLUMN_E }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style=" width: 11%;">
|
|
{{ item.COLUMN_F }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
|
|
<!--生产效率-->
|
|
<div class="productionEfficiency" id="productionEfficiency">
|
|
<Chart ref="productionEfficiency"></Chart>
|
|
</div>
|
|
|
|
|
|
<!--周质量分析-->
|
|
<div class="equipmentPowerOne" id="equipmentPowerOne">
|
|
<Chart ref="equipmentPowerOne"></Chart>
|
|
</div>
|
|
<div class="equipmentPowerTwo" id="equipmentPowerTwo">
|
|
<Chart ref="equipmentPowerTwo"></Chart>
|
|
</div>
|
|
<div class="equipmentPowerThree" id="equipmentPowerThree">
|
|
<Chart ref="equipmentPowerThree"></Chart>
|
|
</div>
|
|
<div class="equipmentPowerFour" id="equipmentPowerFour">
|
|
<Chart ref="equipmentPowerFour"></Chart>
|
|
</div>
|
|
<div class="equipmentPowerFive" id="equipmentPowerFive">
|
|
<Chart ref="equipmentPowerFive"></Chart>
|
|
</div>
|
|
<div class="equipmentPowerSix" id="equipmentPowerSix">
|
|
<Chart ref="equipmentPowerSix"></Chart>
|
|
</div>
|
|
|
|
<!--不良品监控-->
|
|
<div class="defectiveProducts" id="defectiveProducts">
|
|
<Chart ref="defectiveProducts"></Chart>
|
|
</div>
|
|
|
|
<div class="topLeft" id="topLeft">
|
|
<Chart ref="topLeft"></Chart>
|
|
</div>
|
|
|
|
<div v-html="safeDayHtml"></div>
|
|
<div class="totalNum">合计：{{ totalNum }}台</div>
|
|
<div class="info1">订单数量:{{ info1.ddsl }} 完成数量:{{ info1.wcsl }} 清单率:{{
|
|
info1.wcsl === 0 ? 0 : ((info1.wcsl / info1.ddsl) * 100).toFixed(2)
|
|
}}%
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
import Chart from "../../../components/board/Chart";
|
|
import * as echarts from 'echarts'
|
|
import {getData} from "@/api/board/getData";
|
|
import {mixData} from "@/api/board/mixData";
|
|
|
|
let intervalFun = null
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
export default {
|
|
components: {
|
|
vueSeamlessScroll,
|
|
Chart
|
|
},
|
|
name: "Liner",
|
|
data() {
|
|
return {
|
|
nowLine: 2,
|
|
nowWeek: "",
|
|
info1: {
|
|
"ddsl": 1000,
|
|
"wcsl": 1000
|
|
},
|
|
title: [
|
|
'产量统计',
|
|
'三日订单执行情况',
|
|
'OEE',
|
|
'周生产型号统计',
|
|
'机台完成情况',
|
|
'不良品监控',
|
|
],
|
|
totalNum: 0,
|
|
titlePosition: [
|
|
{
|
|
top: 11.5,
|
|
left: 5.5
|
|
},
|
|
{
|
|
top: 11.5,
|
|
left: 32
|
|
},
|
|
{
|
|
top: 11.5,
|
|
left: 73.5
|
|
},
|
|
{
|
|
top: 55.4,
|
|
left: 5.5
|
|
},
|
|
{
|
|
top: 55.4,
|
|
left: 32
|
|
},
|
|
{
|
|
top: 55.4,
|
|
left: 73.6
|
|
},
|
|
],
|
|
scrollTableOption: {
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 0,
|
|
},
|
|
scrollTableData: [],
|
|
safeDayHtml: null,
|
|
RequestDataSet: [
|
|
{
|
|
e: 'zh-1-01',
|
|
i: "scada_aq_pro_tj_02('CX_01')",
|
|
f: (e) => {
|
|
this.totalNum = e.reduce((v1, v2) => v1 + v2.Y_VALUE_TWO, 0)
|
|
this.$refs.topLeft.setData({
|
|
grid: {
|
|
top: "20%",
|
|
left: "1%",
|
|
right: "5%",
|
|
bottom: "1%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
right: '0',
|
|
data: ['计划产量', '实际产量'],
|
|
textStyle: {
|
|
fontSize: 0.75 * vw,
|
|
color: "#F1F1F3",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
rotate: -20,
|
|
margin: 20,
|
|
textStyle: {
|
|
fontSize: 0.75 * vw,
|
|
color: "#F1F1F3",
|
|
},
|
|
},
|
|
data: e.map(e => e.X_VALUE),
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontSize: 0.75 * vw,
|
|
color: "#F1F1F3",
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,0.1)",
|
|
},
|
|
},
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '计划产量',
|
|
type: 'bar',
|
|
barGap: 0,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barWidth: '30%',
|
|
barMaxWidth: '50px',
|
|
itemStyle: {
|
|
//图形样式
|
|
normal: {
|
|
color: true ? '#db8151' : "#64BCEC",
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
formatter: `{c}${''}`,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,0.5)",
|
|
fontSize: 0.75 * vw
|
|
},
|
|
},
|
|
data: e.map(e => e.Y_VALUE_ONE),
|
|
},
|
|
{
|
|
name: '实际产量',
|
|
type: 'bar',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barWidth: '30%',
|
|
barMaxWidth: '50px',
|
|
barGap: '40%',
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
formatter: `{c}${''}`,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,0.5)",
|
|
fontSize: 0.75 * vw
|
|
},
|
|
},
|
|
itemStyle: {
|
|
//图形样式
|
|
normal: {
|
|
color: true ? '#9ce375' : "#4FD3B9",
|
|
},
|
|
},
|
|
data: e.map(e => e.Y_VALUE_TWO),
|
|
},
|
|
]
|
|
})
|
|
}
|
|
},
|
|
{
|
|
e: 'zh-1-03',
|
|
i: "scada_aq_pro_three_02('CX_01')",
|
|
f: (e) => {
|
|
this.info1 = {
|
|
ddsl: e.reduce((v1, v2) => v1 + parseFloat(v2.COLUMN_D) || 0, 0),
|
|
wcsl: e.reduce((v1, v2) => v1 + parseFloat(v2.COLUMN_E) || 0, 0)
|
|
}
|
|
this.scrollTableData = e
|
|
}
|
|
},
|
|
{
|
|
e: 'zh-1-05',
|
|
i: "",
|
|
f: (e) => {
|
|
this.$refs.manpowerAttendance.setData({
|
|
color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'],
|
|
grid: {
|
|
top: "20%",
|
|
bottom: "15%",
|
|
right: "5%"
|
|
},
|
|
dataZoom: [],
|
|
xAxis: {
|
|
margin: 10,
|
|
nameTextStyle: {
|
|
color: '#c0c3cd',
|
|
padding: [0, 0, -10, 0],
|
|
fontSize: 14,
|
|
},
|
|
axisLabel: {
|
|
color: '#c0c3cd', //X轴文字
|
|
fontSize: 14,
|
|
interval: 0,
|
|
margin: 20,
|
|
rotate: -20,
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: '#0B1535',
|
|
width: 1,
|
|
},
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#384267',
|
|
width: 1,
|
|
type: 'dashed',
|
|
},
|
|
show: true,
|
|
},
|
|
data: e.x,
|
|
type: 'category',
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
nameTextStyle: {
|
|
color: '#c0c3cd',
|
|
padding: [0, 0, -10, 0],
|
|
fontSize: 14,
|
|
},
|
|
axisLabel: {
|
|
color: '#c0c3cd', //Y轴文字
|
|
fontSize: 14,
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: '#384267',
|
|
width: 1,
|
|
},
|
|
show: true,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#384267',
|
|
type: 'line',
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff',
|
|
width: 1,
|
|
type: 'line',
|
|
},
|
|
show: false,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
data: e.y,
|
|
type: 'pictorialBar',
|
|
barMaxWidth: 'auto',
|
|
barWidth: 1.5 * vw,
|
|
symbol: 'rect',
|
|
itemStyle: {
|
|
color: function (val) {
|
|
if (e.y.length - val.dataIndex === 1) {
|
|
return 'red'
|
|
} else if (e.y.length - val.dataIndex === 2) {
|
|
return 'yellow'
|
|
|
|
} else {
|
|
return '#35AAFE'
|
|
}
|
|
}
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#a8aab0",
|
|
fontStyle: "normal",
|
|
fontFamily: "微软雅黑",
|
|
fontSize: 0.75 * vw,
|
|
},
|
|
},
|
|
}
|
|
},
|
|
{
|
|
data: e.y,
|
|
type: 'pictorialBar',
|
|
barWidth: 1.5 * vw,
|
|
symbolPosition: 'end',
|
|
symbol: 'diamond',
|
|
itemStyle: {
|
|
color: function (val) {
|
|
if (e.y.length - val.dataIndex === 1) {
|
|
return 'red'
|
|
} else if (e.y.length - val.dataIndex === 2) {
|
|
return 'yellow'
|
|
} else {
|
|
return '#66c8ff'
|
|
}
|
|
}
|
|
},
|
|
symbolOffset: ['0%', '-50%'],
|
|
symbolSize: [1.5 * vw, 10],
|
|
zlevel: 4,
|
|
},
|
|
{
|
|
data: e.y.map(val => 1),
|
|
type: 'pictorialBar',
|
|
barWidth: 1.5 * vw,
|
|
symbolPosition: 'end',
|
|
symbol: 'diamond',
|
|
itemStyle: {
|
|
color: function (val) {
|
|
if (e.y.length - val.dataIndex === 1) {
|
|
return 'red'
|
|
} else if (e.y.length - val.dataIndex === 2) {
|
|
return 'yellow'
|
|
|
|
} else {
|
|
return '#66c8ff'
|
|
}
|
|
}
|
|
},
|
|
symbolOffset: ['0%', '-20%'],
|
|
symbolSize: [1.5 * vw, 10],
|
|
zlevel: 4,
|
|
},
|
|
// {
|
|
// type: 'pictorialBar',
|
|
// name: 'pictorial element',
|
|
// symbol: function (val, index) {
|
|
// // return 'image://' + 'http://10.100.70.5:9090/' + data.yImg[index.dataIndex]
|
|
// },
|
|
// symbolSize: [40, 40],
|
|
// z: 10,
|
|
// data: e.y.map(val => {
|
|
// return {
|
|
// value: val,
|
|
// symbolPosition: 'end',
|
|
// symbolOffset: [0, '-190%']
|
|
// }
|
|
// })
|
|
// },
|
|
]
|
|
})
|
|
}
|
|
},
|
|
{
|
|
e: 'zh-1-06',
|
|
i: "scada_aq_pro_xh_02('CX_01')",
|
|
f: (e) => {
|
|
this.$refs.productionEfficiency.setData({
|
|
grid: {
|
|
top: "10%",
|
|
left: '10%',
|
|
right: "5%",
|
|
bottom: '15%',
|
|
// containLabel: true
|
|
},
|
|
dataZoom: [],
|
|
xAxis: {
|
|
data: e.map(e => e.X_VALUE),
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#0177d4",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: 0.5 * vw,
|
|
interval: 0,
|
|
rotate: -20,
|
|
},
|
|
},
|
|
yAxis: {
|
|
nameTextStyle: {
|
|
color: "#fff",
|
|
fontSize: 16,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#0177d4",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: 16,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#0177d4",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
barWidth: 1 * vw,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "#00b0ff",
|
|
},
|
|
{
|
|
offset: 0.8,
|
|
color: "#7052f4",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 0.75 * vw
|
|
},
|
|
},
|
|
data: e.map(e => e.Y_VALUE),
|
|
},
|
|
],
|
|
})
|
|
}
|
|
},
|
|
{
|
|
e: 'zh-1-07',
|
|
i: "scada_aq_zj_gx_01('CX_01')",
|
|
f: (e) => {
|
|
let data = e[0] || {}
|
|
this.$refs.equipmentPowerOne.setData({
|
|
series: [
|
|
{
|
|
type: "pie",
|
|
clockWise: false,
|
|
radius: ['60%', '75%'],
|
|
itemStyle: {
|
|
normal: {
|
|
label: {
|
|
show: false,
|
|
},
|
|
labelLine: {
|
|
show: false,
|
|
},
|
|
shadowBlur: 0,
|
|
shadowColor: "#389af4",
|
|
},
|
|
},
|
|
hoverAnimation: false,
|
|
center: ["50%", "50%"],
|
|
data: [
|
|
{
|
|
value: parseFloat(data.COLUMN_A),
|
|
label: {
|
|
normal: {
|
|
rich: {
|
|
a: {
|
|
color: "#389af4",
|
|
align: "center",
|
|
fontSize: 1.1 * vw,
|
|
fontWeight: "bold",
|
|
},
|
|
b: {
|
|
color: "#fff",
|
|
align: "center",
|
|
fontSize: 0.9 * vw,
|
|
},
|
|
},
|
|
formatter: function (params) {
|
|
return (
|
|
"{a|" +
|
|
parseFloat(data.COLUMN_A) +
|
|
"%}" +
|
|
"\n{b|内胆检漏}"
|
|
);
|
|
},
|
|
position: "center",
|
|
show: true,
|
|
textStyle: {
|
|
fontSize: "14",
|
|
fontWeight: "normal",
|
|
color: "#fff",
|
|
},
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#389af4",
|
|
shadowColor: "#389af4",
|
|
shadowBlur: 0,
|
|
},
|
|
},
|
|
},
|
|
{
|
|
value: 100 - parseFloat(data.COLUMN_A),
|
|
name: "invisible",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#412a4e",
|
|
},
|
|
emphasis: {
|
|
color: "#412a4e",
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
})
|
|
}
|
|
},
|
|
],
|
|
}
|
|
},
|
|
mounted() {
|
|
|
|
// this.RequestDataSet.forEach(val => {
|
|
// mixData(val)
|
|
// })
|
|
//
|
|
// intervalFun = setInterval(() => {
|
|
// this.RequestDataSet.forEach(val => {
|
|
// mixData(val)
|
|
// })
|
|
// }, 1000 * 10)
|
|
|
|
this.$refs.topLeft.setData({
|
|
grid: {
|
|
top: "20%",
|
|
left: "1%",
|
|
right: "5%",
|
|
bottom: "1%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
right: '0',
|
|
data: ['计划产量', '实际产量'],
|
|
textStyle: {
|
|
fontSize: 0.75 * vw,
|
|
color: "#F1F1F3",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
// rotate: -20,
|
|
margin: 5,
|
|
textStyle: {
|
|
fontSize: 0.75 * vw,
|
|
color: "#F1F1F3",
|
|
},
|
|
},
|
|
data: ['2025/10/11', '2025/10/12', '2025/10/13', '2025/10/14'],
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontSize: 0.75 * vw,
|
|
color: "#F1F1F3",
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,0.1)",
|
|
},
|
|
},
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '计划产量',
|
|
type: 'bar',
|
|
barGap: 0,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barWidth: '30%',
|
|
barMaxWidth: '20px',
|
|
itemStyle: {
|
|
//图形样式
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1, // 从上(0)到下(1)
|
|
[
|
|
{offset: 0, color: '#F9D842',}, // 顶部颜色
|
|
{offset: 1, color: '#C44B25'} // 底部颜色
|
|
]
|
|
)
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
formatter: `{c}${''}`,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,0.5)",
|
|
fontSize: 0.75 * vw
|
|
},
|
|
},
|
|
data: [700, 830, 790, 700],
|
|
},
|
|
{
|
|
name: '实际产量',
|
|
type: 'bar',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barWidth: '30%',
|
|
barMaxWidth: '20px',
|
|
barGap: '40%',
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
formatter: `{c}${''}`,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,0.5)",
|
|
fontSize: 0.75 * vw
|
|
},
|
|
},
|
|
itemStyle: {
|
|
//图形样式
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1, // 从上(0)到下(1)
|
|
[
|
|
{offset: 0, color: '#1AE7AD'}, // 顶部颜色
|
|
{offset: 1, color: '#00EF59'} // 底部颜色
|
|
]
|
|
)
|
|
},
|
|
},
|
|
data: [900, 750, 900, 1000],
|
|
},
|
|
]
|
|
})
|
|
|
|
this.scrollTableData = [
|
|
{COLUMN_A: '01', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
|
|
{COLUMN_A: '02', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
|
|
{COLUMN_A: '03', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
|
|
{COLUMN_A: '04', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
|
|
{COLUMN_A: '05', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
|
|
{COLUMN_A: '06', COLUMN_B: '11281445', COLUMN_C: 'BC-BD-100H', COLUMN_D: 400, COLUMN_E: 70, COLUMN_F: 330},
|
|
]
|
|
|
|
this.$refs.manpowerAttendance.setData({
|
|
color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'],
|
|
grid: {
|
|
top: "10%",
|
|
bottom: "15%",
|
|
right: "5%"
|
|
},
|
|
dataZoom: [],
|
|
xAxis: {
|
|
margin: 10,
|
|
nameTextStyle: {
|
|
color: '#c0c3cd',
|
|
padding: [0, 0, -10, 0],
|
|
fontSize: 14,
|
|
},
|
|
axisLabel: {
|
|
color: '#c0c3cd', //X轴文字
|
|
fontSize: 14,
|
|
interval: 0,
|
|
margin: 5,
|
|
// rotate: -20,
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: '#0B1535',
|
|
width: 1,
|
|
},
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#384267',
|
|
width: 1,
|
|
type: 'dashed',
|
|
},
|
|
show: true,
|
|
},
|
|
data: [1, 2, 3, 4, 5, 6],
|
|
type: 'category',
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
nameTextStyle: {
|
|
color: '#c0c3cd',
|
|
padding: [0, 0, -10, 0],
|
|
fontSize: 14,
|
|
},
|
|
axisLabel: {
|
|
color: '#c0c3cd', //Y轴文字
|
|
fontSize: 14,
|
|
},
|
|
axisTick: {
|
|
lineStyle: {
|
|
color: '#384267',
|
|
width: 1,
|
|
},
|
|
show: true,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#384267',
|
|
type: 'line',
|
|
},
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#fff',
|
|
width: 1,
|
|
type: 'line',
|
|
},
|
|
show: false,
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
data: [95, 95, 95, 95, 95, 95],
|
|
type: 'pictorialBar',
|
|
barMaxWidth: '20px',
|
|
barWidth: 1.5 * vw,
|
|
symbol: 'rect',
|
|
itemStyle: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1, // 从上(0)到下(1)
|
|
[
|
|
{offset: 0, color: '#31D4F9',}, // 顶部颜色
|
|
{offset: 1, color: '#2A41CF'} // 底部颜色
|
|
]
|
|
)
|
|
},
|
|
label: {
|
|
normal: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#a8aab0",
|
|
fontStyle: "normal",
|
|
fontFamily: "微软雅黑",
|
|
fontSize: 0.75 * vw,
|
|
},
|
|
},
|
|
}
|
|
},
|
|
]
|
|
})
|
|
|
|
this.$refs.productionEfficiency.setData({
|
|
grid: {
|
|
top: "10%",
|
|
left: '15%',
|
|
right: "5%",
|
|
bottom: '15%',
|
|
// containLabel: true
|
|
},
|
|
dataZoom: [],
|
|
xAxis: {
|
|
data: ['BC-BD-100H', 'BC-BD-100H', 'BC-BD-100H', 'BC-BD-100H', 'BC-BD-100H', 'BC-BD-100H'],
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#0177d4",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: 0.7 * vw,
|
|
interval: 0,
|
|
rotate: -20,
|
|
},
|
|
},
|
|
yAxis: {
|
|
nameTextStyle: {
|
|
color: "#fff",
|
|
fontSize: 16,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#0177d4",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: 11,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#0177d4",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
barWidth: 1 * vw,
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "#00b0ff",
|
|
},
|
|
{
|
|
offset: 0.8,
|
|
color: "#7052f4",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 0.75 * vw
|
|
},
|
|
},
|
|
data: [471, 577, 950, 86, 153, 364],
|
|
},
|
|
],
|
|
})
|
|
|
|
this.$refs.equipmentPowerOne.setData({
|
|
grid: {
|
|
top: "20%",
|
|
left: "1%",
|
|
right: "5%",
|
|
bottom: "1%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
right: '0',
|
|
data: ['计划产量', '实际产量'],
|
|
textStyle: {
|
|
fontSize: 0.75 * vw,
|
|
color: "#F1F1F3",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
// rotate: -20,
|
|
margin: 5,
|
|
textStyle: {
|
|
fontSize: 0.75 * vw,
|
|
color: "#F1F1F3",
|
|
},
|
|
},
|
|
data: [1, 2, 3, 4, 5, 6],
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontSize: 0.75 * vw,
|
|
color: "#F1F1F3",
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,0.1)",
|
|
},
|
|
},
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '计划产量',
|
|
type: 'bar',
|
|
barGap: 0,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barWidth: '30%',
|
|
barMaxWidth: '20px',
|
|
itemStyle: {
|
|
//图形样式
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1, // 从上(0)到下(1)
|
|
[
|
|
{offset: 0, color: '#F9D842',}, // 顶部颜色
|
|
{offset: 1, color: '#C44B25'} // 底部颜色
|
|
]
|
|
)
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
formatter: `{c}${''}`,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,0.5)",
|
|
fontSize: 0.75 * vw
|
|
},
|
|
},
|
|
data: [75, 50, 82, 55, 55, 40],
|
|
},
|
|
{
|
|
name: '实际产量',
|
|
type: 'bar',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barWidth: '30%',
|
|
barMaxWidth: '20px',
|
|
barGap: '40%',
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
formatter: `{c}${''}`,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,0.5)",
|
|
fontSize: 0.75 * vw
|
|
},
|
|
},
|
|
itemStyle: {
|
|
//图形样式
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1, // 从上(0)到下(1)
|
|
[
|
|
{offset: 0, color: '#1AE7AD'}, // 顶部颜色
|
|
{offset: 1, color: '#00EF59'} // 底部颜色
|
|
]
|
|
)
|
|
},
|
|
},
|
|
data: [65, 39, 75, 42, 65, 65],
|
|
},
|
|
]
|
|
})
|
|
|
|
this.$refs.defectiveProducts.setData({
|
|
grid: {
|
|
top: "20%",
|
|
left: "1%",
|
|
right: "5%",
|
|
bottom: "1%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
},
|
|
legend: {
|
|
right: '0',
|
|
textStyle: {
|
|
fontSize: 0.75 * vw,
|
|
color: "#F1F1F3",
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
axisTick: {show: false},
|
|
axisLabel: {
|
|
// rotate: -20,
|
|
margin: 5,
|
|
textStyle: {
|
|
fontSize: 0.75 * vw,
|
|
color: "#F1F1F3",
|
|
},
|
|
},
|
|
data: ['08:00','09:00','10:00','11:00','12:00','13:00','1400','15:00','16:00',],
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
axisLabel: {
|
|
textStyle: {
|
|
fontSize: 0.75 * vw,
|
|
color: "#F1F1F3",
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,0.1)",
|
|
},
|
|
},
|
|
type: 'value'
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '不良数',
|
|
type: 'line',
|
|
barGap: 0,
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barWidth: '30%',
|
|
barMaxWidth: '20px',
|
|
itemStyle: {
|
|
//图形样式
|
|
normal: {
|
|
color: '#62C2FA'
|
|
},
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
formatter: `{c}${''}`,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,0.5)",
|
|
fontSize: 0.75 * vw
|
|
},
|
|
},
|
|
data: [0,0,0,0,0,0,0,0,0],
|
|
},
|
|
{
|
|
name: '目标',
|
|
type: 'line',
|
|
emphasis: {
|
|
focus: 'series'
|
|
},
|
|
barWidth: '30%',
|
|
barMaxWidth: '20px',
|
|
barGap: '40%',
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
formatter: `{c}${''}`,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,0.5)",
|
|
fontSize: 0.75 * vw
|
|
},
|
|
},
|
|
itemStyle: {
|
|
//图形样式
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0, 0, 0, 1, // 从上(0)到下(1)
|
|
[
|
|
{offset: 0, color: '#1AE7AD'}, // 顶部颜色
|
|
{offset: 1, color: '#00EF59'} // 底部颜色
|
|
]
|
|
)
|
|
},
|
|
},
|
|
data: [1,1,1,1,1,1,1,1,1],
|
|
},
|
|
]
|
|
})
|
|
},
|
|
methods: {},
|
|
beforeDestroy() {
|
|
if (intervalFun) {
|
|
clearInterval(intervalFun)
|
|
intervalFun = null
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
.app-container {
|
|
background-image: url("../../../assets/board/week.jpg");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.headTitle {
|
|
position: absolute;
|
|
top: 5%;
|
|
left: 50%;
|
|
transform: translate(-50%, -100%);
|
|
font-size: 1.5vw;
|
|
color: #d6eaed;
|
|
letter-spacing: 10px;
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
transform: translateY(-50%);
|
|
color: #dddddd;
|
|
font-size: 1vw;
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.manpowerAttendance {
|
|
position: absolute;
|
|
width: 25%;
|
|
height: 35%;
|
|
top: 15%;
|
|
left: 71.5%;
|
|
}
|
|
|
|
.IQC {
|
|
position: absolute;
|
|
width: 40%;
|
|
height: 35%;
|
|
top: 15%;
|
|
left: 30%;
|
|
}
|
|
|
|
.productionEfficiency {
|
|
position: absolute;
|
|
width: 25%;
|
|
height: 35%;
|
|
top: 60%;
|
|
left: 3%;
|
|
}
|
|
|
|
.topLeft {
|
|
position: absolute;
|
|
width: 25%;
|
|
height: 34%;
|
|
top: 15.5%;
|
|
left: 3.5%;
|
|
}
|
|
|
|
.equipmentPowerOne {
|
|
position: absolute;
|
|
width: 39%;
|
|
height: 34%;
|
|
top: 60%;
|
|
left: 30.5%;
|
|
}
|
|
|
|
.equipmentPowerTwo {
|
|
position: absolute;
|
|
width: 13%;
|
|
height: 16%;
|
|
top: 60%;
|
|
left: 43.5%;
|
|
}
|
|
|
|
.equipmentPowerThree {
|
|
position: absolute;
|
|
width: 13%;
|
|
height: 16%;
|
|
top: 60%;
|
|
left: 56.5%;
|
|
}
|
|
|
|
.equipmentPowerFour {
|
|
position: absolute;
|
|
width: 13%;
|
|
height: 16%;
|
|
top: 76%;
|
|
left: 30.5%;
|
|
}
|
|
|
|
.equipmentPowerFive {
|
|
position: absolute;
|
|
width: 13%;
|
|
height: 16%;
|
|
top: 76%;
|
|
left: 43.5%;
|
|
}
|
|
|
|
.equipmentPowerSix {
|
|
position: absolute;
|
|
width: 13%;
|
|
height: 16%;
|
|
top: 76%;
|
|
left: 56.5%;
|
|
}
|
|
|
|
.defectiveProducts {
|
|
position: absolute;
|
|
width: 25%;
|
|
height: 35%;
|
|
top: 59%;
|
|
left: 71.5%;
|
|
}
|
|
|
|
.scrollTableItem {
|
|
color: rgb(185, 186, 192);
|
|
margin: auto 0px;
|
|
padding: 4px 0;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
display: inline-block;
|
|
width: calc(100% / 6);
|
|
}
|
|
|
|
.totalNum {
|
|
position: absolute;
|
|
top: 11.3%;
|
|
left: 18%;
|
|
transform: translateY(-50%);
|
|
color: #fff;
|
|
font-size: 0.9vw;
|
|
}
|
|
|
|
.info1 {
|
|
position: absolute;
|
|
top: 11.3%;
|
|
left: 44.5%;
|
|
transform: translateY(-50%);
|
|
color: #fff;
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.classSelect {
|
|
position: absolute;
|
|
top: 6.5%;
|
|
left: 4%;
|
|
}
|
|
|
|
.el-radio {
|
|
color: #fff !important;
|
|
}
|
|
|
|
.el-button {
|
|
background: #00000000 !important;
|
|
color: #fff !important;
|
|
}
|
|
|
|
.clickLine {
|
|
color: #1890ff !important;
|
|
}
|
|
</style>
|