From 73b12f808a45eda98964041f8c96ae92ea9200f1 Mon Sep 17 00:00:00 2001
From: luJianJun <2587063613@qq.com>
Date: Tue, 29 Aug 2023 10:43:10 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=9B=BE=E6=A0=87=E7=BB=84?=
=?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/xEcharts/index.vue | 6 +-
.../home/widgets/components/StoreData.vue | 139 ++++++++++++
.../home/widgets/components/allDataFrom.vue | 201 ++++++++---------
.../components/component/StoreInfo.vue | 176 +++++++++++++++
.../home/widgets/components/hotSearch.vue | 208 ++++++++++++++++++
.../home/widgets/components/saleInfo.vue | 133 +++++++++++
src/views/home/widgets/components/tool.js | 4 +
src/views/home/widgets/index.vue | 4 +-
8 files changed, 770 insertions(+), 101 deletions(-)
create mode 100644 src/views/home/widgets/components/StoreData.vue
create mode 100644 src/views/home/widgets/components/component/StoreInfo.vue
create mode 100644 src/views/home/widgets/components/hotSearch.vue
create mode 100644 src/views/home/widgets/components/saleInfo.vue
create mode 100644 src/views/home/widgets/components/tool.js
diff --git a/src/components/xEcharts/index.vue b/src/components/xEcharts/index.vue
index 7d00e8c..84c0a40 100644
--- a/src/components/xEcharts/index.vue
+++ b/src/components/xEcharts/index.vue
@@ -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);
}
}
}
diff --git a/src/views/home/widgets/components/StoreData.vue b/src/views/home/widgets/components/StoreData.vue
new file mode 100644
index 0000000..81fe6eb
--- /dev/null
+++ b/src/views/home/widgets/components/StoreData.vue
@@ -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>
diff --git a/src/views/home/widgets/components/allDataFrom.vue b/src/views/home/widgets/components/allDataFrom.vue
index ea2cb88..e1898a4 100644
--- a/src/views/home/widgets/components/allDataFrom.vue
+++ b/src/views/home/widgets/components/allDataFrom.vue
@@ -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>
diff --git a/src/views/home/widgets/components/component/StoreInfo.vue b/src/views/home/widgets/components/component/StoreInfo.vue
new file mode 100644
index 0000000..f9bdd89
--- /dev/null
+++ b/src/views/home/widgets/components/component/StoreInfo.vue
@@ -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>
diff --git a/src/views/home/widgets/components/hotSearch.vue b/src/views/home/widgets/components/hotSearch.vue
new file mode 100644
index 0000000..9c8a0b9
--- /dev/null
+++ b/src/views/home/widgets/components/hotSearch.vue
@@ -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>
diff --git a/src/views/home/widgets/components/saleInfo.vue b/src/views/home/widgets/components/saleInfo.vue
new file mode 100644
index 0000000..2df497a
--- /dev/null
+++ b/src/views/home/widgets/components/saleInfo.vue
@@ -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>
diff --git a/src/views/home/widgets/components/tool.js b/src/views/home/widgets/components/tool.js
new file mode 100644
index 0000000..e05fec1
--- /dev/null
+++ b/src/views/home/widgets/components/tool.js
@@ -0,0 +1,4 @@
+const setMark=(num)=> {
+ return num.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+}
+export {setMark}
\ No newline at end of file
diff --git a/src/views/home/widgets/index.vue b/src/views/home/widgets/index.vue
index 77e0a6b..7ce7b1f 100644
--- a/src/views/home/widgets/index.vue
+++ b/src/views/home/widgets/index.vue
@@ -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;}