弹框优化+网格绘制

src/App.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <header>
-      <!-- <heads class="headS"></heads> -->
+      <heads class="headS"></heads>
     </header>
     <div class="viewContent">
       <!-- <keep-alive> -->

src/components/dialog.vue

@@ -1,85 +1,196 @@
 <template >
-    <el-dialog v-model="dialogTableVisible" title="分页弹框">
-        <!-- 查询 -->
-        <el-form :inline="true" :model="formInline" class="demo-form-inline">
-            <el-form-item label="Approved by">
-            <el-input v-model="formInline.user" placeholder="Approved by" clearable />
-            </el-form-item>
-            <el-form-item label="Activity zone">
-            <el-select
-                v-model="formInline.region"
-                placeholder="Activity zone"
-                clearable
-            >
-                <el-option label="Zone one" value="shanghai" />
-                <el-option label="Zone two" value="beijing" />
-            </el-select>
-            </el-form-item>
-            <el-form-item label="Activity time">
-            <el-date-picker
-                v-model="formInline.date"
-                type="date"
-                placeholder="Pick a date"
-                clearable
-            />
-            </el-form-item>
-            <el-form-item>
-            <el-button type="primary" @click="onSubmit">查询</el-button>
-            </el-form-item>
-        </el-form>
-        <!-- 查询 -->
+  <div class="dialogSec">
+    <el-dialog v-model="dialogTableVisible" title="处罚决定书（109份）">
+      <!-- 查询 -->
+      <el-form :inline="true" :model="formInline">
+        <el-form-item label="项目编号：">
+          <el-input v-model="formInline.code" placeholder="" clearable />
+        </el-form-item>
+        <el-form-item label="单位名称：">
+          <el-input v-model="formInline.name" placeholder="" clearable />
+        </el-form-item>
 
-        <!-- 表格 -->
-        <el-table :data="gridData">
-            <el-table-column property="" label="日期" width="150" />
-            <el-table-column property="name" label="名称" width="200" />
-            <el-table-column property="address" label="地址" />
-        </el-table>
-        <!-- 表格 end -->
-        <br>
+        <el-form-item>
+          <el-button type="primary" @click="onSubmit">搜索</el-button>
+        </el-form-item>
+      </el-form>
+      <!-- 查询 -->
 
-        <!-- 分页 -->
-        <el-pagination background layout="prev, pager, next" :total="100" />
-        <!-- 分页 end -->
+      <!-- 表格 -->
+      <el-table
+        :data="gridData"
+        border
+        height="200px"
+        :header-cell-style="{
+          background: '#023C6C',
+          color: '#fff',
+          borderColor: '#013C6B',
+        }"
+        :row-style="{ background: '#06316D ', color: '#fff' }"  
+        :cell-style="{ borderColor: '#013C6B' }"
+      >
+        <el-table-column
+          property="order"
+          label="序号"
+          width="70"
+          align="center"
+        />
+        <el-table-column
+          property="code"
+          label="项目编号"
+          width="200"
+          align="center"
+        />
+        <el-table-column property="name" label="单位名称" width="150" />
+        <el-table-column
+          property="address"
+          label="单位地址"
+          width="230"
+          show-overflow-tooltip
+        />
+        <el-table-column
+          property="checkDescripe"
+          label="检查描述"
+          show-overflow-tooltip
+          width="300"
+        />
+        <el-table-column property="checkName" label="检查名称" width="200" />
+      </el-table>
+      <!-- 表格 end -->
+
+      <br />
 
+      <!-- 分页 -->
+      <div class="paginationSec">
+        <el-pagination background layout="prev, pager, next" :total="100" />
+      </div>
 
+      <!-- 分页 end -->
     </el-dialog>
