deviceDetail.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  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.EquipName?detail.EquipCategory.EquipName:'--':'--' }}
  14. </el-form-item>
  15. <el-form-item label="全局名称:">{{ detail.EquipName || '--' }}</el-form-item>
  16. <el-form-item label="设备本地名称:">{{ detail.EquipLocalName || '--' }}</el-form-item>
  17. <el-form-item label="设备本地编码:">{{ detail.EquipLocalID || '--' }}</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="包含部件:">
  24. <div v-if="detail.Component && detail.Component.length">
  25. <p v-for="(item, index) in detail.Component?detail.Component:[]" :key="index"
  26. show-overflow-tooltip>
  27. {{ item.EquipName }}
  28. </p>
  29. </div>
  30. <div v-else>--</div>
  31. </el-form-item>
  32. </el-form>
  33. </div>
  34. <div class="implement-detail detail-item" v-if="detail.TaskState === '未找到'">
  35. <el-form :model="detail" label-width="150px">
  36. <el-form-item label="执行任务人:">{{ detail.WorkerName || '--' }}</el-form-item>
  37. <el-form-item label="执行时间:">{{ detail.ProcessTime || '--' }}</el-form-item>
  38. <el-form-item label="未找到对象信息"></el-form-item>
  39. <el-form-item label="设备信息:" v-if="!detail.isComponent">{{ detail.EquipLocalName || detail.EquipName
  40. ||'--' }}
  41. </el-form-item>
  42. <el-form-item label="部件信息:" v-else>
  43. <div v-if="detail.Component && detail.Component.length">
  44. <p v-for="item in detail.Component?detail.Component:[]" :key="item.TaskId"
  45. show-overflow-tooltip>
  46. {{ item.EquipLocalName || item.EquipName }}
  47. </p>
  48. </div>
  49. <div v-else>--</div>
  50. </el-form-item>
  51. <el-form-item label="全景图:" v-show="panoramaList && panoramaList.length">
  52. <div class="img-item" @click="dialogVisible = true" v-for="item in panoramaList"
  53. :key="item.Key">
  54. 4 <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${item.Key}`"
  55. style="width:100%;" :alt="item.Name">
  56. </div>
  57. </el-form-item>
  58. <el-form-item label="设备照片:" v-show="imgList && imgList.length">
  59. <div class="img-item">
  60. <div class="demo-image__preview">
  61. <el-image style="width:100%;" v-for="item in imgList"
  62. :key="item.Key" :title="item.Name"
  63. @click="nowUrl = item.Key"
  64. :src="`/image-service/common/image_get?systemId=dataPlatform&key=${item.Key}&width=400`"
  65. :preview-src-list="srcList">
  66. </el-image>
  67. </div>
  68. </div>
  69. </el-form-item>
  70. <el-form-item label="现场视频:" v-show="videoList && videoList.length">
  71. <video controls style="width:100%;" v-for="item in videoList" :key="item.Key"
  72. :title="item.Name">
  73. <source :src="`/image-service/common/file_get?systemId=dataPlatform&key=${item.Key}`"
  74. type="video/mp4">
  75. 您的浏览器不支持 HTML5 video ,暂无法播放。
  76. </video>
  77. </el-form-item>
  78. <el-form-item label="备注信息:">{{ detail.Note || '--' }}</el-form-item>
  79. </el-form>
  80. </div>
  81. <div class="operation-detail detail-item" v-if="detail.TaskState === '未找到'">
  82. <el-form>
  83. <el-form-item label="操作信息:"></el-form-item>
  84. <div class="block">
  85. <el-timeline>
  86. <el-timeline-item
  87. placement="top"
  88. v-for="(item,index) in arr"
  89. :key="index"
  90. :timestamp="item.timestamp"
  91. >
  92. <el-card>
  93. <small>{{item.content}}</small>
  94. <p>{{item.title}}</p>
  95. <img
  96. v-for="isImg in item.imgs"
  97. :key="isImg.Key"
  98. :src="`/image-service/common/image_get?systemId=dataPlatform&key=${isImg.Key}`">
  99. <video controls style="width:100%;" v-for="v in videoList" :key="index"
  100. :title="v.Name">
  101. <source
  102. :src="`/image-service/common/file_get?systemId=dataPlatform&key=${v.Key}`"
  103. type="video/mp4">
  104. 您的浏览器不支持 HTML5 video ,暂无法播放。
  105. </video>
  106. </el-card>
  107. </el-timeline-item>
  108. </el-timeline>
  109. </div>
  110. </el-form>
  111. </div>
  112. </el-scrollbar>
  113. <el-dialog title="全景图" :visible.sync="dialogVisible" width="70%" append-to-body>
  114. 一张图
  115. </el-dialog>
  116. </div>
  117. </template>
  118. <script>
  119. import {mapGetters} from "vuex"
  120. export default {
  121. components: {},
  122. created() {
  123. let {ConfirmTime, PositivePhotoTime, QrCodeTime, NameplateTime, SidePhotoTime, VideoTime, EquipProblemTime, EquipProblem, TaskPicList} = this.detail;
  124. let arr = []
  125. QrCodeTime && arr.push({
  126. timestamp: QrCodeTime,
  127. time: new Date(QrCodeTime).getTime(),
  128. content: '黏贴二维码',
  129. imgs: TaskPicList.length && TaskPicList.filter(i => i.Name.includes('带二维码的设备近景照片'))
  130. })
  131. PositivePhotoTime && arr.push({
  132. timestamp: PositivePhotoTime,
  133. time: new Date(PositivePhotoTime).getTime(),
  134. content: '拍摄正面照片',
  135. imgs: TaskPicList.length && TaskPicList.filter(i => i.Name.includes('设备正面照片'))
  136. })
  137. NameplateTime && arr.push({
  138. timestamp: NameplateTime,
  139. time: new Date(NameplateTime).getTime(),
  140. content: '拍摄铭牌照片',
  141. imgs: TaskPicList.length && TaskPicList.filter(i => i.Name.includes('铭牌照片'))
  142. })
  143. SidePhotoTime && arr.push({
  144. timestamp: SidePhotoTime,
  145. time: new Date(SidePhotoTime).getTime(),
  146. content: '拍摄侧面照片',
  147. imgs: TaskPicList.length && TaskPicList.filter(i => i.Name.includes('设备左侧照片' || '设备右侧照片'))
  148. })
  149. VideoTime && arr.push({
  150. timestamp: VideoTime,
  151. time: new Date(VideoTime).getTime(),
  152. content: '拍摄30s视频',
  153. videoList: TaskPicList.length && TaskPicList.filter(i => i.Name.includes('视频资料'))
  154. })
  155. EquipProblemTime && arr.push({
  156. timestamp: EquipProblemTime,
  157. time: new Date(EquipProblemTime).getTime(),
  158. content: '记录设备问题',
  159. title: EquipProblem
  160. })
  161. ConfirmTime && arr.push({
  162. timestamp: ConfirmTime,
  163. time: new Date(ConfirmTime).getTime(),
  164. content: '确认信息',
  165. title: '已确认的设备信息'
  166. })
  167. this.arr = arr.map(i => ({...i})).sort((a, b) => b.time - a.time)
  168. },
  169. computed: {
  170. ...mapGetters("layout", ["projectId"]),
  171. notFoundList() {
  172. if (this.detail && this.detail.Component && this.detail.Component.length) {//是否存在部件
  173. let index = this.detail.Component.findIndex(item => {
  174. return item.TaskState == -1
  175. })
  176. if (index != -1) {//部件中存在未找到的对象
  177. this.detail.isComponent = true
  178. return this.detail.Component[index].TaskPicList ? this.detail.Component[index].TaskPicList : []
  179. } else {//部件全部找到
  180. this.detail.isComponent = false
  181. return this.detail.TaskPicList ? this.detail.TaskPicList : []
  182. }
  183. } else {
  184. this.detail.isComponent = false
  185. if (this.detail && this.detail.TaskPicList && this.detail.TaskPicList.length) {
  186. return this.detail.TaskPicList
  187. } else {
  188. return []
  189. }
  190. }
  191. },
  192. panoramaList() {
  193. if (this.notFoundList && this.notFoundList.length) {
  194. return this.notFoundList.filter(item => {
  195. return item.Type == 'panorama'
  196. })
  197. } else {
  198. return []
  199. }
  200. },
  201. imgList() {
  202. if (this.notFoundList && this.notFoundList.length) {
  203. return this.notFoundList.filter(item => {
  204. return item.Type == 'image'
  205. })
  206. } else {
  207. return []
  208. }
  209. },
  210. videoList() {
  211. if (this.notFoundList && this.notFoundList.length) {
  212. return this.notFoundList.filter(item => {
  213. return item.Type == 'video'
  214. })
  215. } else {
  216. return []
  217. }
  218. },
  219. srcList() {
  220. let nowIndex = this.imgList.findIndex(item => {
  221. return item.Key == this.nowUrl
  222. })
  223. let index = nowIndex >= 1 ? nowIndex : 0;
  224. let tempArr1 = this.imgList.slice(0, index);
  225. let tempArr2 = this.imgList.slice(index, this.imgList.length);
  226. let res = tempArr2.concat(tempArr1).map(item => {
  227. return `/image-service/common/image_get?systemId=dataPlatform&key=${item.Key}`
  228. });
  229. return res;
  230. }
  231. },
  232. props: {
  233. detail: Object
  234. },
  235. data() {
  236. return {
  237. dialogVisible: false,//全景图弹出框
  238. nowUrl: '',//当前正在显示的图
  239. arr: [],
  240. };
  241. },
  242. methods: {},
  243. watch: {
  244. 'detail.TaskId'() {
  245. console.log(this.detail)
  246. }
  247. }
  248. };
  249. </script>
  250. <style lang="less" scoped>
  251. .detail-box {
  252. width: 100%;
  253. height: 100%;
  254. box-sizing: border-box;
  255. /deep/ .el-scrollbar__wrap {
  256. overflow-x: hidden;
  257. }
  258. /deep/ .el-icon-circle-close {
  259. color: white;
  260. }
  261. /deep/ .el-form-item__content {
  262. text-overflow: ellipsis;
  263. overflow: hidden;
  264. }
  265. .detail-item {
  266. width: calc(100% - 30px);
  267. margin: 15px 15px 10px;
  268. padding: 10px;
  269. box-sizing: border-box;
  270. border-left: 1px solid #eee;
  271. box-shadow: 0px 1px 5px 0px rgba(59, 66, 84, 0.15);
  272. }
  273. .img-item {
  274. position: relative;
  275. cursor: pointer;
  276. }
  277. }
  278. </style>