Merge branch 'yx' of http://61.161.152.110:10101/r/electronic-map into yx

package.json

@@ -9,6 +9,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@antv/x6": "^1.24.4",
     "@arcgis/core": "^4.19.3",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",

src/components/chart/radar/normal-radar-chart.vue

@@ -65,7 +65,20 @@ export default {
       ],
     };
   },
-  computed: {},
+  computed: {
+    series() {
+      let result = [];
+      this.value.forEach((value, index) => {
+        result.push({
+          name: this.title,
+          type: "radar",
+          data: value.data,
+        });
+      });
+
+      return result;
+    },
+  },
   methods: {
     initChart() {
       let maxValue = -1;
@@ -84,6 +97,7 @@ export default {
       this.value[0].indicator.forEach((item) => {
         indicator.push({ name: item, max: maxValue });
       });
+
       let option = {
         grid: {
           left: 150,
@@ -298,13 +312,7 @@ export default {
             indicator: indicator,
           },
         ],
-        series: [
-          {
-            name: this.title,
-            type: "radar",
-            data: this.value.data,
-          },
-        ],
+        series: this.series,
       };
 
       this.chart.setOption(option);

src/views/HealthControl/dayinfo.vue

@@ -256,7 +256,16 @@ export default {
           indicator: ["平均切入风速", "性能损失电量", "拟合优度", "功率一致性系数", "利用小时", "设备可利用率", "等效可利用系数", "有效风时数", "平均风速", "静风频率"],
           data: [
             {
-              value: [44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000, 35000, 50000, 38000],
+              value: [44200, 14200, 20000, 35000, 50000, 38000, 44200, 14200, 20000, 35000],
+              name: "NAME",
+            },
+          ],
+        },
+        {
+          indicator: ["平均切入风速", "性能损失电量", "拟合优度", "功率一致性系数", "利用小时", "设备可利用率", "等效可利用系数", "有效风时数", "平均风速", "静风频率"],
+          data: [
+            {
+              value: [44210, 14200, 10000, 36000, 50000, 38400, 42200, 14200, 20000, 35000],
               name: "NAME",
             },
           ],

src/views/WindSite/pages/Home/Home.vue

@@ -173,9 +173,11 @@
         </row>
       </panel-3>
     </row>
-    <div class="first-info mg-t-16 mg-b-16" style="height:215px;">
+    <div class="first-info mg-t-16 mg-b-16">
       <div style="flex:0 1 450px;">
-        <panel title="日度损失电量分析"></panel>
+        <panel title="场站">
+          <station height="18.519vh" />
+        </panel>
       </div>
       <div class="mg-l-16" style="flex:1 1 auto;" ref="lineChart">
         <panel title="4小时功率曲线图">
@@ -238,12 +240,13 @@ import SvgIcon from "../../../../components/coms/icon/svg-icon.vue";
 import Panel from "../../../../components/coms/panel/panel.vue";
 import Panel3 from "../../../../components/coms/panel/panel3.vue";
 import LightMatrix from "./light-matrix.vue";
+import Station from "./Station.vue";
 import WindSiteWeather from "./wind-site-weather.vue";
 export default {
   // 名称
   name: "WindSiteHome",
   // 使用组件
-  components: { WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix, BtnGroupDouble },
+  components: { WindSiteWeather, Row, Col, Panel, DualPieChart, MultipleLineChart, Panel3, SvgIcon, HoverBarChart, MultipleBarChart, NormalLineChart, LightMatrix, BtnGroupDouble, Station },
   // 数据
   data() {
     return {

src/views/WindSite/pages/Home/Station.vue

@@ -0,0 +1,487 @@
+<template>
+  <div :id="id" class="station"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import { Graph } from "@antv/x6";
+import partten from "@/helper/partten.js";
+import stationimg from "@/assets/images/station.png";
+
+export default {
+  // 名称
+  name: "station",
+  // 使用组件
+  components: {},
+  // 数据
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    // 高度 默认9.722vh
+    height: {
+      type: String,
+      default: "175px",
+    },
+  },
+  data() {
+    return {
+      id: "",
+      list: [
+        {
+          id: "root",
+          type: "img",
+          image: stationimg,
+          x: 10,
+          y: 70,
+        },
+        // 线A
+        {
+          id: "A1",
+          type: "circle",
+          x: 120,
+          y: 40,
+          connects: ["root"],
+        },
+        {
+          id: "A2",
+          type: "circle",
+          x: 180,
+          y: 30,
+          connects: ["A1"],
+        },
+        {
+          id: "A3",
+          type: "circle",
+          x: 200,
+          y: 15,
+          connects: ["A2"],
+        },
+        {
+          id: "A3-1",
+          type: "circle",
+          x: 200,
+          y: 35,
+          connects: ["A3"],
+        },
+        {
+          id: "A3-2",
+          type: "circle",
+          x: 240,
+          y: 35,
+          connects: ["A3-1"],
+        },
+        {
+          id: "A3-3",
+          type: "circle",
+          x: 260,
+          y: 45,
+          connects: ["A3-2"],
+        },
+        {
+          id: "A4",
+          type: "circle",
+          x: 260,
+          y: 15,
+          connects: ["A3"],
+        },
+        {
+          id: "A5",
+          type: "circle",
+          x: 280,
+          y: 5,
+          connects: ["A4"],
+        },
+        {
+          id: "A6",
+          type: "circle",
+          x: 310,
+          y: 5,
+          connects: ["A5"],
+        },
+        {
+          id: "A7",
+          type: "circle",
+          x: 330,
+          y: 20,
+          connects: ["A6"],
+        },
+        {
+          id: "A8",
+          type: "circle",
+          x: 350,
+          y: 15,
+          connects: ["A7"],
+        },
+        {
+          id: "A9",
+          type: "circle",
+          x: 350,
+          y: 15,
+          connects: ["A8"],
+        },
+        {
+          id: "A10",
+          type: "circle",
+          x: 370,
+          y: 5,
+          connects: ["A9"],
+        },
+        {
+          id: "A11",
+          type: "circle",
+          x: 400,
+          y: 0,
+          connects: ["A10"],
+        },
+        // 线B
+        {
+          id: "B1",
+          type: "circle",
+          x: 150,
+          y: 60,
+          connects: ["root"],
+        },
+        {
+          id: "B2",
+          type: "circle",
+          x: 180,
+          y: 70,
+          connects: ["B1"],
+        },
+        {
+          id: "B3",
+          type: "circle",
+          x: 220,
+          y: 55,
+          connects: ["B2"],
+        },
+        {
+          id: "B4",
+          type: "circle",
+          x: 240,
+          y: 75,
+          connects: ["B3"],
+        },
+        {
+          id: "B5",
+          type: "circle",
+          x: 280,
+          y: 45,
+          connects: ["B4"],
+        },
+        {
+          id: "B6",
+          type: "circle",
+          x: 310,
+          y: 60,
+          connects: ["B5"],
+        },
+        {
+          id: "B6-1",
+          type: "circle",
+          x: 310,
+          y: 50,
+          connects: ["B6"],
+        },
+        {
+          id: "B6-2",
+          type: "circle",
+          x: 370,
+          y: 40,
+          connects: ["B6-1"],
+        },
+        {
+          id: "B7",
+          type: "circle",
+          x: 330,
+          y: 60,
+          connects: ["B6"],
+        },
+        {
+          id: "B8",
+          type: "circle",
+          x: 370,
+          y: 50,
+          connects: ["B7"],
+        },
+        {
+          id: "B9",
+          type: "circle",
+          x: 390,
+          y: 70,
+          connects: ["B8"],
+        },
+        {
+          id: "B10",
+          type: "circle",
+          x: 420,
+          y: 65,
+          connects: ["B9"],
+        },
+        // 线C
+        {
+          id: "C1",
+          type: "circle",
+          x: 150,
+          y: 75,
+          connects: ["root"],
+        },
+        {
+          id: "C2",
+          type: "circle",
+          x: 220,
+          y: 85,
+          connects: ["C1"],
+        },
+        {
+          id: "C3",
+          type: "circle",
+          x: 290,
+          y: 95,
+          connects: ["C2"],
+        },
+        {
+          id: "C4",
+          type: "circle",
+          x: 330,
+          y: 130,
+          connects: ["C3"],
+        },
+        {
+          id: "C5",
+          type: "circle",
+          x: 350,
+          y: 110,
+          connects: ["C4"],
+        },
+        // 线D
+        {
+          id: "D1",
+          type: "circle",
+          x: 150,
+          y: 130,
+          connects: ["root"],
+        },
+        {
+          id: "D2",
+          type: "circle",
+          x: 190,
+          y: 125,
+          connects: ["D1"],
+        },
+        {
+          id: "D3",
+          type: "circle",
+          x: 230,
+          y: 120,
+          connects: ["D2"],
+        },
+        {
+          id: "D4",
+          type: "circle",
+          x: 270,
+          y: 115,
+          connects: ["D3"],
+        },
+        {
+          id: "D5",
+          type: "circle",
+          x: 310,
+          y: 115,
+          connects: ["D4"],
+        },
+        {
+          id: "D6",
+          type: "circle",
+          x: 360,
+          y: 90,
+          connects: ["D5"],
+        },
+        {
+          id: "D7",
+          type: "circle",
+          x: 410,
+          y: 85,
+          connects: ["D6"],
+        },
+        // 线E
+        {
+          id: "E1",
+          type: "circle",
+          x: 145,
+          y: 145,
+          connects: ["root"],
+        },
+        {
+          id: "E2",
+          type: "circle",
+          x: 180,
+          y: 140,
+          connects: ["E1"],
+        },
+        {
+          id: "E3",
+          type: "circle",
+          x: 240,
+          y: 150,
+          connects: ["E2"],
+        },
+        {
+          id: "E4",
+          type: "circle",
+          x: 265,
+          y: 140,
+          connects: ["E3"],
+        },
+        {
+          id: "E5",
+          type: "circle",
+          x: 300,
+          y: 145,
+          connects: ["E4"],
+        },
+        {
+          id: "E6",
+          type: "circle",
+          x: 325,
+          y: 140,
+          connects: ["E5"],
+        },
+        {
+          id: "E7",
+          type: "circle",
+          x: 350,
+          y: 125,
+          connects: ["E6"],
+        },
+        {
+          id: "E8",
+          type: "circle",
+          x: 390,
+          y: 120,
+          connects: ["E7"],
+        },
+        {
+          id: "E9",
+          type: "circle",
+          x: 410,
+          y: 140,
+          connects: ["E8"],
+        },
+        {
+          id: "E10",
+          type: "circle",
+          x: 425,
+          y: 130,
+          connects: ["E9"],
+        },
+      ],
+    };
+  },
+  // 函数
+  methods: {
+    initStation() {
+      const graph = new Graph({
+        container: document.getElementById(this.id),
+        grid: false,
+      });
+
+      this.list.forEach((data) => {
+        this.createNode(graph, data);
+      });
+    },
+    createNode(graph, data) {
+      switch (data.type) {
+        case "circle":
+          graph.addNode({
+            id: data.id,
+            shape: "circle",
+            x: data.x,
+            y: data.y,
+            width: 8,
+            height: 8,
+            attrs: {
+              body: {
+                fill: partten.getColor("green"),
+                stroke: "transparent",
+              },
+            },
+          });
+          break;
+
+        case "img":
+          graph.addNode({
+            id: data.id,
+            x: data.x,
+            y: data.y,
+            width: 120,
+            height: 45,
+            shape: "html",
+            label: "升压站",
+            html() {
+              const wrap = document.createElement("div");
+              wrap.innerHTML = `<img src="${data.image}" />`;
+              return wrap;
+            },
+            attrs: {
+              label: {
+                x: 0,
+                y: 70,
+                fill: partten.getColor("gray"),
+                fontSize: 12,
+              },
+            },
+          });
+          break;
+      }
+
+      if (data.connects && data.connects.length > 0) {
+        data.connects.forEach((value, index) => {
+          graph.addEdge({
+            source: data.id,
+            target: value,
+            attrs: {
+              line: {
+                stroke: partten.getColor("gray"),
+                strokeDasharray: 4,
+                sourceMarker: {
+                  name: "path",
+                },
+                targetMarker: {
+                  name: "path",
+                },
+              },
+            },
+          });
+        });
+      }
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    this.id = "station-" + util.newGUID();
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+    this.$nextTick(() => {
+      this.$el.style.width = this.width;
+      this.$el.style.height = this.height;
+      this.initStation();
+    });
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {},
+};
+</script>
+
+<style lang="less"></style>