修改显示

master
夜笙歌 11 months ago
parent aa3d0cac58
commit ede091b57c

@ -1031,6 +1031,288 @@
"value6": "100%" "value6": "100%"
} }
], ],
"table9": [
{
"value1": "1",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "2",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "3",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "4",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "5",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "6",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "7",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "8",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "9",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "10",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "11",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "12",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "13",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "14",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "15",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "16",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "1"
},
{
"value1": "17",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "18",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "19",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "20",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "21",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "22",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "23",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "2"
},
{
"value1": "24",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "25",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "26",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "27",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "28",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "29",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "30",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "31",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "32",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "33",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "34",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "3"
},
{
"value1": "35",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "36",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "37",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "38",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "39",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
},
{
"value1": "40",
"value2": "487JFY",
"value3": "15",
"value4": "15",
"value5": "0"
}
],
"chart1": { "chart1": {
"x": [ "x": [
"01:00", "01:00",
@ -1454,6 +1736,51 @@
] ]
} }
}, },
"chart15": {
"x": [
"1日",
"2日",
"3日",
"4日",
"5日",
"6日",
"7日"
],
"y": [
{
"name": "计划",
"data": [
22,
52,
55,
12,
35,
44,
66
]
},
{
"name": "实际",
"data": [
32,
42,
50,
22,
30,
40,
52
]
}
]
},
"chart16": {
"x": ["组A", "组B", "组C", "组D", "组E", "组F", "组G", "组H"],
"y": [60, 55, 45, 42, 40, 40, 39, 38]
},
"chart17": {
"x": ["A-1", "A-2", "A-3", "A-4", "A-5", "A-6", "A-7"],
"y": [12, 20, 11, 30, 14, 80, 50]
},
"liner": { "liner": {
"plan": [ "plan": [
{ {
@ -1865,5 +2192,17 @@
} }
] ]
} }
},
"a": {
"fpx": {
"A1": 0,
"A2": 0,
"B1": 0,
"B2": 0
},
"fpj": {
"A": 0,
"B": 0
}
} }
} }

@ -135,7 +135,7 @@
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="自定义功能" prop="customFunction"> <el-form-item label="自定义功能" prop="customFunction">
<el-input v-model="form.customFunction" placeholder="请输入自定义功能" :disabled="editDisabled"/> <el-input v-model="form.customFunction" placeholder="请输入自定义功能" />
</el-form-item> </el-form-item>
<el-form-item label="自定义编号" prop="customCode"> <el-form-item label="自定义编号" prop="customCode">
<el-input v-model="form.customCode" placeholder="请输入自定义编号" /> <el-input v-model="form.customCode" placeholder="请输入自定义编号" />

