地图搜索，地图打印

.gitignore

@@ -4990,4 +4990,5 @@ node_modules/@babel/core/node_modules/@babel/helpers/node_modules/@babel/travers
 package-lock.json
 package.json
 dist
+dist.zip
 evn.setting.js

src/views/MapView/mapViewTools/mapQuery.vue

@@ -1,6 +1,8 @@
 <template>
   <div class="map-control">
-    <el-autocomplete class="inline-input input-with-select" v-model="inputInfo" :fetch-suggestions="querySearch" :placeholder="placeholder" :trigger-on-focus="false" @select="handleSelect" clearable @clear="clearInput">
+    <el-autocomplete ref="autocomplete" class="inline-input input-with-select" v-model="inputInfo" :fetch-suggestions="querySearch"
+                     :placeholder="placeholder" :trigger-on-focus="false" @select="handleSelect" clearable @clear="clearInput"
+                     :popper-append-to-body="false" :popper-class="suggestionClass">
       <el-select v-model="selectType" slot="prepend" class="select-type" @change="changeSelect">
         <el-option label="地名搜索" value="address"></el-option>
         <el-option label="坐标定位" value="coord"></el-option>
@@ -37,13 +39,12 @@ export default {
       featuresRes: null,
       select: null,
       markDiv: null, // 提示弹窗
-      txtSpan: null // 提示文字
+      txtSpan: null, // 提示文字
+      suggestionClass: ''
     };
