index.vue 19 KB

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