From 4eeaec1eddd5ef2be4b79423154fa2dce81d5566 Mon Sep 17 00:00:00 2001
From: 黄何裕 <1053952480@qq.com>
Date: 星期五, 26 七月 2024 15:28:09 +0800
Subject: [PATCH] 大屏重构

---
 src/views/screen/components/screen-map-three/experience/camera.js       |    2 
 src/views/screen/components/screen-examine/components/examine-chart.vue |    2 
 src/assets/images/screen/bg3.png                                        |    0 
 src/views/screen/components/wrapper-title/index.vue                     |    4 
 src/assets/images/screen/headerBg.png                                   |    0 
 src/views/screen/newPage/index.vue                                      |  333 +++++++++++++++++++++++++
 src/views/screen/components/screen-wrapper/index.vue                    |   20 
 src/views/screen/components/screen-map/index.vue                        |    2 
 src/views/screen/index.vue                                              |    8 
 src/views/screen/components/select-item/index.vue                       |   29 -
 src/views/screen/components/screen-table/index.vue                      |   95 +++---
 src/views/screen/components/screen-car/index.vue                        |    6 
 src/views/screen/components/screen-examine/index.vue                    |  109 +++++--
 src/views/screen/components/screen-face/index.vue                       |    6 
 /dev/null                                                               |    0 
 src/views/screen/components/screen-video/index.vue                      |    6 
 src/assets/images/screen/lxicon.png                                     |    0 
 src/views/screen/components/screen-data/index.vue                       |  111 ++++---
 src/assets/images/screen/cardBg.png                                     |    0 
 src/views/screen/components/screen-map-three/index.vue                  |   13 
 src/views/screen/components/screen-examine/components/examine-hola.vue  |    4 
 src/assets/images/screen/bigBg.png                                      |    0 
 src/assets/images/screen/cardBg1.png                                    |    0 
 23 files changed, 575 insertions(+), 175 deletions(-)

diff --git a/src/assets/images/pay.png b/src/assets/images/pay.png
deleted file mode 100644
index bb8b967..0000000
--- a/src/assets/images/pay.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/images/screen/bg3.png b/src/assets/images/screen/bg3.png
new file mode 100644
index 0000000..37d3c0c
--- /dev/null
+++ b/src/assets/images/screen/bg3.png
Binary files differ
diff --git a/src/assets/images/screen/bigBg.png b/src/assets/images/screen/bigBg.png
new file mode 100644
index 0000000..369e8bb
--- /dev/null
+++ b/src/assets/images/screen/bigBg.png
Binary files differ
diff --git a/src/assets/images/screen/cardBg.png b/src/assets/images/screen/cardBg.png
new file mode 100644
index 0000000..26f994b
--- /dev/null
+++ b/src/assets/images/screen/cardBg.png
Binary files differ
diff --git a/src/assets/images/screen/cardBg1.png b/src/assets/images/screen/cardBg1.png
new file mode 100644
index 0000000..abb6545
--- /dev/null
+++ b/src/assets/images/screen/cardBg1.png
Binary files differ
diff --git a/src/assets/images/screen/headerBg.png b/src/assets/images/screen/headerBg.png
new file mode 100644
index 0000000..6cc8cd9
--- /dev/null
+++ b/src/assets/images/screen/headerBg.png
Binary files differ
diff --git a/src/assets/images/screen/lxicon.png b/src/assets/images/screen/lxicon.png
new file mode 100644
index 0000000..eb9470d
--- /dev/null
+++ b/src/assets/images/screen/lxicon.png
Binary files differ
diff --git a/src/views/screen/components/screen-car/index.vue b/src/views/screen/components/screen-car/index.vue
index 2ae312c..5a3f04e 100644
--- a/src/views/screen/components/screen-car/index.vue
+++ b/src/views/screen/components/screen-car/index.vue
@@ -82,8 +82,10 @@
 
 .car-content {
   flex: 1;
-  background: rgba(67, 102, 155, 0.3);
-  border: 1px solid rgba(47, 91, 157, 0.8);
+  background:  url('../../../../assets/images/screen/cardBg.png');
+  background-size: cover !important;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
 
   .plane {
     margin-bottom: 10px;
diff --git a/src/views/screen/components/screen-data/index.vue b/src/views/screen/components/screen-data/index.vue
index 86a6679..45dd740 100644
--- a/src/views/screen/components/screen-data/index.vue
+++ b/src/views/screen/components/screen-data/index.vue
@@ -1,37 +1,48 @@
 <template>
   <div class="data-container">
-    <wrapper-title :title="'宸ュ崟鏁版嵁'" :path="'/work-order-center/maintenance/work-order/work-order'"></wrapper-title>
+    <!-- <wrapper-title
+      :title="'宸ュ崟鏁版嵁'"
+      :path="'/work-order-center/maintenance/work-order/work-order'"
+    ></wrapper-title> -->
 
     <div class="data-content">
       <div class="data-panel">
         <div class="panel-title">
           <div class="icon">
-            <img src="@/assets/icons/arrow.png" alt="">
+            <img src="@/assets/icons/arrow.png" alt="" />
           </div>
-          <div class="title">
-            鏁翠綋宸ュ崟鏁�
-          </div>
+          <div class="title">鏁翠綋宸ュ崟鏁�</div>
         </div>
         <div class="panel-container">
           <div class="panel-item">
-            <data-hola :holaTitle="`宸ュ崟鎬绘暟`" :centerValue="3000" :holaColor="`#4ea8ff`"></data-hola>
+            <data-hola
+              :holaTitle="`宸ュ崟鎬绘暟`"
+              :centerValue="3000"
+              :holaColor="`#4ea8ff`"
+            ></data-hola>
           </div>
           <div class="panel-item">
-            <data-hola :holaTitle="`宸插鐞嗗伐鍗曟暟`" :centerValue="1600" :holaColor="`#5dec24`"></data-hola>
+            <data-hola
+              :holaTitle="`宸插鐞嗗伐鍗曟暟`"
+              :centerValue="1600"
+              :holaColor="`#5dec24`"
+            ></data-hola>
           </div>
           <div class="panel-item">
-            <data-hola :holaTitle="`鏈鐞嗗伐鍗曟暟`" :centerValue="200" :holaColor="`#dfc639`"></data-hola>
+            <data-hola
+              :holaTitle="`鏈鐞嗗伐鍗曟暟`"
+              :centerValue="200"
+              :holaColor="`#dfc639`"
+            ></data-hola>
           </div>
         </div>
       </div>
       <div class="data-panel">
         <div class="panel-title">
           <div class="icon">
-            <img src="@/assets/icons/arrow.png" alt="">
+            <img src="@/assets/icons/arrow.png" alt="" />
           </div>
-          <div class="title">
-            鍒嗗尯宸ュ崟鏁�
-          </div>
+          <div class="title">鍒嗗尯宸ュ崟鏁�</div>
         </div>
         <div class="echart-container">
           <div id="barChart" ref="barChart"></div>
@@ -42,83 +53,90 @@
 </template>
 
 <script>
-import * as echarts from 'echarts';
-import WrapperTitle from '../wrapper-title/index';
-import DataHola from './components/data-hola';
+import * as echarts from "echarts";
+import WrapperTitle from "../wrapper-title/index";
+import DataHola from "./components/data-hola";
 let chart = null;
 export default {
-  name: 'ScreenData',
+  name: "ScreenData",
   components: {
     WrapperTitle,
-    DataHola
+    DataHola,
   },
   data() {
     return {
       dataList: {
-        name: ['瀵岄『鍘�', '鑽e幙', '楂樻柊鍖�', '鑷祦浜曞尯', '璐′簳鍖�', '澶у畨鍖�', '娌挎哗鍖�'],
+        name: [
+          "瀵岄『鍘�",
+          "鑽e幙",
+          "楂樻柊鍖�",
+          "鑷祦浜曞尯",
+          "璐′簳鍖�",
+          "澶у畨鍖�",
+          "娌挎哗鍖�",
+        ],
         data1: [210, 310, 40, 102, 111, 201, 123],
         data2: [20, 30, 10, 10, 11, 21, 5],
       },
-    }
+    };
   },
   methods: {
     initEchart() {
       const option = {
         grid: {
-          top: '10%',
+          top: "10%",
           right: 0,
-          bottom: '17%',
+          bottom: "17%",
         },
         legend: {
           right: 0,
           textStyle: {
-            color: '#447ED6'
-          }
+            color: "#fff",
+          },
         },
         tooltip: {},
         xAxis: {
-          type: 'category',
+          type: "category",
           axisLabel: {
-            color: '#447ED6',
-            rotate: 45
+            color: "#fff",
+            rotate: 45,
           },
-          data: this.dataList.name
+          data: this.dataList.name,
         },
         yAxis: {
           axisLabel: {
-            color: '#4D76B0',
+            color: "#fff",
           },
         },
         series: [
           {
-            type: 'bar',
-            name: '宸插鐞嗗伐鍗曟暟',
-            stack: 'total',
+            type: "bar",
+            name: "宸插鐞嗗伐鍗曟暟",
+            stack: "total",
             itemStyle: {
-              color: '#4ea8ff'
+              color: "#4ea8ff",
             },
-            data: this.dataList.data1
+            data: this.dataList.data1,
           },
           {
-            type: 'bar',
-            name: '鏈鐞嗗伐鍗曟暟',
-            stack: 'total',
+            type: "bar",
+            name: "鏈鐞嗗伐鍗曟暟",
+            stack: "total",
             itemStyle: {
-              color: '#dfc639'
+              color: "#dfc639",
             },
-            data: this.dataList.data2
+            data: this.dataList.data2,
           },
-        ]
-      }
+        ],
+      };
       chart.setOption(option, true);
-
-    }
+    },
   },
   mounted() {
     chart = echarts.init(this.$refs.barChart);
     this.initEchart();
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -130,10 +148,7 @@
 
   .data-content {
     flex: 1;
-    background: rgba(67, 102, 155, 0.3);
-    border: 1px solid rgba(47, 91, 157, 0.8);
     padding: 10px;
-    box-sizing: border-box;
   }
 }
 
