From 20a868d20321204c08253e49357f6b1f0971bed5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=BB=E7=8F=AE=E5=AE=87?= <peiyu_ren@163.com>
Date: Mon, 22 Jan 2024 17:52:03 +0800
Subject: [PATCH] =?UTF-8?q?web=20=E6=A8=A1=E5=9D=97=20statistics=20?=
 =?UTF-8?q?=E6=96=B0=E9=A1=B5=E9=9D=A2=E5=BC=80=E5=8F=91=EF=BC=8C=E5=8F=8A?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E9=80=BB=E8=BE=91=E6=8E=A5=E5=8F=A3=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Statistics/statistics/index.vue           | 486 ++++++++++++++++++
 1 file changed, 486 insertions(+)
 create mode 100644 src/views/statistics/Statistics/statistics/index.vue

diff --git a/src/views/statistics/Statistics/statistics/index.vue b/src/views/statistics/Statistics/statistics/index.vue
new file mode 100644
index 0000000..9cbf2e7
--- /dev/null
+++ b/src/views/statistics/Statistics/statistics/index.vue
@@ -0,0 +1,486 @@
+<template>
+  <div style="height: 100%">
+    <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>
+            <span class="item-label">Type</span>
+            <a-select
+              style="width: 234px"
+              v-model="queryParams.systemType"
+              placeholder="select..."
+              show-arrow
+              allowClear
+              :options="typeOptions"
+              @change="typeChange"
+            >
+              <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+            </a-select>
+          </a-col>
+          <a-col>
+            <span class="item-label" style="width: 60px">Stations</span>
+            <a-select
+              style="width: 234px"
+              v-model="stationIds"
+              mode="multiple"
+              placeholder="select..."
+              show-arrow
+              allowClear
+              :options="stationOptions"
+              @change="stationChange"
+            >
+              <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+            </a-select>
+          </a-col>
+          <a-col>
+            <span class="item-label">Nuclide</span>
+            <a-select
+              style="width: 234px"
+              v-model="queryParams.nuclideNames"
+              mode="multiple"
+              :maxTagCount="1"
+              placeholder="select..."
+              show-arrow
+              allowClear
+              :options="nuclideOptions"
+            >
+              <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+            </a-select>
+          </a-col>
+          <a-col>
+            <span class="item-label">Data Source</span>
+            <a-select
+              style="width: 237px"
+              v-model="queryParams.dbName"
+              placeholder="select..."
+              show-arrow
+              allowClear
+              :options="sourceOptions"
+            >
+              <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
+            </a-select>
+          </a-col>
+        </a-row>
+        <a-row type="flex" :gutter="20">
+          <a-col>
+            <span class="item-label">Time</span>
+            <a-date-picker style="width: 234px" :value="moment(queryParams.startDate)" @change="startDateChange" />
+          </a-col>
+          <a-col>
+            <span class="item-label" style="width: 60px; text-align: right">to</span>
+            <a-date-picker style="width: 234px" :value="moment(queryParams.endDate)" @change="endDateChange" />
+          </a-col>
+        </a-row>
+        <div class="layout-header-btns">
+          <a-button class="search-btn" type="primary" @click="handleSearch">
+            <img src="@/assets/images/global/search.png" alt="" />
+            Search
+          </a-button>
+          <a-button type="primary" @click="handleExport">
+            <img src="@/assets/images/spectrum/download.png" />
+            Export to Excel
+          </a-button>
+        </div>
+      </div>
+      <div class="layout-chart">
+        <a-spin :spinning="spinning" style="height: 100%; width: 100%">
+          <!-- 一个台站 -->
+          <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>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import { cloneDeep } from 'lodash'
+import BoxTitle from '@/views/abnormalAlarm/components/boxTitle.vue'
+import { getAction, getFileAction } from '../../../../api/manage'
+import { saveAs } from 'file-saver'
+import moment from 'moment'
+const commonOptions = {
+  grid: {
+    top: 30,
+    left: 20,
+    right: 18,
+    bottom: 35,
+    containLabel: true,
+  },
+  tooltip: {
+    trigger: 'axis',
+  },
+  legend: {
+    inactiveColor: '#333',
+    lineStyle: {
+      inactiveColor: '#333',
+    },
+    textStyle: {
+      color: '#9ab1bc',
+    },
+    data: [],
+  },
+  toolbox: {
+    feature: {
+      saveAsImage: {},
+    },
+  },
+  xAxis: {
+    type: 'category',
+    name: 'Collect Start',
+    nameLocation: 'middle',
+    nameTextStyle: {
+      fontSize: 18,
+    },
+    nameGap: 35,
+    boundaryGap: false,
+    splitLine: {
+      show: true,
+      interval: 'auto',
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)',
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)',
+      },
+    },
+    axisLabel: {
+      fontSize: 12,
+      color: '#ade6ee',
+    },
+    data: [],
+  },
+  yAxis: {
+    type: 'value',
+    splitLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)',
+      },
+    },
+    axisTick: {
+      show: false,
+    },
+    axisLine: {
+      lineStyle: {
+        color: 'rgba(119, 181, 213, .3)',
+      },
+    },
+    axisLabel: {
+      fontSize: 12,
+      color: '#ade6ee',
+    },
+  },
+  series: [],
+}
+export default {
+  components: {
+    BoxTitle,
+  },
+  data() {
+    this.chartOneOption = cloneDeep(commonOptions)
+    this.chartLeftOption = cloneDeep(commonOptions)
+    this.chartRightOption = cloneDeep(commonOptions)
+    return {
+      typeOptions: [
+        {
+          label: 'Particulate',
+          value: 'Particulate',
+        },
+        {
+          label: 'Noble Gas HPGe',
+          value: 'gamma',
+        },
+        {
+          label: 'Noble Gas Beta-Gamma',
+          value: 'beta',
+        },
+      ],
+      sourceOptions: [
+        {
+          label: ' Auto DB',
+          value: 'auto',
+        },
+        {
+          label: 'Interactive DB',
+          value: 'interactive',
+        },
+      ],
+      stationOptions: [],
+      nuclideOptions: [],
+      dataSouceOptions: [],
+      stationIds: undefined,
+      queryParams: {
+        systemType: undefined,
+        nuclideNames: undefined,
+        dbName: undefined,
+        startDate: moment().format('YYYY-MM-DD'),
+        endDate: moment().format('YYYY-MM-DD'),
+      },
+      menuName: '',
+      titleOne: 'Nuclide History',
+      titleLeft: 'Nuclide History',
+      titleRight: 'Nuclide History',
+      chartOne: null,
+      chartLeft: null,
+      chartRight: null,
+      spinning: false,
+    }
+  },
+  computed: {
+    isCharts() {
+      return Array.isArray(this.stationIds) && this.stationIds.length == 2 ? true : false
+    },
+  },
+  methods: {
+    moment,
+    typeChange(val) {
+      this.queryParams.systemType = val
+      if ('Particulate') this.menuName = 'Particulate'
+      if ('gamma') this.menuName = 'Noble Gas HPGe'
+      if ('beta') this.menuName = 'Noble Gas Beta-Gamma'
+      this.getStations()
+      this.getNuclide()
+    },
+    getStations() {
+      getAction('/webStatistics/findStationList', { menuName: this.menuName }).then((res) => {
+        if (res.success) {
+          if (res.result.length > 0) {
+            this.stationOptions = res.result.map((res) => ({
+              label: res.stationCode,
+              value: res.stationId,
+              disabled: false,
+            }))
+          } else {
+            this.stationList = []
+          }
+        } else {
+          this.$message.warning('This operation fails. Contact your system administrator')
+        }
+      })
+    },
+    getNuclide() {
+      getAction('/webStatistics/findNuclideList', { systemType: this.queryParams.systemType }).then((res) => {
+        if (res.success) {
+          if (res.result.length > 0) {
+            this.nuclideOptions = res.result.map((res) => ({ label: res.nuclideName, value: res.nuclideName }))
+          } else {
+            this.nuclideOptions = []
+          }
+        } else {
+          this.$message.warning('This operation fails. Contact your system administrator')
+        }
+      })
+    },
+    stationChange(val) {
+      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
+    },
+    endDateChange(date, dateString) {
+      this.queryParams.endDate = dateString
+    },
+    handleSearch() {
+      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, type) {
+      this.spinning = true
+      let { legend, xAxis, series, toolbox } = option
+      const { success, message, result } = await getAction('/webStatistics/findNuclideStatistics', {
+        ...params,
+      })
+      if (success) {
+        this.spinning = false
+        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
+        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') {
+            const element = result[key]
+            param = {
+              type: 'line',
+              name: key,
+              smooth: true,
+              showSymbol: false,
+              animation: false,
+              lineStyle: {
+                normal: {
+                  width: 2,
+                },
+              },
+              data: element,
+            }
+            series.push(param)
+          }
+        }
+        chart.setOption(option)
+      } else {
+        this.spinning = false
+        this.$message.warning('This operation fails. Contact your system administrator')
+      }
+    },
+    handleExport() {
+      if (this.stationIds && this.stationIds.length > 0) {
+        let params = {
+          stationIds: this.stationIds,
+          ...this.queryParams,
+        }
+        getFileAction('/webStatistics/exportNuclideStatistics', params).then((res) => {
+          if (res.code && res.code == 500) {
+            this.$message.warning('This operation fails. Contact your system administrator')
+          } else {
+            const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
+            saveAs(blob, `Statistics-${moment().format('YYYY-MM-DD hh:mm:ss')}`)
+          }
+        })
+      } else {
+        this.$message.warning('No downloadable data')
+      }
+    },
+
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.ant-select {
+  .ant-select-arrow-icon {
+    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  }
+  &-open {
+    .ant-select-arrow-icon {
+      transform: rotate(180deg);
+    }
+  }
+}
+.layout-header {
+  padding: 10px;
+  height: 106px;
+  border-top: 1px solid rgba(12, 235, 201, 0.3);
+  border-bottom: 1px solid rgba(12, 235, 201, 0.3);
+  background-color: rgba(12, 235, 201, 0.05);
+  position: relative;
+  margin-bottom: 20px;
+  .item-label {
+    display: inline-block;
+    font-family: MicrosoftYaHei;
+    font-size: 14px;
+    margin-right: 10px;
+    letter-spacing: 1px;
+    color: #ade6ee;
+  }
+  &-btns {
+    position: absolute;
+    right: 10px;
+    bottom: 10px;
+    .search-btn {
+      margin-right: 20px;
+    }
+    img {
+      margin-right: 10px;
+    }
+  }
+}
+.layout-chart {
+  height: calc(100% - 126px);
+  // display: flex;
+  // gap: 20px;
+  /deep/.ant-spin-container {
+    width: 100%;
+    height: 100%;
+  }
+  &-one {
+    width: 100%;
+    height: 100%;
+    &-one {
+      width: 100%;
+      height: calc(100% - 40px);
+    }
+  }
+  &-left {
+    width: 100%;
+    height: 50%;
+    &-left {
+      width: 100%;
+      height: calc(100% - 40px);
+    }
+  }
+  &-right {
+    width: 100%;
+    height: 50%;
+    &-right {
+      width: 100%;
+      height: calc(100% - 40px);
+    }
+  }
+}
+</style>
\ No newline at end of file