|
|
<template>
|
|
|
<div class="app-container">
|
|
|
<div class="HadoophDFS">
|
|
|
<div class="left">
|
|
|
<el-scrollbar height="660px" style="height:96%">
|
|
|
<p>
|
|
|
本案例通过搭建服务器集群，安装Hadoop组件，实训演练Hadoop的核心组件HDFS分布式文件系统的读、写流程和原理
|
|
|
</p>
|
|
|
<span style="color:#FFFFFF">1、搭建服务器集群，为每个机架配置三台服务器，建立通信联系</span>
|
|
|
<div class="Server">
|
|
|
<div class="Server-item">
|
|
|
<div class="item-img" style="cursor: pointer;" @click="clientSelect(2)">
|
|
|
<span v-if="content[2]===1">A1 Server</span>
|
|
|
<span v-if="content[2]===1">A2 Server</span>
|
|
|
<span v-if="content[2]===1">A3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackA</div>
|
|
|
</div>
|
|
|
<div class="contact">
|
|
|
<img src="@/assets/images/szjj/箭.png" alt="" />
|
|
|
</div>
|
|
|
<div class="Server-item">
|
|
|
<div class="item-img" style="cursor: pointer;" @click="clientSelect(2)">
|
|
|
<span v-if="content[2]===1">B1 Server</span>
|
|
|
<span v-if="content[2]===1">B2 Server</span>
|
|
|
<span v-if="content[2]===1">B3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackB</div>
|
|
|
</div>
|
|
|
<div class="contact">
|
|
|
<img src="@/assets/images/szjj/箭.png" alt="" />
|
|
|
</div>
|
|
|
<div class="Server-item">
|
|
|
<div class="item-img" style="cursor: pointer;" @click="clientSelect(2)">
|
|
|
<span v-if="content[2]===1">C1 Server</span>
|
|
|
<span v-if="content[2]===1">C2 Server</span>
|
|
|
<span v-if="content[2]===1">C3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackB</div>
|
|
|
</div>
|
|
|
<div @click="clientSelect(0)" class="clientSelect">
|
|
|
<img
|
|
|
src="@/assets/images/szjj/客户端.png"
|
|
|
alt=""
|
|
|
class="server_img"
|
|
|
/>
|
|
|
</div>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/箭头_c.png"
|
|
|
alt=""
|
|
|
class="server_img2"
|
|
|
/>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/主服务器Server.png"
|
|
|
alt=""
|
|
|
class="server_img3"
|
|
|
/>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/result.png"
|
|
|
alt=""
|
|
|
class="server_img4"
|
|
|
/>
|
|
|
<div class="clientAbs" @click="clientSelect(0)"><span v-if="content[0]===1" style="font-size:14px;">客户端Client</span></div>
|
|
|
<div class="correspondence" @click="clientSelect(1)">
|
|
|
<span style="cursor: pointer;" v-if="content[1]===1">通信联系</span>
|
|
|
</div>
|
|
|
<div class="correspondence txPotion" @click="clientSelect(1)">
|
|
|
<span style="cursor: pointer;" v-if="content[1]===1">通信联系</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<span style="color:#FFFFFF"
|
|
|
>2、搭建Hadoop，设置名字节点（NameNode）、数据节点（DataNode）</span
|
|
|
>
|
|
|
<div class="Server ts">
|
|
|
<div class="Server-item">
|
|
|
<div class="item-img">
|
|
|
<span>A1 Server</span>
|
|
|
<span>A2 Server</span>
|
|
|
<span>A3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackA</div>
|
|
|
</div>
|
|
|
<div class="contact">
|
|
|
<span>通信联系</span>
|
|
|
<img src="@/assets/images/szjj/箭.png" alt="" />
|
|
|
</div>
|
|
|
<div class="Server-item">
|
|
|
<div class="item-img">
|
|
|
<span>B1 Server</span>
|
|
|
<span>B2 Server</span>
|
|
|
<span>B3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackB</div>
|
|
|
</div>
|
|
|
<div class="contact">
|
|
|
<span>通信联系</span>
|
|
|
<img src="@/assets/images/szjj/箭.png" alt="" />
|
|
|
</div>
|
|
|
<div class="Server-item">
|
|
|
<div class="item-img">
|
|
|
<span>C1 Server</span>
|
|
|
<span>C2 Server</span>
|
|
|
<span>C3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackC</div>
|
|
|
</div>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/客户端.png"
|
|
|
alt=""
|
|
|
class="server_imgt"
|
|
|
/>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/箭头_c.png"
|
|
|
alt=""
|
|
|
class="server_img2"
|
|
|
/>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/主服务器Server.png"
|
|
|
alt=""
|
|
|
class="server_img3"
|
|
|
/>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/result.png"
|
|
|
alt=""
|
|
|
class="server_img4"
|
|
|
/>
|
|
|
<el-select
|
|
|
v-model="value1"
|
|
|
class="m-2"
|
|
|
placeholder="请选择"
|
|
|
size="default"
|
|
|
style="
|
|
|
width: 232px;
|
|
|
position: absolute;
|
|
|
top: 25px;
|
|
|
right: 25px;
|
|
|
height: 25px;
|
|
|
"
|
|
|
:disabled="isValue[0]===1"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in options1"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value"
|
|
|
@click.prevent="selectingNodes(item.value,0)"
|
|
|
/>
|
|
|
</el-select>
|
|
|
<div class="server_item">
|
|
|
<span>心跳机制和数据报告机制</span>
|
|
|
</div>
|
|
|
<div class="server_item tsPosition">
|
|
|
<span>心跳机制和数据报告机制</span>
|
|
|
</div>
|
|
|
<div class="server_item tsPosition2">
|
|
|
<span>心跳机制和数据报告机制</span>
|
|
|
</div>
|
|
|
<el-select
|
|
|
v-model="value2"
|
|
|
class="m-2"
|
|
|
placeholder="请选择"
|
|
|
size="default"
|
|
|
style="
|
|
|
width: 135px;
|
|
|
position: absolute;
|
|
|
bottom: 25px;
|
|
|
left: 57px;
|
|
|
height: 25px;
|
|
|
"
|
|
|
:disabled="isValue[1]===1"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in options1"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value"
|
|
|
@click.prevent="selectingNodes(item.value,1)"
|
|
|
/>
|
|
|
</el-select>
|
|
|
<el-select
|
|
|
v-model="value3"
|
|
|
class="m-2"
|
|
|
placeholder="请选择"
|
|
|
size="default"
|
|
|
style="
|
|
|
width: 135px;
|
|
|
position: absolute;
|
|
|
bottom: 25px;
|
|
|
left: 257px;
|
|
|
height: 25px;
|
|
|
"
|
|
|
:disabled="isValue[2]===1"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in options1"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value"
|
|
|
@click.prevent="selectingNodes(item.value,2)"
|
|
|
/>
|
|
|
</el-select>
|
|
|
<el-select
|
|
|
v-model="value4"
|
|
|
class="m-2"
|
|
|
placeholder="请选择"
|
|
|
size="default"
|
|
|
style="
|
|
|
width: 135px;
|
|
|
position: absolute;
|
|
|
bottom: 25px;
|
|
|
left: 457px;
|
|
|
height: 25px;
|
|
|
"
|
|
|
:disabled="isValue[3]===1"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in options1"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value"
|
|
|
@click.prevent="selectingNodes(item.value,3)"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<span style="color:#FFFFFF"
|
|
|
>3、目前需要上传一个500M的文件File，HDFS系统中的客户端Client，需要将其拆分为128M的文件块。</span
|
|
|
>
|
|
|
<p style="font-weight: 500 !important;color:#FFFFFF">
|
|
|
（每个块的大小可以通过配置参数（dfs.blocksize）来规定，默认的大小在hadoop2.x版本中是128M，在之前的版本中是64M。）
|
|
|
</p>
|
|
|
<div class="Server">
|
|
|
<div class="server_left">
|
|
|
<img src="@/assets/images/szjj/文件.png" alt="" />
|
|
|
</div>
|
|
|
<div class="server_right">
|
|
|
<img src="@/assets/images/szjj/线.png" alt="" />
|
|
|
</div>
|
|
|
<div class="server_button">
|
|
|
<el-button @click="moveBoxes">拆分</el-button>
|
|
|
</div>
|
|
|
<div class="server_file" :style="{ transform: box1Transform }" v-show="showBlock[0]">
|
|
|
<span style="margin-left: 25px">Block1</span>
|
|
|
<span style="color: #5620f9; margin-left: 10px">128M</span>
|
|
|
</div>
|
|
|
<div class="server_file tsFile1" :style="{ transform: box2Transform }" v-show="showBlock[1]">
|
|
|
<span style="margin-left: 25px">Block2</span>
|
|
|
<span style="color: #5620f9; margin-left: 10px">128M</span>
|
|
|
</div>
|
|
|
<div class="server_file tsFile2" :style="{ transform: box3Transform }" v-show="showBlock[2]">
|
|
|
<span style="margin-left: 25px">Block3</span>
|
|
|
<span style="color: #5620f9; margin-left: 10px">128M</span>
|
|
|
</div>
|
|
|
<div class="server_file tsFile3" :style="{ transform: box4Transform }" v-show="showBlock[3]">
|
|
|
<span style="margin-left: 25px">Block4</span>
|
|
|
<span style="color: #5620f9; margin-left: 10px">116M</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<span style="color:#FFFFFF"
|
|
|
>4、客户端Client通过Distributed
|
|
|
FileSystem模块向与名字节点（NameNode）建立通信联系，包括是否可以上传文件，存放的文件目录。</span
|
|
|
>
|
|
|
<div class="serverFour">
|
|
|
<div class="Four_left">
|
|
|
<img src="@/assets/images/szjj/客户端.png" alt="" />
|
|
|
<div class="left_main">
|
|
|
<div class="main_input">
|
|
|
<span>选择角色：</span>
|
|
|
<el-select
|
|
|
v-model="value5"
|
|
|
class="m-2"
|
|
|
placeholder="请选择"
|
|
|
size="default"
|
|
|
style="width: 125px; height: 25px"
|
|
|
:disabled="value5!==''"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in options2"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value"
|
|
|
@click.prevent="selectingNodes2(item.value,1)"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="left_item" v-show="setupFour[0]">
|
|
|
<img
|
|
|
src="@/assets/images/szjj/序号1.png"
|
|
|
alt=""
|
|
|
style="margin-top: 2px"
|
|
|
/>
|
|
|
<span>请求上传文件</span>
|
|
|
</div>
|
|
|
<div class="left_item2" v-show="setupFour[4]">
|
|
|
<img
|
|
|
src="@/assets/images/szjj/序号5.png"
|
|
|
alt=""
|
|
|
style="margin-top: 2px"
|
|
|
/>
|
|
|
<span>可以上传</span>
|
|
|
</div>
|
|
|
<div class="left_item2" v-show="setupFour[5]">
|
|
|
<img
|
|
|
src="@/assets/images/szjj/序号6.png"
|
|
|
alt=""
|
|
|
style="margin-top: 2px"
|
|
|
/>
|
|
|
<span>请求第一个块文件上传</span>
|
|
|
</div>
|
|
|
<div class="left_item2" v-show="setupFour[9]">
|
|
|
<img
|
|
|
src="@/assets/images/szjj/序号10.png"
|
|
|
alt=""
|
|
|
style="margin-top: 2px"
|
|
|
/>
|
|
|
<span>接收信息</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="Four_middle">
|
|
|
<div class="middle_item" :style="{ background: isGreen ? 'green' : '' }" style="cursor: pointer;" v-show="setupFour[1]" @click="requestFileUpload">
|
|
|
<img src="@/assets/images/szjj/序号2.png" alt="" />
|
|
|
<span>请求上传文件</span>
|
|
|
</div>
|
|
|
<div class="middle_item" :style="{ background: isGreen2 ? 'green' : '' }" style="cursor: pointer;" v-show="setupFour[3]" @click="requestFileUpload2">
|
|
|
<img src="@/assets/images/szjj/序号4.png" alt="" />
|
|
|
<span>返回是否可以上传</span>
|
|
|
</div>
|
|
|
<div class="middle_item ts_item" :style="{ background: isGreen3 ? 'green' : '' }" style="cursor: pointer;" v-show="setupFour[6]" @click="requestFileUpload3">
|
|
|
<img src="@/assets/images/szjj/序号7.png" alt="" />
|
|
|
<span>请求Block1上传到哪几个</span>
|
|
|
<span>DataNode服务器上</span>
|
|
|
</div>
|
|
|
<div class="middle_item" :style="{ background: isGreen4 ? 'green' : '' }" style="cursor: pointer;" v-show="setupFour[8]" @click="requestFileUpload4">
|
|
|
<img src="@/assets/images/szjj/序号9.png" alt="" />
|
|
|
<span>返还可以上传的数据节点</span>
|
|
|
</div>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/箭头_right.png"
|
|
|
alt=""
|
|
|
class="middle_arrow"
|
|
|
v-show="setupFour[1]"
|
|
|
/>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/箭头_left.png"
|
|
|
alt=""
|
|
|
class="middle_arrow tsArrow"
|
|
|
v-show="setupFour[3]"
|
|
|
/>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/箭头_right.png"
|
|
|
alt=""
|
|
|
class="middle_arrow tsArrow2"
|
|
|
v-show="setupFour[6]"
|
|
|
/>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/箭头_left.png"
|
|
|
alt=""
|
|
|
class="middle_arrow tsArrow3"
|
|
|
v-show="setupFour[8]"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="Four_right">
|
|
|
<img
|
|
|
src="@/assets/images/szjj/主服务器Server_none.png"
|
|
|
alt=""
|
|
|
/>
|
|
|
<div class="right_main">
|
|
|
<div class="main_input">
|
|
|
<span>选择角色：</span>
|
|
|
<el-select
|
|
|
v-model="value6"
|
|
|
class="m-2"
|
|
|
placeholder="请选择"
|
|
|
size="default"
|
|
|
style="width: 125px; height: 25px"
|
|
|
:disabled="value6!==''"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in options2"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value"
|
|
|
@click.prevent="selectingNodes2(item.value,2)"
|
|
|
/>
|
|
|
</el-select>
|
|
|
</div>
|
|
|
<div class="left_item" v-show="setupFour[2]">
|
|
|
<img
|
|
|
src="@/assets/images/szjj/序号3.png"
|
|
|
alt=""
|
|
|
style="margin-top: 2px"
|
|
|
/>
|
|
|
<span>检查目标文件是否已存在</span>
|
|
|
<span>父目录是否存在</span>
|
|
|
</div>
|
|
|
<div class="left_item2" v-show="setupFour[7]">
|
|
|
<img
|
|
|
src="@/assets/images/szjj/序号8.png"
|
|
|
alt=""
|
|
|
style="margin-top: 2px"
|
|
|
/>
|
|
|
<span>查询可用的数据节点，返回3个</span>
|
|
|
<span>DataNode节点，分别为DataN</span>
|
|
|
<span>ode1、DataNode2、DataN</span>
|
|
|
<span>ode3</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="left_top">
|
|
|
<span>客户端</span>
|
|
|
</div>
|
|
|
<div class="left_top2">
|
|
|
<span>名字节点</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<span style="color:#FFFFFF"
|
|
|
>5、客户端通过FSDataOutputStream模块请求DataNode1上传数据，DataNode1收到请求会继续调用DataNode2，然后DataNode2调用DataNode3，<br />将这个通信管道建立完成。DataNode1、DataNode2、DataNode3逐级应答客户端。</span
|
|
|
>
|
|
|
<div class="Server_five ts">
|
|
|
<div class="Server-item">
|
|
|
<div class="item-img">
|
|
|
<span>A1 Server</span>
|
|
|
<span>A2 Server</span>
|
|
|
<span>A3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackA</div>
|
|
|
</div>
|
|
|
<div class="contact">
|
|
|
<img src="@/assets/images/szjj/箭.png" alt="" />
|
|
|
</div>
|
|
|
<div class="Server-item">
|
|
|
<div class="item-img">
|
|
|
<span>A1 Server</span>
|
|
|
<span>A2 Server</span>
|
|
|
<span>A3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackB</div>
|
|
|
</div>
|
|
|
<div class="contact">
|
|
|
<img src="@/assets/images/szjj/箭.png" alt="" />
|
|
|
</div>
|
|
|
<div class="Server-item">
|
|
|
<div class="item-img">
|
|
|
<span>A1 Server</span>
|
|
|
<span>A2 Server</span>
|
|
|
<span>A3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackC</div>
|
|
|
</div>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/客户端.png"
|
|
|
alt=""
|
|
|
class="server_imgt"
|
|
|
/>
|
|
|
<el-select
|
|
|
v-model="value7"
|
|
|
class="m-2"
|
|
|
placeholder="请选择"
|
|
|
size="default"
|
|
|
style="
|
|
|
width: 135px;
|
|
|
position: absolute;
|
|
|
bottom: 25px;
|
|
|
left: 57px;
|
|
|
height: 25px;
|
|
|
"
|
|
|
:disabled="value7!==''"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in options3"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value"
|
|
|
@click.prevent="selectingNodes3(item.value,1)"
|
|
|
/>
|
|
|
</el-select>
|
|
|
<el-select
|
|
|
v-model="value8"
|
|
|
class="m-2"
|
|
|
placeholder="请选择"
|
|
|
size="default"
|
|
|
style="
|
|
|
width: 135px;
|
|
|
position: absolute;
|
|
|
bottom: 25px;
|
|
|
left: 257px;
|
|
|
height: 25px;
|
|
|
"
|
|
|
:disabled="value8!==''"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in options3"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value"
|
|
|
@click.prevent="selectingNodes3(item.value,2)"
|
|
|
/>
|
|
|
</el-select>
|
|
|
<el-select
|
|
|
v-model="value9"
|
|
|
class="m-2"
|
|
|
placeholder="请选择"
|
|
|
size="default"
|
|
|
style="
|
|
|
width: 135px;
|
|
|
position: absolute;
|
|
|
bottom: 25px;
|
|
|
left: 457px;
|
|
|
height: 25px;
|
|
|
"
|
|
|
:disabled="value9!==''"
|
|
|
>
|
|
|
<el-option
|
|
|
v-for="item in options3"
|
|
|
:key="item.value"
|
|
|
:label="item.label"
|
|
|
:value="item.value"
|
|
|
@click.prevent="selectingNodes3(item.value,3)"
|
|
|
/>
|
|
|
</el-select>
|
|
|
<div class="one_item" v-show="setupFive[0]" >
|
|
|
<img src="@/assets/images/szjj/序号1.png" alt="" />
|
|
|
<span>请求建立block1<br />传输通道</span>
|
|
|
</div>
|
|
|
<div class="one_item tsItem" v-show="setupFive[1]">
|
|
|
<img src="@/assets/images/szjj/序号2.png" alt="" />
|
|
|
<span>请求建立</span>
|
|
|
<span>block1</span>
|
|
|
<span>传输通道</span>
|
|
|
</div>
|
|
|
<div class="one_item tsItem movie_right" v-show="setupFive[2]">
|
|
|
<img src="@/assets/images/szjj/序号3.png" alt="" />
|
|
|
<span>请求建立</span>
|
|
|
<span>block1</span>
|
|
|
<span>传输通道</span>
|
|
|
</div>
|
|
|
<div class="one_item tsItem tsColor" v-show="setupFive[3]">
|
|
|
<img src="@/assets/images/szjj/序号4.png" alt="" />
|
|
|
<span>应答成功</span>
|
|
|
</div>
|
|
|
<div class="one_item tsItem tsColor2" v-show="setupFive[4]">
|
|
|
<img src="@/assets/images/szjj/序号5.png" alt="" />
|
|
|
<span>IO存储备份</span>
|
|
|
<span>成功</span>
|
|
|
</div>
|
|
|
<div class="one_item movie_left" v-show="setupFive[5]">
|
|
|
<img src="@/assets/images/szjj/序号6.png" alt="" />
|
|
|
<span>IO存储成功</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<span style="color:#FFFFFF"
|
|
|
>6、客户端开始往DataNode1上传第一个Block1（先从磁盘读取数据放到一个本地内存缓存），以Packet为单,DataNode1收到一个Packet就会<br />传给DataNode2，DataNode2传给DataNode3；DataNode1每传一个packet会放入一个应答队列等待应答。</span
|
|
|
>
|
|
|
<div class="Server_five ts">
|
|
|
<div class="Server-item">
|
|
|
<div class="item-img">
|
|
|
<span>A1 Server</span>
|
|
|
<span>A2 Server</span>
|
|
|
<span>A3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackA</div>
|
|
|
</div>
|
|
|
<div class="contact">
|
|
|
<img src="@/assets/images/szjj/箭.png" alt="" />
|
|
|
</div>
|
|
|
<div class="Server-item">
|
|
|
<div class="item-img">
|
|
|
<span>A1 Server</span>
|
|
|
<span>A2 Server</span>
|
|
|
<span>A3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackB</div>
|
|
|
</div>
|
|
|
<div class="contact">
|
|
|
<img src="@/assets/images/szjj/箭.png" alt="" />
|
|
|
</div>
|
|
|
<div class="Server-item">
|
|
|
<div class="item-img">
|
|
|
<span>A1 Server</span>
|
|
|
<span>A2 Server</span>
|
|
|
<span>A3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackC</div>
|
|
|
</div>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/客户端.png"
|
|
|
alt=""
|
|
|
class="server_imgt"
|
|
|
/>
|
|
|
<div class="input_seven">
|
|
|
<span style="font-size:14px;">{{value7}}</span>
|
|
|
</div>
|
|
|
<div class="input_seven tsInput">
|
|
|
<span style="font-size:14px;">{{value8}}</span>
|
|
|
</div>
|
|
|
<div class="input_seven tsInput2">
|
|
|
<span style="font-size:14px;">{{value9}}</span>
|
|
|
</div>
|
|
|
<div class="one_item" style="cursor: pointer;" @click="uploadBlock(1)">
|
|
|
<img src="@/assets/images/szjj/序号1.png" alt="" />
|
|
|
<span>传输第一个<br />block1块的数据</span>
|
|
|
</div>
|
|
|
<div class="one_item tsItem" style="cursor: pointer;" v-show="setupSix[0]" @click="uploadBlock(2)">
|
|
|
<img src="@/assets/images/szjj/序号2.png" alt="" />
|
|
|
<span>网络传输备份</span>
|
|
|
</div>
|
|
|
<div class="one_item tsItem movie_right" style="cursor: pointer;" v-show="setupSix[1]" @click="uploadBlock(3)">
|
|
|
<img src="@/assets/images/szjj/序号3.png" alt="" />
|
|
|
<span>网络传输备份</span>
|
|
|
</div>
|
|
|
<div class="one_item tsItem tsColor" v-show="setupSix[2]">
|
|
|
<img src="@/assets/images/szjj/序号4.png" alt="" />
|
|
|
<span>IO存储备份成功</span>
|
|
|
</div>
|
|
|
<div class="one_item tsItem tsColor2" v-show="setupSix[3]">
|
|
|
<img src="@/assets/images/szjj/序号5.png" alt="" />
|
|
|
<span>IO存储备份成功</span>
|
|
|
</div>
|
|
|
<div class="one_item movie_left" v-show="setupSix[4]">
|
|
|
<img src="@/assets/images/szjj/序号6.png" alt="" />
|
|
|
<span>IO存储成功</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<span style="color:#FFFFFF"
|
|
|
>7、当第一个Block1传输完成之后，客户端再次请求NameNode上传第二个Block2、Block3、Block4到相应的服务器。<br />（重复执行4--6步）。数据读写完毕，告知NameNode，记录元数据</span
|
|
|
>
|
|
|
<div style="display: flex">
|
|
|
<div class="Server ts">
|
|
|
<div class="Server-item">
|
|
|
<div class="item-img">
|
|
|
<span>A1 Server</span>
|
|
|
<span>A2 Server</span>
|
|
|
<span>A3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackA</div>
|
|
|
</div>
|
|
|
<div class="contact">
|
|
|
<span>通信联系</span>
|
|
|
<img src="@/assets/images/szjj/箭.png" alt="" />
|
|
|
</div>
|
|
|
<div class="Server-item">
|
|
|
<div class="item-img">
|
|
|
<span>A1 Server</span>
|
|
|
<span>A2 Server</span>
|
|
|
<span>A3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackB</div>
|
|
|
</div>
|
|
|
<div class="contact">
|
|
|
<span>通信联系</span>
|
|
|
<img src="@/assets/images/szjj/箭.png" alt="" />
|
|
|
</div>
|
|
|
<div class="Server-item">
|
|
|
<div class="item-img">
|
|
|
<span>A1 Server</span>
|
|
|
<span>A2 Server</span>
|
|
|
<span>A3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackC</div>
|
|
|
</div>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/客户端.png"
|
|
|
alt=""
|
|
|
class="server_imgt"
|
|
|
/>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/箭头_c.png"
|
|
|
alt=""
|
|
|
class="server_img2"
|
|
|
/>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/主服务器Server.png"
|
|
|
alt=""
|
|
|
class="server_img3"
|
|
|
/>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/result.png"
|
|
|
alt=""
|
|
|
class="server_img4"
|
|
|
/>
|
|
|
<div class="input_seven">
|
|
|
<span style="font-size:14px;">{{value7}}</span>
|
|
|
</div>
|
|
|
<div class="input_seven tsInput">
|
|
|
<span style="font-size:14px;">{{value8}}</span>
|
|
|
</div>
|
|
|
<div class="input_seven tsInput2">
|
|
|
<span style="font-size:14px;">{{value9}}</span>
|
|
|
</div>
|
|
|
<div class="input_seven tsInput3">
|
|
|
<span style="font-size:14px;">NameNode</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="server_right_main">
|
|
|
<span>元数据记录： </span>
|
|
|
<p>Block1：{{value7}}，{{value8}}，{{value9}}</p>
|
|
|
<p>Block2：{{value7}}，{{value8}}，{{value9}}</p>
|
|
|
<p>Block3：{{value7}}，{{value8}}，{{value9}}</p>
|
|
|
<p>Block4：{{value7}}，{{value8}}，{{value9}}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<span style="color:#FFFFFF">8、当从HDFS读出数据时候，遵循以下步骤：</span>
|
|
|
<p style="color:#FFFFFF">步骤①: Client向NameNode发送信息，告知NameNode自己想读取哪一份文件<br />
|
|
|
步骤②: NameNode查找自身存下来的元数据（meta data）。为Client生成一张清单消息，这个消息包括：<br/>
|
|
|
待读取的文件在集群上所有的block信息。<br />
|
|
|
每一个block信息的副本所存放的DataNode的ip地址（有3个副本就有3个DataNode）。同时对这3个地址，按照其和Client的距离排好序。<br />
|
|
|
步骤③: 客户端拿到清单，联系相关的DataNode，请求文件块。DataNode返回文件块给客户端。客户端会选取排序靠前的DataNode来依次读<br />
|
|
|
取Block块，每一个Block都会进行CheckSum若文件不完整，则客户端会继续向NameNode获取下一批的Block列表，直到验证读取出来文件是<br />
|
|
|
完整的，则Block读取完毕。<br />
|
|
|
步骤④客户端会把最终读取出来所有的Block块合并成一个完整的最终文件。</p>
|
|
|
<div style="display:flex;">
|
|
|
<div class="Server ts2">
|
|
|
<div class="Server-item ts_item_top">
|
|
|
<div class="item-img">
|
|
|
<span>A1 Server</span>
|
|
|
<span>A2 Server</span>
|
|
|
<span>A3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackA</div>
|
|
|
</div>
|
|
|
<div class="contact">
|
|
|
<span>通信联系</span>
|
|
|
<img src="@/assets/images/szjj/箭.png" alt="" />
|
|
|
</div>
|
|
|
<div class="Server-item ts_item_top">
|
|
|
<div class="item-img">
|
|
|
<span>A1 Server</span>
|
|
|
<span>A2 Server</span>
|
|
|
<span>A3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackB</div>
|
|
|
</div>
|
|
|
<div class="contact">
|
|
|
<span>通信联系</span>
|
|
|
<img src="@/assets/images/szjj/箭.png" alt="" />
|
|
|
</div>
|
|
|
<div class="Server-item ts_item_top">
|
|
|
<div class="item-img">
|
|
|
<span>A1 Server</span>
|
|
|
<span>A2 Server</span>
|
|
|
<span>A3 Server</span>
|
|
|
</div>
|
|
|
<div class="item-name">机架rackC</div>
|
|
|
</div>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/客户端.png"
|
|
|
alt=""
|
|
|
class="server_imgt"
|
|
|
/>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/箭头_c.png"
|
|
|
alt=""
|
|
|
class="server_img2"
|
|
|
/>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/主服务器Server.png"
|
|
|
alt=""
|
|
|
class="server_img3"
|
|
|
/>
|
|
|
<img
|
|
|
src="@/assets/images/szjj/箭头3_long.png"
|
|
|
alt=""
|
|
|
class="server_img5"
|
|
|
/>
|
|
|
<div class="input_seven">
|
|
|
<span style="font-size:14px;">{{value7}}</span>
|
|
|
</div>
|
|
|
<div class="input_seven tsInput">
|
|
|
<span style="font-size:14px;">{{value8}}</span>
|
|
|
</div>
|
|
|
<div class="input_seven tsInput2">
|
|
|
<span style="font-size:14px;">{{value9}}</span>
|
|
|
</div>
|
|
|
<div class="input_seven tsInput3">
|
|
|
<span style="font-size:14px;">NameNode</span>
|
|
|
</div>
|
|
|
<div class="input_eight">
|
|
|
<span>请求读取文件File</span>
|
|
|
</div>
|
|
|
<div class="input_eight purple">
|
|
|
<span>请求读取Block1</span>
|
|
|
</div>
|
|
|
<div class="input_eight purple2">
|
|
|
<span>请求读取Block2</span>
|
|
|
</div>
|
|
|
<div class="input_eight orange">
|
|
|
<span>请求读取Block1</span>
|
|
|
</div>
|
|
|
<div class="input_eight orange2">
|
|
|
<span>请求读取Block2</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="server_right_main">
|
|
|
<span>元数据记录： </span>
|
|
|
<p>Block1：{{value7}}，{{value8}}，{{value9}}</p>
|
|
|
<p>Block2：{{value7}}，{{value8}}，{{value9}}</p>
|
|
|
<p>Block3：{{value7}}，{{value8}}，{{value9}}</p>
|
|
|
<p>Block4：{{value7}}，{{value8}}，{{value9}}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</el-scrollbar>
|
|
|
<div class="dialog-footer">
|
|
|
<el-button @click="sendTitle()" class="tj">提交任务</el-button>
|
|
|
<el-button type="primary" @click="resultShow" class="cxks">
|
|
|
重新开始
|
|
|
</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<span @click="hadoophdfsDialogVisible = true"></span>
|
|
|
</div>
|
|
|
<el-dialog
|
|
|
custom-class="gdialog"
|
|
|
v-model="hadoophdfsDialogVisible"
|
|
|
title="Hadoop HDFS"
|
|
|
width="66%"
|
|
|
:before-close="commitEcho"
|
|
|
>
|
|
|
<el-scrollbar height="660px">
|
|
|
<p style="font-weight:600;">一、 分布式文件系统</p><p>
|
|
|
分布式文件系统是横跨在多台计算机上的存储系统，是分布式系统的一个应用子集。这些互相联网的计算机，也被称为集群。<br />
|
|
|
Hadoop Distributed File System（简称 HDFS）是一个分布式文件系统，是
|
|
|
Hadoop
|
|
|
的核心组件之一。它能够将大规模数据存储到多个服务器集群上，并提供数据访问服务。它的主要优势是：<br />
|
|
|
•
|
|
|
高容错性（受益于它的“副本拷贝”机制和“机架感知”机制），适合部署在廉价的机器上。<br />
|
|
|
• 高吞吐量的数据写入和访问
|
|
|
</p>
|
|
|
|
|
|
<p style="font-weight:600;">二、HDFS的架构</p><p>HDFS中有三个重要的模块：NameNode（名称节点）、DataNode（数据节点）和Client（客户节点）。这三个模块用典型的master/slave（主从）模式进行搭建。
|
|
|
</p>
|
|
|
<p><img src="@/assets/images/szjj/u2016.png" alt="" /></p>
|
|
|
<p>
|
|
|
1、NameNode：即master节点。是分布式文件系统中的管理者。<br />
|
|
|
NameNode的主要职责有：<br />
|
|
|
• 管理文件系统的命名空间<br />
|
|
|
• 管理集群的配置信息<br />
|
|
|
•
|
|
|
管理文件块（block）的复制（文件块是HDFS中的基本读写单元，在下面会细说）<br />
|
|
|
• 监测DataNode及其所存储的数据的情况（心跳机制和数据报告机制）<br />
|
|
|
为了履行好这些职责，NameNode将文件系统的元数据（meta
|
|
|
data）存放在自己的内存中，元数据里主要包括：<br />
|
|
|
• 文件信息<br />
|
|
|
• 每一个文件对应的文件块的信息（block_id）<br />
|
|
|
• 每一个文件块所存放的DataNode的信息<br />
|
|
|
NameNode是整个HDFS中唯一的单点，因此它一旦故障，就会引起整个集群的故障。针对此做了一个防护措施，即构建一个节点Secondary
|
|
|
NameNode，该节点定期与NameNode进行通信，获取元数据的快照存储下来。<br />
|
|
|
2、DataNode：即slave节点，是真正存放文件数据的地方。更严谨地说，它存放的是文件块。<br />
|
|
|
•
|
|
|
通过心跳机制（heartbeat），它每隔3s就会向NameNode发送一次心跳，告诉NameNode自己没宕机。如果NameNode连续10min都没有收到心跳，它会认为这个DataNode已经死掉，所以将这个DataNode移出集群，并启动一个进程恢复数据，同时做好相应记录。<br />
|
|
|
•
|
|
|
通过数据报告机制，它在固定的周期内会向NameNode发送自己存储的所有文件块的信息（验证和校验）。这个机制让NameNode知道哪些数据副本已经损坏，及时创建副本（只要DataNode没死掉），并做好记录。<br />
|
|
|
3、Client：客户端，它的主要职责如下：<br />
|
|
|
• 切分文件。把一份文件切分成若干个文件块。<br />
|
|
|
• 与NameNode进行交互，获得文件信息和相关的DataNode的信息。<br />
|
|
|
• 与DataNode进行直接交互，进行相关的数据流操作。<br />
|
|
|
以上三种类型的节点承担起了HDFS运作的主要工作，在Hadoop中，还有另外两个主要节点：JobTracker（作业跟踪节点）和TaskTracker（任务跟踪节点）。这两个节点在MapReduce的运作中起到重要作用。由于这里只关注HDFS数据的写和读，因此先略过这两个节点。在数据计算，即MapReduce中，再来看这两个节点。
|
|
|
</p>
|
|
|
<p style="font-weight:600;">三、HDFS写入数据</p>
|
|
|
<p><img src="@/assets/images/szjj/u2022.png" alt="" /></p>
|
|
|
<p>
|
|
|
步骤1：Client想写入一份文件，它首先将文件切分成若干个块（block），每个块64MB（或128MB）。例如原始文件200MB，则它被切分成四块，分别是64+64+64+8。<br />
|
|
|
然后它开始逐个处理文件块，针对第一个文件块（以下简称block1），它向NameNode发生请求：<br />
|
|
|
• 每一个文件块，我都想在集群上存3个副本<br />
|
|
|
• 因此，请帮我在集群上找到3个可以存副本的DataNode<br />
|
|
|
“3”只是个默认值，Client可以自定义想要存放的副本个数
|
|
|
</p>
|
|
|
<p>
|
|
|
步骤2：NameNode接收到Client的信息，做了如下处理<br />
|
|
|
• 把这个文件块复制3份<br />
|
|
|
• 为这个文件块找到可用的三个数据节点：DateNode A，DataNode E和DataNode
|
|
|
F。在找可用数据节点的过程中，NameNode启用了机架感知机制（rack-awareness):<br />
|
|
|
若Client在集群中，则将Client所在的节点选为第一个数据节点。<br />
|
|
|
若Client不在集群中，则随机选择一个节点。<br />
|
|
|
• 就这样，NameNode选中了DataNode A<br />
|
|
|
•
|
|
|
第二个数据节点需要满足：和第一个数据节点在不同的机架（rack）上。就这样。NameNode选择了DataNode
|
|
|
E。<br />
|
|
|
•
|
|
|
第三个数据节点需要满足：和第二个数据节点在同一个机架上。就这样，NameNode选择了DataNode
|
|
|
F<br />
|
|
|
采用机架感知机制的原因是，在存放运行Hadoop和HDFS机器的数据中心中，一个机架共享同一个电源，网线和交换机。因此如果有意外，通常是一整个机架上所有的机器一起宕机。所以把副本存放在不同的机架上，也是为了有效应对这个情况。<br />
|
|
|
•
|
|
|
将选好的三个数据节点的相关信息告诉Client，让Client自己和数据节点进行交流
|
|
|
</p>
|
|
|
<p>
|
|
|
• 步骤3：Client接收到数据节点信息，接下来发生了几件事：<br />
|
|
|
Client直接联系DataNode A，告诉它存放一个block1的副本；<br />
|
|
|
DataNode A联系DataNode E，告诉它存放一个block1的副本；<br />
|
|
|
DataNode E联系DataNodeF，告诉它存放一个block1的副本。<br />
|
|
|
•
|
|
|
步骤4：三个副本都存放在各自的DataNode上后，三个DataNode给NameNode发送消息，告知NameNode存放已经完成。<br />
|
|
|
• 步骤5:
|
|
|
第一个block的存储结束后，其余block按照相同的流程进行存储。所有block存完之后，Client将会通知NameNode终止写入流程。
|
|
|
</p>
|
|
|
<P style="font-weight:600;">四、HDFS读出数据</P>
|
|
|
<p><img src="@/assets/images/szjj/u2031.png" alt="" /></p>
|
|
|
<P>
|
|
|
• 步骤1: Client向NameNode发送信息，告知NameNode自己想读取哪一份文件<br />
|
|
|
• 步骤2: NameNode查找自身存下来的元数据（meta
|
|
|
data）。为Client生成一张清单消息，这个消息包括：<br />
|
|
|
待读取的文件在集群上所有的block信息。<br />
|
|
|
每一个block信息的副本所存放的DataNode的ip地址（有3个副本就有3个DataNode）。同时对这3个地址，按照其和Client的距离排好序。<br />
|
|
|
• 步骤3:
|
|
|
客户端拿到清单，联系相关的DataNode，请求文件块。DataNode返回文件块给客户端。返回完毕后关闭连接
|
|
|
</P>
|
|
|
</el-scrollbar>
|
|
|
<template #footer>
|
|
|
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<el-dialog
|
|
|
v-model="dialogVisible"
|
|
|
title="比较剪枝"
|
|
|
width="15%"
|
|
|
:before-close="handleClose"
|
|
|
custom-class="dialog"
|
|
|
>
|
|
|
<div class="left_two">
|
|
|
<el-radio label="1" @click.prevent="clickRadio(1)">交换机</el-radio>
|
|
|
<el-radio label="1" @click.prevent="clickRadio(0)">华为MateStation S</el-radio>
|
|
|
<el-radio label="1" @click.prevent="clickRadio(2)">TaiShan服务器</el-radio>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
</template>
|
|
|
<script setup>
|
|
|
// import {getUserId} from '@/utils/auth.js'
|
|
|
import { getUserInfo } from '@/utils/auth'
|
|
|
import {submitTrainingTask,trainingOperationRecords,HDFSViewOperationRecords} from '@/api/hash/digitalEconomy.js'
|
|
|
import { onMounted } from 'vue';
|
|
|
const { proxy } = getCurrentInstance();
|
|
|
const dialogVisible=ref(false)
|
|
|
const hadoophdfsDialogVisible = ref(false);
|
|
|
let errorNumber=0
|
|
|
const value1=ref('')
|
|
|
const value2=ref('')
|
|
|
const value3=ref('')
|
|
|
const value4=ref('')
|
|
|
const value5=ref('')
|
|
|
const value6=ref('')
|
|
|
const value7=ref('')
|
|
|
const value8=ref('')
|
|
|
const value9=ref('')
|
|
|
const options1 = ref([
|
|
|
{
|
|
|
value: "NameNode",
|
|
|
label: "NameNode",
|
|
|
},
|
|
|
{
|
|
|
value: "DataNode1",
|
|
|
label: "DataNode1",
|
|
|
},
|
|
|
{
|
|
|
value: "DataNode2",
|
|
|
label: "DataNode2",
|
|
|
},
|
|
|
{
|
|
|
value: "DataNode3",
|
|
|
label: "DataNode3",
|
|
|
},
|
|
|
]);
|
|
|
const options2 = [
|
|
|
{
|
|
|
value: "NameNode",
|
|
|
label: "NameNode",
|
|
|
},
|
|
|
{
|
|
|
value: "DataNode1",
|
|
|
label: "DataNode1",
|
|
|
},
|
|
|
{
|
|
|
value: "DataNode2",
|
|
|
label: "DataNode2",
|
|
|
},
|
|
|
{
|
|
|
value: "DataNode3",
|
|
|
label: "DataNode3",
|
|
|
},
|
|
|
];
|
|
|
const options3 = ref([
|
|
|
{
|
|
|
value: "NameNode",
|
|
|
label: "NameNode",
|
|
|
},
|
|
|
{
|
|
|
value: "DataNode1",
|
|
|
label: "DataNode1",
|
|
|
},
|
|
|
{
|
|
|
value: "DataNode2",
|
|
|
label: "DataNode2",
|
|
|
},
|
|
|
{
|
|
|
value: "DataNode3",
|
|
|
label: "DataNode3",
|
|
|
},
|
|
|
]);
|
|
|
const clientIndex=ref(0)
|
|
|
const setupNumber=ref(0)
|
|
|
const clientSelect=(index)=>{
|
|
|
if(content.value[index]===1){
|
|
|
proxy.$modal.msgWarning("已选择！")
|
|
|
return
|
|
|
}
|
|
|
dialogVisible.value=true
|
|
|
clientIndex.value=index
|
|
|
}
|
|
|
const content=ref([0,0,0])
|
|
|
const clickRadio=(index)=>{
|
|
|
if(clientIndex.value!==index){
|
|
|
proxy.$modal.msgWarning("选择错误！")
|
|
|
errorNumber++
|
|
|
return
|
|
|
}
|
|
|
content.value[clientIndex.value]=1
|
|
|
const allOnes = content.value.every(item => item === 1);
|
|
|
console.log(content.value);
|
|
|
if (allOnes) {
|
|
|
setupNumber.value=1
|
|
|
}
|
|
|
proxy.$modal.msgSuccess("选择正确！")
|
|
|
dialogVisible.value=false
|
|
|
}
|
|
|
|
|
|
const isValue=ref([0,0,0,0])
|
|
|
const selectingNodes=(value,index)=>{
|
|
|
if(setupNumber.value!==1){
|
|
|
proxy.$modal.msgWarning("请完成上一步！")
|
|
|
value1.value=''
|
|
|
value2.value=''
|
|
|
value3.value=''
|
|
|
value4.value=''
|
|
|
return
|
|
|
}
|
|
|
if(value1.value!=="NameNode"&&index===0){
|
|
|
proxy.$modal.msgWarning("选择错误！")
|
|
|
setupNumber++
|
|
|
value1.value=''
|
|
|
return
|
|
|
}
|
|
|
if(value2.value==="NameNode"||value3.value==="NameNode"||value4.value==="NameNode"){
|
|
|
proxy.$modal.msgWarning("选择错误！")
|
|
|
if(index===1){
|
|
|
value2.value=''
|
|
|
}
|
|
|
if(index===2){
|
|
|
value3.value=''
|
|
|
}
|
|
|
if(index===3){
|
|
|
value4.value=''
|
|
|
}
|
|
|
setupNumber++
|
|
|
return
|
|
|
}
|
|
|
if(isValue.value[index]===0){
|
|
|
removeOption(value)
|
|
|
}
|
|
|
isValue.value[index]=1
|
|
|
const allOnes = isValue.value.every(item => item === 1);
|
|
|
if (allOnes) {
|
|
|
setupNumber.value=2
|
|
|
}
|
|
|
}
|
|
|
// 在选中某个值后调用该方法来移除对应的选项
|
|
|
const removeOption=(valueToRemove)=>{
|
|
|
options1.value = options1.value.filter(item => item.value !== valueToRemove);
|
|
|
}
|
|
|
|
|
|
//步骤三
|
|
|
const showBlock=ref([false,false,false,false])
|
|
|
const box1Transform = ref('');
|
|
|
const box2Transform = ref('');
|
|
|
const box3Transform = ref('');
|
|
|
const box4Transform = ref('');
|
|
|
const moveBoxes=()=>{
|
|
|
if(setupNumber.value<2){
|
|
|
proxy.$modal.msgWarning("请完成上一步！")
|
|
|
return
|
|
|
}
|
|
|
showBlock.value=[true,true,true,true]
|
|
|
setTimeout(() => {
|
|
|
box1Transform.value = 'translateX(375px) translateY(-80px)'
|
|
|
}, 400);
|
|
|
setTimeout(() => {
|
|
|
box2Transform.value = 'translateX(375px) translateY(-26px)'
|
|
|
}, 600);
|
|
|
setTimeout(() => {
|
|
|
box3Transform.value = 'translateX(375px) translateY(27px)'
|
|
|
}, 800);
|
|
|
setTimeout(() => {
|
|
|
box4Transform.value = 'translateX(375px) translateY(79px)'
|
|
|
}, 1000);
|
|
|
setupNumber.value=3
|
|
|
}
|
|
|
const isGreen=ref(false)
|
|
|
const isGreen2=ref(false)
|
|
|
const isGreen3=ref(false)
|
|
|
const isGreen4=ref(false)
|
|
|
const setupFour=ref([false,false,false,false,false,false,false,false,false,false])
|
|
|
const selectingNodes2=(item,index)=>{
|
|
|
if(setupNumber.value!==3){
|
|
|
proxy.$modal.msgWarning("请完成上一步！")
|
|
|
value5.value=''
|
|
|
value6.value=''
|
|
|
return
|
|
|
}
|
|
|
if(item!=='NameNode'&&index===1){
|
|
|
proxy.$modal.msgWarning("请选择正确的角色！")
|
|
|
value5.value=''
|
|
|
errorNumber++
|
|
|
return
|
|
|
}
|
|
|
if(item==='NameNode'&&index===2){
|
|
|
proxy.$modal.msgWarning("请选择正确的角色！")
|
|
|
value6.value=''
|
|
|
errorNumber++
|
|
|
return
|
|
|
}
|
|
|
if(value5.value!==''&&value6.value!==''){
|
|
|
setupFour.value[0]=true
|
|
|
setTimeout(() => {
|
|
|
setupFour.value[1]=true
|
|
|
}, 1000);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const requestFileUpload=()=>{
|
|
|
isGreen.value=true
|
|
|
proxy.$modal.msgSuccess("上传成功！")
|
|
|
setupFour.value[2]=true
|
|
|
setTimeout(() => {
|
|
|
setupFour.value[3]=true
|
|
|
}, 1000);
|
|
|
}
|
|
|
const requestFileUpload2=()=>{
|
|
|
isGreen2.value=true
|
|
|
proxy.$modal.msgSuccess("返回成功！")
|
|
|
setupFour.value[4]=true
|
|
|
setTimeout(() => {
|
|
|
setupFour.value[5]=true
|
|
|
}, 1000);
|
|
|
setTimeout(() => {
|
|
|
setupFour.value[6]=true
|
|
|
}, 2000);
|
|
|
}
|
|
|
const requestFileUpload3=()=>{
|
|
|
isGreen3.value=true
|
|
|
proxy.$modal.msgSuccess("请求成功！")
|
|
|
setTimeout(() => {
|
|
|
setupFour.value[7]=true
|
|
|
}, 1000);
|
|
|
setTimeout(() => {
|
|
|
setupFour.value[8]=true
|
|
|
}, 2000);
|
|
|
}
|
|
|
const requestFileUpload4=()=>{
|
|
|
isGreen4.value=true
|
|
|
proxy.$modal.msgSuccess("返还成功！")
|
|
|
setTimeout(() => {
|
|
|
setupFour.value[9]=true
|
|
|
}, 1000);
|
|
|
setupNumber.value=4
|
|
|
}
|
|
|
|
|
|
//步骤五
|
|
|
const setupFive=ref([false,false,false,false,false,false])
|
|
|
const selectIndex=ref(0)
|
|
|
const selectingNodes3=(item,index)=>{
|
|
|
if(setupNumber.value!==4){
|
|
|
proxy.$modal.msgWarning("请完成上一步！")
|
|
|
value7.value=''
|
|
|
value8.value=''
|
|
|
value9.value=''
|
|
|
return
|
|
|
}
|
|
|
if(item==='NameNode'){
|
|
|
errorNumber++
|
|
|
proxy.$modal.msgWarning("请选择数据节点！")
|
|
|
if(index===1){
|
|
|
value7.value=''
|
|
|
}
|
|
|
if(index===2){
|
|
|
value8.value=''
|
|
|
}
|
|
|
if(index===3){
|
|
|
value9.value=''
|
|
|
}
|
|
|
return
|
|
|
}
|
|
|
if(selectIndex.value===0&&index!==1){
|
|
|
errorNumber++
|
|
|
proxy.$modal.msgWarning("请先选择机架rackA！")
|
|
|
value7.value=''
|
|
|
value8.value=''
|
|
|
value9.value=''
|
|
|
return
|
|
|
}
|
|
|
if(selectIndex.value===1&&index!==2){
|
|
|
errorNumber++
|
|
|
proxy.$modal.msgWarning("请先选择机架rackB！")
|
|
|
value7.value=''
|
|
|
value8.value=''
|
|
|
value9.value=''
|
|
|
return
|
|
|
}
|
|
|
if(selectIndex.value===2&&index!==3){
|
|
|
errorNumber++
|
|
|
proxy.$modal.msgWarning("请先选择机架rackB！")
|
|
|
value7.value=''
|
|
|
value8.value=''
|
|
|
value9.value=''
|
|
|
return
|
|
|
}
|
|
|
if(index===1){
|
|
|
setupFive.value[0]=true
|
|
|
setTimeout(() => {
|
|
|
setupFive.value[1]=true
|
|
|
}, 1000);
|
|
|
}
|
|
|
if(index===2){
|
|
|
setupFive.value[2]=true
|
|
|
}
|
|
|
if(index===3){
|
|
|
setupFive.value[3]=true
|
|
|
setTimeout(() => {
|
|
|
setupFive.value[4]=true
|
|
|
}, 1000);
|
|
|
setTimeout(() => {
|
|
|
setupFive.value[5]=true
|
|
|
}, 2000);
|
|
|
setupNumber.value=5
|
|
|
}
|
|
|
selectIndex.value=selectIndex.value+1
|
|
|
removeOption2(item)
|
|
|
}
|
|
|
const removeOption2=(valueToRemove)=>{
|
|
|
options3.value = options3.value.filter(item => item.value !== valueToRemove);
|
|
|
}
|
|
|
|
|
|
//步骤六
|
|
|
const setupSix=ref([false,false,false,false,false])
|
|
|
const uploadBlock=(index)=>{
|
|
|
if(setupNumber.value!==5){
|
|
|
proxy.$modal.msgWarning("请完成上一步！")
|
|
|
return
|
|
|
}
|
|
|
if(index===1){
|
|
|
setTimeout(() => {
|
|
|
setupSix.value[0]=true
|
|
|
proxy.$modal.msgSuccess("传输成功！")
|
|
|
}, 1000);
|
|
|
}
|
|
|
if(index===2){
|
|
|
setTimeout(() => {
|
|
|
setupSix.value[1]=true
|
|
|
proxy.$modal.msgSuccess("备份成功！")
|
|
|
}, 1000);
|
|
|
}
|
|
|
if(index===3){
|
|
|
setTimeout(() => {
|
|
|
setupSix.value[2]=true
|
|
|
}, 1000);
|
|
|
setTimeout(() => {
|
|
|
setupSix.value[3]=true
|
|
|
}, 2000);
|
|
|
setTimeout(() => {
|
|
|
setupSix.value[4]=true
|
|
|
proxy.$modal.msgSuccess("IO存储成功！")
|
|
|
setupNumber.value=6
|
|
|
}, 3000);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const sendTitle=async()=>{
|
|
|
if(setupNumber.value!==6){
|
|
|
proxy.$modal.msgWarning("请完成任务后提交！")
|
|
|
return
|
|
|
}
|
|
|
try{
|
|
|
const sendData={
|
|
|
module:'大数据',
|
|
|
numberOfErrors:errorNumber > 10 ? 10 : errorNumber,
|
|
|
taskName:'hadoop HDFS',
|
|
|
userId:JSON.parse(getUserInfo()).userId
|
|
|
}
|
|
|
const res=await submitTrainingTask(sendData)
|
|
|
proxy.$modal.msgSuccess("提交成功！")
|
|
|
hadoophdfsDialogVisible.value=false
|
|
|
}catch{}
|
|
|
}
|
|
|
|
|
|
const getListEcho=async()=>{
|
|
|
try{
|
|
|
const sendData={
|
|
|
module:'大数据',
|
|
|
userId:JSON.parse(getUserInfo()).userId
|
|
|
}
|
|
|
const res=await HDFSViewOperationRecords(sendData)
|
|
|
echoShow(res.data[0])
|
|
|
}catch{}
|
|
|
}
|
|
|
const echoShow=(data)=>{
|
|
|
setupNumber.value=parseFloat(data.fieldEight)
|
|
|
errorNumber=parseFloat(data.fieldFourteen)
|
|
|
if(setupNumber.value>=1){
|
|
|
content.value[0]=1
|
|
|
content.value[1]=1
|
|
|
content.value[2]=1
|
|
|
}
|
|
|
if(setupNumber.value>=2){
|
|
|
value1.value='NameNode'
|
|
|
value2.value='DataNode1'
|
|
|
value3.value='DataNode2'
|
|
|
value4.value='DataNode3'
|
|
|
isValue.value[0]=1
|
|
|
isValue.value[1]=1
|
|
|
isValue.value[2]=1
|
|
|
isValue.value[3]=1
|
|
|
}
|
|
|
if(setupNumber.value>=3){
|
|
|
moveBoxes()
|
|
|
setupNumber.value=parseFloat(data.fieldEight)
|
|
|
}
|
|
|
if(setupNumber.value>=4){
|
|
|
setupFour.value[0]=true
|
|
|
setupFour.value[1]=true
|
|
|
setupFour.value[2]=true
|
|
|
setupFour.value[3]=true
|
|
|
setupFour.value[4]=true
|
|
|
setupFour.value[5]=true
|
|
|
setupFour.value[6]=true
|
|
|
setupFour.value[7]=true
|
|
|
setupFour.value[8]=true
|
|
|
setupFour.value[9]=true
|
|
|
isGreen.value=true
|
|
|
isGreen2.value=true
|
|
|
isGreen3.value=true
|
|
|
isGreen4.value=true
|
|
|
value5.value=data.fieldEighteen
|
|
|
value6.value=data.fieldEleven
|
|
|
}
|
|
|
if(setupNumber.value>=5){
|
|
|
setupFive.value[0]=true
|
|
|
setupFive.value[1]=true
|
|
|
setupFive.value[2]=true
|
|
|
setupFive.value[3]=true
|
|
|
setupFive.value[4]=true
|
|
|
setupFive.value[5]=true
|
|
|
value7.value=data.fieldFifteen
|
|
|
value8.value=data.fieldFive
|
|
|
value9.value=data.fieldFour
|
|
|
}
|
|
|
if(setupNumber.value>=6){
|
|
|
setupSix.value[0]=true
|
|
|
setupSix.value[1]=true
|
|
|
setupSix.value[2]=true
|
|
|
setupSix.value[3]=true
|
|
|
setupSix.value[4]=true
|
|
|
}
|
|
|
}
|
|
|
onMounted(()=>{
|
|
|
getListEcho()
|
|
|
})
|
|
|
const commitEcho=async()=>{
|
|
|
|
|
|
hadoophdfsDialogVisible.value=false
|
|
|
}
|
|
|
const resultShow=()=>{
|
|
|
setupNumber.value=0
|
|
|
content.value[0]=0
|
|
|
content.value[1]=0
|
|
|
content.value[2]=0
|
|
|
value1.value=''
|
|
|
value2.value=''
|
|
|
value3.value=''
|
|
|
value4.value=''
|
|
|
isValue.value[0]=0
|
|
|
isValue.value[1]=0
|
|
|
isValue.value[2]=0
|
|
|
isValue.value[3]=0
|
|
|
showBlock.value=[false,false,false,false]
|
|
|
setupFour.value[0]=false
|
|
|
setupFour.value[1]=false
|
|
|
setupFour.value[2]=false
|
|
|
setupFour.value[3]=false
|
|
|
setupFour.value[4]=false
|
|
|
setupFour.value[5]=false
|
|
|
setupFour.value[6]=false
|
|
|
setupFour.value[7]=false
|
|
|
setupFour.value[8]=false
|
|
|
setupFour.value[9]=false
|
|
|
isGreen.value=false
|
|
|
isGreen2.value=false
|
|
|
isGreen3.value=false
|
|
|
isGreen4.value=false
|
|
|
value5.value=''
|
|
|
value6.value=''
|
|
|
setupFive.value[0]=false
|
|
|
setupFive.value[1]=false
|
|
|
setupFive.value[2]=false
|
|
|
setupFive.value[3]=false
|
|
|
setupFive.value[4]=false
|
|
|
setupFive.value[5]=false
|
|
|
value7.value=''
|
|
|
value8.value=''
|
|
|
value9.value=''
|
|
|
setupSix.value[0]=false
|
|
|
setupSix.value[1]=false
|
|
|
setupSix.value[2]=false
|
|
|
setupSix.value[3]=false
|
|
|
setupSix.value[4]=false
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
p {
|
|
|
font-size: 15px;
|
|
|
line-height: 20px;
|
|
|
color: #FFFFFF;
|
|
|
// font-weight: 600;
|
|
|
}
|
|
|
.HadoophDFS {
|
|
|
display: flex;
|
|
|
.left {
|
|
|
width: calc(100% - 216px);
|
|
|
// height: 100%;
|
|
|
}
|
|
|
.right {
|
|
|
width: 216px;
|
|
|
padding-left: 60px;
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
width: 110px;
|
|
|
height: 143px;
|
|
|
background: url("@/assets/images/szjj/案例任务.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
span {
|
|
|
font-size: 15px;
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: bold;
|
|
|
color: #333333;
|
|
|
}
|
|
|
.ts {
|
|
|
height: 420px !important;
|
|
|
}
|
|
|
.ts2 {
|
|
|
margin: 10px 0px !important;
|
|
|
height: 482px !important;
|
|
|
}
|
|
|
.Server_five {
|
|
|
position: relative;
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
justify-content: center;
|
|
|
grid-gap: 91px;
|
|
|
width: calc(100% - 47%);
|
|
|
height: 368px;
|
|
|
margin: 10px 0px 40px 0px;
|
|
|
padding: 0px 73px;
|
|
|
background: url("@/assets/images/szjj/圆角矩形 10.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
.Server-item {
|
|
|
margin-top: 153px;
|
|
|
|
|
|
.item-img {
|
|
|
height: 182px;
|
|
|
padding: 80px 7px 19px 7px;
|
|
|
background: url("@/assets/images/szjj/机箱.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
min-width: 100%;
|
|
|
height: 23px;
|
|
|
line-height: 30px;
|
|
|
background: url("@/assets/images/szjj/按钮.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
margin-bottom: 7px;
|
|
|
padding: 0px 7px;
|
|
|
font-size: 12px;
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: bold;
|
|
|
color: #fbfcff;
|
|
|
}
|
|
|
}
|
|
|
.item-name {
|
|
|
text-align: center;
|
|
|
margin-top: 6px;
|
|
|
}
|
|
|
}
|
|
|
.Server-item:nth-child(1) {
|
|
|
&::before {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 14px;
|
|
|
height: 59px;
|
|
|
position: absolute;
|
|
|
background: url("@/assets/images/szjj/箭头@2x(2).png")
|
|
|
no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
top: 95px;
|
|
|
left: 18.4%;
|
|
|
}
|
|
|
}
|
|
|
.contact {
|
|
|
position: absolute;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
top: 54%;
|
|
|
left: 29%;
|
|
|
}
|
|
|
.contact:nth-child(2) {
|
|
|
position: absolute;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
top: 54%;
|
|
|
left: 60%;
|
|
|
}
|
|
|
.server_imgt {
|
|
|
// cursor: pointer;
|
|
|
position: absolute;
|
|
|
top: 15px;
|
|
|
left: 78px;
|
|
|
z-index: 1;
|
|
|
}
|
|
|
.server_img2 {
|
|
|
position: absolute;
|
|
|
top: 32px;
|
|
|
left: 165px;
|
|
|
}
|
|
|
.server_img3 {
|
|
|
position: absolute;
|
|
|
top: 15px;
|
|
|
left: 273px;
|
|
|
}
|
|
|
.server_img4 {
|
|
|
position: absolute;
|
|
|
top: 75px;
|
|
|
left: 147px;
|
|
|
}
|
|
|
.server_item {
|
|
|
position: absolute;
|
|
|
top: 99px;
|
|
|
left: 139px;
|
|
|
width: 146px;
|
|
|
height: 19px;
|
|
|
background: #5621f8;
|
|
|
border-radius: 4px;
|
|
|
span {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
font-size: 12px;
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
.one_item {
|
|
|
position: absolute;
|
|
|
top: 98px;
|
|
|
left: 152px;
|
|
|
width: 95px;
|
|
|
height: 54px;
|
|
|
background: #5621f8;
|
|
|
border-radius: 5px;
|
|
|
text-align: center;
|
|
|
padding: 2px;
|
|
|
span {
|
|
|
text-align: left;
|
|
|
font-size: 12px;
|
|
|
font-weight: 400;
|
|
|
color: #f8fbff;
|
|
|
display: block;
|
|
|
text-align: center
|
|
|
}
|
|
|
}
|
|
|
.tsItem {
|
|
|
width: 76px !important;
|
|
|
height: 70px !important;
|
|
|
top: 156px !important;
|
|
|
left: 208px !important;
|
|
|
text-align: center !important;
|
|
|
span {
|
|
|
text-align: center !important;
|
|
|
}
|
|
|
}
|
|
|
.movie_right {
|
|
|
left: 428px !important;
|
|
|
}
|
|
|
.tsColor {
|
|
|
background: #ff9936;
|
|
|
top: 243px !important;
|
|
|
left: 427px !important;
|
|
|
}
|
|
|
.tsColor2 {
|
|
|
background: #ff9936;
|
|
|
top: 243px !important;
|
|
|
left: 208px !important;
|
|
|
}
|
|
|
.movie_left {
|
|
|
background: #ff9936;
|
|
|
left: 22px !important;
|
|
|
span {
|
|
|
text-align: center;
|
|
|
}
|
|
|
}
|
|
|
.input_seven {
|
|
|
width: 135px;
|
|
|
height: 28px;
|
|
|
background: #ffffff;
|
|
|
border: 1px solid #e5e5e5;
|
|
|
border-radius: 2px;
|
|
|
position: absolute;
|
|
|
bottom: 20px;
|
|
|
left: 57px;
|
|
|
padding: 4px 25px;
|
|
|
}
|
|
|
.tsInput {
|
|
|
left: 257px !important;
|
|
|
}
|
|
|
.tsInput2 {
|
|
|
left: 457px !important;
|
|
|
}
|
|
|
}
|
|
|
.Server {
|
|
|
position: relative;
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
justify-content: center;
|
|
|
grid-gap: 91px;
|
|
|
width: calc(100% - 47%);
|
|
|
height: 368px;
|
|
|
margin: 10px 0px 40px 0px;
|
|
|
padding: 0px 73px;
|
|
|
background: url("@/assets/images/szjj/圆角矩形 10.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
.ts_item_top{
|
|
|
margin-top: 218px !important;
|
|
|
}
|
|
|
.ts_item_top:nth-child(1) {
|
|
|
&::before {
|
|
|
background: url("@/assets/images/szjj/箭头2_long.png")
|
|
|
no-repeat !important;
|
|
|
height: 119px !important;
|
|
|
}
|
|
|
}
|
|
|
.ts_item_top:nth-child(3) {
|
|
|
&::after {
|
|
|
background: url("@/assets/images/szjj/箭头2_long.png")
|
|
|
no-repeat !important;
|
|
|
height: 119px !important;
|
|
|
}
|
|
|
}
|
|
|
.ts_item_top:nth-child(3) {
|
|
|
&::before {
|
|
|
background: url("@/assets/images/szjj/箭头5_long.png")
|
|
|
no-repeat !important;
|
|
|
height: 130px !important;
|
|
|
top:83px !important;
|
|
|
}
|
|
|
}
|
|
|
.Server-item {
|
|
|
margin-top: 153px;
|
|
|
.item-img {
|
|
|
height: 182px;
|
|
|
padding: 80px 7px 19px 7px;
|
|
|
background: url("@/assets/images/szjj/机箱.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
span {
|
|
|
display: inline-block;
|
|
|
min-width: 100%;
|
|
|
height: 23px;
|
|
|
line-height: 30px;
|
|
|
background: url("@/assets/images/szjj/按钮.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
margin-bottom: 7px;
|
|
|
padding: 0px 7px;
|
|
|
font-size: 12px;
|
|
|
font-family: Source Han Sans CN;
|
|
|
font-weight: bold;
|
|
|
color: #fbfcff;
|
|
|
}
|
|
|
}
|
|
|
.item-name {
|
|
|
text-align: center;
|
|
|
margin-top: 6px;
|
|
|
}
|
|
|
}
|
|
|
.Server-item:nth-child(1) {
|
|
|
&::before {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 14px;
|
|
|
height: 59px;
|
|
|
position: absolute;
|
|
|
background: url("@/assets/images/szjj/箭头@2x(2).png")
|
|
|
no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
top: 95px;
|
|
|
left: 18.4%;
|
|
|
}
|
|
|
}
|
|
|
.Server-item:nth-child(3) {
|
|
|
&::after {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 14px;
|
|
|
height: 59px;
|
|
|
position: absolute;
|
|
|
background: url("@/assets/images/szjj/箭头@2x(2).png")
|
|
|
no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
top: 95px;
|
|
|
left: 49.4%;
|
|
|
}
|
|
|
}
|
|
|
.Server-item:nth-child(3) {
|
|
|
&::before {
|
|
|
content: "";
|
|
|
display: block;
|
|
|
width: 122px;
|
|
|
height: 58px;
|
|
|
position: absolute;
|
|
|
background: url("@/assets/images/szjj/箭头 拷贝.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
top: 76px;
|
|
|
left: 60%;
|
|
|
}
|
|
|
}
|
|
|
.contact {
|
|
|
position: absolute;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
top: 64%;
|
|
|
left: 29%;
|
|
|
}
|
|
|
.contact:nth-child(2) {
|
|
|
position: absolute;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
top: 64%;
|
|
|
left: 60%;
|
|
|
}
|
|
|
.server_imgt {
|
|
|
// cursor: pointer;
|
|
|
position: absolute;
|
|
|
top: 15px;
|
|
|
left: 78px;
|
|
|
// z-index: 1;
|
|
|
}
|
|
|
.server_img2 {
|
|
|
position: absolute;
|
|
|
top: 32px;
|
|
|
left: 165px;
|
|
|
}
|
|
|
.server_img3 {
|
|
|
position: absolute;
|
|
|
top: 15px;
|
|
|
left: 273px;
|
|
|
}
|
|
|
.server_img4 {
|
|
|
position: absolute;
|
|
|
top: 75px;
|
|
|
left: 147px;
|
|
|
}
|
|
|
.server_img5 {
|
|
|
position: absolute;
|
|
|
top: 82px;
|
|
|
left: 141px;
|
|
|
}
|
|
|
.server_item {
|
|
|
position: absolute;
|
|
|
top: 99px;
|
|
|
left: 149px;
|
|
|
width: 146px;
|
|
|
height: 19px;
|
|
|
background: #5621f8;
|
|
|
border-radius: 4px;
|
|
|
span {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
font-size: 12px;
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
.tsPosition {
|
|
|
top: 122px !important;
|
|
|
left: 288px !important;
|
|
|
}
|
|
|
.tsPosition2 {
|
|
|
top: 99px !important;
|
|
|
left: 428px !important;
|
|
|
}
|
|
|
.server_left {
|
|
|
padding: 100px 0;
|
|
|
}
|
|
|
.server_right {
|
|
|
margin: 100px 0 0 -82px;
|
|
|
}
|
|
|
.server_button {
|
|
|
position: absolute;
|
|
|
top: 160px;
|
|
|
left: 230px;
|
|
|
:deep(.el-button) {
|
|
|
width: 136px;
|
|
|
height: 40px;
|
|
|
background: url("@/assets/images/szjj/icon-分类器训练.png");
|
|
|
color: #ffffff;
|
|
|
--el-button-border-color: #ffffff00;
|
|
|
--el-button-hover-border-color: #ffffff00;
|
|
|
--el-button-active-border-color: #ffffff00;
|
|
|
}
|
|
|
}
|
|
|
.server_file {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
position: absolute;
|
|
|
top: 158px;
|
|
|
left: 67px;
|
|
|
width: 149px;
|
|
|
height: 42px;
|
|
|
background: url("@/assets/images/szjj/文件夹1.png");
|
|
|
transition: transform 3s ease;
|
|
|
}
|
|
|
// .tsFile1 {
|
|
|
// top: 132px !important;
|
|
|
// }
|
|
|
// .tsFile2 {
|
|
|
// top: 186px !important;
|
|
|
// }
|
|
|
// .tsFile3 {
|
|
|
// top: 236px !important;
|
|
|
// }
|
|
|
.input_seven {
|
|
|
width: 135px;
|
|
|
height: 28px;
|
|
|
background: #ffffff;
|
|
|
border: 1px solid #e5e5e5;
|
|
|
border-radius: 2px;
|
|
|
position: absolute;
|
|
|
bottom: 20px;
|
|
|
left: 57px;
|
|
|
padding: 4px 25px;
|
|
|
}
|
|
|
.tsInput {
|
|
|
left: 257px !important;
|
|
|
}
|
|
|
.tsInput2 {
|
|
|
left: 457px !important;
|
|
|
}
|
|
|
.tsInput3 {
|
|
|
top: 24px !important;
|
|
|
left: 371px !important;
|
|
|
}
|
|
|
.input_eight{
|
|
|
position: absolute;
|
|
|
top: 6px;
|
|
|
left: 177px;
|
|
|
width: 96px;
|
|
|
height: 29px;
|
|
|
background: #5621F8;
|
|
|
border-radius: 4px;
|
|
|
padding: 6px 2px;
|
|
|
span{
|
|
|
font-weight: 400;
|
|
|
color: #F8FBFF;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
.purple{
|
|
|
top: 116px !important;
|
|
|
left: 139px !important;
|
|
|
}
|
|
|
.purple2{
|
|
|
top: 161px !important;
|
|
|
left: 139px !important;
|
|
|
}
|
|
|
.orange{
|
|
|
background: #FF9936;
|
|
|
top: 116px !important;
|
|
|
left: 17px !important;
|
|
|
}
|
|
|
.orange2{
|
|
|
background: #FF9936;
|
|
|
top: 161px !important;
|
|
|
left: 17px !important;
|
|
|
}
|
|
|
}
|
|
|
.serverFour {
|
|
|
position: relative;
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(3, 1fr);
|
|
|
justify-content: center;
|
|
|
grid-gap: 0px;
|
|
|
width: calc(100% - 50%);
|
|
|
height: 445px;
|
|
|
margin: 10px 0px 50px 0px;
|
|
|
padding: 0px 10px;
|
|
|
background: url("@/assets/images/szjj/圆角矩形 10.png") no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
.Four_left {
|
|
|
margin: 10px 0;
|
|
|
.left_main {
|
|
|
margin-top: 24px;
|
|
|
background: url("@/assets/images/szjj/蓝色虚线.png");
|
|
|
width: 237px;
|
|
|
height: 318px;
|
|
|
position: relative;
|
|
|
padding: 25px 10px;
|
|
|
.main_input {
|
|
|
padding: 0 11px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.left_item {
|
|
|
width: 188px;
|
|
|
height: 43px;
|
|
|
background: #a6cdff;
|
|
|
border: 1px solid #7fb2f4;
|
|
|
border-radius: 4px;
|
|
|
margin: 18px 5px 5px 13px;
|
|
|
text-align: center;
|
|
|
span {
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
.left_item2 {
|
|
|
width: 188px;
|
|
|
height: 43px;
|
|
|
background: #a6cdff;
|
|
|
border: 1px solid #7fb2f4;
|
|
|
border-radius: 4px;
|
|
|
margin: 15px 5px 5px 13px;
|
|
|
text-align: center;
|
|
|
span {
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
img {
|
|
|
margin: 0 68px;
|
|
|
}
|
|
|
}
|
|
|
.Four_middle {
|
|
|
margin-left: 3px;
|
|
|
margin-top: 189px;
|
|
|
.middle_item {
|
|
|
background: url("@/assets/images/szjj/按钮_pick.png") no-repeat;
|
|
|
width: 148px;
|
|
|
border-radius: 5px;
|
|
|
height: 48px;
|
|
|
text-align: center;
|
|
|
padding: 5px;
|
|
|
margin-bottom: 10px;
|
|
|
z-index: 2;
|
|
|
position: relative;
|
|
|
span {
|
|
|
display: block;
|
|
|
color: #ffffff;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
.ts_item {
|
|
|
width: 147px;
|
|
|
height: 59px;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
.middle_arrow {
|
|
|
position: absolute;
|
|
|
z-index: 1;
|
|
|
top: 202px;
|
|
|
left: 222px;
|
|
|
}
|
|
|
.tsArrow {
|
|
|
top: 266px !important;
|
|
|
}
|
|
|
.tsArrow2 {
|
|
|
top: 326px !important;
|
|
|
}
|
|
|
.tsArrow3 {
|
|
|
top: 387px !important;
|
|
|
}
|
|
|
}
|
|
|
.Four_right {
|
|
|
text-align: center;
|
|
|
margin-top: 10px;
|
|
|
.right_main {
|
|
|
margin-top: 48px;
|
|
|
background: url("@/assets/images/szjj/绿色虚线.png");
|
|
|
width: 237px;
|
|
|
height: 318px;
|
|
|
position: relative;
|
|
|
padding: 25px 10px;
|
|
|
.main_input {
|
|
|
padding: 0 11px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
}
|
|
|
.left_item {
|
|
|
width: 188px;
|
|
|
height: 64px;
|
|
|
background: #a9ffe9;
|
|
|
border: 1px solid #18cfa3;
|
|
|
border-radius: 4px;
|
|
|
margin: 15px 5px 5px 13px;
|
|
|
text-align: center;
|
|
|
span {
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
.left_item2 {
|
|
|
width: 188px;
|
|
|
height: 91px;
|
|
|
background: #a9ffe9;
|
|
|
border: 1px solid #18cfa3;
|
|
|
border-radius: 4px;
|
|
|
margin: 43px 5px 5px 13px;
|
|
|
text-align: center;
|
|
|
span {
|
|
|
display: block;
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.left_top {
|
|
|
position: absolute;
|
|
|
width: 187px;
|
|
|
height: 27px;
|
|
|
background: url("@/assets/images/szjj/客户端_top.png");
|
|
|
top: 100px;
|
|
|
left: 40px;
|
|
|
padding: 5px 31px;
|
|
|
span {
|
|
|
font-size: 12px;
|
|
|
font-weight: 500;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
.left_top2 {
|
|
|
position: absolute;
|
|
|
width: 187px;
|
|
|
height: 27px;
|
|
|
background: url("@/assets/images/szjj/名字节点.png");
|
|
|
top: 100px;
|
|
|
left: 432px;
|
|
|
padding: 5px 31px;
|
|
|
span {
|
|
|
font-size: 12px;
|
|
|
font-weight: 500;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.server_right_main{
|
|
|
width: 372px;
|
|
|
height: 220px;
|
|
|
border: 1px solid #71AAFF;
|
|
|
background: linear-gradient(0deg, #E2EDFF 0%, #FFFFFF 100%);
|
|
|
border-radius: 4px;
|
|
|
margin: 10px;
|
|
|
padding: 15px;
|
|
|
span{
|
|
|
font-size: 14px;
|
|
|
font-weight: bold;
|
|
|
color: #333333;
|
|
|
margin: 15px 0;
|
|
|
display: block;
|
|
|
}
|
|
|
p{
|
|
|
color: #333333;
|
|
|
}
|
|
|
}
|
|
|
.clientSelect{
|
|
|
width: 99px;
|
|
|
height: 80px;
|
|
|
cursor: pointer;
|
|
|
position: absolute;
|
|
|
top: 15px;
|
|
|
left: 78px;
|
|
|
}
|
|
|
.left_two{
|
|
|
.el-radio{
|
|
|
display: block;
|
|
|
margin-left: 50px;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.dialog {
|
|
|
border-radius: 12px;
|
|
|
.el-dialog__header {
|
|
|
background: url("@/assets/images/szjj/弹窗标题.png") !important;
|
|
|
background-size: 100% 100% !important;
|
|
|
margin-right: 0 !important;
|
|
|
span {
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
.el-dialog__headerbtn {
|
|
|
top: 8px !important;
|
|
|
background: url("@/assets/images/szjj/关闭2.png") no-repeat;
|
|
|
background-size: 100% 100% !important;
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
margin-right: 15px;
|
|
|
margin-top: 7px;
|
|
|
}
|
|
|
.el-dialog__headerbtn i {
|
|
|
content: "1";
|
|
|
font-size: 13px;
|
|
|
visibility: hidden;
|
|
|
}
|
|
|
.el-dialog__footer {
|
|
|
text-align: center;
|
|
|
}
|
|
|
.tj{
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
.cxks{
|
|
|
background: url('@/assets/images/szjj/重新开始.png') no-repeat;
|
|
|
}
|
|
|
.el-dialog__body {
|
|
|
padding: 20px 20px;
|
|
|
}
|
|
|
}
|
|
|
.el-dialog:not(.is-fullscreen) {
|
|
|
// margin-top: 3vh !important;
|
|
|
margin-left: auto !important;
|
|
|
}
|
|
|
.dialog-footer{
|
|
|
.el-button{
|
|
|
background: url('@/assets/images/szjj/提交任务.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
width: 136px;
|
|
|
height: 40px;
|
|
|
border:none;
|
|
|
border-color:none;
|
|
|
}
|
|
|
.tj{
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
.cxks{
|
|
|
background: url('@/assets/images/szjj/重新开始.png') no-repeat;
|
|
|
}
|
|
|
}
|
|
|
.clientAbs{
|
|
|
position: absolute;
|
|
|
width: 84px;
|
|
|
height: 20px;
|
|
|
background: #FFFFFF;
|
|
|
font-weight: 600;
|
|
|
top: 73px;
|
|
|
left: 86px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.correspondence{
|
|
|
position: absolute;
|
|
|
width: 84px;
|
|
|
height: 25px;
|
|
|
top: 208px;
|
|
|
left: 204px;
|
|
|
background: #FFFFFF;
|
|
|
cursor: pointer;
|
|
|
border-radius: 5px;
|
|
|
border: 1px solid #000000;
|
|
|
text-align: center;
|
|
|
padding: 2px;
|
|
|
}
|
|
|
.txPotion{
|
|
|
left: 424px;
|
|
|
}
|
|
|
</style> |