| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <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> |