视频安防xy值设置优化

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

+<template>
+  <a-card :bordered="false">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :xl="4" :lg="4" :md="5" :sm="24">
+            <a-form-item label="选择区域">
+              <a-select placeholder="选择区域" v-model="queryParam.districtName">
+                <a-select-option v-for="va in buildingInfos" :key="va">
+                  {{ va }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </a-col>
+          <a-col :xl="4" :lg="4" :md="5" :sm="24">
+            <a-space style="float: left">
+              <a-button type="primary" @click="searchQuery">查询</a-button>
+              <a-button type="default" @click="searchReset">重置</a-button>
+            </a-space>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!-- 查询区域-END -->
+
+    <!-- 操作按钮区域 -->
+    <!--<div class="table-operator">
+      <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
+      <a-button type="primary" icon="download" @click="handleExportXls('pm_access_control_device')">导出</a-button>
+      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
+                @change="handleImportExcel">
+        <a-button type="primary" icon="import">导入</a-button>
+      </a-upload>
+      &lt;!&ndash; 高级查询区域 &ndash;&gt;
+      <j-super-query :fieldList="superFieldList" ref="superQueryModal"
+                     @handleSuperQuery="handleSuperQuery"></j-super-query>
+      <a-dropdown v-if="selectedRowKeys.length > 0">
+        <a-menu slot="overlay">
+          <a-menu-item key="1" @click="batchDel">
+            <a-icon type="delete"/>
+            删除
+          </a-menu-item>
+        </a-menu>
+        <a-button style="margin-left: 8px"> 批量操作
+          <a-icon type="down"/>
+        </a-button>
+      </a-dropdown>
+    </div>-->
+
+    <!-- table区域-begin -->
+    <div>
+      <a-row>
+        <a-col :span="24">
+          <div style="position: relative">
+            <img ref="floorImg" src="@/assets/floor.png" alt="floor" width="100%" height="100%"
+                 @load="floorImgLoadComplete()"/>
+            <img v-for="(item, index) in list"
+                 ref="icon"
+                 :src="item.status === 'NORMAL'
+                 ? statusList[0].imgPath
+                 : (item.status === 'OFFLINE' ? statusList[1].imgPath : statusList[2].imgPath)"
+                 :alt="item.name + ':' + item.ip"/>
+          </div>
+        </a-col>
+      </a-row>
+    </div>
+  </a-card>
+</template>
+
+<script>
+
+import '@/assets/less/TableExpand.less'
+import {getAction} from '@/api/manage'
+
+export default {
+  name: 'PmMonitoringDeviceOverview',
+  components: {},
+  data() {
+    return {
+      queryParam: {deleted: false},
+      description: 'pm_monitoring_device管理页面',
+      url: {
+        list: "/pm/pmMonitoringDevice/list",
+        delete: "/pm/pmMonitoringDevice/delete",
+        deleteBatch: "/pm/pmMonitoringDevice/deleteBatch",
+        exportXlsUrl: "/pm/pmMonitoringDevice/exportXls",
+        importExcelUrl: "pm/pmMonitoringDevice/importExcel",
+      },
+      list: [],
+      dictOptions: {},
+      superFieldList: [],
+      buildingInfos: [],
+      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')}],
+
+    }
+  },
+  created() {
+    getAction('/pm/pmMonitoringDevice/allArea')
+      .then(
+        res =>{
+          this.buildingInfos = res;
+          });
+  },
+  computed: {
+    importExcelUrl: function () {
+      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+    },
+  },
+  methods: {
+    initDictConfig() {
+    },
+    loadComplete() {
+      if (this.list.length > 0) {
+        this.list.forEach((item, index) => {
+          console.log(item);
+          let fixX = 20;
+          let fixY = 20;
+          let offsetWidth = this.$refs.floorImg.offsetWidth;
+          let offsetHeight = this.$refs.floorImg.offsetHeight;
+          this.$refs.icon[index].style.position = 'absolute';
+          this.$refs.icon[index].style.width = '40px';
+          this.$refs.icon[index].style.top = item.coordinate.y * offsetHeight - fixY + 'px';
+          this.$refs.icon[index].style.left = item.coordinate.x * offsetWidth - fixX + 'px';
+        });
+      }
+    },
+    searchQuery() {
+      getAction(this.url.list, this.queryParam)
+        .then(value => {
+          this.list = value.result.records;
+          this.$nextTick(()=>{
+            this.loadComplete();
+          })
+        });
+    },
+    searchReset() {
+      this.searchQuery();
+    },
+    floorImgLoadComplete() {
+      this.searchQuery();
+    }
+  }
+}
+</script>
+<style scoped>
+@import '~@assets/less/common.less';
+</style>
\ No newline at end of file

jeecg-boot-parent/jeecg-boot-module-property/src/main/java/org/jeecg/pm/controller/PmMonitoringDeviceController.java

 package org.jeecg.pm.controller;
 package org.jeecg.pm.controller;
 
 
 import java.util.Arrays;
 import java.util.Arrays;
+import java.util.List;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletRequest;
 import javax.servlet.http.HttpServletResponse;
 import javax.servlet.http.HttpServletResponse;
 import org.jeecg.common.api.vo.Result;
 import org.jeecg.common.api.vo.Result;
@@ -153,4 +154,15 @@ public class PmMonitoringDeviceController extends JeecgController<PmMonitoringDe
         return super.importExcel(request, response, PmMonitoringDevice.class);
         return super.importExcel(request, response, PmMonitoringDevice.class);
     }
     }
 
 
