Skip to content

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

tui

parent c9dedf2c
Hide 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
<template> <template>
<!-- 产品分析 --> <!-- 产品分析 -->
<div class="page"> <div class="page">
<div class="img-dv"> <div class="img-dv">
<img :src="img" ref="img"> <img :src="img" ref="img" />
<div id="queuing"></div> <div id="queuing"></div>
</div> </div>
<div class="list-dv"> <div class="list-dv">
<a-form-model :model="queryform" :label-col="labelCol" :wrapper-col="wrapperCol" layout="inline"> <a-form-model
<a-form-model-item> :model="queryform"
<a-select v-model="queryform.productId" style="width: 200px" placeholder="选择产品" @change="changeProductId"> :label-col="labelCol"
<a-select-option :value="item.id" v-for="(item,index) in product" :key="index"> :wrapper-col="wrapperCol"
{{item.title}} layout="inline"
</a-select-option> >
</a-select> <a-form-model-item>
</a-form-model-item> <a-select
<a-form-model-item> v-model="queryform.productId"
<a-range-picker valueFormat="yyyy-MM-DD" v-model="time" style="width: 300px" :allowClear="false" /> style="width: 200px"
</a-form-model-item> placeholder="选择产品"
<a-form-model-item> @change="changeProductId"
<a-select v-model="queryform.pageCode" style="width: 410px"> >
<a-select-option :value="item.id" v-for="(item,index) in page" :key="index"> <a-select-option
{{item.title}} :value="item.id"
</a-select-option> v-for="(item, index) in product"
</a-select> :key="index"
</a-form-model-item> >
<a-form-model-item> {{ item.title }}
<a-button type="primary" class="addclass" @click="getList"> </a-select-option>
开始分析 </a-select>
</a-button> </a-form-model-item>
</a-form-model-item> <a-form-model-item>
</a-form-model> <a-range-picker
<div class="main"> valueFormat="yyyy-MM-DD"
<div class="total-dv"> v-model="time"
<div>总点击次数</div> style="width: 300px"
<div>{{clickSum}}</div> :allowClear="false"
</div> />
<div style="margin-bottom: 20px;">事件排名Top10</div> </a-form-model-item>
<a-table :columns="columns" :data-source="data" :scroll="{ y: 590 }" :pagination="false"> <a-form-model-item>
</a-table> <a-select v-model="queryform.pageCode" style="width: 410px">
</div> <a-select-option
</div> :value="item.id"
</div> v-for="(item, index) in page"
:key="index"
>
{{ item.title }}
</a-select-option>
</a-select>
</a-form-model-item>
<a-form-model-item>
<a-button type="primary" class="addclass" @click="getList">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div class="main">
<div class="total-dv">
<div>总点击次数</div>
<div>{{ clickSum }}</div>
</div>
<div style="margin-bottom: 20px">事件排名Top10</div>
<a-table
:columns="columns"
:data-source="data"
:scroll="{ y: 590 }"
:pagination="false"
>
</a-table>
</div>
</div>
</div>
</template> </template>
<script> <script>
import product from "../mixins/product" import product from "../mixins/product";
import Heatmap from 'heatmap.js'; import Heatmap from "heatmap.js";
import moment from 'moment'; import moment from "moment";
import { import { getProductHotCensus, pageLlist } from "@/api/dataActuary.js";
getProductHotCensus, export default {
pageLlist mixins: [product],
} from '@/api/dataActuary.js' data() {
export default { return {
mixins:[product], queryform: {
data() { productId: 1,
return { dateTimeStart: moment().format("yyyy-MM-DD"),
queryform: { dateTimeEnd: moment().format("yyyy-MM-DD"),
productId: 1, pageCode: "/",
dateTimeStart: moment().format('yyyy-MM-DD'), },
dateTimeEnd: moment().format('yyyy-MM-DD'), time: [moment().format("yyyy-MM-DD"), moment().format("yyyy-MM-DD")],
pageCode: '/' product: [
}, {
time: [moment().format('yyyy-MM-DD'), moment().format('yyyy-MM-DD')], title: "排队机",
product: [{ id: 1,
title: '排队机', },
id: 1 ],
}], page: [
page: [{ {
title: '首页', title: "首页",
id: '/' id: "/",
}], },
labelCol: { ],
span: 1 labelCol: {
}, span: 1,
wrapperCol: { },
span: 14 wrapperCol: {
}, span: 14,
columns: [{ },
title: "序号", columns: [
width: "70px", {
customRender: (text, record, index) => `${index+1}`, title: "序号",
align: "center", width: "70px",
}, customRender: (text, record, index) => `${index + 1}`,
{ align: "center",
title: "事件", },
dataIndex: "businessName", {
align: "center", title: "事件",
}, dataIndex: "businessName",
{ align: "center",
title: '点击次数', },
dataIndex: 'value', {
align: "center", title: "点击次数",
}, dataIndex: "value",
{ align: "center",
title: '事件数量(日均)', },
dataIndex: 'proportion', {
align: "center", title: "事件数量(日均)",
} dataIndex: "proportion",
], align: "center",
data: [], },
heatmapInstance: null, ],
dataPoint: [], data: [],
img: '', heatmapInstance: null,
BASE_URL: process.env.VUE_APP_API_BASE_URL + '/', dataPoint: [],
clickSum:0,//总次数 img: "",
ProductLlist:[] BASE_URL: process.env.VUE_APP_API_BASE_URL + "/",
} clickSum: 0, //总次数
}, ProductLlist: [],
mounted() { };
this.init('queuing') },
this.getPageLlist() mounted() {
}, this.init("queuing");
methods: { this.getPageLlist();
// 选择产品 },
changeProductId(v){ methods: {
this.getPageLlist(v) // 选择产品
}, changeProductId(v) {
// 查询页面 this.getPageLlist(v);
getPageLlist(productId = 1){ },
pageLlist({productId:productId,size:-1}).then(res=>{ // 查询页面
const {data} = res.data getPageLlist(productId = 1) {
let arr = [] pageLlist({ productId: productId, size: -1 }).then((res) => {
if(data && data.length > 0){ const { data } = res.data;
data.forEach(element => { let arr = [];
arr.push({title:element.pageName,id:element.pageCode}) if (data && data.length > 0) {
}); data.forEach((element) => {
this.page = arr arr.push({ title: element.pageName, id: element.pageCode });
}else{ });
this.page = [{ this.page = arr;
title: '首页', } else {
id: '/' 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 getList() {
this.data = res.data.data this.queryform.dateTimeStart = this.time ? this.time[0] : null;
this.img = (process.env.NODE_ENV == 'development')?`${this.BASE_URL}${res.data.screenUrl}`:res.data.screenUrl this.queryform.dateTimeStart = this.time ? this.time[1] : null;
let imgSize = new Image(); getProductHotCensus(this.queryform).then((res) => {
imgSize.src = this.img; console.log(res);
imgSize.onload = () => { this.clickSum = res.data.clickSum;
let w = this.$refs.img.width / imgSize.width this.data = res.data.top10List;
let h = this.$refs.img.height / imgSize.height this.img =
this.dataPoint = res.data.data.map(({ process.env.NODE_ENV == "development"
x, ? `${this.BASE_URL}${res.data.screenUrl}`
y, : res.data.screenUrl;
value let imgSize = new Image();
}) => ({ imgSize.src = this.img;
x: parseInt(x * w), imgSize.onload = () => {
y: parseInt(y * h), let w = this.$refs.img.width / imgSize.width;
value let h = this.$refs.img.height / imgSize.height;
})) this.dataPoint = res.data.hostList.map(({ x, y, value }) => ({
let data = { x: parseInt(x * w),
max: 10, y: parseInt(y * h),
min: 0, value,
data: this.dataPoint }));
}; let data = {
this.heatmapInstance.setData(data); max: 10,
} min: 0,
}) data: this.dataPoint,
}, };
init(el) { this.heatmapInstance.setData(data);
let config = { };
container: document.getElementById(el), });
radius: 30, },
maxOpacity: .8, init(el) {
minOpacity: 0, let config = {
blur: .5 container: document.getElementById(el),
}; radius: 30,
this.heatmapInstance = Heatmap.create(config); maxOpacity: 0.8,
this.getList() minOpacity: 0,
} blur: 0.5,
} };
}; this.heatmapInstance = Heatmap.create(config);
this.getList();
},
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.page {
width: 100%;
height: calc(100% - 50px);
display: flex;
.page { .img-dv {
width: 100%; width: 60%;
height: calc(100% - 50px); margin: 100px;
display: flex; position: relative;
.img-dv { img {
width: 60%; width: 100%;
margin: 100px; }
position: relative;
img { #queuing {
width: 100%; width: 100%;
} height: 100%;
position: absolute !important;
top: 0;
left: 0;
z-index: 999;
}
}
#queuing { .list-dv {
width: 100%; width: 40%;
height: 100%; min-height: 100%;
position: absolute !important; border-left: solid 1px #efefef;
top: 0; box-sizing: border-box;
left: 0;
z-index: 999;
}
}
.list-dv { /deep/.ant-form {
width: 40%; padding: 15px;
min-height: 100%; border-bottom: solid 1px #efefef;
border-left: solid 1px #efefef; }
box-sizing: border-box;
/deep/.ant-form { .main {
padding: 15px; padding: 15px;
border-bottom: solid 1px #efefef; }
}
.main { .total-dv {
padding: 15px; display: flex;
} justify-content: space-between;
padding: 20px 0;
.total-dv { }
display: flex; }
justify-content: space-between; }
padding: 20px 0; </style>
}
}
}
</style>
\ No newline at end of file
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