-
+
@@ -67,6 +67,10 @@
type: Boolean,
default: false
},
+ gridWidth: {
+ type: Number,
+ default: 120
+ },
details: {
type: Boolean,
default: false
diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue
index 114cfb2..9b7cc4f 100644
--- a/src/components/ShowFile/ShowFile.vue
+++ b/src/components/ShowFile/ShowFile.vue
@@ -30,7 +30,7 @@
-
+
@@ -209,20 +209,22 @@
>
-
-
+
+
+
+
+
+
+
+
@@ -338,75 +340,35 @@
element-loading-text="文件加载中"
element-loading-spinner="el-icon-loading"
element-loading-background="#f6f7fa88">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
-
-
- {{ item.w + ' x ' + item.h }}
-
-
- {{ item.name }}
-
-
+
{{ item.name }}
-
@@ -798,6 +760,7 @@ export default {
grid: this.defaultGrid,
vmode: this.defaultGrid ? 'grid' : 'list',
gridColumnNum: -1,
+ gridColumnWidth: 120,
gridHoverItemIndex: -1,
gridHoverIntermediate: -1,
allChecked: false,
@@ -823,7 +786,8 @@ export default {
selectOrgin: -1,// 选择起点(主要用于按住shift键多选)
selectEnd: -1,// 选择终点
selectPin: false,// 默认false,不按住
- isCmd: false,// 是否按住了command键
+ isCmd: false,// 是否按住了command(control)键
+ isCmdA: false, // 是否按住了command(control) + A 键
dragElementList: [],
drawFlag: false,
fileListScrollTop: 0,
@@ -883,27 +847,8 @@ export default {
}
// 获取键盘事件
- window.addEventListener('keydown', event => {
- const isMac = navigator.platform.startsWith('Mac');
- const {key, c, keyCode, ctrlKey, metaKey} = event;
- this.isCmd = isMac && metaKey || !isMac && ctrlKey;
- // 按住shift建
- if (event.keyCode === 16 && event.shiftKey) {
- this.selectPin = true
- }
- })
-
- window.addEventListener('keyup', event => {
-
- const isMac = navigator.platform.startsWith('Mac');
- const {key, c, keyCode, ctrlKey, metaKey} = event;
- this.isCmd = isMac && metaKey || !isMac && ctrlKey;
-
- // 松开shift建
- if (event.keyCode === 16) {
- this.selectPin = false
- }
- })
+ window.addEventListener('keydown', event => this.keydown(event))
+ window.addEventListener('keyup', event => this.keyup(event))
// 加载布局
if (this.$route.query.vmode) {
@@ -936,7 +881,9 @@ export default {
Bus.$on('msg/file/change', (msg) => this.onmessage(msg))
},
destroyed() {
- window.removeEventListener('popstate', this.goBack, false);
+ window.removeEventListener('keydown', this.keydown, false)
+ window.removeEventListener('keyup', this.keydown, false)
+ window.removeEventListener('popstate', this.goBack, false)
if (this.stompClient) {
this.stompClient.unsubscribe()
}
@@ -971,6 +918,33 @@ export default {
}
},
methods: {
+ keydown(event) {
+ const isMac = navigator.platform.startsWith('Mac');
+ const {key, c, keyCode, ctrlKey, metaKey} = event;
+ this.isCmd = isMac && metaKey || !isMac && ctrlKey;
+ // 按住shift建
+ if (event.keyCode === 16 && event.shiftKey) {
+ this.selectPin = true
+ }
+ if(this.isCmd && keyCode == 65) {
+ this.$nextTick(() => {
+ if(this.$refs.fileListTable) {
+ this.$refs.fileListTable.toggleAllSelection()
+ }
+ })
+ event.preventDefault()
+ event.stopPropagation()
+ }
+ },
+ keyup(event) {
+ const isMac = navigator.platform.startsWith('Mac');
+ const {key, c, keyCode, ctrlKey, metaKey} = event;
+ this.isCmd = isMac && metaKey || !isMac && ctrlKey;
+ // 松开shift建
+ if (event.keyCode === 16) {
+ this.selectPin = false
+ }
+ },
onmessage(msg) {
let fileDoc = JSON.parse(msg.body)
const url = msg.headers.url
@@ -1048,10 +1022,11 @@ export default {
let clientWidth = container.clientWidth
this.clientHeight = document.documentElement.clientHeight - this.lessClientHeight
if (this.queryFileType === 'image') {
- this.gridColumnNum = Math.round((clientWidth-10)/145)
+ this.gridColumnNum = Math.round((clientWidth-10)/165)
} else {
this.gridColumnNum = Math.round((clientWidth-10)/135)
}
+ this.gridColumnWidth = (clientWidth - 11 * this.gridColumnNum) / this.gridColumnNum - 4.5
if(clientWidth < 900){
this.showUpdateDateItem = false
} else {
@@ -1086,9 +1061,11 @@ export default {
}
let evt = window.event || e
if (_this.grid) {
- itemClassName = 'van-grid-item van-grid-item--square'
+ itemClassName = 'van-grid-item__content van-grid-item__content--center van-grid-item__content--square'
}
- let throughRow = e.path.find(path => {
+ console.log(e)
+ const elPath = e.path || (e.composedPath && e.composedPath())
+ let throughRow = elPath.find(path => {
if (path.className === itemClassName) {
return path
}
@@ -1099,11 +1076,19 @@ export default {
if (evt.button !== 0) {
return
}
- _this.dragElementList.forEach(element => {
- _this.$refs.fileListTable.toggleRowSelection([{row: _this.fileList[element.rowIndex], selected: false}])
- })
- const drawOffsetTop = getElementToPageTop(draw)
- const drawOffsetLeft = getElementToPageLeft(draw)
+ if (!_this.isCmd && !_this.selectPin) {
+ let index = -1
+ if (_this.grid) {
+ index = elPath.findIndex(el => el.className === 'van-grid-item__content van-grid-item__content--center van-grid-item__content--square')
+ } else {
+ index = elPath.findIndex(el => el.className === 'plTableBox')
+ }
+ if(index < 0){
+ _this.dragElementList.forEach(element => {
+ _this.$refs.fileListTable.clearSelection()
+ })
+ }
+ }
let scrollTop = draw.scrollTop || draw.scrollTop
let scrollLeft = draw.scrollLeft || draw.scrollLeft
startX = evt.clientX + scrollLeft
@@ -1137,7 +1122,7 @@ export default {
return
}
const drawRectangle = $$(wId)
- if (drawRectangle && retcTop >= drawOffsetTop) {
+ if (drawRectangle) {
noScroll()
drawRectangle.style.left = retcLeft + 'px'
drawRectangle.style.top = retcTop + 'px'
@@ -1315,9 +1300,9 @@ export default {
if (rectangle) {
document.getElementById('v-draw-rectangle').removeChild(rectangle)
}
-
- dragged = e.path[0]
- draggedIndex = e.path[0].rowIndex
+ const elPath = e.path || (e.composedPath && e.composedPath())
+ dragged = elPath[0]
+ draggedIndex = elPath[0].rowIndex
// 只有选中的才能拖拽
_this.cellMouseIndex = -1
// dragged.style.cursor = 'grabbing'
@@ -1342,12 +1327,13 @@ export default {
// 判断经过了那个元素
let judgThroughDom = function (e, d) {
let throughRow = null
+ const elPath = e.path || (e.composedPath && e.composedPath())
if (_this.grid) {
- if (e.path[0].className === gridItemChildenClassName) {
+ if (elPath[0].className === gridItemChildenClassName) {
// throughRow 表示被拖动的元素正在哪一行上
return throughRow
} else {
- throughRow = e.path.find(path => {
+ throughRow = elPath.find(path => {
if (path.className === gridItemChildenClassName) {
return path
}
@@ -1377,9 +1363,9 @@ export default {
}
return throughRow
} else {
- if (e.path[0].tagName === 'TD') {
+ if (elPath[0].tagName === 'TD') {
// throughRow 表示被拖动的元素正在哪一行上
- throughRow = e.path.find(path => {
+ throughRow = elPath.find(path => {
if (path.className === 'el-table__row') {
return path
}
@@ -3095,7 +3081,7 @@ export default {
}
.info-statistics {
- padding: 5px 0;
+ padding: 5px 15px;
float: right;
width: 30%;
display: -webkit-box;
@@ -3166,6 +3152,7 @@ export default {
>>> .van-grid-item__content {
background-size: cover;
background-position: center;
+ padding: 0;
}
.vmode{
padding: 5px 10px;
diff --git a/src/styles/home-index.scss b/src/styles/home-index.scss
index deab8f8..6fd917e 100644
--- a/src/styles/home-index.scss
+++ b/src/styles/home-index.scss
@@ -1,7 +1,7 @@
.dashboard {
&-container {
min-width: 500px;
- margin: 10px 10px 10px 15px;
+ margin: 10px 0px 0px 0px;
}
&-text {
font-size: 30px;
@@ -285,7 +285,7 @@
}
/deep/ .van-grid-item__content .svg-icon{
- font-size: 4rem;
+ font-size: 5rem;
}
/deep/ .grid-item-text {
text-align: center;
@@ -296,6 +296,9 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
+ position: absolute;
+ padding: 0 5px 0 5px;
+ bottom: 5px;
}
/deep/ .grid-item-text-image {
position: absolute;
@@ -307,11 +310,8 @@
top: 70%;
color: #ffffff;
}
-/deep/ .grid-item-text:hover {
- color: #19ACF9;
-}
/deep/ .grid-time {
- border-radius: 10px;
+ border-radius: 5px;
padding: 0 8px;
border: solid 1px #ccc0;
.grid-item-checkbox {
@@ -322,16 +322,19 @@
}
.grid-item-icon{
text-align: center;
- position: relative;
- margin: 9px auto 0;
- width: 84px;
- height: 84px;
+ position: absolute;
+ top: 5px;
+ //margin: 9px auto 0;
+ //width: 84px;
+ //height: 84px;
}
.grid-item-icon-image {
- width: calc(100% + 16px);
+ width: 100%;
height: 100%;
- border-radius: 10px;
+ top: 0px;
+ border-radius: 5px;
margin: 0;
+ -webkit-backdrop-filter: contrast(0.5);
backdrop-filter: contrast(0.5);
}
}