index.vue 33 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849
  1. <template>
  2. <div id="path-control" v-loading="loading">
  3. <el-row class="title-time">
  4. <div style="width:200px">
  5. <span>模型总耗时:</span>
  6. <span>{{allTakeTime}}</span>
  7. </div>
  8. <div style="width:250px">
  9. <span>模型开始上传时间:</span>
  10. <span>{{UploadState.BeginTime}}</span>
  11. </div>
  12. <div style="width:250px">
  13. <span>模型处理完成时间:</span>
  14. <span>{{SaveLog.EndTime}}</span>
  15. </div>
  16. </el-row>
  17. <el-row class="path-pic">
  18. <div id="path-container">
  19. <div class="first-column column">
  20. <el-row id="baseServer">
  21. <div class="updown shadow-box">
  22. <div style="background:#b8c5d0;height:20px;"></div>
  23. <div style="text-align:center;margin-top: 15px">
  24. <i class="el-icon-monitor" style="color:#b8c5d0;font-size:60px"></i>
  25. <p style="margin-top:10px;color:#b8c5d0">上传下载功能</p>
  26. </div>
  27. <img v-if="!UploadState.BeginTime" class="status row-status" src="@/assets/image/model/arrowGray.png" />
  28. <img v-else-if="UploadState.BeginTime&&!UploadState.EndTime" class="status row-status" src="@/assets/image/model/arrowBlue.png" />
  29. <img v-else class="status row-status" src="@/assets/image/model/arrowGreen.png" />
  30. </div>
  31. <div class="shadow-box mid-transfer">
  32. <div class="first-title">
  33. <i class="el-icon-success" style="color:#67C23A"></i>模型中转站
  34. </div>
  35. <div class="first-content">
  36. <p>模型文件存储于OSS服务器</p>
  37. </div>
  38. <img v-if="!SchedulerCheck.BeginTime" class="status row-waiting-manage" src="@/assets/image/model/waitingManageGray.png" />
  39. <img v-else-if="SchedulerCheck.BeginTime&&!SchedulerCheck.EndTime" class="status row-waiting-manage"
  40. src="@/assets/image/model/waitingManageBlue.png" />
  41. <img v-else class="status row-waiting-manage" src="@/assets/image/model/waitingManageGreen.png" />
  42. <img v-if="!UploadState.BeginTime" class="status up-model" src="@/assets/image/model/upModelGray.png" />
  43. <img v-else-if="UploadState.BeginTime&&!UploadState.EndTime" class="status up-model" src="@/assets/image/model/upModelBlue.png" />
  44. <img v-else class="status up-model" src="@/assets/image/model/upModelGreen.png" />
  45. <!-- 调度器1 -->
  46. <div class="path-tips shadow-box" style="top:67px;left:291px;" @click="getNodeDes"
  47. v-if='SchedulerCheck.BeginTime&&!SchedulerCheck.EndTime'>
  48. <i class="el-icon-error" v-if="SchedulerCheck.HasError"></i>
  49. <i class="el-icon-warning" v-else-if="SchedulerCheck.HasRetry"></i>
  50. <p>耗时: {{SchedulerCheck.TakeTime||'--'}}</p>
  51. <!-- <p>平均上传速度: 1M/s</p> -->
  52. <p>开始时间: {{SchedulerCheck.BeginTime||'--'}}</p>
  53. <p v-if="SchedulerCheck.EndTime">待分配模型数量: {{waitAssign}}</p>
  54. <p v-else>结束时间: {{SchedulerCheck.EndTime||'--'}}</p>
  55. </div>
  56. </div>
  57. <p style="float:left;width:100%;text-align:center;margin-top:73px;color:#acb5bb;font-size:12px;">本地电脑主机</p>
  58. </el-row>
  59. <!-- 上传模型文件 -->
  60. <div class="path-tips shadow-box" style="top:189px;left:190px;" @click="getNodeDes">
  61. <i class="el-icon-error" v-if="UploadState.HasError"></i>
  62. <i class="el-icon-warning" v-else-if="UploadState.HasRetry"></i>
  63. <p>耗时: {{UploadState.TakeTime||'--'}}</p>
  64. <p>平均上传速度: {{UploadStateSpeed}}</p>
  65. <p>开始时间: {{UploadState.BeginTime||'--'}}</p>
  66. <p>结束时间: {{UploadState.EndTime||'--'}}</p>
  67. </div>
  68. </div>
  69. <div class="second-column column">
  70. <div>
  71. <div id="ossServer" class="shadow-box">
  72. <div style="background:#b8c5d0;height:20px;"></div>
  73. <el-row class="server-content">
  74. <div style="text-align:center;width:100px" class="sm-box">
  75. <i class="iconfont icon-OSSserver" style="color:#b8c5d0;font-size:50px;"></i>
  76. <p style="margin:18px 0 0;color:#b8c5d0;">oss服务器</p>
  77. </div>
  78. <el-row class="sm-box">
  79. <div class="image">
  80. <i class="iconfont icon-revit" style="color:#dee6ec;font-size:60px;background:#fff"></i>
  81. </div>
  82. <div class="fixed">
  83. <p :title="OriginalName">模型文件名称{{OriginalName}}</p>
  84. <p style="color:#8d9aa3">模型文件大小: {{(Size/1000/1024).toFixed(1)}}M</p>
  85. <p style="color:#8d9aa3">上传时间: {{UploadState.EndTime||'--'}}</p>
  86. </div>
  87. </el-row>
  88. <el-row class="sm-box">
  89. <div class="image">
  90. <i class="iconfont icon-json" style="color:#dee6ec;font-size:60px;background:#fff"></i>
  91. </div>
  92. <div class="fixed">
  93. <p>{{OriginalName}} json数据压缩包</p>
  94. <p style="color:#8d9aa3">文件大小: {{ModelExport.JsonzSize?(ModelExport.JsonzSize/1000/1024).toFixed(1)+'M':'--'}}</p>
  95. <p style="color:#8d9aa3">上传时间: {{ModelExport.EndTime||'--'}}</p>
  96. </div>
  97. </el-row>
  98. </el-row>
  99. <!-- 下载模型文件1 -->
  100. <img v-if="!UploadState.EndTime" class="status down-model" src="@/assets/image/model/downModelGray.png" />
  101. <img v-else-if="UploadState.EndTime&&!SchedulerCheck.EndTime" class="status down-model" src="@/assets/image/model/downModelBlue.png" />
  102. <img v-else class="status down-model" src="@/assets/image/model/downModelGreen.png" />
  103. <!-- 下载模型文件2 -->
  104. <img v-if="!ModelCheck.EndTime" class="status down-model-sec" src="@/assets/image/model/downModelGray.png" />
  105. <img v-else-if="ModelCheck.EndTime&&!SchedulerExport.EndTime" class="status down-model-sec"
  106. src="@/assets/image/model/downModelBlue.png" />
  107. <img v-else class="status down-model-sec" src="@/assets/image/model/downModelGreen.png" />
  108. <!-- 存储json -->
  109. <img v-if="!ModelExport.JsonzBeginTime" class="status up-json" src="@/assets/image/model/upJsonGray.png" />
  110. <img v-else-if="ModelExport.JsonzBeginTime&&!ModelExport.JsonzEndTime" class="status up-json"
  111. src="@/assets/image/model/upJsonBlue.png" />
  112. <img v-else class="status up-json" src="@/assets/image/model/upJsonGreen.png" />
  113. <!-- 下载json -->
  114. <img v-if="!JsonAnalysis.BeginTime" class="status down-json" src="@/assets/image/model/downJsonGray.png" />
  115. <img v-else-if="JsonAnalysis.BeginTime&&!JsonAnalysis.EndTime" class="status down-json" src="@/assets/image/model/downJsonBlue.png" />
  116. <img v-else class="status down-json" src="@/assets/image/model/downJsonGreen.png" />
  117. </div>
  118. </div>
  119. <el-row id="revitServer">
  120. <pathCard class="revit-item" :title="'楼层模型检查'" @click="getNodeDes" :data="ModelCheck">
  121. <p>共检查项: 14项</p>
  122. </pathCard>
  123. <pathCard class="revit-item" :title="'导出模型json数据并压缩存储'" @click="getNodeDes" :data="ModelExport"></pathCard>
  124. <!-- 调度器2 -->
  125. <img v-if="!SchedulerExport.BeginTime" class="status row-waiting-manage" src="@/assets/image/model/waitingManageGray.png" />
  126. <img v-else-if="SchedulerExport.BeginTime&&!SchedulerExport.EndTime" class="status row-waiting-manage"
  127. src="@/assets/image/model/waitingManageBlue.png" />
  128. <img v-else class="status row-waiting-manage" src="@/assets/image/model/waitingManageGreen.png" />
  129. <!-- 等待解析 -->
  130. <img v-if="!JsonAnalysis.BeginTime" class="status waiting-anl" src="@/assets/image/model/waitingAnlGray.png" />
  131. <img v-else-if="JsonAnalysis.BeginTime&&!JsonAnalysis.EndTime" class="status waiting-anl" src="@/assets/image/model/waitingAnlBlue.png" />
  132. <img v-else class="status waiting-anl" src="@/assets/image/model/waitingAnlGreen.png" />
  133. <!-- 未通过 -->
  134. <img v-if="!ModelCheck.Remove" class="status del-model" src="@/assets/image/model/delModelGray.png" />
  135. <img v-else class="status del-model" src="@/assets/image/model/delModelBlue.png" />
  136. <!-- 调度器2 -->
  137. <div class="path-tips shadow-box" style="top:114px;left:329px;" @click="getNodeDes"
  138. v-if="SchedulerExport.BeginTime&&!SchedulerExport.EndTime">
  139. <i class="el-icon-error" v-if="SchedulerExport.HasError"></i>
  140. <i class="el-icon-warning" v-else-if="SchedulerExport.HasRetry"></i>
  141. <p>耗时: {{SchedulerExport.TakeTime||'--'}}</p>
  142. <!-- <p>平均上传速度: 1M/s</p> -->
  143. <p>开始时间: {{SchedulerExport.BeginTime||'--'}}</p>
  144. <p v-if="!SchedulerExport.EndTime">待分配模型数量: {{waitAssign}}</p>
  145. <p v-else>结束时间: {{SchedulerExport.EndTime}}</p>
  146. </div>
  147. <p style="float:left;width:100%;text-align:center;margin-top:83px;color:#acb5bb;font-size:12px;">revit本地服务器集群</p>
  148. </el-row>
  149. <!-- 下载模型文件1 -->
  150. <div class="path-tips shadow-box up-model-tips" @click="getNodeDes">
  151. <i class="el-icon-error" v-if="ModelCheck.HasError"></i>
  152. <i class="el-icon-warning" v-else-if="ModelCheck.HasRetry"></i>
  153. <p>耗时: {{ModelCheck.TakeTime||'--'}}</p>
  154. <p>平均下载速度: {{ModelCheckSpeed}}</p>
  155. <p>开始时间: {{UploadState.EndTime||'--'}}</p>
  156. <p>结束时间: {{SchedulerCheck.EndTime||'--'}}</p>
  157. </div>
  158. <!-- 下载模型文件2 -->
  159. <div class="path-tips shadow-box up-model-tips2" @click="getNodeDes">
  160. <i class="el-icon-error" v-if="ModelExport.HasError"></i>
  161. <i class="el-icon-warning" v-else-if="ModelExport.HasRetry"></i>
  162. <p>耗时: {{ModelExport.TakeTime||'--'}}</p>
  163. <p>平均下载速度: {{ModelExportSpeed||'--'}}</p>
  164. <p>开始时间: {{ModelCheck.EndTime||'--'}}</p>
  165. <p>结束时间: {{SchedulerExport.EndTime||'--'}}</p>
  166. </div>
  167. <!-- 存储json -->
  168. <div class="path-tips shadow-box up-json-tips" @click="getNodeDes">
  169. <i class="el-icon-error" v-if="ModelExport.HasError"></i>
  170. <i class="el-icon-warning" v-else-if="ModelExport.HasRetry"></i>
  171. <p>耗时: {{ModelExport.JsonzTakeTime||'--'}}</p>
  172. <p>平均上传速度: {{SaveJsonSpeed||'--'}}</p>
  173. <p>开始时间: {{ModelExport.JsonzBeginTime||'--'}}</p>
  174. <p>结束时间: {{ModelExport.JsonzEndTime||'--'}}</p>
  175. </div>
  176. <!-- 下载json压缩包 -->
  177. <div class="path-tips shadow-box down-json-tips" @click="getNodeDes">
  178. <i class="el-icon-error" v-if="JsonAnalysis.HasError"></i>
  179. <i class="el-icon-warning" v-else-if="JsonAnalysis.HasRetry"></i>
  180. <p>耗时: {{JsonAnalysis.TakeTime||'--'}}</p>
  181. <p>平均下载速度: {{DownJsonSpeed||'--'}}</p>
  182. <p>开始时间: {{JsonAnalysis.BeginTime||'--'}}</p>
  183. <p>结束时间: {{JsonAnalysis.EndTime||'--'}}</p>
  184. </div>
  185. <div id="secondDel" class="delModel">
  186. <i class="iconfont icon-delate" style="color:#89969F;font-size:30px;line-height:1;margin-left:-6px"></i>
  187. <p>放弃文件</p>
  188. </div>
  189. </div>
  190. <div class="third-column column">
  191. <div>
  192. <div id="webDatabase" class="shadow-box">
  193. <div style="background:#b8c5d0;height:20px;"></div>
  194. <div>
  195. <div style="text-align:center;">
  196. <i class="iconfont icon-project-o" style="color:#dee6ec;font-size:40px"></i>
  197. <p style="color:#676767">web服务数据库</p>
  198. </div>
  199. </div>
  200. <img v-if="1||!SaveData.BeginTime" class="status column-up" src="@/assets/image/model/columnGray.png" />
  201. <!-- <img v-else-if="SaveData.BeginTime&&!SaveData.EndTime" class="status column-up" src="@/assets/image/model/columnBlue.png" />
  202. <img v-else class="status column-up" src="@/assets/image/model/columnGreen.png" /> -->
  203. <img v-if="1||!MultiFloorCheck.BeginTime" class="status right-down" src="@/assets/image/model/rightDownGray.png" />
  204. <!-- <img v-else-if="MultiFloorCheck.BeginTime&&!MultiFloorCheck.EndTime" class="status right-down" src="@/assets/image/model/rightDownBlue.png" />
  205. <img v-else class="status right-down" src="@/assets/image/model/rightDownGreen.png" /> -->
  206. </div>
  207. </div>
  208. <el-row id="webServer">
  209. <pathCard class="webServer-item" :title="'解压并解析json文件'" :data="JsonAnalysis" @click="getNodeDes"></pathCard>
  210. <pathCard class="webServer-item" :title="'存储数据到模型web服务数据库'" :data="SaveData" @click="getNodeDes"></pathCard>
  211. <pathCard class="webServer-item" :title="'建筑模型检查'" :data="MultiFloorCheck" @click="getNodeDes">
  212. <p>共检查项: 2项</p>
  213. </pathCard>
  214. <pathCard class="webServer-item" :title="'处理模型数据格式'" :data="SyncDatacenter" @click="getNodeDes"></pathCard>
  215. <img v-if="!SaveData.BeginTime" class="status path1 path" src="@/assets/image/model/arrowGray.png" />
  216. <img v-else-if="SaveData.BeginTime&&!SaveData.EndTime" class="status path1 path" src="@/assets/image/model/arrowBlue.png" />
  217. <img v-else class="status path1 path" src="@/assets/image/model/arrowGreen.png" />
  218. <img v-if="!MultiFloorCheck.BeginTime" class="status path2 path" src="@/assets/image/model/arrowGray.png" />
  219. <img v-else-if="MultiFloorCheck.BeginTime&&!MultiFloorCheck.EndTime" class="status path2 path" src="@/assets/image/model/arrowBlue.png" />
  220. <img v-else class="status path2 path" src="@/assets/image/model/arrowGreen.png" />
  221. <img v-if="!SyncDatacenter.BeginTime" class="status path3 path" src="@/assets/image/model/arrowGray.png" />
  222. <img v-else-if="SyncDatacenter.BeginTime&&!SyncDatacenter.EndTime" class="status path3 path" src="@/assets/image/model/arrowBlue.png" />
  223. <img v-else class="status path3 path" src="@/assets/image/model/arrowGreen.png" />
  224. <img v-if="!SaveLog.BeginTime" class="status path4 path" src="@/assets/image/model/arrowGray.png" />
  225. <img v-else-if="SaveLog.BeginTime&&!SaveLog.EndTime" class="status path4 path" src="@/assets/image/model/arrowBlue.png" />
  226. <img v-else class="status path4 path" src="@/assets/image/model/arrowGreen.png" />
  227. <img v-if="!ModelExport.Remove" class="status del-model" src="@/assets/image/model/delModelGray.png" />
  228. <img v-else class="status del-model" src="@/assets/image/model/delModelBlue.png" />
  229. <p style="float:left;width:100%;text-align:center;margin-top:83px;color:#acb5bb;font-size:12px;">模型web服务器</p>
  230. </el-row>
  231. <div id="thirdDel" class="delModel">
  232. <i class="iconfont icon-delate" style="color:#89969F;font-size:30px;line-height:1;margin-left:-6px"></i>
  233. <p>放弃文件</p>
  234. </div>
  235. </div>
  236. <div class="forth-column column">
  237. <div>
  238. <div id="dataCenterDatabase" class="shadow-box">
  239. <div style="background:#b8c5d0;height:20px;"></div>
  240. <div>
  241. <div style="text-align:center;">
  242. <i class="iconfont icon-project-o" style="color:#dee6ec;font-size:40px"></i>
  243. <p style="color:#676767">数据中心数据库</p>
  244. </div>
  245. </div>
  246. <img v-if="1" class="status column-up" src="@/assets/image/model/columnGray.png" />
  247. <!-- <img v-else-if="2" class="status column-up" src="@/assets/image/model/columnBlue.png" />
  248. <img v-else class="status column-up" src="@/assets/image/model/columnGreen.png" /> -->
  249. </div>
  250. </div>
  251. <el-row id="dataCenterServer">
  252. <pathCard :title="'储存模型数据并记录增删日志'" @click="getNodeDes" :data="SaveLog"></pathCard>
  253. <img v-if="1" class="status path1" src="@/assets/image/model/arrowGray.png" />
  254. <!-- <img v-else-if="2" class="status path1" src="@/assets/image/model/arrowBlue.png" />
  255. <img v-else class="status path1" src="@/assets/image/model/arrowGreen.png" /> -->
  256. <p style="float:left;width:100%;text-align:center;margin-top:83px;color:#acb5bb;font-size:12px;">数据中心服务器 </p>
  257. </el-row>
  258. </div>
  259. <div class="fifth-column column">
  260. <pathCard class="finish-item" :title="'完成'" :data="{}" :isCustomize="true">
  261. <p>后续关系计算...</p>
  262. <p>完成时间: {{SaveLog.EndTime||'--'}}</p>
  263. </pathCard>
  264. </div>
  265. </div>
  266. </el-row>
  267. <nodeDialog ref="nodeDialog"></nodeDialog>
  268. </div>
  269. </template>
  270. <script>
  271. import { mapGetters } from "vuex";
  272. import pathCard from "@/components/model/file/pathCard"
  273. import nodeDialog from "@/components/model/file/nodeDialog"
  274. import { modelPathControl, unassignQuery } from "@/api/model/file";
  275. import Bus from '@/utils/bus.js'
  276. export default {
  277. components: {
  278. pathCard,
  279. nodeDialog
  280. },
  281. computed: {
  282. ...mapGetters("layout", ["projectId"])
  283. },
  284. data() {
  285. return {
  286. loading: false, //
  287. Id: '',
  288. Size: 0,
  289. OriginalName: '',
  290. JsonAnalysis: {}, //解压并解析json文件
  291. ModelCheck: {}, //楼层模型检查
  292. ModelExport: {}, //导出模型json数据并压缩存储
  293. MultiFloorCheck: {}, //建筑模型检查
  294. Note: {}, //储存模型数据并记录增删日志
  295. SaveData: {}, //存储数据到模型web服务数据库
  296. SchedulerCheck: {}, //第一个等待调度器
  297. SchedulerExport: {},//第二个等待调度器
  298. UploadState: {}, //上传下载功能
  299. finish: {},
  300. SyncDatacenter: {}, //处理模型数据格式
  301. SaveLog: {},// 储存模型数据并记录增删日志
  302. timer: null, //定时器
  303. timeout: null, //延时器
  304. waitAssign: 0,
  305. allTakeTime: '', //总耗时
  306. UploadStateSpeed: '', // 上传模型文件平均速度
  307. ModelCheckSpeed: '',//下载模型文件1平均速度
  308. ModelExportSpeed: '',//下载模型文件2平均速度
  309. SaveJsonSpeed: '',//存储json平均速度
  310. DownJsonSpeed: '',//下载json平均速度
  311. }
  312. },
  313. mounted() {
  314. // Bus.$on('modelStatusChange', message => {
  315. // this.init()
  316. // })
  317. },
  318. created() {
  319. this.Id = this.$route.query.Id
  320. this.Size = this.$route.query.Size
  321. this.OriginalName = this.$route.query.OriginalName || '--'
  322. this.init();
  323. },
  324. beforeDestroy() {
  325. if (this.timer) {
  326. clearInterval(this.timer);
  327. }
  328. if (this.timeout) {
  329. clearTimeout(this.timeout);
  330. }
  331. },
  332. methods: {
  333. init() {
  334. this.getMessage();
  335. if (!this.SchedulerExport.EndTime) {
  336. this.getUnassignNum();
  337. }
  338. },
  339. // 弹窗
  340. getNodeDes(data, title) {
  341. let type = '';
  342. if (title == '楼层模型检查') {
  343. type = 'firstCheck'
  344. } else if (title == '建筑模型检查') {
  345. type = 'secondCheck'
  346. }
  347. this.$refs.nodeDialog.showDialog(data, type)
  348. },
  349. // 获取流转状态
  350. getMessage() {
  351. let pa = {
  352. Filters: `Id="${this.Id}"`
  353. }
  354. modelPathControl(pa, res => {
  355. const data = res.Content[0];
  356. if (data.SchedulerExport && data.SchedulerExport.BeginTime) {
  357. data.ModelExport.BeginTime = data.SchedulerExport.BeginTime
  358. }
  359. this.updateData(data);
  360. this.getSpeed();
  361. this.interval(data);
  362. if (!this.SaveLog.EndTime) {
  363. if (this.timeout) {
  364. clearTimeout(this.timeout);
  365. }
  366. this.timeout = setTimeout(() => {
  367. this.init()
  368. }, 30000)
  369. }
  370. })
  371. },
  372. //
  373. getUnassignNum() {
  374. let pa = {
  375. Filters: `Status=0 or Status=1 or Status=2`
  376. }
  377. unassignQuery(pa, res => {
  378. this.waitAssign = res.Total
  379. })
  380. },
  381. // 定时器
  382. interval(data) {
  383. if (this.timer) {
  384. clearInterval(this.timer);
  385. }
  386. this.timer = setInterval(() => {
  387. this.updateData(data)
  388. this.$forceUpdate()
  389. }, 1000)
  390. },
  391. // 计算耗时
  392. updateData(data) {
  393. this.JsonAnalysis = this.formatTime(data.JsonAnalysis || {});
  394. this.ModelCheck = this.formatTime(data.ModelCheck || {})
  395. this.ModelExport = this.formatTime(data.ModelExport || {})
  396. this.MultiFloorCheck = this.formatTime(data.MultiFloorCheck || {})
  397. this.SaveData = this.formatTime(data.SaveData || {})
  398. this.SchedulerCheck = this.formatTime(data.SchedulerCheck || {})
  399. this.SchedulerExport = this.formatTime(data.SchedulerExport || {})
  400. this.UploadState = this.formatTime(data.UploadState || {})
  401. this.SyncDatacenter = this.formatTime(data.SyncDatacenter || {})
  402. this.SaveLog = this.formatTime(data.SaveLog || {})
  403. if (this.UploadState.BeginTime) {
  404. let temp = { BeginTime: this.UploadState.BeginTime }
  405. if (this.SaveLog.EndTime) {
  406. temp.EndTime = this.SaveLog.EndTime
  407. }
  408. this.allTakeTime = this.formatTime(temp).TakeTime
  409. }
  410. if (this.UploadState.EndTime && this.SchedulerCheck.EndTime) {
  411. let temp = {
  412. BeginTime: new Date(this.UploadState.EndTime).getTime(),
  413. EndTime: new Date(this.SchedulerCheck.EndTime).getTime()
  414. }
  415. this.ModelCheck.TakeTime = this.formatTime(temp).TakeTime
  416. } else {
  417. this.ModelCheckSpeed = '--'
  418. }
  419. },
  420. // 设置速度
  421. getSpeed() {
  422. let sTime, eTime;
  423. if (this.UploadState.BeginTime && this.UploadState.EndTime) {
  424. sTime = new Date(this.UploadState.BeginTime).getTime();
  425. eTime = new Date(this.UploadState.EndTime).getTime();
  426. if (sTime != eTime) {
  427. this.UploadStateSpeed = `${(this.Size / (eTime - sTime)).toFixed(1)}KB/S`
  428. } else {
  429. this.UploadStateSpeed = '--'
  430. }
  431. } else {
  432. this.UploadStateSpeed = '--'
  433. }
  434. if (this.UploadState.EndTime && this.SchedulerCheck.EndTime) {
  435. sTime = new Date(this.UploadState.EndTime).getTime();
  436. eTime = new Date(this.SchedulerCheck.EndTime).getTime();
  437. if (sTime != eTime) {
  438. this.ModelCheckSpeed = `${(this.Size / (eTime - sTime)).toFixed(1)}KB/S`
  439. } else {
  440. this.ModelCheckSpeed = '--'
  441. }
  442. } else {
  443. this.ModelCheckSpeed = '--'
  444. }
  445. if (this.ModelCheck.EndTime && this.SchedulerExport.EndTime) {
  446. sTime = new Date(this.ModelCheck.EndTime).getTime();
  447. eTime = new Date(this.SchedulerExport.EndTime).getTime();
  448. if (sTime != eTime) {
  449. this.ModelExportSpeed = `${(this.Size / (eTime - sTime)).toFixed(1)}KB/S`
  450. } else {
  451. this.ModelExportSpeed = '--'
  452. }
  453. } else {
  454. this.ModelExportSpeed = '--'
  455. }
  456. if (this.ModelExport.JsonzBeginTime && this.ModelExport.JsonzEndTime) {
  457. sTime = new Date(this.ModelExport.JsonzBeginTime).getTime();
  458. eTime = new Date(this.ModelExport.JsonzEndTime).getTime();
  459. if (sTime != eTime) {
  460. this.SaveJsonSpeed = `${(this.ModelExport.JsonzSize / (eTime - sTime)).toFixed(1)}KB/S`
  461. } else {
  462. this.SaveJsonSpeed = '--'
  463. }
  464. } else {
  465. this.SaveJsonSpeed = '--'
  466. }
  467. if (this.JsonAnalysis.BeginTime && this.JsonAnalysis.EndTime) {
  468. sTime = new Date(this.JsonAnalysis.BeginTime).getTime();
  469. eTime = new Date(this.JsonAnalysis.EndTime).getTime();
  470. if (sTime != eTime) {
  471. this.DownJsonSpeed = `${(this.ModelExport.JsonzSize / (eTime - sTime)).toFixed(1)}KB/S`
  472. } else {
  473. this.DownJsonSpeed = '--'
  474. }
  475. } else {
  476. this.DownJsonSpeed = '--'
  477. }
  478. },
  479. // 处理时间工具
  480. formatTime(data) {
  481. if (data.BeginTime && !data.EndTime) {
  482. const sTime = new Date(data.BeginTime).getTime();
  483. const eTime = new Date().getTime();
  484. data.TakeTime = this.msToStr(eTime - sTime);
  485. } else if (data.BeginTime && data.EndTime) {
  486. const sTime = new Date(data.BeginTime).getTime();
  487. const eTime = new Date(data.EndTime).getTime();
  488. data.TakeTime = this.msToStr(eTime - sTime);
  489. }
  490. if (data.JsonzBeginTime && !data.JsonzEndTime) {
  491. const sTime = new Date(data.JsonzBeginTime).getTime();
  492. const eTime = new Date().getTime();
  493. data.JsonzTakeTime = this.msToStr(eTime - sTime);
  494. } else if (data.JsonzBeginTime && data.JsonzEndTime) {
  495. const sTime = new Date(data.JsonzBeginTime).getTime();
  496. const eTime = new Date(data.JsonzEndTime).getTime();
  497. data.JsonzTakeTime = this.msToStr(eTime - sTime);
  498. }
  499. return data;
  500. },
  501. msToStr(mss) {
  502. let str = '';
  503. const days = parseInt(mss / (1000 * 60 * 60 * 24));
  504. const hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  505. const minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
  506. const seconds = ((mss % (1000 * 60)) / 1000).toFixed();
  507. if (days > 0) {
  508. str += `${days}天`
  509. }
  510. if (hours > 0) {
  511. str += `${hours}小时`
  512. }
  513. if (minutes > 0) {
  514. str += `${minutes}分钟`
  515. }
  516. if (seconds > 0) {
  517. str += `${seconds}秒`
  518. }
  519. return str;
  520. }
  521. }
  522. };
  523. </script>
  524. <style lang="less" scoped>
  525. #path-control {
  526. box-sizing: border-box;
  527. padding: 10px;
  528. border: 1px solid #e4e4e4;
  529. background-color: #fff;
  530. overflow: hidden;
  531. .title-time {
  532. padding: 10px;
  533. border-bottom: 1px solid #e4e4e4;
  534. & > div {
  535. float: left;
  536. font-size: 14px;
  537. }
  538. & > div + div {
  539. margin-left: 20px;
  540. }
  541. }
  542. .path-pic {
  543. height: calc(100% - 50px);
  544. overflow-x: auto;
  545. #path-container {
  546. position: relative;
  547. height: 100%;
  548. padding: 20px 0 0;
  549. width: 4450px;
  550. img.status {
  551. position: absolute;
  552. }
  553. .column {
  554. height: 100%;
  555. position: relative;
  556. float: left;
  557. width: 1000px;
  558. &.first-column {
  559. width: 832px;
  560. #baseServer {
  561. border: 2px dashed #b8c5d0;
  562. border-radius: 4px;
  563. padding: 20px 20px 0;
  564. margin: 389px 20px 0;
  565. width: 584px;
  566. height: 270px;
  567. .updown {
  568. position: relative;
  569. width: 150px;
  570. height: 150px;
  571. float: left;
  572. margin-right: 150px;
  573. }
  574. .mid-transfer {
  575. position: relative;
  576. width: 235px;
  577. height: 90px;
  578. float: left;
  579. margin-top: 30px;
  580. }
  581. }
  582. .first-title {
  583. background-color: #f3f5f6;
  584. font-size: 14px;
  585. padding: 5px 10px;
  586. i {
  587. margin-right: 5px;
  588. }
  589. }
  590. .first-content {
  591. font-size: 12px;
  592. padding: 10px;
  593. color: #acb5bb;
  594. }
  595. .row-status {
  596. left: 170px;
  597. top: 70px;
  598. }
  599. .row-waiting-manage {
  600. left: 264px;
  601. top: 30px;
  602. }
  603. .up-model {
  604. left: 95px;
  605. bottom: 96px;
  606. }
  607. }
  608. &.second-column {
  609. #ossServer {
  610. position: relative;
  611. width: 780px;
  612. margin: 0 auto;
  613. .server-content {
  614. padding: 20px 0;
  615. .sm-box {
  616. float: left;
  617. padding: 0 10px;
  618. line-height: 1;
  619. & > div {
  620. float: left;
  621. font-size: 12px;
  622. }
  623. &:nth-child(1) {
  624. width: 100px;
  625. margin-right: 30px;
  626. }
  627. &:nth-child(2),
  628. &:nth-child(3) {
  629. padding: 15px 20px;
  630. background: #eef2f6;
  631. border-radius: 4px;
  632. border: 2px dashed #b8c5d0;
  633. }
  634. &:nth-child(3) {
  635. margin-left: 40px;
  636. }
  637. .fixed {
  638. p {
  639. width: 167px;
  640. overflow: hidden;
  641. text-overflow: ellipsis;
  642. white-space: nowrap;
  643. }
  644. }
  645. .image {
  646. margin-right: 20px;
  647. }
  648. p {
  649. margin-bottom: 8px;
  650. }
  651. }
  652. }
  653. .down-model {
  654. left: 82px;
  655. top: 156px;
  656. }
  657. .down-model-sec {
  658. left: 565px;
  659. top: 156px;
  660. }
  661. .up-json {
  662. left: 665px;
  663. top: 156px;
  664. }
  665. .down-json {
  666. top: 68px;
  667. right: -460px;
  668. }
  669. }
  670. #revitServer {
  671. padding: 16px 16px 0;
  672. border: 2px dashed #b8c5d0;
  673. width: 890px;
  674. height: 270px;
  675. margin: 235px auto 0;
  676. .revit-item {
  677. float: left;
  678. &:nth-child(1) {
  679. margin-right: 255px;
  680. }
  681. }
  682. .row-waiting-manage {
  683. left: 300px;
  684. top: 80px;
  685. transform: scale(0.9);
  686. }
  687. .waiting-anl {
  688. right: -263px;
  689. top: 80px;
  690. }
  691. .del-model {
  692. left: 91px;
  693. top: 168px;
  694. }
  695. }
  696. .up-model-tips {
  697. left: -44px;
  698. top: 202px;
  699. }
  700. .up-model-tips2 {
  701. left: 439px;
  702. top: 202px;
  703. }
  704. .up-json-tips {
  705. left: 815px;
  706. top: 202px;
  707. }
  708. .down-json-tips {
  709. right: -336px;
  710. top: 114px;
  711. }
  712. #secondDel {
  713. margin: 48px 0 0 166px;
  714. }
  715. }
  716. &.third-column {
  717. width: 1544px;
  718. margin-left: 200px;
  719. #webDatabase {
  720. width: 130px;
  721. height: 144px;
  722. margin-left: 500px;
  723. .column-up {
  724. top: 158px;
  725. left: 565px;
  726. transform: scale(1.1);
  727. }
  728. .right-down {
  729. right: 560px;
  730. top: 103px;
  731. }
  732. }
  733. #webServer {
  734. border: 2px dashed #b8c5d0;
  735. margin-top: 241px;
  736. padding: 16px 16px 0;
  737. height: 270px;
  738. .webServer-item {
  739. float: left;
  740. & + .webServer-item {
  741. margin-left: 105px;
  742. }
  743. }
  744. .path {
  745. top: 95px;
  746. }
  747. .path1 {
  748. left: 311px;
  749. }
  750. .path2 {
  751. left: 715px;
  752. }
  753. .path3 {
  754. left: 1117px;
  755. }
  756. .path4 {
  757. left: 1520px;
  758. }
  759. .del-model {
  760. right: 517px;
  761. top: 168px;
  762. }
  763. }
  764. #thirdDel {
  765. margin: 48px 0 0 925px;
  766. }
  767. }
  768. &.forth-column {
  769. width: 335px;
  770. margin-left: 70px;
  771. margin-right: 87px;
  772. #dataCenterDatabase {
  773. width: 130px;
  774. height: 144px;
  775. margin: 0 auto;
  776. .column-up {
  777. top: 158px;
  778. left: 165px;
  779. transform: scale(1.1);
  780. }
  781. }
  782. #dataCenterServer {
  783. border: 2px dashed #b8c5d0;
  784. margin-top: 240px;
  785. padding: 16px 16px 0;
  786. height: 270px;
  787. .path1 {
  788. top: 95px;
  789. left: 311px;
  790. }
  791. }
  792. }
  793. &.fifth-column {
  794. width: auto;
  795. .finish-item {
  796. margin-top: 403px;
  797. }
  798. }
  799. }
  800. }
  801. }
  802. .shadow-box {
  803. box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
  804. border-radius: 4px;
  805. }
  806. .path-tips {
  807. position: absolute;
  808. font-size: 12px;
  809. width: 204px;
  810. height: 93px;
  811. padding: 10px;
  812. i {
  813. position: absolute;
  814. font-size: 16px;
  815. right: 10px;
  816. &.el-icon-warning {
  817. color: #fbc636;
  818. }
  819. &.el-icon-error {
  820. color: #ff6660;
  821. }
  822. }
  823. }
  824. .delModel {
  825. width: 76px;
  826. height: 66px;
  827. font-size: 12px;
  828. text-align: center;
  829. padding-top: 10px;
  830. background: #eef2f6;
  831. border: 2px solid #b8c5d0;
  832. border-radius: 5px;
  833. }
  834. }
  835. </style>