1.首页初版

cpp-ui/src/assets/echarts_theme/dark.js

@@ -1,420 +1,426 @@
 (function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        // AMD. Register as an anonymous module.
-        define(['exports', 'echarts'], factory);
-    } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
-        // CommonJS
-        factory(exports, require('echarts'));
-    } else {
-        // Browser globals
-        factory({}, root.echarts);
-    }
+  if (typeof define === 'function' && define.amd) {
+    // AMD. Register as an anonymous module.
+    define(['exports', 'echarts'], factory);
+  } else if (typeof exports === 'object' && typeof exports.nodeName !== 'string') {
+    // CommonJS
+    factory(exports, require('echarts'));
+  } else {
+    // Browser globals
+    factory({}, root.echarts);
+  }
 }(this, function (exports, echarts) {
-    var log = function (msg) {
-        if (typeof console !== 'undefined') {
-            console && console.error && console.error(msg);
-        }
-    };
-    if (!echarts) {
-        log('ECharts is not Loaded');
-        return;
+  var log = function (msg) {
+    if (typeof console !== 'undefined') {
+      console && console.error && console.error(msg);
     }
-    echarts.registerTheme('dark', {
-        "color": [
-            "#dd6b66",
-            "#759aa0",
-            "#e69d87",
-            "#8dc1a9",
-            "#ea7e53",
-            "#eedd78",
-            "#73a373",
-            "#73b9bc",
-            "#7289ab",
-            "#91ca8c",
-            "#f49f42"
-        ],
-        "backgroundColor": "rgba(51,51,51,1)",
-        "textStyle": {},
-        "title": {
-            "textStyle": {
-                "color": "#eeeeee"
-            },
-            "subtextStyle": {
-                "color": "#aaaaaa"
-            }
-        },
-        "line": {
-            "itemStyle": {
-                "borderWidth": 1
-            },
-            "lineStyle": {
-                "width": 2
-            },
-            "symbolSize": 4,
-            "symbol": "circle",
-            "smooth": false
-        },
-        "radar": {
-            "itemStyle": {
-                "borderWidth": 1
-            },
-            "lineStyle": {
-                "width": 2
-            },
-            "symbolSize": 4,
-            "symbol": "circle",
-            "smooth": false
-        },
-        "bar": {
-            "itemStyle": {
-                "barBorderWidth": 0,
-                "barBorderColor": "#ccc"
-            }
-        },
-        "pie": {
-            "itemStyle": {
-                "borderWidth": 0,
-                "borderColor": "#ccc"
-            }
-        },
-        "scatter": {
-            "itemStyle": {
-                "borderWidth": 0,
-                "borderColor": "#ccc"
-            }
-        },
-        "boxplot": {
-            "itemStyle": {
-                "borderWidth": 0,
-                "borderColor": "#ccc"
-            }
-        },
-        "parallel": {
-            "itemStyle": {
-                "borderWidth": 0,
-                "borderColor": "#ccc"
-            }
-        },
-        "sankey": {
-            "itemStyle": {
-                "borderWidth": 0,
-                "borderColor": "#ccc"
-            }
-        },
-        "funnel": {
-            "itemStyle": {
-                "borderWidth": 0,
-                "borderColor": "#ccc"
-            }
-        },
-        "gauge": {
-            "itemStyle": {
-                "borderWidth": 0,
-                "borderColor": "#ccc"
-            }
-        },
-        "candlestick": {
-            "itemStyle": {
-                "color": "#fd1050",
-                "color0": "#0cf49b",
-                "borderColor": "#fd1050",
-                "borderColor0": "#0cf49b",
-                "borderWidth": 1
-            }
-        },
-        "graph": {
-            "itemStyle": {
-                "borderWidth": 0,
-                "borderColor": "#ccc"
-            },
-            "lineStyle": {
-                "width": 1,
-                "color": "#aaa"
-            },
-            "symbolSize": 4,
-            "symbol": "circle",
-            "smooth": false,
-            "color": [
-                "#dd6b66",
-                "#759aa0",
-                "#e69d87",
-                "#8dc1a9",
-                "#ea7e53",
-                "#eedd78",
-                "#73a373",
-                "#73b9bc",
-                "#7289ab",
-                "#91ca8c",
-                "#f49f42"
-            ],
-            "label": {
-                "color": "#eee"
-            }
-        },
-        "map": {
-            "itemStyle": {
-                "areaColor": "#eee",
-                "borderColor": "#444",
-                "borderWidth": 0.5
-            },
-            "label": {
-                "color": "#000"
-            },
-            "emphasis": {
-                "itemStyle": {
-                    "areaColor": "rgba(255,215,0,0.8)",
-                    "borderColor": "#444",
-                    "borderWidth": 1
-                },
-                "label": {
-                    "color": "rgb(100,0,0)"
-                }
-            }
-        },
-        "geo": {
-            "itemStyle": {
-                "areaColor": "#eee",
-                "borderColor": "#444",
-                "borderWidth": 0.5
-            },
-            "label": {
-                "color": "#000"
-            },
-            "emphasis": {
-                "itemStyle": {
-                    "areaColor": "rgba(255,215,0,0.8)",
-                    "borderColor": "#444",
-                    "borderWidth": 1
-                },
-                "label": {
-                    "color": "rgb(100,0,0)"
-                }
-            }
-        },
-        "categoryAxis": {
-            "axisLine": {
-                "show": true,
-                "lineStyle": {
-                    "color": "#eeeeee"
-                }
-            },
-            "axisTick": {
-                "show": true,
-                "lineStyle": {
-                    "color": "#eeeeee"
-                }
-            },
-            "axisLabel": {
-                "show": true,
-                "color": "#eeeeee"
-            },
-            "splitLine": {
-                "show": false,
-                "lineStyle": {
-                    "color": [
-                        "#aaaaaa"
-                    ]
-                }
-            },
-            "splitArea": {
-                "show": false,
-                "areaStyle": {
-                    "color": [
-                        "#eeeeee"
-                    ]
-                }
-            }
-        },
-        "valueAxis": {
-            "axisLine": {
-                "show": true,
-                "lineStyle": {
-                    "color": "#eeeeee"
-                }
-            },
-            "axisTick": {
-                "show": true,
-                "lineStyle": {
-                    "color": "#eeeeee"
-                }
-            },
-            "axisLabel": {
-                "show": true,
-                "color": "#eeeeee"
-            },
-            "splitLine": {
-                "show": true,
-                "lineStyle": {
-                    "color": [
-                        "#57617B"
-                    ]
-                }
-            },
-            "splitArea": {
-                "show": false,
-                "areaStyle": {
-                    "color": [
-                        "#eeeeee"
-                    ]
-                }
-            }
-        },
-        "logAxis": {
-            "axisLine": {
-                "show": true,
-                "lineStyle": {
-                    "color": "#eeeeee"
-                }
-            },
-            "axisTick": {
-                "show": true,
-                "lineStyle": {
-                    "color": "#eeeeee"
-                }
-            },
-            "axisLabel": {
-                "show": true,
-                "color": "#eeeeee"
-            },
-            "splitLine": {
-                "show": true,
-                "lineStyle": {
-                    "color": [
-                        "#aaaaaa"
-                    ]
-                }
-            },
-            "splitArea": {
-                "show": false,
-                "areaStyle": {
-                    "color": [
-                        "#eeeeee"
-                    ]
-                }
-            }
-        },
-        "timeAxis": {
-            "axisLine": {
-                "show": true,
-                "lineStyle": {
-                    "color": "#eeeeee"
-                }
-            },
-            "axisTick": {
-                "show": true,
-                "lineStyle": {
-                    "color": "#eeeeee"
-                }
-            },
-            "axisLabel": {
-                "show": true,
-                "color": "#eeeeee"
-            },
-            "splitLine": {
-                "show": true,
-                "lineStyle": {
-                    "color": [
-                        "#aaaaaa"
-                    ]
-                }
-            },
-            "splitArea": {
-                "show": false,
-                "areaStyle": {
-                    "color": [
-                        "#eeeeee"
-                    ]
-                }
-            }
-        },
-        "toolbox": {
-            "iconStyle": {
-                "borderColor": "#999"
-            },
-            "emphasis": {
-                "iconStyle": {
-                    "borderColor": "#666"
-                }
-            }
-        },
-        "legend": {
-            "textStyle": {
-                "color": "#eeeeee"
-            }
+  };
+  if (!echarts) {
+    log('ECharts is not Loaded');
+    return;
+  }
+  echarts.registerTheme('dark', {
+    "color": [
+      "#7bd9a5",
+      "#d0648a",
+      "#4ea397",
+      "#f58db2",
+      "#22c3aa",
+      "#f2b3c9",
+      "#dd6b66",
+      "#759aa0",
+      "#e69d87",
+      "#8dc1a9",
+      "#ea7e53",
+      "#eedd78",
+      "#73a373",
+      "#73b9bc",
+      "#7289ab",
+      "#91ca8c",
+      "#f49f42"
+    ],
+    "backgroundColor": "transparent",
+    "textStyle": {},
+    "title": {
+      "textStyle": {
+        "color": "#eeeeee"
+      },
+      "subtextStyle": {
+        "color": "#aaaaaa"
+      }
+    },
+    "line": {
+      "itemStyle": {
+        "borderWidth": 1
+      },
+      "lineStyle": {
+        "width": 2
+      },
+      "symbolSize": 4,
+      "symbol": "circle",
+      "smooth": false
+    },
+    "radar": {
+      "itemStyle": {
+        "borderWidth": 1
+      },
+      "lineStyle": {
+        "width": 2
+      },
+      "symbolSize": 4,
+      "symbol": "circle",
+      "smooth": false
+    },
+    "bar": {
+      "itemStyle": {
+        "barBorderWidth": 0,
+        "barBorderColor": "#ccc"
+      }
+    },
+    "pie": {
+      "itemStyle": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "scatter": {
+      "itemStyle": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "boxplot": {
+      "itemStyle": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "parallel": {
+      "itemStyle": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "sankey": {
+      "itemStyle": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "funnel": {
+      "itemStyle": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "gauge": {
+      "itemStyle": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      }
+    },
+    "candlestick": {
+      "itemStyle": {
+        "color": "#fd1050",
+        "color0": "#0cf49b",
+        "borderColor": "#fd1050",
+        "borderColor0": "#0cf49b",
+        "borderWidth": 1
+      }
+    },
+    "graph": {
+      "itemStyle": {
+        "borderWidth": 0,
+        "borderColor": "#ccc"
+      },
+      "lineStyle": {
+        "width": 1,
+        "color": "#aaa"
+      },
+      "symbolSize": 4,
+      "symbol": "circle",
+      "smooth": false,
+      "color": [
+        "#dd6b66",
+        "#759aa0",
+        "#e69d87",
+        "#8dc1a9",
+        "#ea7e53",
+        "#eedd78",
+        "#73a373",
+        "#73b9bc",
+        "#7289ab",
+        "#91ca8c",
+        "#f49f42"
+      ],
+      "label": {
+        "color": "#eee"
+      }
+    },
+    "map": {
+      "itemStyle": {
+        "areaColor": "#eee",
+        "borderColor": "#444",
+        "borderWidth": 0.5
+      },
+      "label": {
+        "color": "#000"
+      },
+      "emphasis": {
+        "itemStyle": {
+          "areaColor": "rgba(255,215,0,0.8)",
+          "borderColor": "#444",
+          "borderWidth": 1
         },
-        "tooltip": {
-            "axisPointer": {
-                "lineStyle": {
-                    "color": "#eeeeee",
-                    "width": "1"
-                },
-                "crossStyle": {
-                    "color": "#eeeeee",
-                    "width": "1"
-                }
-            }
+        "label": {
+          "color": "rgb(100,0,0)"
+        }
+      }
+    },
+    "geo": {
+      "itemStyle": {
+        "areaColor": "#eee",
+        "borderColor": "#444",
+        "borderWidth": 0.5
+      },
+      "label": {
+        "color": "#000"
+      },
+      "emphasis": {
+        "itemStyle": {
+          "areaColor": "rgba(255,215,0,0.8)",
+          "borderColor": "#444",
+          "borderWidth": 1
         },
-        "timeline": {
-            "lineStyle": {
-                "color": "#eeeeee",
-                "width": 1
-            },
-            "itemStyle": {
-                "color": "#dd6b66",
-                "borderWidth": 1
-            },
-            "controlStyle": {
-                "color": "#eeeeee",
-                "borderColor": "#eeeeee",
-                "borderWidth": 0.5
-            },
-            "checkpointStyle": {
-                "color": "#e43c59",
-                "borderColor": "#c23531"
-            },
-            "label": {
-                "color": "#eeeeee"
-            },
-            "emphasis": {
-                "itemStyle": {
-                    "color": "#a9334c"
-                },
-                "controlStyle": {
-                    "color": "#eeeeee",
-                    "borderColor": "#eeeeee",
-                    "borderWidth": 0.5
-                },
-                "label": {
-                    "color": "#eeeeee"
-                }
-            }
+        "label": {
+          "color": "rgb(100,0,0)"
+        }
+      }
+    },
+    "categoryAxis": {
+      "axisLine": {
+        "show": true,
+        "lineStyle": {
+          "color": "#eeeeee"
+        }
+      },
+      "axisTick": {
+        "show": true,
+        "lineStyle": {
+          "color": "#eeeeee"
+        }
+      },
+      "axisLabel": {
+        "show": true,
+        "color": "#eeeeee"
+      },
+      "splitLine": {
+        "show": false,
+        "lineStyle": {
+          "color": [
+            "#aaaaaa"
+          ]
+        }
+      },
+      "splitArea": {
+        "show": false,
+        "areaStyle": {
+          "color": [
+            "#eeeeee"
+          ]
+        }
+      }
+    },
+    "valueAxis": {
+      "axisLine": {
+        "show": true,
+        "lineStyle": {
+          "color": "#eeeeee"
+        }
+      },
+      "axisTick": {
+        "show": true,
+        "lineStyle": {
+          "color": "#eeeeee"
+        }
+      },
+      "axisLabel": {
+        "show": true,
+        "color": "#eeeeee"
+      },
+      "splitLine": {
+        "show": true,
+        "lineStyle": {
+          "color": [
+            "#57617B"
+          ]
+        }
+      },
+      "splitArea": {
+        "show": false,
+        "areaStyle": {
+          "color": [
+            "#eeeeee"
+          ]
+        }
+      }
+    },
+    "logAxis": {
+      "axisLine": {
+        "show": true,
+        "lineStyle": {
+          "color": "#eeeeee"
+        }
+      },
+      "axisTick": {
+        "show": true,
+        "lineStyle": {
+          "color": "#eeeeee"
+        }
+      },
+      "axisLabel": {
+        "show": true,
+        "color": "#eeeeee"
+      },
+      "splitLine": {
+        "show": true,
+        "lineStyle": {
+          "color": [
+            "#aaaaaa"
+          ]
+        }
+      },
+      "splitArea": {
+        "show": false,
+        "areaStyle": {
+          "color": [
+            "#eeeeee"
+          ]
+        }
+      }
+    },
+    "timeAxis": {
+      "axisLine": {
+        "show": true,
+        "lineStyle": {
+          "color": "#eeeeee"
+        }
+      },
+      "axisTick": {
+        "show": true,
+        "lineStyle": {
+          "color": "#eeeeee"
+        }
+      },
+      "axisLabel": {
+        "show": true,
+        "color": "#eeeeee"
+      },
+      "splitLine": {
+        "show": true,
+        "lineStyle": {
+          "color": [
+            "#aaaaaa"
+          ]
+        }
+      },
+      "splitArea": {
+        "show": false,
+        "areaStyle": {
+          "color": [
+            "#eeeeee"
+          ]
+        }
+      }
+    },
+    "toolbox": {
+      "iconStyle": {
+        "borderColor": "#999"
+      },
+      "emphasis": {
+        "iconStyle": {
+          "borderColor": "#666"
+        }
+      }
+    },
+    "legend": {
+      "textStyle": {
+        "color": "#eeeeee"
+      }
+    },
+    "tooltip": {
+      "axisPointer": {
+        "lineStyle": {
+          "color": "#eeeeee",
+          "width": "1"
         },
-        "visualMap": {
-            "color": [
-                "#bf444c",
-                "#d88273",
-                "#f6efa6"
-            ]
+        "crossStyle": {
+          "color": "#eeeeee",
+          "width": "1"
+        }
+      }
+    },
+    "timeline": {
+      "lineStyle": {
+        "color": "#eeeeee",
+        "width": 1
+      },
+      "itemStyle": {
+        "color": "#dd6b66",
+        "borderWidth": 1
+      },
+      "controlStyle": {
+        "color": "#eeeeee",
+        "borderColor": "#eeeeee",
+        "borderWidth": 0.5
+      },
+      "checkpointStyle": {
+        "color": "#e43c59",
+        "borderColor": "#c23531"
+      },
+      "label": {
+        "color": "#eeeeee"
+      },
+      "emphasis": {
+        "itemStyle": {
+          "color": "#a9334c"
         },
-        "dataZoom": {
-            "backgroundColor": "rgba(47,69,84,0)",
-            "dataBackgroundColor": "rgba(255,255,255,0.3)",
-            "fillerColor": "rgba(167,183,204,0.4)",
-            "handleColor": "#a7b7cc",
-            "handleSize": "100%",
-            "textStyle": {
-                "color": "#eeeeee"
-            }
+        "controlStyle": {
+          "color": "#eeeeee",
+          "borderColor": "#eeeeee",
+          "borderWidth": 0.5
         },
-        "markPoint": {
-            "label": {
-                "color": "#eee"
-            },
-            "emphasis": {
-                "label": {
-                    "color": "#eee"
-                }
-            }
+        "label": {
+          "color": "#eeeeee"
         }
-    });
+      }
+    },
+    "visualMap": {
+      "color": [
+        "#bf444c",
+        "#d88273",
+        "#f6efa6"
+      ]
+    },
+    "dataZoom": {
+      "backgroundColor": "rgba(47,69,84,0)",
+      "dataBackgroundColor": "rgba(255,255,255,0.3)",
+      "fillerColor": "rgba(167,183,204,0.4)",
+      "handleColor": "#a7b7cc",
+      "handleSize": "100%",
+      "textStyle": {
+        "color": "#eeeeee"
+      }
+    },
+    "markPoint": {
+      "label": {
+        "color": "#eee"
+      },
+      "emphasis": {
+        "label": {
+          "color": "#eee"
+        }
+      }
+    }
+  });
 }));

cpp-ui/src/assets/images/svg/remind.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1728695225002" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8907" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50"><path d="M660.48 872.448q6.144 0-3.584 15.36t-29.696 33.792-47.104 33.792-57.856 15.36q-27.648 0-53.248-15.36t-45.056-33.792-29.696-33.792-6.144-15.36l272.384 0zM914.432 785.408q7.168 9.216 6.656 17.92t-4.608 14.848-10.24 9.728-12.288 3.584l-747.52 0q-14.336 0-20.992-11.776t4.608-29.184q17.408-30.72 40.96-68.608t44.544-81.408 36.352-92.16 15.36-101.888q0-51.2 14.336-92.16t37.376-71.68 53.248-52.224 62.976-32.768q-16.384-26.624-16.384-55.296 0-41.984 28.672-70.656t70.656-28.672 70.656 28.672 28.672 70.656q0 14.336-4.096 28.16t-11.264 25.088q34.816 11.264 66.048 32.768t54.272 53.248 36.864 72.704 13.824 91.136q0 51.2 15.36 100.864t36.864 94.208 45.568 81.408 43.52 63.488zM478.208 142.336q0 16.384 11.264 28.16t27.648 11.776l2.048 0q16.384-1.024 27.648-12.288t11.264-27.648q0-17.408-11.264-28.672t-28.672-11.264-28.672 11.264-11.264 28.672z" fill="#ec4141" p-id="8908" data-spm-anchor-id="a313x.search_index.0.i4.53f83a81Js3eo9" class=""></path></svg>

cpp-ui/src/assets/images/svg/right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1728695206685" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6944" xmlns:xlink="http://www.w3.org/1999/xlink" width="50" height="50"><path d="M511.999994 0C229.205543 0 0.020822 229.226376 0.020822 512.020827c0 282.752797 229.184721 511.979173 511.979173 511.979173s511.979173-229.226376 511.979173-511.979173C1023.979167 229.226376 794.794446 0 511.999994 0zM815.371918 318.95082l-346.651263 461.201969c-10.830249 14.370907-27.32555 23.409999-45.27877 24.742952-1.582882 0.124964-3.12411 0.166619-4.665338 0.166619-16.328682 0-32.074198-6.373185-43.779197-17.911565l-192.903389-189.44604c-24.617988-24.20144-24.992881-63.731847-0.791441-88.349835 24.20144-24.659643 63.731847-24.951226 88.349835-0.833096l142.042875 139.501932 303.788472-404.2182c20.744091-27.575479 59.899605-33.115568 87.516739-12.413131C830.534266 252.219827 836.116009 291.375341 815.371918 318.95082z" fill="#1afa29" p-id="6945"></path></svg>

cpp-ui/src/assets/styles/dark.scss

@@ -230,7 +230,7 @@ $table-header-background-color: #284266;
     border-bottom: none;
     border-color: #1890ff;
     background-image: url('../images/topRightBtuBg.png');
-    background-size: cover;
+    background-size: 100% 100%;
     background-position: center;
     background-repeat: no-repeat;
     color: white;

cpp-ui/src/assets/styles/index.scss

@@ -180,3 +180,29 @@ aside {
     margin-bottom: 10px;
   }
 }
+
+.flex{
+  display: flex;
+}
+.flex-column{
+  display: flex;
+  flex-direction: column;
+}
+.justify-center{
+  justify-content: center;
+}
+.justify-between{
+  justify-content: space-between;
+}
+.justify-around{
+  justify-content: space-around;
+}
+.items-center{
+  align-items: center;
+}
+.position-r{
+  position: relative;
+}
+.position-a{
+  position: absolute;
+}

cpp-ui/src/main.js

@@ -92,7 +92,7 @@ DictData.install()
  */
 
 Vue.use(Element, {
-  size: Cookies.get('size') || 'medium' // set element-ui default size
+  size: Cookies.get('size') || 'small' // set element-ui default size
 })
 
 Vue.config.productionTip = false

cpp-ui/src/router/index.js

@@ -62,18 +62,24 @@ export const constantRoutes = [
     hidden: true
   },
   {
-    path: '',
-    component: Layout,
-    redirect: 'index',
-    children: [
-      {
-        path: 'index',
-        component: () => import('@/views/index'),
-        name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
-      }
-    ]
+    path: '/',
+    component: () => import('@/views/largeScreen/index'),
+    name: 'Index',
+    meta: { title: '首页', icon: 'dashboard', affix: true }
   },
+  // {
+  //   path: '',
+  //   component: Layout,
+  //   redirect: 'index',
+  //   children: [
+  //     {
+  //       path: 'index',
+  //       component: () => import('@/views/index'),
+  //       name: 'Index',
+  //       meta: { title: '首页', icon: 'dashboard', affix: true }
+  //     }
+  //   ]
+  // },
   {
     path: '/user',
     component: Layout,

cpp-ui/src/views/largeScreen/echarts-data.js

@@ -0,0 +1,209 @@
+export const gaugeOption = {
+  series: [
+    {
+      type: 'gauge',
+      center: ['50%', '75%'],
+      startAngle: 200,
+      endAngle: -20,
+      min: 0,
+      max: 60,
+      // splitNumber: 12,
+      itemStyle: {
+        color: '#FFAB91'
+      },
+      progress: {
+        show: true,
+        width: 20
+      },
+      pointer: {
+        show: false
+      },
+      axisLine: {
+        lineStyle: {
+          width: 20
+        }
+      },
+      axisTick: {
+        distance: -45,
+        // splitNumber: 5,
+        lineStyle: {
+          // width: 1,
+          color: '#999'
+        }
+      },
+      splitLine: {
+        distance: -52,
+        length: 14,
+        lineStyle: {
+          // width: 3,
+          color: '#999'
+        }
+      },
+      axisLabel: {
+        distance: -20,
+        color: '#999',
+        fontSize: 14
+      },
+      anchor: {
+        show: false
+      },
+      title: {
+        show: false
+      },
+      detail: {
+        valueAnimation: true,
+        width: '60%',
+        lineHeight: 40,
+        borderRadius: 8,
+        offsetCenter: [0, '-15%'],
+        fontSize: 20,
+        fontWeight: 'bolder',
+        formatter: '{value} 个',
+        color: 'inherit'
+      },
+      data: [
+        {
+          value: 20
+        }
+      ]
+    },
+    {
+      type: 'gauge',
+      center: ['50%', '75%'],
+      startAngle: 200,
+      endAngle: -20,
+      min: 0,
+      max: 60,
+      itemStyle: {
+        color: '#FD7347'
+      },
+      progress: {
+        show: true,
+        // width: 8
+      },
+      pointer: {
+        show: false
+      },
+      axisLine: {
+        show: false
+      },
+      axisTick: {
+        show: false
+      },
+      splitLine: {
+        show: false
+      },
+      axisLabel: {
+        show: false
+      },
+      detail: {
+        valueAnimation: true,
+        width: '60%',
+        lineHeight: 40,
+        borderRadius: 8,
+        offsetCenter: [0, '50%'],
+        fontSize: 20,
+        fontWeight: 'bolder',
+        formatter: '限电场站数',
+        color: 'inherit'
+      },
+      data: [
+        {
+          value: 20
+        }
+      ]
+    }
+  ]
+}
+export let lineOption = {
+  tooltip: {
+    trigger: 'axis',
+    axisPointer: {
+      type: 'cross',
+      animation: false,
+      label: {
+        backgroundColor: '#505765'
+      }
+    }
+  },grid: {
+    bottom: 30
+  },
+  legend: {
+    data: ['实时功率', '辐照度']
+  },
+  xAxis: [
+    {
+      type: 'category',
+      boundaryGap: false,
+      axisLine: { onZero: false },
+      // prettier-ignore
+      data: [
+        '00:15', '00:30', '00:45', '01:00',
+        '01:15', '01:30', '01:45', '02:00',
+        '02:15', '02:30', '02:45', '03:00',
+        '03:15', '03:30', '03:45', '04:00',
+        '04:15', '04:30', '04:45', '05:00',
+        '05:15', '05:30', '05:45', '06:00',
+        '06:15', '06:30', '06:45', '07:00',
+        '07:15', '07:30', '07:45', '08:00',
+        '08:15', '08:30', '08:45', '09:00',
+        '09:15', '09:30', '09:45', '10:00',
+        '10:15', '10:30', '10:45', '11:00',
+        '11:15', '11:30', '11:45', '12:00',
+        '12:15', '12:30', '12:45', '13:00',
+        '13:15', '13:30', '14:45', '14:00',
+        '14:15', '14:30', '14:45', '15:00',
+        '15:15', '15:30', '15:45', '16:00',
+        '16:15', '16:30', '16:45', '17:00',
+        '17:15', '17:30', '17:45', '18:00',
+        '18:15', '18:30', '18:45', '19:00',
+        '19:15', '19:30', '19:45', '20:00',
+        '20:15', '20:30', '20:45', '21:00',
+        '21:15', '21:30', '21:45', '22:00',
+        '22:15', '22:30', '22:45', '23:00',
+        '23:15', '23:30', '23:45', '24:00'
+      ]
+    }
+  ],
+  yAxis: [
+    {
+      name: '万KW',
+      type: 'value'
+    },
+    {
+      name: 'W/㎡',
+      alignTicks: true,
+      type: 'value',
+    }
+  ],
+  series: [
+    {
+      name: '实时功率',
+      type: 'line',
+      areaStyle: {},
+      lineStyle: {
+        width: 1
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      // prettier-ignore
+      data: [
+        0.12,1.31, 1.26, 1.21, 1.14, 1.06, 0.97, 0.89, 0.81, 0.74, 0.69, 0.65, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.63, 0.63, 0.62, 0.62, 0.61, 0.6, 0.59, 0.59, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.59, 0.61, 0.63, 0.65, 0.68, 0.71, 0.73, 0.75, 0.77, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.78, 0.77, 0.75, 0.73, 0.71, 0.68, 0.65, 0.63, 0.61, 0.59, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.58, 0.59, 0.59, 0.6, 0.61, 0.62, 0.62, 0.63, 0.63, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.64, 0.65, 0.66]
+    },
+    {
+      name: '辐照度',
+      type: 'line',
+      yAxisIndex: 1,
+      areaStyle: {},
+      lineStyle: {
+        width: 1
+      },
+      emphasis: {
+        focus: 'series'
+      },
+      data: [
+       0.005, 0.017, 0.017, 0.017, 0.017, 0.011, 0.021, 0.026, 0.03, 0.036, 0.036, 0.195, 0.221, 0.019, 0.013, 0.017, 0.03, 0.03, 0.03, 0.046, 0.045, 0.038, 0.084, 0.045, 0.045, 0.037, 0.034, 0.035, 0.036, 0.044, 0.052, 0.048, 0.109, 0.033, 0.029, 0.04, 0.042, 0.042, 0.042, 0.073, 0.076, 0.062, 0.066, 0.066, 0.075, 0.096, 0.128, 0.121, 0.128, 0.14, 0.226, 0.143, 0.097, 0.018, 0, 0, 0, 0, 0, 0.018, 0.047, 0.054, 0.054, 0.054, 0.036, 0.185, 0.009, 0.038, 0.061, 0.077, 0.091, 0.126, 0.69, 0.182, 0.349, 0.231, 0.146, 0.128, 0.167, 0.1, 0.075, 0.071, 0.071, 0.117, 0.01, 0.002, 0.002,  0.005, 0.026, 0.038, 0.038, 0.038, 0.076, 0.086, 0.109, 0.213, 0.276, 0.288, 0.297, 0.642, 1.799, 1.236, 2.138, 0.921, 0.497, 0.685, 0.828, 0.41, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.018, 0.024, 0.024, 0.024, 0.024, 0.006, 0.003, 0.046, 0.046, 0.046, 0.046, 0.043, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.204, 0.303, 1.028, 1.328, 1.524, 1.41, 1.362, 1.292, 1.191, 0.529, 0.501, 0.944, 1.81, 2.899, 0.859, 0.126, 0.087, 0.047, 0, 0, 0, 0, 0.011, 0.028, 0.028, 0.028, 0.028, 0.017, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0.099, 0.159, 0.297, 0.309, 0.309, 0.614, 0.818, 1.436, 1.195, 0.553, 0.542, 0.955, 0.898, 0.466, 0.386, 0.556, 0.388, 0.221, 0.192, 0.192, 0.187, 0.166, 0.18, 0.302, 0.158, 0.009, 0.009, 0.009, 0.009, 0.009, 0.007]
+    }
+  ]
+}

cpp-ui/src/views/largeScreen/echartsMap/index.vue

@@ -0,0 +1,314 @@
+<template>
+  <div>
+    <div ref="mapContainer" style="width: 80%;height: calc(100vh - 50px)"></div>
+  </div>
+</template>
+
+<script>
+import geoJson from '../../../assets/js/650000.json'
+import bg from '../../../assets/images/topRightBtuBg.png'
+
+export default {
+  name: 'echartsMap',
+  data() {
+    return {
+      myChart: null,
+      option: {},
+      mapCenter:[87.6, 43.8]
+    };
+  },
+  mounted() {
+    this.myChart = this.$echarts.init(this.$refs.mapContainer);
+    this.$echarts.registerMap('xinjiang', {geoJSON: geoJson});
+    this.init()
+
+
+  },
+  methods: {
+    init() {
+      let scatterData = [
+        {
+          value: [87.6, 43.8],
+          name: '新疆乌鲁木齐'
+        },
+        {
+          name: '阿勒泰',
+          value: [87.70, 47.81],
+        },
+        {
+          name: '卡拉玛依',
+          value: [84.88, 45.58],
+        },
+        {
+          name: '喀什',
+          value: [75.94, 39.45],
+        },
+        {
+          name: '哈密',
+          value: [93.52, 42.82],
+        },
+        {
+          name: '吐鲁番',
+          value: [89.26, 42.97],
+        }
+      ]
+      let lineData = this.filterLines(scatterData)
+      this.initOption(lineData, scatterData);
+
+    },
+    filterLines(currentData) {
+      let dataLines = []
+      currentData.forEach((v) => {
+        let lonLat = [v.value[0], v.value[1]]
+        dataLines.push({
+          coords: [lonLat, this.mapCenter], // 高版本的飞线数据组
+        })
+      })
+      return dataLines
+    },
+    initOption(lineData, scatterData) {
+      const _this = this
+      this.option = {
+        geo: [
+          {
+            map: 'xinjiang',
+            aspectScale: 1,
+            zoom: 0.9,
+            layoutCenter: ['50%', '50%'],
+            layoutSize: '100%',
+            show: true,
+            roam: false,
+            label: {
+              show: false, // 各个省市县的名字
+              color: '#fff',
+            },
+            itemStyle: {
+              // 每块的样式
+              areaColor: {
+                type: 'linear',
+                x: 1200,
+                y: 0,
+                x2: 0,
+                y2: 0,
+                colorStops: [
+                  {
+                    offset: 0,
+                    color: 'rgba(3,27,78,0.75)',
+                  },
+                  {
+                    offset: 1,
+                    color: 'rgba(58,149,253,0.75)',
+                  },
+                ],
+                global: true, // 缺省为 false
+              },
+              borderColor: '#c0f3fb',
+              borderWidth: 0.8,
+            },
+            emphasis: {
+              itemStyle: {
+                show: false,
+                color: '#fff',
+                areaColor: 'rgba(0,254,233,0.6)',
+              },
+              label: {
+                show: true,
+                color: '#fff',
+              },
+            },
+          },
+          // 重影
+          {
+            type: 'map',
+            map: 'xinjiang',
+            zlevel: -1,
+            aspectScale: 1,
+            zoom: 0.9,
+            layoutCenter: ['50%', '51%'],
+            layoutSize: '100%',
+            roam: false,
+            silent: true,
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: 'rgba(58,149,253,0.8)',
+              shadowColor: 'rgba(172, 122, 255,0.5)',
+              shadowOffsetY: 5,
+              shadowBlur: 15,
+              areaColor: 'rgba(5,21,35,0.1)',
+            },
+          },
+          {
+            type: 'map',
+            map: 'xinjiang',
+            zlevel: -2,
+            aspectScale: 1,
+            zoom: 0.9,
+            layoutCenter: ['50%', '52%'],
+            layoutSize: '100%',
+            roam: false,
+            silent: true,
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: 'rgba(58,149,253,0.6)',
+              shadowColor: 'rgba(65, 214, 255,0.6)',
+              shadowOffsetY: 5,
+              shadowBlur: 15,
+              areaColor: 'rgba(5,21,35,0.1)',
+            },
+          },
+          {
+            type: 'map',
+            map: 'xinjiang',
+            zlevel: -3,
+            aspectScale: 1,
+            zoom: 0.9,
+            layoutCenter: ['50%', '53%'],
+            layoutSize: '100%',
+            roam: false,
+            silent: true,
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: 'rgba(58,149,253,0.4)',
+              shadowColor: 'rgba(29, 111, 165,1)',
+              shadowOffsetY: 15,
+              shadowBlur: 10,
+              areaColor: 'rgba(5,21,35,0.1)',
+            },
+          },
+          {
+            type: 'map',
+            map: 'xinjiang',
+            zlevel: -4,
+            aspectScale: 1,
+            zoom: 0.9,
+            layoutCenter: ['50%', '54%'],
+            layoutSize: '100%',
+            roam: false,
+            silent: true,
+            itemStyle: {
+              borderWidth: 5,
+              borderColor: 'rgba(5,9,57,0.8)',
+              shadowColor: 'rgba(29, 111, 165,0.8)',
+              shadowOffsetY: 15,
+              shadowBlur: 10,
+              areaColor: 'rgba(5,21,35,0.1)',
+            },
+          },
+        ],
+        // 地图相关配置
+        series: [
+          {
+            type: 'lines',
+            coordinateSystem: 'geo',
+            effect: {
+              show: true,
+              period: 5, //箭头指向速度，值越小速度越快
+              trailLength: 0.01, //特效尾迹长度[0,1]值越大，尾迹越长重
+              symbol: 'arrow', //箭头图标
+              symbolSize: 6, //图标大小
+            },
+            lineStyle: {
+              color: '#52d7ee',
+              width: 1, //尾迹线条宽度
+              opacity: 1, //尾迹线条透明度
+              curveness: 0.3, //尾迹线条曲直度
+            },
+            symbol: ['none', 'circle'], //飞线起点终点点位样式
+            symbolSize: 10, // 飞线起点终点点位大小
+            data: lineData
+          },
+          {
+            type: 'scatter', // 散点图
+            coordinateSystem: 'geo', // 基于地理坐标系
+            data: scatterData,
+            label: {
+              // formatter: '{b}',
+              position: 'top',
+              show: true,
+              formatter: [
+                '{a|{b}}'
+              ].join('\n'),
+
+              rich: {
+                a: {
+                  align: 'center',
+                  color: 'white',
+                  backgroundColor: {
+                    image: bg,
+                  },
+                  // backgroundColor: '#01e9ff',
+                  borderRadius: 5 ,
+                  padding: [0, 5, 0, 5],
+                  height: 30
+                }
+              }
+            },
+            // 你可以自定义标点样式
+            symbol: 'pin',
+            symbolSize: 30,
+            zlevel: 4,
+            itemStyle: {
+              color: 'orange' // 标点颜色
+            },
+            emphasis: {
+              label: {
+                show: true
+              }
+            },
+            animation: false // 关闭动画
+          },
+          {
+            type: 'effectScatter',
+            zlevel: 1,
+            coordinateSystem: 'geo',
+            emphasis: {
+              label: {
+                show: true,
+                position: 'top',
+                color: '#fff',
+                formatter: '{b|{b}}',
+              },
+            },
+            data: scatterData.map(item=>item.value),
+            symbol: 'circle',
+            symbolSize: function (value){
+              // 中心点的标记大
+              if(JSON.stringify(value) === JSON.stringify(_this.mapCenter)){
+                return [20,10]
+              }
+              return [10, 5]
+            },
+            itemStyle: {
+              color: 'rgb(100,180,226)',
+              shadowBlur: 10,
+              shadowColor: 'rgba(66,148,219,0.83)',
+            },
+            effectType: 'ripple',
+            showEffectOn: 'render', //emphasis移入显示动画，render一开始显示动画
+            rippleEffect: {
+              scale: 5,
+              brushType: 'stroke',
+            },
+          }
+        ]
+      };
+      this.myChart.setOption(this.option);
+      this.myChart.on('click', function (params) {
+        // 控制台打印点击的数据
+        if(params.componentType === 'series' && params.componentSubType==='scatter'){
+          console.log(params.name)
+          // TODO 跳转页面
+          // _this.$router.push({path: "/configManager/electricField"})
+          localStorage.setItem('map-jump-staion',params.name)
+        }
+        // 你可以在这里添加你的逻辑代码
+      });
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

cpp-ui/src/views/largeScreen/index.vue

@@ -0,0 +1,426 @@
+<template>
+  <div class="largeScreen">
+    <div class="app-title-bg">
+      <span class="sys-time">{{ sysTime }}</span>
+      <div class="top-right-style flex items-center">
+        <div class="top-badge">
+          <el-badge :value="badgeValue.alarm">
+            <img src="../../assets/images/svg/remind.svg" width="30px" @click="openAlarm()"/>
+          </el-badge>
+        </div>
+
+        <div class="cpp-btu-background home-jump-btu">
+          <span @click="jumpRout">后台管理</span>
+        </div>
+      </div>
+
+      <div class="titleBg">
+        <span class="title-text">集 中 功 率 预 测</span>
+      </div>
+    </div>
+    <div class="home-main-container">
+      <echarts-map/>
+      <!-- 上     -->
+      <div class="float-container top-1 width-100 height-10r flex ">
+        <div v-for="item of digitalDisk" class="width-20 flex-column items-center">
+          <div>
+            <div class="text-bg text-style">{{ item.name }}</div>
+            <div class="flex items-center number-bg-style">
+              <div v-for="num of item.num" class="flex items-center justify-center num-style number-bg ">{{ num }}</div>
+              <span class="unit-style">MW</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!--  右    -->
+      <div class="float-container right-1 top-default flex-column right-container-style">
+        <div class="position-r border-style">
+          <div class="position-a width-100 top-2  flex justify-center">
+            <div class="right-top-style flex justify-between">
+              <span>总场站数:{{ totality.number }}</span>
+              <span>总容量:{{ totality.capacity }}MW</span>
+            </div>
+          </div>
+          <div class="barTitleBg right-title-style">限电情况</div>
+          <div id="gauge" class="chartStyle"/>
+        </div>
+        <div class="border-style" style="margin-top: 1%">
+          <div class="barTitleBg right-title-style">功率曲线</div>
+          <div id="line" class="chartStyle"/>
+        </div>
+      </div>
+      <!--     左 -->
+      <div class="float-container top-default flex-column justify-around left-container-style">
+        <div class="flex">
+          <img src="../../assets/images/dashboard/num3.png"/>
+          <div class="flex-column justify-center items-center">
+            <span>风速(m/s)</span>
+            <span>{{ envData.ws }}</span>
+          </div>
+        </div>
+        <div class="flex">
+          <img src="../../assets/images/dashboard/num4.png"/>
+          <div class="flex-column justify-center items-center">
+            <span>辐照度(W/㎡)</span>
+            <span>{{ envData.radiance }}</span>
+          </div>
+        </div>
+        <div class="flex">
+          <img src="../../assets/images/dashboard/num2.png"/>
+          <div class="flex-column justify-center items-center">
+            <span>限电比(%)</span>
+            <span>{{ envData.rate }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="dark-el-dialog">
+      <el-dialog width="50%" style="top:15%" :visible.sync="outerVisible">
+        <div slot="title" class="dialog-title flex justify-between">
+          <div>
+            <el-button>全部确认</el-button>
+            <el-button @click="filterInfo(null)">全部告警</el-button>
+            <el-button @click="filterInfo('tunnel')">通道告警</el-button>
+            <el-button @click="filterInfo('report')">上报告警</el-button>
+            <el-button @click="innerVisible = true">报警配置</el-button>
+          </div>
+          <div class="dialog-title-badge flex justify-between">
+            <el-badge :value="badgeValue.alarm">
+              <img src="../../assets/images/svg/remind.svg" width="20px"/>
+            </el-badge>
+            <el-badge :value="badgeValue.confirm">
+              <img src="../../assets/images/svg/right.svg" width="20px"/>
+            </el-badge>
+          </div>
+        </div>
+        <div>
+          <el-table
+            :data="tableData"
+            border max-height="300px"
+            style="width: 100%">
+            <el-table-column
+              prop="name" align="center"
+              label="场站名称"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="date" align="center"
+              label="报警时间" :formatter="formatDate"
+            >
+            </el-table-column>
+            <el-table-column
+              prop="describe" align="center"
+              label="报警描述">
+            </el-table-column>
+            <el-table-column
+              prop="operate" align="center"
+              label="操作">
+              <template slot-scope="scope">
+                <img src="../../assets/images/svg/remind.svg" width="20px" v-if="scope.row.operate === 1"/>
+                <img src="../../assets/images/svg/right.svg" width="20px" v-if="scope.row.operate === 0"/>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <el-dialog
+          width="30%" style="top:15%"
+          title="通道告警"
+          :visible.sync="innerVisible"
+          append-to-body>
+<!--  TODO 移植v3        -->
+
+        </el-dialog>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+<script>
+
+import {formatToDateTime} from "../../utils/dateUtil";
+import echartsMap from './echartsMap/index.vue'
+import {gaugeOption, lineOption} from "./echarts-data";
+
+export default {
+  name: 'largeScreen',
+  components: {echartsMap},
+  data() {
+    return {
+      sysTime: '',
+      sysInterval: null,
+      outerVisible: false,
+      innerVisible: false,
+      tableData:[],
+      tableDataBak:[],
+      digitalDisk: [{
+        name: '实际功率',
+        num: '13591'
+      }, {
+        name: '理论功率',
+        num: '13591'
+      }, {
+        name: '可用功率',
+        num: '13591'
+      }, {
+        name: '超短期预测功率',
+        num: '13591'
+      }, {
+        name: '短期预测功率',
+        num: '13591'
+      }],
+      totality: {
+        number: 39,
+        capacity: 200
+      },
+      envData: {
+        ws: 10,
+        radiance: 20,
+        rate: 999
+      },
+      // 告警统计值
+      badgeValue:{
+        alarm:0,
+        confirm:0
+      }
+    }
+  },
+  mounted() {
+    this.init()
+    const _this = this
+    this.sysInterval = setInterval(function () {
+      _this.sysTime = formatToDateTime(new Date())
+    }, 1000)
+  },
+  destroyed() {
+    clearInterval(this.sysInterval);
+  },
+  methods: {
+    jumpRout() {
+      this.$router.push({path: "/configManager/electricField"})
+    },
+    openAlarm() {
+      this.outerVisible = true
+    },
+    init() {
+     this.drawTable()
+      this.drawChart()
+    },
+    drawTable(){
+      let data = [
+        {name:'xxx',date:1728700191000,describe:'xxxx',operate:1,type:'report'},
+        {name:'xxx',date:1728613791000,describe:'xxxx',operate:1,type:'tunnel'},
+        {name:'xxx',date:1728440991000,describe:'xxxx',operate:1,type:'report'},
+        {name:'xxx',date:1728527391000,describe:'xxxx',operate:1,type:''},
+        {name:'xxx',date:1728354591000,describe:'xxxx',operate:0,type:''}
+      ]
+      this.tableDataBak = data
+      this.tableData = data
+      this.badgeValue.confirm = this.tableData.filter(w=>w.operate === 0).length
+      this.badgeValue.alarm = this.tableData.filter(w=>w.operate === 1).length
+    },
+    filterInfo(prop){
+      if(prop !== null){
+        this.tableData = this.tableDataBak.filter(w=>w.type === prop)
+      }else{
+        this.tableData = JSON.parse(JSON.stringify(this.tableDataBak))
+      }
+
+    },
+    drawChart(){
+      gaugeOption.series[0].data[0].value = 10
+      gaugeOption.series[1].data[0].value = 10
+      gaugeOption.series[0].max = 39
+      gaugeOption.series[1].max = 39
+      var myChart = this.$echarts.init(document.getElementById('gauge'));
+      myChart.setOption(gaugeOption, true)
+      var myChart1 = this.$echarts.init(document.getElementById('line'), 'dark');
+      myChart1.setOption(lineOption, true)
+      window.addEventListener("resize", function () {
+        myChart.zhChart.resize();
+        myChart1.zhChart.resize();
+      });
+    },
+    formatDate(row){
+      return formatToDateTime(new Date(row.date))
+    }
+  }
+
+}
+</script>
+
+<style scoped lang="scss">
+$top-container-height: 8rem;
+.largeScreen {
+  width: 100%;
+  height: calc(100vh);
+  color: white;
+  background-color: #101C38;
+  background-image: url('../../assets/images/pageBg.png');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.top-right-style {
+  width: 15%;
+  position: absolute !important;
+  right: 15px;
+  justify-content: end;
+}
+
+.top-badge {
+  cursor: pointer;
+  margin-right: 30px;
+  padding-top: 2%;
+
+  ::v-deep .el-badge__content.is-fixed {
+    top: 5px;
+    right: 5px;
+  }
+}
+
+.home-jump-btu {
+  width: 100px;
+  height: 30px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+}
+
+.chartStyle {
+  width: 100%;
+  height: calc(35vh);
+}
+
+.home-main-container {
+  position: relative;
+}
+
+.float-container {
+  position: absolute;
+}
+
+.right-container-style {
+  width: 30%;
+  height: calc(100% - 10rem);
+}
+
+.left-container-style {
+  width: 12%;
+  height: calc(50%);
+  left: 4rem;
+  font-size: large;
+}
+
+.border-style {
+  border-radius: 5px;
+  box-shadow: inset 0px 1px 8px 5px rgba(29, 128, 218, 0.63);
+}
+
+.right-top-style {
+  font-size: 20px;
+  width: 50%;
+}
+
+.top-1 {
+  top: 1rem;
+}
+
+.top-2 {
+  top: 3rem;
+}
+
+.top-default {
+  top: $top-container-height;
+}
+
+.right-1 {
+  right: 1rem;
+}
+
+.width-100 {
+  width: 100%;
+}
+
+.height-10r {
+  height: $top-container-height;
+}
+
+.width-20 {
+  width: 20%;
+}
+
+.text-style {
+  width: 70%;
+  height: 30px;
+  padding: 1% 0 0 15%;
+}
+
+.unit-style {
+  margin-left: 10px;
+  font-size: 20px;
+}
+
+.num-style {
+  width: 30px;
+  height: 50px;
+  font-size: 30px;
+  margin-left: 10px;
+}
+
+.number-bg-style {
+  margin-top: 10px;
+}
+
+.right-title-style {
+  width: 90%;
+  padding: 1% 0 0 10%;
+  font-size: 18px;
+  height: 35px;
+}
+
+.barTitleBg {
+  background-image: url('../../assets/images/dashboard/barTitleBg.png');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.right-bg {
+  background-image: url('../../assets/images/dashboard/right-bg.png');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.text-bg {
+  background-image: url('../../assets/images/dashboard/numTitle.png');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.number-bg {
+  background-image: url('../../assets/images/dashboard/numBg.png');
+  background-size: 100% 100%;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+.dialog-title{
+  width: 90%;
+}
+.dialog-title-badge{
+  width: 10%;
+  ::v-deep .el-badge__content.is-fixed {
+    top: 10px;
+    right: 5px;
+  }
+  ::v-deep .el-badge__content {
+    background-color: transparent;
+    font-size: 14px;
+    border: none;
+  }
+}
+</style>