hb_sis_zhfx/src/views/Others/index.vue

<template>
  <div class="swiperBox">
    <el-carousel style="width: 100%; margin: 5vh 0" trigger="click" type="card" height="80vh" :autoplay="false" indicator-position="none" :initial-index="1" arrow="none" @change="changeSwiper">
      <!-- card-1 -->
            <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
        <div class="itemBox">
          <p class="itemTitle">
            记录查询
          </p>
          <div class="df-table">
            <div class="sjcx-item" v-for="item in earlyAlarmColumn" :key="item" @click="jumpUrl(item.url)">
              <div class="sjcx-name">{{item.name}}</div>
              <div class="sjcx-value">{{earlyAlarmData[item.key] || '0'}}</div>
            </div>
          </div>
        </div>
      </el-carousel-item>
     

      <!-- card-2 -->

 <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
        <div class="itemBox">
          <p class="itemTitle">
            报表管理
            <!-- <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/realSearch')"></i> -->
          </p>
          <div class="imageBox1">
            <div class="imgItem1" @click="jumpUrl('/others/tjfx')">
              <el-image class="img1" src="./static/img/o统计分析.png" fit="fill" />
              <p class="imgTitle">统计分析</p>
            </div>
            <div class="imgItem1" @click="jumpUrl('/others/bdzcx')">
              <el-image class="img1" src="./static/img/o表底值查询.png" fit="fill" />
              <p class="imgTitle">表底值查询</p>
            </div>
            <div class="imgItem1" @click="jumpUrl('/others/xnyrb')">
              <el-image class="img1" src="./static/img/o新能源日报.png" fit="fill" />
              <p class="imgTitle">新能源日报</p>
            </div>
            <div class="imgItem1" @click="jumpUrl('/others/xnyfdscyb')">
              <el-image class="img1" src="./static/img/o新能源月报.png" fit="fill" />
              <p class="imgTitle">新能源风电生产月报</p>
            </div>
            <div class="imgItem1" @click="jumpUrl('/others/fdczzdy')">
              <el-image class="img1" src="./static/img/o风场自定义.png" fit="fill" />
              <p class="imgTitle">风电场站自定义</p>
            </div>
            <div class="imgItem1" @click="jumpUrl('/others/fdxmzdy')">
              <el-image class="img1" src="./static/img/o风电自定义.png" fit="fill" />
              <p class="imgTitle">风电项目自定义</p>
            </div>
          </div>
        </div>
      </el-carousel-item>
      <!-- card-3 -->
        <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
        <div class="itemBox">
          <p class="itemTitle">
            数据查询
          </p>
          <div class="df-table" @click="jumpUrl('/others/realSearch')">
            <div class="sjcx-item" v-for="(value, key) in wppointColumn" :key="key">
              <div class="sjcx-name">{{value}}</div>
              <div class="sjcx-value">{{wppointnum[key]}}</div>
            </div>
          </div>
        </div>
      </el-carousel-item>


      <!-- card-4 -->
      <!-- <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
        <div class="itemBox">
          <p class="itemTitle">
            统计分析
            <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/realSearch')"></i>
          </p>
           <ComTable height="30vh" :data="tableData7" :pageSize="20">
            </ComTable>
            <ComTable height="30vh" :data="tableData8" :pageSize="20">
            </ComTable>
        </div>
      </el-carousel-item> -->
      <!-- card-5 -->
            <el-carousel-item style="padding: 20px; background: rgb(4, 12, 11)">
        <div class="itemBox">
          <p class="itemTitle">
            专家知识
            <!-- <i class="itemMoreBtn el-icon-more" @click="jumpUrl('/realSearch')"></i> -->
          </p>
          <div class="df-table">
            <ComTable height="30vh" :data="tableData3" >
            </ComTable>
          </div>
        </div>
      </el-carousel-item>
      
    </el-carousel>
  </div>
</template>

<script>
import $ from "jquery";
import ComTable from "./table.vue";
export default {
  // 名称
  name: "cutAnalyse",
  // 使用组件
  components: {
    ComTable,
  },
  // 数据
  data() {
    const that = this;
    return {
      wppointnum: {},
      wppointColumn: {
        MHS_FDC: "麻黄山风电场",
        NSS_FDC: "牛首山风电场",
        QS_FDC: "青山风电场",
        SBQ_FDC: "石板泉风电场",
        XS_FDC: "香山风电场",
        DWK_GDC: "大武口电站",
        PL_GDC: "平罗光伏电站",
        XH_GDC: "宣和光伏发电站",
        MCH_GDC: "马场湖光发伏电站",
        JSFW: "计算服务测点",
      },
      earlyAlarmData: {},
      earlyAlarmColumn: [
        { name: "升压站告警", key: "syzgj", url: "/others/alarmCenter/boosterAlarm" },
        { name: "升压站动作", key: "", url: "/others/alarmCenter/boosterAlarm" },
        { name: "限电事件", key: "xd", url: "/others/alarmCenter/xdgl" },
        { name: "停机事件", key: "tj", url: "/others/alarmCenter/tjsj" },
        { name: "状态转换记录", key: "", url: "" },
        { name: "风机告警", key: "fjgj", url: "/others/alarmCenter/scadaAlarm" },
        { name: "风机预警", key: "fjyj", url: "/others/alarmCenter/alarmcenter" },
        { name: "操作记录", key: "", url: "" },
      ],
      tableData1: {
        column: [
          {
            name: "名称",
            field: "pointId",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "发电量",
            field: "pointName",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "设备结构",
            field: "timeDate",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "关键参数",
            field: "value",
            is_num: false,
            is_light: false,
            sortable: true,
          },
        ],
        data: [],
      },
      tableData2: {
        column: [
          {
            name: "状态",
            field: "pointId",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "当日数量",
            field: "pointName",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "类型",
            field: "timeDate",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "等级",
            field: "value",
            is_num: false,
            is_light: false,
            sortable: true,
          },
        ],
        data: [],
      },
      tableData3: {
        column: [
          {
            name: "名称",
            field: "pointId",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "数量",
            field: "pointName",
            is_num: false,
            is_light: false,
            sortable: true,
          },
        ],
        data: [],
      },
      tableData4: {
        column: [
          {
            name: "名称",
            field: "pointId",
            is_num: false,
            is_light: false,
            sortable: true,
          },
          {
            name: "数量",
            field: "pointName",
            is_num: false,
            is_light: false,
            sortable: true,
          },
        ],
        data: [],
      },
    };
  },

  // 函数
  methods: {
    // 切换走马灯，并重新渲染样式
    changeSwiper(index) {
      this.$nextTick(() => {
        const swiperDom = $(".swiperBox .el-carousel__item");
        swiperDom
          .eq(index)
          .css({ background: "rgb(4, 12, 11)", border: "1px solid #05bb4c" });
        for (let i = 0; i < swiperDom.length; i++) {
          if (i !== index) {
            swiperDom.eq(i).find(".el-carousel__mask").css({
              background: "rgb(4, 12, 11)",
            });
            swiperDom.eq(i).css({
              background: "rgb(4, 12, 11)",
              border: "1px solid rgba(5, 187, 76, 0.5)",
            });
          }
        }
      });
    },

    // 页面跳转
    jumpUrl(url) {
      this.$router.push(url);
    },
    //获取表格数据
    getTableData() {
      let that = this;
      let tableArr1 = [
        {
          index: 1,
          pointId: "青山风电场",
          pointName: 3763,
          timeDate: "1号机",
          value: "16.93",
        },
        {
          index: 2,
          pointId: "石板泉风电场",
          pointName: 4500,
          timeDate: "2号机",
          value: "20.56",
        },
        {
          index: 3,
          pointId: "牛首山风电场",
          pointName: 3863,
          timeDate: "3号机",
          value: "38",
        },
        {
          index: 4,
          pointId: "香山风电场",
          pointName: 3654,
          timeDate: "4号机",
          value: "54",
        },
        {
          index: 5,
          pointId: "麻黄山风电场",
          pointName: 1863,
          timeDate: "5号机",
          value: "18",
        },
      ];
      that.tableData1.data = tableArr1;
      console.log("tableData1:", that.tableData1);

      let tableArr2 = [
        {
          index: 1,
          pointId: "停机事件管理",
          pointName: 11.93,
          timeDate: "升压站动作",
          value: "2",
        },
        {
          index: 2,
          pointId: "限电管理",
          pointName: 21.56,
          timeDate: "升压站告警",
          value: "5",
        },
        {
          index: 3,
          pointId: "状态转换记录",
          pointName: 82,
          timeDate: "风机告警",
          value: "3",
        },
        {
          index: 4,
          pointId: "操作记录",
          pointName: 54,
          timeDate: "风机预警",
          value: "1",
        },
      ];
      that.tableData2.data = tableArr2;
      console.log("tableData2:", that.tableData2);

      let tableArr3 = [
        {
          index: 1,
          pointId: "故障知识列表",
          pointName: 16.93,
        },
        {
          index: 2,
          pointId: "安全措施知识",
          pointName: 20.56,
        },
        {
          index: 3,
          pointId: "排查检修方案",
          pointName: 38,
        },
        {
          index: 4,
          pointId: "预警知识",
          pointName: 54,
        },
        {
          index: 5,
          pointId: "特征参数",
          pointName: 44,
        },
        {
          index: 6,
          pointId: "风险辨识知识",
          pointName: 24,
        },
        {
          index: 7,
          pointId: "作业指导知识",
          pointName: 14,
        },
      ];
      that.tableData3.data = tableArr3;
      console.log("tableData3:", that.tableData3);

      let tableArr4 = [
        {
          index: 1,
          pointId: "风电场站自定义",
          pointName: 16.93,
        },
        {
          index: 2,
          pointId: "风电项目自定义",
          pointName: 20.56,
        },
        {
          index: 3,
          pointId: "光伏场站自定义",
          pointName: 38,
        },
        {
          index: 4,
          pointId: "光伏项目自定义",
          pointName: 54,
        },
      ];
      that.tableData4.data = tableArr4;
      console.log("tableData4:", that.tableData4);
    },
    getWppointnum() {
      const that = this;
      that.API.requestData({
        method: "POST",
        subUrl: "yaw/getWppointnum",
        success(res) {
          that.wppointnum = res.data;
        },
      });
    },
    async getEarlyAlarmData() {
      const that = this;
      const {data} = await that.API.requestData({
        method: "GET",
        baseURL: "http://192.168.1.18:8075/",
        subUrl: "alarm/count/todaycount",
        success(res) {
          },
      });
      this.earlyAlarmData = data.data;
    },
  },

  created() {},

  mounted() {
    let that = this;
    this.$nextTick(() => {
      this.changeSwiper(1);
    });
    that.getTableData();
    this.getWppointnum();
    this.getEarlyAlarmData();
  },

  unmounted() {},
};
</script>

