diff --git a/src/views/remote-manage/remote-control.vue b/src/views/remote-manage/remote-control.vue index 4436716..e225fb2 100644 --- a/src/views/remote-manage/remote-control.vue +++ b/src/views/remote-manage/remote-control.vue @@ -280,7 +280,7 @@ function subscribeWS() { chartDom1.value.updateChartData(data.vitalSignsList); chartDom2.value.updateChartData(data.vitalSignsList); chartDom3.value.updateChartData(data.vitalSignsList); - chartDom4.value.updateChartData(data.vitalSignsList); + // chartDom4.value.updateChartData(data.vitalSignsList); updateMedicineTable(data.aiMedicineList[0], data.docMedicineList[0]); }) @@ -578,6 +578,7 @@ function startAI() { width: 37%; height: 100%; + & > h3 { font-size: 26px; color: $main-color; @@ -588,6 +589,7 @@ function startAI() { .chart-line { width: 100%; + height: calc(25% - 30px); height: calc(33.3% - 30px); margin-bottom: 20px; background: #e8f5f8; @@ -596,359 +598,399 @@ function startAI() { // overflow: hidden; } - /*.chart-ecg { - width: 100%; - height: calc(25% - 50px); - border-left: 1px solid #92b3c1; - border-bottom: 1px solid #92b3c1; + .chart-ecg { + width: 100%; + height: calc(25% - 50px); + border-left: 1px solid #92b3c1; + border-bottom: 1px solid #92b3c1; - &::before { - content: ''; - position: absolute; - width: 0; - height: 0; - top: 0; - left: -5px; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-bottom: 15px solid #285e7d; - border-top: 0; - } + &::before { + content: ''; + position: absolute; + width: 0; + height: 0; + top: 0; + left: -5px; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 15px solid #285e7d; + border-top: 0; + } - &::after { - content: ''; - position: absolute; - width: 0; - height: 0; - bottom: -5px; - right: 0; - border-left: 15px solid #285e7d; - border-right: 0; - border-bottom: 5px solid transparent; - border-top: 5px solid transparent; - } + &::after { + content: ''; + position: absolute; + width: 0; + height: 0; + bottom: -5px; + right: 0; + border-left: 15px solid #285e7d; + border-right: 0; + border-bottom: 5px solid transparent; + border-top: 5px solid transparent; + } } - }*/ - .center-box { - width: calc(100% - 1500px); - min-width: 500px; - height: 100%; + //.chart-ecg { + // width: 100%; + // height: calc(25% - 50px); + // border-left: 1px solid #92b3c1; + // border-bottom: 1px solid #92b3c1; + // + // &::before { + // content: ''; + // position: absolute; + // width: 0; + // height: 0; + // top: 0; + // left: -5px; + // border-left: 5px solid transparent; + // border-right: 5px solid transparent; + // border-bottom: 15px solid #285e7d; + // border-top: 0; + // } + // + // &::after { + // content: ''; + // position: absolute; + // width: 0; + // height: 0; + // bottom: -5px; + // right: 0; + // border-left: 15px solid #285e7d; + // border-right: 0; + // border-bottom: 5px solid transparent; + // border-top: 5px solid transparent; + // } + //} + } - .body-box { - width: 100%; - height: calc(100% - 110px); + .center-box { + width: calc(100% - 1500px); + min-width: 500px; + height: 100%; + + .body-box { + width: 100%; + height: calc(100% - 110px); + display: flex; + justify-content: center; + align-items: center; + + .body-img { + position: relative; + // width: 400px; + // height: 650px; + margin-top: 80px; + width: 500px; + height: 812.5px; + min-height: 650px; + + .lung-img { + position: absolute; + width: 500px; + height: auto; + top: 240px; + left: 0; + transition: all 2s; + } + + .heart-img { + position: absolute; + width: 500px; + height: auto; + top: 420px; + left: 0; + transition: all 2s; + } + } + } + + .btn-box { + position: relative; + width: 100%; + height: 110px; + display: flex; + justify-content: center; + align-items: center; + + //.start-btn { + // width: 230px; + // height: 40px; + // font-size: 20px; + // border-radius: 16px; + // font-weight: 600; + //} + + //.right-btn-box { + // position: absolute; + // width: 100px; + // height: 62px; + // top: calc(50% - 31px); + // right: 0; + // display: flex; + // flex-direction: column; + // justify-content: space-between; + // + // .el-button { + // width: 100%; + // padding: 0; + // height: 25px; + // line-height: 22px; + // border: 1px solid #e0e0e0; + // color: #616161; + // + // &.active { + // background: $main-color; + // color: white; + // } + // + // &:last-of-type { + // margin: 0; + // } + // } + //} + } + } + + .right-box { + width: 36.5%; + height: 100%; + display: flex; + flex-direction: column; + + .top-btn-box { + width: 100%; + height: 34px; + margin-bottom: 5px; + display: flex; + justify-content: space-between; + align-items: center; + + .top-left-btn-box { display: flex; - justify-content: center; align-items: center; - .body-img { - position: relative; - // width: 400px; - // height: 650px; - margin-top: 80px; - width: 500px; - height: 812.5px; - min-height: 650px; + .el-select { + margin-right: 10px; + } + } - .lung-img { - position: absolute; - width: 500px; - height: auto; - top: 240px; - left: 0; - transition: all 2s; - } + .el-button { + border-radius: 16px; + height: 31px; + background-color: transparent; + color: #c77000; + } + + & > .el-button { + border-radius: 4px; + background-color: #f2f3f5; + color: $main-color; + } + } + + .monitoring-message { + width: 100%; + height: 41%; + padding-bottom: 10px; + display: flex; + justify-content: space-between; + + & > .left-box { + position: relative; + width: 200px; + height: 100%; + + + .unusual-title { + display: block; + width: 100%; + line-height: 38px; + color: #C77000; + font-size: 20px; + text-align: center; + border: 1px dashed #C1C1C1; + border-radius: 10px; + } + + .unusual-box { + width: 100%; + height: calc(100% - 45px); + // background: #F8F8F8; + border-left: 1px dashed #C1C1C1; + // border-radius: 4px; + margin-top: 5px; + padding: 8px 16px; + overflow-y: auto; + + + li { + color: #F80000; + font-size: 14px; + line-height: 22px; - .heart-img { - position: absolute; - width: 500px; - height: auto; - top: 420px; - left: 0; - transition: all 2s; } } } - .btn-box { - position: relative; - width: 100%; - height: 110px; - display: flex; - justify-content: center; - align-items: center; + & > .right-box { + width: calc(100% - 205px); + height: 100%; - //.start-btn { - // width: 230px; - // height: 40px; - // font-size: 20px; - // border-radius: 16px; - // font-weight: 600; - //} - //.right-btn-box { - // position: absolute; - // width: 100px; - // height: 62px; - // top: calc(50% - 31px); - // right: 0; - // display: flex; - // flex-direction: column; - // justify-content: space-between; - // - // .el-button { + // .video-box { + // position: relative; // width: 100%; - // padding: 0; - // height: 25px; - // line-height: 22px; - // border: 1px solid #e0e0e0; - // color: #616161; + // height: 270px; + // background: $main-color; + // /* background: url(@/assets/imgs/video_bck.png); + //background-size: 100% 100%; */ // - // &.active { - // background: $main-color; - // color: white; + // &:hover { + // .icon-box { + // display: flex; + // } // } // - // &:last-of-type { - // margin: 0; + // .icon-box { + // display: none; + // position: absolute; + // top: 0; + // left: 0; + // bottom: 0; + // right: 0; + // font-size: 60px; + // color: white; + // background: rgba(black, .3); + // justify-content: center; + // align-items: center; + // } + // + // video { + // width: 100%; + // height: 100%; + // object-fit: cover; // } // } - //} - } - } - .right-box { - width: 36.5%; - height: 100%; - display: flex; - flex-direction: column; - - .top-btn-box { - width: 100%; - height: 34px; - margin-bottom: 5px; - display: flex; - justify-content: space-between; - align-items: center; - - .top-left-btn-box { - display: flex; - align-items: center; - - .el-select { - margin-right: 10px; - } - } - - .el-button { - border-radius: 16px; - height: 31px; - background-color: transparent; - color: #c77000; - } - - & > .el-button { - border-radius: 4px; - background-color: #f2f3f5; - color: $main-color; - } - } - - .monitoring-message { - width: 100%; - height: 41%; - padding-bottom: 10px; - display: flex; - justify-content: space-between; - - & > .left-box { - position: relative; - width: 200px; + .message-box { + width: 100%; + // height: 270px; height: 100%; + // margin-bottom: 5px; - - .unusual-title { - display: block; + .message-log { width: 100%; - line-height: 38px; - color: #C77000; - font-size: 20px; - text-align: center; - border: 1px dashed #C1C1C1; - border-radius: 10px; - } - - .unusual-box { - width: 100%; - height: calc(100% - 45px); - // background: #F8F8F8; - border-left: 1px dashed #C1C1C1; - // border-radius: 4px; - margin-top: 5px; - padding: 8px 16px; + height: 100%; + max-height: calc(100% - 35px); + padding: 16px 20px; + box-sizing: border-box; + border: 1px solid #c8c8c8; + background: #f8f8f8; overflow-y: auto; + li { - color: #F80000; - font-size: 14px; - line-height: 22px; - } - } - } - - & > .right-box { - width: calc(100% - 205px); - height: 100%; - - // .video-box { - // position: relative; - // width: 100%; - // height: 270px; - // background: $main-color; - // /* background: url(@/assets/imgs/video_bck.png); - //background-size: 100% 100%; */ - // - // &:hover { - // .icon-box { - // display: flex; - // } - // } - // - // .icon-box { - // display: none; - // position: absolute; - // top: 0; - // left: 0; - // bottom: 0; - // right: 0; - // font-size: 60px; - // color: white; - // background: rgba(black, .3); - // justify-content: center; - // align-items: center; - // } - // - // video { - // width: 100%; - // height: 100%; - // object-fit: cover; - // } - // } - - .message-box { - width: 100%; - // height: 270px; - height: 100%; - // margin-bottom: 5px; - - .message-log { width: 100%; - height: 100%; - max-height: calc(100% - 35px); - padding: 16px 20px; - box-sizing: border-box; - border: 1px solid #c8c8c8; - background: #f8f8f8; - overflow-y: auto; + font-size: 14px; + line-height: 1.6; + margin: 5px 0; - li { - width: 100%; - font-size: 14px; - line-height: 1.6; - margin: 5px 0; - &.align-right { - text-align: right; - - span { - background: $main-color; - } - } + &.align-right { + text-align: right; span { - display: inline-block; - max-width: 80%; - padding: 6px 8px; - box-sizing: border-box; - border-radius: 8px; - color: white; - letter-spacing: 1px; - background: #92b3c1; - text-align: left; + background: $main-color; } + + } + + span { + display: inline-block; + max-width: 80%; + padding: 6px 8px; + box-sizing: border-box; + border-radius: 8px; + color: white; + letter-spacing: 1px; + background: $main-color; + background: #92b3c1; + text-align: left; + } + } + } + + .send-box { + width: 100%; + height: 40px; + display: flex; + justify-content: space-between; + align-items: flex-end; + + .el-input { + width: calc(100% - 110px); + height: 32px; + + :deep(.el-input__wrapper) { + background-color: #F2F3F5; + border-color: #C1C1C1; } } - .send-box { - width: 100%; - height: 40px; - display: flex; - justify-content: space-between; - align-items: flex-end; - - .el-input { - width: calc(100% - 110px); - height: 32px; - - :deep(.el-input__wrapper) { - background-color: #F2F3F5; - border-color: #C1C1C1; - } - } - - .el-button { - padding: 0; - width: 100px; - line-height: 30px; - } + .el-button { + padding: 0; + width: 100px; + line-height: 30px; } } } } + } - .table-box { - width: 100%; - height: 29.5%; - margin-bottom: 20px; - flex-grow: 1; + .table-box { + width: 100%; + height: 29.5%; + margin-bottom: 20px; + flex-grow: 1; - :deep(.el-table__inner-wrapper) { - .el-table__cell { - padding: 6px 0; - } - - .cell { - padding: 0 2px; - } - - .el-table__header-wrapper { - tr { - background-color: $main-color; - } - - th.el-table__cell { - color: white; - background-color: $main-color; - padding: 8px 0; - font-weight: 400; - } - } + :deep(.el-table__inner-wrapper) { + .el-table__cell { + padding: 6px 0; } - //.table-btn-box { - // .el-button { - // padding: 0 7px; - // height: 24px; - // line-height: 22px; - // - // &:not(:first-of-type) { - // margin-left: 4px; - // } - // } - //} + .cell { + padding: 0 2px; + } + + .el-table__header-wrapper { + tr { + background-color: $main-color; + } + + th.el-table__cell { + color: white; + background-color: $main-color; + padding: 8px 0; + font-weight: 400; + } + } } + + //.table-btn-box { + // .el-button { + // padding: 0 7px; + // height: 24px; + // line-height: 22px; + // + // &:not(:first-of-type) { + // margin-left: 4px; + // } + // } + //} } } } +}