Merge pull request #360 from armd-pro/master

Milestone 7
geophystech · May 9, 2019 · d48f83e · d48f83e
2 parents b02926d + c18fc62
commit d48f83e
Show file tree

Hide file tree

Showing 16 changed files with 499 additions and 324 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -17,6 +17,7 @@
   import AppNavbar from '@/components/AppNavbar'
   import AppFooter from '@/components/AppFooter'
   import appSettings from '@/settings/app'
+  import apiSettings from '@/settings/api'
 
   export default {
     metaInfo: {
@@ -52,20 +53,17 @@
     },
     methods: {
       fetchPlateBoundaries: function() {
-        this.$http.get('/static/json/plate_boundaries.geo.json')
-          .then(response => { this.$store.dispatch('setPlateBoundaries', response.data) })
-          .catch(error => { console.log(error) })
+        this.$http.get('/static/json/plate_boundaries.geo.json').then(response => {
+          this.$store.dispatch('setPlateBoundaries', response.data)
+        })
       },
       fetchSystemInfo: function() {
-        this.$http.get(appSettings.endpointSystemInfo)
-          .then(response => {
-            (data => {
-              this.$store.dispatch('setMsk64ConfigVersion', data.msk64Config.data.config_version)
-              this.$store.dispatch('setSrssDBVersion', data.srssCoreConfig.data.db_version)
-              this.$store.dispatch('setTotalEventsCount', data.counters.reports)
-            })(response.data.data)
-          })
-          .catch(error => { console.log(error) })
+        this.$http.get(apiSettings.endpointSystemInfo).then(response => {
+          const data = response.data.data
+          this.$store.dispatch('setMsk64ConfigVersion', data.msk64Config.data.config_version)
+          this.$store.dispatch('setSrssDBVersion', data.srssCoreConfig.data.db_version)
+          this.$store.dispatch('setTotalEventsCount', data.counters.reports)
+        })
       }
     },
     mounted() {

diff --git a/src/assets/scss/_modal_map.scss b/src/assets/scss/_modal_map.scss
@@ -0,0 +1,41 @@
+
+@import '~scss/_variables';
+@import '~scss/_mixins';
+
+/deep/ .modal
+{
+  padding-left: 15px;
+  height: 100%;
+
+  .modal-dialog
+  {
+    @include calc(height, '100% - 57px', 100%);
+    max-width: none;
+
+    .modal-content
+    {
+      height: 100%;
+
+      .modal-header
+      {
+        padding: 0.6rem 1rem;
+
+        .modal-title {
+          text-align: center;
+          font-size: 1rem;
+          width: 100%;
+        }
+      }
+
+      .modal-body
+      {
+        padding: 2px;
+        height: 1%;
+
+        .map {
+          height: 100%;
+        }
+      }
+    }
+  }
+}
diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
@@ -217,3 +217,12 @@ details {
     }
   }
 }
+
+.circle-marker-map {
+  > div {
+    border: 1px solid #222;
+    border-radius: 50%;
+    height: 100%;
+    width: 100%;
+  }
+}
diff --git a/src/components/StaticPage.vue b/src/components/StaticPage.vue
@@ -1,13 +1,26 @@
 <template>
-  <vue-markdown :source="content" class="static-page-content" />
+  <div>
+    <vue-markdown :source="content" class="static-page-content" @rendered="onRendered" />
+    <b-modal
+      ref="mapDialog"
+      title="Карта сейсмических станций"
+      :no-close-on-backdrop="true"
+      :hide-footer="true"
+      :lazy="true"
+      size="lg"
+      @shown="onMapDialogOpen">
+      <MainMageMap ref="map" :onlyStations="true" :gestureHandling="false" />
+    </b-modal>
+  </div>
 </template>
 
 <script>
 import VueMarkdown from 'vue-markdown'
+import MainMageMap from '@/components/maps/Mainpage'
 
 export default {
   name: 'static-page',
-  components: { VueMarkdown },
+  components: { VueMarkdown, MainMageMap },
   data() {
     return {
       content: '',
@@ -23,9 +36,21 @@ export default {
     }
   },
   methods: {
-    getContent: function() {
-      this.$http.get(`/static/markdown/${this.page}.md`)
-        .then(response => { this.content = response.data })
+    getContent() {
+      this.$http.get(`/static/markdown/${this.page}.md`).then(response => {
+        this.content = response.data
+      })
+    },
+    onRendered() {
+      !this.$el || setTimeout(() => {
+        this.$el.querySelector('.mainpage-map-link').addEventListener('click', e => {
+          e.preventDefault()
+          this.$refs.mapDialog.show()
+        })
+      })
+    },
+    onMapDialogOpen() {
+      this.$refs.map.map.object.invalidateSize()
     }
   },
   created() {
@@ -40,9 +65,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+
   @import '~scss/_variables';
+  @import '~scss/_mixins';
+  @import '~scss/_modal_map.scss';
 
-  div /deep/ {
+  .static-page-content /deep/
+  {
     margin-top: 3%;
 
     h1, h2, h3, h4, h5, h6 {
@@ -55,4 +84,5 @@ export default {
       max-width: 100%;
     }
   }
+
 </style>
diff --git a/src/components/charts/ChartByRMSAllocation.vue b/src/components/charts/ChartByRMSAllocation.vue
@@ -80,7 +80,6 @@ export default Line.extend({
 
           this.renderChart(this.chartData, this.options)
         })
-        .catch(error => { console.log(error) })
     }
   },
   watch: {

diff --git a/src/components/charts/ChartByStationCounts.vue b/src/components/charts/ChartByStationCounts.vue
@@ -80,7 +80,6 @@ export default Line.extend({
 
           this.renderChart(this.chartData, this.options)
         })
-        .catch(error => { console.log(error) })
     }
   },
   watch: {

diff --git a/src/components/maps/LDOs.vue b/src/components/maps/LDOs.vue
@@ -3,18 +3,12 @@
 </template>
 
 <script>
-  import { addEpicenter, createMap, id, removeEpicenter, setView } from '@/map_functions'
+  import {addEpicenter, createMap, id, mapLDOsLayerCreate, removeEpicenter, setView} from '@/map_functions'
 
   export default {
     props: ['event', 'tab'],
     data() {
       return {
-        colors: {
-          0: 'green',
-          1: 'yellow',
-          2: 'orange',
-          3: 'red'
-        },
         coordinates: [],
         map: {
           epicenter: null,
@@ -28,95 +22,9 @@
       addData: function(data)
       {
         const map = this.map.object
-        let allCoordinates = []
 
         data.forEach(ldo => {
-
-          ldo.parts.data.forEach(part => {
-
-            const coordinates = [[part.lat_first, part.lon_first], [part.lat_end, part.lon_end]]
-            const damageLevel = part.damage ? part.damage.data.damage_level : 0
-            const partPolyline = window.L.polyline(coordinates, { color: this.colors[damageLevel] })
-
-            allCoordinates.push(coordinates)
-            partPolyline.addTo(map)
-
-            let message =
-              `<table class="table table-hover table-sm table-responsive">
-                <thead>
-                  <tr>
-                    <th class="text-center" colspan=2>Общая информация</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <th class="align-middle" scope="row">Наименование</th>
-                    <td>${ldo.name}</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">Год постройки</th>
-                    <td>${part.built_year}</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">Глубина залегания</th>
-                    <td>${part.height}</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">Проектная сейсмостойкость</th>
-                    <td>${part.max_msk64} (MSK64)</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">Материал конструкций</th>
-                    <td>${part.fabric_type}</td>
-                  </tr>
-                  <tr>
-                    <th scope="row">Тип грунта</th>
-                    <td>${this.soilType(part.soil_type)}</td>
-                  </tr>
-
-                  <tr>
-                    <th class="text-center" colspan=2>Информация о сейсмических воздействиях</th>
-                  </tr>`
-
-            if (part.damage && part.damage.data.has_damage) {
-              message +=
-                `<tr>
-                  <th scope="row">PGA</th>
-                  <td>${part.damage.data.pga_value}</td>
-                </tr>
-                <tr>
-                  <th scope="row">Вероятность повреждения</th>
-                  <td>${damageLevel}</td>
-                </tr>`
-            } else {
-              message +=
-                `<tr>
-                  <td class="text-center" colspan=2>сейсмическое воздействие не оказано</t>
-                </tr>`
-            }
-
-            message +=
-              `   <tr>
-                    <th scope="row">Примечания</th>
-                    <td>${part.notes}</td>
-                  </tr>
-                </tbody>
-              </table>`
-
-            partPolyline.bindPopup(message)
-
-            let partColor = null
-
-            partPolyline.on('mouseover', function(event) {
-              partColor = this.options.color
-
-              partPolyline.setStyle({ color: 'cyan' })
-            })
-
-            partPolyline.on('mouseout', function(event) {
-              partPolyline.setStyle({ color: partColor })
-            })
-          })
+          mapLDOsLayerCreate(ldo, map)
         })
 
         this.putEpicenter()
@@ -139,15 +47,6 @@
         removeEpicenter(this.map.object, this.map.epicenter)
         this.removeData()
         setView(this.map.object, this.coordinates)
-      },
-      soilType: function(type) {
-        switch (type) {
-          case 0: return 'не задан'
-          case 1: return 'природные скальные грунты'
-          case 2: return 'природные дисперсные грунты'
-          case 3: return 'природные мерзлые грунты'
-          case 4: return 'техногенные грунты'
-        }
       }
     },
     created() {

diff --git a/src/components/maps/Mainpage.vue b/src/components/maps/Mainpage.vue
@@ -7,7 +7,12 @@
   import {EVENTS_RANGES} from '@/helpers/event'
   import apiSettings from '@/settings/api'
 
-  export default {
+  export default
+  {
+    props: {
+      gestureHandling: true,
+      onlyStations: false
+    },
     data() {
       return {
         map: {
@@ -23,13 +28,24 @@
 
       createMap: function()
       {
-        let map = this.map.object = createMap(this.map.id, this.map.coordinates, {
-          addToggleShowObjects: this.$store.getters.user.authenticated,
+        this.map.object = createMap(this.map.id, this.map.coordinates, {
+          addToggleShowBuildings: this.$store.getters.user.authenticated,
+          addToggleShowLDOs: this.$store.getters.user.authenticated,
+          gestureHandling: this.gestureHandling,
+          onlyStations: this.onlyStations,
           markerPopupHeader: '',
           showStations: false,
           zoom: 4
         })
 
+        if(!this.onlyStations) {
+          this.addMapLegend()
+        }
+      },
+
+      addMapLegend()
+      {
+        const map = this.map.object
         const defaultEventsRange = this.map.defaultEventsRange
         let $moment = this.$moment
         let $http = this.$http
-Original file line number
+Diff line change
@@ Expand Up / @@ -80,7 +80,6 @@ export default Line.extend({ @@
               this.renderChart(this.chartData, this.options)
             })
-            .catch(error => { console.log(error) })
         }
       },
       watch: {
@@ Expand Down @@