Tokyo-Metro-Gov · nichesuch · Sep 23, 2021 · Sep 23, 2021 · Sep 25, 2021
diff --git a/components/index/CardsFeatured/ConfirmedCasesDetails/Card.vue b/components/index/CardsFeatured/ConfirmedCasesDetails/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard ConfirmedCasesDetailsCard">
+  <v-col
+    id="details-of-confirmed-cases"
+    cols="12"
+    md="6"
+    class="DataCard ConfirmedCasesDetailsCard"
+  >
     <client-only>
       <data-view
         :title="$t('検査陽性者の状況')"

diff --git a/components/index/CardsFeatured/ConfirmedCasesNumber/Card.vue b/components/index/CardsFeatured/ConfirmedCasesNumber/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard ConfirmedCasesNumberCard">
+  <v-col
+    id="number-of-confirmed-cases"
+    cols="12"
+    md="6"
+    class="DataCard ConfirmedCasesNumberCard"
+  >
     <client-only>
       <time-bar-chart
         :title="$t('報告日別による陽性者数の推移')"

diff --git a/components/index/CardsFeatured/InfectionMedicalCareProvisionStatus/Card.vue b/components/index/CardsFeatured/InfectionMedicalCareProvisionStatus/Card.vue
@@ -1,5 +1,6 @@
 <template>
   <v-col
+    id="infection-medical-care-provision-status"
     cols="12"
     md="6"
     class="DataCard InfectionMedicalCareProvisionStatusCard"

diff --git a/components/index/CardsFeatured/MonitoringComment/Card.vue b/components/index/CardsFeatured/MonitoringComment/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard MonitoringCommentCard">
+  <v-col
+    id="monitoring-comment"
+    cols="12"
+    md="6"
+    class="DataCard MonitoringCommentCard"
+  >
     <client-only>
       <data-view
         :title="'感染状況・医療提供体制の分析'"

diff --git a/components/index/CardsFeatured/TelephoneAdvisoryReportsNumber/Card.vue b/components/index/CardsFeatured/TelephoneAdvisoryReportsNumber/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard TelephoneAdvisoryReportsNumberCard">
+  <v-col
+    id="number-of-reports-to-covid19-telephone-advisory-center"
+    cols="12"
+    md="6"
+    class="DataCard TelephoneAdvisoryReportsNumberCard"
+  >
     <client-only>
       <time-bar-chart
         :title="$t('新型コロナコールセンター相談件数')"

diff --git a/components/index/CardsFeatured/TestedNumber/Card.vue b/components/index/CardsFeatured/TestedNumber/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard TestedNumberCard">
+  <v-col
+    id="number-of-tested"
+    cols="12"
+    md="6"
+    class="DataCard TestedNumberCard"
+  >
     <client-only>
       <chart
         :title="$t('検査実施件数')"

diff --git a/components/index/CardsFeatured/TokyoFeverConsultationCenterReportsNumber/Card.vue b/components/index/CardsFeatured/TokyoFeverConsultationCenterReportsNumber/Card.vue
@@ -1,5 +1,6 @@
 <template>
   <v-col
+    id="number-of-reports-to-tokyo-fever-consultation-center"
     cols="12"
     md="6"
     class="DataCard TokyoFeverConsultationCenterReportsNumberCard"

diff --git a/components/index/CardsFeatured/Vaccination/Card.vue b/components/index/CardsFeatured/Vaccination/Card.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard VaccinationCard">
+  <v-col id="vaccination" cols="12" md="6" class="DataCard VaccinationCard">
     <client-only>
       <chart
         :title="$t('ワクチン接種数（累計）')"

diff --git a/components/index/CardsMonitoring/ConsultationAboutFeverNumber/Card.vue b/components/index/CardsMonitoring/ConsultationAboutFeverNumber/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard ConsultationAboutFeverNumberCard">
+  <v-col
+    id="number-of-reports-to-consultations-about-fever-in-7119"
+    cols="12"
+    md="6"
+    class="DataCard ConsultationAboutFeverNumberCard"
+  >
     <client-only>
       <mixed-bar-and-line-chart
         :title="$t('モニタリング項目(2)')"

diff --git a/components/index/CardsMonitoring/HospitalizedNumber/Card.vue b/components/index/CardsMonitoring/HospitalizedNumber/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard HospitalizedNumberCard">
+  <v-col
+    id="number-of-hospitalized"
+    cols="12"
+    md="6"
+    class="DataCard HospitalizedNumberCard"
+  >
     <client-only>
       <chart
         :title="$t('モニタリング項目(6)')"

diff --git a/components/index/CardsMonitoring/MonitoringConfirmedCasesNumber/Card.vue b/components/index/CardsMonitoring/MonitoringConfirmedCasesNumber/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard MonitoringConfirmedCasesNumberCard">
+  <v-col
+    id="monitoring-number-of-confirmed-cases"
+    cols="12"
+    md="6"
+    class="DataCard MonitoringConfirmedCasesNumberCard"
+  >
     <client-only>
       <chart
         :title="$t('モニタリング項目(1)')"

diff --git a/components/index/CardsMonitoring/MonitoringItemsOverview/Card.vue b/components/index/CardsMonitoring/MonitoringItemsOverview/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard MonitoringItemsOverviewCard">
+  <v-col
+    id="monitoring-items-overview"
+    cols="12"
+    md="6"
+    class="DataCard MonitoringItemsOverviewCard"
+  >
     <client-only>
       <data-view
         :title="$t('モニタリング項目')"

diff --git a/components/index/CardsMonitoring/PositiveRate/Card.vue b/components/index/CardsMonitoring/PositiveRate/Card.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard PositiveRateCard">
+  <v-col id="positive-rate" cols="12" md="6" class="DataCard PositiveRateCard">
     <client-only>
       <chart
         :title="$t('モニタリング項目(4)')"

diff --git a/components/index/CardsMonitoring/SevereCase/Card.vue b/components/index/CardsMonitoring/SevereCase/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard SevereCaseCard">
+  <v-col
+    id="positive-status-severe-case"
+    cols="12"
+    md="6"
+    class="DataCard SevereCaseCard"
+  >
     <client-only>
       <chart
         :title="$t('モニタリング項目(7)')"

diff --git a/components/index/CardsMonitoring/TokyoRulesApplicationNumber/Card.vue b/components/index/CardsMonitoring/TokyoRulesApplicationNumber/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard TokyoRulesApplicationNumberCard">
+  <v-col
+    id="number-of-tokyo-rules-applied"
+    cols="12"
+    md="6"
+    class="DataCard TokyoRulesApplicationNumberCard"
+  >
     <client-only>
       <mixed-bar-and-line-chart
         :title="$t('モニタリング項目(5)')"

diff --git a/components/index/CardsMonitoring/UntrackedRate/Card.vue b/components/index/CardsMonitoring/UntrackedRate/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard UntrackedRateCard">
+  <v-col
+    id="untracked-rate"
+    cols="12"
+    md="6"
+    class="DataCard UntrackedRateCard"
+  >
     <client-only>
       <chart
         :title="$t('モニタリング項目(3)')"

diff --git a/components/index/CardsReference/Agency/Card.vue b/components/index/CardsReference/Agency/Card.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard AgencyCard">
+  <v-col id="agency" cols="12" md="6" class="DataCard AgencyCard">
     <client-only>
       <chart
         :title="$t('都庁来庁者数の推移')"

diff --git a/components/index/CardsReference/ConfirmedCasesAttributes/Card.vue b/components/index/CardsReference/ConfirmedCasesAttributes/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard ConfirmedCasesAttributesCard">
+  <v-col
+    id="attributes-of-confirmed-cases"
+    cols="12"
+    md="6"
+    class="DataCard ConfirmedCasesAttributesCard"
+  >
     <client-only>
       <data-table
         :title="$t('陽性者の属性')"

diff --git a/components/index/CardsReference/ConfirmedCasesByMunicipalities/Card.vue b/components/index/CardsReference/ConfirmedCasesByMunicipalities/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard ConfirmedCasesByMunicipalitiesCard">
+  <v-col
+    id="number-of-confirmed-cases-by-municipalities"
+    cols="12"
+    md="6"
+    class="DataCard ConfirmedCasesByMunicipalitiesCard"
+  >
     <client-only>
       <confirmed-cases-by-municipalities-table
         :title="$t('陽性者数（区市町村別）')"

diff --git a/components/index/CardsReference/DeathsByDeathDate/Card.vue b/components/index/CardsReference/DeathsByDeathDate/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard DeathsByDeathDateCard">
+  <v-col
+    id="deaths-by-death-date"
+    cols="12"
+    md="6"
+    class="DataCard DeathsByDeathDateCard"
+  >
     <client-only>
       <time-bar-chart
         :title="$t('死亡日別による死亡者数の推移')"

diff --git a/components/index/CardsReference/Metro/Card.vue b/components/index/CardsReference/Metro/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard MetroCard">
+  <v-col
+    id="predicted-number-of-toei-subway-passengers"
+    cols="12"
+    md="6"
+    class="DataCard MetroCard"
+  >
     <client-only>
       <chart
         :title="$t('都営地下鉄の利用者数の推移')"

diff --git a/components/index/CardsReference/MonitoringConsultationDeskReportsNumber/Card.vue b/components/index/CardsReference/MonitoringConsultationDeskReportsNumber/Card.vue
@@ -1,5 +1,6 @@
 <template>
   <v-col
+    id="monitoring-number-of-reports-to-covid19-consultation-desk"
     cols="12"
     md="6"
     class="DataCard MonitoringConsultationDeskReportsNumberCard"

diff --git a/components/index/CardsReference/PositiveNumberByDevelopedDate/Card.vue b/components/index/CardsReference/PositiveNumberByDevelopedDate/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard PositiveNumberByDevelopedDateCard">
+  <v-col
+    id="positive-number-by-developed-date"
+    cols="12"
+    md="6"
+    class="DataCard PositiveNumberByDevelopedDateCard"
+  >
     <client-only>
       <time-bar-chart
         :title="$t('発症日別による陽性者数の推移')"

diff --git a/components/index/CardsReference/PositiveNumberByDiagnosedDate/Card.vue b/components/index/CardsReference/PositiveNumberByDiagnosedDate/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard PositiveNumberByDiagnosedDateCard">
+  <v-col
+    id="positive-number-by-diagnosed-date"
+    cols="12"
+    md="6"
+    class="DataCard PositiveNumberByDiagnosedDateCard"
+  >
     <client-only>
       <time-bar-chart
         :title="$t('確定日別による陽性者数の推移')"

diff --git a/components/index/CardsReference/PositiveNumberOver65/Card.vue b/components/index/CardsReference/PositiveNumberOver65/Card.vue
@@ -1,5 +1,10 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard PositiveNumberOver65Card">
+  <v-col
+    id="positive-number-over65"
+    cols="12"
+    md="6"
+    class="DataCard PositiveNumberOver65Card"
+  >
     <client-only>
       <time-bar-chart
         :title="$t('報告日別による陽性者数（65歳以上）の推移')"

diff --git a/components/index/CardsReference/Variant/Card.vue b/components/index/CardsReference/Variant/Card.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-col cols="12" md="6" class="DataCard VariantCard">
+  <v-col id="variant" cols="12" md="6" class="DataCard VariantCard">
     <client-only>
       <chart
         :title="$t('L452R変異株スクリーニングの実施状況')"

diff --git a/components/index/CardsTab.vue b/components/index/CardsTab.vue
@@ -7,7 +7,7 @@
       v-ripple="false"
       :to="{ path: localePath(item.path) }"
       nuxt
-      exact
+      exact-path
       @click="change"
     >
       <v-icon class="TabIcon">{{ mdiChartTimelineVariant }}</v-icon>

diff --git a/components/index/_shared/CardsLazyRow.vue b/components/index/_shared/CardsLazyRow.vue
@@ -64,6 +64,7 @@ type Data = {
   actives: boolean[]
   scroll: boolean
   mdiChevronRight: string
+  hash: string
 }
 type Methods = {
   handler: (
@@ -72,6 +73,7 @@ type Methods = {
     isIntersecting: boolean
   ) => void
   onScroll: () => void
+  lazyHashLink: () => void
 }
 type Computed = {}
 type Props = {
@@ -97,6 +99,13 @@ export default Vue.extend<Data, Methods, Computed, Props>({
       actives: Array.from({ length: this.rows.length }, () => false),
       scroll: false,
       mdiChevronRight,
+      hash: null,
+    }
+  },
+  mounted() {
+    if (this.$route.hash && !this.hash) {
+      this.hash = this.$route.hash
+      this.lazyHashLink()
     }
   },
   methods: {
@@ -110,6 +119,21 @@ export default Vue.extend<Data, Methods, Computed, Props>({
       this.$set(this.actives, 0, true)
       this.$set(this.actives, 1, true)
     },
+    lazyHashLink() {
+      if (process.client) {
+        this.$nextTick(function () {
+          // ハッシュで指定されたIDがあればそこにスクロール、なければ次の行を表示して再帰処理
+          const element = document.getElementById(this.hash.slice(1))
+          if (element != null) {
+            this.$scrollTo(this.hash)
+          } else {
+            if (!this.actives.includes(false)) return
+            this.$set(this.actives, this.actives.indexOf(false), true)
+            this.lazyHashLink()
+          }
+        }, 500)
+      }
+    },
   },
 })
 </script>