From e51a2cd26776dd2c3aa7927d68d081fcd22c6c30 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Mon, 26 May 2025 18:12:59 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E9=87=8D=E6=9E=84blankphd=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/web-statistics/station.png  | Bin 0 -> 10290 bytes
 src/components/CustomTable/index.vue          |  11 +
 src/components/menu/CustomTopMenu.vue         |  10 +-
 src/components/svg/ring.vue                   |  18 +
 .../radionuclide/particulate/blankphd.vue     | 464 +++++++++++++++---
 .../particulate/components/ChartItem.vue      | 131 +++++
 6 files changed, 556 insertions(+), 78 deletions(-)
 create mode 100644 src/assets/images/web-statistics/station.png
 create mode 100644 src/components/svg/ring.vue
 create mode 100644 src/views/statistics/imsData/radionuclide/particulate/components/ChartItem.vue

diff --git a/src/assets/images/web-statistics/station.png b/src/assets/images/web-statistics/station.png
new file mode 100644
index 0000000000000000000000000000000000000000..2917724fb015405ceb6b04d1293c93a70d512eba
GIT binary patch
literal 10290
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

literal 0
HcmV?d00001

diff --git a/src/components/CustomTable/index.vue b/src/components/CustomTable/index.vue
index c2eb0b5..50bb3f0 100644
--- a/src/components/CustomTable/index.vue
+++ b/src/components/CustomTable/index.vue
@@ -184,6 +184,17 @@ export default {
   .custom-table-row {
     cursor: pointer;
   }
+
+  .ant-table-bordered .ant-table-header > table,
+  .ant-table-bordered .ant-table-body > table,
+  .ant-table-bordered .ant-table-fixed-left table,
+  .ant-table-bordered .ant-table-fixed-right table {
+    border-color: #416f7f;
+  }
+
+  .ant-table-bordered .ant-table-thead > tr > th, .ant-table-bordered .ant-table-tbody > tr > td {
+    border-color: #416f7f;
+  }
 }
 
 .mouse-move-select {
diff --git a/src/components/menu/CustomTopMenu.vue b/src/components/menu/CustomTopMenu.vue
index aae1c55..54f97d2 100644
--- a/src/components/menu/CustomTopMenu.vue
+++ b/src/components/menu/CustomTopMenu.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="custom-top-menu">
-    <a-menu mode="horizontal" v-model="selectedKeys" @click="onMenuSelect">
+    <a-menu mode="horizontal" :level="2" v-model="selectedKeys" @click="onMenuSelect">
       <a-menu-item v-for="(menu, index) in menus" :key="menu.name" :class="{ 'is-last': index === menus.length - 1 }">
         <img
           v-show="menu.name === selectedKeys[0]"
@@ -100,8 +100,10 @@ export default {
 
 <style lang="less" scoped>
 .custom-top-menu {
+  flex: 1;
   height: 100%;
-  overflow: hidden;
+  overflow: auto;
+
   .ant-menu {
     background: transparent;
     height: 100% !important;
@@ -172,4 +174,8 @@ export default {
     }
   }
 }
+
+.ant-menu-item {
+  display: inline-flex !important;
+}
 </style>
diff --git a/src/components/svg/ring.vue b/src/components/svg/ring.vue
new file mode 100644
index 0000000..b9ce10f
--- /dev/null
+++ b/src/components/svg/ring.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg width="30" height="20" :style="{ fill: color }">
+    <path d="M 0,10 C 5,0 20,0 25,10 L 20,15 C 15,10 10,10 5,15 L 0,10" fill="inherit" />
+  </svg>
+</template>
+
+<script>
+export default {
+  props: {
+    color: {
+      type: String,
+      default: 'red',
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/src/views/statistics/imsData/radionuclide/particulate/blankphd.vue b/src/views/statistics/imsData/radionuclide/particulate/blankphd.vue
index 0bd7fed..f274feb 100644
--- a/src/views/statistics/imsData/radionuclide/particulate/blankphd.vue
+++ b/src/views/statistics/imsData/radionuclide/particulate/blankphd.vue
@@ -1,104 +1,416 @@
 <template>
-  <div style="height: 100%">
-    <List
-      :stationList="stationList"
-      :columns="columns"
-      :dataType="dataType"
-      fileName="BLANKPHD"
-      pageType="ACQ"
-      menuType="par"
-    ></List>
+  <div class="blankphd">
+    <search-form :items="formItems" v-model="queryParam" @search="searchQueryData"> </search-form>
+    <a-spin :spinning="loading" class="content">
+      <div class="item" v-for="(item, index) in list" :key="index">
+        <div class="item-title">{{ item.stationCode }}</div>
+        <div class="item-table">
+          <custom-table bordered :can-select="false" :list="item.tableData" :columns="columns"> </custom-table>
+        </div>
+        <div class="item-chart">
+          <chart-item
+            v-for="(column, index) in item.tableData"
+            :key="index"
+            :outer="{
+              name: `${item.stationCode}-${column.dataType == 'PHD+MET+SOH' ? 'P_M_S' : column.dataType}-DA`,
+              value: column.da,
+              color: column.color1,
+            }"
+            :inner="{
+              name: `${item.stationCode}-${column.dataType == 'PHD+MET+SOH' ? 'P_M_S' : column.dataType}-SPI`,
+              value: column.spi,
+              color: column.color2,
+            }"
+          />
+        </div>
+        <div class="item-legend">
+          <div class="item-legend-item" v-for="(column, index) in item.tableData" :key="index">
+            <div>
+              <Ring :color="column.color1" />
+              <span>{{ item.stationCode }}-{{ column.dataType == 'PHD+MET+SOH' ? 'P_M_S' : column.dataType }}-DA</span>
+            </div>
+            <div v-if="column.spi">
+              <Ring :color="column.color2" />
+              <span>{{ item.stationCode }}-{{ column.dataType == 'PHD+MET+SOH' ? 'P_M_S' : column.dataType }}-SPI</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <a-empty v-if="!list.length" style="margin-top: 50px" description="Please Select Stations"></a-empty>
+    </a-spin>
   </div>
 </template>
 <script>
-const columns = [
-  {
-    title: 'NO',
-    align: 'left',
-    width: 80,
-    scopedSlots: {
-      customRender: 'index',
-    },
-    customHeaderCell: () => {
-      return {
-        style: {
-          'padding-left': '26px !important',
-        },
-      }
-    },
-    customCell: () => {
-      return {
-        style: {
-          'padding-left': '26px !important',
-        },
-      }
-    },
-  },
-  {
-    title: 'STATION',
-    align: 'left',
-    dataIndex: 'stationName',
-  },
-  {
-    title: 'DETECTOR CODE',
-    align: 'left',
-    dataIndex: 'siteDetCode',
-  },
-  {
-    title: 'SPECTRAL QUALIFIER',
-    align: 'left',
-    dataIndex: 'spectralQualifie',
-  },
-  {
-    title: 'ACQUISITION START TIME',
-    align: 'left',
-    dataIndex: 'acquisitionStart',
-  },
-  {
-    title: 'ACQUISITION STOP TIME',
-    align: 'left',
-    dataIndex: 'acquisitionStop',
-  },
+import moment from 'moment'
+import { getAction } from '../../../../../api/manage'
+import ImgStation from '@/assets/images/web-statistics/station.png'
+import ChartItem from './components/ChartItem.vue'
+import Ring from '@/components/svg/ring.vue'
+
+const DataTypes = ['PHDF', 'PHD', 'MET', 'SOH', 'PHD+MET+SOH']
+// 返回数据的key
+const RateKeys = [
+  ['phdfOfferedNumber', 'phdfDataNumber', 'phdfOffered', 'phdfEfficient'],
+  ['phdOfferedNumber', 'phdDataNumber', 'phdOffered', 'phdEfficient'],
+  ['metOfferedNumber', 'metDataNumber', 'met', 'metEfficient'],
+  ['sohOfferedNumber', 'sohDataNumber', 'soh', 'sohEfficient'],
+  ['pmtOfferedNumber', 'pmtDataNumber', 'phdMetSoh', 'pmtEfficient'],
 ]
-import { getAction, getFileAction } from '../../../../../api/manage'
-import List from '../../../list.vue'
+// 最终结果的key
+const ResultKeys = ['count', 'validateCount', 'da', 'spi']
+
+const Colors = [
+  ['#e4681d', '#1080c0'], // PHDF
+  ['#db43f7', '#289b4e'], // PHD
+  ['#606ef8', '#add8e6'], // MET
+  ['#f86c6f', '#90ee90'], // SOH
+  ['#9043f7', '#d8bfd8'], // PHD+MET+SOH
+]
+
 export default {
-  components: {
-    List,
-  },
+  components: { ChartItem, Ring },
   data() {
     return {
-      columns,
-      dataType: 'B',
-      url: {
-        findStationList: '/webStatistics/findStationList',
-      },
+      columns: [
+        {
+          title: '台站名称',
+          dataIndex: 'stationCode',
+          width: 233,
+          align: 'center',
+          customRender: (value, row, index) => {
+            return {
+              children: (
+                <div class="station-name">
+                  <img src={ImgStation} />
+                  <span>{value}</span>
+                </div>
+              ),
+              attrs: {
+                rowSpan: index === 0 ? 5 : 0,
+              },
+            }
+          },
+        },
+        {
+          title: '数据类型',
+          dataIndex: 'dataType',
+          align: 'center',
+        },
+        {
+          title: '数据提供数目',
+          dataIndex: 'count',
+          align: 'center',
+        },
+        {
+          title: '数据有效数目',
+          dataIndex: 'validateCount',
+          align: 'center',
+        },
+        {
+          title: '数据提供率（DA%）',
+          dataIndex: 'da',
+          align: 'center',
+        },
+        {
+          title: '数据有效率（SPI%）',
+          dataIndex: 'spi',
+          align: 'center',
+        },
+      ],
       stationList: [],
+      allChecked: false,
+      queryParam: {
+        startTime: '',
+        endTime: '',
+        stationIds: [],
+      },
+      loading: false,
+      list: [],
     }
   },
   created() {
     this.findStationList()
   },
+  computed: {
+    formItems() {
+      return [
+        {
+          type: 'custom-all-select',
+          label: 'Stations',
+          name: 'stationIds',
+          props: {
+            allChecked: this.allChecked,
+            filterOption: this.filterOption,
+            placeholder: 'select stations',
+            mode: 'multiple',
+            maxTagCount: 1,
+            options: [...this.stationList],
+            style: {
+              width: '200px',
+            },
+          },
+          on: {
+            change: this.handleSelectChange,
+            changeAll: this.handleSelectChangeAll,
+          },
+          style: {
+            width: 'auto',
+          },
+        },
+        {
+          label: 'Start date',
+          type: 'custom-date-picker',
+          name: 'startTime',
+          props: {
+            format: 'YYYY-MM-DD',
+            valueFormat: 'YYYY-MM-DD',
+            style: {
+              minWidth: 'auto',
+              width: '200px',
+            },
+          },
+          on: {
+            change: this.handleStartDateChange,
+          },
+          style: {
+            width: 'auto',
+          },
+        },
+        {
+          label: 'End date',
+          type: 'custom-date-picker',
+          name: 'endTime',
+          props: {
+            format: 'YYYY-MM-DD',
+            valueFormat: 'YYYY-MM-DD',
+            style: {
+              minWidth: 'auto',
+              width: '200px',
+            },
+          },
+          on: {
+            change: this.handleEndDateChange,
+          },
+          style: {
+            width: 'auto',
+          },
+        },
+      ]
+    },
+  },
+  watch: {
+    stationList: {
+      handler(val) {
+        let arr = sessionStorage.getItem(`selectedSta_${this.menuType}`)
+          ? sessionStorage.getItem(`selectedSta_${this.menuType}`).split(',')
+          : []
+        this.queryParam.stationIds = arr.map((item) => Number(item))
+        this.queryParam.startTime = sessionStorage.getItem(`currStartDate_${this.menuType}`)
+          ? sessionStorage.getItem(`currStartDate_${this.menuType}`)
+          : moment().subtract(6, 'days').format('YYYY-MM-DD')
+
+        this.queryParam.endTime = sessionStorage.getItem(`currEndDate_${this.menuType}`)
+          ? sessionStorage.getItem(`currEndDate_${this.menuType}`)
+          : moment().format('YYYY-MM-DD')
+      },
+    },
+  },
   methods: {
-    findStationList() {
-      getAction(this.url.findStationList, { menuName: 'Particulate' }).then((res) => {
-        if (res.success) {
-          if (res.result.length > 0) {
-            this.stationList = res.result.map((res) => ({ label: res.stationCode, value: res.stationId }))
+    async findStationList() {
+      try {
+        const { success, result } = await getAction('/webStatistics/findStationList', {
+          menuName: 'Particulate',
+        })
+        if (success) {
+          if (result.length > 0) {
+            this.stationList = result.map(({ stationCode, stationId }) => ({ label: stationCode, value: stationId }))
           } else {
             this.stationList = []
           }
         } else {
           this.$message.warning('This operation fails. Contact your system administrator')
         }
-      })
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    async searchQueryData() {
+      try {
+        this.loading = true
+        const { success, result, message } = await getAction(
+          '/webStatistics/findStationProvisionEfficiency',
+          this.queryParam
+        )
+        if (success) {
+          const list = result
+            .filter((item) => item.curtime)
+            .map((item) => {
+              const { stationCode, rate } = item
+
+              return {
+                stationCode,
+                tableData: DataTypes.map((dataType, index) => {
+                  const data = ResultKeys.reduce((acc, key, ind) => {
+                    acc[key] = rate[RateKeys[index][ind]]
+                    return acc
+                  }, {})
+
+                  const [color1, color2] = Colors[index]
+
+                  return {
+                    stationCode,
+                    dataType,
+                    ...data,
+                    color1,
+                    color2,
+                  }
+                }),
+              }
+            })
+          this.list = list
+        } else {
+          this.$message.warning('This operation fails. Contact your system administrator')
+        }
+      } catch (error) {
+        console.log(error)
+      } finally {
+        this.loading = false
+      }
+    },
+
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+    handleSelectChange(val) {
+      window.sessionStorage.setItem(`selectedSta_${this.menuType}`, val)
+      let length = this.stationList.length
+      if (val.length === length) {
+        this.allChecked = true
+      } else {
+        this.allChecked = false
+      }
+    },
+    handleSelectChangeAll(val) {
+      this.allChecked = val
+      if (val) {
+        this.queryParam.stationIds = this.stationList.map((item) => item.value)
+        window.sessionStorage.setItem(`selectedSta_${this.menuType}`, this.queryParam.stationIds)
+      } else {
+        this.queryParam.stationIds = []
+        window.sessionStorage.setItem(`selectedSta_${this.menuType}`, [])
+      }
     },
   },
 }
 </script>
 <style lang="less" scoped>
-.icon-edit {
-  margin-right: 10px;
+.blankphd {
+  height: 100%;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  > div {
+    min-width: 1070px;
+  }
+}
+
+.content {
+  flex: 1;
+  overflow: auto;
+  border: 1px solid #416f7f;
+  background-color: rgba(2, 40, 43, 0.5);
+  padding: 14px 20px;
+
+  ::v-deep {
+    .ant-spin-container {
+      height: 100%;
+      overflow: auto;
+    }
+  }
+}
+
+.item {
+  &:not(:first-child) {
+    margin-top: 20px;
+  }
+
+  &-title {
+    height: 40px;
+    line-height: 40px;
+    padding: 0 12px;
+    background-color: rgba(12, 235, 201, 0.05);
+    font-family: ArialMT;
+    font-size: 18px;
+    font-weight: bold;
+    letter-spacing: 1px;
+    color: #0cebc9;
+  }
+
+  &-table {
+    margin-top: 10px;
+
+    .custom-table {
+      ::v-deep {
+        .ant-table-thead > tr th {
+          background-color: rgba(18, 107, 130, 0.6) !important;
+          padding: 11px 4px !important;
+        }
+      }
+    }
+  }
+
+  &-chart {
+    height: 200px;
+    display: flex;
+    margin-top: 10px;
+
+    ::v-deep {
+      .custom-chart {
+        flex: 1;
+        overflow: hidden;
+      }
+    }
+  }
+
+  &-legend {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+    overflow: auto;
+
+    &-item {
+      display: flex;
+      gap: 20px;
+      align-items: center;
+
+      > div {
+        display: flex;
+        gap: 10px;
+        align-items: center;
+      }
+
+      span {
+        overflow: hidden;
+        white-space: nowrap;
+        font-size: 13px;
+        color: #80a2a7;
+      }
+    }
+  }
+}
+
+.station-name {
+  img {
+    width: 79px;
+    height: 103px;
+  }
+
+  span {
+    margin-left: 22px;
+  }
 }
 </style>
-  
\ No newline at end of file
diff --git a/src/views/statistics/imsData/radionuclide/particulate/components/ChartItem.vue b/src/views/statistics/imsData/radionuclide/particulate/components/ChartItem.vue
new file mode 100644
index 0000000..5b70146
--- /dev/null
+++ b/src/views/statistics/imsData/radionuclide/particulate/components/ChartItem.vue
@@ -0,0 +1,131 @@
+<template>
+  <CustomChart :option="option" autoresize />
+</template>
+
+<script>
+import CustomChart from '@/components/CustomChart/index.vue'
+
+export default {
+  components: { CustomChart },
+  props: {
+    inner: {
+      type: Object,
+      default: () => ({
+        name: '内部名称',
+        value: 0,
+        color: '#1080c0',
+      }),
+    },
+    outer: {
+      type: Object,
+      default: () => ({
+        name: '外部名称',
+        value: 0,
+        color: '#e4681d',
+      }),
+    },
+  },
+  computed: {
+    option() {
+      const option = {
+        emphasis: {
+          trigger: false,
+        },
+        series: [
+          // 外层
+          {
+            type: 'pie',
+            radius: ['35%', '50%'],
+            center: ['60%', '50%'],
+            emphasis: {
+              disabled: true,
+            },
+            clockwise: false,
+            label: {
+              alignTo: 'edge',
+              edgeDistance: 0,
+              color: 'inherit',
+            },
+            labelLine: {
+              length2: 0,
+            },
+            labelLayout: {
+              hideOverlap: false,
+              moveOverlap: 'shiftY',
+            },
+            data: [
+              {
+                value: this.outer.value,
+                name: this.outer.name,
+                itemStyle: {
+                  color: this.outer.color,
+                },
+              },
+              {
+                value: 100 - this.outer.value,
+                name: 'other',
+                label: {
+                  show: false,
+                },
+                itemStyle: {
+                  color: '#2f4b5e',
+                },
+              },
+            ],
+          },
+        ],
+      }
+
+      if (this.inner.value) {
+        option.series.push({
+          type: 'pie',
+          radius: '25%',
+          center: ['60%', '50%'],
+          emphasis: {
+            disabled: true,
+          },
+          clockwise: false,
+          label: {
+            alignTo: 'edge',
+            edgeDistance: 0,
+            color: 'inherit',
+          },
+          labelLine: {
+            length: 40,
+            length2: 0,
+          },
+          labelLayout: {
+            hideOverlap: false,
+            moveOverlap: 'shiftY',
+          },
+          data: [
+            {
+              value: this.inner.value,
+              name: this.inner.name,
+              itemStyle: {
+                color: this.inner.color,
+              },
+            },
+            {
+              value: 100 - this.inner.value,
+              name: 'other',
+              label: {
+                show: false,
+              },
+              itemStyle: {
+                color: '#2f4b5e',
+              },
+            },
+          ],
+          z: 10,
+        })
+      }
+
+      return option
+    },
+  },
+}
+</script>
+
+<style>
+</style>
\ No newline at end of file