performance-test/src/views/admin/cockpitManage/component/leftdata.vue

<template>
  <div class="backbone">
    <div class="BOX">
      <h3>待办任务</h3>
      <div style="display: flex">
        <div class="YC02" @click="getwgl">
          <strong class="texyellow">
            {{ onrelevance ? onrelevance : 0 }}</strong
          >
          <span>未关联任务</span>
        </div>
        <div class="YC02" @click="getwfx">
          <strong class="textred"> {{ abnormal ? abnormal : 0 }}</strong>
          <span>分析异常数</span>
        </div>

        <div class="YC03"></div>
      </div>

      <el-dialog title="未关联任务统计表" :visible.sync="glShow" width="40%">
        <!-- 外部容器设置最大高度和滚动条 -->
        <div style="max-height: 400px; overflow-y: auto">
          <el-table :data="glData" style="width: 100%">
            <el-table-column
              prop="fieldName"
              label="风场名称"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="analysisName"
              label="分析名称"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="createTime"
              label="创建时间"
            ></el-table-column>

            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="handleClick(scope.row)"
                  type="text"
                  size="small"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>

      <el-dialog title="分析异常统计表" :visible.sync="YCShow" width="40%">
        <div style="max-height: 400px; overflow-y: auto">
          <el-table :data="FXData" style="width: 100%">
            <el-table-column prop="fieldName" label="风场名称" width="180">
            </el-table-column>
            <el-table-column prop="analysisName" label="分析名称" width="180">
            </el-table-column>
            <el-table-column prop="createTime" label="创建时间">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button
                  @click="YChandleClick(scope.row)"
                  type="text"
                  size="small"
                  >编辑</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
  
  <script>
import {
  queryWaitTask,
  getAnalysisResultStateList,
  getAnalysisResultErrStateList,
  analysisResultList,
} from "@/api/ledger.js";

export default {
  // props: {
  //   maplistArr: {
  //     type: Object,
  //     default: () => ({}),
  //   },
  //   defaultdata: {
  //     type: Object,
  //     default: () => ({}),
  //   },
  // },

  data() {
    return {
      onrelevance: "",
      abnormal: "",
      glShow: false,
      YCShow: false,
      glData: [],
      FXData: [],
    };
  },
  created() {
    this.getbacklog();
  },
  mounted() {},
  methods: {
    getbacklog() {
      queryWaitTask().then((res) => {
        this.abnormal = res.data.errCount;
        this.onrelevance = res.data.uncorrelatedCount;
      });
    },
    getwgl() {
      const arr = {
        pageSize: 999,
        analysisState: -1,
      };
      analysisResultList(arr).then((res) => {
        this.glData = res.data.list;
        this.glShow = true;
      });
    },
    getwfx() {
      analysisResultList({ errState: 1 }).then((res) => {
        this.FXData = res.data.list;
        this.YCShow = true;
      });
    },

    handleClick(row) {
      const fieldName = row.fieldName; // 获取当前行的 fieldName 数据
      const analysisState = -1;

      // 打开新窗口
      const newWindow = window.open(
        "/home/performance/assetssMag?id=195",
        "_blank"
      );
      // 等待窗口加载完成后发送消息
      newWindow.onload = () => {
        newWindow.postMessage({ fieldName, analysisState }, "*");
      };
    },

    YChandleClick(row) {
      const fieldName = row.fieldName; // 获取当前行的 fieldName 数据
      const errState = 1;
      // 打开新窗口
      const newWindow = window.open(
        "/home/performance/assetssMag?id=195",
        "_blank"
      );
      // 等待窗口加载完成后发送消息
      newWindow.onload = () => {
        newWindow.postMessage({ fieldName, errState }, "*");
      };
    },
  },
};
</script>
  
  <style lang="scss" scoped>
.backbone {
  width: 300px;
  color: #fff;
  border-radius: 5px;
  //   padding: 20px;
}

.BOX {
  background: #004f5f;
  display: flex;
  padding-left: 10px;
  flex-wrap: wrap;
  padding-bottom: 15px;
  color: #fff;
  border-radius: 5px;
  h3 {
    margin-top: 5px;
  }
}

.YC01 {
  width: 154px;
  height: 60px;
  background-image: url("../../../../assets/001.png");
  background-size: 154px 60px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 15px;
  margin-top: 15px;
  text-align: center;

  strong {
    display: block;
    font-size: 26px;
    color: #4bffff;
  }

  span {
    display: block;
    font-size: 12px;
  }
}

.YC02 {
  width: 70px;
  height: 60px;
  background-image: url("../../../../assets/002.png");
  background-size: 70px 60px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 15px;
  margin-top: 15px;
  text-align: center;
  cursor: pointer;
  .textred {
    color: #d9001b;
  }

  .texyellow {
    color: #facd91;
  }

  strong {
    display: block;
    font-size: 26px;
    color: #4bffff;
  }

  span {
    display: block;
    font-size: 12px;
  }
}

.YC03 {
  width: 70px;
  height: 60px;
}

.Tabtab {
  font-size: 12px;
}

::v-deep.el-table__cell {
  padding: 2px 0 !important;
}

::v-deep.el-table .el-table__cell {
  padding: 2px 0 !important;
}

::v-deep.el-table--scrollable-y .el-table__body-wrapper {
  overflow-y: clip !important;
}

.titleYC {
  font-size: 14px;
  background: #214e5d;
  padding: 5px 0;

  span:nth-child(1) {
    margin: 0 70px 0 10px;
  }
}

.titleJQ {
  font-size: 14px;
  background: #214e5d;
  padding: 5px 0;

  span:nth-child(1) {
    margin: 0 15px 0 10px;
  }

  span:nth-child(2) {
    margin: 0 45px 0 30px;
  }
}
</style>