diff --git a/src/components/call.vue b/src/components/call.vue
new file mode 100644
index 0000000..f9b4849
--- /dev/null
+++ b/src/components/call.vue
@@ -0,0 +1,657 @@
+<!-- 呼叫页面 -->
+<template>
+  <div id="rong-template-call">
+    <div class="rong-box rong-call-box">
+      <div class="rong-info">
+        <p>
+          当前拨号用户:
+          <span>{{ partentInfo.userId }}</span>
+        </p>
+        <!-- <p>群组 id: <span>{{params.groupId}}- {{$route.params.groupId}}</span></p> -->
+        <!-- <el-button @click="test()">群聊测试</el-button> -->
+      </div>
+      <div class="rong-type-box" style="display: none">
+        <!-- <div class="rong-type-box" v-if="callStep === CallStep.READY_TO_CALL"> -->
+        <label for="">通话类型: </label>
+        <select name="" id="" v-model="callType">
+          <option value="1">单人</option>
+          <option value="3">群组</option>
+        </select>
+      </div>
+      <div class="rong-video-box">
+        <div class="rong-video-list">
+          <div
+            class="rong-video-min"
+            v-for="user in minUserList"
+            v-video="user"
+            :talktype="user.talkType"
+          ></div>
+        </div>
+        <div
+          v-if="maxUser"
+          class="rong-video-max"
+          v-video="maxUser"
+          :talktype="maxUser.talkType"
+        ></div>
+      </div>
+      <div class="rong-call-btns">
+        <template v-if="callStep === CallStep.READY_TO_CALL">
+          <button
+            class="rong-call-video"
+            title="点击进行视频通话"
+            @click="inputCall(false)"
+          ></button>
+          <!-- <button
+            class="rong-call-audio"
+            title="点击进行音频通话"
+            @click="inputCall(true)"
+          ></button> -->
+        </template>
+        <template v-else-if="callStep === CallStep.CALLING">
+          <button
+            class="rong-call-hungup"
+            title="点击挂断"
+            @click="hungup"
+          ></button>
+          <button
+            v-if="callType == 3"
+            class="rong-call-invite"
+            title="点击邀请"
+            @click="invite"
+          ></button>
+          <button
+            class="rong-call-mute"
+            title="点击开启/关闭音频"
+            :closed="isMuted"
+            @click="mute"
+          ></button>
+          <button
+            class="rong-call-video"
+            closed
+            title="点击开启/关闭视频"
+            :closed="callInfo.mediaType !== 2"
+            @click="setVideo"
+          ></button>
+        </template>
+        <template v-else-if="callStep === CallStep.INVITED_TO_ANSWER">
+          <button class="rong-call-accept" @click="accept"></button>
+          <button class="rong-call-hungup" @click="reject"></button>
+        </template>
+      </div>
+    </div>
+
+    <!-- 群聊 -->
+    <el-dialog title="群聊用户" :visible.sync="dialogVisible" width="30%">
+      <el-checkbox
+        :indeterminate="isIndeterminate"
+        v-model="checkAll"
+        @change="handleCheckAllChange"
+        >全选当前用户
+      </el-checkbox>
+      <div style="margin: 15px 0"></div>
+
+      <el-checkbox-group
+        v-model="checkedCities"
+        @change="handleCheckedCitiesChange"
+      >
+        <el-checkbox v-for="userId in cities" :label="userId" :key="userId">{{
+          userId
+        }}</el-checkbox>
+      </el-checkbox-group>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="sureMemer()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getPeoplesMembers } from "@/services";
+var RongIMLib = window.RongIMLib,
+  RongCallLib = window.RongCallLib,
+  win = window,
+  RongCall = window.RongCall,
+  setting = RongCall.setting,
+  utils = RongCall.utils;
+
+var dialog = RongCall.dialog,
+  ConversationType = RongIMLib.CONVERSATION_TYPE,
+  MediaType = {
+    MEDIA_AUDIO: 1,
+    MEDIA_VEDIO: 2,
+    1: "MEDIA_AUDIO",
+    2: "MEDIA_VEDIO",
+  };
+var isAutoClose = false;
+// 通话阶段
+var CallStep = {
+  READY_TO_CALL: 1, // 准备拨打(最初状态)
+  INVITED_TO_ANSWER: 2, // 被邀请接听, 其他人拨打, 己方选择接听或拒绝
+  CALLING: 3, // 拨打中
+};
+
+var CallName = {};
+CallName[MediaType.MEDIA_AUDIO] = "语音";
+CallName[MediaType.MEDIA_VEDIO] = "视频";
+
+// 将消息转化为调用 CallLib 需要参数
+function messageToCallInfo(message) {
+  return {
+    conversationType: message.conversationType,
+    targetId: message.targetId,
+    mediaType: message.content.mediaType,
+  };
+}
+
+// 获取挂断原因
+function getHungupReason(reason, message) {
+  var reasonPrompt;
+  var senderUserId = message.senderUserId;
+  switch (reason) {
+    case 8:
+      reasonPrompt = "其他设备已处理";
+      break;
+    case 11:
+      reasonPrompt = `${senderUserId} 已取消`;
+      break;
+    case 12:
+      reasonPrompt = `${senderUserId} 已拒绝`;
+      break;
+    case 13:
+      reasonPrompt = `${senderUserId} 已挂断`;
+      break;
+    case 14:
+      reasonPrompt = `${senderUserId} 忙碌中`;
+      break;
+    case 15:
+      reasonPrompt = `${senderUserId} 未接听`;
+      break;
+    default:
+      reasonPrompt = "未知原因挂断";
+  }
+  return reasonPrompt;
+}
+
+// 己方挂断后的提示
+function getSummaryText(status, message) {
+  var senderUserId = message.senderUserId;
+  var text;
+  switch (status) {
+    case 1:
+      text = "己方已取消";
+      break;
+    case 2:
+      text = "己方已拒绝";
+      break;
+    case 3:
+      text = "己方挂断";
+      break;
+    case 4:
+      text = `收到 ${senderUserId} 的音视频邀请, 但己方忙碌中, 不处理`;
+      break;
+    case 5:
+      text = "己方未接听";
+      break;
+    default:
+      text = "未知原因";
+  }
+  return text;
+}
+
+function mediaTypeToTalkType(mediaType) {
+  return mediaType === MediaType.MEDIA_AUDIO ? 0 : 1;
+}
+
+var commandEvents = {
+  // 监听其他人邀请自己
+  InviteMessage: function (message, context) {
+    var conversationType =
+      message.conversationType === ConversationType.PRIVATE ? "单聊" : "群聊";
+    context.$message(
+      `${message.senderUserId} 邀请您进行${
+        CallName[message.content.mediaType]
+      }通话(${conversationType})`
+    );
+    context.callInfo = messageToCallInfo(message);
+    context.callStep = CallStep.INVITED_TO_ANSWER;
+  },
+  MemberModifyMessage: function (message, context) {
+    if (message.content.inviteUserIds.indexOf(context.selfUserId) !== -1) {
+      var conversationType =
+        message.conversationType === ConversationType.PRIVATE ? "单聊" : "群聊";
+      context.$message(
+        `${message.senderUserId} 邀请您进行${
+          CallName[message.content.mediaType]
+        }通话(${conversationType})`
+      );
+      context.callInfo = messageToCallInfo(message);
+      context.callStep = CallStep.INVITED_TO_ANSWER;
+    }
+  },
+  HungupMessage: function (message, context) {
+    var reason = getHungupReason(message.content.reason, message);
+    context.$message(reason);
+    var params = {
+      conversationType: message.conversationType,
+      targetId: message.targetId,
+    };
+    isAutoClose = true;
+    if (message.content.reason) {
+      RongCallLib.hungup(params, function (error) {
+        // 置为最初的准备拨打状态
+        context.callStep = CallStep.READY_TO_CALL;
+      });
+    }
+  },
+  MediaModifyMessage: function (message, context) {
+    var senderUserId = message.senderUserId,
+      mediaType = message.content.mediaType;
+    context.userList.forEach(function (user) {
+      if (user.userId === senderUserId) {
+        user.talkType = mediaTypeToTalkType(mediaType);
+      }
+    });
+  },
+  SummaryMessage: function (message, context) {
+    // 每次拨通或者挂断都会触发此方法
+    var status = message.content.status;
+
+    if (!isAutoClose) {
+      var promptText = getSummaryText(status, message);
+      context.$message(promptText);
+      if (status === 5) {
+        // 自己未接听, 回到初始状态
+        context.callStep = CallStep.READY_TO_CALL;
+      }
+    }
+
+    if (status === 15) {
+      context.callStep = CallStep.READY_TO_CALL;
+    }
+  },
+};
+
+var videoChangedEvents = {
+  added: function (detail, context) {
+    context.userList.push(detail);
+  },
+  removed: function (detail, context) {
+    context.userList = utils.removeArray(detail, context.userList, "userId");
+  },
+  leave: function (detail, context) {
+    context.userList = [];
+  },
+};
+
+async function getMembers(currentUserList, selfUserId) {
+  let members = await getPeoplesMembers();
+  console.log("members", members);
+  members = members.filter(function (user) {
+    var currentUserIds = currentUserList.map(function (user) {
+      return user.id || user.userId;
+    });
+    return user.id !== selfUserId && currentUserIds.indexOf(user.id) === -1;
+  });
+  console.log("members", members);
+  return win.Promise.resolve(members);
+}
+
+function call(callParams) {
+  var context = this;
+  RongCallLib.call(callParams, function (error) {
+    // 置为通话中状态
+    context.callStep = error ? context.callStep : CallStep.CALLING;
+  });
+  context.callInfo = callParams;
+}
+
+function accept() {
+  var context = this;
+  var callInfo = context.callInfo; // callInfo 在监听到 InviteMessage 时赋值, 格式见 messageToCallInfo 方法
+  RongCallLib.accept(callInfo, function (error) {
+    // 置为通话中状态
+    context.callStep = error ? context.callStep : CallStep.CALLING;
+  });
+}
+
+function invite() {
+  var context = this;
+  var callInfo = context.callInfo,
+    inviteParams = {
+      conversationType: ConversationType.GROUP,
+      targetId: callInfo.targetId,
+      inviteUserIds: [],
+      mediaType: callInfo.mediaType,
+    };
+  getMembers(context.userList, context.selfUserId)
+    .then(function (members) {
+      dialog.selectUser({
+        userList: members,
+        confirmed: function (selectedUserList) {
+          var selectedIds = selectedUserList.map(function (user) {
+            return user.id;
+          });
+          inviteParams.inviteUserIds = selectedIds;
+          RongCallLib.invite(inviteParams);
+        },
+      });
+    })
+    .catch(function () {
+      context.$message("获取群组成员失败");
+    });
+}
+
+function reject() {
+  var context = this;
+  var callInfo = context.callInfo; // callInfo 在监听到 InviteMessage 时赋值, 格式见 messageToCallInfo 方法
+  RongCallLib.reject(callInfo, function (error) {
+    // 置为最初的准备拨打状态
+    context.callStep = error ? context.callStep : CallStep.READY_TO_CALL;
+  });
+}
+
+function hungup() {
+  var context = this;
+  var callInfo = context.callInfo;
+  RongCallLib.hungup(callInfo, function (error) {
+    // 置为最初的准备拨打状态
+    context.callStep = error ? context.callStep : CallStep.READY_TO_CALL;
+  });
+}
+
+function mute() {
+  var isMuted = this.isMuted;
+  var event = isMuted ? RongCallLib.unmute : RongCallLib.mute;
+  event();
+  this.isMuted = !isMuted;
+}
+
+function setVideo() {
+  var callInfo = this.callInfo,
+    mediaType = callInfo.mediaType;
+  var event =
+    mediaType === MediaType.MEDIA_AUDIO
+      ? RongCallLib.audioToVideo
+      : RongCallLib.videoToAudio;
+  event();
+  this.callInfo.mediaType =
+    mediaType === MediaType.MEDIA_AUDIO
+      ? MediaType.MEDIA_VEDIO
+      : MediaType.MEDIA_AUDIO;
+}
+
+export default {
+  name: "rong-template-call",
+  props: ["partentInfo"],
+  data() {
+    return {
+      userList: [],
+      selectUserId: "",
+      selectUserShow: true,
+      userId: this.partentInfo.userId ? this.partentInfo.userId : "PCUser",
+      params: "",
+      callStep: CallStep.READY_TO_CALL,
+      callType: ConversationType.PRIVATE, // 通话类型, 默认为单聊
+      /**
+       * 通话信息. 给 callInfo 赋值的地方有:
+       * 1. 发送 call 成功后, 存储当前通话信息
+       * 2. 接收到 InviteMessage 后, 存储通话信息
+       */
+      callInfo: {},
+      targetId: "",
+      isMuted: false,
+      dialogVisible: false,
+      callBool: false,
+      checkAll: false,
+      checkedCities: [],
+      cities: [],
+      isIndeterminate: true,
+    };
+  },
+  directives: {
+    video: function (el, binding) {
+      var user = binding.value;
+      var video = user.data;
+      el.appendChild(video);
+      video.play();
+    },
+  },
+  computed: {
+    CallStep: function () {
+      return CallStep;
+    },
+    // 大窗口用户
+    maxUser: function () {
+      var context = this;
+      var maxUser;
+      context.userList.forEach(function (user) {
+        if (user.userId === context.selfUserId) {
+          maxUser = user;
+        }
+      });
+      if (maxUser) {
+        maxUser.talkType = mediaTypeToTalkType(context.callInfo.mediaType);
+      }
+      return maxUser;
+    },
+    // 小窗口用户列表
+    minUserList: function () {
+      var context = this,
+        maxUser = context.maxUser || {};
+      return context.userList.filter(function (user) {
+        return user.userId !== maxUser.userId;
+      });
+    },
+    selfUserId: function () {
+      return this.partentInfo.userId;
+    },
+  },
+  methods: {
+    async test() {
+      let { members } = await getPeoplesMembers();
+      let newMemers = [];
+      members = members.map((items) => {
+        if (items.id !== this.targetId) {
+          newMemers.push(items.id || items.userId);
+        }
+      });
+      this.cities = newMemers;
+      this.dialogVisible = true;
+    },
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? this.cities : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.cities.length;
+    },
+    sureMemer() {
+      // 群聊
+      var context = this;
+      var params = context.params,
+        groupId = params.groupId;
+
+      var callParams = {
+        conversationType: ConversationType.GROUP,
+        targetId: groupId,
+        inviteUserIds: [],
+        mediaType: mediaType,
+      };
+      getMembers(context.userList, context.selfUserId)
+        .then(function (members) {
+          dialog.selectUser({
+            userList: members,
+            confirmed: function (selectedUserList) {
+              var selectedIds = selectedUserList.map(function (user) {
+                return user.id;
+              });
+              callParams.inviteUserIds = selectedIds;
+              context.call(callParams);
+            },
+          });
+        })
+        .catch(function () {
+          context.$message("获取群组成员失败");
+        });
+    },
+    inputCall(bool) {
+      // 输入用户id
+      var targetId = this.partentInfo.phone || "";
+
+      if (targetId !== "") {
+        // url中有参数phone，则进行直接呼叫用户
+        this.callBool = bool;
+        this.startCall(bool);
+        return false;
+      }
+
+      this.$prompt("请输入用户id", "温馨提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputErrorMessage: "用户id",
+      }).then(({ value }) => {
+        // 用户id
+        this.targetId = value;
+        this.callBool = bool;
+        this.startCall();
+      });
+    },
+    /**
+     * @param {boolean} isOnlyAudio 是否仅以音频发起
+     */
+    startCall: function (isOnlyAudio) {
+      var mediaType = isOnlyAudio
+        ? MediaType.MEDIA_AUDIO
+        : MediaType.MEDIA_VEDIO;
+      if (this.callType == ConversationType.GROUP) {
+        this.startGroupCall(mediaType);
+      } else {
+        // 视频
+        this.startPrivateCall(mediaType);
+      }
+    },
+    startPrivateCall: function (mediaType) {
+      var targetId = this.partentInfo.phone || "";
+      if (targetId === "") {
+        targetId = this.targetId;
+      }
+
+      targetId &&
+        this.call({
+          conversationType: ConversationType.PRIVATE,
+          targetId: targetId,
+          inviteUserIds: [targetId],
+          mediaType: mediaType,
+        });
+    },
+    startGroupCall: function (mediaType) {
+      var context = this;
+      var params = context.$route.params,
+        groupId = params.groupId;
+
+      var callParams = {
+        conversationType: ConversationType.GROUP,
+        targetId: groupId,
+        inviteUserIds: [],
+        mediaType: mediaType,
+      };
+      getMembers(context.userList, context.selfUserId)
+        .then(function (members) {
+          dialog.selectUser({
+            userList: members,
+            confirmed: function (selectedUserList) {
+              var selectedIds = selectedUserList.map(function (user) {
+                return user.id;
+              });
+              callParams.inviteUserIds = selectedIds;
+              context.call(callParams);
+            },
+          });
+        })
+        .catch(function () {
+          context.$message("获取群组成员失败");
+        });
+    },
+    async login(callBack) {
+      var userId = this.userId;
+      let _this = this;
+      var loginDetail;
+
+      let result = await this.$axios.login({
+        userId,
+      });
+
+      if (result.code !== 200) {
+        _this.$message("登录失败, 请检查 CallLib Demo Server 是否启动");
+      } else {
+        setting.token = result.token;
+        this.targetId = result.userId;
+        loginDetail = result;
+        let RongCall = window.RongCall;
+        RongCall.initIM(setting);
+
+        _this.params = loginDetail;
+        callBack ? callBack(this) : null;
+      }
+    },
+    initLib() {
+      var context = this;
+
+      // 初始化
+      RongCallLib = RongCall.initCallLib(context.selfUserId);
+      // 注册命令(消息)监听
+      RongCallLib.commandWatch(function (message) {
+        var event = commandEvents[message.messageType];
+        event && event(message, context);
+        console.log("received message", message);
+      });
+
+      // 注册音视频节点监听
+      RongCallLib.videoWatch(function (result) {
+        var event = videoChangedEvents[result.type];
+        event && event(result, context);
+        console.log("video changed", result);
+      });
+
+      let phone = this.partentInfo.phone || "";
+
+      if (phone !== "") {
+        // 默认视频通话
+        context.$message("正在拨通视频，请稍后...");
+        setTimeout(() => {
+          this.startCall(false);
+        }, 2000);
+      }
+    },
+    call: call,
+    accept: accept,
+    invite: invite,
+    reject: reject,
+    hungup: hungup,
+    mute: mute,
+    setVideo: setVideo,
+  },
+  mounted() {
+    console.log(this.partentInfo);
+    let params = this.partentInfo;
+    // 原始代码登录 获取到的数据
+    console.log("原始登录:", params);
+    params = Object.keys(params);
+    if (params.length === 0) {
+      // 有phone，直接进行拨打
+      this.login(this.initLib);
+    } else {
+      // 通过login页面进入的场景
+      this.initLib();
+    }
+  },
+};
+</script>
+
+<style scoped>
+</style>