+  </div>
 </template>
 <script>
 export default {
-  
-    data() {
-        return {
-            dialogTableVisible:true,
-            gridData:[
-                {
-                    date: '2016-05-02',
-                    name: 'John Smith',
-                    address: 'No.1518,  Jinshajiang Road, Putuo District',
-                },
-                {
-                    date: '2016-05-04',
-                    name: 'John Smith',
-                    address: 'No.1518,  Jinshajiang Road, Putuo District',
-                },
-                {
-                    date: '2016-05-01',
-                    name: 'John Smith',
-                    address: 'No.1518,  Jinshajiang Road, Putuo District',
-                },
-                {
-                    date: '2016-05-03',
-                    name: 'John Smith',
-                    address: 'No.1518,  Jinshajiang Road, Putuo District',
-                },
-            ],
-            formInline:{
-                user: '',
-                region: '',
-                date: '',
-            }
-        };
-    },
+  data() {
+    return {
+      dialogTableVisible: true,
+      gridData: [
+        {
+          order: 1,
+          code: "编号1",
+          name: "名称1",
+          address: "地址地址地址地址地址地址",
+          checkDescripe: "检查描述检查描述检查描述检查描述",
+          checkName: "检查名称检查名称检查名称",
+        },
+        {
+          order: 2,
+          code: "编号2",
+          name: "名称2",
+          address: "地址地址地址地址地址地址",
+          checkDescripe: "检查描述检查描述检查描述检查描述",
+          checkName: "检查名称检查名称检查名称",
+        },
+        {
+          order: 3,
+          code: "编号3",
+          name: "名称3",
+          address: "地址地址地址地址地址地址",
+          checkDescripe: "检查描述检查描述检查描述检查描述",
+          checkName: "检查名称检查名称检查名称",
+        },
+        {
+          order: 4,
+          code: "编号4",
+          name: "名称4",
+          address: "地址地址地址地址地址地址",
+          checkDescripe: "检查描述检查描述检查描述检查描述",
+          checkName: "检查名称检查名称检查名称",
+        },
+        {
+          order: 5,
+          code: "编号5",
+          name: "名称5",
+          address: "地址地址地址地址地址地址",
+          checkDescripe: "检查描述检查描述检查描述检查描述",
+          checkName: "检查名称检查名称检查名称",
+        },
+      ],
+      formInline: {
+        code: "",
+        name: "",
+      },
+    };
+  },
+  methods: {
    
+  },
 };
 </script>
+
+<style lang="scss" scoped>
+.dialogSec {
+  ::v-deep .el-dialog {
+    .el-dialog__title {
+      color: #74fbfe;
+      font-size: 16px;
+    }
+    .el-dialog__body {
+      margin-top: 20px;
+    }
+
+    .el-form-item {
+      align-items: center;
+    }
+    .el-form .el-form-item .el-form-item__content,
+    .el-input {
+      line-height: 28px;
+    }
+    .el-input__inner {
+      background: transparent;
+      color: #fff;
+      border: 1px solid #08539a;
+      line-height: 28px;
+      height: 28px;
+    }
+    .el-button {
+      padding: 0 20px;
+      min-height: 28px;
+    }
+
+    .el-table {
+      background-color: transparent;
+      border-color: red;
+      --el-table-border-color: #013c6b;
+    }
+    .el-table td,
+    .el-table th {
+      padding: 3px 0;
+      font-size: 12px;
+    }
+
+    .el-table--border,
+    .el-table--group {
+      border: 1px solid #013c6b;
+    }
+
+    .el-table--enable-row-hover .el-table__body tr:hover > td {
+      background: rgba(0, 0, 0, 0.1);
+    }
+    .el-table__body-wrapper::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+      cursor: pointer;
+    }
+
+    .el-table__body-wrapper::-webkit-scrollbar-thumb {
+      background-color: rgba(5, 34, 75, 0.8);
+      border-radius: 3px;
+    }
+    .paginationSec {
+      overflow: hidden;
+      text-align: right;
+    }
+  }
+}
+</style>

src/components/mixins/anbao.js

