修改绘制线距离大小

guanqb

2022-11-18 1031b0e50e532929a7aad710a1cdf9abfc0d0051

修改绘制线距离大小

 package-lock.json

Diff too large

 src/views/video/list.vue

@@ -13,7 +13,12 @@
    <div class="container">
        <div v-show="boxShow" class="container-content">
            <div class="search-box">
                <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                <input
                    v-model="searchValue"
                    @input="searchChange"
                    type="text"
                    placeholder="请输入搜索条件"
                />
                <button @click="searchClick" class="el-icon-search"></button>
            </div>

@@ -21,36 +26,72 @@
                <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"
                    @click="inputpopup = true"
                    v-show="changeBtn"
                >修改范围</el-button>
            </div>
            <div class="range-input" v-show="changeBtn && inputpopup">
                <h3>请输入距离</h3>
                <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)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
                </div>
                <div
                    @click="searchVlaClick(item)"
                    v-for="(item, index) in searchArray"
                    :key="index"
                >{{ item.name }}</div>
            </div>

            <div class="list-show">
                <div class="car-list">
                    <div class="list-box">
                        <el-table :data="monitoringList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        <el-table
                            :data="monitoringList.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">
                            :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="manufacturer" label="设备类型" min-width="50%"></el-table-column>
                        </el-table>
                    </div>
                    <div class="pages">
                        <el-pagination background layout="prev, pager, next" :total="monitoringList.length"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="monitoringList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <video id="videoElement" autoplay controls width="100%" height="100%" style="object-fit: fill"></video>
        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                id="videoElement"
                autoplay
                controls
                width="100%"
                height="100%"
                style="object-fit: fill"
            ></video>
        </el-dialog>
    </div>
</template>
@@ -77,6 +118,9 @@
            searchValBoxShow: false,
            boxShow: true,
            flvPlayer: null,
            range: 5000,
            inputpopup: false,
            changeBtn: false,
        }
    },

@@ -200,6 +244,12 @@
        },

        draw (type) {
            if (type == 'polyline') {
                this.inputpopup = false
                this.changeBtn = true
            } else {
                this.changeBtn = false
            }
            const that = this
            graphicLayer.activate(type, (lastEventData) => {
                console.log('数据更新', JSON.stringify(lastEventData))
@@ -208,12 +258,13 @@
        },

        removeDrawLayer () {
            this.changeBtn = false
            graphicLayer.clearLayer()
        },

        // 修改范围
        setRegion () {
            graphicLayer.addPolyLineGon(5000, (lastEventData) => {
        setRegion (range) {
            graphicLayer.addPolyLineGon(range, (lastEventData) => {
                console.log('数据更新', JSON.stringify(lastEventData))
            })
        },
@@ -222,6 +273,11 @@
        boxResize (val) {
            this.boxShow = val
        },

        changeRange () {
            this.setRegion(this.range)
            this.inputpopup = false
        }
    },

    destroyed () {
@@ -316,7 +372,7 @@
            border-radius: 10px;
            overflow-y: auto;

            &>div {
            & > div {
                height: 100%;
                padding: 0 10px;
                line-height: 36px;
@@ -337,10 +393,38 @@
            }
        }

        .range-input {
            position: absolute;
            right: -190px;
            top: 20px;
            width: 180px;
            height: 100px;
            background-color: $bg-color;
            input {
                outline: none;
                border: 1px solid #005ca9;
                background-color: transparent;
                width: 160px;
                height: 30px;
                margin-top: 10px;
                color: #fff;
                padding-left: 6px;
            }
            .btn {
                width: 60px;
                height: 30px;
                background-color: #65b1ff;
                color: #fff;
                border-radius: 4px;
                cursor: pointer;
                margin-top: 10px;
            }
        }

        .list-show {
            flex: 1;

            &>div {
            & > div {
                height: 100%;
                display: flex;
                flex-direction: column;