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