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

能源2-1

Browse Source
This commit is contained in:
朱菊兰 2024-07-16 10:05:39 +08:00
parent c9fe2ba296
commit 9bcb4d42fa
24 changed files with 342 additions and 317 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/choicepart/Devconfig.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

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

@ -1,324 +1,349 @@
<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:1574px;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 + ');width:1574px;height:538px;'"
:key="index" v-show="showItem">
class="choicepart-item" <div class="choicepart-line1">
@click="handelClick(item, item.choicepart)" <div
:style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}" v-for="(item, index) in menuArr1"
> :key="index"
<div> class="choicepart-item"
<img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt=""> @click="handelClick(item, item.choicepart)"
</div> :style="{
<div class="choicepart-item-title">{{item.meta.title}}</div> opacity: item.visible ? 1 : 0.4,
</div> pointerEvents: item.visible ? 'auto' : 'none',
</div> }">
<div class="choicepart-line2"> <div>
<div <img
v-for="(item, index) in menuArr2" :src="
:key="index" require(`../../assets/images/choicepart/${item.name}.png`)
class="choicepart-item" "
@click="handelClick(item, item.choicepart)" alt="" />
:style="{opacity: item.visible?1:0.4, pointerEvents:item.visible?'auto':'none'}" </div>
> <div class="choicepart-item-title">{{ item.meta.title }}</div>
<div> </div>
<img :src="require(`../../assets/images/choicepart/${item.name}.png`)" alt=""> </div>
</div> <div class="choicepart-line2">
<div class="choicepart-item-title">{{item.meta.title}}</div> <div
</div> v-for="(item, index) in menuArr2"
</div> :key="index"
</div> class="choicepart-item"
</div> @click="handelClick(item, item.choicepart)"
<div class="choicepart-footer">&copy; 中建材智能自动化研究院有限公司</div> :style="{
</div> 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: '', 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: '',
} },
} },
], ],
menuArr2: [ menuArr2: [
{ {
name: 'Packaging', name: 'Packaging',
title: '包装管理', title: '包装管理',
visible: false, visible: false,
meta: { meta: {
title: '' title: '',
} },
}, },
{ {
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: 'System', name: 'System',
title: '系统管理', title: '系统管理',
visible: false, visible: false,
meta: { meta: {
title: '' title: '',
} },
} },
], {
showItem: false name: 'Devconfig',
} title: '开发配置',
}, visible: false,
// computed:{ meta: {
// ...mapGetters(['sidebarRouters']) title: '',
// }, },
mounted() { },
this.getMsg() ],
this.boxReset = debounce(() => { showItem: false,
this.resetSize() };
}, 300) },
this.boxReset() // computed:{
window.addEventListener('resize', () => { // ...mapGetters(['sidebarRouters'])
this.boxReset() // },
}) mounted() {
}, this.getMsg();
methods: { this.boxReset = debounce(() => {
getMsg() { this.resetSize();
let menuList = this.$store.state.permission.sidebarRouters }, 300);
console.log(menuList) this.boxReset();
if (menuList.length > 0) { window.addEventListener('resize', () => {
for (let i = 0; i < menuList.length; i ++) { this.boxReset();
for (let k = 0; k < 7; k++) { });
if (menuList[i].name === this.menuArr1[k].name) { },
this.menuArr1[k].visible = true methods: {
this.menuArr1[k].id = menuList[i].id getMsg() {
this.menuArr1[k].choicepart = i let menuList = this.$store.state.permission.sidebarRouters;
this.menuArr1[k].children = menuList[i].children console.log(menuList);
this.menuArr1[k].meta = menuList[i].meta if (menuList.length > 0) {
} for (let i = 0; i < menuList.length; i++) {
} for (let k = 0; k < 7; k++) {
for (let j = 0; j < 6; j++) { if (menuList[i].name === this.menuArr1[k].name) {
if (menuList[i].name === this.menuArr2[j].name) { this.menuArr1[k].visible = true;
this.menuArr2[j].visible = true this.menuArr1[k].id = menuList[i].id;
this.menuArr2[j].id = menuList[i].id this.menuArr1[k].choicepart = i;
this.menuArr2[j].choicepart = i this.menuArr1[k].children = menuList[i].children;
this.menuArr2[j].children = menuList[i].children this.menuArr1[k].meta = menuList[i].meta;
this.menuArr2[j].meta = menuList[i].meta }
} }
} for (let j = 0; j < 7; j++) {
} if (menuList[i].name === this.menuArr2[j].name) {
} this.menuArr2[j].visible = true;
console.log(this.menuArr1) this.menuArr2[j].id = menuList[i].id;
console.log(this.menuArr2) this.menuArr2[j].choicepart = i;
}, this.menuArr2[j].children = menuList[i].children;
handelClick(item, index) { this.menuArr2[j].meta = menuList[i].meta;
// this.$router.push({name: 'SystemUser'}) }
this.$store.dispatch('app/setChoicepart', index) }
this.toRouter(item) }
// if (item.meta.unuse) { }
// this.$message.warning(this.$t('暂无数据')) console.log(this.menuArr1);
// } else { console.log(this.menuArr2);
// this.toRouter(item) },
// } handelClick(item, index) {
}, // this.$router.push({name: 'SystemUser'})
toRouter(item) { this.$store.dispatch('app/setChoicepart', index);
console.log(item) this.toRouter(item);
if (item.children) { // if (item.meta.unuse) {
this.toRouter(item.children[0]) // this.$message.warning(this.$t('暂无数据'))
} else { // } else {
this.$router.push({ name: item.name }) // this.toRouter(item)
} // }
}, },
resetSize() { toRouter(item) {
let _this = this console.log(item);
_this.showItem = false if (item.children) {
_this.loading = true this.toRouter(item.children[0]);
let choicepartBox = document.querySelector('#choicepartBox') } else {
let rw = parseFloat(window.innerWidth) this.$router.push({ name: item.name });
let rh = parseFloat(window.innerHeight) }
let bw = parseFloat(choicepartBox.style.width) },
let bh = parseFloat(choicepartBox.style.height) resetSize() {
let wx = 0.82/(bw / rw) let _this = this;
let hx = 0.56/(bh / rh) _this.showItem = false;
_this.scale = wx > hx ? hx : wx _this.loading = true;
setTimeout(_this.showItemFun, 700) let choicepartBox = document.querySelector('#choicepartBox');
}, let rw = parseFloat(window.innerWidth);
showItemFun() { let rh = parseFloat(window.innerHeight);
this.loading = false let bw = parseFloat(choicepartBox.style.width);
this.showItem = true let bh = parseFloat(choicepartBox.style.height);
} let wx = 0.82 / (bw / rw);
}, let hx = 0.56 / (bh / rh);
beforeDestroy() { _this.scale = wx > hx ? hx : wx;
this.showItem = false setTimeout(_this.showItemFun, 700);
} },
} showItemFun() {
this.loading = false;
this.showItem = true;
},
},
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>

