index.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639
  1. <template>
  2. <div class="eq-spread">
  3. <div class="vr-left">
  4. <p class="left-title">{{Info.infos.EquipLocalName || Info.infos.EquipName}}-{{Info.infos.EquipLocalID || Info.infos.EquipID}}</p>
  5. <p class="left-remark">所在位置:<span>{{location}} </span></p>
  6. <div class="box-content">
  7. <div class="box-left">
  8. <table>
  9. <tr class="RQ">
  10. <td>设备二维码</td>
  11. <td class="qr-code">
  12. <img :src="Info.infos.EquipQRCode?`/data-platform-3/image-service/common/file_get?systemId=dataPlatform&key=${Info.infos.EquipQRCode}`:'/static/img/noimg.png'">
  13. <p class="download" v-if="Info.infos.EquipQRCode" @click="downloadFile(Info.infos.EquipQRCode)">下载</p>
  14. </td>
  15. <td><p v-if="Info.infos.InsuranceNum_his">保险保单 <span>{{Info.infos.InsuranceNum_his.length || 0 }}份</span></p><p v-if="Info.infos.InstallDrawing_his">安装图纸 <span>{{Info.infos.InstallDrawing_his.length || 0 }}份</span></p><p v-if="Info.infos.Drawing_his">设备图纸 <span>{{Info.infos.Drawing_his.length || 0 }}份</span></p></td>
  16. <td><p v-if="Info.infos.InsuranceNum_his&Info.infos.InsuranceNum" class="load" @click="downloadFile(2,Info.infos.InsuranceNum)">保险文件下载</p><p class="load" v-if="Info.infos.InstallDrawing_his" @click="downloadFile(2,Info.infos.InstallDrawing)">图纸下载</p><p class="load" v-if="Info.infos.Drawing_his" @click="downloadFile(2,Info.infos.Drawing)">图纸下载</p></td>
  17. </tr>
  18. <tr>
  19. <td>所属系统:</td>
  20. <td>--</td>
  21. <td>生产厂家:</td>
  22. <td>{{Info.infos.Manufacturer || '--'}}</td>
  23. </tr>
  24. <tr>
  25. <td>所属空间:</td>
  26. <td>--</td>
  27. <td>生产日期:</td>
  28. <td>{{Info.infos.ProductDate || '--'}}</td>
  29. </tr>
  30. <tr>
  31. <td>设备型号:</td>
  32. <td>{{Info.infos.Specification || '--'}}</td>
  33. <td>出厂编号:</td>
  34. <td>{{Info.infos.SerialNum || '--'}}</td>
  35. </tr>
  36. <tr>
  37. <td>BIM模型中编码:</td>
  38. <td>{{Info.infos.BIMID || '--'}}</td>
  39. <td>供应商单位名称:</td>
  40. <td>{{Info.infos.Supplier || '--'}}</td>
  41. </tr>
  42. <tr>
  43. <td>采购价格:</td>
  44. <td>{{Info.infos.PurchasePrice || '--'}} 元</td>
  45. <td>供应商联系人:</td>
  46. <td>{{Info.infos.SupplierContactor || '--'}}</td>
  47. </tr>
  48. <tr>
  49. <td>安装位置:</td>
  50. <td>{{Info.infos.InstallLocation || '--'}}</td>
  51. <td>供应商联系电话:</td>
  52. <td>{{Info.infos.SupplierPhone || '--'}}</td>
  53. </tr>
  54. <tr>
  55. <td>投产日期:</td>
  56. <td>{{Info.infos.StartDate || '--'}}</td>
  57. <td>保险单号:</td>
  58. <td>{{Info.infos.InsuranceNum || '--'}}</td>
  59. </tr>
  60. <tr>
  61. <td>维修商联系电话:</td>
  62. <td>{{Info.infos.MaintainerPhone || '--'}}</td>
  63. <td>保险公司名称:</td>
  64. <td>{{Info.infos.Insurer || '--'}}</td>
  65. </tr>
  66. <tr>
  67. <td>维修商单位名称:</td>
  68. <td>{{Info.infos.Maintainer || '--'}}</td>
  69. <td>保险公司联系人:</td>
  70. <td>{{Info.infos.InsurerContactor || '--'}}</td>
  71. </tr>
  72. <tr>
  73. <td>维修公司联系人:</td>
  74. <td>{{Info.infos.InsurerContactor || '--'}}</td>
  75. <td>保险公司联系电话:</td>
  76. <td>{{Info.infos.InsurerPhone || '--'}}</td>
  77. </tr>
  78. <tr>
  79. <td>维保负责人:</td>
  80. <td>{{Info.infos.Principal || '--'}}</td>
  81. </tr>
  82. </table>
  83. <p class="more" @click="getMoreInfo(Info)">查看更多<img src="/static/img/more.png"></p>
  84. </div>
  85. <div class="box-right" >
  86. <div class="pic-con">
  87. <div id="container" v-if="Info.infos.Pic">
  88. </div>
  89. <div class="no-right" v-else>
  90. <img src="/static/img/no_pic.png" alt="">
  91. <p>暂无图片</p>
  92. </div>
  93. </div>
  94. <div class="swip-container" v-if="Info.infos.Pic && Info.infos.Pic.length>0" >
  95. <pic-swipe :list='Info.infos.Pic' @onClick="draw">
  96. </pic-swipe>
  97. </div>
  98. <div class="swip-container" v-else>
  99. <div>
  100. <img src="/static/img/no_pic.png" alt="">
  101. <br/><br/>
  102. <p>暂无图片</p>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. <div class="box-bottom">
  108. <Collapse v-model="panelValue" accordion @on-change='getTableData'>
  109. <Panel name="1">
  110. 历史安装在此处的资产
  111. <p slot="content">
  112. <property-table :tableData='tableData'></property-table>
  113. </p>
  114. </Panel>
  115. </Collapse>
  116. </div>
  117. </div>
  118. <div class="vr-right">
  119. <eq-right :Info='Info' :ElecConsumPData='ElecConsumPData' :subsetCount='subsetCount' :repairRadio='repairRadio'
  120. :AccElecConsumData="AccElecConsumData" :noAlarmNum='noAlarmNum' :orderCount='orderCount' :RunStatusData='RunStatusData' :moniData='moniData'></eq-right>
  121. </div>
  122. <div class="mask-bg"></div>
  123. <div class="mask">
  124. <message-modal @close='close' :isQR='isQR' :objArr='objArr'></message-modal>
  125. </div>
  126. </div>
  127. </template>
  128. <script>
  129. import PicSwipe from '../vr/PicSwipe'
  130. import propertyTable from './PropertyTable'
  131. import eqRight from '../vr/EqRight'
  132. import messageModal from './MessageModal'
  133. import {currentTime} from '../../tools/currentDate.js'
  134. import axios from 'axios'
  135. export default {
  136. components: {
  137. PicSwipe,
  138. propertyTable,
  139. eqRight,
  140. messageModal
  141. },
  142. mixins: [],
  143. props: {
  144. },
  145. data () {
  146. return {
  147. panelValue: '',
  148. Info: {
  149. infos: {
  150. EquipLocalName: '--',
  151. EquipLocalID: '--',
  152. EquipQRCode: '',
  153. Manufacturer: '--',
  154. ProductDate: '--',
  155. Specification: '--',
  156. SerialNum: '--',
  157. BIMID: '--',
  158. Pic: [],
  159. Supplier: '--',
  160. PurchasePrice: '--',
  161. InstallLocation: '--',
  162. StartDate: '--',
  163. SupplierContactor: '--',
  164. InsuranceNum: '--',
  165. MaintainerPhone: '--',
  166. Insurer: '--',
  167. Maintainer: '--',
  168. InsurerContactor: '--',
  169. InsurerPhone: '--',
  170. Principal: '--'
  171. },
  172. location: {
  173. building: '--',
  174. floor: '--'
  175. }
  176. },
  177. bdObjName: '',
  178. flObjName: '',
  179. sysObjName: "",
  180. tableData: [],
  181. isQR: 1,
  182. objectId: 'Eq1101080001001ACCCOP014',
  183. noAlarmNum: 0, // 未恢复的报警数
  184. ElecConsumPData: "", // 耗电
  185. AccElecConsumData: "", // 累计
  186. orderCount: 0, // 工单
  187. RunStatusData: "", // 运行状态
  188. subsetCount: 0, // 同类设备数量
  189. repairRadio: 0, // 故障率
  190. moniData: 0, // 摄像头
  191. objArr: []
  192. }
  193. },
  194. computed: {
  195. location () {
  196. if (this.bdObjName || this.flObjName || this.sysObjName) {
  197. return `${this.bdObjName}-${this.flObjName}-${this.sysObjName}`
  198. }
  199. return '未知'
  200. }
  201. },
  202. mounted () {
  203. this.getId()
  204. this.getEqNameAndId()
  205. // this.initData(this.objectId)
  206. // this.getEqRepair()
  207. },
  208. methods: {
  209. getId () {
  210. this.objectId = this.$route.query.id
  211. this.initData(this.objectId)
  212. this.searchBuildingName(this.objectId)
  213. this.getCurrentData(this.objectId)
  214. this.underwayOrder(this.objectId)
  215. this.getMoniCount(this.objectId)
  216. this.getNoAlarmNum(this.objectId)
  217. this.getEqRepair()
  218. },
  219. getEqNameAndId () {
  220. let hostUrl = location.search
  221. this.objectId = hostUrl.split("&")[0].toString().split("=")[1]
  222. let pid = hostUrl.split("&")[1].toString().split("=")[1]
  223. let secret = hostUrl.split("&")[2].toString().split("=")[1]
  224. console.log(pid, this.$store.state.projId,secret)
  225. this.$store.commit('setProId', pid)
  226. this.$store.commit(`setSecret`, secret)
  227. console.log( this.$store.state.secret)
  228. this.initData(this.objectId)
  229. this.searchBuildingName(this.objectId)
  230. this.getCurrentData(this.objectId)
  231. this.underwayOrder(this.objectId)
  232. this.getMoniCount(this.objectId)
  233. this.getNoAlarmNum(this.objectId)
  234. this.getEqRepair()
  235. },
  236. // 右侧未恢复报警数
  237. getNoAlarmNum (objectId) {
  238. let params = {
  239. "criteria": {
  240. "objectId": objectId, // 空间id
  241. "status": "alarm"
  242. }
  243. }
  244. axios.post(`/alarm-system/alarm-system/alarm/list?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  245. let data = res.data
  246. this.noAlarmNum = data.Count
  247. })
  248. },
  249. // 右侧进行中的工单
  250. underwayOrder (objectId) {
  251. let params = {
  252. order_state: "5",
  253. equip_ids: [objectId],
  254. user_id: "systemId",
  255. project_id: this.$store.state.projId,
  256. start_time: "20180101000000",
  257. end_time: currentTime(new Date())
  258. }
  259. axios.post(`/workorder/workorder/restWorkOrderService/queryWorkOrderList`, params).then(res => {
  260. let data = res.data
  261. this.orderCount = data.Count
  262. })
  263. },
  264. // 同类设备数量
  265. getSubset (type) {
  266. let params = {
  267. noInfo: true,
  268. criteria: {
  269. type: [type]
  270. }
  271. }
  272. axios.post(`/data-platform-3/data-platform-3/object/subset_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  273. let data = res.data
  274. if (data.Result == 'success') {
  275. this.subsetCount = data.Count
  276. }
  277. })
  278. },
  279. // 故障率
  280. getEqRepair () {
  281. axios.get(`/info-mng-backend/info-mng-backend/saas/getEqRepairCount?projectId=${this.$store.state.projId}`).then(res => {
  282. let data = res.data
  283. if (data.Result == 'success') {
  284. this.repairRadio = (data.repairCount / data.eqCount) * 100
  285. }
  286. })
  287. },
  288. // 耗电量
  289. getCurrentData (objectId) {
  290. let params = {
  291. criterias: [
  292. {
  293. id: objectId,
  294. code: "ElecConsumP"
  295. },
  296. {
  297. id: objectId,
  298. code: "AccElecConsum"
  299. },
  300. {
  301. id: objectId,
  302. code: "RunStatus"
  303. }
  304. ]
  305. }
  306. axios.post(`/data-platform-3/data-platform-3/parameter/batch_query_param?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  307. let data = res.data
  308. if (data.Result == 'success') {
  309. let content = data.Content
  310. content.forEach(el => {
  311. if (el.code == 'ElecConsumP') {
  312. this.ElecConsumPData = el.data
  313. }
  314. if (el.code == 'AccElecConsum') {
  315. this.AccElecConsumData = el.data
  316. }
  317. if (el.code == 'RunStatus') {
  318. this.RunStatusData = el.data
  319. }
  320. })
  321. }
  322. })
  323. },
  324. // 摄像头
  325. getMoniCount (objectId) {
  326. let params = {
  327. id: objectId
  328. }
  329. axios.post(`/api/front-api/monitor/list?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  330. let data = res.data
  331. if (data.Result == 'success') {
  332. this.moniData = data.count
  333. }
  334. })
  335. },
  336. // 建筑的名称查询
  337. searchBuildingName (objectId) {
  338. let params = {
  339. keywords: [],
  340. category: ['EqObj'],
  341. limit: 1,
  342. ids: [objectId]
  343. }
  344. axios.post(`/data-platform-3/data-platform-3/object/search?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  345. let data = res.data
  346. if (data.Result == 'success') {
  347. if (data.Content.length > 0) {
  348. this.bdObjName = data.Content[0].bdObjName ? data.Content[0].bdObjName : ""
  349. this.flObjName = data.Content[0].flObjName ? data.Content[0].flObjName : ""
  350. this.sysObjName = data.Content[0].sysObjName ? data.Content[0].sysObjName : ""
  351. }
  352. }
  353. })
  354. },
  355. // 资产 (目前没有)
  356. getTableData (key) {
  357. // let params = {
  358. // criterias: {
  359. // graphType: 'EquipinSpace',
  360. // relType: '1',
  361. // toId: this.objectId, // 空间id
  362. // side: 'fromId'
  363. // }
  364. // }
  365. // axios.post(`/data-platform-3/data-platform-3/property/id_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  366. // let data = res.data
  367. // if (data.Result == 'success') {
  368. // this.tableData = data.Content
  369. // this.tableData.forEach(el => {
  370. // el.eqName = el.infos.EquipLocalName || '--'
  371. // el.eqId = el.infos.EquipLocalID || '--'
  372. // el.category = el.category // 记得翻译
  373. // el.location = el.location ? el.location.building : '--' // 拼接
  374. // })
  375. // }
  376. // })
  377. },
  378. initData (objectId) {
  379. let params = {
  380. criterias: [
  381. {id: objectId}],
  382. 'historyInfos': true
  383. }
  384. axios.post(`/data-platform-3/data-platform-3/object/batch_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  385. let data = res.data
  386. if (data.Result == 'success') {
  387. this.Info = data.Content[0]
  388. if (this.Info.infos.Pic) {
  389. this.draw(this.Info.infos.Pic[0].key)
  390. }
  391. if (this.Info.category) {
  392. this.getSubset(this.Info.category.slice(2, 6))
  393. }
  394. }
  395. })
  396. },
  397. // 查看更多的点击事件
  398. getMoreInfo (Info) {
  399. this.$router.push({path: 'check', query: {obj: JSON.stringify(Info)}})
  400. },
  401. // 查看全景图
  402. draw (key) {
  403. var div = document.getElementById('container')
  404. // eslint-disable-next-line
  405. var PSV = new PhotoSphereViewer({
  406. panorama: `/data-platform-3/image-service/common/image_get?systemId=dataPlatform&key=${key}`,
  407. container: div,
  408. time_anim: false,
  409. navbar: true,
  410. size: {
  411. width: '100%',
  412. height: '440px'
  413. }
  414. })
  415. },
  416. // 下载文件的弹框
  417. downloadFile (isQR, objArr) {
  418. this.isQR = isQR
  419. this.objArr = objArr
  420. document.querySelector('body').style.overflow = 'hidden'
  421. document.querySelector('.mask-bg').style.display = 'block'
  422. document.querySelector('.mask').style.display = 'block'
  423. },
  424. close () {
  425. document.querySelector('body').style.overflow = 'auto'
  426. document.querySelector('.mask-bg').style.display = 'none'
  427. document.querySelector('.mask').style.display = 'none'
  428. }
  429. }
  430. }
  431. </script>
  432. <style scoped lang="less" >
  433. .eq-spread {
  434. font-size: 16px;
  435. margin: 0;
  436. display: flex;
  437. .vr-left {
  438. width: 78%;
  439. min-width: 1010px;
  440. background: #fff;
  441. box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
  442. border-radius: 2px;
  443. margin-right: 20px;
  444. padding:20px 20px 0 20px;
  445. .left-title {
  446. font-size: 18px;
  447. font-weight: bold;
  448. color: #212830;
  449. }
  450. .left-remark {
  451. font-size: 14px;
  452. display: inline-block;
  453. color: #6D747C;
  454. background: #F4F6FE;
  455. height: 28px;
  456. line-height: 28px;
  457. padding-left: 20px;
  458. margin: 10px 0;
  459. }
  460. .box-content {
  461. width: 100%;
  462. display: flex;
  463. justify-content:space-between;
  464. .box-left {
  465. width:50%;
  466. min-width: 500px;
  467. background: #F5F5F5;
  468. border-radius: 2px;
  469. margin-right: 20px;
  470. padding-top: 20px;
  471. display: inline-block;
  472. height: 740px;
  473. position: relative;
  474. .more {
  475. position: absolute;
  476. font-size: 16px;
  477. color: #6682E6;
  478. bottom: 13px;
  479. right: 20px;
  480. cursor: pointer;
  481. }
  482. tr {
  483. td {
  484. padding-left:20px;
  485. padding-top: 8px;
  486. font-size: 14px;
  487. color: #6D747C;
  488. line-height: 24px;
  489. word-break: break-word;
  490. >img{
  491. width:90px;
  492. height: 90px;
  493. }
  494. .load {
  495. color: #6682E6;
  496. cursor: pointer;
  497. }
  498. p{
  499. >span {
  500. color:#212830;
  501. }
  502. }
  503. .download {
  504. font-size: 14px;
  505. color: #6682E6;
  506. cursor: pointer;
  507. padding-left:10px;
  508. }
  509. }
  510. }
  511. .RQ {
  512. >td {
  513. vertical-align: top;
  514. }
  515. .qr-code {
  516. position: relative;
  517. >img:hover + .download {
  518. opacity: 1;
  519. }
  520. .download {
  521. position: absolute;
  522. bottom: 0;
  523. background: rgba(255, 255, 255, .9);
  524. width: 80px;
  525. height: 30px;
  526. line-height: 30px;
  527. z-index: 10;
  528. text-align: center;
  529. color: #6682E6;
  530. font-size: 14px;
  531. cursor: pointer;
  532. opacity: 0;
  533. }
  534. }
  535. }
  536. }
  537. .no-right{
  538. width: 100%;
  539. background: #F5F5F5;
  540. border-radius: 2px;
  541. height: 440px;
  542. display: flex;
  543. justify-content: center;
  544. align-items: center;
  545. flex-direction: column;
  546. }
  547. .box-right {
  548. display: inline-block;
  549. width: 50%;
  550. background: #fff;
  551. border-radius: 2px;
  552. .pic-con {
  553. background: #F5F5F5;
  554. color:#6D747C;
  555. #container {
  556. width: 100%;
  557. height: 500px;
  558. display: flex;
  559. justify-content: center;
  560. align-items: center;
  561. cursor: pointer;
  562. }
  563. }
  564. .swip-container{
  565. margin-top: 20px;
  566. >div{
  567. width:180px;
  568. height: 152px;
  569. background: #F5F5F5;
  570. border-radius: 2px;
  571. text-align: center;
  572. padding-top: 35px;
  573. color: #6D747C;
  574. }
  575. }
  576. }
  577. }
  578. .box-bottom{
  579. margin:40px 0;
  580. }
  581. }
  582. .vr-right{
  583. width: 21%;
  584. border-radius: 2px;
  585. display: inline-block;
  586. }
  587. .mask-bg{
  588. position: fixed;
  589. top: 0;
  590. bottom: 0;
  591. left: 0;
  592. right: 0;
  593. z-index: 99;
  594. background:rgba(0, 0, 0, .6);
  595. display: none;
  596. }
  597. .mask {
  598. width: 860px;
  599. height: 458px;
  600. background: #fff;
  601. position: fixed;
  602. z-index: 999;
  603. top: 120px;
  604. left: 30%;
  605. display: none;
  606. }
  607. }
  608. </style>
  609. <style lang="less">
  610. .eq-spread {
  611. .box-bottom{
  612. .ivu-icon-ios-arrow-forward {
  613. float: right;
  614. margin-top: 10px;
  615. transform: rotate(-90deg);
  616. }
  617. .ivu-collapse>.ivu-collapse-item>.ivu-collapse-header{
  618. background: #F4F5F8;
  619. border-radius: 2px;
  620. }
  621. }
  622. }
  623. </style>