0418

src/layout/index.vue

@@ -1,11 +1,14 @@
 <template>
-  <div class="app">
-    <div :class="classObj" class="app-wrapper">
-      <logo :collapse="isCollapse" class="fixed-header" />
-      <app-main />
-      <sidebar v-if="!sidebar.hide" class="fixed-bottom" />
+    <div class="app">
+
+        <div :class="classObj" class="app-wrapper">
+            <dv-full-screen-container>
+                <logo :collapse="isCollapse" class="fixed-header" />
+                <app-main />
+                <sidebar v-if="!sidebar.hide" class="fixed-bottom" />
+            </dv-full-screen-container>
+        </div>
     </div>
-  </div>
 </template>
 
 <script setup>
@@ -27,37 +30,37 @@ const needTagsView = computed(() => settingsStore.tagsView);
 const fixedHeader = computed(() => settingsStore.fixedHeader);
 
 const classObj = computed(() => ({
-  hideSidebar: !sidebar.value.opened,
-  openSidebar: sidebar.value.opened,
-  withoutAnimation: sidebar.value.withoutAnimation,
-  mobile: device.value === 'mobile'
+    hideSidebar: !sidebar.value.opened,
+    openSidebar: sidebar.value.opened,
+    withoutAnimation: sidebar.value.withoutAnimation,
+    mobile: device.value === 'mobile'
 }))
 
 const { width, height } = useWindowSize();
 const WIDTH = 992; // refer to Bootstrap's responsive design
 
 watch(() => device.value, () => {
-  if (device.value === 'mobile' && sidebar.value.opened) {
-    useAppStore().closeSideBar({ withoutAnimation: false })
-  }
+    if (device.value === 'mobile' && sidebar.value.opened) {
+        useAppStore().closeSideBar({ withoutAnimation: false })
+    }
 })
 
 watchEffect(() => {
-  if (width.value - 1 < WIDTH) {
-    useAppStore().toggleDevice('mobile')
-    useAppStore().closeSideBar({ withoutAnimation: true })
-  } else {
-    useAppStore().toggleDevice('desktop')
-  }
+    if (width.value - 1 < WIDTH) {
+        useAppStore().toggleDevice('mobile')
+        useAppStore().closeSideBar({ withoutAnimation: true })
+    } else {
+        useAppStore().toggleDevice('desktop')
+    }
 })
 
 function handleClickOutside() {
-  useAppStore().closeSideBar({ withoutAnimation: false })
+    useAppStore().closeSideBar({ withoutAnimation: false })
 }
 
 const settingRef = ref(null);
 function setLayout() {
-  settingRef.value.openSetting();
+    settingRef.value.openSetting();
 }
 </script>
 
@@ -66,53 +69,53 @@ function setLayout() {
 @import "@/assets/styles/variables.module.scss";
 
 .app {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  overflow: hidden;
-  background: radial-gradient(at 50% 50%, rgb(29, 52, 94) 1%, rgb(3, 22, 46) 60%);
+    position: relative;
+    height: 100%;
+    width: 100%;
+    overflow: hidden;
+    background: radial-gradient(at 50% 50%, rgb(29, 52, 94) 1%, rgb(3, 22, 46) 60%);
 }
 
 .app-wrapper {
-  @include clearfix;
-  position: relative;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  background-image:
-    repeating-linear-gradient(35deg, rgba(13, 28, 61, .5), rgba(13, 28, 61, .5) 1px, transparent 1px, transparent 70px),
-    repeating-linear-gradient(-35deg, rgba(13, 28, 61, .5), rgba(13, 28, 61, .5) 1px, transparent 1px, transparent 70px),
+    @include clearfix;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    background-image:
+        repeating-linear-gradient(35deg, rgba(13, 28, 61, .5), rgba(13, 28, 61, .5) 1px, transparent 1px, transparent 70px),
+        repeating-linear-gradient(-35deg, rgba(13, 28, 61, .5), rgba(13, 28, 61, .5) 1px, transparent 1px, transparent 70px),
 }
 
 .drawer-bg {
-  background: #000;
-  opacity: 0.3;
-  width: 100%;
-  top: 0;
-  height: 100%;
-  position: absolute;
-  z-index: 999;
+    background: #000;
+    opacity: 0.3;
+    width: 100%;
+    top: 0;
+    height: 100%;
+    position: absolute;
+    z-index: 999;
 }
 
 .fixed-header {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 9;
-  width: 100%;
-  transition: width 0.28s;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    z-index: 9;
+    width: 100%;
+    transition: width 0.28s;
 }
 
 .fixed-bottom {
-  position: fixed;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 9;
-  width: 100%;
-  transition: width 0.28s;
+    position: fixed;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    z-index: 9;
+    width: 100%;
+    transition: width 0.28s;
 }
 </style>

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

@@ -1,120 +1,71 @@
 <template>
     <div class="_running">
         <HeadlineTag value="运行统计"></HeadlineTag>
-
         <div class="_running_mains">
-            <div class="_running_mains_left">
-                <div class="_running_mains_left_tuan"></div>
-                <div class="_running_mains_left_conter">
-                    <div class="_running_mains_left_conter_num">785</div>
-                    <div class="_running_mains_left_conter_text">终端总量</div>
-                </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_tuan">
-                        <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}}
-                        </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>
-                    </div>
-                </div>
-            </div>
+            <dv-capsule-chart :config="config" style="width:100%;height:100%" />
         </div>
     </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onUnmounted } 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:'81', color:'rgb(244, 67, 54)', unit:'台'},
 
