|
|
@@ -17,39 +17,39 @@
|
|
|
|
|
|
<!-- 信息 -->
|
|
|
<div class="col-right">
|
|
|
- <div class="right-info">
|
|
|
- <div class="info-left">
|
|
|
- <div class="info-tilte">
|
|
|
- <div class="name">{{ item.name }}</div>
|
|
|
- <a-tag :bordered="false" :color="item.state == 1 ? 'success' : 'orange'">{{
|
|
|
- item.stateValue
|
|
|
- }}</a-tag>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">部门：</div>
|
|
|
- <div class="text">{{ item.bm }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">位置：</div>
|
|
|
- <div class="text">{{ item.wz }}</div>
|
|
|
- </div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">监控点：</div>
|
|
|
- <div class="text">{{ item.jkd }}</div>
|
|
|
+ <div class="info-tilte">
|
|
|
+ <div class="name">{{ item.name }}</div>
|
|
|
+ <a-tag :bordered="false" :color="item.state == 1 ? 'success' : 'orange'">{{ item.stateValue }}</a-tag>
|
|
|
+ </div>
|
|
|
+ <div class="info">
|
|
|
+ <div class="right-info">
|
|
|
+ <div class="info-left">
|
|
|
+ <div class="info-row">
|
|
|
+ <div class="label">部门：</div>
|
|
|
+ <div class="text">{{ item.bm }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <div class="label">位置：</div>
|
|
|
+ <div class="text">{{ item.wz }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <div class="label">监控点：</div>
|
|
|
+ <div class="text">{{ item.jkd }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="info-row">
|
|
|
+ <div class="label">温度：</div>
|
|
|
+ <div class="text">{{ item.wd }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="info-row">
|
|
|
- <div class="label">温度：</div>
|
|
|
- <div class="text">{{ item.wd }}</div>
|
|
|
+ <div class="info-right">
|
|
|
+ <img src="/src/assets/images/bigscreen/img.png" style="width: 115%; padding-top: 5px" />
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="info-right">
|
|
|
- <img src="/src/assets/images/bigscreen/img.png" style="width: 115%; padding-top: 35px" />
|
|
|
+ <div class="right-foot">
|
|
|
+ <div>记录时间：{{ item.jlsj }}</div>
|
|
|
+ <div class="history">历史记录</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="right-foot">
|
|
|
- <div>记录时间：{{ item.jlsj }}</div>
|
|
|
- <div class="history">历史记录</div>
|
|
|
- </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</a-col>
|
|
|
@@ -295,74 +295,84 @@
|
|
|
width: 90%;
|
|
|
height: 100%;
|
|
|
|
|
|
- .right-info {
|
|
|
+ // 整体标题区域
|
|
|
+ .info-tilte {
|
|
|
width: 100%;
|
|
|
- height: 80%;
|
|
|
- padding: 10px 10px;
|
|
|
-
|
|
|
+ height: 20%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ letter-spacing: 2px;
|
|
|
+ padding: 0 10px;
|
|
|
|
|
|
- .info-left {
|
|
|
- width: 80%;
|
|
|
- height: 100%;
|
|
|
- overflow-y: auto;
|
|
|
+ .name {
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .info-tilte {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .name {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 16px;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .info {
|
|
|
+ height: 80%;
|
|
|
+ .right-info {
|
|
|
+ width: 100%;
|
|
|
+ height: 80%;
|
|
|
+ padding: 0 10px;
|
|
|
|
|
|
- .info-row {
|
|
|
- padding: 5px 0;
|
|
|
- display: flex;
|
|
|
- width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
|
|
|
- .label {
|
|
|
- width: 60px;
|
|
|
- text-align-last: justify;
|
|
|
- }
|
|
|
+ .info-left {
|
|
|
+ width: 80%;
|
|
|
+ height: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ .info-row {
|
|
|
+ width: 100%;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+ display: flex;
|
|
|
+ padding-top: 10px;
|
|
|
+ .label {
|
|
|
+ width: 60px;
|
|
|
+ text-align-last: justify;
|
|
|
+ }
|
|
|
|
|
|
- .text {
|
|
|
- flex: 1;
|
|
|
- overflow: hidden;
|
|
|
- word-break: break-all;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
+ .text {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ word-break: break-all;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- .info-left::-webkit-scrollbar {
|
|
|
- display: none;
|
|
|
- }
|
|
|
+ .info-left::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
|
|
|
- .info-right {
|
|
|
- padding: 0 40px 0 30px;
|
|
|
+ .info-right {
|
|
|
+ padding: 0 40px 0 30px;
|
|
|
+ }
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
- .right-foot {
|
|
|
- height: 20%;
|
|
|
- padding: 0 10px;
|
|
|
-
|
|
|
- color: #afafaf;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- border-top: 1px solid #e7e7e7;
|
|
|
- .history {
|
|
|
- cursor: pointer;
|
|
|
- color: #008dff;
|
|
|
+ .right-foot {
|
|
|
+ height: 20%;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #909399;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-top: 1px solid #e7e7e7;
|
|
|
+ .history {
|
|
|
+ cursor: pointer;
|
|
|
+ color: #008dff;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
like