|
|
@@ -1,271 +0,0 @@
|
|
|
-<template>
|
|
|
- <div id="app">
|
|
|
-
|
|
|
- <!-- 图片区域 -->
|
|
|
- <div class="box">
|
|
|
- <div
|
|
|
- ref="imageArea"
|
|
|
- class="image-area"
|
|
|
- @click="handleClick"
|
|
|
- >
|
|
|
- <img src="../../assets/dot.jpeg" alt="图片" class="image">
|
|
|
- <template v-for="shape in shapes">
|
|
|
- <div
|
|
|
- v-for="(point, index) in shape.points"
|
|
|
- :key="`shape-${shape.type}-point-${index}`"
|
|
|
- :style="getPointStyle(point)"
|
|
|
- class="point-marker"
|
|
|
- ></div>
|
|
|
- <div v-if="shape.type === '1' || shape.type === '2'"
|
|
|
- :style="getRectangleStyle(shape.points)"
|
|
|
- class="rectangle"
|
|
|
- ></div>
|
|
|
- <polyline v-if="shape.type === '3'"
|
|
|
- :points="getLinePoints(shape.points)"
|
|
|
- class="3"
|
|
|
- fill="none" stroke="red" stroke-width="2"/>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- -->
|
|
|
- <div>
|
|
|
- <h3 style="padding-left: 20px;">鼠标点击获取图形坐标</h3>
|
|
|
- <el-form :model="formObj" ref="formObj" label-width="120px" class="demo-dynamic">
|
|
|
- <el-form-item label="区域类型:">
|
|
|
- <el-radio-group v-model="currentShapeType" @change="changeType">
|
|
|
- <el-radio label="1">卧床</el-radio>
|
|
|
- <el-radio label="2">喷淋</el-radio>
|
|
|
- <el-radio label="3">水槽</el-radio>
|
|
|
- </el-radio-group>
|
|
|
- </el-form-item>
|
|
|
- <!-- 卧床 -->
|
|
|
- <el-form-item
|
|
|
- label="卧床(1):"
|
|
|
- required
|
|
|
- v-if=" currentShapeType == '1'"
|
|
|
- >
|
|
|
- <div v-if="formObj.bed.length>0" key="1">
|
|
|
- <div><span style="padding-right: 20px;">左上:{{ `X:${formObj.bed[0]?.x || ''}Y:${formObj.bed[0]?.y || ''}`}}</span> <span>右上:{{ `X:${formObj.bed[1]?.x || ''}Y:${formObj.bed[1]?.y || ''}`}}</span></div>
|
|
|
- <div><span style="padding-right: 20px;">左下:{{ `X:${formObj.bed[3]?.x || ''}Y:${formObj.bed[3]?.y || ''}`}}</span> <span>右下:{{ `X:${formObj.bed[2]?.x || ''}Y:${formObj.bed[2]?.y || ''}`}}</span></div>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item
|
|
|
- label="卧床(2):"
|
|
|
- required
|
|
|
- v-if=" currentShapeType == '1'"
|
|
|
- >
|
|
|
- <div v-if="formObj.bed1.length>0 " key="2">
|
|
|
- <div><span style="padding-right: 20px;">左上:{{ `X:${formObj.bed1[0]?.x || ''}Y:${formObj.bed1[0]?.y || ''}`}}</span> <span>右上:{{ `X:${formObj.bed1[1]?.x || ''}Y:${formObj.bed1[1]?.y || ''}`}}</span></div>
|
|
|
- <div><span style="padding-right: 20px;">左下:{{ `X:${formObj.bed1[3]?.x || ''}Y:${formObj.bed1[3]?.y || ''}`}}</span> <span>右下:{{ `X:${formObj.bed1[2]?.x || ''}Y:${formObj.bed1[2]?.y || ''}`}}</span></div>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <!--喷淋 -->
|
|
|
- <el-form-item
|
|
|
- label="喷淋:"
|
|
|
- required
|
|
|
- v-if=" currentShapeType == '2'"
|
|
|
- >
|
|
|
- <div v-if="formObj.spray.length>0 && currentShapeType == '2' " key="1">
|
|
|
- <div><span style="padding-right: 20px;">左上:{{ `X:${formObj.spray[0]?.x || ''}Y:${formObj.spray[0]?.y || ''}`}}</span> <span>右上:{{ `X:${formObj.spray[1]?.x || ''}Y:${formObj.spray[1]?.y || ''}`}}</span></div>
|
|
|
- <div><span style="padding-right: 20px;">左下:{{ `X:${formObj.spray[3]?.x || ''}Y:${formObj.spray[3]?.y || ''}`}}</span> <span>右下:{{ `X:${formObj.spray[2]?.x || ''}Y:${formObj.spray[2]?.y || ''}`}}</span></div>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- <!--水槽 -->
|
|
|
- <el-form-item
|
|
|
- label="水槽:"
|
|
|
- required
|
|
|
- v-if=" currentShapeType == '3'"
|
|
|
- >
|
|
|
- <div v-if="formObj.sprayList.length>0 " key="1">
|
|
|
- <div v-for="(item,index) in formObj.sprayList" :key="index"><span style="padding-right: 20px;" >第{{index+1}}点:{{ `X:${item?.x || ''}Y:${item?.y || ''}`}}</span> </div>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
-
|
|
|
- <el-form-item>
|
|
|
- <el-button type="primary" @click="submitForm('formObj')">确认提交</el-button>
|
|
|
- <el-button @click="handleConfirm">重置</el-button>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- <!-- 显示当前形状的坐标点 -->
|
|
|
- <pre>{{ shapes }}</pre>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
-
|
|
|
- <script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- currentShapeType: '1',
|
|
|
- shapes: [],
|
|
|
- currentPoints: [],
|
|
|
-
|
|
|
- formObj: {
|
|
|
- type:'1',
|
|
|
- bed:[],
|
|
|
- bed1:[],
|
|
|
- spray:[],
|
|
|
- sprayList:[]
|
|
|
- }
|
|
|
- };
|
|
|
- },
|
|
|
- methods: {
|
|
|
- changeType(val){
|
|
|
- this.currentShapeType = val;
|
|
|
- this.currentPoints = [];
|
|
|
- },
|
|
|
- resetShape() {
|
|
|
- this.currentPoints = [];
|
|
|
- },
|
|
|
- handleClick(event) {
|
|
|
- const rect = this.$refs.imageArea.getBoundingClientRect();
|
|
|
- const x = event.clientX - rect.left;
|
|
|
- const y = event.clientY - rect.top;
|
|
|
- this.currentPoints.push({ x, y });
|
|
|
- if(this.currentShapeType == '1'){
|
|
|
- if(this.formObj.bed.length < 4){
|
|
|
- this.formObj.bed.push({ x, y });
|
|
|
- }else{
|
|
|
- this.formObj.bed1.push({ x, y });
|
|
|
- }
|
|
|
- console.log( this.formObj.bed,'hss')
|
|
|
- } else if (this.currentShapeType == '2') {
|
|
|
- this.formObj.spray=[...this.currentPoints]
|
|
|
- } else if(this.currentShapeType == '3'){
|
|
|
- this.formObj.sprayList = [...this.currentPoints]
|
|
|
- }
|
|
|
- const requiredPoints = this.getRequiredPointsForShape(this.currentShapeType);
|
|
|
-
|
|
|
- if (this.currentPoints.length === requiredPoints) {
|
|
|
- this.shapes.push({
|
|
|
- type: this.currentShapeType,
|
|
|
- points: [...this.currentPoints],
|
|
|
- });
|
|
|
-
|
|
|
- this.currentPoints = [];
|
|
|
- }
|
|
|
- },
|
|
|
- getRequiredPointsForShape(shapeType) {
|
|
|
- switch (shapeType) {
|
|
|
- case '1':
|
|
|
- return 4;
|
|
|
- case '2':
|
|
|
- return 4;
|
|
|
- case '3':
|
|
|
- return 8; // Example: 10 points for the 3
|
|
|
- default:
|
|
|
- return 4;
|
|
|
- }
|
|
|
- },
|
|
|
- getPointStyle(point) {
|
|
|
- return {
|
|
|
- top: `${point.y}px`,
|
|
|
- left: `${point.x}px`,
|
|
|
- position: 'absolute',
|
|
|
- width: '10px',
|
|
|
- height: '10px',
|
|
|
- backgroundColor: 'blue',
|
|
|
- borderRadius: '50%',
|
|
|
- };
|
|
|
- },
|
|
|
- getRectangleStyle(points) {
|
|
|
- if (points.length < 4) return {};
|
|
|
- const [leftup, leftdown, rightup, rightdown] = points;
|
|
|
- const width = Math.abs(rightup.x - leftup.x);
|
|
|
- const height = Math.abs(leftdown.y - rightdown.y);
|
|
|
- return {
|
|
|
- top: `${leftup.y}px`,
|
|
|
- left: `${leftup.x}px`,
|
|
|
- width: `${width}px`,
|
|
|
- height: `${height}px`,
|
|
|
- border: '2px solid red',
|
|
|
- position: 'absolute',
|
|
|
- };
|
|
|
- },
|
|
|
- getLinePoints(points) {
|
|
|
- return points.map(point => `${point.x},${point.y}`).join(' ');
|
|
|
- },
|
|
|
- // 重置
|
|
|
- handleConfirm(){
|
|
|
- this.currentPoints = []
|
|
|
- this.shapes= []
|
|
|
- this.currentShapeType = '1';
|
|
|
- this.formObj ={
|
|
|
- bed:[],
|
|
|
- bed1:[],
|
|
|
- spray:[],
|
|
|
- sprayList:[]
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- //
|
|
|
- submitForm(formName) {
|
|
|
- console.log(this.formObj,'提交')
|
|
|
- this.$refs[formName].validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- alert('submit!');
|
|
|
- } else {
|
|
|
- console.log('error submit!!');
|
|
|
- return false;
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- resetForm(formName) {
|
|
|
- this.$refs[formName].resetFields();
|
|
|
- },
|
|
|
- removeDomain(item) {
|
|
|
- var index = this.formObj.bedList.indexOf(item)
|
|
|
- if (index !== -1) {
|
|
|
- this.formObj.bedList.splice(index, 1)
|
|
|
- }
|
|
|
- },
|
|
|
- addDomain() {
|
|
|
- this.formObj.bedList.push({
|
|
|
- value: '',
|
|
|
- key: Date.now()
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- },
|
|
|
- };
|
|
|
- </script>
|
|
|
-
|
|
|
- <style scoped>
|
|
|
- .el-button {
|
|
|
- padding:10px;
|
|
|
- }
|
|
|
- .box{
|
|
|
- display: flex;
|
|
|
-
|
|
|
- }
|
|
|
- .image-area {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- display: inline-block;
|
|
|
- width:700px;
|
|
|
- height:600px;
|
|
|
- }
|
|
|
- .image {
|
|
|
- width: 100%;
|
|
|
- height: auto;
|
|
|
- }
|
|
|
- .rectangle {
|
|
|
- border: 2px solid red;
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
- .point-marker {
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
- .3 {
|
|
|
- position: absolute;
|
|
|
- fill: none;
|
|
|
- stroke: red;
|
|
|
- stroke-width: 2px;
|
|
|
- }
|
|
|
- </style>
|
|
|
-
|