index.vue 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642
  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?`/image-service/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/equipRit.vue'
  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 = ''
  224. if(hostUrl.split("&")[2]){
  225. secret = hostUrl.split("&")[2].toString().split("=")[1]
  226. }
  227. console.log(pid, this.$store.state.projId,secret)
  228. this.$store.commit('setProId', pid)
  229. this.$store.commit(`setSecret`, secret)
  230. console.log( this.$store.state.secret)
  231. this.initData(this.objectId)
  232. this.searchBuildingName(this.objectId)
  233. this.getCurrentData(this.objectId)
  234. this.underwayOrder(this.objectId)
  235. this.getMoniCount(this.objectId)
  236. this.getNoAlarmNum(this.objectId)
  237. this.getEqRepair()
  238. },
  239. // 右侧未恢复报警数
  240. getNoAlarmNum (objectId) {
  241. let params = {
  242. "criteria": {
  243. "objectId": objectId, // 空间id
  244. "status": "alarm"
  245. }
  246. }
  247. axios.post(`/alarm-system/alarm-system/alarm/list?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  248. let data = res.data
  249. this.noAlarmNum = data.Count
  250. })
  251. },
  252. // 右侧进行中的工单
  253. underwayOrder (objectId) {
  254. let params = {
  255. order_state: "5",
  256. equip_ids: [objectId],
  257. user_id: "systemId",
  258. project_id: this.$store.state.projId,
  259. start_time: "20180101000000",
  260. end_time: currentTime(new Date())
  261. }
  262. axios.post(`/workorder/workorder/restWorkOrderService/queryWorkOrderList`, params).then(res => {
  263. let data = res.data
  264. this.orderCount = data.Count
  265. })
  266. },
  267. // 同类设备数量
  268. getSubset (type) {
  269. let params = {
  270. noInfo: true,
  271. criteria: {
  272. type: [type]
  273. }
  274. }
  275. axios.post(`/data-platform-3/data-platform-3/object/subset_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  276. let data = res.data
  277. if (data.Result == 'success') {
  278. this.subsetCount = data.Count
  279. }
  280. })
  281. },
  282. // 故障率
  283. getEqRepair () {
  284. axios.get(`/info-mng-backend/info-mng-backend/saas/getEqRepairCount?projectId=${this.$store.state.projId}`).then(res => {
  285. let data = res.data
  286. if (data.Result == 'success') {
  287. this.repairRadio = (data.repairCount / data.eqCount) * 100
  288. }
  289. })
  290. },
  291. // 耗电量
  292. getCurrentData (objectId) {
  293. let params = {
  294. criterias: [
  295. {
  296. id: objectId,
  297. code: "ElecConsumP"
  298. },
  299. {
  300. id: objectId,
  301. code: "AccElecConsum"
  302. },
  303. {
  304. id: objectId,
  305. code: "RunStatus"
  306. }
  307. ]
  308. }
  309. 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 => {
  310. let data = res.data
  311. if (data.Result == 'success') {
  312. let content = data.Content
  313. content.forEach(el => {
  314. if (el.code == 'ElecConsumP') {
  315. this.ElecConsumPData = el.data
  316. }
  317. if (el.code == 'AccElecConsum') {
  318. this.AccElecConsumData = el.data
  319. }
  320. if (el.code == 'RunStatus') {
  321. this.RunStatusData = el.data
  322. }
  323. })
  324. }
  325. })
  326. },
  327. // 摄像头
  328. getMoniCount (objectId) {
  329. let params = {
  330. id: objectId
  331. }
  332. axios.post(`/api/front-api/monitor/list?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  333. let data = res.data
  334. if (data.Result == 'success') {
  335. this.moniData = data.count
  336. }
  337. })
  338. },
  339. // 建筑的名称查询
  340. searchBuildingName (objectId) {
  341. let params = {
  342. keywords: [],
  343. category: ['EqObj'],
  344. limit: 1,
  345. ids: [objectId]
  346. }
  347. axios.post(`/data-platform-3/data-platform-3/object/search?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  348. let data = res.data
  349. if (data.Result == 'success') {
  350. if (data.Content.length > 0) {
  351. this.bdObjName = data.Content[0].bdObjName ? data.Content[0].bdObjName : ""
  352. this.flObjName = data.Content[0].flObjName ? data.Content[0].flObjName : ""
  353. this.sysObjName = data.Content[0].sysObjName ? data.Content[0].sysObjName : ""
  354. }
  355. }
  356. })
  357. },
  358. // 资产 (目前没有)
  359. getTableData (key) {
  360. // let params = {
  361. // criterias: {
  362. // graphType: 'EquipinSpace',
  363. // relType: '1',
  364. // toId: this.objectId, // 空间id
  365. // side: 'fromId'
  366. // }
  367. // }
  368. // axios.post(`/data-platform-3/data-platform-3/property/id_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  369. // let data = res.data
  370. // if (data.Result == 'success') {
  371. // this.tableData = data.Content
  372. // this.tableData.forEach(el => {
  373. // el.eqName = el.infos.EquipLocalName || '--'
  374. // el.eqId = el.infos.EquipLocalID || '--'
  375. // el.category = el.category // 记得翻译
  376. // el.location = el.location ? el.location.building : '--' // 拼接
  377. // })
  378. // }
  379. // })
  380. },
  381. initData (objectId) {
  382. let params = {
  383. criterias: [
  384. {id: objectId}],
  385. 'historyInfos': true
  386. }
  387. axios.post(`/data-platform-3/data-platform-3/object/batch_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
  388. let data = res.data
  389. if (data.Result == 'success') {
  390. this.Info = data.Content[0]
  391. if (this.Info.infos.Pic) {
  392. this.draw(this.Info.infos.Pic[0].key)
  393. }
  394. if (this.Info.category) {
  395. this.getSubset(this.Info.category.slice(2, 6))
  396. }
  397. }
  398. })
  399. },
  400. // 查看更多的点击事件
  401. getMoreInfo (Info) {
  402. this.$router.push({path: 'check', query: {obj: JSON.stringify(Info)}})
  403. },
  404. // 查看全景图
  405. draw (key) {
  406. var div = document.getElementById('container')
  407. // eslint-disable-next-line
  408. var PSV = new PhotoSphereViewer({
  409. panorama: `/image-service/image-service/common/image_get?systemId=dataPlatform&key=${key}`,
  410. container: div,
  411. time_anim: false,
  412. navbar: true,
  413. size: {
  414. width: '100%',
  415. height: '440px'
  416. }
  417. })
  418. },
  419. // 下载文件的弹框
  420. downloadFile (isQR, objArr) {
  421. this.isQR = isQR
  422. this.objArr = objArr
  423. document.querySelector('body').style.overflow = 'hidden'
  424. document.querySelector('.mask-bg').style.display = 'block'
  425. document.querySelector('.mask').style.display = 'block'
  426. },
  427. close () {
  428. document.querySelector('body').style.overflow = 'auto'
  429. document.querySelector('.mask-bg').style.display = 'none'
  430. document.querySelector('.mask').style.display = 'none'
  431. }
  432. }
  433. }
  434. </script>
  435. <style scoped lang="less" >
  436. .eq-spread {
  437. font-size: 16px;
  438. margin: 0;
  439. display: flex;
  440. .vr-left {
  441. width: 78%;
  442. min-width: 1010px;
  443. background: #fff;
  444. box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
  445. border-radius: 2px;
  446. margin-right: 20px;
  447. padding:20px 20px 0 20px;
  448. .left-title {
  449. font-size: 18px;
  450. font-weight: bold;
  451. color: #212830;
  452. }
  453. .left-remark {
  454. font-size: 14px;
  455. display: inline-block;
  456. color: #6D747C;
  457. background: #F4F6FE;
  458. height: 28px;
  459. line-height: 28px;
  460. padding-left: 20px;
  461. margin: 10px 0;
  462. }
  463. .box-content {
  464. width: 100%;
  465. display: flex;
  466. justify-content:space-between;
  467. .box-left {
  468. width:50%;
  469. min-width: 500px;
  470. background: #F5F5F5;
  471. border-radius: 2px;
  472. margin-right: 20px;
  473. padding-top: 20px;
  474. display: inline-block;
  475. height: 740px;
  476. position: relative;
  477. .more {
  478. position: absolute;
  479. font-size: 16px;
  480. color: #6682E6;
  481. bottom: 13px;
  482. right: 20px;
  483. cursor: pointer;
  484. }
  485. tr {
  486. td {
  487. padding-left:20px;
  488. padding-top: 8px;
  489. font-size: 14px;
  490. color: #6D747C;
  491. line-height: 24px;
  492. word-break: break-word;
  493. >img{
  494. width:90px;
  495. height: 90px;
  496. }
  497. .load {
  498. color: #6682E6;
  499. cursor: pointer;
  500. }
  501. p{
  502. >span {
  503. color:#212830;
  504. }
  505. }
  506. .download {
  507. font-size: 14px;
  508. color: #6682E6;
  509. cursor: pointer;
  510. padding-left:10px;
  511. }
  512. }
  513. }
  514. .RQ {
  515. >td {
  516. vertical-align: top;
  517. }
  518. .qr-code {
  519. position: relative;
  520. >img:hover + .download {
  521. opacity: 1;
  522. }
  523. .download {
  524. position: absolute;
  525. bottom: 0;
  526. background: rgba(255, 255, 255, .9);
  527. width: 80px;
  528. height: 30px;
  529. line-height: 30px;
  530. z-index: 10;
  531. text-align: center;
  532. color: #6682E6;
  533. font-size: 14px;
  534. cursor: pointer;
  535. opacity: 0;
  536. }
  537. }
  538. }
  539. }
  540. .no-right{
  541. width: 100%;
  542. background: #F5F5F5;
  543. border-radius: 2px;
  544. height: 440px;
  545. display: flex;
  546. justify-content: center;
  547. align-items: center;
  548. flex-direction: column;
  549. }
  550. .box-right {
  551. display: inline-block;
  552. width: 50%;
  553. background: #fff;
  554. border-radius: 2px;
  555. .pic-con {
  556. background: #F5F5F5;
  557. color:#6D747C;
  558. #container {
  559. width: 100%;
  560. height: 500px;
  561. display: flex;
  562. justify-content: center;
  563. align-items: center;
  564. cursor: pointer;
  565. }
  566. }
  567. .swip-container{
  568. margin-top: 20px;
  569. >div{
  570. width:180px;
  571. height: 152px;
  572. background: #F5F5F5;
  573. border-radius: 2px;
  574. text-align: center;
  575. padding-top: 35px;
  576. color: #6D747C;
  577. }
  578. }
  579. }
  580. }
  581. .box-bottom{
  582. margin:40px 0;
  583. }
  584. }
  585. .vr-right{
  586. width: 21%;
  587. border-radius: 2px;
  588. display: inline-block;
  589. }
  590. .mask-bg{
  591. position: fixed;
  592. top: 0;
  593. bottom: 0;
  594. left: 0;
  595. right: 0;
  596. z-index: 99;
  597. background:rgba(0, 0, 0, .6);
  598. display: none;
  599. }
  600. .mask {
  601. width: 860px;
  602. height: 458px;
  603. background: #fff;
  604. position: fixed;
  605. z-index: 999;
  606. top: 120px;
  607. left: 30%;
  608. display: none;
  609. }
  610. }
  611. </style>
  612. <style lang="less">
  613. .eq-spread {
  614. .box-bottom{
  615. .ivu-icon-ios-arrow-forward {
  616. float: right;
  617. margin-top: 10px;
  618. transform: rotate(-90deg);
  619. }
  620. .ivu-collapse>.ivu-collapse-item>.ivu-collapse-header{
  621. background: #F4F5F8;
  622. border-radius: 2px;
  623. }
  624. }
  625. }
  626. </style>