新增组件

src/components/xEcharts/index.vue

@@ -62,6 +62,10 @@
 			setEchartOption(){
 				var myChart = echarts.init(this.$refs.xEcharts, 'T');
 				myChart.setOption(this.myOptions);
+			},
+			setSize(){
+				var myChart = echarts.init(this.$refs.xEcharts, 'T');
+				myChart.resize()
 			}
 		}
 	}

src/views/home/widgets/components/StoreConversionData.vue

@@ -0,0 +1,284 @@
+<template>
+    <div class="card-item">
+        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+            <el-tab-pane :stretch="true" :label="storeList[0].title + i" :name="i" v-for="(item, i) in storeList" :key="i">
+                <template #label>
+                    <div class="tab-box">
+                        {{ item.title }}
+                        <div class="tab-echart">
+                            <div class="text">
+                                转化率
+                                <div class="num">
+                                    {{ item.num }}%
+                                </div>
+                            </div>
+                            <div style="height:30px;width:30px;margin-left:15px;position: relative;">
+                                <div class="echart-pop" :class="{ 'echart-pop-tran': activeName == i }"></div>
+                                <xEcharts ref="c1" :option="item.saleOption"></xEcharts>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </el-tab-pane>
+        </el-tabs>
+        <div class="data-echart-box">
+            <xEcharts ref="c1" :option="storeOption"></xEcharts>
+        </div>
+    </div>
+</template>
+
+<script>
+import xEcharts from '@/components/xEcharts';
+export default {
+    title: "门店转化率",
+    icon: "el-icon-switch",
+    description: "门店转化率数据",
+    components: {
+        xEcharts
+    },
+    data() {
+        return {
+            activeName: 0,
+            storeList: [{
+                title: '门店'
+            }],
+            saleOption: {
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    top: '5%',
+                    left: 'center'
+                },
+                series: [
+                    {
+                        name: 'Access From',
+                        type: 'pie',
+                        radius: ['60%', '100%'],
+                        avoidLabelOverlap: false,
+                        label: {
+                            show: false,
+                            position: 'center'
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        itemStyle: {
+                            normal: {
+                                color: function (colors) {
+                                    var colorList = [
+                                        '#5470c6',
+                                    ];
+                                    return colorList[colors.dataIndex];
+                                }
+                            }
+                        },
+                        data: [
+                            { value: 80, name: '' },
+                            { value: 20, name: '' },
+                        ]
+                    }
+                ]
+            },
+            storeOption: {
+                tooltip: {
+                    trigger: 'axis'
+                },
+                legend: {
+                    data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+                },
+                grid: {
+                    left: '3%',
+                    right: '4%',
+                    bottom: '3%',
+                    containLabel: true
+                },
+                xAxis: {
+                    type: 'category',
+                    boundaryGap: false,
+                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+                },
+                yAxis: {
+                    type: 'value'
+                },
+                dataZoom: [
+                    {
+                        startValue: 'Mon'
+                    },
+                    {
+                        type: 'inside'
+                    }
+                ],
+                series: [
+                    {
+                        name: 'Email',
+                        type: 'line',
+                        data: [120, 132, 101, 134, 90, 230, 210]
+                    },
+                    {
+                        name: 'Union Ads',
+                        type: 'line',
+                        data: [220, 182, 191, 234, 290, 330, 310]
+                    },
+                    {
+                        name: 'Video Ads',
+                        type: 'line',
+                        data: [150, 232, 201, 154, 190, 330, 410]
+                    },
+                    {
+                        name: 'Direct',
+                        type: 'line',
+                        data: [320, 332, 301, 334, 390, 330, 320]
+                    },
+                    {
+                        name: 'Search Engine',
+                        type: 'line',
+                        data: [820, 932, 901, 934, 1290, 1330, 1320]
+                    }
+                ]
+            }
+        }
+    },
+    methods: {
+        setOption(data) {
+            let option = {}
+            this.saleOption.series[0].data = data ? data : [{ value: 80, name: '' }, { value: 20, name: '' }]
+            option = JSON.parse(JSON.stringify(this.saleOption))
+            return option
+        },
+        //设置获取数据
+        setList(data = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) {
+            let arr = []
+            data.map(res => {
+                let obj = {}
+                obj['title'] = res.title ? res.title : `门店${res}`
+                obj['num'] = res % 2 ? 80 : 60
+                obj['saleOption'] = this.setOption([{ value: res % 2 ? 80 : 60, name: '' }, { value: res % 2 ? 20 : 40, name: '' }])
+                arr.push(obj)
+            })
+            this.storeList = arr
+        },
+        //设置门店数据 设置dataZoom、series
+        setStoreOption(data={}){
+            this.storeOption.series=data.list?data.list:this.storeOption.series
+            this.storeOption.dataZoom=[{startValue: 'Mon'},{type: 'inside'}]
+        },
+        //设置series属性
+        setStoreSeries(data){
+            let arr=[]
+            data.map(res=>{
+                let obj={
+                    name: '',
+                    type: 'line',
+                    data: []
+                }
+                obj['type']=res.title
+                obj['data']=res.data
+                arr.push(obj)
+            })
+            console.log(arr)
+            return arr
+        },
+        refView(){
+            this.$refs.c1.setSize()
+        }
+    },
+    mounted() {
+        this.setList()
+    },
+}
+</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;
+    margin-bottom: 16px;
+}
+
+.tab-box {
+    height: 100px;
+    color: #000000d9;
+    font-size: 16px;
+}
+
+.tab-echart {
+    display: flex;
+    align-items: center;
+}
+
+.tab-echart .text {
+    color: #00000073;
+    font-size: 14px;
+    line-height: 22px;
+}
+
+.tab-echart .text .num {
+    height: 32px;
+    color: #000000d9;
+    font-size: 24px;
+    line-height: 32px;
+}
+
+.echart-pop {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 66;
+    background: rgba(255, 255, 255, 0.5);
+}
+
+.echart-pop-tran {
+    background: transparent;
+}
+
+.data-echart-box {
+    width: 100%;
+    height: 450px;
+}
+
+::v-deep .el-tabs__nav-scroll {
+    margin: 0 24px;
+    height: 100%;
+}
+
+::v-deep .el-tabs__nav-wrap.is-scrollable {
+    height: 100px;
+}
+
+::v-deep .el-tabs__nav-prev {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+::v-deep .el-tabs__nav-next {
+    display: flex;
+    align-items: center;
+    height: 100%;
+}
+
+::v-deep .el-tabs__nav {
+    height: 100px;
+}
+
+/* ::v-deep .el-tabs{
+    --el-tabs-header-height: 100px;
+} */
+</style>

src/views/home/widgets/components/StoreData.vue

@@ -68,6 +68,9 @@ export default {
         },
         determineNum(num){
             return num<10?'0'+num:num
+        },
+        refView(){
+            this.$refs.c1.setSize()
         }
     },
     mounted() {
@@ -96,6 +99,8 @@ export default {
 .card-item {
     width: 100%;
     background: #fff;
+    margin-bottom:16px;
+    min-width:535px;
 }
 
 .tabs-box {
@@ -128,6 +133,12 @@ export default {
     color:#409EFF !important;
 }
 
+@media screen and (max-width: 1115px) {
+    .date-tool-title {
+        display: none;
+    }
+}
+
 ::v-deep .el-tabs__nav-scroll {
     margin: 0 24px;
 }

src/views/home/widgets/components/allDataFrom.vue

@@ -276,7 +276,7 @@ export default {
 
 @media (min-width:550px) and (max-width: 1115px) {
     .card-item {
-        width: 48%;
+        width: 49.2%;
         min-width: 246px;
         /* margin-right: 10px; */
     }

src/views/home/widgets/components/component/StoreInfo.vue

@@ -14,8 +14,8 @@
                 <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>
+                        <div class="list-title-text">{{ item.title }}</div>
-                        <span>{{ setNumMark(item.num) }}</span>
+                        <div>{{ setNumMark(item.num) }}</div>
                     </div>
                 </div>
             </div>
@@ -35,16 +35,16 @@ export default {
             type: String,
             default: 'sales'
         },
-        listData:{
+        listData: {
-            type:Array,
+            type: Array,
-            default:function(){
+            default: function () {
                 return []
             }
         }
     },
-    watch:{
+    watch: {
-        listData(nval){
+        listData(nval) {
-            this.payOption.series[0].data=nval
+            this.payOption.series[0].data = nval
         }
     },
     data() {
@@ -154,9 +154,10 @@ export default {
     width: 100%;
 }
 
-.mg-t-16{
+.mg-t-16 {
-    margin-top:16px;
+    margin-top: 16px;
 }
+
 .list-num {
     width: 20px;
     height: 20px;
@@ -173,4 +174,17 @@ export default {
 .list-top {
     color: #fff;
     background: #314659;
-}</style>
+}
+
+.list-title-text {
+    max-width: 100px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+@media screen and (max-width: 550px) {
+    .list-title-text{
+        min-width:20px;
+    }
+}
+</style>

src/views/home/widgets/components/hotSearch.vue

@@ -150,6 +150,9 @@ export default {
     methods: {
         setNumMark(num) {
             return setMark(num)
+        },
+        refView(){
+            this.$refs.c1.setSize()
         }
     },
     mounted() {
@@ -184,6 +187,7 @@ export default {
 .card-item {
     background: #fff;
     padding: 16px 0;
+    margin-bottom:15px;
 }
 
 .line {

src/views/home/widgets/components/saleInfo.vue

@@ -20,8 +20,8 @@
         <div class="info-box pd-24">
             <div class="mg-tb-32">销售额</div>
             <div class="dis-f al-item">
-                <div style="width:100%;height:300px;">
+                <div style="width:100%;height:300px;min-width:400px;">
-                   <xEcharts ref="c1" :option="saleOption"></xEcharts> 
+                    <xEcharts ref="c1" :option="saleOption"></xEcharts>
                 </div>
             </div>
         </div>
@@ -39,49 +39,72 @@ export default {
     },
     data() {
         return {
-            saleOption:{
+            list: [{ value: 1048, name: '123' },
-  tooltip: {
+            { value: 735, name: 'Direct' },
-    trigger: 'item'
+            { value: 580, name: 'Email' },
-  },
+            { value: 484, name: 'Union Ads' },
-  legend: {
+            { value: 300, name: 'Video Ads' }],
-    top: '5%',
+            saleOption: {}
-    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: {
-        
+        setSaleOption(){
+            this.saleOption={
+                tooltip: {
+                    trigger: 'item'
+                },
+                legend: {
+                    left: '70%',
+                    top: 'center',
+                    width: 50,
+                    formatter: (name)=> {
+                        // console.log(data, 'data')
+                        let total = 0
+                        let tarValue
+                        for (let i = 0; i < this.list.length; i++) {
+                            total += this.list[i].value
+                            if (this.list[i].name == name) {
+                                tarValue = this.list[i].value
+                            }
+                        }
+                        let v = tarValue
+                        //计算出百分比
+                        let p = Math.round((tarValue / total) * 100) + '%'
+                        return `${name}  ${p}   ${v}`
+                        //name是名称，v是数值
+                    },
+                    data: this.list
+                },
+                series: [
+                    {
+                        name: 'Access From',
+                        type: 'pie',
+                        radius: ['50%', '80%'],
+                        avoidLabelOverlap: false,
+                        center:['30%','50%'],
+                        itemStyle: {
+                            borderRadius: 10,
+                            borderColor: '#fff',
+                            borderWidth: 2
+                        },
+                        label: {
+                            show: false,
+                            position: 'left'
+                        },
+                        labelLine: {
+                            show: false
+                        },
+                        data: this.list
+                    }
+                ]
+            }
+        },
+        refView(){
+            this.$refs.c1.setSize()
+        }
     },
     mounted() {
-
+        this.setSaleOption()
     },
 }
 </script>
@@ -108,7 +131,7 @@ export default {
 .card-item {
     background: #fff;
     padding: 16px 0;
-    margin-top:15px;
+    margin-bottom: 15px;
 }
 
 .line {
@@ -121,13 +144,14 @@ export default {
     padding-top: 24px;
     font-size: 14px;
     color: #000000d9;
-    font-size:500;
+    font-size: 500;
-}
-.pd-24{
-    padding:0 24px;
-}
-.mg-tb-32{
-    margin:32px 0;
 }
 
+.pd-24 {
+    padding: 0 24px;
+}
+
+.mg-tb-32 {
+    margin: 32px 0;
+}
 </style>

src/views/home/widgets/index.vue

@@ -11,19 +11,19 @@
 						<el-empty description="没有部件啦" :image-size="280"></el-empty>
 					</div>
 
-					<el-row :gutter="15">
+					<el-row :gutter="15" >
 						<draggable v-model="widgets" animation="100" handle=".customize-overlay" group="people" item-key="com" force-fallback fallbackOnBody class="draggable-box">
 							<template #item="{ element }">
 								<el-col :md="parseInt(element.layout) || 24" :xs="24">
 									<div class="widgets-item">
-										<component :is="allComps[element.name]"></component>
+										<component :is="allComps[element.name]" :ref="`components${allComps[element.name].title}`"></component>
 										<div v-if="customizing" class="customize-overlay">
 											<el-button class="close" type="danger" plain icon="el-icon-close" size="small" @click="remove(element.name)"></el-button>
 											<label>
 												<el-icon><component :is="allComps[element.name].icon" /></el-icon>
 												{{ allComps[element.name].title }}
 											</label>
-											<el-input-number v-model="element.layout" :min="4" :max="24" />
+											<el-input-number v-model="element.layout" :min="4" :max="24" @change="sizeChange(allComps[element.name].title)" />
 										  	<!-- <el-slider v-model="element.layout" :min="4" :max="24" :step="1" show-stops /> -->
 										</div>
 									</div>
@@ -169,6 +169,11 @@
 			close(){
 				this.customizing = false
 				this.$refs.widgets.style.removeProperty('transform')
+			},
+			//修改组件大小
+			sizeChange(name){
+				// console.log(this.$refs[`components${name}`])
+				this.$refs[`components${name}`].refView()
 			}
 		}
 	}