Commit 42b7d09d authored by ninglx's avatar ninglx

修改cesium popup引入方式 修正el-form 与 v-show冲突导致控制台报错问题

parent 2dea4010
import Vue from "vue";
import App from "./App";
import ElementUI from 'element-ui';
import router from "./config/router";
import VueClipboard from 'vue-clipboard2'
import "./directive";
import "./components";
import "@/assets/less/component.less";
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(VueClipboard)
Vue.use(ElementUI, { size: 'small' });
// 关闭生产模式的提示
Vue.config.productionTip = false;
......
......@@ -2,17 +2,11 @@ import store from './store'
import router from './router'
import './directive'
import App from './App'
// import './assets/less/component.less'
// import './assets/font/font.css'
// import './assets/icon/iconfont.css'
// import './components'
import './permission'
Vue.use(ELEMENT, {
size: 'small',
})
// Vue.use(VueClipboard)
// 关闭生产模式的提示
Vue.config.productionTip = false
......
......@@ -116,7 +116,6 @@
<body style="background-color: #040d1c">
<script src="/cdn/libs/vue/vue.js"></script>
<script src="/cdn/libs/element-ui/element-ui.js"></script>
<script src="/cdn/libs/echarts/echarts.min.js"></script>
<script src="/cdn/libs/lodash/lodash.js"></script>
<script src="/cdn/libs/st-util/st-util.js"></script>
......@@ -136,7 +135,6 @@
<script src="/cdn/libs/flvjs/flv.min.js" type="text/javascript"></script>
<script src="/cdn/libs/Cesium/Cesium.js" type="text/javascript"></script>
<script src="/cdn/libs/reconnectingWebsocket/reconnectingWs.js" type="text/javascript"></script>
<script src="./utils/CesiumPopup.js"></script>
<script src="/design/systemsetting/systemParam/getValueByKey?key=61283C05C4154AA9A57BD9005ABA1BCD"
type="application/x-javascript"></script>
<noscript>
......
var BaseEvent = function () {
this.handles = {}
this.cached = []
}
BaseEvent.prototype.on = function (eventName, callback) {
if (typeof callback !== "function") return;
if (!this.handles[eventName]) {
this.handles[eventName] = [];
}
this.handles[eventName].push(callback);
if (this.cached[eventName] instanceof Array) {
//说明有缓存的 可以执行
callback.apply(null, this.cached[eventName]);
}
}
BaseEvent.prototype.emit = function () {
if (this.handles[arguments[0]] instanceof Array) {
for (let i = 0; i < this.handles[arguments[0]].length; i++) {
this.handles[arguments[0]][i](arguments[1]);
}
}
//默认缓存
this.cached[arguments[0]] = Array.prototype.slice.call(arguments, 1);
}
var CesiumPopup = (function () {
var _panelContainer = null
var _contentContainer = null
var _closeBtn = null
var _renderListener = null
var _viewer = null
var CesiumPopup = function (options) {
//继承
BaseEvent.call(this)
this.className = options.className || ''
this.title = options.title || ''
this.offset = options.offset || [0, 0]
// this.render = this.render.bind(this)
this.closeHander = this.closeHander.bind(this)
}
CesiumPopup.prototype = new BaseEvent()
CesiumPopup.prototype.constrctor = CesiumPopup
CesiumPopup.prototype.addTo = function (viewer) {
if (_viewer) this.remove()
_viewer = viewer
this.initPanle();
//关闭按钮
_closeBtn.addEventListener('click', this.closeHander, false)
if (this.position) {
_panelContainer.style.display = 'block'
_renderListener = _viewer.scene.postRender.addEventListener(this.render, this)
}
return this
}
CesiumPopup.prototype.initPanle = function () {
var closeBtnIcon = '<svg t="1603334792546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1328" width="32" height="32"><path d="M568.922 508.232L868.29 208.807a39.139 39.139 0 0 0 0-55.145l-1.64-1.64a39.139 39.139 0 0 0-55.09 0l-299.367 299.82-299.425-299.934a39.139 39.139 0 0 0-55.088 0l-1.697 1.64a38.46 38.46 0 0 0 0 55.09l299.48 299.594-299.424 299.48a39.139 39.139 0 0 0 0 55.09l1.64 1.696a39.139 39.139 0 0 0 55.09 0l299.424-299.48L811.56 864.441a39.139 39.139 0 0 0 55.089 0l1.696-1.64a39.139 39.139 0 0 0 0-55.09l-299.48-299.537z" p-id="1329"></path></svg>'
_panelContainer = document.createElement('div')
_panelContainer.classList.add('cesium-popup-panel')
if (this.className && this.className !== '') {
_panelContainer.classList.add(this.className)
}
_closeBtn = document.createElement('div')
_closeBtn.classList.add('cesium-popup-close-btn')
_closeBtn.innerHTML = closeBtnIcon
// header container
var headerContainer = document.createElement('div')
headerContainer.classList.add('cesium-popup-header-panel')
this.headerTitle = document.createElement('div')
this.headerTitle.classList.add('cesium-poput-header-title')
this.headerTitle.innerHTML = this.title
headerContainer.appendChild(this.headerTitle)
_panelContainer.appendChild(_closeBtn)
_panelContainer.appendChild(headerContainer)
// content container
_contentContainer = document.createElement('div')
_contentContainer.classList.add('cesium-popup-content-panel')
_contentContainer.innerHTML = this.content
_panelContainer.appendChild(_contentContainer)
//tip container
var tipContaienr = document.createElement('div')
tipContaienr.classList.add('cesium-popup-tip-panel')
var tipDiv = document.createElement('div')
tipDiv.classList.add('cesium-popup-tip-bottom')
tipContaienr.appendChild(tipDiv)
_panelContainer.appendChild(tipContaienr)
_panelContainer.style.display = 'none'
// add to Viewer Container
_viewer.cesiumWidget.container.appendChild(_panelContainer)
this.emit('open')
}
CesiumPopup.prototype.setHTML = function (html) {
if (_contentContainer) {
_contentContainer.innerHTML = html
}
this.content = html
return this;
}
CesiumPopup.prototype.render = function () {
var geometry = this.position
if (!geometry) return
var position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(_viewer.scene, geometry)
if (!position) {
return
}
if (_panelContainer) {
_panelContainer.style.left = position.x - _panelContainer.offsetWidth / 2 + this.offset[0] + 'px';
_panelContainer.style.top = position.y - _panelContainer.offsetHeight - 10 + this.offset[1] + 'px';
}
}
CesiumPopup.prototype.setPosition = function (cartesian3) {
this.position = cartesian3
return this;
}
CesiumPopup.prototype.addClassName = function (className) {
if (_panelContainer) {
_panelContainer.classList.add(className)
}
return this;
}
CesiumPopup.prototype.removeClass = function (className) {
if (_panelContainer) {
_panelContainer.classList.remove(className)
}
return this;
}
CesiumPopup.prototype.setTitle = function (title) {
this.headerTitle.innerHTML = title
return this;
}
CesiumPopup.prototype.setOffset = function (offset) {
this.offset = offset
return this;
}
CesiumPopup.prototype.closeHander = function () {
this.remove()
}
CesiumPopup.prototype.remove = function () {
if(_closeBtn)_closeBtn.removeEventListener('click', this.closeHander, false)
if (_closeBtn) {
_closeBtn.parentNode.removeChild(_closeBtn)
_closeBtn = null
}
if (_contentContainer) {
_contentContainer.parentNode.removeChild(_contentContainer)
_contentContainer = null
}
if (_panelContainer) {
_panelContainer.parentNode.removeChild(_panelContainer)
_panelContainer = null
}
if (_renderListener) {
_renderListener()
_renderListener = null
}
if (_viewer) {
_viewer = null
}
this.emit('close')
}
return CesiumPopup
})()
......@@ -6,22 +6,17 @@ import App from './App'
import './components'
import '@/assets/less/component.less'
import '@/assets/font/font.css'
import './assets/icon/iconfont.css'
// vdr拖动缩放组件
import VueDraggableResizable from 'vue-draggable-resizable'
// optionally import default styles
import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
// import axios from 'axios'
// Vue.prototype.$axios = axios
// import VueClipboard from 'vue-clipboard2'
// script引入element use
Vue.use(ELEMENT, {
size: 'small',
})
// 事件总线
Vue.prototype.$EventBus = new Vue()
// Vue.use(VueClipboard)
// 关闭生产模式的提示
Vue.config.productionTip = false
......
var BaseEvent = function () {
this.handles = {}
this.cached = []
}
BaseEvent.prototype.on = function (eventName, callback) {
if (typeof callback !== "function") return;
if (!this.handles[eventName]) {
this.handles[eventName] = [];
}
this.handles[eventName].push(callback);
if (this.cached[eventName] instanceof Array) {
//说明有缓存的 可以执行
callback.apply(null, this.cached[eventName]);
}
}
BaseEvent.prototype.emit = function () {
if (this.handles[arguments[0]] instanceof Array) {
for (let i = 0; i < this.handles[arguments[0]].length; i++) {
this.handles[arguments[0]][i](arguments[1]);
}
}
//默认缓存
this.cached[arguments[0]] = Array.prototype.slice.call(arguments, 1);
}
var CesiumPopup = (function () {
var _panelContainer = null
var _contentContainer = null
var _closeBtn = null
var _renderListener = null
var _viewer = null
var CesiumPopup = function (options) {
//继承
BaseEvent.call(this)
this.className = options.className || ''
this.title = options.title || ''
this.offset = options.offset || [0, 0]
// this.render = this.render.bind(this)
this.closeHander = this.closeHander.bind(this)
}
CesiumPopup.prototype = new BaseEvent()
CesiumPopup.prototype.constrctor = CesiumPopup
CesiumPopup.prototype.addTo = function (viewer) {
if (_viewer) this.remove()
_viewer = viewer
this.initPanle();
//关闭按钮
_closeBtn.addEventListener('click', this.closeHander, false)
if (this.position) {
_panelContainer.style.display = 'block'
_renderListener = _viewer.scene.postRender.addEventListener(this.render, this)
}
return this
}
CesiumPopup.prototype.initPanle = function () {
var closeBtnIcon = '<svg t="1603334792546" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1328" width="32" height="32"><path d="M568.922 508.232L868.29 208.807a39.139 39.139 0 0 0 0-55.145l-1.64-1.64a39.139 39.139 0 0 0-55.09 0l-299.367 299.82-299.425-299.934a39.139 39.139 0 0 0-55.088 0l-1.697 1.64a38.46 38.46 0 0 0 0 55.09l299.48 299.594-299.424 299.48a39.139 39.139 0 0 0 0 55.09l1.64 1.696a39.139 39.139 0 0 0 55.09 0l299.424-299.48L811.56 864.441a39.139 39.139 0 0 0 55.089 0l1.696-1.64a39.139 39.139 0 0 0 0-55.09l-299.48-299.537z" p-id="1329"></path></svg>'
_panelContainer = document.createElement('div')
_panelContainer.classList.add('cesium-popup-panel')
if (this.className && this.className !== '') {
_panelContainer.classList.add(this.className)
}
_closeBtn = document.createElement('div')
_closeBtn.classList.add('cesium-popup-close-btn')
_closeBtn.innerHTML = closeBtnIcon
// header container
var headerContainer = document.createElement('div')
headerContainer.classList.add('cesium-popup-header-panel')
this.headerTitle = document.createElement('div')
this.headerTitle.classList.add('cesium-poput-header-title')
this.headerTitle.innerHTML = this.title
headerContainer.appendChild(this.headerTitle)
_panelContainer.appendChild(_closeBtn)
_panelContainer.appendChild(headerContainer)
// content container
_contentContainer = document.createElement('div')
_contentContainer.classList.add('cesium-popup-content-panel')
_contentContainer.innerHTML = this.content
_panelContainer.appendChild(_contentContainer)
//tip container
var tipContaienr = document.createElement('div')
tipContaienr.classList.add('cesium-popup-tip-panel')
var tipDiv = document.createElement('div')
tipDiv.classList.add('cesium-popup-tip-bottom')
tipContaienr.appendChild(tipDiv)
_panelContainer.appendChild(tipContaienr)
_panelContainer.style.display = 'none'
// add to Viewer Container
_viewer.cesiumWidget.container.appendChild(_panelContainer)
this.emit('open')
}
CesiumPopup.prototype.setHTML = function (html) {
if (_contentContainer) {
_contentContainer.innerHTML = html
}
this.content = html
return this;
}
CesiumPopup.prototype.render = function () {
var geometry = this.position
if (!geometry) return
var position = Cesium.SceneTransforms.wgs84ToWindowCoordinates(_viewer.scene, geometry)
if (!position) {
return
}
if (_panelContainer) {
_panelContainer.style.left = position.x - _panelContainer.offsetWidth / 2 + this.offset[0] + 'px';
_panelContainer.style.top = position.y - _panelContainer.offsetHeight - 10 + this.offset[1] + 'px';
}
}
CesiumPopup.prototype.setPosition = function (cartesian3) {
this.position = cartesian3
return this;
}
CesiumPopup.prototype.addClassName = function (className) {
if (_panelContainer) {
_panelContainer.classList.add(className)
}
return this;
}
CesiumPopup.prototype.removeClass = function (className) {
if (_panelContainer) {
_panelContainer.classList.remove(className)
}
return this;
}
CesiumPopup.prototype.setTitle = function (title) {
this.headerTitle.innerHTML = title
return this;
}
CesiumPopup.prototype.setOffset = function (offset) {
this.offset = offset
return this;
}
CesiumPopup.prototype.closeHander = function () {
this.remove()
}
CesiumPopup.prototype.remove = function () {
if (_closeBtn) _closeBtn.removeEventListener('click', this.closeHander, false)
if (_closeBtn) {
_closeBtn.parentNode.removeChild(_closeBtn)
_closeBtn = null
}
if (_contentContainer) {
_contentContainer.parentNode.removeChild(_contentContainer)
_contentContainer = null
}
if (_panelContainer) {
_panelContainer.parentNode.removeChild(_panelContainer)
_panelContainer = null
}
if (_renderListener) {
_renderListener()
_renderListener = null
}
if (_viewer) {
_viewer = null
}
this.emit('close')
}
return CesiumPopup
})()
export default CesiumPopup;
......@@ -21,7 +21,7 @@
<el-form
:model="historyTimeForm"
ref="historyForm"
label-width="auto"
label-width="80px"
:rules="historyFormRules"
>
<el-form-item label="选择路口" prop="crossId">
......
......@@ -150,6 +150,7 @@
</template>
<script>
import CesiumPopup from '../../utils/cesiumPopup'
import { multiVehicleTrackDetail, queryTrackDetail } from "../../dao/track";
import CesiumMap from "../../components/Standard/cesiumMap.vue";
import MenuVehicleTrack from "./menuVehicleTrack.vue";
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment