会议联调

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@element-plus/icons-vue':
         specifier: 2.3.1
         version: 2.3.1(vue@3.4.31)
+      '@jiaminghi/data-view':
+        specifier: ^2.10.0
+        version: 2.10.0
       '@kjgl77/datav-vue3':
         specifier: ^1.7.4
         version: 1.7.4(vue@3.4.31)
@@ -29,6 +32,9 @@ importers:
       echarts:
         specifier: 5.5.1
         version: 5.5.1
+      echarts-gl:
+        specifier: ^2.0.9
+        version: 2.0.9(echarts@5.5.1)
       echarts-liquidfill:
         specifier: ^3.1.0
         version: 3.1.0(echarts@5.5.1)
@@ -292,6 +298,9 @@ packages:
   '@jiaminghi/color@1.1.3':
     resolution: {integrity: sha512-ZY3hdorgODk4OSTbxyXBPxAxHPIVf9rPlKJyK1C1db46a50J0reFKpAvfZG8zMG3lvM60IR7Qawgcu4ZDO3+Hg==}
 
+  '@jiaminghi/data-view@2.10.0':
+    resolution: {integrity: sha512-Cud2MTiMcqc5k2KWabR/svuVQmXHANqURo+yj40370/LdI/gyUJ6LG203hWXEnT1nMCeiv/SLVmxv3PXLScCeA==}
+
   '@jiaminghi/transition@1.1.11':
     resolution: {integrity: sha512-owBggipoHMikDHHDW5Gc7RZYlVuvxHADiU4bxfjBVkHDAmmck+fCkm46n2JzC3j33hWvP9nSCAeh37t6stgWeg==}
 
@@ -704,6 +713,9 @@ packages:
     resolution: {integrity: sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==}
     engines: {node: '>=0.10.0'}
 
+  claygl@1.3.0:
+    resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==}
+
   clipboard@2.0.11:
     resolution: {integrity: sha512-C+0bbOqkezLIsmWSvlsXS0Q0bmkugu7jcfMIACB+RDEntIzQIkdr148we28AfSloQLRdZlYL/QYyrq05j/3Faw==}
 
@@ -875,6 +887,11 @@ packages:
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
+  echarts-gl@2.0.9:
+    resolution: {integrity: sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==}
+    peerDependencies:
+      echarts: ^5.1.2
+
   echarts-liquidfill@3.1.0:
     resolution: {integrity: sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==}
     peerDependencies:
@@ -2267,6 +2284,11 @@ snapshots:
 
   '@jiaminghi/color@1.1.3': {}
 
+  '@jiaminghi/data-view@2.10.0':
+    dependencies:
+      '@babel/runtime': 7.27.0
+      '@jiaminghi/charts': 0.2.18
+
   '@jiaminghi/transition@1.1.11':
     dependencies:
       '@babel/runtime': 7.27.0
@@ -2720,6 +2742,8 @@ snapshots:
       isobject: 3.0.1
       static-extend: 0.1.2
 
+  claygl@1.3.0: {}
+
   clipboard@2.0.11:
     dependencies:
       good-listener: 1.2.2
@@ -2902,6 +2926,12 @@ snapshots:
 
   eastasianwidth@0.2.0: {}
 
+  echarts-gl@2.0.9(echarts@5.5.1):
+    dependencies:
+      claygl: 1.3.0
+      echarts: 5.5.1
+      zrender: 5.6.0
+
   echarts-liquidfill@3.1.0(echarts@5.5.1):
     dependencies:
       echarts: 5.5.1

src/App.vue

@@ -13,4 +13,9 @@ onMounted(() => {
   })
 })
 </script>
-<style lang="scss"></style>
+<style lang="scss">
+@font-face {
+  font-family: mFont;
+  src: url(@/assets/DS-DIGI.ttf);
+}
+</style>

src/api/system/meeting.js

@@ -0,0 +1,12 @@
+import request from '@/utils/request'
+const Url = "http://182.43.247.65:8000"
+
+// 查询会议统计数据
+export function getDataAnalysis(query) {
+    return request({
+        url: '/Conference/dataAnalysis',
+        method: 'get',
+        params: query,
+        baseURL: import.meta.env.DEV ? '/APP' : 'Url',
+    })
+}

src/assets/icons/svg/alarm.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1745723304031" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2015" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><path d="M512.21 63.98c17.04 0 30.84 13.8 30.84 30.9v123.54a30.9 30.9 0 1 1-61.8 0V94.88A31.08 31.08 0 0 1 512.21 63.98zM288.17 896h447.96V608a223.98 223.98 0 1 0-447.96 0v288z m511.98 0h160.08a32.04 32.04 0 0 1 0 64.02H64.19a31.98 31.98 0 1 1 0-64.02H224.21V608a288 288 0 0 1 575.94 0v288z m-3.84-748.38a30.9 30.9 0 0 1 9.06 42.66l-67.2 103.62a30.9 30.9 0 0 1-51.84-33.66l67.32-103.62a30.9 30.9 0 0 1 42.66-9z m192.96 222.6a30.9 30.9 0 0 1-15 40.98l-111.78 52.2a30.9 30.9 0 0 1-26.16-55.98l111.9-52.2a30.96 30.96 0 0 1 41.04 15z m-954.18 0a30.84 30.84 0 0 1 41.04-15l112.02 52.2a31.02 31.02 0 0 1 4.5 53.34 30.78 30.78 0 0 1-30.72 2.58L50.09 411.2a31.02 31.02 0 0 1-15-40.98z m193.02-222.6a30.72 30.72 0 0 1 42.72 9.06l67.2 103.62a30.9 30.9 0 1 1-51.9 33.54L219.05 190.28a30.72 30.72 0 0 1 9.18-42.66h-0.12z m0 0" p-id="2016"></path></svg>

src/assets/icons/svg/fault.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1745723317541" class="icon" viewBox="0 0 1031 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2490" xmlns:xlink="http://www.w3.org/1999/xlink" width="81.5537109375" height="81"><path d="M518 668c-18 0-30-12-30-30L488 392c0-18 12-30 30-30S548 374 548 392l0 246C548 650 536 668 518 668z" p-id="2491"></path><path d="M518 758m-42 0a0.65625 0.65625 0 1 0 84 0 0.65625 0.65625 0 1 0-84 0Z" p-id="2492"></path><path d="M962 932C962 932 962 932 962 932l-900 0c-12 0-18-6-24-18-6-12-6-18 0-30l450-780c12-18 42-18 54 0l450 774c6 6 6 12 6 18C992 920 980 932 962 932zM116 872l798 0L512 182 116 872z" p-id="2493"></path></svg>

src/assets/icons/svg/normal.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1745723315494" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2333" xmlns:xlink="http://www.w3.org/1999/xlink" width="81" height="81"><path d="M880.94299316 995.73073226H143.05700684A29.26940675 29.26940675 0 0 1 114.31784297 965.93108262V173.48310436a29.26940675 29.26940675 0 0 1 28.73916387-29.85267393h193.22050404l35.15510268-85.84632162A28.63311531 28.63311531 0 0 1 397.09636876 41.29355536h229.75423819a28.63311531 28.63311531 0 0 1 25.71677949 16.49055345l35.15510268 73.01444403 193.22050404 12.83187759a29.26940675 29.26940675 0 0 1 28.73916387 29.85267393v792.44797826a29.26940675 29.26940675 0 0 1-28.73916387 29.79964964zM609.14049489 100.94587891h-194.28098978L357.43420163 251.11066141h309.13159674z m243.11635867 102.33687508h-135.79520056l20.62644789 50.58517037a30.48896537 30.48896537 0 0 1 4.98428304 16.80869918 29.26940675 29.26940675 0 0 1-28.7391639 29.79964963H310.93190141a53.02428761 53.02428761 0 0 1-36.32163702-14.15748478A30.86013539 30.86013539 0 0 1 273.39070578 257.31450305l34.14764122-54.03174906h-135.74217627v732.79565471h680.46068283V203.28275399z m-513.54022545 380.50228786a47.29766454 47.29766454 0 0 1 55.25130769 0l89.55802176 69.62088962 161.61802862-183.35798654a47.35068882 47.35068882 0 0 1 55.25130769 0 25.87585234 25.87585234 0 0 1 0 42.94967296l-189.24368248 204.83282303a47.29766454 47.29766454 0 0 1-55.25130768 0l-117.1836756-91.09572611a25.87585234 25.87585234 0 0 1 0-42.94967296z" p-id="2334"></path></svg>

src/components/Dropdown/index.vue

