html
复制代码
<template>
<div>
<!-- 布局按钮 -->
<el-button @click="dialogVisible = true">布局配置查看</el-button>
<!-- 布局配置对话框 -->
<el-dialog :visible.sync="dialogVisible" title="布局配置查看" width="1200px">
<!-- 表单 -->
<el-form :inline="true" :model="filter" class="form-row">
<!-- 玩家 uid 输入框 -->
<el-form-item label="玩家 uid">
<el-input v-model="filter.uid" placeholder="请输入玩家 uid" clearable size="small"></el-input>
</el-form-item>
<!-- 游戏类型 id 输入框 -->
<el-form-item label="游戏类型 id">
<el-input v-model="filter.gameId" placeholder="请输入游戏类型 id" clearable size="small"></el-input>
</el-form-item>
<!-- 时间点选择器 -->
<el-form-item label="时间点">
<el-date-picker v-model="filter.timePoint" type="datetime" placeholder="请选择时间点" clearable size="small"></el-date-picker>
</el-form-item>
<!-- 搜索和重置按钮 -->
<el-form-item>
<el-button type="primary" @click="search" icon="el-icon-search" size="mini">搜索</el-button>
<el-button @click="reset" icon="el-icon-refresh" size="mini">重置</el-button>
</el-form-item>
</el-form>
<el-tabs v-model="activeTab">
<!-- 结束面板引流区页面 -->
<el-tab-pane label="开始面板引流区" name="drainage">
<el-card class="box-card-area">
<div class="component-list">
<el-button
v-for="(component, index) in drainComponents"
:key="component.comId"
class="component-button"
:style="getButtonStyle(index)"
>
<div>{{ component.name }}</div>
<div class="comId">{{ component.comId }}</div>
</el-button>
</div>
</el-card>
</el-tab-pane>
<!-- 结束面板数据区页面 -->
<el-tab-pane label="开始面板数据区" name="data">
<el-card class="box-card-area">
<div class="component-list">
<el-button
v-for="(component, index) in dataComponents"
:key="component.comId"
class="component-button"
:style="getButtonStyle(index)"
>
<div>{{ component.name }}</div>
<div class="comId">{{ component.comId }}</div>
</el-button>
</div>
</el-card>
</el-tab-pane>
<!-- 直播中默认区域页面 -->
<el-tab-pane label="生活中默认区域" name="default">
<el-card class="box-card-area">
<div class="component-list">
<el-button
v-for="(component, index) in liveComponents"
:key="component.comId"
class="component-button"
:style="getButtonStyle(index)"
>
<div>{{ component.name }}</div>
<div class="comId">{{ component.comId }}</div>
</el-button>
</div>
</el-card>
</el-tab-pane>
</el-tabs>
</el-dialog>
</div>
</template>
<script>
const generateSoftColor = () => {
const hue = Math.floor(Math.random() * 360);
const saturation = 60 + Math.random() * 20; // 饱和度在60%-80%之间
const lightness = 70 + Math.random() * 20; // 亮度在70%-90%之间
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
};
// 通用转换函数
const convertDataList = (dataList) => {
return dataList.map(item => ({
comId: item.comId,
name: item.name,
weight: item.weight,
color: generateSoftColor()
}));
};
const sortedDataList = (dataList) => {
return dataList.slice().sort((a, b) => b.weight - a.weight);
};
// 数据列表
const dataList1 = [
{ comId: '1000009', name: '对方如果', property: 0, type: 0, weight: 4 },
{ comId: '1000004', name: '辅导费人', property: 0, type: 0, weight: 1 },
{ comId: '1000010', name: '电电风扇', property: 0, type: 0, weight: 2 },
{ comId: '1000006', name: '小组件', property: 0, type: 0, weight: 3 },
{ comId: '1000007', name: '飒飒飒飒', property: 0, type: 0, weight: 5 },
{ comId: '1000011', name: '你说的分手', property: 0, type: 0, weight: 6 },
{ comId: '1000012', name: '大润发儿童', property: 0, type: 0, weight: 9 },
{ comId: '1000013', name: '大方的发过的', property: 0, type: 0, weight: 8 }
];
const dataList2 = [
{ comId: '1000001', name: '哈哈哈', property: 0, type: 1, weight: 2 },
{ comId: '1000005', name: '测试组件名称', property: 0, type: 1, weight: 2 },
{ comId: '1000002', name: '啦啦啦', property: 1, type: 0, weight: 0 }
];
const dataList3 = [
{ comId: '1000017', name: 'GV地方大幅度', property: 0, type: 0, weight: 3 },
{ comId: '1000016', name: '奋斗奋斗发的', property: 0, type: 0, weight: 2 },
{ comId: '1000008', name: '大幅度发', property: 0, type: 0, weight: 1 },
{ comId: '1000003', name: '似懂非懂发', property: 1, type: 1, weight: 0 },
{ comId: '1000014', name: '个人发一个发帖人', property: 0, type: 0, weight: 0 },
{ comId: '1000015', name: '会更好多说点', property: 0, type: 0, weight: 0 }
];
export default {
data() {
return {
dialogVisible: false,
activeTab: "drainage",
filter: {
uid: '',
gameId: '',
timePoint: ''
},
drainComponents: convertDataList(sortedDataList(dataList1)),
dataComponents: convertDataList(sortedDataList(dataList2)),
liveComponents: convertDataList(sortedDataList(dataList3))
};
},
methods: {
getButtonStyle(index) {
return {
backgroundColor: this.drainComponents[index]?.color,
paddingLeft: '5px',
paddingRight: '5px',
marginLeft: (index === 0) ? '10px' : '',
};
},
async search() {
/* eslint-disable */
const { uid, gameId, timePoint } = this.filter;
// 使用搜索条件调用获取组件数据的方法
this.drainComponents = await this.getComponents(uid, gameId, '');
this.dataComponents = await this.getComponents(uid, gameId, '');
this.liveComponents = await this.getComponents(uid, gameId, '');
},
reset() {
this.filter = {
uid: '',
gameId: '',
timePoint: ''
};
// 重置后的操作
},
async getComponents(uid, gameId, area) {
let componentsData = [];
try {
const response = await getComConfListItems({
'uid': uid,
'clientType': 1,
'clientVerNum': '',
'templateType': 0,
'gameId': gameId,
'area': area
});
console.log('快捷布局配置 getComConfListItems response.data: ', response.data);
componentsData = convertDataList(response.data);
} catch (error) {
console.error('Error fetching components:', error);
}
return componentsData;
}
},
};
</script>
<style scoped>
/* 表单行样式 */
.form-row {
margin-bottom: 20px;
}
/* 流式布局样式 */
.component-list {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.component-button {
display: flex;
flex-direction: column;
align-items: center;
}
.comId {
font-size: 12px;
color: gray;
}
/* 设置 el-card__body 的 padding */
::v-deep .box-card-area .el-card__body {
padding-top: 10px !important;
padding-bottom: 10px !important;
padding-right: 0px !important;
padding-left: 0px !important;
}
</style>
