添加聊天功能，目前不能实时获取对方发送消息，将提示修改为el

src/api/chat.js

@@ -0,0 +1,46 @@
+import request from '@/utils/request.js'
+
+export const getFriendListService = (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_friend_list', params, {
+        headers: {
+            'token': data.token, // 将 token 替换为您的令牌值  
+        }
+    }
+    );
+}
+
+export const getMessageService = (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_message', params, {
+        headers: {
+            'token': data.token // 将 token 替换为您的令牌值  
+        }
+    }
+    );
+};
+
+export const sendMessageService = (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/send_message', params, {
+        headers: {
+            'token': data.token, // 将 token 替换为您的令牌值  
+        }
+    }
+    );
+};

src/router/index.js

@@ -9,6 +9,7 @@ import ImVue from "@/views/Im.vue";
 import CIDListVue from "@/views/CIDList.vue";
 import CIDLog from "@/views/CIDLog.vue";
 import DeviceRealVP from "@/views/DeviceRealVP.vue";
+import Chat from "@/views/Chat.vue"
 
 const routes = [
     {
@@ -56,6 +57,11 @@ const routes = [
         name: 'CIDLog',
         component: CIDLog
     },
+    {
+        path:"/chat",
+        name:"chat",
+        component:Chat
+    },
     {
         path: '/',
         redirect: '/login'

src/views/CIDList.vue

@@ -355,11 +355,13 @@ export default {
             <el-table-column
               prop="Script"
               label="脚本消息"
+              show-overflow-tooltip
               width="250"
             ></el-table-column>
             <el-table-column
               prop="Token"
               label="回调Token"
+              show-overflow-tooltip
               width="100"
             ></el-table-column>
             <el-table-column label="操作" width="350">

src/views/CIDLog.vue

@@ -245,11 +245,13 @@ export default {
               prop="Script"
               label="执行脚本"
               width="180"
+              show-overflow-tooltip
             ></el-table-column>
             <el-table-column
               prop="Log"
               label="运行日志"
               width="180"
+              show-overflow-tooltip
             ></el-table-column>
             <el-table-column
               prop="Error"

src/views/Chat.vue

@@ -0,0 +1,385 @@
+<template>
+    <el-container class="layout-container-demo" style="height: 700px;width: 1000px;">
+        <el-aside width="200px">
+            <el-scrollbar>
+                <el-menu :default-openeds="['1', '3']">
+                    <el-sub-menu index="1">
+                        <template #title>
+                            <el-icon>
+                                <message />
+                            </el-icon>联系人
+                        </template>
+                        <el-scrollbar height="300px">
+                            <el-menu-item-group v-for="user in userList" :key="user.id">
+                            <el-menu-item :index="String(user.id)" @click="handleGetMessage(user.id)" style="height: 40px;">
+                                {{ user.email }}
+                            </el-menu-item>
+                        </el-menu-item-group>
+                        </el-scrollbar>
+                    </el-sub-menu>
+                    <el-sub-menu index="2">
+                        <template #title>
+                            <el-icon><icon-menu /></el-icon>
+                            群组
+                        </template>
+                        <el-scrollbar height="200px">
+                            <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>
+                                <!-- <el-menu-item index="2-2">Option 2</el-menu-item> -->
+                            </el-menu-item-group>
+                        </el-scrollbar>
+                        
+                    </el-sub-menu>
+                </el-menu>
+            </el-scrollbar>
+        </el-aside>
+
+        <el-container width="800px">
+            <el-header style="text-align: right; font-size: 12px">
+                <div class="toolbar">
+                    <el-text class="mx-1" type="primary" style="margin-right: 10px;">{{ message }}</el-text>
+                    <!-- 重新连接websocket按钮 -->
+                    <ElButton type="primary" style="margin-right: 10px;" @click="reconnect()">重新连接</ElButton>
+
+                    <el-dropdown>
+                        <el-icon style="margin-right: 10px; margin-top: 1px" size="25px">
+                            <setting />
+                        </el-icon>
+                    </el-dropdown>
+                    <span @click="updateUser()" style=" margin-left: 30px; color: #12B7F5; text-decoration: underline; cursor: pointer;
+        ">修改用户名</span>
+                    <input type="text" v-if="isUpdate" v-model="newUserName" />
+                    <span v-if="isUpdate" @click="makeSure">确定</span>
+                    <div>
+                        <span style=" margin-right: 10px;margin-left: 10px;">{{ username }}</span>
+                        <el-avatar size="default" fit="fit"> {{ username }} </el-avatar>
+                    </div>
+                </div>
+            </el-header>
+
+            <el-main style="margin-top: 1px;">
+                <el-scrollbar class="chat-room" id="chat-room" ref="chatRoom" height="600px" style="margin-top: 1px" always>
+                    <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;">
+                            <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>
+                            </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">
+                                <span style="margin-right: 10px">{{ formatTime(item.CreatedAt)}}</span>
+                                <el-avatar size="default" fit="fit"> {{ item.username }} </el-avatar>
+                            </el-row>
+
+                            <el-row justify="end">
+                                <el-col :span="1000" class="msg2" style="margin-right: 20px;">
+                                    {{ item.Msg }}
+                                </el-col>
+                            </el-row>
+                        </div>
+                    </div>
+                </el-scrollbar>
+            </el-main>
+            <el-row class="row-bg" type="flex" justify="space-around" align="middle">
+                <el-col :span="20">
+                    <el-input type="text" style="width: 100%" autofocus @keyup.enter="handleSendBtnClick"
+                        placeholder="请输入消息按Enter发送" v-model="currentMsg"></el-input>
+                </el-col>
+                <el-col :span="2">
+                    <el-button class="sendBtn" @click="handleSendBtnClick" type="primary" size="default">
+                        发送
+                    </el-button>
+                </el-col>
+            </el-row>
+        </el-container>
+    </el-container>
+</template>
+
+<script>
+import axios from "axios";
+import { inject } from "vue";
+import { getFriendListService } from "@/api/chat.js";
+import { getMessageService} from "@/api/chat.js";
+import {sendMessageService} from "@/api/chat.js";
+import { ElAvatar, ElDropdown, ElDropdownItem, ElDropdownMenu, ElIcon, ElMenu, ElMenuItem, ElMenuItemGroup, ElScrollbar, ElRow, ElCol, ElButton } from 'element-plus'
+import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'
+import router from "@/router/index.js";
+import {ElMessage} from "element-plus";
+
+export default {
+  data() {
+    return {
+      ip: "",
+      tableData: [],
+      tokenData: {
+        token: localStorage.getItem("token"),
+        ip: localStorage.getItem("ip"),
+        userId: localStorage.getItem("userId"),
+        username: localStorage.getItem("username"),
+      },
+      username: localStorage.getItem("username"),
+      userList: [],
+      to_user_id:0,
+      cur_user_id:0,
+      cur_user_name: "",
+      eventSource: null,  // 事件源
+      uid: localStorage.getItem("userId"),
+      currentMsg:"",
+      MsgList: [],
+      groupList: [],
+    };
+  },
+
+  // methods 是一些用来更改状态与触发更新的函数
+  // 它们可以在模板中作为事件处理器绑定
+  methods: {
+    async handleSelectUser(){
+        let result = {};
+      try {
+        result = await getFriendListService(this.tokenData);
+      } catch (e) {
+        console.log(e);
+      }
+      let data = result.data;
+      this.userList=data.friends;
+      this.groupList=data.groups;
+    },
+    async handleGetMessage(id){
+        let result = {};
+        this.to_user_id=id;
+        this.cur_user_id=id;
+        console.log("uid:",this.uid,"\tcur_user_id:",this.cur_user_id)
+      try {
+        let req={
+            token: localStorage.getItem("token"),
+            ip: localStorage.getItem("ip"),
+            userId: localStorage.getItem("userId"),
+            username: localStorage.getItem("username"),
+            from_user_id:id,
+            to_user_id:localStorage.getItem("userId"),
+            index:2,
+            type:1,
+        }
+        result = await getMessageService(req);
+      } catch (e) {
+        console.log(e);
+      }
+      let data = result.data;
+      if(data === undefined){
+        ElMessage({
+            message: "消息获取失败！",
+            type: "error",
+          })
+        return;
+      }
+      //data sort by created time
+      for (let i = 0; i < data.length; i++) {
+        for (let j = i + 1; j < data.length; j++) {
+          if (data[i].CreatedAt > data[j].CreatedAt) {
+            let temp = data[i];
+            data[i] = data[j];
+            data[j] = temp;
+          }
+        }
+      }
+      this.MsgList=data;
+      this.scrollToBottom();
+    },
+    formatTime(time){
+        let date = new Date(time);
+        let year = date.getFullYear();
+        let month = date.getMonth() + 1;
+        let day = date.getDate();
+        let hour = date.getHours();
+        let minute = date.getMinutes();
+        let second = date.getSeconds();
+        return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
+    },
+    connectSSE(){
+        if (!!window.EventSource) { 
+            this.eventSource = new EventSource("https://gep.ljsea.xyz/im/sse_msg?token="+this.tokenData.token);
+            let this_=this
+            this.eventSource.onmessage = function(event) {
+                console.log(event.data);
+                let msg = JSON.parse(event.data);
+                if(msg.type !=="check"){
+                    alert(msg);
+                    this_.MsgList.push(msg);
+                }
+             };
+            this.eventSource.onerror = (error) => {  
+            if (this.eventSource.readyState === EventSource.CLOSED) {  
+                //console.log('Connection was closed by the server.');  
+                ElMessage({
+                    message: "连接已关闭！",
+                    type: "error",
+                })
+                // Optionally, try to reconnect  
+            } else {  
+                //console.error('EventSource failed:', error);  
+                ElMessage({
+                    message: "连接失败！服务器无法实时推送消息！",
+                    type: "error",
+                })
+                // Handle error  
+            }  
+        };
+        }else{
+            ElMessage({
+                message: "您的浏览器不支持SSE！",
+                type: "error",
+            })
+        }
+    },
+    scrollToBottom() {
+        this.$nextTick(() => {  
+      const scrollbar = this.$refs.chatRoom.$el.querySelector('.el-scrollbar__wrap');  
+      if (scrollbar) {  
+        scrollbar.scrollTop = scrollbar.scrollHeight;  
+      }  
+    });  
+        },
+    async handleSendBtnClick(){
+        let result = {};
+      try {
+        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:this.to_user_id,
+            msg:this.currentMsg,
+            type:1,
+        }
+        result = await sendMessageService(req);
+        if(result.code !==0){
+            ElMessage({
+                message: "消息发送失败！",
+                type: "error",
+              })
+        }
+        let msg={
+            ID:result.Data,
+            FromUserID:localStorage.getItem("userId"),
+            ToUserID:this.to_user_id,
+            Msg:this.currentMsg,
+            CreatedAt:new Date(),
+        }
+        this.MsgList.push(msg);
+        this.scrollToBottom();
+      } catch (e) {
+        console.log(e);
+      }
+      this.currentMsg="";
+    },
+    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();
+    await this.handleSelectUser();
+    //this.connectSSE();
+    this.handleGetMessage(this.userList[0].id);
+  },
+};
+</script>
+
+<style scoped>
+.layout-container-demo .el-header {
+    position: relative;
+    /* background-color: var(--el-color-primary-light-7); */
+    color: var(--el-text-color-primary);
+}
+
+.layout-container-demo .el-aside {
+    color: var(--el-text-color-primary);
+    /* background: var(--el-color-primary-light-8); */
+}
+
+.layout-container-demo .el-menu {
+    border-right: none;
+}
+
+.layout-container-demo .el-main {
+    padding: 0;
+}
+
+.layout-container-demo .toolbar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    right: 5px;
+}
+
+.msg {
+    background-color: #73d1f3;
+    /* box-shadow: rgba(18, 23, 45, 0.6) 0px 8px 24px; */
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 18px;
+    line-height: 16px;
+    /* width: auto; */
+    /* max-width: 330px; */
+    margin-top: 20px;
+    color: white;
+}
+
+.msg2 {
+    background-color: #12B7F5;
+    /* box-shadow: rgba(18, 23, 45, 0.6) 0px 8px 24px; */
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 18px;
+    line-height: 16px;
+    /* width: auto; */
+    /* max-width: 330px; */
+    margin-top: 20px;
+    color: white;
+}
+</style>

src/views/DeviceList.vue

@@ -7,6 +7,7 @@ import { addDeviceService } from "@/api/device.js";
 import { deleteDeviceService } from "@/api/device.js";
 import { updateDeviceService } from "@/api/device.js";
 import router from "@/router/index.js";
+import { ElMessage } from 'element-plus';  
 
 export default {
   data() {
@@ -93,9 +94,11 @@ export default {
       try {
         var d_re = await restartDeviceService(restart_data);
         if (d_re.code == 0) {
-          alert("重启成功");
+          //alert("重启成功");
+          ElMessage.success('重启成功');
         } else {
           alert("操作失败");
+          ElMessage.fail('操作失败');
         }
       } catch (e) {
         console.log(e);
@@ -116,11 +119,13 @@ export default {
       try {
         var d_re = await deleteDeviceService(delete_data);
         if (d_re.code == 0) {
-          alert("删除成功");
+          //alert("删除成功");
+          ElMessage.success('删除成功');
           //刷新页面
           this.getDeviceList();
         } else {
-          alert("操作失败");
+          //alert("操作失败");
+          ElMessage.fail("操作失败");
         }
       } catch (e) {
         console.log(e);
@@ -144,9 +149,10 @@ export default {
       try {
         result = await addDeviceService(this.addForm);
         if (result.code == 0) {
-          alert("添加成功");
+          ElMessage.success("添加成功");
         } else {
-          alert("添加失败");
+          //alert("添加失败");
+          ElMessage.error("添加失败")
         }
       } catch (e) {
         console.log(e);
@@ -158,7 +164,8 @@ export default {
       try {
         result = await updateDeviceService(this.updateForm);
         if (result.code == 0) {
-          alert("修改成功");
+          //alert("修改成功");
+          ElMessage.success("修改成功");
           this.getDeviceList()
         } else {
           alert("修改失败");
@@ -178,7 +185,8 @@ export default {
       try {
         var d_re = await restartDeviceService(restart_data);
         if (d_re.code == 0) {
-          alert("重启成功");
+          //alert("重启成功");
+          ElMessage.success("重启成功");
         } else {
           alert("操作失败");
         }

src/views/VideoList.vue

@@ -233,6 +233,9 @@ export default {
     <el-button type="primary" size="mini" @click.prevent="handleMenuSelect('/User')"
       >用户</el-button
     >
+    <el-button type="primary" size="mini" @click.prevent="handleMenuSelect('/chat')"
+      >聊天</el-button
+    >
     <el-button
       type="primary"
       size="mini"