Skip to content

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

styleFix

parent 5d02e756
Hide whitespace changes
Inline Side-by-side
Showing with 442 additions and 346 deletions
.env.development
View file @ f73a8015
NODE_ENV = "development" NODE_ENV = "development"
Mock: true Mock: true
VUE_APP_API_URL = "https://yth.vnet1000.net/" VUE_APP_API_URL = "http://qjwl.ythplan.com"
src/components/elevator/Index.vue
View file @ f73a8015
...@@ -73,12 +73,6 @@ ...@@ -73,12 +73,6 @@
</div> </div>
</div> </div>
<div class="warning-table"> <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 <div
class="warning-table-list" class="warning-table-list"
v-infinite-scroll="load" v-infinite-scroll="load"
...@@ -93,23 +87,42 @@ ...@@ -93,23 +87,42 @@
:key="index" :key="index"
@click="showWarning(column._id)" @click="showWarning(column._id)"
> >
<div class="warning-table-time">{{ column.log_time }}</div> <div class="warning-title">
<div class="warning-table-device">{{ column.device_no }}</div> <div class="warning-name">
<el-tooltip <div
class="item" class="warning-dot"
effect="dark" :style="{
:content="column.alarm_content" backgroundColor:
placement="top" column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
> }"
<div class="warning-table-message"> ></div>
{{ column.alarm_content }} <span class="warning-device">{{ column.device_no }}</span> /
<span
:style="{
color: column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
}"
>{{ column.alarm_level_text }}</span
>
</div> </div>
</el-tooltip> <div
<div class="warning-status"
class="warning-table-status" :style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }"
:style="{ color: column.status == 1 ? '#FFC74C' : '' }" >
> {{ column.status_text }}
{{ column.status_text }} </div>
</div>
<div class="warning-content">
<el-tooltip
class="item"
effect="dark"
:content="column.alarm_content"
placement="top"
>
<div class="warning-message">
预警信息：{{ column.alarm_content }}
</div>
</el-tooltip>
<div class="warning-time">{{ column.log_time }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -608,41 +621,45 @@ export default { ...@@ -608,41 +621,45 @@ export default {
color: #c6def9; color: #c6def9;
height: calc(100% - 132px); height: calc(100% - 132px);
.warning-table-list { .warning-table-list {
height: calc(100% - 50px); height: 100%;
overflow-y: auto; overflow-y: auto;
} }
.warning-table-header {
background: rgba(44, 96, 162, 0.2);
display: flex;
padding: 12px 0;
font-weight: bold;
}
.warning-table-column { .warning-table-column {
padding: 12px 0; margin-bottom: 10px;
background: rgba(44, 96, 162, 0.05);
display: flex;
cursor: pointer; cursor: pointer;
&:nth-child(2n) { .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-content {
background: rgba(44, 96, 162, 0.1); background: rgba(44, 96, 162, 0.1);
} }
&:hover { .warning-message {
background: rgba(44, 96, 162, 0.5); text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
width: 50%;
overflow: hidden;
}
.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-time {
width: 25%;
}
.warning-table-device,
.warning-table-status {
width: 20%;
}
.warning-table-message {
width: 35%;
}
.warning-table-message {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} }
} }
#elevator-detail { #elevator-detail {
......
src/components/fallprotection/Index.vue
View file @ f73a8015
...@@ -118,12 +118,6 @@ ...@@ -118,12 +118,6 @@
</div> </div>
</div> </div>
<div class="warning-table"> <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 <div
class="warning-table-list" class="warning-table-list"
v-infinite-scroll="load" v-infinite-scroll="load"
...@@ -138,30 +132,42 @@ ...@@ -138,30 +132,42 @@
:key="index" :key="index"
@click="showWarning(column._id)" @click="showWarning(column._id)"
> >
<div class="warning-table-run-time">{{ column.log_time }}</div> <div class="warning-title">
<el-tooltip <div class="warning-name">
class="item" <div
effect="dark" class="warning-dot"
:content="column.device_no" :style="{
placement="top" backgroundColor:
> column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
<div class="warning-table-device">{{ column.device_no }}</div> }"
</el-tooltip> ></div>
<el-tooltip <span class="warning-device">{{ column.device_no }}</span> /
class="item" <span
effect="dark" :style="{
:content="column.alarm_content" color: column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
placement="top" }"
> >{{ column.alarm_level_text }}</span
<div class="warning-table-info"> >
{{ column.alarm_content }}
</div> </div>
</el-tooltip> <div
<div class="warning-status"
class="warning-table-status" :style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }"
:style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }" >
> {{ column.status_text }}
{{ column.status_text }} </div>
</div>
<div class="warning-content">
<el-tooltip
class="item"
effect="dark"
:content="column.alarm_content"
placement="top"
>
<div class="warning-message">
预警信息：{{ column.alarm_content }}
</div>
</el-tooltip>
<div class="warning-time">{{ column.log_time }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -634,45 +640,46 @@ export default { ...@@ -634,45 +640,46 @@ export default {
color: #c6def9; color: #c6def9;
height: calc(100% - 132px); height: calc(100% - 132px);
.warning-table-list { .warning-table-list {
height: calc(100% - 50px); height: 100%;
overflow-y: auto; overflow-y: auto;
} }
.warning-table-header {
background: rgba(44, 96, 162, 0.2);
display: flex;
padding: 12px 0;
font-weight: bold;
}
.warning-table-column { .warning-table-column {
padding: 12px 0; margin-bottom: 10px;
background: rgba(44, 96, 162, 0.05);
display: flex;
cursor: pointer; cursor: pointer;
&:nth-child(2n) { .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-content {
background: rgba(44, 96, 162, 0.1); background: rgba(44, 96, 162, 0.1);
} }
&:hover { .warning-message {
background: rgba(44, 96, 162, 0.5); text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
width: 50%;
overflow: hidden;
}
.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-run-time {
width: 25%;
white-space: pre-wrap;
}
.warning-table-device {
width: 20%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.warning-table-info {
width: 35%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.warning-table-status {
width: 20%;
} }
} }
.warning-scroll { .warning-scroll {
......
src/components/noise/Index.vue
View file @ f73a8015
...@@ -226,12 +226,6 @@ ...@@ -226,12 +226,6 @@
<Title text="报警信息"></Title> <Title text="报警信息"></Title>
<ShadowContainer class="long-container"> <ShadowContainer class="long-container">
<div class="warning-table"> <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 <div
class="warning-table-list" class="warning-table-list"
v-infinite-scroll="load" v-infinite-scroll="load"
...@@ -246,24 +240,42 @@ ...@@ -246,24 +240,42 @@
:key="index" :key="index"
@click="showWarning(column._id)" @click="showWarning(column._id)"
> >
<div class="warning-table-time">{{ column.log_time }}</div> <div class="warning-title">
<div class="warning-table-device">{{ column.device_no }}</div> <div class="warning-name">
<div
<el-tooltip class="warning-dot"
class="item" :style="{
effect="dark" backgroundColor:
:content="column.alarm_content" column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
placement="top" }"
> ></div>
<div class="warning-table-message"> <span class="warning-device">{{ column.device_no }}</span> /
{{ column.alarm_content }} <span
:style="{
color: column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
}"
>{{ column.alarm_level_text }}</span
>
</div> </div>
</el-tooltip> <div
<div class="warning-status"
class="warning-table-status" :style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }"
:style="{ color: column.status == 1 ? '#FFC74C' : '' }" >
> {{ column.status_text }}
{{ column.status_text }} </div>
</div>
<div class="warning-content">
<el-tooltip
class="item"
effect="dark"
:content="column.alarm_content"
placement="top"
>
<div class="warning-message">
预警信息：{{ column.alarm_content }}
</div>
</el-tooltip>
<div class="warning-time">{{ column.log_time }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -313,6 +325,7 @@ export default { ...@@ -313,6 +325,7 @@ export default {
interval1: null, interval1: null,
warningData: {}, warningData: {},
warningDialogVisible: false, warningDialogVisible: false,
warning_line: 0,
}; };
}, },
computed: {}, computed: {},
...@@ -475,6 +488,7 @@ export default { ...@@ -475,6 +488,7 @@ export default {
}, },
}, },
}, },
series: [ series: [
{ {
data: yAxisData, data: yAxisData,
...@@ -492,6 +506,19 @@ export default { ...@@ -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 { ...@@ -524,7 +551,8 @@ export default {
}); });
getTodayAqiLineChartData().then((res) => { getTodayAqiLineChartData().then((res) => {
this.totalData = res.data; 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.$nextTick(() => {
this.renderAQIChart(); this.renderAQIChart();
}); });
...@@ -547,7 +575,8 @@ export default { ...@@ -547,7 +575,8 @@ export default {
changeType(type) { changeType(type) {
this.activeType = type; this.activeType = type;
this.lineChart.dispose(); 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.$nextTick(() => {
this.renderAQIChart(); this.renderAQIChart();
}); });
...@@ -864,7 +893,7 @@ export default { ...@@ -864,7 +893,7 @@ export default {
color: #c6def9; color: #c6def9;
height: 100%; height: 100%;
.warning-table-list { .warning-table-list {
height: calc(100% - 50px); height: 100%;
overflow-y: auto; overflow-y: auto;
} }
.warning-table-header { .warning-table-header {
...@@ -874,31 +903,41 @@ export default { ...@@ -874,31 +903,41 @@ export default {
font-weight: bold; font-weight: bold;
} }
.warning-table-column { .warning-table-column {
padding: 12px 0; margin-bottom: 10px;
background: rgba(44, 96, 162, 0.05);
display: flex;
cursor: pointer; cursor: pointer;
&:nth-child(2n) { .warning-title,
background: rgba(44, 96, 162, 0.1); .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);
} }
&:hover { .warning-content {
background: rgba(44, 96, 162, 0.5); background: rgba(44, 96, 162, 0.1);
} }
.warning-table-message { .warning-message {
text-align: left;
white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 50%;
overflow: hidden; overflow: hidden;
white-space: nowrap;
} }
} .warning-dot {
.warning-table-time { border-style: double;
width: 25%; border-width: 4px;
} width: 10px;
.warning-table-device, height: 10px;
.warning-table-status { border-radius: 50%;
width: 20%; background: #fff;
} display: inline-block;
.warning-table-message { vertical-align: middle;
width: 35%; margin-right: 12px;
border-color: #153a68;
}
} }
} }
#stats-container { #stats-container {
...@@ -998,7 +1037,13 @@ export default { ...@@ -998,7 +1037,13 @@ export default {
rgba(9, 37, 71, 0) 100% rgba(9, 37, 71, 0) 100%
); );
&.active { &.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;
} }
} }
} }
......
src/components/supervisory/Index.vue
View file @ f73a8015
...@@ -93,7 +93,7 @@ export default { ...@@ -93,7 +93,7 @@ export default {
activeIndex: null, activeIndex: null,
liveVisible: false, liveVisible: false,
singlePlayer: null, singlePlayer: null,
activeSplice: 9, activeSplice: 4,
videoURLArray: [], videoURLArray: [],
}; };
}, },
...@@ -181,64 +181,71 @@ export default { ...@@ -181,64 +181,71 @@ export default {
}; };
this.$forceUpdate(); this.$forceUpdate();
getVideoLiveAddressUrl(data.id).then((res) => { getVideoLiveAddressUrl(data.id).then((res) => {
this.$nextTick(() => { if (res.data.live_address_url) {
const myVideoDiv = document.getElementById( this.$nextTick(() => {
`video-container-${nullIndex + 1}` const myVideoDiv = document.getElementById(
); `video-container-${nullIndex + 1}`
myVideoDiv.innerHTML = `<video );
myVideoDiv.innerHTML = `<video
id="singleVideo${nullIndex + 1}" id="singleVideo${nullIndex + 1}"
autoplay="autoplay" autoplay="autoplay"
class="video-js vjs-default-skin" class="video-js vjs-default-skin"
></video>`; ></video>`;
const singlePlayer = videojs(`singleVideo${nullIndex + 1}`, { const singlePlayer = videojs(`singleVideo${nullIndex + 1}`, {
autoplay: true, // 自动播放 autoplay: true, // 自动播放
controls: true, // 控件显示 controls: true, // 控件显示
preload: "auto", //定义视频加载模式 preload: "auto", //定义视频加载模式
loop: true, //是否循环播放 loop: true, //是否循环播放
}); });
singlePlayer.src({ singlePlayer.src({
src: res.data.live_address_url, src: res.data.live_address_url,
type: "application/x-mpegURL", type: "application/x-mpegURL",
});
singlePlayer.play();
this.cameraList[nullIndex].player = singlePlayer;
}); });
singlePlayer.play(); }
this.cameraList[nullIndex].player = singlePlayer;
});
}); });
} else { } else {
if (this.cameraList.length == this.activeSplice) { if (this.cameraList.length == this.activeSplice) {
return this.$message.warning("请先关闭多余的监控!"); return this.$message.warning("请先关闭多余的监控!");
} }
this.cameraList.push({
player: undefined,
id: data.id,
});
this.$forceUpdate(); this.$forceUpdate();
getVideoLiveAddressUrl(data.id).then((res) => { getVideoLiveAddressUrl(data.id).then((res) => {
this.$nextTick(() => { if (res.data.live_address_url) {
const myVideoDiv = document.getElementById( this.cameraList.push({
`video-container-${this.cameraList.length}` player: undefined,
); id: data.id,
myVideoDiv.innerHTML = `<video });
this.$nextTick(() => {
const myVideoDiv = document.getElementById(
`video-container-${this.cameraList.length}`
);
myVideoDiv.innerHTML = `<video
id="singleVideo${this.cameraList.length}" id="singleVideo${this.cameraList.length}"
autoplay="autoplay" autoplay="autoplay"
class="video-js vjs-default-skin" class="video-js vjs-default-skin"
></video>`; ></video>`;
const singlePlayer = videojs( const singlePlayer = videojs(
`singleVideo${this.cameraList.length}`, `singleVideo${this.cameraList.length}`,
{ {
autoplay: true, // 自动播放 autoplay: true, // 自动播放
controls: true, // 控件显示 controls: true, // 控件显示
preload: "auto", //定义视频加载模式 preload: "auto", //定义视频加载模式
loop: true, //是否循环播放 loop: true, //是否循环播放
} }
); );
singlePlayer.src({ singlePlayer.src({
src: res.data.live_address_url, src: res.data.live_address_url,
type: "application/x-mpegURL", type: "application/x-mpegURL",
});
singlePlayer.play();
this.cameraList[this.cameraList.length - 1].player =
singlePlayer;
}); });
singlePlayer.play(); }
this.cameraList[this.cameraList.length - 1].player = singlePlayer;
});
}); });
} }
} }
...@@ -277,34 +284,36 @@ export default { ...@@ -277,34 +284,36 @@ export default {
.flat(); .flat();
allVideoIdArray = allVideoIdArray.slice(0, this.activeSplice); allVideoIdArray = allVideoIdArray.slice(0, this.activeSplice);
allVideoIdArray.map((id, index) => { allVideoIdArray.map((id, index) => {
this.cameraList.push({
player: undefined,
id: id,
});
getVideoLiveAddressUrl(id).then((res) => { getVideoLiveAddressUrl(id).then((res) => {
this.$nextTick(() => { if (res.data.live_address_url) {
const myVideoDiv = document.getElementById( this.cameraList.push({
`video-container-${index + 1}` player: undefined,
); id: id,
myVideoDiv.innerHTML = `<video });
this.$nextTick(() => {
const myVideoDiv = document.getElementById(
`video-container-${index + 1}`
);
myVideoDiv.innerHTML = `<video
id="singleVideo${index + 1}" id="singleVideo${index + 1}"
autoplay="autoplay" autoplay="autoplay"
class="video-js vjs-default-skin" class="video-js vjs-default-skin"
></video>`; ></video>`;
const singlePlayer = videojs(`singleVideo${index + 1}`, { const singlePlayer = videojs(`singleVideo${index + 1}`, {
autoplay: true, // 自动播放 autoplay: true, // 自动播放
controls: true, // 控件显示 controls: true, // 控件显示
preload: "auto", //定义视频加载模式 preload: "auto", //定义视频加载模式
loop: true, //是否循环播放 loop: true, //是否循环播放
}); });
singlePlayer.src({ singlePlayer.src({
src: res.data.live_address_url, src: res.data.live_address_url,
type: "application/x-mpegURL", type: "application/x-mpegURL",
}); });
singlePlayer.play(); singlePlayer.play();
this.cameraList[index].player = singlePlayer; this.cameraList[index].player = singlePlayer;
}); });
}
}); });
}); });
}, },
......
src/components/tower/Index.vue
View file @ f73a8015
...@@ -119,12 +119,6 @@ ...@@ -119,12 +119,6 @@
<Title text="报警信息"></Title> <Title text="报警信息"></Title>
<ShadowContainer class="long-container"> <ShadowContainer class="long-container">
<div class="warning-table"> <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 <div
class="warning-table-list" class="warning-table-list"
v-infinite-scroll="load" v-infinite-scroll="load"
...@@ -139,30 +133,42 @@ ...@@ -139,30 +133,42 @@
:key="index" :key="index"
@click="showWarning(column._id)" @click="showWarning(column._id)"
> >
<div class="warning-table-run-time">{{ column.log_time }}</div> <div class="warning-title">
<el-tooltip <div class="warning-name">
class="item" <div
effect="dark" class="warning-dot"
:content="column.device_no" :style="{
placement="top" backgroundColor:
> column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
<div class="warning-table-device">{{ column.device_no }}</div> }"
</el-tooltip> ></div>
<el-tooltip <span class="warning-device">{{ column.device_no }}</span> /
class="item" <span
effect="dark" :style="{
:content="column.alarm_content" color: column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
placement="top" }"
> >{{ column.alarm_level_text }}</span
<div class="warning-table-info"> >
{{ column.alarm_content }} </div>
<div
class="warning-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }"
>
{{ column.status_text }}
</div> </div>
</el-tooltip> </div>
<div <div class="warning-content">
class="warning-table-status" <el-tooltip
:style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }" class="item"
> effect="dark"
{{ column.status_text }} :content="column.alarm_content"
placement="top"
>
<div class="warning-message">
预警信息：{{ column.alarm_content }}
</div>
</el-tooltip>
<div class="warning-time">{{ column.log_time }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -960,45 +966,45 @@ export default { ...@@ -960,45 +966,45 @@ export default {
color: #c6def9; color: #c6def9;
height: 100%; height: 100%;
.warning-table-list { .warning-table-list {
height: calc(100% - 50px); height: 100%;
overflow-y: auto; overflow-y: auto;
} }
.warning-table-header {
background: rgba(44, 96, 162, 0.2);
display: flex;
padding: 12px 0;
font-weight: bold;
}
.warning-table-column { .warning-table-column {
padding: 12px 0; margin-bottom: 10px;
background: rgba(44, 96, 162, 0.05);
display: flex;
cursor: pointer; cursor: pointer;
&:nth-child(2n) { .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-content {
background: rgba(44, 96, 162, 0.1); background: rgba(44, 96, 162, 0.1);
} }
&:hover { .warning-message {
background: rgba(44, 96, 162, 0.5); text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
width: 50%;
overflow: hidden;
}
.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-run-time {
width: 25%;
white-space: pre-wrap;
}
.warning-table-device {
width: 20%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.warning-table-info {
width: 35%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.warning-table-status {
width: 20%;
} }
} }
.short-container { .short-container {
......
src/components/unloadingplatform/Index.vue
View file @ f73a8015
...@@ -110,12 +110,6 @@ ...@@ -110,12 +110,6 @@
</div> </div>
</div> </div>
<div class="warning-table"> <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 <div
class="warning-table-list" class="warning-table-list"
v-infinite-scroll="load" v-infinite-scroll="load"
...@@ -130,30 +124,42 @@ ...@@ -130,30 +124,42 @@
:key="index" :key="index"
@click="showWarning(column._id)" @click="showWarning(column._id)"
> >
<div class="warning-table-run-time">{{ column.log_time }}</div> <div class="warning-title">
<el-tooltip <div class="warning-name">
class="item" <div
effect="dark" class="warning-dot"
:content="column.device_no" :style="{
placement="top" backgroundColor:
> column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
<div class="warning-table-device">{{ column.device_no }}</div> }"
</el-tooltip> ></div>
<el-tooltip <span class="warning-device">{{ column.device_no }}</span> /
class="item" <span
effect="dark" :style="{
:content="column.alarm_content" color: column.alarm_level == 1 ? '#FFC74C' : '#FF4C4C',
placement="top" }"
> >{{ column.alarm_level_text }}</span
<div class="warning-table-info"> >
{{ column.alarm_content }} </div>
<div
class="warning-status"
:style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }"
>
{{ column.status_text }}
</div> </div>
</el-tooltip> </div>
<div <div class="warning-content">
class="warning-table-status" <el-tooltip
:style="{ color: column.status == 1 ? '#FFC74C' : '#22C3ED' }" class="item"
> effect="dark"
{{ column.status_text }} :content="column.alarm_content"
placement="top"
>
<div class="warning-message">
预警信息：{{ column.alarm_content }}
</div>
</el-tooltip>
<div class="warning-time">{{ column.log_time }}</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -714,45 +720,45 @@ export default { ...@@ -714,45 +720,45 @@ export default {
color: #c6def9; color: #c6def9;
height: calc(100% - 132px); height: calc(100% - 132px);
.warning-table-list { .warning-table-list {
height: calc(100% - 50px); height: 100%;
overflow-y: auto; overflow-y: auto;
} }
.warning-table-header {
background: rgba(44, 96, 162, 0.2);
display: flex;
padding: 12px 0;
font-weight: bold;
}
.warning-table-column { .warning-table-column {
padding: 12px 0; margin-bottom: 10px;
background: rgba(44, 96, 162, 0.05);
display: flex;
cursor: pointer; cursor: pointer;
&:nth-child(2n) { .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-content {
background: rgba(44, 96, 162, 0.1); background: rgba(44, 96, 162, 0.1);
} }
&:hover { .warning-message {
background: rgba(44, 96, 162, 0.5); text-align: left;
white-space: nowrap;
text-overflow: ellipsis;
width: 50%;
overflow: hidden;
}
.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-run-time {
width: 25%;
white-space: pre-wrap;
}
.warning-table-device {
width: 20%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.warning-table-info {
width: 35%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.warning-table-status {
width: 20%;
} }
} }
.warning-scroll { .warning-scroll {
...@@ -865,7 +871,13 @@ export default { ...@@ -865,7 +871,13 @@ export default {
rgba(9, 37, 71, 0) 100% rgba(9, 37, 71, 0) 100%
); );
&.active { &.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;
} }
} }
} }
......
src/utils/request.js
View file @ f73a8015
...@@ -64,7 +64,7 @@ request.interceptors.response.use( ...@@ -64,7 +64,7 @@ request.interceptors.response.use(
}) })
} }
if (response.data.status == 401) { 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 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