Merge branch 'wangtao' of fanghuisheng/admin-fiveFollowing into master

public/index.html

@@ -16,15 +16,16 @@
     content="<%= VUE_APP_TITLE %>官网与文档基于vue-admin-beautiful-pro构建，简称vab（是一款超棒的vue+element中后台前端快速开发框架），QQ群972435319，作者：<%= VUE_APP_AUTHOR %>"
     name="description" />
   <meta content="<%= VUE_APP_AUTHOR %>" name="author" />
+  <script src="//api.map.baidu.com/getscript?type=webgl&v=3.0&ak=P2vnNIB2zLRGF3Oi3RmoH2oG5IjBlsPG" type="text/javascript"></script>
   <link href="<%= BASE_URL %>static/css/loading.css" rel="stylesheet" />
   <script>
-    var _hmt = _hmt || [];
-    (function () {
-      var hm = document.createElement("script");
-      hm.src = "https://hm.baidu.com/hm.js?7174bade1219f9cc272e7978f9523fc8";
-      var s = document.getElementsByTagName("script")[0];
-      s.parentNode.insertBefore(hm, s);
-    })();
+    // var _hmt = _hmt || [];
+    // (function () {
+    //   var hm = document.createElement("script");
+    //   hm.src = "https://hm.baidu.com/hm.js?7174bade1219f9cc272e7978f9523fc8";
+    //   var s = document.getElementsByTagName("script")[0];
+    //   s.parentNode.insertBefore(hm, s);
+    // })();
   </script>
 </head>
 

public/static/config.js

@@ -4,13 +4,27 @@ var PLATFROM_CONFIG = {};
 // PLATFROM_CONFIG.baseUrl = "http://172.16.1.196:8010/" //超博本地
 
 if (window.location.host.indexOf('localhost') != -1 || window.location.host.indexOf('pcdev.ewoogi.com') != -1) {
-    PLATFROM_CONFIG.baseUrl = "https://qhome.usky.cn/fivapi/" //线上--->测试
+    // PLATFROM_CONFIG.baseUrl = "https://qhome.usky.cn/fivapi/" //线上--->测试
+    // 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.images = "https://qhome.usky.cn/file/" //线上图片--->测试
     PLATFROM_CONFIG.fileUrl = "https://qhome.usky.cn/file/" //xlsx文件访问路径--->测试
+
+    
+
+    // PLATFROM_CONFIG.baseUrl = "https://wx.ewoogi.com/api/" //线上--->正式
+    // PLATFROM_CONFIG.images = "https://wx.ewoogi.com/file/" //线上图片--->正式
+    // PLATFROM_CONFIG.fileUrl = "https://wx.ewoogi.com/file/" //xlsx文件访问路径--->正式
 } else {
-    PLATFROM_CONFIG.baseUrl = "https://wx.ewoogi.com/api/" //线上--->正式
-    PLATFROM_CONFIG.images = "https://wx.ewoogi.com/file/" //线上图片--->正式
-    PLATFROM_CONFIG.fileUrl = "https://wx.ewoogi.com/file/" //xlsx文件访问路径--->正式
+    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文件访问路径--->测试
+
+    // PLATFROM_CONFIG.baseUrl = "https://wx.ewoogi.com/api/" //线上--->正式
+    // PLATFROM_CONFIG.images = "https://wx.ewoogi.com/file/" //线上图片--->正式
+    // PLATFROM_CONFIG.fileUrl = "https://wx.ewoogi.com/file/" //xlsx文件访问路径--->正式
 }
 
 // 本地json文件请求路径

src/assets/js/baiduMap.js

@@ -0,0 +1,172 @@
+
+// import { facilityPopInfo } from "@/api/business/IOTNEW"; //设施类型获取
+// import normalImg from "@/assets/images/business/iot/building.png";
+// import alarmImg from "@/assets/images/business/iot/building_alarm.png";
+// import bgc from "@/assets/images/business/iot/dialog-bg2.png";
+// import { timestampToTime } from "@/assets/js/dataFormate.js";
+// import { deviceType } from "@/assets/js/type";
+import mark1 from "@/assets/svg/mark1.svg";
+import mark2 from "@/assets/svg/mark2.svg";
+var map = null //地图
+var label = null //文本标注
+var num = 3 //地图缩放比例
+var angleNum = 20 //旋转角度
+var bPoints = new Array() //撒点坐标集
+var center = {
+        longitude: 121.490303,
+        latitude: 31.182926
+} //中心点
+
+    /**
+     * 地图初始化
+     * @param {*类型} type
+     */
+function initMap() {
+         // 初始化地图
+        var point = new BMapGL.Point(center.longitude, center.latitude); // 创建点坐标
+        map = new window.BMapGL.Map("map"); // 初始化地图，创建Map实例。
+        map.centerAndZoom(point, 8); // 初始化地图，设置中心点坐标和地图级别。
+
+        map.setMapType(BMAP_NORMAL_MAP);
+        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
+        map.setTilt(angleNum); //视角
+}
+
+/**
+ * 文本标注状态
+ */
+function labelState(data){
+    var labels = document.getElementsByClassName("BMapLabel");
+    if(!data){
+        for (let i = 0; i < labels.length; i++) {
+            map.removeOverlay(labels[i]);
+            i--
+        }
+    }else{
+        while (labels.length > 0) {
+            for (let i = 0; i < labels.length; i++) {
+                map.removeOverlay(labels[i]);
+                i--
+            }
+        }
+        for(let i=0;i<data.length;i++){
+            //文本标注
+            var point = new BMapGL.Point(data[i].longitude, data[i].latitude);
+            var content = data[i].name;
+            label = new BMapGL.Label(content, { // 创建文本标注
+                position: point,
+                offset: new BMapGL.Size(0, 10),
+            })
+            label.setStyle({                              // 设置label的样式
+                color: '#000',
+                fontSize: '12px',
+                border: '1px solid #ccc',
+                borderRadius: '3px',
+                padding:'3px 5px 1px',
+            })
+            map.addOverlay(label); // 将标注添加到地图中
+            // 隐藏初始文本标注
+        }
+    }
+        
+}
+
+/**
+ * 撒点
+ * @param {*数据} data  
+ */
+function markers(data) {
+    map.clearOverlays()
+    if(data){
+        for (let i = 0; i < data.length; i++) {
+            let point = new BMapGL.Point(data[i].longitude, data[i].latitude);
+            // 创建点标记
+            var myIcon = new BMapGL.Icon(data[i].state ? mark2 :  mark1, new BMapGL.Size(17.5, 22), { 
+                // offset: new BMapGL.Size(-14, 17), //指定定位位置
+                // anchor: new BMapGL.Size(17.5, 22.5), //这里有两个数字10，30分别对应图标的一半宽度和高度
+                imageOffset: new BMapGL.Size(0, 0), //设置图片偏移,
+            });
+            var marker = new BMapGL.Marker(point, { icon: myIcon });
+            marker.id = data[i].id
+            map.addOverlay(marker); // 将点标记添加到地图中
+    
+            // 点标记点击事件（弹框）
+            var content = `
+                <div class='boxs'>
+                    <div class='title'>${data[i].name}</div>
+                        <div class='content'>
+                            <div class='item' style='color:${data[i].state == 1 ? "#333" : "#ff0000"}'><div>站点状态</div><div>${data[i].state == 1 ? "正常" : "离线"} </div></div>
+                            <div class='item'><div>设备总数</div><div></div>${data[i].tatal}</div>
+                            <div class='item' style='color:${data[i].alert > 0 ? "#ff0000" : "#333"}'><div>告警数</div><div></div>${data[i].alert}</div>
+                            <div class='item'><div>电话</div><div></div>${data[i].tel}</div>
+                            <div class='item'><div>地址</div><div></div>${data[i].address}</div>
+                        </div>
+                </div>
+            `;
+            const infoWindow = new BMapGL.InfoWindow(content);
+            // marker.addEventListener("mouseover", () => {
+            //     map.openInfoWindow(infoWindow, point);
+            // });
+            // marker.addEventListener("mouseout", () => {
+            //     map.closeInfoWindow(infoWindow, point);
+            // });
+            marker.addEventListener("click", () => {
+                map.openInfoWindow(infoWindow, point);
+            });
+    
+        }
+    }
+}
+
+/**
+ * 坐标转换
+ */
+// 百度转高德
+function bd09togcj02(bd_lng, bd_lat) {
+    const X_PI = Math.PI * 3000.0 / 180.0
+    const x = bd_lng - 0.0065
+    const y = bd_lat - 0.006
+    const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI)
+    const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI)
+    const gg_lng = z * Math.cos(theta)
+    const gg_lat = z * Math.sin(theta)
+    return { lng: gg_lng, lat: gg_lat }
+}
+// 高德百度坐标
+function gcj02tobd09(lng, lat) {
+    const xsPI = 3.14159265358979324 * 3000.0 / 180.0
+    const bdlat = Number(lat)
+    const bdlng = Number(lng)
+    const z = Math.sqrt(bdlng * bdlng + bdlat * bdlat) + 0.00002 * Math.sin(bdlat * xsPI)
+    const theta = Math.atan2(bdlat, bdlng) + 0.000003 * Math.cos(bdlng * xsPI)
+    const bdslng = z * Math.cos(theta) + 0.0065
+    const bdslat = z * Math.sin(theta) + 0.006
+    return [bdslng, bdslat]
+}
+
+
+/**
+ * 
+ * @param {主题颜色} color 
+ */
+
+function mapColorSet(color) {
+    let ms = null
+    if (color == "f6b509c91c1e8f966ae7d858b8d14520") {
+        ms = color
+    } else {
+        ms = `amap://styles/${color}`
+    }
+    map.setMapStyleV2({
+        styleId: color
+    });
+
+}
+
+export {
+    initMap,
+    markers,
+    gcj02tobd09,
+    mapColorSet,
+    labelState,
+}

src/assets/svg/map.svg

@@ -0,0 +1,7 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="20px" height="18px">
+<path fill-rule="evenodd"
+ d="M19.737,1.594 C19.572,1.459 19.352,1.402 19.139,1.439 L13.835,2.355 L12.480,1.918 C12.094,1.793 11.682,1.996 11.554,2.368 C11.427,2.740 11.634,3.142 12.018,3.266 L13.549,3.760 C13.584,3.771 13.621,3.780 13.658,3.786 L13.658,9.552 L10.630,8.647 C10.373,8.570 10.100,8.711 10.021,8.960 C9.942,9.210 10.086,9.475 10.344,9.552 L13.658,10.542 L13.658,16.487 L7.316,14.758 L7.316,12.082 C7.316,11.820 7.098,11.608 6.829,11.608 C6.559,11.608 6.341,11.820 6.341,12.082 L6.341,14.770 L1.463,15.513 L1.463,2.138 C1.463,1.746 1.135,1.428 0.731,1.428 C0.327,1.428 -0.000,1.746 -0.000,2.138 L-0.000,16.343 C-0.000,16.551 0.093,16.748 0.256,16.883 C0.418,17.018 0.634,17.078 0.845,17.045 L6.906,16.121 L13.704,17.975 C13.769,17.992 13.835,18.001 13.902,18.001 C13.946,18.001 13.990,17.997 14.033,17.990 L19.398,17.042 C19.746,16.981 19.999,16.686 19.999,16.343 L19.999,2.138 C19.999,1.928 19.903,1.729 19.737,1.594 ZM18.535,15.751 L14.633,16.440 L14.633,10.591 L18.535,9.932 L18.535,15.751 ZM18.535,8.971 L14.633,9.630 L14.633,3.660 L18.535,2.986 L18.535,8.971 ZM3.258,5.833 C3.497,6.293 5.695,9.301 6.364,10.212 C6.501,10.399 6.723,10.510 6.959,10.510 L6.962,10.510 C7.199,10.509 7.421,10.397 7.558,10.208 C8.224,9.290 10.414,6.261 10.639,5.840 C10.934,5.289 11.097,4.646 11.097,4.031 C11.097,1.812 9.237,0.007 6.951,0.007 C4.665,0.007 2.804,1.812 2.804,4.031 C2.804,4.646 2.957,5.251 3.258,5.832 L3.258,5.833 ZM6.951,1.427 C8.430,1.427 9.633,2.595 9.633,4.031 C9.633,4.417 9.527,4.838 9.341,5.184 C9.214,5.414 8.107,6.973 6.956,8.568 C5.900,7.117 4.704,5.450 4.564,5.193 C4.368,4.812 4.268,4.421 4.268,4.031 C4.268,2.595 5.471,1.427 6.951,1.427 ZM6.341,5.057 C6.718,5.269 7.184,5.269 7.560,5.057 C7.938,4.846 8.170,4.455 8.170,4.032 C8.170,3.609 7.938,3.219 7.560,3.007 C7.184,2.796 6.718,2.796 6.341,3.007 C5.964,3.219 5.731,3.609 5.731,4.032 C5.731,4.455 5.964,4.846 6.341,5.057 Z"/>
+</svg>

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(248,166,165)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(228,81,71)" stop-opacity="1" />
+</linearGradient>
+<linearGradient id="PSgrad_1" x1="0%" x2="68.2%" y1="0%" y2="73.135%">
+  <stop offset="0%" stop-color="rgb(228,81,71)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(248,166,165)" stop-opacity="1" />
+</linearGradient>
+<linearGradient id="PSgrad_2" x1="0%" x2="0%" y1="0%" y2="100%">
+  <stop offset="0%" stop-color="rgb(228,81,71)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(248,166,165)" 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(248,166,165)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(228,81,71)" 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/mark2.svg

@@ -0,0 +1,46 @@
+<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(142,212,138)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(77,200,75)" stop-opacity="1" />
+</linearGradient>
+<linearGradient id="PSgrad_1" x1="0%" x2="68.2%" y1="0%" y2="73.135%">
+  <stop offset="0%" stop-color="rgb(68,199,66)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(142,212,138)" stop-opacity="1" />
+</linearGradient>
+<linearGradient id="PSgrad_2" x1="0%" x2="0%" y1="0%" y2="100%">
+  <stop offset="0%" stop-color="rgb(68,199,66)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(142,212,138)" stop-opacity="1" />
+</linearGradient>
+<linearGradient id="PSgrad_3" x1="0%" x2="0%" y1="0%" y2="100%">
+  <stop offset="0%" stop-color="rgb(142,212,138)" stop-opacity="1" />
+  <stop offset="100%" stop-color="rgb(77,200,75)" 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"/>
+<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"/>
+<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/menu.svg

