diff --git a/css/dataAnalysis/dataAnalysis.css b/css/dataAnalysis/dataAnalysis.css new file mode 100644 index 0000000..8fa2c36 --- /dev/null +++ b/css/dataAnalysis/dataAnalysis.css @@ -0,0 +1,122 @@ +html, +body { + width: 100%; + height: 100%; + margin: 0; + padding: 0; + color: #fff; + font-family: 'Alibaba PuHuiTi R'; +} + +#main-box { + width: 100%; + height: 100%; + justify-content: space-evenly; +} + +.layout { + display: flex; + align-items: center; + justify-content: center; +} + +#left-box { + width: 21.25%; + background: url(../../img/alarmMge/select.png) no-repeat 0 0 / 100% 100%; + height: 99%; + box-sizing: border-box; +} + +#right-box { + width: 75.85%; + height: 99%; + background: url(../../img/alarmMge/dataAnalysis.png) no-repeat 0 0 / 100% 100%; + box-sizing: border-box; +} + +#echarts-box { + width: 100%; + height: 100%; +} + +#report-box { + width: 35%; + height: 90%; + overflow-y: auto; +} + +#one-echarts { + width: 100%; + height: 100%; +} + +.ul-box { + width: 100%; + height: 100%; + padding: 10% 0 0 0; + box-sizing: border-box; +} + +.ul-box li { + width: 96%; + margin: 0 2%; + height: 40px; + margin-bottom: 10px; + font-size: 16px; + cursor: pointer; +} + +.check { + background: url(../../img/alarmMge/bright.png) no-repeat 0 0 / 100% 100%; +} + +.nocheck { + background: url(../../img/alarmMge/dark.png) no-repeat 0 0 / 100% 100%; +} + +#report-box table { + width: 96%; + height: 100%; + margin: 0 2%; + table-layout: fixed; + text-align: center; + border-collapse: collapse; + border-spacing: 0; + box-sizing: border-box; +} + +#report-box table tr td { + width: 50%; + height: 50px; + font-size: 16px; + border: 1px solid #34b9aa; +} +#report-box table thead{ + height: 100px; +} +#report-box table tbody{ + height: calc(100% - 100px); + overflow-y: auto; +} + +::-webkit-scrollbar +{ + width: 6px; + height: 6px; +} +::-webkit-scrollbar-track-piece +{ + background-color: #0d2225; + -webkit-border-radius: 6px; +} +::-webkit-scrollbar-thumb:vertical +{ + height: 5px; + background-color: #0d2225; + -webkit-border-radius: 6px; +} +::-webkit-scrollbar-thumb:horizontal +{ + width: 5px; + background-color: #0d2225; + -webkit-border-radius: 6px; diff --git a/img/alarmMge/dataAnalysis.png b/img/alarmMge/dataAnalysis.png new file mode 100644 index 0000000..a6ee835 Binary files /dev/null and b/img/alarmMge/dataAnalysis.png differ diff --git a/js/pages/dataAnalysis/dataAnalysis.js b/js/pages/dataAnalysis/dataAnalysis.js new file mode 100644 index 0000000..d59f71b --- /dev/null +++ b/js/pages/dataAnalysis/dataAnalysis.js @@ -0,0 +1,131 @@ +let myChart = echarts.init(document.getElementById("one-echarts")); +initData(); +function initData(){ + const bidCode = parent.$('#bidPro').val(); + const paramData = 'bidCode=' + bidCode + '&type=' + '1'; + let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData); + loadDataAnalysis(montageParam,1); +} + +/* 切换数据 */ +function changeData(that, type) { + $(".ul-box li").each(function () { + if ($(this).hasClass("check")) { + $(this).removeClass("check").addClass("nocheck"); + } + }); + $(that).removeClass("nocheck").addClass("check"); + if(type !== 10){ + $('#report-box').css('display','none'); + $('#echarts-box').css('width','100%'); + }else{ + $('#report-box').removeAttr('style'); + $('#echarts-box').css('width','58%'); + } + myChart.dispose(); + myChart = echarts.init(document.getElementById("one-echarts")); + const bidCode = parent.$('#bidPro').val(); + const paramData = 'bidCode=' + bidCode + '&type=' + type + ''; + let montageParam = aqEnnable ? encryptCBC(paramData) : ' &' + encryptCBC(paramData); + loadDataAnalysis(montageParam,type); +} + +/* 加载数据分析应用 */ +function loadDataAnalysis(montageParam,type) { + const url = commonUrl + 'screen/largeScreen/dataAnalysis/getDataAnalysisByType?params=' + montageParam; + ajaxRequestGet(url, "GET", true, function () { + }, function (result) { + if (result.code === 200) { + setData(result.data); + } else if (result.code === 500) { + console.error('数据分析应用' + result.msg); + } else if (result.code === 401) { + loginout(1); + } + }, function (xhr, status, error) { + errorFn(xhr, status, error) + }, aqEnnable); + + /* 项目风险赋值 */ + function setData(list) { + let nameList = [],valueList = []; + if(list && list.length > 0){ + $.each(list,function(index,item){ + nameList.push(item.name); + valueList.push({value:item.num,name:item.name}); + }) + } + initEcharts(nameList, valueList); + if(type === 10){ + setReportTable(list); + } + } + // 数据分析报告 + function setReportTable(list){ + let html = ''; + $.each(list,function(index,item){ + let typeName = item.typeName; + let typeNameArr = typeName.split(','); + $.each(typeNameArr,function(index2,item2){ + html += ''; + if(index2 === 0){ + html += '' + item.name + ''; + } + html += '' + item2 + ''; + html += ''; + }) + }) + $('#report-box table tbody').empty().append(html); + } +} + +/* 初始化echarts */ +function initEcharts(nameList, valueList) { + let option = { + grid: { + top: 0, + bottom: 0, + left: 0, + right: 0, + }, + title: { + text: "", + x: "center", + }, + tooltip: { + trigger: "item", + formatter: "{a}
{b} : {c} ({d}%)", + }, + legend: { + show: false, + // orient: 'vertical', + // left: 'left', + // data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"], + data: nameList, + }, + series: [ + { + name: "数据应用分析", + type: "pie", + radius: "65%", + center: ["50%", "50%"], + label: { + show: true, + formatter: "{b} {d}%", + }, + data: valueList, + /* data: [ + { value: 335, name: "直接访问" }, + { value: 310, name: "邮件营销" }, + { value: 234, name: "联盟广告" }, + { value: 135, name: "视频广告" }, + { value: 1548, name: "搜索引擎" }, + ], */ + }, + ], + }; + myChart.setOption(option, true); + window.addEventListener("resize", function () { + myChart.resize(); + }); +} diff --git a/pages/dataAnalysis/dataAnalysis.html b/pages/dataAnalysis/dataAnalysis.html new file mode 100644 index 0000000..93b5ad3 --- /dev/null +++ b/pages/dataAnalysis/dataAnalysis.html @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + 数据分析应用 + + + +
+
+ +
+
+
+
+
+ +
+ +
+ + + + + \ No newline at end of file