suzhou-jichuang-lanhai
/
JiangNingEventMap
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

模拟登录获取事件列表

Browse Source
Lvtianfang
吕天方 1 year ago
parent 2cb60e350b
commit 2515d1588f
6 changed files with 242 additions and 220 deletions
Show Stats Download Patch File Download Diff File

5
.env.development
Unescape View File

@ -8,4 +8,7 @@ ENV = 'development'
# VUE_APP_BASE_API = 'http://39.101.188.84:9037'
VUE_APP_BASE_API = 'https://t-jn-bjh-admin-server.jsszkd.com'
VUE_APP_BASE_API1 = 'https://t-jn-development-manager-server.jsszkd.com/api/webapp'
# 看点测试环境
VUE_APP_BASE_API1 = 'https://t-kd-process-server.jsszkd.com'
# 看点test环境
VUE_APP_BASE_API2 = 'https://t-jn-development-manager-server.jsszkd.com/api/webapp'

6
.env.production
Unescape View File

@ -5,4 +5,8 @@ VUE_APP_TITLE = 事件上图
ENV = 'production'
VUE_APP_BASE_API = 'https://t-jn-bjh-admin-server.jsszkd.com'
VUE_APP_BASE_API1 = 'https://t-jn-development-manager-server.jsszkd.com/api/webapp'
# 测试环境
VUE_APP_BASE_API1 = 'https://t-kd-process-server.jsszkd.com'
# test环境
VUE_APP_BASE_API2 = 'https://t-jn-development-manager-server.jsszkd.com/api/webapp'

19
src/api/root/index.js
Unescape View File

@ -0,0 +1,19 @@
import request from "@/utils/request1"
// 模拟登录
export function robotLogin(data){
return request({
url: "/api/system/robotLogin",
method:'post',
data
})
}
// 获取事件列表
export function ViewListPage(params,data){
return request({
url: "/api/eform/engine/viewEngine/queryViewListPage",
method:'post',
params,
data
})
}

250
src/components/map.vue
Unescape View File