-])
+// 配置胶囊图数据
+const config = ref({
+    // 胶囊图数据
+    data: [
+        {
+            name: '使用中',
+            value: 154,
+        },
+        {
+            name: '空闲中',
+            value: 15,
+        },
+        {
+            name: '已离线',
+            value: 81,
+        }
+    ],
+    colors: ['#409eff', '#15acaa', '#f44336'], // 关键修改点
+    showValue: true,
+    // 图表样式配置
+    style: {
+        barWidth: 20, // 柱子宽度
+        barGap: 10, // 柱子间距
+        borderRadius: 10, // 柱子圆角
+        text: {
+            show: true, // 是否显示文字
+            fontSize: 12, // 文字大小
+            color: '#fff' // 文字颜色
+        }
+    }
+});
+
+// 组件卸载时的清理逻辑
+onUnmounted(() => {
+    // 这里可以添加额外的清理逻辑，如果 dv-capsule-chart 有提供销毁方法的话
+    // 例如：如果有一个销毁方法 destroy，可以这样调用
+    // chartInstance?.destroy(); 
+    // 但一般 DataV 组件会自动处理，这里可以留空
+});
 </script>
+
 <style lang="scss">
 ._running {
     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{
-                width: 100%;
-                height: 100%;
-                background: url("@/assets/images/content_circle.png");
-                background-size: 100% 100%;
-                background-position: center;
-                background-repeat: no-repeat;
-                animation: scanning 4s linear infinite;
-            }
-            &_conter {
-                position: absolute;
-                left: 0;
-                top: 0;
-            	flex-shrink: 0;
-                width: 100%;
-                height: 100%;
-                display: flex;
-                flex-direction: column;
-                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{
-                display: flex;
-                align-items: center; 
-                gap: 40px;
-                padding: 5px 0;
-                &_tuan {
-                    display: flex;
-                    align-items: center; 
-                    &_flag{
-                        display: block;
-                        width: 7px;
-                        height: 7px;
-                        border-radius: 50%;
-                        margin-right: 10px;
-                    }
-                }
-                &__txt{
-                    font-size:24px;
-                }
-            }
-        }
-
-        
     }
 }
 @keyframes scanning {
-		to {
-			transform: rotate(1turn);
-		}
-	}
+    to {
+        transform: rotate(1turn);
+    }
+}
 </style>

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

@@ -4,11 +4,12 @@
 
         <div class="_running_mains">
             <div class="_running_mains_left">
-                <div class="_running_mains_left_tuan"></div>
-                <div class="_running_mains_left_conter">
-                    <div class="_running_mains_left_conter_num">785</div>
-                    <div class="_running_mains_left_conter_text">电梯总量</div>
-                </div>
+                <dv-decoration-9 style="width:150px;height:150px;">
+                   <div class="_running_mains_left_conter">
+                        <div class="_running_mains_left_conter_num">785</div>
+                        <div class="_running_mains_left_conter_text">电梯总量</div>
+                   </div>
+                </dv-decoration-9>
             </div>
             <div class="_running_mains_right">
                 <div class="_running_mains_right_item" v-for="item,index in runningList" :key="index">
@@ -31,7 +32,6 @@
 <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:'台'},
