From caeb2c4b5fa88f6fe8799b67c790d8ad8b4d98e8 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期三, 24 七月 2024 16:41:27 +0800
Subject: [PATCH] 1

---
 src/pages/academicSchools/index.vue |  621 ++++++++++++++++++++++++++++++++++++++++++++++----------
 1 files changed, 510 insertions(+), 111 deletions(-)

diff --git a/src/pages/academicSchools/index.vue b/src/pages/academicSchools/index.vue
index a369d13..85406aa 100644
--- a/src/pages/academicSchools/index.vue
+++ b/src/pages/academicSchools/index.vue
@@ -62,10 +62,11 @@
                 <div class="selectActivelyBox" @click="selectActively">
                   <p v-if="formData.actively.length == 0">璇烽�夋嫨娲诲姩鍦�</p>
                   <el-tag
+                    style="margin-right: 5px"
                     v-for="item in formData.actively"
-                    :key="item.id"
+                    :key="item.index"
                     size="small"
-                    closable
+                    type="info"
                     >{{ item.name }}</el-tag
                   >
                 </div>
@@ -131,12 +132,68 @@
             </el-col>
           </el-row>
           <div style="text-align: right">
-            <el-button type="primary" size="mini" @click="searchFun"
+            <el-button
+              size="mini"
+              style="background-color: #244a7b; color: #fff"
+              @click="searchFun"
               >鎼滅储</el-button
             >
             <el-button size="mini" @click="resetForm">閲嶇疆</el-button>
           </div>
         </el-form>
+        <div class="fromTable">
+          <el-table
+            :data="tableData"
+            class="lightBo"
+            style="width: 100%"
+            empty-text="鏆傛棤鎼滅储淇℃伅"
+            size="small"
+            :border="true"
+          >
+            <el-table-column
+              prop="id"
+              label="搴忓彿"
+              width="70"
+            ></el-table-column>
+            <el-table-column prop="personName" width="120" 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="palce" label="娲诲姩鍦�"></el-table-column>
+            <el-table-column
+              prop="birthYear"
+              label="鍖诲鍒嗙"
+              width="120"
+            ></el-table-column>
+            <el-table-column prop="deathYear" label="浣滃搧"></el-table-column>
+            <el-table-column
+              prop="nativePlace"
+              width="120"
+              label="浜虹墿鏍囩"
+            ></el-table-column>
+            <el-table-column
+              prop="socialDistinction"
+              label="绀句細韬唤"
+              width="120"
+            ></el-table-column>
+            <el-table-column
+              prop="official"
+              width="120"
+              label="鏃舵湡"
+            ></el-table-column>
+          </el-table>
+          <div style="text-align: right;padding-top: 20px;">
+            <el-button style="width: 120px;background-color: #244a7b; color: #fff"
+              >纭</el-button
+            >
+          </div>
+        </div>
       </view>
       <div v-if="showPerson" class="personDialog">
         <i
@@ -185,6 +242,7 @@
           text-align: center;
           font-size: 0.2rem;
           color: #666;
+          z-index: 99;
         "
       >
         鏆傛棤鐩稿叧鏁版嵁
@@ -200,10 +258,25 @@
           text-align: center;
           font-size: 0.2rem;
           color: #666;
+          z-index: 99;
         "
       ></div>
     </div>
     <div id="customDialog" class="customDialog">
+      <div class="title">
+        <span>{{ detailData.name }}</span>
+        <span @click="closeDom">鍏抽棴</span>
+      </div>
+      <div class="content">
+        <p>濮撳悕锛歿{ detailData.name }}</p>
+        <p>鍒悕锛歿{ detailData.alias }}</p>
+        <p>绫嶈疮锛歿{ detailData.nativePlace }}</p>
+        <p>鍖诲鍒嗙锛� {{ detailData.medicalBranch }}</p>
+        <p>灏忎紶锛歿{ detailData.biography }}</p>
+      </div>
+      <div class="btn" @click="spaceTimeArr(detailData.id)">鏌ョ湅鏇村>>></div>
+    </div>
+    <div id="schoolDialog" class="customDialog">
       <div class="title">
         <span>{{ detailData.name }}</span>
         <span @click="closeDom">鍏抽棴</span>
