警情及活动

shuishen

2022-09-27 b5f66df182618d50c26f7dd398924021dbeb95f0

警情及活动

 src/styles/base/index.scss

@@ -10,6 +10,12 @@
    height: 100%;
}

ul {
    li {
        list-style: none;
    }
}

.deblurring {
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
@@ -65,6 +71,23 @@
    }
}

.police-affairs-details-box {
    .el-dialog {
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        width: 540px;
        height: 420px;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);

        .el-dialog__body {
            flex: 1;
        }
    }
}

.resident-details-box {
    .el-dialog {
        margin: 0 !important;

 src/views/activity/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-27 11:14:20
 * @LastEditTime: 2022-09-27 16:01:02
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 安保活动
 * 
@@ -88,6 +88,47 @@
            </div>
        </div>

        <div class="draw-btn-box">
            <ul>
                <li>
                    <button @click="draw('point')">点</button>
                </li>
                <li>
                    <button @click="draw('billboard')">图标点</button>
                </li>
                <li>
                    <button @click="draw('polyline')">线</button>
                </li>
                <li>
                    <button @click="draw('polygon')">面</button>
                </li>
                <li>
                    <button @click="draw('circle')">圆</button>
                </li>
                <li>
                    <button @click="draw('rectangle')">矩形</button>
                </li>
                <li>
                    <button @click="draw('attack_arrow')">进攻箭头</button>
                </li>
                <li>
                    <button @click="draw('double_arrow')">双箭头</button>
                </li>
                <li>
                    <button @click="draw('fine_arrow')">直箭头</button>
                </li>
                <li>
                    <button @click="draw('tailed_attack_arrow')">燕尾箭头</button>
                </li>
                <li>
                    <button @click="draw('gathering_place')">聚集地</button>
                </li>
                <li>
                    <button @click="removeAll()">清除</button>
                </li>
            </ul>
        </div>

        <div class="second-container">
            <el-tree
                :data="treeData"
@@ -99,6 +140,13 @@
        </div>

        <div v-show="dialogVisible" class="activity-details-box">
            <div class="title">
                活动详情
                <div class="close" @click="closeActivityDetails">
                    <i class="el-icon-close"></i>
                </div>
            </div>

            <div class="row-box">
                <div class="category">活动名称：</div>
                <div class="category-value">xxx活动</div>
@@ -159,6 +207,9 @@
<script>
let analyseLayer = null
let analysePolygon = null

let drawLayers = null
let plot = undefined

export default {
    data () {
@@ -360,7 +411,8 @@
                    alt: 100,
                    url: '/img/icon/activity.png'
                }
            ]
            ],
            activityDetails: {}
        }
    },
    created () {
@@ -368,6 +420,8 @@
    },
    mounted () {
        this.$nextTick(() => {


            this.activityList.forEach(item => {
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'activityLayers',
@@ -378,8 +432,21 @@
            })


            analyseLayer = new global.DC.VectorLayer('analyseLayer')
            global.viewer.addLayer(analyseLayer)
            if (analyseLayer == null) {

                analyseLayer = new global.DC.VectorLayer('analyseLayer')
                global.viewer.addLayer(analyseLayer)

            }

            if (drawLayers == null) {

                drawLayers = new global.DC.VectorLayer('drawLayers')
                global.viewer.addLayer(drawLayers)
                plot = new global.DC.Plot(global.viewer)

            }

        })
    },
    updated () {
@@ -419,16 +486,24 @@
        },

        goAbDetail (item, index) {
            if (this.currentClickIndex !== '' && this.currentClickIndex == index) {
                return
            }

            this.analyseInput = 100

            this.activityDetails = item

            this.polylineSwitch = false

            if (analyseLayer != null) {
                analyseLayer.clear()
            }

            let point = new global.DC.Point("116.027001,28.683111")
            let point = new global.DC.Point(`${item.lng}, ${item.lat}`)
            analyseLayer.addOverlay(point)

            let coords = global.DC.GeoTools.pointBuffer("116.027001,28.683111", 100)
            let coords = global.DC.GeoTools.pointBuffer(`${item.lng}, ${item.lat}`, 100)
            analysePolygon = new global.DC.Polygon(coords)

            analysePolygon.setStyle({
@@ -478,7 +553,7 @@
        analyseChange (e) {
            analyseLayer.removeOverlay(analysePolygon)

            let coords = global.DC.GeoTools.pointBuffer("116.027001,28.683111", e)
            let coords = global.DC.GeoTools.pointBuffer(`${this.activityDetails.lng}, ${this.activityDetails.lat}`, e)
            analysePolygon = new global.DC.Polygon(coords)

            analysePolygon.setStyle({
@@ -487,9 +562,39 @@

            analyseLayer.addOverlay(analysePolygon)
        },

        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage
        },

        closeActivityDetails () {
            this.dialogVisible = false

            this.currentClickIndex = ''

            this.polylineSwitch = false

            analyseLayer.clear()

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'polylineLayer',
                type: 'VectorLayer'
            })
        },

        draw (type) {
            plot && plot.draw(type, overlay => {
                if (overlay) {
                    drawLayers.addOverlay(overlay)
                    plot.edit(overlay)
                }
            })
        },

        removeAll () {
            drawLayers.clear()
        }

    },
    destroyed () {
        this.$EventBus.$emit('mapClearLayer', {
@@ -508,6 +613,8 @@
        })

        analyseLayer.clear()

        this.removeAll()
    }
}
</script>
@@ -652,13 +759,42 @@
        }
    }

    .draw-btn-box {
        position: fixed;
        bottom: 40px;
        left: 50%;
        transform: translate(-50%, 0);

        ul {
            display: flex;

            li {
                button {
                    width: 60px;
                    height: 30px;
                    margin: 0 5px;
                    background-color: $bg-color;
                    border: 1px solid #cecece;
                    border-radius: 4px;
                    color: #fff;
                    cursor: pointer;
                    outline: none;
                }
            }
        }
    }

    .second-container {
        position: absolute;
        top: 0;
        top: 10px;
        display: flex;
        left: 405px;
        flex-direction: column;
        width: 240px;

        :deep(.el-tree) {
            background: transparent;
        }

        :deep(.el-tree-node__content) {
            background: transparent;
@@ -671,17 +807,31 @@

    .activity-details-box {
        position: fixed;
        top: 80px;
        right: 0;
        top: 90px;
        right: 10px;
        width: 400px;
        padding: 10px;

        border-radius: 10px 0 0 10px;
        border-radius: 10px;
        color: #fff;
        background: $bg-color;
        overflow-x: hidden;
        overflow-y: auto;

        .title {
            position: relative;
            height: 36px;
            line-height: 36px;

            .close {
                position: absolute;
                top: 50%;
                right: 0;
                transform: translate(0, -50%);
                cursor: pointer;
            }
        }

        .row-box {
            width: 100%;
            line-height: 28px;

 src/views/house/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-27 10:45:10
 * @LastEditTime: 2022-09-27 15:05:34
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -257,25 +257,85 @@
                    <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="40%"
                    height="60%"
                    :before-close="handleClose"
                >
                    <table border="1" class="tableClass">
                        <tr v-for="(value,key) in JWdetails" :key="key">
                            <th>{{key}}</th>
                            <td>{{value}}</td>
                        </tr>
                    </table>
                    <span slot="footer" class="dialog-footer"></span>
                </el-dialog>
            </div>

            <div class="warning-info" v-show="navType == 2"></div>
            <div class="warning-info" v-show="navType == 2">
                <el-table
                    :data="warningArray"
                    style="width: 100%"
                    :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                    :cell-style="{'text-align':'center','borderColor':'#324e75'}"
                    :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>
            </div>
        </div>

        <el-dialog
            title="信息详情"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            :close-on-click-modal="true"
            class="police-affairs-details-box"
        >
            <div
                style="display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; height: 100%;"
            >
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                    <div>名称：</div>
                    <div>{{JWdetails.name}}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                    <div>时间：</div>
                    <div>{{JWdetails.time}}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                    <div>类型：</div>
                    <div>{{JWdetails.type}}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                    <div>责任警员：</div>
                    <div>{{JWdetails.person}}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                    <div>涉案金额：</div>
                    <div>{{JWdetails.money}}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                    <div>所属辖区：</div>
                    <div>{{JWdetails.turnoutArea}}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                    <div>处理时长：</div>
                    <div>{{JWdetails.handlingTime}}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                    <div>案件级别：</div>
                    <div>{{JWdetails.rank}}</div>
                </div>
            </div>
        </el-dialog>

        <el-dialog
            :title="residentDetailsTitle"
@@ -283,7 +343,6 @@
            :visible.sync="residentDetailsShow"
            :before-close="residentDetailsClose"
            :close-on-click-modal="true"
            height="70%"
            class="resident-details-box"
        >
            <div
@@ -348,31 +407,63 @@
                    name: '物品遗失',
                    time: '2022-1-2',
                    type: '入室盗窃',
                    attribute: '值1',
                    '属性2': '值2',
                    '属性3': '值3',
                    '属性4': '值4',
                    '属性5': '值5'
                    person: '张志强',
                    money: '1000元',
                    turnoutArea: 'xxx责任区',
                    handlingTime: '12小时',
                    rank: '一般'
                },
                {
                    name: '连环追尾',
                    name: '狗狗互咬',
                    time: '2022-2-3',
                    type: '交通事故',
                    attribute: '值1',
                    '属性2': '值2',
                    '属性3': '值3',
                    '属性4': '值4',
                    '属性5': '值5'
                    type: '宠物殴打',
                    person: '张志强',
                    money: '1000元',
                    turnoutArea: 'xxx责任区',
                    handlingTime: '16小时',
                    rank: '一般'
                },
                {
                    name: '打群架',
                    time: '2022-3-4',
                    type: '打架斗殴',
                    '属性1': '值1',
                    '属性2': '值2',
                    '属性3': '值3',
                    '属性4': '值4',
                    '属性5': '值5'
                    person: '张志强',
                    money: '1000元',
                    turnoutArea: 'xxx责任区',
                    handlingTime: '1小时',
                    rank: '一般'
                }
            ],
            warningArray: [
                {
                    name: '楼层房屋起火',
                    time: '2022-1-2',
                    type: '火灾',
                    person: '张志强',
                    money: '100000元',
                    turnoutArea: 'xxx责任区',
                    handlingTime: '12小时',
                    rank: '较大'
                },
                {
                    name: '台风过境',
                    time: '2022-2-3',
                    type: '天气',
                    person: '张志强',
                    money: '10000元',
                    turnoutArea: 'xxx责任区',
                    handlingTime: '16小时',
                    rank: '一般'
                },
                {
                    name: '洪水',
                    time: '2022-3-4',
                    type: '水灾',
                    person: '张志强',
                    money: '1000000元',
                    turnoutArea: 'xxx责任区',
                    handlingTime: '1小时',
                    rank: '一般'
                }
            ],
            dialogVisible: false,
@@ -607,13 +698,22 @@
        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]

            if (this.navType == 1) {
                this.JWdetails = this.arr[row.index]

            } else if (this.navType == 2) {
                this.JWdetails = this.warningArray[row.index]

            }
        },

        residentDetailsClick (params) {