hb_sis_zhfx/src/views/WindSite/pages/Tower.vue

<template>
  <div class="btn-group-tabs">
      <BtnGroup2 :btnGroups="btnGroupsss" :rowIndex="rowIndex" :index="selectIndex" @select="select"></BtnGroup2>
  </div>
  <div class="tower">
    <Wave></Wave>
    <Windmill class="windmill-1"></Windmill>
    <Windmill class="windmill-2"></Windmill>
    <Windmill class="windmill-3"></Windmill>
    <Windmill class="windmill-4"></Windmill>
    <Windmill class="windmill-5"></Windmill>
    <WindTower :data="cftmap"></WindTower>
    <dash-pie-chart
      class="pie-left"
      title="空气密度"
      :value="cftmap.KQMD || 0"
      height="9.722vh"
      width="9.722vh"
    />
    <dash-pie-chart
      class="pie-right"
      title="压强"
      :value="cftmap.FCCFTYQ || 0"
      height="9.722vh"
      width="9.722vh"
      max="500"
    />
    <Panel class="panel-top" title="日资源玫瑰图" :bgBlur="true">
      <div class="direction-chart">
        <DirectionRadarChart width="100%" height="23vh" :value="rmgtmap" />
        <div class="legend">
          <span class="dot bg-purple"></span>
          <span>{{ rmgtTitle || "" }}</span>
        </div>
      </div>
    </Panel>
    <Panel class="panel-bottom" title="月资源玫瑰图" :bgBlur="true">
      <div class="direction-chart">
        <DirectionRadarChart width="100%" height="23vh" :value="ymgtmap" />
        <div class="legend">
          <span class="dot bg-purple"></span>
          <span>{{ ymgtTitle || "" }}</span>
        </div>
      </div>
    </Panel>
    <toolbar-panel class="rose-chart" title="72小时功率曲线图">
      <!-- <template v-slot:tools>
      </template> -->
      <!-- <template v-slot:default> -->
        <multiple-line-chart
          height="220px"
          :list="Powertrend"
          :units="['(MW)']"
          :showLegend="true"
          :hoverType="'axis'"
        />
      <!-- </template> -->
    </toolbar-panel>
  </div>
</template>

<script>
import Wave from "@com/three/wave.vue";
import Windmill from "../components/Windmill.vue";
import ToolbarPanel from "@com/coms/panel/toolbar-panel.vue";
import Panel from "@com/coms/panel/panel.vue";
import MultipleLineChart from "@com/chart/line/normal-line-chart";
import WindTower from "./Tower/WindTower.vue";
import DashPieChart from "@com/chart/pie/dash-pie-chart.vue";
import DirectionRadarChart from "@com/chart/radar/radar-chart.vue";
import BtnGroup2 from "@com/coms/btn/btn-group-double.vue";
export default {
  // 名称
  name: "Tower",
  // 使用组件
  components: {
    BtnGroup2,
    Wave,
    Windmill,
    ToolbarPanel,
    MultipleLineChart,
    WindTower,
    DashPieChart,
    Panel,
    DirectionRadarChart,
  },
  // 传入参数
  props: {},
  // 自定义事件
  emits: {},
  // 数据
  data() {
    return {
      btnGroupsss: [],
      rowIndex:1,
      selectIndex:1,
      timmer: null, // 计时器
      cftmap: {},
      glvos: [],
      rmgtmap: {
        indicator: ["N0", "N1"],
        data: [
          {
            value: [44200, 14200],
            name: "",
          },
        ],
      },
      rmgtTitle: "",
      ymgtmap: {
        indicator: ["N0", "N1"],
        data: [
          {
            value: [0, 14200],
            name: "",
          },
        ],
      },
      ymgtTitle: "",
      DayPower: {
        // 图表所用单位
        units: [""],
        value: [
          {
            title: "",
            yAxisIndex: 0, // 使用单位
            value: [],
          },
        ],
      },
      // 72小时功率趋势图
      Powertrend: [
        {
          title: "",
          yAxisIndex: 0, // 使用单位
          value: [],
        },
      ],
    };
  },
  // 函数
  methods: {
    requestLine() {
		 let that = this;
		that.API.requestData({
		  method: "POST",
		  subUrl: "/monitor/findCftInfo",
		  timeout: 60000,
		  data: {
		    wpId: that.wpId,
		  },
		success(res) {
			var data = res.data;
			that.cftmap = data.cftmap;
			// 日资源玫瑰图
			var rmgtmapIndicator = [],
				rmgtmapData = [];
			data.rmgtmap.data.forEach(item =>{
				rmgtmapIndicator.push(item.name);
				rmgtmapData.push(item.data1)
			})
			that.rmgtmap = {
				indicator: rmgtmapIndicator,
				data: [{value: rmgtmapData}]
			};
			// 月资源玫瑰图
			var ymgtmapIndicator = [],
				ymgtmapData = [];
			data.ymgtmap.data.forEach(item =>{
				ymgtmapIndicator.push(item.name);
				ymgtmapData.push(item.data1)
			})
			that.ymgtmap = {
				indicator: ymgtmapIndicator,
				data: [{value: ymgtmapData}]
			};
			
			// 72小时功率曲线图
			let glKey = ["value2","value1","value5","value4","value7","value6"];
			let Powertrend = [
			  {
			    title: "实发功率",
			    smooth: true,
			    value: [],
			  },
			  {
			    title: "理论功率",
			    smooth: true,
			    value: [],
			  },
			  {
			    title: "保证功率",
			    smooth: true,
			    value: [],
			  },
			  {
			    title: "4小时预测功率",
			    smooth: true,
			    value: [],
			  },
			  {
			    title: "24小时预测功率",
			    smooth: true,
			    value: [],
			  },
			  {
			    title: "平均风速",
			    smooth: true,
			    value: [],
			  },
			];
			glKey.forEach((keyEle, keyIndex) => {
			  res.data.glvos.forEach((cEle) => {
			    Powertrend[keyIndex].value.push({
			      text: new Date(cEle.time).formatDate("hh:mm"),
			      value: cEle[keyEle],
			    });
			  });
			});
			that.Powertrend = Powertrend;
		}})
    },
    getWp () {
      let that = this;
      that.API.requestData({
        method: "GET",
        subUrl: "powercompare/windfarmAllAjax",
        success (res) {
          let btnGroups = [
            {
              icon: "svg-wind-site",
              btns: [],
            }
          ];

          res.data.forEach((ele, index) => {
            if (ele.id.indexOf("FDC") !== -1) {
              btnGroups[0].btns.push({
                text: ele.name,
                code: ele.id,
              });
            } 
          });

          that.btnGroupsss = btnGroups;
          that.renderBtnActiveIndex();
        },
      });
    },
    renderBtnActiveIndex () {
      this.btnGroupsss.forEach((pEle, pIndex) => {
        pEle.btns.forEach((cEle, cIndex) => {
          if (cEle.code === this.wpId) {
            this.rowIndex = pIndex;
            this.selectIndex = cIndex;
          }
        });
      });
    },

    select (res) {
      this.$router.replace({
        path: `/monitor/windsite/tower/${res.code}`,
      });
      this.wpId = res.code;
      this.renderBtnActiveIndex ();
      // this.requestData(false);
      this.requestLine();
    },
  },

  created() {
    let that = this;
    that.wpId = that.$route.params.wpId;
    that.getWp();
    that.$nextTick(() => {
      // that.requestData(false);
      that.requestLine();
      that.timmer = setInterval(() => {
        // that.requestData(false);
        that.requestLine();
      }, 60 * 1000);
    });
  },

  unmounted() {
    clearInterval(this.timmer);
    this.timmer = null;
  },
};
</script>

