|
|
@@ -160,7 +160,7 @@
|
|
|
opacity: item.style.opacity,
|
|
|
transform: item.style.transform,
|
|
|
zIndex: item.style.zIndex,
|
|
|
- fontSize: item.style.fontSize + 'px'
|
|
|
+ fontSize: item.style.fontSize + 'px',
|
|
|
}"
|
|
|
>{{ item.name }}</span
|
|
|
>
|
|
|
@@ -280,7 +280,8 @@
|
|
|
}
|
|
|
|
|
|
.wordCloud__tagBall {
|
|
|
- margin: 50px auto;
|
|
|
+ margin-top: 50px;
|
|
|
+ margin-bottom: 50px;
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
@@ -303,7 +304,12 @@
|
|
|
</style>
|
|
|
|
|
|
<script>
|
|
|
-import { getAllPlatform, getPlatform, getList } from "@/api/getList.js";
|
|
|
+import {
|
|
|
+ getAllPlatform,
|
|
|
+ getPlatform,
|
|
|
+ getList,
|
|
|
+ getBase,
|
|
|
+} from "@/api/getList.js";
|
|
|
import filters from "@/utils/filters/index";
|
|
|
import live from "@/view/index/components/live/index.vue";
|
|
|
import {
|
|
|
@@ -359,7 +365,6 @@ export default {
|
|
|
minFontSize: 12,
|
|
|
maxFontSize: 18,
|
|
|
list: [
|
|
|
-
|
|
|
{
|
|
|
name: "云图",
|
|
|
value: 1000,
|
|
|
@@ -420,7 +425,17 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
|
- this.initData();
|
|
|
+ this.baseData = JSON.parse(this.$route.query.data || "{}");
|
|
|
+ let title = this.$route.query.title.split(" / ") || [];
|
|
|
+ this.baseData.topic_name && this.initData();
|
|
|
+ !this.baseData.topic_name &&
|
|
|
+ getBase({
|
|
|
+ season: this.$route.query.season,
|
|
|
+ topic_name: title[title.length - 1],
|
|
|
+ }).then(res => {
|
|
|
+ this.baseData = res || {};
|
|
|
+ this.initData();
|
|
|
+ });
|
|
|
},
|
|
|
methods: {
|
|
|
initData() {
|
|
|
@@ -429,7 +444,6 @@ export default {
|
|
|
width: clientWidth,
|
|
|
height: (clientWidth / 16) * 9,
|
|
|
};
|
|
|
- this.baseData = JSON.parse(this.$route.query.data);
|
|
|
getAllPlatform({
|
|
|
season: this.$route.query.season,
|
|
|
topic_name: this.baseData.topic_name,
|
|
|
@@ -821,7 +835,7 @@ export default {
|
|
|
call && call();
|
|
|
},
|
|
|
cloud() {
|
|
|
- const RADIUSX = (this.client.width - 50) / 2;
|
|
|
+ const RADIUSX = (this.client.width - 150) / 2;
|
|
|
const RADIUSY = (this.client.height - 50) / 2;
|
|
|
let contentEle = [];
|
|
|
for (let i = 0; i < this.list.length; i += 1) {
|
|
|
@@ -848,58 +862,47 @@ export default {
|
|
|
this.animate();
|
|
|
},
|
|
|
animate() {
|
|
|
- this.rotateX();
|
|
|
- this.rotateY();
|
|
|
- this.move();
|
|
|
+ let newContentEle = this.rotateXY(this.contentEle);
|
|
|
+ newContentEle = this.move(newContentEle);
|
|
|
+ this.contentEle = newContentEle;
|
|
|
window.requestAnimationFrame(this.animate);
|
|
|
},
|
|
|
- rotateX() {
|
|
|
+ rotateXY(contentEle) {
|
|
|
const angleX = ["-1", "1"].includes(this.direction)
|
|
|
? Math.PI / Infinity
|
|
|
: Math.PI / ((Number(this.direction) / 2) * Number(this.speed));
|
|
|
- const cos = Math.cos(angleX);
|
|
|
- const sin = Math.sin(angleX);
|
|
|
- this.contentEle = this.contentEle.map(t => {
|
|
|
- const y1 = t.y * cos - t.z * sin;
|
|
|
- const z1 = t.z * cos + t.y * sin;
|
|
|
- return {
|
|
|
- ...t,
|
|
|
- y: y1,
|
|
|
- z: z1,
|
|
|
- };
|
|
|
- });
|
|
|
- },
|
|
|
- rotateY() {
|
|
|
const angleY = ["-2", "2"].includes(this.direction)
|
|
|
? Math.PI / Infinity
|
|
|
: Math.PI / (Number(this.direction) * Number(this.speed));
|
|
|
- const cos = Math.cos(angleY);
|
|
|
- const sin = Math.sin(angleY);
|
|
|
- this.contentEle = this.contentEle.map(t => {
|
|
|
- const x1 = t.x * cos - t.z * sin;
|
|
|
- const z1 = t.z * cos + t.x * sin;
|
|
|
+ const cosx = Math.cos(angleX);
|
|
|
+ const sinx = Math.sin(angleX);
|
|
|
+ const cosy = Math.cos(angleY);
|
|
|
+ const siny = Math.sin(angleY);
|
|
|
+ return contentEle.map(t => {
|
|
|
+ const y1 = t.y * cosx - t.z * sinx;
|
|
|
+ let z1 = t.z * cosx + t.y * sinx;
|
|
|
+ const x1 = t.x * cosy - t.z * siny;
|
|
|
+ z1 = z1 * cosy + t.x * siny;
|
|
|
return {
|
|
|
...t,
|
|
|
- x: x1,
|
|
|
+ y: y1,
|
|
|
z: z1,
|
|
|
+ x: x1,
|
|
|
};
|
|
|
});
|
|
|
},
|
|
|
- move() {
|
|
|
- const CX = this.client.width / 2;
|
|
|
- const CY = this.client.height / 2;
|
|
|
- this.contentEle = this.contentEle.map(singleEle => {
|
|
|
+ move(contentEle) {
|
|
|
+ return contentEle.map(singleEle => {
|
|
|
const { x, y, z } = singleEle;
|
|
|
const fallLength = 500;
|
|
|
const RADIUS = (this.client.width - 50) / 2;
|
|
|
const scale = fallLength / (fallLength - z);
|
|
|
- const alpha = (z + RADIUS) / (2 * RADIUS);
|
|
|
- const left = `${x + CX - 15}px`;
|
|
|
- const top = `${y + CY - 15}px`;
|
|
|
- const transform = `translate(${left}, ${top}) scale(${scale})`;
|
|
|
+ const transform = `translate(${x + this.client.width / 2 - 15}px, ${y +
|
|
|
+ this.client.height / 2 -
|
|
|
+ 15}px) scale(${scale})`;
|
|
|
const style = {
|
|
|
...singleEle.style,
|
|
|
- opacity: alpha + 0.5,
|
|
|
+ opacity: (z + RADIUS) / (2 * RADIUS),
|
|
|
zIndex: parseInt(scale * 100, 10),
|
|
|
transform,
|
|
|
};
|
liyongli