通讯-- 总指挥部
<!-- 通讯-- 总指挥部 --> <template> <div class="zongCommand-wrap"> <div class="zong-scroll"> <div class="zong-inner" v-if="renderZhihui"> <div class="zong-flex-table"> <div class="flex-item" v-for="item in renderZhihui"> <div class="flex-label"> {{item.headquarterGroupName}} </div> <div class="flex-right"> <div class="flex-tp">职责: {{item.headquarterGroupDuties}}</div> <div class="flex-bt"> <div class="flex-bt-item" v-for="child in item.children"> <div class="flex-lb"> <div class="tit">{{child.headquarterMemberOrgName}}</div> <div class="info">职责: {{child.headquarterMenberDuties}}</div> </div> <div class="flex-rb"> <div class="flex-contact"> <div class="c-item"> <div class="c-lb"> <span class="icon-zong-user"></span> 主要领导 : </div> <div class="c-rb of-1"> {{child.headquarterMemberHead}} </div> </div> <div class="c-item"> <div class="c-lb"> <span class="icon-zong-job"></span> 职务 : </div> <div class="c-rb of-1"> {{child.headquarterMenberPosition}} </div> </div> <div class="c-item"> 联系方式 : <span class="tel">{{child.headquarterMenberTel ? child.headquarterMenberTel : '' | hidePhone}} <div class="icon-pop-call" @click="callPhone(child.headquarterMemberHead, child.headquarterMenberTel)" v-show="child.headquarterMenberTel"></div></span> </div> <div class="c-item"> <div class="c-lb"> <span class="icon-zong-user"></span> 联络员 : </div> <div class="c-rb of-1"> {{child.linkMan}} </div> </div> <div class="c-item"> <div class="c-lb"> <span class="icon-zong-job"></span> 职务 : </div> <div class="c-rb of-1"> {{child.linkManPosition}} </div> </div> <div class="c-item"> 联系方式 : <span class="tel">{{child.linkManTel ? child.linkManTel : '' | hidePhone}} <div class="icon-pop-call" @click="callPhone(child.linkMan, child.linkManTel)" v-show="child.linkManTel"></div></span> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="zong-none" v-else>暂无数据</div> </div> <SingleCall :datas="callInfos" v-if="showSingleCall" @close-panel="onCloseCall"></SingleCall> </div> </template> <script lang="ts"> import {Component, Vue, Prop, Watch, Emit, Inject} from 'vue-property-decorator'; import {eventServer} from "@/api/installServer"; import SingleCall from '@/views/common/SingleCall.vue'; @Component({ name: 'ZongCommand', components : { SingleCall } }) export default class ZongCommand extends Vue { private callInfos: any = {} private showSingleCall: any = false; // 是否展示打电话 private onCloseCall() { this.showSingleCall = false; } private callPhone(name: any, phone: any, e) { console.log(e); this.callInfos = { name, phone } this.showSingleCall = true; } private sceneZhihui: any = []; // 现场指挥部 private totalZhihui: any = []; // 总指挥部 private renderZhihui: any = []; @Prop() private type: any; @Watch('type') private onTypeChanged() { if(this.type === 1) { // 获取总指挥部的数据 this.renderZhihui = JSON.parse(JSON.stringify(this.totalZhihui)) } else if(this.type === 2) { // 获取现场指挥部的数据 this.renderZhihui = JSON.parse(JSON.stringify(this.sceneZhihui)) } // 找到当前指挥部所有人员信息，填充至一键呼叫中。 if(!this.renderZhihui || !this.renderZhihui.length) { return; } let arr: any = []; this.renderZhihui.forEach( (d: any) => { if(d.children) { d.children.forEach( (k: any) => { // 主要领导 arr.push({ type: 1, org: k.headquarterMemberOrgName, job: k.headquarterMenberPosition, name: k.headquarterMemberHead, tel: k.headquarterMenberTel, }) // 联络员 arr.push({ type: 0, org: k.headquarterMemberOrgName, job: k.linkManPosition, name: k.linkMan, tel: k.linkManTel }) }) } }) this.telChange(arr); } @Emit() private telChange(data: any) { return data; } get eventDetailObj() { return this.$store.state.eventModule.currentResponseLevel } private getData() { // 测试id 1555841869158186 eventServer.getZhihuiData({ eventId: this.eventDetailObj.id }).then( (res: any) => { if(res.data) { this.sceneZhihui = res.data.sceneRefEventChildren; this.totalZhihui = res.data.hqRefEventChildren; this.onTypeChanged(); } }) } private mounted() { this.getData(); } } </script> <style lang="less" scoped> .zongCommand-wrap{ width: 100%; height: 785px; overflow: hidden; .zong-scroll{ width: calc(100% + 20px); height: 785px; overflow-y: auto; } .zong-inner{ width: 100%; padding-right: 20px; min-height: 785px; .zong-flex-table{ border: 2px solid #01616e; font-size: 16px; color:#fff; line-height: 2; .flex-item{ display: flex; min-height: 120px; &:last-child{ .flex-label{ border-bottom: none; } .flex-right{ .flex-bt-item{ .flex-bt{ border-bottom: none; } } } } .flex-label{ width: 200px; min-width: 200px; border-right: 2px solid #01616e; border-bottom: 2px solid #01616e; background-color: rgba(0,228,255,.2); display: flex; align-items:center; padding: 0 30px; line-height: 2; } .flex-right{ flex: 1; .flex-tp{ width: 100%; padding: 5px 30px; border-bottom: 2px solid #01616e; min-height: 44px; background-color: rgba(0,0,0,.5); } .flex-bt{ width: 100%; .flex-bt-item{ display: flex; background-color: rgba(4,34,49,.7); border-bottom: 2px solid #01616e; .flex-lb{ padding: 15px 30px; width: 550px; min-width: 550px; border-right: 2px solid #01616e; line-height: 1; .tit{ color: #00e4ff; margin-bottom: 10px; } .info{ } } .flex-rb{ padding: 15px 20px 5px; flex: 1; .flex-contact{ display: flex; flex-wrap: wrap; .c-item{ white-space: nowrap; display: flex; margin-bottom: 10px; min-width: 0; line-height: 1; .c-rb{ padding: 0 10px 0 0; } } .c-item:nth-child(3n - 2){ width: 220px; .c-lb{ width: 120px; min-width: 100px; padding-left: 20px; background: url('../../assets/img/tel/icon_user.png') no-repeat left center; } } .c-item:nth-child(3n - 1){ width: 260px; .c-lb{ width: 90px; min-width: 80px; padding-left: 30px; background: url('../../assets/img/tel/icon_job.png') no-repeat left center; } } .c-item:nth-child(3n){ width: 230px; .tel{ margin: 0 10px; } } } } } } } } } } .zong-none{ text-align: center; padding-top: 300px; color: #999; font-size: 18px; } } </style>
<!-- 通讯-- 总指挥部 --><template> <div class="zongCommand-wrap"> <div class="zong-scroll"> <div class="zong-inner" v-if="renderZhihui"> <div class="zong-flex-table"> <div class="flex-item" v-for="item in renderZhihui"> <div class="flex-label"> {{item.headquarterGroupName}} </div> <div class="flex-right"> <div class="flex-tp">职责: {{item.headquarterGroupDuties}}</div> <div class="flex-bt"> <div class="flex-bt-item" v-for="child in item.children"> <div class="flex-lb"> <div class="tit">{{child.headquarterMemberOrgName}}</div> <div class="info">职责: {{child.headquarterMenberDuties}}</div> </div> <div class="flex-rb"> <div class="flex-contact"> <div class="c-item"> <div class="c-lb"> <span class="icon-zong-user"></span> 主要领导 : </div> <div class="c-rb of-1"> {{child.headquarterMemberHead}} </div> </div> <div class="c-item"> <div class="c-lb"> <span class="icon-zong-job"></span> 职务 : </div> <div class="c-rb of-1"> {{child.headquarterMenberPosition}} </div> </div> <div class="c-item"> 联系方式 : <span class="tel">{{child.headquarterMenberTel ? child.headquarterMenberTel : '' | hidePhone}} <div class="icon-pop-call" @click="callPhone(child.headquarterMemberHead, child.headquarterMenberTel)" v-show="child.headquarterMenberTel"></div></span> </div> <div class="c-item"> <div class="c-lb"> <span class="icon-zong-user"></span> 联络员 : </div> <div class="c-rb of-1"> {{child.linkMan}} </div> </div> <div class="c-item"> <div class="c-lb"> <span class="icon-zong-job"></span> 职务 : </div> <div class="c-rb of-1"> {{child.linkManPosition}} </div> </div> <div class="c-item"> 联系方式 : <span class="tel">{{child.linkManTel ? child.linkManTel : '' | hidePhone}} <div class="icon-pop-call" @click="callPhone(child.linkMan, child.linkManTel)" v-show="child.linkManTel"></div></span> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div class="zong-none" v-else>暂无数据</div> </div>
<SingleCall :datas="callInfos" v-if="showSingleCall" @close-panel="onCloseCall"></SingleCall> </div></template><script lang="ts">import {Component, Vue, Prop, Watch, Emit, Inject} from 'vue-property-decorator';import {eventServer} from "@/api/installServer";import SingleCall from '@/views/common/SingleCall.vue';@Component({ name: 'ZongCommand', components : { SingleCall }})export default class ZongCommand extends Vue { private callInfos: any = {} private showSingleCall: any = false; // 是否展示打电话 private onCloseCall() { this.showSingleCall = false; } private callPhone(name: any, phone: any, e) { console.log(e); this.callInfos = { name, phone } this.showSingleCall = true; } private sceneZhihui: any = []; // 现场指挥部 private totalZhihui: any = []; // 总指挥部 private renderZhihui: any = []; @Prop() private type: any; @Watch('type') private onTypeChanged() { if(this.type === 1) { // 获取总指挥部的数据 this.renderZhihui = JSON.parse(JSON.stringify(this.totalZhihui)) } else if(this.type === 2) { // 获取现场指挥部的数据 this.renderZhihui = JSON.parse(JSON.stringify(this.sceneZhihui)) }
// 找到当前指挥部所有人员信息，填充至一键呼叫中。 if(!this.renderZhihui || !this.renderZhihui.length) { return; } let arr: any = []; this.renderZhihui.forEach( (d: any) => { if(d.children) { d.children.forEach( (k: any) => { // 主要领导 arr.push({ type: 1, org: k.headquarterMemberOrgName, job: k.headquarterMenberPosition, name: k.headquarterMemberHead, tel: k.headquarterMenberTel,
}) // 联络员 arr.push({ type: 0, org: k.headquarterMemberOrgName, job: k.linkManPosition, name: k.linkMan, tel: k.linkManTel }) }) } }) this.telChange(arr); } @Emit() private telChange(data: any) { return data; } get eventDetailObj() { return this.$store.state.eventModule.currentResponseLevel } private getData() { // 测试id 1555841869158186 eventServer.getZhihuiData({ eventId: this.eventDetailObj.id }).then( (res: any) => { if(res.data) { this.sceneZhihui = res.data.sceneRefEventChildren; this.totalZhihui = res.data.hqRefEventChildren; this.onTypeChanged(); } }) } private mounted() { this.getData(); }}</script><style lang="less" scoped> .zongCommand-wrap{ width: 100%; height: 785px; overflow: hidden; .zong-scroll{ width: calc(100% + 20px); height: 785px; overflow-y: auto; } .zong-inner{ width: 100%; padding-right: 20px; min-height: 785px; .zong-flex-table{ border: 2px solid #01616e; font-size: 16px; color:#fff; line-height: 2; .flex-item{ display: flex; min-height: 120px; &:last-child{ .flex-label{ border-bottom: none; } .flex-right{ .flex-bt-item{ .flex-bt{ border-bottom: none; } } } } .flex-label{ width: 200px; min-width: 200px; border-right: 2px solid #01616e; border-bottom: 2px solid #01616e; background-color: rgba(0,228,255,.2); display: flex; align-items:center; padding: 0 30px; line-height: 2; } .flex-right{ flex: 1; .flex-tp{ width: 100%; padding: 5px 30px; border-bottom: 2px solid #01616e; min-height: 44px; background-color: rgba(0,0,0,.5); } .flex-bt{ width: 100%; .flex-bt-item{ display: flex; background-color: rgba(4,34,49,.7); border-bottom: 2px solid #01616e; .flex-lb{ padding: 15px 30px; width: 550px; min-width: 550px; border-right: 2px solid #01616e; line-height: 1; .tit{ color: #00e4ff; margin-bottom: 10px; } .info{
} } .flex-rb{ padding: 15px 20px 5px; flex: 1; .flex-contact{ display: flex; flex-wrap: wrap; .c-item{ white-space: nowrap; display: flex; margin-bottom: 10px; min-width: 0; line-height: 1; .c-rb{ padding: 0 10px 0 0; } } .c-item:nth-child(3n - 2){ width: 220px; .c-lb{ width: 120px; min-width: 100px; padding-left: 20px; background: url('../../assets/img/tel/icon_user.png') no-repeat left center; } } .c-item:nth-child(3n - 1){ width: 260px; .c-lb{ width: 90px; min-width: 80px; padding-left: 30px; background: url('../../assets/img/tel/icon_job.png') no-repeat left center; } } .c-item:nth-child(3n){ width: 230px; .tel{ margin: 0 10px; } } } } } } } } } } .zong-none{ text-align: center; padding-top: 300px; color: #999; font-size: 18px; } }</style>
