Skip to content

Z
zhongtong-avi-web
Commit 8902b668 authored by 李志鸣's avatar 李志鸣
Browse files
Options

fea(整体AVI视图): 静态开发

parent 29a0ae9d
Show whitespace changes
Inline Side-by-side
Showing with 991 additions and 2 deletions
src/lang/zh/route.js
View file @ 8902b668
......@@ -24,5 +24,8 @@ export default {
Basic: '基础数据',
WorkshopBasic: '车间基础数据',
DeviceBasic: '设备基础数据',
LaneBasic: '车道基础数据'
LaneBasic: '车道基础数据',
// AVI大屏
Monitor: 'AVI大屏',
MonitorIndex: 'AVI大屏'
}
src/router/index.js
View file @ 8902b668
......@@ -19,6 +19,8 @@ import workshopRouter from './modules/workshop'
import deviceRunningTimeRouter from './modules/deviceRunning'
// 基础数据
import basicRouter from './modules/basic'
// AVI大屏
import monitorRouter from './modules/monitor'
// 系统管理
import systemRouter from './modules/system'
......@@ -48,6 +50,7 @@ export const asyncRouterMap = [
workshopRouter,
deviceRunningTimeRouter,
basicRouter,
monitorRouter,
systemRouter,
{
path: '*',
......
src/router/modules/monitor.js 0 → 100644
View file @ 8902b668
/**
* 大屏监控
*/
export default {
path: '/monitor',
component: () => import('@/views/Layout/lsd'),
redirect: '/monitor/index',
meta: { title: 'Monitor', icon: 'kanban', openNewWindow: true },
children: [
{
path: 'monitorIndex',
component: () => import('@/views/Monitor/index'),
name: 'MonitorIndex',
meta: { title: 'MonitorIndex', icon: 'kanban' }
}
]
}
src/views/Layout/components/SidebarItem.vue
View file @ 8902b668
......@@ -2,7 +2,7 @@
<div v-if="!item.hidden && item.children" class="sidebar-item-pack">
<!-- 显示一层菜单 -->
<template v-if="hasOneShowingChild(item.children, item) && (!onlyOneChild.children || onlyOneChild.noShowingChildren) && !item.alwaysShow && checkCurrentRouteAuthority(item.children, item)">
<router-link :to="resolvePath(onlyOneChild.path)">
<router-link tag="a" :target="openNewWindowToggle(item)" :to="resolvePath(onlyOneChild.path)">
<el-menu-item :index="resolvePath(onlyOneChild.path)">
<svg-icon :icon-class="onlyOneChild.meta.icon !== undefined ? onlyOneChild.meta.icon : 'list'" />
<span slot="title">{{generateTitle(onlyOneChild.meta.title)}}</span>
......@@ -110,6 +110,14 @@
isExternalLink (routePath) {
return validateURL(routePath)
},
// 判断是否打开新的标签页
openNewWindowToggle (routeItem) {
if (routeItem.meta.hasOwnProperty('openNewWindow') && routeItem.meta.openNewWindow) {
return '_blank'
} else {
return '_self'
}
},
generateTitle
}
}
......
src/views/Monitor/index.vue 0 → 100644
View file @ 8902b668
<template>
<div class="monitor-pack">
<div class="view-pack">
<!--电泳作业区-->
<div class="electrophoresis-pack" @click="doElectrophoresisClick">
<div>
<!--上左区-->
<div class="t-l-washed-4"></div>
<div class="t-l-pure-water-wash-1"></div>
<div class="t-l-electrophoretic-transfer"></div>
<div class="t-l-electrophoretic-tank"></div>
<div class="t-l-UF1"></div>
<div class="t-l-UF2"></div>
<div class="t-l-pure-water-wash-2"></div>
<div class="t-l-electrophoresis-down"></div>
<div class="t-l-station"></div>
<!--上中区-->
<div class="t-m-washed-3"></div>
<div class="t-m-phosphating"></div>
<div class="t-m-tune"></div>
<div class="t-m-washed-2"></div>
<div class="t-m-washed-1"></div>
<div class="t-m-degreasing"></div>
<div class="t-m-pre-degreasing"></div>
<div class="t-m-electrophoresis-up"></div>
<div class="t-m-station"></div>
<!--上右区-->
<div class="t-r-pretreatment-line-1"></div>
<div class="t-r-pretreatment-line-2"></div>
<div class="t-r-pretreatment-line-3"></div>
<div class="t-r-pretreatment-line-4"></div>
<div class="t-r-station-1"></div>
<div class="t-r-station-2"></div>
<div class="t-r-station-3"></div>
<div class="t-r-station-4"></div>
<div class="t-r-high-pressure-water-wash"></div>
<div class="t-r-station"></div>
<!--左区-->
<div class="l-station-1"></div>
<div class="l-station-2"></div>
<div class="l-station-3"></div>
<div class="l-station-4"></div>
<div class="l-station-5"></div>
<!--下区-->
<div class="b-column-1-electrophoresis-baking-1"></div>
<div class="b-column-1-electrophoresis-baking-2"></div>
<div class="b-column-1-frame-baking"></div>
<div class="b-column-1-station"></div>
<div class="b-column-2-electrophoresis-baking-1"></div>
<div class="b-column-2-electrophoresis-baking-2"></div>
<div class="b-column-2-station-1"></div>
<div class="b-column-2-station-2"></div>
<div class="b-column-3-electrophoresis-baking"></div>
<div class="b-column-3-strong-cold"></div>
<div class="b-column-3-station-1"></div>
<div class="b-column-3-station-2"></div>
<div class="b-column-4-strong-cold"></div>
<div class="b-column-4-station-1"></div>
<div class="b-column-4-frame-painting"></div>
<div class="b-column-4-station-2"></div>
</div>
</div>
<!--钣金车存放区-->
<div class="sheet-metal-car-pack">
<div>
<div class="sheet-metal-car-A1"></div>
<div class="A1-station-1"></div>
<div class="A1-station-2"></div>
<div class="A1-station-3"></div>
<div class="A1-station-4"></div>
<div class="sheet-metal-car-A2"></div>
<div class="A2-station-1"></div>
<div class="A2-station-2"></div>
<div class="A2-station-3"></div>
<div class="A2-station-4"></div>
<div class="sheet-metal-car-A3"></div>
<div class="A3-station-1"></div>
<div class="A3-station-2"></div>
<div class="A3-station-3"></div>
<div class="A3-station-4"></div>
<div class="sheet-metal-car-A4"></div>
<div class="A4-station-1"></div>
<div class="A4-station-2"></div>
<div class="A4-station-3"></div>
<div class="A4-station-4"></div>
<div class="sheet-metal-car-A5"></div>
<div class="A5-station-1"></div>
<div class="A5-station-2"></div>
<div class="A5-station-3"></div>
<div class="A5-station-4"></div>
<div class="heap"></div>
<div class="heap-station-1"></div>
<div class="heap-station-2"></div>
<div class="heap-station-3"></div>
<div class="heap-station-4"></div>
<div class="take-off-cycle"></div>
<div class="take-off-cycle-station-1"></div>
<div class="change-electrophoresis"></div>
<div class="change-electrophoresis-station-1"></div>
</div>
</div>
<!--密封防腐作业区-->
<div class="sealed-anticorrosion-pack">
<div>
<div class="line-1-change-cycle"></div>
<div class="line-1-roof-seal"></div>
<div class="line-1-frp-assembly"></div>
<div class="line-1-trim"></div>
<div class="line-1-polishing"></div>
<div class="line-2-change-cycle"></div>
<div class="line-2-roof-seal"></div>
<div class="line-2-frp-assembly"></div>
<div class="line-2-trim"></div>
<div class="line-2-polishing"></div>
<div class="line-2-air-conditioning"></div>
<div class="line-3-station-1"></div>
<div class="line-3-roof-seal-1"></div>
<div class="line-3-roof-seal-2"></div>
<div class="line-3-roof-seal-3"></div>
<div class="line-3-roof-seal-4"></div>
<div class="line-3-air-conditioning"></div>
<div class="line-4-station-1"></div>
<div class="line-4-station-2"></div>
<div class="line-4-station-3"></div>
<div class="line-4-station-4"></div>
<div class="line-4-station-5"></div>
<div class="line-4-air-conditioning"></div>
<div class="line-5-clean-up-1"></div>
<div class="line-5-damping-glue-spray-paint"></div>
<div class="line-5-clean-up-2"></div>
<div class="line-5-foaming-spray"></div>
<div class="line-5-shadow-protection"></div>
<div class="line-5-station-1"></div>
<div class="line-6-clean-up-1"></div>
<div class="line-6-damping-glue-spray-paint"></div>
<div class="line-6-clean-up-2"></div>
<div class="line-6-foaming-spray"></div>
<div class="line-6-shadow-protection"></div>
<div class="line-6-station-1"></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {}
},
methods: {
// 点击电泳工作区
doElectrophoresisClick () {
console.log('点击电泳工作区')
}
}
}
</script>
<style lang="scss" scoped>
.monitor-pack {
width: 100%;
background-color: #001927;
.view-pack {
margin: 0 auto;
width: 1600px;
height: 1400px;
background: url('../../assets/images/Monitor/monitor_index_bg.png');
background-position: center 0;
background-repeat: no-repeat;
background-size: cover;
overflow: hidden;
position: relative;
// 电泳作业区
.electrophoresis-pack {
position: absolute;
top: 144px;
left: 134px;
div {
position: relative;
height: 453px;
width: 562px;
div {
position: absolute;
background: url('../../assets/images/Monitor/monitor_car.png');
background-position: center 0;
background-repeat: no-repeat;
background-size: cover;
width: 20px;
height: 12px;
}
// 上左区
// 水洗4
.t-l-washed-4 {
top: 37px;
left: 210px;
}
// 纯水洗1
.t-l-pure-water-wash-1 {
left: 210px;
top: 67px;
}
// 电泳转移槽
.t-l-electrophoretic-transfer {
left: 210px;
top: 97px;
}
// 电泳槽
.t-l-electrophoretic-tank {
left: 210px;
top: 150px;
}
// UF1
.t-l-UF1 {
left: 210px;
top: 179px;
}
// UF2
.t-l-UF2 {
left: 210px;
top: 210px;
}
// 纯水洗2
.t-l-pure-water-wash-2 {
left: 210px;
top: 237px;
}
// 电泳下件
.t-l-electrophoresis-down {
left: 210px;
top: 274px;
}
// 车道点
.t-l-station {
left: 236px;
top: 300px;
}
// 上中区
// 水洗3
.t-m-washed-3 {
top: 38px;
left: 385px
}
// 磷化
.t-m-phosphating {
left: 385px;
top: 86px;
}
// 表调
.t-m-tune {
left: 385px;
top: 117px;
}
// 水洗2
.t-m-washed-2 {
left: 385px;
top: 147px;
}
// 水洗1
.t-m-washed-1 {
left: 385px;
top: 177px;
}
// 脱脂
.t-m-degreasing {
left: 385px;
top: 208px;
}
// 预脱脂
.t-m-pre-degreasing {
left: 385px;
top: 238px;
}
// 电泳上件
.t-m-electrophoresis-up {
left: 385px;
top: 275px;
}
// 车道点
.t-m-station {
top: 300px;
left: 396px;
}
// 上右区
// 预处理第一行
.t-r-pretreatment-line-1 {
left: 485px;
top: 47px;
}
// 预处理第二行
.t-r-pretreatment-line-2 {
left: 485px;
top: 77px;
}
// 预处理第三行
.t-r-pretreatment-line-3 {
left: 485px;
top: 107px;
}
// 预处理第四行
.t-r-pretreatment-line-4 {
left: 485px;
top: 134px;
}
// 车道点1
.t-r-station-1 {
top: 160px;
left: 505px;
}
// 车道点2
.t-r-station-2 {
top: 189px;
left: 505px;
}
// 车道点3
.t-r-station-3 {
top:216px;
left: 505px;
}
// 车道点4
.t-r-station-4 {
top:244px;
left: 505px;
}
// 高压水洗
.t-r-high-pressure-water-wash {
left: 485px;
top: 275px;
}
// 车道点
.t-r-station {
left: 505px;
top: 300px;
}
// 左区
// 车道点1
.l-station-1 {
top: 302px;
left: 55px;
}
// 车道点2
.l-station-2 {
left: 55px;
top: 325px;
}
// 车道点3
.l-station-3 {
left: 55px;
top: 347px;
}
// 车道点4
.l-station-4 {
left: 55px;
top: 370px;
}
// 车道点5
.l-station-5 {
left: 55px;
top: 430px;
}
// 下区
// 第一列电泳烘烤1
.b-column-1-electrophoresis-baking-1 {
left: 210px;
top: 335px;
}
// 第一列电泳烘烤2
.b-column-1-electrophoresis-baking-2 {
left: 210px;
top: 368px;
}
// 第一列车架烘烤
.b-column-1-frame-baking {
left: 210px;
top: 398px;
}
// 第一列车道点
.b-column-1-station {
left: 238px;
top: 430px;
}
// 第二列电泳烘烤1
.b-column-2-electrophoresis-baking-1 {
top: 335px;
left: 298px;
}
// 第二列电泳烘烤2
.b-column-2-electrophoresis-baking-2 {
left: 298px;
top: 368px;
}
// 第二列车道点1
.b-column-2-station-1 {
left: 320px;
top:398px;
}
// 第二列车道点2
.b-column-2-station-2 {
left: 320px;
top: 430px;
}
// 第三列电泳烘烤
.b-column-3-electrophoresis-baking {
top: 335px;
left: 385px;
}
// 第三列强冷
.b-column-3-strong-cold {
left: 385px;
top: 368px;
}
// 第三列车道1
.b-column-3-station-1 {
top: 398px;
left: 410px;
}
// 第三列车道2
.b-column-3-station-2 {
left: 410px;
top: 430px;
}
// 第四列强冷
.b-column-4-strong-cold {
top: 335px;
left: 485px;
}
// 第四列车道点1
.b-column-4-station-1 {
left: 505px;
top: 367px;
}
// 第四列车架喷漆
.b-column-4-frame-painting {
top: 398px;
left: 485px;
}
// 第四列车道点2
.b-column-4-station-2 {
left: 505px;
top: 430px;
}
}
}
// 钣金车存放区
.sheet-metal-car-pack {
position: absolute;
top: 167px;
left: 787px;
div {
width: 450px;
height: 173px;
position: relative;
div {
position: absolute;
background: url('../../assets/images/Monitor/monitor_car.png');
background-position: center 0;
background-repeat: no-repeat;
background-size: cover;
width: 20px;
height: 12px;
}
// 钣金车存放线A1
.sheet-metal-car-A1 {
left: 13px;
top: 5px;
}
// A1车道点1
.A1-station-1 {
top: 5px;
left: 132px;
}
// A1车道点2
.A1-station-2 {
top: 5px;
left: 222px;
}
// A1车道点3
.A1-station-3 {
top: 5px;
left: 320px;
}
// A1车道点4
.A1-station-4 {
top: 5px;
left: 410px;
}
// 钣金车存放线A2
.sheet-metal-car-A2 {
left: 13px;
top: 27px;
}
// A2车道点1
.A2-station-1 {
top: 27px;
left: 132px;
}
// A2车道点2
.A2-station-2 {
top: 27px;
left: 222px;
}
// A2车道点3
.A2-station-3 {
top: 27px;
left: 320px;
}
// A2车道点4
.A2-station-4 {
top: 27px;
left: 410px;
}
// 钣金车存放线A3
.sheet-metal-car-A3 {
left: 13px;
top: 49px;
}
// A3车道点1
.A3-station-1 {
top: 49px;
left: 132px;
}
// A3车道点2
.A3-station-2 {
top: 49px;
left: 222px;
}
// A3车道点3
.A3-station-3 {
top: 49px;
left: 320px;
}
// A3车道点4
.A3-station-4 {
top: 49px;
left: 410px;
}
// 钣金车存放线A4
.sheet-metal-car-A4 {
left: 13px;
top: 71px;
}
// A4车道点1
.A4-station-1 {
top: 71px;
left: 132px;
}
// A4车道点2
.A4-station-2 {
top: 71px;
left: 222px;
}
// A4车道点3
.A4-station-3 {
top: 71px;
left: 320px;
}
// A4车道点4
.A4-station-4 {
top: 71px;
left: 410px;
}
// 钣金存放线A5
.sheet-metal-car-A5 {
left: 13px;
top: 91px;
}
// A5车道点1
.A5-station-1 {
top: 91px;
left: 132px;
}
// A5车道点2
.A5-station-2 {
top: 91px;
left: 222px;
}
// A5车道点3
.A5-station-3 {
top: 91px;
left: 320px;
}
// A5车道点4
.A5-station-4 {
top: 91px;
left: 410px;
}
// 大循环撬堆放线
.heap {
left: 13px;
top: 113px;
}
// 大循环撬堆放线车道点1
.heap-station-1 {
top: 113px;
left: 132px;
}
// 大循环撬堆放栈车道点2
.heap-station-2 {
top: 113px;
left: 222px;
}
// 大循环撬堆放栈车道点3
.heap-station-3 {
top: 113px;
left: 320px;
}
// 大循环撬堆放栈车道点4
.heap-station-4 {
top: 113px;
left: 410px;
}
// 脱大循环撬
.take-off-cycle {
left: 13px;
top: 135px;
}
// 脱大循环撬
.take-off-cycle-station-1 {
top: 135px;
left: 132px;
}
// 换电泳撬
.change-electrophoresis {
left: 13px;
top: 157px;
}
// 换电泳撬车位点1
.change-electrophoresis-station-1 {
top: 157px;
left: 132px;
}
}
}
// 密封防腐作业区
.sealed-anticorrosion-pack {
position: absolute;
top: 345px;
left: 786px;
div {
width: 650px;
height: 190px;
div {
position: absolute;
background: url('../../assets/images/Monitor/monitor_car.png');
background-position: center 0;
background-repeat: no-repeat;
background-size: cover;
width: 20px;
height: 12px;
}
// 第一行换大循环撬
.line-1-change-cycle {
top: 8px;
left: 13px;
}
// 第一行车顶密封
.line-1-roof-seal {
top: 8px;
left: 102px;
}
// 第一行玻璃钢装配
.line-1-frp-assembly {
top: 8px;
left: 192px;
}
// 第一行修整
.line-1-trim {
top: 8px;
left: 283px;
}
// 第一行打磨修整
.line-1-polishing {
top: 8px;
left: 374px;
}
// 第二行换大循环撬
.line-2-change-cycle {
left: 13px;
top: 37px;
}
// 第二行车顶密封
.line-2-roof-seal {
left: 102px;
top: 37px;
}
// 第二行玻璃钢装配
.line-2-frp-assembly {
left: 192px;
top: 37px;
}
// 第二行修整
.line-2-trim {
top: 37px;
left: 283px;
}
// 第二行打磨修整
.line-2-polishing {
top: 37px;
left: 374px;
}
// 第二行空调安装
.line-2-air-conditioning {
top: 37px;
left: 555px;
}
// 第三行车道点1
.line-3-station-1 {
top: 68px;
left: 38px;
}
// 第三行车顶密封1
.line-3-roof-seal-1 {
top: 68px;
left: 102px;
}
// 第三行车顶密封2
.line-3-roof-seal-2 {
top: 68px;
left: 192px;
}
// 第三行车顶密封3
.line-3-roof-seal-3 {
top: 68px;
left: 283px;
}
// 第三行车顶密封4
.line-3-roof-seal-4 {
top: 68px;
left: 374px;
}
// 第三行空调安装
.line-3-air-conditioning {
top: 68px;
left: 555px;
}
// 第四行车位点1
.line-4-station-1 {
left: 38px;
top: 98px;
}
// 第四行车位点2
.line-4-station-2 {
left: 125px;
top: 98px;
}
// 第四行车位点3
.line-4-station-3 {
left: 215px;
top: 98px;
}
// 第四行车位点4
.line-4-station-4 {
top: 98px;
left: 304px;
}
// 第四行车位点5
.line-4-station-5 {
top: 98px;
left: 392px;
}
// 第四行空调安装
.line-4-air-conditioning {
top: 99px;
left: 555px;
}
// 第五行清理1
.line-5-clean-up-1 {
top: 131px;
left: 13px;
}
// 第五行阻尼胶喷漆
.line-5-damping-glue-spray-paint {
top: 131px;
left: 102px;
}
// 第五行清理2
.line-5-clean-up-2 {
top: 131px;
left: 192px;
}
// 第五行发泡喷涂
.line-5-foaming-spray {
top: 131px;
left: 283px;
}
// 第五行遮蔽防护
.line-5-shadow-protection {
top: 131px;
left: 374px;
}
// 第五行车道点1
.line-5-station-1 {
top: 130px;
left: 576px;
}
// 第六行清理1
.line-6-clean-up-1 {
top: 162px;
left: 13px;
}
// 第六行阻尼胶喷涂
.line-6-damping-glue-spray-paint {
top: 162px;
left: 102px;
}
// 第六行清理2
.line-6-clean-up-2 {
top: 162px;
left: 192px;
}
// 第六行发泡喷涂
.line-6-foaming-spray {
top: 162px;
left: 283px;
}
// 第六行遮蔽防护
.line-6-shadow-protection {
top: 162px;
left: 374px;
}
// 第六行车位点1
.line-6-station-1 {
top: 160px;
left: 576px;
}
}
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment