|
|
@@ -0,0 +1,302 @@
|
|
|
+<template>
|
|
|
+ <div class="dashboard_container">
|
|
|
+ <div class="refresh" @click="refreshData">
|
|
|
+ <span style="color: #1d82ff;">刷新数据</span>
|
|
|
+ <i class="el-icon-refresh-left" style="color: #1d82ff;"></i>
|
|
|
+ </div>
|
|
|
+ <div class="container_top">
|
|
|
+ <div class="tab" v-for="(item,index) in tabs" :key='index' @click="openOrder(item.type)">
|
|
|
+ <el-image class="img" :src="item.url" fit="fit"></el-image>
|
|
|
+ <div class="text">
|
|
|
+ <div class="title">{{item.title}}</div>
|
|
|
+ <div class="num">{{item.num}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="container_center">
|
|
|
+ <div class="chart">
|
|
|
+ <div class="head">
|
|
|
+ <div class="title">近7天订单趋势</div>
|
|
|
+ <div class="more" @click="openOrder()">查看更多</div>
|
|
|
+ </div>
|
|
|
+ <div ref="chart1" style="width: 100%;height: 280px;"></div>
|
|
|
+ </div>
|
|
|
+ <div class="chart">
|
|
|
+ <div class="head">
|
|
|
+ <div class="title">未来7天需上门</div>
|
|
|
+ </div>
|
|
|
+ <div ref="chart2" style="width: 100%;height: 280px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="container_bottom">
|
|
|
+ <div class="chart">
|
|
|
+ <div class="head">
|
|
|
+ <div class="title">近30天完工类型分布</div>
|
|
|
+ </div>
|
|
|
+ <div ref="chart3" style="width: 100%;height: 330px;"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import { getCount } from "@/api/workOrder/orderHome";
|
|
|
+ export default{
|
|
|
+ data(){
|
|
|
+ return {
|
|
|
+ tabs: [{title: '待派工',num: 12,url: require('@/assets/orderHome/dpg.png'),type: 'DWDPG'},{title: '待接收',num: 22,url: require('@/assets/orderHome/djs.png'),type: 'DJD'},{title: '服务中',num: 53,url: require('@/assets/orderHome/ffz.png'),type: 'FWZ'},{title: '异常待处理',num: 2,url: require('@/assets/orderHome/yc.png'),type: 'YCD'},{title: '差评统计',num: 0,url: require('@/assets/orderHome/pj.png'),type: 'appraise'}],
|
|
|
+ qtsm: [],
|
|
|
+ qtddqs: {},
|
|
|
+ wglxfb: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ getDate(){
|
|
|
+ return function(d,t){
|
|
|
+ var date = new Date();
|
|
|
+ var base = Date.parse(date); // 转换为时间戳
|
|
|
+ var year = date.getFullYear(); //获取当前年份
|
|
|
+ var mon = date.getMonth() + 1; //获取当前月份
|
|
|
+ var day = date.getDate(); //获取当前日
|
|
|
+ var oneDay = 24 * 3600 *1000
|
|
|
+
|
|
|
+ var daytimeArr = []
|
|
|
+ for (var i = 0; i < d ; i++) { //前七天的时间
|
|
|
+ var now = new Date(t=='before'?(base - oneDay*i):(base + oneDay*i));
|
|
|
+ var myear = now.getFullYear();
|
|
|
+ var month = now.getMonth() + 1;
|
|
|
+ var mday = now.getDate()
|
|
|
+ daytimeArr.push([month >=10 ?month :'0'+ month, mday>=10?mday:'0'+mday].join('-'))
|
|
|
+ }
|
|
|
+ return t=='before'?daytimeArr.reverse():daytimeArr
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filterOrderType(){
|
|
|
+ return function(obj,type){
|
|
|
+ let names = []
|
|
|
+ let series = []
|
|
|
+ for(let key in this[obj]){
|
|
|
+ names.push(key)
|
|
|
+ series.push({
|
|
|
+ name: key,
|
|
|
+ data: this[obj][key],
|
|
|
+ type: 'line',
|
|
|
+ smooth: true
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return type=='name'?names:series
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getCount()
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.drawChat1()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ refreshData(){
|
|
|
+ this.$echarts.init(this.$refs.chart1).dispose()
|
|
|
+ this.$echarts.init(this.$refs.chart2).dispose()
|
|
|
+ this.$echarts.init(this.$refs.chart3).dispose()
|
|
|
+ this.getCount()
|
|
|
+ },
|
|
|
+ openOrder(type){
|
|
|
+ if(!type){
|
|
|
+ this.$router.push({
|
|
|
+ name: "workOrderPool",
|
|
|
+ query: {}
|
|
|
+ })
|
|
|
+ }else if(type == 'appraise'){
|
|
|
+ this.$router.push({
|
|
|
+ name: "appraise",
|
|
|
+ query: {
|
|
|
+ type: 1
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.$router.push({
|
|
|
+ name: 'workOrderPool',
|
|
|
+ params: {
|
|
|
+ pageName: '-',
|
|
|
+ pageType: 'orderStatus',
|
|
|
+ pageCode: type,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ getCount(){
|
|
|
+ getCount().then(res => {
|
|
|
+ this.tabs[0].num = res.data.dpg
|
|
|
+ this.tabs[1].num = res.data.djs
|
|
|
+ this.tabs[2].num = res.data.fwz
|
|
|
+ this.tabs[3].num = res.data.ycdcl
|
|
|
+ this.tabs[4].num = res.data.cp
|
|
|
+ this.qtsm = res.data.qtsm
|
|
|
+ this.qtddqs = res.data.qtddqs
|
|
|
+ this.wglxfb = res.data.wglxfb
|
|
|
+ this.drawChat1()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ drawChat1(){
|
|
|
+ let chart1 = this.$echarts.init(this.$refs.chart1)
|
|
|
+ let chart2 = this.$echarts.init(this.$refs.chart2)
|
|
|
+ let chart3 = this.$echarts.init(this.$refs.chart3)
|
|
|
+ let option1 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: this.filterOrderType('qtddqs','name')
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: this.getDate(7,'before')
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ min: 0,
|
|
|
+ max: (value) => { // 百位起最大值向上取整
|
|
|
+ return Math.ceil(value.max / 100) * 100;
|
|
|
+ },
|
|
|
+ series: this.filterOrderType('qtddqs','series')
|
|
|
+ };
|
|
|
+ let option2 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: this.getDate(7,'after')
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ min: 0,
|
|
|
+ max: (value) => { // 百位起最大值向上取整
|
|
|
+ return Math.ceil(value.max / 100) * 100;
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: '工单数',
|
|
|
+ data: this.qtsm,
|
|
|
+ type: 'line',
|
|
|
+ smooth: true
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ let option3 = {
|
|
|
+ tooltip: {
|
|
|
+ trigger: 'axis'
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ data: this.filterOrderType('wglxfb','name')
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: 'category',
|
|
|
+ boundaryGap: false,
|
|
|
+ data: this.getDate(30,'before')
|
|
|
+ },
|
|
|
+ min: 0,
|
|
|
+ max: (value) => { // 百位起最大值向上取整
|
|
|
+ return Math.ceil(value.max / 100) * 100;
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: 'value'
|
|
|
+ },
|
|
|
+ series: this.filterOrderType('wglxfb','series')
|
|
|
+ };
|
|
|
+ chart1.setOption(option1)
|
|
|
+ chart2.setOption(option2)
|
|
|
+ chart3.setOption(option3)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .dashboard_container{
|
|
|
+ background: #f5f5f5;
|
|
|
+ padding: 20px;
|
|
|
+ min-height: calc(100vh - 86px);
|
|
|
+ box-sizing: border-box;
|
|
|
+ .refresh{
|
|
|
+ text-align: right;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ span{
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ i{
|
|
|
+ font-weight: bold;
|
|
|
+ margin-left: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .container_top{
|
|
|
+ display: flex;
|
|
|
+ .tab{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+ padding: 20px;
|
|
|
+ margin-right: 20px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ border-radius: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ .text{
|
|
|
+ margin-left: 30px;
|
|
|
+ .title{
|
|
|
+ color: #666666;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ font-size: 26px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img{
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tab:last-child{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .container_center{
|
|
|
+ display: flex;
|
|
|
+ margin: 10px 0;
|
|
|
+ margin-top: 20px;
|
|
|
+ .chart{
|
|
|
+ flex: 1;
|
|
|
+ height: 300px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .chart:last-child{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .container_bottom{
|
|
|
+ width: 100%;
|
|
|
+ height: 350px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ }
|
|
|
+ .head{
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 16px 20px;
|
|
|
+ font-weight: bold;
|
|
|
+ .more{
|
|
|
+ color: #1d82ff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
pengyh