project-neic/src/components/modeControl/modeControl.vue

<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>
                    </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
                                ]?.theoreticalPower?.value.toFixed(2)
                            : showDate.theoreticalPower?.value.toFixed(2)
                        }}
                        </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>
                    </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";
import api from "api/index";
import MessageBridge from "utils/MessageBridge";
import * as echarts from "echarts";
import DetailPages from "./detailPages.vue";
import Details from "../basicDataDetails.vue";
export default {
  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);
    },
    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[
              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[
              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%"],
                },

                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
            ]?.theoreticalPower?.value
          )
        : Number(this.showDate.theoreticalPower?.value);
      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;
      }
      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;
          }
        }
      } 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;
      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;
    },
  },
  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;
}
.logo {
  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;
}

.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;
}

.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);
}

.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);
}

.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);
}

.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;
}

.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);
}
.echarts {
  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;
}

.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;
}

.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;
}

.dataTitle {
  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;
}

.powerContent {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #ffffff;
  position: relative;
  bottom: 15%;
  left: 11%;
}

.power {
  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;
}

.power2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 5px 3px;
}

.powerTitle {
  margin-bottom: 3px;
}

.powerDatas {
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  padding: 2px 5px;
}

</style>