Statistics 页面bug 处理

src/views/statistics/Statistics/statistics/index.vue

@@ -3,10 +3,10 @@
     <a-card :bordered="false" style="margin-left: 20px; height: 100%">
       <div class="layout-header">
         <a-row type="flex" :gutter="20" style="margin-bottom: 20px">
-          <a-col>
+          <a-col :span="6">
-            <span class="item-label">Type</span>
+            <span class="item-label" style="width: 60px; text-align: right">Type</span>
             <a-select
-              style="width: 234px"
+              style="width: calc(100% - 70px)"
               v-model="queryParams.systemType"
               placeholder="select..."
               show-arrow
@@ -17,10 +17,10 @@
               <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
             </a-select>
           </a-col>
-          <a-col>
+          <a-col :span="6">
             <span class="item-label" style="width: 60px">Stations</span>
             <a-select
-              style="width: 234px"
+              style="width: calc(100% - 70px)"
               v-model="stationIds"
               mode="multiple"
               placeholder="select..."
@@ -32,10 +32,10 @@
               <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
             </a-select>
           </a-col>
-          <a-col>
+          <a-col :span="6">
-            <span class="item-label">Nuclide</span>
+            <span class="item-label" style="width: 60px">Nuclide</span>
             <a-select
-              style="width: 234px"
+              style="width: calc(100% - 70px)"
               v-model="queryParams.nuclideNames"
               mode="multiple"
               :maxTagCount="1"
@@ -47,10 +47,10 @@
               <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
             </a-select>
           </a-col>
-          <a-col>
+          <a-col :span="6">
-            <span class="item-label">Data Source</span>
+            <span class="item-label" style="width: 95px">Data Source</span>
             <a-select
-              style="width: 237px"
+              style="width: calc(100% - 105px)"
               v-model="queryParams.dbName"
               placeholder="select..."
               show-arrow
@@ -62,13 +62,13 @@
           </a-col>
         </a-row>
         <a-row type="flex" :gutter="20">
-          <a-col>
+          <a-col :span="6">
-            <span class="item-label">Time</span>
+            <span class="item-label" style="width: 60px; text-align: right">Time</span>
-            <a-date-picker style="width: 234px" :value="moment(queryParams.startDate)" @change="startDateChange" />
+            <custom-date-picker style="width: 234px" :value="moment(queryParams.startDate)" @change="startDateChange" />
           </a-col>
-          <a-col>
+          <a-col :span="6">
             <span class="item-label" style="width: 60px; text-align: right">to</span>
-            <a-date-picker style="width: 234px" :value="moment(queryParams.endDate)" @change="endDateChange" />
+            <custom-date-picker style="width: 234px" :value="moment(queryParams.endDate)" @change="endDateChange" />
           </a-col>
         </a-row>
         <div class="layout-header-btns">
@@ -113,11 +113,12 @@ import BoxTitle from '@/views/abnormalAlarm/components/boxTitle.vue'
 import { getAction, getFileAction } from '../../../../api/manage'
 import { saveAs } from 'file-saver'
 import moment from 'moment'
+let xDataLength = 0
 const commonOptions = {
   grid: {
     top: 30,
     left: 20,
-    right: 18,
+    right: 30,
     bottom: 35,
     containLabel: true,
   },
@@ -125,7 +126,7 @@ const commonOptions = {
     trigger: 'axis',
   },
   legend: {
-    inactiveColor: '#333',
+    inactiveColor: '#5f5f5f',
     lineStyle: {
       inactiveColor: '#333',
     },
@@ -135,8 +136,14 @@ const commonOptions = {
     data: [],
   },
   toolbox: {
+    // showTitle: false,
     feature: {
-      saveAsImage: {},
+      saveAsImage: {
+        title: 'Save The Image',
+        iconStyle: {
+          borderColor: '#ade6ee',
+        },
+      },
     },
   },
   xAxis: {
@@ -164,8 +171,21 @@ const commonOptions = {
       },
     },
     axisLabel: {
-      fontSize: 12,
+      color: '#5b9cba',
-      color: '#ade6ee',
+      formatter: (value, index) => {
+        let val = value.split(' ').join('\n')
+        // if (index === 0) {
+        //   return '        ' + val
+        // }
+        if (index === xDataLength - 1) {
+          let arr = value.split(' ')
+          arr[0] = arr[0] + '                   '
+          arr[1] = arr[1] + '                   '
+          let str = arr.join('\n')
+          return str
+        }
+        return val
+      },
     },
     data: [],
   },
@@ -232,7 +252,7 @@ export default {
         systemType: undefined,
         nuclideNames: undefined,
         dbName: undefined,
-        startDate: moment().format('YYYY-MM-DD'),
+        startDate: moment().subtract(6, 'days').format('YYYY-MM-DD'),
         endDate: moment().format('YYYY-MM-DD'),
       },
       menuName: '',
@@ -254,9 +274,9 @@ export default {
     moment,
     typeChange(val) {
       this.queryParams.systemType = val
-      if ('Particulate') this.menuName = 'Particulate'
+      if (val == 'Particulate') this.menuName = 'Particulate'
-      if ('gamma') this.menuName = 'Noble Gas HPGe'
+      if (val == 'gamma') this.menuName = 'Noble Gas HPGe'
-      if ('beta') this.menuName = 'Noble Gas Beta-Gamma'
+      if (val == 'beta') this.menuName = 'Noble Gas Beta-Gamma'
       this.getStations()
       this.getNuclide()
     },
@@ -358,10 +378,11 @@ export default {
         if (type === 'right') this.titleRight = `${result.STATION_NAME}：Nuclide History`
         legend.data = Object.keys(result).filter((item) => item !== 'CollectStart')
         xAxis.data = result.CollectStart
+        xDataLength = result.CollectStart.length
         toolbox.feature.saveAsImage.name = `${result.STATION_NAME}：Nuclide History`
         for (const key in result) {
           let param = null
-          if (Object.hasOwnProperty.call(result, key) && key !== 'CollectStart') {
+          if (Object.hasOwnProperty.call(result, key) && key !== 'CollectStart' && key !== 'STATION_NAME') {
             const element = result[key]
             param = {
               type: 'line',