Merge branch 'master' of http://182.92.203.7:2001/r/TCM_CharacterLibrary

杨磊

2024-07-26 2b06902e25978254f39bef49ed3cf6b1cab1c033

 src/pages/knowledgeBase/knowledgeBase.vue

@@ -1,1056 +1,1284 @@
<template>
   <view>
      <!-- 顶部 -->
      <headNav idIndex="0" text="中国医学人物知识库" />
      <!-- 搜索 -->
      <view class="flex  flex-center Search">
         <!-- <luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search> -->
         <advancedSearch @onSearch="onSearch" placehold="输入姓名/别名/时期/传主职业搜索" :isAvancedTrue="false" />
         <view class="advancedSea" @click="isAvancedClick" style="color:#244A7B ;cursor: pointer;">高级搜索 ﹀</view>
      </view>
      <!-- 热门搜索 -->
      <view class="flex flex-center hotSearch" style="font-size: 20rpx;margin: 10rpx 0;">
         热门搜索：
         <ul class="flex" style="margin-right: 10rpx;">
            <!-- 
             <li v-for="item in hot" :key="item.id" @tap="HotClick(item.id)" style="margin: 0 10rpx;"
                :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;">
               {{item.name}}
            </li>
         </ul>
      </view>
      <!-- 高级搜索 -->
      <view class="advancedSeaTrue" v-if="isAdvancedSearch" style="padding: 0 230rpx; margin-bottom: .18rem;">
         <view style="background-color: #fff;padding: 20rpx;" class="advancedSeaTrue1">
            <h3>高级搜索</h3>
            <MyForm @submit="onSubmit" :from="from" />
         </view>
      </view>
      <uni-row class="demo-uni-row zhushuju flex flex-items-start" style="padding: 0 230rpx; ">
         <!-- 左侧 -->
         <view class="fbox2" style="width: 2.6rem;">
            <!-- 职业 -->
            <view class="demo-uni-col zhiye dark box boox"
               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 === 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 ">
                  <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'}">
               <h3>{{dynasty.title}}</h3>
               <ul style="margin-top: 10rpx;" :class="{ 'b': activeBox === 'b'?'b':'' }">
                  <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
                  <li class="flex"
                     :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 ">
                  <view class="toggleButton" style="color: #C1D3EA;" @click="shrinkClick('b','时期')">
                     {{ activeBox !== 'b' ? '更多  ﹀' : '收起  ︿' }}
                  </view>
               </view>
            </view>
            <!-- 来源 -->
            <view v-if="!isAdvancedSearch" class="demo-uni-col dark box boox"
               style="height: 250rpx;background-color: #fff;border: 2rpx solid #e0e0e0;">
               <h3>{{source.title}}</h3>
               <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;" @click="handInstitCLick(item,'c')">
                     <view class="">{{ index+1 + '. '  +item.source}}</view>
                  </li>
               </ul>
               <!--    <view class="flex flex-center">
  <view>
    <!-- 顶部 -->
    <headNav idIndex="0" text="中国历代医学人物知识库" />
    <!-- 搜索 -->
    <view class="flex flex-center Search">
      <!-- <luanqing-search class="search_bar" @onSearch="onSearch"></luanqing-search> -->
      <advancedSearch
        @onSearch="onSearch"
        placehold="输入姓名/别名/时期/传主职业搜索"
        :isAvancedTrue="false"
        :keyword="keywords"
      />
      <view
        class="advancedSea"
        @click="isAvancedClick"
        style="color: #244a7b; cursor: pointer"
        >高级搜索 {{ isAdvancedSearch ? "∧" : "∨" }}</view
      >
    </view>
    <!-- 热门搜索 -->
    <view
      class="flex flex-center hotSearch"
      style="font-size: 20rpx; margin: 10rpx 0"
    >
      热门搜索：
      <ul class="flex" style="margin-right: 10rpx">
        <li
          v-for="(item, index) in hot"
          @click="hotSearchClick(item, index)"
          :key="item.id"
          :class="{ cursor: true, active: hotAciveIndex === index }"
          style="color: #244a7b"
        >
          {{ item.name }}
        </li>
      </ul>
    </view>
    <!-- 高级搜索 -->
    <view
      class="advancedSeaTrue"
      v-if="isAdvancedSearch"
      style="padding: 0 230rpx; margin-bottom: 0.18rem"
    >
      <view
        style="background-color: #fff; padding: 20rpx"
        class="advancedSeaTrue1"
      >
        <h3>高级搜索</h3>
        <MyForm @submit="onSubmit" @reset="resetForm" :from="from" />
      </view>
    </view>
    <uni-row
      class="demo-uni-row zhushuju flex flex-items-start"
      style="padding: 0 230rpx"
    >
      <!-- 左侧 -->
      <view class="fbox2" style="width: 2.6rem">
        <!-- 职业 -->
        <view
          class="demo-uni-col zhiye dark box boox"
          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' : '' }"
          >
            <li
              class="flex"
              :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: 0.3rem; height: 0.3rem"
              @click="handInstitCLick(item, 'a')"
            >
              <view>{{ item.tagName }}</view>
              <view>{{ item.count }}</view>
            </li>
          </ul>
          <view v-if="profession.list.length - 1 > 3" class="flex flex-center">
            <view
              class="toggleButton"
              style="color: #244a7b"
              @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' }"
        >
          <h3>{{ dynasty.title }}</h3>
          <ul
            style="margin-top: 10rpx"
            :class="{ b: activeBox === 'b' ? 'b' : '' }"
          >
            <!-- background-color: #d6e3f4;border-radius: 60rpx; -->
            <li
              class="flex"
              :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>{{ item.dynastyName }}</view>
              <view>{{ item.count }}</view>
            </li>
          </ul>
          <view v-if="dynasty.list.length - 1 > 3" class="flex flex-center">
            <view
              class="toggleButton"
              style="color: #244a7b"
              @click="shrinkClick('b', '时期')"
            >
              {{ activeBox !== "b" ? "更多  ∨" : "收起  ∧" }}
            </view>
          </view>
        </view>
        <!-- 来源 -->
        <view
          v-if="!isAdvancedSearch"
          class="demo-uni-col dark box boox"
          style="
            /* height: 250rpx; */
            background-color: #fff;
            border: 2rpx solid #e0e0e0;
          "
        >
          <h3>{{ source.title }}</h3>
          <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"
              @click="handInstitCLick(item, 'c')"
            >
              <view>{{ 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' ? '更多  ﹀' : '收起  ︿' }}
                        {{ activeBox !== 'b' ? '更多  ∨' : '收起  ∧' }}
                     </view>
                  </view> -->
            </view>
         </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 size="small" @click="exportClick">下载</el-button>
            </view>
            <el-table :data="tableData" class="lightBo" style="width: 100%">
               <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="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="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-row>
      <div class="abox"></div>
      <Footer1 />
   </view>
        </view>
      </view>
      <!-- 右侧 -->
      <view
        class="rightList demo-uni-col light fbox3 relative flex flex-column flex-grow: 1;"
        style="
          width: 100%;
          margin-left: 0.2rem;
          background-color: #fff;
          border: 1px solid #c1d3ea;
          padding: 10rpx 20rpx;
        "
      >
        <view class="flex lightTop" style="width: 100%; margin: 0.1rem 0">
          <view style="color: #2c2c2c">共{{ total }}条</view>
          <el-button size="small" @click="exportClick">下载</el-button>
        </view>
        <el-table
          :data="tableData"
          class="lightBo"
          style="width: 100%"
          empty-text="暂无搜索信息"
        >
          <el-table-column prop="id" label="序号" width="110"></el-table-column>
          <el-table-column prop="personName" label="姓名">
            <template slot-scope="scope">
              <a
                style="cursor: pointer; color: #027edc"
                @click="gotoDetail(scope.row.id)"
                >{{ scope.row.personName }}</a
              >
            </template>
          </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="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="socialDistinction"
            label="社会身份"
          ></el-table-column>
          <el-table-column prop="official" label="官职"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row class="fenye">
          <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-row>
    <div class="abox"></div>
    <Footer1 />
  </view>
</template>

<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,
         MyForm
      },
      data() {
         return {
            // 高级搜索显示
            isAdvancedSearch: false,
            // 高级搜索
            from: {
               from: [{
                     type: 'input',
                     label: '姓名',
                     name: 'name',
                     value: ''
                  },
                  {
                     type: 'input',
                     label: '别名',
                     name: 'alias',
                     value: ''
                  },
                  {
                     type: 'input',
                     label: '籍贯',
                     name: 'nativePlace',
                     value: ''
                  },
                  {
                     type: 'select',
                     label: '职业',
                     value: '',
                     name: 'tagId',
                     options: [{
                           label: '医家',
                           value: '1'
                        },
                        {
                           label: '世家',
                           value: '2'
                        }
                     ]
                  },
                  {
                     type: 'input',
                     label: '职官',
                     name: 'official',
                     value: ''
                  },
                  {
                     type: 'select',
                     label: '性别',
                     value: '',
                     name: 'genderType',
                     options: [{
                           label: '未指明',
                           value: 'UNKNOWN'
                        }, {
                           label: '男',
                           value: 'MALE'
                        },
                        {
                           label: '女',
                           value: 'WOMAN'
                        }
                     ]
                  },
                  {
                     type: 'input',
                     label: '时期',
                     name: 'dynasty',
                     value: ''
                  },
                  {
                     type: 'input',
                     label: '机构',
                     name: 'institution',
                     value: ''
                  }
               ]
            },
import Footer1 from "@/components/footer/footer";
import MyForm from "@/components/form/form.vue";
// 下载需要导入的依赖
import ExportJsonExcel from "js-export-excel";
import {
  getPDataStatistics,
  getPDownload,
  getPList,
  getHotSearch,
  getPersonList,
  getInstitutionList
} from "@/api/index.js";
export default {
  components: {
    Footer1,
    MyForm
  },
  data() {
    return {
      hotAciveIndex: "",
      // 高级搜索显示
      isAdvancedSearch: false,
      // 高级搜索
      from: {
        from: [
          {
            type: "input",
            label: "姓名",
            name: "name",
            value: ""
          },
          {
            type: "input",
            label: "别名",
            name: "alias",
            value: ""
          },
          {
            type: "input",
            label: "籍贯",
            name: "nativePlace",
            value: ""
          },
          {
            type: "select",
            label: "职业",
            value: "",
            name: "tagId",
            options: [
              {
                label: "医家",
                value: "1"
              },
              {
                label: "世家",
                value: "2"
              }
            ]
          },
          // {
          //   type: "input",
          //   label: "职官",
          //   name: "official",
          //   value: ""
          // },
          {
            type: "select",
            label: "性别",
            value: "",
            name: "genderType",
            options: [
              {
                label: "未指明",
                value: "UNKNOWN"
              },
              {
                label: "男",
                value: "MALE"
              },
              {
                label: "女",
                value: "WOMAN"
              }
            ]
          },
          {
            type: "input",
            label: "时期",
            name: "dynasty",
            value: ""
          }
          // {
          //   type: "select",
          //   label: "机构",
          //   name: "institution",
          //   options: []
          // }
        ]
      },

            // 热门搜索
            hot: [],
            // 职业
            profession: {
               title: '职业',
               index: 0,
               id: 0,
               list: []
            },
            // 现在多少条职业数据
            professionIndex: 4,
            // 展开和收缩的按钮需要
            activeBox: null,
            // 时期
            dynasty: {
               title: '时期',
               id: 0,
               index: 0,
               list: []
            },
            // 现在多少条时期数据
            dynastyIndex: 4,
            // 来源
            source: {
               title: '来源',
               index: 0,
               id: 0,
               list: []
            },
            // 表格的数组
            tableData: [],
            // 分页的总数
            total: 100,
            // 当前页
            CurrentPage: 1,
            // 一页显示多少条数据
            pageSize: 6,
            dataTable: [],
            option: {}
         }
      },
      onLoad(options) {
         this.onSearch({text:options.name})
      },
      mounted() {
         // 修改两次的高度保持一致
         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,
                  };
      // 热门搜索
      hot: [],
      // 职业
      profession: {
        title: "职业",
        index: 0,
        id: 0,
        list: []
      },
      // 现在多少条职业数据
      professionIndex: 4,
      // 展开和收缩的按钮需要
      activeBox: null,
      // 时期
      dynasty: {
        title: "时期",
        id: "",
        index: "",
        list: []
      },
      // 现在多少条时期数据
      dynastyIndex: 4,
      // 来源
      source: {
        title: "来源",
        index: 0,
        id: 0,
        list: []
      },
      // 表格的数组
      tableData: [],
      // 分页的总数
      total: 100,
      // 当前页
      CurrentPage: 1,
      // 一页显示多少条数据
      pageSize: 10,
      dataTable: [],
      option: {},
      keywords: "",
      submitData: {
        name: "",
        alias: "",
        nativePlace: "",
        tagId: "",
        official: "",
        genderType: ""
      },
      aSearchData: ""
    };
  },
  onLoad(options) {
    if (options.isAdvancedSearch && options.isAdvancedSearch == "1") {
      this.isAdvancedSearch = true;
    }
    if (options.official) {
      if (options.official) {
        this.from.from[
          this.from.from.findIndex((item) => item.name == "official")
        ].value = options.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 类型一致
                  }));
      const result = this.from.from.reduce((obj, item) => {
        obj[item.name] = item.value;
        return obj;
      }, {});
      // 提交逻辑
      this.onSubmit(result);
    } else {
      if (options.dynasty) {
        this.dynasty.index = Number(options.dynasty);
        this.dynasty.id = Number(options.dynasty);
      }
      this.onSearch({ text: options.keyword });
    }
  },
  mounted() {
    this.getStatistics();
    this.institutionList();
  },
  methods: {
    institutionList() {
      getInstitutionList().then((res) => {
        this.$set(
          this.from.from[
            this.from.from.findIndex((item) => item.name == "institution")
          ],
          "options",
          res.list.map((item) => {
            return {
              label: item.name,
              value: item.id
            };
          })
        );

                  // 更新职业字段的 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) {
            this.onSearch({text:item.name})
            console.log(item, '热门搜索');
         },
         // 左侧的机构统计等等按钮
         handInstitCLick(item, name) {
            this.dynasty.id = 0
            this.source.id = 0
            this.profession.id = 0
            this.CurrentPage = 1
            if (name == 'a') {
               this.profession.index = item.tagId
               this.profession.id = item.tagId
               this.CurrentPage = 1
        console.log(this.from.from);
      });
    },
    //重置搜索结果
    resetForm() {
      this.onSearch("");
    },
    // ExportJsonExcel实例
    Ture() {
      //   创建ExportJsonExcel实例对象
      let toExcel = new ExportJsonExcel(this.option);
      //   调用保存方法
      toExcel.saveExcel();
    },
    // 下载按钮
    async exportClick() {
      const dataList = this.tableData;
      let Obj = {
        keywords: "", //搜索框检索
        // keywords: this.keywords, //搜索框检索
        name: this.submitData.name, //姓名
        alias: this.submitData.alias, //别名
        nativePlace: this.submitData.nativePlace, //机关
        tagId: this.profession.id !== 0 ? Number(this.profession.id) : null, //职业id
        official: this.submitData.official, //职官
        genderType:
          this.submitData.genderType !== "" ? this.submitData.genderType : null, //性别
        dynasty: this.dynasty.id !== "" ? Number(this.dynasty.id) : null, //朝代id
        institution: "", //机构
        bookId: null, //来源id
        page: 1,
        pageSize: 1
      };
      // // 搜索
      await getPDownload(Obj).then((res) => {
        // if (res.success) {
        //   this.tableData = res.list;
        //   // 总数量
        //   this.total = res.npage.totalCount;
        // }
      });
      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
          };

            } else if (name == 'b') {
               this.dynasty.index = item.dynastyId
               this.dynasty.id = item.dynastyId
               this.CurrentPage = 1
               console.log(item);
          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();
    },
    // 接口
    getStatistics() {
      // 热门搜索
      getHotSearch().then((res) => {
        this.hot = Object.keys(res.object).map((key) => {
          return {
            id: parseInt(key),
            name: res.object[key]
          };
        });
      });
      // 右侧职业、时期、来源的数据
      getPDataStatistics().then((res) => {
        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 = [
          { count: totalCount1, tagName: "全部", tagId: 0 },
          ...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 类型一致
          }));

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

            }
            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
               console.log(box1Height, box2Height);
               if (box1Height <= box2Height) {
                  document.querySelector('.fbox1').style.height = box1Height + 'px';
               }
            })
         },
         // 高级搜索
         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);
         },
         // 基础搜索
         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) {
            this.hot.forEach(item => {
               if (item.id === id) {
                  console.log(item.id === id);
                  item.bgColor = true
               } else {
                  console.log(item.id === id);
                  item.bgColor = false
               }
            })

         },
         // 展开收缩
         shrinkClick(box, name) {
            console.log(box);
            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 {
               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('')
            }
         }
      }
   }
          // 更新职业字段的 options 属性
          this.$set(this.from.from[professionIndex], "options", options);
        }
        // --------------------------------------------------
        this.profession.index = this.profession.list[0].tagId;
        // 时期
        this.dynasty.list = [
          { count: totalCount2, dynastyName: "全部", dynastyId: "" },
          ...res.object.dynastyStatistic.details
        ];
        // 来源
        this.source.list = res.object.sourceStatistic.details;
        this.source.index = this.source.list[0].bookId;
      });
    },
    gotoDetail(id) {
      uni.navigateTo({
        url: "/pages/character/detail?id=" + id
      });
    },
    // 热门搜索
    hotSearchClick(item, index) {
      this.onSearch({ text: item.name }, index);
    },
    // 左侧的机构统计等等按钮
    handInstitCLick(item, name) {
      //   this.dynasty.id = 0;
      //   this.source.id = 0;
      //   this.profession.id = 0;
      //   this.CurrentPage = 1;
      if (name == "a") {
        this.profession.index = item.tagId;
        this.profession.id = item.tagId;
        this.CurrentPage = 1;
      } else if (name == "b") {
        this.dynasty.index = item.dynastyId;
        this.dynasty.id = item.dynastyId;
        this.CurrentPage = 1;
      } else if (name == "c") {
        this.source.index = item.bookId;
        this.source.id = item.bookId;
        this.CurrentPage = 1;
      }
      this.onSearch("");
    },
    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;
        if (box1Height <= box2Height) {
          document.querySelector(".fbox1").style.height = box1Height + "px";
        }
      });
    },
    // 高级搜索
    async onSubmit(val) {
      this.keywords = "";
      this.hotAciveIndex = "";
      this.aSearchData = val;
      this.profession.index = Number(val.tagId);
      this.profession.id = Number(val.tagId);
      const currentDynasty = this.dynasty.list.find(
        (f) => f.dynastyName == val.dynasty
      );
      if (currentDynasty) {
        this.dynasty.index = currentDynasty.dynastyId;
        this.dynasty.id = currentDynasty.dynastyId;
      }
      this.submitData = val;
      this.CurrentPage = 1;
      let Obj = {
        keywords: "", //搜索框检索
        name: val.name, //姓名
        alias: val.alias, //别名
        nativePlace: val.nativePlace, //机关
        tagId: val.tagId !== "" ? Number(val.tagId) : null, //职业id
        official: val.official, //职官
        genderType: val.genderType !== "" ? val.genderType : null, //性别
        dynasty: val.dynasty, //朝代id
        dynastyId: this.dynasty.id, //朝代id
        institution: val.institution, //机构
        bookId: null, //来源id
        page: this.CurrentPage,
        pageSize: this.pageSize
      };
      // // 搜索
      await getPersonList(Obj).then((res) => {
        if (res.success) {
          this.tableData = res.list;
          // 总数量
          this.total = res.npage.totalCount;
        }
      });
    },
    // 基础搜索
    async onSearch(val, index) {
      this.keywords = val.text;
      this.aSearchData = "";
      if (index !== undefined) {
        this.keywords = "";
        this.hotAciveIndex = index;
      } else {
        this.hotAciveIndex = "";
      }
      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 getPersonList(Obj).then((res) => {
        if (res.success) {
          this.tableData = res.list;
          // 总数量
          this.total = res.npage.totalCount;
        }
      });
    },
    // 热门搜索
    HotClick(id) {
      this.hot.forEach((item) => {
        if (item.id === id) {
          item.bgColor = true;
        } else {
          item.bgColor = false;
        }
      });
    },
    // 展开收缩
    shrinkClick(box, name) {
      // this.activeBox = this.activeBox === 'a' ? null : 'a';
      if (name == "职业") {
        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.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;
        if (this.isAdvancedSearch) {
          this.onSubmit(this.aSearchData);
        } else {
          this.onSearch({ text: this.keywords });
        }
      }
    },
    // 上一页
    PrevClick(val) {
      if (this.CurrentPage != val) {
        this.CurrentPage = val;
        this.onSearch({ text: this.keywords });
      }
    },
    // 下一页
    NextClick(val) {
      if (this.CurrentPage != val) {
        this.CurrentPage = val;
        this.onSearch({ text: this.keywords });
      }
    }
  }
};
</script>

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

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

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

   ::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::before {
      border: 0;
      background-color: #fff;
   }