@@ -40,7 +40,6 @@ const runningList = ref([
 <style lang="scss" scoped>
 ._running {
     display: flex;
-    align-items: center;
     flex-direction: column;
     &_mains {
         flex: 1;
@@ -52,15 +51,6 @@ const runningList = ref([
             height: 180px;
             position: relative;
             flex-shrink: 0;
-            &_tuan{
-                width: 100%;
-                height: 100%;
-                background: url("@/assets/images/content_circle.png");
-                background-size: 100% 100%;
-                background-position: center;
-                background-repeat: no-repeat;
-                animation: scanning 4s linear infinite;
-            }
             &_conter {
                 position: absolute;
                 left: 0;

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

@@ -41,7 +41,6 @@ const runningList = ref([
 <style lang="scss" scoped>
 ._running {
     display: flex;
-    align-items: center;
     flex-direction: column;
     &_mains {
         flex: 1;

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

@@ -0,0 +1,116 @@
+<template>
+    <div class="_running">
+        <HeadlineTag value="运行统计"></HeadlineTag>
+
+        <div class="_running_mains"> 
+            <div class="_running_mains_left">
+                <div class="_running_mains_left_tuan"></div>
+                <div class="_running_mains_left_conter">
+                    <div class="_running_mains_left_conter_num">62</div>
+                    <div class="_running_mains_left_conter_text">设备总数</div>
+                </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_tuan">
+                        <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}}
+                        </el-text>
+                    </div>
+                    <div class="_running_mains_right_item__txt">
+                        {{item.state}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import HeadlineTag from '@/components/HeadlineTag'
+const runningList = ref([
+    { name:'开启数量', state:'61', color:'#15acaa'},
+    { name:'关闭数量', state:'1', color:'#FFC107'},
+    { name:'故障数量', state:'0', color:'#F44336'}
+])
+</script>
+<style lang="scss" scoped>
+._running {
+    display: flex;
+    flex-direction: column;
+    &_mains {
+        flex: 1;
+        margin: 30px;
+        display: flex;
+        align-items: center;
+        &_left {
+            width: 150px;
+            height: 150px;
+            position: relative;
+            flex-shrink: 0;
+            &_tuan{
+                width: 100%;
+                height: 100%;
+                background: url("@/assets/images/content_circle.png");
+                background-size: 100% 100%;
+                background-position: center;
+                background-repeat: no-repeat;
+                animation: scanning 4s linear infinite;
+            }
+            &_conter {
+                position: absolute;
+                left: 0;
+                top: 0;
+            	flex-shrink: 0;
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                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{
+                display: flex;
+                align-items: center; 
+                gap: 40px;
+                padding: 5px 0;
+                &_tuan {
+                    display: flex;
+                    align-items: center; 
+                    &_flag{
+                        display: block;
+                        width: 7px;
+                        height: 7px;
+                        border-radius: 50%;
+                        margin-right: 10px;
+                    }
+                }
+                &__txt{
+                    font-size:24px;
+                }
+            }
+        }
+
+        
+    }
+}
+@keyframes scanning {
+		to {
+			transform: rotate(1turn);
+		}
+	}
+</style>

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

@@ -1,27 +1,15 @@
 <template>
     <div class="_running">
         <HeadlineTag value="运行统计"></HeadlineTag>
-
-        <div class="_running_mains">
-            <div class="_running_mains_left">
-                <div class="_running_mains_left_tuan"></div>
-                <div class="_running_mains_left_conter">
-                    <div class="_running_mains_left_conter_num">62</div>
-                    <div class="_running_mains_left_conter_text">设备总数</div>
-                </div>
+        <div class="_running_mains"> 
+            <div class="flex_person">
+                <div ref="chartAccessLeft" style="width: 100%;height: 100%;"></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_tuan">
-                        <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}}
-                        </el-text>
-                    </div>
-                    <div class="_running_mains_right_item__txt">
-                        {{item.state}}
-                    </div>
-                </div>
+            <!-- <div class="flex_person">
+                <div ref="chartAccessCenter" style="width: 100%;height: 100%;"></div>
+            </div> -->
+            <div class="flex_person">
+                <div ref="chartAccessRight" style="width: 100%;height: 100%;"></div>
             </div>
         </div>
     </div>
@@ -30,22 +18,186 @@
 <script setup>
 import { ref } from "vue";
 import HeadlineTag from '@/components/HeadlineTag'
+import * as echarts from 'echarts'
 const runningList = ref([
     { name:'开启数量', state:'61', color:'#15acaa'},
-    { name:'关闭数量', state:'1', color:'#FFC107'},
-    { name:'故障数量', state:'0', color:'#F44336'}
+    // { name:'关闭数量', state:'14', color:'#FFC107'},
+    { name:'故障数量', state:'34', color:'#F44336'}
 ])
+
+// 计算比例的函数
+const calculateRatios = () => {
+    const total = runningList.value.reduce((sum, item) => sum + parseInt(item.state, 10), 0);
+    return runningList.value.map(item => ({
+        ...item,
+        ratio: total > 0 ? (parseInt(item.state, 10) / total) * 100 : 0
+    }));
+};
+
+const chartAccessLeft = ref(null);
+const chartAccessRight = ref(null);
+
+let chartLeft = null;
+let chartRight = null;
+const initAccess = () => {
+    const ratios = calculateRatios();
+    ratios.forEach((item,index)=>{
+        console.log('比列',ratios)
+        const datas = {
+            value: item.ratio,
+            text: item.name
+        }
+        chartLeft = echarts.init(chartAccessLeft.value);
+        chartRight = echarts.init(chartAccessRight.value);
+        let option = {
+            series: [
+                /*仪表盘图，做中间刻度线*/
+                {
+                    type: 'gauge',
+                    name: '',
+                    radius: '86%',
+                    startAngle: '0',
+                    endAngle: '-359.99',
+                    center: ['50%', '50%'],
+                    splitNumber: '80',
+                    pointer: {
+                        show: false
+                    },
+                    title: {
+                        show: false
+                    },
+                    detail: {
+                        show: false
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            width: 20,
+                            opacity: 0
+                        }
+                    },
+                    axisTick: {
+                        show: false
+                    },
+                    splitLine: {
+                        show: true,
+                        length: 7,
+                        lineStyle: {
+                            color: {
+                                type: 'linear',
+                                colorStops: [{//内圆颜色
+                                    offset: 0, color: 'rgba(21, 172, 170, 0.32)' // 0% 处的颜色
+                                }, {
+                                    offset: 1, color: 'rgba(21, 172, 170, 1)' // 100% 处的颜色
+                                }],
+                            },
+                            width: 2,
+                            type: 'solid',
+                        },
+                    },
+                    axisLabel: {
+                        show: false
+                    }
+                },
+                /*内心原型图，展示整体数据概览*/
+                {
+                    name: 'pie',
+                    type: 'pie',
+                    roundCap: true,
+                    clockWise: true,
+                    startAngle: 260,
+                    labelLine: {
+                        show: false
+                    },
+                    radius: ['60%', '63%'],
+                    hoverAnimation: false,
+                    center: ['50%', '50%'],
+                    data: [
+                        {
+                            value: datas.value,
+                            label: {
+                                normal: {
+                                    formatter: '{d}{cell|%}\n{text|     ' + datas.text + '}',
+                                    // formatter: item.state+ '\n{text|'            + datas.text + '}',
+
+                                    position: 'center',
+                                    show: true,
+                                    textStyle: {//心内文字颜色
+                                        fontSize: '20',
+                                        fontWeight: 'normal',
+                                        color: '#15acaa',
+                                        lineHeight: 14,
+                                        rich: {
+                                            cell: {
+                                                fontSize: '14',
+                                                fontWeight: 'normal',
+                                                color: '#15acaa',
+                                                padding: [0, 0, 0, 5]
+                                            },
+                                            text: {//里面文字的颜色
+                                                fontSize: 12,
+                                                fontFamily: 'FZLanTingHeiS-L-GB',
+                                                color: '#15acaa',
+                                                padding: [5, 35, 0, 10]
+                                            }
+                                        }
+                                    }
+                                }
+                            },
+                            itemStyle: {
+                                normal: {
+                                    color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [{
+                                        offset: 0,
+                                        color: 'rgba(21, 172, 170,0.1)'
+                                    }]),
+                                    shadowColor: 'rgba(244, 67, 54,0.5)',
+                                    shadowBlur: 1
+                                }
+                            }
+                        },
+                        {
+                            value: 100 - datas.value,
+                            name: '',
+                            itemStyle: {
+                                normal: {
+                                    color: 'RGBA(5, 44, 78, 1)', // 已完成的圆环的颜色
+                                    label: {
+                                        show: false
+                                    },
+                                    labelLine: {
+                                        show: false
+                                    }
+                                },
+                                emphasis: {
+                                    color: 'RGBA(21, 172, 170, 1)' // 未完成的圆环的颜色
+                                }
+                            }
+                        }]
+                }
+            ]
+        };
+        if(index==0)chartLeft.setOption(option)
+        if(index==1)chartRight.setOption(option)
+    })
+    
+    
+};
+// 生命周期
+onMounted(() => {
+    initAccess()
+});
+// 窗口自适应
+window.addEventListener('resize', () => {
+    chartLeft?.resize();
+    chartRight?.resize();
+});
 </script>
 <style lang="scss" scoped>
 ._running {
     display: flex;
-    align-items: center;
     flex-direction: column;
     &_mains {
         flex: 1;
-        margin: 30px;
         display: flex;
-        align-items: center;
         &_left {
             width: 150px;
             height: 150px;
@@ -105,10 +257,13 @@ const runningList = ref([
                 }
             }
         }
-
-        
     }
 }
+.flex_person {
+    flex: 1;
+    width: 100%;
+    height: 100%;
+}
 @keyframes scanning {
 		to {
 			transform: rotate(1turn);

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

@@ -42,7 +42,6 @@ const runningList = ref([
 ._running {
     display: flex;
     flex-direction: column;
-    align-items: center;
     &_mains {
         flex: 1;
         margin: 30px;

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

@@ -42,7 +42,6 @@ const runningList = ref([
 <style lang="scss">
 ._running {
     display: flex;
-    align-items: center;
     flex-direction: column;
     &_mains {
         flex: 1;