From eb6374fd3670ac6fec2725e5f3ccb708ea76f22c Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Tue, 20 Jul 2021 22:03:47 +0800
Subject: [PATCH] 位置选择
---
src/views/realTimePolice/real.vue | 50 +++++-
src/views/wel/home.vue | 2
src/views/policeTracking/policeTracking.vue | 2
src/views/feedbackReport/feedbackReport.vue | 5
public/img/jfd.png | 0
public/map/widgets/alertSecurity/AlertSecurity.js | 67 ++-----
src/components/map/main.vue | 306 ++++++++++++++++++++-----------------
7 files changed, 234 insertions(+), 198 deletions(-)
diff --git a/public/img/jfd.png b/public/img/jfd.png
new file mode 100644
index 0000000..95dc770
--- /dev/null
+++ b/public/img/jfd.png
Binary files differ
diff --git a/public/map/widgets/alertSecurity/AlertSecurity.js b/public/map/widgets/alertSecurity/AlertSecurity.js
index bfa0a0e..68121dd 100644
--- a/public/map/widgets/alertSecurity/AlertSecurity.js
+++ b/public/map/widgets/alertSecurity/AlertSecurity.js
@@ -198,57 +198,32 @@
var oneId = that.getQueryStringByKey('oneId');
var baid = that.getQueryStringByKey('baid');
- that.addPoint(that.addEntitys, lgtd, lttd, './images/jingbaored.png');
- that.createEntitys(that.addEntitys, lgtd, lttd, './images/real-time-callPolice-opcity.png');
- that.createTwinkleEntitys(that.addEntitys, lgtd, lttd, './images/real-time-callPolice-opcity.png');
- // console.log(deptId,153454)
- $.ajax({
- url: "http://s16s652780.51mypc.cn/api/blade-user/pages?current=1&size=9999&work_status=&deptId=" + deptId,
- type: 'get',
- dataType: 'JSON',
- success: function (res) {
+ if (baid != null && baid != "") {
+ $.ajax({
+ url: "http://localhost:82/routeIn/routein/selectList?id=" + baid,
+ type: 'post',
+ dataType: 'JSON',
+ success: function (res) {
+ var entityData = '';
+ var entityArr = [];
+ entityData = res.data[0].routeInfo.match(/\(([^)]*)\)/);
- // console.log(res.data.records, oneId)
+ // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
+ if (entityData && entityData != '') {
+ entityData = entityData[1].split(',');
- res.data.records.forEach((item) => {
- if (item.id == oneId) {
- that.addPoints(that.addEntitys, item.jd, item.wd, './images/security.png')
- }
- });
+ for (var j = 0; j < entityData.length; j++) {
+ entityArr.push([Number(entityData[j].split(' ')[0]), Number(entityData[j].split(' ')[1])]);
- res.data.records.forEach((item) => {
- if (item.roleName == "处警员" && item.id != oneId) {
- that.addPoints(that.addEntitys, item.jd, item.wd, './images/security.png')
- }
- });
- if (baid != null && baid != ""){
- $.ajax({
- url: "http://localhost:82/routeIn/routein/selectList?id=" + baid,
- type: 'post',
- dataType: 'JSON',
- success: function (res) {
- var entityData = '';
- var entityArr = [];
- entityData = res.data[0].routeInfo.match(/\(([^)]*)\)/);
-
- // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
- if (entityData && entityData != '') {
- entityData = entityData[1].split(',');
-
- for (var j = 0; j < entityData.length; j++) {
- entityArr.push([Number(entityData[j].split(' ')[0]), Number(entityData[j].split(' ')[1])]);
-
- // entityArr.push([Number(b[0]), Number(b[1])]);
- }
-
- }
- that.addPolygonAll(that.addEntitys, entityArr);
-
+ // entityArr.push([Number(b[0]), Number(b[1])]);
}
- })
+
+ }
+ that.addPolygonAll(that.addEntitys, entityArr);
+ that._map.centerAndZoom(new esri.geometry.Point(entityArr[Math.ceil(entityArr.length / 2 )][0],entityArr[Math.ceil(entityArr.length / 2 )][1], new esri.SpatialReference({ wkid: 4326 })), 14);
}
- }
- });
+ })
+ }
},
close: function () {
diff --git a/src/components/map/main.vue b/src/components/map/main.vue
index 21bc0b0..ca8f3fb 100644
--- a/src/components/map/main.vue
+++ b/src/components/map/main.vue
@@ -7,18 +7,18 @@
* @LastEditTime: 2021-04-24 11:59:43
-->
<template>
- <div id="map"
- style="height: 100%"></div>
+ <div id="map"
+ style="height: 100%"></div>
</template>
<script>
-import OLCesium from 'olcs/OLCesium.js'
-import 'ol/ol.css'
-import OlView from 'ol/View.js'
-import XYZ from 'ol/source/XYZ'
-import OlLayerTile from 'ol/layer/Tile.js'
-import OlMap from 'ol/Map.js'
+ import OLCesium from 'olcs/OLCesium.js'
+ import 'ol/ol.css'
+ import OlView from 'ol/View.js'
+ import XYZ from 'ol/source/XYZ'
+ import OlLayerTile from 'ol/layer/Tile.js'
+ import OlMap from 'ol/Map.js'
-import {
+ import {
// eslint-disable-next-line no-unused-vars
defaults as OlControlDefaults,
defaults,
@@ -42,167 +42,193 @@
ZoomToExtent,
Rotate
-} from 'ol/control.js'
+ } from 'ol/control.js'
-import VectorLayer from 'ol/layer/Vector'
-import VectorSource from 'ol/source/Vector'
+ import VectorLayer from 'ol/layer/Vector'
+ import VectorSource from 'ol/source/Vector'
-import Feature from 'ol/Feature.js'
-import Point from 'ol/geom/Point.js'
-import LineString from 'ol/geom/LineString.js'
-import { Icon, Style, Fill, Stroke } from 'ol/style.js'
+ import Feature from 'ol/Feature.js'
+ import Point from 'ol/geom/Point.js'
+ import LineString from 'ol/geom/LineString.js'
+ import {Icon, Style, Fill, Stroke} from 'ol/style.js'
-export default {
+ export default {
name: 'Map',
- data () {
- return {
- gunAddlayer: new VectorLayer({ // 图标图层
- zIndex: 22,
- source: new VectorSource()
- }),
- peopleAddlayer: new VectorLayer({ // 图标图层
- zIndex: 22,
- source: new VectorSource()
- }),
- carAddlayer: new VectorLayer({ // 图标图层
- zIndex: 22,
- source: new VectorSource()
- }),
- peopleLineAddlayer: new VectorLayer({ // 图标图层
- zIndex: 22,
- source: new VectorSource()
- }),
- }
+ data() {
+ return {
+ gunAddlayer: new VectorLayer({ // 图标图层
+ zIndex: 22,
+ source: new VectorSource()
+ }),
+ peopleAddlayer: new VectorLayer({ // 图标图层
+ zIndex: 22,
+ source: new VectorSource()
+ }),
+ carAddlayer: new VectorLayer({ // 图标图层
+ zIndex: 22,
+ source: new VectorSource()
+ }),
+ peopleLineAddlayer: new VectorLayer({ // 图标图层
+ zIndex: 22,
+ source: new VectorSource()
+ }),
+ }
},
- mounted () {
- const ol2d = new OlMap({
- layers: [
- new OlLayerTile({
- zIndex: 4,
- title: '影像',
- source: new XYZ({
- url: 'http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 行政区划
- })
- }),
- new OlLayerTile({
- zIndex: 5,
- title: '道路+中文注记',
- source: new XYZ({
- url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
- })
- })
- ],
-
- // 注意地图控件的写法
- controls: defaults().extend([
- // new FullScreen(),
- // new ScaleLine(),
- // new MousePosition(),
- // new Rotate(),
- // new Attribution()
- ]),
- target: 'map',
- view: new OlView({
- center: [0, 0],
- zoom: 2,
- projection: 'EPSG:4326'
+ mounted() {
+ const ol2d = new OlMap({
+ layers: [
+ new OlLayerTile({
+ zIndex: 4,
+ title: '影像',
+ source: new XYZ({
+ url: 'https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal' // 行政区划
})
+ }),
+ // new OlLayerTile({
+ // zIndex: 5,
+ // title: '道路+中文注记',
+ // source: new XYZ({
+ // url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
+ // })
+ // })
+ ],
+
+ // 注意地图控件的写法
+ controls: defaults().extend([
+ // new FullScreen(),
+ // new ScaleLine(),
+ // new MousePosition(),
+ // new Rotate(),
+ // new Attribution()
+ ]),
+ target: 'map',
+ view: new OlView({
+ center: [0, 0],
+ zoom: 2,
+ projection: 'EPSG:4326'
})
- window.ol2d = ol2d
+ })
+ window.ol2d = ol2d
- var view = ol2d.getView()
+ var view = ol2d.getView()
- view.setCenter([115.85883507433789, 28.708432053474827])
+ // view.setCenter([115.85883507433789, 28.708432053474827])
+ //
+ // view.setZoom(13)
- view.setZoom(13)
+ const ol3d = new OLCesium({map: window.ol2d})
+ window.ol3d = ol3d
- const ol3d = new OLCesium({ map: window.ol2d })
- window.ol3d = ol3d
-
- ol2d.addLayer(this.gunAddlayer)
- ol2d.addLayer(this.peopleAddlayer)
- ol2d.addLayer(this.carAddlayer)
- ol2d.addLayer(this.peopleLineAddlayer)
- this.addLines()
+ ol2d.addLayer(this.gunAddlayer)
+ ol2d.addLayer(this.peopleAddlayer)
+ ol2d.addLayer(this.carAddlayer)
+ ol2d.addLayer(this.peopleLineAddlayer)
+ // this.addLines()
},
methods: {
- init3D (val) {
- window.ol3d.setEnabled(val)
- },
- addEntitys (item, icon, scale, name, type) {
- const iconFeature = new Feature({
- geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
- name: name,
- attributes: item
- })
+ init3D(val) {
+ window.ol3d.setEnabled(val)
+ },
+ addEntitys(item, icon, scale, name, type) {
+ const iconFeature = new Feature({
+ geometry: new Point([Number(item.LGTD), Number(item.LTTD)]),
+ name: name,
+ attributes: item
+ })
- const iconStyle = new Style({
- // text: new Text({ // 字体, 未成功, 浪费许多时间
- // font: 'Normal ' + 12 + 'px ' + 'iconfont',
- // text: "\e645",
- // fill: new Fill({ color: "green" }),
- // }),
+ const iconStyle = new Style({
+ // text: new Text({ // 字体, 未成功, 浪费许多时间
+ // font: 'Normal ' + 12 + 'px ' + 'iconfont',
+ // text: "\e645",
+ // fill: new Fill({ color: "green" }),
+ // }),
- image: new Icon({
- scale: scale,
- opacity: 1,
- src: icon
- // src: require('../../assets/Mark.png')
- })
+ image: new Icon({
+ scale: scale,
+ opacity: 1,
+ src: icon
+ // src: require('../../assets/Mark.png')
+ })
- // new CircleStyle({ // 普通样式
- // radius: 6,
- // fill: new Fill({
- // color: 'rgba(200, 155, 155, 0.8)'
- // }),
- // stroke: new Stroke({
- // color: 'black',
- // width: 0.3,
- // })
- // }),
- })
+ // new CircleStyle({ // 普通样式
+ // radius: 6,
+ // fill: new Fill({
+ // color: 'rgba(200, 155, 155, 0.8)'
+ // }),
+ // stroke: new Stroke({
+ // color: 'black',
+ // width: 0.3,
+ // })
+ // }),
+ })
- iconFeature.setStyle(iconStyle)
+ iconFeature.setStyle(iconStyle)
- this[type].getSource().addFeature(iconFeature)
- },
+ this[type].getSource().addFeature(iconFeature)
+ },
- addLines () {
+ addLines(ringId) {
+ var that = this;
+ if (ringId != null && ringId != "") {
+ $.ajax({
+ url: "api/routeIn/routein/selectList",
+ type: "post",
+ data: {
+ "id": ringId
+ },
+ dataType: 'JSON',
+ success: function (data) {
+ that.peopleLineAddlayer.getSource().clear()
+ var entityData = '';
+ var entityArr = [];
+ entityData = data.data[0].routeInfo.match(/\(([^)]*)\)/);
- // 点坐标
- var lineCoords = [
- [115.87471898408013, 28.720924466928977],
- [115.87471898408013, 28.724163802651635],
- [115.87401037939081, 28.72456871961697],
- [115.87147964835748, 28.7246699488583],
- [115.86925260504815, 28.7246699488583],
- [115.86621572780817, 28.7246699488583],
- [115.8635837675335, 28.72578347051296]
- ];// 线里点的集合
+ // 此时result＝["(dsfasjfj3124123)", "dsfasjfj3124123"];
+ if (entityData && entityData != '') {
+ entityData = entityData[1].split(',');
- // 要素
- // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
- var feature_LineString = new Feature({
+ for (var j = 0; j < entityData.length; j++) {
+ entityArr.push([Number(entityData[j].split(' ')[0]), Number(entityData[j].split(' ')[1])]);
+ }
+
+ }
+
+
+ var lineCoords = entityArr;// 线里点的集合
+
+ var view = ol2d.getView()
+ view.setCenter([lineCoords[Math.ceil(entityArr.length / 2 )][0], lineCoords[Math.ceil(entityArr.length / 2 )][1]])
+ view.setZoom(14.5)
+
+ // 要素
+ // var lineCoords = [[featureInfo.lineString[0][0],featureInfo.lineString[0][0]],[featureInfo.lineString(0),featureInfo.lineString(0)]];
+ var feature_LineString = new Feature({
geometry: new LineString(lineCoords)
- });
+ });
- feature_LineString.setStyle(new Style({
+ feature_LineString.setStyle(new Style({
//填充色
fill: new Fill({
- color: 'rgba(255, 255, 255, 0.2)'
+ color: 'rgba(255, 255, 255, 0.2)'
}),
//边线颜色
stroke: new Stroke({
- color: 'rgb(252, 94, 32)',
- width: 5
+ color: 'rgb(252, 94, 32)',
+ width: 5
})
- }))
-
-
- this.peopleLineAddlayer.getSource().addFeature(feature_LineString)
-
+ }))
+ that.peopleLineAddlayer.getSource().addFeature(feature_LineString)
+ },
+ error: function (data) {
+ // 请求失败函数
+ console.log(data);
+ }
+ });
}
+
+
+ }
}
-}
+ }
</script>
diff --git a/src/views/feedbackReport/feedbackReport.vue b/src/views/feedbackReport/feedbackReport.vue
index de8449b..cd37c3f 100644
--- a/src/views/feedbackReport/feedbackReport.vue
+++ b/src/views/feedbackReport/feedbackReport.vue
@@ -189,6 +189,7 @@
{
label: "备注",
prop: "result",
+ span: 24,
rules: [
{
required: true,
@@ -330,6 +331,8 @@
stime: row.stime,
result: row.result,
place: row.place,
+ jd: row.jd,
+ wd: row.wd,
};
if (row.images.length > 0) {
var imageArr = row.images;
@@ -372,6 +375,8 @@
stime: row.stime,
result: row.result,
place: row.place,
+ jd: row.jd,
+ wd: row.wd,
};
if (row.images.length > 0) {
var imageArr = row.images;
diff --git a/src/views/policeTracking/policeTracking.vue b/src/views/policeTracking/policeTracking.vue
index 067099f..8044170 100644
--- a/src/views/policeTracking/policeTracking.vue
+++ b/src/views/policeTracking/policeTracking.vue
@@ -419,7 +419,7 @@
this.getReceivingAlarm();
if (this.form.alarmType == "巡逻任务"){
- this.baseUrl = `/map/index.html?ISinit=1&openid=AlertSecurity&id=${this.form.id}&jd=${this.form.jd}&wd=${this.form.wd}&pid=${this.form.deptId}&deptId=${this.form.deptId}&oneId=${this.form.oneId}&baid=${this.form.baid}`;
+ this.baseUrl = `/map/index.html?openid=AlertSecurity&id=${this.form.id}&jd=${this.form.jd}&wd=${this.form.wd}&pid=${this.form.deptId}&deptId=${this.form.deptId}&oneId=${this.form.oneId}&baid=${this.form.xllx}`;
}else{
this.baseUrl = `/map/index.html?ISinit=1&openid=AlertSecurity&id=${this.form.id}&jd=${this.form.jd}&wd=${this.form.wd}&pid=${this.form.deptId}&deptId=${this.form.deptId}&oneId=${this.form.oneId}`;
}
diff --git a/src/views/realTimePolice/real.vue b/src/views/realTimePolice/real.vue
index 7e14b7f..35d7cac 100644
--- a/src/views/realTimePolice/real.vue
+++ b/src/views/realTimePolice/real.vue
@@ -118,8 +118,8 @@
</template>
<template slot-scope="{type,disabled}" slot="xllxzsForm">
- <div style="width: 200px;height: 200px">
- <Map ref="modalForm" />
+ <div class="mapClassMain" style="width: 860px;height: 400px">
+ <Map ref="modalForm"/>
</div>
</template>
@@ -200,9 +200,8 @@
dicUrl:
"/api/blade-system/dict-biz/child-list?parentId=1356523651644043266",
control: (val, form) => {
- if (val) {
- debugger;
- }
+ // if (val) {
+ // }
return {
text2: {
display: true,
@@ -368,6 +367,7 @@
width: 96,
search: true,
slot: true,
+ value: "0",
searchPlaceholder: "请选择",
prop: "jtype",
type: "select",
@@ -424,10 +424,10 @@
label: "路线展示",
labelWidth: "0",
prop: "xllxzs",
- className: "cityreal3",
+ className: "mapClass",
hide: true,
display: true,
- formslot:true,
+ formslot: true,
},
],
},
@@ -495,8 +495,10 @@
"form.alarmType": {
handler(val) {
var xllx = this.findObject(this.option.column, "xllx");
+ var xllxzs = this.findObject(this.option.column, "xllxzs");
if (val === "巡逻任务") {
xllx.display = true;
+ xllxzs.display = true;
xllx.rules = [
{
required: true,
@@ -506,11 +508,21 @@
];
} else {
xllx.display = false;
+ xllxzs.display = false;
xllx.rules = [];
}
},
immediate: true,
},
+ "form.xllx":{
+ handler(val) {
+ if (val){
+ this.getxllx(val)
+ }
+
+ },
+ immediate: true,
+ }
},
computed: {
...mapGetters(["permission", "flowRoutes"]),
@@ -533,10 +545,10 @@
created() {
this.dateTime = this.getDate();
},
- mounted(){
+ mounted() {
var xb = JSON.parse(window.sessionStorage.getItem('sjsb'));
var data = this.$route.query;
- if (xb == 1){
+ if (xb == 1) {
this.form = data;
this.openAdd();
window.sessionStorage.removeItem('sjsb');
@@ -579,6 +591,16 @@
loading();
}
);
+ },
+ getxllx(val){
+ var that = this;
+ if (this.$refs.modalForm == undefined) {
+ setTimeout(function () {
+ that.$refs.modalForm.addLines(val);
+ }, 1500)
+ } else {
+ that.$refs.modalForm.addLines(val);
+ }
},
rowUpdate(row, index, done, loading) {
var userId = JSON.parse(
@@ -1168,7 +1190,7 @@
},
//打开新增窗体
- openAdd(){
+ openAdd() {
this.$refs.crud.rowAdd();
},
@@ -1220,6 +1242,14 @@
width: 12%;
}
+ .mapClass div label {
+ display: none;
+ }
+
+ .mapClassMain {
+ padding-left: 25px !important;
+ }
+
.cityreal2 div label,
.cityreal3 div label {
display: none;
diff --git a/src/views/wel/home.vue b/src/views/wel/home.vue
index 3d8eda1..933c1c7 100644
--- a/src/views/wel/home.vue
+++ b/src/views/wel/home.vue
@@ -36,7 +36,7 @@
<span> 保安员队伍 </span>
</div>
<div>
- <div><img src="/img/ldz.png" alt="" /><span>25</span></div>
+ <div><img src="/img/jfd.png" alt="" /><span>25</span></div>
<span> 警务辅助队伍</span>
</div>
</div>
--
Gitblit v1.9.3