tui

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

@@ -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>