shijiplus-web-plugin 0.1.14 → 0.1.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shijiplus-web-plugin",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "files": [
     "src"
   ],

package/src/App.vue

@@ -1,16 +1,31 @@
 <template>
   <div id="app">
     <img id="img" alt="Vue logo" src="./assets/logo.png" />
+    <Button @click="showMapClick">showMap</Button>
     <plus-city-cascader></plus-city-cascader>
+    <TxMap
+      :show="showmap"
+      region="北京"
+    ></TxMap>
   </div>
 </template>
 
 <script>
 import PlusCityCascader from './components/plus-comp/plus-city-cascader/plus-city-cascader.vue'
 
+import TxMap from './components/txmap/tx-map'
+
 export default {
   name: 'App',
-  components: {PlusCityCascader},
+  components: { PlusCityCascader, TxMap },
+  data() {
+    return { showmap: false }
+  },
+  methods: {
+    showMapClick() {
+      this.showmap = true
+    }
+  },
   mounted() {
     console.log(
       'web-tool mounted!',

package/src/components/txmap/tx-map.vue

@@ -0,0 +1,283 @@
+<template>
+  <Modal
+    v-model="show"
+    :width="800"
+    :footer-hide="true"
+    :closable="false"
+    @on-visible-change="visibleChange"
+    :title="'搜索区域：' + region"
+    class="lau"
+  >
+    <Select
+      ref="selectRef"
+      filterable
+      clearable
+      placeholder="输入关键字搜索"
+      :loading="searchLoading"
+      remote
+      :remote-method="placeSearch"
+      @on-change="placeChange"
+      @on-open-change="locOpenChange"
+    >
+      <Option
+        v-for="(option, index) in placeData"
+        :value="index"
+        :label="option.title"
+        :key="index"
+      >
+        <span class="f-w-600"
+          >{{ option.title }}
+          <span style="margin-left: 5px"
+            >{{ option.province }}{{ option.city }}{{ option.district }}</span
+          ></span
+        >
+      </Option>
+    </Select>
+    <div ref="atlas" id="atlas" style="width: 800px; height: 800px"></div>
+  </Modal>
+</template>
+
+<script>
+import { TMap } from '../../libs/TMap'
+import { throttle } from '../../libs/util'
+export default {
+  name: 'TxMap',
+
+  props: ['show', 'lat', 'lng', 'posTitle', 'region'],
+  watch: {
+    show(val) {
+      if (val) {
+        this.$refs.selectRef.setQuery('')
+        this.$refs.selectRef.clearSingleSelect()
+        this.mapTX().then(() => {
+          if (this.region.indexOf('北京') == -1 && (!this.lat || !this.lng)) {
+            var geocoder = new this.tMap.service.Geocoder()
+            geocoder
+              .getLocation({
+                address: this.region
+              })
+              .then((resp) => {
+                if (resp.result) {
+                  this.setCenter(
+                    resp.result.location.lat,
+                    resp.result.location.lng,
+                    this.posTitle
+                  )
+                }
+              })
+          }
+          const pos = this.getPosition()
+          this.setCenter(pos.lat, pos.lng, this.posTitle)
+        })
+      }
+      console.log('---------txmap-show----------', val)
+    },
+    lat(val) {
+      this.posLat = val
+    },
+    lng(val) {
+      this.posLng = val
+    }
+  },
+  data() {
+    return {
+      posLat: null,
+      posLng: null,
+      txmap: null,
+      txmapmarker: null,
+      searchService: null,
+      searchLoading: false,
+      placeData: [],
+      sugguestionService: null
+    }
+  },
+
+  methods: {
+    locOpenChange(e) {
+      if (!e) {
+        this.$refs.selectRef.isFocused = false
+      }
+    },
+    placeChange(e) {
+      let option = this.placeData[e]
+      if (option) {
+        this.setCenter(option.location.lat, option.location.lng, option.title)
+      }
+    },
+    placeSearch(query) {
+      const fun = () => {
+        this.searchLoading = true
+        this.sugguestionService
+          .getSuggestions({
+            keyword: query
+          })
+          .then((res) => {
+            if (res.data) {
+              this.placeData = res.data
+            }
+          })
+          .finally(() => {
+            this.searchLoading = false
+          })
+      }
+      throttle(fun, 1000)
+    },
+    mapTX() {
+      let _this = this
+      console.log('--------this.tMap--------', this.tMap)
+      if (this.tMap) {
+        return Promise.resolve()
+      }
+      // 'OCIBZ-URFLX-D2L4R-7CMMA-WIZ2Q-VBFWJ'
+      return TMap().then((tMap) => {
+        return new Promise((resolve) => {
+          let pos = _this.getPosition()
+          if (!_this.txmap) {
+            this.tMap = tMap
+            _this.txmap = new tMap.Map(_this.$refs['atlas'], {
+              // 这里经纬度代理表进入地图显示的中心区域
+              center: new tMap.LatLng(pos.lat, pos.lng),
+              draggableCursor: 'crosshair',
+              draggingCursor: 'pointer',
+              zoom: 13
+            })
+            // 绑定单击事件添加参数
+            this.txmap.on('click', (evt) => {
+              console.log('--------evt--------', evt)
+              this.positionChange(evt.latLng, (evt.poi && evt.poi.name) || '')
+            })
+          }
+          if (!_this.txmapmarker) {
+            _this.txmapmarker = new tMap.MultiMarker({
+              styles: {
+                // 点标记样式
+                marker: new tMap.MarkerStyle({
+                  width: 20, // 样式宽
+                  height: 30, // 样式高
+                  direction: 'top',
+                  anchor: { x: 10, y: 30 } // 描点位置
+                })
+              },
+              geometries: [
+                // 点标记数据数组
+                {
+                  styleId: 'marker',
+                  // 标记位置(纬度，经度，高度)
+                  position: new tMap.LatLng(pos.lat, pos.lng),
+                  content: pos.title,
+                  id: 'marker'
+                }
+              ],
+              map: _this.txmap
+            })
+            _this.txmapmarker.on('click', (evt) => {
+              this.positionChange(
+                evt.latLng,
+                (evt.geometry && evt.geometry.content) || ''
+              )
+            })
+          }
+
+          if (!this.sugguestionService) {
+            this.sugguestionService = new tMap.service.Suggestion({
+              // 新建一个关键字输入提示类
+              pageSize: 20,
+              region: this.region, // 限制城市范围
+              regionFix: true // 搜索无结果时是否固定在当前城市
+            })
+          }
+          resolve()
+        })
+      })
+    },
+    positionChange(latLng, title) {
+      throttle(
+        () => {
+          var geocoder = new this.tMap.service.Geocoder()
+          geocoder
+            .getAddress({ location: latLng }) // 将给定的坐标位置转换为地址
+            .then((resp) => {
+              let address = title || `${latLng}`
+              let location = {}
+              if (resp && resp.status == 0) {
+                address =
+                  resp.result.formatted_addresses.standard_address +
+                  '/' +
+                  resp.result.formatted_addresses.recommend
+                title = title || resp.result.formatted_addresses.recommend
+                const cityCode = resp.result.ad_info.city_code.replace(
+                  resp.result.ad_info.nation_code,
+                  ''
+                )
+                location = {
+                  province: resp.result.address_component.province,
+                  city: resp.result.address_component.city,
+                  district: resp.result.address_component.district,
+                  county: resp.result.address_component.district,
+                  street: resp.result.address_component.street,
+                  street_number: resp.result.address_component.street_number,
+                  countyCode: resp.result.ad_info.adcode,
+                  provinceCode: cityCode.substr(0, 2) + '0000',
+                  cityCode,
+                  address: resp.result.formatted_addresses.standard_address,
+                  labelName: title,
+                  longitude: latLng.getLng(),
+                  latitude: latLng.getLat()
+                }
+              }
+              const result = {
+                lat: latLng.getLat(),
+                lng: latLng.getLng(),
+                title: title,
+                address: address,
+                location
+              }
+              console.log('--------result----------', result)
+              // 显示搜索到的地址
+              this.$emit('change', result)
+            })
+        },
+        500,
+        { trailing: false }
+      )
+      // poi
+    },
+    setCenter(lat, lng, title) {
+      this.txmap.setCenter(new this.tMap.LatLng(lat, lng))
+      this.txmapmarker.updateGeometries({
+        styleId: 'marker',
+        // 标记位置(纬度，经度，高度)
+        position: new this.tMap.LatLng(lat, lng),
+        content: title || '',
+        id: 'marker'
+      })
+    },
+    getPosition() {
+      return {
+        lat: this.posLat || 39.958559212563834,
+        lng: this.posLng || 116.28845974975957,
+        title: this.posTitle || ''
+      }
+    },
+    visibleChange(visible) {
+      if (!visible) {
+        this.$emit('on-hide')
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
+
+<style lang="less" scope>
+.lau {
+  .ivu-modal-body {
+    padding: 0;
+    .ivu-select {
+      .ivu-select-dropdown {
+        z-index: 999999;
+      }
+    }
+  }
+}
+</style>

package/src/libs/TMap.js

@@ -0,0 +1,20 @@
+
+export function TMap() {
+  return new Promise(function (resolve, reject) {
+    window.initMap = function () {
+      resolve(window.TMap)
+    }
+    var script = document.createElement('script')
+    script.type = 'text/javascript'
+    script.src = 'https://map.qq.com/api/gljs?v=1.exp&callback=initMap&key=OCIBZ-URFLX-D2L4R-7CMMA-WIZ2Q-VBFWJ&libraries=service'
+    script.onerror = reject
+    document.head.appendChild(script)
+  })
+}
+
+export function placeSuggestion(keyword) {
+  // let url = `https://apis.map.qq.com/ws/place/v1/suggestion?region=&keyword=${keyword}&key=354BZ-CSO33-33F3K-3TJLC-LWVK3-7PBFO`
+  // return fetch(url).then(res => {
+  //   return res.json()
+  // })
+}

package/src/libs/util.js

@@ -1,5 +1,9 @@
 import { export_json_to_excel as exportJsonToExcel, exportJsonToExcelBlob } from './excel'
 
+export const hasChild = (item) => {
+  return item.children && item.children.length !== 0
+}
+
 export const exportTableExcelBlob = (tableData, tableColumn, fileName) => {
   return new Promise((resolve, reject) => {
     try {

package/src/main.js

@@ -1,17 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
 import iView from 'iview'
-import './index.less'
-import i18n from '@/locale'
-import ExtentionPlugin from './extentionPlugin'
-import importDirective from './directive'
-import PlusComp from './components/plus-comp'
-
 import Tool from './index'
 
 
 
-
 Vue.config.productionTip = false
 
 Tool.install(Vue)