|
|
@@ -1,7 +1,5 @@
|
|
|
-
|
|
|
-
|
|
|
<!DOCTYPE html>
|
|
|
-<html>
|
|
|
+<html style="height: 100%;">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<title>首页</title>
|
|
|
@@ -10,29 +8,290 @@
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
|
|
<link rel="stylesheet" href="../../layuiadmin/layui/css/layui.css" media="all">
|
|
|
<link rel="stylesheet" href="../../layuiadmin/style/admin.css" media="all">
|
|
|
+ <style>
|
|
|
+ .topPart{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ padding: 0 20px;
|
|
|
+ background: #ffffff;
|
|
|
+ }
|
|
|
+ .dayAmount{
|
|
|
+ width: 31%;
|
|
|
+ margin: 10px 0;
|
|
|
+ padding: 20px 0 20px 10px;
|
|
|
+ background: #ff6600;
|
|
|
+ }
|
|
|
+ .monthAmount{
|
|
|
+ width: 31%;
|
|
|
+ margin: 10px 0;
|
|
|
+ padding: 20px 0 20px 10px;
|
|
|
+ background: #1abc9b;
|
|
|
+ }
|
|
|
+ .yearAmount{
|
|
|
+ width: 31%;
|
|
|
+ padding: 20px 0 20px 10px;
|
|
|
+ margin: 10px 0;
|
|
|
+ background: #1e9eb3;
|
|
|
+ }
|
|
|
+ .dayCount{
|
|
|
+ width: 31%;
|
|
|
+ padding: 20px 0 20px 10px;
|
|
|
+ margin: 10px 0;
|
|
|
+ background: #ee7c5c;
|
|
|
+ }
|
|
|
+ .monthCount{
|
|
|
+ width: 31%;
|
|
|
+ padding: 20px 0 20px 10px;
|
|
|
+ margin: 10px 0;
|
|
|
+ background: #ff9900;
|
|
|
+ }
|
|
|
+ .yearCount{
|
|
|
+ width: 31%;
|
|
|
+ padding: 20px 0 20px 10px;
|
|
|
+ margin: 10px 0;
|
|
|
+ background: #2ec7c9;
|
|
|
+ }
|
|
|
+ h4{
|
|
|
+ margin-top: 5px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ cite{
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ .layui-card-header{
|
|
|
+ padding-left: 20px;
|
|
|
+ color: #000;
|
|
|
+ font-size: 18px;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
-
|
|
|
- <div class="layui-fluid">
|
|
|
- <div class="layui-row layui-col-space15">
|
|
|
- 首页
|
|
|
+ <div class="layui-fluid">
|
|
|
+ <div class="layui-row layui-col-space15">
|
|
|
+ <div class="layui-col-md12">
|
|
|
+ <div class="layui-row layui-col-space15">
|
|
|
+ <!-- 统计数据 -->
|
|
|
+ <div class="layui-col-md12">
|
|
|
+ <div class="layui-card">
|
|
|
+ <div class="layui-card-header">数据概览</div>
|
|
|
+ <ul class="layui-col-md12 topPart">
|
|
|
+ <li class="dayAmount">
|
|
|
+ <p><cite id="today_report">10</cite></p>
|
|
|
+ <h4>今日新增报备</h4>
|
|
|
+ </li>
|
|
|
+ <li class="monthAmount">
|
|
|
+ <p><cite id="mouth_report">10</cite></p>
|
|
|
+ <h4>本月新增报备</h4>
|
|
|
+ </li>
|
|
|
+ <li class="yearAmount">
|
|
|
+ <p><cite id="general_report">10</cite></p>
|
|
|
+ <h4>总报备</h4>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 统计图表 -->
|
|
|
+ <div class="layui-col-md8">
|
|
|
+ <div style="padding-top: 20px" class="layui-card">
|
|
|
+ <div id="chart1" style="height:400px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="layui-col-md4">
|
|
|
+ <div style="padding-top: 20px" class="layui-card">
|
|
|
+ <div id="chart2" style="height:400px"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <script src="../../layuiadmin/layui/layui.js?t=1"></script>
|
|
|
- <script>
|
|
|
+ <script src="../../layuiadmin/layui/layui.js?t=1"></script>
|
|
|
+ <script>
|
|
|
+ layui.config({
|
|
|
+ base: '../../layuiadmin/' //静态资源所在路径
|
|
|
+ }).extend({
|
|
|
+ index: 'lib/index', //主入口模块
|
|
|
+ }).use(['index', 'home','echarts'], function() {
|
|
|
+ var $ = layui.$
|
|
|
+ ,admin = layui.admin
|
|
|
+ ,echarts = layui.echarts
|
|
|
+ ,xData = [];
|
|
|
+ var chart1 = echarts.init($('#chart1')[0]);
|
|
|
+ var chart2 = echarts.init($('#chart2')[0]);
|
|
|
+ //echarts容器自适应大小
|
|
|
+ var setContain = () => {
|
|
|
+ var chartDom1 = document.getElementById("chart1");
|
|
|
+ var chartDom2 = document.getElementById("chart2");
|
|
|
+ var md8Dom = $(".layui-col-md8");
|
|
|
+ var md4Dom = $(".layui-col-md4");
|
|
|
+ chartDom1.style.width = md8Dom.clientWidth + 'px';
|
|
|
+ chartDom1.style.height = md8Dom.clientHeight + 'px';
|
|
|
+ chartDom2.style.width = md4Dom.clientWidth + 'px';
|
|
|
+ chartDom2.style.height = md4Dom.clientHeight + 'px';
|
|
|
+ };
|
|
|
+ // 设置echarts的容器大小
|
|
|
+ setContain();
|
|
|
|
|
|
- layui.config({
|
|
|
- base: '../../layuiadmin/' //静态资源所在路径
|
|
|
- }).extend({
|
|
|
- index: 'lib/index', //主入口模块
|
|
|
- }).use(['index', 'home','echarts', 'table'], function() {
|
|
|
- var $ = layui.$;
|
|
|
-
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- </script>
|
|
|
+ admin.req({
|
|
|
+ url: '/account/statistics/'
|
|
|
+ ,type: 'get'
|
|
|
+ , done: function (res) {
|
|
|
+ $('#today_report').html(res.data.today_report);
|
|
|
+ $('#mouth_report').html(res.data.mouth_report);
|
|
|
+ $('#general_report').html(res.data.general_report);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ //设置饼图数据
|
|
|
+ // admin.req({
|
|
|
+ // url: '/tenant/repair_order/statistics/repair_type/'
|
|
|
+ // ,type: 'get'
|
|
|
+ // , done: function (res) {
|
|
|
+ // if(res.data && res.data.length > 0){
|
|
|
+ // res.data.forEach(item=>{
|
|
|
+ // xData.push(item.name)
|
|
|
+ // })
|
|
|
+ // }
|
|
|
+ // var option2 = {
|
|
|
+ // title: {
|
|
|
+ // text: '报修类型占比',
|
|
|
+ // x: 'center' //标题居中
|
|
|
+ // },
|
|
|
+ // tooltip: {
|
|
|
+ // // trigger: 'item' //悬浮显示对比
|
|
|
+ // },
|
|
|
+ // legend: {
|
|
|
+ // orient: 'vertical', //类型垂直,默认水平
|
|
|
+ // x:'left', //可设定图例在左、右、居中
|
|
|
+ // y:'top', //可设定图例在上、下、居中
|
|
|
+ // padding:[5,0,0,20],
|
|
|
+ // data: xData
|
|
|
+ // },
|
|
|
+ // series: [{
|
|
|
+ // type: 'pie', //饼状
|
|
|
+ // radius: '60%', //圆的大小
|
|
|
+ // center: ['50%', '50%'], //居中
|
|
|
+ // data: res.data
|
|
|
+ // }]
|
|
|
+ // };
|
|
|
+ // chart2.setOption(option2);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // 柱状图和折线图
|
|
|
+ // admin.req({
|
|
|
+ // url: "/tenant/repair_order/statistics/repair_order/"
|
|
|
+ // ,type: 'get'
|
|
|
+ // , done: function (res) {
|
|
|
+ // var option1 = {
|
|
|
+ // title: {
|
|
|
+ // text: '报修趋势统计',
|
|
|
+ // x: 'center',
|
|
|
+ // itemGap:20
|
|
|
+ // },
|
|
|
+ // tooltip: {
|
|
|
+ // trigger: 'axis',
|
|
|
+ // axisPointer: {
|
|
|
+ // type: 'cross',
|
|
|
+ // crossStyle: {
|
|
|
+ // color: '#999'
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // toolbox: {
|
|
|
+ // feature: {
|
|
|
+ // dataView: {show: true, readOnly: false},
|
|
|
+ // magicType: {show: true, type: ['line', 'bar']},
|
|
|
+ // restore: {show: true},
|
|
|
+ // saveAsImage: {show: true}
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // legend: {
|
|
|
+ // data:['报修量','完工量'],
|
|
|
+ // padding:[30,0,0,0]
|
|
|
+ // },
|
|
|
+ // xAxis: [
|
|
|
+ // {
|
|
|
+ // type: 'category',
|
|
|
+ // data: res.data.order_mouth,
|
|
|
+ // axisPointer: {
|
|
|
+ // type: 'shadow'
|
|
|
+ // },
|
|
|
+ // axisLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#009688', // 颜色
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // ],
|
|
|
+ // yAxis: [
|
|
|
+ // {
|
|
|
+ // type: 'value',
|
|
|
+ // name: '报修量',
|
|
|
+ // min: 0,
|
|
|
+ // axisLabel: {
|
|
|
+ // formatter: '{value} '
|
|
|
+ // },
|
|
|
+ // axisLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#009688', // 颜色
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // type: 'value',
|
|
|
+ // name: '完工量',
|
|
|
+ // min: 0,
|
|
|
+ // axisLabel: {
|
|
|
+ // formatter: '{value} '
|
|
|
+ // },
|
|
|
+ // axisLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // color: '#009688', // 颜色
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // ],
|
|
|
+ // series: [
|
|
|
+ // {
|
|
|
+ // name:'报修量',
|
|
|
+ // type:'bar',
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // color: "#FFB800",
|
|
|
+ // lineStyle: {
|
|
|
+ // color: "#FFB800"
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // data: res.data.repair_counts
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name:'完工量',
|
|
|
+ // type:'line',
|
|
|
+ // yAxisIndex: 1,
|
|
|
+ // itemStyle: {
|
|
|
+ // normal: {
|
|
|
+ // color: "#1E9FFF",
|
|
|
+ // lineStyle: {
|
|
|
+ // color: "#1E9FFF"
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ // data:res.data.finish_counts
|
|
|
+ // }
|
|
|
+ // ]
|
|
|
+ // };
|
|
|
+ // chart1.setOption(option1);
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // window.onresize = function () {//用于使chart自适应高度和宽度
|
|
|
+ // setContain();//重置容器高宽
|
|
|
+ // chart1.resize();
|
|
|
+ // chart2.resize();
|
|
|
+ // };
|
|
|
+ })
|
|
|
+ </script>
|
|
|
</body>
|
|
|
</html>
|
|
|
-
|
wushaodong