src/views/dashboard/index.vue

@@ -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 {