GitBucket
Newer
<template>
<div class="waterLoggDialog">
<div class="head">
<div class="btns">
<el-tabs v-model="currentBtn" type="card">
<el-tab-pane label="逐时水深" name="Hourlydepth" />
<el-tab-pane label="视频监控" name="video" />
<el-tab-pane label="历史水深" name="Histponding" />
<el-tab-pane label="一点一策" name="pointPlan" />
</el-tabs>
</div>
</div>
<div class="contents">
<div v-if="currentBtn === 'Hourlydepth'" class="HspdInfo">
<Hourlydepth :base-data="baseData" :rain="rain" />
</div>
<div v-if="currentBtn === 'video'" class="videoInfo">
<el-link type="primary" class="url" :href="downloadUrl">视频插件下载</el-link>
<div v-if="isHasVideo" class="videoBox">
<div class="left">
<el-radio-group v-model="radio" size="mini" @input="changeRadio">
<el-radio-button label="plug">插件播放</el-radio-button>
<el-radio-button label="default">流播放</el-radio-button>
</el-radio-group>
<div class="list">
<div v-for="item in cameraList" :key="item.CAMERACODE" class="li" :class="{ checked: camera === item.CAMERACODE }" @click="showVideo(item)">
<!-- <span>{{ contentFormat(item.CAMERANAME, 12) }}</span> -->
</div>
</div>
</div>
<div class="right">
<!-- <base-video v-if="radio === 'default'" ref="baseVideo" :v-data="vData" :video-height="vheight" />
<video-web-control v-if="radio === 'plug'" ref="webControl" :video-height="webControlHeight" :video-width="webControlWidth" :video-data="webControlObj" /> -->
</div>
</div>
<div v-else class="novideo">500m范围内暂无摄像头</div>
</div>
<div v-if="currentBtn === 'Histponding'" class="HspdInfo">
<HistoryWaterlogg :base-data="historyRainData" :rain="rain" />
</div>
<div v-if="currentBtn === 'pointPlan'" v-loading="loading" class="HspdInfo" element-loading-background="rgba(17,53,67,0.7)">
<div v-for="item in pointPlanlist" v-show="isPoint" :key="item.id" class="deptInfoBox">
<el-tabs v-model="activeName" type="border-card">
<el-tab-pane label="基本信息" name="first">
<el-row>
<el-col :span="12">
<div class="grid-content bg-purple">地区</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple-light">
{{ item.ADDVCD ? item.ADDVCD : '--' }}
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content bg-purple">降雨等级</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple-light">
{{ item.JYDJ ? item.JYDJ : '--' }}
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content bg-purple">风险等级</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple-light">
{{ item.FXDJ ? item.FXDJ : '--' }}
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<div class="grid-content bg-purple">区位特征</div>
</el-col>
<el-col :span="12">
<div class="grid-content bg-purple-light">
{{ item.QWTZ ? item.QWTZ : '--' }}
</div>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane label="责任人" name="second">
<el-table :data="tableData" border style="width: 100%" :height="handHeight" :header-cell-style="getRowClass" :cell-style="styleBack">
<el-table-column type="index" width="50" label="id" align="center" />
<el-table-column prop="fzr" width="180" align="center" label="责任人">
<template slot-scope="scope">{{ scope.row.fzr }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" align="center" width="100">
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column prop="iphone" align="center" label="手机号">
<template slot-scope="scope">{{ scope.row.iphone }}</template>
</el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="应急措施" name="third">
<div class="deals" v-html="Formatyj(item.YJCS ? item.YJCS : '--')" />
</el-tab-pane>
</el-tabs>
</div>
<div v-show="!isPoint" style="height:100%">
<div v-if="prop && prop.tempType === 'analysis'" class="adviceBox">
<div class="title">管理建议</div>
<div class="data">
今年总共积水 <span>{{ allLogg.length }}</span> 次;
最大积水时长 <span>{{ maxTime }}</span> 分钟;
最大积水深度 <span>{{ maxZ }}</span> m;
积水对应最小降雨量 <span>{{ prop.sjmin }}</span> mm
</div>
<el-table size="mini" :data="allLogg">
<el-table-column label="最大水深" align="center" prop="Z" />
<el-table-column label="开始时间" align="center" prop="BEGINDATE" :formatter="formatTime" />
<el-table-column label="结束时间" align="center" prop="ENDDATE" :formatter="formatTime" />
<el-table-column label="时长" align="center" prop="HOURS" :formatter="formahour" />
<el-table-column label="区域" align="center" prop="DSNM" />
</el-table>
<div class="suggest">建议调整风险等级为： {{ prop.jydj }}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { getZsData, getUrlByStcd } from '@/api/waterRegimen'
// import { getUrl, sendMsg, createMeet, inviteVoip } from '@/api/drainageVideo'
import moment from 'moment'
// import 'video.js/dist/video-js.css'
import HistoryWaterlogg from './components/HistoryWaterlogg.vue'
// import BaseVideo from './components/BaseVideo.vue'
import Hourlydepth from './components/Hourlydepth.vue'
import { zstjxq, getPointPlans } from '@/api/api-whCloud'
// import VideoWebControl from '../common/VideoWebControl.vue'
// import { contentFormat, getHour } from '../../common/tool'
import { getCurrentUserInfo } from '@/api/api-new'
import { getReportDetail, getWaterDeptId, groupId2filesId } from '@/api/water-sws'
export default {
components: { HistoryWaterlogg, Hourlydepth },
props: {
prop: {
type: Object,
default: () => {}
},
current: {
type: String,
default: () => ''
},
videos: {
type: Array,
default: undefined
}
},
data() {
return {
replyOptions: [
{ label: '签收回告', value: 1 },
{ label: '初报回告', value: 2 },
{ label: '续报回告', value: 3 },
{ label: '结果回告', value: 4 },
{ label: '知悉回告', value: 5 }
],
waterReplys: [],
messform: {
messform: '',
fzr: '',
name: ''
},
dialogFormVisible: false,
radio: 'plug',
webControlObj: {},
vData: {
hlsurl: '',
cameraId: '',
code: '',
platForm: ''
},
options: {
autoplay: true, // 设置自动播放
muted: true, // 设置了它为true，才可实现自动播放,同时视频也被静音 （Chrome66及以上版本，禁止音视频的自动播放）
preload: 'auto', // 预加载
controls: true // 显示播放的控件
},
waterLevel: 0,
currentBtn: 'Hourlydepth',
realtimeData: [],
realNum: 0,
detailData: {},
lastData: {},
myPlayer: null,
src: '',
baseData: {},
player: null,
camera: '',
platForm: '',
cameraList: [],
isHasVideo: true,
pointPlanlist: [],
isPoint: true,
activeName: 'first',
tableData: [],
currentType: 'dhsdk',
controlShow: false,
vheight: `calc(100% - 40px)`,
webControlHeight: '436',
webControlWidth: '700',
historyRainData: {},
deptData: {},
loading: false,
analyseData: [],
downloadUrl: '/plugin/VideoWebPlugin.exe',
flag: 0,
collectRadio: false,
isCollected: false,
allLogg: [],
maxTime: 0,
maxZ: 0,
currentUser: null,
rain: '',
rainStates: [],
confId: '',
members: [],
alluser: [],
handHeight: 380
}
},
computed: {
},
watch: {
prop: {
immediate: true,
async handler(data) {
const length = Object.keys(data).length
if (length > 0) {
this.baseData = {
stcd: data.STCD,
type: 'js'
}
const status = data.BZ && data.BZ.substr(-1)
this.collectRadio = status === '1'
this.pointType = data.TYPE
this.getpointPlan(data)
}
}
},
videos: {
immediate: true,
handler(data) {
if (data.length > 0) {
this.isHasVideo = true
} else {
this.isHasVideo = false
}
}
},
currentBtn: {
immediate: true,
handler(data) {
this.rain = ''
if (data === 'Hourlydepth') {
this.baseData = {
stcd: this.prop.STCDT || this.prop.STCD,
type: 'js'
}
} else if (data === 'Histponding') {
this.historyRainData = {
stcd: this.prop.STCDT || this.prop.STCD,
type: 'js',
...this.prop
}
}
// if (data === 'video') {
// if (this.isHasVideo) {
// this.$nextTick(async() => {
// this.initVideos(this.videos)
// })
// }
// }
}
}
},
async mounted() {
// this.$nextTick(() => {})
this.$EventBus.$on('map:closeVideo', () => {
if (this.$refs.baseVideo) {
this.$refs.baseVideo.closeVideo()
}
})
},
beforeDestroy() {
this.$EventBus.$off('map:closeVideo')
if (this.myPlayer) {
this.myPlayer.dispose()
}
},
methods: {
// contentFormat, getHour,
// 视频播放切换
changeRadio(val) {
if (val === 'plug') {
this.$nextTick(async() => {
this.$refs.webControl.initPlugin()
})
} else {
this.setUrl(this.camera, this.currentType)
}
},
// 点击站点,初始化周围关联摄像头
initVideos(data) {
const arr = []
data.forEach(item => {
const properties = item.getProperties()
arr.push(properties)
})
this.cameraList = arr
// this.setUrl(this.camera, this.currentType) // 默认加载流视频
// 默认加载插件视频播放
if (arr.length) {
this.showVideo(arr[0], 'first')
}
},
async setUrl(val, type) {
const token = this.$store.getters.token
const playURL = await getUrl(val, token, type)
const url = playURL.replace('http://172.16.236.67:8257', '')
this.$set(this.vData, 'hlsurl', url)
this.$set(this.vData, 'cameraId', 'videos')
this.$set(this.vData, 'code', this.camera)
this.$set(this.vData, 'platForm', this.platForm)
// this.$set(this.vData, 'cameraId', id)
},
// 加载实时数据
async initWaterData({ STCD }) {
const params = {
searchFilters: {
stcd: STCD,
datetime: moment().format('YYYY-MM-DD')
}
}
const { data } = await getZsData(params)
if (data.length > 0) {
this.realNum = data[data.length - 1].Z || 0
this.realtimeData = data
const lastData = data[1]
const currentData = data[0]
if (currentData.Z) {
if (currentData.Z > lastData.Z) {
currentData.trend = '上涨'
} else if (currentData.Z < lastData.Z) {
currentData.trend = '下降'
} else {
currentData.trend = '持平'
}
} else {
currentData.trend = '无'
}
// console.log(currentData)
this.detailData = currentData
}
},
// 关闭弹窗overlay
close() {
if (this.$refs.baseVideo) {
this.$refs.baseVideo.closeVideo()
}
this.$EventBus.$emit('map:closeOverlay')
},
// 一点一策数据
async getpointPlan({ STCD }) {
this.loading = true
const year = moment().year()
const param = {
searchFilters: {
stcd: STCD,
year: year + ''
}
}
const tab = []
const { data } = await getPointPlans(param)
data.forEach(i => {
if (i.SWXCFZR && i.IPHONEONE) {
tab.push({
fzr: '水务现场负责人',
name: i.SWXCFZR,
iphone: i.IPHONEONE
})
}
if (i.JGXCFZR && i.IPHONETWO) {
tab.push({
fzr: '交管现场负责人',
name: i.JGXCFZR,
iphone: i.IPHONETWO
})
}
if (i.CGXCFZR && i.IPHONETHREE) {
tab.push({
fzr: '城管现场负责人',
name: i.CGXCFZR,
iphone: i.IPHONETHREE
})
}
if (i.JDFZR && i.IPHONEFOUR) {
tab.push({ fzr: '街道负责人', name: i.JDFZR, iphone: i.IPHONEFOUR })
}
if (i.SWXCTJDY && i.IPHONEFIVE) {
tab.push({
fzr: '水务现场突击队员',
name: i.SWXCTJDY,
iphone: i.IPHONEFIVE
})
}
})
if (data.length > 0) {
this.isPoint = true
this.pointPlanlist = data
this.Format(tab)
} else {
this.isPoint = false
}
this.loading = false
},
async getTime(val) {
const { STCD } = val
const begin = moment().startOf('year').format('YYYY-MM-DD HH:mm:ss')
const end = moment().format('YYYY-MM-DD HH:mm:ss')
const param = {
searchFilters: {
begindate: begin,
enddate: end,
beginz: 0.15,
endz: 10,
stcd: STCD
}
}
const { data } = await zstjxq(param)
const arrs = this.getHour(data)
this.allLogg = arrs
this.maxTime = Math.max.apply(Math, arrs.map(function(o) {
return o.HOURS
}))
this.maxZ = Math.max.apply(Math, arrs.map(function(o) {
return o.Z
}))
},
// 整理tab数据格式
Format(tab) {
let name = []
let iphone = []
let fzr = null
tab.forEach(i => {
name = i.name.split('、')
iphone = i.iphone.split('、')
if (name.length > 1 && iphone.length > 1) {
fzr = i.fzr
tab = tab.filter(tab => tab.fzr !== fzr)
name.forEach((item, idx) => {
tab.push({
fzr: fzr,
name: item,
iphone: iphone[idx]
})
})
}
})
tab.push({
fzr: '责任人',
name: '融通',
rt: true,
uid: 'CHENKANG',
iphone: '18827616087'
// iphone: '18702710303'
})
let newtab = tab
if (this.prop.STCD === '42010004200') {
const arr = [
{ fzr: '中心责任人', name: '杨磊', uid: 'YANGLEI', rt: true, iphone: '13886145228' },
{ fzr: '中心责任人', name: '金卫华', uid: 'JINWEIHUA', rt: true, iphone: '13659827212' },
{ fzr: '中心责任人', name: '杨剑锋', uid: 'YANGJIANFENG', rt: true, iphone: '18071440035' },
{ fzr: '中心责任人', name: '刘敏', uid: 'LIUMIN', rt: true, iphone: '15629093505' },
{ fzr: '中心责任人', name: '聂彪', uid: 'NIEBIAO', rt: true, iphone: '18995549116' }
]
newtab = tab.concat(arr)
}
this.tableData = newtab
},
// 应急措施格式
Formatyj(val) {
val = val.replace(/[1-9]/g, `$&`).split('\n')
let str = ''
for (var i = 0; i < val.length; i++) {
str += `${val[i]}<br/>`
}
return str
},
// 表格奇偶层样式
styleBack({ row, column, rowIndex, columnIndex }) {
if ((rowIndex + 1) % 2 === 0) {
return 'background:#053c4a; color:#fff;border:1px solid #053c4a'
} else {
return 'background:#053c4a; color:#fff;border:1px solid #053c4a'
}
},
// 表头样式
getRowClass({ rowIndex }) {
return 'background:#053c4a; color:#fff;border:3px solid #053c4a'
},
formahour(column, row, cellValue, index) {
const mini = cellValue % 60
const hour = Number.parseInt(cellValue / 60)
if (hour > 0 && mini > 0) {
return hour + '小时' + mini + '分钟'
} else if (hour > 0) {
return hour + '小时'
} else {
return mini + '分钟'
}
},
formatTime(column, row, cellValue, index) {
return moment(cellValue).format('MM-DD HH:mm:ss')
},
// 选中播放
async showVideo(item, key) {
// this.flag++
this.webControlObj = item
this.camera = item.CAMERACODE
this.platForm = item.PLATFORM
this.currentType = item.TREATYTYPE
if (this.radio === 'default') {
this.setUrl(this.camera, this.currentType)
} else {
// if (this.flag === 1) {
// this.$refs.webControl.initPlugin()
// } else {
// this.$refs.webControl.play()
// }
if (key === 'first') {
this.$refs.webControl.initPlugin()
} else {
await this.$nextTick()
this.$refs.webControl.play()
}
}
},
destroyVideo() {
this.$refs.webControl && this.$refs.webControl.destroyPlayer()
}
}
}
</script>
<style lang="scss" scoped>
// @import '../../common/css/elTable';
// @import '../../common/css/allElement';
.waterLoggDialog {
width: 100%;
height: 100%;
position: relative;
.rains {
position: absolute;
color: #fff;
top: -10px;
left: -11px;
z-index: 100;
.title {
margin-bottom: 5px;
}
}
.close {
height: 35px;
line-height: 43px;
width: 100%;
text-align: right;
padding-right: 20px;
cursor: pointer;
font-size: 20px;
}
.head {
display: flex;
justify-content: center;
width: 100%;
position: relative;
.title {
border-left: 10px solid #44eed5;
padding-left: 10px;
line-height: 30px;
font-size: 18px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #ffffff;
width: 30%;
}
.btns {
display: flex;
justify-content: center;
.item {
width: 85px;
height: 34px;
font-size: 16px;
line-height: 34px;
text-align: center;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
background: #164759;
border-radius: 2px;
border: 1px solid #43ecc6;
color: rgba(255, 255, 255, 0.8);
cursor: pointer;
}
.Histponding {
margin-right: 10px;
}
.selectItem {
font-weight: 500;
color: #44edee;
background: #0a7e89;
border-radius: 2px;
border: 1px solid #44eec8;
}
.item:nth-child(2) {
margin: 0 10px;
}
}
.el-checkbox {
position: absolute;
top: 5px;
right: 20px;
color: #fff
}
}
.contents {
height: calc(100% - 54px);
.reportInfo{
width: 100%;
height: 100%;
overflow: auto;
/* 自定义滚动条样式 */
::-webkit-scrollbar {
width: 5px; /* 滚动条宽度 */
}
/* 滚动条轨道样式 */
::-webkit-scrollbar-track {
background-color: #f5f5f5; /* 轨道背景色 */
}
/* 滚动条滑块样式 */
::-webkit-scrollbar-thumb {
background-color: rgba(154,148,148,0.47); /* 滑块颜色 */
border-radius: 5px; /* 滑块圆角 */
}
/* 滚动条滑块hover样式 */
::-webkit-scrollbar-thumb:hover {
background-color: #21F8FF;
}
/* 隐藏横向滚动条 */
overflow-x: hidden;
//事件上报详情
.reportInfo-wrapper{
margin: 40px 20px;
box-sizing:border-box;
.reportInfo-form{
width: 45%;
float: left;
/deep/ .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label{
font-size:18px;
color: #21F8FF ;
}
.report-image-title{
text-align: left;
color:#ffffff;
font-size:18px
}
.report-image-wrapper{
.report-image{
width: 100px;
height: 100px;
margin: 10px;
/deep/ .el-image-viewer__close{
color:#fff
}
}
}
}
.replyInfo {
float:right;
margin-right: 40px;
padding: 20px;
width: 50%;
background-color: #164759;
border-radius: 10px;
box-shadow: 0 0 10px #21F8FF;
.el-table{
width: 100%;
font-size: 18px;
}
.reply-info-title {
font-size: 18px;
color: #fff;
text-align: center;
margin-bottom: 20px;
}
}
}
/deep/ .el-form-item__label{
font-size:18px;
width:auto !important;
text-align: left !important;
}
/deep/ .el-input__inner {
width:80% !important;
height:33px !important;
cursor: default !important;
}
/deep/ .el-textarea__inner {
background-color: #102e37;
border: 1px solid #102e37 !important;
width: 90% !important;
color: #41e8e9;
font-size: 18px;
cursor: default !important;
}
/deep/ .el-form-item {
}
/deep/ .el-form-item__content{
margin-left:0px !important;
}
}
.HspdInfo {
// width: 97%;
// display: flex;
// flex-direction: row;
// align-items: center;
// justify-content: space-around;
width: 100%;
height: 100%;
.historyRainTable {
width: 100%;
height: 100%;
}
.deptInfoBox {
width: 100%;
height: 100%;
border-spacing: 0;
// border: 1px solid #305189;
/deep/ .el-row {
text-align: center;
line-height: 40px;
height: 40px;
border: 1px solid #10ccec;
}
/deep/ .el-col-12:nth-child(2n + 1) {
border-right: 1px solid #10ccec;
}
/deep/ .el-tabs--border-card {
border: 1px solid #10ccec;
background: #113441;
color: #ffffff;
height: calc(100% - 5px);
}
/deep/ .el-tabs--border-card > .el-tabs__content {
height: calc(100% - 40px);
font-size: 18px;
line-height: 30px;
.deals {
height: 100%;
overflow: auto;
}
}
/deep/ .el-tabs--border-card > .el-tabs__header {
background: #113441;
}
/deep/ .el-tabs__content::-webkit-scrollbar {
width: 0;
}
/deep/ .el-tabs--border-card > .el-tabs__header .el-tabs__item {
font-size: 18px;
}
/deep/
.el-tabs--border-card
> .el-tabs__header
.el-tabs__item.is-active {
color: #ffffff;
background: #164759;
}
/deep/
.el-tabs--border-card
> .el-tabs__header
.el-tabs__item:not(.is-disabled):hover {
color: #ffffff;
}
/deep/ .el-table--border td,
.el-table--border th,
.el-table__body-wrapper
.el-table--border.is-scrolling-left
~ .el-table__fixed {
border-left: 1px solid #8a8a8a !important;
}
/deep/ .el-table--border td:nth-last-child(1) {
border-right: 1px solid #8a8a8a !important;
}
/deep/ .el-table td,
.el-table th.is-leaf {
border-bottom: 1px solid #8a8a8a !important;
}
/deep/ .el-table thead tr th {
border-color: #8c939d;
border-left: 1px solid #8a8a8a !important;
border-bottom: 1px solid #8a8a8a !important;
}
/deep/ .el-table thead tr th:nth-last-child(2) {
border-right: 1px solid #8a8a8a !important;
}
/deep/ .el-table--border::after,
.el-table--group::after,
.el-table::before {
content: none;
}
/deep/ .el-table--border {
border-top: 1px solid #8a8a8a !important;
font-size: 18px;
}
/deep/ .el-table .cell {
display: flex;
align-items: center;
justify-content: space-evenly;
}
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: #1f586e !important;
}
}
.adviceBox {
width: 100%;
height: 100%;
.title {
width: 100%;
height: 40px;
font-size: 22px;
font-weight: 600;
color: #21F8FF;
line-height: 40px;
margin-bottom: 10px;
}
.data {
color: #fff;
width: 100%;
padding-left: 15px;
font-size: 18px;
line-height: 40px;
height: 40px;
background: #1f6580;
border: 1px solid #1f6580;
border-radius: 8px;
span {
color: #0fd981;
font-weight: bold;
}
}
.suggest {
width: 50%;
height: 80px;
font-size: 20px;
color: #fff;
font-weight: 700;
line-height: 80px;
text-align: center;
margin: 0 auto;
// background: #0d7985;
}
}
.yjcs {
border: 1px solid #10ccec;
border-spacing: 0;
border-top: none;
display: flex;
flex-direction: column;
background: #113745;
.yjcsTitle {
height: 40px;
line-height: 40px;
width: 100%;
text-align: center;
}
.yjcsContent {
padding: 0 10px;
line-height: 40px;
}
}
}
.scrollbar {
overflow: auto;
height: 200px;
display: block;
.novideo {
height: 100%;
width: 100%;
line-height: 210px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
}
.scrollbar::-webkit-scrollbar {
width: 0;
}
.left {
width: 30%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.imgBox {
flex-shrink: 0;
width: 94px;
height: 94px;
border: 3px solid #ffd220;
text-align: center;
line-height: 117px;
border-radius: 50%;
padding-top: 12px;
}
.val {
font-size: 60px;
font-family: DIN-Medium, DIN;
font-weight: 500;
color: #ffd220;
span {
font-size: 16px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ffd220;
}
}
}
.realInfo {
// height: 80%;
width: 65%;
// display: flex;
// flex-direction: column;
// justify-content: center;
// background: rgba(17, 54, 68, 0.9);
background: #0f2e36;
overflow: auto;
height: 200px;
border: 1px solid #305189;
.tr {
display: flex;
align-items: center;
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
height: 40px;
background: #0f2e36;
border: 1px solid #305189;
// width: 331px;
.name,
.val {
flex: 1;
padding-left: 5px;
}
}
.tr:nth-child(2n + 1) {
background: #0f2e36;
border: 1px solid #305189;
}
.tr:last-child {
height: 80px;
.name {
line-height: 80px;
}
}
// 列表样式
.tableBox {
width: 95%;
// margin: 0 auto;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #ffffff;
.table-head {
display: flex;
height: 46px;
line-height: 46px;
background: rgba(31, 92, 115, 0.9);
text-align: center;
border: 1px solid #46eddb;
margin: 0 auto;
}
.table-body {
height: 200px;
background: #113441;
overflow-y: auto;
.tr {
display: flex;
height: 40px;
line-height: 40px;
text-align: center;
}
.tr:nth-child(2n) {
background: rgba(15, 45, 53, 0.9);
border-top: 1px solid #4ccdee;
border-bottom: 1px solid #4ccdee;
}
}
.table-body::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.table-body::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #41e8e9;
}
.table-body::-webkit-scrollbar-track {
border-radius: 10px;
background: #113543;
}
}
}
.realInfo::-webkit-scrollbar {
width: 0;
height: 0;
}
.videoInfo {
height: 100%;
color: #fff;
position: relative;
.url {
position: absolute;
top: -30px;
left: 5px;
}
/deep/ .el-select {
margin-bottom: 5px;
.el-input__inner {
background-color: #102e37;
border: 1px solid #102e37 !important;
color: #41e8e9;
font-size: 15px;
}
}
/deep/ .el-radio-group {
}
.videoBox {
width: 100%;
height: 100%;
display: flex;
}
.left {
width: 210px;
height: 100%;
display: inline-block;
.tip {
width: 100%;
text-align: center;
height: 20px;
font-size: 14px;
line-height: 20px;
color: #bfcc07;
}
.list {
width: 100%;
height: calc(100% - 30px - 20px);
display: flex;
flex-direction: column;
overflow-y: auto;
overflow-x: hidden;
.li {
width: 100%;
height: 30px;
line-height: 30px;
font-size: 14px;
cursor: pointer;
color: #fff;
}
.checked {
color: #0fd981;
}
&::-webkit-scrollbar {
width: 0px !important;
height: 0px !important;
}
}
}
.right {
width: 680px;
height: 100%;
display: inline-block;
}
.novideo {
height: 100%;
width: 100%;
line-height: 210px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
}
}
.triangle {
position: absolute;
top: 364px;
left: 226px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #164759;
}
}
</style>
<style lang="scss">
.waterLoggDialog{
.el-dialog{
z-index: 1;
background: #113441;
}
.el-dialog__body {
background: #113441;
}
.el-textarea__inner {
background: #113441;
}
.el-dialog__footer {
background: #113441;
}
.el-form-item__label{
color: #ffffff;
}
.el-textarea__inner{
color: #ffffff;
}
}
.popperArea {
border: 1px solid rgb(70, 237, 219);
background-color: rgb(30, 89, 112);
box-shadow: 0 2px 10px 0 #0d7985;
color: #fff;
.el-select-dropdown__item {
color: #ffffff;
&.hover {
background-color: #3680e4;
}
}
}
.novideo {
height: 100%;
width: 100%;
line-height: 210px;
text-align: center;
font-size: 20px;
font-weight: bold;
}
.btns {
.el-tabs--card > .el-tabs__header {
border-bottom: none;
}
.el-tabs--card > .el-tabs__header .el-tabs__nav {
border-radius: 60px;
background: hsla(0, 0%, 100%, 0.1);
border: none;
}
.el-tabs--card > .el-tabs__header .el-tabs__item {
font-size: 18px;
border: none;
color: #ffffff;
}
.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
background: #1f6580;
border-radius: 60px;
}
}
</style>