@@ -174,4 +189,4 @@
     height: 110px;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/screen/components/screen-examine/components/examine-chart.vue b/src/views/screen/components/screen-examine/components/examine-chart.vue
index d12f01e..c8b3bba 100644
--- a/src/views/screen/components/screen-examine/components/examine-chart.vue
+++ b/src/views/screen/components/screen-examine/components/examine-chart.vue
@@ -2,7 +2,7 @@
   <div class="chart-container">
     <div class="rank-chart">
       <div class="hola-item" v-for="item in dataList" :key="item.id">
-        <examine-hola :startColor="'#02C77E'" :endColor="'#017770'" :centerValue="item.value" :bottomTitle="item.name"
+        <examine-hola :startColor="'#4ea8ff'" :endColor="'#178fff'" :centerValue="item.value" :bottomTitle="item.name"
           :routerPath="item.routerUrl"></examine-hola>
       </div>
     </div>
diff --git a/src/views/screen/components/screen-examine/components/examine-hola.vue b/src/views/screen/components/screen-examine/components/examine-hola.vue
index 83a0396..38e0308 100644
--- a/src/views/screen/components/screen-examine/components/examine-hola.vue
+++ b/src/views/screen/components/screen-examine/components/examine-hola.vue
@@ -28,8 +28,8 @@
             clip: false, // 鏄惁瑁佸壀瓒呭嚭閮ㄥ垎
             // 璁剧疆鑳屾櫙鍦嗙幆鏍峰紡
             lineStyle: {
-              width: 6, // 鍦嗙幆瀹藉害
-              color: [[1, '#002865']] // 鍦嗙幆鑳屾櫙鑹�
+              width: 10, // 鍦嗙幆瀹藉害
+              color: [[1, '#ecf6ff']] // 鍦嗙幆鑳屾櫙鑹�
             }
           },
           // 浠〃鐩樻寚閽�
diff --git a/src/views/screen/components/screen-examine/index.vue b/src/views/screen/components/screen-examine/index.vue
index 8bdd44f..9186007 100644
--- a/src/views/screen/components/screen-examine/index.vue
+++ b/src/views/screen/components/screen-examine/index.vue
@@ -1,38 +1,78 @@
 <template>
   <div class="examine-container">
-    <wrapper-title :title="'鑰冩牳鏁版嵁'" :path="'/examine/default'"></wrapper-title>
+    <wrapper-title
+      :title="'鑰冩牳鏁版嵁'"
+      :path="'/examine/default'"
+    ></wrapper-title>
     <div class="examine-content">
-
       <div class="examine-wrapper">
         <div class="select-container">
-          <div class="select-item" :class="{'active-item' : activeIndex === 0}" @click="clickItem(0)">
+          <div
+            class="select-item"
+            :class="{ 'active-item': activeIndex === 0 }"
+            @click="clickItem(0)"
+          >
             <div class="icon-container">