@@ -0,0 +1,7 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="20px" height="18px">
+<path fill-rule="evenodd"  fill="rgb(51, 51, 51)"
+ d="M18.889,2.250 L6.667,2.250 C6.053,2.250 5.556,1.746 5.556,1.125 C5.556,0.504 6.053,-0.000 6.667,-0.000 L18.889,-0.000 C19.503,-0.000 20.000,0.504 20.000,1.125 C20.000,1.746 19.503,2.250 18.889,2.250 ZM2.222,2.250 L1.111,2.250 C0.497,2.250 0.000,1.746 0.000,1.125 C0.000,0.504 0.497,-0.000 1.111,-0.000 L2.222,-0.000 C2.836,-0.000 3.333,0.504 3.333,1.125 C3.333,1.746 2.836,2.250 2.222,2.250 ZM18.889,10.125 L6.667,10.125 C6.053,10.125 5.556,9.621 5.556,9.000 C5.556,8.379 6.053,7.875 6.667,7.875 L18.889,7.875 C19.503,7.875 20.000,8.379 20.000,9.000 C20.000,9.621 19.503,10.125 18.889,10.125 ZM2.222,10.125 L1.111,10.125 C0.497,10.125 0.000,9.621 0.000,9.000 C0.000,8.379 0.497,7.875 1.111,7.875 L2.222,7.875 C2.836,7.875 3.333,8.379 3.333,9.000 C3.333,9.621 2.836,10.125 2.222,10.125 ZM18.889,18.000 L6.667,18.000 C6.053,18.000 5.555,17.497 5.555,16.875 C5.554,16.254 6.051,15.750 6.665,15.750 C6.666,15.750 6.666,15.750 6.667,15.750 L18.889,15.750 C19.503,15.750 20.000,16.254 19.999,16.875 C19.999,17.496 19.502,17.999 18.889,18.000 ZM2.222,18.000 L1.111,18.000 C0.497,17.999 0.000,17.495 0.001,16.874 C0.001,16.253 0.498,15.750 1.111,15.750 L2.222,15.750 C2.836,15.750 3.333,16.254 3.333,16.875 C3.332,17.496 2.835,17.999 2.222,18.000 Z"/>
+</svg>

src/assets/svg/site.svg

@@ -0,0 +1,7 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="15px" height="18px">
+<path fill-rule="evenodd"  fill=""
+ d="M14.972,7.784 C14.686,11.208 10.186,15.093 8.271,16.504 L13.176,16.504 L13.176,18.000 L1.805,18.000 L1.805,16.504 L6.710,16.504 C4.795,15.093 0.217,11.138 0.009,7.784 C-0.264,3.367 3.193,0.005 7.490,0.005 C11.788,0.005 15.344,3.321 14.972,7.784 ZM7.490,1.501 C4.020,1.501 1.017,4.166 1.505,7.784 C1.977,11.279 7.490,15.264 7.490,15.264 C7.490,15.264 13.208,11.243 13.476,7.784 C13.757,4.144 10.961,1.501 7.490,1.501 ZM7.490,10.354 C5.706,10.354 4.260,8.909 4.260,7.125 C4.260,5.341 5.706,3.896 7.490,3.896 C9.275,3.896 10.721,5.341 10.721,7.125 C10.721,8.909 9.274,10.354 7.490,10.354 ZM7.490,5.265 C6.463,5.265 5.630,6.098 5.630,7.125 C5.630,8.152 6.463,8.985 7.490,8.985 C8.518,8.985 9.351,8.152 9.351,7.125 C9.351,6.098 8.518,5.265 7.490,5.265 Z"/>
+</svg>

src/assets/svg/wifi.svg

@@ -0,0 +1,7 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="20px" height="15px">
+<path fill-rule="evenodd"  fill="rgb(51, 51, 51)"
+ d="M19.948,3.878 L19.145,4.853 C19.082,4.930 18.970,4.942 18.894,4.878 C16.461,2.851 13.353,1.635 9.963,1.635 C6.598,1.635 3.510,2.833 1.083,4.835 C1.009,4.896 0.898,4.885 0.835,4.810 L0.031,3.835 C-0.033,3.756 -0.022,3.640 0.056,3.576 C2.760,1.340 6.207,-0.001 9.963,-0.001 C13.743,-0.001 17.213,1.358 19.924,3.622 C20.002,3.685 20.013,3.801 19.948,3.878 ZM10.008,4.090 C12.790,4.090 15.338,5.101 17.318,6.780 C17.394,6.844 17.403,6.960 17.340,7.037 L16.537,8.012 C16.474,8.089 16.362,8.098 16.286,8.035 C14.585,6.594 12.395,5.726 10.008,5.726 C7.621,5.726 5.430,6.594 3.727,8.035 C3.653,8.098 3.539,8.089 3.477,8.012 L2.673,7.037 C2.610,6.960 2.619,6.844 2.695,6.780 C4.678,5.101 7.226,4.090 10.008,4.090 ZM10.008,8.180 C11.803,8.180 13.442,8.853 14.697,9.964 C14.770,10.030 14.779,10.143 14.717,10.218 L13.913,11.193 C13.848,11.271 13.734,11.280 13.658,11.214 C12.685,10.343 11.408,9.816 10.008,9.816 C8.608,9.816 7.331,10.343 6.357,11.216 C6.281,11.282 6.167,11.273 6.102,11.196 L5.299,10.221 C5.236,10.143 5.245,10.030 5.317,9.966 C6.574,8.853 8.212,8.180 10.008,8.180 ZM9.985,12.089 C10.775,12.089 11.414,12.740 11.414,13.543 C11.414,14.346 10.775,14.997 9.985,14.997 C9.196,14.997 8.556,14.346 8.556,13.543 C8.556,12.740 9.196,12.089 9.985,12.089 Z"/>
+</svg>

src/views/electricFire/dialogComponent.vue

