suojin
/
jonhon-mes-web
15
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式修改

Browse Source
menu_style
jinna 3 months ago
parent f0d8dad597
commit 7187952998
8 changed files with 215 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      src/page/index/index.vue
  2. 179
      src/page/index/sidebar/index.vue
  3. 33
      src/page/index/top/index.vue
  4. 8
      src/page/index/top/top-menu.vue
  5. 1
      src/styles/common.scss
  6. 15
      src/views/wel/components/efficiency.vue
  7. 14
      src/views/wel/components/outputTable.vue
  8. 20
      src/views/wel/components/workbase.vue

17
src/page/index/index.vue
Unescape View File

@ -1,16 +1,17 @@
<template> <template>
<el-watermark :content="watermark" style="height: 100%"> <el-watermark :content="watermark" style="height: 100%">
<div class="avue-contail" :class="{ 'avue--collapse': isCollapse }"> <div class="avue-contail" :class="{ 'avue--collapse': isCollapse }">
<div class="avue-layout" :class="{ 'avue-layout--horizontal': isHorizontal }"> <top ref="top" v-if="setting.styleRadio == '3'" />
<div class="avue-layout" :class="{ 'avue-layout--horizontal': isHorizontal }" :style="{height: setting.styleRadio == '3' ? 'calc(100% - 50px)' : '100%'}">
<!-- :style="{ width: setting.styleRadio == '3' && '195px',background: setting.styleRadio == '3' && '#f7fafc'}" --> <!-- :style="{ width: setting.styleRadio == '3' && '195px',background: setting.styleRadio == '3' && '#f7fafc'}" -->
<div class="avue-sidebar" v-show="validSidebar" :class="setting.styleRadio == '2' ? 'styleRadio' : ''"> <div class="avue-sidebar" v-show="validSidebar" :class="setting.styleRadio == '2' ? 'styleRadio' : setting.styleRadio == '3' ? 'thirdBar' : ''">
<!-- 左侧导航栏 --> <!-- 左侧导航栏 -->
<logo v-if="setting.styleRadio == '1' || setting.styleRadio == '3'|| setting.styleRadio == '4'" /> <logo v-if="setting.styleRadio == '1' || setting.styleRadio == '4'" />
<sidebar /> <sidebar />
</div> </div>
<div class="avue-main"> <div class="avue-main">
<!-- 顶部导航栏 --> <!-- 顶部导航栏 -->
<top ref="top" /> <top ref="top" v-if="setting.styleRadio != '3'" />
<!-- 顶部标签卡 --> <!-- 顶部标签卡 -->
<tags /> <tags />
<search class="avue-view" v-show="isSearch"></search> <search class="avue-view" v-show="isSearch"></search>
@ -114,7 +115,7 @@ export default {
if (item.children.length !== 0) { if (item.children.length !== 0) {
this.$store.commit('SET_LEFT_MENU', item.children); this.$store.commit('SET_LEFT_MENU', item.children);
let tmpIndex = item.children.findIndex(item1 => item1.id == this.selectedIndex) let tmpIndex = item.children.findIndex(item1 => item1.id == this.selectedIndex)
let index = tmpIndex == -1 ? 0 : tmpIndex let index = tmpIndex == '-1' ? 0 : tmpIndex
this.$store.commit('SET_SELECT_INDEX', index); this.$store.commit('SET_SELECT_INDEX', index);
// setStore({ name: 'left_menu', content: item.children }); // setStore({ name: 'left_menu', content: item.children });
// this.$router.$avueRouter.formatRoutes(item.children, true); // this.$router.$avueRouter.formatRoutes(item.children, true);
@ -125,8 +126,6 @@ export default {
//打开菜单 //打开菜单
openMenu(item = {}) { openMenu(item = {}) {
this.$store.dispatch('GetMenu', item.id).then(data => { this.$store.dispatch('GetMenu', item.id).then(data => {
console.log('data=================', data)
console.log('item.id--------------------', item.id)
if (data.length !== 0) { if (data.length !== 0) {
this.$router.$avueRouter.formatRoutes(data, true); this.$router.$avueRouter.formatRoutes(data, true);
} }
@ -165,4 +164,8 @@ export default {
.styleRadio { .styleRadio {
margin-right: 8px !important; margin-right: 8px !important;
} }
.thirdBar{
width: auto !important;
}
</style> </style>

179
src/page/index/sidebar/index.vue
Unescape View File

@ -10,39 +10,22 @@
</el-menu> </el-menu>
<left-menu :menulist="menu" v-if="setting.styleRadio == '2'"></left-menu> <left-menu :menulist="menu" v-if="setting.styleRadio == '2'"></left-menu>
<div class="left_menu_box" style="display: flex;" v-if="setting.styleRadio == '3'"> <div class="left_menu_box" :class="leftMenu[selectIndex].children ? 'right_box' : ''" style="display: flex;height: 100%;background: #fff;" v-if="setting.styleRadio == '3'">
<div :class="leftMenu.find(item => item.children) ? 'children' : 'no_child'"> <div :class="leftMenu.find(item => item.children) ? 'children' : 'no_child'">
<div class="top_title">{{ this.menu.find(item => item.id == this.leftMenu[selectIndex].parentId).name }}</div> <!-- <div class="top_title">{{ this.menu.find(item => item.id == this.leftMenu[selectIndex].parentId).name }}</div> -->
<div class="left_menu" @click="clickItem(item, index)" v-for="(item, index) in leftMenu" :key="item.id" <div class="left_menu" @click="clickItem(item, index)" v-for="(item, index) in leftMenu" :key="item.id" @mouseenter="mouseEnter(item,index)"
:class="item.id == selectedIndex ? 'active' : ''"> :class="index == selectIndex ? 'active' : ''">
<el-popover placement="right-start" :show-arrow="false" :offset="0" :hide-after='0'
popper-class="log-popover"
popper-style="visibility: visible;width:auto;border:none; transform-origin: left center; z-index: 2051;padding:0;offset:0 !important;">
<template #reference>
<div class="left_menu_item"> <div class="left_menu_item">
<div style="display: flex;align-items: center;">
<i :class="item.source" ></i> <i :class="item.source" ></i>
<span class="name_text">{{ item.name }}</span> <span class="name_text">{{ item.name.substring(0,2) }}</span>
</div>
<div class="img_box" v-if="item.children"></div>
</div>
</template>
<template #default v-if="item.children && item.children.length != 0">
<div class="third_box" v-if="item.children && item.children.length != 0">
<div class="third_box_item" v-for="third in item.children" :key="third.id" @click='clickPage(third)'>
{{ third.name }}
</div>
</div> </div>
</template>
</el-popover>
</div> </div>
</div> </div>
<!-- <div style="flex: 1;"> <div style="flex: 1;height: 100%;background: #fff;" v-show="leftMenu[selectIndex].children">
<div <div
v-if="leftMenu && leftMenu.length != 0 && leftMenu[selectIndex].children && leftMenu[selectIndex].children.length != 0"> v-if="leftMenu && leftMenu.length != 0 && leftMenu[selectIndex].children && leftMenu[selectIndex].children.length != 0">
<div class="left_top">{{ leftMenu[selectIndex].name }} </div> <div class="left_top">{{ leftMenu[selectIndex].name }} </div>
<div class="right_menu" v-for="item in leftMenu[selectIndex].children" :key="item.id"> <div class="right_menu" v-for="item in leftMenu[selectIndex].children" :key="item.id" @mouseleave="mounseLeave(leftMenu[selectIndex],item)">
<div class="right_menu_item"> <div class="right_menu_item">
<el-popover placement="right-start" :show-arrow="false" :offset="0" :hide-after='0' <el-popover placement="right-start" :show-arrow="false" :offset="0" :hide-after='0'
popper-class="log-popover" popper-class="log-popover"
@ -55,18 +38,28 @@
</el-icon> </el-icon>
</div> </div>
</template> </template>
<template #default v-if="item.children && item.children.length != 0"> <template #default >
<div class="third_box" v-if="item.children && item.children.length != 0"> <div class="third_box" v-if="item.children && item.children.length != 0 && !item.children.find(item1 => item1.children)">
<div class="third_box_item" v-for="third in item.children" :key="third.id"> <div class="third_box_item" v-for="third in item.children" :key="third.id" @click="handleClick(third)">
{{ third.name }} {{ third.name }}
</div> </div>
</div> </div>
<div class="four_box" v-if="item.children && item.children.length != 0 && item.children.find(item1 => item1.children)">
<div class="four_box_item" v-for="third in item.children" :key="third.id">
<div class="third_name" @click="handleClick(third)"><span></span>{{ third.name }}</div>
<div class="four_con_box" v-if="third.children">
<div class="four_con_item" v-for="four in third.children" :key="four.id" @click="handleClick(four)">
{{ four.name }}
</div>
</div>
</div>
</div>
</template> </template>
</el-popover> </el-popover>
</div> </div>
</div> </div>
</div> </div>
</div> --> </div>
</div> </div>
</template> </template>
@ -82,6 +75,7 @@ export default {
data() { data() {
return { return {
isCollapse: false, isCollapse: false,
showRight:false
// selectIndex:0 // selectIndex:0
} }
}, },
@ -100,6 +94,7 @@ export default {
mounted() { mounted() {
console.log('left--------------------------',this.leftMenu) console.log('left--------------------------',this.leftMenu)
console.log('menu--------------------------',this.menu) console.log('menu--------------------------',this.menu)
console.log('selectIndex--------------------------',this.selectIndex)
if(this.setting.styleRadio=='3'){ if(this.setting.styleRadio=='3'){
this.index.openMenu2(); this.index.openMenu2();
}else{ }else{
@ -113,9 +108,9 @@ export default {
path: item.path, path: item.path,
query: item.query, query: item.query,
}); });
}
this.$store.commit('SET_SELECTED_INDEX', item.id + '');
this.$store.commit('SET_SELECT_INDEX', index); this.$store.commit('SET_SELECT_INDEX', index);
this.$store.commit('SET_SELECTED_INDEX', item.id + '');
}
// this.selectIndex = index // this.selectIndex = index
}, },
clickPage(item) { clickPage(item) {
@ -124,24 +119,72 @@ export default {
path: item.path, path: item.path,
query: item.query, query: item.query,
}); });
this.$store.commit('SET_SELECTED_INDEX', item.parentId + ''); // this.$store.commit('SET_SELECTED_INDEX', item.parentId + '');
}
},
mouseEnter(item,index){
this.$store.commit('SET_SELECT_INDEX', index);
if(item.children){
this.showRight = true
}else{
this.showRight = false
}
},
mounseLeave(item,item1){
console.log('item----------------------',item)
console.log('item1----------------------',item1)
console.log('tmp-------------------',item.children.find(item1 => item1.children))
if(!item1.children){
if(item.id != this.selectedIndex){
let tmp = this.leftMenu.find(item => item.id == this.selectedIndex)
let tmpIndex = this.leftMenu.findIndex(item => item.id == this.selectedIndex)
this.$store.commit('SET_SELECT_INDEX', tmpIndex == -1 ? 0 : tmpIndex);
if(tmp && tmp.children){
this.showRight = true
}else{
this.showRight = false
}
}
}
},
handleClick(item){
console.log('item000000000000000000000000',item)
if(!item.children){
this.$router.push({
path: item.path,
query: item.query,
});
} }
} }
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.left_menu_box{ .left_menu_box{
// background: #f7fafc; width: 48px !important;
&.right_box{
width: 200px !important;
background: #fff;
}
} }
.no_child { .no_child {
width: 195px; width: 48px;
} }
.children { .children {
width: 195px; width: 48px;
height: 100%;
&:hover{
transition: all .5s;
box-shadow: 5px 5px 30px #afaeae;
}
} }
.top_title{ .top_title{
font-size: 14px; font-size: 14px;
@ -174,9 +217,9 @@ export default {
.left_menu_item { .left_menu_item {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
flex-direction: column;
justify-content: space-between; justify-content: space-between;
padding: 0 10px; padding: 10px 0px;
height: 46px;
align-items: center; align-items: center;
font-size: 12px; font-size: 12px;
font-family: Microsoft YaHei-Regular, Microsoft YaHei; font-family: Microsoft YaHei-Regular, Microsoft YaHei;
@ -196,12 +239,17 @@ export default {
} }
.name_text{ .name_text{
// display: inline-block; font-size: 12px;
// width: 52px; font-family: Microsoft YaHei-Regular, Microsoft YaHei;
margin-left: 10px; font-weight: 500;
// overflow: hidden; color: var(--header-bkColor-hover);
// text-overflow: ellipsis; /* 超出宽度200px后显示省略号 */ padding-top: 5px;
// white-space: nowrap; /* 限制不允许换行 */ text-align: center;
width: 45px;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
@ -296,7 +344,7 @@ export default {
padding-left: 15px; padding-left: 15px;
padding-right: 15px; padding-right: 15px;
position: relative; position: relative;
font-weight: bolder; // font-weight: normal;
word-break: keep-all; word-break: keep-all;
white-space: nowrap; white-space: nowrap;
box-sizing: border-box; box-sizing: border-box;
@ -311,4 +359,49 @@ export default {
.log-popover { .log-popover {
border: none; border: none;
} }
.four_box{
display: flex;
.four_box_item{
display: flex;
flex-direction: column;
// line-height: 46px;
min-width: 140px;
padding-left: 15px;
padding-top: 15px;
cursor: pointer;
.third_name{
line-height: 46px;
display: flex;
align-items: center;
span{
width: 3px;
height: 15px;
margin-right: 5px;
display: inline-block;
background:#0066ff ;
}
}
.four_con_box{
display: flex;
flex-direction: column;
.four_con_item{
line-height: 46px;
padding-left: 10px;
&:hover{
background: #0066ff;
color: #fff;
}
}
}
}
}
</style> </style>

33
src/page/index/top/index.vue
Unescape View File

@ -1,15 +1,19 @@
<template> <template>
<div class="avue-top" :class="setting.styleRadio == '4' ? 'logo_bg' : ''"> <div class="avue-top" :class="setting.styleRadio == '4' ? 'logo_bg' : setting.styleRadio == '3' ? 'third_bg' : ''">
<div class="top_bag" v-if="setting.styleRadio == 3">
<img src="@/assets/logo_bai.png" class="logo_img" />
<!-- <logo></logo> -->
</div>
<div class="top-bar__left"> <div class="top-bar__left">
<div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]" <div class="avue-breadcrumb" :class="[{ 'avue-breadcrumb--active': isCollapse }]"
v-if="setting.collapse && !isHorizontal"> v-if="setting.collapse && !isHorizontal">
<i class="icon-navicon" @click="setCollapse"></i> <i class="icon-navicon" @click="setCollapse"></i>
</div> </div>
</div> </div>
<div class="top-bar__title" :class="setting.styleRadio == '1' ? 'bar__title_fff' : ''"> <div class="top-bar__title" :class="setting.styleRadio == '1' ? 'bar__title_fff' : setting.styleRadio == '3' ? 'bar_title_third' : ''">
<top-menu ref="topMenu" <top-menu ref="topMenu"
v-if="setting.menu && (setting.styleRadio == '3' || setting.styleRadio == '4')"></top-menu> v-if="setting.menu && (setting.styleRadio == '3' || setting.styleRadio == '4')"></top-menu>
<top-search class="top-bar__item" v-if="setting.search"></top-search> <top-search class="top-bar__item" v-if="setting.search" :style="{left:setting.styleRadio == '3' && '225px'}"></top-search>
</div> </div>
<div class="top-bar__right"> <div class="top-bar__right">
<!-- <div v-if="setting.color" class="top-bar__item"> <!-- <div v-if="setting.color" class="top-bar__item">
@ -358,6 +362,25 @@ export default {
background: #000 !important; background: #000 !important;
} }
.third_bg{
display: flex;
background: #1881FF !important;
align-items: center;
.top_bag{
display: flex;
align-items: center;
margin-left: 30px;
.logo_img{
width: calc(100% - 70px);
height: calc(100% - 60px);
// margin-top: 15px
}
}
}
:deep(.el-sub-menu .el-icon.el-sub-menu__icon-more) { :deep(.el-sub-menu .el-icon.el-sub-menu__icon-more) {
color: #fff !important; color: #fff !important;
} }
@ -365,4 +388,8 @@ export default {
.bar__title_fff { .bar__title_fff {
background-color: #fff background-color: #fff
} }
.bar_title_third{
margin-left: 120px;
}
</style> </style>

8
src/page/index/top/top-menu.vue
Unescape View File

@ -1,5 +1,6 @@
<template> <template>
<div> <div>
<el-menu class="top-menu custom-menu" :default-active="activeIndex" mode="horizontal" ellipsis <el-menu class="top-menu custom-menu" :default-active="activeIndex" mode="horizontal" ellipsis
style="width: 900px" > style="width: 900px" >
<!-- <el-menu-item index="0" @click="openHome(itemHome)"> <!-- <el-menu-item index="0" @click="openHome(itemHome)">
@ -8,7 +9,6 @@
<span>{{ itemHome.name }}</span> <span>{{ itemHome.name }}</span>
</template> </template>
</el-menu-item> --> </el-menu-item> -->
<template v-for="(item, index) in items" :key="index"> <template v-for="(item, index) in items" :key="index">
<el-menu-item :index="item.id + ''" @click="openMenu(item)" > <el-menu-item :index="item.id + ''" @click="openMenu(item)" >
<template #title> <template #title>
@ -52,6 +52,8 @@
</template> </template>
<script> <script>
import { color } from 'echarts';
import { set } from 'nprogress';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
export default { export default {
@ -77,7 +79,6 @@ export default {
}, },
methods: { methods: {
openMenu(item) { openMenu(item) {
console.log('item------------------------', item)
if (this.setting.styleRadio == '3' || this.setting.styleRadio == '4') { if (this.setting.styleRadio == '3' || this.setting.styleRadio == '4') {
this.index.openMenu2(item); this.index.openMenu2(item);
} else { } else {
@ -95,15 +96,12 @@ export default {
this.$router.push(this.tagWel); this.$router.push(this.tagWel);
}, },
interval() { interval() {
console.log('1111111111111111111111111111111111111')
this.timer = setInterval(() => { this.timer = setInterval(() => {
this.getMenu() this.getMenu()
}, 1000) }, 1000)
}, },
getMenu() { getMenu() {
this.items = this.menu this.items = this.menu
console.log('menu222-------------------------------------', this.menu)
console.log('items-------------------------------------', this.items)
if (this.menu.length != 0) { if (this.menu.length != 0) {
clearInterval(this.timer) clearInterval(this.timer)
} }

1
src/styles/common.scss
Unescape View File

@ -78,6 +78,7 @@ a {
background: #f0f2f5; background: #f0f2f5;
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
overflow: hidden;
} }
.avue--collapse { .avue--collapse {

15
src/views/wel/components/efficiency.vue
Unescape View File

@ -15,8 +15,13 @@ export default {
okNum: [1500, 1000, 2000, 1500, 2100, 1800, 1200, 2600, 1200, 0, 0, 0] okNum: [1500, 1000, 2000, 1500, 2100, 1800, 1200, 2600, 1200, 0, 0, 0]
} }
}, },
mounted() { mounted() {
this.createBarChart() this.createBarChart()
// 监听屏幕宽度变化：当浏览器发生resize事件的时候，触发echart的resize事件，重绘canvas
window.addEventListener("resize", () => {
this.createBarChart();
})
}, },
methods: { methods: {
createBarChart() { createBarChart() {
@ -109,11 +114,11 @@ export default {
}; };
// 使用制定的配置项和数据显示图表 // 使用制定的配置项和数据显示图表
mapBoxEchart.setOption(option); mapBoxEchart.setOption(option,true);
// echart图表自适应 // // 窗口大小改变时，重新渲染图表
// window.addEventListener('resize', function() { window.addEventListener('resize',function() {
// mapBoxEchart.resize(); mapBoxEchart.resize();
// }); }, 200);
}, },
} }
} }

14
src/views/wel/components/outputTable.vue
Unescape View File

@ -47,18 +47,8 @@ export default {
name:'王新宽', name:'王新宽',
time:'2025-08-10 15:23:05' time:'2025-08-10 15:23:05'
}, },
{
no:'21E8-154-1524-E6',
num:15,
name:'崔殿龙',
time:'2025-08-08 11:21:23'
},
{
no:'21E8-154-1524-E5',
num:8,
name:'范东辉',
time:'2025-08-04 11:12:23'
}
] ]
} }
} }

20
src/views/wel/components/workbase.vue
Unescape View File

@ -4,7 +4,7 @@
<div class="left_top"> <div class="left_top">
<!-- <div class="top_title">欢迎回来！</div> --> <!-- <div class="top_title">欢迎回来！</div> -->
<statistics-data></statistics-data> <statistics-data></statistics-data>
<efficiency></efficiency> <efficiency v-if="showEcharts"></efficiency>
</div> </div>
<div class="left_bottom"> <div class="left_bottom">
<div class="left_box"> <div class="left_box">
@ -36,6 +36,7 @@ import quickAccess from './quickAccess.vue';
import statisticsTable from './statisticsTable.vue'; import statisticsTable from './statisticsTable.vue';
import notice from './notice.vue'; import notice from './notice.vue';
import outputTable from './outputTable.vue'; import outputTable from './outputTable.vue';
// import { setting } from '@/api/system/tenant';
export default { export default {
components:{ components:{
statisticsData, statisticsData,
@ -48,7 +49,21 @@ export default {
}, },
data(){ data(){
return{ return{
showEcharts:true
}
},
computed: {
styleRadio() {
console.log('this.$store.state.setting.styleRadio',this.$store.state.common.setting)
return this.$store.state.common.setting.styleRadio;
},
},
watch:{
styleRadio(newVal,oldVal){
this.showEcharts = false
this.$nextTick(() =>{
this.showEcharts = true
})
} }
}, },
mounted(){ mounted(){
@ -63,6 +78,7 @@ export default {
.container{ .container{
width: 98%; width: 98%;
height: 100%; height: 100%;
overflow: hidden;
// background: #fff; // background: #fff;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;

Write Preview
Loading…
Cancel
Save