警情和活动表格点击定位

guanqb

2022-11-01 c0c494b2801367b99b9f06eb7187e21373e14ae4

警情和活动表格点击定位

 src/assets/data/policeSituationArr/weekArr.js

@@ -1,7 +1,7 @@
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': '3', 'type': '民事纠纷', 'comingPhone': '15511112222', 'dealTime': '2022-10-09', 'dealPolice': '刘警官', 'callPeople': '张某某', 'callPhone': '13466669999', 'callContent': '他先动的手', 'policeName': '沙溪派出所', 'position': [115.991405, 28.614604] },
    { '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] },

 src/views/home/components/bottomContainer.vue

@@ -20,7 +20,7 @@
            </div>
        </div>

        <div class="body" ref="tableBox">
        <div class="body" ref="tableBox" @click="handleSelectClick($event)">
            <ul>
                <li style="color: #fff; background: rgb(1, 76, 137);">
                    <span class="num">序号</span>
@@ -44,6 +44,8 @@
                    <li
                        v-for="(item, index) in (timetype == 0 ? policeSituationWeekArr : policeSituationMouthArr)"
                        :key="index"
                        :data-obj="JSON.stringify(item)"
                        class="row"
                    >
                        <span class="num" v-text="item.num"></span>
                        <span class="type" v-text="item.type"></span>
@@ -159,6 +161,26 @@
            }
        },

        policeSituationClick (item) {
            this.$EventBus.$emit('toPosition', {
                layerName: 'policeSituationyLayers',
                siteJd: Number(item.position[0]),
                siteWd: Number(item.position[1])
            })
        },

        handleSelectClick (e) {
            let e1
            for (let i = 0; i < e.path.length; i++) {
                if (e.path[i].className == "row") {
                    e1 = e.path[i]
                    break
                }
            }
            let item = JSON.parse(e1.dataset.obj)
            this.policeSituationClick(item)
        }

    },

    destroyed () {
@@ -259,6 +281,7 @@
                height: 44px;
                line-height: 44px;
                display: flex;
                cursor: pointer;

                .num {
                    width: 8%;

 src/views/home/components/rightContainer.vue

@@ -4,9 +4,16 @@
            <div class="title">
                <i></i> 案件统计
                <div class="timer">
                    <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
                    </el-date-picker>
                    <el-date-picker
                        v-model="eventTime"
                        type="daterange"
                        align="right"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :picker-options="pickerOptions"
                    ></el-date-picker>
                </div>
            </div>

@@ -16,15 +23,28 @@
            <div class="title">
                <i></i>
                <span style="margin-right:130px">安保活动</span>
                <span class="activity" :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>
                <span
                    class="activity"
                    :class="{ choosed: acttype == 0 }"
                    @click="actTabClick(0)"
                >正在进行</span>
                <span>/</span>
                <span class="activity" :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
                <span
                    class="activity"
                    :class="{ choosed: acttype == 1 }"
                    @click="actTabClick(1)"
                >历史活动</span>
            </div>
            <div id="peopleList" class="echarts-box">
                <el-table :data="acttype == 0 ? underwayArr : historyArr" style="width: 100%"
                <el-table
                    :data="acttype == 0 ? underwayArr : historyArr"
                    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" ref="activityTable">
                    :row-class-name="tableRowClassName"
                    ref="activityTable"
                    @row-click="activityRowClick"
                >
                    <el-table-column prop="activityName" label="活动名称" width="100"></el-table-column>
                    <el-table-column prop="startTime" label="开始时间" width="100"></el-table-column>
                    <el-table-column prop="endTime" label="结束时间" width="100"></el-table-column>
@@ -366,6 +386,14 @@
            return dataArr
        },

        activityRowClick (row) {
            this.$EventBus.$emit('toPosition', {
                layerName: 'activityLayers',
                siteJd: Number(row.position[0]),
                siteWd: Number(row.position[1])
            })
        },




@@ -480,7 +508,7 @@
                border: 1px solid rgba(20, 50, 123, 1);
                cursor: pointer;

                &>div {
                & > div {
                    height: 26px;
                    line-height: 26px;
                }
@@ -495,7 +523,7 @@
            flex: 1;
        }

        .sub-tab+.echarts-box {
        .sub-tab + .echarts-box {
            margin-top: 10px;
        }


 src/views/home/index.vue

@@ -19,6 +19,7 @@
                ref="leftContainer"
            ></left-container>
        </div>

        <div class="right-container">
            <right-container
                @showequimentdetail="showequimentdetail"
@@ -1396,6 +1397,11 @@
            type: 'VectorLayer'
        })

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

        cylinderLayer.clear()
        cylinderLayer.remove()
        cylinderLayer = null