Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

guanqb

2023-02-24 00f5339bea7c395021e3f186587564b043495a3e

Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

 src/components/assemble/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-02-23 09:09:09
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-24 09:03:59
 * @LastEditTime: 2023-02-24 14:33:19
 * @FilePath: \srs-police-affairs\src\components\assemble\index.vue
 * @Description: 聚合图标点的点击事件
 * 
@@ -50,7 +50,7 @@
                </el-table-column>
            </el-table>

            <div class="pages">
            <div class="pages all-pagination-sty">
                <el-pagination background layout="prev, pager, next, total" :total="searchData.length"
                    :page-size="pages.size" pager-count="3" :current-page="pages.current"
                    @current-change="handleCurrentChange"></el-pagination>
@@ -101,9 +101,16 @@
         */
        viewerClick (e) {
            const that = this
            let layerName
            if (e.target && e.target != undefined && e.target.id && e.target.id.length) {
                if (this.$route.path == '/layout/video/list') {
                    layerName = 'treeValAllLayer'
                } else {
                    layerName = 'cameraLayers'
                }

                this.$EventBus.$emit('getOverLayerID', {
                    layerName: 'cameraLayers',
                    layerName,
                    ids: e.target.id,
                    cb (data) {
                        console.log(data, 456)

 src/styles/media/index.scss

@@ -2756,8 +2756,10 @@
            }

            .pages {
                display: flex;
                align-items: center;
                justify-content: center;
                height: countSizeVh(40);
                line-height: countSizeVh(40);

                &>div {
                    &>button {
@@ -2811,4 +2813,32 @@
        }
    }

    .all-pagination-sty {
        display: flex;
        align-items: center;
        justify-content: center;
        height: countSizeVh(40);

        &>div {

            &>button {
                width: countSizeVh(32);
                height: countSizeVh(32);

                &>i {
                    font-size: countSizeVh(16);
                }
            }

            &>ul {
                li {
                    width: countSizeVh(32);
                    height: countSizeVh(32);
                    line-height: countSizeVh(32);
                    font-size: countSizeVh(16);
                }
            }

        }
    }
}

 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: 2023-02-21 16:54:00
 * @LastEditTime: 2023-02-24 14:33:12
 * @FilePath: \srs-police-affairs\src\views\activity\index.vue
 * @Description: 安保活动
 *
@@ -22,11 +22,11 @@
                            v-model="activityType"
                            placeholder="请选择"
                            @change="activityTypeChange"
                                >
                                    <el-option
                                        v-for="item in activityOptions"
                                        :key="item.dictKey"
                                        :label="item.dictValue"
                                    >
                                        <el-option
                                            v-for="item in activityOptions"
                                            :key="item.dictKey"
                                            :label="item.dictValue"
                                :value="item.dictKey"
                                class="activity-option"
                            ></el-option>
@@ -38,12 +38,12 @@
                    <div class="category">选择时间：</div>
                    <div class="category-value">
                        <!-- <el-date-picker
                                    size="small"
                                    v-model="selectTime"
                                    type="date"
                                    placeholder="选择日期"
                                    style="width:268px"
                                ></el-date-picker>-->
                                        size="small"
                                        v-model="selectTime"
                                        type="date"
                                        placeholder="选择日期"
                                        style="width:268px"
                                    ></el-date-picker>-->
                        <el-date-picker v-model="selectTime" type="daterange" align="right" unlink-panels
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
@@ -90,7 +90,7 @@

                    <div v-show="activityList == 0" class="no-data">暂无数据</div>
                </div>
                <div class="pages">
                <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>
@@ -141,10 +141,10 @@
                    <ul>
                        <li>
                            <!-- <el-button
                                    title="路线绘制"
                                    @click="draw('billboard', 'policeman')"
                                    icon="el-icon-my-route"
                                    ></el-button>-->
                                        title="路线绘制"
                                        @click="draw('billboard', 'policeman')"
                                        icon="el-icon-my-route"
                                        ></el-button>-->
                            <button @click="draw('polyline', 'policecar')" title="巡逻路线">
                                <img src="../../../public/img/icon/route1.png" style="height:100%" />
                            </button>
@@ -1241,9 +1241,9 @@
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'monitoringLayers',
            type: 'VectorLayer'
        })
                layerName: 'monitoringLayers',
                type: 'VectorLayer'
            })
            if (item.activityArea && item.activityArea.length > 0) {
                let polyGonData = item.activityArea.slice(11, item.activityArea.length - 1)
                polyGonData = polyGonData.replace(/,/g, ";")
@@ -1617,8 +1617,8 @@
                this.lineEditVisible = false
            }
            this.$EventBus.$emit('mapRemoveLayer', {
              layerName: 'monitoringLayers',
              type: 'VectorLayer'
                layerName: 'monitoringLayers',
                type: 'VectorLayer'
            })
        },

@@ -1868,7 +1868,7 @@
        getRegionList (positionNewStr) {
            getRegionList({ page: 1, count: 15, range: positionNewStr }).then(res => {
                let monitorData = res.data.data.list
                this.initMonitoringIcon (monitorData) 
                this.initMonitoringIcon(monitorData)
                this.monitorOption = []
                monitorData.forEach((item, index) => {
                    let flvAddress = ''
@@ -1895,11 +1895,11 @@
        },

        // 关闭视频展示
        closeVideo(){
        closeVideo () {
            this.videoShow = false
            this.$EventBus.$emit('mapRemoveLayer', {
              layerName: 'monitoringLayers',
              type: 'VectorLayer'
                layerName: 'monitoringLayers',
                type: 'VectorLayer'
            })
        },

@@ -2794,4 +2794,5 @@
        cursor: pointer;
        z-index: 100;
    }
}</style>
}
</style>

 src/views/activity/index1.vue

@@ -17,73 +17,43 @@
                <div>
                    <div class="category">活动类型：</div>
                    <div class="category-value">
                        <el-select
                            size="small"
                            v-model="activityType"
                            placeholder="请选择"
                            @change="activityTypeChange"
                        >
                            <el-option
                                v-for="item in activityOptions"
                                :key="item.dictKey"
                                :label="item.dictValue"
                                :value="item.dictKey"
                                class="activity-option"
                            ></el-option>
                        </el-select>
                    </div>
                    <el-select size="small" v-model="activityType" placeholder="请选择" @change="activityTypeChange">
                        <el-option v-for="item in activityOptions" :key="item.dictKey" :label="item.dictValue"
                            :value="item.dictKey" class="activity-option"></el-option>
                    </el-select>
                </div>
            </div>

                <div>
                    <div class="category">选择时间：</div>
                    <div class="category-value">
                        <!-- <el-date-picker
                            size="small"
                            v-model="selectTime"
                            type="date"
                            placeholder="选择日期"
                            style="width:268px"
                        ></el-date-picker>-->
                        <el-date-picker
                            v-model="selectTime"
                            type="daterange"
                            align="right"
                            unlink-panels
                            format="yyyy-MM-dd HH:mm:ss"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            :picker-options="pickerOptions"
                            @change="activityTimeChange"
                        ></el-date-picker>
                                    size="small"
                                    v-model="selectTime"
                                    type="date"
                                    placeholder="选择日期"
                                    style="width:268px"
                                ></el-date-picker>-->
                        <el-date-picker v-model="selectTime" type="daterange" align="right" unlink-panels
                            format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至"
                            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"
                            @change="activityTimeChange"></el-date-picker>
                    </div>
                </div>

                <div>
                    <div class="category">活动名称：</div>
                    <div class="category-value">
                        <input
                            type="text"
                            placeholder="请输入活动名称"
                            v-model="searchActivity"
                            class="category-input"
                            @input="inputChange"
                        />
                        <input type="text" placeholder="请输入活动名称" v-model="searchActivity" class="category-input"
                            @input="inputChange" />
                        <button class="category-button el-icon-search" @click="searchClick"></button>
                    </div>
                </div>
            </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)"
                    >
                    <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)">
                        <div class="row-title">常规安保</div>
                        <div class="row-content">
                            <div>
@@ -96,9 +66,7 @@
                            </div>
                            <div>
                                <div class="category">活动时间：</div>
                                <div
                                    class="category-value"
                                >{{ item.startTime }} 至 {{ item.endTime }}</div>
                                <div class="category-value">{{ item.startTime }} 至 {{ item.endTime }}</div>
                            </div>
                            <div>
                                <div class="category">活动详情：</div>
@@ -109,15 +77,9 @@

                    <div v-show="activityList == 0" class="no-data">暂无数据</div>
                </div>
                <div class="pages">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="pagesize"
                        :page-count="pagesCount"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                <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>
@@ -176,11 +138,7 @@
                <span>撤离路线：</span>
                <ul>
                    <li>
                        <el-button
                            title="路线绘制"
                            @click="draw('billboard', 'policeman')"
                            icon="el-icon-my-route"
                        ></el-button>
                        <el-button title="路线绘制" @click="draw('billboard', 'policeman')" icon="el-icon-my-route"></el-button>
                    </li>
                </ul>
            </div>
@@ -201,19 +159,52 @@
                <div class="category-value">{{ activityDetails.name }}</div>
            </div>

            <div class="row-box">
                <div class="category">活动时间：</div>
                <div
                    class="category-value"
                >{{ activityDetails.startTime }} 至 {{ activityDetails.endTime }}</div>
        <div class="row-box">
            <div class="category">活动时间：</div>
            <div class="category-value">{{ activityDetails.startTime }} 至 {{ activityDetails.endTime }}</div>
        </div>

        <div class="row-box">
            <div class="category">活动内容1：</div>
            <div class="category-value">{{ activityDetails.content }}</div>
        </div>

        <!-- <div class="row-box">
                <div class="category">应急预案：</div>
                <div class="category-value">
                    <el-switch v-model="polylineSwitch" @change="switchChange" active-color="#13ce66"
                                inactive-color="#ccc"></el-switch>
                        </div>
            </div>

            <div class="row-box">
                <div class="category">活动内容1：</div>
                <div class="category-value">{{ activityDetails.content }}</div>
            </div>
                <div class="category">巡逻路线：</div>
                <div class="category-value">
                    <el-switch v-model="polylineBtnSwitch" @change="switchBtnChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                </div>
            </div>-->

            <!-- <div class="row-box">
        <!-- <div class="row-box">
                        <div class="category">分析范围：</div>
                        <div class="category-value">
                            <el-input
                                @input="analyseChange"
                                size="mini"
                                type="number"
                                v-model="analyseInput"
                                placeholder="请输入范围"
                            ></el-input>
                        </div>
                    </div>-->

            <div class="row-box">
                <el-button @click="arrangeDraw">预案布置</el-button>
            </div>
        </div>

        <div class="plan-control">
            <div class="row-box">
                <div class="category">应急预案：</div>
                <div class="category-value">
                    <el-switch v-model="polylineSwitch" @change="switchChange" active-color="#13ce66"
