Merge branch 'main' of http://42.192.7.176:3000/suojin/smartpark

src/page/index/sidebar/opsSidebar.vue

@@ -32,7 +32,7 @@
             </template>
             <el-menu-item-group>
               <el-menu-item index="/opsVisualization/alarmProcess">服务监控</el-menu-item>
-              <el-menu-item index="/opsVisualization/index">Redis监控</el-menu-item>
+              <el-menu-item index="/opsVisualization/tuobu">Redis监控</el-menu-item>
               <el-menu-item index="/opsVisualization/index">数据库监控</el-menu-item>
               <el-menu-item index="/opsVisualization/index">网络监控</el-menu-item>
               <el-menu-item index="/opsVisualization/index">系统硬件监控</el-menu-item>

src/router/views/index.js

@@ -264,6 +264,14 @@ export default [{
 		},
 		component: () =>
 			import( /* webpackChunkName: "views" */ '@/views/opsVisualization/alarmProcess')
+	}, {
+		path: 'tuobu',
+		name: 'tuobu',
+		meta: {
+			i18n: 'dashboard'
+		},
+		component: () =>
+			import( /* webpackChunkName: "views" */ '@/views/opsVisualization/tuobu')
 	}]
 },
 ]

src/views/opsVisualization/jiedian.vue

