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

11 months ago
<!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>