diff --git a/src/components/call.vue b/src/components/call.vue
new file mode 100644
index 0000000..f9b4849
--- /dev/null
+++ b/src/components/call.vue
@@ -0,0 +1,657 @@
+<!-- 呼叫页面 -->
+<template>
+  <div id="rong-template-call">
+    <div class="rong-box rong-call-box">
+      <div class="rong-info">
+        <p>
+          当前拨号用户:
+          <span>{{ partentInfo.userId }}</span>
+        </p>
+        <!-- <p>群组 id: <span>{{params.groupId}}- {{$route.params.groupId}}</span></p> -->
+        <!-- <el-button @click="test()">群聊测试</el-button> -->
+      </div>
+      <div class="rong-type-box" style="display: none">
+        <!-- <div class="rong-type-box" v-if="callStep === CallStep.READY_TO_CALL"> -->
+        <label for="">通话类型: </label>
+        <select name="" id="" v-model="callType">
+          <option value="1">单人</option>
+          <option value="3">群组</option>
+        </select>
+      </div>
+      <div class="rong-video-box">
+        <div class="rong-video-list">
+          <div
+            class="rong-video-min"
+            v-for="user in minUserList"
+            v-video="user"
+            :talktype="user.talkType"
+          ></div>
+        </div>
+        <div
+          v-if="maxUser"
+          class="rong-video-max"
+          v-video="maxUser"
+          :talktype="maxUser.talkType"
+        ></div>
+      </div>
+      <div class="rong-call-btns">
+        <template v-if="callStep === CallStep.READY_TO_CALL">
+          <button
+            class="rong-call-video"
+            title="点击进行视频通话"
+            @click="inputCall(false)"
+          ></button>
+          <!-- <button
+            class="rong-call-audio"
+            title="点击进行音频通话"
+            @click="inputCall(true)"
+          ></button> -->
+        </template>
+        <template v-else-if="callStep === CallStep.CALLING">
+          <button
+            class="rong-call-hungup"
+            title="点击挂断"
+            @click="hungup"
+          ></button>
+          <button
+            v-if="callType == 3"
+            class="rong-call-invite"
+            title="点击邀请"
+            @click="invite"
+          ></button>
+          <button
+            class="rong-call-mute"
+            title="点击开启/关闭音频"
+            :closed="isMuted"
+            @click="mute"
+          ></button>
+          <button
+            class="rong-call-video"
+            closed
+            title="点击开启/关闭视频"
+            :closed="callInfo.mediaType !== 2"
+            @click="setVideo"
+          ></button>
+        </template>
+        <template v-else-if="callStep === CallStep.INVITED_TO_ANSWER">
+          <button class="rong-call-accept" @click="accept"></button>
+          <button class="rong-call-hungup" @click="reject"></button>
+        </template>
+      </div>
+    </div>
+
+    <!-- 群聊 -->
+    <el-dialog title="群聊用户" :visible.sync="dialogVisible" width="30%">
+      <el-checkbox
+        :indeterminate="isIndeterminate"
+        v-model="checkAll"
+        @change="handleCheckAllChange"
+        >全选当前用户
+      </el-checkbox>
+      <div style="margin: 15px 0"></div>
+
+      <el-checkbox-group
+        v-model="checkedCities"
+        @change="handleCheckedCitiesChange"
+      >
+        <el-checkbox v-for="userId in cities" :label="userId" :key="userId">{{
+          userId
+        }}</el-checkbox>
+      </el-checkbox-group>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="sureMemer()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getPeoplesMembers } from "@/services";
+var RongIMLib = window.RongIMLib,
+  RongCallLib = window.RongCallLib,
+  win = window,
+  RongCall = window.RongCall,
+  setting = RongCall.setting,
+  utils = RongCall.utils;
+
+var dialog = RongCall.dialog,
+  ConversationType = RongIMLib.CONVERSATION_TYPE,
+  MediaType = {
+    MEDIA_AUDIO: 1,
+    MEDIA_VEDIO: 2,
+    1: "MEDIA_AUDIO",
+    2: "MEDIA_VEDIO",
+  };
+var isAutoClose = false;
+// 通话阶段
+var CallStep = {
+  READY_TO_CALL: 1, // 准备拨打(最初状态)
+  INVITED_TO_ANSWER: 2, // 被邀请接听, 其他人拨打, 己方选择接听或拒绝
+  CALLING: 3, // 拨打中
+};
+
+var CallName = {};
+CallName[MediaType.MEDIA_AUDIO] = "语音";
+CallName[MediaType.MEDIA_VEDIO] = "视频";
+
+// 将消息转化为调用 CallLib 需要参数
+function messageToCallInfo(message) {
+  return {
+    conversationType: message.conversationType,
+    targetId: message.targetId,
+    mediaType: message.content.mediaType,
+  };
+}
+
+// 获取挂断原因
+function getHungupReason(reason, message) {
+  var reasonPrompt;
+  var senderUserId = message.senderUserId;
+  switch (reason) {
+    case 8:
+      reasonPrompt = "其他设备已处理";
+      break;
+    case 11:
+      reasonPrompt = `${senderUserId} 已取消`;
+      break;
+    case 12:
+      reasonPrompt = `${senderUserId} 已拒绝`;
+      break;
+    case 13:
+      reasonPrompt = `${senderUserId} 已挂断`;
+      break;
+    case 14:
+      reasonPrompt = `${senderUserId} 忙碌中`;
+      break;
+    case 15:
+      reasonPrompt = `${senderUserId} 未接听`;
+      break;
+    default:
+      reasonPrompt = "未知原因挂断";
+  }
+  return reasonPrompt;
+}
+
+// 己方挂断后的提示
+function getSummaryText(status, message) {
+  var senderUserId = message.senderUserId;
+  var text;
+  switch (status) {
+    case 1:
+      text = "己方已取消";
+      break;
+    case 2:
+      text = "己方已拒绝";
+      break;
+    case 3:
+      text = "己方挂断";
+      break;
+    case 4:
+      text = `收到 ${senderUserId} 的音视频邀请, 但己方忙碌中, 不处理`;
+      break;
+    case 5:
+      text = "己方未接听";
+      break;
+    default:
+      text = "未知原因";
+  }
+  return text;
+}
+
+function mediaTypeToTalkType(mediaType) {
+  return mediaType === MediaType.MEDIA_AUDIO ? 0 : 1;
+}
+
+var commandEvents = {
+  // 监听其他人邀请自己
+  InviteMessage: function (message, context) {
+    var conversationType =
+      message.conversationType === ConversationType.PRIVATE ? "单聊" : "群聊";
+    context.$message(
+      `${message.senderUserId} 邀请您进行${
+        CallName[message.content.mediaType]
+      }通话(${conversationType})`
+    );
+    context.callInfo = messageToCallInfo(message);
+    context.callStep = CallStep.INVITED_TO_ANSWER;
+  },
+  MemberModifyMessage: function (message, context) {
+    if (message.content.inviteUserIds.indexOf(context.selfUserId) !== -1) {
+      var conversationType =
+        message.conversationType === ConversationType.PRIVATE ? "单聊" : "群聊";
+      context.$message(
+        `${message.senderUserId} 邀请您进行${
+          CallName[message.content.mediaType]
+        }通话(${conversationType})`
+      );
+      context.callInfo = messageToCallInfo(message);
+      context.callStep = CallStep.INVITED_TO_ANSWER;
+    }
+  },
+  HungupMessage: function (message, context) {
+    var reason = getHungupReason(message.content.reason, message);
+    context.$message(reason);
+    var params = {
+      conversationType: message.conversationType,
+      targetId: message.targetId,
+    };
+    isAutoClose = true;
+    if (message.content.reason) {
+      RongCallLib.hungup(params, function (error) {
+        // 置为最初的准备拨打状态
+        context.callStep = CallStep.READY_TO_CALL;
+      });
+    }
+  },
+  MediaModifyMessage: function (message, context) {
+    var senderUserId = message.senderUserId,
+      mediaType = message.content.mediaType;
+    context.userList.forEach(function (user) {
+      if (user.userId === senderUserId) {
+        user.talkType = mediaTypeToTalkType(mediaType);
+      }
+    });
+  },
+  SummaryMessage: function (message, context) {
+    // 每次拨通或者挂断都会触发此方法
+    var status = message.content.status;
+
+    if (!isAutoClose) {
+      var promptText = getSummaryText(status, message);
+      context.$message(promptText);
+      if (status === 5) {
+        // 自己未接听, 回到初始状态
+        context.callStep = CallStep.READY_TO_CALL;
+      }
+    }
+
+    if (status === 15) {
+      context.callStep = CallStep.READY_TO_CALL;
+    }
+  },
+};
+
+var videoChangedEvents = {
+  added: function (detail, context) {
+    context.userList.push(detail);
+  },
+  removed: function (detail, context) {
+    context.userList = utils.removeArray(detail, context.userList, "userId");
+  },
+  leave: function (detail, context) {
+    context.userList = [];
+  },
+};
+
+async function getMembers(currentUserList, selfUserId) {
+  let members = await getPeoplesMembers();
+  console.log("members", members);
+  members = members.filter(function (user) {
+    var currentUserIds = currentUserList.map(function (user) {
+      return user.id || user.userId;
+    });
+    return user.id !== selfUserId && currentUserIds.indexOf(user.id) === -1;
+  });
+  console.log("members", members);
+  return win.Promise.resolve(members);
+}
+
+function call(callParams) {
+  var context = this;
+  RongCallLib.call(callParams, function (error) {
+    // 置为通话中状态
+    context.callStep = error ? context.callStep : CallStep.CALLING;
+  });
+  context.callInfo = callParams;
+}
+
+function accept() {
+  var context = this;
+  var callInfo = context.callInfo; // callInfo 在监听到 InviteMessage 时赋值, 格式见 messageToCallInfo 方法
+  RongCallLib.accept(callInfo, function (error) {
+    // 置为通话中状态
+    context.callStep = error ? context.callStep : CallStep.CALLING;
+  });
+}
+
+function invite() {
+  var context = this;
+  var callInfo = context.callInfo,
+    inviteParams = {
+      conversationType: ConversationType.GROUP,
+      targetId: callInfo.targetId,
+      inviteUserIds: [],
+      mediaType: callInfo.mediaType,
+    };
+  getMembers(context.userList, context.selfUserId)
+    .then(function (members) {
+      dialog.selectUser({
+        userList: members,
+        confirmed: function (selectedUserList) {
+          var selectedIds = selectedUserList.map(function (user) {
+            return user.id;
+          });
+          inviteParams.inviteUserIds = selectedIds;
+          RongCallLib.invite(inviteParams);
+        },
+      });
+    })
+    .catch(function () {
+      context.$message("获取群组成员失败");
+    });
+}
+
+function reject() {
+  var context = this;
+  var callInfo = context.callInfo; // callInfo 在监听到 InviteMessage 时赋值, 格式见 messageToCallInfo 方法
+  RongCallLib.reject(callInfo, function (error) {
+    // 置为最初的准备拨打状态
+    context.callStep = error ? context.callStep : CallStep.READY_TO_CALL;
+  });
+}
+
+function hungup() {
+  var context = this;
+  var callInfo = context.callInfo;
+  RongCallLib.hungup(callInfo, function (error) {
+    // 置为最初的准备拨打状态
+    context.callStep = error ? context.callStep : CallStep.READY_TO_CALL;
+  });
+}
+
+function mute() {
+  var isMuted = this.isMuted;
+  var event = isMuted ? RongCallLib.unmute : RongCallLib.mute;
+  event();
+  this.isMuted = !isMuted;
+}
+
+function setVideo() {
+  var callInfo = this.callInfo,
+    mediaType = callInfo.mediaType;
+  var event =
+    mediaType === MediaType.MEDIA_AUDIO
+      ? RongCallLib.audioToVideo
+      : RongCallLib.videoToAudio;
+  event();
+  this.callInfo.mediaType =
+    mediaType === MediaType.MEDIA_AUDIO
+      ? MediaType.MEDIA_VEDIO
+      : MediaType.MEDIA_AUDIO;
+}
+
+export default {
+  name: "rong-template-call",
+  props: ["partentInfo"],
+  data() {
+    return {
+      userList: [],
+      selectUserId: "",
+      selectUserShow: true,
+      userId: this.partentInfo.userId ? this.partentInfo.userId : "PCUser",
+      params: "",
+      callStep: CallStep.READY_TO_CALL,
+      callType: ConversationType.PRIVATE, // 通话类型, 默认为单聊
+      /**
+       * 通话信息. 给 callInfo 赋值的地方有:
+       * 1. 发送 call 成功后, 存储当前通话信息
+       * 2. 接收到 InviteMessage 后, 存储通话信息
+       */
+      callInfo: {},
+      targetId: "",
+      isMuted: false,
+      dialogVisible: false,
+      callBool: false,
+      checkAll: false,
+      checkedCities: [],
+      cities: [],
+      isIndeterminate: true,
+    };
+  },
+  directives: {
+    video: function (el, binding) {
+      var user = binding.value;
+      var video = user.data;
+      el.appendChild(video);
+      video.play();
+    },
+  },
+  computed: {
+    CallStep: function () {
+      return CallStep;
+    },
+    // 大窗口用户
+    maxUser: function () {
+      var context = this;
+      var maxUser;
+      context.userList.forEach(function (user) {
+        if (user.userId === context.selfUserId) {
+          maxUser = user;
+        }
+      });
+      if (maxUser) {
+        maxUser.talkType = mediaTypeToTalkType(context.callInfo.mediaType);
+      }
+      return maxUser;
+    },
+    // 小窗口用户列表
+    minUserList: function () {
+      var context = this,
+        maxUser = context.maxUser || {};
+      return context.userList.filter(function (user) {
+        return user.userId !== maxUser.userId;
+      });
+    },
+    selfUserId: function () {
+      return this.partentInfo.userId;
+    },
+  },
+  methods: {
+    async test() {
+      let { members } = await getPeoplesMembers();
+      let newMemers = [];
+      members = members.map((items) => {
+        if (items.id !== this.targetId) {
+          newMemers.push(items.id || items.userId);
+        }
+      });
+      this.cities = newMemers;
+      this.dialogVisible = true;
+    },
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? this.cities : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.cities.length;
+    },
+    sureMemer() {
+      // 群聊
+      var context = this;
+      var params = context.params,
+        groupId = params.groupId;
+
+      var callParams = {
+        conversationType: ConversationType.GROUP,
+        targetId: groupId,
+        inviteUserIds: [],
+        mediaType: mediaType,
+      };
+      getMembers(context.userList, context.selfUserId)
+        .then(function (members) {
+          dialog.selectUser({
+            userList: members,
+            confirmed: function (selectedUserList) {
+              var selectedIds = selectedUserList.map(function (user) {
+                return user.id;
+              });
+              callParams.inviteUserIds = selectedIds;
+              context.call(callParams);
+            },
+          });
+        })
+        .catch(function () {
+          context.$message("获取群组成员失败");
+        });
+    },
+    inputCall(bool) {
+      // 输入用户id
+      var targetId = this.partentInfo.phone || "";
+
+      if (targetId !== "") {
+        // url中有参数phone，则进行直接呼叫用户
+        this.callBool = bool;
+        this.startCall(bool);
+        return false;
+      }
+
+      this.$prompt("请输入用户id", "温馨提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputErrorMessage: "用户id",
+      }).then(({ value }) => {
+        // 用户id
+        this.targetId = value;
+        this.callBool = bool;
+        this.startCall();
+      });
+    },
+    /**
+     * @param {boolean} isOnlyAudio 是否仅以音频发起
+     */
+    startCall: function (isOnlyAudio) {
+      var mediaType = isOnlyAudio
+        ? MediaType.MEDIA_AUDIO
+        : MediaType.MEDIA_VEDIO;
+      if (this.callType == ConversationType.GROUP) {
+        this.startGroupCall(mediaType);
+      } else {
+        // 视频
+        this.startPrivateCall(mediaType);
+      }
+    },
+    startPrivateCall: function (mediaType) {
+      var targetId = this.partentInfo.phone || "";
+      if (targetId === "") {
+        targetId = this.targetId;
+      }
+
+      targetId &&
+        this.call({
+          conversationType: ConversationType.PRIVATE,
+          targetId: targetId,
+          inviteUserIds: [targetId],
+          mediaType: mediaType,
+        });
+    },
+    startGroupCall: function (mediaType) {
+      var context = this;
+      var params = context.$route.params,
+        groupId = params.groupId;
+
+      var callParams = {
+        conversationType: ConversationType.GROUP,
+        targetId: groupId,
+        inviteUserIds: [],
+        mediaType: mediaType,
+      };
+      getMembers(context.userList, context.selfUserId)
+        .then(function (members) {
+          dialog.selectUser({
+            userList: members,
+            confirmed: function (selectedUserList) {
+              var selectedIds = selectedUserList.map(function (user) {
+                return user.id;
+              });
+              callParams.inviteUserIds = selectedIds;
+              context.call(callParams);
+            },
+          });
+        })
+        .catch(function () {
+          context.$message("获取群组成员失败");
+        });
+    },
+    async login(callBack) {
+      var userId = this.userId;
+      let _this = this;
+      var loginDetail;
+
+      let result = await this.$axios.login({
+        userId,
+      });
+
+      if (result.code !== 200) {
+        _this.$message("登录失败, 请检查 CallLib Demo Server 是否启动");
+      } else {
+        setting.token = result.token;
+        this.targetId = result.userId;
+        loginDetail = result;
+        let RongCall = window.RongCall;
+        RongCall.initIM(setting);
+
+        _this.params = loginDetail;
+        callBack ? callBack(this) : null;
+      }
+    },
+    initLib() {
+      var context = this;
+
+      // 初始化
+      RongCallLib = RongCall.initCallLib(context.selfUserId);
+      // 注册命令(消息)监听
+      RongCallLib.commandWatch(function (message) {
+        var event = commandEvents[message.messageType];
+        event && event(message, context);
+        console.log("received message", message);
+      });
+
+      // 注册音视频节点监听
+      RongCallLib.videoWatch(function (result) {
+        var event = videoChangedEvents[result.type];
+        event && event(result, context);
+        console.log("video changed", result);
+      });
+
+      let phone = this.partentInfo.phone || "";
+
+      if (phone !== "") {
+        // 默认视频通话
+        context.$message("正在拨通视频，请稍后...");
+        setTimeout(() => {
+          this.startCall(false);
+        }, 2000);
+      }
+    },
+    call: call,
+    accept: accept,
+    invite: invite,
+    reject: reject,
+    hungup: hungup,
+    mute: mute,
+    setVideo: setVideo,
+  },
+  mounted() {
+    console.log(this.partentInfo);
+    let params = this.partentInfo;
+    // 原始代码登录 获取到的数据
+    console.log("原始登录:", params);
+    params = Object.keys(params);
+    if (params.length === 0) {
+      // 有phone，直接进行拨打
+      this.login(this.initLib);
+    } else {
+      // 通过login页面进入的场景
+      this.initLib();
+    }
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/FangXunZhiHui/index/emergencycommand.vue b/src/views/FangXunZhiHui/index/emergencycommand.vue
index 540ecb6..990349e 100644
--- a/src/views/FangXunZhiHui/index/emergencycommand.vue
+++ b/src/views/FangXunZhiHui/index/emergencycommand.vue
@@ -1,9 +1,12 @@
 <template>
   <div id="MapBOXmap">
-    <swqj3Dmap ref="swqj3Dmap"/>
-    <!-- <div id="map" ref="rootmap">
-      <div id="SHIPINTONGHUA" @click="spthClick('15629078847')">点击进行视频通话</div>
-    </div> -->
+    <!-- <Swqj3Dmap ref="swqj3Dmap" /> -->
+    <div id="map" ref="rootmap">
+      <div id="SHIPINTONGHUA" @click="spthClick('15629078847')">
+        点击进行视频通话
+      </div>
+    </div>
+    <!-- <CesiumCom></CesiumCom> -->
     <!-- 视频对话 -->
     <el-dialog
       title="视频对话"
@@ -19,27 +22,22 @@
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)"
       >
