样式修改

guanqb

2022-12-26 32121c34d044b31ce2849f4fd7d8bf4a4faf134a

样式修改

 src/router/axios.js

@@ -31,8 +31,9 @@
    // baseURL: 'http://192.168.0.105:18080/api',
    // baseURL: 'http://192.168.0.115:82',
    // baseURL: 'http://192.168.0.112:18080',
    baseURL: 'http://192.168.0.115:1888/api',

    baseURL: 'http://192.168.0.112:9091',
    // baseURL: 'http://192.168.0.112:9091',
    // baseURL: 'http://192.168.0.106:1888/api',

    // 内网部署地址
@@ -58,7 +59,8 @@
            // config.baseURL = 'http://192.168.0.105:80/api'
            // config.baseURL = 'http://192.168.0.115:18080/api'
            // 内网部署地址
            config.baseURL = 'http://10.141.11.11:18185/api'
            // config.baseURL = 'http://10.141.11.11:18185/api'
            config.baseURL = 'http://192.168.0.115:18185/api'
            // config.baseURL = 'http://192.168.0.106:1888/api'
        } else if (config.requestBaseUrl == 'fengt') {
            config.baseURL = 'http://10.141.11.11:18080'

 src/styles/element-ui/element-ui.scss

@@ -137,6 +137,10 @@
    // background-color: rgba(0, 92, 169, 0.3);
    background-color: $table-body-tr-n-color;
}
.el-select-dropdown__empty{
    background-color: rgba(9, 53, 182, 0.93) !important;
    color: #fff;
}




 src/styles/media/index.scss

@@ -305,6 +305,13 @@
                            .selects-container .selects-box .text {
                                font-size: countSizeVh(15);
                            }
                            .selects-container .select-options div {
                                height: countSizeVh(36);
                                line-height: countSizeVh(36);
                            }
                            .selects-container .issel{
                                height:countSizeVh(170)!important;
                            }
                        }

                        .center-container {
@@ -953,7 +960,7 @@
                                }

                                .state-box {
                                    width: countSizeVw(20, 1920);
                                    width: countSizeVh(20);
                                    height: countSizeVh(20);
                                    line-height: countSizeVh(20);
                                }
@@ -1169,7 +1176,7 @@
                        }

                        .region {
                            .left-container {
                            .region-left-container {
                                .search-box {
                                    padding: countSizeVw(6, 1920) countSizeVh(6);
                                    height: countSizeVh(52);
@@ -1239,6 +1246,10 @@

                                    .el-table .cell {
                                        line-height: countSizeVh(48);
                                        font-size: countSizeVh(16);
                                    }

                                    .el-button--text{
                                        font-size: countSizeVh(16);
                                    }

@@ -1453,6 +1464,7 @@
                                        margin: 0 countSizeVw(5, 1920);
                                        border: countSizeVh(1) solid #cecece;
                                        border-radius: countSizeVh(4) countSizeVw(4, 1920);
                                        font-size:countSizeVh(16);
                                    }
                                }
                            }
@@ -1515,6 +1527,26 @@
                                .category {
                                    width: countSizeVw(96, 1920);
                                }
                                .el-switch{
                                    font-size: countSizeVh(14);
                                    height: countSizeVh(16);
                                    line-height: countSizeVh(16);
                                }
                                .el-switch__core{
                                    height: countSizeVw(18, 1920);
                                    width: countSizeVw(40, 1920)!important;
                                    border-radius: countSizeVw(10, 1920);
                                    border: countSizeVh(1) solid #DCDFE6;
                                }
                                .el-switch__core:after{
                                    top: countSizeVh(1) ;
                                    left: countSizeVh(1) ;
                                    width: countSizeVw(16, 1920);
                                    height: countSizeVw(16, 1920);
                                }
                                .el-switch.is-checked .el-switch__core::after{
                                    margin-left:countSizeVw(24, 1920)!important;
                                }
                            }
                        }

@@ -1532,6 +1564,7 @@
                                        margin: 0 countSizeVw(5, 1920);
                                        border: countSizeVh(1) solid #cecece;
                                        border-radius: countSizeVw(4, 1920);
                                        font-size:countSizeVh(16);
                                    }
                                }
                            }
@@ -1859,6 +1892,10 @@
                    font-size: countSizeVh(24);
                }

                .dc-location-bar{
                    font-size: countSizeVh(16);
                }

                .main-content.spread {
                    width: countSizeVw(400, 1920);
                }

 src/views/video/list.vue

@@ -13,7 +13,12 @@
    <div class="list 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>

