BJ_web_developers / lzsandtable

Commit 27890aae7374e378032fcba3146b532536848cd7

Authored by liuqimichale
1 parent 5b095e2d

设备监控

Inline Side-by-side
Showing 4 changed files with 163 additions and 4 deletions
src/components/VEquipment.vue
  View file @27890aa
1 <template> 1 <template>
2 <div class="theme-wrap"> 2 <div class="theme-wrap">
3 <card-title> <span>设备监控消息</span></card-title> 3 <card-title> <span>设备监控消息</span></card-title>
4 - <div class="theme-body">  
5 -  
6 - </div> 4 + <ul class="theme-body" style="padding: 10px 20px 20px 0;">
  5 + <li class="equipment-section">
  6 + <div class="normal-status front">
  7 + <p class="text-blue">23.4%</p>
  8 + <p>PDA在线率</p>
  9 + </div>
  10 + <div class="rotate-status back">
  11 + <p class="text-blue">100/300</p>
  12 + <p>PDA/PDA在线</p>
  13 + </div>
  14 + </li>
  15 + <li class="equipment-section">
  16 + <div class="normal-status front">
  17 + <p class="text-blue">23.4%</p>
  18 + <p>地磁在线率</p>
  19 + </div>
  20 + <div class="rotate-status back">
  21 + <p class="text-blue">100/300</p>
  22 + <p>地磁/地磁</p>
  23 + </div>
  24 + </li>
  25 + <li class="equipment-section">
  26 + <div class="normal-status front">
  27 + <p class="text-blue">23.4%</p>
  28 + <p>道闸在线率</p>
  29 + </div>
  30 + <div class="rotate-status back">
  31 + <p class="text-blue">100/300</p>
  32 + <p>道闸/道闸在线</p>
  33 + </div>
  34 + </li>
  35 + <li class="equipment-section">
  36 + <div class="normal-status front">
  37 + <p class="text-blue">23.4%</p>
  38 + <p>诱导屏在线率</p>
  39 + </div>
  40 + <div class="rotate-status back">
  41 + <p class="text-blue">100/300</p>
  42 + <p>诱导屏/诱导屏在线</p>
  43 + </div>
  44 + </li>
  45 + </ul>
7 </div> 46 </div>
8 </template> 47 </template>
9 48
10 <script> 49 <script>
11 import CardTitle from './base/CardTitle' 50 import CardTitle from './base/CardTitle'
  51 +