0
src/views/energy/base/energyType/components/InputArea.vue → src/views/devConfig/energy/energyLimit/components/InputArea.vue
View File

0
src/views/energy/base/energyType/components/TimePickerArea.vue → src/views/devConfig/energy/energyLimit/components/TimePickerArea.vue
View File

0
src/views/energy/monitoring/energyLimit/components/energyLimitAdd.vue → src/views/devConfig/energy/energyLimit/components/energyLimitAdd.vue
View File

0
src/views/energy/monitoring/energyLimit/index.vue → src/views/devConfig/energy/energyLimit/index.vue
View File

0
src/views/energy/base/energyPlc/components/energyPlcAdd.vue → src/views/devConfig/energy/energyPlc/components/energyPlcAdd.vue
View File

0
src/views/energy/base/energyPlc/index.vue → src/views/devConfig/energy/energyPlc/index.vue
View File

0
src/views/energy/base/energyPlcConnect/components/energyPlcConnectAdd.vue → src/views/devConfig/energy/energyPlcConnect/components/energyPlcConnectAdd.vue
View File

0
src/views/energy/base/energyPlcConnect/components/energyPlcParam.vue → src/views/devConfig/energy/energyPlcConnect/components/energyPlcParam.vue
View File

0
src/views/energy/base/energyPlcConnect/components/energyPlcParamAdd.vue → src/views/devConfig/energy/energyPlcConnect/components/energyPlcParamAdd.vue
View File

0
src/views/energy/base/energyPlcConnect/index.vue → src/views/devConfig/energy/energyPlcConnect/index.vue
View File

0
src/views/energy/monitoring/energyStatistics/components/energyStatisticsAdd.vue → src/views/devConfig/energy/energyStatistics/components/energyStatisticsAdd.vue
View File

0
src/views/energy/monitoring/energyStatistics/components/energyStatisticsDet.vue → src/views/devConfig/energy/energyStatistics/components/energyStatisticsDet.vue
View File

0
src/views/energy/monitoring/energyStatistics/components/energyStatisticsDetAdd.vue → src/views/devConfig/energy/energyStatistics/components/energyStatisticsDetAdd.vue
View File

0
src/views/energy/monitoring/energyStatistics/index.vue → src/views/devConfig/energy/energyStatistics/index.vue
View File

0
src/views/energy/base/energyType/components/InnerTable.vue → src/views/devConfig/energy/energyType/components/InnerTable.vue
View File

0
src/views/energy/monitoring/energyLimit/components/InputArea.vue → src/views/devConfig/energy/energyType/components/InputArea.vue
View File

0
src/views/energy/monitoring/energyLimit/components/TimePickerArea.vue → src/views/devConfig/energy/energyType/components/TimePickerArea.vue
View File

0
src/views/energy/base/energyType/components/energyTypeAdd.vue → src/views/devConfig/energy/energyType/components/energyTypeAdd.vue
View File

0
src/views/energy/base/energyType/index.vue → src/views/devConfig/energy/energyType/index.vue
View File

0
src/views/energy/monitoring/energyOverlimitLog/index.vue → src/views/energy/energyOverlimitLog/index.vue
View File

0
src/views/energy/base/energyQuantityRealtime/index.vue → src/views/energy/energyQuantityRealtime/index.vue
View File

0
src/views/energy/monitoring/energyReport/index.vue → src/views/energy/energyReport/index.vue
View File