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.
1193 lines
34 KiB
Vue
1193 lines
34 KiB
Vue
<template>
|
|
<div class="app-container">
|
|
<div class="headTitle">{{ line }}{{ line === '' ? '' : '线' }}成品入库数据监控平台</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="loss">{{ loss }}</div>
|
|
<div class="meter">{{ meter }}</div>
|
|
<span style="position: absolute;top: 10%;left: 14%;color: #fff;font-size: 0.9vw;">目标：{{ finishedProductOutput.mb }} 进度目标：{{
|
|
finishedProductOutput.jdmb
|
|
}}; 实际：{{
|
|
finishedProductOutput.sj
|
|
}} 差异：{{
|
|
finishedProductOutput.mb - finishedProductOutput.sj
|
|
}}; 达成率：{{ ((finishedProductOutput.sj / finishedProductOutput.mb) * 100).toFixed(2) }}% </span>
|
|
<span style="position: absolute;top: 54.3%;left: 19%;color: #fff;font-size: 0.9vw">目标：{{ finalInspection.mb }} 实际：{{
|
|
finalInspection.sj
|
|
}} 累计不良数：{{ finalInspection.bls }}</span>
|
|
<span style="position: absolute;top: 54.3%;left: 66.7%;color: #CFD2D0;font-size: 0.9vw">合计：{{ zhddhj }}</span>
|
|
|
|
<div class="scrollTable">
|
|
<div style="background-color: #094170">
|
|
<div class="scrollTableItem" style="font-weight: bold; width: 8%">
|
|
序号
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold; width: 14.2%">
|
|
订单编号
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold; width:38.4%">
|
|
产品型号
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold; width: 8.2%">
|
|
订单数量
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold; width: 8.2%">
|
|
入库数量
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold; width: 8.2%">
|
|
完成率
|
|
</div>
|
|
<div class="scrollTableItem" style="font-weight: bold; width: 14.2%">
|
|
时间
|
|
</div>
|
|
</div>
|
|
<vue-seamless-scroll
|
|
:class-option="scrollTableOption"
|
|
:data="scrollTableData"
|
|
class="case-item"
|
|
style="height: 84%;overflow: hidden;"
|
|
>
|
|
<div
|
|
v-for="(item, index) in scrollTableData"
|
|
:key="index"
|
|
|
|
>
|
|
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
|
|
<div
|
|
class="scrollTableItem" style=" width: 8%">
|
|
{{ item.COLUMN_A }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style=" width: 14.2%">
|
|
{{ item.COLUMN_G }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style=" width:38.4%">
|
|
{{ item.COLUMN_B }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style=" width: 8.2%">
|
|
{{ item.COLUMN_C }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style=" width: 8.2%">
|
|
{{ item.COLUMN_D }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style=" width: 8.2%">
|
|
{{ item.COLUMN_E }}
|
|
</div>
|
|
<div
|
|
class="scrollTableItem" style=" width: 14.2%">
|
|
{{ item.COLUMN_F }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
</div>
|
|
|
|
<div class="chart1">
|
|
<Chart ref="chart1"></Chart>
|
|
</div>
|
|
<div class="chart2">
|
|
<Chart ref="chart2"></Chart>
|
|
</div>
|
|
<div class="chart3">
|
|
<Chart ref="chart3"></Chart>
|
|
</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";
|
|
|
|
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
|
|
let intervalFun = null
|
|
export default {
|
|
components: {
|
|
vueSeamlessScroll,
|
|
Chart
|
|
},
|
|
props: {
|
|
id: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
name: "Liner",
|
|
data() {
|
|
return {
|
|
line: '一',
|
|
loss: 0,
|
|
meter: 0,
|
|
zhddhj: 0,
|
|
title: [
|
|
'成品产量',
|
|
'返修率',
|
|
'LOSS(分钟)',
|
|
'入库标准节拍(秒)',
|
|
'LOSS分类',
|
|
'当班入库统计',
|
|
],
|
|
titlePosition: [
|
|
{
|
|
top: 11.5,
|
|
left: 5.5
|
|
},
|
|
{
|
|
top: 55.4,
|
|
left: 5.5
|
|
},
|
|
{
|
|
top: 11.5,
|
|
left: 52.7
|
|
},
|
|
{
|
|
top: 11.5,
|
|
left: 76.5
|
|
},
|
|
{
|
|
top: 26.2,
|
|
left: 52.7
|
|
},
|
|
{
|
|
top: 55.4,
|
|
left: 52.7
|
|
},
|
|
],
|
|
finishedProductOutput: {},
|
|
finalInspection: {},
|
|
scrollTableOption: {
|
|
step: 0.5, // 数值越大速度滚动越快
|
|
limitMoveNum: 8, // 开始无缝滚动的数据量 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: [],
|
|
RequestDataSet: [
|
|
{
|
|
e: 'cp-1-01',
|
|
i: "scada_cp_cp_cl_01('CX_01')",
|
|
f: (e) => {
|
|
let nowHour = new Date().getHours()
|
|
let jdmb = 0
|
|
if (nowHour >= 8 && nowHour < 20) {
|
|
jdmb = e.map(v => v.Y_VALUE_TWO).splice(0, (nowHour - 8 + 1)).reduce((v1, v2) => v1 + v2, 0)
|
|
}
|
|
if (nowHour >= 20) {
|
|
jdmb = e.map(v => v.Y_VALUE_TWO).splice(0, (nowHour - 20 + 1)).reduce((v1, v2) => v1 + v2, 0)
|
|
}
|
|
if (nowHour < 8) {
|
|
jdmb = e.map(v => v.Y_VALUE_TWO).splice(0, (nowHour + 4 + 1)).reduce((v1, v2) => v1 + v2, 0)
|
|
}
|
|
this.finishedProductOutput = {
|
|
mb: e.reduce((v1, v2) => v1 + v2.Y_VALUE_TWO, 0),
|
|
jdmb: jdmb,
|
|
sj: e.reduce((v1, v2) => v1 + v2.Y_VALUE_ONE, 0),
|
|
}
|
|
this.$refs.chart1.setData({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
crossStyle: {
|
|
color: '#999',
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
top: "15%",
|
|
left: "1%",
|
|
right: "1%",
|
|
bottom: "8%",
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
show: true,
|
|
itemGap: 50,
|
|
data: ['实际产量', '目标产量'],
|
|
textStyle: {
|
|
color: "#f9f9f9",
|
|
borderColor: "#fff",
|
|
fontSize: 16
|
|
},
|
|
},
|
|
dataZoom: [],
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: true,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff',
|
|
opacity: 0.3,
|
|
},
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
margin: 15,
|
|
fontSize: 16
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#777777',
|
|
opacity: 0.3,
|
|
},
|
|
},
|
|
data: e.map(val => val.X_VALUE),
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
min: 0,
|
|
// max: 140,
|
|
splitNumber: 7,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#777777',
|
|
opacity: 0.3,
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff',
|
|
opacity: 0.3,
|
|
},
|
|
},
|
|
axisLabel: {
|
|
margin: 20,
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
fontSize: 16
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '实际产量',
|
|
type: "bar",
|
|
barWidth: '70%',
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 16
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 5,
|
|
color: function (val) {
|
|
if (e[val.dataIndex].Y_VALUE_ONE >= e[val.dataIndex].Y_VALUE_TWO) {
|
|
return '#30e391'
|
|
} else {
|
|
return '#FE70A6'
|
|
}
|
|
// return "#0D81ED"
|
|
},
|
|
},
|
|
},
|
|
data: e.map(val => val.Y_VALUE_ONE),
|
|
},
|
|
{
|
|
name: '目标产量',
|
|
type: "line",
|
|
// smooth: true, //是否平滑曲线显示
|
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
showAllSymbol: true,
|
|
symbol: "emptyCircle",
|
|
symbolSize: 6,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 3,
|
|
color: '#fff',
|
|
},
|
|
borderColor: "#f0f",
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 16
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: '#F2D770',
|
|
border: 0,
|
|
},
|
|
// tooltip: {
|
|
// show: false
|
|
// },
|
|
data: e.map(val => val.Y_VALUE_TWO),
|
|
},
|
|
],
|
|
})
|
|
}
|
|
},
|
|
{
|
|
e: 'cp-1-02',
|
|
i: "scada_cp_zj_02('CX_01')",
|
|
f: (e) => {
|
|
this.finalInspection = {
|
|
mb: e?.[0]?.COLUMN_A || '',
|
|
sj: e?.[0]?.COLUMN_B || '',
|
|
bls: e?.[0]?.COLUMN_C || '',
|
|
}
|
|
}
|
|
},
|
|
{
|
|
e: 'cp-1-03',
|
|
i: "scada_cp_zj_01('CX_01')",
|
|
f: (e) => {
|
|
this.$refs.chart2.setData({
|
|
grid: {
|
|
top: "15%",
|
|
left: "1%",
|
|
right: "1%",
|
|
bottom: "2%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999',
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
itemWidth: 3 * vw,
|
|
data: ['不良数', '一次不合格率', '目标'],
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
margin: 15,
|
|
fontSize: 0.75 * vw
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
margin: 15,
|
|
fontSize: 0.75 * vw
|
|
},
|
|
},
|
|
type: 'category',
|
|
data: e.map(val => val.X_VALUE),
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,0.1)",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
margin: 15,
|
|
fontSize: 0.75 * vw
|
|
},
|
|
formatter: '{value}'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
margin: 15,
|
|
fontSize: 0.75 * vw
|
|
},
|
|
formatter: '{value}% '
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '不良数',
|
|
type: 'bar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: function (val) {
|
|
if (e[val.dataIndex].Y_VALUE_TWO < 3) {
|
|
return '#30e391'
|
|
} else {
|
|
return '#FE70A6'
|
|
}
|
|
// return "#0D81ED"
|
|
},
|
|
},
|
|
},
|
|
data: e.map(val => val.Y_VALUE_ONE),
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
textStyle: {
|
|
color: "rgba(255,255,255,0.5)",
|
|
fontSize: 0.75 * vw
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: '返修率',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: e.map(val => val.Y_VALUE_TWO),
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#F9A25B',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: '目标',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: e.map(val => 10),
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#0DB99D',
|
|
},
|
|
},
|
|
}
|
|
]
|
|
})
|
|
}
|
|
},
|
|
{
|
|
e: 'cp-1-05',
|
|
i: "scada_cp_rk_jp_01('CX_01')",
|
|
f: (e) => {
|
|
this.loss = e[0].X_VALUE
|
|
this.meter = e[0].Y_VALUE
|
|
}
|
|
},
|
|
{
|
|
e: 'cp-1-07',
|
|
i: "scada_cp_rk_loss_01('CX_01')",
|
|
f: (e) => {
|
|
this.$refs.chart3.setData({
|
|
tooltip: {
|
|
textStyle: {
|
|
fontSize: 0.8 * vw
|
|
}
|
|
},
|
|
grid: {
|
|
top: "10%",
|
|
left: "1%",
|
|
right: "1%",
|
|
bottom: "1%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
data: e.map(val => val.X_VALUE),
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#0177d4",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: 0.8 * vw,
|
|
interval: 0,
|
|
},
|
|
},
|
|
yAxis: {
|
|
nameTextStyle: {
|
|
color: "#fff",
|
|
fontSize: 0.8 * vw,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#0177d4",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: 0.8 * vw,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#0177d4",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
barWidth: 2 * vw,
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
textStyle: {
|
|
fontSize: 0.8 * vw,
|
|
color: '#fff'
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "#00b0ff",
|
|
},
|
|
{
|
|
offset: 0.8,
|
|
color: "#7052f4",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
data: e.map(val => val.Y_VALUE),
|
|
},
|
|
],
|
|
})
|
|
}
|
|
},
|
|
{
|
|
e: 'cp-1-08',
|
|
i: "scada_cp_rk_order_01('CX_01')",
|
|
f: (e) => {
|
|
this.scrollTableData = e
|
|
this.zhddhj = e.reduce((v1, v2) => v1 + parseFloat(v2.COLUMN_D), 0)
|
|
}
|
|
},
|
|
],
|
|
RequestDataSet1: [
|
|
{
|
|
e: 'cp-2-01',
|
|
i: "scada_cp_cp_cl_01('CX_02')",
|
|
f: (e) => {
|
|
let nowHour = new Date().getHours()
|
|
let jdmb = 0
|
|
if (nowHour >= 8 && nowHour < 20) {
|
|
jdmb = e.map(v => v.Y_VALUE_TWO).splice(0, (nowHour - 8 + 1)).reduce((v1, v2) => v1 + v2, 0)
|
|
}
|
|
if (nowHour >= 20) {
|
|
jdmb = e.map(v => v.Y_VALUE_TWO).splice(0, (nowHour - 20 + 1)).reduce((v1, v2) => v1 + v2, 0)
|
|
}
|
|
if (nowHour < 8) {
|
|
jdmb = e.map(v => v.Y_VALUE_TWO).splice(0, (nowHour + 4 + 1)).reduce((v1, v2) => v1 + v2, 0)
|
|
}
|
|
this.finishedProductOutput = {
|
|
mb: e.reduce((v1, v2) => v1 + v2.Y_VALUE_TWO, 0),
|
|
jdmb: jdmb,
|
|
sj: e.reduce((v1, v2) => v1 + v2.Y_VALUE_ONE, 0),
|
|
}
|
|
this.$refs.chart1.setData({
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
crossStyle: {
|
|
color: '#999',
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
top: "15%",
|
|
left: "1%",
|
|
right: "1%",
|
|
bottom: "8%",
|
|
containLabel: true,
|
|
},
|
|
legend: {
|
|
show: true,
|
|
itemGap: 50,
|
|
data: ['实际产量', '目标产量'],
|
|
textStyle: {
|
|
color: "#f9f9f9",
|
|
borderColor: "#fff",
|
|
fontSize: 16
|
|
},
|
|
},
|
|
dataZoom: [],
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: true,
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff',
|
|
opacity: 0.3,
|
|
},
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
margin: 15,
|
|
fontSize: 16
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#777777',
|
|
opacity: 0.3,
|
|
},
|
|
},
|
|
data: e.map(val => val.X_VALUE),
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: "value",
|
|
min: 0,
|
|
// max: 140,
|
|
splitNumber: 7,
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: 'dashed',
|
|
color: '#777777',
|
|
opacity: 0.3,
|
|
},
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: '#fff',
|
|
opacity: 0.3,
|
|
},
|
|
},
|
|
axisLabel: {
|
|
margin: 20,
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
fontSize: 16
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: '实际产量',
|
|
type: "bar",
|
|
barWidth: '70%',
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 16
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
barBorderRadius: 5,
|
|
color: function (val) {
|
|
if (e[val.dataIndex].Y_VALUE_ONE >= e[val.dataIndex].Y_VALUE_TWO) {
|
|
return '#30e391'
|
|
} else {
|
|
return '#FE70A6'
|
|
}
|
|
// return "#0D81ED"
|
|
},
|
|
},
|
|
},
|
|
data: e.map(val => val.Y_VALUE_ONE),
|
|
},
|
|
{
|
|
name: '目标产量',
|
|
type: "line",
|
|
// smooth: true, //是否平滑曲线显示
|
|
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
|
|
showAllSymbol: true,
|
|
symbol: "emptyCircle",
|
|
symbolSize: 6,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 3,
|
|
color: '#fff',
|
|
},
|
|
borderColor: "#f0f",
|
|
},
|
|
label: {
|
|
show: true,
|
|
position: "top",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 16
|
|
},
|
|
},
|
|
itemStyle: {
|
|
color: '#F2D770',
|
|
border: 0,
|
|
},
|
|
// tooltip: {
|
|
// show: false
|
|
// },
|
|
data: e.map(val => val.Y_VALUE_TWO),
|
|
},
|
|
],
|
|
})
|
|
}
|
|
},
|
|
{
|
|
e: 'cp-2-02',
|
|
i: "scada_cp_zj_02('CX_02')",
|
|
f: (e) => {
|
|
this.finalInspection = {
|
|
mb: e?.[0]?.COLUMN_A || '',
|
|
sj: e?.[0]?.COLUMN_B || '',
|
|
bls: e?.[0]?.COLUMN_C || '',
|
|
}
|
|
}
|
|
},
|
|
{
|
|
e: 'cp-2-03',
|
|
i: "scada_cp_zj_01('CX_02')",
|
|
f: (e) => {
|
|
this.$refs.chart2.setData({
|
|
grid: {
|
|
top: "15%",
|
|
left: "1%",
|
|
right: "1%",
|
|
bottom: "2%",
|
|
containLabel: true,
|
|
},
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross',
|
|
crossStyle: {
|
|
color: '#999',
|
|
},
|
|
},
|
|
},
|
|
legend: {
|
|
itemWidth: 3 * vw,
|
|
data: ['不良数', '不合格率', '目标'],
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
margin: 15,
|
|
fontSize: 0.75 * vw
|
|
},
|
|
},
|
|
xAxis: [
|
|
{
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
margin: 15,
|
|
fontSize: 0.75 * vw
|
|
},
|
|
},
|
|
type: 'category',
|
|
data: e.map(val => val.X_VALUE),
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
}
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,0.1)",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
margin: 15,
|
|
fontSize: 0.75 * vw
|
|
},
|
|
formatter: '{value}'
|
|
}
|
|
},
|
|
{
|
|
type: 'value',
|
|
splitLine: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: "#d1e6eb",
|
|
margin: 15,
|
|
fontSize: 0.75 * vw
|
|
},
|
|
formatter: '{value}% '
|
|
}
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '不良数',
|
|
type: 'bar',
|
|
itemStyle: {
|
|
normal: {
|
|
color: function (val) {
|
|
console.log(e[val.dataIndex].Y_VALUE_TWO)
|
|
if (e[val.dataIndex].Y_VALUE_TWO < 10) {
|
|
return '#30e391'
|
|
} else {
|
|
return '#FE70A6'
|
|
}
|
|
// return "#0D81ED"
|
|
},
|
|
},
|
|
},
|
|
data: e.map(val => val.Y_VALUE_ONE),
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
textStyle: {
|
|
color: "rgba(255,255,255,0.5)",
|
|
fontSize: 0.75 * vw
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: '不合格率',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: e.map(val => val.Y_VALUE_TWO),
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#F9A25B',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
name: '目标',
|
|
type: 'line',
|
|
yAxisIndex: 1,
|
|
data: e.map(val => 10),
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#0DB99D',
|
|
},
|
|
},
|
|
}
|
|
]
|
|
})
|
|
}
|
|
},
|
|
{
|
|
e: 'cp-2-05',
|
|
i: "scada_cp_rk_jp_01('CX_02')",
|
|
f: (e) => {
|
|
this.loss = e[0].X_VALUE
|
|
this.meter = e[0].Y_VALUE
|
|
}
|
|
},
|
|
{
|
|
e: 'cp-2-07',
|
|
i: "scada_cp_rk_loss_01('CX_02')",
|
|
f: (e) => {
|
|
this.$refs.chart3.setData({
|
|
tooltip: {
|
|
textStyle: {
|
|
fontSize: 0.8 * vw
|
|
}
|
|
},
|
|
grid: {
|
|
top: "10%",
|
|
left: "1%",
|
|
right: "1%",
|
|
bottom: "1%",
|
|
containLabel: true,
|
|
},
|
|
xAxis: {
|
|
data: e.map(val => val.X_VALUE),
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#0177d4",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: 0.8 * vw,
|
|
interval: 0,
|
|
},
|
|
},
|
|
yAxis: {
|
|
nameTextStyle: {
|
|
color: "#fff",
|
|
fontSize: 0.8 * vw,
|
|
},
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: "#0177d4",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
color: "#fff",
|
|
fontSize: 0.8 * vw,
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#0177d4",
|
|
},
|
|
},
|
|
},
|
|
series: [
|
|
{
|
|
type: "bar",
|
|
barWidth: 2 * vw,
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
textStyle: {
|
|
fontSize: 0.8 * vw,
|
|
color: '#fff'
|
|
},
|
|
},
|
|
itemStyle: {
|
|
normal: {
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "#00b0ff",
|
|
},
|
|
{
|
|
offset: 0.8,
|
|
color: "#7052f4",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
},
|
|
},
|
|
data: e.map(val => val.Y_VALUE),
|
|
},
|
|
],
|
|
})
|
|
}
|
|
},
|
|
{
|
|
e: 'cp-2-08',
|
|
i: "scada_cp_rk_order_01('CX_02')",
|
|
f: (e) => {
|
|
this.scrollTableData = e
|
|
this.zhddhj = e.reduce((v1, v2) => v1 + parseFloat(v2.COLUMN_D), 0)
|
|
}
|
|
},
|
|
]
|
|
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.$route.query.id === '1' || this.id === '1') {
|
|
this.RequestDataSet.forEach(val => {
|
|
mixData(val)
|
|
})
|
|
this.line = '一'
|
|
} else if (this.$route.query.id === '2' || this.id === '2') {
|
|
this.RequestDataSet1.forEach(val => {
|
|
mixData(val)
|
|
})
|
|
this.line = '二'
|
|
} else if (this.$route.query.id === '3' || this.id === '3') {
|
|
this.RequestDataSet1.forEach(val => {
|
|
mixData(val)
|
|
})
|
|
this.line = ''
|
|
} else {
|
|
this.RequestDataSet.forEach(val => {
|
|
mixData(val)
|
|
})
|
|
this.line = '一'
|
|
}
|
|
|
|
intervalFun = setInterval(() => {
|
|
if (this.$route.query.id === '1' || this.id === '1') {
|
|
this.RequestDataSet.forEach(val => {
|
|
mixData(val)
|
|
})
|
|
this.line = '一'
|
|
} else if (this.$route.query.id === '2' || this.id === '2') {
|
|
this.RequestDataSet1.forEach(val => {
|
|
mixData(val)
|
|
})
|
|
this.line = '二'
|
|
} else if (this.$route.query.id === '3' || this.id === '3') {
|
|
this.RequestDataSet1.forEach(val => {
|
|
mixData(val)
|
|
})
|
|
this.line = ''
|
|
} else {
|
|
this.RequestDataSet.forEach(val => {
|
|
mixData(val)
|
|
})
|
|
this.line = '一'
|
|
}
|
|
}, 1000 * 10)
|
|
},
|
|
methods: {},
|
|
beforeDestroy() {
|
|
if (intervalFun) {
|
|
clearInterval(intervalFun)
|
|
intervalFun = null
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped>
|
|
.app-container {
|
|
background-image: url("../../../assets/board/scanDown.jpg");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.loss {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
top: 18.1%;
|
|
left: 62%;
|
|
font-size: 1.5vw;
|
|
letter-spacing: 2px;
|
|
color: #cccccc;
|
|
}
|
|
|
|
.meter {
|
|
position: absolute;
|
|
transform: translate(-50%, -50%);
|
|
top: 18.1%;
|
|
left: 85.6%;
|
|
font-size: 1.5vw;
|
|
letter-spacing: 2px;
|
|
color: #cccccc;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
|
|
.scrollTable {
|
|
position: absolute;
|
|
top: 59%;
|
|
left: 51%;
|
|
width: 45%;
|
|
height: 36%;
|
|
}
|
|
|
|
|
|
.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: 14.2%;
|
|
}
|
|
|
|
.chart1 {
|
|
position: absolute;
|
|
top: 15%;
|
|
left: 3.6%;
|
|
width: 45.5%;
|
|
height: 35%;
|
|
}
|
|
|
|
.chart2 {
|
|
position: absolute;
|
|
top: 59%;
|
|
left: 3.5%;
|
|
width: 45.5%;
|
|
height: 35%;
|
|
}
|
|
|
|
.chart3 {
|
|
position: absolute;
|
|
top: 29%;
|
|
left: 51%;
|
|
width: 45.5%;
|
|
height: 22%;
|
|
}
|
|
</style>
|