在线客服 客户档案

WebSite/css/chat.css

 .main_message {
     /*overflow-y: scroll;*/
     /*height: calc(100% - 195px);*/
-    height: 300px;
+    height: 330px;
     /*margin-top: 2pc;*/
     /*padding-top: 35px;*/
 }
     width: 100%;
     /*bottom: 0;
 			    left: 0;*/
-    height: 150px;
+    height: 120px;
     border-top: 1px solid #ddd;
     background: #fff;
 }
         height: 20%;
         text-align: right;
         color: #4d4d4d;
-        padding-right: 20px;
+        padding-right: 10px;
     }
 
         .main_sendMessage .send_btn button {

WebSite/index.html

                 type: 2,
                 content: "chatWith.html", //iframe的url，no代表不显示滚动条
                 title: '在线客服聊天',
-                area: ['40%', '520px'], //宽高
+                area: ['800px', '520px'], //宽高
             });
         })
         //

WebUI/CallCenterWeb.UI/css/chat.css

 body {
     color: #4d4d4d;
     font: 14px/1.4em 'Helvetica Neue', Helvetica, 'Microsoft Yahei', Arial, sans-serif;
-    background-color: #f5f5f5;  /*url(img/chat_bg.jpg) no-repeat center*/
+    background-color: #f5f5f5; /*url(img/chat_bg.jpg) no-repeat center*/
     background-size: cover;
 }
 
 }
 
 ::-webkit-scrollbar-thumb {
-	background-color: #ccc
+    background-color: #ccc;
 }
 
 #chat {
     /*background-color: #2e3238 !important;*/
     border-bottom: 1px solid #ddd;
 }
-.chat_ld-service li {
-    float: left;
-    font-size: 14px;
-    color: #444;
-    padding: 8px 34px;
-    cursor: pointer;
-}
+
+    .chat_ld-service li {
+        float: left;
+        font-size: 14px;
+        color: #444;
+        padding: 8px 34px;
+        cursor: pointer;
+    }
 
 .chat_cr-click {
     border-bottom: 2px solid #00a1cb;
 }
 
 .chat_search {
-width: 100%;padding: 14px 20px;
+    width: 100%;
+    padding: 14px 20px;
 }
+
 .chat_lists {
-width: 100%; padding: 0px 20px 14px 20px; overflow-y: auto; height:502px;
+    width: 100%;
+    padding: 0px 20px 14px 20px;
+    overflow-y: auto;
+    height: 502px;
+}
+
+.chat_list {
+    width: 100%;
 }
-.chat_list{
-			width: 100%;
-		}
+
 .chat_item {
- line-height:20px;
- font-size:12px;
- padding:0 0 12px 0;
+    line-height: 20px;
+    font-size: 12px;
+    padding: 0 0 12px 0;
+}
+
+.chat_lists li span {
 }
-		.chat_lists li span{
-			
-		}
 /*搜索*/
 
 .chat_btns {
-            background: #00a1cb;
-            color: #fff;
-            padding: 6px 20px;
-            outline: none;
-            font-size: 12px;
-            margin-left: 6px;
-            border: 0;
-            border-radius: 3px;
-            box-sizing: border-box;
-        }
+    background: #00a1cb;
+    color: #fff;
+    padding: 6px 20px;
+    outline: none;
+    font-size: 12px;
+    margin-left: 6px;
+    border: 0;
+    border-radius: 3px;
+    box-sizing: border-box;
+}
+
 input {
-            background-color: #ddd;
-            border: 1px solid #ccc;
-            border-radius: 1px;
-            color: inherit;
-            padding: 4px 12px;
-            width:100%;
-            border-radius:3px;
-        }
-.chat_item button {
-    padding:1px 5px; margin-left:4px;
+    background-color: #ddd;
+    border: 1px solid #ccc;
+    border-radius: 1px;
+    color: inherit;
+    padding: 4px 12px;
+    width: 100%;
+    border-radius: 3px;
+}
+
+.answer_text {
+    float: left;
+    width: 100%;
+    display: block;
+}
+
+    .answer_text div {
+        float: right;
+        width: 70px;
+    }
+
+    .answer_text button {
+        padding: 1px 5px;
+        margin-left: 6px;
+        float: right;
+    }
+
+    .answer_text img {
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        width: 18px;
+        float: right;
+         margin-top:2px;
+    }
+
+.knowledge_title {
+    color: dodgerblue;
 }
 
