首页更新（一半）
This commit is contained in:
墨大叔
parent
c44a3930b7
commit
609b8abb33
|
|
@ -27,3 +27,13 @@ export function balancePeriod(query) {
|
|||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取待办事项
|
||||
export function getTodoList() {
|
||||
return request({
|
||||
url: '/system/dashboard/todoList',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1708496083072" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5825" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M-112.64 2567.68z" p-id="5826" fill="#bfbfbf"></path><path d="M1018.88 98.304c0-21.504-7.68-43.008-22.528-60.928l-0.512 0.512c14.336 17.92 22.016 39.424 22.528 60.928l0.512-0.512z" fill="#bfbfbf" p-id="5827"></path><path d="M922.624 8.192h-821.76c-50.176 0-91.136 40.96-91.136 91.136v189.44c0 50.176 40.96 91.136 91.136 91.136h30.72V924.16c0 50.176 40.96 91.136 91.136 91.136h577.536c50.176 0 91.136-40.96 91.136-91.136V378.88h30.72c50.176 0 91.136-40.96 91.136-91.136V98.816c0-20.48-7.68-41.472-21.504-58.368-16.384-19.968-42.496-32.256-69.12-32.256zM834.56 922.624c0 9.728-3.584 18.432-9.728 25.088-5.632 6.656-15.36 10.752-25.088 10.752H222.208c-19.968 0-35.328-15.872-35.328-35.84v-701.44h647.68v701.44z m87.04-599.04h-30.72V220.16h3.584c13.312-2.56 23.04-13.312 23.04-27.136 0-15.36-12.8-27.648-28.16-27.648H133.12a27.533 27.533 0 0 0-27.648 27.648c0 13.312 10.24 25.088 23.552 27.136h3.072v103.424h-30.208c-19.968 0-35.84-15.872-35.84-35.84V98.304c0-19.968 15.872-35.328 35.84-35.328H921.6c19.968 0 35.84 15.872 35.84 35.328l0.512 189.44c-2.048 20.48-17.408 35.84-36.352 35.84z" p-id="5828" fill="#bfbfbf"></path><path d="M1015.808 98.304h2.56c0-21.504-8.192-43.008-22.528-60.928l-2.048 1.536c13.312 16.896 22.016 37.376 22.016 59.392z" fill="#bfbfbf" p-id="5829"></path><path d="M992.768 40.96c13.312 16.384 20.992 36.864 21.504 57.856h2.048c0-22.016-8.704-43.008-22.016-59.392l-1.536 1.536z" fill="#bfbfbf" p-id="5830"></path><path d="M473.6 535.04h-66.048c-14.336 0-26.624 12.288-26.624 26.624s12.288 26.624 26.624 26.624h83.968v60.416h-84.48c-15.872 0-29.184 13.312-29.184 29.184s13.312 29.184 29.184 29.184h84.48V780.8c0 14.336 12.288 26.624 26.624 26.624 14.336 0 26.624-12.288 26.624-26.624v-74.24h83.456c15.872 0 29.184-13.312 29.184-29.184s-13.312-29.184-29.184-29.184h-83.968v-60.416h84.48c14.336 0 26.624-12.288 26.624-26.624s-12.288-26.624-26.624-26.624h-68.608L669.696 424.96c5.12-5.12 8.192-11.776 8.192-18.432s-2.56-13.312-8.192-18.432c-10.24-9.728-27.136-9.216-37.376 1.024l-115.2 114.688-115.712-115.712c-5.12-5.12-11.776-8.192-18.432-8.192s-13.312 2.56-18.432 8.192c-5.12 5.12-8.192 11.776-8.192 18.432 0 7.168 2.56 13.312 8.192 18.432L473.6 535.04z" p-id="5831" fill="#bfbfbf"></path></svg>
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1708496083072" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5825" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M-112.64 2567.68z" p-id="5826" ></path><path d="M1018.88 98.304c0-21.504-7.68-43.008-22.528-60.928l-0.512 0.512c14.336 17.92 22.016 39.424 22.528 60.928l0.512-0.512z" p-id="5827"></path><path d="M922.624 8.192h-821.76c-50.176 0-91.136 40.96-91.136 91.136v189.44c0 50.176 40.96 91.136 91.136 91.136h30.72V924.16c0 50.176 40.96 91.136 91.136 91.136h577.536c50.176 0 91.136-40.96 91.136-91.136V378.88h30.72c50.176 0 91.136-40.96 91.136-91.136V98.816c0-20.48-7.68-41.472-21.504-58.368-16.384-19.968-42.496-32.256-69.12-32.256zM834.56 922.624c0 9.728-3.584 18.432-9.728 25.088-5.632 6.656-15.36 10.752-25.088 10.752H222.208c-19.968 0-35.328-15.872-35.328-35.84v-701.44h647.68v701.44z m87.04-599.04h-30.72V220.16h3.584c13.312-2.56 23.04-13.312 23.04-27.136 0-15.36-12.8-27.648-28.16-27.648H133.12a27.533 27.533 0 0 0-27.648 27.648c0 13.312 10.24 25.088 23.552 27.136h3.072v103.424h-30.208c-19.968 0-35.84-15.872-35.84-35.84V98.304c0-19.968 15.872-35.328 35.84-35.328H921.6c19.968 0 35.84 15.872 35.84 35.328l0.512 189.44c-2.048 20.48-17.408 35.84-36.352 35.84z" p-id="5828" ></path><path d="M1015.808 98.304h2.56c0-21.504-8.192-43.008-22.528-60.928l-2.048 1.536c13.312 16.896 22.016 37.376 22.016 59.392z" p-id="5829"></path><path d="M992.768 40.96c13.312 16.384 20.992 36.864 21.504 57.856h2.048c0-22.016-8.704-43.008-22.016-59.392l-1.536 1.536z" p-id="5830"></path><path d="M473.6 535.04h-66.048c-14.336 0-26.624 12.288-26.624 26.624s12.288 26.624 26.624 26.624h83.968v60.416h-84.48c-15.872 0-29.184 13.312-29.184 29.184s13.312 29.184 29.184 29.184h84.48V780.8c0 14.336 12.288 26.624 26.624 26.624 14.336 0 26.624-12.288 26.624-26.624v-74.24h83.456c15.872 0 29.184-13.312 29.184-29.184s-13.312-29.184-29.184-29.184h-83.968v-60.416h84.48c14.336 0 26.624-12.288 26.624-26.624s-12.288-26.624-26.624-26.624h-68.608L669.696 424.96c5.12-5.12 8.192-11.776 8.192-18.432s-2.56-13.312-8.192-18.432c-10.24-9.728-27.136-9.216-37.376 1.024l-115.2 114.688-115.712-115.712c-5.12-5.12-11.776-8.192-18.432-8.192s-13.312 2.56-18.432 8.192c-5.12 5.12-8.192 11.776-8.192 18.432 0 7.168 2.56 13.312 8.192 18.432L473.6 535.04z" p-id="5831" ></path></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.4 KiB |
|
|
@ -204,8 +204,6 @@
|
|||
}
|
||||
|
||||
.card-box {
|
||||
padding-right: 15px;
|
||||
padding-left: 15px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<el-row :gutter="20" class="panel-group" v-loading="loading">
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
|
||||
<el-row :gutter="12" class="panel-group" v-loading="loading">
|
||||
<el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
|
||||
<div class="card-panel panel-device" @click="handleSetLineChartData('newVisitis')">
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
|
|
@ -8,10 +8,9 @@
|
|||
</div>
|
||||
<count-to :start-val="0" :end-val="briefData.deviceCount" :duration="2600" class="card-panel-num" />
|
||||
<div class="card-panel-compare">
|
||||
较昨日
|
||||
<span :class="compareDevice >= 0 ? 'up' : 'down'">
|
||||
{{compareDevice}}
|
||||
<svg-icon :icon-class="compareDevice >= 0 ? 'up' : 'down'" />
|
||||
在线
|
||||
<span class="up">
|
||||
{{briefData.onlineCount}} 台
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -20,47 +19,87 @@
|
|||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
|
||||
<el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
|
||||
<div class="card-panel panel-yellow" @click="handleSetLineChartData('newVisitis')">
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
订单总数
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="briefData.rechargeCount" :duration="2600" class="card-panel-num" />
|
||||
<div class="card-panel-compare">
|
||||
今日
|
||||
<span class="up">
|
||||
{{briefData.todayRechargeCount}}
|
||||
<svg-icon icon-class="up" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-panel-icon-wrapper">
|
||||
<small-line-chart class-name="panel-chart" :data="rechargeCountChartData" name="订单数量" color="#FFA830"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
|
||||
<div class="card-panel panel-yellow" @click="handleSetLineChartData('newVisitis')">
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
订单金额
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="briefData.rechargeAmount" :duration="2600" class="card-panel-num" :decimals="2"/>
|
||||
<div class="card-panel-compare">
|
||||
今日
|
||||
<span class="up">
|
||||
{{briefData.todayRechargeAmount}}
|
||||
<svg-icon icon-class="up" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-panel-icon-wrapper">
|
||||
<small-line-chart class-name="panel-chart" :data="rechargeAmountChartData" name="订单金额" color="#FFA830"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
|
||||
<div class="card-panel panel-model" @click="handleSetLineChartData('messages')">
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
型号数量
|
||||
月费收入
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="briefData.modelCount" :duration="3000" class="card-panel-num" />
|
||||
<count-to :start-val="0" :end-val="briefData.totalMonthAmount" :duration="3000" class="card-panel-num" :decimals="2"/>
|
||||
<div class="card-panel-compare">
|
||||
较昨日
|
||||
<span :class="compareModel >= 0 ? 'up' : 'down'">
|
||||
{{compareModel}}
|
||||
<svg-icon :icon-class="compareModel >= 0 ? 'up' : 'down'" />
|
||||
今日
|
||||
<span class="up">
|
||||
{{briefData.todayMonthAmount}}
|
||||
<svg-icon icon-class="up" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-panel-icon-wrapper">
|
||||
<model-bar-chart class-name="panel-chart" :data="modelChartData" width="100%" height="100%"/>
|
||||
<small-line-chart class-name="panel-chart" :data="monthAmountChartData" name="月费" color="#2CAB40"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
|
||||
<div class="card-panel panel-online" @click="handleSetLineChartData('purchases')">
|
||||
<el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
|
||||
<div class="card-panel panel-device" @click="handleSetLineChartData('purchases')">
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
在线数量
|
||||
用户余额
|
||||
</div>
|
||||
<count-to :start-val="0" :end-val="briefData.onlineCount" :duration="3200" class="card-panel-num" />
|
||||
<count-to :start-val="0" :end-val="briefData.totalUserBalance" :duration="3200" class="card-panel-num" :decimals="2"/>
|
||||
<div class="card-panel-compare">
|
||||
较昨日
|
||||
<span :class="compareOnline >= 0 ? 'up' : 'down'">
|
||||
{{compareOnline}}
|
||||
<svg-icon :icon-class="compareOnline >= 0 ? 'up' : 'down'" />
|
||||
<span :class="compareBalance >= 0 ? 'up' : 'down'">
|
||||
{{compareBalance}}
|
||||
<svg-icon :icon-class="compareBalance >= 0 ? 'up' : 'down'" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-panel-icon-wrapper">
|
||||
<online-line-chart class-name="panel-chart" :data="onlineChartData" width="100%" height="100%"/>
|
||||
<small-line-chart class-name="panel-chart" :data="userBalanceChartData" name="用户余额"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :lg="6" class="card-panel-col">
|
||||
<el-col :xs="24" :sm="12" :lg="8" class="card-panel-col">
|
||||
<div class="card-panel panel-user" @click="handleSetLineChartData('shoppings')">
|
||||
<div class="card-panel-description">
|
||||
<div class="card-panel-text">
|
||||
|
|
@ -87,15 +126,16 @@
|
|||
import CountTo from 'vue-count-to'
|
||||
import {brief} from "@/api/system/dashboard";
|
||||
import UserRoundPieChart from "@/views/dashboard/component/UserRoundPieChart.vue";
|
||||
import {plusDays} from "@/utils";
|
||||
import {parseTime} from "@/utils/ruoyi";
|
||||
import Device from "@/views/system/device/index.vue";
|
||||
import DeviceLineChart from "@/views/dashboard/component/DeviceLineChart.vue";
|
||||
import OnlineLineChart from "@/views/dashboard/component/OnlineLineChart.vue";
|
||||
import ModelBarChart from "@/views/dashboard/component/ModelBarChart.vue";
|
||||
import SmallLineChart from '@/views/dashboard/component/SmallLineChart.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
SmallLineChart,
|
||||
ModelBarChart,
|
||||
DeviceLineChart,
|
||||
Device,
|
||||
|
|
@ -127,58 +167,25 @@ export default {
|
|||
}
|
||||
return this.briefData.history[this.briefData.history.length - 1];
|
||||
},
|
||||
// 型号图表数据
|
||||
modelChartData() {
|
||||
if (this.briefData == null) {
|
||||
return []
|
||||
}
|
||||
let list = this.briefData?.history?.map(item => {
|
||||
return {
|
||||
x: item.createDate,
|
||||
value: item.totalModel
|
||||
}
|
||||
});
|
||||
list.push({
|
||||
x: this.today,
|
||||
value: this.briefData.modelCount
|
||||
})
|
||||
return list;
|
||||
// 订单数据
|
||||
rechargeCountChartData() {
|
||||
return this.parseToChart('rechargeCount', 'rechargeCount');
|
||||
},
|
||||
// 在线图表数据
|
||||
onlineChartData() {
|
||||
if (this.briefData == null || this.briefData.history == null) {
|
||||
return []
|
||||
}
|
||||
let list = [];
|
||||
for (let i = 0; i < this.briefData.history.length; i ++) {
|
||||
let item = this.briefData.history[i];
|
||||
list.push({
|
||||
x: item.createDate,
|
||||
online: item.totalOnline
|
||||
})
|
||||
}
|
||||
list.push({
|
||||
x: this.today,
|
||||
online: this.briefData.onlineCount,
|
||||
})
|
||||
return list;
|
||||
// 订单金额数据
|
||||
rechargeAmountChartData() {
|
||||
return this.parseToChart('rechargeAmount', 'totalRecharge', 2);
|
||||
},
|
||||
// 月费数据
|
||||
monthAmountChartData() {
|
||||
return this.parseToChart('totalMonthAmount', 'totalMonth', 2);
|
||||
},
|
||||
// 用户余额数据
|
||||
userBalanceChartData() {
|
||||
return this.parseToChart('totalUserBalance', 'userBalance', 2);
|
||||
},
|
||||
// 设备数据
|
||||
deviceChartData() {
|
||||
if (this.briefData == null) {
|
||||
return []
|
||||
}
|
||||
let list = this.briefData?.history?.map(item => {
|
||||
return {
|
||||
x: item.createDate,
|
||||
value: item.totalDevice
|
||||
}
|
||||
});
|
||||
list.push({
|
||||
x: this.today,
|
||||
value: this.briefData.deviceCount,
|
||||
})
|
||||
return list;
|
||||
return this.parseToChart('deviceCount', 'totalDevice');
|
||||
},
|
||||
// 用户图表数据
|
||||
peopleChartData() {
|
||||
|
|
@ -190,37 +197,6 @@ export default {
|
|||
{value: this.briefData.tenantCount, name: "用户"}
|
||||
]
|
||||
},
|
||||
// 设备差值
|
||||
compareDevice() {
|
||||
if (this.briefData == null) {
|
||||
return 0;
|
||||
}
|
||||
console.log(this.yesterdayData);
|
||||
if (this.yesterdayData == null) {
|
||||
return this.briefData.deviceCount;
|
||||
}
|
||||
return this.briefData.deviceCount - this.yesterdayData.totalDevice;
|
||||
},
|
||||
// 型号差值
|
||||
compareModel() {
|
||||
if (this.briefData == null) {
|
||||
return 0;
|
||||
}
|
||||
if (this.yesterdayData == null) {
|
||||
return this.briefData.modelCount;
|
||||
}
|
||||
return this.briefData.modelCount - this.yesterdayData.totalModel;
|
||||
},
|
||||
// 充值差值
|
||||
compareOnline() {
|
||||
if (this.briefData == null) {
|
||||
return 0;
|
||||
}
|
||||
if (this.yesterdayData == null) {
|
||||
return this.briefData.onlineCount;
|
||||
}
|
||||
return this.briefData.onlineCount - this.yesterdayData.totalOnline;
|
||||
},
|
||||
// 用户差值
|
||||
compareUser() {
|
||||
if (this.briefData == null) {
|
||||
|
|
@ -231,11 +207,37 @@ export default {
|
|||
}
|
||||
return this.briefData.userCount + this.briefData.tenantCount - this.yesterdayData.totalUser;
|
||||
},
|
||||
// 余额差值
|
||||
compareBalance() {
|
||||
if (this.briefData == null) {
|
||||
return 0;
|
||||
}
|
||||
if (this.yesterdayData == null) {
|
||||
return this.briefData.totalUserBalance;
|
||||
}
|
||||
return this.briefData.totalUserBalance - this.yesterdayData.userBalance;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getBriefData();
|
||||
},
|
||||
methods: {
|
||||
parseToChart(currentProp, historyProp, fixed = 0) {
|
||||
if (this.briefData == null) {
|
||||
return []
|
||||
}
|
||||
let list = this.briefData?.history?.map(item => {
|
||||
return {
|
||||
x: item.createDate,
|
||||
value: item[historyProp]?.toFixed(fixed)
|
||||
}
|
||||
});
|
||||
list.push({
|
||||
x: this.today,
|
||||
value: this.briefData[currentProp]?.toFixed(fixed)
|
||||
})
|
||||
return list;
|
||||
},
|
||||
handleSetLineChartData(type) {
|
||||
this.$emit('handleSetLineChartData', type)
|
||||
},
|
||||
|
|
@ -333,6 +335,12 @@ export default {
|
|||
.panel-device {
|
||||
background: linear-gradient(180deg, #F2F9FE -3%, #E6F4FE 100%);
|
||||
}
|
||||
.panel-yellow {
|
||||
background: linear-gradient(180deg, #fefaf2 -3%, #fef4e6 100%);
|
||||
}
|
||||
.panel-red {
|
||||
background: linear-gradient(180deg, #fef2f7 -3%, #ffeef1 100%);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
109
src/views/dashboard/component/SmallLineChart.vue
Normal file
109
src/views/dashboard/component/SmallLineChart.vue
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
<template>
|
||||
<div :class="className" :style="{height:height,width:width}" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import resize from "@/views/dashboard/mixins/resize";
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
className: {
|
||||
type: String,
|
||||
default: 'chart'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
autoResize: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#165DFF'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
deep: true,
|
||||
handler(val) {
|
||||
this.setOptions(val)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$el, 'macarons')
|
||||
this.setOptions(this.data)
|
||||
},
|
||||
setOptions(data) {
|
||||
let option = {
|
||||
grid: {
|
||||
top: 4,
|
||||
left: 4,
|
||||
right: 4,
|
||||
bottom: 4,
|
||||
show: false,
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
show: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
show: false,
|
||||
data: data.map(item => item.x)
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
type: 'value',
|
||||
min: 'dataMin',
|
||||
max: 'dataMax',
|
||||
},
|
||||
series: [{
|
||||
name: this.name,
|
||||
color: this.color,
|
||||
data: data.map(item => item.value),
|
||||
type: 'line',
|
||||
smooth: true
|
||||
}]
|
||||
};
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
122
src/views/dashboard/component/TodoList.vue
Normal file
122
src/views/dashboard/component/TodoList.vue
Normal file
|
|
@ -0,0 +1,122 @@
|
|||
<template>
|
||||
<div class="todo-list" v-loading="loading">
|
||||
<div class="todo-item" @click="$router.push('/mch/mchApply?status=0')">
|
||||
<div class="label"><svg-icon icon-class="apply"/> 商家合作申请</div>
|
||||
<div class="value">
|
||||
<count-to :start-val="0" :end-val="data.mchApplyCount" :duration="3000"/>
|
||||
</div>
|
||||
<div class="unit">条</div>
|
||||
</div>
|
||||
<div class="todo-item" @click="$router.push('/mch/storeApply?status=1')">
|
||||
<div class="label"><svg-icon icon-class="store"/> 店铺审核</div>
|
||||
<div class="value">
|
||||
<count-to :start-val="0" :end-val="data.storeApplyCount" :duration="3000"/>
|
||||
</div>
|
||||
<div class="unit">条</div>
|
||||
</div>
|
||||
<div class="todo-item" @click="$router.push('/money/withdraw?status=11')">
|
||||
<div class="label"><svg-icon icon-class="withdraw"/> 提现申请</div>
|
||||
<div class="value">
|
||||
<count-to :start-val="0" :end-val="data.withdrawCount" :duration="3000"/>
|
||||
</div>
|
||||
<div class="unit">条</div>
|
||||
</div>
|
||||
<div class="todo-item" @click="$router.push('/smDevice/device?isArrears=1')">
|
||||
<div class="label"><svg-icon icon-class="monitor"/> 设备到期</div>
|
||||
<div class="value">
|
||||
<count-to :start-val="0" :end-val="data.arrearsDeviceCount" :duration="3000"/>
|
||||
</div>
|
||||
<div class="unit">台</div>
|
||||
</div>
|
||||
<div class="todo-item" @click="$router.push('/complaint/abnormal?status=1')">
|
||||
<div class="label"><svg-icon icon-class="bug"/> 设备故障</div>
|
||||
<div class="value">
|
||||
<count-to :start-val="0" :end-val="data.abnormalCount" :duration="3000"/>
|
||||
</div>
|
||||
<div class="unit">条</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CountTo from 'vue-count-to'
|
||||
import { getTodoList } from '@/api/system/dashboard'
|
||||
|
||||
export default {
|
||||
name: 'TodoList',
|
||||
components: {
|
||||
CountTo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
data: {
|
||||
withdrawCount: 0,
|
||||
mchApplyCount: 0,
|
||||
storeApplyCount: 0,
|
||||
abnormalCount: 0,
|
||||
arrearsDeviceCount: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getData();
|
||||
},
|
||||
methods: {
|
||||
getData() {
|
||||
this.loading = true;
|
||||
getTodoList().then(res => {
|
||||
this.data = res.data;
|
||||
}).finally(() => {
|
||||
this.loading = false;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.todo-list {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 292px;
|
||||
overflow: auto;
|
||||
}
|
||||
.todo-item {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
transition: .25s;
|
||||
padding: 0.8em 1em;
|
||||
cursor: pointer;
|
||||
border-radius: 16px;
|
||||
vertical-align: bottom;
|
||||
background: #fff;
|
||||
.value {
|
||||
display: inline-block;
|
||||
width: fit-content;
|
||||
margin-left: 1em;
|
||||
color: #165DFF;
|
||||
font-size: 20px;
|
||||
}
|
||||
.label {
|
||||
display: inline-block;
|
||||
color: #1D252F;
|
||||
flex: 1;
|
||||
.svg-icon {
|
||||
color: #165DFF;
|
||||
}
|
||||
}
|
||||
.unit {
|
||||
display: inline-block;
|
||||
margin-left: 0.5em;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.todo-item:hover {
|
||||
background: linear-gradient(180deg, #F2F9FE -3%, #E6F4FE 100%);
|
||||
}
|
||||
.todo-item:nth-child(n + 2) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,17 +1,26 @@
|
|||
<template>
|
||||
<div class="dashboard-editor-container">
|
||||
<template v-if="userType === UserType.ADMIN">
|
||||
<el-card header="舆情分析" class="card-box">
|
||||
<brief />
|
||||
</el-card>
|
||||
<el-row :gutter="12">
|
||||
<el-col :xs="24" :lg="18">
|
||||
<el-card class="card-box">
|
||||
<brief />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :xs="24" :lg="6">
|
||||
<el-card header="待办事项" class="card-box">
|
||||
<todo-list/>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="8">
|
||||
<el-col :span="12">
|
||||
<el-col :lg="12" :xs="24">
|
||||
<el-card header="每日充值提现" class="card-box">
|
||||
<daily-bill-report />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-col :lg="12" :xs="24">
|
||||
<el-card header="每日充值利润" class="card-box">
|
||||
<daily-profit-report />
|
||||
</el-card>
|
||||
|
|
@ -33,10 +42,12 @@ import Brief from "@/views/dashboard/Brief.vue";
|
|||
import DailyProfitReport from "@/views/dashboard/DailyProfitReport.vue";
|
||||
import { mapGetters } from 'vuex'
|
||||
import { UserType } from '@/utils/constants'
|
||||
import TodoList from '@/views/dashboard/component/TodoList.vue'
|
||||
|
||||
export default {
|
||||
name: 'Index',
|
||||
components: {
|
||||
TodoList,
|
||||
DailyProfitReport,
|
||||
Brief,
|
||||
BalancePeriodReport,
|
||||
|
|
|
|||
|
|
@ -9,6 +9,16 @@
|
|||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="status">
|
||||
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable @change="handleQuery">
|
||||
<el-option
|
||||
v-for="dict in dict.type.ss_abnormal_status"
|
||||
:key="dict.value"
|
||||
:label="dict.label"
|
||||
:value="dict.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
|
|
@ -171,6 +181,10 @@ export default {
|
|||
};
|
||||
},
|
||||
created() {
|
||||
this.queryParams = {
|
||||
...this.queryParams,
|
||||
...this.$route.query
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -218,6 +218,10 @@ export default {
|
|||
};
|
||||
},
|
||||
created() {
|
||||
this.queryParams = {
|
||||
...this.queryParams,
|
||||
...this.$route.query
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -292,6 +292,7 @@ export default {
|
|||
created() {
|
||||
this.queryParams = {
|
||||
...this.queryParams,
|
||||
...this.$route.query,
|
||||
...this.query
|
||||
}
|
||||
this.getList();
|
||||
|
|
|
|||
|
|
@ -69,6 +69,12 @@
|
|||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否到期" prop="isArrears">
|
||||
<el-select v-model="queryParams.isArrears" placeholder="请选择是否到期" clearable @change="handleQuery">
|
||||
<el-option value="1" label="已到期"/>
|
||||
<el-option value="0" label="未到期"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
||||
|
|
@ -147,7 +153,7 @@
|
|||
<el-table-column label="设备Mac" align="center" prop="mac" min-width="100">
|
||||
<device-link slot-scope="d" :text="d.row.mac" :id="d.row.deviceId"/>
|
||||
</el-table-column>
|
||||
<el-table-column label="设备SN" align="center" prop="deviceNo" min-width="60">
|
||||
<el-table-column label="设备SN" align="center" prop="deviceNo" min-width="100">
|
||||
<template slot-scope="d">
|
||||
<el-link type="danger" v-if="d.row.deviceNo == null" @click="handleBindSn(d.row)">点击绑定</el-link>
|
||||
<device-link v-else :text="d.row.deviceNo" :id="d.row.deviceId"/>
|
||||
|
|
@ -184,6 +190,7 @@
|
|||
</el-table-column>
|
||||
<el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180"/>
|
||||
<el-table-column label="到期时间" align="center" prop="rentTime" width="180"/>
|
||||
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
|
|
@ -377,6 +384,7 @@ export default {
|
|||
status: null,
|
||||
userName: null,
|
||||
tenantName: null,
|
||||
isArrears: null
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
|
|
@ -411,6 +419,10 @@ export default {
|
|||
},
|
||||
},
|
||||
created() {
|
||||
this.queryParams = {
|
||||
...this.queryParams,
|
||||
...this.$route.query
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
|
|
@ -228,6 +228,10 @@ export default {
|
|||
};
|
||||
},
|
||||
created() {
|
||||
this.queryParams = {
|
||||
...this.queryParams,
|
||||
...this.$route.query
|
||||
}
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user