访客页面

src/views/system/visitor/index.vue

@@ -18,15 +18,88 @@
     <div class="right_visitor">
       <div class="flex_spection">
         <HeadlineTag type="right" value="园区基本信息"></HeadlineTag>
+        <div class="card_visitor_star">
+          <div class="item_visitor_top">
+            <div class="circle_itor center_in">
+              <svg class="visitor_star" aria-hidden="true">
+                <defs>
+                  <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                    <stop offset="0%" stop-color="rgb(20, 188, 244)" />
+                    <stop offset="100%" stop-color="#ffffff" />
+                  </linearGradient>
+                </defs>
+                <use xlink:href="#icon-user" fill="url('#myGradient')" />
+              </svg>
+            </div>
+            <div class="title_box_itor">
+              <div class="title_itor_13">总规划建筑面积</div>
+              <div class="title_itor_18">142万</div>
+            </div>
+          </div>
+          <div class="item_visitor_top">
+            <div class="circle_itor center_in">
+              <svg class="visitor_star" aria-hidden="true">
+                <defs>
+                  <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                    <stop offset="0%" stop-color="rgb(20, 188, 244)" />
+                    <stop offset="100%" stop-color="#ffffff" />
+                  </linearGradient>
+                </defs>
+                <use xlink:href="#icon-user" fill="url('#myGradient')" />
+              </svg>
+            </div>
+            <div class="title_box_itor">
+              <div class="title_itor_13">总规划建筑面积</div>
+              <div class="title_itor_18">142万</div>
+            </div>
+          </div>
+          <div class="item_visitor_top">
+            <div class="circle_itor center_in">
+              <svg class="visitor_star" aria-hidden="true">
+                <defs>
+                  <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                    <stop offset="0%" stop-color="rgb(20, 188, 244)" />
+                    <stop offset="100%" stop-color="#ffffff" />
+                  </linearGradient>
+                </defs>
+                <use xlink:href="#icon-user" fill="url('#myGradient')" />
+              </svg>
+            </div>
+            <div class="title_box_itor">
+              <div class="title_itor_13">总规划建筑面积</div>
+              <div class="title_itor_18">142万</div>
+            </div>
+          </div>
+          <div class="item_visitor_top">
+            <div class="circle_itor center_in">
+              <svg class="visitor_star" aria-hidden="true">
+                <defs>
+                  <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                    <stop offset="0%" stop-color="rgb(20, 188, 244)" />
+                    <stop offset="100%" stop-color="#ffffff" />
+                  </linearGradient>
+                </defs>
+                <use xlink:href="#icon-user" fill="url('#myGradient')" />
+              </svg>
+            </div>
+            <div class="title_box_itor">
+              <div class="title_itor_13">总规划建筑面积</div>
+              <div class="title_itor_18">142万</div>
+            </div>
+          </div>
+        </div>
       </div>
       <div class="flex_spection">
-        <HeadlineTag type="right" value="园区基本信息"></HeadlineTag>
+        <HeadlineTag type="right" value="访客统计"></HeadlineTag>
         <div class="box_arch">
           <starView></starView>
         </div>
       </div>
       <div class="flex_spection">
-        <HeadlineTag type="right" value="园区基本信息"></HeadlineTag>
+        <HeadlineTag type="right" value="外地人员分配"></HeadlineTag>
+        <div class="box_arch">
+          <div ref="chartDom" style="width: 100%;height: 100%;" />
+        </div>
       </div>
     </div>
   </div>
@@ -46,6 +119,201 @@ const input = ref('')
 /** 查询列表 */
 function getList() {
 };
