shuishen
2022-09-19 f70866c4a1c0eff22c99eaeb0d56f5796e69e56d
Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs
4 files modified
2 files added
783 ■■■■■ changed files
src/components/public/public.vue 10 ●●●●● patch | view | raw | blame | history
src/views/home/index copy.vue 635 ●●●●● patch | view | raw | blame | history
src/views/home/index.vue 51 ●●●●● patch | view | raw | blame | history
src/views/house/index.vue 59 ●●●●● patch | view | raw | blame | history
src/views/police/index.vue 15 ●●●● patch | view | raw | blame | history
src/views/video/index.vue 13 ●●●● patch | view | raw | blame | history
src/components/public/public.vue
New file
@@ -0,0 +1,10 @@
<template></template>
<script>
export default {
}
</script>
<style>
</style>
src/views/home/index copy.vue
New file
@@ -0,0 +1,635 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-19 18:27:39
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
-->
<template>
    <div class="container">
        <div class="left-container">
            <div class="person-box">
                <div class="title">
                    <div class="one-level">现有人员</div>
                    <!-- <div class="two-level">现有人员</div> -->
                </div>
                <div class="sub-title">
                    <div class="one-level">实有人口总数</div>
                    <div class="two-level">183.16万人</div>
                </div>
                <div class="sub-tab">
                    <div class="tab">
                        <div class="num">164.57万人</div>
                        <div class="type">户籍人口</div>
                    </div>
                    <div class="tab">
                        <div class="num">17.52万人</div>
                        <div class="type">流动人口</div>
                    </div>
                    <div class="tab">
                        <div class="num">91995人</div>
                        <div class="type">境外人口</div>
                    </div>
                </div>
                <div id="PersonEcharts" class="echarts-box"></div>
            </div>
            <div class="land-box">
                <div class="title">
                    <div class="one-level">现有房屋</div>
                    <!-- <div class="two-level">现有房屋</div> -->
                </div>
                <div class="sub-tab">
                    <div class="tab">
                        <div class="num">1822603户</div>
                        <div class="num">实有房屋</div>
                    </div>
                    <div class="tab">
                        <div class="num">634个</div>
                        <div class="num">关注场所</div>
                    </div>
                </div>
                <div id="LandEcharts" class="echarts-box"></div>
            </div>
            <div class="equipment-box">
                <div class="title">
                    <div class="one-level">现有设备</div>
                    <!-- <div class="two-level">现有设备</div> -->
                </div>
                <div id="EquipmentEcharts" class="echarts-box"></div>
            </div>
        </div>
        <div class="right-container">
            <div class="case-box">
                <div class="title">
                    <div class="one-level">警情动态</div>
                    <div class="two-level">当前16</div>
                </div>
                <div id="EventChangeEcharts" class="echarts-box"></div>
            </div>
            <div class="alert-box">
                <div class="title">
                    <div class="one-level">警情近一年</div>
                    <div class="two-level">历史累计</div>
                </div>
                <div class="sub-title">
                    <div class="one-level">警情、案事件总量</div>
                    <div class="two-level">555578起</div>
                </div>
                <div id="EventCountEcharts" class="echarts-box"></div>
            </div>
            <div class="crowd-box">
                <div class="title">
                    <div class="one-level">重点稳控/服务人群</div>
                    <div class="two-level">当前38</div>
                </div>
                <div id="peopleList" class="echarts-box">
                    <el-table
                        :data="arr"
                        style="width: 100%"
                        :header-cell-style="{'text-align':'center','background-color':'#00204f','borderColor':'#073365'}"
                        :cell-style="{'text-align':'center','borderColor':'#073365'}"
                        :row-class-name="tableRowClassName"
                    >
                        <el-table-column prop="type" label="人员类型" width="80"></el-table-column>
                        <el-table-column prop="num" label="人数" width="180"></el-table-column>
                        <el-table-column prop="radio" label="占比" width="120"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div class="center-container">
            <div class="layers-control-btn">
                <el-checkbox v-model="houseLayerShow" @change="houseChange">小区</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="carLayerShow">警车</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="phoneLayerShow">手台</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="videoLayerShow">监控</el-checkbox>
            </div>
            <div class="layers-control-btn">
                <el-checkbox v-model="panoramaLayerShow">全景</el-checkbox>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            navType: 0,
            houseLayerShow: false,
            carLayerShow: false,
            phoneLayerShow: false,
            videoLayerShow: false,
            panoramaLayerShow: false,
            arr: [{ 'type': '孤寡老人', 'num': '0', 'radio': '0.00%' }, { 'type': '邪教人员', 'num': '1', 'radio': '2.00%' }, { 'type': '上访人员', 'num': '8', 'radio': '14.00%' }, { 'type': '涉毒', 'num': '15', 'radio': '27.00%' }, { 'type': '留守儿童', 'num': '6', 'radio': '11.00%' }, { 'type': '重点青少年', 'num': '5', 'radio': '9.00%' }]
        }
    },
    created () {
    },
    mounted () {
        this.initPersonEcharts()
        this.initLandEcharts()
        this.initEquipmentEcharts()
        this.initEventChangeEcharts()
        this.initEventCountEcharts()
        this.$nextTick(() => {
            let position = [
                [
                    [115.935114, 28.627012, 100],
                    [115.930150, 28.733535, 100],
                    [115.986738, 28.683523, 100],
                    [116.015526, 28.647454, 100],
                ]
            ]
            position.forEach((item) => {
                let str = ''
                item.forEach(it => {
                    str = str + `${it[0]},${it[1]},${it[2]};`
                })
                this.$EventBus.$emit('layerPolygonAdd', {
                    layerName: 'polygonLayer',
                    positions: str,
                    material: global.DC.Namespace.Cesium.Color.fromBytes(
                        3,
                        255,
                        13,
                        10
                    ),
                })
            })
        })
    },
    updated () {
    },
    methods: {
        navClick (e) {
            this.navType = e.target.dataset.type
        },
        initPersonEcharts () {
            var chartDom = document.getElementById('PersonEcharts')
            var myChart = this.$echarts.init(chartDom)
            var option
            option = {
                xAxis: {
                    type: 'category',
                    data: ['湖北', '上海', '北京', '广东', '浙江'],
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(0,0,255,0.1)"
                        }
                    }
                },
                series: [
                    {
                        data: [6414, 4231, 2211, 1231, 881],
                        type: 'bar',
                        itemStyle: {
                            normal: {
                                label: {
                                    show: true,
                                    position: 'top',
                                    textStyle: {
                                        color: '#1a94a8',
                                        fontSize: 16
                                    }
                                }
                            }
                        }
                    }
                ],
                grid: {
                    x: 40,
                    y: 10,
                    x2: 20,
                    y2: 20
                },
            }
            option && myChart.setOption(option)
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        },
        initLandEcharts () {
            var chartDom = document.getElementById('LandEcharts')
            var myChart = this.$echarts.init(chartDom)
            var option
            option = {
                color: ['#2967c4', '#112d54'],
                xAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(0,0,255,0.1)"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                },
                yAxis: {
                    type: 'category',
                    data: ['公共场所', '学校教培', '机动车维修', '娱乐场所', '寄递业'],
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                },
                series: [
                    {
                        data: [54, 77, 97, 141, 191],
                        type: 'bar',
                        zlevel: 2,
                    },
                    {
                        data: [{ 'value': 191, 'realValue': 54 }, { 'value': 191, 'realValue': 77 }, { 'value': 191, 'realValue': 97 }, { 'value': 191, 'realValue': 141 }, { 'value': 191, 'realValue': 191 }],
                        type: 'bar',
                        barGap: '-100%',
                        label: {
                            show: true,
                            color: '#fff',
                            position: 'right', // 标签右对齐
                            distance: 5,// 标签距离柱条的距离
                            formatter: params => {
                                return params.data.realValue + '个'
                            }
                        }
                    }
                ],
                grid: {
                    x: 70,
                    y: 10,
                    x2: 10,
                    y2: 20
                },
            }
            option && myChart.setOption(option)
        },
        initEquipmentEcharts () {
            var chartDom = document.getElementById('EquipmentEcharts')
            var myChart = this.$echarts.init(chartDom)
            var option
            var regionTotal = 0
            let dataArr = [
                { value: 21438, name: '未知' },
                { value: 4664, name: '固定枪机' },
                { value: 310, name: '固定球机' },
                { value: 279, name: '可控球机' },
                { value: 241, name: '卡口枪击' },
                { value: 5, name: '云台枪击' }
            ]
            for (let i = 0; i < dataArr.length; i++) {
                regionTotal += dataArr[i].value
            }
            console.log(regionTotal)
            option = {
                title: {
                    show: true,
                    text: ['{a|摄像头总数}', `{b|${regionTotal}个}`].join('                                      '), // 主副标题
                    left: 'left',
                    textStyle: {
                        rich: {
                            a: {
                                fontWeight: 'normal',
                                fontSize: 16,
                                color: '#fff'
                            },
                            b: {
                                fontSize: 22,
                                fontWeight: 'bolder',
                                color: '#fff'
                            }
                        }
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    left: '55%',
                    y: '20%',
                    itemGap: 10,
                    textStyle: {
                        color: '#fff'
                    },
                    formatter: function (name) {
                        let data = option.series[0].data
                        let tarValue
                        for (let i = 0; i < data.length; i++) {
                            if (data[i].name == name) {
                                tarValue = data[i].value
                            }
                        }
                        let v = tarValue
                        return `${name}     ${v} 个    `
                    },
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['27%', '57%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: dataArr
                    }
                ],
                grid: {
                    x: 10,
                    y: 10,
                    x2: 10,
                    y2: 20
                },
            }
            option && myChart.setOption(option)
        },
        initEventChangeEcharts () {
            var chartDom = document.getElementById('EventChangeEcharts')
            var myChart = this.$echarts.init(chartDom)
            var option
            option = {
                xAxis: {
                    type: 'category',
                    data: ['3-26', '3-27', '3-28', '3-29', '3-30', '3-31', '4-1']
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: "rgba(0,0,255,0.1)"
                        }
                    },
                },
                series: [
                    {
                        data: [0, 1, 0, 2, 0, 1, 0],
                        type: 'line'
                    }
                ],
                grid: {
                    x: 30,
                    y: 40,
                    x2: 10,
                    y2: 20
                },
            }
            option && myChart.setOption(option)
        },
        initEventCountEcharts () {
            var chartDom = document.getElementById('EventCountEcharts')
            var myChart = this.$echarts.init(chartDom)
            var option
            option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    left: '75%',
                    y: '10%',
                    itemGap: 25,
                    textStyle: {
                        color: '#fff'          // 图例文字颜色
                    }
                },
                series: [
                    {
                        name: 'Access From',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        center: ['40%', '60%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '40',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 4659154, name: '入室盗窃' },
                            { value: 916685, name: '抢劫抢夺' },
                            { value: 916685, name: '汽车被盗' },
                            { value: 916685, name: '交通事故' },
                            { value: 916685, name: '打架斗殴' },
                            { value: 916685, name: '走失人口' }
                        ]
                    }
                ],
                grid: {
                    x: 10,
                    y: 10,
                    x2: 10,
                    y2: 20
                },
            }
            option && myChart.setOption(option)
        },
        tableRowClassName () {
            // if ((rowIndex + 1) % 2 === 0) {
            return "aa"
            // } else {
            //     return "background:rgba(0,8,1,0.1)"
            // }
        },
    }
}
</script>
<style scoped lang="scss">
.container {
    color: #fff;
    .left-container {
        position: fixed;
        top: 80px;
        left: 0;
        width: 400px;
        height: calc(100% - 80px);
        background: rgba(7, 22, 37, 0.8);
        .person-box {
            height: 40%;
        }
        .land-box,
        .equipment-box {
            height: 30%;
        }
    }
    .right-container {
        position: fixed;
        top: 80px;
        right: 0;
        width: 400px;
        height: calc(100% - 80px);
        background: rgba(7, 22, 37, 0.8);
        .case-box {
            height: 30%;
        }
        .alert-box,
        .crowd-box {
            height: 35%;
            .el-table__row.statistics-warning-row {
                background: #ff0000;
            }
        }
        ::v-deep .el-table tr:nth-child(2n) {
            background: #03254c;
            color: #fff;
        }
        ::v-deep .el-table tr:nth-child(2n-1) {
            background: #26426a;
            color: #fff;
        }
        ::v-deep .el-table tr:hover td {
            color: #000;
        }
    }
    .left-container,
    .right-container {
        .person-box,
        .land-box,
        .equipment-box,
        .case-box,
        .alert-box,
        .crowd-box {
            display: flex;
            flex-direction: column;
            padding: 10px;
            .title {
                display: flex;
                justify-content: space-between;
                height: 40px;
            }
            .sub-title {
                display: flex;
                justify-content: space-between;
                height: 36px;
            }
            .sub-tab {
                display: flex;
                .tab {
                    margin: 0 10px;
                    flex: 1;
                    background: rgba(5, 21, 38, 0.8);
                    border: 1px solid #fff;
                    & > div {
                        height: 26px;
                        line-height: 26px;
                    }
                }
            }
            .echarts-box {
                flex: 1;
            }
            .sub-tab + .echarts-box {
                margin-top: 10px;
            }
        }
    }
    .center-container {
        display: flex;
        position: fixed;
        left: 50%;
        bottom: 80px;
        transform: translate(-50%, 0);
        .layers-control-btn {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 10px;
            width: 160px;
            height: 60px;
            background: rgba(7, 22, 37, 0.8);
        }
    }
}
</style>
src/views/home/index.vue
@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-09-19 18:26:27
 * @LastEditTime: 2022-09-19 18:29:26
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -14,8 +14,8 @@
        <div class="left-container">
            <div class="person-box">
                <div class="title">
                    <div class="one-level">人</div>
                    <div class="two-level">现有人员</div>
                    <div class="one-level">现有人员</div>
                    <!-- <div class="two-level">现有人员</div> -->
                </div>
                <div class="sub-title">