@ -11,12 +11,12 @@
</template>
<div>
<el-descriptions :border="false" :column="1" size="mini">
<el-descriptions-item label="事件编号">2023073024252</el-descriptions-item>
<el-descriptions-item label="事件标题">下水道结冰堵塞</el-descriptions-item>
<el-descriptions-item label="事件类型">城市安全类</el-descriptions-item>
<el-descriptions-item label="事件地址">XXXXXXXXXXXXXXXXXXXX</el-descriptions-item>
<el-descriptions-item label="发生时间">2023-07-30</el-descriptions-item>
<el-descriptions-item label="所属网格">网格2</el-descriptions-item>
<el-descriptions-item label="事件编号">{{ markerInfo.rand_number }}</el-descriptions-item>
<el-descriptions-item label="事件标题">{{ markerInfo.name }}</el-descriptions-item>
<el-descriptions-item label="事件类型">{{ markerInfo.type }}</el-descriptions-item>
<el-descriptions-item label="事件地址">{{ markerInfo.address }}</el-descriptions-item>
<el-descriptions-item label="发生时间">{{ markerInfo.open_time }}</el-descriptions-item>
<el-descriptions-item label="所属网格">XXX</el-descriptions-item>
</el-descriptions>
</div>
<template slot="footer">
@ -31,16 +31,9 @@
<script>
import L from "leaflet"
import "@/utils/lib/leaflet.ChineseTmsProviders.js";
import oneGJ02 from "@/utils/lib/jiangningqu/1GJ02(1).json"; // 一中队
import twoGJ02 from "@/utils/lib/jiangningqu/1GJ02(2).json"; // 二中队
import threeGJ02 from "@/utils/lib/jiangningqu/1GJ02(3).json"; // 三中队
import fourGJ02 from "@/utils/lib/jiangningqu/1GJ02(4).json"; // 四中队
import ruanjianyuan from "@/utils/lib/jiangningqu/1GJ02(5).json"; // 软件园
import konggang from "@/utils/lib/jiangningqu/1GJ02(6).json"; // 空港开发区
import onLine from "@/utils/lib/jiangningqu/onLine.json";
// 重点路段 重点区域 网格 图标获取 手机号和人员名称查询 部门查询 部门id查询 imei查询用户信息
import { listZdld, listZdqy, levelQywg, getFenceList } from "@/api/basicsSet";
import { robotLogin, ViewListPage } from "@/api/root";
export default {
name: 'HelloWorld',
data(){
@ -51,9 +44,11 @@ export default {
mapLayer1:null,
mapLayer2:null,
mapLayer3:null,
mapLayer1Text:null,
},
dialogVisible:false,
onLoad:false,
markerInfo:{},
}
},
props: {
@ -105,37 +100,43 @@ export default {
this.mapLayers.mapLayer1 = L.featureGroup().addTo(this.map);
this.mapLayers.mapLayer2 = L.featureGroup().addTo(this.map);
this.mapLayers.mapLayer3 = L.featureGroup().addTo(this.map);
this.mapLayers.mapLayer1Text = L.featureGroup().addTo(this.map);
this.map.on("zoom", () => {
let zoom = this.map.getZoom();
if (zoom >= 13) {
this.map.removeLayer(this.mapLayers.mapLayer1)
this.map.removeLayer(this.mapLayers.mapLayer1Text)
this.map.addLayer(this.mapLayers.mapLayer2)
this.map.addLayer(this.mapLayers.mapLayer3)
} else {
this.map.addLayer(this.mapLayers.mapLayer1)
this.map.addLayer(this.mapLayers.mapLayer1Text)
this.map.removeLayer(this.mapLayers.mapLayer2)
this.map.removeLayer(this.mapLayers.mapLayer3)
}
if(zoom <= 10) {
this.map.removeLayer(this.mapLayers.mapLayer1Text)
}
});
let zoom = this.map.getZoom();
if (zoom >= 13) {
this.map.removeLayer(this.mapLayers.mapLayer1)
this.map.removeLayer(this.mapLayers.mapLayer1Text)
this.map.addLayer(this.mapLayers.mapLayer2)
this.map.addLayer(this.mapLayers.mapLayer3)
} else {
this.map.addLayer(this.mapLayers.mapLayer1)
this.map.addLayer(this.mapLayers.mapLayer1Text)
this.map.removeLayer(this.mapLayers.mapLayer2)
this.map.removeLayer(this.mapLayers.mapLayer3)
}
// 中队
// this.zhongdui();
// 空港
// this.konggangMap();
// 软件园
// this.ruanjianyuanMap();
robotLogin({username:"superAdmin",password:"sa@123456"}).then(res=>{
if(res.code == 200) {
localStorage.setItem('robotToken',res.result.token)
}
})
// 点位信息
this.eventPoint();
// console.log(onLine,"在线情况");
// 重点区域
this.zhongdianMap();
// 围栏1
@ -145,208 +146,35 @@ export default {
// 网格
this.wanggeMap();
},
// 中队
zhongdui() {
let one = L.geoJSON(oneGJ02, {
pane: "mapLayer2",
style: function (feature) {
return {
color: "#1E83EB",
weight: 2,
fillColor: "#1E83EB",
fillOpacity: 0.2,
};
},
onEachFeature: (feature, layer) => {
// console.log(feature,'feature');
let bounds = layer._bounds;
let center = bounds.getCenter();
let myIcon = L.divIcon({
className: "region-name3",
html: feature.properties.NAME,
iconSize: [80, 24],
iconAnchor: [20, 0],
});
// 多边形上的标记点;
// L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
L.marker(center, {
pane: "mapLayer3",
icon: myIcon,
}).addTo(this.mapLayers.mapLayer3);
},
}).addTo(this.mapLayers.mapLayer2);
let two = L.geoJSON(twoGJ02, {
pane: "mapLayer2",
style: function (feature) {
return {
color: "#1E83EB",
weight: 2,
fillColor: "#1E83EB",
fillOpacity: 0.2,
};
},
onEachFeature: (feature, layer) => {
// console.log(feature,'feature');
let bounds = layer._bounds;
let center = bounds.getCenter();
let myIcon = L.divIcon({
className: "region-name3",
html: feature.properties.NAME,
iconSize: [80, 24],
iconAnchor: [20, 0],
});
// 多边形上的标记点;
// L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
L.marker(center, {
pane: "mapLayer3",
icon: myIcon,
}).addTo(this.mapLayers.mapLayer3);
},
}).addTo(this.mapLayers.mapLayer2);
let three = L.geoJSON(threeGJ02, {
pane: "mapLayer2",
style: function (feature) {
return {
color: "#1E83EB",
weight: 2,
fillColor: "#1E83EB",
fillOpacity: 0.2,
};
},
onEachFeature: (feature, layer) => {
// console.log(feature,'feature');
let bounds = layer._bounds;
let center = bounds.getCenter();
let myIcon = L.divIcon({
className: "region-name3",
html: feature.properties.NAME,
iconSize: [80, 24],
iconAnchor: [20, 0],
});
// 多边形上的标记点;
// L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
L.marker(center, {
pane: "mapLayer3",
icon: myIcon,
}).addTo(this.mapLayers.mapLayer3);
},
}).addTo(this.mapLayers.mapLayer2);
let four = L.geoJSON(fourGJ02, {
pane: "mapLayer2",
style: function (feature) {
return {
color: "#1E83EB",
weight: 2,
fillColor: "#1E83EB",
fillOpacity: 0.2,
};
},
onEachFeature: (feature, layer) => {
// console.log(feature,'feature');
let bounds = layer._bounds;
let center = bounds.getCenter();
let myIcon = L.divIcon({
className: "region-name3",
html: feature.properties.NAME,
iconSize: [80, 24],
iconAnchor: [20, 0],
});
// 多边形上的标记点;
// L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
L.marker(center, {
pane: "mapLayer3",
icon: myIcon,
}).addTo(this.mapLayers.mapLayer3);
},
}).addTo(this.mapLayers.mapLayer2);
const bounds = four.getBounds();
let center = bounds.getCenter();
this.map.setView(center, 11);
},
// 空港开发区
konggangMap() {
let kg = L.geoJSON(konggang, {
pane: "mapLayer2",
style: function (feature) {
return {
color: "#1E83EB",
weight: 2,
fillColor: "#1E83EB",
fillOpacity: 0.2,
};
},
onEachFeature: (feature, layer) => {
let bounds = layer._bounds;
let center = bounds.getCenter();
// console.log(feature,'feature');
let myIcon = L.divIcon({
className: "region-name3",
html: feature.properties.NAME,
iconSize: [150, 24],
iconAnchor: [45, 0],
});
// 多边形上的标记点;
// L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
L.marker(center, {
pane: "mapLayer3",
icon: myIcon,
}).addTo(this.mapLayers.mapLayer3);
},
}).addTo(this.mapLayers.mapLayer2);
},
// 软件园
ruanjianyuanMap() {
let rjy = L.geoJSON(ruanjianyuan, {
pane: "mapLayer2",
style: function (feature) {
return {
color: "#1E83EB",
weight: 2,
fillColor: "#1E83EB",
fillOpacity: 0.2,
};
},
onEachFeature: (feature, layer) => {
// console.log(feature,'feature');
let bounds = layer._bounds;
let center = bounds.getCenter();
let myIcon = L.divIcon({
className: "region-name3",
html: feature.properties.NAME,
iconSize: [150, 24],
iconAnchor: [45, 0],
});
// 多边形上的标记点;
// L.marker({lng:feature.properties.CENTERX,lat:feature.properties.CENTERY}, {
L.marker(center, {
pane: "mapLayer3",
icon: myIcon,
}).addTo(this.mapLayers.mapLayer3);
},
}).addTo(this.mapLayers.mapLayer2);
},
// 渲染事件点位
eventPoint(){
let iconUrl1 = require("@/assets/images/icon1.png");
let iconUrl2 = require("@/assets/images/icon2.png");
onLine.features.forEach((element,index) => {
let marker = L.marker({ lng: element.geometry.coordinates[0], lat: element.geometry.coordinates[1] },
let iconUrl1 = require("@/assets/images/icon2.png");
let data = {'queryValue' : [], "myInstanceClassify" : "all", "parameterValue":[], fks: []}
ViewListPage({viewCode:'shi_jian_shou_li_list_page', pageNo: 1, pageSize:500}, data).then(res=>{
if(res.code == 200) {
res.result.records.forEach((element)=>{
let location = element.location?.split(',');
if(location) {
let marker = L.marker({ lng: location[0], lat: location[1] },
{
icon: L.icon({
iconUrl:element.properties.name == "Icon1" ? iconUrl1 : iconUrl2,
iconSize: [60,70],
iconAnchor:[30,70]
iconUrl: iconUrl1,
iconSize: [40,45],
iconAnchor:[20,45]
})
}
).addTo(this.map)
this.markerClick(marker, element);
});
}
})
}
})
},
// 点位的点击事件
markerClick(marker,element) {
marker.on("click", (e) => {
this.dialogVisible = true;
console.log(element);
this.markerInfo = element;
})
},
dispose(){
@ -385,7 +213,7 @@ export default {
L.marker(center, {
pane: "mapLayer1",
icon: myIcon,
}).addTo(this.mapLayers.mapLayer1);
}).addTo(this.mapLayers.mapLayer1Text);
},
}).addTo(this.mapLayers.mapLayer1);
})

