添加群聊及管理群组信息

src/api/chat.js

@@ -44,3 +44,11 @@ export const sendMessageService = (data) => {
     }
     );
 };
+
+export const addGroupService = (data) => {
+    const params = new URLSearchParams();
+    for (let key in data) {
+        params.append(key, data[key])
+    }
+    return request.post('/im/create_group', params, { "headers": { 'token': data.token },'Content-Type': 'application/json' });
+}

src/api/group.js

@@ -0,0 +1,42 @@
+import request from '@/utils/request.js'
+
+
+
+export const updateDeviceService = (data) => {
+    const params = new URLSearchParams();
+    for (let key in data) {
+        params.append(key, data[key])
+    }
+    return request.post('/device/update_device', params, { "headers": { 'token': data.token } });
+}
+
+export const deleteDeviceService = (data) => {
+    const params = new URLSearchParams();
+    for (let key in data) {
+        params.append(key, data[key])
+    }
+    return request.post('/device/delete_device', params, { "headers": { 'token': data.token } });
+}
+
+export const addDeviceService = (data) => {
+    const params = new URLSearchParams();
+    for (let key in data) {
+        params.append(key, data[key])
+    }
+    return request.post('/device/add_device', params, { "headers": { 'token': data.token },'Content-Type': 'application/json' });
+}
+
+export const getGroupListService = (data) => {
+    const params = new URLSearchParams();
+    for (let d in data) {
+        params.append(d, data[d]);
+    }
+    // request.headers["Content-Type"] = "application/json";
+    request.defaults.headers["token"] = data.token.value;
+    return request.post('/im/get_group', params, {
+        headers: {
+            'token': data.token, // 将 token 替换为您的令牌值  
+        }
+    }
+    );
+}

src/api/user.js

@@ -52,6 +52,30 @@ export const getFriendReqService = (Data) => {
     })
 }
 
