Skip to content

D
digital-construction
Commit d73c08a6 authored by 张牧越's avatar 张牧越
Browse files
Options

扬尘噪音联调

parent 03f644c2
Hide whitespace changes
Inline Side-by-side
Showing with 395 additions and 159 deletions
dist.zip 0 → 100644
View file @ d73c08a6
File added
src/api/index.js
View file @ d73c08a6
...@@ -100,6 +100,14 @@ export function getVideoTreeData() { ...@@ -100,6 +100,14 @@ export function getVideoTreeData() {
method: 'get', method: 'get',
}) })
} }
export function getVideoLiveAddressUrl(cameraId) {
return request({
url: `/pweb/s/camera/liveaddress/${cameraId}`,
method: 'get',
})
}
// early-warning // early-warning
export function getAIdata() { export function getAIdata() {
...@@ -150,4 +158,19 @@ export function getNoiseDeviceList(params) { ...@@ -150,4 +158,19 @@ export function getNoiseDeviceList(params) {
method: 'get', method: 'get',
params params
}) })
} }
\ No newline at end of file
export function getCurrentMonitorStatis() {
return request({
url: '/pweb/s/env/basedata',
method: 'get',
})
}
export function getWarningMessageList(params) {
return request({
url: '/pweb/s/env/warning/list',
method: 'get',
params
})
}
src/components/noise/Index.vue
View file @ d73c08a6
...@@ -44,8 +44,13 @@ ...@@ -44,8 +44,13 @@
<el-divider></el-divider> <el-divider></el-divider>
<el-progress <el-progress
type="circle" type="circle"
:percentage="60" :percentage="
:format="(value) => formatText(value, '40')" computedPercentage(
currentMonitorStatis.pm10,
currentMonitorStatis.pm10_max
)
"
:format="(value) => formatText(value, currentMonitorStatis.pm10)"
:color="customMonitorColors" :color="customMonitorColors"
:stroke-width="12" :stroke-width="12"
></el-progress> ></el-progress>
...@@ -55,8 +60,13 @@ ...@@ -55,8 +60,13 @@
<el-divider></el-divider> <el-divider></el-divider>
<el-progress <el-progress
type="circle" type="circle"
:percentage="40" :percentage="
:format="(value) => formatText(value, '35')" computedPercentage(
currentMonitorStatis.pm25,
currentMonitorStatis.pm25_max
)
"
:format="(value) => formatText(value, currentMonitorStatis.pm25)"
:color="customMonitorColors" :color="customMonitorColors"
:stroke-width="12" :stroke-width="12"
></el-progress> ></el-progress>
...@@ -68,8 +78,13 @@ ...@@ -68,8 +78,13 @@
<el-divider></el-divider> <el-divider></el-divider>
<el-progress <el-progress
type="circle" type="circle"
:percentage="10" :percentage="
:format="(value) => formatText(value, '52')" computedPercentage(
currentMonitorStatis.noise,
currentMonitorStatis.noise_max
)
"
:format="(value) => formatText(value, currentMonitorStatis.noise)"
:color="customMonitorColors" :color="customMonitorColors"
:stroke-width="12" :stroke-width="12"
></el-progress> ></el-progress>
...@@ -85,20 +100,21 @@ ...@@ -85,20 +100,21 @@
</div> </div>
<div class="aqi-level"> <div class="aqi-level">
<div class="aqi-level-line"> <div class="aqi-level-line">
<div style="background: #18d7b9"></div> <div
<div style="background: #feba01"></div> v-for="(color, index) in color_arr"
<div style="background: #ff754c"></div> :key="index"
<div style="background: #f11b1f"></div> :style="{ background: color }"
<div style="background: #6339e6"></div> ></div>
<div style="background: #751dbf"></div>
</div> </div>
<div class="aqi-level-text"> <div class="aqi-level-text">
<div>优</div> <div
<div>良</div> v-for="(
<div>轻度</div> aqi_level, index
<div>中度</div> ) in currentMonitorStatis.aqi_level_arr"
<div>重度</div> :key="index"
<div>严重</div> >
{{ aqi_level.name }}
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -109,7 +125,10 @@ ...@@ -109,7 +125,10 @@
<div>温度</div> <div>温度</div>
<img src="@/assets/noise/icon_f_san@2x.png" alt="" /> <img src="@/assets/noise/icon_f_san@2x.png" alt="" />
</div> </div>
<div class="rt-value"><span>14.5</span>℃</div> <div class="rt-value">
<span>{{ currentMonitorStatis.temperature }}</span
>℃
</div>
</div> </div>
<el-divider> </el-divider> <el-divider> </el-divider>
<div class="rt-single-status"> <div class="rt-single-status">
...@@ -117,7 +136,10 @@ ...@@ -117,7 +136,10 @@
<div>湿度</div> <div>湿度</div>
<img src="@/assets/noise/icon_f_si@2x.png" alt="" /> <img src="@/assets/noise/icon_f_si@2x.png" alt="" />
</div> </div>
<div class="rt-value"><span>36</span>%</div> <div class="rt-value">
<span>{{ currentMonitorStatis.humidity }}</span
>%
</div>
</div> </div>
<el-divider> </el-divider> <el-divider> </el-divider>
<div class="rt-single-status"> <div class="rt-single-status">
...@@ -125,7 +147,10 @@ ...@@ -125,7 +147,10 @@
<div>风速</div> <div>风速</div>
<img src="@/assets/noise/icon_f_wu@2x.png" alt="" /> <img src="@/assets/noise/icon_f_wu@2x.png" alt="" />
</div> </div>
<div class="rt-value"><span>5</span>m/s</div> <div class="rt-value">
<span>{{ currentMonitorStatis.wind_speed }}</span
>m/s
</div>
</div> </div>
<el-divider> </el-divider> <el-divider> </el-divider>
<div class="rt-single-status"> <div class="rt-single-status">
...@@ -137,9 +162,15 @@ ...@@ -137,9 +162,15 @@
class="rt-value" class="rt-value"
style="line-height: 20px; padding-top: 16px" style="line-height: 20px; padding-top: 16px"
> >
2023-03-02 {{
currentMonitorStatis.log_time &&
currentMonitorStatis.log_time.split(" ")[0]
}}
<br /> <br />
09:23:12 {{
currentMonitorStatis.log_time &&
currentMonitorStatis.log_time.split(" ")[1]
}}
</div> </div>
</div> </div>
<el-divider> </el-divider> <el-divider> </el-divider>
...@@ -157,12 +188,21 @@ ...@@ -157,12 +188,21 @@
<div class="warp"> <div class="warp">
<div <div
class="warn-title" class="warn-title"
:style="{ borderColor: '#fff' }"
v-for="(warn, index) in warnings" v-for="(warn, index) in warnings"
:key="index" :key="index"
> >
<div class="warn-text">{{ warn.text }}</div> <div class="warn-text">
<div class="warn-time">{{ warn.time }}</div> <el-tooltip
class="item"
effect="dark"
:content="warn.alarm_content"
>
<div class="overflowed">
{{ warn.alarm_content }}
</div>
</el-tooltip>
</div>
<div class="warn-time">{{ warn.log_time }}</div>
</div> </div>
</div> </div>
</ShadowContainer> </ShadowContainer>
...@@ -183,7 +223,12 @@ ...@@ -183,7 +223,12 @@
</div> </div>
</template> </template>
<script> <script>
import { getDeviceTotalStatus, getNoiseDeviceList } from "@/api/index"; import {
getDeviceTotalStatus,
getCurrentMonitorStatis,
getNoiseDeviceList,
getWarningMessageList,
} from "@/api/index";
export default { export default {
name: "Noise", name: "Noise",
data() { data() {
...@@ -214,26 +259,45 @@ export default { ...@@ -214,26 +259,45 @@ export default {
{ color: "#FF754C", percentage: 75 }, { color: "#FF754C", percentage: 75 },
{ color: "#FF754C", percentage: 100 }, { color: "#FF754C", percentage: 100 },
], ],
warnings: [ warnings: [],
{
text: "报警标题：报警内容123123123报警标题：报警内容123123123报警标题：报警内容123123123",
time: "2023-02-12 09:12",
},
{ text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
{ text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
{ text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
{ text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
{ text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
{ text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
{ text: "报警标题：报警内容123123123", time: "2023-02-12 09:12" },
],
noiseMonitors: [], noiseMonitors: [],
classOption: { classOption: {
singleHeight: 36, singleHeight: 36,
}, },
currentMonitorStatis: {
aqi_level_arr: [],
},
color_arr: [
"#18d7b9",
"#feba01",
"#ff754c",
"#f11b1f",
"#6339e6",
"#751dbf",
],
}; };
}, },
computed: {},
methods: { methods: {
computedPercentage(value, max) {
return Number(Number(Number(value) / max) * 100).toFixed(2);
},
getTime(ts) {
let date = new Date(ts);
let year = date.getFullYear();
let month = date.getMonth() + 1;
let day = date.getDate();
month = month > 9 ? month : "0" + month;
day = day < 10 ? "0" + day : day;
let today = year + "-" + month + "-" + day;
let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
let min =
date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
let sec =
date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
return `${today} ${hour}:${min}:${sec}`;
},
renderDeviceChart() { renderDeviceChart() {
const pieData = [ const pieData = [
{ value: this.pieChartData.zxCount, name: "在线设备数量" }, { value: this.pieChartData.zxCount, name: "在线设备数量" },
...@@ -469,19 +533,31 @@ export default { ...@@ -469,19 +533,31 @@ export default {
return text; return text;
}, },
renderAqiQualityChart() { renderAqiQualityChart() {
this.currentMonitorStatis.aqi_level_arr.map((item, index) => {
item.color = this.color_arr[index];
});
const currentLevel = this.currentMonitorStatis.aqi_level_arr.filter(
(item) => {
return (
Number(this.currentMonitorStatis.aqi) >= item.min &&
Number(this.currentMonitorStatis.aqi) < item.max
);
}
)[0];
console.log(currentLevel);
const chart = this.$echarts.init(this.$refs.aqiQualityChart); const chart = this.$echarts.init(this.$refs.aqiQualityChart);
const option = { const option = {
title: { title: {
x: "49%", //X坐标 x: "49%", //X坐标
y: "64%", y: "64%",
subtext: "优", subtext: this.currentMonitorStatis.aqi_level_name,
textAlign: "center", textAlign: "center",
subtextStyle: { subtextStyle: {
//副标题样式 //副标题样式
fontSize: 24, fontSize: 24,
fontWeight: "bolder", fontWeight: "bolder",
lineHeight: 24, lineHeight: 24,
color: "rgba(255,255,255,0.7)", color: currentLevel.color,
}, },
}, },
series: [ series: [
...@@ -490,10 +566,12 @@ export default { ...@@ -490,10 +566,12 @@ export default {
center: ["50%", "60%"], center: ["50%", "60%"],
startAngle: 230, startAngle: 230,
endAngle: -50, endAngle: -50,
min: 0, min: this.currentMonitorStatis.aqi_level_arr[0].min,
max: 300, max: this.currentMonitorStatis.aqi_level_arr[
this.currentMonitorStatis.aqi_level_arr.length - 1
].max,
itemStyle: { itemStyle: {
color: "#FFAB91", color: currentLevel.color,
}, },
progress: { progress: {
show: true, show: true,
...@@ -541,19 +619,40 @@ export default { ...@@ -541,19 +619,40 @@ export default {
}, },
data: [ data: [
{ {
value: 20, value: Number(this.currentMonitorStatis.aqi),
}, },
], ],
}, },
], ],
}; };
chart.setOption(option); chart.setOption(option);
this.$nextTick(() => {
// 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => {
for (const entry of entries) {
this.$echarts.getInstanceByDom(entry.target).resize();
}
});
resizeOb.observe(document.getElementById("aqi-quality-chart"));
});
}, },
getNoiseData() { getNoiseData() {
getDeviceTotalStatus({ top_cat: 9 }).then((res) => { getDeviceTotalStatus({ top_cat: 9 }).then((res) => {
this.pieChartData = res.data; this.pieChartData = res.data;
this.renderDeviceChart(); this.renderDeviceChart();
}); });
getCurrentMonitorStatis().then((res) => {
this.currentMonitorStatis = res.data;
this.renderAqiQualityChart();
});
getWarningMessageList({
start_log_time: this.getTime(new Date().getTime() - 2592000000),
end_log_time: this.getTime(new Date().getTime()),
}).then((res) => {
this.warnings = res.data;
});
getNoiseDeviceList({ top_cat: 9 }).then((res) => { getNoiseDeviceList({ top_cat: 9 }).then((res) => {
this.noiseMonitors = res.data; this.noiseMonitors = res.data;
}); });
...@@ -563,7 +662,6 @@ export default { ...@@ -563,7 +662,6 @@ export default {
this.getNoiseData(); this.getNoiseData();
this.renderNoiseChart(); this.renderNoiseChart();
this.renderAQIChart(); this.renderAQIChart();
this.renderAqiQualityChart();
this.$nextTick(() => { this.$nextTick(() => {
// 解决echarts图表放大溢出父容器 // 解决echarts图表放大溢出父容器
const resizeOb = new ResizeObserver((entries) => { const resizeOb = new ResizeObserver((entries) => {
...@@ -573,7 +671,7 @@ export default { ...@@ -573,7 +671,7 @@ export default {
}); });
resizeOb.observe(document.getElementById("noise-chart")); resizeOb.observe(document.getElementById("noise-chart"));
resizeOb.observe(document.getElementById("aqi-chart")); resizeOb.observe(document.getElementById("aqi-chart"));
resizeOb.observe(document.getElementById("aqi-quality-chart")); // resizeOb.observe(document.getElementById("aqi-quality-chart"));
}); });
}, },
}; };
...@@ -755,6 +853,15 @@ export default { ...@@ -755,6 +853,15 @@ export default {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 18px; margin-bottom: 18px;
&:nth-child(3n-2) {
border-color: #fd175d;
}
&:nth-child(3n-1) {
border-color: #ab75ff;
}
&:nth-child(3n) {
border-color: #ffbb37;
}
.warn-text { .warn-text {
width: 60%; width: 60%;
text-overflow: ellipsis; text-overflow: ellipsis;
...@@ -783,4 +890,9 @@ export default { ...@@ -783,4 +890,9 @@ export default {
height: 180px; height: 180px;
overflow: hidden; overflow: hidden;
} }
.overflowed {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
</style> </style>
\ No newline at end of file
src/components/supervisory/Index.vue
View file @ d73c08a6
...@@ -15,33 +15,58 @@ ...@@ -15,33 +15,58 @@
:props="defaultProps" :props="defaultProps"
icon-class="el-icon-arrow-right" icon-class="el-icon-arrow-right"
:render-content="renderContent" :render-content="renderContent"
@node-expand="expandEvent"
:filter-node-method="filterNode" :filter-node-method="filterNode"
accordion
></el-tree> ></el-tree>
</div> </div>
</ShadowContainer> </ShadowContainer>
</div> </div>
<div class="video-area"> <div class="video-out-container">
<div <div class="splice-screen">
v-for="(videoImg, index) in cameraList" <el-button
:key="index" :class="[activeSplice == 1 ? 'active' : '']"
:class="['camera', activeIndex == index ? 'active' : '']" @click="activeSplice = 1"
> >一分屏</el-button
<div v-if="!videoImg.live_address_url"> >
<div class="video-info"> <el-button
<div class="video-no">{{ index + 1 }}</div> :class="[activeSplice == 4 ? 'active' : '']"
<div class="video-description">暂无画面~</div> @click="activeSplice = 4"
>四分屏</el-button
>
<el-button
:class="[activeSplice == 6 ? 'active' : '']"
@click="activeSplice = 6"
>六分屏</el-button
>
<el-button
:class="[activeSplice == 9 ? 'active' : '']"
@click="activeSplice = 9"
>九分屏</el-button
>
<el-button @click="closeAll">全部关闭</el-button>
</div>
<div class="video-area">
<div
v-for="(videoImg, index) in activeSplice"
:key="index"
:class="[
'camera',
activeIndex == index ? 'active' : '',
`camera-in-${activeSplice}`,
]"
>
<div v-if="!cameraList[index] || cameraList[index].player === null">
<div class="video-info">
<div class="video-no">{{ index + 1 }}</div>
<div class="video-description">暂无画面~</div>
</div>
</div>
<div v-else class="video-pic" :ref="`video-js-container-${index}`">
<i class="el-icon-circle-close" @click="closeSingle(index)"></i>
<div
:id="[`video-container-${index + 1}`]"
style="height: 100%"
></div>
</div> </div>
</div>
<div v-else class="video-pic">
<img src="@/assets/swiper-pic.png" alt="" />
<img
@click="openLive(videoImg.live_address_url)"
class="play"
src="@/assets/play.png"
alt=""
/>
</div> </div>
</div> </div>
</div> </div>
...@@ -58,7 +83,7 @@ ...@@ -58,7 +83,7 @@
</div> </div>
</template> </template>
<script> <script>
import { getVideoTreeData } from "@/api/index"; import { getVideoTreeData, getVideoLiveAddressUrl } from "@/api/index";
require("vue-video-player/node_modules/video.js/dist/video-js.css"); require("vue-video-player/node_modules/video.js/dist/video-js.css");
import videojs from "video.js"; import videojs from "video.js";
import "videojs-contrib-hls"; import "videojs-contrib-hls";
...@@ -67,57 +92,17 @@ export default { ...@@ -67,57 +92,17 @@ export default {
data() { data() {
return { return {
filterText: "", filterText: "",
treeData: [ treeData: [],
{
area_name: "北门",
device_data: [
{
id: 7,
device_name: "测试监控",
device_no: "223311",
top_cat: 2,
child_cat: 0,
factory_no: "",
model: "",
produce_name: "",
produce_date: null,
use_project_id: 12,
company_id: 0,
status: 1,
ip_address: "",
port: 0,
remark: "",
data_channel: 1,
config_extra: "",
is_online: 0,
area_id: 5,
area_name: "北门",
project_name: "绍兴二院兰亭院区（康复医院）工程123",
client_name: null,
top_cat_name: "摄像头",
status_name: "启用",
config_extra_arr: {
deviceSerial: "D46048684",
appKey: "f963254fd4dd47f683982402a2741538",
appSecret: "9a2a939f45f05e86364eeee43a506626",
},
live_address_url:
"https://open.ys7.com/v3/openlive/D46048684_1_1.m3u8?expire=1681955110&id=568733826499485696&t=5d69a2f783296e60109f6de3424ab1b62898ad5d8ead10482ba89f9780cbf56d&ev=100",
},
],
device_count: 1,
},
],
defaultProps: { defaultProps: {
children: "children", children: "children",
label: "label", label: "label",
}, },
cameraList: [1, 2, 3, 4], cameraList: [],
activeIndex: null, activeIndex: null,
liveVisible: false, liveVisible: false,
singlePlayer: null, singlePlayer: null,
activeSplice: 4,
}; };
}, },
mounted() { mounted() {
...@@ -142,8 +127,8 @@ export default { ...@@ -142,8 +127,8 @@ export default {
return data.map((item, index) => { return data.map((item, index) => {
return { return {
label: item.device_name, label: item.device_name,
live_address_url: item.live_address_url,
index: index, index: index,
id: item.id,
}; };
}); });
}, },
...@@ -171,47 +156,112 @@ export default { ...@@ -171,47 +156,112 @@ export default {
</span> </span>
); );
}, },
expandEvent(data) {
this.cameraList = data.children;
},
selectNode(node, data) { selectNode(node, data) {
console.log(node, data); if (node.level > 1) {
if (node.level == 1) { const playerArray = this.cameraList.map((item) => {
this.cameraList = data.children; return item.player;
} else { });
this.activeIndex = data.index; const cameraIdList = this.cameraList.map((item) => {
return item.id;
});
if (cameraIdList.indexOf(data.id) != -1) {
return this.$message.warning("该监控已存在!");
}
const nullIndex = playerArray.indexOf(null);
if (nullIndex != -1) {
this.cameraList[nullIndex] = {
player: undefined,
id: data.id,
};
this.$forceUpdate();
getVideoLiveAddressUrl(data.id).then((res) => {
this.$nextTick(() => {
const myVideoDiv = document.getElementById(
`video-container-${nullIndex + 1}`
);
myVideoDiv.innerHTML = `<video
id="singleVideo${nullIndex + 1}"
autoplay="autoplay"
class="video-js vjs-default-skin"
></video>`;
const singlePlayer = videojs(`singleVideo${nullIndex + 1}`, {
autoplay: true, // 自动播放
controls: true, // 控件显示
preload: "auto", //定义视频加载模式
loop: true, //是否循环播放
});
singlePlayer.src({
src: res.data.live_address_url,
type: "application/x-mpegURL",
});
singlePlayer.play();
this.cameraList[nullIndex].player = singlePlayer;
});
});
} else {
if (this.cameraList.length == this.activeSplice) {
return this.$message.warning("请先关闭多余的监控!");
}
this.cameraList.push({
player: undefined,
id: data.id,
});
this.$forceUpdate();
getVideoLiveAddressUrl(data.id).then((res) => {
this.$nextTick(() => {
const myVideoDiv = document.getElementById(
`video-container-${this.cameraList.length}`
);
myVideoDiv.innerHTML = `<video
id="singleVideo${this.cameraList.length}"
autoplay="autoplay"
class="video-js vjs-default-skin"
></video>`;
const singlePlayer = videojs(
`singleVideo${this.cameraList.length}`,
{
autoplay: true, // 自动播放
controls: true, // 控件显示
preload: "auto", //定义视频加载模式
loop: true, //是否循环播放
}
);
singlePlayer.src({
src: res.data.live_address_url,
type: "application/x-mpegURL",
});
singlePlayer.play();
this.cameraList[this.cameraList.length - 1].player = singlePlayer;
});
});
}
} }
}, },
openLive(url) { closeAll() {
this.liveVisible = true; this.cameraList.map((item) => {
this.$nextTick(() => { item.player.dispose();
this.singlePlayer = videojs("singleVideo", {
autoplay: true, // 自动播放
controls: true, // 控件显示
width: "100%", // 视频框宽度
height: "600px", // 视频框高度
preload: "auto", //定义视频加载模式
loop: true, //是否循环播放
});
this.singlePlayer.src({ src: url, type: "application/x-mpegURL" });
this.singlePlayer.play();
}); });
this.cameraList = [];
},
closeSingle(index) {
this.cameraList[index].player.dispose();
this.cameraList[index].player = null;
this.cameraList[index].live_address_url = "";
this.cameraList[index].id = "";
this.$forceUpdate();
}, },
}, },
watch: { watch: {
filterText(val) { filterText(val) {
this.$refs.tree.filter(val); this.$refs.tree.filter(val);
}, },
liveVisible(val) { activeSplice(newValue, oldValue) {
if (!val) { if (newValue < oldValue && this.cameraList.length > newValue) {
this.singlePlayer.dispose(); for (let i = newValue; i < this.cameraList.length; i++) {
this.singlePlayer = null; this.cameraList[i].player = null;
const myVideoDiv = document.getElementById("video-container"); this.cameraList[i].id = "";
myVideoDiv.innerHTML = `<video this.cameraList[i].live_address_url = "";
id="singleVideo" }
autoplay="autoplay"
class="video-js vjs-default-skin"
></video>`;
} }
}, },
}, },
...@@ -270,19 +320,42 @@ export default { ...@@ -270,19 +320,42 @@ export default {
height: 860px; height: 860px;
overflow-y: scroll; overflow-y: scroll;
} }
.video-area { .video-out-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border: 1px solid #0f95d4;
height: 974px;
width: calc(80% - 20px); width: calc(80% - 20px);
overflow-y: scroll; }
.video-area {
height: 914px;
width: 100%;
.camera { .camera {
width: calc(50% - 2px); &:hover {
height: 487px; border-color: #fff;
}
border: 1px solid #0f95d4; border: 1px solid #0f95d4;
position: relative; position: relative;
float: left;
box-sizing: border-box;
&.camera-in-1 {
width: 100%;
height: 100%;
}
&.camera-in-4 {
width: calc(50% - 2px);
height: calc(914px / 2 - 2px);
}
&.camera-in-6 {
width: calc(100% / 3 - 2px);
height: calc(910px / 3 - 1px);
display: inline-block;
&:first-child {
width: calc(calc(100% / 3 - 2px) * 2);
height: calc(calc(906px / 3) * 2);
}
}
&.camera-in-9 {
width: calc(100% / 3 - 2px);
height: calc(914px / 3 - 2px);
}
.video-info { .video-info {
position: absolute; position: absolute;
left: 50%; left: 50%;
...@@ -304,6 +377,12 @@ export default { ...@@ -304,6 +377,12 @@ export default {
.video-pic { .video-pic {
padding: 8px; padding: 8px;
height: calc(100% - 16px); height: calc(100% - 16px);
&:hover {
.el-icon-circle-close {
display: block;
cursor: pointer;
}
}
img { img {
width: 100%; width: 100%;
vertical-align: top; vertical-align: top;
...@@ -319,10 +398,6 @@ export default { ...@@ -319,10 +398,6 @@ export default {
cursor: pointer; cursor: pointer;
} }
} }
&.active {
border: 4px solid #0f95d4;
box-sizing: border-box;
}
} }
} }
...@@ -357,5 +432,31 @@ export default { ...@@ -357,5 +432,31 @@ export default {
} }
::v-deep .video-js { ::v-deep .video-js {
width: 100%; width: 100%;
height: 100%;
}
.splice-screen {
display: flex;
justify-content: space-between;
margin-bottom: 12px;
.el-button {
background: rgba(40, 137, 195, 0.2);
color: #c6def9;
font-size: 18px;
border-color: rgba(33, 127, 247, 1);
width: calc(100% / 5 - 20px);
&.active {
background: #00a2ff;
color: #fff;
}
}
}
.el-icon-circle-close {
display: none;
color: #fff;
font-size: 24px;
position: absolute;
right: 20px;
top: 20px;
z-index: 999;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment