feat: 增加DOS页面

2024-10-11 10:09:05 +08:00 · 2024-10-11 10:09:05 +08:00 · b345fc1c04
commit b345fc1c04
parent 0eb46e8343
2 changed files with 476 additions and 0 deletions
--- a/src/views/statistics/imsData/radionuclide/particulate/components/fileDetail.vue
+++ b/src/views/statistics/imsData/radionuclide/particulate/components/fileDetail.vue
@ -0,0 +1,155 @@
+<template>
+  <a-card :bordered="false" style="margin-left: 20px; height: 100%">
+    <div class="detail-top">
+      <div class="top-back" @click="handleback">
+        <img class="icon-back" src="@/assets/images/web-statistics/return.png" alt="" />
+        <span style="margin-left: 10px">return</span>
+      </div>
+      <div class="top-actions">
+        <div class="right-btn" @click="downloadFile">
+          <img class="icon-download" src="@/assets/images/web-statistics/download.png" alt="" />
+          <span style="margin-left: 10px"> TXT </span>
+        </div>
+        <div class="right-btn" @click="viewFile">
+          <img class="icon-view" src="@/assets/images/web-statistics/view.png" alt="" />
+          <span style="margin-left: 10px"> View Report </span>
+        </div>
+      </div>
+    </div>
+    <div class="file-content">
+      <a-spin style="height: 100%" :spinning="spinning">
+        <pre>{{ fileText }}</pre>
+      </a-spin>
+    </div>
+  </a-card>
+</template>
+
+<script>
+import { getAction } from '@/api/manage'
+export default {
+  props: {
+    dosId: {
+      type: [String, Number],
+      default: '',
+    },
+  },
+  data() {
+    return {
+      spinning: false,
+      fileText: '',
+      fileSrc: '',
+    }
+  },
+  mounted() {
+    this.getFildBlob()
+  },
+  methods: {
+    handleback() {
+      this.$emit('back', false)
+    },
+    getFildBlob() {
+      let _this = this
+      _this.spinning = true
+      getAction('/webStatistics/dosFile', {
+        sohId: this.dosId,
+      }).then((res) => {
+        _this.spinning = false
+        if (res.code && res.code == 500) {
+          _this.fileSrc = ''
+          this.$message.warning('This operation fails. Contact your system administrator')
+        } else {
+          const blob = new Blob([res], { type: 'text/plain' })
+          _this.fileSrc = window.URL.createObjectURL(blob)
+          var reader = new FileReader()
+          reader.readAsText(blob)
+          reader.onload = function () {
+            //读取完毕后输出结果
+            _this.fileText = reader.result
+          }
+        }
+      })
+    },
+    downloadFile() {
+      if (this.fileSrc) {
+        let link = document.createElement('a')
+        link.href = this.fileSrc
+        link.target = '_blank'
+        link.download = 'dos'
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      } else {
+        this.$message.warning('This operation fails. Contact your system administrator')
+      }
+    },
+    viewFile() {
+      if (this.fileSrc) {
+        let link = document.createElement('a')
+        link.href = this.fileSrc
+        link.target = '_blank'
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
+      } else {
+        this.$message.info('File preview failed')
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.detail-top {
+  width: 100%;
+  height: 50px;
+  padding: 0 10px;
+  background-color: rgba(12, 235, 201, 0.05);
+  border-top: 1px solid rgba(12, 235, 201, 0.3);
+  border-bottom: 1px solid rgba(12, 235, 201, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+  .top-back {
+    font-family: MicrosoftYaHei;
+    font-size: 16px;
+    font-weight: normal;
+    font-stretch: normal;
+    letter-spacing: 0px;
+    color: #69a19f;
+    cursor: pointer;
+    .icon-back {
+      width: 28px;
+      height: 24px;
+    }
+  }
+  .top-actions {
+    .right-btn {
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      padding: 0 12px;
+      margin-left: 20px;
+      background-color: #1397a3;
+      cursor: pointer;
+      .icon-download {
+        width: 16px;
+        height: 19px;
+      }
+      .icon-view {
+        width: 15px;
+        height: 16px;
+      }
+      a {
+        color: white;
+      }
+    }
+  }
+}
+.file-content {
+  height: calc(100% - 66px);
+  border: 1px solid #1397a3;
+  overflow: auto;
+  padding: 15px;
+}
+</style>
--- a/src/views/statistics/imsData/radionuclide/particulate/dosphd.vue
+++ b/src/views/statistics/imsData/radionuclide/particulate/dosphd.vue
@ -0,0 +1,321 @@
+<template>
+  <div style="height: 100%">
+    <a-card v-if="!isFileDetail" :bordered="false" style="margin-left: 20px">
+      <search-form :items="formItems" v-model="queryParam" @search="searchQueryData">
+        <a-space style="float: right" class="btn-group" slot="additional">
+          <a-button @click="handleExcel" type="primary">
+            <a-icon v-if="excelLoading" style="margin-right: 10px" type="loading" />
+            <img class="icon-edit" src="@/assets/images/global/edit.png" alt="" />
+            Excel
+          </a-button>
+        </a-space>
+      </search-form>
+      <custom-table
+        size="middle"
+        rowKey="sampleId"
+        :columns="columns"
+        :list="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        @change="handleTableChange"
+        @detail="handleDetail"
+        :scroll="{ y: 'calc(100vh - 306px)' }"
+      >
+        <template slot="index" slot-scope="{ index }">
+          {{ index + 1 }}
+        </template>
+      </custom-table>
+    </a-card>
+    <file-detail v-if="isFileDetail" :dosId="currSampleId" @back="handleBack"></file-detail>
+  </div>
+</template>
+<script>
+const columns = [
+  {
+    title: 'NO',
+    align: 'left',
+    scopedSlots: {
+      customRender: 'index',
+    },
+    customHeaderCell: () => {
+      return {
+        style: {
+          'padding-left': '26px !important',
+        },
+      }
+    },
+    customCell: () => {
+      return {
+        style: {
+          'padding-left': '26px !important',
+        },
+      }
+    },
+  },
+  {
+    title: 'STATION',
+    align: 'left',
+    dataIndex: 'stationCode',
+  },
+  {
+    title: 'START TIME',
+    align: 'left',
+    dataIndex: 'startTime',
+  },
+  {
+    title: 'END TIME',
+    align: 'left',
+    dataIndex: 'endTime',
+  },
+  {
+    title: 'DID',
+    align: 'left',
+    dataIndex: 'dosId',
+  },
+]
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { getAction, getFileAction } from '@/api/manage'
+import moment from 'moment'
+import { compareDate } from '@/views/statistics/commom'
+import FileDetail from './components/fileDetail.vue'
+export default {
+  name: 'menuTree',
+  mixins: [JeecgListMixin],
+  components: {
+    FileDetail,
+  },
+  data() {
+    return {
+      excelLoading: false,
+      isImmediate: true,
+      columns,
+      queryParam: {
+        startTime: sessionStorage.getItem('currStartDate_sta')
+          ? sessionStorage.getItem('currStartDate_sta')
+          : moment().subtract(6, 'days').format('YYYY-MM-DD'),
+        endTime: sessionStorage.getItem('currEndDate_sta')
+          ? sessionStorage.getItem('currEndDate_sta')
+          : moment().format('YYYY-MM-DD'),
+        stationIds: [],
+      },
+      url: {
+        list: '/webStatistics/findDosPage',
+        delete: '/gardsSampleData/deleteById',
+        findStationList: '/webStatistics/findStationList',
+        findParticulatePage: '/webStatistics/findParticulatePage',
+      },
+      stationList: [],
+      dataSource: [],
+      strIds: '',
+      allChecked: false,
+      isFileDetail: false,
+      currSampleId: '',
+    }
+  },
+  created() {
+    this.findStationList()
+  },
+  methods: {
+    handleExcel() {
+      if (this.dataSource.length > 0) {
+        this.excelLoading = true
+        let params = {
+          ...this.queryParam,
+        }
+        getFileAction('/webStatistics/dosExport', params).then((res) => {
+          this.excelLoading = false
+          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' })
+            let link = document.createElement('a')
+            link.href = window.URL.createObjectURL(blob)
+            link.download = 'DOS'
+            document.body.appendChild(link)
+            link.click()
+            URL.revokeObjectURL(link.href)
+            document.body.removeChild(link)
+          }
+        })
+      } else {
+        this.$message.warning('No downloadable data')
+      }
+    },
+    handleBack(flag) {
+      this.isFileDetail = flag
+    },
+    handleDetail(record) {
+      console.log(record)
+      this.currSampleId = record.dosId
+      this.isFileDetail = true
+    },
+    searchQueryData() {
+      this.loading = true
+      let days = compareDate(this.queryParam.startTime, this.queryParam.endTime)
+      if (days <= 10) {
+        this.isImmediate = false
+        this.ipagination.current = 1
+
+        const { current, pageSize } = this.ipagination
+
+        let params = {
+          ...this.queryParam,
+          pageNo: current,
+          pageSize: pageSize,
+        }
+        getAction(this.url.list, params).then((res) => {
+          this.loading = false
+          if (res.success) {
+            if (Array.isArray(res.result)) {
+              this.ipagination.total = res.result.length
+              this.dataSource = res.result
+            } else {
+              this.ipagination.total = res.result.total
+              this.dataSource = res.result.records
+            }
+          } else {
+            this.$message.warning('This operation fails. Contact your system administrator')
+          }
+        })
+      } else {
+        this.loading = false
+        this.$message.info('Maximum timespan duration is 10 days. Please, change start or end date.')
+      }
+    },
+    findStationList() {
+      getAction(this.url.findStationList, { menuName: '' }).then((res) => {
+        if (res.success) {
+          if (res.result.length > 0) {
+            this.stationList = res.result.map((res) => ({ label: res.stationCode, value: res.stationId }))
+            // 进入页面自动查询
+            let arr = sessionStorage.getItem('selectedSta_sta')
+              ? sessionStorage.getItem('selectedSta_sta').split(',')
+              : []
+            this.queryParam.stationIds = arr.map((item) => Number(item))
+            this.searchQueryData()
+          } else {
+            this.stationList = []
+          }
+        } else {
+          this.$message.warning('This operation fails. Contact your system administrator')
+        }
+      })
+    },
+    handleSelectChange(val) {
+      window.sessionStorage.setItem('selectedSta_sta', 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_sta', this.queryParam.stationIds)
+      } else {
+        this.queryParam.stationIds = []
+        window.sessionStorage.setItem('selectedSta_sta', [])
+      }
+    },
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+    handleStartDateChange(date) {
+      window.sessionStorage.setItem('currStartDate_sta', date)
+    },
+    handleEndDateChange(date) {
+      window.sessionStorage.setItem('currEndDate_sta', date)
+    },
+  },
+  computed: {
+    formItems() {
+      return [
+        // {
+        //   type: 'a-input',
+        //   label: '',
+        //   name: 'search',
+        //   props: {
+        //     placeholder: 'search...',
+        //     style: {
+        //       width: '166px',
+        //     },
+        //   },
+        //   style: {
+        //     width: 'auto',
+        //   },
+        // },
+        {
+          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',
+          },
+        },
+      ]
+    },
+  },
+}
+</script>
+<style lang="less" scoped>
+.icon-edit {
+  margin-right: 10px;
+}
+</style>
+