山东大学项目实训-地图圈系统-web开发（8）

一、管理员后台页面设计

相比于用户页面，管理员能查看所有人的信息，也能修改所有人的信息；可以将普通用户升为管理员，可以删除所有动态以及评论等等权限。

管理员页面还可以查看数据分析页面，包括用户数据分析、收藏数据分析等等。

由于具体对应的页面太多，下面就拿收藏页面举个例子。

这是用户收藏页面，在这里可以查看所有用户的收藏地点，以及该地点对应的经纬度。相比于用户端，这里实现了分页功能，以及根据地点的查询功能。

分页功能展示：


可以跳转以及选择每页展示的条数。

查询功能展示：

可以展示出查询的结果。

在右面的操作栏中，可以查看该地点对应的地图坐标位置。

还可以点击删除，来删除这条信息。

点击确定即可删除。

二、数据分析页面设计

点击收藏数据分析，跳转到该页面。

在该页面中，我用echarts做了两种图：

由于篇幅限制，扇形图的字未能完全表示，这时候可以把鼠标移动到上面：

就有了这种效果。

代码部分：

<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>用户收藏管理</el-breadcrumb-item>
            <el-breadcrumb-item>收藏数据分析</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="Echarts">
            <el-card class="table1">
                <div id="square" style="width: 600px;height:500px;"></div>
            </el-card>
            <el-card class="table2">
                <div id="circle" style="width: 600px;height:500px;"></div>
            </el-card>
        </div>
    </div>
</template>

<script>
    import * as echarts from "echarts";

    export default {
        name: "Collection_data_analysis",
        data () {
            return {
                collect_user_data: [],
                collect_address_data: []
            }
        },
        created() {
            this.get_collect_data()
        },
        methods: {
            async get_collect_data() {
                await this.$http
                    .get('/collect/nameCount')
                    .then(successResponse => {
                        if (successResponse.data.status === 200) {
                            this.collect_address_data = successResponse.data.collectCount
                        }
                        console.log(this.collect_address_data)
                    })
                await this.$http
                    .get('/collect/usercount')
                    .then(successResponse => {
                        if (successResponse.data.status === 200) {
                            this.collect_user_data = successResponse.data.collectCount
                        }
                        console.log(this.collect_user_data)
                    })
                this.data_statistic()
            },
            data_statistic() {
                let temp = []
                for (let i = 0; i < 5 && i < this.collect_user_data.length; i++) {
                    temp.push(this.collect_user_data[i])
                }
                this.collect_user_data = temp

                temp = []
                for (let i = 0; i < 10 && i < this.collect_address_data.length; i++) {
                    temp.push(this.collect_address_data[i])
                }
                this.collect_address_data = temp
                this.myEcharts()
            },
            myEcharts() {
                const square = echarts.init(document.getElementById('square'));
                const circle = echarts.init(document.getElementById('circle'))

                const word_frequency_square_option = {
                    title: {
                        text: '用户收藏数目直方图'
                    },
                    tooltip: {},
                    legend: {
                        data:['个数']
                    },
                    xAxis: {
                        data: [],
                        name: '用户名'
                    },
                    yAxis: {
                        name: '数目'
                    },
                    series: [{
                        name: '条数',
                        type: 'bar',
                        color: '#409EFF',
                        data: []
                    }]
                };
                const word_frequency_circle_option = {
                    title: {
                        text: '用户身份扇形图'
                    },
                    tooltip : {
                        trigger: 'item',
                        formatter: "{a} <br/>{b} : {c} ({d}%)"
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: '200px',
                            roseType: 'angle',
                            itemStyle:{
                                normal:{
                                    label:{
                                        show: true,
                                        formatter: '{b} : {c} ({d}%)'
                                    },
                                    labelLine :{show:true}
                                }
                            },
                            data: [{},{},{},{},{}]
                        }
                    ]
                };

                for (let i = 0; i < this.collect_user_data.length; i++) {
                    word_frequency_square_option.xAxis.data.push(this.collect_user_data[i].key)
                    word_frequency_square_option.series[0].data.push(this.collect_user_data[i].value)
                }
                for (let i = 0; i < this.collect_address_data.length; i++) {
                    word_frequency_circle_option.series[0].data[i].name = this.collect_address_data[i].key
                    word_frequency_circle_option.series[0].data[i].value = this.collect_address_data[i].value
                }

                square.setOption(word_frequency_square_option)
                circle.setOption(word_frequency_circle_option)
            }
        }
    }
