From 80078586462a5d66221d716adca79b6173c2bc08 Mon Sep 17 00:00:00 2001
From: chenzeping <ChenZeping02609@163.com>
Date: 星期二, 09 三月 2021 17:04:33 +0800
Subject: [PATCH] 修改已知问题
---
src/components/panel/RightSearchPanel.vue | 180 +++++++++++++++++--------
src/components/plugin/leaflet-canvas-markers.js | 68 +++++++++
src/router/routes.js | 7 +
.eslintrc.js | 3
src/api/index.js | 4
src/main.js | 5
package.json | 7
src/assets/css/map/map-elem-ui.less | 6
src/components/panel/topicSearch/SewersSearch.vue | 4
src/utils/AjaxUtils.js | 61 +++++---
src/api/mapUrl.js | 12
src/components/helpers/ServiceLayerHelper.js | 19 +-
12 files changed, 262 insertions(+), 114 deletions(-)
diff --git a/.eslintrc.js b/.eslintrc.js
index 654134e..60ec4b5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,7 +1,8 @@
module.exports = {
root: true,
env: {
- node: true
+ node: true,
+ amd: true
},
extends: [
'plugin:vue/essential',
diff --git a/package.json b/package.json
index 3d10fb5..98809aa 100644
--- a/package.json
+++ b/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"
},
diff --git a/src/api/index.js b/src/api/index.js
index 5654a60..1df9919 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -2,6 +2,6 @@
import * as mapUrl from './mapUrl'
export default {
- mapApi,
- mapUrl
+ mapApi,
+ mapUrl
}
diff --git a/src/api/mapUrl.js b/src/api/mapUrl.js
index c337552..bc905e4 100644
--- a/src/api/mapUrl.js
+++ b/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()
diff --git a/src/assets/css/map/map-elem-ui.less b/src/assets/css/map/map-elem-ui.less
index 5b99031..1f6fd20 100644
--- a/src/assets/css/map/map-elem-ui.less
+++ b/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;
diff --git a/src/components/helpers/ServiceLayerHelper.js b/src/components/helpers/ServiceLayerHelper.js
index a38ef6c..96da67f 100644
--- a/src/components/helpers/ServiceLayerHelper.js
+++ b/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()
diff --git a/src/components/panel/RightSearchPanel.vue b/src/components/panel/RightSearchPanel.vue
index 4976bac..650c599 100644
--- a/src/components/panel/RightSearchPanel.vue
+++ b/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>-->
+<!--<!– <div class="btn-stretch" v-if="isCollapse" </div>–>-->
+<!--<!– <div class="btn-shrink" v-else-if="!isCollapse" ></div>–>-->
+<!--<!– :style = "{width:isCollapse ? '290px' : '0px'}"–>-->
+<!-- </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>
diff --git a/src/components/panel/topicSearch/SewersSearch.vue b/src/components/panel/topicSearch/SewersSearch.vue
index a3987bf..6fe9340 100644
--- a/src/components/panel/topicSearch/SewersSearch.vue
+++ b/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>
diff --git a/src/components/plugin/leaflet-canvas-markers.js b/src/components/plugin/leaflet-canvas-markers.js
new file mode 100644
index 0000000..b79ae38
--- /dev/null
+++ b/src/components/plugin/leaflet-canvas-markers.js
@@ -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)
+ }
+}))
diff --git a/src/main.js b/src/main.js
index 32a895f..1d1c6ac 100644
--- a/src/main.js
+++ b/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)
diff --git a/src/router/routes.js b/src/router/routes.js
index 2bdac51..ed5d92a 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -26,6 +26,13 @@
meta: {
title: '鍩虹鏁版嵁缁存姢'
}
+ }, {
+ path: '/mapTemplate',
+ name: 'mapTemplate',
+ component: MapTemplate,
+ meta: {
+ title: '鍩虹鍦板浘'
+ }
}]
}]
export const routes = [...mainRoutes, ...mapRoutes]
diff --git a/src/utils/AjaxUtils.js b/src/utils/AjaxUtils.js
index 11138b0..0499763 100644
--- a/src/utils/AjaxUtils.js
+++ b/src/utils/AjaxUtils.js
@@ -1,5 +1,5 @@
import $ from 'jquery'
-
+import axios from 'axios'
/**
* 瀵筳query鐨勫皝瑁卆jax鐨勪紶鏁版嵁鏂规硶
* @param pUrl 璇锋眰鐨剈rl
@@ -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({
--
Gitblit v1.8.0