新增图标组件
This commit is contained in:
parent
84f1a7b88f
commit
73b12f808a
@ -27,7 +27,7 @@
|
|||||||
option: {
|
option: {
|
||||||
deep:true,
|
deep:true,
|
||||||
handler (v) {
|
handler (v) {
|
||||||
unwarp(this.myChart).setOption(v);
|
unwarp(this.myChart)&&unwarp(this.myChart).setOption(v);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -58,6 +58,10 @@
|
|||||||
myChart.setOption(this.myOptions);
|
myChart.setOption(this.myOptions);
|
||||||
this.myChart = myChart;
|
this.myChart = myChart;
|
||||||
window.addEventListener('resize', () => myChart.resize());
|
window.addEventListener('resize', () => myChart.resize());
|
||||||
|
},
|
||||||
|
setEchartOption(){
|
||||||
|
var myChart = echarts.init(this.$refs.xEcharts, 'T');
|
||||||
|
myChart.setOption(this.myOptions);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
139
src/views/home/widgets/components/StoreData.vue
Normal file
139
src/views/home/widgets/components/StoreData.vue
Normal file
@ -0,0 +1,139 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card-item">
|
||||||
|
<div class="dis-f jus-bet al-item" style="position: relative;">
|
||||||
|
<div class="date-tool">
|
||||||
|
<span v-for="(item, i) in dateList" :key="i" class="date-tool-title"
|
||||||
|
:class="[{ 'mg-l-24': i > 0 },{'date-tool-title-check':item.type===dateTab}]" @click="dateTabCheck(item.type)">{{ item.title
|
||||||
|
}}</span>
|
||||||
|
<div class="time-mg">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="dateData" type="daterange"
|
||||||
|
range-separator="To"
|
||||||
|
start-placeholder="Start date"
|
||||||
|
value-format='YYYY-MM-DD'
|
||||||
|
end-placeholder="End date" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-tabs v-model="activeName" class="tabs-box">
|
||||||
|
<el-tab-pane label="销售量" name="sales">
|
||||||
|
</el-tab-pane>
|
||||||
|
<el-tab-pane label="访问量" name="access">
|
||||||
|
</el-tab-pane>
|
||||||
|
<storeInfo :data-type="activeName"
|
||||||
|
:list-data="activeName==='access'?[900, 852, 563, 875, 705, 1120, 980, 952, 621, 548, 600, 1100]:[952, 852, 563, 875, 705, 1120, 980, 952, 621, 548, 658, 1165]"></storeInfo>
|
||||||
|
</el-tabs>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import xEcharts from '@/components/xEcharts';
|
||||||
|
import storeInfo from './component/StoreInfo.vue'
|
||||||
|
export default {
|
||||||
|
title: "门店数据",
|
||||||
|
icon: "el-icon-data-board",
|
||||||
|
description: "门店销售/访问量数据",
|
||||||
|
components: {
|
||||||
|
xEcharts,
|
||||||
|
storeInfo
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
activeName: 'sales',
|
||||||
|
dateList: [{title:'今日',type:'day'}, {title:'本周',type:'week'},{title:'本月',type:'month'}, {title:'全年',type:'year'}],
|
||||||
|
dateData:['',''],
|
||||||
|
dateTab:''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
dateTabCheck(type){
|
||||||
|
if(type===this.dateTab)return
|
||||||
|
this.dateTab=type
|
||||||
|
this.dateData=this.getDate(type)
|
||||||
|
},
|
||||||
|
getDate(type){
|
||||||
|
let date=new Date()
|
||||||
|
let dateTime = date.getTime()
|
||||||
|
let timeSpan = type==='day'?0:type==='week'?604800000:type==='month'?2592000000:type==='year'?31536000000:0
|
||||||
|
let previousDates = new Date(dateTime-timeSpan)
|
||||||
|
if(type==='day'){
|
||||||
|
return [
|
||||||
|
`${previousDates.getFullYear()}-${this.determineNum(previousDates.getMonth()+1)}-${this.determineNum(previousDates.getDate())}`,
|
||||||
|
`${previousDates.getFullYear()}-${this.determineNum(previousDates.getMonth()+1)}-${this.determineNum(previousDates.getDate())}`]
|
||||||
|
}else{
|
||||||
|
return [
|
||||||
|
`${previousDates.getFullYear()}-${this.determineNum(previousDates.getMonth()+1)}-${this.determineNum(previousDates.getDate())}`,
|
||||||
|
`${date.getFullYear()}-${this.determineNum(date.getMonth()+1)}-${this.determineNum(date.getDate())}`]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
determineNum(num){
|
||||||
|
return num<10?'0'+num:num
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.pos-r {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dis-f {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.al-item {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jus-bet {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-item {
|
||||||
|
width: 100%;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabs-box {
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-tool {
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-tool .mg-l-24 {
|
||||||
|
margin-left: 24px;
|
||||||
|
}
|
||||||
|
.date-tool .time-mg{
|
||||||
|
margin:0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date-tool-title {
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.date-tool-title-check{
|
||||||
|
color:#409EFF !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tabs__nav-scroll {
|
||||||
|
margin: 0 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tabs__item {
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -1,95 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="card-box">
|
<div class="card-box">
|
||||||
<el-card shadow="hover" class="card-item">
|
<el-card shadow="hover" class="card-item" v-for="(item, i) in list" :key="i">
|
||||||
<div>
|
<div>
|
||||||
<div class="item-text dis-f al-item jus-bet">
|
<div class="item-text dis-f al-item jus-bet">
|
||||||
总销售额
|
{{ item.title }}
|
||||||
<el-icon :size="15">
|
<el-icon :size="15">
|
||||||
<el-icon-warning-filled />
|
<el-icon-warning-filled />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
</div>
|
</div>
|
||||||
<div class="item-price mg-t-10 mg-b-3" style="margin-left: -6px;">
|
<div class="item-price mg-t-10 mg-b-3" style="margin-left: -6px;">
|
||||||
<span style="margin-right:2px;">￥</span>{{ setMark('45123456') }}
|
<span v-if="item.type == 'sale'"><span style="margin-right:2px;">￥</span>{{ setNumMark('45123456')
|
||||||
|
}}</span>
|
||||||
|
<span v-if="item.type == 'access'">{{ setNumMark('45123456') }}</span>
|
||||||
|
<span v-if="item.type == 'payment'">{{ setNumMark('45123456') }}</span>
|
||||||
|
<span v-if="item.type == 'operate'">78%</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="dis-f al-item item-text color-000">
|
<div v-if="item.type == 'sale'">
|
||||||
同比周 <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">
|
<div class="dis-f al-item item-text color-000">
|
||||||
同比周 <span class="mg-l-10">12%</span>
|
同比周 <span class="mg-l-10">12%</span>
|
||||||
<el-icon :size="10" color="#f5222d" class="mg-l-5">
|
<el-icon :size="10" color="#f5222d" class="mg-l-5">
|
||||||
@ -103,14 +29,55 @@
|
|||||||
</el-icon>
|
</el-icon>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div v-if="item.type == 'access'">
|
||||||
|
<xEcharts ref="c1" height="44px" :option="accessOption"></xEcharts>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.type == 'payment'">
|
||||||
|
<xEcharts ref="c1" height="44px" :option="payOption"></xEcharts>
|
||||||
|
</div>
|
||||||
|
<div v-if="item.type == 'operate'">
|
||||||
|
<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-box" style="left:80%;">
|
||||||
|
<div class="line"></div>
|
||||||
|
<div class="line"></div>
|
||||||
|
</div>
|
||||||
|
</el-progress>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bor-b"></div>
|
||||||
|
<div class="item-text color-000" :class="{ 'dis-f al-item jus-bet': item.type == 'operate' }">
|
||||||
|
<span v-if="item.type == 'sale'">日销售额 <span style="margin-right:2px;">￥</span>{{ setNumMark('45123456')
|
||||||
|
}}</span>
|
||||||
|
<span v-if="item.type == 'access'">日访问量 <span style="margin-right:2px;">￥</span>{{
|
||||||
|
setNumMark('45123456')
|
||||||
|
}}</span>
|
||||||
|
<span v-if="item.type == 'payment'">转化率 60%</span>
|
||||||
|
<div class="dis-f al-item item-text color-000" v-if="item.type == 'operate'">
|
||||||
|
同比周 <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" v-if="item.type == 'operate'">
|
||||||
|
同比日 <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>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import * as echarts from 'echarts';
|
|
||||||
import xEcharts from '@/components/xEcharts';
|
import xEcharts from '@/components/xEcharts';
|
||||||
|
import { setMark } from './tool.js'
|
||||||
export default {
|
export default {
|
||||||
title: "各项数据",
|
title: "各项数据",
|
||||||
icon: "el-icon-trend-charts",
|
icon: "el-icon-trend-charts",
|
||||||
@ -120,6 +87,25 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
type: 'sale',
|
||||||
|
title: '销售总额'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'access',
|
||||||
|
title: '访问总量'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'payment',
|
||||||
|
title: '支付笔数'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'operate',
|
||||||
|
title: '运营活动效果图'
|
||||||
|
},
|
||||||
|
],
|
||||||
accessOption: {
|
accessOption: {
|
||||||
xAxis: {
|
xAxis: {
|
||||||
show: false,
|
show: false,
|
||||||
@ -139,7 +125,7 @@ export default {
|
|||||||
{
|
{
|
||||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||||
type: 'line',
|
type: 'line',
|
||||||
areaStyle: {}
|
// areaStyle: {}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@ -169,19 +155,11 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
setMark(num) {
|
setNumMark(num) {
|
||||||
return num.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
return setMark(num)
|
||||||
},
|
|
||||||
setEchart() {
|
|
||||||
let myChart = echarts.init(this.$refs.echartDiv, 'T');
|
|
||||||
|
|
||||||
let option;
|
|
||||||
option = this.accessOption
|
|
||||||
option && myChart.setOption(option);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.setEchart()
|
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@ -227,10 +205,13 @@ export default {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-item {
|
.card-item {
|
||||||
width: 24%;
|
width: 24%;
|
||||||
|
min-width: 246px;
|
||||||
|
/* margin-right: 10px; */
|
||||||
}
|
}
|
||||||
|
|
||||||
.item-text {
|
.item-text {
|
||||||
@ -261,19 +242,43 @@ export default {
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-box .line {
|
.progress-box .line-box {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -6px;
|
top: -7px;
|
||||||
z-index: 6;
|
z-index: 6;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress-box .line-box .line {
|
||||||
background: #409EFF;
|
background: #409EFF;
|
||||||
|
height: 3px;
|
||||||
|
width: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* .el-progress--line {
|
/* .el-progress--line {
|
||||||
width: 350px
|
width: 350px
|
||||||
} */
|
} */
|
||||||
::v-deep .el-progress{
|
::v-deep .el-progress {
|
||||||
display:block;
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 550px) {
|
||||||
|
.card-item {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width:550px) and (max-width: 1115px) {
|
||||||
|
.card-item {
|
||||||
|
width: 48%;
|
||||||
|
min-width: 246px;
|
||||||
|
/* margin-right: 10px; */
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
176
src/views/home/widgets/components/component/StoreInfo.vue
Normal file
176
src/views/home/widgets/components/component/StoreInfo.vue
Normal file
@ -0,0 +1,176 @@
|
|||||||
|
<template>
|
||||||
|
<div class="dis-f al-item jus-bet box-pd font">
|
||||||
|
<div class="w-70">
|
||||||
|
<div style="margin-bottom:20px">
|
||||||
|
{{ dataType === 'sales' ? '销售趋势' : '访问量趋势' }}
|
||||||
|
</div>
|
||||||
|
<xEcharts ref="c1" height="254px" :option="payOption"></xEcharts>
|
||||||
|
</div>
|
||||||
|
<div class="w-30">
|
||||||
|
<div style="margin-bottom:20px">
|
||||||
|
{{ dataType === 'sales' ? '门店销售额排名' : '门店访问量排名' }}
|
||||||
|
</div>
|
||||||
|
<div style="height:254px;">
|
||||||
|
<div class="dis-f al-item w-100 mg-t-16" v-for="(item, i) in list" :key="i">
|
||||||
|
<div class="list-num" :class="{ 'list-top': i < 3 }">{{ i + 1 }}</div>
|
||||||
|
<div class="dis-f al-item" style="flex: 1;justify-content: space-between;">
|
||||||
|
<span>{{ item.title }}</span>
|
||||||
|
<span>{{ setNumMark(item.num) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import xEcharts from '@/components/xEcharts';
|
||||||
|
import { setMark } from '../tool';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
xEcharts
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
dataType: {
|
||||||
|
type: String,
|
||||||
|
default: 'sales'
|
||||||
|
},
|
||||||
|
listData:{
|
||||||
|
type:Array,
|
||||||
|
default:function(){
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
listData(nval){
|
||||||
|
this.payOption.series[0].data=nval
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
payOption: {
|
||||||
|
xAxis: {
|
||||||
|
splitLine: false,
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: true,
|
||||||
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
min: 0,
|
||||||
|
splitNumber: 3,
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: this.listData,
|
||||||
|
type: 'bar',
|
||||||
|
// areaStyle: {},
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
title: '123',
|
||||||
|
num: '123456789'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '123',
|
||||||
|
num: '123456789'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '123',
|
||||||
|
num: '123456789'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '123',
|
||||||
|
num: '123456789'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '123',
|
||||||
|
num: '123456789'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '123',
|
||||||
|
num: '123456789'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '123',
|
||||||
|
num: '123456789'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setNumMark(num) {
|
||||||
|
return setMark(num)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.pos-r {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dis-f {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.al-item {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jus-bet {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-pd {
|
||||||
|
padding: 0 24px 24px 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.font {
|
||||||
|
color: #000000d9;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-70 {
|
||||||
|
width: 70%
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-30 {
|
||||||
|
width: 30%
|
||||||
|
}
|
||||||
|
|
||||||
|
.w-100 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mg-t-16{
|
||||||
|
margin-top:16px;
|
||||||
|
}
|
||||||
|
.list-num {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-top: 1.5px;
|
||||||
|
margin-right: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 20px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #f5f5f5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-top {
|
||||||
|
color: #fff;
|
||||||
|
background: #314659;
|
||||||
|
}</style>
|
||||||
208
src/views/home/widgets/components/hotSearch.vue
Normal file
208
src/views/home/widgets/components/hotSearch.vue
Normal file
@ -0,0 +1,208 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card-item">
|
||||||
|
<div class="dis-f al-item jus-bet box-text" style="padding:0 24px;">
|
||||||
|
线上热门搜索
|
||||||
|
<el-dropdown>
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
<el-icon :size="15">
|
||||||
|
<el-icon-More />
|
||||||
|
</el-icon>
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||||
|
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
<div class="line" style="margin-top:16px;"></div>
|
||||||
|
<div class="info-box">
|
||||||
|
<div class="dis-f al-item jus-bet">
|
||||||
|
<div style="flex: 0.5;">
|
||||||
|
<div class="dis-f al-item">
|
||||||
|
搜索用户数
|
||||||
|
<el-dropdown style="margin-left:15px;">
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
<el-icon :size="15">
|
||||||
|
<el-icon-Warning />
|
||||||
|
</el-icon>
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item>指标说明</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
<div class="info-num-text dis-f al-item">
|
||||||
|
{{ setNumMark('12321') }}
|
||||||
|
<span style="font-size: 16px;margin-left:30px;">
|
||||||
|
17.1
|
||||||
|
<el-icon :size="10" color="#52c41a">
|
||||||
|
<el-icon-caret-bottom />
|
||||||
|
</el-icon>
|
||||||
|
<el-icon :size="10" color="#f5222d">
|
||||||
|
<el-icon-caret-top />
|
||||||
|
</el-icon>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<xEcharts ref="c1" height="45px" :option="seachOption"></xEcharts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="flex: 0.5;">
|
||||||
|
<div class="dis-f al-item">
|
||||||
|
人均搜索次数
|
||||||
|
<el-dropdown style="margin-left:15px;">
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
<el-icon :size="15">
|
||||||
|
<el-icon-Warning />
|
||||||
|
</el-icon>
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item>指标说明</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
<div class="info-num-text dis-f al-item">
|
||||||
|
2.7
|
||||||
|
<span style="font-size: 16px;margin-left:30px;">
|
||||||
|
17.1
|
||||||
|
<el-icon :size="10" color="#52c41a">
|
||||||
|
<el-icon-caret-bottom />
|
||||||
|
</el-icon>
|
||||||
|
<el-icon :size="10" color="#f5222d">
|
||||||
|
<el-icon-caret-top />
|
||||||
|
</el-icon>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<xEcharts ref="c1" height="45px" :option="seachOption"></xEcharts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-table :data="tableData" style="width: 100%">
|
||||||
|
<el-table-column prop="id" label="排名" />
|
||||||
|
<el-table-column prop="seachKey" label="搜索关键词" />
|
||||||
|
<el-table-column prop="userNum" label="用户数" sortable />
|
||||||
|
<el-table-column prop="Increase" label="周涨幅" sortable>
|
||||||
|
<template #default="scope">
|
||||||
|
{{ scope.row.Increase }}
|
||||||
|
<el-icon :size="10" color="#52c41a">
|
||||||
|
<el-icon-caret-bottom />
|
||||||
|
</el-icon>
|
||||||
|
<el-icon :size="10" color="#f5222d">
|
||||||
|
<el-icon-caret-top />
|
||||||
|
</el-icon>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dis-f" style="justify-content: flex-end;margin-top:16px;padding:0 24px;">
|
||||||
|
<el-pagination layout="prev, pager, next" :total="50" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import xEcharts from '@/components/xEcharts';
|
||||||
|
import { setMark } from './tool.js'
|
||||||
|
export default {
|
||||||
|
title: "线上热门搜索",
|
||||||
|
icon: "el-icon-search",
|
||||||
|
description: "热门搜索数据",
|
||||||
|
components: {
|
||||||
|
xEcharts
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
seachOption: {
|
||||||
|
xAxis: {
|
||||||
|
show: false,
|
||||||
|
type: 'category',
|
||||||
|
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',
|
||||||
|
smooth: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
tableData: [
|
||||||
|
{ id: 1, seachKey: '搜索123', userNum: 158, Increase: '4%' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setNumMark(num) {
|
||||||
|
return setMark(num)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.pos-r {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dis-f {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.al-item {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jus-bet {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-text {
|
||||||
|
color: #000000d9;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-item {
|
||||||
|
background: #fff;
|
||||||
|
padding: 16px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box {
|
||||||
|
padding: 24px 24px 0 24px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #00000073;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-num-text {
|
||||||
|
color: #000000d9;
|
||||||
|
height: 32px;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
133
src/views/home/widgets/components/saleInfo.vue
Normal file
133
src/views/home/widgets/components/saleInfo.vue
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card-item">
|
||||||
|
<div class="dis-f al-item jus-bet box-text pd-24">
|
||||||
|
销售额类别占比
|
||||||
|
<el-dropdown>
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
<el-icon :size="15">
|
||||||
|
<el-icon-More />
|
||||||
|
</el-icon>
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item>Action 1</el-dropdown-item>
|
||||||
|
<el-dropdown-item>Action 2</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
<div class="line" style="margin-top:16px;"></div>
|
||||||
|
<div class="info-box pd-24">
|
||||||
|
<div class="mg-tb-32">销售额</div>
|
||||||
|
<div class="dis-f al-item">
|
||||||
|
<div style="width:100%;height:300px;">
|
||||||
|
<xEcharts ref="c1" :option="saleOption"></xEcharts>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import xEcharts from '@/components/xEcharts';
|
||||||
|
export default {
|
||||||
|
title: "销售额类别占比",
|
||||||
|
icon: "el-icon-help-filled",
|
||||||
|
description: "销售额类别",
|
||||||
|
components: {
|
||||||
|
xEcharts
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
saleOption:{
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
top: '5%',
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Access From',
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '70%'],
|
||||||
|
avoidLabelOverlap: false,
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 10,
|
||||||
|
borderColor: '#fff',
|
||||||
|
borderWidth: 2
|
||||||
|
},
|
||||||
|
label: {
|
||||||
|
show: false,
|
||||||
|
position: 'center'
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 1048, name: 'Search Engine' },
|
||||||
|
{ value: 735, name: 'Direct' },
|
||||||
|
{ value: 580, name: 'Email' },
|
||||||
|
{ value: 484, name: 'Union Ads' },
|
||||||
|
{ value: 300, name: 'Video Ads' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.dis-f {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.al-item {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jus-bet {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-text {
|
||||||
|
color: #000000d9;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-item {
|
||||||
|
background: #fff;
|
||||||
|
padding: 16px 0;
|
||||||
|
margin-top:15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
width: 100%;
|
||||||
|
height: 1px;
|
||||||
|
background: #f0f0f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box {
|
||||||
|
padding-top: 24px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #000000d9;
|
||||||
|
font-size:500;
|
||||||
|
}
|
||||||
|
.pd-24{
|
||||||
|
padding:0 24px;
|
||||||
|
}
|
||||||
|
.mg-tb-32{
|
||||||
|
margin:32px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
4
src/views/home/widgets/components/tool.js
Normal file
4
src/views/home/widgets/components/tool.js
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
const setMark=(num)=> {
|
||||||
|
return num.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
|
||||||
|
}
|
||||||
|
export {setMark}
|
||||||
@ -111,7 +111,7 @@
|
|||||||
comp.disabled = true
|
comp.disabled = true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
console.log(allCompsList)
|
// console.log(allCompsList)
|
||||||
return allCompsList
|
return allCompsList
|
||||||
},
|
},
|
||||||
myCompsList(){
|
myCompsList(){
|
||||||
@ -222,7 +222,7 @@
|
|||||||
border: 1px dashed var(--el-color-primary);
|
border: 1px dashed var(--el-color-primary);
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
}
|
}
|
||||||
.customize-overlay {position: absolute;top:0;right:0;bottom:0;left:0;z-index: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;background: rgba(255,255,255,0.9);cursor: move;}
|
.customize-overlay {position: absolute;top:0;right:0;bottom:0;left:0;z-index: 666;display: flex;flex-direction: column;align-items: center;justify-content: center;background: rgba(255,255,255,0.9);cursor: move;}
|
||||||
.customize-overlay label {background: var(--el-color-primary);color: #fff;height:40px;padding:0 30px;border-radius: 40px;font-size: 18px;display: flex;align-items: center;justify-content: center;cursor: move;}
|
.customize-overlay label {background: var(--el-color-primary);color: #fff;height:40px;padding:0 30px;border-radius: 40px;font-size: 18px;display: flex;align-items: center;justify-content: center;cursor: move;}
|
||||||
.customize-overlay label i {margin-right: 15px;font-size: 24px;}
|
.customize-overlay label i {margin-right: 15px;font-size: 24px;}
|
||||||
.customize-overlay .close {position: absolute;top:15px;right:15px;}
|
.customize-overlay .close {position: absolute;top:15px;right:15px;}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user