首頁 探索 說明
註冊 登入
bzd_xiong
/
baozhida-building-system
1
0
複刻 0
檔案 問題管理 0 合併請求 0 Wiki
瀏覽代碼

综合姿态、电梯系统、公共广播数据对接

AaronBruin 2 月之前
父節點
c5edac1eb7
當前提交
13927da8bb
共有 26 個文件被更改，包括 1116 次插入 和 506 次删除
分割檢視 顯示文件統計
  1. 12 0
      src/api/home.js
  2. 12 0
      src/api/system/broadcast.js
  3. 12 0
      src/api/system/elevator.js
  4. 12 0
      src/api/system/tenement.js
  5. 236 0
      src/views/ce.html
  6. 18 86
      src/views/index.vue
  7. 22 2
      src/views/index/LineChart.vue
  8. 24 18
      src/views/index/leftDesk.vue
  9. 16 10
      src/views/index/reightDesk.vue
  10. 50 35
      src/views/system/broadcast/index.vue
  11. 102 60
      src/views/system/broadcast/modules/deviceList.vue
  12. 72 52
      src/views/system/broadcast/modules/eventList.vue
  13. 26 14
      src/views/system/broadcast/modules/running.vue
  14. 57 44
      src/views/system/broadcast/modules/sameDay.vue
  15. 23 5
      src/views/system/broadcast/modules/tiring.vue
  16. 52 37
      src/views/system/elevator/index.vue
  17. 28 9
      src/views/system/elevator/modules/carbonEmission.vue
  18. 33 18
      src/views/system/elevator/modules/consume.vue
  19. 24 7
      src/views/system/elevator/modules/eventList.vue
  20. 53 26
      src/views/system/elevator/modules/running.vue
  21. 23 8
      src/views/system/elevator/modules/sameDay.vue
  22. 22 8
      src/views/system/elevator/modules/tiring.vue
  23. 47 9
      src/views/system/message/modules/consume.vue
  24. 19 3
      src/views/system/tenement/index.vue
  25. 71 24
      src/views/system/tenement/modules/consume.vue
  26. 50 31
      src/views/system/tenement/modules/running.vue

+ 12 - 0
src/api/home.js
查看文件 

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

+ 12 - 0
src/api/system/broadcast.js
查看文件 

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

+ 12 - 0
src/api/system/elevator.js
查看文件 

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

+ 12 - 0
src/api/system/tenement.js
查看文件 

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

+ 236 - 0
src/views/ce.html
查看文件 

@@ -0,0 +1,236 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <style>
 
+        .card_floor_control {
 
+            user-select: none;
 
+            position: absolute;
 
+            top: 100px;
 
+            right: calc(25% + 10px);
 
+            width: 100px;
 
+            height: 40px;
 
+        }
 
+
 
+        .floor_control {
 
+            position: absolute;
 
+            cursor: pointer;
 
+            top: 0px;
 
+            right: 0px;
 
+            width: 100px;
 
+            height: 40px;
 
+            background-color: rgba(34, 91, 153, 0.3);
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            color: #ffffff;
 
+            border-radius: 4px;
 
+        }
 
+
 
+        .triangle:after {
 
+            content: '';
 
+            display: inline-block;
 
+            margin-left: 20px;
 
+            width: 10px;
 
+            height: 10px;
 
+            border-top: 1px solid #ffffff;
 
+            border-right: 1px solid #ffffff;
 
+            transform: rotate(135deg);
 
+            -webkit-transform: rotate(135deg);
 
+        }
 
+
 
+        .all_building_floor {
 
+            position: absolute;
 
+            top: 50px;
 
+            right: 0px;
 
+        }
 
+
 
+        .box_item_bf {
 
+            display: flex;
 
+            align-items: center;
 
+            justify-content: center;
 
+            font-size: 18px;
 
+        }
 
+
 
+        .building_box {
 
+            cursor: pointer;
 
+            padding: 10px 20px;
 
+            background-color: rgba(70, 133, 201, 0.3);
 
+        }
 
+
 
+        .building_box:hover {
 
+            background-color: rgba(34, 91, 153, 0.3);
 
+        }
 
+
 
+        .floor_box {
 
+            cursor: pointer;
 
+            color: rgb(108, 111, 113);
 
+            --c: rgb(108, 111, 113);
 
+            --n: 4;
 
+            --t: 2px;
 
+            --d: 45deg;
 
+            aspect-ratio: 1;
 
+            width: 60px;
 
+            height: 60px;
 
+            border-radius: 50%;
 
+            background-color: rgb(1, 6, 19);
 
+            margin-bottom: 10px;
 
+        }
 
+
 
