Merge remote-tracking branch 'remotes/origin/update/V1.0.9' into yx

src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="main">
+  <div v-if="isLogined" class="main">
     <div class="header-body">
       <div class="header-title">
         <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16.667vh" height="3.704vh" viewBox="0 0 377.437 91.615" enable-background="new 0 0 377.437 91.615" xml:space="preserve">
@@ -177,6 +177,7 @@ l16.229-16.229l16.229,16.229l42.867-42.867C115.034,45.228,109.133,42.189,102.956
       <router-view />
     </div>
   </div>
+  <login-page v-if="!isLogined" @onLogin="login" />
 </template>
 
 <script>
@@ -186,10 +187,12 @@ import Header from "@/views/layout/Header.vue";
 
 import { mapMutations } from "vuex";
 
+import LoginPage from "./views/layout/login-page.vue";
 export default {
   components: {
     Menu,
     Header,
+    LoginPage,
   },
 
   data() {
@@ -197,6 +200,7 @@ export default {
       isShowMenu: false,
       // 当前子系统
       root: "",
+      isLogined: true,
     };
   },
 
@@ -241,7 +245,10 @@ export default {
     },
     hideMenu() {
       this.isShowMenu = false;
-    }
+    },
+    login(params) {
+      if (params.username && params.password) this.isLogined = true;
+    },
   },
 };
 </script>

src/assets/icon/svg/qx-down.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="1625580625832" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7110" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M679.4 510.032v-428.304h-334.8v428.304h-240.456l407.856 432.24 407.856-432.24z" p-id="7111"></path></svg>

src/assets/styles/form.less

