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

portal-manager-ui/admin/src/views/dataActuary/behaviour/pathanalyse/pathAnalyse.vue

 <template>
   <!-- 路径分析 -->
   <div class="page">
-		<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="选择产品">
-					<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="选择产品"
+        >
+          <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-button type="primary" class="addclass" @click="getData">
@@ -23,89 +41,115 @@
 </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],
+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')
+        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
-				}],
+      time: [moment().format("yyyy-MM-DD"), moment().format("yyyy-MM-DD")],
+      product: [
+        {
+          title: "排队机",
+          id: 1,
+        },
+      ],
       labelCol: {
-					span: 1
+        span: 1,
       },
       wrapperCol: {
-					span: 14
+        span: 14,
       },
-			}
+      myChart: null,
+    };
   },
-		mounted() {
-			this.getData()
+  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=>({name:item.name}))
-					let links = res.data.links.map(item=>({
-						source:item.sourceName,
-						target:item.targetName,
-						value:item.value,
-						lineStyle:{
-							color:'source'
+      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,
               }
-					}))
-					this.init(data,links)
-				})
+            : ""
+        );
+        let links = res.data.links.map((item) => ({
+          source: item.sourceName,
+          target: item.targetName,
+          value: item.value,
+            lineStyle: {
+              color: "source",
             },
-			uniqueFunc(arr, uniId){
+        }));
+        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));
+      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({
+    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',
+          type: "sankey",
+          layout: "none",
           emphasis: {
-							focus: 'adjacency'
+            focus: "adjacency",
           },
-						color:['#FFCAC4','#6D86DE','#409AFE','#4DB3EA','#07CF8C'],
-						nodeWidth:10,
+          color: ["#FFCAC4", "#6D86DE", "#409AFE", "#4DB3EA", "#07CF8C"],
+          nodeWidth: 10,
           data: data,
-						links: links
-					}
-				})
-			}
+          links: links,
+        },
+      });
+      window.addEventListener("resize", () => {
+        if (this.myChart) {
+          this.myChart.resize();
         }
-	};
+      });
+    },
+  },
+};
 </script>
 
 <style lang="less" scoped>
-	.page{
+.page {
   height: calc(100% - 50px);
   display: flex;
   flex-direction: column;
   /deep/.ant-form {
     padding: 15px;
   }
-		#path{
+  #path {
     flex: 1;
     width: 70%;
     margin: 0 auto;
   }
-	}
+}
 </style>