视频预览线面增加使用调色盘

guanqb

2023-03-01 87875fb1dd94b52d75687bb778cb6803ab718415

视频预览线面增加使用调色盘

 src/styles/base/index.scss

@@ -648,7 +648,7 @@
        display: flex;
        flex-direction: column;
        width: 320px;
        height: 180px;
        height: 210px;

        .el-dialog__body {
            flex: 1;
@@ -661,14 +661,20 @@

            &>div {
                display: flex;
                margin-bottom: 6px;

                &>div {
                    width: 100px;
                }
            }

            .pick-color-box {
                width: 200px;
                text-align: left;
            }

            input {
                width: 90%;
                width: 200px;
                height: 30px;
                font-size: 16px;
                text-indent: 1em;

 src/styles/media/index.scss

@@ -2086,10 +2086,15 @@

                        .el-dialog {
                            width: countSizeVw(320, 1920);
                            height: countSizeVh(180);
                            height: countSizeVh(210);
                        }

                        .pick-color-box {
                            width: countSizeVw(200, 1920);
                        }

                        .el-dialog .el-dialog__body input {
                            width: countSizeVw(200, 1920);
                            height: countSizeVh(30);
                            font-size: countSizeVh(16);
                            border: countSizeVh(1) solid #005ca9;

 src/views/activity/index.vue

@@ -1250,9 +1250,9 @@
            if (iconName == 'activity') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0, url: '/img/icon/activity.png' }
            } else if (iconName == 'policeman') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.01, url: '/img/icon/man3.png', id: plotId, policemanId: policeId, deptId: deptId, color: color }
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.05, url: '/img/icon/man3.png', id: plotId, policemanId: policeId, deptId: deptId, color: color }
            } else if (iconName == 'policecar') {
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.01, url: '/img/icon/car3.png', id: plotId, carId: policeId, deptId: deptId, color: color }
                positionObj = { lng: `${positionArr[0]}`, lat: `${positionArr[1]}`, alt: 0.05, url: '/img/icon/car3.png', id: plotId, carId: policeId, deptId: deptId, color: color }
            }
            return positionObj
        },
@@ -2365,11 +2365,6 @@
            let polygon = this.$turf.polygon([positionNewArr])
            let center = this.$turf.centroid(polygon)
            return [center.geometry.coordinates[0], center.geometry.coordinates[1]]
        },

        // 改变巡逻路线颜色
        changeLineColor (color) {
            this.chooseColor = color
        },

        // 删除警车

 src/views/video/list.vue

@@ -85,6 +85,15 @@
                <div>距离：</div>
                <input type="text" v-model="range" placeholder="请输入绘制线的范围" />
            </div>
            <div class="line">
                <div class="value-name-box">颜色：</div>
                <div class="pick-color-box">
                    <el-color-picker
                     v-model="chooseRangeColor"
                     :predefine="predefineColors" size="small">
                   </el-color-picker>
                </div>
                </div>
            <div>
                <button @click="saveDrawInfo">保存</button>
                <button @click="cancelSaveDrawInfo">取消</button>
@@ -157,6 +166,23 @@
            searchLazyFlag: true,
            searchTreeData: [],
            drawPlotData: {},
            chooseRangeColor: '#FF0000',
            predefineColors: [
            '#ff4500',
            '#ff8c00',
            '#ffd700',
            '#90ee90',
            '#00ced1',
            '#1e90ff',
            '#c71585',
            'rgba(255, 69, 0, )',
            'rgb(255, 120, 0)',
            'hsv(51, 100, 98)',
            'hsva(120, 40, 94)',
            'hsl(181, 100%, 37%)',
            'hsla(209, 100%, 56%)',
            '#c7158577'
            ],
        }
    },

@@ -432,7 +458,7 @@
                    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.insertRegionSaveList({type:this.drawType, positions:drawPositionStr, name:this.drawName, extent: extent,width:this.range,color:this.chooseRangeColor})
                this.drawDialogVisible = false
                this.drawName = ''
                if (drawPlotLayers != null) {

 src/views/video/region.vue

@@ -519,6 +519,7 @@
            }

            this.saveRangeList.forEach(item => {
                console.log(item,656565656);
                let positionStr = ''
                if(item.type == 1){
                   let linePositionStr = ''