Преглед на файлове

模型处理后台监控页面

haojianlong преди 5 години
родител
ревизия
0dc3bf495f

Файловите разлики са ограничени, защото са твърде много
+ 254 - 194
src/assets/style/iconfont/iconfont.css


BIN
src/assets/style/iconfont/iconfont.eot


Файловите разлики са ограничени, защото са твърде много
+ 140 - 95
src/assets/style/iconfont/iconfont.svg


BIN
src/assets/style/iconfont/iconfont.ttf


BIN
src/assets/style/iconfont/iconfont.woff


+ 3 - 0
src/components/model/file/floorTable.vue

@@ -148,6 +148,9 @@ export default {
     // 跳转至模型流程处理监控
     toPathControl(row) {
       console.log(row)
+      this.$router.push({
+        name: 'pathControl'
+      })
     }
   },
   watch: {

+ 58 - 0
src/components/model/file/pathCard.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="pathCard">
+    <div class="path-title">
+      <i class="el-icon-success" style="color:#67C23A"></i>
+      {{title}}
+    </div>
+    <div class="path-content">
+      <slot></slot>
+      <p>耗时: 8分39秒</p>
+      <p>开始时间: 2020-1-21 08:01:10</p>
+      <p>结束时间: 2020-1-21 08:01:10</p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      default: '提示'
+    }
+  },
+  data() {
+    return {}
+  }
+};
+</script>
+<style lang="less" scoped>
+.pathCard {
+  width: 296px;
+  height: 144px;
+  border: 1px solid transparent;
+  box-shadow: 0 2px 11px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  &.borderY {
+    border-color: #fcc636;
+  }
+  &.borderR {
+    border-color: #ff7c77;
+  }
+  &.borderB {
+    border-color: #409eff;
+  }
+  .path-title {
+    background-color: #f3f5f6;
+    font-size: 14px;
+    padding: 5px 10px;
+    i {
+      margin-right: 5px;
+    }
+  }
+  .path-content{
+    font-size: 12px;
+    padding: 10px;
+    color: #acb5bb;
+  }
+}
+</style>

+ 7 - 0
src/router/system.js

@@ -21,6 +21,7 @@ import repetitionGraphy from '@/views/ready/buildfloor/repetitionGraphy'
 
 /**模型管理 */
 import modelFile from '@/views/model/file'
+import pathControl from '@/views/model/file/pathcontrol'
 import modelReport from '@/views/model/report'
 import deleted from '@/views/model/report/deleted'
 import supplement from '@/views/model/report/supplement'
@@ -178,6 +179,12 @@ export default [{
                 meta: { keepAlive: false, breadcrumbs: [{ label: '模型管理', path: '/model/file' }, { label: '模型文件管理' }] }
             },
             {
+                path: 'path',
+                name: 'pathControl',
+                component: pathControl,
+                meta: { keepAlive: false, breadcrumbs: [{ label: '模型管理', path: '/model/file' }, { label: '模型文件管理', path: '/model/file' }, { label: '模型后台处理监控' }] }
+            },
+            {
                 path: 'report',
                 name: 'modelReport',
                 component: modelReport,

+ 318 - 0
src/views/model/file/pathcontrol/index.vue

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