feat: 把之前做的功能从blankphd移动到DataQuality页面

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

@@ -0,0 +1,416 @@
+<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>
+</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'],
+]
+// 最终结果的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: { ChartItem, Ring },
+  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: [],
+      },
+      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: {
+    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>
+.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>

src/views/statistics/imsData/radionuclide/particulate/blankphd.vue

@@ -1,416 +1,104 @@
 <template>
-  <div class="blankphd">
+  <div style="height: 100%">
-    <search-form :items="formItems" v-model="queryParam" @search="searchQueryData"> </search-form>
+    <List
-    <a-spin :spinning="loading" class="content">
+      :stationList="stationList"
-      <div class="item" v-for="(item, index) in list" :key="index">
+      :columns="columns"
-        <div class="item-title">{{ item.stationCode }}</div>
+      :dataType="dataType"
-        <div class="item-table">
+      fileName="BLANKPHD"
-          <custom-table bordered :can-select="false" :list="item.tableData" :columns="columns"> </custom-table>
+      pageType="ACQ"
-        </div>
+      menuType="par"
-        <div class="item-chart">
+    ></List>
-          <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>
-import moment from 'moment'
+const columns = [
-import { getAction } from '../../../../../api/manage'
+  {
-import ImgStation from '@/assets/images/web-statistics/station.png'
+    title: 'NO',
-import ChartItem from './components/ChartItem.vue'
+    align: 'left',
-import Ring from '@/components/svg/ring.vue'
+    width: 80,
-
+    scopedSlots: {
-const DataTypes = ['PHDF', 'PHD', 'MET', 'SOH', 'PHD+MET+SOH']
+      customRender: 'index',
-// 返回数据的key
+    },
-const RateKeys = [
+    customHeaderCell: () => {
-  ['phdfOfferedNumber', 'phdfDataNumber', 'phdfOffered', 'phdfEfficient'],
+      return {
-  ['phdOfferedNumber', 'phdDataNumber', 'phdOffered', 'phdEfficient'],
+        style: {
-  ['metOfferedNumber', 'metDataNumber', 'met', 'metEfficient'],
+          'padding-left': '26px !important',
-  ['sohOfferedNumber', 'sohDataNumber', 'soh', 'sohEfficient'],
+        },
-  ['pmtOfferedNumber', 'pmtDataNumber', 'phdMetSoh', 'pmtEfficient'],
+      }
+    },
+    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
+import { getAction, getFileAction } from '../../../../../api/manage'
-const ResultKeys = ['count', 'validateCount', 'da', 'spi']
+import List from '../../../list.vue'
-
-const Colors = [
-  ['#e4681d', '#1080c0'], // PHDF
-  ['#db43f7', '#289b4e'], // PHD
-  ['#606ef8', '#add8e6'], // MET
-  ['#f86c6f', '#90ee90'], // SOH
-  ['#9043f7', '#d8bfd8'], // PHD+MET+SOH
-]
-
 export default {
-  components: { ChartItem, Ring },
+  components: {
+    List,
+  },
   data() {
     return {
-      columns: [
+      columns,
-        {
+      dataType: 'B',
-          title: '台站名称',
+      url: {
-          dataIndex: 'stationCode',
+        findStationList: '/webStatistics/findStationList',
-          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,
+      stationList: [],
-      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: {
-    async findStationList() {
+    findStationList() {
-      try {
+      getAction(this.url.findStationList, { menuName: 'Particulate' }).then((res) => {
-        const { success, result } = await getAction('/webStatistics/findStationList', {
+        if (res.success) {
-          menuName: 'Particulate',
+          if (res.result.length > 0) {
-        })
+            this.stationList = res.result.map((res) => ({ label: res.stationCode, value: res.stationId }))
-        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>
-.blankphd {
+.icon-edit {
-  height: 100%;
+  margin-right: 10px;
-  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>
+