Particulate 模块详情页面开发

.env.development

@@ -1,5 +1,6 @@
 NODE_ENV=development
 VUE_APP_API_BASE_URL=http://182.92.183.230:9999
+# VUE_APP_API_BASE_URL=http://192.168.0.111:9999
 VUE_APP_CAS_BASE_URL=http://cas.example.org:8443/cas
 VUE_APP_ONLINE_BASE_URL=http://fileview.jeecg.com/onlinePreview
 

src/api/manage.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import { axios } from '@/utils/request'
 import signMd5Utils from '@/utils/encryption/signMd5Utils'
+import qs from "qs";
 
 const api = {
   user: '/mock/api/user',
@@ -65,6 +66,9 @@ export function getAction(url,parameter) {
     url: url,
     method: 'get',
     params: parameter,
+    paramsSerializer: function (params) {  
+      return qs.stringify(params, { arrayFormat: "repeat" });  
+    },
     headers: signHeader
   })
 }

src/components/CustomTable/index.vue

@@ -60,19 +60,21 @@ export default {
   methods: {
     // 实现单击选中/反选功能
     customRow(record) {
+      let _this = this
       return {
-        class: this.innerSelectedRowKeys.includes(record[this.rowKey]) ? 'ant-table-row-selected' : '',
+        class: _this.innerSelectedRowKeys.includes(record[_this.rowKey]) ? 'ant-table-row-selected' : '',
         on: {
           click: () => {
-            if(!this.canSelect) {
+            if(!_this.canSelect) {
               return
             }
-            if (this.innerSelectedRowKeys.includes(record[this.rowKey])) {
+            if (_this.innerSelectedRowKeys.includes(record[_this.rowKey])) {
-              this.innerSelectedRowKeys = []
+              _this.innerSelectedRowKeys = []
             } else {
-              this.innerSelectedRowKeys = [record[this.rowKey]]
+              _this.innerSelectedRowKeys = [record[_this.rowKey]]
             }
-            this.$emit('update:selectedRowKeys', this.innerSelectedRowKeys)
+            _this.$emit('update:selectedRowKeys', _this.innerSelectedRowKeys)
+            _this.$emit("detail",record)
           }
         }
       }

src/views/statistics/RouteView.vue

@@ -1,8 +1,8 @@
 <template>
-  <a-card :bordered="false">
+  <a-card :bordered="false" style="height: 100%;">
     <a-layout id="components-layout-demo-custom-trigger" style="height: 100%">
-      <a-layout-sider theme="light" v-model="collapsed" :trigger="null" collapsible width="320px">
+      <a-layout-sider theme="light" v-model="collapsed" :trigger="null" collapsible width="350px">
-        <div>
+        <div style="height:100%">
           <a-menu
             id="dddddd"
             :defaultSelectedKeys="defaultSelectedKeys"
@@ -155,9 +155,12 @@ export default {
     background: none;
   }
 }
+::v-deep .ant-card-body{
+  height: 100%;
+}
 .ant-menu {
-  width: 320px;
+  width: 350px;
-  height: 939px;
+  height: 100%;
   background-color: #022024;
   border: solid 1px #0c6a66;
   opacity: 0.9;
@@ -169,6 +172,8 @@ export default {
   line-height: 16px;
   letter-spacing: 1px;
   color: #ffffff;
+  overflow-y: auto;
+  overflow-x: hidden;
 
   ::v-deep {
     .ant-menu-inline.ant-menu-sub {

src/views/statistics/blankphd.vue

@@ -1,29 +1,34 @@
 <template>
-  <a-card :bordered="false" style="margin-left: 20px">
+  <div style="height: 100%;">
-    <search-form :items="formItems" v-model="queryParam" @search="searchQuery">
+    <a-card v-show="!isDetail" :bordered="false" style="margin-left: 20px">
-      <a-space style="float: right" class="btn-group" slot="additional">
+      <!-- <search-form :items="formItems" v-model="queryParam" @search="searchQuery"> -->
-        <a-button @click="handleEdit" type="primary">
+      <search-form :items="formItems" v-model="queryParam" @search="searchQueryData">
-          <img src="@/assets/images/global/edit.png" alt="" />
+        <a-space style="float: right" class="btn-group" slot="additional">
-          Excel
+          <a-button @click="handleEdit" type="primary">
-        </a-button>
+            <img src="@/assets/images/global/edit.png" alt="" />
-      </a-space>
+            Excel
-    </search-form>
+          </a-button>
-    <custom-table
+        </a-space>
-      size="middle"
+      </search-form>
-      rowKey="sampleId"
+      <custom-table
-      :columns="columns"
+        size="middle"
-      :list="dataSource"
+        rowKey="sampleId"
-      :pagination="ipagination"
+        :columns="columns"
-      :loading="loading"
+        :list="dataSource"
-      @change="handleTableChange"
+        :pagination="ipagination"
-      :selectedRowKeys.sync="selectedRowKeys"
+        :loading="loading"
-      :scroll="{ x: true, y: 'calc(100vh - 410px)' }"
+        @change="handleTableChange"
-    >
+        @detail="handleDetail"
-      <template slot="index" slot-scope="{ index }">
+        :selectedRowKeys.sync="selectedRowKeys"
-        {{ index + 1 }}
+        :scroll="{ x: true, y: 'calc(100vh - 410px)' }"
-      </template>
+      >
-    </custom-table>
+        <template slot="index" slot-scope="{ index }">
-  </a-card>
+          {{ index + 1 }}
+        </template>
+      </custom-table>
+    </a-card>
+    <Detail v-show="isDetail" @back="handleBack"></Detail>
+  </div>
 </template>
 <script>
 const columns = [
@@ -83,11 +88,16 @@ const columns = [
 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',
@@ -101,16 +111,18 @@ export default {
         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) {
+      '$route.meta.title'(val) {
         if(val === 'SPHDF'){
             this.queryParam.dataType = 'FULL'
         } else if(val === 'SPHDP'){
@@ -122,10 +134,44 @@ export default {
     },
   },
   methods: {
-    handleTableChange() {},
+    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) => {
-        this.stationList = res.result.map((res) => ({ label: res.stationCode, value: res.stationId }))
+        console.log("resdsfsdf", res);
+        if (res.result.length>0) {
+          this.stationList = res.result.map((res) => ({ label: res.stationCode, value: res.stationId }))
+        } else {
+          this.stationList=[]
+        }
       })
     },
   },
@@ -209,5 +255,6 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+
 </style>
   

src/views/statistics/calibphd.vue

@@ -1,16 +1,202 @@
 <template>
-  <!-- <a-card :bordered="false">
+  <a-card :bordered="false" style="margin-left: 20px">
-        <my-menu />
+    <search-form :items="formItems" v-model="queryParam" @search="searchQueryData">
-        <div>111</div>
+      <a-space style="float: right" class="btn-group" slot="additional">
-    </a-card> -->
+        <a-button @click="handleEdit" type="primary">
-  <div>
+          <img src="@/assets/images/global/edit.png" alt="" />
-    12311111
+          Excel
-    <router-view></router-view>
+        </a-button>
-  </div>
+      </a-space>
+    </search-form> 
+  </a-card>
 </template>
 <script>
-export default {
+import dateFormat from '../../components/jeecg/JEasyCron/format-date'
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import { getAction } from '../../api/manage'
+const url = {
+  list: '/webStatistics/findParticulatePage',
+  findStationList: '/webStatistics/findStationList',
+}
+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',
+  },
+]
 
-  setup() {},
+export default {
+  mixins: [JeecgListMixin],
+  data() {
+    return {
+      queryParam: {
+        dataType: 'B',
+        startTime: dateFormat(new Date(), 'yyyy-MM-dd'),
+        endTime: dateFormat(new Date(), 'yyyy-MM-dd'),
+      },
+      stationList: [],
+      url,
+      columns,
+    }
+  },
+  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',
+          },
+        },
+      ]
+    },
+  },
+  watch: {
+    "$route":{
+      handler: function (val, oldVal) {
+        if(val.meta.title === 'SPHDF'){
+          this.queryParam.dataType = 'FULL'
+        } else if(val.meta.title === 'SPHDP'){
+            this.queryParam.dataType = 'PREL'
+        } else{
+          this.queryParam.dataType = val.meta.title.substring(0, 1)
+        }
+      },
+      deep:true,
+      immediate:true
+    }
+  },
+  created() {
+    this.findStationList()
+  },
+  mounted() {
+    console.log("this.$route.meta",this.$route.meta);
+    // this.queryParam.dataType = this.$route.meta.title
+  },
+  
+  methods: {
+    searchQueryData() {
+      console.log("查询数据",this.queryParam);
+    },
+    findStationList() {
+      getAction(this.url.findStationList, { menuName: 'Particulate' }).then((res) => {
+        console.log("resdsfsdf",res);
+        this.stationList = res.result.map((res) => ({ label: res.stationCode, value: res.stationId }))
+      })
+    },
+  },
 }
 </script>

src/views/statistics/detail.vue

@@ -0,0 +1,529 @@
+<template>
+  <a-card :bordered="false" style="margin-left: 20px;height: 100%;">
+      <div class="detail-top">
+        <div class="top-back" @click="handleback">
+          <img src="../../assets/images/web-statistics/return.png" alt="">
+          <span style="margin-left: 10px;">return</span>
+        </div>
+        <div class="top-actions">
+          <div class="right-btn">
+            <img src="../../assets/images/web-statistics/download.png" alt=""><span>ZIP</span>
+          </div>
+          <div class="right-btn">
+            <img src="../../assets/images/web-statistics/download.png" alt=""><span>TXT</span>
+          </div>
+          <div class="right-btn">
+            <img src="../../assets/images/web-statistics/view.png" alt=""><span>View Report</span>
+          </div>
+        </div>
+      </div>
+      <a-tabs default-active-key="info" @change="handleTabChange">
+        <a-tab-pane key="info" tab="INFO" v-if="allData.headerBlock===null?false:true">
+          <templete>
+            <div class="pane-title">GENERAL INFORMATION</div>
+            <a-row>
+              <a-col :span="12">Site Code:</a-col>
+              <a-col :span="12">{{ allData.headerBlock.siteCode }}</a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="12">Detector Code:</a-col>
+              <a-col :span="12">{{ allData.headerBlock.detectorCode }}</a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="12">System Type:</a-col>
+              <a-col :span="12">{{ allData.headerBlock.systemType }}</a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="12">Sample Geometry:</a-col>
+              <a-col :span="12">{{ allData.headerBlock.sampleGeometry }}</a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="12">Spectrum Qualifier:</a-col>
+              <a-col :span="12">{{ allData.headerBlock.spectrumQualifier }}P</a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="12">Sample Reference Identification:</a-col>
+              <a-col :span="12">{{ allData.headerBlock.sampleReferenceIdentification }}</a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="12">Measurement Identification:</a-col>
+              <a-col :span="12">{{ allData.headerBlock.measurementIdentification }}</a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="12">Detector Background Measurement Identification:</a-col>
+              <a-col :span="12">{{ allData.headerBlock.detectorBackgroundMeasurementId }}</a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="12">Gas Background Measurement Identification:</a-col>
+              <a-col :span="12">{{ allData.headerBlock.gasBackgroundMeasurementId }}</a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="12">Transmit Time:</a-col>
+              <a-col :span="12">{{ allData.headerBlock.transmitDate }}</a-col>
+            </a-row>
+          </templete>
+          <template v-if="allData.commentBlock">
+            <div class="pane-title">COMMENT</div>
+            <a-row>
+              <a-col class="comment-block" :span="24" v-html="commentText"></a-col>
+            </a-row>
+          </template>
+          <template v-if="allData.acquisitionBlock">
+            <div class="pane-title">ACQUISITION</div>
+            <a-row>
+              <a-col :span="12">Acquisition Time:</a-col>
+              <a-col :span="12">{{ allData.acquisitionBlock.acquisitionStartDate }}</a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="12">Acquisition Real Time:</a-col>
+              <a-col :span="12">{{ allData.acquisitionBlock.acquisitionRealTime }}</a-col>
+            </a-row>
+            <a-row>
+              <a-col :span="12">Acquisition Live Time:</a-col>
+              <a-col :span="12">{{ allData.acquisitionBlock.acquisitionLiveTime }}</a-col>
+            </a-row>
+          </template>
+          <template v-if="allData.calibrationBlock">
+            <div class="pane-title">CALIBRATION</div>
+            <a-row>
+              <a-col :span="12">Date of Last Calibration</a-col>
+              <a-col :span="12">{{ allData.calibrationBlock.dateOfLastCalibration }}</a-col>
+            </a-row>
+          </template>
+        </a-tab-pane>
+        <a-tab-pane key="energy" tab="ENERGY" v-if="allData.gEnergyBlock===null?false:true">
+          <div class="pane-title" style="margin-bottom: 15px;">G ENERGY</div>
+          <custom-table
+            size="middle"
+            rowKey="sampleId"
+            :columns="columnsEnergy"
+            :list="dataSourceEnergy"
+            :pagination="false"
+          >
+          </custom-table>
+        </a-tab-pane>
+        <a-tab-pane key="resulution" tab="RESOLUTION" v-if="allData.gResolutionBlock===null?false:true">
+          <div class="pane-title" style="margin-bottom: 15px;">G RESOLUTION</div>
+          <custom-table
+            size="middle"
+            rowKey="sampleId"
+            :columns="columnsResulution"
+            :list="dataSourceResulution"
+            :pagination="false"
+          >
+          </custom-table>
+        </a-tab-pane>
+        <a-tab-pane key="efficiency" tab="EFFICIENCY" v-if="allData.gEfficiencyBlock===null?false:true">
+          <div class="pane-title" style="margin-bottom: 15px;">GAMMA EFFICIENCY</div>
+          <custom-table
+            size="middle"
+            rowKey="sampleId"
+            :columns="columnsEfficiency"
+            :list="dataSourceEfficiency"
+            :pagination="false"
+          >
+          </custom-table>
+        </a-tab-pane>
+        <a-tab-pane key="gamma-spectrum" tab="GAMMA SPECTRUM" v-if="allData.gSpectrumBlock===null?false:true">
+          <div class="pane-title" style="margin-bottom: 15px;">GAMMA SPECTRUM</div>
+          <div class="gamma-spectrum-row">
+              <div>
+                <span>Number of Channels：</span><span class="row-val">8192</span>
+                <span style="margin-left: 35px;">Energy Span:</span><span class="row-val">8192</span> 
+              </div>
+              <div>
+                <a-checkbox style="margin-right: 15px;">Y log scale</a-checkbox>
+                <a-button class="row-btn">Reset Zoom</a-button>
+              </div>
+          </div>
+          <div class="gamma-spectrum-chart" id="spectrumChartRef"></div>
+        </a-tab-pane>
+        <a-tab-pane key="certificate" tab="CERTIFICATE" v-if="allData.certificateBlock===null?false:true">
+          <div class="pane-title" style="margin-bottom: 15px;">CERTIFICATE</div>
+          <div class="certificate-row">
+            <span>Total Source Activity [ Bq ]：</span><span class="row-val">8192</span>
+            <span style="margin-left: 35px;">Assay Date：</span><span class="row-val">8192</span> 
+            <span style="margin-left: 35px;">Units of Activity：</span><span class="row-val">8192</span> 
+          </div>
+          <custom-table
+            size="middle"
+            rowKey="sampleId"
+            :columns="columnsCertificate"
+            :list="dataSourceCertificate"
+            :pagination="false"
+          >
+          </custom-table>
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+import allData from "./data.json"
+  export default {
+    data() {
+      return {
+        loading:true,
+        myChart:null,
+        allData,
+        tabMenus: [
+          {
+            name: "INFO",
+            key: "info",
+            // isShow: this.allData.headerBlock?true:false 
+          },{
+            name: "ENERGY",
+            key: "energy",
+            // isShow: this.allData.gEnergyBlock?true:false 
+          },{
+            name: "RESOLUTION",
+            key: "resulution",
+            // isShow: this.allData.gResolutionBlock?true:false 
+          },{
+            name: "EFFICIENCY",
+            key: "efficiency",
+            // isShow: this.allData.gEfficiencyBlock?true:false 
+          },{
+            name: "GAMMA SPECTRUM",
+            key: "gamma-spectrum",
+            // isShow: this.allData.gSpectrumBlock?true:false 
+          },{
+            name: "CERTIFICATE",
+            key:"certificate",
+            // isShow: this.allData.certificateBlock?true:false 
+          },
+        ],
+        commentText: "",
+        columnsEnergy: [
+          {
+            title: 'G-Energy [keV]',
+            align: 'left',
+            dataIndex: 'energy'
+          },
+          {
+            title: 'Centroid channel',
+            align: 'left',
+            dataIndex: 'centroid'
+          },
+          {
+            title: 'Uncertainty (channels)',
+            align: 'left',
+            dataIndex: 'uncertainty'
+          },
+        ],
+        dataSourceEnergy:[],
+        columnsResulution: [
+          {
+            title: 'G-Energy [keV]',
+            align: 'left',
+            dataIndex: 'energy'
+          },
+          {
+            title: 'FWHM [keV]',
+            align: 'left',
+            dataIndex: 'FWHM'
+          },
+          {
+            title: 'Uncertainty [keV]',
+            align: 'left',
+            dataIndex: 'uncertainty'
+          },
+        ],
+        dataSourceResulution:[],
+        columnsEfficiency: [
+          {
+            title: 'Energy',
+            align: 'left',
+            dataIndex: 'energy'
+          },
+          {
+            title: 'Efficiency',
+            align: 'left',
+            dataIndex: 'efficiency'
+          },
+          {
+            title: 'Uncertainty',
+            align: 'left',
+            dataIndex: 'uncertainty'
+          },
+        ],
+        dataSourceEfficiency: [],
+        columnsCertificate: [
+          {
+            title: 'Nuclide name',
+            align: 'left',
+            dataIndex: 'nuclideName'
+          },
+          {
+            title: 'Half-life',
+            align: 'left',
+            dataIndex: 'halfLife'
+          },
+          {
+            title: 'Activity',
+            align: 'left',
+            dataIndex: 'nuclideActivity'
+          },
+          {
+            title: 'Uncertainty',
+            align: 'left',
+            dataIndex: 'uncertainty'
+          },
+          {
+            title: 'Energy',
+            align: 'left',
+            dataIndex: 'Genergy'
+          },
+          {
+            title: 'Intensity',
+            align: 'left',
+            dataIndex: 'intensity'
+          },
+          {
+            title: 'Electron decay',
+            align: 'left',
+            dataIndex: 'electronDecayModeDescriptor'
+          },
+          {
+            title: 'Maximum',
+            align: 'left',
+            dataIndex: 'maxBParticleEnergy'
+          },
+          {
+            title: 'Particle B intensity',
+            align: 'left',
+            dataIndex: 'particleBIntensity'
+          }
+        ],
+        dataSourceCertificate:[]
+      }
+    },
+    mounted () {
+      console.log(this.allData);
+      this.commentText = this.allData.commentBlock.text.replace(/\n/g, "<br />")
+      this.dataSourceEnergy=this.allData.gEnergyBlock.gEnergySubBlock
+      this.dataSourceResulution=this.allData.gResolutionBlock.gResolutionSubBlock
+      this.dataSourceEfficiency = this.allData.gEfficiencyBlock.gEfficiencySubBlock
+      this.dataSourceCertificate = this.allData.certificateBlock?this.allData.certificateBlock.certificateSubBlock:[]
+    },
+  methods: {
+    handleback() {
+      this.$emit("back",false)
+    },
+    handleTabChange(key) {
+      console.log(key);
+      if (key === "gamma-spectrum") {
+        this.$nextTick(() => {
+          this.drawSpectrumChart()
+        })
+      } 
+    },
+    drawSpectrumChart() {
+      const spectrumChart = echarts.init(document.getElementById("spectrumChartRef"))
+      spectrumChart.setOption({
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c}'
+        },
+        xAxis: {
+          type: 'value',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgbA(64, 105, 121, 0.2)"
+            }
+          },
+          data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'log',
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgbA(64, 105, 121, 0.2)"
+            }
+          }
+        },
+        series: [
+          {
+            name: 'Log2',
+            type: 'line',
+            itemStyle: { normal: { color: '#0656ff' } },
+            data: [1, 3, 9, 27, 81, 247, 741, 2223, 6669]
+          }
+        ]
+      })
+      window.addEventListener("resize", function () {
+        myChart.resize();
+      });
+    }
+    },
+  }
+</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;
+  }
+  .top-actions{
+    .right-btn{
+      display: inline-block;
+      height: 32px;
+      line-height: 32px;
+      padding: 0 12px;
+      margin-left: 20px;
+	    background-color: #1397a3;
+    }
+  }
+}
+::v-deep {
+  .ant-tabs{
+    height: calc(100% - 66px);
+    .ant-tabs-top-content{
+      height: calc(100% - 56px);
+      .ant-tabs-tabpane{
+        height: 100%;
+        overflow: auto;
+      }
+    }
+  }
+  .ant-tabs-bar{
+    width: 100%;
+    height: 40px;
+    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);
+  }
+  .ant-tabs-nav .ant-tabs-tab{
+    height: 30px;
+    line-height: 30px;
+    background-color: rgba(58, 236, 240, 0.22);
+    font-family: BookmanOldStyle;
+    font-size: 16px;
+    font-weight: bold;
+    font-stretch: normal;
+    letter-spacing: 2px;
+    color: #c9f6f6;
+    margin: 0 0 0 10px;
+    padding: 0 23px;
+    position: relative;
+    &::before{
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 7px;
+      height: 29px;
+      color: rgba(58, 236, 240, 0.22);
+      border: 1px solid #569e9e;
+      border-right: none;
+      border-radius: 0;
+    }
+    &::after{
+      content: "";
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 7px;
+      height: 29px;
+      color: rgba(58, 236, 240, 0.22);
+      border: 1px solid #569e9e;
+      border-left: none;
+    }
+    &-active{
+      &::before,
+          &::after {
+            border-color: #0cecca !important;
+          }
+    }
+  }
+  .ant-tabs-ink-bar{
+    display: none !important
+  }
+  .ant-tabs-nav .ant-tabs-tab-active{
+    color: #2affdf;
+  }
+  .ant-tabs-tabpane{
+    width: 100%;
+    height: calc(100% - 122px);
+    border: solid 1px #416f7f;
+    padding: 15px 20px;
+  }
+  .ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane-inactive{
+    padding: 15px 20px !important
+  }
+  .ant-row{
+    height: 36px;
+    line-height: 36px;
+  }
+}
+.pane-title{
+  height: 40px;
+  background-color: rgba(12, 235, 201, 0.05);
+  line-height: 40px;
+  font-family: ArialMT;
+  font-size: 18px;
+  font-weight: bold;
+  font-stretch: normal;
+  letter-spacing: 1px;
+  color: #0cebc9;
+  padding: 0 0 0 18px;
+}
+.comment-block{
+  background-color: rgba(12, 235, 201, 0.05);
+  margin-top: 10px;
+  padding: 20px;
+  line-height: 24px;
+}
+.gamma-spectrum-row{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .row-val{
+    font-family: MicrosoftYaHei;
+	  color: #ade6ee;
+  }
+  .row-btn{
+    height: 26px;
+	  background-color: #406979;
+    line-height: 26px;
+    border: none;
+  }
+}
+.gamma-spectrum-chart{
+  width: 100%;
+  height: calc(100% - 81px);
+}
+.certificate-row{
+  height: 30px;
+  display: flex;
+  align-items: center;
+  font-family: MicrosoftYaHei;
+	color: #ade6ee;
+  margin-bottom: 10px;
+}
+</style>