修改已知问题

chenzeping

2021-03-09 80078586462a5d66221d716adca79b6173c2bc08

修改已知问题

 .eslintrc.js

@@ -1,7 +1,8 @@
module.exports = {
  root: true,
  env: {
    node: true
    node: true,
    amd: true
  },
  extends: [
    'plugin:vue/essential',

 package.json

@@ -21,7 +21,7 @@
    "fullscreen": "^1.1.1",
    "jquery": "^3.5.1",
    "js-cookie": "^2.2.0",
    "leaflet": "^1.6.0",
    "leaflet": "^1.7.1",
    "leaflet-canvas-markers": "^1.0.6",
    "leaflet.browser.print": "^1.0.6",
    "leaflet.markercluster": "^1.4.1",
@@ -43,17 +43,18 @@
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "babel-polyfill": "^6.26.0",
    "cache-loader": "^4.1.0",
    "css-loader": "^5.0.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "mockjs": "^1.1.0",
    "eslint-plugin-vue": "^6.2.2",
    "less": "^3.13.0",
    "less-loader": "^7.1.0",
    "mockjs": "^1.1.0",
    "vue-loader": "^15.9.5",
    "vue-template-compiler": "^2.6.11"
  },

 src/api/index.js

@@ -2,6 +2,6 @@
import * as mapUrl from './mapUrl'

export default {
    mapApi,
    mapUrl
  mapApi,
  mapUrl
}

 src/api/mapUrl.js

@@ -1,10 +1,10 @@
/**
 * 该文件配置接口的URL地址 
 */ 
class ApiURLs{
    constructor(){
        this.APIURL_HELLOWORLD = 'http://www.baidu.com'
    }
 * 该文件配置接口的URL地址
 */
class ApiURLs {
  constructor () {
    this.APIURL_HELLOWORLD = 'http://www.baidu.com'
  }
}

export default new ApiURLs()

 src/assets/css/map/map-elem-ui.less

@@ -51,9 +51,9 @@


  }
  location-btn{

  }
  //location-btn{
  //
  //}

  .location-btn:hover,.el-input__icon:hover{
    color: @color;

 src/components/helpers/ServiceLayerHelper.js

@@ -116,18 +116,21 @@
     * @param url
     * @param item
     */
  loadGeojsonLayer (url, item) {
  async loadGeojsonLayer (url, item) {
    var matches = this.regex.exec(url)
    var matchValue = item[matches[1]]
    var code = item.code
    var newUrl = url.replace(this.regex, matchValue)
    var that = this
    if (!that.layerArray[code]) {
      AjaxUtils.GetDataAsynByUrl(newUrl, {}, function (res) {
        store.commit('addSewersDatas', res)
        var layer = that.loadGeojson(res, item)
        that.layerArray[code] = layer
      })
      const res = await AjaxUtils.GetDataAsynByUrl(newUrl, {})
      if (res.data instanceof Object && Object.prototype.hasOwnProperty.call(res.data, 'features')) {
        store.commit('addSewersDatas', res.data)
        if (newUrl.indexOf('管网') !== -1 || newUrl.indexOf('四通') !== -1) {
          var layer = that.loadGeojson(res.data, item)
          that.layerArray[code] = layer
        }
      }
    } else {
      that.layerArray[code].addTo(that.map)
    }
@@ -140,6 +143,7 @@
  loadGeojson (res, opt) {
    var that = this
    var icon = opt.icon
    const layergroup = that.L.featureGroup().addTo(that.map)
    const geojson = that.L.geoJSON(res.features, {
      style: function (feature) {
        return {
@@ -215,7 +219,8 @@
            }
          })
        }
      }).addTo(that.map)
      // }).addTo(that.map)
      }).addTo(layergroup)
    store.commit('addSewersDatas', geojson)
    if (Object.prototype.hasOwnProperty.call(res, 'features') && res.features.length > 0 && (res.features[0].geometry.type === 'LineString' || res.features[0].geometry.type === 'MultiLineString')) {
      geojson.bringToBack()

 src/components/panel/RightSearchPanel.vue

@@ -1,49 +1,76 @@
<template>
  <div id="right-panel">
    <div class="panel-tab">
      <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleClick(item)">
      <div v-for="item in topicMenu" :key="item.id" :title="item.name" class="tab-item" @click="handleGd" :class="{'B-TMT-tab-waybill-isActive': isWaybillHover}">
        <img :src="item.icon" style="width: 24px;height: 24px;"></div>

<!--      <div class="tab-item" @click="handleHb" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
<!--      <div class="tab-item" @click="handlePk" :class="{'B-TMT-tab-route-isActive': isRouteHover}"></div>-->
    </div>
    <div class="panel-fold-btn">
      <div class="btn-stretch" @click="toggleMonitorPanel"></div>
    </div>
<!--    <div class="panel-fold-btn" >-->
<!--      <div class="btn-stretch" @click="toggleMonitorPanel"></div>-->
<!--    </div>-->

    <div class="right-control">

<!--      <div class="panel-fold-btn" @click="toggleMonitorPanel" >-->
<!--            <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>-->
<!--&lt;!&ndash;                <div class="btn-stretch" v-if="isCollapse"  </div>&ndash;&gt;-->
<!--&lt;!&ndash;            <div class="btn-shrink" v-else-if="!isCollapse" ></div>&ndash;&gt;-->
<!--&lt;!&ndash;        :style = "{width:isCollapse ? '290px' : '0px'}"&ndash;&gt;-->
<!--      </div>-->
<!--    <div class="right-control" v-if="!isCollapse"  >-->
    <div class="right-control" :class="[{ 'unfold': !isCollapse },{ 'shrink': isCollapse }] " >
      <div class="panel-fold-btn" @click="toggleMonitorPanel">
<!--        <div class="btn-stretch" v-if="isCollapse"></div>-->
<!--        <div class="btn-shrink" v-else-if="!isCollapse"></div>-->
        <div :class="[isCollapse? 'btn-stretch':'btn-shrink']" ></div>
      </div>
      <component :title="title" :is="gcComp"></component>
    </div>
  </div>
</template>

<script>
import $ from 'jquery'
import { TopicComp, TopicList } from '../../conf/Topic'
// import $ from 'jquery'
import EnvProtectSearch from './topicSearch/EnvProtectSearch'
import DischargeSearch from './topicSearch/DischargeSearch'
import { TopicList } from '../../conf/Topic'

import SewersSearch from '@components/panel/topicSearch/SewersSearch'
export default {
  name: 'MonitorPanel',
  components: TopicComp,
  components: { EnvProtectSearch, DischargeSearch },
  data () {
    return {
      topicMenu: [],
      topicList: TopicList,
      topicCheckedList: [],
      isPanelVisible: false,
      gcComp: 'sewersSearch',
      gcComp: SewersSearch,

      gdVisible: true,
      hbVisible: false,
      pkVisible: false,
      toggleMonitorStyle: 'right:0px',

      title: '污雨水管网'
      title: '污雨水管网',

      isCollapse: false
    }
  },
  computed: {
    topicMenu () {
      console.log(this.$store.state.map.topic.topicCheckedList)
      return this.$store.state.map.topic.topicCheckedList
  computed: {},
  watch: {
    '$store.state.map.topic.topicCheckedList': function (newVal, oldVal) {
      console.log(oldVal)
      console.log(newVal)
      this.topicCheckedList = newVal
      this.topicMenu = []
      this.topicList.forEach((item) => {
        this.topicCheckedList.forEach((itm) => {
          if (item.name === itm) {
            // item.checked = tr
            this.topicMenu.push(item)
          }
        })
      })
    }
  },
  methods: {
@@ -53,43 +80,48 @@

    handlePage (page) {
    },
    handleClick (item) {
      this.title = item.name
      this.gcComp = item.comp
    handleGd () {
      this.title = '管道信息查询'
    },
    toggleMonitorPanel () {
      const el = $('.btn-stretch')
      const el2 = $('.panel-fold-btn')
      // let cs = 'btn-stretch-active'
      var rightControl = $('#right-panel')
      const right = rightControl.css('right')
      if (right === '10px') {
        rightControl.animate({
          right: '-322px'
        })
        el.css({
          transform: 'rotateY(180deg)',
          'transform-origin': '50% 50%',
          transition: 'transform 1s linear'
        })
        el2.animate({
          right: '320px',
          speed: 1000
        })
      } else {
        rightControl.animate({
          right: '10px'
        })
        el.css({
          transform: 'rotateY(0deg)',
          'transform-origin': '50% 50%',
          transition: 'transform 1s linear'
        })
        el2.animate({
          right: '290px',
          speed: 1000
        })
      }
      this.isCollapse = !this.isCollapse
      // const el = $('.btn-stretch')
      // const el2 = $('.panel-fold-btn')
      // const el = document.getElementsByClassName('.btn-stretch')
      // const el2 = document.getElementsByClassName('.panel-fold-btn')
      // let  = 'btn-stretch-active'
      // var rightControl = $('#right-panel')
      // var rightControl = document.getElementById('#right-panel')
      // const right = rightControl.css('right')
      // const rightit = rightControl.ownerDocument.defaultView
      // const right = rightit.getComputedStyle(rightit, null).right
    //   if (right === '10px') {
    //     rightControl.animate({
    //       right: '-322px'
    //     })
    //     el.css({
    //       transform: 'rotateY(180deg)',
    //       'transform-origin': '50% 50%',
    //       transition: 'transform 1s linear'
    //     })
    //     el2.animate({
    //       right: '320px',
    //       speed: 1000
    //     })
    //   } else {
    //     rightControl.animate({
    //       right: '10px'
    //     })
    //     el.css({
    //       transform: 'rotateY(0deg)',
    //       'transform-origin': '50% 50%',
    //       transition: 'transform 1s linear'
    //     })
    //     el2.animate({
    //       right: '290px',
    //       speed: 1000
    //     })
    //   }
    }
  },
  mounted () {
@@ -110,7 +142,6 @@
  .el-card__body {
    padding: 7px;
  }

  .el-form-item__content {
    color: rgb(52, 224, 255);
  }
@@ -127,6 +158,7 @@

  .el-form-item__label {
    color: rgb(52, 224, 255);
    color: @color;
  }

  .el-input__inner::placeholder {
@@ -218,14 +250,29 @@
    white-space: nowrap;
  }
  .panel-fold-btn{
    overflow: hidden;
    position: absolute;
    top:45%;
    left: -18px;
    /*left: 0px;*/
    //right: 320px;
    right: 290px;
    /*right: 290px;*/
    z-index: 1000;
    /*right: 0px;*/
    background-color: rgba(5,24,66,.8);
    border-radius: 10px 0 0 10px;
    .btn-stretch {
      width: 20px;
      height: 40px;
      background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
      cursor: pointer;
      /*margin-left: -20px;*/
      transform: rotateY(0deg);
      transform-origin: 50% 50%;
      transition: transform 1s linear;
        /*transition: 3s linear;*/
    }
    .btn-shrink {
      width: 20px;
      height: 40px;
      background: url('../../assets/images/map-pages/icon/icon.png') no-repeat -408px 5px;
@@ -258,17 +305,20 @@
  }

  .right-control {
    width: 290px;
    /*width: 290px;*/
    //height: 573px;
    height: 100%;
    position: absolute;
    position: relative;
    top: 0;
    right: 0;
    z-index: 999;
    background: url('../../assets/images/map-pages/icon/bgc.png') no-repeat;
    background-size: 100% 98%;
  }

  .a{
    transform: translateX(328px);
    transition: transform 3s linear;
    }
  .panel_searchTotal {
    font-size: 12px;
    float: right;
@@ -276,13 +326,13 @@

  .panel_header {
    // background-color: #030D2E;
    padding: 7px 15px 3px 20px;
    padding: 8px 15px 3px 20px;
  }

  .panel_title {
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    /*margin: 0px;*/
    /*padding: 0px;*/
    color: #78c4ff;
    font-weight: bold;
  }
@@ -292,7 +342,7 @@
  }

  .search-form .el-form-item {
    margin: 0px;
    /*margin: 0px;*/
    margin-bottom: 8px;
  }

@@ -438,7 +488,7 @@

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0px;
    background: #0E3565;
  }
@@ -467,5 +517,13 @@
      background-color: #061e51 !important;
    }
  }
  .unfold {
    transform: translateX(332px);
    transition: transform 0.5s linear;
  }
  .shrink {
    transform: translateX(0px);
    transition: transform 0.5s linear;
  }
}
</style>

 src/components/panel/topicSearch/SewersSearch.vue

@@ -1,9 +1,5 @@
<template>
  <div class="sewers-search">
    <div class="el-message-box__header panel_header">
      <div class="el-message-box__title panel_title"><!----><span>{{ title }}</span>
      </div>
    </div>
    <div class="el-message-box__content" style="padding:6px;font-size: 13px;">
      <div class="box__content" v-if="gdVisible">
        <div>

 src/components/plugin/leaflet-canvas-markers.js

New file
@@ -0,0 +1,68 @@

'use strict';

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['leaflet'], factory)
  } else if (typeof exports === 'object') {
    module.exports = factory(require('leaflet'))
  } else {
    factory(window.L)
  }
}(this, function (L) {
  L.Canvas.include({
    _updateImg: function (layer) {
      const { img } = layer.options
      // const img = layer.options.img
      const p = layer._point.round()
      p.x += img.offset.x; p.y += img.offset.y
      if (img.rotate) {
        this._ctx.save()
        this._ctx.translate(p.x, p.y)
        this._ctx.rotate(img.rotate * Math.PI / 180)
        this._ctx.drawImage(img.el, -img.size[0] / 2, -img.size[1] / 2, img.size[0], img.size[1])
        this._ctx.restore()
      } else {
        this._ctx.drawImage(img.el, p.x - img.size[0] / 2, p.y - img.size[1] / 2, img.size[0], img.size[1])
      }
    }
  })

  const angleCrds = (map, prevLatlng, latlng) => {
    if (!latlng || !prevLatlng) return 0
    const pxStart = map.project(prevLatlng)
    const pxEnd = map.project(latlng)
    return Math.atan2(pxStart.y - pxEnd.y, pxStart.x - pxEnd.x) / Math.PI * 180 - 90
  }

  const defaultImgOptions = {
    rotate: 0,
    size: [40, 40],
    offset: { x: 0, y: 0 }
  }

  const CanvasMarker = L.CircleMarker.extend({
    _updatePath () {
      if (!this.options.img || !this.options.img.url) return
      if (!this.options.img.el) {
        this.options.img = { ...defaultImgOptions, ...this.options.img }
        this.options.img.rotate += angleCrds(this._map, this.options.prevLatlng, this._latlng)
        const img = document.createElement('img')
        img.src = this.options.img.url
        this.options.img.el = img
        img.onload = () => {
          this.redraw()
        }
        img.onerror = () => {
          this.options.img = null
        }
      } else {
        this._renderer._updateImg(this)
      }
    }
  })

  L.canvasMarker = function (...options) {
    return new CanvasMarker(...options)
  }
}))

 src/main.js