@@ -222,8 +295,82 @@
       :visible.sync="drawer"
       direction="rtl"
       :before-close="handleClose"
+      class="customDrawer"
     >
-      <span>鎴戞潵鍟�!</span>
+      <div class="drawerContent">
+        <div class="drawerTips">閬镐腑鐨勫湴鍧�锛�</div>
+        <div class="drawerTable">
+          <div class="tableTabs">
+            <div class="inputItem">
+              <el-input
+                placeholder="璜嬭几鍏ュ湴鍚嶆悳绱�"
+                v-model="tableKey"
+                class="input-with-select"
+                @keyup.enter="searchAddress"
+              >
+                <el-button
+                  @click="searchAddress"
+                  type="primary"
+                  slot="append"
+                  icon="el-icon-search"
+                ></el-button>
+              </el-input>
+            </div>
+            <div class="selectItem">
+              <el-select v-model="dynastyId" placeholder="璜嬮伕鎿囨檪鏈�">
+                <el-option
+                  v-for="item in dynastyData"
+                  :key="item.dynastyId + '0'"
+                  :label="item.name"
+                  :value="item.dynastyId"
+                ></el-option>
+              </el-select>
+            </div>
+          </div>
+          <el-table
+            ref="multipleTable"
+            :data="gridData"
+            style="width: 100%"
+            height="530"
+            @selection-change="handleSelectionChange"
+            row-key="index"
+          >
+            <el-table-column type="selection" width="55"> </el-table-column>
+            <el-table-column prop="currentName" label="鍦板悕"> </el-table-column>
+            <el-table-column width="250" label="骞翠唬鍗�闁�">
+              <template slot-scope="scope">{{
+                scope.row.start + "-" + scope.row.end
+              }}</template>
+            </el-table-column>
+            <el-table-column
+              prop="dynastyName"
+              label="鏅傛湡"
+              width="250"
+              show-overflow-tooltip
+            >
+            </el-table-column>
+          </el-table>
+        </div>
+        <div class="drawerPage">
+          <el-pagination
+            class="paging flex"
+            background
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[10, 20, 60, 100]"
+            :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
+        <div class="drawerBtn">
+          <el-button @click="setCurrent">鍏ㄩ伕鐣跺墠闋�</el-button>
+          <el-button @click="setCurrent('cancle')">鍙栨秷鍏ㄩ伕</el-button>
+          <el-button @click="drawer = false" type="primary">纰哄畾</el-button>
+        </div>
+      </div>
     </el-drawer>
   </view>
 </template>
@@ -232,16 +379,18 @@
 import {
   getPersonData,
   getHotSearch,
-  getPDataStatistics,
   academicSearch,
   getPersonTag,
   getSocialDistinction,
-  getDynastyAll
+  getDynastyAll,
+  getPlaceInfo,
 } from "@/api/index.js";
 import * as echarts from "echarts";
 export default {
   data() {
     return {
+      // 楂樼礆鎼滅储琛ㄦ牸
+      tableData: [],
       loading: true,
       hotAciveIndex: "",
       currentId: 21682,
@@ -253,11 +402,30 @@
       hotKeyList: [],
       searchKey: "",
       // 鍒嗙被
-      categories: [],
+      categories: [
+        {
+          name: "浜插睘鍏崇郴",
+        },
+        {
+          name: "甯堟壙鍏崇郴",
+        },
+        {
+          name: "鏂囩尞浣滃搧",
+        },
+        {
+          name: "绀句細鍏崇郴",
+        },
+        {
+          name: "娲诲姩鍦�",
+        },
+        {
+          name: "瀛︽湳娴佹淳",
+        },
+      ],
       // 褰撳墠浜虹墿淇℃伅
       ownInfo: null,
       detailData: {
-        name: ""
+        name: "",
       },
       isAdvancedSearch: false,
       formData: {
@@ -266,23 +434,33 @@
         works: "",
         personTags: "",
         socialIdentity: "",
-        period: ""
+        period: "",
       },
       showPerson: false,
       personList: [],
       personPageInfo: {
         totalCount: 0,
         page: 1,
-        limit: 10
+        limit: 10,
       },
       personTag: [],
       socialDistinction: [],
       dynastyData: [],
+      // 鎶藉眽
+      gridData: [],
+      page: 1,
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
       drawer: false,
+      dynastyId: "",
+      tableKey: "",
+      multipleTableSelection: [],
+      // echarts
       infoOfPersons: [],
       infoOfSchools: [],
       nodeDatas: [],
-      links: []
+      links: [],
     };
   },
   mounted() {
@@ -290,6 +468,8 @@
     this.hotSearch();
     // 鑾峰彇浜虹墿鏍囩銆佺ぞ浼氳韩浠�
     this.getOptionInfo();
+    // 鐛插彇鍦板潃鍒楄〃
+    this.getAddressList();
     // 鐩戝惉绐楀彛澶у皬鍙樺寲
     window.addEventListener("resize", this.relation);
   },
@@ -297,6 +477,89 @@
     this.searchKey = options.keyword;
   },
   methods: {
+    // 鎼滅储鍦板潃
+    searchAddress() {
+      this.gridData = [];
+      this.getAddressList();
+    },
+    //  鍒嗛〉
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.getAddressList();
+    },
+    handleCurrentChange(val) {
+      this.page = val;
+      this.getAddressList();
+    },
+    // 琛ㄦ牸閫夋嫨
+    handleSelectionChange(val) {
+      const data = val.map((item) => {
+        return {
+          ...item,
+          name: item.currentName,
+          id: item.dynastyId,
+        };
+      });
+      this.formData.actively = data;
+      this.multipleTableSelection = this.formData.actively;
+    },
+    // 鍏ㄩ伕
+    setCurrent(str) {
+      if (str == "cancle") {
+        this.$refs.multipleTable.clearSelection();
+        return false;
+      }
+      if (this.gridData.length) {
+        this.$refs.multipleTable.clearSelection();
+        this.gridData.forEach((row) => {
+          this.$refs.multipleTable.toggleRowSelection(row);
+        });
+        const data = this.gridData.map((item) => {
+          return {
+            ...item,
+            name: item.currentName,
+            id: item.dynastyId,
+          };
+        });
+        this.formData.actively = data;
+        this.multipleTableSelection = this.formData.actively;
+      }
+    },
+    // 鐛插彇鍦板潃鍒楄〃
+    getAddressList() {
+      const data = {
+        page: this.page,
+        pageSize: this.pageSize,
+      };
+      if (this.dynastyId != "") {
+        data["dynastyId"] = this.dynastyId;
+      }
+      if (this.tableKey != "") {
+        data["keyword"] = this.tableKey;
+      }
+      getPlaceInfo(data).then((res) => {
+        if (res?.success && res?.npage) {
+          this.total = res.npage.totalCount;
+        }
+        if (res?.success && res?.list.length) {
+          this.gridData = res?.list?.map((item, i) => {
+            return {
+              ...item,
+              index: i,
+            };
+          });
+          setTimeout(() => {
+            this.multipleTableSelection.forEach((row) => {
+              this.$refs.multipleTable.toggleRowSelection(row);
+            });
+            this.formData.actively = this.multipleTableSelection;
+          }, 2000);
+        } else {
+          this.gridData = [];
+        }
+      });
+    },
+
     getOptionInfo() {
       getDynastyAll().then((res) => {
         this.dynastyData = res.list;
@@ -308,6 +571,7 @@
         this.socialDistinction = res.list;
       });
     },
+
     resetForm(formName) {
       this.formData = {
         name: "",
@@ -315,18 +579,22 @@
         works: "",
         personTags: "",
         socialIdentity: "",
-        period: ""
+        period: "",
       };
     },
+
     searchFun() {
       console.log(this.formData);
     },
+
     selectActively() {
       this.drawer = true;
     },
+
     handleClose(done) {
       done();
     },