12 export default { 52 export default {
13 name: 'VEquipment', 53 name: 'VEquipment',
14 components: { 54 components: {
@@ -34,6 +74,77 @@ export default { @@ -34,6 +74,77 @@ export default {
34 .theme-body { 74 .theme-body {
35 height: calc(100% - 30px); 75 height: calc(100% - 30px);
36 margin-left: 20px; 76 margin-left: 20px;
  77 +
  78 + }
  79 + .equipment-section{
  80 + float: left;
  81 + width: 46%;
  82 + height: 46%;
  83 + margin: 2%;
  84 + display: flex;
  85 + align-items: center;
  86 + justify-content: center;
  87 + position: relative;
  88 + background: url("../images/content/deviceBg.png") no-repeat;
  89 + background-size: 100% 100%;
  90 + transform-style:preserve-3d;
  91 + /*transition:1s;*/
  92 + animation:myfirst 6s linear infinite;
  93 + div{
  94 + width: 95%;
  95 + height: 95%;
  96 + position: absolute;
  97 + position:absolute;left:0;top:0;
  98 + backface-visibility:hidden;
  99 + padding: 15px 0 10px 0;
  100 + text-align: center;
  101 +
  102 + p{
  103 + height: 50%;
  104 + display: flex;
  105 + align-items: center;
  106 + justify-content: center;
  107 + }
  108 + .text-blue{
  109 + @include fontStyle(24px);
  110 + background-image: $fontBlue;
  111 + }
  112 + .text-orange{
  113 + @include fontStyle(24px);
  114 + background-image: $fontOrange;
  115 + }
  116 + }
  117 + .normal-status{
  118 +
  119 + }
  120 + .rotate-status{
  121 + transform: rotateY(180deg);
  122 + }
  123 +
  124 +
  125 + }
  126 + /*.equipment-section:hover{*/
  127 + /*transform: rotateY(180deg);*/
  128 + /*}*/
  129 +
  130 + @keyframes myfirst{
  131 + 0%{
  132 + transform: rotateY(0)
  133 + }
  134 + 30%{
  135 + transform: rotateY(0)
  136 + }
  137 +
  138 + 50%{
  139 + transform: rotateY(180deg)
  140 + }
  141 + 80%{
  142 + transform: rotateY(180deg)
  143 + }
  144 +
  145 + 100% {
  146 + transform: rotateY(360deg)
  147 + }
37 } 148 }
38 149
39 150
src/components/base/PieEchart.vue
  View file @27890aa
@@ -135,7 +135,7 @@ export default { @@ -135,7 +135,7 @@ export default {
135 value: 0, 135 value: 0,
136 label: { 136 label: {
137 normal: { 137 normal: {
138 - formatter: '30.5%',//小数点后一位 138 + formatter: '50.5%',//小数点后一位
139 textStyle: { 139 textStyle: {
140 color: '#fe8b53', 140 color: '#fe8b53',
141 fontSize: 18, 141 fontSize: 18,
src/images/content/deviceBg.png 0 → 100644
View file @27890aa

3.76 KB
src/images/content/deviceBg.svg 0 → 100644
  View file @27890aa
  1 +<?xml version="1.0" encoding="utf-8"?>
  2 +<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
  3 +<svg version="1.1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
  4 + viewBox="0 0 305.6 159.4" style="enable-background:new 0 0 305.6 159.4;" xml:space="preserve">
  5 +<style type="text/css">
  6 + .st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#XMLID_32_);}
  7 + .st1{fill:#157ADB;}
  8 + .st2{fill-rule:evenodd;clip-rule:evenodd;fill:url(#XMLID_47_);}
  9 + .st3{fill-rule:evenodd;clip-rule:evenodd;fill:url(#XMLID_54_);}
  10 + .st4{fill-rule:evenodd;clip-rule:evenodd;fill:url(#XMLID_55_);}
  11 +</style>
  12 +<linearGradient id="XMLID_32_" gradientUnits="userSpaceOnUse" x1="2.625" y1="1.5" x2="303.625" y2="1.5">
  13 + <stop offset="0" style="stop-color:#157ADB;stop-opacity:0.2"/>
  14 + <stop offset="5.423151e-02" style="stop-color:#157ADB;stop-opacity:0.2915"/>
  15 + <stop offset="0.4743" style="stop-color:#157ADB"/>
  16 + <stop offset="0.9327" style="stop-color:#157ADB;stop-opacity:0.2987"/>
  17 + <stop offset="0.9972" style="stop-color:#157ADB;stop-opacity:0.2"/>
  18 +</linearGradient>
  19 +<path id="XMLID_28_" class="st0" d="M2.6,1h301v1H2.6V1z"/>
  20 +<path id="XMLID_27_" class="st1" d="M304.6,1v1h-1V1H304.6 M305.6,0h-3v3h3V0L305.6,0z"/>
  21 +<path id="XMLID_31_" class="st1" d="M2,1v1H1V1H2 M3,0H0v3h3V0L3,0z"/>
  22 +<linearGradient id="XMLID_47_" gradientUnits="userSpaceOnUse" x1="1.5" y1="157" x2="1.5" y2="2">
  23 + <stop offset="0.1198" style="stop-color:#157ADB;stop-opacity:0.2"/>
  24 + <stop offset="0.164" style="stop-color:#157ADB;stop-opacity:0.2915"/>
  25 + <stop offset="0.5068" style="stop-color:#157ADB"/>
  26 + <stop offset="0.8299" style="stop-color:#157ADB;stop-opacity:0.2987"/>
  27 + <stop offset="0.8753" style="stop-color:#157ADB;stop-opacity:0.2"/>
  28 +</linearGradient>
  29 +<path id="XMLID_34_" class="st2" d="M1,2h1v155H1V2z"/>
  30 +<path id="XMLID_69_" class="st1" d="M2,157.4v1H1v-1H2 M3,156.4H0v3h3V156.4L3,156.4z"/>
  31 +<linearGradient id="XMLID_54_" gradientUnits="userSpaceOnUse" x1="2.125" y1="157.875" x2="303.125" y2="157.875">
  32 + <stop offset="0" style="stop-color:#157ADB;stop-opacity:0.2"/>
  33 + <stop offset="5.423151e-02" style="stop-color:#157ADB;stop-opacity:0.2915"/>
  34 + <stop offset="0.4743" style="stop-color:#157ADB"/>
  35 + <stop offset="0.9327" style="stop-color:#157ADB;stop-opacity:0.2987"/>
  36 + <stop offset="0.9972" style="stop-color:#157ADB;stop-opacity:0.2"/>
  37 +</linearGradient>
  38 +<path id="XMLID_71_" class="st3" d="M2.1,157.4h301v1H2.1V157.4z"/>
  39 +<path id="XMLID_73_" class="st1" d="M304.6,157.4v1h-1v-1H304.6 M305.6,156.4h-3v3h3V156.4L305.6,156.4z"/>
  40 +<linearGradient id="XMLID_55_" gradientUnits="userSpaceOnUse" x1="304.1146" y1="157" x2="304.1146" y2="2">
  41 + <stop offset="0.1198" style="stop-color:#157ADB;stop-opacity:0.2"/>
  42 + <stop offset="0.164" style="stop-color:#157ADB;stop-opacity:0.2915"/>
  43 + <stop offset="0.5068" style="stop-color:#157ADB"/>
  44 + <stop offset="0.8299" style="stop-color:#157ADB;stop-opacity:0.2987"/>
  45 + <stop offset="0.8753" style="stop-color:#157ADB;stop-opacity:0.2"/>
  46 +</linearGradient>
  47 +<path id="XMLID_75_" class="st4" d="M303.6,2h1v155h-1V2z"/>
  48 +</svg>