refactor: 重构blankphd页面

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 {

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>

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>

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

@@ -1,104 +1,416 @@
 <template>
-  <div style="height: 100%">
+  <div class="blankphd">
-    <List
+    <search-form :items="formItems" v-model="queryParam" @search="searchQueryData"> </search-form>
-      :stationList="stationList"
+    <a-spin :spinning="loading" class="content">
-      :columns="columns"
+      <div class="item" v-for="(item, index) in list" :key="index">
-      :dataType="dataType"
+        <div class="item-title">{{ item.stationCode }}</div>
-      fileName="BLANKPHD"
+        <div class="item-table">
-      pageType="ACQ"
+          <custom-table bordered :can-select="false" :list="item.tableData" :columns="columns"> </custom-table>
-      menuType="par"
+        </div>
-    ></List>
+        <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 = [
+import moment from 'moment'
-  {
+import { getAction } from '../../../../../api/manage'
-    title: 'NO',
+import ImgStation from '@/assets/images/web-statistics/station.png'
-    align: 'left',
+import ChartItem from './components/ChartItem.vue'
-    width: 80,
+import Ring from '@/components/svg/ring.vue'
-    scopedSlots: {
+
-      customRender: 'index',
+const DataTypes = ['PHDF', 'PHD', 'MET', 'SOH', 'PHD+MET+SOH']
-    },
+// 返回数据的key
-    customHeaderCell: () => {
+const RateKeys = [
-      return {
+  ['phdfOfferedNumber', 'phdfDataNumber', 'phdfOffered', 'phdfEfficient'],
-        style: {
+  ['phdOfferedNumber', 'phdDataNumber', 'phdOffered', 'phdEfficient'],
-          'padding-left': '26px !important',
+  ['metOfferedNumber', 'metDataNumber', 'met', 'metEfficient'],
-        },
+  ['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',
-  },
 ]
-import { getAction, getFileAction } from '../../../../../api/manage'
+// 最终结果的key
-import List from '../../../list.vue'
+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: {
+  components: { ChartItem, Ring },
-    List,
-  },
   data() {
     return {
-      columns,
+      columns: [
-      dataType: 'B',
+        {
-      url: {
+          title: '台站名称',
-        findStationList: '/webStatistics/findStationList',
+          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() {
+    async findStationList() {
-      getAction(this.url.findStationList, { menuName: 'Particulate' }).then((res) => {
+      try {
-        if (res.success) {
+        const { success, result } = await getAction('/webStatistics/findStationList', {
-          if (res.result.length > 0) {
+          menuName: 'Particulate',
-            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>
-.icon-edit {
+.blankphd {
-  margin-right: 10px;
+  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/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>