新增图标组件
This commit is contained in:
parent
84f1a7b88f
commit
73b12f808a
@ -27,7 +27,7 @@
|
||||
option: {
|
||||
deep:true,
|
||||
handler (v) {
|
||||
unwarp(this.myChart).setOption(v);
|
||||
unwarp(this.myChart)&&unwarp(this.myChart).setOption(v);
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -58,6 +58,10 @@
|
||||
myChart.setOption(this.myOptions);
|
||||
this.myChart = myChart;
|
||||
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>
|
||||
<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 class="item-text dis-f al-item jus-bet">
|
||||
总销售额
|
||||
{{ item.title }}
|
||||
<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') }}
|
||||
<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 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 v-if="item.type == 'sale'">
|
||||
<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">
|
||||
@ -103,14 +29,55 @@
|
||||
</el-icon>
|
||||
</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>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as echarts from 'echarts';
|
||||
import xEcharts from '@/components/xEcharts';
|
||||
import { setMark } from './tool.js'
|
||||
export default {
|
||||
title: "各项数据",
|
||||
icon: "el-icon-trend-charts",
|
||||
@ -120,6 +87,25 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
list: [
|
||||
{
|
||||
type: 'sale',
|
||||
title: '销售总额'
|
||||
},
|
||||
{
|
||||
type: 'access',
|
||||
title: '访问总量'
|
||||
},
|
||||
{
|
||||
type: 'payment',
|
||||
title: '支付笔数'
|
||||
},
|
||||
{
|
||||
type: 'operate',
|
||||
title: '运营活动效果图'
|
||||
},
|
||||
],
|
||||
accessOption: {
|
||||
xAxis: {
|
||||
show: false,
|
||||
@ -139,7 +125,7 @@ export default {
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: 'line',
|
||||
areaStyle: {}
|
||||
// areaStyle: {}
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -169,19 +155,11 @@ export default {
|
||||
}
|
||||
},
|
||||
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);
|
||||
setNumMark(num) {
|
||||
return setMark(num)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setEchart()
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@ -227,10 +205,13 @@ export default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
width: 24%;
|
||||
min-width: 246px;
|
||||
/* margin-right: 10px; */
|
||||
}
|
||||
|
||||
.item-text {
|
||||
@ -261,19 +242,43 @@ export default {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.progress-box .line {
|
||||
.progress-box .line-box {
|
||||
height: 20px;
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
top: -6px;
|
||||
top: -7px;
|
||||
z-index: 6;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.progress-box .line-box .line {
|
||||
background: #409EFF;
|
||||
height: 3px;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
/* .el-progress--line {
|
||||
width: 350px
|
||||
} */
|
||||
::v-deep .el-progress{
|
||||
display:block;
|
||||
::v-deep .el-progress {
|
||||
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>
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
console.log(allCompsList)
|
||||
// console.log(allCompsList)
|
||||
return allCompsList
|
||||
},
|
||||
myCompsList(){
|
||||
@ -222,7 +222,7 @@
|
||||
border: 1px dashed var(--el-color-primary);
|
||||
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 i {margin-right: 15px;font-size: 24px;}
|
||||
.customize-overlay .close {position: absolute;top:15px;right:15px;}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user