@@ -226,49 +217,6 @@
                <div class="category-value">
                    <el-switch v-model="polylineBtnSwitch" @change="switchBtnChange" active-color="#13ce66"
                        inactive-color="#ccc"></el-switch>
                </div>
            </div>-->

            <!-- <div class="row-box">
                <div class="category">分析范围：</div>
                <div class="category-value">
                    <el-input
                        @input="analyseChange"
                        size="mini"
                        type="number"
                        v-model="analyseInput"
                        placeholder="请输入范围"
                    ></el-input>
                </div>
            </div>-->

            <div class="row-box">
                <el-button @click="arrangeDraw">预案布置</el-button>
            </div>
        </div>

        <div class="plan-control">
            <div class="row-box">
                <div class="category">应急预案：</div>
                <div class="category-value">
                    <el-switch
                        v-model="polylineSwitch"
                        @change="switchChange"
                        active-color="#13ce66"
                        inactive-color="#ccc"
                    ></el-switch>
                </div>
            </div>

            <div class="row-box">
                <div class="category">巡逻路线：</div>
                <div class="category-value">
                    <el-switch
                        v-model="polylineBtnSwitch"
                        @change="switchBtnChange"
                        active-color="#13ce66"
                        inactive-color="#ccc"
                    ></el-switch>
                </div>
            </div>
        </div>
@@ -299,22 +247,12 @@
            </ul>
        </div>

        <el-dialog
            :title="policeChooseTitle"
            :modal="true"
            :visible.sync="policeChooseVisible"
            :before-close="policeChooseBeforeClose"
            :close-on-click-modal="true"
            class="choose-police-box"
        >
        <el-dialog :title="policeChooseTitle" :modal="true" :visible.sync="policeChooseVisible"
            :before-close="policeChooseBeforeClose" :close-on-click-modal="true" class="choose-police-box">
            <div>
                <el-select size="small" v-model="policeType" placeholder="请选择">
                    <el-option
                        v-for="item in policeOption"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    ></el-option>
                    <el-option v-for="item in policeOption" :key="item.value" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
                <el-button @click="determine">确定</el-button>
                <el-button @click="cancel">取消</el-button>