+.Seach_knowledge,
+.Seach_answer {
+    cursor: pointer;
+}
 
 /*聊天右侧列表结束*/
 

WebUI/CallCenterWeb.UI/index.html

         #top_notices_lists1 {
             height: 100%;
         }
-        .collection{
-        	float: right;
-        	padding-right: 5px;
-        	cursor: pointer;
-        	width: 22px;
-        }
-        .collection img{
-        	width: 100%;
-        	height: 100%;
-        }
-        .tel_title{
-        	color: dodgerblue;
-        }
-        .Seach_knowledge,
-        .Seach_answer{
-        	cursor: pointer;
-        }
+        
+        
     </style>
 </head>
 
                         <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                             <tr>
                                 <td>
-                                    <input type="text" placeholder="输入关键字" id="key_answer"/>
+                                    <input type="text" placeholder="输入关键字" class="inputkeyword" id="key_answer"/>
                                 </td>
-                                <td>
+                                <td width="74">
                                     <botton class="chat_btns Seach_answer">搜 索</botton>
                                 </td>
                             </tr>
                         <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                             <tr>
                                 <td>
-                                    <input type="text" placeholder="输入知识库关键字" id="key_knowledge" />
+                                    <input type="text" placeholder="输入知识库关键字" class="inputkeyword"  id="key_knowledge" />
                                 </td>
-                                <td>
+                                <td width="74">
                                     <botton class="chat_btns Seach_knowledge">搜 索</botton>
                                 </td>
                             </tr>
                         <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                             <tr>
                                 <td>
-                                    <input type="text" placeholder="输入关键字33333" id="key" />
+                                    <input type="text" placeholder="输入工单关键字" class="inputkeyword"  id="key_workorder" />
                                 </td>
-                                <td>
-                                    <botton class="chat_btns Seach">搜 索</botton>
+                                <td width="74">
+                                    <botton class="chat_btns Seach_workorder">搜 索</botton>
                                 </td>
                             </tr>
                         </table>
                     </div>
 
                     <div class="chat_lists">
-                        <ul class="chat_list">
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">333333客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
+                        <ul class="chat_list workorder_anwser" id="workorder_anwser">                           
+                            
                         </ul>
                     </div>
                 </div>
                         <table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">
                             <tr>
                                 <td>
-                                    <input type="text" placeholder="输入关键字44444" id="key" />
+                                    <input type="text" placeholder="输入客户关键字" class="inputkeyword"  id="key_customer" />
                                 </td>
-                                <td>
-                                    <botton class="chat_btns Seach">搜 索</botton>
+                                <td width="74">
+                                    <botton class="chat_btns Seach_customer">搜 索</botton>
                                 </td>
                             </tr>
                         </table>
                     </div>
 
                     <div class="chat_lists">
-                        <ul class="chat_list">
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">44444客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
-                            <li class="chat_item">
-                                <span title="客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001">客服-杨舒涵(8023) 接到市民催单，内容：市民来电催单！，工单编号：202002118024001</span>
-                                <button type="button" class="btn btn-primary btn-sm">发送</button> <button type="button" class="btn btn-primary btn-sm">收藏</button>
-                            </li>
+                        <ul class="chat_list customer_anwser" id="customer_anwser">   
+
                         </ul>
                     </div>
                 </div>

WebUI/CallCenterWeb.UI/js/chat.js

     $('.open_chat').find('.before').removeClass('hide').addClass('show');
 }
 
-function insert(ele, cname, msg, nodown,humanclass) {
+function insert(ele, cname, msg, nodown, humanclass) {
     var html = '<li>' +
 //						'<p class="message_time"><span>' + n.CreateDate + '</span></p>' +
                 '<div class="message_mincon ' + cname + '">'
         $('#chat').hide();
     } else {
         $('#chat').show();
+        $(".send_content").focus();
     }
 
 })
     var index = $(this).index();
     var ss = $(this).attr("itemtype");
     $(".chat_Content_box").find(".chat_complain").eq(index).addClass("chat_Shows").siblings().removeClass("chat_Shows");
+    $(".chat_Content_box").find(".chat_complain").eq(index).find("input").focus();
 
 });
 //聊天右侧列表结束
 quick_answer();
 //知识库列表
 knowledge_answer();
+//工单搜索
+workorder_answer();
+//客户档案搜索
+customer_answer();
+
 //快速回复搜索
