AnalysisSystemForRadionuclide_vue/src/views/statistics/blankphd.vue

<template>
  <div style="height: 100%;">
    <a-card v-show="!isDetail" :bordered="false" style="margin-left: 20px">
      <!-- <search-form :items="formItems" v-model="queryParam" @search="searchQuery"> -->
      <search-form :items="formItems" v-model="queryParam" @search="searchQueryData">
        <a-space style="float: right" class="btn-group" slot="additional">
          <a-button @click="handleEdit" type="primary">
            <img 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"
        :selectedRowKeys.sync="selectedRowKeys"
        :scroll="{ x: true, y: 'calc(100vh - 410px)' }"
      >
        <template slot="index" slot-scope="{ index }">
          {{ index + 1 }}
        </template>
      </custom-table>
    </a-card>
    <Detail v-show="isDetail" @back="handleBack"></Detail>
  </div>
</template>
<script>
const columns = [
  {
    title: 'NO',
    align: 'left',
    width: 50,
    scopedSlots: {
      customRender: 'index',
    },
    customHeaderCell: () => {
      return {
        style: {
          'padding-left': '26px !important',
        },
      }
    },
    customCell: () => {
      return {
        style: {
          'padding-left': '26px !important',
        },
      }
    },
  },
  {
    title: 'STATION',
    align: 'left',
    dataIndex: 'stationName',
    width: 130,
  },
  {
    title: 'DETECTOR CODE',
    align: 'left',
    width: 100,
    dataIndex: 'siteDetCode',
  },
  {
    title: 'SPECTRAL QUALIFIER',
    align: 'left',
    width: 100,
    dataIndex: 'spectralQualifie',
  },
  {
    title: 'ACQUISITION START TIME',
    align: 'left',
    width: 100,
    dataIndex: 'acquisitionStart',
  },
  {
    title: 'ACQUISITION STOP TIME',
    align: 'left',
    width: 120,
    dataIndex: 'acquisitionStop',
  },
]
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { getAction } from '../../api/manage'
import dateFormat from '../../components/jeecg/JEasyCron/format-date'
import Detail from "./detail.vue"
export default {
  name: 'menuTree',
  mixins: [JeecgListMixin],
  components: {
    Detail,
  },
  data() {
    return {
      isDetail:false,
      columns,
      queryParam: {
        dataType: 'B',
        startTime: dateFormat(new Date(), 'yyyy-MM-dd'),
        endTime: dateFormat(new Date(), 'yyyy-MM-dd'),
      },
      url: {
        list: '/webStatistics/findParticulatePage',
        delete: '/gardsSampleData/deleteById',
        findStationList: '/webStatistics/findStationList',
        findParticulatePage: '/jeecg-web-statistics/webStatistics/findParticulatePage',
      },
      stationList: [],
      dataSource:[]
    }
  },
  mounted() {
    console.log("this.$route.meta",this.$route.meta);
    this.queryParam.dataType = this.$route.meta.title
  },
  created() {
    this.findStationList()
  },
  watch: {
      '$route.meta.title'(val) {
        if(val === 'SPHDF'){
            this.queryParam.dataType = 'FULL'
        } else if(val === 'SPHDP'){
            this.queryParam.dataType = 'PREL'
        } else{
            this.queryParam.dataType = val.substring(0, 1)
        }
      this.searchQuery()
    },
  },
  methods: {
    searchQueryData() {
      this.queryParam = {
        dataType: "S",
        startTime: "2023-05-01",
        endTime:"2023-05-07",
      }
      console.log("查询数据", this.queryParam);
      let params = {
        ...this.queryParam,
        pageNo: 1,
        pageSize: 10,
        stationIds: ["209", "211", "213"]
      }
      getAction(this.url.list, params).then((res) => {
        console.log("查询数据结果", res);
        if (res.success) {
          this.dataSource = res.result.records
        }
      })
    },
    handleDetail(record) {
      this.isDetail = true
      console.log("点击行信息",record);
    },
    handleBack(flag) {
      this.isDetail = flag
    },
    handleTableChange(pagination, filters, sorter, { currentDataSource }) {
      console.log(pagination, filters, sorter, { currentDataSource });
    },
    findStationList() {
      getAction(this.url.findStationList, { menuName: 'Particulate' }).then((res) => {
        console.log("resdsfsdf", res);
        if (res.result.length>0) {
          this.stationList = res.result.map((res) => ({ label: res.stationCode, value: res.stationId }))
        } else {
          this.stationList=[]
        }
      })
    },
  },
  computed: {
    formItems() {
      return [
        {
          type: 'a-input',
          label: '',
          name: 'search',
          props: {
            placeholder: 'search...',
            style: {
              width: '166px',
            },
          },
          style: {
            width: 'auto',
          },
        },
        {
          type: 'custom-select',
          label: 'Stations',
          name: 'stationIds',
          props: {
            placeholder: 'select stations',
            mode: 'multiple',
            maxTagCount: 1,
            options: [
              {
                label: 'ALL',
                value: '',
              },
              ...this.stationList,
            ],
            style: {
              width: '200px',
            },
          },
          style: {
            width: 'auto',
          },
        },
        {
          label: 'Start date',
          type: 'custom-date-picker',
          name: 'startTime',
          props: {
            showTime: { format: 'HH:mm' },
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD:ss',
            style: {
              minWidth: 'auto',
              width: '200px',
            },
          },
          style: {
            width: 'auto',
          },
        },
        {
          label: 'End date',
          type: 'custom-date-picker',
          name: 'endTime',
          props: {
            showTime: { format: 'HH:mm' },
            format: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD:ss',
            style: {
              minWidth: 'auto',
              width: '200px',
            },
          },
          style: {
            width: 'auto',
          },
        },
      ]
    },
  },
}
</script>
<style lang="less" scoped>

</style>