旅客屏

src/assets/svg/arrow_3.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame">
+<path id="Vector" d="M6.66797 5.87716V14.5438C6.66797 14.9138 6.96931 15.2105 7.34131 15.2105H8.66131C8.74941 15.2114 8.83682 15.1948 8.91848 15.1617C9.00013 15.1286 9.07441 15.0796 9.13703 15.0176C9.19964 14.9556 9.24934 14.8818 9.28326 14.8005C9.31718 14.7192 9.33464 14.6319 9.33464 14.5438V5.87716H10.662C11.4 5.87716 11.6433 5.39983 11.202 4.81049L8.80131 1.61049C8.35597 1.01716 7.64331 1.02116 7.20131 1.61049L4.80131 4.81049C4.35597 5.40383 4.60131 5.87716 5.34064 5.87716H6.66797Z"/>
+</g>
+</svg>

src/router/index.ts

@@ -10,7 +10,7 @@ import {toLogin} from "@/utils/permissions";
 const routes = [
     ...staticRouter,
     { path: '/:pathMatch(.*)*', name: 'NotFound', component: Temp404 },
-    { path: '', redirect: '/web' },
+    { path: '', redirect: '/screen' },
     screenRouter,
 ]
 

src/router/modules/screen.ts

@@ -2,6 +2,7 @@
 export default {
   path: '/screen',
   name: 'eea02f48-479f-48b1-a4a1-0430070e8bee',
+  redirect: '/screen/kouan-run-monitor/guest',
   children: [
     {
       path: 'kouan-run-monitor',

src/style/cus.scss

@@ -288,4 +288,81 @@
 
 .el-notification {
   width: min-content !important;
+}
+
+.el-pagination {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  .el-pagination__total {
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #ffffff;
+  }
+  .el-pagination__sizes {
+    .el-select {
+      .el-select__wrapper {
+        .el-select__selection {
+          .el-select__selected-item {
+          }
+        }
+      }
+    }
+  }
+  .btn-prev, .btn-next {
+    background-color: transparent !important;
+    color: #ffffff !important;
+    margin-left: 0 !important;
+  }
+  .el-pager {
+    gap: 2px;
+    .number {
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #ffffff !important;
+      background-color: transparent !important;
+      min-width: auto;
+      padding: 0;
+      &:hover {
+        color: #19CBD4 !important;
+      }
+      &.is-active {
+        color: #19CBD4 !important;
+      }
+    }
+    .more {
+      background-color: transparent !important;
+      color: #ffffff !important;
+      &:hover {
+        color: #19CBD4 !important;
+      }
+    }
+  }
+  button:hover {
+    color: #19CBD4 !important;
+  }
+  .el-pagination__jump {
+    margin-left: 0;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #ffffff;
+    .el-input {
+      width: auto;
+      .el-input__wrapper {
+        background-color: transparent;
+        padding: 0 !important;
+        .el-input__inner {
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          color: #ffffff;
+        }
+      }
+    }
+  }
 }

src/style/font/font.scss

@@ -3,6 +3,6 @@
   src: url("@/style/font/PingFang Regular.ttf");
 }
 @font-face {
-  font-family: "YouSheBiaoTiHei";
+  font-family: YouSheBiaoTiHei;
   src: url("@/style/font/YOUSHEBIAOTIHEI-2.TTF");
 }

src/views/screen/kouan-run-monitor/components/normal.scss

@@ -11,20 +11,31 @@
     padding: 24px;
     display: flex;
     gap: 24px;
+    overflow: hidden;
     >.__left {
       width: 404px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
     }
     >.__center {
       flex: 1;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
     }
     >.__right {
       width: 404px;
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
     }
   }
 }
 .__block-1 {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
   >.__title {
     height: 45px;
     width: 404px;
@@ -49,6 +60,7 @@
     }
   }
   >.__block-content {
+    overflow: hidden;
     flex: 1;
     background-image: url("@/views/screen/kouan-run-monitor/img/block-bg.png");
     background-size: 100% 100%;
@@ -57,6 +69,7 @@
 .__block-2 {
   display: flex;
   flex-direction: column;
+  overflow: hidden;
   >.__title {
     width: fit-content;
     height: 29px;
@@ -87,9 +100,33 @@
     }
   }
   >.__block-content {
+    overflow: hidden;
     flex: 1;
     background: #122649;
     border: 1px solid #0D3467;
-    padding: 12px;
+  }
+}
+.__buttons {
+  position: absolute;
+  display: flex;
+  right: 0;
+  top: 5px;
+  gap: 6px;
+  >div {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 35px;
+    height: 17px;
+    background-image: url("@/views/screen/kouan-run-monitor/img/button-bg.png");
+    background-size: 100% 100%;
+    font-weight: 400;
+    font-size: 8px;
+    color: #8DC9FA;
+    padding: 0 4px;
+    &.active {
+      background-image: url("@/views/screen/kouan-run-monitor/img/button-bg-active.png");
+      color: rgba(62, 235, 255, 1);
+    }
   }
 }

src/views/screen/kouan-run-monitor/components/pie.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="chart-main" ref="ref_main">
+    <div class="chart-ref" ref="ref_chart"/>
+    <div class="tips">
+      {{totalCpt}}
+      <span>总数量</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {getCurrentInstance, reactive, ref, onMounted, watch, nextTick, computed} from "vue";
+import * as echarts from 'echarts';
+
+const props = defineProps({
+  data: {},
+  color: {},
+})
+const {proxy} = getCurrentInstance()
+const state = reactive({
+  resizeObserver: <any>null,
+  chart: <any>null
+})
+const totalCpt = computed(() => {
+  let total = 0
+  props.data.forEach(v => [
+    total += Number(v.value)
+  ])
+  return total
+})
+const ref_chart = ref();
+const ref_main = ref();
+const initChart = () => {
+  echarts.dispose(ref_chart.value)
+  const chart = echarts.init(ref_chart.value);
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      confine: true
+    },
+    color: props.color,
+    series: [
+      {
+        type: 'pie',
+        center: ['50%', '50%'],
+        radius: ['60%', '80%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: false,
+          position: 'center'
+        },
+        emphasis: {
+          disabled: true
+        },
+        labelLine: {
+          show: false
+        },
+        data: props.data
+      }
+    ]
+  }
+  chart.setOption(option);
+  state.resizeObserver = new ResizeObserver((entries) => {
+    for (const entry of entries) {
+      chart && chart.resize()
+    }
+  })
+  state.resizeObserver.observe(ref_main.value);
+  return chart
+}
+watch(() => props.data, () => {
+  state.chart = initChart()
+})
+onMounted(() => {
+  nextTick(() => {
+    state.chart = initChart()
+  })
+  return () => {
+    state.resizeObserver?.unobserve(ref_main?.value)
+    state.resizeObserver?.disconnect()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.chart-main {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .chart-ref {
+    width: 100%;
+    height: 100%;
+  }
+  .tips {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    font-size: 22px;
+    color: #00FDFD;
+    line-height: 26px;
+    >span {
+      font-weight: 400;
+      font-size: 14px;
+      color: #FFFFFF;
+    }
+  }
+}
+</style>