</script>

<style scoped>
    .Echarts {
        display: flex;
        justify-content: space-between;
    }
    .table1 {
        width: 660px;
    }

    .table2 {
        width: 660px;
    }
</style>

数据分析页面：

<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>用户收藏管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户个人收藏</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图区域 -->
        <el-card>
            <!-- 搜索与添加区域 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="查询请输入地点名" v-model="searchVal" @input="change()">
                        <el-button slot="append" icon="el-icon-search"
                                   @click="getAllSearch"></el-button>
                    </el-input>
                </el-col>
            </el-row>

            <!-- 收藏数据区域 -->
            <el-table :data="collection_list" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="用户名" prop="username" width="150px"></el-table-column>
                <el-table-column label="地点" prop="name" width="250px"></el-table-column>
                <el-table-column label="经度" prop="longitude" width="200px"></el-table-column>
                <el-table-column label="纬度" prop="latitude" width="200px"></el-table-column>
                <el-table-column label="地址" prop="address"></el-table-column>
                <el-table-column label="操作" width="160px">
                    <template slot-scope="scope">
                        <!-- 查看地图按钮 -->
                        <el-tooltip class="item" effect="dark" content="打开地图" placement="top" :enterable="false">
                            <el-button type="primary" icon="el-icon-position" size="medium" @click="showCollectMapDialog(scope.row.id)"></el-button>
                        </el-tooltip>
                        <!-- 删除按钮 -->
                        <el-tooltip class="item" effect="dark" content="删除" placement="top" :enterable="false">
                            <el-button type="danger" icon="el-icon-delete" size="medium" @click="showDeleteDialog(scope.row.id)"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页区域 -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNumber"
                    :page-sizes="[1, 2, 5, 7]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-card>

        <!-- 删除对话框 -->
        <el-dialog
                title="提示"
                :visible.sync="deleteDialogVisible"
                width="30%">
            <span>你确定要删除吗？此操作无法撤销</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="deleteDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteVegetable">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 显示收藏地点对话框 -->
        <el-dialog
                title="收藏地点查看"
                :visible.sync="collectDialogVisible"
                width="40%">
            <div id="map-collection-container" style="width:100%;height:450px;"></div>
        </el-dialog>
    </div>
</template>

