设备详情弹窗

guanqb

2022-10-24 b51038ac1e0e06509d284c45f4ba23fba325d2b8

设备详情弹窗

 src/styles/base/index.css

New file
@@ -0,0 +1,128 @@
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scrollbar-color: rgba(7, 22, 37, 0.8) rgba(216, 216, 216, 0.2);
  scrollbar-width: thin;
}

html,
body {
  width: 100%;
  height: 100%;
}

ul li {
  list-style: none;
}

.deblurring {
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: none;
}

::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background-color: rgba(7, 22, 37, 0.8);
  padding-left: 2px;
  padding-right: 2px;
}

::-webkit-scrollbar-track {
  background-color: rgba(216, 216, 216, 0.2);
}

::-webkit-scrollbar-thumb:window-inactive {
  background-color: rgba(7, 22, 37, 0.8);
}

:not(select)::-webkit-scrollbar {
  background-color: rgba(216, 216, 216, 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(7, 22, 37, 0.8);
}

.car-video-box .el-dialog {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  width: 720px;
  height: 480px;
  top: 50%;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.car-video-box .el-dialog .el-dialog__body {
  flex: 1;
}

.police-affairs-details-box .el-dialog {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  width: 540px;
  height: 420px;
  top: 50%;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.police-affairs-details-box .el-dialog .el-dialog__body {
  flex: 1;
}

.resident-details-box .el-dialog {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  width: 320px;
  top: 50%;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.resident-details-box .el-dialog .el-dialog__body {
  flex: 1;
}

.phone-details-box .el-dialog {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  width: 320px;
  height: 220px;
  top: 50%;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.phone-details-box .el-dialog .el-dialog__body {
  flex: 1;
}

.equiment-details-box .el-dialog .el-dialog {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  width: 520px;
  height: 620px;
  top: 50%;
  left: 50% !important;
  transform: translate(-50%, -50%);
}

.equiment-details-box .el-dialog .el-dialog .el-dialog__body {
  flex: 1;
}

 src/styles/base/index.min.css

New file
@@ -0,0 +1 @@
*{margin:0;padding:0;box-sizing:border-box;scrollbar-color:rgba(7,22,37,0.8) rgba(216,216,216,0.2);scrollbar-width:thin}html,body{width:100%;height:100%}ul li{list-style:none}.deblurring{image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor}::-webkit-scrollbar{width:6px;height:6px;background-color:none}::-webkit-scrollbar-thumb{border-radius:6px;background-color:rgba(7,22,37,0.8);padding-left:2px;padding-right:2px}::-webkit-scrollbar-track{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:window-inactive{background-color:rgba(7,22,37,0.8)}:not(select)::-webkit-scrollbar{background-color:rgba(216,216,216,0.2)}::-webkit-scrollbar-thumb:hover{background-color:rgba(7,22,37,0.8)}.car-video-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:720px;height:480px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.car-video-box .el-dialog .el-dialog__body{flex:1}.police-affairs-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:540px;height:420px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.police-affairs-details-box .el-dialog .el-dialog__body{flex:1}.resident-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.resident-details-box .el-dialog .el-dialog__body{flex:1}.phone-details-box .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:320px;height:220px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.phone-details-box .el-dialog .el-dialog__body{flex:1}.equiment-details-box .el-dialog .el-dialog{margin:0 !important;display:flex;flex-direction:column;width:520px;height:620px;top:50%;left:50% !important;transform:translate(-50%, -50%)}.equiment-details-box .el-dialog .el-dialog .el-dialog__body{flex:1}

 src/styles/base/index.scss

@@ -121,4 +121,23 @@
            flex: 1;
        }
    }
}

.equiment-details-box {
    .el-dialog {
        .el-dialog {
            margin: 0 !important;
            display: flex;
            flex-direction: column;
            width: 520px;
            height: 620px;
            top: 50%;
            left: 50% !important;
            transform: translate(-50%, -50%);
    
            .el-dialog__body {
                flex: 1;
            }
        }
    }
}

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

@@ -228,6 +228,10 @@
    color: #adcfff;
}

.el-date-editor .el-range__close-icon {
    line-height: 27px;
}

/* 时间筛选 */
.el-time-panel__content::after,
.el-time-panel__content::before {

 src/views/home/index.vue

@@ -256,7 +256,6 @@
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <div
                style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"
@@ -279,7 +278,6 @@
            :visible.sync="panoramaVisible"
            :before-close="panoramaBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <div
                style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"
@@ -363,6 +361,56 @@
                </div>
            </div>
        </el-dialog>

        <el-dialog
            :title="equimentTitle"
            :modal="true"
            :visible.sync="equimentVisible"
            :before-close="equimentBeforeClose"
            :close-on-click-modal="true"
            class="equiment-details-box"
        >
            <div
                style="display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;"
            >
                <div class="equimentDetail">
                    <div class="left">
                        <el-tree
                            :data="monitorData"
                            :props="defaultProps"
                            @node-click="handleNodeClick"
                        ></el-tree>
                    </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="acttype == 0 ? underwayArr : historyArr"
                                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="activityName" label="活动名称" width="100"></el-table-column>
                                <el-table-column prop="startTime" label="开始时间" width="100"></el-table-column>
                                <el-table-column prop="endTime" label="结束时间" width="100"></el-table-column>
                                <el-table-column prop="scale" label="规模"></el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

@@ -372,6 +420,7 @@
let homePersonmyChart
let houseMyChart
let landMyChart
let equipmentmyChart

import axios from "axios"
import carList from '@/assets/data/car.js'
@@ -397,7 +446,9 @@
            dialogTitle: '',
            dialogVisible: false,
            panoramaTitle: '',
            equimentTitle: '',
            panoramaVisible: false,
            equimentVisible: false,
            phoneDetails: {},
            phoneTitle: '',
            peopleTitle: '',
@@ -514,6 +565,253 @@
            },
            eventTime: '',
            currentTableHeight: 0,
            monitorData: [{
                label: '车站派出所',
                children: [{
                    label: '责任区1',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                }, {
                    label: '责任区2',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                }, {
                    label: '责任区3',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                },
                {
                    label: '责任区4',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                }]
            }, {
                label: '沙溪派出所',
                children: [{
                    label: '责任区1',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                }, {
                    label: '责任区2',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                }, {
                    label: '责任区3',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                },
                {
                    label: '责任区4',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                }]
            }, {
                label: '灵溪派出所',
                children: [{
                    label: '责任区1',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                }, {
                    label: '责任区2',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                }, {
                    label: '责任区3',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                },
                {
                    label: '责任区4',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                }]
            }, {
                label: '北门派出所',
                children: [{
                    label: '责任区1',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                }, {
                    label: '责任区2',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                }, {
                    label: '责任区3',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                },
                {
                    label: '责任区4',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                }]
            }, {
                label: '江光派出所',
                children: [{
                    label: '责任区1',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                }, {
                    label: '责任区2',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                }, {
                    label: '责任区3',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                },
                {
                    label: '责任区4',
                    children: [{
                        label: '小区1'
                    }, {
                        label: '小区2'
                    }, {
                        label: '小区3'
                    }, {
                        label: '小区4'
                    }]
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            monitorContent: false,
            othersContent: false,
        }
    },

@@ -549,7 +847,8 @@
        //     console.log(res, 999)
        // })

        this.clickChart()
        this.clickPeopleChart()
        this.clickEquimentChart()


        window.addEventListener('resize', this.setDomStyle)
@@ -871,7 +1170,7 @@

        initEquipmentEcharts () {
            var chartDom = document.getElementById('EquipmentEcharts')
            var myChart = this.$echarts.init(chartDom)
            equipmentmyChart = this.$echarts.init(chartDom)
            var option
            let dataArr = [
                { value: 4664, name: '车辆' },
@@ -930,7 +1229,7 @@
                },
            }

            option && myChart.setOption(option)
            option && equipmentmyChart.setOption(option)
        },

        initEventChangeEcharts () {
@@ -1167,6 +1466,10 @@
            this.panoramaVisible = false
        },

        equimentBeforeClose () {
            this.equimentVisible = false
        },

        initAreaCheckoptions (areaArr) {
            areaArr.forEach((item, index) => {
                if (item.areaCheckName != '全部') {
@@ -1371,7 +1674,7 @@
            return center
        },

        clickChart () {
        clickPeopleChart () {
            homePersonmyChart.on('click', params => {
                console.log('name', params.name)
                let xDate, yDate
@@ -1439,6 +1742,21 @@
                } else {
                    this.peopleTitle = params.name
                    this.peopleVisible = true
                }
            })
        },

        clickEquimentChart () {
            equipmentmyChart.on('click', params => {
                console.log(params.name)
                this.equimentVisible = true
                this.equimentTitle = params.name
                if (params.name == '摄像头') {
                    this.othersContent = false
                    this.monitorContent = true
                } else {
                    this.monitorContent = false
                    this.othersContent = true
                }
            })
        },
@@ -1853,5 +2171,47 @@
            background: rgba(29, 38, 105, 1);
        }
    }

    .equimentDetail {
        height: 600px;
        width: 100%;
        .left,
        .right {
            width: 50%;
            float: left;
        }
        .left {
            height: 100%;
            overflow: scroll;
            :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;
            }
        }
        .right {
            .monitor {
                width: 100%;
                height: 300px;
                background-color: #fff;
            }
            .others {
                width: 100%;
                height: 400px;
                background-color: red;
            }
        }
    }
}
</style>