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

修改界面显示

Browse Source
master
夜笙歌 1 year ago
parent 6eb9292614
commit 8f0706f3d6
9 changed files with 2332 additions and 19 deletions
Show Stats Download Patch File Download Diff File

BIN
src/assets/model/dataCentre/bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
src/assets/model/dataCentre/border.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
src/assets/model/dataCentre/border2.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

BIN
src/assets/model/dataCentre/bottom.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
src/assets/model/production/bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 325 KiB

1791
src/views/model/dataCentre.vue
View File

File diff suppressed because it is too large Load Diff

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

@ -16,7 +16,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('dataCentre')">
<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>
@ -34,7 +34,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('production')">
<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>
@ -60,12 +60,20 @@
<transition name="children"> <transition name="children">
<product-distribution :exit="exit" v-if="show === 'productDistribution'"/> <product-distribution :exit="exit" v-if="show === 'productDistribution'"/>
</transition> </transition>
<transition name="children">
<data-centre :exit="exit" v-if="show === 'dataCentre'"/>
</transition>
<transition name="children">
<production :exit="exit" v-if="show === 'production'"/>
</transition>
</div> </div>
</template> </template>
<script> <script>
import factoryIntroduction from './factoryIntroduction' import factoryIntroduction from './factoryIntroduction'
import productDistribution from './productDistribution' import productDistribution from './productDistribution'
import dataCentre from './dataCentre'
import production from './production'
const isAMRT = () => { const isAMRT = () => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -84,7 +92,9 @@ export default {
name: "Model", name: "Model",
components: { components: {
factoryIntroduction, factoryIntroduction,
productDistribution productDistribution,
dataCentre,
production
}, },
data() { data() {
return { return {
@ -102,21 +112,21 @@ export default {
console.log(AMRT) console.log(AMRT)
let num = 0 let num = 0
let modelArr = [ let modelArr = [
// '1720315475507941376', '1720315475507941376',
// '1720315479907766272', '1720315479907766272',
// '1720315484513112064', '1720315484513112064',
// '1720315500866703360', '1720315500866703360',
// '1720315558030872576', '1720315558030872576',
// '1720315596551360512', '1720315596551360512',
// '1720315644550975488', '1720315644550975488',
// '1720315648946606080', '1720315648946606080',
// '1720315687114772480', '1720315687114772480',
// '1720315691422322688', '1720315691422322688',
// '1720315722275622912', '1720315722275622912',
// '1720315729129115648', '1720315729129115648',
// '1720315768454909952', '1720315768454909952',
// '1720316275214913536', '1720316275214913536',
// '1720316297822212096', '1720316297822212096',
] ]
modelArr.forEach(e => { modelArr.forEach(e => {
let model = viewer.loadModel(e, { let model = viewer.loadModel(e, {

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

@ -0,0 +1,512 @@
<template>
<div class="app-container">
<div class="exit" @click="exitFun"></div>
<div class="chart1">
<Chart ref="chart1"></Chart>
</div>
<div class="chart2">
<Chart ref="chart2"></Chart>
</div>
<div class="chart3">
<Chart ref="chart3"></Chart>
</div>
<div class="chart4">
<Chart ref="chart4"></Chart>
</div>
<div class="chart5">
<Chart ref="chart5"></Chart>
</div>
<div class="chart6">
<Chart ref="chart6"></Chart>
</div>
<div class="chart7">
<Chart ref="chart7"></Chart>
</div>
</div>
</template>
<script>
import Chart from "@/components/board/Chart";
export default {
name: "Liner",
components: {
Chart
},
props: {
exit: {
type: Function,
default: null
}
},
data() {
return {}
},
mounted() {
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
this.$refs.chart1.setData({
title: {
text: "3日完成订单",
left: "center",
top: "5%",
textStyle: {
color: "#fff",
fontSize: 0.7 * vw,
align: "center",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
textStyle: {
color: "#fff",
},
},
},
grid: {
borderWidth: 0,
top: '20%',
bottom: 1.5 * vw,
left: 2.5 * vw,
right: 2.5 * vw,
textStyle: {
color: "#fff",
},
},
xAxis: [
{
type: "category",
axisLine: {
lineStyle: {
color: "#90979c",
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
splitArea: {
show: false,
},
axisLabel: {
interval: 0,
fontSize: 0.5 * vw,
},
data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
},
],
yAxis: [
{
name:'数量',
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#90979c33",
},
},
axisLine: {
lineStyle: {
color: "#90979c",
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
fontSize: 0.5 * vw
},
splitArea: {
show: false,
},
},
],
series: [
{
name: "应完成订单",
type: "bar",
barWidth: '30%',
itemStyle: {
normal: {
color: "#5ecee0",
barBorderRadius: '50%',
},
},
data: [
709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
],
},
],
})
this.$refs.chart4.setData({
title: {
text: "7日内合格率",
left: "center",
top: "5%",
textStyle: {
color: "#fff",
fontSize: 0.7 * vw,
align: "center",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
textStyle: {
color: "#fff",
},
},
},
grid: {
borderWidth: 0,
top: '20%',
bottom: 1.5 * vw,
left: 2.5 * vw,
right: 2.5 * vw,
textStyle: {
color: "#fff",
},
},
xAxis: [
{
type: "category",
axisLine: {
lineStyle: {
color: "#90979c",
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
splitArea: {
show: false,
},
axisLabel: {
interval: 0,
fontSize: 0.5 * vw,
},
data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
},
],
yAxis: [
{
name:'合格率',
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "#90979c44",
},
},
axisLine: {
lineStyle: {
color: "#90979c",
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
fontSize: 0.5 * vw,
formatter:'{value}%'
},
splitArea: {
show: false,
},
},
],
series: [
{
name: "总数",
type: "line",
symbolSize: 10,
symbol: "circle",
itemStyle: {
normal: {
color: "rgba(252,230,48,1)",
barBorderRadius: 0,
label: {
show: true,
position: "top",
color: "#fff",
fontSize: 0.6 * vw,
formatter: function (p) {
return (p.value > 0 ? p.value : "") + '%';
},
},
},
},
data: [
106, 111, 96, 65, 86, 126, 101, 94, 100
],
},
],
})
this.$refs.chart5.setData({
title: {
text: "订单履约率",
left: "center",
top: "5%",
textStyle: {
color: "#fff",
fontSize: 0.7 * vw,
align: "center",
},
},
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
textStyle: {
color: "#fff",
},
},
},
grid: {
borderWidth: 0,
top: '20%',
bottom: 1.5 * vw,
left: 2.5 * vw,
right: 2.5 * vw,
textStyle: {
color: "#fff",
},
},
legend: {
x: "center",
top: "12%",
textStyle: {
fontSize: 0.6 * vw,
color: "#90979c",
},
},
xAxis: [
{
type: "category",
axisLine: {
lineStyle: {
color: "#90979c",
},
},
splitLine: {
show: false,
},
axisTick: {
show: false,
},
splitArea: {
show: false,
},
axisLabel: {
interval: 0,
fontSize: 0.5 * vw,
},
data: [1, 2, 3, 4, 5, 6, 7, 8, 9],
},
],
yAxis: [
{
type: "value",
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: "#90979c",
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
fontSize: 0.5 * vw
},
splitArea: {
show: false,
},
},
{
type: "value",
splitLine: {
show: false,
},
axisLine: {
lineStyle: {
color: "#90979c",
},
},
axisTick: {
show: false,
},
axisLabel: {
interval: 0,
fontSize: 0.5 * vw
},
splitArea: {
show: false,
},
},
],
series: [
{
name: "日计划数",
type: "bar",
borderWidth: '15%',
itemStyle: {
normal: {
color: "#5ecee0",
},
},
data: [
709, 1917, 2455, 2610, 1719, 1433, 1544, 3285, 5208
],
},
{
name: "日产量",
type: "bar",
borderWidth: '15%',
barGap: "-100%",
itemStyle: {
normal: {
color: "#78b4fe",
barBorderRadius: 0,
},
},
data: [327, 1776, 507, 1200, 800, 482, 204, 1390, 1001],
},
{
name: "达成率",
type: "line",
symbolSize: 10,
symbol: "circle",
yAxisIndex: 1,
itemStyle: {
normal: {
color: "rgba(252,230,48,1)",
barBorderRadius: 0,
label: {
show: true,
position: "top",
color: "#fff",
fontSize: 0.6 * vw,
formatter: function (p) {
return (p.value > 0 ? p.value : "") + '%';
},
},
},
},
data: [
106, 111, 96, 65, 86, 126, 101, 94, 100
],
},
],
})
},
methods: {
exitFun() {
this.exit()
}
}
}
</script>
<style lang="less" scoped>
.app-container {
background-image: url("~@/assets/model/production/bg.png");
background-repeat: no-repeat;
background-size: 100% 100%;
background-color: #021e31;
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;
}
.chart1 {
position: absolute;
top: 10%;
left: 1.3%;
width: 25%;
height: 43%;
background-color: #0b184f;
}
.chart2 {
position: absolute;
top: 10%;
left: 27.6%;
width: 45%;
height: 21%;
background-color: #0b184f;
}
.chart3 {
position: absolute;
top: 32%;
left: 27.6%;
width: 45%;
height: 21%;
background-color: #0b184f;
}
.chart4 {
position: absolute;
top: 10%;
left: 73.9%;
width: 25%;
height: 43%;
background-color: #0b184f;
}
.chart5 {
position: absolute;
top: 54.5%;
left: 1.3%;
width: 25%;
height: 43%;
background-color: #0b184f;
}
.chart6 {
position: absolute;
top: 54.5%;
left: 27.6%;
width: 45%;
height: 43%;
background-color: #0b184f;
}
.chart7 {
position: absolute;
top: 54.5%;
left: 73.9%;
width: 25%;
height: 43%;
background-color: #0b184f;
}
</style>
Write Preview
Loading…
Cancel
Save