Skip to content

S
smart_gov_platform
Commit aa9dd7d3 authored by 姬鋆屾's avatar 姬鋆屾
Browse files
Options

tui

parent c9dedf2c
Show whitespace changes
Inline Side-by-side
Showing with 247 additions and 216 deletions
portal-manager-ui/admin/src/views/dataActuary/behaviour/product/product.vue
View file @ aa9dd7d3
......@@ -2,25 +2,48 @@
<!-- 产品分析 -->
<div class="page">
<div class="img-dv">
<img :src="img" ref="img">
<img :src="img" ref="img" />
<div id="queuing"></div>
</div>
<div class="list-dv">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline">
<a-form-model
:model="queryform"
:label-col="labelCol"
:wrapper-col="wrapperCol"
layout="inline"
>
<a-form-model-item>
<a-select v-model="queryform.productId" style="width: 200px" placeholder="选择产品" @change="changeProductId">
<a-select-option :value="item.id" v-for="(item,index) in product" :key="index">
{{item.title}}
<a-select
v-model="queryform.productId"
style="width: 200px"
placeholder="选择产品"
@change="changeProductId"
>
<a-select-option
:value="item.id"
v-for="(item, index) in product"
:key="index"
>
{{ item.title }}
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-range-picker valueFormat="yyyy-MM-DD" v-model="time" style="width: 300px" :allowClear="false" />
<a-range-picker
valueFormat="yyyy-MM-DD"
v-model="time"
style="width: 300px"
:allowClear="false"
/>
</a-form-model-item>
<a-form-model-item>
<a-select v-model="queryform.pageCode" style="width: 410px">
<a-select-option :value="item.id" v-for="(item,index) in page" :key="index">
{{item.title}}
<a-select-option
:value="item.id"
v-for="(item, index) in page"
:key="index"
>
{{ item.title }}
</a-select-option>
</a-select>
</a-form-model-item>
......@@ -33,10 +56,15 @@
<div class="main">
<div class="total-dv">
<div>总点击次数</div>
<div>{{clickSum}}</div>
<div>{{ clickSum }}</div>
</div>
<div style="margin-bottom: 20px;">事件排名Top10</div>
<a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }" :pagination="false">
<div style="margin-bottom: 20px">事件排名Top10</div>
<a-table
:columns="columns"
:data-source="data"
:scroll="{ y: 590 }"
:pagination="false"
>
</a-table>
</div>
</div>
......@@ -44,42 +72,44 @@
</template>
<script>
import product from "../mixins/product"
import Heatmap from 'heatmap.js';
import moment from 'moment';
import {
getProductHotCensus,
pageLlist
} from '@/api/dataActuary.js'
export default {
mixins:[product],
import product from "../mixins/product";
import Heatmap from "heatmap.js";
import moment from "moment";
import { getProductHotCensus, pageLlist } from "@/api/dataActuary.js";
export default {
mixins: [product],
data() {
return {
queryform: {
productId: 1,
dateTimeStart: moment().format('yyyy-MM-DD'),
dateTimeEnd: moment().format('yyyy-MM-DD'),
pageCode: '/'
},
time: [moment().format('yyyy-MM-DD'), moment().format('yyyy-MM-DD')],
product: [{
title: '排队机',
id: 1
}],
page: [{
title: '首页',
id: '/'
}],
dateTimeStart: moment().format("yyyy-MM-DD"),
dateTimeEnd: moment().format("yyyy-MM-DD"),
pageCode: "/",
},
time: [moment().format("yyyy-MM-DD"), moment().format("yyyy-MM-DD")],
product: [
{
title: "排队机",
id: 1,
},
],
page: [
{
title: "首页",
id: "/",
},
],
labelCol: {
span: 1
span: 1,
},
wrapperCol: {
span: 14
span: 14,
},
columns: [{
columns: [
{
title: "序号",
width: "70px",
customRender: (text, record, index) => `${index+1}`,
customRender: (text, record, index) => `${index + 1}`,
align: "center",
},
{
......@@ -88,100 +118,101 @@
align: "center",
},
{
title: '点击次数',
dataIndex: 'value',
title: "点击次数",
dataIndex: "value",
align: "center",
},
{
title: '事件数量(日均)',
dataIndex: 'proportion',
title: "事件数量(日均)",
dataIndex: "proportion",
align: "center",
}
},
],
data: [],
heatmapInstance: null,
dataPoint: [],
img: '',
BASE_URL: process.env.VUE_APP_API_BASE_URL + '/',
clickSum:0,//总次数
ProductLlist:[]
}
img: "",
BASE_URL: process.env.VUE_APP_API_BASE_URL + "/",
clickSum: 0, //总次数
ProductLlist: [],
};
},
mounted() {
this.init('queuing')
this.getPageLlist()
this.init("queuing");
this.getPageLlist();
},
methods: {
// 选择产品
changeProductId(v){
this.getPageLlist(v)
changeProductId(v) {
this.getPageLlist(v);
},
// 查询页面
getPageLlist(productId = 1){
pageLlist({productId:productId,size:-1}).then(res=>{
const {data} = res.data
let arr = []
if(data && data.length > 0){
data.forEach(element => {
arr.push({title:element.pageName,id:element.pageCode})
getPageLlist(productId = 1) {
pageLlist({ productId: productId, size: -1 }).then((res) => {
const { data } = res.data;
let arr = [];
if (data && data.length > 0) {
data.forEach((element) => {
arr.push({ title: element.pageName, id: element.pageCode });
});
this.page = arr
}else{
this.page = [{
title: '首页',
id: '/'
}]
this.page = arr;
} else {
this.page = [
{
title: "首页",
id: "/",
},
];
}
})
});
},
getList() {
this.queryform.dateTimeStart = this.time ? this.time[0] : null
this.queryform.dateTimeStart = this.time ? this.time[1] : null
getProductHotCensus(this.queryform).then(res => {
this.clickSum = res.data.clickSum
this.data = res.data.data
this.img = (process.env.NODE_ENV == 'development')?`${this.BASE_URL}${res.data.screenUrl}`:res.data.screenUrl
this.queryform.dateTimeStart = this.time ? this.time[0] : null;
this.queryform.dateTimeStart = this.time ? this.time[1] : null;
getProductHotCensus(this.queryform).then((res) => {
console.log(res);
this.clickSum = res.data.clickSum;
this.data = res.data.top10List;
this.img =
process.env.NODE_ENV == "development"
? `${this.BASE_URL}${res.data.screenUrl}`
: res.data.screenUrl;
let imgSize = new Image();
imgSize.src = this.img;
imgSize.onload = () => {
let w = this.$refs.img.width / imgSize.width
let h = this.$refs.img.height / imgSize.height
this.dataPoint = res.data.data.map(({
x,
y,
value
}) => ({
let w = this.$refs.img.width / imgSize.width;
let h = this.$refs.img.height / imgSize.height;
this.dataPoint = res.data.hostList.map(({ x, y, value }) => ({
x: parseInt(x * w),
y: parseInt(y * h),
value
}))
value,
}));
let data = {
max: 10,
min: 0,
data: this.dataPoint
data: this.dataPoint,
};
this.heatmapInstance.setData(data);
}
})
};
});
},
init(el) {
let config = {
container: document.getElementById(el),
radius: 30,
maxOpacity: .8,
maxOpacity: 0.8,
minOpacity: 0,
blur: .5
blur: 0.5,
};
this.heatmapInstance = Heatmap.create(config);
this.getList()
}
}
};
this.getList();
},
},
};
</script>
<style lang="less" scoped>
.page {
.page {
width: 100%;
height: calc(100% - 50px);
display: flex;
......@@ -226,5 +257,5 @@
padding: 20px 0;
}
}
}
}
</style>
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