<template>
  <div id="path-control" v-loading="loading">
    <el-row class="title-time">
      <div style="width:200px">
        <span>模型文件大小:</span>
        <span>{{ (Size / 1000 / 1024).toFixed(1) }}M</span>
      </div>
      <div style="width:220px">
        <span>模型总耗时:</span>
        <span>{{ allTakeTime }}</span>
      </div>
      <div style="width:250px">
        <span>模型开始上传时间:</span>
        <span>{{ UploadState.BeginTime }}</span>
      </div>
      <div style="width:250px">
        <span>模型处理完成时间:</span>
        <span>{{ SaveLog.EndTime }}</span>
      </div>
    </el-row>
    <el-row class="path-pic">
      <div id="path-container">
        <div class="first-column column">
          <el-row id="baseServer">
            <div class="updown shadow-box">
              <div style="background:#b8c5d0;height:20px;"></div>
              <div style="text-align:center;margin-top: 15px">
                <i class="el-icon-monitor" style="color:#b8c5d0;font-size:60px"></i>
                <p style="margin-top:10px;color:#b8c5d0">上传下载功能</p>
              </div>
              <img v-if="!UploadState.BeginTime" class="status row-status" src="@/assets/image/model/arrowGray.png"/>
              <img v-else-if="UploadState.BeginTime&&!UploadState.EndTime" class="status row-status"
                   src="@/assets/image/model/arrowBlue.png"/>
              <img v-else class="status row-status" src="@/assets/image/model/arrowGreen.png"/>
            </div>
            <div class="shadow-box mid-transfer">
              <div class="first-title">
                <i class="el-icon-success" style="color:#67C23A"></i>模型中转站
              </div>
              <div class="first-content">
                <p>将模型文件存储于OSS服务器</p>
              </div>
              <img v-if="!UploadState.EndTime" class="status row-waiting-manage"
                   src="@/assets/image/model/waitingManageGray.png"/>
              <img v-else-if="UploadState.EndTime&&!SchedulerCheck.EndTime" class="status row-waiting-manage"
                   src="@/assets/image/model/waitingManageBlue.png"/>
              <img v-else class="status row-waiting-manage" src="@/assets/image/model/waitingManageGreen.png"/>

              <img v-if="!UploadState.BeginTime" class="status up-model" src="@/assets/image/model/upModelGray.png"/>
              <img v-else-if="UploadState.BeginTime&&!UploadState.EndTime" class="status up-model"
                   src="@/assets/image/model/upModelBlue.png"/>
              <img v-else class="status up-model" src="@/assets/image/model/upModelGreen.png"/>

              <!-- 调度器1 -->
              <div class="path-tips shadow-box" style="top:67px;left:291px;"
                   @click="getNodeDes(SchedulerCheck,'等待调度器分配', true)"
                   v-if='SchedulerCheck.BeginTime'>
                <i class="el-icon-error" v-if="SchedulerCheck.HasError"></i>
                <i class="el-icon-warning" v-else-if="SchedulerCheck.HasRetry"></i>
                <p>耗时: {{ SchedulerCheck.TakeTime || '--' }}</p>
                <!-- <p>平均上传速度: 1M/s</p> -->
                <p>开始时间: {{ SchedulerCheck.BeginTime || '--' }}</p>
                <p v-if="!SchedulerCheck.EndTime">待分配模型数量: {{ waitAssign }}</p>
                <p v-else>结束时间: {{ SchedulerCheck.EndTime || '--' }}</p>
              </div>
            </div>
            <p style="float:left;width:100%;text-align:center;margin-top:73px;color:#acb5bb;font-size:12px;">本地电脑主机</p>
          </el-row>
          <!-- 上传模型文件 -->
          <div class="path-tips shadow-box" style="top:189px;left:190px;"
               @click="getNodeDes(UploadState,'上传模型文件', true)">
            <i class="el-icon-error" v-if="UploadState.HasError"></i>
            <i class="el-icon-warning" v-else-if="UploadState.HasRetry"></i>
            <p>耗时: {{ UploadState.TakeTime || '--' }}</p>
            <p>平均上传速度: {{ UploadStateSpeed }}</p>
            <p>开始时间: {{ UploadState.BeginTime || '--' }}</p>
            <p>结束时间: {{ UploadState.EndTime || '--' }}</p>
          </div>
        </div>
        <div class="second-column column">
          <div>
            <div id="ossServer" class="shadow-box">
              <div style="background:#b8c5d0;height:20px;"></div>
              <el-row class="server-content">
                <div style="text-align:center;width:100px" class="sm-box">
                  <i class="iconfont icon-OSSserver" style="color:#b8c5d0;font-size:50px;"></i>
                  <p style="margin:18px 0 0;color:#b8c5d0;">oss服务器</p>
                </div>
                <el-row class="sm-box">
                  <div class="image">
                    <i class="iconfont icon-revit" style="color:#dee6ec;font-size:60px;background:#fff"></i>
                  </div>
                  <div class="fixed">
                    <p :title="OriginalName">模型文件名称{{ OriginalName }}</p>
                    <p style="color:#8d9aa3">模型文件大小: {{ (Size / 1000 / 1024).toFixed(1) }}M</p>
                    <p style="color:#8d9aa3">上传时间: {{ UploadState.EndTime || '--' }}</p>
                  </div>
                </el-row>
                <el-row class="sm-box">
                  <div class="image">
                    <i class="iconfont icon-json" style="color:#dee6ec;font-size:60px;background:#fff"></i>
                  </div>
                  <div class="fixed">
                    <p>{{ OriginalName }} json数据压缩包</p>
                    <p style="color:#8d9aa3">文件大小:
                      {{ ModelExport.JsonzSize ? (ModelExport.JsonzSize / 1000 / 1024).toFixed(1) + 'M' : '--' }}</p>
                    <p style="color:#8d9aa3">上传时间: {{ ModelExport.JsonzEndTime || '--' }}</p>
                  </div>
                </el-row>
              </el-row>
              <!-- 下载模型文件1 -->
              <img v-if="!SchedulerCheck.BeginTime" class="status down-model"
                   src="@/assets/image/model/downModelGray.png"/>
              <img v-else-if="SchedulerCheck.BeginTime&&!SchedulerCheck.EndTime" class="status down-model"
                   src="@/assets/image/model/downModelBlue.png"/>
              <img v-else class="status down-model" src="@/assets/image/model/downModelGreen.png"/>
              <!-- 下载模型文件2 -->
              <img v-if="!SchedulerExport.BeginTime" class="status down-model-sec"
                   src="@/assets/image/model/downModelGray.png"/>
              <img v-else-if="SchedulerExport.BeginTime&&!ModelExport.JsonzBeginTime" class="status down-model-sec"
                   src="@/assets/image/model/downModelBlue.png"/>
              <img v-else class="status down-model-sec" src="@/assets/image/model/downModelGreen.png"/>
              <!-- 存储json -->
              <img v-if="!ModelExport.JsonzBeginTime" class="status up-json" src="@/assets/image/model/upJsonGray.png"/>
              <img v-else-if="ModelExport.JsonzBeginTime&&!ModelExport.JsonzEndTime" class="status up-json"
                   src="@/assets/image/model/upJsonBlue.png"/>
              <img v-else class="status up-json" src="@/assets/image/model/upJsonGreen.png"/>
              <!-- 下载json -->
              <img v-if="!JsonAnalysis.BeginTime" class="status down-json" src="@/assets/image/model/downJsonGray.png"/>
              <img v-else-if="JsonAnalysis.BeginTime&&!JsonAnalysis.EndTime" class="status down-json"
                   src="@/assets/image/model/downJsonBlue.png"/>
              <img v-else class="status down-json" src="@/assets/image/model/downJsonGreen.png"/>
            </div>
          </div>
          <el-row id="revitServer">
            <pathCard class="revit-item" :title="'楼层模型检查'" @click="getNodeDes" :data="ModelCheck">
              <p>共检查项: 14项</p>
            </pathCard>
            <pathCard class="revit-item" :title="'导出模型json数据并压缩存储'" @click="getNodeDes" :data="ModelExport"></pathCard>
            <!-- 调度器2 -->
            <img v-if="!ModelCheck.EndTime" class="status row-waiting-manage"
                 src="@/assets/image/model/waitingManageGray.png"/>
            <img v-else-if="ModelCheck.EndTime&&!SchedulerExport.EndTime" class="status row-waiting-manage"
                 src="@/assets/image/model/waitingManageBlue.png"/>
            <img v-else class="status row-waiting-manage" src="@/assets/image/model/waitingManageGreen.png"/>
            <!-- 等待解析 -->
            <img v-if="!ModelExport.EndTime" class="status waiting-anl" src="@/assets/image/model/waitingAnlGray.png"/>
            <img v-else-if="ModelExport.EndTime&&!JsonAnalysis.EndTime" class="status waiting-anl"
                 src="@/assets/image/model/waitingAnlBlue.png"/>
            <img v-else class="status waiting-anl" src="@/assets/image/model/waitingAnlGreen.png"/>
            <!-- 未通过 -->
            <img v-if="ModelCheck.Remove||ModelExport.Remove" class="status del-model"
                 src="@/assets/image/model/delModelBlue.png"/>
            <img v-else class="status del-model" src="@/assets/image/model/delModelGray.png"/>

            <!-- 调度器2 -->
            <div class="path-tips shadow-box" style="top:114px;left:329px;"
                 @click="getNodeDes(SchedulerExport,'等待调度器分配', true)"
                 v-if="SchedulerExport.BeginTime">
              <i class="el-icon-error" v-if="SchedulerExport.HasError"></i>
              <i class="el-icon-warning" v-else-if="SchedulerExport.HasRetry"></i>
              <p>耗时: {{ SchedulerExport.TakeTime || '--' }}</p>
              <!-- <p>平均上传速度: 1M/s</p> -->
              <p>开始时间: {{ SchedulerExport.BeginTime || '--' }}</p>
              <p v-if="!SchedulerExport.EndTime">待分配模型数量: {{ waitAssign }}</p>
              <p v-else>结束时间: {{ SchedulerExport.EndTime }}</p>
            </div>

            <p style="float:left;width:100%;text-align:center;margin-top:83px;color:#acb5bb;font-size:12px;">
              revit本地服务器集群</p>
          </el-row>
          <!-- 下载模型文件1 -->
          <div class="path-tips shadow-box up-model-tips" @click="getNodeDes(ModelCheck,'下载模型文件', true)">
            <i class="el-icon-error" v-if="ModelCheck.HasError"></i>
            <i class="el-icon-warning" v-else-if="ModelCheck.HasRetry"></i>
            <p>耗时: {{ SchedulerCheck.TakeTime || '--' }}</p>
            <p>平均下载速度: {{ ModelCheckSpeed }}</p>
            <p>开始时间: {{ SchedulerCheck.BeginTime || '--' }}</p>
            <p>结束时间: {{ SchedulerCheck.EndTime || '--' }}</p>
          </div>
          <!-- 下载模型文件2 -->
          <div class="path-tips shadow-box up-model-tips2" @click="getNodeDes(ModelExport,'下载模型文件', true)">
            <i class="el-icon-error" v-if="ModelExport.HasError"></i>
            <i class="el-icon-warning" v-else-if="ModelExport.HasRetry"></i>
            <p>耗时: {{ ModelExport.DownTakeTime || '--' }}</p>
            <p>平均下载速度: {{ ModelExportSpeed || '--' }}</p>
            <p>开始时间: {{ SchedulerExport.BeginTime || '--' }}</p>
            <p>结束时间: {{ ModelExport.JsonzBeginTime || '--' }}</p>
          </div>
          <!-- 存储json -->
          <div class="path-tips shadow-box up-json-tips" @click="getNodeDes(ModelExport,'存储json数据', true)">
            <i class="el-icon-error" v-if="ModelExport.HasError"></i>
            <i class="el-icon-warning" v-else-if="ModelExport.HasRetry"></i>
            <p>耗时: {{ ModelExport.JsonzTakeTime || '--' }}</p>
            <p>平均上传速度: {{ SaveJsonSpeed || '--' }}</p>
            <p>开始时间: {{ ModelExport.JsonzBeginTime || '--' }}</p>
            <p>结束时间: {{ ModelExport.JsonzEndTime || '--' }}</p>
          </div>
          <!-- 下载json压缩包 -->
          <div class="path-tips shadow-box down-json-tips" @click="getNodeDes(JsonAnalysis,'下载json压缩包', true)">
            <i class="el-icon-error" v-if="JsonAnalysis.HasError"></i>
            <i class="el-icon-warning" v-else-if="JsonAnalysis.HasRetry"></i>
            <p>耗时: {{ JsonAnalysis.TakeTime || '--' }}</p>
            <p>平均下载速度: {{ DownJsonSpeed || '--' }}</p>
            <p>开始时间: {{ JsonAnalysis.BeginTime || '--' }}</p>
            <p>结束时间: {{ JsonAnalysis.EndTime || '--' }}</p>
          </div>
          <div id="secondDel" class="delModel">
            <i class="iconfont icon-delate" style="color:#89969F;font-size:30px;line-height:1;margin-left:-6px"></i>
            <p>放弃文件</p>
          </div>
        </div>
        <div class="third-column column">
          <div>
            <div id="webDatabase">
              <div class="shadow-box">
                <div style="background:#b8c5d0;height:20px;"></div>
                <div>
                  <div style="text-align:center;">
                    <i class="iconfont icon-project-o" style="color:#dee6ec;font-size:40px"></i>
                    <p style="color:#676767">web服务数据库</p>
                  </div>
                </div>
                <img class="status column-up" src="@/assets/image/model/columnGray.png"/>
                <img class="status right-down" src="@/assets/image/model/rightDownGray.png"/>
              </div>
              <div class="shadow-box">
                <div style="background:#b8c5d0;height:20px;"></div>
                <div>
                  <div style="text-align:center;">
                    <i class="iconfont icon-project-o" style="color:#dee6ec;font-size:40px"></i>
                    <p style="color:#676767">数据中心数据库</p>
                  </div>
                </div>
                <img class="status column-up" src="@/assets/image/model/columnGray.png"/>
              </div>
              <div class="shadow-box">
                <div style="background:#b8c5d0;height:20px;"></div>
                <div>
                  <div style="text-align:center;">
                    <i class="iconfont icon-project-o" style="color:#dee6ec;font-size:40px"></i>
                    <p style="color:#676767">web服务数据库</p>
                  </div>
                </div>
                <img class="status column-up" src="@/assets/image/model/columnGray.png"/>
              </div>
            </div>
          </div>
          <el-row id="webServer">
            <pathCard class="webServer-item" :title="'解压并解析json文件'" :data="JsonAnalysis" @click="getNodeDes"></pathCard>
            <pathCard class="webServer-item" :title="'存储数据到模型web服务数据库'" :data="SaveData" @click="getNodeDes"></pathCard>
            <pathCard class="webServer-item" :title="'建筑模型检查'" :data="MultiFloorCheck" @click="getNodeDes">
              <p>共检查项: 2项</p>
            </pathCard>
            <pathCard class="webServer-item" :title="'存储数据到数据中心'" :data="SyncDatacenter" @click="getNodeDes"></pathCard>
            <pathCard class="webServer-item" :title="'记录增删日志'" @click="getNodeDes" :data="SaveLog"></pathCard>

            <img v-if="!SaveData.BeginTime" class="status path1 path" src="@/assets/image/model/arrowGray.png"/>
            <img v-else-if="SaveData.BeginTime&&!SaveData.EndTime" class="status path1 path"
                 src="@/assets/image/model/arrowBlue.png"/>
            <img v-else class="status path1 path" src="@/assets/image/model/arrowGreen.png"/>

            <img v-if="!MultiFloorCheck.BeginTime" class="status path2 path" src="@/assets/image/model/arrowGray.png"/>
            <img v-else-if="MultiFloorCheck.BeginTime&&!MultiFloorCheck.EndTime" class="status path2 path"
                 src="@/assets/image/model/arrowBlue.png"/>
            <img v-else class="status path2 path" src="@/assets/image/model/arrowGreen.png"/>

            <img v-if="!SyncDatacenter.BeginTime" class="status path3 path" src="@/assets/image/model/arrowGray.png"/>
            <img v-else-if="SyncDatacenter.BeginTime&&!SyncDatacenter.EndTime" class="status path3 path"
                 src="@/assets/image/model/arrowBlue.png"/>
            <img v-else class="status path3 path" src="@/assets/image/model/arrowGreen.png"/>

            <img v-if="!SaveLog.BeginTime" class="status path4 path" src="@/assets/image/model/arrowGray.png"/>
            <img v-else-if="SaveLog.BeginTime&&!SaveLog.EndTime" class="status path4 path"
                 src="@/assets/image/model/arrowBlue.png"/>
            <img v-else class="status path4 path" src="@/assets/image/model/arrowGreen.png"/>

            <img v-if="MultiFloorCheck.GridCheck||MultiFloorCheck.LevelCheck" class="status del-model"
                 src="@/assets/image/model/delModelBlue.png"/>
            <img v-else class="status del-model" src="@/assets/image/model/delModelGray.png"/>

            <img v-if="1" class="status path5 path" src="@/assets/image/model/arrowGray.png"/>
            <!-- <img v-else-if="2" class="status path1" src="@/assets/image/model/arrowBlue.png" />
            <img v-else class="status path1" src="@/assets/image/model/arrowGreen.png" /> -->

            <p style="float:left;width:100%;padding-left:714px;margin-top:83px;color:#acb5bb;font-size:12px;">
              模型web服务器</p>
          </el-row>
          <div id="thirdDel" class="delModel">
            <i class="iconfont icon-delate" style="color:#89969F;font-size:30px;line-height:1;margin-left:-6px"></i>
            <p>放弃文件</p>
          </div>
        </div>
        <div class="fifth-column column">
          <pathCard class="finish-item" :title="'完成'" :data="SaveLog" :isCustomize="true">
            <p>后续关系计算...</p>
            <p>完成时间: {{ SaveLog.EndTime || '--' }}</p>
          </pathCard>
        </div>
      </div>
    </el-row>
    <nodeDialog ref="nodeDialog"></nodeDialog>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import pathCard from "@/components/model/file/pathCard"
