|
|
@@ -1,11 +1,217 @@
|
|
|
-<script setup lang="ts">
|
|
|
+<template>
|
|
|
+ <div class="yqxf_box">
|
|
|
+ <el-row :gutter="16">
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="statistic-card">
|
|
|
+ <el-statistic :value="500">
|
|
|
+ <template #title>
|
|
|
+ <div style="display: inline-flex; align-items: center">
|
|
|
+ 接入设备
|
|
|
+ <el-tooltip effect="dark" content="园区接入设备数量" placement="top">
|
|
|
+ <el-icon style="margin-left: 4px" :size="12">
|
|
|
+ <Warning />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="statistic-card">
|
|
|
+ <el-statistic :value="500">
|
|
|
+ <template #title>
|
|
|
+ <div style="display: inline-flex; align-items: center">
|
|
|
+ 在线设备数
|
|
|
+ <el-tooltip effect="dark" content="园区接入设备数量" placement="top">
|
|
|
+ <el-icon style="margin-left: 4px" :size="12">
|
|
|
+ <Warning />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
|
|
|
-</script>
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="statistic-card">
|
|
|
+ <el-statistic :value="401">
|
|
|
+ <template #title>
|
|
|
+ <div style="display: inline-flex; align-items: center">
|
|
|
+ 报警次数
|
|
|
+ <el-tooltip effect="dark" content="园区接入设备数量" placement="top">
|
|
|
+ <el-icon style="margin-left: 4px" :size="12">
|
|
|
+ <Warning />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
|
|
|
-<template>
|
|
|
- 园区能耗
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="statistic-card">
|
|
|
+ <el-statistic :value="50">
|
|
|
+ <template #title>
|
|
|
+ <div style="display: inline-flex; align-items: center">
|
|
|
+ 有效报警次数
|
|
|
+ <el-tooltip effect="dark" content="园区接入设备数量" placement="top">
|
|
|
+ <el-icon style="margin-left: 4px" :size="12">
|
|
|
+ <Warning />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="statistic-card">
|
|
|
+ <el-statistic :value="50">
|
|
|
+ <template #title>
|
|
|
+ <div style="display: inline-flex; align-items: center">
|
|
|
+ 今日用水量（m³）
|
|
|
+ <el-tooltip effect="dark" content="园区接入设备数量" placement="top">
|
|
|
+ <el-icon style="margin-left: 4px" :size="12">
|
|
|
+ <Warning />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="4">
|
|
|
+ <div class="statistic-card">
|
|
|
+ <el-statistic :value="5000">
|
|
|
+ <template #title>
|
|
|
+ <div style="display: inline-flex; align-items: center">
|
|
|
+ 今日用电量（kWh）
|
|
|
+ <el-tooltip effect="dark" content="园区接入设备数量" placement="top">
|
|
|
+ <el-icon style="margin-left: 4px" :size="12">
|
|
|
+ <Warning />
|
|
|
+ </el-icon>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-statistic>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <el-table :data="tableData" stripe style="width: 100%">
|
|
|
+ <el-table-column prop="id" label="设备编号"/>
|
|
|
+ <el-table-column prop="name" label="设备名称"/>
|
|
|
+ <el-table-column prop="sblx" label="设备类型"/>
|
|
|
+ <el-table-column prop="yxzt" label="运行状态"/>
|
|
|
+ <el-table-column prop="sccj" label="生成厂家"/>
|
|
|
+
|
|
|
+ <el-table-column prop="address" label="设备位置"/>
|
|
|
+
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
+<script lang="ts" setup>
|
|
|
+import {
|
|
|
+ ArrowRight,
|
|
|
+ CaretBottom,
|
|
|
+ CaretTop,
|
|
|
+ Warning,
|
|
|
+} from '@element-plus/icons-vue'
|
|
|
+
|
|
|
+const tableData = [
|
|
|
+ {
|
|
|
+ id: '1',
|
|
|
+ name: '一楼园林水表',
|
|
|
+ sblx:'水表',
|
|
|
+ yxzt:'开启',
|
|
|
+ sccj:'XXX公司',
|
|
|
+ address: '一楼大厅外面门右侧',
|
|
|
+ },{
|
|
|
+ id: '1',
|
|
|
+ name: '一楼园林水表',
|
|
|
+ sblx:'水表',
|
|
|
+ yxzt:'开启',
|
|
|
+ sccj:'XXX公司',
|
|
|
+ address: '一楼大厅外面门右侧',
|
|
|
+ },{
|
|
|
+ id: '1',
|
|
|
+ name: '一楼园林水表',
|
|
|
+ sblx:'水表',
|
|
|
+ yxzt:'开启',
|
|
|
+ sccj:'XXX公司',
|
|
|
+ address: '一楼大厅外面门右侧',
|
|
|
+ },{
|
|
|
+ id: '1',
|
|
|
+ name: '一楼园林水表',
|
|
|
+ sblx:'水表',
|
|
|
+ yxzt:'开启',
|
|
|
+ sccj:'XXX公司',
|
|
|
+ address: '一楼大厅外面门右侧',
|
|
|
+ }
|
|
|
+]
|
|
|
+</script>
|
|
|
+
|
|
|
<style scoped>
|
|
|
+.yqxf_box {
|
|
|
+
|
|
|
+ margin: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+:global(h2#card-usage ~ .example .example-showcase) {
|
|
|
+ background-color: var(--el-fill-color) !important;
|
|
|
+}
|
|
|
+
|
|
|
+.el-statistic {
|
|
|
+ --el-statistic-content-font-size: 28px;
|
|
|
+ background-color: var(--el-fill-color) !important;
|
|
|
+ border-radius: 20px;
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.statistic-card {
|
|
|
+ height: 100%;
|
|
|
+ padding: 20px;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: var(--el-bg-color-overlay);
|
|
|
+}
|
|
|
+
|
|
|
+.statistic-footer {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ font-size: 12px;
|
|
|
+ color: var(--el-text-color-regular);
|
|
|
+ margin-top: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.statistic-footer .footer-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.statistic-footer .footer-item span:last-child {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.green {
|
|
|
+ color: var(--el-color-success);
|
|
|
+}
|
|
|
|
|
|
+.red {
|
|
|
+ color: var(--el-color-error);
|
|
|
+}
|
|
|
</style>
|
丁烨烨