1

src/views/system/securityCheck/views/cargoRelevanceTable.vue

@@ -12,7 +12,16 @@
       />
     </header>
     <main>
+      <div class="conten">
+        <div class="log_cont">
+          <div class="cont" v-for="(item, index) in treeTitles" :key="index" @click="ups(item, index)">
+            <div :class="active == index ? 'log_types' : 'log_type'">{{ item.name }}</div>
+          </div>
+        </div>
+        <span>{{ active == 1 ? '单位：件' : '单位：千克' }}</span>
+      </div>
       <SecurityCheckTable
+        style="height: 700px"
         id="1"
         :footerDate="footerDate"
         :table-cols="tableCols"
@@ -30,7 +39,7 @@
 <script>
 import SecurityCheckHeader from '../components/securityCheckHeader.vue'
 import SecurityCheckTable from '../components/securityCheckTable.vue'
-import { agent, routeall } from '@/api/statistics/statistics.js'
+import { agent, routeall, agentPiece } from '@/api/statistics/statistics.js'
 import XLSX from 'xlsx'
 import FileSaver from 'file-saver'
 export default {
@@ -40,6 +49,16 @@ export default {
       destination: [],
       loading: false,
       tableHeight: '550',
+      Company: '件',
+      active: 0,
+      treeTitles: [
+        {
+          name: '重量',
+        },
+        {
+          name: '件数',
+        },
+      ],
       tableCols: [
         {
           title: '目的地',
@@ -276,6 +295,11 @@ export default {
     window.removeEventListener('resize', this.setTableHeight)
   },
   methods: {
+    //切换单位
+    ups(item, index) {
+      this.active = index
+      this.getData()
+    },
     async exportex() {
       // let that = this;
       // this.$confirm({
@@ -365,7 +389,7 @@ export default {
     async getData() {
       try {
         this.loading = true
-        const result = await agent(this.FormData)
+        const result = this.active == 0 ? await agent(this.FormData) : await agentPiece(this.FormData)
         if (result.status === 200) {
           this.tableData = result.data
           this.tableData.forEach((item) => {
@@ -475,6 +499,49 @@ export default {
 <style lang="scss" scoped>
 .table-wrapper {
   padding: 0 24px;
+  .conten {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 2px;
+    .log_cont {
+      width: 80px;
+      height: 32px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: #101116;
+      border-radius: 4px;
+      color: #ffffff;
+      border: 2px solid #101116;
+      > .cont {
+        width: 50%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        .log_type {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+        }
+        .log_types {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background: #ffffff;
+          color: #101116;
+          cursor: pointer;
+        }
+      }
+    }
+  }
   // background: #dfe3ea;
   .table-header-wrapper {
     // padding-top: 24px;