首页统计

app/Http/Controllers/HomepageController.php

@@ -26,11 +26,30 @@ class HomepageController extends Controller
         $usercount = Users::count();
         $devicecount = Device::count();
         $devicepolice = Device::where('devicepolice', '>', '1')->count();
+        // 设备在线数量
+        $device_online = Device::whereNotIn('devicepolice', [9, 15])->count();
+        // 设备报警数量
+        $device_alarm = Device::whereIn('devicepolice', [4, 5, 6, 16])->count();
+        // 未报警设备数量
+        $device_normal = Device::where('devicepolice', 1)->count();
+        // 故障设备
+        $device_offline = Device::whereNotIn('devicepolice', [1, 4, 5, 6, 16])->count();
         $t = time();//当前时间
         $start = mktime(0, 0, 0, date("m", $t), date("d", $t), date("Y", $t));//今天的开始
         $end = mktime(23, 59, 59, date("m", $t), date("d", $t), date("Y", $t));//今天的结束
         $timedevicepolice = DB::table('reportpolice')->where('status', '=', '1')->whereBetween('starttime', [$start, $end])->count();
-        return $this->jsonSuccessData(['usercount' => $usercount, 'devicecount' => $devicecount, 'devicepolice' => $devicepolice, 'timedevicepolice' => $timedevicepolice]);
+        return $this->jsonSuccessData([
+            'usercount' => $usercount,
+            'devicecount' => $devicecount,
+            'devicepolice' => $devicepolice,
+            'timedevicepolice' => $timedevicepolice,
+            'device_online' => $device_online,
+            'device_alarm' => $device_alarm,
+            'device_normal' => $device_normal,
+            'device_offline' => $device_offline,
+            'percent_alarm' => number_format(($device_alarm/$devicecount) * 100, '2'),
+            'percent_online' => number_format(($device_online/$devicecount) * 100, '2'),
+        ]);
     }
 
     public function gettimeline()
@@ -159,4 +178,4 @@ class HomepageController extends Controller
         return $end_time - $start_time;
     }
 
-}
\ No newline at end of file
+}

resources/js/views/dashboard/index.vue

@@ -8,9 +8,28 @@
             <el-row :gutter="20">
               <el-col :span="6"><el-card shadow="always">用户数量<span style="margin-left: 12px;color: #606266;">{{ synthesizecount.usercount }}</span>个</el-card></el-col>
               <el-col :span="6"><el-card shadow="always">设备数量<span style="margin-left: 12px;color: #409EFF;">{{ synthesizecount.devicecount }}</span>个</el-card></el-col>
-              <el-col :span="6"><el-card shadow="always">报警数量<span style="margin-left: 12px;color: #E6A23C;">{{ synthesizecount.devicepolice }}</span>个</el-card></el-col>
+              <el-col :span="6"><el-card shadow="always">在线设备<span style="margin-left: 12px;color: green;">{{ synthesizecount.device_online }}</span>个</el-card></el-col>
+              <el-col :span="6"><el-card shadow="always">报警数量<span style="margin-left: 12px;color: #e50015;">{{ synthesizecount.device_alarm }}</span>个</el-card></el-col>
+              <el-col :span="6"><el-card shadow="always">未报警数量<span style="margin-left: 12px;color: green;">{{ synthesizecount.device_normal }}</span>个</el-card></el-col>
+              <el-col :span="6"><el-card shadow="always">设备故障<span style="margin-left: 12px;color: #5d5f5f;">{{ synthesizecount.device_offline }}</span>个</el-card></el-col>
               <el-col :span="6"><el-card shadow="always">今天报警次数<span style="margin-left: 12px;color: #F56C6C;">{{ synthesizecount.timedevicepolice }}</span>个</el-card></el-col>
             </el-row>
+            <el-row>
+              <el-card class="box-card" style="margin-top:12px;height: 200px;">
+                <div style="display: inline-block;">
+                  <el-progress type="dashboard" :percentage="synthesizecount.percent_alarm" color="red"></el-progress>
+                  <el-tooltip class="item" effect="red" :content="synthesizecount.percent_alarm + '%'" placement="top-start">
+                    <span style="position: relative;left: -115px;top: 12px;">当前报警率</span>
+                  </el-tooltip>
+                </div>
+                <div style="display: inline-block;">
+                  <el-progress type="dashboard" :percentage="synthesizecount.percent_online" color="green"></el-progress>
+                  <el-tooltip class="item" effect="green" :content="synthesizecount.percent_online + '%'" placement="top-start">
+                    <span style="position: relative;left: -108px;top: 12px;">设备在线率</span>
+                  </el-tooltip>
+                </div>
+              </el-card>
+            </el-row>
           </div>
           <!-- 混合统计 -->
           <el-card class="box-card" style="margin-top:12px;padding-bottom:24px">