Update modeControl.vue

src/components/modeControl/modeControl.vue

@@ -1,176 +1,176 @@
 <template>
-    <div class="body">
-        <img class="logo" src="../../assets/img/logo.png" alt="" />
-        <div class="control">
-            <div :class="current === 0 ? 'smart_on' : 'smart'" @click="ChangeBar(0)">智能</div>
-            <div :class="current === 1 ? 'recommend_on' : 'recommend'" @click="ChangeBar(1)" >推荐</div>
-            <div :class="current === 2 ? 'manual_on' : 'manual'" @click="ChangeBar(2)" >手动</div>
-        </div>
-        <div style="display: flex; flex-direction: row; z-index: 2">
-            <div class="showData">
-                <div class="dataBox" @dblclick="dbClicks(
-                    $store.state.currentStation
-                        ? showDate?.stationOverviewInfos[$store.state.currentStation]
-                            ?.healthIndex
-                        : showDate.healthIndex,
-                    '健康指数'
-                    )">
-                <div class="dataTitle">健康指数</div>
-                    <div class="datas">
-                        {{$store.state.currentStation ? healthIndex.toFixed(0) : allHealthIndex.toFixed(0)}}%
-                    </div>
-                </div>
-                <div class="dataBox" @dblclick="dbClicks(
-                    $store.state.currentStation
-                        ? showDate?.stationOverviewInfos[$store.state.currentStation]
-                            ?.resourceIndex
-                        : showDate.resourceIndex,
-                    '资源指数'
-                    )">
-                    <div class="dataTitle">资源指数</div>
-                    <div class="datas">
-                        {{
-                        $store.state.currentStation
-                            ? resourceIndex.toFixed(0)
-                            : allResourceIndex.toFixed(0)
-                        }}%
-                    </div>
-                </div>
-            </div>
-            <div>
-                <div id="mainEcharts" @dblclick="dbClick()" class="echarts"></div>
-                <div class="powerContent">
-                    <div class="power" @dblclick="dbClicks(
-                            $store.state.currentStation
-                            ? showDate?.stationOverviewInfos[$store.state.currentStation]
-                                ?.realTimePower
-                            : showDate.realTimePower,
-                            '实际功率'
-                        )">
-                        <div class="powerTitle">实际功率</div>
-                        <div class="powerDatas" style="background-color: rgba(75, 85, 174, 1)" >
-                        {{
-                            $store.state.currentStation
-                            ? showDate?.stationOverviewInfos[
-                                $store.state.currentStation
-                                ]?.realTimePower?.value.toFixed(2)
-                            : showDate.realTimePower?.value.toFixed(2)
-                        }} <div style="font-size: 12px;">MW</div>
-                        </div>
-                    </div>
-                    <div class="power1" @dblclick="
-                        dbClicks(
-                            $store.state.currentStation
-                            ? showDate?.stationOverviewInfos[$store.state.currentStation]
-                                ?.theoreticalPower
-                            : showDate.theoreticalPower,
-                            '理论功率'
-                        ) "
-                    >
-                        <div class="powerTitle">理论功率</div>
-                        <div
-                        class="powerDatas"
-                        style="background-color: rgba(05, 187, 76, 1)"
-                        >
-                        {{
-                            $store.state.currentStation
-                            ? 
-                            (showDate?.stationOverviewInfos[
-                                $store.state.currentStation
-                                ]?.realTimePower?.value*1.15).toFixed(2)
-                            : (showDate.realTimePower?.value*1.15).toFixed(2)
-                        }}<div style="font-size: 12px;">MW</div>
-                        </div>
-                    </div>
-                    <div
-                        class="power2"
-                        @dblclick="
-                        dbClicks(
-                            $store.state.currentStation
-                            ? showDate?.stationOverviewInfos[$store.state.currentStation]
-                                ?.agcPowerSet
-                            : showDate.agcPowerSet,
-                            'AGC有功设定'
-                        )
-                        "
-                    >
-                        <div class="powerTitle">AGC有功设定</div>
-                        <div
-                        class="powerDatas"
-                        style="background-color: rgba(186, 50, 55, 1)"
-                        >
-                        {{
-                            $store.state.currentStation
-                            ? showDate?.stationOverviewInfos[
-                                $store.state.currentStation
-                                ]?.agcPowerSet?.value.toFixed(2)
-                            : showDate.agcPowerSet?.value.toFixed(2)
-                        }}<div style="font-size: 12px;">MW</div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-            <div class="showData">
-                <div
-                class="dataBox-right"
-                @dblclick="
-                    dbClicks(
-                    $store.state.currentStation
-                        ? showDate?.stationOverviewInfos[$store.state.currentStation]
-                            ?.windEnergyRate
-                        : showDate.windEnergyRate,
-                    '风能利用率'
-                    )
-                "
-                >
-                <div class="dataTitle">风能利用率</div>
-                <div class="datas" v-if="showDate.windEnergyRate?.value <= 100">
-                    {{
-                    $store.state.currentStation
-                        ? showDate?.stationOverviewInfos[
-                            $store.state.currentStation
-                        ]?.windEnergyRate?.value.toFixed(2)
-                        : showDate.windEnergyRate?.value.toFixed(2)
-                    }}%
-                </div>
-                </div>
-                <div
-                class="dataBox-right"
-                @dblclick="
-                    dbClicks(
-                    $store.state.currentStation
-                        ? showDate?.stationOverviewInfos[$store.state.currentStation]
-                            ?.curveFollowingRate
-                        : showDate.curveFollowingRate,
-                    '曲线跟随率'
-                    )
-                "
-                >
-                <div class="dataTitle">曲线跟随率</div>
-                <div class="datas" v-if="showDate.curveFollowingRate?.value <= 100">
-                    {{
-                    $store.state.currentStation
-                        ? showDate?.stationOverviewInfos[
-                            $store.state.currentStation
-                        ]?.curveFollowingRate?.value.toFixed(2)
-                        : showDate.curveFollowingRate?.value.toFixed(2)
-                    }}%
-                </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <DetailPages ref="detials" @closed="closed()" v-model="dialogVisible">
-    </DetailPages>
-    <Details
-        @closed="closeds()"
-        v-model="display"
-        :partsName="partsName"
-        echartsId="modelEcharts"
-        :datas="modelDetails"
-        @search-data="search"
-        @original-data="originalData"
-    ></Details>
+  <div class="body">
+      <img class="logo" src="../../assets/img/logo.png" alt="" />
+      <div class="control">
+          <div :class="current === 0 ? 'smart_on' : 'smart'" @click="ChangeBar(0)">智能</div>
+          <div :class="current === 1 ? 'recommend_on' : 'recommend'" @click="ChangeBar(1)" >推荐</div>
+          <div :class="current === 2 ? 'manual_on' : 'manual'" @click="ChangeBar(2)" >手动</div>
+      </div>
+      <div style="display: flex; flex-direction: row; z-index: 2">
+          <div class="showData">
+              <div class="dataBox" @dblclick="dbClicks(
+                  $store.state.currentStation
+                      ? showDate?.stationOverviewInfos[$store.state.currentStation]
+                          ?.healthIndex
+                      : showDate.healthIndex,
+                  '健康指数'
+                  )">
+              <div class="dataTitle">健康指数</div>
+                  <div class="datas">
+                      {{$store.state.currentStation ? healthIndex.toFixed(0) : allHealthIndex.toFixed(0)}}%
+                  </div>
+              </div>
+              <div class="dataBox" @dblclick="dbClicks(
+                  $store.state.currentStation
+                      ? showDate?.stationOverviewInfos[$store.state.currentStation]
+                          ?.resourceIndex
+                      : showDate.resourceIndex,
+                  '资源指数'
+                  )">
+                  <div class="dataTitle">资源指数</div>
+                  <div class="datas">
+                      {{
+                      $store.state.currentStation
+                          ? resourceIndex.toFixed(0)
+                          : allResourceIndex.toFixed(0)
+                      }}%
+                  </div>
+              </div>
+          </div>
+          <div>
+              <div id="mainEcharts" @dblclick="dbClick()" class="echarts"></div>
+              <div class="powerContent">
+                  <div class="power" @dblclick="dbClicks(
+                          $store.state.currentStation
+                          ? showDate?.stationOverviewInfos[$store.state.currentStation]
+                              ?.realTimePower
+                          : showDate.realTimePower,
+                          '实际功率'
+                      )">
+                      <div class="powerTitle">实际功率</div>
+                      <div class="powerDatas" style="background-color: rgba(75, 85, 174, 1)" >
+                      {{
+                          $store.state.currentStation
+                          ? showDate?.stationOverviewInfos[
+                              $store.state.currentStation
+                              ]?.realTimePower?.value.toFixed(2)
+                          : showDate.realTimePower?.value.toFixed(2)
+                      }} <div style="font-size: 12px;">MW</div>
+                      </div>
+                  </div>
+                  <div class="power1" @dblclick="
+                      dbClicks(
+                          $store.state.currentStation
+                          ? showDate?.stationOverviewInfos[$store.state.currentStation]
+                              ?.theoreticalPower
+                          : showDate.theoreticalPower,
+                          '理论功率'
+                      ) "
+                  >
+                      <div class="powerTitle">理论功率</div>
+                      <div
+                      class="powerDatas"
+                      style="background-color: rgba(05, 187, 76, 1)"
+                      >
+                      {{
+                          $store.state.currentStation
+                          ? 
+                          (showDate?.stationOverviewInfos[
+                              $store.state.currentStation
+                              ]?.realTimePower?.value*1.15).toFixed(2)
+                          : (showDate.realTimePower?.value*1.15).toFixed(2)
+                      }}<div style="font-size: 12px;">MW</div>
+                      </div>
+                  </div>
+                  <div
+                      class="power2"
+                      @dblclick="
+                      dbClicks(
+                          $store.state.currentStation
+                          ? showDate?.stationOverviewInfos[$store.state.currentStation]
+                              ?.agcPowerSet
+                          : showDate.agcPowerSet,
+                          'AGC有功设定'
+                      )
+                      "
+                  >
+                      <div class="powerTitle">AGC有功设定</div>
+                      <div
+                      class="powerDatas"
+                      style="background-color: rgba(186, 50, 55, 1)"
+                      >
+                      {{
+                          $store.state.currentStation
+                          ? showDate?.stationOverviewInfos[
+                              $store.state.currentStation
+                              ]?.agcPowerSet?.value.toFixed(2)
+                          : showDate.agcPowerSet?.value.toFixed(2)
+                      }}<div style="font-size: 12px;">MW</div>
+                      </div>
+                  </div>
+              </div>
+          </div>
+          <div class="showData">
+              <div
+              class="dataBox-right"
+              @dblclick="
+                  dbClicks(
+                  $store.state.currentStation
+                      ? showDate?.stationOverviewInfos[$store.state.currentStation]
+                          ?.windEnergyRate
+                      : showDate.windEnergyRate,
+                  '风能利用率'
+                  )
+              "
+              >
+              <div class="dataTitle">风能利用率</div>
+              <div class="datas" v-if="showDate.windEnergyRate?.value <= 100">
+                  {{
+                  $store.state.currentStation
+                      ? showDate?.stationOverviewInfos[
+                          $store.state.currentStation
+                      ]?.windEnergyRate?.value.toFixed(2)
+                      : showDate.windEnergyRate?.value.toFixed(2)
+                  }}%
+              </div>
+              </div>
+              <div
+              class="dataBox-right"
+              @dblclick="
+                  dbClicks(
+                  $store.state.currentStation
+                      ? showDate?.stationOverviewInfos[$store.state.currentStation]
+                          ?.curveFollowingRate
+                      : showDate.curveFollowingRate,
+                  '曲线跟随率'
+                  )
+              "
+              >
+              <div class="dataTitle">曲线跟随率</div>
+              <div class="datas" v-if="showDate.curveFollowingRate?.value <= 100">
+                  {{
+                  $store.state.currentStation
+                      ? showDate?.stationOverviewInfos[
+                          $store.state.currentStation
+                      ]?.curveFollowingRate?.value.toFixed(2)
+                      : showDate.curveFollowingRate?.value.toFixed(2)
+                  }}%
+              </div>
+              </div>
+          </div>
+      </div>
+  </div>
+  <DetailPages ref="detials" @closed="closed()" v-model="dialogVisible">
+  </DetailPages>
+  <Details
+      @closed="closeds()"
+      v-model="display"
+      :partsName="partsName"
+      echartsId="modelEcharts"
+      :datas="modelDetails"
+      @search-data="search"
+      @original-data="originalData"
+  ></Details>
 </template>
 <script>
 import BackgroundData from "utils/BackgroundData";
