mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

lb #39

Merged
g7hoo merged 16 commits from lb into test 2023-10-11 10:33:08 +08:00
Conversation 0 Commits 16 Files Changed 44 +163 -20
4 changed files with 163 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit ab8e9cb2a5 - Show all commits

15
src/views/equipment/timing-diagram/status/demo.html
View File

@ -216,9 +216,8 @@
//}
data: [
{
// 01:00 ~ 05:00
name: '运行',
value: [0, 1695747600000, 1695762000000, 0],
value: [0, 1696730000000, 1696734040450, 0],
itemStyle: {
normal: {
color: types[0].color,
@ -226,9 +225,8 @@
},
},
{
// 5:00 ~ 8:00
name: '故障',
value: [0, 1695762000000, 1695772800000, 0],
value: [0, 1696737040000, 1696754040450, 0],
itemStyle: {
normal: {
color: types[1].color,
@ -236,9 +234,8 @@
},
},
{
// 8:00 ~ 8:39
name: '计划停机',
value: [0, 1695772800000, 1695775140000, 0],
value: [0, 1696755000000, 1696759000000, 0],
itemStyle: {
normal: {
color: types[2].color,
@ -246,9 +243,8 @@
},
},
{
// 08:39 ~ 18:00
name: '运行',
value: [0, 1695775140000, 1695808800000, 0],
value: [0, 1696759000000, 1696769000000, 0],
itemStyle: {
normal: {
color: types[0].color,
@ -256,9 +252,8 @@
},
},
{
// 18:00 ~ 23:30
name: '计划停机',
value: [0, 1695808800000, 1695828600000, 0],
value: [0, 1696769400000, 1696779000000, 0],
itemStyle: {
normal: {
color: types[2].color,

15
src/views/print/design.vue
View File

@ -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,7 +25,7 @@
</template>
<script>
import vDrag from './drag'
import { hiprint, defaultElementTypeProvider } from "vue-plugin-hiprint";
hiprint.init({
providers: [defaultElementTypeProvider()],
@ -101,6 +101,7 @@ export default {
name: 'PrintDesignPage',
components: { NavMenu },
props: {},
directives: { drag: vDrag },
data() {
return {
hiprintTemplate: null,
@ -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;
@ -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
View 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
View 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)
}