|
|
@@ -1,7 +1,5 @@
|
|
|
-
|
|
|
-
|
|
|
<!DOCTYPE html>
|
|
|
-<html>
|
|
|
+<html style="height: 100%;">
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
<title>首页</title>
|
|
|
@@ -10,29 +8,304 @@
|
|
|
<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="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>
|
|
|
- </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");
|
|
|
+ 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();
|
|
|
|
|
|
- layui.config({
|
|
|
- base: '../../layuiadmin/' //静态资源所在路径
|
|
|
- }).extend({
|
|
|
- index: 'lib/index', //主入口模块
|
|
|
- }).use(['index', 'home','echarts', 'table'], function() {
|
|
|
- var $ = layui.$;
|
|
|
-
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- </script>
|
|
|
+ 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>
|
|
|
-
|
lijiangwei