台站和核素下拉框 增加过滤

图标增加图形标志及逻辑优化

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

@@ -26,6 +26,7 @@
               placeholder="select..."
               show-arrow
               allowClear
+              :filterOption="filterOption"
               :options="stationOptions"
               @change="stationChange"
             >
@@ -42,6 +43,7 @@
               placeholder="select..."
               show-arrow
               allowClear
+              :filterOption="filterOption"
               :options="nuclideOptions"
             >
               <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
@@ -94,35 +96,18 @@
         <a-spin :spinning="spinning" style="height: 100%; width: 100%">
           <div class="layout-chart-one" v-show="isDefault">
             <BoxTitle title="Nuclide History" />
-            <!-- <div class="layout-chart-one-one" id="chartLeft"></div> -->
           </div>
           <template v-if="stationIds.length != 0">
             <div
               class="layout-chart-box"
-              v-for="item in stationIds"
+              v-for="item in chartLayout"
               :key="item"
-              :style="{ height: stationIds.length == 1 ? '100%' : '50%' }"
+              :style="{ height: chartLayout.length == 1 ? '100%' : '50%' }"
             >
               <BoxTitle :title="`${itemTitle[item] ? itemTitle[item] + '：' : ''}Nuclide History`" />
               <div class="layout-chart-box-box" :id="`chart_${item}`"></div>
             </div>
           </template>
-          <!-- 一个台站 -->
-          <!-- <div v-if="!isCharts" class="layout-chart-one">
-            <BoxTitle :title="titleOne" />
-            <div class="layout-chart-one-one" id="chartOne"></div>
-          </div> -->
-          <!-- 两个台站 -->
-          <!-- <template v-if="isCharts">
-            <div class="layout-chart-left">
-              <BoxTitle :title="titleLeft" />
-              <div class="layout-chart-left-left" id="chartLeft"></div>
-            </div>
-            <div class="layout-chart-right">
-              <BoxTitle :title="titleRight" />
-              <div class="layout-chart-right-right" id="chartRight"></div>
-            </div>
-          </template> -->
         </a-spin>
       </div>
     </a-card>
@@ -137,7 +122,10 @@ import { getAction, getFileAction } from '../../../../api/manage'
 import { saveAs } from 'file-saver'
 import moment from 'moment'
 let xDataLength = 0