-  },
-  mounted() {
-
   },
   methods: {
+
     /**
      * @description 选择查询的类型
      */
@@ -51,18 +52,20 @@ export default {
       switch (val) {
         case 'address':
           this.placeholder = '请输入地名';
+          this.suggestionClass = ''
           break
         case 'coord':
           this.placeholder = '经度,纬度'
+          this.suggestionClass = 'my-suggestion'
           break
       }
     },
     querySearch(queryString, cb) {
-      if (this.selectType == 'coord') return false
       this.sqlQueryu(queryString);
       setTimeout(() => {
         cb(this.featuresRes.features)
       }, 500);
+
     },
     /**
      *@description 点击提示事件
@@ -325,6 +328,12 @@ export default {
       }
     }
   }
+
+  .el-autocomplete {
+    >>> .el-autocomplete-suggestion.my-suggestion {
+      display: none !important;
+    }
+  }
 }
 .el-autocomplete {
   width: 400px;

src/views/kxcSystem/mapPrint/css.scss

@@ -0,0 +1,40 @@
+.panel-container {
+  margin-bottom: 20px;
+
+  .item-head {
+    font-size: 14px;
+    font-family: Source Han Sans CN;
+    color: #333333;
+    line-height: 18px;
+    margin: 10px 0;
+    font-weight: 600;
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 3px;
+      height: 12px;
+      background: #2a77f7;
+      vertical-align: middle;
+      margin-right: 5px;
+    }
+  }
+
+  .el-input-number>>>.el-input__inner {
+    text-align: left;
+  }
+
+  .op-box {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+
+    .item-close {
+      cursor: pointer;
+
+      &:hover {
+        color: #f40;
+      }
+    }
+  }
+}

src/views/kxcSystem/mapPrint/widget.vue

@@ -1,165 +1,73 @@
 <template>
   <!-- 地图打印 -->
-  <div class="print-container">
-    <div class="print-setting">
-      <el-collapse v-model="activeNames" accordion @change="handleChange">
-        <el-collapse-item title="基本信息" name="1">
-          <el-row>
-            <el-col :span="24">
-              <el-row>
-                <el-col :span="5">打印图层：</el-col>
-                <el-col :span="19">
-                  <el-select v-model="selectLayers" multiple value-key="layerUrl" size="small" placeholder="选择打印图层" @change="selectLayer"
-                             style="width:100%">
-                    <el-option-group v-for="group in layersOptions" :key="group.label" :label="group.label">
-                      <el-option v-for="item in group.options" :key="item.layerUrl" :label="item.label" :value="item"></el-option>
-                    </el-option-group>
-                  </el-select>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col :span="24">
-              <el-row>
-                <el-col :span="5">布局模板：</el-col>
-                <el-col :span="19">
-                  <el-select v-model="mapPrintPraram.template" size="small" placeholder="选择打印模板" style="width:100%">
-                    <el-option v-for="(item,index) in printTemplates" :key="index" :label="item" :value="item"></el-option>
-                  </el-select>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col :span="24">
-              <el-row>
-                <el-col :span="5">标题：</el-col>
-                <el-col :span="19">
-                  <el-input v-model="mapPrintPraram.title" size="small" placeholder="输入地图标题"></el-input>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col :span="24">
-              <el-row>
-                <el-col :span="5">副标题：</el-col>
-                <el-col :span="19">
-                  <el-input v-model="mapPrintPraram.subTitle" size="small" placeholder="输入地图副标题"></el-input>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col :span="24">
-              <el-row>
-                <el-col :span="5">版权信息：</el-col>
-                <el-col :span="19">
-                  <el-input v-model="mapPrintPraram.copyrightInfo" size="small" placeholder="输入版权信息"></el-input>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col :span="24">
-              <el-row>
-                <el-col :span="5">作者：</el-col>
-                <el-col :span="19">
-                  <el-input v-model="mapPrintPraram.author" size="small" placeholder="输入作者名称"></el-input>
-                </el-col>
-              </el-row>
-            </el-col>
-          </el-row>
-        </el-collapse-item>
-        <el-collapse-item title="附图" name="2">
-          <el-row>
-            <el-col :span="24">
-              <el-row>
-                <el-col :span="5">比例尺：</el-col>
-                <el-col :span="19">
-                  <el-input v-model="mapPrintPraram.scale" size="small" placeholder="小地图比例尺" :readonly="true"></el-input>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col :span="24">
-              <el-row>
-                <el-col :span="5">中心点：</el-col>
-                <el-col :span="19">
-                  <el-input v-model="mapPrintPraram.mapCenterPoint" size="small" placeholder="地图中心点" :readonly="true"></el-input>
-                </el-col>
-              </el-row>
-            </el-col>
-          </el-row>
-        </el-collapse-item>
-        <el-collapse-item title="比例尺" name="3">
-          <el-row>
-            <el-col :span="24">
-              <el-row>
-                <el-col :span="5">文本：</el-col>
-                <el-col :span="19">
-                  <el-input v-model="mapPrintPraram.scaleText" size="small" placeholder="输入比例尺文本"></el-input>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col :span="24">
-              <el-row>
-                <el-col :span="5">样式：</el-col>
-                <el-col :span="19">
-                  <el-select v-model="mapPrintPraram.scaleStyle" size="small" placeholder="选择比例尺样式" style="width:100%">
-                    <el-option label="line" value="LINE"></el-option>
-                    <el-option label="bar" value="BAR"></el-option>
-                    <!-- <el-option label="bar_sub" value="BAR_SUB"></el-option> -->
-                  </el-select>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col :span="24">
-              <el-row>
-                <el-col :span="5">段数：</el-col>
-                <el-col :span="19">
-                  <el-input v-model="mapPrintPraram.intervals" size="small" placeholder="输入比例尺段数"></el-input>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col :span="24">
-              <el-row>
-                <el-col :span="5">单位：</el-col>
-                <el-col :span="19">
-                  <el-select v-model="mapPrintPraram.scaleUnit" size="small" placeholder="选择比例尺单位" style="width:100%">
-                    <el-option label="米" value="METER"></el-option>
-                    <!-- <el-option label="英里" value="FOOT"></el-option>
+  <div class="panel-container">
+    <div class="op-box">
+      <el-form label-width="auto">
+        <div class="item-head" style="margin-top:0">基本信息</div>
+        <el-form-item label="打印图层" style="margin:0">
+          <el-select v-model="selectLayers" multiple value-key="layerUrl" size="small" placeholder="选择打印图层" @change="selectLayer"
+                     style="width:100%">
+            <el-option-group v-for="group in layersOptions" :key="group.label" :label="group.label">
+              <el-option v-for="item in group.options" :key="item.layerUrl" :label="item.label" :value="item"></el-option>
+            </el-option-group>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="布局模板">
+          <el-select v-model="mapPrintPraram.template" size="small" placeholder="选择打印模板" style="width:100%">
+            <el-option v-for="(item,index) in printTemplates" :key="index" :label="item" :value="item"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="标题">
+          <el-input v-model="mapPrintPraram.title" size="small" placeholder="输入地图标题"></el-input>
+        </el-form-item>
+        <el-form-item label="副标题">
+          <el-input v-model="mapPrintPraram.subTitle" size="small" placeholder="输入地图副标题"></el-input>
+        </el-form-item>
+        <el-form-item label="版权信息">
+          <el-input v-model="mapPrintPraram.copyrightInfo" size="small" placeholder="输入版权信息"></el-input>
+        </el-form-item>
+        <el-form-item label="作者">
+          <el-input v-model="mapPrintPraram.author" size="small" placeholder="输入作者名称"></el-input>
+        </el-form-item>
+        <div class="item-head">比例尺</div>
+        <el-form-item label="文本">
+          <el-input v-model="mapPrintPraram.scaleText" size="small" placeholder="输入比例尺文本"></el-input>
+        </el-form-item>
+        <el-form-item label="样式">
+          <el-select v-model="mapPrintPraram.scaleStyle" size="small" placeholder="选择比例尺样式" style="width:100%">
+            <el-option label="线状(line)" value="LINE"></el-option>
+            <el-option label="条状(bar)" value="BAR"></el-option>
+            <!-- <el-option label="bar_sub" value="BAR_SUB"></el-option> -->
+          </el-select>
+        </el-form-item>
+        <el-form-item label="段数">
+          <!-- <el-input v-model="mapPrintPraram.intervals" size="small" placeholder="输入比例尺段数"></el-input> -->
+          <el-input-number size="small" v-model="mapPrintPraram.intervals" placeholder="输入比例尺段数" controls-position="right" :step="1"
+                           :min="3" :max="10" style="width:100%" @blur="intervalsChange"></el-input-number>
+          </el-input-number>
+        </el-form-item>
+        <el-form-item label="单位">
+          <el-select v-model="mapPrintPraram.scaleUnit" size="small" placeholder="选择比例尺单位" style="width:100%">
+            <el-option label="米" value="METER"></el-option>
+            <!-- <el-option label="英里" value="FOOT"></el-option>
                     <el-option label="度" value="DEGREES"></el-option> -->
-                  </el-select>
-                </el-col>
-              </el-row>
-            </el-col>
-          </el-row>
-        </el-collapse-item>
-        <el-collapse-item title="导出选项" name="4">
-          <el-row>
-            <el-col :span="24">
-              <el-row>
-                <el-col :span="5">格式：</el-col>
-                <el-col :span="19">
-                  <el-select v-model="mapPrintPraram.exportFormat" size="small" placeholder="选择导出格式" style="width:100%">
-                    <el-option label="PDF" value="PDF"></el-option>
-                    <el-option label="PNG" value="PNG"></el-option>
-                  </el-select>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col :span="24">
-              <el-row>
-                <el-col :span="5">DPI：</el-col>
-                <el-col :span="19">
-                  <el-input v-model="mapPrintPraram.exportDpi" size="small" placeholder="输入分辩率"></el-input>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col :span="24">
-              <el-row>
-                <el-col :span="5">比例尺：</el-col>
-                <el-col :span="19">
-                  <el-input v-model="mapPrintPraram.exportScale" size="small" placeholder="导出比例尺" :readonly="true"></el-input>
-                </el-col>
-              </el-row>
-            </el-col>
-          </el-row>
-        </el-collapse-item>
-      </el-collapse>
+          </el-select>
+        </el-form-item>
+        <div class="item-head">导出选项</div>
+        <el-form-item label="格式">
+          <el-select v-model="mapPrintPraram.exportFormat" size="small" placeholder="选择导出格式" style="width:100%">
+            <el-option label="PDF" value="PDF"></el-option>
+            <el-option label="PNG" value="PNG"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="分辨率">
+          <!-- <el-input v-model="mapPrintPraram.exportDpi" size="small" placeholder="输入分辩率"></el-input> -->
+          <el-input-number size="small" v-model="mapPrintPraram.exportDpi" placeholder="输入分辩率" controls-position="right" :step="10"
+                           :min="96" :max="496" style="width:100%" @blur="dpiChange"></el-input-number>
+        </el-form-item>
+      </el-form>
     </div>
-    <div class="print-button">
+    <div class="op-box">
       <el-button type="primary" style="width:100%" size="small" @click="printMap" :loading="printStatus">
         <span v-if="printStatus==false">打印</span>
         <span v-else>正在打印中…</span>
@@ -253,7 +161,8 @@ export default {
       // 获取打印模板信息
       this.webPrintingJobService.getLayoutTemplates(e => {
         e.result.forEach(item => {
-          this.printTemplates.push(item.templateName)
+          if (item.templateName != 'A4_landscape_v2' && item.templateName != 'A3_mapcornermarks')
+            this.printTemplates.push(item.templateName)
         })
       })
       // 初始化图层选项
@@ -280,7 +189,7 @@ export default {
      */
     printMap() {
       this.printStatus = true // 执行状态
-      console.log("参数：", this.mapPrintPraram)
+      console.log("参数：", this.mapPrintPraram.mapCenterPoint)
       let params = new SuperMap.WebPrintingJobParameters({
         "layoutOptions": {
           "templateName": this.mapPrintPraram.template,
@@ -302,7 +211,10 @@ export default {
             "customItems": this.mapPrintPraram.legendItems
           },
           "littleMapOptions": {
-            "center": { "x": this.mapPrintPraram.mapCenterPoint.split(',')[0], "y": this.mapPrintPraram.mapCenterPoint.split(',')[1] },
+            "center": {
+              "x": this.mapPrintPraram.mapCenterPoint.split('，')[0],
+              "y": this.mapPrintPraram.mapCenterPoint.split('，')[1]
+            },
             // "scale": this.mapPrintPraram.scale,
             "layers": this.mapPrintPraram.layers
           }
@@ -316,7 +228,10 @@ export default {
           "value": {
             "maxScale": "1:144447.927",
             "level": this.mapPrintPraram.zoom,
-            "center": { "x": this.mapPrintPraram.mapCenterPoint.split(',')[0], "y": this.mapPrintPraram.mapCenterPoint.split(',')[1] },
+            "center": {
+              "x": this.mapPrintPraram.mapCenterPoint.split('，')[0],
+              "y": this.mapPrintPraram.mapCenterPoint.split('，')[1]
+            },
             "layers": this.mapPrintPraram.layers,
             "description": "",
             "projection": "EPSG:4326",
@@ -327,6 +242,7 @@ export default {
         }
 
       })
+      console.log("校验参数", params)
       //校验参数
       this.filterEmptyData(params)
 
@@ -367,45 +283,27 @@ export default {
           }
         }
       }
+    },
+    /**
+     * 比例尺段数
+     */
+    intervalsChange() {
+      if (!this.mapPrintPraram.intervals) {
+        this.mapPrintPraram.intervals = 3
+      }
+    },
+    /**
+     * dpi分辨率
+     */
+    dpiChange(val, oldVal) {
+      if (!this.mapPrintPraram.exportDpi) {
+        this.mapPrintPraram.exportDpi = 96
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.print-container {
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  padding: 10px !important;
-  .print-setting {
-    width: 100%;
-    height: 90%;
-    overflow-y: auto;
-    >>> .el-collapse-item__header {
-      font-size: 14px;
-      font-weight: 600;
-    }
-    >>> .el-collapse-item__content {
-      padding-bottom: 0px !important;
-    }
-    >>> .el-row {
-      font-size: 14px;
-      font-family: Source Han Sans CN;
-      font-weight: 400;
-      line-height: 32px;
-      margin-bottom: 15px;
-      .el-col {
-        text-align: right;
-      }
-    }
-  }
-  .print-button {
-    width: 100%;
-    height: 10%;
-    >>> .el-button {
-      margin-top: 10px;
-    }
-  }
-}
+@import './css.scss';
 </style>

src/views/kxcSystem/pipelineSystem/facilitiesQuery/widget.vue

@@ -127,7 +127,7 @@
               <template slot-scope="scope">
                 <el-button type="text" @click="showQueryResultData()">查看</el-button>
                 <download-excel class="export-btn" :data="scope.row.data" :fields="scope.row.fields" type="xls" :name="scope.row.layer">
-                  <el-button type="text">导出</el-button>
+                  <el-button type="text" @click="beforeExport(scope.row.data)">导出</el-button>
                 </download-excel>
               </template>
             </el-table-column>
@@ -210,6 +210,10 @@ export default {
     }
   },
   methods: {
+    /**导出判断 */
+    beforeExport(data){
+      if(data.length==0) this.$message.warning('无导出的数据！')
+    },
     checkBufferDistance() {
       if (!this.bufferDistance) { this.bufferDistance = 1 }
     },