Skip to content

S
smart_gov_platform
Commit 1125cab3 authored by “yiyousong”'s avatar “yiyousong”
Browse files
Options

Merge branch 'master' of http://gitlab.scsmile.cn/zxf/smart_gov_platform

parents 5663e5bb 18e8421d
Hide whitespace changes
Inline Side-by-side
Showing with 148 additions and 104 deletions
portal-manager-ui/admin/src/views/dataActuary/behaviour/pathanalyse/pathAnalyse.vue
View file @ 1125cab3
<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.productId" style="width: 200px" placeholder="选择产品">
<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-form-model-item>
<a-form-model-item>
<a-button type="primary" class="addclass" @click="getData">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div id="path"></div>
</div>
<!-- 路径分析 -->
<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.productId"
style="width: 200px"
placeholder="选择产品"
>
<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-form-model-item>
<a-form-model-item>
<a-button type="primary" class="addclass" @click="getData">
开始分析
</a-button>
</a-form-model-item>
</a-form-model>
<div id="path"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import product from "../mixins/product"
import {getWayAccessAnalyse} from '@/api/dataActuary.js'
import moment from 'moment';
export default {
mixins:[product],
data() {
return {
queryform: {
productId: 1,
dateTimeStart:moment().format('yyyy-MM-DD'),
dateTimeEnd:moment().format('yyyy-MM-DD')
},
time:[moment().format('yyyy-MM-DD'),moment().format('yyyy-MM-DD')],
product:[{
title:'排队机',
id:1
}],
labelCol: {
span: 1
},
wrapperCol: {
span: 14
},
}
},
mounted() {
this.getData()
},
methods: {
getData() {
this.queryform.dateTimeStart = this.time ? this.time[0] : null
this.queryform.dateTimeStart = this.time ? this.time[1] : null
getWayAccessAnalyse(this.queryform).then(res=>{
let data = res.data.data.map(item=>({name:item.name}))
let links = res.data.links.map(item=>({
source:item.sourceName,
target:item.targetName,
value:item.value,
lineStyle:{
color:'source'
}
}))
this.init(data,links)
})
},
uniqueFunc(arr, uniId){
const res = new Map();
return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1));
},
init(data,links) {
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: data,
links: links
}
})
}
}
};
import * as echarts from "echarts";
import product from "../mixins/product";
import { getWayAccessAnalyse } from "@/api/dataActuary.js";
import moment from "moment";
export default {
mixins: [product],
data() {
return {
queryform: {
productId: 1,
dateTimeStart: moment().format("yyyy-MM-DD"),
dateTimeEnd: moment().format("yyyy-MM-DD"),
},
time: [moment().format("yyyy-MM-DD"), moment().format("yyyy-MM-DD")],
product: [
{
title: "排队机",
id: 1,
},
],
labelCol: {
span: 1,
},
wrapperCol: {
span: 14,
},
myChart: null,
};
},
created() {
this.$nextTick(() => {
this.getData();
});
},
methods: {
getData() {
this.queryform.dateTimeStart = this.time ? this.time[0] : null;
this.queryform.dateTimeStart = this.time ? this.time[1] : null;
getWayAccessAnalyse(this.queryform).then((res) => {
let data = res.data.data.map((item, i) =>
item.code != "/sceneSignIn"
? {
name: item.name,
}
: ""
);
let links = res.data.links.map((item) => ({
source: item.sourceName,
target: item.targetName,
value: item.value,
lineStyle: {
color: "source",
},
}));
data = data.filter((v) => v);
links = links.filter((v) => v.target != "首页");
this.init(data, links);
});
},
uniqueFunc(arr, uniId) {
const res = new Map();
return arr.filter(
(item) => !res.has(item[uniId]) && res.set(item[uniId], 1)
);
},
init(data, links) {
if (
this.myChart != null &&
this.myChart != "" &&
this.myChart != undefined
) {
this.myChart.dispose(); //销毁
}
this.myChart = echarts.init(document.getElementById("path"));
this.myChart.setOption({
series: {
type: "sankey",
layout: "none",
emphasis: {
focus: "adjacency",
},
color: ["#FFCAC4", "#6D86DE", "#409AFE", "#4DB3EA", "#07CF8C"],
nodeWidth: 10,
data: data,
links: links,
},
});
window.addEventListener("resize", () => {
if (this.myChart) {
this.myChart.resize();
}
});
},
},
};
</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
.page {
height: calc(100% - 50px);
display: flex;
flex-direction: column;
/deep/.ant-form {
padding: 15px;
}
#path {
flex: 1;
width: 70%;
margin: 0 auto;
}
}
</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