水滴图、左右展开收起

src/components/layout_/index.vue

@@ -1,59 +1,132 @@
 <template>
-    <div class="_layout">
-        <div class="_layout_mains">
-            <div class="_layout_mains_item _layout_mains_left">
-                <slot name="left"></slot>
-            </div>
-            <div class="_layout_mains_content">
-                <slot name="content"></slot>
-            </div>
-            <div class="_layout_mains_item _layout_mains_right">
-                <slot name="right"></slot>
-            </div>
-        </div>
+  <div class="_layout">
+    <div class="_layout_mains">
+      <div class="_layout_mains_item _layout_mains_left"
+        :class="appStore.expandFoldType ? 'leftanimeHome' : 'leftanimeHome1'">
+        <slot name="left"></slot>{{ appStore.expandFoldType }}
+      </div>
+      <div class="_layout_mains_content">
+        <slot name="content"></slot>
+      </div>
+      <div class="_layout_mains_item _layout_mains_right"
+        :class="appStore.expandFoldType ? 'rightanimeHome' : 'rightanimeHome1'">
+        <slot name="right"></slot>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup>
 import { ref, reactive } from 'vue';
+import useAppStore from '@/store/modules/app'
+const appStore = useAppStore()
 </script>
 <style lang="scss">
 ._layout {
-    height: 100%;
-    box-sizing: border-box;
+  height: 100%;
+  box-sizing: border-box;
+  display: flex;
+
+  &_mains {
+    flex: 1;
+    margin-top: 46px;
+    // margin-bottom:76px;
+    position: relative;
     display: flex;
-    &_mains{
-        flex: 1;
-        margin-top: 46px;
-        // margin-bottom:76px;
-        position: relative;
-        display: flex;
-        &_item {
-            height: 100%;
-            width: 25%;
-            position: absolute;
-            top: 0;
-            background: rgba(#3b90d7,0.03);
-        }
-
-        &_left{
-            left: 0;
-            z-index:2;
-        }
-        &_right{
-            right: 0;
-            z-index:2;
-        }
-        &_content {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #fff;
-            font-weight: bold;
-            font-size: 100px;
-        }
+
+    &_item {
+      height: 100%;
+      width: 25%;
+      position: absolute;
+      top: 0;
+      background: rgba(#3b90d7, 0.03);
+    }
+
+    &_left {
+      left: 0;
+      z-index: 2;
+    }
+
+    &_right {
+      right: 0;
+      z-index: 2;
+    }
+
+    &_content {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      font-weight: bold;
+      font-size: 100px;
     }
-    
+  }
+}
+
+// 动画展开、收起
+.leftanimeHome {
+  animation: leftHomeCssHome 0.6s forwards;
+}
+
+.leftanimeHome1 {
+  animation: leftHomeCssHome1 0.6s forwards;
+}
+
+@keyframes leftHomeCssHome {
+
+  //展开
+  from {
+    transform: translate(-105%, 0);
+  }
+
+  to {
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes leftHomeCssHome1 {
+
+  //消失
+  from {
+    transform: translate(0, 0);
+  }
+
+  to {
+    transform: translate(-105%, 0);
+  }
+}
+
+// 动画展开、收起
+.rightanimeHome {
+  animation: rightHomeCssHome 0.6s forwards;
+}
+
+.rightanimeHome1 {
+  animation: rightHomeCssHome1 0.6s forwards;
+}
+
+@keyframes rightHomeCssHome {
+
+  //展开
+  from {
+    transform: translate(105%, 0);
+  }
+
+  to {
+    transform: translate(0, 0);
+  }
+}
+
+@keyframes rightHomeCssHome1 {
+
+  //消失
+  from {
+    transform: translate(0, 0);
+  }
+
+  to {
+    transform: translate(105%, 0);
+  }
 }
 </style>

src/components/waterdrop/index.vue

@@ -0,0 +1,121 @@
+<template>
+    <div class="person_box">
+        <div class="wave-box" id="myElement"
+            :style="{ width: width, height: heightDrop + 'px', border: `1px solid ${color}` }">
+            <div class="wave" :style="{ backgroundColor: `${color}`, '--heightTop': heightTop, }">
+                <div style="z-index: 2;text-align: center;white-space: pre-wrap;">{{ dropTitle }}</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    width: {
+        type: String,
+        default: '80%',
+    },
+    color: {
+        type: String,
+        default: 'rgb(42, 139, 247)',
+    },
+    dropTitle: {
+        type: String,
+        default: '暂无数据',
+    },
+    heightTop: {
+        type: String,
+        default: '-30%',
+    }
+})
+const heightDrop = ref(0)
+const heightTop = props.heightTop
+// 生命周期
+onMounted(() => {
+    var element = document.getElementById("myElement");
+    var width = element.offsetWidth;
+    heightDrop.value = width
+});
+
+onUnmounted(() => {
+})
+// 窗口自适应
+window.addEventListener('resize', () => {
+});
+</script>
+
+<style scoped lang="scss">
+.person_box {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.wave-box {
+    position: relative;
+    // width: 120px;
+    border-radius: 50%;
+    // border: 1px solid rgb(117, 196, 26); //边框颜色
+}
+
+.wave {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: #fff;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    // background-color: rgb(117, 196, 26); //颜色
+    border-radius: 50%;
+    overflow: hidden;
+}
+
+.wave::before,
+.wave::after {
+    content: '';
+    position: absolute;
+    // top: -60%; //高度
+    top: var(--heightTop);
+    left: 50%;
+    width: 250%;
+    height: 250%;
+}
+
+.wave::after {
+    border-radius: 40%;
+    background-color: rgb(5, 26, 52);
+    animation: shi 15s linear infinite;
+    transform: translate(-50%, -60%) rotate(0deg)
+}
+
+@keyframes shi {
+    0% {
+        transform: translate(-50%, -65%) rotate(0deg);
+    }
+
+    100% {
+        transform: translate(-50%, -65%) rotate(360deg);
+    }
+}
+
+.wave::before {
+    border-radius: 42%;
+    background-color: rgb(240, 228, 228, 0.2);
+    transform: translate(-50%, -65%) rotate(0deg);
+    animation: xu 17s linear infinite;
+}
+
+@keyframes xu {
+    0% {
+        transform: translate(-50%, -60%) rotate(0deg);
+    }
+
+    100% {
+        transform: translate(-50%, -60%) rotate(360deg);
+    }
+}
+</style>

src/layout/components/AppMain.vue

@@ -1,11 +1,11 @@
 <template>
   <section class="app-main">
     <router-view v-slot="{ Component, route }">
-      <transition name="fade-transform" mode="out-in">
+      <!-- <transition name="fade-transform" mode="out-in"> -->
         <keep-alive :include="tagsViewStore.cachedViews">
           <component v-if="!route.meta.link" :is="Component" :key="route.path" />
         </keep-alive>
-      </transition>
+      <!-- </transition> -->
     </router-view>
     <iframe-toggle />
     <!-- <iframe id="myIframe" :src="srcUrl" style="width: 100%;height: 100%;" frameborder="0" @mousemove="handleScroll"

src/layout/components/Sidebar/Logo.vue

@@ -21,13 +21,10 @@
       </div>
     </router-link>
     <div class="avatar-container">
-      <!-- <div class="box_padlock center_in">
-        <el-icon size="20" color="rgb(134, 25, 65)">
-          <SwitchButton />
-        </el-icon>
-        <div class="box_down"></div>
-      </div> -->
       <Dropdown :name="name" :options="['退出登录']" @changeData="logout"></Dropdown>
+      <div class="shiny-button" @click="expandFold">
+        {{ appStore.expandFoldType ?'收起':'展开'}}
+      </div>
     </div>
   </div>
 </template>
@@ -39,6 +36,7 @@ import { ElMessageBox } from 'element-plus'
 import useSettingsStore from '@/store/modules/settings'
 import variables from '@/assets/styles/variables.module.scss'
 import useUserStore from '@/store/modules/user'
+import useAppStore from '@/store/modules/app'
 import { weatherList } from "./mockData";
 defineProps({
   collapse: {
@@ -50,6 +48,7 @@ const imgUrl = ref('')
 const weathers = ref('')
 const temperatures = ref('')
 const userStore = useUserStore()
+const appStore = useAppStore()
 const name = userStore.name
 const title = import.meta.env.VITE_APP_TITLE;
 const settingsStore = useSettingsStore();
@@ -140,7 +139,6 @@ const getAddressByLatLng = async (ip) => {
     const geoResponse = await axios.get(
       `https://restapi.amap.com/v3/geocode/regeo?key=6bd1c2303f2ca454975738f8911a27ce&location=${latlng}`
     );
-    console.log('geoResponse是', geoResponse.data);
     getWeather(geoResponse.data.regeocode.addressComponent)
   } catch (error) {
     console.error('地理编码失败', error);
@@ -167,6 +165,16 @@ const getWeather = async (params) => {
     console.error('请求失败:', error);
   }
 }
+// 展开收起
+const expandFold = () =>{
+  let foldType = true
+  if(appStore.expandFoldType){
+    foldType = false
+  }else{
+    foldType = true
+  }
+  appStore.getExpandFold(foldType);
+}
 onMounted(() => {
   getIPCity()
 })
@@ -284,24 +292,72 @@ onMounted(() => {
   margin-right: 20px;
 }
 
-.box_padlock {
+.shiny-button {
+  user-select: none;
+  margin-left: 20px;
+  width: fit-content;
   position: relative;
+  padding: 2px 20px;
+  color: rgb(207, 248, 255);
+  border: 3px solid transparent;
+  border-radius: 60px;
+  background-color: rgb(6, 69, 73);
+  background-image: linear-gradient(to bottom right, rgb(10, 107, 115), rgb(2, 10, 14)), linear-gradient(125deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 53%);
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  background-size: 100%, 200%;
+  background-position: 0px, -150px;
+  animation: 4s border-glint linear backwards infinite;
+  animation-delay: 1s;
+  transition: box-shadow 0.25s, text-shaddw 0.25s;
+  overflow: hidden;
+}
+
+.shiny-button:hover {
   cursor: pointer;
-  margin-right: 15px;
-  width: 35px;
-  height: 35px;
-  border-radius: 50%;
-  border: 1px solid rgb(3, 94, 138);
-  background-color: rgb(11, 39, 90);
+  background-image: linear-gradient(-60deg, rgb(40, 105, 160) 0%, rgb(186, 211, 229) 100%), linear-gradient(125deg, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 53%);
+  color: rgb(250, 250, 255);
+  box-shadow: rgba(0, 0, 0, 0.7) 5px 5px 5px;
+  text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.7);
+  transition: box-shadow 0.25s, text-shaddw 0.25s;
 }
 
-.box_down {
+.shiny-button::after {
+  content: ' ';
   position: absolute;
-  top: 44px;
-  width: 100px;
-  height: 100px;
-  border-radius: 6px;
-  border: 1px solid rgb(3, 94, 138);
-  background-color: rgb(11, 39, 90);
+  top: -50%;
+  left: -120%;
+  width: 200%;
+  height: 200%;
+  background-image: linear-gradient(125deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 52%);
+  animation: 5s glint linear backwards infinite;
+  animation-delay: -3s;
+}
+
+@keyframes glint {
+  0% {
+    left: -120%;
+  }
+  8% {
+    left: 50%;
+  }
+  100% {
+    left: 50%;
+  }
+}
+
+@keyframes border-glint {
+  0% {
+    background-position: 0px, -250px;
+  }
+  25% {
+    background-position: 0px, -200px;
+  }
+  75% {
+    background-position: 0px, 50px;
+  }
+  100% {
+    background-position: 0px, 50px;
+  }
 }
 </style>

src/layout/components/Sidebar/index.vue

@@ -151,6 +151,7 @@ function iconName(iconClass) {
 }
 
 function goBack(event) {
+  appStore.getExpandFold(true);
   let path = '/system/' + event
   if (event == "/") {
     router.push("/index");

src/store/modules/app.js

@@ -9,6 +9,7 @@ const useAppStore = defineStore(
         withoutAnimation: false,
         hide: false
       },
+      expandFoldType: true,
       device: 'desktop',
       size: Cookies.get('size') || 'default'
     }),
@@ -39,6 +40,9 @@ const useAppStore = defineStore(
       },
       toggleSideBarHide(status) {
         this.sidebar.hide = status
+      },
+      getExpandFold(type) {
+        this.expandFoldType = type
       }
     }
   })

src/views/system/building/index.vue

@@ -3,18 +3,26 @@
         <layout>
             <template #left>
                 <div class="left_spection">
-                    <HeadlineTag value="设备列表"></HeadlineTag>
-                    <div class="box_arch_point">
-                        <div class="point_box" style="margin-top: 10px;margin-left: 15px;">
-                            <el-input v-model="input" placeholder="按设备名称搜索" />
-                        </div>
-                        <div style="height: calc(100% - 160px);">
-                            <Empty></Empty>
+                    <div style="height: 30%;">
+                        <HeadlineTag value="水滴图"></HeadlineTag>
+                        <div class="box_arch">
+                            <waterdrop color="rgb(42, 139, 247)"></waterdrop>
                         </div>
-                        <div class="center_in">
-                            <pagination :total="total" v-model:page="queryParams.pageNum"
-                                v-model:limit="queryParams.pageSize" layout="total, prev, pager, next"
-                                @pagination="getList" />
+                    </div>
+                    <div class="flex_spection">
+                        <HeadlineTag value="设备列表"></HeadlineTag>
+                        <div class="box_arch_point">
+                            <div class="point_box" style="margin-top: 10px;margin-left: 15px;">
+                                <el-input v-model="input" placeholder="按设备名称搜索" />
+                            </div>
+                            <div style="height: calc(100% - 160px);">
+                                <Empty></Empty>
+                            </div>
+                            <div class="center_in">
+                                <pagination :total="total" v-model:page="queryParams.pageNum"
+                                    v-model:limit="queryParams.pageSize" layout="total, prev, pager, next"
+                                    @pagination="getList" />
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -67,6 +75,7 @@
 import layout from "@/components/layout_/index.vue";
 import HeadlineTag from '@/components/HeadlineTag'
 import Empty from '@/components/Empty'
+import waterdrop from '@/components/waterdrop'
 import * as echarts from 'echarts'
 const total = ref(0);
 const queryParams = ref({

src/views/system/receptiondesk/feedback.vue

@@ -1,251 +1,36 @@
 <template>
     <div class="person_box">
-        <div ref="chartDistrict" style="width: 100%;height: 100%;"></div>
+        <div style="width: 33%;height: 50%;" v-for="(item, index) in dropData">
+            <waterdrop :color="item.color" :heightTop="item.heightTop" :dropTitle="employData[index]"></waterdrop>
+        </div>
     </div>
 </template>
 
 <script setup>
-import * as echarts from 'echarts'
-import 'echarts-liquidfill';
+import waterdrop from '@/components/waterdrop'
 const props = defineProps({
     resultData: {
         type: Array,
         default: []
     }
 })
+const dropData = ref([{
+    color: 'rgb(42, 139, 247)',
+    heightTop: '-80%',
+}, {
+    color: 'rgb(250, 139, 31)',
+    heightTop: '-25%',
+}, {
+    color: 'rgb(138, 136, 27)',
+    heightTop: '-20%',
+}, {
+    color: 'rgb(140, 229, 41)',
+    heightTop: '-15%',
+}, {
+    color: 'rgb(131, 255, 233)',
+    heightTop: '-15%',
+}])
 const employData = ref([])
-const chartDistrict = ref(null);
-let chartDom = null;
-const initAccess = () => {
-    chartDom = null
-    chartDom = echarts.init(chartDistrict.value);
-    let option = {
-        series: [{
-            type: "liquidFill",
-            radius: "40%",
-            // 水球颜色
-            color: ["#2c90fa"],
-            center: ["18%", "25%"],
-            label: {
-                position: ['50%', '50%'],
-                formatter: function () {
-                    return employData.value[0];
-                },
-                fontSize: 16,
-                color: '#fff',
-            },
-            itemStyle: {
-                opacity: 0.5, //波浪的透明度
-                shadowBlur: 10, //波浪的阴影范围
-                shadowColor: "#072F3A", //阴影颜色
-            },
-            outline: {
-                show: true, //是否显示轮廓 布尔值
-                borderDistance: 0, //外部轮廓与图表的距离 数字
-                itemStyle: {
-                    borderColor: "#2c90fa", //边框的颜色
-                    borderWidth: 1, //边框的宽度
-                },
-            },
-            emphasis: {
-                itemStyle: {
-                    opacity: 1, //鼠标经过波浪颜色的透明度
-                },
-            },
-            data: [0.8, 0.7804],
-            amplitude: 6, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
-            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: {
-                position: ['50%', '50%'],
-                formatter: function () {
-                    return employData.value[1];
-                },
-                fontSize: 16,
-                color: '#fff',
-            },
-            itemStyle: {
-                opacity: 0.5, //波浪的透明度
-                shadowBlur: 10, //波浪的阴影范围
-                shadowColor: "#fdaf61", //阴影颜色
-            },
-            outline: {
-                show: true, //是否显示轮廓 布尔值
-                borderDistance: 0, //外部轮廓与图表的距离 数字
-                itemStyle: {
-                    borderColor: "#fdaf61", //边框的颜色
-                    borderWidth: 1, //边框的宽度
-                },
-            },
-            emphasis: {
-                itemStyle: {
-                    opacity: 1, //鼠标经过波浪颜色的透明度
-                },
-            },
-            data: [0.4, 0.4444],
-            amplitude: 6, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
-            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: {
-                position: ['50%', '50%'],
-                formatter: function () {
-                    return employData.value[2];
-                },
-                fontSize: 16,
-                color: '#fff',
-            },
-            itemStyle: {
-                opacity: 0.5, //波浪的透明度
-                shadowBlur: 10, //波浪的阴影范围
-                shadowColor: "#d4cc3e", //阴影颜色
-            },
-            outline: {
-                show: true, //是否显示轮廓 布尔值
-                borderDistance: 0, //外部轮廓与图表的距离 数字
-                itemStyle: {
-                    borderColor: "#d4cc3e", //边框的颜色
-                    borderWidth: 1, //边框的宽度
-                },
-            },
-            emphasis: {
-                itemStyle: {
-                    opacity: 1, //鼠标经过波浪颜色的透明度
-                },
-            },
-            data: [0.3, 0.2544],
-            amplitude: 6, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
-            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: {
-                position: ['50%', '50%'],
-                formatter: function () {
-                    return employData.value[3];
-                },
-                fontSize: 16,
-                color: '#fff',
-            },
-            itemStyle: {
-                opacity: 0.5, //波浪的透明度
-                shadowBlur: 10, //波浪的阴影范围
-                shadowColor: "#beff72", //阴影颜色
-            },
-            outline: {
-                show: true, //是否显示轮廓 布尔值
-                borderDistance: 0, //外部轮廓与图表的距离 数字
-                itemStyle: {
-                    borderColor: "#beff72", //边框的颜色
-                    borderWidth: 1, //边框的宽度
-                },
-            },
-            emphasis: {
-                itemStyle: {
-                    opacity: 1, //鼠标经过波浪颜色的透明度
-                },
-            },
-            data: [0.2, 0.1544],
-            amplitude: 6, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
-            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: {
-                position: ['50%', '50%'],
-                formatter: function () {
-                    return employData.value[4];
-                },
-                fontSize: 16,
-                color: '#fff',
-            },
-            itemStyle: {
-                opacity: 0.5, //波浪的透明度
-                shadowBlur: 10, //波浪的阴影范围
-                shadowColor: "#7cf2e0", //阴影颜色
-            },
-            outline: {
-                show: true, //是否显示轮廓 布尔值
-                borderDistance: 0, //外部轮廓与图表的距离 数字
-                itemStyle: {
-                    borderColor: "#7cf2e0", //边框的颜色
-                    borderWidth: 1, //边框的宽度
-
-                },
-            },
-            emphasis: {
-                itemStyle: {
-                    opacity: 1, //鼠标经过波浪颜色的透明度
-                },
-            },
-            data: [0.12, 0.1044],
-            amplitude: 6, //振幅 是波浪的震荡幅度 可以取具体的值 也可以是百分比 百分比下是按图标的直径来算
-            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)
-};
 
 watch(() => props.resultData, (newVal) => {
     let arrData = newVal
@@ -265,56 +50,13 @@ watch(() => props.resultData, (newVal) => {
         let arr = item.hours + '\n' + nameTitle
         employData.value.push(arr)
     })
-    if (chartDom) {
-        chartDom = echarts.init(chartDistrict.value);
-        chartDom.setOption({
-            series: [{
-                label: {
-                    formatter: function () {
-                        return employData.value[0];
-                    },
-                }
-            }, {
-                label: {
-                    formatter: function () {
-                        return employData.value[1];
-                    },
-                }
-            }, {
-                label: {
-                    formatter: function () {
-                        return employData.value[2];
-                    },
-                }
-            }, {
-                label: {
-                    formatter: function () {
-                        return employData.value[3];
-                    },
-                }
-            }, {
-                label: {
-                    formatter: function () {
-                        return employData.value[4];
-                    },
-                }
-            }],
-        })
-    }
 }, { deep: true, immediate: true } // 开启深度监听
 )
 // 生命周期
 onMounted(() => {
-    initAccess()
 });
 onUnmounted(() => {
-    chartDom.clear()
-    chartDom = null
 })
-// 窗口自适应
-window.addEventListener('resize', () => {
-    chartDom?.resize();
-});
 </script>
 
 <style scoped lang="scss">
@@ -323,5 +65,8 @@ window.addEventListener('resize', () => {
     height: 100%;
     display: flex;
     align-items: center;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
 }
 </style>

src/views/system/receptiondesk/formerly.vue

@@ -337,7 +337,6 @@ function getPie3D(pieData, internalDiameterRatio) {
     return series;
 }
 watch(() => props.yData, (newVal) => {
-    let arrData = newVal
     if (chartDom) {
         let xData = props.xData
         let yData = props.yData

src/views/system/receptiondesk/gambit.vue

@@ -289,7 +289,6 @@ const initAccess = () => {
 watch(() => props.resultData, (newVal) => {
     let arrData = newVal
     if (chartDom) {
-        chartDom = echarts.init(chartDistrict.value);
         chartDom.setOption({
             yAxis: [{
                 data: arrData.map((item) => item.name)
@@ -358,6 +357,10 @@ watch(() => props.resultData, (newVal) => {
     }
 }, { deep: true, immediate: true } // 开启深度监听
 )
+onUnmounted(() => {
+    chartDom.clear()
+    chartDom = null
+})
 // 生命周期
 onMounted(() => {
     initAccess()

src/views/system/receptiondesk/index.vue

@@ -156,7 +156,6 @@ function getStatisticData() {
         }
       }
       subscribeData.value = result
-      console.log(timeType.value, 'timeType');
       if (timeType.value == 'month') {
         gamesData.value = arrList.meetingRoomMonthUseCount
         let keysArray = Object.keys(arrList.meetingTimeMonth).map(item => {