+
     // 鑾峰彇浜虹墿鍏崇郴
     getPersonInfo(arr, str, newArr, order, type, parent) {
       for (let i = 0; i < arr.length; i++) {
@@ -342,7 +610,7 @@
             parentName: parent?.NAME[0]?.content1 ?? parent.parentName,
             name: personInfo?.NAME[0]?.content1,
             category: type,
-            symbolSize: 15
+            symbolSize: 15,
           };
           if (order > 80) {
             order = 80;
@@ -444,7 +712,7 @@
               const data = item[str]?.map((e) => {
                 return {
                   ...e,
-                  personId: item.personId
+                  personId: item.personId,
                 };
               });
               if (ele[str] && data?.length) {
@@ -480,16 +748,19 @@
     getData() {
       this.loading = true;
       getPersonData(this.currentId).then((res) => {
-        console.log("1111111111111", res);
-        this.infoOfPersons = res.object.infoOfPersons;
-        this.infoOfSchools = res.object.infoOfSchools;
-        this.nodeDatas = [];
-        this.links = [];
-        this.handleData([res.object.personChain], null);
-        console.log("this.nodeDatas", this.nodeDatas);
-        console.log("this.links", this.links);
-        this.loading = false;
-        this.relation();
+        if (res && res.object) {
+          this.infoOfPersons = res?.object?.infoOfPersons;
+          this.infoOfSchools = res?.object?.infoOfSchools;
+          this.nodeDatas = [];
+          this.links = [];
+          this.handleData([res.object.personChain], null);
+          this.loading = false;
+          this.relation();
+        } else {
+          this.loading = false;
+          this.nodeDatas = [];
+          this.links = [];
+        }
         // this.nodes = [];
         // this.relationships = [];
         // let kinData = [];
@@ -611,9 +882,9 @@
         //     this.relationships.push(obj);
         //   });
         // }
-        
       });
     },
+
     // 閫掑綊澶勭悊鎵�鏈夊眰绾ф暟鎹�
     handleData(data, parent) {
       for (let i = 0; i < data.length; i++) {
@@ -629,8 +900,8 @@
             id: item.mainId,
             name: mainPerson.NAME[0].content1,
             itemStyle: {
-              color: "#244a7b"
-            }
+              color: "#244a7b",
+            },
           });
         } else {
           switch (parent.thisType) {
@@ -645,11 +916,9 @@
                 );
                 if (p) {
                   this.nodeDatas.push({
+                    category: 0,
                     id: item.mainId,
                     name: p.NAME[0].content1,
-                    itemStyle: {
-                      color: "#5470c6"
-                    }
                   });
                 }
               }
@@ -665,8 +934,8 @@
                   padding: [3, 8],
                   borderRadius: 30,
                   position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず
-                  distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
-                }
+                  distance: -10, // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
+                },
               });
               break;
             case 2:
@@ -676,16 +945,14 @@
                 -1
               ) {
                 this.nodeDatas.push({
+                  category: 2,
                   id: item.mainId,
                   name: item.literatureName,
-                  itemStyle: {
-                    color: "#fac858"
-                  }
                 });
               }
               this.links.push({
                 source: item.mainId,
-                target: parent.mainId
+                target: parent.mainId,
               });
               break;
             case 3:
@@ -695,16 +962,14 @@
                 -1
               ) {
                 this.nodeDatas.push({
+                  category: 4,
                   id: item.mainId,
                   name: item.ancientName,
-                  itemStyle: {
-                    color: "#ea7ccc"
-                  }
                 });
               }
               this.links.push({
                 source: item.mainId,
-                target: parent.mainId
+                target: parent.mainId,
               });
               break;
             case 4:
@@ -716,22 +981,17 @@
                 const s = this.infoOfSchools.find(
                   (sItem) => sItem.schoolId == item.schoolId
                 );
-                console.log(this.infoOfSchools);
-                console.log(item.schoolId);
-                console.log(s);
                 if (s) {
                   this.nodeDatas.push({
+                    category: 5,
                     id: item.mainId,
                     name: s.name[0],
-                    itemStyle: {
-                      color: "#9a60b4"
-                    }
                   });
                 }
               }
               this.links.push({
                 source: item.mainId,
-                target: parent.mainId
+                target: parent.mainId,
               });
               break;
             case 5:
@@ -745,11 +1005,9 @@
                 );
                 if (p) {
                   this.nodeDatas.push({
+                    category: 3,
                     id: item.mainId,
                     name: p.NAME[0].content1,
-                    itemStyle: {
-                      color: "#ee6666"
-                    }
                   });
                 }
               }
@@ -765,8 +1023,8 @@
                   padding: [3, 8],
                   borderRadius: 30,
                   position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず
-                  distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
-                }
+                  distance: -10, // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
+                },
               });
               break;
             case 6:
