This commit is contained in:
2023-10-17 22:35:28 +08:00
parent 1bafe71d1e
commit 69983054dc
22 changed files with 319 additions and 39 deletions

4
hd-glasses-app/.env.dev Normal file
View File

@@ -0,0 +1,4 @@
VUE_APP_MAP_URL='http://82.157.23.170:8600/geoserver'
VUE_APP_MAP_AUTHKEY='9b488ac6-5309-4ef4-ab99-2180d2da161d'
VUE_APP_API="http://work.ii999.live:19002/znzq"

4
hd-glasses-app/.env.prod Normal file
View File

@@ -0,0 +1,4 @@
VUE_APP_MAP_URL='http://172.16.2.2:8600/geoserver'
VUE_APP_MAP_AUTHKEY='30efbafe-d218-4d77-8200-0207246924be'
VUE_APP_API="http://172.16.2.3:19000/znzq"

View File

@@ -6587,6 +6587,11 @@
"find-up": "^4.0.0"
}
},
"plot-ol": {
"version": "1.0.1",
"resolved": "http://nexus.frp.shuhesoft.com:10000/repository/group-npm/plot-ol/-/plot-ol-1.0.1.tgz",
"integrity": "sha512-znRQiXm2UQltL4o+O5Lnv/NVSAT+DVgqwB6nnpnhB+uwHyyz6Zh4bNib061k6lXZnpTIUmueyyBEIAX/aNYZ2Q=="
},
"portfinder": {
"version": "1.0.32",
"resolved": "https://registry.npmmirror.com/portfinder/-/portfinder-1.0.32.tgz",
@@ -7087,6 +7092,11 @@
"renderkid": "^3.0.0"
}
},
"process": {
"version": "0.11.10",
"resolved": "https://registry.npmmirror.com/process/-/process-0.11.10.tgz",
"integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A=="
},
"process-nextick-args": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz",

View File

