地图隐患标注加气泡

dcit-hcsystem-hcsystem-master/src/views/Enterprises/EnterprisesInformation.vue

 <template>
-    <el-table
-      :data="tableData"
-      border
-      stripe
-      show-summary
-      style="width: 100%">
-      <el-table-column
-        prop="qiye"
-        label="企业名称"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="date"
-        label="危险源"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        label="监控设备"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="职业危害场所">
-      </el-table-column>
-      <el-table-column
-        prop="yinhuan"
-        label="隐患数量">
-      </el-table-column>
+    <div class="EnseList">
+      <el-row class="topBar">
+        <el-col>
+          <el-form :inline="true" :model="searchData">
+            <el-form-item>
+              <el-input v-model="searchData.unitName" placeholder="请输入企业名称"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="searchFun()">
+                <i class="el-icon-search"></i> 搜索
+              </el-button>
+              <el-button type="primary" @click="resetFun()">
+                <i class="el-icon-refresh"></i> 重置
+              </el-button>
+            </el-form-item>
+          </el-form>
+        </el-col>
+      </el-row>
+      <el-table :data="tableData.pageData" stripe show-summary border style="width:100%;" :loading="loading">
+        <el-table-column prop="unitName" label="企业名称"></el-table-column>
+        <el-table-column prop="unitName" label="危险源"></el-table-column>
+        <el-table-column prop="legalPerson" label="设备监控"></el-table-column>
+        <el-table-column prop="orgCode" label="职业危害场所"></el-table-column>
+        <el-table-column prop="legalPersonEmail" label="隐患数量""></el-table-column>
       </el-table>
+      <el-pagination
+        background
+        layout="total,sizes, prev, pager, next, jumper"
+        :total="tableData.total"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="PAGE.page"
+        :page-size="PAGE.size"
+      ></el-pagination>
+      <EnterprisesMgEdit
+        v-if="dialogVisible"
+        :dialogVisible="dialogVisible"
+        :editFormA="formData"
+        @dialogFun="closeDialog"
+        @refreshTableData="getTableData"
+        :key="zjKey"
+      ></EnterprisesMgEdit>
+    </div>
   </template>
