From 27890aae7374e378032fcba3146b532536848cd7 Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Thu, 14 Mar 2019 11:09:08 +0800
Subject: [PATCH] 设备监控

---
 src/components/VEquipment.vue     | 117 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---
 src/components/base/PieEchart.vue |   2 +-
 src/images/content/deviceBg.png   | Bin 0 -> 3851 bytes
 src/images/content/deviceBg.svg   |  48 ++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 163 insertions(+), 4 deletions(-)
 create mode 100644 src/images/content/deviceBg.png
 create mode 100644 src/images/content/deviceBg.svg

diff --git a/src/components/VEquipment.vue b/src/components/VEquipment.vue
index d833ca6..680b0e3 100644
--- a/src/components/VEquipment.vue
+++ b/src/components/VEquipment.vue
@@ -1,14 +1,54 @@
 <template>
     <div class="theme-wrap">
         <card-title> <span>设备监控消息</span></card-title>
-        <div class="theme-body">
-
-        </div>
+        <ul class="theme-body" style="padding: 10px 20px 20px 0;">
+            <li class="equipment-section">
+                <div class="normal-status front">
+                    <p class="text-blue">23.4%</p>
+                    <p>PDA在线率</p>
+                </div>
+                <div class="rotate-status back">
+                    <p class="text-blue">100/300</p>
+                    <p>PDA/PDA在线</p>
+                </div>
+            </li>
+            <li class="equipment-section">
+                <div class="normal-status front">
+                    <p class="text-blue">23.4%</p>
+                    <p>地磁在线率</p>
+                </div>
+                <div class="rotate-status back">
+                    <p class="text-blue">100/300</p>
+                    <p>地磁/地磁</p>
+                </div>
+            </li>
+            <li class="equipment-section">
+                <div class="normal-status front">
+                    <p class="text-blue">23.4%</p>
+                    <p>道闸在线率</p>
+                </div>
+                <div class="rotate-status back">
+                    <p class="text-blue">100/300</p>
+                    <p>道闸/道闸在线</p>
+                </div>
+            </li>
+            <li class="equipment-section">
+                <div class="normal-status front">
+                    <p class="text-blue">23.4%</p>
+                    <p>诱导屏在线率</p>
+                </div>
+                <div class="rotate-status back">
+                    <p class="text-blue">100/300</p>
+                    <p>诱导屏/诱导屏在线</p>
+                </div>
+            </li>
+        </ul>
     </div>
 </template>
 
 <script>
 import CardTitle from './base/CardTitle'
