楼栋楼层

src/components/layout_/index.vue

@@ -3,7 +3,7 @@
     <div class="_layout_mains">
       <div class="_layout_mains_item _layout_mains_left"
         :class="appStore.expandFoldType ? 'leftanimeHome' : 'leftanimeHome1'">
-        <slot name="left"></slot>{{ appStore.expandFoldType }}
+        <slot name="left"></slot>
       </div>
       <div class="_layout_mains_content">
         <slot name="content"></slot>

src/components/waterdrop/index.vue

@@ -1,9 +1,12 @@
 <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>
+            :style="{ width: width, height: heightDrop + 'px', border: `1px solid ${birderColor}` }">
+            <div class="wave"
+                :style="{ backgroundColor: `${color}`, '--heightTop': heightTop, '--circleBackGround': circleBackGround, }">
+                <div :style="{ fontSize: fontSize, }" style="z-index: 2;text-align: center;white-space: pre-wrap;">
+                    {{ dropTitle }}
+                </div>
             </div>
         </div>
     </div>
@@ -15,10 +18,18 @@ const props = defineProps({
         type: String,
         default: '80%',
     },
+    birderColor: {
+        type: String,
+        default: 'rgb(42, 139, 247)',
+    },
     color: {
         type: String,
         default: 'rgb(42, 139, 247)',
     },
+    fontSize: {
+        type: String,
+        default: '16px',
+    },
     dropTitle: {
         type: String,
         default: '暂无数据',
@@ -26,6 +37,10 @@ const props = defineProps({
     heightTop: {
         type: String,
         default: '-30%',
+    },
+    circleBackGround: {
+        type: String,
+        default: 'rgb(9, 38, 71)',
     }
 })
 const heightDrop = ref(0)
@@ -87,7 +102,7 @@ window.addEventListener('resize', () => {
 
 .wave::after {
     border-radius: 40%;
-    background-color: rgb(5, 26, 52);
+    background-color: var(--circleBackGround);
     animation: shi 15s linear infinite;
     transform: translate(-50%, -60%) rotate(0deg)
 }

src/layout/components/Sidebar/index.vue

@@ -23,19 +23,19 @@
               <div class="img_box_item" :class="getPathUrl(item.path) ? 'activate_img_sidebar' : ''">
                 <svg class="energy_box_icon" aria-hidden="true">
                   <defs>
-                    <linearGradient id="myGradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                    <linearGradient id="bottomBackGround" x1="0%" y1="100%" x2="0%" y2="0%">
                       <stop offset="0%" stop-color="rgb(20, 188, 244)" />
                       <stop offset="4%" stop-color="rgba(184, 225, 239, 1)" />
                       <stop offset="100%" stop-color="#ffffff" />
                     </linearGradient>
-                    <linearGradient id="activate_Gradient" x1="0%" y1="100%" x2="0%" y2="0%">
+                    <linearGradient id="activate_bottomBackGround" x1="0%" y1="100%" x2="0%" y2="0%">
                       <stop offset="0%" stop-color="#b68231" />
                       <stop offset="1%" stop-color="rgb(182, 130, 49)" />
                       <stop offset="100%" stop-color="#ffffff" />
                     </linearGradient>
                   </defs>
                   <use :xlink:href="iconName(item.meta.icon)"
-                    :fill="getPathUrl(item.path) ? `url('#activate_Gradient')` : `url('#myGradient')`" />
+                    :fill="getPathUrl(item.path) ? `url('#activate_bottomBackGround')` : `url('#bottomBackGround')`" />
                 </svg>
               </div>
               <span class="title_sidebar">{{ item.meta.title }}</span>

src/views/index.vue

@@ -9,12 +9,59 @@
       </template>
     </layout>
   </div>
+  <div class="card_floor_control">
+    <div class="floor_control" @click="switchover">{{ currentItem }}<span class="triangle"></span></div>
+    <div class="all_floor">
+      <div v-for="(item, index) in currentData" :key="index" @click="switchoverItem(item)">
+        {{ item.title }}
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
+import { ref, reactive } from 'vue';
 import layout from "@/components/layout_/index.vue";
 import leftDesk from './index/leftDesk.vue'
 import reightDesk from './index/reightDesk.vue'
+let currentItem = '全部';
+let currentId = 'all';
+const currentData = ref([])
+const showFloor = ref(false)
+const arrData = [{
+  title: '全部',
+  id: 'all',
+}, {
+  title: 'A栋',
+  id: 'A',
+  list: [{
+    title: '3F',
+  }, {
+    title: '2F',
+  }, {
+    title: '1F',
+  }]
+}, {
+  title: 'B栋',
+  id: 'B',
+}, {
+  title: 'C栋',
+  id: 'C',
+}, {
+  title: 'D栋',
+  id: 'D',
+}]
+function switchover() {
+  currentData.value = arrData
+}
+function switchoverItem(value) {
+  currentId = value.id
+  arrData.forEach((item) => {
+    if (currentId == item.id) {
+      currentData.value = item.list
+    }
+  })
+}
 </script>
 
 <style lang="scss">
@@ -57,4 +104,45 @@ import reightDesk from './index/reightDesk.vue'
 .text-red {
   color: rgb(239, 93, 57);
 }
+
+.card_floor_control {
+  position: absolute;
+  top: 100px;
+  right: calc(25% + 10px);
+  width: 100px;
+  height: 40px;
+}
+
+.floor_control {
+  position: absolute;
+  cursor: pointer;
+  top: 0px;
+  right: calc(25% + 10px);
+  width: 100px;
+  height: 40px;
+  background-color: rgba(54, 106, 160, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ffffff;
+  border-radius: 4px;
+
+  .triangle:after {
+    content: '';
+    display: inline-block;
+    margin-left: 20px;
+    width: 10px;
+    height: 10px;
+    border-top: 1px solid #ffffff;
+    border-right: 1px solid #ffffff;
+    transform: rotate(135deg);
+    -webkit-transform: rotate(135deg);
+  }
+}
+
+.all_floor {
+  position: absolute;
+  top: 50px;
+  background-color: #fff;
+}
 </style>

src/views/system/building/index.vue

@@ -5,8 +5,10 @@
                 <div class="left_spection">
                     <div style="height: 30%;">
                         <HeadlineTag value="水滴图"></HeadlineTag>
-                        <div class="box_arch">
-                            <waterdrop color="rgb(42, 139, 247)"></waterdrop>
+                        <div class="box_arch center_in">
+                            <div style="width: 50%;height: 100%;">
+                                <waterdrop width="100%" color="rgb(42, 139, 247)"></waterdrop>
+                            </div>
                         </div>
                     </div>
                     <div class="flex_spection">

src/views/system/energy/index.vue

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

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

@@ -2,7 +2,7 @@
     <div class="_running">
         <HeadlineTag type="right" value="能源统计"></HeadlineTag>
         <div class="_running_mains">
-            <div class="_running_mains_left">
+            <div class="_running_mains_left" id="runWidth" :style="{ '--heightRunning': heightRun + 'px' }">
                 <div class="_running_mains_left_tuan"></div>
                 <div class="_running_mains_left_conter">
                     <div class="_running_mains_left_conter_num">62</div>
@@ -10,15 +10,16 @@
                 </div>
             </div>
             <div class="_running_mains_right">
-                <div class="_running_mains_right_item" v-for="item,index in runningList" :key="index">
+                <div class="_running_mains_right_item" v-for="item, index in runningList" :key="index">
                     <div class="_running_mains_right_item_tuan">
-                        <span class="_running_mains_right_item_tuan_flag" :style="{backgroundColor: item.color}"></span>
+                        <span class="_running_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="_running_mains_right_item__txt">
-                        {{item.state}}
+                        {{ item.state }}
                     </div>
                 </div>
             </div>
@@ -30,28 +31,39 @@
 import { ref } from "vue";
 import HeadlineTag from '@/components/HeadlineTag'
 const runningList = ref([
-    { name:'能耗强度', state:'3541', color:'#15acaa'},
-    { name:'碳排总量', state:'134', color:'#FFC107'},
-    { name:'碳排强度', state:'16964', color:'#F44336'},
-    { name:'碳排总量', state:'645521', color:'#F44336'}
+    { name: '能耗强度', state: '3541', color: '#15acaa' },
+    { name: '碳排总量', state: '134', color: '#FFC107' },
+    { name: '碳排强度', state: '16964', color: '#F44336' },
+    { name: '碳排总量', state: '645521', color: '#F44336' }
 
 ])
+const heightRun = ref(0)
+// 生命周期
+onMounted(() => {
+    var element = document.getElementById("runWidth");
+    var width = element.offsetWidth;
+    heightRun.value = width
+});
 </script>
 <style lang="scss" scoped>
 ._running {
     display: flex;
     flex-direction: column;
+
     &_mains {
         flex: 1;
-        margin: 30px;
+        width: calc(100% - 30px);
+        padding-left: 30px;
         display: flex;
         align-items: center;
+
         &_left {
-            width: 180px;
-            height: 180px;
+            width: 40%;
+            height: var(--heightRunning);
             position: relative;
             flex-shrink: 0;
-            &_tuan{
+
+            &_tuan {
                 width: 100%;
                 height: 100%;
                 background: url("@/assets/images/content_circle.png");
@@ -60,11 +72,12 @@ const runningList = ref([
                 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;
@@ -72,27 +85,33 @@ const runningList = ref([
                 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;
@@ -100,18 +119,20 @@ const runningList = ref([
                         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/energy/modules/sameDay.vue

@@ -2,7 +2,7 @@
     <div class="_sameDay">
         <HeadlineTag value="水、电统计"></HeadlineTag>
         <div class="_sameDay_mains">
-            <div class="_sameDay_mains_left">
+            <div class="_sameDay_mains_left" id="dayWidth" :style="{ '--heightSameDay': heightDay + 'px' }">
                 <div class="_sameDay_mains_left_tuan"></div>
                 <div class="_sameDay_mains_left_conter">
                     <div class="_sameDay_mains_left_conter_num">
@@ -13,7 +13,8 @@
             <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_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 }}
                         </el-text>
@@ -38,13 +39,14 @@ const sameDayList = ref([
     { name: '本月用水', state: 7562, color: '#FFC107' },
 
 ])
-const generateRandomData = (length, max) => {
-    const randomData = [];
-    for (let i = 0; i < length; i++) {
-        randomData.push(Math.floor(Math.random() * max));
-    }
-    return randomData;
-};
+
+const heightDay = ref(0)
+// 生命周期
+onMounted(() => {
+    var element = document.getElementById("dayWidth");
+    var width = element.offsetWidth;
+    heightDay.value = width
+});
 </script>
 <style lang="scss" scoped>
 ._sameDay {
@@ -54,13 +56,14 @@ const generateRandomData = (length, max) => {
 
     &_mains {
         flex: 1;
-        margin: 30px;
+        width: calc(100% - 30px);
+        padding-left: 30px;
         display: flex;
         align-items: center;
 
         &_left {
-            width: 180px;
-            height: 180px;
+            width: 40%;
+            height: var(--heightSameDay);
             position: relative;
             flex-shrink: 0;
 

src/views/system/intruderalarm/index.vue

@@ -47,7 +47,12 @@
                                 <div class="tile_fx">告警风险</div>
                             </div>
                             <div class="box_water_drop">
-                                <div ref="chartWater" style="width: 140px;height: 140px;"></div>
+                                <div style="width: 140px;height: 140px;">
+                                    <waterdrop width="100%" fontSize="32px" circleBackGround="rgb(8, 36, 62)"
+                                        birderColor="transparent" color="rgb(42, 139, 247)" heightTop="-50%"
+                                        dropTitle="50%"></waterdrop>
+                                </div>
+                                <!-- <div ref="chartWater" style="width: 140px;height: 140px;"></div> -->
                             </div>
                         </div>
                     </div>
@@ -71,6 +76,7 @@
 </template>
 
 <script setup>
+import waterdrop from '@/components/waterdrop'
 import layout from "@/components/layout_/index.vue";
 import HeadlineTag from '@/components/HeadlineTag'
 import Empty from '@/components/Empty'
@@ -299,64 +305,6 @@ const initChart = () => {
         ],
     });
 };
-const chartWater = ref(null);
-let chartInstanceWater = null;
-const initWaterDrop = () => {
-    var value = 0.45;
-    chartInstanceWater = null
-    chartInstanceWater = echarts.init(chartWater.value);
-    chartInstanceWater.setOption({
-        series: [
-            {
-                type: 'liquidFill', //水位图
-                radius: '100%', //显示比例
-                center: ['50%', '50%'], //中心点
-                amplitude: 20, //水波振幅
-                data: [value, value], // data个数代表波浪数
-                color: [
-                    {
-                        type: 'linear',
-                        x: 0,
-                        y: 0,
-                        x2: 0,
-                        y2: 1,
-                        colorStops: [
-                            {
-                                offset: 0,
-                                color: '#446bf5',
-                            },
-                            {
-                                offset: 1,
-                                color: '#2ca3e2',
-                            },
-                        ],
-                        globalCoord: false,
-                    },
-                ], //波浪颜色
-                backgroundStyle: {
-                    borderWidth: 1, //外边框
-                    color: 'RGBA(51, 66, 127, 0.7)',
-                },
-                label: {
-                    //标签设置
-                    position: ['50%', '45%'],
-                    formatter: '50%', //显示文本,
-                    textStyle: {
-                        fontSize: '30px', //文本字号,
-                        color: '#fff',
-                    },
-                },
-                outline: {
-                    borderDistance: 0,
-                    itemStyle: {
-                        borderWidth: 2,
-                        borderColor: '#112165',
-                    },
-                },
-            },
-        ],
-    });
-}
 const chartFacility = ref(null);
 let chartInstanceFacility = null;
 const initFacility = () => {
@@ -573,17 +521,11 @@ const initFacility = () => {
 // 生命周期
 onMounted(() => {
     initChart()
-    initWaterDrop()
     initFacility()
 });
-onUnmounted(() => {
-    chartInstanceWater.clear()
-    chartInstanceWater = null
-})
 // 窗口自适应
 window.addEventListener('resize', () => {
     chartInstance?.resize();
-    chartInstanceWater?.resize();
     chartInstanceFacility?.resize();
 });
 </script>

src/views/system/receptiondesk/feedback.vue

@@ -1,7 +1,8 @@
 <template>
     <div class="person_box">
         <div style="width: 33%;height: 50%;" v-for="(item, index) in dropData">
-            <waterdrop :color="item.color" :heightTop="item.heightTop" :dropTitle="employData[index]"></waterdrop>
+            <waterdrop circleBackGround="rgb(5, 26, 52)" :birderColor="item.color" :color="item.color"
+                :heightTop="item.heightTop" :dropTitle="employData[index]"></waterdrop>
         </div>
     </div>
 </template>

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

@@ -1,9 +1,8 @@
 <template>
     <div class="_runnings">
         <HeadlineTag value="行为检测(周)"></HeadlineTag>
-
-        <div class="_runnings_mains">
-            <div class="_runnings_mains_left">
+        <div class="_runnings_mains" :style="{ '--heightSume': heightcon + 'px' }">
+            <div class="_runnings_mains_left" id="sumeWidth">
                 <div class="_runnings_mains_left_tuan tuan1"></div>
                 <div class="_runnings_mains_left_conter">
                     <div class="_runnings_mains_left_conter_num">785</div>
@@ -24,22 +23,6 @@
                     <div class="_runnings_mains_left_conter_text">丢失告警</div>
                 </div>
             </div>
-            
-            <!-- <div class="_runnings_mains_right">
-                <div class="_runnings_mains_right_item" v-for="item,index in runningList" :key="index">
-                    <div class="_runnings_mains_right_item_tuan">
-                        <span class="_runnings_mains_right_item_tuan_flag" :style="{backgroundColor: item.color}"></span>
-                        <el-tooltip :content="item.tip" placement="top" effect="light">
-                            <el-text class="w-150px mb-2" truncated style="color: #ccc;">
-                                {{item.name}}
-                            </el-text>
-                        </el-tooltip>
-                    </div>
-                    <div class="_runnings_mains_right_item__txt">
-                        {{item.state}}
-                    </div>
-                </div>
-            </div> -->
         </div>
     </div>
 </template>
@@ -48,50 +31,65 @@
 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: '物品遗留/丢失告警' },
 ])
+const heightcon = ref(0)
+// 生命周期
+onMounted(() => {
+    var element = document.getElementById("sumeWidth");
+    var width = element.offsetWidth;
+    heightcon.value = width
+});
 </script>
 <style lang="scss" scoped>
 .tuan1 {
-    background: url("@/assets/images/video_bg_1.png");	
+    background: url("@/assets/images/video_bg_1.png");
     animation: scanning 5s linear infinite;
 }
+
 .tuan2 {
-    background: url("@/assets/images/video_bg_2.png");	
+    background: url("@/assets/images/video_bg_2.png");
     animation: scanning 5s linear infinite;
 }
+
 .tuan3 {
-    background: url("@/assets/images/video_bg_3.png");	
+    background: url("@/assets/images/video_bg_3.png");
     animation: scanning 5s linear infinite;
 }
+
 ._runnings {
     display: flex;
     align-items: center;
     flex-direction: column;
+
     &_mains {
         flex: 1;
-        margin: 30px;
+        width: 100%;
         display: flex;
         align-items: center;
+        justify-content: space-around;
+
         &_left {
             flex-shrink: 0;
-            width: 140px;
-            height: 140px;
+            width: 32%;
+            height: var(--heightSume);
             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;
@@ -99,27 +97,33 @@ const runningList = ref([
                 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;
@@ -127,18 +131,20 @@ const runningList = ref([
                         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/video/modules/running.vue

@@ -1,9 +1,8 @@
 <template>
     <div class="_running">
         <HeadlineTag value="实时设备统计"></HeadlineTag>
-
         <div class="_running_mains">
-            <div class="_running_mains_left">
+            <div class="_running_mains_left" id="videoWidth" :style="{ '--heightRun': heightVideo + 'px' }">
                 <div class="_running_mains_left_tuan"></div>
                 <div class="_running_mains_left_conter">
                     <div class="_running_mains_left_conter_num">785</div>
@@ -11,16 +10,19 @@
                 </div>
             </div>
             <div class="_running_mains_right">
-                <div class="_running_mains_right_item" v-for="item,index in runningList" :key="index">
+                <div class="_running_mains_right_item" v-for="item, index in runningList" :key="index">
                     <div class="_running_mains_right_item_tuan">
-                        <span class="_running_mains_right_item_tuan_flag" :style="{backgroundColor: item.color}"></span>
+                        <span class="_running_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="_running_mains_right_item__txt">
-                        <span>{{item.state}}</span> 
-                        <span :style="{color:item.color,'font-size':'12px','margin-left':'5px'}">{{item.unit}}</span>
+                        <span>{{ item.state }}</span>
+                        <span :style="{ color: item.color, 'font-size': '12px', 'margin-left': '5px' }">
+                            {{ item.unit }}
+                        </span>
                     </div>
                 </div>
             </div>
@@ -31,28 +33,37 @@
 <script setup>
 import { ref } from "vue";
 import HeadlineTag from '@/components/HeadlineTag'
-import { color } from "echarts";
 const runningList = ref([
-    { name:'设备在线', state:'154', color:'#409eff', unit:'台'},
-    { name:'设备离线', state:'15', color:'#15acaa', unit:'台'},
-    { name:'存储容量', state:'134', color:'#FFC107', unit:'TB'},
-    { name:'存储剩余', state:'30', color:'#F44336', unit:'TB'},
+    { name: '设备在线', state: '154', color: '#409eff', unit: '台' },
+    { name: '设备离线', state: '15', color: '#15acaa', unit: '台' },
+    { name: '存储容量', state: '134', color: '#FFC107', unit: 'TB' },
+    { name: '存储剩余', state: '30', color: '#F44336', unit: 'TB' },
 ])
+const heightVideo = ref(0)
+// 生命周期
+onMounted(() => {
+    var element = document.getElementById("videoWidth");
+    var width = element.offsetWidth;
+    heightVideo.value = width
+});
 </script>
 <style lang="scss" scoped>
 ._running {
     display: flex;
     flex-direction: column;
+
     &_mains {
         flex: 1;
         margin: 30px;
         display: flex;
         align-items: center;
+
         &_left {
-            width: 180px;
-            height: 180px;
+            width: 40%;
+            height: var(--heightRun);
             position: relative;
-            &_tuan{
+
+            &_tuan {
                 width: 100%;
                 height: 100%;
                 background: url("@/assets/images/content_circle.png");
@@ -61,11 +72,12 @@ const runningList = ref([
                 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;
@@ -73,27 +85,33 @@ const runningList = ref([
                 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;
@@ -101,18 +119,20 @@ const runningList = ref([
                         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/video/modules/sameDay.vue

@@ -3,12 +3,19 @@
         <HeadlineTag type="right" value="性能统计"></HeadlineTag>
         <div class="_runnin_mains">
             <!-- 修正引用名称，与脚本里保持一致 -->
-            <div class="_runnin_mains_item">
-                <div ref="chartRefCPU" style="width: 140px;height: 140px;"></div>
+            <div class="_runnin_mains_item" style="width: 33%;height: 100%;">
+                <div style="width: 100%;">
+                    <waterdrop width="100%" fontSize="32px" circleBackGround="rgb(8, 36, 62)" birderColor="transparent"
+                        color="rgb(42, 139, 247)" heightTop="-50%" dropTitle="50%"></waterdrop>
+                </div>
                 <span style="margin-top: 10px;font-weight: bold;">CPU</span>
             </div>
-            <div class="_runnin_mains_item">
-                <div ref="chartRefRAM" style="width: 140px;height: 140px;"></div>
+            <div class="_runnin_mains_item" style="width: 33%;height: 100%;">
+                <div style="width: 100%;">
+                    <waterdrop width="100%" fontSize="32px" circleBackGround="rgb(8, 36, 62)"
+                        birderColor="rgb(8, 36, 62)" color="rgb(251, 97, 38)" heightTop="-65%" dropTitle="65%">
+                    </waterdrop>
+                </div>
                 <span style="margin-top: 10px;font-weight: bold;">RAM</span>
             </div>
         </div>
@@ -16,157 +23,9 @@
 </template>
 
 <script setup>
-import { ref, onMounted, nextTick } from "vue";
-import * as echarts from 'echarts'
 import 'echarts-liquidfill';
 import HeadlineTag from '@/components/HeadlineTag'
-const chartRefCPU = ref(null);
-const chartRefRAM = ref(null);
-let chartInstanceCPU = null;
-let chartInstanceRAM = null;
-
-const initCPUDrop = () => {
-    // 检查 DOM 元素是否存在
-    if (chartRefCPU.value) {
-        var value = 0.45;
-        chartInstanceCPU = null
-        chartInstanceCPU = echarts.init(chartRefCPU.value);
-        chartInstanceCPU.setOption({
-            series: [
-                {
-                    type: 'liquidFill', //水位图
-                    radius: '100%', //显示比例
-                    center: ['50%', '50%'], //中心点
-                    amplitude: 20, //水波振幅
-                    data: [value, value], // data个数代表波浪数
-                    color: [
-                        {
-                            type: 'linear',
-                            x: 0,
-                            y: 0,
-                            x2: 0,
-                            y2: 1,
-                            colorStops: [
-                                {
-                                    offset: 0,
-                                    color: '#446bf5',
-                                },
-                                {
-                                    offset: 1,
-                                    color: '#2ca3e2',
-                                },
-                            ],
-                            globalCoord: false,
-                        },
-                    ], //波浪颜色
-                    backgroundStyle: {
-                        borderWidth: 1, //外边框
-                        color: 'RGBA(51, 66, 127, 0.7)',
-                    },
-                    label: {
-                        //标签设置
-                        position: ['50%', '45%'],
-                        formatter: '50%', //显示文本,
-                        textStyle: {
-                            // 修改字体大小，例如改为 20px
-                            fontSize: '20px',
-                            color: '#fff',
-                        },
-                    },
-                    outline: {
-                        borderDistance: 0,
-                        itemStyle: {
-                            borderWidth: 2,
-                            borderColor: '#112165',
-                        },
-                    },
-                },
-            ],
-        });
-    }
-}
-const initRAMDrop = () => {
-    // 检查 DOM 元素是否存在
-    if (chartRefRAM.value) {
-        var value = 0.65;
-        chartInstanceRAM = null
-        chartInstanceRAM = echarts.init(chartRefRAM.value);
-        chartInstanceRAM.setOption({
-            series: [
-                {
-                    type: 'liquidFill', //水位图
-                    radius: '100%', //显示比例
-                    center: ['50%', '50%'], //中心点
-                    amplitude: 20, //水波振幅
-                    data: [value, value], // data个数代表波浪数
-                    // 修改波浪颜色
-                    color: [
-                        {
-                            type: 'linear',
-                            x: 0,
-                            y: 0,
-                            x2: 0,
-                            y2: 1,
-                            colorStops: [
-                                {
-                                    offset: 0,
-                                    // 例如改成红色系
-                                    color: '#ff4444',
-                                },
-                                {
-                                    offset: 1,
-                                    // 例如改成橙色系
-                                    color: '#ff8800',
-                                },
-                            ],
-                            globalCoord: false,
-                        },
-                    ],
-                    backgroundStyle: {
-                        borderWidth: 1, //外边框
-                        color: 'RGBA(51, 66, 127, 0.7)',
-                    },
-                    label: {
-                        //标签设置
-                        position: ['50%', '45%'],
-                        // 修改 formatter 为函数，动态显示百分比
-                        formatter: () => `${Math.round(value * 100)}%`,
-                        textStyle: {
-                            // 修改字体大小，例如改为 20px
-                            fontSize: '20px',
-                            color: '#fff',
-                        },
-                    },
-                    outline: {
-                        borderDistance: 0,
-                        itemStyle: {
-                            borderWidth: 2,
-                            borderColor: '#112165',
-                        },
-                    },
-                },
-            ],
-        });
-    }
-}
-// 生命周期
-onMounted(() => {
-    nextTick(() => {
-        initCPUDrop()
-        initRAMDrop()
-    })
-});
-onUnmounted(() => {
-    chartInstanceCPU.clear()
-    chartInstanceRAM.clear()
-    chartInstanceCPU = null
-    chartInstanceRAM = null
-})
-// 窗口自适应
-window.addEventListener('resize', () => {
-    chartInstanceRAM?.resize();
-    chartInstanceCPU?.resize();
-});
+import waterdrop from '@/components/waterdrop'
 </script>
 
 <style lang="scss" scoped>