警情表格坐标数据添加和地图标记数据联动

guanqb

2022-11-01 102fcc5c4aa0245b08be7f66e8eace0add82244b

警情表格坐标数据添加和地图标记数据联动

 src/assets/data/policeSituationArr/mouthArr.js

New file
@@ -0,0 +1,12 @@
export default [
    { 'num': '1', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-01', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手', 'policeName': '车站派出所', 'position': [115.968301, 28.692978] },
    { 'num': '2', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-12', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手', 'policeName': '车站派出所', 'position': [116.001740, 28.652388] },
    { 'num': '3', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-13', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手', 'policeName': '沙溪派出所', 'position': [115.986928, 28.534698] },
    { 'num': '4', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-20', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手', 'policeName': '沙溪派出所', 'position': [116.063849, 28.592397] },
    { 'num': '5', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手', 'policeName': '灵溪派出所', 'position': [116.088476, 28.584286] },
    { 'num': '6', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手', 'policeName': '灵溪派出所', 'position': [116.130909, 28.571193] },
    { 'num': '7', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手', 'policeName': '北门派出所', 'position': [116.169778, 28.615767] },
    { 'num': '8', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手', 'policeName': '北门派出所', 'position': [116.288719, 28.685802] },
    { 'num': '9', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手', 'policeName': '江光派出所', 'position': [116.116809, 28.786638] },
    { 'num': '10', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手', 'policeName': '江光派出所', 'position': [116.190200, 28.759358] },
]

 src/assets/data/policeSituationArr/weekArr.js

New file
@@ -0,0 +1,12 @@
export default [
    { 'num': '1', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-01', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手', 'policeName': '车站派出所', 'position': [115.956092, 28.655133] },
    { 'num': '2', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-04', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手', 'policeName': '车站派出所', 'position': [115.988650, 28.672257] },
    { 'num': '3', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-09', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手', 'policeName': '沙溪派出所', 'position': [116.978867, 28.614656] },
    { 'num': '4', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-12', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手', 'policeName': '沙溪派出所', 'position': [116.035493, 28.555238] },
    { 'num': '5', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手', 'policeName': '灵溪派出所', 'position': [116.131969, 28.547531] },
    { 'num': '6', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手', 'policeName': '灵溪派出所', 'position': [116.228057, 28.574474] },
    { 'num': '7', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手', 'policeName': '北门派出所', 'position': [116.125402, 28.626082] },
    { 'num': '8', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手', 'policeName': '北门派出所', 'position': [116.254688, 28.633999] },
    { 'num': '9', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手', 'policeName': '江光派出所', 'position': [116.125914, 28.731029] },
    { 'num': '10', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手', 'policeName': '江光派出所', 'position': [116.022654, 28.758122] },
]

 src/views/home/components/bottomContainer.vue

@@ -7,8 +7,16 @@
                <div class="rightBor"></div>
            </div>
            <div class="timeTab">
                <span class="beforetime" :class="{ choosed: timetype == 0 }" @click="timeTabClick(0)">周</span>
                <span class="beforetime" :class="{ choosed: timetype == 1 }" @click="timeTabClick(1)">月</span>
                <span
                    class="beforetime"
                    :class="{ choosed: timetype == 0 }"
                    @click="timeTabClick(0)"
                >周</span>
                <span
                    class="beforetime"
                    :class="{ choosed: timetype == 1 }"
                    @click="timeTabClick(1)"
                >月</span>
            </div>
        </div>

@@ -25,13 +33,18 @@
                    <span class="callContent">报警内容</span>
                </li>
            </ul>
            <vue-seamless-scroll :data="timetype == 0 ? pliceSituationWeekArr : pliceSituationMouthArr" class="warp"
            <vue-seamless-scroll
                :data="timetype == 0 ? policeSituationWeekArr : policeSituationMouthArr"
                class="warp"
                :style="{
                    height: currentTableHeight - 44 + 'px', width: '100%'
                }">
                }"
            >
                <ul class="item">
                    <li v-for="(item, index) in (timetype == 0 ? pliceSituationWeekArr : pliceSituationMouthArr)"
                        :key="index">
                    <li
                        v-for="(item, index) in (timetype == 0 ? policeSituationWeekArr : policeSituationMouthArr)"
                        :key="index"
                    >
                        <span class="num" v-text="item.num"></span>
                        <span class="type" v-text="item.type"></span>
                        <span class="comingPhone" v-text="item.comingPhone"></span>
@@ -46,7 +59,7 @@
        </div>

        <!-- <div class="body" ref="tableBox">
            <el-table :data="timetype == 0 ? pliceSituationWeekArr : pliceSituationMouthArr" style="width: 100%"
            <el-table :data="timetype == 0 ? policeSituationWeekArr : policeSituationMouthArr" 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"
                :height="currentTableHeight">
@@ -59,46 +72,33 @@
                <el-table-column prop="callPhone" label="报警人联系人"></el-table-column>
                <el-table-column prop="callContent" label="报警内容"></el-table-column>
            </el-table>
        </div> -->
        </div>-->
    </div>
</template>

<script>
let interTime
import vueSeamlessScroll from 'vue-seamless-scroll'
import weekArr from '@/assets/data/policeSituationArr/weekArr.js'
import mouthArr from '@/assets/data/policeSituationArr/mouthArr.js'


export default {
    data () {
        return {
            timetype: 0,
            pliceSituationWeekArr: [
                { 'num': '1', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-01', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '2', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-04', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '3', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-09', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '4', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-12', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '5', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '6', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '7', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '8', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
                { 'num': '9', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-19', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手' },
            ],
            pliceSituationMouthArr: [
                { 'num': '1', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-01', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '2', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-12', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '3', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-13', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '4', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-20', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '5', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '6', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '7', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '8', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
                { 'num': '9', 'type': '聚众斗殴', 'comingPhone': '13466669999', 'dealTime': '2022-09-21', 'dealPolice': '王警官', 'callPeople': '张某三', 'callPhone': '15511112222', 'callContent': '他们先动的手' },
            ],
            policeSituationWeekArr: [],
            policeSituationMouthArr: [],
            currentTableHeight: 0,
        }
    },

    components: {
        vueSeamlessScroll
    },
    created () {
        this.policeSituationWeekArr = weekArr
        this.policeSituationMouthArr = mouthArr
    },

    mounted () {
@@ -113,10 +113,15 @@
    methods: {
        timeTabClick (type) {
            this.timetype = type
            this.$emit('changePoliceSituationType', type)
            this.$emit('policeSituationChange')

        },

        setDomStyle () {
            this.currentTableHeight = this.$refs.tableBox.offsetHeight
        },

        tableScroll () {
            // 拿到表格挂载后的真实DOM
            const divData = this.$refs.tableBox.querySelector('.el-table__body-wrapper')
@@ -131,6 +136,29 @@
                }
            }, 50)
        },

        selectPoliceSituatiionArr (name) {
            if (name == '全部') {
                this.policeSituationWeekArr = weekArr
                this.policeSituationMouthArr = mouthArr
            } else {
                let weekNewArr = []
                let mouthNewArr = []
                weekArr.forEach(item => {
                    if (item.policeName == name) {
                        weekNewArr.push(item)
                    }
                })
                this.policeSituationWeekArr = weekNewArr
                mouthArr.forEach(item => {
                    if (item.policeName == name) {
                        mouthNewArr.push(item)
                    }
                })
                this.policeSituationMouthArr = mouthNewArr
            }
        },

    },

    destroyed () {
@@ -227,7 +255,6 @@
        }

        ul {

            li {
                height: 44px;
                line-height: 44px;
@@ -267,12 +294,12 @@
            }

            li:nth-child(2n) {
                background: rgba(20, 50, 123, 1.0);
                background: rgba(20, 50, 123, 1);
                color: #fff !important;
            }

            li:nth-child(2n-1) {
                background: rgba(29, 38, 105, 1.0);
                background: rgba(29, 38, 105, 1);
                color: #fff;
            }
        }

 src/views/home/index.vue

@@ -48,10 +48,17 @@
            <div class="layers-control-btn activity">
                <el-checkbox v-model="activityLayerShow" @change="activityChange">活动</el-checkbox>
            </div>
            <div class="layers-control-btn policeSituation">
                <el-checkbox v-model="policeSituationLayerShow" @change="policeSituationChange">警情</el-checkbox>
            </div>
        </div>

        <div class="bottom-container">
            <bottom-container></bottom-container>
            <bottom-container
                ref="bottomContainer"
                @changePoliceSituationType="changePoliceSituationType"
                @policeSituationChange="policeSituationChange"
            ></bottom-container>
        </div>

        <div ref="RegionSelect" style="left: 0;" class="region-select">
@@ -349,6 +356,8 @@
import bottomContainer from './components/bottomContainer'
import historyArr from '@/assets/data/activitysData/history.js'
import underwayArr from '@/assets/data/activitysData/underway.js'
import weekArr from '@/assets/data/policeSituationArr/weekArr.js'
import mouthArr from '@/assets/data/policeSituationArr/mouthArr.js'


let treeData = [
@@ -423,6 +432,7 @@
            monitoringLayerShow: false,
            panoramaLayerShow: false,
            activityLayerShow: false,
            policeSituationLayerShow: false,
            dialogTitle: '',
            dialogVisible: false,
            panoramaTitle: '',
@@ -452,6 +462,7 @@
                url: '/img/icon/map-panorama.png'
            }],
            activityList: [],
            policeSituationList: [],
            policeStationCheckValue: '请选择派出所',
            areaOptionData: [],
            areaCheckValue: '请选择责任区',
@@ -565,6 +576,9 @@
            historyArr: [],
            underwayArr: [],
            activityType: 0,
            policeSituationType: 0,
            policeSituationWeekArr: [],
            policeSituationMouthArr: [],
        }
    },
    components: { leftContainer, rightContainer, bottomContainer },
@@ -579,6 +593,8 @@
        this.housingDate = housingDate
        this.historyArr = historyArr
        this.underwayArr = underwayArr
        this.policeSituationWeekArr = weekArr
        this.policeSituationMouthArr = mouthArr
    },

    mounted () {
@@ -651,6 +667,8 @@
            this.$refs.rightContainer.selectPoliceChangeEquimentData(item.policeStationName)
            this.$refs.rightContainer.selectPoliceChangeEventData(item.policeStationName)
            this.activityChange()
            this.$refs.bottomContainer.selectPoliceSituatiionArr(item.policeStationName)
            this.policeSituationChange()

        },

@@ -837,6 +855,63 @@
                showNewArr.push({ name: `${index + 1}号活动`, lng: `${Number(item.position[0])}`, lat: `${Number(item.position[1])}`, alt: 100, url: '/img/icon/activity.png' })
            })
            this.activityList = showNewArr
        },

        policeSituationChange () {
            this.policeSituationSelectChange()
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'policeSituationLayers',
                type: 'VectorLayer'
            })
            if (this.policeSituationLayerShow == true) {
                this.policeSituationList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'policeSituationLayers',
                        type: "billboard",
                        params: item,
                        incident: this.policeSituationSiteClick
                    })
                })
            } else {
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'policeSituationLayers',
                    type: 'VectorLayer'
                })
            }
        },

        policeSituationSelectChange () {
            let showArr = []
            let showNewArr = []
            if (this.policeStaionChecked && this.policeStaionChecked.policeStationName != '全部') {
                let arr1 = []
                let arr2 = []
                weekArr.some(item => {
                    if (item.policeName == this.policeStaionChecked.policeStationName) {
                        arr1.push(item)
                    }
                })
                this.policeSituationWeekArr = arr1
                mouthArr.some(item => {
                    if (item.policeName == this.policeStaionChecked.policeStationName) {
                        arr2.push(item)
                    }
                })
                this.policeSituationMouthArr = arr2

            } else {
                this.policeSituationWeekArr = weekArr
                this.policeSituationMouthArr = mouthArr
            }
            if (this.policeSituationType == 0) {
                showArr = this.policeSituationWeekArr
            } else {
                showArr = this.policeSituationMouthArr
            }
            showArr.forEach((item, index) => {
                showNewArr.push({ name: `${index + 1}号警情`, lng: `${Number(item.position[0])}`, lat: `${Number(item.position[1])}`, alt: 100, url: '/img/icon/zf.png' })
            })
            this.policeSituationList = showNewArr
        },

        siteClick (e) {
@@ -1279,6 +1354,10 @@
            this.activityType = type
        },

        changePoliceSituationType (type) {
            this.policeSituationType = type
        },

    },

    watch: {},
@@ -1456,6 +1535,19 @@
                }
            }
        }
        .policeSituation {
            :deep(.el-checkbox__inner) {
                background: rgb(191, 135, 92);
                border-color: rgb(191, 135, 92);
            }

            :deep(.is-checked) {
                .el-checkbox__inner {
                    background: rgb(191, 135, 92);
                    border-color: rgb(191, 135, 92);
                }
            }
        }
    }

    .bottom-container {