yunyang
/
carInsightSystem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cxw-010203

Browse Source
prod
校文 3 years ago
parent e09af1b26b
commit dccfc995a5
3 changed files with 165 additions and 104 deletions
Show Stats Download Patch File Download Diff File

73
src/utils/gol/bubbleWord.js
Unescape View File

@ -1,12 +1,13 @@
/* /*
* @Author: your name * @Author: your name
* @Date: 2021-10-21 11:36:36 * @Date: 2021-10-21 11:36:36
* @LastEditTime: 2021-11-12 16:40:03 * @LastEditTime: 2021-11-25 11:07:14
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/utils/gol/bubbleWord.js * @FilePath: /data-show/src/utils/gol/bubbleWord.js
*/ */
import { compare } from "./dataTool" import { compare } from "./dataTool"
import * as echarts from "echarts";
// 将后台数据转成数组 // 将后台数据转成数组
function doWordCloud(data) { function doWordCloud(data) {
let arr1 = []; let arr1 = [];
@ -25,15 +26,49 @@ function bubbleChart(data = [], format = []) {
maxValue = Math.max.apply(null, temp); maxValue = Math.max.apply(null, temp);
// 气泡颜色数组 // 气泡颜色数组
let color = [ let color = [
"#FFB600", {
"#886CFF", key: '#047ddc',
"#0084FF", fontColor: '#8ec0ea',
"#4CB690", value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
"#58B458", {
"#6C6C6C", offset: 0,
"#F56161", color: 'rgba(4, 60, 135, 1)'
"#FC754C", },
"#5F5EEC", {
offset: 1,
color: 'rgba(1, 11, 25, 1)'
}
], false)
},
{
key: '#a3951f',
fontColor: '#a4a27f',
value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(120, 124, 14, 1)'
},
{
offset: 1,
color: 'rgba(1, 11, 25, 1)'
}
], false)
},
{
key: '#01aa87',
fontColor: '#99e5d5',
value: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgba(25, 137, 129, 1)'
},
{
offset: 1,
color: 'rgba(1, 11, 25, 1)'
}
], false)
}
]; ];
// 气泡颜色备份 // 气泡颜色备份
let bakeColor = [...color]; let bakeColor = [...color];
@ -61,7 +96,9 @@ function bubbleChart(data = [], format = []) {
if (!bakeColor.length) bakeColor = [...color]; if (!bakeColor.length) bakeColor = [...color];
let colorSet = new Set(bakeColor); let colorSet = new Set(bakeColor);
let curIndex = Math.round(Math.random() * (colorSet.size - 1)); let curIndex = Math.round(Math.random() * (colorSet.size - 1));
let curColor = bakeColor[curIndex]; let borderColor = bakeColor[curIndex].key;
let curColor = bakeColor[curIndex].value;
let fontColor = bakeColor[curIndex].fontColor;
colorSet.delete(curColor); colorSet.delete(curColor);
bakeColor = [...colorSet]; bakeColor = [...colorSet];
// 气泡大小设置 // 气泡大小设置
@ -73,6 +110,11 @@ function bubbleChart(data = [], format = []) {
value: item[format[1]], value: item[format[1]],
symbolSize: size, symbolSize: size,
draggable: true, draggable: true,
label: {
show: true,
color: fontColor,
fontSize: 12
},
itemStyle: { itemStyle: {
normal: { normal: {
color: curColor, color: curColor,
@ -81,6 +123,9 @@ function bubbleChart(data = [], format = []) {
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: 0, shadowOffsetY: 0,
shadowColor: "rgba(0,0,0,0.3)", shadowColor: "rgba(0,0,0,0.3)",
borderType : 'solid',
borderColor: borderColor,
borderWidth: 1
}, },
}, },
}); });
@ -119,12 +164,6 @@ export default function createWordCloud(obj) {
series: [{ series: [{
type: 'graph', type: 'graph',
layout: 'force', layout: 'force',
label: {
show: true,
color: "#FFF",
fontSize: 12,
},
force: { force: {
gravity: 0.2, gravity: 0.2,
repulsion: bubble.repulsion, repulsion: bubble.repulsion,

92
src/views/EventDetails/hotOther/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-10-13 11:54:38 * @Date: 2021-10-13 11:54:38
* @LastEditTime: 2021-11-17 15:57:45 * @LastEditTime: 2021-11-25 10:15:13
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/EventDetails/hotOther/index.vue * @FilePath: /data-show/src/views/EventDetails/hotOther/index.vue
@ -10,11 +10,16 @@
<div class="ho-outter" v-loading="load"> <div class="ho-outter" v-loading="load">
<v-label-div title="热点事件传播导向" /> <v-label-div title="热点事件传播导向" />
<div class="ho-bd"> <div class="ho-bd">
<dv-scroll-board :config="config" :style="{ width: '100%', height: '27rem' }" @click="handlerItem"/> <v-table :columns="columns" :data="tbData" tableLayout="fixed" :pagination="false">
<template slot="events_title" slot-scope="text, record">
<span @click="handlerEvent(record)">{{text}}</span>
</template>
</v-table>
<!-- <dv-scroll-board :config="config" :style="{ width: '100%', height: '27rem' }" @click="handlerItem"/> -->
</div> </div>
<div class="ho-footer"> <div class="ho-footer">
<span class="ho-f-s1">共 <span style="color: #2c66b5;">{{total}}</span> 条</span> <span class="ho-f-s1">共 <span style="color: #2c66b5;">{{total}}</span> 条</span>
<a-pagination v-model="form.iPageIndex" :pageSize="form.iPageSize" :total="total" show-less-items @change="handlerPagnation"/> <a-pagination v-model="form.iPageIndex" :pageSize="form.iPageSize" :total="total" show-less-items @change="handlerPagnation" />
</div> </div>
</div> </div>
</template> </template>
@ -34,9 +39,34 @@ export default {
iPageSize: 20, iPageSize: 20,
}, },
total: 0, total: 0,
config: { tbData: [],
}, columns: [
darr: [] {
title: "事件列表",
dataIndex: "events_title",
key: "events_title",
width: 200,
scopedSlots: { customRender: "events_title" },
ellipsis: true,
},
{
title: "影响力",
dataIndex: "events_influence",
key: "events_influence",
},
{
title: "时间",
dataIndex: "maxSourcetime",
key: "maxSourcetime",
width: 160,
},
{
title: "关联品牌",
dataIndex: "events_brand",
scopedSlots: { customRender: "events_brand" },
key: "events_brand",
},
],
}; };
}, },
created() { created() {
@ -53,50 +83,22 @@ export default {
let data = res.data || []; let data = res.data || [];
let totalNum = res.totalNum || 0; let totalNum = res.totalNum || 0;
this.total = totalNum; this.total = totalNum;
let arr = []; this.tbData = data;
let arr2 = [];
data.forEach((ele) => {
let a = [
`<span style='cursor: pointer;'>${ele.events_title}</span>`,
ele.events_influence,
ele.maxSourcetime,
ele.events_brand,
];
let b = [
`<span style='cursor: pointer;'>${ele.events_title}</span>`,
ele.events_influence,
ele.maxSourcetime,
ele.events_brand,
ele.events_id
];
arr.push(a);
arr2.push(b);
});
this.darr = arr2;
this.config = {
headerBGC: "#0c203b",
oddRowBGC: "#173b6d",
evenRowBGC: "rgba(69, 149, 244, 0)",
rowNum: 10,
columnWidth: [240,70,150],
header: ["事件列表", "影响力", "时间", "关联品牌"],
data: arr,
};
this.load = false; this.load = false;
}); });
}, },
// 分页处理 // 分页处理
handlerPagnation(page) { handlerPagnation(page) {
this.form.iPageIndex = page; this.form.iPageIndex = page;
this.getDdta() this.getDdta();
}, },
handlerItem(row) { // 跳转详情
let ele = this.darr[row.rowIndex]; handlerEvent(row) {
if(row.columnIndex === 0) { this.$router.push({
let id = ele[4]; path: "/eventDEC",
this.$router.push({path: '/eventDEC', query: {events_id: id}}); query: { events_id: row.events_id },
} });
} },
}, },
}; };
</script> </script>
@ -130,4 +132,8 @@ export default {
} }
} }
} }
/deep/ .ant-table-body {
height: 432px;
overflow: auto;
}
</style> </style>

