wushaodong
/
decorate


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297
							<!DOCTYPE html>
<html style="height: 100%;">
<head>
  <meta charset="utf-8">
  <title>首页</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <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-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>
    <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();

         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>