forked from github/dataease
fit2cloudrd
GitHub
commit
367d3d773d
14
README.md
14
README.md
@ -24,6 +24,20 @@ DataEase 是开源的数据可视化分析工具，帮助用户快速分析数
|
|||||||
- 秒级响应：集成 Apache Doris，超大数据量下秒级查询返回延时；
|
- 秒级响应：集成 Apache Doris，超大数据量下秒级查询返回延时；
|
||||||
- 安全分享：支持多种数据分享方式，确保数据安全。
|
- 安全分享：支持多种数据分享方式，确保数据安全。
|
||||||
|
|
||||||
|
### DataEase 已支持的数据源:
|
||||||
|
|
||||||
|
- Excel
|
||||||
|
- MySQL
|
||||||
|
- Oracle
|
||||||
|
- SQL Server
|
||||||
|
- PostgreSQL
|
||||||
|
- Elasticsearch
|
||||||
|
- MariaDB
|
||||||
|
- Apache Doris
|
||||||
|
- ClickHouse
|
||||||
|
|
||||||
|
> 更多数据源支持持续增加中...
|
||||||
|
|
||||||
## UI 展示
|
## UI 展示
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -15,7 +15,9 @@ import org.springframework.stereotype.Service;
|
|||||||
import org.springframework.transaction.annotation.Transactional;
|
import org.springframework.transaction.annotation.Transactional;
|
||||||
import javax.annotation.Resource;
|
import javax.annotation.Resource;
|
||||||
import java.util.ArrayList;
|
import java.util.ArrayList;
|
||||||
|
import java.util.HashSet;
|
||||||
import java.util.List;
|
import java.util.List;
|
||||||
|
import java.util.Set;
|
||||||
import java.util.stream.Collectors;
|
import java.util.stream.Collectors;
|
||||||
|
|
||||||
@Service
|
@Service
|
||||||
@ -117,8 +119,10 @@ public class DynamicMenuServiceImpl implements DynamicMenuService {
|
|||||||
|
|
||||||
@Transactional
|
@Transactional
|
||||||
public void syncPluginMenu() {
|
public void syncPluginMenu() {
|
||||||
List<PluginSysMenu> pluginSysMenuList = PluginUtils.pluginMenus();
|
|
||||||
extPluginSysMenuMapper.deletePluginMenu();
|
extPluginSysMenuMapper.deletePluginMenu();
|
||||||
|
List<PluginSysMenu> pluginSysMenuList = PluginUtils.pluginMenus();
|
||||||
|
Set<PluginSysMenu> pluginSysMenuSet = new HashSet<>(pluginSysMenuList);
|
||||||
|
pluginSysMenuList = new ArrayList<>(pluginSysMenuSet);
|
||||||
if(CollectionUtils.isNotEmpty(pluginSysMenuList)){
|
if(CollectionUtils.isNotEmpty(pluginSysMenuList)){
|
||||||
extPluginSysMenuMapper.savePluginMenu(pluginSysMenuList);
|
extPluginSysMenuMapper.savePluginMenu(pluginSysMenuList);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -231,16 +231,17 @@ public class EsProvider extends DatasourceProvider {
|
|||||||
throw new Exception(JSONObject.parseObject(response).getJSONObject("error").getString("reason"));
|
throw new Exception(JSONObject.parseObject(response).getJSONObject("error").getString("reason"));
|
||||||
}
|
}
|
||||||
String version = JSONObject.parseObject(response).getJSONObject("version").getString("number");
|
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"));
|
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"));
|
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");
|
esConfiguration.setUri("_xpack/sql");
|
||||||
}
|
}
|
||||||
if(Integer.valueOf(version.substring(0,1)) == 7 ) {
|
if(Integer.valueOf(version.split("\\.")[0]) == 7 ) {
|
||||||
esConfiguration.setUri("_sql");
|
esConfiguration.setUri("_sql");
|
||||||
}
|
}
|
||||||
datasourceRequest.getDatasource().setConfiguration(new Gson().toJson(esConfiguration));
|
datasourceRequest.getDatasource().setConfiguration(new Gson().toJson(esConfiguration));
|
||||||
|
|||||||
@ -959,12 +959,12 @@ public class ExtractDataService {
|
|||||||
outputFields[datasetTableFields.size()] = textFileField;
|
outputFields[datasetTableFields.size()] = textFileField;
|
||||||
|
|
||||||
textFileOutputMeta.setOutputFields(outputFields);
|
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];
|
TextFileField[] outputFields = new TextFileField[datasetTableFields.size() + 1];
|
||||||
for(int i=0;i< datasetTableFields.size();i++){
|
for(int i=0;i< datasetTableFields.size();i++){
|
||||||
TextFileField textFileField = new TextFileField();
|
TextFileField textFileField = new TextFileField();
|
||||||
textFileField.setName(datasetTableFields.get(i).getDataeaseName());
|
textFileField.setName(datasetTableFields.get(i).getDataeaseName());
|
||||||
if (datasetTableFields.get(i).getDeExtractType() == 1) {
|
if (datasetTableFields.get(i).getDeExtractType() == DeTypeConstants.DE_TIME) {
|
||||||
textFileField.setType("String");
|
textFileField.setType("String");
|
||||||
textFileField.setFormat("yyyy-MM-dd HH:mm:ss");
|
textFileField.setFormat("yyyy-MM-dd HH:mm:ss");
|
||||||
} else {
|
} else {
|
||||||
@ -984,7 +984,7 @@ public class ExtractDataService {
|
|||||||
for(int i=0;i< datasetTableFields.size();i++){
|
for(int i=0;i< datasetTableFields.size();i++){
|
||||||
TextFileField textFileField = new TextFileField();
|
TextFileField textFileField = new TextFileField();
|
||||||
textFileField.setName(datasetTableFields.get(i).getDataeaseName());
|
textFileField.setName(datasetTableFields.get(i).getDataeaseName());
|
||||||
if (datasetTableFields.get(i).getDeExtractType() == 2) {
|
if (datasetTableFields.get(i).getDeExtractType() == DeTypeConstants.DE_INT) {
|
||||||
textFileField.setType("Integer");
|
textFileField.setType("Integer");
|
||||||
textFileField.setFormat("0");
|
textFileField.setFormat("0");
|
||||||
} else {
|
} 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 top = 0
|
||||||
let width = 0
|
let width = 0
|
||||||
let height = 0
|
let height = 0
|
||||||
|
let transition = 0
|
||||||
// if (this.dragComponentInfo && !this.dragComponentInfo.auxiliaryMatrix) {
|
// if (this.dragComponentInfo && !this.dragComponentInfo.auxiliaryMatrix) {
|
||||||
if (this.dragComponentInfo) {
|
if (this.dragComponentInfo) {
|
||||||
// console.log('shadowDrag=')
|
// console.log('shadowDrag=')
|
||||||
@ -28,6 +29,7 @@ export default {
|
|||||||
|
|
||||||
width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleWidth
|
width = this.dragComponentInfo.sizex * this.curCanvasScale.matrixStyleWidth
|
||||||
height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleHeight
|
height = this.dragComponentInfo.sizey * this.curCanvasScale.matrixStyleHeight
|
||||||
|
transition = 0.1
|
||||||
} else {
|
} else {
|
||||||
left = this.dragComponentInfo.shadowStyle.x
|
left = this.dragComponentInfo.shadowStyle.x
|
||||||
top = this.dragComponentInfo.shadowStyle.y
|
top = this.dragComponentInfo.shadowStyle.y
|
||||||
@ -45,6 +47,9 @@ export default {
|
|||||||
|
|
||||||
width = this.curComponent.style.width * this.curCanvasScale.scalePointWidth
|
width = this.curComponent.style.width * this.curCanvasScale.scalePointWidth
|
||||||
height = this.curComponent.style.height * this.curCanvasScale.scalePointHeight
|
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)
|
// console.log('curComponent left:' + left + 'top:' + top + 'width:' + width + 'height:' + height)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -59,6 +64,9 @@ export default {
|
|||||||
width: width + 'px',
|
width: width + 'px',
|
||||||
height: height + 'px'
|
height: height + 'px'
|
||||||
}
|
}
|
||||||
|
if (transition > 0) {
|
||||||
|
style.transition = transition + 's'
|
||||||
|
}
|
||||||
// console.log('style=>' + JSON.stringify(style))
|
// console.log('style=>' + JSON.stringify(style))
|
||||||
// 记录外部拖拽进入仪表板时阴影区域宽高
|
// 记录外部拖拽进入仪表板时阴影区域宽高
|
||||||
if (this.dragComponentInfo) {
|
if (this.dragComponentInfo) {
|
||||||
|
|||||||
@ -1429,32 +1429,6 @@ export default {
|
|||||||
infoBox.moveItem = item
|
infoBox.moveItem = item
|
||||||
infoBox.moveItemIndex = index
|
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.orignX = 0 // 克隆对象原始X位置
|
||||||
infoBox.orignY = 0
|
infoBox.orignY = 0
|
||||||
infoBox.startX = 0
|
infoBox.startX = 0
|
||||||
@ -1464,8 +1438,6 @@ export default {
|
|||||||
infoBox.oldY = item.y
|
infoBox.oldY = item.y
|
||||||
infoBox.oldSizeX = item.sizex
|
infoBox.oldSizeX = item.sizex
|
||||||
infoBox.oldSizeY = item.sizey
|
infoBox.oldSizeY = item.sizey
|
||||||
// infoBox.orignWidth = infoBox.cloneItem.prop('offsetWidth')
|
|
||||||
// infoBox.orignHeight = infoBox.cloneItem.prop('offsetHeight')
|
|
||||||
},
|
},
|
||||||
onMouseUp(e) {
|
onMouseUp(e) {
|
||||||
const vm = this
|
const vm = this
|
||||||
@ -1498,41 +1470,41 @@ export default {
|
|||||||
const startY = infoBox.startY
|
const startY = infoBox.startY
|
||||||
const oldSizeX = infoBox.oldSizeX
|
const oldSizeX = infoBox.oldSizeX
|
||||||
const oldSizeY = infoBox.oldSizeY
|
const oldSizeY = infoBox.oldSizeY
|
||||||
// const orignWidth = infoBox.orignWidth
|
|
||||||
// const orignHeight = infoBox.orignHeight
|
|
||||||
|
|
||||||
const moveXSize = e.pageX - startX // X方向移动的距离
|
const moveXSize = e.pageX - startX // X方向移动的距离
|
||||||
const moveYSize = e.pageY - startY // Y方向移动的距离
|
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 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 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 nowX = Math.round((item.style.width * this.scalePointWidth) / this.matrixStyle.width)
|
||||||
let nowY = Math.round((item.style.height * this.scalePointHeight) / this.matrixStyle.height)
|
let nowY = Math.round((item.style.height * this.scalePointHeight) / this.matrixStyle.height)
|
||||||
nowX = nowX > 0 ? nowX : 1
|
nowX = nowX > 0 ? nowX : 1
|
||||||
nowY = nowY > 0 ? nowY : 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() {
|
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, {
|
resizePlayer.call(vm, resizeItem, {
|
||||||
sizex: nowX,
|
sizex: nowX,
|
||||||
sizey: nowY
|
sizey: nowY
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})(addSizex, addSizey), 10)
|
})(newX, oldX, newY, oldY, 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
|
|
||||||
// })
|
|
||||||
},
|
},
|
||||||
onDragging(e, item) {
|
onDragging(e, item) {
|
||||||
const infoBox = this.infoBox
|
const infoBox = this.infoBox
|
||||||
@ -1545,40 +1517,12 @@ export default {
|
|||||||
vm.dragging.call(null, e, moveItem, moveItem._dragId)
|
vm.dragging.call(null, e, moveItem, moveItem._dragId)
|
||||||
|
|
||||||
vm.$set(moveItem, 'isPlayer', true)
|
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 oldX = infoBox.oldX
|
||||||
const oldY = infoBox.oldY
|
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 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
|
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
|
newX = newX > 0 ? newX : 1
|
||||||
newY = newY > 0 ? newY : 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) {
|
debounce((function(newX, oldX, newY, oldY) {
|
||||||
return function() {
|
return function() {
|
||||||
// console.log('move1')
|
// console.log('move1')
|
||||||
@ -1594,11 +1538,6 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
})(newX, oldX, newY, oldY), 10)
|
})(newX, oldX, newY, oldY), 10)
|
||||||
|
|
||||||
// cloneItem.css({
|
|
||||||
// left: nowCloneItemX + 'px',
|
|
||||||
// top: nowCloneItemY + 'px'
|
|
||||||
// })
|
|
||||||
},
|
},
|
||||||
endMove(e) {
|
endMove(e) {
|
||||||
|
|
||||||
|
|||||||
@ -11,8 +11,8 @@ const dialogPanel = {
|
|||||||
attrs: {
|
attrs: {
|
||||||
type: 'daterange',
|
type: 'daterange',
|
||||||
rangeSeparator: 'dedaterange.split_placeholder',
|
rangeSeparator: 'dedaterange.split_placeholder',
|
||||||
startPlaceholder: 'dedaterange.to_placeholder',
|
startPlaceholder: 'dedaterange.from_placeholder',
|
||||||
endPlaceholder: 'dedaterange.from_placeholder',
|
endPlaceholder: 'dedaterange.to_placeholder',
|
||||||
viewIds: []
|
viewIds: []
|
||||||
},
|
},
|
||||||
value: ''
|
value: ''
|
||||||
|
|||||||
@ -491,11 +491,11 @@ div:focus {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.blackTheme .el-tree-node__content:hover {
|
.blackTheme .el-tree-node__content:hover {
|
||||||
background-color: var(--SiderBG) !important;
|
background-color: var(--MenuHovorBG) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blackTheme .is-current > .el-tree-node__content {
|
.blackTheme .is-current > .el-tree-node__content {
|
||||||
background-color: var(--SiderBG) !important;
|
background-color: var(--MenuActiveBG) !important;
|
||||||
}
|
}
|
||||||
.blackTheme .el-collapse-item__header {
|
.blackTheme .el-collapse-item__header {
|
||||||
background-color: var(--ContentBG) !important;
|
background-color: var(--ContentBG) !important;
|
||||||
@ -533,30 +533,30 @@ div:focus {
|
|||||||
color: var(--Main) !important;
|
color: var(--Main) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blackTheme .elx-table--main-wrapper {
|
.blackTheme:not(.in-panel) .elx-table--main-wrapper {
|
||||||
|
|
||||||
.body--wrapper {
|
.body--wrapper {
|
||||||
background-color: var(--TableBG) !important;
|
background-color: var(--TableBG) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.blackTheme .elx-table {
|
.blackTheme:not(.in-panel) .elx-table {
|
||||||
color: var(--TableColor) !important;
|
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;
|
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;
|
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;
|
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;
|
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;
|
border-color: var(--TableBorderColor) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -666,5 +666,9 @@ div:focus {
|
|||||||
background-color: #324f62;
|
background-color: #324f62;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.blue-color {
|
||||||
|
color: var(--Main, #0000ff);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -165,7 +165,7 @@ export default {
|
|||||||
},
|
},
|
||||||
tableId: {
|
tableId: {
|
||||||
type: String,
|
type: String,
|
||||||
default: null
|
default: ''
|
||||||
},
|
},
|
||||||
editType: {
|
editType: {
|
||||||
type: Number,
|
type: Number,
|
||||||
|
|||||||
@ -22,7 +22,7 @@
|
|||||||
>
|
>
|
||||||
<ux-table-column
|
<ux-table-column
|
||||||
v-for="field in fields"
|
v-for="field in fields"
|
||||||
:key="field.dataeaseName"
|
:key="field.id"
|
||||||
min-width="200px"
|
min-width="200px"
|
||||||
:field="field.dataeaseName"
|
:field="field.dataeaseName"
|
||||||
:resizable="true"
|
:resizable="true"
|
||||||
|
|||||||
@ -40,7 +40,7 @@
|
|||||||
<el-table-column prop="status" :label="$t('dataset.status')">
|
<el-table-column prop="status" :label="$t('dataset.status')">
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span v-if="scope.row.status === 'Completed'" style="color: green">{{ $t('dataset.completed') }}</span>
|
<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" />
|
<i class="el-icon-loading" />
|
||||||
{{ $t('dataset.underway') }}
|
{{ $t('dataset.underway') }}
|
||||||
</span>
|
</span>
|
||||||
@ -228,10 +228,10 @@
|
|||||||
<span v-if="scope.row.status === 'Stopped'" style="color: red">
|
<span v-if="scope.row.status === 'Stopped'" style="color: red">
|
||||||
<div type="danger" style="font-size: 12px">{{ $t('dataset.task.stopped') }}</div>
|
<div type="danger" style="font-size: 12px">{{ $t('dataset.task.stopped') }}</div>
|
||||||
</span>
|
</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>
|
<el-link type="primary" style="font-size: 12px" @click="changeTaskStatus(scope.row)">{{ $t('dataset.task.pending') }}</el-link>
|
||||||
</span>
|
</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" />
|
<i class="el-icon-loading" />
|
||||||
{{ $t('dataset.underway') }}
|
{{ $t('dataset.underway') }}
|
||||||
</span>
|
</span>
|
||||||
@ -452,7 +452,7 @@ export default {
|
|||||||
cellStyle({ row, column }) {
|
cellStyle({ row, column }) {
|
||||||
// 状态列字体颜色
|
// 状态列字体颜色
|
||||||
if (row.status === 'Underway' && column === 'status') {
|
if (row.status === 'Underway' && column === 'status') {
|
||||||
return 'color: blue'
|
return 'color: var(--Main, #0000ff)'
|
||||||
} else if (row.status === 'Completed' && column === 'status') {
|
} else if (row.status === 'Completed' && column === 'status') {
|
||||||
return 'color: green'
|
return 'color: green'
|
||||||
} else if (row.status === 'Error' && column === 'status') {
|
} 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;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.blue-color {
|
|
||||||
color: var(--Main);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -253,7 +253,5 @@ export default {
|
|||||||
span{
|
span{
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
.blue-color {
|
|
||||||
color: var(--Main);
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user