Commit f73a8015 authored by 张牧越's avatar 张牧越

styleFix

parent 5d02e756
NODE_ENV = "development"
Mock: true
VUE_APP_API_URL = "https://yth.vnet1000.net/"
VUE_APP_API_URL = "http://qjwl.ythplan.com"
......@@ -73,12 +73,6 @@
</div>
</div>
<div class="warning-table">
<div class="warning-table-header">
<div class="warning-table-time">报警时间</div>
<div class="warning-table-device">设备</div>
<div class="warning-table-message">报警信息</div>
<div class="warning-table-status">处理状态</div>
</div>
<div
class="warning-table-list"
v-infinite-scroll="load"
......@@ -93,23 +87,42 @@
:key="index"
@click="showWarning(column._id)"
>
<div class="warning-table-time">{{ column.log_time }}</div>
<div class="warning-table-device">{{ column.device_no }}</div>
<div class="warning-title">
<div class="warning-name">
<div
class="warning-dot"
:style="{
backgroundColor:
column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
}"
></div>
<span class="warning-device">{{ column.device_no }}</span> /
<span
:style="{
color: column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
}"
>{{ column.alarm_level_text }}</span
>
</div>
<div
class="warning-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }"
>
{{ column.status_text }}
</div>
</div>
<div class="warning-content">
<el-tooltip
class="item"
effect="dark"
:content="column.alarm_content"
placement="top"
>
<div class="warning-table-message">
{{ column.alarm_content }}
<div class="warning-message">
预警信息:{{ column.alarm_content }}
</div>
</el-tooltip>
<div
class="warning-table-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '' }"
>
{{ column.status_text }}
<div class="warning-time">{{ column.log_time }}</div>
</div>
</div>
</div>
......@@ -608,41 +621,45 @@ export default {
color: #c6def9;
height: calc(100% - 132px);
.warning-table-list {
height: calc(100% - 50px);
height: 100%;
overflow-y: auto;
}
.warning-table-header {
background: rgba(44, 96, 162, 0.2);
display: flex;
padding: 12px 0;
font-weight: bold;
}
.warning-table-column {
padding: 12px 0;
background: rgba(44, 96, 162, 0.05);
display: flex;
margin-bottom: 10px;
cursor: pointer;
&:nth-child(2n) {
background: rgba(44, 96, 162, 0.1);
}
&:hover {
background: rgba(44, 96, 162, 0.5);
}
}
.warning-table-time {
width: 25%;
.warning-title,
.warning-content {
display: flex;
justify-content: space-between;
line-height: 40px;
padding: 0 20px;
}
.warning-table-device,
.warning-table-status {
width: 20%;
.warning-title {
background: rgba(44, 96, 162, 0.3);
border-bottom: 1px solid rgba(122, 143, 173, 0.4);
}
.warning-table-message {
width: 35%;
.warning-content {
background: rgba(44, 96, 162, 0.1);
}
.warning-table-message {
.warning-message {
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
width: 50%;
overflow: hidden;
white-space: nowrap;
}
.warning-dot {
border-style: double;
border-width: 4px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
display: inline-block;
vertical-align: middle;
margin-right: 12px;
border-color: #153a68;
}
}
}
#elevator-detail {
......
......@@ -118,12 +118,6 @@
</div>
</div>
<div class="warning-table">
<div class="warning-table-header">
<div class="warning-table-run-time">运行时间</div>
<div class="warning-table-device">设备</div>
<div class="warning-table-info">告警信息</div>
<div class="warning-table-status">处理状态</div>
</div>
<div
class="warning-table-list"
v-infinite-scroll="load"
......@@ -138,30 +132,42 @@
:key="index"
@click="showWarning(column._id)"
>
<div class="warning-table-run-time">{{ column.log_time }}</div>
<el-tooltip
class="item"
effect="dark"
:content="column.device_no"
placement="top"
<div class="warning-title">
<div class="warning-name">
<div
class="warning-dot"
:style="{
backgroundColor:
column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
}"
></div>
<span class="warning-device">{{ column.device_no }}</span> /
<span
:style="{
color: column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
}"
>{{ column.alarm_level_text }}</span
>
<div class="warning-table-device">{{ column.device_no }}</div>
</el-tooltip>
</div>
<div
class="warning-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }"
>
{{ column.status_text }}
</div>
</div>
<div class="warning-content">
<el-tooltip
class="item"
effect="dark"
:content="column.alarm_content"
placement="top"
>
<div class="warning-table-info">
{{ column.alarm_content }}
<div class="warning-message">
预警信息:{{ column.alarm_content }}
</div>
</el-tooltip>
<div
class="warning-table-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }"
>
{{ column.status_text }}
<div class="warning-time">{{ column.log_time }}</div>
</div>
</div>
</div>
......@@ -634,45 +640,46 @@ export default {
color: #c6def9;
height: calc(100% - 132px);
.warning-table-list {
height: calc(100% - 50px);
height: 100%;
overflow-y: auto;
}
.warning-table-header {
background: rgba(44, 96, 162, 0.2);
display: flex;
padding: 12px 0;
font-weight: bold;
}
.warning-table-column {
padding: 12px 0;
background: rgba(44, 96, 162, 0.05);
display: flex;
margin-bottom: 10px;
cursor: pointer;
&:nth-child(2n) {
background: rgba(44, 96, 162, 0.1);
}
&:hover {
background: rgba(44, 96, 162, 0.5);
.warning-title,
.warning-content {
display: flex;
justify-content: space-between;
line-height: 40px;
padding: 0 20px;
}
.warning-title {
background: rgba(44, 96, 162, 0.3);
border-bottom: 1px solid rgba(122, 143, 173, 0.4);
}
.warning-table-run-time {
width: 25%;
white-space: pre-wrap;
.warning-content {
background: rgba(44, 96, 162, 0.1);
}
.warning-table-device {
width: 20%;
text-overflow: ellipsis;
overflow: hidden;
.warning-message {
text-align: left;
white-space: nowrap;
}
.warning-table-info {
width: 35%;
text-overflow: ellipsis;
width: 50%;
overflow: hidden;
white-space: nowrap;
}
.warning-table-status {
width: 20%;
.warning-dot {
border-style: double;
border-width: 4px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
display: inline-block;
vertical-align: middle;
margin-right: 12px;
border-color: #153a68;
}
}
}
.warning-scroll {
......
......@@ -226,12 +226,6 @@
<Title text="报警信息"></Title>
<ShadowContainer class="long-container">
<div class="warning-table">
<div class="warning-table-header">
<div class="warning-table-time">报警时间</div>
<div class="warning-table-device">设备</div>
<div class="warning-table-message">报警信息</div>
<div class="warning-table-status">处理状态</div>
</div>
<div
class="warning-table-list"
v-infinite-scroll="load"
......@@ -246,24 +240,42 @@
:key="index"
@click="showWarning(column._id)"
>
<div class="warning-table-time">{{ column.log_time }}</div>
<div class="warning-table-device">{{ column.device_no }}</div>
<div class="warning-title">
<div class="warning-name">
<div
class="warning-dot"
:style="{
backgroundColor:
column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
}"
></div>
<span class="warning-device">{{ column.device_no }}</span> /
<span
:style="{
color: column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
}"
>{{ column.alarm_level_text }}</span
>
</div>
<div
class="warning-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }"
>
{{ column.status_text }}
</div>
</div>
<div class="warning-content">
<el-tooltip
class="item"
effect="dark"
:content="column.alarm_content"
placement="top"
>
<div class="warning-table-message">
{{ column.alarm_content }}
<div class="warning-message">
预警信息:{{ column.alarm_content }}
</div>
</el-tooltip>
<div
class="warning-table-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '' }"
>
{{ column.status_text }}
<div class="warning-time">{{ column.log_time }}</div>
</div>
</div>
</div>
......@@ -313,6 +325,7 @@ export default {
interval1: null,
warningData: {},
warningDialogVisible: false,
warning_line: 0,
};
},
computed: {},
......@@ -475,6 +488,7 @@ export default {
},
},
},
series: [
{
data: yAxisData,
......@@ -492,6 +506,19 @@ export default {
},
]),
},
markLine: {
symbol: "none",
data: [
{
silent: false,
lineStyle: {
type: "dashed",
color: "#FF6E79",
},
yAxis: this.warning_line,
},
],
},
},
],
};
......@@ -524,7 +551,8 @@ export default {
});
getTodayAqiLineChartData().then((res) => {
this.totalData = res.data;
this.aqiLineChartData = res.data.pm25_data;
this.warning_line = res.data.pm25_data.alarm_value;
this.aqiLineChartData = res.data.pm25_data.value_data;
this.$nextTick(() => {
this.renderAQIChart();
});
......@@ -547,7 +575,8 @@ export default {
changeType(type) {
this.activeType = type;
this.lineChart.dispose();
this.aqiLineChartData = this.totalData[`${type}`];
this.warning_line = this.totalData[`${type}`].alarm_value;
this.aqiLineChartData = this.totalData[`${type}`].value_data;
this.$nextTick(() => {
this.renderAQIChart();
});
......@@ -864,7 +893,7 @@ export default {
color: #c6def9;
height: 100%;
.warning-table-list {
height: calc(100% - 50px);
height: 100%;
overflow-y: auto;
}
.warning-table-header {
......@@ -874,31 +903,41 @@ export default {
font-weight: bold;
}
.warning-table-column {
padding: 12px 0;
background: rgba(44, 96, 162, 0.05);
display: flex;
margin-bottom: 10px;
cursor: pointer;
&:nth-child(2n) {
background: rgba(44, 96, 162, 0.1);
.warning-title,
.warning-content {
display: flex;
justify-content: space-between;
line-height: 40px;
padding: 0 20px;
}
&:hover {
background: rgba(44, 96, 162, 0.5);
.warning-title {
background: rgba(44, 96, 162, 0.3);
border-bottom: 1px solid rgba(122, 143, 173, 0.4);
}
.warning-content {
background: rgba(44, 96, 162, 0.1);
}
.warning-table-message {
.warning-message {
text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
width: 50%;
overflow: hidden;
white-space: nowrap;
}
}
.warning-table-time {
width: 25%;
}
.warning-table-device,
.warning-table-status {
width: 20%;
.warning-dot {
border-style: double;
border-width: 4px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
display: inline-block;
vertical-align: middle;
margin-right: 12px;
border-color: #153a68;
}
.warning-table-message {
width: 35%;
}
}
#stats-container {
......@@ -998,7 +1037,13 @@ export default {
rgba(9, 37, 71, 0) 100%
);
&.active {
color: #16c0ff;
background: linear-gradient(
90deg,
rgba(39, 172, 251, 0) 0%,
rgba(39, 172, 251, 0.69) 50%,
rgba(39, 172, 251, 0) 100%
);
color: #fff;
}
}
}
......
......@@ -93,7 +93,7 @@ export default {
activeIndex: null,
liveVisible: false,
singlePlayer: null,
activeSplice: 9,
activeSplice: 4,
videoURLArray: [],
};
},
......@@ -181,6 +181,7 @@ export default {
};
this.$forceUpdate();
getVideoLiveAddressUrl(data.id).then((res) => {
if (res.data.live_address_url) {
this.$nextTick(() => {
const myVideoDiv = document.getElementById(
`video-container-${nullIndex + 1}`
......@@ -203,17 +204,21 @@ export default {
singlePlayer.play();
this.cameraList[nullIndex].player = singlePlayer;
});
}
});
} else {
if (this.cameraList.length == this.activeSplice) {
return this.$message.warning("请先关闭多余的监控!");
}
this.$forceUpdate();
getVideoLiveAddressUrl(data.id).then((res) => {
if (res.data.live_address_url) {
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}`
......@@ -237,8 +242,10 @@ export default {
type: "application/x-mpegURL",
});
singlePlayer.play();
this.cameraList[this.cameraList.length - 1].player = singlePlayer;
this.cameraList[this.cameraList.length - 1].player =
singlePlayer;
});
}
});
}
}
......@@ -277,11 +284,12 @@ export default {
.flat();
allVideoIdArray = allVideoIdArray.slice(0, this.activeSplice);
allVideoIdArray.map((id, index) => {
getVideoLiveAddressUrl(id).then((res) => {
if (res.data.live_address_url) {
this.cameraList.push({
player: undefined,
id: id,
});
getVideoLiveAddressUrl(id).then((res) => {
this.$nextTick(() => {
const myVideoDiv = document.getElementById(
`video-container-${index + 1}`
......@@ -305,6 +313,7 @@ export default {
this.cameraList[index].player = singlePlayer;
});
}
});
});
},
......
......@@ -119,12 +119,6 @@
<Title text="报警信息"></Title>
<ShadowContainer class="long-container">
<div class="warning-table">
<div class="warning-table-header">
<div class="warning-table-run-time">运行时间</div>
<div class="warning-table-device">设备</div>
<div class="warning-table-info">报警信息</div>
<div class="warning-table-status">处理状态</div>
</div>
<div
class="warning-table-list"
v-infinite-scroll="load"
......@@ -139,30 +133,42 @@
:key="index"
@click="showWarning(column._id)"
>
<div class="warning-table-run-time">{{ column.log_time }}</div>
<el-tooltip
class="item"
effect="dark"
:content="column.device_no"
placement="top"
<div class="warning-title">
<div class="warning-name">
<div
class="warning-dot"
:style="{
backgroundColor:
column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
}"
></div>
<span class="warning-device">{{ column.device_no }}</span> /
<span
:style="{
color: column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
}"
>{{ column.alarm_level_text }}</span
>
<div class="warning-table-device">{{ column.device_no }}</div>
</el-tooltip>
</div>
<div
class="warning-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }"
>
{{ column.status_text }}
</div>
</div>
<div class="warning-content">
<el-tooltip
class="item"
effect="dark"
:content="column.alarm_content"
placement="top"
>
<div class="warning-table-info">
{{ column.alarm_content }}
<div class="warning-message">
预警信息:{{ column.alarm_content }}
</div>
</el-tooltip>
<div
class="warning-table-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }"
>
{{ column.status_text }}
<div class="warning-time">{{ column.log_time }}</div>
</div>
</div>
</div>
......@@ -960,45 +966,45 @@ export default {
color: #c6def9;
height: 100%;
.warning-table-list {
height: calc(100% - 50px);
height: 100%;
overflow-y: auto;
}
.warning-table-header {
background: rgba(44, 96, 162, 0.2);
display: flex;
padding: 12px 0;
font-weight: bold;
}
.warning-table-column {
padding: 12px 0;
background: rgba(44, 96, 162, 0.05);
display: flex;
margin-bottom: 10px;
cursor: pointer;
&:nth-child(2n) {
background: rgba(44, 96, 162, 0.1);
}
&:hover {
background: rgba(44, 96, 162, 0.5);
.warning-title,
.warning-content {
display: flex;
justify-content: space-between;
line-height: 40px;
padding: 0 20px;
}
.warning-title {
background: rgba(44, 96, 162, 0.3);
border-bottom: 1px solid rgba(122, 143, 173, 0.4);
}
.warning-table-run-time {
width: 25%;
white-space: pre-wrap;
.warning-content {
background: rgba(44, 96, 162, 0.1);
}
.warning-table-device {
width: 20%;
text-overflow: ellipsis;
overflow: hidden;
.warning-message {
text-align: left;
white-space: nowrap;
}
.warning-table-info {
width: 35%;
text-overflow: ellipsis;
width: 50%;
overflow: hidden;
white-space: nowrap;
}
.warning-table-status {
width: 20%;
.warning-dot {
border-style: double;
border-width: 4px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
display: inline-block;
vertical-align: middle;
margin-right: 12px;
border-color: #153a68;
}
}
}
.short-container {
......
......@@ -110,12 +110,6 @@
</div>
</div>
<div class="warning-table">
<div class="warning-table-header">
<div class="warning-table-run-time">运行时间</div>
<div class="warning-table-device">设备</div>
<div class="warning-table-info">告警信息</div>
<div class="warning-table-status">处理状态</div>
</div>
<div
class="warning-table-list"
v-infinite-scroll="load"
......@@ -130,30 +124,42 @@
:key="index"
@click="showWarning(column._id)"
>
<div class="warning-table-run-time">{{ column.log_time }}</div>
<el-tooltip
class="item"
effect="dark"
:content="column.device_no"
placement="top"
<div class="warning-title">
<div class="warning-name">
<div
class="warning-dot"
:style="{
backgroundColor:
column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
}"
></div>
<span class="warning-device">{{ column.device_no }}</span> /
<span
:style="{
color: column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
}"
>{{ column.alarm_level_text }}</span
>
<div class="warning-table-device">{{ column.device_no }}</div>
</el-tooltip>
</div>
<div
class="warning-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }"
>
{{ column.status_text }}
</div>
</div>
<div class="warning-content">
<el-tooltip
class="item"
effect="dark"
:content="column.alarm_content"
placement="top"
>
<div class="warning-table-info">
{{ column.alarm_content }}
<div class="warning-message">
预警信息:{{ column.alarm_content }}
</div>
</el-tooltip>
<div
class="warning-table-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }"
>
{{ column.status_text }}
<div class="warning-time">{{ column.log_time }}</div>
</div>
</div>
</div>
......@@ -714,45 +720,45 @@ export default {
color: #c6def9;
height: calc(100% - 132px);
.warning-table-list {
height: calc(100% - 50px);
height: 100%;
overflow-y: auto;
}
.warning-table-header {
background: rgba(44, 96, 162, 0.2);
display: flex;
padding: 12px 0;
font-weight: bold;
}
.warning-table-column {
padding: 12px 0;
background: rgba(44, 96, 162, 0.05);
display: flex;
margin-bottom: 10px;
cursor: pointer;
&:nth-child(2n) {
background: rgba(44, 96, 162, 0.1);
}
&:hover {
background: rgba(44, 96, 162, 0.5);
.warning-title,
.warning-content {
display: flex;
justify-content: space-between;
line-height: 40px;
padding: 0 20px;
}
.warning-title {
background: rgba(44, 96, 162, 0.3);
border-bottom: 1px solid rgba(122, 143, 173, 0.4);
}
.warning-table-run-time {
width: 25%;
white-space: pre-wrap;
.warning-content {
background: rgba(44, 96, 162, 0.1);
}
.warning-table-device {
width: 20%;
text-overflow: ellipsis;
overflow: hidden;
.warning-message {
text-align: left;
white-space: nowrap;
}
.warning-table-info {
width: 35%;
text-overflow: ellipsis;
width: 50%;
overflow: hidden;
white-space: nowrap;
}
.warning-table-status {
width: 20%;
.warning-dot {
border-style: double;
border-width: 4px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
display: inline-block;
vertical-align: middle;
margin-right: 12px;
border-color: #153a68;
}
}
}
.warning-scroll {
......@@ -865,7 +871,13 @@ export default {
rgba(9, 37, 71, 0) 100%
);
&.active {
color: #16c0ff;
background: linear-gradient(
90deg,
rgba(39, 172, 251, 0) 0%,
rgba(39, 172, 251, 0.69) 50%,
rgba(39, 172, 251, 0) 100%
);
color: #fff;
}
}
}
......
......@@ -64,7 +64,7 @@ request.interceptors.response.use(
})
}
if (response.data.status == 401) {
window.location.href = window.location.origin + '/pweb/m/login?is_screen=1'
window.location.href = process.env.NODE_ENV == 'production' ? window.location.origin + '/pweb/m/login?is_screen=1' : process.env.VUE_APP_API_URL + '/pweb/m/login?is_screen=1'
}
return response.data
},
......
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