流量分析重构

src/assets/data/map-2.json

@@ -0,0 +1,23 @@
+[
+  {"name": "Russia","value": 86.8},
+  {"name": "China","value": 106.3},
+  {"name": "Japan","value": 94.7},
+  {"name": "Mongolia","value": 98},
+  {"name": "Canada","value": 98.4},
+  {"name": "United Kingdom","value": 97.2},
+  {"name": "United States of America","value": 98.3},
+  {"name": "Brazil","value": 96.7},
+  {"name": "Argentina","value": 95.8},
+  {"name": "Algeria","value": 101.3},
+  {"name": "France","value": 94.8},
+  {"name": "Germany","value": 96.6},
+  {"name": "Ukraine","value": 86.3},
+  {"name": "Egypt","value": 102.1},
+  {"name": "South Africa","value": 101.3},
+  {"name": "India","value": 107.6},
+  {"name": "Australia","value": 99.9},
+  {"name": "Saudi Arabia","value":130.1},
+  {"name": "Afghanistan","value": 106.5},
+  {"name": "Kazakhstan","value":93.4},
+  {"name": "Indonesia","value": 101.4}
+]

src/assets/trafficAnalysis/avgVisitPage.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>访客平均访问页面数</title>
+    <g id="数据中心" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="访客平均访问页面数" fill="#333333" fill-rule="nonzero">
+            <path d="M160.847182,121.887645 L7.08995665,121.887645 C3.27492775,121.887645 0.153540462,118.766257 0.153540462,114.951228 C0.153540462,111.136199 3.27492775,108.014812 7.08995665,108.014812 L160.847182,108.014812 C164.662211,108.014812 167.783598,111.136199 167.783598,114.951228 C167.783598,118.766257 164.662211,121.887645 160.847182,121.887645 Z" id="路径"></path>
+            <path d="M83.9685694,198.766257 C80.1535405,198.766257 77.0321532,195.64487 77.0321532,191.829841 L77.0321532,115.529263 C77.0321532,111.714234 80.1535405,108.592847 83.9685694,108.592847 C87.7835983,108.592847 90.9049855,111.714234 90.9049855,115.529263 L90.9049855,191.829841 C90.9049855,195.64487 87.7835983,198.766257 83.9685694,198.766257 Z" id="路径"></path>
+            <path d="M137.725795,198.997471 L30.2113439,198.997471 C13.679552,198.997471 0.153540462,185.47146 0.153540462,168.939668 L0.153540462,61.4252168 C0.153540462,44.8934249 13.679552,31.3674133 30.2113439,31.3674133 L137.725795,31.3674133 C154.257587,31.3674133 167.783598,44.8934249 167.783598,61.4252168 L167.783598,168.939668 C167.783598,185.47146 154.257587,198.997471 137.725795,198.997471 Z M30.2113439,45.2402457 C21.3096098,45.2402457 14.0263728,52.5234827 14.0263728,61.4252168 L14.0263728,168.939668 C14.0263728,177.841402 21.3096098,185.124639 30.2113439,185.124639 L137.725795,185.124639 C146.627529,185.124639 153.910766,177.841402 153.910766,168.939668 L153.910766,61.4252168 C153.910766,52.5234827 146.627529,45.2402457 137.725795,45.2402457 L30.2113439,45.2402457 Z" id="形状"></path>
+            <path d="M192.061055,175.876084 C188.246026,175.876084 185.124639,172.754697 185.124639,168.939668 L185.124639,30.2113439 C185.124639,21.3096098 177.841402,14.0263728 168.939668,14.0263728 L30.2113439,14.0263728 C26.396315,14.0263728 23.2749277,10.9049855 23.2749277,7.08995665 C23.2749277,3.27492775 26.396315,0.153540462 30.2113439,0.153540462 L168.939668,0.153540462 C185.47146,0.153540462 198.997471,13.679552 198.997471,30.2113439 L198.997471,168.939668 C198.997471,172.754697 195.876084,175.876084 192.061055,175.876084 Z" id="路径"></path>
+        </g>
+    </g>
+</svg>

src/assets/trafficAnalysis/avgVisitTime.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>平均访问时长</title>
+    <g id="数据中心" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="平均访问时长" fill="#333333" fill-rule="nonzero">
+            <path d="M52.516131,167.155003 L30.1007093,167.155003 C26.2580655,167.155003 22.4154217,163.9528 22.4154217,159.469715 C22.4154217,154.986631 25.6176248,151.784428 30.1007093,151.784428 L52.516131,151.784428 C56.3587747,151.784428 60.2014185,154.986631 60.2014185,159.469715 C60.2014185,163.9528 56.3587747,167.155003 52.516131,167.155003 Z M151.143987,160.110156 C149.222665,160.110156 147.301343,159.469715 146.020462,158.188834 L131.290328,145.380021 C128.088125,142.818259 128.088125,137.694734 130.649887,134.492531 C133.21165,131.290328 138.335175,131.290328 141.537378,133.85209 L156.267512,146.660903 C159.469715,149.222665 159.469715,154.34619 156.907953,157.548393 C154.986631,158.829275 153.065309,160.110156 151.143987,160.110156 L151.143987,160.110156 Z" id="形状"></path>
+            <path d="M136.413853,146.660903 C132.571209,146.660903 128.728565,143.4587 128.728565,138.975615 L128.728565,106.313143 C128.728565,102.4705 131.930768,98.6278559 136.413853,98.6278559 C140.896937,98.6278559 144.09914,101.830059 144.09914,106.313143 L144.09914,138.975615 C144.09914,143.458699 140.256496,146.660903 136.413853,146.660903 Z" id="路径"></path>
+            <path d="M136.413853,199.177034 C101.830059,199.177034 73.6506716,170.997646 73.6506716,136.413853 C73.6506716,101.830059 101.830059,73.6506716 136.413853,73.6506716 C170.997646,73.6506716 199.177034,101.830059 199.177034,136.413853 C199.177034,170.997646 170.997646,199.177034 136.413853,199.177034 Z M136.413853,89.0212465 C110.155787,89.0212465 89.0212465,110.155787 89.0212465,136.413853 C89.0212465,162.671918 110.155787,183.806459 136.413853,183.806459 C162.671918,183.806459 183.806459,162.671918 183.806459,136.413853 C183.806459,110.155787 162.671918,89.0212465 136.413853,89.0212465 Z" id="形状"></path>
+            <path d="M44.8308436,133.21165 L24.9771842,133.21165 C11.5279311,133.21165 -5.8873541e-13,122.324159 -5.8873541e-13,108.234465 L-5.8873541e-13,24.9771842 C-5.8873541e-13,11.5279311 11.5279311,3.04518315e-13 24.9771842,3.04518315e-13 L156.267512,3.04518315e-13 C169.716765,3.04518315e-13 181.244696,10.8874906 181.244696,24.9771842 L181.244696,53.1565717 C181.244696,56.9992155 178.042493,60.8418593 173.559409,60.841859 C169.076324,60.8418588 165.874121,57.639656 165.874121,53.1565717 L165.874121,24.9771842 C165.874121,19.2132187 161.391037,15.3705749 156.267512,15.3705749 L24.9771842,15.3705749 C19.2132187,15.3705749 15.3705749,19.8536592 15.3705749,24.9771842 L15.3705749,108.234465 C15.3705749,113.998431 19.8536592,117.841075 24.9771842,117.841075 L44.8308436,117.841075 C48.6734874,118.481515 52.5161312,121.683718 52.516131,126.166803 C52.5161308,130.649887 48.6734872,133.21165 44.8308436,133.21165 Z" id="路径"></path>
+        </g>
+    </g>
+</svg>

src/assets/trafficAnalysis/enquirycounticon.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#7C98FC;}
+</style>
+<title>询盘数</title>
+<desc>Created with Sketch.</desc>
+<g id="页面-1">
+	<g id="询盘数">
+		<path id="形状" class="st0" d="M181.4,173.1H59c-10.2,0-18.3-8.3-18.3-18.3V83.5c0-10.2,8.3-18.3,18.3-18.3h122.4
+			c10.2,0,18.3,8.3,18.3,18.3v71.3C199.7,164.7,191.6,173.1,181.4,173.1z M59,75.4c-4.3,0-7.8,3.5-7.8,7.8v71.3
+			c0,4.3,3.5,7.8,7.8,7.8h122.4c4.3,0,7.8-3.5,7.8-7.8v-71c0-4.3-3.5-7.8-7.8-7.8L59,75.4z"/>
+		<path id="路径" class="st0" d="M120.3,124.4c-1.1,0-1.9-0.3-2.7-0.8l-48.4-31c-2.4-1.6-3.2-4.8-1.6-7.3c1.6-2.4,4.8-3.2,7.3-1.6
+			l45.5,29.1l45.5-29.1c2.4-1.6,5.7-0.8,7.3,1.6s0.8,5.7-1.6,7.3L123,123.5C122.2,124.1,121.1,124.4,120.3,124.4L120.3,124.4z"/>
+		<path id="路径_1_" class="st0" d="M18.9,134.8c-10.2,0-18.6-8.3-18.6-18.3V45.2c0-10.2,8.3-18.3,18.3-18.3H141
+			c10.2,0,18.3,8.3,18.3,18.3c0,3-2.4,5.4-5.4,5.4s-5.4-2.4-5.4-5.4c0-4.3-3.5-7.8-7.8-7.8H18.9c-4.3,0-7.8,3.5-7.8,7.8v71.3
+			c0,4.3,3.5,7.8,7.8,7.8c3,0,5.4,2.4,5.4,5.4C24.3,132.7,21.8,134.8,18.9,134.8z"/>
+	</g>
+</g>
+</svg>

src/assets/trafficAnalysis/pvicon.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#58CBA8;}
+</style>
+<path class="st0" d="M100,19.2c-27.8,0-53,11.7-72.8,31C11,66,0,85.8,0,98.5v3.1c0,12.7,11,32.5,27.2,48.2c19.8,19.3,45,31,72.8,31
+	c27.9,0,53-11.5,72.7-30.6c16.2-15.7,27.2-35.5,27.3-48.5v-3.1c-0.1-13.1-11.1-32.9-27.3-48.6C153,30.8,127.9,19.2,100,19.2z
+	 M100,34.6c23.6,0,45,9.8,62,26.3c13.5,13.1,22.5,29.3,22.6,37.6v3c-0.1,8.2-9.1,24.5-22.6,37.5c-17,16.5-38.5,26.3-62,26.3
+	c-23.5,0-45-10-62.1-26.6c-13.5-13.1-22.5-29.4-22.5-37.2v-3.1c0-7.8,9.1-24.1,22.5-37.2C55,44.6,76.5,34.6,100,34.6z"/>
+<path class="st0" d="M100,61.5c-21.2,0-38.5,17.2-38.5,38.5s17.2,38.5,38.5,38.5s38.5-17.2,38.5-38.5S121.2,61.5,100,61.5z
+	 M100,76.9c12.7,0,23.1,10.3,23.1,23.1s-10.3,23.1-23.1,23.1c-12.7,0-23.1-10.3-23.1-23.1C76.9,87.3,87.3,76.9,100,76.9z"/>
+</svg>

src/assets/trafficAnalysis/tiaochu.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>跳出率</title>
+    <g id="数据中心" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="跳出率" fill="#333333" fill-rule="nonzero">
+            <path d="M200,113.7 L200,106.5 C200,92.1 197.1,78.2 191.6,65 C186.2,52.3 178.5,40.9 168.7,31.1 C158.9,21.3 147.5,13.6 134.8,8.3 C121.6,2.8 107.6,0 93.2,0 L85.9,0 L85.9,13.3 C75.9,14.1 66.2,16.5 57,20.4 C45.9,25.1 35.9,31.9 27.4,40.4 C18.9,48.9 12,59.1 7.3,70.2 C2.5,81.7 0,94 0,106.5 C0,119.1 2.5,131.4 7.3,142.9 C12,154 18.7,164 27.3,172.6 C35.9,181.2 45.9,187.9 57,192.6 C68.5,197.5 80.8,199.9 93.4,199.9 C106,199.9 118.3,197.4 129.8,192.6 C140.9,187.9 150.9,181.2 159.5,172.6 C168.1,164 174.8,154 179.5,142.9 C183.5,133.6 185.8,123.8 186.6,113.7 L200,113.7 L200,113.7 Z M158.5,41.3 C167,49.8 173.7,59.6 178.3,70.6 C182.2,79.7 184.5,89.3 185.3,99.1 L100.4,99.1 L100.4,14.6 C110.3,15.4 119.9,17.7 129.1,21.6 C140.1,26.2 150,32.9 158.5,41.3 Z M149.4,162.5 C134.5,177.4 114.6,185.7 93.5,185.7 C72.4,185.7 52.5,177.5 37.6,162.5 C22.7,147.5 14.4,127.7 14.4,106.6 C14.4,85.5 22.6,65.7 37.5,50.7 C50.6,37.6 67.6,29.6 85.9,27.8 L85.9,113.7 L172.3,113.7 C170.6,132.1 162.6,149.2 149.4,162.5 L149.4,162.5 Z" id="形状"></path>
+        </g>
+    </g>
+</svg>

