@@ -1,348 +1,368 @@ | |||
<template> | |||
<div class="choicepart-container"> | |||
<navbar /> | |||
<div class="choicepart-wrapper"> | |||
<div class="choicepart-box" id="choicepartBox" :style="'transform:scale('+scale+');width:1710px;height:538px;'" v-show="showItem"> | |||
<div class="choicepart-line1"> | |||
<div | |||
v-for="(item, index) in menuArr1" | |||
:key="index" | |||
class="choicepart-item" | |||
@click="handelClick(item, item.choicepart)" | |||
:style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}" | |||
> | |||
<div> | |||
<img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt=""> | |||
</div> | |||
<div class="choicepart-item-title">{{item.meta.title}}</div> | |||
</div> | |||
</div> | |||
<div class="choicepart-line2"> | |||
<div | |||
v-for="(item, index) in menuArr2" | |||
:key="index" | |||
class="choicepart-item" | |||
@click="handelClick(item, item.choicepart)" | |||
:style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}" | |||
> | |||
<div> | |||
<img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt=""> | |||
</div> | |||
<div class="choicepart-item-title">{{item.meta.title}}</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="choicepart-footer">© 中建材智能自动化研究院有限公司</div> | |||
</div> | |||
<div class="choicepart-container"> | |||
<navbar /> | |||
<div class="choicepart-wrapper"> | |||
<div | |||
class="choicepart-box" | |||
id="choicepartBox" | |||
:style="'transform:scale(' + scale + ')'" | |||
style="width: 1710px; height: 538px" | |||
v-show="showItem"> | |||
<div class="choicepart-line1"> | |||
<div | |||
v-for="(item, index) in menuArr1" | |||
:key="index" | |||
class="choicepart-item" | |||
@click="handelClick(item, item.choicepart)" | |||
:style="{ | |||
opacity: item.visible ? 1 : 0.4, | |||
pointerEvents: item.visible ? 'auto' : 'none', | |||
}"> | |||
<div> | |||
<img | |||
:src=" | |||
require(`../../assets/images/choicepart/${item.name}.png`) | |||
" | |||
alt="" /> | |||
</div> | |||
<div class="choicepart-item-title">{{ item.meta.title }}</div> | |||
</div> | |||
</div> | |||
<div class="choicepart-line2"> | |||
<div | |||
v-for="(item, index) in menuArr2" | |||
:key="index" | |||
class="choicepart-item" | |||
@click="handelClick(item, item.choicepart)" | |||
:style="{ | |||
opacity: item.visible ? 1 : 0.4, | |||
pointerEvents: item.visible ? 'auto' : 'none', | |||
}"> | |||
<div> | |||
<img | |||
:src=" | |||
require(`../../assets/images/choicepart/${item.name}.png`) | |||
" | |||
alt="" /> | |||
</div> | |||
<div class="choicepart-item-title">{{ item.meta.title }}</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="choicepart-footer">© 中建材智能自动化研究院有限公司</div> | |||
</div> | |||
</template> | |||
<script> | |||
import Navbar from './components/Navbar' | |||
import { debounce } from '@/utils/debounce' | |||
import Navbar from './components/Navbar'; | |||
import { debounce } from '@/utils/debounce'; | |||
export default { | |||
components: { Navbar }, | |||
name: 'choicePart', | |||
data() { | |||
return { | |||
boxReset: '', | |||
scale: 1, | |||
menuArr1: [ | |||
{ | |||
name: 'Core', | |||
title: '基础核心', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Order', | |||
title: '订单管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Equipment', | |||
title: '设备管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Group', | |||
title: '班组管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Quality', | |||
title: '质量管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Warehouse', | |||
title: '仓库管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Energy', | |||
title: '能源管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Packaging', | |||
title: '包装管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
} | |||
], | |||
menuArr2: [ | |||
{ | |||
name: 'Material', | |||
title: '物料管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Extend', | |||
title: '工艺管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
// { | |||
// name: 'Delivery', | |||
// title: '成品发货', | |||
// visible: false, | |||
// meta: { | |||
// title: '' | |||
// } | |||
// }, | |||
{ | |||
name: 'Report', | |||
title: '报表管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Cost', | |||
title: '成本管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'SafetyEnvironmental', | |||
title: '安环管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'Databoard', | |||
title: '数据驾驶舱', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
}, | |||
{ | |||
name: 'System', | |||
title: '系统管理', | |||
visible: false, | |||
meta: { | |||
title: '' | |||
} | |||
} | |||
], | |||
showItem: false | |||
} | |||
}, | |||
// computed:{ | |||
// ...mapGetters(['sidebarRouters']) | |||
// }, | |||
mounted() { | |||
this.getMsg() | |||
this.boxReset = debounce(() => { | |||
this.resetSize() | |||
}, 300) | |||
this.boxReset() | |||
window.addEventListener('resize', () => { | |||
this.boxReset() | |||
}) | |||
}, | |||
methods: { | |||
getMsg() { | |||
let menuList = this.$store.state.permission.sidebarRouters | |||
console.log(menuList) | |||
if (menuList.length > 0) { | |||
for (let i = 0; i < menuList.length; i ++) { | |||
for (let k = 0; k < 8; k++) { | |||
if (menuList[i].name === this.menuArr1[k].name) { | |||
this.menuArr1[k].visible = true | |||
this.menuArr1[k].id = menuList[i].id | |||
this.menuArr1[k].choicepart = i | |||
this.menuArr1[k].children = menuList[i].children | |||
this.menuArr1[k].meta = menuList[i].meta | |||
} | |||
} | |||
for (let j = 0; j < 7; j++) { | |||
if (menuList[i].name === this.menuArr2[j].name) { | |||
this.menuArr2[j].visible = true | |||
this.menuArr2[j].id = menuList[i].id | |||
this.menuArr2[j].choicepart = i | |||
this.menuArr2[j].children = menuList[i].children | |||
this.menuArr2[j].meta = menuList[i].meta | |||
} | |||
} | |||
} | |||
} | |||
console.log(this.menuArr1) | |||
console.log(this.menuArr2) | |||
}, | |||
handelClick(item, index) { | |||
// this.$router.push({name: 'SystemUser'}) | |||
this.$store.dispatch('app/setChoicepart', index) | |||
this.toRouter(item) | |||
// if (item.meta.unuse) { | |||
// this.$message.warning(this.$t('暂无数据')) | |||
// } else { | |||
// this.toRouter(item) | |||
// } | |||
}, | |||
toRouter(item) { | |||
console.log(item) | |||
if (item.children) { | |||
this.toRouter(item.children[0]) | |||
} else { | |||
this.$router.push({ name: item.name }) | |||
} | |||
}, | |||
resetSize() { | |||
let _this = this | |||
_this.showItem = false | |||
_this.loading = true | |||
let choicepartBox = document.querySelector('#choicepartBox') | |||
let rw = parseFloat(window.innerWidth) | |||
let rh = parseFloat(window.innerHeight) | |||
let bw = parseFloat(choicepartBox.style.width) | |||
let bh = parseFloat(choicepartBox.style.height) | |||
let wx = 0.82/(bw / rw) | |||
let hx = 0.56/(bh / rh) | |||
_this.scale = wx > hx ? hx : wx | |||
setTimeout(_this.showItemFun, 700) | |||
}, | |||
showItemFun() { | |||
this.loading = false | |||
this.showItem = true | |||
} | |||
}, | |||
beforeDestroy() { | |||
this.showItem = false | |||
} | |||
} | |||
components: { Navbar }, | |||
name: 'choicePart', | |||
data() { | |||
return { | |||
scale: 1, | |||
menuArr1: [ | |||
{ | |||
name: 'Core', | |||
title: '基础核心', | |||
visible: false, | |||
meta: { | |||
title: '', | |||
}, | |||
}, | |||
{ | |||
name: 'Order', | |||
title: '订单管理', | |||
visible: false, | |||
meta: { | |||
title: '', | |||
}, | |||
}, | |||
{ | |||
name: 'Equipment', | |||
title: '设备管理', | |||
visible: false, | |||
meta: { | |||
title: '', | |||
}, | |||
}, | |||
{ | |||
name: 'Group', | |||
title: '班组管理', | |||
visible: false, | |||
meta: { | |||
title: '', | |||
}, | |||
}, | |||
{ | |||
name: 'Quality', | |||
title: '质量管理', | |||
visible: false, | |||
meta: { | |||
title: '', | |||
}, | |||
}, | |||
{ | |||
name: 'Warehouse', | |||
title: '仓库管理', | |||
visible: false, | |||
meta: { | |||
title: '', | |||
}, | |||
}, | |||
{ | |||
name: 'Energy', | |||
title: '能源管理', | |||
visible: false, | |||
meta: { | |||
title: '', | |||
}, | |||
}, | |||
{ | |||
name: 'Packaging', | |||
title: '包装管理', | |||
visible: false, | |||
meta: { | |||
title: '', | |||
}, | |||
}, | |||
], | |||
menuArr2: [ | |||
{ | |||
name: 'Material', | |||
title: '物料管理', | |||
visible: false, | |||
meta: { | |||
title: '', | |||
}, | |||
}, | |||
{ | |||
name: 'Extend', | |||
title: '工艺管理', | |||
visible: false, | |||
meta: { | |||
title: '', | |||
}, | |||
}, | |||
// { | |||
// name: 'Delivery', | |||
// title: '成品发货', | |||
// visible: false, | |||
// meta: { | |||
// title: '' | |||
// } | |||
// }, | |||
{ | |||
name: 'Report', | |||
title: '报表管理', | |||
visible: false, | |||
meta: { | |||
title: '', | |||
}, | |||
}, | |||
{ | |||
name: 'Cost', | |||
title: '成本管理', | |||
visible: false, | |||
meta: { | |||
title: '', | |||
}, | |||
}, | |||
{ | |||
name: 'SafetyEnvironmental', | |||
title: '安环管理', | |||
visible: false, | |||
meta: { | |||
title: '', | |||
}, | |||
}, | |||
{ | |||
name: 'Databoard', | |||
title: '数据驾驶舱', | |||
visible: false, | |||
meta: { | |||
title: '', | |||
}, | |||
}, | |||
{ | |||
name: 'System', | |||
title: '系统管理', | |||
visible: false, | |||
meta: { | |||
title: '', | |||
}, | |||
}, | |||
], | |||
showItem: false, | |||
}; | |||
}, | |||
// computed:{ | |||
// ...mapGetters(['sidebarRouters']) | |||
// }, | |||
mounted() { | |||
this.getMsg(); | |||
this.boxReset(); | |||
window.addEventListener('resize', this.boxReset); | |||
}, | |||
destroyed() { | |||
window.removeEventListener('resize', this.boxReset); | |||
}, | |||
methods: { | |||
boxReset() { | |||
debounce(() => { | |||
this.resetSize(); | |||
}, 300)(); | |||
}, | |||
getMsg() { | |||
let menuList = this.$store.state.permission.sidebarRouters; | |||
console.log(menuList); | |||
if (menuList.length > 0) { | |||
for (let i = 0; i < menuList.length; i++) { | |||
for (let k = 0; k < 8; k++) { | |||
if (menuList[i].name === this.menuArr1[k].name) { | |||
this.menuArr1[k].visible = true; | |||
this.menuArr1[k].id = menuList[i].id; | |||
this.menuArr1[k].choicepart = i; | |||
this.menuArr1[k].children = menuList[i].children; | |||
this.menuArr1[k].meta = menuList[i].meta; | |||
} | |||
} | |||
for (let j = 0; j < 7; j++) { | |||
if (menuList[i].name === this.menuArr2[j].name) { | |||
this.menuArr2[j].visible = true; | |||
this.menuArr2[j].id = menuList[i].id; | |||
this.menuArr2[j].choicepart = i; | |||
this.menuArr2[j].children = menuList[i].children; | |||
this.menuArr2[j].meta = menuList[i].meta; | |||
} | |||
} | |||
} | |||
} | |||
console.log(this.menuArr1); | |||
console.log(this.menuArr2); | |||
}, | |||
handelClick(item, index) { | |||
// this.$router.push({name: 'SystemUser'}) | |||
this.$store.dispatch('app/setChoicepart', index); | |||
this.toRouter(item); | |||
// if (item.meta.unuse) { | |||
// this.$message.warning(this.$t('暂无数据')) | |||
// } else { | |||
// this.toRouter(item) | |||
// } | |||
}, | |||
toRouter(item) { | |||
console.log(item); | |||
if (item.children) { | |||
this.toRouter(item.children[0]); | |||
} else { | |||
this.$router.push({ name: item.name }); | |||
} | |||
}, | |||
resetSize() { | |||
let _this = this; | |||
_this.showItem = false; | |||
_this.loading = true; | |||
let choicepartBox = document.querySelector('#choicepartBox'); | |||
let rw = parseFloat(window.innerWidth); | |||
let rh = parseFloat(window.innerHeight); | |||
let bw = parseFloat(choicepartBox.style.width); | |||
let bh = parseFloat(choicepartBox.style.height); | |||
let wx = 0.82 / (bw / rw); | |||
let hx = 0.56 / (bh / rh); | |||
_this.scale = wx > hx ? hx : wx; | |||
setTimeout(_this.showItemFun, 700); | |||
}, | |||
showItemFun() { | |||
this.loading = false; | |||
this.showItem = true; | |||
}, | |||
}, | |||
beforeDestroy() { | |||
this.showItem = false; | |||
}, | |||
}; | |||
</script> | |||
<style lang='scss' scoped> | |||
.choicepart-container { | |||
position: relative; | |||
width: 100%; | |||
height: 100%; | |||
background: url('../../assets/images/choicepart/choicepart-back.png') repeat; | |||
background-size: 100% 100%; | |||
.choicepart-wrapper { | |||
width: 100vw; | |||
height: calc(100vh - 94px); | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.choicepart-box { | |||
// transition: all 0.3s linear; | |||
.choicepart-line1 { | |||
width: 100%; | |||
margin-bottom: 80px; | |||
display: flex; | |||
flex-flow: row nowrap; | |||
} | |||
.choicepart-line2 { | |||
width: 100%; | |||
display: flex; | |||
flex-flow: row nowrap; | |||
justify-content: center; | |||
} | |||
.choicepart-item { | |||
width: 184px; | |||
height: 224px; | |||
background: url('../../assets/images/choicepart/choice-item-back.png') no-repeat; | |||
background-size: 100% 100%; | |||
border-radius: 5px; | |||
overflow: hidden; | |||
cursor: pointer; | |||
position: relative; | |||
margin: 0 20px; | |||
img { | |||
width: 184px; | |||
height: 224px; | |||
} | |||
.choicepart-item-title { | |||
overflow: hidden; | |||
padding: 0 10px; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
position: absolute; | |||
bottom: 0; | |||
left: 2px; | |||
right: 2px; | |||
text-align: center; | |||
color: #fff; | |||
font-size: 16px; | |||
line-height: 40px; | |||
height: 40px; | |||
letter-spacing: 2px; | |||
background-color: rgba($color: #0b58ff, $alpha: 0.45); | |||
} | |||
} | |||
.choicepart-item:hover { | |||
.choicepart-item-title { | |||
background-color: rgba($color: #0b58ff, $alpha: 1); | |||
} | |||
} | |||
} | |||
.choicepart-footer { | |||
position: absolute; | |||
width: 100%; | |||
color: #C7C7C7; | |||
user-select: none; | |||
font-size: 12px; | |||
letter-spacing: 1px; | |||
height: 30px; | |||
display: grid; | |||
place-content: center; | |||
bottom: 0; | |||
opacity: 0.5; | |||
} | |||
position: relative; | |||
width: 100%; | |||
height: 100%; | |||
background: url('../../assets/images/choicepart/choicepart-back.png') repeat; | |||
background-size: 100% 100%; | |||
.choicepart-wrapper { | |||
width: 100vw; | |||
height: calc(100vh - 94px); | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
} | |||
.choicepart-box { | |||
// transition: all 0.3s linear; | |||
.choicepart-line1 { | |||
width: 100%; | |||
margin-bottom: 80px; | |||
display: flex; | |||
flex-flow: row nowrap; | |||
} | |||
.choicepart-line2 { | |||
width: 100%; | |||
display: flex; | |||
flex-flow: row nowrap; | |||
justify-content: center; | |||
} | |||
.choicepart-item { | |||
width: 184px; | |||
height: 224px; | |||
background: url('../../assets/images/choicepart/choice-item-back.png') | |||
no-repeat; | |||
background-size: 100% 100%; | |||
border-radius: 5px; | |||
overflow: hidden; | |||
cursor: pointer; | |||
position: relative; | |||
margin: 0 20px; | |||
img { | |||
width: 184px; | |||
height: 224px; | |||
} | |||
.choicepart-item-title { | |||
overflow: hidden; | |||
padding: 0 10px; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
position: absolute; | |||
bottom: 0; | |||
left: 2px; | |||
right: 2px; | |||
text-align: center; | |||
color: #fff; | |||
font-size: 16px; | |||
line-height: 40px; | |||
height: 40px; | |||
letter-spacing: 2px; | |||
background-color: rgba($color: #0b58ff, $alpha: 0.45); | |||
} | |||
} | |||
.choicepart-item:hover { | |||
.choicepart-item-title { | |||
background-color: rgba($color: #0b58ff, $alpha: 1); | |||
} | |||
} | |||
} | |||
.choicepart-footer { | |||
position: absolute; | |||
width: 100%; | |||
color: #c7c7c7; | |||
user-select: none; | |||
font-size: 12px; | |||
letter-spacing: 1px; | |||
height: 30px; | |||
display: grid; | |||
place-content: center; | |||
bottom: 0; | |||
opacity: 0.5; | |||
} | |||
} | |||
</style> |
@@ -1,8 +1,11 @@ | |||
<template> | |||
<div id='deepProcessingContainerB' ref='deepProcessingContainerB' style="width: 100%;height: 100%;"> | |||
<div | |||
id="deepProcessingContainerB" | |||
ref="deepProcessingContainerB" | |||
style="width: 100%; height: 100%"> | |||
<div | |||
id='deepProcessingContainer' | |||
ref='deepProcessingContainer' | |||
id="deepProcessingContainer" | |||
ref="deepProcessingContainer" | |||
class="deepProcessingBoard" | |||
style=" | |||
position: absolute; | |||
@@ -16,15 +19,14 @@ | |||
flex-direction: column; | |||
gap: 24px; | |||
" | |||
:style="{transform:'scale('+scaleNum+')'}"> | |||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='深加工生产运行驾驶舱'/> | |||
:style="{ transform: 'scale(' + scaleNum + ')' }"> | |||
<KHeader | |||
:isFullScreen="isFullScreen" | |||
@screenfullChange="screenfullChange" | |||
topTitle="深加工生产运行驾驶舱" /> | |||
<div | |||
class="main-body" | |||
style=" | |||
display: grid; | |||
gap: 16px; | |||
grid-template-rows: 462px 462px; | |||
"> | |||
style="display: grid; gap: 16px; grid-template-rows: 462px 462px"> | |||
<TopThree /> | |||
<BottomTwo /> | |||
</div> | |||
@@ -47,16 +49,16 @@ | |||
import KHeader from '../components/Header'; | |||
import TopThree from './TopThree'; | |||
import BottomTwo from './BottomTwo'; | |||
import screenfull from 'screenfull' | |||
import { debounce } from '@/utils/debounce' | |||
import { getDcsMsg, getMesMsg } from './../utils/wsInterface' | |||
import screenfull from 'screenfull'; | |||
import { debounce } from '@/utils/debounce'; | |||
import { getDcsMsg, getMesMsg } from './../utils/wsInterface'; | |||
export default { | |||
name: 'deepProcessingBoard', | |||
components: { | |||
KHeader, | |||
TopThree, | |||
BottomTwo | |||
BottomTwo, | |||
}, | |||
// provide() { | |||
// return { | |||
@@ -66,83 +68,90 @@ export default { | |||
data() { | |||
return { | |||
isFullScreen: false, | |||
scaleNum: 0.8 | |||
scaleNum: 0.8, | |||
}; | |||
}, | |||
created() { | |||
this.init() | |||
this.init(); | |||
}, | |||
destroy() { | |||
this.destroy() | |||
this.destroy(); | |||
}, | |||
mounted() { | |||
this.boxReset = debounce(() => { | |||
this.resetSize() | |||
}, 300) | |||
this.boxReset() | |||
window.addEventListener('resize', () => { | |||
this.boxReset() | |||
}) | |||
this.resetSize(); | |||
}, 300); | |||
this.boxReset(); | |||
window.addEventListener('resize', () => { | |||
this.boxReset(); | |||
}); | |||
// closeWebsocket() | |||
// getDcsMsg() | |||
// getMesMsg() | |||
console.log('mounted...........') | |||
}, | |||
mounted() { | |||
this.boxReset(); | |||
window.addEventListener('resize', this.boxReset); | |||
}, | |||
destroyed() { | |||
console.log('destroyed...........') | |||
window.removeEventListener('resize', this.boxReset); | |||
this.destroy(); | |||
}, | |||
methods: { | |||
boxReset() { | |||
debounce(() => { | |||
this.resetSize(); | |||
}, 300)(); | |||
}, | |||
change() { | |||
this.isFullScreen = screenfull.isFullscreen | |||
}, | |||
init() { | |||
if (screenfull.isEnabled) { | |||
screenfull.on('change', this.change) | |||
} | |||
}, | |||
destroy() { | |||
if (screenfull.isEnabled) { | |||
screenfull.off('change', this.change) | |||
} | |||
}, | |||
this.isFullScreen = screenfull.isFullscreen; | |||
}, | |||
init() { | |||
if (screenfull.isEnabled) { | |||
screenfull.on('change', this.change); | |||
} | |||
}, | |||
destroy() { | |||
if (screenfull.isEnabled) { | |||
screenfull.off('change', this.change); | |||
} | |||
}, | |||
// 全屏 | |||
screenfullChange() { | |||
if (!screenfull.isEnabled) { | |||
this.$message({ | |||
message: 'you browser can not work', | |||
type: 'warning' | |||
}) | |||
return false | |||
} | |||
screenfull.toggle(this.$refs.deepProcessingContainerB) | |||
}, | |||
if (!screenfull.isEnabled) { | |||
this.$message({ | |||
message: 'you browser can not work', | |||
type: 'warning', | |||
}); | |||
return false; | |||
} | |||
screenfull.toggle(this.$refs.deepProcessingContainerB); | |||
}, | |||
resetSize() { | |||
let deepProcessingContainer = document.getElementById('deepProcessingContainer') | |||
let rw = parseFloat(window.innerWidth) | |||
let rh = parseFloat(window.innerHeight) | |||
let bw = parseFloat(deepProcessingContainer.style.width) | |||
let bh = parseFloat(deepProcessingContainer.style.height) | |||
let wx = 0 | |||
let hx = 0 | |||
let deepProcessingContainer = document.getElementById( | |||
'deepProcessingContainer' | |||
); | |||
let rw = parseFloat(window.innerWidth); | |||
let rh = parseFloat(window.innerHeight); | |||
let bw = parseFloat(deepProcessingContainer.style.width); | |||
let bh = parseFloat(deepProcessingContainer.style.height); | |||
let wx = 0; | |||
let hx = 0; | |||
if (screenfull.isFullscreen) { | |||
console.log('全屏') | |||
wx = rw / bw | |||
hx = rh / bh | |||
console.log(this.scaleNum) | |||
}else{ | |||
console.log('非全屏') | |||
console.log(this.$store.state.app.sidebar.opened) | |||
wx = rw / bw; | |||
hx = rh / bh; | |||
} else { | |||
if (this.$store.state.app.sidebar.opened) { | |||
wx = (rw-280) / bw | |||
hx = (rh-116) / bh | |||
}else{ | |||
wx = (rw-85) / bw | |||
hx = (rh-116) / bh | |||
wx = (rw - 280) / bw; | |||
hx = (rh - 116) / bh; | |||
} else { | |||
wx = (rw - 85) / bw; | |||
hx = (rh - 116) / bh; | |||
} | |||
} | |||
this.scaleNum = wx | |||
} | |||
} | |||
this.scaleNum = wx; | |||
}, | |||
}, | |||
}; | |||
</script> | |||
@@ -1,8 +1,11 @@ | |||
<template> | |||
<div id='kilnContainerB' ref='kilnContainerB' style="width: 100%;height: 100%;"> | |||
<div | |||
id="kilnContainerB" | |||
ref="kilnContainerB" | |||
style="width: 100%; height: 100%"> | |||
<div | |||
id='kilnContainer' | |||
ref='kilnContainer' | |||
id="kilnContainer" | |||
ref="kilnContainer" | |||
class="KilnDataBoard" | |||
style=" | |||
position: absolute; | |||
@@ -16,15 +19,22 @@ | |||
flex-direction: column; | |||
gap: 24px; | |||
" | |||
:style="{transform:'scale('+scaleNum+')'}"> | |||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='窑炉生产运行驾驶舱'/> | |||
:style="{ transform: 'scale(' + scaleNum + ')' }"> | |||
<KHeader | |||
:isFullScreen="isFullScreen" | |||
@screenfullChange="screenfullChange" | |||
topTitle="窑炉生产运行驾驶舱" /> | |||
<div | |||
class="main-body" | |||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px"> | |||
<div class="left-side" style="flex: 2"> | |||
<div | |||
class="left-side" | |||
style="flex: 2"> | |||
<LeftFour /> | |||
</div> | |||
<div class="right-side" style="flex: 1"> | |||
<div | |||
class="right-side" | |||
style="flex: 1"> | |||
<RightTwo /> | |||
</div> | |||
</div> | |||
@@ -36,8 +46,8 @@ | |||
import KHeader from '../components/Header'; | |||
import LeftFour from './LeftFour'; | |||
import RightTwo from './RightTwo.vue'; | |||
import screenfull from 'screenfull' | |||
import { debounce } from '@/utils/debounce' | |||
import screenfull from 'screenfull'; | |||
import { debounce } from '@/utils/debounce'; | |||
export default { | |||
name: 'Kiln', | |||
@@ -46,10 +56,10 @@ export default { | |||
LeftFour, | |||
RightTwo, | |||
}, | |||
computed:{ | |||
computed: { | |||
sidebarStatus() { | |||
return this.$store.state.app.sidebar.opened; | |||
} | |||
}, | |||
}, | |||
// provide() { | |||
// return { | |||
@@ -59,84 +69,80 @@ export default { | |||
data() { | |||
return { | |||
isFullScreen: false, | |||
scaleNum: 0.8 | |||
scaleNum: 0.8, | |||
}; | |||
}, | |||
watch: { | |||
sidebarStatus() { | |||
this.boxReset() | |||
this.boxReset(); | |||
}, | |||
}, | |||
created() { | |||
this.init() | |||
}, | |||
destroy() { | |||
this.destroy() | |||
this.init(); | |||
}, | |||
mounted() { | |||
this.boxReset = debounce(() => { | |||
this.resetSize() | |||
}, 300) | |||
this.boxReset() | |||
window.addEventListener('resize', () => { | |||
this.boxReset() | |||
}) | |||
this.boxReset(); | |||
window.addEventListener('resize', this.boxReset); | |||
}, | |||
destroyed() { | |||
window.removeEventListener('resize', this.boxReset); | |||
this.destroy(); | |||
}, | |||
methods: { | |||
boxReset() { | |||
debounce(() => { | |||
this.resetSize(); | |||
}, 300)(); | |||
}, | |||
change() { | |||
this.isFullScreen = screenfull.isFullscreen | |||
}, | |||
this.isFullScreen = screenfull.isFullscreen; | |||
}, | |||
init() { | |||
if (screenfull.isEnabled) { | |||
screenfull.on('change', this.change) | |||
} | |||
}, | |||
init() { | |||
if (screenfull.isEnabled) { | |||
screenfull.on('change', this.change); | |||
} | |||
}, | |||
destroy() { | |||
if (screenfull.isEnabled) { | |||
screenfull.off('change', this.change) | |||
} | |||
}, | |||
destroy() { | |||
if (screenfull.isEnabled) { | |||
screenfull.off('change', this.change); | |||
} | |||
}, | |||
// 全屏 | |||
screenfullChange() { | |||
if (!screenfull.isEnabled) { | |||
this.$message({ | |||
message: 'you browser can not work', | |||
type: 'warning' | |||
}) | |||
return false | |||
} | |||
screenfull.toggle(this.$refs.kilnContainerB) | |||
}, | |||
if (!screenfull.isEnabled) { | |||
this.$message({ | |||
message: 'you browser can not work', | |||
type: 'warning', | |||
}); | |||
return false; | |||
} | |||
screenfull.toggle(this.$refs.kilnContainerB); | |||
}, | |||
resetSize() { | |||
let kilnContainerBox = document.getElementById('kilnContainer') | |||
console.log(kilnContainerBox) | |||
let rw = parseFloat(window.innerWidth) | |||
let rh = parseFloat(window.innerHeight) | |||
let bw = parseFloat(kilnContainerBox.style.width) | |||
let bh = parseFloat(kilnContainerBox.style.height) | |||
let wx = 0 | |||
let hx = 0 | |||
let kilnContainerBox = document.getElementById('kilnContainer'); | |||
let rw = parseFloat(window.innerWidth); | |||
let rh = parseFloat(window.innerHeight); | |||
let bw = parseFloat(kilnContainerBox.style.width); | |||
let bh = parseFloat(kilnContainerBox.style.height); | |||
let wx = 0; | |||
let hx = 0; | |||
if (screenfull.isFullscreen) { | |||
console.log('全屏') | |||
wx = rw / bw | |||
hx = rh / bh | |||
console.log(this.scaleNum) | |||
}else{ | |||
console.log('非全屏') | |||
console.log(this.$store.state.app.sidebar.opened) | |||
wx = rw / bw; | |||
hx = rh / bh; | |||
} else { | |||
if (this.$store.state.app.sidebar.opened) { | |||
wx = (rw-280) / bw | |||
hx = (rh-116) / bh | |||
}else{ | |||
wx = (rw-85) / bw | |||
hx = (rh-116) / bh | |||
wx = (rw - 280) / bw; | |||
hx = (rh - 116) / bh; | |||
} else { | |||
wx = (rw - 85) / bw; | |||
hx = (rh - 116) / bh; | |||
} | |||
} | |||
this.scaleNum = wx | |||
} | |||
} | |||
this.scaleNum = wx; | |||
}, | |||
}, | |||
}; | |||
</script> | |||
@@ -1,8 +1,11 @@ | |||
<template> | |||
<div id='wholePlantContainerB' ref='wholePlantContainerB' style="width: 100%;height: 100%;"> | |||
<div | |||
id="wholePlantContainerB" | |||
ref="wholePlantContainerB" | |||
style="width: 100%; height: 100%"> | |||
<div | |||
id='wholePlantContainer' | |||
ref='wholePlantContainer' | |||
id="wholePlantContainer" | |||
ref="wholePlantContainer" | |||
class="wholePlantBoard" | |||
style=" | |||
position: absolute; | |||
@@ -16,18 +19,27 @@ | |||
flex-direction: column; | |||
gap: 24px; | |||
" | |||
:style="{transform:'scale('+scaleNum+')'}"> | |||
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/> | |||
:style="{ transform: 'scale(' + scaleNum + ')' }"> | |||
<KHeader | |||
:isFullScreen="isFullScreen" | |||
@screenfullChange="screenfullChange" | |||
topTitle="全厂总览驾驶舱" /> | |||
<div | |||
class="main-body" | |||
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px"> | |||
<div class="left-side" style="flex: 1"> | |||
<div | |||
class="left-side" | |||
style="flex: 1"> | |||
<LeftTwo /> | |||
</div> | |||
<div class="middle-side" style="flex: 1"> | |||
<div | |||
class="middle-side" | |||
style="flex: 1"> | |||
<MiddleTwo /> | |||
</div> | |||
<div class="right-side" style="flex: 1"> | |||
<div | |||
class="right-side" | |||
style="flex: 1"> | |||
<RightTwo /> | |||
</div> | |||
</div> | |||
@@ -40,8 +52,8 @@ import KHeader from '../components/Header'; | |||
import LeftTwo from './LeftTwo'; | |||
import MiddleTwo from './MiddleTwo'; | |||
import RightTwo from './RightTwo'; | |||
import screenfull from 'screenfull' | |||
import { debounce } from '@/utils/debounce' | |||
import screenfull from 'screenfull'; | |||
import { debounce } from '@/utils/debounce'; | |||
export default { | |||
name: 'wholePlantBoard', | |||
@@ -49,7 +61,7 @@ export default { | |||
KHeader, | |||
LeftTwo, | |||
MiddleTwo, | |||
RightTwo | |||
RightTwo, | |||
}, | |||
// provide() { | |||
// return { | |||
@@ -59,80 +71,77 @@ export default { | |||
data() { | |||
return { | |||
isFullScreen: false, | |||
scaleNum: 0.8 | |||
scaleNum: 0.8, | |||
}; | |||
}, | |||
created() { | |||
this.init() | |||
this.init(); | |||
}, | |||
destroy() { | |||
this.destroy() | |||
this.destroy(); | |||
}, | |||
mounted() { | |||
this.boxReset = debounce(() => { | |||
this.resetSize() | |||
}, 300) | |||
this.boxReset() | |||
window.addEventListener('resize', () => { | |||
this.boxReset() | |||
}) | |||
console.log('mounted...........') | |||
this.boxReset(); | |||
window.addEventListener('resize', this.boxReset); | |||
}, | |||
destroyed() { | |||
console.log('destroyed...........') | |||
window.removeEventListener('resize', this.boxReset); | |||
}, | |||
methods: { | |||
boxReset() { | |||
debounce(() => { | |||
this.resetSize(); | |||
}, 300)(); | |||
}, | |||
change() { | |||
this.isFullScreen = screenfull.isFullscreen | |||
}, | |||
init() { | |||
if (screenfull.isEnabled) { | |||
screenfull.on('change', this.change) | |||
} | |||
}, | |||
destroy() { | |||
if (screenfull.isEnabled) { | |||
screenfull.off('change', this.change) | |||
} | |||
}, | |||
this.isFullScreen = screenfull.isFullscreen; | |||
}, | |||
init() { | |||
if (screenfull.isEnabled) { | |||
screenfull.on('change', this.change); | |||
} | |||
}, | |||
destroy() { | |||
if (screenfull.isEnabled) { | |||
screenfull.off('change', this.change); | |||
} | |||
}, | |||
// 全屏 | |||
screenfullChange() { | |||
if (!screenfull.isEnabled) { | |||
this.$message({ | |||
message: 'you browser can not work', | |||
type: 'warning' | |||
}) | |||
return false | |||
} | |||
screenfull.toggle(this.$refs.wholePlantContainerB) | |||
}, | |||
if (!screenfull.isEnabled) { | |||
this.$message({ | |||
message: 'you browser can not work', | |||
type: 'warning', | |||
}); | |||
return false; | |||
} | |||
screenfull.toggle(this.$refs.wholePlantContainerB); | |||
}, | |||
resetSize() { | |||
let wholePlantContainerBox = document.getElementById('wholePlantContainer') | |||
let rw = parseFloat(window.innerWidth) | |||
let rh = parseFloat(window.innerHeight) | |||
let bw = parseFloat(wholePlantContainerBox.style.width) | |||
let bh = parseFloat(wholePlantContainerBox.style.height) | |||
let wx = 0 | |||
let hx = 0 | |||
let wholePlantContainerBox = document.getElementById( | |||
'wholePlantContainer' | |||
); | |||
let rw = parseFloat(window.innerWidth); | |||
let rh = parseFloat(window.innerHeight); | |||
let bw = parseFloat(wholePlantContainerBox.style.width); | |||
let bh = parseFloat(wholePlantContainerBox.style.height); | |||
let wx = 0; | |||
let hx = 0; | |||
if (screenfull.isFullscreen) { | |||
console.log('全屏') | |||
wx = rw / bw | |||
hx = rh / bh | |||
console.log(this.scaleNum) | |||
}else{ | |||
console.log('非全屏') | |||
console.log(this.$store.state.app.sidebar.opened) | |||
wx = rw / bw; | |||
hx = rh / bh; | |||
} else { | |||
if (this.$store.state.app.sidebar.opened) { | |||
wx = (rw-280) / bw | |||
hx = (rh-116) / bh | |||
}else{ | |||
wx = (rw-85) / bw | |||
hx = (rh-116) / bh | |||
wx = (rw - 280) / bw; | |||
hx = (rh - 116) / bh; | |||
} else { | |||
wx = (rw - 85) / bw; | |||
hx = (rh - 116) / bh; | |||
} | |||
} | |||
this.scaleNum = wx | |||
} | |||
} | |||
this.scaleNum = wx; | |||
}, | |||
}, | |||
}; | |||
</script> | |||
@@ -1,168 +1,223 @@ | |||
<template> | |||
<div> | |||
<div class="boxTitle"> | |||
<span class="blueTitle"></span> | |||
<span>各集团订单环形图</span> | |||
</div> | |||
<div class="chartBox" id='orderChartBox' v-show='chartList.length'> | |||
<div class="chartItem" v-for="(item, index) in chartList" :key='index' :style="{width: 388*beilv+'px',height: 286*beilv+'px',padding:14*beilv+'px',marginRight:9*beilv+'px',marginBottom:9*beilv+'px'}"> | |||
<div class="topTitle" :style="{fontSize: 14 * beilv + 'px'}"> | |||
<svg-icon icon-class="order-monitoring" :style="{fontSize: 16*beilv+'px'}"/> | |||
<span class="orderName" :style="{paddingRight:8*beilv+'px',marginRight:8*beilv+'px'}">{{item.orderGroupName}}</span> | |||
<span>订单计划数量{{item.num}}</span> | |||
</div> | |||
<div | |||
:id="item.id" | |||
:style="{width: 166*beilv+'px',height: 166*beilv+'px',margin: 'auto'}" | |||
></div> | |||
<div class="legend" :style="{height: 54 * beilv + 'px', marginTop: 10*beilv+'px'}"> | |||
<div class="legendItem" v-for="(subItem, i) in item.order" :key='i' :style="{paddingRight:9*beilv+'px',marginRight:9*beilv+'px'}"> | |||
<span class="itemNum" :style="{fontSize: 18 * beilv + 'px'}">{{subItem.value}}</span> | |||
<div> | |||
<span class="itemName" :style="{fontSize: 14 * beilv + 'px'}"> | |||
<span class="smallBlock" :style="{backgroundColor:subItem.color,width:8*beilv+'px',height:8*beilv+'px'}"></span> | |||
{{subItem.name}} | |||
</span> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- 空图 --> | |||
<div class="no-data-bg" v-show='!chartList.length'></div> | |||
</div> | |||
<div> | |||
<div class="boxTitle"> | |||
<span class="blueTitle"></span> | |||
<span>各集团订单环形图</span> | |||
</div> | |||
<div | |||
class="chartBox" | |||
id="orderChartBox" | |||
v-show="chartList.length"> | |||
<div | |||
class="chartItem" | |||
v-for="(item, index) in chartList" | |||
:key="index" | |||
:style="{ | |||
width: 388 * beilv + 'px', | |||
height: 286 * beilv + 'px', | |||
padding: 14 * beilv + 'px', | |||
marginRight: 9 * beilv + 'px', | |||
marginBottom: 9 * beilv + 'px', | |||
}"> | |||
<div | |||
class="topTitle" | |||
:style="{ fontSize: 14 * beilv + 'px' }"> | |||
<svg-icon | |||
icon-class="order-monitoring" | |||
:style="{ fontSize: 16 * beilv + 'px' }" /> | |||
<span | |||
class="orderName" | |||
:style="{ | |||
paddingRight: 8 * beilv + 'px', | |||
marginRight: 8 * beilv + 'px', | |||
}"> | |||
{{ item.orderGroupName }} | |||
</span> | |||
<span>订单计划数量{{ item.num }}</span> | |||
</div> | |||
<div | |||
:id="item.id" | |||
:style="{ | |||
width: 166 * beilv + 'px', | |||
height: 166 * beilv + 'px', | |||
margin: 'auto', | |||
}"></div> | |||
<div | |||
class="legend" | |||
:style="{ height: 54 * beilv + 'px', marginTop: 10 * beilv + 'px' }"> | |||
<div | |||
class="legendItem" | |||
v-for="(subItem, i) in item.order" | |||
:key="i" | |||
:style="{ | |||
paddingRight: 9 * beilv + 'px', | |||
marginRight: 9 * beilv + 'px', | |||
}"> | |||
<span | |||
class="itemNum" | |||
:style="{ fontSize: 18 * beilv + 'px' }"> | |||
{{ subItem.value }} | |||
</span> | |||
<div> | |||
<span | |||
class="itemName" | |||
:style="{ fontSize: 14 * beilv + 'px' }"> | |||
<span | |||
class="smallBlock" | |||
:style="{ | |||
backgroundColor: subItem.color, | |||
width: 8 * beilv + 'px', | |||
height: 8 * beilv + 'px', | |||
}"></span> | |||
{{ subItem.name }} | |||
</span> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<!-- 空图 --> | |||
<div | |||
class="no-data-bg" | |||
v-show="!chartList.length"></div> | |||
</div> | |||
</template> | |||
<script> | |||
import * as echarts from 'echarts' | |||
import { debounce } from '@/utils/debounce' | |||
import * as echarts from 'echarts'; | |||
import { debounce } from '@/utils/debounce'; | |||
export default { | |||
name: 'MonitoringRingCharts', | |||
props: { | |||
chartList: { | |||
type: Array, | |||
default: () => { | |||
return [] | |||
} | |||
} | |||
}, | |||
data() { | |||
return { | |||
myChart: [], | |||
beilv: 1, | |||
canvasReset: '' | |||
} | |||
}, | |||
mounted() { | |||
this.beilv = document.getElementById('orderChartBox').offsetWidth / 1610 | |||
this.canvasReset = debounce(() => { | |||
this.initChart() | |||
}, 500) | |||
window.addEventListener('resize', () => { | |||
this.beilv = document.getElementById('orderChartBox').offsetWidth / 1610 | |||
this.canvasReset() | |||
}) | |||
}, | |||
methods: { | |||
// 饼图 | |||
initChart() { | |||
if (this.chartList.length <= 0) { | |||
return false | |||
} | |||
// 销毁实例 | |||
for (let j = 0;j < this.chartList.length; j++) { | |||
if (this.myChart[j]) { | |||
this.myChart[j].dispose() // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例 | |||
} | |||
} | |||
for (let i = 0; i < this.chartList.length; i++) { | |||
var chartDom = document.getElementById(this.chartList[i].id); | |||
this.myChart[i] = echarts.init(chartDom); | |||
let colorList = [] | |||
this.chartList[i].order.map(item => { | |||
colorList.push(item.color) | |||
}) | |||
let percentage = (this.chartList[i].sunNum/this.chartList[i].num*100).toFixed(0) | |||
var option = { | |||
color: colorList, | |||
series: [ | |||
{ | |||
name: 'Access From', | |||
type: 'pie', | |||
radius: ['75%', '95%'], | |||
avoidLabelOverlap: false, | |||
itemStyle: { | |||
borderRadius: 5, | |||
borderColor: '#fff', | |||
borderWidth: 2 | |||
}, | |||
label: { | |||
show: true, | |||
position: 'center', | |||
color: '#000', | |||
formatter: [ | |||
'{a|'+percentage+'%}', | |||
'{b|生产'+this.chartList[i].sunNum+'}' | |||
].join('\n\n'), | |||
rich: { | |||
a: { | |||
fontSize: this.beilv*24 +'px' | |||
}, | |||
b: { | |||
fontSize: this.beilv*12 +'px' | |||
} | |||
} | |||
}, | |||
emphasis: { | |||
disabled: true | |||
}, | |||
labelLine: { | |||
show: false | |||
}, | |||
data: this.chartList[i].order | |||
} | |||
] | |||
}; | |||
option && this.myChart[i].setOption(option) | |||
} | |||
} | |||
} | |||
} | |||
name: 'MonitoringRingCharts', | |||
props: { | |||
chartList: { | |||
type: Array, | |||
default: () => { | |||
return []; | |||
}, | |||
}, | |||
}, | |||
data() { | |||
return { | |||
myChart: [], | |||
beilv: 1, | |||
}; | |||
}, | |||
mounted() { | |||
this.canvasReset(); | |||
window.addEventListener('resize', this.canvasReset); | |||
}, | |||
destroyed() { | |||
window.removeEventListener('resize', this.canvasReset); | |||
}, | |||
methods: { | |||
canvasReset() { | |||
debounce(() => { | |||
this.initChart(); | |||
}, 500)(); | |||
this.beilv = document.getElementById('orderChartBox').offsetWidth / 1610; | |||
}, | |||
// 饼图 | |||
initChart() { | |||
if (this.chartList.length <= 0) { | |||
return false; | |||
} | |||
// 销毁实例 | |||
for (let j = 0; j < this.chartList.length; j++) { | |||
if (this.myChart[j]) { | |||
this.myChart[j].dispose(); // 页面多次刷新会出现警告,Dom已经初始化了一个实例,这是销毁实例 | |||
} | |||
} | |||
for (let i = 0; i < this.chartList.length; i++) { | |||
var chartDom = document.getElementById(this.chartList[i].id); | |||
this.myChart[i] = echarts.init(chartDom); | |||
let colorList = []; | |||
this.chartList[i].order.map((item) => { | |||
colorList.push(item.color); | |||
}); | |||
let percentage = ( | |||
(this.chartList[i].sunNum / this.chartList[i].num) * | |||
100 | |||
).toFixed(0); | |||
var option = { | |||
color: colorList, | |||
series: [ | |||
{ | |||
name: 'Access From', | |||
type: 'pie', | |||
radius: ['75%', '95%'], | |||
avoidLabelOverlap: false, | |||
itemStyle: { | |||
borderRadius: 5, | |||
borderColor: '#fff', | |||
borderWidth: 2, | |||
}, | |||
label: { | |||
show: true, | |||
position: 'center', | |||
color: '#000', | |||
formatter: [ | |||
'{a|' + percentage + '%}', | |||
'{b|生产' + this.chartList[i].sunNum + '}', | |||
].join('\n\n'), | |||
rich: { | |||
a: { | |||
fontSize: this.beilv * 24 + 'px', | |||
}, | |||
b: { | |||
fontSize: this.beilv * 12 + 'px', | |||
}, | |||
}, | |||
}, | |||
emphasis: { | |||
disabled: true, | |||
}, | |||
labelLine: { | |||
show: false, | |||
}, | |||
data: this.chartList[i].order, | |||
}, | |||
], | |||
}; | |||
option && this.myChart[i].setOption(option); | |||
} | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style lang='scss' scoped> | |||
.chartBox { | |||
width: 100%; | |||
padding-right: 6px; | |||
height: calc(100vh - 356px); | |||
display: flex; | |||
flex-flow: row wrap; | |||
overflow: auto; | |||
align-content: flex-start; | |||
.chartItem { | |||
border-radius: 8px; | |||
border: 1px solid #CACACA; | |||
.topTitle { | |||
margin-bottom: 10px; | |||
.orderName { | |||
border-right: 1px solid #CACACA; | |||
} | |||
} | |||
.legend { | |||
text-align: center; | |||
white-space: nowrap; | |||
overflow: auto; | |||
.legendItem { | |||
display: inline-block; | |||
border-right: 1px solid #E8E8E8; | |||
.itemName { | |||
.smallBlock { | |||
display: inline-block; | |||
} | |||
} | |||
} | |||
.legendItem:last-child { | |||
border: none; | |||
} | |||
} | |||
} | |||
width: 100%; | |||
padding-right: 6px; | |||
height: calc(100vh - 356px); | |||
display: flex; | |||
flex-flow: row wrap; | |||
overflow: auto; | |||
align-content: flex-start; | |||
.chartItem { | |||
border-radius: 8px; | |||
border: 1px solid #cacaca; | |||
.topTitle { | |||
margin-bottom: 10px; | |||
.orderName { | |||
border-right: 1px solid #cacaca; | |||
} | |||
} | |||
.legend { | |||
text-align: center; | |||
white-space: nowrap; | |||
overflow: auto; | |||
.legendItem { | |||
display: inline-block; | |||
border-right: 1px solid #e8e8e8; | |||
.itemName { | |||
.smallBlock { | |||
display: inline-block; | |||
} | |||
} | |||
} | |||
.legendItem:last-child { | |||
border: none; | |||
} | |||
} | |||
} | |||
} | |||
</style> |