104
src/views/ModelEventDetails/MEDHotOther/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!-- <!--
* @Author: your name * @Author: your name
* @Date: 2021-10-13 11:54:38 * @Date: 2021-10-13 11:54:38
* @LastEditTime: 2021-11-17 16:02:33 * @LastEditTime: 2021-11-25 10:23:59
* @LastEditors: Please set LastEditors * @LastEditors: Please set LastEditors
* @Description: In User Settings Edit * @Description: In User Settings Edit
* @FilePath: /data-show/src/views/EventDetails/hotOther/index.vue * @FilePath: /data-show/src/views/EventDetails/hotOther/index.vue
@ -10,17 +10,24 @@
<div class="ho-outter"> <div class="ho-outter">
<v-label-div title="热点事件传播导向" /> <v-label-div title="热点事件传播导向" />
<div class="ho-bd"> <div class="ho-bd">
<dv-scroll-board :config="config" :style="{ width: '100%', height: '27rem' }" @click="handlerItem"/> <v-table :columns="columns" :data="tbData" tableLayout="fixed" :pagination="false">
<template slot="events_title" slot-scope="text, record">
<span @click="handlerEvent(record)">{{text}}</span>
</template>
<template slot="events_brand" slot-scope="text, record">
<span @click="handlerBrand(record)">{{text}}</span>
</template>
</v-table>
</div> </div>
<div class="ho-footer"> <div class="ho-footer">
<span class="ho-f-s1">共 <span style="color: #2c66b5;">{{total}}</span> 条</span> <span class="ho-f-s1">共 <span style="color: #2c66b5;">{{total}}</span> 条</span>
<a-pagination v-model="form.iPageIndex" :pageSize="form.iPageSize" :total="total" show-less-items @change="handlerPagnation"/> <a-pagination v-model="form.iPageIndex" :pageSize="form.iPageSize" :total="total" show-less-items @change="handlerPagnation" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import {getHotEventsList} from '@/api/ModelEventdetails' import { getHotEventsList } from "@/api/ModelEventdetails";
export default { export default {
name: "MEDHotOther", name: "MEDHotOther",
data() { data() {
@ -34,9 +41,34 @@ export default {
sSeriesName: "", sSeriesName: "",
}, },
total: 0, total: 0,
config: { tbData: [],
}, columns: [
darr: [] {
title: "事件列表",
dataIndex: "events_title",
key: "events_title",
width: 200,
scopedSlots: { customRender: "events_title" },
ellipsis: true,
},
{
title: "影响力",
dataIndex: "events_influence",
key: "events_influence",
},
{
title: "时间",
dataIndex: "maxSourcetime",
key: "maxSourcetime",
width: 160,
},
{
title: "关联品牌",
dataIndex: "events_brand",
scopedSlots: { customRender: "events_brand" },
key: "events_brand",
},
],
}; };
}, },
created() { created() {
@ -53,49 +85,29 @@ export default {
let data = res.data || []; let data = res.data || [];
let totalNum = res.totalNum || 0; let totalNum = res.totalNum || 0;
this.total = totalNum; this.total = totalNum;
let arr = []; this.tbData = data;
let arr2 = [];
data.forEach((ele) => {
let a = [
`<span style='cursor: pointer;'>${ele.events_title}</span>`,
ele.events_influence,
ele.maxSourcetime,
ele.events_brand
];
let b = [
`<span style='cursor: pointer;'>${ele.events_title}</span>`,
ele.events_influence,
ele.maxSourcetime,
ele.events_brand,
ele.events_id
];
arr.push(a);
arr2.push(b);
});
this.darr = arr2;
this.config = {
headerBGC: "#0c203b",
oddRowBGC: "#173b6d",
evenRowBGC: "rgba(69, 149, 244, 0)",
rowNum: 10,
columnWidth: [170,60,160],
header: ["事件列表", "影响力", "时间", "关联品牌"],
data: arr,
};
}); });
}, },
// 分页处理 // 分页处理
handlerPagnation(page) { handlerPagnation(page) {
this.form.iPageIndex = page; this.form.iPageIndex = page;
this.getDdta() this.getDdta();
},
// 跳转详情
handlerEvent(row) {
this.$router.push({
path: "/eventDEC",
query: { events_id: row.events_id },
});
},
// 跳转品牌
handlerBrand(row) {
let obj = { brandname: row.events_brand };
this.setBrand(obj);
this.$router.push({
path: "/brandInsight",
});
}, },
handlerItem(row) {
let ele = this.darr[row.rowIndex];
if(row.columnIndex === 0) {
let id = ele[4];
this.$router.push({path: '/eventDEC', query: {events_id: id}});
}
}
}, },
}; };
</script> </script>
@ -129,4 +141,8 @@ export default {
} }
} }
} }
/deep/ .ant-table-body {
height: 432px;
overflow: auto;
}
</style> </style>

Write Preview
Loading…
Cancel
Save