|
@@ -0,0 +1,318 @@
|
|
|
+<template>
|
|
|
+ <div id="path-control" v-loading="loading">
|
|
|
+ <el-row class="title-time">
|
|
|
+ <div>
|
|
|
+ <span>模型总耗时:</span>
|
|
|
+ <span>28分钟50秒</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>模型开始上传时间:</span>
|
|
|
+ <span>2020-1-21 08:01:10</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>模型处理完成时间:</span>
|
|
|
+ <span>2020-1-21 08:01:10</span>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="path-pic">
|
|
|
+ <div id="path-container">
|
|
|
+ <div class="first-column column">
|
|
|
+ <el-row style="border:2px dashed #b8c5d0;border-radius:4px;padding:20px 20px 0;margin:370px 20px 0;width:584px">
|
|
|
+ <div style="width:150px;height:150px;float:left;margin-right:150px;" class="shadow-box">
|
|
|
+ <div style="background:#b8c5d0;height:20px;"></div>
|
|
|
+ <div style="text-align:center;margin-top: 15px">
|
|
|
+ <i class="el-icon-monitor" style="color:#dee6ec;font-size:60px"></i>
|
|
|
+ <p style="margin-top:10px;color:#dee6ec;">上传下载功能</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="width:235px;height:90px;float:left;margin-top:30px;" class="shadow-box">
|
|
|
+ <div class="first-title">
|
|
|
+ <i class="el-icon-success" style="color:#67C23A"></i>模型中转站
|
|
|
+ </div>
|
|
|
+ <div class="first-content">
|
|
|
+ <p>模型文件存储于OSS服务器</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p style="float:left;width:100%;text-align:center;margin-top:25px;color:#acb5bb;font-size:12px;">本地电脑主机</p>
|
|
|
+ </el-row>
|
|
|
+ <div class="path-tips shadow-box" style="top:150px;left:220px;">
|
|
|
+ <p>耗时: 8分钟10s</p>
|
|
|
+ <p>平均上传速度: 1M/s</p>
|
|
|
+ <p>开始时间: 2020/2/22 20:20:20</p>
|
|
|
+ <p>结束时间: 2020/2/22 20:20:20</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>
|
|
|
+ <p>模型文件名称</p>
|
|
|
+ <p style="color:#8d9aa3">模型文件大小: 23M</p>
|
|
|
+ <p style="color:#8d9aa3">上传时间: 2020/2/20 17:17:17</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>
|
|
|
+ <p>json数据压缩包</p>
|
|
|
+ <p style="color:#8d9aa3">文件大小: 23M</p>
|
|
|
+ <p style="color:#8d9aa3">上传时间: 2020/2/20 17:17:17</p>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-row id="revitServer">
|
|
|
+ <pathCard class="revit-item">
|
|
|
+ <p>共检查项: --</p>
|
|
|
+ </pathCard>
|
|
|
+ <pathCard class="revit-item"></pathCard>
|
|
|
+ <p style="float:left;width:100%;text-align:center;margin-top:20px;color:#acb5bb;font-size:12px;">revit本地服务器集群</p>
|
|
|
+ </el-row>
|
|
|
+ <div class="path-tips shadow-box">
|
|
|
+ <p>耗时: 8分钟10s</p>
|
|
|
+ <p>平均上传速度: 1M/s</p>
|
|
|
+ <p>开始时间: 2020/2/22 20:20:20</p>
|
|
|
+ <p>结束时间: 2020/2/22 20:20:20</p>
|
|
|
+ </div>
|
|
|
+ <div class="path-tips shadow-box">
|
|
|
+ <p>耗时: 8分钟10s</p>
|
|
|
+ <p>平均上传速度: 1M/s</p>
|
|
|
+ <p>开始时间: 2020/2/22 20:20:20</p>
|
|
|
+ <p>结束时间: 2020/2/22 20:20:20</p>
|
|
|
+ </div>
|
|
|
+ <div class="path-tips shadow-box">
|
|
|
+ <p>耗时: 8分钟10s</p>
|
|
|
+ <p>平均上传速度: 1M/s</p>
|
|
|
+ <p>开始时间: 2020/2/22 20:20:20</p>
|
|
|
+ <p>结束时间: 2020/2/22 20:20:20</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="third-column column">
|
|
|
+ <div>
|
|
|
+ <div id="webDatabase" 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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-row id="webServer">
|
|
|
+ <pathCard class="webServer-item"></pathCard>
|
|
|
+ <pathCard class="webServer-item"></pathCard>
|
|
|
+ <pathCard class="webServer-item">
|
|
|
+ <p>共检查项: --</p>
|
|
|
+ </pathCard>
|
|
|
+ <pathCard class="webServer-item"></pathCard>
|
|
|
+ <p style="float:left;width:100%;text-align:center;margin-top:20px;color:#acb5bb;font-size:12px;">模型web服务器</p>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="forth-column column">
|
|
|
+ <div>
|
|
|
+ <div id="dataCenterDatabase" 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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-row id="dataCenterServer">
|
|
|
+ <pathCard></pathCard>
|
|
|
+ <p style="float:left;width:100%;text-align:center;margin-top:20px;color:#acb5bb;font-size:12px;">数据中心服务器 </p>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ <div class="fifth-column column">
|
|
|
+ <pathCard class="finish-item"></pathCard>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import pathCard from "@/components/model/file/pathCard"
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ pathCard
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters("layout", ["projectId"])
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false, //
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {},
|
|
|
+ watch: {
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ }
|
|
|
+};
|
|
|
+</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: 8000px;
|
|
|
+ .column {
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ float: left;
|
|
|
+ width: 1000px;
|
|
|
+ &.first-column {
|
|
|
+ .first-title {
|
|
|
+ background-color: #f3f5f6;
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 5px 10px;
|
|
|
+ i {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .first-content {
|
|
|
+ font-size: 12px;
|
|
|
+ padding: 10px;
|
|
|
+ color: #acb5bb;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.second-column {
|
|
|
+ #ossServer {
|
|
|
+ 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;
|
|
|
+ }
|
|
|
+ .image {
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #revitServer {
|
|
|
+ padding: 16px 16px 0;
|
|
|
+ border: 2px dashed #b8c5d0;
|
|
|
+ width: 890px;
|
|
|
+ height: 207px;
|
|
|
+ margin: 240px auto 0;
|
|
|
+ .revit-item {
|
|
|
+ float: left;
|
|
|
+ &:nth-child(1) {
|
|
|
+ margin-right: 255px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.third-column {
|
|
|
+ width: 1544px;
|
|
|
+ #webDatabase {
|
|
|
+ width: 130px;
|
|
|
+ height: 144px;
|
|
|
+ }
|
|
|
+ #webServer {
|
|
|
+ border: 2px dashed #b8c5d0;
|
|
|
+ margin-top: 240px;
|
|
|
+ padding: 16px 16px 0;
|
|
|
+ .webServer-item {
|
|
|
+ float: left;
|
|
|
+ & + .webServer-item {
|
|
|
+ margin-left: 105px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.forth-column {
|
|
|
+ width: 335px;
|
|
|
+ #dataCenterDatabase {
|
|
|
+ width: 130px;
|
|
|
+ height: 144px;
|
|
|
+ }
|
|
|
+ #dataCenterServer {
|
|
|
+ border: 2px dashed #b8c5d0;
|
|
|
+ margin-top: 240px;
|
|
|
+ padding: 16px 16px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.fifth-column {
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|