Skip to content
This repository has been archived by the owner on Jun 1, 2023. It is now read-only.

Commit

Permalink
Merge branch 'MaySoMusician-feature/issue-4961-new-monitoring-overvie…
Browse files Browse the repository at this point in the history 
…w-table' into development
  • Loading branch information
@soutaito
soutaito committed Jul 9, 2020
2 parents 23a4fea + 3265e5b commit 1fbeb31
Show file tree
Hide file tree
Showing 13 changed files with 756 additions and 229 deletions.
138 changes: 138 additions & 0 deletions assets/monitoringItemsTableCommon.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,138 @@
$default-bdw: 1px;
$default-pad: 0.5rem 0.2rem;

.table {
width: 100%;
color: $green-1;
border-collapse: collapse;

@include font-size(16);

@include lessThan($small) {
display: block;
overflow-x: auto;
white-space: nowrap;
}

th,
td {
padding: $default-pad;
border: $default-bdw solid $green-1;
height: 100%;
}

tbody th {
font-weight: normal;
text-align: center;
}

td {
text-align: center;
}

thead {
white-space: nowrap;
}

.itemName {
justify-content: flex-start;
text-align: left;
font-weight: bold;
padding: {
left: 1rem;
right: 1rem;
}
}

.aboveEmptyCell {
border: none;
}

.emptyCell {
border-top: none;
}

.wrapAllowed {
white-space: normal;
min-width: 10ch;
}

.cellWidth {
$widthItemName: 80%;
$widthItemValue: 20%;
$widthCatSuper: 0.2;
$widthCatSub: 0.22;

&-itemNameFullWidth {
width: $widthItemName;
}

&-itemNameCategorizedSuper {
width: $widthItemName * (1.0 - $widthCatSuper);
}

&-itemNameCategorizedSuperSub {
width: $widthItemName * (1.0 - $widthCatSuper - $widthCatSub);
}

&-itemCategorySuperordinate {
width: $widthItemName * $widthCatSuper;
}

&-itemCategorySubordinate {
width: $widthItemName * $widthCatSub;
}

&-itemValue {
width: $widthItemValue;
}
}
}

@mixin override($vw, $bdw, $fz, $pad) {
.table {
border-width: $bdw;
@include font-size($fz);

th,
td {
padding: $pad;
border-width: $bdw;
}
}
}

/*
// variables.scss Breakpoints: huge (1440)
@include lessThan(1440) {
@include override(1440, 3, 15, 150);
}
// Vuetify Breakpoints: Large (1264)
@include lessThan(1263) {
@include override(1263, 2, 13, 107);
}
// variables.scss Breakpoints: large (1170)
@include lessThan(1170) {
@include override(1170, 2, 13, 107);
}
// Vuetify Breakpoints: Small (960)
@include lessThan(959) {
@include override(960, 4, 14, 180);
}
@include lessThan(767) {
@include override(960, 3, 14, 180);
}
// Vuetify Breakpoints: Extra Small (600)
@include lessThan(600) {
@include override(600, 3, 14, 150);
}
@include lessThan(420) {
@include override(600, 2, 12, 150);
}
*/
11 changes: 6 additions & 5 deletions components/CardsMonitoring.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
<confirmed-cases-details-card />
<!-- 新規患者に関する報告件数の推移 -->
<confirmed-cases-number-card />
<!-- モニタリング指標 -->
<monitoring-status-overview-card />
<!-- モニタリング項目 -->
<monitoring-items-overview-card />
<!-- モニタリング(1)新規陽性者数 -->
<monitoring-confirmed-cases-number-card />
<!-- モニタリング指標(2)新規陽性者における接触歴等不明率 -->
Expand Down Expand Up @@ -37,7 +37,7 @@ import PositiveRateCard from '@/components/cards/PositiveRateCard.vue'
import SevereCaseCard from '@/components/cards/SevereCaseCard.vue'
import UntrackedRateCard from '@/components/cards/UntrackedRateCard.vue'
import HospitalizedNumberCard from '@/components/cards/HospitalizedNumberCard.vue'
import MonitoringStatusOverviewCard from '@/components/cards/MonitoringStatusOverviewCard.vue'
import MonitoringItemsOverviewCard from '@/components/cards/MonitoringItemsOverviewCard.vue'
import MonitoringConsultationDeskReportsNumberCard from '@/components/cards/MonitoringConsultationDeskReportsNumberCard.vue'
import ConsultationAboutFeverNumberCard from '@/components/cards/ConsultationAboutFeverNumberCard.vue'
import TokyoRulesApplicationNumberCard from '@/components/cards/TokyoRulesApplicationNumberCard.vue'
Expand All @@ -52,9 +52,10 @@ export default Vue.extend({
ConfirmedCasesDetailsCard,
ConfirmedCasesNumberCard,
HospitalizedNumberCard,
MonitoringStatusOverviewCard,
MonitoringConsultationDeskReportsNumberCard,
ConsultationAboutFeverNumberCard,
TokyoRulesApplicationNumberCard
TokyoRulesApplicationNumberCard,
MonitoringItemsOverviewCard
}
})
</script>
Expand Down
132 changes: 132 additions & 0 deletions components/MonitoringItemsOverviewTableInfectionStatus.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<template>
<table
:class="$style.table"
aria-labelledby="infectionStatusHeader"
aria-describedby="infectionStatusBody"
>
<thead id="infectionStatusHeader">
<tr>
<th
:class="$style['cellWidth-itemNameFullWidth']"
scope="col"
colspan="3"
>
{{ $t('項目') }}
</th>
<th :class="$style['cellWidth-itemValue']" scope="col">
{{ $t('数値') }}
</th>
</tr>
</thead>
<tbody id="infectionStatusBody">
<tr>
<th
:class="[$style.itemName, $style['cellWidth-itemNameFullWidth']]"
scope="row"
colspan="3"
>
{{ $t('(1)新規陽性者数') }}
</th>
<td :class="$style['cellWidth-itemValue']">
<monitoring-items-overview-table-value-with-translatable-unit
:value="items['(1)新規陽性者数'].value"
:unit="items['(1)新規陽性者数'].unit"
/>
</td>
</tr>
<tr>
<th
:class="$style['cellWidth-itemCategorySuperordinate']"
scope="row"
rowspan="3"
>
{{ $t('潜在・市中感染') }}
</th>
<th
:class="[
$style.itemName,
$style.wrapAllowed,
$style['cellWidth-itemNameCategorizedSuper']
]"
scope="row"
colspan="2"
>
{{
$t('(2)#7119（東京消防庁救急相談センター）における発熱等相談件数 ')
}}
</th>
<td :class="$style['cellWidth-itemValue']">
<monitoring-items-overview-table-value-with-translatable-unit
:value="
items[
'(2)#7119（東京消防庁救急相談センター）における発熱等相談件数 '
].value
"
:unit="
items[
'(2)#7119（東京消防庁救急相談センター）における発熱等相談件数 '
].unit
"
/>
</td>
</tr>
<tr>
<th
:class="[
$style.itemName,
$style.wrapAllowed,
$style['cellWidth-itemNameCategorizedSuperSub']
]"
scope="row"
rowspan="2"
>
{{ $t('(3)新規陽性者における接触歴等不明者') }}
</th>
<th :class="$style['cellWidth-itemCategorySubordinate']" scope="row">
{{ $t('人数') }}
</th>
<td :class="$style['cellWidth-itemValue']">
<monitoring-items-overview-table-value-with-translatable-unit
:value="items['(3)新規陽性者における接触歴等不明者（人数）'].value"
:unit="items['(3)新規陽性者における接触歴等不明者（人数）'].unit"
/>
</td>
</tr>
<tr>
<th :class="$style['cellWidth-itemCategorySubordinate']" scope="row">
{{ $t('増加比') }}
</th>
<td :class="$style['cellWidth-itemValue']">
<monitoring-items-overview-table-value-with-translatable-unit
:value="
items['(3)新規陽性者における接触歴等不明者（増加比）'].value
"
:unit="items['(3)新規陽性者における接触歴等不明者（増加比）'].unit"
/>
</td>
</tr>
</tbody>
</table>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue'
import { MonitoringItems } from '@/utils/formatMonitoringItems'
import MonitoringItemsOverviewTableValueWithTranslatableUnit from '@/components/MonitoringItemsOverviewTableValueWithTranslatableUnit.vue'
export default Vue.extend({
components: {
MonitoringItemsOverviewTableValueWithTranslatableUnit
},
props: {
items: {
type: Object as PropType<MonitoringItems>,
required: true
}
}
})
</script>

<style lang="scss" module>
@import '@/assets/monitoringItemsTableCommon.scss';
</style>
Loading

0 comments on commit 1fbeb31

Please sign in to comment.