From 5d59dbeff101db957bd9c3b068081af103e6d604 Mon Sep 17 00:00:00 2001
From: Xu Zhimeng <xuzhimeng@qq.com>
Date: Tue, 16 May 2023 19:45:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20Data=20Base=E9=A1=B5=E9=99=A4=E5=8E=BB?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E9=83=A8=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomTable/index.vue |  11 +-
 src/components/SearchForm/index.vue  |   3 +-
 src/components/page/GlobalLayout.vue |  23 +--
 src/style.less                       | 119 +++++++++++-
 src/views/system/DataBase.vue        | 277 ++++++++++++++++++---------
 5 files changed, 329 insertions(+), 104 deletions(-)

diff --git a/src/components/CustomTable/index.vue b/src/components/CustomTable/index.vue
index 4760b66..cbe62e7 100644
--- a/src/components/CustomTable/index.vue
+++ b/src/components/CustomTable/index.vue
@@ -1,5 +1,6 @@
 <template>
   <a-table
+   class="custom-table"
     v-bind="$attrs"
     :data-source="list"
     :columns="columns"
@@ -84,4 +85,12 @@ export default {
   }
 }
 </script>
-<style lang=""></style>
+<style lang="less" scoped>
+.custom-table {
+  ::v-deep {
+    .ant-table-row {
+      cursor: pointer;
+    }
+  }
+}
+</style>
diff --git a/src/components/SearchForm/index.vue b/src/components/SearchForm/index.vue
index e5d85a1..6bf847f 100644
--- a/src/components/SearchForm/index.vue
+++ b/src/components/SearchForm/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="search-form">
     <a-form-model ref="form" :model="formModel" v-bind="$attrs" @keyup.enter.native="onSearch">
-      <a-row :gutter="20">
+      <a-row :gutter="20" style="margin-right: 0 !important;">
         <a-col
           class="search-form-item"
           v-for="(item, index) in items"
@@ -67,6 +67,7 @@ export default {
   border-top: 1px solid rgba(12, 235, 201, 0.3);
   border-bottom: 1px solid rgba(12, 235, 201, 0.3);
   margin-bottom: 18px;
+  background-color: rgba(12, 235, 201, .05);
   &-item {
     margin-bottom: 10px;
   }
diff --git a/src/components/page/GlobalLayout.vue b/src/components/page/GlobalLayout.vue
index df90da5..d04c2bb 100644
--- a/src/components/page/GlobalLayout.vue
+++ b/src/components/page/GlobalLayout.vue
@@ -14,11 +14,11 @@
         @updateMenuTitle="handleUpdateMenuTitle"
       />
       <div class="global-content">
-        <div class="top-border">
+        <div class="content-top-border">
           <img src="@/assets/images/content/top.png" alt="">
         </div>
         <div class="content-main">
-          <div class="left-border">
+          <div class="content-left-border">
             <img src="@/assets/images/content/left.png" alt="">
           </div>
           <!-- layout content -->
@@ -30,11 +30,11 @@
               <slot></slot>
             </div>
           </a-layout-content>
-          <div class="right-border">
+          <div class="content-right-border">
             <img src="@/assets/images/content/left.png" alt="">
           </div>
         </div>
-        <div class="bottom-border">
+        <div class="content-bottom-border">
           <img src="@/assets/images/content/bottom.png" alt="">
         </div>
       </div>
@@ -739,11 +739,11 @@
           padding-right: 5px;
         }
         .has-submenu {
-          height: calc(100% - 56px);
+          height: calc(100% - 65px);
         }
       }
     }
-    .top-border {
+    .content-top-border {
       position: absolute;
       top: 11px;
       left: 0;
@@ -753,7 +753,7 @@
         height: 21px;
       }
     }
-    .bottom-border {
+    .content-bottom-border {
       position: absolute;
       bottom: 6px;
       img {
@@ -761,22 +761,23 @@
         height: 21px;
       }
     }
-    .left-border {
+    .content-left-border {
       width: 3px;
       height: 100%;
       margin-left: 12px;
       margin-right: 10px;
     }
-    .right-border {
+    .content-right-border {
       width: 3px;
       height: 100%;
       margin-right: 14px;
       margin-left: 5px;
     }
 
-    .left-border,
-    .right-border {
+    .content-left-border,
+    .content-right-border {
       img {
+        width: 100%;
         height: 100%;
       }
     }
diff --git a/src/style.less b/src/style.less
index 4edc2c1..ba1c7fb 100644
--- a/src/style.less
+++ b/src/style.less
@@ -12,6 +12,7 @@
 
 body {
   color: #fff;
+  font-family: Arial;
 }
 
 .ant-layout {
@@ -29,7 +30,7 @@ body {
     padding: 0;
     color: #fff;
   }
-   &-body {
+  &-body {
     padding: 0;
   }
 }
@@ -109,7 +110,7 @@ body {
   }
 }
 
-// 日历
+// 日期选择
 .ant-calendar {
   border-color: @formInputBorderColor;
   border-radius: 0;
@@ -163,6 +164,82 @@ body {
       }
     }
   }
+
+  &-month {
+    &-panel {
+      background-color: @modalBg;
+      &-header {
+        border-bottom: 1px solid @formInputBorderColor;
+      }
+      &-year-select-content {
+        color: #fff;
+      }
+    }
+  }
+}
+
+// 日历
+.ant-fullcalendar {
+  border-spacing: 0;
+  &-column-header {
+    background-color: #126b82;
+    border-left: 1px solid #126b82 !important;
+    padding: 0 !important;
+    line-height: 34px;
+    &-inner {
+      text-align: center;
+    }
+  }
+
+  &-content {
+    margin-top: 10px;
+    height: 98px;
+    background-color: rgba(140, 255, 229, .1);
+    &::-webkit-scrollbar {
+      width: 4px !important;
+    }
+  }
+
+  &-date {
+    padding: 20px 10px 10px !important;
+    margin: 0 !important;
+    height: 159px !important;
+    border-top: none !important;
+  }
+
+  &-value {
+    font-size: 24px;
+    font-family: Arial;
+    color: #ade6ee !important;
+  }
+
+  &-last-month-cell,
+  &-next-month-btn-day {
+    .ant-fullcalendar-value {
+      color: rgba(173, 230, 238, .1) !important;
+    }
+  }
+
+  &-calendar-body {
+    padding: 0 !important;
+  }
+
+  &-cell {
+    border-top: 1px solid #25454e !important;
+    border-left: 1px solid #25454e !important;
+    &:last-child {
+      border-right: 1px solid #25454e !important;
+    }
+  }
+
+  &-tbody {
+    border-bottom: 1px solid #25454e;
+  }
+
+  &-selected-day &-date,
+  &-date:hover {
+    background-color: #072f32 !important;
+  }
 }
 
 @formInputBgColor: #03353f;
@@ -361,6 +438,14 @@ body {
 
 // 树形结构
 .ant-tree {
+  &-checkbox-inner {
+    background-color: #03353f;
+    border-color: #0a544e;
+    border-radius: 0;
+  }
+  &-node-content-wrapper {
+    background-color: transparent !important;
+  }
 }
 
 // 按钮
@@ -582,6 +667,32 @@ body {
   background-color: #15494c !important;
 }
 
+// 穿梭框样式
+.ant-transfer {
+  &-list {
+    border-radius: 0;
+    border-color: #224852;
+    &-header {
+      background-color: #08363c;
+      border-radius: 0;
+      border-bottom-color: #224852;
+    }
+  }
+  &-operation {
+    .ant-btn {
+      background-color: #1397a3;
+      border: none;
+      border-radius: 0;
+      color: #fff;
+      &:disabled {
+        background-color: #4f7578;
+        color: #fff;
+      }
+    }
+  }
+}
+
+
 #userLayout {
   .container {
     background-color: @modalBg !important;
@@ -607,3 +718,7 @@ body {
 ::-webkit-scrollbar-track-piece {
   background-color: #15494c !important;
 }
+
+::-webkit-scrollbar-corner {
+  background-color: #15494c;
+}
\ No newline at end of file
diff --git a/src/views/system/DataBase.vue b/src/views/system/DataBase.vue
index 6a754ea..9065527 100644
--- a/src/views/system/DataBase.vue
+++ b/src/views/system/DataBase.vue
@@ -10,14 +10,14 @@
     </search-form>
     <custom-table
       size="middle"
-      rowKey="id"
+      rowKey="sampleId"
       :columns="columns"
       :list="dataSource"
       :pagination="ipagination"
       :loading="loading"
       @change="handleTableChange"
       :selectedRowKeys.sync="selectedRowKeys"
-      :scroll="{ y: 'calc(100vh - 405px)' }"
+      :scroll="{ x: true, y: 'calc(100vh - 405px)' }"
     >
       <template slot="index" slot-scope="{ index }">
         {{ index + 1 }}
@@ -28,80 +28,7 @@
 
 <script>
 import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-
-const formItems = [
-  {
-    label: 'SampleID',
-    type: 'a-input',
-    name: 'sampleID',
-    span: 4
-  },
-  {
-    label: 'Station',
-    type: 'custom-select',
-    name: 'station',
-    props: {
-      options: [
-        {
-          label: 'ALL',
-          value: ''
-        }
-      ]
-    },
-    span: 4
-  },
-  {
-    label: 'Detector',
-    type: 'custom-select',
-    name: 'detector',
-    props: {
-      options: [
-        {
-          label: 'ALL',
-          value: ''
-        }
-      ]
-    },
-    span: 4
-  },
-  {
-    label: 'From',
-    type: 'a-date-picker',
-    name: 'from',
-    props: {
-      showTime: { format: 'HH:mm' },
-      format: 'YYYY-MM-DD HH:mm'
-    }
-  },
-  {
-    label: 'To',
-    type: 'a-date-picker',
-    name: 'to',
-    props: {
-      showTime: { format: 'HH:mm' },
-      format: 'YYYY-MM-DD HH:mm'
-    },
-    style: {
-      paddingRight: 0
-    }
-  },
-  {
-    label: '',
-    type: 'a-checkbox-group',
-    props: {
-      options: [
-        { label: 'Collect Stop', value: 'collectStop' },
-        { label: 'Acq.Start', value: 'acqDotStart' },
-        { label: 'SampleData', value: 'sampleData' },
-        { label: 'AutoResults', value: 'autoResults' },
-        { label: 'Reviewed Results', value: 'reviewedResults' }
-      ]
-    },
-    style: {
-      width: '600px'
-    }
-  }
-]
+import { getAction } from '../../api/manage'
 
 const columns = [
   {
@@ -116,30 +43,30 @@ const columns = [
     title: 'SITE DET CODE',
     align: 'center',
     dataIndex: 'siteDetCode',
-    width: 100
+    width: 120
   },
   {
-    title: 'STATION ID',
+    title: 'SAMPLE ID',
     align: 'center',
     width: 100,
-    dataIndex: 'stationId'
+    dataIndex: 'sampleId'
   },
   {
     title: 'STATION',
     align: 'center',
     width: 100,
-    dataIndex: 'station'
+    dataIndex: 'stationName'
   },
   {
     title: 'DETECTOR',
     align: 'center',
     width: 100,
-    dataIndex: 'detector'
+    dataIndex: 'detectorsName'
   },
   {
     title: 'SAMPLE TYPE',
     align: 'center',
-    width: 100,
+    width: 120,
     dataIndex: 'sampleType'
   },
   {
@@ -158,20 +85,67 @@ const columns = [
     title: 'QUALIFIE',
     align: 'center',
     width: 100,
-    dataIndex: 'qualifie'
+    dataIndex: 'spectralQualifie'
   },
   {
     title: 'TRANSMIT DTG',
     align: 'center',
-    width: 100,
+    width: 150,
     dataIndex: 'transmitDtg'
+  },
+  {
+    title: 'COLLECT START',
+    align: 'center',
+    width: 150,
+    dataIndex: 'collectStart'
+  },
+  {
+    title: 'COLLECT STOP',
+    align: 'center',
+    width: 150,
+    dataIndex: 'collectStop'
+  },
+  {
+    title: 'ACQ.START',
+    align: 'center',
+    width: 150,
+    dataIndex: 'acquisitionStart'
+  },
+  {
+    title: 'ACQ.STOP',
+    align: 'center',
+    width: 150,
+    dataIndex: 'acquisitionStop'
+  },
+  {
+    title: 'ACQ.REAL(S)',
+    align: 'center',
+    width: 100,
+    dataIndex: 'acquisitionRealSec'
+  },
+  {
+    title: 'ACQ.LIVE(S)',
+    align: 'center',
+    width: 100,
+    dataIndex: 'acquisitionLiveSec'
+  },
+  {
+    title: 'QUANTITY',
+    align: 'center',
+    width: 100,
+    dataIndex: 'quantity'
+  },
+  {
+    title: 'STATUS',
+    align: 'center',
+    width: 100,
+    dataIndex: 'status'
   }
 ]
 
 export default {
   mixins: [JeecgListMixin],
   data() {
-    this.formItems = formItems
     this.columns = columns
     return {
       queryParam: {
@@ -179,12 +153,54 @@ export default {
         detector: ''
       },
       url: {
-        list: '/sys/user/list',
-        delete: ''
-      }
+        list: '/gardsSampleData/findPage',
+        delete: '/gardsSampleData/deleteById'
+      },
+      stationList: [],
+      detectorList: []
     }
   },
+  created() {
+    this.getStationList()
+    this.getDetectorList()
+  },
   methods: {
+    async getStationList() {
+      try {
+        const { success, result, message } = await getAction('/gardsStations/findPage', {
+          pageIndex: 1,
+          pageSize: 10000
+        })
+        if (success) {
+          this.stationList = result.records.map(record => ({ label: record.stationCode, value: record.stationId }))
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    async getDetectorList() {
+      try {
+        const { success, result, message } = await getAction('/gardsDetectors/findPage', {
+          pageIndex: 1,
+          pageSize: 10000
+        })
+        if (success) {
+          this.detectorList = result.records.map(record => ({ label: record.detectorCode, value: record.detectorId }))
+        } else {
+          this.$message.error(message)
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+
+    filterOption(input, option) {
+      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+    },
+
     onDel() {
       if (this.selectedRowKeys && this.selectedRowKeys.length) {
         this.$confirm({
@@ -192,13 +208,96 @@ export default {
           okText: 'OK',
           cancelText: 'Cancel',
           onOk: () => {
-            this.handleDelete(this.selectedRowKeys[0])
+            this.handleDelete(this.selectedRowKeys[0], 'sampleId')
           }
         })
       } else {
         this.$message.warn('Please Select An Item To Delete')
       }
     }
+  },
+  computed: {
+    formItems() {
+      return [
+        {
+          label: 'SampleID',
+          type: 'a-input',
+          name: 'sampleID',
+          span: 4
+        },
+        {
+          label: 'Station',
+          type: 'custom-select',
+          name: 'stationId',
+          props: {
+            options: [
+              {
+                label: 'ALL',
+                value: ''
+              },
+              ...this.stationList
+            ],
+            showSearch: true,
+            filterOption: this.filterOption
+          },
+          span: 4
+        },
+        {
+          label: 'Detector',
+          type: 'custom-select',
+          name: 'detectorId',
+          props: {
+            options: [
+              {
+                label: 'ALL',
+                value: ''
+              },
+              ...this.detectorList
+            ],
+            showSearch: true,
+            filterOption: this.filterOption
+          },
+          span: 4
+        },
+        {
+          label: 'From',
+          type: 'a-date-picker',
+          name: 'from',
+          props: {
+            showTime: { format: 'HH:mm' },
+            format: 'YYYY-MM-DD HH:mm'
+          }
+        },
+        {
+          label: 'To',
+          type: 'a-date-picker',
+          name: 'to',
+          props: {
+            showTime: { format: 'HH:mm' },
+            format: 'YYYY-MM-DD HH:mm'
+          },
+          style: {
+            paddingRight: 0
+          }
+        },
+        {
+          label: '',
+          type: 'a-checkbox-group',
+          props: {
+            options: [
+              { label: 'Collect Stop', value: 'collectStop' },
+              { label: 'Acq.Start', value: 'acqDotStart' },
+              { label: 'SampleData', value: 'sampleData' },
+              { label: 'AutoResults', value: 'autoResults' },
+              { label: 'Reviewed Results', value: 'reviewedResults' }
+            ]
+          },
+          style: {
+            width: '600px'
+          }
+        }
+      ]
+    }
   }
 }
 </script>