@@ -0,0 +1,248 @@
+<template>
+  <div class="parentBlock">
+    <el-dialog
+      :title="dialogTitle"
+      v-model="dialogVisible"
+      width="640px"
+      @close="closeDialog()"
+      @open="open"
+    >
+      <el-form
+        ref="formInfo"
+        :model="form"
+        class="demo-form-inline"
+        label-width="100px"
+        :rules="rules"
+      >
+        <el-form-item label="台区名称：" prop="platformAreaName">
+          <el-input v-model="form.platformAreaName"></el-input>
+        </el-form-item>
+        <el-form-item label="台区编号：" prop="platformAreaCode">
+          <el-input v-model="form.platformAreaCode"></el-input>
+        </el-form-item>
+        <el-form-item label="台区地址：" prop="platformAreaAddress">
+          <el-input v-model="form.platformAreaAddress"></el-input>
+        </el-form-item>
+        <!-- <el-form-item label="站点列表:" prop="siteList">
+          <el-select
+            v-model="form.siteList"
+            multiple
+            filterable
+            collapse-tags
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            ></el-option>
+          </el-select>
+        </el-form-item> -->
+
+        <el-form-item
+          label="已勾选："
+          prop="siteCount"
+          v-if="dialogTitle == '编辑'"
+        >
+          <el-input
+            v-model="form.siteCount"
+            style="width: 200px"
+            disabled
+          ></el-input>
+          个站点
+        </el-form-item>
+        <el-form-item
+          label="共挂载："
+          prop="deviceCount"
+          v-if="dialogTitle == '编辑'"
+        >
+          <el-input
+            v-model="form.deviceCount"
+            style="width: 200px"
+            disabled
+          ></el-input>
+          个设备
+        </el-form-item>
+        <br />
+        <br />
+        <br />
+        <div style="text-align: right">
+          <el-button @click="closeDialog()">取消</el-button>
+          <el-button type="primary" @click="submitForm()">保存</el-button>
+        </div>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, watchEffect } from 'vue'
+import * as api from '@/api/stationManage/index.js'
+import { ElMessage } from 'element-plus'
+
+export default defineComponent({
+  name: 'DialogComponent',
+  emits: ['closeDialog'],
+  props: {
+    flag: Boolean,
+    dialogTitle: String,
+    itemInfo: Object,
+  },
+  setup(props, context) {
+    context
+
+    const dialogVisible = ref(false)
+    const formInfo = ref(null)
+
+    const form = ref([])
+
+    // open(): Dialog弹窗打开之前做的事
+    const open = () => {
+      console.log(form.value)
+      form.value = props.itemInfo.value
+       console.log(form.value)
+    }
+
+    const options = [
+      {
+        value: '选项1',
+        label: '站点一',
+      },
+      {
+        value: '选项2',
+        label: '站点二',
+      },
+      {
+        value: '选项3',
+        label: '站点三',
+      },
+      {
+        value: '选项4',
+        label: '站点四',
+      },
+      {
+        value: '选项5',
+        label: '站点五',
+      },
+    ]
+
+    // 关闭弹框
+    const closeDialog = () => {
+      resetForm()
+      context.emit('closeDialog', false)
+      dialogVisible.value = false
+    }
+    function resetForm() {
+      formInfo.value.resetFields()
+    }
+
+    watchEffect((fn, options) => {
+      fn, options
+      dialogVisible.value = props.flag
+    })
+
+    const roleValid = (rule, value, callback) => {
+      rule
+      if (value.length === 0) {
+        callback(new Error('角色不能为空'))
+      } else {
+        callback()
+      }
+    }
+
+    // 保存-修改操作
+    const submitForm = () => {
+      formInfo.value.validate((valid) => {
+        if (valid) {
+          if (props.dialogTitle === '新增') {
+            console.log(form.value)
+            api.platformAreaAdd(form.value).then((requset) => {
+              if (requset.status === 'SUCCESS') {
+                ElMessage.success({
+                  message: '新增成功',
+                  type: 'success',
+                })
+                closeDialog()
+              } else {
+                ElMessage.error(requset.msg)
+              }
+            })
+          } else {
+            api.platformAreaUpdate(form.value).then((requset) => {
+              if (requset.status === 'SUCCESS') {
+                ElMessage.success({
+                  message: '修改成功',
+                  type: 'success',
+                })
+                closeDialog()
+              } else {
+                ElMessage.error(requset.msg)
+              }
+            })
+          }
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+
+    return {
+      closeDialog,
+      dialogVisible,
+      options,
+      roleValid,
+      formInfo,
+      form,
+      open,
+      submitForm,
+      rules: {
+        platformAreaName: [
+          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
+          { required: true, message: '请输入台区名称', trigger: 'blur' },
+          {
+            max: 15,
+            message: '台区名称最多输入15个字符',
+            trigger: 'blur',
+          },
+        ],
+        platformAreaCode: [
+          { required: true, message: '请输入台区编号', trigger: 'blur' },
+          {
+            max: 15,
+            message: '台区编号最多输入15个字符',
+            trigger: 'blur',
+          },
+        ],
+        platformAreaAddress: [
+          { required: true, message: '请输入台区地址', trigger: 'blur' },
+          {
+            max: 15,
+            message: '台区地址最多输入15个字符',
+            trigger: 'blur',
+          },
+        ],
+        // siteList: [
+        //   { required: true, message: '请选择站点列表', trigger: 'change' },
+        // ],
+        // siteCount: [
+        //   { required: true, message: '请输入已选站点个数', trigger: 'blur' },
+        //   { trigger: 'blur' },
+        // ],
+        // deviceCount: [
+        //   { required: true, message: '请输入挂载设备个数', trigger: 'blur' },
+        //   { trigger: 'blur' },
+        // ],
+      },
+    }
+  },
+})
+</script>
+ 
+<style scoped lang="scss">
+.el-input,
+.el-select {
+  width: 240px;
+}
+</style>

src/views/electricFire/index.vue

@@ -0,0 +1,544 @@
+<template>
+  <div class="app-container electricFire">
+    <div class="top">
+      <div class="modeSwitching">
+        <div @click="switchMode(1)" :class="{ active: mode == 1 }">
+          <i class="el-icon-menu" ></i>
+          <span>平铺</span>
+        </div>
+        <div @click="switchMode(2)" :class="{ active: mode == 2 }">
+          <i class="el-icon-place"></i>
+          <span>表格</span>
+        </div>
+      </div>
+      <div class="time">
+        数据刷新时间：2025-07-08 11:00:00
+      </div>
+      <div class="statistics">
+        <div>
+          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/device.png" alt="">
+          <span>总设备数：13</span>
+        </div>
+        <div>
+          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/device.png" alt="">
+          <span>告警设备数：0</span>
+        </div>
+      </div>
+    </div>
+    <div class="middle">
+      <div class="square" v-if="mode == 1">
+        <div class="listWrap">
+          <div class="listItem">
+            <div class="header">
+              <div class="name">
+                设备名称
+              </div>
+              <div class="data">
+                <i class="el-icon-menu" ></i>
+                <span>历史数据</span>
+              </div>
+            </div>
+            <div class="content">
+              <div class="content_wrap">
+                <div class="content_top">
+                  <p>剩余电流</p>
+                  <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
+                </div>
+                <div class="content_middle">
+                  <div class="item">
+                    <p>线缆温度</p>
+                    <div class="list">
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
+                        </div>
+                      </div>
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
+                        </div>
+                      </div>
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="item">
+                    <p>电流</p>
+                    <div class="list">
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                        </div>
+                      </div>
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                        </div>
+                      </div>
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="content_bottom">
+                  安装位置
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="listItem">
+            <div class="header">
+              <div class="name">
+                设备名称
+              </div>
+              <div class="data">
+                <i class="el-icon-menu" ></i>
+                <span>历史数据</span>
+              </div>
+            </div>
+            <div class="content">
+              <div class="content_wrap">
+                <div class="content_top">
+                  <p>剩余电流</p>
+                  <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
+                </div>
+                <div class="content_middle">
+                  <div class="item">
+                    <p>线缆温度</p>
+                    <div class="list">
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
+                        </div>
+                      </div>
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
+                        </div>
+                      </div>
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="item">
+                    <p>电流</p>
+                    <div class="list">
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                        </div>
+                      </div>
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                        </div>
+                      </div>
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="content_bottom">
+                  安装位置
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="listItem">
+            <div class="header">
+              <div class="name">
+                设备名称
+              </div>
+              <div class="data">
+                <i class="el-icon-menu" ></i>
+                <span>历史数据</span>
+              </div>
+            </div>
+            <div class="content">
+              <div class="content_wrap">
+                <div class="content_top">
+                  <p>剩余电流</p>
+                  <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
+                </div>
+                <div class="content_middle">
+                  <div class="item">
+                    <p>线缆温度</p>
+                    <div class="list">
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
+                        </div>
+                      </div>
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
+                        </div>
+                      </div>
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="item">
+                    <p>电流</p>
+                    <div class="list">
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                        </div>
+                      </div>
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                        </div>
+                      </div>
+                      <div class="data">
+                        <span class="name">A项</span>
+                        <div>
+                          <span class="value">31.3℃</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class="content_bottom">
+                  安装位置
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="table" v-if="mode == 2">
+        <el-table :data="tableData" border stripe :header-cell-style="headClass">
+          <el-table-column
+            fixed
+            prop="platformAreaName"
+            label="设备名称"
+            width=""
+          ></el-table-column>
+          <el-table-column
+            prop="platformAreaCode"
+            label="安装位置"
+            width=""
+          ></el-table-column>
+          <el-table-column
+            prop="platformAreaAddress"
+            label="剩余电流"
+            width=""
+          ></el-table-column>
+          <el-table-column  label="线缆温度(℃)" align="center">
+            <el-table-column prop="siteCount" label="A相" width="">
+              <template #default="scope">
+                <span
+                  @click="goSiteList(scope.row)"
+                  v-if="scope.row.siteCount"
+                  style="cursor: pointer; color: #0284e8"
+                >
+                  {{ scope.row.siteCount }}
+                </span>
+                <span v-else>{{ scope.row.siteCount }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="siteCount" label="B相" width="">
+              <template #default="scope">
+                <span
+                  @click="goSiteList(scope.row)"
+                  v-if="scope.row.siteCount"
+                  style="cursor: pointer; color: #0284e8"
+                >
+                  {{ scope.row.siteCount }}
+                </span>
+                <span v-else>{{ scope.row.siteCount }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="siteCount" label="C相" width="">
+              <template #default="scope">
+                <span
+                  @click="goSiteList(scope.row)"
+                  v-if="scope.row.siteCount"
+                  style="cursor: pointer; color: #0284e8"
+                >
+                  {{ scope.row.siteCount }}
+                </span>
+                <span v-else>{{ scope.row.siteCount }}</span>
+              </template>
+            </el-table-column>
+          </el-table-column>
+          <el-table-column  label="电流(A)" align="center" width="">
+            <el-table-column prop="siteCount" label="A相" width="">
+              <template #default="scope">
+                <span
+                  @click="goSiteList(scope.row)"
+                  v-if="scope.row.siteCount"
+                  style="cursor: pointer; color: #0284e8"
+                >
+                  {{ scope.row.siteCount }}
+                </span>
+                <span v-else>{{ scope.row.siteCount }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="siteCount" label="B相" width="">
+              <template #default="scope">
+                <span
+                  @click="goSiteList(scope.row)"
+                  v-if="scope.row.siteCount"
+                  style="cursor: pointer; color: #0284e8"
+                >
+                  {{ scope.row.siteCount }}
+                </span>
+                <span v-else>{{ scope.row.siteCount }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="siteCount" label="C相" width="">
+              <template #default="scope">
+                <span
+                  @click="goSiteList(scope.row)"
+                  v-if="scope.row.siteCount"
+                  style="cursor: pointer; color: #0284e8"
+                >
+                  {{ scope.row.siteCount }}
+                </span>
+                <span v-else>{{ scope.row.siteCount }}</span>
+              </template>
+            </el-table-column>
+          </el-table-column>
+          <el-table-column fixed="right" label="历史数据" width="250">
+            <template #default="scope">
+              <el-button
+                type="text"
+                size="small"
+                @click.prevent="editRow(scope.row)"
+                :disabled="store.state.authorities.indexOf('修改')==-1"
+              >
+                编辑
+              </el-button>
+              <el-popconfirm
+                confirm-button-text="是"
+                cancel-button-text="否"
+                icon="el-icon-info"
+                icon-color="red"
+                title="确定删除?"
+                @confirm="handleDelete(scope.row)"
+                @cancel="cancelEvent"
+              >
+                <template #reference>
+                  <el-button type="text" size="small" class="delete-text" :disabled="store.state.authorities.indexOf('删除')==-1">
+                    
+                    删除
+                  </el-button>
+                </template>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+const mode = ref(1) // 1平铺 2表格
+
+
+function switchMode(val){
+  mode.value = val
+}
+
+</script>
+<style lang="scss" scoped>
+.electricFire{
+  background: none !important;
+  padding:0;
+}
+.top{
+  display: flex;
+  flex-direction: row;
+  vertical-align: middle;
+  .modeSwitching{
+    height: 30px;
+    cursor: pointer;
+    >div{
+      width:70px;
+      height:100%;
+      line-height: 28px;
+      margin-right:10px;
+      display: inline-block;
+      background: #fff;
+      text-align: center;
+      color:#333;
+      i{
+        font-size:16px;
+        vertical-align: middle;
+        margin-right:4px;
+      }
+      span{
+        vertical-align: middle;
+        font-size: 14px;
+      }
+    }
+    .active{
+      background: #6c7fff;
+      color:#fff;
+    }
+  }
+  .time{
+    line-height: 28px;
+    margin-left:14px;
+  }
+  .statistics{
+    line-height: 28px;
+    height:30px;
+    >div{
+      margin-left:20px;
+      display: inline-block;
+      img{
+        width:18px;
+        margin:0 4px;
+        vertical-align: middle;
+      }
+      img:nth{
+        margin-left:10px !important;
+      }
+      span{
+        vertical-align: middle;
+      }
+    }
+  }
+}
+.middle{
+  width:100%;
+  margin-top:20px;
+  .listWrap{
+    display: flex;
+    flex-direction: row;
+    .listItem{
+      border: 1px solid #00a854;
+      width: 280px;
+      background-color: #fff;
+      float: left;
+      margin-bottom: 20px;
+      margin-right: 8px;
+      .header{
+        height: 32px;
+        line-height: 32px;
+        color: #fff;
+        padding: 0 12px;
+        background: linear-gradient(180deg, rgba(0, 168, 84, 0.7) 0, #00a854 100%);
+        .name{
+          display: inline-block;
+        }
+        .data{
+          float: right;
+          font-size: 12px;
+          color: #fff;
+          text-decoration: underline;
+          i{
+            margin-right:6px;
+          }
+        }
+      }
+      .content{
+        padding:10px;
+        color:#333;
+        .content_wrap{
+          .content_top{
+            padding: 0 6px 0 10px;
+            background-color: rgba(245,245,245,0.4);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            height: 20px;
+            font-size: 12px;
+            p{
+              margin-top:10px;
+            }
+          }
+          .content_middle{
+            .item{
+              width:calc(50% - 5px);
+              display: inline-block;
+              color:#333;
+              font-size: 12px;
+              margin-top:10px;
+              .list{
+                background: rgba(245,245,245,0.4);
+                margin-top:-10px;
+                .data{
+                  vertical-align: middle;
+                  padding:4px 6px;
+                  >span{
+                    width:30%;
+                    display: inline-block;
+                  }
+                  >div{
+                    width:70%;
+                    text-align: right;
+                    display: inline-block;
+                    img{
+                      margin:-2px 0 0 4px;
+                    }
+                    
+                  }
+                  
+                }
+              }
+            }
+            >div:nth-child(2){
+              margin-left:10px;
+            }
+          }
+          .content_bottom{
+            font-size: 12px;
+            margin-top:10px;
+          }
+        }
+        
+      }
+    }
+  }
+}
+</style>
+
+

src/views/electricFire/siteList.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="app-container">
+    <!-- 返回start -->
+    <div class="siteTitle">
+      <el-button class="goBack" @click="goBack">返回</el-button>
+      台区1-站点列表
+    </div>
+    <!-- 返回end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+      :cell-style="cellStyle"
+    >
+      <el-table-column
+        fixed
+        prop="siteName"
+        label="站点名称"
+        width=""
+      ></el-table-column>
+      <!-- <el-table-column prop="stationStatus" label="状态" width="">
+        <template #default="scope">
+          <el-avatar
+            class="status"
+            :class="[scope.row.deviceStatusr == '离线' ? 'offline' : 'online']"
+          ></el-avatar>
+        </template>
+      </el-table-column> -->
+      <el-table-column
+        prop="siteAddress"
+        label="站点位置"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="userName"
+        label="联系人"
+        width=""
+      >
+        <template #default="scope">
+          <span>
+            {{
+              scope.row.userName
+                ? scope.row.userName
+                : '--'
+            }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="phone"
+        label="手机号码"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="installedCapacity"
+        label="装机容量"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="rheologicalChange"
+        label="流变变比"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="routeName"
+        label="线路名称"
+        width=""
+      ></el-table-column>
+      <!-- <el-table-column fixed="right" label="操作" width="250">
+        <template #default="scope">
+          <el-button @click="handleClick(scope.row)" type="text" size="small">
+            查看
+          </el-button>
+        </template>
+      </el-table-column> -->
+    </el-table>
+    <!-- 表格end -->
+  </div>
+</template>
+
+<script>
+import { defineComponent, ref, onMounted } from 'vue'
+import * as api from '@/api/stationManage/index.js'
+import { ElMessage } from 'element-plus'
+
+export default defineComponent({
+  name: 'SiteList',
+  props: ['pageShow', 'goSiteListParam'],
+
+  setup(props, context) {
+    const showDialog = ref(false)
+    const input = ref('请输入台区名称')
+    const tableData = ref([])
+    const goBack = () => {
+      context.emit('func')
+    }
+    // 表头样式设置
+    const headClass = () => {
+      return 'background:#FAFAFA;'
+    }
+
+    //自定义列样式
+    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
+      row, column, rowIndex,columnIndex
+      // if (columnIndex === 1) {
+      //   return `color:#04F21C`
+      // } else {
+      //   return ''
+      // }
+    }
+
+    //查看
+    // const handleClick = (row) => {
+    //   alert('查看对应站点（页面跳转）')
+    //   console.log(row)
+    // }
+
+    //站点设备列表
+    function siteDeviceList() {
+      api
+        .siteDeviceList({ stationAreaId: props.goSiteListParam })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            // console.log(requset.data)
+            tableData.value = requset.data
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    }
+
+    onMounted(() => {
+      siteDeviceList()
+    })
+
+    return {
+      tableData,
+      input,
+      showDialog,
+
+      headClass,
+      cellStyle,
+      goBack,
+      // handleClick,
+    }
+  },
+})
+</script>
+
+
+<style lang='scss' scoped>
+</style>

src/views/electricityFeeAnalysis/components/chart.vue

@@ -0,0 +1,109 @@
+<template>
+  <div  v-loading="loading" >
+    <div class="chart" ref="lineChartBanlance" />
+  </div>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+import * as echarts from 'echarts'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+
+    let lineChartBanlance = ref(null)
+    const electricChart=ref({})
+    // 读取数据 func
+    const loading = ref(true)
+    function echarts2(){
+      let myChart = echarts.init(lineChartBanlance.value)
+      // 绘制图表
+      myChart.setOption(option)
+      loading.value = false
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+    
+    var option 
+    option = {
+      title: {
+        text: props.data.title,
+        left: 'center',
+        top: '10px',
+        textStyle: {
+          fontSize: 16,
+          color: '#333'
+        }
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: '#6a7985'
+          }
+        }
+      },
+      legend: {
+        data: props.data.type,
+        bottom:"0"
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {}
+        }
+      },
+      grid: {
+        top:'14%',
+        left: '3%',
+        right: '4%',
+        bottom: '10%',
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'category',
+          // boundaryGap: false,
+          data: props.data.xAxis,
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          name:props.data.unit,
+          axisLine: { // 轴线
+            show: true, // 是否显示
+            lineStyle: { // 轴线的样式
+                color: '#333',
+                width: 1
+            }
+          },
+        }
+      ],
+      
+    };
+    var series = []
+    for (let i = 0; i < props.data.type.length; i++) {
+      series.push({
+        name: props.data.type[i],
+        type: 'bar',
+        stack: 'Total',
+        barWidth: 25,
+        // areaStyle: {},
+        data: props.data.data[i],
+      })
+    }
+    option.series = series
+    onMounted(() => {
+      echarts2()
+    })
+
+</script>
+<style lang="scss" scoped>
+.chart{
+  height:306px;
+}
+</style>

src/views/electricityFeeAnalysis/components/tableD.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-table :data="tableData" border stripe :header-cell-style="headClass"   height="calc(100vh - 110px)" style="overflow-y: auto;">
+    <el-table-column prop="a" label="支路名称" align="center" />
+    <el-table-column  label="尖" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column  label="峰" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column  label="平" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column  label="谷" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column  label="总" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column prop="a" label="谷电量占比" align="center" />
+  </el-table>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+const tableData = ref(props.data)
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/electricityFeeAnalysis/index.vue

@@ -0,0 +1,309 @@
+<template>
+  <div class="app-container fsyd">
+      <div class="right">
+        <div class="top">
+          <span>日期：</span>
+          <el-date-picker
+            v-model="time"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY/MM/DD"
+            value-format="YYYY-MM-DD"
+            unlink-panels
+          />
+          <el-button type="primary" :icon="Search" style="margin-left:10px;">查询</el-button>
+          <el-button type="warning" :icon="Bottom">导出</el-button>
+          <div class="right">
+            <div class="modeSwitching pob">
+              <div @click="switchMode(1)" :class="{ active: mode == 1 }">
+                表格
+              </div>
+              <div @click="switchMode(2)" :class="{ active: mode == 2 }">
+                图表
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="content">
+          <tableD :data="tableData"  v-if="mode == 1" style="padding:10px;"/>
+          <div v-if="mode == 2">
+            <div class="echartWrap">
+              <div class="top">
+                <img src="@/assets/images/logo1.png" alt="">
+                <span>告警处理统计</span>
+              </div>
+            
+              <div class="right" style="padding:20px 10px;">
+                <div class="modeSwitching">
+                  <div @click="switchMode2(1)" :class="{ active2: mode2 == 1 }">
+                    电量
+                  </div>
+                  <div @click="switchMode2(2)" :class="{ active2: mode2 == 2 }">
+                    电费
+                  </div>
+                </div>
+                <div class="chart">
+                  <chart :data="chartData1" v-if="mode2 == 1"/>
+                  <chart :data="chartData2" v-if="mode2 == 2"/>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script setup>
+
+import { ref,onMounted } from "vue";
+import tableD from "./components/tableD";
+import chart from "./components/chart";
+onMounted(() => {
+  init()
+})
+const selectAll = ref([]) //站点全选
+const siteSelectArray = ref([]) //站点选中列表
+const siteList = ref([
+  { label:"站点1", value :1},
+  { label:"站点2", value :2},
+  { label:"站点3", value :3},
+  { label:"站点4", value :4},
+]) //站点列表
+//初始化
+
+const mode = ref(2) //模式 1:列表模式 2:模式图表
+const mode2 = ref(1) //模式 1:电量模式 2:电费模式
+const time = ref()
+
+
+const tableData = ref([
+  { a: 1000 },
+  { a: 1000 },
+]) //列表数据
+const pieData1 = ref({
+  data:[
+    { value: 1048, name: '尖', unit:"kWh" },
+    { value: 735, name: '峰', unit:"kWh" },
+    { value: 580, name: '平', unit:"kWh" },
+    { value: 484, name: '谷', unit:"kWh" }
+  ],
+  color:["#FE8B6A","#BB7582","#F54C5E","#8AD4C7"],
+  type:"4"
+}) //饼图数据
+const pieData2 = ref({
+  data:[
+    { value: 48, name: '尖', unit:"元" },
+    { value: 75, name: '峰', unit:"元" },
+    { value: 580, name: '平', unit:"元" },
+    { value: 484, name: '谷', unit:"元" }
+  ],
+  color:["#FE8B6A","#BB7582","#F54C5E","#8AD4C7"],
+  type:"4"
+}) //饼图数据
+
+const chartData1 = ref({
+  xAxis:["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
+  type:["总有功功率1（kW）","总有功功率2（kW）","总有功功率3（kW）","总有功功率4（kW）","总有功功率5（kW）"],
+  data:[
+    [100, 101, 120, 50, 70, 95, 65, 120, 5, 14, 78, 32],
+    [5, 4, 10, 15, 13, 14, 9, 12, 45, 25, 32],
+    [100,89,101,110,99,94,45,89,99,100,110,102],
+    [11,8,33,22,11,66,22,8,13,8,46,16],
+    [50,51,15,20,45,35,35,40,45,20,15,6]
+  ],
+  unit:"kWh",
+  title:"每日电量趋势"
+})
+const chartData2 = ref({
+  xAxis:["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
+  type:["总有功功率1（kW）","总有功功率2（kW）","总有功功率3（kW）","总有功功率4（kW）","总有功功率5（kW）"],
+  data:[
+    [100, 101, 120, 50, 70, 95, 65, 120, 5, 14, 78, 32],
+    [5, 4, 10, 15, 13, 14, 9, 12, 45, 25, 32],
+    [100,89,101,110,99,94,45,89,99,100,110,102],
+    [11,8,33,22,11,66,22,8,13,8,46,16],
+    [50,51,15,20,45,35,35,40,45,20,15,6]
+  ],
+  unit:"kWh",
+  title:"每日电费趋势"
+})
+
+function init(){
+
+}
+
+/**
+ * 切换模式
+ * @param {Number} val 1:表格模式 2:图表模式
+ */
+function switchMode(val) {
+  mode.value = val
+  // if(val == 1){
+  //   setTimeout(() => {
+  //     init()
+  //     site(1)
+  //   })
+  // }
+}
+
+/**
+ * 切换模式
+ * @param {Number} val 1:电量模式 2:电费模式
+ */
+ function switchMode2(val) {
+  mode2.value = val
+
+}
+
+
+
+/**
+ * 全选事件
+ */
+function siteAllChange(){
+  if(selectAll.value[0]){
+    siteSelectArray.value = [1,2,3,4]
+  }else{
+    siteSelectArray.value = []
+  }
+}
+
+/**
+ * 站点列表点击事件
+ * @param val 
+ */
+function siteClick(val){
+  if(siteSelectArray.value.length == siteList.value.length){
+    selectAll.value = [1]
+    console.log(selectAll.value)
+  }else{
+    selectAll.value = []
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.fsyd{
+  height:100%;
+  background: #F2F3F8;
+    >div{
+      padding:10px;
+      display: inline-block;
+      vertical-align: top;
+    }
+    .left{
+      width:20%;
+      height:100%;
+      margin-right:10px;
+      font-size: 14px;
+      background: #fff;
+      border-radius: 4px;
+      .top{
+        padding-bottom:10px;
+        border-bottom:1px solid #eee;
+        .el-row{
+          .el-col{
+            margin-top:10px;
+          }
+          .el-col:nth-child(1){
+            color:#333;
+            span{
+              padding:5px;
+              font-size:12px;
+              color:#fff;
+              background:#48A4FF;
+            }
+          }
+          .el-col:nth-child(2){
+            >div{
+              width:50%;
+              height:20px;
+              display: inline-block;
+            }
+            >div:nth-child(2){
+              text-align: right;
+            }
+          }
+        }
+  
+      }
+      .bottom{
+        padding:20px;
+      }
+    }
+    >.right{
+      width:calc(80% - 10px);
+      .top{
+        margin-top:-10px;
+        font-size: 12px;
+      }
+      .comtent{
+        height:calc(100% - 50px);
+        background: #fff;
+      }
+    }
+    .content{
+     margin-top:20px;
+     background: #fff;
+     border-radius: 4px;
+     .echartWrap{
+      .pie{
+        width:50%;
+        display: inline-block;
+      }
+      .chart{
+        width:100%;
+      }
+     }
+     .top{
+        background: #fafafa;
+        padding:8px;
+        img{
+          width:25px;
+        }
+        img,span{
+          display: inline-block;
+          vertical-align: middle;
+        }
+        span{
+          font-size: 16px;
+          margin-left:10px;
+        }
+     }
+    }
+}
+.pob{
+  position: absolute;
+  z-index: 1;
+  top:20px;
+  right:20px;
+  background: #fff !important;
+}
+.modeSwitching{
+  width:116px;
+  height:32px;
+  display: flex;
+  border-radius: 2px;
+  background: #F2F3F8;
+  cursor: pointer;
+  box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.07);
+  >div{
+    padding:8px 15px;
+    display: inline-block;
+    background: none;
+    text-align: center;
+    font-size: 14px;
+    color:#333;
+  }
+  .active{
+    background: #48A4FF;
+    color:#fff;
+  }
+  .active2{
+    background: #48A4FF;
+    color:#fff;
+  }
+}
+</style>

src/views/index/components/chart.vue

@@ -0,0 +1,115 @@
+<template>
+  <div  v-loading="loading">
+    <div class="chart" ref="lineChartBanlance" />
+  </div>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+import * as echarts from 'echarts'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+
+    let lineChartBanlance = ref(null)
+    const electricChart=ref({})
+    const xData= [ "00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00" ]
+    const dataType= [ "IA(A)", "IB(A)", "IC(A)" ]
+    const data2 = [
+      [120, 132, 101, 134, 90, 230, 210, 1, 45, 56, 78, 8],
+      [10, 12, 11, 14, 9, 30, 21, 100, 245, 156, 378, 568],
+      [1200, 1312, 1, 1304, 900, 2300, 20, 105, 45, 16, 708, 68]
+    ]
+    // 读取数据 func
+    const loading = ref(true)
+    function echarts2(){
+      let myChart = echarts.init(lineChartBanlance.value)
+      // 绘制图表
+      myChart.setOption(option)
+      loading.value = false
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+    
+    var option 
+    option = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: '#6a7985'
+          }
+        }
+      },
+      legend: {
+        data: dataType,
+        bottom:"0"
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {}
+        }
+      },
+      grid: {
+        top:'14%',
+        left: '3%',
+        right: '4%',
+        bottom: '10%',
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: false,
+          data: props.data.xAxis,
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          axisLine: { // 轴线
+            show: true, // 是否显示
+            lineStyle: { // 轴线的样式
+                color: '#333',
+                width: 1
+            }
+          },
+        }
+      ],
+      
+    };
+    var series = []
+    for (let i = 0; i < props.data.type.length; i++) {
+      series.push({
+        name: props.data.type[i],
+        type: 'line',
+        stack: 'Total',
+        // areaStyle: {},
+      
+        data: props.data.data[i],
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' }
+          ]
+        },
+        // markLine: {
+        //   data: [{ type: 'average', name: 'Avg' }]
+        // }
+      })
+    }
+    option.series = series
+    onMounted(() => {
+      echarts2()
+    })
+
+</script>
+<style lang="scss" scoped>
+.chart{
+  height:306px;
+}
+</style>

src/views/index/components/pie.vue

@@ -0,0 +1,69 @@
+<template>
+  <div  v-loading="loading">
+    <div class="chart" ref="lineChartBanlance" />
+  </div>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+import * as echarts from 'echarts'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+  let lineChartBanlance = ref(null)
+  const electricChart=ref({})
+  const total = props.data.data.reduce((acc, cur) => acc + cur.value, 0)
+  // 读取数据 func
+  const loading = ref(true)
+  var option 
+  option = {
+    color: props.data.color,
+    title: [
+      {
+          text: total,
+          x: 'center',
+          y: 'center',
+          top: '45%',
+          textStyle: {
+              fontSize: '22',
+              color: 'rgba(0,0,0,0.55)',
+              foontWeight: '600',
+          },
+      },
+  ],
+    series: [
+      {
+        name: '',
+        type: 'pie',
+        radius: ['40%', '60%'],
+        data: props.data.data,
+        label: {
+          fontSize: 12,
+          formatter: (params) => {
+            return  params.name + ':' + params.value +'\n' + (params.value / total * 100).toFixed(2) + '%';
+          },
+        },
+      }
+    ]
+  };
+  function initChart(){
+    let myChart = echarts.init(lineChartBanlance.value)
+    // 绘制图表
+    myChart.setOption(option)
+    loading.value = false
+    window.addEventListener('resize', () => {
+      myChart.resize()
+    })
+  }
+onMounted(() => {
+  initChart()
+})
+
+</script>
+<style lang="scss" scoped>
+.chart{
+  height:292px;
+}
+</style>

src/views/index/components/tableD.vue

@@ -0,0 +1,32 @@
+<template>
+    <el-table :data="tableData" border stripe  height="335" style="overflow-y: auto;">
+        <el-table-column prop="time" label="时间" width="100">
+            <template #default="scope">
+              {{ scope.row.time ? scope.row.time.slice(10, 19) : '' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="事件"></el-table-column>
+        <el-table-column prop="deviceName" label="设备" width="200"></el-table-column>
+        <el-table-column prop="statue" label="状态" width="100">
+          <template #default="scope">
+            <span v-if="scope.row.statue !=1">自动恢复</span>
+            <el-button type="text"  style="color: #409eff" @click.prevent="Update(scope.row)" v-if="scope.row.statue == 1">
+              确定
+            </el-button>
+          </template>
+        </el-table-column>
+    </el-table>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+const tableData = ref(props.data)
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/index/index.vue

@@ -1,14 +1,424 @@
 <template>
-  <div class="index-container">
-    <version-information />
+  <div class="app-container bulletinBoard" style="background: #f0f2f5 !important;height:90vw">
+      <div class="height100 component1" style="margin-left:10px;">
+        <div class="type type1">
+          <p class="color1">上海永天科技</p>
+          <img src="@/assets/images/logo1.png" alt="">
+          <p class="desc">站点名称</p>
+        </div>
+      </div>
+      <div class="height100 component2">
+        <div class="left">
+          <p class="color2">0.98  <span>/0.88</span></p>
+        </div>
+        <div class="right">
+          <p class="">平均功率因数</p>
+          <p class="">2025年7月2日 起</p>
+        </div>
+      </div>
+      <div class="height100 component1">
+        <div class="type type1">
+          <p class="color3">1023</p>
+          <img src="@/assets/images/logo1.png" alt="">
+          <p class="desc">运行天数</p>
+        </div>
+      </div>
+      <div class="height100 component3" >
+        <div class="type">
+          <img src="@/assets/images/logo1.png" alt="">
+          <div class="title color5">告警</div>
+          <p class="desc3">平均功率因数</p>
+        </div>
+      </div>
+      <div class="height100 component3">
+        <div class="type">
+          <img src="@/assets/images/logo1.png" alt="">
+          <div class="title color1">在线</div>
+          <p class="desc3">站点通讯状态</p>
+        </div>
+      </div>
+      <div class="height100 component3">
+        <div class="type">
+          <img src="@/assets/images/logo1.png" alt="">
+          <div class="title color1">正常</div>
+          <p class="desc3">站点故障状态</p>
+        </div>
+      </div>
+        <div class="height190 component4" style="margin-left:8px;">
+            <div class="top">
+              <p>今日用电<span>（kWh）</span></p>
+              <img src="@/assets/images/day/31.png" alt="">
+            </div>
+            <div class="middle">
+              1968
+            </div>
+            <div class="bottom">
+              <p>昨日同期<span>2775</span></p>
+              <p><span>28.32%</span><span></span></p>
+            </div>
+        </div>
+        <div class="height190 component4" style="display: inline-block;">
+          <div class="top">
+            <p>本月用电<span>（kWh）</span></p>
+            <img src="@/assets/images/month/7.png" alt="">
+          </div>
+          <div class="middle">
+            247605
+          </div>
+          <div class="bottom">
+            <p>上月同期<span>1322913</span></p>
+            <p><span>28.32%</span><span></span></p>
+          </div>
+        </div>
+      <div class="height190 component5 echarts" style="margin-top:-185px;width:62%;">
+        <div class="top">
+          <img src="@/assets/images/logo1.png" alt="">
+          <span>今日用电趋势</span>
+        </div>
+        <chart :data="ydqs"/>
+      </div>
+      <div class="height190 component6 echarts" style="margin-top:-185px;height:380px;">
+        <div class="top">
+          <img src="@/assets/images/logo1.png" alt="">
+          <span>告警处理统计</span>
+        </div>
+        <pie :data="alarm"/>
+      </div>
+      <div class="height190 component7 echarts" style="margin-left:10px;" >
+        <div class="top">
+          <img src="@/assets/images/logo1.png" alt="">
+          <span>支路用能占比</span>
+        </div>
+        <div class="time">
+          <div :class="['switch',dateType == '1' ? 'active': '']" @click="dateSwitch(1)">月</div>
+          <div :class="['switch',dateType == '2' ? 'active': '']" @click="dateSwitch(2)">年</div>
+        </div>
+        <pie :data="zlydzb"/>
+      </div>
+      <div class="height190 component7 echarts" style="height:375px;width:28.3%;">
+        <div class="top">
+          <img src="@/assets/images/logo1.png" alt="">
+          <span>事件告警列表</span>
+        </div>
+        <tableD :data="eventList"/>
+      </div>
+      <div class="height190 component5 echarts" style="height:375px !important;width:calc(50% - 23px)">
+        <div class="top">
+          <img src="@/assets/images/logo1.png" alt="">
+          <span>有功功率</span>
+        </div>
+        <chart :data="ydqs"/>
+      </div>
+      <div class="height190 component5 echarts" style="margin-left:10px;width:calc(50% - 23px)">
+        <div class="top">
+          <img src="@/assets/images/logo1.png" alt="">
+          <span>有功功率同比分析</span>
+        </div>
+        <chart :data="ydqs"/>
+      </div>
+      <div class="height190 component5 echarts" style="width:calc(50% - 23px)">
+        <div class="top">
+          <img src="@/assets/images/logo1.png" alt="">
+          <span>功率因数</span>
+        </div>
+        <chart :data="ydqs"/>
+      </div>
+      <div class="height190 component5 echarts" style="margin-left:10px;width:calc(50% - 23px)">
+        <div class="top">
+          <img src="@/assets/images/logo1.png" alt="">
+          <span>环境温湿度</span>
+        </div>
+        <chart :data="ydqs"/>
+      </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'Index',
-  components: {},
+<script setup>
+import chart from './components/chart'
+import pie from './components/pie'
+import tableD from './components/tableD'
+import { ref } from 'vue'
+
+//用电趋势
+const ydqs = ref({
+  xAxis:["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
+  type:["总有功功率1（kW）","总有功功率2（kW）","总有功功率3（kW）","总有功功率4（kW）","总有功功率5（kW）"],
+  data:[
+    [100, 101, 120, 50, 70, 95, 65, 120, 5, 14, 78, 32],
+    [5, 4, 10, 15, 13, 14, 9, 12, 45, 25, 32],
+    [100,89,101,110,99,94,45,89,99,100,110,102],
+    [11,8,33,22,11,66,22,8,13,8,46,16],
+    [50,51,15,20,45,35,35,40,45,20,15,6]
+  ],
+  unit:""
+})
+//告警统计
+const alarm = ref({
+  data:[
+    {name: '未确认', value: 3},
+    {name: '已确认', value: 3 },
+  ],
+  color:["red","#10aaeb"],
+  type:"1"
+})
+//支路用电占比
+const zlydzb = ref({
+  data:[
+    {name: '路灯照明', value: 3},
+    {name: '站内用电', value: 4 },
+    {name: '站外用电', value: 5 },
+  ],
+  color:["red","#10aaeb","#FF691C"],
+  type:"2"
+})
+const dateType = ref(1)
 
-}
 
+//事件告警列表
+const eventList = ref([
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"0" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+])
+
+function dateSwitch(type){
+  dateType.value = type
+}
 </script>
+
+<style lang="scss" scoped>
+.bulletinBoard{
+  padding:0;
+  .height100{
+    height:100px;
+    margin-top:10px;
+    margin-right:10px;
+    border-radius: 6px;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    .type{
+      padding:10px 8px;
+    }
+    .type1{
+      img{
+        position: absolute;
+        right:8px;;
+        top:25px;
+      }
+      p:nth-child(1){
+        font-size: 24px;
+      }
+      
+      .desc{
+        position: absolute;
+        bottom:-5px;
+        color:#fff;
+      }
+      .desc2{
+        position: absolute;
+        bottom:15px;
+      }
+      .time{
+        position: absolute;
+        bottom:-5px;
+        font-size: 12px;
+        color:#333;
+      }
+    }
+  }
+  .component1{
+    width:24.3%;
+    background: linear-gradient(to right bottom, rgb(56, 148, 190), rgb(80, 227, 194));
+  }
+  .component2{
+    width:24.3%;
+    background:linear-gradient(to right bottom, rgb(27, 40, 52), rgb(27, 40, 52));
+    >div{
+      width:50%;
+      display: inline-block;
+    }
+    .left{
+      font-size: 40px;
+      color:rgb(80, 227, 194);
+      text-align: center;
+      vertical-align: middle;
+      margin-top:25px;
+      span{
+        font-size: 14px;
+        color:rgb(126, 147, 166);
+        vertical-align: top;
+        margin-top:10px;
+        display: inline-block;
+      }
+    }
+    .right{
+      color:rgb(126, 147, 166);
+
+      vertical-align: middle;
+
+    }
+  }
+  .component3{
+    width:7.5%;
+    background: #fff;
+    text-align: center;
+    .title{
+      font-weight: 600;
+      margin:6px 0;
+    }
+    
+  }
+  .height100:last-child{
+    margin-right:0;
+  }
+  .component4{
+    width:15%;
+    height:185px;
+    margin-top:10px;
+    margin-right:10px;
+    margin-left:10px;
+    background: #fff;
+    // display: inline-block;
+    >div{
+      height: 50px;
+    }
+    .top{
+      position: relative;
+      padding:15px;
+      p{
+        font-size: 20px;
+        span{
+          font-size: 12px;
+        }
+      }
+      img{
+        position: absolute;
+        width:40px;
+        top:15px;
+        right:15px;
+      }
+    }
+    .middle{
+      font-size:34px;
+      color:#10aaeb;
+      padding:15px 15px 40px 15px;
+      border-bottom:2px solid #eee;
+    }
+    .bottom{
+      padding:15px;
+      color:rgba(0,0,0,0.65);
+      p:nth-child(1){
+        span:nth-child(1){
+          margin-left:10px;
+        }
+      }
+      p:nth-child(2){
+        span{
+          vertical-align: middle;
+        }
+        span:nth-child(1){
+          color:#1BCCC1;
+        }
+        span:nth-child(2){
+          margin-left:10px;
+          margin-top:-4px;
+          display: inline-block;
+        }
+        span:nth-child(2)::after{
+          display: inline-block;
+          content: ""; /* 伪元素不包含内容 */
+          width: 0; /* 必须设置为0，因为我们不显示宽度 */
+          height: 0; /* 必须设置为0，因为我们不显示高度 */
+          margin-left: -5px; /* 根据需要调整，这里是让箭头中心对齐 */
+          margin-top:-10px;
+          border-left: 5px solid transparent; /* 左边框透明 */
+          border-right: 5px solid transparent; /* 右边框透明 */
+          border-top: 5px solid #08b762; /* 上边框是三角形的颜色 */
+        }
+      }
+    }
+  }
+  .component5{
+    width:49%;
+    height:380px !important;
+    display: inline-block;
+    vertical-align: top;
+  }
+  .component6{
+    width:20%;
+  }
+  .component7{
+    width:20%;
+    .time{
+      margin:6px;
+      .switch{
+        width:40px;
+        height:30px;
+        line-height: 26px;
+        text-align: center;
+        margin-right:6px;
+        padding:2px;
+        color:rgba(0,0,0,0.65);
+        border: 1px solid #ccc;
+        display: inline-block;
+        cursor: pointer;
+      }
+      .active{
+        background: #6c7fff;
+        color:#fff;
+      }
+    }
+  }
+}
+.echarts{
+  margin-top:10px;
+  margin-right:10px;
+  display: inline-block;
+  vertical-align: top;
+  border-top:solid 1px #1890ff;
+  background: #fff;
+  .top{
+      background: #fafafa;
+      padding:8px;
+      img{
+        width:25px;
+      }
+      img,span{
+        display: inline-block;
+        vertical-align: middle;
+      }
+      span{
+        font-size: 16px;
+        margin-left:10px;
+      }
+    }
+}
+.color1{
+  color:#1BCCC1;
+}
+.color2{
+  color:#FF691C ;
+}
+.color3{
+  color:#8942F5 ;
+}
+.color4{
+  color:#FF397F ;
+  span{
+    color:#333;
+    margin-left:10px;
+  }
+}
+.color5{
+  color:red
+}
+</style>

src/views/siteDistribution/alarmTotal.vue

@@ -0,0 +1,242 @@
+<template>
+  <div class="app-container">
+    <!-- 返回start -->
+    <div class="siteTitle">
+      <el-button class="goBack" @click="goBack">返回</el-button>
+      站点【{{alarmGradeList.siteName}}】{{
+        alarmGradeList.type == 0
+          ? '总数'
+          : alarmGradeList.type == 1
+          ? '一级告警'
+          : alarmGradeList.type == 2
+          ? '二级告警'
+          : alarmGradeList.type == 3
+          ? '其它'
+          : ''
+      }}
+    </div>
+    <!-- 返回end -->
+
+    <!-- 表格start -->
+    <el-table
+      :data="tableData"
+      border
+      stripe
+      :header-cell-style="headClass"
+      :cell-style="cellStyle"
+    >
+      <el-table-column
+        fixed
+        prop="soeTime"
+        label="发生时间"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="measDesc"
+        label="测点描述"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="alarmName"
+        label="告警名称"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="alarmType"
+        label="告警类型"
+        width=""
+      ></el-table-column>
+      <el-table-column prop="check" label="详情" width="">
+        <template #default="scope">
+          <span v-if="scope.row.handlingStatus!=1&&store.state.authorities.indexOf('修改')==-1" style="cursor:default;color:#ccc">查看</span>
+                    <span @click="checkItem_addItem(scope.row)" v-else>查看</span>
+
+        </template>
+      </el-table-column>
+      <el-table-column prop="eddl" label="状态" width="">
+        <template #default="scope">
+          <span
+            :style="{
+              color:
+                scope.row.handlingStatus == 1
+                  ? '#8DCF6E'
+                  : scope.row.handlingStatus == 2
+                  ? '#FF747B'
+                  : '#5c88fa',
+            }"
+          >
+            {{
+              scope.row.handlingStatus == 0
+                ? '未处理'
+                : scope.row.handlingStatus == 1
+                ? '已处理'
+                : scope.row.handlingStatus == 2
+                ? '待确认'
+                : scope.row.handlingStatus == 3
+                ? '自动恢复'
+                : '过期失效'
+            }}
+          </span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 表格end -->
+
+    <!-- 分页start -->
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[15, 20, 25, 30]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      ></el-pagination>
+    </div>
+    <!-- 分页end -->
+
+    <!--弹框组件开始-----------------------start-->
+    <dialog-component
+      :show_Dialog="showDialog"
+      :dialog-title="dialogTitle"
+      :item-info="tableItem"
+      @closeDialog="closeDialog"
+      @listSelect="listSelect"
+    ></dialog-component>
+    <!--弹框组件开始-----------------------end-->
+  </div>
+</template>
+
+<script>
+import dialogComponent from './dialogComponent'
+import { useStore } from 'vuex'
+import { defineComponent, onMounted, ref } from 'vue'
+import * as api from '@/api/alarmManage/index'
+import { ElMessage } from 'element-plus'
+
+export default defineComponent({
+  name: 'AlarmTotal',
+  props: {
+    pageShow: Boolean,
+    alarmGradeList: Object,
+  }, 
+  components: { dialogComponent },
+  setup(props, { emit }) {
+    const store = useStore()
+
+    const total = ref(0)
+    const pageSize = ref(15)
+    const currentPage = ref(1)
+    const tableData = ref([])
+    const showDialog = ref(false)
+
+    const dialogTitle = ref('')
+    const tableItem = ref([])
+
+    //查询
+    function listSelect() {
+      api
+        .alarmGradeList({
+          // siteId: store.state.siteId,
+          siteId:props.alarmGradeList.siteId,
+          startTime: props.alarmGradeList.startTime,
+          endTime: props.alarmGradeList.endTime,
+          size: pageSize.value,
+          current: currentPage.value,
+          type: props.alarmGradeList.type,
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            total.value = requset.data.total
+            tableData.value = requset.data.records
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    }
+
+    // 查看操作
+    const checkItem_addItem = (row) => {
+      //如果没有修改权限,并且不是已处理
+      if(row.handlingStatus!=1&&store.state.authorities.indexOf('修改')==-1){
+       return
+      }
+
+      tableItem.value = row
+      dialogTitle.value = '告警详情'
+      showDialog.value = true
+    }
+
+    //查看///添加操作
+    const handleClick = (row) => {
+      alert('查看对应站点（页面跳转）')
+      console.log(row)
+    }
+
+    onMounted(() => {
+      listSelect()
+    })
+
+    //关闭弹窗
+    const closeDialog = (flag) => {
+      showDialog.value = flag
+    }
+    
+    //返回
+    const goBack = () => {
+      emit('func')
+    }
+    //条数
+    const handleSizeChange = (val) => {
+      pageSize.value = val
+      listSelect()
+    }
+    //页数
+    const handleCurrentChange = (val) => {
+      currentPage.value = val
+      listSelect()
+    }
+    //自定义列样式
+    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
+      row, column, rowIndex
+      // console.log(row, column, rowIndex)
+      if (columnIndex === 4) {
+        return `color:#1187FF;cursor:pointer`
+      } else {
+        return ''
+      }
+    }
+    // 表头样式设置
+    const headClass = () => {
+      return 'background:#FAFAFA;'
+    }
+    return {
+      handleSizeChange,
+      handleCurrentChange,
+      goBack,
+      checkItem_addItem,
+      headClass,
+      cellStyle,
+      handleClick,
+      listSelect,
+      closeDialog,
+      store,
+
+      showDialog,
+      input: '请输入发生时间',
+
+      total,
+      pageSize,
+      currentPage,
+      tableData,
+
+      dialogTitle,
+      tableItem,
+    }
+  },
+})
+</script>
+
+<style lang='scss' scoped>
+</style>

src/views/siteDistribution/dialogComponent.vue

@@ -0,0 +1,337 @@
+<template>
+  <el-dialog
+    :title="dialogTitle"
+    v-model="showDialog"
+    width="640px"
+    @close="closeDialog"
+    @open="open"
+  >
+    <el-form
+      ref="formInfo"
+      :model="form"
+      class="demo-form-inline alarmStatusDialog"
+      label-width="100px"
+    >
+      <div class="topInfo underline">
+        <el-form-item label="告警时间：" prop="soeTime">
+          {{ itemInfo.soeTime }}
+        </el-form-item>
+        <!-- <el-form-item label="告警历时：" prop="stationCode">3分钟</el-form-item> -->
+        <!-- <el-form-item label="关联告警：" prop="stationAddress">
+          2021-09-14 14:54:59
+        </el-form-item> -->
+        <!-- <div class="deviceTit"></div> -->
+        <el-button type="success" class="lubo" style="margin-bottom: 15px">
+          {{ itemInfo.measDesc }}
+        </el-button>
+        <div
+          class="handleStatus"
+          :style="{
+            color:
+              itemInfo.handlingStatus == 1
+                ? '#8DCF6E'
+                : itemInfo.handlingStatus == 2
+                ? '#FF747B'
+                : '#5c88fa',
+          }"
+        >
+          {{
+            itemInfo.handlingStatus == 0
+              ? '未处理'
+              : itemInfo.handlingStatus == 1
+              ? '已处理'
+              : itemInfo.handlingStatus == 2
+              ? '待确认'
+              : itemInfo.handlingStatus == 3
+              ? '自动恢复'
+              : '过期失效'
+          }}
+        </div>
+      </div>
+
+      <div class="basicTit">基本信息</div>
+
+      <el-form-item label="站点名称：" prop="pointNum">
+        {{ form.siteName }}
+      </el-form-item>
+      <el-form-item label="台区展示：" prop="deviceNum">
+        {{ form.stationArea }}
+      </el-form-item>
+      <el-form-item label="线路：" prop="deviceNum">
+        {{ form.route }}
+      </el-form-item>
+      <el-form-item label="告警信息：" prop="deviceNum">
+        {{ itemInfo.measDesc.split(itemInfo.measDesc.slice(-2))[0] }}
+      </el-form-item>
+      <el-form-item label="告警状态：" prop="deviceNum">
+        {{ itemInfo.measDesc.slice(-2) }}
+      </el-form-item>
+      <el-form-item label="采集终端：" prop="deviceNum">
+        {{ form.deviceCode }}
+      </el-form-item>
+      <el-form-item label="站点地址：" prop="deviceNum">
+        {{ form.siteAddress }}
+      </el-form-item>
+      <el-form-item label="联系人：" prop="deviceNum">
+        {{ form.sparUserName }}
+      </el-form-item>
+      <el-form-item label="联系方式：" prop="deviceNum">
+        {{ form.handlerPhone }}
+      </el-form-item>
+
+      <div class="basicTit">处理信息</div>
+
+      <el-form-item
+        label="处理内容："
+        prop="handlingContent"
+        style="margin-bottom: 20px"
+      >
+        <el-input
+          v-model="textarea"
+          :rows="2"
+          type="textarea"
+          placeholder="请输入..."
+          v-if="itemInfo.handlingStatus != 1"
+        />
+        <span v-if="itemInfo.handlingStatus == 1">
+          {{
+            itemInfo.handlingContent === '' ? '无' : itemInfo.handlingContent
+          }}
+        </span>
+      </el-form-item>
+
+      <el-form-item label="现场照片：" prop="deviceNum">
+        <el-upload
+          :action="uploadUrl"
+          :on-success="handleUpAvatar"
+          :on-remove="handleRemove"
+          :show-file-list="true"
+          list-type="picture-card"
+          :limit="3"
+          :on-preview="handlePictureCardPreview"
+          :headers="{ accessToken: [accessToken] }"
+          v-if="itemInfo.handlingStatus != 1"
+        >
+          <i class="el-icon-plus"></i>
+        </el-upload>
+        <el-dialog title="查看图片" v-model="dialogVisible" width="400px">
+          <img
+            style="width: 100%"
+            :src="
+              itemInfo.handlingStatus == 1
+                ? fileImages + form.image
+                : dialogImageUrl
+            "
+            alt=""
+          />
+        </el-dialog>
+        <img
+          @click="handlePictureCardPreview"
+          v-if="itemInfo.handlingStatus == 1"
+          style="width: 90px"
+          :src="fileImages + form.image"
+          alt=""
+        />
+      </el-form-item>
+      <br />
+      <br />
+      <br />
+      <div style="text-align: right" v-if="itemInfo.handlingStatus != 1">
+        <el-button @click="closeDialog()">取消</el-button>
+        <el-button type="primary" @click="submitForm()">确定</el-button>
+      </div>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import { useStore } from 'vuex'
+import { defineComponent, ref, watchEffect, reactive, toRefs } from 'vue'
+import * as api from '@/api/alarmManage/index'
+import { ElMessage } from 'element-plus'
+
+export default defineComponent({
+  name: 'DialogComponent',
+  emits: ['closeDialog', 'listSelect'],
+  props: {
+    show_Dialog: Boolean,
+    dialogTitle: {
+      type: String,
+      default: '告警详情',
+    },
+    itemInfo: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+  },
+  setup(props, { emit }) {
+    const store = useStore()
+    const showDialog = ref(false)
+    const formInfo = ref(null)
+    const form = ref([])
+    const textarea = ref('')
+    const dialogVisible = ref(false)
+    const accessToken = ref(store.state.user.accessToken)
+    const dialogImageUrl = ref('')
+    const fileImages = ref(window.PLATFROM_CONFIG.images)
+    const image = ref('')
+    const imageFile = ref([])
+
+    const dataSet = reactive({
+      uploadUrl:
+        window.PLATFROM_CONFIG.baseUrl +
+        '/patrolInspectionDevice/pictureUpload',
+      fileList: [],
+    })
+
+    //删除照片
+    function handleRemove(res) {
+      Array.prototype.indexOf = function (val) {
+        for (var i = 0; i < this.length; i++) {
+          if (this[i] == val) return i
+        }
+        return -1
+      }
+      Array.prototype.remove = function (val) {
+        var index = this.indexOf(val)
+        if (index > -1) {
+          this.splice(index, 1)
+        }
+      }
+      dataSet.fileList.remove(res.name)
+    }
+
+    const handleUpAvatar = (res, file) => {
+      image.value = res.data
+      imageFile.value = file
+    }
+
+    const handlePictureCardPreview = (file) => {
+      dialogImageUrl.value = file.url
+      dialogVisible.value = true
+    }
+
+    const resetForm = () => {
+      formInfo.value.resetFields()
+    }
+
+    const roleValid = (rule, value, callback) => {
+      if (value.length === 0) {
+        callback(new Error('角色不能为空'))
+      } else {
+        callback()
+      }
+    }
+
+    // onSelectedDrug(event) {
+    //   this.siteList = event;
+    //   console.log(this.siteList);
+    // },
+    // 保存操作
+    const submitForm = () => {
+      api
+        .alarmPower({
+          id: props.itemInfo.id,
+          handlingContent: textarea.value,
+          image: image.value,
+          handlingStatus: 1,
+        })
+        .then((requset) => {
+          if (requset.status === 'SUCCESS') {
+            ElMessage({
+              message: '操作成功！',
+              type: 'success',
+            })
+            textarea.value = ''
+            closeDialog()
+            emit('listSelect')
+          } else {
+            ElMessage.error(requset.msg)
+          }
+        })
+    }
+
+    const open = () => {
+      api.alarmPower1(props.itemInfo.id).then((requset) => {
+        if (requset.status === 'SUCCESS') {
+          form.value = requset.data
+        } else {
+          ElMessage.error(requset.msg)
+        }
+      })
+    }
+    // 关闭弹框
+    const closeDialog = () => {
+      showDialog.value = false
+      emit('closeDialog', false)
+    }
+
+    watchEffect((fn, options) => {
+      fn, options
+      showDialog.value = props.show_Dialog
+    })
+
+    return {
+      open,
+      handleUpAvatar,
+      handleRemove,
+      handlePictureCardPreview,
+      resetForm,
+      roleValid,
+      submitForm,
+      closeDialog,
+
+      ...toRefs(dataSet),
+      accessToken,
+      dialogImageUrl,
+      fileImages,
+      image,
+      disabled: false,
+      dialogVisible,
+      textarea,
+      showDialog,
+      form,
+      formInfo,
+      options: [
+        {
+          value: '选项1',
+          label: '站点一',
+        },
+        {
+          value: '选项2',
+          label: '站点二',
+        },
+        {
+          value: '选项3',
+          label: '站点三',
+        },
+        {
+          value: '选项4',
+          label: '站点四',
+        },
+        {
+          value: '选项5',
+          label: '站点五',
+        },
+      ],
+    }
+  },
+})
+</script>
+ 
+<style scoped lang="scss">
+.el-input,
+.el-select {
+  width: 240px;
+}
+
+.el-form-item {
+  margin-left: 0 !important;
+}
+</style>
+<style>
+.alarmStatusDialog .el-form-item:not(.user-layout .el-form-item) {
+}
+</style>

src/views/siteDistribution/index.vue

@@ -0,0 +1,532 @@
+<template>
+  <div class="app-container SiteDistribution" style="padding:0">
+    <div class="top">
+      <div class="statistics" v-if="mode == 1">
+        <div class="item" v-for="(item, index) in statistics" :key="index">
+          <img :src="item.img" alt="">
+          <div class="text">
+            <span :style="{ color: item.color }">{{ item.num }}</span>
+            <span>{{ item.text }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="query" v-if="mode == 2">
+        <a-tree-select
+            v-model:value="city"
+            :tree-data="cityArray"
+            placeholder="请选择城市"
+            tree-default-expand-all
+            class="citySelect"
+            style="width:120px;margin-right:10px;"
+          >
+        </a-tree-select>
+        <a-select
+          v-model:value="siteSlect"
+          placeholder=""
+          :options="siteArray"
+          @change="handleChange"
+          class="state"
+        >
+        </a-select>
+        <a-input-search
+          v-model:value="siteName"
+          placeholder="站点名称"
+          enter-button
+          @search="onSearch"
+          class="siteName"
+        />
+      </div>
+      <div class="modeSwitching">
+        <div @click="switchMode(1)" :class="{ active: mode == 1 }">
+          <img src="@/assets/svg/map.svg" alt="">
+        </div>
+        <div @click="switchMode(2)" :class="{ active: mode == 2 }">
+          <img src="@/assets/svg/menu.svg" alt="">
+        </div>
+      </div>
+      <div class="city">
+
+      </div>
+    </div>
+    <div class="middle">
+      <div  id="map" ref="map" style="width:100%;height:100%;" v-if="mode == 1"></div>
+      <div class="table" v-if="mode == 2">
+        <el-table :data="tableData" border stripe :header-cell-style="headClass" height="71vh" style="overflow-y: auto;">
+          <el-table-column
+            fixed
+            prop="platformAreaName"
+            label="站点名称"
+            width=""
+          ></el-table-column>
+          <el-table-column
+            fixed
+            prop="platformAreaName"
+            label="分组名称"
+            width=""
+          ></el-table-column>
+          <el-table-column
+            fixed
+            prop="platformAreaName"
+            label="实时负荷"
+            width=""
+          ></el-table-column>
+          <el-table-column
+            fixed
+            prop="platformAreaName"
+            label="站点状态"
+            width=""
+          ></el-table-column>
+          <el-table-column
+            fixed
+            prop="platformAreaName"
+            label="设备总数"
+            width=""
+          ></el-table-column>
+          <el-table-column
+            fixed
+            prop="platformAreaName"
+            label="告警数"
+            width=""
+          ></el-table-column>
+          <el-table-column
+            fixed
+            prop="platformAreaName"
+            label="电话"
+            width=""
+          ></el-table-column>
+          <el-table-column
+            fixed
+            prop="platformAreaName"
+            label="地址"
+            width=""
+          ></el-table-column>
+        </el-table>
+        <div class="paginationBlock">
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="currentPage"
+            :page-sizes="[15, 20, 25, 30]"
+            :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="total"
+          ></el-pagination>
+        </div>
+      </div>
+    </div>
+    <div class="bottom" v-if="mode == 1">
+      <div class="itemWrap">
+        <div class="item" @click="site(4)" :class="{ active: siteState.includes(4) }" v-if="siteState.includes(1)">
+          <img src="@/assets/svg/name.svg" alt="">
+          <p>名称</p>
+        </div>
+        <div class="item" @click="site(3)" :class="{ active: siteState.includes(3) }" v-if="siteState.includes(1)">
+          <img src="@/assets/svg/wifi.svg" alt="">
+          <p>在线</p>
+        </div>
+        <div class="item" @click="site(2)" :class="{ active: siteState.includes(2) }" v-if="siteState.includes(1)">
+          <img src="@/assets/svg/alerm.svg" alt="">
+          <p>告警</p>
+        </div>
+      </div>
+      <div class="item" @click="site(1)" :class="{ active: siteState.includes(1) }">
+         <img src="@/assets/svg/site.svg" alt="">
+         <p>站点</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// import alarmTotal from './alarmTotal'
+// import { useStore } from 'vuex'
+// import { computed, defineComponent, onMounted, ref } from 'vue'
+// import * as api from '@/api/alarmManage/index'
+// import { ElMessage } from 'element-plus'
+// import { useRouter } from 'vue-router'
+import zhanDian from "@/assets/images/zhanDian.png";
+import liXian from "@/assets/images/liXian.png";
+import weiChuLi from "@/assets/images/weiChuLi.png";
+import sheBei from "@/assets/images/sheBei.png";
+import { initMap, markers, labelState } from "@/assets/js/baiduMap.js";
+import { ref,onMounted } from "vue";
+onMounted(() => {
+  init()
+})
+const mode = ref(1)//1:列表模式 2:地图模式
+const siteState = ref([]) //true:站点显示 false:站点隐藏
+const statistics = ref([
+  { num:1, img:zhanDian, text:'站点总数', color:'#2ACDDA'},
+  { num:2, img:liXian, text:'离线站总数', color:'#AAA' }, 
+  { num:3, img:weiChuLi, text:'未处理告警数', color:'#FFB00A' },
+  { num:4, img:sheBei, text:'设备数', color:'#2FA6FF' }
+])
+const  markerArray = ref([
+    { longitude:121.486647, latitude:31.220165, name:"公司名称",state:0,tatal:100,alert:4,tel:"13120222222",address:"公司地址"},
+    { longitude:121.486647, latitude:31.010165, name:"公司名称2",state:1,tatal:10,alert:2,tel:"13120222222",address:"公司地址"},
+    { longitude:121.486647, latitude:30.010165, name:"公司名称3",state:0,tatal:1,alert:0,tel:"13120222222",address:"公司地址"}
+]) //点标记集
+const dian = ref([])
+
+// 表格数据
+const cityArray = ref([
+  { 
+    value: '1',
+    label: '上海',
+    children: [
+      {
+        value: '11',
+        label: '青浦',
+      },
+      {
+        value: '12',
+        label: '松江',
+      },
+    ]
+  },
+  { 
+    value: '2',
+    label: '全部',
+  },
+  
+])
+const city = ref(1)
+const siteSlect = ref("")
+const siteArray = ref([
+  { value:"", label:"全部" },
+  { value:"1", label:"在线" },
+  { value:"0", label:"离线" },
+])
+const siteName = ref("")
+
+
+
+const total = ref(100)
+const pageSize = ref(15)
+const currentPage = ref(1)
+const tableData = ref([
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  // { platformAreaName: "名称"},
+  // { platformAreaName: "名称"},
+  // { platformAreaName: "名称"},
+  // { platformAreaName: "名称"},
+  // { platformAreaName: "名称"},
+  // { platformAreaName: "名称"},
+])
+
+//初始化
+function init(){
+  initMap()
+  site(1)
+}
+/**
+ * 切换模式
+ * @param {Number} val 1:列表模式 2:地图模式
+ */
+function switchMode(val) {
+  mode.value = val
+  if(val == 1){
+    setTimeout(() => {
+      init()
+      site(1)
+    })
+  }
+}
+
+/**
+ * 站点隐、显控制
+*/
+function site(val){
+  //站点隐现其他项
+  siteState.value = siteState.value.includes(val) ? siteState.value.filter(item => item!== val) : [...siteState.value, val]
+  if(val == 1 || val == 2 || val == 3) {
+    //站点隐现（全部/在线/告警）
+    if(siteState.value.includes(1)){
+      dian.value = []
+      //站点在线并告警 / 所有站点
+      if(siteState.value.includes(2) && siteState.value.includes(3) || !siteState.value.includes(2) && !siteState.value.includes(3)){
+        markers(markerArray.value)
+      }
+      //告警设备隐现(离线)
+      if(siteState.value.includes(2) && !siteState.value.includes(3)){
+        for(let i=0;i<markerArray.value.length;i++){
+          if(!markerArray.value[i].state){
+            dian.value.push(markerArray.value[i])
+          }
+        }
+        markers(dian.value)
+      }
+      //在线设备隐现
+      if(!siteState.value.includes(2) && siteState.value.includes(3)){
+        for(let i=0;i<markerArray.value.length;i++){
+          if(markerArray.value[i].state){
+            dian.value.push(markerArray.value[i])
+          }
+        }
+        markers(dian.value)
+      }
+    }
+    if(!siteState.value.includes(1)){
+      markers()
+    }
+  }
+  //文本标注隐现4
+  if(siteState.value.includes(4)){
+    if(siteState.value.includes(1)){
+      labelState(dian.value.length == 0 ? markerArray.value : dian.value)
+    }else{
+      labelState()
+    }
+  }else{
+    labelState()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.SiteDistribution{
+  position: relative;
+  overflow: hidden;
+  .top{
+    .statistics{
+      position: absolute;
+      z-index: 1;
+      top:20px;
+      left:20px;
+      width:40%;
+      height:78px;
+      display: flex;
+      flex-direction: row;
+      
+      .item{
+        width:100%;
+        height:100%;
+        background: #fff;
+        padding:14px 0 3% 3%;
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: row;
+        img{
+          vertical-align: middle;
+          margin-right:10px;
+          width:50px;
+          height:50px;
+        }
+        >div{
+          display: flex;
+          flex-direction: column;
+          color:#333;
+          font-size: 14px;
+          margin-top:2px;
+          span:nth-child(1){
+            font-weight: bold;
+            font-size: 16px;
+            margin-bottom:10px;
+          }
+        }
+      }
+    }
+    .modeSwitching{
+      position: absolute;
+      z-index: 1;
+      top:20px;
+      right:20px;
+      width: 68px;
+      height: 32px;
+      display: flex;
+      border-radius: 2px;
+      background: #fff;
+      font-size: 22px;
+      cursor: pointer;
+      box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.07);
+      >div{
+        width:50%;
+        height:100%;
+        line-height: 115%;;
+        display: inline-block;
+        background: none;
+        text-align: center;
+        img{
+          width:16px;
+          transform: translateX(80px);
+          filter: drop-shadow(#333 -80px 1px 0px);
+        }
+      }
+      .active{
+        background: #48A4FF;
+        img{
+          width:16px;
+          transform: translateX(80px);
+          filter: drop-shadow(#fff -80px 1px 0px);
+        }
+      }
+    }
+    .query{
+      position: absolute;
+      right:100px;
+      top:20px;
+      z-index: 1;
+      >div{
+        display: inline-block;
+        margin-right:10px;
+      }
+      .state{
+        width:80px;
+      }
+      .siteName{
+        width:200px;
+      }
+    }
+  }
+  .middle{
+    width:100%;
+    height:100%;
+    position: absolute;
+    z-index: 0;
+    .table{
+      padding:20px;
+      margin-top:40px;
+    }
+  }
+  .bottom{
+    position: absolute;
+    z-index: 1;
+    bottom:20px;
+    right:20px;
+    .item{
+      padding:4px 8px 2px;
+      text-align: center;
+      border-bottom:1px solid #eee;
+      background: #fff;
+      cursor: pointer;
+      img{
+        font-size: 14px;
+        transform: translateX(80px);
+        filter: drop-shadow(#333 -80px 1px 0px);
+      }
+      >p{
+        font-size: 12px;
+        color:#333;
+        margin:6px 0 0px;
+      }
+    }
+    .item:last-child(1){
+      border-bottom:none;
+    }
+    .active{
+        background: #48A4FF;
+        img{
+          transform: translateX(80px);
+          filter: drop-shadow(#fff -80px 1px 0px);
+        }
+        p{
+          color:#fff;
+        }
+      }
+  }
+}
+
+</style>
+<style>
+
+.BMap_copCtrl,.anchorBL{
+  display: none;
+  
+}
+
+</style>
+<style lang="scss">
+.BMap_bubble_pop{
+  width:270px !important;
+  padding:0 !important;
+  border-radius: 4px !important;
+  box-shadow:  0px 3px 7px 0px rgba(0,0,0,0.07);
+  margin-top:35px;
+  margin-left:-26px;
+  // background: linear-gradient(to bottom right, #fff, #fff);
+  .BMap_bubble_center,.BMap_bubble_content,.boxs{
+      width:270px !important;
+  }
+  .BMap_bubble_center{
+    margin-top:-30px;
+    .boxs{
+      .title{
+        font-size: 16px;
+        line-height: 40px;
+        padding-left:20px;
+      }
+      .content{
+        padding:0 20px 4px;
+        border-top: 1px solid #E9E9F3;
+        >div{
+          border-top: 1px solid #E9E9F3;
+          height:40px;
+          line-height: 40px;
+          display: flex;
+          justify-content: space-between;
+        }
+        >div:nth-child(1){
+          border-top:none;
+        }
+      }
+    }
+  }
+  .BMap_bubble_center:after{
+    content: ""; /* 伪元素不包含内容 */
+    position: absolute; /* 绝对定位相对于.arrow-down */
+    top: 100%; /* 向下定位 */
+    left: 50%; /* 水平居中定位 */
+    width: 0; /* 必须设置为0，因为我们不显示宽度 */
+    height: 0; /* 必须设置为0，因为我们不显示高度 */
+    margin-left: -15px; /* 根据需要调整，这里是让箭头中心对齐 */
+    border-left: 15px solid transparent; /* 左边框透明 */
+    border-right: 15px solid transparent; /* 右边框透明 */
+    border-top: 15px solid #fff; /* 上边框是三角形的颜色 */
+  }
+ 
+  .BMap_bubble_buttons{
+    top:4px !important;
+    >div:nth-child(2){
+      >div{
+        font-size: 26px !important;
+      }
+    }
+  }
+  >img{
+    display: none;
+  }
+}
+.shadow{
+  display: none;
+}
+
+    
+.BMap_bubble_buttons{
+  /* >div:nth-child(2){
+    width:100px;
+  } */
+}
+.el-table__header-wrapper { position: sticky; width: 100%; top:0px; z-index: 2;color:#333 }
+</style>

src/views/starMarkingEquipment/components/chart.vue

@@ -0,0 +1,103 @@
+<template>
+  <div  v-loading="loading">
+    <div class="chart" ref="lineChartBanlance" />
+  </div>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+import * as echarts from 'echarts'
+
+
+    let lineChartBanlance = ref(null)
+    const electricChart=ref({})
+    const xData= [ "00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00" ]
+    const dataType= [ "IA(A)", "IB(A)", "IC(A)" ]
+    const data2 = [
+      [120, 132, 101, 134, 90, 230, 210, 1, 45, 56, 78, 8],
+      [10, 12, 11, 14, 9, 30, 21, 100, 245, 156, 378, 568],
+      [1200, 1312, 1, 1304, 900, 2300, 20, 105, 45, 16, 708, 68]
+    ]
+    // 读取数据 func
+    const loading = ref(true)
+    function echarts2(){
+      let myChart = echarts.init(lineChartBanlance.value)
+      // 绘制图表
+      myChart.setOption(option)
+      loading.value = false
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+    
+    var option 
+    option = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: '#6a7985'
+          }
+        }
+      },
+      legend: {
+        data: dataType,
+        bottom:"0"
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {}
+        }
+      },
+      grid: {
+        top:'14%',
+        left: '3%',
+        right: '4%',
+        bottom: '10%',
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: false,
+          data: xData
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          axisLine: { // 轴线
+            show: true, // 是否显示
+            lineStyle: { // 轴线的样式
+                color: '#333',
+                width: 1
+            }
+          },
+        }
+      ],
+      
+    };
+    var series = []
+    for (let i = 0; i < dataType.length; i++) {
+      series.push({
+        name: dataType[i],
+        type: 'line',
+        stack: 'Total',
+        areaStyle: {},
+        emphasis: {
+          focus: 'series'
+        },
+        data: data2[i]
+      })
+    }
+    option.series = series
+    onMounted(() => {
+      echarts2()
+    })
+
+</script>
+<style lang="scss" scoped>
+.chart{
+  height:306px;
+}
+</style>

src/views/starMarkingEquipment/components/electron.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="container">
+    <el-table :data="tableData" border stripe :header-cell-style="headClass" height="65vh" style="overflow-y: auto;">
+      <el-table-column
+        prop="platformAreaName"
+        label="文件名称"
+        width="700"
+      ></el-table-column>
+      <el-table-column
+        prop="platformAreaName"
+        label="上传时间"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="platformAreaName"
+        label="上传人"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="platformAreaName"
+        label="操作"
+        width=""
+      ></el-table-column>
+    </el-table>
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[15, 20, 25, 30]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+const total = ref(100)
+const pageSize = ref(15)
+const currentPage = ref(1)
+const tableData = ref([
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"},
+  { platformAreaName: "名称"}
+])
+
+</script>
+<style lang="scss" scoped>
+.filter-container{
+  margin-top:-10px;
+}
+ .content{
+  margin-top:-10px;
+ }
+</style>

src/views/starMarkingEquipment/components/overview.vue

@@ -0,0 +1,575 @@
+<template>
+  <div class="container">
+    <div class="overview">
+      <div class="top">
+        <span>实时概览</span>
+        <img src="@/assets/images/overview-header-bg.png" 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>
+        </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>
+          <div class="right">
+            <div class="title" style="margin:10px 0 4px;font-weight: 600;">
+              历史数据
+            </div>
+            <a-tabs v-model:activeKey="activeType" style="background: #fafafa">
+              <a-tab-pane :tab="item.name" v-for="item in activeList" :key="item.key">
+                <chart />
+              </a-tab-pane>
+            </a-tabs>
+              <div class="search">
+                <div :class="['switch',dateType == '1' ? 'active': '']" @click="dateSwitch(1)">日</div>
+                <div :class="['switch',dateType == '2' ? 'active': '']" @click="dateSwitch(2)">月</div>
+                <div class="date">
+                  <el-select v-model="monthType" placeholder="" style="width: 100px;margin-right:10px;" v-if="dateType == 2">
+                    <el-option
+                      v-for="item in monthDate"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    />
+                  </el-select>
+                    <span>日期：</span>
+                    <el-date-picker
+                      v-model="day"
+                      type="day"
+                      placeholder=""
+                      :disabled-date="disabledDate"
+                      v-if="dateType == 1"
+                      style="width:140px;margin-top:-5px;display: inline-block;"
+                    />
+                    <el-date-picker
+                      v-model="month"
+                      type="month"
+                      placeholder=""
+                      :disabled-date="disabledDate"
+                      v-if="dateType == 2"
+                      style="width:140px;display: inline-block;"
+                    />
+                </div>
+              </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="line"></div>
+    <div class="useElectricity">
+      <div class="top">
+        <span>用电</span>
+        <img src="@/assets/images/overview-header-bg.png" 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>
+        <div class="right">
+          <div>
+            <span>当月分时电量</span>
+            <pie :data="electricalVoltage"/>
+          </div>
+          <div>
+            <span>当月分时电费</span>
+            <pie :data="electricityBill"/>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+import dayjs from 'dayjs'
+import chart from './chart'
+import pie from './pie'
+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'
+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 activeType = ref('1')
+const activeList = ref([
+  { key:"1", name:'电流' },
+  { key:"2", name:'电压' },
+  { key:"3", name:'功率' },
+  { key:"4", name:'需量' },
+  { key:"5", name:'频率' },
+  { key:"6", name:'功率因数' },
+  { key:"7", name:'电度' },
+  { key:"8", name:'用电' },
+  { key:"9", name:'发电' },
+])
+//用电数据
+const dayOrMonth = ref(1)
+const day = ref(dayjs().format('YYYY-MM-DD'))
+const month = ref(dayjs().format('YYYY-MM'))
+const monthDate = ref([
+  { label:"平均值", value: "1" },
+  { label:"最高值", value: "2" },
+  { label:"最小值", value: "3" },
+])
+const dateType = ref("1")
+const monthType = ref('1')
+//用电
+const electronData = ref([
+  { name: '当日用电', value: '3681', unit: 'kWh', img: UAB, synchronism: '昨日同期', synchronisNum:"6162", proportion:"45" },
+  { name: '当日电费', value: '1202.43', unit: '元', img: UAB, synchronism: '昨日同期', synchronisNum:"3300.88", proportion:"63.57" },
+  { name: '当月用电', value: '129465', unit: 'kWh', img: UAB, synchronism: '上月同期', synchronisNum:"148950", proportion:"13.08" },
+  { name: '当月电费', value: '73618.45', unit: 'kWh', img: UAB, synchronism: '上月同期', synchronisNum:"91539.14", proportion:"19.58" },
+])
+
+const electricalVoltage = ref({
+  data:[
+    { value: 1048, name: '尖', unit:"kWh" },
+    { value: 735, name: '峰', unit:"kWh" },
+    { value: 580, name: '平', unit:"kWh" },
+    { value: 484, name: '谷', unit:"kWh" }
+  ],
+  color:["#FE8B6A","#BB7582","#F54C5E","#8AD4C7"],
+  type:"3"
+})
+
+const electricityBill = ref({
+  data:[
+    { value: 1048, name: '尖', unit:"元" },
+    { value: 735, name: '峰', unit:"元" },
+    { value: 580, name: '平', unit:"元" },
+    { value: 484, name: '谷', unit:"元" }
+  ],
+  color:["#FE8B6A","#BB7582","#F54C5E","#8AD4C7"],
+  type:"3"
+})
+function disabledDate(time) {
+  // 禁止选择今天之后的日子
+  return time.getTime() > Date.now();
+}
+
+function dateSwitch(type){
+  dateType.value = type
+}
+</script>
+<style lang="scss" scoped>
+.container{
+  .overview{
+    background: #ffff;
+    border-radius: 4px;
+    .top{
+      span{
+        font-size: 14px;
+        font-weight: bold;
+        display: inline-block;
+      }
+      img{
+        vertical-align: middle;
+        margin:-4px 0 0 10px;
+      }
+    }
+    .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;
+          position: relative;
+          .search{
+            position: absolute;
+            top:90px;
+            margin:0px 0 0 8px !important;
+            display: inline-block;
+            .switch{
+              width:40px;
+              height:30px;
+              line-height: 26px;
+              text-align: center;
+              margin-right:10px;
+              padding:2px;
+              background: #fff;
+              color:rgba(0,0,0,0.65);
+              border: 1px solid #d9d9d9;
+              display: inline-block;
+              cursor: pointer;
+            }
+            .active{
+              background: #6c7fff;
+              color:#fff;
+            }
+            .date{
+              width:500px;
+              display: inline-block;
+              >span{
+                vertical-align: middle;
+                display: inline-block;
+                margin-top:-5px;
+              }
+              >div:first-child{
+                width:60px;
+              }
+              >div:last-child{
+                width:calc(100% - 70px);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  .useElectricity{
+    margin-top:10px;
+    border-radius: 4px;
+    background: #fff;
+    .top{
+      span{
+        font-size: 14px;
+        font-weight: bold;
+        display: inline-block;
+      }
+      img{
+        vertical-align: middle;
+        margin:-4px 0 0 10px;
+      }
+    }
+    .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;
+        display: inline-block;
+          >div{
+            width:calc(50% - 5px);
+            margin-top:3px;
+            display: inline-block !important;
+            background: #fafafa;
+            position: relative;
+            span{
+              position: absolute;
+              top:4px;
+              left:4px;
+              font-weight: 600;
+            }
+          }
+          >div:nth-child(1){
+            margin-right:10px;
+          }
+      }
+    }
+  }
+}
+.line{
+  height:10px;
+  width:100%;
+  background: #fafafa;
+}
+</style>

src/views/starMarkingEquipment/components/pie.vue

@@ -0,0 +1,93 @@
+<template>
+  <div  v-loading="loading">
+    <div class="chart" ref="lineChartBanlance" />
+  </div>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+import * as echarts from 'echarts'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+const total = props.data?.data.reduce((acc, cur) => acc + cur.value, 0)
+    let lineChartBanlance = ref(null)
+    // 读取数据 func
+    const loading = ref(true)
+    function echarts2(){
+      let myChart = echarts.init(lineChartBanlance.value)
+      // 绘制图表
+      myChart.setOption(option)
+      loading.value = false
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+    
+    var option 
+    option = {
+      color: props.data.color,
+      title: [
+        {
+            text: props.data.data[0]?.unit,
+            x: 'center',
+            top: '53%',
+            textStyle: {
+                color: 'rgba(0,0,0,0.55)',
+                fontSize: 14,
+                fontWeight: '600',
+            },
+        },
+        {
+            text: props.data?.data[0]?.unit == 'kWh' ? Math.round(total) : total.toFixed(2),
+            x: 'center',
+            y: 'center',
+            top: '43%',
+            textStyle: {
+                fontSize: '20',
+                color: 'rgba(0,0,0,0.55)',
+                foontWeight: '600',
+            },
+        },
+    ],
+      tooltip: {
+        trigger: 'item'
+      },
+      legend: {
+        right: props.data.type == 4 ? '2%' : '0',
+        top:'2%'
+      },
+      grid: {
+        top:'30%',
+       
+        containLabel: true
+      },
+      series: [
+        {
+          name: '',
+          type: 'pie',
+          radius: ['40%', '60%'],
+          data: props.data.data,
+          label: {
+            fontSize: 12,
+            formatter: (params) => {
+              return  params.name + ':' + params.value +'\n' + (params.value / total * 100).toFixed(2) + '%';
+            },
+          },
+        }
+      ]
+      
+    };
+   
+    onMounted(() => {
+      echarts2()
+    })
+
+</script>
+<style lang="scss" scoped>
+.chart{
+  height:292px;
+}
+</style>

src/views/starMarkingEquipment/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="app-container">
+    <!-- 筛选start -->
+    <div class="filter-container">
+      <div class="left">
+        <div >
+          <div class="filter-item">
+            <p>选择设备:</p>
+            <el-select
+              v-model="status"
+              placeholder="请选择"
+              style="width: 250px"
+              clearable
+            >
+              <el-option label="正常" value="0"></el-option>
+              <el-option label="停用" value="1"></el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+      <div class="right">
+        <el-button
+            type="danger"
+            :icon="Delete"
+            class="search-button"
+          >
+          取消星标
+          </el-button>
+      </div>
+    </div>
+    <div class="content">
+      <a-tabs v-model:activeKey="activePage">
+        <a-tab-pane :tab="item.name" v-for="item in activeList" :key="item.key">
+          <overview v-if="item.key === '1'"/>
+          <electron v-if="item.key === '2'"/>
+        </a-tab-pane>
+      </a-tabs>
+    </div>
+  </div>
+</template>
+<script setup>
+import overview from './components/overview'
+import electron from './components/electron'
+import { ref } from 'vue'
+import { Delete } from '@element-plus/icons-vue'
+const activePage = ref('1')
+const activeList = ref([
+  { key:"1", name:'概览' },
+  { key:"2", name:'电子资料' },
+])
+</script>
+<style lang="scss" scoped>
+.filter-container{
+  margin-top:-10px;
+}
+ .content{
+  margin-top:-10px;
+ }
+ .filter-item{
+  p{
+    margin:6px 4px 0 0;
+  }
+ }
+</style>

src/views/useElectricity/components/chart.vue

@@ -0,0 +1,109 @@
+<template>
+  <div  v-loading="loading" >
+    <div class="chart" ref="lineChartBanlance" />
+  </div>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+import * as echarts from 'echarts'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+
+    let lineChartBanlance = ref(null)
+    const electricChart=ref({})
+    // 读取数据 func
+    const loading = ref(true)
+    function echarts2(){
+      let myChart = echarts.init(lineChartBanlance.value)
+      // 绘制图表
+      myChart.setOption(option)
+      loading.value = false
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+    
+    var option 
+    option = {
+      title: {
+        text: props.data.title,
+        left: 'center',
+        top: '10px',
+        textStyle: {
+          fontSize: 16,
+          color: '#333'
+        }
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: '#6a7985'
+          }
+        }
+      },
+      legend: {
+        data: props.data.type,
+        bottom:"0"
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {}
+        }
+      },
+      grid: {
+        top:'14%',
+        left: '3%',
+        right: '4%',
+        bottom: '10%',
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'category',
+          // boundaryGap: false,
+          data: props.data.xAxis,
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          name:props.data.unit,
+          axisLine: { // 轴线
+            show: true, // 是否显示
+            lineStyle: { // 轴线的样式
+                color: '#333',
+                width: 1
+            }
+          },
+        }
+      ],
+      
+    };
+    var series = []
+    for (let i = 0; i < props.data.type.length; i++) {
+      series.push({
+        name: props.data.type[i],
+        type: 'bar',
+        stack: 'Total',
+        barWidth: 25,
+        // areaStyle: {},
+        data: props.data.data[i],
+      })
+    }
+    option.series = series
+    onMounted(() => {
+      echarts2()
+    })
+
+</script>
+<style lang="scss" scoped>
+.chart{
+  height:306px;
+}
+</style>

src/views/useElectricity/components/tableD.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-table :data="tableData" border stripe :header-cell-style="headClass"   height="calc(100vh - 110px)" style="overflow-y: auto;">
+    <el-table-column prop="a" label="支路名称" align="center" />
+    <el-table-column  label="尖" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column  label="峰" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column  label="平" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column  label="谷" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column  label="总" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column prop="a" label="谷电量占比" align="center" />
+  </el-table>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+const tableData = ref(props.data)
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/useElectricity/index.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="app-container fsyd">
+    <div class="item">
+      <div class="left">
+        <div class="top">
+          <el-row>
+            <el-col :span="24">标签：<span>支路</span></el-col>
+            <el-col :span="24">
+              <div>电--支路 名称</div>
+              <div class="right">
+                <el-checkbox-group v-model="selectAll" style="margin-top: -10px;" @change="siteAllChange">
+                  <el-checkbox :label="1" size="large" >全选</el-checkbox>
+                </el-checkbox-group>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <div class="bottom">
+          <el-checkbox-group v-model="siteSelectArray">
+            <el-checkbox :label="item.value" size="large" v-for="item in siteList" :key="item.value" style="display: block;position: relative; " @change="siteClick">
+              <div style="top:0px !important;position: absolute;">
+                <img src="@/assets/images/site.png" alt="" style="width:15px;margin-right:8px;vertical-align: top;">{{ item.label }}
+              </div>
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <div class="right">
+        <div class="top">
+          <span>日期：</span>
+          <el-date-picker
+            v-model="time"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY/MM/DD"
+            value-format="YYYY-MM-DD"
+            unlink-panels
+          />
+          <el-button type="primary" :icon="Search" style="margin-left:10px;">查询</el-button>
+          <el-button type="warning" :icon="Bottom">导出</el-button>
+          <div class="right">
+            <div class="modeSwitching pob">
+              <div @click="switchMode(1)" :class="{ active: mode == 1 }">
+                表格
+              </div>
+              <div @click="switchMode(2)" :class="{ active: mode == 2 }">
+                图表
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="content">
+          <tableD :data="tableData"  v-if="mode == 1" style="padding:10px;"/>
+          <div v-if="mode == 2">
+            <div class="echartWrap">
+              <div class="top">
+                <img src="@/assets/images/logo1.png" alt="">
+                <span>告警处理统计</span>
+              </div>
+              <div class="pie"><pie :data="pieData1" /></div>
+              <div class="pie"><pie :data="pieData2" /></div>
+              <div class="right" style="padding:20px 10px;">
+                <div class="modeSwitching">
+                  <div @click="switchMode2(1)" :class="{ active2: mode2 == 1 }">
+                    电量
+                  </div>
+                  <div @click="switchMode2(2)" :class="{ active2: mode2 == 2 }">
+                    电费
+                  </div>
+                </div>
+                <div class="chart">
+                  <chart :data="chartData1" v-if="mode2 == 1"/>
+                  <chart :data="chartData2" v-if="mode2 == 2"/>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+import { ref,onMounted } from "vue";
+import tableD from "./components/tableD";
+import chart from "./components/chart";
+import pie from "@/views/starMarkingEquipment/components/pie";
+onMounted(() => {
+  init()
+})
+const selectAll = ref([]) //站点全选
+const siteSelectArray = ref([]) //站点选中列表
+const siteList = ref([
+  { label:"站点1", value :1},
+  { label:"站点2", value :2},
+  { label:"站点3", value :3},
+  { label:"站点4", value :4},
+]) //站点列表
+//初始化
+
+const mode = ref(2) //模式 1:列表模式 2:模式图表
+const mode2 = ref(1) //模式 1:电量模式 2:电费模式
+const time = ref()
+
+
+const tableData = ref([
+  { a: 1000 },
+  { a: 1000 },
+]) //列表数据
+const pieData1 = ref({
+  data:[
+    { value: 1048, name: '尖', unit:"kWh" },
+    { value: 735, name: '峰', unit:"kWh" },
+    { value: 580, name: '平', unit:"kWh" },
+    { value: 484, name: '谷', unit:"kWh" }
+  ],
+  color:["#FE8B6A","#BB7582","#F54C5E","#8AD4C7"],
+  type:"4"
+}) //饼图数据
+const pieData2 = ref({
+  data:[
+    { value: 48, name: '尖', unit:"元" },
+    { value: 75, name: '峰', unit:"元" },
+    { value: 580, name: '平', unit:"元" },
+    { value: 484, name: '谷', unit:"元" }
+  ],
+  color:["#FE8B6A","#BB7582","#F54C5E","#8AD4C7"],
+  type:"4"
+}) //饼图数据
+
+const chartData1 = ref({
+  xAxis:["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
+  type:["总有功功率1（kW）","总有功功率2（kW）","总有功功率3（kW）","总有功功率4（kW）","总有功功率5（kW）"],
+  data:[
+    [100, 101, 120, 50, 70, 95, 65, 120, 5, 14, 78, 32],
+    [5, 4, 10, 15, 13, 14, 9, 12, 45, 25, 32],
+    [100,89,101,110,99,94,45,89,99,100,110,102],
+    [11,8,33,22,11,66,22,8,13,8,46,16],
+    [50,51,15,20,45,35,35,40,45,20,15,6]
+  ],
+  unit:"kWh",
+  title:"每日电量趋势"
+})
+const chartData2 = ref({
+  xAxis:["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
+  type:["总有功功率1（kW）","总有功功率2（kW）","总有功功率3（kW）","总有功功率4（kW）","总有功功率5（kW）"],
+  data:[
+    [100, 101, 120, 50, 70, 95, 65, 120, 5, 14, 78, 32],
+    [5, 4, 10, 15, 13, 14, 9, 12, 45, 25, 32],
+    [100,89,101,110,99,94,45,89,99,100,110,102],
+    [11,8,33,22,11,66,22,8,13,8,46,16],
+    [50,51,15,20,45,35,35,40,45,20,15,6]
+  ],
+  unit:"kWh",
+  title:"每日电费趋势"
+})
+
+function init(){
+
+}
+
+/**
+ * 切换模式
+ * @param {Number} val 1:表格模式 2:图表模式
+ */
+function switchMode(val) {
+  mode.value = val
+  // if(val == 1){
+  //   setTimeout(() => {
+  //     init()
+  //     site(1)
+  //   })
+  // }
+}
+
+/**
+ * 切换模式
+ * @param {Number} val 1:电量模式 2:电费模式
+ */
+ function switchMode2(val) {
+  mode2.value = val
+
+}
+
+
+
+/**
+ * 全选事件
+ */
+function siteAllChange(){
+  if(selectAll.value[0]){
+    siteSelectArray.value = [1,2,3,4]
+  }else{
+    siteSelectArray.value = []
+  }
+}
+
+/**
+ * 站点列表点击事件
+ * @param val 
+ */
+function siteClick(val){
+  if(siteSelectArray.value.length == siteList.value.length){
+    selectAll.value = [1]
+    console.log(selectAll.value)
+  }else{
+    selectAll.value = []
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.fsyd{
+  height:100%;
+  background: #F2F3F8;
+  padding:0 !important;
+  .item{
+    >div{
+      padding:10px;
+      display: inline-block;
+      vertical-align: top;
+    }
+    .left{
+      width:20%;
+      height:100%;
+      margin-right:10px;
+      font-size: 14px;
+      background: #fff;
+      border-radius: 4px;
+      .top{
+        padding-bottom:10px;
+        border-bottom:1px solid #eee;
+        .el-row{
+          .el-col{
+            margin-top:10px;
+          }
+          .el-col:nth-child(1){
+            color:#333;
+            span{
+              padding:5px;
+              font-size:12px;
+              color:#fff;
+              background:#48A4FF;
+            }
+          }
+          .el-col:nth-child(2){
+            >div{
+              width:50%;
+              height:20px;
+              display: inline-block;
+            }
+            >div:nth-child(2){
+              text-align: right;
+            }
+          }
+        }
+  
+      }
+      .bottom{
+        padding:20px;
+      }
+    }
+    >.right{
+      width:calc(80% - 10px);
+      .top{
+        margin-top:-10px;
+        font-size: 12px;
+      }
+      .comtent{
+        height:calc(100% - 50px);
+        background: #fff;
+      }
+    }
+    .content{
+     margin-top:20px;
+     background: #fff;
+     border-radius: 4px;
+     .echartWrap{
+      .pie{
+        width:50%;
+        display: inline-block;
+      }
+      .chart{
+        width:100%;
+      }
+     }
+     .top{
+        background: #fafafa;
+        padding:8px;
+        img{
+          width:25px;
+        }
+        img,span{
+          display: inline-block;
+          vertical-align: middle;
+        }
+        span{
+          font-size: 16px;
+          margin-left:10px;
+        }
+     }
+    }
+  }
+}
+.pob{
+  position: absolute;
+  z-index: 1;
+  top:20px;
+  right:20px;
+  background: #fff !important;
+}
+.modeSwitching{
+  width:116px;
+  height:32px;
+  display: flex;
+  border-radius: 2px;
+  background: #F2F3F8;
+  cursor: pointer;
+  box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.07);
+  >div{
+    padding:8px 15px;
+    display: inline-block;
+    background: none;
+    text-align: center;
+    font-size: 14px;
+    color:#333;
+  }
+  .active{
+    background: #48A4FF;
+    color:#fff;
+  }
+  .active2{
+    background: #48A4FF;
+    color:#fff;
+  }
+}
+</style>

vue.config.js

@@ -47,7 +47,7 @@ module.exports = {
     publicPath,
     assetsDir,
     outputDir,
-    lintOnSave,
+    lintOnSave:false,
     transpileDependencies,
     devServer: {
         hot: true,
@@ -133,7 +133,7 @@ module.exports = {
             config.devtool('source-map')
         })
 
-        config.when(process.env.NODE_ENV !== 'development', (config) => {
+        config.when(process.env.NODE_ENV !== 'production', (config) => {
             config.performance.set('hints', false)
             config.devtool('none')
             config.optimization.splitChunks({