首页相关更改

shuishen

2023-01-10 ae216e6fb66ddf3a1ca279d9aa61f937d4464c0f

首页相关更改

 src/api/home/index.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-12-27 14:19:19
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-01-09 16:23:03
 * @LastEditTime: 2023-01-10 11:50:32
 * @FilePath: \srs-police-affairs\src\api\home\index.js
 * @Description: 
 * 
@@ -80,4 +80,15 @@
            jjdwbh
        }
    })
}
}

// 获取设备统计数据 
export const getEquipment = (jjdwbh = '') => {
    return request({
        url: `/api/alarm/alarm/statisticsCameraTypeOnline`,
        method: 'get',
        params: {
            jjdwbh
        }
    })
}

 src/styles/media/index.scss

@@ -322,25 +322,22 @@
                        .equiment-detail {
                            height: countSizeVh(540);

                            .right {
                                .monitor {
                                    height: countSizeVh(540);
                                }
                            .monitor {
                                height: countSizeVh(540);
                            }

                                .others {
                                    height: countSizeVh(495);
                            .others {
                                height: countSizeVh(495);

                                    .pages {
                                        padding-bottom: countSizeVh(3);
                                        padding-top: countSizeVh(10);
                                    }
                                .pages {
                                    padding-bottom: countSizeVh(3);
                                    padding-top: countSizeVh(10);
                                }
                            }
                        }



                    }

                    .house-page {
                        .container-content {

@@ -1594,17 +1591,20 @@
                            border-radius: countSizeVh(8);
                            width: countSizeVw(480, 1920);
                            z-index: 99;
                            .left ,.right{
                                h3{

                            .left,
                            .right {
                                h3 {
                                    font-size: countSizeVh(16);
                                    height: countSizeVh(30);
                                    line-height: countSizeVh(30);
                                }

                                &>div {
                                    height: countSizeVh(44);
                                    line-height: countSizeVh(44);
                                }
    

                                ul {
                                    li {
                                        button {
@@ -1620,8 +1620,10 @@
                                    }
                                }
                            }

                            .right {
                                padding-top: countSizeVh(35);

                                ul li {
                                    height: countSizeVh(50);
                                }
@@ -2459,7 +2461,8 @@
            top: countSizeVh(116) !important;
            left: countSizeVw(0, 1920) !important;
        }
                    // el-popover-6062

        // el-popover-6062

        .el-popover {
            min-width: countSizeVw(150, 1920);

 src/views/home/components/bottomContainer.vue

@@ -91,7 +91,7 @@
                    <el-table-column prop="MEMO" label="备注" min-width="12%"></el-table-column>
                </el-table>

                <div class="pages" ref="ElPagination" v-show="policeSituationHistoryArr.length > 0">
                <div class="pages" ref="ElPagination" v-if="policeSituationHistoryArr.length > 0">
                    <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="pagesCount"
                        :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination>
                </div>
@@ -180,8 +180,8 @@

            // 分页
            pagesize: 15,
            currentPage: 1,
            pagesCount: 1,
            currentPage: 1,
            // table高度
            currentTableHeight: 0,
        }
@@ -224,14 +224,8 @@
        // 获取table高度
        setTableHeight () {
            this.$nextTick(() => {
                if (this.$refs.ElPagination) {
                    if (this.$refs.ElTableBox) {
                        this.currentTableHeight = this.$refs.ElTableBox.offsetHeight - this.$refs.ElPagination.offsetHeight
                    }
                } else {
                    if (this.$refs.ElTableBox) {
                        this.currentTableHeight = this.$refs.ElTableBox.offsetHeight
                    }
                if (this.$refs.ElTableBox && this.$refs.ElPagination) {
                    this.currentTableHeight = this.$refs.ElTableBox.offsetHeight - this.$refs.ElPagination.offsetHeight
                }
            })
        },
@@ -245,7 +239,7 @@
        handleCurrentChange: function (currentPage) {
            this.currentPage = currentPage

            this.getVideoList(this.currentPage, this.pagesize)
            this.getAlarmList({ current: this.currentPage })
        },

        // 设置默认时间
@@ -264,7 +258,7 @@
                return this.dateFormat(item)
            })

            this.getAlarmList({ start: date[0], end: date[1], page: this.currentPage })
            this.getAlarmList({ start: date[0], end: date[1], current: this.currentPage })
        },

        // 获取当前日期
@@ -380,16 +374,20 @@

        // 获取历史接警记录
        getAlarmList (params) {
            getAlarmList({ ...params, count: this.pagesize }).then(res => {
            getAlarmList({ ...params, size: this.pagesize }).then(res => {
                this.pagesCount = res.data.data.pages

                this.policeSituationHistoryArr = []

                if (res.data.data.records > 0) {
                if (res.data.data.records.length > 0) {
                    this.policeSituationHistoryArr = res.data.data.records.map((item, index) => {
                        return { ...item, index: index + 1, lng: item.ZDDWXZB, lat: item.ZDDWYZB }
                    })
                } else {
                    this.policeSituationHistoryArr = []
                }

                this.setTableHeight()
            })

            // this.policeSituationHistoryArr = [{
@@ -483,7 +481,7 @@

            this.currentPage = 1

            this.getAlarmList({ type, time: this.dateFormat(new Date()), page: this.currentPage })
            this.getAlarmList({ type, time: this.dateFormat(new Date()), current: this.currentPage })

            this.$emit('policeSituationChange')
        },
@@ -491,8 +489,6 @@
        // 实时历史选择
        historyTabClick (type) {
            this.historytype = type

            this.setTableHeight()

            this.timetype = 0

@@ -509,7 +505,7 @@
                this.getAlarmList({
                    start: date[0],
                    end: date[1],
                    page: this.currentPage
                    current: this.currentPage
                })
            }


 src/views/home/components/rightContainer.vue

@@ -109,8 +109,8 @@
import recorderArr from '@/assets/data/equimentsDate/recorder.js'
import { getSchedulingList } from '@/api/home/index.js'
import { fontSize } from '@/utils/fontSize.js'
import { getCaseAll } from "@/api/home/index.js"

import { getCaseAll, getEquipment } from "@/api/home/index.js"

const timeEvents = []

@@ -187,7 +187,7 @@
            window.addEventListener("resize", this.echartsResize)
            this.tableHeight = this.$refs.Container.offsetHeight - this.$refs.caseBox.offsetHeight - this.$refs.crowdBox.offsetHeight - this.$refs.alertBoxTitle.offsetHeight - 62
        })
        this.equipmentEchartsCarousel()

    },
    methods: {
        // actTabClick (type) {
@@ -203,163 +203,9 @@
            })
        },

        lineTabClick (type) {
            this.linetype = type
            equipmentmyChart.setOption(this.initEquipmentOptions(this.getEquimentChartData(this.policeName)), true)
        },

        echartsResize () {
            equipmentmyChart && equipmentmyChart != null && equipmentmyChart.resize()
            eventchangemychart && eventchangemychart != null && eventchangemychart.resize()
        },

        initEquipmentEcharts () {
            var chartDom = document.getElementById('EquipmentEcharts')
            equipmentmyChart = this.$echarts.init(chartDom)
            equipmentmyChart.setOption(this.initEquipmentOptions(this.getEquimentChartData('全部')))
        },

        initEquipmentOptions (dataArr) {
            return {
                tooltip: {
                    trigger: 'item',
                    confine: true,
                    formatter: function (params) {
                        let tipHtml = ``
                        if ('carCount' in params.data) {
                            tipHtml = `${params.marker} <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong><br /><strong style="margin-left:10px;color:#5c7bd9">占比：${params.percent}%</strong><br /><span style="color:#5470c6">警车：${params.data.carCount}台</span><br /><span style="margin-left:10px;color:#91cc75">监控：${params.data.monitorCount}台</span><br /><span style="color:#fac858">手台：${params.data.phoneCount}台</span><br /><span style="margin-left:10px;color:#ee6666">手持记录仪：${params.data.recorderCount}台</span>`
                        } else {
                            tipHtml = `${params.marker} <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong><br /><span style="color:#4caf50">正常：${params.data.working}台</span><br /><span style="color:#ccc">故障：${params.data.fault}台</span><br /><span style="margin-left:10px;color:#ccc">设备故障率：${Math.floor(params.data.fault / (params.data.working + params.data.fault) * 100)}%</span><br />`
                        }
                        return tipHtml
                    },
                    backgroundColor: 'rgba(8, 56, 185, 0.9)',
                    borderColor: 'rgba(8, 56, 185, 0.9)',
                    textStyle: {
                        fontSize: fontSize(14)
                    }
                },
                graphic: {
                    type: "text",
                    // left: "36.5%",
                    top: "40%",
                    left: "center",
                    style: {
                        text: "设备总数",
                        textAlign: "center",
                        fill: "#fff",
                        fontSize: fontSize(18),
                        fontWeight: 700
                    }
                },
                title: {
                    text: `${this.regionTotal}`,
                    top: "52%",
                    left: "center",
                    textStyle: {
                        color: "#27D9C8",
                        fontSize: fontSize(20),
                        fontWeight: 700,
                        align: "center"
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['90%', '136%'],
                        top: 'middle',
                        left: 'center',
                        data: dataArr,
                        avoidLabelOverlap: false,
                        labelLine: {
                            normal: {
                                length: fontSize(15),
                                lineStyle: {
                                    width: fontSize(3)
                                }
                            }
                        },
                        emphasis: {
                            label: {
                                color: 'red',
                                fontSize: fontSize(16)
                            }
                        },
                        label: {
                            color: function (params) {
                                let colorList = []
                                if ('carCount' in params.data) {
                                    colorList = ['#4caf50', '#787878']
                                } else {
                                    colorList = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                                }
                                return colorList[params.dataIndex]
                            },
                            fontSize: fontSize(16)

                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    let colorList = []
                                    if ('carCount' in params.data) {
                                        colorList = ['#4caf50', '#787878']
                                    } else {
                                        colorList = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                                    }
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            }
        },

        equipmentEchartsCarousel () {
            let dataLen = this.getEquimentChartData(this.policeName).length
            let curIndex = 0
            if (timer) {
                clearInterval(timer)
            }

            timer = setInterval(() => {
                equipmentmyChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex })
                curIndex = (curIndex + 1) % dataLen
                equipmentmyChart.dispatchAction({
                    type: 'highlight', seriesIndex: 0, dataIndex: curIndex
                })
            }, 1000)

            equipmentmyChart.on('mouseover', function (param) {
                clearInterval(timer)
                equipmentmyChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: curIndex
                })
                equipmentmyChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: param.dataIndex
                })
                curIndex = param.dataIndex
            })

            equipmentmyChart.on('mouseout', function (param) {
                curIndex = param.dataIndex
                if (timer) {
                    clearInterval(timer)
                }
                timer = setInterval(() => {
                    equipmentmyChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex })
                    curIndex = (curIndex + 1) % dataLen
                    equipmentmyChart.dispatchAction({
                        type: 'highlight', seriesIndex: 0, dataIndex: curIndex
                    })
                }, 1000)
            })
        },

        // 案件统计中时间变化
