forked from github/dataease
fit2cloudrd
GitHub
commit
367d3d773d
14
README.md
14
README.md
@ -24,6 +24,20 @@ DataEase 是开源的数据可视化分析工具，帮助用户快速分析数
|
||||
- 秒级响应：集成 Apache Doris，超大数据量下秒级查询返回延时；
|
||||
- 安全分享：支持多种数据分享方式，确保数据安全。
|
||||
|
||||
### DataEase 已支持的数据源:
|
||||
|
||||
- Excel
|
||||
- MySQL
|
||||
- Oracle
|
||||
- SQL Server
|
||||
- PostgreSQL
|
||||
- Elasticsearch
|
||||
- MariaDB
|
||||
- Apache Doris
|
||||
- ClickHouse
|
||||
|
||||
> 更多数据源支持持续增加中...
|
||||
|
||||
## UI 展示
|
||||
|
||||
|
||||
|
||||
@ -15,7 +15,9 @@ import org.springframework.stereotype.Service;
|
||||
import org.springframework.transaction.annotation.Transactional;
|
||||
import javax.annotation.Resource;
|
||||
import java.util.ArrayList;
|
||||
import java.util.HashSet;
|
||||
import java.util.List;
|
||||
import java.util.Set;
|
||||
import java.util.stream.Collectors;
|
||||
|
||||
@Service
|
||||
@ -117,8 +119,10 @@ public class DynamicMenuServiceImpl implements DynamicMenuService {
|
||||
|
||||
@Transactional
|
||||
public void syncPluginMenu() {
|
||||
List<PluginSysMenu> pluginSysMenuList = PluginUtils.pluginMenus();
|
||||
extPluginSysMenuMapper.deletePluginMenu();
|
||||
List<PluginSysMenu> pluginSysMenuList = PluginUtils.pluginMenus();
|
||||
Set<PluginSysMenu> pluginSysMenuSet = new HashSet<>(pluginSysMenuList);
|
||||
pluginSysMenuList = new ArrayList<>(pluginSysMenuSet);
|
||||
if(CollectionUtils.isNotEmpty(pluginSysMenuList)){
|
||||
extPluginSysMenuMapper.savePluginMenu(pluginSysMenuList);
|
||||
}
|
||||
|
||||
@ -231,16 +231,17 @@ public class EsProvider extends DatasourceProvider {
|
||||
throw new Exception(JSONObject.parseObject(response).getJSONObject("error").getString("reason"));
|
||||
}
|
||||
String version = JSONObject.parseObject(response).getJSONObject("version").getString("number");
|
||||
if(Integer.valueOf(version.substring(0,1)) < 6 ){
|
||||
|
||||
if(Integer.valueOf(version.split("\\.")[0]) < 6 ){
|
||||
throw new Exception(Translator.get("i18n_es_limit"));
|
||||
}
|
||||
if(Integer.valueOf(version.substring(2,3)) < 3 ){
|
||||
if(Integer.valueOf(version.split("\\.")[1]) < 3 ){
|
||||
throw new Exception(Translator.get("i18n_es_limit"));
|
||||
}
|
||||
if(Integer.valueOf(version.substring(0,1)) == 6 ) {
|
||||
if(Integer.valueOf(version.split("\\.")[0]) == 6 ) {
|
||||
esConfiguration.setUri("_xpack/sql");
|
||||
}
|
||||
if(Integer.valueOf(version.substring(0,1)) == 7 ) {
|
||||
if(Integer.valueOf(version.split("\\.")[0]) == 7 ) {
|
||||
esConfiguration.setUri("_sql");
|
||||
}
|
||||
datasourceRequest.getDatasource().setConfiguration(new Gson().toJson(esConfiguration));
|
||||
|
||||
@ -959,12 +959,12 @@ public class ExtractDataService {
|
||||
outputFields[datasetTableFields.size()] = textFileField;
|
||||
|
||||
textFileOutputMeta.setOutputFields(outputFields);
|
||||
}else if (datasource.getType().equalsIgnoreCase(DatasourceTypes.sqlServer.name()) || datasource.getType().equalsIgnoreCase(DatasourceTypes.pg.name())){
|
||||
}else if (datasource.getType().equalsIgnoreCase(DatasourceTypes.sqlServer.name()) || datasource.getType().equalsIgnoreCase(DatasourceTypes.pg.name()) || datasource.getType().equalsIgnoreCase(DatasourceTypes.mysql.name())){
|
||||
TextFileField[] outputFields = new TextFileField[datasetTableFields.size() + 1];
|
||||
for(int i=0;i< datasetTableFields.size();i++){
|
||||
TextFileField textFileField = new TextFileField();
|
||||
textFileField.setName(datasetTableFields.get(i).getDataeaseName());
|
||||
if (datasetTableFields.get(i).getDeExtractType() == 1) {
|
||||
if (datasetTableFields.get(i).getDeExtractType() == DeTypeConstants.DE_TIME) {
|
||||
textFileField.setType("String");
|
||||
textFileField.setFormat("yyyy-MM-dd HH:mm:ss");
|
||||
} else {
|
||||
@ -984,7 +984,7 @@ public class ExtractDataService {
|
||||
for(int i=0;i< datasetTableFields.size();i++){
|
||||
TextFileField textFileField = new TextFileField();
|
||||
textFileField.setName(datasetTableFields.get(i).getDataeaseName());
|
||||
if (datasetTableFields.get(i).getDeExtractType() == 2) {
|
||||
if (datasetTableFields.get(i).getDeExtractType() == DeTypeConstants.DE_INT) {
|
||||
textFileField.setType("Integer");
|
||||
textFileField.setFormat("0");
|
||||
} else {
|
||||
|
||||
@ -1,948 +0,0 @@
|
||||
import _ from 'lodash'
|
||||
import $ from 'jquery'
|
||||
|
||||
let positionBox = []
|
||||
let coordinates = [] // 坐标点集合
|
||||
|
||||
let lastTask
|
||||
let isOverlay = false // 是否正在交换位置
|
||||
let moveTime = 80 // 移动动画时间
|
||||
|
||||
let itemMaxY = 0
|
||||
let itemMaxX = 0
|
||||
|
||||
function debounce(func, time) {
|
||||
if (!isOverlay) {
|
||||
(function(t) {
|
||||
isOverlay = true
|
||||
setTimeout(function() {
|
||||
t()
|
||||
setTimeout(function() {
|
||||
isOverlay = false
|
||||
if (lastTask !== undefined) {
|
||||
debounce(lastTask, time)
|
||||
}
|
||||
}, moveTime)
|
||||
}, time)
|
||||
})(func)
|
||||
lastTask = undefined
|
||||
} else {
|
||||
lastTask = func
|
||||
}
|
||||
}
|
||||
|
||||
function scrollScreen(e) {
|
||||
if (e.clientY + 50 >= window.innerHeight) {
|
||||
const body = $(document.body)
|
||||
body.scrollTop(body.scrollTop() + 20)
|
||||
} else if (e.clientY <= 150) {
|
||||
const body = $(document.body)
|
||||
body.scrollTop(body.scrollTop() - 20)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置位置盒子
|
||||
*
|
||||
*/
|
||||
function resetPositionBox() {
|
||||
// 根据当前容器的宽度来决定多少列
|
||||
itemMaxX = this.maxCell
|
||||
const rows = 1 // 初始100行，后面根据需求会自动增加
|
||||
for (let i = 0; i < rows; i++) {
|
||||
const row = []
|
||||
|
||||
for (let j = 0; j < this.maxCell; j++) {
|
||||
row.push({
|
||||
el: false
|
||||
})
|
||||
}
|
||||
|
||||
positionBox.push(row)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 填充位置盒子
|
||||
*
|
||||
* @param {any} item
|
||||
*/
|
||||
function addItemToPositionBox(item) {
|
||||
const pb = positionBox
|
||||
if (item.x <= 0 || item.y <= 0) return
|
||||
|
||||
for (let i = item.x - 1; i < item.x - 1 + item.sizex; i++) {
|
||||
for (let j = item.y - 1; j < item.y - 1 + item.sizey; j++) {
|
||||
if (pb[j][i]) {
|
||||
pb[j][i].el = item
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fillPositionBox(maxY) {
|
||||
const pb = positionBox
|
||||
maxY += 2
|
||||
for (let j = 0; j < maxY; j++) {
|
||||
if (pb[j] === undefined) {
|
||||
const row = []
|
||||
for (let i = 0; i < itemMaxX; i++) {
|
||||
row.push({
|
||||
el: false
|
||||
})
|
||||
}
|
||||
pb.push(row)
|
||||
}
|
||||
}
|
||||
|
||||
itemMaxY = maxY
|
||||
|
||||
$(this.$el).css('height', ((itemMaxY + 2) * this.cellHeight) + 'px')
|
||||
}
|
||||
|
||||
function removeItemFromPositionBox(item) {
|
||||
const pb = positionBox
|
||||
if (item.x <= 0 || item.y <= 0) return
|
||||
for (let i = item.x - 1; i < item.x - 1 + item.sizex; i++) {
|
||||
for (let j = item.y - 1; j < item.y - 1 + item.sizey; j++) {
|
||||
if (pb[j][i]) {
|
||||
pb[j][i].el = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 重新计算宽度，使最小单元格能占满整个容器
|
||||
*
|
||||
*/
|
||||
function recalcCellWidth() {
|
||||
const containerNode = this.$refs['container']
|
||||
const containerWidth = containerNode.offsetWidth
|
||||
|
||||
const cells = Math.round(containerWidth / this.cellWidth)
|
||||
this.maxCell = cells
|
||||
|
||||
// if (containerWidth % this.cellWidth !=== 0) {
|
||||
// this.cellWidth += containerWidth % this.cellWidth / cells;
|
||||
// }
|
||||
}
|
||||
|
||||
function init() {
|
||||
this.cellWidth = this.baseWidth + this.baseMarginLeft
|
||||
this.cellHeight = this.baseHeight + this.baseMarginTop
|
||||
|
||||
positionBox = []
|
||||
coordinates = [] // 坐标点集合
|
||||
|
||||
lastTask = undefined
|
||||
isOverlay = false // 是否正在交换位置
|
||||
moveTime = 80 // 移动动画时间
|
||||
|
||||
itemMaxY = 0
|
||||
itemMaxX = 0
|
||||
|
||||
const vm = this
|
||||
|
||||
recalcCellWidth.call(this)
|
||||
|
||||
resetPositionBox.call(this)
|
||||
|
||||
let i = 0
|
||||
const timeid = setInterval(function() {
|
||||
if (i >= vm.yourList.length) {
|
||||
clearInterval(timeid)
|
||||
vm.$nextTick(function() {
|
||||
vm.moveAnimate = true
|
||||
})
|
||||
} else {
|
||||
const item = vm.yourList[i]
|
||||
addItem.call(vm, item, i)
|
||||
i++
|
||||
}
|
||||
}, 1)
|
||||
vm.renderOk = true
|
||||
}
|
||||
|
||||
function resizePlayer(item, newSize) {
|
||||
const vm = this
|
||||
removeItemFromPositionBox(item)
|
||||
|
||||
const belowItems = findBelowItems.call(this, item)
|
||||
|
||||
_.forEach(belowItems, function(upItem) {
|
||||
const canGoUpRows = canItemGoUp(upItem)
|
||||
|
||||
if (canGoUpRows > 0) {
|
||||
moveItemUp.call(vm, upItem, canGoUpRows)
|
||||
}
|
||||
})
|
||||
|
||||
item.sizex = newSize.sizex
|
||||
item.sizey = newSize.sizey
|
||||
|
||||
if (item.sizex + item.x - 1 > itemMaxX) {
|
||||
item.sizex = itemMaxX - item.x + 1
|
||||
}
|
||||
|
||||
if (item.sizey + item.y > itemMaxY) {
|
||||
fillPositionBox.call(this, item.y + item.sizey)
|
||||
}
|
||||
|
||||
emptyTargetCell.call(this, item)
|
||||
|
||||
addItemToPositionBox.call(this, item)
|
||||
|
||||
changeItemCoord.call(this, item)
|
||||
|
||||
const canGoUpRows = canItemGoUp(item)
|
||||
|
||||
if (canGoUpRows > 0) {
|
||||
moveItemUp.call(this, item, canGoUpRows)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查移动的位置，如果不合法，会自动修改
|
||||
*
|
||||
* @param {any} item
|
||||
* @param {any} position
|
||||
*/
|
||||
function checkItemPosition(item, position) {
|
||||
position = position || {}
|
||||
position.x = position.x || item.x
|
||||
position.y = position.y || item.y
|
||||
|
||||
// 检查位置
|
||||
if (item.x < 1) {
|
||||
item.x = 1
|
||||
}
|
||||
|
||||
// 检查大小
|
||||
if (item.sizex > itemMaxX) {
|
||||
item.sizex = itemMaxX
|
||||
}
|
||||
|
||||
if (item.sizex < 1) {
|
||||
item.sizex = 1
|
||||
}
|
||||
|
||||
if (item.x + item.sizex - 1 > itemMaxX) {
|
||||
item.x = itemMaxX - item.sizex + 1
|
||||
if (item.x < 1) {
|
||||
item.x = 1
|
||||
}
|
||||
}
|
||||
|
||||
if (item.y < 1) {
|
||||
item.y = 1
|
||||
}
|
||||
|
||||
if (item.sizey < 1) {
|
||||
item.sizey = 1
|
||||
}
|
||||
|
||||
if (item.y + item.sizey > itemMaxY - 1) {
|
||||
fillPositionBox.call(this, item.y + item.sizey - 1)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 移动正在拖动的元素
|
||||
*
|
||||
* @param {any} item
|
||||
* @param {any} position
|
||||
*/
|
||||
function movePlayer(item, position) {
|
||||
const vm = this
|
||||
removeItemFromPositionBox(item)
|
||||
|
||||
const belowItems = findBelowItems.call(this, item)
|
||||
|
||||
_.forEach(belowItems, function(upItem) {
|
||||
const canGoUpRows = canItemGoUp(upItem)
|
||||
if (canGoUpRows > 0) {
|
||||
moveItemUp.call(vm, upItem, canGoUpRows)
|
||||
}
|
||||
})
|
||||
|
||||
item.x = position.x
|
||||
item.y = position.y
|
||||
|
||||
checkItemPosition.call(this, item, position)
|
||||
|
||||
emptyTargetCell.call(this, item)
|
||||
|
||||
addItemToPositionBox.call(this, item)
|
||||
|
||||
changeItemCoord.call(this, item)
|
||||
|
||||
const canGoUpRows = canItemGoUp(item)
|
||||
|
||||
if (canGoUpRows > 0) {
|
||||
moveItemUp.call(this, item, canGoUpRows)
|
||||
}
|
||||
}
|
||||
|
||||
function removeItem(index) {
|
||||
const vm = this
|
||||
const item = this.yourList[index]
|
||||
removeItemFromPositionBox(item)
|
||||
|
||||
const belowItems = findBelowItems.call(this, item)
|
||||
|
||||
// $(this.$refs['item' + item._dragId][0]).remove();
|
||||
|
||||
_.forEach(belowItems, function(upItem) {
|
||||
const canGoUpRows = canItemGoUp(upItem)
|
||||
|
||||
if (canGoUpRows > 0) {
|
||||
moveItemUp.call(vm, upItem, canGoUpRows)
|
||||
}
|
||||
})
|
||||
|
||||
this.yourList.splice(index, 1, {})
|
||||
}
|
||||
|
||||
function addItem(item, index) {
|
||||
if (index < 0) {
|
||||
index = this.yourList.length
|
||||
}
|
||||
item._dragId = index
|
||||
|
||||
checkItemPosition.call(this, item, {
|
||||
x: item.x,
|
||||
y: item.y
|
||||
})
|
||||
|
||||
emptyTargetCell.call(this, item)
|
||||
|
||||
addItemToPositionBox.call(this, item)
|
||||
|
||||
const canGoUpRows = canItemGoUp(item)
|
||||
|
||||
if (canGoUpRows > 0) {
|
||||
moveItemUp.call(this, item, canGoUpRows)
|
||||
}
|
||||
|
||||
// 生成坐标点
|
||||
// makeCoordinate.call(this, item);
|
||||
}
|
||||
|
||||
function changeToCoord(left, top, width, height) {
|
||||
return {
|
||||
x1: left,
|
||||
x2: left + width,
|
||||
y1: top,
|
||||
y2: top + height,
|
||||
c1: left + width / 2,
|
||||
c2: top + height / 2
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测有无碰撞，并作出处理
|
||||
*
|
||||
* @param {any} tCoord 比对对象的坐标
|
||||
*/
|
||||
function findClosetCoords(item, tCoord) {
|
||||
if (isOverlay) return
|
||||
let i = coordinates.length
|
||||
let collisionsItem = []
|
||||
while (i--) {
|
||||
const nowCoord = coordinates[i]
|
||||
if (item._dragId === nowCoord.el._dragId) {
|
||||
continue
|
||||
}
|
||||
|
||||
if (tCoord.x2 < nowCoord.x1 || tCoord.x1 > nowCoord.x2 || tCoord.y2 < nowCoord.y1 || tCoord.y1 > nowCoord.y2) {
|
||||
continue
|
||||
} else {
|
||||
collisionsItem.push({
|
||||
centerDistance: Math.sqrt(Math.pow(tCoord.c1 - nowCoord.c1, 2) + Math.pow(tCoord.c2 - nowCoord.c2, 2)),
|
||||
coord: nowCoord
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (collisionsItem.length <= 0) {
|
||||
return
|
||||
}
|
||||
|
||||
isOverlay = true
|
||||
|
||||
collisionsItem = _.sortBy(collisionsItem, 'area')
|
||||
|
||||
movePlayer.call(this, item, {
|
||||
x: collisionsItem[0].coord.el.x,
|
||||
y: collisionsItem[0].coord.el.y
|
||||
})
|
||||
|
||||
setTimeout(function() {
|
||||
isOverlay = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成坐标点
|
||||
*
|
||||
* @param {any} item
|
||||
*/
|
||||
function makeCoordinate(item) {
|
||||
const width = this.cellWidth * (item.sizex) - this.baseMarginLeft
|
||||
const height = this.cellHeight * (item.sizey) - this.baseMarginTop
|
||||
const left = this.cellWidth * (item.x - 1) + this.baseMarginLeft
|
||||
const top = this.cellHeight * (item.y - 1) + this.baseMarginTop
|
||||
|
||||
const coord = {
|
||||
x1: left,
|
||||
x2: left + width,
|
||||
y1: top,
|
||||
y2: top + height,
|
||||
c1: left + width / 2,
|
||||
c2: top + height / 2,
|
||||
el: item
|
||||
}
|
||||
|
||||
coordinates.push(coord)
|
||||
}
|
||||
|
||||
function changeItemCoord(item) {
|
||||
const width = this.cellWidth * (item.sizex) - this.baseMarginLeft
|
||||
const height = this.cellHeight * (item.sizey) - this.baseMarginTop
|
||||
const left = this.cellWidth * (item.x - 1) + this.baseMarginLeft
|
||||
const top = this.cellHeight * (item.y - 1) + this.baseMarginTop
|
||||
|
||||
const coord = {
|
||||
x1: left,
|
||||
x2: left + width,
|
||||
y1: top,
|
||||
y2: top + height,
|
||||
c1: left + width / 2,
|
||||
c2: top + height / 2,
|
||||
el: item
|
||||
}
|
||||
|
||||
const index = _.findIndex(coordinates, function(o) {
|
||||
return o.el._dragId === item._dragId
|
||||
})
|
||||
if (index !== -1) {
|
||||
coordinates.splice(index, 1, coord)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空目标位置的元素
|
||||
*
|
||||
* @param {any} item
|
||||
*/
|
||||
function emptyTargetCell(item) {
|
||||
const vm = this
|
||||
const belowItems = findBelowItems(item)
|
||||
|
||||
_.forEach(belowItems, function(downItem, index) {
|
||||
if (downItem._dragId === item._dragId) return
|
||||
const moveSize = item.y + item.sizey - downItem.y
|
||||
if (moveSize > 0) {
|
||||
moveItemDown.call(vm, downItem, moveSize)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 当前位置的item能否上浮
|
||||
*
|
||||
* @param {any} item
|
||||
* @returns
|
||||
*/
|
||||
function canItemGoUp(item) {
|
||||
let upperRows = 0
|
||||
for (let row = item.y - 2; row >= 0; row--) {
|
||||
for (let cell = item.x - 1; cell < item.x - 1 + item.sizex; cell++) {
|
||||
if (positionBox[row][cell] && positionBox[row][cell].el) {
|
||||
return upperRows
|
||||
}
|
||||
}
|
||||
upperRows++
|
||||
}
|
||||
|
||||
return upperRows
|
||||
}
|
||||
|
||||
/**
|
||||
* 在移动之前，找到当前下移的元素的下面的元素（递归）
|
||||
*
|
||||
* @param {any} items
|
||||
* @param {any} size
|
||||
*/
|
||||
function moveItemDown(item, size) {
|
||||
const vm = this
|
||||
removeItemFromPositionBox(item)
|
||||
|
||||
const belowItems = findBelowItems(item)
|
||||
|
||||
_.forEach(belowItems, function(downItem, index) {
|
||||
if (downItem._dragId === item._dragId) return
|
||||
const moveSize = calcDiff(item, downItem, size)
|
||||
if (moveSize > 0) {
|
||||
moveItemDown.call(vm, downItem, moveSize)
|
||||
}
|
||||
})
|
||||
|
||||
const targetPosition = {
|
||||
y: item.y + size
|
||||
}
|
||||
setPlayerPosition.call(this, item, targetPosition)
|
||||
checkItemPosition.call(this, item, targetPosition)
|
||||
|
||||
addItemToPositionBox.call(this, item)
|
||||
|
||||
changeItemCoord.call(this, item)
|
||||
}
|
||||
|
||||
function setPlayerPosition(item, position) {
|
||||
const vm = this
|
||||
position = position || {}
|
||||
|
||||
const targetX = position.x || item.x
|
||||
const targetY = position.y || item.y
|
||||
|
||||
item.x = targetX
|
||||
item.y = targetY
|
||||
|
||||
if (item.y + item.sizey > itemMaxY) {
|
||||
itemMaxY = item.y + item.sizey
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 寻找子元素到父元素的最大距离
|
||||
*
|
||||
* @param {any} parent
|
||||
* @param {any} son
|
||||
* @param {any} size
|
||||
*/
|
||||
function calcDiff(parent, son, size) {
|
||||
const diffs = []
|
||||
|
||||
for (let i = son.x - 1; i < son.x - 1 + son.sizex; i++) {
|
||||
let temp_y = 0
|
||||
|
||||
for (let j = parent.y - 1 + parent.sizey; j < son.y - 1; j++) {
|
||||
if (positionBox[j][i] && positionBox[j][i].el === false) {
|
||||
temp_y++
|
||||
}
|
||||
}
|
||||
diffs.push(temp_y)
|
||||
}
|
||||
|
||||
const max_diff = Math.max.apply(Math, diffs)
|
||||
size = size - max_diff
|
||||
|
||||
return size > 0 ? size : 0
|
||||
}
|
||||
|
||||
function moveItemUp(item, size) {
|
||||
// console.log('moveItemUp')
|
||||
const vm = this
|
||||
|
||||
removeItemFromPositionBox(item)
|
||||
|
||||
const belowItems = findBelowItems.call(this, item)
|
||||
|
||||
// item.y -= size;
|
||||
setPlayerPosition.call(this, item, {
|
||||
y: item.y - size
|
||||
})
|
||||
|
||||
addItemToPositionBox.call(this, item)
|
||||
|
||||
changeItemCoord.call(this, item)
|
||||
|
||||
_.forEach(belowItems, function(upItem, index) {
|
||||
const moveSize = canItemGoUp(upItem)
|
||||
if (moveSize > 0) {
|
||||
moveItemUp.call(vm, upItem, moveSize)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function findBelowItems(item) {
|
||||
const belowItems = {}
|
||||
for (let cell = item.x - 1; cell < item.x - 1 + item.sizex; cell++) {
|
||||
for (let row = item.y - 1; row < positionBox.length; row++) {
|
||||
const target = positionBox[row][cell]
|
||||
if (target && target.el) {
|
||||
belowItems[target.el._dragId] = target.el
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return _.sortBy(_.values(belowItems), 'y')
|
||||
}
|
||||
|
||||
export default {
|
||||
name: 'vue-power-drag',
|
||||
props: {
|
||||
yourList: {
|
||||
required: true,
|
||||
type: Array // String,Number,Boolean,Function,Object,Array
|
||||
},
|
||||
baseWidth: {
|
||||
required: false,
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
baseHeight: {
|
||||
required: false,
|
||||
type: Number,
|
||||
default: 50
|
||||
},
|
||||
baseMarginLeft: {
|
||||
required: false,
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
baseMarginTop: {
|
||||
required: false,
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
draggable: {
|
||||
required: false,
|
||||
default: true,
|
||||
type: Boolean
|
||||
},
|
||||
dragStart: {
|
||||
required: false,
|
||||
type: Function,
|
||||
default: function() {}
|
||||
},
|
||||
dragging: {
|
||||
required: false,
|
||||
type: Function,
|
||||
default: function() {}
|
||||
},
|
||||
dragEnd: {
|
||||
required: false,
|
||||
type: Function,
|
||||
default: function() {}
|
||||
},
|
||||
resizable: {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
resizeStart: {
|
||||
required: false,
|
||||
type: Function,
|
||||
default: function() {}
|
||||
},
|
||||
resizing: {
|
||||
required: false,
|
||||
type: Function,
|
||||
default: function() {}
|
||||
},
|
||||
resizeEnd: {
|
||||
required: false,
|
||||
type: Function,
|
||||
default: function() {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
renderOk: false,
|
||||
moveAnimate: false,
|
||||
list: [],
|
||||
cellWidth: 0,
|
||||
cellHeight: 0,
|
||||
maxCell: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
positionBox() {
|
||||
return positionBox
|
||||
},
|
||||
coordinates() {
|
||||
return coordinates
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
removeItem: removeItem,
|
||||
startResize(e, item, index) {
|
||||
// console.log('startResize:' + index)
|
||||
if (!this.resizable) return
|
||||
this.resizeStart.call(null, e, item, index)
|
||||
|
||||
// e.preventDefault();
|
||||
const target = $(e.target)
|
||||
|
||||
if (!this.infoBox) {
|
||||
this.infoBox = {}
|
||||
}
|
||||
|
||||
const itemNode = target.parents('.item')
|
||||
|
||||
this.infoBox.resizeItem = item
|
||||
this.infoBox.resizeItemIndex = index
|
||||
},
|
||||
containerMouseDown(e) {
|
||||
// console.log('containerMouseDown:')
|
||||
|
||||
// e.preventDefault();
|
||||
if (!this.infoBox) {
|
||||
this.infoBox = {}
|
||||
}
|
||||
|
||||
this.infoBox.startX = e.pageX
|
||||
this.infoBox.startY = e.pageY
|
||||
},
|
||||
startMove(e, item, index) {
|
||||
// console.log('startMove:' + index)
|
||||
const vm = this
|
||||
// e.preventDefault();
|
||||
|
||||
if (!this.infoBox) {
|
||||
this.infoBox = {}
|
||||
}
|
||||
const infoBox = this.infoBox
|
||||
const target = $(e.target)
|
||||
|
||||
let className = target.attr('class')
|
||||
className = className || ''
|
||||
if (className.indexOf('dragHandle') === -1 && className.indexOf('item') === -1 && className.indexOf('resizeHandle') === -1) {
|
||||
return
|
||||
}
|
||||
|
||||
if (className.includes('resizeHandle')) {
|
||||
|
||||
} else if (this.draggable && (className.includes('dragHandle') || className.includes('item'))) {
|
||||
this.dragStart.call(null, e, item, index)
|
||||
infoBox.moveItem = item
|
||||
infoBox.moveItemIndex = index
|
||||
}
|
||||
|
||||
infoBox.cloneItem = null
|
||||
infoBox.nowItemNode = null
|
||||
|
||||
if (target.attr('class') && target.attr('class').indexOf('item') !== -1) {
|
||||
infoBox.nowItemNode = target
|
||||
infoBox.cloneItem = target.clone()
|
||||
} else {
|
||||
infoBox.nowItemNode = target.parents('.item')
|
||||
infoBox.cloneItem = infoBox.nowItemNode.clone()
|
||||
}
|
||||
infoBox.cloneItem.addClass('cloneNode')
|
||||
|
||||
$(this.$el).append(infoBox.cloneItem)
|
||||
|
||||
infoBox.orignX = infoBox.cloneItem.position().left // 克隆对象原始X位置
|
||||
infoBox.orignY = infoBox.cloneItem.position().top
|
||||
infoBox.oldX = item.x // 实际对象原始X位置
|
||||
infoBox.oldY = item.y
|
||||
infoBox.oldSizeX = item.sizex
|
||||
infoBox.oldSizeY = item.sizey
|
||||
infoBox.orignWidth = infoBox.cloneItem.prop('offsetWidth')
|
||||
infoBox.orignHeight = infoBox.cloneItem.prop('offsetHeight')
|
||||
|
||||
function itemMouseMove(e) {
|
||||
// console.log('itemMouseMove')
|
||||
const moveItem = _.get(infoBox, 'moveItem')
|
||||
const resizeItem = _.get(infoBox, 'resizeItem')
|
||||
|
||||
if (resizeItem) { // 调整大小时
|
||||
// console.log('resizeItem')
|
||||
vm.resizing.call(null, e, resizeItem, resizeItem._dragId)
|
||||
|
||||
vm.$set(resizeItem, 'isPlayer', true)
|
||||
const nowItemIndex = infoBox.resizeItemIndex
|
||||
const cloneItem = infoBox.cloneItem
|
||||
const startX = infoBox.startX
|
||||
const startY = infoBox.startY
|
||||
const oldSizeX = infoBox.oldSizeX
|
||||
const oldSizeY = infoBox.oldSizeY
|
||||
const orignWidth = infoBox.orignWidth
|
||||
const orignHeight = infoBox.orignHeight
|
||||
|
||||
const moveXSize = e.pageX - startX // X方向移动的距离
|
||||
const moveYSize = e.pageY - startY // Y方向移动的距离
|
||||
|
||||
const addSizex = (moveXSize) % vm.cellWidth > (vm.cellWidth / 4 * 1) ? parseInt(((moveXSize) / vm.cellWidth + 1)) : parseInt(((moveXSize) / vm.cellWidth))
|
||||
const addSizey = (moveYSize) % vm.cellHeight > (vm.cellHeight / 4 * 1) ? parseInt(((moveYSize) / vm.cellHeight + 1)) : parseInt(((moveYSize) / vm.cellHeight))
|
||||
|
||||
const nowX = oldSizeX + addSizex > 0 ? oldSizeX + addSizex : 1
|
||||
const nowY = oldSizeY + addSizey > 0 ? oldSizeY + addSizey : 1
|
||||
|
||||
debounce((function(addSizex, addSizey) {
|
||||
return function() {
|
||||
resizePlayer.call(vm, resizeItem, {
|
||||
sizex: nowX,
|
||||
sizey: nowY
|
||||
})
|
||||
}
|
||||
})(addSizex, addSizey), 10)
|
||||
|
||||
let nowWidth = orignWidth + moveXSize
|
||||
nowWidth = nowWidth <= vm.baseWidth ? vm.baseWidth : nowWidth
|
||||
let nowHeight = orignHeight + moveYSize
|
||||
nowHeight = nowHeight <= vm.baseHeight ? vm.baseHeight : nowHeight
|
||||
// 克隆元素实时改变大小
|
||||
cloneItem.css({
|
||||
width: nowWidth,
|
||||
height: nowHeight
|
||||
})
|
||||
} else if (moveItem) {
|
||||
// console.log('moveItem')
|
||||
|
||||
scrollScreen(e)
|
||||
if (!vm.draggable) return
|
||||
vm.dragging.call(null, e, moveItem, moveItem._dragId)
|
||||
|
||||
vm.$set(moveItem, 'isPlayer', true)
|
||||
// this.$set(moveItem, "show", false);
|
||||
const nowItemIndex = infoBox.moveItemIndex
|
||||
const cloneItem = infoBox.cloneItem
|
||||
const startX = infoBox.startX
|
||||
const startY = infoBox.startY
|
||||
const orignX = infoBox.orignX
|
||||
const orignY = infoBox.orignY
|
||||
const oldX = infoBox.oldX
|
||||
const oldY = infoBox.oldY
|
||||
|
||||
const moveXSize = e.pageX - startX // X方向移动的距离
|
||||
const moveYSize = e.pageY - startY // Y方向移动的距离
|
||||
|
||||
const nowCloneItemX = orignX + moveXSize
|
||||
const nowCloneItemY = orignY + moveYSize
|
||||
|
||||
let newX = parseInt((nowCloneItemX + (cloneItem.width() / 12) - vm.baseMarginLeft) / vm.cellWidth + 1)
|
||||
let newY = parseInt((nowCloneItemY + (cloneItem.height() / 12) - vm.baseMarginTop) / vm.cellHeight + 1)
|
||||
newX = newX > 0 ? newX : 1
|
||||
newY = newY > 0 ? newY : 1
|
||||
|
||||
debounce((function(newX, oldX, newY, oldY) {
|
||||
return function() {
|
||||
if (newX !== oldX || oldY !== newY) {
|
||||
// console.log("move");
|
||||
movePlayer.call(vm, moveItem, {
|
||||
x: newX,
|
||||
y: newY
|
||||
})
|
||||
|
||||
infoBox.oldX = newX
|
||||
infoBox.oldY = newY
|
||||
}
|
||||
}
|
||||
})(newX, oldX, newY, oldY), 10)
|
||||
|
||||
cloneItem.css({
|
||||
left: nowCloneItemX + 'px',
|
||||
top: nowCloneItemY + 'px'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$(window).mousemove(itemMouseMove)
|
||||
|
||||
$(window).mouseup(function itemMouseUp(e) {
|
||||
if (_.isEmpty(vm.infoBox)) return
|
||||
if (vm.infoBox.cloneItem) {
|
||||
vm.infoBox.cloneItem.remove()
|
||||
}
|
||||
if (vm.infoBox.resizeItem) {
|
||||
vm.$delete(vm.infoBox.resizeItem, 'isPlayer')
|
||||
vm.resizeEnd.call(null, e, vm.infoBox.resizeItem, vm.infoBox.resizeItem._dragId)
|
||||
}
|
||||
if (vm.infoBox.moveItem) {
|
||||
vm.dragEnd.call(null, e, vm.infoBox.moveItem, vm.infoBox.moveItem._dragId)
|
||||
vm.$set(vm.infoBox.moveItem, 'show', true)
|
||||
vm.$delete(vm.infoBox.moveItem, 'isPlayer')
|
||||
}
|
||||
vm.infoBox = {}
|
||||
|
||||
$(this).off('mousemove', itemMouseMove)
|
||||
$(this).off('mouseup', itemMouseUp)
|
||||
})
|
||||
},
|
||||
endMove(e) {
|
||||
|
||||
},
|
||||
moving(e) {
|
||||
|
||||
},
|
||||
/**
|
||||
* 计算当前item的位置和大小
|
||||
*
|
||||
* @param {any} item
|
||||
* @returns
|
||||
*/
|
||||
nowItemStyle(item, index) {
|
||||
return {
|
||||
width: (this.cellWidth * (item.sizex) - this.baseMarginLeft) + 'px',
|
||||
height: (this.cellHeight * (item.sizey) - this.baseMarginTop) + 'px',
|
||||
left: (this.cellWidth * (item.x - 1) + this.baseMarginLeft) + 'px',
|
||||
top: (this.cellHeight * (item.y - 1) + this.baseMarginTop) + 'px'
|
||||
}
|
||||
},
|
||||
getList() {
|
||||
// console.log('getList:')
|
||||
|
||||
const returnList = _.sortBy(_.cloneDeep(this.yourList), 'y')
|
||||
const finalList = []
|
||||
_.forEach(returnList, function(item, index) {
|
||||
if (_.isEmpty(item)) return
|
||||
delete item['_dragId']
|
||||
delete item['show']
|
||||
finalList.push(item)
|
||||
})
|
||||
return finalList
|
||||
},
|
||||
/**
|
||||
* 获取x最大值
|
||||
*
|
||||
* @returns
|
||||
*/
|
||||
getMaxCell() {
|
||||
// console.log('getMaxCell:')
|
||||
|
||||
return this.maxCell
|
||||
},
|
||||
/**
|
||||
* 获取渲染状态
|
||||
*
|
||||
* @returns
|
||||
*/
|
||||
getRenderState() {
|
||||
// console.log('getRenderState:')
|
||||
|
||||
return this.moveAnimate
|
||||
},
|
||||
addItem: addItem,
|
||||
init: init,
|
||||
afterInitOk(func) {
|
||||
const timeid = setInterval(() => {
|
||||
if (this.moveAnimate) {
|
||||
clearInterval(timeid)
|
||||
func()
|
||||
}
|
||||
}, 100)
|
||||
},
|
||||
addItemBox(item) {
|
||||
this.yourList.push(item)
|
||||
|
||||
this.$nextTick(function() {
|
||||
addItem.call(this, item, this.yourList.length - 1)
|
||||
})
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
updated() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
// init.call(this);
|
||||
}
|
||||
}
|
||||
@ -1,112 +0,0 @@
|
||||
.dragAndResize
|
||||
{
|
||||
position: relative;
|
||||
|
||||
user-select: none;
|
||||
|
||||
*
|
||||
{
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item
|
||||
{
|
||||
position: absolute;
|
||||
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
|
||||
cursor: move;
|
||||
|
||||
border: 1px solid;
|
||||
background-color: #fff;
|
||||
|
||||
.resizeHandle
|
||||
{
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
bottom: 2px;
|
||||
|
||||
width: 0;
|
||||
height: 0;
|
||||
|
||||
cursor: nw-resize;
|
||||
|
||||
opacity: .5;
|
||||
border-bottom: 10px solid black;
|
||||
border-left: 10px solid transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.moveAnimation
|
||||
{
|
||||
transition: top 80ms ease;
|
||||
}
|
||||
|
||||
.canNotDrag
|
||||
{
|
||||
cursor: default!important;
|
||||
}
|
||||
|
||||
.cloneNode
|
||||
{
|
||||
z-index: 3;
|
||||
|
||||
transition: none;
|
||||
|
||||
background-color: #bec1c9;
|
||||
opacity: 0.5;
|
||||
|
||||
}
|
||||
|
||||
.movingItem
|
||||
{
|
||||
position: absolute;
|
||||
|
||||
border: none;
|
||||
&:before
|
||||
{
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
content: 'movingItem';
|
||||
|
||||
background-color: #3d66e7;
|
||||
}
|
||||
}
|
||||
|
||||
.positionBox
|
||||
{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 100px;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.coords
|
||||
{
|
||||
position: fixed;
|
||||
right: 100px;
|
||||
bottom: 200px;
|
||||
|
||||
overflow: auto;
|
||||
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
border: 1px solid;
|
||||
}
|
||||
}
|
||||
@ -1,986 +0,0 @@
|
||||
<template>
|
||||
<div ref="container" class="dragAndResize" @mousedown="containerMouseDown($event)" @mouseup="endMove($event)" @mousemove="moving($event)">
|
||||
<div
|
||||
v-for="(item,index) in yourList"
|
||||
v-if="item.sizex!==undefined"
|
||||
:ref="'item'+index"
|
||||
:key="'item'+index"
|
||||
:class="{item:true,moveAnimation:moveAnimate,movingItem:item.isPlayer}"
|
||||
:style="nowItemStyle(item,index)"
|
||||
@mousedown="startMove($event,item,index)"
|
||||
>
|
||||
<slot :name="'slot'+index" />
|
||||
<span v-show="resizable" class="resizeHandle" @mousedown="startResize($event,item,index)" />
|
||||
</div>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import _ from 'lodash'
|
||||
import $ from 'jquery'
|
||||
|
||||
let positionBox = []
|
||||
let coordinates = [] // 坐标点集合
|
||||
|
||||
let lastTask
|
||||
let isOverlay = false // 是否正在交换位置
|
||||
let moveTime = 80 // 移动动画时间
|
||||
|
||||
let itemMaxY = 0
|
||||
let itemMaxX = 0
|
||||
|
||||
function debounce(func, time) {
|
||||
if (!isOverlay) {
|
||||
(function(t) {
|
||||
isOverlay = true
|
||||
setTimeout(function() {
|
||||
t()
|
||||
setTimeout(function() {
|
||||
isOverlay = false
|
||||
if (lastTask !== undefined) {
|
||||
debounce(lastTask, time)
|
||||
}
|
||||
}, moveTime)
|
||||
}, time)
|
||||
})(func)
|
||||
lastTask = undefined
|
||||
} else {
|
||||
lastTask = func
|
||||
}
|
||||
}
|
||||
|
||||
function scrollScreen(e) {
|
||||
if (e.clientY + 50 >= window.innerHeight) {
|
||||
const body = $(document.body)
|
||||
body.scrollTop(body.scrollTop() + 20)
|
||||
} else if (e.clientY <= 150) {
|
||||
const body = $(document.body)
|
||||
body.scrollTop(body.scrollTop() - 20)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置位置盒子
|
||||
*
|
||||
*/
|
||||
function resetPositionBox() {
|
||||
// 根据当前容器的宽度来决定多少列
|
||||
itemMaxX = this.maxCell
|
||||
const rows = 1 // 初始100行，后面根据需求会自动增加
|
||||
for (let i = 0; i < rows; i++) {
|
||||
const row = []
|
||||
|
||||
for (let j = 0; j < this.maxCell; j++) {
|
||||
row.push({
|
||||
el: false
|
||||
})
|
||||
}
|
||||
|
||||
positionBox.push(row)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 填充位置盒子
|
||||
*
|
||||
* @param {any} item
|
||||
*/
|
||||
function addItemToPositionBox(item) {
|
||||
const pb = positionBox
|
||||
if (item.x <= 0 || item.y <= 0) return
|
||||
|
||||
for (let i = item.x - 1; i < item.x - 1 + item.sizex; i++) {
|
||||
for (let j = item.y - 1; j < item.y - 1 + item.sizey; j++) {
|
||||
if (pb[j][i]) {
|
||||
pb[j][i].el = item
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function fillPositionBox(maxY) {
|
||||
const pb = positionBox
|
||||
maxY += 2
|
||||
for (let j = 0; j < maxY; j++) {
|
||||
if (pb[j] === undefined) {
|
||||
const row = []
|
||||
for (let i = 0; i < itemMaxX; i++) {
|
||||
row.push({
|
||||
el: false
|
||||
})
|
||||
}
|
||||
pb.push(row)
|
||||
}
|
||||
}
|
||||
|
||||
itemMaxY = maxY
|
||||
|
||||
$(this.$el).css('height', ((itemMaxY + 2) * this.cellHeight) + 'px')
|
||||
}
|
||||
|
||||
function removeItemFromPositionBox(item) {
|
||||
const pb = positionBox
|
||||
if (item.x <= 0 || item.y <= 0) return
|
||||
for (let i = item.x - 1; i < item.x - 1 + item.sizex; i++) {
|
||||
for (let j = item.y - 1; j < item.y - 1 + item.sizey; j++) {
|
||||
if (pb[j][i]) {
|
||||
pb[j][i].el = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 重新计算宽度，使最小单元格能占满整个容器
|
||||
*
|
||||
*/
|
||||
function recalcCellWidth() {
|
||||
const containerNode = this.$refs['container']
|
||||
const containerWidth = containerNode.offsetWidth
|
||||
|
||||
const cells = Math.round(containerWidth / this.cellWidth)
|
||||
this.maxCell = cells
|
||||
|
||||
// if (containerWidth % this.cellWidth !=== 0) {
|
||||
// this.cellWidth += containerWidth % this.cellWidth / cells;
|
||||
// }
|
||||
}
|
||||
|
||||
function init() {
|
||||
this.cellWidth = this.baseWidth + this.baseMarginLeft
|
||||
this.cellHeight = this.baseHeight + this.baseMarginTop
|
||||
|
||||
positionBox = []
|
||||
coordinates = [] // 坐标点集合
|
||||
|
||||
lastTask = undefined
|
||||
isOverlay = false // 是否正在交换位置
|
||||
moveTime = 80 // 移动动画时间
|
||||
|
||||
itemMaxY = 0
|
||||
itemMaxX = 0
|
||||
|
||||
const vm = this
|
||||
|
||||
recalcCellWidth.call(this)
|
||||
|
||||
resetPositionBox.call(this)
|
||||
|
||||
let i = 0
|
||||
const timeid = setInterval(function() {
|
||||
if (i >= vm.yourList.length) {
|
||||
clearInterval(timeid)
|
||||
vm.$nextTick(function() {
|
||||
vm.moveAnimate = true
|
||||
})
|
||||
} else {
|
||||
const item = vm.yourList[i]
|
||||
addItem.call(vm, item, i)
|
||||
i++
|
||||
}
|
||||
}, 1)
|
||||
vm.renderOk = true
|
||||
}
|
||||
|
||||
function resizePlayer(item, newSize) {
|
||||
const vm = this
|
||||
removeItemFromPositionBox(item)
|
||||
|
||||
const belowItems = findBelowItems.call(this, item)
|
||||
|
||||
_.forEach(belowItems, function(upItem) {
|
||||
const canGoUpRows = canItemGoUp(upItem)
|
||||
|
||||
if (canGoUpRows > 0) {
|
||||
moveItemUp.call(vm, upItem, canGoUpRows)
|
||||
}
|
||||
})
|
||||
|
||||
item.sizex = newSize.sizex
|
||||
item.sizey = newSize.sizey
|
||||
|
||||
if (item.sizex + item.x - 1 > itemMaxX) {
|
||||
item.sizex = itemMaxX - item.x + 1
|
||||
}
|
||||
|
||||
if (item.sizey + item.y > itemMaxY) {
|
||||
fillPositionBox.call(this, item.y + item.sizey)
|
||||
}
|
||||
|
||||
emptyTargetCell.call(this, item)
|
||||
|
||||
addItemToPositionBox.call(this, item)
|
||||
|
||||
changeItemCoord.call(this, item)
|
||||
|
||||
const canGoUpRows = canItemGoUp(item)
|
||||
|
||||
if (canGoUpRows > 0) {
|
||||
moveItemUp.call(this, item, canGoUpRows)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 检查移动的位置，如果不合法，会自动修改
|
||||
*
|
||||
* @param {any} item
|
||||
* @param {any} position
|
||||
*/
|
||||
function checkItemPosition(item, position) {
|
||||
position = position || {}
|
||||
position.x = position.x || item.x
|
||||
position.y = position.y || item.y
|
||||
|
||||
// 检查位置
|
||||
if (item.x < 1) {
|
||||
item.x = 1
|
||||
}
|
||||
|
||||
// 检查大小
|
||||
if (item.sizex > itemMaxX) {
|
||||
item.sizex = itemMaxX
|
||||
}
|
||||
|
||||
if (item.sizex < 1) {
|
||||
item.sizex = 1
|
||||
}
|
||||
|
||||
if (item.x + item.sizex - 1 > itemMaxX) {
|
||||
item.x = itemMaxX - item.sizex + 1
|
||||
if (item.x < 1) {
|
||||
item.x = 1
|
||||
}
|
||||
}
|
||||
|
||||
if (item.y < 1) {
|
||||
item.y = 1
|
||||
}
|
||||
|
||||
if (item.sizey < 1) {
|
||||
item.sizey = 1
|
||||
}
|
||||
|
||||
if (item.y + item.sizey > itemMaxY - 1) {
|
||||
fillPositionBox.call(this, item.y + item.sizey - 1)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 移动正在拖动的元素
|
||||
*
|
||||
* @param {any} item
|
||||
* @param {any} position
|
||||
*/
|
||||
function movePlayer(item, position) {
|
||||
const vm = this
|
||||
removeItemFromPositionBox(item)
|
||||
|
||||
const belowItems = findBelowItems.call(this, item)
|
||||
|
||||
_.forEach(belowItems, function(upItem) {
|
||||
const canGoUpRows = canItemGoUp(upItem)
|
||||
if (canGoUpRows > 0) {
|
||||
moveItemUp.call(vm, upItem, canGoUpRows)
|
||||
}
|
||||
})
|
||||
|
||||
item.x = position.x
|
||||
item.y = position.y
|
||||
|
||||
checkItemPosition.call(this, item, position)
|
||||
|
||||
emptyTargetCell.call(this, item)
|
||||
|
||||
addItemToPositionBox.call(this, item)
|
||||
|
||||
changeItemCoord.call(this, item)
|
||||
|
||||
const canGoUpRows = canItemGoUp(item)
|
||||
|
||||
if (canGoUpRows > 0) {
|
||||
moveItemUp.call(this, item, canGoUpRows)
|
||||
}
|
||||
}
|
||||
|
||||
function removeItem(index) {
|
||||
const vm = this
|
||||
const item = this.yourList[index]
|
||||
removeItemFromPositionBox(item)
|
||||
|
||||
const belowItems = findBelowItems.call(this, item)
|
||||
|
||||
// $(this.$refs['item' + item._dragId][0]).remove();
|
||||
|
||||
_.forEach(belowItems, function(upItem) {
|
||||
const canGoUpRows = canItemGoUp(upItem)
|
||||
|
||||
if (canGoUpRows > 0) {
|
||||
moveItemUp.call(vm, upItem, canGoUpRows)
|
||||
}
|
||||
})
|
||||
|
||||
this.yourList.splice(index, 1, {})
|
||||
}
|
||||
|
||||
function addItem(item, index) {
|
||||
if (index < 0) {
|
||||
index = this.yourList.length
|
||||
}
|
||||
item._dragId = index
|
||||
|
||||
checkItemPosition.call(this, item, {
|
||||
x: item.x,
|
||||
y: item.y
|
||||
})
|
||||
|
||||
emptyTargetCell.call(this, item)
|
||||
|
||||
addItemToPositionBox.call(this, item)
|
||||
|
||||
const canGoUpRows = canItemGoUp(item)
|
||||
|
||||
if (canGoUpRows > 0) {
|
||||
moveItemUp.call(this, item, canGoUpRows)
|
||||
}
|
||||
|
||||
// 生成坐标点
|
||||
// makeCoordinate.call(this, item);
|
||||
}
|
||||
|
||||
function changeToCoord(left, top, width, height) {
|
||||
return {
|
||||
x1: left,
|
||||
x2: left + width,
|
||||
y1: top,
|
||||
y2: top + height,
|
||||
c1: left + width / 2,
|
||||
c2: top + height / 2
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 检测有无碰撞，并作出处理
|
||||
*
|
||||
* @param {any} tCoord 比对对象的坐标
|
||||
*/
|
||||
function findClosetCoords(item, tCoord) {
|
||||
if (isOverlay) return
|
||||
let i = coordinates.length
|
||||
let collisionsItem = []
|
||||
while (i--) {
|
||||
const nowCoord = coordinates[i]
|
||||
if (item._dragId === nowCoord.el._dragId) {
|
||||
continue
|
||||
}
|
||||
|
||||
if (tCoord.x2 < nowCoord.x1 || tCoord.x1 > nowCoord.x2 || tCoord.y2 < nowCoord.y1 || tCoord.y1 > nowCoord.y2) {
|
||||
continue
|
||||
} else {
|
||||
collisionsItem.push({
|
||||
centerDistance: Math.sqrt(Math.pow(tCoord.c1 - nowCoord.c1, 2) + Math.pow(tCoord.c2 - nowCoord.c2, 2)),
|
||||
coord: nowCoord
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (collisionsItem.length <= 0) {
|
||||
return
|
||||
}
|
||||
|
||||
isOverlay = true
|
||||
|
||||
collisionsItem = _.sortBy(collisionsItem, 'area')
|
||||
|
||||
movePlayer.call(this, item, {
|
||||
x: collisionsItem[0].coord.el.x,
|
||||
y: collisionsItem[0].coord.el.y
|
||||
})
|
||||
|
||||
setTimeout(function() {
|
||||
isOverlay = false
|
||||
}, 200)
|
||||
}
|
||||
|
||||
/**
|
||||
* 生成坐标点
|
||||
*
|
||||
* @param {any} item
|
||||
*/
|
||||
function makeCoordinate(item) {
|
||||
const width = this.cellWidth * (item.sizex) - this.baseMarginLeft
|
||||
const height = this.cellHeight * (item.sizey) - this.baseMarginTop
|
||||
const left = this.cellWidth * (item.x - 1) + this.baseMarginLeft
|
||||
const top = this.cellHeight * (item.y - 1) + this.baseMarginTop
|
||||
|
||||
const coord = {
|
||||
x1: left,
|
||||
x2: left + width,
|
||||
y1: top,
|
||||
y2: top + height,
|
||||
c1: left + width / 2,
|
||||
c2: top + height / 2,
|
||||
el: item
|
||||
}
|
||||
|
||||
coordinates.push(coord)
|
||||
}
|
||||
|
||||
function changeItemCoord(item) {
|
||||
const width = this.cellWidth * (item.sizex) - this.baseMarginLeft
|
||||
const height = this.cellHeight * (item.sizey) - this.baseMarginTop
|
||||
const left = this.cellWidth * (item.x - 1) + this.baseMarginLeft
|
||||
const top = this.cellHeight * (item.y - 1) + this.baseMarginTop
|
||||
|
||||
const coord = {
|
||||
x1: left,
|
||||
x2: left + width,
|
||||
y1: top,
|
||||
y2: top + height,
|
||||
c1: left + width / 2,
|
||||
c2: top + height / 2,
|
||||
el: item
|
||||
}
|
||||
|
||||
const index = _.findIndex(coordinates, function(o) {
|
||||
return o.el._dragId === item._dragId
|
||||
})
|
||||
if (index !== -1) {
|
||||
coordinates.splice(index, 1, coord)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 清空目标位置的元素
|
||||
*
|
||||
* @param {any} item
|
||||
*/
|
||||
function emptyTargetCell(item) {
|
||||
const vm = this
|
||||
const belowItems = findBelowItems(item)
|
||||
|
||||
_.forEach(belowItems, function(downItem, index) {
|
||||
if (downItem._dragId === item._dragId) return
|
||||
const moveSize = item.y + item.sizey - downItem.y
|
||||
if (moveSize > 0) {
|
||||
moveItemDown.call(vm, downItem, moveSize)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 当前位置的item能否上浮
|
||||
*
|
||||
* @param {any} item
|
||||
* @returns
|
||||
*/
|
||||
function canItemGoUp(item) {
|
||||
let upperRows = 0
|
||||
for (let row = item.y - 2; row >= 0; row--) {
|
||||
for (let cell = item.x - 1; cell < item.x - 1 + item.sizex; cell++) {
|
||||
if (positionBox[row][cell] && positionBox[row][cell].el) {
|
||||
return upperRows
|
||||
}
|
||||
}
|
||||
upperRows++
|
||||
}
|
||||
|
||||
return upperRows
|
||||
}
|
||||
|
||||
/**
|
||||
* 在移动之前，找到当前下移的元素的下面的元素（递归）
|
||||
*
|
||||
* @param {any} items
|
||||
* @param {any} size
|
||||
*/
|
||||
function moveItemDown(item, size) {
|
||||
const vm = this
|
||||
removeItemFromPositionBox(item)
|
||||
|
||||
const belowItems = findBelowItems(item)
|
||||
|
||||
_.forEach(belowItems, function(downItem, index) {
|
||||
if (downItem._dragId === item._dragId) return
|
||||
const moveSize = calcDiff(item, downItem, size)
|
||||
if (moveSize > 0) {
|
||||
moveItemDown.call(vm, downItem, moveSize)
|
||||
}
|
||||
})
|
||||
|
||||
const targetPosition = {
|
||||
y: item.y + size
|
||||
}
|
||||
setPlayerPosition.call(this, item, targetPosition)
|
||||
checkItemPosition.call(this, item, targetPosition)
|
||||
|
||||
addItemToPositionBox.call(this, item)
|
||||
|
||||
changeItemCoord.call(this, item)
|
||||
}
|
||||
|
||||
function setPlayerPosition(item, position) {
|
||||
const vm = this
|
||||
position = position || {}
|
||||
|
||||
const targetX = position.x || item.x
|
||||
const targetY = position.y || item.y
|
||||
|
||||
item.x = targetX
|
||||
item.y = targetY
|
||||
|
||||
if (item.y + item.sizey > itemMaxY) {
|
||||
itemMaxY = item.y + item.sizey
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 寻找子元素到父元素的最大距离
|
||||
*
|
||||
* @param {any} parent
|
||||
* @param {any} son
|
||||
* @param {any} size
|
||||
*/
|
||||
function calcDiff(parent, son, size) {
|
||||
const diffs = []
|
||||
|
||||
for (let i = son.x - 1; i < son.x - 1 + son.sizex; i++) {
|
||||
let temp_y = 0
|
||||
|
||||
for (let j = parent.y - 1 + parent.sizey; j < son.y - 1; j++) {
|
||||
if (positionBox[j][i] && positionBox[j][i].el === false) {
|
||||
temp_y++
|
||||
}
|
||||
}
|
||||
diffs.push(temp_y)
|
||||
}
|
||||
|
||||
const max_diff = Math.max.apply(Math, diffs)
|
||||
size = size - max_diff
|
||||
|
||||
return size > 0 ? size : 0
|
||||
}
|
||||
|
||||
function moveItemUp(item, size) {
|
||||
// console.log('moveItemUp')
|
||||
const vm = this
|
||||
|
||||
removeItemFromPositionBox(item)
|
||||
|
||||
const belowItems = findBelowItems.call(this, item)
|
||||
|
||||
// item.y -= size;
|
||||
setPlayerPosition.call(this, item, {
|
||||
y: item.y - size
|
||||
})
|
||||
|
||||
addItemToPositionBox.call(this, item)
|
||||
|
||||
changeItemCoord.call(this, item)
|
||||
|
||||
_.forEach(belowItems, function(upItem, index) {
|
||||
const moveSize = canItemGoUp(upItem)
|
||||
if (moveSize > 0) {
|
||||
moveItemUp.call(vm, upItem, moveSize)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function findBelowItems(item) {
|
||||
const belowItems = {}
|
||||
for (let cell = item.x - 1; cell < item.x - 1 + item.sizex; cell++) {
|
||||
for (let row = item.y - 1; row < positionBox.length; row++) {
|
||||
const target = positionBox[row][cell]
|
||||
if (target && target.el) {
|
||||
belowItems[target.el._dragId] = target.el
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return _.sortBy(_.values(belowItems), 'y')
|
||||
}
|
||||
|
||||
import { mapState } from 'vuex'
|
||||
export default {
|
||||
name: 'VuePowerDrag',
|
||||
props: {
|
||||
yourList: {
|
||||
required: true,
|
||||
type: Array // String,Number,Boolean,Function,Object,Array
|
||||
},
|
||||
baseWidth: {
|
||||
required: false,
|
||||
type: Number,
|
||||
default: 100
|
||||
},
|
||||
baseHeight: {
|
||||
required: false,
|
||||
type: Number,
|
||||
default: 50
|
||||
},
|
||||
baseMarginLeft: {
|
||||
required: false,
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
baseMarginTop: {
|
||||
required: false,
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
draggable: {
|
||||
required: false,
|
||||
default: true,
|
||||
type: Boolean
|
||||
},
|
||||
dragStart: {
|
||||
required: false,
|
||||
type: Function,
|
||||
default: function() {}
|
||||
},
|
||||
dragging: {
|
||||
required: false,
|
||||
type: Function,
|
||||
default: function() {}
|
||||
},
|
||||
dragEnd: {
|
||||
required: false,
|
||||
type: Function,
|
||||
default: function() {}
|
||||
},
|
||||
resizable: {
|
||||
required: false,
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
resizeStart: {
|
||||
required: false,
|
||||
type: Function,
|
||||
default: function() {}
|
||||
},
|
||||
resizing: {
|
||||
required: false,
|
||||
type: Function,
|
||||
default: function() {}
|
||||
},
|
||||
resizeEnd: {
|
||||
required: false,
|
||||
type: Function,
|
||||
default: function() {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
renderOk: false,
|
||||
moveAnimate: false,
|
||||
list: [],
|
||||
cellWidth: 0,
|
||||
cellHeight: 0,
|
||||
maxCell: 0
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
positionBox() {
|
||||
return positionBox
|
||||
},
|
||||
coordinates() {
|
||||
return coordinates
|
||||
},
|
||||
...mapState([
|
||||
'componentData',
|
||||
'curComponent',
|
||||
'canvasStyleData',
|
||||
'editor',
|
||||
'linkageSettingStatus',
|
||||
'curLinkageView'
|
||||
])
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
updated() {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
// init.call(this);
|
||||
},
|
||||
methods: {
|
||||
removeItem: removeItem,
|
||||
startResize(e, item, index) {
|
||||
// console.log('startResize:' + index)
|
||||
if (!this.resizable) return
|
||||
this.resizeStart.call(null, e, item, index)
|
||||
|
||||
// e.preventDefault();
|
||||
const target = $(e.target)
|
||||
|
||||
if (!this.infoBox) {
|
||||
this.infoBox = {}
|
||||
}
|
||||
|
||||
const itemNode = target.parents('.item')
|
||||
|
||||
this.infoBox.resizeItem = item
|
||||
this.infoBox.resizeItemIndex = index
|
||||
},
|
||||
containerMouseDown(e) {
|
||||
// console.log('containerMouseDown:')
|
||||
|
||||
// e.preventDefault();
|
||||
if (!this.infoBox) {
|
||||
this.infoBox = {}
|
||||
}
|
||||
|
||||
this.infoBox.startX = e.pageX
|
||||
this.infoBox.startY = e.pageY
|
||||
},
|
||||
startMove(e, item, index) {
|
||||
// console.log('startMove:' + index)
|
||||
const vm = this
|
||||
// e.preventDefault();
|
||||
|
||||
if (!this.infoBox) {
|
||||
this.infoBox = {}
|
||||
}
|
||||
const infoBox = this.infoBox
|
||||
const target = $(e.target)
|
||||
|
||||
let className = target.attr('class')
|
||||
className = className || ''
|
||||
if (className.indexOf('dragHandle') === -1 && className.indexOf('item') === -1 && className.indexOf('resizeHandle') === -1) {
|
||||
return
|
||||
}
|
||||
|
||||
if (className.includes('resizeHandle')) {
|
||||
|
||||
} else if (this.draggable && (className.includes('dragHandle') || className.includes('item'))) {
|
||||
this.dragStart.call(null, e, item, index)
|
||||
infoBox.moveItem = item
|
||||
infoBox.moveItemIndex = index
|
||||
}
|
||||
|
||||
infoBox.cloneItem = null
|
||||
infoBox.nowItemNode = null
|
||||
|
||||
if (target.attr('class') && target.attr('class').indexOf('item') !== -1) {
|
||||
infoBox.nowItemNode = target
|
||||
infoBox.cloneItem = target.clone()
|
||||
} else {
|
||||
infoBox.nowItemNode = target.parents('.item')
|
||||
infoBox.cloneItem = infoBox.nowItemNode.clone()
|
||||
}
|
||||
infoBox.cloneItem.addClass('cloneNode')
|
||||
|
||||
$(this.$el).append(infoBox.cloneItem)
|
||||
|
||||
infoBox.orignX = infoBox.cloneItem.position().left // 克隆对象原始X位置
|
||||
infoBox.orignY = infoBox.cloneItem.position().top
|
||||
infoBox.oldX = item.x // 实际对象原始X位置
|
||||
infoBox.oldY = item.y
|
||||
infoBox.oldSizeX = item.sizex
|
||||
infoBox.oldSizeY = item.sizey
|
||||
infoBox.orignWidth = infoBox.cloneItem.prop('offsetWidth')
|
||||
infoBox.orignHeight = infoBox.cloneItem.prop('offsetHeight')
|
||||
|
||||
function itemMouseMove(e) {
|
||||
// console.log('itemMouseMove')
|
||||
const moveItem = _.get(infoBox, 'moveItem')
|
||||
const resizeItem = _.get(infoBox, 'resizeItem')
|
||||
|
||||
if (resizeItem) { // 调整大小时
|
||||
// console.log('resizeItem')
|
||||
vm.resizing.call(null, e, resizeItem, resizeItem._dragId)
|
||||
|
||||
vm.$set(resizeItem, 'isPlayer', true)
|
||||
const nowItemIndex = infoBox.resizeItemIndex
|
||||
const cloneItem = infoBox.cloneItem
|
||||
const startX = infoBox.startX
|
||||
const startY = infoBox.startY
|
||||
const oldSizeX = infoBox.oldSizeX
|
||||
const oldSizeY = infoBox.oldSizeY
|
||||
const orignWidth = infoBox.orignWidth
|
||||
const orignHeight = infoBox.orignHeight
|
||||
|
||||
const moveXSize = e.pageX - startX // X方向移动的距离
|
||||
const moveYSize = e.pageY - startY // Y方向移动的距离
|
||||
|
||||
const addSizex = (moveXSize) % vm.cellWidth > (vm.cellWidth / 4 * 1) ? parseInt(((moveXSize) / vm.cellWidth + 1)) : parseInt(((moveXSize) / vm.cellWidth))
|
||||
const addSizey = (moveYSize) % vm.cellHeight > (vm.cellHeight / 4 * 1) ? parseInt(((moveYSize) / vm.cellHeight + 1)) : parseInt(((moveYSize) / vm.cellHeight))
|
||||
|
||||
const nowX = oldSizeX + addSizex > 0 ? oldSizeX + addSizex : 1
|
||||
const nowY = oldSizeY + addSizey > 0 ? oldSizeY + addSizey : 1
|
||||
|
||||
debounce((function(addSizex, addSizey) {
|
||||
return function() {
|
||||
resizePlayer.call(vm, resizeItem, {
|
||||
sizex: nowX,
|
||||
sizey: nowY
|
||||
})
|
||||
}
|
||||
})(addSizex, addSizey), 10)
|
||||
|
||||
let nowWidth = orignWidth + moveXSize
|
||||
nowWidth = nowWidth <= vm.baseWidth ? vm.baseWidth : nowWidth
|
||||
let nowHeight = orignHeight + moveYSize
|
||||
nowHeight = nowHeight <= vm.baseHeight ? vm.baseHeight : nowHeight
|
||||
// 克隆元素实时改变大小
|
||||
cloneItem.css({
|
||||
width: nowWidth,
|
||||
height: nowHeight
|
||||
})
|
||||
} else if (moveItem) {
|
||||
// console.log('moveItem')
|
||||
|
||||
scrollScreen(e)
|
||||
if (!vm.draggable) return
|
||||
vm.dragging.call(null, e, moveItem, moveItem._dragId)
|
||||
|
||||
vm.$set(moveItem, 'isPlayer', true)
|
||||
// this.$set(moveItem, "show", false);
|
||||
const nowItemIndex = infoBox.moveItemIndex
|
||||
const cloneItem = infoBox.cloneItem
|
||||
const startX = infoBox.startX
|
||||
const startY = infoBox.startY
|
||||
const orignX = infoBox.orignX
|
||||
const orignY = infoBox.orignY
|
||||
const oldX = infoBox.oldX
|
||||
const oldY = infoBox.oldY
|
||||
|
||||
const moveXSize = e.pageX - startX // X方向移动的距离
|
||||
const moveYSize = e.pageY - startY // Y方向移动的距离
|
||||
|
||||
const nowCloneItemX = orignX + moveXSize
|
||||
const nowCloneItemY = orignY + moveYSize
|
||||
|
||||
let newX = parseInt((nowCloneItemX + (cloneItem.width() / 12) - vm.baseMarginLeft) / vm.cellWidth + 1)
|
||||
let newY = parseInt((nowCloneItemY + (cloneItem.height() / 12) - vm.baseMarginTop) / vm.cellHeight + 1)
|
||||
newX = newX > 0 ? newX : 1
|
||||
newY = newY > 0 ? newY : 1
|
||||
|
||||
debounce((function(newX, oldX, newY, oldY) {
|
||||
return function() {
|
||||
if (newX !== oldX || oldY !== newY) {
|
||||
// console.log("move");
|
||||
movePlayer.call(vm, moveItem, {
|
||||
x: newX,
|
||||
y: newY
|
||||
})
|
||||
|
||||
infoBox.oldX = newX
|
||||
infoBox.oldY = newY
|
||||
}
|
||||
}
|
||||
})(newX, oldX, newY, oldY), 10)
|
||||
|
||||
cloneItem.css({
|
||||
left: nowCloneItemX + 'px',
|
||||
top: nowCloneItemY + 'px'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
$(window).mousemove(itemMouseMove)
|
||||
|
||||
$(window).mouseup(function itemMouseUp(e) {
|
||||
if (_.isEmpty(vm.infoBox)) return
|
||||
if (vm.infoBox.cloneItem) {
|
||||
vm.infoBox.cloneItem.remove()
|
||||
}
|
||||
if (vm.infoBox.resizeItem) {
|
||||
vm.$delete(vm.infoBox.resizeItem, 'isPlayer')
|
||||
vm.resizeEnd.call(null, e, vm.infoBox.resizeItem, vm.infoBox.resizeItem._dragId)
|
||||
}
|
||||
if (vm.infoBox.moveItem) {
|
||||
vm.dragEnd.call(null, e, vm.infoBox.moveItem, vm.infoBox.moveItem._dragId)
|
||||
vm.$set(vm.infoBox.moveItem, 'show', true)
|
||||
vm.$delete(vm.infoBox.moveItem, 'isPlayer')
|
||||
}
|
||||
vm.infoBox = {}
|
||||
|
||||
$(this).off('mousemove', itemMouseMove)
|
||||
$(this).off('mouseup', itemMouseUp)
|
||||
})
|
||||
},
|
||||
endMove(e) {
|
||||
|
||||
},
|
||||
moving(e) {
|
||||
|
||||
},
|
||||
/**
|
||||
* 计算当前item的位置和大小
|
||||
*
|
||||
* @param {any} item
|
||||
* @returns
|
||||
*/
|
||||
nowItemStyle(item, index) {
|
||||
const style = {
|
||||
width: (this.cellWidth * (item.sizex) - this.baseMarginLeft) + 'px',
|
||||
height: (this.cellHeight * (item.sizey) - this.baseMarginTop) + 'px',
|
||||
left: (this.cellWidth * (item.x - 1) + this.baseMarginLeft) + 'px',
|
||||
top: (this.cellHeight * (item.y - 1) + this.baseMarginTop) + 'px'
|
||||
}
|
||||
// console.log('nowItemStyle:' + JSON.stringify(style))
|
||||
return style
|
||||
},
|
||||
getList() {
|
||||
// console.log('getList:')
|
||||
|
||||
const returnList = _.sortBy(_.cloneDeep(this.yourList), 'y')
|
||||
const finalList = []
|
||||
_.forEach(returnList, function(item, index) {
|
||||
if (_.isEmpty(item)) return
|
||||
delete item['_dragId']
|
||||
delete item['show']
|
||||
finalList.push(item)
|
||||
})
|
||||
return finalList
|
||||
},
|
||||
/**
|
||||
* 获取x最大值
|
||||
*
|
||||
* @returns
|
||||
*/
|
||||
getMaxCell() {
|
||||
// console.log('getMaxCell:')
|
||||
|
||||
return this.maxCell
|
||||
},
|
||||
/**
|
||||
* 获取渲染状态
|
||||
*
|
||||
* @returns
|
||||
*/
|
||||
getRenderState() {
|
||||
// console.log('getRenderState:')
|
||||
|
||||
return this.moveAnimate
|
||||
},
|
||||
addItem: addItem,
|
||||
init: init,
|
||||
afterInitOk(func) {
|
||||
const timeid = setInterval(() => {
|
||||
if (this.moveAnimate) {
|
||||
clearInterval(timeid)
|
||||
func()
|
||||
}
|
||||
}, 100)
|
||||
},
|
||||
addItemBox(item) {
|
||||
this.yourList.push(item)
|
||||
|
||||
this.$nextTick(function() {
|
||||
addItem.call(this, item, this.yourList.length - 1)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
@import "./drag.less";
|
||||
|
||||
</style>
|
||||
@ -18,6 +18,7 @@ export default {
|
||||
let top = 0
|
||||
let width = 0
|
||||
let height = 0
|
||||
let transition = 0
|
||||
// if (this.dragComponentInfo && !this.dragComponentInfo.auxiliaryMatrix) {
|
||||
if (this.dragComponentInfo) {
|
||||
// console.log('shadowDrag=')
|
||||
@ -28,6 +29,7 @@ export default {
|
||||
|
||||
width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleWidth
|
||||
height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleHeight
|
||||
transition = 0.1
|
||||
} else {
|
||||
left = this.dragComponentInfo.shadowStyle.x
|
||||
top = this.dragComponentInfo.shadowStyle.y
|
||||
@ -45,6 +47,9 @@ export default {
|
||||
|
||||
width = this.curComponent.style.width * this.curCanvasScale.scalePointWidth
|
||||
height = this.curComponent.style.height * this.curCanvasScale.scalePointHeight
|
||||
if (this.curComponent.optStatus.dragging) {
|
||||
transition = 0.1
|
||||
}
|
||||
// console.log('curComponent left:' + left + 'top:' + top + 'width:' + width + 'height:' + height)
|
||||
}
|
||||
|
||||
@ -59,6 +64,9 @@ export default {
|
||||
width: width + 'px',
|
||||
height: height + 'px'
|
||||
}
|
||||
if (transition > 0) {
|
||||
style.transition = transition + 's'
|
||||
}
|
||||
// console.log('style=>' + JSON.stringify(style))
|
||||
// 记录外部拖拽进入仪表板时阴影区域宽高
|
||||
if (this.dragComponentInfo) {
|
||||
|
||||
@ -1429,32 +1429,6 @@ export default {
|
||||
infoBox.moveItem = item
|
||||
infoBox.moveItemIndex = index
|
||||
|
||||
// infoBox.cloneItem = null
|
||||
// infoBox.nowItemNode = null
|
||||
|
||||
// 通过.item 样式class 来获取最外层的de-drag 最外层的定位
|
||||
// if (target.attr('class') && target.attr('class').indexOf('item') !== -1) {
|
||||
// infoBox.nowItemNode = target
|
||||
// // infoBox.cloneItem = target.clone()
|
||||
// } else {
|
||||
// infoBox.nowItemNode = target.parents('.item')
|
||||
// // infoBox.cloneItem = infoBox.nowItemNode.clone()
|
||||
// }
|
||||
// infoBox.cloneItem.addClass('cloneNode')
|
||||
|
||||
// 使用deDrag 自己的shadow 进行阴影定位
|
||||
// $(this.$el).append(infoBox.cloneItem)
|
||||
|
||||
// if (infoBox.cloneItem.position()) {
|
||||
// infoBox.orignX = infoBox.cloneItem.position().left // 克隆对象原始X位置
|
||||
// infoBox.orignY = infoBox.cloneItem.position().top
|
||||
// } else {
|
||||
// infoBox.orignX = 0 // 克隆对象原始X位置
|
||||
// infoBox.orignY = 0
|
||||
// infoBox.startX = 0
|
||||
// infoBox.startY = 0
|
||||
// }
|
||||
|
||||
infoBox.orignX = 0 // 克隆对象原始X位置
|
||||
infoBox.orignY = 0
|
||||
infoBox.startX = 0
|
||||
@ -1464,8 +1438,6 @@ export default {
|
||||
infoBox.oldY = item.y
|
||||
infoBox.oldSizeX = item.sizex
|
||||
infoBox.oldSizeY = item.sizey
|
||||
// infoBox.orignWidth = infoBox.cloneItem.prop('offsetWidth')
|
||||
// infoBox.orignHeight = infoBox.cloneItem.prop('offsetHeight')
|
||||
},
|
||||
onMouseUp(e) {
|
||||
const vm = this
|
||||
@ -1498,41 +1470,41 @@ export default {
|
||||
const startY = infoBox.startY
|
||||
const oldSizeX = infoBox.oldSizeX
|
||||
const oldSizeY = infoBox.oldSizeY
|
||||
// const orignWidth = infoBox.orignWidth
|
||||
// const orignHeight = infoBox.orignHeight
|
||||
|
||||
const moveXSize = e.pageX - startX // X方向移动的距离
|
||||
const moveYSize = e.pageY - startY // Y方向移动的距离
|
||||
|
||||
const addSizex = (moveXSize) % vm.cellWidth > (vm.cellWidth / 4 * 1) ? parseInt(((moveXSize) / vm.cellWidth + 1)) : parseInt(((moveXSize) / vm.cellWidth))
|
||||
const addSizey = (moveYSize) % vm.cellHeight > (vm.cellHeight / 4 * 1) ? parseInt(((moveYSize) / vm.cellHeight + 1)) : parseInt(((moveYSize) / vm.cellHeight))
|
||||
//
|
||||
// const nowX = oldSizeX + addSizex > 0 ? oldSizeX + addSizex : 1
|
||||
// const nowY = oldSizeY + addSizey > 0 ? oldSizeY + addSizey : 1
|
||||
|
||||
let nowX = Math.round((item.style.width * this.scalePointWidth) / this.matrixStyle.width)
|
||||
let nowY = Math.round((item.style.height * this.scalePointHeight) / this.matrixStyle.height)
|
||||
nowX = nowX > 0 ? nowX : 1
|
||||
nowY = nowY > 0 ? nowY : 1
|
||||
|
||||
debounce((function(addSizex, addSizey) {
|
||||
const oldX = infoBox.oldX
|
||||
const oldY = infoBox.oldY
|
||||
let newX = Math.round((item.style.left * this.scalePointWidth) / this.matrixStyle.width) + 1
|
||||
let newY = Math.round((item.style.top * this.scalePointHeight) / this.matrixStyle.height) + 1
|
||||
newX = newX > 0 ? newX : 1
|
||||
newY = newY > 0 ? newY : 1
|
||||
debounce((function(newX, oldX, newY, oldY, addSizex, addSizey) {
|
||||
return function() {
|
||||
// console.log('move1')
|
||||
if (newX !== oldX || oldY !== newY) {
|
||||
// console.log('move2')
|
||||
movePlayer.call(vm, resizeItem, {
|
||||
x: newX,
|
||||
y: newY
|
||||
})
|
||||
|
||||
infoBox.oldX = newX
|
||||
infoBox.oldY = newY
|
||||
}
|
||||
resizePlayer.call(vm, resizeItem, {
|
||||
sizex: nowX,
|
||||
sizey: nowY
|
||||
})
|
||||
}
|
||||
})(addSizex, addSizey), 10)
|
||||
|
||||
// let nowWidth = orignWidth + moveXSize
|
||||
// nowWidth = nowWidth <= vm.baseWidth ? vm.baseWidth : nowWidth
|
||||
// let nowHeight = orignHeight + moveYSize
|
||||
// nowHeight = nowHeight <= vm.baseHeight ? vm.baseHeight : nowHeight
|
||||
// // 克隆元素实时改变大小
|
||||
// cloneItem.css({
|
||||
// width: nowWidth,
|
||||
// height: nowHeight
|
||||
// })
|
||||
})(newX, oldX, newY, oldY, addSizex, addSizey), 10)
|
||||
},
|
||||
onDragging(e, item) {
|
||||
const infoBox = this.infoBox
|
||||
@ -1545,40 +1517,12 @@ export default {
|
||||
vm.dragging.call(null, e, moveItem, moveItem._dragId)
|
||||
|
||||
vm.$set(moveItem, 'isPlayer', true)
|
||||
// this.$set(moveItem, "show", false);
|
||||
// const nowItemIndex = infoBox.moveItemIndex
|
||||
// const cloneItem = infoBox.cloneItem
|
||||
// const startX = infoBox.startX
|
||||
// const startY = infoBox.startY
|
||||
// const orignX = infoBox.orignX
|
||||
// const orignY = infoBox.orignY
|
||||
const oldX = infoBox.oldX
|
||||
const oldY = infoBox.oldY
|
||||
|
||||
// const moveXSize = e.pageX - startX // X方向移动的距离
|
||||
// const moveYSize = e.pageY - startY // Y方向移动的距离
|
||||
//
|
||||
// const nowCloneItemX = orignX + moveXSize
|
||||
// const nowCloneItemY = orignY + moveYSize
|
||||
|
||||
// temp 临时测试
|
||||
// let newX = parseInt((nowCloneItemX + (cloneItem.width() / 12) - vm.baseMarginLeft) / vm.cellWidth + 1)
|
||||
// let newY = parseInt((nowCloneItemY + (cloneItem.height() / 12) - vm.baseMarginTop) / vm.cellHeight + 1)
|
||||
let newX = Math.round((item.style.left * this.scalePointWidth) / this.matrixStyle.width) + 1
|
||||
let newY = Math.round((item.style.top * this.scalePointHeight) / this.matrixStyle.height) + 1
|
||||
// if (this.dragComponentInfo) {
|
||||
// newX = Math.round(this.dragComponentInfo.x) + 1
|
||||
// newY = Math.round(this.dragComponentInfo.y) + 1
|
||||
// } else {
|
||||
// newX = Math.round((item.style.left * this.scalePointWidth) / this.matrixStyle.width) + 1
|
||||
// newY = Math.round((item.style.top * this.scalePointHeight) / this.matrixStyle.height) + 1
|
||||
// }
|
||||
newX = newX > 0 ? newX : 1
|
||||
newY = newY > 0 ? newY : 1
|
||||
|
||||
// console.log('infoBox==>' + JSON.stringify(this.infoBox))
|
||||
// console.log('infoBox:startX' + startX + ';startY' + startY + 'orignX' + orignX + 'orignY' + orignY + 'oldX' + oldX + 'oldY' + oldY + 'new:newX=' + newX + ';newY=' + newY)
|
||||
|
||||
debounce((function(newX, oldX, newY, oldY) {
|
||||
return function() {
|
||||
// console.log('move1')
|
||||
@ -1594,11 +1538,6 @@ export default {
|
||||
}
|
||||
}
|
||||
})(newX, oldX, newY, oldY), 10)
|
||||
|
||||
// cloneItem.css({
|
||||
// left: nowCloneItemX + 'px',
|
||||
// top: nowCloneItemY + 'px'
|
||||
// })
|
||||
},
|
||||
endMove(e) {
|
||||
|
||||
|
||||
@ -11,8 +11,8 @@ const dialogPanel = {
|
||||
attrs: {
|
||||
type: 'daterange',
|
||||
rangeSeparator: 'dedaterange.split_placeholder',
|
||||
startPlaceholder: 'dedaterange.to_placeholder',
|
||||
endPlaceholder: 'dedaterange.from_placeholder',
|
||||
startPlaceholder: 'dedaterange.from_placeholder',
|
||||
endPlaceholder: 'dedaterange.to_placeholder',
|
||||
viewIds: []
|
||||
},
|
||||
value: ''
|
||||
|
||||
@ -491,11 +491,11 @@ div:focus {
|
||||
}
|
||||
|
||||
.blackTheme .el-tree-node__content:hover {
|
||||
background-color: var(--SiderBG) !important;
|
||||
background-color: var(--MenuHovorBG) !important;
|
||||
}
|
||||
|
||||
.blackTheme .is-current > .el-tree-node__content {
|
||||
background-color: var(--SiderBG) !important;
|
||||
background-color: var(--MenuActiveBG) !important;
|
||||
}
|
||||
.blackTheme .el-collapse-item__header {
|
||||
background-color: var(--ContentBG) !important;
|
||||
@ -533,30 +533,30 @@ div:focus {
|
||||
color: var(--Main) !important;
|
||||
}
|
||||
|
||||
.blackTheme .elx-table--main-wrapper {
|
||||
.blackTheme:not(.in-panel) .elx-table--main-wrapper {
|
||||
|
||||
.body--wrapper {
|
||||
background-color: var(--TableBG) !important;
|
||||
}
|
||||
}
|
||||
.blackTheme .elx-table {
|
||||
.blackTheme:not(.in-panel) .elx-table {
|
||||
color: var(--TableColor) !important;
|
||||
}
|
||||
|
||||
.blackTheme .elx-body--column {
|
||||
.blackTheme:not(.in-panel) .elx-body--column {
|
||||
background-image: linear-gradient(var(--TableBorderColor), var(--TableBorderColor)), linear-gradient(var(--TableBorderColor), var(--TableBorderColor)) !important;
|
||||
}
|
||||
.blackTheme .elx-header--column {
|
||||
.blackTheme:not(.in-panel) .elx-header--column {
|
||||
background-image: linear-gradient(--TableBorderColor, --TableBorderColor), linear-gradient(--TableBorderColor, --TableBorderColor) !important;
|
||||
}
|
||||
.blackTheme tr.row--current {
|
||||
.blackTheme:not(.in-panel) tr.row--current {
|
||||
background-color: var(--MainBG) !important;
|
||||
}
|
||||
.blackTheme tr.elx-body--row:hover {
|
||||
.blackTheme:not(.in-panel) tr.elx-body--row:hover {
|
||||
background-color: var(--TableBG) !important;
|
||||
}
|
||||
|
||||
.blackTheme .elx-table--header-border-line {
|
||||
.blackTheme:not(.in-panel) .elx-table--header-border-line {
|
||||
border-color: var(--TableBorderColor) !important;
|
||||
}
|
||||
|
||||
@ -666,5 +666,9 @@ div:focus {
|
||||
background-color: #324f62;
|
||||
}
|
||||
|
||||
.blue-color {
|
||||
color: var(--Main, #0000ff);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@ -165,7 +165,7 @@ export default {
|
||||
},
|
||||
tableId: {
|
||||
type: String,
|
||||
default: null
|
||||
default: ''
|
||||
},
|
||||
editType: {
|
||||
type: Number,
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
>
|
||||
<ux-table-column
|
||||
v-for="field in fields"
|
||||
:key="field.dataeaseName"
|
||||
:key="field.id"
|
||||
min-width="200px"
|
||||
:field="field.dataeaseName"
|
||||
:resizable="true"
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
<el-table-column prop="status" :label="$t('dataset.status')">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.status === 'Completed'" style="color: green">{{ $t('dataset.completed') }}</span>
|
||||
<span v-if="scope.row.status === 'Underway'" style="color: blue">
|
||||
<span v-if="scope.row.status === 'Underway'" class="blue-color">
|
||||
<i class="el-icon-loading" />
|
||||
{{ $t('dataset.underway') }}
|
||||
</span>
|
||||
@ -228,10 +228,10 @@
|
||||
<span v-if="scope.row.status === 'Stopped'" style="color: red">
|
||||
<div type="danger" style="font-size: 12px">{{ $t('dataset.task.stopped') }}</div>
|
||||
</span>
|
||||
<span v-if="scope.row.status === 'Pending'" style="color: blue">
|
||||
<span v-if="scope.row.status === 'Pending'" class="blue-color">
|
||||
<el-link type="primary" style="font-size: 12px" @click="changeTaskStatus(scope.row)">{{ $t('dataset.task.pending') }}</el-link>
|
||||
</span>
|
||||
<span v-if="scope.row.status === 'Exec'" style="color: blue">
|
||||
<span v-if="scope.row.status === 'Exec'" class="blue-color">
|
||||
<i class="el-icon-loading" />
|
||||
{{ $t('dataset.underway') }}
|
||||
</span>
|
||||
@ -452,7 +452,7 @@ export default {
|
||||
cellStyle({ row, column }) {
|
||||
// 状态列字体颜色
|
||||
if (row.status === 'Underway' && column === 'status') {
|
||||
return 'color: blue'
|
||||
return 'color: var(--Main, #0000ff)'
|
||||
} else if (row.status === 'Completed' && column === 'status') {
|
||||
return 'color: green'
|
||||
} else if (row.status === 'Error' && column === 'status') {
|
||||
|
||||
@ -1,139 +0,0 @@
|
||||
<template>
|
||||
<div id="demo">
|
||||
<!-- <button @click="getList">getList</button> -->
|
||||
<div class="head">
|
||||
<router-link to="/" class="arrow">←</router-link>
|
||||
<span>基本应用</span>
|
||||
</div>
|
||||
<power-drag
|
||||
ref="cyGridster"
|
||||
:your-list="myList"
|
||||
:base-margin-left="baseMarginLeft"
|
||||
:base-margin-top="baseMarginTop"
|
||||
:base-width="baseWidth"
|
||||
:base-height="baseHeight"
|
||||
>
|
||||
<!-- <div v-for="(item,index) in myList" :slot="'slot'+index">
|
||||
|
||||
</div> -->
|
||||
<div draggable="true" style="width: 200px;height: 200px;background: #1b6d85">
|
||||
this is test
|
||||
</div>
|
||||
</power-drag>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import drag from '@/components/DeDrag/drag.vue'
|
||||
import mock from 'mockjs'
|
||||
import _ from 'lodash'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
'power-drag': drag
|
||||
},
|
||||
data() {
|
||||
const list = mock.mock({
|
||||
// "myList|10": [{
|
||||
// "id|+1": 1,
|
||||
// x: '@integer(1,5)',
|
||||
// y: '@integer(1,5)',
|
||||
// sizex: '@integer(1,3)',
|
||||
// sizey: '@integer(1,3)',
|
||||
// }]
|
||||
myList: [{
|
||||
'id': 3,
|
||||
'x': 6,
|
||||
'y': 2,
|
||||
'sizex': 1,
|
||||
'sizey': 1
|
||||
}, {
|
||||
'id': 5,
|
||||
'x': 4,
|
||||
'y': 2,
|
||||
'sizex': 2,
|
||||
'sizey': 1
|
||||
}, {
|
||||
'id': 7,
|
||||
'x': 1,
|
||||
'y': 2,
|
||||
'sizex': 1,
|
||||
'sizey': 1
|
||||
}, {
|
||||
'id': 9,
|
||||
'x': 7,
|
||||
'y': 2,
|
||||
'sizex': 1,
|
||||
'sizey': 1
|
||||
}]
|
||||
})
|
||||
return {
|
||||
myList: list.myList,
|
||||
baseWidth: 0,
|
||||
baseHeight: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 屏幕适配，使得当前布局能在所有分辨率下适用，示例是在1366*638分辨率下完成
|
||||
const screenWidth = window.innerWidth
|
||||
const screenHeight = window.innerHeight
|
||||
this.baseWidth = 90.8333 * (screenWidth / 1366)
|
||||
this.baseHeight = 100 * (screenHeight / 638)
|
||||
this.baseMarginLeft = 0
|
||||
this.baseMarginTop = 0
|
||||
|
||||
this.$nextTick(function() {
|
||||
$('.dragAndResize').css('width', 'calc(100% - ' + (this.baseMarginLeft) + 'px)')
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
const gridster = this.$refs['cyGridster'] // 获取gridster实例
|
||||
gridster.init() // 在适当的时候初始化布局组件
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
const gridster = this.$refs['cyGridster'] // 获取gridster实例
|
||||
console.log(JSON.stringify(gridster.getList()))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
& * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
#demo {
|
||||
width: 100%;
|
||||
padding: 1.5em 0 1.5em 0;
|
||||
|
||||
.head {
|
||||
border-bottom: 1px dashed;
|
||||
width: 100%;
|
||||
|
||||
padding-left: 20px;
|
||||
|
||||
height: 50px;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
font-size: 20px;
|
||||
|
||||
position: relative;
|
||||
margin-right: 10px;
|
||||
top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -715,7 +715,4 @@ span{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.blue-color {
|
||||
color: var(--Main);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -253,7 +253,5 @@ export default {
|
||||
span{
|
||||
font-size: 12px;
|
||||
}
|
||||
.blue-color {
|
||||
color: var(--Main);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user