JS及SQL常用方法
1、KingFusion3.6
1.1、脚本选中数据网格某一行
$(Datagrid5.id).datagrid('selectRow',2);
1.2、echart图样式1:
脚本:
option = {
"color": [
"rgba(0,229,238,0.5)",
"rgba(155,205,155,0.5)",
"rgba(255,246,143,0.5)",
"rgba(205,149,12,0.5)",
"rgba(0,0,255,0.5)",
"rgba(147,212,119,0.5)",
"rgba(255,99,71,0.5)",
"rgba(255,110,180,0.5)",
"rgba(191,239,255,0.5)",
"rgba(0,229,238,0.5)"
],
"tooltip": {
"formatter": function (params) {
//return params.marker + params.value[3];
return params.value[3];
}
},
"legend": {
"data": [
"工单1",
"工单2",
"工单3"
]
},
"title": {
"text": "计划预览",
"left": "80"
},
"xAxis": {
"min": "2020-03-05",
"max": "2020-03-12",
"scale": true,
"type": "time",
"position": "top"
},
"yAxis": {
"inverse": true,
"data": [
"设备4",
"设备3",
"设备2",
"设备1"
]
},
"series": [
{
"name": "工单1",
"type": "custom",
"renderItem": function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
var rectShape = echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height/2,
width: end[0] - start[0],
height: height
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
});
return rectShape && {
type: 'rect',
shape: rectShape,
style: api.style(),
};
},
"itemStyle": {
"normal": {
"opacity": 1
}
},
"encode": {
"x": [
1,
2
],
"y": 0
},
"data": [
{
"name": "plan4",
"value": [
3,
"2020-03-05 08:30:00",
"2020-03-07 09:00:00",
"2020-03-05 08:30:00到2020-03-07 09:00:00"
]
},
{
"name": "plan5",
"value": [
2,
"2020-03-05 08:30:00",
"2020-03-07 09:00:00",
"2020-03-05 08:30:00到2020-03-07 09:00:00"
]
},
{
"name": "plan6",
"value": [
1,
"2020-03-05 08:30:00",
"2020-03-07 09:00:00",
"2020-03-05 08:30:00到2020-03-07 09:00:00"
]
},
{
"name": "plan7",
"value": [
0,
"2020-03-05 08:30:00",
"2020-03-07 09:00:00",
"2020-03-05 08:30:00到2020-03-07 09:00:00"
]
}
]
},
{
"name": "工单2",
"type": "custom",
"renderItem": function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
var rectShape = echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height/2,
width: end[0] - start[0],
height: height
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
});
return rectShape && {
type: 'rect',
shape: rectShape,
style: api.style(),
};
},
"itemStyle": {
"normal": {
"opacity": 1
}
},
"encode": {
"x": [
1,
2
],
"y": 0
},
"data": [
{
"name": "plan4",
"value": [
3,
"2020-03-07 09:00:00",
"2020-03-09 09:00:00",
"2020-03-07 09:00:00到2020-03-09 09:00:00"
]
},
{
"name": "plan5",
"value": [
2,
"2020-03-07 09:00:00",
"2020-03-09 09:00:00",
"2020-03-07 09:00:00到2020-03-09 09:00:00"
]
},
{
"name": "plan6",
"value": [
1,
"2020-03-07 09:00:00",
"2020-03-09 09:00:00",
"2020-03-07 09:00:00到2020-03-09 09:00:00"
]
},
{
"name": "plan7",
"value": [
0,
"2020-03-07 09:00:00",
"2020-03-09 09:00:00",
"2020-03-07 09:00:00到2020-03-09 09:00:00"
]
}
]
},
{
"name": "工单3",
"type": "custom",
"renderItem": function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
var rectShape = echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height/2,
width: end[0] - start[0],
height: height
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
});
return rectShape && {
type: 'rect',
shape: rectShape,
style: api.style(),
};
},
"itemStyle": {
"normal": {
"opacity": 1
}
},
"encode": {
"x": [
1,
2
],
"y": 0
},
"data": [
{
"name": "plan4",
"value": [
3,
"2020-03-09 09:00:00",
"2020-03-11 09:00:00",
"2020-03-09 09:00:00到2020-03-11 09:00:00"
]
},
{
"name": "plan5",
"value": [
2,
"2020-03-09 09:00:00",
"2020-03-11 09:00:00",
"2020-03-09 09:00:00到2020-03-11 09:00:00"
]
},
{
"name": "plan6",
"value": [
1,
"2020-03-09 09:00:00",
"2020-03-11 09:00:00",
"2020-03-09 09:00:00到2020-03-11 09:00:00"
]
},
{
"name": "plan7",
"value": [
0,
"2020-03-09 09:00:00",
"2020-03-11 09:00:00",
"2020-03-09 09:00:00到2020-03-11 09:00:00"
]
}
]
}
]
};
1.3、echart图样式2:
脚本
option = {
"tooltip": {
"formatter": function (params) {
return params.marker + params.value[3];
}
},
"title": {
"text": "计划预览",
"left": "80"
},
"xAxis": {
"position": "top",
"min": "2020-03-05",
"max": "2020-03-12",
"scale": true,
"type": "time"
},
"yAxis": {
"inverse": true,
"data": [
"工序7",
"工序6",
"工序5",
"工序4",
"工序3",
"工序2",
"工序1"
]
},
"color": [
"#00FF00",
"#0000FF"
],
"series": [
{
"name": "计划",
"type": "custom",
"renderItem": function renderItem(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * 0.6;
var rectShape = echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height/2,
width: end[0] - start[0],
height: height
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
});
return rectShape && {
type: 'rect',
shape: rectShape,
style: api.style(),
};
},
"itemStyle": {
"normal": {
"opacity": 1,
"color": "#006699"
}
},
"encode": {
"x": [
1,
2
],
"y": 0
},
"data": [
{
"name": "plan1",
"value": [
6,
"2020-03-05",
"2020-03-06",
"2020-03-05到2020-03-06"
]
},
{
"name": "plan2",
"value": [
5,
"2020-03-06",
"2020-03-07",
"2020-03-06到2020-03-07"
]
},
{
"name": "plan3",
"value": [
4,
"2020-03-07",
"2020-03-08",
"2020-03-07到2020-03-08"
]
},
{
"name": "plan4",
"value": [
3,
"2020-03-08",
"2020-03-09",
"2020-03-08到2020-03-09"
]
},
{
"name": "plan5",
"value": [
2,
"2020-03-09",
"2020-03-10",
"2020-03-09到2020-03-10"
]
},
{
"name": "plan6",
"value": [
1,
"2020-03-10",
"2020-03-11",
"2020-03-10到2020-03-11"
]
},
{
"name": "plan7",
"value": [
0,
"2020-03-11",
"2020-03-12",
"2020-03-11到2020-03-12"
]
}
]
}
]
};
1.4、 echart图样式3
脚本
option = {
"tooltip": {
"formatter": function (params) {
return params.marker + params.value[3];
}
},
"title": {
"text": "计划查看",
"left": "80"
},
"legend": {
"data": [
"待下发",
"已下发",
"在生产"
]
},
"xAxis": {
"min": "2020-03-05",
"max": "2020-03-12",
"scale": true,
"type": "time"
},
"yAxis": {
"data": [
"工序7",
"工序6",
"工序5",
"工序4",
"工序3",
"工序2",
"工序1"
]
},
"color": [
"#00FF00",
"#0000FF"
],
"series": [
{
"name": "待下发",
"type": "custom",
"renderItem": function renderItem1(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * (1/3);
var rectShape = echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height*1.5,
width: end[0] - start[0],
height: height
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
});
return rectShape && {
type: 'rect',
shape: rectShape,
style: api.style(),
};
},
"itemStyle": {
"normal": {
"opacity": 1,
"color": "#006699"
}
},
"encode": {
"x": [
1,
2
],
"y": 0
},
"data": [
{
"name": "plan1",
"value": [
6,
"2020-03-05",
"2020-03-06",
"2020-03-05到2020-03-06"
]
},
{
"name": "plan2",
"value": [
5,
"2020-03-06",
"2020-03-07",
"2020-03-06到2020-03-07"
]
},
{
"name": "plan3",
"value": [
4,
"2020-03-07",
"2020-03-08",
"2020-03-07到2020-03-08"
]
},
{
"name": "plan4",
"value": [
3,
"2020-03-08",
"2020-03-09",
"2020-03-08到2020-03-09"
]
},
{
"name": "plan5",
"value": [
2,
"2020-03-09",
"2020-03-10",
"2020-03-09到2020-03-10"
]
},
{
"name": "plan6",
"value": [
1,
"2020-03-10",
"2020-03-11",
"2020-03-10到2020-03-11"
]
},
{
"name": "plan7",
"value": [
0,
"2020-03-11",
"2020-03-12",
"2020-03-11到2020-03-12"
]
}
]
},
{
"name": "已下发",
"type": "custom",
"renderItem": function renderItem2(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * (1/3);
var rectShape = echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] - height*0.5,
width: end[0] - start[0],
height: height
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
});
return rectShape && {
type: 'rect',
shape: rectShape,
style: api.style(),
};
},
"itemStyle": {
"normal": {
"opacity": 1,
"color": "#FFFF00"
}
},
"encode": {
"x": [
1,
2
],
"y": 0
},
"data": [
{
"name": "plan1",
"value": [
6,
"2020-03-05",
"2020-03-06",
"2020-03-05到2020-03-06"
]
},
{
"name": "plan2",
"value": [
5,
"2020-03-06",
"2020-03-07",
"2020-03-06到2020-03-07"
]
},
{
"name": "plan3",
"value": [
4,
"2020-03-07",
"2020-03-08",
"2020-03-07到2020-03-08"
]
},
{
"name": "plan4",
"value": [
3,
"2020-03-08",
"2020-03-09",
"2020-03-08到2020-03-09"
]
},
{
"name": "plan5",
"value": [
2,
"2020-03-09",
"2020-03-10",
"2020-03-09到2020-03-10"
]
},
{
"name": "plan6",
"value": [
1,
"2020-03-10",
"2020-03-11",
"2020-03-10到2020-03-11"
]
},
{
"name": "plan7",
"value": [
0,
"2020-03-11",
"2020-03-12",
"2020-03-11到2020-03-12"
]
}
]
},
{
"name": "在生产",
"type": "custom",
"renderItem": function renderItem3(params, api) {
var categoryIndex = api.value(0);
var start = api.coord([api.value(1), categoryIndex]);
var end = api.coord([api.value(2), categoryIndex]);
var height = api.size([0, 1])[1] * (1/3);
var rectShape = echarts.graphic.clipRectByRect({
x: start[0],
y: start[1] + height*0.5,
width: end[0] - start[0],
height: height
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
});
return rectShape && {
type: 'rect',
shape: rectShape,
style: api.style(),
};
},
"itemStyle": {
"normal": {
"opacity": 1,
"color": "#00CC00"
}
},
"encode": {
"x": [
1,
2
],
"y": 0
},
"data": [
{
"name": "plan1",
"value": [
6,
"2020-03-05",
"2020-03-06",
"2020-03-05到2020-03-06"
]
},
{
"name": "plan2",
"value": [
5,
"2020-03-06",
"2020-03-07",
"2020-03-06到2020-03-07"
]
},
{
"name": "plan3",
"value": [
4,
"2020-03-07",
"2020-03-08",
"2020-03-07到2020-03-08"
]
},
{
"name": "plan4",
"value": [
3,
"2020-03-08",
"2020-03-09",
"2020-03-08到2020-03-09"
]
},
{
"name": "plan5",
"value": [
2,
"2020-03-09",
"2020-03-10",
"2020-03-09到2020-03-10"
]
},
{
"name": "plan6",
"value": [
1,
"2020-03-10",
"2020-03-11",
"2020-03-10到2020-03-11"
]
},
{
"name": "plan7",
"value": [
0,
"2020-03-11",
"2020-03-12",
"2020-03-11到2020-03-12"
]
}
]
}
]
};
1.5、数据网格按钮样式
https://blog.csdn.net/weixin_33720452/article/details/91694311
数据网格按钮添加和触发事件
//添加按钮列
$('#' + id).datagrid({
columns: [[
{ field: '操作', title: '操作', width: '12.5%', formatter:formatOper, align: 'center' }
]],
//data:[{工艺名称:'a',设备选择:'b',关键工序:'c',工序节拍:'d',开始时间:'e',完工时间:'f',加工时长:'g'},
//{工艺名称:'a',设备选择:'b',关键工序:'c',工序节拍:'d',开始时间:'e',完工时间:'f',加工时长:'g'},
//{工艺名称:'a',设备选择:'b',关键工序:'c',工序节拍:'d',开始时间:'e',完工时间:'f',加工时长:'g'},
//{工艺名称:'a',设备选择:'b',关键工序:'c',工序节拍:'d',开始时间:'e',完工时间:'f',加工时长:'g'}],
singleSelect: false,
checkOnSelect: true,
selectOnCheck: true
})
var greenButton=`
background-color: #4CAF50;
margin:2px;
border: none;
color: white;
padding: 6px 10px;
font-size: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
width:60px;
height:15px;
border-radius: 20px;
}`
function formatOper(val, row, index)
{
return '<a class="release" style="'+greenButton+'">已下发</button>';
}
//添加按钮事件
$(Datagrid4.id).datagrid({
data: [],
onLoadSuccess:function(data){
//给下发按钮绑定modify事件
var releaseBtns = document.querySelectorAll(".release");
for(var index=0; index<releaseBtns.length; index++)
{
releaseBtns[index].addEventListener('click', releasePlan.bind(this, data.rows, index));
}
}
});
//按钮事件执行
function releasePlan(data,index){
console.log(data);
console.log(index);
}
1.6、样式配置
文本框样式配置
//带按钮
#domId .textbox {
border-color: #c2c2c2;
}
#domId .textbox .l-btn-small{
background-color:#cccccc !important;
}
#domId .l-btn-text{
color:#FFFFFF !important;
}
#domId .textbox-button.textbox-button-right.l-btn.l-btn-small {
background: url(path/搜索.png) no-repeat #4d589a !important ;
max-width: 60px;
}
//不带按钮
#domId .textbox {
border-color: #c2c2c2;
}
#domId .textbox .l-btn-small{
background-color:#cccccc !important;
}
//文字加粗,边框隐藏
/*单行文字情况*/
#domId input{
font-size:18px;
color:#2c2c2c;
font-weight: 600;
background-color: transparent;
font-family: "Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu}
/*多行文本情况*/
#domId textarea{
font-size:18px;
color:red;
font-weight: bold;
font-family: 'Microsoft YaHei'}
#domId .textbox{
border: none;
background-color: transparent;
}
下拉框样式
#domId .textbox{
border-color: #c2c2c2;
}
#domId .textbox{
border-color: #c2c2c2;
}
#domId .textbox .combo-arrow{
background-color: #4d589a;
background-image: url(path/主页.png) no-repeat !important;
opacity:1;
}
#domId .textbox .combo-arrow:hover{
background-color: #737ba9;
opacity:1;
}
按钮样式
#domId .l-btn {
background: #4d589a;
color: #FFFFFF;
border: 1px solid #c2c2c2;
filter: none;
}
#domId .l-btn:hover {
background: #6c75ad;
}
报表样式
/*表格头背景色*/
#domId .datagrid-header tr{
background:rgba(255,255,255,1)
}
/*表格头字体*/
#domId .datagrid-header .datagrid-cell span{
font-size:16px;
font-family: "Microsoft YaHei";
color:black;
font-weight: bold;
}
/*#domId .datagrid-header{*/
/* visibility: hidden;*/
/*}*/
.datagrid-header td {
border-width: 0 0px 0px 0;
border-style: dotted;
margin: 0;
padding: 0;
}
#domId .datagrid-cell-group{
font-size:30px;
color:white
}
#domId .datagrid-body{
border: 0px;
}
#domId .datagrid-body td{
border-right:0px dotted;
border-left:0px dotted;
border-bottom:1px solid rgba(222,222,222,1);
}
/*设置行高*/
#domId .datagrid-header-row{
height: 40px;
}
#domId .datagrid-row {
height: 40px;
border: none;
}
2、MySql
2.1、获取某个用户在不同表中的count值
转自链接:http://www.cppcns.com/shujuku/mysql/168564.html
SELECT sum(wrzm) wrzm,sum(mysh) mysh,sum(sgbh) sgbh FROM (
SELECT count(*) wrzm,0 mysh,0 sgbh FROM user_witness WHERE plan_uid = 123456
UNION ALL
SELECT 0 wrzm,count(*) mysh,0 sgbh FROM user_relation WHERE other_uid = 123456
UNION ALL
SELECT 0 wrzm,0 mysh,count(*) sgbh FROM plan_stage WHERE uid = 123456 AND status = 1
) t;
2.2、获取所有用户在不同表中的count值
转自链接:http://www.cppcns.com/shujuku/mysql/168564.html
SELECT uid,sum(wrzm) wrzm,sum(mysh) mysh,sum(sgbh) sgbh FROM (
SELECT plan_uid uid,count(*) wrzm,0 mysh,0 sgbh FROM user_witness
GROUP BY plan_uid
UNION ALL
SELECT other_uid uid,0 wrzm,count(*) mysh,0 sgbh FROM user_relation
GROUP BY other_uid
UNION ALL
SELECT uid,0 wrzm,0 mysh,count(*) sgbh FROM plan_stage WHERE status = 1
GROUP BY uid
) t GROUP BY uid;