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