@@ -30,40 +35,74 @@
                <button @click="changeRange" class="btn">确定</button>
            </div>
            <div v-show="searchValBoxShow" 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" style="width: 100%"
                        <el-table
                            :data="monitoringList"
                            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="35%"></el-table-column>
                            <el-table-column prop="pTZTypeText" label="设备类型" min-width="35%"></el-table-column>
                            <el-table-column prop="status" label="状态" min-width="30%">
                                <template slot-scope="scope">
                                    <div class="state-box" :class="{ online: scope.row.status == '1' }"></div>
                                    <div
                                        class="state-box"
                                        :class="{ online: scope.row.status == '1' }"
                                    ></div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </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>
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :page-size="pagesize"
                            :page-count="pagesCount"
                            :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>
        <el-dialog :title="drawDialogTitle" :modal="true" :visible.sync="drawDialogVisible"
            :before-close="drawDialogBeforeClose" :close-on-click-modal="true" class="video-draw-box">
        <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>
@@ -123,6 +162,7 @@
        getVideoList (current, size, name) {
            getVideoList(current, size, name).then(res => {
                this.pagesCount = res.data.data.pages
                console.log(res, 22222)
                this.monitoringList = res.data.data.list
                this.monitoringSaveList = res.data.data.list
                this.$EventBus.$emit('mapRemoveLayer', {
@@ -484,7 +524,7 @@
            border-radius: 10px;
            overflow-y: auto;

            &>div {
            & > div {
                height: 100%;
                padding: 0 10px;
                line-height: 36px;
@@ -553,7 +593,7 @@
        .list-show {
            flex: 1;

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

 src/views/video/region.vue

@@ -11,7 +11,7 @@

<template>
    <div class="region container">
        <div class="left-container">
        <div class="region-left-container">
            <div v-show="boxShow" class="container-content">
                <div class="search-box">
                    <input
@@ -84,7 +84,7 @@
                </div>
            </div>
        </div>
        <div class="item video1">
        <div class="item video1" v-show="isShowVideo1">
            <div class="select" v-show="isShowSelect.video1" @mouseenter="enterSelectBox(1)">
                <el-select
                    size="small"
@@ -112,7 +112,7 @@
                ></video>
            </div>
        </div>
        <div class="item video2">
        <div class="item video2" v-show="isShowVideo2">
            <div class="select" v-show="isShowSelect.video2" @mouseenter="enterSelectBox(2)">
                <el-select
                    size="small"
@@ -140,7 +140,7 @@
                ></video>
            </div>
        </div>
        <div class="item video3">
        <div class="item video3" v-show="isShowVideo3">
            <div class="select" v-show="isShowSelect.video3" @mouseenter="enterSelectBox(3)">
                <el-select
                    size="small"
@@ -168,7 +168,7 @@
                ></video>
            </div>
        </div>
        <div class="item video4">
        <div class="item video4" v-show="isShowVideo4">
            <div class="select" v-show="isShowSelect.video4" @mouseenter="enterSelectBox(4)">
                <el-select
                    size="small"
@@ -196,7 +196,7 @@
                ></video>
            </div>
        </div>
        <div class="item video5">
        <div class="item video5" v-show="isShowVideo5">
            <div class="select" v-show="isShowSelect.video5" @mouseenter="enterSelectBox(5)">
                <el-select
                    size="small"
@@ -224,7 +224,7 @@
                ></video>
            </div>
        </div>
        <div class="item video6">
        <div class="item video6" v-show="isShowVideo6">
            <div class="select" v-show="isShowSelect.video6" @mouseenter="enterSelectBox(6)">
                <el-select
                    size="small"
@@ -252,7 +252,7 @@
                ></video>
            </div>
        </div>
        <div class="item video7">
        <div class="item video7" v-show="isShowVideo7">
            <div class="select" v-show="isShowSelect.video7" @mouseenter="enterSelectBox(7)">
                <el-select
                    size="small"
@@ -282,7 +282,7 @@
                ></video>
            </div>
        </div>
        <div class="item video8">
        <div class="item video8" v-show="isShowVideo8">
            <div class="select" v-show="isShowSelect.video8" @mouseenter="enterSelectBox(8)">
                <el-select
                    size="small"
@@ -383,6 +383,14 @@
                video7: false,
                video8: false,
            },
            isShowVideo1: false,
            isShowVideo2: false,
            isShowVideo3: false,
            isShowVideo4: false,
            isShowVideo5: false,
            isShowVideo6: false,
            isShowVideo7: false,
            isShowVideo8: false,
        }
    },

@@ -593,7 +601,7 @@
            //     siteHeading: -3,
            //     sitePitch: -90
            // })

            console.log(row, 1111)
        },

        async siteClick (e) {
@@ -755,7 +763,7 @@
    width: 100%;
    height: 100%;

    .left-container {
    .region-left-container {
        position: relative;
        width: 100%;
        height: 100%;