组件样式调整

src/App.vue

@@ -7,6 +7,25 @@
 <script>
 	import colorTool from '@/utils/color'
 
+	const debounce = (fn,delay)=>{
+		let timer = null;
+		return function (){
+			let context=this;
+			let args = arguments;
+			clearImmediate(timer);
+			timer=setTimeout(function(){
+				fn.apply(context,args);
+			},delay)
+		}
+	}
+	const _ResizeObserver=window.ResizeObserver;
+	window.ResizeObserver=class ResizeObserver extends _ResizeObserver{
+		constructor(callback) {
+			callback=debounce(callback,16);
+			super(callback)
+		}
+	}
+
 	export default {
 		name: 'App',
 		data() {

src/components/xEcharts/index.vue

@@ -5,6 +5,7 @@
 <script>
 	import * as echarts from 'echarts';
 	import T from './echarts-theme-T.js';
+import { nextTick } from 'vue';
 	echarts.registerTheme('T', T);
 	const unwarp = (obj) => obj && (obj.__v_raw || obj.valueOf() || obj);
 
@@ -64,8 +65,7 @@
 				myChart.setOption(this.myOptions);
 			},
 			setSize(){
-				var myChart = echarts.init(this.$refs.xEcharts, 'T');
+				nextTick(()=>this.myChart.resize())
-				myChart.resize()
 			}
 		}
 	}

src/main.js

@@ -10,6 +10,26 @@ import App from './App.vue'
 
 const app = createApp(App);
 
+const debounce = (fn, delay) => {
+    let timer = null;
+    return function () {
+        let context = this;
+        let args = arguments;
+        clearTimeout(timer);
+        timer = setTimeout(function () {
+            fn.apply(context, args);
+        }, delay);
+    }
+}
+
+const _ResizeObserver = window.ResizeObserver;
+window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
+    constructor(callback) {
+        callback = debounce(callback, 16);
+        super(callback);
+    }
+}
+
 app.use(store);
 app.use(router);
 app.use(ElementPlus);

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

@@ -14,7 +14,7 @@
                             </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>
+                                <xEcharts ref="topInfo" :option="item.saleOption"></xEcharts>
                             </div>
                         </div>
                     </div>
@@ -176,7 +176,7 @@ export default {
                 obj['data']=res.data
                 arr.push(obj)
             })
