<template> <div class="dashboard-editor-container"> <div class="dashboard-promote"> <!-- <el-row> <el-col :span="24"> <el-card class="box-card"> <p>领取阿里云通用云产品优惠券</p> <p><a target="_blank" class="text-info" href="https://www.aliyun.com/minisite/goods?userCode=fcor2omk">https://www.aliyun.com/minisite/goods?userCode=fcor2omk</a></p> <p>领取腾讯云通用云产品优惠券</p> <p><a target="_blank" class="text-info" href="https://cloud.tencent.com/act/cps/redirect?redirect=1062&cps_key=20b1c3842f74986b2894e2c5fcde7ea2&from=console">https://cloud.tencent.com/act/cps/redirect?redirect=1062&cps_key=20b1c3842f74986b2894e2c5fcde7ea2&from=console</a></p> </el-card> </el-col> </el-row> --> <!-- <el-row class="other"> <el-col :span="8"> <el-card class="box-card kj"> <div slot="header" class="clearfix"> <span class="title">gfast后台管理框架</span> </div> <p>基于GF(Go Frame)的后台管理系统 ,完善的权限用户管理,致力于快速高效开发cms系统、督办系统、后续将加入流程审批、工作流引擎、项目管理、挂图作战、数据大屏等功能。</p> <div class="git-res"> <el-link type="primary" icon="el-icon-cloudy" href="https://gitee.com/tiger1103/gfast" >访问码云</el-link> <el-link type="success" icon="el-icon-user" href="https://github.com/tiger1103/gfast">访问github</el-link> <el-link type="info" icon="el-icon-s-home" href="http://www.g-fast.cn">访问官网</el-link> </div> <div class="product"> <h3>公司产品</h3> <ul> <li><a href="http://www.qjit.cn/wallchartoperation.html" target="_blank" class="text-danger">挂图作战指挥平台</a></li> <li><a href="http://www.qjit.cn/macrodata.html" target="_blank" class="text-danger">宏观数据库平台</a></li> <li><a href="http://www.qjit.cn/usedcar.html" target="_blank" class="text-danger">二手车管理系统</a></li> <li><a href="http://www.qjit.cn/" target="_blank" class="text-danger">公租房管理系统</a></li> </ul> </div> </el-card> <el-card class="box-card xx"> <div slot="header" class="clearfix"> <span class="title">联系信息</span> </div> <p><i class="el-icon-s-promotion"></i> 官网:<a href="http://www.g-fast.cn" class="text-info" target="_blank">http://www.g-fast.cn</a></p> <p><i class="el-icon-s-custom"></i> QQ群:865697297</p> </el-card> </el-col> <el-col :span="16"> <el-card class="box-card jz"> <div slot="header" class="clearfix"> <span class="title">捐赠</span> </div> <p>若框架对您有帮助,您可以捐赠表达一下心意:</p> <img style="width: 700px; height: 360px" src="/images/jz.jpg"/> </el-card> </el-col> </el-row> --> </div> <panel-group @handleSetLineChartData="handleSetLineChartData" :panel-data="panelData"/> <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;"> <line-chart :chart-data="lineChartData"/> </el-row> <!-- <el-row :gutter="32"> --> <!-- <el-col :xs="24" :sm="24" :lg="8"> <div class="chart-wrapper"> <raddar-chart /> </div> </el-col> --> <!-- <el-col :xs="24" :sm="24" :lg="8"> <div class="chart-wrapper"> <pie-chart /> </div> </el-col> <el-col :xs="24" :sm="24" :lg="8"> <div class="chart-wrapper"> <bar-chart /> </div> </el-col> --> <!-- </el-row> --> </div> </template> <script> import {getStatistics} from "@/api/login"; import PanelGroup from './dashboard/PanelGroup' import LineChart from './dashboard/LineChart' import RaddarChart from './dashboard/RaddarChart' import PieChart from './dashboard/PieChart' import BarChart from './dashboard/BarChart' const lineChartData = { newVisitis: { expectedData: [100, 120, 161, 134, 105, 160, 161], actualData: [120, 82, 91, 154, 162, 140, 145] // 退出登录 }, // messages: { // expectedData: [200, 192, 120, 144, 160, 130, 140], // actualData: [180, 160, 151, 106, 145, 150, 130] // }, // //金额 // purchases: { // expectedData: [80, 100, 121, 104, 105, 90, 100], // actualData: [120, 90, 100, 138, 142, 130, 130] // }, // //订单 // shoppings: { // // expectedData: [130, 140, 141, 142, 145, 150, 160], //期望 // actualData: [120, 82, 91, 154, 162, 140, 130] //实际 // } } export default { name: 'Index', components: { PanelGroup, LineChart, // RaddarChart, // PieChart, // BarChart }, data() { return { panelData: { goods_total: 0, //商品总数 order_total: 0,//订单总数 total_price: 0,//金额总数 refund_total: 0,//售后总数 }, lineChartData: { moneyData: [], //金额折线 actualData: [], //订单折线 // countData:[], maxChannelData: 0, //左边订单数量最大值 maxMoneyData: 0, //金额最大值 months: [] //下面日志 } } }, created() { this.GetStatistics(); }, methods: { /** 首页所有数据 * order_total(总订单数量,总金额) * */ GetStatistics() { getStatistics().then(response => { let money = [] let count = [] let actual = [] if (response.data && response.data.line && response.data.line.length > 0) { response.data.line.forEach(function (item, index) { money.unshift(item.price/100) // 后台返回单位是 分,所以需要除以100 actual.unshift(item.date) count.unshift(item.count) }) } //最大订单数 var maxOrderNum = this.lineChartData.maxChannelData; for (var n = 1; n < count.length; n++) { if (count[n] > maxOrderNum) { maxOrderNum = count[n]; } } this.lineChartData.maxChannelData = maxOrderNum //最大金额,后台返回单位是 分,所以需要除以100 var maxMoney = this.lineChartData.maxMoneyData/100; for (var n = 1; n < money.length; n++) { if (money[n] > maxMoney) { maxMoney = money[n]; } } this.lineChartData.maxMoneyData = maxMoney this.lineChartData.moneyData = money this.lineChartData.actualData = count this.lineChartData.months = actual this.panelData.goods_total = response.data.goods_total this.panelData.refund_total = response.data.rettotal this.panelData.order_total = response.data.order_total.count this.panelData.total_price = response.data.order_total.total_price / 100 }); }, handleSetLineChartData(type) { //console.log("type",type) this.lineChartData = lineChartData[type] } } } </script> <style lang="scss" scoped type="text/stylus"> .dashboard-promote .el-row { margin-bottom: 20px; font-size: 14px; } .dashboard-promote .el-row .jz { height: 500px; } .dashboard-promote .el-row .kj { height: 300px; } .dashboard-promote .el-row .xx { height: 200px; } .git-res { margin-top: 20px; } .git-res .el-link { margin-right: 30px; } ul, li { padding: 0; margin: 0; list-style: none } .product li { margin-bottom: 20px; float: left; width: 150px; } .dashboard-editor-container { padding: 32px; background-color: rgb(240, 242, 245); position: relative; .chart-wrapper { background: #fff; padding: 16px 16px 0; margin-bottom: 32px; } } @media (max-width: 1024px) { .chart-wrapper { padding: 8px; } } </style>