@@ -1215,11 +1153,11 @@
        .search-box {
            padding: 0 10px;

            & > div:first-child {
            &>div:first-child {
                margin-top: 0;
            }

            & > div {
            &>div {
                margin-top: 10px;
                display: flex;
                align-items: center;
@@ -1294,7 +1232,7 @@
                    font-size: 14px;

                    .row-content {
                        & > div {
                        &>div {
                            display: flex;
                            line-height: 28px;

@@ -1356,7 +1294,7 @@
        white-space: nowrap;
        transform: translate(-50%, 0);

        & > div {
        &>div {
            display: flex;
        }

@@ -1445,7 +1383,7 @@
            line-height: 28px;
            display: flex;

            & > div {
            &>div {
                text-align: left;
            }

@@ -1467,12 +1405,13 @@
        padding: 10px;
        color: #fff;
        background-color: $bg-color;

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

            & > div {
            &>div {
                text-align: left;
            }


 src/views/home/components/bottomContainer.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2023-01-13 15:52:59
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-21 17:20:18
 * @LastEditTime: 2023-02-24 14:35:04
 * @FilePath: \srs-police-affairs\src\views\home\components\bottomContainer.vue
 * @Description: 
 * 
@@ -14,81 +14,32 @@
            <div class="header">
                <div class="bottom-title">警情动态</div>
                <div class="timeTab" v-show="historytype">
                    <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 == 2 }"
                        @click="timeTabClick(2)"
                    >自定义</span>
                    <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 == 2 }" @click="timeTabClick(2)">自定义</span>
                </div>

                <div class="timeSeclect" v-show="historytype">
                    <el-date-picker
                        v-show="timetype == 0"
                        v-model="currentWeekTime"
                        @change="datePickerChange"
                        type="week"
                        align="center"
                        format="yyyy 第 WW 周"
                        placeholder="选择周"
                        popper-class="date-week-style"
                    ></el-date-picker>
                    <el-date-picker v-show="timetype == 0" v-model="currentWeekTime" @change="datePickerChange" type="week"
                        align="center" format="yyyy 第 WW 周" placeholder="选择周"
                        popper-class="date-week-style"></el-date-picker>

                    <el-date-picker
                        v-show="timetype == 1"
                        v-model="currentMonthTime"
                        @change="datePickerChange"
                        type="month"
                        align="center"
                        placeholder="选择月"
                        popper-class="date-mouth-style"
                    ></el-date-picker>
                    <el-date-picker v-show="timetype == 1" v-model="currentMonthTime" @change="datePickerChange"
                        type="month" align="center" placeholder="选择月" popper-class="date-mouth-style"></el-date-picker>

                    <el-date-picker
                        v-show="timetype == 2"
                        :clearable="false"
                        v-model="currentTime"
                        type="daterange"
                        align="center"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="datePickerChange"
                        :picker-options="pickerOptions"
                        popper-class="date-day-style"
                    ></el-date-picker>
                    <el-date-picker v-show="timetype == 2" :clearable="false" v-model="currentTime" type="daterange"
                        align="center" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                        @change="datePickerChange" :picker-options="pickerOptions"
                        popper-class="date-day-style"></el-date-picker>
                </div>

                <div class="history-tab">
                    <span
                        class="beforetime"
                        :class="{ choosed: historytype == 0 }"
                        @click="historyTabClick(0)"
                    >实时</span>
                    <span
                        class="beforetime"
                        :class="{ choosed: historytype == 1 }"
                        @click="historyTabClick(1)"
                    >历史</span>
                    <span class="beforetime" :class="{ choosed: historytype == 0 }" @click="historyTabClick(0)">实时</span>
                    <span class="beforetime" :class="{ choosed: historytype == 1 }" @click="historyTabClick(1)">历史</span>
                </div>
            </div>

            <div
                class="body"
                v-if="historytype == 0"
                ref="tableBox"
                @click="handleSelectClick($event)"
            >
            <div class="body" v-if="historytype == 0" ref="tableBox" @click="handleSelectClick($event)">
                <ul class="title-header">
                    <li>
                        <span class="num">序号</span>
@@ -104,27 +55,16 @@
                    </li>
                </ul>

                <vue-seamless-scroll
                    v-if="policeSituationRealtimeArr.length > 0"
                    :data="policeSituationRealtimeArr"
                    class="warp"
                    :class-option="classOption"
                >
                <vue-seamless-scroll v-if="policeSituationRealtimeArr.length > 0" :data="policeSituationRealtimeArr"
                    class="warp" :class-option="classOption">
                    <ul class="item">
                        <li
                            v-for="(item, index) in policeSituationRealtimeArr"
                            :key="index"
                            :data-obj="JSON.stringify(item)"
                            class="row"
                        >
                        <li v-for="(item, index) in policeSituationRealtimeArr" :key="index"
                            :data-obj="JSON.stringify(item)" class="row">
                            <span class="num" v-text="item.index"></span>
                            <span class="receiving-alarm-unit" v-text="item.JJDWMC"></span>
                            <span class="receiving-alarm-people" v-text="item.JJYXM"></span>
                            <span
                                class="receiving-alarm-time"
                                :title="item.BJSJ"
                                v-text="item.BJSJ.substring(0, 10)"
                            ></span>
                            <span class="receiving-alarm-time" :title="item.BJSJ"
                                v-text="item.BJSJ.substring(0, 10)"></span>
                            <span class="call-people" v-text="item.BJRXM"></span>
                            <span class="call-phone" v-text="item.LXDH"></span>
                            <span class="call-police-content" :title="item.BJNR" v-text="item.BJNR"></span>
@@ -139,133 +79,60 @@
            </div>

            <div class="current-table-body" ref="ElTableBox" v-if="historytype == 1">
                <el-table
                    :data="policeSituationHistoryArr"
                    :key="currentPage"
                    style="width: 100%"
                <el-table :data="policeSituationHistoryArr" :key="currentPage" style="width: 100%"
                    :height="currentTableHeight"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': 'rgba(9, 40, 199, 0.5)', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    @cell-click="rowClick"
                >
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="index"
                        label="序号"
                        min-width="6%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="JJDWMC"
                        label="接警单位"
                        min-width="12.6%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="JJYXM"
                        label="接警员"
                        min-width="7.6%"
                    ></el-table-column>
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                    <el-table-column :show-overflow-tooltip="true" prop="index" label="序号" min-width="6%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="JJDWMC" label="接警单位"
                        min-width="12.6%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="JJYXM" label="接警员"
                        min-width="7.6%"></el-table-column>
                    <el-table-column label="报警时间" min-width="9.6%">
                        <template slot-scope="scope">
                            <span>{{ scope.row.BJSJ.substring(0, 10) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="BJRXM"
                        label="报警人"
                        min-width="7.6%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="LXDH"
                        label="联系电话"
                        min-width="10%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="BJNR"
                        label="报警内容"
                        min-width="12%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="SFDZ"
                        label="事发地址"
                        min-width="12%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="BJLX"
                        label="报警类型"
                        min-width="8%"
                    ></el-table-column>
                    <el-table-column
                        :show-overflow-tooltip="true"
                        prop="MEMO"
                        label="备注"
                        min-width="12%"
                    ></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="BJRXM" label="报警人"
                        min-width="7.6%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="LXDH" label="联系电话"
                        min-width="10%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="BJNR" label="报警内容"
                        min-width="12%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="SFDZ" label="事发地址"
                        min-width="12%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="BJLX" label="报警类型"
                        min-width="8%"></el-table-column>
                    <el-table-column :show-overflow-tooltip="true" prop="MEMO" label="备注" min-width="12%"></el-table-column>
                </el-table>

                <div class="pages" ref="ElPagination" v-if="policeSituationHistoryArr.length > 0">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="pagesize"
                        :page-count="pagesCount"
                        :current-page="currentPage"
                        @current-change="handleCurrentChange"
                    ></el-pagination>
                <div class="pages all-pagination-sty" ref="ElPagination" v-if="policeSituationHistoryArr.length > 0">
                    <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
                        :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>
        </div>

        <svg class="border-svg">
            <defs>
                <path
                    id="bottom-box-path"
                    d="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
    c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25
    c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10
    c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20
    c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z"
                    fill="transparent"
                />
                <path id="bottom-box-path"
                    d="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z"
                    fill="transparent" />
                <radialGradient id="border-box-gradient" cx="50%" cy="50%" r="50%">
                    <stop offset="0%" stop-color="#fff" stop-opacity="1" />
                    <stop offset="100%" stop-color="#fff" stop-opacity="0" />
                </radialGradient>
                <mask id="border-box-mask">
                    <circle cx="0" cy="0" r="150" fill="url(#border-box-gradient)">
                        <animateMotion
                            dur="8s"
                            path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0
    c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25
    c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10
    c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20
    c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z"
                            rotate="auto"
                            repeatCount="indefinite"
                        />
                        <animateMotion dur="8s"
                            path="M0,0c56.33,0,112.67,0,169,0c2.5,4.31,6.95,6.19,11,9c0.67,1,1.33,2,2,3c16.33,0,32.67,0,49,0c55.99,0,112.01,0,168,0c238.64,0,477.36,0,716,0c1.01,1.73,4.64,4.26,5,5c0,20,0,40,0,60c0,49,0,98,0,147c-0.89,1.52,0,19.4,0,25c0,22.33,0,44.67,0,67c-1.43,0.78-4.01,2.77-5,4c-13,0-26,0-39,0c-3-3.33-6-6.67-9-10c-22,0-44,0-66,0c-2.26,3.84-6.72,5.26-8,10c-241.98,0-484.02,0-726,0c-64.33,0-128.67,0-193,0c-17,0-34,0-51,0c-5.68,0-16.19,1.49-20-1c-4.4-2.88-3-12.84-3-20c0-19.33,0-38.67,0-58C0,160.67,0,80.33,0,0z"
                            rotate="auto" repeatCount="indefinite" />
                    </circle>
                </mask>
            </defs>

            <use
                stroke-width="2"
                xlink:href="#bottom-box-path"
                mask="url(#border-box-mask)"
                stroke="#4fd2dd"
            >
                <animate
                    attributeName="stroke-dasharray"
                    from="0, 3220"
                    to="3220, 0"
                    dur="8s"
                    repeatCount="indefinite"
                />
            <use stroke-width="2" xlink:href="#bottom-box-path" mask="url(#border-box-mask)" stroke="#4fd2dd">
                <animate attributeName="stroke-dasharray" from="0, 3220" to="3220, 0" dur="8s" repeatCount="indefinite" />
            </use>
        </svg>
    </div>
@@ -427,6 +294,8 @@
        // 时间改变事件
        datePickerChange (e) {
            // this.timetype
            this.currentPage = 1

            if (this.timetype == 0) {

                this.getAlarmList({ type: this.timetype, time: this.dateFormat(e), current: this.currentPage })

 src/views/home/components/schedulingList.vue

@@ -2,7 +2,7 @@
    <!-- 值班table -->
    <div>
        <el-dialog :title="schedulingTitle" :modal="true" :visible.sync="schedulingVisible"
            :before-close="schedulingBeforeClose" :close-on-click-modal="true"  class="area-details-box">
            :before-close="schedulingBeforeClose" :close-on-click-modal="true" class="area-details-box">
            <div class="header">
                <div>
                    <span>值班人：</span>
@@ -32,7 +32,7 @@
                <el-table-column :show-overflow-tooltip="true" prop="leadContact" label="带班领导电话"></el-table-column>
            </el-table>

            <div class="pages">
            <div class="pages all-pagination-sty">
                <el-pagination background layout="prev, pager, next, total" :page-size="page.pageSize" :total="page.total"
                    :current-page="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
            </div>
@@ -43,7 +43,7 @@
import { getSchedulingList } from '@/api/home/index'
export default {
    name: "schedulingList",
    data() {
    data () {
        return {
            person: '',
            contact: '',
@@ -60,26 +60,26 @@
            },
            schedulingVisible: false,
            schedulingTitle: '',
            dept:''
            dept: ''
        }
    },
    methods: {
        //初始化
        init(data) {
            this.schedulingVisible = true;
            this.schedulingTitle = data.name + "值班信息";
            this.dept = data.dept;
        init (data) {
            this.schedulingVisible = true
            this.schedulingTitle = data.name + "值班信息"
            this.dept = data.dept
            this.getSchedulingtPaging()
        },
        /**
         * @description:列表弹窗关闭的事件
         * @return {*}
         */
        schedulingBeforeClose() {
        schedulingBeforeClose () {
            this.page.currentPage = 1
            this.person = '';
            this.contact = '';
            this.dept = "";
            this.person = ''
            this.contact = ''
            this.dept = ""
            this.schedulingTableData = []
            this.schedulingVisible = false
        },
@@ -87,7 +87,7 @@
         * @description: 值班查询
         * @return {*}
         */
        searchScheduling() {
        searchScheduling () {
            this.page.currentPage = 1
            this.getSchedulingtPaging()
        },
@@ -96,7 +96,7 @@
         * @description: 值班查询清空
         * @return {*}
         */
        clearSearchScheduling() {
        clearSearchScheduling () {
            this.page.currentPage = 1
            this.person = ''
            this.contact = ''
@@ -109,12 +109,12 @@
        },

        // 获取值班分页数据
        getSchedulingtPaging(params = {}) {
        getSchedulingtPaging (params = {}) {
            var values = {
                sameday:1,
                sameday: 1,
                person: this.person,
                contact: this.contact,
                dept:this.dept
                dept: this.dept
            }
            getSchedulingList(
                this.page.currentPage,
@@ -133,7 +133,7 @@
</script>

<style scoped lang="scss">
.global-dialog-seat{
.global-dialog-seat {
    height: countSizeVh(700);
}
</style>

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-24 09:23:40
 * @LastEditTime: 2023-02-24 17:21:13
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -39,11 +39,11 @@
                <el-checkbox v-model="cameraLayerShow" @change="cameraChange">摄像头</el-checkbox>
            </div>
            <!-- <div class="layers-control-btn moitor">
                                            <el-checkbox v-model="monitoringLayerShow" @change="monitoringChange">监控</el-checkbox>
                                        </div>
                                        <div class="layers-control-btn panorama">
                                            <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
                                        </div> -->
                                                        <el-checkbox v-model="monitoringLayerShow" @change="monitoringChange">监控</el-checkbox>
                                                    </div>
                                                    <div class="layers-control-btn panorama">
                                                        <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
                                                    </div> -->
            <div class="layers-control-btn police-situation">
                <el-checkbox v-model="policeSituationLayerShow" @change="policeSituationChange">警情</el-checkbox>
            </div>
@@ -118,7 +118,7 @@
                <el-table-column :show-overflow-tooltip="true" prop="areaName" label="所属责任区"></el-table-column>
            </el-table>

            <div class="pages" ref="tablePagination">
            <div class="pages all-pagination-sty" ref="tablePagination">
                <el-pagination background layout="prev, pager, next, total" :page-size="peoplePage.pageSize"
                    :total="peoplePage.total" :current-page="peoplePage.currentPage"
                    @current-change="handlePeopleCurrentChange"></el-pagination>
@@ -157,7 +157,7 @@
                <el-table-column :show-overflow-tooltip="true" prop="areaName" label="所属责任区"></el-table-column>
            </el-table>

            <div class="pages" ref="tablePagination">
            <div class="pages all-pagination-sty" ref="tablePagination">
                <el-pagination background layout="prev, pager, next, total" :page-size="peoplePage.pageSize"
                    :total="peoplePage.total" :current-page="peoplePage.currentPage"
                    @current-change="handlePersonPageChange"></el-pagination>
@@ -204,7 +204,7 @@
                </el-table-column>
            </el-table>

            <div class="pages">
            <div class="pages all-pagination-sty">
                <el-pagination background layout="prev, pager, next, total" :total="equimentPagingTotal"
                    :page-size="pagesize" pager-count="3" :current-page="currentPage"
                    @current-change="handleCurrentChange"></el-pagination>
@@ -246,7 +246,7 @@
                <el-table-column :show-overflow-tooltip="true" prop="phone" label="联系电话"></el-table-column>
            </el-table>

            <div class="pages" ref="tablePagination">
            <div class="pages all-pagination-sty" ref="tablePagination">
                <el-pagination background layout="prev, pager, next, total" :total="landPage.total"
                    :page-size="landPage.pageSize" :current-page="landPage.currentPage"
                    @current-change="landHandleCurrentChange"></el-pagination>
@@ -657,7 +657,7 @@

    mounted () {
        this.$nextTick(() => {
            circleLayer = new global.DC.VectorLayer('circleLayer')
            circleLayer = new global.DC.PrimitiveLayer('circleLayer')
            global.viewer.addLayer(circleLayer)

            document.querySelector('.dc-container .dc-zoom-controller').classList.add('homebottom')

 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: 2023-02-24 11:18:06
 * @LastEditTime: 2023-02-24 17:20:51
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -140,9 +140,9 @@
                                <div class="two">
                                    <div>
                                        <div>98</div>
                                                                                                                                                                        <div>户籍人口</div>
                                                                                                                                                                    </div>
                                                                                                                                                                    <div>
                                                                                                                                                                                <div>户籍人口</div>
                                                                                                                                                                            </div>
                                                                                                                                                                            <div>
                                        <div style="color:#0E88FF">20</div>
                                        <div>流动人口</div>
                                    </div>
@@ -164,17 +164,17 @@
                                <div>
                                    <div>120</div>
                                    <div>出租</div>
                                                                                                                                                                </div>
                                                                                                                                                                <div>
                                                                                                                                                                    <div>160</div>
                                                                                                                                                                    <div>自住</div>
                                                                                                                                                                </div>
                                                                                                                                                                <div>
                                                                                                                                                                    <div>8</div>
                                                                                                                                                                    <div>空置</div>
                                                                                                                                                                </div>
                                                                                                                                                            </div>
                                                                                                                                                        </div>-->
                                                                                                                                                                        </div>
                                                                                                                                                                        <div>
                                                                                                                                                                            <div>160</div>
                                                                                                                                                                            <div>自住</div>
                                                                                                                                                                        </div>
                                                                                                                                                                        <div>
                                                                                                                                                                            <div>8</div>
                                                                                                                                                                            <div>空置</div>
                                                                                                                                                                        </div>
                                                                                                                                                                    </div>
                                                                                                                                                                </div>-->
                        <div class="house-element-info" v-if="isShowHouseBox">
                        <!-- 选择单元 -->
                        <div class="condo" v-show="isShowUnitChoose">
@@ -219,17 +219,17 @@
                                    <div>
                                        <span class="zizhu"></span>
                                        自住
                                                                                                                                                                    </div>
                                                                                                                                                                    <div>
                                                                                                                                                                        <span class="kongzhi"></span>
                                                                                                                                                                        空置
                                                                                                                                                                    </div>
                                                                                                                                                                    <div>
                                                                                                                                                                        <span class="shangye"></span>
                                                                                                                                                                        商业
                                                                                                                                                                    </div>
                                                                                                                                                                </div>
                                                                                                                                                            </div>-->
                                                                                                                                                                            </div>
                                                                                                                                                                            <div>
                                                                                                                                                                                <span class="kongzhi"></span>
                                                                                                                                                                                空置
                                                                                                                                                                            </div>
                                                                                                                                                                            <div>
                                                                                                                                                                                <span class="shangye"></span>
                                                                                                                                                                                商业
                                                                                                                                                                            </div>
                                                                                                                                                                        </div>
                                                                                                                                                                    </div>-->
                            <el-main v-loading="pictLoading" element-loading-background="rgba(17, 38, 163, .1)"
                                element-loading-text="数据正在加载中" element-loading-spinner="el-icon-loading"
                                v-show="isShowHouseBox">
@@ -266,8 +266,8 @@
                                                <!-- :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]" -->
                                                {{ value.properties.fojcu }}
                                                <!-- <div class="flow"></div>
                                                                                                                                                                            <div class="focus"></div>
                                                                                                                                                                                <div class="warning"></div>-->
                                                                                                                                                                                    <div class="focus"></div>
                                                                                                                                                                                        <div class="warning"></div>-->
                                            </div>
                                        </div>
                                    </div>
@@ -332,7 +332,7 @@
                            min-width="20%"></el-table-column>
                    </el-table>

                    <div class="pages" ref="ElPagination">
                    <div class="pages all-pagination-sty" ref="ElPagination">
                        <el-pagination background layout="prev, pager, next" :page-size="callPolicePage.pageSize"
                            :page-count="callPolicePage.count" :current-page="callPolicePage.currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
@@ -459,7 +459,7 @@
                <el-table-column prop="policeStationName" label="所属派出所"></el-table-column>
                <el-table-column prop="areaName" label="所属责任区"></el-table-column>
            </el-table>
            <div class="pages" ref="tablePagination">
            <div class="pages all-pagination-sty" ref="tablePagination">
                <el-pagination background layout="prev, pager, next" :page-size="peoplePage.pageSize"
                    :total="peoplePage.total" :current-page="peoplePage.currentPage"
                    @current-change="peopleHandleCurrentChange"></el-pagination>
@@ -679,7 +679,7 @@
        this.$parent.$parent.resize('400px', true)

        this.$nextTick(() => {
            circleLayer = new global.DC.VectorLayer('circleLayer')
            circleLayer = new global.DC.PrimitiveLayer('circleLayer')
            global.viewer.addLayer(circleLayer)

            this.searchHouse = this.$route.query.searchName

 src/views/police/index.vue

@@ -54,7 +54,7 @@
                        </el-table-column>
                    </el-table>

                    <div class="pages" ref="tablePagination">
                    <div class="pages all-pagination-sty" ref="tablePagination">
                        <el-pagination background layout="prev, pager, next" :page-size="equimentPage.pageSize"
                            :page-count="equimentPage.count" :pager-count="4" :current-page="equimentPage.currentPage"
                            @current-change="handleCurrentChange"></el-pagination>

 src/views/policeInfor/index.vue

@@ -2,8 +2,8 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-21 16:54:24
 * @FilePath: \srs-police-affairs\src\views\police\index.vue
 * @LastEditTime: 2023-02-24 17:34:13
 * @FilePath: \srs-police-affairs\src\views\policeInfor\index.vue
 * @Description: 辖区管理
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
@@ -11,650 +11,615 @@

<template>
    <div class="police-page container">
        <div v-show="boxShow" class="container-content">
            <div class="switch-box" v-show="!detailFlag">
                资源类别：
                <el-select v-model="typeValue" @change="navClick" placeholder="请选择" class="type-select-css">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                        class="option-css"></el-option>
                </el-select>
        <div v-show="boxShow" class="container-content" ref="containerContent">

            <div class="nav-tab" ref="navTabBox">
                <div class="nav" :class="navType == 0 ? 'choosed' : ''" @click="navClick(0)">实时警情</div>
                <div class="nav" :class="navType == 1 ? 'choosed' : ''" @click="navClick(1)">历史警情</div>
            </div>

            <div class="list-show" v-if="!detailFlag">
                <div class="search-box">
                    资源名称：
                    <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入…" />
                </div>
            <div class="time-select" v-show="navType == 1" ref="timeSelect">
                <el-date-picker :clearable="false" v-model="currentTime" type="daterange" align="center" unlink-panels
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="datePickerChange"
                    :picker-options="pickerOptions" popper-class="date-day-style"></el-date-picker>
            </div>

                <div class="list" ref="tableBox">
                    <el-table :data="equimentTableData"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', borderColor: '#324e75' }"
                        :cell-style="{ 'text-align': 'center', borderColor: '#324e75', cursor: 'pointer' }"
                        :height="currentTableHeight">
                        <el-table-column prop="newName" :show-overflow-tooltip="true" label="名称"
                            :min-width="typeValue == 0 ? '56%' : '68%'"></el-table-column>
                        <el-table-column prop="status" label="状态" :min-width="typeValue == 0 ? '14%' : '14%'">
                            <template slot-scope="scope">
                                <div class="state-box" :class="{ online: scope.row.status == '1' }"></div>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" align="center" :min-width="typeValue == 0 ? '30%' : '18%'">
                            <template slot-scope="scope">
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                    <i class="el-icon-location"></i>
                                </el-button>
                                <el-button v-show="navType == 0" @click="equipmentTrack(scope.row)" type="text" size="small"
                                    title="轨迹">
                                    <i class="el-icon-position"></i>
                                </el-button>
                                <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                                    <i class="el-icon-video-play"></i>
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
            <div v-if="navType == 0" class="police-info">
                <el-table :data="realPoliceInforData" style="width: 100%" :height="currentTableHeight"
                    :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="JJDWMC" :show-overflow-tooltip="true" label="接警单位"
                        min-width="34%"></el-table-column>
                    <el-table-column label="报警时间" min-width="26%">
                        <template slot-scope="scope">
                            <span>{{ scope.row.BJSJ.substring(0, 10) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="JJYXM" :show-overflow-tooltip="true" label="接警员"
                        min-width="20%"></el-table-column>
                    <el-table-column prop="BJRXM" :show-overflow-tooltip="true" label="报警人"
                        min-width="20%"></el-table-column>
                </el-table>
            </div>

                    <div class="pages" ref="tablePagination">
                        <el-pagination background layout="prev, pager, next" :page-size="equimentPage.pageSize"
                            :page-count="equimentPage.count" :pager-count="4" :current-page="equimentPage.currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>

            <div v-else class="police-info">
                <el-table :data="historyPoliceInforData" style="width: 100%" :height="currentTableHeight"
                    :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="JJDWMC" :show-overflow-tooltip="true" label="接警单位"
                        min-width="34%"></el-table-column>
                    <el-table-column label="报警时间" min-width="26%">
                        <template slot-scope="scope">
                            <span>{{ scope.row.BJSJ.substring(0, 10) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="JJYXM" :show-overflow-tooltip="true" label="接警员"
                        min-width="20%"></el-table-column>
                    <el-table-column prop="BJRXM" :show-overflow-tooltip="true" label="报警人"
                        min-width="20%"></el-table-column>
                </el-table>

                <div class="pages all-pagination-sty" ref="ElPagination">
                    <el-pagination background layout="prev, pager, next" :page-size="pages.size" :total="pages.total"
                        :current-page="pages.current" :pager-count="3"
                        @current-change="handleCurrentChange"></el-pagination>
                </div>
            </div>

            <div class="track-box" v-show="detailFlag">
                <div class="track-box-info">
                    <div class="back-btn" @click="goBack" title="轨迹">详细资料及轨迹查询</div>
                    <ul>
                        <li>
                            <div>通道编号：</div>
                            <div>{{ currentSelectEquipment.channelId ? currentSelectEquipment.channelId : '' }}</div>
                        </li>
        </div>

                        <li>
                            <div>设备编号：</div>
                            <div>{{ currentSelectEquipment.deviceId ? currentSelectEquipment.deviceId : '' }}</div>
                        </li>
        <el-dialog title="报警信息" :modal="true" :visible.sync="policeSituationVisible" :append-to-body="true"
            :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box">
            <div class="box">
                <div class="item">
                    <div>接警单位编号:</div>
                    <div>{{ policeSituationDetailObj.JJDWBH }}</div>
                </div>
                <div class="item">
                    <div>接警单位名称:</div>
                    <div>{{ policeSituationDetailObj.JJDWMC }}</div>
                </div>
                <div class="item">
                    <div>接警单编号:</div>
                    <div>{{ policeSituationDetailObj.JJDBH }}</div>
                </div>
                <div class="item">
                    <div>接警员编号:</div>
                    <div>{{ policeSituationDetailObj.JJYBH }}</div>
                </div>
                <div class="item">
                    <div>接警员姓名:</div>
                    <div>{{ policeSituationDetailObj.JJYXM }}</div>
                </div>
                <div class="item">
                    <div>报警时间:</div>
                    <div>{{ policeSituationDetailObj.BJSJ }}</div>
                </div>
                <div class="item">
                    <div>报警电话:</div>
                    <div>{{ policeSituationDetailObj.LXDH }}</div>
                </div>
                <div class="item">
                    <div>报警人姓名:</div>
                    <div>{{ policeSituationDetailObj.BJRXM }}</div>
                </div>
                <div class="item">
                    <div>报警类别:</div>
                    <div>{{ policeSituationDetailObj.BJLB }}</div>
                </div>

                        <li>
                            <div>通道名称：</div>
                            <div>{{ currentSelectEquipment.name ? currentSelectEquipment.name : '' }}</div>
                        </li>
                <div class="item">
                    <div>报警类型:</div>
                    <div>{{ policeSituationDetailObj.BJLX }}</div>
                </div>

                        <li>
                            <div>状态：</div>
                            <div>
                                {{
                                    currentSelectEquipment.status ? (currentSelectEquipment.status == 0 ? '离线' : '在线') :
                                    ''
                                }}
                            </div>
                        </li>
                <div class="dialog-content">
                    <div>事发地址:</div>
                    <div>{{ policeSituationDetailObj.SFDZ }}</div>
                </div>

                        <li>
                            <div>选择时间：</div>
                            <div class="datetime">
                                <el-date-picker v-model="trackTime" type="daterange" unlink-panels range-separator="至"
                                    start-placeholder="开始日期" size="mini" :editable="false"
                                    end-placeholder="结束日期"></el-date-picker>
                            </div>
                        </li>
                <div class="dialog-content">
                    <div>报警内容:</div>
                    <div>{{ policeSituationDetailObj.BJNR }}</div>
                </div>

                        <li>
                            <el-button type="text" @click="lookTrack">查看轨迹</el-button>
                        </li>
                    </ul>
                <div class="dialog-content">
                    <div>备注:</div>
                    <div>{{ policeSituationDetailObj.MEMO }}</div>
                </div>
            </div>
        </div>

        <div class="search-content">
            <input v-model="searchExtensivelyValue" @input="searchExtensivelyChange" @focus="searchExtensivelyFocus"
                type="text" placeholder="请输入搜索条件" />
            <div class="clear" v-show="isShowClearBtn" @click="clearSearchValue" title="清空">
                <img src="../../../public/img/icon/clear.png" alt />
            </div>
            <button @click="searchExtensivelyClick" class="el-icon-search"></button>
        </div>

        <div v-show="searchExtensivelyValBoxShow" class="searchExtensively-val-box">
            <div>
                <div @click="searchExtensivelyVlaClick(item)" v-for="(item, index) in searchExtensivelyArray" :key="index">
                    {{ item.name }}</div>
            </div>
        </div>

        <el-dialog :title="dialogTitle" :modal="false" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <video autoplay controls width="100%" height="100%" ref="videoElement" id="videoElement"
                style="object-fit: fill"></video>
        </el-dialog>
    </div>
</template>

<script>
import { getHistoricalTrack } from '@/api/police/index.js'
import { getSearchExtensively } from '@/api/dept/index.js'
import { getDevices } from '@/api/video/index.js'
import flvjs from 'flv.js'
import { getEquipmentPaging } from '@/api/home/index.js'
let policeInforSiteLayer = null
let timer = []

let tc = null
let track = null
import { getAnswerPolices, getAlarmList } from "@/api/home/index.js"

export default {
    inject: ['userInfo'],

    data () {
        return {
            navType: 0,
            dialogTitle: '',
            dialogVisible: false,
            searchValue: '',
            currentTableHeight: 0,
            detailFlag: false,
            trackTime: [],
            options: [
                {
                    value: '0',
                    label: '警车'
                },
                {
                    value: '1',
                    label: '摄像头'
                }
                // , {
                //     value: '3',
                //     label: '电台'
                // }, {
                //     value: '4',
                //     label: '执法记录仪'
                // }
            ],
            typeValue: '0',
            boxShow: true,
            searchExtensivelyValue: '',
            searchExtensivelyValBoxShow: false,
            searchExtensivelyArray: [],
            flvPlayer: null,

            equimentTableData: [],
            equimentPage: {
            realPoliceInforData: [], // 实时
            historyPoliceInforData: [],
            boxShow: false,
            pages: {
                total: 0,
                pageSize: 25,
                count: 0,
                currentPage: 1
                size: 15,
                current: 1
            },

            currentSelectEquipment: {}
            navType: 0,
            currentTableHeight: 0,
            currentTime: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近一个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        picker.$emit('pick', [start, end])
                    }
                }, {
                    text: '最近三个月',
                    onClick (picker) {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        picker.$emit('pick', [start, end])
                    }
                }]
            },

            policeSituationDetailObj: {},
            policeSituationVisible: false,

        }
    },
    created () {
        window.addEventListener('resize', this.setTableHeight)
        this.defaultDate()
    },
    mounted () {
        this.$parent.$parent.resize('400px', true)

        this.navClick()

        tc = new global.DC.TrackController(global.viewer)

        this.$nextTick(() => {
            this.getAnswerPolices()
            this.setTableHeight()
        })

        window.addEventListener('resize', this.setTableHeight)
    },
    methods: {
        // 搜索框改变事件
        searchChange () {
            this.detailFlag = false
        // 设置默认时间
        defaultDate () {
            var current = new Date()

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'polylineLayer',
                type: 'VectorLayer'
            })
            var seven = new Date(current.getTime() - 7 * 24 * 60 * 60 * 1000)

            this.equimentPage.currentPage = 1

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

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

            this.getEquipmentPaging({ type: this.navType })
        },
        // 设备分页处理
        handleCurrentChange (currentPage) {
            this.equimentPage.currentPage = currentPage

            this.getEquipmentPaging({ type: this.navType })
            this.currentTime = [seven, current] //将值设置给插件绑定的数据
        },

        // 获取设备分页数据
        getEquipmentPaging (params) {
            getEquipmentPaging({ page: this.equimentPage.currentPage, count: this.equimentPage.pageSize, ...params, query: this.searchValue, dwbh: this.userInfo.dept_id }).then(res => {
                this.equimentTableData = []
                this.equimentPage.count = 0
        datePickerChange (e) {

                if (res.data.data.list.length > 0) {
                    this.equimentTableData = res.data.data.list.map(item => {
                        let newName = ''
                        if (params.type == 0) {
                            newName = item.name.replace('上饶-', '')
                        } else {
                            if (item.name.charAt(7) == '-') {
                                newName = item.name.slice(8)
                            } else {
                                newName = item.name.slice(7)
                            }
                        }
            this.pages.current = 1

                        return { ...item, newName: newName, lng: item.longitude, lat: item.latitude, alt: 1 }
            const date = e.map(item => {
                return this.dateFormat(item)
            })

            this.getAlarmList({ start: date[0], end: date[1], current: this.pages.current })

        },

        /**
         * @description: 获取当前日期
         * @param {*} dateData
         * @return {*}
         */
        dateFormat (dateData) {
            var date = new Date(dateData)
            var y = date.getFullYear()
            var m = date.getMonth() + 1
            m = m < 10 ? ('0' + m) : m
            var d = date.getDate()
            d = d < 10 ? ('0' + d) : d
            const time = y + '-' + m + '-' + d
            return time
        },

        // 获取实时接警记录
        getAnswerPolices () {
            getAnswerPolices({ deptId: this.userInfo.dept_id }).then(res => {
                this.realPoliceInforData = []

                if (res.data.result.length > 0) {
                    this.realPoliceInforData = res.data.result.map((item, index) => {
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
                    })

                    this.equimentTableData.forEach(item => {
                        if (this.navType == 0) {
                            this.$EventBus.$emit('layerPointAdd', {
                                layerName: 'carLayers',
                                type: 'billboard',
                                params: {
                                    ...item,
                                    url: '/img/icon/car.png'
                                },
                                incident: this.siteClick
                            })
                        } else if (this.navType == 1) {
                            this.$EventBus.$emit('layerPointAdd', {
                                layerName: 'policeMonitoringLayers',
                                type: 'billboard',
                                params: {
                                    ...item,
                                    url: '/img/icon/camera.png'
                                },
                                incident: this.siteClick
                            })
                        }
                    })

                    this.equimentPage.count = res.data.data.pages
                } else {
                    this.equimentTableData = []
                    this.realPoliceInforData = []
                }

                    this.equimentPage.total = 0
                this.addPoliceInforSiteLayer(this.realPoliceInforData)
            })

            // this.realPoliceInforData = [{
            //     ZDDWXZB: 117.97,
            //     ZDDWYZB: 28.45,
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // }]

            // this.realPoliceInforData = this.realPoliceInforData.map((item, index) => {
            //     return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            // })

            // this.addPoliceInforSiteLayer(this.realPoliceInforData)
        },

        // 获取历史接警记录
        getAlarmList (params) {
            getAlarmList({ ...params, size: this.pages.size, jjdwbh: this.userInfo.dept_id }).then(res => {
                this.pages.total = 0
                this.historyPoliceInforData = []

                if (res.data.data.records.length > 0) {
                    this.pages.total = res.data.data.pages
                    this.historyPoliceInforData = res.data.data.records.map((item, index) => {
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
                    })
                } else {
                    this.pages.total = 0
                    this.historyPoliceInforData = []
                }

                this.addPoliceInforSiteLayer(this.historyPoliceInforData)
            })

            // this.historyPoliceInforData = [{
            //     ZDDWXZB: 112,
            //     ZDDWYZB: 25,
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所,今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // },
            // {
            //     JJDWMC: '信州公安局派出所',
            //     JJYXM: '欧阳西门',
            //     BJSJ: '2022-12-12 12:12:12',
            //     BJRXM: '西门庆祝',
            //     LXDH: 17335843642,
            //     BJNR: '今日在某小区查获私人赌博场所',
            //     SFDZ: '上饶市信州区万达华府小区',
            //     BJLX: '聚众赌博',
            //     MEMO: '人群聚集赌博'
            // }]

            // this.historyPoliceInforData = this.historyPoliceInforData.map((item, index) => {
            //     return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
            // })

            // this.addPoliceInforSiteLayer(this.historyPoliceInforData)
        },

        addPoliceInforSiteLayer (data) {
            this.clearLayer()

            data.forEach((item, index) => {

                if (item.lng && item.lng != undefined && item.lng != '') {
                    let center = new global.DC.Position(Number(item.lng), Number(item.lat))
                    let point = new global.DC.PointPrimitive(center)

                    let num = 0

                    timer[index] = setInterval(() => {
                        num++
                        if (num >= 10) {
                            num = 0
                        }

                        point.setStyle({
                            outlineColor: global.DC.Color.RED.withAlpha(0.5),//边框颜色
                            outlineWidth: num,//边框大小，
                            color: global.DC.Color.RED
                        })
                    }, 100)

                    point.attrParams = item
                    point.on(global.DC.MouseEventType.CLICK, this.siteClick)
                    policeInforSiteLayer.addOverlay(point)
                }
            })
        },

        // 类别切换
        navClick (type) {
            if (type && type == this.navType) return
            this.detailFlag = false

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

            if (type) {
                this.navType = type
            }

            this.searchValue = ''

            this.equimentPage.currentPage = 1

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

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

            this.getEquipmentPaging({ type: this.navType })
        },

        // 表格行点击查看定位
        rowClick (row) {
            if (row.lng == 0 || row.lat == 0) {
                this.$message.error('暂无位置信息！')

                return
            }
            this.$EventBus.$emit('toPosition', {
                layerName: 'carLayers',
                siteJd: row.lng,
                siteWd: row.lat
            })
        },

        // 表格行点击查看轨迹
        equipmentTrack (row) {
            this.detailFlag = true

            this.currentSelectEquipment = row
        },

        async play (row) {
            if (this.flvPlayer != null) {
                this.flvPlayer.pause()
                this.flvPlayer.unload()
                this.flvPlayer.detachMediaElement()
                this.flvPlayer.destroy()
                this.flvPlayer = null
            }

            this.dialogTitle = row.name
            let flvUrl = ''

            await this.getDevices(row.channelId).then(res => {
                flvUrl = res
            })

            if (typeof flvUrl === 'object') {
                this.$message.error(flvUrl.msg)

                return
            }

            this.dialogVisible = true

            if (flvjs.isSupported()) {
                this.$nextTick(() => {
                    var videoElement = document.getElementById('videoElement')
                    this.flvPlayer = flvjs.createPlayer({
                        type: 'flv',
                        isLive: true,
                        hasAudio: false,
                        url: flvUrl
                    })
                    this.flvPlayer.attachMediaElement(videoElement)
                    this.flvPlayer.load()
                    this.flvPlayer.play()
                })
            }
        },

        async getDevices (channelId) {
            let flvAddress = ''
            await getDevices(channelId).then(res => {
                if ('data' in res.data) {
                    flvAddress = res.data.data.flv
                } else {
                    flvAddress = res.data
                }
            })
            return flvAddress
        },

        /**
         * @description: 警情闪烁点的点击事件
         * @param {*} e
         * @return {*}
         */
        siteClick (e) {
            this.play(e.overlay.attrParams)
        },

        dialogBeforeClose () {
            this.$refs.videoElement.pause()
            this.dialogVisible = false
        },

        // 轨迹返回
        goBack () {
            this.detailFlag = !this.detailFlag
            this.trackTime = []

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'polylineLayer',
                type: 'VectorLayer'
            this.$store.commit('SET_DETAILSPOPUP', {
                showBox: true,
                showBtn: false
            })

            tc.pause()

            tc.removeTrack(track)
            this.$store.commit('SET_DATAPOPUP', e.overlay.attrParams)
            var popup = new global.DC.DivForms(global.viewer, {
                domId: 'divFormsDomBox',
                position: [
                    global.DC.Transform.transformWGS84ToCartesian(
                        new global.DC.Position(
                            Number(e.overlay.attrParams.lng),
                            Number(e.overlay.attrParams.lat),
                            0
                        )
                    )
                ]
            })
        },

        // 查看轨迹
        async lookTrack () {
            global.viewer.scene.globe.depthTestAgainstTerrain = false

            if (this.trackTime.length == 0) {
                this.$message({ message: '请选择开始时间', duration: 2000 })
                return
            }
            const startTime = new Date(this.trackTime[0])
            const start = startTime.getFullYear() + '-' + this.disposeTime(startTime.getMonth() + 1) + '-' + this.disposeTime(startTime.getDate()) + ' ' + this.disposeTime(startTime.getHours()) + ':' + this.disposeTime(startTime.getMinutes()) + ':' + this.disposeTime(startTime.getSeconds())
            if (this.trackTime.length == 1) {
                this.$message({ message: '请选择结束时间', duration: 2000 })
                return
            }
            const endTime = new Date(this.trackTime[1])
            const end = endTime.getFullYear() + '-' + this.disposeTime(endTime.getMonth() + 1) + '-' + this.disposeTime(endTime.getDate()) + ' ' + this.disposeTime(endTime.getHours()) + ':' + this.disposeTime(endTime.getMinutes()) + ':' + this.disposeTime(endTime.getSeconds())

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

            let positionsArr = []
            await this.getHistoricalTrack({ start: start, end: end, channelId: this.currentSelectEquipment.channelId }).then(res => {
                positionsArr = res
            })

            if (positionsArr.length == 0) {
                this.$message({
                    message: '该设备暂无轨迹数据',
                    type: 'warning'
                })

                return
        /**
         * @description: 清除图层
         * @return {*}
         */
        clearLayer () {
            if (policeInforSiteLayer && policeInforSiteLayer != null && policeInforSiteLayer != undefined) {
                policeInforSiteLayer.clear()
                policeInforSiteLayer.remove()
                policeInforSiteLayer = null
            }

            let positionStr = ''
            positionsArr.forEach(item => {
                positionStr = positionStr + item.longitude + ',' + item.latitude + ';'
            })

            this.$EventBus.$emit('layerPolylineAdd', {
                layerName: 'polylineLayer',
                positions: positionStr,
                material: new global.DC.PolylineImageTrailMaterialProperty({
                    color: global.DC.Color.GREEN,
                    speed: 10,
                    image: '/img/icon/arrow.png',
                    repeat: { x: 10, y: 1 }
                }),
                width: 6
            })

            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'polylineLayer',
                type: 'billboard',
                params: {
                    lng: positionsArr[0].longitude,
                    lat: positionsArr[0].latitude,
                    alt: 1,
                    url: '/img/icon/orgin.png'
                }
            })

            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'polylineLayer',
                type: 'billboard',
                params: {
                    lng: positionsArr[positionsArr.length - 1].longitude,
                    lat: positionsArr[positionsArr.length - 1].latitude,
                    alt: 1,
                    url: '/img/icon/end.png'
                }
            })

            track = new global.DC.Track(positionStr, 5000)

            track.setModel('/model/qiche.gltf', {
                scale: 1
            })

            tc.addTrack(track)

            this.$EventBus.$emit('toPosition', {
                siteJd: 114.928669,
                siteWd: 25.850383,
                siteGd: 500,
                siteHeading: 0,
                sitePitch: -90
            })

            tc.play()
        },

        // 处理时间补零操作
        disposeTime (s) {
            return s < 10 ? '0' + s : s
            policeInforSiteLayer = new global.DC.PrimitiveLayer('policeInforSiteLayer')
            global.viewer.addLayer(policeInforSiteLayer)
        },

        setTableHeight () {
            this.currentTableHeight = this.$refs.tableBox.offsetHeight - this.$refs.tablePagination.offsetHeight

            if (this.navType == 0) {
                this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.navTabBox.offsetHeight
            } else {
                this.currentTableHeight = this.$refs.containerContent.offsetHeight - this.$refs.navTabBox.offsetHeight - this.$refs.timeSelect.offsetHeight - this.$refs.ElPagination.offsetHeight
            }

        },

        /**
         * @description: 实时历史警情切换
         * @param {*} type
         * @return {*}
         */
        async navClick (type) {
            this.navType = type

            const date = this.currentTime.map(item => {
                return this.dateFormat(item)
            })

            if (this.navType == 0) {
                await this.getAnswerPolices()
            } else {
                this.pages.current = 1

                await this.getAlarmList({
                    start: date[0],
                    end: date[1],
                    current: this.pages.current
                })
            }

            this.$nextTick(() => {
                this.setTableHeight()
            })
        },

        /**
         * @description: 警情列表点击事件
         * @param {*} item
         * @return {*}
         */
        clickData (item) {
            if (item.ZDDWXZB && item.ZDDWXZB != 0 && item.ZDDWYZB && item.ZDDWYZB != 0) {
                this.$EventBus.$emit('toPosition', {
                    layerName: 'policeSituationyLayers',
                    siteJd: Number(item.ZDDWXZB),
                    siteWd: Number(item.ZDDWYZB)
                })

                this.$store.commit('SET_DETAILSPOPUP', {
                    showBox: true,
                    showBtn: false
                })

                this.$store.commit('SET_DATAPOPUP', item)

                var popup = new global.DC.DivForms(global.viewer, {
                    domId: 'divFormsDomBox',
                    position: [
                        global.DC.Transform.transformWGS84ToCartesian(
                            new global.DC.Position(
                                Number(item.ZDDWXZB),
                                Number(item.ZDDWYZB),
                                0
                            )
                        )
                    ]
                })
            } else {
                this.policeSituationDetailObj = item
                this.policeSituationVisible = true
            }
        },


        // 大小重置
        boxResize (val) {
            this.boxShow = val
        },

        async getHistoricalTrack (params) {
            let positionArr = []

            await getHistoricalTrack(params).then(res => {
                positionArr = res.data.data
            })
            return positionArr
        },

        // 大搜
        getSearchExtensively (ak, region, query) {
            getSearchExtensively(ak, region, query).then(res => {
                this.searchExtensivelyArray = res.data.result
            })
        },

        searchExtensivelyClick () {
            this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
            this.searchExtensivelyValBoxShow = false
            if (this.searchExtensivelyArray.length > 0) {
                this.$EventBus.$emit('toPosition', {
                    siteJd: `${this.searchExtensivelyArray[0].location.lng}`,
                    siteWd: `${this.searchExtensivelyArray[0].location.lat}`,
                    siteGd: 200
                })
                this.searchExtensivelyValue = this.searchExtensivelyArray[0].name
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'searchLayer',
                    type: 'VectorLayer'
                })
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'searchLayer',
                    type: 'label',
                    params: {
                        lng: `${this.searchExtensivelyArray[0].location.lng}`,
                        lat: `${this.searchExtensivelyArray[0].location.lat}`,
                        alt: 1,
                        text: this.searchExtensivelyArray[0].name
                    }
                })
            }
        },

        searchExtensivelyChange () {
            if (this.searchExtensivelyValue == '') {
                this.searchExtensivelyValBoxShow = false
                this.isShowClearBtn = false
                this.searchExtensivelyArray = []
            } else {
                this.searchExtensivelyValBoxShow = true
                this.isShowClearBtn = true
                this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
            }
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                type: 'VectorLayer'
            })
        },

        searchExtensivelyVlaClick (item) {
            this.searchExtensivelyValBoxShow = false
            this.searchExtensivelyValue = item.name
            this.$EventBus.$emit('toPosition', {
                siteJd: `${item.location.lng}`,
                siteWd: `${item.location.lat}`,
                siteGd: 200
            })
            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'searchLayer',
                type: 'VectorLayer'
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: 'label',
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 1,
                    text: item.name
                }
            })
            this.$EventBus.$emit('layerPointAdd', {
                layerName: 'searchLayer',
                type: 'billboard',
                params: {
                    lng: `${item.location.lng}`,
                    lat: `${item.location.lat}`,
                    alt: 1,
                    url: '/img/icon/location.png'
                }
            })
        },

        searchExtensivelyFocus () {
            this.searchExtensivelyValBoxShow = true
            this.getSearchExtensively('ebf48ecaa1fd436fa3d40c4600aa051f', '361100', this.searchExtensivelyValue)
        },

        clearSearchValue () {
            this.searchExtensivelyValue = ''
            this.searchExtensivelyChange()
        }
    },

    destroyed () {
        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'carLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'policeMonitoringLayers',
            type: 'VectorLayer'
        })

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

        this.$EventBus.$emit('mapRemoveLayer', {
            layerName: 'searchLayer',
            type: 'VectorLayer'
        })

        tc.pause()

        tc.removeTrack(track)

        window.removeEventListener('resize', this.setTableHeight)

        policeInforSiteLayer != null && policeInforSiteLayer.remove()

        this.$store.commit('SET_DETAILSPOPUP', {
            showBox: false,
            showBtn: false
        })

        for (let i = 0; i < timer.length; i++) {
            clearInterval(timer[i])
        }

        this.$parent.$parent.resize('0px')
    }
@@ -675,248 +640,25 @@
        color: #fff;
        background: $bg-color;

        .switch-box {
            padding: 6px;
            // background: blue;
        .nav-tab {
            height: 40px;
            line-height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-around;

            &>div {
            .nav {
                flex: 1;
            }
        }

        .list-show {
            position: relative;
            height: calc(100% - 50px);

            .search-box {
                padding: 6px;
                padding-top: 0;
                height: 46px;
                display: flex;
                align-items: center;

                input {
                    flex: 1;
                    height: 100%;
                    font-size: 18px;
                    text-indent: 1em;
                    color: #ffffff;
                    background-color: rgba(24, 79, 202, 0.6);
                    // border: 1px solid rgb(0, 92, 169);
                    border: 1px solid rgb(24, 79, 202);
                }

                input:focus {
                    outline: none;
                }

                input::-webkit-input-placeholder {
                    color: rgba(238, 238, 238, 0.7);
                }
            }

            .list {
                height: calc(100% - 48px);
                display: flex;
                flex-direction: column;

                .pages {
                    height: 40px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .state-box {
                    width: 20px;
                    height: 20px;
                    line-height: 20px;
                    text-align: center;
                    margin: 0 auto;
                    border-radius: 50%;
                    background-color: #adadad;
                }

                .online {
                    background-color: #4ccc7d;
                }
            }

            :deep(.el-table td.el-table__cell div) {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }

        .track-box {
            height: calc(100% - 50px);

            .back-btn {
                position: relative;
                height: 42px;
                line-height: 42px;
                text-align: center;
                color: #fff;
                border-bottom: 1px solid #fff;
                cursor: pointer;
            }

            .back-btn::before {
                content: '\e6ea';
                font-family: element-icons;
                height: 28px;
                line-height: 28px;
                color: #fff;
                position: absolute;
                top: 4px;
                left: 8px;
            }

            .back-btn:hover::before {
                color: #fff;
            }

            ul {
                margin: 0;
                padding: 0;
            }

            li {
                margin: 0;
                padding: 0 4px;
                list-style: none;
                height: 42px;
                line-height: 42px;
                display: flex;
                color: #fff;
                border-bottom: 1px solid #fff;

                &>div {
                    text-align: center;
                }

                &>div:first-child {
                    flex: 2;
                }

                &>div:last-child {
                    flex: 6;

                    &>div {
                        width: 100% !important;
                    }
                }
            }

            li:last-child {
                text-align: center;
                position: relative;

                .el-button {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    padding: 0 !important;
                    width: 68px;
                    height: 32px;
                    line-height: 32px;
                }
            }
        }
    }

    .search-content {
        position: absolute;
        position: fixed;
        z-index: 99;
        left: 760px;
        top: 40px;
        width: 460px;
        height: 36px;

        input {
            flex: 1;
            width: 400px;
            height: 100%;
            font-size: 18px;
            text-indent: 1em;
            color: #ffffff;
            background-color: rgba(24, 79, 202, 0.75);
            border: 1px solid rgb(0, 92, 169);
            border-radius: 20px 0 0 20px;
            vertical-align: top;
        }

        input:focus {
            outline: none;
        }

        input::-webkit-input-placeholder {
            color: rgba(238, 238, 238, 0.7);
        }

        .clear {
            position: absolute;
            top: 0;
            right: 70px;
            cursor: pointer;

            img {
                width: 16px;
                height: 16px;
                margin-top: 10px;
            .choosed {
                background-color: #3d5ad5;
            }
        }

        button {
            font-size: 24px;
            font-weight: 700;
            width: 60px;
            height: 100%;
            background-color: $table-body-tr-n-color;
            color: #fff;
            border: 1px solid rgb(0, 92, 169);
            cursor: pointer;
            border-radius: 0 20px 20px 0;
        }

        button:active {
            background-color: $table-body-tr-2n-color;
            border: 1px solid rgb(0, 92, 169);
        }
    }

    .searchExtensively-val-box {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 80px;
        left: 760px;
        width: 380px;
        max-height: 160px;
        text-align: left;
        color: #fff;
        background: $el-dialog-bg-color;
        z-index: 1111;
        border-radius: 10px;
        overflow: hidden;

        &>div {
            height: 100%;
            overflow-y: auto;

            div {
                padding: 0 10px;
                line-height: 36px;
                cursor: pointer;
            }
        .time-select {
            margin: 0;
            padding: 5px;
        }
    }
}

 src/views/video/list.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-23 08:56:50
 * @LastEditTime: 2023-02-24 13:45:15
 * @FilePath: \srs-police-affairs\src\views\video\list.vue
 * @Description: 辖区管理
 * 
@@ -15,11 +15,11 @@
            <div class="search-box">
                点位名称：
                <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入…" />
        </div>
            </div>

        <div class="draw-btn">
            搜索范围：
            <el-button type="primary" size="mini" @click="draw('polygon')">绘制面</el-button>
            <div class="draw-btn">
                搜索范围：
                <el-button type="primary" size="mini" @click="draw('polygon')">绘制面</el-button>
                <el-button type="primary" size="mini" @click="draw('polyline')">巡查路线</el-button>
                <el-button type="primary" size="mini" @click="removeDrawLayer">清除</el-button>
            </div>
@@ -156,7 +156,7 @@
            defaultExpandedKeys: [],
            searchLazyFlag: true,
            searchTreeData: [],
            drawPlotData:{},
            drawPlotData: {},
        }
    },

@@ -234,12 +234,12 @@

        drawDialogBeforeClose () {
            this.drawName = ''
            if(drawPlotLayers!=null){
            if (drawPlotLayers != null) {
                drawPlotLayers.clear()
            }
            this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'monitoringLayers',
                    type: 'VectorLayer'
                layerName: 'monitoringLayers',
                type: 'VectorLayer'
            })
            this.drawDialogVisible = false
        },
@@ -300,9 +300,9 @@
        removeDrawLayer () {
            this.inputpopup = false
            this.monitoringList = this.monitoringSaveList
            if(drawPlotLayers!=null){
            if (drawPlotLayers != null) {
                drawPlotLayers.clear()
            }  
            }
            this.drawPlotData = []
            this.$EventBus.$emit('mapRemoveLayer', {
                layerName: 'monitoringLayers',
@@ -332,24 +332,24 @@

        getRegionList (type, data) {
            let positionStr = ''
            if(type == 'polyline'){
               data._positions.forEach(item=>{
                   positionStr = positionStr + item._lng + ',' + item._lat + ';'
               })
               console.log('positionStr',positionStr);
               let coords = global.DC.GeoTools.polylineBuffer(positionStr, 100)
               let polygon = new global.DC.Polygon(coords)
               let position = ''
               polygon._positions.forEach(item => {
                   position += item._lng + ',' + item._lat + ';'
               })
               position += polygon._positions[0]._lng +',' + polygon._positions[0]._lat+ ';'
               positionStr = position
            }else{
                data._positions.forEach(item=>{
                   positionStr = positionStr + item._lng + ',' + item._lat + ';'
               })
               positionStr = positionStr + data._positions[0]._lng + ',' + data._positions[0]._lat + ';'
            if (type == 'polyline') {
                data._positions.forEach(item => {
                    positionStr = positionStr + item._lng + ',' + item._lat + ';'
                })
                console.log('positionStr', positionStr)
                let coords = global.DC.GeoTools.polylineBuffer(positionStr, 100)
                let polygon = new global.DC.Polygon(coords)
                let position = ''
                polygon._positions.forEach(item => {
                    position += item._lng + ',' + item._lat + ';'
                })
                position += polygon._positions[0]._lng + ',' + polygon._positions[0]._lat + ';'
                positionStr = position
            } else {
                data._positions.forEach(item => {
                    positionStr = positionStr + item._lng + ',' + item._lat + ';'
                })
                positionStr = positionStr + data._positions[0]._lng + ',' + data._positions[0]._lat + ';'
            }
            getRegionList({
                page: 1,
@@ -405,7 +405,7 @@
                if (this.drawType == 1) {
                    // 获取线坐标
                    this.drawPlotData._positions.forEach(item => {
                        drawPositionStr += item._lng + ' ' + item._lat+ ','
                        drawPositionStr += item._lng + ' ' + item._lat + ','
                    })
                    drawPositionStr = drawPositionStr.slice(0, drawPositionStr.length - 1)
                    // 求线长度
@@ -427,16 +427,16 @@
                    this.drawPlotData._positions.forEach(item => {
                        polygonPosition.push([item._lng, item._lat])
                    })
                    polygonPosition.push([this.drawPlotData._positions[0]._lng,this.drawPlotData._positions[0]._lat])
                    let polygon = this.$turf.polygon([polygonPosition]);
                    let area = this.$turf.area(polygon);
                    polygonPosition.push([this.drawPlotData._positions[0]._lng, this.drawPlotData._positions[0]._lat])
                    let polygon = this.$turf.polygon([polygonPosition])
                    let area = this.$turf.area(polygon)
                    extent = area.toFixed(3)
                }
                this.insertRegionSaveList({type:this.drawType, positions:drawPositionStr, name:this.drawName, extent: extent,width:this.range})
                this.drawDialogVisible = false
                this.drawName = ''
                if(drawPlotLayers!=null) {
                   drawPlotLayers.clear()
                if (drawPlotLayers != null) {
                    drawPlotLayers.clear()
                }
                this.$EventBus.$emit('mapRemoveLayer', {
                    layerName: 'monitoringLayers',
@@ -447,7 +447,7 @@

        // 取消绘制线面
        cancelSaveDrawInfo () {
            this.drawDialogBeforeClose () 
            this.drawDialogBeforeClose()
        },

        // type线面类型, positions坐标, name名称, width线宽度, extent线长度或面面积
@@ -625,7 +625,8 @@
                    lat: node.latitude,
                    alt: 1,
                    text: node.name
                }
                },
                incident: this.siteClick
            })

            this.$EventBus.$emit('layerPointAdd', {

 src/views/video/region.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-02-23 08:56:44
 * @LastEditTime: 2023-02-24 14:34:25
 * @FilePath: \srs-police-affairs\src\views\video\region.vue
 * @Description: 辖区管理
 * 
@@ -33,9 +33,9 @@
                                <el-table-column prop="name" label="范围名称" min-width="50%"></el-table-column>
                                <el-table-column prop="extent" label="长度km/面积㎡" min-width="50%">
                                    <!-- <template slot-scope="scope">
                                                    <span>{{ scope.row.extent }}</span>
                                                    <span>千米</span>
                                                </template>-->
                                                            <span>{{ scope.row.extent }}</span>
                                                            <span>千米</span>
                                                        </template>-->
                                </el-table-column>
                                <el-table-column prop="id" label="操作" min-width="50%">
                                    <template slot-scope="scope">
@@ -50,7 +50,7 @@
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="pages">
                        <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>
@@ -513,20 +513,7 @@
                   linePositionStr = item.positions.replace(/,/g,';')
                   linePositionStr = linePositionStr.replace(/ /g, ',')
                   linePositionStr +=';'
                    // this.$EventBus.$emit('layerPolylineAdd', {
                    // layerName: 'rangeSaveLayer',
                    // positions: linePositionStr,
                    // material: global.DC.Color.YELLOW.withAlpha(0.8),
                    // width: 1,
                    // })
                    let lineObj = new global.DC.Polyline(linePositionStr)
                    rangeLineLayer.addOverlay(lineObj)
                        lineObj.setStyle({
                            'material': global.DC.Color.RED.withAlpha(0.8),
                            'width': 3
                        })
                        item.lineObj = lineObj
                   let coords = global.DC.GeoTools.polylineBuffer(linePositionStr, item.width != -1 ? item.width : 100)
                   let coords = global.DC.GeoTools.polylineBuffer(linePositionStr, 100)
                   let polygon = new global.DC.Polygon(coords)
                   let position = ''
                   polygon._positions.forEach(item => {
@@ -749,45 +736,45 @@
                    type7: '',
                    type8: ''
                }
                if(row.type == 2){
                if (row.type == 2) {
                    getRegionList({
                    page: 1,
                    count: 20,
                    id: row.id
                }).then(res => {
                    let monitorData = res.data.data.list
                        page: 1,
                        count: 20,
                        id: row.id
                    }).then(res => {
                        let monitorData = res.data.data.list

                    this.monitoringList = res.data.data.list
                    this.$EventBus.$emit('mapRemoveLayer', {
                        layerName: 'monitoringLayers',
                        type: 'VectorLayer'
                    })
                        this.monitoringList = res.data.data.list
                        this.$EventBus.$emit('mapRemoveLayer', {
                            layerName: 'monitoringLayers',
                            type: 'VectorLayer'
                        })

                    this.initMonitoringIcon()
                        this.initMonitoringIcon()

                    this.monitorOption = []
                        this.monitorOption = []

                    monitorData.forEach((item, index) => {
                        this.monitorOption.push({ value: index, label: item.name, item })
                        monitorData.forEach((item, index) => {
                            this.monitorOption.push({ value: index, label: item.name, item })

                        if (index < 8) {
                            const ind = index + 1
                            this.isShowVideo[`video${ind}`] = true
                            this.monitor[`type${ind}`] = item.name
                            if (item.status == 0) {
                                this.isShowOutline[`video${ind}`] = true
                            if (index < 8) {
                                const ind = index + 1
                                this.isShowVideo[`video${ind}`] = true
                                this.monitor[`type${ind}`] = item.name
                                if (item.status == 0) {
                                    this.isShowOutline[`video${ind}`] = true
                                }

                                this.getDevices(item.channelId).then(res => {
                                    this.playVideoList(`flvPlayer${ind}`, `${res}`, `videoElement${ind}`)
                                })
                            }

                            this.getDevices(item.channelId).then(res => {
                                this.playVideoList(`flvPlayer${ind}`, `${res}`, `videoElement${ind}`)
                            })
                        }
                        })
                    })
                })
                }else{
                    let positionStr = row.positions.replace(/,/g,';')
                    positionStr = positionStr.replace(/ /g,',')
                    positionStr += ';' 
                } else {
                    let positionStr = row.positions.replace(/,/g, ';')
                    positionStr = positionStr.replace(/ /g, ',')
                    positionStr += ';'
                    let coords = global.DC.GeoTools.polylineBuffer(positionStr, row.width)
                    let polygon = new global.DC.Polygon(coords)
                    let position = ''
@@ -795,41 +782,41 @@
                        position += item._lng + ',' + item._lat + ';'
                    })
                    getRegionList({
                    page: 1,
                    count: 20,
                    range: position
                }).then(res => {
                    let monitorData = res.data.data.list
                        page: 1,
                        count: 20,
                        range: position
                    }).then(res => {
                        let monitorData = res.data.data.list

                    this.monitoringList = res.data.data.list
                    this.$EventBus.$emit('mapRemoveLayer', {
                        layerName: 'monitoringLayers',
                        type: 'VectorLayer'
                    })
                        this.monitoringList = res.data.data.list
                        this.$EventBus.$emit('mapRemoveLayer', {
                            layerName: 'monitoringLayers',
                            type: 'VectorLayer'
                        })

                    this.initMonitoringIcon()
                        this.initMonitoringIcon()

                    this.monitorOption = []
                        this.monitorOption = []

                    monitorData.forEach((item, index) => {
                        this.monitorOption.push({ value: index, label: item.name, item })
                        monitorData.forEach((item, index) => {
                            this.monitorOption.push({ value: index, label: item.name, item })

                        if (index < 8) {
                            const ind = index + 1
                            this.isShowVideo[`video${ind}`] = true
                            this.monitor[`type${ind}`] = item.name
                            if (item.status == 0) {
                                this.isShowOutline[`video${ind}`] = true
                            if (index < 8) {
                                const ind = index + 1
                                this.isShowVideo[`video${ind}`] = true
                                this.monitor[`type${ind}`] = item.name
                                if (item.status == 0) {
                                    this.isShowOutline[`video${ind}`] = true
                                }

                                this.getDevices(item.channelId).then(res => {
                                    this.playVideoList(`flvPlayer${ind}`, `${res}`, `videoElement${ind}`)
                                })
                            }

                            this.getDevices(item.channelId).then(res => {
                                this.playVideoList(`flvPlayer${ind}`, `${res}`, `videoElement${ind}`)
                            })
                        }
                        })
                    })
                })
                }
                

            }
            this.saveRangeID = row.id
        },
@@ -949,7 +936,7 @@
            }
        },

        

        //#region
        // enterVideoBox (num) {
        //     for (let key in this.isShowSelect) {