对接站点分布接口

public/static/config.js

@@ -6,10 +6,10 @@ var PLATFROM_CONFIG = {};
 if (window.location.host.indexOf('localhost') != -1 || window.location.host.indexOf('pcdev.ewoogi.com') != -1) {
 
     
-    PLATFROM_CONFIG.baseUrl = "http://192.168.20.140:8011/" //线上--->测试
+    // PLATFROM_CONFIG.baseUrl = "http://192.168.20.140:8011/" //线上--->测试
     PLATFROM_CONFIG.images = "https://qhome.usky.cn/file/" //线上图片--->测试
     PLATFROM_CONFIG.fileUrl = "https://qhome.usky.cn/file/" //xlsx文件访问路径--->测试
-    // PLATFROM_CONFIG.baseUrl = "https://qhome.usky.cn/uskypower/" //线上--->测试
+    PLATFROM_CONFIG.baseUrl = "https://qhome.usky.cn/uskypower/" //线上--->测试
     // PLATFROM_CONFIG.images = "https://qhome.usky.cn/file/" //线上图片--->测试
     // PLATFROM_CONFIG.fileUrl = "https://qhome.usky.cn/file/" //xlsx文件访问路径--->测试
 

src/assets/js/baiduMap.js

@@ -6,7 +6,10 @@
 // import { timestampToTime } from "@/assets/js/dataFormate.js";
 // import { deviceType } from "@/assets/js/type";
 import mark0 from "@/assets/svg/mark0.svg"; //在线
+import mark1 from "@/assets/svg/mark1.svg"; //离线
+import mark4 from "@/assets/svg/mark4.svg"; //故障
 import mark77 from "@/assets/svg/mark77.svg"; //告警
+import mark10000 from "@/assets/svg/mark10000.svg"; //测试
 var map = null //地图
 var label = null //文本标注
 var num = 3 //地图缩放比例
@@ -83,9 +86,9 @@ function markers(data) {
             // 创建点标记
             var myIcon = new BMapGL.Icon(
                 data[i].deviceStatus == 0 ? mark0 :  
-                data[i].deviceStatus == 1 ? mark77 :   
-                data[i].deviceStatus == 4 ? mark77 :  
-                data[i].deviceStatus == 77 ? mark77 :  mark77, 
+                data[i].deviceStatus == 1 ? mark1 :   
+                data[i].deviceStatus == 4 ? mark4 :  
+                data[i].deviceStatus == 77 ? mark77 :  mark10000, 
                 new BMapGL.Size(17.5, 22), { 
                 // offset: new BMapGL.Size(-14, 17), //指定定位位置
                 // anchor: new BMapGL.Size(17.5, 22.5), //这里有两个数字10，30分别对应图标的一半宽度和高度
@@ -105,13 +108,14 @@ function markers(data) {
                                 data[i].deviceStatus == 1 ? "#909399" :
                                 data[i].deviceStatus == 4 ? "#E6A23C" :
                                 data[i].deviceStatus == 77 ? "#F56C6C" :
-                                data[i].deviceStatus == null ? "#909399" : "#909399"
+                                !data[i].deviceStatus && data[i].deviceStatus != 0  ? "#909399" : "#909399"
                             }'>
                                 ${data[i].deviceStatus == 0 ? "正常" : 
                                 data[i].deviceStatus == 1 ? "离线" : 
                                 data[i].deviceStatus == 4 ? "故障" : 
                                 data[i].deviceStatus == 77 ? "告警" : 
-                                data[i].deviceStatus == null ? "测试" : "--"
+                                !data[i].deviceStatus && data[i].deviceStatus != 0 ? "--" : "--"
+                                
                             } </div></div>
                             <div class='item'><div>设备总数</div><div>${ data[i].tatal || "--" }</div></div>
                             <div class='item' style='color:${ data[i].alert > 0 ? "#ff0000" : "#333" }'><div>告警数</div><div>${ data[i].alert  || "--" }</div></div>

src/assets/svg/mark1.svg

@@ -0,0 +1,59 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="36px" height="46px">
+<defs>
+<linearGradient id="PSgrad_0" x1="0%" x2="68.2%" y1="0%" y2="73.135%">
+  <stop offset="0%" stop-color="rgb(205,205,205)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(153,153,153)" stop-opacity="1" />
+</linearGradient>
+<linearGradient id="PSgrad_1" x1="0%" x2="68.2%" y1="0%" y2="73.135%">
+  <stop offset="0%" stop-color="rgb(153,153,153)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(205,205,205)" stop-opacity="1" />
+</linearGradient>
+<linearGradient id="PSgrad_2" x1="0%" x2="0%" y1="0%" y2="100%">
+  <stop offset="0%" stop-color="rgb(153,153,153)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(205,205,205)" stop-opacity="1" />
+</linearGradient>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="9px" y="10px" width="19px" height="20px"  >
+                <feOffset in="SourceAlpha" dx="0" dy="2" />
+                <feGaussianBlur result="blurOut" stdDeviation="1.414" />
+                <feFlood flood-color="rgb(0, 0, 0)" result="floodOut" />
+                <feComposite operator="atop" in="floodOut" in2="blurOut" />
+                <feComponentTransfer><feFuncA type="linear" slope="0.3"/></feComponentTransfer>
+                <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+            </filter>
+<linearGradient id="PSgrad_3" x1="0%" x2="0%" y1="0%" y2="100%">
+  <stop offset="0%" stop-color="rgb(205,205,205)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(153,153,153)" stop-opacity="1" />
+</linearGradient>
+
+</defs>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M18.156,0.562 C27.735,0.562 35.500,8.328 35.500,17.906 C35.500,27.485 27.735,35.250 18.156,35.250 C8.577,35.250 0.812,27.485 0.812,17.906 C0.812,8.328 8.577,0.562 18.156,0.562 Z"/>
+<path fill="url(#PSgrad_0)"
+ d="M18.156,0.562 C27.735,0.562 35.500,8.328 35.500,17.906 C35.500,27.485 27.735,35.250 18.156,35.250 C8.577,35.250 0.812,27.485 0.812,17.906 C0.812,8.328 8.577,0.562 18.156,0.562 Z"/>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M18.156,1.594 C27.165,1.594 34.469,8.897 34.469,17.906 C34.469,26.915 27.165,34.219 18.156,34.219 C9.147,34.219 1.844,26.915 1.844,17.906 C1.844,8.897 9.147,1.594 18.156,1.594 Z"/>
+<path fill="url(#PSgrad_1)"
+ d="M18.156,1.594 C27.165,1.594 34.469,8.897 34.469,17.906 C34.469,26.915 27.165,34.219 18.156,34.219 C9.147,34.219 1.844,26.915 1.844,17.906 C1.844,8.897 9.147,1.594 18.156,1.594 Z"/>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M18.156,2.625 C26.613,2.625 33.469,9.467 33.469,17.906 C33.469,26.346 26.613,33.187 18.156,33.187 C9.699,33.187 2.844,26.346 2.844,17.906 C2.844,9.467 9.699,2.625 18.156,2.625 Z"/>
+<path fill="url(#PSgrad_0)"
+ d="M18.156,2.625 C26.613,2.625 33.469,9.467 33.469,17.906 C33.469,26.346 26.613,33.187 18.156,33.187 C9.699,33.187 2.844,26.346 2.844,17.906 C2.844,9.467 9.699,2.625 18.156,2.625 Z"/>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M18.500,6.000 C25.403,6.000 31.000,11.596 31.000,18.500 C31.000,25.404 25.403,31.000 18.500,31.000 C11.596,31.000 6.000,25.404 6.000,18.500 C6.000,11.596 11.596,6.000 18.500,6.000 Z"/>
+<path fill="url(#PSgrad_2)"
+ d="M18.500,6.000 C25.403,6.000 31.000,11.596 31.000,18.500 C31.000,25.404 25.403,31.000 18.500,31.000 C11.596,31.000 6.000,25.404 6.000,18.500 C6.000,11.596 11.596,6.000 18.500,6.000 Z"/>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M25.176,17.863 L24.466,17.863 L24.466,24.610 C24.466,25.132 24.043,25.554 23.522,25.554 L12.790,25.554 C12.268,25.554 11.846,25.130 11.846,24.610 L11.846,17.861 L11.136,17.861 C10.790,17.861 10.508,17.580 10.508,17.233 L10.508,16.733 C10.508,16.540 10.597,16.357 10.751,16.238 L11.116,15.949 L11.112,15.946 L17.540,10.485 C17.893,10.186 18.410,10.186 18.762,10.485 L25.191,15.946 L25.190,15.949 L25.557,16.238 C25.710,16.357 25.799,16.540 25.804,16.735 L25.804,17.235 C25.804,17.581 25.523,17.863 25.176,17.863 ZM18.153,15.579 C16.313,15.579 14.821,17.071 14.821,18.911 C14.821,20.197 16.446,22.507 17.426,23.782 C17.793,24.258 18.511,24.258 18.878,23.782 C19.860,22.507 21.484,20.198 21.484,18.911 C21.484,17.071 19.993,15.579 18.153,15.579 ZM16.526,19.838 C16.187,19.268 16.187,18.556 16.526,17.986 C16.864,17.416 17.489,17.076 18.153,17.102 C19.126,17.139 19.895,17.940 19.895,18.911 C19.895,19.886 19.126,20.685 18.153,20.722 C17.491,20.748 16.866,20.408 16.526,19.838 Z"/>
+</g>
+<path fill-rule="evenodd"  fill="rgb(86, 6, 77)"
+ d="M18.156,39.325 C21.388,39.325 24.293,37.950 26.340,35.763 L27.336,35.763 L18.154,45.450 L8.973,35.763 L9.973,35.763 C12.020,37.950 14.924,39.325 18.156,39.325 Z"/>
+<path fill="url(#PSgrad_3)"
+ d="M18.156,39.325 C21.388,39.325 24.293,37.950 26.340,35.763 L27.336,35.763 L18.154,45.450 L8.973,35.763 L9.973,35.763 C12.020,37.950 14.924,39.325 18.156,39.325 Z"/>
+</svg>

src/assets/svg/mark10000.svg

@@ -0,0 +1,59 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="36px" height="46px">
+<defs>
+<linearGradient id="PSgrad_0" x1="0%" x2="68.2%" y1="0%" y2="73.135%">
+  <stop offset="0%" stop-color="rgb(158,213,255)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(57,156,247)" stop-opacity="1" />
+</linearGradient>
+<linearGradient id="PSgrad_1" x1="0%" x2="68.2%" y1="0%" y2="73.135%">
+  <stop offset="0%" stop-color="rgb(57,156,247)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(158,213,255)" stop-opacity="1" />
+</linearGradient>
+<linearGradient id="PSgrad_2" x1="0%" x2="0%" y1="0%" y2="100%">
+  <stop offset="0%" stop-color="rgb(69,163,248)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(158,213,255)" stop-opacity="1" />
+</linearGradient>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="9px" y="10px" width="19px" height="20px"  >
+                <feOffset in="SourceAlpha" dx="0" dy="2" />
+                <feGaussianBlur result="blurOut" stdDeviation="1.414" />
+                <feFlood flood-color="rgb(0, 0, 0)" result="floodOut" />
+                <feComposite operator="atop" in="floodOut" in2="blurOut" />
+                <feComponentTransfer><feFuncA type="linear" slope="0.3"/></feComponentTransfer>
+                <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+            </filter>
+<linearGradient id="PSgrad_3" x1="0%" x2="0%" y1="0%" y2="100%">
+  <stop offset="0%" stop-color="rgb(152,211,255)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(57,156,247)" stop-opacity="1" />
+</linearGradient>
+
+</defs>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M18.156,0.562 C27.735,0.562 35.500,8.328 35.500,17.906 C35.500,27.485 27.735,35.250 18.156,35.250 C8.577,35.250 0.812,27.485 0.812,17.906 C0.812,8.328 8.577,0.562 18.156,0.562 Z"/>
+<path fill="url(#PSgrad_0)"
+ d="M18.156,0.562 C27.735,0.562 35.500,8.328 35.500,17.906 C35.500,27.485 27.735,35.250 18.156,35.250 C8.577,35.250 0.812,27.485 0.812,17.906 C0.812,8.328 8.577,0.562 18.156,0.562 Z"/>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M18.156,1.594 C27.165,1.594 34.469,8.897 34.469,17.906 C34.469,26.915 27.165,34.219 18.156,34.219 C9.147,34.219 1.844,26.915 1.844,17.906 C1.844,8.897 9.147,1.594 18.156,1.594 Z"/>
+<path fill="url(#PSgrad_1)"
+ d="M18.156,1.594 C27.165,1.594 34.469,8.897 34.469,17.906 C34.469,26.915 27.165,34.219 18.156,34.219 C9.147,34.219 1.844,26.915 1.844,17.906 C1.844,8.897 9.147,1.594 18.156,1.594 Z"/>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M18.156,2.625 C26.613,2.625 33.469,9.467 33.469,17.906 C33.469,26.346 26.613,33.187 18.156,33.187 C9.699,33.187 2.844,26.346 2.844,17.906 C2.844,9.467 9.699,2.625 18.156,2.625 Z"/>
+<path fill="url(#PSgrad_0)"
+ d="M18.156,2.625 C26.613,2.625 33.469,9.467 33.469,17.906 C33.469,26.346 26.613,33.187 18.156,33.187 C9.699,33.187 2.844,26.346 2.844,17.906 C2.844,9.467 9.699,2.625 18.156,2.625 Z"/>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M18.500,6.000 C25.403,6.000 31.000,11.596 31.000,18.500 C31.000,25.404 25.403,31.000 18.500,31.000 C11.596,31.000 6.000,25.404 6.000,18.500 C6.000,11.596 11.596,6.000 18.500,6.000 Z"/>
+<path fill="url(#PSgrad_2)"
+ d="M18.500,6.000 C25.403,6.000 31.000,11.596 31.000,18.500 C31.000,25.404 25.403,31.000 18.500,31.000 C11.596,31.000 6.000,25.404 6.000,18.500 C6.000,11.596 11.596,6.000 18.500,6.000 Z"/>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M25.176,17.863 L24.466,17.863 L24.466,24.610 C24.466,25.132 24.043,25.554 23.522,25.554 L12.790,25.554 C12.268,25.554 11.846,25.130 11.846,24.610 L11.846,17.861 L11.136,17.861 C10.790,17.861 10.508,17.580 10.508,17.233 L10.508,16.733 C10.508,16.540 10.597,16.357 10.751,16.238 L11.116,15.949 L11.112,15.946 L17.540,10.485 C17.893,10.186 18.410,10.186 18.762,10.485 L25.191,15.946 L25.190,15.949 L25.557,16.238 C25.710,16.357 25.799,16.540 25.804,16.735 L25.804,17.235 C25.804,17.581 25.523,17.863 25.176,17.863 ZM18.153,15.579 C16.313,15.579 14.821,17.071 14.821,18.911 C14.821,20.197 16.446,22.507 17.426,23.782 C17.793,24.258 18.511,24.258 18.878,23.782 C19.859,22.507 21.484,20.198 21.484,18.911 C21.484,17.071 19.993,15.579 18.153,15.579 ZM16.526,19.838 C16.187,19.268 16.187,18.556 16.526,17.986 C16.864,17.416 17.489,17.076 18.153,17.102 C19.126,17.139 19.895,17.940 19.895,18.911 C19.895,19.886 19.126,20.685 18.153,20.722 C17.491,20.748 16.866,20.408 16.526,19.838 Z"/>
+</g>
+<path fill-rule="evenodd"  fill="rgb(86, 6, 77)"
+ d="M18.156,39.325 C21.388,39.325 24.293,37.950 26.340,35.763 L27.336,35.763 L18.154,45.450 L8.972,35.763 L9.973,35.763 C12.020,37.950 14.924,39.325 18.156,39.325 Z"/>
+<path fill="url(#PSgrad_3)"
+ d="M18.156,39.325 C21.388,39.325 24.293,37.950 26.340,35.763 L27.336,35.763 L18.154,45.450 L8.972,35.763 L9.973,35.763 C12.020,37.950 14.924,39.325 18.156,39.325 Z"/>
+</svg>

src/assets/svg/mark4.svg

@@ -0,0 +1,59 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="36px" height="46px">
+<defs>
+<linearGradient id="PSgrad_0" x1="0%" x2="68.2%" y1="0%" y2="73.135%">
+  <stop offset="0%" stop-color="rgb(248,213,153)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(239,130,12)" stop-opacity="1" />
+</linearGradient>
+<linearGradient id="PSgrad_1" x1="0%" x2="68.2%" y1="0%" y2="73.135%">
+  <stop offset="0%" stop-color="rgb(239,130,12)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(248,213,153)" stop-opacity="1" />
+</linearGradient>
+<linearGradient id="PSgrad_2" x1="0%" x2="0%" y1="0%" y2="100%">
+  <stop offset="0%" stop-color="rgb(239,130,12)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(248,213,153)" stop-opacity="1" />
+</linearGradient>
+<filter filterUnits="userSpaceOnUse" id="Filter_0" x="10px" y="9px" width="19px" height="20px"  >
+                <feOffset in="SourceAlpha" dx="0" dy="2" />
+                <feGaussianBlur result="blurOut" stdDeviation="1.414" />
+                <feFlood flood-color="rgb(0, 0, 0)" result="floodOut" />
+                <feComposite operator="atop" in="floodOut" in2="blurOut" />
+                <feComponentTransfer><feFuncA type="linear" slope="0.3"/></feComponentTransfer>
+                <feMerge>
+    <feMergeNode/>
+    <feMergeNode in="SourceGraphic"/>
+  </feMerge>
+            </filter>
+<linearGradient id="PSgrad_3" x1="0%" x2="0%" y1="0%" y2="100%">
+  <stop offset="0%" stop-color="rgb(248,213,153)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(239,130,12)" stop-opacity="1" />
+</linearGradient>
+
+</defs>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M18.156,0.562 C27.735,0.562 35.500,8.328 35.500,17.906 C35.500,27.485 27.735,35.250 18.156,35.250 C8.577,35.250 0.812,27.485 0.812,17.906 C0.812,8.328 8.577,0.562 18.156,0.562 Z"/>
+<path fill="url(#PSgrad_0)"
+ d="M18.156,0.562 C27.735,0.562 35.500,8.328 35.500,17.906 C35.500,27.485 27.735,35.250 18.156,35.250 C8.577,35.250 0.812,27.485 0.812,17.906 C0.812,8.328 8.577,0.562 18.156,0.562 Z"/>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M18.156,1.594 C27.165,1.594 34.469,8.897 34.469,17.906 C34.469,26.915 27.165,34.219 18.156,34.219 C9.147,34.219 1.844,26.915 1.844,17.906 C1.844,8.897 9.147,1.594 18.156,1.594 Z"/>
+<path fill="url(#PSgrad_1)"
+ d="M18.156,1.594 C27.165,1.594 34.469,8.897 34.469,17.906 C34.469,26.915 27.165,34.219 18.156,34.219 C9.147,34.219 1.844,26.915 1.844,17.906 C1.844,8.897 9.147,1.594 18.156,1.594 Z"/>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M18.156,2.625 C26.613,2.625 33.469,9.467 33.469,17.906 C33.469,26.346 26.613,33.187 18.156,33.187 C9.699,33.187 2.844,26.346 2.844,17.906 C2.844,9.467 9.699,2.625 18.156,2.625 Z"/>
+<path fill="url(#PSgrad_0)"
+ d="M18.156,2.625 C26.613,2.625 33.469,9.467 33.469,17.906 C33.469,26.346 26.613,33.187 18.156,33.187 C9.699,33.187 2.844,26.346 2.844,17.906 C2.844,9.467 9.699,2.625 18.156,2.625 Z"/>
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M18.500,6.000 C25.403,6.000 31.000,11.596 31.000,18.500 C31.000,25.404 25.403,31.000 18.500,31.000 C11.596,31.000 6.000,25.404 6.000,18.500 C6.000,11.596 11.596,6.000 18.500,6.000 Z"/>
+<path fill="url(#PSgrad_2)"
+ d="M18.500,6.000 C25.403,6.000 31.000,11.596 31.000,18.500 C31.000,25.404 25.403,31.000 18.500,31.000 C11.596,31.000 6.000,25.404 6.000,18.500 C6.000,11.596 11.596,6.000 18.500,6.000 Z"/>
+<g filter="url(#Filter_0)">
+<path fill-rule="evenodd"  fill="rgb(255, 255, 255)"
+ d="M20.014,12.186 L17.984,12.186 L18.045,14.171 L18.334,19.334 L19.653,19.334 L19.943,14.145 L20.014,12.186 ZM18.998,20.374 C18.662,20.369 18.339,20.511 18.101,20.766 C17.865,21.020 17.735,21.365 17.745,21.724 C17.743,22.274 18.054,22.771 18.533,22.981 C19.011,23.190 19.561,23.071 19.925,22.680 C20.290,22.289 20.394,21.702 20.191,21.197 C19.988,20.690 19.516,20.365 18.998,20.374 ZM18.998,9.004 C19.903,9.048 20.710,9.618 21.099,10.487 L26.611,21.070 C27.096,21.886 27.135,22.913 26.713,23.767 C26.231,24.581 25.372,25.052 24.470,24.997 L13.538,24.997 C12.636,25.052 11.776,24.579 11.295,23.767 C10.868,22.914 10.904,21.887 11.385,21.070 L16.897,10.487 C17.285,9.616 18.093,9.045 18.998,9.004 Z"/>
+</g>
+<path fill-rule="evenodd"  fill="rgb(86, 6, 77)"
+ d="M18.156,39.325 C21.388,39.325 24.293,37.950 26.340,35.763 L27.336,35.763 L18.154,45.450 L8.972,35.763 L9.973,35.763 C12.020,37.950 14.924,39.325 18.156,39.325 Z"/>
+<path fill="url(#PSgrad_3)"
+ d="M18.156,39.325 C21.388,39.325 24.293,37.950 26.340,35.763 L27.336,35.763 L18.154,45.450 L8.972,35.763 L9.973,35.763 C12.020,37.950 14.924,39.325 18.156,39.325 Z"/>
+</svg>

src/views/bulletinBoard/index.vue

@@ -2,7 +2,7 @@
   <div class="app-container bulletinBoard" style="background: #f0f2f5 !important;padding-bottom:12px !important;">
       <div class="base height1 component1">
         <div class="type type1">
-          <p class="color1">上海永天科技</p>
+          <p class="color1">上海翥云餐饮管理有限公司</p>
           <img :src="kbTop1" alt="">
           <p class="desc">站点名称</p>
         </div>

src/views/electricFire/components/table.vue

@@ -3,22 +3,22 @@
     <el-table :data="tableData" border stripe :header-cell-style="headClass">
       <el-table-column v-if="!type"
         fixed
-        prop="platformAreaName"
+        prop="deviceName"
         label="设备名称"
         width=""
       ></el-table-column>
       <el-table-column v-if="!type"
-        prop="platformAreaCode"
+        prop="installPosition"
         label="安装位置"
         width=""
       ></el-table-column>
       <el-table-column v-if="!type"
-        prop="platformAreaAddress"
+        prop="dl"
         label="剩余电流"
         width=""
       ></el-table-column>
       <el-table-column v-if="type"
-        prop="platformAreaAddress"
+        prop="time"
         label="时间"
         width=""
       ></el-table-column>
@@ -31,9 +31,9 @@
               v-if="scope.row.siteCount"
               style="cursor: pointer; color: #0284e8"
             >
-              {{ scope.row.siteCount }}
+              {{ scope.row.aa }}
             </span>
-            <span v-else>{{ scope.row.siteCount }}</span>
+            <span v-else>{{ scope.row.aa }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="siteCount" label="B相" width="">
@@ -43,9 +43,9 @@
               v-if="scope.row.siteCount"
               style="cursor: pointer; color: #0284e8"
             >
-              {{ scope.row.siteCount }}
+              {{ scope.row.ab }}
             </span>
-            <span v-else>{{ scope.row.siteCount }}</span>
+            <span v-else>{{ scope.row.ab }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="siteCount" label="C相" width="">
@@ -55,9 +55,9 @@
               v-if="scope.row.siteCount"
               style="cursor: pointer; color: #0284e8"
             >
-              {{ scope.row.siteCount }}
+              {{ scope.row.ac }}
             </span>
-            <span v-else>{{ scope.row.siteCount }}</span>
+            <span v-else>{{ scope.row.ac }}</span>
           </template>
         </el-table-column>
       </el-table-column>
@@ -69,9 +69,9 @@
               v-if="scope.row.siteCount"
               style="cursor: pointer; color: #0284e8"
             >
-              {{ scope.row.siteCount }}
+              {{ scope.row.ba }}
             </span>
-            <span v-else>{{ scope.row.siteCount }}</span>
+            <span v-else>{{ scope.row.ba }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="siteCount" label="B相" width="">
@@ -81,9 +81,9 @@
               v-if="scope.row.siteCount"
               style="cursor: pointer; color: #0284e8"
             >
-              {{ scope.row.siteCount }}
+              {{ scope.row.bb }}
             </span>
-            <span v-else>{{ scope.row.siteCount }}</span>
+            <span v-else>{{ scope.row.bb }}</span>
           </template>
         </el-table-column>
         <el-table-column prop="siteCount" label="C相" width="">
@@ -93,9 +93,9 @@
               v-if="scope.row.siteCount"
               style="cursor: pointer; color: #0284e8"
             >
-              {{ scope.row.siteCount }}
+              {{ scope.row.bc }}
             </span>
-            <span v-else>{{ scope.row.siteCount }}</span>
+            <span v-else>{{ scope.row.bc }}</span>
           </template>
         </el-table-column>
       </el-table-column>

src/views/electricFire/index.vue

@@ -74,7 +74,7 @@ const deviceData = ref([
   },
   
   { 
-    name:"二楼电表", devicedId:"1", installPosition:"华徐公路永天科技2",
+    name:"二楼电表", devicedId:"1", installPosition:"华徐公路",
     temperature:[
       { name:"A相", value:31.3, unit:"℃" },
       { name:"B相", value:31.3, unit:"℃" },
@@ -88,7 +88,7 @@ const deviceData = ref([
   }
 ])//设备信息
 const tableData = ref([
-  { siteCount: 1}
+  { deviceName:"一楼电表", installPosition:"华徐公路", temperature:31.3, aa:12.147, ab: 1,ac:45,ba:12.45,bb:56,bc:45,dl:46 },
 ]) //表格数据
 /*----------------------------------方法声明-----------------------------------*/
 /**

src/views/electricityFeeAnalysis/index.vue

@@ -32,7 +32,7 @@
       <div class="content">
         <div class="chart">
           <div class="top">
-            <img src="@/assets/images/logo1.png" alt="">
+            <img src="@/assets/images/time.png" alt="">
             <span>每日总电费趋势</span>
           </div>
           <chart :data="dfqs"/>
@@ -185,7 +185,7 @@ function siteClick(val){
         background: #fafafa;
         padding:8px;
         img{
-          width:25px;
+          width:20px;
         }
         img,span{
           display: inline-block;

src/views/electronicArchives/index.vue

@@ -66,9 +66,9 @@ const treeData = ref([
 ])
 const siteName = ref(treeData.value[0].label)
 const tableData = ref([
-  { a: 1000,url:"https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422",type:"jpg" },
-  { a: 1000,url: "http://file.usky.cn/statics/202503/20250320131547A0149.pdf",type:"pdf" },
-  { a: 1000,url: "http://file.usky.cn/statics/202408/20240830162008A883.mp4",type:"mp4" },
+  { a: "图片文件",url:"https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422",type:"jpg" },
+  { a: "pdf文件",url: "http://file.usky.cn/statics/202503/20250320131547A0149.pdf",type:"pdf" },
+  { a: "视频文件",url: "http://file.usky.cn/statics/202408/20240830162008A883.mp4",type:"mp4" },
 ]) //列表数据
 
 function init(){

src/views/energyManage/energyStatistics/branch.vue

@@ -41,8 +41,8 @@
                 </div>
 
                 <div class="card-area-center" style="height: calc(100% - 40px);">
-                    <countChart ref="oneChartRef" class="chart" height="100%" :chartData="oneChartData"
-                        v-loading="oneChartLoading" />
+                    <!-- <countChart ref="oneChartRef" class="chart" height="100%" :chartData="oneChartData"
+                        v-loading="oneChartLoading" /> -->
                 </div>
             </el-card>
         </el-col>
@@ -54,8 +54,8 @@
                 </div>
 
                 <div class="card-area-center" style="height: calc(100% - 40px);">
-                    <pieChart ref="pieChartRef" class="chart" height="100%" :chartData="pieChartData"
-                        v-loading="oneChartLoading" />
+                    <!-- <pieChart ref="pieChartRef" class="chart" height="100%" :chartData="pieChartData"
+                        v-loading="oneChartLoading" /> -->
                 </div>
             </el-card>
         </el-col>
@@ -74,8 +74,8 @@
                 </div>
 
                 <div class="card-area-center" style="height: calc(100% - 40px);">
-                    <countChart ref="twoChartRef" class="chart" height="100%" style="width: 75%;" :chartData="twoChartData"
-                        v-loading="twoChartLoading" />
+                    <!-- <countChart ref="twoChartRef" class="chart" height="100%" style="width: 75%;" :chartData="twoChartData"
+                        v-loading="twoChartLoading" /> -->
                     <div style="width: 25%;height: 100%;">
 
                     </div>
@@ -90,8 +90,8 @@ import { ElMessage, ElNotification } from 'element-plus'
 import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
 /*----------------------------------接口引入-----------------------------------*/
 /*----------------------------------组件引入-----------------------------------*/
-import pieChart from './components/pieChart.vue'
-import countChart from './components/countChart.vue'
+// import pieChart from './components/pieChart.vue'
+// import countChart from './components/countChart.vue'
 /*----------------------------------store引入-----------------------------------*/
 /*----------------------------------公共方法引入-----------------------------------*/
 import { GetTimeIntervals } from '@/utils/timeProcessing.utils.js'

src/views/index/index.vue

@@ -69,7 +69,7 @@
           <p>告警</p>
         </div>
       </div>
-      <div class="item" @click="site(1)" :class="{ active: siteState.includes(1) }">
+      <div class="item" @click="site(1)" :class="{ active: siteState.includes(1) }" style="border-bottom:none !important;">
          <img src="@/assets/svg/site.svg" alt="">
          <p>站点</p>
       </div>
@@ -274,7 +274,7 @@ function getSaDian(val){
       z-index: 1;
       top:20px;
       left:20px;
-      width:40%;
+      width:700px;
       height:78px;
       display: flex;
       flex-direction: row;
@@ -391,9 +391,6 @@ function getSaDian(val){
         margin:6px 0 0px;
       }
     }
-    .item:last-child(1){
-      border-bottom:none;
-    }
     .active{
         background: #48A4FF;
         img{

src/views/starMarkingEquipment/components/overview.vue

@@ -3,47 +3,14 @@
     <div class="overview">
       <div class="top">
         <span>实时概览</span>
-        <img src="@/assets/images/overview-header-bg.png" alt="">
+        <img :src="line" alt="">
       </div>
       <div class="content">
         <div class="top">
-          <div class="item" v-for="(item,index) in overviewData" :key="index">
-            <p>{{ item.name }}</p>
-            <div>
-              <div>
-                <img :src="item.img" alt="">
-              </div>
-              <p :style="{ color: item.value === 'ON'? '#e00202' : '#08b762' }">{{ item.value }}</p>
-            </div>
-          </div>
+          <status :data="statusData" />
         </div>
         <div class="bottom">
-          <div class="left">
-            <div class="item item1" v-for="(item,index) in quota[0]" :key="index">
-              <div class="top">
-                <img :src="item.img" alt="">
-                <span>{{ item.title }}</span>
-              </div>
-              <div class="content">
-                <div class="list" v-for="(item2,index2) in item.array" :key="index2">
-                  <p>{{ item2.name }}</p>
-                  <p>{{ item2.value }}<span>{{ item2.unit }}</span></p>
-                </div>
-              </div>
-            </div>
-            <div class="item item2" v-for="(item,index) in quota[1]" :key="index">
-              <div class="top">
-                <img :src="item.img" alt="">
-                <span>{{ item.title }}</span>
-              </div>
-              <div class="content">
-                <div :class="['list',item.num]" v-for="(item2,index2) in item.array" :key="index2" >
-                  <p>{{ item2.name }}</p>
-                  <p>{{ item2.value }}<span>{{ item2.unit }}</span></p>
-                </div>
-              </div>
-            </div>
-          </div>
+            <realTime :data="realTimeData" />
           <div class="right">
             <div class="title" style="margin:10px 0 4px;font-weight: 600;">
               历史数据
@@ -92,33 +59,10 @@
     <div class="useElectricity">
       <div class="top">
         <span>用电</span>
-        <img src="@/assets/images/overview-header-bg.png" alt="">
+        <img :src="line" alt="">
       </div>
       <div class="content">
-        <div class="left">
-          <div v-for="(item,index) in electronData" :key="index">
-            <div class="item item1">
-            <div>
-              <img :src="item.img" alt="">
-            </div>
-            <div>
-              <div>{{ item.value }}</div>
-              <div>{{ item.name }}<span>{{ item.unit }}</span></div>
-            </div>
-          </div>
-          <div class="item item2">
-            <div>
-              <div>{{ item.synchronism }}</div>
-              <div>{{ item.synchronisNum }}</div>
-            </div>
-            <div>
-              <div>环比</div>
-              <div>{{ item.proportion }} <span>%</span><span></span></div>
-            </div>
-          </div>
-          </div>
-          
-        </div>
+        <useElectricity  />
         <div class="right">
           <div>
             <span>当月分时电量</span>
@@ -137,90 +81,22 @@
 /*----------------------------------组件引入-----------------------------------*/
 import chart from './chart'
 import pie from './pie'
+import status from './status'
+import realTime from './realTime'
+import useElectricity from './useElectricity'
 /*----------------------------------接口引入-----------------------------------*/
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 /*----------------------------------store引入----------------------------------*/
 /*----------------------------------公共方法引入------------------------------*/
 import dayjs from 'dayjs'
+import axios from 'axios'
+/*----------------------------------引用库-------------------------------------*/
 /*----------------------------------常量声明-----------------------------------*/
-import running from '@/assets/images/running.png'
-import a from '@/assets/images/a.png'
-import b from '@/assets/images/b.png'
-import c from '@/assets/images/c.png'
-import demand from '@/assets/images/demand.png'
-import I from '@/assets/images/I.png'
-import power from '@/assets/images/power.png'
-import powerqulity from '@/assets/images/powerqulity.png'
-import temperature from '@/assets/images/temperature.png'
-import UA from '@/assets/images/UA.png'
 import UAB from '@/assets/images/UAB.png'
-import dian from '@/assets/images/dian.png'
+import line from '@/assets/images/overview-header-bg.png'
 /*----------------------------------变量声明-----------------------------------*/
-const overviewData = ref([
-  { name: '回路带电/停电', value: 'ON' , img: running },
-  { name: '环境温度', value: 'OFF' , img: temperature },
-  { name: '剩余电流超限', value: 'ON' , img: a },
-  { name: '线路电气故障总', value: 'ON' , img: b },
-  { name: '电压缺相', value: 'ON' , img: c },
-  { name: '线路开关状态', value: 'ON' , img: a },
-  { name: '电压越上限告警', value: 'ON' , img: b },
-  { name: '电压越下限告警', value: 'ON' , img: c },
-])
-const quota = ref([
-  [
-      { title: '电流', img: I,
-        array:[
-          { name: 'IA',value: '2.81',unit:'A' },
-          { name: 'IB',value: '2.87',unit:'A' },
-          { name: 'IC',value: '2.52',unit:'A' },
-        ]
-      },
-      { title: '相电压', img: UA, 
-        array:[
-          { name: 'UA',value: '5.92',unit:'kW' },
-          { name: 'UB',value: '2.91',unit:'kW' },
-          { name: 'UC',value: '2.93',unit:'kW' },
-        ]
-      },
-      { title: '线电压', img: UAB, 
-        array:[
-          { name: 'UAB',value: '10224.5',unit:'V' },
-          { name: 'UBC',value: '10250',unit:'V' },
-          { name: 'UCA',value: '10268',unit:'V' },
-        ]
-      }
-  ],
-  [
-      { title: '功率', img: power,num:"two",
-        array:[
-          { name: '有功功率',value: '36.3',unit:'kW' },
-          { name: '无功功率',value: '-23.7',unit:'kW' },
-        ]
-      },
-      { title: '需量', img: demand, num:"three",
-        array:[
-          { name: '当前需量',value: '37.8',unit:'kV' },
-          { name: '当月最大需量',value: '21265.7',unit:'kV' },
-          { name: '发生时间',value: '2025-05-01 12:00:00',unit:'' },
-        ]
-      },
-      { title: '电能质量', img: powerqulity, num:"three2",
-        array:[
-          { name: '当月功率因数',value: '0.99',unit:'7月1日 起' },
-          { name: '频率',value: '50.03',unit:'Hz' },
-          { name: '实时功率因数',value: '0.8276',unit:'' },
-        ]
-      },
-      { title: '电度', img: dian, num:"four",
-        array:[
-          { name: '正向有功',value: '182153.96',unit:'kWh', },
-          { name: '反向有功',value: '-3',unit:'kWh' },
-          { name: '正向无功',value: '120',unit:'kvarh' },
-          { name: '反向无功',value: '28839',unit:'kvarh' },
-        ]
-      }
-  ],
-])
+const statusData = ref({})
+const realTimeData = ref([])
 //实时概览
 const activeType = ref('1')
 const activeList = ref([
@@ -282,6 +158,63 @@ function disabledDate(time) {
 function dateSwitch(type){
   dateType.value = type
 }
+
+/**
+ * 获取实时概览状态数据
+ */
+function getStatusData(){
+  axios.get('https://mock.apipost.net/mock/2b03dbbac065001/starMarkingEquipment/livePreviewStatus',{
+    params:{
+      apipost_id:"300938b339f774",
+      id:1,
+    }
+  }).then(res => {
+    statusData.value = res.data
+  })
+}
+/**
+ * 获取实时数据
+ */
+function getRealTimeData(){
+  axios.get('https://mock.apipost.net/mock/2b03dbbac065001/starMarkingEquipment/livePreviewData',{
+    params:{
+      apipost_id:"300f7913b9f8a4",
+      id:1,
+    }
+  }).then(res => {
+    realTimeData.value = res.data.data
+    realTimeData.value.currentMonth = dayjs().format('M')
+  })
+}
+/**
+ * 获取用电数据
+ */
+function getUseElectricityData(val){
+  axios.get('https://mock.apipost.net/mock/2b03dbbac065001/starMarkingEquipment/powerLevel',{
+    params:{
+      apipost_id:"301ee3ee39fc85",
+      id:1,
+      startTime:dayjs().subtract(1, 'day').format('YYYY-MM') + "-01 00:00:00",
+      endTime:dayjs().endOf('month').format('YYYY-MM-DD') + " 23:59:59",
+      type:val
+    }
+  }).then(res => {
+    console.log(res.data)
+    if(val == 1){
+
+    }
+  })
+}
+function init(){
+  getStatusData()
+  getRealTimeData()
+  getUseElectricityData(1)
+  getUseElectricityData(2)
+}
+
+onMounted(() => {
+  init()
+})
 </script>
 <style lang="scss" scoped>
 .container{
@@ -300,109 +233,7 @@ function dateSwitch(type){
     }
     .content{
       margin-top:4px;
-      .top{
-        .item{
-          background: #fafafa;
-          background-image: radial-gradient(rgba(245,245,245,0.4) 30%,transparent 0),radial-gradient(rgba(245,245,245,0.4) 30%,transparent 0);
-          width:calc(12.5% - 10px );
-          border-radius: 5px;
-          padding:6px 10px 12px 10px;
-          display: inline-block;
-          margin-right:10px;
-          color:rgba(0,0,0,0.65);
-          >div{
-            height:34px;
-            line-height: 34px;
-            margin-top:-6px;
-            >div,>p{
-              width:50%;
-              display: inline-block;
-              vertical-align: top;
-            }
-            img{
-              width:34px;
-              margin:0 calc(50% - 18px);
-            }
-            p{
-              font-size: 18px;
-              
-              text-align: center;
-  
-            }
-          }
-        }
-        .item:nth-child(8){
-          margin-right:0px;
-        }
-      }
       .bottom{
-        .left{
-          width:40%;
-          display: inline-block;
-          vertical-align: top;
-          .item{
-            margin:10px 10px 0 0;
-            vertical-align: top;
-            display: inline-block;
-            color:rgba(0,0,0,0.65);
-            .top{
-              img{
-                width:20px;
-                vertical-align: top;
-                margin:0px 6px -4px 0;
-              }
-            }
-            .content{
-              border-radius:  0 5px 5px 0;
-              border-left:2px solid #08b762;
-              .list{
-                padding:1px 10px;
-                background: #fafafa;
-
-                >p{
-                  margin:0;
-                  padding:2px 0;
-                  display: inline-block;
-                  border-bottom:2px solid #fff;
-                }
-                >p:nth-child(1){
-                  width:45%;
-                }
-                >p:nth-child(2){
-                  width:55%;
-                  text-align: right;
-                  span{
-                    font-size: 10px;
-                    margin-left:4px;
-                  }
-                }
-              }
-              .list:last-child{
-                p{
-                  border-bottom:none;
-                }
-              }
-              .two{
-                p{
-                  height:42px !important;
-                  line-height: 42px;
-                }
-              }
-              .three2{
-                p{
-                  height:37.3px !important;
-                  line-height: 37.3px;
-                }
-              }
-            }
-          }
-          .item1{
-            width:calc(33.33% - 10px);
-          }
-          .item2{
-            width:calc(50% - 10px);
-          }
-        }
         .right{
           width:calc(60% - 10px);
           display: inline-block;
@@ -464,89 +295,7 @@ function dateSwitch(type){
       }
     }
     .content{
-      .left{
-        width:50%;
-        display: inline-block;
-        vertical-align: top;
-        >div{
-          width:50%;
-          display: inline-block;
-        }
-        .item{
-          width:calc(50% - 5px);
-          padding:45px 10px;
-          margin-right:5px;
-          margin-top:4px;
-          display: inline-block;
-          background:  #fafafa;
-        }
-        .item:nth-child(4n){
-          margin-right:0;
-        }
-        .item1{
-          >div{
-            display: inline-block;
-            vertical-align: middle;
-            color:#000;
-          }
-          >div:nth-child(1){
-            width:35%;
-            img{
-              width:25px;
-              margin-left:10px;
-            }
-            vertical-align: middle;
-          }
-          >div:nth-child(2){
-            width:65%;
-            div:nth-child(1){
-              font-size: 16px;
-            }
-           div:nth-child(2){
-              font-size: 14px;
-              margin-top:6px;
-              span{
-                font-size: 10px;
-                margin-left:4px;
-              }
-            }
-          }
-        }
-        .item2{
-          >div{
-            width:50%;
-            display: inline-block;
-            vertical-align: middle;
-            color:rgba(0,0,0,0.65);
-            padding:0 10px;
-            >div:nth-child(2){
-              margin-top:10px;
-              span:nth-child(1){
-                font-size: 10px;
-                text-align: right;
-                margin-right:6px;
-              }
-              span:nth-child(2)::after{
-                display: inline-block;
-                content: ""; /* 伪元素不包含内容 */
-                width: 0; /* 必须设置为0，因为我们不显示宽度 */
-                height: 0; /* 必须设置为0，因为我们不显示高度 */
-                margin-left: -5px; /* 根据需要调整，这里是让箭头中心对齐 */
-                border-left: 5px solid transparent; /* 左边框透明 */
-                border-right: 5px solid transparent; /* 右边框透明 */
-                border-top: 5px solid #08b762; /* 上边框是三角形的颜色 */
-              }
-            }
-          }
-          >div:nth-child(2){
-            text-align: right;
-            >div:nth-child(2){
-              color:#08b762;
-            }
-          }
-        }
-            
-      }
+  
       .right{
         width:calc(50% - 10px);
         margin-top:.5px;

src/views/starMarkingEquipment/components/realTime.vue

@@ -0,0 +1,211 @@
+<template>
+    <div class="left">
+        <div class="item item1" v-for="(item,index) in data[0]" :key="index">
+            <div class="top">
+            <img :src="item.img" alt="">
+            <span>{{ item.title }}</span>
+            </div>
+            <div class="content">
+            <div class="list" v-for="(item2,index2) in item.array" :key="index2">
+                <p>{{ item2.name }}</p>
+                <p>{{ item2.value }}<span>{{ item2.unit }}</span></p>
+            </div>
+            </div>
+        </div>
+        <div class="item item2" v-for="(item,index) in data[1]" :key="index">
+            <div class="top">
+            <img :src="item.img" alt="">
+            <span>{{ item.title }}</span>
+            </div>
+            <div class="content">
+            <div :class="['list',item.num]" v-for="(item2,index2) in item.array" :key="index2" >
+                <p>{{ item2.name }}</p>
+                <p>{{ item2.value }}<span>{{ item2.unit }}</span></p>
+            </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------接口引入-----------------------------------*/
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+/*----------------------------------store引入----------------------------------*/
+/*----------------------------------公共方法引入------------------------------*/
+/*----------------------------------常量声明-----------------------------------*/
+import demand from '@/assets/images/demand.png'
+import I from '@/assets/images/I.png'
+import power from '@/assets/images/power.png'
+import powerqulity from '@/assets/images/powerqulity.png'
+import UA from '@/assets/images/UA.png'
+import UAB from '@/assets/images/UAB.png'
+import dian from '@/assets/images/dian.png'
+/*----------------------------------变量声明-----------------------------------*/
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+const data = ref([
+  [
+      { title: '电流', img: I,
+        array:[
+          { name: 'IA',value: '2.81',unit:'A' },
+          { name: 'IB',value: '2.87',unit:'A' },
+          { name: 'IC',value: '2.52',unit:'A' },
+        ]
+      },
+      { title: '相电压', img: UA, 
+        array:[
+          { name: 'UA',value: '5.92',unit:'kW' },
+          { name: 'UB',value: '2.91',unit:'kW' },
+          { name: 'UC',value: '2.93',unit:'kW' },
+        ]
+      },
+      { title: '线电压', img: UAB, 
+        array:[
+          { name: 'UAB',value: '10224.5',unit:'V' },
+          { name: 'UBC',value: '10250',unit:'V' },
+          { name: 'UCA',value: '10268',unit:'V' },
+        ]
+      }
+  ],
+  [
+      { title: '功率', img: power,num:"two",
+        array:[
+          { name: '有功功率',value: '--',unit:'kW' },
+          { name: '无功功率',value: '--',unit:'kW' },
+        ]
+      },
+      { title: '需量', img: demand, num:"three",
+        array:[
+          { name: '当前需量',value: '--',unit:'kV' },
+          { name: '当月最大需量',value: '--',unit:'kV' },
+          { name: '发生时间',value: '--',unit:'' },
+        ]
+      },
+      { title: '电能质量', img: powerqulity, num:"three2",
+        array:[
+          { name: '当月功率因数',value: '--',unit:'--' },
+          { name: '频率',value: '--',unit:'Hz' },
+          { name: '实时功率因数',value: '--',unit:'' },
+        ]
+      },
+      { title: '电度', img: dian, num:"four",
+        array:[
+          { name: '正向有功',value: '--',unit:'kWh', },
+          { name: '反向有功',value: '--',unit:'kWh' },
+          { name: '正向无功',value: '--',unit:'kvarh' },
+          { name: '反向无功',value: '--',unit:'kvarh' },
+        ]
+      }
+  ],
+])
+/*----------------------------------方法声明-----------------------------------*/
+onMounted(() => {
+
+})
+watch(
+  () => props.data,
+  (newVal, oldVal, clear) => {
+    data.value[0][0].array[0].value = newVal.ia
+    data.value[0][0].array[1].value = newVal.ib
+    data.value[0][0].array[2].value = newVal.ic
+
+    data.value[0][1].array[0].value = newVal.ua
+    data.value[0][1].array[1].value = newVal.ub
+    data.value[0][1].array[2].value = newVal.uc
+
+    data.value[0][2].array[0].value = newVal.uab
+    data.value[0][2].array[1].value = newVal.ubc
+    data.value[0][2].array[2].value = newVal.uca
+
+    data.value[1][0].array[0].value = newVal.yggl
+    data.value[1][0].array[1].value = newVal.wggl
+
+    data.value[1][1].array[0].value = newVal.dqxl
+    data.value[1][1].array[1].value = newVal.dyzdxl
+    data.value[1][1].array[2].value = newVal.fssj
+
+    data.value[1][2].array[0].value = newVal.dyglys
+    data.value[1][2].array[0].unit =  newVal.currentMonth + "月1日 起"
+    data.value[1][2].array[1].value = newVal.pl
+    data.value[1][2].array[2].value = newVal.ssglys
+
+    data.value[1][3].array[0].value = newVal.zxyg
+    data.value[1][3].array[1].value = newVal.fxyg
+    data.value[1][3].array[2].value = newVal.zxwg
+    data.value[1][3].array[3].value = newVal.fxwg
+
+})
+</script>
+<style lang="scss" scoped>
+.left{
+  width:40%;
+  display: inline-block;
+  vertical-align: top;
+  .item{
+    margin:10px 10px 0 0;
+    vertical-align: top;
+    display: inline-block;
+    color:rgba(0,0,0,0.65);
+    .top{
+      img{
+        width:20px;
+        vertical-align: top;
+        margin:0px 6px -4px 0;
+      }
+    }
+    .content{
+      border-radius:  0 5px 5px 0;
+      border-left:2px solid #08b762;
+      .list{
+        padding:1px 10px;
+        background: #fafafa;
+
+        >p{
+          margin:0;
+          padding:2px 0;
+          display: inline-block;
+          border-bottom:2px solid #fff;
+        }
+        >p:nth-child(1){
+          width:45%;
+        }
+        >p:nth-child(2){
+          width:55%;
+          text-align: right;
+          span{
+            font-size: 10px;
+            margin-left:4px;
+          }
+        }
+      }
+      .list:last-child{
+        p{
+          border-bottom:none;
+        }
+      }
+      .two{
+        p{
+          height:42px !important;
+          line-height: 42px;
+        }
+      }
+      .three2{
+        p{
+          height:37.3px !important;
+          line-height: 37.3px;
+        }
+      }
+    }
+  }
+  .item1{
+    width:calc(33.33% - 10px);
+  }
+  .item2{
+    width:calc(50% - 10px);
+  }
+}
+</style>

src/views/starMarkingEquipment/components/status.vue

@@ -0,0 +1,96 @@
+<template>
+    <div>
+        <div class="item" v-for="(item,index) in statusData" :key="index">
+            <p>{{ item.name }}</p>
+            <div>
+                <div>
+                <img :src="item.img" alt="">
+                </div>
+                <p :style="{ color: item.value === 'ON'? '#08b762': '#e00202' }">{{ item.value }}</p>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------接口引入-----------------------------------*/
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+/*----------------------------------store引入----------------------------------*/
+/*----------------------------------公共方法引入------------------------------*/
+/*----------------------------------常量声明-----------------------------------*/
+import running from '@/assets/images/running.png'
+import a from '@/assets/images/a.png'
+import b from '@/assets/images/b.png'
+import c from '@/assets/images/c.png'
+import temperature from '@/assets/images/temperature.png'
+/*----------------------------------变量声明-----------------------------------*/
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+const statusData = ref([
+  { name: '回路带电/停电', value: 'ON' , img: running },
+  { name: '环境温度', value: 'ON' , img: temperature },
+  { name: '剩余电流超限', value: 'ON' , img: a },
+  { name: '线路电气故障总', value: 'ON' , img: b },
+  { name: '电压缺相', value: 'ON' , img: c },
+  { name: '线路开关状态', value: 'ON' , img: a },
+  { name: '电压越上限告警', value: 'ON' , img: b },
+  { name: '电压越下限告警', value: 'ON' , img: c },
+])
+/*----------------------------------方法声明-----------------------------------*/
+onMounted(() => {
+
+})
+watch(
+  () => props.data,
+  (newVal, oldVal, clear) => {
+    statusData.value[0].value = newVal.powerOutage ? 'OFF' : 'ON'
+    statusData.value[1].value = newVal.ambientTemperature ? 'OFF' : 'ON'
+    statusData.value[2].value = newVal.transfinite ? 'OFF' : 'ON'
+    statusData.value[3].value = newVal.electricalFault ? 'OFF' : 'ON'
+    statusData.value[4].value = newVal.voltagePhaseLoss ? 'OFF' : 'ON'
+    statusData.value[5].value = newVal.lineSwitchStatus ? 'OFF' : 'ON'
+    statusData.value[6].value = newVal.upperLimitAlarm ? 'OFF' : 'ON'
+    statusData.value[7].value = newVal.lowerLimitAlarm ? 'OFF' : 'ON'
+})
+</script>
+<style lang="scss" scoped>
+.top{
+    .item{
+        background: #fafafa;
+        background-image: radial-gradient(rgba(245,245,245,0.4) 30%,transparent 0),radial-gradient(rgba(245,245,245,0.4) 30%,transparent 0);
+        width:calc(12.5% - 10px );
+        border-radius: 5px;
+        padding:6px 10px 12px 10px;
+        display: inline-block;
+        margin-right:10px;
+        color:rgba(0,0,0,0.65);
+        >div{
+        height:34px;
+        line-height: 34px;
+        margin-top:-6px;
+        >div,>p{
+            width:50%;
+            display: inline-block;
+            vertical-align: top;
+        }
+        img{
+            width:34px;
+            margin:0 calc(50% - 18px);
+        }
+        p{
+            font-size: 18px;
+            
+            text-align: center;
+
+        }
+        }
+    }
+    .item:nth-child(8){
+        margin-right:0px;
+    }
+}
+</style>

src/views/starMarkingEquipment/components/useElectricity.vue

@@ -0,0 +1,143 @@
+<template>
+    <div class="left">
+          <div v-for="(item,index) in data" :key="index">
+            <div class="item item1">
+            <div>
+              <img :src="item.img" alt="">
+            </div>
+            <div>
+              <div>{{ item.value }}</div>
+              <div>{{ item.name }}<span>{{ item.unit }}</span></div>
+            </div>
+          </div>
+          <div class="item item2">
+            <div>
+              <div>{{ item.synchronism }}</div>
+              <div>{{ item.synchronisNum }}</div>
+            </div>
+            <div>
+              <div>环比</div>
+              <div>{{ item.proportion }} <span>%</span><span></span></div>
+            </div>
+          </div>
+          </div>
+          
+        </div>
+</template>
+<script setup>
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------接口引入-----------------------------------*/
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+/*----------------------------------store引入----------------------------------*/
+/*----------------------------------公共方法引入------------------------------*/
+/*----------------------------------常量声明-----------------------------------*/
+import dl from '@/assets/images/dl.png'
+import money from '@/assets/images/money.png'
+/*----------------------------------变量声明-----------------------------------*/
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+const data = ref([
+  { name: '当日用电', value: '3681', unit: 'kWh', img: dl, synchronism: '昨日同期', synchronisNum:"6162", proportion:"45" },
+  { name: '当日电费', value: '1202.43', unit: '元', img: money, synchronism: '昨日同期', synchronisNum:"3300.88", proportion:"63.57" },
+  { name: '当月用电', value: '129465', unit: 'kWh', img: dl, synchronism: '上月同期', synchronisNum:"148950", proportion:"13.08" },
+  { name: '当月电费', value: '73618.45', unit: '元', img: money, synchronism: '上月同期', synchronisNum:"91539.14", proportion:"19.58" },
+])
+/*----------------------------------方法声明-----------------------------------*/
+onMounted(() => {
+
+})
+watch(
+  () => props.data,
+  (newVal, oldVal, clear) => {
+   
+
+})
+</script>
+<style lang="scss" scoped>
+.left{
+    width:50%;
+    display: inline-block;
+    vertical-align: top;
+    >div{
+        width:50%;
+        display: inline-block;
+    }
+    .item{
+        width:calc(50% - 5px);
+        padding:45px 10px;
+        margin-right:5px;
+        margin-top:4px;
+        display: inline-block;
+        background:  #fafafa;
+    }
+    .item:nth-child(4n){
+        margin-right:0;
+    }
+    .item1{
+        >div{
+        display: inline-block;
+        vertical-align: middle;
+        color:#000;
+        }
+        >div:nth-child(1){
+        width:35%;
+        img{
+            width:25px;
+            margin-left:10px;
+        }
+        vertical-align: middle;
+        }
+        >div:nth-child(2){
+        width:65%;
+        div:nth-child(1){
+            font-size: 16px;
+        }
+        div:nth-child(2){
+            font-size: 14px;
+            margin-top:6px;
+            span{
+            font-size: 10px;
+            margin-left:4px;
+            }
+        }
+        }
+    }
+    .item2{
+        >div{
+        width:50%;
+        display: inline-block;
+        vertical-align: middle;
+        color:rgba(0,0,0,0.65);
+        padding:0 10px;
+        >div:nth-child(2){
+            margin-top:10px;
+            span:nth-child(1){
+            font-size: 10px;
+            text-align: right;
+            margin-right:6px;
+            }
+            span:nth-child(2)::after{
+            display: inline-block;
+            content: ""; /* 伪元素不包含内容 */
+            width: 0; /* 必须设置为0，因为我们不显示宽度 */
+            height: 0; /* 必须设置为0，因为我们不显示高度 */
+            margin-left: -5px; /* 根据需要调整，这里是让箭头中心对齐 */
+            border-left: 5px solid transparent; /* 左边框透明 */
+            border-right: 5px solid transparent; /* 右边框透明 */
+            border-top: 5px solid #08b762; /* 上边框是三角形的颜色 */
+            }
+        }
+        }
+        >div:nth-child(2){
+        text-align: right;
+        >div:nth-child(2){
+            color:#08b762;
+        }
+        }
+    }
+}
+</style>

vue.config.js

@@ -64,8 +64,7 @@ module.exports = {
         // 注释掉的地方是前端配置代理访问后端的示例
         proxy: {
             './': {
-                // target: 'https://qhome.usky.cn/fivapi/',
-                target: 'http://192.168.20.140:8011/',
+                target: 'https://qhome.usky.cn/fivapi/',
                 ws: false,
                 changeOrigin: true,
                 pathRewrite: {