From 34f99d106551b51bf2af3bbd40c64624a3af25eb Mon Sep 17 00:00:00 2001 From: whycq <10027870+whycq@user.noreply.gitee.com> Date: 星期六, 09 九月 2023 09:43:57 +0800 Subject: [PATCH] # --- src/main/webapp/views/home/dashboard.html | 502 ++++++++++++++++++++++++++++++++----------------------- 1 files changed, 292 insertions(+), 210 deletions(-) diff --git a/src/main/webapp/views/home/dashboard.html b/src/main/webapp/views/home/dashboard.html index dd3efb0..3cd2869 100644 --- a/src/main/webapp/views/home/dashboard.html +++ b/src/main/webapp/views/home/dashboard.html @@ -46,50 +46,97 @@ <div class="layui-col-xs12 layui-col-md8"> <div class="layui-card" style=""> <div class="layui-card-header">娲诲姩瀹炴椂浜ゆ槗鎯呭喌</div> - <div class="layui-card-body"> + <div class="layui-card-body" style="padding-bottom: 20px;"> <div class="layui-row"> + <div>鍥㈤槦鏁版嵁</div> <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center"> - <div class="numberInfoSubTitle">浠婃棩浜ゆ槗鎬婚</div> + <div class="numberInfoSubTitle">骞村害閿�鍞洰鏍�</div> <div class="numberInfoValue"> - 124,543,233<em class="numberInfoSuffix">鍏�</em> + <span id="companyYearTarget">124,543,233</span><em class="numberInfoSuffix">涓囧厓</em> </div> </div> <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center"> - <div class="numberInfoSubTitle">閿�鍞洰鏍囧畬鎴愮巼</div> - <div class="numberInfoValue">92%</div> - </div> - <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center"> - <div class="numberInfoSubTitle">娲诲姩鍓╀綑鏃堕棿</div> - <div class="numberInfoValue">00:57:10</div> - </div> - <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center"> - <div class="numberInfoSubTitle">姣忕浜ゆ槗鎬婚</div> + <div class="numberInfoSubTitle">宸插畬鎴愰攢鍞换鍔�</div> <div class="numberInfoValue"> - 234<em class="numberInfoSuffix">鍏�</em> + <span id="companySuccess">124,543,233</span><em class="numberInfoSuffix">涓囧厓</em> </div> + </div> + <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center"> + <div class="numberInfoSubTitle">鏈畬鎴愰攢鍞换鍔�</div> + <div class="numberInfoValue"> + <span id="companyProgress">124,543,233</span><em class="numberInfoSuffix">涓囧厓</em> + </div> + </div> + <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center"> + <div class="numberInfoSubTitle">瀹屾垚鐜�</div> + <div class="numberInfoValue"><span id="companyRate">92</span>%</div> </div> </div> - <div style="text-align: center;padding: 30px 0 10px 0;"> - <img src="https://gw.alipayobjects.com/zos/rmsportal/HBWnDEUXCnGnGrRfrpKa.png" - style="max-height: 437px; max-width: 100%;" alt="map"> + <div class="layui-row" style="margin-top: 50px;"> + <div>涓汉鏁版嵁</div> + <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center"> + <div class="numberInfoSubTitle">骞村害閿�鍞洰鏍�</div> + <div class="numberInfoValue"> + <span id="personYearTarget">124,543,233</span><em class="numberInfoSuffix">涓囧厓</em> + </div> + </div> + <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center"> + <div class="numberInfoSubTitle">宸插畬鎴愰攢鍞换鍔�</div> + <div class="numberInfoValue"> + <span id="personSuccess">124,543,233</span><em class="numberInfoSuffix">涓囧厓</em> + </div> + </div> + <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center"> + <div class="numberInfoSubTitle">鏈畬鎴愰攢鍞换鍔�</div> + <div class="numberInfoValue"> + <span id="personProgress">124,543,233</span><em class="numberInfoSuffix">涓囧厓</em> + </div> + </div> + <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center"> + <div class="numberInfoSubTitle">瀹屾垚鐜�</div> + <div class="numberInfoValue"><span id="personRate">92</span>%</div> + </div> + </div> + <div class="layui-row" style="margin-top: 40px;"> + <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center"> + <div class="numberInfoSubTitle">璺熻釜椤圭洰鏁伴噺</div> + <div class="numberInfoValue"> + <a href="#" id="openProgress"><span id="progressCount">124</span><em class="numberInfoSuffix">涓�</em></a> + </div> + </div> + <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center"> + <div class="numberInfoSubTitle">閲戦</div> + <div class="numberInfoValue"> + <span id="progressMoney">124,543,233</span><em class="numberInfoSuffix">涓囧厓</em> + </div> + </div> + <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center"> + <div class="numberInfoSubTitle">鎴愪氦椤圭洰鏁伴噺</div> + <div class="numberInfoValue"> + <a href="#" id="openSuccess"><span id="successCount">121</span><em class="numberInfoSuffix">涓�</em></a> + </div> + </div> + <div class="layui-col-xs12 layui-col-sm6 layui-col-lg3 text-center"> + <div class="numberInfoSubTitle">閲戦</div> + <div class="numberInfoValue"> + <span id="successMoney">124,543,233</span><em class="numberInfoSuffix">涓囧厓</em> + </div> + </div> </div> </div> </div> </div> <div class="layui-col-xs12 layui-col-md4"> - <div class="layui-card"> - <div class="layui-card-header">娲诲姩鎯呭喌棰勬祴</div> - <div class="layui-card-body" style="height: 240px;overflow: hidden;"> - <div id="hdqkyc" style="width: 100%;height: 260px;"></div> + <div class="layui-card" style="height: 403px;overflow: hidden;"> + <div class="layui-card-header" style="display: flex;justify-content: space-between;"> + <div>鍏徃鍏憡</div> + <div><a href="#" id="openCompanyPost">鏌ョ湅鏇村</a></div> + </div> + <div class="layui-card-body" id="companyPostId"> </div> </div> - <div class="layui-card"> - <div class="layui-card-header">鍒告牳鏁堢巼</div> - <div class="layui-card-body" style="height: 222px;overflow: hidden;"> - <div id="hjxl" style="width: 100%;height: 280px;margin-top: -20px;"></div> - </div> - </div> + </div> <div class="layui-col-xs12"> @@ -97,8 +144,8 @@ <div class="layui-card-body"> <div class="layui-tab layui-tab-brief" lay-filter="tabZZT"> <ul class="layui-tab-title"> - <li class="layui-this">閿�鍞</li> - <li>璁块棶閲�</li> + <li class="layui-this">浜ゆ槗棰�</li> +<!-- <li>璁块棶閲�</li>--> </ul> <div class="layui-tab-content"> <div class="layui-tab-item layui-show"> @@ -115,45 +162,11 @@ </colgroup> <thead> <tr style="background: none;color: #333;"> - <th colspan="3">闂ㄥ簵閿�鍞鎺掑悕</th> + <th colspan="3">鍛樺伐閿�鍞笟缁╂帓琛�</th> </tr> </thead> - <tbody> - <tr> - <td><span class="layui-badge layui-bg-cyan">1</span></td> - <td>宸ヤ笓璺� 0 鍙峰簵</td> - <td>323,234</td> - </tr> - <tr> - <td><span class="layui-badge layui-bg-cyan">2</span></td> - <td>宸ヤ笓璺� 1 鍙峰簵</td> - <td>323,234</td> - </tr> - <tr> - <td><span class="layui-badge layui-bg-cyan">3</span></td> - <td>宸ヤ笓璺� 2 鍙峰簵</td> - <td>323,234</td> - </tr> - <tr> - <td><span class="layui-badge layui-bg-gray">4</span></td> - <td>宸ヤ笓璺� 4 鍙峰簵</td> - <td>323,234</td> - </tr> - <tr> - <td><span class="layui-badge layui-bg-gray">5</span></td> - <td>宸ヤ笓璺� 5 鍙峰簵</td> - <td>323,234</td> - </tr> - <tr> - <td><span class="layui-badge layui-bg-gray">6</span></td> - <td>宸ヤ笓璺� 6 鍙峰簵</td> - <td>323,234</td> - </tr> - <tr> - <td><span class="layui-badge layui-bg-gray">7</span></td> - <td>宸ヤ笓璺� 7 鍙峰簵</td> - <td>323,234</td> - </tr> + <tbody id="staffRankId"> + </tbody> </table> </div> @@ -173,43 +186,43 @@ </colgroup> <thead> <tr style="background: none;color: #333;"> - <th colspan="3">闂ㄥ簵璁块棶閲忔帓鍚�</th> + <th colspan="3">鍛樺伐閿�鍞鎺掕</th> </tr> </thead> <tbody> <tr> <td><span class="layui-badge layui-bg-cyan">1</span></td> - <td>宸ヤ笓璺� 0 鍙峰簵</td> + <td>aaa</td> <td>323,234</td> </tr> <tr> <td><span class="layui-badge layui-bg-cyan">2</span></td> - <td>宸ヤ笓璺� 1 鍙峰簵</td> + <td>bbb</td> <td>323,234</td> </tr> <tr> <td><span class="layui-badge layui-bg-cyan">3</span></td> - <td>宸ヤ笓璺� 2 鍙峰簵</td> + <td>ccc</td> <td>323,234</td> </tr> <tr> <td><span class="layui-badge layui-bg-gray">4</span></td> - <td>宸ヤ笓璺� 4 鍙峰簵</td> + <td>ddd</td> <td>323,234</td> </tr> <tr> <td><span class="layui-badge layui-bg-gray">5</span></td> - <td>宸ヤ笓璺� 5 鍙峰簵</td> + <td>eee</td> <td>323,234</td> </tr> <tr> <td><span class="layui-badge layui-bg-gray">6</span></td> - <td>宸ヤ笓璺� 6 鍙峰簵</td> + <td>fff</td> <td>323,234</td> </tr> <tr> <td><span class="layui-badge layui-bg-gray">7</span></td> - <td>宸ヤ笓璺� 7 鍙峰簵</td> + <td>zzz</td> <td>323,234</td> </tr> </tbody> @@ -231,158 +244,227 @@ <script type="text/javascript" src="../../static/layui/layui.js" charset="utf-8"></script> <script type="text/javascript" src="../../static/js/echarts/echarts.min.js" charset="utf-8"></script> <script type="text/javascript" src="../../static/js/echarts/echartsTheme.js" charset="utf-8"></script> +<script type="text/javascript" src="../../static/js/common.js" charset="utf-8"></script> <script> layui.use(['layer', 'element'], function () { var $ = layui.jquery; var layer = layui.layer; var element = layui.element; + element.init(); - // 娓叉煋娲诲姩鎯呭喌棰勬祴 - var myCharts = echarts.init(document.getElementById('hdqkyc'), myEchartsTheme); - var mData = [50, 100, 150, 80, 120, 150, 200, 250, 220, 250, 300, 350, 400, 380, 440, 450, 500, 550, 500]; - var option = { - title: { - text: '鏈夋湜杈惧埌棰勬湡', - subtext: '鐩爣璇勪及', - textStyle: { - color: '#000' - } - }, - tooltip: { - trigger: "axis" - }, - xAxis: [{ - type: "category", - boundaryGap: !1, - data: ["06:00", "06:30", "07:00", "07:30", "08:00", "08:30", "09:00", "09:30", "10:00", "11:30", "12:00", "12:30", "13:00", "13:30", "14:00", "14:30", "15:00", "15:30", "16:00"] - }], - yAxis: [{ - type: "value" - }], - series: [{ - name: "閲戦", - type: "line", - smooth: !0, - itemStyle: { - normal: { - areaStyle: { - type: "default" - } - } - }, - data: mData - }] - }; - myCharts.setOption(option); - - // 鍔ㄦ�佹敼鍙樺浘琛�1鏁版嵁 - setInterval(function () { - for (var i = 0; i < mData.length; i++) { - mData[i] += (Math.random() * 50 - 25); - if (mData[i] < 0) { - mData[i] = 0; - } - } - myCharts.setOption({ - series: [{ - data: mData - }] - }); - }, 1000); - - // 娓叉煋鍒告牳鏁堢巼鍥捐〃 - var myCharts2 = echarts.init(document.getElementById('hjxl'), myEchartsTheme); - var option2 = { - tooltip: { - formatter: "{a} <br/>{b} : {c}%" - }, - series: [ - { - name: '鍒告牳鏁堢巼', - type: 'gauge', - detail: {formatter: '{value}%'}, - data: [{value: 80, name: '璺冲嚭鐜�'}] - } - ] - }; - myCharts2.setOption(option2); - - // 娓叉煋閿�鍞鍥捐〃 - var myCharts3 = echarts.init(document.getElementById('xse'), myEchartsTheme); - var option3 = { - title: { - text: '閿�鍞秼鍔�', - textStyle: { - color: '#000', - fontSize: 14 - } - }, - tooltip: {}, - grid: { - left: '0', - right: '0', - bottom: '0', - containLabel: true - }, - xAxis: { - data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '6鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'] - }, - yAxis: {}, - series: [{ - type: 'bar', - data: [726, 1013, 690, 892, 982, 570, 536, 546, 988, 1002, 206, 506], - barMaxWidth: 45 - }] - }; - myCharts3.setOption(option3); - - // 娓叉煋璁块棶閲忓浘琛� - var myCharts4 = echarts.init(document.getElementById('fwl'), myEchartsTheme); - var option4 = { - title: { - text: '璁块棶閲忚秼鍔�', - textStyle: { - color: '#000', - fontSize: 14 - } - }, - tooltip: {}, - grid: { - left: '0', - right: '0', - bottom: '0', - containLabel: true - }, - xAxis: { - data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '6鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'] - }, - yAxis: {}, - series: [{ - type: 'bar', - data: [558, 856, 880, 1325, 982, 856, 655, 546, 988, 985, 568, 302], - barMaxWidth: 45 - }] - }; - myCharts4.setOption(option4); - - // 鍒囨崲閫夐」鍗¢噸鏂版覆鏌� - element.on('tab(tabZZT)', function (data) { - if (data.index == 0) { - myCharts3.resize(); - } else { - myCharts4.resize(); + //鑾峰彇鍥㈤槦鏁版嵁 + $.ajax({ + url: baseUrl + "/dashboard/companyData/auth", + headers: {'token': localStorage.getItem('token')}, + data: {}, + dataType: 'json', + contentType: 'application/json;charset=UTF-8', + method: 'POST', + success: function (res) { + $("#companyYearTarget").text(res.data.yearTarget) + $("#companySuccess").text(res.data.successMoney) + $("#companyProgress").text(res.data.progressMoney) + $("#companyRate").text(res.data.yearTransactionRate) } }); + //鑾峰彇涓汉鏁版嵁 + $.ajax({ + url: baseUrl + "/dashboard/personData/auth", + headers: {'token': localStorage.getItem('token')}, + data: {}, + dataType: 'json', + contentType: 'application/json;charset=UTF-8', + method: 'POST', + success: function (res) { + $("#personYearTarget").text(res.data.yearTarget) + $("#personSuccess").text(res.data.successMoney) + $("#personProgress").text(res.data.progressMoney) + $("#personRate").text(res.data.yearTransactionRate) + $("#progressCount").text(res.data.progressCount) + $("#successCount").text(res.data.successCount) + $("#progressMoney").text(res.data.progressMoney) + $("#successMoney").text(res.data.successMoney) + } + }); + + //鑾峰彇鍛樺伐浜ゆ槗棰濇帓琛� + $.ajax({ + url: baseUrl + "/dashboard/staffRank/auth", + headers: {'token': localStorage.getItem('token')}, + data: {}, + dataType: 'json', + contentType: 'application/json;charset=UTF-8', + method: 'POST', + success: function (res) { + let data = res.data + for (var i = 0; i < data.length; i++) { + let div = "<tr>"; + if (i < 3) { + div += "<td><span class='layui-badge layui-bg-cyan'>" + (i+1) + "</span></td>" + }else { + div += "<td><span class='layui-badge layui-bg-gray'>" + (i+1) + "</span></td>" + } + + div += "<td>" + data[i].username + "</td>" + div += "<td>" + data[i].money + "涓囧厓</td>" + div += "</tr>" + + $("#staffRankId").append(div) + } + } + }); + + //鑾峰彇鍏徃鍏憡 + $.ajax({ + url: baseUrl + "/companyPost/list/auth", + headers: {'token': localStorage.getItem('token')}, + data: {}, + dataType: 'json', + contentType: 'application/json;charset=UTF-8', + method: 'POST', + success: function (res) { + let data = res.data.records + for (var i = 0; i < data.length; i++) { + let div = "<div style='margin-top: 10px;display: flex;justify-content: space-between;'>"; + div += '<div><span class="layui-badge-dot layui-bg-green" style="margin-right: 10px;"></span>' + div += data[i].content + "</div>" + div += "<div>" + data[i].createTime$ + "</div>" + div += "</div>" + + $("#companyPostId").append(div) + } + } + }); + + // 娓叉煋浜ゆ槗瓒嬪娍鍥捐〃 + var myCharts3 = echarts.init(document.getElementById('xse'), myEchartsTheme); + //鑾峰彇鑾峰彇褰撳墠骞村害12涓湀鐨勪氦鏄撴垚鍔熸暟鎹� + $.ajax({ + url: baseUrl + "/dashboard/currentMonthData/auth", + headers: {'token': localStorage.getItem('token')}, + data: {}, + dataType: 'json', + contentType: 'application/json;charset=UTF-8', + method: 'POST', + success: function (res) { + let data = res.data + var option3 = { + title: { + text: '浜ゆ槗瓒嬪娍', + textStyle: { + color: '#000', + fontSize: 14 + } + }, + tooltip: {}, + grid: { + left: '0', + right: '0', + bottom: '0', + containLabel: true + }, + xAxis: { + data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '6鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'] + }, + yAxis: {}, + series: [{ + type: 'bar', + data: data, + barMaxWidth: 45 + }] + }; + myCharts3.setOption(option3); + } + }); + + + // // 娓叉煋璁块棶閲忓浘琛� + // var myCharts4 = echarts.init(document.getElementById('fwl'), myEchartsTheme); + // var option4 = { + // title: { + // text: '璁块棶閲忚秼鍔�', + // textStyle: { + // color: '#000', + // fontSize: 14 + // } + // }, + // tooltip: {}, + // grid: { + // left: '0', + // right: '0', + // bottom: '0', + // containLabel: true + // }, + // xAxis: { + // data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '6鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'] + // }, + // yAxis: {}, + // series: [{ + // type: 'bar', + // data: [558, 856, 880, 1325, 982, 856, 655, 546, 988, 985, 568, 302], + // barMaxWidth: 45 + // }] + // }; + // myCharts4.setOption(option4); + // + // // 鍒囨崲閫夐」鍗¢噸鏂版覆鏌� + // element.on('tab(tabZZT)', function (data) { + // if (data.index == 0) { + // myCharts3.resize(); + // } else { + // myCharts4.resize(); + // } + // }); + // 绐楀彛澶у皬鏀瑰彉浜嬩欢 window.onresize = function () { - myCharts.resize(); - myCharts2.resize(); myCharts3.resize(); - myCharts4.resize(); }; + $("#openProgress").on("click", () => { + layer.open({ + type: 2, + title: '璺熻釜椤圭洰', + maxmin: true, + area: [top.detailWidth, top.detailHeight], + shadeClose: true, + content: '../order/order.html?status=0', + success: function(layero, index){ + + } + }); + }); + + $("#openSuccess").on("click", () => { + layer.open({ + type: 2, + title: '璺熻釜椤圭洰', + maxmin: true, + area: [top.detailWidth, top.detailHeight], + shadeClose: true, + content: '../order/order.html?status=1', + success: function(layero, index){ + + } + }); + }); + + $("#openCompanyPost").on("click", () => { + layer.open({ + type: 2, + title: '鍏憡', + maxmin: true, + area: [top.detailWidth, top.detailHeight], + shadeClose: true, + content: '../companyPost/companyPost_view.html', + success: function(layero, index){ + + } + }); + }); + }); </script> </body> -- Gitblit v1.9.1