src/views/equipment/timing-diagram/status/demo.html

@@ -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,

src/views/print/design.vue

@@ -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 {

src/views/print/drag.css

@@ -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;
+}

src/views/print/drag.js

@@ -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)
+}