@@ -1,4 +1,4 @@
// import 'babel-polyfill'
import 'babel-polyfill'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
@@ -11,9 +11,10 @@
import 'leaflet/dist/leaflet.css'
import L from 'leaflet'
import 'leaflet.markercluster'
import 'leaflet-canvas-markers'
// import 'leaflet-canvas-markers'
import './components/plugin/Leaflet.GridLayer.FadeOut'

import './components/plugin/leaflet-canvas-markers'
Vue.config.productionTip = false

Vue.use(ElementUI)

 src/router/routes.js

@@ -26,6 +26,13 @@
    meta: {
      title: '基础数据维护'
    }
  }, {
    path: '/mapTemplate',
    name: 'mapTemplate',
    component: MapTemplate,
    meta: {
      title: '基础地图'
    }
  }]
}]
export const routes = [...mainRoutes, ...mapRoutes]

 src/utils/AjaxUtils.js

@@ -1,5 +1,5 @@
import $ from 'jquery'

import axios from 'axios'
/**
 * 对jquery的封装ajax的传数据方法
 * @param pUrl    请求的url
@@ -28,36 +28,47 @@
 * @param pData   参数
 * @param pBackFun 成功回调
 */
function get4JsonDataByUrl (pUrl, pData, pBackFun) {
  $.ajax({
    type: 'get',
function get4JsonDataByUrl (oUrl, pData, pBackFun) {
  const pUrl = encodeURI(oUrl)
  axios({
    method: 'get',
    url: pUrl,
    dataType: 'json',
    data: pData,
    async: true,
    success: function (datas, nnn) {
      pBackFun(datas)
    },
    error: function (err, nnnn) {
      console.error('数据获取失败', err, pUrl)
    }
    data: pData
  }).then(function (response) {
    pBackFun(response)
  })
    .catch(function (error) {
      console.error('数据获取失败', error)
    })
}

function GetDataAsynByUrl (pUrl, pData, pBackFun) {
  $.ajax({
    type: 'GET',
const GetDataAsynByUrl = async (oUrl, pData) => {
  const pUrl = encodeURI(oUrl)
  const res = await axios({
    method: 'get',
    url: pUrl,
    data: pData,
    timeout: 600000,
    async: true,
    success: function (datas, nnn) {
      pBackFun(datas)
    },
    error: function (e, nnnn) {
      console.error('数据获取失败', pUrl)
    }
    data: pData
  }).then((response) => {
    return (response)
  })
    .catch((error) => {
      console.error('数据获取失败', error)
    })
  return res

  // $.ajax({
  //   type: 'GET',
  //   url: pUrl,
  //   data: pData,
  //   timeout: 600000,
  //   async: true,
  //   success: function (datas, nnn) {
  //     pBackFun(datas)
  //   },
  //   error: function (e, nnnn) {
  //     console.error('数据获取失败', pUrl)
  //   }
  // })
}
function postDataAsynByUrl (pUrl, pData, pBackFun) {
  $.ajax({