1103 lines
26 KiB
Vue
1103 lines
26 KiB
Vue
<template>
|
||
<div class="w-100%">
|
||
<div class="w-100% flex mb-20px real-time-data">
|
||
<div class="mr-10px title text-gray-500">实时数据</div>
|
||
<div class="">更新时间 2022-06-15 12:00</div>
|
||
</div>
|
||
<div class="w-100% grid gap-x-15px gap-y-10px grid-cols-6">
|
||
<div
|
||
class="top-card bg-#fff .dark:bg-#1D1E1F! b-1px b-transparent .dark:b-#2A2B2C b-solid"
|
||
v-for="(item, index) in topCardList"
|
||
:key="index"
|
||
>
|
||
<div class="card-box mb-5px">
|
||
<div class="text text-gray-500">{{ item.title }}</div>
|
||
</div>
|
||
<span class="text-value">
|
||
<avue-count-up :end="item.value"></avue-count-up>
|
||
</span>
|
||
<div class="card-box mt-10px" :class="item.type == '1' ? 'top' : 'bottom'">
|
||
<div class="text">
|
||
<span class="mr-5px">同比昨日 {{ item.button }}</span>
|
||
</div>
|
||
<div class="tendency" :class="item.type == '1' ? 'ascent' : 'descent'"> </div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="w-100% flex gap-x-20px">
|
||
<div class="flex-basis-65%" style="width: calc(65% - 20px)">
|
||
<div
|
||
class="real-echart pt-20px b-1px .dark:bg-#1D1E1F! b-transparent .dark:b-#2A2B2C b-solid"
|
||
>
|
||
<div class="util-box">
|
||
<div class="util-title ml-20px">
|
||
<div class="placeholder mr-7px"></div>
|
||
<div class=".dark:c-#E5EAF3"> 订单及销量趋势 </div>
|
||
</div>
|
||
<div class="util">
|
||
<el-button-group>
|
||
<el-button
|
||
v-for="item in typeList1"
|
||
:key="item.type"
|
||
:type="item.type == isActive1 ? 'primary' : ''"
|
||
@click="clickFluctuate(item.type)"
|
||
>
|
||
{{ item.title }}
|
||
</el-button>
|
||
</el-button-group>
|
||
<div class="cursor-pointer text-14px" @click="clickBtn">
|
||
查看更多
|
||
<span style="font-weight: bold"> > </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Echart
|
||
:options="fluctuate_option"
|
||
style="z-index: 1"
|
||
class="mt--28px"
|
||
width="100%"
|
||
height="368px"
|
||
/>
|
||
</div>
|
||
<div
|
||
class="real-echart pt-20px b-1px .dark:bg-#1D1E1F! b-transparent .dark:b-#2A2B2C b-solid"
|
||
>
|
||
<div class="util-box">
|
||
<div class="util-title ml-20px">
|
||
<div class="placeholder mr-7px"></div>
|
||
<div class=".dark:c-#E5EAF3"> 新增用户及会员趋势 </div>
|
||
</div>
|
||
<div class="util">
|
||
<el-button-group>
|
||
<el-button
|
||
v-for="item in typeList3"
|
||
:key="item.type"
|
||
:type="item.type == isActive3 ? 'primary' : ''"
|
||
@click="clickBrokenLine(item.type)"
|
||
>
|
||
{{ item.title }}
|
||
</el-button>
|
||
</el-button-group>
|
||
<div class="look-more cursor-pointer" @click="clickBtn">
|
||
查看更多
|
||
<span style="font-weight: bold"> > </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Echart :options="broken_line_option" class="mt--28px" width="100%" height="368px" />
|
||
</div>
|
||
<div
|
||
class="real-echart pt-20px b-1px .dark:bg-#1D1E1F! b-transparent .dark:b-#2A2B2C b-solid"
|
||
>
|
||
<div class="util-box">
|
||
<div class="util-title ml-20px">
|
||
<div class="placeholder mr-7px"></div>
|
||
<div class=".dark:c-#E5EAF3"> 待处理订单 </div>
|
||
</div>
|
||
<div class="util">
|
||
<div class="look-more cursor-pointer" @click="clickBtn">
|
||
查看更多
|
||
<span style="font-weight: bold"> > </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="m-20px pb-30px">
|
||
<avue-crud
|
||
ref="crudRef"
|
||
v-model="form"
|
||
:option="option"
|
||
:row-style="rowStyle"
|
||
:header-cell-class-name="headerCellClassName"
|
||
:data="data"
|
||
>
|
||
<template #menu="{ size, row, index }">
|
||
<el-button @click="tip(row, index)" text type="primary" :size="size">
|
||
<div class="bj-btn mr-3px">
|
||
<Icon :size="11" icon="ep:arrow-right-bold"></Icon>
|
||
</div>
|
||
订单详情
|
||
</el-button>
|
||
</template>
|
||
</avue-crud>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-basis-35% w-35%">
|
||
<div
|
||
class="real-echart pt-20px b-1px .dark:bg-#1D1E1F! b-transparent .dark:b-#2A2B2C b-solid"
|
||
>
|
||
<div class="util-box">
|
||
<div class="util-title ml-20px">
|
||
<div class="placeholder mr-7px"></div>
|
||
<div class=".dark:c-#E5EAF3"> 商品销量占比 </div>
|
||
</div>
|
||
<div class="util">
|
||
<el-button-group>
|
||
<el-button
|
||
v-for="item in typeList2"
|
||
:key="item.type"
|
||
:type="item.type == isActive2 ? 'primary' : ''"
|
||
@click="clickCyclicAnnular(item.type)"
|
||
>
|
||
{{ item.title }}
|
||
</el-button>
|
||
</el-button-group>
|
||
<div class="look-more cursor-pointer" @click="clickBtn">
|
||
查看更多
|
||
<span style="font-weight: bold"> > </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Echart :options="cyclic_annular_option" class="mt--28px" width="100%" height="368px" />
|
||
</div>
|
||
<div
|
||
class="real-echart pt-20px b-1px .dark:bg-#1D1E1F! b-transparent .dark:b-#2A2B2C b-solid"
|
||
>
|
||
<div class="util-box">
|
||
<div class="util-title ml-20px">
|
||
<div class="placeholder mr-7px"></div>
|
||
<div class=".dark:c-#E5EAF3"> 用户访问趋势 </div>
|
||
</div>
|
||
<div class="util">
|
||
<el-button-group>
|
||
<el-button
|
||
v-for="item in typeList4"
|
||
:key="item.type"
|
||
:type="item.type == isActive4 ? 'primary' : ''"
|
||
@click="clickBdt(item.type)"
|
||
>
|
||
{{ item.title }}
|
||
</el-button>
|
||
</el-button-group>
|
||
<div class="look-more cursor-pointer" @click="clickBtn">
|
||
查看更多
|
||
<span style="font-weight: bold"> > </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<Echart :options="fluctuate_option2" class="mt--28px" width="100%" height="368px" />
|
||
</div>
|
||
<div
|
||
class="real-echart pt-20px b-1px .dark:bg-#1D1E1F! b-transparent .dark:b-#2A2B2C b-solid"
|
||
>
|
||
<div class="util-box">
|
||
<div class="util-title ml-20px">
|
||
<div class="placeholder mr-7px"></div>
|
||
<div class=".dark:c-#E5EAF3"> 本月单品销量排名 </div>
|
||
</div>
|
||
<div class="util">
|
||
<div class="look-more cursor-pointer" @click="clickBtn">
|
||
查看更多
|
||
<span style="font-weight: bold"> > </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="m-20px pb-30px">
|
||
<avue-crud
|
||
ref="crudRef2"
|
||
v-model="form2"
|
||
:option="option2"
|
||
:row-style="rowStyle"
|
||
:header-cell-class-name="headerCellClassName"
|
||
:data="data2"
|
||
>
|
||
</avue-crud>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { useAppStore } from '@/store/modules/app'
|
||
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
|
||
import { ElMessage } from 'element-plus'
|
||
import { getTableList, batchGetTableList } from '@/api/design/report'
|
||
import * as TableApi from '@/api/design/table'
|
||
|
||
defineOptions({ name: 'Home5' })
|
||
|
||
interface TopCardList {
|
||
dictionary: string
|
||
title: string
|
||
button?: string
|
||
type?: string
|
||
value?: number
|
||
}
|
||
interface CyclicAnnularSeries {
|
||
name: string
|
||
value: number
|
||
}
|
||
|
||
let topCardList = ref<TopCardList[]>([
|
||
{ title: '今日交易额（元）', dictionary: 'jrjye' },
|
||
{ title: '今日订单量（元）', dictionary: 'jrddl' },
|
||
{ title: '今日浏览量', dictionary: 'jrlll' },
|
||
{ title: '今日访问用户', dictionary: 'jrfwyh' },
|
||
{ title: '今日注册用户', dictionary: 'jrzcyh' },
|
||
{ title: '今日新增会员', dictionary: 'jrxzhy' }
|
||
])
|
||
|
||
const isActive1 = ref(1)
|
||
const isActive2 = ref(1)
|
||
const isActive3 = ref(1)
|
||
const isActive4 = ref(1)
|
||
|
||
const typeList1 = ref([
|
||
{ title: '本周', type: 1 },
|
||
{ title: '本月', type: 2 },
|
||
{ title: '本年', type: 3 }
|
||
])
|
||
const typeList2 = ref([
|
||
{ title: '本周', type: 1 },
|
||
{ title: '本月', type: 2 },
|
||
{ title: '本年', type: 3 }
|
||
])
|
||
const typeList3 = ref([
|
||
{ title: '本周', type: 1 },
|
||
{ title: '本月', type: 2 },
|
||
{ title: '本年', type: 3 }
|
||
])
|
||
const typeList4 = ref([
|
||
{ title: '本周', type: 1 },
|
||
{ title: '本月', type: 2 },
|
||
{ title: '本年', type: 3 }
|
||
])
|
||
|
||
// 波动图
|
||
const fluctuateXAxis = ref<string[]>([])
|
||
const fluctuateSeries1 = ref<string[]>([])
|
||
const fluctuateSeries2 = ref<string[]>([])
|
||
const fluctuate_option = ref({
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
color: ['#4FA7FF', '#39EDD6'],
|
||
legend: {
|
||
data: ['销售额', '订单量'],
|
||
icon: 'rich',
|
||
show: true,
|
||
itemWidth: 12,
|
||
itemHeight: 12,
|
||
textStyle: {
|
||
color: '#666666',
|
||
fontSize: '12px'
|
||
},
|
||
|
||
bottom: 20,
|
||
right: 'center',
|
||
itemGap: 20
|
||
},
|
||
grid: {
|
||
left: '4%',
|
||
right: '4%',
|
||
bottom: 70,
|
||
top: '16%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
data: fluctuateXAxis.value,
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
symbol: 'none',
|
||
lineStyle: {
|
||
color: '#EBEBEB'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: '#999999',
|
||
fontSize: 12,
|
||
padding: [10, 0, 0, 0],
|
||
align: 'center'
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: '#6071A9',
|
||
fontSize: 12
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#EBEBEB',
|
||
type: 'solid'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '销售额',
|
||
type: 'line',
|
||
data: fluctuateSeries1.value,
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 0
|
||
},
|
||
areaStyle: {
|
||
opacity: 0.8
|
||
},
|
||
symbol: 'none'
|
||
},
|
||
{
|
||
name: '订单量',
|
||
data: fluctuateSeries2.value,
|
||
type: 'line',
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 0
|
||
},
|
||
areaStyle: {
|
||
opacity: 0.8
|
||
},
|
||
symbol: 'none'
|
||
}
|
||
]
|
||
})
|
||
|
||
// 波动图2
|
||
const fluctuate2XAxis = ref<string[]>([])
|
||
const fluctuate2Series = ref<string[]>([])
|
||
const fluctuate_option2 = ref({
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
color: ['#FFA83C'],
|
||
legend: {
|
||
data: ['访问用户'],
|
||
icon: 'rich',
|
||
show: true,
|
||
itemWidth: 12,
|
||
itemHeight: 12,
|
||
textStyle: {
|
||
color: '#666666',
|
||
fontSize: '12px'
|
||
},
|
||
|
||
bottom: 20,
|
||
right: 'center',
|
||
itemGap: 20
|
||
},
|
||
grid: {
|
||
left: '4%',
|
||
right: '4%',
|
||
bottom: 70,
|
||
top: '16%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
data: fluctuate2XAxis.value,
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
symbol: 'none',
|
||
lineStyle: {
|
||
color: '#EBEBEB'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: '#999999',
|
||
fontSize: 12,
|
||
padding: [10, 0, 0, 0],
|
||
align: 'center'
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: '#6071A9',
|
||
fontSize: 12
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#EBEBEB',
|
||
type: 'solid'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '访问用户',
|
||
type: 'line',
|
||
data: fluctuate2Series.value,
|
||
smooth: true,
|
||
lineStyle: {
|
||
width: 0
|
||
},
|
||
areaStyle: {
|
||
opacity: 0.6
|
||
},
|
||
symbol: 'none'
|
||
}
|
||
]
|
||
})
|
||
|
||
// 环状图
|
||
const cyclicAnnularSeries = ref<CyclicAnnularSeries[]>()
|
||
const cyclicAnnularSeriesNum = ref(0)
|
||
const cyclic_annular_option = ref({
|
||
// 环形图中间默认显示文字
|
||
color: ['#2391FF', '#FF745A', '#FFC328', '#8167F5', '#07E8AE'],
|
||
tooltip: {
|
||
extraCssText: 'box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);',
|
||
backgroundColor: 'rgba(0,0,0,0.75)',
|
||
textStyle: {
|
||
color: '#FFFFFF'
|
||
},
|
||
formatter: (param) => {
|
||
let { name, data } = param
|
||
let result = `<div>${name}：${data.xse}</div>`
|
||
return result
|
||
}
|
||
},
|
||
legend: {
|
||
orient: 'vertial',
|
||
itemHeight: 12,
|
||
icon: 'circle',
|
||
top: '30%',
|
||
right: '10%',
|
||
itemGap: 20,
|
||
data: cyclicAnnularSeries.value,
|
||
textStyle: {
|
||
fontSize: 14,
|
||
color: 'rgba(0,0,0,0.65)',
|
||
rich: {
|
||
a: {
|
||
padding: [0, 0, 0, 40],
|
||
fontSize: 14,
|
||
fontWeight: '700'
|
||
}
|
||
}
|
||
},
|
||
formatter: (name) => {
|
||
const value = cyclicAnnularSeries.value?.find((item) => item.name === name)
|
||
return `${name}` + '{a|' + value?.value + '%' + '}'
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
type: 'pie',
|
||
center: ['30%', '50%'],
|
||
radius: ['35%', '55%'],
|
||
label: {
|
||
position: 'center',
|
||
formatter: () => {
|
||
return [`{tit|销售总额}`, `{num|${cyclicAnnularSeriesNum.value}}`].join('\n')
|
||
},
|
||
rich: {
|
||
tit: {
|
||
fontSize: 16,
|
||
color: '#999999',
|
||
fontWeight: 400,
|
||
align: 'center'
|
||
},
|
||
num: {
|
||
padding: [10, 0, 0, 0],
|
||
fontSize: 28,
|
||
fontWeight: 'bold',
|
||
color: '#333333',
|
||
align: 'center'
|
||
}
|
||
}
|
||
},
|
||
data: cyclicAnnularSeries.value
|
||
}
|
||
]
|
||
})
|
||
|
||
// 折线图
|
||
const brokenLineXAxis = ref<string[]>([])
|
||
const brokenLineSeries1 = ref<string[]>([])
|
||
const brokenLineSeries2 = ref<string[]>([])
|
||
const broken_line_option = ref({
|
||
tooltip: {
|
||
trigger: 'axis'
|
||
},
|
||
color: ['#4FA7FF', '#39EDD6'],
|
||
legend: {
|
||
data: ['新增用户', '新增会员'],
|
||
icon: 'rich',
|
||
show: true,
|
||
itemWidth: 12,
|
||
itemHeight: 12,
|
||
textStyle: {
|
||
color: '#666666',
|
||
fontSize: '12px'
|
||
},
|
||
bottom: 20,
|
||
right: 'center',
|
||
itemGap: 20
|
||
},
|
||
grid: {
|
||
left: '4%',
|
||
right: '4%',
|
||
bottom: 70,
|
||
top: '16%',
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
data: brokenLineXAxis.value,
|
||
type: 'category',
|
||
boundaryGap: false,
|
||
axisLine: {
|
||
symbol: 'none',
|
||
lineStyle: {
|
||
color: '#EBEBEB'
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLabel: {
|
||
interval: 0,
|
||
color: '#999999',
|
||
fontSize: 12,
|
||
padding: [10, 0, 0, 0],
|
||
align: 'center'
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: 'value',
|
||
axisLabel: {
|
||
color: '#6071A9',
|
||
fontSize: 12
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#EBEBEB',
|
||
type: 'solid'
|
||
}
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '新增用户',
|
||
type: 'line',
|
||
data: brokenLineSeries1.value,
|
||
lineStyle: {
|
||
width: 1
|
||
},
|
||
symbol: 'none'
|
||
},
|
||
{
|
||
name: '新增会员',
|
||
data: brokenLineSeries2.value,
|
||
type: 'line',
|
||
lineStyle: {
|
||
width: 1
|
||
},
|
||
symbol: 'none'
|
||
}
|
||
]
|
||
})
|
||
|
||
const option = ref({
|
||
editBtn: false,
|
||
addBtn: false,
|
||
delBtn: false,
|
||
searchBtn: false,
|
||
refreshBtn: false,
|
||
columnBtn: false,
|
||
border: false,
|
||
menuWidth: 120,
|
||
column: [
|
||
{
|
||
label: '订单编号',
|
||
overHidden: true,
|
||
prop: 'bh',
|
||
width: '120'
|
||
},
|
||
{
|
||
label: '商品名称',
|
||
overHidden: true,
|
||
prop: 'name',
|
||
width: '200'
|
||
},
|
||
{
|
||
label: '下单时间',
|
||
overHidden: true,
|
||
prop: 'xdsj',
|
||
width: '110',
|
||
type: "datetime",
|
||
format: "YYYY-MM-DD HH:mm:ss",
|
||
},
|
||
{
|
||
label: '数量',
|
||
overHidden: true,
|
||
prop: 'num'
|
||
},
|
||
{
|
||
label: '金额',
|
||
overHidden: true,
|
||
prop: 'money',
|
||
html: true,
|
||
formatter: (val) => {
|
||
let text = ''
|
||
if (val.money) {
|
||
if (val.money.toString().indexOf('￥') == -1) {
|
||
text = '￥' + val.money
|
||
} else {
|
||
text = val.money
|
||
}
|
||
} else {
|
||
text = '￥0'
|
||
}
|
||
return `<span>${text}</span>`
|
||
}
|
||
},
|
||
{
|
||
label: '状态',
|
||
overHidden: true,
|
||
prop: 'status',
|
||
html: true,
|
||
formatter: (val) => {
|
||
let color = ''
|
||
let text = ''
|
||
if (val.status == '1') {
|
||
color = '#409EFF'
|
||
text = '待发货'
|
||
} else if (val.status == '2') {
|
||
color = '#FF9900'
|
||
text = '待付款'
|
||
} else if (val.status == '3') {
|
||
color = '#F56C6C'
|
||
text = '待退款'
|
||
}
|
||
return (
|
||
'<div class="flex items-center justify-center text-12px">' +
|
||
`<div class="w-5px h-5px mr-3px " style="background-color:${color};border-radius: 100%;"></div><div>` +
|
||
text +
|
||
'</div></div>'
|
||
)
|
||
}
|
||
}
|
||
]
|
||
})
|
||
const option2 = ref({
|
||
menu: false,
|
||
addBtn: false,
|
||
|
||
border: false,
|
||
menuWidth: 120,
|
||
column: [
|
||
{
|
||
label: '排名',
|
||
overHidden: true,
|
||
prop: 'pm',
|
||
width: 70,
|
||
html: true,
|
||
formatter: (val) => {
|
||
let selectedArr = [1, 2, 3]
|
||
let pmHtmlColor = ''
|
||
if (selectedArr.includes(val.pm)) {
|
||
pmHtmlColor = '#FF9500'
|
||
} else {
|
||
pmHtmlColor = '#2391FF'
|
||
}
|
||
|
||
return (
|
||
`<div class="w-25px h-25px" style="margin:0 auto;background-color:${pmHtmlColor};color:white;border-radius:5px;font-weight:bold">` +
|
||
val.pm +
|
||
'</div>'
|
||
)
|
||
}
|
||
},
|
||
{
|
||
label: '商品名称',
|
||
overHidden: true,
|
||
prop: 'name'
|
||
},
|
||
{
|
||
label: '销量',
|
||
overHidden: true,
|
||
prop: 'sl'
|
||
},
|
||
{
|
||
label: '销售额',
|
||
overHidden: true,
|
||
prop: 'sse',
|
||
html: true,
|
||
formatter: (val) => {
|
||
let text = ''
|
||
if (val.sse) {
|
||
if (val.sse.toString().indexOf('￥') == -1) {
|
||
text = '￥' + val.sse
|
||
} else {
|
||
text = val.sse
|
||
}
|
||
} else {
|
||
text = '￥0'
|
||
}
|
||
return `<span>${text}</span>`
|
||
}
|
||
}
|
||
]
|
||
})
|
||
|
||
const fluctuateUtil = (data) => {
|
||
fluctuateXAxis.value = []
|
||
fluctuateSeries1.value = []
|
||
fluctuateSeries2.value = []
|
||
data.forEach((ele) => {
|
||
fluctuateXAxis.value.push(ele.sj)
|
||
fluctuateSeries1.value.push(ele.xse)
|
||
fluctuateSeries2.value.push(ele.ddl)
|
||
})
|
||
fluctuate_option.value.xAxis.data = fluctuateXAxis.value
|
||
fluctuate_option.value.series[0].data = fluctuateSeries1.value
|
||
fluctuate_option.value.series[1].data = fluctuateSeries2.value
|
||
}
|
||
const clickFluctuate = async (type) => {
|
||
let res = await getTableList('example_order_sales', { type: type })
|
||
fluctuateUtil(res.records)
|
||
isActive1.value = type
|
||
}
|
||
|
||
const cyclicAnnularUtil = (data) => {
|
||
cyclicAnnularSeriesNum.value = 0
|
||
cyclicAnnularSeriesNum.value = data.reduce((a, b) => {
|
||
let num = +b.xse
|
||
return a + num
|
||
}, 0)
|
||
|
||
cyclicAnnularSeries.value = data
|
||
cyclic_annular_option.value.series[0].data = cyclicAnnularSeries.value
|
||
}
|
||
const clickCyclicAnnular = async (type) => {
|
||
let res = await getTableList('example_order_sales_percentage', { type: type })
|
||
cyclicAnnularUtil(res.records)
|
||
isActive2.value = type
|
||
}
|
||
|
||
const brokenLineUtil = (data) => {
|
||
brokenLineXAxis.value = []
|
||
brokenLineSeries1.value = []
|
||
brokenLineSeries2.value = []
|
||
data.forEach((ele) => {
|
||
brokenLineXAxis.value.push(ele.sj)
|
||
brokenLineSeries1.value.push(ele.xzyh)
|
||
brokenLineSeries2.value.push(ele.xzhy)
|
||
})
|
||
broken_line_option.value.xAxis.data = brokenLineXAxis.value
|
||
broken_line_option.value.series[0].data = brokenLineSeries1.value
|
||
broken_line_option.value.series[1].data = brokenLineSeries2.value
|
||
}
|
||
const clickBrokenLine = async (type) => {
|
||
let res = await getTableList('example_new_user_num', { type: type })
|
||
brokenLineUtil(res.records)
|
||
isActive3.value = type
|
||
}
|
||
|
||
const bdtUtil = (data) => {
|
||
fluctuate2XAxis.value = []
|
||
fluctuate2Series.value = []
|
||
data.forEach((ele) => {
|
||
fluctuate2XAxis.value.push(ele.sj)
|
||
fluctuate2Series.value.push(ele.fwyh)
|
||
})
|
||
fluctuate_option2.value.xAxis.data = fluctuate2XAxis.value
|
||
fluctuate_option2.value.series[0].data = fluctuate2Series.value
|
||
}
|
||
|
||
const clickBdt = async (type) => {
|
||
let res = await getTableList('example_user_visits', { type: type })
|
||
bdtUtil(res.records)
|
||
isActive4.value = type
|
||
}
|
||
|
||
let data: any = ref()
|
||
let data2: any = ref()
|
||
const form = ref({})
|
||
const form2 = ref({})
|
||
|
||
function rowStyle({ row, rowIndex }) {
|
||
if (appStore.isDark) return { backgroundColor: '#1D1E1F' }
|
||
|
||
if (rowIndex % 2 === 1) {
|
||
return {
|
||
backgroundColor: '#F2F2F2'
|
||
}
|
||
}
|
||
}
|
||
|
||
function headerCellClassName() {
|
||
if (appStore.isDark) return 'header-cell'
|
||
}
|
||
|
||
const appStore = useAppStore()
|
||
|
||
watch(
|
||
() => appStore.isDark,
|
||
(val) => {
|
||
if (val) {
|
||
cyclic_annular_option.value.legend.textStyle.color = '#CCCCCC'
|
||
} else {
|
||
cyclic_annular_option.value.legend.textStyle.color = 'rgba(0,0,0,0.65)'
|
||
}
|
||
}
|
||
)
|
||
|
||
const clickBtn = () => {
|
||
ElMessage({
|
||
message: '点击了查看更多',
|
||
type: 'success'
|
||
})
|
||
}
|
||
|
||
function tip(row: object, index: number): void {
|
||
ElMessage({
|
||
message: '订单详情',
|
||
type: 'success'
|
||
})
|
||
}
|
||
|
||
const init = async () => {
|
||
let oneres = await batchGetTableList(
|
||
'example_today_data,example_order_sales,example_order_sales_percentage'
|
||
)
|
||
|
||
let todayData = oneres.example_today_data.records[0]
|
||
let orderSales = oneres.example_order_sales.records
|
||
let salesPercentage = oneres.example_order_sales_percentage.records
|
||
topCardList.value = topCardList.value.map((item) => {
|
||
return (item = {
|
||
...item,
|
||
button: todayData[item.dictionary].button,
|
||
type: todayData[item.dictionary].type,
|
||
value: todayData[item.dictionary].value
|
||
})
|
||
})
|
||
fluctuateUtil(orderSales)
|
||
cyclicAnnularUtil(salesPercentage)
|
||
|
||
let endres = await batchGetTableList(
|
||
'example_new_user_num,example_user_visits,example_product_sales_rank'
|
||
)
|
||
let userNum = endres.example_new_user_num.records
|
||
let userVisits = endres.example_user_visits.records
|
||
brokenLineUtil(userNum)
|
||
bdtUtil(userVisits)
|
||
data2.value = endres.example_product_sales_rank.records
|
||
let { records: bdkfData } = await TableApi.getTableList(
|
||
'1847456813371498498',
|
||
{ pageNo: 1, pageSize: 10 },
|
||
false
|
||
)
|
||
data.value = bdkfData
|
||
}
|
||
onMounted(async () => {
|
||
// 判断是否为暗色模式
|
||
const { wsCache } = useCache()
|
||
if (wsCache.get(CACHE_KEY.IS_DARK)) {
|
||
cyclic_annular_option.value.legend.textStyle.color = '#CCCCCC'
|
||
}
|
||
init()
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.real-time-data {
|
||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||
font-size: 12px;
|
||
font-weight: 400;
|
||
color: #999;
|
||
align-items: flex-end;
|
||
|
||
.title {
|
||
// color: #666666;
|
||
font-size: 15px;
|
||
font-weight: 700;
|
||
}
|
||
}
|
||
|
||
.top-card {
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
box-shadow: var(--el-box-shadow-light);
|
||
box-sizing: border-box;
|
||
|
||
.card-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
|
||
.text-value {
|
||
margin-bottom: 15px;
|
||
font-size: 30px;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.tendency {
|
||
width: 24px;
|
||
height: 17px;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
background-size: 100%;
|
||
}
|
||
}
|
||
|
||
.card-box.top {
|
||
.text {
|
||
color: rgb(7 183 138);
|
||
}
|
||
|
||
.ascent {
|
||
background-image: url('@/assets/svgs/top.svg');
|
||
}
|
||
}
|
||
|
||
.card-box.bottom {
|
||
.text {
|
||
color: rgb(250 80 135);
|
||
}
|
||
|
||
.descent {
|
||
background-image: url('@/assets/svgs/bottom.svg');
|
||
}
|
||
}
|
||
|
||
.text-value {
|
||
margin-bottom: 15px;
|
||
font-size: 28px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.real-echart {
|
||
margin-top: 20px;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
box-shadow: var(--el-box-shadow-light);
|
||
flex-shrink: 0;
|
||
|
||
.util-box {
|
||
position: relative;
|
||
z-index: 20;
|
||
display: flex;
|
||
width: 100%;
|
||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||
|
||
.util-title {
|
||
display: flex;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: rgb(102 102 102);
|
||
align-items: center;
|
||
|
||
.placeholder {
|
||
width: 5px;
|
||
height: 16px;
|
||
background-color: rgb(49 167 255);
|
||
}
|
||
}
|
||
|
||
.util {
|
||
display: flex;
|
||
padding-right: 30px;
|
||
margin-left: auto;
|
||
font-size: 12px;
|
||
color: #999;
|
||
text-align: right;
|
||
align-items: center;
|
||
|
||
.el-button-group {
|
||
display: flex;
|
||
margin-right: 27px;
|
||
flex-wrap: nowrap;
|
||
|
||
.el-button {
|
||
height: 28px;
|
||
font-size: 12px;
|
||
border: 1px solid var(--el-color-primary);
|
||
}
|
||
}
|
||
|
||
.look-more {
|
||
text-wrap: nowrap;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep(.el-card) {
|
||
.avue-crud__header {
|
||
display: none;
|
||
}
|
||
|
||
.header-cell {
|
||
background-color: #1f1f1f !important;
|
||
border-top: 1px solid var(--el-card-border-color);
|
||
}
|
||
|
||
.header-cell:first-child {
|
||
border-left: 1px solid var(--el-card-border-color);
|
||
}
|
||
|
||
.header-cell:last-child {
|
||
border-right: 1px solid var(--el-card-border-color);
|
||
}
|
||
|
||
.el-table__header {
|
||
font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
|
||
|
||
.el-table__cell {
|
||
font-size: 14px;
|
||
color: rgb(102 102 102);
|
||
background-color: #efefef;
|
||
}
|
||
}
|
||
|
||
.el-table__cell {
|
||
height: 45px;
|
||
padding: 0;
|
||
|
||
.avue-crud__menu {
|
||
.el-button {
|
||
font-size: 14px;
|
||
|
||
.bj-btn {
|
||
display: flex;
|
||
width: 14px;
|
||
height: 13px;
|
||
color: white;
|
||
background-color: #2391ff;
|
||
border-radius: 50%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.el-table__row {
|
||
height: 45px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.el-table__row {
|
||
td:last-child {
|
||
border-right: 1px solid var(--el-card-border-color);
|
||
}
|
||
|
||
td:first-child {
|
||
border-left: 1px solid var(--el-card-border-color);
|
||
}
|
||
|
||
.menuClassName {
|
||
border-right: 1px solid var(--el-card-border-color);
|
||
}
|
||
}
|
||
}
|
||
</style>
|