import nodeDialog from "@/components/model/file/nodeDialog"
import { modelPathControl, unassignQuery } from "@/api/model/file";
import Bus from '@/utils/bus.js'

export default {
  components: {
    pathCard,
    nodeDialog
  },
  computed: {
    ...mapGetters("layout", ["projectId"])
  },
  data() {
    return {
      loading: false, //
      Id: '',
      Size: 0,
      OriginalName: '',
      JsonAnalysis: {}, //解压并解析json文件
      ModelCheck: {}, //楼层模型检查
      ModelExport: {}, //导出模型json数据并压缩存储
      MultiFloorCheck: {}, //建筑模型检查
      Note: {}, //储存模型数据并记录增删日志
      SaveData: {}, //存储数据到模型web服务数据库
      SchedulerCheck: {}, //第一个等待调度器
      SchedulerExport: {},//第二个等待调度器
      UploadState: {}, //上传下载功能
      finish: {},
      SyncDatacenter: {}, //处理模型数据格式
      SaveLog: {},// 储存模型数据并记录增删日志
      timer: null, //定时器
      timeout: null, //延时器
      waitAssign: 0,
      allTakeTime: '', //总耗时
      UploadStateSpeed: '', // 上传模型文件平均速度
      ModelCheckSpeed: '',//下载模型文件1平均速度
      ModelExportSpeed: '',//下载模型文件2平均速度
      SaveJsonSpeed: '',//存储json平均速度
      DownJsonSpeed: '',//下载json平均速度
    }
  },
  mounted() {
    Bus.$on('modelStatusChange', message => {
      this.init()
    })
  },
  created() {
    this.Id = this.$route.query.Id
    this.Size = this.$route.query.Size
    this.OriginalName = this.$route.query.OriginalName || '--'
    this.init();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  },
  methods: {
    init() {
      this.getMessage();
      if (!this.SchedulerExport.EndTime) {
        this.getUnassignNum();
      }
    },
    // 弹窗
    getNodeDes(data, title, flag) {
      let type = '';
      if (flag && !data.errMsg) {
        return
      }
      if (title == '楼层模型检查') {
        type = 'firstCheck'
      } else if (title == '建筑模型检查') {
        type = 'secondCheck'
      }
      this.$refs.nodeDialog.showDialog(data, type, title)
    },
    // 获取流转状态
    getMessage() {
      let pa = {
        Filters: `Id="${this.Id}"`
      }
      modelPathControl(pa, res => {
        if (res.Content.length) {
          const data = res.Content[0];
          if (data.SchedulerExport && data.SchedulerExport.BeginTime) {
            if (data.ModelExport) {
              data.ModelExport.BeginTime = data.SchedulerExport.BeginTime
            }
          }
          this.updateData(data);
          this.getSpeed();
          this.interval(data);
          if (!this.SaveLog.EndTime) {
            if (this.timeout) {
              clearTimeout(this.timeout);
            }
            this.timeout = setTimeout(() => {
              this.init()
            }, 30000)
          }
        } else {
          this.$message.warning('暂无数据')
        }
      })
    },
    //
    getUnassignNum() {
      let pa = {
        Filters: `Status=0 or Status=1 or Status=2`
      }
      unassignQuery(pa, res => {
        this.waitAssign = res.Total
      })
    },
    // 定时器
    interval(data) {
      if (this.timer) {
        clearInterval(this.timer);
      }
      this.timer = setInterval(() => {
        this.updateData(data)
        this.$forceUpdate()
      }, 1000)
    },
    // 计算耗时
    updateData(data) {
      this.JsonAnalysis = this.formatTime(data.JsonAnalysis || {});
      this.ModelCheck = this.formatTime(data.ModelCheck || {})
      this.ModelExport = this.formatTime(data.ModelExport || {})
      this.MultiFloorCheck = this.formatTime(data.MultiFloorCheck || {})
      this.SaveData = this.formatTime(data.SaveData || {})
      this.SchedulerCheck = this.formatTime(data.SchedulerCheck || {})
      this.SchedulerExport = this.formatTime(data.SchedulerExport || {})
      this.UploadState = this.formatTime(data.UploadState || {})
      this.SyncDatacenter = this.formatTime(data.SyncDatacenter || {})
      this.SaveLog = this.formatTime(data.SaveLog || {})
      if (this.UploadState.BeginTime) {
        let temp = { BeginTime: this.UploadState.BeginTime }
        if (this.SaveLog.EndTime) {
          temp.EndTime = this.SaveLog.EndTime
        }
        this.allTakeTime = this.formatTime(temp).TakeTime
      }
      if (this.UploadState.EndTime && !this.SchedulerCheck.EndTime) {
        const sTime = new Date(this.UploadState.EndTime).getTime();
        const eTime = new Date().getTime();
        this.ModelCheck.DownTakeTime = this.msToStr(eTime - sTime);
      } else if (this.UploadState.EndTime && this.SchedulerCheck.EndTime) {
        const sTime = new Date(this.UploadState.EndTime).getTime();
        const eTime = new Date(this.SchedulerCheck.EndTime).getTime();
        this.ModelCheck.DownTakeTime = this.msToStr(eTime - sTime);
      }
      if (this.SchedulerExport.BeginTime && !this.ModelExport.JsonzBeginTime) {
        const sTime = new Date(this.SchedulerExport.BeginTime).getTime();
        const eTime = new Date().getTime();
        this.ModelExport.DownTakeTime = this.msToStr(eTime - sTime);
      } else if (this.SchedulerExport.BeginTime && this.ModelExport.JsonzBeginTime) {
        const sTime = new Date(this.SchedulerExport.BeginTime).getTime();
        const eTime = new Date(this.ModelExport.JsonzBeginTime).getTime();
        this.ModelExport.DownTakeTime = this.msToStr(eTime - sTime);
      }
    },
    // 设置速度
    getSpeed() {
      let sTime, eTime;
      if (this.UploadState.BeginTime && this.UploadState.EndTime) {
        sTime = new Date(this.UploadState.BeginTime).getTime();
        eTime = new Date(this.UploadState.EndTime).getTime();
        if (sTime != eTime) {
          this.UploadStateSpeed = this.formatSpeed(this.Size / (eTime - sTime))
        } else {
          this.UploadStateSpeed = '--'
        }
      } else {
        this.UploadStateSpeed = '--'
      }
      if (this.SchedulerCheck.BeginTime && this.SchedulerCheck.EndTime) {
        sTime = new Date(this.SchedulerCheck.BeginTime).getTime();
        eTime = new Date(this.SchedulerCheck.EndTime).getTime();
        if (sTime != eTime) {
          this.ModelCheckSpeed = this.formatSpeed(this.Size / (eTime - sTime))
        } else {
          this.ModelCheckSpeed = '--'
        }
      } else {
        this.ModelCheckSpeed = '--'
      }
      if (this.SchedulerExport.BeginTime && this.ModelExport.JsonzBeginTime) {
        sTime = new Date(this.SchedulerExport.BeginTime).getTime();
        eTime = new Date(this.ModelExport.JsonzBeginTime).getTime();
        if (sTime != eTime) {
          this.ModelExportSpeed = this.formatSpeed(this.Size / (eTime - sTime))
        } else {
          this.ModelExportSpeed = '--'
        }
      } else {
        this.ModelExportSpeed = '--'
      }
      if (this.ModelExport.JsonzBeginTime && this.ModelExport.JsonzEndTime) {
        sTime = new Date(this.ModelExport.JsonzBeginTime).getTime();
        eTime = new Date(this.ModelExport.JsonzEndTime).getTime();
        if (sTime != eTime) {
          this.SaveJsonSpeed = this.formatSpeed(this.ModelExport.JsonzSize / (eTime - sTime))
        } else {
          this.SaveJsonSpeed = '--'
        }
      } else {
        this.SaveJsonSpeed = '--'
      }
      if (this.JsonAnalysis.BeginTime && this.JsonAnalysis.EndTime) {
        sTime = new Date(this.JsonAnalysis.BeginTime).getTime();
        eTime = new Date(this.JsonAnalysis.EndTime).getTime();
        if (sTime != eTime) {
          this.DownJsonSpeed = this.formatSpeed(this.ModelExport.JsonzSize / (eTime - sTime))
        } else {
          this.DownJsonSpeed = '--'
        }
      } else {
        this.DownJsonSpeed = '--'
      }
    },
    // 处理时间工具
    formatTime(data) {
      if (data.BeginTime && !data.EndTime) {
        const sTime = new Date(data.BeginTime).getTime();
        const eTime = new Date().getTime();
        data.TakeTime = this.msToStr(eTime - sTime);
      } else if (data.BeginTime && data.EndTime) {
        const sTime = new Date(data.BeginTime).getTime();
        const eTime = new Date(data.EndTime).getTime();
        data.TakeTime = this.msToStr(eTime - sTime);
      }
      if (data.JsonzBeginTime && !data.JsonzEndTime) {
        const sTime = new Date(data.JsonzBeginTime).getTime();
        const eTime = new Date().getTime();
        data.JsonzTakeTime = this.msToStr(eTime - sTime);
      } else if (data.JsonzBeginTime && data.JsonzEndTime) {
        const sTime = new Date(data.JsonzBeginTime).getTime();
        const eTime = new Date(data.JsonzEndTime).getTime();
        data.JsonzTakeTime = this.msToStr(eTime - sTime);
      }
      return data;
    },
    // 生成speed
    formatSpeed(speed) {
      if (speed > 1024) {
        speed = (speed / 1024).toFixed(1);
        return `${speed}MB/s`
      } else {
        return `${speed.toFixed(1)}KB/s`
      }
    },
    msToStr(mss) {
      let str = '';
      const days = parseInt(mss / (1000 * 60 * 60 * 24));
      const hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      const minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = ((mss % (1000 * 60)) / 1000).toFixed();
      if (days > 0) {
        str += `${days}天`
      }
      if (hours > 0) {
        str += `${hours}小时`
      }
      if (minutes > 0) {
        str += `${minutes}分钟`
      }
      if (seconds > 0) {
        str += `${seconds}秒`
      }
      return str;
    }
  }
};
</script>
<style lang="less" scoped>
#path-control {
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid #e4e4e4;
  background-color: #fff;
  overflow: hidden;

  .title-time {
    padding: 10px;
    border-bottom: 1px solid #e4e4e4;

    & > div {
      float: left;
      font-size: 14px;
    }

    & > div + div {
      margin-left: 20px;
    }
  }

  .path-pic {
    height: calc(100% - 50px);
    overflow-x: auto;

    #path-container {
      position: relative;
      height: 100%;
      padding: 20px 0 0;
      width: 4450px;

      img.status {
        position: absolute;
      }

      .column {
        height: 100%;
        position: relative;
        float: left;
        width: 1000px;

        &.first-column {
          width: 832px;

          #baseServer {
            border: 2px dashed #b8c5d0;
            border-radius: 4px;
            padding: 20px 20px 0;
            margin: 389px 20px 0;
            width: 584px;
            height: 270px;

            .updown {
              position: relative;
              width: 150px;
              height: 150px;
              float: left;
              margin-right: 150px;
            }

            .mid-transfer {
              position: relative;
              width: 235px;
              height: 90px;
              float: left;
              margin-top: 30px;
            }
          }

          .first-title {
            background-color: #f3f5f6;
            font-size: 14px;
            padding: 5px 10px;

            i {
              margin-right: 5px;
            }
          }

          .first-content {
            font-size: 12px;
            padding: 10px;
            color: #acb5bb;
          }

          .row-status {
            left: 170px;
            top: 70px;
          }

          .row-waiting-manage {
            left: 264px;
            top: 30px;
          }

          .up-model {
            left: 95px;
            bottom: 96px;
          }
        }

        &.second-column {
          #ossServer {
            position: relative;
            width: 780px;
            margin: 0 auto;

            .server-content {
              padding: 20px 0;

              .sm-box {
                float: left;
                padding: 0 10px;
                line-height: 1;

                & > div {
                  float: left;
                  font-size: 12px;
                }

                &:nth-child(1) {
                  width: 100px;
                  margin-right: 30px;
                }

                &:nth-child(2),
                &:nth-child(3) {
                  padding: 15px 20px;
                  background: #eef2f6;
                  border-radius: 4px;
                  border: 2px dashed #b8c5d0;
                }

                &:nth-child(3) {
                  margin-left: 40px;
                }

                .fixed {
                  p {
                    width: 167px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                }

                .image {
                  margin-right: 20px;
                }

                p {
                  margin-bottom: 8px;
                }
              }
            }

            .down-model {
              left: 82px;
              top: 156px;
            }

            .down-model-sec {
              left: 565px;
              top: 156px;
            }

            .up-json {
              left: 665px;
              top: 156px;
            }

            .down-json {
              top: 68px;
              right: -460px;
            }
          }

          #revitServer {
            padding: 16px 16px 0;
            border: 2px dashed #b8c5d0;
            width: 890px;
            height: 270px;
            margin: 235px auto 0;

            .revit-item {
              float: left;

              &:nth-child(1) {
                margin-right: 255px;
              }
            }

            .row-waiting-manage {
              left: 300px;
              top: 80px;
              transform: scale(0.9);
            }

            .waiting-anl {
              right: -263px;
              top: 80px;
            }

            .del-model {
              left: 91px;
              top: 168px;
            }
          }

          .up-model-tips {
            left: -44px;
            top: 202px;
          }

          .up-model-tips2 {
            left: 439px;
            top: 202px;
          }

          .up-json-tips {
            left: 815px;
            top: 202px;
          }

          .down-json-tips {
            right: -336px;
            top: 114px;
          }

          #secondDel {
            margin: 48px 0 0 166px;
          }
        }

        &.third-column {
          width: 1946px;
          margin-left: 200px;

          #webDatabase {
            & > div {
              display: inline-block;
              position: relative;
              width: 130px;
              height: 144px;

              .column-up {
                top: 158px;
                left: 63px;
                transform: scale(1.1);
              }

              .right-down {
                left: 130px;
                top: 103px;
              }

              &:nth-child(1) {
                margin-left: 500px;
              }

              &:nth-child(2) {
                margin-left: 672px;
              }

              &:nth-child(3) {
                margin-left: 271px;
              }
            }
          }

          #dataCenterDatabase {
            width: 130px;
            height: 144px;
            margin: 0 auto;

            .column-up {
              top: 158px;
              left: 165px;
              transform: scale(1.1);
            }
          }

          #webServer {
            border: 2px dashed #b8c5d0;
            margin-top: 241px;
            padding: 16px 16px 0;
            height: 270px;

            .webServer-item {
              float: left;

              & + .webServer-item {
                margin-left: 105px;
              }
            }

            .path {
              top: 95px;
            }

            .path1 {
              left: 311px;
            }

            .path2 {
              left: 715px;
            }

            .path3 {
              left: 1117px;
            }

            .path4 {
              left: 1520px;
            }

            .path5 {
              left: 1923px;
            }

            .del-model {
              right: 919px;
              top: 168px;
            }
          }

          #thirdDel {
            margin: 48px 0 0 925px;
          }
        }

        &.fifth-column {
          width: auto;
          margin-left: 88px;

          .finish-item {
            margin-top: 403px;
          }
        }
      }
    }
  }

  .shadow-box {
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
    border-radius: 4px;
  }

  .path-tips {
    position: absolute;
    font-size: 12px;
    width: 204px;
    height: 93px;
    padding: 10px;
    cursor: pointer;

    i {
      position: absolute;
      font-size: 16px;
      right: 10px;

      &.el-icon-warning {
        color: #fbc636;
      }

      &.el-icon-error {
        color: #ff6660;
      }
    }
  }

  .delModel {
    width: 76px;
    height: 66px;
    font-size: 12px;
    text-align: center;
    padding-top: 10px;
    background: #eef2f6;
    border: 2px solid #b8c5d0;
    border-radius: 5px;
  }
}
</style>
