deviceDetail.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318
  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="任务执行方案:">
  10. {{ detail.schemeId ? (detail.schemeId == 1 ? "极简" : "标准") : "--" }}
  11. </el-form-item>
  12. <el-form-item label="设备类:"
  13. >{{ detail.equipCategory ? (detail.equipCategory.name ? detail.equipCategory.name : "--") : "--" }}
  14. </el-form-item>
  15. <el-form-item label="全局名称:">{{ detail.equipName || "--" }}</el-form-item>
  16. <el-form-item label="设备本地名称:">{{ detail.localName || "--" }}</el-form-item>
  17. <el-form-item label="设备本地编码:">{{ detail.localId || "--" }}</el-form-item>
  18. <el-form-item label="设计图纸中编码:">{{ detail.cadId || "--" }}</el-form-item>
  19. <el-form-item label="安装位置:">{{ detail.installLocation || "--" }}</el-form-item>
  20. <el-form-item label="生产厂家:">{{ detail.manufacturer || "--" }}</el-form-item>
  21. <el-form-item label="型号:">{{ detail.specification || "--" }}</el-form-item>
  22. <el-form-item label="供应商:">{{ detail.supplier || "--" }}</el-form-item>
  23. <el-form-item label="包含部件:"> {{ Name ? Name : "-" }}{{ Count ? ":" + Count + "个" : "-" }} </el-form-item>
  24. </el-form>
  25. </div>
  26. <div class="implement-detail detail-item" v-if="detail.taskState === '未找到'">
  27. <el-form :model="detail" label-width="150px">
  28. <el-form-item label="执行任务人:">{{ detail.workerName || "--" }}</el-form-item>
  29. <el-form-item label="执行时间:">{{ detail.processTime || "--" }}</el-form-item>
  30. <el-form-item label="未找到对象信息"></el-form-item>
  31. <el-form-item label="设备信息:" v-if="!detail.isComponent">{{ detail.localName || detail.name || "--" }} </el-form-item>
  32. <el-form-item label="部件信息:" v-else>
  33. <div v-if="detail.component && detail.component.length">
  34. <p v-for="item in detail.component ? detail.component : []" :key="item.taskId" show-overflow-tooltip>
  35. {{ item.localName || item.equipName }}
  36. </p>
  37. </div>
  38. <div v-else>--</div>
  39. </el-form-item>
  40. <el-form-item label="全景图:" v-show="panoramaList && panoramaList.length">
  41. <div class="img-item" @click="dialogVisible = true" v-for="item in panoramaList" :key="item.key">
  42. <img
  43. :src="`/image-service/common/image_get?systemId=dataPlatform&key=${item.key}`"
  44. style="width: 100%"
  45. :alt="item.name"
  46. />
  47. </div>
  48. </el-form-item>
  49. <el-form-item label="设备照片:" v-show="imgList && imgList.length">
  50. <div class="img-item">
  51. <div class="demo-image__preview">
  52. <el-image
  53. style="width: 100%"
  54. v-for="item in imgList"
  55. :key="item.key"
  56. :title="item.name"
  57. @click="nowUrl = item.key"
  58. :src="`/image-service/common/image_get?systemId=dataPlatform&key=${item.key}&width=400`"
  59. :preview-src-list="srcList"
  60. >
  61. </el-image>
  62. </div>
  63. </div>
  64. </el-form-item>
  65. <el-form-item label="现场视频:" v-show="videoList && videoList.length">
  66. <video controls style="width: 100%" v-for="item in videoList" :key="item.key" :title="item.name">
  67. <source :src="`/image-service/common/file_get?systemId=dataPlatform&key=${item.key}`" type="video/mp4" />
  68. 您的浏览器不支持 HTML5 video ,暂无法播放。
  69. </video>
  70. </el-form-item>
  71. <el-form-item label="备注信息:">{{ detail.note || "--" }}</el-form-item>
  72. </el-form>
  73. </div>
  74. <div class="operation-detail detail-item" v-if="detail.taskState === '未找到'">
  75. <el-form>
  76. <el-form-item label="操作信息:"></el-form-item>
  77. <div class="block">
  78. <el-timeline>
  79. <el-timeline-item placement="top" v-for="(item, index) in arr" :key="index" :timestamp="item.timestamp">
  80. <el-card>
  81. <small>{{ item.content }}</small>
  82. <p>{{ item.title }}</p>
  83. <img
  84. v-for="isImg in item.imgs"
  85. :key="isImg.key"
  86. :src="`/image-service/common/image_get?systemId=dataPlatform&key=${isImg.key}`"
  87. />
  88. <video controls style="width: 100%" v-for="(v, i) in item.videoList" :key="`video_${i}`" :title="v.name">
  89. <source :src="`/image-service/common/file_get?systemId=dataPlatform&key=${v.key}`" type="video/mp4" />
  90. 您的浏览器不支持 HTML5 video ,暂无法播放。
  91. </video>
  92. </el-card>
  93. </el-timeline-item>
  94. </el-timeline>
  95. </div>
  96. </el-form>
  97. </div>
  98. </el-scrollbar>
  99. <el-dialog title="全景图" :visible.sync="dialogVisible" width="70%" append-to-body> 一张图 </el-dialog>
  100. </div>
  101. </template>
  102. <script>
  103. import { mapGetters } from "vuex"
  104. import { categoryCount, modelCategoryCount } from "@/api/data_admin/buildTaskApi"
  105. export default {
  106. components: {},
  107. computed: {
  108. ...mapGetters("layout", ["projectId"]),
  109. notFoundList() {
  110. if (this.detail && this.detail.component && this.detail.component.length) {//是否存在部件
  111. let index = this.detail.component.findIndex(item => {
  112. return item.taskState == -1
  113. })
  114. if (index != -1) {//部件中存在未找到的对象
  115. this.detail.isComponent = true
  116. return this.detail.component[index].taskPicList ? this.detail.component[index].taskPicList : []
  117. } else {//部件全部找到
  118. this.detail.isComponent = false
  119. return this.detail.taskPicList ? this.detail.taskPicList : []
  120. }
  121. } else {
  122. this.detail.isComponent = false
  123. if (this.detail && this.detail.taskPicList && this.detail.taskState.length) {
  124. return this.detail.taskPicList
  125. } else {
  126. return []
  127. }
  128. }
  129. },
  130. panoramaList() {
  131. if (this.notFoundList && this.notFoundList.length) {
  132. return this.notFoundList.filter(item => {
  133. return item.type == 'panorama'
  134. })
  135. } else {
  136. return []
  137. }
  138. },
  139. imgList() {
  140. if (this.notFoundList && this.notFoundList.length) {
  141. return this.notFoundList.filter(item => {
  142. return item.type == 'image'
  143. })
  144. } else {
  145. return []
  146. }
  147. },
  148. videoList() {
  149. if (this.notFoundList && this.notFoundList.length) {
  150. return this.notFoundList.filter(item => {
  151. return item.type == 'video'
  152. })
  153. } else {
  154. return []
  155. }
  156. },
  157. srcList() {
  158. let nowIndex = this.imgList.findIndex(item => {
  159. return item.key == this.nowUrl
  160. })
  161. let index = nowIndex >= 1 ? nowIndex : 0;
  162. let tempArr1 = this.imgList.slice(0, index);
  163. let tempArr2 = this.imgList.slice(index, this.imgList.length);
  164. let res = tempArr2.concat(tempArr1).map(item => {
  165. return `/image-service/common/image_get?systemId=dataPlatform&key=${item.key}`
  166. });
  167. return res;
  168. },
  169. arr() {
  170. let { confirmTime, positivePhotoTime, qrCodeTime, nameplateTime, sidePhotoTime, videoTime, equipProblemTime, equipProblem, taskPicList, processTime, regionPhotoTime } = this.detail;
  171. let arr = []
  172. processTime && arr.push({
  173. timestamp: processTime,
  174. time: new Date(processTime).getTime(),
  175. content: '执行任务',
  176. })
  177. qrCodeTime && arr.push({
  178. timestamp: qrCodeTime,
  179. time: new Date(qrCodeTime).getTime(),
  180. content: '黏贴二维码',
  181. imgs: taskPicList.length && taskPicList.filter(i => i.name.includes('带二维码的设备近景照片'))
  182. })
  183. positivePhotoTime && arr.push({
  184. timestamp: positivePhotoTime,
  185. time: new Date(positivePhotoTime).getTime(),
  186. content: '拍摄正面照片',
  187. imgs: taskPicList.length && taskPicList.filter(i => i.name.includes('设备正面照片'))
  188. })
  189. nameplateTime && arr.push({
  190. timestamp: nameplateTime,
  191. time: new Date(nameplateTime).getTime(),
  192. content: '拍摄铭牌照片',
  193. imgs: taskPicList.length && taskPicList.filter(i => i.name.includes('铭牌照片'))
  194. })
  195. sidePhotoTime && arr.push({
  196. timestamp: sidePhotoTime,
  197. time: new Date(sidePhotoTime).getTime(),
  198. content: '拍摄侧面照片',
  199. imgs: taskPicList.length && taskPicList.filter(i => i.name.includes('设备左侧照片' || '设备右侧照片'))
  200. })
  201. regionPhotoTime && arr.push({
  202. timestamp: regionPhotoTime,
  203. time: new Date(regionPhotoTime).getTime(),
  204. content: '拍摄局部照片',
  205. imgs: taskPicList.length && taskPicList.filter(i => i.name.includes('其他照片'))
  206. })
  207. videoTime && arr.push({
  208. timestamp: videoTime,
  209. time: new Date(videoTime).getTime(),
  210. content: '拍摄30s视频',
  211. videoList: taskPicList.length && taskPicList.filter(i => i.name.includes('视频资料'))
  212. })
  213. equipProblemTime && arr.push({
  214. timestamp: equipProblemTime,
  215. time: new Date(equipProblemTime).getTime(),
  216. content: '记录设备问题',
  217. title: equipProblem
  218. })
  219. confirmTime && arr.push({
  220. timestamp: confirmTime,
  221. time: new Date(confirmTime).getTime(),
  222. content: '确认信息',
  223. title: '已确认的设备信息'
  224. })
  225. return arr.map(i => ({ ...i })).sort((a, b) => a.time - b.time)
  226. },
  227. },
  228. props: {
  229. detail: Object,
  230. type: String
  231. },
  232. data() {
  233. return {
  234. dialogVisible: false,//全景图弹出框
  235. nowUrl: '',//当前正在显示的图
  236. Name: '',
  237. Count: '', //包含部件
  238. };
  239. },
  240. methods: {
  241. // 查询设备部件数量
  242. handleContent(row) {
  243. let param = {
  244. id: row.id,
  245. equipId: row.equipId
  246. }
  247. this.Name = ''
  248. this.Count = ''
  249. categoryCount(param, res => {
  250. if (res.content.length) {
  251. this.Name = res.content[0].name
  252. this.Count = res.content[0].count
  253. }
  254. })
  255. },
  256. // 查询模型部件数量
  257. handleModelContent(row) {
  258. let param = {
  259. id: row.id,
  260. equipId: row.equipId
  261. }
  262. this.Name = ''
  263. this.Count = ''
  264. modelCategoryCount(param, res => {
  265. if (res.content.length) {
  266. this.Name = res.content[0].name
  267. this.Count = res.content[0].count
  268. }
  269. })
  270. }
  271. },
  272. watch: {
  273. 'detail.id'() {
  274. console.log(this.detail)
  275. }
  276. }
  277. };
  278. </script>
  279. <style lang="less" scoped>
  280. .detail-box {
  281. width: 100%;
  282. height: 100%;
  283. box-sizing: border-box;
  284. /deep/ .el-scrollbar__wrap {
  285. overflow-x: hidden;
  286. }
  287. /deep/ .el-icon-circle-close {
  288. color: white;
  289. }
  290. /deep/ .el-form-item__content {
  291. text-overflow: ellipsis;
  292. overflow: hidden;
  293. }
  294. .detail-item {
  295. width: calc(100% - 30px);
  296. margin: 15px 15px 10px;
  297. padding: 10px;
  298. box-sizing: border-box;
  299. border-left: 1px solid #eee;
  300. box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
  301. }
  302. .img-item {
  303. position: relative;
  304. cursor: pointer;
  305. }
  306. }
  307. </style>