yuanling-manage/src/views/zhdpgl/yqzl/yqnh.vue

<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>

      <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>

      <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>