XiaoMo/x-php-Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

数据展示模块

Browse Source
This commit is contained in:
luJianJun 2023-08-25 18:55:41 +08:00
parent 1c44ea4ef2
commit 84f1a7b88f
2 changed files with 282 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

279
src/views/home/widgets/components/allDataFrom.vue Normal file
View File

@ -0,0 +1,279 @@
<template>
<div class="card-box">
<el-card shadow="hover" class="card-item">
<div>
<div class="item-text dis-f al-item jus-bet">
总销售额
<el-icon :size="15">
<el-icon-warning-filled />
</el-icon>
</div>
<div class="item-price mg-t-10 mg-b-3" style="margin-left: -6px;">
<span style="margin-right:2px;">￥</span>{{ setMark('45123456') }}
</div>
<div class="dis-f al-item item-text color-000">
同比周 <span class="mg-l-10">12%</span>
<el-icon :size="10" color="#f5222d" class="mg-l-5">
<el-icon-caret-top />
</el-icon>
</div>
<div class="dis-f al-item item-text color-000">
同比日 <span class="mg-l-10">11%</span>
<el-icon :size="10" color="#52c41a" class="mg-l-5">
<el-icon-caret-bottom />
</el-icon>
</div>
<div class="bor-b"></div>
<div class="item-text color-000">
日销售额 <span style="margin-right:2px;">￥</span>{{ setMark('45123456') }}
</div>
</div>
</el-card>
<el-card shadow="hover" class="card-item">
<div>
<div class="item-text dis-f al-item jus-bet">
访问量
<el-icon :size="15">
<el-icon-warning-filled />
</el-icon>
</div>
<div class="item-price mg-t-10 mg-b-3">
{{ setMark('45123456') }}
</div>
<div ref="echartDiv" style="height:44px;width:100%;">
</div>
<!-- <xEcharts ref="c1" height="44px" :option="accessOption"></xEcharts> -->
<div class="bor-b"></div>
<div class="item-text color-000">
日访问量 <span style="margin-right:2px;">￥</span>{{ setMark('45123456') }}
</div>
</div>
</el-card>
<el-card shadow="hover" class="card-item">
<div>
<div class="item-text dis-f al-item jus-bet">
支付笔数
<el-icon :size="15">
<el-icon-warning-filled />
</el-icon>
</div>
<div class="item-price mg-t-10 mg-b-3">
{{ setMark('45123456') }}
</div>
<xEcharts ref="c1" height="44px" :option="payOption"></xEcharts>
<div class="bor-b"></div>
<div class="item-text color-000">
转化率 60%
</div>
</div>
</el-card>
<el-card shadow="hover" class="card-item">
<div>
<div class="item-text dis-f al-item jus-bet">
运营活动效果图
<el-icon :size="15">
<el-icon-warning-filled />
</el-icon>
</div>
<div class="item-price mg-t-10 mg-b-3">
78%
</div>
<div class="progress-box">
<div class="dis-f al-item pos-r">
<el-progress style="width:100%;position: relative;" :percentage="80"
:format="(percentage) => (percentage === 100 ? '' : '')">
<div class="line" style="left:80%;">
</div>
</el-progress>
</div>
</div>
<div class="bor-b"></div>
<div class="item-text color-000 dis-f al-item jus-bet">
<div class="dis-f al-item item-text color-000">
同比周 <span class="mg-l-10">12%</span>
<el-icon :size="10" color="#f5222d" class="mg-l-5">
<el-icon-caret-top />
</el-icon>
</div>
<div class="dis-f al-item item-text color-000">
同比日 <span class="mg-l-10">11%</span>
<el-icon :size="10" color="#52c41a" class="mg-l-5">
<el-icon-caret-bottom />
</el-icon>
</div>
</div>
</div>
</el-card>
</div>
</template>
<script>
import * as echarts from 'echarts';
import xEcharts from '@/components/xEcharts';
export default {
title: "各项数据",
icon: "el-icon-trend-charts",
description: "各项数据表格组件",
components: {
xEcharts
},
data() {
return {
accessOption: {
xAxis: {
show: false,
splitLine: false,
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
show: false,
type: 'value'
},
tooltip: {
trigger: 'axis'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
areaStyle: {}
}
]
},
payOption: {
xAxis: {
show: false,
splitLine: false,
type: 'category',
boundaryGap: true,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
show: false,
type: 'value'
},
tooltip: {
trigger: 'axis'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar',
// areaStyle: {},
}
]
}
}
},
methods: {
setMark(num) {
return num.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
},
setEchart() {
let myChart = echarts.init(this.$refs.echartDiv, 'T');
let option;
option = this.accessOption
option && myChart.setOption(option);
}
},
mounted() {
this.setEchart()
},
}
</script>
<style scoped>
.pos-r {
position: relative;
}
.dis-f {
display: flex;
}
.al-item {
align-items: center;
}
.jus-bet {
justify-content: space-between;
}
.mg-l-5 {
margin-left: 5px;
}
.mg-l-10 {
margin-left: 10px;
}
.mg-t-10 {
margin-top: 10px;
}
.mg-b-3 {
margin-bottom: 3px;
}
.mouse-c {
cursor: pointer;
}
.card-box {
display: flex;
align-items: center;
justify-content: space-between;
}
.card-item {
width: 24%;
}
.item-text {
color: #999;
font-size: 14px;
line-height: 22px;
}
.item-price {
color: #000000d9;
font-size: 30px;
line-height: 38px;
font-variant: tabular-nums;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", Segoe UI Symbol, "Noto Color Emoji";
}
.color-000 {
color: #000;
}
.bor-b {
border-bottom: 1px solid #f0f0f0;
margin: 10px 0;
}
.progress-box {
height: 44px;
position: relative;
}
.progress-box .line {
height: 20px;
width: 1px;
position: absolute;
top: -6px;
z-index: 6;
background: #409EFF;
}
/* .el-progress--line {
width: 350px
} */
::v-deep .el-progress{
display:block;
}
</style>

4
src/views/home/widgets/index.vue
View File

@ -103,7 +103,7 @@
description: allComps[key].description
})
}
var myCopmsList = this.widgets
for(let comp of allCompsList){
const _item = myCopmsList.find((item)=>{return item.name === comp.key})
@ -111,10 +111,12 @@
comp.disabled = true
}
}
console.log(allCompsList)
return allCompsList
},
myCompsList(){
var myGrid = this.$tool.data.get("dashboardgrid")
console.log(this.$tool.data.get("dashboardgrid"))
if (myGrid.length>0) {
return this.allCompsList.filter(item => !item.disabled && myGrid.includes(item.key))
}