警务列表及弹窗

guanqb

2022-09-19 0296d220b566f61bbedd8f422bbf3f03b5641a47

警务列表及弹窗

 src/components/public/public.vue

New file
@@ -0,0 +1,10 @@
<template></template>

<script>
export default {

}
</script>

<style>
</style>

 src/views/home/index.vue

@@ -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>

@@ -298,7 +298,7 @@
            option = {
                title: {
                    show: true,
                    text: ['{a|摄像头总数}', '{b|regionTotal个}'].join('                                      '), // 主副标题
                    text: ['{a|摄像头总数}', `{b|${regionTotal}个}`].join('                                      '), // 主副标题
                    left: 'left',
                    textStyle: {
                        rich: {
@@ -446,8 +446,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: '走失人口' }
                        ]
                    }
                ],
@@ -461,13 +465,6 @@

            option && myChart.setOption(option)
        },
        tableRowClassName () {
            // if ((rowIndex + 1) % 2 === 0) {
            return "aa"
            // } else {
            //     return "background:rgba(0,8,1,0.1)"
            // }
        },
    }
}
</script>
@@ -475,14 +472,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;
@@ -520,6 +510,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": "大众" })
            }
        },
    }