ISCS底部报警
This commit is contained in:
joylink_zhaoerwei
parent
0787c7419e
commit
16230d77e4
@ -1,3 +1,246 @@
|
|||||||
<template>
|
<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>
|
</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
Block a user