0416

package.json

@@ -17,21 +17,14 @@
   },
   "dependencies": {
     "@element-plus/icons-vue": "2.3.1",
-<<<<<<< HEAD
     "@jiaminghi/data-view": "^2.10.0",
-=======
     "@kjgl77/datav-vue3": "^1.7.4",
->>>>>>> 25e7644eedaba5882506f3898abaee6bcb67295e
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "10.11.0",
     "axios": "0.28.1",
     "clipboard": "2.0.11",
-<<<<<<< HEAD
-    "echarts": "^5.6.0",
-=======
     "echarts": "5.5.1",
     "echarts-liquidfill": "^3.1.0",
->>>>>>> 25e7644eedaba5882506f3898abaee6bcb67295e
     "element-plus": "2.7.6",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",

src/components/layout_/index.vue

@@ -34,7 +34,7 @@ import { ref, reactive } from 'vue';
             width: 25%;
             position: absolute;
             top: 0;
-            background: rgba(#021130,0.8);
+            background: rgba(#3b90d7,0.03);
         }
 
         &_left{

src/views/system/elevator/index.vue

@@ -1,24 +1,42 @@
 <template>
-   <div class="_energy">
-    <layout>
-        <template #left>
-            <p>这是插槽的内容</p> 
-        </template>
-        <template #content>
-            <p>电梯</p>
-        </template>
-        <template #right>
-            <p>这是右侧插槽的内容</p>
-        </template>
-    </layout>
-   </div>
-</template>
+    <div class="_energy">
+     <layout>
+         <template #left>
+            <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>
+         <template #content>
+             <p>电梯</p>
+         </template>
+         <template #right>
+            <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
+                <eventList style="flex: 1;"/>
+                <tiring style="flex: 1;"/>
+                <sameDay style="flex: 1;"/>
+             </div>
+         </template>
+     </layout>
+    </div>
+ </template>
+ 
+ <script setup name="Role">
+ import layout from "@/components/layout_/index.vue";
 
-<script setup name="Role">
-import layout from "@/components/layout_/index.vue";
-</script> 
-<style lang="scss">
-._energy{
-    height: 100%;
-}
-</style>
+ 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>
+ 

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

@@ -0,0 +1,209 @@
+<template>
+    <div class="_consume">
+        <HeadlineTag value="运行状态(周)"></HeadlineTag>
+        <div class="_consume_mains">
+            <div ref="chartRef" style="width: 100%; height: 100%;"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+import HeadlineTag from '@/components/HeadlineTag';
+
+const chartRef = ref(null);
+let chart = null;
+
+const generateRandomData = (length, max) => {
+    const randomData = [];
+    for (let i = 0; i < length; i++) {
+        randomData.push(Math.floor(Math.random() * max));
+    }
+    return randomData;
+};
+
+const handleResize = () => {
+    if (chart) {
+        chart.resize();
+    }
+};
+
+onMounted(() => {
+    if (chartRef.value) {
+        chart = echarts.init(chartRef.value);
+
+        // 生成一周的日期数据
+        const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+
+        const option = {
+            xAxis: {
+                type: 'category',
+                data: weekDays,
+                axisLabel: {
+                    color: '#fff'
+                },
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross',
+                    crossStyle: {
+                        color: '#999'
+                    }
+                }
+            },
+            grid: {
+                top: '10%',
+                bottom: '10%',
+                right: '0%',
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    show: true,
+                    color: '#fff'
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#44585e'
+                    }
+                },
+                axisTick: {
+                    show: false
+                },
+            },
+            series: [
+                // 柱状图表示运行正常
+                {
+                    name: '运行正常',
+                    type: 'bar',
+                    data: generateRandomData(7, 50),
+                    barWidth: '30%',
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: '#78befe' // 0% 处的颜色
+                            }, {
+                                offset: 1, color: '#0352fb' // 100% 处的颜色
+                            }],
+                            global: false // 缺省为 false
+                        },
+                        barBorderRadius: [10, 10, 10,10]
+                    },
+                },
+                // 曲线表示运行异常
+                {
+                    name: '运行异常',
+                    type: 'line',
+                    data: generateRandomData(7, 50),
+                    lineStyle: {
+                        color: '#216b87',
+                    },
+                    showSymbol: false,
+                    smooth: true,
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [{
+                                offset: 0,
+                                color: 'rgba(0, 247, 255, .6)',
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(0, 247, 255, .2)',
+                            },
+                            ],
+                            false
+                        ),
+                        shadowColor: 'rgba(0, 0, 0, 0.1)',
+                        shadowBlur: 10,
+                    },
+                }
+            ]
+        };
+
+        chart.setOption(option);
+    }
+    window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+    if (chart) {
+        chart.dispose();
+    }
+});
+</script>
+
+<style lang="scss">
+._divider {
+    height: 1px;
+    border: 1px dashed #168cdb;
+    flex: 1;
+    margin: 0 10px;
+}
+
+._consume {
+    display: flex;
+    flex-direction: column;
+
+    &_mains {
+        margin: 10px 30px;
+        flex: 1;
+        display: flex;
+
+        &_item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+
+            &_name {
+                width: 30px;
+                height: 30px;
+                background: url("@/assets/images/content_circle_num.png");
+                background-size: 100% 100%;
+                background-position: center;
+                background-repeat: no-repeat;
+                // animation: scanning 4s linear infinite;
+                border: 1px solid red;
+            }
+
+            &_flag {
+                display: flex;
+                align-items: center;
+                gap: 3px;
+
+                &_item {
+                    width: 30px;
+                    height: 30px;
+                    border: 3px dashed #168cdb;
+                    box-sizing: border-box;
+                    background: #0e6ead;
+                    color: #fff;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                }
+            }
+        }
+
+        &_item:hover {
+            cursor: pointer;
+            background-image: linear-gradient(to right, #168cdb, transparent);
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,99 @@
+<template>
+    <div class="_runnings">
+        <HeadlineTag value="行为检测(周)"></HeadlineTag>
+
+        <div class="_runnings_mains">
+            <div class="_runnings_mains_left">
+                <div class="_runnings_mains_left_tuan tuan1"></div>
+                <div class="_runnings_mains_left_conter">
+                    <div class="_runnings_mains_left_conter_num">785</div>
+                    <div class="_runnings_mains_left_conter_text">超载预警</div>
+                </div>
+            </div>
+            <div class="_runnings_mains_left">
+                <div class="_runnings_mains_left_tuan tuan2"></div>
+                <div class="_runnings_mains_left_conter">
+                    <div class="_runnings_mains_left_conter_num">54</div>
+                    <div class="_runnings_mains_left_conter_text">困人告警</div>
+                </div>
+            </div>
+            <div class="_runnings_mains_left">
+                <div class="_runnings_mains_left_tuan tuan3"></div>
+                <div class="_runnings_mains_left_conter">
+                    <div class="_runnings_mains_left_conter_num">18</div>
+                    <div class="_runnings_mains_left_conter_text">异常震动</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+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:'物品遗留/丢失告警'},
+])
+</script>
+<style lang="scss" scoped>
+.tuan1 {
+    background: url("@/assets/images/video_bg_1.png");	
+    // animation: scanning 10s linear infinite;
+}
+.tuan2 {
+    background: url("@/assets/images/video_bg_2.png");	
+    // animation: scanning 10s linear infinite;
+}
+.tuan3 {
+    background: url("@/assets/images/video_bg_3.png");	
+    // animation: scanning 10s linear infinite;
+}
+._runnings {
+    &_mains {
+        margin: 30px;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        &_left {
+            flex-shrink: 0;
+            width: 140px;
+            height: 140px;
+            position: relative;
+            &_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;
+                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;
+                }	
+            }
+        }
+        
+    }
+}
+@keyframes scanning {
+		to {
+			transform: rotate(1turn);
+		}
+	}
+</style>

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

