活动新增区域划分面

guanqb

2023-02-11 712babe5fe7efc9336ae0963fd0e1ae31e757812

活动新增区域划分面

 src/api/activity/index.js

@@ -6,7 +6,7 @@
 * @param {*}
 * @returns
 */
export const getSecurityList = (current, size, type, name, startTime, endTime,deptId) => {
export const getSecurityList = (current, size, type, name, startTime, endTime, deptId) => {
    return request({
        url: `/api/security/security/page`,
        method: 'get',
@@ -184,14 +184,15 @@
 * @param {*} type  箭头类型
 * @returns
 */
export const addSecurityPlot = (securityId, position, type) => {
export const addSecurityPlot = (securityId, position, type, name) => {
    return request({
        url: `/api/securityPlot/securityPlot/save`,
        method: 'post',
        data: {
            securityId,
            position,
            type
            type,
            name
        }
    })
}
@@ -212,7 +213,7 @@
}

/**
 * 获得活动标绘箭头列表
 * 更新活动标绘箭头
 * @param {*} securityId  活动ID
 * @returns
 */

 src/styles/base/index.scss

@@ -779,8 +779,8 @@
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        width: 340px;
        height: 200px;
        width: 300px;
        height: 170px;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);
@@ -793,11 +793,43 @@
                width: 60px;
                height: 30px;
                text-align: center;
                margin-top: 10px;
            }

            &>div {
                display: flex;
                justify-content: space-around;
                justify-content: center;
                margin-bottom: 10px;
            }
        }
    }
}

