ZZDianXin_UI - 郑州电信 演示

LookMessage.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>查看信息</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <script src="../Script/Common/huayi.load.js"></script>
  8. <script src="../Script/Common/huayi.config.js"></script>
  9. <link href="../css/Table/table1.css" rel="stylesheet" />
  10. <link href="../css/init.css" rel="stylesheet" />
  11. <link rel="stylesheet" type="text/css" href="../css/lookMsg.css" />
  12. <!-- 录屏 -->
  13. <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css" />-->
  14. <!--<link href="../callScreen/cutVideo/rrweb.min.css" rel="stylesheet" />-->
  15. <!-- 回放播放器 -->
  16. <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css" />-->
  17. <!--<link href="../callScreen/cutVideo/style.css" rel="stylesheet" />-->
  18. </head>
  19. <body class="gray-bg">
  20. <div class="wrapper clearfix">
  21. <div class="content_1 clearfix">
  22. <div class="shark_content_title clearfix">
  23. <span>电话信息</span>
  24. </div>
  25. <div class="clearfix Phone_Text clearfix">
  26. <ul class="clearfix form-inline">
  27. <li>
  28. <label for="Name_">姓名:</label>
  29. <input type="text" id="Name_" class="form-control" />
  30. </li>
  31. <li>
  32. <label for="Phone_">电话号码:</label>
  33. <a class="CallOut" id="CallOut"><span id="Phone_"></span><img src="../img/Phones.png" alt="" /></a>
  34. </li>
  35. <li>
  36. <label for="callNum">固定号码:</label>
  37. <input type="text" id="callNum" class="form-control" />
  38. </li>
  39. <!--<li>
  40. <label for="country">乡镇或单位:</label>
  41. <select id="country" class="form-control">
  42. <option value="0">请选择乡镇或单位</option>
  43. </select>
  44. </li>-->
  45. <li>
  46. <label for="address">地址:</label>
  47. <input type="text" id="address" class="form-control" />
  48. </li>
  49. </ul>
  50. <div id="luping">
  51. <span id="playersing">
  52. </span>
  53. </div>
  54. </div>
  55. </div>
  56. <div class="content_3 clearfix " style="display: none;">
  57. <div class="shark_content_title clearfix">
  58. <span>用户反馈</span>
  59. </div>
  60. <div>
  61. <ul class="clearfix" id="Tg">
  62. </ul>
  63. </div>
  64. </div>
  65. <div class="content_4 clearfix ">
  66. <div class="shark_content_title clearfix">
  67. <span>问卷信息</span>
  68. </div>
  69. <div>
  70. <ul style="padding-left: 0;" class="title_ul">
  71. <li>
  72. <label for="">问卷名称</label><span class="Title"></span>
  73. </li>
  74. <li>
  75. <label for="startText">问卷开场语</label><span id="startText" class="F_Remark"></span>
  76. </li>
  77. <li>
  78. <label for="F_Remark">问卷说明</label><span id="F_Remark" class="F_Remark"></span>
  79. </li>
  80. </ul>
  81. <ul class="Qus_box">
  82. </ul>
  83. <ul style="padding-left: 0;" class="title_ul">
  84. <li>
  85. <label for="">问卷结束语</label><span id="endText" class="F_Remark"></span>
  86. </li>
  87. </ul>
  88. </div>
  89. </div>
  90. <div class="content_2 clearfix ">
  91. <div class="shark_content_title clearfix">
  92. <span>呼叫结果</span>
  93. </div>
  94. <div>
  95. <ul class="clearfix" id="Tgetruset">
  96. </ul>
  97. </div>
  98. </div>
  99. <div class="content_5 clearfix" style="text-align: center;">
  100. <div>
  101. <button class="Ce btns">提交</button>
  102. <input type="hidden" id="F_CusID" />
  103. <input type="hidden" id="F_Id" />
  104. <input type="hidden" id="F_TaskId" />
  105. <input type="hidden" id="TelCode" value="" />
  106. </div>
  107. </div>
  108. </div>
  109. <script src="../js/guid.js"></script>
  110. <script src="../js/autosize/autosize.js"></script>
  111. <!-- 录屏-->
  112. <!--<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script>
  113. <script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js"></script>-->
  114. <!--<script src="../callScreen/cutVideo/rrweb.min.js"></script>-->
  115. <!--<script src="../callScreen/cutVideo/rrweb-record.min.js"></script>-->
  116. <!-- 回放播放器 -->
  117. <!--<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>-->
  118. <!--<script src="../callScreen/cutVideo/index.js"></script>-->
  119. <!--<script src="../callScreen/cutVideo.js"></script>-->
  120. <script>
  121. // 录屏
  122. var wid = helper.request.queryString("Str");
  123. var ans = [];
  124. var type;
  125. var star_number = [];
  126. var id;
  127. var content;
  128. var str;
  129. var strs;
  130. //console.log(wid);
  131. $(document).ready(function() {
  132. if (wid != null && wid != undefined && wid != "") {
  133. //获取乡镇或单位下拉
  134. getCountry();
  135. XQ();
  136. GetHJJG(); //获取呼叫结果
  137. //GetYHFK();//获取用户反馈
  138. }
  139. //点击电话号码外呼
  140. $(".CallOut").click(function(event) {
  141. if($("#Phone_").text()) {
  142. calloutopt($("#Phone_").text());
  143. }
  144. });
  145. });
  146. //获取乡镇或单位下拉
  147. function getCountry() {
  148. $.ajax({
  149. type: "get",
  150. url: huayi.config.callcenter_url + "Dictionary/GetDicValueListByFlag",
  151. dataType: 'json',
  152. data: {
  153. flag: 'JBDW',
  154. token: $.cookie("token")
  155. },
  156. async: true,
  157. success: function(data) {
  158. var res = data.data;
  159. for(var i = 0; i < res.length; i++) {
  160. $('<option value="' + res[i].F_DictionaryValueId + '">' + res[i].F_Name + '</option>').appendTo($("#country"));
  161. }
  162. }
  163. });
  164. }
  165. //外呼
  166. function calloutopt(telphone) {
  167. event.stopPropagation();
  168. if(telphone) {
  169. $.ajax({
  170. type: "get",
  171. url: huayi.config.callcenter_url + "CallOutOpt/GetCallOutprefix",
  172. async: true,
  173. dataType: 'json',
  174. data: {
  175. token: $.cookie("token"),
  176. phone: telphone
  177. },
  178. success: function(result) {
  179. if(result.state.toLowerCase() == "success") {
  180. //debugger
  181. var guid = uuid();
  182. $("#TelCode").val(guid);
  183. top.obj.Type = "MakeCall";
  184. top.obj.DestinationNumber = result.data.phone;
  185. top.obj.Header = result.data.fix;
  186. top.obj.TaskType = "1"; //0:拨号外呼;1:问卷外呼;
  187. top.obj.TaskPhoneID = $("#F_Id").val(); //回访的电话ID
  188. //top.obj.TaskID = guid; //回访记录编号
  189. top.obj.TaskID = $("#F_TaskId").val()
  190. top.Send();
  191. }
  192. }
  193. });
  194. }
  195. }
  196. //详情查看
  197. function XQ() {
  198. $.ajax({
  199. type: "get",
  200. url: huayi.config.callcenter_url + "CallOutPlan/GetTaskTelModel",
  201. dataType: 'json',
  202. data: {
  203. id: wid,
  204. token: $.cookie("token")
  205. },
  206. async: true,
  207. success: function(data) {
  208. var Count = data.data;
  209. if(Count) {
  210. if(Count.taskModel) {
  211. //console.log(Count.taskModel);
  212. $("#Name_").val(Count.taskModel.F_CusName);
  213. $("#Phone_").text(Count.taskModel.F_Phone);
  214. $('#address').val(Count.taskModel.F_Address)
  215. $("#F_CusID").val(Count.taskModel.F_CusID);
  216. $("#F_Id").val(Count.taskModel.F_Id);
  217. $("#F_TaskId").val(Count.taskModel.F_TaskId);
  218. var pid = Count.paperid;
  219. if(pid) {
  220. WJ(pid);
  221. }
  222. }
  223. }
  224. }
  225. });
  226. }
  227. //获取呼叫结果
  228. function GetHJJG() {
  229. $.ajax({
  230. type: "get",
  231. url: huayi.config.callcenter_url + "Dictionary/GetDicValueListByFlag",
  232. dataType: 'json',
  233. data: {
  234. flag: 'HJJG',
  235. token: $.cookie("token")
  236. },
  237. async: true,
  238. success: function(data) {
  239. var Count = data.data;
  240. for(var i = 0; i < Count.length; i++) {
  241. //$("<li><label for=''><input type='radio' name='check' value='" + Count[i].F_DictionaryValueId + "' /></label>" + Count[i].F_Name + "</li>").
  242. var listItem = '<li>' +
  243. '<input id="listR_' + i + '" type="radio" name="check" value="' + Count[i].F_DictionaryValueId + '" />' +
  244. '<label for="listR_' + i + '">' + Count[i].F_Name + '</label>' +
  245. '</li>';
  246. $(listItem).appendTo($("#Tgetruset"));
  247. }
  248. }
  249. });
  250. }
  251. //提交
  252. $(".Ce").click(function () {
  253. $(".radio").each(function(j, k) {
  254. str = '';
  255. var nameRadio = $(k).attr("name");
  256. var index = $(k).attr("indexs");
  257. var val = $('input[name="' + nameRadio + '"]:checked').val();
  258. var valText = $('input[name="' + nameRadio + '"]:checked').next().text();
  259. if(val != null) {
  260. str = index + '_' + val + '_' + valText;
  261. ans.push(str);
  262. }
  263. })
  264. $(".checkbox").each(function(j, k) {
  265. strs = '';
  266. var nameCheckbox = $(k).attr("name");
  267. var index = $(k).attr("indexs");
  268. var check = "";
  269. var text = "";
  270. //var val=$('input[name="'+ name+'"]:checked').val();
  271. var VAl = $('input[name="' + nameCheckbox + '"]:checked');
  272. $(VAl).each(function(i, n) {
  273. text += $(this).next().text() + "|";
  274. check += $(this).val() + "|";
  275. })
  276. if(check != "") {
  277. str = index + '_' + check + '_' + text;
  278. ans.push(str);
  279. }
  280. })
  281. $(".Wd").each(function(j, k) {
  282. strs = '';
  283. //debugger;
  284. var nameWd = $(k).attr("name");
  285. var index = $(k).attr("indexs");
  286. var val = $(k).find(".Wds").val();
  287. if(val) {
  288. str = index + '_0_' + val;
  289. ans.push(str);
  290. }
  291. })
  292. if($('input[name="check"]:checked').val() == undefined) {
  293. layer.confirm('呼叫结果必须选择!', {
  294. icon: 2,
  295. btn: ['确定']
  296. });
  297. } else {
  298. //请求
  299. $.ajax({
  300. type: "POST",
  301. url: huayi.config.callcenter_url + "CallOutPlan/Answers",
  302. dataType: 'json',
  303. data: {
  304. taskid: $("#F_TaskId").val(), //任务ID
  305. custelid: $("#F_Id").val(), //客户电话ID
  306. cusid: $("#F_CusID").val(), //客户档案ID
  307. ans: ans, //答案,数组形式["15_20_单选选项内容","17_25|36|58_复选选项内容1|选项内容2|选项内容3","30_0_问答题"]
  308. hjjgid: $('input[name="check"]:checked').val(), //呼叫结果ID
  309. //yhfkid: $('input[name="checks"]:checked').val(), //用户反馈ID
  310. yhfkid: 0, //用户反馈ID
  311. telphone: $('#Phone_').text(), //电话号码,
  312. name: $('#Name_').val(), //姓名,
  313. phone: $('#callNum').val(), //固定号码,
  314. countryid: $('#country').val(), //乡镇或单位id,
  315. address: $('#address').val(), //地址
  316. token: $.cookie("token")
  317. },
  318. async: true,
  319. success: function(data) {
  320. var Count = data.data;
  321. var index1 = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
  322. parent.layer.close(index1); //再执行关闭
  323. parent.initTable();
  324. //停止录屏保存
  325. // stopPlayers(); //Count
  326. parent.layer.msg('提交成功');
  327. },
  328. });
  329. }
  330. })
  331. function WJ(pid) {
  332. $(".tbody").empty();
  333. $.ajax({
  334. type: "get",
  335. url: huayi.config.callcenter_url + "/Questionnaire/GetPagerInfoQ",
  336. async: true,
  337. dataType: "json",
  338. data: {
  339. pid: pid,
  340. token: $.cookie("token"),
  341. },
  342. success: function(data) {
  343. if(data.state.toLowerCase() == 'success') {
  344. $('.Title').text(data.data.F_Title);
  345. $("#F_Remark").text(data.data.F_Remark);
  346. $("#startText").text(data.data.F_StartText);
  347. $("#endText").text(data.data.F_EndText);
  348. var Questions = data.data.F_Questions;
  349. var html = '';
  350. for(var i = 0; i < Questions.length; i++) {
  351. var questype = Questions[i].questype;
  352. var Quesid = Questions[i].quesid;
  353. var quesremark = Questions[i].quesremark; //试题说明
  354. if(quesremark) {
  355. quesremark = ' 【' + quesremark + '】';
  356. } else {
  357. quesremark = "";
  358. }
  359. html += '<li class="" name="ltype' + Quesid + '" >';
  360. html += '<div class="Back ">';
  361. html += '<h3 class="size-14 QuesTitle" indexs="' + Questions[i].quesid + '">' + Questions[i].questitle + quesremark + ' </h3>';
  362. html += '</div>';
  363. //判断类型
  364. if(questype == 2) {
  365. //选项
  366. if(Questions[i].quesitems.length > 0) { //单选
  367. html += '<div class="radio clearfix" name="ltype' + Quesid + '" indexs="' + Questions[i].quesid + '">';
  368. var quesitems = Questions[i].quesitems;
  369. html += '<ul class="Ul">'
  370. for(var j = 0; j < quesitems.length; j++) {
  371. html += '<li>'
  372. html += '<label style="font-weight: normal;">'
  373. html += '' + (j + 1) + '.';
  374. html += '<input type="radio" index_="' + quesitems[j].itemid + '" value="' + quesitems[j].itemid + '" name="ltype' + Quesid + '" style="margin-left:5px;"> <span>' + quesitems[j].itemname + '</span></label>'
  375. html += '</li>'
  376. }
  377. html += '</ul>'
  378. html += '</div>'
  379. html += '</li>'
  380. }
  381. } else if(questype == 1) {
  382. //问答题
  383. html += '<div class="Wd" indexs="' + Questions[i].quesid + '">';
  384. html += '<textarea class="Wds" index="' + Questions[i].quesid + '"name="" rows="" cols="" style="width: 100%;"></textarea>'
  385. html += '</div>'
  386. } else {
  387. if(Questions[i].quesitems.length > 0) { //多选
  388. html += '<div class="checkbox clearfix" name="ltype' + Quesid + '" indexs="' + Questions[i].quesid + '">';
  389. html += '<ul class="Ul">'
  390. var quesitems = Questions[i].quesitems;
  391. for(var j = 0; j < quesitems.length; j++) {
  392. html += '<li>'
  393. html += '<label style="font-weight: normal;">'
  394. html += '' + (j + 1) + '.';
  395. html += '<input type="checkbox" index_="' + quesitems[j].itemid + '" value="' + quesitems[j].itemid + '" name="ltype' + Quesid + '" ><span> ' + quesitems[j].itemname + '</span></label>'
  396. //html += '<input type="checkbox" index_="' + quesitems[j].itemid + '" value="' + quesitems[j].itemid + '" name="ltype' + Quesid + '" > ' + quesitems[j].itemname + '</label>'
  397. html += '</li>'
  398. }
  399. html += '</ul>';
  400. html += '</div>'
  401. html += '</li >';
  402. }
  403. }
  404. }
  405. $(html).appendTo(".Qus_box");
  406. autosize($('textarea'));
  407. }
  408. }
  409. });
  410. }
  411. //用户反馈
  412. function GetYHFK() {
  413. $.ajax({
  414. type: "get",
  415. url: huayi.config.callcenter_url + "Dictionary/GetDicValueListByFlag",
  416. dataType: 'json',
  417. data: {
  418. flag: 'YHFK',
  419. token: $.cookie("token")
  420. },
  421. async: true,
  422. success: function(data) {
  423. var Count = data.data;
  424. $("<option value=''>--全部--</option>").appendTo($("#selhjjg"));
  425. for(var i = 0; i < Count.length; i++) {
  426. $("<li><label for=''><input type='radio' name='checks' value='" + Count[i].F_DictionaryValueId + "' /></label>" + Count[i].F_Name + "</li>").
  427. appendTo($("#Tg"));
  428. }
  429. }
  430. });
  431. }
  432. //
  433. </script>
  434. </body>
  435. </html>