+
 export default {
   name: 'VEquipment',
   components: {
@@ -34,6 +74,77 @@ export default {
     .theme-body {
         height: calc(100% - 30px);
         margin-left: 20px;
+
+    }
+    .equipment-section{
+        float: left;
+        width: 46%;
+        height: 46%;
+        margin: 2%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        background: url("../images/content/deviceBg.png") no-repeat;
+        background-size: 100% 100%;
+        transform-style:preserve-3d;
+        /*transition:1s;*/
+        animation:myfirst  6s  linear  infinite;
+        div{
+            width: 95%;
+            height: 95%;
+            position: absolute;
+            position:absolute;left:0;top:0;
+            backface-visibility:hidden;
+            padding: 15px 0 10px 0;
+            text-align: center;
+
+            p{
+                height: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+            .text-blue{
+                @include fontStyle(24px);
+                background-image: $fontBlue;
+            }
+            .text-orange{
+                @include fontStyle(24px);
+                background-image: $fontOrange;
+            }
+        }
+        .normal-status{
+
+        }
+        .rotate-status{
+            transform: rotateY(180deg);
+        }
+
+
+    }
+    /*.equipment-section:hover{*/
+        /*transform: rotateY(180deg);*/
+    /*}*/
+
+    @keyframes myfirst{
+        0%{
+            transform: rotateY(0)
+        }
+        30%{
+            transform: rotateY(0)
+        }
+
+        50%{
+            transform: rotateY(180deg)
+        }
+        80%{
+            transform: rotateY(180deg)
+        }
+
+        100% {
+               transform: rotateY(360deg)
+        }
     }
 
 
diff --git a/src/components/base/PieEchart.vue b/src/components/base/PieEchart.vue
index bfccf62..6d522f5 100644
--- a/src/components/base/PieEchart.vue
+++ b/src/components/base/PieEchart.vue
@@ -135,7 +135,7 @@ export default {
                 value: 0,
                 label: {
                   normal: {
-                    formatter:  '30.5%',//小数点后一位
+                    formatter:  '50.5%',//小数点后一位
                     textStyle: {
                       color: '#fe8b53',
                       fontSize: 18,
diff --git a/src/images/content/deviceBg.png b/src/images/content/deviceBg.png
new file mode 100644
index 0000000..751399b
Binary files /dev/null and b/src/images/content/deviceBg.png differ
diff --git a/src/images/content/deviceBg.svg b/src/images/content/deviceBg.svg
new file mode 100644
index 0000000..0568c3c
--- /dev/null
+++ b/src/images/content/deviceBg.svg
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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"
+	 viewBox="0 0 305.6 159.4" style="enable-background:new 0 0 305.6 159.4;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill-rule:evenodd;clip-rule:evenodd;fill:url(#XMLID_32_);}
+	.st1{fill:#157ADB;}
+	.st2{fill-rule:evenodd;clip-rule:evenodd;fill:url(#XMLID_47_);}
+	.st3{fill-rule:evenodd;clip-rule:evenodd;fill:url(#XMLID_54_);}
+	.st4{fill-rule:evenodd;clip-rule:evenodd;fill:url(#XMLID_55_);}
+</style>
+<linearGradient id="XMLID_32_" gradientUnits="userSpaceOnUse" x1="2.625" y1="1.5" x2="303.625" y2="1.5">
+	<stop  offset="0" style="stop-color:#157ADB;stop-opacity:0.2"/>
+	<stop  offset="5.423151e-02" style="stop-color:#157ADB;stop-opacity:0.2915"/>
+	<stop  offset="0.4743" style="stop-color:#157ADB"/>
+	<stop  offset="0.9327" style="stop-color:#157ADB;stop-opacity:0.2987"/>
+	<stop  offset="0.9972" style="stop-color:#157ADB;stop-opacity:0.2"/>
+</linearGradient>
+<path id="XMLID_28_" class="st0" d="M2.6,1h301v1H2.6V1z"/>
+<path id="XMLID_27_" class="st1" d="M304.6,1v1h-1V1H304.6 M305.6,0h-3v3h3V0L305.6,0z"/>
+<path id="XMLID_31_" class="st1" d="M2,1v1H1V1H2 M3,0H0v3h3V0L3,0z"/>
+<linearGradient id="XMLID_47_" gradientUnits="userSpaceOnUse" x1="1.5" y1="157" x2="1.5" y2="2">
+	<stop  offset="0.1198" style="stop-color:#157ADB;stop-opacity:0.2"/>
+	<stop  offset="0.164" style="stop-color:#157ADB;stop-opacity:0.2915"/>
+	<stop  offset="0.5068" style="stop-color:#157ADB"/>
+	<stop  offset="0.8299" style="stop-color:#157ADB;stop-opacity:0.2987"/>
+	<stop  offset="0.8753" style="stop-color:#157ADB;stop-opacity:0.2"/>
+</linearGradient>
+<path id="XMLID_34_" class="st2" d="M1,2h1v155H1V2z"/>
+<path id="XMLID_69_" class="st1" d="M2,157.4v1H1v-1H2 M3,156.4H0v3h3V156.4L3,156.4z"/>
+<linearGradient id="XMLID_54_" gradientUnits="userSpaceOnUse" x1="2.125" y1="157.875" x2="303.125" y2="157.875">
+	<stop  offset="0" style="stop-color:#157ADB;stop-opacity:0.2"/>
+	<stop  offset="5.423151e-02" style="stop-color:#157ADB;stop-opacity:0.2915"/>
+	<stop  offset="0.4743" style="stop-color:#157ADB"/>
+	<stop  offset="0.9327" style="stop-color:#157ADB;stop-opacity:0.2987"/>
+	<stop  offset="0.9972" style="stop-color:#157ADB;stop-opacity:0.2"/>
+</linearGradient>
+<path id="XMLID_71_" class="st3" d="M2.1,157.4h301v1H2.1V157.4z"/>
+<path id="XMLID_73_" class="st1" d="M304.6,157.4v1h-1v-1H304.6 M305.6,156.4h-3v3h3V156.4L305.6,156.4z"/>
+<linearGradient id="XMLID_55_" gradientUnits="userSpaceOnUse" x1="304.1146" y1="157" x2="304.1146" y2="2">
+	<stop  offset="0.1198" style="stop-color:#157ADB;stop-opacity:0.2"/>
+	<stop  offset="0.164" style="stop-color:#157ADB;stop-opacity:0.2915"/>
+	<stop  offset="0.5068" style="stop-color:#157ADB"/>
+	<stop  offset="0.8299" style="stop-color:#157ADB;stop-opacity:0.2987"/>
+	<stop  offset="0.8753" style="stop-color:#157ADB;stop-opacity:0.2"/>
+</linearGradient>
+<path id="XMLID_75_" class="st4" d="M303.6,2h1v155h-1V2z"/>
+</svg>
--
libgit2 0.21.4