Skip to content

P
property-management
Commit 5596c0e0 by 416409548@qq.com
Options

视频安防位置选择

parent d4c8c650
Showing with 91 additions and 10 deletions
ant-design-vue-jeecg/src/views/pm/monitoring-device/PmMonitoringDeviceList.vue
...@@ -157,9 +157,14 @@ ...@@ -157,9 +157,14 @@
dataIndex: 'theirEquipment' dataIndex: 'theirEquipment'
}, },
{ {
title:'xy值', title: 'xy值',
align:"center", align: "center",
dataIndex: 'coordinate' dataIndex: 'coordinate',
customRender(t, r, index) {
if (t) {
return t.x + ',' + t.y;
}
},
}, },
{ {
title:'设备状态', title:'设备状态',
......
ant-design-vue-jeecg/src/views/pm/monitoring-device/modules/PmMonitoringDeviceForm.vue
...@@ -66,10 +66,19 @@ ...@@ -66,10 +66,19 @@
</a-form-model-item> </a-form-model-item>
</a-col> </a-col>
<a-col :span="12"> <a-col :span="12">
<a-form-model-item label="xy值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="coordinate"> <a-form-model-item label="xy值" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="coordinateTmp">
<a-input v-model="model.coordinate" placeholder="请输入xy值" disabled ></a-input> <a-input v-model="model.coordinateTmp" disabled></a-input>
</a-form-model-item> </a-form-model-item>
</a-col> </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-row>
</a-form-model> </a-form-model>
</j-form-container> </j-form-container>
...@@ -96,6 +105,7 @@ ...@@ -96,6 +105,7 @@
data () { data () {
return { return {
model:{ model:{
coordinateTmp: null,
}, },
labelCol: { labelCol: {
xs: { span: 24 }, xs: { span: 24 },
...@@ -113,6 +123,17 @@ ...@@ -113,6 +123,17 @@
edit: "/pm/pmMonitoringDevice/edit", edit: "/pm/pmMonitoringDevice/edit",
queryById: "/pm/pmMonitoringDevice/queryById" 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: { computed: {
...@@ -141,12 +162,23 @@ ...@@ -141,12 +162,23 @@
let httpurl = ''; let httpurl = '';
let method = ''; let method = '';
if(!this.model.id){ if(!this.model.id){
// 设置创建用户Id
this.model.createUserId = this.$store.getters.userInfo.id;
httpurl+=this.url.add; httpurl+=this.url.add;
method = 'post'; method = 'post';
}else{ }else{
httpurl+=this.url.edit; httpurl+=this.url.edit;
method = 'put'; 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)=>{ httpAction(httpurl,this.model,method).then((res)=>{
if(res.success){ if(res.success){
that.$message.success(res.message); that.$message.success(res.message);
...@@ -161,6 +193,45 @@ ...@@ -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> </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; ...@@ -5,6 +5,7 @@ import java.io.UnsupportedEncodingException;
import java.util.Date; import java.util.Date;
import java.math.BigDecimal; import java.math.BigDecimal;
import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId; import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName; import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data; import lombok.Data;
...@@ -24,7 +25,7 @@ import lombok.experimental.Accessors; ...@@ -24,7 +25,7 @@ import lombok.experimental.Accessors;
* @Version: V1.0 * @Version: V1.0
*/ */
@Data @Data
@TableName("pm_monitoring_device") @TableName(value = "pm_monitoring_device", autoResultMap = true)
@Accessors(chain = true) @Accessors(chain = true)
@EqualsAndHashCode(callSuper = false) @EqualsAndHashCode(callSuper = false)
@ApiModel(value="pm_monitoring_device对象", description="pm_monitoring_device") @ApiModel(value="pm_monitoring_device对象", description="pm_monitoring_device")
...@@ -60,15 +61,18 @@ public class PmMonitoringDevice implements Serializable { ...@@ -60,15 +61,18 @@ public class PmMonitoringDevice implements Serializable {
@Excel(name = "所属设备", width = 15) @Excel(name = "所属设备", width = 15)
@ApiModelProperty(value = "所属设备") @ApiModelProperty(value = "所属设备")
private String theirEquipment; private String theirEquipment;
/**xy值*/ /**
@Excel(name = "xy值", width = 15) * xy值
*/
@ApiModelProperty(value = "xy值") @ApiModelProperty(value = "xy值")
private String coordinate; @TableField(typeHandler = Coordinate.TypeHandler.class)
private Coordinate coordinate;
/**状态 1:正常 2:离线 3:维修*/ /**状态 1:正常 2:离线 3:维修*/
@Excel(name = "状态", width = 15,dicCode = "access_control_status") @Excel(name = "状态", width = 15,dicCode = "access_control_status")
@ApiModelProperty(value = "状态 1:正常 2:离线 3:维修") @ApiModelProperty(value = "状态 1:正常 2:离线 3:维修")
@Dict(dicCode = "access_control_status") @Dict(dicCode = "access_control_status")
private String status; private Integer status;
/**端口*/ /**端口*/
@Excel(name = "端口", width = 15) @Excel(name = "端口", width = 15)
@ApiModelProperty(value = "端口") @ApiModelProperty(value = "端口")
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment