From 29a02350b873fa6339a7535fa929697fec9a8f84 Mon Sep 17 00:00:00 2001
From: mh-two-thousand-and-two <17391232786@163.com>
Date: 星期三, 03 四月 2024 18:44:07 +0800
Subject: [PATCH] 三
---
pages/repository/repository.vue | 186 +++++++++++++++++++++++++++++++++++++--------
1 files changed, 151 insertions(+), 35 deletions(-)
diff --git a/pages/repository/repository.vue b/pages/repository/repository.vue
index 8ec7fa5..b884d33 100644
--- a/pages/repository/repository.vue
+++ b/pages/repository/repository.vue
@@ -1,8 +1,8 @@
<template>
<view class="relative">
- <headNav />
+ <headNav :idIndex="idIndex" text="涓尰浜虹墿鏁版嵁搴�" />
<view class="Midde flex">
- <el-button class="MiddeBack" size="mini" @click="goBack">杩斿洖</el-button>
+ <el-button class="MiddeBack flex flex-center" @click="goBack">杩斿洖</el-button>
<view style="width: 70%;" class="flex flex-center flex-column">
<view class="" style="font-weight: bold;font-size: .20rem;">鏉庢椂鐝�</view>
<ul class="flex" style="line-height: 1.2;margin: .15rem 0 ;">
@@ -18,30 +18,35 @@
<view class="flex" style="width: 100%;margin: .25rem 0 .15rem 0;">
<view class="">
<!-- <el-button style="padding: 10rpx;" size="mini" icon="el-icon-folder-add">鏀惰棌</el-button> -->
- <el-button style="padding: .05rem .085rem;" size="mini" icon="el-icon-set-up">寮曠敤</el-button>
+ <el-button style="padding: .05rem .085rem;" class="yinyong flex">
+ <img src="@/static/image/yinyong.png" alt="" />寮曠敤</el-button>
</view>
- <view class="" style="font-size: .12rem;color: #244A7B;">闃呰鏇村></view>
+ <view class="" style="font-size: .12rem;color: #244A7B;" @click="ProfileClick">闃呰鏇村></view>
</view>
</view>
<view class="" style="width: 5%;"></view>
</view>
<el-row style="padding: 0 1.2rem 0;padding-top: .24rem;">
<!-- 宸︿晶 -->
- <el-col :span="5" style="padding-right: .2rem;width: 2.8rem;">
+ <el-col :span="5" class="BoxLeft" style="padding-right: .2rem;width: 2.8rem;">
<div class="grid-content bg-purple-dark flex flex-column">
<el-card class="box-card" style="width: 100%;height: 2.06rem;">
- <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
- <span style="margin-left: .12rem;">鍏崇郴鍥捐氨</span>
- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button>
+ <div class="clearfix flex" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
+ <span style="margin-left: .12rem;font-size: .14rem;font-weight: 900;">鍏崇郴鍥捐氨</span>
+ <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0;" type="text"></el-button> -->
+ <img src="@/static/image/fangda.png" @click="fangdaClick(1)"
+ style="width: .18rem;height: .18rem;" alt="" />
</div>
<view id="relation" style="height: 1.51rem;width: 100%;"></view>
</el-card>
<el-card class="box-card" style="width: 100%;height: 2.06rem; margin: .26rem 0;">
- <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
+ <div class="clearfix flex" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
<span>鏃剁┖鍦伴搧</span>
- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button>
+ <!-- <el-button icon="el-icon-rank" style="float: right; padding: 3px 0" type="text"></el-button> -->
+ <img src="@/static/image/fangda.png" @click="fangdaClick(2)"
+ style="width: .18rem;height: .18rem;" alt="" />
</div>
- <view id="spaceTime" style="height: 300rpx;width: 100%;position: relative;"></view>
+ <view id="spaceTime" style="height: 1.51rem;width: 100%;position: relative;"></view>
</el-card>
<el-card style="width: 100%;height: 2.06rem;">
<div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
@@ -64,7 +69,7 @@
<!-- 鍩虹淇℃伅 -->
<cc-defineTable :tableData="tableArr"></cc-defineTable>
</el-card>
- <el-card class="box-card" style=" min-height: 1.91rem; margin: 20rpx 0;">
+ <el-card class="box-card" style=" min-height: 1.91rem; margin: .2rem 0;">
<el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="浠ｈ〃钁椾綔" data-id="1" name="representative">
<Table1 :data="tableData" :columns="tableColumns" />
@@ -92,7 +97,7 @@
<div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
<span>鐩稿叧闄勮〃/鍥惧儚</span>
</div>
- <ul class="font-family" style="font-size: .12rem;line-height: 2;">
+ <ul class="font-family" style="font-size: .13rem;line-height: 2;">
<li>
[1|鍒樼倻,璋㈣搲,寮犵,绛�.鍚戜汉鏂囩爺绌剁殑鍥藉鏁版嵁鍩虹璁炬柦寤鸿[J|.涓浗鍥句功棣嗗鎶�,2016,42(5):29-39.
</li>
@@ -119,8 +124,9 @@
<view class="ProfileNav flex flex-center">
涓汉灏忎紶
</view>
- <view class="" style="padding: .44rem .3rem;min-height: 7.32rem;" >
- <view class="" style="margin-bottom: .2rem; background-color: #F0F0F0;padding: .18rem .1rem .1rem .27rem;font-size: .12rem;line-height: .24rem;font-weight: 400;">
+ <view class="" style="padding: .44rem .3rem;min-height: 7.32rem;">
+ <view class=""
+ style="margin-bottom: .2rem; background-color: #F0F0F0;padding: .18rem .1rem .1rem .27rem;font-size: .12rem;line-height: .24rem;font-weight: 400;">
<view class="" style="color: #2C2C2C;">
钑欏睍涓佷笐鍚岄噷鏃ュ博棰濆簭鍏堣�冩湀姹犵縼钁椼�婂洓褰吀鏄庛�嬪叓鍗凤紝鐨嗙簿鎸囧ゥ瀹わ紝鑼傜妧鏈兘鐤�狅紝鐝嶅洜鎾补鎯宠彍锛屽兊鎾版鍞愶紝浠ヤ究鏅虹潧锛屾湇鎸囧崡銆備笘涔嬮浄鐥呴洦瀹讹紝鍜镐互鏈嶇剦棣栧姟锛屼笉鐭ユ淳涔冨洓鑳戒箣鏈紝璋撲箣宸ц�呴洦銆備笂澹鑸嶅叾鍏紝闈炲洓涓嶅彲銆�
</view>
@@ -135,8 +141,9 @@
<!-- 杩斿洖椤堕儴 -->
- <el-col style="position: absolute;bottom: 1.44rem;left:1.20rem ;">
- <el-button icon="el-icon-download" circle @click="scrollToTop"></el-button>
+ <el-col style="position: absolute;bottom: 1rem;left:1.2rem ;">
+ <el-button style="width: .4935rem;height: .4935rem;font-size: .3rem;" icon="el-icon-download" circle
+ @click="scrollToTop"></el-button>
</el-col>
</view>
</template>
@@ -154,7 +161,11 @@
},
data() {
return {
- isProfile: true,
+ // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
+ idIndex: 0,
+ // -------
+ // 灏忎紶
+ isProfile: false,
// 鍏崇郴鍥捐氨
activeName: 'representative',
// 鍩虹淇℃伅
@@ -246,6 +257,10 @@
}]
}
},
+ onLoad(options) {
+ this.idIndex = options.id
+ console.log('optionsoptionsoptions', options.id);
+ },
mounted() {
// 鍏崇郴鍥捐氨
@@ -257,11 +272,34 @@
this.$nextTick(() => {
// 鑾峰彇绗竴涓�夐」鍗＄殑 DOM 鍏冪礌
const firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
- firstTab.style.transform = 'translateX(' + '-20px' + ')'
+ firstTab.style.transform = 'translateX(' + '-.2rem' + ')'
console.log(firstTab);
});
+
+
+ // 鐩戝惉绐楀彛澶у皬鍙樺寲
+ window.addEventListener('resize', this.relation);
},
methods: {
+ // 鏀惧ぇ鍦板浘璺宠浆
+ fangdaClick(index) {
+ console.log(index);
+ if (index == 1) {
+ console.log('璺宠浆鍏崇郴鍦板浘');
+ uni.navigateTo({
+ url: '/pages/characterRelation/characterRelation'
+ })
+ } else if (index == 2) {
+ uni.navigateTo({
+ url: '/pages/characterMap/characterMap'
+ })
+ console.log('璺宠浆鏃剁┖鍦板浘');
+ }
+ },
+ // 灏忎紶
+ ProfileClick() {
+ this.isProfile = !this.isProfile
+ },
// 杩斿洖涓婁竴椤�
goBack() {
uni.navigateBack();
@@ -277,12 +315,21 @@
handleClick(tab) {
let index = tab.$attrs['data-id'] - 1
this.$nextTick(() => {
- if (index != 0) {
- let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
- firstTab.style.transform = 'translateX(' + 100 * index + 'px)'
+ let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
+ if (index == 0) {
+ console.log('sss');
+ firstTab.style.transform = 'translateX(-' + .2 + 'rem)'
+ } else if (index == 1) {
+ firstTab.style.transform = 'translateX(' + .85 * index + 'rem)'
+ } else if (index == 2) {
+ firstTab.style.transform = 'translateX(' + .93 * index + 'rem)'
+ } else if (index == 3) {
+ firstTab.style.transform = 'translateX(' + .95 * index + 'rem)'
+ } else if (index == 4) {
+ firstTab.style.transform = 'translateX(' + .97 * index + 'rem)'
} else {
let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
- firstTab.style.transform = 'translateX(' + '-20' + 'px)'
+ firstTab.style.transform = 'translateX(' + '-.2' + 'rem)'
}
// console.log(firstTab);
})
@@ -291,6 +338,7 @@
relation() {
var chartDom = document.getElementById('relation');
var myChart = echarts.init(chartDom);
+
// 鍋囪鎮ㄦ湁鑺傜偣鍚嶇О鍜屽畠浠箣闂寸殑鍏崇郴鏁版嵁
var nodes = ['鏉庢椂鐝�', '鎴愬氨', '浼犳壙', '浜插弸', '钁椾綔'];
var relationships = [{
@@ -326,6 +374,23 @@
});
console.log(links);
+ let FontSize = 12; // 瀛椾綋澶у皬
+ let BorderWidth = 2; // 杈规澶у皬
+ let SymbolSize = 80; // 灏哄璺濈
+ // 涓嶅悓灏哄涓嬩慨鏀筫charts鐨勫瓧浣�
+ if (window.innerWidth > 2560 && window.innerWidth <= 3840) {
+ FontSize = 28
+ BorderWidth = 5
+ SymbolSize = 100
+ } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) {
+ FontSize = 28
+ BorderWidth = 4
+ SymbolSize = 90
+ } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) {
+ FontSize = 18
+ BorderWidth = 4
+ SymbolSize = 70
+ }
// 鏍规嵁nodes鍔ㄦ�佺敓鎴愯妭鐐规暟鎹�
var nodeData = nodes.map(function(node, index) {
return {
@@ -333,7 +398,9 @@
x: Math.random() * 1000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆
y: Math.random() * 600, // 璁剧疆闅忔満y鍧愭爣浣嶇疆
itemStyle: {
- color: getColorByIndex(index) // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹�
+ color: getColorByIndex(index), // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹�
+ borderWidth: BorderWidth,
+ borderColor: getColorByIndex(index + 1),
}
};
});
@@ -342,6 +409,7 @@
var colors = ['#ecf4ff', '#dd9795', '#f1edbe', '#ecf4ff', '#c5dbd8']; // 鍙互鏍规嵁瀹為檯鎯呭喌璁剧疆棰滆壊鏁扮粍
return colors[index % colors.length];
}
+
var option;
option = {
tooltip: {},
@@ -350,15 +418,16 @@
series: [{
type: 'graph',
layout: 'none',
- symbolSize: 40, // 璋冩暣鑺傜偣澶у皬
+ symbolSize: SymbolSize, // 璋冩暣鑺傜偣澶у皬
label: {
show: true,
- color: 'black' // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
+ color: 'black', // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
+ fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬
},
edgeSymbol: ['circle'],
edgeSymbolSize: [4, 10],
edgeLabel: {
- fontSize: 20
+ fontSize: 40
},
data: nodeData,
links: [{
@@ -626,6 +695,35 @@
</script>
<style>
+ /* Table1琛ㄦ牸閲岄潰鐨勬暟鎹� */
+ ::v-deep .is-leaf {
+ .cell {
+ font-size: .14rem !important;
+ height: .4rem !important;
+ line-height: .4rem !important;
+ }
+ }
+
+ ::v-deep .el-table__body {
+ .cell {
+ font-size: .14rem !important;
+ height: .4rem !important;
+ line-height: .4rem !important;
+ }
+ }
+
+ /* --------------- */
+ @media screen and (min-width:2560px)and (max-width:3840px) {}
+
+ .BoxLeft ::v-deep.el-card__body {
+ padding: .1rem .11rem !important;
+ }
+
+ ::v-deep .el-tabs__content {
+ line-height: 1;
+ }
+
+
/* 涓汉灏忎紶 ------------------*/
::v-deep .el-dialog__header {
display: none;
@@ -634,7 +732,8 @@
::v-deep .el-dialog__body {
padding: 0;
}
- ::v-deep .el-dialog__wrapper{
+
+ ::v-deep .el-dialog__wrapper {
z-index: 999999999999999 !important;
}
@@ -690,10 +789,9 @@
.Midde {
background-color: #dbeafd;
color: #000;
- /* padding: 5rpx 40rpx 0; */
- padding: .24rem .18rem;
align-items: flex-start;
-
+ padding: .18rem .24rem ;
+
view {
color: #000;
}
@@ -701,9 +799,26 @@
.MiddeBack {
width: 0.6rem;
height: 0.24rem;
+ font-size: .12rem;
+ padding: 0;
+ border: 1px solid #9E9E9E;
}
}
+ .yinyong {
+ font-size: .12rem;
+
+ img {
+ width: .12rem;
+ height: .1rem;
+ vertical-align: top;
+ margin-right: .03rem;
+ }
+ }
+
+ .el-dialog__wrapper {
+ background: rgba(0, 0, 0, .3);
+ }
.fz {
/* line-height: 1.3;
@@ -734,7 +849,7 @@
}
::v-deep .el-tabs__nav {
- margin-bottom: .2rem !important;
+ margin-bottom: .1rem !important;
}
@@ -746,8 +861,8 @@
::v-deep .el-tabs__item {
width: 1rem;
font-size: .14rem;
- line-height: 40rpx;
- height: 40rpx;
+ line-height: .4rem;
+ height: .4rem;
}
::v-deep .el-tabs__header {
@@ -764,7 +879,7 @@
}
::v-deep .el-tabs__active-bar {
- top: .3rem !important;
+ top: .37rem !important;
}
::v-deep .el-table::before {
@@ -773,6 +888,7 @@
.BoxRight ::v-deep.el-card__body {
padding: .2rem .14rem !important;
+
}
.BoxRight .box-card {
--
Gitblit v1.9.1