/* 表格 */
::v-deep .el-table__body td {
  height: 0.3rem;
  line-height: 0.3rem;
  font-size: 0.14rem;
  color: #2c2c2c !important;
  font-weight: normal;
}

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

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

   /* 分页 */
   .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: 0.12rem;
  height: 0.3rem;
  line-height: 0.3rem;
  background-color: #fff;
  color: #9e9e9e;
  text-align: center;
  border: 1px solid #9e9e9e;
  padding: 0 0.1rem;
}

   .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: 0.1rem;
  width: 0.28rem;
  height: 0.3rem;
  line-height: 0.3rem;
  background-color: #fff;
  color: #9e9e9e;
  text-align: center;
  border: 1px solid #9e9e9e;
}

   .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: 0.2rem !important;

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

      .light {
         padding: .1rem .2rem !important;
      }
  .lightTop {
    font-size: 0.14rem !important;
  }

      .lightTop {
         font-size: .14rem !important;
      }
  .el-button {
    font-size: 0.12rem !important;
    padding: 0.05rem 0.18rem !important;
  }

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

      .lightBo {
         font-size: .14rem !important;
    .is-leaf {
      background-color: #c1d3ea !important;
      color: #2c2c2c !important;
      font-weight: 400;

         .is-leaf {
            background-color: #C1D3EA !important;
            color: #2C2C2C !important;
            font-weight: 400;
      .cell {
        height: 0.3rem !important;
        line-height: 0.3rem !important;
      }
    }
  }

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

               height: .3rem !important;
               line-height: .3rem !important;
            }
         }
      }
      .cell {
        height: 0.3rem !important;
        line-height: 0.3rem !important;
      }
    }
  }
}

      .el-table__body-wrapper {
         .el-table__row {
            height: .46rem !important;
            line-height: .46rem !important;
@media screen and (min-width: 2560px) and (max-width: 3840px) {
  /* 搜索 */
  .Search {
    margin: 0.35rem 0 0.16rem !important;
    font-size: 0.12rem !important;
  }

            .cell {
  .Search ::v-deep .advancedSea {
    font-size: 0.12rem !important;
    margin-left: 0.35rem;
  }

               height: .3rem !important;
               line-height: .3rem !important;
            }
         }
  .Search ::v-deep .flex-center {
    height: 80% !important;
  }

      }
   }
  .hotSearch {
    font-size: 0.12rem !important;
    margin-bottom: 0.19rem !important;

   @media screen and (min-width:2560px)and (max-width:3840px) {
    li {
      font-size: 0.12rem !important;
      margin: 0 0.1rem;
    }
  }

      /* 搜索 */
      .Search {
         margin: .35rem 0 .16rem !important;
         font-size: .12rem !important;
      }
  .advancedSeaTrue,
  .zhushuju {
    padding: 0 1.24rem !important;
  }

      .Search ::v-deep .advancedSea {
         font-size: .12rem !important;
         margin-left: .35rem;
      }
  .advancedSeaTrue1 {
    padding: 0.08rem 0.19rem !important;
    font-size: 0.14rem !important;
  }

      .Search ::v-deep .flex-center {
         height: 80% !important;
      }
  /* Form组件里面的样式 */
  ::v-deep .el-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.1rem !important;
  }

      .hotSearch {
         font-size: .12rem !important;
         margin-bottom: .19rem !important;
  ::v-deep .el-form-item {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-bottom: 0.18rem !important;
  }

         li {
            font-size: .12rem !important;
            margin: 0 .1rem;
         }
      }
  ::v-deep .el-form-item__label {
    font-size: 0.14rem !important;
    height: 0.3rem !important;
    display: flex !important;
    align-items: center !important;
  }

      .advancedSeaTrue,
      .zhushuju {
         padding: 0 1.24rem !important;
      }
  ::v-deep .el-input__inner {
    font-size: 0.14rem !important;
    height: 0.3rem !important;
  }

      .advancedSeaTrue1 {
         padding: .08rem .19rem !important;
         font-size: .14rem !important;
      }
  ::v-deep .Formbtn {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;

      /* Form组件里面的样式 */
      ::v-deep .el-row {
         display: flex;
         flex-wrap: wrap;
         margin-top: .1rem !important;
      }
    .el-button {
      width: 0.7rem !important;
      height: 0.3rem !important;
      font-size: 0.12rem;
    }
  }

      ::v-deep .el-form-item {
         display: flex !important;
         flex-wrap: wrap !important;
         margin-bottom: .18rem !important;
      }
  /* —————————————————————— */
  /* 左边的 */
  .boox {
    padding: 0.1rem 0.09rem;
    min-height: 2rem !important;
    position: relative;

      ::v-deep .el-form-item__label {
         font-size: .14rem !important;
         height: .3rem !important;
         display: flex !important;
         align-items: center !important;
      }
    ul {
      margin-top: 0.16rem !important;
    }

      ::v-deep .el-input__inner {
         font-size: .14rem !important;
         height: .3rem !important;
      }
    h3 {
      font-size: 0.14rem;
      margin-left: 0.1rem;
    }

      ::v-deep .Formbtn {
         width: 100% !important;
         display: flex;
         justify-content: center;
         align-items: center;
    li {
      height: 0.3rem;
      line-height: 0.3rem;
      padding: 0 0.2rem !important;
      margin: 0.05rem 0 !important;
      border-radius: 0.3rem !important;
    }

         .el-button {
            width: .7rem !important;
            height: .3rem !important;
            font-size: .12rem;
    .toggleButton1 {
      position: absolute;
      bottom: 0.1rem !important;
      left: 40% !important;
    }

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

      /* —————————————————————— */
      /* 左边的 */
      .boox {
         padding: .1rem .09rem;
         min-height: 2rem !important;
         position: relative;
  .zhongjianleft {
    margin: 0.27rem 0 !important;
  }

         ul {
            margin-top: .16rem !important;
         }
  .laiyuan {
    min-height: 2rem !important;
    overflow: auto;
  }

         h3 {
            font-size: .14rem;
            margin-left: .1rem;
         }
  /* ———————————————————— */
  ::v-deep .uni-input-placeholder {
    font-size: 0.14rem;
    height: 100%;
    display: flex;
    align-content: center;
    align-items: center;
  }

         li {
            height: .3rem;
            line-height: .3rem;
            padding: 0 .2rem !important;
            margin: .05rem 0 !important;
            border-radius: .3rem !important;
  ::v-deep .ffff {
    border-radius: 0.3rem !important;
    height: 0.36rem !important;
  }

         }
  ::v-deep .widget_button {
    border-radius: inherit !important;
    margin-right: 0.02rem !important;
    background-color: #597aa5;
  }

         .toggleButton1 {
            position: absolute;
            bottom: .1rem !important;
            left: 40% !important;
         }
  /* 右侧 */
  .rightList {
    padding-left: 0.2rem !important;

         .toggleButton {
            font-size: .14rem !important;
         }
      }
    .light {
      padding: 0.1rem 0.2rem !important;
    }

      .zhongjianleft {
         margin: .27rem 0 !important;
      }
    .lightTop {
      font-size: 0.14rem !important;
    }

      .laiyuan {
         min-height: 2rem !important;
      }
    .el-button {
      font-size: 0.12rem !important;
      padding: 0.05rem 0.18rem !important;
    }

      /* ———————————————————— */
      ::v-deep .uni-input-placeholder {
         font-size: .14rem;
         height: 100%;
         display: flex;
         align-content: center;
         align-items: center;
      }
    .lightBo {
      font-size: 0.14rem !important;

      ::v-deep .ffff {
         border-radius: .3rem !important;
         height: .36rem !important;
      }

      ::v-deep .widget_button {
         border-radius: inherit !important;
         margin-right: .02rem !important;
         background-color: #597AA5;
      }



      /* 右侧 */
      .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:1366px) and (max-width:1920px) {

      /* 搜索 */
      .Search {
         margin: .35rem 0 .16rem !important;
         font-size: .12rem !important;
      }

      .Search ::v-deep .advancedSea {
         font-size: .12rem !important;
         margin-left: .35rem;
      }
      .is-leaf {
        background-color: #c1d3ea !important;
        color: #2c2c2c !important;
        font-weight: 400;

      .Search ::v-deep .flex-center {
         height: 80% !important;
      }
        .cell {
          height: 0.3rem !important;
          line-height: 0.3rem !important;
        }
      }
    }

      .hotSearch {
         font-size: .12rem !important;
         margin-bottom: .19rem !important;
    .el-table__body-wrapper {
      .el-table__row {
        height: 0.46rem !important;
        line-height: 0.46rem !important;

         li {
            font-size: .12rem !important;
            margin: 0 .1rem;
         }
      }
      .advancedSeaTrue1{
         border: 1px solid #C1D3EA;
      }
      .advancedSeaTrue,
      .zhushuju {
         padding: 0 1.24rem !important;
      }
        .cell {
          height: 0.3rem !important;
          line-height: 0.3rem !important;
        }
      }
    }
  }
}

      .advancedSeaTrue1 {
         padding: .08rem .19rem !important;
         font-size: .14rem !important;
      }
@media screen and (min-width: 1366px) and (max-width: 1920px) {
  /* 搜索 */
  .Search {
    margin: 0.35rem 0 0.16rem !important;
    font-size: 0.12rem !important;
  }

      /* Form组件里面的样式 */
      ::v-deep .el-row {
         display: flex;
         flex-wrap: wrap;
         margin-top: .1rem !important;
      }
  .Search ::v-deep .advancedSea {
    font-size: 0.12rem !important;
    margin-left: 0.35rem;
  }

      ::v-deep .el-form-item {
         display: flex !important;
         flex-wrap: wrap !important;
         margin-bottom: .18rem !important;
      }
  .Search ::v-deep .flex-center {
    height: 80% !important;
  }

      ::v-deep .el-form-item__label {
         font-size: .14rem !important;
         height: .3rem !important;
         display: flex !important;
         align-items: center !important;
      }
  .hotSearch {
    font-size: 0.12rem !important;
    margin-bottom: 0.19rem !important;

      ::v-deep .el-input__inner {
         font-size: .14rem !important;
         height: .3rem !important;
      }
    li {
      font-size: 0.12rem !important;
      margin: 0 0.1rem;
    }
  }
  .advancedSeaTrue1 {
    border: 1px solid #c1d3ea;
  }
  .advancedSeaTrue,
  .zhushuju {
    padding: 0 1.24rem !important;
  }

      ::v-deep .Formbtn {
         width: 100% !important;
         display: flex;
         justify-content: center;
         align-items: center;
  .advancedSeaTrue1 {
    padding: 0.08rem 0.19rem !important;
    font-size: 0.14rem !important;
  }

         .el-button {
            width: .7rem !important;
            height: .3rem !important;
            font-size: .12rem;
  /* Form组件里面的样式 */
  ::v-deep .el-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 0.1rem !important;
  }

         }
      }
  ::v-deep .el-form-item {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-bottom: 0.18rem !important;
  }

      /* —————————————————————— */
      /* 左边的 */
      .boox {
         padding: .1rem .09rem;
         min-height: 2rem !important;
         position: relative;
  ::v-deep .el-form-item__label {
    font-size: 0.14rem !important;
    height: 0.3rem !important;
    display: flex !important;
    align-items: center !important;
  }

         ul {
            margin-top: .16rem !important;
            margin-bottom: .2rem !important;
         }
  ::v-deep .el-input__inner {
    font-size: 0.14rem !important;
    height: 0.3rem !important;
  }

         h3 {
            font-size: .14rem;
            margin-left: .1rem;
         }
  ::v-deep .Formbtn {
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;

         li {
            height: .3rem;
            line-height: .3rem;
            padding: 0 .2rem !important;
            margin: .05rem 0 !important;
            border-radius: .3rem !important;
    .el-button {
      width: 0.7rem !important;
      height: 0.3rem !important;
      font-size: 0.12rem;
    }
  }

         }
  /* —————————————————————— */
  /* 左边的 */
  .boox {
    padding: 0.1rem 0.09rem;
    min-height: 2rem !important;
    position: relative;

         .toggleButton1 {
            position: absolute;
            bottom: .1rem !important;
            left: 40% !important;
         }
    ul {
      margin-top: 0.16rem !important;
      margin-bottom: 0.2rem !important;
    }

         .toggleButton {
            font-size: .14rem !important;
         }
      }
    h3 {
      font-size: 0.14rem;
      margin-left: 0.1rem;
    }

      .zhongjianleft {
         margin: .27rem 0 !important;
      }
    li {
      height: 0.3rem;
      line-height: 0.3rem;
      padding: 0 0.2rem !important;
      margin: 0.05rem 0 !important;
      border-radius: 0.3rem !important;
    }

      .laiyuan {
         min-height: 2rem !important;
      }
    .toggleButton1 {
      position: absolute;
      bottom: 0.1rem !important;
      left: 40% !important;
    }

      /* ———————————————————— */
      ::v-deep .uni-input-placeholder {
         font-size: .14rem;
         height: 100%;
         display: flex;
         align-content: center;
         align-items: center;
      }
    .toggleButton {
      font-size: 0.14rem !important;
    }
  }

      ::v-deep .ffff {
         border-radius: .3rem !important;
         height: .36rem !important;
      }
  .zhongjianleft {
    margin: 0.27rem 0 !important;
  }

      ::v-deep .widget_button {
         border-radius: inherit !important;
         margin-right: .02rem !important;
         background-color: #597AA5;
      }
  .laiyuan {
    min-height: 2rem !important;
    overflow: auto;
  }

      /* -------------------- */
      /* 右侧 */
      .rightList {
         width: 100%;
         padding-left: .2rem !important;
  /* ———————————————————— */
  ::v-deep .uni-input-placeholder {
    font-size: 0.14rem;
    height: 100%;
    display: flex;
    align-content: center;
    align-items: center;
  }

         .light {
            padding: .1rem .2rem !important;
         }
  ::v-deep .ffff {
    border-radius: 0.3rem !important;
    height: 0.36rem !important;
  }

         .lightTop {
            font-size: .14rem !important;
         }
  ::v-deep .widget_button {
    border-radius: inherit !important;
    margin-right: 0.02rem !important;
    background-color: #597aa5;
  }

         .el-button {
            font-size: .12rem !important;
            padding: .05rem .18rem !important;
         }
  /* -------------------- */
  /* 右侧 */
  .rightList {
    width: 100%;
    padding-left: 0.2rem !important;

         .lightBo {
            font-size: .14rem !important;
    .light {
      padding: 0.1rem 0.2rem !important;
    }

            .is-leaf {
               background-color: #C1D3EA !important;
               color: #2C2C2C !important;
               font-weight: 400;
    .lightTop {
      font-size: 0.14rem !important;
    }

               .cell {
    .el-button {
      font-size: 0.12rem !important;
      padding: 0.05rem 0.18rem !important;
    }

                  height: .3rem !important;
                  line-height: .3rem !important;
               }
            }
         }
    .lightBo {
      font-size: 0.14rem !important;

         .el-table__body-wrapper {
            .el-table__row {
               height: .46rem !important;
               line-height: .46rem !important;
      .is-leaf {
        background-color: #c1d3ea !important;
        color: #2c2c2c !important;
        font-weight: 400;

               .cell {
        .cell {
          height: 0.3rem !important;
          line-height: 0.3rem !important;
        }
      }
    }

                  height: .3rem !important;
                  line-height: .3rem !important;
               }
            }
    .el-table__body-wrapper {
      .el-table__row {
        height: 0.46rem !important;
        line-height: 0.46rem !important;

         }
      }
   }
        .cell {
          height: 0.3rem !important;
          line-height: 0.3rem !important;
        }
      }
    }
  }
}

   * {
      box-sizing: border-box;
   }
