范围查询添加删除接口对接

guanqb

2022-11-22 4f417e3f80aff50c4d71aab21f06e0396ec2f524

范围查询添加删除接口对接

 src/api/video/index.js

@@ -17,7 +17,7 @@
 * @param {*} params 暂时不用传
 * @returns 
 */
export const getVideoList = (page = 1, count = 10, requestBaseUrl = '', params = {}) => {
export const getVideoList = (page = 1, count = 10, params = {}, requestBaseUrl = '') => {
    return request({
        url: '/device/query/devices',
        method: 'get',
@@ -25,7 +25,8 @@
        params: {
            page,
            count,
            ...params
            ...params,
            requestBaseUrl
        }
    })
}
@@ -50,7 +51,7 @@
 * @param {*} params 包含参数 range 参数值参考 116.292735,40.0717; 116.476708, 40.083625; 116.476708, 40.083625; 116.292735, 40.0717
 * @returns 
 */
export const getRegionList = (page = 1, count = 15, requestBaseUrl = '', range) => {
export const getRegionList = (page = 1, count = 15, range, requestBaseUrl = '',) => {
    return request({
        url: '/device/query/SpatialQueryList',
        method: 'get',
@@ -58,7 +59,8 @@
        params: {
            page,
            count,
            range
            range,
            requestBaseUrl,
        }
    })
}
@@ -69,7 +71,7 @@
 * @param {*} positions 坐标
 * @param {*} name 名称
 */
export const updateRegionSaveList = (type, positions, requestBaseUrl = 'outside', name) => {
export const updateRegionSaveList = (type, positions, name, requestBaseUrl = 'outside') => {
    return request({
        url: '/range/range/updatee',
        method: 'post',
@@ -88,7 +90,7 @@
 * @param {*} positions 坐标
 * @param {*} name 名称
 */
export const insertRegionSaveList = (type, positions, requestBaseUrl = 'outside', name) => {
export const insertRegionSaveList = (type, positions, name, requestBaseUrl = 'outside') => {
    return request({
        url: '/range/range/insertes',
        method: 'post',
@@ -125,7 +127,7 @@
export const deleteRegionSaveList = (ids = 1, requestBaseUrl = 'outside') => {
    return request({
        url: '/range/range/remove',
        method: 'get',
        method: 'post',
        requestBaseUrl,
        params: {
            ids

 src/styles/base/index.css

@@ -398,3 +398,66 @@
.activity-details-box .el-dialog .el-dialog__body .item > div:nth-of-type(2) {
  width: calc(100% - 120px);
}

.special-animal-enter-active {
  transition: all .2s ease;
}

.special-animal-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}

.special-animal-enter,
.special-animal-leave-to {
  transform: translateX(-100%);
  opacity: 0;
}

.video-draw-box .el-dialog {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  width: 320px;
  height: 180px;
  top: 50%;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.video-draw-box .el-dialog .el-dialog__body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
}

.video-draw-box .el-dialog .el-dialog__body input {
  width: 90%;
  height: 30px;
  font-size: 16px;
  text-indent: 1em;
  color: #ffffff;
  background-color: transparent;
  border: 1px solid #005ca9;
}

.video-draw-box .el-dialog .el-dialog__body input:focus {
  outline: none;
}

.video-draw-box .el-dialog .el-dialog__body input::-webkit-input-placeholder {
  color: rgba(238, 238, 238, 0.7);
}

.video-draw-box .el-dialog .el-dialog__body button {
  width: 60px;
  height: 30px;
  background-color: #65b1ff;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

 src/styles/base/index.min.css

@@ -1 +1 @@
*{margin:0;padding:0;box-sizing:border-box;scrollbar-color:rgba(7,22,37,0.8) rgba(216,216,216,0.2);scrollbar-width:thin}html,body{width:100%;height:100%}ul li{list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:6px;height:6px;background-color:none}::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(7,22,37,0.8);padding-left:2px;padding-right:2px}::-webkit-scrollbar-track{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:window-inactive{background-color:rgba(7,22,37,0.8)}:not(select)::-webkit-scrollbar{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:hover{background-color:rgba(7,22,37,0.8)}.car-video-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:480px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.car-video-box .el-dialog .el-dialog__body{flex:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.police-affairs-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:540px;height:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.police-affairs-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.police-affairs-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.police-affairs-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.police-affairs-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.police-affairs-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}.resident-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.resident-details-box .el-dialog .el-dialog__body{flex:1}.panorama-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:960px;height:600px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.phone-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.phone-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.phone-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.phone-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}.area-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:700px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.area-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.area-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.area-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.area-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.area-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}.equiment-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:600px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.equiment-details-box .el-dialog .el-dialog__body{flex:1}.land-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:630px;height:300px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.land-details-box .el-dialog .el-dialog__body{flex:1}.keyPerson-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:700px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.keyPerson-details-box .el-dialog .el-dialog__body{flex:1}.policeSituation-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:800px;height:500px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.policeSituation-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.policeSituation-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.policeSituation-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.policeSituation-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.policeSituation-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content{display:flex;height:36px;line-height:36px;flex-direction:row;text-align:left;margin-left:10px}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content>div:nth-of-type(2){width:calc(100% - 120px)}.activity-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:640px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.activity-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.activity-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.activity-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.activity-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.activity-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}
*{margin:0;padding:0;box-sizing:border-box;scrollbar-color:rgba(7,22,37,0.8) rgba(216,216,216,0.2);scrollbar-width:thin}html,body{width:100%;height:100%}ul li{list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:6px;height:6px;background-color:none}::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(7,22,37,0.8);padding-left:2px;padding-right:2px}::-webkit-scrollbar-track{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:window-inactive{background-color:rgba(7,22,37,0.8)}:not(select)::-webkit-scrollbar{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:hover{background-color:rgba(7,22,37,0.8)}.car-video-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:480px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.car-video-box .el-dialog .el-dialog__body{flex:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.police-affairs-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:540px;height:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.police-affairs-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.police-affairs-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.police-affairs-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.police-affairs-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.police-affairs-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}.resident-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.resident-details-box .el-dialog .el-dialog__body{flex:1}.panorama-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:960px;height:600px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.phone-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.phone-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.phone-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.phone-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}.area-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:700px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.area-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.area-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.area-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.area-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.area-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}.equiment-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:600px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.equiment-details-box .el-dialog .el-dialog__body{flex:1}.land-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:630px;height:300px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.land-details-box .el-dialog .el-dialog__body{flex:1}.keyPerson-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:1000px;height:700px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.keyPerson-details-box .el-dialog .el-dialog__body{flex:1}.policeSituation-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:800px;height:500px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.policeSituation-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.policeSituation-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.policeSituation-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.policeSituation-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.policeSituation-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content{display:flex;height:36px;line-height:36px;flex-direction:row;text-align:left;margin-left:10px}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.policeSituation-details-box .el-dialog .el-dialog__body .dialog-content>div:nth-of-type(2){width:calc(100% - 120px)}.activity-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:640px;height:400px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.activity-details-box .el-dialog .el-dialog__header{height:56px;line-height:56px}.activity-details-box .el-dialog .el-dialog__body{flex:1;display:flex;flex-direction:row;flex-wrap:wrap;justify-self:flex-start;align-content:flex-start}.activity-details-box .el-dialog .el-dialog__body .item{display:flex;flex-direction:row;width:calc(50% - 20px);height:36px;line-height:36px;margin:0 10px;text-align:left}.activity-details-box .el-dialog .el-dialog__body .item>div:first-child{width:100px;text-align:justify;display:inline-block;text-align-last:justify;margin-right:20px}.activity-details-box .el-dialog .el-dialog__body .item>div:nth-of-type(2){width:calc(100% - 120px)}.special-animal-enter-active{transition:all .2s ease}.special-animal-leave-active{transition:all 0.2s cubic-bezier(1, 0.5, 0.8, 1)}.special-animal-enter,.special-animal-leave-to{transform:translateX(-100%);opacity:0}.video-draw-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;height:180px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.video-draw-box .el-dialog .el-dialog__body{flex:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;flex-wrap:wrap}.video-draw-box .el-dialog .el-dialog__body input{width:90%;height:30px;font-size:16px;text-indent:1em;color:#ffffff;background-color:transparent;border:1px solid #005ca9}.video-draw-box .el-dialog .el-dialog__body input:focus{outline:none}.video-draw-box .el-dialog .el-dialog__body input::-webkit-input-placeholder{color:rgba(238,238,238,0.7)}.video-draw-box .el-dialog .el-dialog__body button{width:60px;height:30px;background-color:#65b1ff;color:#fff;border-radius:4px;cursor:pointer;margin-top:10px}

 src/styles/base/index.scss

@@ -440,4 +440,53 @@
.special-animal-leave-to {
    transform: translateX(-100%);
    opacity: 0;
}

.video-draw-box {
    .el-dialog {
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        width: 320px;
        height: 180px;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);

        .el-dialog__body {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%;
            flex-wrap:wrap;
            input {
                width: 90%;
                height: 30px;
                font-size: 16px;
                text-indent: 1em;
                color: #ffffff;
                background-color: transparent;
                border: 1px solid rgb(0, 92, 169);
            }

            input:focus {
                outline: none;
            }

            input::-webkit-input-placeholder {
                color: rgba(238, 238, 238, 0.7);
            }
            button {
                width: 60px;
                height: 30px;
                background-color: #65b1ff;
                color: #fff;
                border-radius: 4px;
                cursor: pointer;
                margin-top: 10px;
            }
        }
    }
}

 src/views/video/list.vue

@@ -26,7 +26,7 @@
                <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>
                <el-button type="primary" size="mini">保存</el-button>
                <el-button type="primary" size="mini" @click="saveDraw">保存</el-button>
            </div>
            <div class="range-input" v-show="inputpopup">
                <div class="close" @click="closeRangeInput"></div>
@@ -34,7 +34,6 @@
                <input type="text" v-model="range" />
                <button @click="changeRange" class="btn">确定</button>
            </div>

            <div v-show="true" class="search-val-box">
                <div
                    @click="searchVlaClick(item)"
@@ -89,13 +88,24 @@
                style="object-fit: fill"
            ></video>
        </el-dialog>
        <el-dialog
            :title="drawDialogTitle"
            :modal="true"
            :visible.sync="drawDialogVisible"
            :before-close="drawDialogBeforeClose"
            :close-on-click-modal="true"
            class="video-draw-box"
        >
            <input type="text" v-model="drawName" placeholder="请输入绘制线或面的名称" />
            <button @click="saveDrawInfo">保存</button>
        </el-dialog>
    </div>
</template>

<script>
import EntityDraw from "@/utils/EntityDraw.js"
import { listQuery, accurateSearch } from "@/utils/search.js"
import { getVideoList, getDevices, getRegionList } from '@/api/video/index.js'
import { getVideoList, getDevices, getRegionList, insertRegionSaveList } from '@/api/video/index.js'
import flvjs from 'flv.js'

let graphicLayer = null
@@ -108,7 +118,9 @@
            monitoringList: [],
            monitoringSaveList: [],
            dialogTitle: '',
            drawDialogTitle: '绘制线面',
            dialogVisible: false,
            drawDialogVisible: false,
            searchValue: '',
            searchArray: [],
            searchValBoxShow: false,
@@ -117,6 +129,10 @@
            range: 100,
            inputpopup: false,
            changeBtn: false,
            drawName: '',
            isDrawed: false,
            drawInfo: [],
            drawType: 1,
        }
    },

@@ -217,6 +233,11 @@
            this.dialogVisible = false
        },

        drawDialogBeforeClose () {
            this.drawDialogVisible = false
            this.drawName = ''
        },

        searchChange () {
            if (this.searchValue == '') {
                this.searchValBoxShow = false
@@ -242,12 +263,16 @@
        draw (type) {
            if (type == 'polyline') {
                this.inputpopup = true
                this.drawType = 1
            } else {
                this.inputpopup = false
                this.drawType = 2
            }
            const that = this
            graphicLayer.activate(type, (lastEventData) => {
                console.log('数据更新', lastEventData)
                this.drawInfo = lastEventData
                this.isDrawed = true
                this.getRegionList(type, JSON.stringify(lastEventData))
            })

@@ -257,12 +282,15 @@
            this.inputpopup = false
            this.monitoringList = this.monitoringSaveList
            graphicLayer.clearLayer()
            this.isDrawed = false
        },

        // 修改范围
        setRegion (range) {
            graphicLayer.addPolyLineGon(range, (lastEventData) => {
                console.log('数据更新', JSON.stringify(lastEventData))
                // console.log('数据更新', JSON.stringify(lastEventData))
                console.log('数据更新', lastEventData)
                this.drawInfo = lastEventData
                this.getRegionList('polyline', JSON.stringify(lastEventData))
            })
        },
@@ -295,7 +323,49 @@
            getRegionList(1, 15, positionStr).then(res => {
                this.monitoringList = res.data.data.list
            })
        }
        },

        saveDraw () {
            this.drawDialogVisible = true
        },

        saveDrawInfo () {
            if (this.drawName == '') {
                alert('请输入名称')
            } else {
                if (this.isDrawed == false) {
                    alert('请先绘制线或者面')
                } else {
                    console.log(this.drawInfo, 222)
                    let drawPositionStr = ''
                    if (this.drawType == 1) {
                        this.drawInfo.forEach(item => {
                            drawPositionStr += item[0] + ' ' + item[1] + ','
                        })
                        drawPositionStr = drawPositionStr.slice(0, drawPositionStr.length - 1)
                        console.log(333, drawPositionStr)
                    } else {
                        this.drawInfo.forEach(item => {
                            drawPositionStr += item.lng + ' ' + item.lat + ','
                        })
                        drawPositionStr += this.drawInfo[0].lng + ' ' + this.drawInfo[0].lat
                        console.log(333, drawPositionStr)

                    }
                    this.insertRegionSaveList(this.drawType, drawPositionStr, this.drawName)
                    this.drawDialogVisible = false
                    this.drawName = ''
                    alert('已保存')
                }
            }
        },

        insertRegionSaveList (type, positions, name) {
            insertRegionSaveList(type, positions, name).then(res => {
                console.log(res)

            })
        },
    },

    destroyed () {

 src/views/video/region.vue

@@ -34,14 +34,27 @@
                <div class="car-list">
                    <div class="list-box">
                        <el-table
                            :data="monitoringList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                            :data="saveRangeList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            @cell-click="rowClick"
                        >
                            <el-table-column prop="name" label="设备名称" min-width="50%"></el-table-column>
                            <el-table-column prop="manufacture" label="设备类型" min-width="50%"></el-table-column>
                            <el-table-column prop="name" label="范围名称" min-width="50%"></el-table-column>
                            <el-table-column prop="type" label="范围类型" min-width="50%">
                                <template slot-scope="scope">
                                    <span v-if="scope.row.type == 1">线</span>
                                    <span v-else>面</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="id" label="操作" min-width="50%">
                                <template slot-scope="scope">
                                    <button
                                        class="btn"
                                        @click="deleteRegionSaveList(scope.row.id)"
                                    >删除</button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="pages">
@@ -82,8 +95,7 @@
<script>
import EntityDraw from "@/utils/EntityDraw.js"
import { listQuery, accurateSearch } from "@/utils/search.js"
import monitoringList from '@/assets/data/monitoring.js'
import { getVideoList, getDevices, getRegionSaveList } from '@/api/video/index.js'
import { getVideoList, getDevices, getRegionSaveList, deleteRegionSaveList } from '@/api/video/index.js'
import flvjs from 'flv.js'

let graphicLayer = null
@@ -101,6 +113,7 @@
            searchValBoxShow: false,
            boxShow: true,
            flvPlayer: null,
            saveRangeList: [],
        }
    },

@@ -129,7 +142,15 @@

        getRegionSaveList () {
            getRegionSaveList(1, 10).then(res => {
                console.log(4444, res)
                console.log(4444, res.data.data.records)
                this.saveRangeList = res.data.data.records
            })
        },

        deleteRegionSaveList (id) {
            deleteRegionSaveList(id).then(res => {
                console.log(res)
                this.getRegionSaveList()
            })
        },

@@ -165,14 +186,15 @@
        },

        rowClick (row) {
            this.$EventBus.$emit('toPosition', {
                layerName: 'monitoringLayers',
                siteJd: row.longitude,
                siteWd: row.latitude,
                siteGd: 60000,
                siteHeading: -3,
                sitePitch: -90
            })
            // this.$EventBus.$emit('toPosition', {
            //     layerName: 'monitoringLayers',
            //     siteJd: row.longitude,
            //     siteWd: row.latitude,
            //     siteGd: 60000,
            //     siteHeading: -3,
            //     sitePitch: -90
            // })
            console.log('暂无定位')
        },

        async siteClick (e) {
@@ -205,7 +227,6 @@
        },

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

@@ -213,16 +234,16 @@
            if (this.searchValue == '') {
                this.searchValBoxShow = false
                this.searchArray = []
                this.monitoringList = monitoringList
                // this.monitoringList = monitoringList
            } else {
                this.searchArray = listQuery(monitoringList, this.searchValue, 'name')
                // this.searchArray = listQuery(monitoringList, this.searchValue, 'name')
                this.searchValBoxShow = true
            }
        },

        searchClick () {
            this.searchValBoxShow = false
            this.monitoringList = accurateSearch(monitoringList, this.searchValue, 'name')
            // this.monitoringList = accurateSearch(monitoringList, this.searchValue, 'name')
        },

        searchVlaClick (item) {
@@ -348,6 +369,19 @@
                // background-color: #fff;
                .list-box {
                    flex: 1;
                    .btn {
                        width: 60px;
                        height: 30px;
                        background-color: #65b1ff;
                        color: #fff;
                        border-radius: 4px;
                        cursor: pointer;
                        margin-top: 10px;
                    }
                    .btn:active {
                        background-color: rgb(0, 92, 169);
                        border: 1px solid rgb(0, 92, 169);
                    }
                }
            }