You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
396 lines
12 KiB
396 lines
12 KiB
|
2 years ago
|
<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>
|