视频安防位置选择

ant-design-vue-jeecg/src/views/pm/monitoring-device/PmMonitoringDeviceList.vue

@@ -157,9 +157,14 @@
             dataIndex: 'theirEquipment'
           },
           {
-            title:'xy值',
-            align:"center",
-            dataIndex: 'coordinate'
+            title: 'xy值',
+            align: "center",
+            dataIndex: 'coordinate',
+            customRender(t, r, index) {
+              if (t) {
+                return t.x + ',' + t.y;
+              }
+            },
           },
           {
             title:'设备状态',

ant-design-vue-jeecg/src/views/pm/monitoring-device/modules/PmMonitoringDeviceForm.vue

@@ -66,10 +66,19 @@
             </a-form-model-item>
           </a-col>
           <a-col :span="12">
-            <a-form-model-item label="xy值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="coordinate">
-              <a-input v-model="model.coordinate" placeholder="请输入xy值" disabled ></a-input>
+            <a-form-model-item label="xy值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="coordinateTmp">
+              <a-input v-model="model.coordinateTmp" disabled></a-input>
             </a-form-model-item>
           </a-col>
+          <a-col :span="24">
+            <div style="position: relative">
+              <img src="@/assets/floor.png" alt="floor" width="100%" height="100%"
+                   @click="imgClick($event)" ref="imgBg" @load="floorImgLoadComplete($event)"/>
+              <img :src="doorIconPath" alt="door"
+                   :style="doorIconStyle"
+                   v-show="doorIconPath"/>
+            </div>
+          </a-col>
         </a-row>
       </a-form-model>
     </j-form-container>
@@ -96,6 +105,7 @@
     data () {
       return {
         model:{
+          coordinateTmp: null,
          },
         labelCol: {
           xs: { span: 24 },
@@ -113,6 +123,17 @@
           edit: "/pm/pmMonitoringDevice/edit",
           queryById: "/pm/pmMonitoringDevice/queryById"
         },
+        statusList: [
+        {name: '正常', value: 1, imgPath: require('@/assets/door-close.png')},
+        {name: '离线', value: 2, imgPath: require('@/assets/door-offline.png')},
+        {name: '损坏', value: 3, imgPath: require('@/assets/door-warning.png')}],
+        doorIconStyle: {
+          position: 'absolute',
+          top: '0px',
+          left: '0px',
+          width: '40px'
+        },
+        doorIconPath: null,
       }
     },
     computed: {
@@ -141,12 +162,23 @@
             let httpurl = '';
             let method = '';
             if(!this.model.id){
+            // 设置创建用户Id
+            this.model.createUserId = this.$store.getters.userInfo.id;
               httpurl+=this.url.add;
               method = 'post';
             }else{
               httpurl+=this.url.edit;
                method = 'put';
             }
+            // 初始化坐标对象并赋值
+            let coordinate = this.model.coordinateTmp.split(',');
+            this.model.coordinate = {
+              x: coordinate[0],
+              y: coordinate[1]
+            }
+            // 设置修改用户Id
+            this.model.modifyUserId = this.$store.getters.userInfo.id;
+
             httpAction(httpurl,this.model,method).then((res)=>{
               if(res.success){
                 that.$message.success(res.message);
@@ -161,6 +193,45 @@
          
         })
       },
+      imgClick(e) {
+        // 获取点击目标的x,y坐标
+        let event = e || window.event;
+        let target = event.target || event.srcElement;
+        let fixX = this.$refs.imgBg.getBoundingClientRect().left;
+        let fixY = this.$refs.imgBg.getBoundingClientRect().top;
+        let scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
+        let scrollY = document.documentElement.scrollTop || document.body.scrollTop;
+        let eventx = e.pageX - scrollX || e.clientX;
+        let eventy = e.pageY - scrollY || e.clientY;
+        let offsetWidth = target.offsetWidth;
+        let offsetHeight = target.offsetHeight;
+        let offsetX = (eventx - fixX);
+        let offsetY = (eventy - fixY);
+        this.doorIconStyle.top = offsetY - 20 + 'px';
+        this.doorIconStyle.left = offsetX - 20 + 'px';
+        let x = ((eventx - fixX) / offsetWidth).toFixed(4);
+        let y = ((eventy - fixY) / offsetHeight).toFixed(4);
+        this.model.coordinateTmp = x + "," + y;
+        this.$refs.form.validateField('coordinateTmp');
+      },
+      statusChange(value) {
+        let targetList = this.statusList.filter(status => status.value === value);
+        this.doorIconPath = targetList.length > 0 ? targetList[0].imgPath : null;
+      },
+      floorImgLoadComplete(e) {
+      if (this.model.coordinate) {
+          this.model.coordinateTmp = this.model.coordinate.x + ',' + this.model.coordinate.y;
+          this.statusChange(this.model.status);
+          console.log(this.model.status);
+          let target = e.target;
+          let fixX = 20;
+          let fixY = 20;
+          let offsetWidth = target.offsetWidth;
+          let offsetHeight = target.offsetHeight;
+          this.doorIconStyle.top = this.model.coordinate.y * offsetHeight - fixY + 'px'
+          this.doorIconStyle.left = this.model.coordinate.x * offsetWidth - fixX + 'px';
+        }
+      },
     }
   }
 </script>
\ No newline at end of file

jeecg-boot-parent/jeecg-boot-module-property/src/main/java/org/jeecg/pm/entity/PmMonitoringDevice.java

@@ -5,6 +5,7 @@ import java.io.UnsupportedEncodingException;
 import java.util.Date;
 import java.math.BigDecimal;
 import com.baomidou.mybatisplus.annotation.IdType;
+import com.baomidou.mybatisplus.annotation.TableField;
 import com.baomidou.mybatisplus.annotation.TableId;
 import com.baomidou.mybatisplus.annotation.TableName;
 import lombok.Data;
@@ -24,7 +25,7 @@ import lombok.experimental.Accessors;
  * @Version: V1.0
  */
 @Data
-@TableName("pm_monitoring_device")
+@TableName(value = "pm_monitoring_device", autoResultMap = true)
 @Accessors(chain = true)
 @EqualsAndHashCode(callSuper = false)
 @ApiModel(value="pm_monitoring_device对象", description="pm_monitoring_device")
@@ -60,15 +61,18 @@ public class PmMonitoringDevice implements Serializable {
 	@Excel(name = "所属设备", width = 15)
     @ApiModelProperty(value = "所属设备")
     private String theirEquipment;
-	/**xy值*/
-	@Excel(name = "xy值", width = 15)
+    /**
+     * xy值
+     */
     @ApiModelProperty(value = "xy值")
-    private String coordinate;
+    @TableField(typeHandler = Coordinate.TypeHandler.class)
+    private Coordinate coordinate;
+
 	/**状态 1:正常 2:离线 3:维修*/
 	@Excel(name = "状态", width = 15,dicCode = "access_control_status")
     @ApiModelProperty(value = "状态 1:正常 2:离线 3:维修")
     @Dict(dicCode = "access_control_status")
-    private String status;
+    private Integer status;
 	/**端口*/
 	@Excel(name = "端口", width = 15)
     @ApiModelProperty(value = "端口")