You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

713 lines
34 KiB
Plaintext

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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="/WF/Scripts/jquery-1.11.0.min.js" type="text/javascript"></script>
<link href="../layuiadmin/layui/css/layui.css" rel="stylesheet" />
<link href="../layuiadmin/style/admin.css" rel="stylesheet" />
<script src="../layuiadmin/layui/layui.js"></script>
<link href="../layuiadmin/layui/css/modules/layer/default/layer.css" rel="stylesheet" />
<script src="../layuiadmin/layui/lay/modules/layer.js"></script>
<!-- 引用通用的js文件. -->
<script src="/WF/Scripts/config.js?v=1.0" type="text/javascript"></script>
<script src="/WF/Comm/Gener.js?v=1.0" type="text/javascript"></script>
<script src="/WF/Scripts/QueryString.js" type="text/javascript"></script>
<script src="/WF/Scripts/echartsjs/echarts.min.js" type="text/javascript"></script>
<script src="bar.js"></script>
<style type="text/css">
.au-but {
font-size: 0.6rem;
background-color: transparent;
border: none;
outline: none;
border: 1px solid #E59C26;
padding: 0 0.25rem;
color: #E59C26;
border-radius: 0.125rem;
}
.but-color1 {
border-color: #0F81EC;
color: #0F81EC;
}
.but-color2 {
border-color: #FF4E00;
color: #FF4E00;
}
.but-color3 {
border-color: #3c763d;
color: #3c763d;
}
.layuiadmin-card-status dd div a {
color: #2f4050 !important;
}
</style>
<script type="text/javascript">
var fk_flow = GetQueryString("FK_Flow");
$(function () {
//数据分析-总的概况
GetGenerWorksByDept();
//分析项
GetAnalyseGroupByRpt();
//按月份/按人员统计
FlowAnalyse_DataSet();
});
/**
* 获取本部门的数据统计
*/
function GetGenerWorksByDept() {
var handler = new HttpHandler("BP.Cloud.HttpHandler.App_OneFlow");
handler.AddPara("FK_Flow", fk_flow);
var data = handler.DoMethodReturnString("DataPanelDept_GetGenerWorksByDept");
if (data.indexOf("err@") != -1) {
layer.alert(data);
console.log(data);
return;
}
data = JSON.parse(data);
//本部门的
$("#Dept_GWF_Counts").html(data.Dept_GWF_Counts);
$("#Dept_GWF_RuningCounts").html(data.Dept_GWF_RuningCounts == undefined ? 0 : data.Dept_GWF_RuningCounts);
$("#Dept_GWF_CompleteCounts").html(data.Dept_GWF_CompleteCounts == undefined ? 0 : data.Dept_GWF_CompleteCounts);
$("#Dept_GWF_ReturnCounts").html(data.Dept_GWF_ReturnCounts == undefined ? 0 : data.Dept_GWF_ReturnCounts);
$("#Dept_GWF_OverCounts").html(data.Dept_GWF_OverCounts == undefined ? 0 : data.Dept_GWF_OverCounts);
$("#Dept_GWF_DeleteCounts").html(data.Dept_GWF_DeleteCounts == undefined ? 0 : data.Dept_GWF_DeleteCounts);
//个人的
$("#My_GWF_Counts").html(data.My_GWF_Counts);
$("#My_GWF_RuningCounts").html(data.My_GWF_RuningCounts == undefined ? 0 : data.My_GWF_RuningCounts);
$("#My_GWF_CompleteCounts").html(data.My_GWF_CompleteCounts == undefined ? 0 : data.My_GWF_CompleteCounts);
$("#My_GWF_ReturnCounts").html(data.My_GWF_ReturnCounts == undefined ? 0 : data.My_GWF_ReturnCounts);
$("#My_GWF_OverCounts").html(data.My_GWF_OverCounts == undefined ? 0 : data.My_GWF_OverCounts);
$("#My_GWF_DeleteCounts").html(data.My_GWF_DeleteCounts == undefined ? 0 : data.My_GWF_DeleteCounts);
}
/**
*
* 分析项的解析
*/
function GetAnalyseGroupByRpt() {
var handler = new HttpHandler("BP.Cloud.HttpHandler.App_OneFlow");
handler.AddPara("FK_Flow", fk_flow);
var data = handler.DoMethodReturnString("DataPanelDept_GetAnalyseGroupByRpt");
if (data.indexOf("err@") != -1) {
layer.alert(data);
console.log(data);
return;
}
data = JSON.parse(data);
var _html = "<div class='layui-form'>";
$.each(data, function (idx, item) {
if (item.KeyOfEn != "WorkID" && item.KeyOfEn != "OID" && item.KeyOfEn != "PWorkID"
&& item.KeyOfEn != "FID" && item.KeyOfEn != "PNodeID" && item.KeyOfEn != "FlowEndNode") {
_html += '<li>';
if (item.KeyOfEn == "WFState")
_html += '<input type="radio" name="deptAnaly" id="' + item.KeyOfEn + '" title="' + item.Name + '" checked lay-filter="CheckedState">';
else
_html += '<input type="radio" name="deptAnaly" id="' + item.KeyOfEn + '" title="' + item.Name + '" lay-filter="CheckedState">';
//_html += '<div class="layui-unselect layui-form-radio" onclick="CheckedState(\'' + item.KeyOfEn + '\',this)">';
//_html += '<i class="layui-anim layui-icon"></i>';
//_html += '<div>' + item.Name + '</div>';
//_html += '</div>';
_html += '</li>';
}
});
_html += "</div>";
$("#flowByNYPanel").html(_html);
layui.use(['form', 'element'], function () {
var form = layui.form;
//此处即为 radio 的监听事件
form.on('radio(CheckedState)', function (data) {
var keyOfEn = data.elem.id; // DOM元素的ID
//根据分析项获取分析数据
var handler = new HttpHandler("BP.Cloud.HttpHandler.App_OneFlow");
handler.AddPara("FK_Flow", fk_flow);
handler.AddPara("KeyOfEn", keyOfEn);
handler.AddPara("GroupBy", "FK_NY");
var data = handler.DoMethodReturnString("DataPanelDept_GetAnalyseBySpecifyField_DataSet");
});
});
}
function ShowPanel(panelId) {
$("#" + panelId).show();
}
function hidePanel() {
$(".layui-table-tool-panel").hide();
}
function CheckedState(key, obj) {
if ($(obj).hasClass("layui-form-radioed") == true) {
$(obj).removeClass("layui-form-checked");
$("#" + key).removeAttr("checked");
} else {
$(obj).addClass("layui-form-radioed");
$("#" + key).attr("checked", "checked");
}
}
/**
* 流程数据分析
*/
var flowData;
function FlowAnalyse_DataSet() {
var handler = new HttpHandler("BP.Cloud.HttpHandler.App_OneFlow");
handler.AddPara("FK_Flow", fk_flow);
var data = handler.DoMethodReturnString("DataPanelDept_GetAnalyseByFlowNoDept_DataSet");
if (data.indexOf("err@") != -1) {
layer.alert(data);
console.log(data);
return;
}
flowData = JSON.parse(data);
var _html = "";
//按月份分析 发起的数量,完成的数量
queryFlowAnalyse("FlowByNY", "流程-月", true, false, false);
//按人员分析
queryFlowAnalyse("FlowByEmp", "流程-人员", false, false, true);
}
function queryFlowAnalyse(flowType, title, isLineShow, isPieShow, isBarShow) {
var Flow_X = [];
var Pie_Flow_X = [];
if (flowType == "FlowByNY") {
if (isPieShow == true)
Pie_Flow_X = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
Flow_X = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];
}
if (flowType == "FlowByEmp")
$.each(flowData.FlowStartByEmp, function (i, item) {
Flow_X[i] = item.StarterName;
});
var startcount = 0;
var completecount = 0;
var startFlow = [];
var completeFlow = [];
var startFlowPie = [];
if (flowType == "FlowByNY") {
for (var i = 0; i < Flow_X.length; i++) {
var isHave = false;
for (var k = 0; k < flowData.FlowStartByNY.length; k++) {
if (Flow_X[i] == flowData.FlowStartByNY[k].FK_NY) {
isHave = true;
startFlow[i] = flowData.FlowStartByNY[k].Num;
startcount += flowData.FlowStartByNY[k].Num;
startFlowPie[i] = { name: Pie_Flow_X[i], value: flowData.FlowStartByNY[k].Num };
break;
}
}
if (isHave == false)
startFlow[i] = 0;
isHave = false;
for (var k = 0; k < flowData.FlowCompleteByNY.length; k++) {
if (Flow_X[i] == flowData.FlowCompleteByNY[k].FK_NY) {
isHave = true;
completeFlow[i] = flowData.FlowCompleteByNY[k].Num;
completecount += flowData.FlowCompleteByNY[k].Num;
break;
}
}
if (isHave == false)
completeFlow[i] = 0;
}
if (isPieShow == true)
Flow_X = Pie_Flow_X;
}
if (flowType == "FlowByEmp") {
for (var k = 0; k < flowData.FlowStartByEmp.length; k++) {
startFlow[k] = flowData.FlowStartByEmp[k].Num;
startcount += flowData.FlowStartByEmp[k].Num;
startFlowPie[k] = { name: Flow_X[k], value: flowData.FlowStartByEmp[k].Num };
}
for (var k = 0; k < flowData.FlowCompleteByEmp.length; k++) {
completeFlow[k] = flowData.FlowCompleteByEmp[k].Num;
completecount += flowData.FlowCompleteByEmp[k].Num;
}
}
var pie = [];
pie[0] = startcount;
pie[1] = completecount;
//$.each(flowData.FlowStartByNY, function (i, item) {
// startFlow[i] = item.Num;
//});
//$.each(flowData.FlowCompleteByNY, function (i, item) {
// completeFlow[i] = item.Num;
//});
/*********************************************折线图*****************************************************/
// 基于准备好的dom初始化echarts实例
if (isLineShow) {
var myChart = echarts.init(document.getElementById(flowType + '_Line'));
// 指定图表的配置项和数据
var option = {
grid: {
top: '5%',
right: '1%',
left: '1%',
bottom: '10%',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: Flow_X
},
yAxis: {
type: 'value'
},
series: [{
name: '发起流程数',
data: startFlow,
type: 'line',
smooth: true,
symbol: 'emptydiamond',
itemStyle: {
normal: {
color: '#8cd5c2', //改变折线点的颜色
lineStyle: {
color: '#8cd5c2' //改变折线颜色
}
}
},
areaStyle: {
normal: {}
},
}, {
name: '完成流程数',
data: completeFlow,
type: 'line',
smooth: true,
symbol: 'emptydiamond',
areaStyle: {
normal: {}
},
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
/*********************************************饼状图*****************************************************/
// 基于准备好的dom初始化echarts实例
if (isPieShow) {
var myChart = echarts.init(document.getElementById(flowType + '_Pie'));
// 指定图表的配置项和数据
var option = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
// orient 设置布局方式,默认水平布局,可选值:'horizontal'(水平) ¦ 'vertical'(垂直)
orient: 'vertical',
// x 设置水平安放位置,默认全图居中,可选值:'center' ¦ 'left' ¦ 'right' ¦ {number}x坐标单位px
x: 'left',
// y 设置垂直安放位置,默认全图顶端,可选值:'top' ¦ 'bottom' ¦ 'center' ¦ {number}y坐标单位px
y: 'center',
itemWidth: 24, // 设置图例图形的宽
itemHeight: 18, // 设置图例图形的高
textStyle: {
color: '#666' // 图例文字颜色
},
// itemGap设置各个item之间的间隔单位px默认为10横向布局时为水平间隔纵向布局时为纵向间隔
itemGap: 10,
//backgroundColor: '#f8f8f8', // 设置整个图例区域背景颜色
data: Flow_X
},
series: [{
type: 'pie',
name: '',
radius: '60%',
center: ['60%', '50%'],
data: startFlowPie,
itemStyle: {
// emphasis英文意思是 强调;着重;(轮廓、图形等的)鲜明;突出,重读
// emphasis设置鼠标放到哪一块扇形上面的时候扇形样式、阴影
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(30, 144, 2550.5)'
}
},
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
/*********************************************柱状图*****************************************************/
// 基于准备好的dom初始化echarts实例
if (isBarShow) {
var myChart = echarts.init(document.getElementById(flowType + '_Bar'));
////设计显示的颜色
//var colorList = [];
//for (var i = 0; i < Flow_X.length; i++) {
// if (i % 3 == 0)
// colorList[i] = '#ff4844';
// if (i % 3 == 1)
// colorList[i] = '#9ac3e5';
// if (i % 3 == 2)
// colorList[i] = '#66ac52';
//}
// 指定图表的配置项和数据
var option = {
grid: {
top: '5%',
right: '1%',
left: '1%',
bottom: '10%',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['流程个数']
},
xAxis: {
type: 'category',
data: Flow_X
},
yAxis: {
type: 'value'
},
series: [{
name: '发起数量',
data: startFlow,
type: 'bar',
smooth: true,
itemStyle: {
normal: {
color: 'red'
}
}
}, {
name: '完成数量',
data: completeFlow,
type: 'bar',
smooth: true,
itemStyle: {
normal: {
color: 'blue'
}
}
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}
function ChangeShowDiv(flowType, chartType, obj) {
$(obj).addClass("layui-this");
if (chartType == "Line") {
$("#" + flowType + "_Pie").removeClass("layui-this");
$("#" + flowType + "_Bar").removeClass("layui-this");
$("#" + flowType + "_Line").addClass("layui-this");
$("#" + flowType + "_Pie_i").removeClass("layui-this");
$("#" + flowType + "_Bar_i").removeClass("layui-this");
queryFlowAnalyse(flowType, "", true, false, false);
}
if (chartType == "Pie") {
$("#" + flowType + "_Pie").addClass("layui-this");
$("#" + flowType + "_Bar").removeClass("layui-this");
$("#" + flowType + "_Line").removeClass("layui-this");
$("#" + flowType + "_Line_i").removeClass("layui-this");
$("#" + flowType + "_Bar_i").removeClass("layui-this");
queryFlowAnalyse(flowType, "", false, true, false);
}
if (chartType == "Bar") {
$("#" + flowType + "_Pie").removeClass("layui-this");
$("#" + flowType + "_Bar").addClass("layui-this");
$("#" + flowType + "_Line").removeClass("layui-this");
$("#" + flowType + "_Pie_i").removeClass("layui-this");
$("#" + flowType + "_Line_i").removeClass("layui-this");
queryFlowAnalyse(flowType, "", false, false, true);
}
}
//已知URL,在右侧打开页面
function OpenWindowRight(url, title, wfstate) {
var oldUrl = url;
if (title == "我发起的")
url += "?SearchType=My&FK_Flow=" + GetQueryString("FK_Flow");
if (title == "我审批的")
url += "?SearchType=MyJoin&FK_Flow=" + GetQueryString("FK_Flow");
else if (title == "我部门发起的") {
url += "?SearchType=MyDept&FK_Flow=" + GetQueryString("FK_Flow");
oldUrl = url;
url += "&WFState=" + wfstate;
}
else
url += "?1=1&FK_Flow=" + GetQueryString("FK_Flow");
if (top.layui.index) {
if (title == "我部门发起的") {
top.layui.element.tabDelete("layadmin-layout-tabs", oldUrl + "&WFState=all");
top.layui.element.tabDelete("layadmin-layout-tabs", oldUrl + "&WFState=2");
top.layui.element.tabDelete("layadmin-layout-tabs", oldUrl + "&WFState=3");
top.layui.element.tabDelete("layadmin-layout-tabs", oldUrl + "&WFState=5");
}
top.layui.index.openTabsPage(url, title)
} else {
window.open(url)
}
}
</script>
</head>
<body layadmin-themealias="coffee">
<div id="toolbar" class="layui-header"></div>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">数据统计(本流程,本部门)</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;">
<div carousel-item="">
<ul class="layui-row layui-col-space10 layui-this">
<li class="layui-col-xs4">
<a href="javascript:void(0);" onclick="OpenWindowRight('/App/OneFlow/RptSearch.htm','我部门发起的','all')" class="layadmin-backlog-body">
<h3>总数</h3>
<p><cite id="Dept_GWF_Counts">66</cite></p>
</a>
</li>
<li class="layui-col-xs4">
<a href="javascript:void(0);"onclick="OpenWindowRight('/App/OneFlow/RptSearch.htm','我部门发起的',2)" class="layadmin-backlog-body">
<h3>运行中</h3>
<p><cite id="Dept_GWF_RuningCounts">12</cite></p>
</a>
</li>
<li class="layui-col-xs4">
<a href="javascript:void(0);" onclick="OpenWindowRight('/App/OneFlow/RptSearch.htm','我部门发起的',3)" class="layadmin-backlog-body">
<h3>已完成</h3>
<p><cite id="Dept_GWF_CompleteCounts">99</cite></p>
</a>
</li>
<li class="layui-col-xs4">
<a href="javascript:void(0);" onclick="OpenWindowRight('/App/OneFlow/RptSearch.htm','我部门发起的',5)" class="layadmin-backlog-body">
<h3>退回</h3>
<p><cite id="Dept_GWF_ReturnCounts">20</cite></p>
</a>
</li>
<li class="layui-col-xs4">
<a href="javascript:void(0);" onclick="layer.msg('部门的逾期待办暂时不能查询')" class="layadmin-backlog-body">
<h3>逾期</h3>
<p><cite id="Dept_GWF_OverCounts">20</cite></p>
</a>
</li>
<li class="layui-col-xs4">
<a href="javascript:void(0);" class="layadmin-backlog-body">
<h3>已删除</h3>
<p><cite id="Dept_GWF_DeleteCounts">20</cite></p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">数据统计(本流程,我参与的)</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-backlog" lay-anim="" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;">
<div carousel-item="">
<ul class="layui-row layui-col-space10 layui-this">
<li class="layui-col-xs4">
<!--onclick="OpenWindowRight('/App/Todolist.htm','待办')"-->
<a href="javascript:void(0);" onclick="OpenWindowRight('/App/OneFlow/RptSearch.htm','我审批的')" class="layadmin-backlog-body">
<h3>总数</h3>
<p><cite id="My_GWF_Counts">66</cite></p>
</a>
</li>
<li class="layui-col-xs4">
<a href="javascript:void(0);" onclick="layer.msg('运行中包含退回,逾期,待办')" class="layadmin-backlog-body">
<h3>运行中</h3>
<p><cite id="My_GWF_RuningCounts">12</cite></p>
</a>
</li>
<li class="layui-col-xs4">
<a href="javascript:void(0);" class="layadmin-backlog-body">
<h3>已完成</h3>
<p><cite id="My_GWF_CompleteCounts">99</cite></p>
</a>
</li>
<li class="layui-col-xs4">
<a href="javascript:void(0);" onclick="OpenWindowRight('/App/OneFlow/Todolist.htm','待办')" class="layadmin-backlog-body">
<h3>退回</h3>
<p><cite id="My_GWF_ReturnCounts">20</cite></p>
</a>
</li>
<li class="layui-col-xs4">
<a href="javascript:void(0);" onclick="OpenWindowRight('/App/OneFlow/Todolist.htm','待办')" class="layadmin-backlog-body">
<h3>逾期</h3>
<p><cite id="My_GWF_OverCounts">20</cite></p>
</a>
</li>
<li class="layui-col-xs4">
<a href="javascript:void(0);" class="layadmin-backlog-body">
<h3>已删除</h3>
<p><cite id="My_GWF_DeleteCounts">20</cite></p>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">流程-按月份统计</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview" lay-anim="fade" lay-indicator="inside" lay-arrow="none" style="width: 100%; height: 280px;">
<div carousel-item id="MyJoinlow">
<div id="FlowByNY_Line" class="layui-this"></div>
<div id="FlowByNY_Bar"></div>
<div id="FlowByNY_Pie"></div>
</div>
<div class="layui-carousel-ind">
<!--<div class="layui-inline" title="筛选列" onclick="ShowPanel('flowByNYPanel')">
<i class="layui-icon layui-icon-cols"></i>
<ul class="layui-table-tool-panel" style="display:none;" id="flowByNYPanel">
<li >
<input type="checkbox" name="id" checked="" title="ID" style="display:none">
<div class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
<span>ID</span>
<i class="layui-icon layui-icon-ok"></i>
</div>
</li>
</ul>
</div>-->
<ul>
<li class="layui-this" id="FlowByNY_Line_i" onclick="ChangeShowDiv('FlowByNY','Line',this)"></li>
<li class="" id="FlowByNY_Bar_i" onclick="ChangeShowDiv('FlowByNY','Bar',this)"></li>
<li class="" id="FlowByNY_Pie_i" onclick="ChangeShowDiv('FlowByNY','Pie',this)"></li>
</ul>
</div>
</div>
</div>
</div>
<div class="layui-card">
<div class="layui-card-header">流程-按人员统计(发起的)</div>
<div class="layui-card-body">
<div class="layui-carousel layadmin-carousel layadmin-dataview" data-anim="fade" lay-filter="LAY-index-dataview">
<div carousel-item id="FlowByEmp">
<div id="FlowByEmp_Bar" class="layui-this"></div>
<div id="FlowByEmp_Line"></div>
<div id="FlowByEmp_Pie"></div>
</div>
<div class="layui-carousel-ind">
<ul>
<li class="layui-this" id="FlowByEmp_Bar_i" onclick="ChangeShowDiv('FlowByEmp','Bar',this)"></li>
<li class="" id="FlowByEmp_Line_i" onclick="ChangeShowDiv('FlowByEmp','Line',this)"></li>
<li class="" id="FlowByEmp_Pie_i" onclick="ChangeShowDiv('FlowByEmp','Pie',this)"></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<style type="text/css">
.layui-table-tool-panel {
position: absolute;
top: 29px;
left: auto !important;
right: -1px !important;
min-width: 150px;
min-height: 40px;
text-align: left;
overflow-y: auto;
background-color: rgb(255, 255, 255) !important;
box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px;
padding: 5px 0px;
border-width: 1px;
border-style: solid;
border-color: rgb(210, 210, 210);
border-image: initial;
border-radius: 0px !important;
}
.layui-table-tool-panel li {
padding: 0 10px;
line-height: 30px;
-webkit-transition: .5s all;
transition: .5s all;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: auto !important;
height: auto !important;
border-radius: 0px !important;
background-color: white !important;
}
</style>
</body>
</html>