-              <svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1"
-                xmlns="http://www.w3.org/2000/svg">
-                <path fill="#ffffff"
-                  d="M772.016477 696.022177c-39.228443-39.229466-85.763292-68.49807-136.530536-86.546122 26.774807-13.283538 51.500954-30.976502 73.254398-52.729945 52.55189-52.550867 81.494059-122.422214 81.494059-196.74085s-28.941146-144.189983-81.494059-196.741873c-52.550867-52.550867-122.422214-81.493036-196.74085-81.493036s-144.189983 28.942169-196.741873 81.493036c-52.55189 52.550867-81.494059 122.422214-81.494059 196.741873s28.941146 144.189983 81.494059 196.74085c21.753443 21.753443 46.480614 39.446407 73.256444 52.729945-50.76929 18.049075-97.303116 47.316655-136.532583 86.546122-66.188468 66.187445-104.009865 153.166425-107.422591 246.208495l48.730864 0c3.387144-80.028685 36.140105-154.783249 93.129051-211.770148 55.771211-55.771211 128.557958-88.326675 206.650547-92.867084 6.27389 0.418532 12.582573 0.645706 18.929118 0.645706 6.345522 0 12.656251-0.227174 18.929118-0.645706 78.091566 4.54041 150.880359 37.095873 206.650547 92.867084 56.987922 56.986899 89.741907 131.741463 93.129051 211.770148l48.730864 0C876.027365 849.188602 838.204945 762.209622 772.016477 696.022177zM282.466792 360.004237c0-126.564557 102.96814-229.53372 229.53372-229.53372 126.564557 0 229.53372 102.969163 229.53372 229.53372 0 120.304993-93.040023 219.280192-210.942293 228.77545-6.170536-0.304945-12.369725-0.460488-18.591427-0.460488-6.222725 0-12.420891 0.155543-18.59245 0.460488C375.505791 579.284429 282.466792 480.30923 282.466792 360.004237z" />
+              <svg
+                class="icon"
+                width="64px"
+                height="64.00px"
+                viewBox="0 0 1024 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill="#ffffff"
+                  d="M772.016477 696.022177c-39.228443-39.229466-85.763292-68.49807-136.530536-86.546122 26.774807-13.283538 51.500954-30.976502 73.254398-52.729945 52.55189-52.550867 81.494059-122.422214 81.494059-196.74085s-28.941146-144.189983-81.494059-196.741873c-52.550867-52.550867-122.422214-81.493036-196.74085-81.493036s-144.189983 28.942169-196.741873 81.493036c-52.55189 52.550867-81.494059 122.422214-81.494059 196.741873s28.941146 144.189983 81.494059 196.74085c21.753443 21.753443 46.480614 39.446407 73.256444 52.729945-50.76929 18.049075-97.303116 47.316655-136.532583 86.546122-66.188468 66.187445-104.009865 153.166425-107.422591 246.208495l48.730864 0c3.387144-80.028685 36.140105-154.783249 93.129051-211.770148 55.771211-55.771211 128.557958-88.326675 206.650547-92.867084 6.27389 0.418532 12.582573 0.645706 18.929118 0.645706 6.345522 0 12.656251-0.227174 18.929118-0.645706 78.091566 4.54041 150.880359 37.095873 206.650547 92.867084 56.987922 56.986899 89.741907 131.741463 93.129051 211.770148l48.730864 0C876.027365 849.188602 838.204945 762.209622 772.016477 696.022177zM282.466792 360.004237c0-126.564557 102.96814-229.53372 229.53372-229.53372 126.564557 0 229.53372 102.969163 229.53372 229.53372 0 120.304993-93.040023 219.280192-210.942293 228.77545-6.170536-0.304945-12.369725-0.460488-18.591427-0.460488-6.222725 0-12.420891 0.155543-18.59245 0.460488C375.505791 579.284429 282.466792 480.30923 282.466792 360.004237z"
+                />
               </svg>
             </div>
             <div class="label">浜鸿劯鑰冩牳</div>
           </div>
-          <div class="select-item" :class="{'active-item' : activeIndex === 1}" @click="clickItem(1)">
+          <div
+            class="select-item"
+            :class="{ 'active-item': activeIndex === 1 }"
+            @click="clickItem(1)"
+          >
             <div class="icon-container">