+
+const chartDom = ref(null);
+let chartInstance = null;
+// 初始化图表
+const initChart = () => {
+  var colorList = [{
+    type: 'linear',
+    x: 0,
+    y: 0,
+    x2: 1,
+    y2: 1,
+    colorStops: [{
+      offset: 0,
+      color: 'rgba(51,192,205,0.01)' // 0% 处的颜色
+    },
+    {
+      offset: 1,
+      color: 'rgba(51,192,205,0.57)' // 100% 处的颜色
+    }
+    ],
+    globalCoord: false // 缺省为 false
+  },
+  {
+    type: 'linear',
+    x: 1,
+    y: 0,
+    x2: 0,
+    y2: 1,
+    colorStops: [{
+      offset: 0,
+      color: 'rgba(115,172,255,0.02)' // 0% 处的颜色
+    },
+    {
+      offset: 1,
+      color: 'rgba(115,172,255,0.67)' // 100% 处的颜色
+    }
+    ],
+    globalCoord: false // 缺省为 false
+  },
+  {
+    type: 'linear',
+    x: 1,
+    y: 0,
+    x2: 0,
+    y2: 0,
+    colorStops: [{
+      offset: 0,
+      color: 'rgba(158,135,255,0.02)' // 0% 处的颜色
+    },
+    {
+      offset: 1,
+      color: 'rgba(158,135,255,0.57)' // 100% 处的颜色
+    }
+    ],
+    globalCoord: false // 缺省为 false
+  },
+  {
+    type: 'linear',
+    x: 0,
+    y: 1,
+    x2: 0,
+    y2: 0,
+    colorStops: [{
+      offset: 0,
+      color: 'rgba(252,75,75,0.01)' // 0% 处的颜色
+    },
+    {
+      offset: 1,
+      color: 'rgba(252,75,75,0.57)' // 100% 处的颜色
+    }
+    ],
+    globalCoord: false // 缺省为 false
+  },
+  {
+    type: 'linear',
+    x: 1,
+    y: 1,
+    x2: 1,
+    y2: 0,
+    colorStops: [{
+      offset: 0,
+      color: 'rgba(253,138,106,0.01)' // 0% 处的颜色
+    },
+    {
+      offset: 1,
+      color: '#FDB36ac2' // 100% 处的颜色
+    }
+    ],
+    globalCoord: false // 缺省为 false
+  },
+  {
+    type: 'linear',
+    x: 0,
+    y: 0,
+    x2: 1,
+    y2: 0,
+    colorStops: [{
+      offset: 0,
+      color: 'rgba(254,206,67,0.12)' // 0% 处的颜色
+    },
+    {
+      offset: 1,
+      color: '#FECE4391' // 100% 处的颜色
+    }
+    ],
+    globalCoord: false // 缺省为 false
+  }
+  ]
+  var colorLine = ['#33C0CD', '#73ACFF', '#9E87FF', '#FE6969', '#FDB36A', '#FECE43']
+
+  function getRich() {
+    let result = {}
+    colorLine.forEach((v, i) => {
+      result[`hr${i}`] = {
+        backgroundColor: colorLine[i],
+        borderRadius: 3,
+        width: 3,
+        height: 3,
+        padding: [3, 3, 0, -12]
+      }
+      result[`a${i}`] = {
+        padding: [-11, 6, -20, 6],
+        color: colorLine[i],
+        backgroundColor: 'transparent',
+        fontSize: 12
+      }
+    })
+    return result
+  }
+  let data = [{
+    'name': '北京',
+    'value': 25
+  }, {
+    'name': '上海',
+    'value': 20
+  }, {
+    'name': '广州',
+    'value': 18
+  }, {
+    'name': '深圳',
+    'value': 15
+  }, {
+    'name': '未知',
+    'value': 13
+  }, {
+    'name': '海外',
+    'value': 9
+  }].sort((a, b) => {
+    return b.value - a.value
+  })
+  data.forEach((v, i) => {
+    v.labelLine = {
+      lineStyle: {
+        width: 1,
+        color: colorLine[i]
+      }
+    }
+  })
+  chartInstance = echarts.init(chartDom.value);
+  chartInstance.setOption({
+    series: [{
+      type: 'pie',
+      radius: '60%',
+      center: ['50%', '45%'],
+      clockwise: true,
+      avoidLabelOverlap: true,
+      label: {
+        show: true,
+        position: 'outside',
+        formatter: function (params) {
+          const name = params.name
+          const percent = params.percent + '%'
+          const index = params.dataIndex
+          return [`{a${index}|${name}:${percent}}`, `{hr${index}|}`].join('\n')
+        },
+        rich: getRich()
+      },
+      itemStyle: {
+        normal: {
+          color: function (params) {
+            return colorList[params.dataIndex]
+          }
+        }
+      },
+      data,
+      roseType: 'radius'
+    }]
+  });
+};
+// 生命周期
+onMounted(initChart);
+// 窗口自适应
+window.addEventListener('resize', () => {
+  chartInstance?.resize();
+});
 </script>
 
 <style scoped lang="scss">