@@ -780,11 +1038,9 @@
                 );
                 if (p) {
                   this.nodeDatas.push({
+                    category: 1,
                     id: item.mainId,
                     name: p.NAME[0].content1,
-                    itemStyle: {
-                      color: "#3dae7b"
-                    }
                   });
                 }
               }
@@ -800,8 +1056,8 @@
                   padding: [3, 8],
                   borderRadius: 30,
                   position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず
-                  distance: -10 // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
-                }
+                  distance: -10, // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂
+                },
               });
               break;
           }
@@ -852,7 +1108,7 @@
         }
         return {
           ...item,
-          symbolSize: size > 80 ? 80 : size
+          symbolSize: size > 80 ? 80 : size,
         };
       });
 
@@ -886,8 +1142,8 @@
             orient: "vertical",
             data: this.categories.map(function (a) {
               return a.name;
-            })
-          }
+            }),
+          },
         ],
         series: [
           {
@@ -897,35 +1153,41 @@
             symbolSize: 15,
             data: this.nodeDatas,
             links: this.links,
-            categories: [{
-
-            }],
+            categories: this.categories,
             roam: true,
             label: {
               show: true,
               position: "right",
-              formatter: "{b}"
+              formatter: "{b}",
             },
             scaleLimit: {
               min: 0.4,
-              max: 2
+              max: 2,
             },
             lineStyle: {
               color: "source",
-              curveness: 0.2
+              curveness: 0.2,
             },
             emphasis: {
               focus: "adjacency",
               lineStyle: {
-                width: 5
-              }
+                width: 5,
+              },
             },
             force: {
               repulsion: 600,
-              edgeLength: 300
-            }
-          }
-        ]
+              edgeLength: 300,
+            },
+          },
+        ],
+        color: [
+          "#5470c6",
+          "#3dae7b",
+          "#fac858",
+          "#ee6666",
+          "#ea7ccc",
+          "#9a60b4",
+        ],
       };
       // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉
       myChart.off("click");
@@ -936,41 +1198,80 @@
       });
       myChart.setOption(option);
     },
+
     creatDom(params) {
-      const e = params.event;
-      const div = document.getElementById("customDialog");
-      div.style.display = "block";
-      div.style.left = e.offsetX + 50 + "px";
-      div.style.top = e.offsetY - 50 + "px";
-      const data = this.infoOfPersons?.find(
-        (i) => i.id == params.data.personId
-      );
-      const obj = {
-        id: params.data.id,
-        name:
-          data?.NAME?.map((e, i) => {
-            i += 1;
-            return e["content" + i];
-          }).join("銆�") ?? "",
-        alias:
-          data?.ALIAS?.map((e, i) => {
-            i += 1;
-            return e["content" + i];
-          }).join("銆�") ?? "",
-        nativePlace:
-          data?.NATIVE_PLACE?.map((e, i) => {
-            i += 1;
-            return e["content" + i];
-          }).join("銆�") ?? "",
-        medicalBranch:
-          data?.MEDICAL_BRANCH?.map((e, i) => {
-            i += 1;
-            return e["content" + i];
-          }).join("銆�") ?? "",
-        biography: data?.BIOGRAPHY ?? ""
-      };
-      this.detailData = obj;
+      const id = params.data.id.split("_")[0];
+      const type = params.data.id.split("_")[1];
+      if (type == "p") {
+        // 浜�
+        const e = params.event;
+        const div = document.getElementById("customDialog");
+        div.style.display = "block";
+        div.style.left = e.offsetX + 50 + "px";
+        div.style.top = e.offsetY - 50 + "px";
+        const data = this.infoOfPersons?.find((i) => i.id == id);
+        const obj = {
+          id: id,
+          name:
+            data?.NAME?.map((e, i) => {
+              i += 1;
+              return e["content" + i];
+            }).join("銆�") ?? "",
+          alias:
+            data?.ALIAS?.map((e, i) => {
+              i += 1;
+              return e["content" + i];
+            }).join("銆�") ?? "",
+          nativePlace:
+            data?.NATIVE_PLACE?.map((e, i) => {
+              i += 1;
+              return e["content" + i];
+            }).join("銆�") ?? "",
+          medicalBranch:
+            data?.MEDICAL_BRANCH?.map((e, i) => {
+              i += 1;
+              return e["content" + i];
+            }).join("銆�") ?? "",
+          biography: data?.BIOGRAPHY ?? "",
+        };
+        this.detailData = obj;
+      }
+      if (type == "s") {
+        // 瀛︽淳
+        const e = params.event;
+        const div = document.getElementById("schoolDialog");
+        div.style.display = "block";
+        div.style.left = e.offsetX + 50 + "px";
+        div.style.top = e.offsetY - 50 + "px";
+        const data = this.infoOfPersons?.find((i) => i.id == id);
+        const obj = {
+          id: params.data.id,
+          name:
+            data?.NAME?.map((e, i) => {
+              i += 1;
+              return e["content" + i];
+            }).join("銆�") ?? "",
+          alias:
+            data?.ALIAS?.map((e, i) => {
+              i += 1;
+              return e["content" + i];
+            }).join("銆�") ?? "",
+          nativePlace:
+            data?.NATIVE_PLACE?.map((e, i) => {
+              i += 1;
+              return e["content" + i];
+            }).join("銆�") ?? "",
+          medicalBranch:
+            data?.MEDICAL_BRANCH?.map((e, i) => {
+              i += 1;
+              return e["content" + i];
+            }).join("銆�") ?? "",
+          biography: data?.BIOGRAPHY ?? "",
+        };
+        this.detailData = obj;
+      }
     },
+
     closeDom() {
       const div = document.getElementById("customDialog");
       div.style.display = "none";
@@ -996,7 +1297,7 @@
       academicSearch({
         keyword: key,
         page: this.personPageInfo.page,
-        pageSize: this.personPageInfo.limit
+        pageSize: this.personPageInfo.limit,
       }).then((res) => {
         this.personList = res.list.map((item) => {
           return {
@@ -1017,7 +1318,7 @@
             division:
               item.medicalBranchList && item.medicalBranchList.length
                 ? item.medicalBranchList[0].content1
-                : "-"
+                : "-",
           };
         });
         this.showPerson = true;
@@ -1027,7 +1328,7 @@
     spaceTimeArr(id) {
       // 鍏崇郴鍥剧殑鏁版嵁
       uni.navigateTo({
-        url: "/pages/character/detail?id=" + id
+        url: "/pages/character/detail?id=" + id,
       });
     },
     // 鑾峰彇鏈濅唬echarts鐨勬暟鎹�
@@ -1051,7 +1352,7 @@
         this.hotKeyList = indexList.map((item) => {
           return {
             id: item,
-            name: res.object[item]
+            name: res.object[item],
           };
         });
       });
@@ -1066,12 +1367,110 @@
       //     document.querySelector(".fbox1").style.height = box1Height + "px";
       //   }
       // });
-    }
-  }
+    },
+  },
 };
 </script>
 
 <style>
+.fromTable {
+  width: 100%;
+  padding: 40px 0;
+  box-sizing: border-box;
+}
+
+.fromTable >>> .el-table thead th.el-table__cell {
+  background-color: rgb(194 208 217) !important;
+  color: #333;
+  font-weight: normal;
+  font-size: 14px;
+}
+
+.customDrawer >>> .el-drawer__header {
+  margin-bottom: 20px;
+  border-bottom: 1px solid #eee;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.headerClassBg {
+  background-color: rgb(95, 127, 168);
+}
+
+.drawerTips {
+  margin-bottom: 20px;
+  color: #666;
+}
+
+.drawerTable {
+  width: 100%;
+}
+
+.drawerTable >>> .el-table thead th.el-table__cell {
+  background-color: rgb(231, 236, 239) !important;
+  color: #333;
+  font-weight: normal;
+}
+
+.tableTabs {
+  width: 100%;
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.inputItem {
+  width: 80%;
+}
+
+.drawerPage {
+  display: flex;
+  justify-content: flex-end;
+  padding: 20px 0;
+  box-sizing: border-box;
+}
+
+.drawerBtn {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.drawerContent {
+  width: 100%;
+  height: 100%;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+/* 鍒嗛〉 */
+.paging ::v-deep .btn-prev,
+.paging ::v-deep .btn-next {
+  border: 0;
+  height: 30px;
+}
+
+.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 .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;
+}
+
 #relation {
   width: 100%;
   height: 100%;

--
Gitblit v1.9.1