This commit is contained in:
2025-12-24 10:53:45 +08:00
parent ed53ca187f
commit e514536d1b
6 changed files with 655 additions and 225 deletions

View File

@@ -1,6 +1,6 @@
export default {
baseUrl: 'https://fw.rc.qingdao.gov.cn/rgpp-api/api', // 内网
// baseUrl: 'https://qd.zhaopinzao8dian.com/api', // 测试
// baseUrl: 'https://fw.rc.qingdao.gov.cn/rgpp-api/api', // 内网
baseUrl: 'https://qd.zhaopinzao8dian.com/api', // 测试
// baseUrl: 'http://192.168.3.29:8081',
// baseUrl: 'http://10.213.6.207:19010/api',
// 语音转文字

View File

@@ -50,7 +50,7 @@
"quickapp" : {},
/* */
"mp-weixin" : {
"appid" : "",
"appid" : "wxdbdcc6a10153c99b",
"setting" : {
"urlCheck" : false,
"es6" : true,

View File

@@ -0,0 +1,395 @@
<template>
<view class="out">
<view v-if="loading" class="loading">
<view class="semicircle-loader"></view>
</view>
<view v-else class="container" id="pixi-box" ref="pixiContainerRef"></view>
</view>
</template>
<script setup>
import { onMounted, onUnmounted, ref, nextTick, watch } from 'vue';
const props = defineProps({
tags: {
type: Array,
default: [],
},
loading: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(['tag-click']);
// DOM Ref
const pixiContainerRef = ref(null);
// PIXI 变量
let app = null;
let tagsContainer = null;
let activeTagInstances = [];
// 配置数据
const tagsConfig = ref([
{ bgColor: 0x0069fe, fontColor: 0xffffff, size: 16, opacity: 1.0, angle: 0, radius: 0 },
{
bgColor: 0x87e2ec,
fontColor: 0xffffff,
size: 14,
opacity: 1,
angle: -Math.PI / 2,
radius: 68,
tailRotation: Math.PI / 2,
},
{
bgColor: 0xffebeb,
tailColor: 0xffe1e1,
fontColor: 0xff6969,
size: 11.5,
opacity: 1,
angle: -Math.PI / 4.2,
radius: 125,
tailRotation: (3 * Math.PI) / 4.5,
},
{
bgColor: 0x21ea85,
fontColor: 0xffffff,
size: 15,
opacity: 1,
angle: -Math.PI / 10,
radius: 130,
tailRotation: (3 * Math.PI) / 4.2,
},
{
bgColor: 0xebf3ff,
tailColor: 0xb9d3ff,
fontColor: 0x1d71ef,
size: 12,
opacity: 1,
angle: Math.PI / 18,
radius: 135,
tailRotation: (3 * Math.PI) / 4.3,
},
{
bgColor: 0xffd4b6,
fontColor: 0xffffff,
size: 14,
opacity: 1,
angle: Math.PI / 4.3,
radius: 100,
tailRotation: -(3 * Math.PI) / 4.5,
},
{
bgColor: 0xff9400,
fontColor: 0xffffff,
size: 14,
opacity: 1,
angle: (2 * Math.PI) / 3,
radius: 92,
tailRotation: -Math.PI / 2.4,
},
{
bgColor: 0xebf3ff,
tailColor: 0xb9d3ff,
fontColor: 0x1d71ef,
size: 10.5,
opacity: 1,
angle: (5.4 * Math.PI) / 6,
radius: 110,
tailRotation: (3 * Math.PI) / 1.79,
},
{
bgColor: 0xff6969,
fontColor: 0xffffff,
size: 14,
opacity: 1,
angle: (6.3 * Math.PI) / 5.8,
radius: 120,
tailRotation: Math.PI / 2.9,
},
{
bgColor: 0xfce9c9,
fontColor: 0xfbc55f,
size: 13,
opacity: 1,
angle: (7.2 * Math.PI) / 5.9,
radius: 120,
tailRotation: Math.PI / 3,
},
]);
watch(
() => props.tags,
(val) => {
if (val && val.length) {
tagsConfig.value.map((tag, index) => {
// console.log(val[index])
tag.name = val[index]?.job_name;
});
setTimeout(() => {
initPixi();
}, 100);
}
},
{ deep: true }
);
onMounted(async () => {
window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
if (app) {
app.destroy(true, { children: true, texture: true, baseTexture: true });
app = null;
}
});
const getContainerDOM = () => {
const refVal = pixiContainerRef.value;
if (!refVal) return document.getElementById('pixi-box');
if (refVal.$el) return refVal.$el;
return refVal;
};
const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
const initPixi = () => {
const container = getContainerDOM();
if (!container) return;
const width = container.clientWidth || 300;
const height = container.clientHeight || 300;
if (app) return;
app = new PIXI.Application({
width: width,
height: height,
backgroundAlpha: 0,
backgroundColor: 0xf5f7fa,
antialias: true,
resolution: window.devicePixelRatio || 1,
autoDensity: true,
});
app.view.style.touchAction = 'auto';
container.appendChild(app.view);
tagsContainer = new PIXI.Container();
app.stage.addChild(tagsContainer);
renderScene(width, height);
};
const renderScene = (sw, sh) => {
let ratio = window.innerWidth / 400;
if (ratio < 1) ratio = 1;
tagsContainer.removeChildren();
activeTagInstances = [];
tagsConfig.value.forEach((data, index) => {
const scaledRadius = data.radius * ratio;
let x = sw / 2 + scaledRadius * Math.cos(data.angle);
let y = sh / 2 + scaledRadius * Math.sin(data.angle);
const tag = createTag(data, index, ratio);
tagsContainer.addChild(tag);
const safeW = tag.width / 2 + 10;
const safeH = tag.height / 2 + 10;
// 强制修正 x 和 y使其不超出屏幕
x = clamp(x, safeW, sw - safeW);
y = clamp(y, safeH, sh - safeH);
tag.x = x;
tag.y = y;
// 4. 保存元数据
tag.userData = {
originalX: x,
originalY: y,
angle: data.angle,
radius: scaledRadius,
floatOffset: Math.random() * Math.PI * 2,
floatSpeed: 0.01 + Math.random() * 0.02,
floatRange: 2 * ratio + Math.random() * 2,
safeH: safeH,
};
if (data.radius > 0) {
const tail = createCometTail(
data.tailColor || data.bgColor,
data.tailRotation,
tag.width,
tag.height,
ratio
);
tag.addChildAt(tail, 0);
tag.updateTail = () => tail.updateAnim();
}
activeTagInstances.push(tag);
});
// 动画循环
app.ticker.add(() => {
const screenH = app.screen.height;
activeTagInstances.forEach((tag) => {
const meta = tag.userData;
if (meta) {
// 计算新的浮动位置
meta.floatOffset += meta.floatSpeed;
let nextY = meta.originalY + Math.sin(meta.floatOffset) * meta.floatRange;
// 再次进行边界检查
if (nextY < meta.safeH) nextY = meta.safeH;
if (nextY > screenH - meta.safeH) nextY = screenH - meta.safeH;
tag.y = nextY;
if (tag.updateTail) tag.updateTail();
}
});
});
};
const createTag = (tagData, index, ratio) => {
if (ratio > 1) ratio = ratio * 0.9;
const tagGroup = new PIXI.Container();
tagGroup.eventMode = 'static';
tagGroup.cursor = 'pointer';
tagGroup.on('pointertap', () => emit('tag-click', tagData));
const text = new PIXI.Text(tagData.name, {
fontFamily: ['PingFang SC', 'Microsoft YaHei', 'Arial'],
fontSize: tagData.size * ratio,
fill: tagData.fontColor,
padding: 4 * ratio,
resolution: 2,
});
text.anchor.set(0.5);
const paddingH = 26 * ratio;
const paddingV = 10 * ratio;
let bgWidth = text.width + paddingH;
let bgHeight = text.height + paddingV;
if (index === 0) bgWidth = Math.max(bgWidth, tagData.size * 4.5);
const bg = new PIXI.Graphics();
bg.beginFill(tagData.bgColor, tagData.opacity ?? 1);
bg.drawRoundedRect(-bgWidth / 2, -bgHeight / 2, bgWidth, bgHeight, bgHeight / 2);
bg.endFill();
tagGroup.addChild(bg);
tagGroup.addChild(text);
return tagGroup;
};
const createCometTail = (bgColor, tailRotation, parentWidth, parentHeight, ratio) => {
if (ratio > 1) ratio = ratio;
const tailGroup = new PIXI.Container();
const graphics = new PIXI.Graphics();
tailGroup.addChild(graphics);
const baseLength = 45 * ratio;
const startWidth = parentHeight + 20 * ratio;
const endWidth = parentHeight * 0.4;
let breathPhase = Math.random() * Math.PI * 2;
const breathSpeed = 0.04;
tailGroup.updateAnim = () => {
breathPhase += breathSpeed;
const breathScale = 0.85 + 0.15 * Math.sin(breathPhase);
graphics.clear();
const currentLength = baseLength * breathScale;
const cos = Math.cos(tailRotation);
const sin = Math.sin(tailRotation);
const perpX = -sin;
const perpY = cos;
const p1 = { x: perpX * (startWidth / 2), y: perpY * (startWidth / 2) };
const p2 = { x: -perpX * (startWidth / 2), y: -perpY * (startWidth / 2) };
const endCX = cos * currentLength;
const endCY = sin * currentLength;
const p3 = { x: endCX - perpX * (endWidth / 2), y: endCY - perpY * (endWidth / 2) };
const p4 = { x: endCX + perpX * (endWidth / 2), y: endCY + perpY * (endWidth / 2) };
const segments = 8;
for (let i = 0; i < segments; i++) {
const t1 = i / segments;
const t2 = (i + 1) / segments;
const alpha = 0.4 * (1 - t1);
const sp1 = { x: p1.x + (p4.x - p1.x) * t1, y: p1.y + (p4.y - p1.y) * t1 };
const sp2 = { x: p2.x + (p3.x - p2.x) * t1, y: p2.y + (p3.y - p2.y) * t1 };
const ep1 = { x: p1.x + (p4.x - p1.x) * t2, y: p1.y + (p4.y - p1.y) * t2 };
const ep2 = { x: p2.x + (p3.x - p2.x) * t2, y: p2.y + (p3.y - p2.y) * t2 };
graphics.beginFill(bgColor, alpha);
graphics.moveTo(sp1.x, sp1.y);
graphics.lineTo(sp2.x, sp2.y);
graphics.lineTo(ep2.x, ep2.y);
graphics.lineTo(ep1.x, ep1.y);
graphics.endFill();
}
};
tailGroup.updateAnim();
return tailGroup;
};
const handleResize = () => {
const container = getContainerDOM();
if (!app || !container) return;
app.destroy(true, { children: true, texture: true, baseTexture: true });
app = null;
initPixi();
};
</script>
<style scoped>
.out {
width: 100%;
height: 100%;
}
.loading {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.semicircle-loader {
width: 150rpx;
height: 150rpx;
border: 12rpx solid #f3f3f3;
border-top: 12rpx solid #3498db;
border-radius: 50%;
animation: spin 1.2s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.container {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
color: #b9d3ff;
}
</style>

View File

@@ -3,35 +3,42 @@
<view v-if="loading" class="loading">
<view class="semicircle-loader"></view>
</view>
<view v-else class="container" id="pixi-box" ref="pixiContainerRef"></view>
<view class="container" id="pixi-box" ref="pixiContainerRef"></view>
<!-- 通信组件 -->
<view style="display: none" :random="random" :change:random="appModule.initPixi" :tagsConfig="tagsConfig" :change:tagsConfig="appModule.setTags" />
</view>
</template>
<script setup>
import { onMounted, onUnmounted, ref, nextTick, watch } from 'vue';
const props = defineProps({
<script>
export default {
props: {
tags: {
type: Array,
default: [],
default: () => [],
},
loading: {
type: Boolean,
default: false,
default: () => false,
},
});
const emit = defineEmits(['tag-click']);
// DOM Ref
const pixiContainerRef = ref(null);
// PIXI 变量
let app = null;
let tagsContainer = null;
let activeTagInstances = [];
// 配置数据
const tagsConfig = ref([
},
watch: {
tags: {
handler(val) {
if (val && val.length) {
this.tagsConfig.map((tag, index) => {
tag.name = val[index]?.job_name;
});
setTimeout(() => {
this.random++;
}, 100);
}
},
deep: true,
},
},
data: () => ({
random: 0,
tagsConfig: [
{ bgColor: 0x0069fe, fontColor: 0xffffff, size: 16, opacity: 1.0, angle: 0, radius: 0 },
{
bgColor: 0x87e2ec,
@@ -80,7 +87,6 @@ const tagsConfig = ref([
radius: 100,
tailRotation: -(3 * Math.PI) / 4.5,
},
{
bgColor: 0xff9400,
fontColor: 0xffffff,
@@ -118,55 +124,57 @@ const tagsConfig = ref([
radius: 120,
tailRotation: Math.PI / 3,
},
]);
watch(
() => props.tags,
(val) => {
if (val && val.length) {
tagsConfig.value.map((tag, index) => {
// console.log(val[index])
tag.name = val[index]?.job_name;
});
setTimeout(() => {
initPixi();
}, 100);
}
],
}),
methods: {
tagClick(tagData) {
this.$emit("tag-click", tagData);
},
},
{ deep: true }
);
onMounted(async () => {
window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
window.removeEventListener('resize', handleResize);
if (app) {
app.destroy(true, { children: true, texture: true, baseTexture: true });
app = null;
}
});
const getContainerDOM = () => {
const refVal = pixiContainerRef.value;
if (!refVal) return document.getElementById('pixi-box');
if (refVal.$el) return refVal.$el;
return refVal;
};
</script>
<script module="appModule" lang="renderjs">
const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
const initPixi = () => {
const container = getContainerDOM();
export default {
data() {
return {
app:null,
finallyTags:[],
tagsContainer:null,
activeTagInstances:[],
}
},
mounted() {
window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
if (this.app) {
this.app.destroy(true, { children: true, texture: true, baseTexture: true });
this.app = null;
}
window.removeEventListener("resize", this.handleResize);
},
methods:{
setTags(tags){
this.finallyTags = [...tags]
console.log(this.finallyTags,'+++++')
},
getContainerDOM(){
return document.getElementById('pixi-box');
},
initPixi(random){
if(!random > 0) return
const container = this.getContainerDOM();
if (!container) return;
const width = container.clientWidth || 300;
const height = container.clientHeight || 300;
if (app) return;
if (this.app) return;
app = new PIXI.Application({
this.app = new PIXI.Application({
width: width,
height: height,
backgroundAlpha: 0,
@@ -175,31 +183,45 @@ const initPixi = () => {
resolution: window.devicePixelRatio || 1,
autoDensity: true,
});
app.view.style.touchAction = 'auto';
this.app.view.style.touchAction = 'auto';
container.appendChild(app.view);
container.appendChild(this.app.view);
tagsContainer = new PIXI.Container();
app.stage.addChild(tagsContainer);
this.tagsContainer = new PIXI.Container();
this.app.stage.addChild(this.tagsContainer);
renderScene(width, height);
};
this.renderScene(width, height);
},
const renderScene = (sw, sh) => {
renderScene(sw, sh){
let ratio = window.innerWidth / 400;
if (ratio < 1) ratio = 1;
tagsContainer.removeChildren();
activeTagInstances = [];
tagsConfig.value.forEach((data, index) => {
// 先清理旧的标签事件监听器
if (this.activeTagInstances && this.activeTagInstances.length > 0) {
this.activeTagInstances.forEach(tag => {
if (tag) {
tag.eventMode = 'none';
tag.removeAllListeners();
}
});
this.activeTagInstances = [];
}
// 确保容器清空
if (this.tagsContainer) {
this.tagsContainer.removeChildren();
}
this.finallyTags.forEach((data, index) => {
const scaledRadius = data.radius * ratio;
let x = sw / 2 + scaledRadius * Math.cos(data.angle);
let y = sh / 2 + scaledRadius * Math.sin(data.angle);
const tag = createTag(data, index, ratio);
const tag = this.createTag(data, index, ratio);
tagsContainer.addChild(tag);
this.tagsContainer.addChild(tag);
const safeW = tag.width / 2 + 10;
const safeH = tag.height / 2 + 10;
@@ -224,7 +246,7 @@ const renderScene = (sw, sh) => {
};
if (data.radius > 0) {
const tail = createCometTail(
const tail = this.createCometTail(
data.tailColor || data.bgColor,
data.tailRotation,
tag.width,
@@ -235,13 +257,13 @@ const renderScene = (sw, sh) => {
tag.updateTail = () => tail.updateAnim();
}
activeTagInstances.push(tag);
this.activeTagInstances.push(tag);
});
// 动画循环
app.ticker.add(() => {
const screenH = app.screen.height;
activeTagInstances.forEach((tag) => {
this.app.ticker.add(() => {
const screenH = this.app.screen.height;
this.activeTagInstances.forEach((tag) => {
const meta = tag.userData;
if (meta) {
// 计算新的浮动位置
@@ -258,15 +280,17 @@ const renderScene = (sw, sh) => {
}
});
});
};
},
const createTag = (tagData, index, ratio) => {
createTag(tagData, index, ratio){
if (ratio > 1) ratio = ratio * 0.9;
const tagGroup = new PIXI.Container();
tagGroup.eventMode = 'static';
tagGroup.cursor = 'pointer';
tagGroup.eventMode = 'static';
tagGroup.on('pointertap', () => emit('tag-click', tagData));
tagGroup.on('pointertap', () =>{
this.$ownerInstance.callMethod('tagClick', tagData);
});
const text = new PIXI.Text(tagData.name, {
fontFamily: ['PingFang SC', 'Microsoft YaHei', 'Arial'],
@@ -293,9 +317,9 @@ const createTag = (tagData, index, ratio) => {
tagGroup.addChild(text);
return tagGroup;
};
},
const createCometTail = (bgColor, tailRotation, parentWidth, parentHeight, ratio) => {
createCometTail(bgColor, tailRotation, parentWidth, parentHeight, ratio){
if (ratio > 1) ratio = ratio;
const tailGroup = new PIXI.Container();
const graphics = new PIXI.Graphics();
@@ -345,15 +369,18 @@ const createCometTail = (bgColor, tailRotation, parentWidth, parentHeight, ratio
};
tailGroup.updateAnim();
return tailGroup;
};
},
const handleResize = () => {
const container = getContainerDOM();
if (!app || !container) return;
app.destroy(true, { children: true, texture: true, baseTexture: true });
app = null;
initPixi();
};
handleResize(){
const container = this.getContainerDOM();
if (!this.app || !container) return;
this.app.destroy(true, { children: true, texture: true, baseTexture: true });
this.app = null;
this.initPixi(1);
},
}
}
</script>
<style scoped>

View File

@@ -18,8 +18,13 @@
v-for="(_, index) in 2"
:key="index"
>
<component
:is="components[index]"
<IndexRefactor
v-if="index === 0"
@onShowTabbar="changeShowTabbar"
:ref="(el) => handelComponentsRef(el, index)"
/>
<IndexTwo
v-if="index === 1"
@onShowTabbar="changeShowTabbar"
:ref="(el) => handelComponentsRef(el, index)"
/>

View File

@@ -5,7 +5,10 @@ import {
ref,
computed
} from 'vue';
// #ifndef MP-WEIXIN
import wideScreenStyles from '../common/wide-screen.css?inline';
// #endif
// 屏幕检测管理器类
class ScreenDetectionManager {