@@ -1,5 +1,7 @@
 let data = [
-    [{
+    [
+        //1-1
+        {
             "x": 121.26306899392851,
             "y": 31.255948793608567,
             "z": 0
@@ -691,9 +693,7 @@ let data = [
         },
 
 
-
-
-
+        // 1-2
         {
             "x": 121.26261197719793,
             "y": 31.255647713103443,
@@ -879,6 +879,9 @@ let data = [
             "y": 31.237633539898884,
             "z": 0
         },
+
+
+
         {
             "x": 121.28780545840718,
             "y": 31.235075863916393,
@@ -930,6 +933,957 @@ let data = [
             "z": 0
         },
 
+        //2-1
+        {
+            "x": 121.25569544287553,
+            "y": 31.219954661868304,
+            "z": 0
+        },
+        {
+            "x": 121.25678862337952,
+            "y": 31.21747541383972,
+            "z": 0
+        },
+        {
+            "x": 121.2553146454014,
+            "y": 31.215423030282214,
+            "z": 0
+        },
+        {
+            "x": 121.25639144440588,
+            "y": 31.213794849783348,
+            "z": 0
+        },
+        {
+            "x": 121.25954107295149,
+            "y": 31.211835411342317,
+            "z": 0
+        },
+        {
+            "x": 121.25851068849892,
+            "y": 31.212794911099593,
+            "z": 0
+        },
+        {
+            "x": 121.25757945576309,
+            "y": 31.21256429128099,
+            "z": 0
+        },
+        {
+            "x": 121.25884039458599,
+            "y": 31.21254735651076,
+            "z": 0
+        },
+        {
+            "x": 121.25903805155018,
+            "y": 31.212406176166443,
+            "z": 0
+        },
+        {
+            "x": 121.25963459942591,
+            "y": 31.21092446595445,
+            "z": 0
+        },
+        {
+            "x": 121.2598005022728,
+            "y": 31.21015314396067,
+            "z": 0
+        },
+        {
+            "x": 121.26023600997824,
+            "y": 31.209066389227765,
+            "z": 0
+        },
+        {
+            "x": 121.25919631176615,
+            "y": 31.208424645669616,
+            "z": 0
+        },
+        {
+            "x": 121.25879800376813,
+            "y": 31.208654683270197,
+            "z": 0
+        },
+        {
+            "x": 121.25867017004927,
+            "y": 31.208486548263316,
+            "z": 0
+        },
+        {
+            "x": 121.25887938212684,
+            "y": 31.20815234175789,
+            "z": 0
+        },
+        {
+            "x": 121.25955210947055,
+            "y": 31.20780739215267,
+            "z": 0
+        },
+        {
+            "x": 121.25996984483282,
+            "y": 31.20707953261303,
+            "z": 0
+        },
+        {
+            "x": 121.25987290240147,
+            "y": 31.206888769652632,
+            "z": 0
+        },
+        {
+            "x": 121.26051482528999,
+            "y": 31.205700812085052,
+            "z": 0
+        },
+        {
+            "x": 121.26156085185626,
+            "y": 31.20622199603183,
+            "z": 0
+        },
+        {
+            "x": 121.26194523191248,
+            "y": 31.20563473855317,
+            "z": 0
+        },
+        {
+            "x": 121.26272871939346,
+            "y": 31.205692875325003,
+            "z": 0
+        },
+        {
+            "x": 121.26302195032241,
+            "y": 31.204990671420326,
+            "z": 0
+        },
+        {
+            "x": 121.26356222828522,
+            "y": 31.20419175916117,
+            "z": 0
+        },
+        {
+            "x": 121.26376053667377,
+            "y": 31.20356728597836,
+            "z": 0
+        },
+        {
+            "x": 121.26551484960356,
+            "y": 31.201936863788852,
+            "z": 0
+        },
+        {
+            "x": 121.26624750647889,
+            "y": 31.20184316789758,
+            "z": 0
+        },
+        {
+            "x": 121.26897346073069,
+            "y": 31.199083401612626,
+            "z": 0
+        },
+        {
+            "x": 121.26937144634151,
+            "y": 31.19838076316206,
+            "z": 0
+        },
+        {
+            "x": 121.26979198228062,
+            "y": 31.19819077466675,
+            "z": 0
+        },
+        {
+            "x": 121.27023288706066,
+            "y": 31.19791915101291,
+            "z": 0
+        },
+        {
+            "x": 121.27065260150205,
+            "y": 31.19744332578147,
+            "z": 0
+        },
+        {
+            "x": 121.27094983623414,
+            "y": 31.19733643111608,
+            "z": 0
+        },
+        {
+            "x": 121.2711532144513,
+            "y": 31.19726259417798,
+            "z": 0
+        },
+        {
+            "x": 121.27146775553727,
+            "y": 31.197222746466352,
+            "z": 0
+        },
+        {
+            "x": 121.27170448306492,
+            "y": 31.197113978431112,
+            "z": 0
+        },
+        {
+            "x": 121.2718148749545,
+            "y": 31.197009044829542,
+            "z": 0
+        },
+
+        // 需反转的
+        {
+            "x": 121.2720212976383,
+            "y": 31.196721405132763,
+            "z": 0
+        },
+        {
+            "x": 121.27207053240092,
+            "y": 31.196467332471116,
+            "z": 0
+        },
+        {
+            "x": 121.27214167203854,
+            "y": 31.196341165303938,
+            "z": 0
+        },
+        {
+            "x": 121.27232094434261,
+            "y": 31.196107689335975,
+            "z": 0
+        },
+        {
+            "x": 121.27277669728005,
+            "y": 31.195748749307214,
+            "z": 0
+        },
+        {
+            "x": 121.27413614391547,
+            "y": 31.196167696217405,
+            "z": 0
+        },
+        {
+            "x": 121.27371488939002,
+            "y": 31.19692312394357,
+            "z": 0
+        },
+        {
+            "x": 121.2740917561548,
+            "y": 31.197137249276242,
+            "z": 0
+        },
+        {
+            "x": 121.27301559377264,
+            "y": 31.198902411571947,
+            "z": 0
+        },
+        {
+            "x": 121.2738182345617,
+            "y": 31.199436249967402,
+            "z": 0
+        },
+        {
+            "x": 121.2679380112941,
+            "y": 31.2087491993698,
+            "z": 0
+        },
+        {
+            "x": 121.28277770112214,
+            "y": 31.213903482332274,
+            "z": 0
+        },
+        {
+            "x": 121.28778782255273,
+            "y": 31.21086574924065,
+            "z": 0
+        },
+        {
+            "x": 121.28949674903615,
+            "y": 31.21304120596614,
+            "z": 0
+        },
+        {
+            "x": 121.29240658731159,
+            "y": 31.21092528517595,
+            "z": 0
+        },
+        {
+            "x": 121.29388697651225,
+            "y": 31.211731091511307,
+            "z": 0
+        },
+        {
+            "x": 121.29275507343903,
+            "y": 31.215126797105142,
+            "z": 0
+        },
+        {
+            "x": 121.2934728972316,
+            "y": 31.21487347297811,
+            "z": 0
+        },
+        {
+            "x": 121.29381189004766,
+            "y": 31.215487720852447,
+            "z": 0
+        },
+        {
+            "x": 121.29446557830902,
+            "y": 31.215761980589814,
+            "z": 0
+        },
+        {
+            "x": 121.29459617923466,
+            "y": 31.216730421552253,
+            "z": 0
+        },
+        {
+            "x": 121.29215603092928,
+            "y": 31.2177148130604,
+            "z": 0
+        },
+        // end
+        {
+            "x": 121.29185638724454,
+            "y": 31.219556829147965,
+            "z": 0
+        },
+        {
+            "x": 121.29185215309188,
+            "y": 31.22145969717075,
+            "z": 0
+        },
+        {
+            "x": 121.29089439425877,
+            "y": 31.22111528326487,
+            "z": 0
+        },
+        {
+            "x": 121.29011077784375,
+            "y": 31.222770136824806,
+            "z": 0
+        },
+        {
+            "x": 121.28713872698769,
+            "y": 31.221458909138622,
+            "z": 0
+        },
+        {
+            "x": 121.28466628438939,
+            "y": 31.219862477247037,
+            "z": 0
+        },
+        {
+            "x": 121.28367417389761,
+            "y": 31.22226671388106,
+            "z": 0
+        },
+        {
+            "x": 121.28738384139834,
+            "y": 31.223730713074108,
+            "z": 0
+        },
+        {
+            "x": 121.28921050634209,
+            "y": 31.224460151280972,
+            "z": 0
+        },
+        {
+            "x": 121.28940746738937,
+            "y": 31.224648761004474,
+            "z": 0
+        },
+        {
+            "x": 121.2889829275082,
+            "y": 31.227089859053624,
+            "z": 0
+        },
+        {
+            "x": 121.28874590198687,
+            "y": 31.227217279364922,
+            "z": 0
+        },
+        {
+            "x": 121.28889736875766,
+            "y": 31.22745296466917,
+            "z": 0
+        },
+        {
+            "x": 121.2882939143351,
+            "y": 31.22789424832232,
+            "z": 0
+        },
+        {
+            "x": 121.28972209526026,
+            "y": 31.228576391720335,
+            "z": 0
+        },
+        {
+            "x": 121.28976459059997,
+            "y": 31.228787380911605,
+            "z": 0
+        },
+        {
+            "x": 121.2895905716389,
+            "y": 31.229698665656407,
+            "z": 0
+        },
+        {
+            "x": 121.28892281297212,
+            "y": 31.229581561535188,
+            "z": 0
+        },
+        {
+            "x": 121.28811761497434,
+            "y": 31.22932398975244,
+            "z": 0
+        },
+        {
+            "x": 121.28786288362285,
+            "y": 31.229778962753894,
+            "z": 0
+        },
+
+
+        //2-2
+        {
+            "x": 121.28770572005875,
+            "y": 31.231298109580333,
+            "z": 0
+        },
+        {
+            "x": 121.28862435833986,
+            "y": 31.232470621908448,
+            "z": 0
+        },
+        {
+            "x": 121.28724244450592,
+            "y": 31.234226305977487,
+            "z": 0
+        },
+
+
+        {
+            "x": 121.28765396241772,
+            "y": 31.234909451596693,
+            "z": 0
+        },
+        {
+            "x": 121.29344250429108,
+            "y": 31.232490021233055,
+            "z": 0
+        },
+        {
+            "x": 121.29680848658919,
+            "y": 31.232859206968126,
+            "z": 0
+        },
+        {
+            "x": 121.29897445996805,
+            "y": 31.232416280100562,
+            "z": 0
+        },
+        {
+            "x": 121.30306783107092,
+            "y": 31.231388942518922,
+            "z": 0
+        },
+        {
+            "x": 121.30545955251783,
+            "y": 31.231005739912124,
+            "z": 0
+        },
+        {
+            "x": 121.30856545607708,
+            "y": 31.229509483347364,
+            "z": 0
+        },
+        {
+            "x": 121.3102969584748,
+            "y": 31.22911543250343,
+            "z": 0
+        },
+        {
+            "x": 121.31345681840857,
+            "y": 31.229210300962286,
+            "z": 0
+        },
+        {
+            "x": 121.31471629733679,
+            "y": 31.227228540342303,
+            "z": 0
+        },
+        {
+            "x": 121.31551009741234,
+            "y": 31.225268478355897,
+            "z": 0
+        },
+        {
+            "x": 121.31556095927569,
+            "y": 31.225009251361428,
+            "z": 0
+        },
+        {
+            "x": 121.31494671619855,
+            "y": 31.22498546069847,
+            "z": 0
+        },
+        {
+            "x": 121.31502856877569,
+            "y": 31.225336869773017,
+            "z": 0
+        },
+        {
+            "x": 121.31446411570535,
+            "y": 31.22505435510348,
+            "z": 0
+        },
+        {
+            "x": 121.31366244721714,
+            "y": 31.225855509816704,
+            "z": 0
+        },
+        {
+            "x": 121.31102244636841,
+            "y": 31.22391764064442,
+            "z": 0
+        },
+        {
+            "x": 121.31110474933743,
+            "y": 31.223577821593718,
+            "z": 0
+        },
+        {
+            "x": 121.31055029646461,
+            "y": 31.223544572755976,
+            "z": 0
+        },
+        {
+            "x": 121.31030606832556,
+            "y": 31.223593581138434,
+            "z": 0
+        },
+        {
+            "x": 121.3099280514969,
+            "y": 31.223275574453254,
+            "z": 0
+        },
+        {
+            "x": 121.31009747547881,
+            "y": 31.222955731803005,
+            "z": 0
+        },
+        {
+            "x": 121.31105199122159,
+            "y": 31.221777171928505,
+            "z": 0
+        },
+        {
+            "x": 121.30656681102106,
+            "y": 31.22004862868385,
+            "z": 0
+        },
+        {
+            "x": 121.30479797678564,
+            "y": 31.21944054897462,
+            "z": 0
+        },
+        {
+            "x": 121.30293060951216,
+            "y": 31.21942586615273,
+            "z": 0
+        },
+        {
+            "x": 121.30049873078744,
+            "y": 31.219763905132112,
+            "z": 0
+        },
+        {
+            "x": 121.29805053788982,
+            "y": 31.219989015097767,
+            "z": 0
+        },
+        {
+            "x": 121.29784516114488,
+            "y": 31.21956231228988,
+            "z": 0
+        },
+        {
+            "x": 121.2970757945332,
+            "y": 31.21956069357895,
+            "z": 0
+        },
+        {
+            "x": 121.29615820520492,
+            "y": 31.219239172763352,
+            "z": 0
+        },
+        {
+            "x": 121.29596341760524,
+            "y": 31.218553340357367,
+            "z": 0
+        },
+        {
+            "x": 121.29424714793433,
+            "y": 31.218758125744653,
+            "z": 0
+        },
+        {
+            "x": 121.29357545444218,
+            "y": 31.2184396828269,
+            "z": 0
+        },
+        {
+            "x": 121.29341653632025,
+            "y": 31.217818131526357,
+            "z": 0
+        },
+        {
+            "x": 121.29335593827045,
+            "y": 31.21736140930398,
+            "z": 0
+        },
+
+        //2-3
+
+        {
+            "x": 121.29215603092928,
+            "y": 31.2177148130604,
+            "z": 0
+        },
+        {
+            "x": 121.29459617923466,
+            "y": 31.216730421552253,
+            "z": 0
+        },
+        {
+            "x": 121.29446557830902,
+            "y": 31.215761980589814,
+            "z": 0
+        },
+        {
+            "x": 121.29381189004766,
+            "y": 31.215487720852447,
+            "z": 0
+        },
+        {
+            "x": 121.2934728972316,
+            "y": 31.21487347297811,
+            "z": 0
+        },
+        {
+            "x": 121.29275507343903,
+            "y": 31.215126797105142,
+            "z": 0
+        },
+        {
+            "x": 121.29388697651225,
+            "y": 31.211731091511307,
+            "z": 0
+        },
+        {
+            "x": 121.29240658731159,
+            "y": 31.21092528517595,
+            "z": 0
+        },
+        {
+            "x": 121.28949674903615,
+            "y": 31.21304120596614,
+            "z": 0
+        },
+        {
+            "x": 121.28778782255273,
+            "y": 31.21086574924065,
+            "z": 0
+        },
+        {
+            "x": 121.28277770112214,
+            "y": 31.213903482332274,
+            "z": 0
+        },
+        {
+            "x": 121.2679380112941,
+            "y": 31.2087491993698,
+            "z": 0
+        },
+        {
+            "x": 121.2738182345617,
+            "y": 31.199436249967402,
+            "z": 0
+        },
+        {
+            "x": 121.27301559377264,
+            "y": 31.198902411571947,
+            "z": 0
+        },
+        {
+            "x": 121.2740917561548,
+            "y": 31.197137249276242,
+            "z": 0
+        },
+        {
+            "x": 121.27371488939002,
+            "y": 31.19692312394357,
+            "z": 0
+        },
+        {
+            "x": 121.27413614391547,
+            "y": 31.196167696217405,
+            "z": 0
+        },
+        {
+            "x": 121.27277669728005,
+            "y": 31.195748749307214,
+            "z": 0
+        },
+        {
+            "x": 121.27232094434261,
+            "y": 31.196107689335975,
+            "z": 0
+        },
+        {
+            "x": 121.27214167203854,
+            "y": 31.196341165303938,
+            "z": 0
+        },
+        {
+            "x": 121.27207053240092,
+            "y": 31.196467332471116,
+            "z": 0
+        },
+        {
+            "x": 121.2720212976383,
+            "y": 31.196721405132763,
+            "z": 0
+        },
+        {
+            "x": 121.27343146488315,
+            "y": 31.195586923636686,
+            "z": 0
+        },
+        {
+            "x": 121.2756538166286,
+            "y": 31.195860342482565,
+            "z": 0
+        },
+        {
+            "x": 121.27715861652526,
+            "y": 31.195881136177164,
+            "z": 0
+        },
+        {
+            "x": 121.27795256661432,
+            "y": 31.196260837237524,
+            "z": 0
+        },
+        {
+            "x": 121.27898564673055,
+            "y": 31.196480456491233,
+            "z": 0
+        },
+        {
+            "x": 121.28129220005526,
+            "y": 31.197449178249094,
+            "z": 0
+        },
+        {
+            "x": 121.28313064137608,
+            "y": 31.198370722791125,
+            "z": 0
+        },
+        {
+            "x": 121.28510096039764,
+            "y": 31.200055561704367,
+            "z": 0
+        },
+        {
+            "x": 121.28701554966078,
+            "y": 31.20200155942259,
+            "z": 0
+        },
+        {
+            "x": 121.28757699563664,
+            "y": 31.202957037574418,
+            "z": 0
+        },
+        {
+            "x": 121.28791376125216,
+            "y": 31.20441056007064,
+            "z": 0
+        },
+        {
+            "x": 121.2884613996364,
+            "y": 31.204498288165414,
+            "z": 0
+        },
+        {
+            "x": 121.2889090852364,
+            "y": 31.204232967126263,
+            "z": 0
+        },
+        {
+            "x": 121.28990577708673,
+            "y": 31.204914391725055,
+            "z": 0
+        },
+        {
+            "x": 121.29008904027235,
+            "y": 31.20505364268673,
+            "z": 0
+        },
+        {
+            "x": 121.29038776828077,
+            "y": 31.20479693176254,
+            "z": 0
+        },
+        {
+            "x": 121.29134652883143,
+            "y": 31.205385998228902,
+            "z": 0
+        },
+        {
+            "x": 121.29164025657286,
+            "y": 31.2050369707241,
+            "z": 0
+        },
+        {
+            "x": 121.29135385041624,
+            "y": 31.20454422544135,
+            "z": 0
+        },
+        {
+            "x": 121.29119114454463,
+            "y": 31.204249751653435,
+            "z": 0
+        },
+        {
+            "x": 121.29146299128476,
+            "y": 31.20380014577466,
+            "z": 0
+        },
+        {
+            "x": 121.2924014724163,
+            "y": 31.20383116755102,
+            "z": 0
+        },
+        {
+            "x": 121.29305027230463,
+            "y": 31.203485325246085,
+            "z": 0
+        },
+        {
+            "x": 121.29316852124843,
+            "y": 31.202938650534097,
+            "z": 0
+        },
+        {
+            "x": 121.29378839785753,
+            "y": 31.202737559190712,
+            "z": 0
+        },
+        {
+            "x": 121.29503127814003,
+            "y": 31.20354842821435,
+            "z": 0
+        },
+        {
+            "x": 121.29524002902315,
+            "y": 31.203431366276416,
+            "z": 0
+        },
+        {
+            "x": 121.29628783365442,
+            "y": 31.204154419507574,
+            "z": 0
+        },
+        {
+            "x": 121.29698669185795,
+            "y": 31.20369204412662,
+            "z": 0
+        },
+        {
+            "x": 121.29841713288631,
+            "y": 31.20385543817934,
+            "z": 0
+        },
+        {
+            "x": 121.29857397050863,
+            "y": 31.204007369702243,
+            "z": 0
+        },
+        {
+            "x": 121.29913374933817,
+            "y": 31.203663690265923,
+            "z": 0
+        },
+        {
+            "x": 121.29894835412655,
+            "y": 31.20760565335404,
+            "z": 0
+        },
+        {
+            "x": 121.29881666685758,
+            "y": 31.207756678278667,
+            "z": 0
+        },
+        {
+            "x": 121.29878032314176,
+            "y": 31.208053659902138,
+            "z": 0
+        },
+        {
+            "x": 121.29678775227714,
+            "y": 31.209868481802754,
+            "z": 0
+        },
+        {
+            "x": 121.29588677076417,
+            "y": 31.20943885753825,
+            "z": 0
+        },
+        {
+            "x": 121.29529751396684,
+            "y": 31.209956467011132,
+            "z": 0
+        },
+        {
+            "x": 121.29542371590264,
+            "y": 31.21053998842005,
+            "z": 0
+        },
+        {
+            "x": 121.2948929777798,
+            "y": 31.211019464610224,
+            "z": 0
+        },
+        {
+            "x": 121.29517222818946,
+            "y": 31.211257711770493,
+            "z": 0
+        },
+        {
+            "x": 121.29476139781752,
+            "y": 31.211748766099834,
+            "z": 0
+        },
+        {
+            "x": 121.29457679062523,
+            "y": 31.21165661188895,
+            "z": 0
+        },
+        {
+            "x": 121.29432727118389,
+            "y": 31.211834376370586,
+            "z": 0
+        },
+        {
+            "x": 121.29379430840918,
+            "y": 31.21172123967822,
+            "z": 0
+        }
+
+
+
+
+
+
+
+
+
     ]
 ]
 

src/components/mixins/map-data1.js

@@ -90,16 +90,140 @@ export default {
             }
 
             //区域采集
-            var options1 = {
-                callBack: pickPolygonCallBack
-            };
-            window.jMap.Pick.pickPolygon(options1);
-            // 区域采集完毕的回调函数
-            function pickPolygonCallBack(obj) {
-                console.log(obj); // obj为返回值
+            // var options1 = {
+            //     callBack: pickPolygonCallBack
+            // };
+            // window.jMap.Pick.pickPolygon(options1);
+            // // 区域采集完毕的回调函数
+            // function pickPolygonCallBack(obj) {
+            //     console.log(obj); // obj为返回值
+            // }
+
+
+
+            // // 图层查询
+            // var JmapQuery = new JMapQuery(window.jMap); // JMap为初始化地图时，实例化的JMap对象
+            // //例1：查询图层记录总量
+            // var qp = new JMapQueryParam({
+            //     queryMapService: "mh_dyn_district",
+            //     queryMapLayers: [1],
+            //     returnCountOnly: true,
+            //     callBack: testQueryCallBack
+            // });
+            // JmapQuery.execQuery(qp);
+
+
+
+            //例2：查询图层列表
+            var JmapQuery = new JMapQuery(window.jMap); // JMap为初始化地图时，实例化的JMap对象
+
+            var qp2 = new JMapQueryParam({
+                queryMapService: "mh_dyn_district",
+                queryMapLayers: [1],
+                //  queryGeometry: result[0],         //  默认进行属性查询，放开该段注释将在选定的几何空间内进行空间查询
+                // queryWhere: "name like '%莘庄镇%' ", //  可自定义查询条件，也可不传该参数
+                outFields: ["*"], //  返回字段信息
+                callBack: testQueryCallBack
+            });
+            JmapQuery.execQuery(qp2);
+
+            // var qp4 = new JMapQueryParam({
+            //     queryMapService: "mh_dyn_district",
+            //     queryMapLayers: [2],
+            //     groupByFieldsForStatistics: ['subdistrict'], //  所需进行分组查询字段
+            //     onStatisticField: 'subdistrict', //  将在其上计算统计信息的字段名称
+            //     statisticType: 'count', //  统计信息的类型
+            //     outStatisticFieldName: 'num', //  指定输出字段名称（别名）
+            //     callBack: testQueryCallBack
+            // });
+            // JmapQuery.execQuery(qp4);
+
+
+            // 图层查询完毕的回调函数
+            function testQueryCallBack(obj) {
+                var bigArr = obj.features;
+                var bigNewArr = []
+                bigArr.forEach(function(item, index) {
+                    var aaa = item.geometry.rings[0];
+                    var newArr = aaa.map(function(value, index) {
+                        var obj = {
+                            x: value[0],
+                            y: value[1],
+                            z: 0.1
+                        }
+                        return obj
+                    })
+                    bigNewArr.push(newArr)
+
+                })
+
+
+                // 首先定义一个接收合并之后值的数组
+                let arrayAll = [];
+
+                bigNewArr.forEach(function(item, index) {
+                    item.forEach(function(i) {
+                        arrayAll.push(i)
+                    })
+                })
+
+
+                console.log(222)
+                console.log(arrayAll)
+
+
+
+                //区域分布
+                var target = {
+                    id: '100001',
+                    attributes: {
+                        name: '测试区域分布'
+                    },
+                    position: arrayAll,
+                    label: {
+                        text: "测试区域分布",
+                        font: "16px Helvetica",
+                        color: "rgb(255, 0, 0, .8)",
+                        pixelOffset: [0, -50]
+                    }
+                };
+                var options = {
+                    isZoom: true,
+                    click: regionLocateCallBack,
+                    style: {
+                        // color: '',
+                        transparency: 0.6,
+                        outline: true,
+                        outlineColor: 'green',
+                        perPositionHeight: true
+                    }
+
+
+                };
+                window.jMap.Locate.regionLocate(target, options);
+                // 分布点点击事件的回调函数
+                function regionLocateCallBack(obj) {
+                    console.log(obj); // obj为返回值
+                }
+
+
+
+
+
             }
 
 
+
+
+
+
+
+
+
+
+
+
+
             // 街镇标题
             var qp = new JMapQueryParam({
                 queryMapService: "mh_dyn_district",

src/views/security-plan.vue

@@ -21,6 +21,126 @@ export default {
         return {}
     },
     mounted() {
+
+
+        var aa=[ 
+            {
+                "x": 121.2720212976383,
+                "y": 31.196721405132763,
+                "z": 0
+            },
+            {
+                "x": 121.27207053240092,
+                "y": 31.196467332471116,
+                "z": 0
+            },
+            {
+                "x": 121.27214167203854,
+                "y": 31.196341165303938,
+                "z": 0
+            },
+            {
+                "x": 121.27232094434261,
+                "y": 31.196107689335975,
+                "z": 0
+            },
+            {
+                "x": 121.27277669728005,
+                "y": 31.195748749307214,
+                "z": 0
+            },
+            {
+                "x": 121.27413614391547,
+                "y": 31.196167696217405,
+                "z": 0
+            },
+            {
+                "x": 121.27371488939002,
+                "y": 31.19692312394357,
+                "z": 0
+            },
+            {
+                "x": 121.2740917561548,
+                "y": 31.197137249276242,
+                "z": 0
+            },
+            {
+                "x": 121.27301559377264,
+                "y": 31.198902411571947,
+                "z": 0
+            },
+            {
+                "x": 121.2738182345617,
+                "y": 31.199436249967402,
+                "z": 0
+            },
+            {
+                "x": 121.2679380112941,
+                "y": 31.2087491993698,
+                "z": 0
+            },
+            {
+                "x": 121.28277770112214,
+                "y": 31.213903482332274,
+                "z": 0
+            },
+            {
+                "x": 121.28778782255273,
+                "y": 31.21086574924065,
+                "z": 0
+            },
+            {
+                "x": 121.28949674903615,
+                "y": 31.21304120596614,
+                "z": 0
+            },
+            {
+                "x": 121.29240658731159,
+                "y": 31.21092528517595,
+                "z": 0
+            },
+            {
+                "x": 121.29388697651225,
+                "y": 31.211731091511307,
+                "z": 0
+            },
+            {
+                "x": 121.29275507343903,
+                "y": 31.215126797105142,
+                "z": 0
+            },
+            {
+                "x": 121.2934728972316,
+                "y": 31.21487347297811,
+                "z": 0
+            },
+            {
+                "x": 121.29381189004766,
+                "y": 31.215487720852447,
+                "z": 0
+            },
+            {
+                "x": 121.29446557830902,
+                "y": 31.215761980589814,
+                "z": 0
+            },
+            {
+                "x": 121.29459617923466,
+                "y": 31.216730421552253,
+                "z": 0
+            },
+            {
+                "x": 121.29215603092928,
+                "y": 31.2177148130604,
+                "z": 0
+            },
+
+        ]
+
+        var bb=[]
+
+        bb=aa.reverse()
+        console.log(bb)
         
         this.initMap(); //地图初始化
         // this.anbaoMap(); //安保区域