-        <router-view ref="TongHua"></router-view>
+        <CesiumCom ref="TongHua"></CesiumCom>
+        <!-- <router-view ref="TongHua"></router-view> -->
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import swqj3Dmap from "@/components/swqj3Dmap.vue";
+import CesiumCom from "@/components/call.vue";
+// import CesiumCom from "@/views/cesiumCom/index.vue";
+
 var setting = window.RongCall.setting;
 
-import "ol/ol.css";
-import { Map, View } from "ol";
-import XYZ from "ol/source/XYZ";
-import TileLayer from "ol/layer/Tile";
-
-import SourceVector from "ol/source/Vector";
-import LayerVector from "ol/layer/Vector";
-import { defaults } from "ol/control";
 export default {
   components: {
-   swqj3Dmap
+    CesiumCom,
   },
   data() {
     return {
@@ -55,64 +53,9 @@
     window.spthClick = this.spthClick;
   },
 
-  mounted() {
-    // // 时间未改变且因子也没变化，只需要重新绘制
-    // this.$nextTick(function () {
-    //   setTimeout(() => {
-    //     this.map.updateSize();
-    //   }, 500);
-    // });
-
-    // var mapcontainer = this.$refs.rootmap;
-    // this.map = new Map({
-    //   controls: defaults({
-    //     attribution: false,
-    //     zoom: false,
-    //     rotate: false,
-    //   }),
-
-    //   target: mapcontainer,
-    //   layers: [
-    //     new TileLayer({
-    //       source: new XYZ({
-    //         url: "https://api.mapbox.com/styles/v1/raomap/ckjjpsibk0gj719ppklycwqxg/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicmFvbWFwIiwiYSI6ImNqdTEwY2F1YjBtOWs0NG1lZGtmcTA1a2kifQ.CqXTzbSSoQmJmoHKeIdi9A",
-    //       }),
-    //     }),
-    //   ],
-    //   view: new View({
-    //     projection: "EPSG:4326", //使用这个坐标系
-    //     center: [114.127, 32.068], //信阳
-    //     zoom: 14,
-    //   }),
-    // });
-
-    // //添加矢量图层
-    // this.editSource = new SourceVector({
-    //   wrapX: false,
-    // });
-
-    // this.editVectorLayer = new LayerVector({
-    //   source: this.editSource,
-    //   zIndex: 99999,
-    // });
-
-    // this.map.addLayer(this.editVectorLayer);
-
-    // //添加车辆及路线矢量图层
-    // this.carSource = new SourceVector({
-    //   wrapX: false,
-    // });
-
-    // this.carVectorLayer = new LayerVector({
-    //   source: this.editSource,
-    //   zIndex: 99999,
-    // });
-
-    // this.map.addLayer(this.carVectorLayer);
-  },
+  mounted() {},
   beforeDestroy() {},
   methods: {
-
     // 前端代码======================================================A
     // 关闭弹窗
     closeDialog() {
@@ -147,19 +90,19 @@
         let RongCall = window.RongCall;
         RongCall.initIM(setting);
 
-        this.$router.push({
-          path: "/FangXunZhiHui/emergencycommand/call",
-          query: {
-            phone: peopleNo,
-            userId: PCUser,
-          },
-        });
+        // this.$router.push({
+        //   path: "/FangXunZhiHui/emergencycommand/call",
+        //   query: {
+        //     phone: peopleNo,
+        //     userId: PCUser,
+        //   },
+        // });
 
         this.$refs.TongHua.inputCall(false);
       }
     },
     // 视频通话功能----------------------------------------------------------B
-    
+
     // 前端代码======================================================E
   },
 };

