hb_sis_zhfx/src/views/Decision/Decision3Db.vue

<template>
  <div class="decision-page-3">
    <div class="query mg-b-8">
      <div class="query-items">
        <div class="query-item">
          <div class="lable">场站：</div>
          <div class="search-input">
            <el-select
              v-model="value1"
              @change="ChangZhanChange(value1)"
              clearable
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in ChangZhan"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">风机：</div>
          <div class="search-input">
            <el-select
              v-model="value2"
              @change="XiangMuChange(value2)"
              multiple
              multiple-limit="5"
              collapse-tags
              placeholder="请选择"
              popper-class="select"
            >
              <el-option
                v-for="item in XiangMu"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="query-item">
          <div class="lable">日期：</div>
          <div class="search-input">
            <el-date-picker
              v-model="value4"
              @change="BeginChange(value4)"
              type="date"
              value-format="YYYY-MM-DD"
              placeholder="选择日期"
              popper-class="date-select"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="query-actions">
          <button class="btn" @click="reset">重置</button>
        </div>
      </div>
      <div class="actions mg-b-8">
        <button
          class="btn"
          :class="TypeClass == 0 ? 'green' : ''"
          @click="TypeClick(0)"
        >
          日风电机对比
        </button>
        <button
          class="btn"
          :class="TypeClass == 1 ? 'green' : ''"
          @click="TypeClick(1)"
        >
          月风电机对比
        </button>
        <button
          class="btn"
          :class="TypeClass == 2 ? 'green' : ''"
          @click="TypeClick(2)"
        >
          年风电机对比
        </button>
      </div>
    </div>
    <!-- 列表 -->
    <toolbar-panel title="单机横向对比" :showLine="false"></toolbar-panel>
    <div class="info">
      <div class="mg-b-16">
        <div class="project-table">
          <Table :data="tableData"></Table>
        </div>
      </div>
      <!-- 风资源列表 -->
      <div class="direction-info mg-b-16">
        <table class="com-table">
          <tbody>
            <tr>
              <td v-for="(col, i) of tableData.column" :key="i">
                <div v-if="i == 0">22</div>
                <div v-if="i == 1">风资源</div>
                <div v-if="i != 0 && i != 1">
                  <div class="direction-title">{{ listName[i - 2] }}</div>
                  <div
                    class="direction-chart"
                    :class="i - 2 < fzyData.length ? '' : 'hide'"
                  >
                    <normal-radar-chart
                      :width="'70%'"
                      :height="'232px'"
                      :value="fzyData[i - 2]"
                    />
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 日功率曲线 -->
      <div>
        <toolbar-panel :title="'日功率曲线'">
          <template v-slot:tools>
            <div class="tools">
              <div
                class="tool-block"
                v-for="(item, index) in listName"
                :key="index"
              >
                <div class="legend" :class="'bg-' + (index + 1)"></div>
                <div class="legend-text">{{ item }}</div>
              </div>
            </div>
          </template>
          <double-line-chart :height="'200px'" :list="list" />
        </toolbar-panel>
      </div>
    </div>
  </div>
</template>