@@ -2,6 +2,7 @@
 .query {
   display: flex;
   justify-content: space-between;
+
   .query-items {
     flex: 0 0 auto;
     display: flex;
@@ -94,6 +95,7 @@ input[type="checkbox"] {
     transition: opacity 0.3s ease-out;
   }
 }
+
 .search-input {
   .el-input {
     line-height: 33px;
@@ -108,6 +110,7 @@ input[type="checkbox"] {
       line-height: 33px;
     }
   }
+
   .el-select {
     line-height: 33px;
 
@@ -117,10 +120,12 @@ input[type="checkbox"] {
         background: transparent;
         right: 0;
       }
+
       .el-input__icon {
         line-height: 33px;
         height: 33px;
       }
+
       .el-input__inner {
         background: fade(#536268, 20);
         border-color: fade(#536268, 20);
@@ -194,6 +199,25 @@ input[type="checkbox"] {
 }
 
 .date-select {
+
+  .el-input {
+    .el-input__inner {
+      background: fade(#536268, 20);
+      border-color: fade(#536268, 20);
+      height: 33px;
+      line-height: 33px;
+      padding-left: 16px;
+      color: #ffffff;
+      font-size: 12px;
+      font-family: "SourceHanSans";
+
+      &::placeholder {
+        font-size: 12px;
+        color: #606769;
+      }
+    }
+  }
+
   &.el-picker__popper.el-popper[role="tooltip"] {
     background: fade(#121d1c, 95);
     border: 1px solid fade(#121d1c, 95);
@@ -201,12 +225,14 @@ input[type="checkbox"] {
     .el-picker-panel {
       background: transparent;
       color: @white;
+
       .el-date-table {
         th {
           color: @white;
         }
 
         td {
+
           &.next-month,
           &.prev-month {
             color: @gray;
@@ -230,6 +256,22 @@ input[type="checkbox"] {
       .el-year-table td.today .cell {
         color: @white;
       }
+
+      .el-date-picker__editor-wrap {
+        .el-time-panel {
+          .el-time-panel__content {
+            background: fade(#121d1c, 95);
+          }
+
+          .el-time-panel__footer {
+            background: fade(#121d1c, 95);
+          }
+        }
+      }
+
+      .el-picker-panel__footer {
+        background: fade(#121d1c, 95);
+      }
     }
   }
 
@@ -285,19 +327,72 @@ input[type="checkbox"] {
 
 .el-form {
   .el-form-item {
+    margin-bottom: 8px;
+
     .el-form-item__label {
+      line-height: 33px;
       color: @gray-l;
+      font-family: "SourceHanSans";
     }
+
     .el-form-item__content {
+      line-height: 33px;
+
       .el-input {
+        line-height: 33px;
+
         .el-input__inner {
           background: fade(#536268, 20);
           border-color: fade(#536268, 20);
           height: 33px;
           line-height: 33px;
           padding-left: 16px;
+          color: #ffffff;
+          font-size: 12px;
+          font-family: "SourceHanSans";
+
+          &::placeholder {
+            font-size: 12px;
+            color: #606769;
+          }
         }
       }
+
+      .el-textarea {
+        .el-textarea__inner {
+          background: fade(#536268, 20);
+          border-color: fade(#536268, 20);
+          color: #ffffff;
+          font-size: 12px;
+          font-family: "SourceHanSans";
+
+          &::placeholder {
+            font-size: 12px;
+            color: #606769;
+          }
+        }
+      }
+
     }
   }
 }
+
+.el-input-number {
+  .el-input {
+    .el-input__inner {
+      background: fade(#536268, 20);
+      border-color: fade(#536268, 20);
+      height: 33px;
+      line-height: 33px;
+      padding-left: 16px;
+      color: #ffffff;
+      font-size: 12px;
+      font-family: "SourceHanSans";
+
+      &::placeholder {
+        font-size: 12px;
+        color: #606769;
+      }
+    }
+  }
+}

src/assets/styles/svg.less

@@ -1,4 +1,7 @@
 .svg-icon {
+  font-size: 0;
+  line-height: 0;
+
   svg {
     width: 2.222vh;
     height: 2.222vh;

src/components/chart/combination/bar-line-chart.vue

@@ -173,7 +173,7 @@ export default {
           name: this.bardata.legend[i],
           type: "bar",
           stack: "总量",
-          //   barWidth: "60%",
+          barWidth: "16px",
           label: {
             show: false,
             position: "insideRight",

src/components/chart/line/table-line-chart.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="chart" :id="id"></div>
+</template>
+
+<script>
+import util from "@/helper/util.js";
+import partten from "@/helper/partten.js";
+import * as echarts from "echarts";
+
+export default {
+  name: "normal-line-chart",
+  componentName: "normal-line-chart",
+  props: {
+    width: {
+      type: String,
+      default: "280px",
+    },
+    height: {
+      type: String,
+      default: "24px",
+    },
+    // 数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          text: "1",
+          value: 3,
+        },
+        {
+          text: "2",
+          value: 2,
+        },
+        {
+          text: "3",
+          value: 1,
+        },
+      ],
+    },
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {
+    xdata() {
+      return this.list.map((t) => {
+        return t.text;
+      });
+    },
+    values() {
+      return this.list.map((t) => {
+        return t.value;
+      });
+    },
+  },
+  methods: {
+    hexToRgba(hex, opacity) {
+      let rgbaColor = "";
+      let reg = /^#[\da-f]{6}$/i;
+      if (reg.test(hex)) {
+        rgbaColor = `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt("0x" + hex.slice(3, 5))},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
+      }
+      return rgbaColor;
+    },
+    initChart() {
+      let chart = echarts.init(this.$el);
+      let color = [partten.getColor("green")];
+
+      let option = {
+        color: color,
+        grid: {
+          top: 4,
+          bottom: 0,
+          left: 8,
+          right: 8,
+        },
+        xAxis: [
+          {
+            type: "category",
+            boundaryGap: false,
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: partten.getColor("gray"),
+              },
+            },
+            data: this.xdata,
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            // 分割线
+            splitLine: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+        ],
+        series: [
+          {
+            type: "line",
+            lineStyle: {
+              normal: {
+                color: color[0],
+              },
+            },
+            animation: false,
+            symbol: "circle", //数据交叉点样式
+            areaStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: this.hexToRgba(color[0], 0.3),
+                    },
+                    {
+                      offset: 1,
+                      color: this.hexToRgba(color[0], 0.1),
+                    },
+                  ],
+                  false
+                ),
+                shadowColor: this.hexToRgba(color[0], 0.1),
+                shadowBlur: 10,
+              },
+            },
+            data: this.values,
+          },
+        ],
+      };
+
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function() {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
+    },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$nextTick(() => {
+      setTimeout(() => {
+        this.$el.style.width = this.width;
+        this.$el.style.height = this.height;
+        this.initChart();
+      }, 1000);
+    });
+  },
+  updated() {
+    this.$nextTick(() => {
+      this.initChart();
+    });
+  },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
+};
+</script>
+
+<style lang="less">
+.chart {
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+</style>

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

@@ -108,6 +108,11 @@ export default {
         },
         tooltip: {
           trigger: "item",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
         },
         radar: [
           // 最低层 80

src/components/coms/table/check-table.vue

@@ -139,7 +139,7 @@ export default {
     },
     onCheck(data) {
       data.checked = event.target.checked;
-      this.$emit("check", { data: data, checked: event.target.checked });
+      this.$emit("check", { data: data, checked: data.checked });
     },
     onSort(col) {
       if (col.sortable == true) {

src/components/coms/table/table.vue

@@ -2,13 +2,22 @@
   <table class="com-table">
     <thead>
       <tr>
-        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" @click="onSort(col)">{{ col.name }}</th>
+        <th v-for="(col, index) of data.column" :key="index" :class="{ light: col.is_light }" @click="onSort(col)">
+          {{ col.name }}
+        </th>
       </tr>
     </thead>
     <el-scrollbar>
       <tbody :style="{ height: height }">
         <tr v-for="(row, index) of tableData" :key="index">
-          <td v-for="(col, i) of data.column" :key="i" :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num, 'always-light': col.is_light || row.is_light }" @mouseenter="hover(row, col)" @mouseleave="leave()">
+          <td
+            v-for="(col, i) of data.column"
+            :key="i"
+            :style="{ width: col.width }"
+            :class="{ light: hoverRow == row || hoverCol == col, num: col.is_num, 'always-light': col.is_light || row.is_light }"
+            @mouseenter="hover(row, col)"
+            @mouseleave="leave()"
+          >
             <component :is="col.type ? col.type : 'div'" v-bind="col.props" v-html="template(col, row[col.field])" @click="onClick(col, row)"> </component>
           </td>
         </tr>
@@ -32,6 +41,7 @@ export default {
                         name: "风机名称",
                         field: "name",
                         type:'div',
+                        width:'', // 宽度
                         is_num: false, // 是否为数字
                         is_light: false, // 是否高亮
                         template:function(){ }
@@ -171,7 +181,12 @@ export default {
     },
     handleCurrentChange(val) {
       this.currentPage = val;
-      this.$emit("onPagging", { pageIndex: this.currentPage, pageSize: this.pageSize, start: this.startRow, end: this.endRow });
+      this.$emit("onPagging", {
+        pageIndex: this.currentPage,
+        pageSize: this.pageSize,
+        start: this.startRow,
+        end: this.endRow,
+      });
     },
   },
   // 生命周期钩子

src/router/index.js

@@ -198,6 +198,11 @@ const routes = [
     name: 'cutAnalyse',
     component: () => import('../views/cutAnalyse/index.vue'),
   },
+  {
+    path: '/health/health8',
+    name: 'health8',
+    component: () => import(/* webpackChunkName: "health8" */  '../views/HealthControl/Health8.vue'),
+  },
 ]
 
 const router = createRouter({

src/views/Decision/Decision1.vue

@@ -106,7 +106,8 @@
 							name: "",
 							field: "index",
 							is_num: false,
-							is_light: false
+							is_light: false,
+                            width: "50px",
 						},
 						{
 							name: "名称",
@@ -365,7 +366,7 @@
 				this.$router.push("/decision/decision1Mx")
 			},
      onChangePage(params) {
-      console.log(params);      
+      console.log(params);
     },
 		}
 	};

src/views/HealthControl/Health1.vue

@@ -194,6 +194,9 @@
       <el-dialog title="日信息对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
         <dayinfo />
       </el-dialog>
+      <el-dialog title="消缺跟踪" v-model="dialog2Visible" width="1400px" top="10vh" custom-class="modal" :close-on-click-modal="false">
+        <Track />
+      </el-dialog>
       <button class="btn" @click="showMessage">消息提醒</button>
       <button class="btn" @click="showComfirm">操作确认</button>
     </div>
@@ -209,13 +212,15 @@ import SvgIcon from "../../components/coms/icon/svg-icon.vue";
 import Panel from "../../components/coms/panel/panel.vue";
 import Dayinfo from "./dayinfo.vue";
 import Health2 from "./Health2.vue";
+import Track from "./track.vue";
 export default {
   setup() {},
-  components: { SvgIcon, Panel, VertivalBarLineChart, Health2, Dayinfo},
+  components: { SvgIcon, Panel, VertivalBarLineChart, Health2, Dayinfo, Track },
   data() {
     return {
       tabIndex: 0,
       dialogVisible: false,
+      dialog2Visible: false,
     };
   },
   methods: {

src/views/HealthControl/Health8.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="health-8">
+    <div class="query mg-b-8">
+      <div class="query-items">
+        <div class="query-item">
+          <div class="lable">场站：</div>
+          <div class="search-input">
+            <el-select v-model="value1" clearable placeholder="请选择" popper-class="select">
+              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="table">
+      <table style="width:100%;" border="0" cellspacing="0">
+        <thead>
+          <tr>
+            <th rowspan="2" class="type1" style="width:50px;"></th>
+            <th rowspan="2" class="type1" style="width:105px;">风机编号</th>
+            <th rowspan="2" class="type1" style="width:105px;">风机型号</th>
+            <th rowspan="2" class="type1" style="width:350px;">置信度</th>
+            <th rowspan="2" class="type1" style="width:100px;">健康分数</th>
+            <th rowspan="2" class="type1" style="border: 2px solid #07140f;border-left: 0;">未来风机健康程度</th>
+            <th colspan="8">组件健康度</th>
+          </tr>
+          <tr>
+            <th style="width:100px;">齿轮箱</th>
+            <th style="width:100px;">发电机</th>
+            <th style="width:100px;">主轴</th>
+            <th style="width:100px;">变桨</th>
+            <th style="width:100px;">偏航</th>
+            <th style="width:100px;">机舱</th>
+            <th style="width:100px;">变频器</th>
+            <th style="width:100px;">主控</th>
+          </tr>
+        </thead>
+      </table>
+      <el-scrollbar>
+        <div style="height:calc(100vh - 174px);">
+          <table style="width:100%;" border="0" cellspacing="0">
+            <tbody>
+              <tr v-for="index of 50" :key="index">
+                <td style="width:50px;">
+                  01
+                </td>
+                <td style="width:105px;">
+                  MG01_01
+                </td>
+                <td style="width:105px;">
+                  UP77
+                </td>
+                <td style="width:350px;">
+                  <div class="percent-item">
+                    80%
+                    <div class="percent-bar" style="">
+                      <div class="percent-value" style="width:80%"></div>
+                    </div>
+                  </div>
+                </td>
+                <td class="score" style="width:100px;">
+                  <div>100</div>
+                </td>
+                <td>
+                  <table-line-chart />
+                </td>
+                <td class="item">
+                  <div class="green">优</div>
+                </td>
+                <td class="item">
+                  <div class="purple">优</div>
+                </td>
+                <td class="item">
+                  <div class="orange">优</div>
+                </td>
+                <td class="item">
+                  <div class="red">优</div>
+                </td>
+                <td class="item">
+                  <div class="">优</div>
+                </td>
+                <td class="item">
+                  <div class="">优</div>
+                </td>
+                <td class="item">
+                  <div class="">优</div>
+                </td>
+                <td class="item">
+                  <div class="">优</div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </el-scrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import TableLineChart from "../../components/chart/line/table-line-chart.vue";
+export default {
+  setup() {},
+  components: { TableLineChart },
+  data() {
+    return {
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
+      value1: "",
+    };
+  },
+  created() {},
+};
+</script>
+
+<style lang="less">
+.health-8 {
+  .table {
+    tbody {
+      tr:nth-child(2n) td {
+        background-color: fade(@gray, 20%);
+
+        &.item {
+          background-color: transparent;
+        }
+      }
+    }
+
+    th {
+      background: fade(@gray, 40);
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 24px;
+      color: @gray-l;
+      border: 2px solid #07140f;
+
+      &.type1 {
+        border-left: 0;
+        border-right: 0;
+      }
+    }
+    td {
+      color: @gray-l;
+      text-align: center;
+      height: 26px;
+      line-height: 26px;
+
+      &.item {
+        width: 100px;
+        div {
+          color: @white;
+          background: fade(@gray, 20);
+          margin: 2px;
+          border: 1px solid transparent;
+
+          &.green {
+            color: @green;
+            background: fade(@green, 20);
+            border-color: @green;
+          }
+
+          &.purple {
+            color: @purple;
+            background: fade(@purple, 20);
+            border-color: @purple;
+          }
+
+          &.orange {
+            color: @orange;
+            background: fade(@orange, 20);
+            border-color: @orange;
+          }
+
+          &.red {
+            color: @red;
+            background: fade(@red, 20);
+            border-color: @red;
+          }
+        }
+      }
+    }
+
+    .percent-item {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 34px;
+
+      .percent-bar {
+        height: 12px;
+        width: 170px;
+        background: transparent;
+        border: 1px solid @gray-l;
+        margin-left: 8px;
+
+        .percent-value {
+          height: calc(100% - 4px);
+          background: @green;
+          margin: 2px;
+        }
+      }
+    }
+
+    .score {
+      width: 100px;
+      div {
+        background: fade(@gray, 20);
+      }
+    }
+  }
+}
+</style>

src/views/HealthControl/track.vue

@@ -1,44 +1,244 @@
 <template>
   <div class="track-info">
     <div class="form-info">
-      <div class="work-flow"></div>
+      <div class="work-flow">
+        <div class="work-flow-line"></div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-warn"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">流程未启动</div>
+        </div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-down"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺单已下达</div>
+        </div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-hour-hand"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺单处理中</div>
+        </div>
+        <div class="work-flow-item active">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-对"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺完成</div>
+        </div>
+        <div class="work-flow-item">
+          <div class="work-flow-icon-item">
+            <div class="work-flow-icon-o"></div>
+            <div class="work-flow-icon-i"></div>
+            <span class="svg-icon">
+              <SvgIcon svgid="svg-qx-flag"></SvgIcon>
+            </span>
+          </div>
+          <div class="work-flow-text">消缺验收</div>
+        </div>
+      </div>
       <div class="form-body">
-        <el-form ref="form" :model="form" label-width="80px">
+        <el-form ref="form" :model="form" label-width="120px">
           <el-row>
             <el-col :span="12">
               <el-form-item label="风场：">
-                <el-input v-model="form.name"></el-input>
+                <el-input v-model="form.fc" placeholder="请填写风场名称"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="风场：">
-                <el-input v-model="form.name"></el-input>
+              <el-form-item label="风机：">
+                <el-input v-model="form.fj" placeholder="请输入风机名称"></el-input>
               </el-form-item>
             </el-col>
+          </el-row>
+          <el-row>
             <el-col :span="12">
-              <el-form-item label="风场：">
-                <el-input v-model="form.name"></el-input>
+              <el-form-item label="推荐检修时间：">
+                <el-input v-model="form.tjjxsj" placeholder="请填写推荐检修时间"></el-input>
+                <!-- <el-date-picker v-model="form.tjjxsj" type="datetime" placeholder="请填写推荐检修时间" popper-class="date-select"></el-date-picker> -->
               </el-form-item>
             </el-col>
             <el-col :span="12">
-              <el-form-item label="风场：">
-                <el-input v-model="form.name"></el-input>
+              <el-form-item label="预计检修风速：">
+                <el-input v-model="form.yjjxfs" placeholder="请填写预计检修风速"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="推荐理由：">
+                <el-input type="textarea" :rows="3" v-model="form.tjly" placeholder="请填写推荐理由"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="下单时间：">
+                <el-input v-model="form.xdsj" placeholder="请填写下单时间"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="主要负责人：">
+                <el-input v-model="form.zyfzr" placeholder="请填写主要负责人"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="出发时间：">
+                <el-input v-model="form.cfsj" placeholder="请填写出发时间"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="到达时间：">
+                <el-input v-model="form.ddsj" placeholder="请填写到达时间"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="排查方法：">
+                <el-input type="textarea" :rows="3" v-model="form.pcff" placeholder="请填写排查方法"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="处理方法：">
+                <el-input type="textarea" :rows="3" v-model="form.clff" placeholder="请填写处理方法"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="消缺时间：">
+                <el-input v-model="form.qxsj" placeholder="请填写消缺时间"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="故障时长：">
+                <el-input v-model="form.gzsc" placeholder="请填写故障时长"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="验收人：">
+                <el-input v-model="form.ysr" placeholder="请填写验收人"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="验收时间：">
+                <el-input v-model="form.yssj" placeholder="请填写验收时间"></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="24">
+              <el-form-item label="验收意见：">
+                <el-input type="textarea" :rows="3" v-model="form.ysyj" placeholder="请填写验收意见"></el-input>
               </el-form-item>
             </el-col>
           </el-row>
         </el-form>
       </div>
     </div>
-    <div class="evaluate"></div>
-    <div class="tabs"></div>
+    <div class="evaluate">
+      <div class="white">评价</div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">任务分配时长</div>
+        <el-input-number class="input-number" v-model="evaluate.rwfpsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">任务分配平均时长</div>
+        <el-input-number class="input-number" v-model="evaluate.rwfppjsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">到达现场时长</div>
+        <el-input-number class="input-number" v-model="evaluate.ddxcsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">到达现场平均时长</div>
+        <el-input-number class="input-number" v-model="evaluate.ddxcpjsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">缺陷处理时长</div>
+        <el-input-number class="input-number" v-model="evaluate.qxclsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">缺陷处理平均时长</div>
+        <el-input-number class="input-number" v-model="evaluate.qxclpjsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">验收时长</div>
+        <el-input-number class="input-number" v-model="evaluate.yssc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+      <div class="evaluate-item">
+        <div class="evaluate-label">验收平均时长</div>
+        <el-input-number class="input-number" v-model="evaluate.yspjsc" :controls="false" controls-position="right" :min="0" :max="1000"></el-input-number>
+        <div class="evaluate-unit">min</div>
+      </div>
+    </div>
+    <div class="tabs">
+      <div class="tab-box">
+        <div class="tab-item" v-for="(tab, index) of tabs" :key="index" :class="{ active: activeTab == index }" @click="selectTab(index)">
+          <span class="svg-icon svg-icon-md" :class="activeTab == index ? 'svg-icon-green' : 'svg-icon-write'">
+            <SvgIcon :svgid="tab.icon"></SvgIcon>
+          </span>
+          <span>{{ tab.text }}</span>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
 export default {
-  components: {},
+  components: {
+    SvgIcon
+  },
   data() {
     return {
+      tabs: [
+        {
+          icon: "svg-gis",
+          text: "GIS地貌",
+        },
+        {
+          icon: "svg-jkp",
+          text: "手环监控",
+        },
+        {
+          icon: "svg-jk",
+          text: "监控视频",
+        },
+      ],
+      activeTab: 0,
       form: {
         name: "",
         region: "",
@@ -48,9 +248,41 @@ export default {
         type: [],
         resource: "",
         desc: "",
+        fc: "",
+        fj: "",
+        tjjxsj: "",
+        yjjxfs: "",
+        tjly: "",
+        xdsj: "",
+        zyfzr: "",
+        cfsj: "",
+        ddsj: "",
+        pcff: "",
+        clff: "",
+        qxsj: "",
+        gzsc: "",
+        ysr: "",
+        yssj: "",
+        ysyj: "",
       },
+      evaluate: {
+        rwfpsc: 11,
+        rwfppjsc: 11,
+        ddxcsc: 11,
+        ddxcpjsc: 11,
+        qxclsc: 11,
+        qxclpjsc: 11,
+        yssc: 11,
+        yspjsc: 11,
+      }
     };
   },
+  // 函数
+  methods: {
+    selectTab: function(index) {
+      this.activeTab = index;
+    },
+  },
 };
 </script>
 
@@ -64,15 +296,192 @@ export default {
       width: 100%;
       background: fade(@gray, 20);
       margin-bottom: 8px;
+      padding: 26px 69px;
+      display: flex;
+      position: relative;
+
+      .work-flow-line {
+        position: absolute;
+        width: 600px;
+        height: 4px;
+        left: calc(50% - 300px);
+        top: calc(50% - 11px);
+        background: @green;
+      }
+
+      .work-flow-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        &.active {
+          .work-flow-icon-item {
+            .work-flow-icon-o {
+                border: 1px solid @green;
+                opacity: 0.4;
+              }
+
+              .work-flow-icon-i {
+                border: 2px solid @green;
+                background: linear-gradient(to bottom, #1F2B2B 0%,#1F2B2B 20%,@green 100%);
+              }
+
+              .svg-icon {
+                svg {
+                  use {
+                    fill: @green;
+                  }
+                }
+              }
+          }
+
+          .work-flow-text {
+            color: @green;
+          }
+          
+        }
+
+        .work-flow-icon-item {
+          width: 60px;
+          height: 60px;
+          position: relative;
+
+          .work-flow-icon-o {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            border: 1px solid #B3BDC0;
+            opacity: 0.4;
+          }
+
+          .work-flow-icon-m {
+            position: absolute;
+            top: 1px;
+            left: 1px;
+            width: 59px;
+            height: 59px;
+            border-radius: 50%;
+            border: 4px solid #212b2b;
+          }
+
+          .work-flow-icon-i {
+            position: absolute;
+            top: 5px;
+            left: 5px;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            border: 2px solid #606769;
+            background: linear-gradient(to bottom, #1F2B2B 0%,#1F2B2B 20%,#606769 100%);
+          }
+
+          .svg-icon {
+            position: absolute;
+            width: 26px;
+            height: 26px;
+            top: calc(50% - 10px);
+            left: calc(50% - 13px);
+            svg {
+               width: 26px;
+              height: 26px;
+              use {
+                fill: @gray-l;
+              }
+            }
+          }
+          
+        }
+
+        .work-flow-text {
+            color: @gray-l;
+            margin-top: 8px;
+            font-size: @fontsize-s;
+          }
+      }
     }
   }
 
   .evaluate {
     flex: 0 0 358px;
+    margin-left: 69px;
+
+    .evaluate-item {
+      display: flex;
+      align-items: center;
+      margin-top: 8px;
+
+      .evaluate-label {
+        width: 120px;
+        text-align: right;
+      }
+
+      .evaluate-label,
+      .evaluate-unit {
+        font-size: @fontsize;
+        color: @gray-l;
+      }
+
+      .input-number {
+        display: inline-block;
+        width: 62px;
+        margin: 0 16px;
+      }
+    }
+
+    
   }
 
   .tabs {
     flex: 0 0 220px;
+
+    height: 619px;
+    border-left: 1px solid #53626833;
+
+    .tab-box {
+    margin: 1.852vh 2.778vh;
+    display: inline-block;
+    z-index: 2;
+    position: relative;
+    margin: 26px auto;
+
+    .tab-item {
+      display: flex;
+      align-items: center;
+      // justify-content: center;
+      font-size: @fontsize-l;
+      cursor: pointer;
+      // width: 120px;
+      padding: 8px;
+      margin-bottom: 16px;
+
+      &.active {
+        color: @green;
+        position: relative;
+        background-image: @greenLinearTop;
+
+        &::after {
+          content: "";
+          position: absolute;
+          width: 100%;
+          height: 5px;
+          border: 1px solid @green;
+          border-top: 0;
+          left: 0;
+          bottom: 0;
+          box-sizing: border-box;
+        }
+      }
+
+      .svg-icon {
+        margin-right: 16px;
+      }
+    }
+  }
   }
 }
 </style>

src/views/WindSite/components/bsx6.vue

@@ -1203,6 +1203,578 @@ export default {
                 type: "switch",
                 state: 0,
                 direction: "top"
+            },{
+                id: "322-3",
+                x: 1282,
+                y: 728,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "322-03",
+                x: 1300,
+                y: 788,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            }],
+            labels: [{
+                id: "labellaa",
+                shape: "label-text",
+                x: 160,
+                y: 990,
+                label: "la(A):",
+            },{
+                id: "labelpmw",
+                shape: "label-text",
+                x: 160,
+                y: 1020,
+                label: "P(MW):",
+            },{
+                id: "labelqmvar",
+                shape: "label-text",
+                x: 160,
+                y: 1050,
+                label: "Q(MVar):",
+            },{
+                id: "nfx",
+                shape: "tag-text",
+                x: 817,
+                y: 20,
+                label: "南风线",
+            },{
+                id: "110mxPT",
+                shape: "tag-text",
+                x: 1105,
+                y: 289,
+                label: "110母线PT",
+            },{
+                id: "zb1",
+                shape: "tag-text-s",
+                x: 600,
+                y: 447,
+                label: "#1主变",
+            },{
+                id: "zb2",
+                shape: "tag-text-s",
+                x: 1220,
+                y: 447,
+                label: "#2主变",
+            },{
+                id: "jdb1",
+                shape: "tag-text-s",
+                x: 235,
+                y: 950,
+                label: "#1接地变",
+            },{
+                id: "jdb1v1",
+                shape: "value-text",
+                x: 235,
+                y: 990,
+                label: "",
+            },{
+                id: "jdb1v2",
+                shape: "value-text",
+                x: 235,
+                y: 1020,
+                label: "",
+            },{
+                id: "jdb1v3",
+                shape: "value-text",
+                x: 235,
+                y: 1050,
+                label: "",
+            },{
+                id: "zyb2",
+                shape: "tag-text-s",
+                x: 372,
+                y: 950,
+                label: "#2站用变",
+            },{
+                id: "zyb2v1",
+                shape: "value-text",
+                x: 372,
+                y: 990,
+                label: "",
+            },{
+                id: "zyb2v2",
+                shape: "value-text",
+                x: 372,
+                y: 1020,
+                label: "",
+            },{
+                id: "zyb2v3",
+                shape: "value-text",
+                x: 372,
+                y: 1050,
+                label: "",
+            },{
+                id: "drq2",
+                shape: "tag-text-s",
+                x: 464,
+                y: 950,
+                label: "#2电容器",
+            },{
+                id: "drq2v1",
+                shape: "value-text",
+                x: 464,
+                y: 990,
+                label: "",
+            },{
+                id: "drq2v2",
+                shape: "value-text",
+                x: 464,
+                y: 1020,
+                label: "",
+            },{
+                id: "drq2v3",
+                shape: "value-text",
+                x: 464,
+                y: 1050,
+                label: "",
+            },{
+                id: "drq1",
+                shape: "tag-text-s",
+                x: 562,
+                y: 950,
+                label: "#1电容器",
+            },{
+                id: "drq1v1",
+                shape: "value-text",
+                x: 562,
+                y: 990,
+                label: "",
+            },{
+                id: "drq1v2",
+                shape: "value-text",
+                x: 562,
+                y: 1020,
+                label: "",
+            },{
+                id: "drq1v3",
+                shape: "value-text",
+                x: 562,
+                y: 1050,
+                label: "",
+            },{
+                id: "dkq1",
+                shape: "tag-text-s",
+                x: 650,
+                y: 950,
+                label: "#1电抗器",
+            },{
+                id: "dkq1v1",
+                shape: "value-text",
+                x: 650,
+                y: 990,
+                label: "",
+            },{
+                id: "dkq1v2",
+                shape: "value-text",
+                x: 650,
+                y: 1020,
+                label: "",
+            },{
+                id: "dkq1v3",
+                shape: "value-text",
+                x: 650,
+                y: 1050,
+                label: "",
+            },{
+                id: "35kw1m",
+                shape: "tag-text-s",
+                x: 739,
+                y: 950,
+                label: "35KV I母",
+            },{
+                id: "35kw1mv1",
+                shape: "value-text",
+                x: 739,
+                y: 990,
+                label: "",
+            },{
+                id: "35kw1mv2",
+                shape: "value-text",
+                x: 739,
+                y: 1020,
+                label: "",
+            },{
+                id: "35kw1mv3",
+                shape: "value-text",
+                x: 739,
+                y: 1050,
+                label: "",
+            },{
+                id: "fc3x",
+                shape: "tag-text-s",
+                x: 835,
+                y: 950,
+                label: "风场三线",
+            },{
+                id: "fc3xv1",
+                shape: "value-text",
+                x: 835,
+                y: 990,
+                label: "",
+            },{
+                id: "fc3xv2",
+                shape: "value-text",
+                x: 835,
+                y: 1020,
+                label: "",
+            },{
+                id: "fc3xv3",
+                shape: "value-text",
+                x: 835,
+                y: 1050,
+                label: "",
+            },{
+                id: "fc2x",
+                shape: "tag-text-s",
+                x: 927,
+                y: 950,
+                label: "风场二线",
+            },{
+                id: "fc2xv1",
+                shape: "value-text",
+                x: 927,
+                y: 990,
+                label: "",
+            },{
+                id: "fc2xv2",
+                shape: "value-text",
+                x: 927,
+                y: 1020,
+                label: "",
+            },{
+                id: "fc2xv3",
+                shape: "value-text",
+                x: 927,
+                y: 1050,
+                label: "",
+            },{
+                id: "fc1x",
+                shape: "tag-text-s",
+                x: 1021,
+                y: 950,
+                label: "风场一线",
+            },{
+                id: "fc1xv1",
+                shape: "value-text",
+                x: 1021,
+                y: 990,
+                label: "",
+            },{
+                id: "fc1xv2",
+                shape: "value-text",
+                x: 1021,
+                y: 1020,
+                label: "",
+            },{
+                id: "fc1xv3",
+                shape: "value-text",
+                x: 1021,
+                y: 1050,
+                label: "",
+            },{
+                id: "jdb2",
+                shape: "tag-text-s",
+                x: 1155,
+                y: 950,
+                label: "#2接地变",
+            },{
+                id: "jdb2v1",
+                shape: "value-text",
+                x: 1155,
+                y: 990,
+                label: "",
+            },{
+                id: "jdb2v2",
+                shape: "value-text",
+                x: 1155,
+                y: 1020,
+                label: "",
+            },{
+                id: "jdb2v3",
+                shape: "value-text",
+                x: 1155,
+                y: 1050,
+                label: "",
+            },{
+                id: "svg1",
+                shape: "tag-text-s",
+                x: 1244,
+                y: 950,
+                label: "#1 SVG",
+            },{
+                id: "svg1v1",
+                shape: "value-text",
+                x: 1244,
+                y: 990,
+                label: "",
+            },{
+                id: "svg1v2",
+                shape: "value-text",
+                x: 1244,
+                y: 1020,
+                label: "",
+            },{
+                id: "svg1v3",
+                shape: "value-text",
+                x: 1244,
+                y: 1050,
+                label: "",
+            },{
+                id: "fc4x",
+                shape: "tag-text-s",
+                x: 1406,
+                y: 950,
+                label: "风场四线",
+            },{
+                id: "fc4xv1",
+                shape: "value-text",
+                x: 1406,
+                y: 990,
+                label: "",
+            },{
+                id: "fc4xv2",
+                shape: "value-text",
+                x: 1406,
+                y: 1020,
+                label: "",
+            },{
+                id: "fc4xv3",
+                shape: "value-text",
+                x: 1406,
+                y: 1050,
+                label: "",
+            },{
+                id: "35kv1m",
+                shape: "tag-text-s",
+                x: 1506,
+                y: 950,
+                label: "35KV I母",
+            },{
+                id: "35kv1mv1",
+                shape: "value-text",
+                x: 1506,
+                y: 990,
+                label: "",
+            },{
+                id: "35kv1mv2",
+                shape: "value-text",
+                x: 1506,
+                y: 1020,
+                label: "",
+            },{
+                id: "35kv1mv3",
+                shape: "value-text",
+                x: 1506,
+                y: 1050,
+                label: "",
+            },{
+                id: "nfxIaA",
+                shape: "form-text",
+                x: 557,
+                y: 80,
+                label: "la(A):",
+                value: "1003",
+            },{
+                id: "nfxpmw",
+                shape: "form-text",
+                x: 557,
+                y: 110,
+                label: "P(MW):",
+                value: "26",
+            },{
+                id: "nfxqmvar",
+                shape: "form-text",
+                x: 557,
+                y: 140,
+                label: "Q(MVar):",
+                value: "35",
+            },{
+                id: "nfxuxkv",
+                shape: "form-text",
+                x: 557,
+                y: 170,
+                label: "Ux(kV):",
+                value: "",
+            },{
+                id: "nfxfhz",
+                shape: "form-text",
+                x: 557,
+                y: 200,
+                label: "F(Hz):",
+                value: "",
+            },{
+                id: "nfxcos",
+                shape: "form-text",
+                x: 557,
+                y: 230,
+                label: "COS:",
+                value: "",
+            },{
+                id: "nfxuakv",
+                shape: "form-text",
+                x: 1007,
+                y: 140,
+                label: "Ua(kV):",
+                value: "",
+            },{
+                id: "nfxubkv",
+                shape: "form-text",
+                x: 1007,
+                y: 170,
+                label: "Ub(kV):",
+                value: "",
+            },{
+                id: "nfxuckv",
+                shape: "form-text",
+                x: 1007,
+                y: 200,
+                label: "Uc(kV):",
+                value: "",
+            },{
+                id: "nfxu0kv",
+                shape: "form-text",
+                x: 1007,
+                y: 230,
+                label: "U0(kV):",
+                value: "",
+            },{
+                id: "35kv1mxuakv",
+                shape: "form-text",
+                x: 174,
+                y: 450,
+                label: "Ua(kV):",
+                value: "",
+            },{
+                id: "35kv1mxubkv",
+                shape: "form-text",
+                x: 174,
+                y: 480,
+                label: "Ub(kV):",
+                value: "",
+            },{
+                id: "35kv1mxuckv",
+                shape: "form-text",
+                x: 174,
+                y: 510,
+                label: "Uc(kV):",
+                value: "",
+            },{
+                id: "35kv1mxu0kv",
+                shape: "form-text",
+                x: 174,
+                y: 540,
+                label: "U0(kV):",
+                value: "",
+            },{
+                id: "35kv1mxymwddu",
+                shape: "form-text",
+                x: 418,
+                y: 390,
+                label: "油面温度(℃):",
+                value: "",
+            },{
+                id: "35kv1mxrzwddu",
+                shape: "form-text",
+                x: 418,
+                y: 420,
+                label: "绕阻温度(℃):",
+                value: "",
+            },{
+                id: "35kv1mxdw",
+                shape: "form-text",
+                x: 418,
+                y: 450,
+                label: "档位:",
+                value: "",
+            },{
+                id: "35kv1mxiaa",
+                shape: "form-text",
+                x: 418,
+                y: 480,
+                label: "Ia(A):",
+                value: "",
+            },{
+                id: "35kv1mxpmw",
+                shape: "form-text",
+                x: 418,
+                y: 510,
+                label: "P(MW):",
+                value: "",
+            },{
+                id: "35kv1mxpmvar",
+                shape: "form-text",
+                x: 418,
+                y: 540,
+                label: "Q(MVar):",
+                value: "",
+            },{
+                id: "35kv2mxymwddu",
+                shape: "form-text",
+                x: 1054,
+                y: 390,
+                label: "油面温度(℃):",
+                value: "",
+            },{
+                id: "35kv2mxrzwddu",
+                shape: "form-text",
+                x: 1054,
+                y: 420,
+                label: "绕阻温度(℃):",
+                value: "",
+            },{
+                id: "35kv2mxdw",
+                shape: "form-text",
+                x: 1054,
+                y: 450,
+                label: "档位:",
+                value: "",
+            },{
+                id: "35kv2mxiaa",
+                shape: "form-text",
+                x: 1054,
+                y: 480,
+                label: "Ia(A):",
+                value: "",
+            },{
+                id: "35kv2mxpmw",
+                shape: "form-text",
+                x: 1054,
+                y: 510,
+                label: "P(MW):",
+                value: "",
+            },{
+                id: "35kv2mxpmvar",
+                shape: "form-text",
+                x: 1054,
+                y: 540,
+                label: "Q(MVar):",
+                value: "",
+            },{
+                id: "35kv2mxuabkv",
+                shape: "form-text",
+                x: 1502,
+                y: 480,
+                label: "Uab(kV):",
+                value: "",
+            },{
+                id: "35kv2mxubckv",
+                shape: "form-text",
+                x: 1502,
+                y: 510,
+                label: "Ubc(kV):",
+                value: "",
+            },{
+                id: "35kv2mxuczkv",
+                shape: "form-text",
+                x: 1502,
+                y: 540,
+                label: "Ucz(kV):",
+                value: "",
             }]
         };
     },
@@ -1224,6 +1796,7 @@ export default {
                 },
                 interacting: false,
             });
+            this.graph.zoomTo(0.8);
         },
         initData: function () {
             const data = { nodes: [] };
@@ -1329,7 +1902,33 @@ export default {
                 }
                 data.nodes.push(node);
             })
+            this.labels.forEach(item => {
+                let node = {
+                    id: item.id,
+                    x: item.x,
+                    y: item.y,
+                    shape: item.shape,
+                    attrs: {
+                        label: {
+                            text: item.label,
+                        },
+                    },
+                    movable: false,
+                }
+                switch (item.shape) {
+                    case "form-text":
+                        node.attrs.value = {
+                            text: item.value,
+                        }
+                        break;
+                
+                    default:
+                        break;
+                }
+                data.nodes.push(node);
+            })
             this.graph.fromJSON(data);
+            this.graph.centerContent();
         },
         initX6: function () {
             // 注册自定义节点

src/views/WindSite/components/customNode.js

@@ -3576,6 +3576,222 @@ const registerHandcart11 = () => {
     registerRight();
 }
 
+// 标签文字
+const registerTagText = () => {
+    const width = 100;
+    const height = 24;
+    const shape = "tag-text";
+    nodeSize[shape] = {
+        width: width,
+        height: height
+    };
+    const option = {
+        width: width,
+        height: height,
+        markup: [
+            {
+                tagName: 'rect',
+                selector: 'rect',
+            },
+            {
+                tagName: 'text',
+                selector: 'label',
+            },
+        ],
+        attrs: {
+            rect: {
+                width: width,
+                height: height,
+                x: 0,
+                y: 0,
+                fill: "#5B5792",
+                stroke: "transparent",
+            },
+            label: {
+                fill: '#C9D0FE',
+                fontSize: 14,
+                refX: 50,
+                refY: 5,
+                "text-anchor": "middle"
+            },
+        },
+    };
+    Graph.registerNode(shape, option, true);
+}
+
+// 小标签文字
+const registerTagTexts = () => {
+    const width = 74;
+    const height = 24;
+    const shape = "tag-text-s";
+    nodeSize[shape] = {
+        width: width,
+        height: height
+    };
+    const option = {
+        width: width,
+        height: height,
+        markup: [
+            {
+                tagName: 'rect',
+                selector: 'rect',
+            },
+            {
+                tagName: 'text',
+                selector: 'label',
+            },
+        ],
+        attrs: {
+            rect: {
+                width: width,
+                height: height,
+                x: 0,
+                y: 0,
+                fill: "#5B5792",
+                stroke: "transparent",
+            },
+            label: {
+                fill: '#C9D0FE',
+                fontSize: 14,
+                refX: 37,
+                refY: 5,
+                "text-anchor": "middle"
+            },
+        },
+    };
+    Graph.registerNode(shape, option, true);
+}
+
+// 表单文字
+const registerFormText = () => {
+    const width = 150;
+    const height = 24;
+    const shape = "form-text";
+    nodeSize[shape] = {
+        width: width,
+        height: height
+    };
+    const option = {
+        width: width,
+        height: height,
+        markup: [
+            {
+                tagName: 'rect',
+                selector: 'rect',
+            },
+            {
+                tagName: 'text',
+                selector: 'label',
+            },
+            {
+                tagName: 'text',
+                selector: 'value',
+            },
+        ],
+        attrs: {
+            rect: {
+                width: width,
+                height: height,
+                x: 0,
+                y: 0,
+                fill: "#536268",
+                opacity: 0.2,
+                stroke: "transparent",
+            },
+            label: {
+                fill: '#6A7476',
+                fontSize: fontsize,
+                refX: 6,
+                refY: 6,
+                "text-anchor": "start"
+            },
+            value: {
+                fill: '#059C40',
+                fontSize: fontsize,
+                refX: 144,
+                refY: 6,
+                "text-anchor": "end"
+            },
+        },
+    };
+    Graph.registerNode(shape, option, true);
+}
+
+// label文字
+const registerLabelText = () => {
+    const width = 150;
+    const height = 24;
+    const shape = "label-text";
+    nodeSize[shape] = {
+        width: width,
+        height: height
+    };
+    const option = {
+        width: width,
+        height: height,
+        markup: [
+            {
+                tagName: 'text',
+                selector: 'label',
+            },
+        ],
+        attrs: {
+            label: {
+                fill: '#6A7476',
+                fontSize: fontsize,
+                refX: 0,
+                refY: 6,
+                "text-anchor": "start"
+            },
+        },
+    };
+    Graph.registerNode(shape, option, true);
+}
+
+// value文字
+const registerValueText = () => {
+    const width = 74;
+    const height = 24;
+    const shape = "value-text";
+    nodeSize[shape] = {
+        width: width,
+        height: height
+    };
+    const option = {
+        width: width,
+        height: height,
+        markup: [
+            {
+                tagName: 'rect',
+                selector: 'rect',
+            },
+            {
+                tagName: 'text',
+                selector: 'label',
+            },
+        ],
+        attrs: {
+            rect: {
+                width: width,
+                height: height,
+                x: 0,
+                y: 0,
+                fill: "#536268",
+                opacity: 0.2,
+                stroke: "transparent",
+            },
+            label: {
+                fill: '#059C40',
+                fontSize: fontsize,
+                refX: 37,
+                refY: 6,
+                "text-anchor": "middle"
+            },
+        },
+    };
+    Graph.registerNode(shape, option, true);
+}
+
 // 注册自定义节点
 const register = () => {
     registerRootNode();
@@ -3609,12 +3825,16 @@ const register = () => {
     registerHandcart10();
     registerHandcart11();
     registerEarthingDisconnectorTransverseYoBreak();
+    registerTagText();
+    registerFormText();
+    registerLabelText();
+    registerValueText();
+    registerTagTexts();
 }
 
-
 export default {
     register: register,
     nodeSize: nodeSize,
     weight: weight,
     fontsize: fontsize,
-}
+}

src/views/WindSite/pages/Home/light-matrix.vue

@@ -47,6 +47,8 @@ export default {
       } else if (this.list.length > 168) {
         this.$el.style.width = "1168px";
       }
+      let myevent = new Event("resize");
+      window.dispatchEvent(myevent);
     },
 
     // 页面跳转

src/views/layout/Menu.vue

@@ -171,6 +171,11 @@ export default {
                 // }
               ],
             },
+            {
+              text: "健康管理8",
+              icon: "svg-wind-site",
+              path: "/health/health8",
+            },
           ],
         },
         {

src/views/layout/login-page.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="login-panel">
+    <el-form class="mg-b-16">
+      <el-form-item class="mg-b-8">
+        <el-input v-model="username" placeholder="请输入登录名"></el-input>
+      </el-form-item>
+      <el-form-item class="mg-b-8">
+        <el-input v-model="password" placeholder="请输入密码" show-password></el-input>
+      </el-form-item>
+    </el-form>
+    <button style="width:100%;" class="btn" @click="Login">登陆</button>
+  </div>
+</template>
+<script>
+export default {
+  setup() {},
+  data() {
+    return {
+      username: "",
+      password: "",
+    };
+  },
+  emits: {
+    onLogin: null,
+  },
+  methods: {
+    Login() {
+      this.$emit("onLogin", {
+        username: this.username,
+        password: this.password,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="less">
+.login-panel {
+  width: 300px;
+  height: 200px;
+  position: absolute;
+  padding: 32px;
+  left: calc(50vw - 150px);
+  top: calc(50vh - 120px);
+  border: 1px solid @green;
+  border-radius: 8px;
+}
+</style>