diff --git a/src/components/call.vue b/src/components/call.vue
new file mode 100644
index 0000000..f9b4849
--- /dev/null
+++ b/src/components/call.vue
@@ -0,0 +1,657 @@
+<!-- 呼叫页面 -->
+<template>
+  <div id="rong-template-call">
+    <div class="rong-box rong-call-box">
+      <div class="rong-info">
+        <p>
+          当前拨号用户:
+          <span>{{ partentInfo.userId }}</span>
+        </p>
+        <!-- <p>群组 id: <span>{{params.groupId}}- {{$route.params.groupId}}</span></p> -->
+        <!-- <el-button @click="test()">群聊测试</el-button> -->
+      </div>
+      <div class="rong-type-box" style="display: none">
+        <!-- <div class="rong-type-box" v-if="callStep === CallStep.READY_TO_CALL"> -->
+        <label for="">通话类型: </label>
+        <select name="" id="" v-model="callType">
+          <option value="1">单人</option>
+          <option value="3">群组</option>
+        </select>
+      </div>
+      <div class="rong-video-box">
+        <div class="rong-video-list">
+          <div
+            class="rong-video-min"
+            v-for="user in minUserList"
+            v-video="user"
+            :talktype="user.talkType"
+          ></div>
+        </div>
+        <div
+          v-if="maxUser"
+          class="rong-video-max"
+          v-video="maxUser"
+          :talktype="maxUser.talkType"
+        ></div>
+      </div>
+      <div class="rong-call-btns">
+        <template v-if="callStep === CallStep.READY_TO_CALL">
+          <button
+            class="rong-call-video"
+            title="点击进行视频通话"
+            @click="inputCall(false)"
+          ></button>
+          <!-- <button
+            class="rong-call-audio"
+            title="点击进行音频通话"
+            @click="inputCall(true)"
+          ></button> -->
+        </template>
+        <template v-else-if="callStep === CallStep.CALLING">
+          <button
+            class="rong-call-hungup"
+            title="点击挂断"
+            @click="hungup"
+          ></button>
+          <button
+            v-if="callType == 3"
+            class="rong-call-invite"
+            title="点击邀请"
+            @click="invite"
+          ></button>
+          <button
+            class="rong-call-mute"
+            title="点击开启/关闭音频"
+            :closed="isMuted"
+            @click="mute"
+          ></button>
+          <button
+            class="rong-call-video"
+            closed
+            title="点击开启/关闭视频"
+            :closed="callInfo.mediaType !== 2"
+            @click="setVideo"
+          ></button>
+        </template>
+        <template v-else-if="callStep === CallStep.INVITED_TO_ANSWER">
+          <button class="rong-call-accept" @click="accept"></button>
+          <button class="rong-call-hungup" @click="reject"></button>
+        </template>
+      </div>
+    </div>
+
+    <!-- 群聊 -->
+    <el-dialog title="群聊用户" :visible.sync="dialogVisible" width="30%">
+      <el-checkbox
+        :indeterminate="isIndeterminate"
+        v-model="checkAll"
+        @change="handleCheckAllChange"
+        >全选当前用户
+      </el-checkbox>
+      <div style="margin: 15px 0"></div>
+
+      <el-checkbox-group
+        v-model="checkedCities"
+        @change="handleCheckedCitiesChange"
+      >
+        <el-checkbox v-for="userId in cities" :label="userId" :key="userId">{{
+          userId
+        }}</el-checkbox>
+      </el-checkbox-group>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="sureMemer()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getPeoplesMembers } from "@/services";
+var RongIMLib = window.RongIMLib,
+  RongCallLib = window.RongCallLib,
+  win = window,
+  RongCall = window.RongCall,
+  setting = RongCall.setting,
+  utils = RongCall.utils;
+
+var dialog = RongCall.dialog,
+  ConversationType = RongIMLib.CONVERSATION_TYPE,
+  MediaType = {
+    MEDIA_AUDIO: 1,
+    MEDIA_VEDIO: 2,
+    1: "MEDIA_AUDIO",
+    2: "MEDIA_VEDIO",
+  };
+var isAutoClose = false;
+// 通话阶段
+var CallStep = {
+  READY_TO_CALL: 1, // 准备拨打(最初状态)
+  INVITED_TO_ANSWER: 2, // 被邀请接听, 其他人拨打, 己方选择接听或拒绝
+  CALLING: 3, // 拨打中
+};
+
+var CallName = {};
+CallName[MediaType.MEDIA_AUDIO] = "语音";
+CallName[MediaType.MEDIA_VEDIO] = "视频";
+
+// 将消息转化为调用 CallLib 需要参数
+function messageToCallInfo(message) {
+  return {
+    conversationType: message.conversationType,
+    targetId: message.targetId,
+    mediaType: message.content.mediaType,
+  };
+}
+
+// 获取挂断原因
+function getHungupReason(reason, message) {
+  var reasonPrompt;
+  var senderUserId = message.senderUserId;
+  switch (reason) {
+    case 8:
+      reasonPrompt = "其他设备已处理";
+      break;
+    case 11:
+      reasonPrompt = `${senderUserId} 已取消`;
+      break;
+    case 12:
+      reasonPrompt = `${senderUserId} 已拒绝`;
+      break;
+    case 13:
+      reasonPrompt = `${senderUserId} 已挂断`;
+      break;
+    case 14:
+      reasonPrompt = `${senderUserId} 忙碌中`;
+      break;
+    case 15:
+      reasonPrompt = `${senderUserId} 未接听`;
+      break;
+    default:
+      reasonPrompt = "未知原因挂断";
+  }
+  return reasonPrompt;
+}
+
+// 己方挂断后的提示
+function getSummaryText(status, message) {
+  var senderUserId = message.senderUserId;
+  var text;
+  switch (status) {
+    case 1:
+      text = "己方已取消";
+      break;
+    case 2:
+      text = "己方已拒绝";
+      break;
+    case 3:
+      text = "己方挂断";
+      break;
+    case 4:
+      text = `收到 ${senderUserId} 的音视频邀请, 但己方忙碌中, 不处理`;
+      break;
+    case 5:
+      text = "己方未接听";
+      break;
+    default:
+      text = "未知原因";
+  }
+  return text;
+}
+
+function mediaTypeToTalkType(mediaType) {
+  return mediaType === MediaType.MEDIA_AUDIO ? 0 : 1;
+}
+
+var commandEvents = {
+  // 监听其他人邀请自己
+  InviteMessage: function (message, context) {
+    var conversationType =
+      message.conversationType === ConversationType.PRIVATE ? "单聊" : "群聊";
+    context.$message(
+      `${message.senderUserId} 邀请您进行${
+        CallName[message.content.mediaType]
+      }通话(${conversationType})`
+    );
+    context.callInfo = messageToCallInfo(message);
+    context.callStep = CallStep.INVITED_TO_ANSWER;
+  },
+  MemberModifyMessage: function (message, context) {
+    if (message.content.inviteUserIds.indexOf(context.selfUserId) !== -1) {
+      var conversationType =
+        message.conversationType === ConversationType.PRIVATE ? "单聊" : "群聊";
+      context.$message(
+        `${message.senderUserId} 邀请您进行${
+          CallName[message.content.mediaType]
+        }通话(${conversationType})`
+      );
+      context.callInfo = messageToCallInfo(message);
+      context.callStep = CallStep.INVITED_TO_ANSWER;
+    }
+  },
+  HungupMessage: function (message, context) {
+    var reason = getHungupReason(message.content.reason, message);
+    context.$message(reason);
+    var params = {
+      conversationType: message.conversationType,
+      targetId: message.targetId,
+    };
+    isAutoClose = true;
+    if (message.content.reason) {
+      RongCallLib.hungup(params, function (error) {
+        // 置为最初的准备拨打状态
+        context.callStep = CallStep.READY_TO_CALL;
+      });
+    }
+  },
+  MediaModifyMessage: function (message, context) {
+    var senderUserId = message.senderUserId,
+      mediaType = message.content.mediaType;
+    context.userList.forEach(function (user) {
+      if (user.userId === senderUserId) {
+        user.talkType = mediaTypeToTalkType(mediaType);
+      }
+    });
+  },
+  SummaryMessage: function (message, context) {
+    // 每次拨通或者挂断都会触发此方法
+    var status = message.content.status;
+
+    if (!isAutoClose) {
+      var promptText = getSummaryText(status, message);
+      context.$message(promptText);
+      if (status === 5) {
+        // 自己未接听, 回到初始状态
+        context.callStep = CallStep.READY_TO_CALL;
+      }
+    }
+
+    if (status === 15) {
+      context.callStep = CallStep.READY_TO_CALL;
+    }
+  },
+};
+
+var videoChangedEvents = {
+  added: function (detail, context) {
+    context.userList.push(detail);
+  },
+  removed: function (detail, context) {
+    context.userList = utils.removeArray(detail, context.userList, "userId");
+  },
+  leave: function (detail, context) {
+    context.userList = [];
+  },
+};
+
+async function getMembers(currentUserList, selfUserId) {
+  let members = await getPeoplesMembers();
+  console.log("members", members);
+  members = members.filter(function (user) {
+    var currentUserIds = currentUserList.map(function (user) {
+      return user.id || user.userId;
+    });
+    return user.id !== selfUserId && currentUserIds.indexOf(user.id) === -1;
+  });
+  console.log("members", members);
+  return win.Promise.resolve(members);
+}
+
+function call(callParams) {
+  var context = this;
+  RongCallLib.call(callParams, function (error) {
+    // 置为通话中状态
+    context.callStep = error ? context.callStep : CallStep.CALLING;
+  });
+  context.callInfo = callParams;
+}
+
+function accept() {
+  var context = this;
+  var callInfo = context.callInfo; // callInfo 在监听到 InviteMessage 时赋值, 格式见 messageToCallInfo 方法
+  RongCallLib.accept(callInfo, function (error) {
+    // 置为通话中状态
+    context.callStep = error ? context.callStep : CallStep.CALLING;
+  });
+}
+
+function invite() {
+  var context = this;
+  var callInfo = context.callInfo,
+    inviteParams = {
+      conversationType: ConversationType.GROUP,
+      targetId: callInfo.targetId,
+      inviteUserIds: [],
+      mediaType: callInfo.mediaType,
+    };
+  getMembers(context.userList, context.selfUserId)
+    .then(function (members) {
+      dialog.selectUser({
+        userList: members,
+        confirmed: function (selectedUserList) {
+          var selectedIds = selectedUserList.map(function (user) {
+            return user.id;
+          });
+          inviteParams.inviteUserIds = selectedIds;
+          RongCallLib.invite(inviteParams);
+        },
+      });
+    })
+    .catch(function () {
+      context.$message("获取群组成员失败");
+    });
+}
+
+function reject() {
+  var context = this;
+  var callInfo = context.callInfo; // callInfo 在监听到 InviteMessage 时赋值, 格式见 messageToCallInfo 方法
+  RongCallLib.reject(callInfo, function (error) {
+    // 置为最初的准备拨打状态
+    context.callStep = error ? context.callStep : CallStep.READY_TO_CALL;
+  });
+}
+
+function hungup() {
+  var context = this;
+  var callInfo = context.callInfo;
+  RongCallLib.hungup(callInfo, function (error) {
+    // 置为最初的准备拨打状态
+    context.callStep = error ? context.callStep : CallStep.READY_TO_CALL;
+  });
+}
+
+function mute() {
+  var isMuted = this.isMuted;
+  var event = isMuted ? RongCallLib.unmute : RongCallLib.mute;
+  event();
+  this.isMuted = !isMuted;
+}
+
+function setVideo() {
+  var callInfo = this.callInfo,
+    mediaType = callInfo.mediaType;
+  var event =
+    mediaType === MediaType.MEDIA_AUDIO
+      ? RongCallLib.audioToVideo
+      : RongCallLib.videoToAudio;
+  event();
+  this.callInfo.mediaType =
+    mediaType === MediaType.MEDIA_AUDIO
+      ? MediaType.MEDIA_VEDIO
+      : MediaType.MEDIA_AUDIO;
+}
+
+export default {
+  name: "rong-template-call",
+  props: ["partentInfo"],
+  data() {
+    return {
+      userList: [],
+      selectUserId: "",
+      selectUserShow: true,
+      userId: this.partentInfo.userId ? this.partentInfo.userId : "PCUser",
+      params: "",
+      callStep: CallStep.READY_TO_CALL,
+      callType: ConversationType.PRIVATE, // 通话类型, 默认为单聊
+      /**
+       * 通话信息. 给 callInfo 赋值的地方有:
+       * 1. 发送 call 成功后, 存储当前通话信息
+       * 2. 接收到 InviteMessage 后, 存储通话信息
+       */
+      callInfo: {},
+      targetId: "",
+      isMuted: false,
+      dialogVisible: false,
+      callBool: false,
+      checkAll: false,
+      checkedCities: [],
+      cities: [],
+      isIndeterminate: true,
+    };
+  },
+  directives: {
+    video: function (el, binding) {
+      var user = binding.value;
+      var video = user.data;
+      el.appendChild(video);
+      video.play();
+    },
+  },
+  computed: {
+    CallStep: function () {
+      return CallStep;
+    },
+    // 大窗口用户
+    maxUser: function () {
+      var context = this;
+      var maxUser;
+      context.userList.forEach(function (user) {
+        if (user.userId === context.selfUserId) {
+          maxUser = user;
+        }
+      });
+      if (maxUser) {
+        maxUser.talkType = mediaTypeToTalkType(context.callInfo.mediaType);
+      }
+      return maxUser;
+    },
+    // 小窗口用户列表
+    minUserList: function () {
+      var context = this,
+        maxUser = context.maxUser || {};
+      return context.userList.filter(function (user) {
+        return user.userId !== maxUser.userId;
+      });
+    },
+    selfUserId: function () {
+      return this.partentInfo.userId;
+    },
+  },
+  methods: {
+    async test() {
+      let { members } = await getPeoplesMembers();
+      let newMemers = [];
+      members = members.map((items) => {
+        if (items.id !== this.targetId) {
+          newMemers.push(items.id || items.userId);
+        }
+      });
+      this.cities = newMemers;
+      this.dialogVisible = true;
+    },
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? this.cities : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.cities.length;
+    },
+    sureMemer() {
+      // 群聊
+      var context = this;
+      var params = context.params,
+        groupId = params.groupId;
+
+      var callParams = {
+        conversationType: ConversationType.GROUP,
+        targetId: groupId,
+        inviteUserIds: [],
+        mediaType: mediaType,
+      };
+      getMembers(context.userList, context.selfUserId)
+        .then(function (members) {
+          dialog.selectUser({
+            userList: members,
+            confirmed: function (selectedUserList) {
+              var selectedIds = selectedUserList.map(function (user) {
+                return user.id;
+              });
+              callParams.inviteUserIds = selectedIds;
+              context.call(callParams);
+            },
+          });
+        })
+        .catch(function () {
+          context.$message("获取群组成员失败");
+        });
+    },
+    inputCall(bool) {
+      // 输入用户id
+      var targetId = this.partentInfo.phone || "";
+
+      if (targetId !== "") {
+        // url中有参数phone，则进行直接呼叫用户
+        this.callBool = bool;
+        this.startCall(bool);
+        return false;
+      }
+
+      this.$prompt("请输入用户id", "温馨提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputErrorMessage: "用户id",
+      }).then(({ value }) => {
+        // 用户id
+        this.targetId = value;
+        this.callBool = bool;
+        this.startCall();
+      });
+    },
+    /**
+     * @param {boolean} isOnlyAudio 是否仅以音频发起
+     */
+    startCall: function (isOnlyAudio) {
+      var mediaType = isOnlyAudio
+        ? MediaType.MEDIA_AUDIO
+        : MediaType.MEDIA_VEDIO;
+      if (this.callType == ConversationType.GROUP) {
+        this.startGroupCall(mediaType);
+      } else {
+        // 视频
+        this.startPrivateCall(mediaType);
+      }
+    },
+    startPrivateCall: function (mediaType) {
+      var targetId = this.partentInfo.phone || "";
+      if (targetId === "") {
+        targetId = this.targetId;
+      }
+
+      targetId &&
+        this.call({
+          conversationType: ConversationType.PRIVATE,
+          targetId: targetId,
+          inviteUserIds: [targetId],
+          mediaType: mediaType,
+        });
+    },
+    startGroupCall: function (mediaType) {
+      var context = this;
+      var params = context.$route.params,
+        groupId = params.groupId;
+
+      var callParams = {
+        conversationType: ConversationType.GROUP,
+        targetId: groupId,
+        inviteUserIds: [],
+        mediaType: mediaType,
+      };
+      getMembers(context.userList, context.selfUserId)
+        .then(function (members) {
+          dialog.selectUser({
+            userList: members,
+            confirmed: function (selectedUserList) {
+              var selectedIds = selectedUserList.map(function (user) {
+                return user.id;
+              });
+              callParams.inviteUserIds = selectedIds;
+              context.call(callParams);
+            },
+          });
+        })
+        .catch(function () {
+          context.$message("获取群组成员失败");
+        });
+    },
+    async login(callBack) {
+      var userId = this.userId;
+      let _this = this;
+      var loginDetail;
+
+      let result = await this.$axios.login({
+        userId,
+      });
+
+      if (result.code !== 200) {
+        _this.$message("登录失败, 请检查 CallLib Demo Server 是否启动");
+      } else {
+        setting.token = result.token;
+        this.targetId = result.userId;
+        loginDetail = result;
+        let RongCall = window.RongCall;
+        RongCall.initIM(setting);
+
+        _this.params = loginDetail;
+        callBack ? callBack(this) : null;
+      }
+    },
+    initLib() {
+      var context = this;
+
+      // 初始化
+      RongCallLib = RongCall.initCallLib(context.selfUserId);
+      // 注册命令(消息)监听
+      RongCallLib.commandWatch(function (message) {
+        var event = commandEvents[message.messageType];
+        event && event(message, context);
+        console.log("received message", message);
+      });
+
+      // 注册音视频节点监听
+      RongCallLib.videoWatch(function (result) {
+        var event = videoChangedEvents[result.type];
+        event && event(result, context);
+        console.log("video changed", result);
+      });
+
+      let phone = this.partentInfo.phone || "";
+
+      if (phone !== "") {
+        // 默认视频通话
+        context.$message("正在拨通视频，请稍后...");
+        setTimeout(() => {
+          this.startCall(false);
+        }, 2000);
+      }
+    },
+    call: call,
+    accept: accept,
+    invite: invite,
+    reject: reject,
+    hungup: hungup,
+    mute: mute,
+    setVideo: setVideo,
+  },
+  mounted() {
+    console.log(this.partentInfo);
+    let params = this.partentInfo;
+    // 原始代码登录 获取到的数据
+    console.log("原始登录:", params);
+    params = Object.keys(params);
+    if (params.length === 0) {
+      // 有phone，直接进行拨打
+      this.login(this.initLib);
+    } else {
+      // 通过login页面进入的场景
+      this.initLib();
+    }
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/FangXunZhiHui/index/emergencycommand.vue b/src/views/FangXunZhiHui/index/emergencycommand.vue
index 540ecb6..990349e 100644
--- a/src/views/FangXunZhiHui/index/emergencycommand.vue
+++ b/src/views/FangXunZhiHui/index/emergencycommand.vue
@@ -1,9 +1,12 @@
 <template>
   <div id="MapBOXmap">
-    <swqj3Dmap ref="swqj3Dmap"/>
-    <!-- <div id="map" ref="rootmap">
-      <div id="SHIPINTONGHUA" @click="spthClick('15629078847')">点击进行视频通话</div>
-    </div> -->
+    <!-- <Swqj3Dmap ref="swqj3Dmap" /> -->
+    <div id="map" ref="rootmap">
+      <div id="SHIPINTONGHUA" @click="spthClick('15629078847')">
+        点击进行视频通话
+      </div>
+    </div>
+    <!-- <CesiumCom></CesiumCom> -->
     <!-- 视频对话 -->
     <el-dialog
       title="视频对话"
@@ -19,27 +22,22 @@
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)"
       >