@@ -180,310 +180,301 @@ import * as echarts from "echarts";
 import DetailPages from "./detailPages.vue";
 import Details from "../basicDataDetails.vue";
 export default {
-  props: {
-    // current: {
-    //     type: Number,
-    // },
+props: {
+  // current: {
+  //     type: Number,
+  // },
+},
+components: {
+  DetailPages,
+  Details,
+},
+data() {
+  return {
+    current: 1,
+    datas: {},
+    list: {},
+    showDate: {},
+    winFlag: 0,
+    curveFlag: 0,
+    fieldFlag: 0,
+    dialogVisible: false,
+    display: false,
+    modelDetails: [],
+    partsName: "",
+    modelData: {},
+    interval: 60,
+    allHealthIndex: 0,
+    allResourceIndex: 0,
+    healthIndex: 0,
+    resourceIndex: 0,
+    intervals: null,
+  };
+},
+created() {
+  this.initData();
+  this.getEchartss();
+  this.intervals = setInterval(this.getEchartss, 10000);
+},
+computed: {},
+mounted() {
+  this.$nextTick(() => {
+    if (document.getElementById("mainEcharts"), 'dark') {
+      this.getEcharts();
+    }
+  });
+},
+methods: {
+  initData: function () {
+    let mb = MessageBridge.getInstance();
+    let vss = [
+      { key: "/topic/voice-control", action: this.windturbineMessage },
+    ];
+    mb.register(vss);
   },
-  components: {
-    DetailPages,
-    Details,
-  },
-  data() {
-    return {
-      current: 1,
-      datas: {},
-      list: {},
-      showDate: {},
-      winFlag: 0,
-      curveFlag: 0,
-      fieldFlag: 0,
-      dialogVisible: false,
-      display: false,
-      modelDetails: [],
-      partsName: "",
-      modelData: {},
-      interval: 60,
-      allHealthIndex: 0,
-      allResourceIndex: 0,
-      healthIndex: 0,
-      resourceIndex: 0,
-      intervals: null,
-    };
-  },
-  created() {
-    this.initData();
-    this.getEchartss();
-    this.intervals = setInterval(this.getEchartss, 10000);
-  },
-  computed: {},
-  mounted() {
-    this.$nextTick(() => {
-      if (document.getElementById("mainEcharts"), 'dark') {
-        this.getEcharts();
+  windturbineMessage(msg) {
+    if (msg === "CLOSE") {
+      this.dialogVisible = false;
       }
-    });
+    if(msg === 'OPEN_PAGE_MANUAL'){
+      this.ChangeBar(2)
+    }
+    if(msg === 'OPEN_PAGE_AUTOMATIC'){
+      this.ChangeBar(0)
+    }
+    if(msg === 'OPEN_PAGE_RECOMMENDATION'){
+      this.ChangeBar(1)
+    }
+    if(msg === 'OPEN_AGC-GS'){
+      this.dbClick()
+    }
   },
-  methods: {
-    initData: function () {
-      let mb = MessageBridge.getInstance();
-      let vss = [
-        { key: "/topic/voice-control", action: this.windturbineMessage },
-      ];
-      mb.register(vss);
-    },
-    windturbineMessage(msg) {
-      if (msg === "CLOSE") {
-        this.dialogVisible = false;
-        }
-      if(msg === 'OPEN_PAGE_MANUAL'){
-        this.ChangeBar(2)
-      }
-      if(msg === 'OPEN_PAGE_AUTOMATIC'){
-        this.ChangeBar(0)
-      }
-      if(msg === 'OPEN_PAGE_RECOMMENDATION'){
-        this.ChangeBar(1)
-      }
-      if(msg === 'OPEN_AGC-GS'){
-        this.dbClick()
-      }
-    },
-    getEchartss() {
-      api.stationOverview().then((res) => {
-        this.showDate = res.data;
-        this.getEcharts();
-        this.allHealthIndex =
-          (this.showDate.healthIndex?.value / this.showDate.healthIndexMax) *
-          100;
-        this.allResourceIndex =
-          (this.showDate.resourceIndex?.value /
-            this.showDate.resourceIndexMax) *
-          100;
-        this.healthIndex = this.$store.state.currentStation
-          ? (this.showDate.stationOverviewInfos[
+  getEchartss() {
+    api.stationOverview().then((res) => {
+      this.showDate = res.data;
+      this.getEcharts();
+      this.allHealthIndex =
+        (this.showDate.healthIndex?.value / this.showDate.healthIndexMax) *
+        100;
+      this.allResourceIndex =
+        (this.showDate.resourceIndex?.value /
+          this.showDate.resourceIndexMax) *
+        100;
+      this.healthIndex = this.$store.state.currentStation
+        ? (this.showDate.stationOverviewInfos[
+            this.$store.state.currentStation
+          ].healthIndex?.value /
+            this.showDate.stationOverviewInfos[
               this.$store.state.currentStation
-            ].healthIndex?.value /
-              this.showDate.stationOverviewInfos[
-                this.$store.state.currentStation
-              ].healthIndexMax) *
-            100
-          : 0;
-        this.resourceIndex = this.$store.state.currentStation
-          ? (this.showDate.stationOverviewInfos[
+            ].healthIndexMax) *
+          100
+        : 0;
+      this.resourceIndex = this.$store.state.currentStation
+        ? (this.showDate.stationOverviewInfos[
+            this.$store.state.currentStation
+          ].resourceIndex?.value /
+            this.showDate.stationOverviewInfos[
               this.$store.state.currentStation
-            ].resourceIndex?.value /
-              this.showDate.stationOverviewInfos[
-                this.$store.state.currentStation
-              ].resourceIndexMax) *
-            100
-          : 0;
-      });
-    },
-    getEcharts() {
-      let chartDom = document.getElementById("mainEcharts");
-      let myChart = echarts.init(chartDom);
-      let option;
-      option = {
-        series: [
-            {
-                type: "gauge",
-                max: 600,
-                splitNumber: 8,
-                radius: '70%',
-                anchor: {
-                show: true,
-                showAbove: true,
-                size: 9,
-                width: 5,
-                itemStyle: {
-                    color: "#FAC858",
-                },
-                },
-                pointer: {
-                    icon: "",
-                    width: 3,
-                    length: "80%",
-                    offsetCenter: [0, "5%"],
-                },
+            ].resourceIndexMax) *
+          100
+        : 0;
+    });
+  },
+  getEcharts() {
+    let chartDom = document.getElementById("mainEcharts");
+    let myChart = echarts.init(chartDom);
+    let option;
+    const data1 = this.$store.state.currentStation
+      ? Number(
+          this.showDate?.stationOverviewInfos[
+            this.$store.state.currentStation
+          ]?.realTimePower?.value
+        )
+      : Number(this.showDate.realTimePower?.value);
+    const data2 = this.$store.state.currentStation
+      ? Number(
+          this.showDate?.stationOverviewInfos[
+            this.$store.state.currentStation
+          ]?.realTimePower?.value
+        ) *1.15
+      : Number(this.showDate.realTimePower?.value)*1.15;
+    const data3 = this.$store.state.currentStation
+      ? Number(
+          this.showDate?.stationOverviewInfos[
+            this.$store.state.currentStation
+          ]?.agcPowerSet?.value
+        )
+      : Number(this.showDate.agcPowerSet?.value);
 
-                progress: {
-                show: true,
-                overlap: true,
-                roundCap: true,
-                },
-                axisLine: {
-                    lineStyle: {
-                        //仪表盘轴线相关配置。
-                        width: 2,
-                        color: [[1, "rgba(83, 92, 93, 0.5)"]],
-                        // color: [[1, "#fff"]],
-                    },
-                },
-                axisLabel: {
-                    textStyle: {//数字刻度样式
-                        color: '#fff',
-                        // fontSize: 12,
-                    }
-                },
-                splitLine: {
-                //分隔线样式相关
-                    length: 0, //分割线的长度
-                    lineStyle: {
-                        width: 1,
-                        color: "#fff",
-                    },
-                },
-                data: [
-                {
-                    value: 125.85,
-                    // name: '实际功率',
-                    itemStyle: {
-                    color: "rgba(75, 85, 174, 1)",
-                    },
-                },
-                {
-                    value: 137.63,
-                    // name: '理论功率',
-                    itemStyle: {
-                    color: "rgba(05, 187, 76, 1)",
-                    },
-                },
-                {
-                    value: 132.04,
-                    // name: 'AGC有功设定',
-                    itemStyle: {
-                    color: "rgba(186, 50, 55, 1)",
-                    },
-                },
-                ],
-                title: false,
-                detail: false,
-                //     title: {
-                //         fontSize: 12
-                //     },
-                //     detail: {
-                //         width: 20,
-                //         height: 7,
-                //         fontSize: 12,
-                //         color: '#fff',
-                //         backgroundColor: 'auto',
-                //         borderRadius: 3,
-                //         formatter: ''
-                //     }
-            },
-        ],
-      };
-      option.series[0].data[0].value = this.$store.state.currentStation
-        ? Number(
-            this.showDate?.stationOverviewInfos[
-              this.$store.state.currentStation
-            ]?.realTimePower?.value
-          )
-        : Number(this.showDate.realTimePower?.value);
-      option.series[0].data[1].value = this.$store.state.currentStation
-        ? Number(
-            this.showDate?.stationOverviewInfos[
-              this.$store.state.currentStation
-            ]?.realTimePower?.value
-          ) *1.15
-        : Number(this.showDate.realTimePower?.value)*1.15;
-      option.series[0].data[2].value = this.$store.state.currentStation
-        ? Number(
-            this.showDate?.stationOverviewInfos[
-              this.$store.state.currentStation
-            ]?.agcPowerSet?.value
-          )
-        : Number(this.showDate.agcPowerSet?.value);
-      myChart.setOption(option, true);
-    },
-    ChangeBar(values) {
-      let bd = BackgroundData.getInstance();
-      this.$router.push(`/?current=${values}`);
-      if (!bd.LoginUser) {
-        this.$notify({
-          title: "请登录",
-          message: "切换模式需要先登录！",
-          type: "warning",
-          position: "bottom-right",
-          offset: 60,
-          duration: 3000,
-        });
-        return;
+    
+    const ceilNumber = (number) => {
+      let bite = 0;
+      if(number < 100){
+        return 100;
+      }
+      while( number >= 100 ){
+        number /= 100;
+        bite += 1;
       }
-      if (this.current !== values) {
-        this.$store.commit("current", Number(values));
-        if (values === 2) {
+      return Math.ceil(number) * Math.pow(100,bite);
+    }
+    option = {
+      series: [
+          {
+              type: "gauge",
+              max: ceilNumber(Math.max(data1,data2,data3)),
+              splitNumber: 8,
+              radius: '70%',
+              anchor: {
+              show: true,
+              showAbove: true,
+              size: 9,
+              width: 5,
+              itemStyle: {
+                  color: "#FAC858",
+              },
+              },
+              pointer: {
+                  icon: "",
+                  width: 3,
+                  length: "80%",
+                  offsetCenter: [0, "5%"],
+              },
+
+              progress: {
+              show: true,
+              overlap: true,
+              roundCap: true,
+              },
+              axisLine: {
+                  lineStyle: {
+                      //仪表盘轴线相关配置。
+                      width: 2,
+                      color: [[1, "rgba(83, 92, 93, 0.5)"]],
+                      // color: [[1, "#fff"]],
+                  },
+              },
+              axisLabel: {
+                  textStyle: {//数字刻度样式
+                      color: '#fff',
+                      // fontSize: 12,
+                  }
+              },
+              splitLine: {
+              //分隔线样式相关
+                  length: 0, //分割线的长度
+                  lineStyle: {
+                      width: 1,
+                      color: "#fff",
+                  },
+              },
+              data: [
+              {
+                  value: 125.85,
+                  // name: '实际功率',
+                  itemStyle: {
+                  color: "rgba(75, 85, 174, 1)",
+                  },
+              },
+              {
+                  value: 137.63,
+                  // name: '理论功率',
+                  itemStyle: {
+                  color: "rgba(05, 187, 76, 1)",
+                  },
+              },
+              {
+                  value: 132.04,
+                  // name: 'AGC有功设定',
+                  itemStyle: {
+                  color: "rgba(186, 50, 55, 1)",
+                  },
+              },
+              ],
+              title: false,
+              detail: false,
+              //     title: {
+              //         fontSize: 12
+              //     },
+              //     detail: {
+              //         width: 20,
+              //         height: 7,
+              //         fontSize: 12,
+              //         color: '#fff',
+              //         backgroundColor: 'auto',
+              //         borderRadius: 3,
+              //         formatter: ''
+              //     }
+          },
+      ],
+    };
+    option.series[0].data[0].value = data1
+    option.series[0].data[1].value = data2
+    option.series[0].data[2].value = data3
+    myChart.setOption(option, true);
+  },
+  ChangeBar(values) {
+    let bd = BackgroundData.getInstance();
+    this.$router.push(`/?current=${values}`);
+    if (!bd.LoginUser) {
+      this.$notify({
+        title: "请登录",
+        message: "切换模式需要先登录！",
+        type: "warning",
+        position: "bottom-right",
+        offset: 60,
+        duration: 3000,
+      });
+      return;
+    }
+    if (this.current !== values) {
+      this.$store.commit("current", Number(values));
+      if (values === 2) {
+        this.current = values;
+        this.$router.push(`/ManualPage?current=${values}`);
+      } else if (values === 1) {
+        this.$store.commit("currentStation", "");
+        this.$store.commit("current", values);
+        if (this.current === 0) {
+          this.current = values;
+        } else {
+          this.current = values;
+          this.$router.push(`/?current=${values}`);
+        }
+      } else if (values === 0) {
+        this.$store.commit("currentStation", "");
+        this.$store.commit("current", values);
+        if (this.current === 2) {
+          this.current = values;
+          this.$router.push(`/?current=${values}`);
+        } else {
           this.current = values;
-          this.$router.push(`/ManualPage?current=${values}`);
-        } else if (values === 1) {
-          this.$store.commit("currentStation", "");
-          this.$store.commit("current", values);
-          if (this.current === 0) {
-            this.current = values;
-          } else {
-            this.current = values;
-            this.$router.push(`/?current=${values}`);
-          }
-        } else if (values === 0) {
-          this.$store.commit("currentStation", "");
-          this.$store.commit("current", values);
-          if (this.current === 2) {
-            this.current = values;
-            this.$router.push(`/?current=${values}`);
-          } else {
-            this.current = values;
-          }
         }
-      } else if (values === 2) {
-        this.$router.push(`/ManualPage?current=${values}`);
       }
-    },
-    dbClick() {
-      this.dialogVisible = true;
-      this.$refs.detials.getDate();
-    },
-    dbClicks(data, partsName, timeValues) {
-      this.modelData = data;
-      let date = new Date();
-      let endTs = timeValues
-        ? timeValues[1] > date.getTime()
-          ? date.getTime()
-          : timeValues[1]
-        : date.getTime();
-      let startTs = timeValues ? timeValues[0] : endTs - 28800000;
-      data.tag &&
-        api
-          .getPower({
-            tagName: data.tag,
-            startTs: startTs,
-            endTs: endTs,
-            interval: this.interval,
-          })
-          .then((res) => {
-            if (res.data.length > 0) {
-              this.partsName = partsName;
-              this.display = true;
-              this.modelDetails = res.data;
-            } else {
-              this.modelDetails = [];
-            }
-          });
-    },
-    original(data, partsName, timeValues) {
-      this.modelData = data;
-      let date = new Date();
-      let endTs = timeValues
-        ? timeValues[1] > date.getTime()
-          ? date.getTime()
-          : timeValues[1]
-        : date.getTime();
-      let startTs = timeValues ? timeValues[0] : endTs - 28800000;
+    } else if (values === 2) {
+      this.$router.push(`/ManualPage?current=${values}`);
+    }
+  },
+  dbClick() {
+    this.dialogVisible = true;
+    this.$refs.detials.getDate();
+  },
+  dbClicks(data, partsName, timeValues) {
+    this.modelData = data;
+    let date = new Date();
+    let endTs = timeValues
+      ? timeValues[1] > date.getTime()
+        ? date.getTime()
+        : timeValues[1]
+      : date.getTime();
+    let startTs = timeValues ? timeValues[0] : endTs - 28800000;
+    data.tag &&
       api
-        .getOriginalPower({
+        .getPower({
           tagName: data.tag,
           startTs: startTs,
           endTs: endTs,
+          interval: this.interval,
         })
         .then((res) => {
           if (res.data.length > 0) {
@@ -494,249 +485,274 @@ export default {
             this.modelDetails = [];
           }
         });
-    },
-    search(values, interval) {
-      this.interval = interval;
-      this.dbClicks(this.modelData, this.partsName, values);
-    },
-    originalData(values) {
-      this.original(this.modelData, this.partsName, values);
-    },
-    closed() {
-      this.dialogVisible = false;
-    },
-    closeds() {
-      this.display = false;
-      this.interval = 60;
-    },
   },
-  unmounted() {
-    clearInterval(this.intervals);
-    this.intervals = null;
+  original(data, partsName, timeValues) {
+    this.modelData = data;
+    let date = new Date();
+    let endTs = timeValues
+      ? timeValues[1] > date.getTime()
+        ? date.getTime()
+        : timeValues[1]
+      : date.getTime();
+    let startTs = timeValues ? timeValues[0] : endTs - 28800000;
+    api
+      .getOriginalPower({
+        tagName: data.tag,
+        startTs: startTs,
+        endTs: endTs,
+      })
+      .then((res) => {
+        if (res.data.length > 0) {
+          this.partsName = partsName;
+          this.display = true;
+          this.modelDetails = res.data;
+        } else {
+          this.modelDetails = [];
+        }
+      });
+  },
+  search(values, interval) {
+    this.interval = interval;
+    this.dbClicks(this.modelData, this.partsName, values);
+  },
+  originalData(values) {
+    this.original(this.modelData, this.partsName, values);
+  },
+  closed() {
+    this.dialogVisible = false;
+  },
+  closeds() {
+    this.display = false;
+    this.interval = 60;
   },
-  watch: {
-    "$store.getters.current": {
-      handler: function (json) {
-        this.current = json;
-      },
+},
+unmounted() {
+  clearInterval(this.intervals);
+  this.intervals = null;
+},
+watch: {
+  "$store.getters.current": {
+    handler: function (json) {
+      this.current = json;
     },
   },
+},
 };
 </script>
 <style scoped>
 .body {
-  width: 100%;
-  height: 28.5vh;
-  /* background-color: #ffffff; */
-  margin-left: 15px;
-  margin-top: 20px;
-  border: 1px solid #373737;
-  /* border-left: 1px solid #373737;
-  border-right: 1px solid #373737;
-  border-bottom: 1px solid #373737; */
-  /* background-image: url('../../assets/img/type/background.png'); */
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+width: 100%;
+height: 28.5vh;
+/* background-color: #ffffff; */
+margin-left: 15px;
+margin-top: 20px;
+border: 1px solid #373737;
+/* border-left: 1px solid #373737;
+border-right: 1px solid #373737;
+border-bottom: 1px solid #373737; */
+/* background-image: url('../../assets/img/type/background.png'); */
+background-repeat: no-repeat;
+background-position: center;
+background-size: cover;
 }
 .logo {
-  position: absolute;
-  top: 8px;
-  left: 12px;
+position: absolute;
+top: 8px;
+left: 12px;
 }
 .control {
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: center;
-  font-size: 14px;
-  color: #ffffff;
-  /* margin-right: 5px; */
-  position: absolute;
-  top: 30px;
-  right: 10px;
-  z-index: 99;
+display: flex;
+flex-direction: row-reverse;
+align-items: center;
+font-size: 14px;
+color: #ffffff;
+/* margin-right: 5px; */
+position: absolute;
+top: 30px;
+right: 10px;
+z-index: 99;
 }
 
 .manual {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 29px;
-  width: 86px;
-  border-left: 1px solid rgba(51, 51, 51, 1);
-  border-top: 1px solid rgba(51, 51, 51, 1);
-  border-bottom: 1px solid rgba(51, 51, 51, 1);
-  border-top-left-radius: 15px;
-  border-bottom-left-radius: 15px;
+display: flex;
+align-items: center;
+justify-content: center;
+height: 29px;
+width: 86px;
+border-left: 1px solid rgba(51, 51, 51, 1);
+border-top: 1px solid rgba(51, 51, 51, 1);
+border-bottom: 1px solid rgba(51, 51, 51, 1);
+border-top-left-radius: 15px;
+border-bottom-left-radius: 15px;
 }
 
 .manual_on {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 29px;
-  width: 86px;
-  border-left: 1px solid rgba(37, 116, 219, 1);
-  border-top: 1px solid rgba(37, 116, 219, 1);
-  border-bottom: 1px solid rgba(37, 116, 219, 1);
-  border-top-left-radius: 15px;
-  border-bottom-left-radius: 15px;
-  background-color: rgba(37, 116, 219, 1);
+display: flex;
+align-items: center;
+justify-content: center;
+height: 29px;
+width: 86px;
+border-left: 1px solid rgba(37, 116, 219, 1);
+border-top: 1px solid rgba(37, 116, 219, 1);
+border-bottom: 1px solid rgba(37, 116, 219, 1);
+border-top-left-radius: 15px;
+border-bottom-left-radius: 15px;
+background-color: rgba(37, 116, 219, 1);
 }
 
 .recommend {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 29px;
-  width: 86px;
-  border-top: 1px solid rgba(51, 51, 51, 1);
-  border-bottom: 1px solid rgba(51, 51, 51, 1);
+display: flex;
+align-items: center;
+justify-content: center;
+height: 29px;
+width: 86px;
+border-top: 1px solid rgba(51, 51, 51, 1);
+border-bottom: 1px solid rgba(51, 51, 51, 1);
 }
 
 .recommend_on {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 29px;
-  width: 86px;
-  border-top: 1px solid rgba(37, 116, 219, 1);
-  border-bottom: 1px solid rgba(37, 116, 219, 1);
-  background-color: rgba(37, 116, 219, 1);
+display: flex;
+align-items: center;
+justify-content: center;
+height: 29px;
+width: 86px;
+border-top: 1px solid rgba(37, 116, 219, 1);
+border-bottom: 1px solid rgba(37, 116, 219, 1);
+background-color: rgba(37, 116, 219, 1);
 }
 
 .smart {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 29px;
-  width: 86px;
-  border-right: 1px solid rgba(51, 51, 51, 1);
-  border-top: 1px solid rgba(51, 51, 51, 1);
-  border-bottom: 1px solid rgba(51, 51, 51, 1);
-  border-top-right-radius: 15px;
-  border-bottom-right-radius: 15px;
+display: flex;
+align-items: center;
+justify-content: center;
+height: 29px;
+width: 86px;
+border-right: 1px solid rgba(51, 51, 51, 1);
+border-top: 1px solid rgba(51, 51, 51, 1);
+border-bottom: 1px solid rgba(51, 51, 51, 1);
+border-top-right-radius: 15px;
+border-bottom-right-radius: 15px;
 }
 
 .smart_on {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 29px;
-  width: 86px;
-  border-right: 1px solid rgba(37, 116, 219, 1);
-  border-top: 1px solid rgba(37, 116, 219, 1);
-  border-bottom: 1px solid rgba(37, 116, 219, 1);
-  border-top-right-radius: 15px;
-  border-bottom-right-radius: 15px;
-  background-color: rgba(37, 116, 219, 1);
+display: flex;
+align-items: center;
+justify-content: center;
+height: 29px;
+width: 86px;
+border-right: 1px solid rgba(37, 116, 219, 1);
+border-top: 1px solid rgba(37, 116, 219, 1);
+border-bottom: 1px solid rgba(37, 116, 219, 1);
+border-top-right-radius: 15px;
+border-bottom-right-radius: 15px;
+background-color: rgba(37, 116, 219, 1);
 }
 .echarts {
-  width: 300px;
-  height: 280px;
-  margin-top: 10px;
-  /* background-color: #000000; */
-  margin-left: 10px;
+width: 300px;
+height: 280px;
+margin-top: 10px;
+/* background-color: #000000; */
+margin-left: 10px;
 }
 
 .showData {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
 }
 
 .dataBox {
-  display: flex;
-  flex-direction: column;
-  width: 120px;
-  height: 60px;
-  border: 1px solid rgba(83, 92, 93, 1);
-  margin-bottom: 15px;
-  margin-top: 15px;
-  margin-left: 30px;
+display: flex;
+flex-direction: column;
+width: 120px;
+height: 60px;
+border: 1px solid rgba(83, 92, 93, 1);
+margin-bottom: 15px;
+margin-top: 15px;
+margin-left: 30px;
 }
 
 .dataBox-right {
-  display: flex;
-  flex-direction: column;
-  width: 120px;
-  height: 60px;
-  border: 1px solid rgba(83, 92, 93, 1);
-  margin-bottom: 15px;
-  margin-top: 15px;
-  margin-right: 30px;
+display: flex;
+flex-direction: column;
+width: 120px;
+height: 60px;
+border: 1px solid rgba(83, 92, 93, 1);
+margin-bottom: 15px;
+margin-top: 15px;
+margin-right: 30px;
 }
 
 .dataTitle {
-  height: 50%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  font-size: 12px;
-  color: rgba(153, 162, 163, 1);
-  margin-left: 5px;
+height: 50%;
+display: flex;
+flex-direction: row;
+align-items: center;
+font-size: 12px;
+color: rgba(153, 162, 163, 1);
+margin-left: 5px;
 }
 
 .datas {
-  height: 50%;
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: center;
-  font-size: 16px;
-  color: rgba(05, 187, 76, 1);
-  margin-right: 5px;
+height: 50%;
+display: flex;
+flex-direction: row-reverse;
+align-items: center;
+font-size: 16px;
+color: rgba(05, 187, 76, 1);
+margin-right: 5px;
 }
 
 .powerContent {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  color: #ffffff;
-  position: relative;
-  bottom: 15%;
-  left: 3%;
+display: flex;
+flex-direction: row;
+align-items: center;
+color: #ffffff;
+position: relative;
+bottom: 15%;
+left: 3%;
 }
 
 .power {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  padding: 5px 10px;
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+font-size: 14px;
+padding: 5px 10px;
 }
 
 .power1 {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  padding: 5px 10px 5px 10px;
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+font-size: 14px;
+padding: 5px 10px 5px 10px;
 }
 
 .power2 {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  padding: 5px 3px;
+display: flex;
+flex-direction: column;
+align-items: center;
+justify-content: center;
+font-size: 14px;
+padding: 5px 3px;
 }
 
 .powerTitle {
-  margin-bottom: 3px;
+margin-bottom: 3px;
 }
 
 .powerDatas {
-  border-radius: 2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  font-weight: 600;
-  padding: 2px 5px;
+border-radius: 2px;
+display: flex;
+align-items: center;
+justify-content: center;
+font-size: 14px;
+font-weight: 600;
+padding: 2px 5px;
 }
 
 </style>