From 84f1a7b88fec5da4165bc04abc4a1f8294235fcb Mon Sep 17 00:00:00 2001
From: luJianJun <2587063613@qq.com>
Date: Fri, 25 Aug 2023 18:55:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=B1=95=E7=A4=BA=E6=A8=A1?=
 =?UTF-8?q?=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/widgets/components/allDataFrom.vue   | 279 ++++++++++++++++++
 src/views/home/widgets/index.vue              |   4 +-
 2 files changed, 282 insertions(+), 1 deletion(-)
 create mode 100644 src/views/home/widgets/components/allDataFrom.vue

diff --git a/src/views/home/widgets/components/allDataFrom.vue b/src/views/home/widgets/components/allDataFrom.vue
new file mode 100644
index 0000000..ea2cb88
--- /dev/null
+++ b/src/views/home/widgets/components/allDataFrom.vue
@@ -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>
diff --git a/src/views/home/widgets/index.vue b/src/views/home/widgets/index.vue
index 4838903..77e0a6b 100644
--- a/src/views/home/widgets/index.vue
+++ b/src/views/home/widgets/index.vue
@@ -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))
 				}