src/assets/trafficAnalysis/uvTransfer.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="200px" height="200px" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>UV到询盘转化率</title>
+    <g id="数据中心" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="UV到询盘转化率" fill="#333333" fill-rule="nonzero">
+            <path d="M200.000962,100 C200.000962,126.6 189.7,151.7 170.8,170.6 C151.9,189.5 126.8,200 100.1,200 C44.9,200 0,155.1 0,100 C0,44.9 44.9,0 100,0 C111.5,0 122.8,1.9 133.4,5.7 C135.1,6.3 136.4,7.5 137.1,9.2 C137.8,10.8 137.9,12.6 137.3,14.2 C136.1,17.6 132.4,19.3 129,18.2 C119.8,14.9 110,13.2 100,13.2 C52.2,13.2 13.3,52.1 13.3,99.9 C13.3,147.7 52.2,186.6 100,186.6 C147.8,186.6 186.7,147.7 186.7,99.9 C186.8,80.4 180.1,61.2 167.9,46 C166.8,44.7 166.3,43 166.5,41.2 C166.7,39.4 167.6,37.8 169,36.7 C170.3,35.6 172,35.1 173.8,35.3 C175.6,35.5 177.2,36.4 178.3,37.8 C192.4,55.4 200.1,77.5 200.000962,100 Z" id="路径"></path>
+            <g id="编组" transform="translate(40.000000, 56.000000)">
+                <path d="M112.9,31.6 C112.9,33.3 112.2,35 110.9,36.2 C109.7,37.4 108,38.1 106.2,38.1 L7.1,38.1 C3.4,38.1 0.5,35.1 0.5,31.5 C0.5,27.9 3.5,24.9 7.1,24.9 L90.3,24.9 L77.6,12.2 C76.3,10.8 75.7,9.1 75.7,7.3 C75.8,5.6 76.5,4 77.8,2.8 C80.3,0.3 84.3,0.3 86.9,2.8 L110.9,26.8 C112.2,28.1 112.9,29.8 112.9,31.6 Z" id="路径"></path>
+                <path d="M112.7,56.4 C112.7,60.1 109.7,63 106.1,63 L23,63 L35.7,75.7 C37,77 37.7,78.7 37.7,80.5 C37.7,82.3 37,83.9 35.7,85.1 C34.5,86.3 32.9,86.9 31,86.9 C29.2,86.9 27.5,86.2 26.4,85 L2.4,61 C1.1,59.7 0.4,58 0.4,56.2 C0.4,54.5 1.1,52.8 2.4,51.6 C3.6,50.4 5.3,49.7 7,49.7 L106.1,49.7 C109.8,49.8 112.7,52.7 112.7,56.4 Z" id="路径"></path>
+            </g>
+        </g>
+    </g>
+</svg>

src/assets/trafficAnalysis/uvicon.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 200 200" style="enable-background:new 0 0 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#F0B357;}
+</style>
+<path class="st0" d="M100,0c55.2,0,100,44.8,100,100s-44.8,100-100,100S0,155.2,0,100S44.8,0,100,0z M123,127.7H77
+	c-13.4,0-26.7,13.3-29.1,30L46.4,168c14.7,11.6,33.4,18.6,53.6,18.6c20.2,0,38.8-6.9,53.6-18.6l-1.5-10.4
+	c-2.3-16.4-15.4-29.7-28.7-29.9L123,127.7z M100,13.4c-47.8,0-86.6,38.8-86.6,86.6c0,21.7,8,41.5,21.1,56.7l0.1-0.4
+	c0-0.2,0.1-0.4,0.1-0.6c3.2-22.6,21.4-41.1,41.7-41.5l0.6,0H123c20.5,0,39.1,18.6,42.3,41.5l0.1,0.9c13.2-15.2,21.1-35,21.1-56.7
+	C186.6,52.2,147.8,13.4,100,13.4z M100,32.6c19.7,0,35.7,16,35.7,35.7S119.7,104,100,104S64.3,88,64.3,68.3S80.3,32.6,100,32.6z
+	 M100,46c-12.3,0-22.3,10-22.3,22.3s10,22.3,22.3,22.3s22.3-10,22.3-22.3S112.3,46,100,46z"/>
+</svg>

src/components/chart/mapAdweb.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <v-chart :forceFit="true" :height="height"  :padding="padding" :scale="scale">
+      <v-tooltip :showTitle="false" />
+      <v-view :data="geoData" :scale="scale">
+        <v-polygon :position="view1Opts.position" :vStyle="view1Opts.style" :tooltip="view1Opts.tooltip" />
+      </v-view>
+      <v-view :data="data" :scale="aliases">
+        <v-polygon :position="view2Opts.position" :opacity="view2Opts.opacity" :color="view2Opts.color" :animate="view2Opts.animate" :tooltip="view2Opts.tooltip" />
+      </v-view>
+    </v-chart>
+  </div>
+</template>
+
+<script>
+  // const DataSet = require('@antv/data-set');
+  import worldGeo from '../../assets/data/worldGeo-zh.json'
+  import * as DataSet from "tinymce";
+
+  const scale = [{
+    dataKey: 'longitude',
+    sync: true,
+  }, {
+    dataKey: 'latitude',
+    sync: true,
+  }];
+
+
+  const view1Opts = {
+    quickType: 'polygon',
+    position: 'longitude*latitude',
+    style: {
+      fill: '#fff',
+      stroke: '#ccc',
+      lineWidth: 1
+    },
+    tooltip: false,
+  };
+
+  const view2Opts = {
+    quickType: 'polygon',
+    position: 'longitude*latitude',
+    opacity: 'num',
+    color: ['num', [ '#1890FF', '#0A61D7' ]],
+    tooltip: 'country*num',
+    animate: {
+      leave: {
+        animation: 'fadeOut'
+      }
+    },
+  };
+
+  export default {
+    name: 'MapAdweb',
+    props: {
+      dataSource: {
+        type: Array,
+        default: () =>  [
+          {"country":"China","num":16},
+          {"country":"United States","num":12},
+          {"country":"Taiwan","num":6},
+          {"country":"Hong Kong","num":3},
+          {"country":"Mexico","num":3},
+          {"country":"Germany","num":2},
+          {"country":"Belgium","num":1},
+          {"country":"Brazil","num":1},
+          {"country":"Costa Rica","num":1},
+          {"country":"France","num":1},
+          {"country":"India","num":1},
+          {"country":"Malaysia","num":1},
+          {"country":"Pakistan","num":1},
+          {"country":"Poland","num":1},
+          {"country":"Spain","num":1},
+          {"country":"Thailand","num":1},
+          {"country":"Ukraine","num":1}
+        ]
+      },
+      // 别名，需要的格式：[{dataKey:'name',alias:'姓名'}, {dataKey:'sex',alias:'性别'}]
+      aliases:{
+        type: Array,
+        default: () => [{
+          dataKey: 'country',
+          alias: '国家',
+        },{
+          dataKey: 'num',
+          alias: '访问数',
+        }]
+      },
+      height: {
+        type: Number,
+        default: 400
+      }
+    },
+    data() {
+      return {
+        data: [],
+        padding: ['0', '0', '0', '0'],
+        geoData: [],
+        scale,
+        view1Opts,
+        view2Opts,
+      };
+    },
+
+    mounted() {
+
+        const worldMap = new DataSet.View().source(worldGeo, {
+          type: 'GeoJSON',
+        });
+        const userDv = new DataSet.View().source(this.dataSource).transform({
+          geoDataView: worldMap,
+          field: 'country',
+          type: 'geo.region',
+          as: ['longitude', 'latitude'],
+        }).transform({
+          type: 'map',
+          callback: (obj) => {
+            return obj;
+          }
+        });
+        this.$data.geoData = worldMap;
+        this.$data.data = userDv;
+    },
+
+  };
+</script>

src/views/adweb/data/chart/DashChartDemo.vue

@@ -0,0 +1,117 @@
+<template>
+  <div :style="{ padding: '0' }">
+    <div ref="main" style="width: 100%; height: 180px"></div>
+  </div>
+</template>
+
+<script>
+
+  export default {
+    name:"DashChartDemo",
+    props:{
+      color:{
+        default:'#E96B5F'
+      },
+      dataSource:{
+        default:70
+      }
+    },
+    mounted(){
+     this.drawChart()
+    },
+    data() {
+      return {
+        myChart: null,
+      }
+    },
+    watch:{
+      dataSource:function (newv,oldv){
+        this.drawChart()
+      }
+    },
+
+    methods:{
+      drawChart() {
+        let that =  this
+        // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
+        that.myChart = that.$echarts.init(that.$refs.main);
+        // 指定图表的配置项和数据
+        let option = {
+          series: [
+            {
+              type: 'gauge',
+              radius:'100%',
+              center: ['50%', '70%'],
+              startAngle: 180,
+              endAngle: 0,
+              itemStyle: {
+                color: that.color,
+                 shadowColor: 'rgba(255,255,255,0.45)',
+                shadowBlur: 10,
+                shadowOffsetX: 2,
+                shadowOffsetY: 2
+              },
+              progress: {
+                show: true,
+                width: 12,
+                roundCap: true,
+              },
+              axisLine: {
+                roundCap: true,
+                lineStyle: {
+                  width: 12,
+                  color: [
+                    [1, '#F1F8FF']
+                  ]
+                }
+              },
+              axisTick: {
+                show: false
+              },
+              splitLine: {
+                show:false,
+
+              },
+              axisLabel: {
+                show:false,
+
+              },
+              pointer: {
+                show: false
+              },
+              title: {
+                show: false
+              },
+              detail: {
+                fontSize: 20,
+                fontWeight:300,
+                offsetCenter: [0, '-20%'],
+                valueAnimation: true,
+                formatter: function (value) {
+                  return value + '%';
+                },
+                color: 'auto'
+              },
+              data: [
+                {
+                  value: that.dataSource
+                }
+              ]
+            }
+          ]
+        };
+        // 使用刚指定的配置项和数据显示图表。
+        that.myChart.setOption(option);
+        window.addEventListener("resize", () => {
+          that.myChart.resize();
+        });
+      },
+    },
+    beforeDestroy() {
+      window.removeEventListener("resize", () => {
+        this.myChart.resize();
+      });
+    },
+
+  };
+</script>

src/views/adweb/data/chart/areaChart.vue

@@ -0,0 +1,196 @@
+<template>
+  <div :style="{ padding: '0' }">
+    <div ref="area" style="width: 100%; height: 350px"></div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name:"areaChart",
+  props:{
+    dataSource:{
+      default:{
+        x:[],
+        pv:[],
+        uv:[],
+        enquiry: []
+      }
+    },
+  },
+  data() {
+    return {
+      myChart: null,
+    }
+  },
+  mounted(){
+    this.drawChart()
+
+  },
+
+  watch:{
+    dataSource:{
+      handler:function (n,o){
+        this.drawChart()
+      },
+      deep:true
+    },
+
+  },
+
+  methods:{
+    drawChart() {
+      let that =  this
+      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
+      that.myChart = that.$echarts.init(that.$refs.area);
+      // 指定图表的配置项和数据
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'cross',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+
+        grid: {
+          left: '20px',
+          right: '40px',
+          bottom: '0',
+          top:'40px',
+          containLabel: true
+        },
+        xAxis: [
+          {
+            type: 'category',
+            boundaryGap: false,
+            axisTick: {
+              show: false
+            },
+            data: this.dataSource.x
+          }
+        ],
+        yAxis: [
+          {
+            type: 'value'
+          }
+        ],
+        series: [
+          {
+            name: 'UV',
+            type: 'line',
+            stack: 'UV',
+            symbol: 'circle',  //设定为实心点
+            symbolSize: 6,   //设定实心点的大小
+            color:"#544BEB",     //设定实线点的颜色
+            areaStyle: {
+              color:{
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: '#544BEB' // 0% 处的颜色
+                }, {
+                  offset: 1, color: '#fff' // 100% 处的颜色
+                }],
+
+              }
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            smooth:true,
+            lineStyle:{
+              color:'#544BEB',
+              width:2
+            },
+            data: this.dataSource.uv
+          },
+          {
+            name: 'PV',
+            type: 'line',
+            symbol: 'circle',  //设定为实心点
+            symbolSize: 6,   //设定实心点的大小
+            color:"#F0B358",     //设定实线点的颜色
+            stack: 'PV',
+            areaStyle: {
+              color:{
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: '#F0B358' // 0% 处的颜色
+                }, {
+                  offset: 1, color: '#fff' // 100% 处的颜色
+                }],
+              }
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            smooth:true,
+            lineStyle:{
+              color:'#F0B358',
+              width:2
+            },
+            data: this.dataSource.pv
+          },
+          {
+            name: '询盘数',
+            type: 'line',
+            symbol: 'circle',  //设定为实心点
+            symbolSize: 6,   //设定实心点的大小
+            color:"#58CCA8",     //设定实线点的颜色
+            stack: 'enquiry',
+            areaStyle: {
+              color:{
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: '#58CCA8' // 0% 处的颜色
+                }, {
+                  offset: 1, color: '#fff' // 100% 处的颜色
+                }],
+              }
+            },
+            emphasis: {
+              focus: 'series'
+            },
+            smooth:true,
+            lineStyle:{
+              color:'#58CCA8',
+              width:2
+            },
+            data: this.dataSource.enquiry
+          }
+        ]
+      };
+      // 使用刚指定的配置项和数据显示图表。
+      that.myChart.setOption(option);
+      window.addEventListener("resize", () => {
+        that.myChart.resize();
+      });
+    },
+  },
+
+  beforeDestroy() {
+    window.removeEventListener("resize", () => {
+      this.myChart.resize();
+    });
+  },
+
+};
+</script>
+
+<style scoped>
+
+</style>

src/views/adweb/data/dailyData.vue

