|
|
@@ -9,7 +9,7 @@
|
|
|
<div class="v-widget-header">
|
|
|
<div class="v-widget-header-left"><button type="button"
|
|
|
class="v-btn v-btn-styleless v-btn-grey v-btn-dropdown"><span>
|
|
|
- <div class="v-widget-header-tool-icon add"></div>
|
|
|
+ <div class="v-widget-header-tool-icon add" @click.stop="selectWidgetItem"></div>
|
|
|
</span>
|
|
|
</button></div>
|
|
|
<div class="v-widget-header-right">
|
|
|
@@ -28,22 +28,23 @@
|
|
|
<div class="v-trap-focus-body">
|
|
|
<div tabindex="0" role="application" class="v-trap-focus-indicator"></div>
|
|
|
<div class="v-widget-items-wrapper">
|
|
|
- <div class="v-ps show ps--active-y" style="overflow: scroll;">
|
|
|
- <div class="v-widget-list">
|
|
|
- <Copy></Copy>
|
|
|
- <NewLog></NewLog>
|
|
|
- <ChangeLog></ChangeLog>
|
|
|
- <ScheduledTask></ScheduledTask>
|
|
|
- <ConnectedUser></ConnectedUser>
|
|
|
- <ResourceMonitor></ResourceMonitor>
|
|
|
+ <div class="v-ps show ps--active-y">
|
|
|
+ <!-- <div class="v-widget-list" style="overflow-y:scroll;height:100%" @scroll="scrollList"> -->
|
|
|
+ <div class="v-widget-list" @scroll="scrollList">
|
|
|
<RunningState></RunningState>
|
|
|
+ <ResourceMonitor></ResourceMonitor>
|
|
|
<Storage></Storage>
|
|
|
+ <ConnectedUser></ConnectedUser>
|
|
|
+ <ScheduledTask></ScheduledTask>
|
|
|
+ <ChangeLog></ChangeLog>
|
|
|
+ <NewLog></NewLog>
|
|
|
+ <Copy></Copy>
|
|
|
</div>
|
|
|
<div class="ps__rail-x" style="left: 0px; bottom: 0px;">
|
|
|
<div class="ps__thumb-x" tabindex="0" style="left: 0px; width: 0px;"></div>
|
|
|
</div>
|
|
|
<div class="ps__rail-y" style="top: 0px; right: 0px; height: 424px;">
|
|
|
- <div class="ps__thumb-y" tabindex="0" style="top: 0px; height: 104px;"></div>
|
|
|
+ <div class="ps__thumb-y" tabindex="0" style="top: 0px;height: 104px;display:none;" @mousedown="mousedownProgress"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -58,46 +59,223 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Copy from './Copy'
|
|
|
-import NewLog from './NewLog'
|
|
|
-import ChangeLog from './ChangeLog'
|
|
|
-import ScheduledTask from './ScheduledTask'
|
|
|
-import ConnectedUser from './ConnectedUser'
|
|
|
-import ResourceMonitor from './ResourceMonitor'
|
|
|
import RunningState from './RunningState'
|
|
|
+import ResourceMonitor from './ResourceMonitor'
|
|
|
import Storage from './Storage'
|
|
|
+import ConnectedUser from './ConnectedUser'
|
|
|
+import ScheduledTask from './ScheduledTask'
|
|
|
+import ChangeLog from './ChangeLog'
|
|
|
+import NewLog from './NewLog'
|
|
|
+import Copy from './Copy'
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
zIndex: 9040,
|
|
|
cls:'',
|
|
|
+ clickMouseY:0,
|
|
|
+ lastY:0,
|
|
|
+ nextY:0,
|
|
|
+ html:'<RunningState></RunningState>',
|
|
|
+ portalDetail:{
|
|
|
+ display: 'none',
|
|
|
+ detailMessageList:[
|
|
|
+ {
|
|
|
+ id:0,
|
|
|
+ title:'系统状况',
|
|
|
+ cls:'v-menu-item-select-selected selected active',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:1,
|
|
|
+ title:'资源监控',
|
|
|
+ cls:'v-menu-item-select-selected selected',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:2,
|
|
|
+ title:'存储',
|
|
|
+ cls:'',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:3,
|
|
|
+ title:'已连接用户',
|
|
|
+ cls:'',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:4,
|
|
|
+ title:'计划的任务',
|
|
|
+ cls:'',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:5,
|
|
|
+ title:'文件更改日志',
|
|
|
+ cls:'',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id:6,
|
|
|
+ title:'最新日志',
|
|
|
+ cls:'',
|
|
|
+ },{
|
|
|
+ id:7,
|
|
|
+ title:'备份',
|
|
|
+ cls:'',
|
|
|
+ }
|
|
|
+
|
|
|
+ ]
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
components:{
|
|
|
- Copy,
|
|
|
- NewLog,
|
|
|
- ChangeLog,
|
|
|
- ScheduledTask,
|
|
|
- ConnectedUser,
|
|
|
- ResourceMonitor,
|
|
|
RunningState,
|
|
|
- Storage
|
|
|
+ ResourceMonitor,
|
|
|
+ Storage,
|
|
|
+ ConnectedUser,
|
|
|
+ ScheduledTask,
|
|
|
+ ChangeLog,
|
|
|
+ NewLog,
|
|
|
+ Copy,
|
|
|
|
|
|
},
|
|
|
mounted(){
|
|
|
this.$bus.on("changeFixWindowZIndex",this.changeFixWindowZIndex)
|
|
|
+ let el = document.querySelector('.ps__thumb-y')
|
|
|
+ let el1 = document.querySelector('.v-widget-list')
|
|
|
+ el.addEventListener('mouseup',this.mouseupProgress)
|
|
|
+ this.$bus.on("showOrHiddenWidgetItem",this.showOrHiddenWidgetItem)
|
|
|
+ this.$bus.on("changeThumbHeight",this.changeThumbHeight)
|
|
|
},
|
|
|
methods:{
|
|
|
- clickFixWindow(){
|
|
|
- if(this.zIndex == 9040) this.zIndex = 19000
|
|
|
- this.cls = 'active-win'
|
|
|
- },
|
|
|
- changeFixWindowZIndex(){
|
|
|
- this.zIndex = 9040
|
|
|
- if(this.cls != '') this.cls = ''
|
|
|
- }
|
|
|
+ //点击固定窗口
|
|
|
+ clickFixWindow(){
|
|
|
+ if(this.zIndex == 9040) this.zIndex = 13000
|
|
|
+ this.cls = 'active-win'
|
|
|
+ },
|
|
|
+ // 修改changeFixWindow
|
|
|
+ changeFixWindowZIndex(){
|
|
|
+ this.zIndex = 9040
|
|
|
+ if(this.cls != '') this.cls = ''
|
|
|
+ },
|
|
|
+ //点击进度条
|
|
|
+ mousedownProgress(e){
|
|
|
+ this.clickMouseY = e.offsetY
|
|
|
+ let el = document.querySelector('.ps__thumb-y')
|
|
|
+ el.addEventListener("mousemove",this.moveProgress)
|
|
|
+ },
|
|
|
+ //移动进度条
|
|
|
+ moveProgress(e){
|
|
|
+ let el = document.querySelector('.ps__thumb-y')
|
|
|
+ let el1 = document.querySelector('.ps__rail-y')
|
|
|
+ let el2 = document.querySelector('.v-widget-list')
|
|
|
+ let moveY
|
|
|
+ if (e.clientY < this.lastY){
|
|
|
+ moveY = this.nextY + (e.clientY - this.lastY)
|
|
|
+ }else{
|
|
|
+ moveY = e.clientY - e.offsetY -71
|
|
|
+ }
|
|
|
+ if(moveY < 0 ) moveY = 0
|
|
|
+ console.log(el.style.top,e.offsetY,el2.offsetHeight)
|
|
|
+ if(moveY > (el2.offsetHeight -this.clickMouseY)){
|
|
|
+ moveY = el2.offsetHeight -this.clickMouseY
|
|
|
+ }
|
|
|
+ // if(el.style.height === '280px'){
|
|
|
+ // if(moveY > 143.5){
|
|
|
+ // moveY = 143.5
|
|
|
+ // }
|
|
|
+ // }else if(el.style.height === '210px'){
|
|
|
+ // if(moveY > 214){
|
|
|
+ // moveY = 214
|
|
|
+ // }
|
|
|
+ // }else if(el.style.height === '167px'){
|
|
|
+ // if(moveY > 265){
|
|
|
+ // moveY = 265
|
|
|
+ // }
|
|
|
+ // }else if(el.style.height === '139px'){
|
|
|
+ // // if(moveY > 284.5){
|
|
|
+ // // moveY = 284.5
|
|
|
+ // // }
|
|
|
+ // }
|
|
|
+
|
|
|
+ let moveY2 = - (el2.offsetHeight / el1.offsetHeight ) * moveY
|
|
|
+ // console.log(moveY,moveY2,el2.offsetHeight / el1.offsetHeight)
|
|
|
+ el.style.top = moveY +'px'
|
|
|
+ el2.style.top = moveY2 +'px'
|
|
|
+ el.addEventListener('mouseup',this.mouseupProgress)
|
|
|
+ // el.addEventListener('mouseleave',this.mouseupProgress)
|
|
|
+ el1.addEventListener('mouseleave',this.mouseupProgress)
|
|
|
+ this.lastY = e.clientY
|
|
|
+ this.nextY = moveY
|
|
|
+ },
|
|
|
+ // 进度条鼠标抬起/离开
|
|
|
+ mouseupProgress(){
|
|
|
+ let el = document.querySelector('.ps__thumb-y')
|
|
|
+ let el2 = document.querySelector('.v-widget-list')
|
|
|
+ el.removeEventListener('mousemove',this.moveProgress)
|
|
|
+ el.style.top = '0px'
|
|
|
+ el2.style.top = '0px'
|
|
|
+ },
|
|
|
+ // 滚动窗口列表
|
|
|
+ scrollList(){
|
|
|
+ console.log(1111)
|
|
|
+ },
|
|
|
+ // 点击勾选小窗口的加号
|
|
|
+ selectWidgetItem(){
|
|
|
+ this.$bus.emit('showOrHiddenSelectWidgetItem',this.portalDetail)
|
|
|
+ window.onclick = (e)=>{
|
|
|
+ e.stopPropagation()
|
|
|
+ this.$bus.emit('showOrHiddenSelectWidgetItem','none')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 点击选择框的每一项
|
|
|
+ showOrHiddenWidgetItem(obj){
|
|
|
+ // cls:'v-widget-item sds-window-v5 syno-sds-widget-item',
|
|
|
+ // index: detailMessageIndex
|
|
|
+ let widgetItemArray = document.querySelectorAll('.v-widget-item')
|
|
|
+ Array.from(widgetItemArray)[obj.index].className = obj.cls
|
|
|
+ // Array.from(widgetItemArray).forEach((item,index)=>{
|
|
|
+ this.portalDetail.detailMessageList[obj.index].cls = obj.cls1
|
|
|
+ this.portalDetail.detailMessageList.forEach(item=>{
|
|
|
+ if(item.cls === 'v-menu-item-select-selected selected active'){
|
|
|
+ item.cls = 'v-menu-item-select-selected selected'
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let index = this.portalDetail.detailMessageList.findIndex(item=>{
|
|
|
+ return item.cls === 'v-menu-item-select-selected selected'
|
|
|
+ })
|
|
|
+ if(index != -1){
|
|
|
+ this.portalDetail.detailMessageList[index].cls = 'v-menu-item-select-selected selected active'
|
|
|
+ }
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ // 跟随可视小窗口的个数改变进度条高度
|
|
|
+ changeThumbHeight(selectedNum) {
|
|
|
+ let el = document.querySelector('.ps__thumb-y')
|
|
|
+ if(selectedNum > 2){
|
|
|
+ el.style.display = 'block'
|
|
|
+ console.log(selectedNum)
|
|
|
+ if(selectedNum >= 6) {
|
|
|
+ selectedNum = 6
|
|
|
+ }
|
|
|
+ console.log(selectedNum)
|
|
|
+ el.style.height = (7 - selectedNum) * 70 + 'px'
|
|
|
+ console.log((7 - selectedNum) * 70)
|
|
|
+ // if(selectedNum == 3){
|
|
|
+ // el.style.height = '280px'
|
|
|
+ // }else if(selectedNum == 4){
|
|
|
+ // el.style.height = '210px'
|
|
|
+ // }else if(selectedNum == 5){
|
|
|
+ // el.style.height = '167px'
|
|
|
+ // }else if(selectedNum >= 6){
|
|
|
+ // el.style.height = '139px'
|
|
|
+ // }
|
|
|
+ }else{
|
|
|
+ el.style.display = 'none'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.$bus.off("changeFixWindowZIndex",this.changeFixWindowZIndex)
|
|
|
},
|
|
|
name:'FixWindow',
|
|
|
-
|
|
|
}
|
|
|
-</script>
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+
|
|
|
+</style>
|
liupeng