@@ -112,4 +380,53 @@ function getList() {
 .point_box :deep(.el-input__inner) {
   color: #ffffff !important;
 }
+
+.card_visitor_star {
+  height: calc(100% - 40px);
+  display: flex;
+  flex-direction: column;
+}
+
+.item_visitor_top {
+  flex: 1;
+  margin: 10px 0px;
+  padding-left: 20px;
+  display: flex;
+  align-items: center;
+  border-left: 2px solid rgb(67, 182, 235);
+  background-image: linear-gradient(to right, rgba(15, 73, 138, 1) 0%, rgba(13, 65, 125, 0.5) 21%, rgba(13, 65, 125, 0.5) 52%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0) 100%);
+}
+
+.circle_itor {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  border: 2px solid rgb(103, 168, 202);
+}
+
+.title_box_itor {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-left: 20px;
+}
+
+.title_itor_13 {
+  font-size: 13px;
+}
+
+.title_itor_18 {
+  padding-top: 10px;
+  font-weight: bold;
+  font-size: 18px;
+  background-image: -webkit-linear-gradient(bottom, rgb(20, 127, 228), rgb(229, 232, 236));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+
+.visitor_star {
+  width: 30px;
+  height: 30px;
+}
 </style>

src/views/system/visitor/starView.vue

@@ -2,14 +2,76 @@
     <div className='wrap'>
         <div className='planet'>
             <div className='top_ball center_in'>
+                <svg class="arch_icon_star" aria-hidden="true">
+                    <defs>
+                        <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                            <stop offset="0%" stop-color="rgb(20, 188, 244)" />
+                            <stop offset="100%" stop-color="#ffffff" />
+                        </linearGradient>
+                    </defs>
+                    <use xlink:href="#icon-user" fill="url('#myGradient')" />
+                </svg>
                 <div class="text_star_title">
-                    <span>测试</span>
-                    <span>33</span>
+                    <span class="circle_title_box">测试</span>
+                    <span class="circle_num_star">33</span>
+                </div>
+            </div>
+            <div className='right_ball center_in'>
+                <svg class="arch_icon_star" aria-hidden="true">
+                    <defs>
+                        <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                            <stop offset="0%" stop-color="rgb(20, 188, 244)" />
+                            <stop offset="100%" stop-color="#ffffff" />
+                        </linearGradient>
+                    </defs>
+                    <use xlink:href="#icon-guide" fill="url('#myGradient')" />
+                </svg>
+                <div class="text_star_title">
+                    <span class="circle_title_box">测试</span>
+                    <span class="circle_num_star">33</span>
+                </div>
+            </div>
+            <div className='bottom_ball center_in'>
+                <svg class="arch_icon_star" aria-hidden="true">
+                    <defs>
+                        <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                            <stop offset="0%" stop-color="rgb(20, 188, 244)" />
+                            <stop offset="100%" stop-color="#ffffff" />
+                        </linearGradient>
+                    </defs>
+                    <use xlink:href="#icon-park" fill="url('#myGradient')" />
+                </svg>
+                <div class="text_star_title">
+                    <span class="circle_title_box">测试</span>
+                    <span class="circle_num_star">33</span>
+                </div>
+            </div>
+            <div className='left_ball center_in'>
+                <svg class="arch_icon_star" aria-hidden="true">
+                    <defs>
+                        <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                            <stop offset="0%" stop-color="rgb(20, 188, 244)" />
+                            <stop offset="100%" stop-color="#ffffff" />
+                        </linearGradient>
+                    </defs>
+                    <use xlink:href="#icon-work" fill="url('#myGradient')" />
+                </svg>
+                <div class="text_star_title">
+                    <span class="circle_title_box">测试</span>
+                    <span class="circle_num_star">33</span>
                 </div>
             </div>
-            <div className='right_ball center_in'>2</div>
-            <div className='bottom_ball center_in'>3</div>
-            <div className='left_ball center_in'>4</div>
+        </div>
+        <div class="middle_circle">
+            <div class="flex_column">
+                <span class="num_circle orange_color_cir">2324</span>
+                <span class="num_circle_11 orange_color_cir">测试</span>
+            </div>
+            <div class="cir_star"></div>
+            <div class="flex_column">
+                <span class="num_circle blue_color_cir">4599</span>
+                <span class="num_circle_11 blue_color_cir">测试</span>
+            </div>
         </div>
     </div>
 </template>
@@ -28,8 +90,8 @@
 
 .planet {
     position: absolute;
-    border-top: 3px solid rgb(22, 110, 191);
-    border-bottom: 3px solid rgb(22, 110, 191);
+    border-top: 3px solid rgb(156, 192, 218);
+    border-bottom: 3px solid rgb(156, 192, 218);
     background: radial-gradient(circle,
             rgba(51, 149, 233, 0) 100px,
             rgba(51, 149, 233, 0) 100px);
@@ -41,13 +103,64 @@
     animation: planet-rotate 20s linear infinite;
 }
 
+.middle_circle {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    width: 90px;
+    height: 90px;
+    border-radius: 50%;
+    top: calc(50% - 28px);
+    border: 1px solid rgb(156, 192, 218);
+    background: radial-gradient(circle, rgba(0, 0, 0, 0), rgba(30, 144, 255, 0.7));
+    border-radius: 50%;
+    box-shadow: 0 0 20px 13px rgba(30, 144, 255, 0.5);
+}
+
+.flex_column {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.cir_star {
+    width: 70%;
+    height: 1px;
+    background-color: rgb(96, 154, 197);
+    margin: 3px 0px;
+}
+
+.num_circle {
+    font-size: 15px;
+    font-weight: bold;
+}
+
+.num_circle_11 {
+    font-size: 10px;
+}
+
 .text_star_title {
     position: absolute;
-    right: -40px;
+    right: -45px;
     display: flex;
     flex-direction: column;
 }
 
+.circle_title_box {
+    font-size: 17px;
+    font-weight: bold;
+    background-image: -webkit-linear-gradient(bottom, rgb(193, 148, 78), rgb(229, 232, 236));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.circle_num_star {
+    font-size: 14px;
+    color: #DCDFE6;
+}
+
 .top_ball {
     width: 50px;
     height: 50px;
@@ -59,6 +172,7 @@
     top: -25px;
     transform: rotateZ(-15deg) scaleY(2);
     animation: self-rotate 20s linear infinite;
+    border: 1px solid rgb(156, 192, 218);
 }
 
 .right_ball {
@@ -72,6 +186,7 @@
     top: calc(50% - 25px);
     transform: rotateZ(-15deg) scaleY(2);
     animation: self-rotate 20s linear infinite;
+    border: 1px solid rgb(156, 192, 218);
 }
 
 .bottom_ball {
@@ -85,6 +200,7 @@
     left: calc(50% - 25px);
     transform: rotateZ(-15deg) scaleY(2);
     animation: self-rotate 20s linear infinite;
+    border: 1px solid rgb(156, 192, 218);
 }
 
 .left_ball {
@@ -98,6 +214,7 @@
     top: calc(50% - 25px);
     transform: rotateZ(-15deg) scaleY(2);
     animation: self-rotate 20s linear infinite;
+    border: 1px solid rgb(156, 192, 218);
 }
 
 @keyframes planet-rotate {
@@ -119,4 +236,21 @@
         transform: rotate(-360deg) scaleY(2) rotate(-15deg);
     }
 }
+
+.arch_icon_star {
+    width: 25px;
+    height: 25px;
+}
+
+.orange_color_cir {
+    background-image: -webkit-linear-gradient(bottom, rgb(193, 148, 78), rgb(229, 232, 236));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.blue_color_cir {
+    background-image: -webkit-linear-gradient(bottom, rgb(20, 127, 228), rgb(229, 232, 236));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
 </style>