test #47
@ -215,50 +215,45 @@
|
||||
// return new Date(y,m,d,h,M,0,0).getTime()
|
||||
//}
|
||||
data: [
|
||||
{
|
||||
// 01:00 ~ 05:00
|
||||
{
|
||||
name: '运行',
|
||||
value: [0, 1695747600000, 1695762000000, 0],
|
||||
value: [0, 1696730000000, 1696734040450, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
// 5:00 ~ 8:00
|
||||
{
|
||||
name: '故障',
|
||||
value: [0, 1695762000000, 1695772800000, 0],
|
||||
value: [0, 1696737040000, 1696754040450, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[1].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
// 8:00 ~ 8:39
|
||||
{
|
||||
name: '计划停机',
|
||||
value: [0, 1695772800000, 1695775140000, 0],
|
||||
value: [0, 1696755000000, 1696759000000, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[2].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
// 08:39 ~ 18:00
|
||||
{
|
||||
name: '运行',
|
||||
value: [0, 1695775140000, 1695808800000, 0],
|
||||
value: [0, 1696759000000, 1696769000000, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[0].color,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
// 18:00 ~ 23:30
|
||||
{
|
||||
name: '计划停机',
|
||||
value: [0, 1695808800000, 1695828600000, 0],
|
||||
value: [0, 1696769400000, 1696779000000, 0],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: types[2].color,
|
||||
|
@ -11,7 +11,7 @@
|
||||
<NavMenu @action="handleAction" :menu="menu" />
|
||||
</section>
|
||||
<section id="main-panel">
|
||||
<section id="left-panel">
|
||||
<section id="left-panel" v-drag="'right'">
|
||||
<h2>组件</h2>
|
||||
<div id="components"></div>
|
||||
</section>
|
||||
@ -25,10 +25,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import vDrag from './drag'
|
||||
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
|
||||
hiprint.init({
|
||||
providers: [defaultElementTypeProvider()],
|
||||
providers: [defaultElementTypeProvider()],
|
||||
});
|
||||
|
||||
const NavSelector = {
|
||||
@ -101,6 +101,7 @@ export default {
|
||||
name: 'PrintDesignPage',
|
||||
components: { NavMenu },
|
||||
props: {},
|
||||
directives: { drag: vDrag },
|
||||
data() {
|
||||
return {
|
||||
hiprintTemplate: null,
|
||||
@ -123,7 +124,7 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
loadDesigner() {
|
||||
$("#edit-panel").empty();
|
||||
$("#edit-panel").empty();
|
||||
this.hiprintTemplate = new hiprint.PrintTemplate({
|
||||
settingContainer: "#settings",
|
||||
});
|
||||
@ -143,6 +144,15 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-button {
|
||||
// background: red;
|
||||
}
|
||||
|
||||
|
||||
.print-design {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
@ -178,7 +188,7 @@ export default {
|
||||
overflow: auto;
|
||||
grid-area: left;
|
||||
background: #fff;
|
||||
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
@ -196,6 +206,7 @@ export default {
|
||||
background: #fff;
|
||||
border-left: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
|
||||
}
|
||||
|
||||
#right-panel {
|
||||
|
41
src/views/print/drag.css
Normal file
41
src/views/print/drag.css
Normal file
@ -0,0 +1,41 @@
|
||||
.v-drag-border-left {
|
||||
border-left: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.v-drag-border-left > div.pseudo-border {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -2px;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
z-index: 1;
|
||||
transition: all linear 0.3s;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.v-drag-border-left > div.pseudo-border:hover {
|
||||
background: #ccc;
|
||||
}
|
||||
|
||||
.v-drag-border-right {
|
||||
/* border-right: 1px solid #ccc; */
|
||||
position: relative;
|
||||
transition: width linear 0.3s;
|
||||
}
|
||||
|
||||
.v-drag-border-right > div.pseudo-border {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -2px;
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
z-index: 1;
|
||||
transition: all linear 0.3s;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.v-drag-border-right > div.pseudo-border:hover {
|
||||
background: #ccc;
|
||||
}
|
96
src/views/print/drag.js
Normal file
96
src/views/print/drag.js
Normal file
@ -0,0 +1,96 @@
|
||||
import './drag.css';
|
||||
|
||||
export default {
|
||||
bind(el, { name, value }, vnode) {
|
||||
switch (name) {
|
||||
case 'drag': {
|
||||
if (['left', 'right', 'top', 'bottom'].indexOf(value) == -1) return;
|
||||
// 创建边框子元素
|
||||
const border = document.createElement('div');
|
||||
border.classList.add("pseudo-border");
|
||||
el.appendChild(border);
|
||||
// 添加拖拽样式
|
||||
addDragStyle(el, value);
|
||||
// 添加拖拽事件
|
||||
addDragEvent(el, border);
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
// inserted()
|
||||
// update()
|
||||
// componentUpdated()
|
||||
// unbind()
|
||||
}
|
||||
|
||||
function addDragEvent(el, border, direction) {
|
||||
// border.setAttribute('draggable', true)
|
||||
const onMouseMove = function (e) {
|
||||
console.log('move', e);
|
||||
}
|
||||
const onMouseUp = function (e) {
|
||||
console.log('up')
|
||||
border.removeEventListener('mousemove', onMouseMove);
|
||||
}
|
||||
|
||||
border.addEventListener('mousedown', function (e) {
|
||||
console.log('down');
|
||||
document.body.removeEventListener('mouseup', onMouseUp)
|
||||
document.body.addEventListener('mouseup', onMouseUp)
|
||||
border.addEventListener('mousemove', onMouseMove);
|
||||
});
|
||||
|
||||
// TODO: 有点bug
|
||||
|
||||
// el.addEventListener('mousedown', function (e) {
|
||||
// console.log('mousedown', e);
|
||||
// const { clientX, clientY } = e;
|
||||
// const { left, top, width, height } = el.getBoundingClientRect();
|
||||
// const { offsetLeft, offsetTop } = el;
|
||||
// const startX = clientX;
|
||||
// const startY = clientY;
|
||||
// const startLeft = left;
|
||||
// const startTop = top;
|
||||
// const startWidth = width;
|
||||
// const startHeight = height;
|
||||
// const startOffsetLeft = offsetLeft;
|
||||
// const startOffsetTop = offsetTop;
|
||||
// const move = function (e) {
|
||||
// console.log('mousemove', e);
|
||||
// const { clientX, clientY } = e;
|
||||
// const offsetX = clientX - startX;
|
||||
// const offsetY = clientY - startY;
|
||||
// switch (direction) {
|
||||
// case 'left': {
|
||||
// el.style.left = startLeft + offsetX + 'px';
|
||||
// el.style.width = startWidth - offsetX + 'px';
|
||||
// break;
|
||||
// }
|
||||
// case 'right': {
|
||||
// el.style.width = startWidth + offsetX + 'px';
|
||||
// break;
|
||||
// }
|
||||
// case 'top': {
|
||||
// el.style.top = startTop + offsetY + 'px';
|
||||
// el.style.height = startHeight - offsetY + 'px';
|
||||
// break;
|
||||
// }
|
||||
// case 'bottom': {
|
||||
// el.style.height = startHeight + offsetY + 'px';
|
||||
// break;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// const up = function (e) {
|
||||
// console.log('mouseup', e);
|
||||
// document.removeEventListener('mousemove', move);
|
||||
// document.removeEventListener('mouseup', up);
|
||||
// }
|
||||
// document.addEventListener('mousemove', move);
|
||||
// document.addEventListener('mouseup', up);
|
||||
// });
|
||||
}
|
||||
|
||||
function addDragStyle(el, direction) {
|
||||
el.classList.add('v-drag-border-' + direction)
|
||||
}
|
Loading…
Reference in New Issue
Block a user