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> <template>
<!-- 路径分析 --> <!-- 路径分析 -->
<div class="page"> <div class="page">
<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="选择产品"> :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> >
<a-button type="primary" class="addclass" @click="getData"> <a-select-option
开始分析 :value="item.id"
</a-button> v-for="(item, index) in product"
</a-form-model-item> :key="index"
</a-form-model> >
<div id="path"></div> {{ item.title }}
</div> </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> </template>
<script> <script>
import * as echarts from 'echarts' import * as echarts from "echarts";
import product from "../mixins/product" import product from "../mixins/product";
import {getWayAccessAnalyse} from '@/api/dataActuary.js' import { getWayAccessAnalyse } from "@/api/dataActuary.js";
import moment from 'moment'; import moment from "moment";
export default { export default {
mixins:[product], mixins: [product],
data() { data() {
return { return {
queryform: { queryform: {
productId: 1, productId: 1,
dateTimeStart:moment().format('yyyy-MM-DD'), dateTimeStart: moment().format("yyyy-MM-DD"),
dateTimeEnd:moment().format('yyyy-MM-DD') dateTimeEnd: moment().format("yyyy-MM-DD"),
}, },
time:[moment().format('yyyy-MM-DD'),moment().format('yyyy-MM-DD')], time: [moment().format("yyyy-MM-DD"), moment().format("yyyy-MM-DD")],
product:[{ product: [
title:'排队机', {
id:1 title: "排队机",
}], id: 1,
labelCol: { },
span: 1 ],
}, labelCol: {
wrapperCol: { span: 1,
span: 14 },
}, wrapperCol: {
} span: 14,
}, },
mounted() { myChart: null,
this.getData() };
}, },
methods: { created() {
getData() { this.$nextTick(() => {
this.queryform.dateTimeStart = this.time ? this.time[0] : null this.getData();
this.queryform.dateTimeStart = this.time ? this.time[1] : null });
getWayAccessAnalyse(this.queryform).then(res=>{ },
let data = res.data.data.map(item=>({name:item.name})) methods: {
let links = res.data.links.map(item=>({ getData() {
source:item.sourceName, this.queryform.dateTimeStart = this.time ? this.time[0] : null;
target:item.targetName, this.queryform.dateTimeStart = this.time ? this.time[1] : null;
value:item.value, getWayAccessAnalyse(this.queryform).then((res) => {
lineStyle:{ let data = res.data.data.map((item, i) =>
color:'source' item.code != "/sceneSignIn"
} ? {
})) name: item.name,
this.init(data,links) }
}) : ""
}, );
uniqueFunc(arr, uniId){ let links = res.data.links.map((item) => ({
const res = new Map(); source: item.sourceName,
return arr.filter((item) => !res.has(item[uniId]) && res.set(item[uniId], 1)); target: item.targetName,
}, value: item.value,
init(data,links) { lineStyle: {
let chartDom = document.getElementById('path') color: "source",
let myChart = echarts.init(chartDom); },
myChart.setOption({ }));
series: { data = data.filter((v) => v);
type: 'sankey', links = links.filter((v) => v.target != "首页");
layout: 'none', this.init(data, links);
emphasis: { });
focus: 'adjacency' },
}, uniqueFunc(arr, uniId) {
color:['#FFCAC4','#6D86DE','#409AFE','#4DB3EA','#07CF8C'], const res = new Map();
nodeWidth:10, return arr.filter(
data: data, (item) => !res.has(item[uniId]) && res.set(item[uniId], 1)
links: links );
} },
}) 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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.page{ .page {
height: calc(100% - 50px); height: calc(100% - 50px);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/deep/.ant-form { /deep/.ant-form {
padding: 15px; padding: 15px;
} }
#path{ #path {
flex: 1; flex: 1;
width: 70%; width: 70%;
margin: 0 auto; margin: 0 auto;
} }
} }
</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