wans

src/views/sb/info/modules/PointModal.vue

@@ -0,0 +1,88 @@
+<template>
+  <a-modal :title="modalTitle" :width="1300" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel">
+    <a-form>
+      <row-list :col="2">
+        <row-item>
+          <a-form-item label="水平位置" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
+            <a-input v-model="x" />
+          </a-form-item>
+        </row-item>
+        <row-item>
+          <a-form-item label="垂直位置" :labelCol="BaseTool.Constant.labelCol" :wrapperCol="BaseTool.Constant.wrapperCol">
+            <a-input v-model="y" />
+          </a-form-item>
+        </row-item>
+      </row-list>
+    </a-form>
+    <div @click="handleSelectPoint" style="position: relative;">
+      <div class="point" ref="point"></div>
+      <img src="@/assets/a/a.png" width="100%" alt="">
+    </div>
+    <template slot="footer">
+      <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script>
+export default {
+  name: 'PointModal',
+  data() {
+    return {
+      confirmLoading: false,
+      modalTitle: null,
+      x: null,
+      y: null,
+      visible: false,
+      record: {},
+    }
+  },
+  props: {},
+  created() {
+    // 下拉框map
+  },
+  methods: {
+    base(record) {
+      this.visible = true
+      // 如果是空标识添加
+      this.modalTitle = '选择点位'
+      this.x = record.zjm
+      this.y = record.jbdh
+      this.record = record
+      this.$nextTick(() => {
+        this.$refs.point.style.left = this.x + 'px'
+        this.$refs.point.style.top = this.y + 'px'
+      })
+    },
+    save() {
+      this.$emit('ok', {
+        zjm: this.x,
+        jbdh: this.y,
+      })
+      this.visible = false
+    },
+    handleSelectPoint(e) {
+      this.x = e.layerX
+      this.y = e.layerY
+      this.$refs.point.style.left = this.x + 'px'
+      this.$refs.point.style.top = this.y + 'px'
+    },
+    handleCancel(values) {
+      this.visible = false
+      this.$emit('ok')
+      this.x = null
+      this.y = null
+      this.confirmLoading = false
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.point {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: rgb(10, 233, 58);
+  border-radius: 50%;
+}
+</style>