+export const GetUserInfoService = (Data) => {
+    const params = new URLSearchParams();
+    for (let key in Data) {
+        params.append(key, Data[key])
+    }
+    return request.post('/user/info', params, {
+        headers: {
+            'token': Data.token, // 将 token 替换为您的令牌值  
+        }
+    })
+}
+
+export const DelFGService =(Data) =>{
+    const params = new URLSearchParams();
+    for (let key in Data) {
+        params.append(key, Data[key])
+    }
+    return request.post('/im/del_friend_or_group', params, {
+        headers: {
+            'token': Data.token, // 将 token 替换为您的令牌值  
+        }
+    })
+}
+
 export const acceptInviteService =(Data)=> {
     const params = new URLSearchParams();
     for (let key in Data) {

src/router/index.js

@@ -10,6 +10,7 @@ import CIDListVue from "@/views/CIDList.vue";
 import CIDLog from "@/views/CIDLog.vue";
 import DeviceRealVP from "@/views/DeviceRealVP.vue";
 import Chat from "@/views/Chat.vue"
+import Group from "@/views/Group.vue"
 
 const routes = [
     {
@@ -52,6 +53,11 @@ const routes = [
         name: 'CID',
         component: CIDListVue
     },
+    {
+        path: "/group",
+        name: "Group",
+        component: Group
+    },
     {
         path: '/cidlog',
         name: 'CIDLog',

src/utils/request.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 import router from "@/router/index.js";
-const baseURL = "https://gep.ljsea.xyz/";
+//const baseURL = "https://gep.ljsea.xyz/";
-//const baseURL= "http://localhost:8082";
+const baseURL= "http://localhost:8083";
 const request = axios.create({
   baseURL: baseURL,
 });

src/views/Chat.vue

@@ -20,7 +20,6 @@
                                 {{ user.name }}
                                 <span v-if="hasUnreadMsg[user.id]" class="unread-dot"></span>
                             </el-menu-item>
-                            
                         </el-menu-item-group>
                         </el-scrollbar>
                     </el-sub-menu>
@@ -30,9 +29,9 @@
                             群组
                         </template>
                         <el-scrollbar height="200px">
-                            <el-menu-item-group v-for="item in groupList" :key="item.id">
+                            <el-menu-item-group v-for="item in groupList" :key="item.ID">
                                 <!-- <template #title>Group 1</template> -->
-                                <el-menu-item :index="String(item.group_name)" @click="handleSelectGroup">{{ item.group_name
+                                <el-menu-item :index="String(item.GroupName)" @click="handleGetGroupMessage(item.ID)">{{ item.GroupName
                                 }}</el-menu-item>
                                 <!-- <el-menu-item index="2-2">Option 2</el-menu-item> -->
                             </el-menu-item-group>
@@ -72,7 +71,7 @@
                     <div v-for="item in MsgList" :key="item.ID"
                         style="margin-top: 10px;margin-bottom: 20px;">
                         <!-- 左边 -->
-                        <div v-if="uid == item.ToUserID && item.FromUserID == cur_user_id" style="margin-left: 10px;margin-bottom: 8px;">
+                        <div v-if="uid == item.ToUserID && item.FromUserID == cur_user_id && cur_group_id==0" style="margin-left: 10px;margin-bottom: 8px;">
                             <el-row class="row-bg" type="flex" align="middle">
                                 <el-avatar size="default" fit="fit">{{ cur_user_name }}</el-avatar>
                                 <span style="margin-left: 10px">{{ formatTime(item.CreatedAt) }}</span>
@@ -84,6 +83,18 @@
                                 </el-col>
                             </el-row>
                         </div>
+                        <div v-if="cur_group_id !=0 && uid != item.FromUserID" style="margin-left: 10px;margin-bottom: 8px;">
+                            <el-row class="row-bg" type="flex" align="middle">
+                                <el-avatar size="default" fit="fit">{{ item.name}}</el-avatar>
+                                <span style="margin-left: 10px">{{ formatTime(item.CreatedAt) }}</span>
+                            </el-row>
+
+                            <el-row>
+                                <el-col :span="1000" :offset="1" class="msg" >
+                                    {{ item.Msg }}
+                                </el-col>
+                            </el-row>
+                        </div>
                         <!-- 右边 -->
                         <div v-if="uid == item.FromUserID && item.ToUserID == cur_user_id" style="margin-right: 10px;margin-bottom: 8px;">
                             <el-row class="row-bg" type="flex" justify="end" align="middle">
@@ -112,6 +123,14 @@
                 </el-col>
             </el-row>
         </el-container>
+        <el-container width="200px">
+            <el-main>
+              <!-- 用户信息 -->
+              <el-card>
+                <template #header>{{cur_user_name}}</template>
+              </el-card>
+            </el-main>
+        </el-container>    
     </el-container>
 </template>
 
@@ -142,6 +161,8 @@ export default {
       filteredUsers: [], // 过滤后的用户列表 
       to_user_id:0,
       cur_user_id:0,
+      cur_group_id:0,
+      msg_type:1,
       searchName: '', // 搜索框内容
       history_cnt: 1,
 
@@ -181,6 +202,47 @@ export default {
       this.history_cnt++
       this.handleGetMessage(this.cur_user_id);
     },
+    async handleGetGroupMessage(id){
+      this.cur_group_id=id;
+      this.cur_user_id=0;
+      this.to_user_id=0;
+      this.msg_type=2;
+      let result={}
+      try {
+        let req={
+            token: localStorage.getItem("token"),
+            ip: localStorage.getItem("ip"),
+            userId: localStorage.getItem("userId"),
+            username: localStorage.getItem("username"),
+            group_id:id,
+            index:this.history_cnt,
+            type:2,
+        }
+        result = await getMessageService(req);
+      } catch (e) {
+        console.log(e);
+      }
+      let data = result.data;
+      if(data === undefined || data === null){
+        ElMessage({
+            message: "无消息！",
+            type: "error",
+          })
+          this.MsgList=[]
+        return;
+      }
+      data.sort((a, b) => {
+        const dateA = new Date(a.CreatedAt);  
+        const dateB = new Date(b.CreatedAt);  
+          
+        // 返回时间差，用于排序  
+        return dateA - dateB; 
+      });
+      this.MsgList=data;
+      if(this.history_cnt <=2){
+        this.scrollToBottom();
+      }
+    },
     async handleGetMessage(id){
         let result = {};
         if(this.to_user_id!=id){
@@ -188,6 +250,8 @@ export default {
         }
         this.to_user_id=id;
         this.cur_user_id=id;
+        this.cur_group_id=0;
+        this.msg_type=1;
         console.log("uid:",this.uid,"\tcur_user_id:",this.cur_user_id)
         for(let i=0; i<this.userList.length; i++){
             if(this.userList[i].id === id){
@@ -205,7 +269,7 @@ export default {
             from_user_id:id,
             to_user_id:localStorage.getItem("userId"),
             index:this.history_cnt,
-            type:1,
+            type:this.msg_type,
         }
         result = await getMessageService(req);
       } catch (e) {
@@ -294,7 +358,6 @@ export default {
             message: "连接已关闭",
             type: "error",
           })
-          router.push("/user");
         };
         //  浏览器端收消息，获得从服务端发送过来的文本消息
         this.socket.onmessage = async function (msg) {
@@ -388,8 +451,9 @@ export default {
             username: localStorage.getItem("username"),
             from_user_id:localStorage.getItem("userId"),
             to_user_id:this.to_user_id,
+            group_id:this.cur_group_id,
             msg:this.currentMsg,
-            type:1,
+            type:this.msg_type,
         }
         result = await sendMessageService(req);
         if(result.code !==0){
@@ -402,6 +466,7 @@ export default {
             ID:result.Data,
             FromUserID:localStorage.getItem("userId"),
             ToUserID:this.to_user_id,
+            GroupID:this.cur_group_id,
             Msg:this.currentMsg,
             CreatedAt:new Date(),
         }

src/views/Group.vue

@@ -0,0 +1,527 @@
+<script>
+import axios from "axios";
+import { inject } from "vue";
+import { getGroupListService } from "@/api/group.js";
+import { restartDeviceService } from "@/api/device.js";
+import { addDeviceService } from "@/api/device.js";
+import { deleteDeviceService } from "@/api/device.js";
+import { getFriendListService } from "@/api/chat.js";
+import { addGroupService} from "@/api/chat.js";
+import {sendMessageService} from "@/api/chat.js";
+import { updateDeviceService } from "@/api/device.js";
+import router from "@/router/index.js";
+import { ElMessage } from 'element-plus';  
+
+export default {
+  data() {
+    return {
+      ip: "",
+      FriendsTableIsDisplay:false,
+      tableData: [],
+      group_id:0,
+      tokenData: {
+        token: localStorage.getItem("token"),
+        ip: localStorage.getItem("ip"),
+        userId: localStorage.getItem("userId"),
+        username: localStorage.getItem("username"),
+      },
+      addDialogVisible: false,
+      updateDialogVisible: false,
+      searchForm: {
+        hour: 0,
+        entrydate: [],
+      },
+      addForm: {
+        group_name: "",
+        group_info: "",
+        group_type: "",
+        group_icon:"",
+        auth_id: -1,
+        token: localStorage.getItem("token"),
+      },
+      updateForm: {
+        id:0,
+        device_name: "",
+        device_ip: "",
+        device_status: "",
+        device_info: "",
+        device_location: "",
+        device_type: "",
+        auth_id: -1,
+        token: localStorage.getItem("token"),
+      },
+    };
+  },
+
+  // methods 是一些用来更改状态与触发更新的函数
+  // 它们可以在模板中作为事件处理器绑定
+  methods: {
+    async getGroupList() {
+      let result = {};
+      try {
+        result = await getGroupListService(this.tokenData);
+      } catch (e) {
+        console.log(e);
+      }
+      let data = result.data;
+
+      //   for(let d in data){
+      //     let res = JSON.parse(d);
+      //     console.log("res=",res);
+      //     this.tableData.push(res);
+      //   }
+      //   console.log(this.tableData);
+
+      this.tableData = data;
+    },
+    onSubmit() {
+      getGroupList({ token: token });
+    },
+    handleSizeChange() {
+      alert("每页记录数变化" + val);
+    },
+    handleCurrentChange() {
+      alert("页码发生变化" + val);
+    },
+        //获取好友列表
+    async displayFriends(index){
+      this.group_id = this.tableData[index].ID;
+      let result ={}
+      try{
+        result = await getFriendListService(this.tokenData);
+        if(result.code ===0){
+          this.FriendsGList = result.data.friends;
+          this.GroupList=result.data.groups;
+          this.FriendsTableIsDisplay = true;
+        }else{
+          ElMessage.error("获取好友列表失败");
+        }
+      }catch(e){
+        console.log(e);
+      }
+    },
+
+    //设置设备重启
+    async inviteUser(index) {
+      var id = this.tableData[index].ID;
+      var restart_data = {
+        id: id,
+        option: "one",
+        ip: this.ip,
+        userId: this.tokenData.userId,
+        token: this.tokenData.token,
+      };
+      try {
+        var d_re = await restartDeviceService(restart_data);
+        if (d_re.code == 0) {
+          //alert("重启成功");
+          ElMessage.success('重启成功');
+        } else {
+          alert("操作失败");
+          ElMessage.fail('操作失败');
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    playRealVp(index) {
+      var id = this.tableData[index].ID;
+      localStorage.setItem("realvp_device_id", id);
+      router.push("/deviceRealVP");
+    },
+    async deleteDevice(index) {
+      var id = this.tableData[index].ID;
+      var delete_data = {
+        id: id,
+        userId: this.tokenData.userId,
+        token: this.tokenData.token,
+      };
+      try {
+        var d_re = await deleteGroupService(delete_data);
+        if (d_re.code == 0) {
+          //alert("删除成功");
+          ElMessage.success('删除成功');
+          //刷新页面
+          this.getGroupList();
+        } else {
+          //alert("操作失败");
+          ElMessage.fail("操作失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async updateButtonDevice(index) {
+      var id = this.tableData[index].ID;
+      this.group_id = id;
+      this.updateForm.device_name = this.tableData[index].DeviceName;
+      this.updateForm.device_ip = this.tableData[index].DeviceIP;
+      this.updateForm.device_status = this.tableData[index].DeviceStatus;
+      this.updateForm.device_info = this.tableData[index].DeviceInfo;
+      this.updateForm.device_location = this.tableData[index].DeviceLocation;
+      this.updateForm.device_type = this.tableData[index].DeviceType;
+      this.updateForm.auth_id = this.tableData[index].AuthID;
+      this.updateForm.id = id;
+      this.updateDialogVisible= true;
+    },
+    async addGroup() {
+      this.addDialogVisible = false;
+      let result = {};
+      try {
+        result = await addGroupService(this.addForm);
+        if (result.code == 0) {
+          ElMessage.success("添加成功");
+        } else {
+          //alert("添加失败");
+          ElMessage.error("添加失败")
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async updateGroup() {
+      this.updateDialogVisible = false;
+      let result = {};
+      try {
+        result = await updateGroupService(this.updateForm);
+        if (result.code == 0) {
+          //alert("修改成功");
+          ElMessage.success("修改成功");
+          this.getGroupList()
+        } else {
+          alert("修改失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async restartAllDevice() {
+      var restart_data = {
+        id: id,
+        ip: this.ip,
+        option: "all",
+        userId: this.tokenData.userId,
+        token: this.tokenData.token,
+      };
+      try {
+        var d_re = await restartDeviceService(restart_data);
+        if (d_re.code == 0) {
+          //alert("重启成功");
+          ElMessage.success("重启成功");
+        } else {
+          alert("操作失败");
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async inviteFriendAddGroup(index){
+      var id = this.FriendsGList[index].id;
+      let req={
+            token: localStorage.getItem("token"),
+            ip: localStorage.getItem("ip"),
+            userId: localStorage.getItem("userId"),
+            username: localStorage.getItem("username"),
+            from_user_id:localStorage.getItem("userId"),
+            to_user_id:id,
+            group_id:this.group_id,
+            msg:this.currentMsg,
+            type:6,
+        }
+      try {
+        var d_re = await sendMessageService(req);
+        if (d_re.code == 0) {
+          //alert("邀请成功");
+          ElMessage.success("邀请成功");
+        } else {
+          //alert("操作失败");
+          ElMessage.error("操作失败:"+d_re.error);
+        }
+      } catch (e) {
+        console.log(e);
+      }
+    },
+    async getIpClient() {
+      try {
+        const response = await axios.get("https://ipinfo.io/json");
+        this.ip = response.data.ip;
+        localStorage.setItem("ip", this.ip);
+        //console.log(response);
+      } catch (error) {
+        console.error(error);
+      }
+    },
+    handleMenuSelect(val) {
+      router.push(val);
+    },
+    toVideoList() {
+      router.push("/videoList");
+    },
+    // 修改条纹颜色
+    tableRowClassName({ row, rowIndex }) {
+      if (row.human === 1) {
+        return {
+          background: "#488aff",
+        };
+      } else {
+        return "";
+      }
+    },
+  },
+
+  // 生命周期钩子会在组件生命周期的各个不同阶段被调用
+  // 例如这个函数就会在组件挂载完成后被调用
+  async mounted() {
+    let now = new Date();
+    if (localStorage.getItem("token") === null) {
+      router.push("/login");
+    }
+    // console.log("mounted");
+    await this.getIpClient();
+    this.getGroupList();
+  },
+};
+</script>
+
+<template>
+  <div>
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/videoList')"
+      >视频列表</el-button
+    >
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/device')"
+      >设备管理</el-button
+    >
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/User')"
+      >用户</el-button
+    >
+    <el-button
+      type="primary"
+      size="mini"
+      @click.prevent="handleMenuSelect('/cid')"
+      >集成部署</el-button
+    >
+    <el-container style="height: 700px; border: 1px solid #eee">
+      <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
+        >群组</el-header
+      >
+      <el-container>
+        <el-main>
+          <!-- 表单 -->
+          <el-form :inline="true" :model="tokenData" class="demo-form-inline">
+            <el-form-item>
+              <el-button type="primary" @click="addDialogVisible = true"
+                >建群</el-button
+              >
+            </el-form-item>
+            <el-form-item>
+              <el-dialog
+                v-model="addDialogVisible"
+                title="建群"
+                width="50%"
+                :before-close="handleClose"
+              >
+                <!-- 内容主体区域 -->
+                <el-form
+                  ref="addFormRef"
+                  :model="addForm"
+                  :rules="addFormRules"
+                  label-width="70px"
+                >
+                  <el-form-item label="名称" prop="device_name">
+                    <el-input
+                      v-model="addForm.group_name"
+                      autocomplete="on"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="描述" prop="info">
+                    <el-input v-model="addForm.group_info"></el-input>
+                  </el-form-item>
+                  <el-form-item label="类型" prop="type">
+                    <el-input v-model="addForm.group_type"></el-input>
+                  </el-form-item>
+                  <el-form-item label="icon" prop="device_info">
+                    <el-input v-model="addForm.group_icon"></el-input>
+                  </el-form-item>
+                </el-form>
+                <!-- 底部区域 -->
+                <template #footer>
+                  <span class="dialog-footer">
+                    <el-button @click="addDialogVisible = false"
+                      >取消</el-button
+                    >
+                    <el-button type="primary" @click="addGroup()"
+                      >确定</el-button
+                    >
+                  </span>
+                </template>
+              </el-dialog>
+            </el-form-item>
+
+            <el-form-item>
+              <el-dialog
+                v-model="updateDialogVisible"
+                title="修改设备"
+                width="50%"
+                :before-close="handleClose"
+              >
+                <!-- 内容主体区域 -->
+                <el-form
+                  ref="updateFormRef"
+                  :model="updateForm"
+                  :rules="updateFormRules"
+                  label-width="70px"
+                >
+                  <el-form-item label="设备名称" prop="device_name">
+                    <el-input
+                      v-model="updateForm.device_name"
+                      autocomplete="on"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="设备IP" prop="device_ip">
+                    <el-input v-model="updateForm.device_ip"></el-input>
+                  </el-form-item>
+                  <el-form-item label="设备状态" prop="device_status">
+                    <el-select v-model="updateForm.device_status">
+                      <el-option label="在线" value="在线"></el-option>
+                      <el-option label="离线" value="离线"></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="设备类型" prop="device_type">
+                    <el-input v-model="updateForm.device_type"></el-input>
+                  </el-form-item>
+                  <el-form-item label="设备位置" prop="device_location">
+                    <el-input v-model="updateForm.device_location"></el-input>
+                  </el-form-item>
+                  <el-form-item label="设备信息" prop="device_info">
+                    <el-input v-model="updateForm.device_info"></el-input>
+                  </el-form-item>
+                </el-form>
+                <!-- 底部区域 -->
+                <template #footer>
+                  <span class="dialog-footer">
+                    <el-button @click="updateDialogVisible = false"
+                      >取消</el-button
+                    >
+                    <el-button type="primary" @click="updateDevice()"
+                      >确定</el-button
+                    >
+                  </span>
+                </template>
+              </el-dialog>
+            </el-form-item>
+          </el-form>
+
+          <el-dialog
+            title="用户好友"
+            width="40%"
+            v-model="FriendsTableIsDisplay"
+            center>
+
+            <el-table :data="FriendsGList" width="100%">
+              <el-table-column prop="id" label="id" width="80"></el-table-column>
+              <el-table-column
+                prop="name"
+                label="名称"
+                width="100"
+              ></el-table-column>
+              <el-table-column
+                prop="email"
+                label="用户邮箱"
+                width="180"
+              ></el-table-column>
+              <el-table-column>
+                <template #default="scope">
+                  <el-button
+                    type="primary"
+                    size="mini"
+                    @click.prevent="inviteFriendAddGroup(scope.$index)"
+                    >邀请</el-button
+                  >
+                  </template>
+              </el-table-column>
+            </el-table>
+          </el-dialog>
+
+          <!-- 表格  :row-style="this.tableRowClassName"-->
+          <el-table :data="tableData" width="100%" border>
+            :row-style="this.tableRowClassName"
+            <el-table-column prop="ID" label="id" width="80"></el-table-column>
+            <el-table-column
+              prop="GroupName"
+              label="名称"
+              width="100"
+            ></el-table-column>
+            <el-table-column
+              prop="GroupInfo"
+              label="描述"
+              width="180"
+            ></el-table-column>
+            <el-table-column
+              prop="GroupType"
+              label="类型"
+              width="120"
+            ></el-table-column>
+            <el-table-column
+              prop="CreatedAt"
+              label="创建时间"
+              width="120"
+            ></el-table-column>
+            <el-table-column
+              prop="UpdatedAt"
+              label="更新时间"
+              width="120"
+            ></el-table-column>
+            <el-table-column label="操作" width="350">
+              <template #default="scope">
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="displayFriends(scope.$index)"
+                  >邀请</el-button
+                >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="updateButtonDevice(scope.$index)"
+                  >修改</el-button
+                >
+                <el-button
+                  type="primary"
+                  size="mini"
+                  @click.prevent="deleteDevice(scope.$index)"
+                  >删除</el-button
+                >
+                <!-- <el-button type="danger" size="mini">删除</el-button> -->
+              </template>
+            </el-table-column>
+          </el-table>
+          <br />
+
+          <!-- 分页条 -->
+          <!-- Pagination 分页 -->
+          <!-- <el-pagination
+            background
+            layout="total,sizes, prev, pager, next, jumper"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :total="1000"
+          ></el-pagination> -->
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+<style>
+.blueRowbg {
+  background: "#488aff";
+}
+</style>

src/views/UserList.vue

@@ -3,6 +3,8 @@ import axios from "axios";
 import { SearchUserService } from "@/api/user.js";
 import { getFriendReqService } from "@/api/user.js";
 import {acceptInviteService } from "@/api/user.js";
+import {GetUserInfoService} from "@/api/user.js";
+import {DelFGService} from "@/api/user.js";
 import router from "@/router/index.js";
 import Cookies from "js-cookie";
 import { getFriendListService } from "@/api/chat.js";
@@ -14,8 +16,10 @@ export default {
       ip: "",
       tableData: [],
       search_id: 2002,
+      UserUpdateForm:{},
       keyword: "",
       FriendsRequestIsDisplay:false,
+      updateDialogVisible: false,
       FriendsGRequestList:[],
       FriendsTableIsDisplay:false,
       FriendsGList:[],
@@ -106,12 +110,12 @@ export default {
       var name = this.FriendsGList[index].name;
       let result ={}
       try{
-        result =await sendMessageService({
+        result =await DelFGService({
           token: localStorage.getItem("token"),
           from_user_id: localStorage.getItem("userId"),
           to_user_id: id,
           msg: "删除好友",
-          type: 5,
+          type: 1,
         });
         if(result.code ===0){
           ElMessage.success("删除好友成功");
@@ -177,22 +181,24 @@ export default {
       alert("页码发生变化" + val);
     },
 
-    //设置设备重启
+    async displayMyInfo() {
-    async startChat(index) {
+      let result = {};
-      var id = this.tableData[index].ID;
+      try{
-      var name = this.tableData[index].Name;
+        //获取用户信息
-      //   var user_data = {
+        result = await GetUserInfoService(this.tokenData)
-      //     to_user_id: id,
+        if(result.code ===0){
-      //     to_user_name: this.tableData[index].Name,
+          this.UserUpdateForm.id = result.data.ID;
-      //   };
+          this.UserUpdateForm.name = result.data.Name;
-      //转到聊天页面
+          this.UserUpdateForm.email = result.data.Email;
-      if(id == localStorage.getItem("userId")){
+          this.UserUpdateForm.age = result.data.Age;
-        alert("不能和自己聊天");
+          this.UserUpdateForm.role = result.data.Role;
-        return;
+          this.UserUpdateForm.gender = result.data.Gender;
+          this.UserUpdateForm.create_time = result.data.CreatedAt;
         }
-      localStorage.setItem("to_user_id", id);
+      }catch(e){
-      localStorage.setItem("to_user_name", name);
+        console.log(e);
-      router.push("/im");
+      }
+      this.updateDialogVisible= true;
     },
 
     handleMenuSelect(val) {
@@ -252,6 +258,7 @@ export default {
       @click.prevent="handleMenuSelect('/cid')"
       >集成部署</el-button
     >
+
     <el-container style="height: 700px; border: 1px solid #eee">
       <el-header style="font-size: 40px; background-color: rgb(238, 241, 246)"
         >用户搜索列表</el-header
@@ -284,6 +291,67 @@ export default {
                 >好友请求</el-button
               >
             </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="displayMyInfo()"
+                >我的信息</el-button
+              >
+            </el-form-item>
+            <el-form-item>
+              <el-dialog
+                v-model="updateDialogVisible"
+                title="我的信息"
+                width="50%"
+                :before-close="handleClose"
+              >
+                <!-- 内容主体区域 -->
+                <el-form
+                  ref="updateFormRef"
+                  :model="UserUpdateForm"
+                  :rules="UserUpdateFormRules"
+                  label-width="70px"
+                >
+                <el-form-item label="ID" prop="id">
+                    <el-input
+                      disabled
+                      v-model="UserUpdateForm.id"
+                      autocomplete="on"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="用户名" prop="name">
+                    <el-input
+                      v-model="UserUpdateForm.name"
+                      autocomplete="on"
+                    ></el-input>
+                  </el-form-item>
+                  <el-form-item label="邮箱" prop="email">
+                    <el-input v-model="UserUpdateForm.email"></el-input>
+                  </el-form-item>
+                  <el-form-item label="Age" prop="age">
+                    <el-input v-model="UserUpdateForm.age"></el-input>
+                  </el-form-item>
+                  <el-form-item label="性别" prop="gender">
+                    <el-input v-model="UserUpdateForm.gender"></el-input>
+                  </el-form-item>
+                  <el-form-item label="权限" prop="role">
+                    <el-input v-model="UserUpdateForm.role" disabled></el-input>
+                  </el-form-item>
+                  <el-form-item label="注册时间" prop="role">
+                    <el-input v-model="UserUpdateForm.create_time"></el-input>
+                  </el-form-item>
+                </el-form>
+                <!-- 底部区域 -->
+                <template #footer>
+                  <span class="dialog-footer">
+                    <el-button @click="updateDialogVisible = false"
+                      >取消</el-button
+                    >
+                    <el-button type="primary" @click="updateDevice()"
+                      >确定</el-button
+                    >
+                  </span>
+                </template>
+              </el-dialog>
+            </el-form-item>
             <!-- 表单 -->
           <el-form :inline="true" :model="tokenData" class="demo-form-inline">
             <el-form-item>

src/views/VideoList.vue

@@ -236,6 +236,9 @@ export default {
     <el-button type="primary" size="mini" @click.prevent="handleMenuSelect('/chat')"
       >聊天</el-button
     >
+    <el-button type="primary" size="mini" @click.prevent="handleMenuSelect('/group')"
+      >群组</el-button
+    >
     <el-button
       type="primary"
       size="mini"