文件

822 行
30 KiB
HTML
可执行文件

此文件含有模棱两可的 Unicode 字符

此文件含有可能会与其他字符混淆的 Unicode 字符。 如果您是想特意这样的,可以安全地忽略该警告。 使用 Escape 按钮显示他们。

<!DOCTYPE html>
<!--[1.1.34]-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>工单详情</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="__PUBLIC__/jquery/js/jquery-2.0.3.min.js"></script>
<script src="__PUBLIC__/jquery/js/jquery.form.js"></script>
<link href="__PUBLIC__/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="__PUBLIC__/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="__PUBLIC__/layuiadmin/style/admin.css" media="all">
<script src="__PUBLIC__/bootstrap/js/bootstrap.min.js"></script>
<style>
html,body{
box-sizing: border-box;
padding: 10px;
/*background: #f1f1f1;*/
background: white;
}
.newtable tr {
border: none;
}
.newtable td {
border: none;
text-align: center;
}
.newtable th {
border: none;
text-align: center;
}
.newtable tbody > tr > th {
border: none;
}
.newtable tbody > tr > td {
border: none;
}
.newtable tbody + tbody {
border: none;
}
td > div {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
}
.Business_tb1 tr td {
border-right: 1px solid #ebecee!important;
border-bottom: 1px solid #ebecee!important;
line-height: 20px;
white-space: nowrap;
text-align: center;
}
.Business_tb1 tr th {
border-color: #ebecee!important;
width: 3%;
border: none;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
.layui-card-header{
background-color: #fafbfc;
border-bottom: 1px solid #e7e6eb;
}
.layui-card {
border: 1px solid #e7e6eb;
}
.item{
padding: 13px;
display: flex;
}
.imgone {
width: 150px;
height: 80px;
}
.layui-tab{
height: 45px;
}
.layui-icon{
vertical-align: middle;
}
.layui-nav-item{
line-height: 45px;
/*text-align: center;*/
}
.item-label{
width: 21%;
}
.item-content{
flex: 1;
margin-left: 18px;
}
.label-outline-one{
background-color: lightgray;
margin-left:45% ;
}
.item-sea-one{
margin-left: 18px;
width: 40%;
padding: 6px;
margin-top: 10px;
background: #fff;
position: relative;
border-radius: 2px;
}
.item-sea-one:after{
content: '';
display: block;
position: absolute;
left: -8px;
top: 25%;
width:0;
height:0;
border-width:8px 8px 8px 0;
border-style:solid;
border-color:transparent white transparent transparent;
}
.item-img-one{
margin-top: 10px;
}
.workimg-one{
width: 60px;
height: 60px;
/*border-radius: 50%;*/
}
.item-done{
margin-top: 10px;
}
.done{
display: flex;
}
.label-outline-two{
background-color: lightgray;
margin-left:45% ;
}
.item-sea-two{
margin-right: 18px;
width: 40%;
padding: 6px;
margin-top: 10px;
font-size: 16px;
background: #9eea6a;
position: relative;
border-radius: 2px;
}
.item-sea-two:after{
content: '';
display: block;
position: absolute;
right: -8px;
top: 25%;
width:0;
height:0;
border-width:8px 0 8px 8px;
border-style:solid;
border-color:transparent transparent transparent #9eea6a;
}
.item-img-two{
margin-top: 10px;
}
.workimg-two{
width: 60px;
height: 60px;
}
.item-dtwo{
margin-top: 12px;
}
.dtwo{
display: flex;
justify-content: flex-end;
}
.item-scroll-one{
height: 512px;
overflow-y: scroll;
background: #f5f5f5;
}
.item-scroll-one::-webkit-scrollbar{
width: 8px;
}
.item-scroll-one::-webkit-scrollbar-thumb{
background-color: #ccc;
border-radius: 5px;
}
.item-pubimg{
width: 230px;
}
.item-pubdtwo{
margin-right: 18px;
margin-top: 10px;
width: 240px;
padding: 5px;
border: 1px solid white;
background: white;
position: relative;
}
.item-pubdtwo:after{
content: '';
display: block;
position: absolute;
right: -8px;
top: 25%;
width:0;
height:0;
border-width:8px 0 8px 8px;
border-style:solid;
border-color:transparent transparent transparent white;
}
.item-pubdone{
margin-left: 18px;
margin-top: 10px;
width: 240px;
padding: 5px;
border: 1px solid white;
background: white;
position: relative;
}
.item-pubdone:after{
content: '';
display: block;
position: absolute;
left: -8px;
top: 25%;
width:0;
height:0;
border-width:8px 8px 8px 0;
border-style:solid;
border-color:transparent white transparent transparent;
}
.item-scroll-two{
height: 100%;
}
.item-button-div{
display: flex;
justify-content: flex-end;
margin-right: 15px;
margin-top: 15px;
}
.layui-btn-primary{
background: #f5f5f5;
height: 33px;
line-height: 33px;
margin-bottom: 8px;
}
.item-hidden{
display: none;
margin-top: 10px;
margin-left: 10px;
}
.layui-upload-img{
width: 70px;
height: 40px;
cursor: pointer;
}
.maximg{
cursor: pointer;
}
.item-block{
display: block;
margin-bottom: 6px;
}
.layui-textarea{
height: 100px;
border-left:0px;
border-top:0px;
border-right:0px;
border-bottom:1px;
overflow:hidden;
resize:none;
}
.layui-icon-picture{
margin-left: 15px;
font-size: 25px;
cursor: pointer;
}
.item-icon-picture{
margin-top: 12px;
}
.layui-tab-close{
font-size: 13px;
color: black;
}
.item-img-block{
width: 70px;
height: 40px;
position: relative;
}
.item-mistake{
position: absolute;
top: -7px;
right: -8px;
width: 17px;
height: 17px;
text-align: center;
border-radius: 50%;
border: 1px solid #c4c3c4;
background: #c4c3c4;
}
.item-mistake:hover{
background: red;
}
.newheader{
text-align: center;
position: relative;
}
.item-header{
position: absolute;
width: 50px;
height: 100%;
margin-left: -26px;
cursor:pointer ;
}
.item-star{
font-size: 50px;
color: palevioletred;
}
</style>
</head>
<body>
<div class="layui-col-md12">
<div class="layui-row layui-col-space13" style="margin-bottom: 15px;">
<div class="layui-card-header newheader">
<div class="item-header">
<i class="layui-icon layui-icon-return" lay-tips="返回上一页面"></i>
</div>
工单详情
</div>
</div>
<div class="layui-row layui-col-space15">
<!--壹-->
<div class="layui-col-md8">
<div class="layui-row layui-col-space15">
<!--1-->
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">工单状态</div>
<div class="layui-card-body">
<div class="layui-tab" lay-unauto lay-allowClose="true" lay-filter="layadmin-layout-tabs">
<ul class="" lay-filter="layadmin-system-side-menu">
<li data-name="home" class="layui-nav-item">
<if condition="$newStatus eq 1">
<i class="layui-icon layui-icon-rate item-star"></i>
<cite style="vertical-align: middle">您的工单未处理</cite>
</if>
<if condition="$newStatus eq 2">
<i class="layui-icon layui-icon-rate-half item-star"></i>
<cite style="vertical-align: middle">您的工单正在快速处理中</cite>
</if>
<if condition="$newStatus eq 3">
<i class="layui-icon layui-icon-rate-solid item-star"></i>
<cite style="vertical-align: middle;">您的工单开发者已处理完毕</cite>
</if>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--2-->
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">聊天窗口---对方<span class="imstatus">离线</span></div>
<div class="layui-card-body item-scroll-one">
<input type="hidden" name="" value="{$res['number']}" id="number">
<div class="item-scroll-bottom">
<volist name="work_chat" id="v">
<if condition="$v['status'] eq 1">
<!--one-->
<div class="item-done">
<span class="label label-outline-one">{:date("m-d H:i:s",$v['addtime'])}</span>
<div class="done">
<div class="item-img-one">
<img class="workimg-one" src="{$v['userfile']}" >
</div>
<if condition="$v['type'] eq 1">
<div class="item-sea-one">
{$v['describe']}
</div>
<else />
<div class="item-pubdone maximg">
<img class="item-pubimg" src="{$v['describe']}">
</div>
</if>
</div>
</div>
<else />
<!--second-->
<div class="item-dtwo">
<span class="label label-outline-two">{:date("m-d H:i:s",$v['addtime'])}</span>
<div class="dtwo">
<if condition="$v['type'] eq 1">
<div class="item-sea-two arrow">{$v['describe']}</div>
<else />
<div class="item-pubdtwo maximg">
<img class="item-pubimg" src="{$v['describe']}">
</div>
</if>
<div class="item-img-two">
<img class="workimg-two" src="{$v['userfile']}">
</div>
</div>
</div>
</if>
</volist>
</div>
</div>
<div class="item-scroll-two">
<!--<button type="button" class="layui-btn item-upload" id="test1">上传图片</button>-->
<div class="item-icon-picture" id="picture">
<i class="layui-icon layui-icon-picture" id="test1"></i>
</div>
<div class="item-hidden" id="change">
<div class="item-img-block">
<img class="layui-upload-img" id="demo1">
<div class="item-mistake">
<i class="layui-icon layui-unselect layui-tab-close">ဆ</i>
</div>
</div>
<p id="demoText"></p>
</div>
<input type="hidden" value="" id="image">
<textarea name="desc" placeholder="此处填写文字说明" class="layui-textarea" id="describe"></textarea>
<div class="item-button-div">
<button class="layui-btn layui-btn-primary" id="submit">发送</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!--贰-->
<div class="layui-col-md4">
<!--1-->
<div class="layui-card">
<div class="layui-card-header">基本信息</div>
<div class="layui-card-body layui-text">
<table class="layui-table" lay-skin="line">
<colgroup>
<col width="118">
<col>
</colgroup>
<tbody>
<tr>
<td>站点网址</td>
<td>{$data['siteurl']}</td>
</tr>
<tr>
<td>远程IP</td>
<td>{$data['ip']}</td>
</tr>
<tr>
<td>用户账号</td>
<td>{$data['username']}</td>
</tr>
<tr>
<td>用户密码</td>
<td>{$data['password']}</td>
</tr>
<tr>
<td>联系人QQ</td>
<td>{$data['qq']}</td>
</tr>
<tr>
<td>手机号</td>
<td>{$data['phone']}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--2-->
<div class="layui-card">
<div class="layui-card-header">
工单信息
<i class="layui-icon layui-icon-tips" lay-tips="问题信息" lay-offset="5"></i>
</div>
<div class="layui-card-body layui-text layadmin-text">
<div class="item">
<div class="item-label">工单编号:</div>
<div class="item-content">{$res.number}</div>
</div>
<div class="item">
<div class="item-label">问题标题:</div>
<div class="item-content">{$res.title}</div>
</div>
<div class="item">
<div class="item-label">问题描述:</div>
<div class="item-content">{$res.describe}</div>
</div>
<div class="item">
<div class="item-label">操作描述:</div>
<div class="item-content">{$res.operation}</div>
</div>
<div class="item">
<div class="item-label">问题图片:</div>
<div class="item-content maximg">
<if condition="$res['image'] neq null">
<img class="imgone" src="http://{$data['siteurl']}{$res['image']}" >
<else/>
<div class="item-content">暂无图片</div>
</if>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="__PUBLIC__/layuiadmin/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/js/jquery.min.js"></script>
<script>
$(function () {
connect()
$(".item-scroll-one").scrollTop($(".item-scroll-bottom").height());
});
//判断是否在线
function isonline() {
var id = "{$res.number}_server";
var bid = "{$res.number}_work";
var login_data = '{"type":"online","bid":"'+bid+'","uid":"'+id+'","type_id":0}';
ws.send(login_data);
}
function onopen() {
//使用工单id-a 登录售后账号
var id = "{$res.number}_server";
var login_data = '{"type":"login","uid":"'+id+'","type_id":0}';
ws.send(login_data);
//登录完了判断对面在不在线
isonline();
}
function onmessage(e)
{
var data = eval("("+e.data+")");
switch(data['type']){
// 服务端ping客户端
case 'ping':
ws.send('{"type":"pong"}');
isonline();
break;
// 登录 更新用户列表
// case 'login':
// say(data['client_id'], data['client_name'], data['client_name'] + ' 加入了聊天室', data['time']);
// 登录 更新用户列表
case 'online':
if(data.content){
//显示在线 绿色
$(".imstatus").html("在线");
$(".imstatus").css("color","green");
}else{
//显示离线 红色
$(".imstatus").html("离线中");
$(".imstatus").css("color","#f00");
}
break;
// 发言
case 'work':
append_message(data['content'],2);
break;
}
}
function connect() {
// 创建websocket
ws = new WebSocket("ws://console.mobzhifu.com:5170");
// 当socket连接打开时,输入用户名
ws.onopen = onopen;
// 当有消息时根据消息类型显示不同信息
ws.onmessage = onmessage;
//使用工单id登录
ws.onclose = function() {
connect();
};
ws.onerror = function() {
// alert("出现错误");
};
}
layui.config({
base: '__PUBLIC__/layuiadmin/' //静态资源所在路径
}).extend({
index: 'lib/index' //主入口模块
}).use(['form', 'laydate','element','index','layer','upload'], function() {
var form = layui.form;
var element = layui.element;
var index = layui.index;
var layer = layui.layer;
var upload = layui.upload;
var uploadInst = upload.render({
elem: '#test1'
,url: "{:U('Work/work_upload_img')}"
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接(base64)
});
}
,done: function(res){
if(res.code == 0){
$('#image').val(res.name);
$("#change").addClass('newMax');
layer.photos({
photos: '.newMax'
,anim: 5
});
$('#picture').hide();
$(".item-hidden").show();
}
//如果上传失败
if(res.code != 0){
return layer.msg('上传失败');
}
//上传成功
}
,error: function(){
//演示失败状态,并实现重传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function(){
uploadInst.upload();
});
}
});
// 图片缩放显示
layer.photos({
photos: '.maximg'
,anim: 5
});
$(".item-header").click(function () {
window.history.back(-1);
})
$(".item-mistake").click(function () {
$(".item-hidden").hide();
$("#picture").show();
$('#image').val(null);
$('#demo1').attr('src','');
})
//发送
$("#submit").click(function () {
var describe = $('#describe').val();
var img = $('#image').val();
var number = $('#number').val();
if (!number) {
top.layer.msg("请检查工单编号");
return false;
}
if(!describe && !img) {
layer.tips("<span style='color:black'>不能发送空白消息</span>", '#submit', {
tips: [4, 'white'],
tipsMore: false,
time:2000
});
return false;
}
var data = {
describe:describe,
img:img,
number:number,
}
$.ajax({
url: "{:U('Work/addChat')}",
type: "post",
data:data, // jQuery不要去设置Content-Type请求头
success: function (res) {
$('#picture').show();
data.img = res.img;
send(data);
}
})
})
function send(data) {
var content;
var time = new Date().Format("MM-dd HH:mm:ss");
var uid = "{$res.number}_work";
if(data.img){
//发送一条图片消息
content = data.img;
var type = 2;
var contents = {
"content":content,
"type":type,
"time":time,
}
var img = {"content":contents,"type":"say","type_id":0,"uid":uid};
var send = ws.send(JSON.stringify(img));
append_message(img.content,1);
}
if(data.describe){
//发送一条文本消息
content = data.describe;
var type = 1;
var content = {
"content":content,
"type":type,
"time":time,
}
var datas = {"content":content,"type":"say","type_id":0,"uid":uid};
var send = ws.send(JSON.stringify(datas));
append_message(datas.content,1);
}
}
});
function append_message(data,type) {
if(type==1){
if(data.type==2){
var imgurl = data.content;
var content = `<div class="item-dtwo">
<span class="label label-outline-two">${data.time}</span>
<div class="dtwo">
<div class="item-pubdtwo maximg">
<img class="item-pubimg" src="${imgurl}" layer-index="6">
</div>
<div class="item-img-two">
<img class="workimg-two" src="/Public/work/1.png">
</div>
</div>
</div>`;
$("#image").val(null);
}else if(data.type==1){
//添加文字
var content = `<div class="item-dtwo">
<span class="label label-outline-two">${data.time}</span>
<div class="dtwo">
<div class="item-sea-two">${data.content}</div>
<div class="item-img-two">
<img class="workimg-two" src="/Public/work/1.png">
</div>
</div>
</div>`;
}
}else if(type==2){
if(data.type==1){
//添加文字
var content = `<div class="item-done">
<span class="label label-outline-one">${data.time}</span>
<div class="done">
<div class="item-img-one">
<img class="workimg-one" src="/Public/work/3.jpg">
</div>
<div class="item-sea-one">${data.content}</div>
</div>
</div>`;
}else if(data.type==2){
var imgurl = data.content;
var content = `<div class="item-done">
<span class="label label-outline-one">${data.time}</span>
<div class="done">
<div class="item-img-one">
<img class="workimg-one" src="/Public/work/3.jpg">
</div>
<div class="item-pubdone maximg">
<img class="item-pubimg" src="${imgurl}" layer-index="0">
</div>
</div>
</div>`;
$("#image").val(null);
}
}
$(".item-scroll-one").append(content);
$(".item-scroll-one").scrollTop($(".item-scroll-bottom").height());
$("#describe").val(null);
$(".item-hidden").hide();
}
Date.prototype.Format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"H+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}
</script>
</body>
</html>