-        <router-view ref="TongHua"></router-view>
+        <CesiumCom ref="TongHua"></CesiumCom>
+        <!-- <router-view ref="TongHua"></router-view> -->
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import swqj3Dmap from "@/components/swqj3Dmap.vue";
+import CesiumCom from "@/components/call.vue";
+// import CesiumCom from "@/views/cesiumCom/index.vue";
+
 var setting = window.RongCall.setting;
 
-import "ol/ol.css";
-import { Map, View } from "ol";
-import XYZ from "ol/source/XYZ";
-import TileLayer from "ol/layer/Tile";
-
-import SourceVector from "ol/source/Vector";
-import LayerVector from "ol/layer/Vector";
-import { defaults } from "ol/control";
 export default {
   components: {
-   swqj3Dmap
+    CesiumCom,
   },
   data() {
     return {
@@ -55,64 +53,9 @@
     window.spthClick = this.spthClick;
   },
 
-  mounted() {
-    // // 时间未改变且因子也没变化，只需要重新绘制
-    // this.$nextTick(function () {
-    //   setTimeout(() => {
-    //     this.map.updateSize();
-    //   }, 500);
-    // });
-
-    // var mapcontainer = this.$refs.rootmap;
-    // this.map = new Map({
-    //   controls: defaults({
-    //     attribution: false,
-    //     zoom: false,
-    //     rotate: false,
-    //   }),
-
-    //   target: mapcontainer,
-    //   layers: [
-    //     new TileLayer({
-    //       source: new XYZ({
-    //         url: "https://api.mapbox.com/styles/v1/raomap/ckjjpsibk0gj719ppklycwqxg/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicmFvbWFwIiwiYSI6ImNqdTEwY2F1YjBtOWs0NG1lZGtmcTA1a2kifQ.CqXTzbSSoQmJmoHKeIdi9A",
-    //       }),
-    //     }),
-    //   ],
-    //   view: new View({
-    //     projection: "EPSG:4326", //使用这个坐标系
-    //     center: [114.127, 32.068], //信阳
-    //     zoom: 14,
-    //   }),
-    // });
-
-    // //添加矢量图层
-    // this.editSource = new SourceVector({
-    //   wrapX: false,
-    // });
-
-    // this.editVectorLayer = new LayerVector({
-    //   source: this.editSource,
-    //   zIndex: 99999,
-    // });
-
-    // this.map.addLayer(this.editVectorLayer);
-
-    // //添加车辆及路线矢量图层
-    // this.carSource = new SourceVector({
-    //   wrapX: false,
-    // });
-
-    // this.carVectorLayer = new LayerVector({
-    //   source: this.editSource,
-    //   zIndex: 99999,
-    // });
-
-    // this.map.addLayer(this.carVectorLayer);
-  },
+  mounted() {},
   beforeDestroy() {},
   methods: {
-
     // 前端代码======================================================A
     // 关闭弹窗
     closeDialog() {
@@ -147,19 +90,19 @@
         let RongCall = window.RongCall;
         RongCall.initIM(setting);
 
-        this.$router.push({
-          path: "/FangXunZhiHui/emergencycommand/call",
-          query: {
-            phone: peopleNo,
-            userId: PCUser,
-          },
-        });
+        // this.$router.push({
+        //   path: "/FangXunZhiHui/emergencycommand/call",
+        //   query: {
+        //     phone: peopleNo,
+        //     userId: PCUser,
+        //   },
+        // });
 
         this.$refs.TongHua.inputCall(false);
       }
     },
     // 视频通话功能----------------------------------------------------------B
-    
+
     // 前端代码======================================================E
   },
 };
