deviceDetail.vue 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  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.TaskId || '--' }}</el-form-item>
  10. <el-form-item label="设备类:">{{ detail.EquipCategory.EquipName || '--' }}</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-item label="包含部件:">
  20. <div v-if="detail.Equipment.Component && detail.Equipment.Component.length">
  21. <p v-for="(item, index) in detail.Equipment.Component" :key="index" show-overflow-tooltip>
  22. {{ item.EquipName }}
  23. </p>
  24. </div>
  25. <div v-else>--</div>
  26. </el-form-item>
  27. </el-form>
  28. </div>
  29. <div class="implement-detail detail-item">
  30. <el-form :model="detail" label-width="150px">
  31. <el-form-item label="执行任务人:">{{ detail.WorkerName || '--' }}</el-form-item>
  32. <el-form-item label="执行时间:">{{ detail.ProcessTime || '--' }}</el-form-item>
  33. <el-form-item label="未找到对象信息:"></el-form-item>
  34. <el-form-item label="部件信息:">
  35. <div v-if="detail.Equipment.Component && detail.Equipment.Component.length">
  36. <p v-for="(item, index) in detail.Equipment.Component" :key="index" show-overflow-tooltip>
  37. {{ item.EquipName }}
  38. </p>
  39. </div>
  40. <div v-else>--</div>
  41. </el-form-item>
  42. <el-form-item label="全景图:">
  43. <div class="img-item" @click="dialogVisible = true">
  44. <img src="@/assets/house.jpg" style="width:100%;" alt="图片走丢了">
  45. </div>
  46. </el-form-item>
  47. <el-form-item label="部件照片:">
  48. <div class="img-item">
  49. <div class="demo-image__preview">
  50. <el-image style="width:100%;" @click="nowUrl = url1" :src="url1" :preview-src-list="srcList"></el-image>
  51. <el-image style="width:100%;" @click="nowUrl = url2" :src="url2" :preview-src-list="srcList"></el-image>
  52. <el-image style="width:100%;" @click="nowUrl = url3" :src="url3" :preview-src-list="srcList"></el-image>
  53. </div>
  54. </div>
  55. </el-form-item>
  56. <el-form-item label="现场视频:">
  57. <video controls style="width:100%;">
  58. <source src="https://www.runoob.com/try/demo_source/movie.mp4" type="video/mp4">
  59. 您的浏览器不支持 HTML5 video ,暂无法播放。
  60. </video>
  61. </el-form-item>
  62. <el-form-item label="备注信息:">{{ detail.Note || '--' }}</el-form-item>
  63. </el-form>
  64. </div>
  65. <div class="operation-detail detail-item">
  66. <el-form>
  67. <el-form-item label="操作信息:"></el-form-item>
  68. <div class="block">
  69. <el-timeline>
  70. <el-timeline-item timestamp="2018/4/12" placement="top">
  71. <el-card>
  72. <h4>更新 Github 模板</h4>
  73. <p>王小虎 提交于 2018/4/12 20:46</p>
  74. </el-card>
  75. </el-timeline-item>
  76. <el-timeline-item timestamp="2018/4/3" placement="top">
  77. <el-card>
  78. <h4>更新 Github 模板</h4>
  79. <p>王小虎 提交于 2018/4/3 20:46</p>
  80. </el-card>
  81. </el-timeline-item>
  82. <el-timeline-item timestamp="2018/4/2" placement="top">
  83. <el-card>
  84. <h4>更新 Github 模板</h4>
  85. <p>王小虎 提交于 2018/4/2 20:46</p>
  86. </el-card>
  87. </el-timeline-item>
  88. </el-timeline>
  89. </div>
  90. </el-form>
  91. </div>
  92. </el-scrollbar>
  93. <el-dialog title="全景图" :visible.sync="dialogVisible" width="70%" append-to-body>
  94. 一张图
  95. </el-dialog>
  96. </div>
  97. </template>
  98. <script>
  99. import { } from "@/api/scan/request"
  100. import { mapGetters } from "vuex"
  101. export default {
  102. components: {
  103. },
  104. computed: {
  105. ...mapGetters("layout", ["projectId"]),
  106. srcList: function () {
  107. let index = this.urls.indexOf(this.nowUrl) >= 1 ? this.urls.indexOf(this.nowUrl) : 0;
  108. // let temp = this.urls.concat();
  109. let temp = this.urls;
  110. let tempArr1 = temp.slice(0, index);
  111. let tempArr2 = temp.slice(index, temp.length);
  112. let res = tempArr2.concat(tempArr1);
  113. return res;
  114. }
  115. },
  116. props: {
  117. detail: Object,
  118. },
  119. data() {
  120. return {
  121. dialogVisible: false,//全景图弹出框
  122. nowUrl: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',//当前正在显示的图
  123. url1: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
  124. url2: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  125. url3: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
  126. urls: ['https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg', 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg']
  127. };
  128. },
  129. created() {
  130. console.log(this.detail);
  131. },
  132. methods: {
  133. },
  134. watch: {
  135. detail: {
  136. handler(newName, oldName) {
  137. // this.page.pageNumber = 1
  138. // this.getTableData()
  139. },
  140. immediate: true,
  141. deep: true
  142. }
  143. }
  144. };
  145. </script>
  146. <style lang="less" scoped>
  147. .detail-box {
  148. width: 100%;
  149. height: 100%;
  150. box-sizing: border-box;
  151. /deep/ .el-scrollbar__wrap {
  152. overflow-x: hidden;
  153. }
  154. /deep/ .el-icon-circle-close {
  155. color: white;
  156. }
  157. /deep/ .el-form-item__content {
  158. text-overflow: ellipsis;
  159. overflow: hidden;
  160. }
  161. .detail-item {
  162. width: calc(100% - 30px);
  163. margin: 15px 15px 10px;
  164. padding: 10px;
  165. box-sizing: border-box;
  166. border-left: 1px solid #eee;
  167. box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
  168. }
  169. .img-item {
  170. position: relative;
  171. cursor: pointer;
  172. }
  173. }
  174. </style>