From 6e0ef2d1f836680e6a55b7fc2d813b759038c144 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期二, 25 十月 2022 15:35:34 +0800
Subject: [PATCH] 路径规划，底图切换
---
src/views/AuthorizationManagement/menuRoleAuthorization.vue | 1
src/components/mapol.vue | 104 ++++++
public/config/config.js | 5
src/views/AuthorizationManagement/userRoleAuthorization.vue | 3
public/SmartEarthSDK/Workers/image/start.png | 0
src/views/AuthorizationManagement/roleResAuthorization.vue | 1
src/views/AuthorizationManagement/roleMenuAuthorization.vue | 25 +
src/components/mapsdk.vue | 377 +++++++++++++++++++++++++-
src/views/maintenance/systemMonitoring.vue | 246 ++++++++++++++++-
src/views/Synthesis/analyse.vue | 29 ++
public/SmartEarthSDK/Workers/image/end.png | 0
11 files changed, 740 insertions(+), 51 deletions(-)
diff --git a/public/SmartEarthSDK/Workers/image/end.png b/public/SmartEarthSDK/Workers/image/end.png
new file mode 100644
index 0000000..68e9485
--- /dev/null
+++ b/public/SmartEarthSDK/Workers/image/end.png
Binary files differ
diff --git a/public/SmartEarthSDK/Workers/image/start.png b/public/SmartEarthSDK/Workers/image/start.png
new file mode 100644
index 0000000..97d69ee
--- /dev/null
+++ b/public/SmartEarthSDK/Workers/image/start.png
Binary files differ
diff --git a/public/config/config.js b/public/config/config.js
index bbb8faf..eae79d0 100644
--- a/public/config/config.js
+++ b/public/config/config.js
@@ -1,5 +1,10 @@
//const BASE_URL = 'http://192.168.20.55:12316';
+
+//var socketUrl = 'ws://192.168.20.55:12316/ws';
const BASE_URL = 'http://192.168.20.39:12316';
+//webSocket 鏈嶅姟鍦板潃
+var socketUrl = 'ws://192.168.20.39:12316/ws';
+
var gisUrl = 'http://183.162.245.49:3301';
var ifreamUrl = 'http://192.168.20.39:12306/';
diff --git a/src/components/mapol.vue b/src/components/mapol.vue
index c65c6de..f712116 100644
--- a/src/components/mapol.vue
+++ b/src/components/mapol.vue
@@ -1,17 +1,31 @@
<template>
- <div id="mapol"></div>
+ <div id="mapol">
+ <div
+ @click="changeMenulayer"
+ class="center CenDiv"
+ :class="{ center1: centerFlag }"
+ >
+ <div
+ id="cenBg"
+ v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
+ ></div>
+ </div>
+ </div>
</template>
<script>
-import TileLayer from "ol/layer/Tile";
-import XYZ from "ol/source/XYZ";
-import Map from "ol/Map";
-import View from "ol/View";
-import { transform } from "ol/proj";
+import TileLayer from 'ol/layer/Tile';
+import XYZ from 'ol/source/XYZ';
+import Map from 'ol/Map';
+import View from 'ol/View';
+import { transform } from 'ol/proj';
export default {
- name: "",
+ name: '',
data() {
- return {};
+ return {
+ isActive: true,
+ isMenuLayer: false,
+ };
},
mounted() {
this.init2DMap();
@@ -20,23 +34,37 @@
init2DMap() {
var vectorLayer = new TileLayer({
source: new XYZ({
- url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
+ url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
}),
});
var imageLayer = new TileLayer({
source: new XYZ({
- url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
+ url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
}),
});
window.map = new Map({
- target: "mapol",
+ target: 'mapol',
layers: [imageLayer, vectorLayer],
view: new View({
- center: transform([105.02, 34.9], "EPSG:4326", "EPSG:3857"),
+ center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
zoom: 4,
- projection: "EPSG:3857",
+ projection: 'EPSG:3857',
}),
});
+ },
+ changeMenulayer() {
+ this.isActive = !this.isActive;
+ this.isMenuLayer = !this.isMenuLayer;
+ this.setLayerVisible();
+ },
+ setLayerVisible() {
+ if (this.isActive == true) {
+ map.getLayers().item(0).setVisible(false);
+ map.getLayers().item(1).setVisible(true);
+ } else {
+ map.getLayers().item(0).setVisible(true);
+ map.getLayers().item(1).setVisible(false);
+ }
},
},
};
@@ -51,4 +79,54 @@
padding: 0;
position: relative;
}
+.center {
+ left: 1%;
+}
+.CenDiv {
+ position: absolute;
+ bottom: 1%;
+ height: 40px;
+ width: 60px;
+ z-index: 101;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ box-shadow: 3px 3px 6px #666;
+ border: 1px solid rgba(204, 204, 204, 0.76);
+ border-radius: 5px;
+ cursor: pointer;
+}
+.center1 {
+ right: 1%;
+}
+.right {
+ position: absolute;
+ top: 50px;
+ right: 0;
+ width: 20%;
+ height: calc(100% - 50px);
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+.CenDiv:hover {
+ border: 1px solid #409eff;
+}
+.active {
+ width: 100%;
+ height: 100%;
+ background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+}
+.menuLayer {
+ width: 100%;
+ height: 100%;
+ background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+}
</style>
diff --git a/src/components/mapsdk.vue b/src/components/mapsdk.vue
index 1b00353..b4ddd62 100644
--- a/src/components/mapsdk.vue
+++ b/src/components/mapsdk.vue
@@ -103,10 +103,58 @@
</div>
</el-card>
</div>
+ <div class="pathAnalysisBox" v-if="showPathAnalysisBoxDialog">
+ <el-card class="box-card">
+ <div slot="header" class="clearfix">
+ <span>璺緞鍒嗘瀽</span>
+ <div style="float: right; cursor: pointer">
+ <i class="el-icon-close" @click="closeBufferBox(4)"></i>
+ </div>
+ </div>
+ <div class="box-body">
+ <el-form ref="form" :model="pathFrom" label-width="50px">
+ <el-form-item label="缁忓害:">
+ <el-input style="width: 300px" v-model="pathFrom.lon"></el-input>
+ <el-link
+ :underline="false"
+ @click="showMouseLeftClick(1)"
+ style="margin-left: 10px"
+ ><i style="color: white" class="el-icon-plus"></i
+ ></el-link>
+ </el-form-item>
+ <el-form-item label="绾害:">
+ <el-input style="width: 300px" v-model="pathFrom.lat"></el-input>
+ <el-link
+ :underline="false"
+ @click="showMouseLeftClick(2)"
+ style="margin-left: 10px"
+ ><i style="color: white" class="el-icon-plus"></i
+ ></el-link>
+ </el-form-item>
+ <el-form-item>
+ <el-button @click="showMouseLeftClick(3)" type="info"
+ >鏌ヨ</el-button
+ >
+ </el-form-item>
+ </el-form>
+ </div>
+ </el-card>
+ </div>
+ <div
+ @click="changeMenulayer"
+ class="center CenDiv"
+ :class="{ center1: centerFlag }"
+ >
+ <div
+ id="cenBg"
+ v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
+ ></div>
+ </div>
</div>
</template>
<script>
+import $ from 'jquery';
import {
select_Comprehensive_ByPageAndCount,
select_Comprehensive_SelectWktById,
@@ -119,7 +167,12 @@
showBufferBoxDialog: false,
showCoordLocalBoxDialog: false,
showToponymicLocalBoxDialog: false,
+ showPathAnalysisBoxDialog: false,
comprehensive: {},
+ pathFrom: {
+ lon: '116.086746,39.937314',
+ lat: '116.086000,39.936289',
+ },
bufFrom: {
val: 50,
},
@@ -136,6 +189,13 @@
count: 0,
tableData: [],
imagePoint: null,
+ handler: null,
+ pathStart: null,
+ pathEnd: null,
+ pathData: null,
+
+ isActive: false,
+ isMenuLayer: true,
};
},
mounted() {
@@ -146,29 +206,70 @@
},
methods: {
init3DMap() {
+ var webKey = '94a34772eb88317fcbf8428e10448561';
+
//鍦板浘鍒濆鍖�
window.sgworld = new SmartEarth.SGWorld('mapdiv', {
licenseServer: window.sceneConfig.licenseServer,
});
+
window.Viewer = window.sgworld._Viewer;
+
//瀹氫綅
- // sgworld.Navigate.jumpTo({
- // //璺宠浆瑙嗚
- // destination: new Cesium.Cartesian3.fromDegrees(110, 32, 8000000),
- // });
sgworld.Navigate.jumpTo({
//璺宠浆瑙嗚
- destination: {
- x: 311837.3471863137,
- y: 5628280.936629815,
- z: 2992581.921482893,
- },
- orientation: {
- heading: 2.5028896264234364,
- pitch: -0.2201285642360813,
- roll: 0.0,
- },
+ destination: new Cesium.Cartesian3.fromDegrees(
+ 116.055913,
+ 39.937685,
+ 8000
+ ),
});
+ Viewer.imageryLayers.addImageryProvider(
+ new Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://t0.tianditu.com/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
+ layer: 'tdtVecBasicLayer',
+ style: 'default',
+ format: 'image/jpeg',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ show: false,
+ })
+ );
+
+ Viewer.imageryLayers.addImageryProvider(
+ new Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=94a34772eb88317fcbf8428e10448561',
+ layer: 'tdtBasicLayer',
+ style: 'default',
+ format: 'image/jpeg',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ show: false,
+ })
+ );
+ Viewer.imageryLayers.addImageryProvider(
+ new Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://t0.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=94a34772eb88317fcbf8428e10448561',
+ layer: 'tdtAnnoLayer',
+ style: 'default',
+ format: 'image/jpeg',
+ tileMatrixSetID: 'GoogleMapsCompatible',
+ })
+ );
+
+ // sgworld.Navigate.jumpTo({
+ // //璺宠浆瑙嗚
+ // destination: {
+ // x: 311837.3471863137,
+ // y: 5628280.936629815,
+ // z: 2992581.921482893,
+ // },
+ // orientation: {
+ // heading: 2.5028896264234364,
+ // pitch: -0.2201285642360813,
+ // roll: 0.0,
+ // },
+ // });
+
+ // Viewer.scene.globe.depthTestAgainstTerrain = true;
Viewer._enableInfoOrSelection = false;
//鏄剧ずfps
Viewer.scene.debugShowFramesPerSecond = false;
@@ -197,9 +298,23 @@
layerName: window.sceneConfig.mpt.name,
requestVertexNormals: true,
};
- sgworld.Creator.sfsterrainprovider('mpt', option, '', true, '');
+ // sgworld.Creator.sfsterrainprovider('mpt', option, '', true, '');
window.elevationTool = new SmartEarth.ElevationTool(window.sgworld);
- //妯″瀷鍔犺浇
+ },
+
+ changeMenulayer() {
+ this.isActive = !this.isActive;
+ this.isMenuLayer = !this.isMenuLayer;
+ this.setLayerVisible();
+ },
+ setLayerVisible() {
+ if (this.isActive == true) {
+ Viewer.imageryLayers.get(1).show = true;
+ Viewer.imageryLayers.get(2).show = false;
+ } else {
+ Viewer.imageryLayers.get(1).show = false;
+ Viewer.imageryLayers.get(2).show = true;
+ }
},
//鏄剧ず寮圭獥
showChangeBox(res) {
@@ -215,6 +330,10 @@
} else if (res.id == '2') {
this.showToponymicLocalBoxDialog = true;
this.getToponymicData();
+ }
+ } else if (res.name == 'Analysis') {
+ if (res.id == '3') {
+ this.showPathAnalysisBoxDialog = true;
}
}
},
@@ -292,6 +411,11 @@
this.imagePoint = null;
}
break;
+ case 4:
+ this.showPathAnalysisBoxDialog = false;
+ this.clearPathAll(3);
+
+ break;
}
},
//瀹氫綅
@@ -355,6 +479,168 @@
break;
}
},
+ showMouseLeftClick(res) {
+ if (res == 3) {
+ if (this.linePath != null) {
+ this.clearPathAll(3);
+ }
+
+ var jsonurl =
+ 'http://192.168.20.39:9055/gisserver/wnsserver/beijingdaohang_wns?start=' +
+ this.pathFrom.lon +
+ '&end=' +
+ this.pathFrom.lat +
+ '&propertyName=Shape&tolerance=500&request=FindPath&format=json';
+ $.ajax({
+ url: jsonurl,
+ async: false,
+ type: 'GET',
+ dataType: 'json',
+ contentType: 'application/json;charset=utf-8',
+ success: (data) => {
+ this.executeFly3D(data);
+ },
+ });
+ } else {
+ var that = this;
+ if (this.handler != null) {
+ this.clearLeftClick();
+ }
+ this.handler = new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas);
+ this.handler.setInputAction(function (event) {
+ let cartesian = Viewer.camera.pickEllipsoid(event.position);
+ let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
+ let lng = parseFloat(
+ Cesium.Math.toDegrees(cartographic.longitude)
+ ).toFixed(6); // 缁忓害
+ let lat = parseFloat(
+ Cesium.Math.toDegrees(cartographic.latitude)
+ ).toFixed(6); // 绾害
+ if (that.linePath != null) {
+ that.clearPathAll(3);
+ }
+ if (lng != null && lat != null) {
+ let val = lng + ',' + lat;
+ var position = sgworld.Creator.CreatePosition(lng, lat, 0);
+ if (res == 1) {
+ if (that.pathStart != null) {
+ that.clearPathAll(1);
+ }
+
+ that.pathStart = sgworld.Creator.CreateLabel(
+ position,
+ '',
+ SmartEarthRootUrl + 'Workers/image/start.png',
+ {
+ // 鏂囨湰鍋忕Щ閲�
+ pixelOffset: {
+ x: 0,
+ y: -50,
+ }, // 鏃犺閬尅
+ disableDepthTestDistance: Infinity,
+ scale: 0.8,
+ },
+ 0,
+ '璧峰鐐�'
+ );
+
+ that.pathFrom.lon = val;
+ } else if (res == 2) {
+ if (that.pathEnd != null) {
+ that.clearPathAll(2);
+ }
+
+ that.pathEnd = sgworld.Creator.CreateLabel(
+ position,
+ '',
+ SmartEarthRootUrl + 'Workers/image/end.png',
+ {
+ // 鏂囨湰鍋忕Щ閲�
+ pixelOffset: {
+ x: 0,
+ y: -50,
+ }, // 鏃犺閬尅
+ disableDepthTestDistance: Infinity,
+ scale: 0.8,
+ },
+ 0,
+ '缁撴潫鐐�'
+ );
+ that.pathFrom.lat = val;
+ }
+ that.clearLeftClick();
+ }
+ }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+ }
+ },
+ clearPathAll(res) {
+ switch (res) {
+ case 1:
+ if (this.pathStart != null) {
+ sgworld.Creator.DeleteObject(this.pathStart);
+ this.pathStart = null;
+ }
+ break;
+ case 2:
+ if (this.pathEnd != null) {
+ sgworld.Creator.DeleteObject(this.pathEnd);
+ this.pathEnd = null;
+ }
+ break;
+ case 3:
+ if (this.pathStart != null) {
+ sgworld.Creator.DeleteObject(this.pathStart);
+ this.pathStart = null;
+ }
+
+ if (this.pathEnd != null) {
+ sgworld.Creator.DeleteObject(this.pathEnd);
+ this.pathEnd = null;
+ }
+ if (this.linePath != null) {
+ sgworld.Creator.DeleteObject(this.linePath);
+ this.linePath = null;
+ }
+ break;
+ case 4:
+ if (this.linePath != null) {
+ sgworld.Creator.DeleteObject(this.linePath);
+ this.linePath = null;
+ }
+ break;
+ }
+ },
+ clearLeftClick() {
+ this.handler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); //绉婚櫎浜嬩欢
+ this.handler = null;
+ },
+ executeFly3D(res) {
+ var position = [];
+ if (res) {
+ var positionA = res.features;
+ if (positionA.length > 0) {
+ for (var i = 0; i < positionA.length; i++) {
+ var val = positionA[i];
+ if (val.geometry.type == 'LineString') {
+ var val_data = val.geometry.coordinates;
+ for (var j = 0; j < val_data.length; j++) {
+ position.push({ x: val_data[j][0], y: val_data[j][1] });
+ }
+ }
+ }
+ this.linePath = sgworld.Creator.createPolyline(
+ position,
+ '#ffff00',
+ 1,
+ 0,
+ '绾�'
+ );
+ sgworld.Navigate.flyToObj(this.linePath);
+ } else {
+ return;
+ }
+ }
+ },
},
};
</script>
@@ -371,6 +657,15 @@
.bufferBox {
width: 412px;
height: 230px;
+ z-index: 40;
+ position: absolute;
+ right: 1%;
+ bottom: 1%;
+}
+
+.pathAnalysisBox {
+ width: 412px;
+
z-index: 40;
position: absolute;
right: 1%;
@@ -445,4 +740,54 @@
::v-deep .el-pagination__jump {
color: white;
}
+.center {
+ left: 1%;
+}
+.CenDiv {
+ position: absolute;
+ bottom: 1%;
+ height: 40px;
+ width: 60px;
+ z-index: 101;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ box-shadow: 3px 3px 6px #666;
+ border: 1px solid rgba(204, 204, 204, 0.76);
+ border-radius: 5px;
+ cursor: pointer;
+}
+.center1 {
+ right: 1%;
+}
+.right {
+ position: absolute;
+ top: 50px;
+ right: 0;
+ width: 20%;
+ height: calc(100% - 50px);
+
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+.CenDiv:hover {
+ border: 1px solid #409eff;
+}
+.active {
+ width: 100%;
+ height: 100%;
+ background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+}
+.menuLayer {
+ width: 100%;
+ height: 100%;
+ background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
+ position: absolute;
+ background-size: 100% 100%;
+ border-radius: 5px;
+}
</style>
diff --git a/src/views/AuthorizationManagement/menuRoleAuthorization.vue b/src/views/AuthorizationManagement/menuRoleAuthorization.vue
index ff0ab16..8666d5e 100644
--- a/src/views/AuthorizationManagement/menuRoleAuthorization.vue
+++ b/src/views/AuthorizationManagement/menuRoleAuthorization.vue
@@ -20,6 +20,7 @@
node-key="id"
@check="treeCheck"
ref="treeForm"
+ :default-expanded-keys="[1]"
>
</el-tree>
</div>
diff --git a/src/views/AuthorizationManagement/roleMenuAuthorization.vue b/src/views/AuthorizationManagement/roleMenuAuthorization.vue
index ef60fad..98a466e 100644
--- a/src/views/AuthorizationManagement/roleMenuAuthorization.vue
+++ b/src/views/AuthorizationManagement/roleMenuAuthorization.vue
@@ -20,7 +20,7 @@
style="width: 300px"
v-model="selFrom.name"
placeholder="璇烽�夋嫨鍗曚綅鍚嶇О..."
- @change="chooseCustom"
+ @change="chooseCustom('multiSelect')"
>
<el-option
:value="selectTree"
@@ -36,6 +36,7 @@
node-key="id"
ref="treeForm"
@node-click="addAdminHandleNodeClick"
+ :default-expanded-keys="[1]"
>
</el-tree>
</el-option>
@@ -125,6 +126,7 @@
node-key="id"
@check="menuTreeCheck"
ref="treeForm"
+ :default-expanded-keys="[1]"
>
</el-tree>
</div>
@@ -344,6 +346,7 @@
this.depid = e.id;
this.selFrom.name = e.name;
this.selectTree = e.name;
+ this.chooseCustom('multiSelect');
this.getRoleDep();
this.getMenuTree();
},
@@ -353,6 +356,10 @@
this.menuid = node.id;
this.rolMenuListData.roleid = this.roleid;
this.getRoleMenu();
+ if (list.checkedKeys.length == 2) {
+ //鍗曢�夊疄鐜�
+ this.$refs.treeForm.setCheckedKeys([node.id]);
+ }
} else {
this.menuid = null;
}
@@ -392,10 +399,20 @@
);
},
//涓嬫媺妗嗛�変腑鍚庤嚜鍔ㄥ叧闂�
- chooseCustom() {
- setTimeout(() => {
- this.$refs.multiSelect.blur();
+ chooseCustom(refName) {
+ // this.$refs[refName] && this.$refs[refName].blur();
+ this.createTimer(this.autoCloseSelect, refName);
+ },
+ createTimer(callback, refName) {
+ const timer = setTimeout(() => {
+ callback(refName);
}, 50);
+ this.$once('hook:beforeDestroy', () => {
+ clearInterval(timer);
+ });
+ },
+ autoCloseSelect(refName) {
+ this.$refs[refName] && this.$refs[refName].blur();
},
dephandleSizeChange() {
this.roleDepListData.pageSize = val;
diff --git a/src/views/AuthorizationManagement/roleResAuthorization.vue b/src/views/AuthorizationManagement/roleResAuthorization.vue
index 619b51f..560d915 100644
--- a/src/views/AuthorizationManagement/roleResAuthorization.vue
+++ b/src/views/AuthorizationManagement/roleResAuthorization.vue
@@ -19,6 +19,7 @@
node-key="id"
@check="treeCheck"
ref="treeForm"
+ :default-expanded-keys="[1]"
>
</el-tree>
</div>
diff --git a/src/views/AuthorizationManagement/userRoleAuthorization.vue b/src/views/AuthorizationManagement/userRoleAuthorization.vue
index 292403f..0da61a6 100644
--- a/src/views/AuthorizationManagement/userRoleAuthorization.vue
+++ b/src/views/AuthorizationManagement/userRoleAuthorization.vue
@@ -18,6 +18,7 @@
:check-strictly="true"
node-key="id"
@check="treeCheck"
+ :default-expanded-keys="[1]"
ref="treeForm"
>
</el-tree>
@@ -379,7 +380,7 @@
treeCheck(node, list) {
//node 璇ヨ妭鐐规墍瀵瑰簲鐨勫璞°�乴ist 鏍戠洰鍓嶇殑閫変腑鐘舵�佸璞�
//閫変腑浜嬩欢鍦ㄩ�変腑鍚庢墽琛岋紝褰搇is涓湁涓や釜閫変腑鏃讹紝浣跨敤setCheckedKeys鏂规硶锛岄�変腑涓�涓妭鐐�
- console.log(node, list);
+
if (list.checkedNodes.length > 0) {
this.listData.depid = node.id;
this.debid = node.id;
diff --git a/src/views/Synthesis/analyse.vue b/src/views/Synthesis/analyse.vue
index 719a398..e0750d1 100644
--- a/src/views/Synthesis/analyse.vue
+++ b/src/views/Synthesis/analyse.vue
@@ -17,6 +17,7 @@
</template>
<script>
+import $ from 'jquery';
// 娴嬮噺-淇℃伅寮圭獥
import mapinfo from '../Tools/mapinfo.vue';
export default {
@@ -94,6 +95,34 @@
}
elevationTool.render();
break;
+ case '3':
+ var value = {
+ name: 'Analysis',
+ id: 3,
+ };
+ this.$bus.$emit('mapChangeBox', value);
+ // var jsonurl =
+ // 'http://192.168.20.39:9055/gisserver/wnsserver/beijingdaohang_wns?start=' +
+ // '116.0867468497,39.937314280233' +
+ // '&end=' +
+ // '116.0860003269,39.936289981725' +
+ // '&propertyName=Shape&tolerance=500&request=FindPath&format=json';
+ // $.ajax({
+ // url: jsonurl,
+ // async: false,
+ // type: 'GET',
+ // dataType: 'json',
+ // contentType: 'application/json;charset=utf-8',
+ // success: (data) => {
+ // data.features.forEach((e) => {
+ // if (e.geometry.type == 'LineString') {
+ // //this.executeFly3D(e.geometry.coordinates);
+ // this.executeFly3D(e.geometry.coordinates);
+ // }
+ // });
+ // },
+ // });
+ break;
case '4':
if (window.AnalysisDXPM) {
this.clear(res.id);
diff --git a/src/views/maintenance/systemMonitoring.vue b/src/views/maintenance/systemMonitoring.vue
index 7310a0a..cfdbb11 100644
--- a/src/views/maintenance/systemMonitoring.vue
+++ b/src/views/maintenance/systemMonitoring.vue
@@ -12,13 +12,7 @@
<div class="top_box">
<div style="width: 100%; height: 100%">
<div
- style="
- width: 30%;
- height: 100%;
-
- float: left;
- margin-left: 20%;
- "
+ style="width: 30%; height: 100%; float: left; margin-left: 20%"
>
<div class="Syslabel">
<p style="line-height: 25px">
@@ -94,10 +88,50 @@
</div> -->
</div>
<div class="chart_box">
- <p class="title_box">
+ <el-tabs v-model="activeName" @tab-click="handleClick">
+ <el-tab-pane
+ :label="$t('operatManage.systemMonitoringObj.abnormalResources')"
+ name="first"
+ ><el-table :data="resInfo" style="width: 100%">
+ <el-table-column
+ prop="id"
+ :label="$t('operatManage.systemMonitoringObj.resourceID')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ :label="$t('operatManage.systemMonitoringObj.resourceName')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="bak"
+ :label="$t('operatManage.systemMonitoringObj.resourceState')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="createTime"
+ :label="$t('operatManage.systemMonitoringObj.abnormaltime')"
+ show-overflow-tooltip
+ >
+ </el-table-column> </el-table
+ ></el-tab-pane>
+ <el-tab-pane label="鏈嶅姟璧勬簮鐘舵��" name="second">
+ <div id="resUseChart" style="width: 1515px; height: 243px"></div>
+ </el-tab-pane>
+ <el-tab-pane label="鐢ㄦ埛鐧诲綍鐘舵��" name="third">
+ <div id="userLoginChart" style="width: 1515px; height: 243px"></div>
+ </el-tab-pane>
+ <el-tab-pane label="璧勬簮鎿嶄綔鐘舵��" name="fourth"
+ ><div
+ id="operateCountChart"
+ style="width: 1515px; height: 243px"
+ ></div
+ ></el-tab-pane>
+ </el-tabs>
+ <!-- <p class="title_box">
{{ $t('operatManage.systemMonitoringObj.abnormalResources') }}
- </p>
- <el-table :data="resInfo" style="width: 100%">
+ </p> -->
+ <!-- <el-table :data="resInfo" style="width: 100%">
<el-table-column
prop="id"
:label="$t('operatManage.systemMonitoringObj.resourceID')"
@@ -119,7 +153,7 @@
show-overflow-tooltip
>
</el-table-column>
- </el-table>
+ </el-table> -->
<!-- <div style="margin-top: 10px" class="pagination_box">
<el-pagination
@size-change="handleSizeChange"
@@ -190,6 +224,7 @@
data() {
//杩欓噷瀛樻斁鏁版嵁
return {
+ activeName: 'first',
ws: null,
tableData: [],
memInfo: { totalMem: 0, use: 0, usage: 0 },
@@ -197,6 +232,9 @@
resInfo: [],
resInfoCount: 0,
echartData: [],
+ resUseCount: {},
+ userLoginCount: [],
+ operateCount: [],
};
},
//鏂规硶闆嗗悎
@@ -216,6 +254,29 @@
SetTableData2(res) {
this.resInfo = res.resInfo;
this.resInfoCount = res.resInfo.length;
+ },
+ SetTableData3(res) {
+ this.resUseCount = res.resUseCount;
+ this.operateCount = res.operateCount.operateCount;
+ this.userLoginCount = res.userLoginCount.userLoginCount;
+ this.lineChart3();
+ this.lineChart4();
+ this.lineChart5();
+ },
+ handleClick(tab, event) {
+ switch (tab) {
+ case 'first':
+ break;
+ case 'second':
+ this.lineChart3();
+ break;
+ case 'third':
+ this.lineChart4();
+ break;
+ case 'fourth':
+ this.lineChart5();
+ break;
+ }
},
lineChart1() {
let option = {
@@ -258,7 +319,7 @@
},
lineChart2(res) {
var a = res.split('%').join('');
- console.log(a);
+
let value = parseFloat(a);
let data = [value, value, value];
let option = {
@@ -396,8 +457,156 @@
let myChart1 = this.$echarts.init(document.getElementById('shuiwen'));
myChart1.setOption(option);
window.addEventListener('resize', function () {
- myChart.resize();
+ myChart1.resize();
});
+ },
+ lineChart3() {
+ var data = [
+ { name: '鍙敤璧勬簮', value: this.resUseCount.resAbleCount },
+ { name: '涓嶅彲鐢ㄨ祫婧�', value: this.resUseCount.resUnableCount },
+ ];
+ var option = {
+ tooltip: {
+ trigger: 'item',
+ },
+ legend: {
+ top: '5%',
+ left: 'center',
+ },
+ series: [
+ {
+ name: ' ',
+ type: 'pie',
+ radius: ['40%', '70%'],
+ avoidLabelOverlap: false,
+ itemStyle: {
+ borderRadius: 10,
+ borderColor: '#fff',
+ borderWidth: 2,
+ },
+ label: {
+ show: false,
+ position: 'center',
+ },
+ emphasis: {
+ label: {
+ show: true,
+ fontSize: '40',
+ fontWeight: 'bold',
+ },
+ },
+ labelLine: {
+ show: false,
+ },
+ data: data,
+ },
+ ],
+ };
+ let myChart2 = this.$echarts.init(document.getElementById('resUseChart'));
+ myChart2.setOption(option);
+ window.addEventListener('resize', function () {
+ myChart2.resize();
+ });
+ },
+ lineChart4() {
+ var data1 = [];
+ var data2 = [];
+ for (var i in this.userLoginCount) {
+ data1.push(this.userLoginCount[i].optime);
+ data2.push(this.userLoginCount[i].count);
+ }
+
+ var option = {
+ title: {
+ show: false,
+ },
+ tooltip: {
+ trigger: 'axis',
+ },
+ legend: {
+ show: false,
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ toolbox: {
+ feature: {
+ saveAsImage: {},
+ },
+ },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: data1,
+ },
+ yAxis: {
+ type: 'value',
+ },
+ series: [
+ {
+ name: '',
+ type: 'line',
+ stack: 'Total',
+ data: data2,
+ },
+ ],
+ };
+ let myChart3 = this.$echarts.init(
+ document.getElementById('userLoginChart')
+ );
+ myChart3.setOption(option);
+ },
+ lineChart5() {
+ var data1 = [];
+ var data2 = [];
+ for (var i in this.operateCount) {
+ data1.push(this.operateCount[i].modular2);
+ data2.push(this.operateCount[i].count);
+ }
+
+ var option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow',
+ },
+ },
+ grid: {
+ left: '3%',
+ right: '4%',
+ bottom: '3%',
+ containLabel: true,
+ },
+ xAxis: [
+ {
+ type: 'category',
+ data: data1,
+ axisTick: {
+ alignWithLabel: true,
+ },
+ },
+ ],
+ yAxis: [
+ {
+ type: 'value',
+ },
+ ],
+ series: [
+ {
+ name: 'Direct',
+ type: 'bar',
+ barWidth: '60%',
+ data: data2,
+ },
+ ],
+ };
+ let myChart4 = this.$echarts.init(
+ document.getElementById('operateCountChart')
+ );
+ myChart4.setOption(option);
},
},
created() {
@@ -408,17 +617,20 @@
};
Window.ws = null;
}
- Window.ws = new WebSocket('ws://192.168.20.55:12316/ws');
+
+ Window.ws = new WebSocket(socketUrl);
Window.ws.option = () => {};
var that = this;
Window.ws.onmessage = (msg) => {
// console.log('鏉ヨ嚜鏈嶅姟鍣ㄧ鐨勬暟鎹細' + msg.data); //鐩戝惉鎺ュ彈鏉ヨ嚜鏈嶅姟绔殑淇℃伅
var data = JSON.parse(msg.data);
-
- if (data.resInfo == undefined) {
+ console.log(data);
+ if (data.userInfo != undefined) {
that.SetTableData1(data);
- } else {
+ } else if (data.resInfo != undefined) {
that.SetTableData2(data);
+ } else if (data.operateCount != undefined) {
+ that.SetTableData3(data);
}
};
},
--
Gitblit v1.9.3