154
src/utils/request1.js
Unescape View File

@ -0,0 +1,154 @@
import axios from 'axios'
import { Notification, MessageBox, Message, Loading } from 'element-ui'
// import store from '@/store'
import { getToken,getAccess } from '@/utils/auth'
import errorCode from '@/utils/errorCode'
import { tansParams, blobValidate } from "@/utils/ruoyi";
import cache from '@/plugins/cache'
import { saveAs } from 'file-saver'
let downloadLoadingInstance;
// 是否显示重新登录
export let isRelogin = { show: false };
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
// axios中请求配置有baseURL选项，表示请求URL公共部分
baseURL: process.env.VUE_APP_BASE_API1,
// 超时
timeout: 20000
})
// request拦截器
service.interceptors.request.use(config => {
// 是否需要设置 token
const isToken = (config.headers || {}).isToken === false
// 是否需要防止数据重复提交
const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
if (localStorage.getItem('robotToken') && !isToken) {
config.headers['X-Access-Token'] = localStorage.getItem('robotToken') // 让每个请求携带自定义token 请根据实际情况自行修改
}
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?' + tansParams(config.params);
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
if (!isRepeatSubmit && (config.method === 'post' || config.method === 'put')) {
const requestObj = {
url: config.url,
data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
time: new Date().getTime()
}
const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小
const limitSize = 5 * 1024 * 1024; // 限制存放数据5M
if (requestSize >= limitSize) {
console.warn(`[${config.url}]: ` + '请求数据大小超出允许的5M限制，无法进行防重复提交验证。')
return config;
}
const sessionObj = cache.session.getJSON('sessionObj')
if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
cache.session.setJSON('sessionObj', requestObj)
} else {
const s_url = sessionObj.url; // 请求地址
const s_data = sessionObj.data; // 请求数据
const s_time = sessionObj.time; // 请求时间
const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交
if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
const message = '数据正在处理，请勿重复提交';
console.warn(`[${s_url}]: ` + message)
return Promise.reject(new Error(message))
} else {
cache.session.setJSON('sessionObj', requestObj)
}
}
}
return config
}, error => {
console.log(error)
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(res => {
// 未设置状态码则默认成功状态
const code = res.data.code - 0 || 200;
// 获取错误信息
const msg = errorCode[code] || res.data.msg || errorCode['default']
// 二进制数据则直接返回
if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
return res.data
}
if (code === 401) {
if (!isRelogin.show) {
isRelogin.show = true;
MessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
isRelogin.show = false;
// store.dispatch('LogOut').then(() => {
// location.href = '/index';
// })
// TODO:自己token过期到登录页
location.href = process.env.VUE_APP_TEST_LOGIN;
}).catch(() => {
isRelogin.show = false;
});
}
return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
} else if (code === 500) {
Message({ message: msg, type: 'error' })
return Promise.reject(new Error(msg))
} else if (code === 601) {
Message({ message: msg, type: 'warning' })
return Promise.reject('error')
} else if (code !== 200) {
Notification.error({ title: msg })
return Promise.reject('error')
} else {
return res.data
}
},
error => {
console.log('err' + error)
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
} else if (message.includes("timeout")) {
message = "系统接口请求超时";
} else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
Message({ message: message, type: 'error', duration: 5 * 1000 })
return Promise.reject(error)
}
)
// 通用下载方法
export function download(url, params, filename, config) {
downloadLoadingInstance = Loading.service({ text: "正在下载数据，请稍候", spinner: "el-icon-loading", background: "rgba(0, 0, 0, 0.7)", })
return service.post(url, params, {
transformRequest: [(params) => { return tansParams(params) }],
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
responseType: 'blob',
...config
}).then(async (data) => {
const isBlob = blobValidate(data);
if (isBlob) {
const blob = new Blob([data])
saveAs(blob, filename)
} else {
const resText = await data.text();
const rspObj = JSON.parse(resText);
const errMsg = errorCode[rspObj.code] || rspObj.msg || errorCode['default']
Message.error(errMsg);
}
downloadLoadingInstance.close();
}).catch((r) => {
console.error(r)
Message.error('下载文件出现错误，请联系管理员！')
downloadLoadingInstance.close();
})
}
export default service

16
vue.config.js
Unescape View File

@ -36,8 +36,22 @@ module.exports = {
['^' + process.env.VUE_APP_BASE_API]: ''
}
},
[process.env.VUE_APP_BASE_API1]: {
target: `http://localhost:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API1]: ''
}
},
[process.env.VUE_APP_BASE_API2]: {
target: `http://localhost:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API2]: ''
}
},
},
disableHostCheck: true
// disableHostCheck: true
},
css: {
loaderOptions: {

Write Preview
Loading…
Cancel
Save