From cc85911b19cc25838f19ffb2fbb120fbc72b2fb4 Mon Sep 17 00:00:00 2001
From: LSH
Date: 星期五, 29 三月 2024 13:00:32 +0800
Subject: [PATCH] #周计划
---
src/main/webapp/views/BI/index.html | 479 ++++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 386 insertions(+), 93 deletions(-)
diff --git a/src/main/webapp/views/BI/index.html b/src/main/webapp/views/BI/index.html
index f712815..8719d65 100644
--- a/src/main/webapp/views/BI/index.html
+++ b/src/main/webapp/views/BI/index.html
@@ -23,8 +23,9 @@
});
</script>
<script type="text/javascript" src="../../static/js/echarts/echarts.min.js"></script>
-<script language="JavaScript" src="../../static/js/BI/js.js"></script>
+<!--<script language="JavaScript" src="../../static/js/BI/js.js"></script>-->
<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script>
+<script src="../../static/js/handlebars/handlebars-v4.5.3.js"></script>
<body>
<div class="canvas" style="opacity: .2">
<iframe frameborder="0" src="./bg-index.html" style="width: 100%; height: 100%"></iframe>
@@ -61,94 +62,42 @@
<div class="swiper-head-item">瀹℃牳鍛橈細姊佹槍姘�</div>
<div class="swiper-head-item">寰呭鏍搁」鐩�</div>
</div>
- <div class="swiper">
- <div class="swiper-wrapper">
- <div class="swiper-slide">
- <div class="swiper-item">
- <div class="swiper-item-item">寮犲弻榫�</div>
- <div class="swiper-item-item">1</div>
- <div class="swiper-item-item">
- <span class="swiper-item-lable">20</span>
+ <div style="display: flex;height: 81%">
+ <!--涓氬姟鍛樻粴鍔�-->
+ <div style="flex: 1;">
+ <div id="swiper1" class="swiper" style="height: 100%;">
+ <div id="box1" class="swiper-wrapper">
+ <div class="swiper-slide">
+ <div class="swiper-item" style="">
+ <div class="swiper-item-item">${k.userId$}</div>
+ </div>
</div>
</div>
</div>
- <div class="swiper-slide">
- <div class="swiper-item">
- <div class="swiper-item-item">寮犲弻榫�</div>
- <div class="swiper-item-item">1</div>
- <div class="swiper-item-item">
- <span class="swiper-item-lable">20</span>
- </div>
- </div>
- </div>
- <div class="swiper-slide">
- <div class="swiper-item">
- <div class="swiper-item-item">寮犲弻榫�</div>
- <div class="swiper-item-item">1</div>
- <div class="swiper-item-item">
- <span class="swiper-item-lable">20</span>
- </div>
- </div>
- </div>
- <div class="swiper-slide">
- <div class="swiper-item">
- <div class="swiper-item-item">寮犲弻榫�</div>
- <div class="swiper-item-item">1</div>
- <div class="swiper-item-item">
- <span class="swiper-item-lable">20</span>
- </div>
- </div>
- </div>
- <div class="swiper-slide">
- <div class="swiper-item">
- <div class="swiper-item-item">寮犲弻榫�</div>
- <div class="swiper-item-item">1</div>
- <div class="swiper-item-item">
- <span class="swiper-item-lable">20</span>
- </div>
- </div>
- </div>
- <div class="swiper-slide">
- <div class="swiper-item">
- <div class="swiper-item-item">寮犲弻榫�</div>
- <div class="swiper-item-item">1</div>
- <div class="swiper-item-item">
- <span class="swiper-item-lable">20</span>
- </div>
- </div>
- </div>
- <div class="swiper-slide">
- <div class="swiper-item">
- <div class="swiper-item-item">寮犲弻榫�</div>
- <div class="swiper-item-item">1</div>
- <div class="swiper-item-item">
- <span class="swiper-item-lable">20</span>
- </div>
- </div>
- </div>
-
</div>
+ <!--涓棿鍖哄煙-->
+ <div style="flex: 1;" ></div>
+ <!--<div></div>-->
+ <!--寰呭鏍搁」鐩�绘暟-->
+ <div style="flex: 1;" id="innder">3</div>
</div>
+
+
+
+
+
<div class="boxfoot"></div>
</div>
<div class="boxall" style="width: 49.7%;height: 3.2rem">
<div class="alltitle">寰呰鍒掗」鐩�</div>
<div class="swiper-head">
- <div class="swiper-head-item">瑙勫垝鍛�</div>
+ <div class="swiper-head-item" id="planId">瑙勫垝鍛�</div>
<div class="swiper-head-item">瑙勫垝涓笟鍔″憳</div>
<div class="swiper-head-item">寰呰鍒掓�绘暟</div>
</div>
- <div class="swiper">
- <div class="swiper-wrapper">
- <div class="swiper-slide">
- <div class="swiper-item">
- <div class="swiper-item-item">鍙插枩瓒�</div>
- <div class="swiper-item-item">寮犲崲,寮犲弻榫欙紝鍒橀潚</div>
- <div class="swiper-item-item">
- <span class="swiper-item-lable">5</span>
- </div>
- </div>
- </div>
+ <div id="swiper2" class="swiper">
+ <div id="box2" class="swiper-wrapper">
+
</div>
</div>
<div class="boxfoot"></div>
@@ -166,38 +115,382 @@
</div>
</div>
<div class="back"></div>
+
+
<script type="text/javascript" src="../../static/js/BI/china.js"></script>
<!--<script type="text/javascript" src="../../static/js/BI/area_echarts.js"></script>-->
<script src="../../static/swiper/swiper-bundle.min.js"></script>
<script>
- var mySwiper = new Swiper('.swiper', {
- direction: 'vertical',
- grabCursor: true,
- loop: true,
- slidesPerView: 5,
- slidesPerGroup: 1,
- loopedSlides: 5,
- speed: 1000,
- autoplay: {
- delay: 3000,//1绉掑垏鎹竴娆�
- },
- })
setTimeout(()=>{
- getPending()
- },1000)
- let getPending = function() {
+ getPendingApproval()
+ getPendingUser()
+ getAllPlan()
+ getSumyear()
+ },0)
+ /*
+ * 寰呭鏍搁」鐩�
+ * */
+ let getPendingApproval = function() {
$.ajax({
url: baseUrl + "/pending/approval/auth",
headers: {'token': localStorage.getItem('token')},
method: 'GET',
success(res){
console.log(res)
- for(let k in res.data) {
-
+ let newList = '', count = 0;
+ for (let k of res.data) {
+ let list = `<div class="swiper-slide">
+ <div class="swiper-item" >
+ <div class="swiper-item-item">${k.userId$}</div>
+ </div>
+ </div>`
+ newList = newList + list
+ count = count + k.count
}
+ $("#box1").html(newList)
+ $("#innder").html(count)
+ runder()
}
})
}
+ /*
+ * 寰呰鍒掗」鐩�
+ * */
+ let getPendingUser = function() {
+ $.ajax({
+ url: baseUrl + "/pending/user/approval/auth",
+ headers: {'token': localStorage.getItem('token')},
+ method: 'GET',
+ success(res){
+ //console.log(res)
+ let newList = ''
+ let len = res.data.length
+ for (let k of res.data) {
+ let list = `<div class="swiper-slide">
+ <div class="swiper-item" style="border-bottom: 1px solid #dedede">
+ <div class="swiper-item-item">${k.user}</div>
+ <div class="swiper-item-item">${k.value}</div>
+ <div class="swiper-item-item">
+ <span class="swiper-item-lable">${k.anfme}</span>
+ </div>
+ </div>
+ </div>`
+ newList = newList + list
+ }
+ $("#box2").html(newList)
+ $("#planId").html(`瑙勫垝鍛橈紙${len}锛変汉`)
+ runder2()
+ }
+ })
+ }
+ function runder() {
+ var mySwiper = new Swiper('#swiper1', {
+ direction: 'vertical',
+ grabCursor: true,
+ loop: true,
+ slidesPerView: 5,
+ slidesPerGroup: 1,
+ loopedSlides: 5,
+ speed: 1000,
+ autoplay: {
+ delay: 3000,//1绉掑垏鎹竴娆�
+ },
+ })
+ }
+ function runder2() {
+ var mySwiper = new Swiper('#swiper2', {
+ direction: 'vertical',
+ grabCursor: true,
+ loop: true,
+ slidesPerView: 5,
+ slidesPerGroup: 1,
+ loopedSlides: 5,
+ speed: 1000,
+ autoplay: {
+ delay: 3000,//1绉掑垏鎹竴娆�
+ },
+ })
+ }
+ let getAllPlan = function() {
+ $.ajax({
+ url: baseUrl + "/pending/sum/auth",
+ headers: {'token': localStorage.getItem('token')},
+ method: 'GET',
+ success(res){
+ let monthData = []
+ let flag = false
+ for (let i = 1; i <= 12; i++) {
+ let data = null
+ for (let k of res.data) {
+ if (k.month == i) {
+ data = k.count
+ flag = true
+ break
+ } else {
+ flag = false
+ }
+ }
+ if (flag) {
+ monthData.push(data)
+ } else {
+ monthData.push(0)
+ }
+ }
+ option.series[0].data = monthData
+ myChart.setOption(option);
+ myChart.resize();
+ }
+ })
+ }
+ var myChart = echarts.init(document.getElementById('echart4'));
+
+ option = {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ lineStyle: {
+ color: '#dddc6b'
+ }
+ }
+ },
+ legend: {
+ top: '0%',
+ data: ['瑙勫垝閲�'],
+ textStyle: {
+ color: 'rgba(255,255,255,.5)',
+ fontSize: '12',
+ }
+ },
+ grid: {
+ left: '10',
+ top: '30',
+ right: '10',
+ bottom: '10',
+ containLabel: true
+ },
+
+ xAxis: [{
+ type: 'category',
+ boundaryGap: false,
+ axisLabel: {
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: 12,
+ },
+ },
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,.2)'
+ }
+
+ },
+
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
+
+ }, {
+
+ axisPointer: {show: false},
+ axisLine: {show: false},
+ position: 'bottom',
+ offset: 20,
+
+
+ }],
+
+ yAxis: [{
+ type: 'value',
+ axisTick: {show: false},
+ axisLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,.1)'
+ }
+ },
+ axisLabel: {
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: 12,
+ },
+ },
+
+ splitLine: {
+ lineStyle: {
+ color: 'rgba(255,255,255,.1)'
+ }
+ }
+ }],
+ series: [
+ {
+ name: '瑙勫垝閲�',
+ type: 'line',
+ smooth: true,
+ symbol: 'circle',
+ symbolSize: 5,
+ //showSymbol: false,
+ label: {
+ show: true,
+ position: 'top'
+ },
+ lineStyle: {
+
+ normal: {
+ color: '#00d887',
+ width: 2
+ }
+ },
+ areaStyle: {
+ normal: {
+ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+ offset: 0,
+ color: 'rgba(0, 216, 135, 0.4)'
+ }, {
+ offset: 0.8,
+ color: 'rgba(0, 216, 135, 0.1)'
+ }], false),
+ shadowColor: 'rgba(0, 0, 0, 0.1)',
+ }
+ },
+ itemStyle: {
+ normal: {
+ color: '#00d887',
+ borderColor: 'rgba(221, 220, 107, .1)',
+ borderWidth: 12
+ }
+ },
+ data: [1,2,3,4,5,6,7,8,9,10,11,12]
+
+ },
+ ]
+
+ };
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+
+ window.addEventListener("resize", function () {
+ myChart.resize();
+ });
+
+ let getSumyear = function() {
+ $.ajax({
+ url: baseUrl + "/user/sumyear/auth",
+ headers: {'token': localStorage.getItem('token')},
+ method: 'GET',
+ success(res){
+ console.log(res)
+ let user = []
+ let count = []
+ for (let k of res.data) {
+ user.push(k.user.username)
+ for (let n of k.obj) {
+ if(n.year == 2023) {
+ count.push(n.count)
+ }
+ }
+ }
+ option2.xAxis[0].data = user
+ option2.series[0].data = count
+ myChart2.setOption(option2);
+ myChart2.resize();
+ }
+ })
+ }
+
+ var myChart2 = echarts.init(document.getElementById('echart1'));
+ option2 = {
+ // backgroundColor: '#00265f',
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'shadow'
+ }
+ },
+ grid: {
+ left: '0%',
+ top: '10px',
+ right: '0%',
+ bottom: '4%',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'category',
+ data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'],
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ width: 1,
+ type: "solid"
+ },
+ },
+
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ interval: 0,
+ // rotate:50,
+ show: true,
+ splitNumber: 15,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ }],
+ yAxis: [{
+ type: 'value',
+ axisLabel: {
+ //formatter: '{value} %'
+ show: true,
+ textStyle: {
+ color: "rgba(255,255,255,.6)",
+ fontSize: '12',
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "rgba(255,255,255,.1 )",
+ width: 1,
+ type: "solid"
+ },
+ },
+ splitLine: {
+ lineStyle: {
+ color: "rgba(255,255,255,.1)",
+ }
+ }
+ }],
+ series: [
+ {
+ type: 'bar',
+ data: [200, 300, 300, 900, 1500, 1200, 600],
+ barWidth: '35%', //鏌卞瓙瀹藉害
+ // barGap: 1, //鏌卞瓙涔嬮棿闂磋窛
+ itemStyle: {
+ normal: {
+ color: '#2f89cf',
+ opacity: 1,
+ barBorderRadius: 5,
+
+ }
+ },
+ label: {
+ show: true,
+ position: 'inside'
+ },
+ }
+
+ ]
+ };
+
+ // 浣跨敤鍒氭寚瀹氱殑閰嶇疆椤瑰拰鏁版嵁鏄剧ず鍥捐〃銆�
+ window.addEventListener("resize", function () {
+ myChart2.resize();
+ });
+
</script>
</body>
</html>
--
Gitblit v1.9.1