<style lang="less" scoped>
.swiperBox,
.itemBox {
  width: 100%;
  height: 100%;
  font-size: 20px;
  .df-table {
    /deep/ .com-table thead tr th {
      background-color: rgba(83, 98, 104, 0.2);
      height: 30px;
      line-height: 30px;
      color: #9ca5a8;
      font-weight: 400;
      font-size: 20px !important;
      position: sticky;
      top: 0;
      cursor: pointer;
    }
    /deep/ .com-table tbody tr td {
      padding: 4px;
      color: #393a3a;
      text-align: center;
      font-size: 20px !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .sjcx-item:nth-child(2n) {
      background-color: rgba(96, 103, 105, 0.2);
    }
    .sjcx-item:hover {
      color: #05bb4c;
    }
    .sjcx-item {
      cursor: pointer;
      // background-color: #edbf03;
      display: flex;
      height: 6.68vh;
      line-height: 6.68vh;
      font-size: 18pt;
      text-align: center;
      color: #9ca5a8;
      .sjcx-name {
        // background-color:aqua;
        flex: 0 0 50%;
      }
      .sjcx-value {
        // text-align: left;
        // background-color:rosybrown;
        flex: 0 0 50%;
      }
    }
  }
  .itemTitle {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    .itemMoreBtn {
      cursor: pointer;
      font-size: 22px;
      position: absolute;
      right: 0;
      top: 0;
    }
  }

  .inline {
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 24px;
    margin-bottom: 30px;
    width: 100%;
    margin: 0 0 30px 0;
    transition: 0.2s;

    .l {
      color: #b3bdc0;
      width: 46%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-right: 4%;
      transition: 0.2s;
    }

    .r {
      color: #05bb4c;
      position: relative;
      width: 46%;
      display: flex;
      justify-content: start;
      align-items: center;
      margin-left: 4%;

      &::after {
        content: "";
        position: absolute;
        height: 10px;
        left: 30px;
        top: calc(50% - 5px);
        background-color: #edbf03;
        border-radius: 2px;
      }
    }

    .r1::after {
      width: 30px;
    }

    .r2::after {
      width: 60px;
    }

    .r3::after {
      width: 90px;
    }

    .r4::after {
      width: 120px;
    }

    &:hover {
      width: 80%;
      margin: 0 10% 30px 10%;
      color: #05bb4c;
      transition: 0.2s;
    }

    &:hover .l {
      color: #05bb4c;
      transition: 0.2s;
    }
  }

  .imageBox {
    width: 100%;
    display: flex;
    // justify-content: start;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 100px;

    .imgItem {
      cursor: pointer;
      border: none;
      margin-right: 1%;
      margin-bottom: 20px;
      display: flex;
      justify-content: start;
      align-items: center;
      flex-direction: column;
      // width: 32%;
      width: 45%;

      .img {
        width: 100%;
        // height: 150px;
        height: 300px;
        border: 1px solid #b3bdc0;
        transition: 0.2s;

        &:hover {
          border: 1px solid #05bb4c;
          transition: 0.2s;
        }
      }

      p {
        width: 100%;
        font-size: 16px;
        color: #b3bdc0;
        text-align: center;
        transition: 0.2s;
      }

      &:hover p {
        transition: 0.2s;
        color: #05bb4c;
      }
    }
  }
  .imageBox1 {
    width: 100%;
    display: flex;
    // justify-content: start;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 100px;

    .imgItem1 {
      cursor: pointer;
      border: none;
      margin-right: 1%;
      margin-bottom: 20px;
      display: flex;
      // justify-content: start;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      width: 32%;

      .img1 {
        width: 100%;
        height: 150px;
        border: 1px solid #b3bdc0;
        transition: 0.2s;

        &:hover {
          border: 1px solid #05bb4c;
          transition: 0.2s;
        }
      }

      p {
        width: 100%;
        font-size: 16px;
        color: #b3bdc0;
        text-align: center;
        transition: 0.2s;
      }

      &:hover p {
        transition: 0.2s;
        color: #05bb4c;
      }
    }
  }
  .imageBox2 {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 100px;

    .imgItem2 {
      cursor: pointer;
      border: none;
      margin-right: 1%;
      margin-bottom: 20px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      flex-direction: column;
      width: 45%;

      .img2 {
        width: 100%;
        height: 180px;
        border: 1px solid #b3bdc0;
        transition: 0.2s;

        &:hover {
          border: 1px solid #05bb4c;
          transition: 0.2s;
        }
      }

      p {
        width: 100%;
        font-size: 16px;
        color: #b3bdc0;
        text-align: center;
        transition: 0.2s;
      }

      &:hover p {
        transition: 0.2s;
        color: #05bb4c;
      }
    }
  }

  .iframe {
    border: 0;
    overflow: scroll;
    background: #fff;
  }
}
</style>

<style lang="less">
.itemBox {
  .el-form-item,
  .el-form-item__label {
    font-size: 16px;
  }

  .el-form-item__label {
    text-align: left;
  }
}
</style>