活动列表改成折叠面板，点击定位功能

guanqb

2023-03-23 e7222c9e7a662ac25b86fd73241b835387273ad9

活动列表改成折叠面板，点击定位功能

 src/components/map/index.vue

@@ -920,7 +920,6 @@
            layersObjcect[layerName].addOverlay(polyline)
        },


        layerWallAdd (layerName, positions, imgUrl) {
            if (!layersObjcect[layerName] || layersObjcect[layerName] == null) {
                this.mapAddLayer(layerName, 'VectorLayer')

 src/styles/element-ui/element-ui.scss

@@ -459,4 +459,38 @@

.el-tree-node:focus>.el-tree-node__content {
    background-color: #5daaf0;
}

// 活动折叠面板
.activity-list {

    .el-collapse-item__header,
    .el-collapse-item__wrap {
        background-color: $bg-color;
        color: #ffffff;
        padding-left: 25px;
        border: 0;
    }

    .el-collapse-item__content {
        color: #ffffff;
        padding-bottom: 0;
    }

    ul {
        li {
            text-align: left;
            padding-left: 10px;
            cursor: pointer;
        }

        li:hover {
            background-color: $bg-color-hover;
        }
    }
}


.el-collapse {
    border: 0;
}

 src/styles/scssFile.scss

@@ -2,6 +2,8 @@

$bg-color: $bg-one-color;

$bg-color-hover:rgba(137, 146, 219, 0.9);



$tree-search-bg-color: rgba(35, 50, 167, 0.75);

 src/views/activity/index.vue

@@ -26,16 +26,17 @@
                <div>
                    <div class="category">名称：</div>
                    <div class="category-value search-activity">
                        <input type="text" placeholder="请输入…" v-model="searchActivity" class="category-input"
                            @input="inputChange" />
                        <div class="clear" v-show="isShowActivityClearBtn" @click="clearActivitySearchValue" title="清空">
                            <img src="/img/icon/clear.png" alt />
                        </div>
                        <button class="category-button el-icon-search" @click="searchClick"></button>
                    <input type="text" placeholder="请输入…" v-model="searchActivity" class="category-input"
                        @input="inputChange" />
                    <div class="clear" v-show="isShowActivityClearBtn" @click="clearActivitySearchValue" title="清空">
                        <img src="/img/icon/clear.png" alt />
                    </div>
                    <button class="category-button el-icon-search" @click="searchClick"></button>
                </div>
            </div>
            <div class="result-content">
        </div>

        <!-- <div class="result-content">
                <div class="table-box">
                    <div v-show="activityList.length > 0" class="row-box" :class="{ on: currentClickIndex === index }"
                        v-for="(item, index) in activityList" :key="index" @click="activityListClick(item, index)">
@@ -56,17 +57,155 @@
                            <div>
                                <div class="category">详情：</div>
                                <div class="category-value">{{ item.content }}</div>
                            </div>
                        </div>
                    </div>
                                                                                                                                                                                                                   </div>
                                                                                                                                                                                                               </div>
                                                                                                                                                                                                           </div>

                    <div v-show="activityList == 0" class="no-data">暂无数据</div>
                </div>
                <div class="pages all-pagination-sty">
                    <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
                        :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
                                                                                                                                                                                                           <div v-show="activityList == 0" class="no-data">暂无数据</div>
                                                                                                                                                                                                       </div>
                                                                                                                                                                                                       <div class="pages all-pagination-sty">
                                                                                                                                                                                                           <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
                                                                                                                                                                                                               :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
                                                                                                                                                                                                       </div>
                                                                                                                                                                                           </div> -->

            <el-collapse v-model="activeActivityIndex" accordion @change="handleActivityChange" class="activity-list">
                <el-collapse-item v-for="item in activityList" :name="item.id" :key="item.id">
                    <template slot="title">
                        {{ item.name }}
                    </template>
                    <el-collapse v-model="activeActivityElementIndex" accordion>
                        <el-collapse-item title="要素资源" :name="yszy">
                            <el-collapse v-model="elementPoliceIndex" accordion>
                                <el-collapse-item title="警车" :name="jc">
                                    <ul>
                                        <li v-for="carItem in chooseActivityPoliceCarList" :key="carItem.id"
                                            @click="carOrPoliceItemClick(carItem.position, 'point')">
                                            {{ carItem.serialNumber }}
                                        </li>
                                    </ul>
                                </el-collapse-item>
                            </el-collapse>
                            <el-collapse v-model="elementPoliceCarIndex" accordion>
                                <el-collapse-item title="警员" :name="jy">
                                    <ul>
                                        <li v-for="policeItem in chooseActivityPoliceManList" :key="policeItem.id"
                                            @click="carOrPoliceItemClick(policeItem.position, 'point')">
                                            {{ policeItem.policeName }}
                                        </li>
                                    </ul>
                                </el-collapse-item>
                            </el-collapse>
                            <el-collapse v-model="elementNormalIndex" accordion>
                                <el-collapse-item title="普通群众" :name="ptqz">
                                    <ul>
                                        <li v-for="(normalItem, index) in normalPeopleList" :key="normalItem.id"
                                            @click="carOrPoliceItemClick(normalItem.position, 'people')">
                                            普通群众{{ index + 1 }}
                                        </li>
                                    </ul>
                                </el-collapse-item>
                            </el-collapse>
                            <el-collapse v-model="elementProtectedIndex" accordion>
                                <el-collapse-item title="保护对象" :name="bhdx">
                                    <ul>
                                        <li v-for="(protectedItem, index) in protectedPeopleList" :key="protectedItem.id"
                                            @click="carOrPoliceItemClick(protectedItem.position, 'people')">
                                            保护对象{{ index + 1 }}
                                        </li>
                                    </ul>
                                </el-collapse-item>
                            </el-collapse>
                            <el-collapse v-model="elementDangerousIndex" accordion>
                                <el-collapse-item title="危险人物" :name="wxrw">
                                    <ul>
                                        <li v-for="(dangerousItem, index) in dangerousPeopleList" :key="dangerousItem.id"
                                            @click="carOrPoliceItemClick(dangerousItem.position, 'people')">
                                            危险人物{{ index + 1 }}
                                        </li>
                                    </ul>
                                </el-collapse-item>
                            </el-collapse>
                        </el-collapse-item>
                    </el-collapse>
                    <el-collapse v-model="activeActivityArrowIndex" accordion>
                        <el-collapse-item title="作战标绘" :name="zzbh">
                            <el-collapse v-model="attackArrowIndex" accordion>
                                <el-collapse-item title="进攻箭头" :name="jgjt">
                                    <ul>
                                        <li v-for="(attackItem, index) in attackArrowList" :key="attackItem.id"
                                            @click="carOrPoliceItemClick(attackItem.position, 'arrow')">
                                            进攻箭头{{ index + 1 }}
                                        </li>
                                    </ul>
                                </el-collapse-item>
                                <el-collapse v-model="doubleArrowIndex" accordion>
                                    <el-collapse-item title="双箭头" :name="sjt">
                                        <ul>
                                            <li v-for="(doubleItem, index) in doubleArrowList" :key="doubleItem.id"
                                                @click="carOrPoliceItemClick(doubleItem.position, 'arrow')">
                                                双箭头{{ index + 1 }}
                                            </li>
                                        </ul>
                                    </el-collapse-item>
                                </el-collapse>
                                <el-collapse v-model="fineArrowIndex" accordion>
                                    <el-collapse-item title="直箭头" :name="zjt">
                                        <ul>
                                            <li v-for="(fineItem, index) in fineArrowList" :key="fineItem.id"
                                                @click="carOrPoliceItemClick(fineItem.position, 'arrow')">
                                                直箭头{{ index + 1 }}
                                            </li>
                                        </ul>
                                    </el-collapse-item>
                                </el-collapse>
                                <el-collapse v-model="tailedAttackArrowIndex" accordion>
                                    <el-collapse-item title="燕尾箭头" :name="ywjt">
                                        <ul>
                                            <li v-for="(tailedItem, index) in tailedAttackArrowList" :key="tailedItem.id"
                                                @click="carOrPoliceItemClick(tailedItem.position, 'arrow')">
                                                燕尾箭头{{ index + 1 }}
                                            </li>
                                        </ul>
                                    </el-collapse-item>
                                </el-collapse>
                                <el-collapse v-model="polygonArrowIndex" accordion>
                                    <el-collapse-item title="多边形" :name="dbx">
                                        <ul>
                                            <li v-for="(polygonItem, index) in polygonList" :key="polygonItem.id"
                                                @click="carOrPoliceItemClick(polygonItem.position, 'polygon')">
                                                多边形{{ index + 1 }}
                                            </li>
                                        </ul>
                                    </el-collapse-item>
                                </el-collapse>
                                <el-collapse v-model="labelMarkIndex" accordion>
                                    <el-collapse-item title="文字标绘" :name="wzbh">
                                        <ul>
                                            <li v-for="(labelItem, index) in labelMarkList" :key="labelItem.id"
                                                @click="carOrPoliceItemClick(labelItem.position, 'people')">
                                                文字标绘{{ index + 1 }}
                                            </li>
                                        </ul>
                                    </el-collapse-item>
                                </el-collapse>
                            </el-collapse>
                        </el-collapse-item>
                    </el-collapse>


                    <el-collapse v-model="activeActivityLineIndex" accordion>
                        <el-collapse-item title="巡逻路线" :name="xllx">
                            <ul>
                                <li v-for="(lineItem, index) in chooseActivityLineList" :key="lineItem.id"
                                    @click="carOrPoliceItemClick(lineItem.polygonPositionStr, 'line')">
                                    路线{{ index + 1 }}
                                </li>
                            </ul>
                        </el-collapse-item>
                    </el-collapse>
                </el-collapse-item>
            </el-collapse>
        </div>

        <draw-btn-box ref="DRAWBTNBOX" :dialogVisible="dialogVisible" :isShowActivityEditBox="isShowActivityEditBox"
@@ -293,6 +432,34 @@

    data () {
        return {
            activeActivityIndex: '',
            elementPoliceCarIndex: '',
            elementPoliceIndex: '',
            elementNormalIndex: '',
            elementProtectedIndex: '',
            elementDangerousIndex: '',
            attackArrowIndex: '',
            doubleArrowIndex: '',
            tailedAttackArrowIndex: '',
            fineArrowIndex: '',
            polygonArrowIndex: '',
            labelMarkIndex: '',
            activeActivityPoliceManIndex: '',
            activeActivityElementIndex: '',
            activeActivityArrowIndex: '',
            activeActivityLineIndex: '',
            chooseActivityPoliceManList: [],
            chooseActivityPoliceCarList: [],
            chooseActivityLineList: [],
            attackArrowList: [],
            doubleArrowList: [],
            tailedAttackArrowList: [],
            fineArrowList: [],
            polygonList: [],
            normalPeopleList: [],
            protectedPeopleList: [],
            dangerousPeopleList: [],
            labelMarkList: [],
            boxShow: true,
            selectTime: '',
            searchActivity: '',
@@ -422,7 +589,7 @@
            dialogVisible: false,
            policeSwitch: true,
            arrowBtnSwitch: true,
            polylineBtnSwitch: false,
            polylineBtnSwitch: true,
            activityDetails: {},
            policeChooseVisible: false,
            policeChooseCarVisible: false,
@@ -558,6 +725,50 @@
    },

    methods: {
        // 展开活动列表面板
        handleActivityChange (val) {
            if (!val) return
            let unfoldingItem = this.activityList.find((item) => {
                if (item.id === val) {
                    return item
                }
            })
            this.activityListClick(unfoldingItem, val)
        },

        // 点击警车列表定位
        carOrPoliceItemClick (position, type) {
            let lng = ''
            let lat = ''
            if (type == 'point') {
                let positionStr = position.slice(6, position.length - 1)
                lng = Number(positionStr.split(" ")[0])
                lat = Number(positionStr.split(" ")[1])
            } else if (type == 'line') {
                let positionArr = this.getCenter(position, 'line')
                lng = Number(positionArr[0])
                lat = Number(positionArr[1])
            } else if (type == 'people') {
                let positionStr = position.slice(11, position.length - 1)
                lng = Number(positionStr.split(",")[0].split(' ')[0])
                lat = Number(positionStr.split(",")[0].split(' ')[1])
            } else if (type == 'polygon') {
                let positionArr = this.getCenter(position, 'polygon')
                lng = Number(positionArr[0])
                lat = Number(positionArr[1])
            } else if (type == 'arrow') {
                let positionStr = position.slice(11, position.length - 1)
                lng = Number(positionStr.split(",")[0].split(' ')[0])
                lat = Number(positionStr.split(",")[0].split(' ')[1])
                console.log(position,positionStr, lng, lat)
            }
            this.$EventBus.$emit('toPosition', {
                siteJd: lng,
                siteWd: lat,
                siteGd: 1500
            })
        },

        setOverlayObj (e) {
            overlayObj = e
        },
@@ -648,7 +859,7 @@
        activityListClick (item, index) {
            this.policeSwitch = true
            this.arrowBtnSwitch = true
            this.polylineBtnSwitch = false
            this.polylineBtnSwitch = true

            this.$refs.DRAWBTNBOX.removeDraw()
            this.$refs.DRAWBTNBOX.clearDrawArrow()
@@ -695,7 +906,6 @@

            // 警员警车列表根据deptid筛选
            // 获取树状警员数据
            console.log('item', item.deptId, item)
            this.getPolicemanTree({ deptId: item.deptId })

            this.getCarList({ deptId: item.deptId })
@@ -745,7 +955,6 @@
            this.getSecurityPoliceList(this.showingSecurityId, this.policeSwitch)
            this.getSecurityPlotList(this.showingSecurityId, this.policeSwitch, 'billboard')
            this.getSecurityPlotList(this.showingSecurityId, this.arrowBtnSwitch, 'plot')

        },

        // 切换作战标绘
@@ -766,6 +975,15 @@

            if (!arrowShow) return
            getSecurityPlotList(securityId).then(res => {
                this.attackArrowList = res.data.data.filter(item => item.type == 1)
                this.doubleArrowList = res.data.data.filter(item => item.type == 2)
                this.tailedAttackArrowList = res.data.data.filter(item => item.type == 3)
                this.fineArrowList = res.data.data.filter(item => item.type == 4)
                this.polygonList = res.data.data.filter(item => item.type == 5)
                this.normalPeopleList = res.data.data.filter(item => item.type == 6)
                this.protectedPeopleList = res.data.data.filter(item => item.type == 7)
                this.dangerousPeopleList = res.data.data.filter(item => item.type == 8)
                this.labelMarkList = res.data.data.filter(item => item.type == 9)
                this.isHaveArrow = res.data.data.some(item => {
                    return item
                })
@@ -994,6 +1212,11 @@
         * @return {*}
         */
        addMapCarAndPersonLayers (data, type, curLayer, mapLayer) {
            if (type == 'policecar') {
                this.chooseActivityPoliceCarList = data
            } else {
                this.chooseActivityPoliceManList = data
            }
            data.forEach(item => {
                let positionObj = this.convertBillboardPositionDate(item, type)
                let position = new global.DC.Position(Number(positionObj.lng), Number(positionObj.lat))
@@ -1044,6 +1267,7 @@
         * @return {*}
         */
        addMapLineLayers (data) {
            this.chooseActivityLineList = data
            data.forEach(item => {
                let positionNewArr = this.convertPolylineOrPolygonPositionDate(item.position, item.type)
                // 线坐标字符串
@@ -1395,7 +1619,8 @@
        closeActivityDetails () {
            this.dialogVisible = false
            this.polylineBtnSwitch = false
            this.closeVideo()
            this.activeActivityIndex = ''
            this.$refs.VIDEOCONTROLBOX.closeVideo()
            this.currentClickIndex = ''
            arrowsListLayer.clear()

@@ -1782,16 +2007,28 @@
        },

        // 获取面的中心点
        getCenter (str) {
            let itPositionStr = str.slice(11, str.length - 1)
            let positionArr = itPositionStr.split(',')
        getCenter (str, type) {
            let positionNewArr = []
            positionArr.forEach(item => {
                positionNewArr.push([Number(item.split(' ')[0]), Number(item.split(' ')[1])])
            })
            positionNewArr.push([Number(positionArr[0].split(' ')[0]), Number(positionArr[0].split(' ')[1])])

            if (type == 'line') {
                // 前端保存的面坐标格式
                let positionArr = str.slice(0, str.length - 1).split(';')
                positionArr.forEach(item => {
                    positionNewArr.push([Number(item.split(',')[0]), Number(item.split(',')[1])])
                })
            } else if (type == 'polygon') {
                // 后台获取的面坐标格式
                let itPositionStr = str.slice(11, str.length - 1)
                let positionArr = itPositionStr.split(',')
                positionArr.forEach(item => {
                    positionNewArr.push([Number(item.split(' ')[0]), Number(item.split(' ')[1])])
                })
                positionNewArr.push([Number(positionArr[0].split(' ')[0]), Number(positionArr[0].split(' ')[1])])
            }

            let polygon = this.$turf.polygon([positionNewArr])
            let center = this.$turf.centroid(polygon)

            return [center.geometry.coordinates[0], center.geometry.coordinates[1]]
        },


 vue.config.js

@@ -158,7 +158,7 @@
            "/api": {
                // target用于配置你允许访问数据的计算机名称，即是你的api接口的服务器地址
                // target: "http://localhost:82",
                target: "http://192.168.0.200:82",
                target: "http://192.168.0.126:82",
                // target: "http://17.20.10.3:82",
                // target: "http://10.141.11.11:8081/api",
                // ws: true, //启用webSocket6566