master

分支 (1)

管理

管理

master

plx-data-analyze-web
/
company-list.html

<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" media="screen" />
    <meta http-equiv="X-UA-Compatible" ;content="IE=edge, chrome=1">
    <link rel="stylesheet" href="./static/css/company-list.css">
    <link rel="stylesheet" href="./static/css/commonality.css">
    <title>企业地域分布</title>
    <link rel="stylesheet" href="./lib/layui/css/layui.css">
    <script src="./static/js/main.js"></script>
    <script src="./static/js/vue.min.js"></script>
    <script src="./static/js/vue-resource.min.js"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.2&key=f9492993beeaef7c63907b557fb4e8f9&plugin=AMap.Geocoder"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>

<body>
    <div class="detail">
        <div class="nav">
            <div class="nav-bar">
                <ul>
                    <li>
                        <a href="./news-list.html">新闻</a>
                    </li>
                    <li>
                        <a href="./goods-list.html">商品信息</a>
                    </li>
                    <li class="selectBar">
                        <a href="company-list.html">企业信息</a>
                    </li>
                    <li>
                        <a href="./output-value-detail.html">产值分析</a>
                    </li>
                    <li>
                        <a href="./map-detail.html">市场分布</a>
                    </li>
                    <li>
                        <a href="./product-list.html">产销分析</a>
                    </li>
                    <li>
                        <a href="./supply-demand-detail.html">供需分析</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main">
            <div class="main-mian">
                <div id="container" class="main-center">
                </div>
                <div class="main-right" id="app">
                    <div class="main-right-list">
                        <ul>
                            <li v-for="company in companys">
                                <div class="list-top" v-on:click="toCharts(company)">
                                    <b>{{company.name}}</b>
                                </div>
                                <div class="list-bottom">
                                    {{company.address}}
                                </div>
                            </li>
                            <li class="main-right-more">
                                <div @click="moreClick">{{moreBtn}}</div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript">
    //新建地图对象
    var map = new AMap.Map("container", {
        resizeEnable: true

    });
    map.setCity("平利县");

    var infoWindows = {};

    var makerClick = function (e) {
        var company = e.target.getExtData();
        if (infoWindows.hasOwnProperty(company.id)) {
            infoWindows[company.id].open(e.target.getMap(), e.target.getPosition());
        } else {
            var infoWindow = new AMap.InfoWindow({
                content: company.description || '暂无详情'
            });
            console.info(infoWindow);
            infoWindows[company.id] = infoWindow;
            infoWindow.open(e.target.getMap(), e.target.getPosition());
        }
    };


    Vue.use(VueResource);
    var companyOutputValue = new Vue({
        el: "#app",
        data: {
            companys: [
            ],
            pageIndex: 0,
            moreBtn: "查看更多"
        },
        methods: {
            getAllCompany: function () {
                this.$http.get(getHttpServer() + "/api/web/company/all")
                    .then(function (response) {
                        var allCompany = response.data.data;

                        for (var i = 0; i < allCompany.length; i++) {
                            if (allCompany[i].lng && allCompany[i].lat) {

                                var lng = allCompany[i].lng;
                                var lat = allCompany[i].lat;

                                var content = '<div><img src="http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" /> <p>' + allCompany[i].name + '</p></div>';

                                var marker = new AMap.Marker({
                                    map: map,
                                    position: new AMap.LngLat(lng, lat),
                                    content: content,
                                    title: allCompany[i].name,
                                    zIndex: i,
                                    clickable: true,
                                    extData: allCompany[i]
                                });
                                AMap.event.addListener(marker, 'click', makerClick);
                            }
                        }

                        map.setFitView();

                    }).catch(function (response) {
                    });
            },
            moreClick: function () {
                console.info(this.pageIndex);
                this.$http.get(getHttpServer() + "/api/web/company", {
                    params: {
                        page: this.pageIndex,
                        size: 10
                    }
                }).then(function (response) {
                    var company = response.data.data.content;
                    if (company && company.length > 0) {
                        this.pageIndex = this.pageIndex + 1;
                        for (var v in company) {
                            this.companys.push(company[v]);
                        }

                    } else {
                        this.moreBtn = "没有更多了"
                    }

                }).catch(function (response) {
                });
            },
            toCharts: function (e) {
                location.href = "company-detail.html?id=" + e.id;
            }
        }
    });

    companyOutputValue.getAllCompany();
    companyOutputValue.moreClick();
</script>

</html>