diff --git a/src/views/statistics/imsData/radionuclide/particulate/components/ChartItem.vue b/src/views/statistics/Statistics/statistics/components/ChartItem.vue
similarity index 100%
rename from src/views/statistics/imsData/radionuclide/particulate/components/ChartItem.vue
rename to src/views/statistics/Statistics/statistics/components/ChartItem.vue
diff --git a/src/views/statistics/Statistics/statistics/index.vue b/src/views/statistics/Statistics/statistics/index.vue
index 83b30d1..a3d9f8f 100644
--- a/src/views/statistics/Statistics/statistics/index.vue
+++ b/src/views/statistics/Statistics/statistics/index.vue
@@ -1,606 +1,416 @@
 <template>
-  <div style="height: 100%; overflow: hidden">
-    <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="6">
-            <span class="item-label" style="width: 60px; text-align: right">Type</span>
-            <a-select
-              style="width: calc(100% - 70px)"
-              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="6">
-            <span class="item-label" style="width: 60px">Stations</span>
-            <a-select
-              style="width: calc(100% - 70px)"
-              v-model="stationIds"
-              mode="multiple"
-              placeholder="select..."
-              show-arrow
-              allowClear
-              :filterOption="filterOption"
-              :options="stationOptions"
-              @change="stationChange"
-            >
-              <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
-            </a-select>
-          </a-col>
-          <a-col :span="6">
-            <span class="item-label" style="width: 60px">Nuclide</span>
-            <a-select
-              style="width: calc(100% - 70px)"
-              v-model="queryParams.nuclideNames"
-              mode="multiple"
-              :maxTagCount="1"
-              placeholder="select..."
-              show-arrow
-              allowClear
-              :filterOption="filterOption"
-              :options="nuclideOptions"
-            >
-              <img slot="suffixIcon" src="@/assets/images/global/select-down.png" alt="" />
-            </a-select>
-          </a-col>
-          <a-col :span="6">
-            <span class="item-label" style="width: 95px">Data Source</span>
-            <a-select
-              style="width: calc(100% - 105px)"
-              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="6">
-            <span class="item-label" style="width: 60px; text-align: right">Time</span>
-            <custom-date-picker
-              style="width: calc(100% - 70px)"
-              :value="moment(queryParams.startDate)"
-              @change="startDateChange"
-            />
-          </a-col>
-          <a-col :span="6">
-            <span class="item-label" style="width: 60px; text-align: right">to</span>
-            <custom-date-picker
-              style="width: calc(100% - 70px)"
-              :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 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>
-      <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>
-          <template v-if="stationIds.length != 0">
-            <div
-              class="layout-chart-box"
-              v-for="item in chartLayout"
-              :key="item"
-              :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>
-        </a-spin>
-      </div>
-    </a-card>
+      <a-empty v-if="!list.length" style="margin-top: 50px" description="Please Select Stations"></a-empty>
+    </a-spin>
   </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'
