hb-neic-project/src/components/focus/focusCard.vue

/* 推荐区 */
<template>
  <div style="display: flex; justify-content: flex-start; flex-wrap: wrap">
    <div
      class="area"
      v-for="(vl, index) in values"
      :key="vl"
      @dblclick="sendMsg(vl, flase, index)"
    >
      <img
        class="imgs"
        src="../../assets/img/RecommendedArea/background.png"
        alt=""
      />
      <div class="content">{{ vl.showType }}</div>
      <div class="">{{ vl.name }}</div>
      <div class="">{{ vl.createTime }}</div>
    </div>
  </div>
  <PhotoelectricDetailPages
    ref="photo"
    @closed="closed()"
    :data="dialogData.data"
    :stationName="dialogData.stationName"
    v-model="dialogVisible"
  >
  </PhotoelectricDetailPages>
  <WindturbineDetailPages
    v-model="windVisible"
    :windturbine="currentWindturbine"
    @close="close"
  >
  </WindturbineDetailPages>
  <StationSvgDetailPages
    v-model="svgVisible"
    :svgWeb="svgWeb"
    @close="close"
  >
  </StationSvgDetailPages>
</template>

<script>
import PhotoelectricDetailPages from "./PhotoelectricDetailPages.vue";
import MessageBridge from "utils/MessageBridge";
import StationSvgDetailPages from "../stationSvgDetailPages.vue";
import WindturbineDetailPages from "../WindturbineDetailPages.vue";
import api from "api/index";
import dayjs from "dayjs";
export default {
  name: "RecommendedArea",
  props: ["datas"],
  data() {
    return {
      values: [],
      currentWindturbine: {},
      dialogVisible: false,
      svgVisible: false,
      windVisible: false,
      svgWeb: "",
      station: [],
      dialogData: {
        data: {
          PowerSet: "",
          AgcUp: "",
          AgcLower: "",
          ActualPower: "",
          TheoryPower: "",
          ForecastPower: "",
          AgcIn: "",
          AgcFar: "",
          SumLock: "",
          SubLock: "",
        },
      },
      interval: "",
      intervalTimer: "",
      timeIndex: 0,
    };
  },
  components: {
    PhotoelectricDetailPages,
    StationSvgDetailPages,
    WindturbineDetailPages,
  },
  created() {
    this.datacontrol();
    this.getAGCStation();
  },
  methods: {
    getAGCStation() {
      api.getAGCStation().then((res) => {
        this.station = res.data;
      });
    },
    datacontrol() {
      let mb = MessageBridge.getInstance();
      let attention = [{ key: "/topic/attention", action: this.attention }];
      mb.register(attention);
    },
    attention(msg) {
      let list = JSON.parse(msg);
      let types = {
        ElectricityRestrictions: "限电",
        Offline: "离线",
        Accident: "故障",
        LowCurveFollowingRate: "跟随率低",
      };
      list.forEach((item) => {
        item.createTime = dayjs(item.time).format("YYYY-MM-DD HH:mm:ss");
        item.showType = types[item.type];
      });
      this.values = list;
    },
    closed() {
      clearInterval(this.intervalTimer);
      this.intervalTimer = null
    },
    close() {
      this.svgVisible = false;
    },

    sendMsg: function (vl, types, index) {
      if (vl.attentionType === "Station" && vl.type === "Accident") {
        this.svgVisible = true;
        this.svgWeb = vl.stationId;
      } else if (
        (vl.attentionType === "Station" &&
          vl.type === "ElectricityRestrictions") ||
        types
      ) {
        let that = this;
        that.timeIndex = 0;
        that.ajaxDetail(vl, index);
        that.intervalTimer = window.setInterval(function () {
          that.ajaxDetail(vl, index);
        }, 3000);
        that.dialogVisible = true;
        that.dialogData.stationName = this.station.filter(
          (item) => item.id === vl.id
        )[0].name;
      } else if (vl.attentionType === "WindTurbine") {
        this.windVisible = true;
        this.currentWindturbine = this.$store.state.windturbinelist[vl.id];
      }
    },
    ajaxDetail(data, index) {
      let thisKey = this.station.filter((item) => item.id === data.id)[0].tags;
      let array = [];
      thisKey.forEach((item) => {
        item.value ? array.push(item.value) : "";
      });
      let params = array.join(",");
      api.getLatest(params).then((res) => {
        if (res) {
          for (let v in res.data) {
            thisKey.forEach((item) => {
              let calc = item.calc ? item.calc : 1;
              if (item.value === v) {
                this.dialogData.data[item.tag] = {
                  name: item.name,
                  value: res.data[v].doubleValue
                    ? res.data[v].doubleValue === 0? 0 : Number((res.data[v].doubleValue * calc).toFixed(2))
                    : res.data[v].booleanValue? 1: 0,
                };
              }
            });
          }
        }
      });
      if (this.timeIndex == 0) {
        //一分钟执行一次
        let date = new Date();
        let endTs = date.getTime();
        let starTs = endTs - 28800000;
        const PowerSet = thisKey.find((ele) => {
          return ele.tag == "PowerSet";
        });
        const ActualPower = thisKey.find((ele) => {
          return ele.tag == "ActualPower";
        });
        let PowerSetData = [],
          ActualPowerData = [];
        api
          .getPower({
            tagName: PowerSet.value,
            startTs: starTs,
            endTs: endTs,
            interval: 60,
          })
          .then((res1) => {
            api
              .getPower({
                tagName: ActualPower.value,
                startTs: starTs,
                endTs: endTs,
                interval: 60,
              })
              .then((res2) => {
                res1.data.forEach((item) => {
                  PowerSetData.push({
                    ts: item.ts,
                    doubleValue: item.doubleValue * PowerSet.calc,
                  });
                });
                res2.data.forEach((item) => {
                  ActualPowerData.push({
                    ts: item.ts,
                    doubleValue: item.doubleValue * ActualPower.calc,
                  });
                });
                this.$refs.photo.initData(PowerSetData, ActualPowerData);
              });
          });
      } else if (this.timeIndex == 20) {
        this.timeIndex = -1;
      }
      this.timeIndex++;
    },
  },
};
</script>
<style scoped>
.area {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #ffffff;
  width: 130px;
  align-items: center;
  margin-bottom: 10px;
}

.content {
  margin-top: -70px;
  width: 25px;
  height: 34px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
</style>