-            console.log(arr)
+            // console.log(arr)
             return arr
         },
         refView(){

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

@@ -1,9 +1,9 @@
 <template>
-    <div class="card-item">
+    <div class="card-item" ref="storeDataDom">
         <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
+                :class="[{ 'mg-l-24': i > 0 },{'date-tool-title-check':item.type===dateTab},{'dis-n':dateBtn}]" @click="dateTabCheck(item.type)">{{ item.title
                 }}</span>
                 <div class="time-mg">
                    <el-date-picker
@@ -19,7 +19,7 @@
                 </el-tab-pane>
                 <el-tab-pane label="访问量" name="access">
                 </el-tab-pane>
-                <storeInfo :data-type="activeName" 
+                <storeInfo ref="c1" :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>
@@ -33,6 +33,7 @@ export default {
     title: "门店数据",
     icon: "el-icon-data-board",
     description: "门店销售/访问量数据",
+    minWidth:10,
     components: {
         xEcharts,
         storeInfo
@@ -42,7 +43,9 @@ export default {
             activeName: 'sales',
             dateList: [{title:'今日',type:'day'}, {title:'本周',type:'week'},{title:'本月',type:'month'}, {title:'全年',type:'year'}],
             dateData:['',''],
-            dateTab:''
+            dateTab:'',
+            resize:'',
+            dateBtn:false
         }
     },
     methods: {
@@ -74,8 +77,19 @@ export default {
         }
     },
     mounted() {
+        this.resize=new ResizeObserver((e)=>{
+            if(e[0].contentRect.width<850){
+                this.dateBtn=true
+            }else{
+                this.dateBtn=false
+            }
+        })
+        this.resize.observe(this.$refs.storeDataDom)
         
     },
+    beforeUnmount(){
+        this.resize.unobserve(this.$refs.storeDataDom)
+    }
 }
 </script>
 
@@ -132,6 +146,9 @@ export default {
 .date-tool-title-check{
     color:#409EFF !important;
 }
+.dis-n{
+    display: none;
+}
 
 @media screen and (max-width: 1115px) {
     .date-tool-title {

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

@@ -1,12 +1,12 @@
 <template>
-    <div class="card-box">
+    <div class="card-box" :class="{'jus-bet':!resizeDom}" ref="reizeCardDom">
-        <el-card shadow="hover" class="card-item" v-for="(item, i) in list" :key="i">
+        <el-card shadow="hover" class="card-item" :class="[resizeDom===1?'w-49':resizeDom===2?'w-100':'',{'mg-l-15':resizeDom===1&&!((i+1)%2)}]" 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 :size="15">
                         <el-icon-warning-filled />
-                    </el-icon>
+                    </el-icon> -->
                 </div>
                 <div class="item-price mg-t-10 mg-b-3" style="margin-left: -6px;">
                     <span v-if="item.type == 'sale'"><span style="margin-right:2px;">￥</span>{{ setNumMark('45123456')
@@ -87,7 +87,8 @@ export default {
     },
     data() {
         return {
-
+            resizeDom: 0,
+            resize: '',
             list: [
                 {
                     type: 'sale',
@@ -160,7 +161,20 @@ export default {
         }
     },
     mounted() {
+        this.resize = new ResizeObserver((e) => {
+            if (e[0].contentRect.width <= 1000&&e[0].contentRect.width>=415) {
+                this.resizeDom = 1
+            } else if(e[0].contentRect.width < 415){
+                this.resizeDom = 2
+            }else{
+                this.resizeDom = 0
+            }
+        })
+        this.resize.observe(this.$refs.reizeCardDom)
     },
+    beforeUnmount(){
+        this.resize.unobserve(this.$refs.reizeCardDom)
+    }
 }
 </script>
 
@@ -200,11 +214,13 @@ export default {
 .mouse-c {
     cursor: pointer;
 }
+.mg-l-15{
+    margin-left:15px;
+}
 
 .card-box {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     flex-wrap: wrap;
 }
 
@@ -260,6 +276,12 @@ export default {
     height: 3px;
     width: 2px;
 }
+.w-100{
+    width:100% !important;
+}
+.w-49{
+    width:48.7% !important;
+}
 
 /* .el-progress--line {
     width: 350px
@@ -268,7 +290,7 @@ export default {
     display: block;
 }
 
-@media screen and (max-width: 550px) {
+/* @media screen and (max-width: 550px) {
     .card-item {
         width: 100%;
     }
@@ -276,9 +298,8 @@ export default {
 
 @media (min-width:550px) and (max-width: 1115px) {
     .card-item {
-        width: 49.2%;
+        width: 48.7%;
         min-width: 246px;
-        /* margin-right: 10px; */
     }
-}
+} */
 </style>

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

@@ -1,6 +1,6 @@
 <template>
     <div class="dis-f al-item jus-bet box-pd font">
-        <div class="w-70">
+        <div class="w-69">
             <div style="margin-bottom:20px">
                 {{ dataType === 'sales' ? '销售趋势' : '访问量趋势' }}
             </div>
@@ -107,6 +107,9 @@ export default {
     methods: {
         setNumMark(num) {
             return setMark(num)
+        },
+        setSize(){
+            this.$refs.c1.setSize()
         }
     },
     mounted() {
@@ -142,8 +145,8 @@ export default {
     font-size: 14px;
 }
 
-.w-70 {
+.w-69 {
-    width: 70%
+    width: 69%
 }
 
 .w-30 {

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

@@ -48,7 +48,7 @@
                         </span>
                     </div>
                     <div>
-                        <xEcharts ref="c1" height="45px" :option="seachOption"></xEcharts>
+                        <xEcharts ref="use" height="45px" :option="seachOption"></xEcharts>
                     </div>
                 </div>
                 <div style="flex: 0.5;">
@@ -80,7 +80,7 @@
                         </span>
                     </div>
                     <div>
-                        <xEcharts ref="c1" height="45px" :option="seachOption"></xEcharts>
+                        <xEcharts ref="person" height="45px" :option="seachOption"></xEcharts>
                     </div>
                 </div>
             </div>
@@ -116,6 +116,7 @@ export default {
     title: "线上热门搜索",
     icon: "el-icon-search",
     description: "热门搜索数据",
+    minWidth:8,
     components: {
         xEcharts
     },
@@ -152,7 +153,8 @@ export default {
             return setMark(num)
         },
         refView(){
-            this.$refs.c1.setSize()
+            this.$refs.use.setSize()
+            this.$refs.person.setSize()
         }
     },
     mounted() {

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

@@ -20,7 +20,7 @@
         <div class="info-box pd-24">
             <div class="mg-tb-32">销售额</div>
             <div class="dis-f al-item">
-                <div style="width:100%;height:300px;min-width:400px;">
+                <div style="width:100%;height:381px;">
                     <xEcharts ref="c1" :option="saleOption"></xEcharts>
                 </div>
             </div>
@@ -34,6 +34,7 @@ export default {
     title: "销售额类别占比",
     icon: "el-icon-help-filled",
     description: "销售额类别",
+    minWidth:9,
     components: {
         xEcharts
     },
@@ -54,7 +55,7 @@ export default {
                     trigger: 'item'
                 },
                 legend: {
-                    left: '70%',
+                    left: '60%',
                     top: 'center',
                     width: 50,
                     formatter: (name)=> {
@@ -79,7 +80,7 @@ export default {
                     {
                         name: 'Access From',
                         type: 'pie',
-                        radius: ['50%', '80%'],
+                        radius: ['30%', '60%'],
                         avoidLabelOverlap: false,
                         center:['30%','50%'],
                         itemStyle: {

src/views/home/widgets/index.vue

@@ -16,14 +16,14 @@
 							<template #item="{ element }">
 								<el-col :md="parseInt(element.layout) || 24" :xs="24">
 									<div class="widgets-item">
-										<component :is="allComps[element.name]" :ref="`components${allComps[element.name].title}`"></component>
+										<component :is="allComps[element.name]" :ref="`components${element.name}`"></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" @change="sizeChange(allComps[element.name].title)" />
+											<el-input-number v-model="element.layout" :min="allComps[element.name].minWidth?allComps[element.name].minWidth:4" :max="24" @change="sizeChange(element.name)" />
 										  	<!-- <el-slider v-model="element.layout" :min="4" :max="24" :step="1" show-stops /> -->
 										</div>
 									</div>
@@ -85,6 +85,7 @@
 			this.defaultGrid = this.$tool.data.get("defaultgrid") || this.$config.DEFAULT_GRID
 
 			this.widgets = this.$tool.data.get('widgets');
+			console.log(this.widgets)
 			if (this.widgets.length==0) {
 				this.widgets = JSON.parse(JSON.stringify(this.defaultGrid))
 			}
@@ -100,7 +101,8 @@
 						key: key,
 						title: allComps[key].title,
 						icon: allComps[key].icon,
-						description: allComps[key].description
+						description: allComps[key].description,
+						minWidth:allComps[key].minWidth
 					})
 				}
 				
@@ -111,12 +113,11 @@
 						comp.disabled = true
 					}
 				}
-				// console.log(allCompsList)
+				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))
 				}
@@ -131,6 +132,13 @@
 				this.$nextTick(() => {
 					const scale =  this.$refs.widgets.offsetWidth / oldWidth
 					this.$refs.widgets.style.setProperty('transform', `scale(${scale})`)
+					this.setDomWidth(this.widgets)
+				})
+			},
+			//缩小窗口刷新元素
+			setDomWidth(data){
+				data.map(res=>{
+					this.sizeChange(res.name)
 				})
 			},
 			//追加
@@ -173,7 +181,7 @@
 			//修改组件大小
 			sizeChange(name){
 				// console.log(this.$refs[`components${name}`])
-				this.$refs[`components${name}`].refView()
+				this.$refs[`components${name}`].refView&&this.$refs[`components${name}`].refView()
 			}
 		}
 	}