详情修改
This commit is contained in:
parent
fa9253b078
commit
b989fca1df
|
|
@ -6,7 +6,7 @@ ENV = 'development'
|
|||
|
||||
# 共享空间/开发环境
|
||||
# VUE_APP_BASE_API = 'https://testcha.chuangtewl.com/prod-api'
|
||||
VUE_APP_BASE_API = 'http://192.168.2.43:8089'
|
||||
VUE_APP_BASE_API = 'http://192.168.2.63:8089'
|
||||
|
||||
# 路由懒加载
|
||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||
|
|
|
|||
|
|
@ -154,4 +154,13 @@ export function placementDevice(data){
|
|||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 设备绑定商户
|
||||
export function bindMch(deviceId,mchId){
|
||||
return request({
|
||||
url: '/system/device/'+deviceId+'/bindMch?mchId='+mchId,
|
||||
method: 'put'
|
||||
})
|
||||
}
|
||||
198
src/components/Charts/LineChart.vue
Normal file
198
src/components/Charts/LineChart.vue
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
<template>
|
||||
<div ref="chart" :style="{ width: '100%', height: height }"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
import { debounce } from 'lodash'
|
||||
|
||||
export default {
|
||||
name: 'LineChart',
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '350px'
|
||||
},
|
||||
showHours: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
yAxisInterval: {
|
||||
type: Number,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
this.__resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
window.addEventListener('resize', this.__resizeHandler)
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
window.removeEventListener('resize', this.__resizeHandler)
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: 'rgba(50, 50, 50, 0.9)',
|
||||
borderWidth: 0,
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'line',
|
||||
lineStyle: {
|
||||
color: '#ddd'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: this.data.datasets.map(item => item.label),
|
||||
bottom: 0,
|
||||
icon: 'circle',
|
||||
itemWidth: 8,
|
||||
itemHeight: 8,
|
||||
itemGap: 15,
|
||||
textStyle: {
|
||||
color: '#666'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '15%',
|
||||
top: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.data.labels,
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#eee'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666',
|
||||
formatter: (value) => {
|
||||
if (this.showHours) {
|
||||
return value
|
||||
}
|
||||
return value.substring(5) // 只显示月-日
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: '#eee'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#666',
|
||||
formatter: (value) => {
|
||||
if (value >= 1000) {
|
||||
return (value / 1000) + 'k'
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
interval: this.yAxisInterval
|
||||
},
|
||||
series: this.data.datasets.map(dataset => ({
|
||||
name: dataset.label,
|
||||
type: 'line',
|
||||
data: dataset.data,
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 8,
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
scale: false,
|
||||
itemStyle: {
|
||||
symbolSize: 8
|
||||
}
|
||||
},
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: dataset.color
|
||||
},
|
||||
itemStyle: {
|
||||
color: dataset.color,
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: this.adjustColor(dataset.color, 0.3)
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: this.adjustColor(dataset.color, 0.1)
|
||||
}
|
||||
])
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
this.chart.setOption(option)
|
||||
},
|
||||
adjustColor(color, opacity) {
|
||||
// 将十六进制颜色转换为 rgba
|
||||
if (color.startsWith('#')) {
|
||||
const r = parseInt(color.slice(1, 3), 16)
|
||||
const g = parseInt(color.slice(3, 5), 16)
|
||||
const b = parseInt(color.slice(5, 7), 16)
|
||||
return `rgba(${r}, ${g}, ${b}, ${opacity})`
|
||||
}
|
||||
// 如果已经是 rgba 格式，直接返回
|
||||
return color
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler() {
|
||||
this.setOptions()
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,81 +1,144 @@
|
|||
<template>
|
||||
<div class="mini-line" ref="chart"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'MiniLine',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#409EFF'
|
||||
}
|
||||
<div ref="chart" :style="{ width: '100%', height: '100%' }"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
|
||||
export default {
|
||||
name: 'MiniLine',
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
color: {
|
||||
type: String,
|
||||
default: '#409EFF'
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
prefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
suffix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
tooltipFormatter: {
|
||||
type: Function,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initChart()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'none'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
show: false,
|
||||
boundaryGap: false
|
||||
backgroundColor: 'rgba(50, 50, 50, 0.8)',
|
||||
borderWidth: 0,
|
||||
padding: [5, 10],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontSize: 12
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false
|
||||
},
|
||||
series: [{
|
||||
type: 'line',
|
||||
data: this.data,
|
||||
smooth: true,
|
||||
symbol: 'none',
|
||||
lineStyle: {
|
||||
color: this.color,
|
||||
width: 1
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: this.color
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#fff'
|
||||
}]),
|
||||
opacity: 0.2
|
||||
formatter: (params) => {
|
||||
if (this.tooltipFormatter) {
|
||||
return this.tooltipFormatter(params[0]);
|
||||
}
|
||||
return params[0].value;
|
||||
},
|
||||
position: function (pos, params, el, elRect, size) {
|
||||
// 将 tooltip 固定在数据点上方
|
||||
return {
|
||||
top: pos[1] - 40,
|
||||
left: pos[0] - 50
|
||||
};
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
bottom: 0
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
show: false,
|
||||
boundaryGap: false
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
show: false
|
||||
},
|
||||
series: [{
|
||||
data: this.data,
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 6,
|
||||
showSymbol: false,
|
||||
emphasis: {
|
||||
scale: false,
|
||||
focus: 'series'
|
||||
},
|
||||
lineStyle: {
|
||||
color: this.color,
|
||||
width: 2
|
||||
},
|
||||
itemStyle: {
|
||||
color: this.color,
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||
offset: 0,
|
||||
color: this.color
|
||||
}, {
|
||||
offset: 1,
|
||||
color: 'rgba(255, 255, 255, 0)'
|
||||
}])
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
handler(newValue) {
|
||||
this.chart && this.chart.setOption({
|
||||
series: [{
|
||||
data: newValue
|
||||
}]
|
||||
}
|
||||
|
||||
this.chart.setOption(option)
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.chart) {
|
||||
this.chart.dispose()
|
||||
}
|
||||
})
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.mini-line {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,95 +1,521 @@
|
|||
<template>
|
||||
<div class="app-container" v-loading="loading">
|
||||
<template>
|
||||
<!-- 统计卡片行 -->
|
||||
<el-row :gutter="20" class="statistics-cards">
|
||||
<el-col :span="6" v-for="(stat, index) in statisticsData" :key="index">
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<span class="stat-title">{{ stat.label }}</span>
|
||||
<el-tooltip v-if="stat.tip" :content="stat.tip" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
<!-- 统计卡片行 -->
|
||||
<el-row :gutter="20" class="statistics-cards">
|
||||
<el-col :span="4" v-for="(stat, index) in statisticsData" :key="index">
|
||||
<div class="stat-card" :style="{ '--bg-color': stat.bgColor }">
|
||||
<div class="stat-header">
|
||||
<i :class="stat.icon" :style="{ color: stat.chartColor }"></i>
|
||||
<span class="stat-title">{{ stat.label }}</span>
|
||||
<el-tooltip v-if="stat.tip" :content="stat.tip" placement="top">
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="stat-body">
|
||||
<div class="stat-value">
|
||||
<template v-if="stat.isMoney">¥ {{ formatNumber(mockDetail[stat.field]) }}</template>
|
||||
<template v-else>{{ mockDetail[stat.field] || '0' }}{{ stat.suffix }}</template>
|
||||
</div>
|
||||
<div class="stat-body">
|
||||
<div class="stat-value">
|
||||
<template v-if="stat.isMoney">¥ {{ detail[stat.field] || '0.00' }}</template>
|
||||
<template v-else>{{ detail[stat.field] || '0' }}</template>
|
||||
</div>
|
||||
<div class="stat-trend" v-if="stat.today !== undefined">
|
||||
今日
|
||||
<span :class="['trend-value', stat.today > 0 ? 'up' : 'down']">
|
||||
{{ stat.today }}
|
||||
<i :class="stat.today > 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-chart" v-if="stat.chartData">
|
||||
<mini-line :data="stat.chartData" :color="stat.chartColor" />
|
||||
<div class="stat-trend" v-if="stat.today !== undefined">
|
||||
今日
|
||||
<span :class="['trend-value', stat.today > 0 ? 'up' : 'down']">
|
||||
<template v-if="stat.isMoney">¥ {{ formatNumber(Math.abs(stat.today)) }}</template>
|
||||
<template v-else>{{ Math.abs(stat.today) }}</template>
|
||||
<i :class="stat.today > 0 ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div class="stat-chart" v-if="stat.chartData">
|
||||
<mini-line
|
||||
:data="stat.chartData"
|
||||
:color="stat.chartColor"
|
||||
:title="stat.label"
|
||||
:prefix="stat.isMoney ? '¥ ' : ''"
|
||||
:suffix="stat.suffix || ''"
|
||||
:tooltip-formatter="(data) => formatTooltip(data, stat)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 其他内容保持不变 -->
|
||||
</template>
|
||||
<!-- 第二行：待办事项和图表 -->
|
||||
<el-row :gutter="20" class="dashboard-content">
|
||||
<!-- 待办事项 -->
|
||||
<el-col :span="6">
|
||||
<el-card class="todo-card" shadow="never">
|
||||
<div slot="header">
|
||||
<span>待办事项</span>
|
||||
</div>
|
||||
<div class="todo-list">
|
||||
<div v-for="(item, index) in todoItems" :key="index" class="todo-item">
|
||||
<div class="item-left">
|
||||
<i :class="item.icon" :style="{color: item.color}"></i>
|
||||
<span>{{ item.title }}</span>
|
||||
</div>
|
||||
<div class="item-right">
|
||||
<span :style="{color: item.count > 0 ? '#409EFF' : '#909399'}">{{ item.count }}</span>
|
||||
<span>条</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 支付对账 -->
|
||||
<el-col :span="9">
|
||||
<el-card class="chart-card" shadow="never">
|
||||
<div slot="header">
|
||||
<span>支付对账</span>
|
||||
<el-date-picker
|
||||
v-model="paymentDateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
size="small"
|
||||
:picker-options="pickerOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<line-chart :data="paymentChartData" height="300px" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 收入及成本 -->
|
||||
<el-col :span="9">
|
||||
<el-card class="chart-card" shadow="never">
|
||||
<div slot="header">
|
||||
<span>收入及成本</span>
|
||||
<el-date-picker
|
||||
v-model="incomeDateRange"
|
||||
type="daterange"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
size="small"
|
||||
:picker-options="pickerOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<line-chart :data="incomeChartData" height="300px" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第三行：每日充值提现 -->
|
||||
<el-row :gutter="20" class="dashboard-content">
|
||||
<el-col :span="24">
|
||||
<el-card class="chart-card" shadow="never">
|
||||
<div slot="header">
|
||||
<span>每日充值提现</span>
|
||||
<el-date-picker
|
||||
v-model="dailyTransactionDate"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
size="small"
|
||||
:picker-options="pickerOptions"
|
||||
/>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<line-chart
|
||||
:data="dailyTransactionData"
|
||||
height="300px"
|
||||
:y-axis-interval="100"
|
||||
:show-hours="true"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第四行：店铺地图分布 -->
|
||||
<el-row :gutter="20" class="dashboard-content">
|
||||
<el-col :span="24">
|
||||
<el-card class="map-card" shadow="never">
|
||||
<div slot="header">
|
||||
<span>店铺分布</span>
|
||||
</div>
|
||||
<div class="map-container" id="storeMap"></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// ... 其他 import 保持不变 ...
|
||||
import MiniLine from '@/components/Charts/MiniLine' // 需要创建这个迷你折线图组件
|
||||
import MiniLine from '@/components/Charts/MiniLine'
|
||||
import LineChart from '@/components/Charts/LineChart'
|
||||
import AMapLoader from "@amap/amap-jsapi-loader"
|
||||
import globalConfig from '@/utils/config/globalConfig'
|
||||
|
||||
export default {
|
||||
name: 'Dashboard',
|
||||
components: {
|
||||
// ... 其他组件保持不变 ...
|
||||
MiniLine
|
||||
MiniLine,
|
||||
LineChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// ... 其他 data 保持不变 ...
|
||||
loading: false,
|
||||
map: null,
|
||||
markers: [],
|
||||
mockDetail: {
|
||||
deviceCount: 2576,
|
||||
orderCount: 52829,
|
||||
balance: 15680.50,
|
||||
totalIncome: 807357.19,
|
||||
userDeviceCount: 1360,
|
||||
merchantBalance: 57721.81
|
||||
},
|
||||
// 统计卡片数据
|
||||
statisticsData: [
|
||||
{
|
||||
label: '设备总数',
|
||||
field: 'deviceCount',
|
||||
today: 255,
|
||||
chartData: [120, 132, 101, 134, 90, 230, 210],
|
||||
icon: 'el-icon-monitor',
|
||||
chartColor: '#409EFF',
|
||||
tip: '系统中的所有设备数量'
|
||||
bgColor: '#ECF5FF',
|
||||
today: 96,
|
||||
chartData: [2200, 2300, 2400, 2500, 2576]
|
||||
},
|
||||
{
|
||||
label: '订单总数',
|
||||
field: 'orderCount',
|
||||
today: 77,
|
||||
chartData: [220, 182, 191, 234, 290, 330, 310],
|
||||
today: 96,
|
||||
chartData: [51220, 51382, 51591, 51834, 52290, 52733, 52829],
|
||||
chartColor: '#67C23A',
|
||||
tip: '系统中的所有订单数量'
|
||||
tip: '系统中的所有订单数量',
|
||||
icon: 'el-icon-s-order',
|
||||
bgColor: 'rgba(103, 194, 58, 0.1)',
|
||||
suffix: ' 单'
|
||||
},
|
||||
{
|
||||
label: '账户余额',
|
||||
field: 'balance',
|
||||
isMoney: true,
|
||||
chartData: [150, 232, 201, 154, 190, 330, 410],
|
||||
chartColor: '#E6A23C'
|
||||
today: 1471.60,
|
||||
chartData: [15150, 15232, 15401, 15454, 15590, 15630, 15680.50],
|
||||
chartColor: '#E6A23C',
|
||||
icon: 'el-icon-wallet',
|
||||
bgColor: 'rgba(230, 162, 60, 0.1)'
|
||||
},
|
||||
{
|
||||
label: '总收入',
|
||||
label: '订单金额',
|
||||
field: 'totalIncome',
|
||||
isMoney: true,
|
||||
chartData: [320, 332, 301, 334, 390, 330, 320],
|
||||
chartColor: '#F56C6C'
|
||||
today: 1471.60,
|
||||
chartData: [801320, 802332, 803301, 804334, 805390, 805885.59, 807357.19],
|
||||
chartColor: '#F56C6C',
|
||||
icon: 'el-icon-money',
|
||||
bgColor: 'rgba(245, 108, 108, 0.1)'
|
||||
},
|
||||
{
|
||||
label: '用户设备数',
|
||||
field: 'userDeviceCount',
|
||||
today: 15,
|
||||
chartData: [1220, 1282, 1291, 1334, 1345, 1345, 1360],
|
||||
chartColor: '#909399',
|
||||
tip: '用户持有的设备总数',
|
||||
icon: 'el-icon-mobile',
|
||||
bgColor: 'rgba(144, 147, 153, 0.1)',
|
||||
suffix: ' 台'
|
||||
},
|
||||
{
|
||||
label: '商户余额',
|
||||
field: 'merchantBalance',
|
||||
isMoney: true,
|
||||
today: 366.51,
|
||||
chartData: [55150, 55232, 56201, 56454, 56990, 57355.30, 57721.81],
|
||||
chartColor: '#9B59B6',
|
||||
tip: '商户账户当前余额',
|
||||
icon: 'el-icon-bank-card',
|
||||
bgColor: 'rgba(155, 89, 182, 0.1)'
|
||||
}
|
||||
],
|
||||
// 待办事项数据
|
||||
todoItems: [
|
||||
{
|
||||
icon: 'el-icon-s-shop',
|
||||
title: '商家加盟',
|
||||
count: 0,
|
||||
color: '#409EFF'
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-money',
|
||||
title: '提现申请',
|
||||
count: 0,
|
||||
color: '#67C23A'
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-warning',
|
||||
title: '风控审核',
|
||||
count: 0,
|
||||
color: '#E6A23C'
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-monitor',
|
||||
title: '到期设备',
|
||||
count: 2576,
|
||||
color: '#F56C6C'
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-s-shop',
|
||||
title: '店铺审核',
|
||||
count: 2,
|
||||
color: '#909399'
|
||||
},
|
||||
{
|
||||
icon: 'el-icon-warning-outline',
|
||||
title: '待处理故障信息',
|
||||
count: 37,
|
||||
color: '#F56C6C'
|
||||
}
|
||||
],
|
||||
// 日期选择器配置
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
},
|
||||
{
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date()
|
||||
const start = new Date()
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
|
||||
picker.$emit('pick', [start, end])
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// 支付对账数据
|
||||
paymentDateRange: [new Date('2025-01-04'), new Date('2025-01-10')],
|
||||
paymentChartData: {
|
||||
labels: ['01-04', '01-05', '01-06', '01-07', '01-08', '01-09', '01-10'],
|
||||
datasets: [
|
||||
{
|
||||
label: '支付金额',
|
||||
data: [10000, 9500, 8000, 7500, 9000, 8500, 2000],
|
||||
color: '#409EFF'
|
||||
},
|
||||
{
|
||||
label: '退款金额',
|
||||
data: [2000, 1500, 2000, 1000, 1200, 1000, 800],
|
||||
color: '#67C23A'
|
||||
},
|
||||
{
|
||||
label: '实收金额',
|
||||
data: [8000, 8000, 6000, 6500, 7800, 7500, 1200],
|
||||
color: '#E6A23C'
|
||||
}
|
||||
]
|
||||
},
|
||||
// 收入及成本数据
|
||||
incomeDateRange: [new Date('2025-01-04'), new Date('2025-01-10')],
|
||||
incomeChartData: {
|
||||
labels: ['01-04', '01-05', '01-06', '01-07', '01-08', '01-09', '01-10'],
|
||||
datasets: [
|
||||
{
|
||||
label: '订单服务费收入',
|
||||
data: [100, 95, 85, 75, 90, 85, 20],
|
||||
color: '#409EFF'
|
||||
},
|
||||
{
|
||||
label: '提现服务费收入',
|
||||
data: [40, 45, 40, 35, 20, 15, 10],
|
||||
color: '#67C23A'
|
||||
},
|
||||
{
|
||||
label: '月租收入',
|
||||
data: [20, 18, 16, 14, 12, 10, 8],
|
||||
color: '#E6A23C'
|
||||
},
|
||||
{
|
||||
label: '订单手机号收入',
|
||||
data: [10, 8, 6, 4, 2, 0, 0],
|
||||
color: '#F56C6C'
|
||||
},
|
||||
{
|
||||
label: '运营成本',
|
||||
data: [25, 20, 15, 18, 20, 22, 15],
|
||||
color: '#909399'
|
||||
}
|
||||
]
|
||||
},
|
||||
// 每日充值提现数据
|
||||
dailyTransactionDate: new Date('2025-01-10'),
|
||||
dailyTransactionData: {
|
||||
labels: ['0:00', '2:00', '4:00', '6:00', '8:00', '10:00', '12:00',
|
||||
'14:00', '16:00', '18:00', '20:00', '22:00'],
|
||||
datasets: [
|
||||
{
|
||||
label: '充值 (元)',
|
||||
data: [250, 420, 450, 450, 450, 480, 30, 0, 0, 0, 0, 0],
|
||||
color: '#409EFF'
|
||||
},
|
||||
{
|
||||
label: '提现 (元)',
|
||||
data: [220, 0, 0, 0, 0, 180, 0, 0, 0, 0, 0, 0],
|
||||
color: '#67C23A'
|
||||
}
|
||||
]
|
||||
},
|
||||
// 店铺位置数据
|
||||
storeLocations: [
|
||||
{ id: 1, name: '测试店铺1', address: '北京市朝阳区', lng: 116.481488, lat: 39.990464, status: 1 },
|
||||
{ id: 2, name: '测试店铺2', address: '北京市海淀区', lng: 116.310316, lat: 39.991228, status: 1 },
|
||||
{ id: 3, name: '测试店铺3', address: '北京市西城区', lng: 116.366794, lat: 39.915309, status: 2 }
|
||||
]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initMap()
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.map) {
|
||||
this.map.destroy()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
formatNumber(num) {
|
||||
return num.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
||||
},
|
||||
formatTooltip(data, stat) {
|
||||
const date = new Date()
|
||||
const day = date.getDate() - (6 - data.dataIndex)
|
||||
const month = date.getMonth() + 1
|
||||
const year = date.getFullYear()
|
||||
const formattedDate = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
|
||||
|
||||
let value = data.value
|
||||
if (stat.isMoney) {
|
||||
value = '¥ ' + this.formatNumber(value)
|
||||
}
|
||||
if (stat.suffix) {
|
||||
value += stat.suffix
|
||||
}
|
||||
|
||||
return `
|
||||
<div style="text-align: center;">
|
||||
<div style="color: rgba(255, 255, 255, 0.8); font-size: 12px; margin-bottom: 4px;">
|
||||
${formattedDate}
|
||||
</div>
|
||||
<div style="color: #fff; font-size: 14px;">
|
||||
${stat.label} ${value}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
},
|
||||
async initMap() {
|
||||
try {
|
||||
await AMapLoader.load({
|
||||
key: globalConfig.aMap.key,
|
||||
version: "2.0",
|
||||
plugins: [
|
||||
"AMap.ToolBar",
|
||||
"AMap.Scale",
|
||||
"AMap.HeatMap",
|
||||
"AMap.MarkerCluster"
|
||||
],
|
||||
});
|
||||
|
||||
this.map = new AMap.Map('storeMap', {
|
||||
zoom: 11,
|
||||
center: [116.397428, 39.90923],
|
||||
viewMode: '3D'
|
||||
});
|
||||
|
||||
// 添加工具条和比例尺
|
||||
this.map.addControl(new AMap.ToolBar({
|
||||
position: 'RB'
|
||||
}));
|
||||
this.map.addControl(new AMap.Scale());
|
||||
|
||||
// 添加店铺标记
|
||||
this.addStoreMarkers();
|
||||
|
||||
} catch (e) {
|
||||
console.error('地图初始化失败:', e);
|
||||
}
|
||||
},
|
||||
|
||||
addStoreMarkers() {
|
||||
// 清除现有标记
|
||||
this.markers.forEach(marker => marker.remove());
|
||||
this.markers = [];
|
||||
|
||||
// 添加新标记
|
||||
this.storeLocations.forEach(store => {
|
||||
const markerContent = document.createElement('div');
|
||||
markerContent.className = 'custom-marker';
|
||||
markerContent.innerHTML = `<i class="${this.getMarkerIcon(store.status)}"></i>`;
|
||||
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(store.lng, store.lat),
|
||||
title: store.name,
|
||||
content: markerContent
|
||||
});
|
||||
|
||||
const infoWindow = new AMap.InfoWindow({
|
||||
content: `
|
||||
<div class="map-info-window">
|
||||
<h4>${store.name}</h4>
|
||||
<p>${store.address}</p>
|
||||
<p>状态: ${this.getStatusText(store.status)}</p>
|
||||
</div>
|
||||
`,
|
||||
offset: new AMap.Pixel(0, -30)
|
||||
});
|
||||
|
||||
marker.on('click', () => {
|
||||
infoWindow.open(this.map, marker.getPosition());
|
||||
});
|
||||
|
||||
this.markers.push(marker);
|
||||
});
|
||||
|
||||
// 将所有标记添加到地图
|
||||
this.map.add(this.markers);
|
||||
|
||||
// 调整视图以包含所有标记
|
||||
if (this.markers.length > 0) {
|
||||
this.map.setFitView();
|
||||
}
|
||||
},
|
||||
getMarkerIcon(status) {
|
||||
// 使用 Element UI 的图标
|
||||
switch (status) {
|
||||
case 1:
|
||||
return 'el-icon-s-shop';
|
||||
case 2:
|
||||
return 'el-icon-warning';
|
||||
default:
|
||||
return 'el-icon-s-shop';
|
||||
}
|
||||
},
|
||||
|
||||
getStatusText(status) {
|
||||
const statusMap = {
|
||||
1: '正常营业',
|
||||
2: '暂停营业'
|
||||
};
|
||||
return statusMap[status] || '未知状态';
|
||||
}
|
||||
}
|
||||
// ... 其他方法保持不变 ...
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.statistics-cards {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.stat-card {
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
|
|
@ -99,10 +525,28 @@ export default {
|
|||
overflow: hidden;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--bg-color);
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.stat-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
i:first-child {
|
||||
font-size: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
font-size: 14px;
|
||||
|
|
@ -117,6 +561,9 @@ export default {
|
|||
}
|
||||
|
||||
.stat-body {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
|
|
@ -152,7 +599,103 @@ export default {
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-content {
|
||||
margin-top: 20px;
|
||||
|
||||
.todo-card {
|
||||
height: 400px;
|
||||
|
||||
.todo-list {
|
||||
.todo-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
i {
|
||||
font-size: 16px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.item-right {
|
||||
color: #909399;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chart-card {
|
||||
height: 400px;
|
||||
|
||||
:deep(.el-card__header) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.map-card {
|
||||
height: 500px;
|
||||
|
||||
.map-container {
|
||||
width: 100%;
|
||||
height: 420px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-card__header) {
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.el-card__body) {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
:deep(.map-info-window) {
|
||||
padding: 8px 12px;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 8px;
|
||||
font-size: 16px;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 4px 0;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.echarts-tooltip) {
|
||||
background: #fff !important;
|
||||
border: 1px solid #eee !important;
|
||||
border-radius: 4px !important;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -386,7 +386,8 @@ import {
|
|||
bindDeviceUser,
|
||||
deviceSwitch,
|
||||
rebootDevice,
|
||||
offlineDevice
|
||||
offlineDevice,
|
||||
bindMch
|
||||
} from '@/api/system/device'
|
||||
import { listUser } from "@/api/user/user"
|
||||
import { listData } from '@/api/system/dict/data'
|
||||
|
|
@ -661,15 +662,6 @@ export default {
|
|||
this.getFacilityList()
|
||||
},
|
||||
|
||||
// getFacilityList() {
|
||||
// this.facilityTableLoading = true
|
||||
// listEquipment(this.facilityQueryParams).then(response => {
|
||||
// this.facilityList = response.rows || []
|
||||
// this.facilityTotal = response.total || 0
|
||||
// this.facilityTableLoading = false
|
||||
// })
|
||||
// },
|
||||
|
||||
handleBindFacility(row) {
|
||||
placementDevice({
|
||||
deviceId: this.deviceData.deviceId,
|
||||
|
|
@ -731,27 +723,20 @@ export default {
|
|||
this.handleUserQuery();
|
||||
},
|
||||
handleBindUser(row) {
|
||||
this.$modal.confirm('确认要将该设备绑定到商户"' + row.userName + '"吗？').then(() => {
|
||||
|
||||
}).then((response) => {
|
||||
bindMch(this.deviceData.deviceId,row.userId).then((response) => {
|
||||
if (response.code == 200) {
|
||||
this.$modal.msgSuccess("绑定成功")
|
||||
this.$message.success("绑定成功")
|
||||
this.bindUserDialogVisible = false
|
||||
this.fetchDeviceData(this.deviceData.deviceId)
|
||||
} else {
|
||||
this.$message.error("绑定失败")
|
||||
}
|
||||
}).catch((err) => {
|
||||
console.log(err, 'err');
|
||||
|
||||
this.$message.error("绑定失败", err)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.device-detail {
|
||||
padding: 20px;
|
||||
|
|
|
|||
|
|
@ -72,8 +72,8 @@
|
|||
<template v-else-if="column.key === 'tags'">
|
||||
<dict-tag :options="dict.type.ss_room_tags" :value="d.row[column.key]" />
|
||||
</template>
|
||||
<template v-else-if="column.key === 'picture'">
|
||||
<image-preview :src="d.row[column.key]" :width="50" :height="50" />
|
||||
<template v-else-if="column.key === 'pictures'">
|
||||
<image-preview :src="d.row[column.key][0]" :width="50" :height="50" />
|
||||
</template>
|
||||
<template v-else-if="column.key === 'status'">
|
||||
<dict-tag :options="dict.type.ss_room_status" :value="d.row[column.key]" />
|
||||
|
|
@ -161,7 +161,7 @@ export default {
|
|||
{ key: 'roomId', visible: true, label: '房间id', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
|
||||
{ key: 'roomName', visible: true, label: '房间名', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
|
||||
{ key: 'storeName', visible: true, label: '店铺', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
|
||||
{ key: 'picture', visible: true, label: '图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
|
||||
{ key: 'pictures', visible: true, label: '图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
|
||||
{ key: 'type', visible: true, label: '类型', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
|
||||
{ key: 'feeRules', visible: true, label: '套餐', minWidth: null, sortable: false, overflow: true, align: 'center', width: null },
|
||||
{ key: 'tags', visible: true, label: '标签', minWidth: null, sortable: true, overflow: false, align: 'center', width: null },
|
||||
|
|
|
|||
|
|
@ -10,16 +10,24 @@
|
|||
<!-- 房间基本信息 -->
|
||||
<div class="room-header">
|
||||
<el-row :gutter="40">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<div class="image-wrapper">
|
||||
<el-image :src="room.picture" fit="cover" class="room-image">
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
<el-carousel height="300px" indicator-position="outside" :autoplay="true" trigger="click" arrow="always">
|
||||
<el-carousel-item v-for="(url, index) in room.pictures" :key="index">
|
||||
<el-image
|
||||
:src="url"
|
||||
class="carousel-image"
|
||||
fit="fill"
|
||||
>
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16">
|
||||
<el-col :span="18">
|
||||
<div class="room-title">
|
||||
<h2>{{ room.roomName }}</h2>
|
||||
<el-tag :type="room.status === '1' ? 'success' : 'info'" class="status-tag" effect="dark">
|
||||
|
|
@ -61,8 +69,6 @@
|
|||
</el-row>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- WiFi信息 -->
|
||||
<div v-if="room.wifi" class="section-block">
|
||||
<h3>
|
||||
|
|
@ -137,12 +143,11 @@
|
|||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<el-tabs v-model="activeTab" class="detail-tabs">
|
||||
|
||||
<el-tabs v-model="activeTab" class="detail-tabs">
|
||||
<el-tab-pane label="订单列表" name="orders">
|
||||
<order :roomId="room.roomId"></order>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="设备列表" name="devices">
|
||||
<device :roomId="room.roomId"></device>
|
||||
</el-tab-pane>
|
||||
|
|
@ -155,7 +160,6 @@
|
|||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getRoom, updateRoom } from '@/api/system/room'
|
||||
import { getDicts } from '@/api/system/dict/data'
|
||||
|
|
@ -309,17 +313,6 @@ export default {
|
|||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.detail-tabs {
|
||||
margin-top: 20px;
|
||||
|
||||
.search-form {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.app-container {
|
||||
padding: 24px;
|
||||
background-color: #f5f7fa;
|
||||
|
|
@ -327,7 +320,6 @@ export default {
|
|||
}
|
||||
|
||||
.operation-buttons {
|
||||
// margin-left: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 5px;
|
||||
|
|
@ -344,10 +336,10 @@ export default {
|
|||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.box-card:hover {
|
||||
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
|
||||
&:hover {
|
||||
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.room-header {
|
||||
|
|
@ -359,19 +351,53 @@ export default {
|
|||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
:deep(.el-carousel) {
|
||||
.el-carousel__indicators {
|
||||
bottom: -20px;
|
||||
}
|
||||
|
||||
.image-wrapper:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.el-carousel__arrow {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.room-image {
|
||||
width: 100%;
|
||||
height: 320px;
|
||||
border-radius: 12px;
|
||||
object-fit: cover;
|
||||
.el-carousel__item {
|
||||
background-color: #f5f7fa;
|
||||
overflow: hidden;
|
||||
|
||||
.carousel-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
|
||||
:deep(.el-image__inner) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f5f7fa;
|
||||
color: #909399;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.room-title {
|
||||
|
|
@ -380,22 +406,22 @@ export default {
|
|||
margin-bottom: 28px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.room-title h2 {
|
||||
margin: 0;
|
||||
margin-right: 15px;
|
||||
font-size: 28px;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
}
|
||||
h2 {
|
||||
margin: 0;
|
||||
margin-right: 15px;
|
||||
font-size: 28px;
|
||||
color: #303133;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
margin-left: auto;
|
||||
padding: 0 16px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 14px;
|
||||
.status-tag {
|
||||
margin-left: auto;
|
||||
padding: 0 16px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.room-info {
|
||||
|
|
@ -441,32 +467,21 @@ export default {
|
|||
margin-top: 48px;
|
||||
padding-top: 32px;
|
||||
border-top: 1px solid #EBEEF5;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h3 i {
|
||||
margin-right: 12px;
|
||||
font-size: 24px;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.total-rules {
|
||||
margin-top: 3px;
|
||||
i {
|
||||
margin-right: 12px;
|
||||
font-size: 24px;
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
|
|
@ -481,58 +496,40 @@ h3 i {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
.image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f5f7fa;
|
||||
}
|
||||
|
||||
.image-slot i {
|
||||
font-size: 48px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.custom-table {
|
||||
margin-top: 16px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions) {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border-radius: 8px;
|
||||
|
||||
.el-descriptions__label {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.el-descriptions__content {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
|
||||
.el-descriptions__body {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.el-descriptions-item__label {
|
||||
background-color: #f5f7fa;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-descriptions__label) {
|
||||
font-weight: 500;
|
||||
color: #606266;
|
||||
}
|
||||
.detail-tabs {
|
||||
margin-top: 20px;
|
||||
|
||||
:deep(.el-descriptions__content) {
|
||||
padding: 12px 16px;
|
||||
}
|
||||
.search-form {
|
||||
margin-bottom: 20px;
|
||||
|
||||
:deep(.el-table th) {
|
||||
background-color: #f5f7fa !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
:deep(.el-table--border) {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions__body) {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:deep(.el-descriptions-item__label) {
|
||||
background-color: #f5f7fa;
|
||||
font-weight: 500;
|
||||
.el-form-item {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 标签选择器样式
|
||||
|
|
|
|||
|
|
@ -108,8 +108,8 @@
|
|||
<template v-else-if="column.key === 'status'">
|
||||
<dict-tag :options="dict.type.ss_store_status" :value="d.row[column.key]"/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'picture'">
|
||||
<image-preview :src="d.row[column.key]" :width="50" :height="50"/>
|
||||
<template v-else-if="column.key === 'pictures'">
|
||||
<image-preview :src="d.row[column.key][0]" :width="50" :height="50"/>
|
||||
</template>
|
||||
<template v-else-if="column.key === 'address'">
|
||||
<el-link
|
||||
|
|
@ -294,7 +294,7 @@ export default {
|
|||
{key: 'managerName', visible: true, label: '店长', minWidth: null, sortable: true, overflow: false, align: 'center', width: 100},
|
||||
{key: 'contactName', visible: true, label: '联系人', minWidth: null, sortable: true, overflow: false, align: 'center', width: 100},
|
||||
{key: 'contactMobile', visible: true, label: '联系电话', minWidth: null, sortable: true, overflow: false, align: 'center', width: 100},
|
||||
{key: 'picture', visible: true, label: '商户图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: 100},
|
||||
{key: 'pictures', visible: true, label: '商户图片', minWidth: null, sortable: true, overflow: false, align: 'center', width: 100},
|
||||
{key: 'address', visible: true, label: '门店地址', minWidth: null, sortable: true, overflow: false, align: 'center', width: 150},
|
||||
{key: 'businessTime', visible: true, label: '营业时间', minWidth: "120", sortable: false, overflow: false, align: 'center', width: null},
|
||||
{key: 'serverPhone', visible: true, label: '客服电话', minWidth: null, sortable: true, overflow: false, align: 'center', width: null},
|
||||
|
|
|
|||
|
|
@ -10,14 +10,25 @@
|
|||
</el-tag>
|
||||
</div>
|
||||
<div class="action-buttons">
|
||||
<!-- <el-button type="primary" size="small" @click="handleEdit">编辑</el-button> -->
|
||||
<el-button type="danger" size="small" @click="handleDelete">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="2">
|
||||
<el-col :span="6">
|
||||
<div class="store-image">
|
||||
<image-preview :src="storeData.picture" :width="80" :height="80" />
|
||||
<el-carousel height="300px" indicator-position="outside" :autoplay="true" trigger="click" arrow="always">
|
||||
<el-carousel-item v-for="(url, index) in storeData.pictures" :key="index">
|
||||
<el-image
|
||||
:src="url"
|
||||
fit="fill"
|
||||
style="width: 100%; height: 100%"
|
||||
>
|
||||
<div slot="error" class="image-slot">
|
||||
<i class="el-icon-picture-outline"></i>
|
||||
</div>
|
||||
</el-image>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
|
|
@ -80,7 +91,6 @@
|
|||
<div class="stat-content">
|
||||
<div class="stat-label">今日收入</div>
|
||||
<div class="stat-value">¥ {{ stats.todayIncome || '0.00' }}</div>
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
|
@ -94,7 +104,6 @@
|
|||
<div class="stat-content">
|
||||
<div class="stat-label">本月收入</div>
|
||||
<div class="stat-value">¥ {{ stats.monthIncome || '0.00' }}</div>
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
|
@ -108,7 +117,6 @@
|
|||
<div class="stat-content">
|
||||
<div class="stat-label">总营收</div>
|
||||
<div class="stat-value">¥ {{ stats.totalIncome || '0.00' }}</div>
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
|
@ -122,7 +130,6 @@
|
|||
<div class="stat-content">
|
||||
<div class="stat-label">总提现</div>
|
||||
<div class="stat-value">¥ {{ stats.totalWithdraw || '0.00' }}</div>
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
|
@ -140,7 +147,6 @@
|
|||
<span class="divider">/</span>
|
||||
<span class="total">{{ stats.totalRooms || 0 }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
|
@ -151,7 +157,6 @@
|
|||
<div class="stat-icon facility">
|
||||
<i class="el-icon-set-up"></i>
|
||||
</div>
|
||||
|
||||
<div class="stat-content">
|
||||
<div class="stat-label">设施使用</div>
|
||||
<div class="stat-numbers">
|
||||
|
|
@ -159,7 +164,6 @@
|
|||
<span class="divider">/</span>
|
||||
<span class="total">{{ stats.totalFacilities || 0 }}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
|
@ -189,8 +193,8 @@
|
|||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-tabs v-model="activeTab" class="detail-tabs">
|
||||
|
||||
<el-tabs v-model="activeTab" class="detail-tabs">
|
||||
<el-tab-pane label="订单列表" name="orders">
|
||||
<order :storeId="storeId"></order>
|
||||
</el-tab-pane>
|
||||
|
|
@ -206,8 +210,6 @@
|
|||
<el-tab-pane label="员工列表" name="users">
|
||||
<user :storeId="storeId"></user>
|
||||
</el-tab-pane>
|
||||
|
||||
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -273,6 +275,7 @@ export default {
|
|||
window.removeEventListener('resize', this.resizeChart);
|
||||
},
|
||||
methods: {
|
||||
|
||||
getStatusType(status) {
|
||||
const statusMap = {
|
||||
0: 'info',
|
||||
|
|
@ -470,6 +473,46 @@ export default {
|
|||
<style lang="scss" scoped>
|
||||
.store-detail {
|
||||
padding: 20px;
|
||||
|
||||
.store-image {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
|
||||
:deep(.el-carousel) {
|
||||
.el-carousel__indicators {
|
||||
bottom: -20px;
|
||||
}
|
||||
|
||||
.el-carousel__arrow {
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
}
|
||||
|
||||
.el-carousel__item {
|
||||
overflow: hidden;
|
||||
|
||||
.el-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
|
||||
.image-slot {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #f5f7fa;
|
||||
color: #909399;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.info-card {
|
||||
margin-bottom: 20px;
|
||||
|
|
@ -518,22 +561,6 @@ export default {
|
|||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.store-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10px 0;
|
||||
|
||||
:deep(.el-image) {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
border: 1px solid #EBEEF5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.detail-tabs {
|
||||
|
|
|
|||
|
|
@ -285,7 +285,7 @@ export default {
|
|||
open: false,
|
||||
title: "",
|
||||
form: {},
|
||||
reportActiveTab: 'monthly',
|
||||
reportActiveTab: 'daily',
|
||||
mainActiveTab: 'orders',
|
||||
statisticsData: [
|
||||
{ label: '店铺数', field: 'storeCount', icon: 'el-icon-office-building', color: 'blue', unit: '家' },
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user