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

修改界面显示

Browse Source
master
夜笙歌 2 years ago
parent f5c3e34fdd
commit 25542bcc5b
6 changed files with 483 additions and 12 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/model/live/bg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 150 KiB

BIN
src/assets/model/live/bg2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
src/assets/model/live/v1.mp4
View File

Binary file not shown.

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

@ -0,0 +1,106 @@
<template>
<div class="app-container">
<div class="videoItem" style="top: 10%;left:3%">
<video autoplay="" muted="" loop="loop">
<source src="@/assets/model/live/v1.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</div>
<div class="videoItem" style="top: 10%;left:33%">
<video autoplay="" muted="" loop="loop">
<source src="@/assets/model/live/v1.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</div>
<div class="videoItem" style="top: 10%;left:63%">
<video autoplay="" muted="" loop="loop">
<source src="@/assets/model/live/v1.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</div>
<div class="videoItem" style="top: 55%;left:3%">
<video autoplay="" muted="" loop="loop">
<source src="@/assets/model/live/v1.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</div>
<div class="videoItem" style="top: 55%;left:33%">
<video autoplay="" muted="" loop="loop">
<source src="@/assets/model/live/v1.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</div>
<div class="videoItem" style="top: 55%;left:63%">
<video autoplay="" muted="" loop="loop">
<source src="@/assets/model/live/v1.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
</div>
<div class="exit" @click="exitFun"></div>
</div>
</template>
<script>
export default {
name: "Liner",
props: {
exit: {
type: Function,
default: null
}
},
data() {
return {}
},
mounted() {
},
methods: {
exitFun() {
this.exit()
}
}
}
</script>
<style scoped lang="less">
.app-container {
background-image: url("~@/assets/model/live/bg.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.exit {
background-image: url("~@/assets/model/factoryIntroduction/exit.png");
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
top: 1%;
right: 1%;
font-weight: bold;
width: 2vw;
height: 2vw;
color: #e7b219;
}
.videoItem {
position: absolute;
width: 30%;
height: 44%;
background-image: url("~@/assets/model/live/bg2.png");
background-repeat: no-repeat;
background-size: 100% 100%;
video {
position: absolute;
width: 90%;
height: 85%;
top: 8%;
left: 5%;
}
}
</style>

21
src/views/model/model.vue
Unescape Escape View File

@ -23,7 +23,7 @@
</div> </div>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<div class="toolItem" @click="click1('现场直播')"> <div class="toolItem" @click="click1('live')">
<i class="el-icon-s-tools" style="font-size:2.2vw"></i> <i class="el-icon-s-tools" style="font-size:2.2vw"></i>
<div class="grid-content bg-purple">现场直播</div> <div class="grid-content bg-purple">现场直播</div>
</div> </div>
@ -67,6 +67,11 @@
<transition name="children"> <transition name="children">
<production :exit="exit" v-if="show === 'production'"/> <production :exit="exit" v-if="show === 'production'"/>
</transition> </transition>
<transition name="children">
<live :exit="exit" v-if="show === 'live'"/>
</transition>
<div class="flowChart" v-show="show1"> <div class="flowChart" v-show="show1">
<div class="flowItem" v-for="(i,k) in flowItemOptions" @click="setNowFlowIndex(k)" <div class="flowItem" v-for="(i,k) in flowItemOptions" @click="setNowFlowIndex(k)"
:class="nowFlowIndex === k ? 'wireAnimation' : ''" :class="nowFlowIndex === k ? 'wireAnimation' : ''"
@ -91,6 +96,7 @@ import factoryIntroduction from './factoryIntroduction'
import productDistribution from './productDistribution' import productDistribution from './productDistribution'
import dataCentre from './dataCentre' import dataCentre from './dataCentre'
import production from './production' import production from './production'
import live from './live'
const isAMRT = () => { const isAMRT = () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -111,7 +117,8 @@ export default {
factoryIntroduction, factoryIntroduction,
productDistribution, productDistribution,
dataCentre, dataCentre,
production production,
live
}, },
data() { data() {
return { return {
@ -630,8 +637,8 @@ export default {
.container { .container {
width: 100vw; width: 100vw;
height: 33.33vw; //height: 33.33vw;
//height: 100vh; height: 100vh;
} }
.tool { .tool {
@ -655,10 +662,10 @@ export default {
} }
.test { .test {
top: 20%; //top: 20%;
width: 100vw; width: 100vw;
height: 33.33vw; //height: 33.33vw;
//height: 100vh; height: 100vh;
position: absolute; position: absolute;
} }

368
src/views/model/production.vue
Unescape Escape View File

@ -1,15 +1,32 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="headTitle">生产制造运营中心</div>
<div class="exit" @click="exitFun"></div> <div class="exit" @click="exitFun"></div>
<div class="chart1"> <div class="chart1">
<Chart ref="chart1"></Chart> <Chart ref="chart1"></Chart>
</div> </div>
<div class="chart2"> <div class="chart2">
<Chart ref="chart2"></Chart> <div class="title">3日内需要交付订单</div>
<div class="item" style="left: 2%">
<div class="itemTitle">完成数/订单数</div>
<div class="ratio">5/14</div>
</div>
<div class="item" style="left: 52%">>
<div class="itemTitle">完成量/产品量</div>
<div class="ratio">1004/1701</div>
</div>
</div> </div>
<div class="chart3"> <div class="chart3">
<Chart ref="chart3"></Chart> <div class="title">本月需完成订单</div>
<div class="item" style="left: 2%">
<div class="itemTitle">完成数/订单数</div>
<div class="ratio">12/52</div>
</div>
<div class="item" style="left: 52%">>
<div class="itemTitle">完成量/产品量</div>
<div class="ratio">2333/6591</div>
</div>
</div> </div>
<div class="chart4"> <div class="chart4">
<Chart ref="chart4"></Chart> <Chart ref="chart4"></Chart>
@ -28,6 +45,8 @@
<script> <script>
import Chart from "@/components/board/Chart"; import Chart from "@/components/board/Chart";
import {getData} from "@/api/board/getData";
import * as echarts from 'echarts'
export default { export default {
name: "Liner", name: "Liner",
@ -101,7 +120,7 @@ export default {
], ],
yAxis: [ yAxis: [
{ {
name:'数量', name: '数量',
type: "value", type: "value",
splitLine: { splitLine: {
show: true, show: true,
@ -199,7 +218,7 @@ export default {
], ],
yAxis: [ yAxis: [
{ {
name:'合格率', name: '合格率',
type: "value", type: "value",
splitLine: { splitLine: {
show: true, show: true,
@ -218,7 +237,7 @@ export default {
axisLabel: { axisLabel: {
interval: 0, interval: 0,
fontSize: 0.5 * vw, fontSize: 0.5 * vw,
formatter:'{value}%' formatter: '{value}%'
}, },
splitArea: { splitArea: {
show: false, show: false,
@ -413,6 +432,262 @@ export default {
}, },
], ],
}) })
this.$refs.chart7.setData({
title: {
text: "本月异常分布类型",
left: "center",
top: "5%",
textStyle: {
color: "#fff",
fontSize: 0.7 * vw,
align: "center",
},
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b}: {c} ({d}%)",
},
series: [
{
name: "故障大类",
type: "pie",
selectedMode: "single",
radius: [0, "50%"],
label: {
normal: {
position: "inner",
},
},
labelLine: {
normal: {
show: false,
},
},
data: [
{value: 335, name: "辅件缺陷"},
{value: 679, name: "箱体缺陷"},
{value: 1548, name: "性能缺陷"},
],
},
{
name: "故障小类",
type: "pie",
radius: ["50%", "65%"],
label: {
normal: {
show: true,
textStyle: {
color: '#fff'
},
position: "outside",
},
emphasis: {
show: true,
},
},
data: [
{value: 335, name: "印刷品"},
{value: 310, name: "测温问题"},
{value: 234, name: "捡漏问题"},
{value: 135, name: "电检问题"},
{value: 1048, name: "内胆件"},
{value: 251, name: "压机室件"},
{value: 147, name: "后板"},
{value: 102, name: "塑料件"},
],
},
],
})
getData().then(e => {
this.$refs.chart6.setData({
title: {
text: "准时交付率（清单率）",
left: "center",
top: "5%",
textStyle: {
color: "#fff",
fontSize: 0.7 * vw,
align: "center",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
},
grid: {
left: "0",
right: "4%",
bottom: "0",
top: '25%',
containLabel: true,
},
legend: {
data: ['应完成订单', '实际完成订单', '准时交付率'],
right: 'center',
top: '10%',
textStyle: {
color: "#fff",
},
itemWidth: 12,
itemHeight: 10,
// itemGap: 35
},
xAxis: {
type: "category",
data: e.liner.inventoryStatus.x,
axisLine: {
lineStyle: {
color: "white",
},
},
axisLabel: {
// interval: 0,
// rotate: 40,
textStyle: {
fontFamily: "Microsoft YaHei",
},
},
},
yAxis: [
{
name: '数量 ',
type: "value",
axisLine: {
show: true,
lineStyle: {
color: "white",
},
},
splitLine: {
show: false,
},
axisLabel: {},
},
{
name: '百分比',
type: "value",
axisLine: {
show: true,
lineStyle: {
color: "white",
},
},
splitLine: {
show: false,
},
axisLabel: {},
}
],
series: [
{
name: '应完成订单',
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#39ffff",
},
{
offset: 1,
color: "#5affa6",
},
]),
},
},
data: e.liner.inventoryStatus.y[0].data,
},
{
name: '实际完成订单',
type: "bar",
barWidth: "30%",
barMaxWidth: 50,
label: {
normal: {
show: true,
position: "top",
textStyle: {
color: "#a8aab0",
fontStyle: "normal",
fontFamily: "微软雅黑",
fontSize: 0.75 * vw,
},
},
},
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: "#4adfff",
},
{
offset: 1,
color: "#3d7aff",
},
]),
},
},
data: e.liner.inventoryStatus.y[1].data,
},
{
name: '准时交付率',
type: "line",
// smooth: true, //是否平滑曲线显示
// symbol:'circle', // 默认是空心圆（中间是白色的），改成实心圆
showAllSymbol: true,
symbol: "emptyCircle",
symbolSize: 6,
yAxisIndex: 1,
lineStyle: {
normal: {
width: 3,
color: '#fff',
},
borderColor: "#f0f",
},
label: {
show: true,
position: "top",
textStyle: {
color: "#fff",
fontSize: 16
},
},
itemStyle: {
color: '#F2D770',
border: 0,
},
// tooltip: {
// show: false
// },
data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
},
],
})
})
}, },
methods: { methods: {
exitFun() { exitFun() {
@ -447,6 +722,17 @@ export default {
color: #e7b219; color: #e7b219;
} }
.headTitle {
position: absolute;
top: 5%;
left: 50%;
transform: translate(-50%, -100%);
font-size: 1.5vw;
color: #d6eaed;
letter-spacing: 10px;
}
.chart1 { .chart1 {
position: absolute; position: absolute;
top: 10%; top: 10%;
@ -463,6 +749,42 @@ export default {
width: 45%; width: 45%;
height: 21%; height: 21%;
background-color: #0b184f; background-color: #0b184f;
.title {
position: absolute;
top: 5%;
left: 50%;
transform: translateX(-50%);
font-size: 1vw;
color: #d6eaed;
letter-spacing: 2px;
}
.item {
position: absolute;
top: 25%;
width: 45%;
height: 70%;
border: 1px solid #fff6;
.itemTitle {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
color: #6fc3dd;
font-size: 1vw;
}
.ratio {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
color: #62aafe;
font-size: 3vw;
}
}
} }
.chart3 { .chart3 {
@ -472,6 +794,42 @@ export default {
width: 45%; width: 45%;
height: 21%; height: 21%;
background-color: #0b184f; background-color: #0b184f;
.title {
position: absolute;
top: 5%;
left: 50%;
transform: translateX(-50%);
font-size: 1vw;
color: #d6eaed;
letter-spacing: 2px;
}
.item {
position: absolute;
top: 25%;
width: 45%;
height: 70%;
border: 1px solid #fff6;
.itemTitle {
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
color: #6fc3dd;
font-size: 1vw;
}
.ratio {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%);
color: #62aafe;
font-size: 3vw;
}
}
} }
.chart4 { .chart4 {

Write Preview
Loading…
Cancel
Save