问题1：解决对layui中的表格添加合计的问题
第1步：在Table中render中添加字段： totalRow: true, 开启总和模式
第2步：在要写合计的参数中写上合计： totalRowText: '合计',
第3步：.在要计算数值的字段中添加上： totalRow: true
如果需要多个要计算的字段参数，就把totalRow: true 放在每一个参数中
问题2.跳转Table表的问题
第1步：在要链接的某列中写上模板：templet: '#usernameTpl'
第2步：在模板中写上链接， a标签中写上跳转的页面，并传递参数：
<script type="text/html" id="usernameTpl">
<a href="vaccineCountTable.html?labelname={{ d.label }}" class="layui-table-link" style="text-decoration: underline;" target="_blank">{{d.unitName}}</a>
</script>
问题3：解决把传递过来的参数放在调取的接口参数中，但页面上要灵活，且点击其他的条件也是可以调取的参数问题？
解决问题的思路：
1.让通过链接传来的参数与页面中的参数共用一个全局变量 ，且把页面中的获取到的条件也设成全局变量
2.当通过其他行跳转的参数点击跳转到这个页面时，调取查询的函数
3.在函数中，进行判断 如果 刚进入页面时，页面上的条件全局变量为null 或“ ”就用公用的全局参数等于传来的参数，
反之，如果不为null ，那就说明，条件被人重新选择了，这时候让全局变量等于选择的条件参数，然后放进去到接口
的参数中
第1步：获取到页面中的url链接并解析截取关键字与传递的参数：
// 拆分url
function getQueryVariableTrend(variable)
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
第2步:把传递获取到的参数也写成全局变量：
//传递过来的数据
var labelnameByTrend ='';
labelnameByTrend = getQueryVariableTrend("labelname");
第3步:判断页面中的条件是否为空，如果为条件为null就让传递接口的参数等于传递的参数，否则传递接口的参数等于选中的条件：
dataLabel：页面中的条件 labelnameByData：写入传递接口的参数 labelnameByTrend：页面传递过来的参数
if(dataLabel=="") {
labelnameByData = labelnameByTrend
}else {
labelnameByData=dataLabel
}
第4步：放在接口中 如下：
$.ajax(BaseHost + queryStatisticsUrL,{
data:{
label:labelnameByData,
},
问题4：解决已实现跳转 但页面跳转至新的，但不再整个父框架中的问题？
第1步： 在某行上添加链接，可进行跳转，在要添加的链接某列上添加：
templet: '#usernameTpl'
第2步： 添加模板 ，在a链接中添加事件触发：lay-event="isWorkEvent"
在前提写的摸索出来的代码：<a href="vaccineCountTable.html?labelname={{ d.label }}">{{d.unitName }}</a>
但问题是跳到了一个新的界面
<script type="text/html" id="usernameTpl">
<a class="layui-table-link" style="text-decoration: underline; " target="_blank" lay-event="isWorkEvent">{{d.unitName}}</a>
</script>
第3步，在整体表格的加载中添加代码如下： 此代码可在父框架的页面下直接跳转
var datalabel=data.label; //要传递的参数
console.log("--------"+datalabel)
if (obj.event == 'isWorkEvent') {
var okTab = parent.objOkTab;
var url = "pages/vaccineCountTable.html" +
"?labelname=" + datalabel;
var page = '<div lay-id="" data-url="' + url + '"><cite>疫苗接种统计详情</cite></div>';
okTab.tabAdd(page);
}
问题5：行程码中解决的问题？
在上传的文件中判断不小于几k 或者不大于多少的问题：
if(file.size>1024 * 1024 * 4) {
layer.msg('图片大小不能超过4M');
}
else if(file.size<1024 * 15) {
layer.msg('图片大小不能小于15K,请上传100k-200k不超过4M的图片');
}
问题6：刀壽退赔厂商因为角色权限看不见某列的问题？
解决方法：
在表格中的done：function（）{
// 如果角色为2或3 加工商或加具商的情况下 根据角色判断然后进行隐藏或显示
if(empuserType==2|| empuserType==3 ) {
$(".layui-table-box").find("[data-field='filePath']").css("display","none");
} else {
$(".layui-table-box").find("[data-field='filePath']").css("display","block");
}
}
问题7：解决图片显示，如果图片源是null 就不显示，如果有数据，就显示的问题？
1，最初的写法在列表内部写法：
templet: function(d) {
return '<div><a href="'+d.filePath+'" style="cursor:pointer; color:blue" target="_blank">查看</a></div>';
}
2.要展示数据源是null，不显示问题：
在列中写上路径：
templet: '#filePathButton'
<script type="text/html" id="filePathButton">
{{# if(d.filePath==null){ }}
<p></p>
{{# } else if(d.filePath !==null) { }}
<div><a href="{{d.filePath}}" style="cursor:pointer; color:blue;text-decoration: underline;" target="_blank">查看</a></div>;
{{# } }}
</script>
问题8：在Tble中选择某一列选择点击图片，显示当前图片？
第1步： 在某一列中写入模板：如下代码
{
field: 'filePath',
title: '疫苗记录',
sort: true,
width: '120',
align: 'center',
templet: function(d) {
return '<div onclick="show_img(this)"><a src="'+d.filePath+'" style="cursor:pointer; color:blue" target="_blank">查看</a></div>';
}
},
第2步： 写上当前的方法 当点击当前a链接的时候进行触发的方法： // 这一块的链接是线上可点击的链接 直接用方法显示图片上
//显示大图片
window.show_img = function (t) {
var t = $(t).find("a");
//页面层
layer.open({
title: "接种疫苗信息",
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['80%', '95%'], //宽高
shadeClose: true, //开启遮罩关闭
end: function (index, layero) {
return false;
},
content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" width="90%" height="90%"/></div>'
});
}
在table中显示缩略图的方法：
第一步：
cols: [[ //表头
{
field: 'brand_img_url',
title: '图片',
sort: true,
templet: function(d){
return '<div οnclick="show_img(this)" ><img src="'+d.brand_img_url+'" alt="" width="50px" height="50px"></a></div>';
}
}
]]
第二步：
//显示大图片
function show_img(t) {
var t = $(t).find("img");
//页面层
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['80%', '80%'], //宽高
shadeClose: true, //开启遮罩关闭
end: function (index, layero) {
return false;
},
content: '<div style="text-align:center"><img src="' + $(t).attr('src') + '" /></div>'
});
}
在table中显示如果有数据就显示，没有数据就不显示的图片查看的方法？
第1步： 在当前列写上模板
{
field: 'filePath',
title: '下载附件',
sort: true,
width: '120',
align: 'center',
fixed: "right",
templet: '#filePathButton'
},
第2步：在模板中写上如果信息是null 就不填 如果不是null 就把数据放在a链接中
<script type="text/html" id="filePathButton">
{{# if(d.filePath==null){ }}
<p></p>
{{# } else if(d.filePath !==null) { }}
<div><a href="{{d.filePath}}" style="cursor:pointer; color:blue;text-decoration: underline;" target="_blank">查看</a></div>;
{{# } }}
</script>
问题9：在Tble中选择某一列添加千位分隔符？
第一步： 为某列添加模板渲染：
{
field: "totalMoney",
title: "厂商责任赔付金额",
sort: true,
align: "right",
width: '13%',
templet: '#totalMoneyButton',
},
第2步： 在模板中对字段进行函数调用：
<script type="text/html" id="totalMoneyButton">{{number(d.totalMoney)}} </script>
第三步：千位分隔符的函数方法如下：
// 千分位函数调取方法
function number(s, n) {
if (s !== null && s !== undefined && s !== '') {
n = n >= 0 && n <= 20 ? n : 2;
s = parseFloat((s + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
var l = s.split(".")[0].split("").reverse(),
r = s.split(".")[1];
r = r == null ? "" : "." + r;
var t = "";
// console.log(l)
if (l[l.length - 1] === '-') {//负数不需要分隔号,
for (var i = 0; i < l.length; i++) {
if (l[i]==='-') {
t += l[i]+""
continue
}
//不是数组的倒数第二个元素才加"," ["0", "4", "5", "-"]
t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length-1 ? "," : "");
//i + 1 != l.length会变成-,540.00,因为在5时元素位置2+1为3非数组长度
//t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : "");
}
}
else {
for (var i = 0; i < l.length; i++) {
t += l[i] + ((i + 1) % 3 == 0 && i + 1 != l.length ? "," : "");
}
}
return (
t.split("").reverse().join("") + r //r 为小数部分
);
}else{
return ''
}
}
问题10：在一个刀寿趋势echart图 满足两种操作 一种操作，正常进入 网页 正常调用接口 第二种操作 是邮件操作：根据邮件发送的参数进行调取这个页面与方法？
第1步：.首先根据条件进行判断，当页面一显示的时候就调用此方法:
window.onload = function () {
getUrlsendData();
}
//获取发送邮件的连接
function getUrlsendData() {
// 1.默认先获取自己的链接
var url=window.location.href;
// url="http://appservice.casetekcorp.com:8443/tool/KnifeRefundWeb/pages/knifeAchievementRate-Echart.html?buName=BU1&model=&date=2021-06-28&type=week";
//获取如果连接中没传参数，正常运行
2. 判断此url链接中是否带？ 通过ndexOf 来进行寻找 是否能找到，如果找不到结果为-1 的话 就让周日的Tab中的块隐藏着，并且调取接口方法
if(url.indexOf("?")==-1)
{
// 隐藏周月
document.getElementById('WeekTab').style.display = 'none';
getUserData()
}
else{
3.反之 链接中有？ 链接且带参数 就把链接的url放在函数中进行查分 获取取到的参数并放在input中 并且根据参数调取函数
//传参数数据
geturlData(url);
// 隐藏周月
document.getElementById('WeekTab').style.display = 'block';
getUserData();
}
}
function geturlData(url) {
1. 用solit拆分 ？ 分隔 取得？ 之后的参数
let param=url.split("?")[1];
2.用split拆分以& 为分隔的参数与属性
let arr=param.split("&");
let obj={};
3. 对arr进行遍历 以等号对每个参数进行获取
for(let i=0; i<arr.length;i++) {
let arr_param=arr[i].split("=");
obj[arr_param[0]]=arr_param[1];
}
params = obj;
//bu 获取到bu 的参数
var projuctData=params.buName;
//幾種
var modelData=params.model;
//按周按月
typeData=params.type;
//Bus 把获取到的参数放在 当前的条件中
projuctDatalist = document.getElementById("Project").value = projuctData;
//机种
modelDatalist = document.getElementById("model").value = modelData;
//日期
warningDate=$("#warningDate").val(params.date);
}
第二步：對echart 进行遍历 根据机种进行判断当借口成功调取时
layer.closeAll('loading');
mailData = data.data;
var colors = ['#5470C6', '#91CC75','#8e0fe5', '#EE6666', '#009688'];
var title = ['使用寿命','标准寿命','刀具数量','达成率','成本'];
setData(mailData,title,colors)
对整个echart进行获取：
function setData(mailData,title,colors) {
for (let i = 0; i < mailData.buName.length; i++) {
for (let index = 0; index < mailData.buData[i].model.length; index++) {
var model = mailData.buData[i].model[index];
var actualLifeList = mailData.buData[i].trendData[index].actualLife;
var standardLifeList = mailData.buData[i].trendData[index].standardLife;
var countList = mailData.buData[i].trendData[index].toolCount;
var rateList = mailData.buData[i].trendData[index].rate;
var moneyList = mailData.buData[i].trendData[index].toolMoney;
var dateList = mailData.buData[i].trendData[index].date;
var trend = document.getElementById('RateList');
var div = document.createElement('div');
var id = 'div' + i + '' +index;
div.style.width = '1300px';
div.style.height = '500px';
div.style.marginTop='27px';
div.style.marginLeft='-66px';
div.id = id;
var h1 = document.createElement('h1');
h1.id = 'h1' + i + '' +index;
h1.style.fontSize = '15px';
h1.style.color = 'red';
h1.style.fontWeight = 'bolder';
h1.style.marginTop = '27px';
h1.innerHTML = 'BU名 : ' + mailData.buName[i] + '</br>机种 : ' + model;
trend.appendChild(h1);
trend.appendChild(div);
var myChart = echarts.init(div);
var option;
option = {
color: colors,
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
right: '20%'
},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
legend: {
data: title
},
xAxis: [{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: dateList
}],
yAxis: [{
type: 'value',
name: title[0],
position: 'right',
axisLine: {
show: true,
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: title[1],
position: 'right',
offset: 80,
axisLine: {
show: true,
lineStyle: {
color: colors[1]
}
},
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: title[2],
position: 'right',
offset: 160,
axisLine: {
show: true,
lineStyle: {
color: colors[2]
}
},
axisLabel: {
formatter: '{value}'
}
},
{
type: 'value',
name: title[3],
position: 'left',
axisLine: {
show: true,
lineStyle: {
color: colors[3]
}
},
axisLabel: {
formatter: '{value}%'
}
},
{
type: 'value',
name: title[4],
position: 'left',
offset: '60',
axisLine: {
show: true,
lineStyle: {
color: colors[4]
}
},
axisLabel: {
formatter: '{value}￥'
}
}
],
series: [{
name: title[0],
type: 'bar',
data: actualLifeList
},
{
name: title[1],
type: 'bar',
yAxisIndex: 1,
data: standardLifeList
},
{
name: title[2],
type: 'bar',
yAxisIndex: 2,
data: countList
},
{
name: title[3],
type: 'line',
yAxisIndex: 3,
data: rateList
},
{
name: title[4],
type: 'line',
yAxisIndex: 4,
data: moneyList
}
]
};
myChart.setOption(option, true);
}
}
}
问题11：在对在一行中把数据传到编辑的页面，且如果新增的话，也可以进行选择单独的页面？
1.在厂区中在渲染select中传过来的数据放在判断中如下 这是传过来的数据：
var province_Data= '';
var provinceIdt_Data= '';
(function(window) {
function setData(data) {
if (data) {
var form = layui.form;
cityIdData = data.cityId;
cityName_Data = data.cityName;
var dangerLevel_Data = data.dangerLevel;
province_Data = data.province;
provinceIdt_Data = data.provinceId;
// //选择 省市
// /中高风险选项
if(dangerLevel_Data==2) {
$("#highRisk").prop("checked",true)
} else if(dangerLevel_Data==1){
$("#middleRisk").prop("checked",true)
} else if(dangerLevel_Data==0) {
$("#noneRisk").prop("checked",true)
}
}
}
2.对厂区进行判断：
//获取省
function getProvince() {
var token = window.localStorage.getItem('token');
$.ajax(BaseHost + getProvinceURL, {
data:{
token:token,
cityId:ProvincecityId
},
dataType: 'json',
type: 'post',
timeout: 10000,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success: function(data) {
var data = data.data;
form = layui.form;
var select = $("select[name=Province]");
select.empty();
select.append(new Option("--请选择--", ""));
var index='';
for (var i = 0; i < data.length; i++) {
select.append(new Option(data[i].cityName, data[i].cityId));
if(province_Data==data[i].cityName) { // 从此处判断 重中之重 关键代码
$("#Province").find("option[value='"+provinceIdt_Data+"']").attr("selected","selected")
}
getCity(provinceIdt_Data)
}
form.render('select');
},
error: function(xhr, type, errorThrown) {
layer.msg("请求失败，请重试")
}
});
}
对传来的单选框进行默认选中： // /中高风险选项
if(dangerLevel_Data==2) {
$("#highRisk").prop("checked",true)
} else if(dangerLevel_Data==1){
$("#middleRisk").prop("checked",true)
} else if(dangerLevel_Data==0) {
$("#noneRisk").prop("checked",true)
}