Skip to content

S
smart_gov_platform
Commit 42c3a718 authored by 廖旭伟's avatar 廖旭伟
Browse files
Options

Merge remote-tracking branch 'origin/master'

parents cf2fffd0 6f7b19cb
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 18069 additions and 5227 deletions
portal-manager-ui/admin/package-lock.json
View file @ 42c3a718
This diff is collapsed.
portal-manager-ui/admin/package.json
View file @ 42c3a718
......@@ -18,6 +18,7 @@
"echarts": "^5.3.3",
"element-ui": "^2.15.8",
"font-awesome": "^4.7.0",
"heatmap.js": "^2.0.5",
"highlight.js": "^11.5.1",
"js-export-excel": "^1.1.4",
"lodash": "^4.17.21",
......
portal-manager-ui/admin/src/router/routes.js
View file @ 42c3a718
......@@ -265,7 +265,8 @@ const routes = [
{
path: "evaluationRecordReport",
name: "evaluationRecordReport",
redirect: "/home/dataManagement/evaluationRecordReport/windowsEvaluation",
redirect:
"/home/dataManagement/evaluationRecordReport/windowsEvaluation",
component: () =>
import(
/* webpackChunkName: "evaluationRecordReport" */ "@/views/dataAdmin/components/evaluationRecordReport/module.vue"
......@@ -277,7 +278,7 @@ const routes = [
name: "windowsEvaluation",
component: () =>
import(
/* webpackChunkName: "windowsEvaluation" */"@/views/dataAdmin/components/evaluationRecordReport/windowEvaluation.vue"
/* webpackChunkName: "windowsEvaluation" */ "@/views/dataAdmin/components/evaluationRecordReport/windowEvaluation.vue"
),
meta: { title: "窗口服务评价记录报表" },
},
......@@ -286,7 +287,7 @@ const routes = [
name: "departmentEvaluation",
component: () =>
import(
/* webpackChunkName: "departmentEvaluation" */"@/views/dataAdmin/components/evaluationRecordReport/departmentEvaluation.vue"
/* webpackChunkName: "departmentEvaluation" */ "@/views/dataAdmin/components/evaluationRecordReport/departmentEvaluation.vue"
),
meta: { title: "办事部门评价记录报表" },
},
......@@ -295,11 +296,11 @@ const routes = [
name: "matterEvaluation",
component: () =>
import(
/* webpackChunkName: "matterEvaluation" */"@/views/dataAdmin/components/evaluationRecordReport/matterEvaluation.vue"
/* webpackChunkName: "matterEvaluation" */ "@/views/dataAdmin/components/evaluationRecordReport/matterEvaluation.vue"
),
meta: { title: "办理事项评价记录报表" },
},
]
],
},
{
path: "sampleRecordReport",
......@@ -316,11 +317,11 @@ const routes = [
name: "sampleForm",
component: () =>
import(
/* webpackChunkName: "sampleForm" */"@/views/dataAdmin/components/sampleRecordReport/sampleForm.vue"
/* webpackChunkName: "sampleForm" */ "@/views/dataAdmin/components/sampleRecordReport/sampleForm.vue"
),
meta: { title: "样表记录报表" },
},
]
],
},
{
path: "fillRecordReport",
......@@ -337,11 +338,11 @@ const routes = [
name: "fillForm",
component: () =>
import(
/* webpackChunkName: "fillForm" */"@/views/dataAdmin/components/fillRecordReport/fillForm.vue"
/* webpackChunkName: "fillForm" */ "@/views/dataAdmin/components/fillRecordReport/fillForm.vue"
),
meta: { title: "填单记录报表" },
},
]
],
},
{
path: "microOfficialWebsite",
......@@ -358,11 +359,11 @@ const routes = [
name: "microForm",
component: () =>
import(
/* webpackChunkName: "microForm" */"@/views/dataAdmin/components/microOfficialWebsite/microForm.vue"
/* webpackChunkName: "microForm" */ "@/views/dataAdmin/components/microOfficialWebsite/microForm.vue"
),
meta: { title: "微官网注册报表" },
},
]
],
},
{
path: "networkGovernance",
......@@ -379,7 +380,7 @@ const routes = [
name: "networkForm",
component: () =>
import(
/* webpackChunkName: "networkForm" */"@/views/dataAdmin/components/networkGovernance/networkForm.vue"
/* webpackChunkName: "networkForm" */ "@/views/dataAdmin/components/networkGovernance/networkForm.vue"
),
meta: { title: "网络理政报表" },
},
......@@ -388,11 +389,11 @@ const routes = [
name: "callRecordForm",
component: () =>
import(
/* webpackChunkName: "callRecordForm" */"@/views/dataAdmin/components/networkGovernance/callRecordForm.vue"
/* webpackChunkName: "callRecordForm" */ "@/views/dataAdmin/components/networkGovernance/callRecordForm.vue"
),
meta: { title: "12345拨打记录报表" },
},
]
],
},
],
},
......@@ -414,6 +415,72 @@ const routes = [
),
meta: { title: "数据精算" },
},
{
path: "dataActuary/behaviour",
name: "behaviour",
component: () =>
import(
/* webpackChunkName: "dataActuary" */ "@/views/dataActuary/behaviour/module.vue"
),
meta: { title: "使用行为分析" },
redirect: "dataActuary/behaviour/eventanalyse",
children: [
{
path: "eventanalyse",
name: "eventanalyse",
component: () =>
import(
/* webpackChunkName: "dataActuary" */ "@/views/dataActuary/behaviour/eventanalyse/eventanalyse.vue"
),
meta: { title: "事件分析" },
},
{
path: "product",
name: "product",
component: () =>
import(
/* webpackChunkName: "dataActuary" */ "@/views/dataActuary/behaviour/product/product.vue"
),
meta: { title: "产品热力图" },
},
{
path: "pageanalyse",
name: "pageanalyse",
component: () =>
import(
/* webpackChunkName: "dataActuary" */ "@/views/dataActuary/behaviour/pageanalyse/pageAnalyse.vue"
),
meta: { title: "页面访问分析" },
},
{
path: "pathanalyse",
name: "pathanalyse",
component: () =>
import(
/* webpackChunkName: "dataActuary" */ "@/views/dataActuary/behaviour/pathanalyse/pathAnalyse.vue"
),
meta: { title: "路径分析" },
},
{
path: "usinghabit",
name: "usinghabit",
component: () =>
import(
/* webpackChunkName: "dataActuary" */ "@/views/dataActuary/behaviour/usinghabit/usinghabit.vue"
),
meta: { title: "使用习惯" },
},
{
path: "information",
name: "information",
component: () =>
import(
/* webpackChunkName: "dataActuary" */ "@/views/dataActuary/behaviour/information/information.vue"
),
meta: { title: "信息流分析" },
},
],
},
{
path: "thePlatformIsSet",
name: "thePlatformIsSet",
......
portal-manager-ui/admin/src/utils/js/vue-heatmap.js 0 → 100644
View file @ 42c3a718
import Heatmap from 'heatmap.js';
// import 'heatmap.js/plugins/heatmap.canvas.js';
// import 'heatmap.js/plugins/heatmap-gradient.js';
// import 'heatmap.js/plugins/heatmap-data-urls.js';
// import 'heatmap.js/plugins/leaflet-heatmap/leaflet-heatmap.js';
// import 'leaflet-heatmap/dist/leaflet-heatmap.css';
export default {
install(Vue, options) {
const heatmapContainer = document.createElement('div');
heatmapContainer.id = 'heatmap-container';
heatmapContainer.style.display = 'none';
document.body.appendChild(heatmapContainer);
const heatmapConfig = {
radius: options.radius || 30,
maxOpacity: options.maxOpacity || 0.8,
minOpacity: options.minOpacity || 0.2,
blur: options.blur || 0.85,
gradient: options.gradient || {
0.45: 'rgb(0,0,255)',
0.55: 'rgb(0,255,255)',
0.65: 'rgb(0,255,0)',
0.95: 'yellow',
1.0: 'rgb(255,0,0)',
},
};
const heatmapInstance = Heatmap.create({
container: heatmapContainer,
radius: heatmapConfig.radius,
maxOpacity: heatmapConfig.maxOpacity,
minOpacity: heatmapConfig.minOpacity,
blur: heatmapConfig.blur,
gradient: heatmapConfig.gradient,
height:1080,
width:1920
});
Vue.prototype.$heatmap = function(data) {
heatmapInstance.setData(data);
heatmapContainer.style.display = 'block';
setTimeout(() => {
heatmapContainer.style.display = 'none';
}, options.duration || 3000);
};
},
};
\ No newline at end of file
portal-manager-ui/admin/src/views/dataActuary/behaviour/eventanalyse/eventanalyse.vue 0 → 100644
View file @ 42c3a718
<template>
<!-- 事件分析 -->
<div class="page">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择产品">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="queryform.value" style="width: 300px" />
</a-form-model-item>
<a-form-model-item>
<a-button type="primary">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div class="main">
<a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }">
</a-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
queryform: {
value: null
},
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
columns: [{
title: "序号",
width: "70px",
customRender: (text, record, index) => `${index+1}`,
align: "center",
},
{
title: "事件",
dataIndex: "title",
align: "center",
},
{
title: '事件ID',
dataIndex: 'address',
align: "center",
},
{
title: '事件数量(日均)',
dataIndex: 'address1',
align: "center",
},
{
title: '事件平均使用时长（单次）',
dataIndex: 'address2',
align: "center",
}
],
data: []
}
}
};
</script>
<style lang="less" scoped>
.page{
padding: 15px;
}
</style>
\ No newline at end of file
portal-manager-ui/admin/src/views/dataActuary/behaviour/information/information.vue 0 → 100644
View file @ 42c3a718
<template>
<!-- 信息流分析 -->
<div class="page">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择产品">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="queryform.value" style="width: 300px" />
</a-form-model-item>
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择一级场景">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择二级场景">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择三级场景">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-button type="primary">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div class="table-box">
<div class="mb">
<span style="margin-right: 30px;">指标筛选</span>
<a-checkbox-group v-model="queryform.value">
<a-checkbox value="1">访问人数</a-checkbox>
<a-checkbox value="2">打开次数</a-checkbox>
<a-checkbox value="3">访问页面数</a-checkbox>
</a-checkbox-group>
</div>
<div class="mb">
<span style="margin-right: 30px;">对比筛选</span>
<a-checkbox-group v-model="queryform.value">
<a-checkbox value="1">日对比</a-checkbox>
</a-checkbox-group>
</div>
<a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }" :pagination="pagination">
</a-table>
</div>
</div>
</template>
<script>
export default {
data() {
return {
queryform: {
value: null
},
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
columns: [{
title: "序号",
width: "70px",
customRender: (text, record, index) => `${index+1}`,
align: "center",
},
{
title: "时间",
dataIndex: "title",
align: "center",
},
{
title: '产品名称',
dataIndex: 'address',
align: "center",
},
{
title: '一级场景',
dataIndex: 'address1',
align: "center",
},
{
title: '二级场景',
dataIndex: 'address2',
align: "center",
},
{
title: '三级场景',
dataIndex: 'address3',
align: "center",
},{
title: '访问人数',
dataIndex: 'address5',
align: "center",
},{
title: '打开次数',
dataIndex: 'address4',
align: "center",
},{
title: '访问页面数',
dataIndex: 'address8',
align: "center",
}
],
data: [],
pagination: {
total: 0,
pageSize: 10, //每页中显示10条数据
showSizeChanger: true,
pageSizeOptions: ["10", "20", "50", "100"], //每页中显示的数据
showTotal: total => `共有 ${total} 条数据`, //分页中显示总的数据
},
}
}
};
</script>
<style lang="less" scoped>
.page {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
/deep/.ant-form {
padding: 15px;
}
.table-box {
padding: 0 15px;
.mb{
margin-bottom: 20px;
}
}
}
</style>
\ No newline at end of file
portal-manager-ui/admin/src/views/dataActuary/behaviour/module.vue 0 → 100644
View file @ 42c3a718
<template>
<div class="Container">
<div class="main">
<a-tabs v-model="tabsActive" @change="tabsChange" :forceRender="false">
<a-tab-pane
:key="item.path"
v-for="item of tabsList['children']"
:tab="item['meta']['title']"
>
</a-tab-pane>
</a-tabs>
<router-view />
</div>
</div>
</template>
<script>
import { getItemData } from "@/utils/js/common.js";
import common from "@/mixins/common";
export default {
mixins: [common],
data() {
return {
tabsActive: undefined,
};
},
computed: {
tabsList() {
console.log(
getItemData(this.$router.options.routes, "name", "behaviour")
);
return getItemData(this.$router.options.routes, "name", "behaviour");
},
},
mounted() {
this.$nextTick(() => {
this.tabsActive = this.$route.path.substr(
this.$route.path.lastIndexOf("/") + 1
);
});
},
methods: {
tabsChange(val) {
this.$router.push({
path: val,
// query: { testoption: "test001" },
});
},
},
};
</script>
<style lang="less" scoped>
@headerH: 4.5rem;
.Container {
height: 100% !important;
// background: #fac;
background: #f5f5f5;
display: flex;
flex-direction: column;
.main {
// background: #afc;
background: #ffffff;
border-radius: 6px;
flex: 1;
overflow-y: auto;
overflow-x: hidden;
margin: 1.2rem 2rem;
}
&::before {
content: "";
display: block;
width: 100%;
height: @headerH;
background: rgb(59, 135, 255);
background: -moz-linear-gradient(
174deg,
rgba(59, 135, 255, 1) 24%,
rgba(108, 53, 247, 1) 85%
);
background: -webkit-linear-gradient(
174deg,
rgba(59, 135, 255, 1) 24%,
rgba(108, 53, 247, 1) 85%
);
background: linear-gradient(
174deg,
rgba(59, 135, 255, 1) 24%,
rgba(108, 53, 247, 1) 85%
);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#3b87ff",endColorstr="#6c35f7",GradientType=1);
}
/deep/.ant-tabs-nav {
.ant-tabs-tab {
margin: 0 !important;
}
}
/deep/.ant-tabs-tab {
font-size: 1rem !important;
& + .ant-tabs-tab {
margin: 0 !important;
margin-left: 0.7rem !important;
}
}
/deep/.ant-tabs-bar{
margin: 0;
}
}
</style>
portal-manager-ui/admin/src/views/dataActuary/behaviour/pageanalyse/pageAnalyse.vue 0 → 100644
View file @ 42c3a718
<template>
<!-- 页面分析 -->
<div class="page">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择产品">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="queryform.value" style="width: 300px" />
</a-form-model-item>
<a-form-model-item>
<a-button type="primary">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div class="box">
<div class="left-dv">
<div>页面访问指标趋势</div>
<div class="txt-dv">
<div>
<div class="num">4058</div>
<div>页面累计访问次数</div>
</div>
<div>
<div class="num">4058</div>
<div>日均访问次数</div>
</div>
</div>
<div id="number"></div>
</div>
<div class="right-dv">
<div class="page-box">
<div class="page-dv">
<div>人均访问深度</div>
<div class="page-num">4.00页</div>
</div>
<div class="page-dv">
<div>次均访问深度</div>
<div class="page-num">4.00页</div>
</div>
</div>
<div class="chatrs-dv">
<div>页面访问次数TOP10</div>
<div id="pages"></div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
queryform: {
value: null
},
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
}
},
mounted() {
this.initLine()
this.initBar()
},
methods: {
initBar() {
let chartDom = document.getElementById('pages')
let myChart = echarts.init(chartDom);
myChart.setOption({
legend: {
bottom: 0,
itemWidth:10,
itemHeight:10
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
color:['#29D090'],
grid: {
top:'3%',
left: '3%',
right: '3%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World'],
axisTick: {
show: false
}
},
series: [{
name: '访问次数',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230],
barWidth:10
}
]
})
},
initLine() {
let chartDom = document.getElementById('number')
let myChart = echarts.init(chartDom);
myChart.setOption({
legend: {
bottom: 0
},
grid: {
left: '10%',
rigth: 0,
top: '5%',
bottom: '15%'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
show: false
}
},
yAxis: {
type: 'value'
},
series: [{
name: '页面访问次数',
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line',
markLine: {
data: [{
type: 'average',
name: '均值'
}],
label: {
position: 'insideStartTop',
formatter: '{b}:{c}'
}
}
}]
})
}
}
};
</script>
<style lang="less" scoped>
.page {
height: calc(100% - 50px);
/deep/.ant-form {
padding: 15px;
border-bottom: solid 1px #efefef;
}
.box {
height: calc(100% - 70px);
display: flex;
.left-dv {
width: 55%;
min-height: 100%;
border-right: solid 1px #efefef;
padding: 15px;
.txt-dv {
display: flex;
justify-content: space-around;
margin: 50px;
text-align: center;
.num {
font-size: 24px;
margin-bottom: 10px;
}
}
#number {
height: 350px;
}
}
.right-dv {
flex: 1;
padding: 15px;
.page-box {
display: flex;
justify-content: space-between;
margin: 20px 0;
.page-dv {
width: calc(50% - 15px);
height: 140px;
background-color: #F5FAFF;
padding: 30px;
box-sizing: border-box;
.page-num {
font-size: 24px;
margin-top: 20px;
}
}
}
.chatrs-dv {
padding: 20px;
background-color: #F6FBF7;
}
#pages {
height: 290px;
}
}
}
}
</style>
\ No newline at end of file
portal-manager-ui/admin/src/views/dataActuary/behaviour/pathanalyse/pathAnalyse.vue 0 → 100644
View file @ 42c3a718
<template>
<!-- 路径分析 -->
<div class="page">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择产品">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="queryform.value" style="width: 300px" />
</a-form-model-item>
<a-form-model-item>
<a-button type="primary">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div id="path"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
queryform: {
value: null
},
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
}
},
mounted() {
this.init()
},
methods: {
init() {
let chartDom = document.getElementById('path')
let myChart = echarts.init(chartDom);
myChart.setOption({
series: {
type: 'sankey',
layout: 'none',
emphasis: {
focus: 'adjacency'
},
color:['#FFCAC4','#6D86DE','#409AFE','#4DB3EA','#07CF8C'],
nodeWidth:10,
data: [{
name: 'a'
},
{
name: 'b'
},
{
name: 'a1'
},
{
name: 'a2'
},
{
name: 'b1'
},
{
name: 'c'
}
],
links: [{
source: 'a',
target: 'a1',
value: 5,
lineStyle:{
color:'source'
}
},
{
source: 'a',
target: 'a2',
value: 3,
lineStyle:{
color:'source'
}
},
{
source: 'b',
target: 'b1',
value: 8,
lineStyle:{
color:'source'
}
},
{
source: 'a',
target: 'b1',
value: 3,
lineStyle:{
color:'source'
}
},
{
source: 'b1',
target: 'a1',
value: 1,
lineStyle:{
color:'source'
}
},
{
source: 'b1',
target: 'c',
value: 2,
lineStyle:{
color:'source'
}
}
]
}
})
}
}
};
</script>
<style lang="less" scoped>
.page{
height: calc(100% - 50px);
display: flex;
flex-direction: column;
/deep/.ant-form {
padding: 15px;
}
#path{
flex: 1;
width: 70%;
margin: 0 auto;
}
}
</style>
\ No newline at end of file
portal-manager-ui/admin/src/views/dataActuary/behaviour/product/product.vue 0 → 100644
View file @ 42c3a718
<template>
<!-- 产品分析 -->
<div class="page">
<div class="img-dv">
<div id="queuing" @click="clickEvent"></div>
</div>
<div class="list-dv">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 180px" placeholder="选择产品">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="queryform.value" style="width: 300px" />
</a-form-model-item>
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 390px" placeholder="选择产品">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-button type="primary">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div class="main">
<div class="total-dv">
<div>总点击次数</div>
<div>312321</div>
</div>
<div style="margin-bottom: 20px;">事件排名Top10</div>
<a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }">
</a-table>
</div>
</div>
</div>
</template>
<script>
import Heatmap from 'heatmap.js';
export default {
data() {
return {
queryform: {
value: null
},
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
columns: [{
title: "序号",
width: "70px",
customRender: (text, record, index) => `${index+1}`,
align: "center",
},
{
title: "事件",
dataIndex: "title",
align: "center",
},
{
title: '点击次数',
dataIndex: 'address',
align: "center",
},
{
title: '事件数量(日均)',
dataIndex: 'address1',
align: "center",
}
],
data: [],
heatmapInstance: null,
dataPoint: []
}
},
mounted() {
this.init('queuing')
},
methods: {
clickEvent(e) {
this.dataPoint.push({
x: e.layerX,
y: e.layerY,
value: 20
})
let data = {
max: 100,
min: 0,
data: this.dataPoint
};
this.heatmapInstance.setData(data);
},
init(el, dataPoint) {
let config = {
container: document.getElementById(el),
radius: 30,
maxOpacity: .8,
minOpacity: 0,
blur: .5
};
this.heatmapInstance = Heatmap.create(config);
}
}
};
</script>
<style lang="less" scoped>
.page {
width: 100%;
height: calc(100% - 50px);
display: flex;
.img-dv {
width: 60%;
min-height: 100%;
display: flex;
justify-content: center;
align-items: center;
#queuing {
width: 740px;
height: 370px;
background-image: url('https://cdn.pixabay.com/photo/2023/03/22/20/16/muffin-7870491_640.jpg');
background-size: 100% 100%;
}
}
.list-dv {
width: 40%;
min-height: 100%;
border-left: solid 1px #efefef;
box-sizing: border-box;
/deep/.ant-form {
padding: 15px;
border-bottom: solid 1px #efefef;
}
.main {
padding: 15px;
}
.total-dv {
display: flex;
justify-content: space-between;
padding: 20px 0;
}
}
}
</style>
\ No newline at end of file
portal-manager-ui/admin/src/views/dataActuary/behaviour/usinghabit/usinghabit.vue 0 → 100644
View file @ 42c3a718
<template>
<!-- 使用习惯分析 -->
<div class="page">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model-item>
<a-select v-model="queryform.value" style="width: 200px" placeholder="选择产品">
<a-select-option value="jack">
Jack
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="queryform.value" style="width: 300px" />
</a-form-model-item>
<a-form-model-item>
<a-button type="primary">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div class="charts-box">
<div id="canal"></div>
<div id="type"></div>
<div id="way"></div>
</div>
</div>
</template>
<script>
import * as echarts from 'echarts'
export default {
data() {
return {
queryform: {
value: null
},
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
}
},
mounted() {
this.initCanal()
this.initType()
this.initWay()
},
methods: {
initWay(){
let chartDom = document.getElementById('way')
let myChart = echarts.init(chartDom);
myChart.setOption({
title: {
text: '取号方式分析',
left: 'center'
},
tooltip: {
trigger: 'item',
},
legend: {
bottom: 0,
left: 'center',
itemWidth: 10,
itemHeight: 10
},
color: ['#6395F9', '#64DAAB', '#647798', '#F6C02D', '#7567FA', '#75CBED'],
series: [{
name: 'Access From',
type: 'pie',
radius: '65%',
label: {
normal: {
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比)
}
},
labelLine: {
normal: {
length: 1
}
},
data: [{
value: 1048,
name: 'Search Engine'
},
{
value: 735,
name: 'Direct'
},
{
value: 580,
name: 'Email'
},
{
value: 484,
name: 'Union Ads'
},
{
value: 300,
name: 'Video Ads'
}
],
}]
})
},
initType() {
let chartDom = document.getElementById('type')
let myChart = echarts.init(chartDom);
myChart.setOption({
title: {
text: '取号类型分析',
left: 'center'
},
tooltip: {
trigger: 'item',
},
legend: {
bottom: 0,
left: 'center',
itemWidth: 10,
itemHeight: 10
},
color: ['#6395F9', '#64DAAB', '#647798', '#F6C02D', '#7567FA', '#75CBED'],
series: [{
name: 'Access From',
type: 'pie',
radius: '65%',
label: {
normal: {
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比)
}
},
labelLine: {
normal: {
length: 1
}
},
data: [{
value: 1048,
name: 'Search Engine'
},
{
value: 735,
name: 'Direct'
},
{
value: 580,
name: 'Email'
},
{
value: 484,
name: 'Union Ads'
},
{
value: 300,
name: 'Video Ads'
}
],
}]
})
},
initCanal() {
let chartDom = document.getElementById('canal')
let myChart = echarts.init(chartDom);
myChart.setOption({
title: {
text: '取号渠道分析',
left: 'center'
},
tooltip: {
trigger: 'item',
},
legend: {
bottom: 0,
left: 'center',
itemWidth: 10,
itemHeight: 10
},
color: ['#6395F9', '#64DAAB', '#647798', '#F6C02D', '#7567FA', '#75CBED'],
series: [{
name: 'Access From',
type: 'pie',
radius: '65%',
label: {
normal: {
formatter: '{d}%' //自定义显示格式(b:name, c:value, d:百分比)
}
},
labelLine: {
normal: {
length: 1
}
},
data: [{
value: 1048,
name: '终端取号'
},
{
value: 735,
name: '在线取号'
}
]
}]
})
}
}
};
</script>
<style lang="less" scoped>
.page {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
/deep/.ant-form {
padding: 15px;
}
.charts-box {
flex: 1;
display: flex;
justify-content: space-between;
padding: 50px 0;
#canal,#type,#way {
width: 30%;
height: 100%;
}
}
}
</style>
\ No newline at end of file
portal-manager-ui/admin/yarn.lock
View file @ 42c3a718
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment