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

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="chart" :id="id"></div>
+  <div class="chart" :id="id"></div>
 </template>
 
 <script>
@@ -8,261 +8,273 @@ import partten from "@/helper/partten.js";
 import * as echarts from "echarts";
 
 export default {
-    name: "radar-pie",
-    componentName: "radar-pie",
-    props: {
-        width: {
-            type: String,
-            default: "100%",
+  name: "radar-pie",
+  componentName: "radar-pie",
+  props: {
+    width: {
+      type: String,
+      default: "100%",
+    },
+    height: {
+      type: String,
+      default: "18.519vh",
+    },
+    // 百分比值
+    // 外部饼图数据
+    list: {
+      type: Array,
+      default: () => [
+        {
+          value: 310,
+          name: "邮件营销",
         },
-        height: {
-            type: String,
-            default: "18.519vh",
+        {
+          value: 234,
+          name: "联盟广告",
         },
-        // 百分比值
-        // 外部饼图数据
-        list: {
-            type: Array,
-            default: () => [
-                {
-                    value: 310,
-                    name: "邮件营销",
-                },
-                {
-                    value: 234,
-                    name: "联盟广告",
-                },
-                {
-                    value: 335,
-                    name: "视频广告",
-                },
-                {
-                    value: 548,
-                    name: "百度",
-                },
-                {
-                    value: 351,
-                    name: "谷歌",
-                },
-            ],
+        {
+          value: 335,
+          name: "视频广告",
+        },
+        {
+          value: 548,
+          name: "百度",
         },
+        {
+          value: 351,
+          name: "谷歌",
+        },
+      ],
     },
-    data() {
-        return {
-            id: "",
-            chart: null,
-        };
+    title: {
+      type: String,
+      default: "title",
     },
-    computed: {},
-    methods: {
-        initChart() {
-            let option = {
-                color: ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b", "#1a93cf", "#c531c7", "#bd3338"],
-                tooltip: {
-                    trigger: "item",
-                    backgroundColor: "rgba(0,0,0,0.4)",
-                    borderColor: partten.getColor("gray"),
-                    textStyle: {
-                        color: "#fff",
-                        fontSize: util.vh(16),
-                    },
-                },
-                grid: {
-                    top: 8,
-                    left: 8,
-                    right: 8,
-                    bottom: 8,
-                    containLabel: true,
-                },
-                legend: {
-                    icon: "circle",
-                    orient: "vertical",
-                    top: "center",
-                    right: "0",
-                    align: "left",
-                    textStyle: {
-                        color: "#fff",
-                    },
-                    itemGap: 8,
-                },
-                radar: {
-                    center: ["35%", "50%"],
-                    radius: "80%",
-                    startAngle: 90,
-                    splitNumber: 8,
-                    shape: "circle",
-                    splitArea: {
-                        areaStyle: {
-                            color: ["transparent"],
-                        },
-                    },
-                    axisLabel: {
-                        show: false,
-                        fontSize: 18,
-                        color: "#fff",
-                        fontStyle: "normal",
-                        fontWeight: "normal",
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: "#606769", //
-                        },
-                    },
-                    splitLine: {
-                        show: true,
-                        lineStyle: {
-                            color: "#606769", //
-                        },
-                    },
-                    indicator: [
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                        {
-                            name: "",
-                            max: 100,
-                        },
-                    ],
+  },
+  data() {
+    return {
+      id: "",
+      chart: null,
+    };
+  },
+  computed: {},
+  methods: {
+    initChart() {
+      let option = {
+        color: [
+          "#05bb4c",
+          "#4b55ae",
+          "#fa8c16",
+          "#f8de5b",
+          "#1a93cf",
+          "#c531c7",
+          "#bd3338",
+        ],
+        tooltip: {
+          trigger: "item",
+          backgroundColor: "rgba(0,0,0,0.4)",
+          borderColor: partten.getColor("gray"),
+          textStyle: {
+            color: "#fff",
+            fontSize: util.vh(16),
+          },
+        },
+        grid: {
+          top: 8,
+          left: 8,
+          right: 8,
+          bottom: 8,
+          containLabel: true,
+        },
+        legend: {
+          icon: "circle",
+          orient: "vertical",
+          top: "center",
+          right: "0",
+          align: "left",
+          textStyle: {
+            color: "#fff",
+          },
+          itemGap: 8,
+        },
+        radar: {
+          center: ["35%", "50%"],
+          radius: "80%",
+          startAngle: 90,
+          splitNumber: 8,
+          shape: "circle",
+          splitArea: {
+            areaStyle: {
+              color: ["transparent"],
+            },
+          },
+          axisLabel: {
+            show: false,
+            fontSize: 18,
+            color: "#fff",
+            fontStyle: "normal",
+            fontWeight: "normal",
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "#606769", //
+            },
+          },
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "#606769", //
+            },
+          },
+          indicator: [
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+            {
+              name: "",
+              max: 100,
+            },
+          ],
+        },
+        series: [
+          {
+            name: this.title,
+            type: "pie",
+            clockwise: false,
+            startAngle: 90,
+            radius: "70%",
+            center: ["35%", "50%"],
+            hoverAnimation: false,
+            roseType: "radius", //area
+            data: this.list,
+            label: {
+              show: false,
+            },
+            labelLine: {
+              normal: {
+                length: 20,
+                length2: 30,
+                lineStyle: {
+                  width: 1,
                 },
-                series: [
-                    {
-                        name: "TITLE",
-                        type: "pie",
-                        clockwise: false,
-                        startAngle: 90,
-                        radius: "70%",
-                        center: ["35%", "50%"],
-                        hoverAnimation: false,
-                        roseType: "radius", //area
-                        data: this.list,
-                        label: {
-                            show: false,
-                        },
-                        labelLine: {
-                            normal: {
-                                length: 20,
-                                length2: 30,
-                                lineStyle: {
-                                    width: 1,
-                                },
-                            },
-                        },
-                    },
-                ],
-            };
+              },
+            },
+          },
+        ],
+      };
 
-            this.chart.setOption(option);
-        },
-    },
-    created() {
-        this.id = "pie-chart-" + util.newGUID();
-    },
-    mounted() {
-        this.$el.style.width = this.width;
-        this.$el.style.height = this.height;
-        this.chart = echarts.init(this.$el);
-        this.initChart();
-    },
-    updated() {
-        this.initChart();
+      this.chart.setOption(option);
     },
+  },
+  created() {
+    this.id = "pie-chart-" + util.newGUID();
+  },
+  mounted() {
+    this.$el.style.width = this.width;
+    this.$el.style.height = this.height;
+    this.chart = echarts.init(this.$el);
+    this.initChart();
+  },
+  updated() {
+    this.initChart();
+  },
 };
 </script>
 
 <style lang="less">
 .chart {
-    width: 100%;
-    height: 100%;
-    display: inline-block;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
 }
 </style>

src/components/coms/table/table3.vue

@@ -0,0 +1,272 @@
+<template>
+  <el-table
+    class="custom-table"
+    stripe
+    :data="data.data"
+    :height="height"
+    style="width: 100%"
+    @cell-click="onClick"
+  >
+    <el-table-column
+      v-for="col in data.column"
+      :key="col"
+      :prop="col.field"
+      :label="col.name"
+      :width="col.width"
+      :min-width="col.minWidth"
+      :sortable="col.sortable"
+      :sort-by="col.field + '.count'"
+      :show-overflow-tooltip="!col.slot"
+      :fixed="col.fixed"
+      :align="'center'"
+      :resizable="col.resizable"
+      :header-align="'center'"
+    >
+      <template v-if="col.slot == true" #default="item">
+        <slot
+          :name="col.field"
+          :column="col"
+          :row="item.row"
+          :all="item"
+          :data="item.row[col.field]"
+        ></slot>
+      </template>
+    </el-table-column>
+  </el-table>
+  <el-pagination
+    class="mg-t-8"
+    v-if="pageable"
+    @current-change="handleCurrentChange"
+    :current-page="currentPage"
+    :page-size="pageSize"
+    :total="data.total"
+    v-bind="elPaggingProps"
+  >
+  </el-pagination>
+</template>
+
+<script>
+export default {
+  // 名称
+  name: "ComTable",
+  // 使用组件
+  components: {},
+  // 传入参数
+  props: {
+    /**
+             * {
+                    column: [{
+                        name: "风机名称",
+                        field: "name",
+                        width:'', // 宽度
+                        click:function(){} // 点击事件
+                        sortable:fasle,
+                        slot:false,
+                        fixed:false,
+                        align:'center',
+                        resizable :false,
+                    }],
+                    total:200
+                }
+             */
+    data: Object,
+    height: {
+      type: String,
+      default: "",
+    },
+    pageSize: {
+      type: Number,
+      default: 0,
+    },
+    elPaggingProps: {
+      type: Object,
+      default: () => {
+        return {
+          layout: "total, sizes, prev, pager, next, jumper",
+          // "page-sizes": [100, 200, 300, 400],
+        };
+      },
+    },
+  },
+  // 自定义事件
+  emits: {
+    // 分页事件
+    onPagging: null,
+  },
+  // 数据
+  data() {
+    return {
+      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(row, column, cell, event) {
+      if (column.rawColumnKey.click) column.rawColumnKey.click(event, row);
+    },
+    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%);
+        height: 30px;
+        line-height: 30px;
+        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;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &.light,
+        &.always-light {
+          color: @green !important;
+        }
+
+        &.num {
+          font-family: "Bicubik";
+          font-weight: 400;
+        }
+      }
+    }
+  }
+
+  .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/views/HealthControl/Health.vue

@@ -1,10 +1,34 @@
 <template>
   <div class="health">
     <div class="selections mg-b-16">
-      <div class="item" @click="tabSelect(0)" :class="{ active: tabIndex == 0 }">未确认缺陷</div>
-      <div class="item" @click="tabSelect(1)" :class="{ active: tabIndex == 1 }">已确认缺陷</div>
-      <div class="item" @click="tabSelect(2)" :class="{ active: tabIndex == 2 }">已分配任务</div>
-      <div class="item" @click="tabSelect(3)" :class="{ active: tabIndex == 3 }">已完成任务</div>
+      <div
+        class="item"
+        @click="tabSelect(0)"
+        :class="{ active: tabIndex == 0 }"
+      >
+        未确认缺陷
+      </div>
+      <div
+        class="item"
+        @click="tabSelect(1)"
+        :class="{ active: tabIndex == 1 }"
+      >
+        已确认缺陷
+      </div>
+      <div
+        class="item"
+        @click="tabSelect(2)"
+        :class="{ active: tabIndex == 2 }"
+      >
+        已分配任务
+      </div>
+      <div
+        class="item"
+        @click="tabSelect(3)"
+        :class="{ active: tabIndex == 3 }"
+      >
+        已完成任务
+      </div>
     </div>
     <div v-if="tabIndex == 0">
       <health-tab-1 />
@@ -13,14 +37,14 @@
       <health-tab-2 />
     </div>
     <div v-if="tabIndex == 2">
-       <health-tab-3 /> 
+      <health-tab-3 />
       <!-- <button class="btn" @click="dialogVisible = true">点击弹窗</button>
       <el-dialog title="日信息对比" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal" :close-on-click-modal="false">
         <dayinfo />
       </el-dialog> -->
     </div>
     <div v-if="tabIndex == 3">
-      <health-tab-4 /> 
+      <health-tab-4 />
     </div>
   </div>
 </template>
@@ -33,17 +57,20 @@ import HealthTab4 from "./HealthTab4.vue";
 
 export default {
   setup() {},
-  components: {HealthTab1, HealthTab2, HealthTab3, HealthTab4},
+  components: { HealthTab1, HealthTab2, HealthTab3, HealthTab4 },
   data() {
     return {
-       tabIndex: 0,
+      tabIndex: 0,
     };
   },
+  created() {
+    this.tabIndex = this.$route.query.tab ? parseInt(this.$route.query.tab) : 0;
+  },
   methods: {
-     tabSelect(state) {
-        this.tabIndex = state;
-     }
-  }
+    tabSelect(state) {
+      this.tabIndex = state;
+    },
+  },
 };
 </script>
 

src/views/HealthControl/Health1.vue

@@ -34,7 +34,7 @@
         </div>
         <div class="info-chart">
           <panel class="info-chart-panel" :title="'损失电量分析'">
-            <vertival-bar-line-chart :height="'250px'" />
+            <vertival-bar-line-chart :height="'200px'" />
           </panel>
         </div>
       </div>
@@ -322,7 +322,7 @@ export default {
       flex: 0 0 156px;
       display: flex;
       flex-direction: column;
-      height: 287px;
+      height: 237px;
       margin-right: 1.4815vh;
 
       .tab {
@@ -444,7 +444,7 @@ export default {
     .report-items {
       display: flex;
       flex-wrap: wrap;
-      height: calc(100vh - 500px);
+      max-height: calc(100vh - 440px);
 
       .item {
         flex: 0 0 calc(100% / 6 - 16px);

src/views/Home/Home.vue

@@ -46,7 +46,8 @@
         <Row type="flex">
           <Col :span="24">
             <com-panel title="电量分析" sub-title="（单位：万kWh）">
-              <coulometric-analysis />
+              <!-- 避免故障、提升率、降低率、风能利用率、设备可利用率、综合场用电率、存在隐患风机 -->
+              <coulometric-analysis :bmgz="gxkmap.tjsl" :tsl="30" :jdl="gxkmap.tjl" :fnlyl="wxssmap.yfnlyl" :sbklyl="gxkmap.ysbklyl" :zhcydl="gxkmap.yzhcydl" :yhfj="gxkmap.sjtjsl" />
             </com-panel>
           </Col>
         </Row>
@@ -207,11 +208,6 @@
             <com-panel>
               <table class="table-card">
                 <tr class="">
-                  <td class="text gray">综合厂用电率</td>
-                  <td class="value green">{{ gxkmap.yzhcydl }}</td>
-                  <td class="unit gray">%</td>
-                </tr>
-                <tr class="">
                   <td class="text gray">利用小时(月)</td>
                   <td class="value green">{{ jczbmap.ylyxs }}</td>
                   <td class="unit gray">小时</td>
@@ -222,20 +218,25 @@
                   <td class="unit gray gray">小时</td>
                 </tr>
                 <tr class="">
-                  <td class="text gray">设备可利用率</td>
-                  <td class="value green">{{ gxkmap.ysbklyl }}</td>
+                  <td class="text gray">等效可用系数</td>
+                  <td class="value green">{{ gxkmap.ydxkyss }}</td>
                   <td class="unit gray">%</td>
                 </tr>
                 <tr class="">
-                  <td class="text gray">MTBF(日)</td>
+                  <td class="text gray">MTBF(月)</td>
                   <td class="value green">{{ jczbmap.mtbf }}</td>
                   <td class="unit gray">小时</td>
                 </tr>
                 <tr class="">
-                  <td class="text gray">MTTR(日)</td>
+                  <td class="text gray">MTTR(月)</td>
                   <td class="value green">{{ jczbmap.mttr }}</td>
                   <td class="unit gray">小时</td>
                 </tr>
+                <tr class="">
+                  <td class="text gray">MTTF(月)</td>
+                  <td class="value green">{{ jczbmap.mttf }}</td>
+                  <td class="unit gray">小时</td>
+                </tr>
               </table>
             </com-panel>
           </Col>
@@ -1205,6 +1206,7 @@ export default {
             margin-left: 16px;
             .value {
               font-size: 24px;
+              display: inline-block;
             }
           }
         }
@@ -1241,6 +1243,9 @@ export default {
           .value {
             text-align: left;
             font-size: 12px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
           }
         }
       }

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

@@ -1,6 +1,6 @@
 <template>
   <div class="coulometric-analysis">
-    <tab @select="selectionItemClick" />
+    <tab @select="selectionItemClick" v-if="false" />
     <row>
       <Col :span="12">
         <div class="coulometric-info">
@@ -8,19 +8,39 @@
           <span class="title gray">增发电量</span>
           <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" />
+        <percent-card :value="tsl_" color="green" title="提升率" />
+        <card-1
+          class="increase-info"
+          title="风能利用率"
+          :value="fnlyl_"
+          :isIncrease="fnlyl_ >= 0"
+        />
+        <card-1
+          class="increase-info"
+          title="综合场用电率"
+          :value="zhcydl_"
+          :isIncrease="zhcydl_ >= 0"
+        />
       </Col>
       <Col :span="12">
         <div class="coulometric-info">
           <svg-icon svgid="svg-arrow-down" class="icon yellow" />
-          <span class="title gray">降低损失</span>
-          <span class="value">{{ ReduceLosses }}</span>
+          <span class="title gray">避免故障</span>
+          <span class="value">{{ bmgz_ }}</span>
         </div>
-        <percent-card :value="ReductionRate" color="yellow" title="" />
-        <card-1 class="increase-info" title="因偏航对风超出范围" :value="OutRange" :isIncrease="false" />
-        <card-1 class="increase-info" title="降出力运行" :value="ReducedOutput" :isIncrease="false" />
+        <percent-card :value="jdl_" color="yellow" title="降低率" />
+        <card-1
+          class="increase-info"
+          title="设备可利用率"
+          :value="sbklyl_"
+          :isIncrease="sbklyl_ >= 0"
+        />
+        <card-1
+          class="increase-info"
+          title="存在隐患风机"
+          :value="yhfj_"
+          :isIncrease="yhfj_ >= 0"
+        />
       </Col>
     </row>
   </div>
@@ -36,30 +56,92 @@ import Card1 from "../../../components/coms/cards/card-1.vue";
 
 export default {
   components: { percentCard, Row, Col, Tab, SvgIcon, Card1 },
+  props: {
+    bmgz: {
+      type: Number,
+      default: 0,
+    },
+    tsl: {
+      type: Number,
+      default: 0,
+    },
+    jdl: {
+      type: Number,
+      default: 0,
+    },
+    fnlyl: {
+      type: Number,
+      default: 0,
+    },
+    sbklyl: {
+      type: Number,
+      default: 0,
+    },
+    zhcydl: {
+      type: Number,
+      default: 0,
+    },
+    yhfj: {
+      type: Number,
+      default: 0,
+    },
+  },
   data() {
     // 电量分析
     return {
       // 增发电量
       AddElectricity: 30,
-      // 降低损失
-      ReduceLosses: 40,
+      // 避免故障
+      bmgz_: 0,
       // 提升率
-      PromotionRate: 25,
+      tsl_: 0,
       // 降低率
-      ReductionRate: 30,
-      //及时并网增发电量
-      IncreasePower: 123,
-      //主动维护降低损失电量
-      Maintenance: 123,
-      //因偏航对风超出范围
-      OutRange: 123,
-      //降出力运行
-      ReducedOutput: 123,
+      jdl_: 0,
+      // 风能利用率
+      fnlyl_: 0,
+      // 设备科利用率
+      sbklyl_: 0,
+      // 综合场用电率
+      zhcydl_: 0,
+      // 存在隐患风机
+      yhfj_: 0,
     };
   },
+  mounted() {
+    this.bmgz_ = this.bmgz;
+    this.tsl_ = this.tsl;
+    this.jdl_ = this.jdl;
+    this.fnlyl_ = this.fnlyl;
+    this.sbklyl_ = this.sbklyl;
+    this.zhcydl_ = this.zhcydl;
+    this.yhfj_ = this.yhfj;
+  },
   methods: {
     selectionItemClick(item) {
-      console.log(item);
+      // console.log(item);
+    },
+  },
+  watch: {
+    bmgz(res) {
+      this.bmgz_ = res;
+    },
+    tsl(res) {
+      this.tsl_ = res;
+    },
+    jdl(res) {
+      this.jdl_ = res;
+    },
+    fnlyl(res) {
+      this.fnlyl_ = res;
+    },
+    sbklyl(res) {
+      this.sbklyl_ = res;
+    },
+    zhcydl(res) {
+      this.zhcydl_ = res;
+    },
+    yhfj(res) {
+      this.yhfj_ = res;
     },
   },
 };

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

@@ -79,7 +79,7 @@
           <rect
             x="0"
             y="0"
-            width="110"
+            width="130"
             height="130"
             stroke="#46C55A35"
             fill="#000000"
@@ -94,7 +94,7 @@
               repeatCount="indefinite"
             />
           </circle>
-          <circle cx="106" cy="4" r="2" fill="#ffffff">
+          <circle cx="126" cy="4" r="2" fill="#ffffff">
             <animate
               attributeType="XML"
               attributeName="fill"
@@ -112,7 +112,7 @@
               repeatCount="indefinite"
             />
           </circle>
-          <circle cx="106" cy="126" r="2" fill="#ffffff">
+          <circle cx="126" cy="126" r="2" fill="#ffffff">
             <animate
               attributeType="XML"
               attributeName="fill"
@@ -401,23 +401,23 @@
               <use xlink:href="#popup-box-svg" x="320" y="180" />
               <text x="330" y="200" fill="#919697" font-size="12">经度</text>
               <text x="380" y="200" fill="#05bb4c" font-size="12">
-                {{ xtMap.QS_FDC && xtMap.XS_FDC.jd }}
+                {{ xtMap.QS_FDC && xtMap.XS_FDC.jd }}°
               </text>
               <text x="330" y="225" fill="#919697" font-size="12">纬度</text>
               <text x="380" y="225" fill="#05bb4c" font-size="12">
-                {{ xtMap.QS_FDC && xtMap.XS_FDC.wd }}
+                {{ xtMap.QS_FDC && xtMap.XS_FDC.wd }}°
               </text>
               <text x="330" y="250" fill="#919697" font-size="12">海拔</text>
               <text x="380" y="250" fill="#05bb4c" font-size="12">
-                {{ xtMap.QS_FDC && xtMap.XS_FDC.hb }}
+                {{ xtMap.QS_FDC && xtMap.XS_FDC.hb }}米
               </text>
               <text x="330" y="275" fill="#919697" font-size="12">功率</text>
               <text x="380" y="275" fill="#05bb4c" font-size="12">
-                {{ xtMap.QS_FDC && xtMap.XS_FDC.gl }}
+                {{ xtMap.QS_FDC && xtMap.XS_FDC.gl }}MW
               </text>
               <text x="330" y="300" fill="#919697" font-size="12">风速</text>
               <text x="380" y="300" fill="#05bb4c" font-size="12">
-                {{ xtMap.QS_FDC && xtMap.XS_FDC.ssfs }}
+                {{ xtMap.QS_FDC && xtMap.XS_FDC.ssfs }}m/s
               </text>
             </g>
             <g v-show="popup[1]">
@@ -425,23 +425,23 @@
               <use xlink:href="#popup-box-svg" x="420" y="60" />
               <text x="430" y="80" fill="#919697" font-size="12">经度</text>
               <text x="480" y="80" fill="#05bb4c" font-size="12">
-                {{ xtMap.MCH_GDC && xtMap.MCH_GDC.jd }}
+                {{ xtMap.MCH_GDC && xtMap.MCH_GDC.jd }}°
               </text>
               <text x="430" y="105" fill="#919697" font-size="12">纬度</text>
               <text x="480" y="105" fill="#05bb4c" font-size="12">
-                {{ xtMap.MCH_GDC && xtMap.MCH_GDC.wd }}
+                {{ xtMap.MCH_GDC && xtMap.MCH_GDC.wd }}°
               </text>
               <text x="430" y="130" fill="#919697" font-size="12">海拔</text>
               <text x="480" y="130" fill="#05bb4c" font-size="12">
-                {{ xtMap.MCH_GDC && xtMap.MCH_GDC.hb }}
+                {{ xtMap.MCH_GDC && xtMap.MCH_GDC.hb }}米
               </text>
               <text x="430" y="155" fill="#919697" font-size="12">功率</text>
               <text x="480" y="155" fill="#05bb4c" font-size="12">
-                {{ xtMap.MCH_GDC && xtMap.MCH_GDC.gl }}
+                {{ xtMap.MCH_GDC && xtMap.MCH_GDC.gl }}MW
               </text>
               <text x="430" y="180" fill="#919697" font-size="12">风速</text>
               <text x="480" y="180" fill="#05bb4c" font-size="12">
-                {{ xtMap.MCH_GDC && xtMap.MCH_GDC.ssfs }}
+                {{ xtMap.MCH_GDC && xtMap.MCH_GDC.ssfs }}m/s
               </text>
             </g>
             <g v-show="popup[2]">
@@ -450,23 +450,23 @@
               <use xlink:href="#popup-box-svg" x="430" y="90" />
               <text x="440" y="110" fill="#919697" font-size="12">经度</text>
               <text x="490" y="110" fill="#05bb4c" font-size="12">
-                {{ xtMap.XH_GDC && xtMap.XH_GDC.jd }}
+                {{ xtMap.XH_GDC && xtMap.XH_GDC.jd }}°
               </text>
               <text x="440" y="135" fill="#919697" font-size="12">纬度</text>
               <text x="490" y="135" fill="#05bb4c" font-size="12">
-                {{ xtMap.XH_GDC && xtMap.XH_GDC.wd }}
+                {{ xtMap.XH_GDC && xtMap.XH_GDC.wd }}°
               </text>
               <text x="440" y="160" fill="#919697" font-size="12">海拔</text>
               <text x="490" y="160" fill="#05bb4c" font-size="12">
-                {{ xtMap.XH_GDC && xtMap.XH_GDC.hb }}
+                {{ xtMap.XH_GDC && xtMap.XH_GDC.hb }}米
               </text>
               <text x="440" y="185" fill="#919697" font-size="12">功率</text>
               <text x="490" y="185" fill="#05bb4c" font-size="12">
-                {{ xtMap.XH_GDC && xtMap.XH_GDC.gl }}
+                {{ xtMap.XH_GDC && xtMap.XH_GDC.gl }}MW
               </text>
               <text x="440" y="210" fill="#919697" font-size="12">风速</text>
               <text x="490" y="210" fill="#05bb4c" font-size="12">
-                {{ xtMap.XH_GDC && xtMap.XH_GDC.ssfs }}
+                {{ xtMap.XH_GDC && xtMap.XH_GDC.ssfs }}m/s
               </text>
             </g>
             <g v-show="popup[3]">
@@ -474,23 +474,23 @@
               <use xlink:href="#popup-box-svg" x="550" y="85" />
               <text x="560" y="105" fill="#919697" font-size="12">经度</text>
               <text x="610" y="105" fill="#05bb4c" font-size="12">
-                {{ xtMap.NSS_FDC && xtMap.NSS_FDC.jd }}
+                {{ xtMap.NSS_FDC && xtMap.NSS_FDC.jd }}°
               </text>
               <text x="560" y="130" fill="#919697" font-size="12">纬度</text>
               <text x="610" y="130" fill="#05bb4c" font-size="12">
-                {{ xtMap.NSS_FDC && xtMap.NSS_FDC.wd }}
+                {{ xtMap.NSS_FDC && xtMap.NSS_FDC.wd }}°
               </text>
               <text x="560" y="155" fill="#919697" font-size="12">海拔</text>
               <text x="610" y="155" fill="#05bb4c" font-size="12">
-                {{ xtMap.NSS_FDC && xtMap.NSS_FDC.hb }}
+                {{ xtMap.NSS_FDC && xtMap.NSS_FDC.hb }}米
               </text>
               <text x="560" y="180" fill="#919697" font-size="12">功率</text>
               <text x="610" y="180" fill="#05bb4c" font-size="12">
-                {{ xtMap.NSS_FDC && xtMap.NSS_FDC.gl }}
+                {{ xtMap.NSS_FDC && xtMap.NSS_FDC.gl }}MW
               </text>
               <text x="560" y="205" fill="#919697" font-size="12">风速</text>
               <text x="610" y="205" fill="#05bb4c" font-size="12">
-                {{ xtMap.NSS_FDC && xtMap.NSS_FDC.ssfs }}
+                {{ xtMap.NSS_FDC && xtMap.NSS_FDC.ssfs }}m/s
               </text>
             </g>
             <g v-show="popup[4]">
@@ -498,23 +498,23 @@
               <use xlink:href="#popup-box-svg" x="460" y="15" />
               <text x="470" y="35" fill="#919697" font-size="12">经度</text>
               <text x="520" y="35" fill="#05bb4c" font-size="12">
-                {{ xtMap.DWK_GDC && xtMap.DWK_GDC.jd }}
+                {{ xtMap.DWK_GDC && xtMap.DWK_GDC.jd }}°
               </text>
               <text x="470" y="60" fill="#919697" font-size="12">纬度</text>
               <text x="520" y="60" fill="#05bb4c" font-size="12">
-                {{ xtMap.DWK_GDC && xtMap.DWK_GDC.wd }}
+                {{ xtMap.DWK_GDC && xtMap.DWK_GDC.wd }}°
               </text>
               <text x="470" y="85" fill="#919697" font-size="12">海拔</text>
               <text x="520" y="85" fill="#05bb4c" font-size="12">
-                {{ xtMap.DWK_GDC && xtMap.DWK_GDC.hb }}
+                {{ xtMap.DWK_GDC && xtMap.DWK_GDC.hb }}米
               </text>
               <text x="470" y="110" fill="#919697" font-size="12">功率</text>
               <text x="520" y="110" fill="#05bb4c" font-size="12">
-                {{ xtMap.DWK_GDC && xtMap.DWK_GDC.gl }}
+                {{ xtMap.DWK_GDC && xtMap.DWK_GDC.gl }}MW
               </text>
               <text x="470" y="135" fill="#919697" font-size="12">风速</text>
               <text x="520" y="135" fill="#05bb4c" font-size="12">
-                {{ xtMap.DWK_GDC && xtMap.DWK_GDC.ssfs }}
+                {{ xtMap.DWK_GDC && xtMap.DWK_GDC.ssfs }}m/s
               </text>
             </g>
             <g v-show="popup[5]">
@@ -522,23 +522,23 @@
               <use xlink:href="#popup-box-svg" x="480" y="40" />
               <text x="490" y="60" fill="#919697" font-size="12">经度</text>
               <text x="540" y="60" fill="#05bb4c" font-size="12">
-                {{ xtMap.PL_GDC && xtMap.PL_GDC.jd }}
+                {{ xtMap.PL_GDC && xtMap.PL_GDC.jd }}°
               </text>
               <text x="490" y="85" fill="#919697" font-size="12">纬度</text>
               <text x="540" y="85" fill="#05bb4c" font-size="12">
-                {{ xtMap.PL_GDC && xtMap.PL_GDC.wd }}
+                {{ xtMap.PL_GDC && xtMap.PL_GDC.wd }}°
               </text>
               <text x="490" y="110" fill="#919697" font-size="12">海拔</text>
               <text x="540" y="110" fill="#05bb4c" font-size="12">
-                {{ xtMap.PL_GDC && xtMap.PL_GDC.hb }}
+                {{ xtMap.PL_GDC && xtMap.PL_GDC.hb }}米
               </text>
               <text x="490" y="135" fill="#919697" font-size="12">功率</text>
               <text x="540" y="135" fill="#05bb4c" font-size="12">
-                {{ xtMap.PL_GDC && xtMap.PL_GDC.gl }}
+                {{ xtMap.PL_GDC && xtMap.PL_GDC.gl }}MW
               </text>
               <text x="490" y="160" fill="#919697" font-size="12">风速</text>
               <text x="540" y="160" fill="#05bb4c" font-size="12">
-                {{ xtMap.PL_GDC && xtMap.PL_GDC.ssfs }}
+                {{ xtMap.PL_GDC && xtMap.PL_GDC.ssfs }}m/s
               </text>
             </g>
             <g v-show="popup[6]">
@@ -546,23 +546,23 @@
               <use xlink:href="#popup-box-svg" x="520" y="145" />
               <text x="530" y="165" fill="#919697" font-size="12">经度</text>
               <text x="580" y="165" fill="#05bb4c" font-size="12">
-                {{ xtMap.SBQ_FDC && xtMap.SBQ_FDC.jd }}
+                {{ xtMap.SBQ_FDC && xtMap.SBQ_FDC.jd }}°
               </text>
               <text x="530" y="190" fill="#919697" font-size="12">纬度</text>
               <text x="580" y="190" fill="#05bb4c" font-size="12">
-                {{ xtMap.SBQ_FDC && xtMap.SBQ_FDC.wd }}
+                {{ xtMap.SBQ_FDC && xtMap.SBQ_FDC.wd }}°
               </text>
               <text x="530" y="215" fill="#919697" font-size="12">海拔</text>
               <text x="580" y="215" fill="#05bb4c" font-size="12">
-                {{ xtMap.SBQ_FDC && xtMap.SBQ_FDC.hb }}
+                {{ xtMap.SBQ_FDC && xtMap.SBQ_FDC.hb }}米
               </text>
               <text x="530" y="240" fill="#919697" font-size="12">功率</text>
               <text x="580" y="240" fill="#05bb4c" font-size="12">
-                {{ xtMap.SBQ_FDC && xtMap.SBQ_FDC.gl }}
+                {{ xtMap.SBQ_FDC && xtMap.SBQ_FDC.gl }}MW
               </text>
               <text x="530" y="265" fill="#919697" font-size="12">风速</text>
               <text x="580" y="265" fill="#05bb4c" font-size="12">
-                {{ xtMap.SBQ_FDC && xtMap.SBQ_FDC.ssfs }}
+                {{ xtMap.SBQ_FDC && xtMap.SBQ_FDC.ssfs }}m/s
               </text>
             </g>
             <g v-show="popup[7]">
@@ -570,23 +570,23 @@
               <use xlink:href="#popup-box-svg" x="530" y="175" />
               <text x="540" y="195" fill="#919697" font-size="12">经度</text>
               <text x="590" y="195" fill="#05bb4c" font-size="12">
-                {{ xtMap.MHS_FDC && xtMap.MHS_FDC.jd }}
+                {{ xtMap.MHS_FDC && xtMap.MHS_FDC.jd }}°
               </text>
               <text x="540" y="220" fill="#919697" font-size="12">纬度</text>
               <text x="590" y="220" fill="#05bb4c" font-size="12">
-                {{ xtMap.MHS_FDC && xtMap.MHS_FDC.wd }}
+                {{ xtMap.MHS_FDC && xtMap.MHS_FDC.wd }}°
               </text>
               <text x="540" y="245" fill="#919697" font-size="12">海拔</text>
               <text x="590" y="245" fill="#05bb4c" font-size="12">
-                {{ xtMap.MHS_FDC && xtMap.MHS_FDC.hb }}
+                {{ xtMap.MHS_FDC && xtMap.MHS_FDC.hb }}米
               </text>
               <text x="540" y="270" fill="#919697" font-size="12">功率</text>
               <text x="590" y="270" fill="#05bb4c" font-size="12">
-                {{ xtMap.MHS_FDC && xtMap.MHS_FDC.gl }}
+                {{ xtMap.MHS_FDC && xtMap.MHS_FDC.gl }}MW
               </text>
               <text x="540" y="295" fill="#919697" font-size="12">风速</text>
               <text x="590" y="295" fill="#05bb4c" font-size="12">
-                {{ xtMap.MHS_FDC && xtMap.MHS_FDC.ssfs }}
+                {{ xtMap.MHS_FDC && xtMap.MHS_FDC.ssfs }}m/s
               </text>
             </g>
             <g v-show="popup[8]">
@@ -594,23 +594,23 @@
               <use xlink:href="#popup-box-svg" x="580" y="195" />
               <text x="590" y="215" fill="#919697" font-size="12">经度</text>
               <text x="640" y="215" fill="#05bb4c" font-size="12">
-                {{ xtMap.QS_FDC && xtMap.QS_FDC.jd }}
+                {{ xtMap.QS_FDC && xtMap.QS_FDC.jd }}°
               </text>
               <text x="590" y="240" fill="#919697" font-size="12">纬度</text>
               <text x="640" y="240" fill="#05bb4c" font-size="12">
-                {{ xtMap.QS_FDC && xtMap.QS_FDC.wd }}
+                {{ xtMap.QS_FDC && xtMap.QS_FDC.wd }}°
               </text>
               <text x="590" y="265" fill="#919697" font-size="12">海拔</text>
               <text x="640" y="265" fill="#05bb4c" font-size="12">
-                {{ xtMap.QS_FDC && xtMap.QS_FDC.hb }}
+                {{ xtMap.QS_FDC && xtMap.QS_FDC.hb }}米
               </text>
               <text x="590" y="290" fill="#919697" font-size="12">功率</text>
               <text x="640" y="290" fill="#05bb4c" font-size="12">
-                {{ xtMap.QS_FDC && xtMap.QS_FDC.gl }}
+                {{ xtMap.QS_FDC && xtMap.QS_FDC.gl }}MW
               </text>
               <text x="590" y="315" fill="#919697" font-size="12">风速</text>
               <text x="640" y="315" fill="#05bb4c" font-size="12">
-                {{ xtMap.QS_FDC && xtMap.QS_FDC.ssfs }}
+                {{ xtMap.QS_FDC && xtMap.QS_FDC.ssfs }}m/s
               </text>
             </g>
           </g>

src/views/NewPages/alarm-center-1.vue

@@ -67,7 +67,7 @@
       </div>
     </div>
     <panel-3 class="table-panel">
-      <table-2 :data="tableData" :height="'85vh'">
+      <table-3 :data="tableData" :height="'85vh'">
         <template v-for="(item, i) in column" :key="i" #[item]="scope">
           <div class="bar">
             <div
@@ -82,7 +82,7 @@
             ></div>
             <span class="value">{{
               scope.data.count && scope.data.count
-            }}</span>
+            }} 次数</span>
           </div>
           <div class="bar">
             <div
@@ -95,19 +95,19 @@
                   'px',
               }"
             ></div>
-            <span class="value">{{ scope.data.count && scope.data.time }}</span>
+            <span class="value">{{ scope.data.count && scope.data.time }} 分钟</span>
           </div>
         </template>
-      </table-2>
+      </table-3>
     </panel-3>
   </div>
 </template>
 
 <script>
 import Panel3 from "../../components/coms/panel/panel3.vue";
-import Table2 from "../../components/coms/table/table2.vue";
+import Table3 from "../../components/coms/table/table3.vue";
 export default {
-  components: { Panel3, Table2 },
+  components: { Panel3, Table3 },
   data() {
     return {
       wpvalue: "",

src/views/SandTable/SandTable.vue

@@ -7,6 +7,7 @@
       class="three-model-layer"
       :data="mapSource"
       @when="when"
+      @clickMapItem="clickMapItem"
     ></ThreeModel1>
     <div class="sand-table-left" v-if="showPanel">
       <PanelSand
@@ -14,30 +15,39 @@
         title="气象预测"
         :subTitle="timeStr + '实况'"
       >
-        <weather class="pd-t-16" :data="tqmap1" />
+        <weather
+          class="pd-t-16"
+          style="cursor: pointer"
+          :data="tqmap1"
+          @click="openWeatherDialog"
+        />
       </PanelSand>
       <PanelSand class="left-panel mg-t-16" title="健康推荐">
-        <RankTable :data="levelTableData"></RankTable>
+        <RankTable :data="rmls" @rowClick="clickHealthRow"></RankTable>
       </PanelSand>
       <PanelSand class="left-panel mg-t-16" title="停机信息">
-        <RankTable :data="sels" @rowClick="clickRow"></RankTable>
+        <RankTable :data="sels" @rowClick="clickStopRow"></RankTable>
         <!-- <ComTable :data="sels"></ComTable> -->
       </PanelSand>
-      <PanelSandToolbar class="left-panel mg-t-16" title="部件">
+      <PanelSandToolbar class="left-panel mg-t-16" title="隐患情况">
         <template v-slot:tools>
-          <div class="exchange" @click="exchange1">
-            <span :class="exchangeBtn1 ? 'gray' : 'green'">次数</span>
+          <div class="exchange" @click="changeWarnSwitch">
+            <span :class="warnSwitch ? 'gray' : 'green'">预警</span>
             <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
-            <span :class="exchangeBtn1 ? 'green' : 'gray'">库存</span>
+            <span :class="warnSwitch ? 'green' : 'gray'">故障</span>
           </div>
         </template>
         <template v-slot:default>
-          <RadarPieChart height="20.6vh" />
+          <RadarPieChart
+            height="20.6vh"
+            :list="warnChartData"
+            title="隐患情况"
+          />
         </template>
       </PanelSandToolbar>
     </div>
     <div class="sand-table-right" v-if="showPanel">
-      <PanelSand class="right-panel" title="板块标题">
+      <PanelSand class="right-panel" title="视频监控">
         <el-row v-for="(pItem, pIndex) in videoArray" :key="pIndex">
           <el-col
             :span="12"
@@ -49,6 +59,7 @@
             <div class="mask"></div>
             <iframe
               class="pre-img videoBoxiframe"
+              :class="cItem.class"
               width="95%"
               height="8.657vh"
               :src="cItem.url + cItem.token"
@@ -65,8 +76,9 @@
         >
           <img
             class="header mg-r-8 bg-green"
-            style="width: 75px; height: 75px"
+            style="width: 75px; height: 75px; cursor: pointer"
             :src="workData.data[workDataIndex].imgurl"
+            @click="jumpUrl('/health/frist?tab=2')"
           />
           <div class="person-info">
             <div class="green font-lg" style="font-weight: bold">
@@ -85,77 +97,24 @@
             </div>
           </div>
         </div>
-        <div class="table mg-t-8">
+        <div class="table mg-t-8" style="min-height: 180px">
           <Table :data="workData" />
         </div>
       </PanelSand>
-      <PanelSandToolbar class="right-panel mg-t-16" title="风险隐患详情">
+      <PanelSandToolbar class="right-panel mg-t-16" title="部件">
         <template v-slot:tools>
-          <div class="exchange" @click="exchange">
-            <span :class="exchangeBtn ? 'gray' : 'green'">预警</span>
+          <div class="exchange" @click="changeBjSwitch">
+            <span :class="bjSwitch ? 'gray' : 'green'">库存</span>
             <i class="green fa fa-exchange mg-l-8 mg-r-8"></i>
-            <span :class="exchangeBtn ? 'green' : 'gray'">时长</span>
+            <span :class="bjSwitch ? 'green' : 'gray'">记录</span>
           </div>
         </template>
         <template v-slot:default>
-          <RadarPieChart height="21vh" />
+          <RadarPieChart height="21vh" :list="bjChartData" title="部件情况" />
         </template>
       </PanelSandToolbar>
     </div>
     <div class="sand-table-bottom" v-if="showPanel">
-      <!-- <Ppanel
-        title="利用小时"
-        :data="riseNumber(gxkmap.bg_dxkyss)"
-        :dataColor="gxkmap.bg_dxkyss < 0 ? '#f25656' : '#05BB4C'"
-        :days="gxkmap.ydxkyss"
-        :data1Icon="gxkmap.tb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data1IconClass="gxkmap.tb_dxkyss < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-        :data2Icon="gxkmap.hb_dxkyss < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data2IconClass="gxkmap.hb_dxkyss < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-      ></Ppanel>
-      <Ppanel title="设备可利用率"
-        class="stb-p"
-        :data="riseNumber(gxkmap.bg_sbklyl)"
-        :dataColor="gxkmap.bg_sbklyl < 0 ? '#f25656' : '#05BB4C'"
-        :days="gxkmap.ysbklyl"
-        :data1Icon="gxkmap.hb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data1IconClass="gxkmap.hb_sbklyl < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-        :data2Icon="gxkmap.tb_sbklyl < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data2IconClass="gxkmap.tb_sbklyl < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-      ></Ppanel>
-      <Ppanel
-        title="MTBF"
-        class="stb-p"
-        :data="riseNumber(gxkmap.bg_mtbf)"
-        :dataColor="gxkmap.bg_mtbf < 0 ? '#f25656' : '#05BB4C'"
-        :days="gxkmap.mtbf"
-        :data1Icon="gxkmap.hb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data1IconClass="gxkmap.hb_mtbf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-        :data2Icon="gxkmap.tb_mtbf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data2IconClass="gxkmap.tb_mtbf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-      ></Ppanel>
-      <Ppanel
-        title="MTTR"
-        class="stb-p"
-        :data="riseNumber(gxkmap.bg_mttr)"
-        :dataColor="gxkmap.bg_mttr < 0 ? '#f25656' : '#05BB4C'"
-        :days="gxkmap.mttr"
-        :data1Icon="gxkmap.hb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data1IconClass="gxkmap.hb_mttr < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-        :data2Icon="gxkmap.tb_mttr < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data2IconClass="gxkmap.tb_mttr < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-      ></Ppanel>
-      <Ppanel
-        title="MTTF"
-        class="stb-p"
-        :data="riseNumber(gxkmap.bg_mttf)"
-        :dataColor="gxkmap.bg_mttf < 0 ? '#f25656' : '#05BB4C'"
-        :days="gxkmap.mttf"
-        :data1Icon="gxkmap.hb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data1IconClass="gxkmap.hb_mttf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-        :data2Icon="gxkmap.tb_mttf < 0 ? 'svg-arrow-dpwn-1' : 'svg-arrow-up-1'"
-        :data2IconClass="gxkmap.tb_mttf < 0 ? 'svg-icon-sm svg-icon-yellow' : 'svg-icon-sm svg-icon-green'"
-      ></Ppanel> -->
       <Ppanel
         title="利用小时"
         :data="riseNumber(gxkmap.bg_dxkyss)"
@@ -260,32 +219,51 @@
       ></Ppanel>
     </div>
     <el-dialog
-      top="50px"
-      title="查看视频"
-      :custom-class="videoDialogClass"
-      v-model="showVideoDialog"
+      title=""
+      :custom-class="tableDialogClass"
+      v-model="showHealthDialog"
       width="80%"
       :destroy-on-close="true"
       :before-close="
         (done) => {
-          videoDialogClass = 'modal animated a1 bounceOut';
+          tableDialogClass = 'modal animated a1 fadeOutLeftBig';
           delaylyFn(450, done);
         }
       "
       @closed="
         dialogVideoUrl = '';
-        videoDialogClass = 'modal animated a1 bounceIn';
+        tableDialogClass = 'modal animated a1 fadeInLeftBig';
       "
     >
-      <iframe
-        class="videoBoxiframe"
-        width="95%"
-        height="800px"
-        :src="dialogVideoUrl"
-      />
+      <template #title>
+        <div class="dialogTitle">
+          健康推荐详情
+          <i class="jumpBtn el-icon-more" @click="jumpUrl('/health/frist')"></i>
+        </div>
+      </template>
+      <el-form style="margin: 30px 0" label-width="120px" inline>
+        <el-form-item label="风机ID" style="width: 45%; margin-bottom: 25px">
+          <el-input v-model="tableItem.wtId" readonly></el-input>
+        </el-form-item>
+        <el-form-item label="检修类型" style="width: 45%; margin-bottom: 25px">
+          <el-input v-model="tableItem.operation" readonly></el-input>
+        </el-form-item>
+        <el-form-item label="推荐理由" style="width: 45%; margin-bottom: 25px">
+          <el-input v-model="tableItem.reason" readonly></el-input>
+        </el-form-item>
+        <el-form-item label="推荐日期" style="width: 45%; margin-bottom: 25px">
+          <el-input v-model="tableItem.recodedate" readonly></el-input>
+        </el-form-item>
+        <el-form-item label="风速" style="width: 45%; margin-bottom: 25px">
+          <el-input v-model="tableItem.speed" readonly></el-input>
+        </el-form-item>
+        <el-form-item label="预警名称" style="width: 45%; margin-bottom: 25px">
+          <el-input v-model="tableItem.typename" readonly></el-input>
+        </el-form-item>
+      </el-form>
     </el-dialog>
     <el-dialog
-      title="停机详情"
+      title=""
       :custom-class="tableDialogClass"
       v-model="showTableDialog"
       width="80%"
@@ -301,6 +279,15 @@
         tableDialogClass = 'modal animated a1 fadeInLeftBig';
       "
     >
+      <template #title>
+        <div class="dialogTitle">
+          停机详情
+          <i
+            class="jumpBtn el-icon-more"
+            @click="jumpUrl('/health/gzzd/malfunctionRecall')"
+          ></i>
+        </div>
+      </template>
       <el-form style="margin: 30px 0" label-width="120px" inline>
         <el-form-item label="风机ID" style="width: 45%; margin-bottom: 25px">
           <el-input v-model="tableItem.windTurbineId" readonly></el-input>
@@ -325,6 +312,122 @@
         </el-form-item>
       </el-form>
     </el-dialog>
+    <el-dialog
+      title="天气详情"
+      :custom-class="tableDialogClass"
+      v-model="showWeatherDialog"
+      width="80%"
+      :destroy-on-close="true"
+      :before-close="
+        (done) => {
+          tableDialogClass = 'modal animated a1 fadeOutLeftBig';
+          delaylyFn(450, done);
+        }
+      "
+      @closed="tableDialogClass = 'modal animated a1 fadeInLeftBig'"
+    >
+      <div class="weatherBox">
+        <div class="l">
+          <DoubleLineChart :height="'100%'" :list="weatherChart" />
+        </div>
+        <div class="r">
+          <el-collapse
+            style="height: 400px; overflow-y: scroll"
+            v-model="weathercollapse"
+            accordion
+          >
+            <el-collapse-item
+              :name="index"
+              v-for="(item, index) in tqmap5"
+              :key="index"
+            >
+              <template #title>
+                <div class="collapseItemTitle">
+                  {{ item.time }}
+                  <div
+                    style="
+                      display: flex;
+                      justify-content: start;
+                      align-items: center;
+                    "
+                  >
+                    <div class="icon svg-icon svg-icon-white">
+                      <SvgIcon class="svg" :svgid="'svg-' + item.tqtp" />
+                    </div>
+                    <div class="info">{{ item.sd }}% / {{ item.wd }}°C</div>
+                  </div>
+                  <div class="otherWea">{{ item.tqmc }}</div>
+                </div>
+              </template>
+              <div class="other-info">
+                <Row>
+                  <Col>
+                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
+                      <svg-icon svgid="svg-能见度" />
+                    </div>
+                    <div class="value">{{ item.qxd }}</div>
+                    <div class="text">能见度</div>
+                  </Col>
+                  <Col>
+                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
+                      <svg-icon svgid="svg-湿度" />
+                    </div>
+                    <div class="value">{{ item.sd }}</div>
+                    <div class="text">湿度</div>
+                  </Col>
+                  <Col>
+                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
+                      <svg-icon svgid="svg-气压" />
+                    </div>
+                    <div class="value">{{ item.dqyl }}</div>
+                    <div class="text">气压</div>
+                  </Col>
+                  <Col>
+                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
+                      <svg-icon svgid="svg-日出" />
+                    </div>
+                    <div class="value">{{ item.richushijian }}</div>
+                    <div class="text">日出时间</div>
+                  </Col>
+                  <Col>
+                    <div class="svg-icon svg-icon-sm svg-icon-green other-icon">
+                      <svg-icon svgid="svg-日落" />
+                    </div>
+                    <div class="value">{{ item.riluoshijian }}</div>
+                    <div class="text">日落时间</div>
+                  </Col>
+                </Row>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+        </div>
+      </div>
+    </el-dialog>
+    <el-dialog
+      top="50px"
+      title="查看视频"
+      :custom-class="videoDialogClass"
+      v-model="showVideoDialog"
+      width="80%"
+      :destroy-on-close="true"
+      :before-close="
+        (done) => {
+          videoDialogClass = 'modal animated a1 bounceOut';
+          delaylyFn(450, done);
+        }
+      "
+      @closed="
+        dialogVideoUrl = '';
+        videoDialogClass = 'modal animated a1 bounceIn';
+      "
+    >
+      <iframe
+        class="videoBoxiframe"
+        width="95%"
+        height="800px"
+        :src="dialogVideoUrl"
+      />
+    </el-dialog>
   </div>
 </template>
 
@@ -338,6 +441,10 @@ import Table from "@com/coms/table/table.vue";
 import RankTable from "./component/rank-table.vue";
 import Ppanel from "./component/p-panel.vue";
 import RadarPieChart from "@com/chart/pie/radar-pie-chart.vue";
+import DoubleLineChart from "@com/chart/line/double-line-chart.vue";
+import Col from "@com/coms/grid/col.vue";
+import Row from "@com/coms/grid/row.vue";
+import SvgIcon from "@com/coms/icon/svg-icon.vue";
 
 export default {
   // 名称
@@ -353,6 +460,10 @@ export default {
     StBack,
     RankTable,
     Ppanel,
+    DoubleLineChart,
+    Col,
+    Row,
+    SvgIcon,
   },
   // 数据
   data() {
@@ -360,16 +471,32 @@ export default {
     return {
       videoShow: true,
       showPanel: false,
-      exchangeBtn: false,
-      exchangeBtn1: false,
+      bjSwitch: false,
+      warnSwitch: false,
       timmer1: null,
+      showWeatherDialog: false,
       showTableDialog: false,
+      showHealthDialog: false,
+      weathercollapse: "",
+      weatherChart: [
+        {
+          title: "温度",
+          smooth: true,
+          value: [],
+        },
+        {
+          title: "湿度",
+          smooth: true,
+          value: [],
+        },
+      ],
       videoDialogClass: "modal animated a1 bounceIn",
       tableDialogClass: "modal animated a1 fadeInLeftBig",
       peopleClass: "",
       timeStr: "",
       wpId: "0",
       tqmap1: {},
+      tqmap5: [],
       gxkmap: {},
       tableItem: {},
       mapSource: {},
@@ -377,42 +504,50 @@ export default {
         [
           {
             url: "http://10.155.32.4:9984/ws.html",
-            token: "?token=SG01_48_TD&autoplay=true",
+            token: "?token=SBQ_FDC_SC&autoplay=true",
+            class: "",
             switch: true,
           },
           {
             url: "http://10.155.32.4:9984/ws.html",
-            token: "?token=SG01_48_TD&autoplay=true",
+            token: "?token=NSS_FDC_SC&autoplay=true",
+            class: "",
             switch: true,
           },
         ],
         [
           {
             url: "http://10.155.32.4:9984/ws.html",
-            token: "?token=SG01_01_TD&autoplay=true",
+            token: "?token=QS_FDC_SC&autoplay=true",
+            class: "",
             switch: true,
           },
           {
             url: "http://10.155.32.4:9984/ws.html",
-            token: "?token=SG01_02_TD&autoplay=true",
+            token: "?token=MHS_FDC_SC&autoplay=true",
+            class: "",
             switch: true,
           },
         ],
         [
           {
             url: "http://10.155.32.4:9984/ws.html",
-            token: "?token=SG01_03_TD&autoplay=true",
+            token: "?token=XS_FDC_SC&autoplay=true",
+            class: "",
             switch: true,
           },
           {
             url: "http://10.155.32.4:9984/ws.html",
-            token: "?token=SG01_04_TD&autoplay=true",
+            token: "?token=PL_GDC_SC&autoplay=true",
+            class: "",
             switch: true,
           },
         ],
       ],
       showVideoDialog: false,
       dialogVideoUrl: "",
+      warnChartData: [],
+      bjChartData: [],
       ForecastPower: [
         {
           name: "今日预测电量",
@@ -468,58 +603,38 @@ export default {
         ],
         data: [],
       },
-      levelTableData: {
+      sels: {
         column: [
           {
-            name: "编号",
-            field: "no",
-          },
-          {
-            name: "等级",
-            field: "level",
-          },
-          {
-            name: "分数",
-            field: "score",
-          },
-        ],
-        data: [
-          {
-            no: "MHS_A01",
-            level: "AAA",
-            score: 98,
-          },
-          {
-            no: "MHS_A02",
-            level: "AAA",
-            score: 95,
-          },
-          {
-            no: "MHS_A01",
-            level: "AA",
-            score: 94,
+            name: "风机编号",
+            field: "windPowerStationId",
           },
           {
-            no: "MHS_A02",
-            level: "BB",
-            score: 92,
+            name: "停机时间",
+            field: "stopTime",
+            width: "120px",
           },
           {
-            no: "MHS_A01",
-            level: "BB",
-            score: 90,
+            name: "停机时长",
+            field: "stopHours",
           },
         ],
+        data: [],
       },
-      sels: {
+      rmls: {
         column: [
           {
             name: "风机编号",
-            field: "windTurbineId",
+            field: "wtId",
           },
           {
-            name: "时间",
-            field: "stopTime",
+            name: "推荐时间",
+            field: "recodedate",
+            width: "120px",
+          },
+          {
+            name: "类型",
+            field: "operation",
           },
         ],
         data: [],
@@ -529,6 +644,10 @@ export default {
 
   // 函数
   methods: {
+    openWeatherDialog() {
+      this.showWeatherDialog = true;
+    },
+
     openVideoDialog(item) {
       if (item.url && item.token) {
         this.dialogVideoUrl = item.url + item.token;
@@ -545,9 +664,35 @@ export default {
           wpId: that.wpId,
         },
         success(res) {
-          console.log(11111, res);
+          res.data.tqmap5.ls.forEach((ele) => {
+            ele.time = new Date(ele.time).formatDate("yyyy-MM-dd hh:mm");
+          });
+
+          const keys = ["wd", "sd"];
+          let weatherChart = [
+            {
+              title: "温度",
+              smooth: true,
+              value: [],
+            },
+            {
+              title: "湿度",
+              smooth: true,
+              value: [],
+            },
+          ];
+
+          keys.forEach((key, keyIndex) => {
+            res.data.tqmap5.ls.forEach((ele) => {
+              weatherChart[keyIndex].value.push({
+                text: ele.time,
+                value: ele[key],
+              });
+            });
+          });
 
           that.tqmap1 = res.data.tqmap1;
+          that.tqmap5 = res.data.tqmap5.ls;
 
           res.data.sels.forEach((ele) => {
             ele.stopTime = new Date(ele.stopTime).formatDate(
@@ -558,8 +703,16 @@ export default {
             );
           });
 
+          res.data.rmls.forEach((ele) => {
+            ele.recodedate = new Date(ele.recodedate).formatDate(
+              "yyyy-MM-dd hh:mm:ss"
+            );
+          });
+
           that.sels.data = res.data.sels;
+          that.rmls.data = res.data.rmls;
           that.gxkmap = res.data.gxkmap;
+          that.weatherChart = weatherChart;
         },
       });
     },
@@ -579,6 +732,102 @@ export default {
       });
     },
 
+    // 获取报警玫瑰图
+    getWarnMGT() {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://192.168.1.18:8075/",
+        subUrl: "alarm/count/query/alltotal",
+        data: {
+          stationid: that.wpId,
+        },
+        success(res) {
+          let warnChartData = [];
+          for (let key in res.data) {
+            const ele = res.data[key];
+            warnChartData.push({
+              value: ele.count,
+              name: ele.relatePartsText,
+            });
+          }
+          that.warnChartData = warnChartData;
+        },
+      });
+    },
+
+    // 获取故障玫瑰图
+    getStopMGT() {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://192.168.1.18:8075/",
+        subUrl: "shutdown/count/alltotal",
+        data: {
+          stId: that.wpId,
+        },
+        success(res) {
+          let warnChartData = [];
+          for (let key in res.data) {
+            const ele = res.data[key];
+            warnChartData.push({
+              value: ele.count,
+              name: ele.type,
+            });
+          }
+          that.warnChartData = warnChartData;
+        },
+      });
+    },
+
+    // 获取库存玫瑰图
+    getRepertoryMGT() {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://192.168.1.18:9988/",
+        subUrl: "inventory/groupcount",
+        data: {
+          stId: that.wpId,
+        },
+        success(res) {
+          let bjChartData = [];
+          for (let key in res.data) {
+            const ele = res.data[key];
+            bjChartData.push({
+              value: ele.curbal,
+              name: ele.description,
+            });
+          }
+          that.bjChartData = bjChartData;
+        },
+      });
+    },
+
+    // 获取记录玫瑰图
+    getRecordMGT() {
+      let that = this;
+      that.API.requestData({
+        method: "GET",
+        baseURL: "http://192.168.1.18:9988/",
+        subUrl: "equoperationrecord/equupdatecount",
+        data: {
+          stId: that.wpId,
+        },
+        success(res) {
+          let bjChartData = [];
+          for (let key in res.data) {
+            const ele = res.data[key];
+            bjChartData.push({
+              value: ele.count,
+              name: ele.description,
+            });
+          }
+          that.bjChartData = bjChartData;
+        },
+      });
+    },
+
     // 获取中部地图数据
     getTop4Info() {
       let that = this;
@@ -592,17 +841,23 @@ export default {
         success(res) {
           res.data.forEach((ele, index) => {
             ele.index = index;
+            ele.jobcode = ele.jobcode || "------";
           });
           that.workData.data = res.data;
         },
       });
     },
 
-    clickRow(row) {
+    clickStopRow(row) {
       this.tableItem = row;
       this.showTableDialog = true;
     },
 
+    clickHealthRow(row) {
+      this.tableItem = row;
+      this.showHealthDialog = true;
+    },
+
     delaylyFn(time, fn) {
       setTimeout(() => {
         fn();
@@ -630,16 +885,52 @@ export default {
       }
     },
 
-    when: function () {
+    // 点击风场或者光伏
+    clickMapItem(videoArray) {
+      this.videoArray.forEach((pEle, pIndex) => {
+        pEle.forEach((cEle, cIndex) => {
+          setTimeout(() => {
+            // 设置隐藏动画
+            cEle.class = "animated a1 flipOutX";
+            setTimeout(() => {
+              // 修改 token
+              cEle.token =
+                "?token=" + videoArray[pIndex + cIndex] + "&autoplay=true";
+              setTimeout(() => {
+                // 设置显示动画
+                cEle.class = "animated a1 flipInX";
+              }, 150);
+            }, 350);
+          }, (pIndex + cIndex + pIndex) * 150);
+        });
+      });
+    },
+
+    // 页面跳转
+    jumpUrl(url) {
+      this.$router.push(url);
+    },
+
+    when() {
       this.showPanel = true;
     },
 
-    exchange: function () {
-      this.exchangeBtn = !this.exchangeBtn;
+    changeBjSwitch() {
+      this.bjSwitch = !this.bjSwitch;
+      if (this.bjSwitch) {
+        this.getRecordMGT();
+      } else {
+        this.getRepertoryMGT();
+      }
     },
 
-    exchange1: function () {
-      this.exchangeBtn1 = !this.exchangeBtn1;
+    changeWarnSwitch() {
+      this.warnSwitch = !this.warnSwitch;
+      if (this.warnSwitch) {
+        this.getStopMGT();
+      } else {
+        this.getWarnMGT();
+      }
     },
   },
   // 生命周期钩子
@@ -650,6 +941,8 @@ export default {
     this.getWtInfo();
     this.getWpHealthInfo();
     this.getTop4Info();
+    this.getWarnMGT();
+    this.getRepertoryMGT();
     this.timeStr = new Date().formatDate("MM-dd hh:mm");
     this.timmer1 = setInterval(() => {
       this.timeStr = new Date().formatDate("MM-dd hh:mm");
@@ -815,6 +1108,83 @@ export default {
   cursor: pointer;
 }
 
+.weatherBox {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  .l,
+  .r {
+    width: 48%;
+    height: 500px;
+    padding: 50px 0;
+  }
+
+  .el-collapse {
+    border-top: 1px solid #999;
+  }
+
+  .el-collapse-item .el-collapse-item__wrap {
+    border-bottom: 1px solid #999;
+  }
+
+  .el-collapse-item__content {
+    background: rgba(18, 29, 28);
+    color: rgba(255, 255, 255, 0.75);
+    padding: 20px;
+  }
+
+  .el-collapse-item__header {
+    background: rgb(18, 29, 28);
+    border-bottom: 1px solid #999;
+    color: rgba(255, 255, 255, 0.75);
+  }
+
+  .el-card__header,
+  .el-collapse,
+  .el-collapse-item__header {
+    border-bottom: 1px solid #999;
+  }
+
+  .collapseItemTitle {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+
+    .svg {
+      width: 20px;
+      height: 20px;
+    }
+
+    .info {
+      margin-left: 4px;
+    }
+
+    .otherWea {
+      margin-right: 10px;
+    }
+  }
+
+  .other-info {
+    text-align: center;
+    font-size: @fontsize-s;
+
+    .text {
+      color: @font-color;
+      font-size: 12px;
+    }
+
+    .value {
+      margin: 0.741vh 0 0 0;
+    }
+
+    .other-icon {
+      margin: 0 auto;
+    }
+  }
+}
+
 .videoBoxiframe {
   border: none;
   overflow: hidden;
@@ -822,6 +1192,18 @@ export default {
 }
 
 .modal {
+  .dialogTitle {
+    position: relative;
+  }
+
+  .jumpBtn {
+    position: absolute;
+    right: 30px;
+    top: 8px;
+    cursor: pointer;
+    font-size: 20px;
+  }
+
   animation-duration: 0;
   @keyframes dialog-fade-in {
     0% {

src/views/SandTable/component/p-panel.vue

@@ -3,13 +3,13 @@
     <div class="p-panel-title font-sm">{{ title }}</div>
     <div class="p-panel-body">
       <div class="pp-info">
-        <div class="pp-info-days mg-r-16">
+        <div class="pp-info-days">
           <span class="font-num green font-lg pp-info-days-num">{{
             days
           }}</span>
           <span class="gray font-sm">{{ daysUnit }}</span>
         </div>
-        <div class="pp-info-data mg-l-16">
+        <div class="pp-info-data">
           <span class="gray-l font-sm">{{ data1Str }}</span>
           <span class="pp-icon-l svg-icon" :class="data1IconClass">
             <svg-icon :svgid="data1Icon" />
@@ -42,7 +42,7 @@
             'border-color: ' + dataColor + '4d; background: ' + backColor + ';'
           "
         >
-          <div class="pp-data-split" v-for="index of 20" :key="index"></div>
+          <div class="pp-data-split" v-for="index of 19" :key="index"></div>
           <div
             class="pp-data-num"
             :style="
@@ -147,11 +147,16 @@ export default {
 <style lang="less">
 .p-panel {
   background: #1a1f2fcc;
+  width: 206px;
 
   .font-sm {
     font-size: 12px;
   }
 
+  .font-lg {
+    font-size: 16px;
+  }
+
   .p-panel-title {
     height: 2.778vh;
     line-height: 2.778vh;
@@ -173,7 +178,7 @@ export default {
         margin-left: auto;
 
         .pp-icon-l {
-          padding: 1.111vh 2.037vh 0 0.556vh;
+          padding: 1.111vh 1.037vh 0 0.556vh;
         }
 
         .pp-icon-r {
@@ -200,7 +205,7 @@ export default {
 
       .pp-data-box {
         height: 0.741vh;
-        width: 200px;
+        width: 190px;
         border: 1px solid;
         position: relative;
         display: flex;