web 页面 statistics 页面结构改造

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

@@ -92,13 +92,28 @@
       </div>
       <div class="layout-chart">
         <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"
+              :key="item"
+              :style="{ height: stationIds.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">
+          <!-- <div v-if="!isCharts" class="layout-chart-one">
             <BoxTitle :title="titleOne" />
             <div class="layout-chart-one-one" id="chartOne"></div>
-          </div>
+          </div> -->
           <!-- 两个台站 -->
-          <template v-if="isCharts">
+          <!-- <template v-if="isCharts">
             <div class="layout-chart-left">
               <BoxTitle :title="titleLeft" />
               <div class="layout-chart-left-left" id="chartLeft"></div>
@@ -107,7 +122,7 @@
               <BoxTitle :title="titleRight" />
               <div class="layout-chart-right-right" id="chartRight"></div>
             </div>
-          </template>
+          </template> -->
         </a-spin>
       </div>
     </a-card>
@@ -141,7 +156,7 @@ const commonOptions = {
     textStyle: {
       color: '#9ab1bc',
     },
-    data: [],
+    // data: [],
   },
   toolbox: {
     // showTitle: false,
@@ -229,9 +244,9 @@ export default {
     BoxTitle,
   },
   data() {
-    this.chartOneOption = cloneDeep(commonOptions)
+    // this.chartOneOption = cloneDeep(commonOptions)
-    this.chartLeftOption = cloneDeep(commonOptions)
+    // this.chartLeftOption = cloneDeep(commonOptions)
-    this.chartRightOption = cloneDeep(commonOptions)
+    // this.chartRightOption = cloneDeep(commonOptions)
     return {
       typeOptions: [
         {
@@ -269,13 +284,16 @@ export default {
         endDate: moment().format('YYYY-MM-DD'),
       },
       menuName: '',
-      titleOne: 'Nuclide History',
+      // titleOne: 'Nuclide History',
-      titleLeft: 'Nuclide History',
+      // titleLeft: 'Nuclide History',
-      titleRight: 'Nuclide History',
+      // titleRight: 'Nuclide History',
-      chartOne: null,
+      // chartOne: null,
-      chartLeft: null,
+      // chartLeft: null,
-      chartRight: null,
+      // chartRight: null,
       spinning: false,
+      isDefault: true,
+      chartInitList: [],
+      itemTitle: {},
     }
   },
   computed: {
@@ -286,7 +304,8 @@ export default {
   methods: {
     moment,
     typeChange(val) {
-      this.disposeCharts()
+      this.isDefault = true
+      // this.disposeCharts()
       this.stationIds = []
       // this.queryParams.dbName = undefined
       this.queryParams.nuclideNames = []
@@ -328,21 +347,43 @@ export default {
       })
     },
     stationChange(val) {
-      if (this.chartOne) this.chartOne.dispose()
+      if (val.length != 0) {
-      if (this.chartLeft) this.chartLeft.dispose()
+        this.isDefault = false
-      if (this.chartRight) this.chartRight.dispose()
+        this.$nextTick(() => {
-      this.stationIds = val
+          this.chartInitList.forEach((item) => {
-      if (val.length == 2) {
+            item.resize()
-        this.stationOptions.forEach((item) => {
+          })
-          if (!val.includes(item.value)) {
-            item.disabled = true
-          } else {
-            item.disabled = false
-          }
         })
+        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))
+        }
       } else {
-        this.stationOptions.forEach((item) => (item.disabled = false))
+        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
@@ -351,6 +392,29 @@ export default {
       this.queryParams.endDate = dateString
     },
     handleSearch() {
+      this.chartInitList = []
+      this.stationIds.forEach((id, index) => {
+        // this.queryParams.stationId = id
+        let currChartInit = echarts.init(document.getElementById(`chart_${id}`))
+        this.chartInitList.push(currChartInit)
+        let params = {
+          ...this.queryParams,
+          stationId: id,
+        }
+        let options = cloneDeep(commonOptions)
+        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.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()
@@ -380,9 +444,9 @@ export default {
             this.getChartDate(params, this.chartRight, this.chartRightOption, 'right')
           }
         })
-      }
+      }*/
     },
-    async getChartDate(params, chart, option, type) {
+    async getChartDate(params, chart, option, id) {
       this.spinning = true
       let { legend, xAxis, series, toolbox } = option
       const { success, message, result } = await getAction('/webStatistics/findNuclideStatistics', {
@@ -390,9 +454,13 @@ export default {
       })
       if (success) {
         this.spinning = false
-        if (type === 'one') this.titleOne = `${result.STATION_NAME}：Nuclide History`
+        this.$set(this.itemTitle, id, result.STATION_NAME)
-        if (type === 'left') this.titleLeft = `${result.STATION_NAME}：Nuclide History`
+        if (result.CollectStart.length < 1) {
-        if (type === 'right') this.titleRight = `${result.STATION_NAME}：Nuclide History`
+          this.$message.warning('No Data!')
+        }
+        // if (type === 'one') this.titleOne = `${result.STATION_NAME}：Nuclide History`
+        // 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
@@ -441,6 +509,7 @@ export default {
         this.$message.warning('No downloadable data')
       }
     },
+    /**
     // 清除图表
     disposeCharts() {
       if (this.chartOne) this.chartOne.dispose()
@@ -448,6 +517,7 @@ export default {
       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
@@ -527,5 +597,29 @@ export default {
       height: calc(100% - 40px);
     }
   }
+  &-top {
+    width: 100%;
+    height: 50%;
+    &-top {
+      width: 100%;
+      height: calc(100% - 40px);
+    }
+  }
+  &-bottom {
+    width: 100%;
+    height: 50%;
+    &-bottom {
+      width: 100%;
+      height: calc(100% - 40px);
+    }
+  }
+  &-box {
+    width: 100%;
+    height: 50%;
+    &-box {
+      width: 100%;
+      height: calc(100% - 40px);
+    }
+  }
 }
 </style>