assetsDetail.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184
  1. <template>
  2. <div class="detail-box">
  3. <el-scrollbar style="height:100%;">
  4. <div class="attribute-detail detail-item">
  5. <el-form :model="detail" label-width="150px">
  6. <el-form-item label="资产基本信息"></el-form-item>
  7. <el-form-item label="任务创建时间:">{{ detail.CreateTime || '--' }}</el-form-item>
  8. <el-form-item label="任务当前状态:">{{ detail.TaskState || '--' }}</el-form-item>
  9. <el-form-item label="任务执行方案:">{{ detail.ScanScheme?detail.ScanScheme.SchemeName?detail.ScanScheme.SchemeName:'--':'--' }}</el-form-item>
  10. <el-form-item label="设备族:">{{ detail.EquipFamily?detail.EquipFamily.FamilyName?detail.EquipFamily.FamilyName:'--':'--' }}</el-form-item>
  11. <el-form-item label="全局名称:">{{ detail.EquipName || '--' }}</el-form-item>
  12. <el-form-item label="资产本地名称:">{{ detail.EquipLocalName || '--' }}</el-form-item>
  13. <el-form-item label="资产本地编码:">{{ detail.EquipLocalID || '--' }}</el-form-item>
  14. <el-form-item label="设计图纸中编码:">{{ detail.CadId || '--' }}</el-form-item>
  15. <el-form-item label="安装位置:">{{ detail.InstallLocation || '--' }}</el-form-item>
  16. <el-form-item label="生产厂家:">{{ detail.Manufacturer || '--' }}</el-form-item>
  17. <el-form-item label="型号:">{{ detail.Specification || '--' }}</el-form-item>
  18. <el-form-item label="供应商:">{{ detail.Supplier || '--' }}</el-form-item>
  19. </el-form>
  20. </div>
  21. <div class="implement-detail detail-item" v-if="detail.TaskState == '未找到'">
  22. <el-form :model="detail" label-width="150px">
  23. <el-form-item label="执行任务人:">{{ detail.WorkerName || '--' }}</el-form-item>
  24. <el-form-item label="执行时间:">{{ detail.ProcessTime || '--' }}</el-form-item>
  25. <el-form-item label="未找到对象信息"></el-form-item>
  26. <el-form-item label="资产名称:">{{ detail.EquipLocalName || detail.EquipName || '--' }}</el-form-item>
  27. <el-form-item label="全景图:" v-show="panoramaList && panoramaList.length">
  28. <div class="img-item" @click="dialogVisible = true" v-for="item in panoramaList" :key="item.Key">
  29. <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${item.Key}`" style="width:100%;" :alt="item.Name">
  30. </div>
  31. </el-form-item>
  32. <el-form-item label="资产照片:" v-show="imgList && imgList.length">
  33. <div class="img-item">
  34. <div class="demo-image__preview">
  35. <el-image style="width:100%;" v-for="item in imgList"
  36. :key="item.Key" :title="item.Name"
  37. @click="nowUrl = item.Key"
  38. :src="`/image-service/common/image_get?systemId=dataPlatform&key=${item.Key}&width=400`"
  39. :preview-src-list="srcList">
  40. </el-image>
  41. </div>
  42. </div>
  43. </el-form-item>
  44. <el-form-item label="现场视频:" v-show="videoList && videoList.length">
  45. <video controls style="width:100%;" v-for="item in videoList" :key="item.Key" :title="item.Name">
  46. <source :src="`/image-service/common/image_get?systemId=dataPlatform&key=${item.Key}`" type="video/mp4">
  47. 您的浏览器不支持 HTML5 video ,暂无法播放。
  48. </video>
  49. </el-form-item>
  50. <el-form-item label="备注信息:">{{ detail.Note || '--' }}</el-form-item>
  51. </el-form>
  52. </div>
  53. <div class="operation-detail detail-item">
  54. <el-form>
  55. <el-form-item label="操作信息:"></el-form-item>
  56. <div class="block">
  57. <el-timeline>
  58. <el-timeline-item timestamp="2018/4/12" placement="top">
  59. <el-card>
  60. <h4>更新 Github 模板</h4>
  61. <p>王小虎 提交于 2018/4/12 20:46</p>
  62. </el-card>
  63. </el-timeline-item>
  64. <el-timeline-item timestamp="2018/4/3" placement="top">
  65. <el-card>
  66. <h4>更新 Github 模板</h4>
  67. <p>王小虎 提交于 2018/4/3 20:46</p>
  68. </el-card>
  69. </el-timeline-item>
  70. <el-timeline-item timestamp="2018/4/2" placement="top">
  71. <el-card>
  72. <h4>更新 Github 模板</h4>
  73. <p>王小虎 提交于 2018/4/2 20:46</p>
  74. </el-card>
  75. </el-timeline-item>
  76. </el-timeline>
  77. </div>
  78. </el-form>
  79. </div>
  80. </el-scrollbar>
  81. <el-dialog title="全景图" :visible.sync="dialogVisible" width="70%" append-to-body>
  82. 一张图
  83. </el-dialog>
  84. </div>
  85. </template>
  86. <script>
  87. import { } from "@/api/scan/request"
  88. import { mapGetters } from "vuex"
  89. export default {
  90. components: {
  91. },
  92. computed: {
  93. ...mapGetters("layout", ["projectId"]),
  94. panoramaList(){
  95. if(this.detail && this.detail.TaskPicList && this.detail.TaskPicList.length){
  96. return this.detail.TaskPicList.filter(item => {
  97. return item.Type == 'panorama'
  98. })
  99. } else {
  100. return []
  101. }
  102. },
  103. imgList(){
  104. if(this.detail && this.detail.TaskPicList && this.detail.TaskPicList.length){
  105. return this.detail.TaskPicList.filter(item => {
  106. return item.Type == 'image'
  107. })
  108. } else {
  109. return []
  110. }
  111. },
  112. videoList(){
  113. if(this.detail && this.detail.TaskPicList && this.detail.TaskPicList.length){
  114. return this.detail.TaskPicList.filter(item => {
  115. return item.Type == 'video'
  116. })
  117. } else {
  118. return []
  119. }
  120. },
  121. srcList(){
  122. let nowIndex = this.imgList.findIndex(item => {return item.Key == this.nowUrl})
  123. let index = nowIndex >= 1 ? nowIndex : 0;
  124. let tempArr1 = this.imgList.slice(0, index);
  125. let tempArr2 = this.imgList.slice(index, this.imgList.length);
  126. let res = tempArr2.concat(tempArr1).map(item => {
  127. return `/image-service/common/image_get?systemId=dataPlatform&key=${item.Key}`
  128. });
  129. return res;
  130. }
  131. },
  132. props: {
  133. detail: Object
  134. },
  135. data() {
  136. return {
  137. dialogVisible: false,//全景图弹出框
  138. nowUrl: ''//当前正在显示的图
  139. };
  140. },
  141. methods: {
  142. },
  143. watch: {
  144. 'detail.TaskId'() {
  145. console.log(this.detail)
  146. }
  147. }
  148. };
  149. </script>
  150. <style lang="less" scoped>
  151. .detail-box {
  152. width: 100%;
  153. height: 100%;
  154. box-sizing: border-box;
  155. /deep/ .el-scrollbar__wrap {
  156. overflow-x: hidden;
  157. }
  158. /deep/ .el-icon-circle-close {
  159. color: white;
  160. }
  161. /deep/ .el-form-item__content {
  162. text-overflow: ellipsis;
  163. overflow: hidden;
  164. }
  165. .detail-item {
  166. width: calc(100% - 30px);
  167. margin: 15px 15px 10px;
  168. padding: 10px;
  169. box-sizing: border-box;
  170. border-left: 1px solid #eee;
  171. box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
  172. }
  173. .img-item {
  174. position: relative;
  175. cursor: pointer;
  176. }
  177. }
  178. </style>