通讯-- 总指挥部

<!-- 通讯-- 总指挥部 -->
<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{
     100%;
    height: 785px;
    overflow: hidden;
    .zong-scroll{
       calc(100% + 20px);
      height: 785px;
      overflow-y: auto;
    }
    .zong-inner{
       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{
             200px;
            min- 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{
               100%;
              padding: 5px 30px;
              border-bottom: 2px solid #01616e;
              min-height: 44px;
              background-color: rgba(0,0,0,.5);
            }
            .flex-bt{
               100%;
              .flex-bt-item{
                display: flex;
                background-color: rgba(4,34,49,.7);
                border-bottom: 2px solid #01616e;
                .flex-lb{
                  padding: 15px 30px;
                   550px;
                  min- 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- 0;
                      line-height: 1;
                      .c-rb{
                        padding: 0 10px 0 0;
                      }
                    }
                    .c-item:nth-child(3n - 2){
                       220px;
                      .c-lb{
                         120px;
                        min- 100px;
                        padding-left: 20px;
                        background: url('../../assets/img/tel/icon_user.png') no-repeat left center;
                      }
                    }
                    .c-item:nth-child(3n - 1){
                       260px;
                      .c-lb{
                         90px;
                        min- 80px;
                        padding-left: 30px;
                        background: url('../../assets/img/tel/icon_job.png') no-repeat left center;
                      }
                    }
                    .c-item:nth-child(3n){
                       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{ 100%; height: 785px; overflow: hidden; .zong-scroll{ calc(100% + 20px); height: 785px; overflow-y: auto; } .zong-inner{ 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{ 200px; min- 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{ 100%; padding: 5px 30px; border-bottom: 2px solid #01616e; min-height: 44px; background-color: rgba(0,0,0,.5); } .flex-bt{ 100%; .flex-bt-item{ display: flex; background-color: rgba(4,34,49,.7); border-bottom: 2px solid #01616e; .flex-lb{ padding: 15px 30px; 550px; min- 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- 0; line-height: 1; .c-rb{ padding: 0 10px 0 0; } } .c-item:nth-child(3n - 2){ 220px; .c-lb{ 120px; min- 100px; padding-left: 20px; background: url('../../assets/img/tel/icon_user.png') no-repeat left center; } } .c-item:nth-child(3n - 1){ 260px; .c-lb{ 90px; min- 80px; padding-left: 30px; background: url('../../assets/img/tel/icon_job.png') no-repeat left center; } } .c-item:nth-child(3n){ 230px; .tel{ margin: 0 10px; } } } } } } } } } } .zong-none{ text-align: center; padding-top: 300px; color: #999; font-size: 18px; } }</style>