|
@@ -21,58 +21,17 @@
|
|
|
<div class="right-msg">
|
|
|
<div class="msgStatistics">
|
|
|
<div style="width: 3px;height: 16px;background-color: #2250C8;position: absolute;left: 15px;top: 14px;"></div>
|
|
|
- <span style="font-size: 16px;font-weight: 500;position: absolute;left: 22px;top: 12px;">设备状态</span>
|
|
|
- <div class="left">
|
|
|
- <img src="../../assets/编组201.png" style="position: absolute;right: 25px;top: 29px;">
|
|
|
- <span style="color:#333333;font-size:12px;position: absolute;top: 18px;left: 77px;">在线</span>
|
|
|
- <span style="color:#333333;font-size:12px;position: absolute;bottom: 18px;left: 77px;">离线</span>
|
|
|
- <span
|
|
|
- style="color:#333333;font-size:12px;position: absolute;bottom: 10px;right: 16px;font-weight: 600;">接入摄像机</span>
|
|
|
- <!-- <span style="color: #00974D;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;left: 33px;top: 13px;">{{ msgStatisticsData.online||0 }}{{ '台' }}</span>
|
|
|
- <span style="color: #FF0000;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;left: 33px;bottom: 13px;">{{ msgStatisticsData.offline ||0}}{{ '台' }}</span>
|
|
|
- <span style="color: #2250C8;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;right: 42px;top: 13px;">{{ msgStatisticsData.countAllCamera||0}}{{ '台' }}</span> -->
|
|
|
- <div class="onlineNum" style="width: 40%;height: 50%;text-align: center;">
|
|
|
- <span
|
|
|
- style="color: #00974D;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);cursor: pointer;"
|
|
|
- @click="toCameraMonitoring('2')">{{ msgStatisticsData.offline || 0 }}{{ '台' }}</span>
|
|
|
- </div>
|
|
|
- <div class="offlineNum" style="width: 40%;height: 50%;text-align: center;">
|
|
|
- <span
|
|
|
- style="color: #FF0000;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);cursor: pointer;"
|
|
|
- @click="toCameraMonitoring('1')">{{ msgStatisticsData.online || 0 }}{{ '台' }}</span>
|
|
|
- </div>
|
|
|
- <div class="cameraNum" style="position: absolute;right: 5px;top:0;width: 40%;height: 50%;text-align: center;">
|
|
|
- <span
|
|
|
- style="color: #2250C8;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);">{{
|
|
|
- msgStatisticsData.countAllCamera || 0 }}{{ '台' }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="right">
|
|
|
- <img src="../../assets/编组202.png" style="position: absolute;left: 25px;top: 29px;">
|
|
|
- <span style="color:#333333;font-size:12px;position: absolute;top: 18px;right: 77px;">在线</span>
|
|
|
- <span style="color:#333333;font-size:12px;position: absolute;bottom: 18px;right: 77px;">离线</span>
|
|
|
- <span
|
|
|
- style="color:#333333;font-size:12px;position: absolute;bottom: 10px;left: 24px;font-weight: 600;">车载终端</span>
|
|
|
- <!-- <span style="color: #00974D;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;right: 33px;top: 13px;">{{ msgStatisticsData.OFFLINETERMINAL ||0}}{{ '台' }}</span>
|
|
|
- <span style="color: #FF0000;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;right: 33px;bottom: 13px;">{{ msgStatisticsData.ONLINETERMINAL ||0}}{{ '台' }}</span>
|
|
|
- <span style="color: #2250C8;line-height: 22px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);position: absolute;left: 37px;top: 13px;">{{ msgStatisticsData.COUNTALLTERMINAL ||0}}{{ '台' }}</span> -->
|
|
|
- <div class="terminalNum"
|
|
|
- style="position: absolute;left: 5px;top:0;width: 40%;height: 50%;text-align: center;">
|
|
|
- <span
|
|
|
- style="color: #2250C8;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);">{{
|
|
|
- msgStatisticsData.COUNTALLTERMINAL || 0 }}{{ '台' }}</span>
|
|
|
- </div>
|
|
|
- <div class="onlineNum" style="width: 40%;height: 50%;text-align: center;float: right;">
|
|
|
- <span
|
|
|
- style="color: #00974D;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);cursor: pointer;"
|
|
|
- @click="toVehicleMonitoring('1')">{{ msgStatisticsData.OFFLINETERMINAL || 0 }}{{ '台' }}</span>
|
|
|
- </div>
|
|
|
- <div class="offlineNum"
|
|
|
- style="width: 40%;height: 50%;text-align: center;position: absolute;right: 0;bottom: 0;">
|
|
|
- <span
|
|
|
- style="color: #FF0000;line-height: 55px;font-size: 16px;font-weight: 600;text-shadow: 0px 2px 2px rgba(161,158,158,0.5);cursor: pointer;"
|
|
|
- @click="toVehicleMonitoring('2')">{{ msgStatisticsData.ONLINETERMINAL || 0 }}{{ '台' }}</span>
|
|
|
- </div>
|
|
|
+ <span style="font-size: 16px;font-weight: 500;position: absolute;left: 22px;top: 12px;">信息统计</span>
|
|
|
+ <div class="tjMsg">
|
|
|
+ <img src="../../assets/矩形_28@2x.png">
|
|
|
+ <span class="total">车载终端总数</span>
|
|
|
+ <div class="blueDrop"></div>
|
|
|
+ <span class="onlineText">在线</span>
|
|
|
+ <div class="redDrop"></div>
|
|
|
+ <span class="offlineText">离线</span>
|
|
|
+ <span class="zs">{{ this.msgStatisticsData.COUNTALLTERMINAL }}</span>
|
|
|
+ <span class="onlineTotal">{{ this.msgStatisticsData.OFFLINETERMINAL }}</span>
|
|
|
+ <span class="offlineTotal">{{ this.msgStatisticsData.ONLINETERMINAL }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="systemMsg">
|
|
@@ -825,28 +784,102 @@ export default {
|
|
|
background-color: #fff;
|
|
|
box-shadow: 0px 0px 4px 0px #E4E4E4;
|
|
|
border-radius: 2px;
|
|
|
-
|
|
|
- .left {
|
|
|
- position: relative;
|
|
|
- background: url('../../assets/编组24.png') no-repeat 50% 50%;
|
|
|
+ .tjMsg{
|
|
|
+ width: 501px;
|
|
|
+ height: 180px;
|
|
|
+ background: url('../../assets/messageTjbgc.png') no-repeat 50% 50%;
|
|
|
background-size: 100% 100%;
|
|
|
- width: 205px;
|
|
|
- height: 103px;
|
|
|
- float: left;
|
|
|
- margin-top: 47px;
|
|
|
- margin-left: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .right {
|
|
|
position: relative;
|
|
|
- background: url('../../assets/编组25.png') no-repeat 50% 50%;
|
|
|
- background-size: 100% 100%;
|
|
|
- width: 205px;
|
|
|
- height: 103px;
|
|
|
- float: right;
|
|
|
- margin-top: 47px;
|
|
|
- margin-right: 20px;
|
|
|
+ left: -25px;
|
|
|
+ top: 8px;
|
|
|
+ img{
|
|
|
+ width: 1px;
|
|
|
+ height: 46px;
|
|
|
+ position: relative;
|
|
|
+ left: 245px;
|
|
|
+ top: 60px;
|
|
|
+ }
|
|
|
+ .total{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #484646;
|
|
|
+ line-height: 22px;
|
|
|
+ font-style: normal;
|
|
|
+ position: relative;
|
|
|
+ left: 140px;
|
|
|
+ top: 30px;
|
|
|
+ }
|
|
|
+ .blueDrop{
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 6px;
|
|
|
+ background-color: #2250C8;
|
|
|
+ position: relative;
|
|
|
+ left: 265px;
|
|
|
+ top: 17px;
|
|
|
+ }
|
|
|
+ .redDrop{
|
|
|
+ width: 6px;
|
|
|
+ height: 6px;
|
|
|
+ border-radius: 6px;
|
|
|
+ background-color: #FF0000;
|
|
|
+ position: relative;
|
|
|
+ left: 350px;
|
|
|
+ top: -10px;
|
|
|
+ }
|
|
|
+ .onlineText{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #696969;
|
|
|
+ line-height: 22px;
|
|
|
+ font-style: normal;
|
|
|
+ position: relative;
|
|
|
+ left: 275px;
|
|
|
+ top: 2px;
|
|
|
+ }
|
|
|
+ .offlineText{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #696969;
|
|
|
+ line-height: 22px;
|
|
|
+ font-style: normal;
|
|
|
+ position: relative;
|
|
|
+ left: 360px;
|
|
|
+ top: -25px;
|
|
|
+ }
|
|
|
+ .zs{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #2250C8;
|
|
|
+ line-height: 22px;
|
|
|
+ font-style: normal;
|
|
|
+ position: relative;
|
|
|
+ left: 135px;
|
|
|
+ }
|
|
|
+ .onlineTotal{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #00974D;
|
|
|
+ font-style: normal;
|
|
|
+ position: relative;
|
|
|
+ left: 235px;
|
|
|
+ }
|
|
|
+ .offlineTotal{
|
|
|
+ font-family: PingFangSC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #ff0000;
|
|
|
+ font-style: normal;
|
|
|
+ position: relative;
|
|
|
+ left: 310px;
|
|
|
+ }
|
|
|
}
|
|
|
+
|
|
|
}
|
|
|
|
|
|
.systemMsg {
|