wushaodong
/
decorate


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311
							<!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="wait_check">10</cite></p>
                                    <h4>今日新增报备</h4>
                                </li>
                                <li class="monthAmount">
                                    <p><cite id="is_check">10</cite></p>
                                    <h4>本月新增报备</h4>
                                </li>
                                <li class="yearAmount">
                                    <p><cite id="working">10</cite></p>
                                    <h4>总报备</h4>
                                </li>
                                <!--
                                <li class="dayCount">
                                    <p><cite id="hang_up"></cite></p>
                                    <h4>挂起中</h4>
                                </li>
                                <li class="dayCount">
                                    <p><cite id="complete"></cite></p>
                                    <h4>已完工</h4>
                                </li>
                                <li class="monthCount">
                                    <p><cite id="appraise"></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");
                chartDom1.style.width = $(".layui-col-md8").clientWidth + 'px';
                chartDom1.style.height = $(".llayui-col-md8").clientHeight + 'px';
                chartDom2.style.width = $(".layui-col-md4").clientWidth + 'px';
                chartDom2.style.height = $(".llayui-col-md4").clientHeight + 'px';
            };
            // 设置echarts的容器大小
            setContain();

         admin.req({
            url: '/tenant/repair_order/statistics/'
            ,type: 'get'
            , done: function (res) {
                $('#wait_check').html(res.data.wait_check);
                $('#is_check').html(res.data.is_check);
                $('#working').html(res.data.working);
                $('#hang_up').html(res.data.hang_up);
                $('#complete').html(res.data.complete);
                $('#appraise').html(res.data.appraise);
            }
        });
         //设置饼图数据
         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>