访客

src/views/index/reightDesk.vue

@@ -14,7 +14,7 @@
             </div>
         </div>
         <div class="flex_home">
-            <HeadlineTag value="诉求统计"></HeadlineTag>
+            <HeadlineTag type="right" value="诉求统计"></HeadlineTag>
             <div class="box_arch card_appeal">
                 <div class="appeal_box">
                     <div class="image_architecture">
@@ -63,7 +63,7 @@
             </div>
         </div>
         <div class="flex_home">
-            <HeadlineTag value="停车系统"></HeadlineTag>
+            <HeadlineTag type="right" value="停车系统"></HeadlineTag>
             <div class="box_arch">
                 <div class="box_vehicle">
                     <div class="color-green-line"></div>
@@ -78,7 +78,7 @@
             </div>
         </div>
         <div class="flex_home">
-            <HeadlineTag value="报警统计(本周)"></HeadlineTag>
+            <HeadlineTag type="right" value="报警统计(本周)"></HeadlineTag>
             <div class="box_arch">
                 <LineChart></LineChart>
             </div>

src/views/system/inspection/index.vue

@@ -17,7 +17,7 @@
     </div>
     <div class="right_spection">
       <div class="operation_spection">
-        <HeadlineTag value="运行统计"></HeadlineTag>
+        <HeadlineTag type="right" value="运行统计"></HeadlineTag>
         <div class="box_arch">
           <div class="image_tubbiness">
             <div class="work_num">3714<span>个</span></div>
@@ -40,13 +40,13 @@
         </div>
       </div>
       <div class="flex_spection">
-        <HeadlineTag value="巡检统计"></HeadlineTag>
+        <HeadlineTag type="right" value="巡检统计"></HeadlineTag>
         <div class="box_arch">
           <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
         </div>
       </div>
       <div class="flex_spection">
-        <HeadlineTag value="实时巡检"></HeadlineTag>
+        <HeadlineTag type="right" value="实时巡检"></HeadlineTag>
         <div class="box_arch">
           <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
         </div>

src/views/system/intruderalarm/index.vue

@@ -26,7 +26,7 @@
         </div>
         <div class="right_spection">
             <div class="operation_spection">
-                <HeadlineTag value="24小时告警数量趋势"></HeadlineTag>
+                <HeadlineTag type="right" value="24小时告警数量趋势"></HeadlineTag>
                 <div class="entry">
                     <div class="entry-box">
                         <div class="entry-box-item">
@@ -48,13 +48,13 @@
                 </div>
             </div>
             <div class="flex_spection">
-                <HeadlineTag value="24小时告警数量趋势"></HeadlineTag>
+                <HeadlineTag type="right" value="24小时告警数量趋势"></HeadlineTag>
                 <div class="box_arch">
                     <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
                 </div>
             </div>
             <div class="flex_spection">
-                <HeadlineTag value="实时巡检"></HeadlineTag>
+                <HeadlineTag type="right" value="实时巡检"></HeadlineTag>
                 <div class="box_arch">
                     <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
                 </div>

src/views/system/passageway/index.vue

@@ -17,13 +17,13 @@
     </div>
     <div class="right_spection">
       <div class="flex_spection">
-        <HeadlineTag value="设备排名"></HeadlineTag>
+        <HeadlineTag type="right" value="设备排名"></HeadlineTag>
         <div class="box_arch">
           <div ref="chartRouting" style="width: 100%;height: 100%;"></div>
         </div>
       </div>
       <div class="operation_spection">
-        <HeadlineTag value="监控设备"></HeadlineTag>
+        <HeadlineTag type="right" value="监控设备"></HeadlineTag>
         <div class="box_arch">
           <dv-border-box-1>
             <div class="box_monitoring">
@@ -65,13 +65,13 @@
         </div>
       </div>
       <div class="flex_spection">
-        <HeadlineTag value="实时巡检"></HeadlineTag>
+        <HeadlineTag type="right" value="实时巡检"></HeadlineTag>
         <div class="box_arch">
           <dv-scroll-board :config="config" style="width:100%;height:calc(100% - 10px);margin-top: 10px;" />
         </div>
       </div>
       <div class="flex_spection">
-        <HeadlineTag value="出入人员统计"></HeadlineTag>
+        <HeadlineTag type="right" value="出入人员统计"></HeadlineTag>
         <div class="box_arch">
           <Personnel></Personnel>
         </div>

src/views/system/passengerFlow/index.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <div style="width: 400px;padding-top: 50px;">
+      <HeadlineTag value="客流系统passengerFlow"></HeadlineTag>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import HeadlineTag from '@/components/HeadlineTag'
+const type = 'right'
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/views/system/receptiondesk/index.vue

