<template>
|
<div class="main_app1" >
|
<div class="main_head">
|
<div class="main_head_bottom">
|
<div class="main_head_item blue">
|
<span :class="index==0?'active':''" @click="showPage('LogisticsCenter',0)">数智成品管控</span>
|
</div>
|
<div class="main_head_item red">
|
<span :class="index==1?'active':''" @click="showPage('LogisticsEfficiency',1)">调度能效跟踪</span>
|
</div>
|
<div class="main_head_item yellow">
|
<span :class="index==2?'active':''" @click="showPage('TaskEfficiency',2)">作业效能统筹</span>
|
</div>
|
<div class="main_head_item orange">
|
<span :class="index==3?'active':''" @click="showPage('SecurityControl',3)">智能安防管控</span>
|
</div>
|
<div class="main_head_item darkBlue">
|
<span :class="index==4?'active':''" @click="showPage('FireFighting',4)">智慧消防管控</span>
|
</div>
|
<div class="main_head_item yellow">
|
<span :class="index==5?'active':''" @click="showPage('EnergyConsum',5)">绿色低碳运营</span>
|
</div>
|
</div>
|
</div>
|
<div class="main_table">
|
<div style="display: block; position: fixed;right: 60px;bottom: 60px;"><el-button icon="el-icon-view" style="background : #002138;border: #002138;color: white;" @click="newWIn">新窗口打开</el-button></div>
|
<iframe :src="pageUrl" width="100%" style="min-height: 900px;"></iframe>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera';
|
export default {
|
name: 'screenBoard',
|
extends: BaseOpera,
|
data () {
|
return {
|
prefix: process.env.VUE_APP_SCREEN_URL_PREFIX,
|
pageUrl: process.env.VUE_APP_SCREEN_URL_PREFIX,
|
index: 0,
|
pages: []
|
}
|
},
|
mounted () {
|
},
|
methods: {
|
showPage (url,index) {
|
this.index = index
|
this.pageUrl = this.prefix + url
|
// window.open(this.prefix + url)
|
},
|
newWIn () {
|
window.open(this.pageUrl)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.main_app1 {
|
width: 100%;
|
height: calc(100% - 44px);
|
overflow-y: auto;
|
overflow-x: hidden;
|
padding: 15px;
|
box-sizing: border-box;
|
background-color: #F4F7FC;
|
.main_head {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
margin-bottom: 10px;
|
background-color: #ffffff;
|
padding: 20px;
|
box-sizing: border-box;
|
.main_head_title {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
span {
|
font-weight: 500;
|
font-size: 18px;
|
color: #222222;
|
margin-right: 30px;
|
}
|
}
|
.main_head_bottom {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.blue {
|
border-left: 8px solid #12BB8B;
|
}
|
.red {
|
border-left: 8px solid #F6CF46;
|
}
|
.yellow {
|
border-left: 8px solid #5DC9FB;
|
}
|
.orange {
|
border-left: 8px solid #FF9E56;
|
}
|
.darkBlue {
|
border-left: 8px solid #6B6EFF;
|
}
|
.active{
|
font-size: 18px !important;
|
font-weight: 800 !important;
|
color: #5DC9FB !important;
|
}
|
.main_head_item {
|
width: 19%;
|
height: 60px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
cursor: pointer;
|
box-sizing: border-box;
|
border-radius: 5px;
|
background-color: #F4F7FC;
|
span {
|
&:nth-child(1) {
|
font-weight: 600;
|
font-size: 16px;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-weight: 400;
|
font-size: 14px;
|
color: #222222;
|
}
|
}
|
}
|
}
|
}
|
|
.main_table {
|
display: flex;
|
align-items: start;
|
justify-content: space-between;
|
margin-top: 10px;
|
.main_table_list {
|
background-color: #ffffff;
|
padding: 20px;
|
box-sizing: border-box;
|
width: 69%;
|
.title {
|
display: flex;
|
align-items: center;
|
span {
|
font-weight: 500;
|
font-size: 18px;
|
color: #222222;
|
}
|
}
|
.list_wu {
|
width: 100%;
|
height: 100px;
|
line-height: 100px;
|
text-align: center;
|
font-size: 16px;
|
color: #222222;
|
}
|
.list_head {
|
width: 100%;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
background-color: #F7F7F7;
|
border-left: 1px solid #DFE2E8;
|
border-top: 1px solid #DFE2E8;
|
margin-top: 15px;
|
.list_head_item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 13px;
|
color: #222222;
|
font-weight: 500;
|
border-right: 1px solid #DFE2E8;
|
}
|
}
|
.table_box {
|
width: 100%;
|
border-bottom: 1px solid #DFE2E8;
|
.list_content {
|
width: 100%;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
border-left: 1px solid #DFE2E8;
|
border-top: 1px solid #DFE2E8;
|
.list_head_item {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
border-right: 1px solid #DFE2E8;
|
align-items: center;
|
justify-content: center;
|
font-size: 13px;
|
color: #222222;
|
}
|
}
|
}
|
}
|
.main_table_list1 {
|
margin-left: 10px;
|
width: 30%;
|
padding: 20px;
|
box-sizing: border-box;
|
flex-shrink: 0;
|
background-color: #ffffff;
|
.title {
|
font-weight: 500;
|
font-size: 18px;
|
color: #222222;
|
}
|
.list_wu {
|
width: 100%;
|
height: 100px;
|
line-height: 100px;
|
text-align: center;
|
font-size: 16px;
|
color: #222222;
|
}
|
.list_head {
|
width: 100%;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
background-color: #F7F7F7;
|
border-left: 1px solid #DFE2E8;
|
border-top: 1px solid #DFE2E8;
|
margin-top: 15px;
|
.list_head_item {
|
flex: 1.8;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 13px;
|
color: #222222;
|
font-weight: 500;
|
border-right: 1px solid #DFE2E8;
|
&:last-child {
|
flex: 1;
|
}
|
}
|
}
|
.table_box {
|
width: 100%;
|
border-bottom: 1px solid #DFE2E8;
|
.list_content {
|
width: 100%;
|
height: 50px;
|
display: flex;
|
align-items: center;
|
border-left: 1px solid #DFE2E8;
|
border-top: 1px solid #DFE2E8;
|
.list_head_item {
|
flex: 1.8;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
border-right: 1px solid #DFE2E8;
|
justify-content: center;
|
text-align: center;
|
font-size: 13px;
|
color: #222222;
|
&:last-child {
|
flex: 1;
|
}
|
}
|
}
|
}
|
}
|
}
|
|
.main_content {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
height: 350px;
|
|
.title {
|
font-weight: 500;
|
font-size: 18px;
|
color: #222222;
|
}
|
|
.type_wrap {
|
flex: 1;
|
height: 100%;
|
background-color: #ffffff;
|
padding: 20px;
|
box-sizing: border-box;
|
/*border-right: 12px solid #f7f7f7;*/
|
|
.echart1 {
|
width: 100%;
|
height: 100%;
|
margin-top: 18px;
|
}
|
}
|
|
.dept_wrap {
|
width: 520px;
|
flex-shrink: 0;
|
height: 100%;
|
background-color: #ffffff;
|
padding: 20px;
|
box-sizing: border-box;
|
margin-left: 10px;
|
#echart2 {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
}
|
}
|
</style>
|