+  <script lang="ts">
+  import { Component, Vue, Provide } from "vue-property-decorator";
+  import EnterprisesMgEdit from "./EnterprisesMgEdit.vue";
+  import City from "@/components/city.vue";
+  import METHOD from "@/utils/methods";
+  @Component({
+    components: { EnterprisesMgEdit, City }
+  })
+  export default class EnterprisesMg extends Vue {
+    @Provide() tableData: Object = { pageData: [], total: 0 };
+    @Provide() PAGE: any = { page: 1, size: 10 };
+    @Provide() searchData: any = {};
+    @Provide() loading: Boolean = false;
+    @Provide() cityval: any = [];
+    //编辑组件
+    @Provide() dialogVisible: Boolean = false;
+    @Provide() formData: any = { dataType: "", enterpriseId: "" };
+    @Provide() zjKey: any = 0;
   
-  <script>
-    export default {
-      data() {
-        return {
-          tableData: [{
-            qiye: '奔腾',
-            date: '6',
-            name: '3',
-            address: '5',
-            yinhuan: '9'
-          }]
-        }
-      },
+    getTableData() {
+      let that = this;
+      that.searchData.accountNotDel=true;
+       let param = Object.assign({}, that.PAGE, that.searchData);
+      that.loading = true;
+      METHOD.axiosPost(
+        that,
+        `/enterpriseInfo/queryEnterpriseInfo`,
+        param,
+        function(res: any) {
+          that.loading = false;
+          if (res.code == 0) {
+            that.tableData = res.data;
+          }
+        }
+      );
+    }
+    searchFun() {
+      this.PAGE = { page: 1, size: 10 };
+      this.getTableData();
+    }
+    resetFun() {
+      this.PAGE = { page: 1, size: 10 };
+      this.searchData = { unitName: "" };
+      this.getTableData();
+      this.cityval = [];
+    }
+    handleSizeChange(val: any) {
+      this.PAGE.size = val;
+      this.getTableData();
+    }
+    handleCurrentChange(val: any) {
+      this.PAGE.page = val;
+      this.getTableData();
+    }
+    closeDialog() {
+      //关闭窗口
+      this.dialogVisible = false;
+      this.formData = {};
+    }
+    selectChange(val: any) {
+      this.searchData.dataType = val;
+      this.getTableData();
+    }
+    verrifyFun(row: any) {
+      this.formData = Object.assign({}, row);
+      this.zjKey++;
+      this.dialogVisible = true;
+    }
+    setLock(row: any) {
+      let that = this;
+      that
+        .$confirm(`确定锁定企业 ${row.unitName} 吗?`, "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+        .then(() => {
+          METHOD.axiosPost(
+            that,
+            `/enterpriseInfo/cancelEnterpriseInfoById/${row.enterpriseId}`,
+            { remarks: "" },
+            function(res: any) {
+              if (res.code == 0) {
+                (that as any).$message({
+                  type: "success",
+                  message: "注销成功!"
+                });
+                that.getTableData();
+              }
+            }
+          );
+        });
+    }
+    /*选择城市*/
+    changeFun(v: any) {
+      this.searchData.provinceId = v[0];
+      this.searchData.cityId = v[1];
+      this.searchData.countyId = v[2];
+    }
+    resetPw(row: any) {
+      let that = this;
+      (that as any)
+        .$confirm("确定重置用户 "+ row.userName +" 的密码 为 66668888 吗?", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+        .then(() => {
+          METHOD.axiosGet(that, `/user/resetUserPwd/${row.userId}`, function(
+            res: any
+          ) {
+            if (res.code == 0) {
+              (that as any).$message({
+                type: "success",
+                message: "重置成功!"
+              });
+            }
+          });
+        });
+    }
+    created() {
+      this.getTableData();
+    }
   }
   </script>
+  <style lang="scss" >
+  @import "@/utils/public.scss";
+  @media screen and (max-width: 1350px) {
+    main > div .el-table {
+      height: calc(100% - 150px);
+    }
+  }
+  .el-dialog__body{
+      padding: 10px 20px !important;
+      color: #606266;
+      font-size: 14px;
+      word-break: break-all;
+  }
+  </style>
\ No newline at end of file

dcit-hcsystem-hcsystem-master/src/views/qyMap/qyMap.vue

@@ -72,9 +72,9 @@
                         </div>
                         <div class="markbox-div">
                             <el-tooltip content="隐患" placement="left" effect="light">
-                                <div ref="yhimg" style="position: relative;">
+                                <div @click="yinhuan" ref="yhimg" style="position: relative;">
                                     <img width="20px" style="margin-top: 10px;" src="@/assets/mark/yinhuan.png" />
-                                    <!-- <img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0"> -->
+                                    <img src="@/assets/mark/selected.png" alt="" style="position: absolute;width: 16px; top: 0;right: 0">
                                 </div>
                                 
                             </el-tooltip>
@@ -143,6 +143,7 @@ export default class GIS extends Vue {
     @Provide() markers: any = [];
     @Provide() markers1: any = [];
     @Provide() markers2: any = [];
+    @Provide() markers3: any = [];
     @Provide() mapData: any = [];
     @Provide() windowsArr: any = [];
     @Provide() windowsArr1: any = [];
@@ -264,7 +265,8 @@ export default class GIS extends Vue {
                         `<p><span>联系人:</span>${goods.contacts}</p>` +
                         `<p><span>联系电话:</span>${goods.phone}</p>` +
                         `<p><span>危险等级:</span>${goods.dangerGrade}</p>` +
-                        `</div>`;
+                        `</div>` +
+                        `<p class="gengxin"><button>更新</button></p>`;
                     that.Mutil.addPopup(html, goods.id, goods.longitude, goods.latitude)
 
                 }
@@ -289,6 +291,30 @@ export default class GIS extends Vue {
                 }
             }
         );
+    }
+    getyinhuanWindowInfo(troubleId: string) {
+        let that = this;
+        this.closeVideo();
+        METHOD.axiosGet(
+            that,
+            `/hiddenTrouble/getMapHiddenTroubleById/${troubleId}`,
+            function (res: any) {
+                if (res.code == 0) {
+                    let trouble = res.data,
+                        html =
+                            `<div class="windowDg"><h3>隐患</h3>` +
+                            `<p><span>隐患名称:</span>${trouble.troubleName}</p >` +
+                            `<p><span>隐患类型:</span>${trouble.troubleType}</p >` +
+                            `<p><span>隐患等级:</span>${trouble.troubleLevel}</p >` +
+                            `<p><span>地址:</span>${trouble.address}</p >` +
+                            `<p><button onclick="updateTrouble">修改</button></p >` +
+                            `</div>` +
+                            `<p class="gengxin"><button>更新</button></p>`;
+                    that.Mutil.addPopup(html, trouble.id, trouble.longitude, trouble.latitude)
+
+                }
+            }
+        );
     }
 	//关闭视频方法
 	closeVideo(){
@@ -401,6 +427,40 @@ export default class GIS extends Vue {
             obj.id
         );
     }
