smartpark-front/src/views/opsVisualization/tuobu.vue

<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>