外呼软电话

CallCenterWeb.UI/css/index.css

@@ -0,0 +1,858 @@
+@font-face {
+	font-family: 'iconfont';
+	src: url('../fonts/iconfont.eot');
+	/* IE9*/
+	src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+	url('../fonts/iconfont.woff') format('woff'), /* chrome、firefox */
+	url('../fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
+	url('../fonts/iconfont.svg#iconfont') format('svg');
+	/* iOS 4.1- */
+}
+
+body {
+	font-family: "微软雅黑";
+}
+
+.ldtp-con {
+	display: block;
+}
+
+.ld-sercon select {
+	height: auto;
+}
+
+ul li {
+	list-style: none;
+	overflow: hidden;
+}
+
+.iconfont {
+	font-family: "iconfont";
+	font-style: normal;
+	color: #FFFFFF;
+}
+
+.fr {
+	float: right;
+}
+
+.fl {
+	float: left;
+}
+
+.size-12 {
+	font-size: 12px;
+}
+
+.title-box {
+	margin-top: 5px;
+}
+
+.title-box li {
+	margin-left: 30px;
+}
+
+.title-box li:hover {
+	cursor: pointer;
+}
+
+.HoverColor {
+	color: #f8ac59;
+}
+
+.FailureColor {
+	color: #f95f5e;
+}
+
+.navbar-header {
+	width: 100%;
+	background-color: #2f4050;
+	padding-top: 10px;
+}
+
+.title-box li p {
+	color: #FFFFFF;
+	font-size: 14px;
+	font-weight: bold;
+	letter-spacing: 2px;
+	margin-top: 5px;
+}
+
+.size-14 {
+	font-size: 14px;
+	color: #FFFFFF !important;
+}
+
+.img-circle {
+	width: 58px;
+}
+
+.xian {
+	border: 1px solid #FFFFFF;
+	display: inline-block;
+	width: 15%;
+	margin: 5px;
+}
+
+.ss {
+	margin-left: 20px;
+}
+
+.fe-3 {
+	font-size: 3em;
+}
+
+.title-box p {
+	text-align: center;
+}
+
+.closed {
+	display: inline-block;
+	/*				margin-left: 5%;*/
+	cursor: pointer;
+	color: #FFFFFF;
+	float: right;
+	margin-right: 5%;
+	width: 25%;
+}
+
+.closed div {
+	overflow: hidden;
+}
+
+.closed ul {
+	margin-bottom: 0px;
+}
+
+.closed li {
+	float: left;
+	margin-right: 20px;
+}
+
+.closed i {
+	display: inline-block;
+	background: url(../img/chilun.png) no-repeat;
+	margin-right: 5px;
+	width: 14px;
+	height: 16px;
+	vertical-align: middle;
+}
+
+.ga {
+	background-position: 0 0 !important;
+}
+
+.sz {
+	background-position: 0 -15px !important;
+}
+
+.tc {
+	background-position: 0 -33px !important;
+}
+
+.zhuangtai {
+	display: block;
+	width: 30%;
+	margin-left: 10px;
+	font-size: 14px;
+	font-weight: 800;
+}
+
+.wq {
+	color: #f95f5e;
+}
+
+#top-search li:hover {
+	color: #eaeaea;
+}
+
+.content-tabs1 ul {
+	padding-left: 0;
+}
+
+.content-tabs1 li {
+	list-style: none;
+	float: left;
+	height: 5px;
+}
+
+.top1 {
+	background-color: #68adfe;
+}
+
+.top2 {
+	background-color: #9897f0;
+}
+
+.top3 {
+	background-color: #87eebf;
+}
+
+.top4 {
+	background-color: #68b0fe;
+}
+
+.top5 {
+	background-color: #f95a83;
+}
+
+.top6 {
+	background-color: #eb76dd;
+}
+
+.top7 {
+	background-color: #69cbd0;
+}
+
+.top8 {
+	background-color: #69cbd0;
+}
+
+.top9 {
+	background-color: #aaf58d;
+}
+
+.top10 {
+	background-color: #f76a53;
+}
+
+.top11 {
+	background-color: #eb76dd;
+}
+
+.top12 {
+	background-color: #6c77da;
+}
+
+.top13 {
+	background: -webkit-linear-gradient(left, #f073db, #65abfc);
+	background: -moz-linear-gradient(left, #f073db, #65abfc);
+	background: -o-linear-gradient(left, #f073db, #65abfc);
+	background: -webkit-gradient(linear, 100% 0, 0 0, from(#65abfc), to(#f073db));
+	background: linear-gradient(left, #f073db, #65abfc);
+	/* Opera 11.1 - 12.0 */
+	/* Firefox 3.6 - 15 */
+	/* 标准的语法 */
+}
+
+.zts {
+	height: 30px;
+	margin-left: 2%;
+	line-height: 30px;
+	padding-top: 15px;
+}
+
+.zts li {
+	height: 20px;
+	line-height: 20px;
+	font-weight: bold;
+	letter-spacing: 2px;
+}
+
+.quan {
+	width: 15px;
+	height: 15px !important;
+	border-radius: 50%;
+	margin-right: 2%;
+	margin-left: 5px;
+	margin-top: 2px;
+}
+
+.lx {
+	background: #6a6d69;
+}
+
+.br {
+	background: red;
+}
+
+.bl {
+	background: #7ab85b;
+}
+
+.LH {
+	line-height: 35px;
+}
+
+.zts span {
+	line-height: 20px;
+	margin-right: 50px;
+	font-size: 12px;
+}
+
+.photo {
+	width: 40px;
+	height: 40px;
+	border-width: 2px;
+	border-style: solid;
+	border-radius: 50%;
+	border-color: #ffb400 #fc3c04 #fdfc01 #00e3c0;
+	margin-bottom: 1px;
+}
+
+.photo img {
+	display: block;
+	width: 100%;
+	height: 100%;
+}
+
+.ls {
+	/*margin-left: 20px;*/
+	text-align: center;
+}
+
+.ls span {
+	margin-right: 10px;
+}
+
+.min-right {
+	margin-right: 10px;
+}
+
+.navbar-top-links i {
+	width: 24px;
+	height: 21px;
+	display: block;
+	background: url(../img/topIcon.png) no-repeat;
+	background-position: center center;
+	margin: 0 auto;
+}
+
+
+/*挂断*/
+
+.DropCall {
+	background-position: 0px 0 !important;
+}
+
+
+/*外呼*/
+
+.MakeCall {
+	background-position: 0px -20px !important;
+}
+
+
+/*置忙*/
+
+.SayBusy {
+	background-position: 0px -42px !important;
+}
+
+
+/*置闲*/
+
+.SayFree {
+	background-position: 0px -65px !important;
+}
+
+
+/*多方通话*/
+
+.Meeting {
+	background-position: 0px -85px !important;
+}
+
+
+/*转移*/
+
+.Transfer {
+	background-position: 0px -108px !important;
+}
+
+
+/*保持*/
+
+.Hold {
+	background-position: 0px -131px !important;
+}
+
+
+/*接回*/
+
+.Retrieve {
+	background-position: 0px -153px !important;
+}
+
+
+/*签入*/
+
+.Login {
+	background-position: 0px -197px !important;
+}
+
+
+/*签出*/
+
+.Logout {
+	background-position: 0px -175px !important;
+}
+
+.navbar-top-links .active {
+	background-position-x: -23px !important;
+}
+
+.ldcr-bottom .detail-con ul li .active a {
+	color: #f95a83 !important;
+}
+
+.ldcr-bottom .detail-con ul li .active em {
+	color: #f95a83 !important;
+}
+
+.ldcr-bottom .detail-con ul li .active+.explancon {
+	display: block !important;
+}
+
+.searchbtn {
+	width: 2.5em;
+	height: 24px;
+	border-radius: 5px;
+	position: absolute;
+	background-color: #f8ac59;
+	background-image: url(../img/searIcon.png);
+	background-repeat: no-repeat;
+	background-position: center center;
+	cursor: pointer;
+}
+
+.max-box {
+	height: 42px;
+	width: 100%;
+}
+
+.laydate_body .laydate_bottom,
+.laydate_body .laydate_top {
+	height: 31px !important;
+}
+
+.laydate_body .laydate_y .laydate_yms ul li {
+	width: 59px !important;
+}
+
+.col-sm-1 {
+	padding-right: 0;
+	line-height: 34px;
+}
+
+ul.ztree {
+	overflow-y: scroll;
+	overflow-x: auto;
+}
+
+.minBacha {
+	position: absolute;
+	top: 0;
+	right: 80px;
+	z-index: 10;
+	overflow: hidden;
+}
+
+.minBacha>div {
+	float: left;
+	height: 35px;
+	width: 35px;
+	margin-left: 2px;
+}
+
+.minBacha>div a {
+	display: block;
+	height: 100%;
+	width: 100%;
+	text-align: center;
+	background-position: center center;
+	background-color: #2f4050;
+	opacity: .5;
+}
+
+.minBacha>div a:hover {
+	opacity: 1;
+}
+
+.minClosed>a {
+	background: url("../img/min.png") no-repeat;
+}
+
+.Bacha>a {
+	background: url("../img/gb.png") no-repeat;
+}
+
+.lblcount {
+	position: absolute;
+	right: 5px;
+	top: 7px;
+}
+
+.first {
+	z-index: 1000;
+}
+
+.khzl {
+	font-size: 12px;
+	border: 0;
+	margin: 35px auto;
+	color: #fff;
+}
+
+.khzl tr {
+	border: 0;
+}
+
+.khzl th {
+	padding: 5px 8px 5px 0;
+	text-align: right;
+	width: 40%;
+	font-weight: normal;
+	border: 0;
+}
+
+.khzl tbody>tr>td,
+.khzl tbody>tr>th {
+	border: 0;
+}
+
+.khzl tbody>tr>td input {
+	border: 0;
+	outline: none;
+	background: #243747;
+	padding-left: 5px;
+	width: 100%;
+}
+
+.khbtn {
+	/*background: #97a0a8;*/
+	color: #1ab394;
+	font-size: 14px;
+	vertical-align: middle;
+}
+
+.hei-list {
+	width: 400px;
+	margin: 0 auto;
+}
+
+.heiTop {
+	height: 35px;
+	background: #1ab394;
+	color: #fff;
+	line-height: 35px;
+	padding: 0 15px;
+	border-top-left-radius: 3px;
+	border-top-right-radius: 3px;
+}
+
+.heiTop .htl {
+	float: left;
+	margin: 0;
+}
+
+.heiTop .bacha {
+	float: right;
+	font-size: 18px;
+	cursor: pointer;
+	margin: 0;
+}
+
+.heiCon {
+	width: 100%;
+	background: #fff;
+	text-align: center;
+	padding: 25px 15px;
+	height: auto;
+	overflow-y: auto;
+	border: 1px solid #eee;
+}
+
+#time-word {
+	border: 1px solid #1ab394;
+	padding: 5px 0 5px 10px;
+	width: 120px;
+	outline: none;
+	color: #000;
+}
+
+.chooses {
+	margin-top: 10px;
+}
+
+.btns {
+	background: #1ab394;
+	color: #fff;
+	padding: 3px 10px;
+	outline: none;
+	font-size: 12px;
+	margin-left: 15px;
+	border: 0;
+	border-radius: 3px;
+	box-sizing: border-box;
+}
+
+.bianji {
+	display: inline-block;
+	height: 16px;
+	width: 16px;
+	vertical-align: middle;
+	margin-right: 5px;
+}
+
+.bianji.edi {
+	background: url(../img/xgai.png) no-repeat;
+}
+
+.bianji.sav {
+	background: url(../img/bbc.png) no-repeat;
+}
+
+.bianji.canc {
+	background: url(../img/quxi.png) no-repeat;
+}
+
+.t-shade {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background: rgba(0, 0, 0, 0.48);
+	z-index: 10004;
+	display: none;
+}
+
+.shade_k {
+	z-index: 10005;
+	width: 40%;
+	margin: 10% auto;
+	background-color: #fff;
+	box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
+	border-radius: 5px;
+}
+
+.shade_title {
+	padding: 0 80px 0 20px;
+	height: 42px;
+	line-height: 42px;
+	border-bottom: 1px solid #eee;
+	font-size: 16px;
+	color: #FFFFFF;
+	overflow: hidden;
+	background-color: rgb(26, 179, 148);
+	border-radius: 2px 2px 0 0;
+	position: relative;
+}
+
+.setwin {
+	position: absolute;
+	right: 15px;
+	top: 5px;
+	font-size: 20px;
+	line-height: initial;
+}
+
+.setwin a {
+	font-size: 20px;
+	color: #fff;
+}
+
+.shade_content {
+	overflow-y: auto;
+	position: relative;
+	padding-bottom: 50px;
+	padding: 10px;
+}
+
+.wh_btn {
+	width: 80%;
+	text-align: center;
+	padding-top: 20px;
+	margin: 0 auto;
+	margin-bottom: 20px;
+}
+
+.wh_btn input {
+	padding: 7px 20px;
+	color: #FFF;
+	border-radius: 5px;
+	margin-right: 30px;
+	border: 1px solid #999;
+	border-color: rgb(26, 179, 148);
+}
+
+.sc_btn {
+	color: rgb(255, 255, 255);
+	font-size: 12px;
+	margin-left: 15px;
+	box-sizing: border-box;
+	background: rgb(26, 179, 148);
+	padding: 6px 10px;
+	outline: none;
+	border-width: 0px;
+	border-style: initial;
+	border-color: initial;
+	border-image: initial;
+	border-radius: 3px;
+}
+
+.sc_btn:hover {
+	color: #fff !important;
+}
+
+.cx {
+	display: block;
+}
+
+.phoneBZ {
+	display: inline-block;
+	height: 15px;
+	width: 15px;
+	position: absolute;
+	right: 0px;
+	bottom: -15px;
+	background: url(../img/phoneBZ.png) no-repeat;
+	display: none;
+}
+
+#menuContent {
+	background: #fff;
+	position: absolute;
+	width: 100%;
+	border: 1px solid darkgrey;
+	right: 0;
+	top: 21px;
+	z-index: 10;
+	/*				display: none;*/
+	overflow-y: auto;
+}
+
+#organizer {
+	height: 25px;
+	width: 128px;
+	display: inline-block;
+	position: relative;
+}
+
+#treeDemo li {
+	width: 100%;
+}
+
+.bootstrap-select>.dropdown-toggle.bs-placeholder {
+	background-color: #ffffff !important;
+	border-color: #e5e6e7 !important;
+}
+
+.filter-option {
+	color: #676b6d;
+}
+
+.bootstrap-select>.dropdown-toggle.btn-default {
+	background-color: #ffffff !important;
+	border-color: #e5e6e7 !important;
+	color: #555;
+}
+
+#fkdep_market {
+	display: nones;
+}
+
+.roll-right.J_tabRight {
+	right: 0;
+}
+/*软电话*/
+.open-softphone{
+	position: fixed;
+	bottom: 70px;
+	right: 40px;
+	width: 30px;
+	height: 30px;
+}
+.open-softphone img{
+	width: 100%;
+	height: 100%;
+}
+.open-softphone i{
+	font-size:24px
+}
+.softphone-box{
+	display: none;
+	position: fixed;
+	bottom: 70px;
+	right: 100px;
+	width: 270px;
+	height: 435px;
+	background:linear-gradient(to bottom,#6a95cb,#1f4379);
+	box-shadow: 3px 3px 1px #888888;
+}
+.phone_tooltip{
+	width: 88%;
+	height: 20%;
+	background: #FFFFFF;
+	margin: 8% auto;
+	border-radius:8%;
+	padding: 3% 5%;
+}
+.phone_tooltip p{
+	margin: 0;
+	padding: 1% 0;
+}
+
+.phone_btn_div{
+	width: 100%;
+	height: 8%;
+}
+.phone_btn_div ul{
+	overflow: hidden;
+	height: 100%;
+}
+.phone_btn_div ul li{
+	cursor: pointer;
+	width: 25%;
+	margin-left: 6%;
+	height: 100%;
+	text-align: center;
+	padding: 3% 0;
+	font-size: 13px;
+	border-radius: 5%;
+	background: #FFFFFF;
+	float: left;
+}
+.phoneNum_box ul{
+	overflow: hidden;
+}
+.phoneNum_box ul li{
+	cursor: pointer;
+	font-size: 28px;
+	width: 25%;
+	margin-left: 6%;
+	height: 100%;
+	text-align: center;
+	padding: 3% 0;
+	border-radius: 5%;
+	float: left;
+	color: #FFFFFF;
+}
+.phone_btn_bot{
+	position: relative;
+}
+.phone_btn_bot .posbtn1{
+	position: absolute;
+	left:10%;
+	cursor: pointer;
+}
+.phone_btn_bot .posbtn2{
+	position: absolute;
+	left: 50%;
+	font-size: 15px;
+	margin-left: -18px;
+	color: #FFFFFF;
+	padding: 3% 0;
+	cursor: pointer;
+}
+.phone_btn_bot .posbtn3{
+	position: absolute;
+	right: 10%;
+	cursor: pointer;
+}
+
+
+
+
+

CallCenterWeb.UI/index.html

@@ -14,751 +14,12 @@
     <link href="./css/plugins/iCheck/custom.css" rel="stylesheet">
     <link rel="stylesheet" href="./css/call.css" />
     <link rel="stylesheet" href="./css/personal.css" />
+    <link rel="stylesheet" href="css/index.css" />
     <link rel="stylesheet" href="./js/zTree/zTreeStyle.css" />
     <link href="./css/plugins/cropper/cropper.min.css" rel="stylesheet">
     <link href="./css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">
     <link href="./js/bootstrap-select/css/bootstrap-select.css" rel="stylesheet" />
     <script src="./js/jquery.select.js"></script>
-    <style>
-        @font-face {
-            font-family: 'iconfont';
-            src: url('./fonts/iconfont.eot');
-            /* IE9*/
-            src: url('./fonts/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-            url('./fonts/iconfont.woff') format('woff'), /* chrome、firefox */
-            url('./fonts/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
-            url('./fonts/iconfont.svg#iconfont') format('svg');
-            /* iOS 4.1- */
-        }
-
-        body {
-            font-family: "微软雅黑";
-        }
-
-        .ldtp-con {
-            display: block;
-        }
-
-        .ld-sercon select {
-            height: auto;
-        }
-
-        ul li {
-            list-style: none;
-            overflow: hidden;
-        }
-
-        .iconfont {
-            font-family: "iconfont";
-            font-style: normal;
-            color: #FFFFFF;
-        }
-
-        .fr {
-            float: right;
-        }
-
-        .fl {
-            float: left;
-        }
-
-        .size-12 {
-            font-size: 12px;
-        }
-
-        .title-box {
-            margin-top: 5px;
-        }
-
-            .title-box li {
-                margin-left: 30px;
-            }
-
-                .title-box li:hover {
-                    cursor: pointer;
-                }
-
-        .HoverColor {
-            color: #f8ac59;
-        }
-
-        .FailureColor {
-            color: #f95f5e;
-        }
-
-        .navbar-header {
-            width: 100%;
-            background-color: #2f4050;
-            padding-top: 10px;
-        }
-
-        .title-box li p {
-            color: #FFFFFF;
-            font-size: 14px;
-            font-weight: bold;
-            letter-spacing: 2px;
-            margin-top: 5px;
-        }
-
-        .size-14 {
-            font-size: 14px;
-            color: #FFFFFF !important;
-        }
-
-        .img-circle {
-            width: 58px;
-        }
-
-        .xian {
-            border: 1px solid #FFFFFF;
-            display: inline-block;
-            width: 15%;
-            margin: 5px;
-        }
-
-        .ss {
-            margin-left: 20px;
-        }
-
-        .fe-3 {
-            font-size: 3em;
-        }
-
-        .title-box p {
-            text-align: center;
-        }
-
-        .closed {
-            display: inline-block;
-            /*				margin-left: 5%;*/
-            cursor: pointer;
-            color: #FFFFFF;
-            float: right;
-            margin-right: 5%;
-            width: 25%;
-        }
-
-            .closed div {
-                overflow: hidden;
-            }
-
-            .closed ul {
-                margin-bottom: 0px;
-            }
-
-            .closed li {
-                float: left;
-                margin-right: 20px;
-            }
-
-            .closed i {
-                display: inline-block;
-                background: url(./img/chilun.png) no-repeat;
-                margin-right: 5px;
-                width: 14px;
-                height: 16px;
-                vertical-align: middle;
-            }
-
-        .ga {
-            background-position: 0 0 !important;
-        }
-
-        .sz {
-            background-position: 0 -15px !important;
-        }
-
-        .tc {
-            background-position: 0 -33px !important;
-        }
-
-        .zhuangtai {
-            display: block;
-            width: 30%;
-            margin-left: 10px;
-            font-size: 14px;
-            font-weight: 800;
-        }
-
-        .wq {
-            color: #f95f5e;
-        }
-
-        #top-search li:hover {
-            color: #eaeaea;
-        }
-
-        .content-tabs1 ul {
-            padding-left: 0;
-        }
-
-        .content-tabs1 li {
-            list-style: none;
-            float: left;
-            height: 5px;
-        }
-
-        .top1 {
-            background-color: #68adfe;
-        }
-
-        .top2 {
-            background-color: #9897f0;
-        }
-
-        .top3 {
-            background-color: #87eebf;
-        }
-
-        .top4 {
-            background-color: #68b0fe;
-        }
-
-        .top5 {
-            background-color: #f95a83;
-        }
-
-        .top6 {
-            background-color: #eb76dd;
-        }
-
-        .top7 {
-            background-color: #69cbd0;
-        }
-
-        .top8 {
-            background-color: #69cbd0;
-        }
-
-        .top9 {
-            background-color: #aaf58d;
-        }
-
-        .top10 {
-            background-color: #f76a53;
-        }
-
-        .top11 {
-            background-color: #eb76dd;
-        }
-
-        .top12 {
-            background-color: #6c77da;
-        }
-
-        .top13 {
-            background: -webkit-linear-gradient(left, #f073db, #65abfc);
-            background: -moz-linear-gradient(left, #f073db, #65abfc);
-            background: -o-linear-gradient(left, #f073db, #65abfc);
-            background: -webkit-gradient(linear, 100% 0, 0 0, from(#65abfc), to(#f073db));
-            background: linear-gradient(left, #f073db, #65abfc);
-            /* Opera 11.1 - 12.0 */
-            /* Firefox 3.6 - 15 */
-            /* 标准的语法 */
-        }
-
-        .zts {
-            height: 30px;
-            margin-left: 2%;
-            line-height: 30px;
-            padding-top: 15px;
-        }
-
-            .zts li {
-                height: 20px;
-                line-height: 20px;
-                font-weight: bold;
-                letter-spacing: 2px;
-            }
-
-        .quan {
-            width: 15px;
-            height: 15px !important;
-            border-radius: 50%;
-            margin-right: 2%;
-            margin-left: 5px;
-            margin-top: 2px;
-        }
-
-        .lx {
-            background: #6a6d69;
-        }
-
-        .br {
-            background: red;
-        }
-
-        .bl {
-            background: #7ab85b;
-        }
-
-        .LH {
-            line-height: 35px;
-        }
-
-        .zts span {
-            line-height: 20px;
-            margin-right: 50px;
-            font-size: 12px;
-        }
-
-        .photo {
-            width: 40px;
-            height: 40px;
-            border-width: 2px;
-            border-style: solid;
-            border-radius: 50%;
-            border-color: #ffb400 #fc3c04 #fdfc01 #00e3c0;
-            margin-bottom: 1px;
-        }
-
-            .photo img {
-                display: block;
-                width: 100%;
-                height: 100%;
-            }
-
-        .ls {
-            /*margin-left: 20px;*/
-            text-align: center;
-        }
-
-            .ls span {
-                margin-right: 10px;
-            }
-
-        .min-right {
-            margin-right: 10px;
-        }
-
-        .navbar-top-links i {
-            width: 24px;
-            height: 21px;
-            display: block;
-            background: url(./img/topIcon.png) no-repeat;
-            background-position: center center;
-            margin: 0 auto;
-        }
-        /*挂断*/
-
-        .DropCall {
-            background-position: 0px 0 !important;
-        }
-        /*外呼*/
-
-        .MakeCall {
-            background-position: 0px -20px !important;
-        }
-        /*置忙*/
-
-        .SayBusy {
-            background-position: 0px -42px !important;
-        }
-        /*置闲*/
-
-        .SayFree {
-            background-position: 0px -65px !important;
-        }
-        /*多方通话*/
-
-        .Meeting {
-            background-position: 0px -85px !important;
-        }
-        /*转移*/
-
-        .Transfer {
-            background-position: 0px -108px !important;
-        }
-        /*保持*/
-
-        .Hold {
-            background-position: 0px -131px !important;
-        }
-        /*接回*/
-
-        .Retrieve {
-            background-position: 0px -153px !important;
-        }
-        /*签入*/
-
-        .Login {
-            background-position: 0px -197px !important;
-        }
-        /*签出*/
-
-        .Logout {
-            background-position: 0px -175px !important;
-        }
-
-        .navbar-top-links .active {
-            background-position-x: -23px !important;
-        }
-
-        .ldcr-bottom .detail-con ul li .active a {
-            color: #f95a83 !important;
-        }
-
-        .ldcr-bottom .detail-con ul li .active em {
-            color: #f95a83 !important;
-        }
-
-        .ldcr-bottom .detail-con ul li .active + .explancon {
-            display: block !important;
-        }
-
-        .searchbtn {
-            width: 2.5em;
-            height: 24px;
-            border-radius: 5px;
-            position: absolute;
-            background-color: #f8ac59;
-            background-image: url(./img/searIcon.png);
-            background-repeat: no-repeat;
-            background-position: center center;
-            cursor: pointer;
-        }
-
-        .max-box {
-            height: 42px;
-            width: 100%;
-        }
-
-        .laydate_body .laydate_bottom,
-        .laydate_body .laydate_top {
-            height: 31px !important;
-        }
-
-        .laydate_body .laydate_y .laydate_yms ul li {
-            width: 59px !important;
-        }
-
-        .col-sm-1 {
-            padding-right: 0;
-            line-height: 34px;
-        }
-
-        ul.ztree {
-            overflow-y: scroll;
-            overflow-x: auto;
-        }
-
-        .minBacha {
-            position: absolute;
-            top: 0;
-            right: 80px;
-            z-index: 10;
-            overflow: hidden;
-        }
-
-            .minBacha > div {
-                float: left;
-                height: 35px;
-                width: 35px;
-                margin-left: 2px;
-            }
-
-                .minBacha > div a {
-                    display: block;
-                    height: 100%;
-                    width: 100%;
-                    text-align: center;
-                    background-position: center center;
-                    background-color: #2f4050;
-                    opacity: .5;
-                }
-
-                    .minBacha > div a:hover {
-                        opacity: 1;
-                    }
-
-        .minClosed > a {
-            background: url("./img/min.png") no-repeat;
-        }
-
-        .Bacha > a {
-            background: url("./img/gb.png") no-repeat;
-        }
-
-        .lblcount {
-            position: absolute;
-            right: 5px;
-            top: 7px;
-        }
-
-        .first {
-            z-index: 1000;
-        }
-
-        .khzl {
-            font-size: 12px;
-            border: 0;
-            margin: 35px auto;
-            color: #fff;
-        }
-
-            .khzl tr {
-                border: 0;
-            }
-
-            .khzl th {
-                padding: 5px 8px 5px 0;
-                text-align: right;
-                width: 40%;
-                font-weight: normal;
-                border: 0;
-            }
-
-            .khzl tbody > tr > td,
-            .khzl tbody > tr > th {
-                border: 0;
-            }
-
-                .khzl tbody > tr > td input {
-                    border: 0;
-                    outline: none;
-                    background: #243747;
-                    padding-left: 5px;
-                    width: 100%;
-                }
-
-        .khbtn {
-            /*background: #97a0a8;*/
-            color: #1ab394;
-            font-size: 14px;
-            vertical-align: middle;
-        }
-
-        .hei-list {
-            width: 400px;
-            margin: 0 auto;
-        }
-
-        .heiTop {
-            height: 35px;
-            background: #1ab394;
-            color: #fff;
-            line-height: 35px;
-            padding: 0 15px;
-            border-top-left-radius: 3px;
-            border-top-right-radius: 3px;
-        }
-
-            .heiTop .htl {
-                float: left;
-                margin: 0;
-            }
-
-            .heiTop .bacha {
-                float: right;
-                font-size: 18px;
-                cursor: pointer;
-                margin: 0;
-            }
-
-        .heiCon {
-            width: 100%;
-            background: #fff;
-            text-align: center;
-            padding: 25px 15px;
-            height: auto;
-            overflow-y: auto;
-            border: 1px solid #eee;
-        }
-
-        #time-word {
-            border: 1px solid #1ab394;
-            padding: 5px 0 5px 10px;
-            width: 120px;
-            outline: none;
-            color: #000;
-        }
-
-        .chooses {
-            margin-top: 10px;
-        }
-
-        .btns {
-            background: #1ab394;
-            color: #fff;
-            padding: 3px 10px;
-            outline: none;
-            font-size: 12px;
-            margin-left: 15px;
-            border: 0;
-            border-radius: 3px;
-            box-sizing: border-box;
-        }
-
-        .bianji {
-            display: inline-block;
-            height: 16px;
-            width: 16px;
-            vertical-align: middle;
-            margin-right: 5px;
-        }
-
-            .bianji.edi {
-                background: url(img/xgai.png) no-repeat;
-            }
-
-            .bianji.sav {
-                background: url(img/bbc.png) no-repeat;
-            }
-
-            .bianji.canc {
-                background: url(img/quxi.png) no-repeat;
-            }
-
-        .t-shade {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.48);
-            z-index: 10004;
-            display: none;
-        }
-
-        .shade_k {
-            z-index: 10005;
-            width: 40%;
-            margin: 10% auto;
-            background-color: #fff;
-            box-shadow: 1px 1px 50px rgba(0, 0, 0, .3);
-            border-radius: 5px;
-        }
-
-        .shade_title {
-            padding: 0 80px 0 20px;
-            height: 42px;
-            line-height: 42px;
-            border-bottom: 1px solid #eee;
-            font-size: 16px;
-            color: #FFFFFF;
-            overflow: hidden;
-            background-color: rgb(26, 179, 148);
-            border-radius: 2px 2px 0 0;
-            position: relative;
-        }
-
-        .setwin {
-            position: absolute;
-            right: 15px;
-            top: 5px;
-            font-size: 20px;
-            line-height: initial;
-        }
-
-            .setwin a {
-                font-size: 20px;
-                color: #fff;
-            }
-
-        .shade_content {
-            overflow-y: auto;
-            position: relative;
-            padding-bottom: 50px;
-            padding: 10px;
-        }
-
-        .wh_btn {
-            width: 80%;
-            text-align: center;
-            padding-top: 20px;
-            margin: 0 auto;
-            margin-bottom: 20px;
-        }
-
-            .wh_btn input {
-                padding: 7px 20px;
-                color: #FFF;
-                border-radius: 5px;
-                margin-right: 30px;
-                border: 1px solid #999;
-                border-color: rgb(26, 179, 148);
-            }
-
-        .sc_btn {
-            color: rgb(255, 255, 255);
-            font-size: 12px;
-            margin-left: 15px;
-            box-sizing: border-box;
-            background: rgb(26, 179, 148);
-            padding: 6px 10px;
-            outline: none;
-            border-width: 0px;
-            border-style: initial;
-            border-color: initial;
-            border-image: initial;
-            border-radius: 3px;
-        }
-
-            .sc_btn:hover {
-                color: #fff !important;
-            }
-
-        .cx {
-            display: block;
-        }
-
-        .phoneBZ {
-            display: inline-block;
-            height: 15px;
-            width: 15px;
-            position: absolute;
-            right: 0px;
-            bottom: -15px;
-            background: url(img/phoneBZ.png) no-repeat;
-            display: none;
-        }
-
-        #menuContent {
-            background: #fff;
-            position: absolute;
-            width: 100%;
-            border: 1px solid darkgrey;
-            right: 0;
-            top: 21px;
-            z-index: 10;
-            /*				display: none;*/
-            overflow-y: auto;
-        }
-
-        #organizer {
-            height: 25px;
-            width: 128px;
-            display: inline-block;
-            position: relative;
-        }
-
-        #treeDemo li {
-            width: 100%;
-        }
-
-        .bootstrap-select > .dropdown-toggle.bs-placeholder {
-            background-color: #ffffff !important;
-            border-color: #e5e6e7 !important;
-        }
-
-        .filter-option {
-            color: #676b6d;
-        }
-
-        .bootstrap-select > .dropdown-toggle.btn-default {
-            background-color: #ffffff !important;
-            border-color: #e5e6e7 !important;
-            color: #555;
-        }
-
-        #fkdep_market {
-            display: nones;
-        }
-
-        .roll-right.J_tabRight {
-            right: 0;
-        }
-    </style>
 </head>
 
 <body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
@@ -1316,9 +577,53 @@
         </div>
 
     </div>
-
     <!--修改密码结束-->
-
+    
+    <!--软电话图标-->
+    <a class="open-softphone" id="small-chat">
+    	<img src="img/softphone-icon.png"/>
+    </a>
+    <!--软电话弹框-->
+    <div class="softphone-box">
+    	<div class="phone_tooltip">
+    		<p>呼叫……</p>
+    		<p class="phTooltipResult" id="sip_phone_number"></p>
+    	</div>
+    	<div class="phone_btn_div">
+    		<ul>
+    			<li onclick="testStart()">初始</li>
+    			<li onclick="reg()" style="background: #24c792;">注册</li>
+    			<li onclick="unReg()">注销</li>
+    		</ul>
+    	</div>
+        <input hidden="hidden" id="sip_uri" type="text" value="sip:1009@sip.800100.com.cn"/></td>
+        <input hidden="hidden" id="sip_password" type="password" value="1009"/></td>
+        <input hidden="hidden" id="ws_uri" class="last unset" type="text" value="wss://sip.800100.com.cn:7443"/>
+        <input hidden="hidden" id="sip_phone_number" type="text" value="1010">
+    	
+		<div class="phoneNum_box">
+            <ul class="phoneNum_ul">
+                <li>1</li>
+                <li>2</li>
+                <li>3</li>
+                <li>4</li>
+                <li>5</li>
+                <li>6</li>
+                <li>7</li>
+                <li>8</li>
+                <li>9</li>
+                <li>*</li>
+                <li>0</li>
+                <li>#</li>
+            </ul>
+        </div>
+        <div class="phone_btn_bot">
+    		<div class="posbtn1" onclick="testCall()"><img src="img/call_out-icon.png"/></div>
+    		<div class="posbtn2 phoneNum_clear">清除</div>
+    		<div class="posbtn3" onclick="hangup()"><img src="img/hangu-iconp.png"/></div>
+    	</div>
+    </div>
+    
     <script src="./js/plugins/pace/pace.min.js"></script>
     <script src="./js/plugins/iCheck/icheck.min.js"></script>
     <script src="./css/laydate/laydate.js"></script>
@@ -1335,7 +640,8 @@
     <script src="./js/plugins/layer/layer.min.js"></script>
     <script src="./js/hplus.min.js?v=4.1.0"></script>
     <script src="./js/contabs.min.js"></script>
-
+    <script src="js/jssip-3.0.13.min.js" type="text/javascript"></script>
+	<script src="js/softphone.js"></script>
 </body>
 
 </html>

CallCenterWeb.UI/js/softphone.js

@@ -0,0 +1,177 @@
+ var outgoingSession = null;
+ var incomingSession = null;
+ var currentSession = null;
+ var videoView = document.getElementById('videoView');
+
+ var constraints = {
+ 	audio: true,
+ 	video: false,
+ 	mandatory: {
+ 		maxWidth: 640,
+ 		maxHeight: 360
+ 	}
+ };
+ URL = window.URL || window.webkitURL;
+
+ var localStream = null;
+ var userAgent = null;
+
+ function testStart() {
+
+ 	var sip_uri_ = huayi.config.sip_uri_.toString();
+ 	var sip_password_ = huayi.config.sip_password_.toString();
+ 	var ws_uri_ = huayi.config.ws_uri_.toString();
+ 	console.log(sip_uri_+'-'+sip_password_+'-'+ws_uri_)
+ 	console.info("get input info: sip_uri = ", sip_uri_, " sip_password = ", sip_password_, " ws_uri = ", ws_uri_);
+ 	JsSIP.C.SESSION_EXPIRES = 120, JsSIP.C.MIN_SESSION_EXPIRES = 120;
+ 	var socket = new JsSIP.WebSocketInterface(ws_uri_);
+ 	var configuration = {
+ 		sockets: [socket],
+ 		outbound_proxy_set: ws_uri_,
+ 		uri: sip_uri_,
+ 		password: sip_password_,
+ 		register: true,
+ 		session_timers: true
+ 	};
+
+ 	userAgent = new JsSIP.UA(configuration);
+
+ 	//注册成功
+ 	userAgent.on('registered', function(data) {
+ 		console.info("registered: ", data.response.status_code, ",", data.response.reason_phrase);
+ 	});
+
+ 	//注册失败
+ 	userAgent.on('registrationFailed', function(data) {
+ 		console.log("registrationFailed, ", data);
+ 		//console.warn("registrationFailed, ", data.response.status_code, ",", data.response.reason_phrase, " cause - ", data.cause);
+ 	});
+
+ 	//注册超时
+ 	userAgent.on('registrationExpiring', function() {
+ 		console.warn("registrationExpiring");
+ 	});
+
+ 	userAgent.on('newRTCSession', function(data) {
+ 		console.info('onNewRTCSession: ', data);
+
+ 		//通话呼入
+ 		if(data.originator == 'remote') {
+ 			console.info("incomingSession, answer the call----------------------");
+ 			incomingSession = data.session;
+ 			data.session.answer({
+ 				'mediaConstraints': {
+ 					'audio': true,
+ 					'video': false,
+ 					mandatory: {
+ 						maxWidth: 640,
+ 						maxHeight: 360
+ 					}
+ 				},
+ 				'mediaStream': localStream
+ 			});
+ 		} else {
+ 			console.info("outgoingSession");
+ 			outgoingSession = data.session;
+ 			outgoingSession.on('connecting', function(data) {
+ 				console.info('onConnecting - ', data.request);
+ 				currentSession = outgoingSession;
+ 				outgoingSession = null;
+ 			});
+ 		}
+ 		data.session.on('accepted', function(data) {
+ 			console.info('onAccepted - ', data);
+ 			if(data.originator == 'remote' && currentSession == null) {
+ 				currentSession = incomingSession;
+ 				incomingSession = null;
+ 				console.info("setCurrentSession - ", currentSession);
+ 			}
+ 		});
+ 		data.session.on('confirmed', function(data) {
+ 			console.info('onConfirmed - ', data);
+ 			if(data.originator == 'remote' && currentSession == null) {
+ 				currentSession = incomingSession;
+ 				incomingSession = null;
+ 				console.info("setCurrentSession - ", currentSession);
+ 			}
+ 		});
+ 		data.session.on('sdp', function(data) {
+ 			console.info('onSDP, type - ', data.type, ' sdp - ', data.sdp);
+ 		});
+
+ 		data.session.on('progress', function(data) {
+ 			console.info('onProgress - ', data.originator);
+ 			if(data.originator == 'remote') {
+ 				console.info('onProgress, response - ', data.response);
+ 			}
+ 		});
+ 		data.session.on('peerconnection', function(data) {
+ 			console.info('onPeerconnection - ', data.peerconnection);
+ 			data.peerconnection.onaddstream = function(ev) {
+ 				console.info('onaddstream from remote ----------- ', ev);
+ 				//                <!--  videoView.src = URL.createObjectURL(ev.stream); -->
+ 				videoView.srcObject = ev.stream;
+ 			};
+ 		});
+ 	});
+
+ 	userAgent.on('newMessage', function(data) {
+ 		if(data.originator == 'local') {
+ 			console.info('onNewMessage , OutgoingRequest - ', data.request);
+ 		} else {
+ 			console.info('onNewMessage , IncomingRequest - ', data.request);
+ 		}
+ 	});
+
+ 	console.info("call register");
+
+ 	userAgent.start();
+ }
+
+ // Register callbacks to desired call events
+ var eventHandlers = {
+ 	'progress': function(e) {
+ 		console.log('call is in progress');
+ 	},
+ 	'failed': function(e) {
+ 		console.log('call failed: ', e);
+ 	},
+ 	'ended': function(e) {
+ 		console.log('call ended : ', e);
+ 	},
+ 	'confirmed': function(e) {
+ 		console.log('call confirmed');
+ 	}
+ };
+
+ function testCall() {
+ 	var sip_phone_number_ = document.getElementById("sip_phone_number").innerHTML.toString();
+ 	var options = {
+ 		'eventHandlers': eventHandlers,
+ 		'mediaConstraints': {
+ 			'audio': true,
+ 			'video': false,
+ 			mandatory: {
+ 				maxWidth: 640,
+ 				maxHeight: 360
+ 			}
+ 		},
+ 		'mediaStream': localStream
+ 	};
+ 	outgoingSession = userAgent.call(sip_phone_number_, options);
+ }
+
+ function reg() {
+ 	console.log('register----------->');
+ 	userAgent.register();
+ }
+
+ function unReg() {
+ 	console.log('unregister----------->');
+ 	userAgent.unregister(true);
+ }
+
+ function hangup() {
+ 	console.log('hangup----------->');
+ 	userAgent.terminateSessions();
+ }

CallCenterWeb.UI/login.html

@@ -11,9 +11,6 @@
     <script src="Script/Common/huayi.load.js"></script>
     <script src="Script/Common/huayi.config.js"></script>
     <link href="./css/login.css" rel="stylesheet">
-    <!--[if lt IE 9]>
-    <meta http-equiv="refresh" content="0;ie.html" />
-    <![endif]-->
     <style>
     	.signin_left{
     		position: relative;
@@ -45,34 +42,17 @@
 		}
     	
     </style>
-    
-    
 </head>
 
 <body class="signin">
     <div class="signin_bg row">
         <div class="signin_bg_left col-md-5"></div>
         <div class="signin_bg_mask"></div>
-           <div class="left_word">
-           	<!--<div>
-           		  	 <h3>用心做，更出色</h3>
-                <p>致力于临床实验技术的普及和提高，为人类健康服务</p>
-           	</div>-->
-           </div>
+           <div class="left_word"></div>
     </div>
     <div class="container">
         <div class="row clearfix">
-            <div class="signin_left col-md-5">
-               <!--<h2>
-                   <i></i>
-                    <span>全客服平台</span>
-                </h2>-->
-                <!--<p>欢迎您进入全客服平台，开启智慧客服新篇章!</p>-->
-                <!--<div class="left_word">
-                	 <h3>用心做，更出色</h3>
-                <p>致力于临床实验技术的普通和提高，为人类健康服务</p>
-                </div>-->
-            </div>
+            <div class="signin_left col-md-5"></div>
             <div class="signin_right col-md-5">
                 <div class="signin_panel">
                 	<div class="logo_title">