数据展示模块
This commit is contained in:
parent
1c44ea4ef2
commit
84f1a7b88f
279
src/views/home/widgets/components/allDataFrom.vue
Normal file
279
src/views/home/widgets/components/allDataFrom.vue
Normal 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>
|
||||||
@ -103,7 +103,7 @@
|
|||||||
description: allComps[key].description
|
description: allComps[key].description
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
var myCopmsList = this.widgets
|
var myCopmsList = this.widgets
|
||||||
for(let comp of allCompsList){
|
for(let comp of allCompsList){
|
||||||
const _item = myCopmsList.find((item)=>{return item.name === comp.key})
|
const _item = myCopmsList.find((item)=>{return item.name === comp.key})
|
||||||
@ -111,10 +111,12 @@
|
|||||||
comp.disabled = true
|
comp.disabled = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
console.log(allCompsList)
|
||||||
return allCompsList
|
return allCompsList
|
||||||
},
|
},
|
||||||
myCompsList(){
|
myCompsList(){
|
||||||
var myGrid = this.$tool.data.get("dashboardgrid")
|
var myGrid = this.$tool.data.get("dashboardgrid")
|
||||||
|
console.log(this.$tool.data.get("dashboardgrid"))
|
||||||
if (myGrid.length>0) {
|
if (myGrid.length>0) {
|
||||||
return this.allCompsList.filter(item => !item.disabled && myGrid.includes(item.key))
|
return this.allCompsList.filter(item => !item.disabled && myGrid.includes(item.key))
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user