更新数据

mh-two-thousand-and-two

2024-04-16 d4211fd96865e58217d63efaf4d8f6609fb24ae6

 src/pages/knowledgeBase/knowledgeBase.vue

@@ -1,7 +1,7 @@
<template>
   <view>
      <!-- 顶部 -->
      <headNav text="中国医学人物知识库"/>
      <headNav idIndex="0" text="中国医学人物知识库" />
      <!-- 搜索 -->
      <view class="flex  flex-center Search">
         <!-- <luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search> -->
@@ -17,7 +17,8 @@
                :style="{color:item.bgColor==true?'#5879a4':'#000'}">
                {{item.name}}
             </li>-->
            <li v-for="item in hot" @click="hotSearchClick(item)" :key="item.id" class="cursor" style="color: #5879a4;">
            <li v-for="item in hot" @click="hotSearchClick(item)" :key="item.id" class="cursor"
               style="color: #5879a4;">
               {{item.name}}
            </li>
         </ul>
@@ -30,27 +31,30 @@
         </view>
      </view>
      <uni-row class="demo-uni-row zhushuju flex flex-items-start" style="padding: 0 230rpx; ">
         <uni-col :span="5" class="fbox">
         <!-- 左侧 -->
         <view class="fbox2" style="width: 2.6rem;">
            <!-- 职业 -->
            <view class="demo-uni-col zhiye dark box boox" 
               style="margin-bottom: 40rpx;background-color: #fff; border: 2rpx solid #e0e0e0;">
               style="width: 2.6rem; margin-bottom: 40rpx;background-color: #fff; border: 2rpx solid #e0e0e0;min-height: 2rem;">
               <h3>{{profession.title}}</h3>
               <ul style="margin-top: 10rpx;"  :class="{ 'a': activeBox === 'a'?'a':'' }">
                  <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                  <li class="flex"
                     :style="{'background':profession.index === index ?  '#d6e3f4' :'','borderRadius': profession.index === index ?  '60rpx' :''}"
                     v-for="(item,index) in profession.list" :key="index" style="padding:0 20rpx;" @click="handInstitCLick(index,'a')">
                     <view class="">{{item.name}}</view>
                     <view class="">{{item.number}}</view>
                     :style="{'background':profession.index === item.tagId ?  '#d6e3f4' :'','borderRadius': profession.index === item.tagId ?  '60rpx' :'',display:index+1>professionIndex?'none':'flex'}"
                     v-for="(item,index) in profession.list" :key="index"
                     style="padding:0 20rpx;line-height: .3rem;height: .3rem;"
                     @click="handInstitCLick(item,'a')">
                     <view class="">{{item.tagName}}</view>
                     <view class="">{{item.count}}</view>
                  </li>
               </ul>
               <view v-if="profession.list.length-1 >3" class="flex flex-center toggleButton1">
                  <view class="toggleButton" style="color: #C1D3EA;" @click="shrinkClick('a')">
               <view v-if="profession.list.length-1 >3" class="flex flex-center ">
                  <view class="toggleButton" style="color: #C1D3EA;" @click="shrinkClick('a','职业')">
                     {{ activeBox !== 'a' ? '更多  ﹀' : '收起  ︿' }}
                  </view>
               </view>
            </view>
            <!-- 世代 -->
            <!-- 时期 -->
            <view class="demo-uni-col dark box boox zhongjianleft"
               style="background-color: #fff;border: 2rpx solid #e0e0e0;"
               :style="{'marginBottom': isAdvancedSearch ===true ? '0': '40rpx'}">
@@ -58,14 +62,15 @@
               <ul style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }">
                  <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                  <li class="flex"
                     :style="{'background':dynasty.index === index ?  '#d6e3f4' :'','borderRadius': dynasty.index === index ?  '60rpx' :''}"
                     v-for="(item,index) in dynasty.list" :key="index" style="padding:0 20rpx;" @click="handInstitCLick(index,'b')">
                     <view class="">{{item.name}}</view>
                     <view class="">{{item.number}}</view>
                     :style="{'background':dynasty.index === item.dynastyId ?  '#d6e3f4' :'','borderRadius': dynasty.index === item.dynastyId ?  '60rpx' :'',display:index+1>dynastyIndex?'none':'flex'}"
                     v-for="(item,index) in dynasty.list" :key="index" style="padding:0 20rpx;"
                     @click="handInstitCLick(item,'b')">
                     <view class="">{{item.dynastyName}}</view>
                     <view class="">{{item.count}}</view>
                  </li>
               </ul>
               <view v-if="dynasty.list.length-1 >3" class="flex flex-center toggleButton1">
                  <view class="toggleButton" style="color: #C1D3EA;" @click="shrinkClick('b')">
               <view v-if="dynasty.list.length-1 >3" class="flex flex-center ">
                  <view class="toggleButton" style="color: #C1D3EA;" @click="shrinkClick('b','时期')">
                     {{ activeBox !== 'b' ? '更多  ﹀' : '收起  ︿' }}
                  </view>
               </view>
@@ -77,38 +82,45 @@
               <ul class="laiyuan" style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }">
                  <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                  <li class="flex liClick" v-for="(item,index) in source.list" :key="index"
                     style="padding:0 20rpx;color: #244A7B;">
                     <view class="">{{ index+1 + '. '  +item.name}}</view>
                     <view class="">{{item.number}}</view>
                     style="padding:0 20rpx;color: #244A7B;" @click="handInstitCLick(item,'c')">
                     <view class="">{{ index+1 + '. '  +item.source}}</view>
                  </li>
               </ul>
               <!--    <view class="flex flex-center">
                  <view class="toggleButton" style="font-size: 25rpx;color: #C1D3EA;" @click="shrinkClick('b')">
                     {{ activeBox !== 'b' ? '更多  ﹀' : '收起  ︿' }}</view>
                        {{ activeBox !== 'b' ? '更多  ﹀' : '收起  ︿' }}
                     </view>
               </view> -->
            </view>
         </uni-col>
         <uni-col :span="19" class="rightList">
            <view class="demo-uni-col light fbox1"
               style=" background-color: #fff;border: 1px solid   #e0e0e0;padding: 10rpx 20rpx;">
               <view class="flex lightTop" style="margin:10rpx 0">
         </view>
         <!-- 右侧 -->
         <view class="rightList demo-uni-col light fbox3 relative flex flex-column flex-grow: 1;"
            style="width: 100%; margin-left: .2rem; background-color: #fff;border: 1px solid   #C1D3EA;padding: 10rpx 20rpx;">
            <view class="flex lightTop" style="width: 100%; margin:.1rem 0">
                  <view class="" style="color: #2C2C2C;">共1374条</view>
                  <el-button>下载</el-button>
               <el-button size="small" @click="exportClick">下载</el-button>
               </view>
               <el-table :data="tableData" class="lightBo" style="width: 100%">
                  <el-table-column prop="serialNumber" label="序号" width="110"></el-table-column>
                  <el-table-column prop="name" label="姓名"></el-table-column>
                  <el-table-column prop="another" label="别名"></el-table-column>
               <el-table-column prop="id" label="序号" width="110"></el-table-column>
               <el-table-column prop="personName" label="姓名"></el-table-column>
               <el-table-column prop="personAlias" label="别名"></el-table-column>
                  <el-table-column prop="gender" label="性别" width="70"></el-table-column>
                  <el-table-column prop="epoch" label="时期"></el-table-column>
                  <el-table-column prop="year" label="生年" width="130"></el-table-column>
                  <el-table-column prop="death" label="卒年" width="130"></el-table-column>
               <el-table-column prop="period" label="时期"></el-table-column>
               <el-table-column prop="birthYear" label="生年" width="130"></el-table-column>
               <el-table-column prop="deathYear" label="卒年" width="130"></el-table-column>
                  <el-table-column prop="nativePlace" label="籍贯"></el-table-column>
                  <el-table-column prop="socialIdentity" label="社会身份"></el-table-column>
                  <el-table-column prop="officialPosition" label="官职"></el-table-column>
               <el-table-column prop="socialDistinction" label="社会身份"></el-table-column>
               <el-table-column prop="official" label="官职"></el-table-column>
               </el-table>
            <!-- 分页 -->
            <el-row class="fenye" style="position: absolute;bottom: .1rem;">
               <el-pagination class="paging flex" :current-page="CurrentPage" :total="total" :page-size="pageSize"
                  @current-change="CurrentChange" @prev-click="PrevClick" @next-click="NextClick" prev-text="上一页"
                  next-text="下一页" background layout="prev, pager, next">
               </el-pagination>
            </el-row>
            </view>
         </uni-col>

      </uni-row>
      <div class="abox"></div>
      <Footer1 />