+    yhaddMark(obj: any, index: any) {
+        let icon,
+            that = this;
+        icon = require("@/assets/mark/yinhuan.png");
+        let option = {
+            position: [Number(obj.longitude), Number(obj.latitude)],
+            content: ` <img src="${icon}" width="50">`,
+            label: {
+                content: obj.unitName,
+                offset: [28, -7]
+            },
+            offset: [-13, -2],
+            events: {
+                click: (e: any) => {
+                    that.windowsArr2.forEach((ele: any) => {
+                        ele.visible = false;
+                    });
+                    that.$nextTick(() => {
+                        that.currentWindow = that.windowsArr2[index];
+                        that.currentWindow.visible = true;
+                    });
+                },
+            },
+            visible: true,
+        };
+        that.Mutil.addMarkerToMap(
+            'yh',
+            obj.deviceName,
+            icon,
+            [obj.longitude, obj.latitude],
+            0.6,
+            obj.id
+        );
+    }
     change(v: any) {
         let that = this;
         that.mapData.forEach((ele: any, index: any) => {
@@ -424,6 +484,13 @@ export default class GIS extends Vue {
                 that.markers2[index].visible = false;
             }
         });
+        that.yhmapData.forEach((ele: any, index: any) => {
+            if (ele.dataType == v || v == 0) {
+                that.markers3[index].visible = true;
+            } else {
+                that.markers3[index].visible = false;
+            }
+        });
     }
    
     /* 搜索 */
@@ -459,6 +526,10 @@ export default class GIS extends Vue {
         let that = this;
         that.getshipinWindowInfo(shipinid);
     }
+    getyinhuanPopcon(yinhuanid: any) {
+        let that = this;
+        that.getyinhuanWindowInfo(yinhuanid);
+    }
     created() {
         this.getMapData();
     }
@@ -484,6 +555,10 @@ export default class GIS extends Vue {
                 that.Mutil.closeAllOverlays();
                 let id = evt.selected[0].get('did');
                 if (id) that.getshipinPopcon(id);
+            }else if(evt.selected[0].get('type')==='yh'){//其他类的气泡
+                that.Mutil.closeAllOverlays();
+                let id = evt.selected[0].get('did');
+                if (id) that.getyinhuanPopcon(id);
             }
             
             
@@ -530,6 +605,17 @@ export default class GIS extends Vue {
             this.shipinVisble=true;
             this.$refs.shipinimg.lastChild.style.display = "block";
         }
+    }
+    yinhuan(){
+        if(this.yinhuanVisble){
+            this.Mutil.visibleMarks(false,"yh");
+            this.yinhuanVisble=false;
+            this.$refs.yhimg.lastChild.style.display = "none";
+        }else{
+            this.Mutil.visibleMarks(true,"yh");
+            this.yinhuanVisble=true;
+            this.$refs.yhimg.lastChild.style.display = "block";
+        }
     }
 	getStatiData() {
 	  let that = this;
@@ -589,6 +675,23 @@ export default class GIS extends Vue {
                     that.Mutil.setViewF({
                         center: center
                     })
+            }
+            if (res.code == 0 && res.data.goodsList.length > 0) {
+                    that.yhmapData = res.data.goodsList;
+                    let yhlatSum = 0;
+                    let yhlngSum = 0;
+                    that.yhmapData.forEach((ele: any, index: any) => {
+                        that.yhaddMark(ele, index);
+                        yhlngSum += ele.longitude;
+                        yhlatSum += ele.latitude;
+                    });
+                    let center = [
+                        yhlngSum / that.yhmapData.length,
+                        yhlatSum / that.yhmapData.length,
+                    ];
+                    that.Mutil.setViewF({
+                        center: center
+                    })
             }
 	      }
 	    }
@@ -606,6 +709,9 @@ export default class GIS extends Vue {
     z-index: 10;
     position:absolute;
 }
+.gengxin{
+    text-align: center;
+}
 .map-botton:nth-child(1){
     left:50px;
 }