From f685e04a997df8112975d3ec7bc9521687aff83d Mon Sep 17 00:00:00 2001
From: zhuzhuanzhuan
Date: 星期三, 27 九月 2023 16:57:00 +0800
Subject: [PATCH] 添加新页面
---
src/views/TestWorkshop.vue | 180 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
public/static/计划停机管理.xls | 0
public/static/加工数量管理.xls | 0
public/static/非计划停机管理.xls | 0
4 files changed, 180 insertions(+), 0 deletions(-)
diff --git "a/public/static/\345\212\240\345\267\245\346\225\260\351\207\217\347\256\241\347\220\206.xls" "b/public/static/\345\212\240\345\267\245\346\225\260\351\207\217\347\256\241\347\220\206.xls"
new file mode 100644
index 0000000..6548b46
--- /dev/null
+++ "b/public/static/\345\212\240\345\267\245\346\225\260\351\207\217\347\256\241\347\220\206.xls"
Binary files differ
diff --git "a/public/static/\350\256\241\345\210\222\345\201\234\346\234\272\347\256\241\347\220\206.xls" "b/public/static/\350\256\241\345\210\222\345\201\234\346\234\272\347\256\241\347\220\206.xls"
new file mode 100644
index 0000000..53874e9
--- /dev/null
+++ "b/public/static/\350\256\241\345\210\222\345\201\234\346\234\272\347\256\241\347\220\206.xls"
Binary files differ
diff --git "a/public/static/\351\235\236\350\256\241\345\210\222\345\201\234\346\234\272\347\256\241\347\220\206.xls" "b/public/static/\351\235\236\350\256\241\345\210\222\345\201\234\346\234\272\347\256\241\347\220\206.xls"
new file mode 100644
index 0000000..6701ced
--- /dev/null
+++ "b/public/static/\351\235\236\350\256\241\345\210\222\345\201\234\346\234\272\347\256\241\347\220\206.xls"
Binary files differ
diff --git a/src/views/TestWorkshop.vue b/src/views/TestWorkshop.vue
new file mode 100644
index 0000000..717ae32
--- /dev/null
+++ b/src/views/TestWorkshop.vue
@@ -0,0 +1,180 @@
+<template>
+ <dv-full-screen-container class="full-screen-container">
+ <header class="page-header">
+ 娴嬭瘯杞﹂棿
+ <div class="header-right">
+ <a-button type="primary" icon="save" size="large" @click="saveDevicePositionByApi">淇濆瓨浣嶇疆</a-button>
+ </div>
+ </header>
+ <dv-border-box-8 class="content-container">
+ <div v-for="item in deviceList" :key="item.equipmentId" class="single-device"
+ :style="{top:item.top+'px',left:item.left+'px'}" @mousedown="handleMouseDown" :id="item.equipmentId">
+ <img :src="item.equipmentImageUrl" draggable="false">
+ <div draggable="false" class="device-info">
+ <div v-if="item.status==0" class="status-square" style="background-color: gray"></div>
+ <div v-if="item.status==1" class="status-square" style="background-color: red"></div>
+ <div v-if="item.status==2" class="status-square" style="background-color: green"></div>
+ <div v-if="item.status==3" class="status-square" style="background-color: yellow"></div>
+ <div class="device-id">{{item.equipmentId}}</div>
+ </div>
+ </div>
+ </dv-border-box-8>
+ </dv-full-screen-container>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ mouseX: 0, // 榧犳爣鍦ㄥ厓绱犲唴鐨刋鍧愭爣
+ mouseY: 0, // 榧犳爣鍦ㄥ厓绱犲唴鐨刌鍧愭爣,
+ dragging: false, //鏄惁鍦ㄦ嫋鎷戒腑
+ left: 0, // 鍏冪礌宸︿笂瑙掕窛绂荤埗瀹瑰櫒宸︿晶鐨勮窛绂�
+ top: 0, // 鍏冪礌宸︿笂瑙掕窛绂荤埗瀹瑰櫒椤堕儴鐨勮窛绂�,
+ elementId: '',// 琚嫋鎷藉厓绱犵殑id灞炴�у��
+ deviceList: [
+ {
+ equipmentId: '123213213123232',
+ equipmentStatus: 0,
+ equipmentImageUrl: require('../assets/8.png'),
+ top: 200,
+ left: 100,
+ status: 1
+ },
+ {
+ equipmentId: '512346789561232',
+ equipmentStatus: 0,
+ equipmentImageUrl: require('../assets/8.png'),
+ top: 500,
+ left: 753,
+ status: 0
+ },
+ {
+ equipmentId: '64746965647653',
+ equipmentStatus: 0,
+ equipmentImageUrl: require('../assets/8.png'),
+ top: 300,
+ left: 860,
+ status: 2
+ },
+ {
+ equipmentId: '33548976965462',
+ equipmentStatus: 0,
+ equipmentImageUrl: require('../assets/8.png'),
+ top: 100,
+ left: 380,
+ status: 3
+ },
+ {
+ equipmentId: '85484913549253',
+ equipmentStatus: 0,
+ equipmentImageUrl: require('../assets/8.png'),
+ top: 200,
+ left: 1500,
+ status: 2
+ }
+ ]
+ }
+ },
+ methods: {
+ /**
+ * 鎷栨嫿瀵硅薄榧犳爣鎸夐敭鎸変笅浜嬩欢
+ * @param event
+ */
+ handleMouseDown(event) {
+ this.dragging = true
+ this.mouseX = event.clientX
+ this.mouseY = event.clientY
+ this.elementId = event.currentTarget.id
+ this.top = event.currentTarget.offsetTop
+ this.left = event.currentTarget.offsetLeft
+ document.addEventListener('mousemove', this.handleMouseMove)
+ document.addEventListener('mouseup', this.handleMouseUp)
+ },
+ /**
+ * 鏂囨。瀵硅薄榧犳爣绉诲姩浜嬩欢
+ * @param event
+ */
+ handleMouseMove(event) {
+ if (this.dragging) {
+ const deltaX = event.clientX - this.mouseX
+ const deltaY = event.clientY - this.mouseY
+ this.left += deltaX
+ this.top += deltaY
+ this.deviceList.forEach(item => {
+ if (item.equipmentId === this.elementId) {
+ item.top = this.top
+ item.left = this.left
+ }
+ })
+ this.mouseX = event.clientX
+ this.mouseY = event.clientY
+ }
+ },
+ /**
+ * 鏂囨。瀵硅薄榧犳爣鎸夐敭寮硅捣浜嬩欢
+ * @param event
+ */
+ handleMouseUp(event) {
+ this.dragging = false
+ document.removeEventListener('mousemove', this.handleMouseMove)
+ document.removeEventListener('mouseup', this.handleMouseUp)
+ },
+ /**
+ * 璋冪敤鎺ュ彛淇濆瓨鎷栨嫿鍚庣殑浣嶇疆
+ */
+ saveDevicePositionByApi(){
+
+ }
+ },
+ mounted() {
+ // 绂佹鐢ㄦ埛閫変腑鍐呭
+ document.onselectstart = () => false
+ }
+ }
+</script>
+
+<style scoped lang="less">
+ .full-screen-container {
+ background-image: url('../assets/Bj.jpg');
+ color: #fff;
+ width: 100vw;
+ height: 100vh;
+ position: relative;
+ .page-header {
+ font-size: 50px;
+ text-align: center;
+ position: relative;
+ .header-right{
+ position: absolute;
+ right: 200px;
+ top: 0;
+ }
+ }
+ .content-container {
+ .single-device {
+ position: absolute;
+ border: 1px solid transparent;
+ padding: 5px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ &:active {
+ border: 1px solid #00b3ff;
+ }
+ .device-info {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ .status-square {
+ width: 14px;
+ height: 14px;
+ border: 1px solid #fff;
+ border-radius: 2px;
+ }
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3