<script>
import DoubleLineChart from "../../components/chart/line/DayPowerChart.vue";
import NormalRadarChart from "../../components/chart/radar/normal-radar-chart.vue";
import SvgIcon from "../../components/coms/icon/svg-icon.vue";
import ToolbarPanel from "../../components/coms/panel/toolbar-panel.vue";
import Table from "../../components/coms/table/table.vue";
import api from "@api/economic/index.js";
export default {
  components: {
    Table,
    SvgIcon,
    ToolbarPanel,
    DoubleLineChart,
    NormalRadarChart,
  },
  data() {
    return {
      tableData: {
        column: [
          {
            name: "",
            field: "index",
            is_num: false,
            is_light: false,
          },
          {
            name: "项目",
            field: "name",
            is_num: false,
            is_light: false,
          },
          {
            name: "",
            field: "data1",
            is_num: false,
            is_light: false,
          },
          {
            name: "",
            field: "data2",
            is_num: false,
            is_light: false,
          },
          {
            name: "",
            field: "data3",
            is_num: false,
            is_light: false,
          },
          {
            name: "",
            field: "data4",
            is_num: false,
            is_light: false,
          },
          {
            name: "",
            field: "data5",
            is_num: false,
            is_light: false,
          },
        ],
        data: [],
      },
      ChangZhan: [], //场站
      XiangMu: [], //项目
      value1: [],
      value2: [],
      value4: "",
      fzyData: [],
      list: [{ value: [{ text: "", value: 0 }] }],
      listName: [],
      TypeClass: 0,
      ajaxArr: ["daydjhxdbtop", "monthdjhxdbtop", "yeardjhxdbtop"],
      ajaxName: "daydjhxdbtop",
    };
  },
  created() {
    this.ChangZhanVal();
    this.value4 = this.getTime(1);
  },
  methods: {
    ChangZhanVal() {
      api.benchmarkingWplist({}).then((res) => {
        this.ChangZhan = res.data;
        this.value1 = res.data[0].code;
        this.XiangMuVal(res.data[0].code);
      });
    },
    ChangZhanChange(val) {
      this.value1 = val;
      this.value2 = [];
      this.AjaxCommon();
      this.XiangMuVal(val);
    },
    XiangMuVal(val) {
      api
        .benchmarkingWtList({
          wpid: val ? val : "",
        })
        .then((res) => {
          this.XiangMu = res.data;
          this.value2.push(res.data[0].id);
          this.AjaxCommon();
        });
    },
    XiangMuChange(val) {
      var that = this;
      that.value2 = val;
      that.AjaxCommon();
    },
    getTime(val) {
      //时间戳处理，val=1是默认开始时间（当前月第一天），val=2是默认结束时间（今天）
      var date = new Date();
      var year = date.getFullYear(),
        month = date.getMonth() + 1,
        day = date.getDate();
      month >= 1 && month <= 9 ? (month = "0" + month) : "";
      day >= 0 && day <= 9 ? (day = "0" + day) : "";
      var begin = year + "-" + month + "-01";
      var end = year + "-" + month + "-" + day;
      if (val == 1) {
        return begin;
      } else if (val == 2) {
        return end;
      }
    },
    AjaxCommon() {
      this.list = []
      api
        .ajaxName({
          ajaxName: this.ajaxName,
          wpid: this.value1,
          wtids: this.value2,
          date: this.value4,
          target: "",
          sort: "",
        })
        .then((res) => {
          var data = res.data,
            data2 = [],
            chart = [],
            fzy = [],
            fzyArr = [],
            jfpl = [],
            jfplArr = [];
          let thisItem = [];
          jfpl = data.pop(); //静风频率
          fzy = data.pop(); //风资源
          if (fzy["1"] == null) {
            this.BASE.showMsg({
              msg: "此风机无数据",
              type: "success",
            });
            return false;
          }
          data.forEach((ele, index) => {
            for (let key in ele) {
              if (key !== "name") {
                thisItem.push(ele[key]);
              }
            }
          });

          var count = thisItem.length / data.length;

          data.forEach((item, index) => {
            data2.push({
              index: index + 1,
              name: item.name,
              data1: thisItem[index * count],
              data2: count >= 2 ? thisItem[index * count + 1] : [],
              data3: count >= 3 ? thisItem[index * count + 2] : [],
              data4: count >= 4 ? thisItem[index * count + 3] : [],
              data5: count >= 5 ? thisItem[index * count + 4] : [],
              is_light: false,
            });
          });

          Object.keys(fzy).map((key) => {
            fzyArr.push(fzy[key]);
          });
          Object.keys(jfpl).map((key) => {
            jfplArr.push(jfpl[key]);
          });
          fzyArr.pop();
          var jfplName = jfplArr.pop();
          var indicator = [
            "北",
            "北北西",
            "北西",
            "西北西",
            "西",
            "西南西",
            "南西",
            "南南西",
            "南",
            "南南东",
            "东南",
            "东南东",
            "东",
            "东北东",
            "北东",
            "北北东",
          ];

          var fzyDataArr = [];
          fzyArr.forEach((item, index) => {
            var arr = [];
            item.forEach((e, i) => {
              arr.push(e.value);
            });
            fzyDataArr.push([
              {
                indicator: indicator,
                data: [
                  {
                    value: arr,
                  },
                ],
                name: jfplArr[index],
              },
            ]);
          });
          this.fzyData = fzyDataArr;
          this.tableData.data = data2;
        });


      api
        .benchmarkingDjhxdbbottom({
          wpid: this.value1,
          wtids: this.value2,
          date: this.value4,
        })
        .then((res) => {
          console.log(res.data);
     
          // var data = res.data;
          // var arrName = [],
          //   arrKey = [],
          //   arrData = [],
          //   tempArray = [];
          // data?.forEach((ele) => {
          //   for (let key in ele) {
          //     if (key !== "name") {
          //       arrKey.push(key);
          //       arrData.push(ele[key]);
          //     } else {
          //       arrName.push(ele[key]);
          //     }
          //   }
          // });
          // this.listName = arrName;
          // for (var i = 0; i < arrKey.length - 1; i++) {
          //   //冒泡排序
          //   for (var j = 0; j < arrKey.length - 1 - i; j++) {
          //     if (parseInt(arrKey[j]) > parseInt(arrKey[j + 1])) {
          //       var temp = arrKey[j];
          //       arrKey[j] = arrKey[j + 1];
          //       arrKey[j + 1] = temp;
          //       var temp2 = arrData[j];
          //       arrData[j] = arrData[j + 1];
          //       arrData[j + 1] = temp2;
          //     }
          //   }
          // }
          // for (var i = 0; i < data.length; i++) {
          //   var arr = [];
          //   arrData.forEach((e, index) => {
          //     if (index * data.length + i < arrData.length) {
          //       arr.push({
          //         text: arrKey[index * data.length + i],
          //         value: arrData[index * data.length + i],
          //       });
          //     }
          //   });
          //   tempArray.push({
          //     title: arrName[i],
          //     value: arr,
          //   });
          // }
          // this.list = res.data;
          
          for (const key in res.data) {
            let obj = {}
            obj.name = key
            obj.value = res.data[key]
            this.list.push(obj)
          }
          console.log(" this.list", this.list);
        });
    },
    reset() {
      //重置
      this.value1 = "";
      this.value2 = "";
      this.value4 = this.getTime(1);
      this.AjaxCommon();
    },
    TypeClick(val) {
      this.TypeClass = val;
      // 重置状态start
      // this.value1 = "";
      // this.value2 = "";
      this.value4 = this.getTime(1);
      this.ajaxName = this.ajaxArr[val];
      this.AjaxCommon();
      // 重置状态end
    },
  },
  watch: {
    value4() {
      this.AjaxCommon();
    },
  },
};
</script>

