首页右侧功能样式调整，弹窗功能及穿透返回完成

src/App.vue

@@ -275,6 +275,7 @@ export default {
 .daping-app {
   width: 100vw;
   height: 100vh;
+  overflow: hidden;
   .daping-login {
     width: 100%;
     height: 100%;

src/views/Home/components/home/dash-pie-chart.vue

@@ -67,23 +67,35 @@ export default {
     resize() {},
     initChart() {
       let chart = echarts.init(this.$el);
+      let title = this.title;
+      let unit = this.unit;
       let option = {
-        title: {
-          show: true,
-          text: this.unit,
-          subtext: this.title,
-          subtextStyle: {
-            fontSize: 12,
-            color: "#fff",
-          },
-          x: "45%",
-          y: "56%",
-          z: 8,
-          textAlign: "center",
-          textStyle: {
-            color: "#999",
-            fontSize: 12,
-            fontWeight: "normal",
+        // title: {
+        //   show: true,
+        //   text: this.unit,
+        //   subtext: this.title,
+        //   subtextStyle: {
+        //     fontSize: 14,
+        //     color: "#fff",
+        //   },
+        //   x: "45%",
+        //   y: "56%",
+        //   z: 8,
+        //   textAlign: "center",
+        //   textStyle: {
+        //     color: "#999",
+        //     fontSize: 12,
+        //     fontWeight: "normal",
+        //   },
+        // },
+        tooltip: {
+          show: false,
+          backgroundColor: "rgba(5, 187, 76,0.35)",
+          borderColor: "#05bb4c",
+          formatter: function (params) {
+            var htmlStr = `<div style='font-size:0.486vw;color:#fff;'>${title}： ${params.value} ${unit} </div>`;
+
+            return htmlStr;
           },
         },
         series: [
@@ -92,7 +104,8 @@ export default {
             z: 1,
             name: "内部（环形）进度条",
             type: "gauge",
-            radius: "85%",
+            radius: "100%",
+            center: ["50%", "60%"],
             splitNumber: 5,
             axisLine: {
               lineStyle: {
@@ -116,7 +129,7 @@ export default {
                   ],
                   [1, "transparent"],
                 ],
-                width: 12,
+                width: 6,
               },
             },
             axisLabel: {
@@ -137,9 +150,10 @@ export default {
             name: "指针",
             type: "gauge",
             z: 2,
+            center: ["50%", "60%"],
             min: this.min,
             max: this.max,
-            radius: "90%",
+            radius: "100%",
             axisLine: {
               show: false,
             },
@@ -174,8 +188,8 @@ export default {
             },
             pointer: {
               show: true,
-              length: "30%",
-              radius: "20%",
+              length: "35%",
+              radius: "100%",
               width: 1, //指针粗细
               offsetCenter: ["0%", "-40%"],
             },
@@ -183,10 +197,11 @@ export default {
           },
           // 刻度
           {
+            z: 1,
             name: "外部刻度",
             type: "gauge",
-            center: ["50%", "50%"],
-            radius: "85%",
+            center: ["50%", "60%"],
+            radius: "100%",
             min: this.min, //最小刻度
             max: this.max, //最大刻度
             splitNumber: 10, //刻度数量
@@ -200,6 +215,7 @@ export default {
                 color: [
                   [
                     1,
+
                     $("#appBody").is(".dark")
                       ? partten.getColor(this.color)
                       : "rgb(57, 54, 143)",
@@ -214,12 +230,10 @@ export default {
             //刻度标签。
             axisTick: {
               show: true,
-              distance: 6,
-              splitNumber: 2,
+              distance:2,
+              splitNumber:3,
               lineStyle: {
-                color: $("#appBody").is(".dark")
-                  ? partten.getColor(this.color)
-                  : "rgb(57, 54, 143)", //用颜色渐变函数不起作用
+                color: partten.getColor(this.color),
                 width: 1,
               },
               length: 4,
@@ -237,8 +251,8 @@ export default {
           // 显示数字
           {
             type: "pie",
-            radius: ["0", "65%"],
-            center: ["50%", "50%"],
+            // radius: ["0", "80%"],
+            center: ["50%", "60%"],
             z: 8,
             animation: false,
             hoverAnimation: false,
@@ -248,7 +262,6 @@ export default {
                 itemStyle: {
                   normal: {
                     color: "transition",
-                    fontSize: 12,
                   },
                 },
                 label: {
@@ -274,8 +287,9 @@ export default {
           {
             name: "内部阴影",
             type: "gauge",
-            radius: "50%",
-            splitNumber: 10,
+            radius: "95%",
+            center: ["50%", "60%"],
+            splitNumber: 5,
             axisLine: {
               lineStyle: {
                 color: [
@@ -323,8 +337,8 @@ export default {
           // 光环
           {
             type: "pie",
-            radius: "45%",
-            center: ["50%", "50%"],
+            radius: "55%",
+            center: ["50%", "60%"],
             animationType: "scale",
             animation: false,
             label: {
@@ -338,7 +352,7 @@ export default {
             },
             data: [
               {
-                value: 1,
+                value: this.value,
                 itemStyle: {
                   color: "transparent",
                   borderColor: $("#appBody").is(".dark")

src/views/Home/components/home/gjzb-pie-chart.vue

@@ -16,6 +16,7 @@
       :color="type == 0 || type == -1 ? 'green' : 'orange'"
       @click="openDialog(item.dialogTitle, item.unit)"
     />
+    <div class="title"></div>
   </div>
 </template>
 

src/views/Home/components/home/list-bar-chart2-home.vue

@@ -0,0 +1,336 @@
+<template>
+  <div>
+    <div
+      class="chart"
+      v-for="index of list.length"
+      :key="index"
+      :id="id + index"
+    ></div>
+  </div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "percent-pie",
+  componentName: "percent-pie",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "18.519vh",
+    },
+    //  传入数据
+    list: {
+      type: Array,
+      default: () => [],
+    },
+    total: {
+      type: Number,
+      default: 150,
+    },
+    colors: {
+      type: Array,
+      default: () => ["green", "purple"],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+      firstAnimation: true,
+    };
+  },
+
+  computed: {
+    datas() {
+      return this.list.map((t) => {
+        return t.value;
+      });
+    },
+  },
+  methods: {
+    resize() {},
+    initChart(value, index) {
+      var currColor = this.colors[value.color ? value.color % 2 : index % 2];
+      var $dom = document.getElementById(this.id + (index + 1));
+      $dom.style.width = this.width;
+      $dom.style.height = `calc(${this.height})`;
+      let chart = echarts.init($dom);
+      let option = {
+        xAxis: {
+          max: value.total||100,
+          splitLine: {
+            show: false,
+          },
+          axisLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: false,
+          },
+          axisTick: {
+            show: false,
+          },
+        },
+        grid: {
+          left: 2,
+          top: 0, // 设置条形图的边s距
+          right: 0,
+          bottom: 0,
+          containLabel: true,
+        },
+        yAxis: [
+          {
+            type: "category",
+            inverse: true,
+            data: [value],
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          // 内
+          {
+            type: "bar",
+            barWidth: 3,
+            animation: this.firstAnimation,
+            // legendHoverLink: false,
+            // silent: true,
+            itemStyle: {
+              normal: {
+                color: function (params) {
+                  return {
+                    type: "linear",
+                    x: 100,
+                    y: 10,
+                    x2: 1,
+                    y2: 0,
+                    colorStops: [
+                      {
+                        offset: 0,
+                        color: partten.getColor(currColor), // 0% 处的颜色
+                      },
+                      {
+                        offset: 1,
+                        color: partten.getColor(currColor), // 100% 处的颜色
+                      },
+                    ],
+                  };
+                },
+                shadowBlur: 10,
+                shadowColor: "rgba(255, 255, 255, 0.30)",
+              },
+            },
+            label: {
+              show: true,
+              position: [0, -10],
+              formatter: function (param) {
+                return param.data.value;
+              },
+              textStyle: {
+                color: partten.getColor(currColor),
+                // this.$store.state.themeName === "dark" ? "#ffffff" : "#000",
+                fontSize: 10,
+              },
+            },
+            data: [value],
+            z: 1,
+            animationEasing: "elasticOut",
+          },
+          // 三角
+          {
+            type: "pictorialBar",
+            symbolPosition: "end",
+            animation: this.firstAnimation,
+            data: [value.value],
+            symbol: "triangle",
+            symbolOffset: [0, -4],
+            symbolSize: [2, 2],
+            symbolRotate: 180,
+            itemStyle: {
+              normal: {
+                borderWidth: 0,
+                color: function (params) {
+                  return partten.getColor(currColor);
+                },
+                // shadowBlur: 2,
+                // shadowColor: "rgba(255, 255, 255, 0.80)",
+              },
+            },
+          },
+          // 分隔
+          {
+            type: "pictorialBar",
+            itemStyle: {
+              normal: {
+                color:
+                  this.$store.state.themeName === "dark" ? "#20314f" : "#000",
+              },
+            },
+            animation: this.firstAnimation,
+            symbolRepeat: "fixed",
+            symbolMargin: 4,
+            symbol: "rect",
+            symbolClip: true,
+            symbolSize: [1, 4],
+            symbolPosition: "start",
+            symbolOffset: [4, -1],
+            symbolBoundingData: value.total||100,
+            symbolRotate: -15,
+            data: [value],
+            z: 2,
+            animationEasing: "elasticOut",
+          },
+          // 外边框
+          {
+            type: "pictorialBar",
+            animation: this.firstAnimation,
+            symbol: "rect",
+            symbolBoundingData: value.total,
+            itemStyle: {
+              normal: {
+                color: "none",
+              },
+            },
+            label: {
+              normal: {
+                formatter: (params) => {
+                  return "{gm|}{f|  " + params.data + "}";
+                },
+                rich: {
+                  f: {
+                    color:
+                      this.$store.state.themeName === "dark" ? "#fff" : "#000",
+                    fontSize: 14,
+                    lineHeight: 20,
+                    fontFamily: "Bicubik",
+                  },
+                  gm: {
+                    backgroundColor: partten.getColor(currColor),
+                    width: 4,
+                    height: 4,
+                    lineHeight: 20,
+                    verticalAlign: "middle",
+                    borderRadius: [50, 50, 50, 50],
+                  },
+                },
+                position: "right",
+                distance: 8, // 向右偏移位置
+                show: true,
+              },
+            },
+            // data: [+value.total],
+          },
+          // 外框
+          {
+            type: "bar",
+            animation: this.firstAnimation,
+            name: "外框",
+            barGap: "-120%", // 设置外框粗细
+            data: [
+              {
+                value: value.total||100,
+                itemStyle: {
+                  normal: {
+                    color: "transparent",
+                    borderColor: partten.getColor(currColor), // [, "#333"],
+                    borderWidth: 1, // 边框宽度
+                    // barBorderRadius: 0, //圆角半径
+                    opacity: 0.5,
+                    label: {
+                      // 标签显示位置
+                      show: false,
+                      position: "top", // insideTop 或者横向的 insideLeft
+                    },
+                  },
+                },
+              },
+            ],
+            barWidth: 4,
+          },
+        ],
+      };
+
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function () {
+        chart.resize();
+      };
+
+      window.removeEventListener("resize", this.resize);
+      window.addEventListener("resize", this.resize);
+    },
+    handleElectricDetail() {},
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    // this.$nextTick(() => {
+    //   this.$el.style.width = this.width;
+    //   this.$el.style.height = this.height;
+    //   this.list.forEach((value, index) => {
+    //     this.initChart(value, index);
+    //   });
+    //   this.firstAnimation = false;
+    // });
+  },
+  //   updated() {
+  //     this.$nextTick(() => {
+  //       this.list.forEach((value, index) => {
+  //         this.initChart(value, index);
+  //       });
+  //     });
+  //   },
+  watch: {
+    list: {
+      handler(val) {
+        if (val && val.length) {
+          this.$nextTick(() => {
+            this.$el.style.width = this.width;
+            this.$el.style.height = this.height;
+            this.list.forEach((value, index) => {
+              this.initChart(value, index);
+            });
+            this.firstAnimation = false;
+          });
+        }
+      },
+      deep: true,
+      immediate: true,
+    },
+    "$store.state.themeName"() {
+      this.list.forEach((value, index) => {
+        this.initChart(value, index);
+      });
+    },
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  cursor: default;
+}
+</style>

src/views/Home/components/home/powerEcharts.vue

@@ -0,0 +1,344 @@
+<template>
+  <!--    72小时功率曲线-->
+  <div
+    class="powerTitle"
+    :style="{ 'margin-bottom': orient ? '10px' : '' }"
+    v-if="showTitle"
+  >
+    24小时功率曲线
+  </div>
+  <div :id="'main' + id" :style="{ width: width, height: height }"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import dayjs from "dayjs";
+export default {
+  name: "powerEcharts",
+  props: {
+    id: {
+      type: String,
+      default: "",
+    },
+    showTitle: {
+      type: Boolean,
+      default: true,
+    },
+    predictFlag: {
+      type: Boolean,
+      default: false,
+    },
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "100%",
+    },
+    CurveValues: {
+      type: Array,
+      required: true,
+    },
+    // 单位
+    unit: {
+      type: String,
+      default: "",
+    },
+    //倍率
+    ratio: {
+      type: Number,
+      default: 1,
+    },
+    orient: String,
+  },
+
+  data() {
+    return {
+      emptyData: [],
+      current: 0,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.getChart();
+      window.addEventListener("resize", this.resize);
+    });
+  },
+  methods: {
+    resize() {
+      var chartDom = document.getElementById(`main${this.id}`);
+      var myChart = echarts.init(chartDom); // 绘制图表
+      myChart.resize();
+    },
+    getChart() {
+      var chartDom = document.getElementById(`main${this.id}`);
+      var myChart = echarts.init(chartDom); // 绘制图表
+      var options = {
+        title: {},
+        axisLine: {
+          lineStyle: {
+            color: "#272729", //x轴的颜色
+            width: 2, //轴线的宽度
+          },
+        },
+        tooltip: {
+          // formatter: '{a} <br/>{b} : {c}',
+          trigger: "axis",
+          backgroundColor: "rgba(5, 187, 76,0.35)",
+          borderColor: "#05bb4c",
+          formatter: function (params) {
+            var htmlStr = `<div style='font-size:0.486vw;color:#fff;'>${params[0].axisValue}</div>`;
+            for (var i = 0; i < params.length; i++) {
+              htmlStr += `<div style='font-size:0.486vw;color:#fff;'>`;
+              var param = params[i];
+              var seriesName = param.seriesName; //图例名称
+              var value = param.value; //y轴值
+              var data = param.data; //单位判断code
+              var mark = `<span style="display:inline-block;margin-right:0.122vw;border-radius:50%;width:0.304vw;height:0.304vw;background-color:${param.color};"></span>`; //点
+              var unit = `<span style='font-size:0.425vw'>`;
+
+              htmlStr += mark; //一个点
+              htmlStr += `${seriesName} : ${
+                value != null ? value + unit + " MW</span>" : "--"
+              }`; //圆点后面显示的文本
+              htmlStr += "</div>";
+            }
+            return htmlStr;
+          },
+        },
+        legend: {
+          top: this.orient ? "0" : "6%",
+          right: this.orient ? "16%" : "2%",
+          textStyle: {
+            fontSize: 8,
+            color: "#A4A4A5",
+          },
+          orient: this.orient ? this.orient : "vertical",
+          icon: "roundRect",
+          itemWidth: 5,
+          itemHeight: 5,
+          itemGap: 7,
+        },
+        xAxis: {
+          boundaryGap: false, //x轴从0开始
+          axisLabel: {
+            textStyle: {
+              color: "#606769",
+              fontSize: 9,
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#606769", //x轴的颜色
+              width: 1, //轴线的宽度
+            },
+          },
+          axisTick: {
+            alignWithLabel: true,
+          },
+          splitLine: { show: false },
+          data: this.getTimeStanp,
+        },
+        yAxis: {
+          type: "value",
+          name: this.unit,
+          nameTextStyle: {
+            color: "#828484",
+            fontSize: 9,
+            align: "right",
+          },
+          splitNumber: 3,
+          splitLine: {
+            show: false,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#606769",
+              fontSize: 9,
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#606769", // y轴的颜色
+              width: 0.5, //y轴线的宽度
+            },
+          },
+        },
+        grid: [
+          {
+            left: 5,
+            right: 5,
+            top: 12,
+            bottom: 5,
+            containLabel: true,
+          },
+        ],
+        series: this.series,
+      };
+      myChart.setOption(options);
+    },
+    //处理数据
+    getData(datas) {
+      let data = [];
+      //查询的测点没有数据情况
+      if (datas && datas.length > 0) {
+        datas.forEach((item) => {
+          let result;
+          if (item.value) {
+            result = {
+              dateTime: item.dateTime,
+              value: item.value,
+            };
+          } else {
+            result = item;
+          }
+          data.push(result);
+        });
+        return data;
+      } else {
+        return this.emptyData;
+      }
+    },
+  },
+  computed: {
+    getTimeStanp() {
+      // 当日0点时间
+      var timeStamp = [];
+      let stamp = new Date(new Date().setHours(0, 0, 0, 0)).getTime();
+      if (this.predictFlag) {
+        for (let i = 0; i < 48; i++) {
+          timeStamp.push(dayjs(stamp).format("HH:mm"));
+          this.emptyData.push("0");
+          stamp = parseInt(stamp) + 30 * 60 * 1000;
+        }
+        timeStamp.push("24:00");
+      } else {
+        for (let i = 0; i < 24; i++) {
+          timeStamp.push(dayjs(stamp).format("HH:mm"));
+          this.emptyData.push("0");
+          stamp = parseInt(stamp) + 60 * 60 * 1000;
+        }
+      }
+
+      this.emptyData.push("0");
+      return timeStamp;
+    },
+    series() {
+      let series = [
+        {
+          name: "预测功率",
+          type: "line",
+          smooth: true,
+          symbol: "none",
+          lineStyle: {
+            width: 1,
+          },
+          color: "#C530C8",
+          data: this.getData(this.CurveValues[0]?.value),
+        },
+        {
+          name: "理论功率",
+          type: "line",
+          smooth: true,
+          symbol: "none",
+          lineStyle: {
+            width: 1,
+          },
+          color: "#FF8700FF",
+          data: this.getData(this.CurveValues[1]?.value),
+        },
+        {
+          name: "实际功率",
+          type: "line",
+          smooth: true,
+          symbol: "none",
+          lineStyle: {
+            width: 1,
+          },
+          color: "#1C99FFFF",
+          textStyle: {
+            color: "red",
+          },
+          data: this.getData(this.CurveValues[2]?.value),
+        },
+      ];
+      return series;
+    },
+  },
+  watch: {
+    "$store.state.isFixed"() {
+      this.$nextTick(() => {
+        this.resize();
+      });
+    },
+    CurveValues: {
+      handler() {
+        this.$nextTick(() => {
+          this.getChart();
+          window.addEventListener("resize", this.resize);
+        });
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.powerTitle {
+  font-size: 16px;
+  font-family: "思源黑体";
+  font-weight: 400;
+  color: #ffffff;
+  padding-top: 16px;
+  padding-left: 27px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  .tabs {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-right: 25px;
+    margin-top: -10px;
+  }
+  .left {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 70px;
+    height: 25px;
+    background: rgba(67, 81, 107, 0.6);
+    border: 1px solid #3b4c6c;
+    border-radius: 13px 0px 0px 13px;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #b3b3b3;
+    &.active {
+      background: rgba(0, 70, 199, 0.5);
+      color: #ffffff;
+    }
+  }
+  .right {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 70px;
+    height: 25px;
+    background: rgba(67, 81, 107, 0.6);
+    border: 1px solid #3b4c6c;
+    border-radius: 0px 13px 13px 0px;
+    font-size: 14px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #b3b3b3;
+    &.active {
+      background: rgba(0, 70, 199, 0.5);
+      color: #ffffff;
+    }
+  }
+}
+</style>

src/views/Home/components/home/svg-map-nx.vue

@@ -188,7 +188,7 @@
           :style="`overflow: visible; transform: translate(${offsetX}px, ${offsetY}px) matrix(1, 0, 0, 1, -70, 50.6679)`"
           width="150"
           id="map-main"
-          x="535"
+          x="610"
           y="275"
           xlink:href="@/assets/mapz/nh.png"
         />
@@ -6660,9 +6660,9 @@ export default {
       svgWidth: "100%",
       svgHeight: "100%",
       offsetX: -10, // 地图与图钉与特效水平方向偏移，负数向左，正数向右。
-      offsetY: -15, // 垂直方向偏移，负数向上，正数向下。
-      scaleX: 0.85, // 地图所有元素水平缩放级别，0.5 为 0.5 倍大小，1 为原始大小，2 为 2 倍大小。
-      scaleY: 1,  // 垂直缩放级别
+      offsetY: 10, // 垂直方向偏移，负数向上，正数向下。
+      scaleX: 0.7, // 地图所有元素水平缩放级别，0.5 为 0.5 倍大小，1 为原始大小，2 为 2 倍大小。
+      scaleY: 1.3,  // 垂直缩放级别
     };
   },
   // 函数

src/views/Home/components/home/windChartCom.vue

@@ -0,0 +1,236 @@
+<template>
+  <div :id="chartId" :style="{ width: width, height: height }"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+import dayjs from "dayjs";
+import { h } from "vue";
+export default {
+  name: "windChartCom",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "70vh",
+    },
+    CurveTitle: {
+      type: String,
+      required: true,
+    },
+    chartShow: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+    windCurveValues: {
+      type: Array,
+      required: true,
+    },
+    chartId: {
+      type: String,
+      required: true,
+    },
+    ratio: {
+      type: Number,
+      default: 1,
+    },
+    unit: {
+      type: String,
+      default: "",
+    },
+  },
+  async created() {},
+  mounted() {
+    this.$nextTick(() => {
+      this.getChart();
+    });
+  },
+  data() {
+    return {
+      emptyData: [],
+    };
+  },
+  methods: {
+    getChart() {
+      var chartDom = document.getElementById(this.chartId);
+      var myChart = echarts.init(chartDom); // 绘制图表
+      var units = this.unit;
+      var options = {
+        tooltip: {
+          trigger: "axis",
+
+          textStyle: {
+            fontSize: 16,
+            fontFamily: "楷体",
+            color: "white", //设置文字颜色
+            fontWeight: "400",
+          },
+          backgroundColor: "rgba(5, 187, 76,0.35)",
+          borderColor: "#05bb4c",
+          formatter: function (params) {
+            var htmlStr = `<div style='margin-bottom:5px'>${params[0].axisValue}</div>`;
+            for (var i = 0; i < params.length; i++) {
+              htmlStr += `<div style='margin-bottom:2px'>`;
+              var param = params[i];
+              var seriesName = param.seriesName; //图例名称
+              var value = param.value; //y轴值
+              var data = param.data; //单位判断code
+              var mark = param.marker; //点
+              var unit = `<span style='font-size:14px'>`;
+
+              htmlStr += mark; //一个点
+              htmlStr += `${seriesName} : ${
+                value[1] != null ? value[1] + unit + ` ${units}</span>` : "--"
+              }`; //圆点后面显示的文本
+              htmlStr += "</div>";
+            }
+
+            return htmlStr;
+          },
+        },
+        legend: {
+          top: "0",
+          right: "2%",
+          textStyle: {
+            fontSize: "12",
+            color: "#A4A4A5",
+          },
+          orient: "vertical",
+          icon: "roundRect",
+          itemWidth: 5,
+          itemHeight: 5,
+          itemGap: 7,
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: false,
+          axisTick: {
+            alignWithLabel: true,
+          },
+          axisLabel: {
+            show: true,
+            textStyle: {
+              color: "#606769",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#606769", //x轴的颜色
+              width: 1, //轴线的宽度
+            },
+          },
+          //   splitLine: { show: false },
+          //   data: this.windCurveValues.map((item) => item.dateTime),
+        },
+        yAxis: {
+          name: this.unit,
+          nameTextStyle: {
+            fontSize: 16,
+            align: "right",
+          },
+
+          type: "value",
+          splitNumber: this.unit == "%" ? 2 : 3,
+          max: this.unit == "%" ? "100" : null,
+          splitLine: {
+            show: false,
+            textStyle: {
+              color: "#606769",
+            },
+          },
+          axisLine: {
+            lineStyle: {
+              color: "#606769", // y轴的颜色
+              width: 1, //y轴线的宽度
+            },
+          },
+        },
+        grid: [
+          {
+            left: 10,
+            right: 10,
+            top: 30,
+            bottom: 10,
+            containLabel: true,
+          },
+        ],
+        series: [
+          {
+            name: this.CurveTitle,
+            type: "line",
+            smooth: true,
+            symbol: "none",
+            areaStyle: {
+              opacity: 0.7,
+              color: new echarts.graphic.LinearGradient(2, 2, 0, 2, [
+                {
+                  offset: 0,
+                  color: "rgba(53, 150, 235, 1)",
+                },
+                {
+                  offset: 1,
+                  color: "rgba(18, 32, 50, 0.2)",
+                },
+              ]),
+            },
+            lineStyle: {
+              width: 1,
+            },
+            color: "#3596EB",
+            data: this.windCurveValues.map((item) => {
+              return [item.dateTime, item.value];
+            }),
+          },
+        ],
+      };
+      myChart.setOption(options);
+    },
+    //处理数据
+    getData(datas) {
+      let data = [];
+      //查询的测点没有数据情况
+      if (datas && datas.length > 0) {
+        datas.forEach((item) => {
+          let result;
+          if (item.value) {
+            result = (Number(item.value) / this.ratio).toFixed(2);
+          } else {
+            result = item.value;
+          }
+          data.push(result);
+        });
+        return data;
+      } else {
+        return this.emptyData;
+      }
+    },
+  },
+  computed: {
+    getTimeStanp() {
+      // 当日0点时间
+      var timeStamp = [];
+      let stamp = new Date(new Date().setHours(0, 0, 0, 0)).getTime();
+      for (let i = 0; i < 96; i++) {
+        timeStamp.push(dayjs(stamp).format("HH:mm"));
+        this.emptyData.push("0");
+        stamp = parseInt(stamp) + 15 * 60 * 1000;
+      }
+      timeStamp.push("24:00");
+      return timeStamp;
+    },
+  },
+  watch: {
+    windCurveValues: {
+      handler() {
+        this.getChart();
+      },
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

src/views/layout/HeaderD.vue

@@ -274,6 +274,8 @@ export default {
   align-items: center;
   border-bottom: 0.09vh solid #142b29;
   justify-content: space-between;
+  position: relative;
+  z-index: 6;
   .home-title {
     width: 30%;
     display: flex;

src/views/layout/login-page.vue

@@ -199,10 +199,15 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.svg-icon svg,.el-icon svg {
+  width: 0.638vw; //21
+  height: 1.944vh; //21
+}
+
 .login-panel {
   position: absolute;
-  width: 470px;
-  height: 636px;
+  width: 14.281vw; //470px
+  height: 58.889vh; //636px
   background: rgba(0, 0, 0, 0.4);
   right: 10%;
   top: 50%;
@@ -210,34 +215,34 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding-top: 90px;
+  padding-top: 8.333vh; //90px
 }
 .login-title {
   display: flex;
   align-items: center;
   flex-direction: column;
-  font-size: 30px;
-  margin-bottom: 40px;
+  font-size: 0.912vw; //30px
+  margin-bottom: 3.704vh; //40px
   p {
     display: flex;
     align-items: center;
     .login-img {
-      width: 56px;
-      height: 56px;
-      margin-right: 5px;
+      width: 1.702vw; //56px
+      height: 5.185vh; //56px
+      margin-right: 0.152vw; //5px
     }
   }
 }
 .login-btn ::v-deep {
   background: url("~@/assets/imgs/login-btn.png") no-repeat;
   background-size: cover;
-  width: 385px;
-  height: 56px;
-  border-radius: 5px;
+  width: 11.699vw; //385px
+  height: 5.185vh; //56px
+  border-radius: 0.152vw; //5px
   border-width: 0;
   color: #fff;
-  font-size: 16px;
-  margin-top: 66px;
+  font-size: 0.486vw; //16px
+  margin-top: 6.111vh; //66px
   cursor: pointer;
   &:hover,
   &:focus {
@@ -249,20 +254,20 @@ export default {
 
 .login-form ::v-deep {
   .el-form-item {
-    width: 383px;
-    margin-bottom: 22px;
+    width: 11.638vw; //383px
+    margin-bottom: 2.037vh; //22px
     .el-form-item__content {
       .el-input {
         .el-input__inner {
-          height: 50px;
-          line-height: 50px;
+          height: 4.63vh; //50px
+          line-height: 4.63vh; //50px
           font-family: Microsoft YaHei;
           font-weight: 400;
           color: #fff;
           background: #1b1a1f;
           border-width: 0;
-          font-size: 16px;
-          padding-left: 35px;
+          font-size: 0.486vw; //16
+          padding-left: 1.064vw; //35
         }
         .el-input__prefix {
           top: 50%;
@@ -276,7 +281,7 @@ export default {
 /**改变input里的字体颜色*/
 /deep/ input::-webkit-input-placeholder {
   color: #777777;
-  font-size: 16px;
+  font-size: 0.486vw; //16
 }
 ::v-deep .el-input__inner:-webkit-autofill {
   transition: background-color 50000s ease-in-out 0s;
@@ -285,16 +290,16 @@ export default {
 }
 ::v-deep.hintText {
   display: flex;
-  width: 383px;
-  padding-top: 5px;
-  padding-left: 18px;
+  width: 11.638vw; //383
+  padding-top: 0.463vh; //5
+  padding-left: 0.547vw; //18
   .el-checkbox {
     .el-checkbox__inner {
       background: #fff;
       border-color: #fff;
     }
     .el-checkbox__label {
-      font-size: 14px;
+      font-size: 0.425vw; //14
       color: #777;
     }
   }