123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714 |
- <template>
- <div class="my-vr">
- <div class="vr-left">
- <p class="left-title">{{Info.infos.RoomLocalName || Info.infos.RoomName}}-{{Info.infos.RoomLocalID || Info.infos.RoomID}}<span> 业务空间类型:{{Info.business_type || '--'}}</span></p>
- <p class="left-remark">所在位置:{{bdObjName}}-{{flObjName}}</p>
- <div class="box-content">
- <div class="box-left">
- <table>
- <tr class="RQ">
- <td>空间二维码</td>
- <td class="qr-code">
- <img :src="Info.infos.RoomQRCode?`/image-service/image-service/common/file_get?systemId=dataPlatform&key=${Info.infos.RoomQRCode}`:'/static/img/noimg.png'">
- <p class="download" v-if="Info.infos.RoomQRCode" @click="downloadFile(Info.infos.RoomQRCode)">下载</p>
- </td>
- </tr>
- <tr>
- <td>BIM模型中编码:</td>
- <td>{{Info.infos.BIMID || '--'}}</td>
- </tr>
- <tr>
- <td>空间功能区类型:</td>
- <td>{{Info.infos.RoomFuncType || '--'}}</td>
- </tr>
- <tr>
- <td>空间本地编码:</td>
- <td>{{Info.infos.RoomLocalID || '--'}}</td>
- </tr>
- <tr>
- <td>BIM模型中坐标:</td>
- <td>{{Info.infos.BIMLocation || '--'}}</td>
- </tr>
- <tr>
- <td>进深:</td>
- <td>{{Info.infos.Depth || '--'}} m</td>
- </tr>
- <tr>
- <td>面宽:</td>
- <td>{{Info.infos.Width || '--'}} m</td>
- </tr>
- <tr>
- <td>高度:</td>
- <td>{{Info.infos.Height || '--'}} m</td>
- </tr>
- <tr>
- <td>建筑面积:</td>
- <td>{{Info.infos.BuildArea || '--'}} m²</td>
- </tr>
- <tr>
- <td>使用面积</td>
- <td>{{Info.infos.NetArea || '--'}} m²</td>
- </tr>
- <tr>
- <td>配电容量:</td>
- <td>{{Info.infos.ElecCap || '--'}} A</td>
- </tr>
- <tr>
- <td>租赁业态类型:</td>
- <td>{{Info.infos.TenantType || '--'}}</td>
- </tr>
- <tr>
- <td>所属租户:</td>
- <td>{{Info.infos.Tenant || '--'}}</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" v-if="tableData">
- <eq-table :tableData='tableData'></eq-table>
- </p>
- </Panel>
- <Panel name="2">
- 服务于空间设备
- <p slot="content" v-if="serveData">
- <serve-table :serveData='serveData'></serve-table>
- </p>
- </Panel>
- </Collapse>`
- </div>
- </div>
- <div class="vr-right">
- <eq-right :Info='Info' :envData='envData' :noAlarmNum='noAlarmNum' :ElecConsumPData='ElecConsumPData'
- :AccElecConsumData="AccElecConsumData" :orderCount='orderCount' :moniData='moniData'></eq-right>
- </div>
- <div class="mask-bg"></div>
- <div class="mask">
- <message-modal @close='close' :isQR='isQR'></message-modal>
- </div>
- </div>
- </template>
- <script>
- import PicSwipe from './PicSwipe'
- import eqTable from './EqTable'
- import eqRight from './EqRight'
- import messageModal from '../spread/MessageModal'
- import {formatCodetoClass} from '../../tools/formatData.js'
- import {currentTime} from '../../tools/currentDate.js'
- import serveTable from './serveTable'
- import axios from 'axios'
- export default {
- components: {
- PicSwipe,
- eqTable,
- eqRight,
- messageModal,
- serveTable
- },
- mixins: [],
- props: {
- },
- data () {
- return {
- panelValue: '',
- tableData: [],
- serveData: [],
- Info: {
- business_type: "--",
- infos: {
- RoomLocalName: '--',
- RoomLocalID: '--',
- RoomQRCode: '',
- BIMID: '--',
- RoomFuncType: '--',
- BIMLocation: '--',
- Depth: '--',
- Width: '--',
- Height: '--',
- BuildArea: '--',
- NetArea: '--',
- ElecCap: '--',
- TenantType: '--',
- Tenant: '--',
- Pic: []
- },
- location: {
- building: '--',
- floor: '--'
- }
- },
- bdObjName: "--",
- flObjName: "--",
- isQR: '',
- objectId: 'Sp1101080001001003001',
- ElecConsumPData: "", // 耗电功率
- AccElecConsumData: "", // 累计用电量
- orderCount: 0, // 工单
- moniData: 0, // 摄像头的数量
- envData: {
- Tdb: "--",
- RH: "--",
- CO: "--",
- PM: "--"
- },
- noAlarmNum: 0
- }
- },
- computed: {
- },
- mounted () {
- this.getEqNameAndId()
- // this.initData()
- // this.searchBuildingName()
- // this.noRecoverAlarm()
- // this.envInfo()
- // this.getCurrentData()
- // this.underwayOrder()
- // this.getMoniCount()
- },
- methods: {
- 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)
- this.$store.commit('setProId', pid)
- this.$store.commit(`setSecret`, secret)
- this.initData(this.objectId)
- this.searchBuildingName(this.objectId)
- this.noRecoverAlarm(this.objectId)
- this.envInfo(this.objectId)
- this.getCurrentData(this.objectId)
- this.underwayOrder(this.objectId)
- this.getMoniCount(this.objectId)
- },
- // 右侧耗电功率和累计用电量的统计
- getCurrentData (objectId) {
- let params = {
- criterias: [
- {
- id: objectId,
- code: "ElecConsumP"
- },
- {
- id: objectId,
- code: "AccElecConsum"
- }
- ]
- }
- 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
- }
- })
- }
- })
- },
- // 右侧进行中的工单
- underwayOrder (objectId) {
- let params = {
- order_state: "5",
- space_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
- })
- },
- // 摄像头数量
- 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: ['SpObj'],
- 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 : "--"
- } else {
- this.bdObjName = '--'
- this.this.flObjName = '--'
- }
- }
- })
- },
- // 未恢复的报警条数
- noRecoverAlarm (objectId) {
- let params = {
- criteria: {
- objectId: objectId,
- status: 'alalrm'
- }
- }
- 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
- if (data.Result == 'success') {
- this.noAlarmNum = data.Count
- }
- })
- },
- // c02等信息
- envInfo (objectId) {
- let params = {
- criterias: [
- { id: objectId, code: 'Tdb' },
- { id: objectId, code: 'RH' },
- { id: objectId, code: 'CO2' },
- { id: objectId, code: 'PM2.5' }
- ]
- }
- 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 info = data.Content
- info.forEach(el => {
- if (el.code == 'Tdb') {
- this.envData.Tdb = el.data ? el.data.toFixed(2) : '--'
- }
- if (el.code == 'RH') {
- this.envData.RH = el.data ? el.data.toFixed(2) : '--'
- }
- if (el.code == 'CO2') {
- this.envData.CO = el.data ? el.data.toFixed(2) : '--'
- }
- if (el.code == 'PM2.5') {
- this.envData.PM = el.data ? el.data.toFixed(2) : '--'
- }
- })
- }
- })
- },
- // 获取数据信息
- initData (objectId) {
- let params = {
- criterias: [
- {id: objectId}
- ]
- }
- 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]
- console.log(this.Info)
- if (this.Info.infos.Pic) {
- this.draw(this.Info.infos.Pic[0].key)
- }
- }
- })
- },
- // 设备建筑查询
- searchEqBuild (idArr) {
- let params = {
- keywords: [],
- category: ['EqObj'],
- limit: idArr.length,
- ids: idArr
- }
- 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') {
- let bdObjName, flObjName
- if (data.Content.length > 0) {
- bdObjName = data.Content[0].bdObjName ? data.Content[0].bdObjName : "--"
- flObjName = data.Content[0].flObjName ? data.Content[0].flObjName : "--"
- } else {
- bdObjName = '--'
- flObjName = '--'
- }
- this.serveData.forEach(el => {
- el.eqName = el.infos.EquipLocalName || '--'
- el.eqId = el.infos.EquipLocalID || '--'
- // el.category = (el.category) // youwenti
- el.category = formatCodetoClass(this.$store.state.equipmentAll, el.category) // youwenti
- el.location = bdObjName + flObjName
- el.alarmLength = el.alarmLength ? el.alarmLength : 0
- })
- }
- })
- },
- // 空间内设备
- getTableData (key) {
- let params = {
- criteria: {
- graphType: 'EquipinSpace',
- relType: '1',
- toId: this.objectId, // 空间id
- side: 'fromId'
- }
- }
- if (key[0] == 1) {
- params.criteria.graphType = 'EquipinSpace'
- axios.post(`/data-platform-3/data-platform-3/object/rel_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.equipInSpace()
- }
- })
- } else {
- params.criteria.graphType = 'EquipforSpace'
- axios.post(`/data-platform-3/data-platform-3/object/rel_query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
- let data = res.data
- if (data.Result == 'success') {
- this.serveData = data.Content
- if (this.serveData.length > 0) {
- let idArr = []
- this.serveData.forEach(el => {
- idArr.push(el.id)
- })
- this.equipForSpace()
- this.searchEqBuild(idArr)
- }
- }
- })
- }
- },
- // 服务于空间设备未恢复的报警条数
- equipInSpace () {
- let params = {
- spaceId: this.objectId // 空间id
- }
- axios.post(`/alarm-system/alarm-system/alarm/equipInSpace/query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
- let data = res.data
- if (data.Result == 'success') {
- let alarm = data.Content
- if (alarm.length > 0) {
- alarm.map(j => {
- this.tableData.map(i => {
- if (i.infos.EquipID == j.equipmentId) {
- i.alarmLength = j.alarmList ? j.alarmList.length : 0
- }
- })
- })
- }
- this.tableData.forEach(el => {
- el.eqName = el.infos.EquipLocalName || '--'
- el.eqId = el.infos.EquipLocalID || '--'
- // el.category = (el.category) // youwenti
- el.category = formatCodetoClass(this.$store.state.equipmentAll, el.category) // youwenti
- el.location = el.location ? el.location.building : '--' // youwenti
- el.alarmLength = el.alarmLength ? el.alarmLength : 0
- })
- }
- })
- },
- //
- equipForSpace () {
- let params = {
- spaceId: this.objectId // 空间id
- }
- axios.post(`/alarm-system/alarm-system/alarm/equipForSpace/query?projectId=${this.$store.state.projId}&secret=${this.$store.state.secret}`, params).then(res => {
- let data = res.data
- if (data.Result == 'success') {
- let alarm = data.Content
- if (alarm.length > 0) {
- this.serveData = this.serveData.map(i => {
- alarm.map(j => {
- if (i.infos.EquipID == j.equipmentId) {
- i.alarmLength = j.alarmList ? j.alarmList.length : 0
- }
- })
- })
- }
- }
- })
- },
- // 查看更多的点击事件
- getMoreInfo (Info) {
- this.$router.push({path: 'detail', query: {obj: JSON.stringify(Info)}})
- },
- // 查看全景图
- draw (key) {
- var div = document.getElementById('container')
- // let baseUrl = this.$store.state.baseUrl
- // 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) {
- this.isQR = isQR
- 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" >
- .my-vr {
- font-size: 16px;
- margin: 0;
- display: flex;
- .vr-left {
- width: 78%;
- min-width: 900px;
- 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;
- >span {
- font-size: 14px;
- display: inline-block;
- color: #6D747C;
- width: 248px;
- height: 28px;
- line-height: 28px;
- padding-left: 20px;
- margin-left: 34px;
- }
- }
- .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;
- .box-left {
- width:30%;
- min-width: 250px;
- background: #F5F5F5;
- border-radius: 2px;
- margin-right: 20px;
- display: inline-block;
- 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;
- }
- .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: 70%;
- 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">
- .my-vr {
- .box-bottom{
- // .ivu-collapse-content{
- // padding:0;
- // }
- .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>
|