123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642 |
- <template>
- <div class="eq-spread">
- <div class="vr-left">
- <p class="left-title">{{Info.infos.EquipLocalName || Info.infos.EquipName}}-{{Info.infos.EquipLocalID || Info.infos.EquipID}}</p>
- <p class="left-remark">所在位置:<span>{{location}} </span></p>
- <div class="box-content">
- <div class="box-left">
- <table>
- <tr class="RQ">
- <td>设备二维码</td>
- <td class="qr-code">
- <img :src="Info.infos.EquipQRCode?`/image-service/image-service/common/file_get?systemId=dataPlatform&key=${Info.infos.EquipQRCode}`:'/static/img/noimg.png'">
- <p class="download" v-if="Info.infos.EquipQRCode" @click="downloadFile(Info.infos.EquipQRCode)">下载</p>
- </td>
- <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>
- <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>
- </tr>
- <tr>
- <td>所属系统:</td>
- <td>--</td>
- <td>生产厂家:</td>
- <td>{{Info.infos.Manufacturer || '--'}}</td>
- </tr>
- <tr>
- <td>所属空间:</td>
- <td>--</td>
- <td>生产日期:</td>
- <td>{{Info.infos.ProductDate || '--'}}</td>
- </tr>
- <tr>
- <td>设备型号:</td>
- <td>{{Info.infos.Specification || '--'}}</td>
- <td>出厂编号:</td>
- <td>{{Info.infos.SerialNum || '--'}}</td>
- </tr>
- <tr>
- <td>BIM模型中编码:</td>
- <td>{{Info.infos.BIMID || '--'}}</td>
- <td>供应商单位名称:</td>
- <td>{{Info.infos.Supplier || '--'}}</td>
- </tr>
- <tr>
- <td>采购价格:</td>
- <td>{{Info.infos.PurchasePrice || '--'}} 元</td>
- <td>供应商联系人:</td>
- <td>{{Info.infos.SupplierContactor || '--'}}</td>
- </tr>
- <tr>
- <td>安装位置:</td>
- <td>{{Info.infos.InstallLocation || '--'}}</td>
- <td>供应商联系电话:</td>
- <td>{{Info.infos.SupplierPhone || '--'}}</td>
- </tr>
- <tr>
- <td>投产日期:</td>
- <td>{{Info.infos.StartDate || '--'}}</td>
- <td>保险单号:</td>
- <td>{{Info.infos.InsuranceNum || '--'}}</td>
- </tr>
- <tr>
- <td>维修商联系电话:</td>
- <td>{{Info.infos.MaintainerPhone || '--'}}</td>
- <td>保险公司名称:</td>
- <td>{{Info.infos.Insurer || '--'}}</td>
- </tr>
- <tr>
- <td>维修商单位名称:</td>
- <td>{{Info.infos.Maintainer || '--'}}</td>
- <td>保险公司联系人:</td>
- <td>{{Info.infos.InsurerContactor || '--'}}</td>
- </tr>
- <tr>
- <td>维修公司联系人:</td>
- <td>{{Info.infos.InsurerContactor || '--'}}</td>
- <td>保险公司联系电话:</td>
- <td>{{Info.infos.InsurerPhone || '--'}}</td>
- </tr>
- <tr>
- <td>维保负责人:</td>
- <td>{{Info.infos.Principal || '--'}}</td>
- </tr>
- </table>
- <p class="more" @click="getMoreInfo(Info)">查看更多<img src="/static/img/more.png"></p>
- </div>
- <div class="box-right" >
- <div class="pic-con">
- <div id="container" v-if="Info.infos.Pic">
- </div>
- <div class="no-right" v-else>
- <img src="/static/img/no_pic.png" alt="">
- <p>暂无图片</p>
- </div>
- </div>
- <div class="swip-container" v-if="Info.infos.Pic && Info.infos.Pic.length>0" >
- <pic-swipe :list='Info.infos.Pic' @onClick="draw">
- </pic-swipe>
- </div>
- <div class="swip-container" v-else>
- <div>
- <img src="/static/img/no_pic.png" alt="">
- <br/><br/>
- <p>暂无图片</p>
- </div>
- </div>
- </div>
- </div>
- <div class="box-bottom">
- <Collapse v-model="panelValue" accordion @on-change='getTableData'>
- <Panel name="1">
- 历史安装在此处的资产
- <p slot="content">
- <property-table :tableData='tableData'></property-table>
- </p>
- </Panel>
- </Collapse>
- </div>
- </div>
- <div class="vr-right">
- <eq-right :Info='Info' :ElecConsumPData='ElecConsumPData' :subsetCount='subsetCount' :repairRadio='repairRadio'
- :AccElecConsumData="AccElecConsumData" :noAlarmNum='noAlarmNum' :orderCount='orderCount' :RunStatusData='RunStatusData' :moniData='moniData'></eq-right>
- </div>
- <div class="mask-bg"></div>
- <div class="mask">
- <message-modal @close='close' :isQR='isQR' :objArr='objArr'></message-modal>
- </div>
- </div>
- </template>
- <script>
- import picSwipe from '../VR/picSwipe'
- import propertyTable from './PropertyTable'
- import eqRight from '../VR/equipRit.vue'
- import messageModal from './MessageModal'
- import {currentTime} from '../../tools/currentDate.js'
- import axios from 'axios'
- export default {
- components: {
- picSwipe,
- propertyTable,
- eqRight,
- messageModal
- },
- mixins: [],
- props: {
- },
- data () {
- return {
- panelValue: '',
- Info: {
- infos: {
- EquipLocalName: '--',
- EquipLocalID: '--',
- EquipQRCode: '',
- Manufacturer: '--',
- ProductDate: '--',
- Specification: '--',
- SerialNum: '--',
- BIMID: '--',
- Pic: [],
- Supplier: '--',
- PurchasePrice: '--',
- InstallLocation: '--',
- StartDate: '--',
- SupplierContactor: '--',
- InsuranceNum: '--',
- MaintainerPhone: '--',
- Insurer: '--',
- Maintainer: '--',
- InsurerContactor: '--',
- InsurerPhone: '--',
- Principal: '--'
- },
- location: {
- building: '--',
- floor: '--'
- }
- },
- bdObjName: '',
- flObjName: '',
- sysObjName: "",
- tableData: [],
- isQR: 1,
- objectId: 'Eq1101080001001ACCCOP014',
- noAlarmNum: 0, // 未恢复的报警数
- ElecConsumPData: "", // 耗电
- AccElecConsumData: "", // 累计
- orderCount: 0, // 工单
- RunStatusData: "", // 运行状态
- subsetCount: 0, // 同类设备数量
- repairRadio: 0, // 故障率
- moniData: 0, // 摄像头
- objArr: []
- }
- },
- computed: {
- location () {
- if (this.bdObjName || this.flObjName || this.sysObjName) {
- return `${this.bdObjName}-${this.flObjName}-${this.sysObjName}`
- }
- return '未知'
- }
- },
- mounted () {
- this.getId()
- this.getEqNameAndId()
- // this.initData(this.objectId)
- // this.getEqRepair()
- },
- methods: {
- getId () {
- this.objectId = this.$route.query.id
- this.initData(this.objectId)
- this.searchBuildingName(this.objectId)
- this.getCurrentData(this.objectId)
- this.underwayOrder(this.objectId)
- this.getMoniCount(this.objectId)
- this.getNoAlarmNum(this.objectId)
- this.getEqRepair()
- },
- getEqNameAndId () {
- let hostUrl = location.search
- this.objectId = hostUrl.split("&")[0].toString().split("=")[1]
- let pid = hostUrl.split("&")[1].toString().split("=")[1]
- let secret = ''
- if(hostUrl.split("&")[2]){
- secret = hostUrl.split("&")[2].toString().split("=")[1]
- }
- console.log(pid, this.$store.state.projId,secret)
- this.$store.commit('setProId', pid)
- this.$store.commit(`setSecret`, secret)
- console.log( this.$store.state.secret)
- this.initData(this.objectId)
- this.searchBuildingName(this.objectId)
- this.getCurrentData(this.objectId)
- this.underwayOrder(this.objectId)
- this.getMoniCount(this.objectId)
- this.getNoAlarmNum(this.objectId)
- this.getEqRepair()
- },
- // 右侧未恢复报警数
- getNoAlarmNum (objectId) {
- let params = {
- "criteria": {
- "objectId": objectId, // 空间id
- "status": "alarm"
- }
- }
- axios.post(`/alarm-system/alarm-system/alarm/list?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
- let data = res.data
- this.noAlarmNum = data.Count
- })
- },
- // 右侧进行中的工单
- underwayOrder (objectId) {
- let params = {
- order_state: "5",
- equip_ids: [objectId],
- user_id: "systemId",
- project_id: this.$store.state.projId,
- start_time: "20180101000000",
- end_time: currentTime(new Date())
- }
- axios.post(`/workorder/workorder/restWorkOrderService/queryWorkOrderList`, params).then(res => {
- let data = res.data
- this.orderCount = data.Count
- })
- },
- // 同类设备数量
- getSubset (type) {
- let params = {
- noInfo: true,
- criteria: {
- type: [type]
- }
- }
- axios.post(`/data-platform-3/data-platform-3/object/subset_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
- let data = res.data
- if (data.Result == 'success') {
- this.subsetCount = data.Count
- }
- })
- },
- // 故障率
- getEqRepair () {
- axios.get(`/info-mng-backend/info-mng-backend/saas/getEqRepairCount?projectId=${this.$store.state.projId}`).then(res => {
- let data = res.data
- if (data.Result == 'success') {
- this.repairRadio = (data.repairCount / data.eqCount) * 100
- }
- })
- },
- // 耗电量
- getCurrentData (objectId) {
- let params = {
- criterias: [
- {
- id: objectId,
- code: "ElecConsumP"
- },
- {
- id: objectId,
- code: "AccElecConsum"
- },
- {
- id: objectId,
- code: "RunStatus"
- }
- ]
- }
- 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 => {
- let data = res.data
- if (data.Result == 'success') {
- let content = data.Content
- content.forEach(el => {
- if (el.code == 'ElecConsumP') {
- this.ElecConsumPData = el.data
- }
- if (el.code == 'AccElecConsum') {
- this.AccElecConsumData = el.data
- }
- if (el.code == 'RunStatus') {
- this.RunStatusData = el.data
- }
- })
- }
- })
- },
- // 摄像头
- getMoniCount (objectId) {
- let params = {
- id: objectId
- }
- axios.post(`/api/front-api/monitor/list?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
- let data = res.data
- if (data.Result == 'success') {
- this.moniData = data.count
- }
- })
- },
- // 建筑的名称查询
- searchBuildingName (objectId) {
- let params = {
- keywords: [],
- category: ['EqObj'],
- limit: 1,
- ids: [objectId]
- }
- axios.post(`/data-platform-3/data-platform-3/object/search?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
- let data = res.data
- if (data.Result == 'success') {
- if (data.Content.length > 0) {
- this.bdObjName = data.Content[0].bdObjName ? data.Content[0].bdObjName : ""
- this.flObjName = data.Content[0].flObjName ? data.Content[0].flObjName : ""
- this.sysObjName = data.Content[0].sysObjName ? data.Content[0].sysObjName : ""
- }
- }
- })
- },
- // 资产 (目前没有)
- getTableData (key) {
- // let params = {
- // criterias: {
- // graphType: 'EquipinSpace',
- // relType: '1',
- // toId: this.objectId, // 空间id
- // side: 'fromId'
- // }
- // }
- // axios.post(`/data-platform-3/data-platform-3/property/id_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
- // let data = res.data
- // if (data.Result == 'success') {
- // this.tableData = data.Content
- // this.tableData.forEach(el => {
- // el.eqName = el.infos.EquipLocalName || '--'
- // el.eqId = el.infos.EquipLocalID || '--'
- // el.category = el.category // 记得翻译
- // el.location = el.location ? el.location.building : '--' // 拼接
- // })
- // }
- // })
- },
- initData (objectId) {
- let params = {
- criterias: [
- {id: objectId}],
- 'historyInfos': true
- }
- axios.post(`/data-platform-3/data-platform-3/object/batch_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
- let data = res.data
- if (data.Result == 'success') {
- this.Info = data.Content[0]
- if (this.Info.infos.Pic) {
- this.draw(this.Info.infos.Pic[0].key)
- }
- if (this.Info.category) {
- this.getSubset(this.Info.category.slice(2, 6))
- }
- }
- })
- },
- // 查看更多的点击事件
- getMoreInfo (Info) {
- this.$router.push({path: 'check', query: {obj: JSON.stringify(Info)}})
- },
- // 查看全景图
- draw (key) {
- var div = document.getElementById('container')
- // eslint-disable-next-line
- var PSV = new PhotoSphereViewer({
- panorama: `/image-service/image-service/common/image_get?systemId=dataPlatform&key=${key}`,
- container: div,
- time_anim: false,
- navbar: true,
- size: {
- width: '100%',
- height: '440px'
- }
- })
- },
- // 下载文件的弹框
- downloadFile (isQR, objArr) {
- this.isQR = isQR
- this.objArr = objArr
- document.querySelector('body').style.overflow = 'hidden'
- document.querySelector('.mask-bg').style.display = 'block'
- document.querySelector('.mask').style.display = 'block'
- },
- close () {
- document.querySelector('body').style.overflow = 'auto'
- document.querySelector('.mask-bg').style.display = 'none'
- document.querySelector('.mask').style.display = 'none'
- }
- }
- }
- </script>
- <style scoped lang="less" >
- .eq-spread {
- font-size: 16px;
- margin: 0;
- display: flex;
- .vr-left {
- width: 78%;
- min-width: 1010px;
- background: #fff;
- box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
- border-radius: 2px;
- margin-right: 20px;
- padding:20px 20px 0 20px;
- .left-title {
- font-size: 18px;
- font-weight: bold;
- color: #212830;
- }
- .left-remark {
- font-size: 14px;
- display: inline-block;
- color: #6D747C;
- background: #F4F6FE;
- height: 28px;
- line-height: 28px;
- padding-left: 20px;
- margin: 10px 0;
- }
- .box-content {
- width: 100%;
- display: flex;
- justify-content:space-between;
- .box-left {
- width:50%;
- min-width: 500px;
- background: #F5F5F5;
- border-radius: 2px;
- margin-right: 20px;
- padding-top: 20px;
- display: inline-block;
- height: 740px;
- position: relative;
- .more {
- position: absolute;
- font-size: 16px;
- color: #6682E6;
- bottom: 13px;
- right: 20px;
- cursor: pointer;
- }
- tr {
- td {
- padding-left:20px;
- padding-top: 8px;
- font-size: 14px;
- color: #6D747C;
- line-height: 24px;
- word-break: break-word;
- >img{
- width:90px;
- height: 90px;
- }
- .load {
- color: #6682E6;
- cursor: pointer;
- }
- p{
- >span {
- color:#212830;
- }
- }
- .download {
- font-size: 14px;
- color: #6682E6;
- cursor: pointer;
- padding-left:10px;
- }
- }
- }
- .RQ {
- >td {
- vertical-align: top;
- }
- .qr-code {
- position: relative;
- >img:hover + .download {
- opacity: 1;
- }
- .download {
- position: absolute;
- bottom: 0;
- background: rgba(255, 255, 255, .9);
- width: 80px;
- height: 30px;
- line-height: 30px;
- z-index: 10;
- text-align: center;
- color: #6682E6;
- font-size: 14px;
- cursor: pointer;
- opacity: 0;
- }
- }
- }
- }
- .no-right{
- width: 100%;
- background: #F5F5F5;
- border-radius: 2px;
- height: 440px;
- display: flex;
- justify-content: center;
- align-items: center;
- flex-direction: column;
- }
- .box-right {
- display: inline-block;
- width: 50%;
- background: #fff;
- border-radius: 2px;
- .pic-con {
- background: #F5F5F5;
- color:#6D747C;
- #container {
- width: 100%;
- height: 500px;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- }
- }
- .swip-container{
- margin-top: 20px;
- >div{
- width:180px;
- height: 152px;
- background: #F5F5F5;
- border-radius: 2px;
- text-align: center;
- padding-top: 35px;
- color: #6D747C;
- }
- }
- }
- }
- .box-bottom{
- margin:40px 0;
- }
- }
- .vr-right{
- width: 21%;
- border-radius: 2px;
- display: inline-block;
- }
- .mask-bg{
- position: fixed;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 99;
- background:rgba(0, 0, 0, .6);
- display: none;
- }
- .mask {
- width: 860px;
- height: 458px;
- background: #fff;
- position: fixed;
- z-index: 999;
- top: 120px;
- left: 30%;
- display: none;
- }
- }
- </style>
- <style lang="less">
- .eq-spread {
- .box-bottom{
- .ivu-icon-ios-arrow-forward {
- float: right;
- margin-top: 10px;
- transform: rotate(-90deg);
- }
- .ivu-collapse>.ivu-collapse-item>.ivu-collapse-header{
- background: #F4F5F8;
- border-radius: 2px;
- }
- }
- }
- </style>
|