-              <svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1"
-                xmlns="http://www.w3.org/2000/svg">
-                <path fill="#ffffff"
-                  d="M845.590658 851.92083c-27.77253 0-49.455365-11.378142-62.705134-32.905434-10.428513-16.942881-15.715937-40.441061-15.715937-69.841671l0-42.915415L285.710161 706.258309l0 42.915415c0 29.153994-5.809309 52.780087-17.266245 70.223365-13.976316 21.277606-36.027541 32.523741-63.770396 32.523741-51.880601 0-84.10963-39.370683-84.10963-102.747105l0-42.915415L73.560366 706.258309c-16.765849 0-29.899984-13.148461-29.899984-29.93273L43.660382 501.529531c0-31.397081 12.18553-60.870346 34.311457-82.992179 22.127973-22.122857 51.610448-34.305317 83.017762-34.305317l0.741897 0 44.89142-179.101097c15.750729-63.952544 77.541027-112.224967 143.713123-112.224967l349.591073 0c66.172095 0 127.962393 48.272423 143.728472 112.286366l44.875047 179.039699 0.74292 0c31.407314 0 60.890812 12.183484 83.017762 34.305317 22.12695 22.121833 34.31248 51.595099 34.31248 82.992179l0 174.795025c0 16.784268-13.134135 29.93273-29.899984 29.93273l-50.664913 0 0 42.915415C926.038898 814.470893 896.717082 851.92083 845.590658 851.92083zM255.010975 675.5581l542.856775 0 0 73.614601c0 72.04792 34.670637 72.04792 47.722908 72.04792 17.308201 0 29.66053-6.082532 37.762045-18.59552 7.841595-12.109806 11.987009-30.592762 11.987009-53.452399l0-73.614601 80.563874 0 0.001023-174.028569c0-47.750537-38.863123-86.59831-86.631056-86.59831l-24.696472 0L813.863049 212.594933c-12.502755-50.759057-61.477166-88.989777-113.935935-88.989777L350.33604 123.605156c-52.458769 0-101.43318 38.23072-113.919563 88.928379l-50.730405 202.397686L160.990624 414.931221c-47.768957 0-86.631056 38.847773-86.631056 86.59831l0 174.028569 76.902484 0 0 73.614601c0 26.907836 6.939039 72.04792 53.410444 72.04792 33.401738 0 50.337455-24.240077 50.337455-72.04792L255.009951 675.5581zM847.566662 669.813259c-56.922431 0-103.233176-46.292326-103.233176-103.195314 0-56.901964 46.310745-103.195314 103.233176-103.195314 56.923454 0 103.234199 46.293349 103.234199 103.195314C950.799838 623.520933 904.490116 669.813259 847.566662 669.813259zM847.566662 494.121817c-39.994899 0-72.53399 32.521694-72.53399 72.496128 0 39.97341 32.53909 72.496128 72.53399 72.496128 39.995923 0 72.535013-32.521694 72.535013-72.496128C920.100652 526.643512 887.562585 494.121817 847.566662 494.121817zM198.5081 669.813259c-56.922431 0-103.233176-46.292326-103.233176-103.195314 0-56.901964 46.310745-103.195314 103.233176-103.195314 56.924477 0 103.236246 46.293349 103.236246 103.195314C301.744345 623.520933 255.432577 669.813259 198.5081 669.813259zM198.5081 494.121817c-39.994899 0-72.53399 32.521694-72.53399 72.496128 0 39.97341 32.53909 72.496128 72.53399 72.496128 39.996946 0 72.53706-32.521694 72.53706-72.496128C271.045159 526.643512 238.505046 494.121817 198.5081 494.121817zM815.368332 389.497968 218.155579 389.497968l53.717436-215.46019c3.551896-12.935614 20.717857-26.114774 34.012651-26.114774l421.751556 0c13.295817 0 30.461779 13.180184 34.012651 26.115797l0.092098 0.350994L815.368332 389.497968zM257.447467 358.798782l518.628978 0-43.823088-175.785585c-1.12973-1.475608-3.938706-3.681856-5.594415-4.39203L306.863946 178.621167c-1.656733 0.709151-4.464685 2.916423-5.594415 4.39203L257.447467 358.798782z" />
+              <svg
+                class="icon"
+                width="64px"
+                height="64.00px"
+                viewBox="0 0 1024 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill="#ffffff"
+                  d="M845.590658 851.92083c-27.77253 0-49.455365-11.378142-62.705134-32.905434-10.428513-16.942881-15.715937-40.441061-15.715937-69.841671l0-42.915415L285.710161 706.258309l0 42.915415c0 29.153994-5.809309 52.780087-17.266245 70.223365-13.976316 21.277606-36.027541 32.523741-63.770396 32.523741-51.880601 0-84.10963-39.370683-84.10963-102.747105l0-42.915415L73.560366 706.258309c-16.765849 0-29.899984-13.148461-29.899984-29.93273L43.660382 501.529531c0-31.397081 12.18553-60.870346 34.311457-82.992179 22.127973-22.122857 51.610448-34.305317 83.017762-34.305317l0.741897 0 44.89142-179.101097c15.750729-63.952544 77.541027-112.224967 143.713123-112.224967l349.591073 0c66.172095 0 127.962393 48.272423 143.728472 112.286366l44.875047 179.039699 0.74292 0c31.407314 0 60.890812 12.183484 83.017762 34.305317 22.12695 22.121833 34.31248 51.595099 34.31248 82.992179l0 174.795025c0 16.784268-13.134135 29.93273-29.899984 29.93273l-50.664913 0 0 42.915415C926.038898 814.470893 896.717082 851.92083 845.590658 851.92083zM255.010975 675.5581l542.856775 0 0 73.614601c0 72.04792 34.670637 72.04792 47.722908 72.04792 17.308201 0 29.66053-6.082532 37.762045-18.59552 7.841595-12.109806 11.987009-30.592762 11.987009-53.452399l0-73.614601 80.563874 0 0.001023-174.028569c0-47.750537-38.863123-86.59831-86.631056-86.59831l-24.696472 0L813.863049 212.594933c-12.502755-50.759057-61.477166-88.989777-113.935935-88.989777L350.33604 123.605156c-52.458769 0-101.43318 38.23072-113.919563 88.928379l-50.730405 202.397686L160.990624 414.931221c-47.768957 0-86.631056 38.847773-86.631056 86.59831l0 174.028569 76.902484 0 0 73.614601c0 26.907836 6.939039 72.04792 53.410444 72.04792 33.401738 0 50.337455-24.240077 50.337455-72.04792L255.009951 675.5581zM847.566662 669.813259c-56.922431 0-103.233176-46.292326-103.233176-103.195314 0-56.901964 46.310745-103.195314 103.233176-103.195314 56.923454 0 103.234199 46.293349 103.234199 103.195314C950.799838 623.520933 904.490116 669.813259 847.566662 669.813259zM847.566662 494.121817c-39.994899 0-72.53399 32.521694-72.53399 72.496128 0 39.97341 32.53909 72.496128 72.53399 72.496128 39.995923 0 72.535013-32.521694 72.535013-72.496128C920.100652 526.643512 887.562585 494.121817 847.566662 494.121817zM198.5081 669.813259c-56.922431 0-103.233176-46.292326-103.233176-103.195314 0-56.901964 46.310745-103.195314 103.233176-103.195314 56.924477 0 103.236246 46.293349 103.236246 103.195314C301.744345 623.520933 255.432577 669.813259 198.5081 669.813259zM198.5081 494.121817c-39.994899 0-72.53399 32.521694-72.53399 72.496128 0 39.97341 32.53909 72.496128 72.53399 72.496128 39.996946 0 72.53706-32.521694 72.53706-72.496128C271.045159 526.643512 238.505046 494.121817 198.5081 494.121817zM815.368332 389.497968 218.155579 389.497968l53.717436-215.46019c3.551896-12.935614 20.717857-26.114774 34.012651-26.114774l421.751556 0c13.295817 0 30.461779 13.180184 34.012651 26.115797l0.092098 0.350994L815.368332 389.497968zM257.447467 358.798782l518.628978 0-43.823088-175.785585c-1.12973-1.475608-3.938706-3.681856-5.594415-4.39203L306.863946 178.621167c-1.656733 0.709151-4.464685 2.916423-5.594415 4.39203L257.447467 358.798782z"
+                />
               </svg>
             </div>
             <div class="label">杞﹁締鑰冩牳</div>
           </div>
-          <div class="select-item" :class="{'active-item' : activeIndex === 2}" @click="clickItem(2)">
+          <div
+            class="select-item"
+            :class="{ 'active-item': activeIndex === 2 }"
+            @click="clickItem(2)"
+          >
             <div class="icon-container">
-              <svg class="icon" width="64px" height="64.00px" viewBox="0 0 1024 1024" version="1.1"
-                xmlns="http://www.w3.org/2000/svg">
-                <path fill="#ffffff"
-                  d="M49.770667 199.104H658.773333c19.925333 5.674667 33.493333 14.336 42.24 25.024 8.448 10.24 11.157333 20.117333 11.157334 25.066667v214.250666l262.357333-168.682666v414.826666l-262.357333-168.661333v148.096a24.896 24.896 0 1 0 49.770666 0v-62.442667l262.378667 174.186667V203.605333L761.92 372.266667v-123.093334c0-15.488-5.696-36.266667-22.464-56.661333-16-19.477333-39.573333-34.133333-71.104-42.368L665.258667 149.333333H0v608.96l0.768 3.029334c2.986667 11.669333 9.173333 27.989333 19.690667 44.629333 18.730667 29.653333 44.906667 48.725333 79.146666 49.066667h637.44a24.896 24.896 0 0 0 0-49.770667H99.84c-14.4-0.149333-26.752-9.130667-37.333333-25.877333a120.213333 120.213333 0 0 1-12.757334-27.690667V199.104z" />
-                <path fill="#ffffff"
-                  d="M205.909333 324.48a46.506667 46.506667 0 1 1-92.992-0.042667 46.506667 46.506667 0 0 1 92.992 0.021334z" />
+              <svg
+                class="icon"
+                width="64px"
+                height="64.00px"
+                viewBox="0 0 1024 1024"
+                version="1.1"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill="#ffffff"
+                  d="M49.770667 199.104H658.773333c19.925333 5.674667 33.493333 14.336 42.24 25.024 8.448 10.24 11.157333 20.117333 11.157334 25.066667v214.250666l262.357333-168.682666v414.826666l-262.357333-168.661333v148.096a24.896 24.896 0 1 0 49.770666 0v-62.442667l262.378667 174.186667V203.605333L761.92 372.266667v-123.093334c0-15.488-5.696-36.266667-22.464-56.661333-16-19.477333-39.573333-34.133333-71.104-42.368L665.258667 149.333333H0v608.96l0.768 3.029334c2.986667 11.669333 9.173333 27.989333 19.690667 44.629333 18.730667 29.653333 44.906667 48.725333 79.146666 49.066667h637.44a24.896 24.896 0 0 0 0-49.770667H99.84c-14.4-0.149333-26.752-9.130667-37.333333-25.877333a120.213333 120.213333 0 0 1-12.757334-27.690667V199.104z"
+                />
+                <path
+                  fill="#ffffff"
+                  d="M205.909333 324.48a46.506667 46.506667 0 1 1-92.992-0.042667 46.506667 46.506667 0 0 1 92.992 0.021334z"
+                />
               </svg>
             </div>
             <div class="label">瑙嗛鑰冩牳</div>
@@ -46,28 +86,27 @@
 </template>
 
 <script>
-import WrapperTitle from '../wrapper-title/index';
-import ExamineChart from './components/examine-chart';
-import ExamineTable from './components/examine-table';
+import WrapperTitle from "../wrapper-title/index";
+import ExamineChart from "./components/examine-chart";
+import ExamineTable from "./components/examine-table";
 export default {
-  name: 'ScreenExamine',
+  name: "ScreenExamine",
   components: {
     WrapperTitle,
     ExamineChart,
-    ExamineTable
+    ExamineTable,
   },
   data() {
     return {
-      activeIndex: 0
-    }
+      activeIndex: 0,
+    };
   },
   methods: {
     clickItem(index) {
       this.activeIndex = index;
-    }
-  }
-}
-
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
@@ -76,7 +115,7 @@
   width: 100%;
   display: flex;
   flex-direction: column;
-  margin-bottom: 20px
+  margin-bottom: 20px;
 }
 
 .examine-content {
@@ -94,8 +133,10 @@
 }
 
 .wrapper-item {
-  background: rgba(67, 102, 155, 0.3);
-  border: 1px solid rgba(47, 91, 157, 0.8);
+  background: url("../../../../assets/images/screen/cardBg.png");
+  background-size: cover !important;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
   margin-bottom: 20px;
 
   &:last-of-type {
@@ -127,4 +168,4 @@
     background-color: rgba(38, 86, 158, 0.6);
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/screen/components/screen-face/index.vue b/src/views/screen/components/screen-face/index.vue
index 488816b..e1d0982 100644
--- a/src/views/screen/components/screen-face/index.vue
+++ b/src/views/screen/components/screen-face/index.vue
@@ -80,8 +80,10 @@
 
 .face-content {
   flex: 1;
-  background: rgba(67, 102, 155, 0.3);
-  border: 1px solid rgba(47, 91, 157, 0.8);
+  background: url("../../../../assets/images/screen/cardBg.png");
+  background-size: cover !important;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
 
   .plane {
     margin-bottom: 10px;
diff --git a/src/views/screen/components/screen-map-three/experience/camera.js b/src/views/screen/components/screen-map-three/experience/camera.js
index 99dbf26..998674b 100644
--- a/src/views/screen/components/screen-map-three/experience/camera.js
+++ b/src/views/screen/components/screen-map-three/experience/camera.js
@@ -16,7 +16,7 @@
     // 璁剧疆閫忚鐩告満
     setInstance() {
         this.instance = new PerspectiveCamera(45, this.sizes.width / this.sizes.height, 0.1, 200);
-        this.instance.position.set(0, 37, 37);
+        this.instance.position.set(0, 25,25);
         this.scene.add(this.instance);
         // const help = new CameraHelper(this.instance);
         // this.scene.add(help);
diff --git a/src/views/screen/components/screen-map-three/index.vue b/src/views/screen/components/screen-map-three/index.vue
index 806fa3e..f500e99 100644
--- a/src/views/screen/components/screen-map-three/index.vue
+++ b/src/views/screen/components/screen-map-three/index.vue
@@ -37,12 +37,15 @@
 <style lang="scss" scoped>
 .map-container {
   width: 100%;
-  height: 100%;
-  position: absolute;
-  left: 0;
-  top: 0;
+  height:100%;
+  // position: absolute;
+  // left: 25%;
+  // top: 65px;
   z-index: 0;
-
+  // background: url("../../../../assets/images/screen/cardBg.png");
+  // background-size: cover !important;
+  // background-repeat: no-repeat !important;
+  // background-position: center center !important;
   .world {
     width: 100%;
     height: 100%;
diff --git a/src/views/screen/components/screen-map/index.vue b/src/views/screen/components/screen-map/index.vue
index 821c160..5576e0c 100644
--- a/src/views/screen/components/screen-map/index.vue
+++ b/src/views/screen/components/screen-map/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="map-container">
-    <wrapper-title :title="'鍖哄煙鍦板浘'"></wrapper-title>
+    <!-- <wrapper-title :title="'鍖哄煙鍦板浘'"></wrapper-title> -->
     <div class="map-content">
       <div ref="map" class="map-style"></div>
     </div>
diff --git a/src/views/screen/components/screen-table/index.vue b/src/views/screen/components/screen-table/index.vue
index 01e715d..2cf0b6d 100644
--- a/src/views/screen/components/screen-table/index.vue
+++ b/src/views/screen/components/screen-table/index.vue
@@ -1,13 +1,22 @@
 <template>
   <div class="table-container">
-    <wrapper-title :title="'鍖哄煙璁惧鏁版嵁'" :path="'/monitorServe/recovery'"></wrapper-title>
+    <!-- <wrapper-title
+      :title="'鍖哄煙璁惧鏁版嵁'"
+      :path="'/monitorServe/recovery'"
+    ></wrapper-title> -->
     <div class="table-content" ref="tabContent">
       <div class="table-wrapper">
-        <el-table :data="tableData" border :height="tableHeight" :max-height="tableHeight" class="rank-table">
+        <el-table
+          :data="tableData"
+          border
+          :height="tableHeight"
+          :max-height="tableHeight"
+          class="rank-table"
+        >
           <el-table-column prop="name" label="鍦板尯" align="center" width="100">
           </el-table-column>
 
-          <el-table-column label="浜鸿劯璁惧姝e父鐜�" align="center">
+          <el-table-column label="浜鸿劯璁惧" align="center">
             <template slot-scope="scope">
               <el-tooltip placement="top">
                 <div slot="content">
@@ -25,7 +34,7 @@
             </template>
           </el-table-column>
 
-          <el-table-column label="杞﹁締璁惧姝e父鐜�" align="center">
+          <el-table-column label="杞﹁締璁惧" align="center">
             <template slot-scope="scope">
               <el-tooltip placement="top">
                 <div slot="content">
@@ -43,7 +52,7 @@
             </template>
           </el-table-column>
 
-          <el-table-column label="瑙嗛璁惧姝e父鐜�" align="center">
+          <el-table-column label="瑙嗛璁惧" align="center">
             <template slot-scope="scope">
               <el-tooltip placement="top">
                 <div slot="content">
@@ -63,67 +72,66 @@
         </el-table>
       </div>
     </div>
-
   </div>
 </template>
 
 <script>
-import WrapperTitle from '../wrapper-title/index';
+import WrapperTitle from "../wrapper-title/index";
 
 export default {
-  name: 'ScreenTable',
+  name: "ScreenTable",
 
   components: {
-    WrapperTitle
+    WrapperTitle,
   },
   data() {
     return {
       tableHeight: 40,
       tableData: [
         {
-          name: '瀵岄『鍘�',
+          name: "瀵岄『鍘�",
           data1: 1123,
           data2: 1123,
-          data3: 1123
+          data3: 1123,
         },
         {
-          name: '鑽e幙',
+          name: "鑽e幙",
           data1: 1123,
           data2: 1123,
-          data3: 1123
+          data3: 1123,
         },
         {
-          name: '楂樻柊鍖�',
+          name: "楂樻柊鍖�",
           data1: 1123,
           data2: 1123,
-          data3: 1123
+          data3: 1123,
         },
         {
-          name: '鑷祦浜曞尯',
+          name: "鑷祦浜曞尯",
           data1: 1123,
           data2: 1123,
-          data3: 1123
+          data3: 1123,
         },
         {
-          name: '璐′簳鍖�',
+          name: "璐′簳鍖�",
           data1: 1123,
           data2: 1123,
-          data3: 1123
+          data3: 1123,
         },
         {
-          name: '澶у畨鍖�',
+          name: "澶у畨鍖�",
           data1: 1123,
           data2: 1123,
-          data3: 1123
+          data3: 1123,
         },
         {
-          name: '娌挎哗鍖�',
+          name: "娌挎哗鍖�",
           data1: 1123,
           data2: 1123,
-          data3: 1123
+          data3: 1123,
         },
-      ]
-    }
+      ],
+    };
   },
   methods: {
     computedHeight() {
@@ -131,21 +139,21 @@
         setTimeout(() => {
           const content = this.$refs.tabContent;
           this.tableHeight = content.offsetHeight;
-        })
-      })
-    }
+        });
+      });
+    },
   },
   mounted() {
     this.computedHeight();
-  }
-}
+  },
+};
 </script>
 
 <style lang="scss" scoped>
 .table-container {
   width: 100%;
   // flex: 1;
-  height: 350px;
+  height: 240px;
   position: relative;
 
   display: flex;
@@ -153,16 +161,12 @@
 
   .table-content {
     flex: 1;
-    background: rgba(67, 102, 155, 0.3);
-    border: 1px solid rgba(47, 91, 157, 0.8);
-    // position: absolute;
-    // width: 100%;
-    // top: 0;
-    // bottom: 0;
+    // background: url("../../../../assets/images/screen/cardBg.png");
+    // background-size: cover !important;
+    // background-repeat: no-repeat !important;
+    // background-position: center center !important;
   }
 }