@ -8,23 +8,23 @@
<div class="title1">班组</div> <div class="title1">班组</div>
<div class="title2">上线数量</div> <div class="title2">上线数量</div>
<div class="nowClass">总装</div> <div class="nowClass">{{ info.bz }}</div>
<div class="num">1122</div> <div class="num">{{ info.sxsl }}</div>
<div class="info1Title">产品条码</div> <div class="info1Title">产品条码</div>
<div class="info1">B23120783055009802101</div> <div class="info1">{{ info.tm }}</div>
<div class="info2Title">扫描时间</div> <div class="info2Title">扫描时间</div>
<div class="info2">2023/12/7 12:01:53</div> <div class="info2">{{ info.sj }}</div>
<div class="info3Title">产品型号</div> <div class="info3Title">产品型号</div>
<div class="info3">发泡箱体,BCD-530WPG,标准白</div> <div class="info3">{{ info.xh }}</div>
<div class="info4Title">订单编号</div> <div class="info4Title">订单编号</div>
<div class="info4">11232394</div> <div class="info4">{{ info.bh }}</div>
<div class="info5Title">订单数量</div> <div class="info5Title">订单数量</div>
<div class="info5">300</div> <div class="info5">{{ info.ddsl }}</div>
<div class="info6Title">上线数量</div> <div class="info6Title">上线数量</div>
<div class="info6">63</div> <div class="info6">{{ info.sxsl2 }}</div>
<div class="info7Title">提示信息</div> <div class="info7Title">提示信息</div>
<div class="info7">扫描成功</div> <div class="info7">{{ info.tsxx }}</div>
<div class="scrollTable"> <div class="scrollTable">
<div style="background-color: #094170"> <div style="background-color: #094170">
@ -102,6 +102,7 @@ import vueSeamlessScroll from "vue-seamless-scroll";
import Chart from "../../../components/board/Chart"; import Chart from "../../../components/board/Chart";
import * as echarts from 'echarts' import * as echarts from 'echarts'
import {getData} from "@/api/board/getData"; import {getData} from "@/api/board/getData";
import {mixData} from "@/api/board/mixData";
export default { export default {
components: { components: {
@ -130,6 +131,7 @@ export default {
left: 5.5 left: 5.5
}, },
], ],
info: {},
scrollTableOption: { scrollTableOption: {
step: 0.5, // step: 0.5, //
limitMoveNum: 5, // this.dataList.length limitMoveNum: 5, // this.dataList.length
@ -141,12 +143,18 @@ export default {
waitTime: 0, waitTime: 0,
}, },
scrollTableData: [], scrollTableData: [],
RequestDataSet: [
{
e: 'zzsc-01',
i: "",
f: (e) => {
this.info = e
} }
}, },
mounted() { {
getData().then(e => { e: 'zzsc-02',
this.scrollTableData = e.table7 i: "",
f: (e) => {
this.$refs.chart1.setData({ this.$refs.chart1.setData({
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -164,7 +172,7 @@ export default {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: e.chart4.x, data: e.x,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "white", color: "white",
@ -212,10 +220,16 @@ export default {
]), ]),
}, },
}, },
data: e.chart4.y.data, data: e.y.data,
}, },
], ],
}) })
}
},
{
e: 'zzsc-03',
i: "",
f: (e) => {
this.$refs.chart2.setData({ this.$refs.chart2.setData({
grid: { grid: {
left: "0", left: "0",
@ -225,7 +239,7 @@ export default {
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
data: e.chart3.x, data: e.x,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#3d5269", color: "#3d5269",
@ -293,10 +307,26 @@ export default {
position: "top", position: "top",
}, },
}, },
data: e.chart3.y.data, data: e.y.data,
}, },
], ],
}) })
}
},
{
e: 'zzsc-04',
i: "",
f: (e) => {
this.scrollTableData = e
}
},
]
}
},
mounted() {
this.RequestDataSet.forEach(val => {
mixData(val)
}) })
}, },
methods: {} methods: {}
@ -447,7 +477,6 @@ export default {
} }
.info3Title { .info3Title {
position: absolute; position: absolute;
top: 13.5%; top: 13.5%;
@ -489,7 +518,6 @@ export default {
} }
.info5Title { .info5Title {
position: absolute; position: absolute;
top: 18%; top: 18%;

@ -1,9 +1,16 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="headTitle">门匹配生产数据监控平台</div> <div class="headTitle">门匹配生产数据监控平台</div>
<div class="topNum planNum">{{ planNum }}</div> <div class="topNum planNum">{{
<div class="topNum practicalNum">{{ practicalNum }}</div> planNum.toString().split('').concat(['0', '0', '0', '0']).slice(0, 4).join('')
<div class="topNum differenceValue">{{ differenceValue }}</div> }}
</div>
<div class="topNum practicalNum">
{{ practicalNum.toString().split('').concat(['0', '0', '0', '0']).slice(0, 4).join('') }}
</div>
<div class="topNum differenceValue">
{{ (practicalNum - planNum).toString().split('').concat(['0', '0', '0', '0']).slice(0, 4).join('') }}
</div>
<div class="title" v-for="(i,k) in title" <div class="title" v-for="(i,k) in title"
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'"> :style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
{{ i }} {{ i }}
@ -23,10 +30,14 @@
<div class="supplementInfo">注射压力标准范围10.0-14.0Mpa AB组份枪头压力差1Mpa</div> <div class="supplementInfo">注射压力标准范围10.0-14.0Mpa AB组份枪头压力差1Mpa</div>
<div class="supplementInfo1">发泡料温度标准范围:18.0-24.0</div> <div class="supplementInfo1">发泡料温度标准范围:18.0-24.0</div>
<div style="position: absolute;top: 62%; left: 40%;color:#FFF"> <div style="position: absolute;top: 62%; left: 40%;color:#FFF">
<div style="width: 12px;height: 12px;background-color: #1be409;display: inline-block;margin: 0 8px;"></div> 启用 <div style="width: 12px;height: 12px;background-color: #1be409;display: inline-block;margin: 0 8px;"></div>
<div style="width: 12px;height: 12px;background-color: #8a8e96;display: inline-block;margin: 0 8px;"></div>停用 启用
<div style="width: 12px;height: 12px;background-color: #ff0000;display: inline-block;margin: 0 8px;"></div> 注料位 <div style="width: 12px;height: 12px;background-color: #8a8e96;display: inline-block;margin: 0 8px;"></div>
<div style="width: 12px;height: 12px;background-color: #ff8000;display: inline-block;margin: 0 8px;"></div>出模位 停用
<div style="width: 12px;height: 12px;background-color: #ff0000;display: inline-block;margin: 0 8px;"></div>
注料位
<div style="width: 12px;height: 12px;background-color: #ff8000;display: inline-block;margin: 0 8px;"></div>
出模位
</div> </div>
<div class="scrollTable"> <div class="scrollTable">
@ -76,11 +87,11 @@
<div style="width: 33%;display: inline-block">型号</div> <div style="width: 33%;display: inline-block">型号</div>
<div style="width: 33%;display: inline-block">产量</div> <div style="width: 33%;display: inline-block">产量</div>
</div> </div>
<div v-for="i in 10" <div v-for="i in bottomTableData.slice(0,10)"
:style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color: '+ (i === 2 ? '#bed4ce' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')"> :style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color: '+ setColor(i.value5)+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')">
<div style="width: 33%;display: inline-block">{{ i }}</div> <div style="width: 33%;display: inline-block">{{ i.value1 }}</div>
<div style="width: 33%;display: inline-block">487JFY</div> <div style="width: 33%;display: inline-block">{{ i.value2 }}</div>
<div style="width: 33%;display: inline-block">15-15</div> <div style="width: 33%;display: inline-block">{{ i.value3 }}-{{ i.value4 }}</div>
</div> </div>
</div> </div>
<div class="tableTwo"> <div class="tableTwo">
@ -89,11 +100,11 @@
<div style="width: 33%;display: inline-block">型号</div> <div style="width: 33%;display: inline-block">型号</div>
<div style="width: 33%;display: inline-block">产量</div> <div style="width: 33%;display: inline-block">产量</div>
</div> </div>
<div v-for="i in 10" <div v-for="i in bottomTableData.slice(10,20)"
:style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ (i === 2 ? '#ff5959' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')"> :style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ setColor(i.value5)+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')">
<div style="width: 33%;display: inline-block">{{ i }}</div> <div style="width: 33%;display: inline-block">{{ i.value1 }}</div>
<div style="width: 33%;display: inline-block">487JFY</div> <div style="width: 33%;display: inline-block">{{ i.value2 }}</div>
<div style="width: 33%;display: inline-block">15-15</div> <div style="width: 33%;display: inline-block">{{ i.value3 }}-{{ i.value4 }}</div>
</div> </div>
</div> </div>
<div class="tableThree"> <div class="tableThree">
@ -102,11 +113,11 @@
<div style="width: 33%;display: inline-block">型号</div> <div style="width: 33%;display: inline-block">型号</div>
<div style="width: 33%;display: inline-block">产量</div> <div style="width: 33%;display: inline-block">产量</div>
</div> </div>
<div v-for="i in 10" <div v-for="i in bottomTableData.slice(20,30)"
:style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ (i === 2 ? '#ffb769' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')"> :style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ setColor(i.value5)+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')">
<div style="width: 33%;display: inline-block">{{ i }}</div> <div style="width: 33%;display: inline-block">{{ i.value1 }}</div>
<div style="width: 33%;display: inline-block">487JFY</div> <div style="width: 33%;display: inline-block">{{ i.value2 }}</div>
<div style="width: 33%;display: inline-block">15-15</div> <div style="width: 33%;display: inline-block">{{ i.value3 }}-{{ i.value4 }}</div>
</div> </div>
</div> </div>
<div class="tableFour"> <div class="tableFour">
@ -115,11 +126,11 @@
<div style="width: 33%;display: inline-block">型号</div> <div style="width: 33%;display: inline-block">型号</div>
<div style="width: 33%;display: inline-block">产量</div> <div style="width: 33%;display: inline-block">产量</div>
</div> </div>
<div v-for="i in 10" <div v-for="i in bottomTableData.slice(30,40)"
:style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ (i === 2 ? '#bed4ce' : '#1be409')+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')"> :style="'margin-bottom:2px;height: calc(9% - 2px);line-height:calc(2.6vh - 2px);color:'+ setColor(i.value5)+';text-align: center;background-color:' + (i === 2 ? '#053460' : '#053460')">
<div style="width: 33%;display: inline-block">{{ i }}</div> <div style="width: 33%;display: inline-block">{{ i.value1 }}</div>
<div style="width: 33%;display: inline-block">487JFY</div> <div style="width: 33%;display: inline-block">{{ i.value2 }}</div>
<div style="width: 33%;display: inline-block">15-15</div> <div style="width: 33%;display: inline-block">{{ i.value3 }}-{{ i.value4 }}</div>
</div> </div>
</div> </div>
</div> </div>
@ -130,6 +141,7 @@ import vueSeamlessScroll from "vue-seamless-scroll";
import Chart from "../../../components/board/Chart"; import Chart from "../../../components/board/Chart";
import * as echarts from 'echarts' import * as echarts from 'echarts'
import {getData} from "@/api/board/getData"; import {getData} from "@/api/board/getData";
import {mixData} from "@/api/board/mixData";
export default { export default {
components: { components: {
@ -188,15 +200,20 @@ export default {
waitTime: 0, waitTime: 0,
}, },
scrollTableData: [], scrollTableData: [],
bottomTableData: [],
RequestDataSet: [
{
e: 'xm-01',
i: "",
f: (e) => {
this.scrollTableData = e
} }
}, },
mounted() { {
let timeInter = setInterval(() => { e: 'xm-02',
this.show = (this.show + 1) % 4 i: "",
}, 10 * 1000) f: (e) => {
getData().then(e => { this.$refs.chart2.setData({
this.scrollTableData = e.table33
this.$refs.chart1.setData({
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
@ -207,31 +224,20 @@ export default {
grid: { grid: {
left: "0", left: "0",
right: "4%", right: "4%",
bottom: "0", bottom: 0,
top: 35, top: 20,
containLabel: true, containLabel: true,
}, },
legend: {
data: e.chart5.y.map(val => val.name),
right: 'center',
top: 0,
textStyle: {
color: "#fff",
},
itemWidth: 12,
itemHeight: 10,
// itemGap: 35
},
xAxis: { xAxis: {
type: "category", type: "category",
data: e.chart5.x, data: e.x,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "white", color: "white",
}, },
}, },
axisLabel: { axisLabel: {
// interval: 0, interval: 0,
// rotate: 40, // rotate: 40,
textStyle: { textStyle: {
fontFamily: "Microsoft YaHei", fontFamily: "Microsoft YaHei",
@ -254,38 +260,9 @@ export default {
}, },
series: [ series: [
{ {
name: e.chart5.y[0].name, name: e.y.name,
type: "bar", type: "bar",
barWidth: "30%", barWidth: "40%",
label: {
show: true,
position: "top",
textStyle: {
color: "#49d9ff",
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#39ffff",
},
{
offset: 1,
color: "#f5804d",
},
]),
borderRadius: 2,
},
},
data: e.chart5.y[0].data,
},
{
name: e.chart5.y[1].name,
type: "bar",
barWidth: "30%",
barGap: '40%',
label: { label: {
show: true, show: true,
position: "top", position: "top",
@ -305,14 +282,20 @@ export default {
color: "#3e8aff", color: "#3e8aff",
}, },
]), ]),
borderRadius: 2, borderRadius: 3,
}, },
}, },
data: e.chart5.y[1].data, data: e.y.data,
}, },
], ],
}) })
this.$refs.chart2.setData({ }
},
{
e: 'xm-03',
i: "",
f: (e) => {
this.$refs.chart1.setData({
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
axisPointer: { axisPointer: {
@ -323,20 +306,31 @@ export default {
grid: { grid: {
left: "0", left: "0",
right: "4%", right: "4%",
bottom: 0, bottom: "0",
top: 20, top: 35,
containLabel: true, containLabel: true,
}, },
legend: {
data: e.y.map(val => val.name),
right: 'center',
top: 0,
textStyle: {
color: "#fff",
},
itemWidth: 12,
itemHeight: 10,
// itemGap: 35
},
xAxis: { xAxis: {
type: "category", type: "category",
data: e.chart3.x, data: e.x,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "white", color: "white",
}, },
}, },
axisLabel: { axisLabel: {
interval: 0, // interval: 0,
// rotate: 40, // rotate: 40,
textStyle: { textStyle: {
fontFamily: "Microsoft YaHei", fontFamily: "Microsoft YaHei",
@ -359,9 +353,38 @@ export default {
}, },
series: [ series: [
{ {
name: e.chart3.y.name, name: e.y[0].name,
type: "bar", type: "bar",
barWidth: "40%", barWidth: "30%",
label: {
show: true,
position: "top",
textStyle: {
color: "#49d9ff",
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#39ffff",
},
{
offset: 1,
color: "#f5804d",
},
]),
borderRadius: 2,
},
},
data: e.y[0].data,
},
{
name: e.y[1].name,
type: "bar",
barWidth: "30%",
barGap: '40%',
label: { label: {
show: true, show: true,
position: "top", position: "top",
@ -381,16 +404,22 @@ export default {
color: "#3e8aff", color: "#3e8aff",
}, },
]), ]),
borderRadius: 3, borderRadius: 2,
}, },
}, },
data: e.chart3.y.data, data: e.y[1].data,
}, },
], ],
}) })
}
},
{
e: 'xm-04',
i: "",
f: (e) => {
this.$refs.chart3.setData({ this.$refs.chart3.setData({
legend: { legend: {
data: e.chart6.y.map(val => val.name), data: e.y.map(val => val.name),
right: 'center', right: 'center',
top: 0, top: 0,
textStyle: { textStyle: {
@ -457,7 +486,7 @@ export default {
show: false, show: false,
}, },
boundaryGap: false, boundaryGap: false,
data: e.chart6.x, data: e.x,
}, },
], ],
@ -490,7 +519,7 @@ export default {
], ],
series: [ series: [
{ {
name: e.chart6.y[0].name, name: e.y[0].name,
type: "line", type: "line",
showAllSymbol: true, showAllSymbol: true,
symbol: "circle", symbol: "circle",
@ -533,10 +562,10 @@ export default {
shadowBlur: 20, shadowBlur: 20,
}, },
}, },
data: e.chart6.y[0].data, data: e.y[0].data,
}, },
{ {
name: e.chart6.y[1].name, name: e.y[1].name,
type: "line", type: "line",
// smooth: true, // // smooth: true, //
showAllSymbol: true, showAllSymbol: true,
@ -582,10 +611,16 @@ export default {
shadowBlur: 20, shadowBlur: 20,
}, },
}, },
data: e.chart6.y[1].data, data: e.y[1].data,
}, },
], ],
}) })
}
},
{
e: 'xm-05',
i: "",
f: (e) => {
this.$refs.chart4.setData({ this.$refs.chart4.setData({
tooltip: { tooltip: {
trigger: "axis", trigger: "axis",
@ -603,7 +638,7 @@ export default {
}, },
xAxis: { xAxis: {
type: "category", type: "category",
data: e.chart3.x, data: e.x,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "white", color: "white",
@ -632,7 +667,7 @@ export default {
}, },
series: [ series: [
{ {
name: e.chart3.y.name, name: e.y.name,
type: "bar", type: "bar",
barWidth: "33%", barWidth: "33%",
label: { label: {
@ -657,13 +692,69 @@ export default {
borderRadius: 2, borderRadius: 2,
}, },
}, },
data: e.chart3.y.data, data: e.y.data,
}, },
], ],
}) })
}
},
{
e: 'xm-06',
i: "",
f: (e) => {
this.bottomTableData = e
}
},
{
e: 'xm-07',
i: "SCADA_INV_STATS_01('')",
f: (e) => {
this.planNum = e.db
this.practicalNum = e.sj
}
},
{
e: 'xm-08',
i: "SCADA_INV_STATS_SUM('')",
f: (e) => {
// this.linerNum = e
}
},
{
e: 'xm-09',
i: "",
f: (e) => {
// this.caseNum = e
}
}
]
}
},
mounted() {
let timeInter = setInterval(() => {
this.show = (this.show + 1) % 4
}, 10 * 1000)
this.RequestDataSet.forEach(val => {
mixData(val)
}) })
}, },
methods: {} methods: {
setColor: (e) => {
if (e === '0') {
return '#1be409'
}
if (e === '1') {
return '#bed4ce'
}
if (e === '2') {
return '#ff5959'
}
if (e === '3') {
return '#ffb769'
}
}
}
}; };
</script> </script>
<style scoped> <style scoped>
@ -678,6 +769,7 @@ export default {
width: 36vw; width: 36vw;
height: 12vw; height: 12vw;
} }
.app-container { .app-container {
background-image: url("../../../assets/board/foaming1.jpg"); background-image: url("../../../assets/board/foaming1.jpg");
background-repeat: no-repeat; background-repeat: no-repeat;
@ -860,6 +952,7 @@ export default {
width: 16.8%; width: 16.8%;
height: 29%; height: 29%;
} }
.title { .title {
position: absolute; position: absolute;
transform: translateY(-50%); transform: translateY(-50%);

@ -172,7 +172,6 @@ export default {
i: "", i: "",
f: (e) => { f: (e) => {
this.practicalNum = e this.practicalNum = e
console.log(e)
} }
}, },
{ {
@ -409,7 +408,7 @@ export default {
}, },
{ {
e: 'nd-08', e: 'nd-08',
i: "", i: "SCADA_INV_STATS_SUM('')",
f: (e) => { f: (e) => {
this.linerNum = e this.linerNum = e
} }
@ -506,7 +505,6 @@ export default {
}, },
], ],
}) })
console.log(e)
} }
}, },
{ {
@ -605,7 +603,6 @@ export default {
} }
] ]
}) })
console.log(e)
} }
}, },
] ]

