lb #39
@ -216,9 +216,8 @@
|
|||||||
//}
|
//}
|
||||||
data: [
|
data: [
|
||||||
{
|
{
|
||||||
// 01:00 ~ 05:00
|
|
||||||
name: '运行',
|
name: '运行',
|
||||||
value: [0, 1695747600000, 1695762000000, 0],
|
value: [0, 1696730000000, 1696734040450, 0],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: types[0].color,
|
color: types[0].color,
|
||||||
@ -226,9 +225,8 @@
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
// 5:00 ~ 8:00
|
|
||||||
name: '故障',
|
name: '故障',
|
||||||
value: [0, 1695762000000, 1695772800000, 0],
|
value: [0, 1696737040000, 1696754040450, 0],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: types[1].color,
|
color: types[1].color,
|
||||||
@ -236,9 +234,8 @@
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
// 8:00 ~ 8:39
|
|
||||||
name: '计划停机',
|
name: '计划停机',
|
||||||
value: [0, 1695772800000, 1695775140000, 0],
|
value: [0, 1696755000000, 1696759000000, 0],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: types[2].color,
|
color: types[2].color,
|
||||||
@ -246,9 +243,8 @@
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
// 08:39 ~ 18:00
|
|
||||||
name: '运行',
|
name: '运行',
|
||||||
value: [0, 1695775140000, 1695808800000, 0],
|
value: [0, 1696759000000, 1696769000000, 0],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: types[0].color,
|
color: types[0].color,
|
||||||
@ -256,9 +252,8 @@
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
// 18:00 ~ 23:30
|
|
||||||
name: '计划停机',
|
name: '计划停机',
|
||||||
value: [0, 1695808800000, 1695828600000, 0],
|
value: [0, 1696769400000, 1696779000000, 0],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: types[2].color,
|
color: types[2].color,
|
||||||
|
@ -11,7 +11,7 @@
|
|||||||
<NavMenu @action="handleAction" :menu="menu" />
|
<NavMenu @action="handleAction" :menu="menu" />
|
||||||
</section>
|
</section>
|
||||||
<section id="main-panel">
|
<section id="main-panel">
|
||||||
<section id="left-panel">
|
<section id="left-panel" v-drag="'right'">
|
||||||
<h2>组件</h2>
|
<h2>组件</h2>
|
||||||
<div id="components"></div>
|
<div id="components"></div>
|
||||||
</section>
|
</section>
|
||||||
@ -25,7 +25,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import vDrag from './drag'
|
||||||
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
|
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
|
||||||
hiprint.init({
|
hiprint.init({
|
||||||
providers: [defaultElementTypeProvider()],
|
providers: [defaultElementTypeProvider()],
|
||||||
@ -101,6 +101,7 @@ export default {
|
|||||||
name: 'PrintDesignPage',
|
name: 'PrintDesignPage',
|
||||||
components: { NavMenu },
|
components: { NavMenu },
|
||||||
props: {},
|
props: {},
|
||||||
|
directives: { drag: vDrag },
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
hiprintTemplate: null,
|
hiprintTemplate: null,
|
||||||
@ -143,6 +144,15 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-button {
|
||||||
|
// background: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.print-design {
|
.print-design {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -196,6 +206,7 @@ export default {
|
|||||||
background: #fff;
|
background: #fff;
|
||||||
border-left: 1px solid #ccc;
|
border-left: 1px solid #ccc;
|
||||||
border-right: 1px solid #ccc;
|
border-right: 1px solid #ccc;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#right-panel {
|
#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