.add-polygon-box {
    .el-dialog {
        margin: 0 !important;
        display: flex;
        flex-direction: column;
        width: 300px;
        height: 140px;
        top: 50%;
        left: 50% !important;
        transform: translate(-50%, -50%);

        .el-dialog__body {
            .el-button {
                padding: 0;
                background-color: #409eff;
                color: #fff;
                width: 60px;
                height: 30px;
                text-align: center;
                margin-top: 10px;
            }

            &>div {
                display: flex;
                justify-content: center;
                margin-bottom: 10px;
            }
        }

 src/views/activity/index.vue

@@ -484,7 +484,6 @@
            :title="lineEditTitle"
            :modal="false"
            :visible.sync="lineEditVisible"
            :before-close="lineEditBeforeClose"
            :close-on-click-modal="true"
            class="edit-line-box"
        >
@@ -501,8 +500,26 @@
                </div>
            </div>
            <div>
                <el-button>查看视频</el-button>
                <el-button>保存</el-button>
                <el-button @click="watchVideo">查看视频</el-button>
                <el-button @click="saveLineInfo">保存</el-button>
            </div>
        </el-dialog>

        <el-dialog
            :title="polygonAddTitle"
            :modal="false"
            :visible.sync="polygonAddVisible"
            :close-on-click-modal="true"
            class="add-polygon-box"
        >
            <div>
                <div>设置名称:</div>
                <div>
                    <input type="text" placeholder="请输入区域名称" v-model="polygonName" />
                </div>
            </div>
            <div>
                <el-button @click="savePolygonInfo">保存</el-button>
            </div>
        </el-dialog>
    </div>
@@ -728,6 +745,10 @@
            videoShow: false,
            lineEditVisible: false,
            lineEditTitle: '弹窗',
            polygonAddTitle: '新增活动区域',
            polygonAddVisible: false,
            polygonName: '',
            polygonPositionStr: '',
        }
    },
    created () {
@@ -745,8 +766,6 @@
        this.getCarList()

        this.getSecurityList(this.currentPage, this.pagesize)



    },
    mounted () {
@@ -902,7 +921,7 @@
                                id: item.id,
                                policemanId: item.policemanId
                            },
                            incident: this.overlayTypeClick
                            // incident: this.overlayTypeClick
                        })

                    } else if (item.type == 3 && pointShow) {
@@ -1313,10 +1332,27 @@

        drawArrow (type) {
            if (type == 'polygon') {
                const that = this
                let flag = false
                plot && plot.draw(type, overlay => {
                    if (overlay) {
                        drawArrowLayers.addOverlay(overlay)
                        plot.edit(overlay)
                        plot.edit(overlay, (e) => {
                            flag = true
                            let positionStr = ''
                            overlay._positions.forEach(item => {
                                positionStr += item._lng + ' ' + item._lat + ','
                            })
                            positionStr = positionStr.slice(0, positionStr.length - 1)
                            this.polygonPositionStr = positionStr
                            // overlay.on(global.DC.MouseEventType.CLICK, this.polygonClick)
                            document.oncontextmenu = function () {
                                if (flag) {
                                    that.polygonAddVisible = true
                                    flag = false
                                }
                            }
                        })
                    }
                })
            } else {
@@ -1457,7 +1493,6 @@

        // 地图绘制元素点击事件
        overlayTypeClick (e) {
            console.log(e)
            this.policeIconIsCreated = true
            if ('policemanId' in e.overlay.attrParams) {
                this.policeChooseTitle = '选择警员'
@@ -1466,23 +1501,27 @@
                this.policeType = e.overlay.attrParams.policemanId
                this.policeChooseVisible = true
            } else if ('carId' in e.overlay.attrParams) {
                if (e.overlay.attrParams.carId) {
                    this.policeChooseTitle = '选择警车'
                    this.policeOption = this.policecarOption
                    this.policeIconId = e.overlay.attrParams.id
                    this.policeType = e.overlay.attrParams.carId
                    this.policeChooseVisible = true
                } else {
                    console.log(111)
                    this.lineEditVisible = true
                }

                this.policeChooseTitle = '选择警车'
                this.policeOption = this.policecarOption
                this.policeIconId = e.overlay.attrParams.id
                this.policeType = e.overlay.attrParams.carId
                this.policeChooseVisible = true
            }
        },

        // 保存活动标绘箭头
        addSecurityPlot (securityId, position, type) {
            addSecurityPlot(securityId, position, type).then(res => {
        addSecurityPlot (securityId, position, type, name) {
            addSecurityPlot(securityId, position, type, name).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '保存成功',
                        type: 'warning'
                    })
                } else {
                    this.$message({
                        message: '保存失败'
                    })
                }
                this.getSecurityPlotList(securityId, this.arrowBtnSwitch)
            })
        },
@@ -1499,6 +1538,7 @@
                res.data.data.forEach(item => {
                    let position = item.position.slice(11, item.position.length - 1).replace(/,/g, ';').replace(/ /g, ',')
                    let chooseArrow = null
                    let nameLabel = null
                    if (item.type == 1) {
                        chooseArrow = new global.DC.AttackArrow(position)
                    } else if (item.type == 2) {
@@ -1507,6 +1547,15 @@
                        chooseArrow = new global.DC.FineArrow(position)
                    } else if (item.type == 4) {
                        chooseArrow = new global.DC.TailedAttackArrow(position)
                    } else if (item.type == 5) {
                        chooseArrow = new global.DC.Polygon(position)
                        let center = this.getCenter(item.position)
                        let centerPosition = new global.DC.Position(center[0], center[1])
                        nameLabel = new global.DC.Label(centerPosition, item.name)
                        arrowsListLayer.addOverlay(nameLabel)
                        // nameLabel.setStyle({
                        //     "font": "30px",
                        // })
                    }
                    chooseArrow.attrParams = { 'id': item.id }
                    arrowsListLayer.addOverlay(chooseArrow)
@@ -1532,8 +1581,8 @@
            })
        },

        updateSecurityPlot (id, position) {
            updateSecurityPlot(id, position).then(res => {
        updateSecurityPlot (id, position, name) {
            updateSecurityPlot(id, position, name).then(res => {
                this.getSecurityPlotList(this.showingSecurityId, this.arrowBtnSwitch)
            })
        },
@@ -1692,6 +1741,41 @@
            }
        },

        // 观看视频
        watchVideo () {
            this.videoShow = true
        },

        // 保存巡逻路线信息
        saveLineInfo () {
            console.log('保存')
        },

        // 点击区域
        // polygonClick () {
        //     console.log('polygonClick')
        // },

        // 保存绘制区域
        savePolygonInfo () {
            this.addSecurityPlot(this.showingSecurityId, this.polygonPositionStr, 5, this.polygonName)
            this.polygonAddVisible = false
        },

        // 获取面的中心点
        getCenter (str) {
            let itPositionStr = str.slice(11, str.length - 1)
            let positionArr = itPositionStr.split(',')
            let positionNewArr = []
            positionArr.forEach(item => {
                positionNewArr.push([Number(item.split(' ')[0]), Number(item.split(' ')[1])])
            })
            positionNewArr.push([Number(positionArr[0].split(' ')[0]), Number(positionArr[0].split(' ')[1])])
            let polygon = this.$turf.polygon([positionNewArr])
            let center = this.$turf.centroid(polygon)
            return [center.geometry.coordinates[0], center.geometry.coordinates[1]]
        },

    },

    computed: {

 src/views/home/index.vue

@@ -11,17 +11,29 @@

<template>
    <div class="home-page container">
        <left-container class="left-container" @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail"
            @showkeypersondetail="showkeypersondetail" ref="leftContainer"></left-container>
        <left-container
            class="left-container"
            @showpeopledetail="showpeopledetail"
            @showlanddetail="showlanddetail"
            @showkeypersondetail="showkeypersondetail"
            ref="leftContainer"
        ></left-container>

        <right-container class="right-container" @showequimentdetail="showequimentdetail"
            @selectPoliceChangeEventData="selectPoliceChangeEventData" @changeActivityType="changeActivityType"
            ref="rightContainer"></right-container>
        <right-container
            class="right-container"
            @showequimentdetail="showequimentdetail"
            @selectPoliceChangeEventData="selectPoliceChangeEventData"
            @changeActivityType="changeActivityType"
            ref="rightContainer"
        ></right-container>

        <bottom-container class="bottom-container" ref="bottomContainer"
        <bottom-container
            class="bottom-container"
            ref="bottomContainer"
            @changePoliceSituationHistoryType="changePoliceSituationHistoryType"
            @policeSituationChange="policeSituationChange"
            @policeSituationSiteClick="policeSituationSiteClick"></bottom-container>
            @policeSituationSiteClick="policeSituationSiteClick"
        ></bottom-container>

        <div class="center-container">
            <div class="layers-control-btn house">
@@ -35,7 +47,7 @@
            </div>
            <!-- <div class="layers-control-btn moitor">
                <el-checkbox v-model="monitoringLayerShow" @change="monitoringChange">监控</el-checkbox>
            </div> -->
            </div>-->
            <!-- <div class="layers-control-btn panorama">
                <el-checkbox v-model="panoramaLayerShow" @change="panoramaChange">全景</el-checkbox>
            </div>-->
@@ -45,24 +57,52 @@
        </div>

        <div ref="RegionSelect" style="left: 0;" class="region-select">
            <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue"
                :options="policeStationOptions" :optionsName="'name'" :selectAllClass="selectAllClass"></map-select>
            <map-select
                class="map-select"
                @selectCheck="policeStationSelect"
                :checkValue="policeStationCheckValue"
                :options="policeStationOptions"
                :optionsName="'name'"
                :selectAllClass="selectAllClass"
            ></map-select>

            <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions"
                :optionsName="'name'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="areaSelect"
                :checkValue="areaCheckValue"
                :options="areaOptions"
                :optionsName="'name'"
            ></map-select>

            <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue"
                :options="housingOptions" :optionsName="'name'"></map-select>
            <map-select
                class="map-select"
                @selectCheck="housingSelect"
                :checkValue="housingCheckValue"
                :options="housingOptions"
                :optionsName="'name'"
            ></map-select>
        </div>

        <el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose" :close-on-click-modal="true" class="panorama-details-box">
        <el-dialog
            :title="panoramaTitle"
            :modal="true"
            :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose"
            :close-on-click-modal="true"
            class="panorama-details-box"
        >
            <!-- <iframe src="http://vr.jxpskj.com/JXSFKZQJ/QJ/" style="width: 100%; height: 100%;" frameborder="0"></iframe>-->
            <iframe :src="panoramaVrUrl" style="width: 100%; height: 100%;" frameborder="0" />
        </el-dialog>

        <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose"
            :close-on-click-modal="true" class="phone-details-box">
        <el-dialog
            :title="phoneTitle"
            :modal="true"
            :visible.sync="phoneVisible"
            :before-close="phoneBeforeClose"
            :close-on-click-modal="true"
            class="phone-details-box"
        >
            <div class="item">
                <div>责任人：</div>
                <div>{{ phoneDetails.person }}</div>
@@ -82,8 +122,14 @@
        </el-dialog>

        <!-- 户籍人口 -->
        <el-dialog :title="peopleTitle" :modal="true" :visible.sync="peopleVisible" :before-close="personInfoClose"
            :close-on-click-modal="true" class="area-details-box">
        <el-dialog
            :title="peopleTitle"
            :modal="true"
            :visible.sync="peopleVisible"
            :before-close="personInfoClose"
            :close-on-click-modal="true"
            class="area-details-box"
        >
            <div class="header">
                <div>
                    人员名称：
@@ -94,12 +140,19 @@
                    <input type="text" v-model="peopleCallPhone" placeholder="请输入联系电话" />
                </div>
                <el-button type="primary" icon="el-icon-search" @click="searchPeopleDetail">搜索</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button>
                <el-button
                    type="primary"
                    icon="el-icon-delete"
                    @click="clearPeopleDetailSearchValue"
                >清空</el-button>
            </div>

            <el-table :data="peopleInfoList" style="width: 100%"
            <el-table
                :data="peopleInfoList"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column prop="realName" label="姓名"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
@@ -108,15 +161,26 @@
            </el-table>

            <div class="pages" ref="tablePagination">
                <el-pagination background layout="prev, pager, next" :page-size="peoplePage.pageSize"
                    :total="peoplePage.total" :current-page="peoplePage.currentPage"
                    @current-change="handlePeopleCurrentChange"></el-pagination>
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="peoplePage.pageSize"
                    :total="peoplePage.total"
                    :current-page="peoplePage.currentPage"
                    @current-change="handlePeopleCurrentChange"
                ></el-pagination>
            </div>
        </el-dialog>

        <!-- 重点人员 -->
        <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible"
            :before-close="personInfoClose" :close-on-click-modal="true" class="keyPerson-details-box">
        <el-dialog
            :title="keyPersonTitle"
            :modal="true"
            :visible.sync="keyPersonVisible"
            :before-close="personInfoClose"
            :close-on-click-modal="true"
            class="keyPerson-details-box"
        >
            <div class="header">
                <div>
                    人员名称：
@@ -127,12 +191,19 @@
                    <input type="text" v-model="peopleCallPhone" placeholder="请输入联系电话" />
                </div>
                <el-button type="primary" icon="el-icon-search" @click="searchPeopleDetail">搜索</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="clearPeopleDetailSearchValue">清空</el-button>
                <el-button
                    type="primary"
                    icon="el-icon-delete"
                    @click="clearPeopleDetailSearchValue"
                >清空</el-button>
            </div>

            <el-table :data="keyPersonDetailArr" style="width: 100%"
            <el-table
                :data="keyPersonDetailArr"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column prop="zdryxl" label="重点人员类型"></el-table-column>
                <el-table-column prop="realName" label="姓名"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
@@ -142,20 +213,34 @@
            </el-table>

            <div class="pages" ref="tablePagination">
                <el-pagination background layout="prev, pager, next" :page-size="peoplePage.pageSize"
                    :total="peoplePage.total" :current-page="peoplePage.currentPage"
                    @current-change="handlePersonPageChange"></el-pagination>
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="peoplePage.pageSize"
                    :total="peoplePage.total"
                    :current-page="peoplePage.currentPage"
                    @current-change="handlePersonPageChange"
                ></el-pagination>
            </div>
        </el-dialog>

        <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose" :close-on-click-modal="true" class="equiment-details-box">
        <el-dialog
            :title="equimentTitle"
            :modal="true"
            :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose"
            :close-on-click-modal="true"
            class="equiment-details-box"
        >
            <div class="equiment-detail">
                <div class="others">
                    <el-table :data="equimentTableData" style="width: 100%"
                    <el-table
                        :data="equimentTableData"
                        style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :row-class-name="tableRowClassName">
                        :row-class-name="tableRowClassName"
                    >
                        <el-table-column type="index" :index="indexMethod" label="序号"></el-table-column>
                        <el-table-column prop="channelId" label="通道编号"></el-table-column>
                        <el-table-column prop="deviceId" label="设备编号"></el-table-column>
@@ -167,23 +252,40 @@
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button @click="play(scope.row)" type="text" size="small" title="播放视频">
                                <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 class="pages">
                        <el-pagination background layout="prev, pager, next" :total="equimentPagingTotal"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="equimentPagingTotal"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose"
            :close-on-click-modal="true" class="land-details-box">
        <el-dialog
            :title="landTitle"
            :modal="true"
            :visible.sync="landVisible"
            :before-close="landBeforeClose"
            :close-on-click-modal="true"
            class="land-details-box"
        >
            <div class="header">
                <div>
                    负责人：
@@ -194,12 +296,19 @@
                    <input type="text" v-model="callPhone" placeholder="请输入联系电话" />
                </div>
                <el-button type="primary" icon="el-icon-search" @click="searchLandDetail">搜索</el-button>
                <el-button type="primary" icon="el-icon-delete" @click="clearLandDetailSearchValue">清空</el-button>
                <el-button
                    type="primary"
                    icon="el-icon-delete"
                    @click="clearLandDetailSearchValue"
                >清空</el-button>
            </div>

            <el-table :data="landDetailArr" style="width: 100%"
            <el-table
                :data="landDetailArr"
                style="width: 100%"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
            >
                <el-table-column label="序号" type="index" width="50" align="center">
                    <template slot-scope="scope">
                        <span>{{(landPage.currentPage - 1) * landPage.pageSize + scope.$index + 1}}</span>
@@ -211,17 +320,34 @@
                <el-table-column prop="phone" label="联系电话"></el-table-column>
            </el-table>
            <div class="pages" ref="tablePagination">
                <el-pagination background layout="prev, pager, next" :page-size="landPage.pageSize"
                    :total="landPage.total" :current-page="landPage.currentPage"
                    @current-change="landHandleCurrentChange"></el-pagination>
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :page-size="landPage.pageSize"
                    :total="landPage.total"
                    :current-page="landPage.currentPage"
                    @current-change="landHandleCurrentChange"
                ></el-pagination>
            </div>
        </el-dialog>

        <el-dialog title="警情信息" :modal="true" :visible.sync="policeSituationVisible"
            :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box">
        <el-dialog
            title="警情信息"
            :modal="true"
            :visible.sync="policeSituationVisible"
            :before-close="policeSituationBeforeClose"
            :close-on-click-modal="true"
            class="policeSituation-details-box"
        >
            <div class="btn-change">
                <div :class="{ on: policeInformationType == '接警信息' }" @click="alarmOrActAsPolice('接警信息')">接警信息</div>
                <div :class="{ on: policeInformationType == '出警信息' }" @click="alarmOrActAsPolice('出警信息')">出警信息</div>
                <div
                    :class="{ on: policeInformationType == '接警信息' }"
                    @click="alarmOrActAsPolice('接警信息')"
                >接警信息</div>
                <div
                    :class="{ on: policeInformationType == '出警信息' }"
                    @click="alarmOrActAsPolice('出警信息')"
                >出警信息</div>
            </div>

            <div v-show="policeInformationType == '接警信息'" class="box">
@@ -283,7 +409,10 @@
                </div>
            </div>

            <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'" class="box">
            <div
                v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) != '{}'"
                class="box"
            >
                <div class="item">
                    <div>处警单位编号:</div>
                    <div>{{ CJdata.CJDWBH }}</div>
@@ -340,14 +469,29 @@
                </div>
            </div>

            <div v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'" class="box no-data">暂无数据
            </div>
            <div
                v-show="policeInformationType == '出警信息' && JSON.stringify(CJdata) == '{}'"
                class="box no-data"
            >暂无数据</div>
        </el-dialog>

        <el-dialog :title="dialogEquimentVideoTitle" :modal="true" :visible.sync="dialogEquimentVideoVisible"
            :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
            :title="dialogEquimentVideoTitle"
            :modal="true"
            :visible.sync="dialogEquimentVideoVisible"
            :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>
@@ -1986,8 +2130,6 @@
            margin: 0 5px;
            flex: 1;
        }


    }

    .equiment-detail {