diff --git a/src/views/HelloWorld.vue b/src/views/HelloWorld.vue
index 231f485..9201e81 100644
--- a/src/views/HelloWorld.vue
+++ b/src/views/HelloWorld.vue
@@ -1,86 +1,68 @@
 <!-- 热力图渲染 -->
 <template>
-  <div id="CesiumContainer">
-  </div>
+  <div id="CesiumContainer"></div>
 </template>
 
 <script>
-  import qs from 'qs'
+import qs from "qs";
 
-  export default {
-    data() {
-      return {
-        earth: ''
-      };
+export default {
+  data() {
+    return {
+      earth: "",
+    };
+  },
+  components: {},
+  computed: {},
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      // Cesium.Ion.defaultAccessToken =
+      //   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YjcwZmQzNS1hODBiLTQzNjAtYjI0NC1kY2JkNzFhMGQwZmEiLCJpZCI6MzY5NDksImlhdCI6MTYwNDM3MjQwNn0.Ckrquc_lnL8T4CGKuxmUieS9k2VxdGX9ADL1_I0J4uQ";
+
+      // // 默认定位到中国上空
+      // Cesium.Camera.DEFAULT_VIEW_RECTANGLE = new Cesium.Rectangle.fromDegrees(
+      //   90,
+      //   -20,
+      //   110,
+      //   90
+      // );
+
+      // gis地图服务,第一种添加地图图层的方式
+      // let gisMap = new Cesium.ArcGisMapServerImageryProvider({
+      //   url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+      // });
+
+      let viewer = new Cesium.Viewer("CesiumContainer", {
+        // imageryProvider: gisMap,
+        navigation: false,
+        animation: false, // 隐藏动画控件
+        baseLayerPicker: false, // 隐藏图层选择控件
+        fullscreenButton: false, // 隐藏全屏按钮
+        vrButton: false, // 隐藏VR按钮，默认false
+        geocoder: false, // 隐藏地名查找控件
+        homeButton: false, // 隐藏Home按钮
+        navigationHelpButton: false, // 隐藏帮助按钮
+        infoBox: false, //是否显示信息框
+        fullscreenButton: false, //是否显示全屏按钮
+        animation: false, //是否创建动画小器件，左下角仪表
+        timeline: false, //是否显示时间轴
+        selectionIndicator: false, //关闭点击绿色框
+        scene3DOnly: true, // 每个几何实例将只在3D中呈现，以节省GPU内存
+      });
+
+      this.earth = viewer;
+      // this.renderHeatmap()
     },
-    components: {},
-    computed: {},
-    mounted() {
-      this.init();
-    },
-    methods: {
-      init() {
-        Cesium.Ion.defaultAccessToken =
-          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YjcwZmQzNS1hODBiLTQzNjAtYjI0NC1kY2JkNzFhMGQwZmEiLCJpZCI6MzY5NDksImlhdCI6MTYwNDM3MjQwNn0.Ckrquc_lnL8T4CGKuxmUieS9k2VxdGX9ADL1_I0J4uQ';
-
-        // 默认定位到中国上空
-        Cesium.Camera.DEFAULT_VIEW_RECTANGLE = new Cesium.Rectangle.fromDegrees(
-          90,
-          -20,
-          110,
-          90,
-        );
-
-        // gis地图服务,第一种添加地图图层的方式
-        let gisMap = new Cesium.ArcGisMapServerImageryProvider({
-          url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
-        });
-
-        let viewer = new Cesium.Viewer('CesiumContainer', {
-          imageryProvider: gisMap,
-        });
-
-        this.earth = viewer;
-        // this.renderHeatmap()
-      },
-      // async getDatas() {
-      //   let res = await this.$http.post('/huaizi/V3Action/inversion', qs.stringify({
-      //     INTYPE: 'MOON',
-      //     TYPE: 'TEMP',
-      //     TIMETYPE: '2020-04-29 00:00:00'
-      //   }), {
-      //     headers: {
-      //       'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
-      //     }
-      //   });
-
-      //   res = res.data.list || [];
-
-      //   let datas = [];
-      //   for (const items of res.values()) {
-      //     datas.push({
-      //       x: +items.LAN,
-      //       y: +items.LAT,
-      //       value: +items.TEMP,
-      //     })
-      //   }
-      //   return datas;
-      // },
-      // async renderHeatmap() {
-      //   // 渲染热力图方法，在这里面写
-      //   let res = await this.getDatas();
-
-      //   console.log('res', res)
-      // }
-    }
-  }
-
+  },
+};
 </script>
 
 <style scoped>
-  #CesiumContainer {
-    width: 100%;
-    height: 100%;
-  }
-
+#CesiumContainer {
+  width: 100%;
+  height: 100%;
+}
 </style>

diff --git a/src/components/call.vue b/src/components/call.vue
new file mode 100644
index 0000000..f9b4849
--- /dev/null
+++ b/src/components/call.vue
@@ -0,0 +1,657 @@
+<!-- 呼叫页面 -->
+<template>
+  <div id="rong-template-call">
+    <div class="rong-box rong-call-box">
+      <div class="rong-info">
+        <p>
+          当前拨号用户:
+          <span>{{ partentInfo.userId }}</span>
+        </p>
+        <!-- <p>群组 id: <span>{{params.groupId}}- {{$route.params.groupId}}</span></p> -->
+        <!-- <el-button @click="test()">群聊测试</el-button> -->
+      </div>
+      <div class="rong-type-box" style="display: none">
+        <!-- <div class="rong-type-box" v-if="callStep === CallStep.READY_TO_CALL"> -->
+        <label for="">通话类型: </label>
+        <select name="" id="" v-model="callType">
+          <option value="1">单人</option>
+          <option value="3">群组</option>
+        </select>
+      </div>
+      <div class="rong-video-box">
+        <div class="rong-video-list">
+          <div
+            class="rong-video-min"
+            v-for="user in minUserList"
+            v-video="user"
+            :talktype="user.talkType"
+          ></div>
+        </div>
+        <div
+          v-if="maxUser"
+          class="rong-video-max"
+          v-video="maxUser"
+          :talktype="maxUser.talkType"
+        ></div>
+      </div>
+      <div class="rong-call-btns">
+        <template v-if="callStep === CallStep.READY_TO_CALL">
+          <button
+            class="rong-call-video"
+            title="点击进行视频通话"
+            @click="inputCall(false)"
+          ></button>
+          <!-- <button
+            class="rong-call-audio"
+            title="点击进行音频通话"
+            @click="inputCall(true)"
+          ></button> -->
+        </template>
+        <template v-else-if="callStep === CallStep.CALLING">
+          <button
+            class="rong-call-hungup"
+            title="点击挂断"
+            @click="hungup"
+          ></button>
+          <button
+            v-if="callType == 3"
+            class="rong-call-invite"
+            title="点击邀请"
+            @click="invite"
+          ></button>
+          <button
+            class="rong-call-mute"
+            title="点击开启/关闭音频"
+            :closed="isMuted"
+            @click="mute"
+          ></button>
+          <button
+            class="rong-call-video"
+            closed
+            title="点击开启/关闭视频"
+            :closed="callInfo.mediaType !== 2"
+            @click="setVideo"
+          ></button>
+        </template>
+        <template v-else-if="callStep === CallStep.INVITED_TO_ANSWER">
+          <button class="rong-call-accept" @click="accept"></button>
+          <button class="rong-call-hungup" @click="reject"></button>
+        </template>
+      </div>
+    </div>
+
+    <!-- 群聊 -->
+    <el-dialog title="群聊用户" :visible.sync="dialogVisible" width="30%">
+      <el-checkbox
+        :indeterminate="isIndeterminate"
+        v-model="checkAll"
+        @change="handleCheckAllChange"
+        >全选当前用户
+      </el-checkbox>
+      <div style="margin: 15px 0"></div>
+
+      <el-checkbox-group
+        v-model="checkedCities"
+        @change="handleCheckedCitiesChange"
+      >
+        <el-checkbox v-for="userId in cities" :label="userId" :key="userId">{{
+          userId
+        }}</el-checkbox>
+      </el-checkbox-group>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="sureMemer()">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { getPeoplesMembers } from "@/services";
+var RongIMLib = window.RongIMLib,
+  RongCallLib = window.RongCallLib,
+  win = window,
+  RongCall = window.RongCall,
+  setting = RongCall.setting,
+  utils = RongCall.utils;
+
+var dialog = RongCall.dialog,
+  ConversationType = RongIMLib.CONVERSATION_TYPE,
+  MediaType = {
+    MEDIA_AUDIO: 1,
+    MEDIA_VEDIO: 2,
+    1: "MEDIA_AUDIO",
+    2: "MEDIA_VEDIO",
+  };
+var isAutoClose = false;
+// 通话阶段
+var CallStep = {
+  READY_TO_CALL: 1, // 准备拨打(最初状态)
+  INVITED_TO_ANSWER: 2, // 被邀请接听, 其他人拨打, 己方选择接听或拒绝
+  CALLING: 3, // 拨打中
+};
+
+var CallName = {};
+CallName[MediaType.MEDIA_AUDIO] = "语音";
+CallName[MediaType.MEDIA_VEDIO] = "视频";
+
+// 将消息转化为调用 CallLib 需要参数
+function messageToCallInfo(message) {
+  return {
+    conversationType: message.conversationType,
+    targetId: message.targetId,
+    mediaType: message.content.mediaType,
+  };
+}
+
+// 获取挂断原因
+function getHungupReason(reason, message) {
+  var reasonPrompt;
+  var senderUserId = message.senderUserId;
+  switch (reason) {
+    case 8:
+      reasonPrompt = "其他设备已处理";
+      break;
+    case 11:
+      reasonPrompt = `${senderUserId} 已取消`;
+      break;
+    case 12:
+      reasonPrompt = `${senderUserId} 已拒绝`;
+      break;
+    case 13:
+      reasonPrompt = `${senderUserId} 已挂断`;
+      break;
+    case 14:
+      reasonPrompt = `${senderUserId} 忙碌中`;
+      break;
+    case 15:
+      reasonPrompt = `${senderUserId} 未接听`;
+      break;
+    default:
+      reasonPrompt = "未知原因挂断";
+  }
+  return reasonPrompt;
+}
+
+// 己方挂断后的提示
+function getSummaryText(status, message) {
+  var senderUserId = message.senderUserId;
+  var text;
+  switch (status) {
+    case 1:
+      text = "己方已取消";
+      break;
+    case 2:
+      text = "己方已拒绝";
+      break;
+    case 3:
+      text = "己方挂断";
+      break;
+    case 4:
+      text = `收到 ${senderUserId} 的音视频邀请, 但己方忙碌中, 不处理`;
+      break;
+    case 5:
+      text = "己方未接听";
+      break;
+    default:
+      text = "未知原因";
+  }
+  return text;
+}
+
+function mediaTypeToTalkType(mediaType) {
+  return mediaType === MediaType.MEDIA_AUDIO ? 0 : 1;
+}
+
+var commandEvents = {
+  // 监听其他人邀请自己
+  InviteMessage: function (message, context) {
+    var conversationType =
+      message.conversationType === ConversationType.PRIVATE ? "单聊" : "群聊";
+    context.$message(
+      `${message.senderUserId} 邀请您进行${
+        CallName[message.content.mediaType]
+      }通话(${conversationType})`
+    );
+    context.callInfo = messageToCallInfo(message);
+    context.callStep = CallStep.INVITED_TO_ANSWER;
+  },
+  MemberModifyMessage: function (message, context) {
+    if (message.content.inviteUserIds.indexOf(context.selfUserId) !== -1) {
+      var conversationType =
+        message.conversationType === ConversationType.PRIVATE ? "单聊" : "群聊";
+      context.$message(
+        `${message.senderUserId} 邀请您进行${
+          CallName[message.content.mediaType]
+        }通话(${conversationType})`
+      );
+      context.callInfo = messageToCallInfo(message);
+      context.callStep = CallStep.INVITED_TO_ANSWER;
+    }
+  },
+  HungupMessage: function (message, context) {
+    var reason = getHungupReason(message.content.reason, message);
+    context.$message(reason);
+    var params = {
+      conversationType: message.conversationType,
+      targetId: message.targetId,
+    };
+    isAutoClose = true;
+    if (message.content.reason) {
+      RongCallLib.hungup(params, function (error) {
+        // 置为最初的准备拨打状态
+        context.callStep = CallStep.READY_TO_CALL;
+      });
+    }
+  },
+  MediaModifyMessage: function (message, context) {
+    var senderUserId = message.senderUserId,
+      mediaType = message.content.mediaType;
+    context.userList.forEach(function (user) {
+      if (user.userId === senderUserId) {
+        user.talkType = mediaTypeToTalkType(mediaType);
+      }
+    });
+  },
+  SummaryMessage: function (message, context) {
+    // 每次拨通或者挂断都会触发此方法
+    var status = message.content.status;
+
+    if (!isAutoClose) {
+      var promptText = getSummaryText(status, message);
+      context.$message(promptText);
+      if (status === 5) {
+        // 自己未接听, 回到初始状态
+        context.callStep = CallStep.READY_TO_CALL;
+      }
+    }
+
+    if (status === 15) {
+      context.callStep = CallStep.READY_TO_CALL;
+    }
+  },
+};
+
+var videoChangedEvents = {
+  added: function (detail, context) {
+    context.userList.push(detail);
+  },
+  removed: function (detail, context) {
+    context.userList = utils.removeArray(detail, context.userList, "userId");
+  },
+  leave: function (detail, context) {
+    context.userList = [];
+  },
+};
+
+async function getMembers(currentUserList, selfUserId) {
+  let members = await getPeoplesMembers();
+  console.log("members", members);
+  members = members.filter(function (user) {
+    var currentUserIds = currentUserList.map(function (user) {
+      return user.id || user.userId;
+    });
+    return user.id !== selfUserId && currentUserIds.indexOf(user.id) === -1;
+  });
+  console.log("members", members);
+  return win.Promise.resolve(members);
+}
+
+function call(callParams) {
+  var context = this;
+  RongCallLib.call(callParams, function (error) {
+    // 置为通话中状态
+    context.callStep = error ? context.callStep : CallStep.CALLING;
+  });
+  context.callInfo = callParams;
+}
+
+function accept() {
+  var context = this;
+  var callInfo = context.callInfo; // callInfo 在监听到 InviteMessage 时赋值, 格式见 messageToCallInfo 方法
+  RongCallLib.accept(callInfo, function (error) {
+    // 置为通话中状态
+    context.callStep = error ? context.callStep : CallStep.CALLING;
+  });
+}
+
+function invite() {
+  var context = this;
+  var callInfo = context.callInfo,
+    inviteParams = {
+      conversationType: ConversationType.GROUP,
+      targetId: callInfo.targetId,
+      inviteUserIds: [],
+      mediaType: callInfo.mediaType,
+    };
+  getMembers(context.userList, context.selfUserId)
+    .then(function (members) {
+      dialog.selectUser({
+        userList: members,
+        confirmed: function (selectedUserList) {
+          var selectedIds = selectedUserList.map(function (user) {
+            return user.id;
+          });
+          inviteParams.inviteUserIds = selectedIds;
+          RongCallLib.invite(inviteParams);
+        },
+      });
+    })
+    .catch(function () {
+      context.$message("获取群组成员失败");
+    });
+}
+
+function reject() {
+  var context = this;
+  var callInfo = context.callInfo; // callInfo 在监听到 InviteMessage 时赋值, 格式见 messageToCallInfo 方法
+  RongCallLib.reject(callInfo, function (error) {
+    // 置为最初的准备拨打状态
+    context.callStep = error ? context.callStep : CallStep.READY_TO_CALL;
+  });
+}
+
+function hungup() {
+  var context = this;
+  var callInfo = context.callInfo;
+  RongCallLib.hungup(callInfo, function (error) {
+    // 置为最初的准备拨打状态
+    context.callStep = error ? context.callStep : CallStep.READY_TO_CALL;
+  });
+}
+
+function mute() {
+  var isMuted = this.isMuted;
+  var event = isMuted ? RongCallLib.unmute : RongCallLib.mute;
+  event();
+  this.isMuted = !isMuted;
+}
+
+function setVideo() {
+  var callInfo = this.callInfo,
+    mediaType = callInfo.mediaType;
+  var event =
+    mediaType === MediaType.MEDIA_AUDIO
+      ? RongCallLib.audioToVideo
+      : RongCallLib.videoToAudio;
+  event();
+  this.callInfo.mediaType =
+    mediaType === MediaType.MEDIA_AUDIO
+      ? MediaType.MEDIA_VEDIO
+      : MediaType.MEDIA_AUDIO;
+}
+
+export default {
+  name: "rong-template-call",
+  props: ["partentInfo"],
+  data() {
+    return {
+      userList: [],
+      selectUserId: "",
+      selectUserShow: true,
+      userId: this.partentInfo.userId ? this.partentInfo.userId : "PCUser",
+      params: "",
+      callStep: CallStep.READY_TO_CALL,
+      callType: ConversationType.PRIVATE, // 通话类型, 默认为单聊
+      /**
+       * 通话信息. 给 callInfo 赋值的地方有:
+       * 1. 发送 call 成功后, 存储当前通话信息
+       * 2. 接收到 InviteMessage 后, 存储通话信息
+       */
+      callInfo: {},
+      targetId: "",
+      isMuted: false,
+      dialogVisible: false,
+      callBool: false,
+      checkAll: false,
+      checkedCities: [],
+      cities: [],
+      isIndeterminate: true,
+    };
+  },
+  directives: {
+    video: function (el, binding) {
+      var user = binding.value;
+      var video = user.data;
+      el.appendChild(video);
+      video.play();
+    },
+  },
+  computed: {
+    CallStep: function () {
+      return CallStep;
+    },
+    // 大窗口用户
+    maxUser: function () {
+      var context = this;
+      var maxUser;
+      context.userList.forEach(function (user) {
+        if (user.userId === context.selfUserId) {
+          maxUser = user;
+        }
+      });
+      if (maxUser) {
+        maxUser.talkType = mediaTypeToTalkType(context.callInfo.mediaType);
+      }
+      return maxUser;
+    },
+    // 小窗口用户列表
+    minUserList: function () {
+      var context = this,
+        maxUser = context.maxUser || {};
+      return context.userList.filter(function (user) {
+        return user.userId !== maxUser.userId;
+      });
+    },
+    selfUserId: function () {
+      return this.partentInfo.userId;
+    },
+  },
+  methods: {
+    async test() {
+      let { members } = await getPeoplesMembers();
+      let newMemers = [];
+      members = members.map((items) => {
+        if (items.id !== this.targetId) {
+          newMemers.push(items.id || items.userId);
+        }
+      });
+      this.cities = newMemers;
+      this.dialogVisible = true;
+    },
+    handleCheckAllChange(val) {
+      this.checkedCities = val ? this.cities : [];
+      this.isIndeterminate = false;
+    },
+    handleCheckedCitiesChange(value) {
+      let checkedCount = value.length;
+      this.checkAll = checkedCount === this.cities.length;
+      this.isIndeterminate =
+        checkedCount > 0 && checkedCount < this.cities.length;
+    },
+    sureMemer() {
+      // 群聊
+      var context = this;
+      var params = context.params,
+        groupId = params.groupId;
+
+      var callParams = {
+        conversationType: ConversationType.GROUP,
+        targetId: groupId,
+        inviteUserIds: [],
+        mediaType: mediaType,
+      };
+      getMembers(context.userList, context.selfUserId)
+        .then(function (members) {
+          dialog.selectUser({
+            userList: members,
+            confirmed: function (selectedUserList) {
+              var selectedIds = selectedUserList.map(function (user) {
+                return user.id;
+              });
+              callParams.inviteUserIds = selectedIds;
+              context.call(callParams);
+            },
+          });
+        })
+        .catch(function () {
+          context.$message("获取群组成员失败");
+        });
+    },
+    inputCall(bool) {
+      // 输入用户id
+      var targetId = this.partentInfo.phone || "";
+
+      if (targetId !== "") {
+        // url中有参数phone，则进行直接呼叫用户
+        this.callBool = bool;
+        this.startCall(bool);
+        return false;
+      }
+
+      this.$prompt("请输入用户id", "温馨提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        inputErrorMessage: "用户id",
+      }).then(({ value }) => {
+        // 用户id
+        this.targetId = value;
+        this.callBool = bool;
+        this.startCall();
+      });
+    },
+    /**
+     * @param {boolean} isOnlyAudio 是否仅以音频发起
+     */
+    startCall: function (isOnlyAudio) {
+      var mediaType = isOnlyAudio
+        ? MediaType.MEDIA_AUDIO
+        : MediaType.MEDIA_VEDIO;
+      if (this.callType == ConversationType.GROUP) {
+        this.startGroupCall(mediaType);
+      } else {
+        // 视频
+        this.startPrivateCall(mediaType);
+      }
+    },
+    startPrivateCall: function (mediaType) {
+      var targetId = this.partentInfo.phone || "";
+      if (targetId === "") {
+        targetId = this.targetId;
+      }
+
+      targetId &&
+        this.call({
+          conversationType: ConversationType.PRIVATE,
+          targetId: targetId,
+          inviteUserIds: [targetId],
+          mediaType: mediaType,
+        });
+    },
+    startGroupCall: function (mediaType) {
+      var context = this;
+      var params = context.$route.params,
+        groupId = params.groupId;
+
+      var callParams = {
+        conversationType: ConversationType.GROUP,
+        targetId: groupId,
+        inviteUserIds: [],
+        mediaType: mediaType,
+      };
+      getMembers(context.userList, context.selfUserId)
+        .then(function (members) {
+          dialog.selectUser({
+            userList: members,
+            confirmed: function (selectedUserList) {
+              var selectedIds = selectedUserList.map(function (user) {
+                return user.id;
+              });
+              callParams.inviteUserIds = selectedIds;
+              context.call(callParams);
+            },
+          });
+        })
+        .catch(function () {
+          context.$message("获取群组成员失败");
+        });
+    },
+    async login(callBack) {
+      var userId = this.userId;
+      let _this = this;
+      var loginDetail;
+
+      let result = await this.$axios.login({
+        userId,
+      });
+
+      if (result.code !== 200) {
+        _this.$message("登录失败, 请检查 CallLib Demo Server 是否启动");
+      } else {
+        setting.token = result.token;
+        this.targetId = result.userId;
+        loginDetail = result;
+        let RongCall = window.RongCall;
+        RongCall.initIM(setting);
+
+        _this.params = loginDetail;
+        callBack ? callBack(this) : null;
+      }
+    },
+    initLib() {
+      var context = this;
+
+      // 初始化
+      RongCallLib = RongCall.initCallLib(context.selfUserId);
+      // 注册命令(消息)监听
+      RongCallLib.commandWatch(function (message) {
+        var event = commandEvents[message.messageType];
+        event && event(message, context);
+        console.log("received message", message);
+      });
+
+      // 注册音视频节点监听
+      RongCallLib.videoWatch(function (result) {
+        var event = videoChangedEvents[result.type];
+        event && event(result, context);
+        console.log("video changed", result);
+      });
+
+      let phone = this.partentInfo.phone || "";
+
+      if (phone !== "") {
+        // 默认视频通话
+        context.$message("正在拨通视频，请稍后...");
+        setTimeout(() => {
+          this.startCall(false);
+        }, 2000);
+      }
+    },
+    call: call,
+    accept: accept,
+    invite: invite,
+    reject: reject,
+    hungup: hungup,
+    mute: mute,
+    setVideo: setVideo,
+  },
+  mounted() {
+    console.log(this.partentInfo);
+    let params = this.partentInfo;
+    // 原始代码登录 获取到的数据
+    console.log("原始登录:", params);
+    params = Object.keys(params);
+    if (params.length === 0) {
+      // 有phone，直接进行拨打
+      this.login(this.initLib);
+    } else {
+      // 通过login页面进入的场景
+      this.initLib();
+    }
+  },
+};
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/FangXunZhiHui/index/emergencycommand.vue b/src/views/FangXunZhiHui/index/emergencycommand.vue
index 540ecb6..990349e 100644
--- a/src/views/FangXunZhiHui/index/emergencycommand.vue
+++ b/src/views/FangXunZhiHui/index/emergencycommand.vue
@@ -1,9 +1,12 @@
 <template>
   <div id="MapBOXmap">