@@ -3,8 +3,8 @@
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"serve": "vue-cli-service serve --mode dev",
"build": "vue-cli-service build --mode prod",
"lint": "vue-cli-service lint"
},
"dependencies": {
@@ -15,7 +15,9 @@
"less-loader": "^11.1.3",
"lib-flexible": "^0.3.2",
"ol": "^8.1.0",
"plot-ol": "^1.0.1",
"postcss-pxtorem": "^5.1.1",
"process": "^0.11.10",
"vant": "^2.13.1",
"vue": "^2.6.14",
"vue-router": "^3.6.5"

View File

@@ -1,11 +1,18 @@
<!DOCTYPE html>
<html lang="">
<head>
<script type="text/javascript" src="./vconsole.min.js"></script>
<script>
// init vConsole
var vConsole = new VConsole();
console.log('Hello world');
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script type="text/javascript" src="srs/adapter-7.4.0.min.js"></script>
<script type="text/javascript" src="srs/srs.sdk.js"></script>
<script type="text/javascript" src="srs/srs.sig.js"></script>

10
hd-glasses-app/public/vconsole.min.js vendored Normal file

File diff suppressed because one or more lines are too long

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@@ -1,6 +1,6 @@
import Vue from 'vue'
import App from './App.vue'
import utils from './utils/publicFun';
import router from './router'
import axios from 'axios'
@@ -16,6 +16,8 @@ import 'amfe-flexible';
Vue.config.productionTip = false
Vue.prototype.$utils = utils;
new Vue({
render: h => h(App),
router //添加路由对象

View File

@@ -0,0 +1,186 @@
<template>
<div class="hd_map">
<div id="icon" style="display: none"><img style="width: 40px;height: 40px" src="../assets/map/icon_paishuibeng_h_3.png"></div>
<div id="map2" ref="roadmap" style="width: 100%;height: 100%">
</div>
<div class="addAlarmPoint" v-if="page=='addAlarmPoint'">
<div class="addAlarmPointNext" @click="addAlarmPointNextAction">下一步</div>
</div>
</div>
</template>
<script>
import {OL as ol, api, PlottingLayer, FeatureOperatorEvent, PlotTypes} from 'plot-ol/plottingol'
import { Notify,Dialog } from 'vant';
import service from "../utils/service"
export default {
name: "hd_map",
data() {
// const loadMap = new api.LoadMap("http://172.16.2.2:8600/geoserver", "30efbafe-d218-4d77-8200-0207246924be");
const loadMap = new api.LoadMap(process.env.VUE_APP_MAP_URL, process.env.VUE_APP_MAP_AUTHKEY);
return {
map2: null,
loadMap: loadMap,
selectPoint: [], //选择的点位
center: [12497018.585823221, 2476783.2447665134],
icon: require("../assets/map.png"),
page: null
};
},
mounted() {
console.log(process.env.NODE_ENV)
console.log(process.env.NODE_ENV)
console.log(process.env.NODE_ENV)
console.log(process.env.NODE_ENV)
console.log(process.env.NODE_ENV)
console.log(this.$route.query.page)
this.page = this.$route.query.page;
this.init();
switch (this.page) {
case "addAlarmPoint":
console.log("新增报警点");
this.PageAddAlarmPoint()
break
default:
console.log("未匹配到page参数")
this.queryAlarmList()
this.queryAllEquipment()
}
},
methods: {
init() {
// console.log(this.$utils.getUrlParam("page"))
//限制地图移动范围
const extent = [12482643.010892345, 2470943.170650934, 12505548.591601802, 2482396.032222487];
//地图中心点
let center = "ol.proj.transform([112.26173, 21.70896], 'EPSG:4326', 'EPSG:3857')"
center = [12497018.585823221, 2476783.2447665134];
// 初始化地图参数
const option = {
target: 'map2',
layers: [
{
type: 'WMTS',
layerName: 'china:yangjianghedian_dt',
projection: 'EPSG:3857',
version: '1.0.0',
format: 'image/png'
},
{
type: 'WMS',
layerName: 'china:yangjianghedian'
}
],
view: {
extent: extent,
center: center,
zoom: 16,
minZoom: 14
}
}
this.map2 = this.loadMap.init(option);
//载入点位
const markerOption = {
markers: [{coordinates: this.center}],
source: 'EPSG:4326', //源坐标系
destination: 'EPSG:3857', //目标坐标系
style: new ol.style.Style({
image: new ol.style.Icon({
src: this.icon
})
}),
}
this.loadMap.loadMarkerFromData(markerOption);
},
queryAllEquipment(){
service.get(`/sys/equipment/pageList`,{
params:{
pageNo:1,
pageSize:50
}
})
},
queryAlarmList(){
service.get(`/api/alarm/list`,{
params:{
sendStatus:1,
pageNo:1,
pageSize:50
}
})
},
addAlarmPointNextAction() {
if(this.selectPoint.length==0){
Dialog({ message: '请先选择点位' });
}
const result = JSON.stringify(this.selectPoint)
location.href = "uniwebview://action?function=addAlarmPoint&params1=" + result;
},
PageAddAlarmPoint() {
//获取点击的点位信息
const _this = this;
const element = document.getElementById('icon');
element.style.display="block"
const popup = new ol.Overlay({
element: element,
positioning: 'bottom-center',
stopEvent: false,
});
this.map2.addOverlay(popup);
this.map2.on('singleclick', function (evt) {
popup.setPosition(evt.coordinate);
_this.selectPoint = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
})
},
}
}
</script>
<style lang="less" scoped>
.addAlarmPoint {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
display: flex;
flex-direction: row;
justify-content: center;
z-index: 100;
.addAlarmPointNext {
width: 80%;
height: 80px;
line-height: 80px;
background-color: #369FFF;
border-radius: 20px;
font-size: 26px;
color: white;
}
}
</style>
<style>
@import '~plot-ol/ol.css';
.ol-touch .ol-control button {
font-size: 26px;
}
.hd_map {
width: 100vw;
height: 100vh;
position: absolute;
}
#map2 {
width: 100vw;
height: 100vh;
}
</style>

View File

@@ -6,21 +6,24 @@ import MyHello from '../components/MyHello.vue'
Vue.use(Router);
//配置路由
const router = new Router({
const router = new Router({
routes: [
{
path:"/hello",
component:MyHello
path: "/hello",
component: MyHello
},
//路由懒加载(按需加载)
{
path: '/map',
name: 'map',
component: () => import('../pages/map.vue')
},{
component: () => import('../pages/map.vue') //路由懒加载(按需加载)
}, {
path: '/call_room',
name: 'call_room',
component: () => import('../pages/call_room.vue')
}, {
path: '/hd_map',
name: 'hd_map',
component: () => import('../pages/hd_map.vue')
}
]
});

View File

@@ -0,0 +1,23 @@
/**
* getUrlKey 截取地址栏参数
* @param value
* @returns {String}
*/
const getUrlParam = (name) => {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
let url = window.location.href.split('#')[0];
let search = url.split('?')[1];
console.log(search);
if (search) {
var r = search.substr(0).match(reg);
if (r !== null) {
return unescape(r[2]);
}
return null;
} else return null;
}
export default {
getUrlParam,
};

View File

@@ -1,7 +1,7 @@
import axios from "axios";
let service = axios.create({
baseURL:"",//相同绝对路径
baseURL:process.env.VUE_APP_API,//相同绝对路径
timeout: 100000,//超过这么多时间,则请求终止
headers: {//请求头携带数据的格式
"Content-Type": "application/json;charset=UTF-8",
@@ -12,10 +12,11 @@ let service = axios.create({
service.interceptors.request.use(function (config) {
// 发送请求之前做写什么
let token = localStorage.getItem("token");
token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTc1NDg5NjUsInVzZXJuYW1lIjoiem56cTEifQ.-qgy6DGCWvMTJYE8rDPvABa7S-heeh_rb9Pf4WTxEe0"
// 如果有
if(token){
// 放在请求头token跟后端沟通他需要什么该成什么就可以了
config.headers.authorization = token;
config.headers["X-Access-Token"] = token;
}
return config;
}, function (error) {