Merge branch 'dev' of http://192.168.2.241:3000/wanghai/bimgis_sx into dev

src/views/spectrum/reform/statistics/DayAndHourChart.vue

@@ -21,12 +21,20 @@
   import emptyImg from '@/assets/icon/null.png'
   import { IPointTarget } from '../../configuration/api/common'
 
-  @Component({ name: 'ChartItem' })
-  export default class ChartItem extends Vue {
+  const toFixed2 = (num: number | string) => Math.floor(Number(num) * 100) / 100
+
+  const toXAxis = (dateStr: string) => {
+    const [date, time] = String(dateStr).split(' ')
+    if (!time) return dateStr
+    return `${date} ${time.length === 1 ? '0' : ''}${time}:00`
+  }
+
+  @Component({ name: 'DayAndHourChart' })
+  export default class DayAndHourChart extends Vue {
     @Prop({ type: String }) title!: string
     @Prop({ type: Object, default: () => ({}) }) data!: IStatisticsDayNHour
     @Prop({ type: Array, default: () => [] }) standards!: IPointTarget['showVos']
-    @Prop({ type: String, default: 'rfallTotal' }) rainfallKey!: string
+    @Prop({ type: String, default: 'rfallTotal' }) rainfallKey!: keyof IStatisticsDayNHour['rainFallVos'][0]
     emptyImg = emptyImg
 
     getCodeName(code) {
@@ -39,13 +47,27 @@
       const dataset = [
         {
           id: 'rainfall',
-          source: (rainFallVos || []).filter((item) => !!item[this.rainfallKey])
+          source: (rainFallVos || [])
+            .filter((item) => !!item[this.rainfallKey])
+            .map(({ xposition, [this.rainfallKey]: val }) => {
+              return {
+                xposition: toXAxis(xposition),
+                [this.rainfallKey]: toFixed2(val)
+              }
+            })
         },
         ...datas.map(({ checkCode, statisticalData }) => ({
           id: checkCode,
-          source: statisticalData
+          source: statisticalData.map(({ avgValue, maxValue, minValue, xposition }) => {
+            return {
+              avgValue: toFixed2(avgValue),
+              maxValue: toFixed2(maxValue),
+              minValue: toFixed2(minValue),
+              xposition: toXAxis(xposition)
+            }
+          })
         }))
-      ]
+      ].map((item) => ({ ...item, source: item.source.sort((a, b) => a.xposition.localeCompare(b.xposition)) }))
       const series = dataset
         .map(({ id }, index) => {
           return index === 0
@@ -53,9 +75,11 @@
                 name: '降雨量',
                 dimensions: ['xposition', this.rainfallKey],
                 datasetIndex: index,
-                type: 'line',
-                symbol: 'circle',
-                smooth: true,
+                // type: 'line',
+                // symbol: 'circle',
+                // smooth: true,
+                type: 'bar',
+                barMaxWidth: 30,
                 yAxisIndex: 1
               }
             : [
@@ -87,16 +111,11 @@
               ...new Set(
                 dataset.map((item) => (item.source as { xposition: string }[]).map((item) => item.xposition)).flat()
               )
-            ].sort((a, b) => {
-              const reg = /(?<=\d{4}年)(\d)(?=月)/
-              const left = a.replace(reg, `0$1`)
-              const right = b.replace(reg, `0$1`)
-              return left.localeCompare(right)
-            })
+            ].sort((a, b) => a.localeCompare(b))
           }
         ],
         yAxis: [
-          { type: 'value', boundaryGap: false },
+          { type: 'value', boundaryGap: false, offset: 15 },
           {
             type: 'value',
             boundaryGap: false,
@@ -104,7 +123,8 @@
             alignTicks: true,
             position: 'right',
             name: '降雨量',
-            nameLocation: 'start'
+            nameLocation: 'start',
+            offset: 15
           }
         ],
         dataZoom: dataset.some(({ source }) => source.length > 100) && [
@@ -112,7 +132,7 @@
           { start: 0, end: 100 }
         ],
         legend: { show: true, type: 'scroll', width: '80%' },
-        grid: { top: 45, left: 45, right: 45, bottom: 45, containLabel: true },
+        grid: { top: 45, left: 50, right: 50, bottom: 45, containLabel: true },
         toolbox: { show: true, feature: { restore: { show: true }, saveAsImage: { show: true } } },
         dataset,
         series