From 7d57b0fef0f220dfe7c868ce1113a7ce6eb6c468 Mon Sep 17 00:00:00 2001
From: suerprisePlus <15810472099@163.com>
Date: 星期三, 21 八月 2024 11:23:06 +0800
Subject: [PATCH] 添加本地矢量地图服务，初始化视角切换
---
src/assets/js/mapSdk/mapData.js | 9
src/assets/js/mapSdk/mapConfig.js | 28 +
src/views/visualization/rightMenu.vue | 23 +
src/views/dataManager/equipMante/AddOrUpdate.vue | 257 ++++++++++++----
src/assets/js/mapSdk/index.js | 49 ++
src/assets/js/mapSdk/mapServe.js | 4
src/components/mapOl/index.vue | 113 ++++++-
src/views/dataManager/equipMante/index.vue | 73 ++++
src/components/RuoYi/Msgger/index.vue | 96 ++++++
public/config/config.js | 7
src/views/visualization/leftMenu.vue | 108 +++++++
src/api/mapView/peiwang.js | 8
src/App.vue | 27 +
src/views/visualization/index.vue | 45 ++
14 files changed, 696 insertions(+), 151 deletions(-)
diff --git a/public/config/config.js b/public/config/config.js
index be1270a..d44b3fb 100644
--- a/public/config/config.js
+++ b/public/config/config.js
@@ -32,15 +32,18 @@
ragServices: "http://" + ragHost+ "/api/vi",
imageUrl: "",
// sdk鏄剧ず
- sdkImg: host + "/visual/CimSDK/",
+ sdkImg: host + "/CimSDK/",
// 澶╁湴鍥�
tdToken: "94a34772eb88317fcbf8428e10448561",
// geoServer鏈嶅姟
geoServer: {
url: "http://" + geoHost + "/geoserver/sxpw",
wms: "/wms",
- wfs: ""
+ wfs: "",
+ layers:["sxpw:sxdwx","sxpw:tygdtif17"]
+
},
+ pySocket:"ws://192.168.11.24:8101/peiwang/ws/asset",
//鍦颁笅鏁版嵁
terrain: {
isShow: false,
diff --git a/src/App.vue b/src/App.vue
index ad8aca7..055b6a9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
<div id="app" style="background-color:#0e2e87" v-if="$route.meta.bigScreen">
<router-view />
</div>
- <div id="app" v-else>
+ <div id="app" v-else>
<router-view />
<theme-picker />
</div>
@@ -14,14 +14,25 @@
export default {
name: "App",
components: { ThemePicker },
- metaInfo() {
- return {
- title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
- titleTemplate: title => {
- return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
- }
- }
+ metaInfo() {
+ return {
+ title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
+ titleTemplate: title => {
+ return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
+ }
}
+ },
+ data() {
+ return {
+
+ }
+ },
+ mounted() {
+
+ },
+ methods: {
+
+ }
};
</script>
<style scoped>
diff --git a/src/api/mapView/peiwang.js b/src/api/mapView/peiwang.js
index 839a25a..df8dd73 100644
--- a/src/api/mapView/peiwang.js
+++ b/src/api/mapView/peiwang.js
@@ -248,9 +248,9 @@
//璇锋眰鍦板潃
return peiWangServer.post('/peiwang/tokeninfo/update', params);
}
-export function faultreport_list(params) {
+export function faultreport_query(params) {
//璇锋眰鍦板潃
- return peiWangServer.get('/peiwang/faultreport/list', { params: params });
+ return peiWangServer.get('/peiwang/faultreport/query', { params: params });
}
export function faultreport_save(params) {
//璇锋眰鍦板潃
@@ -260,3 +260,7 @@
//璇锋眰鍦板潃
return peiWangServer.post('/peiwang/faultreport/update', params);
}
+export function faultreport_delete(params) {
+ //璇锋眰鍦板潃
+ return peiWangServer.post('/peiwang/faultreport/delete', params);
+}
diff --git a/src/assets/js/mapSdk/index.js b/src/assets/js/mapSdk/index.js
index 972ec0b..e1610a9 100644
--- a/src/assets/js/mapSdk/index.js
+++ b/src/assets/js/mapSdk/index.js
@@ -2,6 +2,7 @@
import mapData from './mapData';
import mapServer from './mapServe';
import * as turf from '@turf/turf';
+import store from '@/store';
const mapInit = {
async Init() {
window.earthCtrl = new SmartEarth.EarthCtrl('sdkContainer', {
@@ -18,6 +19,7 @@
window.Viewer = earthCtrl.viewer;
//璁剧疆鍦扮悆棰滆壊
Viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString('#A9A9A9');
+ Viewer.imageryLayers.removeAll()
// 鍦板舰鍔犺浇
const terrain = config.terrain;
if (terrain.isShow && terrain.isUrl) {
@@ -28,31 +30,58 @@
Viewer.terrainProvider = terrainProvider;
}
+ // Viewer.scene.screenSpaceCameraController.maximumZoomDistance =50000
// 榛樿璁剧疆搴曞浘
this.addImageLayer();
+ // 娣诲姞榧犳爣鐐瑰嚮浜嬩欢
+ this.addMapClick();
},
addImageLayer() {
const baseLayer = mapData.baseLayer;
// 娣诲姞澶╁湴鍥惧簳鍥�
- mapServer.addLayer({
- serveType: 'tdMap',
- url: baseLayer.sUrl + baseLayer.vecLayer + baseLayer.lUrl,
- });
-
// mapServer.addLayer({
- // serveType: 'WMS',
- // url: 'sxpw:shanxitif',
+ // serveType: 'tdMap',
+ // url: baseLayer.sUrl + baseLayer.vecLayer + baseLayer.lUrl,
// });
- // 娣诲姞澶╁湴鍥炬爣娉�
+
mapServer.addLayer({
- serveType: 'tdMap',
- url: baseLayer.sUrl + baseLayer.cvaLayer + baseLayer.lUrl,
+ serveType: 'WMS',
+ url: config.geoServer.layers[1],
});
+ // 娣诲姞澶╁湴鍥炬爣娉�
+ // mapServer.addLayer({
+ // serveType: 'tdMap',
+ // url: baseLayer.sUrl + baseLayer.cvaLayer + baseLayer.lUrl,
+ // });
// 鍒濆鍖栬瑙�
this.setdefaultPerspective();
},
setdefaultPerspective() {
mapConfig.sertCameraTo(mapData.defaultPerspective);
},
+ addMapClick() {
+ // 涓簐iewer娣诲姞榧犳爣鐐瑰嚮浜嬩欢鐩戝惉
+ Viewer.screenSpaceEventHandler.setInputAction((event) => {
+ // 鑾峰彇鐐瑰嚮浣嶇疆鐨勪笘鐣屽潗鏍�
+ var pickedFeature = Viewer.scene.pick(event.position);
+ if (Cesium.defined(pickedFeature)) {
+ console.log(pickedFeature);
+ if (pickedFeature.id) {
+ const obj = pickedFeature.id;
+ var arr=[];
+ for(var key in obj){
+ arr.push({
+ name: key,
+ val: obj[key],
+ });
+ store.dispatch('mapLayers/changeMapInfo', []);
+ if (arr.length > 0) {
+ store.dispatch('mapLayers/changeMapInfo', arr);
+ }
+ }
+ }
+ }
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+ },
};
export default mapInit;
diff --git a/src/assets/js/mapSdk/mapConfig.js b/src/assets/js/mapSdk/mapConfig.js
index b558605..08b2cb8 100644
--- a/src/assets/js/mapSdk/mapConfig.js
+++ b/src/assets/js/mapSdk/mapConfig.js
@@ -7,29 +7,31 @@
y: res.y,
z: res.z,
},
+ orientation: {
+ heading:res.heading,
+ pitch: res.pitch,
+ roll: res.roll,
+ },
});
},
- userSceneFlyTo(res){
+ userSceneFlyTo(res) {
const options = {
duration: 2,
- offset: new SmartEarth.Cesium.HeadingPitchRange(1.0, -0.3, 1000)
+ offset: new SmartEarth.Cesium.HeadingPitchRange(1.0, -0.3, 1000),
};
- earthCtrl.userScene.flyTo(res,options);
+ earthCtrl.userScene.flyTo(res, options);
},
getModelMatrix(res) {
var headingPitchRoll = new Cesium.HeadingPitchRoll(res.heading, res.pitch, res.roll);
var position = Cesium.Cartesian3.fromDegrees(res.longitude, res.latitude, res.altitude);
- var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
- position, headingPitchRoll, Cesium.Ellipsoid.WGS84,
- Cesium.Transforms.eastNorthUpToFixedFrame,
- new Cesium.Matrix4());
+ var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, headingPitchRoll, Cesium.Ellipsoid.WGS84, Cesium.Transforms.eastNorthUpToFixedFrame, new Cesium.Matrix4());
return modelMatrix;
},
- getWKTParse(res){
- return WKT.parse(res)
+ getWKTParse(res) {
+ return WKT.parse(res);
},
- getWKTConvert(res){
- return WKT.convert(res)
- }
+ getWKTConvert(res) {
+ return WKT.convert(res);
+ },
};
-export default mapConfig;
\ No newline at end of file
+export default mapConfig;
diff --git a/src/assets/js/mapSdk/mapData.js b/src/assets/js/mapSdk/mapData.js
index 7511bea..630e861 100644
--- a/src/assets/js/mapSdk/mapData.js
+++ b/src/assets/js/mapSdk/mapData.js
@@ -208,9 +208,12 @@
// 榛樿瑙嗚
defaultPerspective: {
- x: -1936842.4744685106,
- y: 4665314.067108395,
- z: 3898603.230008434,
+ x: -1934358.744458335,
+ y: 4659454.007273499,
+ z: 3890986.719081069,
+ heading: 0.3383482086332279, // 鏂瑰悜
+ pitch: -0.4301190518998017, // 鍊炬枩瑙掑害
+ roll: 6.283178115297752,
},
// 鍥惧眰绠＄悊
layerData: {
diff --git a/src/assets/js/mapSdk/mapServe.js b/src/assets/js/mapSdk/mapServe.js
index cefdd3b..80221cb 100644
--- a/src/assets/js/mapSdk/mapServe.js
+++ b/src/assets/js/mapSdk/mapServe.js
@@ -70,7 +70,7 @@
const url = '/glb/' + item.type + '.glb';
modelLayer.add(
Cesium.Model.fromGltf({
- id: item.id,
+ id: item,
url: url,
scale: 1,
minimumPixelSize: 20,
@@ -94,7 +94,7 @@
const url = '/glb/' + item.type + '.glb';
modelLayer.add(
Cesium.Model.fromGltf({
- id: item.id,
+ id: item,
url: url,
scale: 1,
minimumPixelSize: 20,
diff --git a/src/components/RuoYi/Msgger/index.vue b/src/components/RuoYi/Msgger/index.vue
index 3fd0286..dfe2880 100644
--- a/src/components/RuoYi/Msgger/index.vue
+++ b/src/components/RuoYi/Msgger/index.vue
@@ -1,32 +1,116 @@
<template>
- <div class="msgBox" @click="setShowMenuClick">
+ <div class="msgBox" @click.stop="setShowMenuClick(true)">
<i style="font-size: 20px;" class="el-icon-chat-line-round"></i>
<el-badge v-show="msgCount > 0" :value="msgCount" class="item">
</el-badge>
+ <el-dialog title="寮傚父淇℃伅" :visible.sync="dialogVisible" width="30%" :show-close="false">
+ <el-table :data="msgData" style="width: 100%">
+ <el-table-column prop="msg" label="璁惧鍚嶇О">
+ </el-table-column>
+ <el-table-column prop="point" label="璁惧浣嶇疆">
+ </el-table-column>
+ <el-table-column label="鎿嶄綔" width="100">
+ <template slot-scope="scope">
+ <el-button @click="handleClick(scope.row)" type="text" size="small">鏌ョ湅</el-button>
+ <el-button @click="handleClick2(scope.row)" type="text" size="small">鍒嗗彂</el-button></el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <span slot="footer" class="dialog-footer">
+ <el-button @click.stop="dialogVisible = false">鍏� 闂�</el-button>
+ </span>
+ <el-dialog width="30%" title="浣嶇疆" :visible.sync="innerVisible" append-to-body>
+ <div style="height: 540px">
+ <olMap v-if="innerVisible" :parentData="parentData"></olMap>
+ </div>
+ </el-dialog>
+ </el-dialog>
</div>
</template>
<script>
+
+import olMap from '@/components/mapOl/index.vue';
+
export default {
name: 'RouYiMsg',
+ components: {
+ olMap
+ },
data() {
return {
- msgCount: 0,
- dialogVisible: false
+ msgCount: 1,
+ dialogVisible: false,
+ dialogFlag: false,
+ wsSocket: null,
+ innerVisible: false,
+ msgData: [{
+ msg: "鍙樺帇鍣ㄦ晠闅�",
+ point: "POINT (112.56978672907 37.8558881392881)"
+ }],
+ parentData: null,
}
},
methods: {
- setShowMenuClick() {
+ handleClick2(row) {
+ this.$message({
+ showClose: true,
+ message: '宸插垎鍙戝埌鐩稿叧璐熻矗浜�',
+ type: 'success'
+ });
+ },
+ handleClick(row) {
+ const obj = {
+ val: row,
+ type: 'point',
+ isShow: false,
+ }
+ this.parentData = JSON.stringify([obj])
+ this.innerVisible = true
+ },
+ setShowMenuClick(res) {
+
this.dialogVisible = true
+
+
},
handleClose() {
this.dialogVisible = false
- }
+ },
+ createSocket() {
+ this.wsSocket = new WebSocket(config.pySocket);
+ this.wsSocket.onopen = (event) => {
+ console.log('WebSocket杩炴帴鎴愬姛');
+ };
+ this.wsSocket.onmessage = (event) => {
+
+ if (event.data != "杩炴帴鎴愬姛") {
+ const obj = JSON.parse(event.data);
+ if (obj.mes) {
+ this.setShowMsg(obj)
+ }
+ }
+ // 澶勭悊鎺ユ敹鍒扮殑娑堟伅
+ };
+ },
+ setShowMsg(res) {
+ const filter = this.msgData.filter(item => {
+ if (item.msg == res.msg && item.point == res.point) {
+ return item;
+ }
+ })
+ if (filter.length > 0) return;
+ this.msgData.push(res)
+ this.msgCount = this.msgData.length;
+
+ },
},
mounted() {
- console.log(123);
+ if (!this.wsSocket) {
+ this.createSocket();
+ }
},
}
diff --git a/src/components/mapOl/index.vue b/src/components/mapOl/index.vue
index 6537e15..a510f9e 100644
--- a/src/components/mapOl/index.vue
+++ b/src/components/mapOl/index.vue
@@ -8,7 +8,7 @@
<el-form-item label="绾害:">
{{ formInline.lat }}
</el-form-item>
- <el-form-item>
+ <el-form-item v-show="isShow">
<el-button type="success" icon="el-icon-plus" @click="drowPoint"></el-button>
<el-button type="danger" icon="el-icon-delete" @click="clearDrawPoint"></el-button>
</el-form-item>
@@ -34,6 +34,7 @@
import mapData from '@/assets/js/mapSdk/mapData.js';
import mapConfig from '../../assets/js/mapSdk/mapConfig';
import * as turf from '@turf/turf'
+import LineString from 'ol/geom/LineString';
export default {
props: {
parentData: {
@@ -44,6 +45,7 @@
},
data() {
return {
+ isShow: true,
mapol: null,
drawLayer: null,
formInline: {
@@ -59,17 +61,31 @@
initOlMap() {
const baseLayer = mapData.baseLayer;
const vecUrl = baseLayer.sUrl + baseLayer.vecLayer + baseLayer.lUrl
- var vectorLayer = new TileLayer({
- source: new XYZ({
- url: vecUrl + config.tdToken,
+ const geo= config.geoServer;
+ // var vectorLayer = new TileLayer({
+ // source: new XYZ({
+ // url: vecUrl + config.tdToken,
+ // }),
+ // });
+ // const cvaUrl = baseLayer.sUrl + baseLayer.cvaLayer + baseLayer.lUrl
+ // var vectorLayer1 = new TileLayer({
+ // source: new XYZ({
+ // url: cvaUrl + config.tdToken,
+ // }),
+ // });
+ var layer2 = new Image({
+ name: "Wms_Layer",
+ source: new ImageWMS({
+ crossOrigin: "anonymous",
+ url: geo.url + geo.wms,
+ params: {
+ FORMAT: "image/png",
+ VERSION: "1.1.1",
+ LAYERS: geo.layers[0],
+ },
}),
});
- const cvaUrl = baseLayer.sUrl + baseLayer.cvaLayer + baseLayer.lUrl
- var vectorLayer1 = new TileLayer({
- source: new XYZ({
- url: cvaUrl + config.tdToken,
- }),
- });
+ this.mapol.addLayer(layer2);
this.mapol = new Map({
target: 'mapView',
layers: [vectorLayer, vectorLayer1],
@@ -85,23 +101,84 @@
name: "Wms_Layer",
source: new ImageWMS({
crossOrigin: "anonymous",
- url: config.geoServer.url + config.geoServer.wms,
+ url: geo.url + geo.wms,
params: {
FORMAT: "image/png",
VERSION: "1.1.1",
- LAYERS: 'sxpw:sxdwx',
+ LAYERS: geo.layers[1],
},
}),
});
this.mapol.addLayer(layer2);
if (this.parentData) {
- const obj = mapConfig.getWKTParse(this.parentData)
- this.formInline = {
- lon: obj.coordinates[0],
- lat: obj.coordinates[1],
+ if (this.parentData.indexOf('type') > -1) {
+ const data = JSON.parse(this.parentData)[0];
+ this.isShow = data.isShow
+ if (data.type == 'point') {
+ const obj = mapConfig.getWKTParse(data.val.point)
+ this.formInline = {
+ lon: obj.coordinates[0],
+ lat: obj.coordinates[1],
+ }
+ this.addPointData(obj);
+ } else if (data.type == 'line') {
+ const obj = mapConfig.getWKTParse(data.val.f_location)
+ this.formInline = {
+ lon: obj.coordinates[0],
+ lat: obj.coordinates[1],
+ }
+ this.addPointData(obj);
+ const line = mapConfig.getWKTParse(data.val.re_position)
+ this.addLineData(line)
+ }
+
+ } else {
+ const obj = mapConfig.getWKTParse(this.parentData)
+ this.formInline = {
+ lon: obj.coordinates[0],
+ lat: obj.coordinates[1],
+ }
+ this.addPointData(obj);
}
- this.addPointData(obj);
+
+
}
+ },
+ addLineData(res) {
+ var coord = res.coordinates;
+ var geom = [];
+ coord.filter(i => {
+ geom.push(transform(
+ i,
+ 'EPSG:4326',
+ 'EPSG:3857'
+ ))
+ })
+ var feature = new Feature({
+ type: 'LineString',
+ geometry: new LineString(geom),
+ });
+ feature.setStyle(
+ new Style({
+ stroke: new Stroke({
+ color: 'blue',
+ width: 3,
+ }),
+
+ })
+ );
+ const extent = feature.getGeometry().getExtent()
+ var source = new VectorSource();
+ source.addFeature(feature);
+ // 鍒涘缓绾跨殑鐭㈤噺鍥惧眰
+ var vectorLayer = new VectorLayer();
+ vectorLayer.setSource(source);
+ this.mapol.addLayer(vectorLayer);
+ this.mapol.getView().fit(extent, {
+ size: this.mapol.getSize(),
+ padding: [100, 100,200,100], // 鍥涗釜鏂瑰悜鐨勮竟璺濓紝鍙��
+ constrainResolution: false, // 鏄惁闄愬埗鍒嗚鲸鐜囷紝鍙��
+ });
},
addPointData(res) {
const coord = res.coordinates;
@@ -162,7 +239,7 @@
this.formInline.lon = parseFloat(a1[0]).toFixed(6);
this.formInline.lat = parseFloat(a1[1]).toFixed(6);
var point = turf.point([this.formInline.lon, this.formInline.lat]);
- const gPoint= mapConfig.getWKTConvert(point.geometry)
+ const gPoint = mapConfig.getWKTConvert(point.geometry)
this.$emit('childData', gPoint);
this.mapol.removeInteraction(this.draw);
});
diff --git a/src/views/dataManager/equipMante/AddOrUpdate.vue b/src/views/dataManager/equipMante/AddOrUpdate.vue
index 1c5b69e..8cdd85b 100644
--- a/src/views/dataManager/equipMante/AddOrUpdate.vue
+++ b/src/views/dataManager/equipMante/AddOrUpdate.vue
@@ -1,55 +1,68 @@
<template>
- <el-dialog :title="!dataForm.id ? '鏂板' : '淇敼'" :close-on-click-modal="false" :visible.sync="visible">
+ <el-dialog :before-close="closeHandler" :title="!dataForm.id ? '鏂板' : '淇敼'" :close-on-click-modal="false" :visible.sync="visible">
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
label-width="120px">
- <el-form-item label="瀹㈡埛鍚嶇О" prop="cName">
- <el-input v-model="dataForm.cName" placeholder="瀹㈡埛鍚嶇О"></el-input>
+ <el-form-item label="瀹㈡埛鍚嶇О" prop="c_name">
+ <el-input v-model="dataForm.c_name" placeholder="瀹㈡埛鍚嶇О"></el-input>
</el-form-item>
- <el-form-item label="鏁呴殰鍦扮偣鍚嶇О" prop="fName">
- <el-input v-model="dataForm.fName" placeholder="鏁呴殰鍦扮偣鍚嶇О"></el-input>
+ <el-form-item label="鏁呴殰鍦扮偣鍚嶇О" prop="f_name">
+ <el-input v-model="dataForm.f_name" placeholder="鏁呴殰鍦扮偣鍚嶇О"></el-input>
</el-form-item>
- <el-form-item label="鏁呴殰鍦扮偣缁忕含搴�" prop="fLocation">
- <el-input v-model="dataForm.fLocation" placeholder="鏁呴殰鍦扮偣缁忕含搴�"></el-input>
+ <el-form-item label="鏁呴殰鍦扮偣缁忕含搴�" prop="f_location">
+ <el-input v-model="dataForm.f_location" placeholder="鏁呴殰鍦扮偣缁忕含搴�"></el-input>
</el-form-item>
- <el-form-item label="鑱旂郴鐢佃瘽" prop="fPhone">
- <el-input v-model="dataForm.fPhone" placeholder="鑱旂郴鐢佃瘽"></el-input>
+ <el-form-item label="鑱旂郴鐢佃瘽" prop="f_phone">
+ <el-input v-model="dataForm.f_phone" placeholder="鑱旂郴鐢佃瘽"></el-input>
</el-form-item>
- <el-form-item label="鏁呴殰鏃堕棿" prop="fDate">
- <el-input v-model="dataForm.fDate" placeholder="鏁呴殰鏃堕棿"></el-input>
+ <el-form-item label="鏁呴殰鏃堕棿" prop="f_date">
+ <el-date-picker style="width:100%" @change="handleDateChange" v-model="dataForm.f_date" type="datetime"
+ placeholder="閫夋嫨鏁呴殰鏃堕棿">
+ </el-date-picker>
+ <!-- <el-input v-model="dataForm.f_date" placeholder="鏁呴殰鏃堕棿"></el-input> -->
</el-form-item>
- <el-form-item label="鎶ヤ慨鏂瑰紡" prop="fType">
- <el-input v-model="dataForm.fType" placeholder="鎶ヤ慨鏂瑰紡"></el-input>
+ <el-form-item label="鎶ヤ慨鏂瑰紡" prop="f_type">
+ <el-input v-model="dataForm.f_type" placeholder="鎶ヤ慨鏂瑰紡"></el-input>
</el-form-item>
- <el-form-item label="璁板綍浜�" prop="fMan">
- <el-input v-model="dataForm.fMan" placeholder="璁板綍浜�"></el-input>
+ <el-form-item label="璁板綍浜�" prop="f_man">
+ <el-input v-model="dataForm.f_man" placeholder="璁板綍浜�"></el-input>
</el-form-item>
- <el-form-item label="鎶ヤ慨鍐呭" prop="fContent">
- <el-input v-model="dataForm.fContent" placeholder="鎶ヤ慨鍐呭"></el-input>
+ <el-form-item label="鎶ヤ慨鍐呭" prop="f_content">
+ <el-input v-model="dataForm.f_content" placeholder="鎶ヤ慨鍐呭"></el-input>
+
</el-form-item>
- <el-form-item label="鍒拌揪鐜板満鏃堕棿" prop="rDate">
- <el-input v-model="dataForm.rDate" placeholder="鍒拌揪鐜板満鏃堕棿"></el-input>
+ <el-form-item label="鍒拌揪鐜板満鏃堕棿" prop="r_date">
+ <!-- <el-input v-model="dataForm.r_date" placeholder="鍒拌揪鐜板満鏃堕棿"></el-input> -->
+ <el-date-picker style="width:100%" @change="handleDateChange" v-model="dataForm.r_date" type="datetime"
+ placeholder="閫夋嫨杈剧幇鍦烘椂闂�">
+ </el-date-picker>
</el-form-item>
- <el-form-item label="缁翠慨缁撴潫鏃堕棿" prop="reDate">
- <el-input v-model="dataForm.reDate" placeholder="缁翠慨缁撴潫鏃堕棿"></el-input>
+ <el-form-item label="缁翠慨缁撴潫鏃堕棿" prop="re_date">
+ <!-- <el-input v-model="dataForm.re_date" placeholder="缁翠慨缁撴潫鏃堕棿"></el-input> -->
+ <el-date-picker style="width:100%" @change="handleDateChange" v-model="dataForm.re_date" type="datetime"
+ placeholder="閫夋嫨缁翠慨缁撴潫鏃堕棿">
+ </el-date-picker>
</el-form-item>
- <el-form-item label="缁翠慨杞ㄨ抗" prop="rePosition">
- <el-input v-model="dataForm.rePosition" placeholder="缁翠慨杞ㄨ抗"></el-input>
+ <el-form-item label="缁翠慨杞ㄨ抗" prop="re_position">
+ <el-input v-model="dataForm.re_position" placeholder="缁翠慨杞ㄨ抗"></el-input>
</el-form-item>
- <el-form-item label="缁翠慨瑙嗛" prop="reVideo">
- <el-input v-model="dataForm.reVideo" placeholder="缁翠慨瑙嗛"></el-input>
+ <el-form-item label="缁翠慨瑙嗛" prop="re_video">
+ <el-input v-model="dataForm.re_video" placeholder="缁翠慨瑙嗛"></el-input>
</el-form-item>
- <el-form-item label="瀹㈡埛璇勪环" prop="reEvaluation">
- <el-input v-model="dataForm.reEvaluation" placeholder="瀹㈡埛璇勪环"></el-input>
+ <el-form-item label="瀹㈡埛璇勪环" prop="re_evaluation">
+ <el-input v-model="dataForm.re_evaluation" placeholder="瀹㈡埛璇勪环"></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
- <el-button @click="visible = false">鍙栨秷</el-button>
+ <el-button @click="closeHandler">鍙栨秷</el-button>
<el-button type="primary" @click="dataFormSubmit()">纭畾</el-button>
</span>
</el-dialog>
</template>
<script>
+
+// POINT (112.56978672907 37.8558881392881)
+// LINESTRING (112.56610139210423 37.87199523758289, 112.56777608401627 37.87190547038274, 112.56775238085118 37.862274562096125, 112.56829544919117 37.862166910066264, 112.56829523145755 37.85994297223096, 112.56836294214209 37.858185324275034, 112.56874759228823 37.858023871243766, 112.56890584253452 37.85671457963388, 112.57008241825407 37.85633780011934, 112.56994660283333 37.85596117981906)
import { faultreport_save, faultreport_update } from '@/api/mapView/peiwang.js';
export default {
data() {
@@ -57,68 +70,123 @@
visible: false,
dataForm: {
id: undefined,
- cName: '',
- fName: '',
- fLocation: '',
- fPhone: '',
- fDate: '',
- fType: '',
- fMan: '',
- fContent: '',
- rDate: '',
- reDate: '',
- rePosition: '',
- reVideo: '',
- reEvaluation: ''
+ c_name: '',
+ f_name: '',
+ f_location: '',
+ f_phone: '',
+ f_date: '',
+ f_type: '',
+ f_man: '',
+ f_content: '',
+ r_date: '',
+ re_date: '',
+ re_position: '',
+ re_video: '',
+ re_evaluation: ''
},
+ objData: null,
dataRule: {
- cName: [
+ c_name: [
{ required: true, message: '瀹㈡埛鍚嶇О涓嶈兘涓虹┖', trigger: 'blur' }
],
- fName: [
+ f_name: [
{ required: true, message: '鏁呴殰鍦扮偣鍚嶇О涓嶈兘涓虹┖', trigger: 'blur' }
],
- fLocation: [
+ f_location: [
{ required: true, message: '鏁呴殰鍦扮偣缁忕含搴︿笉鑳戒负绌�', trigger: 'blur' }
],
- fPhone: [
+ f_phone: [
{ required: true, message: '鑱旂郴鐢佃瘽涓嶈兘涓虹┖', trigger: 'blur' }
],
- fDate: [
+ f_date: [
{ required: true, message: '鏁呴殰鏃堕棿涓嶈兘涓虹┖', trigger: 'blur' }
],
- fType: [
+ f_type: [
{ required: true, message: '鎶ヤ慨鏂瑰紡涓嶈兘涓虹┖', trigger: 'blur' }
],
- fMan: [
+ f_man: [
{ required: true, message: '璁板綍浜轰笉鑳戒负绌�', trigger: 'blur' }
],
- fContent: [
+ f_content: [
{ required: true, message: '鎶ヤ慨鍐呭涓嶈兘涓虹┖', trigger: 'blur' }
],
- rDate: [
+ r_date: [
{ required: true, message: '鍒拌揪鐜板満鏃堕棿涓嶈兘涓虹┖', trigger: 'blur' }
],
- reDate: [
+ re_date: [
{ required: true, message: '缁翠慨缁撴潫鏃堕棿涓嶈兘涓虹┖', trigger: 'blur' }
],
- rePosition: [
+ re_position: [
{ required: true, message: '缁翠慨杞ㄨ抗涓嶈兘涓虹┖', trigger: 'blur' }
],
- reVideo: [
- { required: true, message: '缁翠慨瑙嗛涓嶈兘涓虹┖', trigger: 'blur' }
- ],
- reEvaluation: [
- { required: true, message: '瀹㈡埛璇勪环涓嶈兘涓虹┖', trigger: 'blur' }
- ]
+
}
}
},
methods: {
+ handleDateChange(value, picker) {
+ return this.getNowTime(value)
+ },
+ getNowTime(res) {
+ var now = null;
+ if (res) {
+ now = new Date(res);
+ } else {
+ now = new Date();
+ }
+ const year = now.getFullYear();
+ const month = now.getMonth() + 1; // 鏈堜唤鏄粠0寮�濮嬬殑
+ const day = now.getDate();
+ const hours = now.getHours();
+ const minutes = now.getMinutes();
+ const seconds = now.getSeconds();
+ // 鏍煎紡鍖栨湀浠藉拰鏃ユ湡锛屼繚鎸佷袱浣嶆暟
+ const formattedMonth = month < 10 ? '0' + month : month;
+ const formattedDay = day < 10 ? '0' + day : day;
+ const formattedHours = hours < 10 ? '0' + hours : hours;
+ const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
+ const formattedSeconds = seconds < 10 ? '0' + seconds : seconds;
+ return `${year}-${formattedMonth}-${formattedDay} ${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
+
+ },
init(response) {
this.visible = true
+ this.objData = null
+ this.dataForm = {
+ id: undefined,
+ c_name: '',
+ f_name: '',
+ f_location: '',
+ f_phone: '',
+ f_date: this.getNowTime(),
+ f_type: '',
+ f_man: '',
+ f_content: '',
+ r_date: this.getNowTime(),
+ re_date: this.getNowTime(),
+ re_position: '',
+ re_video: '',
+ re_evaluation: ''
+ }
if (response) {
- this.dataForm = { ...response }
+
+ this.objData = { ...response }
+ this.dataForm = {
+ id: this.objData.id,
+ c_name: this.objData.c_name,
+ f_name: this.objData.f_name,
+ f_location: this.objData.f_location,
+ f_phone: this.objData.f_phone,
+ f_date: this.objData.f_date,
+ f_type: this.objData.f_type,
+ f_man: this.objData.f_man,
+ f_content: this.objData.f_content,
+ r_date: this.objData.r_date,
+ re_date: this.objData.re_date,
+ re_position: this.objData.re_position,
+ re_video: this.objData.re_video,
+ re_evaluation: this.objData.re_evaluation
+ }
}
},
@@ -127,32 +195,75 @@
this.$refs['dataForm'].validate((valid) => {
if (valid) {
if (this.dataForm.id) {
- this.setEditReport();
+ this.setEditReport(valid);
} else {
this.setSaveReport();
}
}
})
},
+ formateDate(res) {
+
+ if (typeof res == 'string') return res;
+ return this.getNowTime(res)
+ },
+ closeHandler(){
+ this.visible = false
+ this.$emit('refreshDataList')
+ },
setSaveReport() {
- faultreport_save(this.dataForm).then(response => {
- console.log(response);
- // this.$message({
- // message: '鎿嶄綔鎴愬姛',
- // type: 'success',
- // duration: 1500,
- // onClose: () => {
- // this.visible = false
- // this.$emit('refreshDataList')
- // }
- // })
+ const obj = { ...this.dataForm }
+ obj.f_date = this.formateDate(obj.f_date)
+ obj.r_date = this.formateDate(obj.r_date)
+ obj.re_date = this.formateDate(obj.re_date)
+ faultreport_save(obj).then(response => {
+ this.closeHandler();
+ if (response.data.msg == 'success') {
+ this.$message({
+ message: '鎿嶄綔鎴愬姛',
+ type: 'success',
+ duration: 1000,
+
+ })
+ } else {
+ this.$message({
+ message: '鎿嶄綔澶辫触',
+ type: 'warning',
+ duration: 1000,
+
+ })
+ }
+
})
},
setEditReport() {
- faultreport_update(this.dataForm).then(response => {
- console.log(response);
+ const obj = { ...this.dataForm }
+ obj.f_date = this.formateDate(obj.f_date)
+ obj.r_date = this.formateDate(obj.r_date)
+ obj.re_date = this.formateDate(obj.re_date)
+ faultreport_update(obj).then(response => {
+ this.closeHandler();
+ if (response.data.msg == 'success') {
+ this.$message({
+ message: '鎿嶄綔鎴愬姛',
+ type: 'success',
+ duration: 1000,
+
+ })
+ } else {
+ this.$message({
+ message: '鎿嶄綔澶辫触',
+ type: 'warning',
+ duration: 1000,
+
+ })
+ }
})
+
+
+
+
},
diff --git a/src/views/dataManager/equipMante/index.vue b/src/views/dataManager/equipMante/index.vue
index 1d5633d..500dbbe 100644
--- a/src/views/dataManager/equipMante/index.vue
+++ b/src/views/dataManager/equipMante/index.vue
@@ -11,7 +11,7 @@
<div>
<el-button plain size="small" @click="getDataList()">鏌ヨ</el-button>
<el-button plain size="small" type="primary" @click="addOrUpdateHandle()">鏂板</el-button>
- <el-button plain size="small" type="danger"
+ <el-button plain size="small" @click="deleteHandleList" type="danger"
:disabled="dataListSelections.length <= 0">鎵归噺鍒犻櫎</el-button>
</div>
</div>
@@ -53,8 +53,9 @@
</el-table-column>
<el-table-column fixed="right" header-align="center" align="center" width="150" label="鎿嶄綔">
<template slot-scope="scope">
- <el-button type="text" size="small">淇敼</el-button>
- <el-button type="text" size="small">鍒犻櫎</el-button>
+ <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row)">淇敼</el-button>
+ <el-button type="text" size="small" @click="deleteHandleRow(scope.row)">鍒犻櫎</el-button>
+ <el-button type="text" size="small" @click="showHandleRow(scope.row)">棰勮</el-button>
</template>
</el-table-column>
</el-table>
@@ -64,16 +65,23 @@
</el-card>
<!-- 寮圭獥, 鏂板 / 淇敼 -->
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+ <el-dialog width="30%" :title="showTitle" :visible.sync="innerVisible" append-to-body>
+ <div style="height: 540px">
+ <olMap v-if="innerVisible" :parentData="parentData"></olMap>
+ </div>
+ </el-dialog>
</div>
</template>
<script>
-import { faultreport_list } from '@/api/mapView/peiwang.js';
+import { faultreport_query, faultreport_delete } from '@/api/mapView/peiwang.js';
import AddOrUpdate from './AddOrUpdate.vue';
+import olMap from '@/components/mapOl/index.vue';
export default {
name: "equipMante",
components: {
- AddOrUpdate
+ AddOrUpdate,
+ olMap
},
data() {
return {
@@ -91,27 +99,43 @@
dataList: [],
total: 0,
addOrUpdateVisible: false,
+ showData: null,
+ innerVisible: false,
+ parentData: null,
+ showTitle:null,
}
},
mounted() {
this.getDataList();
},
methods: {
+ showHandleRow(row) {
+ this.showData = { ...row }
+ const obj = {
+ val: this.showData,
+ type: 'line',
+ isShow: false,
+ }
+ this.showTitle= row['c_name']
+ this.parentData = JSON.stringify([obj])
+ this.innerVisible = true;
+ },
addOrUpdateHandle(res) {
this.addOrUpdateVisible = true
this.$nextTick(() => {
- this.$refs.addOrUpdate.init(res)
+ this.$refs.addOrUpdate.init(res)
})
},
+
selectionChangeHandle(res) {
this.dataListSelections = res;
},
getDataList() {
this.dataListLoading = true;
- faultreport_list({
+ faultreport_query({
page: this.queryParams.pageIndex,
limit: this.queryParams.pageSize,
- key: this.queryParams.name,
+ c_name: this.dataForm.key,
}).then(response => {
this.dataListLoading = false;
if (response.status != 200) return
@@ -119,8 +143,39 @@
this.total = obj.totalCount;
this.dataList = obj.list;
})
+ },
+
+ deleteHandleRow(res) {
+ this.deleteHandle([res.id])
+ },
+ deleteHandleList() {
+ var ids = this.dataListSelections.map(item => {
+ return item.id
+ })
+ this.deleteHandle(ids)
+ },
+ deleteHandle(res) {
+ faultreport_delete(res).then(response => {
+ if (response.data.msg == 'success') {
+ this.$message({
+ message: '鎿嶄綔鎴愬姛',
+ type: 'success',
+ duration: 1000,
+
+ })
+ } else {
+ this.$message({
+ message: '鎿嶄綔澶辫触',
+ type: 'warning',
+ duration: 1000,
+
+ })
+ }
+ this.getDataList();
+
+ })
}
- }
+ },
}
</script>
diff --git a/src/views/visualization/index.vue b/src/views/visualization/index.vue
index d54d49d..2fe2f99 100644
--- a/src/views/visualization/index.vue
+++ b/src/views/visualization/index.vue
@@ -3,10 +3,10 @@
<div class="title"></div>
<mapView></mapView>
<div class="leftMenu">
- <left-menu></left-menu>
+ <left-menu :leftChartData="leftChartData"></left-menu>
</div>
<div class="rightMenu">
- <right-menu></right-menu>
+ <right-menu :rightChartData="rightChartData"></right-menu>
</div>
<div class="bottomMenu">
<bottomMenu @childData="childData"></bottomMenu>
@@ -42,6 +42,7 @@
import analysis from '@/views/visual/analysis/index.vue'
import lineLoss from './lineLoss.vue';
import statistics from '@/views/visual/statistics/index.vue'
+import { type } from 'jquery';
export default {
components: {
mapView, leftMenu,
@@ -50,12 +51,50 @@
data() {
return {
isShow: null,
- showInfo: false
+ showInfo: false,
+ wsSocket: null,
+ rightChartData: {},
+ leftChartData:{},
}
},
+ beforeDestroy() {
+ if (this.wsSocket) {
+ this.wsSocket.onclose = () => {
+ console.log('WebSocket杩炴帴鍏抽棴');
+ this.wsSocket = null
+ };
+ }
+
+ },
mounted() {
+ if (!this.wsSocket) {
+ this.createSocket();
+ }
},
methods: {
+ createSocket() {
+ this.wsSocket = new WebSocket(config.pySocket);
+ this.wsSocket.onopen = (event) => {
+ console.log('WebSocket杩炴帴鎴愬姛');
+ };
+ this.wsSocket.onmessage = (event) => {
+ // console.log('Received message:', event.data);
+
+ if (event.data != "杩炴帴鎴愬姛") {
+ const obj = JSON.parse(event.data)
+
+
+ this.leftChartData = {
+ type: 'left1',
+ val: obj
+ }
+ }
+
+
+
+ // 澶勭悊鎺ユ敹鍒扮殑娑堟伅
+ };
+ },
childData(res) {
if (!res) return
this.showInfo = true;
diff --git a/src/views/visualization/leftMenu.vue b/src/views/visualization/leftMenu.vue
index 668da82..8c3d8c2 100644
--- a/src/views/visualization/leftMenu.vue
+++ b/src/views/visualization/leftMenu.vue
@@ -2,6 +2,9 @@
<div class="leftMnu">
<div class="menuBox">
<div class="aside-title">{{ title.t1 }}</div>
+ <div class="echartBox">
+ <div id="letftEchart1" class="chartBox"></div>
+ </div>
</div>
<div class="menuBox">
<div class="aside-title">{{ title.t2 }}</div>
@@ -13,13 +16,103 @@
</template>
<script>
+import * as echarts from 'echarts';
export default {
+ props: {
+ leftChartData: {
+ type: Object,
+ required: true
+ },
+ },
data() {
return {
title: {
t1: 'xxx',
t2: 'XXXX',
t3: 'xxxxx'
+ },
+ myLeftChart1: null,
+ leftChartOption: {
+ lenData: [],
+ xData: [],
+ serData: [],
+ },
+ }
+ },
+ watch: {
+ leftChartData: {
+ deep: true,
+ handler(res) {
+ if (res) {
+ if (res.type == "left1") {
+ this.setLeftChart1(res.val)
+ }
+ }
+
+ }
+ }
+ },
+ methods: {
+ setLeftChart1(res) {
+ console.log(res);
+
+ if (!this.myLeftChart1) {
+ this.myLeftChart1 = echarts.init(document.getElementById('letftEchart1'));
+ }
+ if (this.leftChartOption.lenData.length == 0) {
+ this.title.t1 = res.head[1]
+ this.leftChartOption.lenData.push(res.head[0])
+ const colors=['#67C23A','#E6A23C','#F56C6C']
+ for (var i = 0; i < 3; i++) {
+ this.leftChartOption.serData.push({
+ name: res.head[i+1],
+ type: 'line',
+ stack: 'Total',
+ data: [],
+ lineStyle: {
+ color: colors[i], // 鎶樼嚎棰滆壊
+
+ }
+ })
+ }
+ }
+ var option = this.getChartOption(res)
+ this.myLeftChart1 && this.myLeftChart1.setOption(option);
+ },
+ getChartOption(res) {
+ for(var i = 0;i<3;i++){
+ this.leftChartOption.serData[i].data.push(res.data[i+1])
+ }
+
+
+ this.leftChartOption.xData.push(res.data[0])
+ return {
+ legend: {
+ show: false
+ },
+
+ tooltip: {
+ trigger: 'axis'
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: this.leftChartOption.xData,
+ axisLine: {
+ lineStyle: {
+ color: 'white' // 璁剧疆涓虹孩鑹�
+ }
+ }
+ },
+ yAxis: {
+ type: 'value',
+ axisLine: {
+ lineStyle: {
+ color: 'white' // 璁剧疆涓虹孩鑹�
+ }
+ }
+ },
+ series: this.leftChartOption.serData
}
}
}
@@ -40,6 +133,8 @@
background: url(~@/assets/images/Screen/chartbg.png);
background-size: 100% 100%;
background-repeat: no-repeat;
+ display: flex;
+ flex-direction: column;
.aside-title {
box-sizing: border-box;
@@ -55,6 +150,19 @@
background-size: 100% 100%;
background-repeat: no-repeat;
}
+
+ .echartBox {
+ flex: 1;
+ padding: 5px;
+ position: relative;
+
+ .chartBox {
+ width: calc(100% - 10px);
+ height: calc(100% - 10px);
+
+ position: absolute;
+ }
+ }
}
}
</style>
\ No newline at end of file
diff --git a/src/views/visualization/rightMenu.vue b/src/views/visualization/rightMenu.vue
index f13926a..c2fa490 100644
--- a/src/views/visualization/rightMenu.vue
+++ b/src/views/visualization/rightMenu.vue
@@ -25,12 +25,31 @@
import * as echarts from 'echarts';
export default {
+ props: {
+ rightChartData: {
+ type: Object,
+ required: true
+ },
+ },
data() {
return {
title: {
t1: 'xxx',
t2: 'XXXX',
t3: 'xxxxx'
+ }
+ }
+ },
+ watch: {
+ rightChartData: {
+ deep: true,
+ handler(val) {
+ if (val) {
+ if(val.type=='"right1"'){
+
+ }
+ }
+
}
}
},
@@ -131,7 +150,7 @@
for (let i = 0; i < data.length; i++) {
dataShadow.push(yMax);
}
- var option2 = {
+ var option2 = {
title: {
},
@@ -161,7 +180,7 @@
axisLabel: {
color: '#fff'
},
-
+
},
dataZoom: [
{
--
Gitblit v1.9.3