@@ -118,6 +130,14 @@
<script>
   import Footer1 from '@/components/footer/footer'
   import MyForm from '@/components/form/form.vue'
   // 下载需要导入的依赖
   import ExportJsonExcel from "js-export-excel";
   import {
      getPDataStatistics,
      getPDownload,
      getPList,
      getHotSearch
   } from '@/api/index.js'
   export default {
      components: {
         Footer1,
@@ -151,7 +171,7 @@
                     type: 'select',
                     label: '职业',
                     value: '',
                     name: 'occupation',
                     name: 'tagId',
                     options: [{
                           label: '医家',
                           value: '1'
@@ -165,28 +185,31 @@
                  {
                     type: 'input',
                     label: '职官',
                     name: 'officials',
                     name: 'official',
                     value: ''
                  },
                  {
                     type: 'select',
                     label: '性别',
                     value: '',
                     name: 'sex',
                     name: 'genderType',
                     options: [{
                           label: '未指明',
                           value: 'UNKNOWN'
                        }, {
                           label: '男',
                           value: '男'
                           value: 'MALE'
                        },
                        {
                           label: '女',
                           value: '女'
                           value: 'WOMAN'
                        }
                     ]
                  },
                  {
                     type: 'input',
                     label: '时期',
                     name: 'time',
                     name: 'dynasty',
                     value: ''
                  },
                  {
@@ -197,147 +220,190 @@
                  }
               ]
            },

            // 热门搜索
            hot: [{
               id: 1,
               name: '李时珍',
               bgColor: false
            }, {
               id: 2,
               name: '李时珍2',
               bgColor: false
            }, {
               id: 3,
               name: '李时珍3',
               bgColor: false
            }, ],
            hot: [],
            // 职业
            profession: {
               title: '职业',
               index: 0,
               list: [{
                     name: '全部',
                     id: 1,
                     number: 829
               id: 0,
               list: []
                  },
                  {
                     name: '医家',
                     id: 2,
                     number: 90
                  }, {
                     name: '世医',
                     id: 3,
                     number: 81
                  }, {
                     name: '宫廷医',
                     id: 4,
                     number: 83
                  },{
                     name: '宫廷医1',
                     id: 5,
                     number: 83
                  },
               ]
            },
            // 现在多少条职业数据
            professionIndex: 4,
            // 展开和收缩的按钮需要
            activeBox: null,
            // 世代
            // 时期
            dynasty: {
               title: '时期',
               id: 0,
               index: 0,
               list: [{
                     name: '全部',
                     id: 1,
                     number: 829
               list: []
                  },
                  {
                     name: '唐',
                     id: 2,
                     number: 90
                  }, {
                     name: '宋',
                     id: 3,
                     number: 81
                  }, {
                     name: '元',
                     id: 4,
                     number: 83
                  },
               ]
            },
            // 现在多少条时期数据
            dynastyIndex: 4,
            // 来源
            source: {
               title: '来源',
               list: [{
                  name: '中国K小制应薛典',
                  id: 1
               }, {
                  name: '中医医事大会',
                  id: 2
               }, {
                  name: '中国医中制度研究',
                  id: 3
               }, ]
               index: 0,
               id: 0,
               list: []
            },
            tableData: [{
               serialNumber: 1,
               name: '王小虎',
               another: '小虎',
               gender: '男',
               epoch: '唐代',
               year: 1234,
               death: 1332,
               nativePlace: '河北',
               socialIdentity: '世医',
               officialPosition: '院判'
            }, {
               serialNumber: 2,
               name: '王w小虎',
               another: 'w小虎',
               gender: 'w男',
               epoch: '唐w代',
               year: 1234,
               death: 1332,
               nativePlace: '河北',
               socialIdentity: '世医',
               officialPosition: '院判'
            }, {
               serialNumber: 1,
               name: '王小虎',
               another: '小虎',
               gender: '男',
               epoch: '唐代',
               year: 1234,
               death: 1332,
               nativePlace: '河北',
               socialIdentity: '世医',
               officialPosition: '院判'
            }]
            // 表格的数组
            tableData: [],
            // 分页的总数
            total: 100,
            // 当前页
            CurrentPage: 1,
            // 一页显示多少条数据
            pageSize: 6,
            dataTable: [],
            option: {}
         }
      },
      onLoad(options) {
         this.onSearch({text:options.name})
      },
      mounted() {
         // 修改两次的高度保持一致
         var box1Height = document.querySelector('.fbox').offsetHeight;
         document.querySelector('.fbox1').style.height = box1Height + 'px';
         var box1Height = document.querySelector('.fbox2').offsetHeight;
         document.querySelector('.fbox3').style.height = box1Height + (box1Height / 18) + 'px';
         console.log(box1Height, 'box1Height');
         this.getStatistics()
         // 默认先调用搜索一次
         this.onSearch('')
      },
      methods: {
         // ExportJsonExcel实例
         Ture() {
            //   创建ExportJsonExcel实例对象
            let toExcel = new ExportJsonExcel(this.option);
            //   调用保存方法
            toExcel.saveExcel();
         },
         // 下载按钮
         exportClick() {
            const dataList = this.tableData;
            let dataTable = []; //   dataTable代表excel文件中的数据内容
            if (dataList) {
               for (let i in dataList) {
                  let obj = {
                     序号: dataList[i].id,
                     姓名: dataList[i].personName,
                     别名: dataList[i].personAlias,
                     性别: dataList[i].gender,
                     时期: dataList[i].period,
                     生年: dataList[i].birthYear,
                     卒年: dataList[i].deathYear,
                     籍贯: dataList[i].nativePlace,
                     社会身份: dataList[i].socialDistinction,
                     官职: dataList[i].official,
                  };

                  dataTable.push(obj); //   设置excel每列获取的数据源
               }
            }
            this.option.fileName = "中医医学人物知识库"; //excel文件名
            //excel文件数据
            this.option.datas = [{
               //   excel文件的数据源
               sheetData: dataTable,
               //   excel文件sheet的表名
               sheetName: "sheet",
               //   excel文件表头名
               sheetHeader: ["序号", "姓名", "别名", "性别", "别名", "时期", "生年", "卒年", "籍贯", "社会身份", "官职"],
               //   excel文件列名
               sheetFilter: ["序号", "姓名", "别名", "性别", "别名", "时期", "生年", "卒年", "籍贯", "社会身份", "官职"],
               // columnWidths: ['10', '10', '20'] //excel列宽度设置
            }, ];
            this.Ture();
         },
         // 接口
         async getStatistics() {
            // 热门搜索
            await getHotSearch().then(res => {
               console.log(res, '热门搜索');
               this.hot = Object.keys(res.object).map(key => {
                  return {
                     id: parseInt(key),
                     name: res.object[key]
                  };
               })
            })
            // 右侧职业、时期、来源的数据
            await getPDataStatistics().then(res => {
               console.log(res, '接口成功sdsdfsdsfs');
               let totalCount1 = res.object.occupationStatistic.details.reduce((total, item) => total +
                  item.count, 0);
               let totalCount2 = res.object.dynastyStatistic.details.reduce((total, item) => total + item
                  .count, 0);
               // 职业
               this.profession.list = [
                  ...res.object.occupationStatistic.details,
               ]
               // 高级搜索里面的职业--------------------------------------------------
               // 找到职业字段在 from 对象中的索引
               const professionIndex = this.from.from.findIndex(field => field.label === '职业');
               // 如果找到了职业字段
               if (professionIndex !== -1) {
                  // 将 profession.list 转换为 options 格式
                  const options = this.profession.list.map(item => ({
                     label: item.tagName,
                     value: item.tagId.toString() // 将 id 转换为字符串，确保与 value 类型一致
                  }));

                  // 更新职业字段的 options 属性
                  this.$set(this.from.from[professionIndex], 'options', options);
               }
               // --------------------------------------------------
               this.profession.index = this.profession.list[0].tagId
               // 时期
               this.dynasty.list = [
                  ...res.object.dynastyStatistic.details
               ]
               // 来源
               this.source.list = res.object.sourceStatistic.details
               this.source.index = this.source.list[0].bookId
            })
         },
         // 热门搜索
         hotSearchClick(item){
            console.log(item);
            this.onSearch({text:item.name})
            console.log(item, '热门搜索');
         },
         // 左侧的机构统计等等按钮
         handInstitCLick(index, name) {
         handInstitCLick(item, name) {
            this.dynasty.id = 0
            this.source.id = 0
            this.profession.id = 0
            this.CurrentPage = 1
            if (name == 'a') {
               this.profession.index = index
               this.profession.index = item.tagId
               this.profession.id = item.tagId
               this.CurrentPage = 1

            }else if(name == 'b'){
                  this.dynasty.index = index
               this.dynasty.index = item.dynastyId
               this.dynasty.id = item.dynastyId
               this.CurrentPage = 1
               console.log(item);

            } else if (name == 'c') {
               this.source.index = item.bookId
               this.source.id = item.bookId
               this.CurrentPage = 1
               console.log('来源');

            }
            console.log(index, name);
            this.onSearch('')


            console.log(item, name);
         },
         isAvancedClick() {
            this.isAdvancedSearch = !this.isAdvancedSearch
            this.$nextTick(() => {

               var box1Height = document.querySelector('.fbox').offsetHeight;
               // let box2Height= document.querySelector('.fbox1').style.height = box1Height + 'px';
               let box2Height = document.querySelector('.fbox1').offsetHeight
@@ -347,12 +413,64 @@
               }
            })
         },
         onSubmit(val) {
         // 高级搜索
         async onSubmit(val) {
            console.log(val);
            this.CurrentPage = 1
            let Obj = {
               "keywords": '', //搜索框检索
               "name": val.name, //姓名
               "alias": val.alias, //别名
               "nativePlace": val.nativePlace, //机关
               "tagId": val.tagId !== '' ? val.tagId : null, //职业id
               "official": val.official, //职官
               "genderType": val.genderType !== '' ? val.genderType : null, //性别
               "dynasty": val.dynasty, //朝代id
               "dynastyId": null, //朝代id
               "institution": val.institution, //机构
               "bookId": null, //来源id
               "page": this.CurrentPage,
               "pageSize": this.pageSize
            }
            // // 搜索
            await getPList(Obj).then(res => {
               console.log(res);
               if (res.success) {
                  console.log(res, '搜索接口');
                  this.tableData = res.list
                  // 总数量
                  this.total = res.npage.totalCount
               }
            })
            console.log(val);
         },
         onSearch(val) {

            console.log(val);
         // 基础搜索
         async onSearch(val) {
            let Obj = {
               "keywords": val.text, //搜索框检索
               "name": "", //姓名
               "alias": "", //别名
               "nativePlace": "", //机关
               "tagId": this.profession.id, //职业id
               "official": "", //职官
               "genderType": null, //性别
               "dynasty": null, //朝代id
               "dynastyId": this.dynasty.id, //朝代id
               "institution": "", //机构
               "bookId": this.source.id, //来源id
               "page": this.CurrentPage,
               "pageSize": this.pageSize
            }
            // // 搜索
            await getPList(Obj).then(res => {
               if (res.success) {
                  console.log(res, '搜索接口');
                  this.tableData = res.list
                  // 总数量
                  this.total = res.npage.totalCount
               }
            })
            // console.log(val, '士大夫但是');
         },
         // 热门搜索
         HotClick(id) {
@@ -368,22 +486,171 @@

         },
         // 展开收缩
         shrinkClick(box) {
         shrinkClick(box, name) {
            console.log(box);
            if (this.activeBox === box) {
               this.activeBox = null;
            console.log(this.dynasty.list);

            // this.activeBox = this.activeBox === 'a' ? null : 'a';
            if (name == '职业') {
               console.log('职业');
               this.professionIndex = this.professionIndex < this.profession.list.length ? this.profession.list
                  .length : 4;
               this.dynastyIndex = 4
               this.activeBox = this.activeBox === 'a' ? null : 'a';
            } else {
               this.activeBox = box;
               console.log('时期');
               this.dynastyIndex = this.dynastyIndex < this.dynasty.list.length ? this.dynasty.list.length : 4;
               this.professionIndex = 4
               this.activeBox = this.activeBox === 'b' ? null : 'b';
            }
         },
         // 分页当前页触发事件
         CurrentChange(val) {
            if (this.CurrentPage != val) {
               this.CurrentPage = val
               console.log('当前页', val);
               this.onSearch('')
            }
         },
         // 上一页
         PrevClick(val) {
            if (this.CurrentPage != val) {
               this.CurrentPage = val
               // console.log('上一页', val);
               // console.log(this.CurrentPage);
               this.onSearch('')
            }
         },
         // 下一页
         NextClick(val) {
            if (this.CurrentPage != val) {
               // console.log('下一页',val);
               this.CurrentPage = val
               // console.log(this.CurrentPage);
               this.onSearch('')
            }
         }
      }
   }
</script>

<style>
<style scoped>
   /* 表头 */
   ::v-deep .el-table__header {
      margin-bottom: .02rem;
   }

   ::v-deep .has-gutter tr>th {
      background-color: #DDE8F6 !important;
      font-weight: normal;

   }

   ::v-deep .el-table__header th {
      height: .3rem;
      line-height: .3rem;
      font-size: .14rem;
      color: #2C2C2C;
      /* 表头文字颜色为白色，增加对比度 */
      margin-bottom: .02rem !important;
   }

   ::v-deep .el-table::before {
      border: 0;
      background-color: #fff;
   }

   /* 表格 */
   ::v-deep .el-table__body td {
      height: .3rem;
      line-height: .3rem;
      font-size: .14rem;
      color: #2C2C2C !important;
      font-weight: normal;
   }

   .abox{
      height: 1rem;
   }

   /* 分页 */
   .paging ::v-deep .btn-prev,
   .paging ::v-deep .btn-next {
      border: 0;
   }

   .paging ::v-deep .btn-prev span,
   .paging ::v-deep .btn-next span {
      font-size: .12rem;
      height: .3rem;
      line-height: .3rem;
      background-color: #fff;
      color: #9E9E9E;
      text-align: center;
      border: 1px solid #9E9E9E;
      padding: 0 .1rem;
   }

   .paging ::v-deep .el-pager li {
      font-size: .1rem;
      width: .28rem;
      height: .3rem;
      line-height: .3rem;
      background-color: #fff;
      color: #9E9E9E;
      text-align: center;
      border: 1px solid #9E9E9E;
   }

   /* -------------- */
   /* 右侧 */
   .rightList {
      padding-left: .2rem !important;

      .light {
         padding: .1rem .2rem !important;
      }

      .lightTop {
         font-size: .14rem !important;
      }

      .el-button {
         font-size: .12rem !important;
         padding: .05rem .18rem !important;
      }

      .lightBo {
         font-size: .14rem !important;

         .is-leaf {
            background-color: #C1D3EA !important;
            color: #2C2C2C !important;
            font-weight: 400;

            .cell {

               height: .3rem !important;
               line-height: .3rem !important;
            }
         }
      }

      .el-table__body-wrapper {
         .el-table__row {
            height: .46rem !important;
            line-height: .46rem !important;

            .cell {

               height: .3rem !important;
               line-height: .3rem !important;
            }
         }

      }
   }

   @media screen and (min-width:2560px)and (max-width:3840px) {

      /* 搜索 */
@@ -550,6 +817,7 @@
               background-color: #C1D3EA !important;
               color: #2C2C2C !important;
               font-weight: 400;

               .cell{
                  
               height: .3rem !important;
@@ -562,6 +830,7 @@
            .el-table__row {
               height: .46rem !important;
               line-height: .46rem !important;

               .cell{
                  
               height: .3rem !important;
@@ -599,7 +868,9 @@
            margin: 0 .1rem;
         }
      }

      .advancedSeaTrue1{
         border: 1px solid #C1D3EA;
      }
      .advancedSeaTrue,
      .zhushuju {
         padding: 0 1.24rem !important;
@@ -717,6 +988,7 @@
      /* -------------------- */
/* 右侧 */
      .rightList {
         width: 100%;
         padding-left: .2rem !important;

         .light {
@@ -739,6 +1011,7 @@
               background-color: #C1D3EA !important;
               color: #2C2C2C !important;
               font-weight: 400;

               .cell{
                  
               height: .3rem !important;
@@ -751,6 +1024,7 @@
            .el-table__row {
               height: .46rem !important;
               line-height: .46rem !important;

               .cell{
                  
               height: .3rem !important;
@@ -776,13 +1050,13 @@
      }
   }

   .a {
   /*    .a {
      height: 2rem;
   }

   .b {
      height: 100px;
   }
   } */

   .box {
      transition: height 0.3s;
@@ -792,20 +1066,45 @@

   }

   /* 左边的 */
   .boox {
      width: 100%;
      padding: .1rem .09rem;
      min-height: 2rem !important;
      position: relative;
      border: 1px solid #c1d3ea !important;

      ul {
         margin-top: .16rem !important;
      }

      h3 {
         font-size: .14rem;
         margin-left: .1rem;
      }

      li {
         height: .3rem;
         line-height: .3rem;
         padding: 0 .2rem !important;
         margin: .05rem 0 !important;
         border-radius: .3rem !important;
         font-size: .14rem;
      }

      .toggleButton1 {
         position: absolute;
         bottom: .1rem !important;
         left: 40% !important;
      }

      .toggleButton {
         font-size: .14rem !important;
      }
   }

   ::v-deep .el-table th,
   ::v-deep .el-table td {
      text-align: center;
   }

   ::v-deep .has-gutter tr>th {
      background-color: #DDE8F6 !important;
   }
</style>