|
@@ -17,25 +17,35 @@
|
|
|
<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">
|
|
|
+ <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:#dee6ec;font-size:60px"></i>
|
|
|
<p style="margin-top:10px;color:#dee6ec;">上传下载功能</p>
|
|
|
</div>
|
|
|
+ <img v-if="1" class="status row-status" src="@/assets/image/model/arrowGray.png" />
|
|
|
+ <img v-else-if="2" 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 style="width:235px;height:90px;float:left;margin-top:30px;" class="shadow-box">
|
|
|
+ <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="1" class="status row-waiting-manage" src="@/assets/image/model/waitingManageGray.png" />
|
|
|
+ <img v-else-if="2" 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="1" class="status up-model" src="@/assets/image/model/upModelGray.png" />
|
|
|
+ <img v-else-if="2" class="status up-model" src="@/assets/image/model/upModelBlue.png" />
|
|
|
+ <img v-else class="status up-model" src="@/assets/image/model/upModelGreen.png" />
|
|
|
</div>
|
|
|
- <p style="float:left;width:100%;text-align:center;margin-top:25px;color:#acb5bb;font-size:12px;">本地电脑主机</p>
|
|
|
+ <p style="float:left;width:100%;text-align:center;margin-top:10px;color:#acb5bb;font-size:12px;">本地电脑主机</p>
|
|
|
</el-row>
|
|
|
- <div class="path-tips shadow-box" style="top:150px;left:220px;">
|
|
|
+ <div class="path-tips shadow-box" style="top:189px;left:190px;">
|
|
|
<p>耗时: 8分钟10s</p>
|
|
|
<p>平均上传速度: 1M/s</p>
|
|
|
<p>开始时间: 2020/2/22 20:20:20</p>
|
|
@@ -72,33 +82,69 @@
|
|
|
</div>
|
|
|
</el-row>
|
|
|
</el-row>
|
|
|
+ <img v-if="1" class="status down-model" src="@/assets/image/model/downModelGray.png" />
|
|
|
+ <img v-else-if="2" class="status down-model" src="@/assets/image/model/downModelBlue.png" />
|
|
|
+ <img v-else class="status down-model" src="@/assets/image/model/downModelGreen.png" />
|
|
|
+
|
|
|
+ <img v-if="1" class="status down-model-sec" src="@/assets/image/model/downModelGray.png" />
|
|
|
+ <img v-else-if="2" 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" />
|
|
|
+
|
|
|
+ <img v-if="1" class="status up-json" src="@/assets/image/model/upJsonGray.png" />
|
|
|
+ <img v-else-if="2" class="status up-json" src="@/assets/image/model/upJsonBlue.png" />
|
|
|
+ <img v-else class="status up-json" src="@/assets/image/model/upJsonGreen.png" />
|
|
|
+
|
|
|
+ <img v-if="1" class="status down-json" src="@/assets/image/model/downJsonGray.png" />
|
|
|
+ <img v-else-if="2" 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">
|
|
|
+ <pathCard class="revit-item" :title="'楼层模型检查'">
|
|
|
<p>共检查项: --</p>
|
|
|
</pathCard>
|
|
|
- <pathCard class="revit-item"></pathCard>
|
|
|
+ <pathCard class="revit-item" :title="'导出模型json数据并压缩存储'"></pathCard>
|
|
|
+ <img v-if="1" class="status row-waiting-manage" src="@/assets/image/model/waitingManageGray.png" />
|
|
|
+ <img v-else-if="2" 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="1" class="status waiting-anl" src="@/assets/image/model/waitingAnlGray.png" />
|
|
|
+ <img v-else-if="2" 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="1" class="status del-model" src="@/assets/image/model/delModelGray.png" />
|
|
|
+ <img v-else class="status del-model" src="@/assets/image/model/delModelBlue.png" />
|
|
|
+
|
|
|
<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">
|
|
|
+ <div class="path-tips shadow-box up-model-tips">
|
|
|
<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">
|
|
|
+ <div class="path-tips shadow-box up-model-tips2">
|
|
|
<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">
|
|
|
+ <div class="path-tips shadow-box up-json-tips">
|
|
|
<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 down-json-tips">
|
|
|
+ <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 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>
|
|
@@ -110,17 +156,48 @@
|
|
|
<p style="color:#676767">web服务数据库</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <img v-if="1" class="status column-up" src="@/assets/image/model/columnGray.png" />
|
|
|
+ <img v-else-if="2" class="status column-up" src="@/assets/image/model/columnBlue.png" />
|
|
|
+ <img v-else class="status column-up" src="@/assets/image/model/columnGreen.png" />
|
|
|
+
|
|
|
+ <img v-if="1" class="status right-down" src="@/assets/image/model/rightDownGray.png" />
|
|
|
+ <img v-else-if="2" class="status right-down" src="@/assets/image/model/rightDownBlue.png" />
|
|
|
+ <img v-else class="status right-down" src="@/assets/image/model/rightDownGreen.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-row id="webServer">
|
|
|
- <pathCard class="webServer-item"></pathCard>
|
|
|
- <pathCard class="webServer-item"></pathCard>
|
|
|
- <pathCard class="webServer-item">
|
|
|
+ <pathCard class="webServer-item" :title="'解压并解析json文件'"></pathCard>
|
|
|
+ <pathCard class="webServer-item" :title="'存储数据到模型web服务数据库'"></pathCard>
|
|
|
+ <pathCard class="webServer-item" :title="'建筑模型检查'">
|
|
|
<p>共检查项: --</p>
|
|
|
</pathCard>
|
|
|
- <pathCard class="webServer-item"></pathCard>
|
|
|
+ <pathCard class="webServer-item" :title="'处理模型数据格式'"></pathCard>
|
|
|
+
|
|
|
+ <img v-if="1" class="status path1 path" src="@/assets/image/model/arrowGray.png" />
|
|
|
+ <img v-else-if="2" 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="1" class="status path2 path" src="@/assets/image/model/arrowGray.png" />
|
|
|
+ <img v-else-if="2" 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="1" class="status path3 path" src="@/assets/image/model/arrowGray.png" />
|
|
|
+ <img v-else-if="2" 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="1" class="status path4 path" src="@/assets/image/model/arrowGray.png" />
|
|
|
+ <img v-else-if="2" 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="1" class="status del-model" src="@/assets/image/model/delModelGray.png" />
|
|
|
+ <img v-else class="status del-model" src="@/assets/image/model/delModelBlue.png" />
|
|
|
+
|
|
|
<p style="float:left;width:100%;text-align:center;margin-top:20px;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="forth-column column">
|
|
|
<div>
|
|
@@ -132,15 +209,24 @@
|
|
|
<p style="color:#676767">数据中心数据库</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <img v-if="1" class="status column-up" src="@/assets/image/model/columnGray.png" />
|
|
|
+ <img v-else-if="2" class="status column-up" src="@/assets/image/model/columnBlue.png" />
|
|
|
+ <img v-else class="status column-up" src="@/assets/image/model/columnGreen.png" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<el-row id="dataCenterServer">
|
|
|
- <pathCard></pathCard>
|
|
|
+ <pathCard :title="'储存模型数据并记录增删日志'"></pathCard>
|
|
|
+
|
|
|
+ <img v-if="1" class="status path1" 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%;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>
|
|
|
+ <pathCard class="finish-item" :title="'完成'"></pathCard>
|
|
|
</div>
|
|
|
</div>
|
|
|
</el-row>
|
|
@@ -193,13 +279,39 @@ export default {
|
|
|
position: relative;
|
|
|
height: 100%;
|
|
|
padding: 20px 0 0;
|
|
|
- width: 8000px;
|
|
|
+ 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: 207px;
|
|
|
+ .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;
|
|
@@ -213,9 +325,22 @@ export default {
|
|
|
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 {
|
|
@@ -250,30 +375,89 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .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: 207px;
|
|
|
- margin: 240px auto 0;
|
|
|
+ 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: 111px 0 0 166px;
|
|
|
}
|
|
|
}
|
|
|
&.third-column {
|
|
|
width: 1544px;
|
|
|
+ margin-left: 200px;
|
|
|
#webDatabase {
|
|
|
width: 130px;
|
|
|
height: 144px;
|
|
|
+ margin-left: 500px;
|
|
|
+ .column-up {
|
|
|
+ top: 158px;
|
|
|
+ left: 565px;
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
+ .right-down {
|
|
|
+ right: 560px;
|
|
|
+ top: 103px;
|
|
|
+ }
|
|
|
}
|
|
|
#webServer {
|
|
|
border: 2px dashed #b8c5d0;
|
|
|
- margin-top: 240px;
|
|
|
+ margin-top: 241px;
|
|
|
padding: 16px 16px 0;
|
|
|
.webServer-item {
|
|
|
float: left;
|
|
@@ -281,21 +465,56 @@ export default {
|
|
|
margin-left: 105px;
|
|
|
}
|
|
|
}
|
|
|
+ .path {
|
|
|
+ top: 95px;
|
|
|
+ }
|
|
|
+ .path1 {
|
|
|
+ left: 311px;
|
|
|
+ }
|
|
|
+ .path2 {
|
|
|
+ left: 715px;
|
|
|
+ }
|
|
|
+ .path3 {
|
|
|
+ left: 1117px;
|
|
|
+ }
|
|
|
+ .path4 {
|
|
|
+ left: 1520px;
|
|
|
+ }
|
|
|
+ .del-model {
|
|
|
+ right: 517px;
|
|
|
+ top: 168px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ #thirdDel {
|
|
|
+ margin: 111px 0 0 925px;
|
|
|
}
|
|
|
}
|
|
|
&.forth-column {
|
|
|
width: 335px;
|
|
|
+ margin-left: 70px;
|
|
|
+ margin-right: 87px;
|
|
|
#dataCenterDatabase {
|
|
|
width: 130px;
|
|
|
height: 144px;
|
|
|
+ margin: 0 auto;
|
|
|
+ .column-up {
|
|
|
+ top: 158px;
|
|
|
+ left: 165px;
|
|
|
+ transform: scale(1.1);
|
|
|
+ }
|
|
|
}
|
|
|
#dataCenterServer {
|
|
|
border: 2px dashed #b8c5d0;
|
|
|
margin-top: 240px;
|
|
|
padding: 16px 16px 0;
|
|
|
+ .path1 {
|
|
|
+ top: 95px;
|
|
|
+ left: 311px;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
&.fifth-column {
|
|
|
+ width: auto;
|
|
|
.finish-item {
|
|
|
margin-top: 403px;
|
|
|
}
|
|
@@ -314,5 +533,15 @@ export default {
|
|
|
height: 93px;
|
|
|
padding: 10px;
|
|
|
}
|
|
|
+ .delModel {
|
|
|
+ width: 76px;
|
|
|
+ height: 66px;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 10px;
|
|
|
+ background: #eef2f6;
|
|
|
+ border: 2px solid #b8c5d0;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|