123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573 |
- <template>
- <div class="detail-info">
- <div class="eq-top">
- <img src="/static/img/backIcon.jpg" alt="" @click="back">
- <span>返回 </span>
- </div>
- <div class="detail-content">
- <div class="content-top">
- <p>{{eqMaterial.infos.EquipLocalName || '--'}}详情</p>
- <div><Checkbox v-model="isData" label="只显示有数据的信息" name="type" @on-change="onChange"></Checkbox>只显示有数据的信息</div>
- </div>
- <hr>
- <div class="content-bottom">
- <div class="content-left">
- <div>
- <ul v-for="(list,index1) in mainInfo" :key='index1' :class="{changeStyle:changeColor == index1}"
- @click="change(index1)"><a :href="`#${list.href}`">{{list.name}}</a>
- <template v-if="list.list">
- <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>
- </template>
- </ul>
- </div>
- </div>
- <div class="content-right" @scroll="handleScroll">
- <section>
- <p id="baseInfo" class="group1"><span></span>基本信息</p>
- <ul>
- <li><span>设备ID</span>{{eqMaterial.infos.EquipID || '--'}}</li>
- <li><span>设备二维码图片</span><i v-if="eqMaterial.infos.EquipQRCode" @click="lookAt">查看</i></li>
- <li><span>设备名称</span>{{eqMaterial.infos.EquipName || '--'}}</li>
- <li><span>BIM模型中编码</span>{{eqMaterial.infos.BIMID || '--'}}</li>
- <li><span>设备本地编码</span>{{eqMaterial.infos.EquipLocalID || '--'}}</li>
- <li><span>BIM模型中坐标</span>{{eqMaterial.infos.BIMLocation || '--'}}</li>
- <li><span>设备本地名称</span>{{eqMaterial.infos.EquipLocalName || '--'}}</li>
- </ul>
- </section>
- <section>
- <p id="standInfo" class="group1"><span></span>台账信息</p>
- <p id="001" class="p-title">设备厂家</p>
- <ul >
- <li><span>生产厂家</span>{{eqMaterial.infos.Manufacturer || '--'}}</li>
- <li><span>品牌</span>{{eqMaterial.infos.Brand || '--'}}</li>
- <li><span>生产日期</span>{{eqMaterial.infos.ProductDate || '--'}}</li>
- <li><span>设备型号</span>{{eqMaterial.infos.Specification || '--'}}</li>
- <li><span>出厂编号</span>{{eqMaterial.infos.SerialNum || '--'}}</li>
- </ul>
- <p id="002" class="p-title">供应&购买</p>
- <ul>
- <li><span>供应商单位名称</span>{{eqMaterial.infos.Supplier || '--'}}</li>
- <li><span>供应商联系人</span>{{eqMaterial.infos.SupplierContactor || '--'}}</li>
- <li><span>供应商联系电话</span>{{eqMaterial.infos.SupplierPhone || '--'}}</li>
- <li><span>供应商电子邮件</span>{{eqMaterial.infos.SupplierEmail || '--'}}</li>
- <li><span>供应商网址</span>{{eqMaterial.infos.SupplierWeb || '--'}}</li>
- <li><span>供应商传真</span>{{eqMaterial.infos.SupplierFax || '--'}}</li>
- <li><span>供应合同编号</span>{{eqMaterial.infos.SupplierContractID || '--'}}</li>
- <li><span>资产编号</span>{{eqMaterial.infos.AssetID || '--'}}</li>
- <li><span>采购价格</span>{{eqMaterial.infos.PurchasePrice || '--'}}</li>
- </ul>
- <p id="003" class="p-title"> 现场&安装</p>
- <ul >
- <li><span>长</span>{{eqMaterial.infos.Length || '--'}} m</li>
- <li><span>宽</span>{{eqMaterial.infos.Width || '--'}} m</li>
- <li><span>高</span>{{eqMaterial.infos.Height || '--'}} m</li>
- <li><span>净重</span>{{eqMaterial.infos.NetWeight || '--'}} kg</li>
- <li><span>主体材质</span>{{eqMaterial.infos.Material || '--'}}</li>
- <li><span>所属部门</span>{{eqMaterial.infos.InstallLocation || '--'}}</li>
- <li><span>安装位置</span>{{eqMaterial.infos.Width || '--'}}</li>
- </ul>
- <p id="004" class="p-title"> 运行&维保</p>
- <ul >
- <li><span>维保负责人</span>{{eqMaterial.infos.Principal || '--'}}</li>
- <li><span>投产日期</span>{{eqMaterial.infos.StartDate || '--'}}</li>
- <li><span>保修期</span>{{eqMaterial.infos.Warranty || '--'}}</li>
- <li><span>维保合同截止日期</span>{{eqMaterial.infos.MaintainDeadline || '--'}}</li>
- <li><span>使用寿命</span>{{eqMaterial.infos.ServiceLife || '--'}}</li>
- <li><span>预计报废日期</span>{{eqMaterial.infos.ExpectScrapDate || '--'}}</li>
- <li><span>保养周期</span>{{eqMaterial.infos.MaintainPeriod || '--'}}</li>
- <li><span>维修商单位名称</span>{{eqMaterial.infos.Maintainer || '--'}}</li>
- <li><span>维修商联系人</span>{{eqMaterial.infos.MaintainerContactor || '--'}}</li>
- <li><span>维修商联系电话</span>{{eqMaterial.infos.MaintainerPhone || '--'}}</li>
- <li><span>维修商电子邮件</span>{{eqMaterial.infos.MaintainerEmai || '--'}}</li>
- <li><span>维修商网址</span>{{eqMaterial.infos.MaintainerWeb || '--'}}</li>
- <li><span>维修商传真</span>{{eqMaterial.infos.MaintainerFax || '--'}}</li>
- </ul>
- <p id="005" class="p-title"> 保险</p>
- <ul >
- <li><span>保险公司名称</span>{{eqMaterial.infos.Insurer || '--'}}</li>
- <li><span>保险公司联系人</span>{{eqMaterial.infos.InsurerContactor || '--'}}</li>
- <li><span>保险公司联系电话</span>{{eqMaterial.infos.InsurerPhone || '--'}}</li>
- <li><span>保险公司电子邮件</span>{{eqMaterial.infos.InsurerEmail || '--'}}</li>
- <li><span>保险公司网址</span>{{eqMaterial.infos.InsurerWeb || '--'}}</li>
- <li><span>保险公司传真</span>{{eqMaterial.infos.InsurerFax || '--'}}</li>
- <li><span>保险单号</span>{{eqMaterial.infos.InsuranceNum || '--'}}</li>
- <li><span>保险文件</span>{{eqMaterial.infos.InsuranceFile || '--'}}</li>
- </ul>
- <p id="006" class="p-title">照片&文档</p>
- <ul>
- <li v-if="eqMaterial.infos.Nameplate"><span>设备铭牌照片</span>{{eqMaterial.infos.Nameplate[0].key?eqMaterial.infos.Nameplate[0].key:'--'}}</li>
- </ul>
- </section>
- <section>
- <p id="controlInfo"><span></span>控制参数</p>
- <ul>
- <li><span>控制模式</span>{{eqMaterial.infos.CtrlMode || '--'}}</li>
- </ul>
- </section>
- <section>
- <p id="setInfo"><span></span>设定参数</p>
- <ul>
- <li><span>设备开关设定</span>{{eqMaterial.infos.EquipSwitchSet || '--'}}</li>
- <li><span>设备开设定</span>{{eqMaterial.infos.EquipOnSet || '--'}}</li>
- <li><span>设备关设定</span>{{eqMaterial.infos.EquipOffSet || '--'}}</li>
- <li><span>设备频率设定</span>{{eqMaterial.infos.EquipFreqSet || '--'}}</li>
- <li><span>设备开度设定</span>{{eqMaterial.infos.EquipOpeningSet || '--'}}</li>
- </ul>
- </section>
- <section>
- <p id="technologyInfo"><span></span>技术参数</p>
- <ul>
- <li><span>额定电压</span>{{eqMaterial.infos.RatedU || '--'}} V</li>
- <li><span>额定电流</span>{{eqMaterial.infos.RatedI || '--'}} A</li>
- <li><span>额定功率</span>{{eqMaterial.infos.RatedP || '--'}} kW</li>
- <li><span>额定频率</span>{{eqMaterial.infos.RatedFreq || '--'}} Hz</li>
- <li><span>累计运行时间</span>{{eqMaterial.infos.AccRunTime || '--'}} h</li>
- <li><span>水泵类型</span>{{eqMaterial.infos.PumpType || '--'}}</li>
- <li><span>泵体安装类型</span>{{eqMaterial.infos.InstallType || '--'}}</li>
- <li><span>输配介质</span>{{eqMaterial.infos.MediumType || '--'}}</li>
- <li><span>调节类型</span>{{eqMaterial.infos.AdjustType || '--'}}</li>
- <li><span>管网使用类型</span>{{eqMaterial.infos.NetUseType || '--'}}</li>
- <li><span>是否为备用泵</span>{{eqMaterial.infos.isBackup || '--'}}</li>
- <li><span>额定扬程</span>{{eqMaterial.infos.RatedHead || '--'}} m</li>
- <li><span>额定驱动压力</span>{{eqMaterial.infos.RatedDrivePress || '--'}} MPa</li>
- <li><span>额定增压比</span>{{eqMaterial.infos.RatedPressRatio || '--'}}</li>
- <li><span>额定转速</span>{{eqMaterial.infos.RatedRPM || '--'}} rpm</li>
- </ul>
- </section>
- <section>
- <p id="operationInfo"><span></span>运行参数</p>
- <p id="101" class="p-title">运行状态</p>
- <ul>
- <li><span>运行状态</span>{{eqMaterial.infos.RunStatus || '--'}}</li>
- <li><span>本地远程状态</span>{{eqMaterial.infos.RemoteStatus || '--'}}</li>
- <li><span>A相电压</span>{{eqMaterial.infos.APhaseU || '--'}} V</li>
- <li><span>B相电压</span>{{eqMaterial.infos.BPhaseU || '--'}} V</li>
- <li><span>C相电压</span>{{eqMaterial.infos.CPhaseU || '--'}} V</li>
- <li><span>A相电流</span>{{eqMaterial.infos.APhaseI || '--'}} A</li>
- <li><span>B相电流</span>{{eqMaterial.infos.BPhaseI || '--'}} A</li>
- <li><span>C相电流</span>{{eqMaterial.infos.CPhaseI || '--'}} A</li>
- <li><span>耗电功率</span>{{eqMaterial.infos.ElecConsumP || '--'}} kW</li>
- <li><span>水泵进口压力</span>{{eqMaterial.infos.InPress || '--'}} MPa</li>
- <li><span>水泵出口压力</span>{{eqMaterial.infos.OutPress || '--'}} MPa</li>
- <li><span>电机效率</span>{{eqMaterial.infos.MotorEff || '--'}} %</li>
- <li><span>瞬时增压比</span>{{eqMaterial.infos.PressRatio || '--'}}</li>
- <li><span>整体效率</span>{{eqMaterial.infos.OverallEff || '--'}} %</li>
- </ul>
- <p id="102" class="p-title">累计参数</p>
- <ul>
- <li><span>累计流量</span>{{eqMaterial.infos.AccFlow || '--'}} m³</li>
- <li><span>累计耗电量</span>{{eqMaterial.infos.AccElecConsum || '--'}} kWh</li>
- <li><span>累计运行时间</span>{{eqMaterial.infos.AccRunTime || '--'}} h</li>
- <li><span>开启时间计时</span>{{eqMaterial.infos.OpenTimeCount || '--'}} h</li>
- <li><span>关闭时间计时</span>{{eqMaterial.infos.CloseTimeCount || '--'}} h</li>
- </ul>
- </section>
- <section style="min-height: 590px">
- <p id="eneryInfo"><span></span>能耗信息</p>
- <enery-params v-show="eqMaterial" :roomInfo='eqMaterial' :isShowChange='isShowChange'></enery-params>
- </section>
- </div>
- </div>
- </div>
- <div class="mask-bg"></div>
- <div class="mask">
- <message-modal @close='close' :isQR='isQR'></message-modal>
- </div>
- </div>
- </template>
- <script>
- import eneryParams from '../detail/EneryParams'
- import messageModal from '../spread/MessageModal.vue'
- import axios from 'axios'
- export default {
- components: {
- eneryParams,
- messageModal
- },
- mixins: [],
- props: {
- },
- data () {
- return {
- isData: false,
- isShowChange: false,
- eqMaterial: {
- infos: {
- EquipLocalName: "--",
- EquipName: "--",
- EquipID: "--",
- EquipLocalID: "--",
- EquipQRCode: "--",
- Manufacturer: "--",
- ProductDate: "--",
- Specification: "--",
- SerialNum: "--",
- BIMID: "--",
- Supplier: "--",
- PurchasePrice: "--",
- InstallLocation: "--",
- StartDate: "--",
- SupplierContactor: "--",
- InsuranceNum: "--",
- MaintainerPhone: "--",
- Insurer: "--",
- Maintainer: "--",
- InsurerContactor: "--",
- InsurerPhone: "--",
- Principal: "--",
- Nameplate: [{key: "--"}]
- },
- location: {
- building: "--",
- floor: "--"
- }
- },
- isQR: "",
- changeColor: 0,
- liIndex: -1,
- mainInfo: [
- {name: "基本信息", href: "baseInfo"},
- {
- name: "台账信息",
- href: "standInfo",
- list: [
- {name: "设备厂家", href: "001"},
- {name: "供应&购买", href: "002"},
- {name: "现场&安装", href: "003"},
- {name: "运行&维保", href: "004"},
- {name: "保险", href: "005"},
- {name: "照片&文档", href: "006"}
- ]},
- {name: "控制参数", href: "controlInfo"},
- {name: "设定参数", href: "setInfo"},
- {name: "技术参数", href: "technologyInfo"},
- {
- name: "运行参数",
- href: "operationInfo",
- list: [
- {name: "运行状态", href: "101"},
- {name: "累计参数", href: "102"}
- ]
- },
- {name: "能耗信息", href: "eneryInfo"}
- ],
- groups: [],
- box: null
- }
- },
- computed: {
- },
- mounted () {
- this.getObjInfo()
- this.$nextTick(() => {
- this.box = document.querySelector(".content-right")
- this.groups = document.querySelectorAll(".content-right>section")
- })
- },
- methods: {
- getCurrentData () {
- let params = {
- criterias: [
- {
- id: this.eqMaterial.id,
- code: "ElecConsumP"
- },
- {
- id: this.eqMaterial.id,
- code: "AccElecConsum"
- }
- ]
- }
- axios.post(`/data-platform-3/data-platform-3/parameter/batch_query_param?projectId=${this.$store.state.projId}&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
- }
- })
- }
- })
- },
- change (index) {
- this.changeColor = index
- },
- changeLi (index2) {
- this.liIndex = index2
- },
- // 路由传参得到Info
- getObjInfo () {
- this.eqMaterial = JSON.parse(this.$route.query.obj)
- this.getCurrentData()
- },
- back () {
- history.go(-1)
- },
- // 下载弹框
- lookAt () {
- this.isQR = this.eqMaterial.infos.EquipQRCode
- 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'
- },
- onChange (val) {
- if (val) {
- this.hiddenNoData()
- } else {
- this.showAllData()
- }
- },
- hiddenNoData () {
- this.isShowChange = true
- let arr = document.querySelectorAll('.content-right li')
- arr.forEach(i => {
- if (i.innerHTML.includes('--')) {
- i.style.display = 'none'
- }
- })
- },
- // 只显示有数据的
- showAllData () {
- this.isShowChange = false
- let arr = document.querySelectorAll('.content-right li')
- arr.forEach(i => {
- i.style.display = 'block'
- })
- },
- // 滚动触发事件
- handleScroll () {
- let top = this.box.scrollTop
- let i = this.groups.length - 1
- for (; i >= 0; i--) {
- if (this.groups[i].offsetTop <= top) {
- this.changeColor = i
- let pTitles = this.groups[i].querySelectorAll('.p-title')
- let j = pTitles ? pTitles.length - 1 : 0
- for (; j >= 0; j--) {
- if (pTitles[j].offsetTop <= top) {
- this.liIndex = j
- break
- }
- }
- break
- }
- }
- }
- }
- }
- </script>
- <style scoped lang="less" >
- .detail-info {
- .eq-top {
- margin-bottom: 20px;
- margin-left: 20px;
- font-size: 7px;
- color: #212830;
- >img {
- //vertical-align: middle;
- cursor: pointer;
- border: 1px solid #CACACA;
- border-radius: 2px;
- }
- >span {
- font-size: 16px;
- color: #212830;
- }
- }
- .detail-content {
- box-shadow: 0 2px 10px 0 rgba(44,48,62,0.06);
- border-radius: 2px;
- background: #fff;
- padding-left:20px;
- .content-top {
- width: 100%;
- padding-top: 10px;
- p {
- font-size: 18px;
- color: #212830;
- font-weight: bold;
- padding: 24px 0 20px 0;
- }
- }
- hr {
- margin-bottom: 0;
- }
- .content-bottom {
- display: flex;
- .content-left {
- width: 264px;
- border-radius: 2px;
- padding-top: 10px;
- margin-right: 60px;
- margin-bottom: 20px;
- background: #FAFAFA;
- div {
- .p-title{
- margin-left: 24px ;
- margin-bottom: 12px;
- border-bottom:1px dashed #cecece;
- }
- .p-title{
- padding: 20px;
- }
- .group1{
- margin-bottom:20px;
- }
- ul{
- font-size: 16px;
- padding:5px 0 5px 40px;
- font-weight: bold;
- cursor: pointer;
- a {
- color: #212830;
- &:hover,&:active {
- color:#6682E6;
- }
- }
- li {
- font-size: 16px;
- padding:18px 0 0 40px;
- font-weight: bold;
- cursor: pointer;
- a{
- color: #6D747C;
- }
- &:first-child {
- padding-top: 15px;
- }
- &:last-child {
- padding-bottom: 0;
- }
- }
- }
- }
- }
- .content-right {
- width: 1450px;
- height: 700px;
- overflow-y:scroll;
- padding: 10px;
- position: relative;
- section{
- p {
- height: 40px;
- span {
- display: inline-block;
- width: 4px;
- height: 16px;
- background: #728DEE;
- margin-right: 10px;
- vertical-align: middle;
- }
- }
- ul {
- display: flex;
- flex-wrap: wrap;
- margin-left: 10px;
- li {
- width: 50%;
- padding-bottom: 15px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- span {
- font-size: 14px;
- color: #6D747C;
- display: inline-block;
- width: 98px;
- margin-right: 20px;
- }
- i{
- color:#6682E6;
- cursor: pointer;
- }
- }
- }
- }
- }
- }
- }
- .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;
- }
- .changeStyle{
- color: #6682E6!important;
- background: #fff;
- >a{
- color: #6682E6!important;
- }
- }
- .color{
- >a{
- color: #6682E6!important;
- }
- }
- }
- </style>
- <style lang="less">
- .detail-info {
- .ivu-table-wrapper {
- border: none;
- }
- .ivu-table td,
- .ivu-table th {
- border: none;
- }
- .ivu-table:before{
- height: 0;
- }
- .ivu-table:after{
- width:0;
- }
- .ivu-table-row .description-td>.ivu-table-cell>span{
- // overflow: hidden;
- // text-overflow: ellipsis;
- // white-space: nowrap;
- max-height: 100px;
- display: inline-block;
- }
- }
- </style>
|