@ -13,7 +13,7 @@
条码: 条码:
</span> </span>
<span> <span>
1 {{ gz.value1 }}
</span> </span>
</p> </p>
<p> <p>
@ -21,7 +21,7 @@
型号: 型号:
</span> </span>
<span> <span>
1 {{ gz.value2 }}
</span> </span>
</p> </p>
<p> <p>
@ -29,7 +29,7 @@
灌注类型: 灌注类型:
</span> </span>
<span> <span>
1 {{ gz.value3 }}
</span> </span>
</p> </p>
<p> <p>
@ -37,7 +37,7 @@
灌注量: 灌注量:
</span> </span>
<span> <span>
1 {{ gz.value4 }}
</span> </span>
</p> </p>
<p> <p>
@ -45,7 +45,7 @@
灌注结果: 灌注结果:
</span> </span>
<span> <span>
1 {{ gz.value5 }}
</span> </span>
</p> </p>
</div> </div>
@ -55,7 +55,7 @@
条码: 条码:
</span> </span>
<span> <span>
1 {{ dj.value1 }}
</span> </span>
</p> </p>
<p> <p>
@ -63,7 +63,7 @@
型号: 型号:
</span> </span>
<span> <span>
1 {{ dj.value2 }}
</span> </span>
</p> </p>
<p> <p>
@ -72,7 +72,7 @@
接地电阻: 接地电阻:
</span> </span>
<span> <span>
1 {{ dj.value3 }}
</span> </span>
</div> </div>
<div style="display: inline-block;width: 50%"> <div style="display: inline-block;width: 50%">
@ -80,7 +80,7 @@
交耐电流: 交耐电流:
</span> </span>
<span> <span>
1 {{ dj.value4 }}
</span> </span>
</div> </div>
</p> </p>
@ -90,7 +90,7 @@
低压启动: 低压启动:
</span> </span>
<span> <span>
1 {{ dj.value5 }}
</span> </span>
</div> </div>
<div style="display: inline-block;width: 50%"> <div style="display: inline-block;width: 50%">
@ -98,7 +98,7 @@
动态泄露: 动态泄露:
</span> </span>
<span> <span>
1 {{ dj.value6 }}
</span> </span>
</div> </div>
</p> </p>
@ -107,7 +107,7 @@
检测结果: 检测结果:
</span> </span>
<span> <span>
1 {{ dj.value7 }}
</span> </span>
</p> </p>
</div> </div>
@ -117,7 +117,7 @@
条码: 条码:
</span> </span>
<span> <span>
1 {{ zl.value1 }}
</span> </span>
</p> </p>
<p> <p>
@ -125,7 +125,7 @@
型号: 型号:
</span> </span>
<span> <span>
1 {{ zl.value2 }}
</span> </span>
</p> </p>
<p> <p>
@ -133,7 +133,7 @@
环境温度: 环境温度:
</span> </span>
<span> <span>
1 {{ zl.value3 }}
</span> </span>
</p> </p>
<p> <p>
@ -141,7 +141,7 @@
检测结果: 检测结果:
</span> </span>
<span> <span>
1 {{ zl.value4 }}
</span> </span>
</p> </p>
</div> </div>
@ -151,7 +151,7 @@
条码: 条码:
</span> </span>
<span> <span>
1 {{ gdy.value1 }}
</span> </span>
</p> </p>
<p> <p>
@ -159,7 +159,7 @@
型号: 型号:
</span> </span>
<span> <span>
1 {{ gdy.value2 }}
</span> </span>
</p> </p>
<p> <p>
@ -167,7 +167,7 @@
检测结果: 检测结果:
</span> </span>
<span> <span>
1 {{ gdy.value3 }}
</span> </span>
</p> </p>
</div> </div>
@ -194,12 +194,12 @@
</div> </div>
<vue-seamless-scroll <vue-seamless-scroll
:class-option="scrollTableOption" :class-option="scrollTableOption"
:data="scrollTableData" :data="scrollTableData1"
class="case-item" class="case-item"
style="height: 84%;overflow: hidden;" style="height: 84%;overflow: hidden;"
> >
<div <div
v-for="(item, index) in scrollTableData" v-for="(item, index) in scrollTableData1"
:key="index" :key="index"
style="height:4.8vh;" style="height:4.8vh;"
> >
@ -239,12 +239,12 @@
</div> </div>
<vue-seamless-scroll <vue-seamless-scroll
:class-option="scrollTableOption" :class-option="scrollTableOption"
:data="scrollTableData" :data="scrollTableData2"
class="case-item" class="case-item"
style="height: 84%;overflow: hidden;" style="height: 84%;overflow: hidden;"
> >
<div <div
v-for="(item, index) in scrollTableData" v-for="(item, index) in scrollTableData2"
:key="index" :key="index"
style="height:4.8vh;" style="height:4.8vh;"
> >
@ -284,12 +284,12 @@
</div> </div>
<vue-seamless-scroll <vue-seamless-scroll
:class-option="scrollTableOption" :class-option="scrollTableOption"
:data="scrollTableData" :data="scrollTableData3"
class="case-item" class="case-item"
style="height: 84%;overflow: hidden;" style="height: 84%;overflow: hidden;"
> >
<div <div
v-for="(item, index) in scrollTableData" v-for="(item, index) in scrollTableData3"
:key="index" :key="index"
style="height:4.8vh;" style="height:4.8vh;"
> >
@ -329,12 +329,12 @@
</div> </div>
<vue-seamless-scroll <vue-seamless-scroll
:class-option="scrollTableOption" :class-option="scrollTableOption"
:data="scrollTableData" :data="scrollTableData4"
class="case-item" class="case-item"
style="height: 84%;overflow: hidden;" style="height: 84%;overflow: hidden;"
> >
<div <div
v-for="(item, index) in scrollTableData" v-for="(item, index) in scrollTableData4"
:key="index" :key="index"
style="height:4.8vh;" style="height:4.8vh;"
> >
@ -411,7 +411,9 @@ import vueSeamlessScroll from "vue-seamless-scroll";
import Chart from "../../../components/board/Chart"; import Chart from "../../../components/board/Chart";
import * as echarts from 'echarts' import * as echarts from 'echarts'
import {getData} from "@/api/board/getData"; import {getData} from "@/api/board/getData";
import {mixData} from "@/api/board/mixData";
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default { export default {
components: { components: {
vueSeamlessScroll, vueSeamlessScroll,
@ -484,14 +486,56 @@ export default {
singleWidth: 0, // (0) direction => 2/3 singleWidth: 0, // (0) direction => 2/3
waitTime: 0, waitTime: 0,
}, },
gz: {},
dj: {},
zl: {},
gdy: {},
scrollTableData: [], scrollTableData: [],
scrollTableData1: [],
scrollTableData2: [],
scrollTableData3: [],
scrollTableData4: [],
RequestDataSet: [
{
e: 'zzgx-01',
i: "",
f: (e) => {
this.gz = e
} }
}, },
mounted() { {
getData().then(e => { e: 'zzgx-02',
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100 i: "",
this.scrollTableData = e.table6 f: (e) => {
this.dj = e
}
},
{
e: 'zzgx-03',
i: "",
f: (e) => {
this.zl = e
}
},
{
e: 'zzgx-04',
i: "",
f: (e) => {
this.gdy = e
}
},
{
e: 'zzgx-05',
i: "SCADA_INV_STATS_01('')",
f: (e) => {
this.scrollTableData = e
}
},
{
e: 'zzgx-06',
i: "",
f: (e) => {
this.$refs.chart1.setData({ this.$refs.chart1.setData({
tooltip: { tooltip: {
trigger: "item", trigger: "item",
@ -499,16 +543,11 @@ export default {
}, },
series: [ series: [
{ {
name: "签到比例分析", name: "异常比例",
type: "pie", type: "pie",
radius: "70%", radius: "70%",
center: ["50%", "50%"], center: ["50%", "50%"],
data: [ data: e,
{ value: 335, name: "问题1" },
{ value: 310, name: "问题2" },
{ value: 234, name: "问题3" },
{ value: 135, name: "问题4" },
],
itemStyle: { itemStyle: {
emphasis: { emphasis: {
shadowBlur: 10, shadowBlur: 10,
@ -528,7 +567,12 @@ export default {
}, },
], ],
}) })
}
},
{
e: 'zzgx-07',
i: "",
f: (e) => {
this.$refs.chart11.setData({ this.$refs.chart11.setData({
series: [ series: [
{ {
@ -551,7 +595,7 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
data: [ data: [
{ {
value: 100, value: e.value1,
label: { label: {
normal: { normal: {
rich: { rich: {
@ -630,7 +674,7 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
data: [ data: [
{ {
value: 100, value: e.value2,
label: { label: {
normal: { normal: {
rich: { rich: {
@ -709,7 +753,7 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
data: [ data: [
{ {
value: 100, value: parseFloat(e.value3),
label: { label: {
normal: { normal: {
rich: { rich: {
@ -751,7 +795,7 @@ export default {
}, },
}, },
{ {
value: 0, value: parseFloat((100 - parseFloat(e.value3)).toFixed(2)),
name: "invisible", name: "invisible",
itemStyle: { itemStyle: {
normal: { normal: {
@ -766,7 +810,19 @@ export default {
}, },
], ],
}) })
}
},
{
e: 'zzgx-08',
i: "",
f: (e) => {
this.scrollTableData1 = e
}
},
{
e: 'zzgx-09',
i: "",
f: (e) => {
this.$refs.chart21.setData({ this.$refs.chart21.setData({
series: [ series: [
{ {
@ -789,7 +845,7 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
data: [ data: [
{ {
value: 100, value: e.value1,
label: { label: {
normal: { normal: {
rich: { rich: {
@ -868,7 +924,7 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
data: [ data: [
{ {
value: 100, value: e.value2,
label: { label: {
normal: { normal: {
rich: { rich: {
@ -947,7 +1003,7 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
data: [ data: [
{ {
value: 100, value: parseFloat(e.value3),
label: { label: {
normal: { normal: {
rich: { rich: {
@ -989,7 +1045,7 @@ export default {
}, },
}, },
{ {
value: 0, value: parseFloat((100 - parseFloat(e.value3)).toFixed(2)),
name: "invisible", name: "invisible",
itemStyle: { itemStyle: {
normal: { normal: {
@ -1004,7 +1060,19 @@ export default {
}, },
], ],
}) })
}
},
{
e: 'zzgx-10',
i: "",
f: (e) => {
this.scrollTableData2 = e
}
},
{
e: 'zzgx-11',
i: "SCADA_INV_STATS_01('')",
f: (e) => {
this.$refs.chart31.setData({ this.$refs.chart31.setData({
series: [ series: [
{ {
@ -1027,7 +1095,7 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
data: [ data: [
{ {
value: 100, value: e.value1,
label: { label: {
normal: { normal: {
rich: { rich: {
@ -1106,7 +1174,7 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
data: [ data: [
{ {
value: 100, value: e.value2,
label: { label: {
normal: { normal: {
rich: { rich: {
@ -1185,7 +1253,7 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
data: [ data: [
{ {
value: 100, value: parseFloat(e.value3),
label: { label: {
normal: { normal: {
rich: { rich: {
@ -1227,7 +1295,7 @@ export default {
}, },
}, },
{ {
value: 0, value: parseFloat((100 - parseFloat(e.value3)).toFixed(2)),
name: "invisible", name: "invisible",
itemStyle: { itemStyle: {
normal: { normal: {
@ -1242,7 +1310,19 @@ export default {
}, },
], ],
}) })
}
},
{
e: 'zzgx-12',
i: "",
f: (e) => {
this.scrollTableData3 = e
}
},
{
e: 'zzgx-13',
i: "",
f: (e) => {
this.$refs.chart41.setData({ this.$refs.chart41.setData({
series: [ series: [
{ {
@ -1265,7 +1345,7 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
data: [ data: [
{ {
value: 100, value: e.value1,
label: { label: {
normal: { normal: {
rich: { rich: {
@ -1344,7 +1424,7 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
data: [ data: [
{ {
value: 100, value: e.value2,
label: { label: {
normal: { normal: {
rich: { rich: {
@ -1423,7 +1503,7 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
data: [ data: [
{ {
value: 100, value: parseFloat(e.value3),
label: { label: {
normal: { normal: {
rich: { rich: {
@ -1465,7 +1545,7 @@ export default {
}, },
}, },
{ {
value: 0, value: parseFloat((100 - parseFloat(e.value3)).toFixed(2)),
name: "invisible", name: "invisible",
itemStyle: { itemStyle: {
normal: { normal: {
@ -1480,6 +1560,22 @@ export default {
}, },
], ],
}) })
}
},
{
e: 'zzgx-14',
i: "",
f: (e) => {
this.scrollTableData4 = e
}
},
],
}
},
mounted() {
this.RequestDataSet.forEach(val => {
mixData(val)
}) })
}, },
methods: { methods: {
@ -1662,6 +1758,7 @@ export default {
display: inline-block; display: inline-block;
width: 14.2%; width: 14.2%;
} }
.scrollTableItem { .scrollTableItem {
color: rgb(185, 186, 192); color: rgb(185, 186, 192);
margin: auto 0px; margin: auto 0px;

@ -7,9 +7,17 @@
</div> </div>
<div class="loss">{{ loss }}</div> <div class="loss">{{ loss }}</div>
<div class="meter">{{ meter }}</div> <div class="meter">{{ meter }}</div>
<span style="position: absolute;top: 10%;left: 14%;color: #fff;font-size: 0.9vw;">目标1000&nbsp;&nbsp;进度目标1000&nbsp;&nbsp;实际1000&nbsp;&nbsp;差异0&nbsp;&nbsp;达成率100% </span> <span style="position: absolute;top: 10%;left: 14%;color: #fff;font-size: 0.9vw;">目标{{ finishedProductOutput.mb }}&nbsp;&nbsp;进度目标{{
<span style="position: absolute;top: 54.3%;left: 19%;color: #fff;font-size: 0.9vw">目标3% &nbsp;&nbsp;&nbsp;实际1% &nbsp;&nbsp;&nbsp;累计不良数1</span> finishedProductOutput.jdmb
<span style="position: absolute;top: 54.3%;left: 66.7%;color: #CFD2D0;font-size: 0.9vw">合计111</span> }};&nbsp;实际{{
finishedProductOutput.sj
}}&nbsp;&nbsp;差异{{
finishedProductOutput.mb - finishedProductOutput.sj
}};&nbsp;达成率{{ ((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 }}% &nbsp;&nbsp;&nbsp;实际{{
finalInspection.sj
}}% &nbsp;&nbsp;&nbsp;累计不良数{{ 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 class="scrollTable">
<div style="background-color: #094170"> <div style="background-color: #094170">
@ -90,7 +98,9 @@ import vueSeamlessScroll from "vue-seamless-scroll";
import Chart from "../../../components/board/Chart"; import Chart from "../../../components/board/Chart";
import * as echarts from 'echarts' import * as echarts from 'echarts'
import {getData} from "@/api/board/getData"; import {getData} from "@/api/board/getData";
import {mixData} from "@/api/board/mixData";
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default { export default {
components: { components: {
vueSeamlessScroll, vueSeamlessScroll,
@ -100,8 +110,9 @@ export default {
data() { data() {
return { return {
line: '一', line: '一',
loss:100, loss: 0,
meter:30, meter: 0,
zhddhj: 0,
title: [ title: [
'成品产量', '成品产量',
'终检一次不合格率', '终检一次不合格率',
@ -136,6 +147,8 @@ export default {
left: 52.7 left: 52.7
}, },
], ],
finishedProductOutput: {},
finalInspection: {},
scrollTableOption: { scrollTableOption: {
step: 0.5, // step: 0.5, //
limitMoveNum: 5, // this.dataList.length limitMoveNum: 5, // this.dataList.length
@ -147,20 +160,442 @@ export default {
waitTime: 0, waitTime: 0,
}, },
scrollTableData: [], scrollTableData: [],
RequestDataSet: [
{
e: 'cp-1-01',
i: "",
f: (e) => {
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: e.y.map(val => val.name),
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.x,
},
],
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: e.y[0].name,
type: "bar",
barWidth: '70%',
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
fontSize: 16
},
},
itemStyle: {
normal: {
barBorderRadius: 5,
color: function (val) {
console.log()
if (e.y[0].data[val.dataIndex] >= e.y[1].data[val.dataIndex]) {
return '#30e391'
} else {
return '#FE70A6'
} }
// return "#0D81ED"
}, },
mounted() { },
console.log(this.$route.query.id) },
if(this.$route.query.id === '1'){ data: e.y[0].data,
this.line = '一' },
{
name: e.y[1].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.y[1].data,
},
],
})
} }
if(this.$route.query.id === '2'){ },
this.line = '二' {
e: 'cp-1-02',
i: "",
f: (e) => {
this.finishedProductOutput = e
} }
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100 },
getData().then(e => { {
this.scrollTableData = e.table8 e: 'cp-1-03',
i: "",
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: e.y.map(val => val.name),
textStyle: {
color: "#d1e6eb",
margin: 15,
fontSize: 0.75 * vw
},
},
xAxis: [
{
axisLabel: {
//
textStyle: {
color: "#d1e6eb",
margin: 15,
fontSize: 0.75 * vw
},
},
type: 'category',
data: e.x,
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: e.y[0].name,
type: 'bar',
itemStyle: {
normal: {
color: function (val) {
console.log()
if (e.y[1].data[val.dataIndex] < e.y[2].data[val.dataIndex]) {
return '#30e391'
} else {
return '#FE70A6'
}
// return "#0D81ED"
},
},
},
data: e.y[0].data,
label: {
show: true,
position: 'top',
textStyle: {
color: "rgba(255,255,255,0.5)",
fontSize: 0.75 * vw
},
},
},
{
name: e.y[1].name,
type: 'line',
yAxisIndex: 1,
data: e.y[1].data,
itemStyle: {
normal: {
color: '#F9A25B',
},
},
},
{
name: e.y[2].name,
type: 'line',
yAxisIndex: 1,
data: e.y[2].data,
itemStyle: {
normal: {
color: '#0DB99D',
},
},
}
]
})
}
},
{
e: 'cp-1-04',
i: "",
f: (e) => {
this.finalInspection = e
}
},
{
e: 'cp-1-05',
i: "",
f: (e) => {
this.loss = e
}
},
{
e: 'cp-1-06',
i: "",
f: (e) => {
this.meter = e
}
},
{
e: 'cp-1-07',
i: "",
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.x,
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.y.data,
},
],
})
}
},
{
e: 'cp-1-08',
i: "",
f: (e) => {
this.scrollTableData = e
}
},
{
e: 'cp-1-09',
i: "",
f: (e) => {
this.zhddhj = e
}
},
],
RequestDataSet1: [
{
e: 'cp-2-01',
i: "",
f: (e) => {
this.$refs.chart1.setData({ this.$refs.chart1.setData({
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@ -180,7 +615,7 @@ export default {
legend: { legend: {
show: true, show: true,
itemGap: 50, itemGap: 50,
data: e.chart11.y.map(val => val.name), data: e.y.map(val => val.name),
textStyle: { textStyle: {
color: "#f9f9f9", color: "#f9f9f9",
borderColor: "#fff", borderColor: "#fff",
@ -219,7 +654,7 @@ export default {
opacity: 0.3, opacity: 0.3,
}, },
}, },
data: e.chart11.x, data: e.x,
}, },
], ],
yAxis: [ yAxis: [
@ -257,7 +692,7 @@ export default {
], ],
series: [ series: [
{ {
name: e.chart11.y[0].name, name: e.y[0].name,
type: "bar", type: "bar",
barWidth: '70%', barWidth: '70%',
label: { label: {
@ -273,7 +708,7 @@ export default {
barBorderRadius: 5, barBorderRadius: 5,
color: function (val) { color: function (val) {
console.log() console.log()
if (e.chart11.y[0].data[val.dataIndex] >= e.chart11.y[1].data[val.dataIndex]) { if (e.y[0].data[val.dataIndex] >= e.y[1].data[val.dataIndex]) {
return '#30e391' return '#30e391'
} else { } else {
return '#FE70A6' return '#FE70A6'
@ -282,10 +717,10 @@ export default {
}, },
}, },
}, },
data: e.chart11.y[0].data, data: e.y[0].data,
}, },
{ {
name: e.chart11.y[1].name, name: e.y[1].name,
type: "line", type: "line",
// smooth: true, //线 // smooth: true, //线
// symbol:'circle', // // symbol:'circle', //
@ -314,10 +749,23 @@ export default {
// tooltip: { // tooltip: {
// show: false // show: false
// }, // },
data: e.chart11.y[1].data, data: e.y[1].data,
}, },
], ],
}) })
}
},
{
e: 'cp-2-02',
i: "",
f: (e) => {
this.finishedProductOutput = e
}
},
{
e: 'cp-2-03',
i: "",
f: (e) => {
this.$refs.chart2.setData({ this.$refs.chart2.setData({
grid: { grid: {
top: "15%", top: "15%",
@ -337,7 +785,7 @@ export default {
}, },
legend: { legend: {
itemWidth: 3 * vw, itemWidth: 3 * vw,
data: e.chart12.y.map(val => val.name), data: e.y.map(val => val.name),
textStyle: { textStyle: {
color: "#d1e6eb", color: "#d1e6eb",
margin: 15, margin: 15,
@ -355,7 +803,7 @@ export default {
}, },
}, },
type: 'category', type: 'category',
data: e.chart12.x, data: e.x,
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
} }
@ -397,13 +845,13 @@ export default {
], ],
series: [ series: [
{ {
name: e.chart12.y[0].name, name: e.y[0].name,
type: 'bar', type: 'bar',
itemStyle: { itemStyle: {
normal: { normal: {
color: function (val) { color: function (val) {
console.log() console.log()
if (e.chart12.y[1].data[val.dataIndex] < e.chart12.y[2].data[val.dataIndex]) { if (e.y[1].data[val.dataIndex] < e.y[2].data[val.dataIndex]) {
return '#30e391' return '#30e391'
} else { } else {
return '#FE70A6' return '#FE70A6'
@ -412,7 +860,7 @@ export default {
}, },
}, },
}, },
data: e.chart12.y[0].data, data: e.y[0].data,
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
@ -423,10 +871,10 @@ export default {
}, },
}, },
{ {
name: e.chart12.y[1].name, name: e.y[1].name,
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: e.chart12.y[1].data, data: e.y[1].data,
itemStyle: { itemStyle: {
normal: { normal: {
color: '#F9A25B', color: '#F9A25B',
@ -434,10 +882,10 @@ export default {
}, },
}, },
{ {
name: e.chart12.y[2].name, name: e.y[2].name,
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: e.chart12.y[2].data, data: e.y[2].data,
itemStyle: { itemStyle: {
normal: { normal: {
color: '#0DB99D', color: '#0DB99D',
@ -446,6 +894,33 @@ export default {
} }
] ]
}) })
}
},
{
e: 'cp-2-04',
i: "",
f: (e) => {
this.finalInspection = e
}
},
{
e: 'cp-2-05',
i: "",
f: (e) => {
this.loss = e
}
},
{
e: 'cp-2-06',
i: "",
f: (e) => {
this.meter = e
}
},
{
e: 'cp-2-07',
i: "",
f: (e) => {
this.$refs.chart3.setData({ this.$refs.chart3.setData({
tooltip: { tooltip: {
textStyle: { textStyle: {
@ -460,7 +935,7 @@ export default {
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
data: e.chart13.x, data: e.x,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#0177d4", color: "#0177d4",
@ -526,11 +1001,44 @@ export default {
), ),
}, },
}, },
data: e.chart13.y.data, data: e.y.data,
}, },
], ],
}) })
}
},
{
e: 'cp-2-08',
i: "",
f: (e) => {
this.scrollTableData = e
}
},
{
e: 'cp-2-09',
i: "",
f: (e) => {
this.zhddhj = e
}
},
]
}
},
mounted() {
console.log(this.$route.query.id)
if (this.$route.query.id === '1') {
this.RequestDataSet.forEach(val => {
mixData(val)
})
this.line = '一'
}
if (this.$route.query.id === '2') {
this.RequestDataSet1.forEach(val => {
mixData(val)
}) })
this.line = '二'
}
}, },
methods: {} methods: {}
}; };
@ -546,6 +1054,7 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
} }
.loss { .loss {
position: absolute; position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@ -555,6 +1064,7 @@ export default {
letter-spacing: 2px; letter-spacing: 2px;
color: #cccccc; color: #cccccc;
} }
.meter { .meter {
position: absolute; position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@ -564,6 +1074,7 @@ export default {
letter-spacing: 2px; letter-spacing: 2px;
color: #cccccc; color: #cccccc;
} }
.headTitle { .headTitle {
position: absolute; position: absolute;
top: 5%; top: 5%;

@ -109,7 +109,7 @@
<div v-html="safeDayHtml"></div> <div v-html="safeDayHtml"></div>
<div class="totalNum">合计{{ totalNum }}</div> <div class="totalNum">合计{{ totalNum }}</div>
<div class="info1">订单数量:1000 完成数量:1000 清单率:100%</div> <div class="info1">订单数量:{{ info1.ddsl }} 完成数量:{{ info1.wcsl }} 清单率:{{ ((info1.wcsl / info1.ddsl) * 100) .toFixed(2) }}%</div>
</div> </div>
</template> </template>
@ -118,7 +118,9 @@ import vueSeamlessScroll from "vue-seamless-scroll";
import Chart from "../../../components/board/Chart"; import Chart from "../../../components/board/Chart";
import * as echarts from 'echarts' import * as echarts from 'echarts'
import {getData} from "@/api/board/getData"; import {getData} from "@/api/board/getData";
import {mixData} from "@/api/board/mixData";
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
export default { export default {
components: { components: {
vueSeamlessScroll, vueSeamlessScroll,
@ -129,6 +131,10 @@ export default {
return { return {
nowLine: 1, nowLine: 1,
nowWeek: "", nowWeek: "",
info1:{
"ddsl":1000,
"wcsl":1000
},
title: [ title: [
'产量统计', '产量统计',
'三日订单执行情况', '三日订单执行情况',
@ -164,6 +170,14 @@ export default {
left: 73.6 left: 73.6
}, },
], ],
qualityInspectionProcessMonitoring:{
"nd":99,
"gz":99,
"dy":99,
"ag":99,
"cw":99,
"zj":99,
},
scrollTableOption: { scrollTableOption: {
step: 0.5, // step: 0.5, //
limitMoveNum: 5, // this.dataList.length limitMoveNum: 5, // this.dataList.length
@ -175,17 +189,147 @@ export default {
waitTime: 0, waitTime: 0,
}, },
scrollTableData: [], scrollTableData: [],
safeDayHtml: null safeDayHtml: null,
RequestDataSet: [
{
e: 'zh-1-01',
i: "",
f: (e) => {
this.$refs.topLeft.setData({
grid: {
top: "20%",
left: "1%",
right: "5%",
bottom: "1%",
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
} }
}, },
mounted() { legend: {
getData().then(e => { right: '0',
this.scrollTableData = e.table8 data: e.y.map(e => e.name),
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.x
}
],
yAxis: [
{
axisLabel: {
textStyle: {
fontSize: 0.75 * vw,
color: "#F1F1F3",
},
},
splitLine: {
lineStyle: {
color: "rgba(255,255,255,0.1)",
},
},
type: 'value'
}
],
series: [
{
name: e.y[0].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.y[0].data,
},
{
name: e.y[1].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.y[1].data,
},
]
}) })
let min = Math.ceil(Math.min(...[61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],)) }
let max = Math.ceil(Math.max(...[61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],)) },
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100 {
e: 'zh-1-02',
i: "",
f: (e) => {
}
},
{
e: 'zh-1-03',
i: "",
f: (e) => {
this.scrollTableData = e
}
},
{
e: 'zh-1-04',
i: "",
f: (e) => {
this.info1 = e
}
},
{
e: 'zh-1-05',
i: "",
f: (e) => {
this.$refs.manpowerAttendance.setData({ this.$refs.manpowerAttendance.setData({
color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'], color: ['#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe', '#33a2fe'],
grid: { grid: {
@ -226,7 +370,7 @@ export default {
}, },
show: true, show: true,
}, },
data: ['组A', '组B', '组C', '组D', '组E', '组F', '组G', '组H'], data: e.x,
type: 'category', type: 'category',
}, },
yAxis: { yAxis: {
@ -265,16 +409,16 @@ export default {
}, },
series: [ series: [
{ {
data: [60, 55, 45, 42, 40, 40, 39, 38], data: e.y,
type: 'pictorialBar', type: 'pictorialBar',
barMaxWidth: 'auto', barMaxWidth: 'auto',
barWidth: 1.5 * vw, barWidth: 1.5 * vw,
symbol: 'rect', symbol: 'rect',
itemStyle: { itemStyle: {
color: function (val) { color: function (val) {
if ([60, 55, 45, 42, 40, 40, 39, 38].length - val.dataIndex === 1) { if (e.y.length - val.dataIndex === 1) {
return 'red' return 'red'
} else if ([60, 55, 45, 42, 40, 40, 39, 38].length - val.dataIndex === 2) { } else if (e.y.length - val.dataIndex === 2) {
return 'yellow' return 'yellow'
} else { } else {
@ -296,16 +440,16 @@ export default {
} }
}, },
{ {
data: [60, 55, 45, 42, 40, 40, 39, 38], data: e.y,
type: 'pictorialBar', type: 'pictorialBar',
barWidth: 1.5 * vw, barWidth: 1.5 * vw,
symbolPosition: 'end', symbolPosition: 'end',
symbol: 'diamond', symbol: 'diamond',
itemStyle: { itemStyle: {
color: function (val) { color: function (val) {
if ([60, 55, 45, 42, 40, 40, 39, 38].length - val.dataIndex === 1) { if (e.y.length - val.dataIndex === 1) {
return 'red' return 'red'
} else if ([60, 55, 45, 42, 40, 40, 39, 38].length - val.dataIndex === 2) { } else if (e.y.length - val.dataIndex === 2) {
return 'yellow' return 'yellow'
} else { } else {
return '#66c8ff' return '#66c8ff'
@ -317,16 +461,16 @@ export default {
zlevel: 4, zlevel: 4,
}, },
{ {
data: [60, 55, 45, 42, 40, 40, 39, 38].map(val => 1), data: e.y.map(val => 1),
type: 'pictorialBar', type: 'pictorialBar',
barWidth: 1.5 * vw, barWidth: 1.5 * vw,
symbolPosition: 'end', symbolPosition: 'end',
symbol: 'diamond', symbol: 'diamond',
itemStyle: { itemStyle: {
color: function (val) { color: function (val) {
if ([60, 55, 45, 42, 40, 40, 39, 38].length - val.dataIndex === 1) { if (e.y.length - val.dataIndex === 1) {
return 'red' return 'red'
} else if ([60, 55, 45, 42, 40, 40, 39, 38].length - val.dataIndex === 2) { } else if (e.y.length - val.dataIndex === 2) {
return 'yellow' return 'yellow'
} else { } else {
@ -346,7 +490,7 @@ export default {
// }, // },
// symbolSize: [40, 40], // symbolSize: [40, 40],
// z: 10, // z: 10,
// data: [60, 55, 45, 42, 40, 40, 39, 38].map(val => { // data: e.y.map(val => {
// return { // return {
// value: val, // value: val,
// symbolPosition: 'end', // symbolPosition: 'end',
@ -356,114 +500,12 @@ export default {
// }, // },
] ]
}) })
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: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
}
],
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: [22, 52, 55, 12, 35, 44, 66],
},
{ {
name: '实际', e: 'zh-1-06',
type: 'bar', i: "",
emphasis: { f: (e) => {
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: [32, 42, 50, 22, 30, 40, 52],
},
]
})
this.$refs.productionEfficiency.setData({ this.$refs.productionEfficiency.setData({
grid: { grid: {
top: "10%", top: "10%",
@ -474,7 +516,7 @@ export default {
}, },
dataZoom: [], dataZoom: [],
xAxis: { xAxis: {
data: ["A-1", "A-2", "A-3", "A-4", "A-5", "A-6", "A-7"], data: e.x,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#0177d4", color: "#0177d4",
@ -541,12 +583,16 @@ export default {
fontSize: 0.75 * vw fontSize: 0.75 * vw
}, },
}, },
data: [12, 20, 11, 30, 14, 80, 50].sort().reverse(), data: e.y.sort().reverse(),
}, },
], ],
}) })
}
},
{
e: 'zh-1-06',
i: "",
f: (e) => {
this.$refs.equipmentPowerOne.setData({ this.$refs.equipmentPowerOne.setData({
series: [ series: [
{ {
@ -569,7 +615,7 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
data: [ data: [
{ {
value: 99, value: e.nd,
label: { label: {
normal: { normal: {
rich: { rich: {
@ -611,7 +657,7 @@ export default {
}, },
}, },
{ {
value: 1, value: 100 - e.nd,
name: "invisible", name: "invisible",
itemStyle: { itemStyle: {
normal: { normal: {
@ -648,7 +694,7 @@ export default {
center: ["50%", "50%"], center: ["50%", "50%"],
data: [ data: [
{ {
value: 99, value: e.gz,
label: { label: {
normal: { normal: {
rich: { rich: {
@ -1021,6 +1067,19 @@ export default {
}, },
], ],
}) })
}
},
]
}
},
mounted() {
this.RequestDataSet.forEach(val => {
mixData(val)
})
let min = Math.ceil(Math.min(...[61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],))
let max = Math.ceil(Math.max(...[61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],))
this.curWeek() this.curWeek()
this.day() this.day()
}, },

Loading…
Cancel
Save