-$('.Seach_answer').on('click',function(){
-	quick_answer();
-	if($('#key_answer').val().trim()){
-		var content=document.getElementById('quick_answer').innerHTML;
-		var keywords=document.getElementById('key_answer').value;
-		var reg=new RegExp(keywords,'g')
-		var newStr = content.replace(reg, `<font color=#c00>${keywords}</font>`)
-		document.getElementById('quick_answer').innerHTML=newStr
-	}
+$('.Seach_answer').on('click', function () {
+    quick_answer();
 })
 //知识库搜索
-$('.Seach_knowledge').on('click',function(){
-	knowledge_answer();
-	if($('#key_knowledge').val().trim()){
-		var content1=document.getElementById('knowledge_anwser').innerHTML;
-		var keywords1=document.getElementById('key_knowledge').value;
-		console.log(keywords1)
-		var reg1=new RegExp(keywords1,'g')
-		console.log(reg1)
-		var newStr1 = content1.replace(reg1, `<font color=#c00>${keywords1}</font>`)
-		console.log(newStr1);
-		document.getElementById('knowledge_anwser').innerHTML=newStr1
-	}
+$('.Seach_knowledge').on('click', function () {
+    knowledge_answer();
+})
+//工单搜索
+$('.Seach_workorder').on('click', function () {
+    workorder_answer();
 })
+//客户档案搜索
+$('.Seach_customer').on('click', function () {
+    customer_answer();
+})
+
 //快速回复
-function quick_answer(){
-	$('.quick_answer').empty();
-	$.ajax({
-			type: "get",
-			url: huayi.config.callcenter_url + "ChatMessages/GetReplyList",
-			dataType: 'json',
-			async: false,
-			data: {
-				keyword:$('#key_answer').val(),
-				token: $.cookie("token")
-			},
-			success: function(data) {
-			    $.each(data.rows, function (i, n) {
-			        var collection_imgurl = n.IsCollection == true ? "./img/collection_active.png" : "./img/collection.png";
-			        $('<li class="chat_item">' +
-                                '<span class="answer_text" title="' + n.F_ReplyContent + '">' + n.F_ReplyContent + '</span>' +
-                                '<button type="button" class="btn btn-primary btn-sm" onclick=sendMsg("' + n.F_ReplyContent + '",' + n.F_Id + ')>发送</button> ' +
-                                '<span class="collection"><img onclick="collection_img(' + n.F_Id + ')" src="' + collection_imgurl + '"/></span>' +
-                            '</li>').appendTo($('.quick_answer'));
-				});
-			}
-		});
-        	
+function quick_answer() {
+    $('.quick_answer').empty();
+    $.ajax({
+        type: "get",
+        url: huayi.config.callcenter_url + "ChatMessages/GetReplyList",
+        dataType: 'json',
+        async: false,
+        data: {
+            keyword: $('#key_answer').val(),
+            page: 1,         //当前第几页
+            pagesize: 20,    //每页显示的记录数
+            token: $.cookie("token")
+        },
+        success: function (data) {
+            $.each(data.rows, function (i, n) {
+                var collection_imgurl = n.IsCollection == true ? "./img/collection_active.png" : "./img/collection.png";
+                $('<li class="chat_item">' +
+                            '<span class="answer_text" title="' + n.F_ReplyContent + '">' + GetLimitStr(n.F_ReplyContent, 68) + '<div>' +
+                            '<button type="button" class="btn btn-primary btn-sm" onclick=sendMsg("' + n.F_ReplyContent + '",' + n.F_Id + ')>发送</button> ' +
+                            '<img onclick="collection_img(' + n.F_Id + ')" src="' + collection_imgurl + '"/>' +
+                        '</div></span></li>').appendTo($('.quick_answer'));
+            });
+            // 搜索关键词高亮显示
+            GetReplaceKey(data.keys, document.getElementById('quick_answer').innerHTML, "quick_answer");
+        }
+    });
+
 }
 
 //知识库列表
-function knowledge_answer(){
-	$('.knowledge_anwser').empty();
-	$.ajax({
-			type: "get",
-			url: huayi.config.callcenter_url + "ChatMessages/GetKnowledgeList",
-			dataType: 'json',
-			async: true,
-			data: {
-				keyword:$('#key_knowledge').val(),
-				token: $.cookie("token")
-			},
-			success: function(data) {
-				$.each(data.rows, function(i,n) {
-					var contant=n.F_Content.replace(/<[^>]+>/g,"");
-					if(contant.length>30){
-						contants = contant.substr(0, 30) + "...";	
-					}
-					$('<div class="tel_title">' + n.F_Title + '</div><li class="chat_item">' +
-                                '<span title="' + n.F_Description + '">' + contants + '</span>' +
-                                '<button type="button" class="btn btn-primary btn-sm" onclick=sendMsg("' + contant + '",' + n.F_Id + ')>发送</button> <span class="collection"><img onclick="collection_img(' + n.F_CategoryId + ')" src="./img/collection.png"/></span>' +
-                            '</li>').appendTo($('.knowledge_anwser'));
-				});
-			}
-		});
-        	
+function knowledge_answer() {
+    $('.knowledge_anwser').empty();
+    $.ajax({
+        type: "get",
+        url: huayi.config.callcenter_url + "ChatMessages/GetKnowledgeList",
+        dataType: 'json',
+        async: true,
+        data: {
+            keyword: $('#key_knowledge').val(),
+            page: 1,         //当前第几页
+            pagesize: 20,    //每页显示的记录数
+            token: $.cookie("token")
+        },
+        success: function (data) {
+            $.each(data.rows, function (i, n) {
+                var collection_imgurl = n.IsCollection == true ? "./img/collection_active.png" : "./img/collection.png";
+                $('<div class="knowledge_title">' + n.F_Title + '</div>' +
+                        '<li class="chat_item">' +
+                        '<span class="answer_text" title="' + GetLimitStr(n.F_Content, 200) + '">' + GetLimitStr(n.F_Content, 68) + '<div>' +    //n.F_Description
+                        '<button type="button" class="btn btn-primary btn-sm" onclick=sendKnowledgeMsg("' + GetLimitStr(n.F_Content, 1000) + '",' + n.F_RepositoryId + ')>发送</button> ' +
+                        '<img id="collectionimg" itemcollection = ' + n.F_RepositoryId + ' src="' + collection_imgurl + '"/>' +
+                        '</div></span></li>').appendTo($('.knowledge_anwser'));
+            });
+            // 搜索关键词高亮显示
+            GetReplaceKey(data.keys, document.getElementById('knowledge_anwser').innerHTML, "knowledge_anwser");
+        }
+    });
 }
-function sendMsg(msg,id) {
+
+//工单列表
+function workorder_answer() {
+    $('.workorder_anwser').empty();
+    $.ajax({
+        type: "get",
+        url: huayi.config.callcenter_url + "ChatMessages/GetWorkOrderList",
+        dataType: 'json',
+        async: true,
+        data: {
+            keyword: $('#key_workorder').val(),
+            page: 1,         //当前第几页
+            pagesize: 20,    //每页显示的记录数
+            token: $.cookie("token")
+        },
+        success: function (data) {
+            $.each(data.rows, function (i, n) {
+                //var collection_imgurl = n.IsCollection == true ? "./img/collection_active.png" : "./img/collection.png";
+                $('<div class="knowledge_title">' + n.F_WorkOrderId + '&nbsp;' + n.F_ComTitle + '【' + States(n.F_WorkState, n.F_IsReturn) + '】</div>' +
+                        '<li class="chat_item">' +
+                        '<span class="answer_text" title="' + GetLimitStr(n.F_ComContent, 200) + '">' + GetLimitStr(n.F_ComContent, 68) + '<div>' +    //n.F_Description
+                        '<button type="button" class="btn btn-primary btn-sm" onclick=sendworkorderMsg("' + n.F_WorkOrderId + '&nbsp;' + n.F_ComTitle + '【' + States(n.F_WorkState, n.F_IsReturn) + '】&nbsp;内容:' + GetLimitStr(n.F_ComContent, 1000) + '",' + n.F_WorkOrderId + ')>发送</button> ' +
+                        //'<img id="collectionimg" itemcollection = ' + n.F_WorkOrderId + ' src="' + collection_imgurl + '"/>' +
+                        '</div></span></li>').appendTo($('.workorder_anwser'));
+            });
+            // 搜索关键词高亮显示
+            GetReplaceKey(data.keys, document.getElementById('workorder_anwser').innerHTML, "workorder_anwser");
+        }
+    });
+}
+
+//客户档案列表
+function customer_answer() {
+    $('.customer_anwser').empty();
+    $.ajax({
+        type: "get",
+        url: huayi.config.callcenter_url + "ChatMessages/GetCustomerList",
+        dataType: 'json',
+        async: true,
+        data: {
+            keyword: $('#key_workorder').val(),
+            page: 1,         //当前第几页
+            pagesize: 20,    //每页显示的记录数
+            token: $.cookie("token")
+        },
+        success: function (data) {
+            $.each(data.rows, function (i, n) {
+                $('<div class="knowledge_title">' + n.F_CustomerName + '</div>' +
+                        '<li class="chat_item">' +
+                        '<span class="answer_text" title="客户电话：' + n.F_Mobile + ' ' + n.F_CustomerEName + ' 联系电话：' + n.F_Telephone + '">客户电话：' + n.F_Mobile + ' ' + n.F_CustomerEName + ' 联系电话：' + n.F_Telephone + '<div>' +    //n.F_Description
+                        '<button type="button" class="btn btn-primary btn-sm" onclick=sendcustomerMsg("' + n.F_CustomerName + '&nbsp;客户电话：' + n.F_Mobile + '&nbsp;' + n.F_CustomerEName + '&nbsp;联系电话：' + n.F_Telephone + '",' + n.F_CustomerId + ')>发送</button> ' +
+                        '</div></span></li>').appendTo($('.customer_anwser'));
+            });
+            // 搜索关键词高亮显示
+            GetReplaceKey(data.keys, document.getElementById('customer_anwser').innerHTML, "customer_anwser");
+        }
+    });
+}
+
+//状态
+function States(WorkState, IsReturn) {
+    var html = '';
+    switch (WorkState + '') {
+        case '0':
+            html = '新工单';
+            if (IsReturn == 1) {
+                html = '新工单（回退）';
+            }
+            break;
+        case '1':
+            html = '待交办';
+            break;
+        case '2':
+            html = '待查收';
+            break;
+        case '3':
+            html = '退回审核中';
+            break;
+        case '4':
+            html = '办理中';
+            break;
+        case '5':
+            html = '延时审核';
+            break;
+        case '6':
+            html = '已办理';
+            break;
+        case '7':
+            html = '已回访';
+            break;
+        case '8':
+            html = '重办中';
+            break;
+        case '9':
+            html = '已结案';
+            break;
+        case '10':
+            html = '待审核';
+            break;
+        case '11':
+            html = '重办待交办';
+            break;
+            //              case '12':
+            //                  html = '待审核';
+            //                  break;
+        case '13':
+            html = '重办驳回';
+            break;
+    }
+    return html;
+}
+
+// IM在线客服 - 键盘发送事件
+$('.inputkeyword').bind('keypress', function (event) {
+    if (event.keyCode == "13") {
+        var id = $(this).attr("id");
+        if (id == "key_answer")
+            $(".Seach_answer").click();
+        else if (id == "key_knowledge")
+            $(".Seach_knowledge").click();
+        else if (id == "key_workorder")
+            $(".Seach_workorder").click();
+        else
+            $(".Seach_customer").click();
+    }
+})
+
+// 发送 - 快速回复
+function sendMsg(msg, id) {
     $.ajax({
         type: "post",
         url: huayi.config.callcenter_url + "ChatMessages/SendReply",
     objs.msg = msg;
     Sends();
 }
+// 收藏 - 快速恢复
 function collection_img(id) {
     $.ajax({
         type: "post",
         }
     });
 }
+
+// 发送 - 快速回复
+function sendKnowledgeMsg(msg, id) {
+    $.ajax({
+        type: "post",
+        url: huayi.config.callcenter_url + "ChatMessages/SendKnowledge",
+        async: true,
+        data: {
+            id: id,
+            token: $.cookie('token')
+        },
+        success: function (result) {
+            var result = $.parseJSON(result)
+            if (result.state == 'success') {
+                layer.msg(result.message);
+            }
+        }
+    });
+    objs.action = "sersend";
+    //  objs.code = $("#" + ele).find(".hidcid").val();
+    objs.msg = msg;
+    Sends();
+}
+
+// 收藏 - 知识库
+$('#knowledge_anwser').on('click', "li span div img", function () {
+    var collection_act_url = "./img/collection_active.png";
+    var collection_url = "./img/collection.png";
+    var id = $(this).attr("itemcollection");
+    var src = $(this).attr("src");
+    var b = false; var reg = "";
+    $.ajax({
+        type: "post",
+        url: huayi.config.callcenter_url + "ChatMessages/CollectionKnowledge",
+        async: false,
+        data: {
+            id: id,
+            token: $.cookie('token')
+        },
+        success: function (result) {
+            var result = $.parseJSON(result)
+            if (result.state == 'success') {
+                //knowledge_answer();   //注释掉原因 - 操作成功后列表刷新闪动厉害
+                b = true;
+                reg = result.message;
+            }
+        }
+    });
+    if(b){
+        if (src == collection_act_url) {
+            $(this).attr("src", collection_url);
+        } else {
+            $(this).attr("src", collection_act_url);
+        }
+        layer.msg(reg);
+    }
+})
+
+// 发送 - 工单
+function sendworkorderMsg(msg, id) {
+    $.ajax({
+        type: "post",
+        url: huayi.config.callcenter_url + "ChatMessages/SendWorkOrder",
+        async: true,
+        data: {
+            id: id,
+            token: $.cookie('token')
+        },
+        success: function (result) {
+            var result = $.parseJSON(result)
+            if (result.state == 'success') {
+                layer.msg(result.message);
+            }
+        }
+    });
+    objs.action = "sersend";
+    //  objs.code = $("#" + ele).find(".hidcid").val();
+    objs.msg = msg;
+    Sends();
+}
+
+// 发送 - 客户档案
+function sendcustomerMsg(msg, id) {
+    $.ajax({
+        type: "post",
+        url: huayi.config.callcenter_url + "ChatMessages/SendCustomer",
+        async: true,
+        data: {
+            id: id,
+            token: $.cookie('token')
+        },
+        success: function (result) {
+            var result = $.parseJSON(result)
+            if (result.state == 'success') {
+                layer.msg(result.message);
+            }
+        }
+    });
+    objs.action = "sersend";
+    //  objs.code = $("#" + ele).find(".hidcid").val();
+    objs.msg = msg;
+    Sends();
+}
+
+//// 收藏 - 知识库
+//function collection_img_knowledge(id) {
+//    var ss = $(this).attr("itemcollection");
+//    $.ajax({
+//        type: "post",
+//        url: huayi.config.callcenter_url + "ChatMessages/CollectionKnowledge",
+//        async: true,
+//        data: {
+//            id: id,
+//            token: $.cookie('token')
+//        },
+//        success: function (result) {
+//            var result = $.parseJSON(result)
+//            if (result.state == 'success') {
+//                //knowledge_answer();   //注释掉原因 - 操作成功后列表刷新闪动厉害
+//                var collection_act_url = "./img/collection_active.png";
+//                var collection_url = "./img/collection.png";
+//                if ($(this).attr("src") == collection_act_url) {
+//                    $(this).attr("src", collection_url);
+//                } else {
+//                    $(this).attr("src", collection_act_url);
+//                }
+//                layer.msg(result.message);
+//            }
+//        }
+//    });
+//}
+
+//截取字符串 - IM在线客服
+function GetLimitStr(val, len) {
+    if (val) {
+        // var val = val.replace(/<[^>]+>/g, "");
+        var val = RemoveHtml(val);
+        if (val.length > len) {
+            val = val.substr(0, len) + "...";
+        }
+        return val;
+    } else {
+        return '';
+    }
+}
+// 过滤HTML标签以及空格
+function RemoveHtml(str) {
+    str = str.replace(/<\/?[^>]*>/g, '');       //去除HTML tag
+    str = str.replace(/[ | ]*\n/g, '\n');       //去除行尾空白
+    str = str.replace(/\n[\s| | ]*\r/g, '\n');  //去除多余空行
+    str = str.replace(/(<br[^>]*>| |\s*)/g, '')
+    str = str.replace(/ /ig, '');               //去掉空格
+    str = str.replace(/(^\s*)|(\s*$)/g, "");    //去掉空格
+    str = str.replace(/&nbsp;/ig, "");          //&nbsp;全部替换为空字符串  
+    return str;
+}
+// 批量替换关键词 - 搜索关键词高亮显示
+function GetReplaceKey(str, innerHtmlContent, id) {
+    if (str.trim()) {
+        var arr = str.split(',');
+        $.each(arr, function (index, j) {
+            var reg = new RegExp(j, 'g')
+            innerHtmlContent = innerHtmlContent.replace(reg, `<font color=#c00>${j}</font>`)
+        });
+        document.getElementById(id).innerHTML = innerHtmlContent
+    }
+}