@@ -0,0 +1,186 @@
+<template>
+    <div class="_consume">
+        <HeadlineTag value="超载预警(周)"></HeadlineTag>
+        <div class="_consume_mains">
+            <div ref="chartRef" style="width: 100%; height: 100%;"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+import HeadlineTag from '@/components/HeadlineTag';
+
+const chartRef = ref(null);
+let chart = null;
+
+const generateRandomData = (length, max) => {
+    const randomData = [];
+    for (let i = 0; i < length; i++) {
+        randomData.push(Math.floor(Math.random() * max));
+    }
+    return randomData;
+};
+
+const handleResize = () => {
+    if (chart) {
+        chart.resize();
+    }
+};
+
+onMounted(() => {
+    if (chartRef.value) {
+        chart = echarts.init(chartRef.value);
+
+        // 生成一周的日期数据
+        const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+
+        const option = {
+            xAxis: {
+                type: 'category',
+                data: weekDays,
+                axisLabel: {
+                    color: '#fff'
+                },
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross',
+                    crossStyle: {
+                        color: '#999'
+                    }
+                }
+            },
+            grid: {
+                top: '10%',
+                bottom: '10%',
+                right: '0%',
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    show: true,
+                    color: '#fff'
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#44585e'
+                    }
+                },
+                axisTick: {
+                    show: false
+                },
+            },
+            series: [
+                // 仅保留曲线表示运行异常
+                {
+                    name: '超载预警次数',
+                    type: 'line',
+                    data: generateRandomData(7, 50),
+                    lineStyle: {
+                        color: '#3b90d7',
+                    },
+                    showSymbol: false,
+                    smooth: true,
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [{
+                                offset: 0,
+                                color: 'rgba(59,144,215, .6)',
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(59,144,215, .2)',
+                            },
+                            ],
+                            false
+                        ),
+                        shadowColor: 'rgba(0, 0, 0, 0.1)',
+                        shadowBlur: 10,
+                    },
+                }
+            ]
+        };
+
+        chart.setOption(option);
+    }
+    window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+    if (chart) {
+        chart.dispose();
+    }
+});
+</script>
+
+<style lang="scss">
+._divider {
+    height: 1px;
+    border: 1px dashed #168cdb;
+    flex: 1;
+    margin: 0 10px;
+}
+
+._consume {
+    display: flex;
+    flex-direction: column;
+
+    &_mains {
+        margin: 10px 30px;
+        flex: 1;
+        display: flex;
+
+        &_item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+
+            &_name {
+                width: 30px;
+                height: 30px;
+                background: url("@/assets/images/content_circle_num.png");
+                background-size: 100% 100%;
+                background-position: center;
+                background-repeat: no-repeat;
+                // animation: scanning 4s linear infinite;
+                border: 1px solid red;
+            }
+
+            &_flag {
+                display: flex;
+                align-items: center;
+                gap: 3px;
+
+                &_item {
+                    width: 30px;
+                    height: 30px;
+                    border: 3px dashed #168cdb;
+                    box-sizing: border-box;
+                    background: #0e6ead;
+                    color: #fff;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                }
+            }
+        }
+
+        &_item:hover {
+            cursor: pointer;
+            background-image: linear-gradient(to right, #168cdb, transparent);
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,113 @@
+<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>
+        </div>
+    </div>
+</template>
+
+<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:'台'},
+])
+</script>
+<style lang="scss">
+._running {
+    &_mains {
+        margin: 30px;
+        display: flex;
+        align-items: center;
+        &_left {
+            width: 180px;
+            height: 180px;
+            position: relative;
+            &_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/elevator/modules/sameDay.vue

@@ -0,0 +1,186 @@
+<template>
+    <div class="_consume">
+        <HeadlineTag value="异常震动(周)"></HeadlineTag>
+        <div class="_consume_mains">
+            <div ref="chartRef" style="width: 100%; height: 100%;"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+import HeadlineTag from '@/components/HeadlineTag';
+
+const chartRef = ref(null);
+let chart = null;
+
+const generateRandomData = (length, max) => {
+    const randomData = [];
+    for (let i = 0; i < length; i++) {
+        randomData.push(Math.floor(Math.random() * max));
+    }
+    return randomData;
+};
+
+const handleResize = () => {
+    if (chart) {
+        chart.resize();
+    }
+};
+
+onMounted(() => {
+    if (chartRef.value) {
+        chart = echarts.init(chartRef.value);
+
+        // 生成一周的日期数据
+        const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+
+        const option = {
+            xAxis: {
+                type: 'category',
+                data: weekDays,
+                axisLabel: {
+                    color: '#fff'
+                },
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross',
+                    crossStyle: {
+                        color: '#999'
+                    }
+                }
+            },
+            grid: {
+                top: '10%',
+                bottom: '10%',
+                right: '0%',
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    show: true,
+                    color: '#fff'
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#44585e'
+                    }
+                },
+                axisTick: {
+                    show: false
+                },
+            },
+            series: [
+                // 仅保留曲线表示运行异常
+                {
+                    name: '异常震动次数',
+                    type: 'line',
+                    data: generateRandomData(7, 50),
+                    lineStyle: {
+                        color: '#de4337',
+                    },
+                    showSymbol: false,
+                    smooth: true,
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [{
+                                offset: 0,
+                                color: 'rgba(222, 67, 55, .6)',
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(222, 67, 55, .2)',
+                            },
+                            ],
+                            false
+                        ),
+                        shadowColor: 'rgba(0, 0, 0, 0.1)',
+                        shadowBlur: 10,
+                    },
+                }
+            ]
+        };
+
+        chart.setOption(option);
+    }
+    window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+    if (chart) {
+        chart.dispose();
+    }
+});
+</script>
+
+<style lang="scss">
+._divider {
+    height: 1px;
+    border: 1px dashed #168cdb;
+    flex: 1;
+    margin: 0 10px;
+}
+
+._consume {
+    display: flex;
+    flex-direction: column;
+
+    &_mains {
+        margin: 10px 30px;
+        flex: 1;
+        display: flex;
+
+        &_item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+
+            &_name {
+                width: 30px;
+                height: 30px;
+                background: url("@/assets/images/content_circle_num.png");
+                background-size: 100% 100%;
+                background-position: center;
+                background-repeat: no-repeat;
+                // animation: scanning 4s linear infinite;
+                border: 1px solid red;
+            }
+
+            &_flag {
+                display: flex;
+                align-items: center;
+                gap: 3px;
+
+                &_item {
+                    width: 30px;
+                    height: 30px;
+                    border: 3px dashed #168cdb;
+                    box-sizing: border-box;
+                    background: #0e6ead;
+                    color: #fff;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                }
+            }
+        }
+
+        &_item:hover {
+            cursor: pointer;
+            background-image: linear-gradient(to right, #168cdb, transparent);
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,186 @@
+<template>
+    <div class="_consume">
+        <HeadlineTag value="困人告警(周)"></HeadlineTag>
+        <div class="_consume_mains">
+            <div ref="chartRef" style="width: 100%; height: 100%;"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+import HeadlineTag from '@/components/HeadlineTag';
+
+const chartRef = ref(null);
+let chart = null;
+
+const generateRandomData = (length, max) => {
+    const randomData = [];
+    for (let i = 0; i < length; i++) {
+        randomData.push(Math.floor(Math.random() * max));
+    }
+    return randomData;
+};
+
+const handleResize = () => {
+    if (chart) {
+        chart.resize();
+    }
+};
+
+onMounted(() => {
+    if (chartRef.value) {
+        chart = echarts.init(chartRef.value);
+
+        // 生成一周的日期数据
+        const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+
+        const option = {
+            xAxis: {
+                type: 'category',
+                data: weekDays,
+                axisLabel: {
+                    color: '#fff'
+                },
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross',
+                    crossStyle: {
+                        color: '#999'
+                    }
+                }
+            },
+            grid: {
+                top: '10%',
+                bottom: '10%',
+                right: '0%',
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    show: true,
+                    color: '#fff'
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#44585e'
+                    }
+                },
+                axisTick: {
+                    show: false
+                },
+            },
+            series: [
+                // 仅保留曲线表示运行异常
+                {
+                    name: '困人告警次数',
+                    type: 'line',
+                    data: generateRandomData(7, 50),
+                    lineStyle: {
+                        color: '#ffc107',
+                    },
+                    showSymbol: false,
+                    smooth: true,
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [{
+                                offset: 0,
+                                color: 'rgba(255, 193, 7, .6)',
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(255, 193, 7, .2)',
+                            },
+                            ],
+                            false
+                        ),
+                        shadowColor: 'rgba(0, 0, 0, 0.1)',
+                        shadowBlur: 10,
+                    },
+                }
+            ]
+        };
+
+        chart.setOption(option);
+    }
+    window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+    if (chart) {
+        chart.dispose();
+    }
+});
+</script>
+
+<style lang="scss">
+._divider {
+    height: 1px;
+    border: 1px dashed #168cdb;
+    flex: 1;
+    margin: 0 10px;
+}
+
+._consume {
+    display: flex;
+    flex-direction: column;
+
+    &_mains {
+        margin: 10px 30px;
+        flex: 1;
+        display: flex;
+
+        &_item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+
+            &_name {
+                width: 30px;
+                height: 30px;
+                background: url("@/assets/images/content_circle_num.png");
+                background-size: 100% 100%;
+                background-position: center;
+                background-repeat: no-repeat;
+                // animation: scanning 4s linear infinite;
+                border: 1px solid red;
+            }
+
+            &_flag {
+                display: flex;
+                align-items: center;
+                gap: 3px;
+
+                &_item {
+                    width: 30px;
+                    height: 30px;
+                    border: 3px dashed #168cdb;
+                    box-sizing: border-box;
+                    background: #0e6ead;
+                    color: #fff;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                }
+            }
+        }
+
+        &_item:hover {
+            cursor: pointer;
+            background-image: linear-gradient(to right, #168cdb, transparent);
+        }
+    }
+}
+</style>

src/views/system/energy/index.vue

@@ -1,24 +1,41 @@
 <template>
-   <div class="_energy">
-    <layout>
-        <template #left>
-            <p>这是插槽的内容</p> 
-        </template>
-        <template #content>
-            <p>能源</p>
-        </template>
-        <template #right>
-            <p>这是右侧插槽的内容</p>
-        </template>
-    </layout>
-   </div>
-</template>
-
-<script setup name="Role">
-import layout from "@/components/layout_/index.vue";
-</script> 
-<style lang="scss">
-._energy{
-    height: 100%;
-}
-</style>
+    <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>
+    </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>
+ 

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

@@ -0,0 +1,213 @@
+<template>
+    <div class="_consume">
+        <HeadlineTag value="碳排趋势(年)"></HeadlineTag>
+        <div class="_consume_mains">
+            <div ref="chartRef" style="width: 100%; height: 100%;"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+import HeadlineTag from '@/components/HeadlineTag';
+
+const chartRef = ref(null);
+let chart = null;
+
+const generateRandomData = (length, max) => {
+    const randomData = [];
+    for (let i = 0; i < length; i++) {
+        randomData.push(Math.floor(Math.random() * max));
+    }
+    return randomData;
+};
+
+const handleResize = () => {
+    if (chart) {
+        chart.resize();
+    }
+};
+
+onMounted(() => {
+    if (chartRef.value) {
+        chart = echarts.init(chartRef.value);
+
+        const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+
+        const option = {
+            xAxis: {
+                type: 'category',
+                data: months,
+                axisLabel: {
+                    color: '#fff'
+                },
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross',
+                    crossStyle: {
+                        color: '#999'
+                    }
+                }
+            },
+            // 调整 grid 配置以在 Y 轴方向拉伸图表
+            grid: {
+                top: '10%', // 减小顶部边距，让图表向上扩展
+                bottom: '10%', // 减小底部边距，让图表向下扩展
+                right: '0%',
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    show: true, // 不显示刻度标签
+                    color: '#fff'
+                },
+                // 配置 Y 轴网格刻线
+                splitLine: {
+                    show: false, // 显示网格刻线
+                    lineStyle: {
+                        color: '#44585e' // 设置网格刻线颜色 
+                    }
+                },
+                axisTick: {
+                    show: false // 不显示刻度线
+                },
+            },
+            series: [
+                // 单根柱状图
+                {
+                    name: '当年',
+                    type: 'bar',
+                    data: generateRandomData(12, 50),
+                    barWidth: '30%',
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: '#28c928' // 0% 处的颜色
+                            }, {
+                                offset: 1, color: '#89f87c' // 100% 处的颜色
+                            }],
+                            global: false // 缺省为 false
+                        },
+                        barBorderRadius: [10, 10, 10,10]
+
+                    },
+                },
+                // 曲线
+                {
+                    name: '去年',
+                    type: 'line',
+                    // smooth: true,
+                    data: generateRandomData(12, 50),
+                    lineStyle: {
+                        color: '#216b87',
+                        // 设置柱状图圆角
+                       
+                    },
+                    showSymbol: false,
+                    smooth: true,
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [{
+                                offset: 0,
+                                color: 'rgba(0, 247, 255, .6)',
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(0, 247, 255, .2)',
+                            },
+                            ],
+                            false
+                        ),
+                        shadowColor: 'rgba(0, 0, 0, 0.1)',
+                        shadowBlur: 10,
+                    },
+                }
+            ]
+        };
+
+        chart.setOption(option);
+    }
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+    if (chart) {
+        chart.dispose();
+    }
+});
+</script>
+
+<style lang="scss">
+._divider {
+    height: 1px;
+    border: 1px dashed #168cdb;
+    flex: 1;
+    margin: 0 10px;
+}
+
+._consume {
+    display: flex;
+    flex-direction: column;
+
+    &_mains {
+        margin: 10px 30px;
+        flex: 1;
+        display: flex;
+
+        &_item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+
+            &_name {
+                width: 30px;
+                height: 30px;
+                background: url("@/assets/images/content_circle_num.png");
+                background-size: 100% 100%;
+                background-position: center;
+                background-repeat: no-repeat;
+                // animation: scanning 4s linear infinite;
+                border: 1px solid red;
+            }
+
+            &_flag {
+                display: flex;
+                align-items: center;
+                gap: 3px;
+
+                &_item {
+                    width: 30px;
+                    height: 30px;
+                    border: 3px dashed #168cdb;
+                    box-sizing: border-box;
+                    background: #0e6ead;
+                    color: #fff;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                }
+            }
+        }
+
+        &_item:hover {
+            cursor: pointer;
+            background-image: linear-gradient(to right, #168cdb, transparent);
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,214 @@
+<template>
+    <div class="_consume">
+        <HeadlineTag value="能耗趋势(年)"></HeadlineTag>
+        <div class="_consume_mains">
+            <div ref="chartRef" style="width: 100%; height: 100%;"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+import HeadlineTag from '@/components/HeadlineTag';
+
+const chartRef = ref(null);
+let chart = null;
+
+const generateRandomData = (length, max) => {
+    const randomData = [];
+    for (let i = 0; i < length; i++) {
+        randomData.push(Math.floor(Math.random() * max));
+    }
+    return randomData;
+};
+
+const handleResize = () => {
+    if (chart) {
+        chart.resize();
+    }
+};
+
+onMounted(() => {
+    if (chartRef.value) {
+        chart = echarts.init(chartRef.value);
+
+        const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+
+        const option = {
+            xAxis: {
+                type: 'category',
+                data: months,
+                axisLabel: {
+                    color: '#fff'
+                },
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross',
+                    crossStyle: {
+                        color: '#999'
+                    }
+                }
+            },
+            // 调整 grid 配置以在 Y 轴方向拉伸图表
+            grid: {
+                top: '10%', // 减小顶部边距，让图表向上扩展
+                bottom: '10%', // 减小底部边距，让图表向下扩展
+                right: '0%',
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    show: true, // 不显示刻度标签
+                    color: '#fff'
+                },
+                // 配置 Y 轴网格刻线
+                splitLine: {
+                    show: false, // 显示网格刻线
+                    lineStyle: {
+                        color: '#44585e' // 设置网格刻线颜色 
+                    }
+                },
+                axisTick: {
+                    show: false // 不显示刻度线
+                },
+            },
+            series: [
+                // 单根柱状图
+                {
+                    name: '当年',
+                    type: 'bar',
+                    data: generateRandomData(12, 50),
+                    barWidth: '30%',
+                    
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: '#78befe' // 0% 处的颜色
+                            }, {
+                                offset: 1, color: '#0352fb' // 100% 处的颜色
+                            }],
+                            global: false // 缺省为 false
+                        },
+                        barBorderRadius: [10, 10, 10,10]
+
+                    },
+                },
+                // 曲线
+                {
+                    name: '去年',
+                    type: 'line',
+                    // smooth: true,
+                    data: generateRandomData(12, 50),
+                    lineStyle: {
+                        color: '#cda23d',
+                        // 设置柱状图圆角
+                       
+                    },
+                    showSymbol: false,
+                    smooth: true,
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [{
+                                offset: 0,
+                                color: 'rgba(0, 247, 255, .6)',
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(0, 247, 255, .2)',
+                            },
+                            ],
+                            false
+                        ),
+                        shadowColor: 'rgba(0, 0, 0, 0.1)',
+                        shadowBlur: 10,
+                    },
+                }
+            ]
+        };
+
+        chart.setOption(option);
+    }
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+    if (chart) {
+        chart.dispose();
+    }
+});
+</script>
+
+<style lang="scss">
+._divider {
+    height: 1px;
+    border: 1px dashed #168cdb;
+    flex: 1;
+    margin: 0 10px;
+}
+
+._consume {
+    display: flex;
+    flex-direction: column;
+
+    &_mains {
+        margin: 10px 30px;
+        flex: 1;
+        display: flex;
+
+        &_item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+
+            &_name {
+                width: 30px;
+                height: 30px;
+                background: url("@/assets/images/content_circle_num.png");
+                background-size: 100% 100%;
+                background-position: center;
+                background-repeat: no-repeat;
+                // animation: scanning 4s linear infinite;
+                border: 1px solid red;
+            }
+
+            &_flag {
+                display: flex;
+                align-items: center;
+                gap: 3px;
+
+                &_item {
+                    width: 30px;
+                    height: 30px;
+                    border: 3px dashed #168cdb;
+                    box-sizing: border-box;
+                    background: #0e6ead;
+                    color: #fff;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                }
+            }
+        }
+
+        &_item:hover {
+            cursor: pointer;
+            background-image: linear-gradient(to right, #168cdb, transparent);
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,188 @@
+<template>
+    <div class="_consume">
+        <HeadlineTag value="24小时能耗-电/kwh"></HeadlineTag> 
+        <div class="_consume_mains">
+            <div ref="chartRef" style="width: 100%; height: 100%;"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+import HeadlineTag from '@/components/HeadlineTag';
+
+const chartRef = ref(null);
+let chart = null;
+
+const generateRandomData = (length, max) => {
+    const randomData = [];
+    for (let i = 0; i < length; i++) {
+        randomData.push(Math.floor(Math.random() * max));
+    }
+    return randomData;
+};
+
+const handleResize = () => {
+    if (chart) {
+        chart.resize();
+    }
+};
+
+onMounted(() => {
+    if (chartRef.value) {
+        chart = echarts.init(chartRef.value);
+
+        // 修改为 24 小时
+        const hours = Array.from({ length: 24 }, (_, i) => `${i}时`);
+
+        const option = {
+            xAxis: {
+                type: 'category',
+                // 使用 24 小时数据
+                data: hours, 
+                axisLabel: {
+                    color: '#fff'
+                },
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross',
+                    crossStyle: {
+                        color: '#999'
+                    }
+                }
+            },
+            grid: {
+                top: '10%', 
+                bottom: '10%',
+                right: '0%', 
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    show: true, 
+                    color: '#fff'
+                },
+                splitLine: {
+                    show: false, 
+                    lineStyle: {
+                        color: '#44585e' 
+                    }
+                },
+                axisTick: {
+                    show: false 
+                },
+            },
+            series: [
+                {
+                    name: '24小时能耗',
+                    data: generateRandomData(24, 100),
+                    type: 'line',
+                    showSymbol: false,
+                    smooth: true,
+                    color: '#00F7FF',
+                    lineStyle: {
+                    width: 2,
+                    },
+                    areaStyle: {
+                    color: new echarts.graphic.LinearGradient(
+                        0,
+                        0,
+                        0,
+                        1,
+                        [{
+                        offset: 0,
+                        color: 'rgba(0, 247, 255, .6)',
+                        },
+                        {
+                        offset: 0.8,
+                        color: 'rgba(0, 247, 255, .2)',
+                        },
+                        ],
+                        false
+                    ),
+                    shadowColor: 'rgba(0, 0, 0, 0.1)',
+                    shadowBlur: 10,
+                    },
+                    symbol: 'circle',
+                    symbolSize: 6,
+                }
+            ]
+        };
+
+        chart.setOption(option);
+    }
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+    if (chart) {
+        chart.dispose();
+    }
+});
+</script>
+
+<style lang="scss">
+._divider {
+    height: 1px;
+    border: 1px dashed #168cdb;
+    flex: 1;
+    margin: 0 10px;
+}
+
+._consume {
+    display: flex;
+    flex-direction: column;
+
+    &_mains {
+        margin: 10px 30px;
+        flex: 1;
+        display: flex;
+
+        &_item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+
+            &_name {
+                width: 30px;
+                height: 30px;
+                background: url("@/assets/images/content_circle_num.png");
+                background-size: 100% 100%;
+                background-position: center;
+                background-repeat: no-repeat;
+                // animation: scanning 4s linear infinite;
+                border: 1px solid red;
+            }
+
+            &_flag {
+                display: flex;
+                align-items: center;
+                gap: 3px;
+
+                &_item {
+                    width: 30px;
+                    height: 30px;
+                    border: 3px dashed #168cdb;
+                    box-sizing: border-box;
+                    background: #0e6ead;
+                    color: #fff;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                }
+            }
+        }
+
+        &_item:hover {
+            cursor: pointer;
+            background-image: linear-gradient(to right, #168cdb, transparent);
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,186 @@
+<template>
+    <div class="_consume">
+        <HeadlineTag value="24小时能耗-水/T"></HeadlineTag> 
+        <div class="_consume_mains">
+            <div ref="chartRef" style="width: 100%; height: 100%;"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+import HeadlineTag from '@/components/HeadlineTag';
+
+const chartRef = ref(null);
+let chart = null;
+
+const generateRandomData = (length, max) => {
+    const randomData = [];
+    for (let i = 0; i < length; i++) {
+        randomData.push(Math.floor(Math.random() * max));
+    }
+    return randomData;
+};
+
+const handleResize = () => {
+    if (chart) {
+        chart.resize();
+    }
+};
+
+onMounted(() => {
+    if (chartRef.value) {
+        chart = echarts.init(chartRef.value);
+
+        // 生成 24 小时的时间数据
+        const hours = Array.from({ length: 24 }, (_, i) => `${i}时`);
+
+        const option = {
+            xAxis: {
+                type: 'category',
+                // 使用 24 小时数据
+                data: hours, 
+                axisLabel: {
+                    color: '#fff'
+                },
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross',
+                    crossStyle: {
+                        color: '#999'
+                    }
+                }
+            },
+            grid: {
+                top: '10%', 
+                bottom: '10%',
+                right: '0%',
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    show: true, 
+                    color: '#fff'
+                },
+                splitLine: {
+                    show: false, 
+                    lineStyle: {
+                        color: '#44585e' 
+                    }
+                },
+                axisTick: {
+                    show: false 
+                },
+            },
+            series: [
+                {
+                    name: '24小时水能耗',
+                    type: 'line',
+                    // 生成 24 个随机数据
+                    data: generateRandomData(24, 50), 
+                    lineStyle: {
+                        color: 'rgb(49, 143, 247)',
+                    },
+                    showSymbol: false,
+                    smooth: true,
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [{
+                                offset: 0,
+                                color: 'rgba(49, 143, 247, .6)',
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(49, 143, 247, .2)',
+                            },
+                            ],
+                            false
+                        ),
+                        shadowColor: 'rgba(0, 0, 0, 0.1)',
+                        shadowBlur: 10,
+                    }
+                }
+            ]
+        };
+
+        chart.setOption(option);
+    }
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+    if (chart) {
+        chart.dispose();
+    }
+});
+</script>
+
+<style lang="scss">
+._divider {
+    height: 1px;
+    border: 1px dashed #168cdb;
+    flex: 1;
+    margin: 0 10px;
+}
+
+._consume {
+    display: flex;
+    flex-direction: column;
+
+    &_mains {
+        margin: 10px 30px;
+        flex: 1;
+        display: flex;
+
+        &_item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+
+            &_name {
+                width: 30px;
+                height: 30px;
+                background: url("@/assets/images/content_circle_num.png");
+                background-size: 100% 100%;
+                background-position: center;
+                background-repeat: no-repeat;
+                // animation: scanning 4s linear infinite;
+                border: 1px solid red;
+            }
+
+            &_flag {
+                display: flex;
+                align-items: center;
+                gap: 3px;
+
+                &_item {
+                    width: 30px;
+                    height: 30px;
+                    border: 3px dashed #168cdb;
+                    box-sizing: border-box;
+                    background: #0e6ead;
+                    color: #fff;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                }
+            }
+        }
+
+        &_item:hover {
+            cursor: pointer;
+            background-image: linear-gradient(to right, #168cdb, transparent);
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,114 @@
+<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:'3541', color:'#15acaa'},
+    { name:'碳排总量', state:'134', color:'#FFC107'},
+    { name:'碳排强度', state:'16964', color:'#F44336'},
+    { name:'碳排总量', state:'645521', color:'#F44336'}
+
+])
+</script>
+<style lang="scss">
+._running {
+    &_mains {
+        margin: 30px;
+        display: flex;
+        align-items: center;
+        &_left {
+            width: 180px;
+            height: 180px;
+            position: relative;
+            &_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/energy/modules/sameDay.vue

@@ -0,0 +1,123 @@
+<template>
+    <div class="_sameDay">
+        <HeadlineTag value="水、电统计"></HeadlineTag>
+        <div class="_sameDay_mains">
+            <div class="_sameDay_mains_left">
+                <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> 
+                    <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_tuan">
+                        <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>
+                    </div>
+                    <div class="_sameDay_mains_right_item__txt">
+                        {{item.state}}
+                    </div>
+                </div> 
+            </div>
+           
+        </div>
+    </div>
+</template>
+
+<script setup>
+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'},
+
+])
+const generateRandomData = (length, max) => {
+    const randomData = [];
+    for (let i = 0; i < length; i++) {
+        randomData.push(Math.floor(Math.random() * max));
+    }
+    return randomData;
+};
+</script>
+<style lang="scss">
+._sameDay {
+    &_mains {
+        margin: 30px;
+        display: flex;
+        align-items: center;
+        &_left {
+            width: 180px;
+            height: 180px;
+            position: relative;
+            &_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/deviceList.vue

@@ -1,6 +1,9 @@
 <template>
     <div class="_deviceList">
         <HeadlineTag value="设备列表" style="flex-shrink: 0;"></HeadlineTag>
+        <div class="point_box" style="margin-top: 10px;">
+          <el-input v-model="value" placeholder="按巡查点名称搜索" />
+        </div>
         <div class="_deviceList_mains" ref="mainsRef" @mouseenter="pauseCarousel" @mouseleave="resumeCarousel">
             <div :style="{ transform: `translateY(${scrollY}px)` }">
                 <div class="_deviceList_mains_item" v-for="(item, index) in eventList" :key="index">
@@ -29,7 +32,7 @@
 import { ref, onMounted, onUnmounted } from "vue";
 import HeadlineTag from '@/components/HeadlineTag'
 import { Opportunity, Aim } from '@element-plus/icons-vue'
-
+const value = ref('')
 const eventList = ref([
     { name: '回路1', state: '开启', flag: '在线' },
     { name: '回路2', state: '关闭', flag: '离线' },
@@ -119,4 +122,22 @@ onUnmounted(() => {
         }
     }
 }
+</style>
+
+<style lang="scss" scoped>
+.point_box{
+    margin:10px 30px;
+}
+.point_box :deep(.el-input__wrapper) {
+  background-color: transparent !important;
+  box-shadow: 0 0 0 1px rgb(58, 86, 117) inset !important;
+}
+
+.point_box :deep(.el-input__wrapper.is-focus) {
+  box-shadow: 0 0 0 1px #409EFF inset !important;
+}
+
+.point_box :deep(.el-input__inner) {
+  color: #ffffff !important;
+}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
     <div class="_switchAll">
-        <HeadlineTag value="运行分析"></HeadlineTag>
+        <HeadlineTag value="运行分析(周)"></HeadlineTag>
         <div class="_switchAll_mains">
             <div ref="chartRef" style="width: 100%; height: 100%;"></div>
         </div>
@@ -41,8 +41,9 @@ onMounted(() => {
             legend: false, 
             // 调整 grid 配置以在 Y 轴方向拉伸图表
             grid: {
-                top: '20%', // 减小顶部边距，让图表向上扩展
-                bottom: '20%' // 减小底部边距，让图表向下扩展
+                top: '10%', // 减小顶部边距，让图表向上扩展
+                bottom: '10%', // 减小底部边距，让图表向下扩展
+                right: '0%',
             },
             xAxis: {
                 type: 'category',
@@ -53,18 +54,6 @@ onMounted(() => {
             },
             yAxis: {
                 type: 'value',
-                axisTick: {
-                    show: false // 不显示刻度线
-                },
-                axisLabel: {
-                    show: false // 不显示刻度标签
-                },
-                splitLine: {
-                    show: true // 显示网格线
-                }
-            },
-            yAxis: {
-                type: 'value',
                 axisLabel: {
                     show: true, // 不显示刻度标签
                     color: '#fff' 
@@ -86,30 +75,90 @@ onMounted(() => {
                     type: 'line',
                     smooth: true,
                     data: generateRandomData(7, 50),
+                    showSymbol: false,
                     lineStyle: {
-                        color: '#15acaa'
+                        color: 'rgb(49, 143, 247)',
                     },
-                    showSymbol: false 
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [{
+                                offset: 0,
+                                color: 'rgba(49, 143, 247, 0.6)',
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(49, 143, 247, 0.2)',
+                            },
+                            ],
+                            false
+                        ),
+                        shadowColor: 'rgba(0, 0, 0, 0.1)',
+                        shadowBlur: 10,
+                    }
                 },
                 {
                     name: '关闭数量',
                     type: 'line',
                     smooth: true,
                     data: generateRandomData(9, 60), 
+                    showSymbol: false,
                     lineStyle: {
-                        color: '#FFC107'
+                        color: 'rgb(255,193,7)',
                     },
-                    showSymbol: false 
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [{
+                                offset: 0,
+                                color: 'rgba(255,193,7, 0.6)',
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(255,193,7,0.2)',
+                            },
+                            ],
+                            false
+                        ),
+                        shadowColor: 'rgba(0, 0, 0, 0.1)',
+                        shadowBlur: 10,
+                    }
                 },
                 {
                     name: '故障数量',
                     type: 'line',
                     smooth: true,
                     data: generateRandomData(5, 30), 
+                    showSymbol: false,
                     lineStyle: {
-                        color: '#F44336'
+                        color: 'rgb(244,67,54)'
                     },
-                    showSymbol: false 
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [{
+                                offset: 0,
+                                color: 'rgba(244,67,54,0.6)',
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(244,67,54,0.2)',
+                            },
+                            ],
+                            false
+                        ),
+                        shadowColor: 'rgba(0, 0, 0, 0.1)',
+                        shadowBlur: 10,
+                    }
                 }
             ]
         };

src/views/system/video/index.vue

@@ -1,24 +1,41 @@
 <template>
-   <div class="_energy">
-    <layout>
-        <template #left>
-            <p>这是插槽的内容</p> 
-        </template>
-        <template #content>
-            <p>视频</p>
-        </template>
-        <template #right>
-            <p>这是右侧插槽的内容</p>
-        </template>
-    </layout>
-   </div>
-</template>
+    <div class="_energy">
+     <layout>
+         <template #left>
+            <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>
+         <template #content>
+             <p>视频</p>
+         </template>
+         <template #right>
+            <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
+                <sameDay style="flex: 1;"/>
+                <eventList style="flex: 2;"/>
+             </div>
+         </template>
+     </layout>
+    </div>
+ </template>
+ 
+ <script setup name="Role">
+ import layout from "@/components/layout_/index.vue";
 
-<script setup name="Role">
-import layout from "@/components/layout_/index.vue";
-</script> 
-<style lang="scss">
-._energy{
-    height: 100%;
-}
-</style>
+ import running from './modules/running.vue'
+ import carbonEmission from './modules/carbonEmission.vue'
+ import consume from './modules/consume.vue'
+ 
+ import sameDay from './modules/sameDay.vue'
+ import eventList from './modules/eventList.vue'
+
+ 
+ </script> 
+ <style lang="scss">
+ ._energy{
+     height: 100%;
+ }
+ </style>
+ 

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

@@ -0,0 +1,209 @@
+<template>
+    <div class="_consume">
+        <HeadlineTag value="车牌识别(周)"></HeadlineTag>
+        <div class="_consume_mains">
+            <div ref="chartRef" style="width: 100%; height: 100%;"></div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+import HeadlineTag from '@/components/HeadlineTag';
+
+const chartRef = ref(null);
+let chart = null;
+
+const generateRandomData = (length, max) => {
+    const randomData = [];
+    for (let i = 0; i < length; i++) {
+        randomData.push(Math.floor(Math.random() * max));
+    }
+    return randomData;
+};
+
+const handleResize = () => {
+    if (chart) {
+        chart.resize();
+    }
+};
+
+onMounted(() => {
+    if (chartRef.value) {
+        chart = echarts.init(chartRef.value);
+
+        // 生成一周的日期数据
+        const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+
+        const option = {
+            xAxis: {
+                type: 'category',
+                data: weekDays,
+                axisLabel: {
+                    color: '#fff'
+                },
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'cross',
+                    crossStyle: {
+                        color: '#999'
+                    }
+                }
+            },
+            grid: {
+                top: '10%',
+                bottom: '10%',
+                right: '0%',
+            },
+            yAxis: {
+                type: 'value',
+                axisLabel: {
+                    show: true,
+                    color: '#fff'
+                },
+                splitLine: {
+                    show: false,
+                    lineStyle: {
+                        color: '#44585e'
+                    }
+                },
+                axisTick: {
+                    show: false
+                },
+            },
+            series: [
+                // 柱状图表示车牌识别
+                {
+                    name: '车牌识别',
+                    type: 'bar',
+                    data: generateRandomData(7, 50),
+                    barWidth: '30%',
+                    itemStyle: {
+                        color: {
+                            type: 'linear',
+                            x: 0,
+                            y: 0,
+                            x2: 0,
+                            y2: 1,
+                            colorStops: [{
+                                offset: 0, color: '#78befe' // 0% 处的颜色
+                            }, {
+                                offset: 1, color: '#0352fb' // 100% 处的颜色
+                            }],
+                            global: false // 缺省为 false
+                        },
+                        barBorderRadius: [10, 10, 10,10]
+                    },
+                },
+                // 曲线表示黑名单
+                {
+                    name: '黑名单',
+                    type: 'line',
+                    data: generateRandomData(7, 50),
+                    lineStyle: {
+                        color: '#216b87',
+                    },
+                    showSymbol: false,
+                    smooth: true,
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            0,
+                            0,
+                            0,
+                            1,
+                            [{
+                                offset: 0,
+                                color: 'rgba(0, 247, 255, .6)',
+                            },
+                            {
+                                offset: 0.8,
+                                color: 'rgba(0, 247, 255, .2)',
+                            },
+                            ],
+                            false
+                        ),
+                        shadowColor: 'rgba(0, 0, 0, 0.1)',
+                        shadowBlur: 10,
+                    },
+                }
+            ]
+        };
+
+        chart.setOption(option);
+    }
+    window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+    if (chart) {
+        chart.dispose();
+    }
+});
+</script>
+
+<style lang="scss">
+._divider {
+    height: 1px;
+    border: 1px dashed #168cdb;
+    flex: 1;
+    margin: 0 10px;
+}
+
+._consume {
+    display: flex;
+    flex-direction: column;
+
+    &_mains {
+        margin: 10px 30px;
+        flex: 1;
+        display: flex;
+
+        &_item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px;
+
+            &_name {
+                width: 30px;
+                height: 30px;
+                background: url("@/assets/images/content_circle_num.png");
+                background-size: 100% 100%;
+                background-position: center;
+                background-repeat: no-repeat;
+                // animation: scanning 4s linear infinite;
+                border: 1px solid red;
+            }
+
+            &_flag {
+                display: flex;
+                align-items: center;
+                gap: 3px;
+
+                &_item {
+                    width: 30px;
+                    height: 30px;
+                    border: 3px dashed #168cdb;
+                    box-sizing: border-box;
+                    background: #0e6ead;
+                    color: #fff;
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 14px;
+                }
+            }
+        }
+
+        &_item:hover {
+            cursor: pointer;
+            background-image: linear-gradient(to right, #168cdb, transparent);
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,140 @@
+<template>
+    <div class="_runnings">
+        <HeadlineTag value="行为检测(周)"></HeadlineTag>
+
+        <div class="_runnings_mains">
+            <div class="_runnings_mains_left">
+                <div class="_runnings_mains_left_tuan tuan1"></div>
+                <div class="_runnings_mains_left_conter">
+                    <div class="_runnings_mains_left_conter_num">785</div>
+                    <div class="_runnings_mains_left_conter_text">入侵检测</div>
+                </div>
+            </div>
+            <div class="_runnings_mains_left">
+                <div class="_runnings_mains_left_tuan tuan2"></div>
+                <div class="_runnings_mains_left_conter">
+                    <div class="_runnings_mains_left_conter_num">14</div>
+                    <div class="_runnings_mains_left_conter_text">异常行为</div>
+                </div>
+            </div>
+            <div class="_runnings_mains_left">
+                <div class="_runnings_mains_left_tuan tuan3"></div>
+                <div class="_runnings_mains_left_conter">
+                    <div class="_runnings_mains_left_conter_num">54</div>
+                    <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>
+
+<script setup>
+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:'物品遗留/丢失告警'},
+])
+</script>
+<style lang="scss">
+.tuan1 {
+    background: url("@/assets/images/video_bg_1.png");	
+    animation: scanning 5s linear infinite;
+}
+.tuan2 {
+    background: url("@/assets/images/video_bg_2.png");	
+    animation: scanning 5s linear infinite;
+}
+.tuan3 {
+    background: url("@/assets/images/video_bg_3.png");	
+    animation: scanning 5s linear infinite;
+}
+._runnings {
+    &_mains {
+        margin: 30px;
+        display: flex;
+        align-items: center;
+        &_left {
+            flex-shrink: 0;
+            width: 140px;
+            height: 140px;
+            position: relative;
+            &_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;
+                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/video/modules/eventList.vue

@@ -0,0 +1,174 @@
+<template>
+    <div class="_eventList">
+        <HeadlineTag 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">
+                    <div class="_eventList_mains_item_text">
+                        <div
+                        :class="item.store === 'on' ? '_success' : '_warning'"
+                        class="_eventList_mains_item_text_flag"></div>
+                        <el-text class="w-150px mb-2" truncated style="color: white;margin-left: 10px;">
+                            {{ item.name }}
+                        </el-text>
+                    </div>
+                    <div class="_eventList_mains_item_btn">
+                        <el-icon color="#44b0f9" size="18">
+                            <Download />
+                        </el-icon>
+                        <el-icon color="#44b0f9" size="18">
+                            <Bell />
+                        </el-icon>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from "vue";
+import HeadlineTag from '@/components/HeadlineTag'
+
+const eventList = ref([{
+    store: 'on',
+    color: 'rgb(82.4, 155.2, 46.4)',
+    name: '监控设备1',
+    time: '2025-04-15 10:20:00'
+}, {
+    store: 'on',
+    color: 'rgb(82.4, 155.2, 46.4)',
+    name: '监控设备2',
+    time: '2025-04-15 10:20:00'
+}, {
+    store: 'off',
+    color: 'red',
+    name: '监控设备3',
+    time: '2025-04-15 10:20:00'
+}, {
+    store: 'on',
+    color: 'rgb(82.4, 155.2, 46.4)',
+    name: '监控设备4',
+    time: '2025-04-15 10:20:00'
+}, {
+    store: 'off',
+    color: 'red',
+    name: '监控设备5',
+    time: '2025-04-15 10:20:00'
+}, {
+    store: 'off',
+    color: 'red',
+    name: '监控设备6',
+    time: '2025-04-15 10:20:00'
+}, {
+    store: 'on',
+    color: 'rgb(82.4, 155.2, 46.4)',
+    name: '监控设备7',
+    time: '2025-04-15 10:20:00'
+}, {
+    store: 'off',
+    color: 'red',
+    name: '监控设备8',
+    time: '2025-04-15 10:20:00'
+}])
+
+const mainsRef = ref(null)
+const scrollY = ref(0)
+let intervalId = null
+const scrollSpeed = 1 // 滚动速度
+
+const startCarousel = () => {
+    intervalId = setInterval(() => {
+        const itemHeight = mainsRef.value?.querySelector('._eventList_mains_item')?.offsetHeight;
+        if (!itemHeight) return;
+
+        scrollY.value -= scrollSpeed;
+
+        // 检查第一个元素是否完全离开视口
+        if (Math.abs(scrollY.value) >= itemHeight) {
+            // 将第一个元素移到列表末尾
+            const firstItem = eventList.value.shift();
+            if (firstItem) {
+                eventList.value.push(firstItem);
+            }
+            // 调整滚动位置
+            scrollY.value += itemHeight;
+        }
+    }, 50);
+};
+
+const pauseCarousel = () => {
+    clearInterval(intervalId);
+};
+
+const resumeCarousel = () => {
+    startCarousel();
+};
+
+onMounted(() => {
+    startCarousel();
+});
+
+onUnmounted(() => {
+    clearInterval(intervalId);
+});
+</script>
+
+<style lang="scss">
+._success {
+    background: #15acaa;	
+}
+._warning {
+    background: #FFC107;	
+}
+._eventList {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
+    &_mains {
+        margin: 10px 30px;
+        overflow: hidden; // 隐藏溢出内容
+        // 鼠标移入时改变手势
+        cursor: pointer;
+
+        &_item {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 0;
+
+            &_text {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                &_flag {
+                    width: 10px;
+                    height: 10px;
+                    border-radius: 50%;
+                    margin-left: 10px; 
+                }
+                &_p {
+                    margin-left: 10px;
+                }
+            }
+            &_btn{
+                color: red;
+                display: flex;
+                font-size: 14px;
+                gap: 20px;
+                &_item {
+                    border-radius: 5px;
+                    cursor: pointer;
+                }
+            }
+        }
+        &_item:nth-child(even){
+            background: rgba($color: #168cdb, $alpha: .05);
+        }
+        &_item:hover {
+            background-image: linear-gradient(to right, #168cdb, transparent); 
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,115 @@
+<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>
+        </div>
+    </div>
+</template>
+
+<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'},
+])
+</script>
+<style lang="scss">
+._running {
+    &_mains {
+        margin: 30px;
+        display: flex;
+        align-items: center;
+        &_left {
+            width: 180px;
+            height: 180px;
+            position: relative;
+            &_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/video/modules/sameDay.vue

@@ -0,0 +1,135 @@
+<template>
+    <div class="_runnin">
+        <HeadlineTag value="车牌识别统计"></HeadlineTag>
+        <div class="_runnin_mains">
+            <div class="_runnin_mains_left _left_1">
+                <div class="_runnin_mains_left_tuan tuan_1"></div>
+                <div class="_runnin_mains_left_conter">
+                    <div class="_runnin_mains_left_conter_num">785</div>
+                    <div class="_runnin_mains_left_conter_text">今日车牌识别</div>
+                </div>
+            </div>
+            <div class="_runnin_mains_left _left_2">
+                <div class="_runnin_mains_left_tuan tuan_2"></div>
+                <div class="_runnin_mains_left_conter">
+                    <div class="_runnin_mains_left_conter_num">14</div>
+                    <div class="_runnin_mains_left_conter_text">黑名单</div>
+                </div>
+            </div>
+            
+            <!-- <div class="_runnin_mains_right">
+                <div class="_runnin_mains_right_item" v-for="item,index in runningList" :key="index">
+                    <div class="_runnin_mains_right_item_tuan">
+                        <span class="_runnin_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="_runnin_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:'154', color:'#409eff',tip:'划定区域人员闯入'},
+    { name:'异常行为', state:'15', color:'#15acaa',tip:'徘徊、倒地、聚集'}, 
+    { name:'丢失告警', state:'134', color:'#FFC107',tip:'物品遗留/丢失告警'},
+])
+</script>
+<style lang="scss" scoped>
+.tuan_1 {
+    background: url("@/assets/images/video_he.png");
+    animation: scanning 5s linear infinite;
+}
+._left_1{
+    color: #01baff;
+}
+.tuan_2 {
+    background: url("@/assets/images/video_he_.png");	
+    animation: scanning 6s linear infinite;
+}
+._left_2{
+    color: #de4034 !important;	
+}
+._runnin {
+    &_mains {
+        margin: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &_left {
+            flex-shrink: 0;
+            width: 200px;
+            height: 200px;
+            position: relative;
+            &_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;
+                width: 100%;
+                height: 100%;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                &_num {
+                    font-size:22px;
+                    font-weight: 500;
+                }
+                &_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>