@@ -0,0 +1,167 @@
+<template>
+    <div ref="dropdownRef" class="dropdown">
+        <!-- Dropdown button -->
+        <div class="box_drop" @click="toggleDropdown">
+            <!-- {{ selectedOption }} -->
+            {{ name }}
+            <el-icon class="icon icon-caret" :class="isOpen ? 'down' : ''" color="#ffffff">
+                <CaretBottom />
+            </el-icon>
+        </div>
+        <!-- Dropdown menu -->
+        <transition name="fade">
+            <ul v-if="isOpen" class="dropdown-menu">
+                <li v-for="(option, index) in options" :key="index" @click="selectOption(option)">
+                    {{ option }}
+                </li>
+            </ul>
+        </transition>
+    </div>
+</template>
+
+<script setup>
+let props = defineProps(['options', 'name'])
+// Reactive variables
+const isOpen = ref(false); // Dropdown open/close state
+const selectedOption = ref(props.options[0]); // Currently selected option
+const dropdownRef = ref(null); // Reference to dropdown element
+
+// Toggle dropdown open/close state
+const toggleDropdown = () => {
+    isOpen.value = !isOpen.value;
+};
+let emit = defineEmits(['changeData'])
+// Select an option from the dropdown
+const selectOption = (option) => {
+    selectedOption.value = option; // Update selected option
+    isOpen.value = false; // Close the dropdown
+    emit('changeData', option)
+};
+
+// Close dropdown when clicking outside
+const closeDropdown = (event) => {
+    if (!dropdownRef.value.contains(event.target)) {
+        isOpen.value = false;
+    }
+};
+
+// Lifecycle hook: mounted
+onMounted(() => {
+    nextTick(() => {
+        document.addEventListener("click", closeDropdown); // Listen for click events outside dropdown
+    });
+});
+
+// Lifecycle hook: unmounted
+onUnmounted(() => {
+    document.removeEventListener("click", closeDropdown); // Remove event listener when component is unmounted
+});
+
+</script>
+
+<style lang="scss" scoped>
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown button {
+    background: none;
+    color: inherit;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+.box_drop {
+    user-select: none;
+    display: flex;
+    align-items: center;
+    color: #ffffff;
+    background: none;
+    padding: 0;
+    border: none;
+    cursor: pointer;
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+.dropdown-menu {
+    width: fit-content;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    white-space: nowrap;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 10px);
+    z-index: 1;
+    margin: 0;
+    padding: 0;
+    border-radius: 6px;
+    user-select: none;
+    border: 1px solid rgb(3, 94, 138);
+    background-color: rgb(11, 39, 90);
+    padding: 5px 0;
+}
+
+.dropdown-menu::before {
+    content: '';
+    box-sizing: border-box;
+    content: " ";
+    height: 10px;
+    position: absolute;
+    transform: rotate(45deg);
+    width: 10px;
+    top: -5px;
+    right: calc(50% - 5px);
+    border: 1px solid rgb(3, 94, 138);
+    background-color: rgb(11, 39, 90);
+    border-bottom-color: transparent !important;
+    border-right-color: transparent !important;
+}
+
+/* 定义过渡效果 */
+.fade-enter-active,
+.fade-leave-active {
+    transition: opacity 0.5s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+    opacity: 0;
+}
+
+.dropdown-menu li {
+    padding: 5px 16px;
+    text-decoration: none;
+    display: block;
+    cursor: pointer;
+    font-size: 14px;
+    color: #ffffff;
+    line-height: 22px;
+    list-style: none;
+    margin: 0;
+    outline: none;
+    padding: 5px 16px;
+    white-space: nowrap;
+}
+
+.dropdown-menu li:hover {
+    background-color: rgb(17, 60, 141);
+}
+
+.icon-caret {
+    height: 1.3rem;
+    width: 1.3rem;
+    margin-left: 0.3rem;
+    stroke-width: 0.02rem;
+    pointer-events: auto;
+    transition: transform 0.2s ease-in-out;
+
+    &.down {
+        transform: rotate(180deg);
+    }
+}
+</style>

src/components/kilobit/index.vue

@@ -0,0 +1,38 @@
+<template>
+    <div class="kilobit_box">
+        <div class="kilobit_title">{{ value }}</div>
+        <tumble :number="number" :color="color"></tumble>
+    </div>
+</template>
+
+<script setup>
+import tumble from './tumble'
+const props = defineProps({
+    /* 标题 */
+    value: {
+        type: String,
+    },
+    number: {
+        type: Array,
+    },
+     /* 颜色 */
+     color: {
+        type: String,
+    },
+});
+</script>
+<style lang="scss">
+.kilobit_box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.kilobit_title {
+    margin-bottom: 10px;
+    text-align: center;
+    font-size: 24px;
+    color: #20caf0;
+}
+
+</style>

src/layout/components/AppMain.vue

@@ -8,8 +8,8 @@
       </transition>
     </router-view>
     <iframe-toggle />
-    <!-- <iframe id="myIframe" :src="srcUrl" style="width: 100%;height: 100%;" frameborder="0"
-      @mousemove="handleScroll"></iframe> -->
+    <iframe id="myIframe" :src="srcUrl" style="width: 100%;height: 100%;" frameborder="0"
+      @mousemove="handleScroll"></iframe>
   </section>
 </template>
 

src/layout/components/Sidebar/Logo.vue

@@ -9,7 +9,7 @@
         </template>
       </el-image>
       <div class="weather_title">
-        <span>{{ weathers }} {{ temperatures }}℃</span>
+        <span>{{ weathers || '未知' }} {{ temperatures || '未知' }}℃</span>
         <span>{{ currentTime }} {{ hourMinuteSecond }}</span>
       </div>
     </div>
@@ -21,35 +21,20 @@
       </div>
     </router-link>
     <div class="avatar-container">
-      <div class="box_padlock center_in">
+      <!-- <div class="box_padlock center_in">
         <el-icon size="20" color="rgb(134, 25, 65)">
           <SwitchButton />
         </el-icon>
         <div class="box_down"></div>
-      </div>
-      <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
-        <div class="avatar-wrapper">
-          <!-- <img :src="userStore.avatar" class="user-avatar" /> -->
-          <span>{{ name }}</span>
-          <el-icon color="#fff"><caret-bottom /></el-icon>
-        </div>
-        <template #dropdown>
-          <el-dropdown-menu>
-            <!-- <router-link to="/user/profile">
-              <el-dropdown-item>个人中心</el-dropdown-item>
-            </router-link> -->
-            <el-dropdown-item divided command="logout">
-              <span>退出登录</span>
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
+      </div> -->
+      <Dropdown :name="name" :options="['退出登录']" @changeData="logout"></Dropdown>
     </div>
   </div>
 </template>
 
 <script setup>
 import axios from 'axios';
+import Dropdown from '@/components/Dropdown'
 import { ElMessageBox } from 'element-plus'
 import useSettingsStore from '@/store/modules/settings'
 import variables from '@/assets/styles/variables.module.scss'
@@ -120,18 +105,6 @@ const getLogoTextColor = computed(() => {
   return sideTheme.value === 'theme-dark' ? '#fff' : variables.menuLightText;
 });
 
-function handleCommand(command) {
-  switch (command) {
-    case "setLayout":
-      setLayout();
-      break;
-    case "logout":
-      logout();
-      break;
-    default:
-      break;
-  }
-}
 function logout() {
   ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
     confirmButtonText: '确定',
@@ -309,32 +282,6 @@ onMounted(() => {
   display: flex;
   align-items: center;
   margin-right: 20px;
-
-  .avatar-wrapper {
-    position: relative;
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    height: 46px;
-
-    .user-avatar {
-      cursor: pointer;
-      width: 40px;
-      height: 40px;
-      border-radius: 10px;
-    }
-
-    i {
-      cursor: pointer;
-      font-size: 18px;
-      margin-left: 6px;
-    }
-
-    span {
-      user-select: none;
-      color: #fff;
-    }
-  }
 }
 
 .box_padlock {

src/views/system/broadcast/modules/eventList.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_eventList">
-        <HeadlineTag value="终端日志" style="flex-shrink: 0;"></HeadlineTag>
+        <HeadlineTag type="right" value="终端日志" style="flex-shrink: 0;"></HeadlineTag>
         <div class="_eventList_mains" ref="mainsRef" @mouseenter="pauseCarousel" @mouseleave="resumeCarousel">
             <div :style="{ transform: `translateY(${scrollY}px)` }">
                 <div class="_eventList_mains_item" v-for="(item, index) in eventList.concat(eventList)" :key="index">

src/views/system/broadcast/modules/running.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_running">
-        <HeadlineTag value="运行统计"></HeadlineTag>
+        <HeadlineTag type="right" value="运行统计"></HeadlineTag>
         <div class="_running_mains">
             <dv-capsule-chart :config="config" style="width:100%;height:100%" />
         </div>

src/views/system/broadcast/modules/sameDay.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_eventList">
-        <HeadlineTag value="播放控制" style="flex-shrink: 0;"></HeadlineTag>
+        <HeadlineTag type="right" value="播放控制" style="flex-shrink: 0;"></HeadlineTag>
         <div class="_eventList_mains" ref="mainsRef" @mouseenter="pauseCarousel" @mouseleave="resumeCarousel">
             <div :style="{ transform: `translateY(${scrollY}px)` }">
                 <div class="_eventList_mains_item" v-for="(item, index) in eventList.concat(eventList)" :key="index">

src/views/system/elevator/modules/eventList.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_consume">
-        <HeadlineTag value="超载预警(周)"></HeadlineTag>
+        <HeadlineTag type="right" value="超载预警(周)"></HeadlineTag>
         <div class="_consume_mains">
             <div ref="chartRef" style="width: 100%; height: 100%;"></div>
         </div>

src/views/system/elevator/modules/sameDay.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_consume">
-        <HeadlineTag value="异常震动(周)"></HeadlineTag>
+        <HeadlineTag type="right" value="异常震动(周)"></HeadlineTag>
         <div class="_consume_mains">
             <div ref="chartRef" style="width: 100%; height: 100%;"></div>
         </div>

src/views/system/elevator/modules/tiring.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_consume">
-        <HeadlineTag value="困人告警(周)"></HeadlineTag>
+        <HeadlineTag type="right" value="困人告警(周)"></HeadlineTag>
         <div class="_consume_mains">
             <div ref="chartRef" style="width: 100%; height: 100%;"></div>
         </div>

src/views/system/energy/modules/carbonEmission.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_consume">
-        <HeadlineTag value="碳排趋势(年)"></HeadlineTag>
+        <HeadlineTag type="right" value="碳排趋势(年)"></HeadlineTag>
         <div class="_consume_mains">
             <div ref="chartRef" style="width: 100%; height: 100%;"></div>
         </div>

src/views/system/energy/modules/consume.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_consume">
-        <HeadlineTag value="能耗趋势(年)"></HeadlineTag>
+        <HeadlineTag type="right" value="能耗趋势(年)"></HeadlineTag>
         <div class="_consume_mains">
             <div ref="chartRef" style="width: 100%; height: 100%;"></div>
         </div>

src/views/system/energy/modules/running.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="_running">
-        <HeadlineTag value="能源统计"></HeadlineTag>
-
+        <HeadlineTag type="right" value="能源统计"></HeadlineTag>
         <div class="_running_mains">
             <div class="_running_mains_left">
                 <div class="_running_mains_left_tuan"></div>

src/views/system/energy/modules/sameDay.vue

@@ -6,24 +6,23 @@
                 <div class="_sameDay_mains_left_tuan"></div>
                 <div class="_sameDay_mains_left_conter">
                     <div class="_sameDay_mains_left_conter_num">
-                        62<span style="font-size: 12px;">kwh</span>/5<span style="font-size: 12px;">T</span></div> 
+                        62<span style="font-size: 12px;">kwh</span>/5<span style="font-size: 12px;">T</span></div>
                     <div class="_sameDay_mains_left_conter_text">今日实时电/水</div>
                 </div>
             </div>
             <div class="_sameDay_mains_right">
-                <div class="_sameDay_mains_right_item" v-for="item,index in sameDayList" :key="index">
+                <div class="_sameDay_mains_right_item" v-for="item, index in sameDayList" :key="index">
                     <div class="_sameDay_mains_right_item_tuan">
-                        <span class="_sameDay_mains_right_item_tuan_flag" :style="{backgroundColor: item.color}"></span>
+                        <span class="_sameDay_mains_right_item_tuan_flag" :style="{ backgroundColor: item.color }"></span>
                         <el-text class="w-150px mb-2" truncated style="color: #ccc;">
-                            {{item.name}}
+                            {{ item.name }}
                         </el-text>
                     </div>
                     <div class="_sameDay_mains_right_item__txt">
-                        {{item.state}}
+                        {{ item.state }}
                     </div>
-                </div> 
+                </div>
             </div>
-           
         </div>
     </div>
 </template>
@@ -33,10 +32,10 @@ import { ref } from "vue";
 import HeadlineTag from '@/components/HeadlineTag'
 
 const sameDayList = ref([
-    { name:'昨日用电', state:152, color:'#15acaa'},
-    { name:'本月用电', state:1933, color:'#15acaa'},
-    { name:'昨日用水', state:2000, color:'#FFC107'},
-    { name:'本月用水', state:7562, color:'#FFC107'},
+    { name: '昨日用电', state: 152, color: '#15acaa' },
+    { name: '本月用电', state: 1933, color: '#15acaa' },
+    { name: '昨日用水', state: 2000, color: '#FFC107' },
+    { name: '本月用水', state: 7562, color: '#FFC107' },
 
 ])
 const generateRandomData = (length, max) => {
@@ -52,17 +51,20 @@ const generateRandomData = (length, max) => {
     display: flex;
     align-items: center;
     flex-direction: column;
+
     &_mains {
         flex: 1;
         margin: 30px;
         display: flex;
         align-items: center;
+
         &_left {
             width: 180px;
             height: 180px;
             position: relative;
             flex-shrink: 0;
-            &_tuan{
+
+            &_tuan {
                 width: 100%;
                 height: 100%;
                 background: url("@/assets/images/content_circle.png");
@@ -71,11 +73,12 @@ const generateRandomData = (length, max) => {
                 background-repeat: no-repeat;
                 animation: scanning 4s linear infinite;
             }
+
             &_conter {
                 position: absolute;
                 left: 0;
                 top: 0;
-            	flex-shrink: 0;
+                flex-shrink: 0;
                 width: 100%;
                 height: 100%;
                 display: flex;
@@ -83,27 +86,33 @@ const generateRandomData = (length, max) => {
                 align-items: center;
                 justify-content: center;
                 color: #fff;
+
                 &_num {
                     font-size: 18px;
                 }
+
                 &_text {
                     font-size: 12px;
-                }	
+                }
             }
         }
+
         &_right {
-            margin-left:10px;
-           flex: 1;
-           color: #fff;
-           &_item{
+            margin-left: 10px;
+            flex: 1;
+            color: #fff;
+
+            &_item {
                 display: flex;
-                align-items: center; 
+                align-items: center;
                 gap: 40px;
                 padding: 5px 0;
+
                 &_tuan {
                     display: flex;
-                    align-items: center; 
-                    &_flag{
+                    align-items: center;
+
+                    &_flag {
                         display: block;
                         width: 7px;
                         height: 7px;
@@ -111,18 +120,20 @@ const generateRandomData = (length, max) => {
                         margin-right: 10px;
                     }
                 }
-                &__txt{
-                    font-size:24px;
+
+                &__txt {
+                    font-size: 24px;
                 }
             }
         }
 
-        
+
     }
 }
+
 @keyframes scanning {
-		to {
-			transform: rotate(1turn);
-		}
-	}
+    to {
+        transform: rotate(1turn);
+    }
+}
 </style>

src/views/system/lighting/index.vue

@@ -1,23 +1,23 @@
 <template>
-   <div class="_energy">
-    <layout>
-        <template #left>
-            <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
-                <deviceList/>
-            </div>
-        </template>
-        <template #content>
-            <p>照明</p>
-        </template>
-        <template #right>
-            <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
-                <running style="flex: 1;"/>
-                <switchAll  style="flex: 1;"/>
-               <eventList style="flex: 1;"/>
-            </div>
-        </template>
-    </layout>
-   </div>
+    <div class="_energy">
+        <layout>
+            <template #left>
+                <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
+                    <deviceList />
+                </div>
+            </template>
+            <template #content>
+                <p>照明</p>
+            </template>
+            <template #right>
+                <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
+                    <running style="flex: 1;" />
+                    <switchAll style="flex: 1;" />
+                    <eventList style="flex: 1;" />
+                </div>
+            </template>
+        </layout>
+    </div>
 </template>
 
 <script setup name="Role">
@@ -28,9 +28,9 @@ import eventList from './modules/eventList.vue'
 import switchAll from './modules/switchAll.vue'
 
 
-</script> 
+</script>
 <style lang="scss">
-._energy{
+._energy {
     height: 100%;
 }
 </style>

src/views/system/lighting/modules/eventList.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_eventList">
-        <HeadlineTag value="事件列表" style="flex-shrink: 0;"></HeadlineTag>
+        <HeadlineTag type="right" value="事件列表" style="flex-shrink: 0;"></HeadlineTag>
         <!-- 绑定鼠标移入移出事件 -->
         <div class="_eventList_mains" ref="mainsRef" @mouseenter="pauseCarousel" @mouseleave="resumeCarousel">
             <!-- 复制一份数据用于无缝滚动 -->

src/views/system/lighting/modules/running.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_running">
-        <HeadlineTag value="运行统计"></HeadlineTag>
+        <HeadlineTag type="right" value="运行统计"></HeadlineTag>
         <div class="_running_mains">
             <div class="flex_person">
                 <div ref="chartAccessLeft" style="width: 100%;height: 100%;"></div>

src/views/system/lighting/modules/switchAll.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_switchAll">
-        <HeadlineTag value="运行分析(周)"></HeadlineTag>
+        <HeadlineTag type="right" value="运行分析(周)"></HeadlineTag>
         <div class="_switchAll_mains">
             <div ref="chartRef" style="width: 100%; height: 100%;"></div>
         </div>

src/views/system/message/modules/consume.vue

@@ -1,7 +1,6 @@
 <template>
     <div class="_runnings">
-        <HeadlineTag value="信息类型占比"></HeadlineTag>
-
+        <HeadlineTag type="right" value="信息类型占比"></HeadlineTag>
         <div class="_runnings_mains">
             <div class="_runnings_mains_left">
                 <div class="_runnings_mains_left_tuan tuan1"></div>
@@ -32,51 +31,58 @@
 import { ref } from "vue";
 import HeadlineTag from '@/components/HeadlineTag'
 const runningList = ref([
-    { name:'入侵检测', state:'154', color:'#409eff',tip:'划定区域人员闯入'},
-    { name:'异常行为', state:'15', color:'#15acaa',tip:'徘徊、倒地、聚集'}, 
-    { name:'丢失告警', state:'134', color:'#FFC107',tip:'物品遗留/丢失告警'},
+    { name: '入侵检测', state: '154', color: '#409eff', tip: '划定区域人员闯入' },
+    { name: '异常行为', state: '15', color: '#15acaa', tip: '徘徊、倒地、聚集' },
+    { name: '丢失告警', state: '134', color: '#FFC107', tip: '物品遗留/丢失告警' },
 ])
 </script>
 <style lang="scss" scoped>
 .tuan1 {
-    background: url("@/assets/images/video_bg_1.png");	
+    background: url("@/assets/images/video_bg_1.png");
     // animation: scanning 10s linear infinite;
 }
+
 .tuan2 {
-    background: url("@/assets/images/video_bg_2.png");	
+    background: url("@/assets/images/video_bg_2.png");
     // animation: scanning 10s linear infinite;
 }
+
 .tuan3 {
-    background: url("@/assets/images/video_bg_3.png");	
+    background: url("@/assets/images/video_bg_3.png");
     // animation: scanning 10s linear infinite;
 }
+
 ._runnings {
     display: flex;
     align-items: center;
     flex-direction: column;
+
     &_mains {
         flex: 1;
         margin: 30px;
         display: flex;
         align-items: center;
         flex-wrap: wrap;
+
         &_left {
             flex-shrink: 0;
             width: 140px;
             height: 140px;
             position: relative;
-            &_tuan{
+
+            &_tuan {
                 width: 100%;
                 height: 100%;
                 background-size: 80% 80%;
                 background-position: center;
                 background-repeat: no-repeat;
             }
+
             &_conter {
                 position: absolute;
                 left: 0;
                 top: 0;
-            	flex-shrink: 0;
+                flex-shrink: 0;
                 width: 100%;
                 height: 100%;
                 display: flex;
@@ -84,20 +90,23 @@ const runningList = ref([
                 align-items: center;
                 justify-content: center;
                 color: #fff;
+
                 &_num {
                     font-size: 18px;
                 }
+
                 &_text {
                     font-size: 12px;
-                }	
+                }
             }
         }
-        
+
     }
 }
+
 @keyframes scanning {
-		to {
-			transform: rotate(1turn);
-		}
-	}
+    to {
+        transform: rotate(1turn);
+    }
+}
 </style>

src/views/system/message/modules/sameDay.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_eventList">
-        <HeadlineTag value="大屏控制" style="flex-shrink: 0;"></HeadlineTag>
+        <HeadlineTag type="right" value="大屏控制" style="flex-shrink: 0;"></HeadlineTag>
         <div class="_eventList_mains" ref="mainsRef" @mouseenter="pauseCarousel" @mouseleave="resumeCarousel">
             <div :style="{ transform: `translateY(${scrollY}px)` }">
                 <div class="_eventList_mains_item" v-for="(item, index) in eventList.concat(eventList)" :key="index">
@@ -11,12 +11,10 @@
                             </el-icon> -->
                         </div>
                         <el-text class="w-150px mb-2" truncated style="color: #fff;">
-                            {{index+1}}F#{{ item.name }}
+                            {{ index + 1 }}F#{{ item.name }}
                         </el-text>
                     </div>
-                    <div class="_xian"
-                    :class="item.store=='on'?'_success':'_warning'"
-                    >{{item.store=='on'?'播放':'空闲'}}</div>
+                    <div class="_xian" :class="item.store == 'on' ? '_success' : '_warning'">{{ item.store == 'on' ? '播放' : '空闲' }}</div>
                     <div class="_eventList_mains_item_btn">
                         <div class="_eventList_mains_item_btn_plays">播放</div>
                         <div class="_eventList_mains_item_btn_plays">暂停</div>
@@ -116,13 +114,14 @@ onUnmounted(() => {
 </script>
 
 <style lang="scss" scoped>
-
 ._success {
-    color: #15acaa !important;	
+    color: #15acaa !important;
 }
+
 ._warning {
-    color: #FFC107 !important;	
+    color: #FFC107 !important;
 }
+
 ._eventList {
     overflow: hidden;
     display: flex;
@@ -139,6 +138,7 @@ onUnmounted(() => {
             justify-content: space-between;
             align-items: center;
             padding: 10px 0;
+
             &_text {
                 display: flex;
                 justify-content: space-between;
@@ -146,29 +146,33 @@ onUnmounted(() => {
                 max-width: 50%;
                 text-emphasis: none;
                 /* 新增样式让文本超出显示省略号 */
-                white-space: nowrap; 
-                overflow: hidden; 
-                text-overflow: ellipsis; 
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+
                 &_flag {
                     width: 10px;
                     height: 10px;
                     border-radius: 50%;
-                    margin-left: 10px; 
+                    margin-left: 10px;
                     display: flex;
                     align-items: center;
                     justify-content: center;
                     margin-right: 10px;
                     background: #168cdb;
                 }
+
                 &_p {
                     margin-left: 10px;
                 }
             }
-            &_btn{
+
+            &_btn {
                 color: #fff;
                 display: flex;
                 font-size: 14px;
                 gap: 10px;
+
                 &_plays {
                     border-radius: 5px;
                     cursor: pointer;
@@ -179,15 +183,18 @@ onUnmounted(() => {
                 }
             }
         }
-        &_item:nth-child(even){
+
+        &_item:nth-child(even) {
             background: rgba($color: #168cdb, $alpha: .05);
         }
+
         &_item:hover {
-            background-image: linear-gradient(to right, #168cdb, transparent); 
+            background-image: linear-gradient(to right, #168cdb, transparent);
         }
     }
 }
-._xian{
+
+._xian {
     font-size: 12px;
 }
 </style>

src/views/system/message/modules/tiring.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_consume">
-        <HeadlineTag value="阅读量"></HeadlineTag>
+        <HeadlineTag type="right" value="阅读量"></HeadlineTag>
         <div class="_consume_mains">
             <div ref="chartRef" style="width: 100%; height: 100%;"></div>
         </div>

src/views/system/receptiondesk/conference.vue

@@ -1,159 +1,177 @@
 <template>
-    <div class="person_box">
-        <div ref="chartDistrict" style="width: 100%;height: 100%;"></div>
+    <div style="width: 100%;height: 100%;">
+        <div class="top_hy">
+            <div class="item" style="width: 25%;">
+                <span>{{ data[0].title }}</span>
+                <span class="num_feed" :style="{ color: data[0].color, marginTop: data[0].top }">
+                    <span :style="{ fontSize: data[0].fontsize }">{{ data[0].value || 0 }}</span>
+                    {{ data[0].unit }}
+                </span>
+            </div>
+            <div class="right_hy">
+                <div class="item" style="margin-bottom: 10px;flex-direction: row;">
+                    <span>{{ data[1].title }}</span>
+                    <span class="num_feed" :style="{ color: data[1].color, marginTop: data[1].top }">
+                        <span :style="{ fontSize: data[1].fontsize }">{{ data[1].value || 0 }}</span>
+                    </span>
+                </div>
+                <div class="bottom_hy">
+                    <div class="item" style="margin-right: 10px;flex-direction: row;">
+                        <span>{{ data[2].title }}</span>
+                        <span class="num_feed" :style="{ color: data[2].color, marginTop: data[2].top }">
+                            <span :style="{ fontSize: data[2].fontsize }">{{ data[2].value || 0 }}</span>
+                            {{ data[2].unit }}
+                        </span>
+                    </div>
+                    <div class="item" style="flex-direction: row;">
+                        <span>{{ data[3].title }}</span>
+                        <span class="num_feed" :style="{ color: data[3].color, marginTop: data[3].top }">
+                            <span :style="{ fontSize: data[3].fontsize }">{{ data[3].value || 0 }}</span>
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="person_box">
+            <div class="item" :style="{ flexDirection: item.align, }" v-for="(item, index) in configList" :key="index">
+                <span>{{ item.title }}</span>
+                <span class="num_feed" :style="{ color: item.color, marginTop: item.top }">
+                    <span :style="{ fontSize: item.fontsize }">{{ item.value || 0 }}</span>
+                    {{ item.unit }}
+                </span>
+            </div>
+        </div>
     </div>
 </template>
 
 <script setup>
-import * as echarts from 'echarts'
-defineProps({
-    title: {
-        type: String,
-        default: '暂无数据'
+const props = defineProps({
+    arrData: {
+        type: Object,
+        default: {}
     }
 })
-const chartDistrict = ref(null);
-let chartDom = null;
-const initAccess = () => {
-    let MaxTemArray = [10, 3, 13, 11, 12, 12, 9];
-    const dotColorsDic = ['blue', 'red']; // 点的颜色字典
-    chartDom = echarts.init(chartDistrict.value);
-    let option = {
-        title: {
-            text: '未来一周气温变化',
-            subtarget: 'blank',
-            x: 'center',
-            top: '2%',
-            textStyle: {
-                fontSize: 15,
-                color: "rgba(254, 254, 254, 1)"
-            },
-        },
-        legend: {
-            top: '2%',
-            right: '0%',
-            textStyle: {
-                color: "rgba(254, 254, 254, 1)"
-            },
-        },
-        grid: {
-            top: '12%',
-            bottom: '12%',
-            left: '14%',
-            right: '2%'
-        },
-        tooltip: {
-            trigger: 'axis',
-            axisPointer: {
-                type: 'line',
-            },
-            textStyle: {
-                color: '#fafafa',
-            },
-            borderColor: 'transparent',
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            extraCssText: 'backdrop-filter: blur(6px);',
-        },
-        xAxis: {
-            type: 'category',
-            axisLine: {
-                lineStyle: {
-                    color: '#C0C4CC',
-                    width: 2
-                },
-            },
-            boundaryGap: false,
-            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
-        },
-        yAxis: {
-            type: 'value',
-            axisLabel: {
-                formatter: '{value} °C'
-            },
-            axisLine: {
-                lineStyle: {
-                    color: '#C0C4CC',
-                    width: 2
-                }
-            },
-            splitLine: {
-                lineStyle: {
-                    color: 'rgba(255,255,255,0.3)',
-                }
-            },
-        },
-        series: [{
-            name: '最高气温',
-            type: 'line',
-            color: '#ff6b93', // 定义legend图例中线颜色
-            symbol: "circle",
-            lineStyle: {
-                // 线的颜色
-                color: "rgba(28, 193, 91, 1)",
-                cap: "round"
-            },
-            itemStyle: {
-                normal: {
-                    color: (params) => {
-                        if (params.data > 10) {
-                            return dotColorsDic[1]
-                        } else {
-                            return dotColorsDic[0]
-                        }
-                    }
-                }
-            },
-            symbolSize: 6,
-            label: {
-                show: false
-            },
-            markLine: {
-                data: [{
-                    type: 'average',
-                    name: '最高气温平均值',
-                    lineStyle: {
-                        color: '#0ED638'
-                    },
-                    label: {
-                        position: 'insideEndTop',
-                        formatter: "{b}{c}°C",
-                        color: '#0ED638'
-                    }
-                },
-                {
-                    name: '阈值',
-                    yAxis: 12,
-                    lineStyle: {
-                        color: '#FF6464'
-                    },
-                    label: {
-                        position: 'insideEndTop',
-                        formatter: "{b}{c}°C",
-                        color: '#FF6464'
-                    }
-                }
-                ]
-            },
-            data: MaxTemArray
-        },]
-    };
-    chartDom.setOption(option)
-};
-// 生命周期
-onMounted(() => {
-    initAccess()
-});
-// 窗口自适应
-window.addEventListener('resize', () => {
-    chartDom?.resize();
-});
+const data = ref([{
+    title: '会议总场次',
+    value: null,
+    color: 'rgb(67, 246, 223)',
+    fontsize: '24px',
+    top: '15px',
+    unit: '场',
+}, {
+    title: '本月会议总时长',
+    value: null,
+    align: 'row',
+}, {
+    title: '本月会议总场次',
+    value: null,
+    align: 'row',
+    unit: '场',
+}, {
+    title: '本月会议总人次',
+    value: null,
+    align: 'row',
+},])
+const configList = ref([{
+    title: '会议总人次',
+    value: null,
+    color: 'rgb(67, 246, 223)',
+    fontsize: '16px',
+    top: '10px',
+}, {
+    title: '平均每日会议场次',
+    value: null,
+    color: 'rgb(67, 246, 223)',
+    fontsize: '16px',
+    top: '10px',
+    unit: '场',
+}, {
+    title: '平均会议时长',
+    value: null,
+    color: 'rgb(67, 246, 223)',
+    fontsize: '16px',
+    top: '10px',
+}, {
+    title: '会议延时场次',
+    value: null,
+    color: 'rgb(67, 246, 223)',
+    fontsize: '16px',
+    top: '10px',
+    unit: '场',
+}, {
+    title: '会议提前结束场次',
+    value: null,
+    color: 'rgb(67, 246, 223)',
+    fontsize: '16px',
+    top: '10px',
+    unit: '场',
+}, {
+    title: '会议总时长',
+    value: null,
+    color: 'rgb(67, 246, 223)',
+    fontsize: '16px',
+    top: '10px',
+}])
+
+watch(() => props.arrData, (newVal) => {
+    data.value[0].value = newVal.meetingYearSum
+    data.value[1].value = newVal.meetingMonthHM
+    data.value[2].value = newVal.meetingMonthSum
+    data.value[3].value = newVal.meetingMonthManCount
+    configList.value[0].value = newVal.meetingYearManCount
+    configList.value[1].value = newVal.meetingAvgDayCount
+    configList.value[2].value = newVal.meetingAvgTimes
+    configList.value[3].value = newVal.meetingProlongYearCount
+    configList.value[4].value = newVal.meetingStopYearCount
+    configList.value[4].value = newVal.meetingYearHM
+}, { deep: true, immediate: true } // 开启深度监听
+)
 </script>
 
 <style scoped lang="scss">
 .person_box {
     width: 100%;
+    height: 66%;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-row-gap: 10px;
+    grid-column-gap: 10px;
+    padding: 10px;
+
+}
+
+.item {
+    flex: 1;
     height: 100%;
     display: flex;
+    flex-direction: column;
     align-items: center;
+    justify-content: center;
+    border: 1px solid rgb(21, 147, 214);
+    font-size: 14px;
+}
+
+.top_hy {
+    display: flex;
+    width: 100%;
+    height: 33%;
+    padding: 10px 10px 0px 10px;
+}
+
+.right_hy {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+    width: calc(75% - 10px);
+}
+
+.bottom_hy {
+    display: flex;
+    align-items: center;
+    flex: 1;
+}
+
+.num_feed {
+    font-size: 14px;
 }
-</style>
+</style>

src/views/system/receptiondesk/feedback.vue

@@ -1,29 +1,323 @@
 <template>
     <div class="person_box">
-        <dv-scroll-board :config="config"
-            style="width:calc(100% - 15px);height:calc(100% - 10px);margin-top: 10px;margin-left: 15px;" />
+        <div ref="chartDistrict" style="width: 100%;height: 100%;"></div>
     </div>
 </template>
 
 <script setup>
-const config = ref({
-    headerBGC: '#10285c',
-    oddRowBGC: '#10285c7f',
-    evenRowBGC: '#10285c00',
-    header: ['名称', '位置', '列3'],
-    data: [
-        ['行1列1', '行1列2', '行1列3'],
-        ['行2列1', '行2列2', '行2列3'],
-        ['行3列1', '行3列2', '行3列3'],
-        ['行4列1', '行4列2', '行4列3'],
-        ['行5列1', '行5列2', '行5列3'],
-        ['行6列1', '行6列2', '行6列3'],
-        ['行7列1', '行7列2', '行7列3'],
-        ['行8列1', '行8列2', '行8列3'],
-        ['行9列1', '行9列2', '行9列3'],
-        ['行10列1', '行10列2', '行10列3']
-    ]
+import * as echarts from 'echarts'
+import 'echarts-liquidfill';
+defineProps({
+    title: {
+        type: String,
+        default: '暂无数据'
+    }
 })
+const chartDistrict = ref(null);
+let chartDom = null;
+const initAccess = () => {
+    chartDom = null
+    chartDom = echarts.init(chartDistrict.value);
+    let option = {
+        title: [{
+            text: "混凝土拌和站",
+            left: "33%",
+            top: "60%",
+            textAlign: "center",
+            textStyle: {
+                color: "#ffffff",
+                fontSize: 16,
+            },
+        },
+        {
+            text: "水稳拌和站",
+            left: "66%",
+            top: "60%",
+            textAlign: "center",
+            textStyle: {
+                color: "#ffffff",
+                fontSize: 16,
+            },
+        },
+        {
+            text: "张拉延伸量",
+            left: "18%",
+            top: "12.5%",
+            textAlign: "center",
+            textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+            },
+        },
+        {
+            text: "智能压浆",
+            left: "49%",
+            top: "12.5%",
+            textAlign: "center",
+            textStyle: {
+                color: "#ffffff",
+                fontSize: 12,
+            },
+        },
+        {
+            text: "履约出勤",
+            left: "82%",
+            top: "12.5%",
+            textAlign: "center",
+            textStyle: {
+                color: "#ffffff",
+                fontSize: 16,
+            },
+        },
+        ],
+        series: [{
+            type: "liquidFill",
+            radius: "40%",
+            // 水球颜色
+            color: ["#2c90fa"],
+            center: ["18%", "25%"],
+            label: {
+                normal: {
+                    textStyle: {
+                        color: "#2c90fa",
+                        insideColor: "#2c90fa",
+                        fontSize: 20,
+                    },
+                },
+            },
+            itemStyle: {
+                opacity: 0.5, //波浪的透明度
+                shadowBlur: 10, //波浪的阴影范围
+                shadowColor: "#072F3A", //阴影颜色
+            },
+            outline: {
+                show: true, //是否显示轮廓 布尔值
+                borderDistance: 0, //外部轮廓与图表的距离 数字
+                itemStyle: {
+                    borderColor: "#2c90fa", //边框的颜色
+                    borderWidth: 1, //边框的宽度
+                },
+            },
+            emphasis: {
+                itemStyle: {
+                    opacity: 1, //鼠标经过波浪颜色的透明度
+                },
+            },
+            data: [0.6, 0.5804],
+            amplitude: 4, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
+            waveLength: "50%", //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
+            backgroundStyle: {
+                color: 'transparent',
+            },
+            direction: "left", //波移动的速度 两个参数  left 从右往左 right 从左往右
+            waveAnimation: true, //控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
+            animationEasing: "linear", //初始动画
+            animationEasingUpdate: "quarticInOut", //数据更新的动画效果
+            animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
+            animationDurationUpdate: 300, //数据更新动画的时长
+        },
+        {
+            type: "liquidFill",
+            radius: "40%",
+            // 水球颜色
+            color: ["#fdaf61"],
+            center: ["49%", "25%"],
+            label: {
+                normal: {
+                    textStyle: {
+                        color: "#fdaf61",
+                        insideColor: "#fdaf61",
+                        fontSize: 20,
+                    },
+                },
+            },
+            itemStyle: {
+                opacity: 0.5, //波浪的透明度
+                shadowBlur: 10, //波浪的阴影范围
+                shadowColor: "#fdaf61", //阴影颜色
+            },
+            outline: {
+                show: true, //是否显示轮廓 布尔值
+                borderDistance: 0, //外部轮廓与图表的距离 数字
+                itemStyle: {
+                    borderColor: "#fdaf61", //边框的颜色
+                    borderWidth: 1, //边框的宽度
+                },
+            },
+            emphasis: {
+                itemStyle: {
+                    opacity: 1, //鼠标经过波浪颜色的透明度
+                },
+            },
+            data: [0.3, 0.3444],
+            amplitude: 4, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
+            waveLength: "50%", //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
+            backgroundStyle: {
+                color: 'transparent',
+            },
+            direction: "left", //波移动的速度 两个参数  left 从右往左 right 从左往右
+            waveAnimation: true, //控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
+            animationEasing: "linear", //初始动画
+            animationEasingUpdate: "quarticInOut", //数据更新的动画效果
+            animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
+            animationDurationUpdate: 300, //数据更新动画的时长
+        },
+        {
+            type: "liquidFill",
+            radius: "40%",
+            // 水球颜色
+            color: ["#d4cc3e"],
+            center: ["82%", "25%"],
+            label: {
+                normal: {
+                    textStyle: {
+                        color: "#d4cc3e",
+                        insideColor: "#d4cc3e",
+                        fontSize: 20,
+                    },
+                },
+            },
+            itemStyle: {
+                opacity: 0.5, //波浪的透明度
+                shadowBlur: 10, //波浪的阴影范围
+                shadowColor: "#d4cc3e", //阴影颜色
+            },
+            outline: {
+                show: true, //是否显示轮廓 布尔值
+                borderDistance: 0, //外部轮廓与图表的距离 数字
+                itemStyle: {
+                    borderColor: "#d4cc3e", //边框的颜色
+                    borderWidth: 1, //边框的宽度
+                },
+            },
+            emphasis: {
+                itemStyle: {
+                    opacity: 1, //鼠标经过波浪颜色的透明度
+                },
+            },
+            data: [0.45, 0.4144],
+            amplitude: 4, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
+            waveLength: "50%", //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
+            backgroundStyle: {
+                color: 'transparent',
+            },
+            direction: "left", //波移动的速度 两个参数  left 从右往左 right 从左往右
+            waveAnimation: true, //控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
+            animationEasing: "linear", //初始动画
+            animationEasingUpdate: "quarticInOut", //数据更新的动画效果
+            animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
+            animationDurationUpdate: 300, //数据更新动画的时长
+        },
+        {
+            type: "liquidFill",
+            radius: "40%",
+            // 水球颜色
+            color: ["#beff72"],
+            center: ["33%", "72%"],
+            label: {
+                normal: {
+                    textStyle: {
+                        color: "#beff72",
+                        insideColor: "#beff72",
+                        fontSize: 20,
+                    },
+                },
+            },
+            itemStyle: {
+                opacity: 0.5, //波浪的透明度
+                shadowBlur: 10, //波浪的阴影范围
+                shadowColor: "#beff72", //阴影颜色
+            },
+            outline: {
+                show: true, //是否显示轮廓 布尔值
+                borderDistance: 0, //外部轮廓与图表的距离 数字
+                itemStyle: {
+                    borderColor: "#beff72", //边框的颜色
+                    borderWidth: 1, //边框的宽度
+                },
+            },
+            emphasis: {
+                itemStyle: {
+                    opacity: 1, //鼠标经过波浪颜色的透明度
+                },
+            },
+            data: [0.32, 0.3544],
+            amplitude: 4, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
+            waveLength: "50%", //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
+            backgroundStyle: {
+                color: 'transparent',
+            },
+            direction: "left", //波移动的速度 两个参数  left 从右往左 right 从左往右
+            waveAnimation: true, //控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
+            animationEasing: "linear", //初始动画
+            animationEasingUpdate: "quarticInOut", //数据更新的动画效果
+            animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
+            animationDurationUpdate: 300, //数据更新动画的时长
+        },
+        {
+            type: "liquidFill",
+            radius: "40%",
+            // 水球颜色
+            color: ["#7cf2e0"],
+            center: ["66%", "72%"],
+            label: {
+                normal: {
+                    textStyle: {
+                        color: "#7cf2e0",
+                        insideColor: "#7cf2e0",
+                        fontSize: 20,
+                    },
+                },
+            },
+            itemStyle: {
+                opacity: 0.5, //波浪的透明度
+                shadowBlur: 10, //波浪的阴影范围
+                shadowColor: "#7cf2e0", //阴影颜色
+            },
+            outline: {
+                show: true, //是否显示轮廓 布尔值
+                borderDistance: 0, //外部轮廓与图表的距离 数字
+                itemStyle: {
+                    borderColor: "#7cf2e0", //边框的颜色
+                    borderWidth: 1, //边框的宽度
+
+                },
+            },
+            emphasis: {
+                itemStyle: {
+                    opacity: 1, //鼠标经过波浪颜色的透明度
+                },
+            },
+
+            data: [0.32, 0.3044],
+            amplitude: 4, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
+            waveLength: "50%", //波的长度 可以是百分比也可以是具体的像素值  百分比下是相对于直径的 取得越大波浪的起伏越小
+            backgroundStyle: {
+                color: 'transparent',
+            },
+            direction: "left", //波移动的速度 两个参数  left 从右往左 right 从左往右
+            waveAnimation: true, //控制波动画的开关  值是布尔值 false 是关闭动画 true 是开启动画 也是默认值
+            animationEasing: "linear", //初始动画
+            animationEasingUpdate: "quarticInOut", //数据更新的动画效果
+            animationDuration: 3000, //初始动画的时长，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更绚丽的初始动画效果
+            animationDurationUpdate: 300, //数据更新动画的时长
+        },
+        ],
+    };
+    chartDom.setOption(option)
+};
+// 生命周期
+onMounted(() => {
+    initAccess()
+});
+onUnmounted(() => {
+    chartDom.clear()
+    chartDom = null
+})
+// 窗口自适应
+window.addEventListener('resize', () => {
+    chartDom?.resize();
+});
 </script>
 
 <style scoped lang="scss">
@@ -33,4 +327,4 @@ const config = ref({
     display: flex;
     align-items: center;
 }
-</style>
+</style>

src/views/system/receptiondesk/formerly.vue

@@ -6,6 +6,7 @@
 
 <script setup>
 import * as echarts from 'echarts'
+import 'echarts-gl'
 defineProps({
     title: {
         type: String,
@@ -15,304 +16,329 @@ defineProps({
 const chartDistrict = ref(null);
 let chartDom = null;
 const initAccess = () => {
-    let dataArray = {
-        xdataName: ['美国', '英国', '日本', '俄罗斯', '加拿大', '德国', '法国', '法国1', '法国2', '法国3', '法国4', '法国5'],
-        contractnum: [9999, 8888, 7777, 6666, 5555, 4444, 3333, 6333, 5333, 5333, 6333, 5333]
-    }
-    let color2 = [
-        [{
-            offset: 0,
-            color: '#ff8881'
-        }, {
-            offset: 0.15,
-            color: '#ff564c'
-        }, {
-            offset: 1,
-            color: 'rgba(255,86,76, 0.08)'
-        }],
-        [{
-            offset: 0,
-            color: '#fff9e1'
-        }, {
-            offset: 0.15,
-            color: '#ffe376'
-        }, {
-            offset: 1,
-            color: 'rgba(255,209,26, 0.08)'
-        }],
-        [{
-            offset: 0,
-            color: '#f7ff98'
-        }, {
-            offset: 0.15,
-            color: '#efff37'
-        }, {
-            offset: 1,
-            color: 'rgba(239,255,55, 0.08)'
-        }],
-        [{
-            offset: 0,
-            color: '#32ffee'
-        }, {
-            offset: 0.15,
-            color: '#cdfffb'
-        }, {
-            offset: 1,
-            color: 'rgba(50,255,238, 0.1)'
-        }],
-        [{
-            offset: 0,
-            color: '#ff8881'
-        }, {
-            offset: 0.15,
-            color: '#ff564c'
-        }, {
-            offset: 1,
-            color: 'rgba(255,86,76, 0.08)'
-        }],
-        [{
-            offset: 0,
-            color: '#fff9e1'
-        }, {
-            offset: 0.15,
-            color: '#ffe376'
-        }, {
-            offset: 1,
-            color: 'rgba(255,209,26, 0.08)'
-        }],
-        [{
-            offset: 0,
-            color: '#f7ff98'
-        }, {
-            offset: 0.15,
-            color: '#efff37'
-        }, {
-            offset: 1,
-            color: 'rgba(239,255,55, 0.08)'
-        }],
-        [{
-            offset: 0,
-            color: '#32ffee'
-        }, {
-            offset: 0.15,
-            color: '#cdfffb'
-        }, {
-            offset: 1,
-            color: 'rgba(50,255,238, 0.1)'
-        }],
-        [{
-            offset: 0,
-            color: '#ff8881'
-        }, {
-            offset: 0.15,
-            color: '#ff564c'
-        }, {
-            offset: 1,
-            color: 'rgba(255,86,76, 0.08)'
-        }],
-        [{
-            offset: 0,
-            color: '#fff9e1'
-        }, {
-            offset: 0.15,
-            color: '#ffe376'
-        }, {
-            offset: 1,
-            color: 'rgba(255,209,26, 0.08)'
-        }],
-        [{
-            offset: 0,
-            color: '#f7ff98'
-        }, {
-            offset: 0.15,
-            color: '#efff37'
-        }, {
-            offset: 1,
-            color: 'rgba(239,255,55, 0.08)'
-        }],
-        [{
-            offset: 0,
-            color: '#32ffee'
-        }, {
-            offset: 0.15,
-            color: '#cdfffb'
-        }, {
-            offset: 1,
-            color: 'rgba(50,255,238, 0.1)'
-        }],
-    ]
-    // tooltip
-    let tooltip = {
-        trigger: 'axis',
-        axisPointer: {
-            type: 'line',
-        },
-        textStyle: {
-            color: '#fafafa',
-        },
-        borderColor: 'transparent',
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        extraCssText: 'backdrop-filter: blur(6px);',
-        formatter: v => {
-            let [a] = v
-            return `
-            <div class='u-p-2'>
-                <div>${a.name}：${a.value}</div>
-            </div>
-        `
+    chartDom = null
+    function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, height) {
+        // 计算
+        let midRatio = (startRatio + endRatio) / 2;
+        let startRadian = startRatio * Math.PI * 2;
+        let endRadian = endRatio * Math.PI * 2;
+        let midRadian = midRatio * Math.PI * 2;
+        // 如果只有一个扇形，则不实现选中效果。
+        if (startRatio === 0 && endRatio === 1) {
+            isSelected = false;
         }
+        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
+        k = typeof k !== 'undefined' ? k : 1 / 3;
+        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
+        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
+        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
+        // 计算高亮效果的放大比例（未高亮，则比例为 1）
+        let hoverRate = isHovered ? 1.05 : 1;
+        // 返回曲面参数方程
+        return {
+            u: {
+                min: -Math.PI,
+                max: Math.PI * 3,
+                step: Math.PI / 32
+            },
+            v: {
+                min: 0,
+                max: Math.PI * 2,
+                step: Math.PI / 20
+            },
+            x: function (u, v) {
+                if (u < startRadian) {
+                    return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+                }
+                if (u > endRadian) {
+                    return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+                }
+                return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+            y: function (u, v) {
+                if (u < startRadian) {
+                    return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
+                }
+                if (u > endRadian) {
+                    return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
+                }
+                return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
+            },
+            z: function (u, v) {
+                if (u < - Math.PI * 0.5) {
+                    return Math.sin(u);
+                }
+                if (u > Math.PI * 2.5) {
+                    return Math.sin(u);
+                }
+                return Math.sin(v) > 0 ? 1 * height : -1;
+            }
+        };
+    };
+    // 生成模拟 3D 饼图的配置项
+    function getPie3D(pieData, internalDiameterRatio) {
+        let series = [];
+        let sumValue = 0;
+        let startValue = 0;
+        let endValue = 0;
+        let legendData = [];
+        let k = typeof internalDiameterRatio !== 'undefined' ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
+        for (let i = 0; i < pieData.length; i++) {
+            sumValue += pieData[i].value;
+            let seriesItem = {
+                name: typeof pieData[i].name === 'undefined' ? `series${i}` : pieData[i].name,
+                type: 'surface',
+                parametric: true,
+                wireframe: {
+                    show: false
+                },
+                pieData: pieData[i],
+                pieStatus: {
+                    selected: false,
+                    hovered: false,
+                    k: k
+                }
+            };
+            if (typeof pieData[i].itemStyle != 'undefined') {
+                let itemStyle = {};
+                typeof pieData[i].itemStyle.color != 'undefined' ? itemStyle.color = pieData[i].itemStyle.color : null;
+                typeof pieData[i].itemStyle.opacity != 'undefined' ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;
+                seriesItem.itemStyle = itemStyle;
+            }
+            series.push(seriesItem);
+        }
+        for (let i = 0; i < series.length; i++) {
+            endValue = startValue + series[i].pieData.value;
+            series[i].pieData.startRatio = startValue / sumValue;
+            series[i].pieData.endRatio = endValue / sumValue;
+            series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);
+            startValue = endValue;
+            legendData.push(series[i].name);
+        }
+        series.push({
+            name: 'mouseoutSeries',
+            type: 'surface',
+            parametric: true,
+            wireframe: {
+                show: false,
+            },
+            itemStyle: {
+                opacity: 0.1,
+                color: '#E1E8EC',
+            },
+            parametricEquation: {
+                u: {
+                    min: 0,
+                    max: Math.PI * 2,
+                    step: Math.PI / 20,
+                },
+                v: {
+                    min: 0,
+                    max: Math.PI,
+                    step: Math.PI / 20,
+                },
+                x: function (u, v) {
+                    return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+                },
+                y: function (u, v) {
+                    return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+                },
+                z: function (u, v) {
+                    return Math.cos(v) > 0 ? -0.5 : -5;
+                },
+            },
+        });
+        // // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
+        series.push({
+            name: 'mouseoutSeries',
+            type: 'surface',
+            parametric: true,
+            wireframe: {
+                show: false,
+            },
+            itemStyle: {
+                opacity: 0.1,
+                color: '#E1E8EC',
+            },
+            parametricEquation: {
+                u: {
+                    min: 0,
+                    max: Math.PI * 2,
+                    step: Math.PI / 20,
+                },
+                v: {
+                    min: 0,
+                    max: Math.PI,
+                    step: Math.PI / 20,
+                },
+                x: function (u, v) {
+                    return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2;
+                },
+                y: function (u, v) {
+                    return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2;
+                },
+                z: function (u, v) {
+                    return Math.cos(v) > 0 ? -5 : -7;
+                },
+            },
+        });
+        series.push({
+            name: 'mouseoutSeries',
+            type: 'surface',
+            parametric: true,
+            wireframe: {
+                show: false,
+            },
+            itemStyle: {
+                opacity: 0.1,
+                color: '#E1E8EC',
+            },
+            parametricEquation: {
+                u: {
+                    min: 0,
+                    max: Math.PI * 2,
+                    step: Math.PI / 20,
+                },
+                v: {
+                    min: 0,
+                    max: Math.PI,
+                    step: Math.PI / 20,
+                },
+                x: function (u, v) {
+                    return ((Math.sin(v) * Math.sin(u) + Math.sin(u)) / Math.PI) * 2.2;
+                },
+                y: function (u, v) {
+                    return ((Math.sin(v) * Math.cos(u) + Math.cos(u)) / Math.PI) * 2.2;
+                },
+                z: function (u, v) {
+                    return Math.cos(v) > 0 ? -7 : -7;
+                },
+            },
+        });
+        return series;
     }
-    // grid
-    let grid = {
-        top: '15%',
-        left: '10%',
-        right: '3%',
-        bottom: '10%'
-    }
-    // xAxis
-    let xAxis = {
-        type: 'category',
-        boundaryGap: true,
-        data: dataArray.xdataName,
-        axisLine: {
-            lineStyle: {
-                color: '#fff'
+    let colors = ['rgb(42, 139, 247)', 'rgb(250, 139, 31)', 'rgb(255, 244, 10)', 'rgb(140, 229, 41)', 'rgb(131, 255, 233)', 'rgb(141, 156, 255)']
+    let xData = ['0-15分钟', '15-30分钟', '30-45分钟', '45-60分钟', '60-90分钟', '90分钟以上']
+    let yData = [100, 20, 30, 50, 90, 40, 30, 20]
+    // 传入数据生成 option
+    let optionsData = [];
+    for (let i = 0; i < xData.length; i++) {
+        optionsData.push(
+            {
+                name: xData[i],
+                value: yData[i],
+                itemStyle: {
+                    color: colors[i],
+                }
             }
-        },
-        axisLabel: {
+        );
+    }
+    const series = getPie3D(optionsData, 0.8, 240, 28, 26, 0.5);
+    series.push({
+        name: 'pie2d',
+        type: 'pie',
+        label: {
+            opacity: 1,
+            fontSize: 12,
+            lineHeight: 20,
             textStyle: {
                 fontSize: 12,
-                color: '#fff'
             },
-            rotate: 0
         },
-        axisTick: {
-            show: false
-        }, //坐标轴刻度
-    }
-    // yAxis
-    let yAxis = {
-        type: 'value',
-        scale: true,
-        min: 0,
-        name: '人数/地图',
-        nameTextStyle: {
-            color: '#fff',
-            fontSize: 12,
-            padding: [0, 0, 0, 10]
+        labelLine: {
+            length: 60,
+            length2: 60,
         },
-        splitLine: {
-            show: false
+        startAngle: -50, //起始角度，支持范围[0, 360]。
+        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
+        radius: ['0', '0'],
+        center: ['20%', '20%'],
+        data: optionsData,
+        itemStyle: {
+            opacity: 0,
         },
-        axisLine: {
-            lineStyle: {
-                color: '#fff'
-            }
+    });
+    chartDom = echarts.init(chartDistrict.value);
+    let option = {
+        legend: {
+            tooltip: {
+                show: true,
+            },
+            data: xData,
+            bottom: '0%',
+            itemGap: 20,
+            textStyle: {
+                color: '#fff',
+                fontSize: 12,
+            },
         },
-        axisLabel: {
+        animation: true,
+        tooltip: {
+            formatter: params => {
+                if (params.seriesName !== 'mouseoutSeries' && params.seriesName !== 'pie2d') {
+                    return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}`;
+                }
+            },
             textStyle: {
+                fontSize: 12
+            },
+        },
+        title: {
+            x: 'center',
+            top: '20',
+            textStyle: {
+                color: '#fff',
                 fontSize: 12,
-                color: '#fff'
-            }
-        }
-    }
-    let dataZoom = [ //给x轴设置滚动条
-        {
-            start: 0, //默认为0
-            end: 50, //默认为100
-            type: 'slider',
+            },
+        },
+        labelLine: {
             show: false,
-            xAxisIndex: [0],
-            handleSize: 10, //滑动条的 左右2个滑动条的大小
-            height: 0, //组件高度
-
+            lineStyle: {
+                color: 'transparent',
+            },
         },
-        //下面这个属性是里面拖到
-        {
-            type: 'inside',
-            show: true,
-            xAxisIndex: [0],
-            start: 0, //默认为1
-            end: 50 // 100 - 1500 / 31, //默认为100
+        label: {
+            show: false,
+            color: 'transparent',
+            position: 'outside',
+            formatter: '{b} \n{c} {d}%',
         },
-    ]
-    // series
-    let series = [{
-        name: '中高风险地区',
-        type: 'pictorialBar',
-        barWidth: 40,
-        // 三角矢量柱状图
-        symbol: 'path://M-0.000,431.000 C59.528,394.477 61.000,-0.000 61.000,-0.000 C61.000,-0.000 62.472,394.477 122.000,431.000 L-0.000,431.000 Z',
-        // 是否裁剪图形
-        symbolClip: false,
-        data: dataArray.contractnum,
-        itemStyle: {
-            color: params => {
-                return new echarts.graphic.LinearGradient(0, 0, 0, 1, color2[params.dataIndex])
-            }
+        xAxis3D: {
+            min: -1,
+            max: 1,
         },
-        label: {
-            show: true,
-            position: 'top',
-            formatter: params => {
-                return params.name
-
+        yAxis3D: {
+            min: -1,
+            max: 1,
+        },
+        zAxis3D: {
+            min: -1,
+            max: 1,
+        },
+        grid3D: {
+            show: false,
+            boxHeight: 0.4,
+            //top: '30%',
+            bottom: '20%',
+            viewControl: {
+                distance: 230,
+                alpha: 45,
+                beta: 40,
+                autoRotate: true, // 自动旋转
             },
-            textStyle: {
-                fontSize: 14,
-                color: '#fff'
-            }
         },
-    }]
-    chartDom = echarts.init(chartDistrict.value);
-    let option = {
-        tooltip,
-        grid,
-        xAxis,
-        yAxis,
-        series,
-        dataZoom,
-    }
-    //自己滚动图表
-    var timeOut = null
-    chartDom.on('mouseover', stop);
-    chartDom.on('mouseout', goMove);
-    autoMove()
-    function autoMove() {
-        if (!timeOut) {
-            if (Number(option.dataZoom[0].end) > 100) {
-                option.dataZoom[0].end = 50;
-                option.dataZoom[0].start = 0;
-            } else {
-                option.dataZoom[0].end = option.dataZoom[0].end + 1 * (100 / option.series[0].data.length);
-                option.dataZoom[0].start = option.dataZoom[0].start + 1 * (100 / option.series[0].data.length);
-            }
-            chartDom.setOption(option)
-        }
-        timeOut = setInterval(() => {
-            if (Number(option.dataZoom[0].end) > 100) {
-                option.dataZoom[0].end = 50;
-                option.dataZoom[0].start = 0;
-            } else {
-                option.dataZoom[0].end = option.dataZoom[0].end + 1 * (100 / option.series[0].data.length);
-                option.dataZoom[0].start = option.dataZoom[0].start + 1 * (100 / option.series[0].data.length);
-            }
-            chartDom.setOption(option)
-        }, 2500);
-    }
-    //鼠标按住停止滚动
-    function stop() {
-        clearInterval(timeOut)
-    }
-    //鼠标松开继续滚动
-    function goMove() {
-        autoMove()
-    }
+        series: series,
+    };
+    chartDom.setOption(option)
 };
 // 生命周期
 onMounted(() => {
     initAccess()
 });
+onUnmounted(() => {
+    chartDom.clear()
+    chartDom = null
+})
 // 窗口自适应
 window.addEventListener('resize', () => {
     chartDom?.resize();

src/views/system/receptiondesk/gambit.vue

@@ -15,30 +15,54 @@ defineProps({
 const chartDistrict = ref(null);
 let chartDom = null;
 const initAccess = () => {
-    let angle = 0; //角度，用来做简单的动画效果的
-    let value = 80;
-    var timerId;
-    var outerRidus1 = 0.8
-    var outerRidus2 = 0.85
+    let colorList = [
+        "rgba(255, 38, 38, 1)",
+        "rgba(255, 96, 0, 1)",
+        "rgba(255, 165, 7, 1)",
+        "rgba(0, 234, 255, 1)",
+        "rgba(0, 132, 255, 1)",
+        "#2379FF",
+    ];
+    let colorListA = [
+        "rgba(255, 38, 38, 0.1)",
+        "rgba(255, 96, 0, 0.1)",
+        "rgba(255, 165, 7, 0.1)",
+        "rgba(0, 234, 255, 0.1)",
+        "rgba(0, 132, 255, 0.1)",
+        "#49B1FF",
+    ];
+    let colorListB = [
+        "rgba(249, 136, 136, 1)",
+        "rgba(255, 162, 106, 1)",
+        "rgba(255, 210, 130, 1)",
+        "rgba(142, 255, 206, 1)",
+        "rgba(165, 232, 255, 1)",
+    ];
+    let colorListC = [
+        "rgba(249, 136, 136, 0.1)",
+        "rgba(255, 162, 106, 0.1)",
+        "rgba(255, 210, 130, 0.1)",
+        "rgba(142, 255, 206, 0.1)",
+        "rgba(165, 232, 255, 0.1)",
+    ];
+    let result = [
+        { name: "天水祥丰农资农贸有限公司", value: 86 },
+        { name: "天水花牛苹果", value: 83 },
+        { name: "天水红富士", value: 73 },
+        { name: "天水金帅苹果", value: 61 },
+        { name: "天水黄面皮", value: 61 },
+    ];
     chartDom = echarts.init(chartDistrict.value);
     let option = {
-        legend: {
-            orient: 'vertical',
-            show: true,
-            right: '5%',
-            y: 'center',
-            icon: 'pin',
-            itemGap: 30,
-            textStyle: {
-                color: '#FFFFFF',
-                fontSize: 12,
-                lineHeight: 20,
-            },
-        },
+        color: colorList,
         tooltip: {
             show: true,
+            trigger: "item",
             axisPointer: {
-                type: 'line',
+                type: "shadow",
+                textStyle: {
+                    color: "#fff",
+                },
             },
             textStyle: {
                 color: '#fafafa',
@@ -46,404 +70,226 @@ const initAccess = () => {
             borderColor: 'transparent',
             backgroundColor: 'rgba(0, 0, 0, 0.5)',
             extraCssText: 'backdrop-filter: blur(6px);',
+            confine: true,
+            formatter: "{b}<br />客流指数: {c}",
         },
-        series: [
-            // 最外层圆
+        legend: {
+            show: false,
+        },
+        grid: {
+            left: "2%",
+            right: "2%",
+            top: "6%",
+            bottom: "0%",
+        },
+        xAxis: [
             {
-                type: 'pie',
-                radius: ['75%', '55%'],
-                center: ['50%', '50%'],
-                hoverAnimation: false,
-                data: [
-                    {
-                        value: 30,
-                        name: '运行中',
-                        itemStyle: {
-                            normal: {
-                                color: {
-                                    // 完成的圆环的颜色
-                                    colorStops: [
-                                        {
-                                            offset: 0,
-                                            color: '#0060FF', // 0% 处的颜色
-                                        },
-                                        {
-                                            offset: 1,
-                                            color: '#00EFFE', // 100% 处的颜色
-                                        },
-                                    ],
-                                },
-                            },
-                        },
-                    },
-                    {
-                        value: 30,
-                        name: '已停止',
-                        itemStyle: {
-                            normal: {
-                                color: {
-                                    // 完成的圆环的颜色
-                                    colorStops: [
-                                        {
-                                            offset: 0,
-                                            color: '#44D7B6', // 0% 处的颜色
-                                        },
-                                        {
-                                            offset: 1,
-                                            color: '#6DD400', // 100% 处的颜色
-                                        },
-                                    ],
-                                },
-                            },
-                        },
-                    },
-                    {
-                        value: 40,
-                        name: '未上线',
-                        itemStyle: {
-                            normal: {
-                                color: {
-                                    // 完成的圆环的颜色
-                                    colorStops: [
-                                        {
-                                            offset: 0,
-                                            color: '#FFA600', // 0% 处的颜色
-                                        },
-                                        {
-                                            offset: 1,
-                                            color: '#FEDB65', // 100% 处的颜色
-                                        },
-                                    ],
-                                },
-                            },
-                        },
-                    },
-                ],
-                label: {
-                    show: true,
-                    position: 'outside',
-                    formatter: '{d}%',
-                    color: '#FFFFFF',
-                },
-                labelLine: {
-                    normal: {
-                        length: 80,
-                        lineStyle: {
-                            width: 1,
-                        },
-                    },
+                splitLine: {
+                    show: false,
                 },
+                type: "value",
+                show: false,
             },
-            // 内圆 + 中间文字
+        ],
+        yAxis: [
             {
-                type: 'pie',
-                radius: ['60%', '40%'],
-                center: ['50%', '50%'],
-                hoverAnimation: false,
-                z: 10,
-                label: {
-                    position: 'center',
-                    formatter: () => {
-                        return '佣金总额\r\n{total|100} 个';
+                splitLine: {
+                    show: false,
+                },
+                axisLine: {
+                    show: false,
+                },
+                type: "category",
+                axisTick: {
+                    show: false,
+                },
+                inverse: true,
+                data: result.map((item) => item.name),
+                axisLabel: {
+                    fontSize: 14,
+                    inside: true,
+                    formatter: (name, index) => {
+                        const id = index + 1;
+                        return `{count${id}|${id}}`;
                     },
                     rich: {
-                        total: {
-                            fontSize: 24,
-                            color: '#FFFFFF',
+                        count1: {
+                            padding: [0, 0, 33, 0],
+                            align: "center",
+                            color: colorList[0],
+                            fontSize: 14,
+                            fontFamily: "Source Han Sans CN",
                         },
-                    },
-                    color: '#FFFFFF',
-                    fontSize: 16,
-                    lineHeight: 30,
-                },
-                data: [
-                    {
-                        value: 30,
-                        name: '运行中',
-                        itemStyle: {
-                            normal: {
-                                color: {
-                                    // 完成的圆环的颜色
-                                    colorStops: [
-                                        {
-                                            offset: 0,
-                                            color: '#0060FF', // 0% 处的颜色
-                                        },
-                                        {
-                                            offset: 1,
-                                            color: '#00EFFE', // 100% 处的颜色
-                                        },
-                                    ],
-                                },
-                                opacity: 0.5,
-                            },
+                        count2: {
+                            padding: [0, 0, 33, 0],
+                            align: "center",
+                            color: colorList[1],
+                            fontSize: 14,
+                            fontFamily: "Source Han Sans CN",
                         },
-                    },
-                    {
-                        value: 30,
-                        name: '已停止',
-                        itemStyle: {
-                            normal: {
-                                color: {
-                                    // 完成的圆环的颜色
-                                    colorStops: [
-                                        {
-                                            offset: 0,
-                                            color: '#44D7B6', // 0% 处的颜色
-                                        },
-                                        {
-                                            offset: 1,
-                                            color: '#6DD400', // 100% 处的颜色
-                                        },
-                                    ],
-                                },
-                                opacity: 0.5,
-                            },
+                        count3: {
+                            padding: [0, 0, 33, 0],
+                            align: "center",
+                            color: colorList[2],
+                            fontSize: 14,
+                            fontFamily: "Source Han Sans CN",
                         },
-                    },
-                    {
-                        value: 40,
-                        name: '未上线',
-                        itemStyle: {
-                            normal: {
-                                color: {
-                                    // 完成的圆环的颜色
-                                    colorStops: [
-                                        {
-                                            offset: 0,
-                                            color: '#FFA600', // 0% 处的颜色
-                                        },
-                                        {
-                                            offset: 1,
-                                            color: '#FEDB65', // 100% 处的颜色
-                                        },
-                                    ],
-                                },
-                                opacity: 0.5,
-                            },
+                        count4: {
+                            padding: [0, 0, 33, 0],
+                            align: "center",
+                            color: colorList[3],
+                            fontSize: 14,
+                            fontFamily: "Source Han Sans CN",
                         },
-                    },
-                ],
-                labelLine: {
-                    show: false,
-                },
-            },
-
-            // 紫色线1 + 点
-            {
-                name: 'ring5',
-                type: 'custom',
-                coordinateSystem: 'none',
-                renderItem: function (params, api) {
-                    return {
-                        type: 'arc',
-                        shape: {
-                            cx: api.getWidth() / 2,
-                            cy: api.getHeight() / 2,
-                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1,// 180,
-                            startAngle: ((0 + angle) * Math.PI) / 180,
-                            endAngle: ((90 + angle) * Math.PI) / 180,
-                        },
-                        style: {
-                            stroke: '#8383FA',
-                            fill: 'transparent',
-                            lineWidth: 1.5,
+                        count5: {
+                            padding: [0, 0, 33, 0],
+                            align: "center",
+                            color: colorList[4],
+                            fontSize: 14,
+                            fontFamily: "Source Han Sans CN",
                         },
-                        silent: true,
-                    };
+                    },
                 },
-                data: [0],
             },
-            // 紫色线1点
             {
-                name: 'ring5', //紫点
-                type: 'custom',
-                coordinateSystem: 'none',
-                renderItem: function (params, api) {
-                    let x0 = api.getWidth() / 2;
-                    let y0 = api.getHeight() / 2;
-                    let r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1;
-                    let point = getCirlPoint(x0, y0, r, 0 + angle);
-                    return {
-                        type: 'circle',
-                        shape: {
-                            cx: point.x,
-                            cy: point.y,
-                            r: 4,
+                type: "category",
+                inverse: true,
+                axisTick: "none",
+                axisLine: "none",
+                show: true,
+                axisLabel: {
+                    textStyle: {
+                        color: "#fff",
+                        fontSize: 12,
+                    },
+                    verticalAlign: "bottom",
+                    padding: [0, 5, 10, 0],
+                    inside: true,
+                    formatter: function (value) {
+                        return `{name|客流指数：}{value|${value}}`;
+                    },
+                    rich: {
+                        name: {
+                            align: "center",
+                            color: "#D3E5FF",
+                            fontSize: 14,
+                            fontFamily: "Source Han Sans CN",
                         },
-                        style: {
-                            stroke: '#8450F9', //绿
-                            fill: '#8450F9',
+                        value: {
+                            align: "center",
+                            color: "#fff",
+                            fontSize: 14,
+                            fontFamily: "Source Han Sans CN",
                         },
-                        silent: true,
-                    };
+                    },
                 },
-                data: [0],
+                data: result.map((item) => item.value),
             },
-            // 蓝色
+        ],
+        series: [
             {
-                name: 'ring5',
-                type: 'custom',
-                coordinateSystem: 'none',
-                renderItem: function (params, api) {
-                    return {
-                        type: 'arc',
-                        shape: {
-                            cx: api.getWidth() / 2,
-                            cy: api.getHeight() / 2,
-                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1,// 180,
-                            startAngle: ((180 + angle) * Math.PI) / 180,
-                            endAngle: ((270 + angle) * Math.PI) / 180,
-                        },
-                        style: {
-                            stroke: '#4386FA',
-                            fill: 'transparent',
-                            lineWidth: 1.5,
-                        },
-                        silent: true,
-                    };
+                name: "",
+                type: "bar",
+                barWidth: 5, // 柱子宽度
+                MaxSize: 0,
+                showBackground: true,
+                barBorderRadius: [30, 0, 0, 30],
+                backgroundStyle: {
+                    color: "rgba(50, 60, 86, 1)",
                 },
-                data: [0],
-            },
-            {
-                name: 'ring5', // 蓝色
-                type: 'custom',
-                coordinateSystem: 'none',
-                renderItem: function (params, api) {
-                    let x0 = api.getWidth() / 2;
-                    let y0 = api.getHeight() / 2;
-                    let r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus1// 180
-                    let point = getCirlPoint(x0, y0, r, 180 + angle);
-                    return {
-                        type: 'circle',
-                        shape: {
-                            cx: point.x,
-                            cy: point.y,
-                            r: 4,
-                        },
-                        style: {
-                            stroke: '#4386FA', //绿
-                            fill: '#4386FA',
-                        },
-                        silent: true,
-                    };
+                label: {
+                    show: true,
+                    offset: [40, -17],
+                    color: "#D3E5FF",
+                    fontWeight: 500,
+                    position: "left",
+                    align: "left",
+                    fontSize: 14,
+                    fontFamily: "Source Han Sans CN",
+                    formatter: function (params) {
+                        return params.data.name;
+                    },
                 },
-                data: [0],
-            },
-            // 橘色
-            {
-                name: 'ring5',
-                type: 'custom',
-                coordinateSystem: 'none',
-                renderItem: function (params, api) {
+                data: result.map((item, index) => {
                     return {
-                        type: 'arc',
-                        shape: {
-                            cx: api.getWidth() / 2,
-                            cy: api.getHeight() / 2,
-                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2,// 200,
-                            startAngle: ((250 + -angle) * Math.PI) / 180,
-                            endAngle: ((10 + -angle) * Math.PI) / 180,
-                        },
-                        style: {
-                            stroke: '#0CD3DB',
-                            fill: 'transparent',
-                            lineWidth: 1.5,
+                        name: item.name,
+                        value: item.value,
+                        itemStyle: {
+                            barBorderRadius: [3, 0, 0, 3],
+                            color: {
+                                type: "linear",
+                                x: 0,
+                                y: 0,
+                                x2: 1,
+                                y2: 1,
+                                colorStops: [
+                                    {
+                                        offset: 0,
+                                        color: colorListA[index],
+                                    },
+                                    {
+                                        offset: 1,
+                                        color: colorList[index],
+                                    },
+                                ],
+                            },
                         },
-                        silent: true,
                     };
-                },
-                data: [0],
+                }),
             },
             {
-                name: 'ring5', //绿点
-                type: 'custom',
-                coordinateSystem: 'none',
-                renderItem: function (params, api) {
-                    let x0 = api.getWidth() / 2;
-                    let y0 = api.getHeight() / 2;
-                    let r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2 // 200;
-                    let point = getCirlPoint(x0, y0, r, 250 + -angle);
-                    return {
-                        type: 'circle',
-                        shape: {
-                            cx: point.x,
-                            cy: point.y,
-                            r: 4,
-                        },
-                        style: {
-                            stroke: '#0CD3DB', //绿
-                            fill: '#0CD3DB',
-                        },
-                        silent: true,
-                    };
+                name: "外圆",
+                type: "scatter",
+                emphasis: {
+                    scale: false,
                 },
-                data: [0],
-            },
-            // 粉色
-            {
-                name: 'ring5',
-                type: 'custom',
-                coordinateSystem: 'none',
-                renderItem: function (params, api) {
+                showSymbol: true,
+                symbol: "circle",
+                symbolSize: 8, // 进度条白点
+                z: 2,
+                data: result.map((item, index) => {
                     return {
-                        type: 'arc',
-                        shape: {
-                            cx: api.getWidth() / 2,
-                            cy: api.getHeight() / 2,
-                            r: Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2,// 200,,
-                            startAngle: ((70 + -angle) * Math.PI) / 180,
-                            endAngle: ((200 + -angle) * Math.PI) / 180,
-                        },
-                        style: {
-                            stroke: '#FF8E89',
-                            fill: 'transparent',
-                            lineWidth: 1.5,
+                        name: item.name,
+                        value: item.value,
+                        itemStyle: {
+                            color: colorListB[index],
+                            borderColor: colorListC[index],
+                            borderWidth: 12,
+                            shadowColor: colorListC[index],
+                            shadowBlur: 10,
+                            opacity: 1,
                         },
-                        silent: true,
                     };
+                }),
+                animationDelay: 500,
+            }, {
+                name: "外圆",
+                type: "scatter",
+                emphasis: {
+                    scale: false,
                 },
-                data: [0],
-            },
-            //粉色点
-            {
-                name: 'ring5',
-                type: 'custom',
-                coordinateSystem: 'none',
-                renderItem: function (params, api) {
-                    let x0 = api.getWidth() / 2;
-                    let y0 = api.getHeight() / 2;
-                    let r = Math.min(api.getWidth(), api.getHeight()) / 2 * outerRidus2// 200,;
-                    let point = getCirlPoint(x0, y0, r, 70 + -angle);
+                showSymbol: true,
+                symbol: "circle",
+                symbolSize: 3, // 进度条白点
+                z: 3,
+                data: result.map((item, index) => {
                     return {
-                        type: 'circle',
-                        shape: {
-                            cx: point.x,
-                            cy: point.y,
-                            r: 4,
-                        },
-                        style: {
-                            stroke: '#FF8E89', //粉
-                            fill: '#FF8E89',
+                        name: item.name,
+                        value: item.value,
+                        itemStyle: {
+                            color: colorListB[index],
+                            borderColor: colorListC[index],
+                            borderWidth: 30,
+                            shadowColor: colorListC[index],
+                            shadowBlur: 10,
+                            opacity: 1,
                         },
-                        silent: true,
                     };
-                },
-                data: [0],
+                }),
+                animationDelay: 500,
             },
         ],
     };
-
-    //获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
-    function getCirlPoint(x0, y0, r, angle) {
-        let x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
-        let y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
-        return {
-            x: x1,
-            y: y1,
-        };
-    }
-
     chartDom.setOption(option)
 };
 // 生命周期

src/views/system/receptiondesk/index.vue

@@ -1,24 +1,23 @@
 <template>
   <div class="tiondesk">
-
     <layout>
       <template #left>
         <div class="left_tiondesk">
           <div class="flex_spection">
-            <HeadlineTag value="会议议程"></HeadlineTag>
+            <HeadlineTag value="全年会议统计"></HeadlineTag>
             <div class="box_arch">
-              <conference></conference>
+              <conference :arrData="arrData"></conference>
             </div>
           </div>
           <div class="flex_spection">
-            <HeadlineTag value="学员反馈"></HeadlineTag>
+            <HeadlineTag value="会议室累计使用场数 (Top5)"></HeadlineTag>
             <div class="box_arch">
               <gambit></gambit>
             </div>
           </div>
           <div class="flex_spection">
-            <HeadlineTag value="会议话题列表"></HeadlineTag>
-            <div class="box_arch">
+            <HeadlineTag value="会议室累计使用时长 (Top5)"></HeadlineTag>
+            <div class="box_arch" style="justify-content: flex-end">
               <feedback></feedback>
             </div>
           </div>
@@ -27,19 +26,19 @@
       <template #right>
         <div class="right_tiondesk">
           <div class="flex_spection">
-            <HeadlineTag type="right" value="会议话题"></HeadlineTag>
+            <HeadlineTag type="right" value="部门全年会议次数统计"></HeadlineTag>
             <div class="box_arch">
               <wordcloud></wordcloud>
             </div>
           </div>
           <div class="flex_spection">
-            <HeadlineTag type="right" value="过去30天会议"></HeadlineTag>
+            <HeadlineTag type="right" value="会议时长分布"></HeadlineTag>
             <div class="box_arch">
               <formerly></formerly>
             </div>
           </div>
           <div class="flex_spection">
-            <HeadlineTag type="right" value="课程满意度评分条形图"></HeadlineTag>
+            <HeadlineTag type="right" value="会议人数分布"></HeadlineTag>
             <div class="box_arch">
               <satisfaction></satisfaction>
             </div>
@@ -47,18 +46,75 @@
         </div>
       </template>
     </layout>
+    <div class="top_desk">
+      <div class="desk_meeting">
+        <kilobit value="空闲会议室" :number="leisureNum" color="rgb(71, 143, 251)"></kilobit>
+      </div>
+      <div class="desk_meeting">
+        <kilobit value="使用中会议室" :number="busyNum" color="rgb(61, 250, 230)"></kilobit>
+      </div>
+      <div class="desk_meeting">
+        <kilobit value="禁用会议室" :number="forbiddenNum" color="rgb(222, 44, 22)"></kilobit>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup>
+import { getDataAnalysis } from "@/api/system/meeting"
 import layout from "@/components/layout_/index.vue";
 import HeadlineTag from '@/components/HeadlineTag'
+import kilobit from '@/components/kilobit'
 import conference from './conference'
 import feedback from './feedback'
 import gambit from './gambit'
 import wordcloud from './wordcloud'
 import formerly from './formerly'
 import satisfaction from './satisfaction'
+const leisureNum = ref([0, 0, 0, 0])
+const busyNum = ref([0, 0, 0, 0])
+const forbiddenNum = ref([0, 0, 0, 0])
+const arrData = ref({})
+// 生命周期
+onMounted(() => {
+  getStatisticData()
+  leisureNum.value = [0, 5, 3, 8]
+  busyNum.value = [0, 5, 3, 8]
+  forbiddenNum.value = [0, 5, 3, 8]
+});
+// 获取会议统计数据
+function getStatisticData() {
+  getDataAnalysis().then(res => {
+    if (res.code == 200) {
+      const arrList = res.data
+      arrData.value.meetingYearSum = arrList.meetingYearSum
+      arrData.value.meetingMonthHM = arrList.meetingMonthHM
+      arrData.value.meetingMonthSum = arrList.meetingMonthSum
+      arrData.value.meetingMonthManCount = arrList.meetingMonthManCount
+      arrData.value.meetingYearManCount = arrList.meetingYearManCount
+      arrData.value.meetingAvgDayCount = arrList.meetingAvgDayCount
+      arrData.value.meetingAvgTimes = arrList.meetingAvgTimes
+      arrData.value.meetingProlongYearCount = arrList.meetingProlongYearCount
+      arrData.value.meetingStopYearCount = arrList.meetingStopYearCount
+      arrData.value.meetingYearHM = arrList.meetingYearHM
+      leisureNum.value = Array.from(String(addZero(arrList.meetingRoomFreeCount)), Number)
+      busyNum.value = Array.from(String(addZero(arrList.meetingRoomOccupiedCount)), Number)
+      forbiddenNum.value = Array.from(String(addZero(arrList.meetingRoomForbiddenCount)), Number)
+
+      function addZero(num) {
+        if (num < 10) {
+          return '000' + num;
+        } else if (num < 100) {
+          return '00' + num;
+        } else if (num < 1000) {
+          return '0' + num;
+        } else {
+          return num;
+        }
+      }
+    }
+  })
+}
 </script>
 
 <style scoped lang="scss">
@@ -69,6 +125,21 @@ import satisfaction from './satisfaction'
   overflow: hidden;
 }
 
+.top_desk {
+  position: absolute;
+  top: 50px;
+  left: calc(50% - 25%);
+  width: 50%;
+  height: 100px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+}
+
+.desk_meeting {
+  flex: 1;
+}
+
 .left_tiondesk {
   position: absolute;
   left: 0;

src/views/system/receptiondesk/satisfaction.vue

@@ -15,184 +15,236 @@ defineProps({
 const chartDistrict = ref(null);
 let chartDom = null;
 const initAccess = () => {
+    const color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff']
+    const indicator = [
+        {
+            text: '1-5人',
+            min: 0,
+            max: 100
+        },
+        {
+            text: '5-15人',
+            min: 0,
+            max: 100
+        },
+        {
+            text: '15-50人',
+            min: 0,
+            max: 100
+        },
+        {
+            text: '50-100人',
+            min: 0,
+            max: 100
+        },
+        {
+            text: '100-500人',
+            min: 0,
+            max: 100
+        },
+        {
+            text: '500以上',
+            min: 0,
+            max: 100
+        }
+    ]
+    const Data = [80, 61, 70, 86, 77, 77]
+
+    function setData() {
+        return [
+            {
+                value: Data,
+                itemStyle: {
+                    normal: {
+                        lineStyle: {
+                            color: '#4BFFFC',
+                            shadowColor: '#4BFFFC',
+                            shadowBlur: 5
+                        },
+                        shadowColor: '#4BFFFC',
+                        shadowBlur: 5
+                    }
+                },
+                areaStyle: {
+                    normal: {
+                        // 单项区域填充样式
+                        color: {
+                            type: 'radial',
+                            x: 0.5, //右
+                            y: 0.5, //下
+                            r: 1,
+                            colorStops: [
+                                {
+                                    offset: 1,
+                                    color: '#4BFFFC'
+                                },
+                                {
+                                    offset: 0,
+                                    color: 'rgba(0,0,0,0)'
+                                }
+                            ],
+                            globalCoord: false
+                        },
+                        opacity: 0.8 // 区域透明度
+                    }
+                }
+            }
+        ]
+    }
+
+    function setgauge(i) {
+        return {
+            type: 'gauge',
+            detail: false,
+            splitNumber: 10, //刻度数量
+            radius: '80%', //图表尺寸
+            center: ['50%', '50%'],
+            startAngle: 90 + 72 * i + 18, //开始刻度的角度
+            endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度
+            axisLine: {
+                show: false
+            },
+            axisTick: {
+                show: true,
+                lineStyle: {
+                    color: '#66ccff',
+                    width: 1
+                },
+                length: 6,
+                splitNumber: 1
+            },
+            splitLine: {
+                show: false
+            },
+            axisLabel: {
+                show: false
+            }
+        }
+    }
+    function setSpot() {
+        var scatterData = []
+        Data.map((o, i) => {
+            scatterData.push({
+                value: [o, i],
+                itemStyle: {
+                    normal: {
+                        color: color[i],
+                        borderColor: '#fff',
+                        borderWidth: 1,
+                        shadowColor: color[i],
+                        shadowBlur: 8
+                    }
+                }
+            })
+        })
+        return scatterData
+    }
+
     chartDom = echarts.init(chartDistrict.value);
     let option = {
-        tooltip: {
-            trigger: 'item',
-            formatter: '{a}<br/>{b}:{c}千万元',
-            axisPointer: {
-                type: 'line',
+        polar: {
+            center: ['50%', '50%'],
+            radius: '60%'
+        },
+        radar: {
+            shape: 'circle',
+            center: ['50%', '50%'],
+            radius: '60%',
+            indicator: indicator,
+            axisName: {
+                color: '#fff',
+                fontSize: 16,
+                padding: -25
             },
-            textStyle: {
-                color: '#fafafa',
+            nameGap: 45,
+            splitNumber: 4,
+            splitArea: {
+                // 坐标轴在 grid 区域中的分隔区域，默认不显示。
+                show: true,
+                areaStyle: {
+                    // 分隔区域的样式设置。
+                    color: ['rgba(27, 50, 66, 0.4)']
+                }
             },
-            borderColor: 'transparent',
-            backgroundColor: 'rgba(0, 0, 0, 0.5)',
-            extraCssText: 'backdrop-filter: blur(6px);',
+            axisLine: {
+                //指向外圈文本的分隔线样式
+                lineStyle: {
+                    color: '#5aa3d0'
+                }
+            },
+            splitLine: {
+                lineStyle: {
+                    color: 'rgba(99,192,251,0.2)', // 分隔线颜色
+                    width: 2 // 分隔线线宽
+                }
+            }
         },
-        title: {
-            show: true,
-            text: '南丁格尔玫瑰图',
-            left: 'center',
-            top: 10,
-            textStyle: {
-                color: '#fff',
+        angleAxis: {
+            type: 'category',
+            data: name,
+            minInterval: 1,
+            boundaryGap: false,
+            clockwise: false,
+            axisTick: {
+                show: false
+            },
+            axisLabel: {
+                show: false
             },
+            axisLine: {
+                show: false
+            },
+            splitLine: {
+                show: false
+            }
         },
-        legend: {
-            show: true,
-            icon: 'circle',
-            x: 'center',
-            y: '15%',
-            data: ['医疗业务成本', '财政项目补助支出', '科教项目支出', '管理费用', '其他支出'],
-            textStyle: {
-                color: '#fff',
+        radiusAxis: {
+            min: 0,
+            max: 100,
+            interval: 25,
+            splitLine: {
+                show: false
+            },
+            axisTick: {
+                show: false
+            },
+            axisLine: {
+                //指向外圈文本的分隔线样式
+                lineStyle: {
+                    color: '#5aa3d0'
+                }
             },
+            axisLabel: {
+                fontSize: 12,
+                color: '#5aa3d0',
+                align: 'left',
+                margin: -5
+            }
         },
         series: [
+            setgauge(0),
+            setgauge(1),
+            setgauge(2),
+            setgauge(3),
+            setgauge(4),
             {
-                name: '总支出',
-                type: 'pie',
-                radius: [37, 155],
-                avoidLabelOverlap: false,
-                startAngle: 0,
-                center: ['50.1%', '35%'],
-                roseType: 'area',
-                selectedMode: 'single',
-                label: {
-                    normal: {
-                        show: true,
-                        formatter: '{c}千万元',
-                    },
-                    emphasis: {
-                        show: true,
-                    },
+                type: 'radar',
+                silent: true,
+                lineStyle: {
+                    color: '#66ffff'
                 },
-                labelLine: {
-                    normal: {
-                        show: true,
-                        smooth: false,
-                        length: 20,
-                        length2: 10,
-                    },
-                    emphasis: {
-                        show: true,
-                    },
+                areaStyle: {
+                    color: 'rgba(102, 255, 255, 0.31)'
                 },
-                data: [
-                    {
-                        value: 600.58,
-                        name: '医疗业务成本',
-                        itemStyle: {
-                            normal: {
-                                color: '#f845f1',
-                            },
-                        },
-                        label: {
-                            color: '#f845f1',
-                        },
-                    },
-                    {
-                        value: 1100.58,
-                        name: '财政项目补助支出',
-                        itemStyle: {
-                            normal: {
-                                color: '#ad46f3',
-                            },
-                        },
-                        label: {
-                            color: '#ad46f3',
-                        },
-                    },
-                    {
-                        value: 1200.58,
-                        name: '科教项目支出',
-                        itemStyle: {
-                            normal: {
-                                color: '#5045f6',
-                            },
-                        },
-                        label: {
-                            color: '#5045f6',
-                        },
-                    },
-                    {
-                        value: 1300.58,
-                        name: '管理费用',
-                        itemStyle: {
-                            normal: {
-                                color: '#4777f5',
-                            },
-                        },
-                        label: {
-                            color: '#4777f5',
-                        },
-                    },
-                    {
-                        value: 1400.58,
-                        name: '其他支出',
-                        itemStyle: {
-                            normal: {
-                                color: '#44aff0',
-                            },
-                        },
-                        label: {
-                            color: '#44aff0',
-                        },
-                    },
-                    {
-                        value: 0,
-                        name: '',
-                        label: {
-                            show: false,
-                        },
-                        labelLine: {
-                            show: false,
-                        },
-                    },
-                    {
-                        value: 0,
-                        name: '',
-                        label: {
-                            show: false,
-                        },
-                        labelLine: {
-                            show: false,
-                        },
-                    },
-                    {
-                        value: 0,
-                        name: '',
-                        label: {
-                            show: false,
-                        },
-                        labelLine: {
-                            show: false,
-                        },
-                    },
-                    {
-                        value: 0,
-                        name: '',
-                        label: {
-                            show: false,
-                        },
-                        labelLine: {
-                            show: false,
-                        },
-                    },
-                    {
-                        value: 0,
-                        name: '',
-                        label: {
-                            show: false,
-                        },
-                        labelLine: {
-                            show: false,
-                        },
-                    },
-                ],
+                data: setData()
             },
-        ],
+            {
+                type: 'scatter',
+                coordinateSystem: 'polar',
+                symbolSize: 10,
+                data: setSpot()
+            }
+        ]
     };
     chartDom.setOption(option)
 };

src/views/system/receptiondesk/wordcloud.vue

@@ -1,248 +1,179 @@
 <template>
-    <div class="person_box">
-        <div ref="chartDistrict" style="width: 100%;height: 100%;"></div>
+    <div class="card_visitor_star">
+        <div ref="chartcloud" style="width: 100%;height: 100%;"></div>
     </div>
 </template>
 
 <script setup>
 import * as echarts from 'echarts'
-defineProps({
-    title: {
-        type: String,
-        default: '暂无数据'
-    }
-})
-const chartDistrict = ref(null);
+const chartcloud = ref(null);
 let chartDom = null;
 const initAccess = () => {
-    const color = ['#3c90ff', '#fff225', '#24ffdf', '#ff9c3c', '#7536ff']
-    const indicator = [
-        {
-            text: '文明村',
-            min: 0,
-            max: 100
-        },
-        {
-            text: '卫生村',
-            min: 0,
-            max: 100
-        },
-        {
-            text: '森林村庄',
-            min: 0,
-            max: 100
+    chartDom = echarts.init(chartcloud.value);
+    let information = {
+        color: "#069DFD",
+        area: ["单位一", "单位二", "单位三", "单位四", "单位五", "单位六"],
+        dataArray: [560, 480, 350, 280, 220, 180],
+    };
+    let style = {
+        width: 32,
+        height: 24,
+        padding: [5, 6, 0, 0],
+        fontSize: 20,
+        align: "center",
+        color: "#ffffff"
+    }
+    let option = {
+        tooltip: {
+            trigger: "axis",
+            backgroundColor: "rgba(9,40,84,0.8)",
+            borderColor: "rgba(9,40,84,0.8)",
+            textStyle: {
+                fontSize: 20,
+                color: "#fff",
+            },
+            axisPointer: {
+                type: "shadow",
+            },
+            formatter: function (params) {
+                return (
+                    params[0].name +
+                    "&nbsp;&nbsp;&nbsp;&nbsp;<span style='font-weight:bold;color:'#fff'>" +
+                    params[0].value +
+                    "</span>"
+                );
+            },
         },
-        {
-            text: '全面小康',
-            min: 0,
-            max: 100
+        grid: {
+            left: "5%",
+            right: "5%",
+            top: "10%",
+            bottom: "20%", // 特殊
+            containLabel: true,
         },
-        {
-            text: '景区村庄',
-            min: 0,
-            max: 100
-        }
-    ]
-    const Data = [80, 61, 70, 86, 77]
-
-    function setData() {
-        return [
+        xAxis: [
             {
-                value: Data,
-                itemStyle: {
-                    normal: {
-                        lineStyle: {
-                            color: '#4BFFFC',
-                            shadowColor: '#4BFFFC',
-                            shadowBlur: 5
-                        },
-                        shadowColor: '#4BFFFC',
-                        shadowBlur: 5
-                    }
+                type: "value",
+                show: false,
+            },
+        ],
+        yAxis: [
+            {
+                type: "category",
+                splitLine: {
+                    show: false,
                 },
-                areaStyle: {
-                    normal: {
-                        // 单项区域填充样式
-                        color: {
-                            type: 'radial',
-                            x: 0.5, //右
-                            y: 0.5, //下
-                            r: 1,
-                            colorStops: [
+                axisLine: {
+                    show: false,
+                },
+                axisTick: {
+                    show: false,
+                },
+                inverse: true,
+                data: information.area,
+                axisLabel: {
+                    color: "rgba(239, 242, 250, 1)",
+                    margin: 10,
+                    rich: {
+                        ids: {
+                            padding: [0, 0, 0, 2],
+                            fontSize: 16,
+                            color: '#b4bec8',
+                        },
+                        nameStyle: {
+                            padding: [0, 10, 0, 2],
+                            fontSize: 16,
+                            color: '#fff',
+                        },
+                        rank: {
+                            ...style,
+                            backgroundColor: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
+                                {
+                                    offset: 0,
+                                    color: '#E7F4FF',
+                                },
                                 {
-                                    offset: 1,
-                                    color: '#4BFFFC'
+                                    offset: 0.95,
+                                    color: '#fff',
                                 },
+                            ]),
+                        },
+                        rank1: {
+                            ...style,
+                            color: "#FF992B",
+                            backgroundColor: new echarts.graphic.LinearGradient(0, 1, 1, 1, [
                                 {
                                     offset: 0,
-                                    color: 'rgba(0,0,0,0)'
-                                }
-                            ],
-                            globalCoord: false
+                                    color: '#E7F4FF',
+                                },
+                                {
+                                    offset: 0.95,
+                                    color: '#fff',
+                                },
+                            ]),
                         },
-                        opacity: 0.8 // 区域透明度
-                    }
-                }
-            }
-        ]
-    }
-
-    function setgauge(i) {
-        return {
-            type: 'gauge',
-            detail: false,
-            splitNumber: 10, //刻度数量
-            radius: '80%', //图表尺寸
-            center: ['50%', '50%'],
-            startAngle: 90 + 72 * i + 18, //开始刻度的角度
-            endAngle: 90 + 72 * (i + 1) - 18, //结束刻度的角度
-            axisLine: {
-                show: false
-            },
-            axisTick: {
-                show: true,
-                lineStyle: {
-                    color: '#66ccff',
-                    width: 1
+                    },
                 },
-                length: 6,
-                splitNumber: 1
-            },
-            splitLine: {
-                show: false
-            },
-            axisLabel: {
-                show: false
-            }
-        }
-    }
-    function setSpot() {
-        var scatterData = []
-        Data.map((o, i) => {
-            scatterData.push({
-                value: [o, i],
-                itemStyle: {
-                    normal: {
-                        color: color[i],
-                        borderColor: '#fff',
-                        borderWidth: 1,
-                        shadowColor: color[i],
-                        shadowBlur: 8
-                    }
-                }
-            })
-        })
-        return scatterData
-    }
-
-    chartDom = echarts.init(chartDistrict.value);
-    let option = {
-        polar: {
-            center: ['50%', '50%'],
-            radius: '60%'
-        },
-        radar: {
-            shape: 'circle',
-            center: ['50%', '50%'],
-            radius: '60%',
-            indicator: indicator,
-            axisName: {
-                color: '#fff',
-                fontSize: 16,
-                padding: -25
             },
-            nameGap: 45,
-            splitNumber: 4,
-            splitArea: {
-                // 坐标轴在 grid 区域中的分隔区域，默认不显示。
+            {
+                inverse: true,
+                axisTick: "none",
+                axisLine: "none",
                 show: true,
-                areaStyle: {
-                    // 分隔区域的样式设置。
-                    color: ['rgba(27, 50, 66, 0.4)']
-                }
-            },
-            axisLine: {
-                //指向外圈文本的分隔线样式
-                lineStyle: {
-                    color: '#5aa3d0'
-                }
-            },
-            splitLine: {
-                lineStyle: {
-                    color: 'rgba(99,192,251,0.2)', // 分隔线颜色
-                    width: 2 // 分隔线线宽
-                }
-            }
-        },
-        angleAxis: {
-            type: 'category',
-            data: name,
-            minInterval: 1,
-            boundaryGap: false,
-            clockwise: false,
-            axisTick: {
-                show: false
-            },
-            axisLabel: {
-                show: false
-            },
-            axisLine: {
-                show: false
-            },
-            splitLine: {
-                show: false
-            }
-        },
-        radiusAxis: {
-            min: 0,
-            max: 100,
-            interval: 25,
-            splitLine: {
-                show: false
-            },
-            axisTick: {
-                show: false
-            },
-            axisLine: {
-                //指向外圈文本的分隔线样式
-                lineStyle: {
-                    color: '#5aa3d0'
-                }
+                axisLabel: {
+                    color: "rgba(239, 242, 250, 1)",
+                    fontSize: 15,
+                    margin: 10,
+                    formatter: function (value) {
+                        return value;
+                    },
+                },
+                data: information.dataArray,
             },
-            axisLabel: {
-                fontSize: 12,
-                color: '#5aa3d0',
-                align: 'left',
-                margin: -5
-            }
-        },
+        ],
         series: [
-            setgauge(0),
-            setgauge(1),
-            setgauge(2),
-            setgauge(3),
-            setgauge(4),
             {
-                type: 'radar',
-                silent: true,
-                lineStyle: {
-                    color: '#66ffff'
+                type: "bar",
+                barWidth: 10, // 柱子宽度
+                MaxSize: 0,
+                showBackground: true,
+                backgroundStyle: {
+                    color: "rgb(10, 51, 126)",
+                    borderRadius: 5, //设置背景的圆角
                 },
-                areaStyle: {
-                    color: 'rgba(102, 255, 255, 0.31)'
-                },
-                data: setData()
+                data: information.dataArray.map((item) => {
+                    return {
+                        value: item,
+                        itemStyle: {
+                            borderRadius: 5,
+                            color: information.color,
+                        },
+                    };
+                }),
             },
             {
                 type: 'scatter',
-                coordinateSystem: 'polar',
-                symbolSize: 10,
-                data: setSpot()
-            }
-        ]
+                emphasis: {
+                    scale: false
+                },
+                symbol: 'rect',
+                itemStyle: {
+                    barBorderRadius: [30, 0, 0, 30],
+                    color: '#fff',
+                    shadowColor: '#fff',
+                    shadowBlur: 1,
+                    borderWidth: 1,
+                    opacity: 1
+                },
+                symbolSize: [4, 10], // 进度条白点的大小
+                z: 2,
+                data: [560, 480, 350, 280, 220, 180],
+            },
+        ],
     };
     chartDom.setOption(option)
 };
+
 // 生命周期
 onMounted(() => {
     initAccess()
@@ -254,10 +185,10 @@ window.addEventListener('resize', () => {
 </script>
 
 <style scoped lang="scss">
-.person_box {
+.card_visitor_star {
     width: 100%;
     height: 100%;
     display: flex;
-    align-items: center;
+    flex-direction: column;
 }
 </style>

src/views/system/tenement/index.vue

@@ -1,44 +1,41 @@
 <template>
     <div class="_energy">
-     <layout>
-         <template #left>
-            <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
-                <consume  style="flex:1;"/>
-                <running style="flex: 1;"/>
-                <carbonEmission style="flex:1;"/>
+        <layout>
+            <template #left>
+                <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
+                    <consume style="flex:1;" />
+                    <running style="flex: 1;" />
+                    <carbonEmission style="flex:1;" />
+                </div>
+            </template>
+            <template #content>
+                <p>物业</p>
+            </template>
+            <template #right>
+                <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
+                    <eventList style="flex: 1;" />
+                    <sameDay style="flex: 1;" />
+                    <tiring style="flex: 1;" />
+                </div>
+            </template>
+        </layout>
+    </div>
+</template>
 
-             </div>
-         </template>
-         <template #content>
-             <p>物业</p>
-         </template>
-         <template #right>
-            <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
-                <eventList style="flex: 1;"/>
-                <sameDay style="flex: 1;"/>
-                <tiring style="flex: 1;"/>
+<script setup name="Role">
+import layout from "@/components/layout_/index.vue";
 
-             </div>
-         </template>
-     </layout>
-    </div>
- </template>
- 
- <script setup name="Role">
- import layout from "@/components/layout_/index.vue";
+import running from './modules/running.vue'
+import consume from './modules/consume.vue'
+import carbonEmission from "./modules/carbonEmission.vue";
+import sameDay from './modules/sameDay.vue'
+import eventList from './modules/eventList.vue'
+import tiring from './modules/tiring.vue'
 
- import running from './modules/running.vue'
- import consume from './modules/consume.vue'
- import carbonEmission from "./modules/carbonEmission.vue";
- import sameDay from './modules/sameDay.vue'
- import eventList from './modules/eventList.vue'
- import tiring from './modules/tiring.vue'
 
- 
- </script> 
- <style lang="scss">
- ._energy{
-     height: 100%;
- }
- </style>
- 
+</script>
+<style lang="scss">
+._energy {
+    height: 100%;
+}
+</style>

src/views/system/tenement/modules/eventList.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_eventList">
-        <HeadlineTag value="人员出入记录" style="flex-shrink: 0;"></HeadlineTag>
+        <HeadlineTag type="right" value="人员出入记录" style="flex-shrink: 0;"></HeadlineTag>
         <div class="_eventList_mains" ref="mainsRef" @mouseenter="pauseCarousel" @mouseleave="resumeCarousel">
             <div :style="{ transform: `translateY(${scrollY}px)` }">
                 <div class="_eventList_mains_item" v-for="(item, index) in eventList.concat(eventList)" :key="index">

src/views/system/tenement/modules/sameDay.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_consume">
-        <HeadlineTag value="车库流动(周)"></HeadlineTag>
+        <HeadlineTag type="right" value="车库流动(周)"></HeadlineTag>
         <div class="_consume_mains">
             <div ref="chartRef" style="width: 100%; height: 100%;"></div>
         </div>

src/views/system/tenement/modules/tiring.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_eventList">
-        <HeadlineTag value="车辆出入记录" style="flex-shrink: 0;"></HeadlineTag>
+        <HeadlineTag type="right" value="车辆出入记录" style="flex-shrink: 0;"></HeadlineTag>
         <div class="_eventList_mains" ref="mainsRef" @mouseenter="pauseCarousel" @mouseleave="resumeCarousel">
             <div :style="{ transform: `translateY(${scrollY}px)` }">
                 <div class="_eventList_mains_item" v-for="(item, index) in eventList.concat(eventList)" :key="index">

src/views/system/video/modules/eventList.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_eventList">
-        <HeadlineTag value="监控列表" style="flex-shrink: 0;"></HeadlineTag>
+        <HeadlineTag type="right" value="监控列表" style="flex-shrink: 0;"></HeadlineTag>
         <div class="_eventList_mains" ref="mainsRef" @mouseenter="pauseCarousel" @mouseleave="resumeCarousel">
             <div :style="{ transform: `translateY(${scrollY}px)` }">
                 <div class="_eventList_mains_item" v-for="(item, index) in eventList.concat(eventList)" :key="index">

src/views/system/video/modules/sameDay.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="_runnin">
-        <HeadlineTag value="性能统计"></HeadlineTag>
+        <HeadlineTag type="right" value="性能统计"></HeadlineTag>
         <div class="_runnin_mains">
             <!-- 修正引用名称，与脚本里保持一致 -->
             <div class="_runnin_mains_item">

vite.config.js

@@ -7,20 +7,15 @@ export default defineConfig(({ mode, command }) => {
   const env = loadEnv(mode, process.cwd())
   const { VITE_APP_ENV } = env
   return {
-    // 部署生产环境和开发环境下的URL。
-    // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
-    // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
     base: VITE_APP_ENV === 'production' ? '/' : '/',
     plugins: createVitePlugins(env, command === 'build'),
     resolve: {
-      // https://cn.vitejs.dev/config/#resolve-alias
       alias: {
         // 设置路径
         '~': path.resolve(__dirname, './'),
         // 设置别名
         '@': path.resolve(__dirname, './src')
       },
-      // https://cn.vitejs.dev/config/#resolve-extensions
       extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
     },
     // vite 相关配置
@@ -35,10 +30,14 @@ export default defineConfig(({ mode, command }) => {
           target: 'http://182.43.195.17:8010',
           changeOrigin: true,
           rewrite: (p) => p.replace(/^\/dev-api/, '')
+        },
+        '/APP': {
+          target: 'http://182.43.247.65:8000',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/APP/, '')
         }
       }
     },
-    //fix:error:stdin>:7356:1: warning: "@charset" must be the first rule in the file
     css: {
       postcss: {
         plugins: [