yinq
/
aucma-mes-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改接口

Browse Source
master
夜笙歌 10 months ago
parent b9e731f427
commit 586ac82a09
12 changed files with 660 additions and 357 deletions
Show Stats Download Patch File Download Diff File

2
src/api/board/getData.js
Unescape Escape View File

@ -41,3 +41,5 @@ export function getCurrentTeamTimeList(query) {
data: query data: query
}) })
} }

10
src/api/board/mixData.js
Unescape Escape View File

@ -1,4 +1,4 @@
import {generalInterfaceList, getSimulateData} from '@/api/board/getData' import {generalInterfaceList, getFoamingData, getSimulateData} from '@/api/board/getData'
let screenData = (e) => { let screenData = (e) => {
if (e.data !== undefined) { if (e.data !== undefined) {
@ -24,6 +24,14 @@ export function mixData(params) {
}))(screenData(val2) || []) }))(screenData(val2) || [])
}) })
} }
if (type === 2) {
getFoamingData({
"PRODUCT_LINE_CODE": "CX_01"
}).then(val2 => {
(params?.f || (() => {
}))(screenData(val2) || [])
})
}
} }
}) })

16
src/views/board/caseShell/index2.vue
Unescape Escape View File

@ -21,10 +21,13 @@
产品型号 产品型号
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold;">
前板计划 计划数量
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold;">
后板计划 前板完成
</div>
<div class="scrollTableItem" style="font-weight: bold;">
后板完成
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold;">
生产进度 生产进度
@ -43,18 +46,21 @@
<div class="scrollTableItem"> <div class="scrollTableItem">
{{ item.COLUMN_B }} {{ item.COLUMN_B }}
</div> </div>
<div class="scrollTableItem" :style="'color:' + (item.COLUMN_C > 0 ? 'green' : '#0000')"> <div class="scrollTableItem">
{{ item.COLUMN_C }} {{ item.COLUMN_C }}
</div> </div>
<div class="scrollTableItem" :style="'color:' + (item.COLUMN_D > 0 ? 'green' : '#0000')"> <div class="scrollTableItem" :style="'color:' + (item.COLUMN_D > 0 ? 'green' : '#0000')">
{{ item.COLUMN_D }} {{ item.COLUMN_D }}
</div> </div>
<div class="scrollTableItem"> <div class="scrollTableItem" :style="'color:' + (item.COLUMN_E > 0 ? 'green' : '#0000')">
{{ item.COLUMN_E }} {{ item.COLUMN_E }}
</div> </div>
<div class="scrollTableItem"> <div class="scrollTableItem">
{{ item.COLUMN_F }} {{ item.COLUMN_F }}
</div> </div>
<div class="scrollTableItem">
{{ item.COLUMN_G }}
</div>
</div> </div>
</div> </div>
</vue-seamless-scroll> </vue-seamless-scroll>
@ -807,7 +813,7 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
width: calc(100% / 6); width: calc(100% / 7);
} }
.chart1 { .chart1 {

81
src/views/board/finalAssembly/index.vue
Unescape Escape View File

@ -21,28 +21,28 @@
<div class="scrollTable"> <div class="scrollTable">
<div style="background-color: #094170"> <div style="background-color: #094170">
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold;width:5%">
序号 序号
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold;width:15%">
订单号 订单号
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold;width:17.5%">
产品型号 产品型号
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold;width:12.5%">
计划数量 订单数量
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold;width:12.5%">
当日上线数量
</div>
<div class="scrollTableItem" style="font-weight: bold;">
订单上线数量 订单上线数量
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold;width:12.5%">
当日上线数量
</div>
<div class="scrollTableItem" style="font-weight: bold;width:12.5%">
上线进度 上线进度
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold;width:12.5%">
计划时间 计划时间
</div> </div>
</div> </div>
@ -59,35 +59,35 @@
> >
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '> <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div <div
class="scrollTableItem"> class="scrollTableItem" style="width:5%">
{{ item.value1 }} {{ index + 1 }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem" style="width:15%">
{{ item.value1 }} {{ item.value1 }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem" style="width:17.5%">
{{ item.value2 }} {{ item.value2 }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem" style="width:12.5%">
{{ item.value3 }} {{ item.value3 }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem" style="width:12.5%">
{{ item.value4 }} {{ item.value4 }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem" style="width:12.5%">
{{ item.value4 }} {{ item.value7 }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem" style="width:12.5%">
{{ item.value5 }} {{ item.value5 }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem" style="width:12.5%">
{{ item.value6 }} {{ item.value6 }}
</div> </div>
</div> </div>
@ -141,7 +141,7 @@ export default {
info: {}, info: {},
scrollTableOption: { scrollTableOption: {
step: 0.5, // 数值越大速度滚动越快 step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右 direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom openWatch: true, // 开启数据实时监控刷新dom
@ -211,6 +211,22 @@ export default {
{ {
name: "数量", name: "数量",
type: "bar", type: "bar",
label: {
normal: {
show: true,
formatter: (e) => {
if (e.data === 0) {
return ''
} else {
return e.data
}
},
fontSize: 12,
fontWeight: "bold",
color: "#ffffff",
position: "top",
},
},
barWidth: "30%", barWidth: "30%",
barMaxWidth: 50, barMaxWidth: 50,
itemStyle: { itemStyle: {
@ -273,7 +289,7 @@ export default {
fontSize: 10, fontSize: 10,
}, },
splitLine: { splitLine: {
show: true, show: false,
lineStyle: { lineStyle: {
color: "#2d3d53", color: "#2d3d53",
}, },
@ -284,6 +300,7 @@ export default {
{ {
type: "bar", type: "bar",
barWidth: '40%', barWidth: '40%',
barMaxWidth: 50,
itemStyle: { itemStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient( color: new echarts.graphic.LinearGradient(
@ -441,9 +458,10 @@ export default {
top: 21%; top: 21%;
left: 88.5%; left: 88.5%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
font-size: 1.8vw; font-size: 3.6vw;
letter-spacing: 4px; letter-spacing: 4px;
color: #d6eaed; color: #d6eaed;
font-weight: 600;
} }
.info1Title { .info1Title {
@ -451,7 +469,7 @@ export default {
top: 11.1%; top: 11.1%;
left: 23%; left: 23%;
width: 24%; width: 24%;
font-size: 1vw; font-size: 1.2vw;
color: #fff9; color: #fff9;
text-align: left; text-align: left;
} }
@ -462,7 +480,7 @@ export default {
top: 11.1%; top: 11.1%;
left: 52.7%; left: 52.7%;
width: 24%; width: 24%;
font-size: 1vw; font-size: 1.2vw;
color: #fff9; color: #fff9;
text-align: left; text-align: left;
} }
@ -473,7 +491,7 @@ export default {
top: 14.8%; top: 14.8%;
left: 23%; left: 23%;
width: 24%; width: 24%;
font-size: 1vw; font-size: 1.2vw;
color: #fff9; color: #fff9;
text-align: left; text-align: left;
} }
@ -484,7 +502,7 @@ export default {
top: 14.8%; top: 14.8%;
left: 52.7%; left: 52.7%;
width: 24%; width: 24%;
font-size: 1vw; font-size: 1.2vw;
color: #fff9; color: #fff9;
text-align: left; text-align: left;
} }
@ -495,7 +513,7 @@ export default {
top: 18.4%; top: 18.4%;
left: 23%; left: 23%;
width: 24%; width: 24%;
font-size: 1vw; font-size: 1.2vw;
color: #fff9; color: #fff9;
text-align: left; text-align: left;
} }
@ -505,19 +523,18 @@ export default {
top: 18.3%; top: 18.3%;
left: 52.7%; left: 52.7%;
width: 24%; width: 24%;
font-size: 1vw; font-size: 1.2vw;
color: #fff9; color: #fff9;
text-align: left; text-align: left;
} }
.info7Title { .info7Title {
position: absolute; position: absolute;
top: 22%; top: 22%;
left: 23%; left: 23%;
width: 24%; width: 24%;
font-size: 1vw; font-size: 1.2vw;
color: #fff9; color: #fff9;
text-align: left; text-align: left;
} }

260
src/views/board/foaming/index.vue
Unescape Escape View File

@ -71,8 +71,8 @@
<span>D</span> <span>D</span>
</div> </div>
<div class="chartSpan1">东线</div> <div class="chartSpan1" v-if="$route.query.id === '1' || id === '1'">东线</div>
<div class="chartSpan2">西线</div> <div class="chartSpan2" v-if="$route.query.id === '1' || id === '1'">西线</div>
<div class="supplementInfo">注射压力标准范围：10.0-14.0Mpa A、B组份枪头压力差≤1Mpa</div> <div class="supplementInfo">注射压力标准范围：10.0-14.0Mpa A、B组份枪头压力差≤1Mpa</div>
<div class="supplementInfo1">发泡料温度标准范围:18.0-24.0℃</div> <div class="supplementInfo1">发泡料温度标准范围:18.0-24.0℃</div>
@ -510,10 +510,11 @@ export default {
barWidth: "40%", barWidth: "40%",
label: { label: {
show: true, show: true,
formatter:(e)=>{ formatter: (e) => {
if(e.data === 0){ if (e.data === 0) {
return '' return ''
}else{} } else {
}
return e.data return e.data
}, },
position: "top", position: "top",
@ -545,12 +546,10 @@ export default {
{ {
e: 'fp-1-05', e: 'fp-1-05',
i: "SCADA_INV_STATS_01('')", i: "SCADA_INV_STATS_01('')",
t:2,
f: (e) => { f: (e) => {
// this.scrollTableData1 = e console.log(JSON.stringify(e))
getFoamingData({ let table = e.map(val => {
"PRODUCT_LINE_CODE": "CX_01"
}).then(e => {
let table = e.data?.map(val => {
return { return {
value1: val.EQUIPMENT_CODE, value1: val.EQUIPMENT_CODE,
value2: val.FIXTUREBOXTYPE, value2: val.FIXTUREBOXTYPE,
@ -558,7 +557,7 @@ export default {
value4: val.TARGET, value4: val.TARGET,
value5: val.PLAN_SUM, value5: val.PLAN_SUM,
value6: val.PRO_SUM, value6: val.PRO_SUM,
value7: (val.PLAN_SUM === 0 ? 0 :((val.PRO_SUM / val.PLAN_SUM) * 100).toFixed(2) )+ '%', value7: (val.PLAN_SUM === 0 ? 0 : ((val.PRO_SUM / val.PLAN_SUM) * 100).toFixed(2)) + '%',
value8: val.ANHOUR, value8: val.ANHOUR,
value9: val.TWOHOUR, value9: val.TWOHOUR,
value10: val.THREEHOUR, value10: val.THREEHOUR,
@ -593,10 +592,7 @@ export default {
value15: totalArr.map(val => val.value18).reduce((acc, curr) => acc + curr, 0), value15: totalArr.map(val => val.value18).reduce((acc, curr) => acc + curr, 0),
value16: totalArr.map(val => val.value19).reduce((acc, curr) => acc + curr, 0), value16: totalArr.map(val => val.value19).reduce((acc, curr) => acc + curr, 0),
} }
}) }
}
}, },
{ {
e: 'fp-1-06', e: 'fp-1-06',
@ -667,10 +663,11 @@ export default {
barWidth: "30%", barWidth: "30%",
label: { label: {
show: true, show: true,
formatter:(e)=>{ formatter: (e) => {
if(e.data === 0){ if (e.data === 0) {
return '' return ''
}else{} } else {
}
return e.data return e.data
}, },
position: "top", position: "top",
@ -708,10 +705,11 @@ export default {
barGap: '40%', barGap: '40%',
label: { label: {
show: true, show: true,
formatter:(e)=>{ formatter: (e) => {
if(e.data === 0){ if (e.data === 0) {
return '' return ''
}else{} } else {
}
return e.data return e.data
}, },
position: "top", position: "top",
@ -865,10 +863,11 @@ export default {
label: { label: {
show: true, show: true,
position: "top", position: "top",
formatter:(e)=>{ formatter: (e) => {
if(e.data === 0){ if (e.data === 0) {
return '' return ''
}else{} } else {
}
return e.data return e.data
}, },
textStyle: { textStyle: {
@ -901,7 +900,7 @@ export default {
shadowBlur: 20, shadowBlur: 20,
}, },
}, },
data: e.map(val => val.Y_VALUE_ONE), data: e.map(val => val.Y_VALUE_ONE === 0 ? null : val.Y_VALUE_ONE),
}, },
{ {
name: 'ISO温度', name: 'ISO温度',
@ -919,10 +918,11 @@ export default {
label: { label: {
show: true, show: true,
position: "top", position: "top",
formatter:(e)=>{ formatter: (e) => {
if(e.data === 0){ if (e.data === 0) {
return '' return ''
}else{} } else {
}
return e.data return e.data
}, },
textStyle: { textStyle: {
@ -956,7 +956,7 @@ export default {
shadowBlur: 20, shadowBlur: 20,
}, },
}, },
data: e.map(val => val.Y_VALUE_TWO), data: e.map(val => val.Y_VALUE_TWO === 0 ? null : val.Y_VALUE_TWO),
}, },
], ],
}) })
@ -990,7 +990,7 @@ export default {
}, },
}, },
axisLabel: { axisLabel: {
// interval: 0, interval: 0,
// rotate: 40, // rotate: 40,
textStyle: { textStyle: {
fontFamily: "Microsoft YaHei", fontFamily: "Microsoft YaHei",
@ -1018,10 +1018,11 @@ export default {
type: "bar", type: "bar",
barWidth: "33%", barWidth: "33%",
label: { label: {
formatter:(e)=>{ formatter: (e) => {
if(e.data === 0){ if (e.data === 0) {
return '' return ''
}else{} } else {
}
return e.data return e.data
}, },
show: true, show: true,
@ -1066,6 +1067,7 @@ export default {
f: (e) => { f: (e) => {
this.planNum = e[0].X_VALUE this.planNum = e[0].X_VALUE
this.practicalNum = e[0].Y_VALUE_ONE this.practicalNum = e[0].Y_VALUE_ONE
this.differenceNum = e[0].Y_VALUE_TWO
} }
}, },
{ {
@ -1132,10 +1134,11 @@ export default {
barMaxWidth: 40, barMaxWidth: 40,
label: { label: {
show: true, show: true,
formatter:(e)=>{ formatter: (e) => {
if(e.data === 0){ if (e.data === 0) {
return '' return ''
}else{} } else {
}
return e.data return e.data
}, },
position: "top", position: "top",
@ -1168,55 +1171,50 @@ export default {
e: 'fp-2-05', e: 'fp-2-05',
i: "SCADA_INV_STATS_02('')", i: "SCADA_INV_STATS_02('')",
f: (e) => { f: (e) => {
// this.scrollTableData1 = e console.log(e)
getFoamingData({ let table = e.map(val => {
"PRODUCT_LINE_CODE": "CX_02" return {
}).then(e => { value1: val.EQUIPMENT_CODE,
let table = e.data?.map(val => { value2: val.FIXTUREBOXTYPE,
return { value3: val.FIXTURESTATUS,
value1: val.EQUIPMENT_CODE, value4: val.TARGET,
value2: val.FIXTUREBOXTYPE, value5: val.PLAN_SUM,
value3: val.FIXTURESTATUS, value6: val.PRO_SUM,
value4: val.TARGET, value7: (val.PLAN_SUM === 0 ? 0 : ((val.PRO_SUM / val.PLAN_SUM) * 100).toFixed(2)) + '%',
value5: val.PLAN_SUM, value8: val.ANHOUR,
value6: val.PRO_SUM, value9: val.TWOHOUR,
value7: (val.PLAN_SUM === 0 ? 0 :((val.PRO_SUM / val.PLAN_SUM) * 100).toFixed(2) )+ '%', value10: val.THREEHOUR,
value8: val.ANHOUR, value11: val.FOURHOUR,
value9: val.TWOHOUR, value12: val.FIVEHOUR,
value10: val.THREEHOUR, value13: val.SIXHOUR,
value11: val.FOURHOUR, value14: val.SEVENHOUR,
value12: val.FIVEHOUR, value15: val.EIGHTHOUR,
value13: val.SIXHOUR, value16: val.NINEHOUR,
value14: val.SEVENHOUR, value17: val.TENHOUR,
value15: val.EIGHTHOUR, value18: val.ELEVENHOUR,
value16: val.NINEHOUR, value19: val.TWELVEHOUR,
value17: val.TENHOUR,
value18: val.ELEVENHOUR,
value19: val.TWELVEHOUR,
}
})
this.scrollTableData1 = table
let totalArr = table
this.total = {
value1: ((totalArr.filter(val => val.value3 === '生产中').length / 6) * 100).toFixed(2),
value2: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0),
value3: totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0),
value4: totalArr.map(val => val.value4).reduce((acc, curr) => acc + curr, 0) === 0 ? 0 : ((totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0) / totalArr.map(val => val.value4).reduce((acc, curr) => acc + curr, 0)) * 100).toFixed(2),
value5: totalArr.map(val => val.value8).reduce((acc, curr) => acc + curr, 0),
value6: totalArr.map(val => val.value9).reduce((acc, curr) => acc + curr, 0),
value7: totalArr.map(val => val.value10).reduce((acc, curr) => acc + curr, 0),
value8: totalArr.map(val => val.value11).reduce((acc, curr) => acc + curr, 0),
value9: totalArr.map(val => val.value12).reduce((acc, curr) => acc + curr, 0),
value10: totalArr.map(val => val.value13).reduce((acc, curr) => acc + curr, 0),
value11: totalArr.map(val => val.value14).reduce((acc, curr) => acc + curr, 0),
value12: totalArr.map(val => val.value15).reduce((acc, curr) => acc + curr, 0),
value13: totalArr.map(val => val.value16).reduce((acc, curr) => acc + curr, 0),
value14: totalArr.map(val => val.value17).reduce((acc, curr) => acc + curr, 0),
value15: totalArr.map(val => val.value18).reduce((acc, curr) => acc + curr, 0),
value16: totalArr.map(val => val.value19).reduce((acc, curr) => acc + curr, 0),
} }
}) })
this.scrollTableData1 = table
let totalArr = table
this.total = {
value1: ((totalArr.filter(val => val.value3 === '生产中').length / 6) * 100).toFixed(2),
value2: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0),
value3: totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0),
value4: totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0) === 0 ? 0 : ((totalArr.map(val => val.value6).reduce((acc, curr) => acc + curr, 0) / totalArr.map(val => val.value5).reduce((acc, curr) => acc + curr, 0)) * 100).toFixed(2),
value5: totalArr.map(val => val.value8).reduce((acc, curr) => acc + curr, 0),
value6: totalArr.map(val => val.value9).reduce((acc, curr) => acc + curr, 0),
value7: totalArr.map(val => val.value10).reduce((acc, curr) => acc + curr, 0),
value8: totalArr.map(val => val.value11).reduce((acc, curr) => acc + curr, 0),
value9: totalArr.map(val => val.value12).reduce((acc, curr) => acc + curr, 0),
value10: totalArr.map(val => val.value13).reduce((acc, curr) => acc + curr, 0),
value11: totalArr.map(val => val.value14).reduce((acc, curr) => acc + curr, 0),
value12: totalArr.map(val => val.value15).reduce((acc, curr) => acc + curr, 0),
value13: totalArr.map(val => val.value16).reduce((acc, curr) => acc + curr, 0),
value14: totalArr.map(val => val.value17).reduce((acc, curr) => acc + curr, 0),
value15: totalArr.map(val => val.value18).reduce((acc, curr) => acc + curr, 0),
value16: totalArr.map(val => val.value19).reduce((acc, curr) => acc + curr, 0),
}
} }
}, },
{ {
@ -1289,10 +1287,11 @@ export default {
label: { label: {
show: true, show: true,
position: "top", position: "top",
formatter:(e)=>{ formatter: (e) => {
if(e.data === 0){ if (e.data === 0) {
return '' return ''
}else{} } else {
}
return e.data return e.data
}, },
textStyle: { textStyle: {
@ -1330,10 +1329,11 @@ export default {
barGap: '40%', barGap: '40%',
label: { label: {
show: true, show: true,
formatter:(e)=>{ formatter: (e) => {
if(e.data === 0){ if (e.data === 0) {
return '' return ''
}else{} } else {
}
return e.data return e.data
}, },
position: "top", position: "top",
@ -1486,10 +1486,11 @@ export default {
}, },
label: { label: {
show: true, show: true,
formatter:(e)=>{ formatter: (e) => {
if(e.data === 0){ if (e.data === 0) {
return '' return ''
}else{} } else {
}
return e.data return e.data
}, },
position: "top", position: "top",
@ -1523,7 +1524,7 @@ export default {
shadowBlur: 20, shadowBlur: 20,
}, },
}, },
data: e.map(val => val.Y_VALUE_ONE), data: e.map(val => val.Y_VALUE_ONE === 0 ? null : val.Y_VALUE_ONE),
}, },
{ {
name: 'ISO温度', name: 'ISO温度',
@ -1540,10 +1541,11 @@ export default {
}, },
label: { label: {
show: true, show: true,
formatter:(e)=>{ formatter: (e) => {
if(e.data === 0){ if (e.data === 0) {
return '' return ''
}else{} } else {
}
return e.data return e.data
}, },
position: "top", position: "top",
@ -1578,7 +1580,7 @@ export default {
shadowBlur: 20, shadowBlur: 20,
}, },
}, },
data: e.map(val => val.Y_VALUE_TWO), data: e.map(val => val.Y_VALUE_TWO === 0 ? null : val.Y_VALUE_TWO),
}, },
], ],
}) })
@ -1612,7 +1614,7 @@ export default {
}, },
}, },
axisLabel: { axisLabel: {
// interval: 0, interval: 0,
// rotate: 40, // rotate: 40,
textStyle: { textStyle: {
fontFamily: "Microsoft YaHei", fontFamily: "Microsoft YaHei",
@ -1641,10 +1643,11 @@ export default {
barWidth: "33%", barWidth: "33%",
label: { label: {
show: true, show: true,
formatter:(e)=>{ formatter: (e) => {
if(e.data === 0){ if (e.data === 0) {
return '' return ''
}else{} } else {
}
return e.data return e.data
}, },
position: "top", position: "top",
@ -2027,101 +2030,112 @@ export default {
background: #00ff00; background: #00ff00;
border-radius: 50%; border-radius: 50%;
} }
.left1{
.left1 {
background-image: url("../../../assets/board/left.png"); background-image: url("../../../assets/board/left.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
top: 38%; top: 38%;
left: 32%; left: 32%;
width: 5vw; width: 5vw;
height: 4.05vw; height: 4.05vw;
span{
span {
position: absolute; position: absolute;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
top: 28%; top: 28%;
left: 43%; left: 43%;
font-size: 1vw; font-size: 1vw;
color: #fff; color: #fff;
} }
} }
.left2{
.left2 {
background-image: url("../../../assets/board/right.png"); background-image: url("../../../assets/board/right.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
top: 49%; top: 49%;
left: 55%; left: 55%;
width: 5vw; width: 5vw;
height: 2.86vw; height: 2.86vw;
span{
span {
position: absolute; position: absolute;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
top: 37%; top: 37%;
left: 57%; left: 57%;
font-size: 1vw; font-size: 1vw;
color: #fff; color: #fff;
} }
} }
.right1{
.right1 {
background-image: url("../../../assets/board/right.png"); background-image: url("../../../assets/board/right.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
top: 36%; top: 36%;
left: 57%; left: 57%;
width: 5vw; width: 5vw;
height: 2.86vw; height: 2.86vw;
span{
span {
position: absolute; position: absolute;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
top: 37%; top: 37%;
left: 57%; left: 57%;
font-size: 1vw; font-size: 1vw;
color: #fff; color: #fff;
} }
} }
.right2{
.right2 {
background-image: url("../../../assets/board/right.png"); background-image: url("../../../assets/board/right.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
top: 39%; top: 39%;
left: 68%; left: 68%;
width: 5vw; width: 5vw;
height: 2.86vw; height: 2.86vw;
span{
span {
position: absolute; position: absolute;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
top: 37%; top: 37%;
left: 57%; left: 57%;
font-size: 1vw; font-size: 1vw;
color: #fff; color: #fff;
} }
} }
.chartSpan1{
.chartSpan1 {
position: absolute; position: absolute;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
top: 94.3%; top: 94.3%;
left: 73%; left: 73%;
font-size: 0.8vw; font-size: 0.8vw;
color: #fff; color: #fff;
} }
.chartSpan1{
.chartSpan1 {
position: absolute; position: absolute;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
top: 94.3%; top: 94.3%;
left: 73%; left: 73%;
font-size: 0.8vw; font-size: 0.8vw;
color: #fff; color: #fff;
} }
.chartSpan2{
.chartSpan2 {
position: absolute; position: absolute;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
top: 94.3%; top: 94.3%;
left: 96%; left: 96%;
font-size: 0.8vw; font-size: 0.8vw;

49
src/views/board/foaming/index2.vue
Unescape Escape View File

@ -11,14 +11,15 @@
}} }}
</div> </div>
<div class="topNum differenceValue"> <div class="topNum differenceValue">
{{ (['0', '0', '0', '0']).concat((Math.abs(practicalNum - planNum)).toString().split('')).slice(-4).join('') }} {{ (['0', '0', '0', '0']).concat(differenceNum.toString().split('')).slice(-4).join('') }}
</div> </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 }}
</div> </div>
<div style="position: absolute;transform: translate(-100%, -50%);top: 24.4%;left: 35%;color: #fff;font-size: 0.8vw;">发泡线状态：</div> <div style="position: absolute;transform: translateY(-50%);top: 24.4%;left: 31%;color: #fff;font-size: 0.8vw;">设备状态：</div>
<div style="position: absolute;transform: translate(-100%, -50%);top: 28.2%;left: 35%;color: #fff;font-size: 0.8vw;">发泡机状态：</div> <div style="position: absolute;transform: translateY(-50%);top: 27.4%;left: 31%;color: #fff;font-size: 0.8vw;">发泡线状态：</div>
<div style="position: absolute;transform: translateY(-50%);top: 32.2%;left: 31%;color: #fff;font-size: 0.8vw;">发泡机状态：</div>
<div class="status1" <div class="status1"
:style="'background-color:'+(status1 === '1' ? '#00ff00':'ff0000')"></div> :style="'background-color:'+(status1 === '1' ? '#00ff00':'ff0000')"></div>
<div class="status2" <div class="status2"
@ -45,13 +46,13 @@
<div class="scrollTable"> <div class="scrollTable">
<div style="background-color: #094170"> <div style="background-color: #094170">
<div class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 "> <div class="scrollTableItem" style="font-weight: bold;width: 10%;padding:4px 0; ">
序号 序号
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 "> <div class="scrollTableItem" style="font-weight: bold;width: 45%;padding:4px 0; ">
型号 型号
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;width: 33%;padding:4px 0 "> <div class="scrollTableItem" style="font-weight: bold;width: 45%;padding:4px 0; ">
扫描时间 扫描时间
</div> </div>
</div> </div>
@ -59,13 +60,13 @@
style="height: 84%;overflow: hidden;"> style="height: 84%;overflow: hidden;">
<div v-for="(item, index) in scrollTableData" :key="index"> <div v-for="(item, index) in scrollTableData" :key="index">
<div :style='"background-color:" + ((index % 2 === 0) ? "#053460" : "#032d57")'> <div :style='"background-color:" + ((index % 2 === 0) ? "#053460" : "#032d57")'>
<div class="scrollTableItem" style="width: 33%;padding:4px 0 "> <div class="scrollTableItem" style="width: 10%;padding:4px 0 ">
{{ item.COLUMN_A }} {{ item.COLUMN_A }}
</div> </div>
<div class="scrollTableItem" style="width: 33%;padding:4px 0 "> <div class="scrollTableItem" style="width: 45%;padding:4px 0 ">
{{ item.COLUMN_B }} {{ item.COLUMN_B }}
</div> </div>
<div class="scrollTableItem" style="width: 33%;padding:4px 0 "> <div class="scrollTableItem" style="width: 45%;padding:4px 0 ">
{{ item.COLUMN_C }} {{ item.COLUMN_C }}
</div> </div>
</div> </div>
@ -146,6 +147,7 @@ import * as echarts from 'echarts'
import {getData} from "@/api/board/getData"; import {getData} from "@/api/board/getData";
import {mixData} from "@/api/board/mixData"; import {mixData} from "@/api/board/mixData";
let intervalFun = null
export default { export default {
components: { components: {
vueSeamlessScroll, vueSeamlessScroll,
@ -193,9 +195,9 @@ export default {
}, },
], ],
show: 0, show: 0,
planNum: 1000, planNum: 0,
practicalNum: 1000, practicalNum: 0,
differenceValue: 1000, differenceNum:0,
scrollTableOption: { scrollTableOption: {
step: 0.5, // 数值越大速度滚动越快 step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 9999999999, // 开始无缝滚动的数据量 this.dataList.length limitMoveNum: 9999999999, // 开始无缝滚动的数据量 this.dataList.length
@ -679,7 +681,7 @@ export default {
}, },
}, },
axisLabel: { axisLabel: {
// interval: 0, interval: 0,
// rotate: 40, // rotate: 40,
textStyle: { textStyle: {
fontFamily: "Microsoft YaHei", fontFamily: "Microsoft YaHei",
@ -747,6 +749,7 @@ export default {
console.log(e) console.log(e)
this.planNum = e[0]?.X_VALUE || 0 this.planNum = e[0]?.X_VALUE || 0
this.practicalNum = e[0]?.Y_VALUE_ONE || 0 this.practicalNum = e[0]?.Y_VALUE_ONE || 0
this.differenceNum = e[0]?.Y_VALUE_TWO || 0
} }
}, },
{ {
@ -771,6 +774,18 @@ export default {
this.RequestDataSet.forEach(val => { this.RequestDataSet.forEach(val => {
mixData(val) mixData(val)
}) })
intervalFun = setInterval(() => {
this.RequestDataSet.forEach(val => {
mixData(val)
})
}, 1000 * 10)
},
beforeDestroy() {
console.log(1)
if(intervalFun){
clearInterval(intervalFun)
intervalFun = null
}
}, },
methods: { methods: {
setColor: (e, i) => { setColor: (e, i) => {
@ -904,8 +919,8 @@ export default {
.status1 { .status1 {
position: absolute; position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
top: 24.4%; top: 27.4%;
left: 36%; left: 37.5%;
width: 1.5vw; width: 1.5vw;
height: 1.5vw; height: 1.5vw;
background: #00ff00; background: #00ff00;
@ -915,8 +930,8 @@ export default {
.status2 { .status2 {
position: absolute; position: absolute;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
top: 28.2%; top: 32.2%;
left: 36%; left: 37.5%;
width: 1.5vw; width: 1.5vw;
height: 1.5vw; height: 1.5vw;
background: #00ff00; background: #00ff00;

4
src/views/board/liner/index.vue
Unescape Escape View File

@ -4,7 +4,7 @@
<div class="topNum team">{{ team }}</div> <div class="topNum team">{{ team }}</div>
<div class="topNum planNum">{{ planNum }}</div> <div class="topNum planNum">{{ planNum }}</div>
<div class="topNum practicalNum">{{ practicalNum }}</div> <div class="topNum practicalNum">{{ practicalNum }}</div>
<div class="topNum differenceValue">{{ planNum - practicalNum }}</div> <div class="topNum differenceValue">{{ differenceNum }}</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 }}
@ -141,6 +141,7 @@ export default {
team: '', team: '',
planNum: 0, planNum: 0,
practicalNum: 0, practicalNum: 0,
differenceNum:0,
scrollTableOption: { scrollTableOption: {
step: 0.5, step: 0.5,
limitMoveNum: 9999999999, limitMoveNum: 9999999999,
@ -160,6 +161,7 @@ export default {
this.team = e[0].COLUMN_A this.team = e[0].COLUMN_A
this.planNum = e[0].COLUMN_B this.planNum = e[0].COLUMN_B
this.practicalNum = e[0].COLUMN_C this.practicalNum = e[0].COLUMN_C
this.differenceNum = e[0].COLUMN_D
} }
}, },
{ {

118
src/views/board/pourInto/index2.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="headTitle">总装重点工序数据监控平台</div> <div class="headTitle">质量追溯数据监控平台</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 }}
@ -351,18 +351,18 @@
<div class="table1"> <div class="table1">
<div style="background-color: #094170"> <div style="background-color: #094170">
<div class="scrollTableItem1" style="width:25%;font-weight: bold;"> <div class="scrollTableItem1" style="width:10%;font-weight: bold;">
序号 序号
</div> </div>
<div class="scrollTableItem1" style="width:25%;font-weight: bold;"> <div class="scrollTableItem1" style="width:35%;font-weight: bold;">
条码
</div>
<div class="scrollTableItem1" style="width:25%;font-weight: bold;">
工位 工位
</div> </div>
<div class="scrollTableItem1" style="width:25%;font-weight: bold;"> <div class="scrollTableItem1" style="width:30%;font-weight: bold;">
问题点 问题点
</div> </div>
<div class="scrollTableItem1" style="width:25%;font-weight: bold;">
次数
</div>
</div> </div>
<vue-seamless-scroll <vue-seamless-scroll
:class-option="scrollTableOption" :class-option="scrollTableOption"
@ -377,20 +377,20 @@
> >
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '> <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div <div
class="scrollTableItem1" style="width: 25%"> class="scrollTableItem1" style="width: 10%">
{{ item.COLUMN_A }} {{ item.COLUMN_A }}
</div> </div>
<div <div
class="scrollTableItem1" style="width: 25%"> class="scrollTableItem1" style="width: 35%">
{{ item.COLUMN_B }} {{ item.COLUMN_C }}
</div> </div>
<div <div
class="scrollTableItem1" style="width: 25%"> class="scrollTableItem1" style="width: 30%">
{{ item.COLUMN_C }} {{ item.COLUMN_D }}
</div> </div>
<div <div
class="scrollTableItem1" style="width: 25%"> class="scrollTableItem1" style="width: 25%">
{{ item.COLUMN_D }} {{ item.COLUMN_B }}
</div> </div>
</div> </div>
</div> </div>
@ -424,8 +424,8 @@ export default {
'电检', '电检',
'制冷性能', '制冷性能',
'高低压检漏', '高低压检漏',
'异常统计', '异常统计(频次TOP5)',
'异常分布', '异常分布(问题TOP10)',
'灌注', '灌注',
'电检', '电检',
'制冷性能', '制冷性能',
@ -616,7 +616,7 @@ export default {
formatter: function (params) { formatter: function (params) {
return ( return (
"{a|" + "{a|" +
1000 + e.value1 +
"}" + "}" +
"\n{b|总数}" "\n{b|总数}"
); );
@ -669,7 +669,7 @@ export default {
show: false, show: false,
}, },
shadowBlur: 0, shadowBlur: 0,
shadowColor: "#ff8c37", shadowColor: "#99d708",
}, },
}, },
hoverAnimation: false, hoverAnimation: false,
@ -681,7 +681,7 @@ export default {
normal: { normal: {
rich: { rich: {
a: { a: {
color: "#ff8c37", color: "#99d708",
align: "center", align: "center",
fontSize: 0.9 * vw, fontSize: 0.9 * vw,
fontWeight: "bold", fontWeight: "bold",
@ -695,7 +695,7 @@ export default {
formatter: function (params) { formatter: function (params) {
return ( return (
"{a|" + "{a|" +
1000 + e.value2 +
"}" + "}" +
"\n{b|合格数}" "\n{b|合格数}"
); );
@ -711,8 +711,8 @@ export default {
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: "#ff8c37", color: "#99d708",
shadowColor: "#ff8c37", shadowColor: "#99d708",
shadowBlur: 0, shadowBlur: 0,
}, },
}, },
@ -748,7 +748,7 @@ export default {
show: false, show: false,
}, },
shadowBlur: 0, shadowBlur: 0,
shadowColor: "#ffc257", shadowColor: "#7dd9c2",
}, },
}, },
hoverAnimation: false, hoverAnimation: false,
@ -760,7 +760,7 @@ export default {
normal: { normal: {
rich: { rich: {
a: { a: {
color: "#ffc257", color: "#7dd9c2",
align: "center", align: "center",
fontSize: 0.9 * vw, fontSize: 0.9 * vw,
fontWeight: "bold", fontWeight: "bold",
@ -774,7 +774,7 @@ export default {
formatter: function (params) { formatter: function (params) {
return ( return (
"{a|" + "{a|" +
100 + e.value3 +
"%}" + "%}" +
"\n{b|合格率}" "\n{b|合格率}"
); );
@ -790,8 +790,8 @@ export default {
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: "#ffc257", color: "#7dd9c2",
shadowColor: "#ffc257", shadowColor: "#7dd9c2",
shadowBlur: 0, shadowBlur: 0,
}, },
}, },
@ -866,7 +866,7 @@ export default {
formatter: function (params) { formatter: function (params) {
return ( return (
"{a|" + "{a|" +
1000 + e.value1 +
"}" + "}" +
"\n{b|总数}" "\n{b|总数}"
); );
@ -919,7 +919,7 @@ export default {
show: false, show: false,
}, },
shadowBlur: 0, shadowBlur: 0,
shadowColor: "#ff8c37", shadowColor: "#99d708",
}, },
}, },
hoverAnimation: false, hoverAnimation: false,
@ -931,7 +931,7 @@ export default {
normal: { normal: {
rich: { rich: {
a: { a: {
color: "#ff8c37", color: "#99d708",
align: "center", align: "center",
fontSize: 0.9 * vw, fontSize: 0.9 * vw,
fontWeight: "bold", fontWeight: "bold",
@ -945,7 +945,7 @@ export default {
formatter: function (params) { formatter: function (params) {
return ( return (
"{a|" + "{a|" +
1000 + e.value2 +
"}" + "}" +
"\n{b|合格数}" "\n{b|合格数}"
); );
@ -961,8 +961,8 @@ export default {
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: "#ff8c37", color: "#99d708",
shadowColor: "#ff8c37", shadowColor: "#99d708",
shadowBlur: 0, shadowBlur: 0,
}, },
}, },
@ -998,7 +998,7 @@ export default {
show: false, show: false,
}, },
shadowBlur: 0, shadowBlur: 0,
shadowColor: "#ffc257", shadowColor: "#7dd9c2",
}, },
}, },
hoverAnimation: false, hoverAnimation: false,
@ -1010,7 +1010,7 @@ export default {
normal: { normal: {
rich: { rich: {
a: { a: {
color: "#ffc257", color: "#7dd9c2",
align: "center", align: "center",
fontSize: 0.9 * vw, fontSize: 0.9 * vw,
fontWeight: "bold", fontWeight: "bold",
@ -1024,7 +1024,7 @@ export default {
formatter: function (params) { formatter: function (params) {
return ( return (
"{a|" + "{a|" +
100 + e.value3 +
"%}" + "%}" +
"\n{b|合格率}" "\n{b|合格率}"
); );
@ -1040,8 +1040,8 @@ export default {
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: "#ffc257", color: "#7dd9c2",
shadowColor: "#ffc257", shadowColor: "#7dd9c2",
shadowBlur: 0, shadowBlur: 0,
}, },
}, },
@ -1116,7 +1116,7 @@ export default {
formatter: function (params) { formatter: function (params) {
return ( return (
"{a|" + "{a|" +
1000 + e.value1 +
"}" + "}" +
"\n{b|总数}" "\n{b|总数}"
); );
@ -1169,7 +1169,7 @@ export default {
show: false, show: false,
}, },
shadowBlur: 0, shadowBlur: 0,
shadowColor: "#ff8c37", shadowColor: "#99d708",
}, },
}, },
hoverAnimation: false, hoverAnimation: false,
@ -1181,7 +1181,7 @@ export default {
normal: { normal: {
rich: { rich: {
a: { a: {
color: "#ff8c37", color: "#99d708",
align: "center", align: "center",
fontSize: 0.9 * vw, fontSize: 0.9 * vw,
fontWeight: "bold", fontWeight: "bold",
@ -1195,7 +1195,7 @@ export default {
formatter: function (params) { formatter: function (params) {
return ( return (
"{a|" + "{a|" +
1000 + e.value2 +
"}" + "}" +
"\n{b|合格数}" "\n{b|合格数}"
); );
@ -1211,8 +1211,8 @@ export default {
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: "#ff8c37", color: "#99d708",
shadowColor: "#ff8c37", shadowColor: "#99d708",
shadowBlur: 0, shadowBlur: 0,
}, },
}, },
@ -1248,7 +1248,7 @@ export default {
show: false, show: false,
}, },
shadowBlur: 0, shadowBlur: 0,
shadowColor: "#ffc257", shadowColor: "#7dd9c2",
}, },
}, },
hoverAnimation: false, hoverAnimation: false,
@ -1260,7 +1260,7 @@ export default {
normal: { normal: {
rich: { rich: {
a: { a: {
color: "#ffc257", color: "#7dd9c2",
align: "center", align: "center",
fontSize: 0.9 * vw, fontSize: 0.9 * vw,
fontWeight: "bold", fontWeight: "bold",
@ -1274,7 +1274,7 @@ export default {
formatter: function (params) { formatter: function (params) {
return ( return (
"{a|" + "{a|" +
100 + e.value3 +
"%}" + "%}" +
"\n{b|合格率}" "\n{b|合格率}"
); );
@ -1290,8 +1290,8 @@ export default {
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: "#ffc257", color: "#7dd9c2",
shadowColor: "#ffc257", shadowColor: "#7dd9c2",
shadowBlur: 0, shadowBlur: 0,
}, },
}, },
@ -1366,7 +1366,7 @@ export default {
formatter: function (params) { formatter: function (params) {
return ( return (
"{a|" + "{a|" +
1000 + e.value1 +
"}" + "}" +
"\n{b|总数}" "\n{b|总数}"
); );
@ -1419,7 +1419,7 @@ export default {
show: false, show: false,
}, },
shadowBlur: 0, shadowBlur: 0,
shadowColor: "#ff8c37", shadowColor: "#99d708",
}, },
}, },
hoverAnimation: false, hoverAnimation: false,
@ -1431,7 +1431,7 @@ export default {
normal: { normal: {
rich: { rich: {
a: { a: {
color: "#ff8c37", color: "#99d708",
align: "center", align: "center",
fontSize: 0.9 * vw, fontSize: 0.9 * vw,
fontWeight: "bold", fontWeight: "bold",
@ -1445,7 +1445,7 @@ export default {
formatter: function (params) { formatter: function (params) {
return ( return (
"{a|" + "{a|" +
1000 + e.value2 +
"}" + "}" +
"\n{b|合格数}" "\n{b|合格数}"
); );
@ -1461,8 +1461,8 @@ export default {
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: "#ff8c37", color: "#99d708",
shadowColor: "#ff8c37", shadowColor: "#99d708",
shadowBlur: 0, shadowBlur: 0,
}, },
}, },
@ -1498,7 +1498,7 @@ export default {
show: false, show: false,
}, },
shadowBlur: 0, shadowBlur: 0,
shadowColor: "#ffc257", shadowColor: "#7dd9c2",
}, },
}, },
hoverAnimation: false, hoverAnimation: false,
@ -1510,7 +1510,7 @@ export default {
normal: { normal: {
rich: { rich: {
a: { a: {
color: "#ffc257", color: "#7dd9c2",
align: "center", align: "center",
fontSize: 0.9 * vw, fontSize: 0.9 * vw,
fontWeight: "bold", fontWeight: "bold",
@ -1524,7 +1524,7 @@ export default {
formatter: function (params) { formatter: function (params) {
return ( return (
"{a|" + "{a|" +
100 + e.value3 +
"%}" + "%}" +
"\n{b|合格率}" "\n{b|合格率}"
); );
@ -1540,8 +1540,8 @@ export default {
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color: "#ffc257", color: "#7dd9c2",
shadowColor: "#ffc257", shadowColor: "#7dd9c2",
shadowBlur: 0, shadowBlur: 0,
}, },
}, },

95
src/views/board/scanDown/index.vue
Unescape Escape View File

@ -1,6 +1,6 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="headTitle">{{ line }}{{line === '' ? '' : '线'}}成品入库数据监控平台</div> <div class="headTitle">{{ line }}{{ line === '' ? '' : '线' }}成品入库数据监控平台</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 }}
@ -21,22 +21,25 @@
<div class="scrollTable"> <div class="scrollTable">
<div style="background-color: #094170"> <div style="background-color: #094170">
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold; width: 8%">
编号 序号
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold; width: 14.2%">
订单编号
</div>
<div class="scrollTableItem" style="font-weight: bold; width:38.4%">
产品型号 产品型号
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold; width: 8.2%">
计划数量 订单数量
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold; width: 8.2%">
实际数量 入库数量
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold; width: 8.2%">
完成率 完成率
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold; width: 14.2%">
时间 时间
</div> </div>
</div> </div>
@ -53,27 +56,31 @@
> >
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '> <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div <div
class="scrollTableItem"> class="scrollTableItem" style=" width: 8%">
{{ item.COLUMN_A }} {{ item.COLUMN_A }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem" style=" width: 14.2%">
{{ item.COLUMN_G }}
</div>
<div
class="scrollTableItem" style=" width:38.4%">
{{ item.COLUMN_B }} {{ item.COLUMN_B }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem" style=" width: 8.2%">
{{ item.COLUMN_C }} {{ item.COLUMN_C }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem" style=" width: 8.2%">
{{ item.COLUMN_D }} {{ item.COLUMN_D }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem" style=" width: 8.2%">
{{ item.COLUMN_E }} {{ item.COLUMN_E }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem" style=" width: 14.2%">
{{ item.COLUMN_F }} {{ item.COLUMN_F }}
</div> </div>
</div> </div>
@ -125,7 +132,7 @@ export default {
'LOSS(分钟)', 'LOSS(分钟)',
'入库标准节拍(秒)', '入库标准节拍(秒)',
'LOSS分类', 'LOSS分类',
'当班入库执行订单', '当班入库统计',
], ],
titlePosition: [ titlePosition: [
{ {
@ -157,7 +164,7 @@ export default {
finalInspection: {}, finalInspection: {},
scrollTableOption: { scrollTableOption: {
step: 0.5, // 数值越大速度滚动越快 step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length limitMoveNum: 8, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右 direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom openWatch: true, // 开启数据实时监控刷新dom
@ -190,7 +197,7 @@ export default {
legend: { legend: {
show: true, show: true,
itemGap: 50, itemGap: 50,
data: ['实际产量','目标产量'], data: ['实际产量', '目标产量'],
textStyle: { textStyle: {
color: "#f9f9f9", color: "#f9f9f9",
borderColor: "#fff", borderColor: "#fff",
@ -229,7 +236,7 @@ export default {
opacity: 0.3, opacity: 0.3,
}, },
}, },
data: e.map(val=>val.X_VALUE), data: e.map(val => val.X_VALUE),
}, },
], ],
yAxis: [ yAxis: [
@ -292,7 +299,7 @@ export default {
}, },
}, },
}, },
data: e.map(val=>val.Y_VALUE_ONE), data: e.map(val => val.Y_VALUE_ONE),
}, },
{ {
name: '目标产量', name: '目标产量',
@ -324,7 +331,7 @@ export default {
// tooltip: { // tooltip: {
// show: false // show: false
// }, // },
data: e.map(val=>val.Y_VALUE_TWO), data: e.map(val => val.Y_VALUE_TWO),
}, },
], ],
}) })
@ -360,7 +367,7 @@ export default {
}, },
legend: { legend: {
itemWidth: 3 * vw, itemWidth: 3 * vw,
data: ['不良数','一次不合格率','目标'], data: ['不良数', '一次不合格率', '目标'],
textStyle: { textStyle: {
color: "#d1e6eb", color: "#d1e6eb",
margin: 15, margin: 15,
@ -378,7 +385,7 @@ export default {
}, },
}, },
type: 'category', type: 'category',
data: e.map(val=>val.X_VALUE), data: e.map(val => val.X_VALUE),
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
} }
@ -435,7 +442,7 @@ export default {
}, },
}, },
}, },
data: e.map(val=>val.Y_VALUE_ONE), data: e.map(val => val.Y_VALUE_ONE),
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
@ -449,7 +456,7 @@ export default {
name: '不合格率', name: '不合格率',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: e.map(val=>val.Y_VALUE_TWO), data: e.map(val => val.Y_VALUE_TWO),
itemStyle: { itemStyle: {
normal: { normal: {
color: '#F9A25B', color: '#F9A25B',
@ -460,7 +467,7 @@ export default {
name: '目标', name: '目标',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: e.map(val=>3), data: e.map(val => 3),
itemStyle: { itemStyle: {
normal: { normal: {
color: '#0DB99D', color: '#0DB99D',
@ -510,7 +517,7 @@ export default {
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
data: e.map(val=>val.X_VALUE), data: e.map(val => val.X_VALUE),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#0177d4", color: "#0177d4",
@ -576,7 +583,7 @@ export default {
), ),
}, },
}, },
data: e.map(val=>val.Y_VALUE), data: e.map(val => val.Y_VALUE),
}, },
], ],
}) })
@ -621,7 +628,7 @@ export default {
legend: { legend: {
show: true, show: true,
itemGap: 50, itemGap: 50,
data: ['实际产量','目标产量'], data: ['实际产量', '目标产量'],
textStyle: { textStyle: {
color: "#f9f9f9", color: "#f9f9f9",
borderColor: "#fff", borderColor: "#fff",
@ -660,7 +667,7 @@ export default {
opacity: 0.3, opacity: 0.3,
}, },
}, },
data: e.map(val=>val.X_VALUE), data: e.map(val => val.X_VALUE),
}, },
], ],
yAxis: [ yAxis: [
@ -723,7 +730,7 @@ export default {
}, },
}, },
}, },
data: e.map(val=>val.Y_VALUE_ONE), data: e.map(val => val.Y_VALUE_ONE),
}, },
{ {
name: '目标产量', name: '目标产量',
@ -755,7 +762,7 @@ export default {
// tooltip: { // tooltip: {
// show: false // show: false
// }, // },
data: e.map(val=>val.Y_VALUE_TWO), data: e.map(val => val.Y_VALUE_TWO),
}, },
], ],
}) })
@ -791,7 +798,7 @@ export default {
}, },
legend: { legend: {
itemWidth: 3 * vw, itemWidth: 3 * vw,
data: ['不良数','一次不合格率','目标'], data: ['不良数', '一次不合格率', '目标'],
textStyle: { textStyle: {
color: "#d1e6eb", color: "#d1e6eb",
margin: 15, margin: 15,
@ -809,7 +816,7 @@ export default {
}, },
}, },
type: 'category', type: 'category',
data: e.map(val=>val.X_VALUE), data: e.map(val => val.X_VALUE),
axisPointer: { axisPointer: {
type: 'shadow' type: 'shadow'
} }
@ -866,7 +873,7 @@ export default {
}, },
}, },
}, },
data: e.map(val=>val.Y_VALUE_ONE), data: e.map(val => val.Y_VALUE_ONE),
label: { label: {
show: true, show: true,
position: 'top', position: 'top',
@ -880,7 +887,7 @@ export default {
name: '不合格率', name: '不合格率',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: e.map(val=>val.Y_VALUE_TWO), data: e.map(val => val.Y_VALUE_TWO),
itemStyle: { itemStyle: {
normal: { normal: {
color: '#F9A25B', color: '#F9A25B',
@ -891,7 +898,7 @@ export default {
name: '目标', name: '目标',
type: 'line', type: 'line',
yAxisIndex: 1, yAxisIndex: 1,
data: e.map(val=>3), data: e.map(val => 3),
itemStyle: { itemStyle: {
normal: { normal: {
color: '#0DB99D', color: '#0DB99D',
@ -942,7 +949,7 @@ export default {
containLabel: true, containLabel: true,
}, },
xAxis: { xAxis: {
data: e.map(val=>val.X_VALUE), data: e.map(val => val.X_VALUE),
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#0177d4", color: "#0177d4",
@ -1008,7 +1015,7 @@ export default {
), ),
}, },
}, },
data: e.map(val=>val.Y_VALUE), data: e.map(val => val.Y_VALUE),
}, },
], ],
}) })
@ -1038,17 +1045,17 @@ export default {
mixData(val) mixData(val)
}) })
this.line = '一' this.line = '一'
}else if (this.$route.query.id === '2' || this.id === '2') { } else if (this.$route.query.id === '2' || this.id === '2') {
this.RequestDataSet1.forEach(val => { this.RequestDataSet1.forEach(val => {
mixData(val) mixData(val)
}) })
this.line = '二' this.line = '二'
}else if (this.$route.query.id === '3' || this.id === '3') { } else if (this.$route.query.id === '3' || this.id === '3') {
this.RequestDataSet1.forEach(val => { this.RequestDataSet1.forEach(val => {
mixData(val) mixData(val)
}) })
this.line = '' this.line = ''
}else{ } else {
this.RequestDataSet.forEach(val => { this.RequestDataSet.forEach(val => {
mixData(val) mixData(val)
}) })
@ -1127,7 +1134,7 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
text-align: center; text-align: center;
display: inline-block; display: inline-block;
width: 16.6%; width: 14.2%;
} }
.chart1 { .chart1 {

80
src/views/board/week/index.vue
Unescape Escape View File

@ -23,20 +23,23 @@
<!--IQC--> <!--IQC-->
<div class="IQC" id="IQC"> <div class="IQC" id="IQC">
<div style="background-color: #094170"> <div style="background-color: #094170">
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold; width: 8%;">
序号
</div>
<div class="scrollTableItem" style="font-weight: bold; width:10%;">
订单编号 订单编号
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;width: 28%"> <div class="scrollTableItem" style="font-weight: bold;width: 47%">
型号 产品型号
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold; width: 12%;">
计划数量 订单数量
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold; width: 12%;">
完成数量 完成数量
</div> </div>
<div class="scrollTableItem" style="font-weight: bold;"> <div class="scrollTableItem" style="font-weight: bold; width: 11%;">
差异值 差异数
</div> </div>
</div> </div>
<vue-seamless-scroll <vue-seamless-scroll
@ -52,23 +55,27 @@
> >
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '> <div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div <div
class="scrollTableItem"> class="scrollTableItem" style=" width: 8%;">
{{ index + 1 }}
</div>
<div
class="scrollTableItem" style=" width:10%;">
{{ item.value1 }} {{ item.value1 }}
</div> </div>
<div <div
class="scrollTableItem" style="width: 28%"> class="scrollTableItem" style="width: 47%">
A-{{ item.value2 }} {{ item.value2 }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem" style=" width: 12%;">
{{ item.value3 }} {{ item.value3 }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem" style=" width: 12%;">
{{ item.value4 }} {{ item.value4 }}
</div> </div>
<div <div
class="scrollTableItem"> class="scrollTableItem" style=" width: 11%;">
{{ item.value5 }} {{ item.value5 }}
</div> </div>
</div> </div>
@ -109,7 +116,10 @@
<div v-html="safeDayHtml"></div> <div v-html="safeDayHtml"></div>
<div class="totalNum">合计：{{ totalNum }}台</div> <div class="totalNum">合计：{{ totalNum }}台</div>
<div class="info1">订单数量:{{ info1.ddsl }} 完成数量:{{ info1.wcsl }} 清单率:{{ ((info1.wcsl / info1.ddsl) * 100) .toFixed(2) }}%</div> <div class="info1">订单数量:{{ info1.ddsl }} 完成数量:{{ info1.wcsl }} 清单率:{{
((info1.wcsl / info1.ddsl) * 100).toFixed(2)
}}%
</div>
</div> </div>
</template> </template>
@ -129,11 +139,11 @@ export default {
name: "Liner", name: "Liner",
data() { data() {
return { return {
nowLine: 1, nowLine: 2,
nowWeek: "", nowWeek: "",
info1:{ info1: {
"ddsl":1000, "ddsl": 1000,
"wcsl":1000 "wcsl": 1000
}, },
title: [ title: [
'产量统计', '产量统计',
@ -143,7 +153,7 @@ export default {
'质检工序监控', '质检工序监控',
'安全生产', '安全生产',
], ],
totalNum: 10000, totalNum: 0,
titlePosition: [ titlePosition: [
{ {
top: 11.5, top: 11.5,
@ -172,7 +182,7 @@ export default {
], ],
scrollTableOption: { scrollTableOption: {
step: 0.5, // 数值越大速度滚动越快 step: 0.5, // 数值越大速度滚动越快
limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length limitMoveNum: 10, // 开始无缝滚动的数据量 this.dataList.length
hoverStop: true, // 是否开启鼠标悬停stop hoverStop: true, // 是否开启鼠标悬停stop
direction: 1, // 0向下 1向上 2向左 3向右 direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 开启数据实时监控刷新dom openWatch: true, // 开启数据实时监控刷新dom
@ -301,7 +311,7 @@ export default {
e: 'zh-1-02', e: 'zh-1-02',
i: "", i: "",
f: (e) => { f: (e) => {
this.totalNum = e
} }
}, },
{ {
@ -1181,6 +1191,7 @@ export default {
e: 'zh-2-02', e: 'zh-2-02',
i: "", i: "",
f: (e) => { f: (e) => {
this.totalNum = e
} }
}, },
@ -2061,6 +2072,7 @@ export default {
e: 'zh-3-02', e: 'zh-3-02',
i: "", i: "",
f: (e) => { f: (e) => {
this.totalNum = e
} }
}, },
@ -2826,9 +2838,21 @@ export default {
}, },
mounted() { mounted() {
this.RequestDataSet.forEach(val => { if(this.nowLine === 1 ){
mixData(val) this.RequestDataSet.forEach(val => {
}) mixData(val)
})
}
if(this.nowLine === 2 ){
this.RequestDataSet1.forEach(val => {
mixData(val)
})
}
if(this.nowLine === 3 ){
this.RequestDataSet2.forEach(val => {
mixData(val)
})
}
let min = Math.ceil(Math.min(...[61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],)) 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],)) let max = Math.ceil(Math.max(...[61, 25, 57, 83, 87, 73, 17, 25, 57, 83, 87, 73],))
@ -2864,19 +2888,19 @@ export default {
}, },
setLine(e) { setLine(e) {
this.nowLine = e this.nowLine = e
if(e === 1){ if (e === 1) {
this.RequestDataSet.forEach(val => { this.RequestDataSet.forEach(val => {
mixData(val) mixData(val)
}) })
} }
if(e === 2){ if (e === 2) {
this.RequestDataSet1.forEach(val => { this.RequestDataSet1.forEach(val => {
mixData(val) mixData(val)
}) })
} }
if(e === 3){ if (e === 3) {
this.RequestDataSet2.forEach(val => { this.RequestDataSet2.forEach(val => {
mixData(val) mixData(val)

212
src/views/model/equipment.vue
Unescape Escape View File

@ -1,8 +1,23 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="headTitle">仓库</div> <div class="headTitle">仓储物流</div>
<div class="exit" @click="exitFun"></div> <div class="exit" @click="exitFun"></div>
<div class="time" id="time">{{ time }}</div>
<div class="date" id="date">{{ date }}</div>
<div class="logo"></div>
<div class="title1" 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="centerTitle1">商品品类</div>
<div class="centerSpan1">22222</div>
<div class="centerTitle2">商品数量</div>
<div class="centerSpan2">55555</div>
<div class="centerTitle3">当日入库量</div>
<div class="centerSpan3">11111</div>
<div class="centerTitle4">当日出库量</div>
<div class="centerSpan4">4444</div>
<div class="chart1"> <div class="chart1">
<Chart ref="chart1"></Chart> <Chart ref="chart1"></Chart>
@ -60,7 +75,49 @@ export default {
} }
}, },
data() { data() {
return {} return {
time: '',
date: '',
title: [
'库存总量统计',
'库存总量统计TOP10',
'月内库存',
'库龄分析',
],
titlePosition: [
{
top: 11.5,
left: 5.5
},
{
top: 39.2,
left: 5.5
},
{
top: 62.8,
left: 30.5
},
{
top: 62.9,
left: 75
},
],
}
},
created() {
const getDate = () => {
let date = new Date()
let YYYY = date.getFullYear()
let MM = (date.getMonth() + 1).toString().length === 1 ? ('0' + (date.getMonth() + 1)) : (date.getMonth() + 1)
let dd = date.getDate().toString().length === 1 ? ('0' + date.getDate()) : date.getDate()
let HH = date.getHours().toString().length === 1 ? ('0' + date.getHours()) : date.getHours()
let mm = date.getMinutes().toString().length === 1 ? ('0' + date.getMinutes()) : date.getMinutes()
let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
this.date = `${YYYY} - ${MM} - ${dd}`
this.time = `${HH} : ${mm} : ${ss}`
}
getDate()
getDateIntervalFun = setInterval(getDate, 1000)
}, },
mounted() { mounted() {
echarts.registerMap('china', chinaMap); echarts.registerMap('china', chinaMap);
@ -173,27 +230,27 @@ export default {
data: [ data: [
{ {
value: 10, value: 10,
name: "问题1", name: "A-01",
}, },
{ {
value: 5, value: 5,
name: "问题2", name: "A-02",
}, },
{ {
value: 15, value: 15,
name: "问题3", name: "A-03",
}, },
{ {
value: 25, value: 25,
name: "问题4", name: "A-04",
}, },
{ {
value: 20, value: 20,
name: "问题5", name: "A-05",
}, },
{ {
value: 35, value: 35,
name: "问题6", name: "A-06",
}, },
], ],
}, },
@ -685,7 +742,7 @@ export default {
{ {
name: "周转率", name: "周转率",
type: "line", type: "line",
yAxisIndex:1, yAxisIndex: 1,
label: { label: {
normal: { normal: {
show: true, show: true,
@ -708,7 +765,7 @@ export default {
lineStyle: { lineStyle: {
color: "#ffffff", color: "#ffffff",
}, },
data: [94.7, 93.2, 94.7, 93.4, 94.4, 99.4, 92.4,96.2,97.2], data: [94.7, 93.2, 94.7, 93.4, 94.4, 99.4, 92.4, 96.2, 97.2],
}, },
], ],
}) })
@ -904,14 +961,16 @@ export default {
width: 23.5%; width: 23.5%;
height: 29%; height: 29%;
} }
.title{
.title {
position: absolute; position: absolute;
top: 0; top: 0;
left: 2.5%; left: 2.5%;
width: 95%; width: 95%;
height: 2vw; height: 2vw;
border-bottom: 3px solid #efd108; border-bottom: 3px solid #efd108;
.titleSpan1{
.titleSpan1 {
position: absolute; position: absolute;
top: 0; top: 0;
width: 2.5vw; width: 2.5vw;
@ -923,7 +982,8 @@ export default {
color: #efd108; color: #efd108;
font-size: 1vw; font-size: 1vw;
} }
.titleSpan2{
.titleSpan2 {
position: absolute; position: absolute;
top: 0; top: 0;
width: calc(100% - 2.5vw - 5vw); width: calc(100% - 2.5vw - 5vw);
@ -935,7 +995,8 @@ export default {
color: #efd108; color: #efd108;
font-size: 1vw; font-size: 1vw;
} }
.titleSpan3{
.titleSpan3 {
position: absolute; position: absolute;
text-align: center; text-align: center;
top: 0; top: 0;
@ -948,20 +1009,23 @@ export default {
font-size: 1vw; font-size: 1vw;
} }
} }
.chart4Info{
.chart4Info {
position: absolute; position: absolute;
top: calc(2vw + 3px); top: calc(2vw + 3px);
left: 2.5%; left: 2.5%;
width: 95%; width: 95%;
height: calc(100% - 2vw - 3px); height: calc(100% - 2vw - 3px);
overflow: hidden; overflow: hidden;
.info{
.info {
width: 100%; width: 100%;
height: 2vw; height: 2vw;
border-bottom: 1px solid #ffffff7F; border-bottom: 1px solid #ffffff7F;
margin-bottom: 2px; margin-bottom: 2px;
position: relative; position: relative;
.infoSpan1{
.infoSpan1 {
position: absolute; position: absolute;
top: 0; top: 0;
width: 2.5vw; width: 2.5vw;
@ -974,7 +1038,8 @@ export default {
font-size: 1vw; font-size: 1vw;
} }
.infoSpan2{
.infoSpan2 {
position: absolute; position: absolute;
top: 0; top: 0;
width: calc(100% - 2.5vw - 5vw); width: calc(100% - 2.5vw - 5vw);
@ -986,7 +1051,8 @@ export default {
color: #FFFFFFDD; color: #FFFFFFDD;
font-size: 1vw; font-size: 1vw;
} }
.infoSpan3{
.infoSpan3 {
position: absolute; position: absolute;
text-align: center; text-align: center;
top: 0; top: 0;
@ -1000,4 +1066,112 @@ export default {
} }
} }
} }
.title1 {
position: absolute;
transform: translateY(-50%);
color: #dddddd;
font-size: 1vw;
letter-spacing: 2px;
}
.centerTitle1 {
position: absolute;
top: 10.5%;
left: 33%;
transform: translate(-50%, -50%);
font-size: 1vw;
color:#fff
}
.centerSpan1 {
position: absolute;
top: 16%;
left: 33%;
transform: translate(-50%, -50%);
font-size: 1vw;
color:#fff
}
.centerTitle2 {
position: absolute;
top: 23.5%;
left: 33%;
transform: translate(-50%, -50%);
font-size: 1vw;
color:#fff
}
.centerSpan2 {
position: absolute;
top: 29%;
left: 33%;
transform: translate(-50%, -50%);
font-size: 1vw;
color:#fff
}
.centerTitle3 {
position: absolute;
top: 36.3%;
left: 33%;
transform: translate(-50%, -50%);
font-size: 1vw;
color:#fff
}
.centerSpan3 {
position: absolute;
top: 42%;
left: 33%;
transform: translate(-50%, -50%);
font-size: 1vw;
color:#fff
}
.centerTitle4 {
position: absolute;
top: 49.1%;
left: 33%;
transform: translate(-50%, -50%);
font-size: 1vw;
color:#fff
}
.centerSpan4 {
position: absolute;
top: 55%;
left: 33%;
transform: translate(-50%, -50%);
font-size: 1vw;
color:#fff
}
.logo {
background-image: url("../../assets/board/logo.png");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 6vw;
height: 2.3vw;
position: absolute;
top: 1%;
left: 1%;
}
.time, .date {
position: absolute;
font-size: 0.8vw;
color: #fcfcfc;
transform: translate(-50%, -50%);
white-space: nowrap;
}
.time {
top: 3.2%;
left: 85.8%;
}
.date {
top: 3.2%;
left: 94.1%;
}
</style> </style>

90
src/views/model/live.vue
Unescape Escape View File

@ -5,40 +5,58 @@
<div class="date" id="date">{{ date }}</div> <div class="date" id="date">{{ date }}</div>
<div class="logo"></div> <div class="logo"></div>
<div class="videoItem" style="top: 14.8%;left: 3.5%;"> <div class="videoItem" style="top: 14.8%;left: 3.5%;">
<video autoplay="" muted="" loop="loop"> <div>
<source src="@/assets/model/live/v1.mp4" type="video/mp4"> <div class="time1">{{ time1 }}</div>
您的浏览器不支持 video 标签。 <video autoplay="" muted="" loop="loop">
</video> <source src="@/assets/model/live/v1.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</div>
</div> </div>
<div class="videoItem" style="top: 14.8%;left:35%"> <div class="videoItem" style="top: 14.8%;left:35%">
<video autoplay="" muted="" loop="loop"> <div>
<source src="@/assets/model/live/v1.mp4" type="video/mp4"> <div class="time1">{{ time1 }}</div>
您的浏览器不支持 video 标签。 <video autoplay="" muted="" loop="loop">
</video> <source src="@/assets/model/live/v1.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</div>
</div> </div>
<div class="videoItem" style="top: 14.8%;left:66.4%"> <div class="videoItem" style="top: 14.8%;left:66.4%">
<video autoplay="" muted="" loop="loop"> <div>
<source src="@/assets/model/live/v1.mp4" type="video/mp4"> <div class="time1">{{ time1 }}</div>
您的浏览器不支持 video 标签。 <video autoplay="" muted="" loop="loop">
</video> <source src="@/assets/model/live/v1.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</div>
</div> </div>
<div class="videoItem" style="top: 59%;left:3.5%"> <div class="videoItem" style="top: 59%;left:3.5%">
<video autoplay="" muted="" loop="loop"> <div>
<source src="@/assets/model/live/v1.mp4" type="video/mp4"> <div class="time1">{{ time1 }}</div>
您的浏览器不支持 video 标签。 <video autoplay="" muted="" loop="loop">
</video> <source src="@/assets/model/live/v1.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</div>
</div> </div>
<div class="videoItem" style="top: 59%;left:35%"> <div class="videoItem" style="top: 59%;left:35%">
<video autoplay="" muted="" loop="loop"> <div>
<source src="@/assets/model/live/v1.mp4" type="video/mp4"> <div class="time1">{{ time1 }}</div>
您的浏览器不支持 video 标签。 <video autoplay="" muted="" loop="loop">
</video> <source src="@/assets/model/live/v1.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</div>
</div> </div>
<div class="videoItem" style="top: 59%;left:66.4%"> <div class="videoItem" style="top: 59%;left:66.4%">
<video autoplay="" muted="" loop="loop"> <div>
<source src="@/assets/model/live/v1.mp4" type="video/mp4"> <div class="time1">{{ time1 }}</div>
您的浏览器不支持 video 标签。 <video autoplay="" muted="" loop="loop">
</video> <source src="@/assets/model/live/v1.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</div>
</div> </div>
<div class="exit" @click="exitFun"></div> <div class="exit" @click="exitFun"></div>
</div> </div>
@ -58,6 +76,7 @@ export default {
data() { data() {
return { return {
time: '', time: '',
time1: '',
date: '' date: ''
} }
}, },
@ -72,6 +91,7 @@ export default {
let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds() let ss = date.getSeconds().toString().length === 1 ? ('0' + date.getSeconds()) : date.getSeconds()
this.date = `${YYYY} - ${MM} - ${dd}` this.date = `${YYYY} - ${MM} - ${dd}`
this.time = `${HH} : ${mm} : ${ss}` this.time = `${HH} : ${mm} : ${ss}`
this.time1 = `${YYYY} - ${MM} - ${dd} ${HH} : ${mm} : ${ss}`
} }
getDate() getDate()
getDateIntervalFun = setInterval(getDate, 1000) getDateIntervalFun = setInterval(getDate, 1000)
@ -96,6 +116,7 @@ export default {
top: 0; top: 0;
left: 0; left: 0;
} }
.logo { .logo {
background-image: url("../../assets/board/logo.png"); background-image: url("../../assets/board/logo.png");
background-repeat: no-repeat; background-repeat: no-repeat;
@ -119,6 +140,7 @@ export default {
height: 2vw; height: 2vw;
color: #e7b219; color: #e7b219;
} }
.time, .date { .time, .date {
position: absolute; position: absolute;
font-size: 0.8vw; font-size: 0.8vw;
@ -136,6 +158,7 @@ export default {
top: 3.2%; top: 3.2%;
left: 94.1%; left: 94.1%;
} }
.headTitle { .headTitle {
position: absolute; position: absolute;
top: 5%; top: 5%;
@ -144,19 +167,30 @@ export default {
font-size: 1.5vw; font-size: 1.5vw;
color: #d6eaed; color: #d6eaed;
letter-spacing: 10px; letter-spacing: 10px;
font-family: "微软雅黑",serif; font-family: "微软雅黑", serif;
} }
.videoItem { .videoItem {
position: absolute; position: absolute;
width: 30%; width: 30%;
height: 35.4%; height: 35.4%;
div{
video {
position: absolute; position: absolute;
width: 100%;
top: 50%; top: 50%;
transform: translateY(-50%); transform: translateY(-50%);
video {
width: 100%;
}
.time1 {
position: absolute;
top: 0;
right: 0;
font-size: 0.6vw;
color: #fff;
transform: translateY(0);
}
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save