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.

834 lines
33 KiB
Plaintext

var vm = new Vue({
el: '#v-db',
data: {
boxes: [],
sortObj: null,
loadingDialog: null,
Veiwit: null,
windowlist: [],
snum: 0,
},
methods: {
bindMenu: function () {
var _this = this;
layui.use('dropdown', function () {
var dropdown = layui.dropdown
var menuFunc = function (data) {
var nameNo = $(this.elem)[0].dataset.nameno;
var WinDocModel = $(this.elem)[0].dataset.windocmodel;
console.log(nameNo);
switch (data.id) {
case 'New':
var no = GetQueryString("PageID");
var url = "../GPM/Window/Html.htm?PageID=" + no + "&MenuNo=" + no;
OpenLayuiDialog(url, '', 900, 80, "auto", true);
break;
case 'Power':
alert("未实现.");
break;
case 'Col1':
var en = new Entity("BP.GPM.Home.WindowTemplate", nameNo);
en.ColSpan = 1;
en.Update();
window.location.reload();
break;
case 'Col2':
var en = new Entity("BP.GPM.Home.WindowTemplate", nameNo);
en.ColSpan = 2;
en.Update();
window.location.reload();
break;
case 'Col3':
var en = new Entity("BP.GPM.Home.WindowTemplate", nameNo);
en.ColSpan = 3;
en.Update();
window.location.reload();
break;
case 'Col4':
var en = new Entity("BP.GPM.Home.WindowTemplate", nameNo);
en.ColSpan = 4;
en.Update();
window.location.reload();
break;
case 'Edit':
var url = "../Comm/EnOnly.htm?EnName=BP.GPM.Home.WindowExt." + WinDocModel + "&No=" + nameNo;
OpenLayuiDialog(url, '', 1100, 89, "auto", false);
break;
case 'Delete':
if (window.confirm("确定要删除吗?") == false)
return;
var en = new Entity("BP.GPM.Home.WindowTemplate", nameNo);
var data = en.Delete();
layer.msg(data);
//如果有错误.
if (data.indexOf("err@") == 0)
return;
setTimeout(function () {
window.location.reload();
}, 900)
break;
}
}
var menuNodeItems = [
{ title: '<i class=icon-pencil></i> 新建', id: "New", Icon: "icon-plus" },
{ title: '<i class=icon-note></i> 编辑', id: "Edit", Icon: "icon-plus" },
{ title: '<i class=icon-user-following></i> 权限', id: "Power", Icon: "icon-plus" },
{ title: '<i class=icon-close></i> 删除', id: "Delete", Icon: "icon-close" },
{ title: '<i class=icon-user-following></i> 跨度1列', id: "Col1", Icon: "icon-frame" },
{ title: '<i class=icon-user-following></i> 跨度2列', id: "Col2", Icon: "icon-frame" },
{ title: '<i class=icon-user-following></i> 跨度3列', id: "Col3", Icon: "icon-frame" },
{ title: '<i class=icon-user-following></i> 跨度4列', id: "Col4", Icon: "icon-frame" }
]
var menuOptions = [{
elem: '.menu-btn',
trigger: 'click',
align: 'right',
data: menuNodeItems,
click: menuFunc
}]
dropdown.render(menuOptions[0]);
})
},
itemStyle: function (item) {
colspan = item.ColSpan || 1
return {
width: 'calc(' + colspan / 4 * 100 + '%' + ' - 14px)',
height: '360px',
margin: '6px 6px 6px 6px'
}
},
itemadd: function () {
colspan = 1
return {
width: 'calc(' + colspan / 4 * 100 + '%' + ' - 14px)',
height: '300px',
margin: '6px 6px 6px 6px'
}
},
addfile: function () {
var no = GetQueryString("PageID");
var url = "../GPM/Window/Html.htm?PageID=" + no + "&MenuNo=" + no;
OpenLayuiDialog(url, '', 900, 80, "auto", true);
},
expand: function (item) {
try {
var URI = item.ModrLink
if (!item.MoreLinkModel) {
item.MoreLinkModel = 0
}
if (parseInt(item.MoreLinkModel) === 0) {
window.top.vm.openTab(item.Name, URI)
return
}
if (parseInt(item.MoreLinkModel) === 1) {
WinOpen(URI)
return
}
if (parseInt(item.MoreLinkModel) === 2) {
if (!item.proW) item.proW = -1
var w = item.proW < 0 ? 400 : item.proW
if (!item.proH) item.proH = -1
var h = item.proH < 0 ? 300 : item.proH
layer.open({
type: 2,
title: '颜色与布局',
content: [URI, 'no'],
area: [w + 'px', h + 'px'],
offset: 'center',
shadeClose: true
})
return
}
layer.msg("参数错误,未指定打开方式")
} catch (e) {
// print error msg
layer.msg(e)
}
},
// todo 需要排序接口
updateSort: function (str) {
// 拿到排序后的id数据
var handler = new HttpHandler("BP.WF.HttpHandler.WF_Portal");
handler.AddPara("MyPK", str);
handler.AddUrlData();
var data = handler.DoMethodReturnString("Home_DoMove");
layer.msg(data)
},
bindArea: function () {
var _this = this
this.$nextTick(function () {
var wrapper = this.$refs['wrapper']
this.sortObj = new Sortable(wrapper, {
animation: 150,
ghostClass: 'blue-background-class',
dataIdAttr: 'data-no',
onStart: function ( /**Event*/ evt) {
_this.loadingDialog = layer.msg('正在移动...', {
timeout: 900 * 1000
})
},
onEnd: function (evt) {
layer.close(_this.loadingDialog)
var arr = this.toArray();
_this.updateSort(arr.join(','))
}
});
})
},
//表格
initTable: function () {
var neededList = this.boxes.filter(function (item) {
return item.WinDocModel === "Html" || item.WinDocModel === "System" || item.WinDocModel === "SQLList" || item.WinDocModel === "Table" || item.WinDocModel === "HtmlVar"
})
var _this = this
this.$nextTick(function () {
for (var i = 0; i < neededList.length; i++) {
(function (i) {
var item = neededList[i]
var el = document.querySelector('div[data-cid="' + item.No + '"]')
switch (item.WinDocModel) {
case "Html": //html的.
case "System": //内置的.
el.innerHTML = item.Docs;
break;
case "Table": //列表的时候的显示.
var data = JSON.parse(item.Docs);
// console.log(data);
var table = '<table class="layui-table">';
var startnum = data[0];
table += '<thead><tr>';
$.each(startnum, function (i) {
table += '<th>' + i + '</th>';
});
table += '</tr></thead>';
table += '<tbody>';
for (var j = 0; j < data.length; j++) {
var col = data[j]
table += "<tr>"
$.each(startnum, function (i) {
table += "<td>" + col[i] + "</td>";
});
table += "</tr>"
}
table += "</tbody></table>"
el.innerHTML = table
break
case "HtmlVar": //列表的时候的显示.
var data = JSON.parse(item.Docs);
// console.log(item.Docs);
var table = '<div class="layui-row HtmlVar">';
for (var j = 0; j < data.length; j++) {
var col = data[j]
table += "<div class='layui-col-xs6 layui-col-sm6 layui-col-md4'><span>" + col.Name + "</span>";
if (col.UrlExt == "") {
table += "<strong><font color=" + col.FontColor + ">" + col.Exp0 + "</font></strong></div>";
}
else {
table += "<strong onclick=\"javascript:" + col.UrlExt + "\" ><font color=" + col.FontColor + ">" + col.Exp0 + "</font></strong></div>";
}
}
table += "</div>";
if (item.MoreUrl != '')
table = "<a href='" + item.MoreUrl + "' target=_blank >" + table + "</a>";
el.innerHTML = table;
break
}
})(i)
}
})
},
//图形
initCharts: function () {
var neededList = this.boxes.filter(function (item) {
return item.WinDocModel !== "Html" && item.WinDocModel !== "System" && item.WinDocModel !== "SQLList" && item.WinDocModel !== "Table" && item.WinDocModel !== "HtmlVar" && item.WinDocModel !== "Tab" && item.WinDocModel !== "ChartChina"
})
var _this = this
this.$nextTick(function () {
for (var i = 0; i < neededList.length; i++) {
(function (i) {
var item = neededList[i].children;
if (item != null && item != undefined) {
for (var i = 0; i < item.length; i++) {
var iteminfo = item[i]
iteminfo.Docs = iteminfo.isData
//console.log(tabinfo)
var els = document.querySelector('div[data-mypk="' + iteminfo.isNo + '"]');
//console.log(tabinfo.WindowsShowType)
if (i == 0) {
var width = $('#' + iteminfo.isNo).width();
var height = $('#' + iteminfo.isNo).height();
}
$('#' + iteminfo.isNo).css("width", width).css("height", height);
if (iteminfo.isName == '折线图') {
_this.initLineChart(els, iteminfo);
}
if (iteminfo.isName == '扇形图') {
_this.initPieChart(els, iteminfo);
}
if (iteminfo.isName == '环形图') {
_this.initAnnular(els, iteminfo);
}
if (iteminfo.isName == '柱状图') {
_this.initHistogram(els, iteminfo);
}
}
}
})(i)
}
})
},
initTab: function () {
var neededList = this.boxes.filter(function (item) {
return item.WinDocModel === "Tab"
})
var _this = this
this.$nextTick(function () {
for (var i = 0; i < neededList.length; i++) {
(function (i) {
var tab = neededList[i].children;
for (var i = 0; i < tab.length; i++) {
var tabinfo = tab[i]
tabinfo.Docs = tabinfo.Exp0
//console.log(tabinfo)
var els = document.querySelector('div[data-mypk="' + tabinfo.MyPK + '"]');
//console.log(tabinfo.WindowsShowType)
if (i == 0) {
var width = $('#' + tabinfo.MyPK).width();
var height = $('#' + tabinfo.MyPK).height();
}
$('#' + tabinfo.MyPK).css("width", width).css("height", height);
if (tabinfo.WindowsShowType == 0) {
_this.initPieChart(els, tabinfo);
}
if (tabinfo.WindowsShowType == 1) {
_this.initLineChart(els, tabinfo);
}
if (tabinfo.WindowsShowType == 2) {
_this.initHistogram(els, tabinfo);
}
//表格
if (tabinfo.WindowsShowType == 4) {
var dataExp = JSON.parse(tabinfo.Docs);
// console.log(dataExp)
var tabhtml = '<table class="layui-table">';
var startnum = dataExp[0];
tabhtml += '<thead><tr>';
$.each(startnum, function (i) {
tabhtml += '<th>' + i + '</th>';
});
tabhtml += '</tr></thead>';
tabhtml += '<tbody>';
for (var j = 0; j < dataExp.length; j++) {
var col = dataExp[j]
tabhtml += "<tr>"
$.each(startnum, function (i) {
tabhtml += "<td>" + col[i] + "</td>"
});
tabhtml += "</tr>"
}
tabhtml += "</tbody></table>"
els.innerHTML = tabhtml
}
}
})(i)
}
})
},
//地图
initMap: function () {
var neededList = this.boxes.filter(function (item) {
return item.WinDocModel === "ChartChina"
})
var _this = this
this.$nextTick(function () {
for (var i = 0; i < neededList.length; i++) {
var item = neededList[i];
(function (i) {
$.get('china.json', function (chinaJson) {
//注册地图
echarts.registerMap('china', chinaJson);
var els = document.querySelector('div[data-cid="' + item.No + '"]');
var myChart = echarts.init(els);
var series = [
{
name: '数据',
type: 'map',
map: 'china',
projection: {
project: function (point) {
return projection(point);
},
unproject: function (point) {
return projection.invert(point);
}
},
emphasis: {
label: {
show: true
}
},
data: [
{ name: '吉林省', value: 4822023, tt: '12' },
{ name: '江苏省', value: 731449, tt: '10' },
]
}
];
var option = {
backgroundColor: "rgba(0,0,0,.5)", //背景颜色
title: {
text: '数据模拟',
subtext: '数据纯属虚构',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params, ticket, callback) {
if (params.data.name)
return params.data.name + "<br/>已完成:" + params.data.value + "<br/>未完成:" + params.data.tt;
else return params
}
},
visualMap: {
left: 'right',
min: '',
max: 38000000,
inRange: {
color: [
'#313695',
'#4575b4',
'#74add1',
'#abd9e9',
'#e0f3f8',
'#ffffbf',
'#fee090',
'#fdae61',
'#f46d43',
'#d73027',
'#a50026'
]
},
text: ['High', 'Low'],
calculable: true
},
series: series
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.resize();
})
})(i)
}
})
},
// 初始化折线图
initLineChart: function (el, item) {
var lineChart = echarts.init(el)
var data = JSON.parse(item.Docs);
var startnum = data[0];
var xAxis = [];
if (startnum) {
var inf = [];
var num = 0;
$.each(startnum, function (i) {
if (isNaN(startnum[i])) {
xAxis = data.map(function (it) {
return it[i]
})
} else {
inf[num] = {
name: i,
type: 'line',
smooth: true,
data: data.map(function (it) {
return it[i]
})
}
num++
}
});
var option = {
legend: {},
xAxis: {
type: 'category',
data: xAxis
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis'
},
series: inf
};
lineChart.setOption(option)
lineChart.resize();
}
},
// 初始化饼图
initPieChart: function (el, item) {
var pieChart = echarts.init(el);
//console.log(pieChart)
//var name = item.Name
var data = JSON.parse(item.Docs)
var jsonKey = [];
for (var jsonVal in data[0]) {
jsonKey.push(jsonVal);
}
var oldkey = {
[jsonKey[0]]: "name",
[jsonKey[1]]: "value",
};
for (var i = 0; i < data.length; i++) {
var obj = data[i];
for (var key in obj) {
var newKey = oldkey[key];
if (newKey) {
obj[newKey] = obj[key];
delete obj[key];
}
}
}
//console.log(data);
var option = {
tooltip: {
trigger: 'item'
},
series: [{
//name: name,
type: 'pie',
radius: '50%',
data: data,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
pieChart.setOption(option);
pieChart.resize();
},
// 初始化柱状图
initHistogram: function (el, item) {
var hChart = echarts.init(el)
var data = JSON.parse(item.Docs)
var startnum = data[0];
var xAxis = [];
if (startnum) {
var inf = [];
var num = 0;
$.each(startnum, function (i) {
if (isNaN(startnum[i])) {
xAxis = data.map(function (it) {
return it[i]
})
} else {
inf[num] = {
name: i,
type: 'bar',
data: data.map(function (it) {
return it[i]
})
}
num++
}
});
option = {
tooltip: {},
legend: {},
xAxis: [
{
type: 'category',
data: xAxis
}
],
yAxis: [
{
type: 'value',
}
],
dataZoom: [
{
show: true,
start: 94,
end: 100
},
],
series: inf
};
hChart.setOption(option);
hChart.resize();
}
},
//百分比仪表盘
initGauge: function (el, item) {
var GChart = echarts.init(el);
var option;
//console.log(item);
var num = item.SQLOfFZ / item.SQLOfFM * 100;
option = {
series: [{
type: 'gauge',
anchor: {
show: true,
showAbove: true,
size: 18,
itemStyle: {
color: '#FAC858'
}
},
progress: {
show: true,
overlap: true,
roundCap: true
},
axisLine: {
roundCap: true
},
data: [{
value: num.toFixed(2),
name: item.LabOfRate,
title: {
offsetCenter: ['0%', '75%']
},
detail: {
offsetCenter: ['0%', '95%']
}
},
],
title: {
fontSize: 12
},
detail: {
width: 40,
height: 14,
fontSize: 12,
color: '#fff',
backgroundColor: 'auto',
borderRadius: 3,
formatter: '{value}%'
}
}]
};
GChart.setOption(option);
GChart.resize();
},
//环形
initAnnular: function (el, item) {
var AnnularChart = echarts.init(el);
var name = item.Name
var data = JSON.parse(item.Docs)
var jsonKey = [];
for (var jsonVal in data[0]) {
jsonKey.push(jsonVal);
}
var oldkey = {
[jsonKey[0]]: "name",
[jsonKey[1]]: "value",
};
for (var i = 0; i < data.length; i++) {
var obj = data[i];
for (var key in obj) {
var newKey = oldkey[key];
if (newKey) {
obj[newKey] = obj[key];
delete obj[key];
}
}
}
var option = {
tooltip: {
trigger: 'item'
},
legend: {},
series: [{
name: item.Name,
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '14',
fontWeight: '500'
}
},
labelLine: {
show: false
},
data: data
}]
};
AnnularChart.setOption(option);
AnnularChart.resize();
}
},
mounted: function () {
// fix firefox bug
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
}
var handler = new HttpHandler("BP.WF.HttpHandler.WF_Portal");
var pageID = GetQueryString("PageID");
pageID = "e1493a51-63f9-4c2e-a06b-be49c68e6c54";
handler.AddPara("PageID", pageID);
//handler.AddUrlData();
var windows = handler.DoMethodReturnJSON("Home_Init");
console.log(windows);
if (!windows) {
var no = GetQueryString("PageID");
var url = "../GPM/Window/Html.htm?PageID=" + no + "&MenuNo=" + no;
OpenLayuiDialog(url, '', 900, 80, "auto", true);
} else {
for (var j = 0; j < windows.length; j++) {
var win = windows[j];
win.children = [];
if (win.WinDocModel == 'Tab') {
win.children = JSON.parse(win.Docs);
}
if (win.WinDocModel == 'ChartLine') {
if (win.IsLine == 1) { win.children.push({ isShow: win.IsLine, isNo: win.No + 'line01', isName: '折线图', isData: win.Docs }) }
if (win.IsPie == 1) { win.children.push({ isShow: win.IsPie, isNo: win.No + 'pie01', isName: '扇形图', isData: win.Docs }) }
if (win.IsRate == 1) { win.children.push({ isShow: win.IsRate, isNo: win.No + 'rate01', isName: '扇形图', isData: win.Docs }) }
if (win.IsRing == 1) { win.children.push({ isShow: win.IsRing, isNo: win.No + 'ring01', isName: '环形图', isData: win.Docs }) }
if (win.IsZZT == 1) { win.children.push({ isShow: win.IsZZT, isNo: win.No + 'zzt01', isName: '柱状图', isData: win.Docs }) }
// win.children = [{ isShow: win.IsLine, isNo: win.No + 'line01', isName: '折线图', isData: win.Docs }, { isShow: win.IsPie, isNo: win.No + 'pie01', isName: '扇形图', isData: win.Docs }, { isShow: win.IsRing, isNo: win.No + 'ring01', isName: '环形图', isData: win.Docs }, { isShow: win.IsZZT, isNo: win.No + 'zzt01',isName: '柱状图', isData: win.Docs }];
}
if (win.WinDocModel == 'ChartZZT') {
win.children.push({ isShow: win.IsZZT, isNo: win.No, isName: '柱状图', isData: win.Docs });
}
if (win.WinDocModel == 'ChartPie') {
win.children.push({ isShow: win.IsPie, isNo: win.No, isName: '扇形图', isData: win.Docs });
}
if (win.WinDocModel == 'ChartRate') {
win.Docs = '[{"名称":"' + win.LabOfFZ + '","统计数":"' + win.SQLOfFZ + '"},{"名称":"' + win.LabOfFM + '","统计数":"' + win.SQLOfFM + '"}]';
win.children.push({ isShow: win.IsRing, isNo: win.No, isName: '环形图', isData: win.Docs });
}
}
}
//console.log(windows);
var viewid = GetQueryString("viewid");
if (viewid) {
this.Veiwit = viewid;
}
this.bindMenu();
//console.log(windows);
// handler.AddPara("MyPK", str);
// var windows = new Entities("BP.GPM.Home.WindowTemplates");
// windows.RetrieveAll();
// handle bad json response
//delete windows['Paras']
//delete windows['ensName']
//delete windows['length']
try {
this.boxes = windows;
// this.snum = windows[0].DefaultChart + windows[0].No
this.bindArea()
this.initCharts()
this.initTable()
this.initTab()
this.initMap()
document.body.ondrop = function (event) {
event.preventDefault();
event.stopPropagation();
}
} catch (e) {
console.error(e)
}
}
})