* {
  box-sizing: border-box;
}

   .hotSearch {
      font-size: .12rem;
      margin-bottom: .19rem;
.hotSearch {
  font-size: 0.12rem;
  margin-bottom: 0.19rem;

      li {
         font-size: .12rem;
         margin: 0 .1rem;
      }
   }
  li {
    font-size: 0.12rem;
    margin: 0 0.1rem;
    &.active {
      color: #027edc !important;
      font-weight: bold;
    }
  }
}

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

@@ -1058,53 +1286,52 @@
      height: 100px;
   } */

   .box {
      transition: height 0.3s;
      /* 添加过渡效果 */
      overflow: hidden;
      /* 避免内容溢出 */
.box {
  transition: height 0.3s;
  /* 添加过渡效果 */
  overflow: hidden;
  /* 避免内容溢出 */
}

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

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

      ul {
         margin-top: .16rem !important;
      }
  h3 {
    font-size: 0.14rem;
    margin-left: 0.1rem;
  }

      h3 {
         font-size: .14rem;
         margin-left: .1rem;
      }
  li {
    height: 0.3rem;
    line-height: 0.3rem;
    padding: 0 0.2rem !important;
    margin: 0.05rem 0 !important;
    border-radius: 0.3rem !important;
    font-size: 0.14rem;
  }

      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: 0.1rem !important;
    left: 40% !important;
  }

      .toggleButton1 {
         position: absolute;
         bottom: .1rem !important;
         left: 40% !important;
      }
  .toggleButton {
    font-size: 0.14rem !important;
  }
}

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

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