-
-
 
 .rank-table {
   background-color: transparent !important;
@@ -181,7 +185,6 @@
 ::v-deep .el-table .el-table__header-wrapper th,
 .el-table .el-table__fixed-header-wrapper th {
   background-color: transparent !important;
-
 }
 
 ::v-deep .el-table--group,
@@ -198,8 +201,8 @@
   border-color: #56739e99 !important;
 }
 
-::v-deep .el-table th.el-table__cell>.cell {
-  color: #447ED6;
+::v-deep .el-table th.el-table__cell > .cell {
+  color: #447ed6;
 }
 
 ::v-deep .el-scrollbar__bar.is-vertical {
@@ -212,7 +215,11 @@
   background-color: transparent !important;
 }
 
-::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
+::v-deep
+  .el-table--enable-row-hover
+  .el-table__body
+  tr:hover
+  > td.el-table__cell {
   background-color: #447ed648;
 }
 
@@ -239,4 +246,4 @@
     color: #e20c0c;
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/screen/components/screen-video/index.vue b/src/views/screen/components/screen-video/index.vue
index d97042f..46b2e44 100644
--- a/src/views/screen/components/screen-video/index.vue
+++ b/src/views/screen/components/screen-video/index.vue
@@ -76,8 +76,10 @@
 
 .video-content {
   flex: 1;
-  background: rgba(67, 102, 155, 0.3);
-  border: 1px solid rgba(47, 91, 157, 0.8);
+  background:  url('../../../../assets/images/screen/cardBg.png');
+  background-size: cover !important;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
 
   .plane {
     margin-bottom: 10px;
diff --git a/src/views/screen/components/screen-wrapper/index.vue b/src/views/screen/components/screen-wrapper/index.vue
index b80e0e0..0257f2d 100644
--- a/src/views/screen/components/screen-wrapper/index.vue
+++ b/src/views/screen/components/screen-wrapper/index.vue
@@ -1,27 +1,27 @@
 <template>
   <div class="wrapper-container">
-    <select-item></select-item>
+    <!-- <select-item></select-item>
     <div class="return-button" @click="returnPath">
       杩斿洖
     </div>
-    <div class="wrapper-content">
+    <div class="wrapper-content"> -->
       <screen-map-three :loadEnd="isEnd"></screen-map-three>
-      <div class="left-container wrapper">
+      <!-- <div class="left-container wrapper">
         <screen-face class="enter-left" :class="{ 'animate-enter-x': isEnd }"></screen-face>
         <screen-car class="enter-left animate-delay-1" :class="{ 'animate-enter-x': isEnd }"></screen-car>
         <screen-video class="enter-left animate-delay-2" :class="{ 'animate-enter-x': isEnd }"></screen-video>
       </div>
       <div class="center-container center-wrapper">
         <screen-map-cover></screen-map-cover>
-        <screen-table class="enter-top" :class="{ 'animate-enter-y': isEnd }"></screen-table>
+        <screen-table class="enter-top" :class="{ 'animate-enter-y': isEnd }"></screen-table> -->
         <!-- <screen-detection></screen-detection> -->
 
-      </div>
+      <!-- </div>
       <div class="right-container wrapper">
         <screen-examine class="enter-right" :class="{ 'animate-enter-x': isEnd }"></screen-examine>
         <screen-data class="enter-right animate-delay-1" :class="{ 'animate-enter-x': isEnd }"></screen-data>
       </div>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -90,11 +90,11 @@
 }
 
 .wrapper-container {
-  width: 100%;
-  height: 100%;
+  width: 46%;
+  height: 54%;
   position: absolute;
-  top: 0;
-  left: 0;
+  top: 11%;
+  left: 27%;
   z-index: 1;
 
   .wrapper-content {
diff --git a/src/views/screen/components/select-item/index.vue b/src/views/screen/components/select-item/index.vue
index 6144a10..f93947a 100644
--- a/src/views/screen/components/select-item/index.vue
+++ b/src/views/screen/components/select-item/index.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="select-container">
     <div class="tabs-box">
-      <!-- <el-button v-for="item in testData1" class="transparent-button">{{ item.name }} </el-button> -->
       <el-tabs v-model="activeName" @tab-click="handleClick">
         <el-tab-pane
           v-for="item in testData1"
@@ -9,11 +8,6 @@
           :name="item.value"
         ></el-tab-pane>
       </el-tabs>
-      <!-- <div>
-        <el-button>
-
-        </el-button>
-      </div> -->
     </div>
     <!-- <div class="type-select">
       <div class="select-label">鏁版嵁婧�</div>
@@ -128,7 +122,7 @@
 .select-container {
   position: absolute;
   top: 0px;
-  left: 20px;
+  left: 0px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -165,7 +159,7 @@
     display: flex;
     align-items: center;
     width: 320px;
-    margin-top: -15px
+    margin-top: -15px;
   }
 }
 ::v-deep .tabs-box {
@@ -173,10 +167,14 @@
   width: 40%;
   .el-tabs__item {
     color: #ffffff !important;
+    font-size: 20px;
   }
   .is-active {
-    color: #61aef7 !important;
-    background: url('../../../../assets/images/screen/button1.png');;
+    color: #66b5ff !important;
+    background: url("../../../../assets/images/screen/button1.png");
+    background-size: cover !important;
+    background-repeat: no-repeat !important;
+    background-position: center center !important;
   }
 }
 ::v-deep .el-input__inner {
@@ -192,11 +190,6 @@
 ::v-deep .date-select .el-date-editor .el-range-separator {
   color: #4481dd !important;
 }
-// .transparent-button {
-//   background-color: transparent;
-//   border-color: #23f0ed;
-//   color: #b944dd; /* 杩欓噷璁剧疆鎸夐挳鏂囧瓧棰滆壊 */
-  
 // }
 /* 鍘绘帀tabs鏍囩鏍忎笅鐨勪笅鍒掔嚎 */
 ::v-deep .el-tabs__nav-wrap::after {
@@ -205,12 +198,12 @@
 }
 /* 涓嬪垝绾垮垏鎹㈤珮浜� */
 ::v-deep .el-tabs__active-bar {
-  background-color: #4481DD;
+  background-color: #4481dd;
 }
-::v-deep .el-tabs__item{
+::v-deep .el-tabs__item {
   margin: 5px 30px;
   padding: 0px 25px !important;
   border-radius: 5px;
-  background: url('../../../../assets/images/screen/button.png');
+  background: url("../../../../assets/images/screen/button.png");
 }
 </style>
diff --git a/src/views/screen/components/wrapper-title/index.vue b/src/views/screen/components/wrapper-title/index.vue
index 265b777..12857a9 100644
--- a/src/views/screen/components/wrapper-title/index.vue
+++ b/src/views/screen/components/wrapper-title/index.vue
@@ -4,10 +4,10 @@
 
     <div class="more-button" v-if="path" @click="toPath">
       <div class="icon">
-        <img src="@/assets/icons/setting.png" alt="">
+        <!-- <img src="@/assets/icons/setting.png" alt=""> -->
       </div>
       <div class="button-text">
-        鏌ョ湅鏇村
+        
       </div>
     </div>
   </div>
diff --git a/src/views/screen/index.vue b/src/views/screen/index.vue
index 26ed82b..c445ba1 100644
--- a/src/views/screen/index.vue
+++ b/src/views/screen/index.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="screen-container">
-    <screen-title></screen-title>
+    <!-- <screen-title></screen-title> -->
     <v-scale-screen width="1920" height="1080" :autoScale="true" :delay="0" class="screen">
-      <screen-wrapper></screen-wrapper>
+      <!-- <screen-wrapper></screen-wrapper> -->
+       <NewPage></NewPage>
     </v-scale-screen>
   </div>
 
@@ -11,13 +12,14 @@
 <script>
 import ScreenTitle from './components/screen-title/index.vue';
 import ScreenWrapper from './components/screen-wrapper/index.vue';
-
+import NewPage from './newPage/index.vue'
 
 export default {
   name: 'App',
   components: {
     ScreenTitle,
     ScreenWrapper,
+    NewPage,
   },
   data() {
     return {
diff --git a/src/views/screen/newPage/index.vue b/src/views/screen/newPage/index.vue
new file mode 100644
index 0000000..15b8974
--- /dev/null
+++ b/src/views/screen/newPage/index.vue
@@ -0,0 +1,333 @@
+<template>
+  <div class="new-page">
+    <div style="display: flex; justify-content: space-between">
+      <div class="header_box">
+        <h1>杩愮淮鑰冩牳澶у睆</h1>
+        <div class="tabs-box">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane
+              v-for="item in testData1"
+              :label="item.name"
+              :name="item.value"
+              :key="item.value"
+            ></el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
+      <div class="return-button" @click="returnPath">杩斿洖</div>
+    </div>
+    <div style="display: flex; justify-content: space-between">
+      <div class="left_box">
+        <div class="card">
+          <div class="card_header">
+            <div class="title">璁惧鏁版嵁</div>
+          </div>
+          <div>
+            <div class="device_data">
+              <img
+                src="../../../assets/images/screen/lxicon.png"
+                alt=""
+                style="height: 25px"
+              />
+              <div style="margin: 0 10px">浜鸿劯</div>
+              <div class="data-info">
+                <div class="data-lable">璁惧鎬绘暟</div>
+                <div class="data-num type1" v-roll>{{ 1123 }}</div>
+              </div>
+              <div class="data-info">
+                <div class="data-lable">璁惧姝e父鏁�</div>
+                <div class="data-num type2" v-roll>{{ 1123 }}</div>
+              </div>
+              <div class="data-info">
+                <div class="data-lable">璁惧寮傚父鏁�</div>
+                <div class="data-num type3" v-roll>{{ 1123 }}</div>
+              </div>
+            </div>
+            <div class="device_data">
+              <img
+                src="../../../assets/images/screen/lxicon.png"
+                alt=""
+                style="height: 25px"
+              />
+              <div style="margin: 0 10px">杞﹁締</div>
+              <div class="data-info">
+                <div class="data-lable">璁惧鎬绘暟</div>
+                <div class="data-num type1" v-roll>{{ 1123 }}</div>
+              </div>
+              <div class="data-info">
+                <div class="data-lable">璁惧姝e父鏁�</div>
+                <div class="data-num type2" v-roll>{{ 1123 }}</div>
+              </div>
+              <div class="data-info">
+                <div class="data-lable">璁惧寮傚父鏁�</div>
+                <div class="data-num type3" v-roll>{{ 1123 }}</div>
+              </div>
+            </div>
+            <div class="device_data">
+              <img
+                src="../../../assets/images/screen/lxicon.png"
+                alt=""
+                style="height: 25px"
+              />
+              <div style="margin: 0 10px">瑙嗛</div>
+              <div class="data-info">
+                <div class="data-lable">璁惧鎬绘暟</div>
+                <div class="data-num type1" v-roll>{{ 1123 }}</div>
+              </div>
+              <div class="data-info">
+                <div class="data-lable">璁惧姝e父鏁�</div>
+                <div class="data-num type2" v-roll>{{ 1123 }}</div>
+              </div>
+              <div class="data-info">
+                <div class="data-lable">璁惧寮傚父鏁�</div>
+                <div class="data-num type3" v-roll>{{ 1123 }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card_header">
+            <div class="title">璁惧姝e父鐜�</div>
+            <div style="margin: 10px 10px">
+              <ScreenTable></ScreenTable>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="large_screen_box">
+        <ScreenMap></ScreenMap>
+      </div>
+      <div class="left_box">
+        <div class="card" style="height: 103px">
+          <div class="card_header"></div>
+        </div>
+        <div class="card" style="height: 500px">
+          <div class="card_header"><div class="title">浜鸿劯鑰冩牳鏁版嵁</div></div>
+          <div><ScreenData></ScreenData></div>
+        </div>
+      </div>
+    </div>
+    <div class="footer_box">
+      <div class="footer_card">
+        <div class="card_header">
+          <div class="title">浜鸿劯鑰冩牳鏁版嵁</div>
+          <div style="width: 500px; margin-left: 40px">
+            <ExamineChart class="wrapper-item"></ExamineChart>
+          </div>
+        </div>
+      </div>
+      <div class="footer_card">
+        <div class="card_header">
+          <div class="title">杞﹁締鑰冩牳鏁版嵁</div>
+          <div style="width: 500px; margin-left: 40px">
+            <ExamineChart class="wrapper-item"></ExamineChart>
+          </div>
+        </div>
+      </div>
+      <div class="footer_card">
+        <div class="card_header">
+          <div class="title">瑙嗛鑰冩牳鏁版嵁</div>
+          <div style="width: 500px; margin-left: 40px">
+            <ExamineChart class="wrapper-item"></ExamineChart>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ScreenTable from "../components/screen-table/index.vue";
+import ScreenMap from "../components/screen-wrapper/index.vue";
+import ScreenMapThree from "../components/screen-map-three/index";
+import ExamineChart from "../components/screen-examine/components/examine-chart.vue";
+import ScreenData from "../components/screen-data/index.vue";
+export default {
+  name: "Newpage",
+  components: {
+    ScreenTable,
+    ScreenMapThree,
+    ScreenMap,
+    ExamineChart,
+    ScreenData,
+  },
+  data() {
+    return {
+      isEnd: false,
+      activeName: "1",
+      testData1: [
+        {
+          name: "鐪佸巺鏁版嵁",
+          value: "1",
+        },
+        {
+          name: "甯傚眬鏁版嵁",
+          value: "2",
+        },
+        {
+          name: "鍏畨閮ㄦ暟鎹�",
+          value: "3",
+        },
+      ],
+    };
+  },
+  mounted() {},
+  methods: {
+    returnPath() {
+      this.$router.push('/index');
+    },
+    handleClick() {},
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.new-page {
+  color: rgb(255, 255, 255);
+  .header_box {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+  }
+  .return-button {
+  position: absolute;
+  right: 20px;
+  top: 20px;
+  border-radius: 4px;
+  border: 1px solid #4481DD;
+  background-color: rgba(67, 102, 155, 0.4);
+  color: #4481DD;
+  padding: 5px 20px;
+  cursor: pointer;
+}
+}
+::v-deep .tabs-box {
+  margin-top: 5px;
+  .el-tabs__item {
+    color: #ffffff !important;
+    font-size: 20px;
+  }
+  .is-active {
+    color: #66b5ff !important;
+    background: url("../../../assets/images/screen/button1.png");
+    background-size: cover !important;
+    background-repeat: no-repeat !important;
+    background-position: center center !important;
+  }
+}
+::v-deep .el-input__inner {
+  background: rgba(67, 102, 155, 0.4) !important;
+  color: #4481dd;
+  border-color: #4481dd !important;
+}
+
+::v-deep .date-select .el-range-input {
+  background-color: transparent !important;
+  color: #4481dd;
+}
+::v-deep .date-select .el-date-editor .el-range-separator {
+  color: #4481dd !important;
+}
+// }
+/* 鍘绘帀tabs鏍囩鏍忎笅鐨勪笅鍒掔嚎 */
+::v-deep .el-tabs__nav-wrap::after {
+  position: static !important;
+//   background-color: #fff;
+}
+::v-deep .el-tabs__active-bar{
+    width: 0 !important;
+}
+::v-deep .el-tabs__item {
+  margin: 5px 30px;
+  padding: 0px 25px !important;
+  border-radius: 5px;
+  background: url("../../../assets/images/screen/button.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
+}
+.left_box {
+  width: 460px;
+  .card {
+    height: 300px;
+    width: 460px;
+    margin: 20px 0;
+    .card_header {
+      height: 40px;
+    }
+  }
+}
+.large_screen_box {
+  width: 920px;
+  height: 621px;
+  margin: 20px 0;
+  background: url("../../../assets/images/screen/bigBg.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
+}
+.card {
+  background: url("../../../assets/images/screen/cardBg1.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
+}
+.card_header {
+  background: url("../../../assets/images/screen/headerBg.png");
+  background-size: 100% 100%;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
+}
+.footer_box {
+  width: 100%;
+  height: 320px;
+  background: url("../../../assets/images/screen/cardBg.png");
+  background-size: 100% 101%;
+  background-repeat: no-repeat !important;
+  background-position: center center !important;
+  display: flex;
+  justify-content: space-between;
+  .footer_card {
+    width: 33%;
+    margin: 5px 0;
+    .card_header {
+      height: 40px;
+    }
+  }
+}
+.title {
+  margin-left: 20px;
+  padding-top: 5px;
+  color: #fff;
+  letter-spacing: 2px;
+  font-size: 20px;
+  font-style: italic;
+}
+.data-info {
+  flex: 1;
+  color: #5b83bd;
+  font-size: 16px;
+
+  .data-num {
+    margin-top: 5px;
+    font-size: 24px;
+    color: #fff;
+  }
+
+  .type1 {
+    color: #287cfa;
+  }
+  .type2 {
+    color: #0cd81d;
+  }
+  .type3 {
+    color: #e20c0c;
+  }
+}
+.device_data {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 20px;
+}
+</style>

--
Gitblit v1.8.0