ISCS底部报警
This commit is contained in:
joylink_zhaoerwei
parent
0787c7419e
commit
16230d77e4
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue