提交

package.json

@@ -82,4 +82,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
+}

src/assets/styles/dialog.less

@@ -19,5 +19,65 @@
       padding: 16px 24px;
     }
   }
+}
+
+.el-overlay {
+  .el-message-box {
+    background: fade(#121d1c, 95);
+    border: 1px solid fade(@green, 50);
+    box-shadow: 0px 8px 17px 1px rgba(5, 187, 76, 0.3);
+  }
+  .el-message-box__header {
+    .el-message-box__title {
+      color: @gray;
+    }
+  }
+
+  .el-message-box__content {
+    color: @white;
+  }
+
+  .el-message-box__btns {
+    .el-button {
+      height: 30px;
+      flex: 0 0 auto;
+      background: transparent;
+      border: 1px solid @gray;
+      padding: 0 1.481vh;
+      color: @gray;
+      font-size: 1.296vh;
+      cursor: pointer;
 
+      &.el-button--primary {
+        border-color: @green;
+        color: @green;
+        background: fade(@green, 20);
+      }
+    }
+  }
+}
+
+.el-message {
+  &.el-message--info {
+    border-color: @gray;
+    background-color: fade(@gray, 20);
+    color: @gray;
+  }
+  &.el-message--success {
+    border-color: @green;
+    background-color: fade(@green, 20);
+    color: @green;
+  }
+
+  &.el-message--warning {
+    border-color: @yellow;
+    background-color: fade(@yellow, 20);
+    color: @yellow;
+  }
+
+  &.el-message--error {
+    border-color: @red;
+    background-color: fade(@red, 20);
+    color: @red;
+  }
 }

src/assets/styles/form.less

@@ -282,3 +282,22 @@ input[type="checkbox"] {
     color: @green;
   }
 }
+
+.el-form {
+  .el-form-item {
+    .el-form-item__label {
+      color: @gray-l;
+    }
+    .el-form-item__content {
+      .el-input {
+        .el-input__inner {
+          background: fade(#536268, 20);
+          border-color: fade(#536268, 20);
+          height: 33px;
+          line-height: 33px;
+          padding-left: 16px;
+        }
+      }
+    }
+  }
+}

src/components/chart/bar/list-bar-chart2.vue

@@ -70,6 +70,7 @@ export default {
     },
   },
   methods: {
+    resize() {},
     initChart(value, index) {
       var currColor = this.colors[index % 2];
       var $dom = document.getElementById(this.id + (index + 1));
@@ -279,7 +280,15 @@ export default {
         ],
       };
 
+      chart.clear();
       chart.setOption(option);
+
+      this.resize = function() {
+        chart.resize();
+      };
+
+      window.removeEventListener("resize", this.resize);
+      window.addEventListener("resize", this.resize);
     },
   },
   created() {
@@ -301,6 +310,9 @@ export default {
       });
     });
   },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
 };
 </script>
 

src/components/chart/bar/multiple-bar-chart.vue

@@ -184,7 +184,7 @@ export default {
             name: value,
             axisLabel: {
               formatter: "{value} ",
-              fontSize: 14,
+              fontSize: 12,
             },
             //分格线
             splitLine: {
@@ -200,9 +200,8 @@ export default {
             name: value,
             axisLabel: {
               formatter: "{value}",
-              fontSize: 14,
+              fontSize: 12,
             },
-
             //分格线
             splitLine: {
               show: false,
@@ -222,9 +221,6 @@ export default {
           result.push({
             name: value.title,
             type: "bar",
-            emphasis: {
-              focus: "series",
-            },
             yAxisIndex: value.yAxisIndex,
             data: value.value.map((t) => {
               return t.value;
@@ -236,6 +232,7 @@ export default {
     },
   },
   methods: {
+    resize() {},
     initChart() {
       let chart = echarts.init(this.$el);
 
@@ -246,7 +243,7 @@ export default {
           backgroundColor: "rgba(0,0,0,0.4)",
           textStyle: {
             color: "#fff",
-            fontSize: 14,
+            fontSize: 12,
           },
         },
         legend: {
@@ -276,7 +273,7 @@ export default {
               type: "shadow",
             },
             axisLabel: {
-              fontSize: 14,
+              fontSize: 12,
             },
           },
         ],
@@ -284,7 +281,14 @@ export default {
         series: this.series,
       };
 
+      chart.clear();
       chart.setOption(option);
+
+      this.resize = function() {
+        chart.resize();
+      };
+
+      window.addEventListener("resize", this.resize);
     },
   },
   created() {
@@ -304,6 +308,9 @@ export default {
       this.initChart();
     });
   },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
 };
 </script>
 

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

@@ -178,9 +178,6 @@ export default {
             show: false,
             position: "insideRight",
           },
-          emphasis: {
-            focus: "series",
-          },
           data: this.bardata.data[i],
         });
       }
@@ -193,9 +190,6 @@ export default {
           data: this.lineData,
           smooth: false, //平滑展示
           xAxisIndex: 1,
-          emphasis: {
-            focus: "series",
-          },
           lineStyle: {
             color: partten.getColor("green"),
           },

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

@@ -65,7 +65,6 @@ export default {
       chart: null,
     };
   },
-
   computed: {
     legend() {
       return this.bardata.legend;
@@ -179,9 +178,6 @@ export default {
             // color: partten.getColor("green"),
             color: "#323E6F",
           },
-          emphasis: {
-            focus: "series",
-          },
           itemStyle: {
             // color: partten.getColor("green"),
             color: "#323E6F",
@@ -201,9 +197,6 @@ export default {
             show: false,
             position: "insideRight",
           },
-          emphasis: {
-            focus: "series",
-          },
           data: this.bardata.data[i],
         });
       }

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

@@ -398,7 +398,7 @@ export default {
               formatter: "{value}",
               fontSize: util.vh(14),
               textStyle: {
-                color: "#333",
+                color: partten.getColor("gray"),
               },
             },
             axisLine: {

src/components/chart/pie/dash-pie-chart.vue

@@ -59,7 +59,9 @@ export default {
     },
   },
   methods: {
+    resize() {},
     initChart() {
+      let chart = echarts.init(this.$el);
       let option = {
         title: {
           show: true,
@@ -163,7 +165,7 @@ export default {
               width: util.vh(2), //指针粗细
               offsetCenter: ["0%", "-40%"],
             },
-            animationDuration: 1000,
+            animationDuration: 0,
           },
           // 刻度
           {
@@ -273,7 +275,15 @@ export default {
         ],
       };
 
-      this.chart.setOption(option);
+      chart.clear();
+      chart.setOption(option);
+
+      this.resize = function() {
+        chart.resize();
+      };
+
+      window.removeEventListener("resize", this.resize);
+      window.addEventListener("resize", this.resize);
     },
   },
   created() {
@@ -282,12 +292,14 @@ export default {
   mounted() {
     this.$el.style.width = this.width;
     this.$el.style.height = this.height;
-    this.chart = echarts.init(this.$el);
     this.initChart();
   },
   updated() {
     this.initChart();
   },
+  unmounted() {
+    window.removeEventListener("resize", this.resize);
+  },
 };
 </script>
 

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

@@ -36,7 +36,7 @@ export default {
             data: [
               {
                 value: [44200, 14200, 20000, 35000, 50000, 38000],
-                name: "NAME",
+                name: "风机一号",
               },
             ],
           },
@@ -81,6 +81,7 @@ export default {
   },
   methods: {
     initChart() {
+      let chart = echarts.init(this.$el);
       let maxValue = -1;
       this.value[0].data.forEach((item, index) => {
         item.value.forEach((value) => {
@@ -105,6 +106,9 @@ export default {
           bottom: 150,
           top: 150,
         },
+        tooltip: {
+          trigger: "item",
+        },
         radar: [
           // 最低层 80
           {
@@ -315,7 +319,7 @@ export default {
         series: this.series,
       };
 
-      this.chart.setOption(option);
+      chart.setOption(option);
     },
   },
   created() {
@@ -325,12 +329,13 @@ export default {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
-      this.chart = echarts.init(this.$el);
       this.initChart();
     });
   },
   updated() {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

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

@@ -66,6 +66,8 @@ export default {
   computed: {},
   methods: {
     initChart() {
+      let chart = echarts.init(this.$el);
+
       let maxValue = -1;
       this.value.data.forEach((item, index) => {
         item.value.forEach((value) => {
@@ -82,6 +84,7 @@ export default {
       this.value.indicator.forEach((item) => {
         indicator.push({ name: item, max: maxValue });
       });
+
       let option = {
         grid: {
           left: 0,
@@ -306,7 +309,7 @@ export default {
         ],
       };
 
-      this.chart.setOption(option);
+      chart.setOption(option);
     },
   },
   created() {
@@ -316,12 +319,13 @@ export default {
     this.$nextTick(() => {
       this.$el.style.width = this.width;
       this.$el.style.height = this.height;
-      this.chart = echarts.init(this.$el);
       this.initChart();
     });
   },
   updated() {
-    this.initChart();
+    this.$nextTick(() => {
+      this.initChart();
+    });
   },
 };
 </script>

src/components/coms/panel/panel.vue

@@ -69,11 +69,11 @@ export default {
 
   .panel-header {
     display: flex;
-    font-size: @fontsize-s;
+    font-size: 12px;
     padding-left: 1.185vh;
     background: rgba(255, 255, 255, 10%);
-    line-height: 2.593vh;
-    margin-bottom: 1.481vh;
+    line-height: 27px;
+    margin-bottom: 0.7407vh;
 
     .panel-title {
       color: fade(#fff, 75);
@@ -87,7 +87,7 @@ export default {
       flex: 0 0 auto;
       color: #ffffff4d;
       padding: 0 0.741vh;
-      font-size: @fontsize-s;
+      font-size: 12px;
       letter-spacing: 0.093vh;
     }
   }

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

@@ -0,0 +1,264 @@
+<template>
+  <table class="com-table">
+    <thead>
+      <tr>
+        <th @click="onSort(0)">排序</th>
+        <th @click="onSort(1)"></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 :class="{ light: hoverRow == row || hoverCol == 0, num: true }" @mouseenter="hover(row, col)" @mouseleave="leave()">
+            {{ index + 1 }}
+          </td>
+          <td :class="{ light: hoverRow == row || hoverCol == 1 }" @mouseenter="hover(row, col)" @mouseleave="leave()">
+            <input class="check" type="CheckBox" :key="index" :id="'check-' + index" :checked="row.checked ? row.checked : false" @change="onCheck(row)" />
+          </td>
+          <td v-for="(col, i) of data.column" :key="i" :class="{ light: hoverRow == row || hoverCol == col + 2, 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>
+      </tbody>
+      <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="data.total"> </el-pagination>
+    </el-scrollbar>
+  </table>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    /**
+             * {
+                    column: [{
+                        name: "风机名称",
+                        field: "name",
+                        type:'div',
+                        is_num: false, // 是否为数字
+                        is_light: false, // 是否高亮
+                        template:function(){ }
+                        click:function(){} //点击事件
+                        sortable:fasle // 排序
+                        // 新增用于在表格中使用动态三方组件
+                        type:'el-tag', // * 新增 用于传入三方组件名称 实现三方组件引入  component :is 方式实现
+                        props:{}, // * 新增 用户传入三方组件的 props 与type同时使用
+                    },{
+                        name: "冷却风温度",
+                        field: "lqf",
+                        is_num: true,
+                        is_light: false
+                    }],
+                    data: [{
+                        name: "1E01",
+                        lqf: 15.78,
+                        is_light: false
+                    }]
+                }
+             */
+    data: Object,
+    // hover 样式
+    showHover: {
+      type: Boolean,
+      default: true,
+    },
+    canScroll: {
+      type: Boolean,
+      default: true,
+    },
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    height: {
+      type: String,
+      default: "",
+    },
+  },
+  // 自定义事件
+  emits: {
+    // 分页事件
+    onPagging: null,
+    check: null,
+  },
+  // 数据
+  data() {
+    return {
+      hoverRow: -1,
+      hoverCol: -1,
+      sortCol: "",
+      sortType: "",
+      currentPage: 1,
+    };
+  },
+  computed: {
+    tableData() {
+      let that = this;
+      if (this.sortCol == "") {
+        return this.data.data;
+      } else {
+        let data = this.data.data;
+
+        data.sort((a, b) => {
+          let rev = 1;
+          if (that.sortType == "ASC") rev = 1;
+          else if (that.sortType == "DESC") rev = -1;
+
+          if (a[that.sortCol] > b[that.sortCol]) return rev * 1;
+          if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
+          return 0;
+        });
+        return data;
+      }
+    },
+    pageable() {
+      return this.pageSize != 0;
+    },
+    pages() {
+      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+      else return 0;
+    },
+    startRow() {
+      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+      else return 0;
+    },
+    endRow() {
+      if (this.pageable) return this.currentPage * this.pageSize;
+      else return this.data.data.length;
+    },
+  },
+  // 函数
+  methods: {
+    onClick(col, data) {
+      if (col.click) col.click(event, data);
+    },
+    onCheck(data) {
+      data.checked = event.target.checked;
+      this.$emit("check", { data: data, checked: event.target.checked });
+    },
+    onSort(col) {
+      if (col.sortable == true) {
+        this.sortCol = col.field;
+        switch (this.sortType) {
+          case "":
+            this.sortType = "DESC";
+            break;
+          case "DESC":
+            this.sortType = "ASC";
+            break;
+          case "ASC":
+            this.sortType = "";
+            break;
+        }
+      }
+    },
+    template(col, data) {
+      if (!col.template) return data;
+      else return col.template(data);
+    },
+    hover(row, col) {
+      if (this.showHover) {
+        this.hoverRow = row;
+        this.hoverCol = col;
+      }
+    },
+    leave() {
+      this.hoverRow = -1;
+      this.hoverCol = -1;
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.$emit("onPagging", { pageIndex: this.currentPage, pageSize: this.pageSize, start: this.startRow, end: this.endRow });
+    },
+  },
+  // 生命周期钩子
+  beforeCreate() {
+    // 创建前
+  },
+  created() {
+    // 创建后
+  },
+  beforeMount() {
+    // 渲染前
+  },
+  mounted() {
+    // 渲染后
+  },
+  beforeUpdate() {
+    // 数据更新前
+  },
+  updated() {
+    // 数据更新后
+  },
+};
+</script>
+
+<style lang="less">
+@titleGray: #9ca5a8;
+@rowGray: #606769;
+@darkBack: #536268;
+.com-table {
+  width: 100%;
+  border-collapse: collapse;
+
+  thead {
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      th {
+        background-color: fade(@darkBack, 20%);
+        padding: 1.481vh 0;
+        color: @titleGray;
+        font-weight: 400;
+        font-size: @fontsize-s;
+        position: sticky;
+        top: 0;
+        cursor: pointer;
+
+        &.light,
+        &.always-light {
+          color: @green;
+        }
+      }
+    }
+  }
+
+  tbody {
+    display: block;
+
+    tr {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      &:nth-child(2n) {
+        background-color: fade(@rowGray, 20%);
+      }
+
+      td {
+        padding: 0.556vh 0;
+        color: @rowGray;
+        text-align: center;
+        font-size: @fontsize-s;
+
+        &.light,
+        &.always-light {
+          color: @green !important;
+        }
+
+        &.num {
+          font-family: "Bicubik";
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>

src/components/coms/table/table.vue

@@ -6,24 +6,15 @@
       </tr>
     </thead>
     <el-scrollbar>
-      <tbody>
+      <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,
-            }"
-            v-html="template(col, row[col.field])"
-            @click="onClick(col, row)"
-            @mouseenter="hover(row, col)"
-            @mouseleave="leave()"
-          ></td>
+          <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()">
+            <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>
       </tbody>
     </el-scrollbar>
+    <el-pagination class="mg-t-8" v-if="pageable" @current-change="handleCurrentChange" :current-page="currentPage4" :page-size="pageSize" layout="total, prev, pager, next, jumper" :total="data.total"> </el-pagination>
   </table>
 </template>
 
@@ -40,11 +31,15 @@ export default {
                     column: [{
                         name: "风机名称",
                         field: "name",
+                        type:'div',
                         is_num: false, // 是否为数字
                         is_light: false, // 是否高亮
                         template:function(){ }
                         click:function(){} //点击事件
                         sortable:fasle // 排序
+                        // 新增用于在表格中使用动态三方组件
+                        type:'el-tag', // * 新增 用于传入三方组件名称 实现三方组件引入  component :is 方式实现
+                        props:{}, // * 新增 用户传入三方组件的 props 与type同时使用
                     },{
                         name: "冷却风温度",
                         field: "lqf",
@@ -55,7 +50,8 @@ export default {
                         name: "1E01",
                         lqf: 15.78,
                         is_light: false
-                    }]
+                    }],
+                    total:200
                 }
              */
     data: Object,
@@ -68,9 +64,20 @@ export default {
       type: Boolean,
       default: true,
     },
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    height: {
+      type: String,
+      default: "",
+    },
   },
   // 自定义事件
-  emits: {},
+  emits: {
+    // 分页事件
+    onPagging: null,
+  },
   // 数据
   data() {
     return {
@@ -78,6 +85,7 @@ export default {
       hoverCol: -1,
       sortCol: "",
       sortType: "",
+      currentPage: 1,
     };
   },
   computed: {
@@ -86,7 +94,7 @@ export default {
       if (this.sortCol == "") {
         return this.data.data;
       } else {
-        let data = JSON.parse(JSON.stringify(this.data.data));
+        let data = this.data.data;
 
         data.sort((a, b) => {
           let rev = 1;
@@ -97,10 +105,24 @@ export default {
           if (a[that.sortCol] < b[that.sortCol]) return rev * -1;
           return 0;
         });
-
         return data;
       }
     },
+    pageable() {
+      return this.pageSize != 0;
+    },
+    pages() {
+      if (this.pageable) return parseInt(this.data.total / this.pageSize) + 1;
+      else return 0;
+    },
+    startRow() {
+      if (this.pageable) return (this.currentPage - 1) * this.pageSize;
+      else return 0;
+    },
+    endRow() {
+      if (this.pageable) return this.currentPage * this.pageSize;
+      else return this.data.data.length;
+    },
   },
   // 函数
   methods: {
@@ -147,6 +169,10 @@ export default {
       this.hoverRow = -1;
       this.hoverCol = -1;
     },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.$emit("onPagging", { pageIndex: this.currentPage, pageSize: this.pageSize, start: this.startRow, end: this.endRow });
+    },
   },
   // 生命周期钩子
   beforeCreate() {
@@ -161,12 +187,8 @@ export default {
   mounted() {
     // 渲染后
   },
-  beforeUpdate() {
-    // 数据更新前
-  },
-  updated() {
-    // 数据更新后
-  },
+  beforeUpdate() {},
+  updated() {},
 };
 </script>
 
@@ -232,5 +254,39 @@ export default {
       }
     }
   }
+
+  .el-pagination {
+    color: @gray;
+    .el-pagination__total {
+      color: @gray;
+    }
+
+    button {
+      &.btn-next,
+      &.btn-prev {
+        background: center center no-repeat fade(@gray, 20);
+        color: @gray-l;
+      }
+      &:disabled {
+        color: @gray-l;
+        background-color: fade(@gray, 20);
+        cursor: not-allowed;
+      }
+    }
+
+    .el-pager li {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      &.active {
+        color: @green;
+      }
+    }
+
+    .el-input__inner {
+      color: @gray-l;
+      background: fade(@gray, 20);
+      border: 1px solid fade(@gray, 20);
+    }
+  }
 }
 </style>

src/components/coms/tabs/tab.vue

@@ -55,6 +55,7 @@ export default {
   font-size: @fontsize;
   .tab-item {
     padding: 0.37vh 1.852vh;
+    cursor: pointer;
 
     &.active {
       color: @green;

src/views/Decision/Decision1.vue

@@ -72,9 +72,11 @@
 			</el-col>
 			<el-col :span="12" class="pd-l-8">
 				<panel :title="'项目列表'" :showLine="false">
-					<div class="project-table">
-						<Table :data="tableData"></Table>
-					</div>
+                    <div class="project-table">
+						<!-- 分页Table -->
+                        <Table :data="tableData" :pageSize="20" @onPagging="onChangePage" :height="'calc(100vh - 32vh)'"></Table>
+                        <!-- <Table :data="tableData"></Table> -->
+                    </div>
 				</panel>
 			</el-col>
 		</el-row>
@@ -355,7 +357,7 @@
 								legend: legend,
 								data: arr1
 							};
-				
+
 						}
 						that.tableData.data = data2;
 					}
@@ -363,7 +365,10 @@
 			},
 			mxClick() {
 				this.$router.push("/decision/decision1Mx")
-			}
+			},
+     onChangePage(params) {
+      console.log(params);      
+    },
 		}
 	};
 </script>

src/views/HealthControl/Health1.vue

@@ -190,9 +190,12 @@
     </div>
     <div v-if="tabIndex == 2">
       <button class="btn" @click="dialogVisible = true">点击弹窗</button>
+      <button class="btn" @click="dialog2Visible = true">消缺跟踪弹窗</button>
       <el-dialog title="日信息对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
         <dayinfo />
       </el-dialog>
+      <button class="btn" @click="showMessage">消息提醒</button>
+      <button class="btn" @click="showComfirm">操作确认</button>
     </div>
     <div v-if="tabIndex == 3">
       tab4
@@ -208,7 +211,7 @@ import Dayinfo from "./dayinfo.vue";
 import Health2 from "./Health2.vue";
 export default {
   setup() {},
-  components: { SvgIcon, Panel, VertivalBarLineChart, Health2, Dayinfo },
+  components: { SvgIcon, Panel, VertivalBarLineChart, Health2, Dayinfo},
   data() {
     return {
       tabIndex: 0,
@@ -219,6 +222,52 @@ export default {
     tabSelect(state) {
       this.tabIndex = state;
     },
+    showMessage() {
+      this.$alert("这是一段内容", "标题名称", {
+        confirmButtonText: "确定",
+        callback: (action) => {
+          this.$message({
+            type: "info",
+            message: `action: ${action}`,
+          });
+
+          // this.$message({
+          //   type: "warning",
+          //   message: `action: ${action}`,
+          // });
+
+          // this.$message({
+          //   type: "success",
+          //   message: `action: ${action}`,
+          // });
+
+          // this.$message({
+          //   type: "error",
+          //   message: `action: ${action}`,
+          // });
+        },
+      });
+    },
+    showComfirm() {
+      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        center: true,
+      })
+        .then(() => {
+          this.$message({
+            type: "success",
+            message: "删除成功!",
+          });
+        })
+        .catch(() => {
+          this.$message({
+            type: "info",
+            message: "已取消删除",
+          });
+        });
+    },
   },
 };
 </script>
@@ -250,6 +299,7 @@ export default {
 
   .power-info {
     display: flex;
+
     .info-tab {
       flex: 0 0 156px;
       display: flex;
@@ -273,6 +323,7 @@ export default {
 
         i {
           margin: 0 1.4815vh;
+
           svg use {
             fill: @gray-l;
           }
@@ -403,6 +454,7 @@ export default {
           font-size: @fontsize-s;
           color: @font-color;
           line-height: 1.5;
+
           p {
             margin: 0;
             line-height: 2;

src/views/HealthControl/Health7.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="health-7">
+    <div class="power-info mg-b-16">
+      <div class="info-tab">
+        <div class="tab active">
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-24-houre'" />
+          </i>
+          <span> 24小时健康趋势 </span>
+        </div>
+        <div class="tab">
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-h-day'" />
+          </i>
+          <span> 7日健康趋势 </span>
+        </div>
+        <div class="tab">
+          <i class="svg-icon svg-icon svg-icon-sm">
+            <svg-icon :svgid="'svg-h-month'" />
+          </i>
+          <span>30日健康趋势</span>
+        </div>
+        <div class="empty"></div>
+        <div class="tab">
+          <span>全部风场健康趋势</span>
+        </div>
+      </div>
+      <div class="info-chart">
+        <panel class="info-chart-panel" :title="'损失电量分析'">
+          <vertival-bar-line-chart :height="'310px'" />
+        </panel>
+      </div>
+    </div>
+    <div class="fc-info mg-b-16">
+      <panel :title="'健康走势图'" :showLine="false">
+        <normal-line-chart :height="'150px'" />
+      </panel>
+    </div>
+    <div class="data-list">
+      <Table :data="tableData" :canScroll="false" />
+    </div>
+  </div>
+</template>
+
+<script>
+import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
+import NormalLineChart from "../../components/chart/line/normal-line-chart.vue";
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
+import Panel from "../../components/coms/panel/panel.vue";
+import Table from "../../components/coms/table/table.vue";
+export default {
+  setup() {},
+  components: { SvgIcon, Panel, VertivalBarLineChart, NormalLineChart, Table },
+  data() {
+    return {
+      tableData: {
+        column: [
+          {
+            name: "部件名称",
+            field: "name",
+          },
+          {
+            name: "备件数量",
+            field: "v1",
+            is_num: true,
+          },
+          {
+            name: "平均间隔时间(h)",
+            field: "v2",
+            is_num: true,
+          },
+          {
+            name: "平均消耗时间(h)",
+            field: "v3",
+            is_num: true,
+          },
+          {
+            name: "预计作业时间(小时)",
+            field: "v4",
+            is_num: true,
+          },
+          {
+            name: "损失电量统计",
+            field: "v5",
+            is_num: true,
+          },
+          {
+            name: "当前状态",
+            field: "v6",
+            template: function(data) {
+              if (data == 1) return "<div class='dot green'></div>";
+              else return "<div class='dot yellow'></div>";
+            },
+          },
+        ],
+        data: [
+          {
+            name: "齿轮箱",
+            v1: 15.78,
+            v2: 12,
+            v3: 2.3,
+            v4: 231.23,
+            v5: 123.23,
+            v6: 1,
+          },
+          {
+            name: "齿轮箱",
+            v1: 15.78,
+            v2: 12,
+            v3: 2.3,
+            v4: 231.23,
+            v5: 123.23,
+            v6: 1,
+          },
+          {
+            name: "齿轮箱",
+            v1: 15.78,
+            v2: 12,
+            v3: 2.3,
+            v4: 231.23,
+            v5: 123.23,
+            v6: 1,
+          },
+          {
+            name: "齿轮箱",
+            v1: 15.78,
+            v2: 12,
+            v3: 2.3,
+            v4: 231.23,
+            v5: 123.23,
+            v6: 1,
+          },
+          {
+            name: "齿轮箱",
+            v1: 15.78,
+            v2: 12,
+            v3: 2.3,
+            v4: 231.23,
+            v5: 123.23,
+            v6: 1,
+          },
+          {
+            name: "齿轮箱",
+            v1: 15.78,
+            v2: 12,
+            v3: 2.3,
+            v4: 231.23,
+            v5: 123.23,
+            v6: 2,
+          },
+          {
+            name: "齿轮箱",
+            v1: 15.78,
+            v2: 12,
+            v3: 2.3,
+            v4: 231.23,
+            v5: 123.23,
+            v6: 2,
+          },
+          {
+            name: "齿轮箱",
+            v1: 15.78,
+            v2: 12,
+            v3: 2.3,
+            v4: 231.23,
+            v5: 123.23,
+            v6: 2,
+          },
+        ],
+      },
+    };
+  },
+  created() {},
+};
+</script>
+
+<style lang="less">
+.health-7 {
+  // 电量健康情况
+  .power-info {
+    display: flex;
+    .info-tab {
+      flex: 0 0 156px;
+      display: flex;
+      flex-direction: column;
+      height: 350px;
+      margin-right: 1.4815vh;
+
+      .tab {
+        position: relative;
+        flex: 0 0 auto;
+        text-align: center;
+        line-height: 33px;
+        margin-right: 8px;
+        color: @gray-l;
+        font-size: 12px;
+        background: fade(@gray, 20);
+        border: 1px solid fade(@gray, 20);
+
+        display: flex;
+        align-items: center;
+
+        i {
+          margin: 0 1.4815vh;
+          svg use {
+            fill: @gray-l;
+          }
+        }
+
+        &:hover,
+        &.active {
+          background: fade(@green, 20);
+          border: 1px solid @green;
+          color: @green;
+          cursor: pointer;
+          i {
+            svg use {
+              fill: @green;
+            }
+          }
+        }
+
+        &.active::after {
+          box-sizing: content-box;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          right: -19px;
+          padding: 0;
+          border-bottom: 9px solid @green;
+          border-top: 9px solid transparent;
+          border-left: 9px solid transparent;
+          border-right: 9px solid transparent;
+          display: block;
+          content: "";
+          z-index: 10;
+          transform: rotate(90deg);
+        }
+
+        &.active::before {
+          box-sizing: content-box;
+          width: 0px;
+          height: 0px;
+          position: absolute;
+          right: -17px;
+          padding: 0;
+          border-bottom: 9px solid #063319;
+          border-top: 9px solid transparent;
+          border-left: 9px solid transparent;
+          border-right: 9px solid transparent;
+          display: block;
+          content: "";
+          z-index: 12;
+          transform: rotate(90deg);
+        }
+
+        & + .tab {
+          margin-top: 0.7407vh;
+        }
+
+        &:last-child {
+          text-align: center;
+          justify-content: center;
+        }
+      }
+
+      .empty {
+        flex: 1 0 auto;
+      }
+    }
+
+    .info-chart {
+      flex: 1 0 auto;
+    }
+  }
+
+  .data-list {
+    .dot {
+      width: 12px;
+      height: 12px;
+      margin: auto;
+
+      &.green {
+        background: @green;
+      }
+
+      &.yellow {
+        background: @yellow;
+      }
+    }
+  }
+}
+</style>

src/views/HealthControl/track.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="track-info">
+    <div class="form-info">
+      <div class="work-flow"></div>
+      <div class="form-body">
+        <el-form ref="form" :model="form" label-width="80px">
+          <el-row>
+            <el-col :span="12">
+              <el-form-item label="风场：">
+                <el-input v-model="form.name"></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>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="风场：">
+                <el-input v-model="form.name"></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>
+            </el-col>
+          </el-row>
+        </el-form>
+      </div>
+    </div>
+    <div class="evaluate"></div>
+    <div class="tabs"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  data() {
+    return {
+      form: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+      },
+    };
+  },
+};
+</script>
+
+<style lang="less">
+.track-info {
+  display: flex;
+  .form-info {
+    flex: 0 0 720px;
+    .work-flow {
+      height: 132px;
+      width: 100%;
+      background: fade(@gray, 20);
+      margin-bottom: 8px;
+    }
+  }
+
+  .evaluate {
+    flex: 0 0 358px;
+  }
+
+  .tabs {
+    flex: 0 0 220px;
+  }
+}
+</style>

src/views/Home/Home.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="home">
-    <Row type="flex">
-      <Col :span="6">
-      <Row type="flex">
+    <Row type="flex" style="height:55vh">
+      <Col :span="6" class="top-left-panel">
+      <Row type="flex" class="weather">
         <Col :span="24">
         <com-panel :title="tqmap.name || 'yc'" :sub-title="nowTime + ' 实况'" icon="fa fa-map-marker">
           <weather :data="tqmap" />
         </com-panel>
         </Col>
       </Row>
-      <Row type="flex">
+      <Row type="flex"  class="plan">
         <Col :span="24">
         <com-panel title="预测电量" sub-title="（单位：万KWh）">
-            <list-bar-chart-2 :list="ForecastPower" height="16.6667vh" />
+            <list-bar-chart-2 :list="ForecastPower" height="100%" />
         </com-panel>
         </Col>
       </Row>
-      <Row type="flex">
+      <Row type="flex"  class="power">
         <Col :span="24">
         <com-panel title="功率负荷" sub-title="（单位：万KW）">
           <power-review :data="powerData" :id="wpId" @chartClick="showPowerChart" />
@@ -27,7 +27,7 @@
       <Col :span="12">
       <Map :wpId="wpId" :day="String(jczbmap.aqts || '---')" :data="fcmap" @mapClick="changeShowType"></Map>
       </Col>
-      <Col :span="6">
+      <Col :span="6" class="top-right-panel">
         <Row type="flex">
           <Col :span="24">
             <com-panel title="电量分析" sub-title="（单位：万KWh）">
@@ -44,7 +44,7 @@
         </Row>
       </Col>
     </Row>
-    <Row type="flex">
+    <Row type="flex" style="height:calc(40vh - 208px);">
       <Col :span="12">
         <toolbar-panel title="日发电量">
           <template v-slot:tools>
@@ -69,7 +69,7 @@
           </template>
           <template v-slot:default>
             <!-- 日发电量 -->
-            <multiple-bar-chart :list="DayPower.value" :units="DayPower.units" height="12.963vh" :showLegend="true" @click="showDoneChart({ data:DayPower, dialogTitle:'日发电量', dialogType: 'doneLineChart' })" />
+            <multiple-bar-chart :list="DayPower.value" :units="DayPower.units" height="100%" :showLegend="true" @click="showDoneChart({ data:DayPower, dialogTitle:'日发电量', dialogType: 'doneLineChart' })" />
           </template>
         </toolbar-panel>
       </Col>
@@ -94,14 +94,14 @@
           </div>
         </template>
         <template v-slot:default>
-          <multiple-line-chart :list="Powertrend.value" :units="Powertrend.units" height="12.963vh" @click="showPowerChart({ data:Powertrend, dialogTitle:'72小时功率趋势图', dialogType: 'powerLineChart' })" />
+          <multiple-line-chart :list="Powertrend.value" :units="Powertrend.units" height="100%" @click="showPowerChart({ data:Powertrend, dialogTitle:'72小时功率趋势图', dialogType: 'powerLineChart' })" />
         </template>
       </toolbar-panel>
       </Col>
     </Row>
     <Row type="flex">
       <!-- 下方 table -->
-      <Col :span="16">
+      <Col :span="16" class="table-card-panel">
       <row>
         <Col>
         <com-panel>
@@ -776,128 +776,172 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
-.grid-content {
-  background: #333;
-  height: 1.111vh;
-}
-
-.table-card {
-  background: rgba(255, 255, 255, 0.1);
-  border-collapse: collapse;
-  width: 100%;
-
-  .curP{
-    cursor: pointer;
-  }
-
-  tr {
-    font-size: @fontsize-s;
-    td {
-      border: 0.093vh solid @darkgray;
-      padding: 0.556vh 0.741vh;
-      &.text {
+<style lang="less">
+    .home {
+      .grid-content {
+        background: #333;
+        height: 1.111vh;
       }
-
-      &.value {
-        text-align: right;
-        font-family: @font-family-num;
+      .table-card-panel {
+        .col + .col {
+          margin-left: 8px;
+        }
       }
+      .table-card {
+        background: rgba(255, 255, 255, 0.1);
+        border-collapse: collapse;
+        width: 100%;
 
-      &.unit {
+      .curP{
+        cursor: pointer;
       }
-    }
-  }
-}
-
-.tools {
-  display: flex;
 
-  .tool-block {
-    display: flex;
-    align-items: center;
-    margin-left: 0.741vh;
-
-    .legend {
-      flex: auto;
-      width: 0.741vh;
-      height: 0.741vh;
-      margin-right: 0.741vh;
-
-      &.long {
-        width: 2.963vh;
-        height: 0.37vh;
-      }
-    }
-
-    .legend-text {
-      color: #ffffff4d;
-    }
-  }
-}
-
-.situation {
-  width: 100%;
-  height: 100%;
-  .situation-body {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    height: 100%;
-
-    .situation-item {
-      display: flex;
-      align-content: center;
-      flex: 1 1 auto;
-      align-items: center;
-
-      .icon {
-        svg {
-          width: 4.167vh;
-          height: 4.167vh;
+      tr {
+        font-size: 12px;
+          td {
+            border: 0.093vh solid @darkgray;
+            line-height: 27px;
+            padding: 0 4px;
+            &.text {
+            }
+
+            &.value {
+              text-align: right;
+              font-family: @font-family-num;
+            }
+
+            &.unit {
+            }
+          }
         }
       }
 
-      &.fengji {
-        flex: 0 1 7.99vw;
+      .tools {
+        display: flex;
 
-        .info .value {
-          font-size: 1.852vh;
+        .tool-block {
+          display: flex;
+          align-items: center;
+          margin-left: 0.741vh;
+
+          .legend {
+            flex: auto;
+            width: 0.741vh;
+            height: 0.741vh;
+            margin-right: 0.741vh;
+
+            &.long {
+              width: 2.963vh;
+              height: 0.37vh;
+            }
+          }
+
+          .legend-text {
+            color: #ffffff4d;
+          }
         }
       }
 
-      .fengji-icon {
-        padding: 1.111vh;
-        border-radius: 50%;
-        box-shadow: inset 1.5px -1px 1px 0px @green;
+      .situation {
+        width: 100%;
+        height: 100%;
+        .situation-body {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          height: 100%;
+
+          .situation-item {
+            display: flex;
+            align-content: center;
+            flex: 1 1 auto;
+            align-items: center;
+
+            .icon {
+              svg {
+                width: 4.167vh;
+                height: 4.167vh;
+              }
+            }
+
+            &.fengji {
+              flex: 0 1 7.99vw;
+
+              .info .value {
+                font-size: 24px;
+              }
+            }
+
+            .fengji-icon {
+              padding: 1.111vh;
+              border-radius: 50%;
+              box-shadow: inset 1.5px -1px 1px 0px @green;
+
+              svg {
+                width: 2.593vh;
+                height: 2.593vh;
+              }
+            }
+
+            .info {
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              margin-left: 0.741vh;
+
+              .title {
+                font-size: 12px;
+                font-weight: bold;
+                margin-bottom: 0.7407vh;
+              }
+
+              .text {
+                display: inline-block;
+                width: 64px;
+                text-align: left;
+              }
+
+              .value {
+                text-align: right;
+                font-size: 12px;
+              }
+            }
+          }
+        }
+      }
+      .com-panel {
+        height: 100%;
 
-        svg {
-          width: 2.593vh;
-          height: 2.593vh;
+        .panel-body {
+          height: calc(100% - 32px);
         }
       }
 
-      .info {
+      .top-left-panel {
         display: flex;
         flex-direction: column;
-        justify-content: center;
-        margin-left: 0.741vh;
+        justify-content: space-between;
 
-        .title {
-          font-size: @fontsize;
-          margin-bottom: 0.741vh;
+        .row {
+          flex: 0 0 auto;
         }
 
-        .text {
-          margin-right: 0.741vh;
-        }
+        .plan {
+          flex: 1 0 auto;
+          .com-panel {
+            height: 100%;
 
-        .value {
-          text-align: right;
-          font-size: @fontsize-s;
+            .panel-body {
+              height: calc(100% - 32px);
+            }
+          }
         }
       }
+
+      .top-right-panel {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
     }
-  }
-}
 </style>

src/views/Home/components/coulometric-analysis.vue

@@ -9,16 +9,8 @@
           <span class="value">{{ AddElectricity }}</span>
         </div>
         <percent-card :value="PromotionRate" color="green" title="提升率" />
-        <card-1
-          class="increase-info"
-          title="及时并网增发电量"
-          :value="IncreasePower"
-        />
-        <card-1
-          class="increase-info"
-          title="主动维护降低损失电量"
-          :value="Maintenance"
-        />
+        <card-1 class="increase-info" title="及时并网增发电量" :value="IncreasePower" />
+        <card-1 class="increase-info" title="主动维护降低损失电量" :value="Maintenance" />
       </Col>
       <Col :span="12">
         <div class="coulometric-info">
@@ -28,20 +20,10 @@
         </div>
         <percent-card :value="ReductionRate" color="yellow" title="" />
         <div>
-          <card-1
-            class="increase-info"
-            title="因偏航对风超出范围"
-            :value="OutRange"
-            :isIncrease="false"
-          />
+          <card-1 class="increase-info" title="因偏航对风超出范围" :value="OutRange" :isIncrease="false" />
         </div>
         <div>
-          <card-1
-            class="increase-info"
-            title="降出力运行"
-            :value="ReducedOutput"
-            :isIncrease="false"
-          />
+          <card-1 class="increase-info" title="降出力运行" :value="ReducedOutput" :isIncrease="false" />
         </div>
       </Col>
     </row>

src/views/Home/components/map.vue

@@ -83,7 +83,7 @@
     </div>
     <div class="map-img">
       <!-- 宁夏地图总览 -->
-      <SvgMapNX v-if="mapName === 'nx'" :show="showType" :data="sourceMap" @clickLabel="clickLabel"></SvgMapNX>
+      <SvgMapNX v-show="mapName === 'nx'" :show="showType" :data="sourceMap" @clickLabel="clickLabel"></SvgMapNX>
       <!-- 麻黄山风电场 -->
       <MHSFDC v-if="mapName === 'MHS_FDC'" :data="sourceMap" @clickFj="clickFj"></MHSFDC>
     </div>
@@ -239,6 +239,9 @@ export default {
 
   .tab-box {
     margin: 1.852vh 2.778vh;
+    display: inline-block;
+    z-index: 2;
+    position: relative;
 
     .tab-item {
       display: flex;
@@ -313,9 +316,10 @@ export default {
   }
 
   .map-img {
-    width: calc(100% - 14.815vh);
+    // width: calc(100% - 14.815vh);
+    width: 100%;
     height: calc(100% - 14.815vh);
-    margin: 7.407vh;
+    margin: 7.407vh 0;
     position: absolute;
     z-index: 1;
     top: 0;

src/views/Home/components/power-review.vue

@@ -3,7 +3,7 @@
     <Row type="flex" justify="center" :align="'middle'">
       <!-- 功率复核 PowerLoad -->
       <Col v-for="item in PowerLoad" :key="item" :span="6">
-        <dash-pie-chart :title="item.title" :value="item.value" :max="item.max" height="9.722vh" @click="openDialog(item.dialogTitle, item.subUrl, item.targetName, item.dialogType)" />
+        <dash-pie-chart :title="item.title" :value="item.value" :max="item.max" height="11.1111vh" @click="openDialog(item.dialogTitle, item.subUrl, item.targetName, item.dialogType)" />
       </Col>
     </Row>
   </div>

src/views/Home/components/weather.vue

@@ -104,8 +104,8 @@ export default {
     margin-bottom: 1.481vh;
 
     .weather-icon {
-      width: 4.444vh;
-      height: 4.444vh;
+      width: 5.5556vh;
+      height: 5.5556vh;
       margin: 0 1.481vh;
     }
     .temperature {
@@ -126,7 +126,7 @@ export default {
     }
 
     .value {
-      margin: 0.37vh 0;
+      margin: 0.9259vh 0;
     }
 
     .other-icon {

src/views/LightMatrix3/LightMatrix3.vue

@@ -793,7 +793,7 @@ export default {
             margin-top: 2px;
 
             .num {
-              width: 100%;
+              width: 72px;
               font-size: 12px;
               text-align: left;
               padding-right: 0.278vh;

src/views/WindSite/components/bsx6.vue

@@ -76,6 +76,18 @@ export default {
                                 },
                                 {
                                     id: "tree1_sub1_item7",
+                                    shape: "grounding-capacitance-transverse",
+                                    label: "",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree1_sub1_item8",
+                                    shape: "voltage3-transformer",
+                                    label: "",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree1_sub1_item9",
                                     shape: "arrow-vertical",
                                     direction: "left",
                                     height: 65,
@@ -130,6 +142,42 @@ export default {
                                     label: "101-0",
                                     direction: "left",
                                 },
+                                {
+                                    id: "tree1_sub2_item8",
+                                    shape: "three-phase-transformer",
+                                    label: "",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree1_sub2_item9",
+                                    shape: "earthing-disconnector-transverse-y-break",
+                                    label: "301-0",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub2_item10",
+                                    shape: "main-transformer",
+                                    label: "",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree1_sub2_item11",
+                                    shape: "main-transformer1",
+                                    label: "011-0",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree1_sub2_item12",
+                                    shape: "main-transformer2",
+                                    label: "",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree1_sub2_item13",
+                                    shape: "main-transformer3",
+                                    label: "301",
+                                    direction: "left",
+                                },
                             ],
                         },
                         {
@@ -143,6 +191,30 @@ export default {
                                     label: "11-9",
                                     direction: "left",
                                 },
+                                {
+                                    id: "tree1_sub3_item2",
+                                    shape: "grounding-capacitance-transverse",
+                                    label: "",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree1_sub3_item3",
+                                    shape: "earthing-disconnector-transverse2-break",
+                                    label: "11-09",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub3_item4",
+                                    shape: "voltage5-transformer",
+                                    label: "",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree1_sub3_item5",
+                                    shape: "grounding-resistance-vertical",
+                                    label: "",
+                                    direction: "left",
+                                },
                             ],
                         },
                         {
@@ -153,7 +225,7 @@ export default {
                                 {
                                     id: "tree1_sub4_item1",
                                     shape: "earthing-disconnector-transverse-break",
-                                    label: "11-0",
+                                    label: "12-0",
                                     direction: "right",
                                 },
                                 {
@@ -177,7 +249,7 @@ export default {
                                 {
                                     id: "tree1_sub4_item5",
                                     shape: "earthing-disconnector-transverse-break",
-                                    label: "102-03",
+                                    label: "102-3",
                                     direction: "right",
                                 },
                                 {
@@ -192,6 +264,42 @@ export default {
                                     label: "102-0",
                                     direction: "left",
                                 },
+                                {
+                                    id: "tree1_sub4_item8",
+                                    shape: "three-phase-transformer",
+                                    label: "",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree1_sub4_item9",
+                                    shape: "earthing-disconnector-transverse-yo-break",
+                                    label: "301-0",
+                                    direction: "right",
+                                },
+                                {
+                                    id: "tree1_sub4_item10",
+                                    shape: "main-transformer",
+                                    label: "",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree1_sub4_item11",
+                                    shape: "main-transformer1",
+                                    label: "012-0",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree1_sub4_item12",
+                                    shape: "main-transformer2",
+                                    label: "",
+                                    direction: "left",
+                                },
+                                {
+                                    id: "tree1_sub4_item13",
+                                    shape: "main-transformer3",
+                                    label: "302",
+                                    direction: "left",
+                                },
                             ],
                         },
                     ],
@@ -416,7 +524,7 @@ export default {
                                     shape: "line-vertical",
                                     label: "",
                                     direction: "left",
-                                    height: 177,
+                                    height: 112,
                                     fill: "#cbaa07",
                                 },
                             ],
@@ -659,7 +767,7 @@ export default {
                                     shape: "line-vertical",
                                     label: "",
                                     direction: "left",
-                                    height: 177,
+                                    height: 127,
                                     fill: "#cbaa07",
                                 },
                             ],
@@ -667,6 +775,435 @@ export default {
                     ],
                 },
             ],
+            data: [{
+                id: "111-01",
+                x: 818,
+                y: 227,
+                type: "switch",
+                state: 0,
+                direction: "right"
+            },{
+                id: "111-03",
+                x: 818,
+                y: 182,
+                type: "switch",
+                state: 0,
+                direction: "right"
+            },{
+                id: "111-0",
+                x: 918,
+                y: 137,
+                type: "switch",
+                state: 0,
+                direction: "left"
+            },{
+                id: "111-3",
+                x: 867,
+                y: 175,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "111",
+                x: 867,
+                y: 220,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "111-1",
+                x: 867,
+                y: 265,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "11-0",
+                x: 830,
+                y: 287,
+                type: "switch",
+                state: 0,
+                direction: "left"
+            },{
+                id: "101-01",
+                x: 730,
+                y: 332,
+                type: "switch",
+                state: 0,
+                direction: "right"
+            },{
+                id: "101-0",
+                x: 730,
+                y: 422,
+                type: "switch",
+                state: 0,
+                direction: "right"
+            },{
+                id: "101-03",
+                x: 830,
+                y: 377,
+                type: "switch",
+                state: 0,
+                direction: "left"
+            },{
+                id: "301-0",
+                x: 830,
+                y: 487,
+                type: "switch",
+                state: 0,
+                direction: "left"
+            },{
+                id: "011-0",
+                x: 702,
+                y: 497,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "101-1",
+                x: 778,
+                y: 323,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "101",
+                x: 778,
+                y: 368,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "101-3",
+                x: 778,
+                y: 413,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "12-0",
+                x: 1452, // 830
+                y: 287,
+                type: "switch",
+                state: 0,
+                direction: "left"
+            },{
+                id: "102-01",
+                x: 1352,
+                y: 332,
+                type: "switch",
+                state: 0,
+                direction: "right"
+            },{
+                id: "102-0",
+                x: 1352,
+                y: 422,
+                type: "switch",
+                state: 0,
+                direction: "right"
+            },{
+                id: "102-03",
+                x: 1452,
+                y: 377,
+                type: "switch",
+                state: 0,
+                direction: "left"
+            },{
+                id: "012-0",
+                x: 1323,
+                y: 497,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "102-1",
+                x: 1399,
+                y: 323,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "102",
+                x: 1399,
+                y: 368,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "102-3",
+                x: 1399,
+                y: 413,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "11-9",
+                x: 1013,
+                y: 310,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "11-09",
+                x: 1063,
+                y: 318,
+                type: "switch",
+                state: 0,
+                direction: "left"
+            },{
+                id: "301",
+                x: 753,
+                y: 447,
+                type: "handcart",
+                state1: 0,
+                state2: 0,
+                direction: "left"
+            },{
+                id: "302",
+                x: 1374,
+                y: 447,
+                type: "handcart",
+                state1: 0,
+                state2: 1,
+                direction: "left"
+            },{
+                id: "318",
+                x: 274,
+                y: 610,
+                type: "handcart",
+                state1: 1,
+                state2: 0,
+                direction: "left"
+            },{
+                id: "317",
+                x: 411,
+                y: 610,
+                type: "handcart",
+                state1: 1,
+                state2: 1,
+                direction: "left"
+            },{
+                id: "316",
+                x: 503,
+                y: 610,
+                type: "handcart",
+                state1: 0,
+                state2: 0,
+                direction: "left"
+            },{
+                id: "315",
+                x: 601,
+                y: 610,
+                type: "handcart",
+                state1: 0,
+                state2: 1,
+                direction: "left"
+            },{
+                id: "314",
+                x: 685,
+                y: 610,
+                type: "handcart",
+                state1: 1,
+                state2: 0,
+                direction: "left"
+            },{
+                id: "31-9",
+                x: 778,
+                y: 610,
+                type: "handcart",
+                state1: 1,
+                state2: 1,
+                direction: "left"
+            },{
+                id: "313",
+                x: 874,
+                y: 610,
+                type: "handcart",
+                state1: 0,
+                state2: 0,
+                direction: "left"
+            },{
+                id: "312",
+                x: 966,
+                y: 610,
+                type: "handcart",
+                state1: 0,
+                state2: 1,
+                direction: "left"
+            },{
+                id: "311",
+                x: 1060,
+                y: 610,
+                type: "handcart",
+                state1: 1,
+                state2: 0,
+                direction: "left"
+            },{
+                id: "323",
+                x: 1193,
+                y: 610,
+                type: "handcart",
+                state1: 1,
+                state2: 1,
+                direction: "left"
+            },{
+                id: "322",
+                x: 1282,
+                y: 610,
+                type: "handcart",
+                state1: 0,
+                state2: 0,
+                direction: "left"
+            },{
+                id: "321",
+                x: 1444,
+                y: 610,
+                type: "handcart",
+                state1: 0,
+                state2: 1,
+                direction: "left"
+            },{
+                id: "32-9",
+                x: 1544,
+                y: 610,
+                type: "handcart",
+                state1: 1,
+                state2: 0,
+                direction: "left"
+            },{
+                id: "318-0",
+                x: 255,
+                y: 720,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "317-0",
+                x: 392,
+                y: 720,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "316-0",
+                x: 484,
+                y: 720,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "315-0",
+                x: 582,
+                y: 720,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "314-0",
+                x: 666,
+                y: 720,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "313-0",
+                x: 855,
+                y: 720,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "312-0",
+                x: 947,
+                y: 720,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "311-0",
+                x: 1041,
+                y: 720,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "323-0",
+                x: 1174,
+                y: 720,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "322-0",
+                x: 1263,
+                y: 720,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "321-0",
+                x: 1425,
+                y: 720,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "2C-0",
+                x: 484,
+                y: 860,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "1C-0",
+                x: 582,
+                y: 860,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "316-3",
+                x: 503,
+                y: 728,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "315-3",
+                x: 601,
+                y: 728,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "314-3",
+                x: 685,
+                y: 728,
+                type: "switch",
+                state: 1,
+                direction: "top"
+            },{
+                id: "316-03",
+                x: 521,
+                y: 788,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "315-03",
+                x: 619,
+                y: 788,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            },{
+                id: "314-03",
+                x: 703,
+                y: 788,
+                type: "switch",
+                state: 0,
+                direction: "top"
+            }]
         };
     },
     // 函数
@@ -676,7 +1213,7 @@ export default {
                 container: this.$el, // 画布的容器
                 // width: undefined, // 默认使用容器宽度
                 // height: undefined, // 默认使用容器高度
-                autoResize: true, // boolean | Element | Document 是否监听容器大小改变，并自动更新画布大小 默认监听画布容器，也可以指定监听的元素 
+                autoResize: true, // boolean | Element | Document 是否监听容器大小改变，并自动更新画布大小 默认监听画布容器，也可以指定监听的元素
                 mousewheel: {
                     enabled: true,
                     modifiers: [],
@@ -771,6 +1308,27 @@ export default {
                     });
                 });
             });
+            this.data.forEach(item => {
+                switch (item.type) {
+                    case "switch":
+                        item.shape = `switch-${item.state == 0 ? 'break' : 'close'}`
+                        break;
+                    case "handcart":
+                        item.shape = `handcart${item.state1}${item.state2}`
+                        break;
+                    default:
+                        break;
+                }
+                let shape = `${item.shape}-${item.direction}`;
+                let node = {
+                    id: item.id,
+                    x: item.x,
+                    y: item.y,
+                    shape: shape,
+                    movable: false,
+                }
+                data.nodes.push(node);
+            })
             this.graph.fromJSON(data);
         },
         initX6: function () {