@@ -0,0 +1,513 @@
+<template>
+  <div class="wrap home">
+    <!-- 站点选择和时间筛选 -->
+    <a-row class="r1" :gutter="8">
+      <a-col :xl="7" :xxl="6" v-if="siteList.length > 1">
+        <div class="choose-site">
+          <span class="t1">站点：</span>
+          <select-site @comMethods="changeSite" />
+<!--          <a-select v-model="queryParam.siteId"-->
+<!--                    show-search-->
+<!--                    :filter-option="filterOption"-->
+<!--                    placeholder="全部站点"-->
+<!--                    style="width: 70%"-->
+<!--                    @change="reloadData">-->
+<!--            <a-select-option v-for="data in siteList" :key="data.id" :value="data.id">-->
+<!--              {{ data.name }}-->
+<!--            </a-select-option>-->
+<!--          </a-select>-->
+        </div>
+      </a-col>
+      <a-col :xl="8" :xxl="6">
+        <div class="choose-site">
+          <span class="t1">统计时间：</span>
+          <a-range-picker @change="onChangeDatePciker" :disabledDate="disabledDate" :value="rangeDate" style="width:70%"/>
+        </div>
+      </a-col>
+      <a-col :xl="9" :xxl="12">
+        <a-button :class="queryParam.dateType == '' ? 'active' : ''" @click="setTime('')">全部时间</a-button>
+        <a-button :class="queryParam.dateType == 'thirtyDay' ? 'active' : ''" @click="setTime('thirtyDay')">近30天</a-button>
+        <a-button :class="queryParam.dateType == 'sevenDay' ? 'active' : ''" @click="setTime('sevenDay')">近一周</a-button>
+        <a-button :class="queryParam.dateType == 'yesterday' ? 'active' : ''" @click="setTime('yesterday')">昨日</a-button>
+        <a-button :class="queryParam.dateType == 'today' ? 'active' : ''" @click="setTime('today')">今日</a-button>
+      </a-col>
+    </a-row>
+
+    <!-- 占位 -->
+    <div style="height: 20px;"></div>
+
+    <a-spin :spinning="loading" tips="加载中...">
+      <a-row class="r5" :gutter="[20,20]">
+        <a-row class="r5-1">
+          <a-col :span="24">
+            <div class="fr" v-if="coreDataChart.x.length > 0">
+              <span><i style="background: #544BEB;"></i>UV</span>
+              <span><i style="background: #F0B358;"></i>PV</span>
+              <span><i style="background: #58CCA8;"></i>询盘数</span>
+            </div>
+            <area-chart v-if="coreDataChart.x.length > 0" :dataSource="coreDataChart"></area-chart>
+            <a-empty v-else style="float: right;width: 100%;margin-top: 110px;"></a-empty>
+          </a-col>
+        </a-row>
+        <a-row style="margin: 20px;">
+          <a-table
+            :columns="dailyDataColumns"
+            :data-source="dailyDataSource"
+            size="middle"
+            rowKey="type"
+            :pagination="false">
+            <template slot="newUserProportionSlot" slot-scope="text,record">
+              <template v-if="record.newUvNum === 0">
+                0.00 %
+              </template>
+              <template v-else>
+                {{ (record.newUvNum * 100 / record.uvNum).toFixed(2) + ' %' }}
+              </template>
+            </template>
+            <template slot="conversionSlot" slot-scope="text,record">
+              <span style="margin-left: 20px;"></span>
+              <template v-if="record.enquiryNum === 0 || record.uvNum === 0">
+                0.00 %
+              </template>
+              <template v-else>
+                {{ (record.enquiryNum * 100 / record.uvNum).toFixed(2) + ' %' }}
+              </template>
+            </template>
+            <template slot="centerSlot" slot-scope="text, record, index">
+              <span style="margin-left: 20px;">{{ text }}</span>
+            </template>
+            <template slot="enquiryNumSlot" slot-scope="text, record, index">
+              <router-link v-if="text > 0" :to="{ path: '/inquiry/list', query: {start: record.time, end: record.time} }">
+                <span style="margin-left: 20px; color: blue">{{ text }}</span>
+              </router-link>
+              <span v-else style="margin-left: 20px;">{{ text }}</span>
+            </template>
+          </a-table>
+        </a-row>
+      </a-row>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { getAction } from '@/api/manage'
+import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+import enquiryTrack from '@views/adweb/enquiry/modules/enquiryTrack'
+import enquiryGenzong from '@views/adweb/enquiry/modules/enquiryGenzong'
+import enquiryDetail from '@views/adweb/enquiry/modules/enquiryDetail'
+import XpRecycleBinModal from '../../system/modules/XpRecycleBinModal'
+import blackList from '@views/adweb/enquiry/modules/blackList'
+import moment from 'moment'
+import dashChart from './chart/DashChartDemo'
+import areaChart from './chart/areaChart'
+import MapAdweb from '@/components/chart/mapAdweb'
+import selectSite from '@/components/adweb/selectSite'
+
+export default {
+  name: 'DailyData',
+  mixins: [JeecgListMixin],
+  components: {
+    enquiryTrack,
+    enquiryGenzong,
+    XpRecycleBinModal,
+    enquiryDetail,
+    blackList,
+    areaChart,
+    dashChart,
+    MapAdweb,
+    selectSite
+  },
+  data() {
+    return {
+      // 通用
+      ipagination: {
+        current: 1,
+        pageSize: 30,
+        pageSizeOptions: ['15', '30', '45', '60'],
+        showTotal: (total, range) => {
+          return range[0] + "-" + range[1] + " 共" + total + "条"
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      disableMixinCreated: true,
+      loading: true,
+      // 筛选
+      siteList: [],
+      rangeDate: undefined,
+      // 数据趋势的数据
+      coreDataChart: {
+        x: [],
+        uv: [],
+        pv: [],
+        enquiry: []
+      },
+      // 来源媒介列表
+      dailyDataColumns: [
+        {
+          title: '统计时间',
+          dataIndex: 'time'
+        },
+        {
+          title: '访客（UV）',
+          dataIndex: 'uvNum',
+          scopedSlots: {
+            customRender: 'centerSlot',
+          }
+        },
+        {
+          title: '新访客',
+          dataIndex: 'newUvNum',
+          scopedSlots: {
+            customRender: 'centerSlot',
+          }
+        },
+        {
+          title: '新访客占比',
+          scopedSlots: {
+            customRender: 'newUserProportionSlot',
+          }
+        },
+        {
+          title: '浏览量（PV）',
+          dataIndex: 'pvNum',
+          scopedSlots: {
+            customRender: 'centerSlot',
+          }
+        },
+        {
+          title: '询盘数',
+          dataIndex: 'enquiryNum',
+          scopedSlots: {
+            customRender: 'enquiryNumSlot',
+          }
+        },
+        {
+          title: 'UV到询盘转化率',
+          scopedSlots: {
+            customRender: 'conversionSlot',
+          }
+        },
+      ],
+      dailyDataSource: [],
+    }
+  },
+  mounted() {
+    this.queryParam.dateType = 'sevenDay';
+    this.rangeDate = [moment().subtract(7, "days"), moment().subtract(1, "days")];
+    this.getSiteList();
+  },
+  methods: {
+    // ========================================== 筛选 ==========================================
+    //获取站点列表
+    getSiteList() {
+      let that = this
+      getAction('/sys/api/getSiteListByUid').then(function (res) {
+        if (res.code == 0) {
+          if (res.data || res.data.length) {
+            let defaultSiteCode = localStorage.getItem('siteCode');
+            if (defaultSiteCode) {
+              let isInSite = false
+              for (let i in res.data) {
+                if (defaultSiteCode === res.data[i].code) {
+                  isInSite = true;
+                  that.queryParam.siteId = res.data[i].id;
+                  break;
+                }
+              }
+              if (!isInSite) {
+                that.queryParam.siteId = res.data[0].id;
+                localStorage.setItem('siteCode', res.data[0].code);
+              }
+            } else {
+              that.queryParam.siteId = res.data[0].id;
+              localStorage.setItem('siteCode', res.data[0].code);
+            }
+            that.siteList = res.data;
+            that.reloadData()
+          }
+        } else {
+          that.$message.error('获取站点失败！')
+        }
+      }).catch(function (err) {
+        console.log(err)
+      })
+    },
+    // 搜索
+    filterOption(inputValue, option) {
+      return option.componentOptions.children[0].text.indexOf(inputValue) >= 0
+    },
+    //搜索条件部分的逻辑
+    onChangeDatePciker(date, dateString) {
+      if (dateString.length > 0) {
+        this.rangeDate = date
+        this.queryParam.start = dateString[0]
+        this.queryParam.end = dateString[1]
+        this.queryParam.dateType = undefined
+        this.reloadData();
+      }
+    },
+    //日期选择只能今天之前
+    disabledDate(current) {
+      return current && current > moment().subtract(0, "days");
+    },
+    //设置列表的时间查询条件
+    setTime(time) {
+      this.queryParam.dateType = time
+      this.queryParam.start = ''
+      this.queryParam.end = ''
+      if (time == '') {
+        this.rangeDate = undefined
+      } else if (time == 'sevenDay') {
+        this.rangeDate = [moment().subtract(7, "days"), moment().subtract(1, "days")]
+      } else if (time == 'thirtyDay') {
+        this.rangeDate = [moment().subtract(30, "days"), moment().subtract(1, "days")]
+      } else if (time == 'yesterday') {
+        this.rangeDate = [moment().subtract(1, "days"), moment().subtract(1, "days")]
+      } else if (time == 'today') {
+        this.rangeDate = [moment(), moment()]
+      }
+      this.reloadData();
+    },
+
+    changeSite(value, e) {
+      this.selectSiteInfo = e.data.attrs.info
+      this.queryParam.siteId = this.selectSiteInfo.id;
+      this.reloadData(this.queryParam.siteId)
+    },
+
+    //重新刷新页面数据
+    reloadData(value) {
+      this.loading = true;
+      for (let i in this.siteList){
+        if(value === this.siteList[i].id){
+          localStorage.setItem("siteCode",this.siteList[i].code)
+        }
+      }
+      this.getFlowIndexNumber();
+      this.getDailyList();
+    },
+    // ========================================== 访客量、浏览量、询盘数量、折线图以及统计 ==========================================
+    getFlowIndexNumber() {
+      let that = this;
+      getAction('/datacenter/flow/number', this.queryParam).then(function (res) {
+        console.log('res', res);
+        if (!res.result) {
+          that.coreDataChart = {
+            x: [],
+            uv: [],
+            pv: [],
+            enquiry: []
+          };
+          that.loading = false;
+          return;
+        }
+
+        that.flowIndexNums = res.result.flowIndexNumber;
+        let r = res.result.dailyTrends;
+        let x = [], pv = [], uv = [], enquiry = [];
+        if (r != null && r.length > 0) {
+          for (let item of r) {
+            x.push(item.date)
+            pv.push(item.pvCount)
+            uv.push(item.uvCount)
+            enquiry.push(item.enquiryCount)
+          }
+        }
+        that.coreDataChart.x = x
+        that.coreDataChart.pv = pv
+        that.coreDataChart.uv = uv
+        that.coreDataChart.enquiry = enquiry
+
+        that.loading = false;
+      });
+    },
+    // ========================================== 每日数据列表 ==========================================
+    getDailyList() {
+      let that = this;
+      getAction('/datacenter/daily/list', this.queryParam).then(function (res) {
+        if (res.code == 200) {
+          that.dailyDataSource = res.result;
+        } else {
+          that.dailyDataSource = [];
+        }
+      })
+    }
+  }
+}
+</script>
+
+
+<!-- 通用样式 -->
+<style scoped>
+@import '~@assets/less/common.less';
+</style>
+
+
+<!-- 询盘页面的样式 -->
+<style lang="less" scoped>
+.ant-alert {
+  /deep/ .ant-btn {
+    border-radius: 0;
+    margin-left: 10px;
+  }
+}
+
+.theme-color {
+  color: @primary-color;
+}
+
+.r1 {
+  .choose-site {
+    display: flex;
+
+    /deep/ .ant-select-selection {
+      background: transparent;
+      color: #fff;
+    }
+
+    /deep/ .ant-select-selection__clear {
+      background: transparent;
+    }
+
+    /deep/ i, /deep/ .ant-calendar-range-picker-separator {
+      color: #fff;
+    }
+  }
+
+  .t1 {
+    font-size: 18px;
+    color: #fff;
+  }
+
+  .ant-calendar-picker {
+    margin-right: 20px;
+
+    /deep/ .ant-input {
+      background: transparent;
+      color: #e2e2e2;
+    }
+  }
+
+  /deep/ .ant-btn {
+    background: transparent;
+    color: #e2e2e2;
+    margin-right: 10px;
+
+    &.active {
+      background: #fff;
+      border-color: #fff;
+      color: @primary-color;
+    }
+  }
+}
+
+.r2 {
+  background: #fff;
+  border-radius: 10px;
+  padding: 30px 20px;
+  margin-top: 20px;
+
+  .ant-col:not(:last-child) {
+    border-right: 1px solid #e6e6e6;
+  }
+
+  p {
+    margin: 0;
+    text-align: center;
+
+    &.t1 {
+      color: #333;
+      margin-bottom: 15px;
+
+      img {
+        margin-right: 10px;
+        width: 15px;
+        margin-top: -5px;
+      }
+    }
+
+    &.t2 {
+      color: @primary-color;
+      font-size: 30px;
+      font-weight: 500;
+      line-height: 1;
+      padding-left: 25px;
+    }
+  }
+}
+
+.r3 {
+  margin-top: 20px;
+}
+
+.r4 {
+  margin-top: 20px;
+
+  /deep/ .ant-table-tbody {
+    background: #fff;
+  }
+
+  /deep/ .ant-table-tbody > tr > td {
+    border-bottom: 1px solid #f7f7f7;
+  }
+}
+</style>
+
+
+<!-- 首页的样式 -->
+<style scoped lang="less">
+p, span {
+  color: #000;
+  margin: 0;
+}
+
+.theme-color {
+  color: @primary-color;
+}
+
+.title {
+  font-size: 18px;
+  color: #000;
+}
+
+@import '../../dashboard/less/home2-7.less';
+</style>
+<style lang="less">
+.pop-wrap {
+  .ant-popover-inner-content {
+    padding: 0;
+  }
+
+  .wrap {
+    width: 400px;
+    padding: 20px 20px;
+    background: url("../../../assets/home2-7/pop-bg.svg") no-repeat;
+    background-position: bottom right;
+
+    p {
+      line-height: 1.8;
+
+      i {
+        color: @primary-color;
+        margin-right: 10px;
+      }
+    }
+
+    .name {
+      font-size: 18px;
+      margin-bottom: 20px;
+    }
+
+    .job {
+      font-size: 15px;
+      color: #9f9f9f;
+    }
+
+    .ant-col-8 {
+      text-align: right;
+    }
+  }
+}
+</style>

src/views/adweb/data/enquiryAnalysis.vue

@@ -0,0 +1,568 @@
+<template>
+  <div class="wrap home">
+    <!-- 站点选择和时间筛选 -->
+    <a-row class="r1" :gutter="8">
+      <a-col :xl="7" :xxl="6" v-if="siteList.length > 1">
+        <div class="choose-site">
+          <span class="t1">站点：</span>
+          <select-site @comMethods="changeSite" />
+<!--          <a-select v-model="queryParam.siteId"-->
+<!--                    show-search-->
+<!--                    :filter-option="filterOption"-->
+<!--                    placeholder="全部站点"-->
+<!--                    style="width: 70%"-->
+<!--                    @change="reloadData">-->
+<!--            <a-select-option v-for="data in siteList" :key="data.id" :value="data.id">-->
+<!--              {{ data.name }}-->
+<!--            </a-select-option>-->
+<!--          </a-select>-->
+        </div>
+      </a-col>
+      <a-col :xl="8" :xxl="6">
+        <div class="choose-site">
+          <span class="t1">统计时间：</span>
+          <a-range-picker @change="onChangeDatePciker" :disabledDate="disabledDate" :value="rangeDate" style="width:70%"/>
+        </div>
+      </a-col>
+      <a-col :xl="9" :xxl="12">
+        <a-button :class="queryParam.dateType == '' ? 'active' : ''" @click="setTime('')">全部时间</a-button>
+        <a-button :class="queryParam.dateType == 'thirtyDay' ? 'active' : ''" @click="setTime('thirtyDay')">近30天</a-button>
+        <a-button :class="queryParam.dateType == 'sevenDay' ? 'active' : ''" @click="setTime('sevenDay')">近一周</a-button>
+        <a-button :class="queryParam.dateType == 'yesterday' ? 'active' : ''" @click="setTime('yesterday')">昨日</a-button>
+        <a-button :class="queryParam.dateType == 'today' ? 'active' : ''" @click="setTime('today')">今日</a-button>
+      </a-col>
+    </a-row>
+
+    <!-- 占位 -->
+    <div style="height: 20px;"></div>
+
+    <a-spin :spinning="loading" tips="加载中...">
+      <a-row class="r2">
+        <a-col :span="8">
+          <p class="t1"><img src="@/assets/V2-7/enquiryNum.svg"/>询盘数</p>
+          <router-link :to="{ path: '/inquiry/list', query: {dateType: this.queryParam.dateType, start: this.queryParam.start, end: this.queryParam.end ,offset: 1} }">
+            <p class="t2">{{ enquiryIndexNumber.enquiry }}</p>
+          </router-link>
+        </a-col>
+        <a-col :span="8">
+          <p class="t1"><img src="@/assets/V2-7/unReadEnquiryNum.svg"/>未读询盘数</p>
+          <router-link :to="{ path: '/inquiry/list', query: {dateType: this.queryParam.dateType, start: this.queryParam.start, end: this.queryParam.end, readStatus: '0' , offset: 1} }">
+            <p class="t2">{{ enquiryIndexNumber.unRead }}</p>
+          </router-link>
+        </a-col>
+        <a-col :span="8">
+          <p class="t1"><img src="@/assets/V2-7/conversionRate.svg"/>UV到询盘的转化率</p>
+          <p class="t3">{{ enquiryIndexNumber.conversionRate }}</p>
+        </a-col>
+      </a-row>
+
+      <a-row class="r3">
+        <a-col><p class="title">询盘趋势图</p></a-col>
+      </a-row>
+      <a-row class="r5" :gutter="[20,20]">
+        <a-row class="r5-1">
+          <a-col :span="24">
+            <div class="fr" v-if="coreDataChart.x.length > 0">
+              <span><i style="background: #544BEB;"></i>UV</span>
+              <span><i style="background: #58CCA8;"></i>询盘数</span>
+            </div>
+            <area-chart v-if="coreDataChart.x.length > 0" :dataSource="coreDataChart"></area-chart>
+            <a-empty v-else style="float: right;width: 100%;margin-top: 110px;"></a-empty>
+          </a-col>
+        </a-row>
+      </a-row>
+
+      <a-row class="r3">
+        <a-col><p class="title">询盘地域分布</p></a-col>
+      </a-row>
+      <a-row class="r5" :gutter="[20,20]">
+        <a-col :span="12">
+          <map-adweb v-if="countryMapData.length > 0" :dataSource="countryMapData" :aliases="[{dataKey:'country',alias:'国家'},{dataKey:'num',alias:'访问数量'}]"
+                     :height="chartheight"></map-adweb>
+          <a-empty v-else style="margin-top: 50px;">
+            <span slot="description">暂无数据</span>
+          </a-empty>
+        </a-col>
+        <a-col :span="2">
+        </a-col>
+        <a-col :span="10">
+          <a-table
+            style="margin-top: 40px; margin-bottom: 40px;"
+            :rowKey="(record,index)=>{return index}"
+            class="chartTable"
+            :scroll="{ y: 400 }"
+            :pagination=false
+            :columns="chartDetailDataCol"
+            :customRow="clickRow"
+            :data-source="chartDetailData"
+            :showHeader="false">
+            <template slot="flagSlot" slot-scope="text,record">
+            <span class="img-box">
+              <img src="../../../assets/flag_placeholder.png" :class="'flag flag-' + record.countryCode" alt="Czech Republic"/>
+            </span>
+            </template>
+            <template slot="numSlot" slot-scope="text,record">
+              {{ record.num }} | {{ record.proportion }}
+            </template>
+            <template slot="countryNameSlot" slot-scope="text,record">
+              <a> {{ text === null ? record.country : text }}</a>
+            </template>
+          </a-table>
+        </a-col>
+      </a-row>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import { getAction } from '@/api/manage'
+import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+import enquiryTrack from '@views/adweb/enquiry/modules/enquiryTrack'
+import enquiryGenzong from '@views/adweb/enquiry/modules/enquiryGenzong'
+import enquiryDetail from '@views/adweb/enquiry/modules/enquiryDetail'
+import XpRecycleBinModal from '../../system/modules/XpRecycleBinModal'
+import blackList from '@views/adweb/enquiry/modules/blackList'
+import moment from 'moment'
+import dashChart from './chart/DashChartDemo'
+import areaChart from './chart/areaChart'
+import MapAdweb from '@/components/chart/mapAdweb'
+import selectSite from '@/components/adweb/selectSite'
+
+export default {
+  name: 'EnquiryAnalysis',
+  mixins: [JeecgListMixin],
+  components: {
+    enquiryTrack,
+    enquiryGenzong,
+    XpRecycleBinModal,
+    enquiryDetail,
+    blackList,
+    areaChart,
+    dashChart,
+    MapAdweb,
+    selectSite
+  },
+  data() {
+    return {
+      // 通用
+      ipagination: {
+        current: 1,
+        pageSize: 30,
+        pageSizeOptions: ['15', '30', '45', '60'],
+        showTotal: (total, range) => {
+          return range[0] + "-" + range[1] + " 共" + total + "条"
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      disableMixinCreated: true,
+      loading: true,
+      // 筛选
+      siteList: [],
+      rangeDate: undefined,
+      // uv、pv、询盘数
+      enquiryIndexNumber: {
+        unRead: 0,
+        conversionRate: "0%",
+        enquiry: 0
+      },
+      // 数据趋势的数据
+      coreDataChart: {
+        x: [],
+        uv: [],
+        pv: [],
+        enquiry: []
+      },
+      // 访客数据地图分布
+      chartheight: 400,
+      countryMapData: [],
+      // 访客地域分布列表
+      chartDetailData: [],
+      chartDetailDataCol: [
+        {
+          title: "国旗",
+          align: "center",
+          width: 30,
+          scopedSlots: {customRender: 'flagSlot'}
+        },
+        {
+          title: "国家",
+          align: "left",
+          dataIndex: 'countryName',
+          scopedSlots: {customRender: 'countryNameSlot'}
+        },
+        {
+          title: "数量",
+          align: "right",
+          dataIndex: 'num',
+          scopedSlots: {customRender: 'numSlot'}
+        },
+      ]
+    }
+  },
+  mounted() {
+    this.queryParam.dateType = 'sevenDay';
+    this.rangeDate = [moment().subtract(7, "days"), moment().subtract(1, "days")];
+    this.getSiteList();
+  },
+  methods: {
+    // ========================================== 筛选 ==========================================
+    //获取站点列表
+    getSiteList() {
+      let that = this
+      getAction('/sys/api/getSiteListByUid').then(function (res) {
+        if (res.code == 0) {
+          if (res.data || res.data.length) {
+            let defaultSiteCode = localStorage.getItem('siteCode');
+            if (defaultSiteCode) {
+              let isInSite = false
+              for (let i in res.data) {
+                if (defaultSiteCode === res.data[i].code) {
+                  isInSite = true;
+                  that.queryParam.siteId = res.data[i].id;
+                  break;
+                }
+              }
+              if (!isInSite) {
+                that.queryParam.siteId = res.data[0].id;
+                localStorage.setItem('siteCode', res.data[0].code);
+              }
+            } else {
+              that.queryParam.siteId = res.data[0].id;
+              localStorage.setItem('siteCode', res.data[0].code);
+            }
+            that.siteList = res.data;
+            that.reloadData()
+          }
+        } else {
+          that.$message.error('获取站点失败！')
+        }
+      }).catch(function (err) {
+        console.log(err)
+      })
+    },
+    // 搜索
+    filterOption(inputValue, option) {
+      return option.componentOptions.children[0].text.indexOf(inputValue) >= 0
+    },
+    //搜索条件部分的逻辑
+    onChangeDatePciker(date, dateString) {
+      if (dateString.length > 0) {
+        this.rangeDate = date
+        this.queryParam.start = dateString[0]
+        this.queryParam.end = dateString[1]
+        this.queryParam.dateType = undefined
+        this.reloadData();
+      }
+    },
+    //日期选择只能今天之前
+    disabledDate(current) {
+      return current && current > moment().subtract(0, "days");
+    },
+    //设置列表的时间查询条件
+    setTime(time) {
+      this.queryParam.dateType = time
+      this.queryParam.start = ''
+      this.queryParam.end = ''
+      if (time == '') {
+        this.rangeDate = undefined
+      } else if (time == 'sevenDay') {
+        this.rangeDate = [moment().subtract(7, "days"), moment().subtract(1, "days")]
+      } else if (time == 'thirtyDay') {
+        this.rangeDate = [moment().subtract(30, "days"), moment().subtract(1, "days")]
+      } else if (time == 'yesterday') {
+        this.rangeDate = [moment().subtract(1, "days"), moment().subtract(1, "days")]
+      } else if (time == 'today') {
+        this.rangeDate = [moment(), moment()]
+      }
+      this.reloadData();
+    },
+
+    changeSite(value, e) {
+      this.selectSiteInfo = e.data.attrs.info
+      this.queryParam.siteId = this.selectSiteInfo.id;
+      this.reloadData(this.queryParam.siteId)
+    },
+
+    //重新刷新页面数据
+    reloadData(value) {
+      this.loading = true;
+      for (let i in this.siteList){
+        if(value === this.siteList[i].id){
+          localStorage.setItem("siteCode",this.siteList[i].code)
+        }
+      }
+      this.getFlowIndexNumber();
+      this.getCountryMapData();
+    },
+    // ========================================== 访客量、浏览量、询盘数量、折线图以及统计 ==========================================
+    getFlowIndexNumber() {
+      let that = this;
+      getAction('/datacenter/daily/number', this.queryParam).then(function (res) {
+        console.log('res', res);
+        if (!res.result) {
+          that.enquiryIndexNumber = {
+            unRead: 0,
+            conversionRate: "0%",
+            enquiry: 0
+          };
+          that.coreDataChart = {
+            x: [],
+            uv: [],
+            pv: [],
+            enquiry: []
+          };
+          that.loading = false;
+          return;
+        }
+
+        that.enquiryIndexNumber = res.result.enquiryIndexNumber;
+        let r = res.result.dailyTrends;
+        let x = [], uv = [], enquiry = [];
+        if (r != null && r.length > 0) {
+          for (let item of r) {
+            x.push(item.date)
+            uv.push(item.uvCount)
+            enquiry.push(item.enquiryCount)
+          }
+        }
+        that.coreDataChart.x = x
+        that.coreDataChart.uv = uv
+        that.coreDataChart.enquiry = enquiry
+        that.loading = false;
+      });
+    },
+    // ========================================== 访客数地域分布 ==========================================
+    getCountryMapData() {
+      let that = this;
+      that.countryMapData = [];
+      that.chartDetailData = [];
+      getAction('/datacenter/enquiry/map', this.queryParam).then(function (res) {
+        if (res.code == 200) {
+          that.countryMapData = res.result.accessMap;
+          that.chartDetailData = res.result.accessList;
+          if (that.chartDetailData !== null && that.chartDetailData.length > 0) {
+            for (let item of that.chartDetailData) {
+              let searchText = item.countryName ? item.countryName : item.country;
+              let itemQueryParam = {
+                dateType: that.queryParam.dateType,
+                start: that.queryParam.start,
+                end: that.queryParam.end,
+                offset: 1, //日期相对今天偏移1天
+                searchText: searchText
+              };
+              item.queryParam = itemQueryParam;
+            }
+          }
+        }
+      })
+    },
+    clickRow(record,index) {
+      return {
+        on: {
+          click: () => {
+            this.$router.push({ path: '/inquiry/list', query: record.queryParam })
+          }
+        }
+      }
+    },
+
+  }
+}
+</script>
+
+
+<!-- 通用样式 -->
+<style scoped>
+@import '~@assets/less/common.less';
+</style>
+
+
+<!-- 询盘页面的样式 -->
+<style lang="less" scoped>
+
+.img-box {
+  width: 22px;
+  height: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.ant-alert {
+  /deep/ .ant-btn {
+    border-radius: 0;
+    margin-left: 10px;
+  }
+}
+
+.theme-color {
+  color: @primary-color;
+}
+
+.r1 {
+  .choose-site {
+    display: flex;
+
+    /deep/ .ant-select-selection {
+      background: transparent;
+      color: #fff;
+    }
+
+    /deep/ .ant-select-selection__clear {
+      background: transparent;
+    }
+
+    /deep/ i, /deep/ .ant-calendar-range-picker-separator {
+      color: #fff;
+    }
+  }
+
+  .t1 {
+    font-size: 18px;
+    color: #fff;
+  }
+
+  .ant-calendar-picker {
+    margin-right: 20px;
+
+    /deep/ .ant-input {
+      background: transparent;
+      color: #e2e2e2;
+    }
+  }
+
+  /deep/ .ant-btn {
+    background: transparent;
+    color: #e2e2e2;
+    margin-right: 10px;
+
+    &.active {
+      background: #fff;
+      border-color: #fff;
+      color: @primary-color;
+    }
+  }
+}
+
+.r2 {
+  background: #fff;
+  border-radius: 10px;
+  padding: 30px 20px;
+
+  .ant-col:not(:last-child) {
+    border-right: 1px solid #e6e6e6;
+  }
+
+  p {
+    margin: 0;
+    text-align: center;
+
+    &.t1 {
+      color: #333;
+      margin-bottom: 15px;
+
+      img {
+        margin-right: 10px;
+        width: 15px;
+        margin-top: -5px;
+      }
+    }
+
+    &.t2 {
+      color: @primary-color;
+      font-size: 30px;
+      font-weight: 500;
+      line-height: 1;
+      padding-left: 25px;
+    }
+
+    &.t3 {
+      font-size: 30px;
+      font-weight: 500;
+      line-height: 1;
+      padding-left: 25px;
+    }
+  }
+}
+
+.r3 {
+  margin-top: 20px;
+}
+
+.r4 {
+  margin-top: 20px;
+
+  /deep/ .ant-table-tbody {
+    background: #fff;
+  }
+
+  /deep/ .ant-table-tbody > tr > td {
+    border-bottom: 1px solid #f7f7f7;
+  }
+}
+</style>
+
+
+<!-- 首页的样式 -->
+<style scoped lang="less">
+p, span {
+  color: #000;
+  margin: 0;
+}
+
+.theme-color {
+  color: @primary-color;
+}
+
+.title {
+  font-size: 18px;
+  color: #000;
+}
+
+@import '../../dashboard/less/home2-7.less';
+@import "../../../assets/less/flags.css";
+</style>
+<style lang="less">
+.pop-wrap {
+  .ant-popover-inner-content {
+    padding: 0;
+  }
+
+  .wrap {
+    width: 400px;
+    padding: 20px 20px;
+    background: url("../../../assets/home2-7/pop-bg.svg") no-repeat;
+    background-position: bottom right;
+
+    p {
+      line-height: 1.8;
+
+      i {
+        color: @primary-color;
+        margin-right: 10px;
+      }
+    }
+
+    .name {
+      font-size: 18px;
+      margin-bottom: 20px;
+    }
+
+    .job {
+      font-size: 15px;
+      color: #9f9f9f;
+    }
+
+    .ant-col-8 {
+      text-align: right;
+    }
+  }
+}
+</style>

src/views/adweb/data/inquiryAnalysis.vue

@@ -0,0 +1,351 @@
+<template>
+  <div>
+    <a-row style="background: #fff;padding: 10px 15px;color: rgba(0,0,0,.85);margin-bottom: 10px;">
+      <!--      v-if="siteinfo.length != 1"-->
+      <a-col :span="24">
+        <span>请选择站点：</span>
+        <a-select show-search
+                  option-filter-prop="children"
+                  :filter-option="filterOption"
+                  v-model="siteId" @change="changeUser" style="width: 300px">
+          <a-select-option v-for="data in siteinfo" :key="data.id" :value="data.id">
+            {{data.name}}
+          </a-select-option>
+        </a-select>
+        <a-button type="dashed" icon="reload" @click="reloadPage" style="margin-left: 20px;">刷新</a-button>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="10" class="middle-row">
+      <a-col :xl="9" :lg="9" :md="9" :sm="24" :xs="24">
+        <a-card :bordered="false" :body-style="{padding: '0'}">
+          <div class="salesCard">
+            <a-tabs default-active-key="1" size="large">
+              <a-tab-pane tab="询盘有效性饼图" key="1">
+                <a-card :loading="mediumViewPieloading" :bordered="false" :body-style="{padding: '0',width:'100%'}">
+                  <v-chart v-if="mediumViewPie.length > 1"
+                           :height="chartheight" :forceFit="true"
+                           :data="mediumPieData" :scale="mediumPieScale"
+                  >
+                    <v-tooltip :showTitle="false" dataKey="item*percent"/>
+                    <v-axis/>
+                    <v-legend dataKey="item"/>
+                    <v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig"/>
+                    <v-coord type="theta"/>
+                  </v-chart>
+                  <a-empty v-else>
+                    <span slot="description">暂无数据</span>
+                  </a-empty>
+                </a-card>
+              </a-tab-pane>
+            </a-tabs>
+          </div>
+        </a-card>
+      </a-col>
+
+      <a-col :xl="15" :lg="15" :md="15" :sm="24" :xs="24">
+        <a-card :bordered="false" :body-style="{padding: '0'}">
+          <div class="salesCard">
+            <a-tabs default-active-key="1" size="large">
+              <a-tab-pane tab="询盘统计折线图" key="1">
+                <a-card :loading="mediumViewLineloading" :bordered="false" :body-style="{padding: '0',width:'100%'}">
+                  <line-chart-multid v-if="mediumViewLine.length > 1" :dataSource="mediumViewLine"
+                                     :aliases="[{field:'num',alias:'询盘数'}]" :height="chartheight"></line-chart-multid>
+
+                  <a-empty v-else>
+                    <span slot="description">暂无数据</span>
+                  </a-empty>
+                </a-card>
+              </a-tab-pane>
+            </a-tabs>
+          </div>
+        </a-card>
+      </a-col>
+    </a-row>
+
+    <a-row style="margin-top: 10px">
+      <a-col :span="24">
+        <a-card :loading="enquiryChartloading" :bordered="false" title="询盘统计">
+          <a slot="extra" :href="'/inquiry/list?siteId=' + this.siteId">询盘列表</a>
+          <a-row>
+            <a-col :span="6">
+              <head-info title="累计网站询盘" :content="enquiryInfo.total"></head-info>
+            </a-col>
+            <a-col :span="2">
+              <a-spin class='circle-cust'>
+                <a-icon slot="indicator" type="rise" style="font-size: 24px"/>
+              </a-spin>
+            </a-col>
+            <a-col :span="6">
+              <head-info title="近7日累计询盘" :content="enquiryInfo.thisWeek"></head-info>
+            </a-col>
+            <a-col :span="2">
+              <a-spin class='circle-cust'>
+                <a-icon slot="indicator" type="rise" style="font-size: 24px"/>
+              </a-spin>
+            </a-col>
+            <a-col :span="6">
+              <head-info title="近30日累计询盘" :content="enquiryInfo.thisMonth"></head-info>
+            </a-col>
+            <a-col :span="2">
+              <a-spin class='circle-cust'>
+                <a-icon slot="indicator" type="rise" style="font-size: 24px"/>
+              </a-spin>
+            </a-col>
+          </a-row>
+          <bar-multid v-if="enquiryInfo.enquiryChart.length > 1" :dataSource="enquiryInfo.enquiryChart"
+                      :fields="enquiryInfo.enquiryFild"></bar-multid>
+          <a-empty v-else>
+            <span slot="description">暂无数据</span>
+          </a-empty>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+
+  import { DataSet } from '@antv/data-set'
+  import { postAction, getAction } from '@/api/manage'
+  import Qs from 'qs'
+  import LineChartMultid from '@/components/chart/LineChartMultidAdweb'
+  import Bar from '@/components/chart/BarAdweb'
+  import BarMultid from '@/components/chart/BarMultidAdweb'
+  import MapAdweb from '@/components/chart/mapAdweb'
+  import HeadInfo from '@/components/tools/HeadInfo.vue'
+  import ACol from "ant-design-vue/es/grid/Col"
+
+  export default {
+    name: "trafficTrends",
+    components: {
+      BarMultid,
+      LineChartMultid,
+      Bar,
+      HeadInfo,
+      ACol,
+      MapAdweb
+    },
+    data() {
+      return {
+        mediumViewLineloading: true,
+        mediumViewPieloading: true,
+        mediumViewListloading: true,
+        enquiryChartloading: true,
+        siteinfo: [],
+        defaultValue: '',
+        siteId: '',
+        siteCode: '',
+        //图表高度
+        chartheight: 400,
+        mediumViewPie: [],
+        mediumViewLine: [],
+        mediumViewList: [],
+        mediumPieScale: [{
+          dataKey: 'percent',
+          min: 0,
+          formatter: '.0%',
+        }],
+        pieStyle: {
+          stroke: "#fff",
+          lineWidth: 1
+        },
+        labelConfig: ['percent', {
+          formatter: (val, item) => {
+            return item.point.item + ': ' + val;
+          }
+        }],
+        //询盘数据
+        enquiryInfo: {
+          total: '0',
+          thisWeek: '0',
+          thisMonth: '0',
+          enquiryFild: [],
+          enquiryChart: []
+        }
+      }
+    },
+    created() {
+      this.getSiteInfo();
+    },
+
+    computed: {
+      mediumPieData() {
+        const dv = new DataSet.View().source(this.mediumViewPie)
+        dv.transform({
+          type: 'percent',
+          field: 'count',
+          dimension: 'item',
+          as: 'percent'
+        })
+        return dv.rows;
+      }
+    },
+
+    methods: {
+      //进入获取站点code
+      getSiteInfo() {
+        let that = this;
+        getAction('/sys/api/getSiteListByUid').then(function(res) {
+          if (res.code == 0) {
+            that.siteinfo = res.data;
+
+            let isInSite = false
+            for (let i in res.data){
+              if(localStorage.getItem('siteCode') !== null && res.data[i].code === localStorage.getItem('siteCode')){
+                isInSite = true
+                that.siteId =  res.data[i].id
+              }
+            }
+            if (localStorage.getItem('siteCode') !== null && isInSite) {
+
+            }else {
+              that.siteId = res.data[0].id
+              localStorage.setItem("siteCode",res.data[0].code)
+            }
+
+            that.getAllInfo()
+          } else {
+            that.$message.error('站点获取失败，请刷新重试')
+          }
+        })
+      },
+
+      //改变code的时候
+      changeUser(value) {
+        this.siteId = value;
+        for (let i in this.siteinfo){
+          if(value == this.siteinfo[i].id){
+            localStorage.setItem("siteCode",this.siteinfo[i].code)
+          }
+        }
+        this.getAllInfo();
+      },
+
+      //刷新获取全部数据
+      getGoogleInfo() {
+        let that = this;
+        //获取图表数据
+
+        let siteData = that.siteinfo;
+        for (let i in siteData) {
+          if (siteData[i].id == that.siteId) {
+            that.siteCode = siteData[i].code;
+          }
+        }
+
+        let chartd = {
+          siteCode: that.siteCode,
+          startTime: "",
+          endTime: ""
+        }
+        //饼图
+        postAction('/adweb/adwebEnquiry/effectivenessAnalysis/pie', Qs.stringify(chartd), 1000 * 60 * 2).then(function(res) {
+          that.mediumViewPieloading = false;
+          if (res.code == 200) {
+            if (res.result[0].count == 0 && res.result[1].count == 0) {
+              that.mediumViewPie = [];
+            } else {
+              that.mediumViewPie = res.result;
+            }
+          } else {
+            that.mediumViewPie = [];
+          }
+        })
+
+        //折线图
+        postAction('/adweb/adwebEnquiry/effectivenessAnalysis/line', Qs.stringify(chartd), 1000 * 60 * 2).then(function(res) {
+          that.mediumViewLineloading = false;
+          if (res.code == 200) {
+            that.mediumViewLine = res.result;
+          } else {
+            that.mediumViewLine = [];
+          }
+        })
+      },
+
+      getAllInfo() {
+        let that = this
+        that.mediumViewPieloading = true
+        that.mediumViewLineloading = true
+        that.mediumViewListloading = true
+
+        //在请求完内部adweb接口后，请求google数据
+        that.getGoogleInfo()
+
+        //询盘数据
+        let enquiryd = {
+          siteId: that.siteId,
+          day: 6,
+          dayEnd: 1
+        }
+        postAction('/adweb/adwebEnquiry/selectEnquiryCountV2', Qs.stringify(enquiryd), 1000 * 60 * 2).then(function(res) {
+          that.enquiryChartloading = false;
+          console.log(res.data.countDto.total)
+          if (res.code == 0) {
+            that.enquiryInfo.total = res.data.countDto.total.toString()
+            that.enquiryInfo.thisWeek = res.data.countDto.thisWeek.toString()
+            that.enquiryInfo.thisMonth = res.data.countDto.thisMonth.toString()
+
+            let dateList = res.data.trendDto.dates;
+            let dictsList = res.data.trendDto.dicts;
+            let valuesList = res.data.trendDto.values;
+            if (valuesList != null) {
+              let arr = [];
+              for (let i = 0; i < dictsList.length; i++) {
+                let dict = dictsList[i];
+                let value = dict.value;
+                let label = dict.label;
+                let values = valuesList[value];
+                let obj = {};
+                obj['label'] = label;
+                for (let j = 0; j < dateList.length; j++) {
+                  obj[dateList[j]] = values[j];
+                }
+                arr.push(obj)
+              }
+              that.enquiryInfo.enquiryFild = dateList;
+              that.enquiryInfo.enquiryChart = arr;
+            } else {
+              that.enquiryInfo.enquiryChart = [];
+            }
+          } else {
+            that.enquiryInfo.total = 0
+            that.enquiryInfo.thisWeek = 0
+            that.enquiryInfo.thisMonth = 0
+            that.enquiryInfo.enquiryFild = [];
+            that.enquiryInfo.enquiryChart = [];
+          }
+
+        })
+
+      },
+
+      //刷新页面
+      reloadPage() {
+        this.getAllInfo();
+      },
+
+      filterOption(input, option) {
+        return (
+          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+        );
+      },
+    }
+  }
+</script>
+
+<style lang="less" scoped>
+  .circle-cust {
+    position: relative;
+    top: 28px;
+    left: -100%;
+  }
+
+  .middle-row .ant-tabs-tabpane .ant-card {
+    height: 430px;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+  }
+</style>

src/views/adweb/data/trafficAnalysis.vue

@@ -0,0 +1,595 @@
+<template>
+  <div class="search-form">
+    <!-- 站点选择和时间筛选 -->
+    <a-row class="r1">
+      <a-col :span="6">
+        <span class="t1">站点：</span>
+        <select-site @comMethods="changeSite" selectWidth="300px" />
+      </a-col>
+      <a-col :span="6">
+        <span class="t1">统计时间：</span>
+        <a-range-picker @change="onChangeDatePciker" :disabledDate="disabledDate" :value="rangeDate"
+                        style="width:70%" />
+      </a-col>
+      <a-col :span="12">
+        <a-button :class="queryParam.dateType == '' ? 'active' : ''" @click="setTime('')">全部时间
+        </a-button>
+        <a-button :class="queryParam.dateType == 'thirtyDay' ? 'active' : ''"
+                  @click="setTime('thirtyDay')">近30天
+        </a-button>
+        <a-button :class="queryParam.dateType == 'sevenDay' ? 'active' : ''"
+                  @click="setTime('sevenDay')">近一周
+        </a-button>
+        <a-button :class="queryParam.dateType == 'yesterday' ? 'active' : ''"
+                  @click="setTime('yesterday')">昨日
+        </a-button>
+        <a-button :class="queryParam.dateType == 'today' ? 'active' : ''" @click="setTime('today')">
+          今日
+        </a-button>
+      </a-col>
+    </a-row>
+  </div>
+  <a-spin :spinning="loading" tip="加载中...">
+    <a-row class="r2">
+      <a-col :span="8">
+        <p class="t1"><img src="@/assets/trafficAnalysis/uvicon.svg" />访客数（UV）</p>
+        <p class="t3">{{ flowIndexNums.uv }}</p>
+      </a-col>
+      <a-col :span="8">
+        <p class="t1"><img src="@/assets/trafficAnalysis/pvicon.svg" />浏览量（PV）</p>
+        <p class="t3">{{ flowIndexNums.pv }}</p>
+      </a-col>
+      <a-col :span="8">
+        <p class="t1"><img src="@/assets/trafficAnalysis/enquirycounticon.svg" />询盘数</p>
+        <router-link
+          :to="{ path: '/inquiry/list', query: {dateType: queryParam.dateType, start: queryParam.start, end: queryParam.end} }">
+          <p class="t2">{{ flowIndexNums.enquiry }}</p>
+        </router-link>
+      </a-col>
+    </a-row>
+    <a-row>
+      <a-col :span="24">
+        <a-card style="margin: 10px" title="核心数据">
+          <a-row class="r5" :gutter="[20,20]">
+            <a-row class="r5-1">
+              <a-col :span="24">
+                <div class="fr" v-if="coreDataChart.x.length > 0">
+                  <span><i style="background: #544BEB;"></i>UV</span>
+                  <span><i style="background: #F0B358;"></i>PV</span>
+                  <span><i style="background: #58CCA8;"></i>询盘数</span>
+                </div>
+                <area-chart v-if="coreDataChart.x.length > 0" :dataSource="coreDataChart"></area-chart>
+                <a-empty v-else style="float: right;width: 100%;margin-top: 110px;"></a-empty>
+              </a-col>
+            </a-row>
+            <a-col style="width: 20%;">
+              <div class="wrap">
+                <img src="@/assets/trafficAnalysis/dailyVisitCount.svg"/>
+                <div class="fr">
+                  <p>日均访问量</p>
+                  <p style="font-size: 25px;">{{ statistics.averageVisit }}</p>
+                </div>
+              </div>
+            </a-col>
+            <a-col style="width: 20%;">
+              <div class="wrap">
+                <img src="@/assets/trafficAnalysis/avgVisitTime.svg"/>
+                <div class="fr">
+                  <p>平均访问时长</p>
+                  <p style="font-size: 25px;">{{ statistics.averageVisitDuration }}</p>
+                </div>
+              </div>
+            </a-col>
+            <a-col style="width: 20%;">
+              <div class="wrap">
+                <img src="@/assets/trafficAnalysis/avgVisitPage.svg"/>
+                <div class="fr">
+                  <p>访客平均访问页面数</p>
+                  <p style="font-size: 25px;">{{ statistics.averageVisitPage }}</p>
+                </div>
+              </div>
+            </a-col>
+            <a-col style="width: 20%;">
+              <div class="wrap">
+                <img src="@/assets/trafficAnalysis/tiaochu.svg"/>
+                <div class="fr">
+                  <p>跳出率</p>
+                  <p style="font-size: 25px;">{{ statistics.bounceRate }}</p>
+                </div>
+              </div>
+            </a-col>
+            <a-col style="width: 20%;">
+              <div class="wrap">
+                <img src="@/assets/trafficAnalysis/uvTransfer.svg"/>
+                <div class="fr">
+                  <p>UV到询盘转化率</p>
+                  <p style="font-size: 25px;">{{ statistics.conversionRate }}</p>
+                </div>
+              </div>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+      <a-col :span="24">
+        <a-card style="margin: 10px" title="访客数地域分布">
+          <a-row class="r5" :gutter="[20,20]">
+            <a-col :span="12">
+              <map-adweb v-if="countryMapData.length > 0" :dataSource="countryMapData" :aliases="[{dataKey:'country',alias:'国家'},{dataKey:'num',alias:'访问数量'}]"
+                         :height="chartheight"></map-adweb>
+              <a-empty v-else style="margin-top: 50px;">
+                <span slot="description">暂无数据</span>
+              </a-empty>
+            </a-col>
+            <a-col :span="2">
+            </a-col>
+            <a-col :span="10">
+              <a-table
+                style="margin-top: 40px; margin-bottom: 40px;"
+                :rowKey="(record,index)=>{return index}"
+                class="chartTable"
+                :scroll="{ y: 400 }"
+                :pagination=false
+                :columns="chartDetailDataCol"
+                :data-source="chartDetailData"
+                :showHeader="false">
+                <template #bodyCell="{ column, record, index, text }">
+                <template v-if="column.key === 'flagSlot' ">
+            <span class="img-box">
+              <img src="../../../assets/flag_placeholder.png" :class="'flag flag-' + record.countryCode" alt="Czech Republic"/>
+            </span>
+                </template>
+                <template v-if="column.key === 'numSlot' ">
+                  {{ record.num }} | {{ record.proportion }}
+                </template>
+                </template>
+              </a-table>
+            </a-col>
+          </a-row>
+        </a-card>
+      </a-col>
+    </a-row>
+  </a-spin>
+</template>
+
+<script lang="ts" name="data-trafficAnalysis" setup>
+import selectSite from "@/components/Adweb/selectSite.vue";
+import areaChart from "./chart/areaChart.vue";
+import { reactive, ref, watch } from "vue";
+import { getAction } from "@/api/manage/manage";
+import moment from "moment";
+import MapAdweb from "@/components/chart/mapAdweb.vue";
+
+const siteList = ref([]);
+const selectSiteInfo = ref({});
+const queryParam = reactive<any>({});
+const loading = ref(false);
+const chartheight = ref(400);
+const chartDetailDataCol = ref([
+  {
+    title: "国旗",
+    align: "center",
+    width: 30,
+    scopedSlots: {customRender: 'flagSlot'}
+  },
+  {
+    title: "国家",
+    align: "left",
+    dataIndex: 'countryName',
+    customRender: function (text, record) {
+      return text === null? record.country : text;
+    }
+  },
+  {
+    title: "数量",
+    align: "right",
+    dataIndex: 'num',
+    scopedSlots: {customRender: 'numSlot'}
+  },
+]);
+
+function changeSite(value, e) {
+  selectSiteInfo.value = e.data.attrs.info;
+  queryParam.siteId = selectSiteInfo.id;
+  reloadData(queryParam.siteId);
+}
+
+//重新刷新页面数据
+function reloadData(value) {
+  loading.value = true;
+  for (let i in siteList.value) {
+    if (value === siteList[i].id) {
+      localStorage.setItem("siteCode", siteList[i].code);
+    }
+  }
+  getFlowIndexNumber();
+  getCountryMapData();
+  getMediaList();
+  getMostAccessList();
+}
+
+const flowIndexNums = ref({
+  uv: 0,
+  pv: 0,
+  enquiry: 0
+});
+const coreDataChart = ref({
+  x: [],
+  uv: [],
+  pv: [],
+  enquiry: []
+});
+const statistics = ref({
+  averageVisit: 0,
+  averageVisitDuration: 0,
+  averageVisitPage: 0,
+  bounceRate: "0%",
+  conversionRate: "0%"
+});
+
+//访客量、浏览量、询盘数量、折线图以及统计
+const getFlowIndexNumber = async () => {
+  try {
+    const res = await getAction("/datacenter/flow/number", queryParam);
+    if (!res.result) {
+      flowIndexNums.value = {
+        uv: 0,
+        pv: 0,
+        enquiry: 0
+      };
+      coreDataChart.value = {
+        x: [],
+        uv: [],
+        pv: [],
+        enquiry: []
+      };
+      statistics.value = {
+        averageVisit: 0,
+        averageVisitDuration: 0,
+        averageVisitPage: 0,
+        bounceRate: "0%",
+        conversionRate: "0%"
+      };
+      loading.value = false;
+      return;
+    }
+
+    flowIndexNums.value = res.result.flowIndexNumber;
+    const r = res.result.dailyTrends;
+    const x = [], pv = [], uv = [], enquiry = [];
+    if (r != null && r.length > 0) {
+      for (let item of r) {
+        x.push(item.date);
+        pv.push(item.pvCount);
+        uv.push(item.uvCount);
+        enquiry.push(item.enquiryCount);
+      }
+    }
+    coreDataChart.value.x = x;
+    coreDataChart.value.pv = pv;
+    coreDataChart.value.uv = uv;
+    coreDataChart.value.enquiry = enquiry;
+
+    statistics.value = res.result.statistics;
+    loading.value = false;
+  } catch (error) {
+    console.error(error);
+  }
+};
+const countryMapData = ref([]);
+const chartDetailData = ref([]);
+
+//访客数地域分布
+const getCountryMapData = async () => {
+  try {
+    const res = await getAction("/datacenter/region/map", queryParam);
+    if (res.code == 200) {
+      countryMapData.value = res.result.accessMap;
+      chartDetailData.value = res.result.accessList;
+    }
+    console.log("countryMapData", countryMapData.value);
+  } catch (error) {
+    console.error(error);
+  }
+};
+const mediaDatasource = ref([]);
+
+//来源媒介列表、最多访问top10列表
+const getMediaList = async () => {
+  try {
+    const res = await getAction("/datacenter/sourcemedia/list", queryParam);
+    if (res.code == 200) {
+      mediaDatasource.value = res.result;
+    } else {
+      mediaDatasource.value = [];
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+const mostAccessDatasource = ref([]);
+
+//
+const getMostAccessList = async () => {
+  try {
+    const res = await getAction("/datacenter/mostaccess/list", queryParam);
+    if (res.code == 200) {
+      mostAccessDatasource.value = res.result;
+    } else {
+      mostAccessDatasource.value = [];
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const rangeDate = ref([]);
+
+const onChangeDatePciker = (date, dateString) => {
+  if (dateString.length > 0) {
+    rangeDate.value = date;
+    queryParam.value.start = dateString[0];
+    queryParam.value.end = dateString[1];
+    queryParam.value.dateType = undefined;
+    reloadData(queryParam.siteId);
+  }
+};
+
+//日期选择只能今天之前
+function disabledDate(current) {
+  return current && current > moment().subtract(0, "days");
+}
+
+const setTime = (time) => {
+  queryParam.dateType = time;
+  queryParam.start = "";
+  queryParam.end = "";
+
+  if (time == "") {
+    rangeDate.value = undefined;
+  } else if (time == "sevenDay") {
+    rangeDate.value = [moment().subtract(7, "days"), moment().subtract(1, "days")];
+  } else if (time == "thirtyDay") {
+    rangeDate.value = [moment().subtract(30, "days"), moment().subtract(1, "days")];
+  } else if (time == "yesterday") {
+    rangeDate.value = [moment().subtract(1, "days"), moment().subtract(1, "days")];
+  } else if (time == "today") {
+    rangeDate.value = [moment(), moment()];
+  }
+
+  reloadData(queryParam.siteId);
+};
+
+// 监听queryParam的变化，当它变化时重新加载数据
+watch(queryParam, (newValue, oldValue) => {
+  reloadData(queryParam.siteId);
+});
+</script>
+
+<style lang="less" scoped>
+.self-pop {
+  .ant-popover-inner-content {
+    background: rgb(245, 243, 254);
+
+    p {
+      font-size: 13px;
+    }
+  }
+
+  .ant-popover-arrow {
+    border-color: rgb(245, 243, 254) !important;
+  }
+}
+.img-box {
+  width: 22px;
+  height: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.ant-alert {
+  /deep/ .ant-btn {
+    border-radius: 0;
+    margin-left: 10px;
+  }
+}
+
+.theme-color {
+  color: @primary-color;
+}
+
+.r1 {
+  margin: 20px;
+  display: flex;
+
+  /deep/ .ant-select-selection {
+    background: transparent;
+  }
+
+  /deep/ .ant-select-selection__clear {
+    background: transparent;
+  }
+
+  /deep/ i, /deep/ .ant-calendar-range-picker-separator {
+  }
+
+
+  .t1 {
+    font-size: 18px;
+  }
+
+  .ant-calendar-picker {
+    margin-right: 20px;
+
+    /deep/ .ant-input {
+      background: transparent;
+    }
+  }
+
+  /deep/ .ant-btn {
+    background: transparent;
+    margin-right: 10px;
+
+    &.active {
+      color: @primary-color;
+    }
+  }
+}
+
+.r2 {
+  background: #fff;
+  padding: 30px 20px;
+  margin: 10px;
+
+  .ant-col:not(:last-child) {
+    border-right: 1px solid #e6e6e6;
+  }
+
+  p {
+    margin: 0;
+    text-align: center;
+
+    &.t1 {
+      color: #333;
+      margin-bottom: 15px;
+
+      img {
+        margin-right: 10px;
+        width: 15px;
+        margin-top: -5px;
+      }
+    }
+
+    &.t2 {
+      color: @primary-color;
+      font-size: 30px;
+      font-weight: 500;
+      line-height: 1;
+      padding-left: 25px;
+    }
+
+    &.t3 {
+      font-size: 30px;
+      font-weight: 500;
+      line-height: 1;
+      padding-left: 25px;
+    }
+  }
+}
+
+.r5{
+  background: #fff;
+  padding: 10px ;
+  border-radius: 10px;
+  margin: 0!important;
+  .wrap{
+    box-shadow: 0px 2px 4px 0px rgba(84,75,235,.3);
+    padding: 15px;
+    border-radius: 10px;
+    overflow: hidden;
+    background: #fff;
+    transition: all .3s;
+    &.blue{
+      box-shadow: 0px 2px 4px 0px rgba(88,203,168,.3);
+    }
+    &.effect:hover{
+      box-shadow: none;
+      background: rgb(241,248,255);
+    }
+    img{
+      width: 15px;
+    }
+    .fr{
+      float: right;
+      width: calc(100% - 15px);
+      text-align: center;
+      p:last-child{
+        font-size: 30px;
+        text-align: center;
+        margin-top: 10px;
+
+      }
+    }
+  }
+  /deep/ .ant-table-thead>tr>th{
+    background: rgb(241,248,255);
+    border: none;
+    color: #000;
+    padding: 10px;
+  }
+  /deep/ .ant-table-tbody .ant-table-row td{
+    padding: 10px;
+    color: #000;
+  }
+
+  .r5-1{
+    display: inline-block;
+    width: 100%;
+    margin-top: 30px;
+    .fl{
+      float: left;
+      position: relative;
+      .ant-btn{
+        border-radius: 0;
+        border: none;
+        margin-right: 10px;
+      }
+    }
+    .fr{
+      float: right;
+      line-height: 2;
+      span{
+        margin-right: 30px;
+        i{
+          display: inline-block;
+          width: 25px;
+          height: 3px;
+          background: #544BEB;
+          position: relative;
+          top: -4px;
+          margin-right: 20px;
+        }
+        &:last-child i{
+          background: #F0B358;
+        }
+      }
+    }
+  }
+  .box{
+    border-radius: 10px;
+    text-align: center;
+    min-height: 180px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    p{
+      color: #fff;
+      img{
+        width: 19px;
+        margin: -5px 10px 0 0;
+      }
+    }
+    .num{
+      font-size: 30px;
+      margin-bottom: 10px;
+    }
+    &.b1{
+      background: rgb(233,107,95);
+    }
+    &.b2{
+      background: rgb(88,204,168);
+    }
+    &.b3{
+      background: rgb(124,152,252);
+    }
+    &.b4{
+      background: #F0B358;
+    }
+  }
+}
+</style>

src/views/adweb/data/trafficAnalysisCopy.vue

@@ -0,0 +1,844 @@
+<template>
+  <div class="wrap home">
+    <!-- 站点选择和时间筛选 -->
+    <a-row class="r1" :gutter="8">
+      <a-col :xl="7" :xxl="6" v-if="siteList.length > 1">
+        <div class="choose-site">
+          <span class="t1">站点：</span>
+          <select-site @comMethods="changeSite" />
+        </div>
+      </a-col>
+      <a-col :xl="8" :xxl="6">
+        <div class="choose-site">
+          <span class="t1">统计时间：</span>
+          <a-range-picker @change="onChangeDatePciker" :disabledDate="disabledDate" :value="rangeDate" style="width:70%"/>
+        </div>
+      </a-col>
+      <a-col :xl="9" :xxl="12">
+        <a-button :class="queryParam.dateType == '' ? 'active' : ''" @click="setTime('')">全部时间</a-button>
+        <a-button :class="queryParam.dateType == 'thirtyDay' ? 'active' : ''" @click="setTime('thirtyDay')">近30天</a-button>
+        <a-button :class="queryParam.dateType == 'sevenDay' ? 'active' : ''" @click="setTime('sevenDay')">近一周</a-button>
+        <a-button :class="queryParam.dateType == 'yesterday' ? 'active' : ''" @click="setTime('yesterday')">昨日</a-button>
+        <a-button :class="queryParam.dateType == 'today' ? 'active' : ''" @click="setTime('today')">今日</a-button>
+      </a-col>
+    </a-row>
+
+    <!-- 占位 -->
+    <div style="height: 20px;"></div>
+
+    <a-spin :spinning="loading" tip="加载中...">
+      <a-row class="r2">
+        <a-col :span="8">
+          <p class="t1"><img src="@/assets/trafficAnalysis/uvicon.svg"/>访客数（UV）</p>
+          <p class="t3">{{ flowIndexNums.uv }}</p>
+        </a-col>
+        <a-col :span="8">
+          <p class="t1"><img src="@/assets/trafficAnalysis/pvicon.svg"/>浏览量（PV）</p>
+          <p class="t3">{{ flowIndexNums.pv }}</p>
+        </a-col>
+        <a-col :span="8">
+          <p class="t1"><img src="@/assets/trafficAnalysis/enquirycounticon.svg"/>询盘数</p>
+          <router-link :to="{ path: '/inquiry/list', query: {dateType: this.queryParam.dateType, start: this.queryParam.start, end: this.queryParam.end} }">
+            <p class="t2">{{ flowIndexNums.enquiry }}</p>
+          </router-link>
+        </a-col>
+      </a-row>
+
+      <a-row class="r3">
+        <a-col><p class="title">核心数据</p></a-col>
+      </a-row>
+      <a-row class="r5" :gutter="[20,20]">
+        <a-row class="r5-1">
+          <a-col :span="24">
+            <div class="fr" v-if="coreDataChart.x.length > 0">
+              <span><i style="background: #544BEB;"></i>UV</span>
+              <span><i style="background: #F0B358;"></i>PV</span>
+              <span><i style="background: #58CCA8;"></i>询盘数</span>
+            </div>
+            <area-chart v-if="coreDataChart.x.length > 0" :dataSource="coreDataChart"></area-chart>
+            <a-empty v-else style="float: right;width: 100%;margin-top: 110px;"></a-empty>
+          </a-col>
+        </a-row>
+        <a-col :span="4" style="width: 20%;">
+          <div class="wrap">
+            <img src="@/assets/trafficAnalysis/dailyVisitCount.svg"/>
+            <div class="fr">
+              <p>日均访问量</p>
+              <p style="font-size: 25px;">{{ statistics.averageVisit }}</p>
+            </div>
+          </div>
+        </a-col>
+        <a-col :span="4" style="width: 20%;">
+          <div class="wrap">
+            <img src="@/assets/trafficAnalysis/avgVisitTime.svg"/>
+            <div class="fr">
+              <p>平均访问时长</p>
+              <p style="font-size: 25px;">{{ statistics.averageVisitDuration }}</p>
+            </div>
+          </div>
+        </a-col>
+        <a-col :span="4" style="width: 20%;">
+          <div class="wrap">
+            <img src="@/assets/trafficAnalysis/avgVisitPage.svg"/>
+            <div class="fr">
+              <p>访客平均访问页面数</p>
+              <p style="font-size: 25px;">{{ statistics.averageVisitPage }}</p>
+            </div>
+          </div>
+        </a-col>
+        <a-col :span="4" style="width: 20%;">
+          <div class="wrap">
+            <img src="@/assets/trafficAnalysis/tiaochu.svg"/>
+            <div class="fr">
+              <p>跳出率</p>
+              <p style="font-size: 25px;">{{ statistics.bounceRate }}</p>
+            </div>
+          </div>
+        </a-col>
+        <a-col :span="4" style="width: 20%;">
+          <div class="wrap">
+            <img src="@/assets/trafficAnalysis/uvTransfer.svg"/>
+            <div class="fr">
+              <p>UV到询盘转化率</p>
+              <p style="font-size: 25px;">{{ statistics.conversionRate }}</p>
+            </div>
+          </div>
+        </a-col>
+      </a-row>
+
+      <a-row class="r3">
+        <a-col><p class="title">访客数地域分布</p></a-col>
+      </a-row>
+      <a-row class="r5" :gutter="[20,20]">
+        <a-col :span="12">
+          <map-adweb v-if="countryMapData.length > 0" :dataSource="countryMapData" :aliases="[{dataKey:'country',alias:'国家'},{dataKey:'num',alias:'访问数量'}]"
+                     :height="chartheight"></map-adweb>
+          <a-empty v-else style="margin-top: 50px;">
+            <span slot="description">暂无数据</span>
+          </a-empty>
+        </a-col>
+        <a-col :span="2">
+        </a-col>
+        <a-col :span="10">
+          <a-table
+            style="margin-top: 40px; margin-bottom: 40px;"
+            :rowKey="(record,index)=>{return index}"
+            class="chartTable"
+            :scroll="{ y: 400 }"
+            :pagination=false
+            :columns="chartDetailDataCol"
+            :data-source="chartDetailData"
+            :showHeader="false">
+            <template slot="flagSlot" slot-scope="text,record">
+            <span class="img-box">
+              <img src="../../../assets/flag_placeholder.png" :class="'flag flag-' + record.countryCode" alt="Czech Republic"/>
+            </span>
+            </template>
+            <template slot="numSlot" slot-scope="text,record">
+              {{ record.num }} | {{ record.proportion }}
+            </template>
+          </a-table>
+        </a-col>
+      </a-row>
+
+      <a-row class="r3">
+        <a-col><p class="title">来源/媒介</p></a-col>
+      </a-row>
+      <a-row class="r5" :gutter="[20,20]">
+        <a-table
+          :columns="mediaListColumns"
+          :data-source="mediaDatasource"
+          size="middle"
+          rowKey="type"
+          :pagination="false">
+          <div style="padding: 10px;" slot="filterDropdown">
+            affiliate：通过联属营销计划点击链接的用户<br/>
+            cpc：（每次点击费用的缩写）点击付费广告的用户<br/>
+            organic：点击搜索引擎中的链接的用户<br/>
+            referral：点击网站上的链接（例如，视频说明中的链接）的用户<br/>
+            (none)：直接流量
+          </div>
+          <a-icon slot="filterIcon" type='question-circle' :style="{ fontSize:'16px',color:  '#108ee9' }"/>
+          <template slot="typeSlotFirst" slot-scope="text,record">
+            {{ record.type.split("/")[0] }}
+          </template>
+          <template slot="typeSlotLast" slot-scope="text,record">
+            <a-popover>
+              <template slot="content">
+                <template v-if="record.type.split('/')[1] === ' affiliate'">
+                  通过联属营销计划点击链接的用户
+                </template>
+                <template v-if="record.type.split('/')[1] === ' cpc'">
+                  （每次点击费用的缩写）点击付费广告的用户
+                </template>
+                <template v-if="record.type.split('/')[1] === ' organic'">
+                  点击搜索引擎中的链接的用户
+                </template>
+                <template v-if="record.type.split('/')[1] === ' referral'">
+                  点击网站上的链接（例如，视频说明中的链接）的用户
+                </template>
+                <template v-if="record.type.split('/')[1] === ' (none)'">
+                  直接流量
+                </template>
+              </template>
+              {{ record.type.split("/")[1] }}
+            </a-popover>
+          </template>
+          <template slot="avgPageNumSlot" slot-scope="text,record">
+            <span style="margin-left: 20px;"></span>{{ record.pageViewsPerSession * record.sessions }}
+          </template>
+          <template slot="centerSlot" slot-scope="text, record, index">
+            <span style="margin-left: 20px;">{{ text }}</span>
+          </template>
+          <template slot="avgSessionDurationSlot" slot-scope="text, record, index">
+            <span style="margin-left: 30px;">{{ text }} s</span>
+          </template>
+        </a-table>
+      </a-row>
+
+      <a-row class="r3">
+        <a-col><p class="title">最多访问TOP10</p></a-col>
+      </a-row>
+      <a-row class="r5" :gutter="[20,20]">
+        <a-table
+          :columns="mostAccessColumns"
+          :data-source="mostAccessDatasource"
+          size="middle"
+          rowKey="type"
+          :pagination="false">
+          <div slot="pagePathSlot" slot-scope="text, record">
+            <a-popover>
+              <template slot="content">
+                {{ text }}
+              </template>
+              <a :href="text" target="_blank">
+                <div style="width: 700px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis">{{ text }}</div>
+              </a>
+            </a-popover>
+          </div>
+          <template slot="centerSlot" slot-scope="text, record, index">
+            <span style="margin-left: 20px;">{{ text }}</span>
+          </template>
+          <template slot="avgTimeOnPageSlot" slot-scope="text, record, index">
+            <span style="margin-left: 30px;">{{ text }} s</span>
+          </template>
+        </a-table>
+      </a-row>
+    </a-spin>
+  </div>
+</template>
+
+<script>
+import {postAction, getAction, downFile, putAction} from '/@/api/manage/manage'
+import enquiryTrack from '@/views/adweb/enquiry/modules/enquiryTrack.vue'
+import enquiryTrackRecord from '@/views/adweb/enquiry/modules/enquiryTrackRecord.vue'
+import enquiryDetail from '@/views/adweb/enquiry/modules/enquiryDetail.vue'
+import XpRecycleBinModal from '@/views/adweb/system/modules/XpRecycleBinModal.vue'
+import blackList from '@/views/adweb/enquiry/modules/blackList.vue'
+import moment from 'moment'
+import dashChart from '@/views/adweb/data/chart/DashChartDemo.vue'
+import areaChart from '@/views/adweb/data/chart/areaChart.vue'
+import MapAdweb from '@/components/chart/mapAdweb.vue'
+import selectSite from '@/components/adweb/selectSite.vue'
+
+export default {
+  name: 'TrafficAnalysis',
+  components: {
+    enquiryTrack,
+    enquiryTrackRecord,
+    XpRecycleBinModal,
+    enquiryDetail,
+    blackList,
+    areaChart,
+    dashChart,
+    MapAdweb,
+    selectSite
+  },
+  data() {
+    return {
+      // 通用
+      ipagination: {
+        current: 1,
+        pageSize: 30,
+        pageSizeOptions: ['15', '30', '45', '60'],
+        showTotal: (total, range) => {
+          return range[0] + "-" + range[1] + " 共" + total + "条"
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      disableMixinCreated: true,
+      loading: true,
+      // 筛选
+      siteList: [],
+      rangeDate: undefined,
+      // uv、pv、询盘数
+      flowIndexNums: {
+        uv: 0,
+        pv: 0,
+        enquiry: 0
+      },
+      // 数据趋势的数据
+      coreDataChart: {
+        x: [],
+        uv: [],
+        pv: [],
+        enquiry: []
+      },
+      statistics: {
+        averageVisit: 0,
+        averageVisitDuration: 0,
+        averageVisitPage: 0,
+        bounceRate: "0%",
+        conversionRate: "0%"
+      },
+      // 访客数据地图分布
+      chartheight: 400,
+      countryMapData: [],
+      // 来源媒介列表
+      mediaListColumns: [
+        {
+          title: '来源',
+          scopedSlots: {
+            customRender: 'typeSlotFirst',
+          }
+        },
+        {
+          title: '媒介',
+          scopedSlots: {
+            filterDropdown: 'filterDropdown',
+            filterIcon: 'filterIcon',
+            customRender: 'typeSlotLast',
+          }
+        },
+        {
+          title: '访客数（UV）',
+          dataIndex: 'users',
+          defaultSortOrder: 'descend',
+          sorter: (a, b) => a.users - b.users,
+          scopedSlots: {
+            customRender: 'centerSlot',
+          }
+        },
+        {
+          title: '占比',
+          dataIndex: 'userProportion',
+        },
+        {
+          title: '新访客数',
+          dataIndex: 'newUsers',
+          sortDirections: ['descend', 'ascend'],
+          sorter: (a, b) => a.newUsers - b.newUsers,
+          scopedSlots: {
+            customRender: 'centerSlot',
+          }
+        },
+        {
+          title: '新客占比',
+          customRender: function (text, record, index) {
+            return (record.newUsers * 100 / record.users).toFixed(2) + ' %';
+          }
+        },
+        {
+          title: '浏览量（PV）',
+          scopedSlots: {
+            customRender: 'avgPageNumSlot',
+          }
+        },
+        {
+          title: '平均访问页面数',
+          dataIndex: 'pageViewsPerSession',
+          sortDirections: ['descend', 'ascend'],
+          sorter: (a, b) => a.pageviewsPerSession - b.pageviewsPerSession,
+          scopedSlots: {
+            customRender: 'centerSlot',
+          }
+        },
+        {
+          title: '平均会话时长',
+          dataIndex: 'avgSessionDuration',
+          sortDirections: ['descend', 'ascend'],
+          sorter: (a, b) => a.avgSessionDuration - b.avgSessionDuration,
+          scopedSlots: {
+            customRender: 'avgSessionDurationSlot',
+          }
+        },
+      ],
+      mediaDatasource: [],
+      // 最多访问TOP10列表
+      mostAccessColumns: [
+        {
+          title: '来源',
+          dataIndex: 'pagePath',
+          scopedSlots: {
+            customRender: 'pagePathSlot',
+          }
+        },
+        {
+          title: '浏览量（PV）',
+          dataIndex: 'pageViews',
+          defaultSortOrder: 'descend',
+          sorter: (a, b) => a.pageViews - b.pageViews,
+          width: 160,
+          scopedSlots: {
+            customRender: 'centerSlot',
+          }
+        },
+        {
+          title: '浏览量占比',
+          dataIndex: 'accessProportion',
+          width: 160,
+          scopedSlots: {
+            customRender: 'centerSlot',
+          }
+        },
+        // {
+        //   title: '平均页面停留时间',
+        //   dataIndex: 'avgTimeOnPage',
+        //   sortDirections: ['descend', 'ascend'],
+        //   width: 160,
+        //   scopedSlots: {
+        //     customRender: 'avgTimeOnPageSlot',
+        //   }
+        // },
+      ],
+      mostAccessDatasource: [],
+      // 访客地域分布列表
+      chartDetailData: [],
+      chartDetailDataCol: [
+        {
+          title: "国旗",
+          align: "center",
+          width: 30,
+          scopedSlots: {customRender: 'flagSlot'}
+        },
+        {
+          title: "国家",
+          align: "left",
+          dataIndex: 'countryName',
+          customRender: function (text, record) {
+            return text === null ? record.country : text;
+          }
+        },
+        {
+          title: "数量",
+          align: "right",
+          dataIndex: 'num',
+          scopedSlots: {customRender: 'numSlot'}
+        },
+      ],
+      routerQuery: {},
+    }
+  },
+  watch: {
+    '$route.query': {
+      handler: function (val) {
+        this.routerQuery = val
+      },
+      immediate: true // 初次变化立即查询
+    }
+  },
+  mounted() {
+    console.log(this.routerQuery);
+    if (this.routerQuery.start) {
+      let start = moment(this.routerQuery.start);
+      let end;
+      if (this.routerQuery.end) {
+        end = moment(this.routerQuery.end);
+      } else {
+        end = moment().subtract(1, "days");
+      }
+      this.rangeDate = [start, end];
+      this.queryParam.dateType = undefined;
+      this.queryParam.start = start.format("YYYY-MM-DD");
+      this.queryParam.end = end.format("YYYY-MM-DD");
+    } else if (this.routerQuery.dateType) {
+      switch(this.routerQuery.dateType){
+        case "All":
+          this.queryParam.dateType = '';
+          this.queryParam.start = undefined;
+          this.queryParam.end = undefined;
+          break;
+      }
+    } else {
+      this.queryParam.dateType = 'sevenDay';
+      this.rangeDate = [moment().subtract(7, "days"), moment().subtract(1, "days")];
+    }
+    this.getSiteList();
+  },
+  methods: {
+    // ========================================== 筛选 ==========================================
+    //获取站点列表
+    getSiteList() {
+      let that = this
+      getAction('/sys/api/getSiteListByUid').then(function (res) {
+        if (res.code == 0) {
+          if (res.data || res.data.length) {
+            if (that.routerQuery.siteCode) {
+              localStorage.setItem('siteCode', that.routerQuery.siteCode);
+            }
+            let defaultSiteCode = localStorage.getItem('siteCode');
+            if (defaultSiteCode) {
+              let isInSite = false
+              for (let i in res.data) {
+                if (defaultSiteCode === res.data[i].code) {
+                  isInSite = true;
+                  that.queryParam.siteId = res.data[i].id;
+                  break;
+                }
+              }
+              if (!isInSite) {
+                that.queryParam.siteId = res.data[0].id;
+                localStorage.setItem('siteCode', res.data[0].code);
+              }
+            } else {
+              that.queryParam.siteId = res.data[0].id;
+              localStorage.setItem('siteCode', res.data[0].code);
+            }
+            that.siteList = res.data;
+            that.reloadData()
+          }
+        } else {
+          that.$message.error('获取站点失败！')
+        }
+      }).catch(function (err) {
+        console.log(err)
+      })
+    },
+    // 搜索
+    filterOption(inputValue, option) {
+      return option.componentOptions.children[0].text.indexOf(inputValue) >= 0
+    },
+    //搜索条件部分的逻辑
+    onChangeDatePciker(date, dateString) {
+      if (dateString.length > 0) {
+        this.rangeDate = date
+        this.queryParam.start = dateString[0]
+        this.queryParam.end = dateString[1]
+        this.queryParam.dateType = undefined
+        this.reloadData();
+      }
+    },
+    //日期选择只能今天之前
+    disabledDate(current) {
+      return current && current > moment().subtract(0, "days");
+    },
+    //设置列表的时间查询条件
+    setTime(time) {
+      this.queryParam.dateType = time
+      this.queryParam.start = ''
+      this.queryParam.end = ''
+      if (time == '') {
+        this.rangeDate = undefined
+      } else if (time == 'sevenDay') {
+        this.rangeDate = [moment().subtract(7, "days"), moment().subtract(1, "days")]
+      } else if (time == 'thirtyDay') {
+        this.rangeDate = [moment().subtract(30, "days"), moment().subtract(1, "days")]
+      } else if (time == 'yesterday') {
+        this.rangeDate = [moment().subtract(1, "days"), moment().subtract(1, "days")]
+      } else if (time == 'today') {
+        this.rangeDate = [moment(), moment()]
+      }
+      this.reloadData();
+    },
+
+    changeSite(value, e) {
+      this.selectSiteInfo = e.data.attrs.info
+      this.queryParam.siteId = this.selectSiteInfo.id;
+      this.reloadData(this.queryParam.siteId)
+    },
+
+    //重新刷新页面数据
+    reloadData(value) {
+      this.loading = true;
+      for (let i in this.siteList){
+        if(value === this.siteList[i].id){
+          localStorage.setItem("siteCode",this.siteList[i].code)
+        }
+      }
+      this.getFlowIndexNumber();
+      this.getCountryMapData();
+      this.getMediaList();
+      this.getMostAccessList();
+    },
+    // ========================================== 访客量、浏览量、询盘数量、折线图以及统计 ==========================================
+    getFlowIndexNumber() {
+      let that = this;
+      getAction('/datacenter/flow/number', this.queryParam).then(function (res) {
+        if (!res.result) {
+          that.flowIndexNums = {
+            uv: 0,
+            pv: 0,
+            enquiry: 0
+          };
+          that.coreDataChart = {
+            x: [],
+            uv: [],
+            pv: [],
+            enquiry: []
+          };
+          that.statistics = {
+            averageVisit: 0,
+            averageVisitDuration: 0,
+            averageVisitPage: 0,
+            bounceRate: "0%",
+            conversionRate: "0%"
+          };
+          that.loading = false;
+          return;
+        }
+
+        that.flowIndexNums = res.result.flowIndexNumber;
+        let r = res.result.dailyTrends;
+        let x = [], pv = [], uv = [], enquiry = [];
+        if (r != null && r.length > 0) {
+          for (let item of r) {
+            x.push(item.date)
+            pv.push(item.pvCount)
+            uv.push(item.uvCount)
+            enquiry.push(item.enquiryCount)
+          }
+        }
+        that.coreDataChart.x = x
+        that.coreDataChart.pv = pv
+        that.coreDataChart.uv = uv
+        that.coreDataChart.enquiry = enquiry
+
+        that.statistics = res.result.statistics;
+        that.loading = false;
+      });
+    },
+    // ========================================== 访客数地域分布 ==========================================
+    getCountryMapData() {
+      let that = this;
+      that.countryMapData = [];
+      that.chartDetailData = [];
+      getAction('/datacenter/region/map', this.queryParam).then(function (res) {
+        if (res.code == 200) {
+          that.countryMapData = res.result.accessMap;
+          that.chartDetailData = res.result.accessList;
+        }
+        console.log("countryMapData", that.countryMapData);
+      })
+    },
+    // ========================================== 来源媒介列表、最多访问top10列表 ==========================================
+    getMediaList() {
+      let that = this;
+      getAction('/datacenter/sourcemedia/list', this.queryParam).then(function (res) {
+        if (res.code == 200) {
+          that.mediaDatasource = res.result;
+        } else {
+          that.mediaDatasource = [];
+        }
+      })
+    },
+    getMostAccessList() {
+      let that = this;
+      getAction('/datacenter/mostaccess/list', this.queryParam).then(function (res) {
+        if (res.code == 200) {
+          that.mostAccessDatasource = res.result;
+        } else {
+          that.mostAccessDatasource = [];
+        }
+      })
+    },
+
+
+  }
+}
+</script>
+
+
+<!-- 通用样式 -->
+<style scoped>
+</style>
+
+
+<!-- 询盘页面的样式 -->
+<style lang="less" scoped>
+
+.img-box {
+  width: 22px;
+  height: 15px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.ant-alert {
+  /deep/ .ant-btn {
+    border-radius: 0;
+    margin-left: 10px;
+  }
+}
+
+.theme-color {
+  color: @primary-color;
+}
+
+.r1 {
+  .choose-site {
+    display: flex;
+
+    /deep/ .ant-select-selection {
+      background: transparent;
+      color: #fff;
+    }
+
+    /deep/ .ant-select-selection__clear {
+      background: transparent;
+    }
+
+    /deep/ i, /deep/ .ant-calendar-range-picker-separator {
+      color: #fff;
+    }
+  }
+
+  .t1 {
+    font-size: 18px;
+    color: #fff;
+  }
+
+  .ant-calendar-picker {
+    margin-right: 20px;
+
+    /deep/ .ant-input {
+      background: transparent;
+      color: #e2e2e2;
+    }
+  }
+
+  /deep/ .ant-btn {
+    background: transparent;
+    color: #e2e2e2;
+    margin-right: 10px;
+
+    &.active {
+      background: #fff;
+      border-color: #fff;
+      color: @primary-color;
+    }
+  }
+}
+
+.r2 {
+  background: #fff;
+  border-radius: 10px;
+  padding: 30px 20px;
+
+  .ant-col:not(:last-child) {
+    border-right: 1px solid #e6e6e6;
+  }
+
+  p {
+    margin: 0;
+    text-align: center;
+
+    &.t1 {
+      color: #333;
+      margin-bottom: 15px;
+
+      img {
+        margin-right: 10px;
+        width: 15px;
+        margin-top: -5px;
+      }
+    }
+
+    &.t2 {
+      color: @primary-color;
+      font-size: 30px;
+      font-weight: 500;
+      line-height: 1;
+      padding-left: 25px;
+    }
+
+    &.t3 {
+      font-size: 30px;
+      font-weight: 500;
+      line-height: 1;
+      padding-left: 25px;
+    }
+  }
+}
+
+.r3 {
+  margin-top: 20px;
+}
+
+.r4 {
+  margin-top: 20px;
+
+  /deep/ .ant-table-tbody {
+    background: #fff;
+  }
+
+  /deep/ .ant-table-tbody > tr > td {
+    border-bottom: 1px solid #f7f7f7;
+  }
+}
+</style>
+
+
+<!-- 首页的样式 -->
+<style scoped lang="less">
+p, span {
+  color: #000;
+  margin: 0;
+}
+
+.theme-color {
+  color: @primary-color;
+}
+
+.title {
+  font-size: 18px;
+  color: #000;
+}
+
+//@import '../../dashboard/less/home2-7.less';
+//@import "../../../assets/less/flags.css";
+</style>
+<style lang="less">
+.pop-wrap {
+  .ant-popover-inner-content {
+    padding: 0;
+  }
+
+  .wrap {
+    width: 400px;
+    padding: 20px 20px;
+    background: url("../../../assets/home2-7/pop-bg.svg") no-repeat;
+    background-position: bottom right;
+
+    p {
+      line-height: 1.8;
+
+      i {
+        color: @primary-color;
+        margin-right: 10px;
+      }
+    }
+
+    .name {
+      font-size: 18px;
+      margin-bottom: 20px;
+    }
+
+    .job {
+      font-size: 15px;
+      color: #9f9f9f;
+    }
+
+    .ant-col-8 {
+      text-align: right;
+    }
+  }
+}
+</style>

src/views/adweb/seo/SeoKeywordsRankList.vue

@@ -1096,14 +1096,12 @@ export default {
 
 <style lang="less" scoped>
 .r1 {
-  color: #fff;
 
   .ant-select {
     color: #fff;
   }
 
   .t1 {
-    color: @primary-color;
     font-size: 18px;
     margin-right: 5px;
   }