@@ -42,8 +42,8 @@
            </div>
            <div class="land-box">
                <div class="title">
                    <div class="one-level">地</div>
                    <div class="two-level">现有房屋</div>
                    <div class="one-level">现有房屋</div>
                    <!-- <div class="two-level">现有房屋</div> -->
                </div>
                <div class="sub-tab">
@@ -61,8 +61,8 @@
            </div>
            <div class="equipment-box">
                <div class="title">
                    <div class="one-level">物</div>
                    <div class="two-level">现有设备</div>
                    <div class="one-level">现有设备</div>
                    <!-- <div class="two-level">现有设备</div> -->
                </div>
                <div id="EquipmentEcharts" class="echarts-box"></div>
@@ -71,7 +71,7 @@
        <div class="right-container">
            <div class="case-box">
                <div class="title">
                    <div class="one-level">案件动态</div>
                    <div class="one-level">警情动态</div>
                    <div class="two-level">当前16</div>
                </div>
@@ -79,7 +79,7 @@
            </div>
            <div class="alert-box">
                <div class="title">
                    <div class="one-level">事</div>
                    <div class="one-level">警情近一年</div>
                    <div class="two-level">历史累计</div>
                </div>
@@ -332,7 +332,7 @@
            option = {
                title: {
                    show: true,
                    text: ['{a|摄像头总数}', '{b|regionTotal个}'].join('                                      '), // 主副标题
                    text: ['{a|摄像头总数}', `{b|${regionTotal}个}`].join('                                      '), // 主副标题
                    left: 'left',
                    textStyle: {
                        rich: {
@@ -480,8 +480,12 @@
                            show: false
                        },
                        data: [
                            { value: 4659154, name: '警情事件' },
                            { value: 916685, name: '警案事件' },
                            { value: 4659154, name: '入室盗窃' },
                            { value: 916685, name: '抢劫抢夺' },
                            { value: 916685, name: '汽车被盗' },
                            { value: 916685, name: '交通事故' },
                            { value: 916685, name: '打架斗殴' },
                            { value: 916685, name: '走失人口' }
                        ]
                    }
                ],
@@ -495,6 +499,7 @@
            option && myChart.setOption(option)
        },
<<<<<<< HEAD
        tableRowClassName () {
            // if ((rowIndex + 1) % 2 === 0) {
            return "aa"
@@ -515,6 +520,8 @@
                })
            }
        }
=======
>>>>>>> 0296d220b566f61bbedd8f422bbf3f03b5641a47
    }
}
</script>
@@ -522,14 +529,7 @@
<style scoped lang="scss">
.container {
    color: #fff;
    ::v-deep .el-table tr:nth-child(2n) {
        background: #03254c;
        color: #fff;
    }
    ::v-deep .el-table tr:nth-child(2n-1) {
        background: #26426a;
        color: #fff;
    }
    .left-container {
        position: fixed;
        top: 80px;
@@ -567,6 +567,17 @@
                background: #ff0000;
            }
        }
        ::v-deep .el-table tr:nth-child(2n) {
            background: #03254c;
            color: #fff;
        }
        ::v-deep .el-table tr:nth-child(2n-1) {
            background: #26426a;
            color: #fff;
        }
        ::v-deep .el-table tr:hover td {
            color: #000;
        }
    }
    .left-container,
src/views/house/index.vue
@@ -223,7 +223,31 @@
                <div class="business-content"></div>
            </div>
            <div class="police-info" v-show="navType == 1"></div>
            <div class="police-info" v-show="navType == 1">
                <el-table
                    :data="arr"
                    style="width: 100%"
                    :header-cell-style="{'text-align':'center','background-color':'#00204f','borderColor':'#073365'}"
                    :cell-style="{'text-align':'center','borderColor':'#073365'}"
                    :row-class-name="tableRowClassName"
                    @row-click="clickData"
                >
                    <el-table-column prop="name" label="名称" width="130"></el-table-column>
                    <el-table-column prop="time" label="时间" width="150"></el-table-column>
                    <el-table-column prop="type" label="类别" width="120"></el-table-column>
                </el-table>
                <el-dialog
                    title="详细信息"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose"
                >
                    <ul>
                        <li v-for="(value,key) in JWdetails" :key="key">{{key}}---------{{value}}</li>
                    </ul>
                    <span slot="footer" class="dialog-footer"></span>
                </el-dialog>
            </div>
            <div class="warning-info" v-show="navType == 2"></div>
        </div>
@@ -236,7 +260,10 @@
    data () {
        return {
            searchHouse: '',
            navType: 0
            navType: 0,
            arr: [{ 'name': '物品遗失', 'time': '2022-1-2', 'type': '入室盗窃', '属性1': '值1', '属性2': '值2', '属性3': '值3', '属性4': '值4', '属性5': '值5' }, { 'name': '连环追尾', 'time': '2022-2-3', 'type': '交通事故', '属性1': '值1', '属性2': '值2', '属性3': '值3', '属性4': '值4', '属性5': '值5' }, { 'name': '打群架', 'time': '2022-3-4', 'type': '打架斗殴', '属性1': '值1', '属性2': '值2', '属性3': '值3', '属性4': '值4', '属性5': '值5' }],
            dialogVisible: false,
            JWdetails: {},
        }
    },
@@ -252,7 +279,16 @@
    methods: {
        navClick (e) {
            this.navType = e.target.dataset.type
        }
        },
        tableRowClassName ({ row, rowIndex }) {
            row.index = rowIndex
            return 'rows'
        },
        clickData (row) {
            this.dialogVisible = true
            this.JWdetails = this.arr[row.index]
        },
    }
}
</script>
@@ -264,6 +300,9 @@
    height: 100%;
    color: #fff;
    background: rgba(7, 22, 37, 0.8);
    li {
        list-style: none;
    }
    .search-box {
        padding: 0 10px;
@@ -314,6 +353,7 @@
                height: 40px;
                line-height: 40px;
                border-bottom: 1px solid #33566c;
                cursor: pointer;
            }
        }
@@ -525,6 +565,19 @@
                }
            }
        }
        .police-info {
            ::v-deep .el-table tr:nth-child(2n) {
                background: #03254c;
                color: #fff;
            }
            ::v-deep .el-table tr:nth-child(2n-1) {
                background: #26426a;
                color: #fff;
            }
            ::v-deep .el-table tr:hover td {
                color: #000;
            }
        }
    }
}
</style>
src/views/police/index.vue
@@ -35,8 +35,8 @@
                            </template>
                        </el-table-column>
                        <el-table-column prop="carID" label="车牌号" width="80"></el-table-column>
                        <el-table-column prop="carType" label="警车类型" width="80"></el-table-column>
                        <el-table-column prop="position" label="经纬度"></el-table-column>
                        <el-table-column prop="carType" label="警车类型"></el-table-column>
                        <!-- <el-table-column prop="position" label="经纬度"></el-table-column> -->
                    </el-table>
                </div>
                <div class="pages">
@@ -112,13 +112,14 @@
            console.log(this.currentPage)  //点击第几页
        },
        getData () {
            for (let i = 0; i < 100; i++) {
                let lng = 120.381058 + Math.random() * 0.5
                let lat = 31.101156 + Math.random() * 0.5
            for (let i = 0; i < 5; i++) {
                // let lng = 120.381058 + Math.random() * 0.5
                // let lat = 31.101156 + Math.random() * 0.5
                let carNum = Math.random() * 5000000 + ''
                this.arr.push({ "carID": `#${carNum.slice(0, 6)}`, "carType": "大众", "position": `(${lng.toFixed(6)},${lat.toFixed(6)})` })
                // this.arr.push({ "carID": `#${carNum.slice(0, 6)}`, "carType": "大众", "position": `(${lng.toFixed(6)},${lat.toFixed(6)})` })
                this.arr.push({ "carID": `#${carNum.slice(0, 6)}`, "carType": "大众" })
            }
            for (let i = 0; i < 100; i++) {
            for (let i = 0; i < 5; i++) {
                let phoneNum = Math.random() * 500000000 + ''
                this.arr2.push({ "phoneID": `${phoneNum.slice(0, 8)}`, "phoneType": "华为" })
            }
src/views/video/index.vue
@@ -31,8 +31,8 @@
                            </template>
                        </el-table-column>
                        <el-table-column prop="carID" label="车牌号" width="80"></el-table-column>
                        <el-table-column prop="carType" label="警车类型" width="80"></el-table-column>
                        <el-table-column prop="position" label="经纬度"></el-table-column>
                        <el-table-column prop="carType" label="警车类型"></el-table-column>
                        <!-- <el-table-column prop="position" label="经纬度"></el-table-column> -->
                    </el-table>
                </div>
                <div class="pages">
@@ -77,11 +77,12 @@
            console.log(this.currentPage)  //点击第几页
        },
        getData () {
            for (let i = 0; i < 100; i++) {
                let lng = 120.381058 + Math.random() * 0.5
                let lat = 31.101156 + Math.random() * 0.5
            for (let i = 0; i < 5; i++) {
                // let lng = 120.381058 + Math.random() * 0.5
                // let lat = 31.101156 + Math.random() * 0.5
                let carNum = Math.random() * 5000000 + ''
                this.arr.push({ "carID": `#${carNum.slice(0, 6)}`, "carType": "大众", "position": `(${lng.toFixed(6)},${lat.toFixed(6)})` })
                // this.arr.push({ "carID": `#${carNum.slice(0, 6)}`, "carType": "大众", "position": `(${lng.toFixed(6)},${lat.toFixed(6)})` })
                this.arr.push({ "carID": `#${carNum.slice(0, 6)}`, "carType": "大众" })
            }
        },
    }