mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests 1 Releases Wiki Activity

projects/mesxc-zjl #324

Merged
juzi merged 3 commits from projects/mesxc-zjl into projects/mesxc-test 2024-04-10 17:39:30 +08:00
Conversation 0 Commits 3 Files Changed 20 +799 -700
5 changed files with 799 additions and 700 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 93236f9828 - Show all commits

698
src/views/choicePart/index.vue
View File

@@ -1,348 +1,368 @@
<template> <template>
<div class="choicepart-container"> <div class="choicepart-container">
<navbar /> <navbar />
<div class="choicepart-wrapper"> <div class="choicepart-wrapper">
<div class="choicepart-box" id="choicepartBox" :style="'transform:scale('+scale+');width:1710px;height:538px;'" v-show="showItem"> <div
<div class="choicepart-line1"> class="choicepart-box"
<div id="choicepartBox"
v-for="(item, index) in menuArr1" :style="'transform:scale(' + scale + ')'"
:key="index" style="width: 1710px; height: 538px"
class="choicepart-item" v-show="showItem">
@click="handelClick(item, item.choicepart)" <div class="choicepart-line1">
:style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}" <div
> v-for="(item, index) in menuArr1"
<div> :key="index"
<img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt=""> class="choicepart-item"
</div> @click="handelClick(item, item.choicepart)"
<div class="choicepart-item-title">{{item.meta.title}}</div> :style="{
</div> opacity: item.visible ? 1 : 0.4,
</div> pointerEvents: item.visible ? 'auto' : 'none',
<div class="choicepart-line2"> }">
<div <div>
v-for="(item, index) in menuArr2" <img
:key="index" :src="
class="choicepart-item" require(`../../assets/images/choicepart/${item.name}.png`)
@click="handelClick(item, item.choicepart)" "
:style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}" alt="" />
> </div>
<div> <div class="choicepart-item-title">{{ item.meta.title }}</div>
<img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt=""> </div>
</div> </div>
<div class="choicepart-item-title">{{item.meta.title}}</div> <div class="choicepart-line2">
</div> <div
</div> v-for="(item, index) in menuArr2"
</div> :key="index"
</div> class="choicepart-item"
<div class="choicepart-footer">&copy; 中建材智能自动化研究院有限公司</div> @click="handelClick(item, item.choicepart)"
</div> :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">&copy; 中建材智能自动化研究院有限公司</div>
</div>
</template> </template>
<script> <script>
import Navbar from './components/Navbar' import Navbar from './components/Navbar';
import { debounce } from '@/utils/debounce' import { debounce } from '@/utils/debounce';
export default { export default {
components: { Navbar }, components: { Navbar },
name: 'choicePart', name: 'choicePart',
data() { data() {
return { return {
boxReset: '', scale: 1,
scale: 1, menuArr1: [
menuArr1: [ {
{ name: 'Core',
name: 'Core', title: '基础核心',
title: '基础核心', visible: false,
visible: false, meta: {
meta: { title: '',
title: '' },
} },
}, {
{ name: 'Order',
name: 'Order', title: '订单管理',
title: '订单管理', visible: false,
visible: false, meta: {
meta: { title: '',
title: '' },
} },
}, {
{ name: 'Equipment',
name: 'Equipment', title: '设备管理',
title: '设备管理', visible: false,
visible: false, meta: {
meta: { title: '',
title: '' },
} },
}, {
{ name: 'Group',
name: 'Group', title: '班组管理',
title: '班组管理', visible: false,
visible: false, meta: {
meta: { title: '',
title: '' },
} },
}, {
{ name: 'Quality',
name: 'Quality', title: '质量管理',
title: '质量管理', visible: false,
visible: false, meta: {
meta: { title: '',
title: '' },
} },
}, {
{ name: 'Warehouse',
name: 'Warehouse', title: '仓库管理',
title: '仓库管理', visible: false,
visible: false, meta: {
meta: { title: '',
title: '' },
} },
}, {
{ name: 'Energy',
name: 'Energy', title: '能源管理',
title: '能源管理', visible: false,
visible: false, meta: {
meta: { title: '',
title: '' },
} },
}, {
{ name: 'Packaging',
name: 'Packaging', title: '包装管理',
title: '包装管理', visible: false,
visible: false, meta: {
meta: { title: '',
title: '' },
} },
} ],
], menuArr2: [
menuArr2: [ {
{ name: 'Material',
name: 'Material', title: '物料管理',
title: '物料管理', visible: false,
visible: false, meta: {
meta: { title: '',
title: '' },
} },
}, {
{ name: 'Extend',
name: 'Extend', title: '工艺管理',
title: '工艺管理', visible: false,
visible: false, meta: {
meta: { title: '',
title: '' },
} },
}, // {
// { // name: 'Delivery',
// name: 'Delivery', // title: '成品发货',
// title: '成品发货', // visible: false,
// visible: false, // meta: {
// meta: { // title: ''
// title: '' // }
// } // },
// }, {
{ name: 'Report',
name: 'Report', title: '报表管理',
title: '报表管理', visible: false,
visible: false, meta: {
meta: { title: '',
title: '' },
} },
}, {
{ name: 'Cost',
name: 'Cost', title: '成本管理',
title: '成本管理', visible: false,
visible: false, meta: {
meta: { title: '',
title: '' },
} },
}, {
{ name: 'SafetyEnvironmental',
name: 'SafetyEnvironmental', title: '安环管理',
title: '安环管理', visible: false,
visible: false, meta: {
meta: { title: '',
title: '' },
} },
}, {
{ name: 'Databoard',
name: 'Databoard', title: '数据驾驶舱',
title: '数据驾驶舱', visible: false,
visible: false, meta: {
meta: { title: '',
title: '' },
} },
}, {
{ name: 'System',
name: 'System', title: '系统管理',
title: '系统管理', visible: false,
visible: false, meta: {
meta: { title: '',
title: '' },
} },
} ],
], showItem: false,
showItem: false };
} },
}, // computed:{
// computed:{ // ...mapGetters(['sidebarRouters'])
// ...mapGetters(['sidebarRouters']) // },
// }, mounted() {
mounted() { this.getMsg();
this.getMsg() this.boxReset();
this.boxReset = debounce(() => { window.addEventListener('resize', this.boxReset);
this.resetSize() },
}, 300) destroyed() {
this.boxReset() window.removeEventListener('resize', this.boxReset);
window.addEventListener('resize', () => { },
this.boxReset() methods: {
}) boxReset() {
}, debounce(() => {
methods: { this.resetSize();
getMsg() { }, 300)();
let menuList = this.$store.state.permission.sidebarRouters },
console.log(menuList) getMsg() {
if (menuList.length > 0) { let menuList = this.$store.state.permission.sidebarRouters;
for (let i = 0; i < menuList.length; i ++) { console.log(menuList);
for (let k = 0; k < 8; k++) { if (menuList.length > 0) {
if (menuList[i].name === this.menuArr1[k].name) { for (let i = 0; i < menuList.length; i++) {
this.menuArr1[k].visible = true for (let k = 0; k < 8; k++) {
this.menuArr1[k].id = menuList[i].id if (menuList[i].name === this.menuArr1[k].name) {
this.menuArr1[k].choicepart = i this.menuArr1[k].visible = true;
this.menuArr1[k].children = menuList[i].children this.menuArr1[k].id = menuList[i].id;
this.menuArr1[k].meta = menuList[i].meta 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 for (let j = 0; j < 7; j++) {
this.menuArr2[j].id = menuList[i].id if (menuList[i].name === this.menuArr2[j].name) {
this.menuArr2[j].choicepart = i this.menuArr2[j].visible = true;
this.menuArr2[j].children = menuList[i].children this.menuArr2[j].id = menuList[i].id;
this.menuArr2[j].meta = menuList[i].meta 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) }
}, console.log(this.menuArr1);
handelClick(item, index) { console.log(this.menuArr2);
// this.$router.push({name: 'SystemUser'}) },
this.$store.dispatch('app/setChoicepart', index) handelClick(item, index) {
this.toRouter(item) // this.$router.push({name: 'SystemUser'})
// if (item.meta.unuse) { this.$store.dispatch('app/setChoicepart', index);
// this.$message.warning(this.$t('暂无数据')) this.toRouter(item);
// } else { // if (item.meta.unuse) {
// this.toRouter(item) // this.$message.warning(this.$t('暂无数据'))
// } // } else {
}, // this.toRouter(item)
toRouter(item) { // }
console.log(item) },
if (item.children) { toRouter(item) {
this.toRouter(item.children[0]) console.log(item);
} else { if (item.children) {
this.$router.push({ name: item.name }) this.toRouter(item.children[0]);
} } else {
}, this.$router.push({ name: item.name });
resetSize() { }
let _this = this },
_this.showItem = false resetSize() {
_this.loading = true let _this = this;
let choicepartBox = document.querySelector('#choicepartBox') _this.showItem = false;
let rw = parseFloat(window.innerWidth) _this.loading = true;
let rh = parseFloat(window.innerHeight) let choicepartBox = document.querySelector('#choicepartBox');
let bw = parseFloat(choicepartBox.style.width) let rw = parseFloat(window.innerWidth);
let bh = parseFloat(choicepartBox.style.height) let rh = parseFloat(window.innerHeight);
let wx = 0.82/(bw / rw) let bw = parseFloat(choicepartBox.style.width);
let hx = 0.56/(bh / rh) let bh = parseFloat(choicepartBox.style.height);
_this.scale = wx > hx ? hx : wx let wx = 0.82 / (bw / rw);
setTimeout(_this.showItemFun, 700) let hx = 0.56 / (bh / rh);
}, _this.scale = wx > hx ? hx : wx;
showItemFun() { setTimeout(_this.showItemFun, 700);
this.loading = false },
this.showItem = true showItemFun() {
} this.loading = false;
}, this.showItem = true;
beforeDestroy() { },
this.showItem = false },
} beforeDestroy() {
} this.showItem = false;
},
};
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.choicepart-container { .choicepart-container {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: url('../../assets/images/choicepart/choicepart-back.png') repeat; background: url('../../assets/images/choicepart/choicepart-back.png') repeat;
background-size: 100% 100%; background-size: 100% 100%;
.choicepart-wrapper { .choicepart-wrapper {
width: 100vw; width: 100vw;
height: calc(100vh - 94px); height: calc(100vh - 94px);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.choicepart-box { .choicepart-box {
// transition: all 0.3s linear; // transition: all 0.3s linear;
.choicepart-line1 { .choicepart-line1 {
width: 100%; width: 100%;
margin-bottom: 80px; margin-bottom: 80px;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
} }
.choicepart-line2 { .choicepart-line2 {
width: 100%; width: 100%;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: center; justify-content: center;
} }
.choicepart-item { .choicepart-item {
width: 184px; width: 184px;
height: 224px; height: 224px;
background: url('../../assets/images/choicepart/choice-item-back.png') no-repeat; background: url('../../assets/images/choicepart/choice-item-back.png')
background-size: 100% 100%; no-repeat;
border-radius: 5px; background-size: 100% 100%;
overflow: hidden; border-radius: 5px;
cursor: pointer; overflow: hidden;
position: relative; cursor: pointer;
margin: 0 20px; position: relative;
img { margin: 0 20px;
width: 184px; img {
height: 224px; width: 184px;
} height: 224px;
.choicepart-item-title { }
overflow: hidden; .choicepart-item-title {
padding: 0 10px; overflow: hidden;
text-overflow: ellipsis; padding: 0 10px;
white-space: nowrap; text-overflow: ellipsis;
position: absolute; white-space: nowrap;
bottom: 0; position: absolute;
left: 2px; bottom: 0;
right: 2px; left: 2px;
text-align: center; right: 2px;
color: #fff; text-align: center;
font-size: 16px; color: #fff;
line-height: 40px; font-size: 16px;
height: 40px; line-height: 40px;
letter-spacing: 2px; height: 40px;
background-color: rgba($color: #0b58ff, $alpha: 0.45); letter-spacing: 2px;
} background-color: rgba($color: #0b58ff, $alpha: 0.45);
} }
.choicepart-item:hover { }
.choicepart-item-title { .choicepart-item:hover {
background-color: rgba($color: #0b58ff, $alpha: 1); .choicepart-item-title {
} background-color: rgba($color: #0b58ff, $alpha: 1);
} }
} }
.choicepart-footer { }
position: absolute; .choicepart-footer {
width: 100%; position: absolute;
color: #C7C7C7; width: 100%;
user-select: none; color: #c7c7c7;
font-size: 12px; user-select: none;
letter-spacing: 1px; font-size: 12px;
height: 30px; letter-spacing: 1px;
display: grid; height: 30px;
place-content: center; display: grid;
bottom: 0; place-content: center;
opacity: 0.5; bottom: 0;
} opacity: 0.5;
}
} }
</style> </style>

145
src/views/databoard/deepProcessing/index.vue
View File

@@ -1,8 +1,11 @@
<template> <template>
<div id='deepProcessingContainerB' ref='deepProcessingContainerB' style="width: 100%;height: 100%;"> <div
id="deepProcessingContainerB"
ref="deepProcessingContainerB"
style="width: 100%; height: 100%">
<div <div
id='deepProcessingContainer' id="deepProcessingContainer"
ref='deepProcessingContainer' ref="deepProcessingContainer"
class="deepProcessingBoard" class="deepProcessingBoard"
style=" style="
position: absolute; position: absolute;
@@ -16,15 +19,14 @@
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
" "
:style="{transform:'scale('+scaleNum+')'}"> :style="{ transform: 'scale(' + scaleNum + ')' }">
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='深加工生产运行驾驶舱'/> <KHeader
:isFullScreen="isFullScreen"
@screenfullChange="screenfullChange"
topTitle="深加工生产运行驾驶舱" />
<div <div
class="main-body" class="main-body"
style=" style="display: grid; gap: 16px; grid-template-rows: 462px 462px">
display: grid;
gap: 16px;
grid-template-rows: 462px 462px;
">
<TopThree /> <TopThree />
<BottomTwo /> <BottomTwo />
</div> </div>
@@ -47,16 +49,16 @@
import KHeader from '../components/Header'; import KHeader from '../components/Header';
import TopThree from './TopThree'; import TopThree from './TopThree';
import BottomTwo from './BottomTwo'; import BottomTwo from './BottomTwo';
import screenfull from 'screenfull' import screenfull from 'screenfull';
import { debounce } from '@/utils/debounce' import { debounce } from '@/utils/debounce';
import { getDcsMsg, getMesMsg } from './../utils/wsInterface' import { getDcsMsg, getMesMsg } from './../utils/wsInterface';
export default { export default {
name: 'deepProcessingBoard', name: 'deepProcessingBoard',
components: { components: {
KHeader, KHeader,
TopThree, TopThree,
BottomTwo BottomTwo,
}, },
// provide() { // provide() {
// return { // return {
@@ -66,83 +68,90 @@ export default {
data() { data() {
return { return {
isFullScreen: false, isFullScreen: false,
scaleNum: 0.8 scaleNum: 0.8,
}; };
}, },
created() { created() {
this.init() this.init();
}, },
destroy() { destroy() {
this.destroy() this.destroy();
}, },
mounted() { mounted() {
this.boxReset = debounce(() => { this.boxReset = debounce(() => {
this.resetSize() this.resetSize();
}, 300) }, 300);
this.boxReset() this.boxReset();
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.boxReset() this.boxReset();
}) });
// closeWebsocket() // closeWebsocket()
// getDcsMsg() // getDcsMsg()
// getMesMsg() // getMesMsg()
console.log('mounted...........') },
mounted() {
this.boxReset();
window.addEventListener('resize', this.boxReset);
}, },
destroyed() { destroyed() {
console.log('destroyed...........') window.removeEventListener('resize', this.boxReset);
this.destroy();
}, },
methods: { methods: {
boxReset() {
debounce(() => {
this.resetSize();
}, 300)();
},
change() { change() {
this.isFullScreen = screenfull.isFullscreen this.isFullScreen = screenfull.isFullscreen;
}, },
init() { init() {
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
screenfull.on('change', this.change) screenfull.on('change', this.change);
} }
}, },
destroy() { destroy() {
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
screenfull.off('change', this.change) screenfull.off('change', this.change);
} }
}, },
// 全屏 // 全屏
screenfullChange() { screenfullChange() {
if (!screenfull.isEnabled) { if (!screenfull.isEnabled) {
this.$message({ this.$message({
message: 'you browser can not work', message: 'you browser can not work',
type: 'warning' type: 'warning',
}) });
return false return false;
} }
screenfull.toggle(this.$refs.deepProcessingContainerB) screenfull.toggle(this.$refs.deepProcessingContainerB);
}, },
resetSize() { resetSize() {
let deepProcessingContainer = document.getElementById('deepProcessingContainer') let deepProcessingContainer = document.getElementById(
let rw = parseFloat(window.innerWidth) 'deepProcessingContainer'
let rh = parseFloat(window.innerHeight) );
let bw = parseFloat(deepProcessingContainer.style.width) let rw = parseFloat(window.innerWidth);
let bh = parseFloat(deepProcessingContainer.style.height) let rh = parseFloat(window.innerHeight);
let wx = 0 let bw = parseFloat(deepProcessingContainer.style.width);
let hx = 0 let bh = parseFloat(deepProcessingContainer.style.height);
let wx = 0;
let hx = 0;
if (screenfull.isFullscreen) { if (screenfull.isFullscreen) {
console.log('全屏') wx = rw / bw;
wx = rw / bw hx = rh / bh;
hx = rh / bh } else {
console.log(this.scaleNum)
}else{
console.log('非全屏')
console.log(this.$store.state.app.sidebar.opened)
if (this.$store.state.app.sidebar.opened) { if (this.$store.state.app.sidebar.opened) {
wx = (rw-280) / bw wx = (rw - 280) / bw;
hx = (rh-116) / bh hx = (rh - 116) / bh;
}else{ } else {
wx = (rw-85) / bw wx = (rw - 85) / bw;
hx = (rh-116) / bh hx = (rh - 116) / bh;
} }
} }
this.scaleNum = wx this.scaleNum = wx;
} },
} },
}; };
</script> </script>

142
src/views/databoard/kiln/index.vue
View File

@@ -1,8 +1,11 @@
<template> <template>
<div id='kilnContainerB' ref='kilnContainerB' style="width: 100%;height: 100%;"> <div
id="kilnContainerB"
ref="kilnContainerB"
style="width: 100%; height: 100%">
<div <div
id='kilnContainer' id="kilnContainer"
ref='kilnContainer' ref="kilnContainer"
class="KilnDataBoard" class="KilnDataBoard"
style=" style="
position: absolute; position: absolute;
@@ -16,15 +19,22 @@
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
" "
:style="{transform:'scale('+scaleNum+')'}"> :style="{ transform: 'scale(' + scaleNum + ')' }">
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='窑炉生产运行驾驶舱'/> <KHeader
:isFullScreen="isFullScreen"
@screenfullChange="screenfullChange"
topTitle="窑炉生产运行驾驶舱" />
<div <div
class="main-body" class="main-body"
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px"> 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 /> <LeftFour />
</div> </div>
<div class="right-side" style="flex: 1"> <div
class="right-side"
style="flex: 1">
<RightTwo /> <RightTwo />
</div> </div>
</div> </div>
@@ -36,8 +46,8 @@
import KHeader from '../components/Header'; import KHeader from '../components/Header';
import LeftFour from './LeftFour'; import LeftFour from './LeftFour';
import RightTwo from './RightTwo.vue'; import RightTwo from './RightTwo.vue';
import screenfull from 'screenfull' import screenfull from 'screenfull';
import { debounce } from '@/utils/debounce' import { debounce } from '@/utils/debounce';
export default { export default {
name: 'Kiln', name: 'Kiln',
@@ -46,10 +56,10 @@ export default {
LeftFour, LeftFour,
RightTwo, RightTwo,
}, },
computed:{ computed: {
sidebarStatus() { sidebarStatus() {
return this.$store.state.app.sidebar.opened; return this.$store.state.app.sidebar.opened;
} },
}, },
// provide() { // provide() {
// return { // return {
@@ -59,84 +69,80 @@ export default {
data() { data() {
return { return {
isFullScreen: false, isFullScreen: false,
scaleNum: 0.8 scaleNum: 0.8,
}; };
}, },
watch: { watch: {
sidebarStatus() { sidebarStatus() {
this.boxReset() this.boxReset();
}, },
}, },
created() { created() {
this.init() this.init();
},
destroy() {
this.destroy()
}, },
mounted() { mounted() {
this.boxReset = debounce(() => { this.boxReset();
this.resetSize() window.addEventListener('resize', this.boxReset);
}, 300) },
this.boxReset() destroyed() {
window.addEventListener('resize', () => { window.removeEventListener('resize', this.boxReset);
this.boxReset() this.destroy();
})
}, },
methods: { methods: {
boxReset() {
debounce(() => {
this.resetSize();
}, 300)();
},
change() { change() {
this.isFullScreen = screenfull.isFullscreen this.isFullScreen = screenfull.isFullscreen;
}, },
init() { init() {
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
screenfull.on('change', this.change) screenfull.on('change', this.change);
} }
}, },
destroy() { destroy() {
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
screenfull.off('change', this.change) screenfull.off('change', this.change);
} }
}, },
// 全屏 // 全屏
screenfullChange() { screenfullChange() {
if (!screenfull.isEnabled) { if (!screenfull.isEnabled) {
this.$message({ this.$message({
message: 'you browser can not work', message: 'you browser can not work',
type: 'warning' type: 'warning',
}) });
return false return false;
} }
screenfull.toggle(this.$refs.kilnContainerB) screenfull.toggle(this.$refs.kilnContainerB);
}, },
resetSize() { resetSize() {
let kilnContainerBox = document.getElementById('kilnContainer') let kilnContainerBox = document.getElementById('kilnContainer');
console.log(kilnContainerBox) let rw = parseFloat(window.innerWidth);
let rw = parseFloat(window.innerWidth) let rh = parseFloat(window.innerHeight);
let rh = parseFloat(window.innerHeight) let bw = parseFloat(kilnContainerBox.style.width);
let bw = parseFloat(kilnContainerBox.style.width) let bh = parseFloat(kilnContainerBox.style.height);
let bh = parseFloat(kilnContainerBox.style.height) let wx = 0;
let wx = 0 let hx = 0;
let hx = 0
if (screenfull.isFullscreen) { if (screenfull.isFullscreen) {
console.log('全屏') wx = rw / bw;
wx = rw / bw hx = rh / bh;
hx = rh / bh } else {
console.log(this.scaleNum)
}else{
console.log('非全屏')
console.log(this.$store.state.app.sidebar.opened)
if (this.$store.state.app.sidebar.opened) { if (this.$store.state.app.sidebar.opened) {
wx = (rw-280) / bw wx = (rw - 280) / bw;
hx = (rh-116) / bh hx = (rh - 116) / bh;
}else{ } else {
wx = (rw-85) / bw wx = (rw - 85) / bw;
hx = (rh-116) / bh hx = (rh - 116) / bh;
} }
} }
this.scaleNum = wx this.scaleNum = wx;
} },
} },
}; };
</script> </script>

141
src/views/databoard/wholePlant/index.vue
View File

@@ -1,8 +1,11 @@
<template> <template>
<div id='wholePlantContainerB' ref='wholePlantContainerB' style="width: 100%;height: 100%;"> <div
id="wholePlantContainerB"
ref="wholePlantContainerB"
style="width: 100%; height: 100%">
<div <div
id='wholePlantContainer' id="wholePlantContainer"
ref='wholePlantContainer' ref="wholePlantContainer"
class="wholePlantBoard" class="wholePlantBoard"
style=" style="
position: absolute; position: absolute;
@@ -16,18 +19,27 @@
flex-direction: column; flex-direction: column;
gap: 24px; gap: 24px;
" "
:style="{transform:'scale('+scaleNum+')'}"> :style="{ transform: 'scale(' + scaleNum + ')' }">
<KHeader :isFullScreen='isFullScreen' @screenfullChange='screenfullChange' topTitle='全厂总览驾驶舱'/> <KHeader
:isFullScreen="isFullScreen"
@screenfullChange="screenfullChange"
topTitle="全厂总览驾驶舱" />
<div <div
class="main-body" class="main-body"
style="flex: 1; display: flex; gap: 20px; padding: 0px 16px"> 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 /> <LeftTwo />
</div> </div>
<div class="middle-side" style="flex: 1"> <div
class="middle-side"
style="flex: 1">
<MiddleTwo /> <MiddleTwo />
</div> </div>
<div class="right-side" style="flex: 1"> <div
class="right-side"
style="flex: 1">
<RightTwo /> <RightTwo />
</div> </div>
</div> </div>
@@ -40,8 +52,8 @@ import KHeader from '../components/Header';
import LeftTwo from './LeftTwo'; import LeftTwo from './LeftTwo';
import MiddleTwo from './MiddleTwo'; import MiddleTwo from './MiddleTwo';
import RightTwo from './RightTwo'; import RightTwo from './RightTwo';
import screenfull from 'screenfull' import screenfull from 'screenfull';
import { debounce } from '@/utils/debounce' import { debounce } from '@/utils/debounce';
export default { export default {
name: 'wholePlantBoard', name: 'wholePlantBoard',
@@ -49,7 +61,7 @@ export default {
KHeader, KHeader,
LeftTwo, LeftTwo,
MiddleTwo, MiddleTwo,
RightTwo RightTwo,
}, },
// provide() { // provide() {
// return { // return {
@@ -59,80 +71,77 @@ export default {
data() { data() {
return { return {
isFullScreen: false, isFullScreen: false,
scaleNum: 0.8 scaleNum: 0.8,
}; };
}, },
created() { created() {
this.init() this.init();
}, },
destroy() { destroy() {
this.destroy() this.destroy();
}, },
mounted() { mounted() {
this.boxReset = debounce(() => { this.boxReset();
this.resetSize() window.addEventListener('resize', this.boxReset);
}, 300)
this.boxReset()
window.addEventListener('resize', () => {
this.boxReset()
})
console.log('mounted...........')
}, },
destroyed() { destroyed() {
console.log('destroyed...........') window.removeEventListener('resize', this.boxReset);
}, },
methods: { methods: {
boxReset() {
debounce(() => {
this.resetSize();
}, 300)();
},
change() { change() {
this.isFullScreen = screenfull.isFullscreen this.isFullScreen = screenfull.isFullscreen;
}, },
init() { init() {
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
screenfull.on('change', this.change) screenfull.on('change', this.change);
} }
}, },
destroy() { destroy() {
if (screenfull.isEnabled) { if (screenfull.isEnabled) {
screenfull.off('change', this.change) screenfull.off('change', this.change);
} }
}, },
// 全屏 // 全屏
screenfullChange() { screenfullChange() {
if (!screenfull.isEnabled) { if (!screenfull.isEnabled) {
this.$message({ this.$message({
message: 'you browser can not work', message: 'you browser can not work',
type: 'warning' type: 'warning',
}) });
return false return false;
} }
screenfull.toggle(this.$refs.wholePlantContainerB) screenfull.toggle(this.$refs.wholePlantContainerB);
}, },
resetSize() { resetSize() {
let wholePlantContainerBox = document.getElementById('wholePlantContainer') let wholePlantContainerBox = document.getElementById(
let rw = parseFloat(window.innerWidth) 'wholePlantContainer'
let rh = parseFloat(window.innerHeight) );
let bw = parseFloat(wholePlantContainerBox.style.width) let rw = parseFloat(window.innerWidth);
let bh = parseFloat(wholePlantContainerBox.style.height) let rh = parseFloat(window.innerHeight);
let wx = 0 let bw = parseFloat(wholePlantContainerBox.style.width);
let hx = 0 let bh = parseFloat(wholePlantContainerBox.style.height);
let wx = 0;
let hx = 0;
if (screenfull.isFullscreen) { if (screenfull.isFullscreen) {
console.log('全屏') wx = rw / bw;
wx = rw / bw hx = rh / bh;
hx = rh / bh } else {
console.log(this.scaleNum)
}else{
console.log('非全屏')
console.log(this.$store.state.app.sidebar.opened)
if (this.$store.state.app.sidebar.opened) { if (this.$store.state.app.sidebar.opened) {
wx = (rw-280) / bw wx = (rw - 280) / bw;
hx = (rh-116) / bh hx = (rh - 116) / bh;
}else{ } else {
wx = (rw-85) / bw wx = (rw - 85) / bw;
hx = (rh-116) / bh hx = (rh - 116) / bh;
} }
} }
this.scaleNum = wx this.scaleNum = wx;
} },
} },
}; };
</script> </script>