<script>
    import MapLoader from '../../../utils/AMap.js'

    export default {
        name: "User_collection",
        // 从app.vue接收到的方法
        inject: ['reload'],
        data () {
            return {
                // 用户收藏数据
                collection_list: [],
                // 查询输入框
                searchVal: "",
                // 用户名
                username: "",
                // 当前对应的收藏记录id号
                id: 0,
                // 控制删除对话框的显示
                deleteDialogVisible: false,
                // 控制收藏地图展示的显示
                collectDialogVisible: false,
                // 当前的页数
                pageNumber: 1,
                // 当前每页显示的数据条数
                pageSize: 5,
                // 用户总数
                total: 0,
            }
        },
        created(){
            this.username = window.sessionStorage.getItem("username")
            this.getCollectionList()
        },
        async mounted() {
            // 必须要在页面初次装载时加载引入AMap
            await MapLoader('4f94a7e14ab9cf6eb3681c021076cca0') //加载引入BMap
        },
        methods: {
            // 根据用户名获取所有收藏信息
            async getCollectionList() {
                await this.$http
                    .get('/collect/findall')
                    .then(successResponse => {
                        if (successResponse.data.status === 200) {
                            this.total = successResponse.data.collectList.length
                        }
                    })

                let pageNumber = this.pageNumber - 1
                await this.$http
                    .get('/collect/findall/' + pageNumber + '/' + this.pageSize)
                    .then(successResponse => {
                        console.log(successResponse.data)
                        if (successResponse.data.status === 200) {
                            this.collection_list = successResponse.data.collectPageList[0].content
                            console.log(this.collection_list)
                        } else if (successResponse.data.status === 401) {
                            this.$message.info("无个人收藏数据")

                        } else {
                            this.$message.error("服务器出错，请稍后再试……")
                        }
                    })
                    .catch(failResponse => {
                        console.log(failResponse.data)
                    })

                console.log(this.collection_list)
            },
            change() {
                this.$forceUpdate()
            },

            // 获取查询地点
            getAllSearch() {
                if (this.searchVal === '') return
                this.$http
                    .get('/collect/findallByName/' + this.searchVal)
                    .then(successResponse => {
                        if (successResponse.data.status === 200) {
                            this.collection_list = successResponse.data.collectList
                            this.total = this.collection_list.length
                        } else {
                            this.$message.info('未查询到信息……')
                        }
                    })
            },

            // 删除历史记录
            deleteVegetable() {
                this.$http
                    .delete('/collect/deletebyid/' + this.id)
                    .then(successResponse => {
                        if (successResponse.status === 200) {
                            this.$message.success("删除成功！")
                            this.reload()
                        }
                    })
                    .catch(failResponse => {
                        console.log(failResponse.data)
                    })
                this.deleteDialogVisible = false
            },

            // 点击删除按钮，弹出提示框
            showDeleteDialog(id) {
                this.deleteDialogVisible = true
                // 获取id 后续用来根据id删除
                this.id = id
            },

            // 点击查看地图按钮，弹出地图
            showCollectMapDialog(id) {
                this.collectDialogVisible = true
                let specific_collection_list = {}  // 根据id确定的具体的收藏数据
                for (let i = 0; i < this.collection_list.length; i++) {
                    if (this.collection_list[i].id === id) {
                        specific_collection_list = this.collection_list[i]
                    }
                }
                // 在这里使用$nextTick初始化地图插件即可
                this.$nextTick(() => {
                    this.initMap(specific_collection_list.longitude, specific_collection_list.latitude)
                });
            },

            // 初始化地图
            initMap(longitude, latitude) {
                console.log(longitude)
                console.log(latitude)

                // 引入map组件
                let map = new window.AMap.Map('map-collection-container', {
                    center: [longitude, latitude],
                    zoom: 15,
                    resizeEnable: true,
                })
                // 左上角添加拖动
                window.AMap.plugin([
                    'AMap.ToolBar',
                ], function () {
                    // 在图面添加工具条控件, 工具条控件只有缩放功能
                    map.addControl(new window.AMap.ToolBar());
                });
                // 添加marker定位
                window.AMap.plugin('AMap.Geolocation', function () {
                    let geolocation = new window.AMap.Geolocation({
                        // 是否使用高精度定位，默认：true
                        enableHighAccuracy: true,
                        // 设置定位超时时间，默认：无穷大
                        timeout: 10000,
                        // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                        buttonOffset: new window.AMap.Pixel(10, 20),
                        // 定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                        zoomToAccuracy: true,
                        // 定位按钮的排放位置, RB表示右下
                        buttonPosition: 'RB'
                    })
                    // 获取当前位置信息
                    geolocation.getCurrentPosition()
                    window.AMap.event.addListener(geolocation, 'complete', (e) => {
                        console.log(e) // 定位成功之后做的事
                        // 定位成功之后在定位处添加一个marker
                        let marker = new window.AMap.Marker({
                            position: new window.AMap.LngLat(longitude, latitude), // （e.position）--->定位点的点坐标, position ---> marker的定位点坐标，也就是marker最终显示在那个点上，
                            icon: new window.AMap.Icon({
                                image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png",
                                size: new window.AMap.Size(30, 37), //图标大小
                                imageSize: new window.AMap.Size(30, 37)
                            }), // marker的图标，可以自定义，不写默认使用高德自带的
                            map: map,  // map ---> 要显示该marker的地图对象
                        })
                        map.add(marker)
                    })
                    window.AMap.event.addListener(geolocation, 'error', (e) => {
                        console.log(e) // 定位失败做的事
                    })
                })
            },
            // 监听 pageSize 改变的事件
            handleSizeChange(newSize) {
                this.pageSize = newSize
                this.changeCurrentList(this.pageSize, this.pageNumber)
            },
            // 监听 页码值 改变的事件
            handleCurrentChange(newPage) {
                this.pageNumber = newPage
                this.changeCurrentList(this.pageSize, this.pageNumber)
            },
            // 改变当前页显示
            changeCurrentList(newSize, newPage) {
                newPage -= 1
                this.$http
                    .get('/collect/findall/' + newPage + '/' + newSize)
                    .then(successResponse => {
                        if (successResponse.data.status === 200) {
                            this.collection_list = successResponse.data.collectPageList[0].content
                        } else {
                            this.$message.info('获取收藏数据失败，请稍后再试……')
                        }
                    })
            },
        }
    }
</script>

<style scoped>

</style>

三、其他主要页面

本页面不放代码了，截图展示：

用户信息界面及其数据分析：


用户动态界面及其数据分析：


用户权限设置页面：

至此，本网站就剩余一个足迹页面了，马上就要大功告成了！！！