root/nladmin-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

===

Browse Source
This commit is contained in:
xiangxy
2025-04-11 14:55:10 +08:00
parent 342ef26549
commit d4e0ff0fc2
1 changed files with 303 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

349
src/views/system/scheduling/pointscreen.vue
View File

@@ -67,6 +67,7 @@
</div> </div>
<!-- 中间编辑框 --> <!-- 中间编辑框 -->
<div class="center-box">
<div class="editor-container" @scroll="handleScroll"> <div class="editor-container" @scroll="handleScroll">
<!-- 标尺部分 --> <!-- 标尺部分 -->
<div class="ruler-horizontal" :style="horizontalRulerStyle"> <div class="ruler-horizontal" :style="horizontalRulerStyle">
@@ -93,6 +94,7 @@
<!-- 编辑画布 --> <!-- 编辑画布 -->
<div <div
ref="editorCanvas"
class="editor-canvas" class="editor-canvas"
:style="{ :style="{
width: canvasWidth + 'px', width: canvasWidth + 'px',
@@ -101,22 +103,23 @@
}" }"
@drop="onDrop" @drop="onDrop"
@dragover.prevent @dragover.prevent
ref="editorCanvas"
> >
<div <div
v-for="(component, index) in canvasComponents" v-for="(component, index) in canvasComponents"
:key="index" :key="index"
ref="targetDiv"
:style="getComponentStyle(component)" :style="getComponentStyle(component)"
class="canvas-component" class="canvas-component"
ref="targetDiv"
:class="{ 'highlight-border': isActive && currentIndex == index}" :class="{ 'highlight-border': isActive && currentIndex == index}"
@mousedown="startDrag(component, $event)" @mousedown="startDrag(component, $event)"
@click="selectComponent(component, index)" @click="selectComponent(component, index)"
> >
<!-- <div class="pbox" :style="{background: '#fc0 url('+ component.imageUrl +') no-repeat center;'}"> --> <!-- <div class="pbox" :style="{background: '#fc0 url('+ component.imageUrl +') no-repeat center;'}"> -->
<div class="pbox" :style="{backgroundImage: 'url(' + component.imageUrl + ')'}"> <!-- <div class="pbox" :style="{backgroundImage: 'url(' + component.imageUrl + ')'}">
<div style="line-height: 100%; font-size:12px; color: #000;">{{ component.name}}</div> <div style="line-height: 100%; font-size:12px; color: #000;">{{ component.name}}</div>
</div> </div> -->
{{ component.name }}
<!-- <div style="width: 100%; height: 100%; font-size: 14px; line-height: 100%;">{{ component.name }}</div> -->
<!-- <img <!-- <img
v-if="component.imageUrl" v-if="component.imageUrl"
:src="component.imageUrl" :src="component.imageUrl"
@@ -127,13 +130,24 @@
</div> </div>
</div> </div>
</div> </div>
<div class="sbox">
<!-- <div class="sbox-t">点位状态配置</div> -->
<h3>点位状态配置</h3>
<div class="s-container">
<div v-for="(e, i) in statusList" :key="i" class="sbox-l">
<span class="s-txt">{{ e.name }}</span>
<span class="s-btn"><el-button type="primary" @click="toDialog(e)">编辑</el-button></span>
</div>
</div>
</div>
</div>
<!-- 右侧属性编辑面板 --> <!-- 右侧属性编辑面板 -->
<div class="right-panel"> <div class="right-panel">
<h3>属性编辑</h3> <h3>属性编辑</h3>
<div v-if="selectedComponent"> <div v-if="selectedComponent">
<label>名称:</label> <label>名称:</label>
<el-input v-model="selectedComponent.name" type="value" :disabled="true"/> <el-input v-model="selectedComponent.name" type="value" :disabled="true" />
<label>X 坐标:</label> <label>X 坐标:</label>
<el-input v-model.number="selectedComponent.x" type="number" /> <el-input v-model.number="selectedComponent.x" type="number" />
<label>Y 坐标:</label> <label>Y 坐标:</label>
@@ -167,24 +181,56 @@
> >
<el-button type="primary">点击上传</el-button> <el-button type="primary">点击上传</el-button>
</el-upload> --> </el-upload> -->
<label></label> <label />
</div> </div>
<div v-else> <div v-else>
请选择一个点位 请选择一个点位
</div> </div>
</div> </div>
<!-- 图标配置 -->
<el-dialog
title="图标"
:visible.sync="dialogVisible"
width="50%"
>
<!-- <span>这是一段信息</span> -->
<div class="icon-container">
<div v-for="(e, i) in iconList" :key="i" class="iconbox" :class="{ 'highlight-border': e.id === pkId}" @click="toSelectIcon(e)">
<img :src="e.iconUrl">
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="toSureBind()">确 定</el-button>
</span>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import draggable from 'vuedraggable'; import draggable from 'vuedraggable'
export default { export default {
components: { components: {
draggable, draggable
}, },
data() { data() {
return { return {
pkId: '',
pkIconObj: '',
selStatusObj: '',
statusList: [
{ id: 1, code: 'c001', name: '状态1' },
{ id: 2, code: 'c002', name: '状态2' },
{ id: 3, code: 'c003', name: '状态3' },
{ id: 4, code: 'c004', name: '状态4' }
],
iconList: [
{ id: 1, iconUrl: 'https://img2.baidu.com/it/u=2914671817,628443499&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889' },
{ id: 2, iconUrl: 'https://img0.baidu.com/it/u=3613398591,98570664&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500' },
{ id: 3, iconUrl: 'https://img0.baidu.com/it/u=1796365119,3995265789&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667' }
],
dialogVisible: false,
// 新增分辨率设置 // 新增分辨率设置
canvasWidth: 1920, canvasWidth: 1920,
canvasHeight: 1080, canvasHeight: 1080,
@@ -199,7 +245,7 @@ export default {
components: [ // 左侧可拖拽点位 components: [ // 左侧可拖拽点位
{ id: 1, name: '点位1', type: 'component1' }, { id: 1, name: '点位1', type: 'component1' },
{ id: 2, name: '点位2', type: 'component2' }, { id: 2, name: '点位2', type: 'component2' },
{ id: 3, name: '点位3', type: 'component3' }, { id: 3, name: '点位3', type: 'component3' }
], ],
pointSetOptions: [ pointSetOptions: [
{ id: 1, name: '点位1', code: '029-01', pointImg: 'https://img2.baidu.com/it/u=2914671817,628443499&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889' }, { id: 1, name: '点位1', code: '029-01', pointImg: 'https://img2.baidu.com/it/u=2914671817,628443499&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=889' },
@@ -221,56 +267,28 @@ export default {
rulerUnit: 50, rulerUnit: 50,
horizontalRulerTicks: [], horizontalRulerTicks: [],
verticalRulerTicks: [], verticalRulerTicks: [],
saveList:[], saveList: [],
scrollLeft: 0, scrollLeft: 0,
scrollTop: 0, scrollTop: 0,
currentIndex: '', currentIndex: '',
currentObject: {}, currentObject: {}
};
},
watch: {
// 监听分辨率变化
canvasWidth(newVal) {
this.updateRulerTicks();
this.adjustComponentsPosition();
},
canvasHeight(newVal) {
this.updateRulerTicks();
this.adjustComponentsPosition();
} }
}, },
mounted() {
// 添加全局点击监听
document.addEventListener('click', this.handleDocumentClick);
this.updateRulerTicks();
// const box = document.querySelector('.ruler-horizontal')
// const vox = document.querySelector('.ruler-vertical')
// window.addEventListener('scroll', () => {
// const scrollX = window.scrollX; // 获取水平滚动值
// box.style.left = `${30 + scrollX}px`; // 更新left值
// const scrollY = window.scrollY; // 获取垂直滚动值
// vox.style.top = `${20 + scrollY}px`; // 更新top值
// })
},
beforeDestroy() {
// 移除监听，防止内存泄漏
document.removeEventListener('click', this.handleDocumentClick);
},
computed: { computed: {
// 顶部标尺样式 // 顶部标尺样式
horizontalRulerStyle() { horizontalRulerStyle() {
return { return {
top: this.scrollTop + 'px', top: this.scrollTop + 'px',
width: this.canvasWidth + 'px', width: this.canvasWidth + 'px'
} }
}, },
// 左侧标尺样式 // 左侧标尺样式
verticalRulerStyle() { verticalRulerStyle() {
return { return {
left: this.scrollLeft + 'px', left: this.scrollLeft + 'px',
height: this.canvasHeight + 'px', height: this.canvasHeight + 'px'
}
} }
},
// // 左侧标尺样式 // // 左侧标尺样式
// verticalRulerStyle() { // verticalRulerStyle() {
// return { // return {
@@ -287,26 +305,78 @@ export default {
// } // }
// } // }
}, },
watch: {
// 监听分辨率变化
canvasWidth(newVal) {
this.updateRulerTicks()
this.adjustComponentsPosition()
},
canvasHeight(newVal) {
this.updateRulerTicks()
this.adjustComponentsPosition()
}
},
mounted() {
// 添加全局点击监听
document.addEventListener('click', this.handleDocumentClick)
this.updateRulerTicks()
// const box = document.querySelector('.ruler-horizontal')
// const vox = document.querySelector('.ruler-vertical')
// window.addEventListener('scroll', () => {
// const scrollX = window.scrollX; // 获取水平滚动值
// box.style.left = `${30 + scrollX}px`; // 更新left值
// const scrollY = window.scrollY; // 获取垂直滚动值
// vox.style.top = `${20 + scrollY}px`; // 更新top值
// })
},
beforeDestroy() {
// 移除监听，防止内存泄漏
document.removeEventListener('click', this.handleDocumentClick)
},
methods: { methods: {
toSureBind() {
this.statusList.map(item => {
if (item === this.selStatusObj) {
item.bindIcon = this.pkIconObj.iconUrl
}
})
console.log(this.statusList, '2222222')
this.dialogVisible = false
},
toDialog(e) {
this.pkId = ''
this.iconList.map(item => {
if (item.iconUrl === e.bindIcon) {
this.pkId = item.id
}
})
// this.pkId = this.pkId === e.id ? '' : e.id
this.dialogVisible = !this.dialogVisible
this.selStatusObj = e
},
toSelectIcon(e) {
this.pkId = this.pkId === e.id ? '' : e.id
this.pkIconObj = e
},
handleDocumentClick(event) { handleDocumentClick(event) {
// 判断点击是否发生在目标 div 外部 // 判断点击是否发生在目标 div 外部
if (this.$refs.targetDiv && !this.$refs.targetDiv[this.currentIndex].contains(event.target)) { if (this.$refs.targetDiv && !this.$refs.targetDiv[this.currentIndex].contains(event.target)) {
this.isActive = false; this.isActive = false
} }
}, },
handleFileChange(file) { handleFileChange(file) {
// 验证文件类型 // 验证文件类型
if (!file.raw.type.startsWith('image/')) { if (!file.raw.type.startsWith('image/')) {
this.$message.error('只能上传图片文件！'); this.$message.error('只能上传图片文件！')
return; return
} }
// 读取文件生成预览 // 读取文件生成预览
const reader = new FileReader(); const reader = new FileReader()
reader.onload = (e) => { reader.onload = (e) => {
this.bgUrl = e.target.result; this.bgUrl = e.target.result
}; }
reader.readAsDataURL(file.raw); reader.readAsDataURL(file.raw)
console.log(this.bgUrl, 'bgimg') console.log(this.bgUrl, 'bgimg')
// 切换背景图片，重置 // 切换背景图片，重置
// this.canvasComponents = []; // this.canvasComponents = [];
@@ -314,10 +384,10 @@ export default {
}, },
// 分辨率变更处理 // 分辨率变更处理
handleResolutionChange() { handleResolutionChange() {
if (this.canvasWidth < 100) this.canvasWidth = 100; if (this.canvasWidth < 100) this.canvasWidth = 100
if (this.canvasHeight < 100) this.canvasHeight = 100; if (this.canvasHeight < 100) this.canvasHeight = 100
this.updateRulerTicks(); this.updateRulerTicks()
this.adjustComponentsPosition(); this.adjustComponentsPosition()
}, },
// 更新标尺刻度 // 更新标尺刻度
@@ -325,62 +395,62 @@ export default {
this.horizontalRulerTicks = Array.from( this.horizontalRulerTicks = Array.from(
{ length: Math.ceil(this.canvasWidth / this.rulerUnit) }, { length: Math.ceil(this.canvasWidth / this.rulerUnit) },
(_, i) => i (_, i) => i
); )
this.verticalRulerTicks = Array.from( this.verticalRulerTicks = Array.from(
{ length: Math.ceil(this.canvasHeight / this.rulerUnit) }, { length: Math.ceil(this.canvasHeight / this.rulerUnit) },
(_, i) => i (_, i) => i
); )
}, },
// 调整组件位置 // 调整组件位置
adjustComponentsPosition() { adjustComponentsPosition() {
this.canvasComponents.forEach(component => { this.canvasComponents.forEach(component => {
// 限制X坐标 // 限制X坐标
const maxX = this.canvasWidth - component.width; const maxX = this.canvasWidth - component.width
if (component.x > maxX) { if (component.x > maxX) {
component.x = Math.max(0, maxX); component.x = Math.max(0, maxX)
} }
// 限制Y坐标 // 限制Y坐标
const maxY = this.canvasHeight - component.height; const maxY = this.canvasHeight - component.height
if (component.y > maxY) { if (component.y > maxY) {
component.y = Math.max(0, maxY); component.y = Math.max(0, maxY)
} }
}); })
}, },
// 新增厂区变更处理方法 // 新增厂区变更处理方法
handleFactoryChange(factoryId) { handleFactoryChange(factoryId) {
console.log(`切换到厂区: ${factoryId}`); console.log(`切换到厂区: ${factoryId}`)
console.log('selectedFactory', this.selectedFactory) console.log('selectedFactory', this.selectedFactory)
this.factoryOptions.map(el => { this.factoryOptions.map(el => {
if (el.id == factoryId) { if (el.id === factoryId) {
this.selFacName = el.name; this.selFacName = el.name
} }
}) })
// 这里可以添加加载厂区配置的逻辑 // 这里可以添加加载厂区配置的逻辑
// 例如：清空当前画布或加载对应厂区配置 // 例如：清空当前画布或加载对应厂区配置
this.canvasComponents = []; this.canvasComponents = []
this.selectedComponent = null; this.selectedComponent = null
}, },
handlePointImgChange(PointSetId) { handlePointImgChange(PointSetId) {
// console.log(`切换到点位图片: ${PointSetId}`); // console.log(`切换到点位图片: ${PointSetId}`);
this.pointSetOptions.map(el => { this.pointSetOptions.map(el => {
if (el.id == PointSetId) { if (el.id === PointSetId) {
this.selectedComponent.imageUrl = el.pointImg; this.selectedComponent.imageUrl = el.pointImg
} }
}) })
}, },
toSave () { toSave() {
console.log(this.bgUrl) console.log(this.bgUrl)
// console.log(this.selectedComponent) // console.log(this.selectedComponent)
console.log(JSON.stringify(this.canvasComponents)) console.log(JSON.stringify(this.canvasComponents))
}, },
onDragStart(event) { onDragStart(event) {
// console.log('eeee', event) // console.log('eeee', event)
event.item.dataset.type = this.components[event.oldIndex].type; event.item.dataset.type = this.components[event.oldIndex].type
event.item.dataset.id = this.components[event.oldIndex].id; // 新加 event.item.dataset.id = this.components[event.oldIndex].id // 新加
this.currentObject = this.components[event.oldIndex] this.currentObject = this.components[event.oldIndex]
if(this.canvasComponents.some(item => { if (this.canvasComponents.some(item => {
return item.id === this.currentObject.id return item.id === this.currentObject.id
})) { })) {
console.log('已存在') console.log('已存在')
@@ -393,8 +463,8 @@ export default {
// console.log('11222', event.dataTransfer.getData('id')) // console.log('11222', event.dataTransfer.getData('id'))
// console.log('22333', event.dataTransfer.getData('type')) // console.log('22333', event.dataTransfer.getData('type'))
// const type = event.dataTransfer.getData('type'); // const type = event.dataTransfer.getData('type');
const type = this.currentObject.type; const type = this.currentObject.type
const id = this.currentObject.id; const id = this.currentObject.id
const newComponent = { const newComponent = {
id, id,
type, type,
@@ -403,14 +473,14 @@ export default {
y: event.offsetY - this.dragOffset.y, y: event.offsetY - this.dragOffset.y,
width: 100, width: 100,
height: 50, height: 50,
imageUrl: '', imageUrl: ''
}; }
if(this.canvasComponents.some(item => { if (this.canvasComponents.some(item => {
return item.id === this.currentObject.id return item.id === this.currentObject.id
})) { })) {
console.log('已存在') console.log('已存在')
}else { } else {
this.canvasComponents.push(newComponent); this.canvasComponents.push(newComponent)
} }
}, },
getComponentStyle(component) { getComponentStyle(component) {
@@ -421,68 +491,68 @@ export default {
width: `${component.width}px`, width: `${component.width}px`,
height: `${component.height}px`, height: `${component.height}px`,
border: '1px solid #ccc', border: '1px solid #ccc',
cursor: this.isDragging ? 'grabbing' : 'move', cursor: this.isDragging ? 'grabbing' : 'move'
}; }
}, },
// 开始拖拽 // 开始拖拽
startDrag(component, event) { startDrag(component, event) {
this.selectedComponent = component; this.selectedComponent = component
this.isDragging = true; this.isDragging = true
// 计算鼠标在组件内部的偏移量 // 计算鼠标在组件内部的偏移量
const rect = event.target.getBoundingClientRect(); const rect = event.target.getBoundingClientRect()
this.dragOffset = { this.dragOffset = {
x: event.clientX - rect.left, x: event.clientX - rect.left,
y: event.clientY - rect.top, y: event.clientY - rect.top
}; }
// 绑定全局事件 // 绑定全局事件
document.addEventListener('mousemove', this.onDrag); document.addEventListener('mousemove', this.onDrag)
document.addEventListener('mouseup', this.stopDrag); document.addEventListener('mouseup', this.stopDrag)
}, },
// 拖拽中 // 拖拽中
onDrag(event) { onDrag(event) {
if (!this.isDragging || !this.selectedComponent) return; if (!this.isDragging || !this.selectedComponent) return
// 计算组件的新位置（相对于画布） // 计算组件的新位置（相对于画布）
const canvasRect = this.$refs.editorCanvas.getBoundingClientRect(); const canvasRect = this.$refs.editorCanvas.getBoundingClientRect()
const newX = event.clientX - canvasRect.left - this.dragOffset.x; const newX = event.clientX - canvasRect.left - this.dragOffset.x
const newY = event.clientY - canvasRect.top - this.dragOffset.y; const newY = event.clientY - canvasRect.top - this.dragOffset.y
// 更新组件位置 // 更新组件位置
this.selectedComponent.x = Math.max(0, newX); this.selectedComponent.x = Math.max(0, newX)
this.selectedComponent.y = Math.max(0, newY); this.selectedComponent.y = Math.max(0, newY)
}, },
// 停止拖拽 // 停止拖拽
stopDrag() { stopDrag() {
this.isDragging = false; this.isDragging = false
document.removeEventListener('mousemove', this.onDrag); document.removeEventListener('mousemove', this.onDrag)
document.removeEventListener('mouseup', this.stopDrag); document.removeEventListener('mouseup', this.stopDrag)
}, },
selectComponent(component, index) { selectComponent(component, index) {
this.selectedComponent = component; this.selectedComponent = component
this.isActive = true; this.isActive = true
this.selectedPointImg = ''; this.selectedPointImg = ''
this.currentIndex = index; this.currentIndex = index
}, },
handleUploadSuccess(response, file) { handleUploadSuccess(response, file) {
if (this.selectedComponent) { if (this.selectedComponent) {
this.selectedComponent.imageUrl = URL.createObjectURL(file.raw); this.selectedComponent.imageUrl = URL.createObjectURL(file.raw)
} }
}, },
beforeUpload(file) { beforeUpload(file) {
const isImage = file.type.startsWith('image/'); const isImage = file.type.startsWith('image/')
if (!isImage) { if (!isImage) {
this.$message.error('只能上传图片文件！'); this.$message.error('只能上传图片文件！')
} }
return isImage; return isImage
}, },
handleScroll(e) { handleScroll(e) {
this.scrollLeft = e.target.scrollLeft; this.scrollLeft = e.target.scrollLeft
this.scrollTop = e.target.scrollTop; this.scrollTop = e.target.scrollTop
}, }
}, }
}; }
</script> </script>
<style scoped> <style scoped>
@@ -514,7 +584,6 @@ export default {
color: #666; color: #666;
} }
/* 新增厂区选择器样式 */ /* 新增厂区选择器样式 */
.factory-selector { .factory-selector {
margin-bottom: 20px; margin-bottom: 20px;
@@ -549,14 +618,46 @@ export default {
border: 1px solid #c0c4cc; border: 1px solid #c0c4cc;
cursor: move; cursor: move;
} }
.center-box {
.editor-container {
flex: 1; flex: 1;
position: relative; position: relative;
overflow: auto;
}
.sbox {
margin: 0 20px;
}
.s-container {
display: flex;
/* justify-content: space-between; */
}
.sbox-t {
font-size: 20px;
}
.sbox-l {
display: flex;
justify-content: space-between;
border: 1px solid #ccc;
width: 150px;
height: 40px;
padding: 5px 4px;
margin: 2px 6px;
}
.s-txt {
display: inline-block;
font-size: 14px;
line-height: 26px;
margin-right: 5px;
}
.s-btn {
display: inline-block;
}
.editor-container {
/* flex: 1; */
position: relative;
margin: 0 20px; margin: 0 20px;
/* min-height: 600px; /* min-height: 600px;
max-height: 1080px; */ max-height: 1080px; */
height: 650px; height: 600px;
overflow: auto; overflow: auto;
} }
@@ -629,7 +730,7 @@ export default {
text-align: center; text-align: center;
/* box-sizing: border-box; /* box-sizing: border-box;
border: 1px solid #0073e1 !important; */ border: 1px solid #0073e1 !important; */
/* line-height: 50px; */ line-height: 50px;
box-sizing: border-box; box-sizing: border-box;
/* border: 2px dashed rgb(77 187 249); */ /* border: 2px dashed rgb(77 187 249); */
} }
@@ -668,12 +769,30 @@ input {
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
line-height: 100%;
background-size: 100% 100%; background-size: 100% 100%;
} }
.highlight-border { .highlight-border {
/* border: 3px solid #2196f3; */ /* border: 3px solid #2196f3; */
/* box-shadow: 0 0 8px rgba(33, 150, 243, 0.5); */ /* box-shadow: 0 0 8px rgba(33, 150, 243, 0.5); */
border: 3px solid #ff0; border: 3px solid #ff0;
box-shadow: 0 0 20px rgb(255, 255, 0); box-shadow: 0 0 5px rgb(255, 255, 0);
}
.icon-container{
display: flex;
width: 100%;
justify-content: flex-start;
}
.iconbox {
display: inline-block;
box-sizing: border-box;
width: 60px;
height: 40px;
margin: 5px;
/* border: 1px solid #ccc; */
}
.iconbox img{
width: 100%;
height: 100%;
} }
</style> </style>