373
src/views/order/monitoring/components/monitoringRingCharts.vue
View File

@@ -1,168 +1,223 @@
<template> <template>
<div> <div>
<div class="boxTitle"> <div class="boxTitle">
<span class="blueTitle"></span> <span class="blueTitle"></span>
<span>各集团订单环形图</span> <span>各集团订单环形图</span>
</div> </div>
<div class="chartBox" id='orderChartBox' v-show='chartList.length'> <div
<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'}"> class="chartBox"
<div class="topTitle" :style="{fontSize: 14 * beilv + 'px'}"> id="orderChartBox"
<svg-icon icon-class="order-monitoring" :style="{fontSize: 16*beilv+'px'}"/> v-show="chartList.length">
<span class="orderName" :style="{paddingRight:8*beilv+'px',marginRight:8*beilv+'px'}">{{item.orderGroupName}}</span> <div
<span>订单计划数量{{item.num}}</span> class="chartItem"
</div> v-for="(item, index) in chartList"
<div :key="index"
:id="item.id" :style="{
:style="{width: 166*beilv+'px',height: 166*beilv+'px',margin: 'auto'}" width: 388 * beilv + 'px',
></div> height: 286 * beilv + 'px',
<div class="legend" :style="{height: 54 * beilv + 'px', marginTop: 10*beilv+'px'}"> padding: 14 * beilv + 'px',
<div class="legendItem" v-for="(subItem, i) in item.order" :key='i' :style="{paddingRight:9*beilv+'px',marginRight:9*beilv+'px'}"> marginRight: 9 * beilv + 'px',
<span class="itemNum" :style="{fontSize: 18 * beilv + 'px'}">{{subItem.value}}</span> marginBottom: 9 * beilv + 'px',
<div> }">
<span class="itemName" :style="{fontSize: 14 * beilv + 'px'}"> <div
<span class="smallBlock" :style="{backgroundColor:subItem.color,width:8*beilv+'px',height:8*beilv+'px'}"></span> class="topTitle"
{{subItem.name}} :style="{ fontSize: 14 * beilv + 'px' }">
</span> <svg-icon
</div> icon-class="order-monitoring"
</div> :style="{ fontSize: 16 * beilv + 'px' }" />
</div> <span
</div> class="orderName"
</div> :style="{
<!-- 空图 --> paddingRight: 8 * beilv + 'px',
<div class="no-data-bg" v-show='!chartList.length'></div> marginRight: 8 * beilv + 'px',
</div> }">
{{ 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> </template>
<script> <script>
import * as echarts from 'echarts' import * as echarts from 'echarts';
import { debounce } from '@/utils/debounce' import { debounce } from '@/utils/debounce';
export default { export default {
name: 'MonitoringRingCharts', name: 'MonitoringRingCharts',
props: { props: {
chartList: { chartList: {
type: Array, type: Array,
default: () => { default: () => {
return [] return [];
} },
} },
}, },
data() { data() {
return { return {
myChart: [], myChart: [],
beilv: 1, beilv: 1,
canvasReset: '' };
} },
}, mounted() {
mounted() { this.canvasReset();
this.beilv = document.getElementById('orderChartBox').offsetWidth / 1610 window.addEventListener('resize', this.canvasReset);
this.canvasReset = debounce(() => { },
this.initChart() destroyed() {
}, 500) window.removeEventListener('resize', this.canvasReset);
window.addEventListener('resize', () => { },
this.beilv = document.getElementById('orderChartBox').offsetWidth / 1610 methods: {
this.canvasReset() canvasReset() {
}) debounce(() => {
}, this.initChart();
methods: { }, 500)();
// 饼图 this.beilv = document.getElementById('orderChartBox').offsetWidth / 1610;
initChart() { },
if (this.chartList.length <= 0) { // 饼图
return false 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 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); for (let i = 0; i < this.chartList.length; i++) {
let colorList = [] var chartDom = document.getElementById(this.chartList[i].id);
this.chartList[i].order.map(item => { this.myChart[i] = echarts.init(chartDom);
colorList.push(item.color) let colorList = [];
}) this.chartList[i].order.map((item) => {
let percentage = (this.chartList[i].sunNum/this.chartList[i].num*100).toFixed(0) colorList.push(item.color);
var option = { });
color: colorList, let percentage = (
series: [ (this.chartList[i].sunNum / this.chartList[i].num) *
{ 100
name: 'Access From', ).toFixed(0);
type: 'pie', var option = {
radius: ['75%', '95%'], color: colorList,
avoidLabelOverlap: false, series: [
itemStyle: { {
borderRadius: 5, name: 'Access From',
borderColor: '#fff', type: 'pie',
borderWidth: 2 radius: ['75%', '95%'],
}, avoidLabelOverlap: false,
label: { itemStyle: {
show: true, borderRadius: 5,
position: 'center', borderColor: '#fff',
color: '#000', borderWidth: 2,
formatter: [ },
'{a|'+percentage+'%}', label: {
'{b|生产'+this.chartList[i].sunNum+'}' show: true,
].join('\n\n'), position: 'center',
rich: { color: '#000',
a: { formatter: [
fontSize: this.beilv*24 +'px' '{a|' + percentage + '%}',
}, '{b|生产' + this.chartList[i].sunNum + '}',
b: { ].join('\n\n'),
fontSize: this.beilv*12 +'px' rich: {
} a: {
} fontSize: this.beilv * 24 + 'px',
}, },
emphasis: { b: {
disabled: true fontSize: this.beilv * 12 + 'px',
}, },
labelLine: { },
show: false },
}, emphasis: {
data: this.chartList[i].order disabled: true,
} },
] labelLine: {
}; show: false,
option && this.myChart[i].setOption(option) },
} data: this.chartList[i].order,
} },
} ],
} };
option && this.myChart[i].setOption(option);
}
},
},
};
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
.chartBox { .chartBox {
width: 100%; width: 100%;
padding-right: 6px; padding-right: 6px;
height: calc(100vh - 356px); height: calc(100vh - 356px);
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
overflow: auto; overflow: auto;
align-content: flex-start; align-content: flex-start;
.chartItem { .chartItem {
border-radius: 8px; border-radius: 8px;
border: 1px solid #CACACA; border: 1px solid #cacaca;
.topTitle { .topTitle {
margin-bottom: 10px; margin-bottom: 10px;
.orderName { .orderName {
border-right: 1px solid #CACACA; border-right: 1px solid #cacaca;
} }
} }
.legend { .legend {
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
overflow: auto; overflow: auto;
.legendItem { .legendItem {
display: inline-block; display: inline-block;
border-right: 1px solid #E8E8E8; border-right: 1px solid #e8e8e8;
.itemName { .itemName {
.smallBlock { .smallBlock {
display: inline-block; display: inline-block;
} }
} }
} }
.legendItem:last-child { .legendItem:last-child {
border: none; border: none;
} }
} }
} }
} }
</style> </style>