<style lang="less">
.tower {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .windmill-1,
  .windmill-2,
  .windmill-3,
  .windmill-4,
  .windmill-5 {
    position: absolute;
  }

  .windmill-1 {
    top: 23.148vh;
    left: 28.333vh;
    width: 4.167vh;
  }

  .windmill-2 {
    top: 8.333vh;
    left: 11.111vh;
    width: 3.426vh;
  }

  .windmill-3 {
    top: 4.63vh;
    left: 38.889vh;
    width: 2.593vh;
  }

  .windmill-4 {
    top: 21.296vh;
    left: 122.87vh;
    width: 3.426vh;
  }

  .windmill-5 {
    top: 5.556vh;
    left: 121.296vh;
    width: 2.407vh;
  }

  .direction-chart {
    .legend {
      display: flex;
      align-items: center;
      justify-content: center;

      .dot {
        width: 7px;
        height: 7px;
        display: inline-block;
        margin-right: 8px;
      }

      .legend-text {
        font-size: @fontsize-s;
        color: #909ba9;
      }
    }
  }

  .pie-left,
  .pie-right {
    position: fixed;
    top: 11vh;
  }

  .pie-left {
    left: 5vh;
  }

  .pie-right {
    left: 20vh;
  }

  .thermometer-left,
  .thermometer-right {
    position: fixed;
    top: 20vh;
  }

  .thermometer-left {
    left: 5vh;
  }

  .thermometer-right {
    left: 20vh;
  }

  .panel-top,
  .panel-bottom {
    position: fixed;
    right: 10vh;
    width: 350px;
    // height: 24.352vh;
  }

  .panel-top {
    top: 7vh;
  }

  .panel-bottom {
    top: 37vh;
  }

  .rose-chart {
    position: absolute;
    left: 0;
    bottom: 1.852vh;
    height: 31.481vh;
    width: 100%;
  }

  .tools {
    display: flex;

    .tool-block {
      display: flex;
      align-items: center;
      margin-left: 0.741vh;

      .legend {
        flex: auto;
        width: 0.741vh;
        height: 0.741vh;
        margin-right: 0.741vh;

        &.long {
          width: 2.963vh;
          height: 0.37vh;
        }
      }

      .legend-text {
        color: #ffffff4d;
      }
    }
  }
}
</style>