@@ -529,6 +375,220 @@
            return option
        },

        // 现有设备统计
        getEquipment () {
            const oneColor = ['#4caf50', '#2979ff', '#ffd600', '#0d47a1', '#b71c1c']
            const twoColor = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
            const typeData = {
                carCount: '警车',
                monitorCount: '摄像头',
                recorderCount: '手台',
                phoneCount: '手持记录仪'
            }

            const dataAll = getEquipment().then(res => {
                let data = []

                if (this.linetype == 0) {
                    data = res.data.map((item, index) => {
                        return {
                            type: item.type,
                            value: item.count,
                            working: item.online,
                            fault: item.offline,
                            label: twoColor[index]
                        }
                    })

                    return data
                } else {
                    let normalData = { value: 0, name: '正常', color: '#4caf50', label: { color: oneColor[0] } }
                    let faultData = { value: 0, name: '故障', color: '#ffd600', label: { color: oneColor[2] } }

                    res.data.forEach(item => {
                        normalData.value += item.online

                        for (let key in typeData) {
                            if (item.type == typeData[key]) {
                                normalData[key] = item.online
                                faultData[key] = item.offline
                            }
                        }

                        faultData.value += item.offline
                    })

                    return [normalData, faultData]
                }
            })

            return dataAll
        },

        // 设备种类，设备状态切换
        async lineTabClick (type) {
            this.linetype = type

            const data = await this.getEquipment()

            equipmentmyChart.setOption(this.initEquipmentOptions(data), true)
        },

        async initEquipmentEcharts () {
            var chartDom = document.getElementById('EquipmentEcharts')
            equipmentmyChart = this.$echarts.init(chartDom)

            const data = await this.getEquipment()

            equipmentmyChart.setOption(this.initEquipmentOptions(data))

            this.equipmentEchartsCarousel()
        },

        initEquipmentOptions (dataArr) {
            return {
                tooltip: {
                    trigger: 'item',
                    confine: true,
                    formatter: function (params) {
                        let tipHtml = ``
                        if ('carCount' in params.data) {
                            tipHtml = `${params.marker} <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong><br /><strong style="margin-left:10px;color:#5c7bd9">占比：${params.percent}%</strong><br /><span style="color:#5470c6">警车：${params.data.carCount}台</span><br /><span style="margin-left:10px;color:#91cc75">监控：${params.data.monitorCount}台</span><br /><span style="color:#fac858">手台：${params.data.phoneCount}台</span><br /><span style="margin-left:10px;color:#ee6666">手持记录仪：${params.data.recorderCount}台</span>`
                        } else {
                            tipHtml = `${params.marker} <strong style="color: ${params.color}">${params.data.name} ${params.data.value}台</strong><br /><span style="color:#4caf50">正常：${params.data.working}台</span><br /><span style="color:#ccc">故障：${params.data.fault}台</span><br /><span style="margin-left:10px;color:#ccc">设备故障率：${Math.floor(params.data.fault / (params.data.working + params.data.fault) * 100)}%</span><br />`
                        }
                        return tipHtml
                    },
                    backgroundColor: 'rgba(8, 56, 185, 0.9)',
                    borderColor: 'rgba(8, 56, 185, 0.9)',
                    textStyle: {
                        fontSize: fontSize(14)
                    }
                },
                graphic: {
                    type: "text",
                    // left: "36.5%",
                    top: "40%",
                    left: "center",
                    style: {
                        text: "设备总数",
                        textAlign: "center",
                        fill: "#fff",
                        fontSize: fontSize(18),
                        fontWeight: 700
                    }
                },
                title: {
                    text: `${this.regionTotal}`,
                    top: "52%",
                    left: "center",
                    textStyle: {
                        color: "#27D9C8",
                        fontSize: fontSize(20),
                        fontWeight: 700,
                        align: "center"
                    }
                },
                series: [
                    {
                        name: '',
                        type: 'pie',
                        radius: ['90%', '136%'],
                        top: 'middle',
                        left: 'center',
                        data: dataArr,
                        avoidLabelOverlap: false,
                        labelLine: {
                            normal: {
                                length: fontSize(15),
                                lineStyle: {
                                    width: fontSize(3)
                                }
                            }
                        },
                        emphasis: {
                            label: {
                                color: 'red',
                                fontSize: fontSize(16)
                            }
                        },
                        label: {
                            color: function (params) {
                                let colorList = []
                                if ('carCount' in params.data) {
                                    colorList = ['#4caf50', '#787878']
                                } else {
                                    colorList = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                                }
                                return colorList[params.dataIndex]
                            },
                            fontSize: fontSize(16)

                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    let colorList = []
                                    if ('carCount' in params.data) {
                                        colorList = ['#4caf50', '#787878']
                                    } else {
                                        colorList = ['#5470FE', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
                                    }
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            }
        },

        equipmentEchartsCarousel () {
            let dataLen = this.getEquimentChartData(this.policeName).length
            let curIndex = 0
            if (timer) {
                clearInterval(timer)
            }

            timer = setInterval(() => {
                equipmentmyChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex })
                curIndex = (curIndex + 1) % dataLen
                equipmentmyChart.dispatchAction({
                    type: 'highlight', seriesIndex: 0, dataIndex: curIndex
                })
            }, 1000)

            equipmentmyChart.on('mouseover', function (param) {
                clearInterval(timer)
                equipmentmyChart.dispatchAction({
                    type: 'downplay',
                    seriesIndex: 0,
                    dataIndex: curIndex
                })
                equipmentmyChart.dispatchAction({
                    type: 'highlight',
                    seriesIndex: 0,
                    dataIndex: param.dataIndex
                })
                curIndex = param.dataIndex
            })

            equipmentmyChart.on('mouseout', function (param) {
                curIndex = param.dataIndex
                if (timer) {
                    clearInterval(timer)
                }
                timer = setInterval(() => {
                    equipmentmyChart.dispatchAction({ type: 'downplay', seriesIndex: 0, dataIndex: curIndex })
                    curIndex = (curIndex + 1) % dataLen
                    equipmentmyChart.dispatchAction({
                        type: 'highlight', seriesIndex: 0, dataIndex: curIndex
                    })
                }, 1000)
            })
        },

        // 现有设备的点击事件（显示弹窗表格）
        clickEquimentChart () {
            equipmentmyChart.on('click', params => {
                // 设备类型，监控弹窗显示，其他弹窗显示，【记录仪列显示，警车列显示，手台列显示】，遍历数组

 src/views/home/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2023-01-09 17:28:12
 * @LastEditTime: 2023-01-10 16:13:51
 * @FilePath: \srs-police-affairs\src\views\home\index.vue
 * @Description: 小区-栋-层-房屋
 *
@@ -149,38 +149,32 @@
        <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="left">
                    <el-tree :data="jurisdictionData" :props="defaultProps" @node-click="jurisdictionNodeClick"
                        ref="tree" node-key="id"></el-tree>
                <div class="monitor" v-if="monitorContent">
                    <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                        style="object-fit: fill"></video>
                </div>
                <div class="right">
                    <div class="monitor" v-if="monitorContent">
                        <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                            style="object-fit: fill"></video>
                    </div>
                    <div class="others" v-if="othersContent">
                        <el-table :data="showArr.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' }"
                            :row-class-name="tableRowClassName">
                            <el-table-column prop="carID" label="车牌号" v-if="carArrShow"></el-table-column>
                            <el-table-column prop="carType" label="车型" v-if="carArrShow"></el-table-column>
                            <el-table-column prop="phoneID" label="手台号" v-if="phoneArrShow"></el-table-column>
                            <el-table-column prop="phoneType" label="手台机型" v-if="phoneArrShow"></el-table-column>
                            <el-table-column prop="recorderID" label="执法记录仪号" v-if="recorderArrShow"></el-table-column>
                            <el-table-column prop="recorderType" label="记录仪机型" v-if="recorderArrShow"></el-table-column>
                            <el-table-column prop="id" label="设备号" v-if="stateArrShow"></el-table-column>
                            <el-table-column prop="equimentType" label="设备类型" v-if="stateArrShow"></el-table-column>
                            <el-table-column prop="policeStation" label="所属派出所"></el-table-column>
                            <el-table-column prop="area" label="所属责任区"></el-table-column>
                            <el-table-column prop="state" label="状态"></el-table-column>
                        </el-table>
                        <div class="pages">
                            <el-pagination background layout="prev, pager, next" :total="showArr.length"
                                :page-size="pagesize" pager-count="3" :current-page="currentPage"
                                @current-change="handleCurrentChange"></el-pagination>
                        </div>
                <div class="others" v-if="othersContent">
                    <el-table :data="showArr.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' }"
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="carID" label="车牌号" v-if="carArrShow"></el-table-column>
                        <el-table-column prop="carType" label="车型" v-if="carArrShow"></el-table-column>
                        <el-table-column prop="phoneID" label="手台号" v-if="phoneArrShow"></el-table-column>
                        <el-table-column prop="phoneType" label="手台机型" v-if="phoneArrShow"></el-table-column>
                        <el-table-column prop="recorderID" label="执法记录仪号" v-if="recorderArrShow"></el-table-column>
                        <el-table-column prop="recorderType" label="记录仪机型" v-if="recorderArrShow"></el-table-column>
                        <el-table-column prop="id" label="设备号" v-if="stateArrShow"></el-table-column>
                        <el-table-column prop="equimentType" label="设备类型" v-if="stateArrShow"></el-table-column>
                        <el-table-column prop="policeStation" label="所属派出所"></el-table-column>
                        <el-table-column prop="area" label="所属责任区"></el-table-column>
                        <el-table-column prop="state" label="状态"></el-table-column>
                    </el-table>
                    <div class="pages">
                        <el-pagination background layout="prev, pager, next" :total="showArr.length"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                    </div>
                </div>
            </div>
@@ -1752,52 +1746,20 @@
        height: 540px;
        width: 100%;

        .left {
            width: 30%;
            float: left;
            height: 100%;
            overflow: scroll;
            overflow-x: hidden !important;

            :deep(.el-tree) {
                background-color: transparent;
                color: #fff;
            }

            :deep(.el-tree-node__content:hover) {
                background-color: #66b1ff87;
            }

            :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
                background: #454545;
            }

            :deep(.el-tree-node:focus > .el-tree-node__content) {
                background-color: #667a9d !important;
                color: #fff;
            }
        .monitor {
            width: 100%;
            height: 540px;
            background-color: #fff;
        }

        .right {
            width: 70%;
            height: 100%;
            float: left;
        .others {
            width: 100%;
            height: 495px;

            .monitor {
                width: 100%;
                height: 540px;
                background-color: #fff;
            }

            .others {
                width: 100%;
                height: 495px;

                .pages {
                    background-color: transparent;
                    padding-bottom: 3px;
                    padding-top: 10px;
                }
            .pages {
                background-color: transparent;
                padding-bottom: 3px;
                padding-top: 10px;
            }
        }
    }