ISCS底部报警

src/components/Iscs/IscsBottomAlarm.vue

@@ -1,3 +1,246 @@
 <template>
-  <div style="height: 50px; font-size: 24px">状态栏</div>
+  <div class="bottom-alarm">
+    <div class="bottom-alarm-left">
+      <div class="left-up">
+        <div class="left-up-icon">
+          <q-icon size="20px" color="indigo-8" name="notifications" />
+        </div>
+        <q-separator vertical />
+        <div class="left-up-text">
+          <div class="left-up-text-up">
+            当前报警总数：{{ showData.currentAlarmTotal }}
+          </div>
+          <div>未确认报警数：{{ showData.noConfirmNumber }}</div>
+        </div>
+      </div>
+      <q-separator />
+      <div class="left-down">
+        <div>当前用户：{{ showData.currentUser }}</div>
+        <div>
+          当前用户组：<span class="left-down-text">{{
+            showData.currentUserGroup
+          }}</span>
+        </div>
+      </div>
+    </div>
+    <q-markup-table separator="cell" ref="tableRef" class="bottom-alarm-middle">
+      <thead class="table-head">
+        <tr class="table-head-tr">
+          <th v-for="header in columnDefs" :key="header.name">
+            {{ header.label }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="row in rows" :key="row.dataKey">
+          <td
+            class="table-body-tr"
+            align="center"
+            v-for="header in columnDefs"
+            :key="header.name"
+          >
+            {{ row[header.field] }}
+          </td>
+        </tr>
+      </tbody>
+    </q-markup-table>
+    <div class="bottom-alarm-right">
+      <div class="right-text">
+        <q-img
+          src="https://joylink.club/oss-rtss/logo/favicon_login.png"
+          class="right-img"
+        />玖链科技
+      </div>
+      <div class="right-icon">
+        <q-btn flat class="icon-button">
+          <q-icon size="30px" color="indigo-10" name="volume_up" />
+        </q-btn>
+        <q-btn flat class="icon-button">
+          <q-icon size="30px" color="indigo-10" name="warning_amber" />
+        </q-btn>
+        <q-btn flat class="icon-button">
+          <q-icon size="30px" color="indigo-10" name="search" />
+        </q-btn>
+      </div>
+    </div>
+  </div>
 </template>
+
+<script setup lang="ts">
+import { reactive, onMounted } from 'vue';
+import { useQuasar, type QTableColumn } from 'quasar';
+import { PagingQueryParams, userPageQuery } from 'src/api/UserApi';
+import { ApiError } from 'src/boot/axios';
+
+const $q = useQuasar();
+
+onMounted(() => {
+  //onRequest();
+});
+
+const columnDefs: QTableColumn[] = [
+  { name: 'id', label: '是否确认', field: 'id', align: 'center' },
+  {
+    name: 'name',
+    label: '产生时间',
+    field: 'name',
+    required: true,
+    align: 'center',
+  },
+  {
+    name: 'createdAt',
+    label: '车站名',
+    field: (row) => new Date(row.createdAt).toLocaleString(),
+    align: 'center',
+  },
+  {
+    name: 'mobile',
+    label: '子系统名',
+    field: 'mobile',
+    align: 'center',
+  },
+  {
+    name: 'email',
+    label: '优先级',
+    field: 'email',
+    align: 'center',
+  },
+  {
+    name: 'email',
+    label: '描述',
+    field: 'email',
+    align: 'center',
+  },
+  {
+    name: 'email',
+    label: '值',
+    field: 'email',
+    align: 'center',
+  },
+  {
+    name: 'email',
+    label: '重复次数',
+    field: 'email',
+    align: 'center',
+  },
+  {
+    name: 'email',
+    label: '当前状态',
+    field: 'email',
+    align: 'center',
+  },
+];
+
+const rows = reactive([]);
+
+const showData = reactive({
+  currentAlarmTotal: 2,
+  noConfirmNumber: 2,
+  currentUser: '赵',
+  currentUserGroup: '值班员',
+});
+
+// eslint-disable-next-line
+async function onRequest() {
+  const variables: PagingQueryParams = {
+    page: {
+      page: 1,
+      itemsPerPage: 10,
+    },
+    query: {},
+  };
+  try {
+    const response = await userPageQuery(variables);
+    rows.splice(0, rows.length, ...(response.items as []));
+  } catch (err) {
+    const error = err as ApiError;
+    $q.notify({
+      type: 'negative',
+      message: error.title,
+    });
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.bottom-alarm {
+  display: flex;
+  width: 100%;
+  height: 140px;
+  background-color: #002060;
+  padding: 8px;
+  .bottom-alarm-left {
+    width: 160px;
+    background-image: linear-gradient(to bottom, #e1e5f1, #b5bede);
+    margin-right: 8px;
+    padding: 5px;
+    .left-up {
+      display: flex;
+      align-items: center;
+      height: 50%;
+      .left-up-icon {
+        margin-right: 5px;
+      }
+      .left-up-text {
+        margin-left: 10px;
+        color: black;
+        .left-up-text-up {
+          margin-bottom: 5px;
+        }
+      }
+    }
+    .left-down {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      height: 50%;
+      color: black;
+      .left-down-text {
+        font-weight: 800;
+      }
+    }
+  }
+  .bottom-alarm-middle {
+    flex-grow: 1;
+    .table-head {
+      background-color: #efebde;
+      .table-head-tr {
+        height: 33px !important;
+        padding: 0;
+      }
+    }
+    .table-body-tr {
+      height: 33px !important;
+      padding: 0;
+    }
+  }
+  .bottom-alarm-right {
+    width: 200px;
+    background-image: linear-gradient(to bottom, #e1e5f1, #b5bede);
+    margin-left: 8px;
+    .right-text {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 50%;
+      color: #29519c;
+      font-size: 28px;
+      font-weight: 800;
+      .right-img {
+        width: 50px;
+        margin-right: 5px;
+      }
+    }
+    .right-icon {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 50%;
+      .icon-button {
+        background: none !important;
+        border: none !important;
+      }
+    }
+  }
+}
+</style>