index.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573
  1. <template>
  2. <div class="detail-info">
  3. <div class="eq-top">
  4. <img src="/static/img/backIcon.jpg" alt="" @click="back">
  5. <span>返回 </span>
  6. </div>
  7. <div class="detail-content">
  8. <div class="content-top">
  9. <p>{{eqMaterial.infos.EquipLocalName || '--'}}详情</p>
  10. <div><Checkbox v-model="isData" label="只显示有数据的信息" name="type" @on-change="onChange"></Checkbox>只显示有数据的信息</div>
  11. </div>
  12. <hr>
  13. <div class="content-bottom">
  14. <div class="content-left">
  15. <div>
  16. <ul v-for="(list,index1) in mainInfo" :key='index1' :class="{changeStyle:changeColor == index1}"
  17. @click="change(index1)"><a :href="`#${list.href}`">{{list.name}}</a>
  18. <template v-if="list.list">
  19. <li v-for="(item,index2) in list.list" :key="index2" :class="{color:changeColor == index1 && liIndex == index2}" @click="changeLi(index2)"><a :href="`#${item.href}`">{{item.name}}</a></li>
  20. </template>
  21. </ul>
  22. </div>
  23. </div>
  24. <div class="content-right" @scroll="handleScroll">
  25. <section>
  26. <p id="baseInfo" class="group1"><span></span>基本信息</p>
  27. <ul>
  28. <li><span>设备ID</span>{{eqMaterial.infos.EquipID || '--'}}</li>
  29. <li><span>设备二维码图片</span><i v-if="eqMaterial.infos.EquipQRCode" @click="lookAt">查看</i></li>
  30. <li><span>设备名称</span>{{eqMaterial.infos.EquipName || '--'}}</li>
  31. <li><span>BIM模型中编码</span>{{eqMaterial.infos.BIMID || '--'}}</li>
  32. <li><span>设备本地编码</span>{{eqMaterial.infos.EquipLocalID || '--'}}</li>
  33. <li><span>BIM模型中坐标</span>{{eqMaterial.infos.BIMLocation || '--'}}</li>
  34. <li><span>设备本地名称</span>{{eqMaterial.infos.EquipLocalName || '--'}}</li>
  35. </ul>
  36. </section>
  37. <section>
  38. <p id="standInfo" class="group1"><span></span>台账信息</p>
  39. <p id="001" class="p-title">设备厂家</p>
  40. <ul >
  41. <li><span>生产厂家</span>{{eqMaterial.infos.Manufacturer || '--'}}</li>
  42. <li><span>品牌</span>{{eqMaterial.infos.Brand || '--'}}</li>
  43. <li><span>生产日期</span>{{eqMaterial.infos.ProductDate || '--'}}</li>
  44. <li><span>设备型号</span>{{eqMaterial.infos.Specification || '--'}}</li>
  45. <li><span>出厂编号</span>{{eqMaterial.infos.SerialNum || '--'}}</li>
  46. </ul>
  47. <p id="002" class="p-title">供应&购买</p>
  48. <ul>
  49. <li><span>供应商单位名称</span>{{eqMaterial.infos.Supplier || '--'}}</li>
  50. <li><span>供应商联系人</span>{{eqMaterial.infos.SupplierContactor || '--'}}</li>
  51. <li><span>供应商联系电话</span>{{eqMaterial.infos.SupplierPhone || '--'}}</li>
  52. <li><span>供应商电子邮件</span>{{eqMaterial.infos.SupplierEmail || '--'}}</li>
  53. <li><span>供应商网址</span>{{eqMaterial.infos.SupplierWeb || '--'}}</li>
  54. <li><span>供应商传真</span>{{eqMaterial.infos.SupplierFax || '--'}}</li>
  55. <li><span>供应合同编号</span>{{eqMaterial.infos.SupplierContractID || '--'}}</li>
  56. <li><span>资产编号</span>{{eqMaterial.infos.AssetID || '--'}}</li>
  57. <li><span>采购价格</span>{{eqMaterial.infos.PurchasePrice || '--'}}</li>
  58. </ul>
  59. <p id="003" class="p-title"> 现场&安装</p>
  60. <ul >
  61. <li><span>长</span>{{eqMaterial.infos.Length || '--'}} m</li>
  62. <li><span>宽</span>{{eqMaterial.infos.Width || '--'}} m</li>
  63. <li><span>高</span>{{eqMaterial.infos.Height || '--'}} m</li>
  64. <li><span>净重</span>{{eqMaterial.infos.NetWeight || '--'}} kg</li>
  65. <li><span>主体材质</span>{{eqMaterial.infos.Material || '--'}}</li>
  66. <li><span>所属部门</span>{{eqMaterial.infos.InstallLocation || '--'}}</li>
  67. <li><span>安装位置</span>{{eqMaterial.infos.Width || '--'}}</li>
  68. </ul>
  69. <p id="004" class="p-title"> 运行&维保</p>
  70. <ul >
  71. <li><span>维保负责人</span>{{eqMaterial.infos.Principal || '--'}}</li>
  72. <li><span>投产日期</span>{{eqMaterial.infos.StartDate || '--'}}</li>
  73. <li><span>保修期</span>{{eqMaterial.infos.Warranty || '--'}}</li>
  74. <li><span>维保合同截止日期</span>{{eqMaterial.infos.MaintainDeadline || '--'}}</li>
  75. <li><span>使用寿命</span>{{eqMaterial.infos.ServiceLife || '--'}}</li>
  76. <li><span>预计报废日期</span>{{eqMaterial.infos.ExpectScrapDate || '--'}}</li>
  77. <li><span>保养周期</span>{{eqMaterial.infos.MaintainPeriod || '--'}}</li>
  78. <li><span>维修商单位名称</span>{{eqMaterial.infos.Maintainer || '--'}}</li>
  79. <li><span>维修商联系人</span>{{eqMaterial.infos.MaintainerContactor || '--'}}</li>
  80. <li><span>维修商联系电话</span>{{eqMaterial.infos.MaintainerPhone || '--'}}</li>
  81. <li><span>维修商电子邮件</span>{{eqMaterial.infos.MaintainerEmai || '--'}}</li>
  82. <li><span>维修商网址</span>{{eqMaterial.infos.MaintainerWeb || '--'}}</li>
  83. <li><span>维修商传真</span>{{eqMaterial.infos.MaintainerFax || '--'}}</li>
  84. </ul>
  85. <p id="005" class="p-title"> 保险</p>
  86. <ul >
  87. <li><span>保险公司名称</span>{{eqMaterial.infos.Insurer || '--'}}</li>
  88. <li><span>保险公司联系人</span>{{eqMaterial.infos.InsurerContactor || '--'}}</li>
  89. <li><span>保险公司联系电话</span>{{eqMaterial.infos.InsurerPhone || '--'}}</li>
  90. <li><span>保险公司电子邮件</span>{{eqMaterial.infos.InsurerEmail || '--'}}</li>
  91. <li><span>保险公司网址</span>{{eqMaterial.infos.InsurerWeb || '--'}}</li>
  92. <li><span>保险公司传真</span>{{eqMaterial.infos.InsurerFax || '--'}}</li>
  93. <li><span>保险单号</span>{{eqMaterial.infos.InsuranceNum || '--'}}</li>
  94. <li><span>保险文件</span>{{eqMaterial.infos.InsuranceFile || '--'}}</li>
  95. </ul>
  96. <p id="006" class="p-title">照片&文档</p>
  97. <ul>
  98. <li v-if="eqMaterial.infos.Nameplate"><span>设备铭牌照片</span>{{eqMaterial.infos.Nameplate[0].key?eqMaterial.infos.Nameplate[0].key:'--'}}</li>
  99. </ul>
  100. </section>
  101. <section>
  102. <p id="controlInfo"><span></span>控制参数</p>
  103. <ul>
  104. <li><span>控制模式</span>{{eqMaterial.infos.CtrlMode || '--'}}</li>
  105. </ul>
  106. </section>
  107. <section>
  108. <p id="setInfo"><span></span>设定参数</p>
  109. <ul>
  110. <li><span>设备开关设定</span>{{eqMaterial.infos.EquipSwitchSet || '--'}}</li>
  111. <li><span>设备开设定</span>{{eqMaterial.infos.EquipOnSet || '--'}}</li>
  112. <li><span>设备关设定</span>{{eqMaterial.infos.EquipOffSet || '--'}}</li>
  113. <li><span>设备频率设定</span>{{eqMaterial.infos.EquipFreqSet || '--'}}</li>
  114. <li><span>设备开度设定</span>{{eqMaterial.infos.EquipOpeningSet || '--'}}</li>
  115. </ul>
  116. </section>
  117. <section>
  118. <p id="technologyInfo"><span></span>技术参数</p>
  119. <ul>
  120. <li><span>额定电压</span>{{eqMaterial.infos.RatedU || '--'}} V</li>
  121. <li><span>额定电流</span>{{eqMaterial.infos.RatedI || '--'}} A</li>
  122. <li><span>额定功率</span>{{eqMaterial.infos.RatedP || '--'}} kW</li>
  123. <li><span>额定频率</span>{{eqMaterial.infos.RatedFreq || '--'}} Hz</li>
  124. <li><span>累计运行时间</span>{{eqMaterial.infos.AccRunTime || '--'}} h</li>
  125. <li><span>水泵类型</span>{{eqMaterial.infos.PumpType || '--'}}</li>
  126. <li><span>泵体安装类型</span>{{eqMaterial.infos.InstallType || '--'}}</li>
  127. <li><span>输配介质</span>{{eqMaterial.infos.MediumType || '--'}}</li>
  128. <li><span>调节类型</span>{{eqMaterial.infos.AdjustType || '--'}}</li>
  129. <li><span>管网使用类型</span>{{eqMaterial.infos.NetUseType || '--'}}</li>
  130. <li><span>是否为备用泵</span>{{eqMaterial.infos.isBackup || '--'}}</li>
  131. <li><span>额定扬程</span>{{eqMaterial.infos.RatedHead || '--'}} m</li>
  132. <li><span>额定驱动压力</span>{{eqMaterial.infos.RatedDrivePress || '--'}} MPa</li>
  133. <li><span>额定增压比</span>{{eqMaterial.infos.RatedPressRatio || '--'}}</li>
  134. <li><span>额定转速</span>{{eqMaterial.infos.RatedRPM || '--'}} rpm</li>
  135. </ul>
  136. </section>
  137. <section>
  138. <p id="operationInfo"><span></span>运行参数</p>
  139. <p id="101" class="p-title">运行状态</p>
  140. <ul>
  141. <li><span>运行状态</span>{{eqMaterial.infos.RunStatus || '--'}}</li>
  142. <li><span>本地远程状态</span>{{eqMaterial.infos.RemoteStatus || '--'}}</li>
  143. <li><span>A相电压</span>{{eqMaterial.infos.APhaseU || '--'}} V</li>
  144. <li><span>B相电压</span>{{eqMaterial.infos.BPhaseU || '--'}} V</li>
  145. <li><span>C相电压</span>{{eqMaterial.infos.CPhaseU || '--'}} V</li>
  146. <li><span>A相电流</span>{{eqMaterial.infos.APhaseI || '--'}} A</li>
  147. <li><span>B相电流</span>{{eqMaterial.infos.BPhaseI || '--'}} A</li>
  148. <li><span>C相电流</span>{{eqMaterial.infos.CPhaseI || '--'}} A</li>
  149. <li><span>耗电功率</span>{{eqMaterial.infos.ElecConsumP || '--'}} kW</li>
  150. <li><span>水泵进口压力</span>{{eqMaterial.infos.InPress || '--'}} MPa</li>
  151. <li><span>水泵出口压力</span>{{eqMaterial.infos.OutPress || '--'}} MPa</li>
  152. <li><span>电机效率</span>{{eqMaterial.infos.MotorEff || '--'}} %</li>
  153. <li><span>瞬时增压比</span>{{eqMaterial.infos.PressRatio || '--'}}</li>
  154. <li><span>整体效率</span>{{eqMaterial.infos.OverallEff || '--'}} %</li>
  155. </ul>
  156. <p id="102" class="p-title">累计参数</p>
  157. <ul>
  158. <li><span>累计流量</span>{{eqMaterial.infos.AccFlow || '--'}} m³</li>
  159. <li><span>累计耗电量</span>{{eqMaterial.infos.AccElecConsum || '--'}} kWh</li>
  160. <li><span>累计运行时间</span>{{eqMaterial.infos.AccRunTime || '--'}} h</li>
  161. <li><span>开启时间计时</span>{{eqMaterial.infos.OpenTimeCount || '--'}} h</li>
  162. <li><span>关闭时间计时</span>{{eqMaterial.infos.CloseTimeCount || '--'}} h</li>
  163. </ul>
  164. </section>
  165. <section style="min-height: 590px">
  166. <p id="eneryInfo"><span></span>能耗信息</p>
  167. <enery-params v-show="eqMaterial" :roomInfo='eqMaterial' :isShowChange='isShowChange'></enery-params>
  168. </section>
  169. </div>
  170. </div>
  171. </div>
  172. <div class="mask-bg"></div>
  173. <div class="mask">
  174. <message-modal @close='close' :isQR='isQR'></message-modal>
  175. </div>
  176. </div>
  177. </template>
  178. <script>
  179. import eneryParams from '../detail/EneryParams'
  180. import messageModal from '../spread/MessageModal.vue'
  181. import axios from 'axios'
  182. export default {
  183. components: {
  184. eneryParams,
  185. messageModal
  186. },
  187. mixins: [],
  188. props: {
  189. },
  190. data () {
  191. return {
  192. isData: false,
  193. isShowChange: false,
  194. eqMaterial: {
  195. infos: {
  196. EquipLocalName: "--",
  197. EquipName: "--",
  198. EquipID: "--",
  199. EquipLocalID: "--",
  200. EquipQRCode: "--",
  201. Manufacturer: "--",
  202. ProductDate: "--",
  203. Specification: "--",
  204. SerialNum: "--",
  205. BIMID: "--",
  206. Supplier: "--",
  207. PurchasePrice: "--",
  208. InstallLocation: "--",
  209. StartDate: "--",
  210. SupplierContactor: "--",
  211. InsuranceNum: "--",
  212. MaintainerPhone: "--",
  213. Insurer: "--",
  214. Maintainer: "--",
  215. InsurerContactor: "--",
  216. InsurerPhone: "--",
  217. Principal: "--",
  218. Nameplate: [{key: "--"}]
  219. },
  220. location: {
  221. building: "--",
  222. floor: "--"
  223. }
  224. },
  225. isQR: "",
  226. changeColor: 0,
  227. liIndex: -1,
  228. mainInfo: [
  229. {name: "基本信息", href: "baseInfo"},
  230. {
  231. name: "台账信息",
  232. href: "standInfo",
  233. list: [
  234. {name: "设备厂家", href: "001"},
  235. {name: "供应&购买", href: "002"},
  236. {name: "现场&安装", href: "003"},
  237. {name: "运行&维保", href: "004"},
  238. {name: "保险", href: "005"},
  239. {name: "照片&文档", href: "006"}
  240. ]},
  241. {name: "控制参数", href: "controlInfo"},
  242. {name: "设定参数", href: "setInfo"},
  243. {name: "技术参数", href: "technologyInfo"},
  244. {
  245. name: "运行参数",
  246. href: "operationInfo",
  247. list: [
  248. {name: "运行状态", href: "101"},
  249. {name: "累计参数", href: "102"}
  250. ]
  251. },
  252. {name: "能耗信息", href: "eneryInfo"}
  253. ],
  254. groups: [],
  255. box: null
  256. }
  257. },
  258. computed: {
  259. },
  260. mounted () {
  261. this.getObjInfo()
  262. this.$nextTick(() => {
  263. this.box = document.querySelector(".content-right")
  264. this.groups = document.querySelectorAll(".content-right>section")
  265. })
  266. },
  267. methods: {
  268. getCurrentData () {
  269. let params = {
  270. criterias: [
  271. {
  272. id: this.eqMaterial.id,
  273. code: "ElecConsumP"
  274. },
  275. {
  276. id: this.eqMaterial.id,
  277. code: "AccElecConsum"
  278. }
  279. ]
  280. }
  281. axios.post(`/data-platform-3/data-platform-3/parameter/batch_query_param?projectId=${this.$store.state.projId}&secret=`, params).then(res => {
  282. let data = res.data
  283. if (data.Result == 'success') {
  284. let content = data.Content
  285. content.forEach(el => {
  286. if (el.code == 'ElecConsumP') {
  287. this.ElecConsumPData = el.data
  288. }
  289. if (el.code == 'AccElecConsum') {
  290. this.AccElecConsumData = el.data
  291. }
  292. })
  293. }
  294. })
  295. },
  296. change (index) {
  297. this.changeColor = index
  298. },
  299. changeLi (index2) {
  300. this.liIndex = index2
  301. },
  302. // 路由传参得到Info
  303. getObjInfo () {
  304. this.eqMaterial = JSON.parse(this.$route.query.obj)
  305. this.getCurrentData()
  306. },
  307. back () {
  308. history.go(-1)
  309. },
  310. // 下载弹框
  311. lookAt () {
  312. this.isQR = this.eqMaterial.infos.EquipQRCode
  313. document.querySelector('body').style.overflow = 'hidden'
  314. document.querySelector('.mask-bg').style.display = 'block'
  315. document.querySelector('.mask').style.display = 'block'
  316. },
  317. close () {
  318. document.querySelector('body').style.overflow = 'auto'
  319. document.querySelector('.mask-bg').style.display = 'none'
  320. document.querySelector('.mask').style.display = 'none'
  321. },
  322. onChange (val) {
  323. if (val) {
  324. this.hiddenNoData()
  325. } else {
  326. this.showAllData()
  327. }
  328. },
  329. hiddenNoData () {
  330. this.isShowChange = true
  331. let arr = document.querySelectorAll('.content-right li')
  332. arr.forEach(i => {
  333. if (i.innerHTML.includes('--')) {
  334. i.style.display = 'none'
  335. }
  336. })
  337. },
  338. // 只显示有数据的
  339. showAllData () {
  340. this.isShowChange = false
  341. let arr = document.querySelectorAll('.content-right li')
  342. arr.forEach(i => {
  343. i.style.display = 'block'
  344. })
  345. },
  346. // 滚动触发事件
  347. handleScroll () {
  348. let top = this.box.scrollTop
  349. let i = this.groups.length - 1
  350. for (; i >= 0; i--) {
  351. if (this.groups[i].offsetTop <= top) {
  352. this.changeColor = i
  353. let pTitles = this.groups[i].querySelectorAll('.p-title')
  354. let j = pTitles ? pTitles.length - 1 : 0
  355. for (; j >= 0; j--) {
  356. if (pTitles[j].offsetTop <= top) {
  357. this.liIndex = j
  358. break
  359. }
  360. }
  361. break
  362. }
  363. }
  364. }
  365. }
  366. }
  367. </script>
  368. <style scoped lang="less" >
  369. .detail-info {
  370. .eq-top {
  371. margin-bottom: 20px;
  372. margin-left: 20px;
  373. font-size: 7px;
  374. color: #212830;
  375. >img {
  376. //vertical-align: middle;
  377. cursor: pointer;
  378. border: 1px solid #CACACA;
  379. border-radius: 2px;
  380. }
  381. >span {
  382. font-size: 16px;
  383. color: #212830;
  384. }
  385. }
  386. .detail-content {
  387. box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
  388. border-radius: 2px;
  389. background: #fff;
  390. padding-left:20px;
  391. .content-top {
  392. width: 100%;
  393. padding-top: 10px;
  394. p {
  395. font-size: 18px;
  396. color: #212830;
  397. font-weight: bold;
  398. padding: 24px 0 20px 0;
  399. }
  400. }
  401. hr {
  402. margin-bottom: 0;
  403. }
  404. .content-bottom {
  405. display: flex;
  406. .content-left {
  407. width: 264px;
  408. border-radius: 2px;
  409. padding-top: 10px;
  410. margin-right: 60px;
  411. margin-bottom: 20px;
  412. background: #FAFAFA;
  413. div {
  414. .p-title{
  415. margin-left: 24px ;
  416. margin-bottom: 12px;
  417. border-bottom:1px dashed #cecece;
  418. }
  419. .p-title{
  420. padding: 20px;
  421. }
  422. .group1{
  423. margin-bottom:20px;
  424. }
  425. ul{
  426. font-size: 16px;
  427. padding:5px 0 5px 40px;
  428. font-weight: bold;
  429. cursor: pointer;
  430. a {
  431. color: #212830;
  432. &:hover,&:active {
  433. color:#6682E6;
  434. }
  435. }
  436. li {
  437. font-size: 16px;
  438. padding:18px 0 0 40px;
  439. font-weight: bold;
  440. cursor: pointer;
  441. a{
  442. color: #6D747C;
  443. }
  444. &:first-child {
  445. padding-top: 15px;
  446. }
  447. &:last-child {
  448. padding-bottom: 0;
  449. }
  450. }
  451. }
  452. }
  453. }
  454. .content-right {
  455. width: 1450px;
  456. height: 700px;
  457. overflow-y:scroll;
  458. padding: 10px;
  459. position: relative;
  460. section{
  461. p {
  462. height: 40px;
  463. span {
  464. display: inline-block;
  465. width: 4px;
  466. height: 16px;
  467. background: #728DEE;
  468. margin-right: 10px;
  469. vertical-align: middle;
  470. }
  471. }
  472. ul {
  473. display: flex;
  474. flex-wrap: wrap;
  475. margin-left: 10px;
  476. li {
  477. width: 50%;
  478. padding-bottom: 15px;
  479. overflow: hidden;
  480. text-overflow: ellipsis;
  481. white-space: nowrap;
  482. span {
  483. font-size: 14px;
  484. color: #6D747C;
  485. display: inline-block;
  486. width: 98px;
  487. margin-right: 20px;
  488. }
  489. i{
  490. color:#6682E6;
  491. cursor: pointer;
  492. }
  493. }
  494. }
  495. }
  496. }
  497. }
  498. }
  499. .mask-bg{
  500. position: fixed;
  501. top: 0;
  502. bottom: 0;
  503. left: 0;
  504. right: 0;
  505. z-index: 99;
  506. background:rgba(0, 0, 0, .6);
  507. display: none;
  508. }
  509. .mask {
  510. width: 860px;
  511. height: 458px;
  512. background: #fff;
  513. position: fixed;
  514. z-index: 999;
  515. top: 120px;
  516. left: 30%;
  517. display: none;
  518. }
  519. .changeStyle{
  520. color: #6682E6!important;
  521. background: #fff;
  522. >a{
  523. color: #6682E6!important;
  524. }
  525. }
  526. .color{
  527. >a{
  528. color: #6682E6!important;
  529. }
  530. }
  531. }
  532. </style>
  533. <style lang="less">
  534. .detail-info {
  535. .ivu-table-wrapper {
  536. border: none;
  537. }
  538. .ivu-table td,
  539. .ivu-table th {
  540. border: none;
  541. }
  542. .ivu-table:before{
  543. height: 0;
  544. }
  545. .ivu-table:after{
  546. width:0;
  547. }
  548. .ivu-table-row .description-td>.ivu-table-cell>span{
  549. // overflow: hidden;
  550. // text-overflow: ellipsis;
  551. // white-space: nowrap;
  552. max-height: 100px;
  553. display: inline-block;
  554. }
  555. }
  556. </style>