+	 /**
+	  * 查询所有区域
+	  *
+	  * @return
+	  */
+	 @ApiOperation(value="查询所有区域")
+	 @GetMapping(value = "/allArea")
+	 public List<String> allArea() {
+		 return pmMonitoringDeviceService.allArea();
+	 }
+
 }
 }

jeecg-boot-parent/jeecg-boot-module-property/src/main/java/org/jeecg/pm/mapper/PmMonitoringDeviceMapper.java

@@ -3,6 +3,8 @@ package org.jeecg.pm.mapper;
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
 import com.baomidou.mybatisplus.core.mapper.BaseMapper;
 import org.jeecg.pm.entity.PmMonitoringDevice;
 import org.jeecg.pm.entity.PmMonitoringDevice;
 
 
+import java.util.List;
+
 /**
 /**
  * @Description: pm_monitoring_device
  * @Description: pm_monitoring_device
  * @Author: jeecg-boot
  * @Author: jeecg-boot
@@ -11,4 +13,6 @@ import org.jeecg.pm.entity.PmMonitoringDevice;
  */
  */
 public interface PmMonitoringDeviceMapper extends BaseMapper<PmMonitoringDevice> {
 public interface PmMonitoringDeviceMapper extends BaseMapper<PmMonitoringDevice> {
 
 
+
+    List<String> allArea();
 }
 }

jeecg-boot-parent/jeecg-boot-module-property/src/main/java/org/jeecg/pm/mapper/xml/PmMonitoringDeviceMapper.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="org.jeecg.pm.mapper.PmMonitoringDeviceMapper">
 <mapper namespace="org.jeecg.pm.mapper.PmMonitoringDeviceMapper">
-
+    <select id="allArea" resultType="string">
+        select district_name from pm_monitoring_device group by district_name
+    </select>
 </mapper>
 </mapper>
\ No newline at end of file

jeecg-boot-parent/jeecg-boot-module-property/src/main/java/org/jeecg/pm/service/IPmMonitoringDeviceService.java

@@ -3,6 +3,8 @@ package org.jeecg.pm.service;
 import com.baomidou.mybatisplus.extension.service.IService;
 import com.baomidou.mybatisplus.extension.service.IService;
 import org.jeecg.pm.entity.PmMonitoringDevice;
 import org.jeecg.pm.entity.PmMonitoringDevice;
 
 
+import java.util.List;
+
 /**
 /**
  * @Description: pm_monitoring_device
  * @Description: pm_monitoring_device
  * @Author: jeecg-boot
  * @Author: jeecg-boot
@@ -11,4 +13,10 @@ import org.jeecg.pm.entity.PmMonitoringDevice;
  */
  */
 public interface IPmMonitoringDeviceService extends IService<PmMonitoringDevice> {
 public interface IPmMonitoringDeviceService extends IService<PmMonitoringDevice> {
 
 
+    /**
+     * 查询
+     * @return
+     */
+    List<String> allArea();
+
 }
 }

jeecg-boot-parent/jeecg-boot-module-property/src/main/java/org/jeecg/pm/service/impl/PmMonitoringDeviceServiceImpl.java

@@ -7,6 +7,8 @@ import org.springframework.stereotype.Service;
 
 
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 
 
+import java.util.List;
+
 /**
 /**
  * @Description: pm_monitoring_device
  * @Description: pm_monitoring_device
  * @Author: jeecg-boot
  * @Author: jeecg-boot
@@ -16,4 +18,8 @@ import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 @Service
 @Service
 public class PmMonitoringDeviceServiceImpl extends ServiceImpl<PmMonitoringDeviceMapper, PmMonitoringDevice> implements IPmMonitoringDeviceService {
 public class PmMonitoringDeviceServiceImpl extends ServiceImpl<PmMonitoringDeviceMapper, PmMonitoringDevice> implements IPmMonitoringDeviceService {
 
 
+    @Override
+    public List<String> allArea() {
+        return baseMapper.allArea();
+    }
 }
 }