qilu_hospital_front/src/views/dispatch/index-copy.vue

<template>
  <div>
    <div>{{ type == '1' ? '呼叫' : type == '2' ? '对讲' : '会议' }}</div>
    <el-row :gutter="22">
      <el-col :span="4">
        <div>
          <h3>通讯录</h3>
        </div>
        <el-tree :data="groupData" show-checkbox node-key="id" :default-expanded-keys="[2, 3]" :default-checked-keys="[5]"
          :props="defaultProps">
        </el-tree>
      </el-col>
      <el-col :span="16">
        <el-row :gutter="12">
          <el-col v-for="(item, index) in members" :key="item.number" :span="8">
            <el-card shadow="always">
              {{ item.number }} - {{ item.name }}
              <video :id="'video' + item.number" style="background-color: black;"></video>
              <div>
                <el-button type="primary" plan size="mini" @click="makeCall(item, false)">音频呼叫</el-button>
                <el-button type="primary" plan size="mini" @click="makeCall(item, true)">视频呼叫</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="4">
        <div>
          <h3>呼叫列表</h3>
        </div>
        <div>
          <el-checkbox-group v-model="checkedMember">
            <el-checkbox v-for="(item, index) in groupMembers" :label="item.number" :key="item.number + '' + index">{{
              item.number }} - {{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </div>
        <!-- 其他操作 -->
        <el-row :gutter="12">
          <el-col :span="16">
            <el-col :span="12">
              <el-button>邀请进入</el-button>
            </el-col>
            <el-col :span="12">
              <el-button>静音</el-button>
            </el-col>
          </el-col>
          <el-col :span="8">
            <el-col :span="24">
              <el-button>移除会议</el-button>
            </el-col>
            <el-col :span="24">
              <el-button>结束会议</el-button>
            </el-col>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { client, isRegisted, mylog } from "../../util/dispatch"

export default {
  name: "alarmCenter",
  data() {
    return {
      //分组成员
      groupData: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      //对话成员
      members: [
        { number: '1001', name: '张三' }
      ],
      groupMembers: [
        { number: '1001', name: '张三' }, { number: '1002', name: '张三2' }, { number: '1003', name: '张三3' }
      ],
      checkedMember: [],
      //通讯类型
      type: '1',//1呼叫 2对讲 3会议
      _conf: null,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    console.log(isRegisted)
  },
  methods: {
    /** 呼叫 */
    makeCall(obj, isVideo) {
      let mediaControl = document.getElementById('video' + obj.number);
      client.makeCall(obj.number, mediaControl, isVideo).then((call) => {
        this.setCallEventListener(call);
        var state = this.convertCallstate(call.state);
        mylog("call success callState: " + state);
      }).catch((reason) => {
        mylog("call fail");
        mylog(JSON.stringify(reason));
      });
    },
    //呼叫监听
    setCallEventListener(call) {
      call.callStateChange.on(this.onCallStateChange);
      call.onBecomeConference.on((para) => {
        mylog("当前单呼变成会议");
        this._conf = para.changeToConference;
        this._conf.stateChange.on((para) => {
          console.log("_conf.stateChange" + JSON.stringify(para));
        })
      });
    },
    //状态change监听
    onCallStateChange(param) {
      var state = convertCallstate(param.state);
      mylog("call callStateChange, number: " + param.sender.number + ", state: " + state + ", isVideo: " + param.sender.isVideo);
    },
    //监听状态转义
    convertCallstate(state) {
      var stateStr;
      switch (state) {
        case 1:
          stateStr = "init";
          break;
        case 2:
          stateStr = "normal";
          break;
        case 3:
          stateStr = "callout";
          break;
        case 4:
          stateStr = "incoming";
          break;
        case 5:
          stateStr = "ringing";
          break;
        case 6:
          stateStr = "connected";
          break;
        case 7:
          stateStr = "terminal";
          break;
        case 8:
          stateStr = "hold";
          break;
        case 9:
          stateStr = "unhold";
          break;
        default:
          break;
      }
      return stateStr;
    }
  },
};
</script>

<style></style>