.

package.json

@@ -11,6 +11,7 @@
     "echarts": "^4.9.0",
     "echarts-gl": "^1.1.1",
     "vue": "^2.6.11",
+    "vue-amap": "^0.5.10",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },

src/assets/css/reset.scss

@@ -9,4 +9,7 @@ html,body,#app{
     // width: 4670px;
     // height: 1751px;
     // overflow: hidden;
+}
+html{
+    zoom: 50%;
 }

src/main.js

@@ -10,6 +10,15 @@ import './assets/js/huzhou'
 import './assets/js/changxing'
 import 'echarts-gl'
 
+// import VueAMap from 'vue-amap';
+// Vue.use(VueAMap);
+// VueAMap.initAMapApiLoader({
+//   key: '89472e3ecbff0eb8b53bafd80959a480',
+//   plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.PlaceSearch', 'AMap.Autocomplete', 'AMap.Geolocation', 'AMap.Geocoder'],
+//   v: '1.4.4',
+//   uiVersion: '1.0'
+// })
+
 Vue.prototype.$echarts = echarts
 
 Vue.config.productionTip = false

src/views/LvShanXiang/LvShanXiang.vue

@@ -62,9 +62,15 @@
                         </div>
                     </div>
                 </section>
-                <!-- <footer class="footer" v-if="isShowMain"> -->
-                <footer class="footer" v-if="false">
+                <footer class="footer" v-if="isShowMain">
                     <main class="inputWrap">
+                        <!-- <select class="input" v-model="searchStr" placeholder="族谱溯源">
+                            <option value="045472">045472</option>
+                            <option value="045713">045713</option>
+                            <option value="048004">048004</option>
+                            <option value="046845">046845</option>
+                            <option value="043975">043975</option>
+                        </select> -->
                         <input
                             type="text"
                             class="input"
@@ -73,7 +79,7 @@
                         />
                         <i class="icon_search" @click.stop="search"></i>
                     </main>
-                    <img class="bg_map" src="../../assets/u922.png" />
+                    <!-- <img class="bg_map" src="../../assets/u922.png" />
                     <div class="icon_pasture_1" @click.stop="clickPoint('dr')">
                         <img src="../../assets/icon_pasture.png">
                         <h3>长兴德睿生态农业开发有限公司</h3>
@@ -81,30 +87,29 @@
                     <div class="icon_pasture_2" @click.stop="clickPoint('ys')">
                         <img src="../../assets/icon_pasture.png">
                         <h3>长兴永盛牧业有限公司</h3>
-                    </div>
+                    </div> -->
+                    <iframe
+                        src="http://122.237.98.3:8888/LvShanDaShuJu/page/map.html"
+                        frameborder="0"
+                        style="height: 100%; width: 100%"
+                    ></iframe>
                 </footer>
-                <!-- <footer
-                    class="footer_2"
-                    v-show="!isShowMain"
-                > -->
-                <footer
-                    class="footer_2"
-                    v-show="false"
-                >
+                <footer class="footer_2" v-show="!isShowMain">
                     <h1>族谱溯源</h1>
                     <article class="tree">
-                        <div class="self">021543</div>
-                        <div class="f">父：025464</div>
-                        <div class="m">母：01348</div>
-                        <div class="ff">父父：045645</div>
-                        <div class="fm">父母：046595</div>
-                        <div class="mf">母父：084561</div>
-                        <div class="mm">母母：046585</div>
+                        <div class="self">{{ sheepClan.self }}</div>
+                        <div class="f">父：{{ sheepClan.f }}</div>
+                        <div class="m">母：{{ sheepClan.m }}</div>
+                        <div class="ff">父父：{{ sheepClan.ff }}</div>
+                        <div class="fm">父母：{{ sheepClan.fm }}</div>
+                        <div class="mf">母父：{{ sheepClan.mf }}</div>
+                        <div class="mm">母母：{{ sheepClan.mm }}</div>
                     </article>
                 </footer>
-                <footer class="footer">
-                    <iframe src="http://122.237.98.3:8888/LvShanDaShuJu/page/map.html" frameborder="0" style="height: 100%; width:100%"></iframe>
-                </footer>
+                <!-- <footer class="footer"> -->
+                <!-- <iframe src="http://122.237.98.3:8888/LvShanDaShuJu/page/map.html" frameborder="0" style="height: 100%; width:100%"></iframe> -->
+                <!-- <Map></Map> -->
+                <!-- </footer> -->
             </div>
             <div class="right">
                 <div class="right1">
@@ -121,7 +126,9 @@
         <article class="dialog" v-if="showDialog">
             <h3>{{ dialogData.name }}</h3>
             <div class="container">
-                <p v-for="item in dialogData.content" :key="item.name">{{ item }}</p>
+                <p v-for="item in dialogData.content" :key="item.name">
+                    {{ item }}
+                </p>
             </div>
         </article>
     </div>
@@ -136,12 +143,23 @@ import ERight1 from "./charts/ERight1";
 import ERight2 from "./charts/ERight2";
 import ERight3 from "./charts/ERight3";
 
+import Map from "./charts/Map";
+
 export default {
     name: "LvShanXiang",
     data() {
         return {
             searchStr: "",
             isShowMain: true,
+            sheepClan: {
+                self: "",
+                f: "",
+                m: "",
+                ff: "",
+                fm: "",
+                mf: "",
+                mm: "",
+            },
             showDialog: false,
             fieldInfo: {
                 dr: {
@@ -165,7 +183,7 @@ export default {
                     ],
                 },
             },
-            dialogData: {name:'' , content: []}
+            dialogData: { name: "", content: [] },
         };
     },
     components: {
@@ -176,6 +194,7 @@ export default {
         ERight1,
         ERight2,
         ERight3,
+        Map,
     },
     created() {
         document.title = "吕山牧场";
@@ -183,12 +202,85 @@ export default {
     methods: {
         search() {
             console.log(this.searchStr);
+            if (!this.searchStr) {
+                confirm("请输入羊只编号！");
+                return;
+            }
+            // if (this.searchStr) {
+            //     this.sheepClan = {
+            //         self: "044782",
+            //         f: "037845",
+            //         m: "036589",
+            //         ff: "023584",
+            //         fm: "027584",
+            //         mf: "022546",
+            //         mm: "024246",
+            //     };
+            // }
+            switch (this.searchStr) {
+                case '045472': 
+                    this.sheepClan = {
+                        self: "045472",
+                        f: "034055",
+                        m: "034458",
+                        ff: "026044",
+                        fm: "025487",
+                        mf: "022487",
+                        mm: "021547",
+                    };
+                    break;
+                case '045713':
+                    this.sheepClan = {
+                        self: "045713",
+                        f: "032487",
+                        m: "035482",
+                        ff: "026544",
+                        fm: "029272",
+                        mf: "022478",
+                        mm: "020247",
+                    };
+                    break;
+                case '048004':
+                    this.sheepClan = {
+                        self: "048004",
+                        f: "030158",
+                        m: "035648",
+                        ff: "021248",
+                        fm: "020545",
+                        mf: "022178",
+                        mm: "025761",
+                    };
+                    break;
+                case '046845':
+                    this.sheepClan = {
+                        self: "046845",
+                        f: "033578",
+                        m: "037896",
+                        ff: "021567",
+                        fm: "024598",
+                        mf: "021597",
+                        mm: "021598",
+                    };
+                    break;
+                case '043975':
+                    this.sheepClan = {
+                        self: "043975",
+                        f: "034862",
+                        m: "031597",
+                        ff: "024872",
+                        fm: "028944",
+                        mf: "027865",
+                        mm: "025568",
+                    };
+                    break;
+                default: confirm("请输入正确的羊只编号！");
+            }
             console.log("search");
             this.isShowMain = false;
         },
         clickPoint(v) {
             this.showDialog = !this.showDialog;
-            this.dialogData = this.fieldInfo[v]
+            this.dialogData = this.fieldInfo[v];
         },
         qita() {
             this.isShowMain = true;
@@ -297,7 +389,7 @@ export default {
                         width: 200px;
                         flex-grow: 1;
                         font-size: 60px;
-                        color: #fff;
+                        color: rgb(29, 68, 65);
                         padding-left: 20px;
                         background: none;
                         // outline: none;
@@ -422,8 +514,8 @@ export default {
                     > img {
                         width: 80px;
                     }
-                    > h3{
-                        color: #FFF;
+                    > h3 {
+                        color: #fff;
                         font-size: 30px;
                     }
                 }
@@ -437,8 +529,8 @@ export default {
                     > img {
                         width: 80px;
                     }
-                    > h3{
-                        color: #FFF;
+                    > h3 {
+                        color: #fff;
                         font-size: 30px;
                     }
                 }

src/views/LvShanXiang/charts/Map.vue

@@ -0,0 +1,178 @@
+<template>
+    <div class="container">
+        <!--
+          amap-manager： 地图管理对象
+          vid：地图容器节点的ID
+          zooms： 地图显示的缩放级别范围，在PC上，默认范围[3,18]，取值范围[3-18]；在移动设备上，默认范围[3-19]，取值范围[3-19]
+          center： 地图中心点坐标值
+          plugin：地图使用的插件
+          events： 事件
+        -->
+        <el-amap
+            class="amap-box"
+            :amap-manager="amapManager"
+            :vid="'amap-vue'"
+            :zoom="zoom"
+            :plugin="plugin"
+            :center="center"
+            :events="events"
+            mapStyle="fresh"
+        >
+            <!-- 标记 -->
+            <el-amap-marker v-for="(marker, index) in markers" :position="marker" :key="index"></el-amap-marker>
+        </el-amap>
+    </div>
+</template>
+
+
+
+<script>
+import { AMapManager, lazyAMapApiLoaderInstance } from "vue-amap";
+
+let amapManager = new AMapManager();
+export default {
+    data() {
+        let _this = this;
+        return {
+            address: null,
+            amapManager,
+            markers: [],
+            searchOption: {
+                city: "全国",
+                citylimit: true
+            },
+            center: [119.921904,30.903578],
+            zoom: 17,
+            lng: 0,
+            lat: 0,
+            loaded: false,
+            events: {
+                init() {
+                    lazyAMapApiLoaderInstance.load().then(() => {
+                        _this.initSearch();
+                    });
+                },
+                // 点击获取地址的数据
+                click(e) {
+                    _this.markers = [];
+                    let { lng, lat } = e.lnglat;
+                    _this.lng = lng;
+                    _this.lat = lat;
+                    _this.center = [lng, lat];
+                    _this.markers.push([lng, lat]);
+                    // 这里通过高德 SDK 完成。
+                    let geocoder = new AMap.Geocoder({
+                        radius: 1000,
+                        extensions: "all"
+                    });
+                    console.log(geocoder);
+                    geocoder.getAddress([lng, lat], function(status, result) {
+                        if (status === "complete" && result.info === "OK") {
+                            if (result && result.regeocode) {
+                                _this.address =
+                                    result.regeocode.formattedAddress;
+                                _this.$nextTick();
+                            }
+                        }
+                    });
+                }
+            },
+            // 一些工具插件
+            plugin: [
+                // {
+                //   pName: 'Geocoder',
+                //   events: {
+                //     init (o) {
+                //       console.log(o.getAddress())
+                //     }
+                //   }
+                // },
+                {
+                    // 定位
+                    pName: "Geolocation",
+                    events: {
+                        init(o) {
+                            // o是高德地图定位插件实例
+                            // o.getCurrentPosition((status, result) => {
+                            //     console.log(result);
+                            //     if (result && result.position) {
+                            //         // 设置经度
+                            //         _this.lng = result.position.lng;
+                            //         // 设置维度
+                            //         _this.lat = result.position.lat;
+                            //         // 设置坐标
+                            //         _this.center = [_this.lng, _this.lat];
+                            //         _this.markers.push([_this.lng, _this.lat]);
+                            //         // load
+                            //         _this.loaded = true;
+                            //         // 页面渲染好后
+                            //         _this.$nextTick();
+                            //     }
+                            // });
+                        }
+                    }
+                },
+                {
+                    // 工具栏
+                    pName: "ToolBar",
+                    events: {
+                        init(instance) {
+                            // console.log(instance);
+                        }
+                    }
+                },
+                {
+                    // 鹰眼
+                    pName: "OverView",
+                    events: {
+                        init(instance) {
+                            // console.log(instance);
+                        }
+                    }
+                },
+                
+                {
+                    // 搜索
+                    pName: "PlaceSearch",
+                    events: {
+                        init(instance) {
+                            // console.log(instance);
+                        }
+                    }
+                }
+            ]
+        };
+    },
+    methods: {
+        initSearch() {
+            let vm = this;
+            let map = this.amapManager.getMap();
+            AMapUI.loadUI(
+                [
+                    "overlay/SimpleMarker", //SimpleMarker
+                    "overlay/SimpleInfoWindow" //SimpleInfoWindow
+                ],
+                function(SimpleMarker, SimpleInfoWindow) {
+                    // console.dir(SimpleMarker)
+
+                    //....引用加载的UI....
+                }
+            );
+        },
+        searchByHand() {
+            console.log("666");
+        }
+    }
+};
+</script>
+
+
+<style lang="scss" scope>
+.container {
+    width: 100%;
+    height: 100%;
+    .search-box {
+        margin-bottom: 15px;
+    }
+}
+</style>