@@ -0,0 +1,66 @@
+<template>
+	<div class="unit">
+		<!-- <img :class="img == 'jiedian_red' ? 'fuwuyigua' : 'jiedianyigua'" src="../../../public/img/tuobu/fuwuyigua.png" alt=""> -->
+		<img class="img" :src="require(`../../../public/img/tuobu/${img}.png`)" alt="">
+		<div class="text" :style="`left: ${left}px; top: ${top}px`">{{ text }}</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			
+		}
+	},
+	props: {
+		img: {
+			type: String,
+		},
+		text: {
+			type: String
+		},
+        left: {
+            type: String
+        },
+        top: {
+            type: String
+        }
+	},
+	created() {},
+	mounted() {
+		console.log('img', this.img, this.left, this.top)
+	},
+	computed: {
+		
+	},
+	methods: {
+		
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	.unit{
+		position: relative;
+		width: 100px;
+		.img{
+            cursor: pointer;
+		}
+		.text{
+			width: 120px;
+			position: absolute;
+			transform: skewY(-25deg);
+		}
+		.fuwuyigua{
+			position: absolute;
+			top: -60px;
+			left: -10px;
+		}
+		.jiedianyigua{
+			position: absolute;
+			top: -60px;
+			left: -25px;
+		}
+	}
+</style>

src/views/opsVisualization/serverUnit.vue

@@ -0,0 +1,50 @@
+<template>
+	<div class="unit">
+		<img class="img" :src="require(`../../../public/img/tuobu/${img}.png`)" alt="">
+		<div class="text">{{ text }}</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			
+		}
+	},
+	props: {
+		img: {
+			type: String,
+		},
+		text: {
+			type: String
+		},
+	},
+	created() {},
+	mounted() {
+		console.log('img', this.img)
+	},
+	computed: {
+		
+	},
+	methods: {
+		
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+	.unit{
+		position: relative;
+		width: 100px;
+		.img{
+
+		}
+		.text{
+			width: 20px;
+			position: absolute;
+			top: 20px;
+			right: 0px;
+		}
+	}
+</style>

src/views/opsVisualization/tuobu.vue

@@ -0,0 +1,396 @@
+<template>
+	<div class="content">
+		<!-- 第一个 -->
+		<serverUnit class="server_1" :img="'server_img'" :text="'应用服务器'"></serverUnit>
+		<!-- 左边 -->
+		<img class="server_1_top_left" src="../../../public/img/tuobu/server_1_top_left.png" alt="">
+		<div class="top_left_jiedian_box">
+			<jiedian class="jiedian jiedian_1" :img="'jiedian_blue'" :text="'定时任务服务'" :left="'-15'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_2" :img="'jiedian_blue'" :text="'系统服务'" :left="'0'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_3" :img="'jiedian_blue'" :text="'websocke服务'" :left="'-15'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_4" :img="'jiedian_blue'" :text="'门禁服务'" :left="'0'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_5" :img="'jiedian_blue'" :text="'xxljob服务'" :left="'-5'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_6" :img="'jiedian_blue'" :text="'用户服务'" :left="'0'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_7" :img="'jiedian_blue'" :text="'权限服务'" :left="'0'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_8" :img="'jiedian_blue'" :text="'网关服务'" :left="'0'" :top="'35'"></jiedian>
+			<jiedian class="jiedian jiedian_9" :img="'jiedian_blue'" :text="'应用服务'" :left="'0'" :top="'35'"></jiedian>
+		</div>
+		<img class="server_1_top_right" src="../../../public/img/tuobu/server_1_top_right.png" alt="">
+		<img class="server_1_center_left" src="../../../public/img/tuobu/server_1_center_left.png" alt="">
+		<img class="server_1_center_center" src="../../../public/img/tuobu/server_1_center_center.png" alt="">
+		<img class="server_1_center_right" src="../../../public/img/tuobu/server_1_center_right.png" alt="">
+		<div class="center_jiedian_box">
+			<jiedian class="jiedian jiedian_1" :img="'jiedian_blue'" :text="'mqtt服务'" :left="'-33'"></jiedian>
+			<jiedian class="jiedian jiedian_2" :img="'jiedian_blue'" :text="'http服务'" :left="'-30'"></jiedian>
+			<jiedian class="jiedian jiedian_3" :img="'jiedian_blue'" :text="'modebus服务'" :left="'-30'"></jiedian>
+		</div>
+		<img class="server_1_bottom_center_left" src="../../../public/img/tuobu/server_1_bottom_center.png" alt="">
+		<div class="bottom_jiedian_box_1">
+			<jiedian class="jiedian jiedian_1" :img="'dut_img'" :text="'dut'" :left="'5'" :top="'20'"></jiedian>
+		</div>
+		<img class="server_1_bottom_left" src="../../../public/img/tuobu/server_1_bottom_left.png" alt="">
+		<img class="server_1_bottom_item_1" src="../../../public/img/tuobu/server_1_bottom_item.png" alt="">
+		<img class="server_1_bottom_item_2" src="../../../public/img/tuobu/server_1_bottom_item.png" alt="">
+		<img class="server_1_bottom_item_3" src="../../../public/img/tuobu/server_1_bottom_item.png" alt="">
+		<img class="server_1_bottom_item_4" src="../../../public/img/tuobu/server_1_bottom_item.png" alt="">
+		<div class="bottom_left_jiedian_box">
+			<jiedian class="jiedian jiedian_4" :img="'dianti_img'" :text="'电梯'" :left="'15'" :top="'110'"></jiedian>
+			<jiedian class="jiedian jiedian_3" :img="'xiaofang_img'" :text="'消防'" :left="'10'" :top="'75'"></jiedian>
+			<jiedian class="jiedian jiedian_2" :img="'nuanbiao_img'" :text="'暖表'" :left="'18'" :top="'40'"></jiedian>
+			<jiedian class="jiedian jiedian_1" :img="'shuibiao_img'" :text="'水表'" :left="'15'" :top="'40'"></jiedian>
+		</div>
+		<img class="server_1_bottom_center_4" src="../../../public/img/tuobu/server_1_bottom_center_4.png" alt="">
+		<img class="server_1_bottom_center_1" src="../../../public/img/tuobu/server_1_bottom_center_1.png" alt="">
+		<img class="server_1_bottom_center_2" src="../../../public/img/tuobu/server_1_bottom_center_2.png" alt="">
+		<img class="server_1_bottom_center_3" src="../../../public/img/tuobu/server_1_bottom_center_3.png" alt="">
+		<jiedian class="jiedian jiedian_haikang" :img="'haikang_img'" :text="'海康接口'" :left="'-15'" :top="'40'"></jiedian>
+		<jiedian class="jiedian jiedian_kongkai" :img="'kongkai_img'" :text="'空开'" :left="'5'" :top="'40'"></jiedian>
+		<jiedian class="jiedian jiedian_shexiangtou" :img="'shexiangtou_img'" :text="'摄像头'" :left="'5'" :top="'30'"></jiedian>
+		<img class="server_1_bottom_center_left_right" src="../../../public/img/tuobu/server_1_bottom_center.png" alt="">
+		<jiedian class="jiedian jiedian_wangguan" :img="'wangguan_img'" :text="'网关'" :left="'-15'" :top="'30'"></jiedian>
+		<img class="server_1_right_center" src="../../../public/img/tuobu/server_1_right_center.png" alt="">
+		<img class="server_1_right_center_left" src="../../../public/img/tuobu/server_1_right_center_left.png" alt="">
+		<img class="server_1_right_center_right" src="../../../public/img/tuobu/server_1_right_center_right.png" alt="">
+		<jiedian class="jiedian jiedian_kongtiao" :img="'kongtiao_img'" :text="'空调面板'" :left="'-10'" :top="'60'"></jiedian>
+		<jiedian class="jiedian jiedian_dianbiao" :img="'dianbiao_img'" :text="'电表'" :left="'5'" :top="'60'"></jiedian>
+		<!-- 第二个 -->
+		<serverUnit class="server_2" :img="'server_img'" :text="'应用服务器'"></serverUnit>
+		<img class="server_2_top_right" src="../../../public/img/tuobu/server_1_top_right.png" alt="">
+		<jiedian class="jiedian jiedian_weilan" :img="'jiedian_blue'" :text="'电子围栏服务'" :left="'-33'"></jiedian>
+		<img class="server_2_center" src="../../../public/img/tuobu/server_1_right_center.png" alt="">
+		<jiedian class="jiedian jiedian_dianziweilan" :img="'weilan_img'" :text="'电子围栏'" :left="'5'" :top="'130'"></jiedian>
+		<!-- 第三个 -->
+		<serverUnit class="server_3" :img="'server_img'" :text="'应用服务器'"></serverUnit>
+		<img class="server_3_top_right" src="../../../public/img/tuobu/server_1_top_right.png" alt="">
+		<jiedian class="jiedian jiedian_loukong" :img="'jiedian_blue'" :text="'楼空服务'" :left="'-33'"></jiedian>
+		<img class="server_3_center" src="../../../public/img/tuobu/server_1_right_center.png" alt="">
+		<img class="server_3_center_left" src="../../../public/img/tuobu/server_1_right_center_left.png" alt="">
+		<img class="server_3_center_right" src="../../../public/img/tuobu/server_1_right_center_right.png" alt="">
+		<jiedian class="jiedian jiedian_kongtiao_2" :img="'kongtiao_2_img'" :text="'空调'" :left="'5'" :top="'60'"></jiedian>
+		<jiedian class="jiedian jiedian_zhaoming" :img="'zhaoming_img'" :text="'照明'" :left="'35'" :top="'30'"></jiedian>
+		<!-- 第四个 -->
+		<serverUnit class="server_4" :img="'server_img'" :text="'应用服务器'"></serverUnit>
+		<img class="server_4_top_right" src="../../../public/img/tuobu/server_1_top_right.png" alt="">
+		<div class="right_jiedian_box">
+			<jiedian class="jiedian jiedian_1" :img="'jiedian_blue'" :text="'resdis服务监控'" :left="'0'" :top="'40'"></jiedian>
+			<jiedian class="jiedian jiedian_2" :img="'jiedian_blue'" :text="'数据库监控'" :left="'10'" :top="'40'"></jiedian>
+		</div>
+	</div>
+</template>
+
+<script>
+import serverUnit from "./serverUnit.vue"
+import jiedian from "./jiedian.vue"
+export default {
+	data() {
+		return {
+
+		}
+	},
+	components: {
+		serverUnit,
+		jiedian
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+	.content{
+		padding: 20px !important;
+		width: calc(100% - 218px);
+		margin-left: 218px;
+		position: relative;
+		.server_1{
+			position: absolute;
+			left: 400px;
+		}
+		.server_1_top_left{
+			position: absolute;
+			left: 350px;
+			top: 150px;
+		}
+		.top_left_jiedian_box{
+			position: relative;
+			top: 230px;
+    	left: 0px;
+			display: flex;
+			flex-wrap: wrap;
+			width: 300px;
+			.jiedian{
+				height: 80px;
+				// cursor: pointer;
+			}
+			.jiedian_2{
+				top: -55px;
+			}
+			.jiedian_3{
+				top: -110px;
+			}
+			.jiedian_4{
+				left: 55px;
+			}
+			.jiedian_5{
+				left: 55px;
+				top: -55px;
+			}
+			.jiedian_6{
+				left: 55px;
+				top: -110px;
+			}
+			.jiedian_7{
+				left: 110px;
+			}
+			.jiedian_8{
+				left: 110px;
+				top: -55px;
+			}
+			.jiedian_9{
+				left: 110px;
+				top: -110px;
+			}
+		}
+		.server_1_top_right{
+			position: absolute;
+			left: 450px;
+    		top: 135px;
+		}
+		.center_jiedian_box{
+			position: absolute;
+			left: 440px;
+    	top: 345px;
+			display: flex;
+			.jiedian_2{
+				top: -55px;
+				left: 5px;
+			}
+			.jiedian_3{
+				top: -110px;
+			}
+		}
+		.server_1_center_left{
+			position: absolute;
+			left: 427px;
+			top: 290px;
+		}
+		.server_1_center_center{
+			position: absolute;
+			left: 538px;
+			top: 292px;
+		}
+		.server_1_center_right{
+			position: absolute;
+			left: 533px;
+			top: 238px;
+		}
+		.server_1_bottom_center_left{
+			position: absolute;
+			left: 470px;
+			top: 388px;
+		}
+		.bottom_jiedian_box_1{
+			position: absolute;
+			top: 460px;
+			left: 490px;
+		}
+		.server_1_bottom_left{
+			position: absolute;
+			top: 480px;
+			left: 220px;
+		}
+		.server_1_bottom_item_1{
+			position: absolute;
+			top: 515px;
+			left: 405px;
+		}
+		.server_1_bottom_item_2{
+			position: absolute;
+			top: 546px;
+			left: 346px;
+		}
+		.server_1_bottom_item_3{
+			position: absolute;
+			top: 577px;
+			left: 287px;
+		}
+		.server_1_bottom_item_4{
+			position: absolute;
+			top: 614px;
+			left: 220px;
+		}
+		.bottom_left_jiedian_box{
+			position: absolute;
+			top: 530px;
+    	left: 140px;
+			display: flex;
+			.jiedian_2{
+				top: 30px;
+    		left: 35px;
+			}
+			.jiedian_3{
+				top: 63px;
+    		left: 80px;
+			}
+			.jiedian_4{
+				top: 95px;
+    		left: 100px;
+			}
+		}
+		.server_1_bottom_center_4{
+			position: absolute;
+			top: 333px;
+			left: 576px;
+		}
+		.server_1_bottom_center_1{
+			position: absolute;
+			top: 419px;
+			left: 576px;
+		}
+		.server_1_bottom_center_2{
+			position: absolute;
+			top: 419px;
+			left: 579px;
+		}
+		.server_1_bottom_center_3{
+			position: absolute;
+			top: 460px;
+			left: 620px;
+		}
+		.jiedian_haikang{
+			position: absolute;
+			top: 425px;
+			left: 600px;
+		}
+		.jiedian_kongkai{
+			position: absolute;
+			top: 590px;
+			left: 590px;
+		}
+		.jiedian_shexiangtou{
+			position: absolute;
+			top: 570px;
+			left: 645px;
+		}
+		.server_1_bottom_center_left_right{
+			position: absolute;
+			top: 278px;
+			left: 670px;
+		}
+		.jiedian_wangguan{
+			position: absolute;
+			left: 693px;
+			top: 350px;
+		}
+		.server_1_right_center{
+			position: absolute;
+			top: 388px;
+			left: 710px;
+		}
+		.server_1_right_center_left{
+			position: absolute;
+			top: 437px;
+			left: 700px;
+		}
+		.server_1_right_center_right{
+			position: absolute;
+			top: 418px;
+			left: 745px;
+		}
+		.jiedian_kongtiao{
+			position: absolute;
+			left: 725px;
+			top: 470px;
+		}
+		.jiedian_dianbiao{
+			position: absolute;
+			left: 795px;
+			top: 421px;
+		}
+
+		.server_2{
+			position: absolute;
+			left: 750px;
+    	top: 20px;
+		}
+		.server_2_top_right{
+			position: absolute;
+			left: 790px;
+    	top: 140px;
+		}
+		.jiedian_weilan{
+			position: absolute;
+			left: 850px;
+			top: 293px;
+		}
+		.server_2_center{
+			position: absolute;
+			top: 335px;
+			left: 892px;
+		}
+		.jiedian_dianziweilan{
+			position: absolute;
+			left: 885px;
+    	top: 360px;
+		}
+
+		.server_3{
+			position: absolute;
+			left: 1000px;
+    	top: 20px;
+		}
+		.server_3_top_right{
+			position: absolute;
+			left: 1040px;
+    	top: 140px;
+		}
+		.jiedian_loukong{
+			position: absolute;
+			left: 1100px;
+			top: 293px;
+		}
+		.server_3_center{
+			position: absolute;
+			top: 335px;
+			left: 1142px;
+		}
+		.server_3_center_left{
+			position: absolute;
+			top: 385px;
+			left: 1129px;
+		}
+		.server_3_center_right{
+			position: absolute;
+			top: 365px;
+			left: 1175px;
+		}
+		.jiedian_kongtiao_2{
+			position: absolute;
+			left: 1150px;
+			top: 420px;
+		}
+		.jiedian_zhaoming{
+			position: absolute;
+			left: 1210px;
+			top: 362px;
+		}
+
+		.server_4{
+			position: absolute;
+			left: 1250px;
+    	top: 20px;
+		}
+		.server_4_top_right{
+			position: absolute;
+			left: 1290px;
+    	top: 140px;
+		}
+		.right_jiedian_box{
+			position: absolute;
+			left: 1310px;
+    	top: 310px;
+			display: flex;
+			.jiedian_2{
+				top: -60px;
+			}
+		}
+	}
+</style>