+const symbolList = ['circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow']
+const colorList = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
 const commonOptions = {
+  color: colorList,
   grid: {
     top: 30,
     left: 20,
@@ -149,6 +137,8 @@ const commonOptions = {
     trigger: 'axis',
   },
   legend: {
+    type: 'scroll',
+    width: '90%',
     inactiveColor: 'rgba(153, 177, 189,.5)',
     lineStyle: {
       inactiveColor: '#333',
@@ -156,10 +146,14 @@ const commonOptions = {
     textStyle: {
       color: '#9ab1bc',
     },
+    pageIconColor: '#9ab1bc',
+    pageIconInactiveColor: 'rgba(153, 177, 189,.5)',
+    pageTextStyle: {
+      color: '#9ab1bc',
+    },
     // data: [],
   },
   toolbox: {
-    // showTitle: false,
     feature: {
       saveAsImage: {
         title: 'Save The Image',
@@ -197,21 +191,24 @@ const commonOptions = {
     axisLabel: {
       color: '#ade6ee',
       formatter: (value, index) => {
-        let val = value.split(' ').join('\n')
+        // let val = value.split(' ').join('\n')
+        let val = value.split(' ')[0]
         if (index === 0) {
           let arr = value.split(' ')
           arr[0] = '                   ' + arr[0]
-          arr[1] = '                   ' + arr[1]
+          // arr[1] = '                   ' + arr[1]
-          let str = arr.join('\n')
+          // let str = arr.join('\n')
-          return str
+          let str = arr[0]
-        }
-        if (index === xDataLength - 1) {
-          let arr = value.split(' ')
-          arr[0] = arr[0] + '                   '
-          arr[1] = arr[1] + '                   '
-          let str = arr.join('\n')
           return str
         }
+        // if (index === xDataLength - 1) {
+        //   let arr = value.split(' ')
+        //   arr[0] = arr[0] + '                   '
+        //   // arr[1] = arr[1] + '                   '
+        //   // let str = arr.join('\n')
+        //   let str = arr[0]
+        //   return str
+        // }
         return val
       },
     },
@@ -244,9 +241,8 @@ export default {
     BoxTitle,
   },
   data() {
-    // this.chartOneOption = cloneDeep(commonOptions)
+    this.symbolList = symbolList
-    // this.chartLeftOption = cloneDeep(commonOptions)
+    this.colorList = colorList
-    // this.chartRightOption = cloneDeep(commonOptions)
     return {
       typeOptions: [
         {
@@ -269,7 +265,7 @@ export default {
         },
         {
           label: 'Interactive DB',
-          value: 'interactive',
+          value: 'man',
         },
       ],
       stationOptions: [],
@@ -284,37 +280,39 @@ export default {
         endDate: moment().format('YYYY-MM-DD'),
       },
       menuName: '',
-      // titleOne: 'Nuclide History',
-      // titleLeft: 'Nuclide History',
-      // titleRight: 'Nuclide History',
-      // chartOne: null,
-      // chartLeft: null,
-      // chartRight: null,
       spinning: false,
       isDefault: true,
       chartInitList: [],
       itemTitle: {},
+      chartLayout: [],
     }
   },
-  computed: {
+  watch: {
-    isCharts() {
+    chartLayout: {
-      return Array.isArray(this.stationIds) && this.stationIds.length == 2 ? true : false
+      handler(newVal) {
+        this.$nextTick(() => {
+          this.chartInitList.forEach((item) => {
+            item.resize()
+          })
+        })
+      },
     },
   },
   methods: {
     moment,
     typeChange(val) {
       this.isDefault = true
-      // this.disposeCharts()
       this.stationIds = []
-      // this.queryParams.dbName = undefined
+      this.chartLayout = []
       this.queryParams.nuclideNames = []
       this.queryParams.systemType = val
       if (val == 'Particulate') this.menuName = 'Particulate'
       if (val == 'gamma') this.menuName = 'Noble Gas HPGe'
       if (val == 'beta') this.menuName = 'Noble Gas Beta-Gamma'
+      if (val.length > 0) {
         this.getStations()
         this.getNuclide()
+      }
     },
     getStations() {
       getAction('/webStatistics/findStationList', { menuName: this.menuName }).then((res) => {
@@ -348,12 +346,7 @@ export default {
     },
     stationChange(val) {
       if (val.length != 0) {
-        this.isDefault = false
+        // this.isDefault = false
-        this.$nextTick(() => {
-          this.chartInitList.forEach((item) => {
-            item.resize()
-          })
-        })
         if (val.length == 2) {
           this.stationOptions.forEach((item) => {
             if (!val.includes(item.value)) {
@@ -368,22 +361,6 @@ export default {
       } else {
         this.isDefault = true
       }
-
-      // if (this.chartOne) this.chartOne.dispose()
-      // if (this.chartLeft) this.chartLeft.dispose()
-      // if (this.chartRight) this.chartRight.dispose()
-      // this.stationIds = val
-      // if (val.length == 2) {
-      //   this.stationOptions.forEach((item) => {
-      //     if (!val.includes(item.value)) {
-      //       item.disabled = true
-      //     } else {
-      //       item.disabled = false
-      //     }
-      //   })
-      // } else {
-      //   this.stationOptions.forEach((item) => (item.disabled = false))
-      // }
     },
     startDateChange(date, dateString) {
       this.queryParams.startDate = dateString
@@ -392,9 +369,12 @@ export default {
       this.queryParams.endDate = dateString
     },
     handleSearch() {
+      this.isDefault = false
       this.chartInitList = []
+      this.chartLayout = []
       this.stationIds.forEach((id, index) => {
-        // this.queryParams.stationId = id
+        this.chartLayout.push(id)
+        this.$nextTick(() => {
           let currChartInit = echarts.init(document.getElementById(`chart_${id}`))
           this.chartInitList.push(currChartInit)
           let params = {
@@ -402,49 +382,13 @@ export default {
             stationId: id,
           }
           let options = cloneDeep(commonOptions)
+          if (this.queryParams.nuclideNames.length > 0) {
             this.getChartDate(params, currChartInit, options, id)
-        /**
-          if (index == 0) {
-            this.chartLeftOption.series = []
-            this.chartLeft = echarts.init(document.getElementById('chartLeft'))
-            this.getChartDate(params, this.chartLeft, this.chartLeftOption, 'left')
           } else {
-            this.chartRightOption.series = []
+            this.$message.warning(`Please select nuclide!`)
-            this.chartRight = echarts.init(document.getElementById('chartRight'))
-            this.getChartDate(params, this.chartRight, this.chartRightOption, 'right')
-          }*/
-      })
-      /**
-      if (this.chartOne) this.chartOne.clear()
-      if (this.chartLeft) this.chartLeft.clear()
-      if (this.chartRight) this.chartRight.clear()
-      if (this.stationIds.length == 1) {
-        this.chartOne = echarts.init(document.getElementById('chartOne'))
-        // this.queryParams.stationId = this.stationIds[0]
-        let params = {
-          ...this.queryParams,
-          stationId: this.stationIds[0],
-        }
-        this.chartOneOption.series = []
-        this.getChartDate(params, this.chartOne, this.chartOneOption, 'one')
-      } else {
-        this.stationIds.forEach((id, index) => {
-          // this.queryParams.stationId = id
-          let params = {
-            ...this.queryParams,
-            stationId: id,
-          }
-          if (index == 0) {
-            this.chartLeftOption.series = []
-            this.chartLeft = echarts.init(document.getElementById('chartLeft'))
-            this.getChartDate(params, this.chartLeft, this.chartLeftOption, 'left')
-          } else {
-            this.chartRightOption.series = []
-            this.chartRight = echarts.init(document.getElementById('chartRight'))
-            this.getChartDate(params, this.chartRight, this.chartRightOption, 'right')
           }
         })
-      }*/
+      })
     },
     async getChartDate(params, chart, option, id) {
       this.spinning = true
@@ -456,24 +400,32 @@ export default {
         this.spinning = false
         this.$set(this.itemTitle, id, result.STATION_NAME)
         if (result.CollectStart.length < 1) {
-          this.$message.warning('No Data!')
+          this.$message.warning(`${result.STATION_NAME} No Data!`)
         }
-        // if (type === 'one') this.titleOne = `${result.STATION_NAME}：Nuclide History`
+        // legend.data = Object.keys(result).filter((item) => item !== 'CollectStart')
-        // if (type === 'left') this.titleLeft = `${result.STATION_NAME}：Nuclide History`
-        // 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`
+        let objKeys = Object.keys(result).filter(
+          (item) => item !== 'CollectStart' && item !== 'STATION_NAME' && key !== 'AllDayTime'
+        )
         for (const key in result) {
+          let idx = objKeys.findIndex((item) => item == key)
+          let num_symbol = idx % 7
+          // let num_symbol = idx%7
           let param = null
-          if (Object.hasOwnProperty.call(result, key) && key !== 'CollectStart' && key !== 'STATION_NAME') {
+          if (
+            Object.hasOwnProperty.call(result, key) &&
+            key !== 'CollectStart' &&
+            key !== 'STATION_NAME' &&
+            key !== 'AllDayTime'
+          ) {
             const element = result[key]
             param = {
               type: 'line',
               name: key,
               smooth: true,
-              showSymbol: false,
+              symbol: this.symbolList[num_symbol],
               animation: false,
               lineStyle: {
                 normal: {
@@ -509,15 +461,6 @@ export default {
         this.$message.warning('No downloadable data')
       }
     },
-    /**
-    // 清除图表
-    disposeCharts() {
-      if (this.chartOne) this.chartOne.dispose()
-      if (this.chartLeft) this.chartLeft.dispose()
-      if (this.chartRight) this.chartRight.dispose()
-      this.titleOne = this.titleLeft = this.titleRight = 'Nuclide History'
-    },
-    */
 
     filterOption(input, option) {
       return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0