<template>
  <div class="status">
    <div class="panel-box">
      <StatusPanel class="panel-item" v-for="(data, index) of datas" :key="index" :data="data"></StatusPanel>
    </div>
    <div class="table-box">
      <ComTable :data="tableData"></ComTable>
    </div>
  </div>
</template>

<script>
import StatusPanel from "./components/status-panel.vue";
import ComTable from "@com/coms/table/table-span.vue";
import util from "@/helper/util.js";
export default {
  // 名称
  name: "Status",
  // 使用组件
  components: {
    StatusPanel,
    ComTable,
  },
  // 数据
  data() {
    return {
      datas: [
        {
          title: "某某某风电场",
          weather: {
            type: "cloudy",
            temperature: 11,
          },
          breakOff: false,
          category: {
            score: 66,
            datas: [
              { text: "运行", num: 30, color: "green" },
              { text: "待机", num: 27, color: "purple" },
              { text: "限电", num: 30, color: "yellow" },
              { text: "检修", num: 30, color: "orange" },
              { text: "故障", num: 13, color: "red" },
              { text: "受累", num: 30, color: "blue" },
              { text: "离线", num: 30, color: "gray" },
            ],
          },
          items: [
            { f1: "AGC宋六:", f2: "设定", f3: "66", f4: "出线", f5: "11", is_light: true },
            { f1: "升压站:", f2: "出线Uab/La", f3: "23/3 23/3", f4: "电压", f5: "103 103", is_light: false },
            { f1: "风功:", f2: "未来15分钟", f3: "103", f4: "", f5: "", is_light: false },
            { f1: "测风塔:", f2: "风速", f3: "103KM", f4: "风向", f5: "103 62", is_light: false },
            { f1: "电能量表:", f2: "", f3: "103 62", f4: "", f5: "", is_light: false },
          ],
        },
      ],
      tableData: {
        column: [
          { name: "场站名称", field: "name", unit: "", is_num: false, is_light: false },
          { name: "调度名称", field: "ddname", unit: "", is_num: false, is_light: false },
          { name: "装机容量", field: "zjrl", unit: "MW", is_num: true, is_light: false },
          { name: "发电量", field: "fdl", unit: "万kwh", is_num: true, is_light: false },
          { name: "上网电量", field: "swdl", unit: "万kwh", is_num: true, is_light: false },
          { name: "利用小时", field: "lyxs", unit: "", is_num: true, is_light: false },
          { name: "风速m/s", field: "fs", unit: "日照强度w/m2", is_num: true, is_light: false },
          { name: "功率", field: "gl", unit: "MW", is_num: true, is_light: true },
          { name: "出线功率", field: "cxgl", unit: "MW", is_num: true, is_light: false },
          { name: "理论功率", field: "llgl", unit: "MW", is_num: true, is_light: false },
          { name: "保证功率", field: "bzgl", unit: "MW", is_num: true, is_light: false },
          { name: "预测功率", field: "ycgl", unit: "MW", is_num: true, is_light: false },
          { name: "AGC指令", field: "agc", unit: "MW", is_num: true, is_light: false },
          { name: "理论发电量", field: "llfdl", unit: "万kwh", is_num: true, is_light: false },
          { name: "SCADA发电量", field: "scada", unit: "万kwh", is_num: true, is_light: false },
          { name: "维修损失电量", field: "wxssdl", unit: "万kwh", is_num: true, is_light: false },
          { name: "故障损失电量", field: "gzssdl", unit: "万kwh", is_num: true, is_light: false },
          { name: "受理损失电量", field: "slssdl", unit: "万kwh", is_num: true, is_light: false },
          { name: "限电损失电量", field: "xdssdl", unit: "万kwh", is_num: true, is_light: false },
          { name: "性能损失电量", field: "xnssdl", unit: "万kwh", is_num: true, is_light: false },
        ],
        data: [
          {
            name: "风电场",
            ddname: "牛二",
            zjrl: 99,
            fdl: 99,
            swdl: 99,
            lyxs: 99,
            fs: 99,
            gl: 99,
            cxgl: 99,
            llgl: 99,
            bzgl: 99,
            ycgl: 99,
            agc: 99,
            llfdl: 99,
            scada: 99,
            wxssdl: 99,
            gzssdl: 99,
            slssdl: 99,
            xdssdl: 99,
            xnssdl: 99,
            row_span: [],
            col_span: [],
            is_light: false,
          },
          {
            name: "风电场",
            ddname: "牛二",
            zjrl: 99,
            fdl: 99,
            swdl: 99,
            lyxs: 99,
            fs: 99,
            gl: 99,
            cxgl: 99,
            llgl: 99,
            bzgl: 99,
            ycgl: 99,
            agc: 99,
            llfdl: 99,
            scada: 99,
            wxssdl: 99,
            gzssdl: 99,
            slssdl: 99,
            xdssdl: 99,
            xnssdl: 99,
            row_span: [],
            col_span: [],
            is_light: false,
          },
          {
            name: "风电场",
            ddname: "牛二",
            zjrl: 99,
            fdl: 99,
            swdl: 99,
            lyxs: 99,
            fs: 99,
            gl: 99,
            cxgl: 99,
            llgl: 99,
            bzgl: 99,
            ycgl: 99,
            agc: 99,
            llfdl: 99,
            scada: 99,
            wxssdl: 99,
            gzssdl: 99,
            slssdl: 99,
            xdssdl: 99,
            xnssdl: 99,
            row_span: [["name", 2]],
            col_span: [],
            is_light: false,
          },
          {
            name: "",
            ddname: "牛二",
            zjrl: 99,
            fdl: 99,
            swdl: 99,
            lyxs: 99,
            fs: 99,
            gl: 99,
            cxgl: 99,
            llgl: 99,
            bzgl: 99,
            ycgl: 99,
            agc: 99,
            llfdl: 99,
            scada: 99,
            wxssdl: 99,
            gzssdl: 99,
            slssdl: 99,
            xdssdl: 99,
            xnssdl: 99,
            row_span: [],
            col_span: [],
            is_light: false,
          },
          {
            name: "风电场",
            ddname: "牛二",
            zjrl: 99,
            fdl: 99,
            swdl: 99,
            lyxs: 99,
            fs: 99,
            gl: 99,
            cxgl: 99,
            llgl: 99,
            bzgl: 99,
            ycgl: 99,
            agc: 99,
            llfdl: 99,
            scada: 99,
            wxssdl: 99,
            gzssdl: 99,
            slssdl: 99,
            xdssdl: 99,
            xnssdl: 99,
            row_span: [["name", 2]],
            col_span: [],
            is_light: false,
          },
          {
            name: "",
            ddname: "牛二",
            zjrl: 99,
            fdl: 99,
            swdl: 99,
            lyxs: 99,
            fs: 99,
            gl: 99,
            cxgl: 99,
            llgl: 99,
            bzgl: 99,
            ycgl: 99,
            agc: 99,
            llfdl: 99,
            scada: 99,
            wxssdl: 99,
            gzssdl: 99,
            slssdl: 99,
            xdssdl: 99,
            xnssdl: 99,
            row_span: [],
            col_span: [],
            is_light: false,
          },
          {
            name: "风电场",
            ddname: "牛二",
            zjrl: 99,
            fdl: 99,
            swdl: 99,
            lyxs: 99,
            fs: 99,
            gl: 99,
            cxgl: 99,
            llgl: 99,
            bzgl: 99,
            ycgl: 99,
            agc: 99,
            llfdl: 99,
            scada: 99,
            wxssdl: 99,
            gzssdl: 99,
            slssdl: 99,
            xdssdl: 99,
            xnssdl: 99,
            row_span: [],
            col_span: [],
            is_light: false,
          },
          {
            name: "风电合计",
            ddname: "",
            zjrl: 99,
            fdl: 99,
            swdl: 99,
            lyxs: 99,
            fs: 99,
            gl: 99,
            cxgl: 99,
            llgl: 99,
            bzgl: 99,
            ycgl: 99,
            agc: 99,
            llfdl: 99,
            scada: 99,
            wxssdl: 99,
            gzssdl: 99,
            slssdl: 99,
            xdssdl: 99,
            xnssdl: 99,
            row_span: [],
            col_span: [["name", 2]],
            is_light: true,
          },
          {
            name: "风电场",
            ddname: "牛二",
            zjrl: 99,
            fdl: 99,
            swdl: 99,
            lyxs: 99,
            fs: 99,
            gl: 99,
            cxgl: 99,
            llgl: 99,
            bzgl: 99,
            ycgl: 99,
            agc: 99,
            llfdl: 99,
            scada: 99,
            wxssdl: 99,
            gzssdl: 99,
            slssdl: 99,
            xdssdl: 99,
            xnssdl: 99,
            row_span: [],
            col_span: [],
            is_light: false,
          },
          {
            name: "风电场",
            ddname: "牛二",
            zjrl: 99,
            fdl: 99,
            swdl: 99,
            lyxs: 99,
            fs: 99,
            gl: 99,
            cxgl: 99,
            llgl: 99,
            bzgl: 99,
            ycgl: 99,
            agc: 99,
            llfdl: 99,
            scada: 99,
            wxssdl: 99,
            gzssdl: 99,
            slssdl: 99,
            xdssdl: 99,
            xnssdl: 99,
            row_span: [],
            col_span: [],
            is_light: false,
          },
          {
            name: "风电场",
            ddname: "牛二",
            zjrl: 99,
            fdl: 99,
            swdl: 99,
            lyxs: 99,
            fs: 99,
            gl: 99,
            cxgl: 99,
            llgl: 99,
            bzgl: 99,
            ycgl: 99,
            agc: 99,
            llfdl: 99,
            scada: 99,
            wxssdl: 99,
            gzssdl: 99,
            slssdl: 99,
            xdssdl: 99,
            xnssdl: 99,
            row_span: [],
            col_span: [],
            is_light: false,
          },
          {
            name: "风电场",
            ddname: "牛二",
            zjrl: 99,
            fdl: 99,
            swdl: 99,
            lyxs: 99,
            fs: 99,
            gl: 99,
            cxgl: 99,
            llgl: 99,
            bzgl: 99,
            ycgl: 99,
            agc: 99,
            llfdl: 99,
            scada: 99,
            wxssdl: 99,
            gzssdl: 99,
            slssdl: 99,
            xdssdl: 99,
            xnssdl: 99,
            row_span: [],
            col_span: [],
            is_light: false,
          },
          {
            name: "风电场",
            ddname: "牛二",
            zjrl: 99,
            fdl: 99,
            swdl: 99,
            lyxs: 99,
            fs: 99,
            gl: 99,
            cxgl: 99,
            llgl: 99,
            bzgl: 99,
            ycgl: 99,
            agc: 99,
            llfdl: 99,
            scada: 99,
            wxssdl: 99,
            gzssdl: 99,
            slssdl: 99,
            xdssdl: 99,
            xnssdl: 99,
            row_span: [],
            col_span: [],
            is_light: false,
          },
          {
            name: "光电合计",
            ddname: "",
            zjrl: 99,
            fdl: 99,
            swdl: 99,
            lyxs: 99,
            fs: 99,
            gl: 99,
            cxgl: 99,
            llgl: 99,
            bzgl: 99,
            ycgl: 99,
            agc: 99,
            llfdl: 99,
            scada: 99,
            wxssdl: 99,
            gzssdl: 99,
            slssdl: 99,
            xdssdl: 99,
            xnssdl: 99,
            row_span: [],
            col_span: [["name", 2]],
            is_light: false,
          },
          {
            name: "总计",
            ddname: "",
            zjrl: 99,
            fdl: 99,
            swdl: 99,
            lyxs: 99,
            fs: 99,
            gl: 99,
            cxgl: 99,
            llgl: 99,
            bzgl: 99,
            ycgl: 99,
            agc: 99,
            llfdl: 99,
            scada: 99,
            wxssdl: 99,
            gzssdl: 99,
            slssdl: 99,
            xdssdl: 99,
            xnssdl: 99,
            row_span: [],
            col_span: [["name", 2]],
            is_light: false,
          },
        ],
      },
    };
  },
  // 函数
  methods: {},
  // 生命周期钩子
  beforeCreate() {
    // 创建前
  },
  created() {
    // 创建后
    let tempDatas = [];
    for (let i = 0; i < 10; i++) {
      let temp = util.copy(this.datas[0]);
      if (i == 8) {
        temp.breakOff = true;
      }
      tempDatas.push(temp);
    }
    this.datas = util.copy(tempDatas);
  },
  beforeMount() {
    // 渲染前
  },
  mounted() {
    // 渲染后
  },
  beforeUpdate() {
    // 数据更新前
  },
  updated() {
    // 数据更新后
  },
};
</script>

<style lang="less" scoped>
.status {
  width: 100%;
  height: calc(100vh - 7.222vh);
  overflow: auto;

  .panel-box {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .panel-item {
      width: calc(20% - 1.185vh);
      margin-left: 1.481vh;
      margin-bottom: 1.481vh;

      &:nth-child(5n + 1) {
        margin-left: 0;
      }
    }
  }

  .table-box {
    border: 1px solid @gray;
    position: relative;

    &::after,
    &::before {
      content: "";
      position: absolute;
      width: 2px;
      height: 2px;
      background-color: @write;
      top: 0.37vh;
    }

    &::after {
      left: 0.37vh;
    }

    &::before {
      right: 0.37vh;
    }
  }
}
</style>
