|
@@ -79,30 +79,17 @@
|
|
|
<div class="layui-card-header">数据概览</div>
|
|
<div class="layui-card-header">数据概览</div>
|
|
|
<ul class="layui-col-md12 topPart">
|
|
<ul class="layui-col-md12 topPart">
|
|
|
<li class="dayAmount">
|
|
<li class="dayAmount">
|
|
|
- <p><cite id="wait_check">10</cite></p>
|
|
|
|
|
|
|
+ <p><cite id="today_report">10</cite></p>
|
|
|
<h4>今日新增报备</h4>
|
|
<h4>今日新增报备</h4>
|
|
|
</li>
|
|
</li>
|
|
|
<li class="monthAmount">
|
|
<li class="monthAmount">
|
|
|
- <p><cite id="is_check">10</cite></p>
|
|
|
|
|
|
|
+ <p><cite id="mouth_report">10</cite></p>
|
|
|
<h4>本月新增报备</h4>
|
|
<h4>本月新增报备</h4>
|
|
|
</li>
|
|
</li>
|
|
|
<li class="yearAmount">
|
|
<li class="yearAmount">
|
|
|
- <p><cite id="working">10</cite></p>
|
|
|
|
|
|
|
+ <p><cite id="general_report">10</cite></p>
|
|
|
<h4>总报备</h4>
|
|
<h4>总报备</h4>
|
|
|
</li>
|
|
</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>
|
|
</ul>
|
|
|
</div>
|
|
</div>
|
|
|
</div>
|
|
</div>
|
|
@@ -138,173 +125,172 @@
|
|
|
var setContain = () => {
|
|
var setContain = () => {
|
|
|
var chartDom1 = document.getElementById("chart1");
|
|
var chartDom1 = document.getElementById("chart1");
|
|
|
var chartDom2 = document.getElementById("chart2");
|
|
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';
|
|
|
|
|
|
|
+ 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的容器大小
|
|
// 设置echarts的容器大小
|
|
|
setContain();
|
|
setContain();
|
|
|
|
|
|
|
|
admin.req({
|
|
admin.req({
|
|
|
- url: '/tenant/repair_order/statistics/'
|
|
|
|
|
|
|
+ url: '/account/statistics/'
|
|
|
,type: 'get'
|
|
,type: 'get'
|
|
|
, done: function (res) {
|
|
, 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);
|
|
|
|
|
|
|
+ $('#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_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();
|
|
|
|
|
- };
|
|
|
|
|
|
|
+ // 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>
|
|
</script>
|
|
|
</body>
|
|
</body>
|
hujingpei