From 13a727c58400a256af3f7582b62d8237b227329e Mon Sep 17 00:00:00 2001 From: YM <479443481@qq.com> Date: 星期一, 29 四月 2024 19:05:42 +0800 Subject: [PATCH] 人物详情和地图 --- src/pages/character/detail.vue | 776 +++++++----- src/static/tool.js | 6 src/pages/character/index.vue | 99 src/pages/territory/territory.vue | 2294 ++++++++++++-------------------------- src/static/map.js | 6 src/api/index.js | 21 src/uni_modules/cc-defineTable/components/cc-defineTable/cc-defineTable.vue | 164 +- src/components/table1/table1.vue | 113 + src/pages/TcmSystem/TcmSystem.vue | 14 9 files changed, 1,418 insertions(+), 2,075 deletions(-) diff --git a/src/api/index.js b/src/api/index.js index 1d46bbf..6c25b8c 100644 --- a/src/api/index.js +++ b/src/api/index.js @@ -87,7 +87,7 @@ return req1({ url: "/person/source", method: "post", - data: data + params: data }); }; // 浜虹墿鐩稿叧鐨� 涓汉鏃剁┖鍦板浘 @@ -95,7 +95,7 @@ return req1({ url: "/person/spaceTime", method: "post", - data: data + params: data }); }; @@ -104,7 +104,7 @@ return req1({ url: "/person/images", method: "post", - data: data + params: data }); }; // 鍖诲浜虹墿鐭ヨ瘑搴� 涓汉浜嬭抗 @@ -112,7 +112,7 @@ return req1({ url: "/person/biog", method: "post", - data: data + params: data }); }; // 鍖诲浜虹墿鐭ヨ瘑搴� 浜虹墿鍏崇郴 @@ -120,7 +120,7 @@ return req1({ url: "/person/personRelationAtSchool", method: "post", - data: data + params: data }); }; @@ -129,7 +129,7 @@ return req1({ url: "/person/writings", method: "post", - data: data + params: data }); }; // 鍖诲浜虹墿鐭ヨ瘑搴� 浜虹墿璇︽儏 @@ -137,14 +137,17 @@ return req1({ url: "/person/getPersonInfo", method: "post", - data: Obj + params: Obj }); }; // 鍖诲浜虹墿鐭ヨ瘑搴� 鍩虹妫�绱� export const getFuzzySearch = (requestData) => { return req1({ - url: "/person/fuzzySearch?keyword=" + requestData?.keyword, - method: "post" + url: "/person/fuzzySearch", + method: "post", + params: { + keyword: requestData?.keyword + } }); }; diff --git a/src/components/table1/table1.vue b/src/components/table1/table1.vue index 646c2b0..a156e3b 100644 --- a/src/components/table1/table1.vue +++ b/src/components/table1/table1.vue @@ -1,23 +1,48 @@ <template> <div> - <el-table :min-height="height" :data="data" > - <el-table-column min-width="110" :sort-method="sortAge" v-for="column in columns" :key="column.prop" :label="column.label" header-align="center"> + <el-table :height="height" :data="data" style="width: 100%"> + <el-table-column + :sort-method="sortAge" + v-for="column in columns" + :key="column.prop" + :label="column.label" + header-align="center" + > <template slot-scope="scope" class="font-family"> <template v-if="column.type === 'image'"> <el-image :src="scope.row[column.prop]" alt="鍔犺浇澶辫触"></el-image> </template> <template v-else-if="column.type === 'button'"> - <el-button @click="handleButtonClick(column.action, scope.row)" size="small">{{ column.label }}</el-button> + <el-button + @click="handleButtonClick(column.action, scope.row)" + size="small" + >{{ column.label }}</el-button + > </template> <template v-else> {{ scope.row[column.prop] }} </template> </template> </el-table-column> - <el-table-column v-if="isHandle" label="鎿嶄綔" header-align="center" width="120"> + <el-table-column + v-if="isHandle" + label="鎿嶄綔" + header-align="center" + width="120" + > <template slot-scope="scope"> - <el-button @click="handleAction1( scope.row)" type="success" size="mini" icon="el-icon-edit"></el-button> - <el-button @click="handleAction2( scope.row)" type="danger" size="mini" icon="el-icon-delete"></el-button> + <el-button + @click="handleAction1(scope.row)" + type="success" + size="mini" + icon="el-icon-edit" + ></el-button> + <el-button + @click="handleAction2(scope.row)" + type="danger" + size="mini" + icon="el-icon-delete" + ></el-button> </template> </el-table-column> </el-table> @@ -37,41 +62,42 @@ }, height: { type: Number, - default () { - return 96; - } - }, - isHandle: { + default() { + return 96; + } + }, + isHandle: { type: Boolean, - default () { - return false; - } + default() { + return false; + } } }, methods: { - sortAge (a, b) { + sortAge(a, b) { // 鑷畾涔夋帓搴忔柟娉� - return a.age - b.age + return a.age - b.age; }, - handleButtonClick (action, row) { + handleButtonClick(action, row) { // 澶勭悊鎸夐挳鐐瑰嚮浜嬩欢 // 鍦ㄨ繖閲屽彲浠ユ牴鎹紶鍏ョ殑 action 鍊兼墽琛岀浉搴旂殑閫昏緫 - console.log('Button Clicked', action, row) + console.log("Button Clicked", action, row); }, - handleAction1 (row) { + handleAction1(row) { // 澶勭悊鎿嶄綔浜嬩欢 // 鍒ゆ柇row涓槸鍚﹀瓨鍦� describe 杩欎釜灞炴�� - if ('describe' in row) { - row.describe = row.describe !== '' ? decodeURIComponent(row.describe) : '' + if ("describe" in row) { + row.describe = + row.describe !== "" ? decodeURIComponent(row.describe) : ""; } - this.$emit('amend', JSON.parse(JSON.stringify(row))) // 淇敼鐢ㄦ埛淇℃伅 + this.$emit("amend", JSON.parse(JSON.stringify(row))); // 淇敼鐢ㄦ埛淇℃伅 }, // 鍒犻櫎鎸夐挳 - async handleAction2 (row) { - this.$emit('deleteClick', row) + async handleAction2(row) { + this.$emit("deleteClick", row); } } -} +}; </script> <style scoped> @@ -79,39 +105,40 @@ display: flex; justify-content: flex-start; } -::v-deep .el-table th,::v-deep .el-table td { +::v-deep .el-table th, +::v-deep .el-table td { text-align: center; } -::v-deep .el-image__inner{ +::v-deep .el-image__inner { width: 70px; height: 70px; } /* 琛ㄥご */ -::v-deep .el-table__header{ - margin-bottom: .02rem; +::v-deep .el-table__header { + margin-bottom: 0.02rem; } ::v-deep .el-table__header th { - height: .3rem; - line-height: .3rem; - font-size: .14rem; - background-color: #597AA5; + height: 0.3rem; + line-height: 0.3rem; + font-size: 0.14rem; + background-color: #597aa5; color: white; /* 琛ㄥご鏂囧瓧棰滆壊涓虹櫧鑹诧紝澧炲姞瀵规瘮搴� */ - margin-bottom: .02rem !important; + margin-bottom: 0.02rem !important; } /* 琛ㄦ牸 */ ::v-deep .el-table__body td { - background-color:#DDE8F6; - height: .3rem; - line-height: .3rem; - font-size: .14rem; - color: #2C2C2C !important; - border-bottom: .02rem solid #fff; + background-color: #dde8f6; + height: 0.3rem; + line-height: 0.3rem; + font-size: 0.14rem; + color: #2c2c2c !important; + border-bottom: 0.02rem solid #fff; } /* ::v-deep .el-table__body { border-bottom: .02rem solid #fff !important; } */ -::v-deep .el-table .el-table__cell{ - font-size: 9px; - padding: 0; +::v-deep .el-table .el-table__cell { + font-size: 9px; + padding: 0; } </style> diff --git a/src/pages/TcmSystem/TcmSystem.vue b/src/pages/TcmSystem/TcmSystem.vue index e2cce49..22dd33d 100644 --- a/src/pages/TcmSystem/TcmSystem.vue +++ b/src/pages/TcmSystem/TcmSystem.vue @@ -406,6 +406,7 @@ // 鏄剧ず澶氬皯鏉¤亴瀹樻暟鎹� institutionIndex: 4, // 鏈烘瀯鍜岃亴瀹樼殑绫诲瀷 鍙栧�硷細OFFICIAL->鑱屽畼 INSTITUTION->鏈烘瀯 ALL->鑱屽畼銆佹満鏋� + searchType: "ALL", classifyType: "ALL", // 鏈烘瀯鍜岃亴瀹樼殑id classifyId: "", @@ -516,7 +517,7 @@ getMList(obj) { this.pageLoading = true; let Obj = { - medicalSearchType: "ALL", + medicalSearchType: this.searchType, type: this.classifyType, //鏌ヨ绫诲瀷 鍙栧�硷細OFFICIAL->鑱屽畼 INSTITUTION->鏈烘瀯 ALL->鑱屽畼銆佹満鏋� name: this.SearchValue, //鎼滅储妗嗘绱� dynastyId: this.classifyId, //鐐瑰嚮鏈濅唬鏌ヨ鏁版嵁鏃讹紝甯︿笂姝ゅ弬鏁� @@ -544,14 +545,19 @@ }, // list鏁扮粍 鑾峰彇list閲岄潰鐨勮鎯卻huju ListClick(item) { + console.log(item,this.searchType); let Obj = { - id: item.dataId, - type: item.type + rowId: this.searchType == "ALL" ? item.id : item.rowId, + medicalSearchType: this.searchType, + type: this.classifyType, //鏌ヨ绫诲瀷 鍙栧�硷細OFFICIAL->鑱屽畼 INSTITUTION->鏈烘瀯 ALL->鑱屽畼銆佹満鏋� + name: this.SearchValue, //鎼滅储妗嗘绱� + dynastyId: this.classifyId, //鐐瑰嚮鏈濅唬鏌ヨ鏁版嵁鏃讹紝甯︿笂姝ゅ弬鏁� + sort: this.rankVal, //鎺掑簭鏂瑰紡 鍙栧�硷細CREATE鍒涘缓鏃堕棿锛孨AME鍚嶇О }; getMedicalDetails(Obj).then((res) => { this.ListDetails = { ...item, - ...res.object + ...res.object.curr }; }); this.dialogVisible = !this.dialogVisible; diff --git a/src/pages/character/detail.vue b/src/pages/character/detail.vue index 3fa9ea9..984d3b5 100644 --- a/src/pages/character/detail.vue +++ b/src/pages/character/detail.vue @@ -1,12 +1,14 @@ <template> <view class="relative"> - <headNav :idIndex="1" text="涓尰浜虹墿鏁版嵁搴�" /> + <headNav :idIndex="1 + ''" 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> + <view style="font-weight: bold; font-size: 0.2rem">{{ + detailInfo.NAME + }}</view> <ul class="flex" style="line-height: 1.2; margin: 0.15rem 0"> <li v-for="item in 4" @@ -32,8 +34,7 @@ letter-spacing: 0.03rem; " > - 鏉庢椂鐝�(1518骞�-1593骞�)锛屽瓧: - 涓滅挧锛屾椂浜鸿皳涔�:鏉庝笢鐠с�傚彿婵掓箹锛屾櫄骞磋嚜鍙锋繏婀栧北浜猴紝婀栧寳钖窞(浠婃箹鍖楃渷榛勫唸甯傝柂鏄ュ幙钖窞闀�)浜猴紝姹夋棌锛岀敓浜庢槑姝﹀畻姝e痉鍗佷笁骞�(鍏厓1518骞�)锛屽崚浜庣瀹椾竾鍘嗕簩鍗佷簩骞�(鍏厓1593骞�)銆傛槸涓浗鏄庝唬涓庝竾瀵嗘枊榻愬悕鐨勫尰瀛﹀銆佽嵂鐗╁瀹躲�佸崥鐗╁瀹躲�佽憲杩板銆傛潕鏃剁弽瀵归亾瀹跺尰瀛︾殑缁ф壙鏄鏂归潰鐨勶紝鏇惧弬鑰冨巻浠f湁鍏冲尰鑽強鍏跺鏈功绫嶅叓鐧句綑绉嶏紝缁撳悎鑷韩缁忛獙鍜岃皟鏌ョ爺绌讹紝鍘嗘椂27骞寸紪鎴愩�婃湰鑽夌翰鐩�嬩竴涔︼紝鏄垜鍥藉彜浠h嵂鐗╁鐨勬�荤粨鎬у法钁楋紝鍦ㄥ浗鍐呭鍧囨湁寰堥珮鐨勮瘎浠凤紝宸叉湁鍑犵鏂囧瓧鐨勮瘧鏈垨鑺傝瘧鏈紝鍏惰憲鏈夈�婃繏婀栬剦瀛︺�� + {{ biogData.length ? biogData[0].content : "-" }} </view> <view class="flex" style="width: 100%; margin: 0.25rem 0 0.15rem 0"> <view> @@ -42,6 +43,7 @@ <img src="@/static/image/yinyong.png" alt="" />寮曠敤</el-button > </view> + <!-- v-if="biogData.length > 1" --> <view style="font-size: 0.12rem; color: #244a7b; cursor: pointer" @click="ProfileClick" @@ -80,7 +82,7 @@ <img src="@/static/image/fangda.png" @click="fangdaClick(1)" - style="width: 0.18rem; height: 0.18rem" + style="width: 0.18rem; height: 0.18rem; cursor: pointer" alt="" /> </div> @@ -103,8 +105,7 @@ <img src="@/static/image/fangda.png" @click="fangdaClick(2)" - style="width: 0.18rem; height: 0.18rem" - alt="" + style="width: 0.18rem; height: 0.18rem; cursor: pointer" /> </div> <view @@ -127,8 +128,18 @@ class="font-family" style="height: 300rpx; font-size: 0.12rem; line-height: 0.3rem" > - <li>1.銆婃槑鍙猜峰嵎浜岀櫨涔濆崄涔澛峰垪浣滃搧. p52</li> - <li>2.銆婅繘(鏈崏绾茬洰)鐤忋�� p52</li> + <li + style=" + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + " + v-for="(item, index) in sourceDataList" + :key="index" + :title="item" + > + {{ index + 1 }}.{{ item }} + </li> </ul> </el-card> </div> @@ -156,20 +167,39 @@ > <el-tabs ref="tabs" v-model="activeName" @tab-click="handleClick"> <el-tab-pane label="浠h〃钁椾綔" data-id="1" name="representative"> - <Table1 :data="tableData" :columns="tableColumns" /> + <Table1 + :data="tableData1" + :columns="tableColumns1" + :height="400" + /> </el-tab-pane> <el-tab-pane label="浜插睘鍏崇郴" data-id="2" name="family "> - 浜插睘鍏崇郴 + <Table1 + :data="tableData2" + :columns="tableColumns2" + :height="400" + /> </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 - > + ><Table1 + :data="tableData3" + :columns="tableColumns2" + :height="400" + /></el-tab-pane> + <el-tab-pane label="绀句細鍏崇郴" data-id="4" name="society"> + <Table1 + :data="tableData4" + :columns="tableColumns2" + :height="400" + /> + </el-tab-pane> + <el-tab-pane label="娲诲姩骞磋氨" data-id="5" name="activity"> + <Table1 + :data="tableData5" + :columns="tableColumns3" + :height="400" + /> + </el-tab-pane> </el-tabs> </el-card> <el-card style="margin-bottom: 0.2rem"> @@ -185,10 +215,10 @@ </div> <view class="flex"> <el-image - v-for="item in 4" + v-for="item in imageList" :key="item" style="width: 2.05rem; height: 1.4rem" - src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" + :src="item" fit="fill" ></el-image> </view> @@ -241,6 +271,7 @@ <view class="ProfileNav flex flex-center"> 涓汉灏忎紶 </view> <view style="padding: 0.44rem 0.3rem; min-height: 7.32rem"> <view + v-for="item in biogData" style=" margin-bottom: 0.2rem; background-color: #f0f0f0; @@ -251,12 +282,12 @@ " > <view style="color: #2c2c2c"> - 钑欏睍涓佷笐鍚岄噷鏃ュ博棰濆簭鍏堣�冩湀姹犵縼钁椼�婂洓褰吀鏄庛�嬪叓鍗凤紝鐨嗙簿鎸囧ゥ瀹わ紝鑼傜妧鏈兘鐤�狅紝鐝嶅洜鎾补鎯宠彍锛屽兊鎾版鍞愶紝浠ヤ究鏅虹潧锛屾湇鎸囧崡銆備笘涔嬮浄鐥呴洦瀹讹紝鍜镐互鏈嶇剦棣栧姟锛屼笉鐭ユ淳涔冨洓鑳戒箣鏈紝璋撲箣宸ц�呴洦銆備笂澹鑸嶅叾鍏紝闈炲洓涓嶅彲銆� + {{ item.content }} </view> <view class="flex"> <view></view> <view style="font-weight: 700; color: #2c2c2c" - >鈥斺�斻�婂鍏湇鑰冦�婸 3</view + >鈥斺�攞{ item.pageNo }}</view > </view> </view> @@ -271,6 +302,7 @@ import { loadBMap } from "@/static/map.js"; import Table1 from "@/components/table1/table1.vue"; import { + getFuzzySearch, getPersonInfo, getSource, getPersonImages, @@ -279,6 +311,8 @@ getPersonRelationAtSchool, getSpaceTime } from "@/api/index.js"; +import { getImg } from "@/static/tool.js"; + export default { components: { Table1 @@ -290,107 +324,76 @@ detailInfo: {}, sourceDataList: [], imageList: [], - biogData: "", - writingsList: [], - relationshipData: [], + biogData: [], // ------- // 灏忎紶 isProfile: false, // 鍏崇郴鍥捐氨 activeName: "representative", // 鍩虹淇℃伅 - tableArr: [ - { - list: [ - { - name: "鍒悕", - value: "鏉庝笢鐠с�佽嵂鍦c�佹潕涓変竷" - }, - { - name: "瀛�", - value: "涓滅挧" - }, - { - name: "鍙�", - value: "棰戞箹灞变汉" - }, - { - name: "鎵�澶勬椂鏈�", - value: "鏄庢湞" - }, - { - name: "姘戞棌", - value: "166g" - } - ] - }, - { - list: [ - { - name: "绫嶈疮", - value: "榛勫窞搴滆柂宸� (浠婃箹鍖楃渷钖槬鍘�)" - }, - { - name: "鎬у埆", - value: "鐢�" - }, - { - name: "鑱屽畼", - value: "澶尰闄㈠垽" - }, - { - name: "娴佹淳", - value: "鍖荤粡瀛︽淳" - }, - { - name: "瀛︽湳鐗圭偣", - value: "鑰冨彜璇佷粖銆佺┓绌剁墿鐞�" - } - ] - } - ], + tableArr: [], // 浠h〃钁椾綔 - tableColumns: [ + tableColumns1: [ { - prop: "worksName", - label: "浣滃搧鍚�" + prop: "a", + label: "姝d功鍚�" }, { - prop: "works", - label: "浣滃搧" + prop: "b", + label: "钁椾綔骞�" }, { - prop: "literature", - label: "鏂囩尞鍏崇郴" + prop: "c", + label: "钁椾綔鏂瑰紡" }, { - prop: "epoch", - label: "钁椾綔鏃朵唬" - }, - { - prop: "category", - label: "绫诲埆" + prop: "d", + label: "鎬荤洰鍒嗙被" } - // { type: 'button', action: 'edit', label: 'Edit' } ], - tableData: [ + tableColumns2: [ { - worksName: "鏈崏绾茬洰", - works: "鏉庝簩鐗�", - literature: "浣滆��", - epoch: "鐜颁唬", - category: "涓尰瀛�", - id: 1 + prop: "a", + label: "鍏崇郴浜�" }, { - worksName: "鏈崏绾茬洰", - works: "鏉庝簩鐗�", - literature: "浣滆��", - epoch: "鐜颁唬", - category: "涓尰瀛�", - id: 1 + prop: "b", + label: "鍏崇郴绫诲瀷" + }, + { + prop: "c", + label: "鑰冩嵁" + }, + { + prop: "d", + label: "鍑哄" } - ] + ], + tableColumns3: [ + { + prop: "a", + label: "娲诲姩鏃堕棿鍖洪棿" + }, + { + prop: "b", + label: "娲诲姩鍚嶇О" + }, + { + prop: "c", + label: "娲诲姩鍦扮偣" + }, + { + prop: "d", + label: "娲诲姩鎻忚堪" + } + ], + tableData1: [], + tableData2: [], + tableData3: [], + tableData4: [], + tableData5: [], + nodes: [], + relationships: [] }; }, onLoad(options) { @@ -398,25 +401,20 @@ }, mounted() { // 鑾峰彇浜虹墿璇︽儏 - // this.getData(); + this.getData(); // 鑾峰彇鏉ユ簮 - // this.getSourceData(); + this.getSourceData(); // 鑾峰彇鐩稿叧鍥捐〃 - // this.getImages(); + this.getImages(); // 鑾峰彇涓汉浜嬭抗 - // this.getBiog(); + this.getBiog(); // 鑾峰彇钁椾綔 - // this.getWritings(); + this.getWritings(); // 鑾峰彇浜虹墿鍏崇郴 - // this.getRelationship(); + this.getRelationship(); // 鑾峰彇鏃剁┖鍦板浘 - // this.getMapInfo(); - // 鍏崇郴鍥捐氨 - this.relation(); - // 鏃剁┖鍦板浘 - loadBMap("5USVDAhhS4ssz44HLq3gNPZai7naXf4Q").then(() => { - this.spaceTime(); - }); + this.getMapInfo(); + this.$nextTick(() => { // 鑾峰彇绗竴涓�夐」鍗$殑 DOM 鍏冪礌 const firstTab = this.$refs.tabs.$el.querySelector( @@ -430,58 +428,200 @@ }, methods: { getData() { + // 鍩烘湰淇℃伅 getPersonInfo({ - id: this.detailId + id: this.detailId, + type: "PERSON_BASIC" }).then((res) => { - console.log(res); - this.detailInfo = res; + const obj = {}; + if ( + res.object && + res.object.personFieldList && + res.object.personFieldList.length + ) { + for (let i = 0; i < res.object.personFieldList.length; i++) { + const fieldItem = res.object.personFieldList[i]; + obj[fieldItem.fieldName] = fieldItem.content2 + ? fieldItem.content2 + : fieldItem.content1; + } + } + console.log(obj); + this.tableArr = [ + { + list: [ + { + name: "鍒悕", + value: obj.WEAK_NAME || "-" + }, + { + name: "瀛�", + value: obj.ALIAS || "-" + }, + { + name: "鍙�", + value: obj.ALIAS || "-" + }, + { + name: "鎵�澶勬椂鏈�", + value: obj.PERIOD || "-" + }, + { + name: "姘戞棌", + value: obj.ETHNIC || "-" + } + ] + }, + { + list: [ + { + name: "绫嶈疮", + value: obj.NATIVE_PLACE || "-" + }, + { + name: "鎬у埆", + value: obj.GENDER + ? obj.GENDER == "UNKNOWN" + ? "鏈煡" + : "-" + : "-" + }, + { + name: "鑱屽畼", + value: obj.MEDICAL_BRANCH || "-" + }, + { + name: "娴佹淳", + value: obj.MEDICAL_BRANCH || "-" + }, + { + name: "瀛︽湳鐗圭偣", + value: obj.MEDICAL_EXPERTISE || "-" + } + ] + } + ]; + this.detailInfo = obj; + // 鍏崇郴鍥捐氨 + this.getMappingData(this.detailInfo.NAME); + }); + // 娲诲姩骞磋氨 + getPersonInfo({ + id: this.detailId, + type: "PERSON_SPACE_TIME" + }).then((res) => { + this.tableData5 = res.object.personSpaceTimeList.map((item) => { + return { + a: item.time, + b: item.activityName, + c: item.activityAddrOld, + d: "-" // 杩欓噷缂哄皯娲诲姩鎻忚堪瀛楁 + }; + }); }); }, getSourceData() { getSource({ personId: this.detailId }).then((res) => { - console.log(res); - this.sourceDataList = res; + this.sourceDataList = res.list; }); }, getImages() { getPersonImages({ personId: this.detailId }).then((res) => { - console.log(res); - this.imageList = res; + this.imageList = res.list.map((item) => getImg(item.filePath)); }); }, getBiog() { getPersonBiog({ personId: this.detailId }).then((res) => { - console.log(res); - this.biogData = res; + this.biogData = res.list.map((item) => { + return { + content: item.content1, + pageNo: "銆�" + item.pageNo + "銆� " + "P " + item.pageNo // 杩欓噷鍙湁bookid鏃犳硶鍖归厤鍒颁功鍚� + }; + }); }); }, getWritings() { getPersonWritings({ personId: this.detailId }).then((res) => { - console.log(res); - this.writingsList = res; + this.tableData1 = res.list.map((item) => { + return { + a: item.name, + b: item.dynasty, + c: item.writeWay, + d: item.classify + }; + }); }); }, getRelationship() { getPersonRelationAtSchool({ personId: this.detailId + // relationSearchTypeEO: "SOCIAL" }).then((res) => { - console.log(res); - this.relationshipData = res; + console.log(res, "getPersonRelationAtSchool"); + // 杩欓噷鎺ュ彛鏈夐棶棰� + }); + }, + getMappingData(name) { + getFuzzySearch({ + keyword: name + }).then((res) => { + this.nodes = []; + this.relationships = []; + if (res.success && res.list) { + res.list.forEach((item, index) => { + let exists1 = this.nodes.some( + (node) => node.id === item.identifier1 && node.name === item.name1 + ); + let exists2 = this.nodes.some( + (node) => node.id === item.identifier2 && node.name === item.name2 + ); + // 璇佹槑涓嶅瓨鍦� + if (exists1 !== true) { + this.nodes.push({ + name: item.name1, + id: item.identifier1 + }); + } + if (exists2 !== true) { + this.nodes.push({ + name: item.name2, + id: item.identifier2 + }); + } + let obj = { + source: item.name1, + target: item.name2, + relation: item.relationName || "" // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓� + }; + this.relationships.push(obj); + }); + } + this.relation(); }); }, getMapInfo() { getSpaceTime({ personId: this.detailId }).then((res) => { - console.log(res); + console.log(res,'getSpaceTime'); + const data = res.list.map(item=>{ + return { + name: item.activityName, + value: [item.xcoord,item.ycoord] + } + }) + // 鏃剁┖鍦板浘 + loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => { + this.spaceTime(data); + }); }); }, @@ -489,7 +629,7 @@ fangdaClick(index) { if (index == 1) { uni.navigateTo({ - url: "/pages/character/index" + url: "/pages/character/index?keyword=" + this.detailInfo.NAME }); } else if (index == 2) { uni.navigateTo({ @@ -540,79 +680,94 @@ relation() { var chartDom = document.getElementById("relation"); var myChart = echarts.init(chartDom); - // 鍋囪鎮ㄦ湁鑺傜偣鍚嶇О鍜屽畠浠箣闂寸殑鍏崇郴鏁版嵁 - var nodes = ["鏉庢椂鐝�", "鎴愬氨", "浼犳壙", "浜插弸", "钁椾綔"]; - var relationships = [ - { - source: "鏉庢椂鐝�", - target: "鎴愬氨" - }, - { - source: "鏉庢椂鐝�", - target: "浼犳壙" - }, - { - source: "鏉庢椂鐝�", - target: "浜插弸" - }, - { - source: "鏉庢椂鐝�", - target: "钁椾綔" - } - // 鍏朵粬鍏崇郴... - ]; + var nodes = this.nodes; + var relationships = this.relationships; - // 鏍规嵁鍏崇郴鏁版嵁鐢熸垚杩炴帴绾� - 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; // 灏哄璺濈 + let Distance = 10; // 涓嶅悓灏哄涓嬩慨鏀筫charts鐨勫瓧浣� if (window.innerWidth > 2560 && window.innerWidth <= 3840) { FontSize = 28; BorderWidth = 5; SymbolSize = 100; + Distance = 33; } else if (window.innerWidth > 1920 && window.innerWidth <= 2560) { FontSize = 28; BorderWidth = 4; SymbolSize = 90; + Distance = 22; } else if (window.innerWidth >= 1366 && window.innerWidth <= 1920) { FontSize = 18; BorderWidth = 4; SymbolSize = 70; + Distance = 22; } + // 鏍规嵁鍏崇郴鏁版嵁鐢熸垚杩炴帴绾� + var links = []; + relationships.forEach((relationship, i) => { + var sourceIndex = nodes.findIndex( + (node) => node.name === relationship.source + ); + var targetIndex = nodes.findIndex( + (node) => node.name === relationship.target + ); + if (relationship.relation) { + if (sourceIndex !== -1 && targetIndex !== -1) { + links.push({ + source: sourceIndex, + target: targetIndex, + label: { + show: true, + formatter: function (params) { + return relationship.relation; + }, // 璁剧疆鍏崇郴鏍囩鍐呭涓�"Child-Parent" + color: "#2C2C2C", + fontSize: FontSize - 2, + backgroundColor: "rgba(255, 255, 255, 1)", + padding: [3, 8], + borderRadius: 30, + position: "middle", // 璁剧疆鏍囩鏂囨湰鍦ㄧ嚎鐨勪腑闂翠綅缃笂灞呬腑鏄剧ず + // bottom: -(FontSize+10), + z: 10, // 璁剧疆鏍囩鐨剒杞撮珮搴︼紝浣垮叾姣旇繛鎺ョ嚎鏇撮珮 + distance: -(Distance + 1) // 灏嗘爣绛炬斁缃湪杩炴帴绾夸笂 + } + }); + } + } + }); // 鏍规嵁nodes鍔ㄦ�佺敓鎴愯妭鐐规暟鎹� var nodeData = nodes.map(function (node, index) { return { - name: node, - x: Math.random() * 1000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆 + name: node.name, + id: node.id, + x: Math.random() * 2000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆 y: Math.random() * 600, // 璁剧疆闅忔満y鍧愭爣浣嶇疆 itemStyle: { - color: getColorByIndex(index), // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� + color: "#eae0eb", // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� borderWidth: BorderWidth, - borderColor: getColorByIndex(index + 1) + borderColor: "#996f9f" } }; }); - // 璁剧疆棰滆壊 - function getColorByIndex(index) { - var colors = ["#ecf4ff", "#dd9795", "#f1edbe", "#ecf4ff", "#c5dbd8"]; // 鍙互鏍规嵁瀹為檯鎯呭喌璁剧疆棰滆壊鏁扮粍 - return colors[index % colors.length]; - } - var option; option = { + title: { + left: "center", + top: FontSize + 10, + subtextStyle: { + fontSize: FontSize, // 璁剧疆鍓爣棰樻枃瀛楀ぇ灏忎负 14px + color: "#2C2C2C" + } + }, + backgroundColor: { + type: "image", + image: "/static/image/characterRelationBg.png", + size: "100% 100%", // 鑳屾櫙鍥剧墖鐨勫昂瀵革紝鍙互鏄櫨鍒嗘瘮鎴栬�呭儚绱� + position: "center center" // 鑳屾櫙鍥剧墖鐨勪綅缃紝鍙互鏄� top, bottom, middle 鎴栬�呯櫨鍒嗘瘮 + }, tooltip: {}, animationDurationUpdate: 1500, animationEasingUpdate: "quinticInOut", @@ -620,6 +775,7 @@ { type: "graph", layout: "none", + roam: true, symbolSize: SymbolSize, // 璋冩暣鑺傜偣澶у皬 label: { show: true, @@ -628,144 +784,74 @@ }, 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" - } - ], + links: links, lineStyle: { opacity: 0.9, width: 2, - curveness: 0 + curveness: 0.3 + }, + emphasis: { + focus: "adjacency", + lineStyle: { + width: 10 + } } } ] }; - // 灏嗙敓鎴愮殑杩炴帴绾挎坊鍔犲埌echarts鍥捐〃鐨刼ption涓� option.series[0].links = links; + // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉 + myChart.on("click", (params) => { + // menuNav2 = !menuNav1 + if (params.componentType === "series") { + this.spaceTimeArr(params.data.id); + } + }); option && myChart.setOption(option); }, // 鏃剁┖鍦板浘 - spaceTime() { + spaceTime(data) { 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; - }; + // const data = [ + // { + // name: "娴烽棬", + // value: [121.15, 31.89] + // }, + // { + // name: "閯傚皵澶氭柉", + // value: [109.781327, 39.608266] + // }, + // { + // name: "鎷涜繙", + // value: [120.38, 37.35] + // }, + // { + // name: "鑸熷北", + // value: [122.207216, 29.985295] + // }, + // { + // name: "榻愰綈鍝堝皵", + // value: [123.97, 47.33] + // } + // ]; option = { + title: { + text: "", + subtext: "", + sublink: "", + left: "center" + }, tooltip: { trigger: "item" }, bmap: { - center: [104.114129, 37.550339], - zoom: 1, + center: data[0].value, + zoom: 8, roam: true, mapStyle: { styleJson: [ @@ -773,28 +859,91 @@ featureType: "water", elementType: "all", stylers: { - color: "#d1d1d1" + color: "#86a1ac" } }, { featureType: "land", elementType: "all", stylers: { - color: "#f3f3f3" + color: "#f1d99d" + } + }, + { + featureType: "railway", + elementType: "all", + stylers: { + visibility: "off" + } + }, + { + featureType: "highway", + elementType: "all", + stylers: { + color: "#f1d99d" + } + }, + { + featureType: "highway", + elementType: "labels", + stylers: { + visibility: "off" + } + }, + { + featureType: "arterial", + elementType: "geometry", + stylers: { + color: "#f1d99d" + } + }, + { + featureType: "arterial", + elementType: "geometry.fill", + stylers: { + color: "#f1d99d" + } + }, + { + featureType: "poi", + elementType: "all", + stylers: { + visibility: "off" + } + }, + { + featureType: "green", + elementType: "all", + stylers: { + visibility: "off" + } + }, + { + featureType: "subway", + elementType: "all", + stylers: { + visibility: "off" } }, { featureType: "manmade", elementType: "all", stylers: { - color: "#d1d1d1" + color: "#f1d99d" } }, { featureType: "local", elementType: "all", stylers: { - color: "#d1d1d1" + color: "#f1d99d" + } + }, + { + featureType: "local", + elementType: "labels", + stylers: { + visibility: "off" } }, { @@ -808,21 +957,21 @@ featureType: "boundary", elementType: "all", stylers: { - color: "#fefefe" + color: "#f1d99d" } }, { featureType: "building", elementType: "all", stylers: { - color: "#d1d1d1" + color: "#f1d99d" } }, { featureType: "label", elementType: "labels.text.fill", stylers: { - color: "#999999" + color: "#000" } } ] @@ -830,18 +979,13 @@ }, series: [ { - name: "pm2.5", + name: "", type: "scatter", coordinateSystem: "bmap", - data: convertData(data), - symbolSize: function (val) { - return val[2] / 10; - }, + data: data, + symbolSize: 0, encode: { value: 2 - }, - credits: { - enabled: false }, label: { formatter: "{b}", @@ -855,19 +999,11 @@ } }, { - name: "Top 5", + name: "", 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; - }, + data: data, + symbolSize: 20, encode: { value: 2 }, @@ -878,20 +1014,20 @@ label: { formatter: "{b}", position: "right", - show: true + show: false }, itemStyle: { + color: "#ec7b43", shadowBlur: 10, shadowColor: "#333" }, emphasis: { - scale: true + scale: false }, zlevel: 1 } ] }; - option && myChart.setOption(option); } } diff --git a/src/pages/character/index.vue b/src/pages/character/index.vue index a8ae2b7..3ac07c9 100644 --- a/src/pages/character/index.vue +++ b/src/pages/character/index.vue @@ -269,24 +269,46 @@ // window.addEventListener("resize", this.relation); this.innt(); }, + onLoad(options) { + this.searchKey = options.keyword; + }, methods: { getData() { - getPersonList({ - keywords: "", //鎼滅储妗嗘绱� - name: "", //濮撳悕 - alias: "", //鍒悕 - nativePlace: "", //鏈哄叧 - tagId: null, //鑱屼笟id - official: "", //鑱屽畼 - genderType: null, //鎬у埆 - dynasty: null, //鏈濅唬鍚� - dynastyId: null, //鏈濅唬id - institution: "", //鏈烘瀯 - bookId: null, //鏉ユ簮id - page: 1, - pageSize: 100 + getFuzzySearch({ + keyword: this.searchKey ? this.searchKey : "" }).then((res) => { - console.log(res); + this.nodes = []; + this.relationships = []; + if (res.success && res.list) { + res.list.forEach((item, index) => { + let exists1 = this.nodes.some( + (node) => node.id === item.identifier1 && node.name === item.name1 + ); + let exists2 = this.nodes.some( + (node) => node.id === item.identifier2 && node.name === item.name2 + ); + // 璇佹槑涓嶅瓨鍦� + if (exists1 !== true) { + this.nodes.push({ + name: item.name1, + id: item.identifier1 + }); + } + if (exists2 !== true) { + this.nodes.push({ + name: item.name2, + id: item.identifier2 + }); + } + let obj = { + source: item.name1, + target: item.name2, + relation: item.relationName || "" // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓� + }; + this.relationships.push(obj); + }); + } + this.relation(); }); }, // 鍏崇郴鍥捐氨 @@ -364,9 +386,9 @@ x: Math.random() * 2000, // 璁剧疆闅忔満x鍧愭爣浣嶇疆 y: Math.random() * 600, // 璁剧疆闅忔満y鍧愭爣浣嶇疆 itemStyle: { - color: getColorByIndex(), // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� + color: "#eae0eb", // 鍙互鏍规嵁绱㈠紩璁剧疆涓嶅悓鐨勯鑹� borderWidth: BorderWidth, - borderColor: getColorByIndex() + borderColor: "#996f9f" } }; }); @@ -384,8 +406,6 @@ var color = "#" + hexR + hexG + hexB; return color; } - console.log(links); - console.log(nodeData); var option; option = { title: { @@ -430,6 +450,12 @@ opacity: 0.9, width: 2, curveness: 0.3 + }, + emphasis: { + focus: "adjacency", + lineStyle: { + width: 10 + } } } ] @@ -448,40 +474,7 @@ // 鍩虹鎼滅储 onSearch(val) { this.searchKey = val.text; - getFuzzySearch({ keyword: val.text }).then((res) => { - if (res.list) { - this.nodes = []; - this.relationships = []; - res.list.forEach((item, index) => { - let exists1 = this.nodes.some( - (node) => node.id === item.identifier1 && node.name === item.name1 - ); - let exists2 = this.nodes.some( - (node) => node.id === item.identifier2 && node.name === item.name2 - ); - // 璇佹槑涓嶅瓨鍦� - if (exists1 !== true) { - this.nodes.push({ - name: item.name1, - id: item.identifier1 - }); - } - if (exists2 !== true) { - this.nodes.push({ - name: item.name2, - id: item.identifier2 - }); - } - let obj = { - source: item.name1, - target: item.name2, - relation: item.relationName || "" // 濡傛灉瀛樺湪 relationName 瀛楁鍒欎娇鐢紝鍚﹀垯涓虹┖瀛楃涓� - }; - this.relationships.push(obj); - }); - } - this.relation(); - }); + this.getData(); }, // 楂樼骇鎼滅储 onSubmit(val) { diff --git a/src/pages/territory/territory.vue b/src/pages/territory/territory.vue index ab643e3..c09d6d9 100644 --- a/src/pages/territory/territory.vue +++ b/src/pages/territory/territory.vue @@ -1,1592 +1,758 @@ <template> - <view> - <!-- 椤堕儴瀵艰埅 --> - <headNav :idIndex="idIndex" text="涓尰鍦板煙鍖昏氨" /> - <view class="flex flex-center" style="width: 100%; margin: .2rem 0 .34rem;justify-content: flex-start;"> - <advancedSearch class="Search" placehold="杈撳叆濮撳悕/鍒悕/鏈濅唬/浼犱富鑱屼笟鎼滅储" @onSearch="onSearch" :isAvancedTrue="false" /> - <ul class="flex"> - <li style="" v-for="(item,index) in dynasty" :key="item.id"> - <view @click="SchoolClick(item.id)" class="flex flex-center font-family school" - :style="{'marginRight': index === dynasty.length - 1 ? '0' : '0.03rem'}" - style="font-weight: 500; border-radius: .3rem; padding: .06rem .15rem; color: #2C2C2C; font-size: .12rem; margin-top: .03rem;margin-right: .1rem;background-color: #fff;"> - <view class="" :style="{background:item.color}" - style="margin-right: .07rem; width: .12rem;height: .12rem;border-radius: 50%;"></view> - <view class="" style="color: #2C2C2C;font-size: .12rem;">{{item.name}}</view> - </view> - </li> - </ul> - </view> - <!-- 鎼滅储鍚庣殑寮规 --> - <el-card class="box-card " v-if="isSearch" - style=" height: 3.2rem; width: 3rem;position: fixed;z-index: 999999999999;left: 1rem;top: 2.2rem;"> - <div slot="header" class="clearfix"> - <span>浜虹墿 ({{SearchArr.length}})</span> - <el-button style="float: right; padding: 3px 0;font-size: .12rem;color: #597AA5;" - @click="isSearch=false" type="text">鍏抽棴</el-button> - </div> - <view class="" style="overflow: auto;height: 2.5rem;"> - <ul class="information" v-for="(item,index) in SearchArr" :key="index"> - <li style="font-size: .18rem;font-weight: 700;">{{item.name}}</li> - <li>鐢熷崚骞�: {{item.birthAndDeath}}</li> - <li>鏉ユ簮: {{item.source}}</li> - <li v-if="SearchArr.length-1!==index" style="margin: .1rem 0; border-bottom: 1px solid #D8D8D8;"></li> - </ul> - </view> - - </el-card> - <!-- echarts閲岄潰鐨勬暟鎹偣鍑诲悗寮规 --> - <el-card class="box-card echartsTrue" v-if="isEchTrue" - style="overflow: inherit; width: 3rem; position: fixed;z-index: 999999999999;" - :style="{top:isTop,left:isLeft}"> - <div slot="header" class="clearfix"> - <span>{{information[0].content}}</span> - <el-button style="float: right; padding: 3px 0;font-size: .12rem;color: #597AA5;" - @click="isEchTrue=false" type="text">鍏抽棴</el-button> - </div> - <ul class="information"> - <li v-for="(item,index) in information" :key="index"> - {{item.label}}: {{item.content}} - </li> - </ul> - <el-button class="flex" @click="viewMoreClick" - style="width: 100%; padding: 3px 0;font-size: .12rem;color: #597AA5;" type="text">鏌ョ湅鏇村>></el-button> - </el-card> - <!-- echarts鍦板浘 --> - <view id="main" style="width: 100vw;position: relative;"></view> + <view class="pageBox"> + <!-- 椤堕儴瀵艰埅 --> + <headNav :idIndex="idIndex" text="涓尰鍦板煙鍖昏氨" /> + <view + class="flex flex-center" + style="width: 100%; margin: 0.2rem 0 0.34rem; justify-content: flex-start" + > + <advancedSearch + class="Search" + placehold="杈撳叆濮撳悕/鍒悕/鏈濅唬/浼犱富鑱屼笟鎼滅储" + @onSearch="onSearch" + :isAvancedTrue="false" + /> + <ul class="flex"> + <li style="" v-for="(item, index) in dynasty" :key="item.id"> + <view + @click="SchoolClick(item.id)" + class="flex flex-center font-family school" + :style="{ + marginRight: index === dynasty.length - 1 ? '0' : '0.03rem' + }" + style=" + font-weight: 500; + border-radius: 0.3rem; + padding: 0.06rem 0.15rem; + color: #2c2c2c; + font-size: 0.12rem; + margin-top: 0.03rem; + margin-right: 0.1rem; + background-color: #fff; + " + > + <view + class="" + :style="{ background: item.color }" + style=" + margin-right: 0.07rem; + width: 0.12rem; + height: 0.12rem; + border-radius: 50%; + " + ></view> + <view class="" style="color: #2c2c2c; font-size: 0.12rem">{{ + item.name + }}</view> + </view> + </li> + </ul> + </view> + <!-- 鎼滅储鍚庣殑寮规 --> + <el-card + class="box-card" + v-if="isSearch" + style=" + height: 3.2rem; + width: 3rem; + position: fixed; + z-index: 999999999999; + left: 1rem; + top: 2.2rem; + " + > + <div slot="header" class="clearfix"> + <span>浜虹墿 ({{ SearchArr.length }})</span> + <el-button + style=" + float: right; + padding: 3px 0; + font-size: 0.12rem; + color: #597aa5; + " + @click="isSearch = false" + type="text" + >鍏抽棴</el-button + > + </div> + <view class="" style="overflow: auto; height: 2.5rem"> + <ul class="information" v-for="(item, index) in SearchArr" :key="index"> + <li style="font-size: 0.18rem; font-weight: 700">{{ item.name }}</li> + <li>鐢熷崚骞�: {{ item.birthAndDeath }}</li> + <li>鏉ユ簮: {{ item.source }}</li> + <li + v-if="SearchArr.length - 1 !== index" + style="margin: 0.1rem 0; border-bottom: 1px solid #d8d8d8" + ></li> + </ul> + </view> + </el-card> + <!-- echarts閲岄潰鐨勬暟鎹偣鍑诲悗寮规 --> + <el-card + class="box-card echartsTrue" + v-if="isEchTrue" + style=" + overflow: inherit; + width: 3rem; + position: fixed; + z-index: 999999999999; + " + :style="{ top: isTop, left: isLeft }" + > + <div slot="header" class="clearfix"> + <span>{{ information[0].content }}</span> + <el-button + style=" + float: right; + padding: 3px 0; + font-size: 0.12rem; + color: #597aa5; + " + @click="isEchTrue = false" + type="text" + >鍏抽棴</el-button + > + </div> + <ul class="information"> + <li v-for="(item, index) in information" :key="index"> + {{ item.label }}: {{ item.content }} + </li> + </ul> + <el-button + class="flex" + @click="viewMoreClick" + style="width: 100%; padding: 3px 0; font-size: 0.12rem; color: #597aa5" + type="text" + >鏌ョ湅鏇村>></el-button + > + </el-card> + <!-- echarts鍦板浘 --> + <view id="main" style="width: 100vw; position: relative"></view> - <!-- 鏈濅唬 --> - <view class="flex flex-center" style="width: 100%; position: fixed;bottom: .33rem;left: 0;"> - <ul class="flex"> - <li @click="dynastyBottomClick(item.id)" v-for="(item,index) in dynasty1" :key="item.id"> - <view class="flex flex-center" style="height: .35rem; background-color: #fff; color:#244A7B ;"> - {{item.coord}} - </view> - <view class="flex flex-center font-family" - style="padding: .05rem .19rem; height: .3rem;line-height: .3rem; color: #fff; font-size: .14rem; margin-top: .03rem;margin-right: .03rem;background-color: #597AA5;" - :style="{'marginRight': index === dynasty1.length - 1 ? '0' : '0.03rem','background':dynasty1Color==item.id?'#244A7B':'#597AA5'}"> - {{item.name}} - </view> - </li> - </ul> - </view> - </view> + <!-- 鏈濅唬 --> + <view + class="flex flex-center" + style="width: 100%; position: fixed; bottom: 0.33rem; left: 0" + > + <ul class="flex"> + <li + @click="dynastyBottomClick(item.id)" + v-for="(item, index) in dynasty1" + :key="item.id" + > + <view + class="flex flex-center" + style="height: 0.35rem; background-color: #fff; color: #244a7b" + > + {{ item.coord }} + </view> + <view + class="flex flex-center font-family" + style=" + padding: 0.05rem 0.19rem; + height: 0.3rem; + line-height: 0.3rem; + color: #fff; + font-size: 0.14rem; + margin-top: 0.03rem; + margin-right: 0.03rem; + background-color: #597aa5; + " + :style="{ + marginRight: index === dynasty1.length - 1 ? '0' : '0.03rem', + background: dynasty1Color == item.id ? '#244A7B' : '#597AA5' + }" + > + {{ item.name }} + </view> + </li> + </ul> + </view> + </view> </template> <!-- <script src="https://api.map.baidu.com/api?v=3.0&ak=5USVDAhhS4ssz44HLq3gNPZai7naXf4Q&callback=initializeMap"></script> --> <!-- 5USVDAhhS4ssz44HLq3gNPZai7naXf4Q --> <script> - import { - loadBMap - } from "@/static/map.js" - import * as echarts from 'echarts'; - import 'echarts/extension/bmap/bmap'; - export default { - data() { - return { - // echarts鍏冪礌鐐瑰嚮鏃跺嚭鏉ョ殑寮圭獥鍜屽潗鏍� - isEchTrue: false, - isLeft: 0, - isTop: 0, - // 鐢ㄦ埛淇℃伅 - information: [{ - label: '濮撳悕', - content: '鏉庢椂鐝�' - }, - { - label: '鍒悕', - content: '涓滀附鍏堢敓' - }, - { - label: '绫嶈疮', - content: '婀栧寳' - }, - { - label: '鍖诲鍒嗙', - content: '涓嵂,閽堢伕' - }, - { - label: '灏忎紶', - content: '鏉庢椂鐝�(绾�1518骞磣1593 骞�)锛� 瀛椾笢鐠э紝 鏅氬勾鑷彿婵掓箹灞变汉锛� 婀栧箍榛勫窞搴滆柂宸�(浠婃箹鍖楃渷钖槬鍘�) 浜猴紝 鏄庝唬钁楀悕鍖昏嵂瀛﹀銆� 涓庘�� 鍖诲湥鈥� 涓囧瘑鏂嬮綈鍚嶏紝 鍙ゆ湁鈥� 涓囧瘑鏂嬬殑鏂癸紝 鏉庢椂鐝嶇殑鑽�� 涔嬭銆� 鍚庝负妤氬共搴�...' - } - ], - // 涓嬮潰鐨勬湞浠�1 - dynasty1Color: 1, - dynasty1: [{ - name: '澶忔湞', - coord: '2070BC', - id: 1 - }, - { - name: '鍟嗘湞', - id: 2, - coord: '1600BC', - }, - { - name: '瑗垮懆', - id: 3, - coord: '1600BC' - }, - { - name: '鏄ョ鎴樺浗', - id: 4, - coord: '770BC' - }, - { - name: '绉︽湞', - id: 5, - coord: '221BC' - }, { - name: '姹夋湞', - id: 6, - coord: '202BC' - }, - { - name: '涓夊浗涓ゆ檵鍗楀寳鏈�', - id: 7, - coord: '184' - }, - { - name: '闅嬫湞', - id: 8, - coord: '581' - }, - { - name: '鍞愭湞', - id: 9, - coord: '618' - }, - { - name: '浜斾唬鍗佸浗', - id: 10, - coord: '907' - }, - { - name: '杈藉閲�', - id: 11, - coord: '907' - }, - { - name: '瀹嬫湞', - id: 12, - coord: '960' - }, - { - name: '鍏冩湞', - id: 13, - coord: '1271' - }, - { - name: '鏄庢湞', - id: 14, - coord: '1368' - }, - { - name: '娓呮湞', - id: 15, - coord: '1636' - }, - ], - // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ - idIndex: 0, - // 鏈濅唬 - dynasty: [{ - name: '澶忔湞', - color: '#90BBD8', - id: 1 - }, { - name: '鍟嗘湞', - color: '#EDD28B', - id: 2 - }, { - name: '瑗垮懆', - color: '#CF746D', - id: 3 - }, { - name: '绉︽湞', - color: '#9CC27A', - id: 4 - }, { - name: '姹夋湞', - color: '#5B6CB9', - id: 5 - }, { - name: '闅嬫湞', - color: '#8860A8', - id: 6 - }, { - name: '鍞愭湞', - color: '#DE8E66', - id: 7 - }], - // 鎼滅储鍚庢槸鍚︽樉绀哄脊妗� - isSearch:false, - SearchArr:[ - { - id:1, - name:'鏉庢椂鐝�', - birthAndDeath:'1518-1593', - source:'鍥藉浘瑙勮寖妗o紝CBDB锛屼笂鍥惧彜绫嶆暟鎹簱 绫嶈疮锛氭箹鍖�' - },{ - id:2, - name:'鏉庢椂鐝�', - birthAndDeath:'1518-1593', - source:'鍥藉浘瑙勮寖妗o紝CBDB锛屼笂鍥惧彜绫嶆暟鎹簱 绫嶈疮锛氭箹鍖�' - } - ] - } - }, - onLoad(options) { - this.idIndex = options.id - console.log('optionsoptionsoptions', options.id); - }, - mounted() { - console.log('ss'); - // this.$nextTick(() => { - loadBMap('5USVDAhhS4ssz44HLq3gNPZai7naXf4Q').then(() => { - this.innt() - }) - // }) - }, - methods: { - // 鐐瑰嚮涓嬮潰鐨勬湞浠f寜閽� - dynastyBottomClick(id) { - console.log(id); - this.dynasty1Color = id - }, - onSearch(val) { - console.log(val); - // - this.isSearch= true - }, - // 鐐瑰嚮涓婇潰鐨勬湞浠f寜閽� - SchoolClick(id){ - console.log(id); - }, - innt() { - this.$nextTick(() => { +import { loadBMap } from "@/static/map.js"; +import * as echarts from "echarts"; +import "echarts/extension/bmap/bmap"; +export default { + data() { + return { + // echarts鍏冪礌鐐瑰嚮鏃跺嚭鏉ョ殑寮圭獥鍜屽潗鏍� + isEchTrue: false, + isLeft: 0, + isTop: 0, + // 鐢ㄦ埛淇℃伅 + information: [ + { + label: "濮撳悕", + content: "鏉庢椂鐝�" + }, + { + label: "鍒悕", + content: "涓滀附鍏堢敓" + }, + { + label: "绫嶈疮", + content: "婀栧寳" + }, + { + label: "鍖诲鍒嗙", + content: "涓嵂,閽堢伕" + }, + { + label: "灏忎紶", + content: + "鏉庢椂鐝�(绾�1518骞磣1593 骞�)锛� 瀛椾笢鐠э紝 鏅氬勾鑷彿婵掓箹灞变汉锛� 婀栧箍榛勫窞搴滆柂宸�(浠婃箹鍖楃渷钖槬鍘�) 浜猴紝 鏄庝唬钁楀悕鍖昏嵂瀛﹀銆� 涓庘�� 鍖诲湥鈥� 涓囧瘑鏂嬮綈鍚嶏紝 鍙ゆ湁鈥� 涓囧瘑鏂嬬殑鏂癸紝 鏉庢椂鐝嶇殑鑽�� 涔嬭銆� 鍚庝负妤氬共搴�..." + } + ], + // 涓嬮潰鐨勬湞浠�1 + dynasty1Color: 1, + dynasty1: [ + { + name: "澶忔湞", + coord: "2070BC", + id: 1 + }, + { + name: "鍟嗘湞", + id: 2, + coord: "1600BC" + }, + { + name: "瑗垮懆", + id: 3, + coord: "1600BC" + }, + { + name: "鏄ョ鎴樺浗", + id: 4, + coord: "770BC" + }, + { + name: "绉︽湞", + id: 5, + coord: "221BC" + }, + { + name: "姹夋湞", + id: 6, + coord: "202BC" + }, + { + name: "涓夊浗涓ゆ檵鍗楀寳鏈�", + id: 7, + coord: "184" + }, + { + name: "闅嬫湞", + id: 8, + coord: "581" + }, + { + name: "鍞愭湞", + id: 9, + coord: "618" + }, + { + name: "浜斾唬鍗佸浗", + id: 10, + coord: "907" + }, + { + name: "杈藉閲�", + id: 11, + coord: "907" + }, + { + name: "瀹嬫湞", + id: 12, + coord: "960" + }, + { + name: "鍏冩湞", + id: 13, + coord: "1271" + }, + { + name: "鏄庢湞", + id: 14, + coord: "1368" + }, + { + name: "娓呮湞", + id: 15, + coord: "1636" + } + ], + // 鏍囬椤堕儴鏍忛渶瑕佺殑涓滆タ + idIndex: 0, + // 鏈濅唬 + dynasty: [ + { + name: "澶忔湞", + color: "#90BBD8", + id: 1 + }, + { + name: "鍟嗘湞", + color: "#EDD28B", + id: 2 + }, + { + name: "瑗垮懆", + color: "#CF746D", + id: 3 + }, + { + name: "绉︽湞", + color: "#9CC27A", + id: 4 + }, + { + name: "姹夋湞", + color: "#5B6CB9", + id: 5 + }, + { + name: "闅嬫湞", + color: "#8860A8", + id: 6 + }, + { + name: "鍞愭湞", + color: "#DE8E66", + id: 7 + } + ], + // 鎼滅储鍚庢槸鍚︽樉绀哄脊妗� + isSearch: false, + SearchArr: [ + { + id: 1, + name: "鏉庢椂鐝�", + birthAndDeath: "1518-1593", + source: "鍥藉浘瑙勮寖妗o紝CBDB锛屼笂鍥惧彜绫嶆暟鎹簱 绫嶈疮锛氭箹鍖�" + }, + { + id: 2, + name: "鏉庢椂鐝�", + birthAndDeath: "1518-1593", + source: "鍥藉浘瑙勮寖妗o紝CBDB锛屼笂鍥惧彜绫嶆暟鎹簱 绫嶈疮锛氭箹鍖�" + } + ] + }; + }, + onLoad(options) { + this.idIndex = options.id; + console.log("optionsoptionsoptions", options.id); + }, + mounted() { + console.log("ss"); + // this.$nextTick(() => { + loadBMap("1NJdwrI1CfT6lrykVhDkmWgsO6O2bjQK").then(() => { + this.innt(); + }); + // }) + }, + methods: { + // 鐐瑰嚮涓嬮潰鐨勬湞浠f寜閽� + dynastyBottomClick(id) { + console.log(id); + this.dynasty1Color = id; + }, + onSearch(val) { + console.log(val); + // + this.isSearch = true; + }, + // 鐐瑰嚮涓婇潰鐨勬湞浠f寜閽� + SchoolClick(id) { + console.log(id); + }, + innt() { + this.$nextTick(() => { + var chartDom = document.getElementById("main"); + var myChart = echarts.init(chartDom); + var option; - var chartDom = document.getElementById('main'); - var myChart = echarts.init(chartDom); - var option; + const data = [ + { + name: "娴烽棬", + value: [121.15, 31.89] + }, + { + name: "閯傚皵澶氭柉", + value: [109.781327, 39.608266] + }, + { + name: "鎷涜繙", + value: [120.38, 37.35] + }, + { + name: "鑸熷北", + value: [122.207216, 29.985295] + }, + { + name: "榻愰綈鍝堝皵", + value: [123.97, 47.33] + } + ]; + option = { + title: { + text: "", + subtext: "", + sublink: "", + left: "center" + }, + tooltip: { + trigger: "item" + }, + bmap: { + center: [104.114129, 37.550339], + zoom: 5, + roam: true, + mapStyle: { + styleJson: [ + { + featureType: "water", + elementType: "all", + stylers: { + color: "#86a1ac" + } + }, + { + featureType: "land", + elementType: "all", + stylers: { + color: "#f1d99d" + } + }, + { + featureType: "railway", + elementType: "all", + stylers: { + visibility: "off" + } + }, + { + featureType: "highway", + elementType: "all", + stylers: { + color: "#f1d99d" + } + }, + { + featureType: "highway", + elementType: "labels", + stylers: { + visibility: "off" + } + }, + { + featureType: "arterial", + elementType: "geometry", + stylers: { + color: "#f1d99d" + } + }, + { + featureType: "arterial", + elementType: "geometry.fill", + stylers: { + color: "#f1d99d" + } + }, + { + featureType: "poi", + elementType: "all", + stylers: { + visibility: "off" + } + }, + { + featureType: "green", + elementType: "all", + stylers: { + visibility: "off" + } + }, + { + featureType: "subway", + elementType: "all", + stylers: { + visibility: "off" + } + }, + { + featureType: "manmade", + elementType: "all", + stylers: { + color: "#f1d99d" + } + }, + { + featureType: "local", + elementType: "all", + stylers: { + color: "#f1d99d" + } + }, + { + featureType: "local", + elementType: "labels", + stylers: { + visibility: "off" + } + }, + { + featureType: "arterial", + elementType: "labels", + stylers: { + visibility: "off" + } + }, + { + featureType: "boundary", + elementType: "all", + stylers: { + color: "#f1d99d" + } + }, + { + featureType: "building", + elementType: "all", + stylers: { + color: "#f1d99d" + } + }, + { + featureType: "label", + elementType: "labels.text.fill", + stylers: { + color: "#000" + } + } + ] + } + }, + series: [ + { + name: "", + type: "scatter", + coordinateSystem: "bmap", + data: data, + symbolSize: 0, + encode: { + value: 2 + }, + label: { + formatter: "{b}", + position: "right", + show: false + }, + emphasis: { + label: { + show: true + } + } + }, + { + name: "", + type: "effectScatter", + coordinateSystem: "bmap", + data: data, + symbolSize: 20, + encode: { + value: 2 + }, + showEffectOn: "render", + rippleEffect: { + brushType: "stroke" + }, + label: { + formatter: "{b}", + position: "right", + show: false + }, + itemStyle: { + color: "#ec7b43", + shadowBlur: 10, + shadowColor: "#333" + }, + emphasis: { + scale: false + }, + zlevel: 1 + } + ] + }; + // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉 + myChart.on("click", (params) => { + console.log(params.event.offsetX, params.event.offsetY); + if (params.componentType === "series") { + var dataName = params.data.name; // 鑾峰彇鐐瑰嚮鐨勬暟鎹悕绉� + var dataValue = params.data.value; // 鑾峰彇鐐瑰嚮鐨勬暟鎹�� + // 鍦ㄨ繖閲屽彲浠ユ牴鎹渶瑕佸鐞嗙偣鍑讳簨浠讹紝姣斿寮瑰嚭瀵瑰簲鏁版嵁鐨勮缁嗕俊鎭瓑鎿嶄綔 + console.log("鐐瑰嚮浜�", dataName, "鏁版嵁锛屾暟鍊间负", dataValue); + // 杩欓噷鍙互缂栧啓瑙﹀彂鏃堕棿鑾峰彇瀵瑰簲鏁版嵁淇℃伅鐨勯�昏緫 + this.spaceTimeArr(params); + } + }); - const data = [{ - name: '娴烽棬', - value: 9 - }, - { - name: '閯傚皵澶氭柉', - value: 12 - }, - { - name: '鎷涜繙', - value: 12 - }, - { - name: '鑸熷北', - value: 12 - }, - { - name: '榻愰綈鍝堝皵', - value: 14 - }, - { - name: '鐩愬煄', - value: 15 - }, - { - name: '璧ゅ嘲', - value: 16 - }, - { - name: '闈掑矝', - value: 18 - }, - { - name: '涔冲北', - value: 18 - }, - { - name: '閲戞槍', - value: 19 - }, - { - name: '娉夊窞', - value: 21 - }, - { - name: '鑾辫タ', - value: 21 - }, - { - name: '鏃ョ収', - value: 21 - }, - { - name: '鑳跺崡', - value: 22 - }, - { - name: '鍗楅��', - value: 23 - }, - { - name: '鎷夎惃', - value: 24 - }, - { - name: '浜戞诞', - value: 24 - }, - { - name: '姊呭窞', - value: 25 - }, - { - name: '鏂囩櫥', - value: 25 - }, - { - name: '涓婃捣', - value: 25 - }, - { - name: '鏀�鏋濊姳', - value: 25 - }, - { - name: '濞佹捣', - value: 25 - }, - { - name: '鎵垮痉', - value: 25 - }, - { - name: '鍘﹂棬', - value: 26 - }, - { - name: '姹曞熬', - value: 26 - }, - { - name: '娼窞', - value: 26 - }, - { - name: '涓逛笢', - value: 27 - }, - { - name: '澶粨', - value: 27 - }, - { - name: '鏇查潠', - value: 27 - }, - { - name: '鐑熷彴', - value: 28 - }, - { - name: '绂忓窞', - value: 29 - }, - { - name: '鐡︽埧搴�', - value: 30 - }, - { - name: '鍗冲ⅷ', - value: 30 - }, - { - name: '鎶氶『', - value: 31 - }, - { - name: '鐜夋邯', - value: 31 - }, - { - name: '寮犲鍙�', - value: 31 - }, - { - name: '闃虫硥', - value: 31 - }, - { - name: '鑾卞窞', - value: 32 - }, - { - name: '婀栧窞', - value: 32 - }, - { - name: '姹曞ご', - value: 32 - }, - { - name: '鏄嗗北', - value: 33 - }, - { - name: '瀹佹尝', - value: 33 - }, - { - name: '婀涙睙', - value: 33 - }, - { - name: '鎻槼', - value: 34 - }, - { - name: '鑽f垚', - value: 34 - }, - { - name: '杩炰簯娓�', - value: 35 - }, - { - name: '钁姦宀�', - value: 35 - }, - { - name: '甯哥啛', - value: 36 - }, - { - name: '涓滆帪', - value: 36 - }, - { - name: '娌虫簮', - value: 36 - }, - { - name: '娣畨', - value: 36 - }, - { - name: '娉板窞', - value: 36 - }, - { - name: '鍗楀畞', - value: 37 - }, - { - name: '钀ュ彛', - value: 37 - }, - { - name: '鎯犲窞', - value: 37 - }, - { - name: '姹熼槾', - value: 37 - }, - { - name: '钃幈', - value: 37 - }, - { - name: '闊跺叧', - value: 38 - }, - { - name: '鍢夊唱鍏�', - value: 38 - }, - { - name: '骞垮窞', - value: 38 - }, - { - name: '寤跺畨', - value: 38 - }, - { - name: '澶師', - value: 39 - }, - { - name: '娓呰繙', - value: 39 - }, - { - name: '涓北', - value: 39 - }, - { - name: '鏄嗘槑', - value: 39 - }, - { - name: '瀵垮厜', - value: 40 - }, - { - name: '鐩橀敠', - value: 40 - }, - { - name: '闀挎不', - value: 41 - }, - { - name: '娣卞湷', - value: 41 - }, - { - name: '鐝犳捣', - value: 42 - }, - { - name: '瀹胯縼', - value: 43 - }, - { - name: '鍜搁槼', - value: 43 - }, - { - name: '閾滃窛', - value: 44 - }, - { - name: '骞冲害', - value: 44 - }, - { - name: '浣涘北', - value: 44 - }, - { - name: '娴峰彛', - value: 44 - }, - { - name: '姹熼棬', - value: 45 - }, - { - name: '绔犱笜', - value: 45 - }, - { - name: '鑲囧簡', - value: 46 - }, - { - name: '澶ц繛', - value: 47 - }, - { - name: '涓存本', - value: 47 - }, - { - name: '鍚存睙', - value: 47 - }, - { - name: '鐭冲槾灞�', - value: 49 - }, - { - name: '娌堥槼', - value: 50 - }, - { - name: '鑻忓窞', - value: 50 - }, - { - name: '鑼傚悕', - value: 50 - }, - { - name: '鍢夊叴', - value: 51 - }, - { - name: '闀挎槬', - value: 51 - }, - { - name: '鑳跺窞', - value: 52 - }, - { - name: '閾跺窛', - value: 52 - }, - { - name: '寮犲娓�', - value: 52 - }, - { - name: '涓夐棬宄�', - value: 53 - }, - { - name: '閿﹀窞', - value: 54 - }, - { - name: '鍗楁槍', - value: 54 - }, - { - name: '鏌冲窞', - value: 54 - }, - { - name: '涓変簹', - value: 54 - }, - { - name: '鑷础', - value: 56 - }, - { - name: '鍚夋灄', - value: 56 - }, - { - name: '闃虫睙', - value: 57 - }, - { - name: '娉稿窞', - value: 57 - }, - { - name: '瑗垮畞', - value: 57 - }, - { - name: '瀹滃', - value: 58 - }, - { - name: '鍛煎拰娴╃壒', - value: 58 - }, - { - name: '鎴愰兘', - value: 58 - }, - { - name: '澶у悓', - value: 58 - }, - { - name: '闀囨睙', - value: 59 - }, - { - name: '妗傛灄', - value: 59 - }, - { - name: '寮犲鐣�', - value: 59 - }, - { - name: '瀹滃叴', - value: 59 - }, - { - name: '鍖楁捣', - value: 60 - }, - { - name: '瑗垮畨', - value: 61 - }, - { - name: '閲戝潧', - value: 62 - }, - { - name: '涓滆惀', - value: 62 - }, - { - name: '鐗′腹姹�', - value: 63 - }, - { - name: '閬典箟', - value: 63 - }, - { - name: '缁嶅叴', - value: 63 - }, - { - name: '鎵窞', - value: 64 - }, - { - name: '甯稿窞', - value: 64 - }, - { - name: '娼嶅潑', - value: 65 - }, - { - name: '閲嶅簡', - value: 66 - }, - { - name: '鍙板窞', - value: 67 - }, - { - name: '鍗椾含', - value: 67 - }, - { - name: '婊ㄥ窞', - value: 70 - }, - { - name: '璐甸槼', - value: 71 - }, - { - name: '鏃犻敗', - value: 71 - }, - { - name: '鏈邯', - value: 71 - }, - { - name: '鍏嬫媺鐜涗緷', - value: 72 - }, - { - name: '娓崡', - value: 72 - }, - { - name: '椹瀺灞�', - value: 72 - }, - { - name: '瀹濋浮', - value: 72 - }, - { - name: '鐒︿綔', - value: 75 - }, - { - name: '鍙ュ', - value: 75 - }, - { - name: '鍖椾含', - value: 79 - }, - { - name: '寰愬窞', - value: 79 - }, - { - name: '琛℃按', - value: 80 - }, - { - name: '鍖呭ご', - value: 80 - }, - { - name: '缁甸槼', - value: 80 - }, - { - name: '涔岄瞾鏈ㄩ綈', - value: 84 - }, - { - name: '鏋e簞', - value: 84 - }, - { - name: '鏉窞', - value: 84 - }, - { - name: '娣勫崥', - value: 85 - }, - { - name: '闉嶅北', - value: 86 - }, - { - name: '婧ч槼', - value: 86 - }, - { - name: '搴撳皵鍕�', - value: 86 - }, - { - name: '瀹夐槼', - value: 90 - }, - { - name: '寮�灏�', - value: 90 - }, - { - name: '娴庡崡', - value: 92 - }, - { - name: '寰烽槼', - value: 93 - }, - { - name: '娓╁窞', - value: 95 - }, - { - name: '涔濇睙', - value: 96 - }, - { - name: '閭兏', - value: 98 - }, - { - name: '涓村畨', - value: 99 - }, - { - name: '鍏板窞', - value: 99 - }, - { - name: '娌у窞', - value: 100 - }, - { - name: '涓存矀', - value: 103 - }, - { - name: '鍗楀厖', - value: 104 - }, - { - name: '澶╂触', - value: 105 - }, - { - name: '瀵岄槼', - value: 106 - }, - { - name: '娉板畨', - value: 112 - }, - { - name: '璇告毃', - value: 112 - }, - { - name: '閮戝窞', - value: 113 - }, - { - name: '鍝堝皵婊�', - value: 114 - }, - { - name: '鑱婂煄', - value: 116 - }, - { - name: '鑺滄箹', - value: 117 - }, - { - name: '鍞愬北', - value: 119 - }, - { - name: '骞抽《灞�', - value: 119 - }, - { - name: '閭㈠彴', - value: 119 - }, - { - name: '寰峰窞', - value: 120 - }, - { - name: '娴庡畞', - value: 120 - }, - { - name: '鑽嗗窞', - value: 127 - }, - { - name: '瀹滄槍', - value: 130 - }, - { - name: '涔変箤', - value: 132 - }, - { - name: '涓芥按', - value: 133 - }, - { - name: '娲涢槼', - value: 134 - }, - { - name: '绉︾殗宀�', - value: 136 - }, - { - name: '鏍床', - value: 143 - }, - { - name: '鐭冲搴�', - value: 147 - }, - { - name: '鑾辫姕', - value: 148 - }, - { - name: '甯稿痉', - value: 152 - }, - { - name: '淇濆畾', - value: 153 - }, - { - name: '婀樻江', - value: 154 - }, - { - name: '閲戝崕', - value: 157 - }, - { - name: '宀抽槼', - value: 169 - }, - { - name: '闀挎矙', - value: 175 - }, - { - 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], - 鑸熷北: [122.207216, 29.985295], - 榻愰綈鍝堝皵: [123.97, 47.33], - 鐩愬煄: [120.13, 33.38], - 璧ゅ嘲: [118.87, 42.28], - 闈掑矝: [120.33, 36.07], - 涔冲北: [121.52, 36.89], - 閲戞槍: [102.188043, 38.520089], - 娉夊窞: [118.58, 24.93], - 鑾辫タ: [120.53, 36.86], - 鏃ョ収: [119.46, 35.42], - 鑳跺崡: [119.97, 35.88], - 鍗楅��: [121.05, 32.08], - 鎷夎惃: [91.11, 29.97], - 浜戞诞: [112.02, 22.93], - 姊呭窞: [116.1, 24.55], - 鏂囩櫥: [122.05, 37.2], - 涓婃捣: [121.48, 31.22], - 鏀�鏋濊姳: [101.718637, 26.582347], - 濞佹捣: [122.1, 37.5], - 鎵垮痉: [117.93, 40.97], - 鍘﹂棬: [118.1, 24.46], - 姹曞熬: [115.375279, 22.786211], - 娼窞: [116.63, 23.68], - 涓逛笢: [124.37, 40.13], - 澶粨: [121.1, 31.45], - 鏇查潠: [103.79, 25.51], - 鐑熷彴: [121.39, 37.52], - 绂忓窞: [119.3, 26.08], - 鐡︽埧搴�: [121.979603, 39.627114], - 鍗冲ⅷ: [120.45, 36.38], - 鎶氶『: [123.97, 41.97], - 鐜夋邯: [102.52, 24.35], - 寮犲鍙�: [114.87, 40.82], - 闃虫硥: [113.57, 37.85], - 鑾卞窞: [119.942327, 37.177017], - 婀栧窞: [120.1, 30.86], - 姹曞ご: [116.69, 23.39], - 鏄嗗北: [120.95, 31.39], - 瀹佹尝: [121.56, 29.86], - 婀涙睙: [110.359377, 21.270708], - 鎻槼: [116.35, 23.55], - 鑽f垚: [122.41, 37.16], - 杩炰簯娓�: [119.16, 34.59], - 钁姦宀�: [120.836932, 40.711052], - 甯哥啛: [120.74, 31.64], - 涓滆帪: [113.75, 23.04], - 娌虫簮: [114.68, 23.73], - 娣畨: [119.15, 33.5], - 娉板窞: [119.9, 32.49], - 鍗楀畞: [108.33, 22.84], - 钀ュ彛: [122.18, 40.65], - 鎯犲窞: [114.4, 23.09], - 姹熼槾: [120.26, 31.91], - 钃幈: [120.75, 37.8], - 闊跺叧: [113.62, 24.84], - 鍢夊唱鍏�: [98.289152, 39.77313], - 骞垮窞: [113.23, 23.16], - 寤跺畨: [109.47, 36.6], - 澶師: [112.53, 37.87], - 娓呰繙: [113.01, 23.7], - 涓北: [113.38, 22.52], - 鏄嗘槑: [102.73, 25.04], - 瀵垮厜: [118.73, 36.86], - 鐩橀敠: [122.070714, 41.119997], - 闀挎不: [113.08, 36.18], - 娣卞湷: [114.07, 22.62], - 鐝犳捣: [113.52, 22.3], - 瀹胯縼: [118.3, 33.96], - 鍜搁槼: [108.72, 34.36], - 閾滃窛: [109.11, 35.09], - 骞冲害: [119.97, 36.77], - 浣涘北: [113.11, 23.05], - 娴峰彛: [110.35, 20.02], - 姹熼棬: [113.06, 22.61], - 绔犱笜: [117.53, 36.72], - 鑲囧簡: [112.44, 23.05], - 澶ц繛: [121.62, 38.92], - 涓存本: [111.5, 36.08], - 鍚存睙: [120.63, 31.16], - 鐭冲槾灞�: [106.39, 39.04], - 娌堥槼: [123.38, 41.8], - 鑻忓窞: [120.62, 31.32], - 鑼傚悕: [110.88, 21.68], - 鍢夊叴: [120.76, 30.77], - 闀挎槬: [125.35, 43.88], - 鑳跺窞: [120.03336, 36.264622], - 閾跺窛: [106.27, 38.47], - 寮犲娓�: [120.555821, 31.875428], - 涓夐棬宄�: [111.19, 34.76], - 閿﹀窞: [121.15, 41.13], - 鍗楁槍: [115.89, 28.68], - 鏌冲窞: [109.4, 24.33], - 涓変簹: [109.511909, 18.252847], - 鑷础: [104.778442, 29.33903], - 鍚夋灄: [126.57, 43.87], - 闃虫睙: [111.95, 21.85], - 娉稿窞: [105.39, 28.91], - 瑗垮畞: [101.74, 36.56], - 瀹滃: [104.56, 29.77], - 鍛煎拰娴╃壒: [111.65, 40.82], - 鎴愰兘: [104.06, 30.67], - 澶у悓: [113.3, 40.12], - 闀囨睙: [119.44, 32.2], - 妗傛灄: [110.28, 25.29], - 寮犲鐣�: [110.479191, 29.117096], - 瀹滃叴: [119.82, 31.36], - 鍖楁捣: [109.12, 21.49], - 瑗垮畨: [108.95, 34.27], - 閲戝潧: [119.56, 31.74], - 涓滆惀: [118.49, 37.46], - 鐗′腹姹�: [129.58, 44.6], - 閬典箟: [106.9, 27.7], - 缁嶅叴: [120.58, 30.01], - 鎵窞: [119.42, 32.39], - 甯稿窞: [119.95, 31.79], - 娼嶅潑: [119.1, 36.62], - 閲嶅簡: [106.54, 29.59], - 鍙板窞: [121.420757, 28.656386], - 鍗椾含: [118.78, 32.04], - 婊ㄥ窞: [118.03, 37.36], - 璐甸槼: [106.71, 26.57], - 鏃犻敗: [120.29, 31.59], - 鏈邯: [123.73, 41.3], - 鍏嬫媺鐜涗緷: [84.77, 45.59], - 娓崡: [109.5, 34.52], - 椹瀺灞�: [118.48, 31.56], - 瀹濋浮: [107.15, 34.38], - 鐒︿綔: [113.21, 35.24], - 鍙ュ: [119.16, 31.95], - 鍖椾含: [116.46, 39.92], - 寰愬窞: [117.2, 34.26], - 琛℃按: [115.72, 37.72], - 鍖呭ご: [110, 40.58], - 缁甸槼: [104.73, 31.48], - 涔岄瞾鏈ㄩ綈: [87.68, 43.77], - 鏋e簞: [117.57, 34.86], - 鏉窞: [120.19, 30.26], - 娣勫崥: [118.05, 36.78], - 闉嶅北: [122.85, 41.12], - 婧ч槼: [119.48, 31.43], - 搴撳皵鍕�: [86.06, 41.68], - 瀹夐槼: [114.35, 36.1], - 寮�灏�: [114.35, 34.79], - 娴庡崡: [117, 36.65], - 寰烽槼: [104.37, 31.13], - 娓╁窞: [120.65, 28.01], - 涔濇睙: [115.97, 29.71], - 閭兏: [114.47, 36.6], - 涓村畨: [119.72, 30.23], - 鍏板窞: [103.73, 36.03], - 娌у窞: [116.83, 38.33], - 涓存矀: [118.35, 35.05], - 鍗楀厖: [106.110698, 30.837793], - 澶╂触: [117.2, 39.13], - 瀵岄槼: [119.95, 30.07], - 娉板畨: [117.13, 36.18], - 璇告毃: [120.23, 29.71], - 閮戝窞: [113.65, 34.76], - 鍝堝皵婊�: [126.63, 45.75], - 鑱婂煄: [115.97, 36.45], - 鑺滄箹: [118.38, 31.33], - 鍞愬北: [118.02, 39.63], - 骞抽《灞�: [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 = { - title: { - // text: '鍏ㄥ浗涓昏鍩庡競绌烘皵璐ㄩ噺 - 鐧惧害鍦板浘', - // subtext: 'data from PM25.in', - // sublink: 'http://www.pm25.in', - left: 'center' - }, - // legend: { - // icon: 'image://https://img2.baidu.com/it/u=2771395776,2060749722&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710694800&t=c85f997454c2a2b3f2e7919ba9c194a3' - // }, - // color:['#000'], - tooltip: { - trigger: 'item' - }, - bmap: { - // center: [104.114129, 37.550339], - zoom: 4, // 杩欓噷鍙互鏍规嵁闇�瑕佽皟鏁寸缉鏀剧骇鍒� - roam: true, - mapStyle: { - styleJson: [{ - featureType: 'water', - elementType: 'all', - stylers: { - color: '#d1d1d1' - } - }, - { - featureType: 'land', - elementType: 'all', - stylers: { - color: '#f3f3f3' - } - }, - { - featureType: 'railway', - elementType: 'all', - stylers: { - visibility: 'off' - } - }, - { - featureType: 'highway', - elementType: 'all', - stylers: { - color: '#fdfdfd' - } - }, - { - featureType: 'highway', - elementType: 'labels', - stylers: { - visibility: 'off' - } - }, - { - featureType: 'arterial', - elementType: 'geometry', - stylers: { - color: '#fefefe' - } - }, - { - featureType: 'arterial', - elementType: 'geometry.fill', - stylers: { - color: '#fefefe' - } - }, - { - featureType: 'poi', - elementType: 'all', - stylers: { - visibility: 'off' - } - }, - { - featureType: 'green', - elementType: 'all', - stylers: { - visibility: 'off' - } - }, - { - featureType: 'subway', - elementType: 'all', - stylers: { - visibility: 'off' - } - }, - { - 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 - }, - 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); + }); + }, + // 鏃剁┖鍦板浘鐐瑰嚮鏃惰幏鍙栫殑鏁版嵁 + spaceTimeArr(Arr) { + // 淇敼 Vue 缁勪欢鐨勬暟鎹紝渚嬪鏄剧ず鑿滃崟瀵艰埅 + // 鏃剁┖鍦板浘鐨勬暟鎹� + console.log(Arr); - - // 璁剧疆鐐瑰嚮浜嬩欢鐩戝惉 - myChart.on('click', (params) => { - console.log(params.event.offsetX, params.event.offsetY); - if (params.componentType === 'series') { - - var dataName = params.data.name; // 鑾峰彇鐐瑰嚮鐨勬暟鎹悕绉� - var dataValue = params.data.value; // 鑾峰彇鐐瑰嚮鐨勬暟鎹�� - // 鍦ㄨ繖閲屽彲浠ユ牴鎹渶瑕佸鐞嗙偣鍑讳簨浠讹紝姣斿寮瑰嚭瀵瑰簲鏁版嵁鐨勮缁嗕俊鎭瓑鎿嶄綔 - console.log('鐐瑰嚮浜�', dataName, '鏁版嵁锛屾暟鍊间负', dataValue); - // 杩欓噷鍙互缂栧啓瑙﹀彂鏃堕棿鑾峰彇瀵瑰簲鏁版嵁淇℃伅鐨勯�昏緫 - this.spaceTimeArr(params) - } - }) - - option && myChart.setOption(option); - - }) - }, - // 鏃剁┖鍦板浘鐐瑰嚮鏃惰幏鍙栫殑鏁版嵁 - spaceTimeArr(Arr) { - // 淇敼 Vue 缁勪欢鐨勬暟鎹紝渚嬪鏄剧ず鑿滃崟瀵艰埅 - // 鏃剁┖鍦板浘鐨勬暟鎹� - console.log(Arr); - - this.isEchTrue = true - this.$nextTick(() => { - this.isTop = (Arr.event.offsetY ) - .18 - (document.querySelector('.echartsTrue') - .offsetHeight / 2.1 ) + 'px' - this.isLeft = Arr.event.offsetX - (document.querySelector('.echartsTrue').offsetWidth / - 2.1 ) + 'px' - console.log((document.querySelector('.echartsTrue').offsetHeight / 2 / 100)); - }) - - }, - // 鏌ョ湅鏇村>> - viewMoreClick() { - uni.navigateTo({ - url: '/pages/character/detail' - }) - }, - } - } + this.isEchTrue = true; + this.$nextTick(() => { + this.isTop = + Arr.event.offsetY - + 0.18 - + document.querySelector(".echartsTrue").offsetHeight / 2.1 + + "px"; + this.isLeft = + Arr.event.offsetX - + document.querySelector(".echartsTrue").offsetWidth / 2.1 + + "px"; + console.log( + document.querySelector(".echartsTrue").offsetHeight / 2 / 100 + ); + }); + }, + // 鏌ョ湅鏇村>> + viewMoreClick() { + uni.navigateTo({ + url: "/pages/character/detail" + }); + } + } +}; </script> <style> - * { - box-sizing: border-box; - } +.pageBox { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; +} - .echartsTrue::before { - content: ""; - width: 0; - height: 0; - position: absolute; - bottom: -.18rem; - left: 1.2rem; - /* background-color: red; */ - border-left: .2rem solid transparent; - /* 宸﹁竟閫忔槑 */ - border-right: .2rem solid transparent; - /* 鍙宠竟閫忔槑 */ - border-top: .2rem solid #fff; - /* 椤堕儴绾㈣壊 */ - } +.echartsTrue::before { + content: ""; + width: 0; + height: 0; + position: absolute; + bottom: -0.18rem; + left: 1.2rem; + /* background-color: red; */ + border-left: 0.2rem solid transparent; + /* 宸﹁竟閫忔槑 */ + border-right: 0.2rem solid transparent; + /* 鍙宠竟閫忔槑 */ + border-top: 0.2rem solid #fff; + /* 椤堕儴绾㈣壊 */ +} - ::v-deep .el-card__header { - border: 0; - background-color: #DDE8F6; - height: .36rem; - padding: .08rem .13rem; - font-size: .14rem; - font-weight: 600; - } +::v-deep .el-card__header { + border: 0; + background-color: #dde8f6; + height: 0.36rem; + padding: 0.08rem 0.13rem; + font-size: 0.14rem; + font-weight: 600; +} - .information li { - font-size: .12rem; - color: #2C2C2C; - line-height: 2; - } +.information li { + font-size: 0.12rem; + color: #2c2c2c; + line-height: 2; +} - /* 鍦板浘涓婄殑宸︿笅瑙� */ - ::v-deep .anchorBL { - display: none; - } +/* 鍦板浘涓婄殑宸︿笅瑙� */ +::v-deep .anchorBL { + display: none; +} - @media screen and (min-width:2560px)and (max-width:3840px) { - .Search { - /* width: 30%; */ - justify-content: flex-end; - margin-right: .26rem; - width: 4rem; - } +@media screen and (min-width: 2560px) and (max-width: 3840px) { + .Search { + /* width: 30%; */ + justify-content: flex-end; + margin-right: 0.26rem; + width: 4rem; + } - .Search ::v-deep .ffff { - width: 3rem; - height: .36rem; - padding: .01rem; - border-radius: .3rem !important; - } + .Search ::v-deep .ffff { + width: 3rem; + height: 0.36rem; + padding: 0.01rem; + border-radius: 0.3rem !important; + } - .Search ::v-deep .widget_button { - width: 1rem; - /* height: .3rem; */ - font-size: .14rem; - padding: 0; - border-radius: .3rem !important; - } + .Search ::v-deep .widget_button { + width: 1rem; + /* height: .3rem; */ + font-size: 0.14rem; + padding: 0; + border-radius: 0.3rem !important; + } - .Search ::v-deep .widget_style { - display: flex; - justify-content: flex-end; - } + .Search ::v-deep .widget_style { + display: flex; + justify-content: flex-end; + } - .Search ::v-deep .uni-input-placeholder { - font-size: .13rem; - /* height: 100%; */ - line-height: 1; - } + .Search ::v-deep .uni-input-placeholder { + font-size: 0.13rem; + /* height: 100%; */ + line-height: 1; + } - .Search ::v-deep .uni-input-input { - margin-left: .19rem; - } - } + .Search ::v-deep .uni-input-input { + margin-left: 0.19rem; + } +} - #main { - height: 6.2rem; - } +#main { + flex: 1; +} - .Search { - /* width: 30%; */ - justify-content: flex-end; - margin-right: .26rem; - width: 4rem; - } +.Search { + /* width: 30%; */ + justify-content: flex-end; + margin-right: 0.26rem; + width: 4rem; +} - .Search ::v-deep .ffff { - width: 3rem; - height: .36rem; - padding: .01rem; - } +.Search ::v-deep .ffff { + width: 3rem; + height: 0.36rem; + padding: 0.01rem; +} - .Search ::v-deep .widget_button { - width: 1rem; - /* height: .3rem; */ - font-size: .14rem; - padding: 0; - background-color: #597AA5; - } +.Search ::v-deep .widget_button { + width: 1rem; + /* height: .3rem; */ + font-size: 0.14rem; + padding: 0; + background-color: #597aa5; +} - .Search ::v-deep .widget_style { - display: flex; - justify-content: flex-end; - } +.Search ::v-deep .widget_style { + display: flex; + justify-content: flex-end; +} - .Search ::v-deep .uni-input-placeholder { - font-size: .13rem; - /* height: 100%; */ - line-height: 1; - margin-left: .19rem; - } -</style> \ No newline at end of file +.Search ::v-deep .uni-input-placeholder { + font-size: 0.13rem; + /* height: 100%; */ + line-height: 1; + margin-left: 0.19rem; +} +</style> diff --git a/src/static/map.js b/src/static/map.js index 316ae10..3b55a47 100644 --- a/src/static/map.js +++ b/src/static/map.js @@ -9,8 +9,10 @@ } let script = document.createElement('script') script.type = 'text/javascript' - script.src = 'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&__ec_v__=20190126&callback=onBMapCallback' + script.src = 'http://api.map.baidu.com/api?v=3.0&ak=' + ak + '&__ec_v__=20190126&callback=onBMapCallback' script.onerror = reject document.head.appendChild(script) }) -} \ No newline at end of file +} + + diff --git a/src/static/tool.js b/src/static/tool.js new file mode 100644 index 0000000..5b82698 --- /dev/null +++ b/src/static/tool.js @@ -0,0 +1,6 @@ +import { + baseUrl, +} from "../utils/request/req1" +export const getImg = (path) => { + return baseUrl + "/picture/getImageByFilePath?filePath=" + path +} \ No newline at end of file diff --git a/src/uni_modules/cc-defineTable/components/cc-defineTable/cc-defineTable.vue b/src/uni_modules/cc-defineTable/components/cc-defineTable/cc-defineTable.vue index ba91c6d..520dcd2 100644 --- a/src/uni_modules/cc-defineTable/components/cc-defineTable/cc-defineTable.vue +++ b/src/uni_modules/cc-defineTable/components/cc-defineTable/cc-defineTable.vue @@ -1,86 +1,90 @@ - <template> - <view> - <view class="tabContent " :class="{'flex': !isTrue }" v-show="true"> - <view style="width: 50%;" v-for="(item, index) in tableData" :key="index"> - <view class="paramBox "> - <!-- <view class="param-title">{{item.name}}</view> --> - <view v-for="(subItem, subIndex) in item.list" :key="subIndex"> - <view class="param-item"> - <label style="padding-left: .1rem;background-color: #5879a4;color: #fff;">{{subItem.name}}</label> - <text class="font-family" style="padding-left: .2rem;background-color: #ebf3fe;flex-grow: 1;">{{subItem.value}}</text> - </view> - </view> - </view> - </view> - <!-- <view v-if="isTrue " style="height: 30rpx;"></view> --> - </view> - </view> - </template> - <script> - export default { - props: { - tableData: { - type: Array, - default () { - return [] - } - }, - isTrue: { - true: Boolean, - defalut() { - return false; - } - } +<template> + <view> + <view class="tabContent" :class="{ flex: !isTrue }" v-show="true"> + <view style="width: 50%" v-for="(item, index) in tableData" :key="index"> + <view class="paramBox"> + <!-- <view class="param-title">{{item.name}}</view> --> + <view v-for="(subItem, subIndex) in item.list" :key="subIndex"> + <view class="param-item"> + <label>{{ subItem.name }}</label> + <text class="font-family" :title="subItem.value">{{ subItem.value }}</text> + </view> + </view> + </view> + </view> + <!-- <view v-if="isTrue " style="height: 30rpx;"></view> --> + </view> + </view> +</template> +<script> +export default { + props: { + tableData: { + type: Array, + default() { + return []; + } + }, + isTrue: { + true: Boolean, + defalut() { + return false; + } + } + }, + data() { + return {}; + }, + methods: {} +}; +</script> - }, - data() { - return { +<style scoped> +view { + box-sizing: border-box; +} - } - }, - methods: { +.tabContent { + background: #fff; + overflow: hidden; +} +.param-title { + background: #f5f5f5; + height: 80rpx; + line-height: 80rpx; + margin: 20rpx 30rpx 0; + font-size: 28rpx; + text-indent: 30rpx; +} - } - - } - </script> - - <style scoped> - view { - - box-sizing: border-box; - } - - .tabContent { - background: #fff; - overflow: hidden; - } - - .param-title { - background: #f5f5f5; - height: 80rpx; - line-height: 80rpx; - margin: 20rpx 30rpx 0; - font-size: 28rpx; - text-indent: 30rpx; - } - - .param-item { - height: .3rem; - line-height: .3rem; - font-size: .14rem; - border-bottom: .02rem solid #fff; - margin: 0 4rpx; - /* border-left: 1rpx solid #f5f5f5; +.param-item { + height: 0.3rem; + line-height: 0.3rem; + font-size: 0.14rem; + border-bottom: 0.02rem solid #fff; + margin: 0 4rpx; + /* border-left: 1rpx solid #f5f5f5; border-right: 1rpx solid #f5f5f5; */ - /* padding: 0 30rpx; */ - display: flex; - } + /* padding: 0 30rpx; */ + display: flex; +} - .param-item label { - width: 1.55rem; - color: #999; - margin-right: .03rem !important; - } - </style> \ No newline at end of file +.param-item label { + width: 1.55rem; + color: #999; + margin-right: 0.03rem !important; + padding-left: 0.1rem; + background-color: #5879a4; + color: #fff; +} + +.param-item text { + padding-left: 0.2rem; + background-color: #ebf3fe; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +</style> -- Gitblit v1.9.1