修改接口

master
夜笙歌 11 months ago
parent b9e731f427
commit 586ac82a09

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

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

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

@ -21,28 +21,28 @@
<div class="scrollTable">
<div style="background-color: #094170">
<div class="scrollTableItem" style="font-weight: bold;">
<div class="scrollTableItem" style="font-weight: bold;width:5%">
序号
</div>
<div class="scrollTableItem" style="font-weight: bold;">
<div class="scrollTableItem" style="font-weight: bold;width:15%">
订单号
</div>
<div class="scrollTableItem" style="font-weight: bold;">
<div class="scrollTableItem" style="font-weight: bold;width:17.5%">
产品型号
</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 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 class="scrollTableItem" style="font-weight: bold;width:12.5%">
当日上线数量
</div>
<div class="scrollTableItem" style="font-weight: bold;width:12.5%">
上线进度
</div>
<div class="scrollTableItem" style="font-weight: bold;">
<div class="scrollTableItem" style="font-weight: bold;width:12.5%">
计划时间
</div>
</div>
@ -59,35 +59,35 @@
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div
class="scrollTableItem">
{{ item.value1 }}
class="scrollTableItem" style="width:5%">
{{ index + 1 }}
</div>
<div
class="scrollTableItem">
class="scrollTableItem" style="width:15%">
{{ item.value1 }}
</div>
<div
class="scrollTableItem">
class="scrollTableItem" style="width:17.5%">
{{ item.value2 }}
</div>
<div
class="scrollTableItem">
class="scrollTableItem" style="width:12.5%">
{{ item.value3 }}
</div>
<div
class="scrollTableItem">
class="scrollTableItem" style="width:12.5%">
{{ item.value4 }}
</div>
<div
class="scrollTableItem">
{{ item.value4 }}
class="scrollTableItem" style="width:12.5%">
{{ item.value7 }}
</div>
<div
class="scrollTableItem">
class="scrollTableItem" style="width:12.5%">
{{ item.value5 }}
</div>
<div
class="scrollTableItem">
class="scrollTableItem" style="width:12.5%">
{{ item.value6 }}
</div>
</div>
@ -141,7 +141,7 @@ export default {
info: {},
scrollTableOption: {
step: 0.5, //
limitMoveNum: 5, // this.dataList.length
limitMoveNum: 10, // this.dataList.length
hoverStop: true, // stop
direction: 1, // 0 1 2 3
openWatch: true, // dom
@ -211,6 +211,22 @@ export default {
{
name: "数量",
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%",
barMaxWidth: 50,
itemStyle: {
@ -273,7 +289,7 @@ export default {
fontSize: 10,
},
splitLine: {
show: true,
show: false,
lineStyle: {
color: "#2d3d53",
},
@ -284,6 +300,7 @@ export default {
{
type: "bar",
barWidth: '40%',
barMaxWidth: 50,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
@ -441,9 +458,10 @@ export default {
top: 21%;
left: 88.5%;
transform: translate(-50%, -50%);
font-size: 1.8vw;
font-size: 3.6vw;
letter-spacing: 4px;
color: #d6eaed;
font-weight: 600;
}
.info1Title {
@ -451,7 +469,7 @@ export default {
top: 11.1%;
left: 23%;
width: 24%;
font-size: 1vw;
font-size: 1.2vw;
color: #fff9;
text-align: left;
}
@ -462,7 +480,7 @@ export default {
top: 11.1%;
left: 52.7%;
width: 24%;
font-size: 1vw;
font-size: 1.2vw;
color: #fff9;
text-align: left;
}
@ -473,7 +491,7 @@ export default {
top: 14.8%;
left: 23%;
width: 24%;
font-size: 1vw;
font-size: 1.2vw;
color: #fff9;
text-align: left;
}
@ -484,7 +502,7 @@ export default {
top: 14.8%;
left: 52.7%;
width: 24%;
font-size: 1vw;
font-size: 1.2vw;
color: #fff9;
text-align: left;
}
@ -495,7 +513,7 @@ export default {
top: 18.4%;
left: 23%;
width: 24%;
font-size: 1vw;
font-size: 1.2vw;
color: #fff9;
text-align: left;
}
@ -505,19 +523,18 @@ export default {
top: 18.3%;
left: 52.7%;
width: 24%;
font-size: 1vw;
font-size: 1.2vw;
color: #fff9;
text-align: left;
}
.info7Title {
position: absolute;
top: 22%;
left: 23%;
width: 24%;
font-size: 1vw;
font-size: 1.2vw;
color: #fff9;
text-align: left;
}

@ -71,8 +71,8 @@
<span>D</span>
</div>
<div class="chartSpan1">线</div>
<div class="chartSpan2">西线</div>
<div class="chartSpan1" v-if="$route.query.id === '1' || id === '1'">线</div>
<div class="chartSpan2" v-if="$route.query.id === '1' || id === '1'">西线</div>
<div class="supplementInfo">注射压力标准范围10.0-14.0Mpa AB组份枪头压力差1Mpa</div>
<div class="supplementInfo1">发泡料温度标准范围:18.0-24.0</div>
@ -510,10 +510,11 @@ export default {
barWidth: "40%",
label: {
show: true,
formatter:(e)=>{
if(e.data === 0){
formatter: (e) => {
if (e.data === 0) {
return ''
}else{}
} else {
}
return e.data
},
position: "top",
@ -545,12 +546,10 @@ export default {
{
e: 'fp-1-05',
i: "SCADA_INV_STATS_01('')",
t:2,
f: (e) => {
// this.scrollTableData1 = e
getFoamingData({
"PRODUCT_LINE_CODE": "CX_01"
}).then(e => {
let table = e.data?.map(val => {
console.log(JSON.stringify(e))
let table = e.map(val => {
return {
value1: val.EQUIPMENT_CODE,
value2: val.FIXTUREBOXTYPE,
@ -558,7 +557,7 @@ export default {
value4: val.TARGET,
value5: val.PLAN_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,
value9: val.TWOHOUR,
value10: val.THREEHOUR,
@ -593,9 +592,6 @@ export default {
value15: totalArr.map(val => val.value18).reduce((acc, curr) => acc + curr, 0),
value16: totalArr.map(val => val.value19).reduce((acc, curr) => acc + curr, 0),
}
})
}
},
{
@ -667,10 +663,11 @@ export default {
barWidth: "30%",
label: {
show: true,
formatter:(e)=>{
if(e.data === 0){
formatter: (e) => {
if (e.data === 0) {
return ''
}else{}
} else {
}
return e.data
},
position: "top",
@ -708,10 +705,11 @@ export default {
barGap: '40%',
label: {
show: true,
formatter:(e)=>{
if(e.data === 0){
formatter: (e) => {
if (e.data === 0) {
return ''
}else{}
} else {
}
return e.data
},
position: "top",
@ -865,10 +863,11 @@ export default {
label: {
show: true,
position: "top",
formatter:(e)=>{
if(e.data === 0){
formatter: (e) => {
if (e.data === 0) {
return ''
}else{}
} else {
}
return e.data
},
textStyle: {
@ -901,7 +900,7 @@ export default {
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温度',
@ -919,10 +918,11 @@ export default {
label: {
show: true,
position: "top",
formatter:(e)=>{
if(e.data === 0){
formatter: (e) => {
if (e.data === 0) {
return ''
}else{}
} else {
}
return e.data
},
textStyle: {
@ -956,7 +956,7 @@ export default {
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: {
// interval: 0,
interval: 0,
// rotate: 40,
textStyle: {
fontFamily: "Microsoft YaHei",
@ -1018,10 +1018,11 @@ export default {
type: "bar",
barWidth: "33%",
label: {
formatter:(e)=>{
if(e.data === 0){
formatter: (e) => {
if (e.data === 0) {
return ''
}else{}
} else {
}
return e.data
},
show: true,
@ -1066,6 +1067,7 @@ export default {
f: (e) => {
this.planNum = e[0].X_VALUE
this.practicalNum = e[0].Y_VALUE_ONE
this.differenceNum = e[0].Y_VALUE_TWO
}
},
{
@ -1132,10 +1134,11 @@ export default {
barMaxWidth: 40,
label: {
show: true,
formatter:(e)=>{
if(e.data === 0){
formatter: (e) => {
if (e.data === 0) {
return ''
}else{}
} else {
}
return e.data
},
position: "top",
@ -1168,11 +1171,8 @@ export default {
e: 'fp-2-05',
i: "SCADA_INV_STATS_02('')",
f: (e) => {
// this.scrollTableData1 = e
getFoamingData({
"PRODUCT_LINE_CODE": "CX_02"
}).then(e => {
let table = e.data?.map(val => {
console.log(e)
let table = e.map(val => {
return {
value1: val.EQUIPMENT_CODE,
value2: val.FIXTUREBOXTYPE,
@ -1180,7 +1180,7 @@ export default {
value4: val.TARGET,
value5: val.PLAN_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,
value9: val.TWOHOUR,
value10: val.THREEHOUR,
@ -1195,14 +1195,13 @@ export default {
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),
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),
@ -1216,7 +1215,6 @@ export default {
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: {
show: true,
position: "top",
formatter:(e)=>{
if(e.data === 0){
formatter: (e) => {
if (e.data === 0) {
return ''
}else{}
} else {
}
return e.data
},
textStyle: {
@ -1330,10 +1329,11 @@ export default {
barGap: '40%',
label: {
show: true,
formatter:(e)=>{
if(e.data === 0){
formatter: (e) => {
if (e.data === 0) {
return ''
}else{}
} else {
}
return e.data
},
position: "top",
@ -1486,10 +1486,11 @@ export default {
},
label: {
show: true,
formatter:(e)=>{
if(e.data === 0){
formatter: (e) => {
if (e.data === 0) {
return ''
}else{}
} else {
}
return e.data
},
position: "top",
@ -1523,7 +1524,7 @@ export default {
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温度',
@ -1540,10 +1541,11 @@ export default {
},
label: {
show: true,
formatter:(e)=>{
if(e.data === 0){
formatter: (e) => {
if (e.data === 0) {
return ''
}else{}
} else {
}
return e.data
},
position: "top",
@ -1578,7 +1580,7 @@ export default {
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: {
// interval: 0,
interval: 0,
// rotate: 40,
textStyle: {
fontFamily: "Microsoft YaHei",
@ -1641,10 +1643,11 @@ export default {
barWidth: "33%",
label: {
show: true,
formatter:(e)=>{
if(e.data === 0){
formatter: (e) => {
if (e.data === 0) {
return ''
}else{}
} else {
}
return e.data
},
position: "top",
@ -2027,101 +2030,112 @@ export default {
background: #00ff00;
border-radius: 50%;
}
.left1{
.left1 {
background-image: url("../../../assets/board/left.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
top: 38%;
left: 32%;
width: 5vw;
height: 4.05vw;
span{
span {
position: absolute;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
top: 28%;
left: 43%;
font-size: 1vw;
color: #fff;
}
}
.left2{
.left2 {
background-image: url("../../../assets/board/right.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
top: 49%;
left: 55%;
width: 5vw;
height: 2.86vw;
span{
span {
position: absolute;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
top: 37%;
left: 57%;
font-size: 1vw;
color: #fff;
}
}
.right1{
.right1 {
background-image: url("../../../assets/board/right.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
top: 36%;
left: 57%;
width: 5vw;
height: 2.86vw;
span{
span {
position: absolute;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
top: 37%;
left: 57%;
font-size: 1vw;
color: #fff;
}
}
.right2{
.right2 {
background-image: url("../../../assets/board/right.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
top: 39%;
left: 68%;
width: 5vw;
height: 2.86vw;
span{
span {
position: absolute;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
top: 37%;
left: 57%;
font-size: 1vw;
color: #fff;
}
}
.chartSpan1{
.chartSpan1 {
position: absolute;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
top: 94.3%;
left: 73%;
font-size: 0.8vw;
color: #fff;
}
.chartSpan1{
.chartSpan1 {
position: absolute;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
top: 94.3%;
left: 73%;
font-size: 0.8vw;
color: #fff;
}
.chartSpan2{
.chartSpan2 {
position: absolute;
transform: translate(-50%,-50%);
transform: translate(-50%, -50%);
top: 94.3%;
left: 96%;
font-size: 0.8vw;

@ -11,14 +11,15 @@
}}
</div>
<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 class="title" v-for="(i,k) in title"
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
{{ i }}
</div>
<div style="position: absolute;transform: translate(-100%, -50%);top: 24.4%;left: 35%;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: 24.4%;left: 31%;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"
:style="'background-color:'+(status1 === '1' ? '#00ff00':'ff0000')"></div>
<div class="status2"
@ -45,13 +46,13 @@
<div class="scrollTable">
<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 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 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>
@ -59,13 +60,13 @@
style="height: 84%;overflow: hidden;">
<div v-for="(item, index) in scrollTableData" :key="index">
<div :style='"background-color:" + ((index % 2 === 0) ? "#053460" : "#032d57")'>
<div class="scrollTableItem" style="width: 33%;padding:4px 0 ">
<div class="scrollTableItem" style="width: 10%;padding:4px 0 ">
{{ item.COLUMN_A }}
</div>
<div class="scrollTableItem" style="width: 33%;padding:4px 0 ">
<div class="scrollTableItem" style="width: 45%;padding:4px 0 ">
{{ item.COLUMN_B }}
</div>
<div class="scrollTableItem" style="width: 33%;padding:4px 0 ">
<div class="scrollTableItem" style="width: 45%;padding:4px 0 ">
{{ item.COLUMN_C }}
</div>
</div>
@ -146,6 +147,7 @@ import * as echarts from 'echarts'
import {getData} from "@/api/board/getData";
import {mixData} from "@/api/board/mixData";
let intervalFun = null
export default {
components: {
vueSeamlessScroll,
@ -193,9 +195,9 @@ export default {
},
],
show: 0,
planNum: 1000,
practicalNum: 1000,
differenceValue: 1000,
planNum: 0,
practicalNum: 0,
differenceNum:0,
scrollTableOption: {
step: 0.5, //
limitMoveNum: 9999999999, // this.dataList.length
@ -679,7 +681,7 @@ export default {
},
},
axisLabel: {
// interval: 0,
interval: 0,
// rotate: 40,
textStyle: {
fontFamily: "Microsoft YaHei",
@ -747,6 +749,7 @@ export default {
console.log(e)
this.planNum = e[0]?.X_VALUE || 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 => {
mixData(val)
})
intervalFun = setInterval(() => {
this.RequestDataSet.forEach(val => {
mixData(val)
})
}, 1000 * 10)
},
beforeDestroy() {
console.log(1)
if(intervalFun){
clearInterval(intervalFun)
intervalFun = null
}
},
methods: {
setColor: (e, i) => {
@ -904,8 +919,8 @@ export default {
.status1 {
position: absolute;
transform: translate(-50%, -50%);
top: 24.4%;
left: 36%;
top: 27.4%;
left: 37.5%;
width: 1.5vw;
height: 1.5vw;
background: #00ff00;
@ -915,8 +930,8 @@ export default {
.status2 {
position: absolute;
transform: translate(-50%, -50%);
top: 28.2%;
left: 36%;
top: 32.2%;
left: 37.5%;
width: 1.5vw;
height: 1.5vw;
background: #00ff00;

@ -4,7 +4,7 @@
<div class="topNum team">{{ team }}</div>
<div class="topNum planNum">{{ planNum }}</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"
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
{{ i }}
@ -141,6 +141,7 @@ export default {
team: '',
planNum: 0,
practicalNum: 0,
differenceNum:0,
scrollTableOption: {
step: 0.5,
limitMoveNum: 9999999999,
@ -160,6 +161,7 @@ export default {
this.team = e[0].COLUMN_A
this.planNum = e[0].COLUMN_B
this.practicalNum = e[0].COLUMN_C
this.differenceNum = e[0].COLUMN_D
}
},
{

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

@ -1,6 +1,6 @@
<template>
<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"
:style="'top:'+(titlePosition[k]&&titlePosition[k].top||0)+'%;left:'+(titlePosition[k]&&titlePosition[k].left||0)+'%'">
{{ i }}
@ -21,22 +21,25 @@
<div class="scrollTable">
<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;">
<div class="scrollTableItem" style="font-weight: bold; width: 14.2%">
订单编号
</div>
<div class="scrollTableItem" style="font-weight: bold; width:38.4%">
产品型号
</div>
<div class="scrollTableItem" style="font-weight: bold;">
计划数量
<div class="scrollTableItem" style="font-weight: bold; width: 8.2%">
订单数量
</div>
<div class="scrollTableItem" style="font-weight: bold;">
实际数量
<div class="scrollTableItem" style="font-weight: bold; width: 8.2%">
入库数量
</div>
<div class="scrollTableItem" style="font-weight: bold;">
<div class="scrollTableItem" style="font-weight: bold; width: 8.2%">
完成率
</div>
<div class="scrollTableItem" style="font-weight: bold;">
<div class="scrollTableItem" style="font-weight: bold; width: 14.2%">
时间
</div>
</div>
@ -53,27 +56,31 @@
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div
class="scrollTableItem">
class="scrollTableItem" style=" width: 8%">
{{ item.COLUMN_A }}
</div>
<div
class="scrollTableItem">
class="scrollTableItem" style=" width: 14.2%">
{{ item.COLUMN_G }}
</div>
<div
class="scrollTableItem" style=" width:38.4%">
{{ item.COLUMN_B }}
</div>
<div
class="scrollTableItem">
class="scrollTableItem" style=" width: 8.2%">
{{ item.COLUMN_C }}
</div>
<div
class="scrollTableItem">
class="scrollTableItem" style=" width: 8.2%">
{{ item.COLUMN_D }}
</div>
<div
class="scrollTableItem">
class="scrollTableItem" style=" width: 8.2%">
{{ item.COLUMN_E }}
</div>
<div
class="scrollTableItem">
class="scrollTableItem" style=" width: 14.2%">
{{ item.COLUMN_F }}
</div>
</div>
@ -125,7 +132,7 @@ export default {
'LOSS(分钟)',
'入库标准节拍(秒)',
'LOSS分类',
'当班入库执行订单',
'当班入库统计',
],
titlePosition: [
{
@ -157,7 +164,7 @@ export default {
finalInspection: {},
scrollTableOption: {
step: 0.5, //
limitMoveNum: 5, // this.dataList.length
limitMoveNum: 8, // this.dataList.length
hoverStop: true, // stop
direction: 1, // 0 1 2 3
openWatch: true, // dom
@ -190,7 +197,7 @@ export default {
legend: {
show: true,
itemGap: 50,
data: ['实际产量','目标产量'],
data: ['实际产量', '目标产量'],
textStyle: {
color: "#f9f9f9",
borderColor: "#fff",
@ -229,7 +236,7 @@ export default {
opacity: 0.3,
},
},
data: e.map(val=>val.X_VALUE),
data: e.map(val => val.X_VALUE),
},
],
yAxis: [
@ -292,7 +299,7 @@ export default {
},
},
},
data: e.map(val=>val.Y_VALUE_ONE),
data: e.map(val => val.Y_VALUE_ONE),
},
{
name: '目标产量',
@ -324,7 +331,7 @@ export default {
// tooltip: {
// 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: {
itemWidth: 3 * vw,
data: ['不良数','一次不合格率','目标'],
data: ['不良数', '一次不合格率', '目标'],
textStyle: {
color: "#d1e6eb",
margin: 15,
@ -378,7 +385,7 @@ export default {
},
},
type: 'category',
data: e.map(val=>val.X_VALUE),
data: e.map(val => val.X_VALUE),
axisPointer: {
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: {
show: true,
position: 'top',
@ -449,7 +456,7 @@ export default {
name: '不合格率',
type: 'line',
yAxisIndex: 1,
data: e.map(val=>val.Y_VALUE_TWO),
data: e.map(val => val.Y_VALUE_TWO),
itemStyle: {
normal: {
color: '#F9A25B',
@ -460,7 +467,7 @@ export default {
name: '目标',
type: 'line',
yAxisIndex: 1,
data: e.map(val=>3),
data: e.map(val => 3),
itemStyle: {
normal: {
color: '#0DB99D',
@ -510,7 +517,7 @@ export default {
containLabel: true,
},
xAxis: {
data: e.map(val=>val.X_VALUE),
data: e.map(val => val.X_VALUE),
axisLine: {
lineStyle: {
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: {
show: true,
itemGap: 50,
data: ['实际产量','目标产量'],
data: ['实际产量', '目标产量'],
textStyle: {
color: "#f9f9f9",
borderColor: "#fff",
@ -660,7 +667,7 @@ export default {
opacity: 0.3,
},
},
data: e.map(val=>val.X_VALUE),
data: e.map(val => val.X_VALUE),
},
],
yAxis: [
@ -723,7 +730,7 @@ export default {
},
},
},
data: e.map(val=>val.Y_VALUE_ONE),
data: e.map(val => val.Y_VALUE_ONE),
},
{
name: '目标产量',
@ -755,7 +762,7 @@ export default {
// tooltip: {
// 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: {
itemWidth: 3 * vw,
data: ['不良数','一次不合格率','目标'],
data: ['不良数', '一次不合格率', '目标'],
textStyle: {
color: "#d1e6eb",
margin: 15,
@ -809,7 +816,7 @@ export default {
},
},
type: 'category',
data: e.map(val=>val.X_VALUE),
data: e.map(val => val.X_VALUE),
axisPointer: {
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: {
show: true,
position: 'top',
@ -880,7 +887,7 @@ export default {
name: '不合格率',
type: 'line',
yAxisIndex: 1,
data: e.map(val=>val.Y_VALUE_TWO),
data: e.map(val => val.Y_VALUE_TWO),
itemStyle: {
normal: {
color: '#F9A25B',
@ -891,7 +898,7 @@ export default {
name: '目标',
type: 'line',
yAxisIndex: 1,
data: e.map(val=>3),
data: e.map(val => 3),
itemStyle: {
normal: {
color: '#0DB99D',
@ -942,7 +949,7 @@ export default {
containLabel: true,
},
xAxis: {
data: e.map(val=>val.X_VALUE),
data: e.map(val => val.X_VALUE),
axisLine: {
lineStyle: {
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)
})
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 => {
mixData(val)
})
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 => {
mixData(val)
})
this.line = ''
}else{
} else {
this.RequestDataSet.forEach(val => {
mixData(val)
})
@ -1127,7 +1134,7 @@ export default {
text-overflow: ellipsis;
text-align: center;
display: inline-block;
width: 16.6%;
width: 14.2%;
}
.chart1 {

@ -23,20 +23,23 @@
<!--IQC-->
<div class="IQC" id="IQC">
<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 class="scrollTableItem" style="font-weight: bold;width: 28%">
型号
<div class="scrollTableItem" style="font-weight: bold;width: 47%">
产品型号
</div>
<div class="scrollTableItem" style="font-weight: bold;">
计划数量
<div class="scrollTableItem" style="font-weight: bold; width: 12%;">
订单数量
</div>
<div class="scrollTableItem" style="font-weight: bold;">
<div class="scrollTableItem" style="font-weight: bold; width: 12%;">
完成数量
</div>
<div class="scrollTableItem" style="font-weight: bold;">
差异
<div class="scrollTableItem" style="font-weight: bold; width: 11%;">
差异
</div>
</div>
<vue-seamless-scroll
@ -52,23 +55,27 @@
>
<div :style='"background-color:" + ((index % 2 === 0)? "#053460":"#032d57") '>
<div
class="scrollTableItem">
class="scrollTableItem" style=" width: 8%;">
{{ index + 1 }}
</div>
<div
class="scrollTableItem" style=" width:10%;">
{{ item.value1 }}
</div>
<div
class="scrollTableItem" style="width: 28%">
A-{{ item.value2 }}
class="scrollTableItem" style="width: 47%">
{{ item.value2 }}
</div>
<div
class="scrollTableItem">
class="scrollTableItem" style=" width: 12%;">
{{ item.value3 }}
</div>
<div
class="scrollTableItem">
class="scrollTableItem" style=" width: 12%;">
{{ item.value4 }}
</div>
<div
class="scrollTableItem">
class="scrollTableItem" style=" width: 11%;">
{{ item.value5 }}
</div>
</div>
@ -109,7 +116,10 @@
<div v-html="safeDayHtml"></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>
</template>
@ -129,11 +139,11 @@ export default {
name: "Liner",
data() {
return {
nowLine: 1,
nowLine: 2,
nowWeek: "",
info1:{
"ddsl":1000,
"wcsl":1000
info1: {
"ddsl": 1000,
"wcsl": 1000
},
title: [
'产量统计',
@ -143,7 +153,7 @@ export default {
'质检工序监控',
'安全生产',
],
totalNum: 10000,
totalNum: 0,
titlePosition: [
{
top: 11.5,
@ -172,7 +182,7 @@ export default {
],
scrollTableOption: {
step: 0.5, //
limitMoveNum: 5, // this.dataList.length
limitMoveNum: 10, // this.dataList.length
hoverStop: true, // stop
direction: 1, // 0 1 2 3
openWatch: true, // dom
@ -301,7 +311,7 @@ export default {
e: 'zh-1-02',
i: "",
f: (e) => {
this.totalNum = e
}
},
{
@ -1181,6 +1191,7 @@ export default {
e: 'zh-2-02',
i: "",
f: (e) => {
this.totalNum = e
}
},
@ -2061,6 +2072,7 @@ export default {
e: 'zh-3-02',
i: "",
f: (e) => {
this.totalNum = e
}
},
@ -2826,9 +2838,21 @@ export default {
},
mounted() {
if(this.nowLine === 1 ){
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 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) {
this.nowLine = e
if(e === 1){
if (e === 1) {
this.RequestDataSet.forEach(val => {
mixData(val)
})
}
if(e === 2){
if (e === 2) {
this.RequestDataSet1.forEach(val => {
mixData(val)
})
}
if(e === 3){
if (e === 3) {
this.RequestDataSet2.forEach(val => {
mixData(val)

@ -1,8 +1,23 @@
<template>
<div class="app-container">
<div class="headTitle"></div>
<div class="headTitle">储物流</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">
<Chart ref="chart1"></Chart>
@ -60,7 +75,49 @@ export default {
}
},
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() {
echarts.registerMap('china', chinaMap);
@ -173,27 +230,27 @@ export default {
data: [
{
value: 10,
name: "问题1",
name: "A-01",
},
{
value: 5,
name: "问题2",
name: "A-02",
},
{
value: 15,
name: "问题3",
name: "A-03",
},
{
value: 25,
name: "问题4",
name: "A-04",
},
{
value: 20,
name: "问题5",
name: "A-05",
},
{
value: 35,
name: "问题6",
name: "A-06",
},
],
},
@ -685,7 +742,7 @@ export default {
{
name: "周转率",
type: "line",
yAxisIndex:1,
yAxisIndex: 1,
label: {
normal: {
show: true,
@ -708,7 +765,7 @@ export default {
lineStyle: {
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%;
height: 29%;
}
.title{
.title {
position: absolute;
top: 0;
left: 2.5%;
width: 95%;
height: 2vw;
border-bottom: 3px solid #efd108;
.titleSpan1{
.titleSpan1 {
position: absolute;
top: 0;
width: 2.5vw;
@ -923,7 +982,8 @@ export default {
color: #efd108;
font-size: 1vw;
}
.titleSpan2{
.titleSpan2 {
position: absolute;
top: 0;
width: calc(100% - 2.5vw - 5vw);
@ -935,7 +995,8 @@ export default {
color: #efd108;
font-size: 1vw;
}
.titleSpan3{
.titleSpan3 {
position: absolute;
text-align: center;
top: 0;
@ -948,20 +1009,23 @@ export default {
font-size: 1vw;
}
}
.chart4Info{
.chart4Info {
position: absolute;
top: calc(2vw + 3px);
left: 2.5%;
width: 95%;
height: calc(100% - 2vw - 3px);
overflow: hidden;
.info{
.info {
width: 100%;
height: 2vw;
border-bottom: 1px solid #ffffff7F;
margin-bottom: 2px;
position: relative;
.infoSpan1{
.infoSpan1 {
position: absolute;
top: 0;
width: 2.5vw;
@ -974,7 +1038,8 @@ export default {
font-size: 1vw;
}
.infoSpan2{
.infoSpan2 {
position: absolute;
top: 0;
width: calc(100% - 2.5vw - 5vw);
@ -986,7 +1051,8 @@ export default {
color: #FFFFFFDD;
font-size: 1vw;
}
.infoSpan3{
.infoSpan3 {
position: absolute;
text-align: center;
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>

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

Loading…
Cancel
Save