+        .floor_box::after {
 
+            content: "";
 
+            position: absolute;
 
+            width: 55px;
 
+            height: 55px;
 
+            border-radius: 50%;
 
+            padding: var(--t);
 
+            background: var(--c);
 
+            -webkit-mask:
 
+                linear-gradient(#0000 0 0) content-box,
 
+                repeating-conic-gradient(from calc(var(--d)/2), #000 0 calc(360deg/var(--n) - var(--d)), #0000 0 calc(360deg/var(--n)));
 
+            -webkit-mask-composite: source-in;
 
+            mask:
 
+                linear-gradient(#0000 0 0) content-box,
 
+                repeating-conic-gradient(from calc(var(--d)/2), #000 0 calc(360deg/var(--n) - var(--d)), #0000 0 calc(360deg/var(--n)));
 
+            mask-composite: intersect;
 
+            /* // animation: rotate 5s linear infinite; */
 
+        }
 
+
 
+        .activate_box {
 
+            cursor: pointer;
 
+            color: #fff;
 
+            --c: #fff;
 
+            --n: 4;
 
+            --t: 2px;
 
+            --d: 45deg;
 
+            aspect-ratio: 1;
 
+            width: 60px;
 
+            height: 60px;
 
+            border-radius: 50%;
 
+            background-color: rgb(1, 6, 19);
 
+            margin-bottom: 10px;
 
+        }
 
+
 
+        .activate_box::after {
 
+            content: "";
 
+            position: absolute;
 
+            width: 55px;
 
+            height: 55px;
 
+            border-radius: 50%;
 
+            padding: var(--t);
 
+            background: var(--c);
 
+            -webkit-mask:
 
+                linear-gradient(#0000 0 0) content-box,
 
+                repeating-conic-gradient(from calc(var(--d)/2), #000 0 calc(360deg/var(--n) - var(--d)), #0000 0 calc(360deg/var(--n)));
 
+            -webkit-mask-composite: source-in;
 
+            mask:
 
+                linear-gradient(#0000 0 0) content-box,
 
+                repeating-conic-gradient(from calc(var(--d)/2), #000 0 calc(360deg/var(--n) - var(--d)), #0000 0 calc(360deg/var(--n)));
 
+            mask-composite: intersect;
 
+            animation: rotate 5s linear infinite;
 
+        }
 
+
 
+        @keyframes rotate {
 
+            from {
 
+                transform: rotate(0deg);
 
+            }
 
+
 
+            to {
 
+                transform: rotate(360deg);
 
+            }
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="card_floor_control">
 
+        <div class="floor_control" @click="switchover">{{ currentItem }}<span class="triangle"></span></div>
 
+        <div class="all_building_floor">
 
+            <div class="box_item_bf" :class="currentId == item.id ? 'activate_box' : 'floor_box'"
 
+                v-for="(item, index) in currentData" :key="index" @click="switchoverItem(item)">
 
+                {{ item.title }}
 
+            </div>
 
+        </div>
 
+    </div>
 
+    <script>
 
+        let currentItem = '全部';
 
+        const currentId = ref('all');
 
+        const currentData = ref([])
 
+        const arrData = [{
 
+            title: '全部',
 
+            id: 'all',
 
+        }, {
 
+            title: 'A栋',
 
+            id: 'A',
 
+            list: [{
 
+                title: '3F',
 
+                id: '3',
 
+            }, {
 
+                title: '2F',
 
+                id: '2',
 
+            }, {
 
+                title: '1F',
 
+                id: '1',
 
+            }]
 
+        }, {
 
+            title: 'B栋',
 
+            id: 'B',
 
+            list: [{
 
+                title: '3F',
 
+                id: '3',
 
+            }, {
 
+                title: '2F',
 
+                id: '2',
 
+            }, {
 
+                title: '1F',
 
+                id: '1',
 
+            }]
 
+        }, {
 
+            title: 'C栋',
 
+            id: 'C',
 
+            list: [{
 
+                title: '4F',
 
+                id: '4',
 
+            }, {
 
+                title: '3F',
 
+                id: '3',
 
+            }, {
 
+                title: '2F',
 
+                id: '2',
 
+            }, {
 
+                title: '1F',
 
+                id: '1',
 
+            }]
 
+        }, {
 
+            title: 'D栋',
 
+            id: 'D',
 
+            list: [{
 
+                title: '2F',
 
+            }, {
 
+                title: '1F',
 
+            }]
 
+        }]
 
+        function switchover() {
 
+            currentData.value = arrData
 
+            currentId.value = 'all'
 
+            currentItem = '全部'
 
+        }
 
+        function switchoverItem(value) {
 
+            currentItem = value.title
 
+            currentId.value = value.id
 
+            arrData.forEach((item) => {
 
+                if (currentId.value == item.id) {
 
+                    currentData.value = item.list
 
+                    if (value.id == 'all') {
 
+                        currentData.value = arrData
 
+                    }
 
+                }
 
+            })
 
+        }
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 18 - 86
src/views/index.vue
查看文件 

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

+ 22 - 2
src/views/index/LineChart.vue
查看文件 

@@ -4,6 +4,12 @@
 
 
 <script setup>
 
 import * as echarts from 'echarts'
 
+const props = defineProps({
 
+    lineData: {
 
+        type: Object,
 
+        default: {}
 
+    }
 
+})
 
 const chartDom = ref(null);
 
 let chartInstance = null;
 
 // 初始化图表
 
@@ -27,7 +33,7 @@ const initChart = () => {
 
             containLabel: true,
 
         },
 
         xAxis: {
 
-            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
 
+            data: Object.keys(props.lineData),
 
             type: 'category',
 
             boundaryGap: false,
 
             axisLine: {
 
@@ -60,7 +66,7 @@ const initChart = () => {
 
         series: [
 
             {
 
                 name: '增加值',
 
-                data: [1, 2, 3, 4, 7, 6, 7, 8, 4, 10],
 
+                data: Object.entries(props.lineData),
 
                 type: 'line',
 
                 color: 'rgb(49, 143, 247)',
 
                 lineStyle: {
 
@@ -92,6 +98,20 @@ const initChart = () => {
 
         ],
 
     });
 
 };
 
+
 
+watch(() => props.lineData, (newVal) => {
 
+    if (chartInstance) {
 
+        chartInstance.setOption({
 
+            xAxis: {
 
+                data: Object.keys(props.lineData),
 
+            },
 
+            series: [{
 
+                data: Object.entries(props.lineData),
 
+            }],
 
+        })
 
+    }
 
+}, { deep: true, immediate: true } // 开启深度监听
 
+)
 
 // 生命周期
 
 onMounted(initChart);
 
 // 窗口自适应

+ 24 - 18
src/views/index/leftDesk.vue
查看文件 

@@ -11,19 +11,19 @@
 
                 <div class="right_content">
 
                     <div class="title_row">
 
                         <div class="survey_title">建筑面积:</div>
 
-                        <div class="survey_num">20000<span>m²</span></div>
 
+                        <div class="survey_num">{{ resultData.Area }}<span>m²</span></div>
 
                     </div>
 
                     <div class="title_row">
 
                         <div class="survey_title">占地面积:</div>
 
-                        <div class="survey_num">20000<span>m²</span></div>
 
+                        <div class="survey_num">{{ resultData.FloorSpace }}<span>m²</span></div>
 
                     </div>
 
                     <div class="title_row">
 
                         <div class="survey_title">建筑高度:</div>
 
-                        <div class="survey_num">30<span>m</span></div>
 
+                        <div class="survey_num">{{ resultData.BuildingHeight }}<span>m</span></div>
 
                     </div>
 
                     <div class="title_row">
 
                         <div class="survey_title">建筑层数:</div>
 
-                        <div class="survey_num">10</div>
 
+                        <div class="survey_num">{{ resultData.Storey }}</div>
 
                     </div>
 
                 </div>
 
             </div>
 
@@ -34,12 +34,12 @@
 
                 <div class="box_facility">
 
                     <div class="left_ity">
 
                         <div class="title_ity">设备总数</div>
 
-                        <div class="num_ity" style="color: rgb(45, 220, 223);">1940</div>
 
+                        <div class="num_ity" style="color: rgb(45, 220, 223);">{{ resultData.Device }}</div>
 
                     </div>
 
                     <div class="facil_line"></div>
 
                     <div class="left_ity">
 
                         <div class="title_ity">设备故障</div>
 
-                        <div class="num_ity" style="color: rgb(226, 164, 25);">1940</div>
 
+                        <div class="num_ity" style="color: rgb(226, 164, 25);">{{ resultData.Fault }}</div>
 
                     </div>
 
                 </div>
 
                 <div class="box_loader">
 
@@ -65,12 +65,12 @@
 
                 <div class="box_facility">
 
                     <div class="right_ity">
 
                         <div class="title_ity">运行总数</div>
 
-                        <div class="num_ity" style="color: rgb(230, 232, 233);">1940</div>
 
+                        <div class="num_ity" style="color: rgb(230, 232, 233);">{{ resultData.Runing }}</div>
 
                     </div>
 
                     <div class="facil_line"></div>
 
                     <div class="right_ity">
 
                         <div class="title_ity">报警总数</div>
 
-                        <div class="num_ity" style="color: rgb(232, 64, 66);">1940</div>
 
+                        <div class="num_ity" style="color: rgb(232, 64, 66);">{{ resultData.Alarm }}</div>
 
                     </div>
 
                 </div>
 
             </div>
 
@@ -85,7 +85,7 @@
 
                         </el-icon>
 
                         <div class="day_time">今日</div>
 
                     </div>
 
-                    <span>1940</span>
 
+                    <span>{{ resultData.TodayConsumption }}</span>
 
                 </div>
 
                 <div class="energy_box">
 
                     <div class="title_row">
 
@@ -94,7 +94,7 @@
 
                         </el-icon>
 
                         <div class="day_time">本周</div>
 
                     </div>
 
-                    <span>1940</span>
 
+                    <span>{{ resultData.WeekConsumption }}</span>
 
                 </div>
 
                 <div class="energy_box">
 
                     <div class="title_row">
 
@@ -103,7 +103,7 @@
 
                         </el-icon>
 
                         <div class="day_time">本月</div>
 
                     </div>
 
-                    <span>1940</span>
 
+                    <span>{{ resultData.MonthConsumption }}</span>
 
                 </div>
 
                 <div class="energy_box">
 
                     <div class="title_row">
 
@@ -112,16 +112,16 @@
 
                         </el-icon>
 
                         <div class="day_time">本年</div>
 
                     </div>
 
-                    <span>1940</span>
 
+                    <span>{{ resultData.YearConsumption }}</span>
 
                 </div>
 
             </div>
 
         </div>
 
         <div class="flex_home">
 
-            <HeadlineTag value="能耗分顶"></HeadlineTag>
 
+            <HeadlineTag value="能耗分项"></HeadlineTag>
 
             <div class="space_between_in card_subentry">
 
                 <div class="entry_box">
 
                     <div class="num_gross">总量</div>
 
-                    <span>0</span>
 
+                    <span>{{ resultData.Impetus + resultData.illuminating + resultData.SpecialElectricity + resultData.AirConditioningSockets }}</span>
 
                 </div>
 
                 <div class="box_subentry">
 
                     <div class="subentry_item space_between_in">
 
@@ -129,28 +129,28 @@
 
                             <span class="box_line color-cyan"></span>
 
                             <span>动力</span>
 
                         </div>
 
-                        <span class="text-cyan">10%</span>
 
+                        <span class="text-cyan">{{ resultData.Impetus }}</span>
 
                     </div>
 
                     <div class="subentry_item space_between_in">
 
                         <div class="same_row_in">
 
                             <span class="box_line color-yellow"></span>
 
                             <span>照明</span>
 
                         </div>
 
-                        <span class="text-yellow">10%</span>
 
+                        <span class="text-yellow">{{ resultData.illuminating }}</span>
 
                     </div>
 
                     <div class="subentry_item space_between_in">
 
                         <div class="same_row_in">
 
                             <span class="box_line color-blue"></span>
 
                             <span>特殊用电</span>
 
                         </div>
 
-                        <span class="text-blue">10%</span>
 
+                        <span class="text-blue">{{ resultData.SpecialElectricity }}</span>
 
                     </div>
 
                     <div class="subentry_item space_between_in">
 
                         <div class="same_row_in">
 
                             <span class="box_line color-red"></span>
 
                             <span>空调插座</span>
 
                         </div>
 
-                        <span class="text-red">10%</span>
 
+                        <span class="text-red">{{ resultData.AirConditioningSockets }}</span>
 
                     </div>
 
                 </div>
 
             </div>
 
@@ -160,6 +160,12 @@
 
 
 <script setup>
 
 import HeadlineTag from '@/components/HeadlineTag'
 
+const props = defineProps({
 
+    resultData: {
 
+        type: Object,
 
+        default: {}
 
+    }
 
+})
 
 </script>
 
 
 <style scoped lang="scss">

+ 16 - 10
src/views/index/reightDesk.vue
查看文件 

@@ -4,12 +4,12 @@
 
             <HeadlineTag type="right" value="工单统计(本周)"></HeadlineTag>
 
             <div class="box_arch">
 
                 <div class="image_tubbiness">
 
-                    <div class="work_num">3714<span>个</span></div>
 
+                    <div class="work_num">{{ resultData.TodaysTicket }}<span>个</span></div>
 
                     <div class="work_title">今日总数</div>
 
                 </div>
 
                 <div class="right_content">
 
-                    <div class="work_week"><span>进行中:</span>765</div>
 
-                    <div class="work_week"><span>已超时:</span>100</div>
 
+                    <div class="work_week"><span>进行中:</span>{{ resultData.ConductedTicket }}</div>
 
+                    <div class="work_week"><span>已超时:</span>{{ resultData.TimeoutTicket }}</div>
 
                 </div>
 
             </div>
 
         </div>
 
@@ -24,7 +24,7 @@
 
                     </div>
 
                     <div class="appeal_num">
 
                         <span>总数</span>
 
-                        <span class="amount_num">1940</span>
 
+                        <span class="amount_num">{{ resultData.Demands }}</span>
 
                     </div>
 
                 </div>
 
                 <div class="appeal_box">
 
@@ -35,7 +35,7 @@
 
                     </div>
 
                     <div class="appeal_num">
 
                         <span>已处理</span>
 
-                        <span class="amount_num">1940</span>
 
+                        <span class="amount_num">{{ resultData.DisposeDemands }}</span>
 
                     </div>
 
                 </div>
 
                 <div class="appeal_box">
 
@@ -46,7 +46,7 @@
 
                     </div>
 
                     <div class="appeal_num">
 
                         <span>未处理</span>
 
-                        <span class="amount_num">1940</span>
 
+                        <span class="amount_num">{{ resultData.UnDisposeDemands }}</span>
 
                     </div>
 
                 </div>
 
                 <div class="appeal_box">
 
@@ -57,7 +57,7 @@
 
                     </div>
 
                     <div class="appeal_num">
 
                         <span>今日新增</span>
 
-                        <span class="amount_num">+8</span>
 
+                        <span class="amount_num">+{{ resultData.TodayDisposeDemands }}</span>
 
                     </div>
 
                 </div>
 
             </div>
 
@@ -68,19 +68,19 @@
 
                 <div class="box_vehicle">
 
                     <div class="color-green-line"></div>
 
                     <span>占用</span>
 
-                    <div class="sum_cle" style="color: rgb(21, 213, 21);">1940</div>
 
+                    <div class="sum_cle" style="color: rgb(21, 213, 21);">{{ resultData.OccupationDriveway }}</div>
 
                 </div>
 
                 <div class="box_vehicle">
 
                     <div class="color-orange-line"></div>
 
                     <span>空闲</span>
 
-                    <div class="sum_cle" style="color: rgb(215, 113, 23);">1940</div>
 
+                    <div class="sum_cle" style="color: rgb(215, 113, 23);">{{ resultData.IdleDriveway }}</div>
 
                 </div>
 
             </div>
 
         </div>
 
         <div class="flex_home">
 
             <HeadlineTag type="right" value="报警统计(本周)"></HeadlineTag>
 
             <div class="box_arch">
 
-                <LineChart></LineChart>
 
+                <LineChart :lineData="resultData.AlarmCount"></LineChart>
 
             </div>
 
         </div>
 
     </div>
 
@@ -89,6 +89,12 @@
 
 <script setup>
 
 import HeadlineTag from '@/components/HeadlineTag'
 
 import LineChart from './LineChart.vue'
 
+const props = defineProps({
 
+    resultData: {
 
+        type: Object,
 
+        default: {}
 
+    }
 
+})
 
 </script>
 
 
 <style scoped lang="scss">

+ 50 - 35
src/views/system/broadcast/index.vue
查看文件 

@@ -1,40 +1,55 @@
 
 <template>
 
     <div class="_energy">
 
-     <layout>
 
-         <template #left>
 
-            <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
 
-                <deviceList  style="flex:1;"/>
 
-                <tiring 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;"/>
 
-                <sameDay style="flex: 1;"/>
 
-                <eventList style="flex: 1;"/>
 
-             </div>
 
-         </template>
 
-     </layout>
 
+        <layout>
 
+            <template #left>
 
+                <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
 
+                    <deviceList :resultData="leftData.device" style="flex:1;" />
 
+                    <tiring :resultData="leftData.TerminalOffline" style="flex: 1;" />
 
+                </div>
 
+            </template>
 
+            <template #content>
 
+                <p>广播</p>
 
+            </template>
 
+            <template #right>
 
+                <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
 
+                    <running :resultData="leftData" style="flex: 1;" />
 
+                    <sameDay :resultData="leftData.PlaybackControls" style="flex: 1;" />
 
+                    <eventList :resultData="leftData.TerminalLog" style="flex: 1;" />
 
+                </div>
 
+            </template>
 
+        </layout>
 
     </div>
 
- </template>
 
- 
- <script setup name="Role">
 
- import layout from "@/components/layout_/index.vue";
 
+</template>
 
 
- import running from './modules/running.vue'
 
- import deviceList from './modules/deviceList.vue'
 
- import sameDay from './modules/sameDay.vue'
 
- import eventList from './modules/eventList.vue'
 
- import tiring from './modules/tiring.vue'
 
+<script setup name="Role">
 
+import { getBroadcast } from "@/api/system/broadcast"
 
+import layout from "@/components/layout_/index.vue";
 
+import running from './modules/running.vue'
 
+import deviceList from './modules/deviceList.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>
 
- 
+const intervalId = ref(null)
 
+const leftData = ref({})
 
+// 生命周期
 
+onMounted(() => {
 
+    intervalId.value = setInterval(getBroadcastData, 10000);
 
+    getBroadcastData()
 
+});
 
+onUnmounted(() => {
 
+    clearInterval(intervalId.value);
 
+})
 
+function getBroadcastData() {
 
+    getBroadcast().then((res) => {
 
+        if (res.code == 200) {
 
+            leftData.value = res.data
 
+        }
 
+    })
 
+}
 
+</script>
 
+<style lang="scss">
 
+._energy {
 
+    height: 100%;
 
+}
 
+</style>

+ 102 - 60
src/views/system/broadcast/modules/deviceList.vue
查看文件 

@@ -2,25 +2,32 @@
 
     <div class="_deviceList">
 
         <HeadlineTag value="设备列表" style="flex-shrink: 0;"></HeadlineTag>
 
         <div class="point_box" style="margin-top: 10px;">
 
-          <el-input v-model="value" placeholder="按巡查点名称搜索" />
 
+            <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">
 
-                    <el-text class="w-150px mb-2 " truncated style="color: white;flex: .4;display: flex;align-items: center;">
 
+                    <el-text class="w-150px mb-2 " truncated
 
+                        style="color: white;flex: .4;display: flex;align-items: center;">
 
                         <el-icon color="#168cdb" size="16">
 
-                            <el-icon><Headset /></el-icon>
 
+                            <el-icon>
 
+                                <Headset />
 
+                            </el-icon>
 
                         </el-icon>
 
-                        <span class="_table_row1">{{ item.name }}</span>
 
+                        <span class="_table_row1">{{ item.DeviceName }}</span>
 
                     </el-text>
 
-                    <el-text class="w-150px mb-2" :class="item.state=='播放'?'_success':''" truncated style="color: #fff;flex: .2;">
 
-                        {{ item.state }}
 
+                    <el-text class="w-150px mb-2" :class="item.UseState == 1 ? '_success' : ''" truncated
 
+                        style="color: #fff;flex: .2;">
 
+                        {{ getUseState(item.UseState) }}
 
                     </el-text>
 
-                    <el-text class="w-150px mb-2" :class="item.flag=='在线'?'':'_warning'" truncated style="flex: .2;color: #fff;">
 
-                        {{ item.flag }}
 
+                    <el-text class="w-150px mb-2" :class="item.OnlineState == 1 ? '' : '_warning'" truncated
 
+                        style="flex: .2;color: #fff;">
 
+                        {{ getOnlineState(item.OnlineState) }}
 
                     </el-text>
 
                     <el-icon color="#168cdb" style="flex: .2;">
 
-                        <el-icon><Aim /></el-icon>
 
+                        <el-icon>
 
+                            <Aim />
 
+                        </el-icon>
 
                     </el-icon>
 
                 </div>
 
             </div>
 
@@ -32,46 +39,68 @@
 
 import { ref, onMounted, onUnmounted } from "vue";
 
 import HeadlineTag from '@/components/HeadlineTag'
 
 import { Headset, Aim } from '@element-plus/icons-vue'
 
+const props = defineProps({
 
+    resultData: {
 
+        type: Array,
 
+        default: []
 
+    }
 
+})
 
 const value = ref('')
 
-const eventList = ref([
 
-    { name: '终端1', state: '播放', flag: '在线' },
 
-    { name: '终端2', state: '空闲', flag: '离线' },
 
-    { name: '终端3', state: '播放', flag: '在线' },
 
-    { name: '终端4', state: '空闲', flag: '离线' },
 
-    { name: '终端5', state: '播放', flag: '在线' },
 
-    { name: '终端6', state: '空闲', flag: '离线' },
 
-    { name: '终端7', state: '播放', flag: '在线' },
 
-    { name: '终端8', state: '空闲', flag: '离线' },
 
-    { name: '终端9', state: '播放', flag: '在线' },
 
-    { name: '终端10', state: '空闲', flag: '离线' },
 
-    { name: '终端11', state: '播放', flag: '在线' },
 
-    { name: '终端12', state: '空闲', flag: '离线' },
 
-    { name: '终端13', state: '播放', flag: '在线' },
 
-    { name: '终端14', state: '空闲', flag: '离线' },
 
-    { name: '终端15', state: '播放', flag: '在线' },
 
-    { name: '终端16', state: '空闲', flag: '离线' },
 
-    { name: '终端17', state: '播放', flag: '在线' },
 
-    { name: '终端18', state: '空闲', flag: '离线' },
 
-    { name: '终端19', state: '播放', flag: '在线' },
 
-    { name: '终端20', state: '空闲', flag: '离线' },
 
-    { name: '终端21', state: '播放', flag: '在线' },
 
-    { name: '终端22', state: '空闲', flag: '离线' },
 
-    { name: '终端23', state: '播放', flag: '在线' },
 
-    { name: '终端24', state: '空闲', flag: '离线' }
 
-])
 
-
 
+// const eventList = ref([
 
+//     { name: '终端1', state: '播放', flag: '在线' },
 
+//     { name: '终端2', state: '空闲', flag: '离线' },
 
+//     { name: '终端3', state: '播放', flag: '在线' },
 
+//     { name: '终端4', state: '空闲', flag: '离线' },
 
+//     { name: '终端5', state: '播放', flag: '在线' },
 
+//     { name: '终端6', state: '空闲', flag: '离线' },
 
+//     { name: '终端7', state: '播放', flag: '在线' },
 
+//     { name: '终端8', state: '空闲', flag: '离线' },
 
+//     { name: '终端9', state: '播放', flag: '在线' },
 
+//     { name: '终端10', state: '空闲', flag: '离线' },
 
+//     { name: '终端11', state: '播放', flag: '在线' },
 
+//     { name: '终端12', state: '空闲', flag: '离线' },
 
+//     { name: '终端13', state: '播放', flag: '在线' },
 
+//     { name: '终端14', state: '空闲', flag: '离线' },
 
+//     { name: '终端15', state: '播放', flag: '在线' },
 
+//     { name: '终端16', state: '空闲', flag: '离线' },
 
+//     { name: '终端17', state: '播放', flag: '在线' },
 
+//     { name: '终端18', state: '空闲', flag: '离线' },
 
+//     { name: '终端19', state: '播放', flag: '在线' },
 
+//     { name: '终端20', state: '空闲', flag: '离线' },
 
+//     { name: '终端21', state: '播放', flag: '在线' },
 
+//     { name: '终端22', state: '空闲', flag: '离线' },
 
+//     { name: '终端23', state: '播放', flag: '在线' },
 
+//     { name: '终端24', state: '空闲', flag: '离线' }
 
+// ])
 
+const eventList = ref([])
 
+function getUseState(value) {
 
+    let title = ''
 
+    if (value == 0) {
 
+        title = '空闲'
 
+    } else {
 
+        title = '播放'
 
+    }
 
+    return title
 
+}
 
+function getOnlineState(value) {
 
+    let title = ''
 
+    if (value == 0) {
 
+        title = '离线'
 
+    } else {
 
+        title = '在线'
 
+    }
 
+    return title
 
+}
 
 const mainsRef = ref(null)
 
 const scrollY = ref(0)
 
 let intervalId = null
 
-const scrollSpeed = 1 // 滚动速度
 
+const scrollSpeed = 0.5 // 滚动速度
 
 
 const startCarousel = () => {
 
     intervalId = setInterval(() => {
 
         const itemHeight = mainsRef.value?.querySelector('._deviceList_mains_item')?.offsetHeight;
 
         if (!itemHeight) return;
 
-
 
         scrollY.value -= scrollSpeed;
 
-
 
         // 检查第一个元素是否完全离开视口
 
         if (Math.abs(scrollY.value) >= itemHeight) {
 
             // 将第一个元素移到列表末尾
 
@@ -84,15 +113,20 @@ const startCarousel = () => {
 
         }
 
     }, 20);
 
 };
 
-
 
 const pauseCarousel = () => {
 
     clearInterval(intervalId);
 
 };
 
-
 
 const resumeCarousel = () => {
 
     startCarousel();
 
 };
 
 
+watch(() => props.resultData, (newVal) => {
 
+    if (newVal) {
 
+        eventList.value = newVal
 
+    }
 
+}, { deep: true, immediate: true } // 开启深度监听
 
+)
 
+
 
 onMounted(() => {
 
     startCarousel();
 
 });
 
@@ -104,58 +138,66 @@ onUnmounted(() => {
 
 
 <style lang="scss" scoped>
 
 ._success {
 
-    color: #168cdb !important;	
+    color: #168cdb !important;
 
 }
 
+
 
 ._warning {
 
-    color: rgb(244, 67, 54) !important;	
+    color: rgb(244, 67, 54) !important;
 
 }
 
-._table_row1{
 
+
 
+._table_row1 {
 
     margin-left: 10px;
 
     text-emphasis: none;
 
     /* 新增样式让文本超出显示省略号 */
 
-    white-space: nowrap; 
-    overflow: hidden; 
-    text-overflow: ellipsis; 
+    white-space: nowrap;
 
+    overflow: hidden;
 
+    text-overflow: ellipsis;
 
 }
 
-._deviceList{
 
+
 
+._deviceList {
 
     overflow: hidden;
 
     display: flex;
 
     flex-direction: column;
 
-    &_mains{
 
-        margin:10px 30px;
 
+
 
+    &_mains {
 
+        margin: 10px 30px;
 
         overflow: hidden; // 隐藏溢出内容
 
         cursor: pointer;
 
         font-size: 12px;
 
-        &_item{
 
+
 
+        &_item {
 
             display: flex;
 
             justify-content: space-between;
 
             padding: 10px;
 
         }
 
-        &_item:nth-child(even){
 
+
 
+        &_item:nth-child(even) {
 
             background: rgba($color: #168cdb, $alpha: .05);
 
         }
 
-        &_item:hover{
 
+
 
+        &_item:hover {
 
             cursor: pointer;
 
-            background-image: linear-gradient(to right, #168cdb, transparent); 
+            background-image: linear-gradient(to right, #168cdb, transparent);
 
         }
 
     }
 
 }
 
 </style>
 
 
 <style lang="scss" scoped>
 
-.point_box{
 
-    margin:10px 30px;
 
+.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;
 
+    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;
 
+    box-shadow: 0 0 0 1px #409EFF inset !important;
 
 }
 
 
 .point_box :deep(.el-input__inner) {
 
-  color: #ffffff !important;
 
+    color: #ffffff !important;
 
 }
 
 </style>

+ 72 - 52
src/views/system/broadcast/modules/eventList.vue
查看文件 

@@ -5,15 +5,14 @@
 
             <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>
 
+                        <div :class="item.store === 'on' ? '_warning' : '_success'"
 
+                            class="_eventList_mains_item_text_flag"></div>
 
                         <el-text class="w-150px mb-2" truncated style="color: white;margin-left: 10px;">
 
-                            {{index+1}}#{{ item.name }}
 
+                            {{ index + 1 }}#{{ item.TerminalLog }}
 
                         </el-text>
 
                     </div>
 
                     <div class="_eventList_mains_item_btn">
 
-                        2025-04-15 10:20:00
 
+                        {{ item.TerminalTime }}
 
                     </div>
 
                 </div>
 
             </div>
 
@@ -24,48 +23,61 @@
 
 <script setup>
 
 import { ref, onMounted, onUnmounted } from "vue";
 
 import HeadlineTag from '@/components/HeadlineTag'
 
+const props = defineProps({
 
+    resultData: {
 
+        type: Array,
 
+        default: []
 
+    }
 
+})
 
+const eventList = ref([])
 
 
-const eventList = ref([{
 
-    store: 'on',
 
-    color: 'rgb(82.4, 155.2, 46.4)',
 
-    name: '终端设备播放',
 
-    time: '2025-04-15 10:20:00'
 
-}, {
 
-    store: 'on',
 
-    color: 'rgb(82.4, 155.2, 46.4)',
 
-    name: '终端设备播放',
 
-    time: '2025-04-15 10:20:00'
 
-}, {
 
-    store: 'off',
 
-    color: 'red',
 
-    name: '终端设备停止',
 
-    time: '2025-04-15 10:20:00'
 
-}, {
 
-    store: 'on',
 
-    color: 'rgb(82.4, 155.2, 46.4)',
 
-    name: '终端设备播放',
 
-    time: '2025-04-15 10:20:00'
 
-}, {
 
-    store: 'off',
 
-    color: 'red',
 
-    name: '终端设备停止',
 
-    time: '2025-04-15 10:20:00'
 
-}, {
 
-    store: 'off',
 
-    color: 'red',
 
-    name: '终端设备停止',
 
-    time: '2025-04-15 10:20:00'
 
-}, {
 
-    store: 'on',
 
-    color: 'rgb(82.4, 155.2, 46.4)',
 
-    name: '终端设备播放',
 
-    time: '2025-04-15 10:20:00'
 
-}, {
 
-    store: 'off',
 
-    color: 'red',
 
-    name: '终端设备停止',
 
-    time: '2025-04-15 10:20:00'
 
-}])
 
+watch(() => props.resultData, (newVal) => {
 
+    if (newVal) {
 
+        eventList.value = newVal
 
+    }
 
+}, { deep: true, immediate: true } // 开启深度监听
 
+)
 
+// const eventList = ref([{
 
+//     store: 'on',
 
+//     color: 'rgb(82.4, 155.2, 46.4)',
 
+//     name: '终端设备播放',
 
+//     time: '2025-04-15 10:20:00'
 
+// }, {
 
+//     store: 'on',
 
+//     color: 'rgb(82.4, 155.2, 46.4)',
 
+//     name: '终端设备播放',
 
+//     time: '2025-04-15 10:20:00'
 
+// }, {
 
+//     store: 'off',
 
+//     color: 'red',
 
+//     name: '终端设备停止',
 
+//     time: '2025-04-15 10:20:00'
 
+// }, {
 
+//     store: 'on',
 
+//     color: 'rgb(82.4, 155.2, 46.4)',
 
+//     name: '终端设备播放',
 
+//     time: '2025-04-15 10:20:00'
 
+// }, {
 
+//     store: 'off',
 
+//     color: 'red',
 
+//     name: '终端设备停止',
 
+//     time: '2025-04-15 10:20:00'
 
+// }, {
 
+//     store: 'off',
 
+//     color: 'red',
 
+//     name: '终端设备停止',
 
+//     time: '2025-04-15 10:20:00'
 
+// }, {
 
+//     store: 'on',
 
+//     color: 'rgb(82.4, 155.2, 46.4)',
 
+//     name: '终端设备播放',
 
+//     time: '2025-04-15 10:20:00'
 
+// }, {
 
+//     store: 'off',
 
+//     color: 'red',
 
+//     name: '终端设备停止',
 
+//     time: '2025-04-15 10:20:00'
 
+// }])
 
 
 const mainsRef = ref(null)
 
 const scrollY = ref(0)
 
@@ -111,11 +123,13 @@ onUnmounted(() => {
 
 
 <style lang="scss" scoped>
 
 ._success {
 
-    background: #15acaa;	
+    background: #15acaa;
 
 }
 
+
 
 ._warning {
 
-    background: #FFC107;	
+    background: #FFC107;
 
 }
 
+
 
 ._eventList {
 
     overflow: hidden;
 
     display: flex;
 
@@ -137,32 +151,38 @@ onUnmounted(() => {
 
                 display: flex;
 
                 justify-content: space-between;
 
                 align-items: center;
 
+
 
                 &_flag {
 
                     width: 10px;
 
                     height: 10px;
 
                     border-radius: 50%;
 
-                    margin-left: 10px; 
+                    margin-left: 10px;
 
                 }
 
+
 
                 &_p {
 
                     margin-left: 10px;
 
                 }
 
             }
 
-            &_btn{
 
+
 
+            &_btn {
 
                 color: #fff;
 
                 display: flex;
 
                 font-size: 14px;
 
                 gap: 20px;
 
+
 
                 &_item {
 
                     border-radius: 5px;
 
                     cursor: pointer;
 
                 }
 
             }
 
         }
 
-        &_item:nth-child(even){
 
+
 
+        &_item:nth-child(even) {
 
             background: rgba($color: #168cdb, $alpha: .05);
 
         }
 
+
 
         &_item:hover {
 
-            background-image: linear-gradient(to right, #168cdb, transparent); 
+            background-image: linear-gradient(to right, #168cdb, transparent);
 
         }
 
     }
 
 }

+ 26 - 14
src/views/system/broadcast/modules/running.vue
查看文件 

@@ -10,24 +10,26 @@
 
 <script setup>
 
 import { ref, onUnmounted } from "vue";
 
 import HeadlineTag from '@/components/HeadlineTag'
 
+const props = defineProps({
 
+    resultData: {
 
+        type: Object,
 
+        default: {}
 
+    }
 
+})
 
 
 // 配置胶囊图数据
 
 const config = ref({
 
     // 胶囊图数据
 
-    data: [
 
-        {
 
-            name: '使用中',
 
-            value: 154,
 
-        },
 
-        {
 
-            name: '空闲中',
 
-            value: 15,
 
-        },
 
-        {
 
-            name: '已离线',
 
-            value: 81,
 
-        }
 
-    ],
 
+    data: [{
 
+        name: '使用中',
 
+        value: 0,
 
+    }, {
 
+        name: '空闲中',
 
+        value: 0,
 
+    }, {
 
+        name: '已离线',
 
+        value: 0,
 
+    }],
 
     colors: ['#409eff', '#15acaa', '#f44336'], // 关键修改点
 
     showValue: true,
 
     // 图表样式配置
 
@@ -43,6 +45,14 @@ const config = ref({
 
     }
 
 });
 
 
+watch(() => props.resultData, (newVal) => {
 
+    if (newVal) {
 
+        config.value.data[0].value = newVal.RunStateUse
 
+        config.value.data[1].value = newVal.FreeStateUse
 
+        config.value.data[2].value = newVal.offlineStateUse
 
+    }
 
+}, { deep: true, immediate: true } // 开启深度监听
 
+)
 
 // 组件卸载时的清理逻辑
 
 onUnmounted(() => {
 
     // 这里可以添加额外的清理逻辑，如果 dv-capsule-chart 有提供销毁方法的话
 
@@ -56,6 +66,7 @@ onUnmounted(() => {
 
 ._running {
 
     display: flex;
 
     flex-direction: column;
 
+
 
     &_mains {
 
         flex: 1;
 
         margin: 30px;
 
@@ -63,6 +74,7 @@ onUnmounted(() => {
 
         align-items: center;
 
     }
 
 }
 
+
 
 @keyframes scanning {
 
     to {
 
         transform: rotate(1turn);

+ 57 - 44
src/views/system/broadcast/modules/sameDay.vue
查看文件 

@@ -6,13 +6,13 @@
 
                 <div class="_eventList_mains_item" v-for="(item, index) in eventList.concat(eventList)" :key="index">
 
                     <div class="_eventList_mains_item_text">
 
                         <div class="_eventList_mains_item_text_flag">
 
-                            <el-icon :color="item.store === 'on' ?'#168cdb':'#FFC107'" :size="20">
 
-                                <Microphone v-if="item.store === 'on'"/>
 
+                            <el-icon :color="item.DeviceName === 'on' ?'#168cdb':'#FFC107'" :size="20">
 
+                                <Microphone v-if="item.DeviceName === 'on'"/>
 
                                 <Mute v-else/>
 
                             </el-icon>
 
                         </div>
 
                         <el-text class="w-150px mb-2" truncated style="color: #fff;">
 
-                            {{index+1}}F#{{ item.name }}
 
+                            {{index+1}}F#{{ item.DeviceName }}
 
                         </el-text>
 
                     </div>
 
                     <div class="_xian"></div>
 
@@ -29,48 +29,61 @@
 
 <script setup>
 
 import { ref, onMounted, onUnmounted } from "vue";
 
 import HeadlineTag from '@/components/HeadlineTag'
 
+const props = defineProps({
 
+    resultData: {
 
+        type: Array,
 
+        default: []
 
+    }
 
+})
 
+const eventList = ref([])
 
 
-const eventList = ref([{
 
-    store: 'on',
 
-    color: 'rgb(82.4, 155.2, 46.4)',
 
-    name: '终端',
 
-    time: '2025-04-15 10:20:00'
 
-}, {
 
-    store: 'on',
 
-    color: 'rgb(82.4, 155.2, 46.4)',
 
-    name: '终端',
 
-    time: '2025-04-15 10:20:00'
 
-}, {
 
-    store: 'off',
 
-    color: 'red',
 
-    name: '终端',
 
-    time: '2025-04-15 10:20:00'
 
-}, {
 
-    store: 'on',
 
-    color: 'rgb(82.4, 155.2, 46.4)',
 
-    name: '终端',
 
-    time: '2025-04-15 10:20:00'
 
-}, {
 
-    store: 'off',
 
-    color: 'red',
 
-    name: '终端',
 
-    time: '2025-04-15 10:20:00'
 
-}, {
 
-    store: 'off',
 
-    color: 'red',
 
-    name: '终端',
 
-    time: '2025-04-15 10:20:00'
 
-}, {
 
-    store: 'on',
 
-    color: 'rgb(82.4, 155.2, 46.4)',
 
-    name: '终端',
 
-    time: '2025-04-15 10:20:00'
 
-}, {
 
-    store: 'off',
 
-    color: 'red',
 
-    name: '终端',
 
-    time: '2025-04-15 10:20:00'
 
-}])
 
+watch(() => props.resultData, (newVal) => {
 
+    if (newVal) {
 
+        eventList.value = newVal
 
+    }
 
+}, { deep: true, immediate: true } // 开启深度监听
 
+)
 
+// const eventList = ref([{
 
+//     store: 'on',
 
+//     color: 'rgb(82.4, 155.2, 46.4)',
 
+//     name: '终端',
 
+//     time: '2025-04-15 10:20:00'
 
+// }, {
 
+//     store: 'on',
 
+//     color: 'rgb(82.4, 155.2, 46.4)',
 
+//     name: '终端',
 
+//     time: '2025-04-15 10:20:00'
 
+// }, {
 
+//     store: 'off',
 
+//     color: 'red',
 
+//     name: '终端',
 
+//     time: '2025-04-15 10:20:00'
 
+// }, {
 
+//     store: 'on',
 
+//     color: 'rgb(82.4, 155.2, 46.4)',
 
+//     name: '终端',
 
+//     time: '2025-04-15 10:20:00'
 
+// }, {
 
+//     store: 'off',
 
+//     color: 'red',
 
+//     name: '终端',
 
+//     time: '2025-04-15 10:20:00'
 
+// }, {
 
+//     store: 'off',
 
+//     color: 'red',
 
+//     name: '终端',
 
+//     time: '2025-04-15 10:20:00'
 
+// }, {
 
+//     store: 'on',
 
+//     color: 'rgb(82.4, 155.2, 46.4)',
 
+//     name: '终端',
 
+//     time: '2025-04-15 10:20:00'
 
+// }, {
 
+//     store: 'off',
 
+//     color: 'red',
 
+//     name: '终端',
 
+//     time: '2025-04-15 10:20:00'
 
+// }])
 
 
 const mainsRef = ref(null)
 
 const scrollY = ref(0)

+ 23 - 5
src/views/system/broadcast/modules/tiring.vue
查看文件 

@@ -11,10 +11,15 @@
 
 import { ref, onMounted, onUnmounted } from 'vue';
 
 import * as echarts from 'echarts';
 
 import HeadlineTag from '@/components/HeadlineTag';
 
+const props = defineProps({
 
+    resultData: {
 
+        type: Object,
 
+        default: {}
 
+    }
 
+})
 
 
 const chartRef = ref(null);
 
 let chart = null;
 
-
 
 const generateRandomData = (length, max) => {
 
     const randomData = [];
 
     for (let i = 0; i < length; i++) {
 
@@ -32,10 +37,8 @@ const handleResize = () => {
 
 onMounted(() => {
 
     if (chartRef.value) {
 
         chart = echarts.init(chartRef.value);
 
-
 
         // 生成一周的日期数据
 
-        const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
 
-
 
+        const weekDays = [];
 
         const option = {
 
             xAxis: {
 
                 type: 'category',
 
@@ -79,7 +82,8 @@ onMounted(() => {
 
                 {
 
                     name: '设备离线',
 
                     type: 'line',
 
-                    data: generateRandomData(7, 50),
 
+                    // data: generateRandomData(7, 50),
 
+                    data: [],
 
                     lineStyle: {
 
                         color: '#de4337',
 
                     },
 
@@ -114,6 +118,20 @@ onMounted(() => {
 
     window.addEventListener('resize', handleResize);
 
 });
 
 
+watch(() => props.resultData, (newVal) => {
 
+    if (chart) {
 
+        chart.setOption({
 
+            xAxis: {
 
+                data: Object.keys(newVal),
 
+            },
 
+            series: [{
 
+                type: 'line',
 
+                data: Object.entries(newVal),
 
+            }],
 
+        })
 
+    }
 
+}, { deep: true, immediate: true } // 开启深度监听
 
+)
 
 onUnmounted(() => {
 
     window.removeEventListener('resize', handleResize);
 
     if (chart) {

+ 52 - 37
src/views/system/elevator/index.vue
查看文件 

@@ -1,42 +1,57 @@
 
 <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>
 
+        <layout>
 
+            <template #left>
 
+                <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
 
+                    <running :resultData="leftData" style="flex: 1;" />
 
+                    <consume :resultData="leftData" style="flex:1;" />
 
+                    <carbonEmission :resultData="leftData.RunState" style="flex:1;" />
 
+                </div>
 
+            </template>
 
+            <template #content>
 
+                <!-- <p>电梯</p> -->
 
+            </template>
 
+            <template #right>
 
+                <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
 
+                    <eventList :resultData="leftData.OverloadCount" style="flex: 1;" />
 
+                    <tiring :resultData="leftData.TrappedPerson" style="flex: 1;" />
 
+                    <sameDay :resultData="leftData.AbnormalCount" style="flex: 1;" />
 
+                </div>
 
+            </template>
 
+        </layout>
 
     </div>
 
- </template>
 
- 
- <script setup name="Role">
 
- import layout from "@/components/layout_/index.vue";
 
+</template>
 
 
- 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 setup>
 
+import { getElevator } from "@/api/system/elevator"
 
+import layout from "@/components/layout_/index.vue";
 
+import running from './modules/running.vue'
 
+import consume from './modules/consume.vue'
 
+import carbonEmission from "./modules/carbonEmission.vue";
 
+import sameDay from './modules/sameDay.vue'
 
+import eventList from './modules/eventList.vue'
 
+import tiring from './modules/tiring.vue'
 
 
- 
- </script> 
- <style lang="scss">
 
- ._energy{
 
-     height: 100%;
 
- }
 
- </style>
 
- 
+const intervalId = ref(null)
 
+const leftData = ref({})
 
+// 生命周期
 
+onMounted(() => {
 
+    intervalId.value = setInterval(getElevatorData, 10000);
 
+    getElevatorData()
 
+});
 
+onUnmounted(() => {
 
+    clearInterval(intervalId.value);
 
+})
 
+function getElevatorData() {
 
+    getElevator().then((res) => {
 
+        if (res.code == 200) {
 
+            leftData.value = res.data
 
+        }
 
+    })
 
+}
 
+</script>
 
+<style lang="scss">
 
+._energy {
 
+    height: 100%;
 
+}
 
+</style>

+ 28 - 9
src/views/system/elevator/modules/carbonEmission.vue
查看文件 

@@ -11,7 +11,14 @@
 
 import { ref, onMounted, onUnmounted } from 'vue';
 
 import * as echarts from 'echarts';
 
 import HeadlineTag from '@/components/HeadlineTag';
 
+import Empty from '@/components/Empty'
 
 
+const props = defineProps({
 
+    resultData: {
 
+        type: Object,
 
+        default: {}
 
+    }
 
+})
 
 const chartRef = ref(null);
 
 let chart = null;
 
 
@@ -22,20 +29,16 @@ const generateRandomData = (length, max) => {
 
     }
 
     return randomData;
 
 };
 
-
 
 const handleResize = () => {
 
     if (chart) {
 
         chart.resize();
 
     }
 
 };
 
-
 
 onMounted(() => {
 
     if (chartRef.value) {
 
         chart = echarts.init(chartRef.value);
 
-
 
         // 生成一周的日期数据
 
-        const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
 
-
 
+        const weekDays = [];
 
         const option = {
 
             xAxis: {
 
                 type: 'category',
 
@@ -79,7 +82,7 @@ onMounted(() => {
 
                 {
 
                     name: '运行正常',
 
                     type: 'bar',
 
-                    data: generateRandomData(7, 50),
 
+                    data: [],
 
                     barWidth: '30%',
 
                     itemStyle: {
 
                         color: {
 
@@ -95,14 +98,14 @@ onMounted(() => {
 
                             }],
 
                             global: false // 缺省为 false
 
                         },
 
-                        barBorderRadius: [10, 10, 10,10]
 
+                        barBorderRadius: [10, 10, 10, 10]
 
                     },
 
                 },
 
                 // 曲线表示运行异常
 
                 {
 
                     name: '运行异常',
 
                     type: 'line',
 
-                    data: generateRandomData(7, 50),
 
+                    data: [],
 
                     lineStyle: {
 
                         color: '#216b87',
 
                     },
 
@@ -131,12 +134,28 @@ onMounted(() => {
 
                 }
 
             ]
 
         };
 
-
 
         chart.setOption(option);
 
     }
 
     window.addEventListener('resize', handleResize);
 
 });
 
 
+watch(() => props.resultData, (newVal) => {
 
+    if (chart) {
 
+        chart.setOption({
 
+            xAxis: {
 
+                data: Object.keys(newVal),
 
+            },
 
+            series: [{
 
+                type: 'bar',
 
+                data: Object.entries(newVal),
 
+            }, {
 
+                type: 'line',
 
+                data: Object.entries(newVal),
 
+            }],
 
+        })
 
+    }
 
+}, { deep: true, immediate: true } // 开启深度监听
 
+)
 
 onUnmounted(() => {
 
     window.removeEventListener('resize', handleResize);
 
     if (chart) {

+ 33 - 18
src/views/system/elevator/modules/consume.vue
查看文件 

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

+ 24 - 7
src/views/system/elevator/modules/eventList.vue
查看文件 

@@ -11,10 +11,15 @@
 
 import { ref, onMounted, onUnmounted } from 'vue';
 
 import * as echarts from 'echarts';
 
 import HeadlineTag from '@/components/HeadlineTag';
 
+const props = defineProps({
 
+    resultData: {
 
+        type: Object,
 
+        default: {}
 
+    }
 
+})
 
 
 const chartRef = ref(null);
 
 let chart = null;
 
-
 
 const generateRandomData = (length, max) => {
 
     const randomData = [];
 
     for (let i = 0; i < length; i++) {
 
@@ -22,20 +27,17 @@ const generateRandomData = (length, max) => {
 
     }
 
     return randomData;
 
 };
 
-
 
 const handleResize = () => {
 
     if (chart) {
 
         chart.resize();
 
     }
 
 };
 
-
 
 onMounted(() => {
 
     if (chartRef.value) {
 
         chart = echarts.init(chartRef.value);
 
-
 
         // 生成一周的日期数据
 
-        const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
 
-
 
+        // const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
 
+        const weekDays = [];
 
         const option = {
 
             xAxis: {
 
                 type: 'category',
 
@@ -79,7 +81,8 @@ onMounted(() => {
 
                 {
 
                     name: '超载预警次数',
 
                     type: 'line',
 
-                    data: generateRandomData(7, 50),
 
+                    // data: generateRandomData(7, 50),
 
+                    data: [],
 
                     lineStyle: {
 
                         color: '#3b90d7',
 
                     },
 
@@ -114,6 +117,20 @@ onMounted(() => {
 
     window.addEventListener('resize', handleResize);
 
 });
 
 
+watch(() => props.resultData, (newVal) => {
 
+    if (chart) {
 
+        chart.setOption({
 
+            xAxis: {
 
+                data: Object.keys(newVal),
 
+            },
 
+            series: [{
 
+                type: 'line',
 
+                data: Object.entries(newVal),
 
+            }],
 
+        })
 
+    }
 
+}, { deep: true, immediate: true } // 开启深度监听
 
+)
 
 onUnmounted(() => {
 
     window.removeEventListener('resize', handleResize);
 
     if (chart) {

+ 53 - 26
src/views/system/elevator/modules/running.vue
查看文件 

@@ -5,23 +5,25 @@
 
         <div class="_running_mains">
 
             <div class="_running_mains_left">
 
                 <dv-decoration-9 style="width:150px;height:150px;">
 
-                   <div class="_running_mains_left_conter">
 
-                        <div class="_running_mains_left_conter_num">785</div>
 
+                    <div class="_running_mains_left_conter">
 
+                        <div class="_running_mains_left_conter_num">{{ resultData.ElevatorCount }}</div>
 
                         <div class="_running_mains_left_conter_text">电梯总量</div>
 
-                   </div>
 
+                    </div>
 
                 </dv-decoration-9>
 
             </div>
 
             <div class="_running_mains_right">
 
-                <div class="_running_mains_right_item" v-for="item,index in runningList" :key="index">
 
+                <div class="_running_mains_right_item" v-for="item, index in runningList" :key="index">
 
                     <div class="_running_mains_right_item_tuan">
 
-                        <span class="_running_mains_right_item_tuan_flag" :style="{backgroundColor: item.color}"></span>
 
+                        <span class="_running_mains_right_item_tuan_flag"
 
+                            :style="{ backgroundColor: item.color }"></span>
 
                         <el-text class="w-150px mb-2" truncated style="color: #ccc;">
 
-                            {{item.name}}
 
+                            {{ item.name }}
 
                         </el-text>
 
                     </div>
 
                     <div class="_running_mains_right_item__txt">
 
-                        <span>{{item.state}}</span> 
-                        <span :style="{color:item.color,'font-size':'12px','margin-left':'5px'}">{{item.unit}}</span>
 
+                        <span>{{ item.state }}</span>
 
+                        <span :style="{ color: item.color, 'font-size': '12px', 'margin-left': '5px' }">{{ item.unit
 
+                            }}</span>
 
                     </div>
 
                 </div>
 
             </div>
 
@@ -33,29 +35,46 @@
 
 import { ref } from "vue";
 
 import HeadlineTag from '@/components/HeadlineTag'
 
 const runningList = ref([
 
-    { name:'运行正常', state:'154', color:'#409eff', unit:'台'},
 
-    { name:'运行异常', state:'15', color:'#15acaa', unit:'台'},
 
+    { name: '运行正常', state: 0, color: '#409eff', unit: '台' },
 
+    { name: '运行异常', state: 0, color: '#15acaa', unit: '台' },
 
 ])
 
+
 
+const props = defineProps({
 
+    resultData: {
 
+        type: Object,
 
+        default: {}
 
+    }
 
+})
 
+watch(() => props.resultData, (newVal) => {
 
+    if (newVal) {
 
+        runningList.value[0].state = newVal.RunningNormally
 
+        runningList.value[1].state = newVal.RunningAbnormal
 
+    }
 
+}, { deep: true, immediate: true } // 开启深度监听
 
+)
 
 </script>
 
 <style lang="scss" scoped>
 
 ._running {
 
     display: flex;
 
     flex-direction: column;
 
+
 
     &_mains {
 
         flex: 1;
 
         margin: 30px;
 
         display: flex;
 
         align-items: center;
 
+
 
         &_left {
 
             width: 180px;
 
             height: 180px;
 
             position: relative;
 
             flex-shrink: 0;
 
+
 
             &_conter {
 
                 position: absolute;
 
                 left: 0;
 
                 top: 0;
 
-            	flex-shrink: 0;
 
+                flex-shrink: 0;
 
                 width: 100%;
 
                 height: 100%;
 
                 display: flex;
 
@@ -63,27 +82,33 @@ const runningList = ref([
 
                 align-items: center;
 
                 justify-content: center;
 
                 color: #fff;
 
+
 
                 &_num {
 
                     font-size: 18px;
 
                 }
 
+
 
                 &_text {
 
                     font-size: 12px;
 
-                }	
+                }
 
             }
 
         }
 
+
 
         &_right {
 
-            margin-left:10px;
 
-           flex: 1;
 
-           color: #fff;
 
-           &_item{
 
+            margin-left: 10px;
 
+            flex: 1;
 
+            color: #fff;
 
+
 
+            &_item {
 
                 display: flex;
 
-                align-items: center; 
+                align-items: center;
 
                 gap: 40px;
 
                 padding: 5px 0;
 
+
 
                 &_tuan {
 
                     display: flex;
 
-                    align-items: center; 
-                    &_flag{
 
+                    align-items: center;
 
+
 
+                    &_flag {
 
                         display: block;
 
                         width: 7px;
 
                         height: 7px;
 
@@ -91,18 +116,20 @@ const runningList = ref([
 
                         margin-right: 10px;
 
                     }
 
                 }
 
-                &__txt{
 
-                    font-size:24px;
 
+
 
+                &__txt {
 
+                    font-size: 24px;
 
                 }
 
             }
 
         }
 
 
-        
+
 
     }
 
 }
 
+
 
 @keyframes scanning {
 
-		to {
 
-			transform: rotate(1turn);
 
-		}
 
-	}
 
+    to {
 
+        transform: rotate(1turn);
 
+    }
 
+}
 
 </style>

+ 23 - 8
src/views/system/elevator/modules/sameDay.vue
查看文件 

@@ -11,10 +11,15 @@
 
 import { ref, onMounted, onUnmounted } from 'vue';
 
 import * as echarts from 'echarts';
 
 import HeadlineTag from '@/components/HeadlineTag';
 
+const props = defineProps({
 
+    resultData: {
 
+        type: Object,
 
+        default: {}
 
+    }
 
+})
 
 
 const chartRef = ref(null);
 
 let chart = null;
 
-
 
 const generateRandomData = (length, max) => {
 
     const randomData = [];
 
     for (let i = 0; i < length; i++) {
 
@@ -22,20 +27,16 @@ const generateRandomData = (length, max) => {
 
     }
 
     return randomData;
 
 };
 
-
 
 const handleResize = () => {
 
     if (chart) {
 
         chart.resize();
 
     }
 
 };
 
-
 
 onMounted(() => {
 
     if (chartRef.value) {
 
         chart = echarts.init(chartRef.value);
 
-
 
         // 生成一周的日期数据
 
-        const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
 
-
 
+        const weekDays = [];
 
         const option = {
 
             xAxis: {
 
                 type: 'category',
 
@@ -79,7 +80,8 @@ onMounted(() => {
 
                 {
 
                     name: '异常震动次数',
 
                     type: 'line',
 
-                    data: generateRandomData(7, 50),
 
+                    // data: generateRandomData(7, 50),
 
+                    data: [],
 
                     lineStyle: {
 
                         color: '#de4337',
 
                     },
 
@@ -108,12 +110,25 @@ onMounted(() => {
 
                 }
 
             ]
 
         };
 
-
 
         chart.setOption(option);
 
     }
 
     window.addEventListener('resize', handleResize);
 
 });
 
 
+watch(() => props.resultData, (newVal) => {
 
+    if (chart) {
 
+        chart.setOption({
 
+            xAxis: {
 
+                data: Object.keys(newVal),
 
+            },
 
+            series: [{
 
+                type: 'line',
 
+                data: Object.entries(newVal),
 
+            }],
 
+        })
 
+    }
 
+}, { deep: true, immediate: true } // 开启深度监听
 
+)
 
 onUnmounted(() => {
 
     window.removeEventListener('resize', handleResize);
 
     if (chart) {

+ 22 - 8
src/views/system/elevator/modules/tiring.vue
查看文件 

@@ -11,10 +11,15 @@
 
 import { ref, onMounted, onUnmounted } from 'vue';
 
 import * as echarts from 'echarts';
 
 import HeadlineTag from '@/components/HeadlineTag';
 
+const props = defineProps({
 
+    resultData: {
 
+        type: Object,
 
+        default: {}
 
+    }
 
+})
 
 
 const chartRef = ref(null);
 
 let chart = null;
 
-
 
 const generateRandomData = (length, max) => {
 
     const randomData = [];
 
     for (let i = 0; i < length; i++) {
 
@@ -22,20 +27,16 @@ const generateRandomData = (length, max) => {
 
     }
 
     return randomData;
 
 };
 
-
 
 const handleResize = () => {
 
     if (chart) {
 
         chart.resize();
 
     }
 
 };
 
-
 
 onMounted(() => {
 
     if (chartRef.value) {
 
         chart = echarts.init(chartRef.value);
 
-
 
         // 生成一周的日期数据
 
-        const weekDays = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
 
-
 
+        const weekDays = [];
 
         const option = {
 
             xAxis: {
 
                 type: 'category',
 
@@ -79,7 +80,7 @@ onMounted(() => {
 
                 {
 
                     name: '困人告警次数',
 
                     type: 'line',
 
-                    data: generateRandomData(7, 50),
 
+                    data: [],
 
                     lineStyle: {
 
                         color: '#ffc107',
 
                     },
 
@@ -108,12 +109,25 @@ onMounted(() => {
 
                 }
 
             ]
 
         };
 
-
 
         chart.setOption(option);
 
     }
 
     window.addEventListener('resize', handleResize);
 
 });
 
 
+watch(() => props.resultData, (newVal) => {
 
+    if (chart) {
 
+        chart.setOption({
 
+            xAxis: {
 
+                data: Object.keys(newVal),
 
+            },
 
+            series: [{
 
+                type: 'line',
 
+                data: Object.entries(newVal),
 
+            }],
 
+        })
 
+    }
 
+}, { deep: true, immediate: true } // 开启深度监听
 
+)
 
 onUnmounted(() => {
 
     window.removeEventListener('resize', handleResize);
 
     if (chart) {

+ 47 - 9
src/views/system/message/modules/consume.vue
查看文件 

@@ -1,8 +1,8 @@
 
 <template>
 
     <div class="_runnings">
 
         <HeadlineTag type="right" value="信息类型占比"></HeadlineTag>
 
-        <div class="_runnings_mains">
 
-            <div class="_runnings_mains_left">
 
+        <div class="_runnings_mains" :style="{ '--heightSume': heightcon + 'px' }">
 
+            <div class="_runnings_mains_left" id="sumeWidth">
 
                 <div class="_runnings_mains_left_tuan tuan1"></div>
 
                 <div class="_runnings_mains_left_conter">
 
                     <div class="_runnings_mains_left_conter_num">75</div>
 
@@ -35,21 +35,28 @@ const runningList = ref([
 
     { name: '异常行为', state: '15', color: '#15acaa', tip: '徘徊、倒地、聚集' },
 
     { name: '丢失告警', state: '134', color: '#FFC107', tip: '物品遗留/丢失告警' },
 
 ])
 
+const heightcon = ref(0)
 
+// 生命周期
 
+onMounted(() => {
 
+    var element = document.getElementById("sumeWidth");
 
+    var width = element.offsetWidth;
 
+    heightcon.value = width
 
+});
 
 </script>
 
 <style lang="scss" scoped>
 
 .tuan1 {
 
     background: url("@/assets/images/video_bg_1.png");
 
-    // animation: scanning 10s linear infinite;
 
+    animation: scanning 10s linear infinite;
 
 }
 
 
 .tuan2 {
 
     background: url("@/assets/images/video_bg_2.png");
 
-    // animation: scanning 10s linear infinite;
 
+    animation: scanning 10s linear infinite;
 
 }
 
 
 .tuan3 {
 
     background: url("@/assets/images/video_bg_3.png");
 
-    // animation: scanning 10s linear infinite;
 
+    animation: scanning 10s linear infinite;
 
 }
 
 
 ._runnings {
 
@@ -59,15 +66,15 @@ const runningList = ref([
 
 
     &_mains {
 
         flex: 1;
 
-        margin: 30px;
 
+        width: 100%;
 
         display: flex;
 
         align-items: center;
 
-        flex-wrap: wrap;
 
+        justify-content: space-around;
 
 
         &_left {
 
             flex-shrink: 0;
 
-            width: 140px;
 
-            height: 140px;
 
+            width: 32%;
 
+            height: var(--heightSume);
 
             position: relative;
 
 
             &_tuan {
 
@@ -101,6 +108,37 @@ const runningList = ref([
 
             }
 
         }
 
 
+        &_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;
 
+                }
 
+            }
 
+        }
 
+
 
+
 
     }
 
 }

+ 19 - 3
src/views/system/tenement/index.vue
查看文件 

@@ -9,7 +9,7 @@
 
                 </div>
 
             </template>
 
             <template #content>
 
-                <p>物业</p>
 
+                <!-- <p>物业</p> -->
 
             </template>
 
             <template #right>
 
                 <div style="height: 100%;display: flex;flex-direction: column;overflow: hidden;">
 
@@ -23,8 +23,8 @@
 
 </template>
 
 
 <script setup name="Role">
 
+import { getBroadcast } from "@/api/system/tenement"
 
 import layout from "@/components/layout_/index.vue";
 
-
 
 import running from './modules/running.vue'
 
 import consume from './modules/consume.vue'
 
 import carbonEmission from "./modules/carbonEmission.vue";
 
@@ -32,7 +32,23 @@ import sameDay from './modules/sameDay.vue'
 
 import eventList from './modules/eventList.vue'
 
 import tiring from './modules/tiring.vue'
 
 
-
 
+const intervalId = ref(null)
 
+const leftData = ref({})
 
+// 生命周期
 
+onMounted(() => {
 
+    intervalId.value = setInterval(getBroadcastData, 10000);
 
+    getBroadcastData()
 
+});
 
+onUnmounted(() => {
 
+    clearInterval(intervalId.value);
 
+})
 
+function getBroadcastData() {
 
+    getBroadcast().then((res) => {
 
+        if (res.code == 200) {
 
+            leftData.value = res.data
 
+        }
 
+    })
 
+}
 
 </script>
 
 <style lang="scss">
 
 ._energy {

+ 71 - 24
src/views/system/tenement/modules/consume.vue
查看文件 

@@ -1,9 +1,8 @@
 
 <template>
 
     <div class="_runnings">
 
         <HeadlineTag value="统计数据"></HeadlineTag>
 
-
 
-        <div class="_runnings_mains">
 
-            <div class="_runnings_mains_left">
 
+        <div class="_runnings_mains" :style="{ '--heightSume': heightcon + 'px' }">
 
+            <div class="_runnings_mains_left" id="sumeWidth">
 
                 <div class="_runnings_mains_left_tuan tuan1"></div>
 
                 <div class="_runnings_mains_left_conter">
 
                     <div class="_runnings_mains_left_conter_num">785</div>
 
@@ -32,51 +31,65 @@
 
 import { ref } from "vue";
 
 import HeadlineTag from '@/components/HeadlineTag'
 
 const runningList = ref([
 
-    { name:'入侵检测', state:'154', color:'#409eff',tip:'划定区域人员闯入'},
 
-    { name:'异常行为', state:'15', color:'#15acaa',tip:'徘徊、倒地、聚集'}, 
-    { name:'丢失告警', state:'134', color:'#FFC107',tip:'物品遗留/丢失告警'},
 
+    { name: '入侵检测', state: '154', color: '#409eff', tip: '划定区域人员闯入' },
 
+    { name: '异常行为', state: '15', color: '#15acaa', tip: '徘徊、倒地、聚集' },
 
+    { name: '丢失告警', state: '134', color: '#FFC107', tip: '物品遗留/丢失告警' },
 
 ])
 
+const heightcon = ref(0)
 
+// 生命周期
 
+onMounted(() => {
 
+    var element = document.getElementById("sumeWidth");
 
+    var width = element.offsetWidth;
 
+    heightcon.value = width
 
+});
 
 </script>
 
 <style lang="scss" scoped>
 
 .tuan1 {
 
-    background: url("@/assets/images/video_bg_1.png");	
-    // animation: scanning 10s linear infinite;
 
+    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;
 
+    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;
 
+    background: url("@/assets/images/video_bg_3.png");
 
+    animation: scanning 10s linear infinite;
 
 }
 
+
 
 ._runnings {
 
     display: flex;
 
     align-items: center;
 
     flex-direction: column;
 
+
 
     &_mains {
 
         flex: 1;
 
-        margin: 30px;
 
+        width: 100%;
 
         display: flex;
 
         align-items: center;
 
-        flex-wrap: wrap;
 
+        justify-content: space-around;
 
+
 
         &_left {
 
             flex-shrink: 0;
 
-            width: 140px;
 
-            height: 140px;
 
+            width: 32%;
 
+            height: var(--heightSume);
 
             position: relative;
 
-            &_tuan{
 
+
 
+            &_tuan {
 
                 width: 100%;
 
                 height: 100%;
 
                 background-size: 80% 80%;
 
                 background-position: center;
 
                 background-repeat: no-repeat;
 
             }
 
+
 
             &_conter {
 
                 position: absolute;
 
                 left: 0;
 
                 top: 0;
 
-            	flex-shrink: 0;
 
+                flex-shrink: 0;
 
                 width: 100%;
 
                 height: 100%;
 
                 display: flex;
 
@@ -84,20 +97,54 @@ const runningList = ref([
 
                 align-items: center;
 
                 justify-content: center;
 
                 color: #fff;
 
+
 
                 &_num {
 
                     font-size: 18px;
 
                 }
 
+
 
                 &_text {
 
                     font-size: 12px;
 
-                }	
+                }
 
+            }
 
+        }
 
+
 
+        &_right {
 
+            margin-left: 10px;
 
+            flex: 1;
 
+            color: #fff;
 
+
 
+            &_item {
 
+                display: flex;
 
+                align-items: center;
 
+                gap: 40px;
 
+                padding: 5px 0;
 
+
 
+                &_tuan {
 
+                    display: flex;
 
+                    align-items: center;
 
+
 
+                    &_flag {
 
+                        display: block;
 
+                        width: 7px;
 
+                        height: 7px;
 
+                        border-radius: 50%;
 
+                        margin-right: 10px;
 
+                    }
 
+                }
 
+
 
+                &__txt {
 
+                    font-size: 24px;
 
+                }
 
             }
 
         }
 
-        
+
 
+
 
     }
 
 }
 
+
 
 @keyframes scanning {
 
-		to {
 
-			transform: rotate(1turn);
 
-		}
 
-	}
 
+    to {
 
+        transform: rotate(1turn);
 
+    }
 
+}
 
 </style>

+ 50 - 31
src/views/system/tenement/modules/running.vue
查看文件 

@@ -1,9 +1,8 @@
 
 <template>
 
     <div class="_running">
 
         <HeadlineTag value="年龄分布"></HeadlineTag>
 
-
 
         <div class="_running_mains">
 
-            <div class="_running_mains_left">
 
+            <div class="_running_mains_left" id="videoWidth" :style="{ '--heightRun': heightVideo + 'px' }">
 
                 <div class="_running_mains_left_tuan"></div>
 
                 <div class="_running_mains_left_conter">
 
                     <div class="_running_mains_left_conter_num">12212</div>
 
@@ -11,16 +10,18 @@
 
                 </div>
 
             </div>
 
             <div class="_running_mains_right">
 
-                <div class="_running_mains_right_item" v-for="item,index in runningList" :key="index">
 
+                <div class="_running_mains_right_item" v-for="item, index in runningList" :key="index">
 
                     <div class="_running_mains_right_item_tuan">
 
-                        <span class="_running_mains_right_item_tuan_flag" :style="{backgroundColor: item.color}"></span>
 
+                        <span class="_running_mains_right_item_tuan_flag"
 
+                            :style="{ backgroundColor: item.color }"></span>
 
                         <el-text class="w-150px mb-2" truncated style="color: #ccc;">
 
-                            {{item.name}}
 
+                            {{ item.name }}
 
                         </el-text>
 
                     </div>
 
                     <div class="_running_mains_right_item__txt">
 
-                        <span>{{item.state}}</span> 
-                        <span :style="{color:item.color,'font-size':'12px','margin-left':'5px'}">{{item.unit}}</span>
 
+                        <span>{{ item.state }}</span>
 
+                        <span :style="{ color: item.color, 'font-size': '12px', 'margin-left': '5px' }">{{ item.unit
 
+                            }}</span>
 
                     </div>
 
                 </div>
 
             </div>
 
@@ -33,27 +34,36 @@ import { ref } from "vue";
 
 import HeadlineTag from '@/components/HeadlineTag'
 
 import { color } from "echarts";
 
 const runningList = ref([
 
-    { name:'30岁以下', state:'154', color:'#409eff', unit:'人'},
 
-    { name:'40岁以下', state:'15', color:'#15acaa', unit:'人'},
 
-    { name:'50岁以下', state:'15', color:'#FFC107', unit:'人'},
 
-    { name:'60岁以上', state:'15', color:'rgb(244, 67, 54)', unit:'人'},
 
+    { name: '30岁以下', state: '154', color: '#409eff', unit: '人' },
 
+    { name: '40岁以下', state: '15', color: '#15acaa', unit: '人' },
 
+    { name: '50岁以下', state: '15', color: '#FFC107', unit: '人' },
 
+    { name: '60岁以上', state: '15', color: 'rgb(244, 67, 54)', unit: '人' },
 
 ])
 
+const heightVideo = ref(0)
 
+// 生命周期
 
+onMounted(() => {
 
+    var element = document.getElementById("videoWidth");
 
+    var width = element.offsetWidth;
 
+    heightVideo.value = width
 
+});
 
 </script>
 
 <style lang="scss">
 
 ._running {
 
     display: flex;
 
     flex-direction: column;
 
+
 
     &_mains {
 
         flex: 1;
 
         margin: 30px;
 
         display: flex;
 
         align-items: center;
 
+
 
         &_left {
 
-            width: 180px;
 
-            height: 180px;
 
+            width: 40%;
 
+            height: var(--heightRun);
 
             position: relative;
 
-            flex-shrink: 0;
 
-            &_tuan{
 
+
 
+            &_tuan {
 
                 width: 100%;
 
                 height: 100%;
 
                 background: url("@/assets/images/content_circle.png");
 
@@ -62,11 +72,12 @@ const runningList = ref([
 
                 background-repeat: no-repeat;
 
                 animation: scanning 4s linear infinite;
 
             }
 
+
 
             &_conter {
 
                 position: absolute;
 
                 left: 0;
 
                 top: 0;
 
-            	flex-shrink: 0;
 
+                flex-shrink: 0;
 
                 width: 100%;
 
                 height: 100%;
 
                 display: flex;
 
@@ -74,27 +85,33 @@ const runningList = ref([
 
                 align-items: center;
 
                 justify-content: center;
 
                 color: #fff;
 
+
 
                 &_num {
 
                     font-size: 18px;
 
                 }
 
+
 
                 &_text {
 
                     font-size: 12px;
 
-                }	
+                }
 
             }
 
         }
 
+
 
         &_right {
 
-            margin-left:10px;
 
-           flex: 1;
 
-           color: #fff;
 
-           &_item{
 
+            margin-left: 10px;
 
+            flex: 1;
 
+            color: #fff;
 
+
 
+            &_item {
 
                 display: flex;
 
-                align-items: center; 
+                align-items: center;
 
                 gap: 40px;
 
                 padding: 5px 0;
 
+
 
                 &_tuan {
 
                     display: flex;
 
-                    align-items: center; 
-                    &_flag{
 
+                    align-items: center;
 
+
 
+                    &_flag {
 
                         display: block;
 
                         width: 7px;
 
                         height: 7px;
 
@@ -102,18 +119,20 @@ const runningList = ref([
 
                         margin-right: 10px;
 
                     }
 
                 }
 
-                &__txt{
 
-                    font-size:24px;
 
+
 
+                &__txt {
 
+                    font-size: 24px;
 
                 }
 
             }
 
         }
 
 
-        
+
 
     }
 
 }
 
+
 
 @keyframes scanning {
 
-		to {
 
-			transform: rotate(1turn);
 
-		}
 
-	}
 
+    to {
 
+        transform: rotate(1turn);
 
+    }
 
+}
 
 </style>