-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,
-    right: 40,
-    bottom: 60,
-    containLabel: true,
-  },
-  tooltip: {
-    trigger: 'axis',
-  },
-  legend: {
-    type: 'scroll',
-    width: '90%',
-    inactiveColor: 'rgba(153, 177, 189,.5)',
-    lineStyle: {
-      inactiveColor: '#333',
-    },
-    textStyle: {
-      color: '#9ab1bc',
-    },
-    pageIconColor: '#9ab1bc',
-    pageIconInactiveColor: 'rgba(153, 177, 189,.5)',
-    pageTextStyle: {
-      color: '#9ab1bc',
-    },
-    // data: [],
-  },
-  toolbox: {
-    feature: {
-      saveAsImage: {
-        title: 'Save The Image',
-        iconStyle: {
-          borderColor: '#ade6ee',
-        },
-      },
-    },
-  },
-  xAxis: {
-    type: 'category',
-    name: 'Collect Start',
-    nameLocation: 'middle',
-    nameTextStyle: {
-      fontSize: 14,
-      color: '#5b9cba',
-    },
-    nameGap: 60,
-    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: {
-      color: '#ade6ee',
-      formatter: (value, index) => {
-        let val = value.split(' ')[0]
-        if (index === 0) {
-          let arr = value.split(' ')
-          arr[0] = '                   ' + arr[0]
-          let str = arr[0]
-          return str
-        }
-        // if (index === xDataLength - 1) {
-        //   let arr = value.split(' ')
-        //   arr[0] = arr[0] + '                   '
-        //   let str = arr[0]
-        //   return str
-        // }
-        return val
-      },
-    },
-    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',
-    },
-  },
-  dataZoom: [
-    {
-      type: 'inside',
-      start: 0,
-      end: 100,
-    },
-    {
-      height: 16,
-      bottom: 35,
-      start: 0,
-      end: 100,
-    },
-  ],
-  series: [],
-}
+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'],
+]
+// 最终结果的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: {
-    BoxTitle,
-  },
+  components: { ChartItem, Ring },
   data() {
-    this.symbolList = symbolList
-    this.colorList = colorList
     return {
-      typeOptions: [
+      columns: [
         {
-          label: 'Particulate',
-          value: 'Particulate',
+          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,
+              },
+            }
+          },
         },
         {
-          label: 'Noble Gas HPGe',
-          value: 'gamma',
+          title: '数据类型',
+          dataIndex: 'dataType',
+          align: 'center',
         },
         {
-          label: 'Noble Gas Beta-Gamma',
-          value: 'beta',
+          title: '数据提供数目',
+          dataIndex: 'count',
+          align: 'center',
+        },
+        {
+          title: '数据有效数目',
+          dataIndex: 'validateCount',
+          align: 'center',
+        },
+        {
+          title: '数据提供率（DA%）',
+          dataIndex: 'da',
+          align: 'center',
+        },
+        {
+          title: '数据有效率（SPI%）',
+          dataIndex: 'spi',
+          align: 'center',
         },
       ],
