You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
901 lines
33 KiB
901 lines
33 KiB
<template>
|
|
<div class="eb-container" ref="appRef">
|
|
<MainTitle class="title" :title="title"></MainTitle>
|
|
<div class="left-box">
|
|
<div class="left-top">
|
|
<div class="content-info">
|
|
<video-one :tree-node="treeItem"></video-one>
|
|
</div>
|
|
</div>
|
|
<div class="left-bottom">
|
|
<div class="chart-box">
|
|
<div class="title-box-680" style="width: 100%">
|
|
<span>车流数据趋势</span>
|
|
</div>
|
|
<div class="content-info" id="chart1"></div>
|
|
</div>
|
|
<div class="chart-box">
|
|
<div class="title-box-680" style="width: 100%">
|
|
<span>车流告警趋势</span>
|
|
</div>
|
|
<div class="content-info" id="chart2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="title-box-680" style="width: 100%">
|
|
<span>预警信息</span>
|
|
</div>
|
|
<div class="content-info">
|
|
<div class="alarm-info-count-box">
|
|
<div
|
|
class="alarm-info-count-item"
|
|
style="background-color: rgba(28, 125, 78, 0.4)"
|
|
>
|
|
<div style="width: 100%; margin-top: 20px">
|
|
当天预警次数
|
|
</div>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
font-size: 30px;
|
|
font-family: 'shiShangHeiTi';
|
|
"
|
|
>
|
|
{{ conutInfo.dayNum }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="alarm-info-count-item"
|
|
style="background-color: rgba(40, 132, 146, 0.4)"
|
|
>
|
|
<div style="width: 100%; margin-top: 20px">
|
|
近7日预警次数
|
|
</div>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
font-size: 30px;
|
|
font-family: 'shiShangHeiTi';
|
|
"
|
|
>
|
|
{{ conutInfo.weekNum }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="alarm-info-count-item"
|
|
style="background-color: rgba(193, 53, 70, 0.3)"
|
|
>
|
|
<div style="width: 100%; margin-top: 20px">
|
|
近30日预警次数
|
|
</div>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
font-size: 30px;
|
|
font-family: 'shiShangHeiTi';
|
|
"
|
|
>
|
|
{{ conutInfo.monthNum }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
style="width: 100%; height: 735px; margin-top: 20px"
|
|
@click="openAlarm($event)"
|
|
>
|
|
<vue-seamless-scroll
|
|
v-if="warringList.length > 0"
|
|
:data="warringList"
|
|
:class-option="optionHover"
|
|
style="width: 100%; height: 100%; overflow: hidden"
|
|
>
|
|
<div
|
|
style="
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
"
|
|
>
|
|
<div
|
|
class="data-item"
|
|
v-for="(item, index) in warringList"
|
|
:data-index="index"
|
|
:key="index"
|
|
>
|
|
<div class="data-head" :data-index="index">
|
|
<img
|
|
:src="
|
|
require('@/assets/largeScreen/warring-icon.png')
|
|
"
|
|
:data-index="index"
|
|
alt="图片加载失败"
|
|
/>
|
|
<div class="head-text" :data-index="index">
|
|
<span
|
|
class="position"
|
|
:data-index="index"
|
|
>{{ item.deviceName }}</span
|
|
>
|
|
<span
|
|
class="date"
|
|
:data-index="index"
|
|
>{{ item.type }}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="data-info"
|
|
:data-index="index"
|
|
style="
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: end;
|
|
flex-direction: row;
|
|
margin-top: 20px;
|
|
"
|
|
>
|
|
<div :data-index="index">
|
|
<div
|
|
:data-index="index"
|
|
class="info-t1"
|
|
style="margin-left: 20px"
|
|
>
|
|
设备IP：{{ item.deviceIp }}
|
|
</div>
|
|
<div
|
|
class="info-t1"
|
|
:data-index="index"
|
|
style="margin-left: 20px"
|
|
>
|
|
告警信息：{{ item.info }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vue-seamless-scroll>
|
|
<div
|
|
v-else
|
|
style="
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 18px;
|
|
color: #ffffff;
|
|
"
|
|
>
|
|
暂无预警
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="page-bottom-bg"></div>
|
|
<div class="page-left-bg"></div>
|
|
<div class="page-right-bg"></div>
|
|
<emergency-modal
|
|
v-model="alarmShow"
|
|
width="988px"
|
|
@close="alarmShow = false"
|
|
>
|
|
<alarmDig :alarmInfo="currentAlarm"></alarmDig>
|
|
</emergency-modal>
|
|
<common-modal
|
|
v-model="alarmInfoModal"
|
|
width="988px"
|
|
@close="alarmInfoModal = false"
|
|
:title="diaAlarmInfo.deviceName"
|
|
>
|
|
<BaseAlarmDig :alarmInfo="diaAlarmInfo"></BaseAlarmDig>
|
|
</common-modal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useIndex } from "../../utils/utilsDramAdmin";
|
|
import MainTitle from "./components/MainTitle.vue";
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
import moment from "moment";
|
|
import * as echarts from "echarts";
|
|
import EmergencyModal from "@/views/common-components/emergency-modal.vue";
|
|
import alarmDig from "@/views/screen/components/alarm/alarm-dig.vue";
|
|
import CommonLivePlayer from "@/views/common-components/common-live-player.vue";
|
|
import { echartsFocus, echartsClear } from "@/utils/autoEcharts";
|
|
import VideoOne from "./components/video-monitor/video-one.vue";
|
|
import CommonModal from "@/views/common-components/common-modal.vue";
|
|
import BaseAlarmDig from "@/views/screen/components/alarm/baseAlarmDig.vue";
|
|
|
|
export default {
|
|
name: "DutySystem",
|
|
components: {
|
|
MainTitle,
|
|
VideoOne,
|
|
vueSeamlessScroll,
|
|
EmergencyModal,
|
|
alarmDig,
|
|
CommonLivePlayer,
|
|
CommonModal,
|
|
BaseAlarmDig,
|
|
},
|
|
data() {
|
|
return {
|
|
title: "车流预警",
|
|
areaCode: "",
|
|
conutInfo: {
|
|
dayNum: 0,
|
|
weekNum: 0,
|
|
monthNum: 0,
|
|
},
|
|
alarmShow: false,
|
|
currentAlarm: {},
|
|
isLive: true,
|
|
videoUrl: "",
|
|
videoList: [],
|
|
optionHover: {
|
|
step: 0.2, // 数值越大速度滚动越快
|
|
limitMoveNum: 4, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
|
},
|
|
treeItem: {},
|
|
warringList: [],
|
|
alarmInfoList: [],
|
|
diaAlarmInfo: {},
|
|
alarmInfoModal: false
|
|
};
|
|
},
|
|
computed: {},
|
|
created() {
|
|
let params = this.$route.query;
|
|
if (params) {
|
|
this.areaCode = params.areaCode;
|
|
this.title = params.areaName + "-车流预警";
|
|
}
|
|
},
|
|
mounted() {
|
|
const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
|
|
calcRate();
|
|
windowDraw();
|
|
this.queryMonitorList();
|
|
this.subscribeTopic()
|
|
},
|
|
watch: {
|
|
"$route.query.areaCode": {
|
|
immediate: false,
|
|
handler(newVal, oldVal) {
|
|
if (newVal) {
|
|
location.reload();
|
|
}
|
|
},
|
|
},
|
|
},
|
|
beforeDestroy() {
|
|
echartsClear();
|
|
this.sockets.unsubscribe("TRAFFIC_ALARM");
|
|
this.sockets.unsubscribe("TRAFFIC_DATA");
|
|
},
|
|
methods: {
|
|
// 订阅主题
|
|
subscribeTopic () {
|
|
console.log("车流socket")
|
|
// 车流告警
|
|
this.sockets.subscribe("TRAFFIC_ALARM", (data) => {
|
|
console.log("车流告警", data);
|
|
if (data.deviceIp == this.treeItem.deviceIp) {
|
|
this.currentAlarm = data;
|
|
if (this.currentAlarm.picture) {
|
|
this.currentAlarm.picture = JSON.parse(
|
|
this.currentAlarm.picture
|
|
);
|
|
}
|
|
this.alarmShow = true;
|
|
this.queryCount([this.treeItem]);
|
|
this.queryAlarmRecord([this.treeItem]);
|
|
}
|
|
});
|
|
// 车流统计
|
|
this.sockets.subscribe("TRAFFIC_DATA", (data) => {
|
|
console.log("车流统计", data);
|
|
this.countCarDataByTime([this.treeItem])
|
|
|
|
});
|
|
},
|
|
// 打开查看预警记录
|
|
openAlarm(e) {
|
|
let index = e.target.dataset.index;
|
|
let data = this.warringList[index];
|
|
if (data.picture) {
|
|
data.picture = JSON.parse(data.picture);
|
|
}
|
|
this.diaAlarmInfo = data;
|
|
console.log(index, data);
|
|
this.alarmInfoModal = true;
|
|
},
|
|
// 查询监控列表
|
|
queryMonitorList() {
|
|
this.$http
|
|
.post(
|
|
"device/queryDeviceInfoPage",
|
|
this.common.request({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
areaCode: this.areaCode,
|
|
deviceType: "车流分析",
|
|
})
|
|
)
|
|
.then((res) => {
|
|
if (res.data.code === 200) {
|
|
if (res.data.data.records && res.data.data.records[0]) {
|
|
this.treeItem = res.data.data.records[0];
|
|
this.treeItem.title = this.treeItem.deviceName;
|
|
this.queryCount(res.data.data.records);
|
|
this.queryAlarmRecord(res.data.data.records);
|
|
this.countCarDataByTime(res.data.data.records);
|
|
this.countCarAlarmTime(res.data.data.records);
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 查询数字统计
|
|
queryCount(list) {
|
|
let ips = list.map((item) => item.deviceIp);
|
|
this.$http
|
|
.post(
|
|
"alarm/base/countAlarmInfoByIps",
|
|
this.common.request({ ips })
|
|
)
|
|
.then((res) => {
|
|
if (res.data.code == 200) {
|
|
let data = res.data.data;
|
|
this.conutInfo.dayNum = data.alarmByDay;
|
|
this.conutInfo.weekNum = data.alarmByWeek;
|
|
this.conutInfo.monthNum = data.alarmByMonth;
|
|
}
|
|
});
|
|
},
|
|
// 查询告警记录
|
|
queryAlarmRecord(list) {
|
|
let ips = list.map((item) => item.deviceIp);
|
|
this.$http
|
|
.post(
|
|
"alarm/base/queryBaseAlarmPage",
|
|
this.common.request({
|
|
page: 1,
|
|
pageSize: 10,
|
|
deviceIpList: ips,
|
|
type: "车流预警",
|
|
})
|
|
)
|
|
.then((res) => {
|
|
if (res.data.code == 200) {
|
|
this.warringList = res.data.data.records;
|
|
}
|
|
});
|
|
},
|
|
// 查询车流告警数据
|
|
countCarDataByTime(list) {
|
|
let ips = list.map((item) => item.deviceIp);
|
|
this.$http
|
|
.post(
|
|
"alarm/car/countCarDataByTime",
|
|
this.common.request({
|
|
deviceIpList: ips,
|
|
})
|
|
)
|
|
.then((res) => {
|
|
if (res.data.code === 200) {
|
|
let data = res.data.data;
|
|
this.initWSD(data.xData, data.yData);
|
|
}
|
|
});
|
|
},
|
|
// 查询车流告警数据
|
|
countCarAlarmTime(list) {
|
|
let ips = list.map((item) => item.deviceIp);
|
|
this.$http
|
|
.post(
|
|
"alarm/base/countAlarmDataByTime",
|
|
this.common.request({
|
|
deviceIpList: ips,
|
|
})
|
|
)
|
|
.then((res) => {
|
|
if (res.data.code === 200) {
|
|
let data = res.data.data;
|
|
this.initWSDGJ(data.xData, data.yData);
|
|
}
|
|
});
|
|
},
|
|
|
|
initWSD(xData, yData1, yData2) {
|
|
let myChart = echarts.init(document.getElementById("chart1"));
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
lineStyle: {
|
|
color: {
|
|
type: "linear",
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: "rgba(126,199,255,0)", // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 0.5,
|
|
color: "rgba(126,199,255,1)", // 100% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(126,199,255,0)", // 100% 处的颜色
|
|
},
|
|
],
|
|
global: false, // 缺省为 false
|
|
},
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
top: "12%",
|
|
left: "6%",
|
|
right: "4%",
|
|
bottom: "15%",
|
|
// containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#233653",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
fontSize: 14,
|
|
},
|
|
formatter: function (data) {
|
|
return data;
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#192a44",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
data: xData,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: "",
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#233653",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "#192a44",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "次数",
|
|
type: "line",
|
|
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
|
|
showAllSymbol: true,
|
|
symbolSize: 0,
|
|
smooth: true,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 3,
|
|
color: "rgba(25,163,223,1)", // 线条颜色
|
|
},
|
|
borderColor: "rgba(0,0,0,.4)",
|
|
},
|
|
itemStyle: {
|
|
color: "rgba(25,163,223,1)",
|
|
borderColor: "#646ace",
|
|
borderWidth: 2,
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
areaStyle: {
|
|
//区域填充样式
|
|
normal: {
|
|
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(25,163,223,.3)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(25,163,223, 0)",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
|
|
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
},
|
|
},
|
|
data: yData1,
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
echartsFocus(myChart, xData.length);
|
|
},
|
|
initWSDGJ(xData, yData1, yData2) {
|
|
let myChart = echarts.init(document.getElementById("chart2"));
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
axisPointer: {
|
|
lineStyle: {
|
|
color: {
|
|
type: "linear",
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [
|
|
{
|
|
offset: 0,
|
|
color: "rgba(126,199,255,0)", // 0% 处的颜色
|
|
},
|
|
{
|
|
offset: 0.5,
|
|
color: "rgba(126,199,255,1)", // 100% 处的颜色
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(126,199,255,0)", // 100% 处的颜色
|
|
},
|
|
],
|
|
global: false, // 缺省为 false
|
|
},
|
|
},
|
|
},
|
|
},
|
|
grid: {
|
|
top: "12%",
|
|
left: "6%",
|
|
right: "4%",
|
|
bottom: "15%",
|
|
// containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: "category",
|
|
boundaryGap: false,
|
|
axisLine: {
|
|
//坐标轴轴线相关设置。数学上的x轴
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#233653",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
//坐标轴刻度标签的相关设置
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
fontSize: 14,
|
|
},
|
|
formatter: function (data) {
|
|
return data;
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#192a44",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
data: xData,
|
|
},
|
|
],
|
|
yAxis: [
|
|
{
|
|
name: "",
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#233653",
|
|
},
|
|
},
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: "#ffffff",
|
|
},
|
|
},
|
|
splitLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
type: "dashed",
|
|
color: "#192a44",
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
},
|
|
],
|
|
series: [
|
|
{
|
|
name: "次数",
|
|
type: "line",
|
|
symbol: "circle", // 默认是空心圆（中间是白色的），改成实心圆
|
|
showAllSymbol: true,
|
|
symbolSize: 0,
|
|
smooth: true,
|
|
lineStyle: {
|
|
normal: {
|
|
width: 3,
|
|
color: "rgba(25,163,223,1)", // 线条颜色
|
|
},
|
|
borderColor: "rgba(0,0,0,.4)",
|
|
},
|
|
itemStyle: {
|
|
color: "rgba(25,163,223,1)",
|
|
borderColor: "#646ace",
|
|
borderWidth: 2,
|
|
},
|
|
tooltip: {
|
|
show: true,
|
|
},
|
|
areaStyle: {
|
|
//区域填充样式
|
|
normal: {
|
|
//线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
|
|
color: new echarts.graphic.LinearGradient(
|
|
0,
|
|
0,
|
|
0,
|
|
1,
|
|
[
|
|
{
|
|
offset: 0,
|
|
color: "rgba(25,163,223,.3)",
|
|
},
|
|
{
|
|
offset: 1,
|
|
color: "rgba(25,163,223, 0)",
|
|
},
|
|
],
|
|
false
|
|
),
|
|
shadowColor: "rgba(25,163,223, 0.5)", //阴影颜色
|
|
shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
|
|
},
|
|
},
|
|
data: yData1,
|
|
},
|
|
],
|
|
};
|
|
myChart.setOption(option);
|
|
echartsFocus(myChart, xData.length);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "../../styles/pbStyle.less";
|
|
|
|
.eb-container {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
transform: scale(var(--scale)) translate(-50%, -50%);
|
|
transform-origin: 0 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
background-image: url("../../assets/largeScreen/page-bg.png");
|
|
background-size: 100%;
|
|
|
|
.left-box {
|
|
position: fixed;
|
|
left: 100px;
|
|
top: 100px;
|
|
width: 1050px;
|
|
height: 950px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.left-top {
|
|
width: 100%;
|
|
height: 680px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.content-info {
|
|
.content-pub-style(100%, 100%);
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.left-bottom {
|
|
width: 100%;
|
|
height: 250px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.chart-box {
|
|
width: 49%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.content-info {
|
|
.content-pub-style(100%, calc(100% - 44px));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
position: fixed;
|
|
top: 100px;
|
|
right: 100px;
|
|
width: 630px;
|
|
height: 950px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.content-info {
|
|
.content-pub-style(100%, calc(100% - 44px));
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0 10px;
|
|
color: #ffffff;
|
|
|
|
.alarm-info-count-box {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
|
|
.alarm-info-count-item {
|
|
width: 183px;
|
|
height: 120px;
|
|
background-color: #00feff;
|
|
text-align: center;
|
|
font-size: 22px;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.data-item {
|
|
width: 100%;
|
|
background-color: rgba(42, 60, 87, 0.5);
|
|
padding: 10px;
|
|
display: flex;
|
|
border-radius: 5px;
|
|
flex-direction: column;
|
|
margin-bottom: 20px;
|
|
|
|
/* Frame 4799 */
|
|
|
|
background: linear-gradient(
|
|
180deg,
|
|
rgba(0, 125, 165, 0.24) 0%,
|
|
rgba(1, 10, 43, 0) 100%
|
|
);
|
|
border-radius: 4px;
|
|
|
|
.data-head {
|
|
width: 100%;
|
|
height: 22px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.head-text {
|
|
flex: 1;
|
|
height: 22px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.position {
|
|
font-family: "PingFang SC";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
line-height: 22px;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.date {
|
|
font-family: "PingFang SC";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
/* identical to box height */
|
|
text-align: right;
|
|
text-transform: uppercase;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
.data-info {
|
|
width: 100%;
|
|
height: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.info-t1,
|
|
.info-t2 {
|
|
margin-top: 5px;
|
|
font-family: "PingFang SC";
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
line-height: 20px;
|
|
text-transform: uppercase;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
|
|
/deep/ .el-slider__marks-text {
|
|
color: #ffffff !important;
|
|
}
|
|
</style>
|
|
|