wans

src/api/sb/position.js

@@ -171,4 +171,4 @@ export function selectCountByPosition (parameter) {
       'Content-Type': 'application/json;charset=UTF-8'
     }
   })
-}
+}

src/views/sb-position/SbPositionImg.vue

@@ -1,69 +1,97 @@
 <template>
-  <a-card :bordered="false" class="card" :title="modalTitle">
-    <h1 style="margin:20px auto; text-align: center"> 设备分布地图 </h1>
-    <a-card v-show="visible">
-      <a-card-grid v-for="position in treeData" :key="position.id" style="cursor: pointer;width:25%;text-align:center" @click="showChild(position)">
-        {{ position.title }}
-      </a-card-grid>
-    </a-card>
+  <a-card>
+    <a-tabs :default-active-key="defaultActive" @change="handleClick">
+      <a-tab-pane v-for="(item, index) in positionsList" :tab="item.name" :key="index">
+        <div style="position: relative;" v-show="visible">
+          <div class="point" v-for="workshop in workshopList" :key="workshop.id" :style="computPosition(workshop.positionX, workshop.positionY)" @click="handleView(workshop)">
+            {{ workshop.name }}
+          </div>
+          <img v-if="item.opcImg" :src="item.opcImg" width="100%" alt="">
+          <a-empty v-else description="暂无底图，请上传" />
+        </div>
+      </a-tab-pane>
+    </a-tabs>
+    <PointModal ref="pointModal" @ok="handleOk" />
 
-    <a-card v-show="visible2">
-      <a-row :gutter="48" slot="extra">
-        <a-col :md="48" :sm="48">
-          <span class="table-page-search-submitButtons" style="float: right">
-            <a-button style="margin-left: 8px" @click="handleCancel()">返回</a-button>
-          </span>
-        </a-col>
-      </a-row>
-      <a-card-grid v-for="child in childData" v-show="child.type==2" :key="child.key" style="cursor: pointer;width:25%;text-align:center" @click="showScreen(child)">
-        {{ child.name }}
-      </a-card-grid>
-    </a-card>
-    <PointModal ref="pointModal" />
   </a-card>
 </template>
 
 <script>
-import { getSbPositionTree, querySbPosition } from '@/api/sb/position'
+import { querySbPosition } from '@/api/sb/position'
+import { querySbInfo } from '@/api/sb/info'
 import PointModal from './modules/PointModal.vue'
 export default {
-  name: 'OpcPosition',
-  components: { PointModal },
-  data() {
+  components: {
+    PointModal
+  },
+  data () {
     return {
-      confirmLoading: false,
-      modalTitle: null,
-      treeData: [],
-      childData: [],
-      visible: true,
-      visible2: false,
+      positionsList: [],
+      defaultActive: 0,
+      workshopList: [],
+      visible: true
     }
   },
-  props: {},
-  created() {
-    getSbPositionTree().then((res) => {
-      this.treeData = res.data
-    })
+
+  created () {
+    this.getInfo()
   },
   methods: {
-    showChild(position) {
-      this.visible = false
-      this.visible2 = true
-      querySbPosition({
-        parentId: position.id,
-      }).then((res) => {
-        this.childData = res.data
+    getInfo () {
+      querySbPosition({ type: 1 }).then(res => {
+        this.positionsList = res.data
+        this.handleClick(this.defaultActive)
       })
     },
-    showScreen(position) {
-      this.$refs.pointModal.base(position)
+    computPosition (x, y) {
+      const left = `calc(${x}% - 35px)`
+      const top = `calc(${y}% - 85px)`
+      return {
+        left, top
+      }
     },
-    handleCancel() {
+    handleClick (i) {
+      this.defaultActive = i
       this.visible = true
-      this.visible2 = false
-      this.childData = []
-      this.confirmLoading = false
+      this.$refs.pointModal.handleCancel()
+      querySbPosition({ parentId: this.positionsList[i].id }).then(res => {
+        this.workshopList = res.data
+      })
     },
-  },
+    handleView (workshop) {
+      if (!workshop.existPosition) {
+        this.$message.warning('该仓库不存在库位！')
+      } else if (!workshop.opcImg) {
+        this.$message.warning('该仓库未上传底图！')
+      } else {
+        querySbInfo({ positionId: workshop.id }).then(res => {
+          this.visible = false
+          this.$refs.pointModal.base(res.data, workshop.opcImg, workshop.id)
+        })
+      }
+    },
+    handleOk () {
+      this.visible = true
+    }
+  }
 }
 </script>
+
+<style lang="less" scoped>
+.point {
+  position: absolute;
+  border-radius: 50%;
+  background: url(~@/assets/a/6.png) repeat;
+  background-size: 100% 100%;
+  // border: 2px solid #fff;
+  color: #fff;
+  height: 80px;
+  width: 70px;
+display: flex;
+justify-content: center;
+align-items: center;
+text-align: center;
+  font-size: 12px;
+  cursor: pointer;
+}
+</style>

src/views/sb-position/modules/PointModal.vue

@@ -1,84 +1,79 @@
 <template>
-  <a-modal :title="modalTitle" :footer="false" :width="1300" :visible="visible" :confirmLoading="confirmLoading" @cancel="handleCancel">
+  <div v-show="visible">
+    <div class="btn">
+      <a-space>
+        <a-button @click="handleView">
+          设备信息
+        </a-button>
+        <a-button type="primary" @click="handleCancel">返回</a-button>
+      </a-space>
+    </div>
     <div style="position: relative;">
-      <a-tooltip v-for="point in points" v-show="point.zjm" :key="point.id">
-        <template slot="title">
-          {{ point.name }}
-        </template>
-        <div class="point" ref="point" :style="{left:point.zjm+'px',top:point.jbdh+'px'}"></div>
-      </a-tooltip>
-
-      <img v-if="url" :src="url" width="100%" alt="">
-      <a-empty v-else description="暂无底图，请上传" />
+      <div class="point" v-for="point in dataList" :key="point.id" :style="computPosition(point.zjm, point.jbdh)">
+        {{ point.name }}
+      </div>
+      <img v-if="opcImg" :src="opcImg" width="100%" alt="">
     </div>
-    <!-- <template slot="footer">
-      <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
-    </template> -->
-  </a-modal>
+  </div>
 </template>
 
 <script>
-import { querySbInfo } from '@/api/sb/info'
-import { fetchSbPosition } from '@/api/sb/position'
 export default {
-  name: 'PointModal',
-  data() {
+  data () {
     return {
-      confirmLoading: false,
-      modalTitle: null,
       visible: false,
-      record: {},
-      url: null,
-      points: [],
+      show: false,
+      type: null,
+      storeId: null,
+      dataList: [],
+      spareList: [],
+      opcImg: ''
     }
   },
-  props: {},
-  created() {
-    // 下拉框map
+  created () {
   },
   methods: {
-    base(record) {
+    base (record, imgUrl, storeId) {
       this.visible = true
-      // 如果是空标识添加
-      this.modalTitle = '选择点位'
-      this.url = record.opcImg
-      this.record = record
-      querySbInfo({ positionId: record.id }).then((res) => {
-        this.points = res.data
-        this.$forceUpdate()
-      })
-    },
-    save() {
-      this.$emit('ok', {
-        zjm: this.x,
-        jbdh: this.y,
-      })
-      this.visible = false
+      this.dataList = record
+      this.opcImg = imgUrl
+      this.storeId = storeId
     },
-    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'
+    computPosition (x, y) {
+      const left = `calc(${x}% - 35px)`
+      const top = `calc(${y}% - 85px)`
+      return {
+        left,
+        top
+      }
     },
-    handleCancel(values) {
-      this.visible = false
+    handleCancel () {
       this.$emit('ok')
-      this.x = null
-      this.y = null
-      this.record = null
-      this.confirmLoading = false
-    },
-  },
+      this.visible = false
+    }
+  }
 }
 </script>
+
 <style lang="less" scoped>
 .point {
   position: absolute;
-  width: 10px;
-  height: 10px;
-  background: rgb(10, 233, 58);
   border-radius: 50%;
+  background: url(~@/assets/a/6.png) repeat;
+  background-size: 100% 100%;
+  // border: 2px solid #fff;
+  color: #fff;
+  height: 80px;
+  width: 70px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  font-size: 12px;
+  cursor: pointer;
+}
+.btn {
+  margin-bottom: 20px;
+  text-align: right;
 }
 </style>
-    

src/views/sb/position/modules/BaseForm.vue

@@ -1,7 +1,7 @@
 <template>
   <a-modal
     :title="modalTitle"
-    :width="800"
+    :width="1300"
     :visible="visible"
     :confirmLoading="confirmLoading"
     @cancel="handleCancel"
@@ -11,110 +11,167 @@
       <a-form-item v-show="false" >
         <a-input v-decorator="['id']" type="hidden"/>
       </a-form-item>
-
-      <a-form-item
-        label="位号"
-        :labelCol="BaseTool.Constant.labelCol"
-        :wrapperCol="BaseTool.Constant.wrapperCol"
-      >
-        <a-input
-          v-decorator="['no', {rules: [{required: true, message: '位号不能为空'}]}]" />
-      </a-form-item>
-      <a-form-item
-        label="名称"
-        :labelCol="BaseTool.Constant.labelCol"
-        :wrapperCol="BaseTool.Constant.wrapperCol"
-      >
-        <a-input
-          v-decorator="['name', {rules: [{required: true, message: '名称不能为空'}]}]" />
-      </a-form-item>
-      <a-form-item
-        label="类型"
-        :labelCol="BaseTool.Constant.labelCol"
-        :wrapperCol="BaseTool.Constant.wrapperCol"
-      >
-        <a-select v-decorator="['type', {rules: [{required: true, message: '类型不能为空'}]}]" placeholder="请选择">
-          <a-select-option
-            v-for="(label,value) in positionTypeMap"
-            :key="value"
-            :label="label"
-            :value="parseInt(value)">{{ label }}
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item
-        label="上层位置"
-        :labelCol="BaseTool.Constant.labelCol"
-        :wrapperCol="BaseTool.Constant.wrapperCol"
-      >
-        <a-tree-select
-          style="width: 100%"
-          :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
-          :treeData="treeData"
-          :treeNodeFilterProp="'title'"
-          :showSearch="true"
-          v-decorator="['parentId', {rules: [{required: false, message: '上层位置不能为空'}]}]"
-          placeholder="请选择"
-        >
-        </a-tree-select>
-      </a-form-item>
-      <!--      <a-form-item
+      <row-list :col="2">
+        <row-item>
+          <a-form-item
+            label="位号"
+            :labelCol="BaseTool.Constant.labelCol"
+            :wrapperCol="BaseTool.Constant.wrapperCol"
+          >
+            <a-input
+              v-decorator="['no', {rules: [{required: true, message: '位号不能为空'}]}]" />
+          </a-form-item>
+        </row-item>
+        <row-item>
+          <a-form-item
+            label="名称"
+            :labelCol="BaseTool.Constant.labelCol"
+            :wrapperCol="BaseTool.Constant.wrapperCol"
+          >
+            <a-input
+              v-decorator="['name', {rules: [{required: true, message: '名称不能为空'}]}]" />
+          </a-form-item>
+        </row-item>
+        <row-item>
+          <a-form-item
+            label="类型"
+            :labelCol="BaseTool.Constant.labelCol"
+            :wrapperCol="BaseTool.Constant.wrapperCol"
+          >
+            <a-select v-decorator="['type', {rules: [{required: true, message: '类型不能为空'}]}]" placeholder="请选择">
+              <a-select-option
+                v-for="(label,value) in positionTypeMap"
+                :key="value"
+                :label="label"
+                :value="parseInt(value)">{{ label }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </row-item>
+        <row-item>
+          <a-form-item
+            label="上层位置"
+            :labelCol="BaseTool.Constant.labelCol"
+            :wrapperCol="BaseTool.Constant.wrapperCol"
+          >
+            <a-tree-select
+              style="width: 100%"
+              :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
+              :treeData="treeData"
+              :treeNodeFilterProp="'title'"
+              :showSearch="true"
+              v-decorator="['parentId', {rules: [{required: false, message: '上层位置不能为空'}]}]"
+              @change="changeParent"
+              placeholder="请选择"
+            >
+            </a-tree-select>
+          </a-form-item>
+        </row-item>
+        <!--      <row-item>
+            <a-form-item
         label="父子关联编码"
         :labelCol="BaseTool.Constant.labelCol"
         :wrapperCol="BaseTool.Constant.wrapperCol"
       >
         <a-input
           v-decorator="['code', {rules: [{required: true, message: '父子关联编码不能为空'}]}]" />
-      </a-form-item>-->
-      <a-form-item
-        label="区域维修负责人"
-        :labelCol="BaseTool.Constant.labelCol"
-        :wrapperCol="BaseTool.Constant.wrapperCol"
-      >
-        <a-select v-decorator="['userId', {rules: [{required: true, message: '仓库负责人不能为空'}]}]" placeholder="请选择">
-          <a-select-option
-            v-for="({userId, realName}) in userList"
-            :key="userId"
-            :label="realName"
-            :value="userId">{{ realName }}
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item
-        label="排序"
-        :labelCol="BaseTool.Constant.labelCol"
-        :wrapperCol="BaseTool.Constant.wrapperCol"
-      >
-        <a-input-number
-          style="width: 100%"
-          :min="1"
-          v-decorator="['sort', {initialValue:1,rules: [{required: true, message: '排序不能为空'}]}]" />
-      </a-form-item>
-      <a-form-item
-        label="是否有电子地图"
-        :labelCol="BaseTool.Constant.labelCol"
-        :wrapperCol="BaseTool.Constant.wrapperCol"
-      >
-        <a-select v-decorator="['opcFlag', {initialValue:DictCache.VALUE.DELFLAG.NORMAL, rules: [{required: false, message: '是否OPC展示不能为空'}]}]" placeholder="请选择">
-          <a-select-option
-            v-for="(label,value) in yesNoMap"
-            :key="value"
-            :label="label"
-            :value="parseInt(value)">{{ label }}
-          </a-select-option>
-        </a-select>
       </a-form-item>
-      <a-form-item
-        label="电子地图图片"
-        :labelCol="BaseTool.Constant.labelCol"
-        :wrapperCol="BaseTool.Constant.wrapperCol"
-      >
-        <upload-position-img
-          ref="imageUpload"
-          @catchImage="catchImage"
-        ></upload-position-img>
-      </a-form-item>
-      <!--<a-form-item
+          </row-item>-->
+        <row-item>
+          <a-form-item
+            label="区域维修负责人"
+            :labelCol="BaseTool.Constant.labelCol"
+            :wrapperCol="BaseTool.Constant.wrapperCol"
+          >
+            <a-select v-decorator="['userId', {rules: [{required: true, message: '仓库负责人不能为空'}]}]" placeholder="请选择">
+              <a-select-option
+                v-for="({userId, realName}) in userList"
+                :key="userId"
+                :label="realName"
+                :value="userId">{{ realName }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </row-item>
+        <row-item v-if="parentId">
+          <a-form-item
+            label="仓库位置"
+            :labelCol="BaseTool.Constant.labelCol"
+            :wrapperCol="BaseTool.Constant.wrapperCol"
+          >
+            <a-input-group size="large">
+              <a-row :gutter="8">
+                <a-col :span="10">
+                  <a-input-number
+                    :min="0"
+                    :max="100"
+                    style="width:100%"
+                    disabled
+                    :formatter="value => `X ${value}`"
+                    :parser="value => value.replace('X', '')"
+                    v-decorator="['positionX', {rules: [{required: true, message: 'X坐标不能为空'}]}]"
+                  />
+                </a-col>
+                <a-col :span="10">
+                  <a-input-number
+                    :min="0"
+                    :max="100"
+                    style="width:100%"
+                    disabled
+                    :formatter="value => `Y ${value}`"
+                    :parser="value => value.replace('Y', '')"
+                    v-decorator="['positionY', {rules: [{required: true, message: 'Y坐标不能为空'}]}]"
+                  />
+                </a-col>
+                <a-col :span="4">
+                  <a-button @click="openPositionMap" type="primary">选择</a-button>
+                </a-col>
+              </a-row>
+            </a-input-group>
+          </a-form-item>
+        </row-item>
+        <row-item>
+          <a-form-item
+            label="排序"
+            :labelCol="BaseTool.Constant.labelCol"
+            :wrapperCol="BaseTool.Constant.wrapperCol"
+          >
+            <a-input-number
+              style="width: 100%"
+              :min="1"
+              v-decorator="['sort', {initialValue:1,rules: [{required: true, message: '排序不能为空'}]}]" />
+          </a-form-item>
+        </row-item>
+        <row-item>
+          <a-form-item
+            label="是否有电子地图"
+            :labelCol="BaseTool.Constant.labelCol"
+            :wrapperCol="BaseTool.Constant.wrapperCol"
+          >
+            <a-select v-decorator="['opcFlag', {initialValue:DictCache.VALUE.DELFLAG.NORMAL, rules: [{required: false, message: '是否OPC展示不能为空'}]}]" placeholder="请选择" @change="(val)=>opcFlag=val" >
+              <a-select-option
+                v-for="(label,value) in yesNoMap"
+                :key="value"
+                :label="label"
+                :value="parseInt(value)">{{ label }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </row-item>
+        <row-item v-if="opcFlag">
+          <a-form-item
+            label="电子地图图片"
+            :labelCol="BaseTool.Constant.labelCol"
+            :wrapperCol="BaseTool.Constant.wrapperCol"
+          >
+            <upload-position-img
+              ref="imageUpload"
+              @catchImage="catchImage"
+            ></upload-position-img>
+          </a-form-item>
+        </row-item>
+        <!--<row-item>
+            <a-form-item
         label="是否防雷车间"
         :labelCol="BaseTool.Constant.labelCol"
         :wrapperCol="BaseTool.Constant.wrapperCol"
@@ -128,7 +185,9 @@
           </a-select-option>
         </a-select>
       </a-form-item>
-      <a-form-item
+          </row-item>
+      <row-item>
+            <a-form-item
         label="防雷点位图片"
         :labelCol="BaseTool.Constant.labelCol"
         :wrapperCol="BaseTool.Constant.wrapperCol"
@@ -137,45 +196,54 @@
           ref="imageUploadLight"
           @catchImageLight="catchImageLight"
         ></upload-position-light-img>
-      </a-form-item>-->
-      <a-form-item
-        label="是否删除"
-        :labelCol="BaseTool.Constant.labelCol"
-        :wrapperCol="BaseTool.Constant.wrapperCol"
-      >
-        <a-select v-decorator="['delFlag', {initialValue:DictCache.VALUE.DELFLAG.NORMAL, rules: [{required: true, message: '是否删除不能为空'}]}]" placeholder="请选择">
-          <a-select-option
-            v-for="(label,value) in delFlagMap"
-            :key="value"
-            :label="label"
-            :value="parseInt(value)">{{ label }}
-          </a-select-option>
-        </a-select>
-      </a-form-item>
-      <a-form-item
-        label="备注"
-        :labelCol="BaseTool.Constant.labelCol"
-        :wrapperCol="BaseTool.Constant.wrapperCol"
-      >
-        <a-input
-          v-decorator="['remark', {rules: [{required: false, message: '备注不能为空'}]}]" />
       </a-form-item>
+          </row-item>-->
+        <row-item>
+          <a-form-item
+            label="是否删除"
+            :labelCol="BaseTool.Constant.labelCol"
+            :wrapperCol="BaseTool.Constant.wrapperCol"
+          >
+            <a-select v-decorator="['delFlag', {initialValue:1, rules: [{required: true, message: '是否删除不能为空'}]}]" placeholder="请选择">
+              <a-select-option
+                v-for="(label,value) in delFlagMap"
+                :key="value"
+                :label="label"
+                :value="parseInt(value)">{{ label }}
+              </a-select-option>
+            </a-select>
+          </a-form-item>
+        </row-item>
+        <row-item>
+          <a-form-item
+            label="备注"
+            :labelCol="BaseTool.Constant.labelCol"
+            :wrapperCol="BaseTool.Constant.wrapperCol"
+          >
+            <a-input
+              v-decorator="['remark', {rules: [{required: false, message: '备注不能为空'}]}]" />
+          </a-form-item>
+        </row-item>
+      </row-list>
+
     </a-form>
     <template slot="footer">
       <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
     </template>
+    <PositionMap ref="position" @ok="handleSelectPosition" :opcImg="parentImg" />
   </a-modal>
 </template>
 
 <script>
 import pick from 'lodash.pick'
-import { addSbPosition, updateSbPosition, getSbPositionTree } from '@/api/sb/position'
+import { addSbPosition, updateSbPosition, getSbPositionTree, fetchSbPosition } from '@/api/sb/position'
 import { queryRepairUser } from '@/api/upms/user-dept'
 import UploadPositionImg from '@/components/Upload/UploadPositionImg'
 import UploadPositionLightImg from '@/components/Upload/UploadPositionLightImg'
+import PositionMap from '@/views/store/store/modules/PositionMap.vue'
 export default {
   name: 'BaseSbPosition',
-  components: { UploadPositionImg, UploadPositionLightImg },
+  components: { UploadPositionImg, UploadPositionLightImg, PositionMap },
   data () {
     return {
       confirmLoading: false,
@@ -183,7 +251,10 @@ export default {
       form: this.$form.createForm(this),
       visible: false,
       opcImg: '',
+      parentImg: '',
+      parentId: '',
       lightImg: '',
+      opcFlag: 0,
       positionTypeMap: {},
       delFlagMap: {},
       userList: {},
@@ -215,6 +286,8 @@ export default {
       if (this.BaseTool.Object.isBlank(record.id)) {
         this.modalTitle = '复制'
       }
+      this.opcFlag = record.opcFlag
+      this.changeParent(record.parentId)
       const { form: { setFieldsValue } } = this
       this.$nextTick(() => {
         setFieldsValue(Object.assign(pick(record, [
@@ -229,7 +302,9 @@ export default {
           'delFlag',
           'parentId',
           'userId',
-          'remark'
+          'remark',
+          'positionY',
+          'positionX'
         ])))
       })
       this.opcImg = record.opcImg
@@ -295,6 +370,7 @@ export default {
         }
       })
     },
+
     handleCancel (values) {
       this.visible = false
       this.confirmLoading = false
@@ -311,6 +387,30 @@ export default {
         console.log(res.data)
         this.treeData = res.data
       })
+    },
+    openPositionMap () {
+      if (!this.parentImg) {
+        this.$message.info('上层位置未设置电子地图！')
+        return
+      }
+      const { form: { getFieldsValue } } = this
+      this.$refs.position.base(getFieldsValue(['positionY',
+        'positionX']))
+    },
+    handleSelectPosition (val) {
+      const { form: { setFieldsValue } } = this
+      this.$nextTick(() => {
+        setFieldsValue(Object.assign(pick(val, [
+          'positionY',
+          'positionX'
+        ])))
+      })
+    },
+    changeParent (id) {
+      this.parentId = id
+      fetchSbPosition({ id }).then(res => {
+        this.parentImg = res.data.opcImg
+      })
     }
 
   }