通讯-- 总指挥部

<!-- 通讯-- 总指挥部 -->
<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>