This commit is contained in:
lb 2022-11-08 08:46:29 +08:00
commit 49171d240c
7 changed files with 128 additions and 49 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.5 MiB

BIN
src/assets/video/3d.mkv Normal file

Binary file not shown.

View File

@ -13,7 +13,6 @@ Vue.use(Router)
/* Layout */ /* Layout */
import Layout from '@/layout' import Layout from '@/layout'
export const constantRoutes = [ export const constantRoutes = [
{ {
path: '/3d-overview', path: '/3d-overview',
@ -2298,7 +2297,6 @@ export const dynamicRoutes = [
// }, // },
] ]
}, },
{ {
path: '/basic', path: '/basic',
component: Layout, component: Layout,

View File

@ -52,7 +52,6 @@ const unfullScreenSvg = `<svg style="width: 100%; height: 100%" viewBox="0 0 32
</g> </g>
</g> </g>
</svg>` </svg>`
export default { export default {
name: 'TechyHeader', name: 'TechyHeader',
props: ['headTitle'], props: ['headTitle'],

View File

@ -1,5 +1,5 @@
<template> <template>
<div id="container" ref="container" class="visual-container"> <div id="container" ref="container" class="visual-container material-cockpit">
<el-row <el-row
class="container-title" class="container-title"
:style="{ :style="{
@ -8,8 +8,10 @@
fontSize: beilv * 30 + 'px' fontSize: beilv * 30 + 'px'
}" }"
> >
<img src="../../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt=""> <div :style="{ paddingLeft: 645 * beilv + 'px' }">
合肥新能源数字工厂物料管理驾驶舱 <img src="../../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
合肥新能源数字工厂物料管理驾驶舱
</div>
<el-button <el-button
type="text" type="text"
class="title-button" class="title-button"
@ -32,7 +34,7 @@
<el-row> <el-row>
<el-col :style="{ marginTop: 16 * beilv + 'px' }"> <el-col :style="{ marginTop: 16 * beilv + 'px' }">
<base-container :beilv="beilv" :height="470" :title="'在途原片'" :title-icon="'cockpit_2_2'"> <base-container :beilv="beilv" :height="470" :title="'在途原片'" :title-icon="'cockpit_2_2'">
<div class="box-padding"> <div class="box-padding specil-table1">
<base-table <base-table
:page="1" :page="1"
:limit="14" :limit="14"
@ -49,7 +51,7 @@
<el-row> <el-row>
<el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }"> <el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }">
<base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'"> <base-container :beilv="beilv" :height="470" :title="'在途辅料'" :title-icon="'cockpit_2_3'">
<div class="box-padding"> <div class="box-padding specil-table1">
<base-table <base-table
:page="1" :page="1"
:limit="14" :limit="14"
@ -75,45 +77,55 @@ import bomList from './components/bomList.vue'
const originalFilm = [ const originalFilm = [
{ {
prop: 'time', prop: 'time',
label: '上线时间' label: '上线时间',
minWidth: 35
}, },
{ {
prop: 'productLine', prop: 'productLine',
label: '产线' label: '产线',
minWidth: 33
}, },
{ {
prop: 'spec', prop: 'spec',
label: '原片规格' label: '原片规格',
minWidth: 32.4
}, },
{ {
prop: 'batch', prop: 'batch',
label: '批次' label: '批次',
minWidth: 35
}, },
{ {
prop: 'num', prop: 'num',
label: '数量' label: '数量',
minWidth: 28
} }
] ]
const material = [ const material = [
{ {
prop: 'time', prop: 'time',
label: '上线时间' label: '上线时间',
minWidth: 35
}, },
{ {
prop: 'eqName', prop: 'eqName',
label: '设备名称' label: '设备名称',
minWidth: 33
}, },
{ {
prop: 'spec', prop: 'spec',
label: '辅料规格' label: '辅料规格',
minWidth: 32.4
}, },
{ {
prop: 'batch', prop: 'batch',
label: '批次' label: '批次',
minWidth: 35
}, },
{ {
prop: 'num', prop: 'num',
label: '数量' label: '数量',
minWidth: 28
} }
] ]
export default { export default {
@ -220,6 +232,7 @@ export default {
}) })
return false return false
} }
this.isFullScreen = !this.isFullScreen
screenfull.toggle(this.$refs.container) screenfull.toggle(this.$refs.container)
} }
} }
@ -236,7 +249,6 @@ export default {
background: url('../../../assets/img/cockpit/title.png') no-repeat; background: url('../../../assets/img/cockpit/title.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
color: #fff; color: #fff;
text-align: center;
.title-button { .title-button {
color: #00fff0; color: #00fff0;
font-size: 20px; font-size: 20px;
@ -248,3 +260,17 @@ export default {
} }
} }
</style> </style>
<style lang="scss">
.material-cockpit {
.specil-table1 {
.el-table .cell {
padding-left: 40px;
padding-right: 40px;
}
.el-table--border th:first-child .cell,
.el-table--border td:first-child .cell {
padding-left: 40px;
}
}
}
</style>

View File

@ -1,5 +1,5 @@
<template> <template>
<div id="container" ref="container" class="visual-container"> <div id="container" ref="container" class="visual-container order-cockpit">
<el-row <el-row
class="container-title" class="container-title"
:style="{ :style="{
@ -8,16 +8,18 @@
fontSize: beilv * 30 + 'px' fontSize: beilv * 30 + 'px'
}" }"
> >
<img src="../../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt=""> <div :style="{ paddingLeft: 645 * beilv + 'px' }">
合肥新能源数字工厂工单管理驾驶舱 <img src="../../../assets/img/logo.png" style="width:1.1em;position: relative;top:.4em" alt="">
合肥新能源数字工厂工单管理驾驶舱
</div>
<el-button <el-button
type="text" type="text"
class="title-button" class="title-button"
:style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }" :style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
@click="changeFullScreen" @click="changeFullScreen"
> >
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" /> <svg-icon v-if="isFullScreen" icon-class="unFullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
<svg-icon v-else icon-class="fullScreenView" /> <svg-icon v-else icon-class="fullScreenView" :style="{fontSize: 33 * beilv + 'px'}" />
</el-button> </el-button>
</el-row> </el-row>
<el-row class="container-main"> <el-row class="container-main">
@ -30,7 +32,7 @@
</el-col> </el-col>
<el-col :span="14"> <el-col :span="14">
<base-container :beilv="beilv" :height="412" :title="'订单池'" :title-icon="'cockpit_1_2'"> <base-container :beilv="beilv" :height="412" :title="'订单池'" :title-icon="'cockpit_1_2'">
<div class="box-padding"> <div class="box-padding specil-table1">
<base-table <base-table
:page="1" :page="1"
:limit="12" :limit="12"
@ -47,7 +49,7 @@
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }"> <el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }">
<el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }" :span="24"> <el-col :style="{ margin: 16 * beilv + 'px' + ' 0' }" :span="24">
<base-container :beilv="beilv" :height="520" :title="'在途/完成订单监控'" :title-icon="'cockpit_1_3'"> <base-container :beilv="beilv" :height="520" :title="'在途/完成订单监控'" :title-icon="'cockpit_1_3'">
<div class="box-padding"> <div class="box-padding specil-table2">
<base-table <base-table
:page="1" :page="1"
:limit="16" :limit="16"
@ -73,71 +75,87 @@ import orderStatus from './components/orderStatus.vue'
const orderPool = [ const orderPool = [
{ {
prop: 'customerName', prop: 'customerName',
label: '客户名称' label: '客户名称',
minWidth: 35.2
}, },
{ {
prop: 'orderCode', prop: 'orderCode',
label: '订单编号' label: '订单编号',
minWidth: 32
}, },
{ {
prop: 'productName', prop: 'productName',
label: '产品名称' label: '产品名称',
minWidth: 32
}, },
{ {
prop: 'planNum', prop: 'planNum',
label: '计划加工量' label: '计划加工量',
minWidth: 23.6
}, },
{ {
prop: 'planDelivery', prop: 'planDelivery',
label: '计划交货期' label: '计划交货期',
minWidth: 28.8
}, },
{ {
prop: 'status', prop: 'status',
label: '订单状态', label: '订单状态',
subcomponent: orderStatus subcomponent: orderStatus,
minWidth: 19
} }
] ]
const orderMonitiring = [ const orderMonitiring = [
{ {
prop: 'customerName', prop: 'customerName',
label: '客户名称' label: '客户名称',
minWidth: 35.2
}, },
{ {
prop: 'orderCode', prop: 'orderCode',
label: '订单编号' label: '订单编号',
minWidth: 33.2
}, },
{ {
prop: 'status', prop: 'status',
label: '订单状态', label: '订单状态',
subcomponent: orderStatus subcomponent: orderStatus,
minWidth: 27
}, },
{ {
prop: 'completion', prop: 'completion',
label: '完成率' label: '完成率',
minWidth: 24.8
}, },
{ {
prop: 'yield', prop: 'yield',
label: '良品率' label: '良品率',
minWidth: 24.8
}, },
{ {
prop: 'shiftCosts', prop: 'shiftCosts',
label: '班组费用' label: '班组费用',
minWidth: 24.8
}, },
{ {
prop: 'energyCosts', prop: 'energyCosts',
label: '能耗费用' label: '能耗费用',
minWidth: 29.4
}, },
{ {
prop: 'equipmentCost', prop: 'equipmentCost',
label: '设备费用' label: '设备费用',
minWidth: 29.4
}, },
{ {
prop: 'materialCost', prop: 'materialCost',
label: '材料费用' label: '材料费用',
minWidth: 29.4
}, },
{ {
prop: 'totalCost', prop: 'totalCost',
label: '总费用' label: '总费用',
minWidth: 31.6
} }
] ]
export default { export default {
@ -217,11 +235,11 @@ export default {
obj.status = parseInt(Math.random() * 3 + 1) obj.status = parseInt(Math.random() * 3 + 1)
obj.completion = obj.status === 1 ? '0.00%' : (obj.status === 3 ? '100%' : parseInt(Math.random() * 100) + '%') obj.completion = obj.status === 1 ? '0.00%' : (obj.status === 3 ? '100%' : parseInt(Math.random() * 100) + '%')
obj.yield = parseInt(Math.random() * 50 + 50) + '%' obj.yield = parseInt(Math.random() * 50 + 50) + '%'
obj.shiftCosts = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100) obj.shiftCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
obj.energyCosts = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100) obj.energyCosts = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
obj.equipmentCost = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100) obj.equipmentCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
obj.materialCost = obj.status === 1 ? 0 : parseInt(Math.random() * 800 + 100) obj.materialCost = obj.status === 1 ? parseInt(0).toFixed(2) : parseInt(Math.random() * 800 + 100).toFixed(2)
obj.totalCost = obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost obj.totalCost = parseInt(obj.shiftCosts + obj.energyCosts + obj.equipmentCost + obj.materialCost).toFixed(2)
temp.push(obj) temp.push(obj)
} }
this.orderMonitiringList = temp this.orderMonitiringList = temp
@ -247,6 +265,7 @@ export default {
}) })
return false return false
} }
this.isFullScreen = !this.isFullScreen
screenfull.toggle(this.$refs.container) screenfull.toggle(this.$refs.container)
} }
} }
@ -263,7 +282,6 @@ export default {
background: url('../../../assets/img/cockpit/title.png') no-repeat; background: url('../../../assets/img/cockpit/title.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
color: #fff; color: #fff;
text-align: center;
.title-button { .title-button {
color: #00fff0; color: #00fff0;
font-size: 20px; font-size: 20px;
@ -278,3 +296,26 @@ export default {
} }
} }
</style> </style>
<style lang="scss">
.order-cockpit {
.specil-table1 {
.el-table .cell {
padding-left: 25px;
padding-right: 25px;
}
.el-table--border th:first-child .cell,
.el-table--border td:first-child .cell {
padding-left: 25px;
}
}
.specil-table2 {
.el-table .cell {
padding-left: 50px;
}
.el-table--border th:first-child .cell,
.el-table--border td:first-child .cell {
padding-left: 50px;
}
}
}
</style>

View File

@ -1,5 +1,5 @@
<template> <template>
<div style="height: 14px"> <div :style="{ height: 15 * beilv + 'px' }">
<span v-if="this.injectData.status === 3"> <span v-if="this.injectData.status === 3">
<svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" /> <svg-icon icon-class="green_dot" style="font-size: 14px; position: relative; top: .08em" />
已完成 已完成
@ -22,6 +22,21 @@ export default {
type: Object, type: Object,
default: () => ({}) default: () => ({})
} }
},
data() {
return {
beilv: 1
}
},
mounted() {
this.beilv = document.getElementById('container').offsetWidth / 1920
window.addEventListener('resize', () => {
if (this.isFullScreen) {
this.beilv = document.body.offsetWidth / 1920
} else {
this.beilv = document.getElementById('container').offsetWidth / 1920
}
})
} }
} }
</script> </script>