@@ -2,6 +2,19 @@
   <div>
     <div style="width: 400px;padding-top: 50px;">
       <HeadlineTag value="会议系统"></HeadlineTag>
+      <div className='wrap'>
+        <div className='planet'>
+          <div className='top_ball center_in'>
+            <div>
+              <span>测试</span>
+              <span>123</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>
     </div>
   </div>
 </template>
@@ -12,5 +25,90 @@ const type = 'right'
 </script>
 
 <style scoped lang="scss">
+.wrap {
+  display: flex;
+  width: 600px;
+  height: 600px;
+  align-items: center;
+  justify-content: center;
+}
 
+.planet {
+  position: absolute;
+  border: 2px solid #fff;
+  transform-style: preserve-3d;
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  transform: scaleY(0.5) rotateZ(198deg);
+  animation: planet-rotate 20s linear infinite;
+}
+
+.top_ball {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  border-radius: 50%;
+  background-color: yellowgreen;
+  left: calc(50% - 25px);
+  top: -25px;
+  transform: rotateZ(-198deg) scaleY(2);
+  animation: self-rotate 20s linear infinite;
+}
+
+.right_ball {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  border-radius: 50%;
+  background-color: yellowgreen;
+  right: -25px;
+  top: calc(50% - 25px);
+  transform: rotateZ(-198deg) scaleY(2);
+  animation: self-rotate 20s linear infinite;
+}
+
+.bottom_ball {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  border-radius: 50%;
+  background-color: yellowgreen;
+  bottom: -25px;
+  left: calc(50% - 25px);
+  transform: rotateZ(-198deg) scaleY(2);
+  animation: self-rotate 20s linear infinite;
+}
+
+.left_ball {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  border-radius: 50%;
+  background-color: yellowgreen;
+  left: -25px;
+  top: calc(50% - 25px);
+  transform: rotateZ(-198deg) scaleY(2);
+  animation: self-rotate 20s linear infinite;
+}
+
+@keyframes planet-rotate {
+  0% {
+    transform: rotate(198deg) scaleY(0.5) rotate(0);
+  }
+
+  100% {
+    transform: rotate(198deg) scaleY(0.5) rotate(360deg);
+  }
+}
+
+@keyframes self-rotate {
+  0% {
+    transform: rotate(0) scaleY(2) rotate(-198deg);
+  }
+
+  100% {
+    transform: rotate(-360deg) scaleY(2) rotate(-198deg);
+  }
+}
 </style>

src/views/system/visitor/index.vue

@@ -0,0 +1,183 @@
+<template>
+  <div class="visitor">
+    <div class="left_visitor">
+      <HeadlineTag value="访客列表"></HeadlineTag>
+      <div class="box_arch_point">
+        <div class="point_box" style="margin-top: 10px;">
+          <el-input v-model="input" placeholder="按访客名称搜索" />
+        </div>
+        <div style="height: calc(100% - 160px);">
+          <Empty></Empty>
+        </div>
+        <div class="center_in">
+          <pagination :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
+            layout="total, prev, pager, next" @pagination="getList" />
+        </div>
+      </div>
+    </div>
+    <div class="right_visitor">
+      <div class="flex_spection">
+        <HeadlineTag type="right" value="园区基本信息"></HeadlineTag>
+      </div>
+      <div class="flex_spection">
+        <HeadlineTag type="right" value="园区基本信息"></HeadlineTag>
+        <div class="box_arch">
+          <starView></starView>
+        </div>
+      </div>
+      <div class="flex_spection">
+        <HeadlineTag type="right" value="园区基本信息"></HeadlineTag>
+        <div class="camera">
+
+          <div class="entry-box">
+            <div class="entry-box-item">
+              <div class="item-center-line"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import HeadlineTag from '@/components/HeadlineTag'
+import Empty from '@/components/Empty'
+import starView from './starView'
+import * as echarts from 'echarts'
+const total = ref(0);
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 10,
+});
+const input = ref('')
+/** 查询列表 */
+function getList() {
+};
+</script>
+
+<style scoped lang="scss">
+.visitor {
+  position: relative;
+  width: 100%;
+  padding-top: 45px;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.left_visitor {
+  position: absolute;
+  left: 0;
+  width: 25%;
+  // height: calc(100% - 45px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  padding-left: 10px;
+}
+
+.right_visitor {
+  position: absolute;
+  right: 0;
+  width: 25%;
+  // height: calc(100% - 45px);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.box_arch_point {
+  height: calc(100% - 40px);
+}
+
+.operation_spection {
+  height: 250px;
+  color: #fff;
+}
+
+.flex_spection {
+  flex: 1;
+  color: #fff;
+}
+
+.box_arch {
+  display: flex;
+  align-items: center;
+  height: calc(100% - 40px);
+}
+
+.camera {
+  width: 190px;
+  height: 100%;
+  display: flex;
+  position: relative;
+
+  .entry-box {
+    width: 100%;
+    height: 100%;
+    object-fit: fill;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .entry-box-item {
+    width: 100%;
+    height: 180px;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    background: radial-gradient(circle,
+        rgba(51, 149, 233, 0) 100px,
+        rgba(51, 149, 233, 0) 100px);
+
+    .item-center-line {
+      width: 180px;
+      height: 180px;
+      background-color: transparent;
+      border-top: 3px solid rgb(22, 110, 191);
+      border-bottom: 3px solid rgb(22, 110, 191);
+      border-radius: 50%;
+      box-sizing: border-box;
+      position: absolute;
+      top: calc(50% - 90px);
+      left: calc(50% - 90px);
+      animation: rotate 8s infinite linear;
+    }
+
+    .item-center-pie {
+      width: 150px;
+      height: 150px;
+      background-color: transparent;
+      border-top: 2px solid rgb(22, 110, 191);
+      border-bottom: 2px solid rgb(22, 110, 191);
+      border-radius: 50%;
+      box-sizing: border-box;
+      position: absolute;
+      top: calc(50% - 75px);
+      left: calc(50% - 75px);
+      animation: rotate1 8s infinite linear;
+    }
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.point_box :deep(.el-input__wrapper) {
+  background-color: transparent !important;
+  box-shadow: 0 0 0 1px rgb(58, 86, 117) inset !important;
+}
+
+.point_box :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px #409EFF inset !important;
+}
+
+.point_box :deep(.el-input__inner) {
+  color: #ffffff !important;
+}
+</style>

src/views/system/visitor/starView.vue

@@ -0,0 +1,116 @@
+<template>
+    <div className='wrap'>
+        <div className='planet'>
+            <div className='top_ball center_in'>
+                <div class="text_star_title">
+                    <span>测试</span>
+                    <span>123</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>
+</template>
+
+<script setup>
+</script>
+
+<style scoped lang="scss">
+.wrap {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.planet {
+    position: absolute;
+    border: 2px solid #fff;
+    transform-style: preserve-3d;
+    width: 280px;
+    height: 280px;
+    border-radius: 50%;
+    transform: scaleY(0.5) rotateZ(15deg);
+    animation: planet-rotate 20s linear infinite;
+}
+.text_star_title{
+    position: absolute;
+    right: -40px;
+    display: flex;
+    flex-direction: column;
+}
+.top_ball {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgb(9, 29, 56);
+    box-shadow: inset 0px 0px 10px 2px rgb(20, 127, 228);
+    left: calc(50% - 25px);
+    top: -25px;
+    transform: rotateZ(-15deg) scaleY(2);
+    animation: self-rotate 20s linear infinite;
+}
+
+.right_ball {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgb(9, 29, 56);
+    box-shadow: inset 0px 0px 10px 2px rgb(20, 127, 228);
+    right: -25px;
+    top: calc(50% - 25px);
+    transform: rotateZ(-15deg) scaleY(2);
+    animation: self-rotate 20s linear infinite;
+}
+
+.bottom_ball {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgb(9, 29, 56);
+    box-shadow: inset 0px 0px 10px 2px rgb(20, 127, 228);
+    bottom: -25px;
+    left: calc(50% - 25px);
+    transform: rotateZ(-15deg) scaleY(2);
+    animation: self-rotate 20s linear infinite;
+}
+
+.left_ball {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    border-radius: 50%;
+    background-color: rgb(9, 29, 56);
+    box-shadow: inset 0px 0px 10px 2px rgb(20, 127, 228);
+    left: -25px;
+    top: calc(50% - 25px);
+    transform: rotateZ(-15deg) scaleY(2);
+    animation: self-rotate 20s linear infinite;
+}
+
+@keyframes planet-rotate {
+    0% {
+        transform: rotate(15deg) scaleY(0.5) rotate(0);
+    }
+
+    100% {
+        transform: rotate(15deg) scaleY(0.5) rotate(360deg);
+    }
+}
+
+@keyframes self-rotate {
+    0% {
+        transform: rotate(0) scaleY(2) rotate(-15deg);
+    }
+
+    100% {
+        transform: rotate(-360deg) scaleY(2) rotate(-15deg);
+    }
+}
+</style>