书写语音调度页面

src/assets/js/rem.js

@@ -0,0 +1,18 @@
+(function (doc, win) {
+  var docEl = doc.documentElement,
+    resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
+    recalc = function () {
+      var clientWidth = docEl.clientWidth;
+      if (!clientWidth) return;
+      if (location.href.indexOf("express") > -1) {
+        docEl.style.fontSize = "";
+      } else if (clientWidth >= 1920) {
+        docEl.style.fontSize = "100px"; //1rem  = 100px
+      } else {
+        docEl.style.fontSize = 100 * (clientWidth / 1920) + "px";
+      }
+    };
+  if (!doc.addEventListener) return;
+  win.addEventListener(resizeEvt, recalc, false);
+  doc.addEventListener("DOMContentLoaded", recalc, false);
+})(document, window);

src/views/dispatch/index-copy.vue

@@ -0,0 +1,191 @@
+<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>
+