浏览代码

模型流程监控静态页面

haojianlong 5 年之前
父节点
当前提交
ef82adec26
共有 36 个文件被更改,包括 265 次插入27 次删除
  1. 二进制
      src/assets/image/model/arrowBlue.png
  2. 二进制
      src/assets/image/model/arrowGray.png
  3. 二进制
      src/assets/image/model/arrowGreen.png
  4. 二进制
      src/assets/image/model/columnBlue.png
  5. 二进制
      src/assets/image/model/columnGray.png
  6. 二进制
      src/assets/image/model/columnGreen.png
  7. 二进制
      src/assets/image/model/delModelBlue.png
  8. 二进制
      src/assets/image/model/delModelGray.png
  9. 二进制
      src/assets/image/model/downJsonBlue.png
  10. 二进制
      src/assets/image/model/downJsonGray.png
  11. 二进制
      src/assets/image/model/downJsonGreen.png
  12. 二进制
      src/assets/image/model/downModelBlue.png
  13. 二进制
      src/assets/image/model/downModelGray.png
  14. 二进制
      src/assets/image/model/downModelGreen.png
  15. 二进制
      src/assets/image/model/rightDownBlue.png
  16. 二进制
      src/assets/image/model/rightDownGray.png
  17. 二进制
      src/assets/image/model/rightDownGreen.png
  18. 二进制
      src/assets/image/model/upJsonBlue.png
  19. 二进制
      src/assets/image/model/upJsonGray.png
  20. 二进制
      src/assets/image/model/upJsonGreen.png
  21. 二进制
      src/assets/image/model/upModelBlue.png
  22. 二进制
      src/assets/image/model/upModelGray.png
  23. 二进制
      src/assets/image/model/upModelGreen.png
  24. 二进制
      src/assets/image/model/waitingAnlBlue.png
  25. 二进制
      src/assets/image/model/waitingAnlGray.png
  26. 二进制
      src/assets/image/model/waitingAnlGreen.png
  27. 二进制
      src/assets/image/model/waitingManageBlue.png
  28. 二进制
      src/assets/image/model/waitingManageGray.png
  29. 二进制
      src/assets/image/model/waitingManageGreen.png
  30. 10 6
      src/assets/style/iconfont/iconfont.css
  31. 二进制
      src/assets/style/iconfont/iconfont.eot
  32. 3 0
      src/assets/style/iconfont/iconfont.svg
  33. 二进制
      src/assets/style/iconfont/iconfont.ttf
  34. 二进制
      src/assets/style/iconfont/iconfont.woff
  35. 4 2
      src/components/model/file/pathCard.vue
  36. 248 19
      src/views/model/file/pathcontrol/index.vue

二进制
src/assets/image/model/arrowBlue.png


二进制
src/assets/image/model/arrowGray.png


二进制
src/assets/image/model/arrowGreen.png


二进制
src/assets/image/model/columnBlue.png


二进制
src/assets/image/model/columnGray.png


二进制
src/assets/image/model/columnGreen.png


二进制
src/assets/image/model/delModelBlue.png


二进制
src/assets/image/model/delModelGray.png


二进制
src/assets/image/model/downJsonBlue.png


二进制
src/assets/image/model/downJsonGray.png


二进制
src/assets/image/model/downJsonGreen.png


二进制
src/assets/image/model/downModelBlue.png


二进制
src/assets/image/model/downModelGray.png


二进制
src/assets/image/model/downModelGreen.png


二进制
src/assets/image/model/rightDownBlue.png


二进制
src/assets/image/model/rightDownGray.png


二进制
src/assets/image/model/rightDownGreen.png


二进制
src/assets/image/model/upJsonBlue.png


二进制
src/assets/image/model/upJsonGray.png


二进制
src/assets/image/model/upJsonGreen.png


二进制
src/assets/image/model/upModelBlue.png


二进制
src/assets/image/model/upModelGray.png


二进制
src/assets/image/model/upModelGreen.png


二进制
src/assets/image/model/waitingAnlBlue.png


二进制
src/assets/image/model/waitingAnlGray.png


二进制
src/assets/image/model/waitingAnlGreen.png


二进制
src/assets/image/model/waitingManageBlue.png


二进制
src/assets/image/model/waitingManageGray.png


二进制
src/assets/image/model/waitingManageGreen.png


文件差异内容过多而无法显示
+ 10 - 6
src/assets/style/iconfont/iconfont.css


二进制
src/assets/style/iconfont/iconfont.eot


文件差异内容过多而无法显示
+ 3 - 0
src/assets/style/iconfont/iconfont.svg


二进制
src/assets/style/iconfont/iconfont.ttf


二进制
src/assets/style/iconfont/iconfont.woff


+ 4 - 2
src/components/model/file/pathCard.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="pathCard">
     <div class="path-title">
-      <i class="el-icon-success" style="color:#67C23A"></i>
+      <!-- <i class="el-icon-success" style="color:#67C23A"></i> -->
+      <!-- <i class="iconfont icon-iconfontgengduo" style="color:#333333">></i> -->
+      <i class="iconfont icon-conduct" style="color:#409eff"></i>
       {{title}}
     </div>
     <div class="path-content">
@@ -51,7 +53,7 @@ export default {
   }
   .path-content{
     font-size: 12px;
-    padding: 10px;
+    padding: 4px 10px 0;
     color: #acb5bb;
   }
 }

+ 248 - 19
src/views/model/file/pathcontrol/index.vue

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