flx:修改视频监控问题

This commit is contained in:
Rain_ 2025-12-06 10:09:13 +08:00
parent 2a11a72faa
commit 1c2aca748c
4 changed files with 131 additions and 10 deletions

View File

@ -189,7 +189,8 @@ body:has(.zindex-1) .v-modal {
color: #F56C6C;
border-color: #F56C6C;
}
.delete_btn:hover {
.delete_btn:hover,
.delete_btn:focus {
color: #F56C6C !important;
}
.border-radius_3 {

View File

@ -245,7 +245,8 @@ body:has(.zindex-1) .v-modal {
color: #F56C6C;
border-color: #F56C6C;
}
.delete_btn:hover {
.delete_btn:hover,
.delete_btn:focus {
color: #F56C6C !important;
}
.border-radius_3 {

View File

@ -1002,7 +1002,7 @@ const equipmentDetail = ref({});
//
const onEquipmentClick = (row) => {
equipmentDetail.value = row;
getWorkTicketQueryById();
getWorkTicketQueryById(equipmentDetail.value.workTicketId);
equipmentDialog.value = true;
};
@ -1046,7 +1046,7 @@ const timeInterval = ref(null);
const onViewDetail = (row, flag) => {
if (row.id == workTicketDetail.value.id && flag != true) return;
workTicketDetail.value = row;
getWorkTicketQueryById();
getWorkTicketQueryById(workTicketDetail.value.id);
getWorkTicketHistoryList();
initPoliceCameraItemList();
if (timeInterval.value) {
@ -1057,9 +1057,9 @@ const onViewDetail = (row, flag) => {
}, 1000 * 60 * 30);
};
// id
const getWorkTicketQueryById = () => {
const getWorkTicketQueryById = (id) => {
getWorkTicketQueryByIdApi({
id: equipmentDetail.value.workTicketId,
id: id,
// projectSn: workTicketInfo.projectSn,
}).then((res) => {
if (res.code == 200) {

View File

@ -1186,20 +1186,25 @@ const projectSnName = computed(() => {
/deep/ .pagerBox1 {
color: white;
text-align: center;
.el-pagination__total {
color: white;
}
.el-pager li {
background-color: transparent;
}
.el-pager li.active {
background-color: #262d47;
color: white;
}
> button {
background-color: transparent;
}
}
.headerNoise {
width: calc(100% - 20px - 40px);
height: calc(100% - 132px - 10px - 30px);
@ -1210,19 +1215,23 @@ const projectSnName = computed(() => {
background-image: url("~@/assets/images/companyBigScreen/terminalOperation/index-bg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
.el-cascader,
/deep/ .el-input__icon {
line-height: 23px;
}
/deep/ .el-input__inner {
height: 23px;
line-height: 23px;
background-color: transparent;
color: white;
}
.headerNoise-left {
width: 22%;
height: 100%;
.content-header {
position: absolute;
top: 8px;
@ -1267,6 +1276,7 @@ const projectSnName = computed(() => {
right: 10px;
bottom: 10px;
}
.wks_active {
background-color: #727e93;
}
@ -1340,19 +1350,23 @@ const projectSnName = computed(() => {
//
/* 滚动条整体样式 */
.box-main::-webkit-scrollbar {
width: 7px; /* 滚动条宽度 */
width: 7px;
/* 滚动条宽度 */
}
/* 滚动条轨道 */
.box-main::-webkit-scrollbar-track {
background: transparent; /* 轨道背景色 */
background: transparent;
/* 轨道背景色 */
}
/* 滚动条滑块 */
.box-main::-webkit-scrollbar-thumb {
background: #4e5b71; /* 滑块背景色 */
background: #4e5b71;
/* 滑块背景色 */
width: 10px;
border-radius: 5px; /* 滑块圆角 */
border-radius: 5px;
/* 滑块圆角 */
}
.box-search {
@ -1378,14 +1392,17 @@ const projectSnName = computed(() => {
:deep(.el-date-editor) {
width: 62%;
margin-top: 10px;
.el-range-input {
color: white;
background-color: transparent;
}
.el-range-separator {
color: white;
line-height: 14px;
}
.el-range__icon {
line-height: 14px;
}
@ -1447,6 +1464,7 @@ const projectSnName = computed(() => {
> div:nth-child(1) {
width: 41%;
> div:last-child {
width: 38px;
height: 38px;
@ -1458,6 +1476,7 @@ const projectSnName = computed(() => {
> div:nth-child(2) {
width: 41%;
> div:last-child {
width: 38px;
height: 38px;
@ -1472,6 +1491,7 @@ const projectSnName = computed(() => {
> div:nth-child(5) {
margin-top: 20px;
width: 24%;
> div:last-child {
width: 30px;
height: 30px;
@ -1483,11 +1503,13 @@ const projectSnName = computed(() => {
no-repeat;
background-size: 100% 100%;
}
> div:nth-child(4) > div:last-child {
background: url("~@/assets/images/companyBigScreen/terminalOperation/index-icon4.png")
no-repeat;
background-size: 100% 100%;
}
> div:nth-child(5) > div:last-child {
background: url("~@/assets/images/companyBigScreen/terminalOperation/index-icon5.png")
no-repeat;
@ -1577,6 +1599,7 @@ const projectSnName = computed(() => {
right: 10px;
top: 10px;
cursor: pointer;
> div:last-child {
width: 26px;
height: 26px;
@ -1584,12 +1607,15 @@ const projectSnName = computed(() => {
background-repeat: no-repeat;
background-size: 100% 100%;
}
.goback {
background-image: url("~@/assets/images/companyBigScreen/terminalOperation/goback.png") !important;
}
> div:not(:first-child) {
margin-left: 10px;
}
> div:nth-child(2) {
font-weight: bold;
font-size: 15px;
@ -1602,6 +1628,7 @@ const projectSnName = computed(() => {
margin-top: 1%;
height: 94%;
display: flex;
.content-left_active {
width: 451px !important;
}
@ -1612,14 +1639,17 @@ const projectSnName = computed(() => {
background: url("~@/assets/images/companyBigScreen/terminalOperation/cardImg.png")
no-repeat;
background-size: 100% 100%;
.content-left_box1 {
padding: 10px 20px 20px;
// overflow: auto;
overflow: hidden;
height: calc(100% - 30px);
.scrollbar-height {
height: calc(100% - 30px) !important;
}
.box1 {
display: flex;
align-items: flex-start;
@ -1637,9 +1667,11 @@ const projectSnName = computed(() => {
width: 70px;
color: #a2a4af;
}
.content-file_list {
display: flex;
flex-direction: column;
> div {
display: flex;
align-items: center;
@ -1647,15 +1679,18 @@ const projectSnName = computed(() => {
height: 30px;
padding: 0 16px 0 20px;
background: rgba(39, 88, 192, 0.2);
> div:first-child {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
> div:last-child {
width: 170px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
> div:first-child {
width: 16px;
height: 16px;
@ -1664,10 +1699,12 @@ const projectSnName = computed(() => {
background-size: 100% 100%;
}
}
> div:last-child {
font-size: 14px;
color: #5181f6;
cursor: pointer;
> div:first-child {
width: 16px;
height: 16px;
@ -1676,30 +1713,37 @@ const projectSnName = computed(() => {
background-size: 100% 100%;
}
}
> div {
display: flex;
align-items: center;
> div:not(:first-child) {
margin-left: 6px;
}
}
}
}
.content-img {
display: flex;
flex-wrap: wrap;
> .el-image:nth-child(n + 4) {
margin-top: 20px;
}
> .el-image:not(:nth-child(3n + 1)) {
margin-left: 20px;
}
> .el-image {
width: 80px;
height: 80px;
border-radius: 4px;
}
}
.state-box {
padding: 4px 8px;
min-width: 40px;
@ -1709,16 +1753,19 @@ const projectSnName = computed(() => {
text-align: center;
flex: initial !important;
}
.gfx_active {
background-color: #ff0000;
color: #ffffff;
}
}
.box1-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0;
.shrink-box {
width: 20px;
height: 20px;
@ -1728,6 +1775,7 @@ const projectSnName = computed(() => {
cursor: pointer;
transform: rotate(180deg);
}
> div:first-child {
font-weight: 800;
font-size: 16px;
@ -1735,11 +1783,13 @@ const projectSnName = computed(() => {
}
}
}
.content-left_box {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
> div:last-child {
width: 20px;
height: 20px;
@ -1748,6 +1798,7 @@ const projectSnName = computed(() => {
background-size: 100% 100%;
cursor: pointer;
}
> div:first-child {
font-weight: 800;
font-size: 16px;
@ -1771,12 +1822,14 @@ const projectSnName = computed(() => {
width: 100%;
height: 160px;
}
.hls-video_title {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 8px 0;
> div:last-child {
width: 20px;
height: 20px;
@ -1784,15 +1837,18 @@ const projectSnName = computed(() => {
no-repeat;
background-size: 100% 100%;
}
> div:first-child {
font-size: 14px;
color: #ffffff;
}
}
.content-right_box-main {
height: calc(100% - 40px) !important;
// height: calc(100% - 32px - 182px - 34px - 12px) !important;
}
.content-right-top1 {
display: flex;
flex-wrap: wrap;
@ -1813,6 +1869,7 @@ const projectSnName = computed(() => {
margin-top: 10px;
}
}
.content-right-top {
display: flex;
flex-wrap: wrap;
@ -1844,10 +1901,12 @@ const projectSnName = computed(() => {
background: rgba(39, 88, 192, 0.1);
box-shadow: inset 0px 0px 2px 2px #051220;
border: 1px solid rgba(39, 88, 192, 0.6);
.el-table__expand-icon > .el-icon {
font-size: 14px;
color: #b2b8c2;
}
.time-diff {
padding: 3px 10px;
background: rgba(75, 141, 236, 0.1);
@ -1856,6 +1915,7 @@ const projectSnName = computed(() => {
font-size: 11px;
color: #ffffff;
}
.viewreplay {
display: flex;
align-items: center;
@ -1965,24 +2025,30 @@ const projectSnName = computed(() => {
}
}
}
.headerNoise-right_active {
margin-left: 0;
width: 100%;
.h-card .content-main .content-right_active {
width: 100% !important;
}
.content-right {
margin-left: 0 !important;
width: 100% !important;
}
.content-right_box-main1 {
height: calc(100% - 40px) !important;
}
.content-right-top2 {
height: 100% !important;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
> div {
width: 32.4% !important;
height: 350px;
@ -1990,9 +2056,11 @@ const projectSnName = computed(() => {
no-repeat;
background-size: 100% 100%;
margin: 0 !important;
.hls-video {
height: 310px !important;
}
:deep(.sub-wnd) {
width: 100% !important;
}
@ -2008,8 +2076,10 @@ const projectSnName = computed(() => {
}
}
}
:deep(.equipment-dialog) {
margin-top: 0;
.el-dialog {
top: 50%;
left: 50%;
@ -2022,27 +2092,33 @@ const projectSnName = computed(() => {
.el-dialog__header {
padding: 15px 20px 5px;
}
.el-dialog__title {
font-style: italic;
color: white;
}
.el-dialog__body {
padding: 0 !important;
}
.dialog_content {
padding: 0 20px 5px;
display: flex;
justify-content: space-between;
overflow-y: auto;
max-height: 85vh;
// flex-wrap: wrap;
.content-right {
width: 48%;
.content-right_header {
font-weight: 800;
font-size: 16px;
color: #ffffff;
}
.box1 {
display: flex;
align-items: flex-start;
@ -2060,9 +2136,11 @@ const projectSnName = computed(() => {
width: 70px;
color: #a2a4af;
}
.content-file_list {
display: flex;
flex-direction: column;
> div {
display: flex;
align-items: center;
@ -2070,15 +2148,18 @@ const projectSnName = computed(() => {
height: 30px;
padding: 0 16px 0 20px;
background: rgba(39, 88, 192, 0.2);
> div:first-child {
font-size: 14px;
color: rgba(255, 255, 255, 0.6);
> div:last-child {
width: 170px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
> div:first-child {
width: 16px;
height: 16px;
@ -2087,10 +2168,12 @@ const projectSnName = computed(() => {
background-size: 100% 100%;
}
}
> div:last-child {
font-size: 14px;
color: #5181f6;
cursor: pointer;
> div:first-child {
width: 16px;
height: 16px;
@ -2099,24 +2182,30 @@ const projectSnName = computed(() => {
background-size: 100% 100%;
}
}
> div {
display: flex;
align-items: center;
> div:not(:first-child) {
margin-left: 6px;
}
}
}
}
.content-img {
display: flex;
flex-wrap: wrap;
> .el-image:nth-child(n + 4) {
margin-top: 20px;
}
> .el-image:not(:nth-child(3n + 1)) {
margin-left: 20px;
}
> .el-image {
width: 80px;
height: 80px;
@ -2125,8 +2214,10 @@ const projectSnName = computed(() => {
}
}
}
.content-left {
width: 49%;
> div {
display: flex;
align-items: flex-start;
@ -2144,6 +2235,7 @@ const projectSnName = computed(() => {
width: 70px;
color: #a2a4af;
}
.state-box {
padding: 4px 8px;
min-width: 40px;
@ -2153,10 +2245,12 @@ const projectSnName = computed(() => {
text-align: center;
flex: initial !important;
}
.state-box_offline {
background-color: #f7f7f7;
color: #272d45 !important;
}
.gfx_active {
background-color: #ff0000;
color: #ffffff;
@ -2165,21 +2259,26 @@ const projectSnName = computed(() => {
}
}
}
:deep(.hls-video-dialog) {
top: 50%;
transform: translateY(-50%);
margin-top: 0;
.el-dialog__header {
display: none;
}
.el-dialog__body {
padding: 0 !important;
}
.dialog_content {
padding: 0 !important;
height: initial;
overflow: hidden;
}
.audio-content {
display: flex;
align-items: center;
@ -2187,6 +2286,7 @@ const projectSnName = computed(() => {
padding: 13px 22px 13px 13px;
position: relative;
overflow: hidden;
audio {
opacity: 0;
position: absolute;
@ -2200,34 +2300,42 @@ const projectSnName = computed(() => {
background-repeat: no-repeat;
background-size: 100% 100%;
}
.bodyworn_pause {
background-image: url("~@/assets/images/companyBigScreen/terminalOperation/bodyworn_pause.png");
}
.bodyworn_play {
background-image: url("~@/assets/images/companyBigScreen/terminalOperation/bodyworn_play.png");
}
> div:first-child {
display: flex;
flex-direction: column;
justify-content: space-between;
> div:last-child {
display: flex;
align-items: center;
font-size: 14px;
color: #808080;
margin-top: 20px;
> div:not(:first-child) {
margin-left: 19px;
}
}
> div:first-child {
display: flex;
align-items: center;
font-size: 14px;
color: #272d45;
> div:not(:first-child) {
margin-left: 10px;
}
> div:first-child {
width: 19px;
height: 18px;
@ -2235,6 +2343,7 @@ const projectSnName = computed(() => {
background-repeat: no-repeat;
background-size: 100% 100%;
}
> div:last-child {
padding: 2px 10px;
border: 1px solid #f7af13;
@ -2244,12 +2353,15 @@ const projectSnName = computed(() => {
}
}
}
.video-content {
// height: 260px;
padding-bottom: 20px;
.card-img {
width: 100%;
height: 180px;
img,
video,
.el-image {
@ -2257,6 +2369,7 @@ const projectSnName = computed(() => {
height: 100%;
}
}
.card-flex {
display: flex;
justify-content: space-between;
@ -2264,15 +2377,18 @@ const projectSnName = computed(() => {
padding: 15px 15px 0;
color: #333333;
font-size: 15px;
p {
margin: 0;
}
.webkit-clamp_1 {
width: 50%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.card-num {
font-size: 14px;
color: #808080;
@ -2280,16 +2396,19 @@ const projectSnName = computed(() => {
}
}
}
.notoDta {
top: 50%;
width: 60%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
img {
width: 40%;
margin: 5% 30%;
}
p {
color: #fff;
font-size: calc(100vw * 14 / 1920);