From c423765d8a5ff0c58d23bb0a31af7df6c1fad95c Mon Sep 17 00:00:00 2001
From: YM <479443481@qq.com>
Date: 星期五, 26 七月 2024 16:10:25 +0800
Subject: [PATCH] 1
---
src/pages/repository/repository.vue | 1787 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 951 insertions(+), 836 deletions(-)
diff --git a/src/pages/repository/repository.vue b/src/pages/repository/repository.vue
index 7d3d912..734b878 100644
--- a/src/pages/repository/repository.vue
+++ b/src/pages/repository/repository.vue
@@ -1,889 +1,1004 @@
<template>
- <view class="relative">
- <headNav :idIndex="idIndex" text="涓尰浜虹墿鏁版嵁搴�" />
- <view class="Midde flex">
- <el-button class="MiddeBack flex flex-center" @click="goBack">杩斿洖</el-button>
- <view style="width: 70%;" class="flex flex-center flex-column">
- <view style="font-weight: bold;font-size: .20rem;">鏉庢椂鐝�</view>
- <ul class="flex" style="line-height: 1.2;margin: .15rem 0 ;">
- <li v-for="item in 4"
- style="background-color: #fff; padding: 0 .08rem ; border: .01rem solid #000;border-radius:.1rem ;font-size: .12rem;text-align: center;margin-right: .15rem;">
- VSDS</li>
- </ul>
- <view class="fz font-family"
- style="font-size: .13rem;font-weight: normal;line-height: .2rem;letter-spacing: .03rem;">
- 鏉庢椂鐝�(1518骞�-1593骞�)锛屽瓧:
- 涓滅挧锛屾椂浜鸿皳涔�:鏉庝笢鐠с�傚彿婵掓箹锛屾櫄骞磋嚜鍙锋繏婀栧北浜猴紝婀栧寳钖窞(浠婃箹鍖楃渷榛勫唸甯傝柂鏄ュ幙钖窞闀�)浜猴紝姹夋棌锛岀敓浜庢槑姝﹀畻姝ｅ痉鍗佷笁骞�(鍏厓1518骞�)锛屽崚浜庣瀹椾竾鍘嗕簩鍗佷簩骞�(鍏厓1593骞�)銆傛槸涓浗鏄庝唬涓庝竾瀵嗘枊榻愬悕鐨勫尰瀛﹀銆佽嵂鐗╁瀹躲�佸崥鐗╁瀹躲�佽憲杩板銆傛潕鏃剁弽瀵归亾瀹跺尰瀛︾殑缁ф壙鏄鏂归潰鐨勶紝鏇惧弬鑰冨巻浠ｆ湁鍏冲尰鑽強鍏跺鏈功绫嶅叓鐧句綑绉嶏紝缁撳悎鑷韩缁忛獙鍜岃皟鏌ョ爺绌讹紝鍘嗘椂27骞寸紪鎴愩�婃湰鑽夌翰鐩�嬩竴涔︼紝鏄垜鍥藉彜浠ｈ嵂鐗╁鐨勬�荤粨鎬у法钁楋紝鍦ㄥ浗鍐呭鍧囨湁寰堥珮鐨勮瘎浠凤紝宸叉湁鍑犵鏂囧瓧鐨勮瘧鏈垨鑺傝瘧鏈紝鍏惰憲鏈夈�婃繏婀栬剦瀛︺��
- </view>
- <view class="flex" style="width: 100%;margin: .25rem 0 .15rem 0;">
- <view >
- <!-- <el-button style="padding: 10rpx;" size="mini" icon="el-icon-folder-add">鏀惰棌</el-button> -->
- <el-button style="padding: .05rem .085rem;" class="yinyong flex">
- <img src="@/static/image/yinyong.png" alt="" />寮曠敤</el-button>
- </view>
- <view style="font-size: .12rem;color: #244A7B;" @click="ProfileClick">闃呰鏇村></view>
- </view>
- </view>
- <view style="width: 5%;"></view>
- </view>
- <el-row style="padding: 0 1.2rem 0;padding-top: .24rem;">
- <!-- 宸︿晶 -->
- <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 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 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> -->
- <img src="@/static/image/fangda.png" @click="fangdaClick(2)"
- style="width: .18rem;height: .18rem;" alt="" />
- </div>
- <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;">
- <span>鏉ユ簮</span>
- </div>
- <ul class="font-family" style="height: 300rpx;font-size: .12rem;line-height: .3rem;">
- <li>1.銆婃槑鍙猜峰嵎浜岀櫨涔濆崄涔澛峰垪浣滃搧. p52</li>
- <li>2.銆婅繘(鏈崏绾茬洰)鐤忋�� p52</li>
- </ul>
- </el-card>
- </div>
- </el-col>
- <!-- 鍙充晶 -->
- <el-col :span="18" class="BoxRight">
- <div class="grid-content bg-purple-dark" style="width: 100%;">
- <el-card class="box-card" style="padding: 0;">
- <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
- <span>鍩虹淇℃伅</span>
- </div>
- <!-- 鍩虹淇℃伅 -->
- <cc-defineTable :tableData="tableArr"></cc-defineTable>
- </el-card>
- <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" />
- </el-tab-pane>
- <el-tab-pane label="浜插睘鍏崇郴" data-id="2" name="family ">
- 浜插睘鍏崇郴
- </el-tab-pane>
- <el-tab-pane label="甯堟壙鍏崇郴" data-id="3" name="mentoring ">甯堟壙鍏崇郴</el-tab-pane>
- <el-tab-pane label="绀句細鍏崇郴" data-id="4" name="society">绀句細鍏崇郴</el-tab-pane>
- <el-tab-pane label="娲诲姩骞磋氨" data-id="5" name="activity">娲诲姩骞磋氨</el-tab-pane>
- </el-tabs>
- </el-card>
- <el-card style=" margin-bottom: .2rem ;">
- <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
- <span>鐩稿叧闄勮〃/鍥惧儚</span>
- </div>
- <view class="flex">
- <el-image v-for="item in 4" :key="item" style="width: 2.05rem; height: 1.4rem"
- src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
- fit="fill"></el-image>
- </view>
- </el-card>
- <el-card class="box-card">
- <div class="clearfix" style="font-weight: 900;font-size: .14rem;padding-bottom: .1rem;">
- <span>鐩稿叧闄勮〃/鍥惧儚</span>
- </div>
- <ul class="font-family" style="font-size: .13rem;line-height: 2;">
- <li>
- [1|鍒樼倻,璋㈣搲,寮犵,绛�.鍚戜汉鏂囩爺绌剁殑鍥藉鏁版嵁鍩虹璁炬柦寤鸿[J|.涓浗鍥句功棣嗗鎶�,2016,42(5):29-39.
- </li>
- <li>
- [2|鍛ㄦ櫒.鍥介檯鏁板瓧浜烘枃鐮旂┒鐗瑰緛涓庣煡璇嗙粨鏋剕J鍥句功棣嗚鍧�2017.37(4):1-8.
- </li>
- <li>
- [3]鍌呭痉鍗�,浜庣繝鑹�,鏉庢槬鍗�,鍏充簬鍒涘缓鈥�20 涓栫邯涓浗浜虹墿浼犺璧勬枡鍏ㄦ枃鏁版嵁搴撴不鐨勬瀯鎯砙宸�,涓浗鑰呭紩,2009,714):24-26.
- </li>
- <li>
- [4|浜庣繝鑹�,鍌呭痉鍗�,鏉庢槬鍗�,鍏充簬鈥�20涓栫邯涓浗浜虹墿浼犺璧勬枡鍏ㄦ枃鏁版嵁搴撴不鐨勮繘灞曚笌鍥版儜[J1.涓浗甯稿紩,2012.10111:20-22
- </li>
- <li>
- [5]璐炬銆傘�婃箹鍗楄繎浠ｄ汉鐗╂暟鎹巼銆嬭祫婧愭敹褰曡寖鍥寸爺绌秥J娌冲崡鍥句功棣嗗鍒�,2015,35(7):126.127.140.
- </li>
- </ul>
- </el-card>
- </div>
- </el-col>
- </el-row>
+ <view class="relative">
+ <headNav :idIndex="idIndex" text="鍘嗕唬浜虹墿" />
+ <view class="Midde flex">
+ <el-button class="MiddeBack flex flex-center" @click="goBack"
+ >杩斿洖</el-button
+ >
+ <view style="width: 70%" class="flex flex-center flex-column">
+ <view style="font-weight: bold; font-size: 0.2rem">鏉庢椂鐝�</view>
+ <ul class="flex" style="line-height: 1.2; margin: 0.15rem 0">
+ <li
+ v-for="item in 4"
+ style="
+ background-color: #fff;
+ padding: 0 0.08rem;
+ border: 0.01rem solid #000;
+ border-radius: 0.1rem;
+ font-size: 0.12rem;
+ text-align: center;
+ margin-right: 0.15rem;
+ "
+ >
+ VSDS
+ </li>
+ </ul>
+ <view
+ class="fz font-family"
+ style="
+ font-size: 0.13rem;
+ font-weight: normal;
+ line-height: 0.2rem;
+ letter-spacing: 0.03rem;
+ "
+ >
+ 鏉庢椂鐝�(1518骞�-1593骞�)锛屽瓧:
+ 涓滅挧锛屾椂浜鸿皳涔�:鏉庝笢鐠с�傚彿婵掓箹锛屾櫄骞磋嚜鍙锋繏婀栧北浜猴紝婀栧寳钖窞(浠婃箹鍖楃渷榛勫唸甯傝柂鏄ュ幙钖窞闀�)浜猴紝姹夋棌锛岀敓浜庢槑姝﹀畻姝ｅ痉鍗佷笁骞�(鍏厓1518骞�)锛屽崚浜庣瀹椾竾鍘嗕簩鍗佷簩骞�(鍏厓1593骞�)銆傛槸涓浗鏄庝唬涓庝竾瀵嗘枊榻愬悕鐨勫尰瀛﹀銆佽嵂鐗╁瀹躲�佸崥鐗╁瀹躲�佽憲杩板銆傛潕鏃剁弽瀵归亾瀹跺尰瀛︾殑缁ф壙鏄鏂归潰鐨勶紝鏇惧弬鑰冨巻浠ｆ湁鍏冲尰鑽強鍏跺鏈功绫嶅叓鐧句綑绉嶏紝缁撳悎鑷韩缁忛獙鍜岃皟鏌ョ爺绌讹紝鍘嗘椂27骞寸紪鎴愩�婃湰鑽夌翰鐩�嬩竴涔︼紝鏄垜鍥藉彜浠ｈ嵂鐗╁鐨勬�荤粨鎬у法钁楋紝鍦ㄥ浗鍐呭鍧囨湁寰堥珮鐨勮瘎浠凤紝宸叉湁鍑犵鏂囧瓧鐨勮瘧鏈垨鑺傝瘧鏈紝鍏惰憲鏈夈�婃繏婀栬剦瀛︺��
+ </view>
+ <view class="flex" style="width: 100%; margin: 0.25rem 0 0.15rem 0">
+ <view>
+ <!-- <el-button style="padding: 10rpx;" size="mini" icon="el-icon-folder-add">鏀惰棌</el-button> -->
+ <el-button style="padding: 0.05rem 0.085rem" class="yinyong flex">
+ <img src="@/static/image/yinyong.png" alt="" />寮曠敤</el-button
+ >
+ </view>
+ <view style="font-size: 0.12rem; color: #244a7b" @click="ProfileClick"
+ >闃呰鏇村></view
+ >
+ </view>
+ </view>
+ <view style="width: 5%"></view>
+ </view>
+ <el-row style="padding: 0 1.2rem 0; padding-top: 0.24rem">
+ <!-- 宸︿晶 -->
+ <el-col
+ :span="5"
+ class="BoxLeft"
+ style="padding-right: 0.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 flex"
+ style="
+ font-weight: 900;
+ font-size: 0.14rem;
+ padding-bottom: 0.1rem;
+ "
+ >
+ <span
+ style="
+ margin-left: 0.12rem;
+ font-size: 0.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: 0.18rem; height: 0.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: 0.26rem 0"
+ >
+ <div
+ class="clearfix flex"
+ style="
+ font-weight: 900;
+ font-size: 0.14rem;
+ padding-bottom: 0.1rem;
+ "
+ >
+ <span>鏃剁┖鍦板浘</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(2)"
+ style="width: 0.18rem; height: 0.18rem"
+ alt=""
+ />
+ </div>
+ <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: 0.14rem;
+ padding-bottom: 0.1rem;
+ "
+ >
+ <span>鏉ユ簮</span>
+ </div>
+ <ul
+ class="font-family"
+ style="height: 300rpx; font-size: 0.12rem; line-height: 0.3rem"
+ >
+ <li>1.銆婃槑鍙猜峰嵎浜岀櫨涔濆崄涔澛峰垪浣滃搧. p52</li>
+ <li>2.銆婅繘(鏈崏绾茬洰)鐤忋�� p52</li>
+ </ul>
+ </el-card>
+ </div>
+ </el-col>
+ <!-- 鍙充晶 -->
+ <el-col :span="18" class="BoxRight">
+ <div class="grid-content bg-purple-dark" style="width: 100%">
+ <el-card class="box-card" style="padding: 0">
+ <div
+ class="clearfix"
+ style="
+ font-weight: 900;
+ font-size: 0.14rem;
+ padding-bottom: 0.1rem;
+ "
+ >
+ <span>鍩虹淇℃伅</span>
+ </div>
+ <!-- 鍩虹淇℃伅 -->
+ <cc-defineTable :tableData="tableArr"></cc-defineTable>
+ </el-card>
+ <el-card
+ class="box-card"
+ style="min-height: 1.91rem; margin: 0.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" />
+ </el-tab-pane>
+ <el-tab-pane label="浜插睘鍏崇郴" data-id="2" name="family ">
+ 浜插睘鍏崇郴
+ </el-tab-pane>
+ <el-tab-pane label="甯堟壙鍏崇郴" data-id="3" name="mentoring "
+ >甯堟壙鍏崇郴</el-tab-pane
+ >
+ <el-tab-pane label="绀句細鍏崇郴" data-id="4" name="society"
+ >绀句細鍏崇郴</el-tab-pane
+ >
+ <el-tab-pane label="娲诲姩骞磋氨" data-id="5" name="activity"
+ >娲诲姩骞磋氨</el-tab-pane
+ >
+ </el-tabs>
+ </el-card>
+ <el-card style="margin-bottom: 0.2rem">
+ <div
+ class="clearfix"
+ style="
+ font-weight: 900;
+ font-size: 0.14rem;
+ padding-bottom: 0.1rem;
+ "
+ >
+ <span>鐩稿叧闄勮〃/鍥惧儚</span>
+ </div>
+ <view class="flex">
+ <el-image
+ v-for="item in 4"
+ :key="item"
+ style="width: 2.05rem; height: 1.4rem"
+ src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+ fit="fill"
+ ></el-image>
+ </view>
+ </el-card>
+ <el-card class="box-card">
+ <div
+ class="clearfix"
+ style="
+ font-weight: 900;
+ font-size: 0.14rem;
+ padding-bottom: 0.1rem;
+ "
+ >
+ <span>鐩稿叧闄勮〃/鍥惧儚</span>
+ </div>
+ <ul class="font-family" style="font-size: 0.13rem; line-height: 2">
+ <li>
+ [1|鍒樼倻,璋㈣搲,寮犵,绛�.鍚戜汉鏂囩爺绌剁殑鍥藉鏁版嵁鍩虹璁炬柦寤鸿[J|.涓浗鍥句功棣嗗鎶�,2016,42(5):29-39.
+ </li>
+ <li>
+ [2|鍛ㄦ櫒.鍥介檯鏁板瓧浜烘枃鐮旂┒鐗瑰緛涓庣煡璇嗙粨鏋剕J鍥句功棣嗚鍧�2017.37(4):1-8.
+ </li>
+ <li>
+ [3]鍌呭痉鍗�,浜庣繝鑹�,鏉庢槬鍗�,鍏充簬鍒涘缓鈥�20
+ 涓栫邯涓浗浜虹墿浼犺璧勬枡鍏ㄦ枃鏁版嵁搴撴不鐨勬瀯鎯砙宸�,涓浗鑰呭紩,2009,714):24-26.
+ </li>
+ <li>
+ [4|浜庣繝鑹�,鍌呭痉鍗�,鏉庢槬鍗�,鍏充簬鈥�20涓栫邯涓浗浜虹墿浼犺璧勬枡鍏ㄦ枃鏁版嵁搴撴不鐨勮繘灞曚笌鍥版儜[J1.涓浗甯稿紩,2012.10111:20-22
+ </li>
+ <li>
+ [5]璐炬銆傘�婃箹鍗楄繎浠ｄ汉鐗╂暟鎹巼銆嬭祫婧愭敹褰曡寖鍥寸爺绌秥J娌冲崡鍥句功棣嗗鍒�,2015,35(7):126.127.140.
+ </li>
+ </ul>
+ </el-card>
+ </div>
+ </el-col>
+ </el-row>
- <!-- 涓汉灏忎紶 -->
- <el-dialog :visible.sync="isProfile">
- <view class="ProfileNav flex flex-center">
- 涓汉灏忎紶
- </view>
- <view style="padding: .44rem .3rem;min-height: 7.32rem;">
- <view
- style="margin-bottom: .2rem; background-color: #F0F0F0;padding: .18rem .1rem .1rem .27rem;font-size: .12rem;line-height: .24rem;font-weight: 400;">
- <view style="color: #2C2C2C;">
- 钑欏睍涓佷笐鍚岄噷鏃ュ博棰濆簭鍏堣�冩湀姹犵縼钁椼�婂洓褰吀鏄庛�嬪叓鍗凤紝鐨嗙簿鎸囧ゥ瀹わ紝鑼傜妧鏈兘鐤�狅紝鐝嶅洜鎾补鎯宠彍锛屽兊鎾版鍞愶紝浠ヤ究鏅虹潧锛屾湇鎸囧崡銆備笘涔嬮浄鐥呴洦瀹讹紝鍜镐互鏈嶇剦棣栧姟锛屼笉鐭ユ淳涔冨洓鑳戒箣鏈紝璋撲箣宸ц�呴洦銆備笂澹鑸嶅叾鍏紝闈炲洓涓嶅彲銆�
- </view>
- <view class="flex">
- <view ></view>
- <view style="font-weight: 700;color: #2C2C2C;">鈥斺�斻�婂鍏湇鑰冦�婸 3</view>
- </view>
- </view>
- </view>
- </el-dialog>
+ <!-- 涓汉灏忎紶 -->
+ <el-dialog :visible.sync="isProfile">
+ <view class="ProfileNav flex flex-center"> 涓汉灏忎紶 </view>
+ <view style="padding: 0.44rem 0.3rem; min-height: 7.32rem">
+ <view
+ style="
+ margin-bottom: 0.2rem;
+ background-color: #f0f0f0;
+ padding: 0.18rem 0.1rem 0.1rem 0.27rem;
+ font-size: 0.12rem;
+ line-height: 0.24rem;
+ font-weight: 400;
+ "
+ >
+ <view style="color: #2c2c2c">
+ 钑欏睍涓佷笐鍚岄噷鏃ュ博棰濆簭鍏堣�冩湀姹犵縼钁椼�婂洓褰吀鏄庛�嬪叓鍗凤紝鐨嗙簿鎸囧ゥ瀹わ紝鑼傜妧鏈兘鐤�狅紝鐝嶅洜鎾补鎯宠彍锛屽兊鎾版鍞愶紝浠ヤ究鏅虹潧锛屾湇鎸囧崡銆備笘涔嬮浄鐥呴洦瀹讹紝鍜镐互鏈嶇剦棣栧姟锛屼笉鐭ユ淳涔冨洓鑳戒箣鏈紝璋撲箣宸ц�呴洦銆備笂澹鑸嶅叾鍏紝闈炲洓涓嶅彲銆�
+ </view>
+ <view class="flex">
+ <view></view>
+ <view style="font-weight: 700; color: #2c2c2c"
+ >鈥斺�斻�婂鍏湇鑰冦�婸 3</view
+ >
+ </view>
+ </view>
+ </view>
+ </el-dialog>
-
-
- <!-- 杩斿洖椤堕儴 -->
- <el-col style="position: absolute;bottom: 1rem;left:1.2rem ;">
- <el-button style="width: .50rem;height: .50rem;font-size: .3rem;" icon="el-icon-top" circle
- @click="scrollToTop"></el-button>
- </el-col>
- </view>
+ <!-- 杩斿洖椤堕儴 -->
+ <el-col style="position: absolute; bottom: 1rem; left: 1.2rem">
+ <el-button
+ style="width: 0.5rem; height: 0.5rem; font-size: 0.3rem"
+ icon="el-icon-top"
+ circle
+ @click="scrollToTop"
+ ></el-button>
+ </el-col>
+ </view>
</template>
<script>
- import * as echarts from 'echarts';
- import 'echarts/extension/bmap/bmap';
- import {
- loadBMap
- } from "@/static/map.js"
- import Table1 from '@/components/table1/table1.vue'
- export default {
- components: {
- Table1
- },
- data() {
- return {
- // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
- idIndex: 0,
- // -------
- // 灏忎紶
- isProfile: false,
- // 鍏崇郴鍥捐氨
- activeName: 'representative',
- // 鍩虹淇℃伅
- tableArr: [{
- 'list': [{
- 'name': '鍒悕',
- 'value': '鏉庝笢鐠с�佽嵂鍦ｃ�佹潕涓変竷'
- },
- {
- 'name': '瀛�',
- 'value': '涓滅挧'
- },
- {
- 'name': '鍙�',
- 'value': '棰戞箹灞变汉'
- },
- {
- 'name': '鎵�澶勬椂鏈�',
- 'value': '鏄庢湞'
- },
- {
- 'name': '姘戞棌',
- 'value': '166g'
- }
- ]
+import * as echarts from "echarts";
+import "echarts/extension/bmap/bmap";
+import { loadBMap } from "@/static/map.js";
+import Table1 from "@/components/table1/table1.vue";
+export default {
+ components: {
+ Table1
+ },
+ data() {
+ return {
+ // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ
+ idIndex: 0,
+ // -------
+ // 灏忎紶
+ isProfile: false,
+ // 鍏崇郴鍥捐氨
+ activeName: "representative",
+ // 鍩虹淇℃伅
+ tableArr: [
+ {
+ list: [
+ {
+ name: "鍒悕",
+ value: "鏉庝笢鐠с�佽嵂鍦ｃ�佹潕涓変竷"
+ },
+ {
+ name: "瀛�",
+ value: "涓滅挧"
+ },
+ {
+ name: "鍙�",
+ value: "棰戞箹灞变汉"
+ },
+ {
+ name: "鎵�澶勬椂鏈�",
+ value: "鏄庢湞"
+ },
+ {
+ name: "姘戞棌",
+ value: "166g"
+ }
+ ]
+ },
+ {
+ list: [
+ {
+ name: "绫嶈疮",
+ value: "榛勫窞搴滆柂宸� (浠婃箹鍖楃渷钖槬鍘�)"
+ },
+ {
+ name: "鎬у埆",
+ value: "鐢�"
+ },
+ {
+ name: "鑱屽畼",
+ value: "澶尰闄㈠垽"
+ },
+ {
+ name: "娴佹淳",
+ value: "鍖荤粡瀛︽淳"
+ },
+ {
+ name: "瀛︽湳鐗圭偣",
+ value: "鑰冨彜璇佷粖銆佺┓绌剁墿鐞�"
+ }
+ ]
+ }
+ ],
+ // 浠ｈ〃钁椾綔
+ tableColumns: [
+ {
+ prop: "worksName",
+ label: "浣滃搧鍚�"
+ },
+ {
+ prop: "works",
+ label: "浣滃搧"
+ },
+ {
+ prop: "literature",
+ label: "鏂囩尞鍏崇郴"
+ },
+ {
+ prop: "epoch",
+ label: "钁椾綔鏃舵湡"
+ },
+ {
+ prop: "category",
+ label: "绫诲埆"
+ }
+ // { type: 'button', action: 'edit', label: 'Edit' }
+ ],
+ tableData: [
+ {
+ worksName: "鏈崏绾茬洰",
+ works: "鏉庝簩鐗�",
+ literature: "浣滆��",
+ epoch: "鐜颁唬",
+ category: "涓尰瀛�",
+ id: 1
+ },
+ {
+ worksName: "鏈崏绾茬洰",
+ works: "鏉庝簩鐗�",
+ literature: "浣滆��",
+ epoch: "鐜颁唬",
+ category: "涓尰瀛�",
+ id: 1
+ }
+ ]
+ };
+ },
+ onLoad(options) {
+ this.idIndex = options.id;
+ },
+ mounted() {
+ // 鍏崇郴鍥捐氨
+ this.relation();
+ // 鏃剁┖鍦板浘
+ loadBMap("5USVDAhhS4ssz44HLq3gNPZai7naXf4Q").then(() => {
+ this.spaceTime();
+ });
+ this.$nextTick(() => {
+ // 鑾峰彇绗竴涓�夐」鍗＄殑 DOM 鍏冪礌
+ const firstTab = this.$refs.tabs.$el.querySelector(
+ ".el-tabs__active-bar"
+ );
+ firstTab.style.transform = "translateX(" + "-.2rem" + ")";
+ });
- },
- {
- 'list': [{
- 'name': '绫嶈疮',
- 'value': '榛勫窞搴滆柂宸� (浠婃箹鍖楃渷钖槬鍘�)'
- },
- {
- 'name': '鎬у埆',
- 'value': '鐢�'
- },
- {
- 'name': '鑱屽畼',
- 'value': '澶尰闄㈠垽'
- },
- {
- 'name': '娴佹淳',
- 'value': '鍖荤粡瀛︽淳'
- },
- {
- 'name': '瀛︽湳鐗圭偣',
- 'value': '鑰冨彜璇佷粖銆佺┓绌剁墿鐞�'
- }
- ]
- }
- ],
- // 浠ｈ〃钁椾綔
- tableColumns: [{
- prop: 'worksName',
- label: '浣滃搧鍚�'
- },
- {
- prop: 'works',
- label: '浣滃搧'
- },
- {
- prop: 'literature',
- label: '鏂囩尞鍏崇郴'
- },
- {
- prop: 'epoch',
- label: '钁椾綔鏃朵唬'
- }, {
- prop: 'category',
- label: '绫诲埆'
- },
- // { type: 'button', action: 'edit', label: 'Edit' }
- ],
- tableData: [{
- worksName: '鏈崏绾茬洰',
- works: '鏉庝簩鐗�',
- literature: '浣滆��',
- epoch: '鐜颁唬',
- category: '涓尰瀛�',
- id: 1
- }, {
- worksName: '鏈崏绾茬洰',
- works: '鏉庝簩鐗�',
- literature: '浣滆��',
- epoch: '鐜颁唬',
- category: '涓尰瀛�',
- id: 1
+ // 鐩戝惉绐楀彛澶у皬鍙樺寲
+ window.addEventListener("resize", this.relation);
+ },
+ methods: {
+ // 鏀惧ぇ鍦板浘璺宠浆
+ fangdaClick(index) {
+ if (index == 1) {
+ uni.navigateTo({
+ url: "/pages/character/index"
+ });
+ } else if (index == 2) {
+ uni.navigateTo({
+ url: "/pages/characterMap/characterMap"
+ });
+ }
+ },
+ // 灏忎紶
+ ProfileClick() {
+ this.isProfile = !this.isProfile;
+ },
+ // 杩斿洖涓婁竴椤�
+ goBack() {
+ this.$router.go(-1);
+ },
+ // 杩斿洖椤堕儴
+ scrollToTop() {
+ window.scrollTo({
+ top: 0,
+ behavior: "smooth" // 浣跨敤骞虫粦婊氬姩
+ });
+ },
+ handleClick(tab) {
+ let index = tab.$attrs["data-id"] - 1;
+ this.$nextTick(() => {
+ let firstTab = this.$refs.tabs.$el.querySelector(
+ ".el-tabs__active-bar"
+ );
+ if (index == 0) {
+ firstTab.style.transform = "translateX(-" + 0.2 + "rem)";
+ } else if (index == 1) {
+ firstTab.style.transform = "translateX(" + 0.85 * index + "rem)";
+ } else if (index == 2) {
+ firstTab.style.transform = "translateX(" + 0.93 * index + "rem)";
+ } else if (index == 3) {
+ firstTab.style.transform = "translateX(" + 0.95 * index + "rem)";
+ } else if (index == 4) {
+ firstTab.style.transform = "translateX(" + 0.97 * index + "rem)";
+ } else {
+ let firstTab = this.$refs.tabs.$el.querySelector(
+ ".el-tabs__active-bar"
+ );
+ firstTab.style.transform = "translateX(" + "-.2" + "rem)";
+ }
+ });
+ },
+ // 鍏崇郴鍥捐氨
+ relation() {
+ var chartDom = document.getElementById("relation");
+ var myChart = echarts.init(chartDom);
- }]
- }
- },
- onLoad(options) {
- this.idIndex = options.id
- },
- mounted() {
+ // 鍋囪鎮ㄦ湁鑺傜偣鍚嶇О鍜屽畠浠箣闂寸殑鍏崇郴鏁版嵁
+ var nodes = ["鏉庢椂鐝�", "鎴愬氨", "浼犳壙", "浜插弸", "钁椾綔"];
+ var relationships = [
+ {
+ source: "鏉庢椂鐝�",
+ target: "鎴愬氨"
+ },
+ {
+ source: "鏉庢椂鐝�",
+ target: "浼犳壙"
+ },
+ {
+ source: "鏉庢椂鐝�",
+ target: "浜插弸"
+ },
+ {
+ source: "鏉庢椂鐝�",
+ target: "钁椾綔"
+ }
+ // 鍏朵粬鍏崇郴...
+ ];
- // 鍏崇郴鍥捐氨
- this.relation()
- // 鏃剁┖鍦板浘
- loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => {
- this.spaceTime()
- })
- this.$nextTick(() => {
- // 鑾峰彇绗竴涓�夐」鍗＄殑 DOM 鍏冪礌
- const firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
- firstTab.style.transform = 'translateX(' + '-.2rem' + ')'
- });
+ // 鏍规嵁鍏崇郴鏁版嵁鐢熸垚杩炴帴绾�
+ var links = [];
+ relationships.forEach(function (relationship) {
+ var sourceIndex = nodes.indexOf(relationship.source);
+ var targetIndex = nodes.indexOf(relationship.target);
+ if (sourceIndex !== -1 && targetIndex !== -1) {
+ links.push({
+ source: sourceIndex,
+ target: targetIndex
+ });
+ }
+ });
+ 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 {
+ name: node,
+ x: Math.random() * 1000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆
+ y: Math.random() * 600, // 璁剧疆闅忔満y鍧愭爣浣嶇疆
+ itemStyle: {
+ color: getColorByIndex(index), // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹�
+ borderWidth: BorderWidth,
+ borderColor: getColorByIndex(index + 1)
+ }
+ };
+ });
+ // 璁剧疆棰滆壊
+ function getColorByIndex(index) {
+ var colors = ["#ecf4ff", "#dd9795", "#f1edbe", "#ecf4ff", "#c5dbd8"]; // 鍙互鏍规嵁瀹為檯鎯呭喌璁剧疆棰滆壊鏁扮粍
+ return colors[index % colors.length];
+ }
+ var option;
+ option = {
+ tooltip: {},
+ animationDurationUpdate: 1500,
+ animationEasingUpdate: "quinticInOut",
+ series: [
+ {
+ type: "graph",
+ layout: "none",
+ symbolSize: SymbolSize, // 璋冩暣鑺傜偣澶у皬
+ label: {
+ show: true,
+ color: "black", // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
+ fontSize: FontSize // 璁剧疆鏂囧瓧澶у皬
+ },
+ edgeSymbol: ["circle"],
+ edgeSymbolSize: [4, 10],
+ edgeLabel: {
+ fontSize: 40
+ },
+ data: nodeData,
+ links: [
+ {
+ source: 0,
+ target: 1,
+ symbolSize: [5, 20]
+ },
+ {
+ source: "Node 2",
+ target: "Node 1"
+ },
+ {
+ source: "Node 1",
+ target: "Node 3"
+ },
+ {
+ source: "Node 2",
+ target: "Node 3"
+ },
+ {
+ source: "Node 2",
+ target: "Node 4"
+ },
+ {
+ source: "Node 1",
+ target: "Node 4"
+ }
+ ],
+ lineStyle: {
+ opacity: 0.9,
+ width: 2,
+ curveness: 0
+ }
+ }
+ ]
+ };
- // 鐩戝惉绐楀彛澶у皬鍙樺寲
- window.addEventListener('resize', this.relation);
- },
- methods: {
- // 鏀惧ぇ鍦板浘璺宠浆
- fangdaClick(index) {
- if (index == 1) {
- uni.navigateTo({
- url: '/pages/character/index'
- })
- } else if (index == 2) {
- uni.navigateTo({
- url: '/pages/characterMap/characterMap'
- })
- }
- },
- // 灏忎紶
- ProfileClick() {
- this.isProfile = !this.isProfile
- },
- // 杩斿洖涓婁竴椤�
- goBack() {
- this.$router.go(-1);
- },
- // 杩斿洖椤堕儴
- scrollToTop() {
- window.scrollTo({
- top: 0,
- behavior: "smooth" // 浣跨敤骞虫粦婊氬姩
- });
- },
- handleClick(tab) {
- let index = tab.$attrs['data-id'] - 1
- this.$nextTick(() => {
- let firstTab = this.$refs.tabs.$el.querySelector('.el-tabs__active-bar');
- if (index == 0) {
- 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(' + '-.2' + 'rem)'
- }
- })
- },
- // 鍏崇郴鍥捐氨
- relation() {
- var chartDom = document.getElementById('relation');
- var myChart = echarts.init(chartDom);
+ // 灏嗙敓鎴愮殑杩炴帴绾挎坊鍔犲埌echarts鍥捐〃鐨刼ption涓�
+ option.series[0].links = links;
+ option && myChart.setOption(option);
+ },
+ // 鏃剁┖鍦板浘
+ spaceTime() {
+ var chartDom = document.getElementById("spaceTime");
+ var myChart = echarts.init(chartDom);
+ var option;
- // 鍋囪鎮ㄦ湁鑺傜偣鍚嶇О鍜屽畠浠箣闂寸殑鍏崇郴鏁版嵁
- var nodes = ['鏉庢椂鐝�', '鎴愬氨', '浼犳壙', '浜插弸', '钁椾綔'];
- var relationships = [{
- source: '鏉庢椂鐝�',
- target: '鎴愬氨'
- },
- {
- source: '鏉庢椂鐝�',
- target: '浼犳壙'
- },
- {
- source: '鏉庢椂鐝�',
- target: '浜插弸'
- },
- {
- source: '鏉庢椂鐝�',
- target: '钁椾綔'
- },
- // 鍏朵粬鍏崇郴...
- ];
+ const data = [
+ {
+ name: "娴烽棬",
+ value: 9
+ },
+ {
+ name: "閲戞槍",
+ value: 19
+ },
+ {
+ name: "娉夊窞",
+ value: 21
+ },
+ {
+ name: "琛㈠窞",
+ value: 177
+ },
+ {
+ name: "寤婂潑",
+ value: 193
+ },
+ {
+ name: "鑿忔辰",
+ value: 194
+ },
+ {
+ name: "鍚堣偉",
+ value: 229
+ },
+ {
+ name: "姝︽眽",
+ value: 273
+ },
+ {
+ name: "澶у簡",
+ value: 279
+ }
+ ];
+ const geoCoordMap = {
+ 娴烽棬: [121.15, 31.89],
+ 閯傚皵澶氭柉: [109.781327, 39.608266],
+ 鎷涜繙: [120.38, 37.35],
+ 骞抽《灞�: [113.29, 33.75],
+ 閭㈠彴: [114.48, 37.05],
+ 寰峰窞: [116.29, 37.45],
+ 娴庡畞: [116.59, 35.38],
+ 鑽嗗窞: [112.239741, 30.335165],
+ 瀹滄槍: [111.3, 30.7],
+ 涔変箤: [120.06, 29.32],
+ 涓芥按: [119.92, 28.45],
+ 娲涢槼: [112.44, 34.7],
+ 绉︾殗宀�: [119.57, 39.95],
+ 鏍床: [113.16, 27.83],
+ 鐭冲搴�: [114.48, 38.03],
+ 鑾辫姕: [117.67, 36.19],
+ 甯稿痉: [111.69, 29.05],
+ 淇濆畾: [115.48, 38.85],
+ 婀樻江: [112.91, 27.87],
+ 閲戝崕: [119.64, 29.12],
+ 宀抽槼: [113.09, 29.37],
+ 闀挎矙: [113, 28.21],
+ 琛㈠窞: [118.88, 28.97],
+ 寤婂潑: [116.7, 39.53],
+ 鑿忔辰: [115.480656, 35.23375],
+ 鍚堣偉: [117.27, 31.86],
+ 姝︽眽: [114.31, 30.52],
+ 澶у簡: [125.03, 46.58]
+ };
+ const convertData = function (data) {
+ var res = [];
+ for (var i = 0; i < data.length; i++) {
+ var geoCoord = geoCoordMap[data[i].name];
+ if (geoCoord) {
+ res.push({
+ name: data[i].name,
+ value: geoCoord.concat(data[i].value)
+ });
+ }
+ }
+ return res;
+ };
+ option = {
+ tooltip: {
+ trigger: "item"
+ },
+ bmap: {
+ center: [104.114129, 37.550339],
+ zoom: 1,
+ roam: true,
+ mapStyle: {
+ styleJson: [
+ {
+ featureType: "water",
+ elementType: "all",
+ stylers: {
+ color: "#d1d1d1"
+ }
+ },
+ {
+ featureType: "land",
+ elementType: "all",
+ stylers: {
+ color: "#f3f3f3"
+ }
+ },
+ {
+ featureType: "manmade",
+ elementType: "all",
+ stylers: {
+ color: "#d1d1d1"
+ }
+ },
+ {
+ featureType: "local",
+ elementType: "all",
+ stylers: {
+ color: "#d1d1d1"
+ }
+ },
+ {
+ featureType: "arterial",
+ elementType: "labels",
+ stylers: {
+ visibility: "off"
+ }
+ },
+ {
+ featureType: "boundary",
+ elementType: "all",
+ stylers: {
+ color: "#fefefe"
+ }
+ },
+ {
+ featureType: "building",
+ elementType: "all",
+ stylers: {
+ color: "#d1d1d1"
+ }
+ },
+ {
+ featureType: "label",
+ elementType: "labels.text.fill",
+ stylers: {
+ color: "#999999"
+ }
+ }
+ ]
+ }
+ },
+ series: [
+ {
+ name: "pm2.5",
+ type: "scatter",
+ coordinateSystem: "bmap",
+ data: convertData(data),
+ symbolSize: function (val) {
+ return val[2] / 10;
+ },
+ encode: {
+ value: 2
+ },
+ credits: {
+ enabled: false
+ },
+ label: {
+ formatter: "{b}",
+ position: "right",
+ show: false
+ },
+ emphasis: {
+ label: {
+ show: true
+ }
+ }
+ },
+ {
+ name: "Top 5",
+ type: "effectScatter",
+ coordinateSystem: "bmap",
+ data: convertData(
+ data
+ .sort(function (a, b) {
+ return b.value - a.value;
+ })
+ .slice(0, 6)
+ ),
+ symbolSize: function (val) {
+ return val[2] / 10;
+ },
+ encode: {
+ value: 2
+ },
+ showEffectOn: "render",
+ rippleEffect: {
+ brushType: "stroke"
+ },
+ label: {
+ formatter: "{b}",
+ position: "right",
+ show: true
+ },
+ itemStyle: {
+ shadowBlur: 10,
+ shadowColor: "#333"
+ },
+ emphasis: {
+ scale: true
+ },
+ zlevel: 1
+ }
+ ]
+ };
- // 鏍规嵁鍏崇郴鏁版嵁鐢熸垚杩炴帴绾�
- var links = [];
- relationships.forEach(function(relationship) {
- var sourceIndex = nodes.indexOf(relationship.source);
- var targetIndex = nodes.indexOf(relationship.target);
- if (sourceIndex !== -1 && targetIndex !== -1) {
- links.push({
- source: sourceIndex,
- target: targetIndex
- });
- }
-
- });
- 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 {
- name: node,
- x: Math.random() * 1000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆
- y: Math.random() * 600, // 璁剧疆闅忔満y鍧愭爣浣嶇疆
- itemStyle: {
- color: getColorByIndex(index), // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹�
- borderWidth: BorderWidth,
- borderColor: getColorByIndex(index + 1),
- }
- };
- });
- // 璁剧疆棰滆壊
- function getColorByIndex(index) {
- var colors = ['#ecf4ff', '#dd9795', '#f1edbe', '#ecf4ff', '#c5dbd8']; // 鍙互鏍规嵁瀹為檯鎯呭喌璁剧疆棰滆壊鏁扮粍
- return colors[index % colors.length];
- }
-
- var option;
- option = {
- tooltip: {},
- animationDurationUpdate: 1500,
- animationEasingUpdate: 'quinticInOut',
- series: [{
- type: 'graph',
- layout: 'none',
- symbolSize: SymbolSize, // 璋冩暣鑺傜偣澶у皬
- label: {
- show: true,
- color: 'black', // 璁剧疆鑺傜偣鏂囧瓧棰滆壊涓洪粦鑹�
- fontSize: FontSize, // 璁剧疆鏂囧瓧澶у皬
- },
- edgeSymbol: ['circle'],
- edgeSymbolSize: [4, 10],
- edgeLabel: {
- fontSize: 40
- },
- data: nodeData,
- links: [{
- source: 0,
- target: 1,
- symbolSize: [5, 20]
- },
- {
- source: 'Node 2',
- target: 'Node 1'
- },
- {
- source: 'Node 1',
- target: 'Node 3'
- },
- {
- source: 'Node 2',
- target: 'Node 3'
- },
- {
- source: 'Node 2',
- target: 'Node 4'
- },
- {
- source: 'Node 1',
- target: 'Node 4'
- }
- ],
- lineStyle: {
- opacity: 0.9,
- width: 2,
- curveness: 0
- }
- }]
- };
-
- // 灏嗙敓鎴愮殑杩炴帴绾挎坊鍔犲埌echarts鍥捐〃鐨刼ption涓�
- option.series[0].links = links;
- option && myChart.setOption(option);
- },
- // 鏃剁┖鍦板浘
- spaceTime() {
- var chartDom = document.getElementById('spaceTime');
- var myChart = echarts.init(chartDom);
- var option;
-
- const data = [{
- name: '娴烽棬',
- value: 9
- },
- {
- name: '閲戞槍',
- value: 19
- },
- {
- name: '娉夊窞',
- value: 21
- },
- {
- name: '琛㈠窞',
- value: 177
- },
- {
- name: '寤婂潑',
- value: 193
- },
- {
- name: '鑿忔辰',
- value: 194
- },
- {
- name: '鍚堣偉',
- value: 229
- },
- {
- name: '姝︽眽',
- value: 273
- },
- {
- name: '澶у簡',
- value: 279
- }
- ];
- const geoCoordMap = {
- 娴烽棬: [121.15, 31.89],
- 閯傚皵澶氭柉: [109.781327, 39.608266],
- 鎷涜繙: [120.38, 37.35],
- 骞抽《灞�: [113.29, 33.75],
- 閭㈠彴: [114.48, 37.05],
- 寰峰窞: [116.29, 37.45],
- 娴庡畞: [116.59, 35.38],
- 鑽嗗窞: [112.239741, 30.335165],
- 瀹滄槍: [111.3, 30.7],
- 涔変箤: [120.06, 29.32],
- 涓芥按: [119.92, 28.45],
- 娲涢槼: [112.44, 34.7],
- 绉︾殗宀�: [119.57, 39.95],
- 鏍床: [113.16, 27.83],
- 鐭冲搴�: [114.48, 38.03],
- 鑾辫姕: [117.67, 36.19],
- 甯稿痉: [111.69, 29.05],
- 淇濆畾: [115.48, 38.85],
- 婀樻江: [112.91, 27.87],
- 閲戝崕: [119.64, 29.12],
- 宀抽槼: [113.09, 29.37],
- 闀挎矙: [113, 28.21],
- 琛㈠窞: [118.88, 28.97],
- 寤婂潑: [116.7, 39.53],
- 鑿忔辰: [115.480656, 35.23375],
- 鍚堣偉: [117.27, 31.86],
- 姝︽眽: [114.31, 30.52],
- 澶у簡: [125.03, 46.58]
- };
- const convertData = function(data) {
- var res = [];
- for (var i = 0; i < data.length; i++) {
- var geoCoord = geoCoordMap[data[i].name];
- if (geoCoord) {
- res.push({
- name: data[i].name,
- value: geoCoord.concat(data[i].value)
- });
- }
- }
- return res;
- };
- option = {
- tooltip: {
- trigger: 'item'
- },
- bmap: {
- center: [104.114129, 37.550339],
- zoom: 1,
- roam: true,
- mapStyle: {
- styleJson: [{
- featureType: 'water',
- elementType: 'all',
- stylers: {
- color: '#d1d1d1'
- }
- },
- {
- featureType: 'land',
- elementType: 'all',
- stylers: {
- color: '#f3f3f3'
- }
- },
- {
- featureType: 'manmade',
- elementType: 'all',
- stylers: {
- color: '#d1d1d1'
- }
- },
- {
- featureType: 'local',
- elementType: 'all',
- stylers: {
- color: '#d1d1d1'
- }
- },
- {
- featureType: 'arterial',
- elementType: 'labels',
- stylers: {
- visibility: 'off'
- }
- },
- {
- featureType: 'boundary',
- elementType: 'all',
- stylers: {
- color: '#fefefe'
- }
- },
- {
- featureType: 'building',
- elementType: 'all',
- stylers: {
- color: '#d1d1d1'
- }
- },
- {
- featureType: 'label',
- elementType: 'labels.text.fill',
- stylers: {
- color: '#999999'
- }
- }
- ]
- }
- },
- series: [{
- name: 'pm2.5',
- type: 'scatter',
- coordinateSystem: 'bmap',
- data: convertData(data),
- symbolSize: function(val) {
- return val[2] / 10;
- },
- encode: {
- value: 2
- },
- credits: {
- enabled: false
- },
- label: {
- formatter: '{b}',
- position: 'right',
- show: false
- },
- emphasis: {
- label: {
- show: true
- }
- }
- },
- {
- name: 'Top 5',
- type: 'effectScatter',
- coordinateSystem: 'bmap',
- data: convertData(
- data
- .sort(function(a, b) {
- return b.value - a.value;
- })
- .slice(0, 6)
- ),
- symbolSize: function(val) {
- return val[2] / 10;
- },
- encode: {
- value: 2
- },
- showEffectOn: 'render',
- rippleEffect: {
- brushType: 'stroke'
- },
- label: {
- formatter: '{b}',
- position: 'right',
- show: true
- },
- itemStyle: {
- shadowBlur: 10,
- shadowColor: '#333'
- },
- emphasis: {
- scale: true
- },
- zlevel: 1
- }
- ]
- };
-
-
- option && myChart.setOption(option);
-
- },
-
- }
- }
+ option && myChart.setOption(option);
+ }
+ }
+};
</script>
<style>
- /* Table1琛ㄦ牸閲岄潰鐨勬暟鎹� */
- ::v-deep .is-leaf {
- .cell {
- font-size: .14rem !important;
- height: .4rem !important;
- line-height: .4rem !important;
- }
- }
+/* Table1琛ㄦ牸閲岄潰鐨勬暟鎹� */
+::v-deep .is-leaf {
+ .cell {
+ font-size: 0.14rem !important;
+ height: 0.4rem !important;
+ line-height: 0.4rem !important;
+ }
+}
- ::v-deep .el-table__body {
- .cell {
- font-size: .14rem !important;
- height: .4rem !important;
- line-height: .4rem !important;
- }
- }
+::v-deep .el-table__body {
+ .cell {
+ font-size: 0.14rem !important;
+ height: 0.4rem !important;
+ line-height: 0.4rem !important;
+ }
+}
- /* --------------- */
- @media screen and (min-width:2560px)and (max-width:3840px) {}
+/* --------------- */
- .BoxLeft ::v-deep.el-card__body {
- padding: .1rem .11rem !important;
- }
+.BoxLeft ::v-deep.el-card__body {
+ padding: 0.1rem 0.11rem !important;
+}
- ::v-deep .el-tabs__content {
- line-height: 1;
- }
+::v-deep .el-tabs__content {
+ line-height: 1;
+}
+/* 涓汉灏忎紶 ------------------*/
+::v-deep .el-dialog__header {
+ display: none;
+}
- /* 涓汉灏忎紶 ------------------*/
- ::v-deep .el-dialog__header {
- display: none;
- }
+::v-deep .el-dialog__body {
+ padding: 0;
+}
- ::v-deep .el-dialog__body {
- padding: 0;
- }
+.ProfileNav {
+ width: 100%;
+ height: 0.7rem;
+ background: url(@/static/image/ProfileBg.png);
+ background-size: 100% 100%;
+ font-size: 0.24rem;
+ color: #2c2c2c;
+ font-weight: bold;
+}
- ::v-deep .el-dialog__wrapper {
- z-index: 999999999999999 !important;
- }
+/* ------------------- */
- .ProfileNav {
- width: 100%;
- height: 0.7rem;
- background: url(@/static/image/ProfileBg.png);
- background-size: 100% 100%;
- font-size: .24rem;
- color: #2C2C2C;
- font-weight: bold;
- }
+img {
+ width: 100%;
+ height: 100%;
+}
- /* ------------------- */
+* {
+ box-sizing: border-box;
+}
+.NavTop {
+ background-color: #0c274c;
+ padding: 15rpx 25rpx;
+ color: #fff !important;
+}
+.NavTop img {
+ width: 30rpx;
+ height: 30rpx;
+ vertical-align: middle;
+}
- img {
- width: 100%;
- height: 100%;
- }
+.NavTop .NavTopr {
+ img {
+ margin-right: 10rpx;
+ }
+}
- * {
- box-sizing: border-box;
- }
+.mImage {
+ width: 100%;
+ height: 30rpx;
+}
+.mImage img {
+ vertical-align: top;
+}
- .NavTop {
- background-color: #0c274c;
- padding: 15rpx 25rpx;
- color: #fff !important;
+.Midde {
+ /* background-color: #dbeafd; */
+ background-image: url(@/static/image/yongBg.png);
+ background-size: 100% 100%;
+ color: #000;
+ align-items: flex-start;
+ padding: 0.18rem 0.24rem;
+}
+.Midde view {
+ color: #000;
+}
- img {
- width: 30rpx;
- height: 30rpx;
- vertical-align: middle;
- }
+.Midde .MiddeBack {
+ width: 0.6rem;
+ height: 0.24rem;
+ font-size: 0.12rem;
+ padding: 0;
+ border: 1px solid #9e9e9e;
+}
- .NavTopr {
- img {
- margin-right: 10rpx;
- }
- }
- }
+.yinyong {
+ font-size: 0.12rem;
+}
+.yinyong img {
+ width: 0.12rem;
+ height: 0.1rem;
+ vertical-align: top;
+ margin-right: 0.03rem;
+}
- .mImage {
- width: 100%;
- height: 30rpx;
+.el-dialog__wrapper {
+ background: rgba(0, 0, 0, 0.3);
+}
- img {
- vertical-align: top;
- }
- }
-
- .Midde {
- /* background-color: #dbeafd; */
- background-image: url(@/static/image/yongBg.png);
- background-size: 100% 100%;
- color: #000;
- align-items: flex-start;
- padding: .18rem .24rem ;
-
- view {
- color: #000;
- }
-
- .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;
+.fz {
+ /* line-height: 1.3;
height: 100rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical; */
- color: #2C2C2C;
- }
+ color: #2c2c2c;
+}
- ::v-deep .el-card__body {
- padding: .1rem !important;
- }
+::v-deep .el-card__body {
+ padding: 0.1rem !important;
+}
- /* echart鍦板浘姘村嵃 */
- ::v-deep .BMap_cpyCtrl {
- display: none;
- }
+/* echart鍦板浘姘村嵃 */
+::v-deep .BMap_cpyCtrl {
+ display: none;
+}
- ::v-deep .anchorBL {
- display: none;
- }
+::v-deep .anchorBL {
+ display: none;
+}
- ::v-deep .el-tabs__nav-wrap::after {
- background-color: transparent;
- }
+::v-deep .el-tabs__nav-wrap::after {
+ background-color: transparent;
+}
- ::v-deep .el-tabs__nav {
- margin-bottom: .1rem !important;
+::v-deep .el-tabs__nav {
+ margin-bottom: 0.1rem !important;
+}
- }
+::v-deep .el-tabs__nav-scroll {
+ display: flex;
+ justify-content: center;
+}
- ::v-deep .el-tabs__nav-scroll {
- display: flex;
- justify-content: center;
- }
+::v-deep .el-tabs__item {
+ width: 1rem;
+ font-size: 0.14rem;
+ line-height: 0.4rem;
+ height: 0.4rem;
+}
- ::v-deep .el-tabs__item {
- width: 1rem;
- font-size: .14rem;
- line-height: .4rem;
- height: .4rem;
- }
+::v-deep .el-tabs__header {
+ margin: 0 0 10rpx;
+}
- ::v-deep .el-tabs__header {
- margin: 0 0 10rpx;
- }
+::v-deep .el-tabs__active-bar {
+ /* 璁剧疆婊氬姩鏉″搴� */
+ width: 1rem !important;
+ height: 0.03rem !important;
+ background-color: #597aa5;
+ transform: translateX(-20px);
+ /* margin-top: .09rem; */
+}
- ::v-deep .el-tabs__active-bar {
- /* 璁剧疆婊氬姩鏉″搴� */
- width: 1rem !important;
- height: .03rem !important;
- background-color: #597AA5;
- transform: translateX(-20px);
- /* margin-top: .09rem; */
- }
+::v-deep .el-tabs__active-bar {
+ top: 0.37rem !important;
+}
- ::v-deep .el-tabs__active-bar {
- top: .37rem !important;
- }
+::v-deep .el-table::before {
+ background-color: #fff !important;
+}
- ::v-deep .el-table::before {
- background-color: #fff !important;
- }
+.BoxRight ::v-deep.el-card__body {
+ padding: 0.2rem 0.14rem !important;
+}
- .BoxRight ::v-deep.el-card__body {
- padding: .2rem .14rem !important;
-
- }
-
- .BoxRight .box-card {
- margin-bottom: .2rem !important;
- }
-</style>
\ No newline at end of file
+.BoxRight .box-card {
+ margin-bottom: 0.2rem !important;
+}
+</style>
--
Gitblit v1.9.1