-    <swqj3Dmap ref="swqj3Dmap"/>
-    <!-- <div id="map" ref="rootmap">
-      <div id="SHIPINTONGHUA" @click="spthClick('15629078847')">点击进行视频通话</div>
-    </div> -->
+    <!-- <Swqj3Dmap ref="swqj3Dmap" /> -->
+    <div id="map" ref="rootmap">
+      <div id="SHIPINTONGHUA" @click="spthClick('15629078847')">
+        点击进行视频通话
+      </div>
+    </div>
+    <!-- <CesiumCom></CesiumCom> -->
     <!-- 视频对话 -->
     <el-dialog
       title="视频对话"
@@ -19,27 +22,22 @@
         element-loading-spinner="el-icon-loading"
         element-loading-background="rgba(0, 0, 0, 0.8)"
       >
-        <router-view ref="TongHua"></router-view>
+        <CesiumCom ref="TongHua"></CesiumCom>
+        <!-- <router-view ref="TongHua"></router-view> -->
       </div>
     </el-dialog>
   </div>
 </template>
 
 <script>
-import swqj3Dmap from "@/components/swqj3Dmap.vue";
+import CesiumCom from "@/components/call.vue";
+// import CesiumCom from "@/views/cesiumCom/index.vue";
+
 var setting = window.RongCall.setting;
 
-import "ol/ol.css";
-import { Map, View } from "ol";
-import XYZ from "ol/source/XYZ";
-import TileLayer from "ol/layer/Tile";
-
-import SourceVector from "ol/source/Vector";
-import LayerVector from "ol/layer/Vector";
-import { defaults } from "ol/control";
 export default {
   components: {
-   swqj3Dmap
+    CesiumCom,
   },
   data() {
     return {
@@ -55,64 +53,9 @@
     window.spthClick = this.spthClick;
   },
 
-  mounted() {
-    // // 时间未改变且因子也没变化，只需要重新绘制
-    // this.$nextTick(function () {
-    //   setTimeout(() => {
-    //     this.map.updateSize();
-    //   }, 500);
-    // });
-
-    // var mapcontainer = this.$refs.rootmap;
-    // this.map = new Map({
-    //   controls: defaults({
-    //     attribution: false,
-    //     zoom: false,
-    //     rotate: false,
-    //   }),
-
-    //   target: mapcontainer,
-    //   layers: [
-    //     new TileLayer({
-    //       source: new XYZ({
-    //         url: "https://api.mapbox.com/styles/v1/raomap/ckjjpsibk0gj719ppklycwqxg/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoicmFvbWFwIiwiYSI6ImNqdTEwY2F1YjBtOWs0NG1lZGtmcTA1a2kifQ.CqXTzbSSoQmJmoHKeIdi9A",
-    //       }),
-    //     }),
-    //   ],
-    //   view: new View({
-    //     projection: "EPSG:4326", //使用这个坐标系
-    //     center: [114.127, 32.068], //信阳
-    //     zoom: 14,
-    //   }),
-    // });
-
-    // //添加矢量图层
-    // this.editSource = new SourceVector({
-    //   wrapX: false,
-    // });
-
-    // this.editVectorLayer = new LayerVector({
-    //   source: this.editSource,
-    //   zIndex: 99999,
-    // });
-
-    // this.map.addLayer(this.editVectorLayer);
-
-    // //添加车辆及路线矢量图层
-    // this.carSource = new SourceVector({
-    //   wrapX: false,
-    // });
-
-    // this.carVectorLayer = new LayerVector({
-    //   source: this.editSource,
-    //   zIndex: 99999,
-    // });
-
-    // this.map.addLayer(this.carVectorLayer);
-  },
+  mounted() {},
   beforeDestroy() {},
   methods: {
-
     // 前端代码======================================================A
     // 关闭弹窗
     closeDialog() {
@@ -147,19 +90,19 @@
         let RongCall = window.RongCall;
         RongCall.initIM(setting);
 
-        this.$router.push({
-          path: "/FangXunZhiHui/emergencycommand/call",
-          query: {
-            phone: peopleNo,
-            userId: PCUser,
-          },
-        });
+        // this.$router.push({
+        //   path: "/FangXunZhiHui/emergencycommand/call",
+        //   query: {
+        //     phone: peopleNo,
+        //     userId: PCUser,
+        //   },
+        // });
 
         this.$refs.TongHua.inputCall(false);
       }
     },
     // 视频通话功能----------------------------------------------------------B
-    
+
     // 前端代码======================================================E
   },
 };
diff --git a/src/views/HelloWorld.vue b/src/views/HelloWorld.vue
index 231f485..9201e81 100644
--- a/src/views/HelloWorld.vue
+++ b/src/views/HelloWorld.vue
@@ -1,86 +1,68 @@
 <!-- 热力图渲染 -->
 <template>
-  <div id="CesiumContainer">
-  </div>
+  <div id="CesiumContainer"></div>
 </template>
 
 <script>
-  import qs from 'qs'
+import qs from "qs";
 
-  export default {
-    data() {
-      return {
-        earth: ''
-      };
+export default {
+  data() {
+    return {
+      earth: "",
+    };
+  },
+  components: {},
+  computed: {},
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      // Cesium.Ion.defaultAccessToken =
+      //   "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YjcwZmQzNS1hODBiLTQzNjAtYjI0NC1kY2JkNzFhMGQwZmEiLCJpZCI6MzY5NDksImlhdCI6MTYwNDM3MjQwNn0.Ckrquc_lnL8T4CGKuxmUieS9k2VxdGX9ADL1_I0J4uQ";
+
+      // // 默认定位到中国上空
+      // Cesium.Camera.DEFAULT_VIEW_RECTANGLE = new Cesium.Rectangle.fromDegrees(
+      //   90,
+      //   -20,
+      //   110,
+      //   90
+      // );
+
+      // gis地图服务,第一种添加地图图层的方式
+      // let gisMap = new Cesium.ArcGisMapServerImageryProvider({
+      //   url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
+      // });
+
+      let viewer = new Cesium.Viewer("CesiumContainer", {
+        // imageryProvider: gisMap,
+        navigation: false,
+        animation: false, // 隐藏动画控件
+        baseLayerPicker: false, // 隐藏图层选择控件
+        fullscreenButton: false, // 隐藏全屏按钮
+        vrButton: false, // 隐藏VR按钮，默认false
+        geocoder: false, // 隐藏地名查找控件
+        homeButton: false, // 隐藏Home按钮
+        navigationHelpButton: false, // 隐藏帮助按钮
+        infoBox: false, //是否显示信息框
+        fullscreenButton: false, //是否显示全屏按钮
+        animation: false, //是否创建动画小器件，左下角仪表
+        timeline: false, //是否显示时间轴
+        selectionIndicator: false, //关闭点击绿色框
+        scene3DOnly: true, // 每个几何实例将只在3D中呈现，以节省GPU内存
+      });
+
+      this.earth = viewer;
+      // this.renderHeatmap()
     },
-    components: {},
-    computed: {},
-    mounted() {
-      this.init();
-    },
-    methods: {
-      init() {
-        Cesium.Ion.defaultAccessToken =
-          'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2YjcwZmQzNS1hODBiLTQzNjAtYjI0NC1kY2JkNzFhMGQwZmEiLCJpZCI6MzY5NDksImlhdCI6MTYwNDM3MjQwNn0.Ckrquc_lnL8T4CGKuxmUieS9k2VxdGX9ADL1_I0J4uQ';
-
-        // 默认定位到中国上空
-        Cesium.Camera.DEFAULT_VIEW_RECTANGLE = new Cesium.Rectangle.fromDegrees(
-          90,
-          -20,
-          110,
-          90,
-        );
-
-        // gis地图服务,第一种添加地图图层的方式
-        let gisMap = new Cesium.ArcGisMapServerImageryProvider({
-          url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
-        });
-
-        let viewer = new Cesium.Viewer('CesiumContainer', {
-          imageryProvider: gisMap,
-        });
-
-        this.earth = viewer;
-        // this.renderHeatmap()
-      },
-      // async getDatas() {
-      //   let res = await this.$http.post('/huaizi/V3Action/inversion', qs.stringify({
-      //     INTYPE: 'MOON',
-      //     TYPE: 'TEMP',
-      //     TIMETYPE: '2020-04-29 00:00:00'
-      //   }), {
-      //     headers: {
-      //       'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
-      //     }
-      //   });
-
-      //   res = res.data.list || [];
-
-      //   let datas = [];
-      //   for (const items of res.values()) {
-      //     datas.push({
-      //       x: +items.LAN,
-      //       y: +items.LAT,
-      //       value: +items.TEMP,
-      //     })
-      //   }
-      //   return datas;
-      // },
-      // async renderHeatmap() {
-      //   // 渲染热力图方法，在这里面写
-      //   let res = await this.getDatas();
-
-      //   console.log('res', res)
-      // }
-    }
-  }
-
+  },
+};
 </script>
 
 <style scoped>
-  #CesiumContainer {
-    width: 100%;
-    height: 100%;
-  }
-
+#CesiumContainer {
+  width: 100%;
+  height: 100%;
+}
 </style>
diff --git a/src/views/cesiumCom/index.vue b/src/views/cesiumCom/index.vue
new file mode 100644
index 0000000..142ce2f
--- /dev/null
+++ b/src/views/cesiumCom/index.vue
@@ -0,0 +1,123 @@
+<template>
+  <div id="CesiumBOX">
+    <div id="CesiumContainer"></div>
+    <div id="SHIPINTONGHUA" @click="spthClick('15629078847')">
+      点击进行视频通话
+    </div>
+
+    <el-dialog
+      title="视频对话"
+      :visible.sync="dialogVisible"
+      width="30%"
+      :close-on-click-modal="false"
+      @close="closeDialog()"
+    >
+      <div
+        id="TongHuaBox"
+        v-loading="loading"
+        element-loading-text="拼命加载中"
+        element-loading-spinner="el-icon-loading"
+        element-loading-background="rgba(0, 0, 0, 0.8)"
+      >
+        <!-- <router-view ref="TongHua"></router-view> -->
+        <div style="height: 200px; position: relative">
+          <Callss ref="TongHua" :partentInfo="partentInfo"></Callss>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import qs from "qs";
+import Callss from "./../../components/call.vue";
+var setting = window.RongCall.setting;
+
+export default {
+  data() {
+    return {
+      earth: "",
+      dialogVisible: false,
+      loading: false,
+      unsrNo: "",
+      RongLoginOkData: {},
+      partentInfo: {},
+    };
+  },
+  components: { Callss },
+  computed: {},
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      let viewer = new Cesium.Viewer("CesiumContainer", {
+        // imageryProvider: gisMap,
+      });
+
+      this.earth = viewer;
+      // this.renderHeatmap()
+    },
+    // 前端代码======================================================A
+    // 关闭弹窗
+    closeDialog() {
+      this.$refs.TongHua.hungup();
+    },
+    //视频通话按钮-------------------------------------------------------------------
+    spthClick(peopleNo) {
+      console.log("人员编号是：" + peopleNo);
+
+      this.login("PCUser", peopleNo);
+    },
+    // 视频通话功能----------------------------------------------------------A
+    async login(PCUser, peopleNo) {
+      this.loading = true;
+      var userId = PCUser;
+      let _this = this;
+      // var loginDetail;
+
+      console.log("第二次登录");
+      let result = await this.$axios.login({
+        userId,
+      });
+
+      if (result.code !== 200) {
+        this.loading = false;
+        _this.$message("登录失败, 请检查 CallLib Demo Server 是否启动");
+      } else {
+        this.loading = false;
+        setting.token = result.token;
+        this.RongLoginOkData = result;
+        let RongCall = window.RongCall;
+        RongCall.initIM(setting);
+
+        // this.$router.push({
+        //   path: "/cesiumCom/call/call",
+        //   query: {
+        //     phone: peopleNo,
+        //     userId: PCUser,
+        //   },
+        // });
+        let query = {
+          phone: peopleNo,
+          userId: PCUser,
+        };
+        this.partentInfo = query;
+
+        this.dialogVisible = true;
+        this.$refs.TongHua.inputCall(false);
+      }
+    },
+    // 视频通话功能----------------------------------------------------------B
+
+    // 前端代码======================================================E
+  },
+};
+</script>
+
+<style scoped>
+#CesiumBOX {
+  width: 100%;
+  height: 100%;
+}
+</style>