Greasy Fork is available in English.
一个在电信领域的智能助手
当前为
// ==UserScript==
// @name 智能话席助手
// @description 一个在电信领域的智能助手
// @namespace http://tampermonkey.net/
// @license GPL-3.0-only
// @version 0.9
// @description 智能话席助手
// @author xiaoliang
// @match https://123.147.219.22:9114/
// @resource customCSS1 https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css
// @resource customCSS2 http://jqueryui.com/resources/demos/style.css
// @grant GM_addStyle
// @grant GM_getResourceText
// @require http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js
// @require https://code.jquery.com/ui/1.10.4/jquery-ui.js
// ==/UserScript==
(function() {
'use strict';
// Your code here...
if (!$) {
var s = document.createElement("script");
s.src = "http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js";
s.async = false;
document.documentElement.appendChild(s);
}
let openFlag = 1
let socket = null
let pre_status = ''
let cur_status = ''
let pre_phone = ''
let cur_phone = ''
let Phone = ''
let ProductName = ''
let StatusChangeMsg = {}
let InitParameterMsg = {
EventId: "InitParameter",
Data: {
ProjectId: 16,
ProjectName: '5G升级包外呼营销',
AgentName: ''
}
}
//加载在线样式
const css1 = GM_getResourceText("customCSS1");
const css2 = GM_getResourceText("customCSS2");
GM_addStyle(css1)
GM_addStyle(css2)
//构造文档
function createHTML() {
let logo = document.querySelector(".appContent")
let example = document.createElement("div")
example.classList.add("div-box")
example.innerHTML = `
<div id="draggable" class="container">
<div class="content">
<div class="close-btn">
<img src="https://192.168.0.59/image/close-logo.png" alt="">
</div>
<div class="v-drag-panel" style="top: 0;
left: 0;"></div>
<div class="v-drag-panel" style="bottom: 0;
left: 0;"></div>
<div class="h-drag-panel" style="bottom: 0;
left: 0;"></div>
<div class="h-drag-panel" style="bottom: 0;
left: 926px;"></div>
</div>
<button class="open-btn">
<img class="open-img" title="无法连接到坐席助手" src="https://192.168.0.59/image/in-intelligent-assistant.png" alt="">
</button>
</div>`
logo.appendChild(example)
}
//渲染样式
function addStyle() {
let css = `.container {
position: fixed;
z-index: 99999999;
top: 60px;
right: 0px;
}
.content {
position: relative;
}
.content iframe {
border: none;
}
.content .close-btn {
position: absolute;
z-index:999;
top: 36px;
left: -20px;
display: flex;
align-items: center;
padding-left: 8px;
box-sizing: border-box;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ffffff;
cursor: pointer;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
}
.content .close-btn img {
width: 25px;
height: 25px;
}
.content .v-drag-panel {
position: absolute;
width: 950px;
height: 25px;
background-color: #ffffff;
opacity: 0;
}
.content .h-drag-panel {
position: absolute;
width: 25px;
height: 932px;
background-color: #ffffff;
opacity: 0;
}
.open-btn {
position: fixed;
z-index: 99999999;
bottom: 0px;
right: 0px;
display: flex;
border:none;
flex-direction: column;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.2);
background-color: #ffffff;
font-size: 16px;d
cursor: pointer;
margin: 50px 50px;
}
.open-btn img {
width: 60px;
height: 60px;
}`
GM_addStyle(css)
}
//发送消息
function sendMessage(msg) {
console.log('正在向websocket发送消息,消息如下：')
console.log(msg)
socket.send(msg);
}
//连接webocket
function openSocket() {
const socketUrl = "ws://127.0.0.1:7789/ws";
console.log(socketUrl);
if (socket != null) {
socket.close();
socket = null;
}
socket = new WebSocket(socketUrl);
console.log('socket对象：');
console.log(socket);
//打开事件
socket.onopen = function() {
$('.open-btn').attr({
disabled: false
})
$('.open-img').attr({
src: 'https://192.168.0.59/image/intelligent-assistant.png',
title: "双击打开坐席助手"
})
console.log("websocket已打开");
};
//获得消息事件
socket.onmessage = function(msg) {
// alert("收到消息：" + msg.data);
console.log(msg.data);
//发现消息进入,开始处理前端触发逻辑
};
//关闭事件
socket.onclose = function() {
$('.open-btn').attr({
disabled: true
})
$('.open-img').attr({
src: "https://192.168.0.59/image/in-intelligent-assistant.png",
title: "无法连接到坐席助手"
})
console.log("websocket已关闭");
};
//发生了错误事件
socket.onerror = function() {
$('.open-btn').attr({
disabled: true
})
$('.open-img').attr({
src: "https://192.168.0.59/image/in-intelligent-assistant.png",
title: "无法连接到坐席助手"
})
console.log("websocket发生了错误");
}
}
//文档加载完毕后执行
$(document).ready(function() {
console.log('文档已加载完毕，坐席脚本正在启动...')
createHTML()
addStyle()
openSocket()
$(".content").hide()
setInterval(() => {
if (openFlag && document.querySelector('.layout')) {
$(".open-btn").show()
} else {
$(".open-btn").hide()
}
if (document.querySelector('.loginMain')) {
$(".content").hide()
}
// 通话状态：无效 通话中 整理
if (document.querySelector('.text')) {
cur_status = document.querySelector('.text').innerHTML
}
if(document.querySelector('.userName')){
InitParameterMsg.Data.AgentName = document.querySelector('.userName').innerHTML
}
if (document.querySelector('.ivu-tag-text')) {
ProductName = document.querySelector('.ivu-tag-text').innerHTML
}else{
ProductName = '产品名称为空！'
}
if (document.querySelectorAll('.value').length > 0) {
document.querySelectorAll('.value').forEach((item) => {
if (item.innerHTML > 10000000000) {
Phone = item.innerHTML
return false
}
})
}
// 只允许在状态改变的时候发消息
if (cur_status != pre_status) {
pre_status = cur_status
StatusChangeMsg = {
EventId: "StateChange",
Data: {
PreState: pre_status,
NowState: cur_status,
Phone: Phone,
ProductName: ProductName
}
}
console.log(JSON.stringify(InitParameterMsg))
console.log(JSON.stringify(StatusChangeMsg))
if (socket.readyState == 3) {
console.log('socket已断开...')
openSocket()
console.log('socket已断开重连...')
//数据初始化
sendMessage(JSON.stringify(InitParameterMsg))
setTimeout(()=>{
sendMessage(JSON.stringify(StatusChangeMsg))
},800)
} else {
console.log('socket已连接...')
sendMessage(JSON.stringify(InitParameterMsg))
setTimeout(()=>{
sendMessage(JSON.stringify(StatusChangeMsg))
},800)
}
}
}, 200)
// 异步加载iframe，连接上websocket并接受消息
setTimeout(() => {
let scriptContent = document.querySelector(".content")
let iframeDom = document.createElement("iframe")
iframeDom.src = 'https://192.168.0.59/'
iframeDom.width = '1020px'
iframeDom.height = '770px'
iframeDom.frameborder = '0'
iframeDom.scrolling = 'no'
iframeDom.marginheight = '4'
iframeDom.marginwidth = '8'
scriptContent.appendChild(iframeDom)
}, 500)
$("#draggable").draggable()
$(document).tooltip()
$(".open-btn").dblclick(function() {
openFlag = 0
$(".open-btn").hide()
$(".content").show()
})
$(".close-btn").dblclick(function() {
openFlag = 1
$(".content").hide()
$(".open-btn").show()
})
});
})();