-      sourceOptions: [
-        {
-          label: ' Auto DB',
-          value: 'auto',
-        },
-        {
-          label: 'Interactive DB',
-          value: 'man',
-        },
-      ],
-      stationOptions: [],
-      nuclideOptions: [],
-      dataSouceOptions: [],
-      stationIds: [],
-      queryParams: {
-        systemType: undefined,
-        nuclideNames: [],
-        dbName: undefined,
-        startDate: moment().subtract(6, 'days').format('YYYY-MM-DD'),
-        endDate: moment().format('YYYY-MM-DD'),
+      stationList: [],
+      allChecked: false,
+      queryParam: {
+        startTime: '',
+        endTime: '',
+        stationIds: [],
       },
-      menuName: '',
-      spinning: false,
-      isDefault: true,
-      chartInitList: [],
-      itemTitle: {},
-      chartLayout: [],
+      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: {
-    chartLayout: {
-      handler(newVal) {
-        this.$nextTick(() => {
-          this.chartInitList.forEach((item) => {
-            item.resize()
-          })
-        })
+    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: {
-    moment,
-    typeChange(val) {
-      this.isDefault = true
-      this.stationIds = []
-      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) => {
-        if (res.success) {
-          if (res.result.length > 0) {
-            this.stationOptions = res.result.map((res) => ({
-              label: res.stationCode,
-              value: res.stationId,
-              disabled: false,
-            }))
+    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')
         }
-      })
-    },
-    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 (val.length != 0) {
-        if (this.chartLayout.length == 2) {
-          let index = this.chartLayout.findIndex((item) => item !== val[0])
-          this.chartLayout.splice(index, 1)
-        }
-        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.isDefault = true
-        this.stationOptions.forEach((item) => (item.disabled = false))
+      } catch (error) {
+        console.log(error)
       }
     },
-    startDateChange(date, dateString) {
-      this.queryParams.startDate = dateString
-    },
-    endDateChange(date, dateString) {
-      this.queryParams.endDate = dateString
-    },
-    handleSearch() {
-      this.chartInitList = []
-      this.chartLayout = []
-      if (this.queryParams.systemType) {
-        if (this.stationIds.length > 0) {
-          this.isDefault = false
-          this.stationIds.forEach((id, index) => {
-            this.chartLayout.push(id)
-            this.$nextTick(() => {
-              let currChartInit = echarts.init(document.getElementById(`chart_${id}`))
-              this.chartInitList.push(currChartInit)
-              let params = {
-                ...this.queryParams,
-                stationId: id,
-              }
-              let options = cloneDeep(commonOptions)
 
-              if (this.queryParams.nuclideNames.length < 1) {
-                this.$message.warning(`Please select nuclide!`)
-                // this.getChartDate(params, currChartInit, options, id)
-              } else {
-                if (!this.queryParams.dbName) {
-                  this.$message.warning(`Please select Data Source!`)
-                } else {
-                  if (!this.queryParams.startDate) {
-                    this.$message.warning(`Please select start Date!`)
-                  } else {
-                    if (!this.queryParams.endDate) {
-                      this.$message.warning(`Please select end Date!`)
-                    } else {
-                      this.getChartDate(params, currChartInit, options, id)
-                    }
+    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(`Please select stations!`)
-        }
-      } else {
-        this.$message.warning(`Please select type!`)
-      }
-    },
-    async getChartDate(params, chart, option, id) {
-      try {
-        this.spinning = true
-        let { legend, xAxis, series, toolbox } = option
-        const { success, message, result } = await getAction('/webStatistics/findNuclideStatistics', {
-          ...params,
-        })
-        if (success) {
-          // let result = jsonData.result
-          this.spinning = false
-          this.$set(this.itemTitle, id, result.STATION_NAME)
-          if (result.CollectStart.length < 1) {
-            this.$message.warning(`${result.STATION_NAME} No Data!`)
-          }
-          // 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' &&
-              key !== 'AllDayTime'
-            ) {
-              const element = result[key]
-              param = {
-                type: 'line',
-                name: key,
-                smooth: false,
-                showSymbol: true,
-                symbolSize: 10,
-                symbol: this.symbolList[num_symbol],
-                animation: false,
-                data: element,
-              }
-              series.push(param)
-            }
-          }
-          chart.setOption(option)
-        } else {
-          this.spinning = false
           this.$message.warning('This operation fails. Contact your system administrator')
         }
       } catch (error) {
-        this.spinning = false
+        console.log(error)
       } finally {
-        this.spinning = false
-      }
-    },
-    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')
+        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>
-.ant-select {
-  .ant-select-arrow-icon {
-    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+.blankphd {
+  height: 100%;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  > div {
+    min-width: 1070px;
   }
-  &-open {
-    .ant-select-arrow-icon {
-      transform: rotate(180deg);
+}
+
+.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;
     }
   }
 }
-.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;
+
+.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: #ade6ee;
+    color: #0cebc9;
   }
-  &-btns {
-    position: absolute;
-    right: 10px;
-    bottom: 10px;
-    .search-btn {
-      margin-right: 20px;
+
+  &-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;
+        }
+      }
     }
-    img {
-      margin-right: 10px;
+  }
+
+  &-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;
+      }
     }
   }
 }
-.layout-chart {
-  height: calc(100% - 126px);
-  // display: flex;
-  // gap: 20px;
-  /deep/.ant-spin-container {
-    width: 100%;
-    height: 100%;
+
+.station-name {
+  img {
+    width: 79px;
+    height: 103px;
   }
-  &-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);
-    }
-  }
-  &-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);
-    }
+
+  span {
+    margin-left: 22px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/statistics/imsData/radionuclide/particulate/blankphd.vue b/src/views/statistics/imsData/radionuclide/particulate/blankphd.vue
index f274feb..0bd7fed 100644
--- a/src/views/statistics/imsData/radionuclide/particulate/blankphd.vue
+++ b/src/views/statistics/imsData/radionuclide/particulate/blankphd.vue
@@ -1,416 +1,104 @@
 <template>
-  <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 style="height: 100%">
+    <List
+      :stationList="stationList"
+      :columns="columns"
+      :dataType="dataType"
+      fileName="BLANKPHD"
+      pageType="ACQ"
+      menuType="par"
+    ></List>
   </div>
 </template>
 <script>
-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'],
+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',
+  },
 ]
-// 最终结果的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
-]
-
+import { getAction, getFileAction } from '../../../../../api/manage'
+import List from '../../../list.vue'
 export default {
-  components: { ChartItem, Ring },
+  components: {
+    List,
+  },
   data() {
     return {
-      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: [],
+      columns,
+      dataType: 'B',
+      url: {
+        findStationList: '/webStatistics/findStationList',
       },
-      loading: false,
-      list: [],
+      stationList: [],
     }
   },
   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: {
-    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 }))
+    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 }))
           } 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>
-.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;
-  }
+.icon-edit {
+  margin-right: 10px;
 }
 </style>
+  
\ No newline at end of file