<style lang="less">
.decision-page-3 {
  .com-panel {
    .panel-title {
      color: @gray-l;
    }

    .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: @gray-l;
          font-size: @fontsize-s;
        }
      }
    }
  }

  .info {
    overflow: auto;
    height: calc(100vh - 150px);
  }

  .project-table {
    overflow: auto;

    .com-table {
      tbody {
        padding-right: 0px;
      }

      th,
      td {
        color: #b2bdc0;

        &:nth-child(1) {
          width: 32px;
        }

        &:nth-child(2) {
          width: 183px;
        }
      }
    }
  }

  .direction-info {
    .com-table {
      tbody {
        padding-right: 0px;
      }

      th,
      td {
        color: #b2bdc0;
        padding: 0;

        &:nth-child(1) {
          width: 32px;
          background-color: fade(#536268, 20);
        }

        &:nth-child(2) {
          width: 183px;
          background-color: fade(#536268, 40);
        }

        .direction-title {
          background-color: fade(#536268, 20);
          font-size: @fontsize-s;
          line-height: 2.963vh;
        }

        .direction-chart {
          padding-top: 48px;

          .legend {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 32px;
            margin-bottom: 16px;

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

.hide {
  opacity: 0;
}

.bg-1 {
  background: #05bb4c;
}

.bg-2 {
  background: #f8de5b;
}

.bg-3 {
  background: #4b55ae;
}

.bg-4 {
  background: #fa8c16;
}

.bg-5 {
  background: #1da0d7;
}
</style>