XiaoMo/x-php-Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

组件样式调整

Browse Source
This commit is contained in:
luJianJun 2023-08-30 15:42:58 +08:00
parent fcfb425ccc
commit 579daaac0a
10 changed files with 124 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.vue
View File

@ -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() {

4
src/components/xEcharts/index.vue
View File

@ -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');
myChart.resize()
nextTick(()=>this.myChart.resize())
}
}
}

20
src/main.js
View File

@ -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);

4
src/views/home/widgets/components/StoreConversionData.vue
View File

@ -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(){

25
src/views/home/widgets/components/StoreData.vue
View File

@ -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 {

41
src/views/home/widgets/components/allDataFrom.vue
View File

@ -1,12 +1,12 @@
<template>
<div class="card-box">
<el-card shadow="hover" class="card-item" v-for="(item, i) in list" :key="i">
<div class="card-box" :class="{'jus-bet':!resizeDom}" ref="reizeCardDom">
<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>

9
src/views/home/widgets/components/component/StoreInfo.vue
View File

@ -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 {
width: 70%
.w-69 {
width: 69%
}
.w-30 {

8
src/views/home/widgets/components/hotSearch.vue
View File

@ -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() {

7
src/views/home/widgets/components/saleInfo.vue
View File

@ -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: {

20
src/views/home/widgets/index.vue
View File

@ -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()
}
}
}