Tmr-Admin/src/views/drawDot/index.vue

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