erp_fans/src/views/index.vue

<template>
  <div class="app-container ">
    <div class="stat-warp">
      <div style="margin-bottom:15px">
        <TitleInfo :content="'工作事项'"></TitleInfo>
      </div>
      <ul>
        <li class="theme1" @click="toUrl(1)">
          <div class="num">{{ toBeProcessedData.total }}</div>
          <div class="label">待审批</div>
          <div class="icon-box">
            <i class="icon iconfont icon-iconm_waixht"></i>
          </div>
        </li>
        <li class="theme2" @click="toUrl(2)">
          <div class="num">{{ allData[0].total }}</div>
          <div class="label">待报价</div>
          <div class="icon-box">
            <svg-icon :icon-class="'baojia'" className="svg-class1" />
          </div>
        </li>
        <li class="theme3" @click="toUrl(3)">
          <div class="num">{{ allData[1].total }}</div>
          <div class="label">待投产</div>
          <div class="icon-box">
            <svg-icon :icon-class="'touchang'" className="svg-class" />
          </div>
        </li>
        <li class="theme4" @click="toUrl(4)">
          <div class="num">{{ allData[2].total }}</div>
          <div class="label">待入库</div>
          <div class="icon-box">
            <svg-icon :icon-class="'ruku'" className="svg-class1" />
          </div>
        </li>
        <li class="theme5" @click="toUrl(5)">
          <div class="num">{{ allData[3].total }}</div>
          <div class="label">待出库</div>
          <div class="icon-box">
            <svg-icon :icon-class="'chuku'" className="svg-class1" />
          </div>
        </li>
        <li class="theme6" @click="toUrl(6)" v-if="useUserStore().user.companyId =='100'">
          <div class="num">{{ allData[4].total }}</div>
          <div class="label">待认领</div>
          <div class="icon-box">
            <svg-icon :icon-class="'renling'" className="svg-class1" />
          </div>
        </li>
        <li class="theme6" @click="toUrl(6)" v-else>
          <div class="num">{{ allData[5].total }}</div>
          <div class="label">库存预警</div>
          <div class="icon-box">
            <svg-icon :icon-class="'kucun'" className="svg-class1" />
          </div>
        </li>

      </ul>
      <div class="table-card">
        <el-card style="width:32%">
          <TitleInfo :content="'待审批'"></TitleInfo>
          <el-table :data="toBeProcessedData.rows" style="width: 100%" :height="tableHeight">
            <el-table-column prop="title" label="流程标题" />
          </el-table>

        </el-card>
        <el-card style="width:32%">
          <TitleInfo :content="'待报价'"></TitleInfo>
          <el-table :data="allData[0].rows" style="width: 100%" :height="tableHeight">
            <el-table-column prop="code" label="报价单号" />
            <el-table-column prop="amount" label="报价金额" width="110" />
          </el-table>

        </el-card>
        <el-card style="width:32%">
          <TitleInfo :content="'待投产'"></TitleInfo>
          <el-table :data="allData[1].rows" style="width: 100%" :height="tableHeight">
            <el-table-column prop="code" label="订单号" />
            <el-table-column prop="deliveryPeriod" label="交期" width="150" />
          </el-table>

        </el-card>
      </div>

      <div class="table-card ">
        <el-card style="width:32%">
          <TitleInfo :content="'待入库'"></TitleInfo>
          <el-table :data="allData[2].rows" style="width: 100%" :height="tableHeight">
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="quantity" label="数量" width="100" />
          </el-table>

        </el-card>
        <el-card style="width:32%">
          <TitleInfo :content="'待出库'"></TitleInfo>
          <el-table :data="allData[3].rows" style="width: 100%" :height="tableHeight">
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="quantity" label="数量" width="100" />
          </el-table>

        </el-card>
        <el-card style="width:32%" v-if="useUserStore().user.companyId =='100'">
          <TitleInfo :content="'待认领'"></TitleInfo>
          <el-table :data="allData[4].rows" style="width: 100%" :height="tableHeight">
            <el-table-column prop="accountManagementName" label="账户名称" />
            <el-table-column prop="amount" label="到账金额" width="100" />
            <el-table-column prop="transactionTime" label="到账时间" width="150" />
          </el-table>

        </el-card>
        <el-card style="width:32%" v-else>
          <TitleInfo :content="'库存预警'"></TitleInfo>
          <el-table :data="allData[5].rows" style="width: 100%" :height="tableHeight">
            <el-table-column prop="productCode" label="产品编码" />
            <el-table-column prop="productName" label="产品名称" />
            <el-table-column prop="stockThreshold" label="安全库存" width="100" />
          </el-table>
        </el-card>
      </div>

    </div>
    <div class="table-warp">
      <div style="margin-bottom:15px">
        <TitleInfo :content="'监控告警'"></TitleInfo>
      </div>
      <el-card style="margin-bottom:20px">
        <TitleInfo :content="'逾期生产订单'+` (${allData[6].total})`"></TitleInfo>
        <el-table :data="allData[6].rows" style="width: 100%" :height="tableHeightOne">
          <el-table-column prop="code" label="订单号" />
          <el-table-column prop="deliveryPeriod" label="交期" width="150" />
        </el-table>
      </el-card>
      <el-card style="margin-bottom:20px">
        <TitleInfo :content="'报损情况（近30天）'"></TitleInfo>
        <div class="baosun">
          <div class="theme2 q" @click="toUrl(7)">
            <span class="label">补单</span>
            <span class="num">{{ reportLossesData.replenishSumQuantity }}</span>
          </div>
          <div class="theme3 q" @click="toUrl(7)">
            <span class="label">丢失</span>
            <span class="num">{{ reportLossesData.lossSumQuantity }}</span>
          </div>
        </div>
      </el-card>
      <el-card>
        <TitleInfo :content="'设备运行情况'"></TitleInfo>
        <div style="display:flex;align-items:center">
          <div style="width:100px;font-size:12px">
            设备名称：设备1 <br><br> 当天标刻数量：10<br><br>在线工作时长（分钟）：1000
          </div>
          <div style="height:190px;width:calc(100% - 100px)" ref="pie_1"></div>
        </div>
      </el-card>
    </div>

  </div>
</template>

<script setup name="Index">
import { createApp, onMounted, ref } from "vue";
import byTableDemo from "../components/byTable/demo";
import html2canvas from "html2canvas";
import JsPDF from "jspdf";
import * as echarts from "echarts";
const { proxy } = getCurrentInstance();
const tableHeight = ref(0);
const tableHeightOne = ref(0);
const getTableHeight = () => {
  tableHeight.value = (window.innerHeight - 390) / 2;
  tableHeightOne.value = window.innerHeight - 610;
};
getTableHeight();
window.addEventListener("resize", () => {
  getTableHeight();
});

function goTarget(url) {
  window.open(url, "__blank");
}

const toBeProcessedData = ref({
  total: 0,
  rows: [],
});

const allData = ref({
  0: {
    total: 0,
    rows: [],
  },
  1: { total: 0, rows: [] },
  2: { total: 0, rows: [] },
  3: { total: 0, rows: [] },
  4: { total: 0, rows: [] },
  5: { total: 0, rows: [] },
  6: { total: 0, rows: [] },
});

const reportLossesData = ref({});
const pushProcessApproval = (row) => {
  if (row.status != 1 && row.status != 0) {
    proxy.$router.push({
      path: "/platform_manage/process/processApproval",
      query: {
        flowKey: row.flowKey,
        id: row.id,
        processType: 20,
        version: row.version,
        businessId: row.businessId,
        submitType: "10",
      },
    });
    return;
  }
  proxy.post("flowExample/getApprovalRecord", { id: row.id }).then((res) => {
    if (res.recordList.length > 0) {
      let data = res.recordList.filter((item) => item.status === 2);
      let nodeType = 0;
      if (data && data.length > 0) {
        nodeType = data[0].nodeType;
      }
      proxy.$router.push({
        path: "/platform_manage/process/processApproval",
        query: {
          flowKey: row.flowKey,
          id: row.id,
          processType: nodeType == 1 ? 30 : 10,
          version: row.version,
          businessId: row.businessId,
          submitType: "10",
        },
      });
    }
  });
};

const pushProcessApprovalOne = (row) => {
  proxy.$router.push({
    path: "/platform_manage/process/processApproval",
    query: {
      flowKey: row.flowKey,
      id: row.id,
      processType: 20,
      version: row.version,
      businessId: row.businessId,
      submitType: "10",
    },
  });
  return;
};
const getData = () => {
  proxy
    .post("/flowExample/getToBeProcessedPage", {
      pageNum: 1,
      pageSize: 5,
    })
    .then((res) => {
      toBeProcessedData.value = res;
    });
  // 待报价
  proxy
    .post("/saleQuotation/page", {
      pageNum: 1,
      pageSize: 5,
      isEstimate: proxy.useUserStore().user.companyId == "100" ? "" : "1",
    })
    .then((res) => {
      allData.value[0] = res;
    });

  // 待投产
  proxy
    .post("/produceOrder/page", {
      pageNum: 1,
      pageSize: 5,
      isProduce: "0",
    })
    .then((res) => {
      allData.value[1] = res;
    });

  // 待入库
  proxy
    .post("/stockWaitDetails/page", {
      pageNum: 1,
      pageSize: 5,
      type: 1,
    })
    .then((res) => {
      allData.value[2] = res;
    });
  // 待出库
  proxy
    .post("/stockWaitDetails/page", {
      pageNum: 1,
      pageSize: 5,
      type: 2,
    })
    .then((res) => {
      allData.value[3] = res;
    });

  // 待认领
  proxy
    .post("/sale/accountRunningWater/page", {
      pageNum: 1,
      pageSize: 5,
      isClaim: "0",
      dataType: "1",
    })
    .then((res) => {
      allData.value[4] = res;
    });

  // 库存预警
  proxy
    .post("/stock/stockWarningPage", {
      pageNum: 1,
      pageSize: 5,
    })
    .then((res) => {
      allData.value[5] = res;
    });

  // 逾期生产订单
  proxy
    .post("/produceOrder/page", {
      pageNum: 1,
      pageSize: 10,
      isOverdue: "1",
    })
    .then((res) => {
      allData.value[6] = res;
    });
  // 报损统计
  proxy.post("/reportLossesDetails/lossesStatistics").then((res) => {
    reportLossesData.value = res;
  });
};
const toUrl = (att) => {
  //获取name为name的路由的基础信息
  // const route = proxy.$router.resolve({ name: name, params: {} });

  let pageObj = {
    1: "Backlog",
    2:
      proxy.useUserStore().user.companyId == "100"
        ? "PriceSheetEHSD"
        : "PriceSheetEstimate",
    3: "ProductionOrder",
    4: "WaitingForStorage",
    5: "WaitingForDelivery",
    6: "Claim",
    7: "SupplementaryOrder",
  };

  proxy.$router.push({
    name: pageObj[att],
  });
};
getData();
// ​
const getOption = () => {
  return {
    title: {
      show: true,
      text: "",
      bottom: "0%",
      left: "center",
      textStyle: {
        color: "#fff",
        fontSize: 12,
        fontWeight: 400,
      },
    },
    tooltip: {
      trigger: "item",
    },
    grid: {
      show: false,
      bottom: 0,
    },
    // legend: {
    //   top: "0%",
    //   left: "center",
    // },
    series: [
      {
        name: "设备1",
        type: "pie",
        // center: ["50%", "50%"],
        radius: ["45%", "75%"],
        top: "0%",
        bottom: "0%",
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: "bold",
            color: "#fff",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          {
            value: 1000,
            name: "工作时长",
            itemStyle: {
              color: "#F9CB19",
            },
          },
          {
            value: 440,
            name: "",
            itemStyle: {
              color: "#268EFF",
            },
          },
        ],
      },
    ],
  };
};

const pie_1 = ref(null);
let pie_1Chart = null;
let option1 = {};
onMounted(() => {
  option1 = getOption();
  pie_1Chart = echarts.init(pie_1.value);
  window.addEventListener("resize", () => {
    pie_1Chart.resize();
  });
  pie_1Chart.setOption(option1);
  pie_1Chart.resize();
});
</script>
<style scoped lang="scss">
.app-container {
  display: flex;
  width: 100vw;
  padding: 10px;
  font-size: 14px !important;
  // height: 100%;
  .announcement {
    padding: 0;
    margin: 0;
    li {
      list-style: none;
      border-radius: 2px;
      padding: 14px 20px;
      background: #eeeeee;
      margin-bottom: 10px;
      font-size: 14px;
      cursor: pointer;
      .time {
        color: #999;
      }
      .content {
        margin-top: 10px;
        color: #333;
      }
    }
    li:hover {
      background: #eff6ff;
    }
  }
  .table-warp {
    width: 400px;
    //页面全屏，占据剩下的位置
    height: calc(100vh - 120px);
    background: #fff;
    padding: 10px;
    // border-radius: 5px;
    .baosun {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;
      .q {
        padding: 10px;
        min-width: 150px;
        display: flex;
        cursor: pointer;
        justify-content: space-between;
        border-radius: 10px;
        .num {
          font-size: 20px;
          font-weight: 700;
        }
      }
      .theme2 {
        background: linear-gradient(180deg, #eae8fb 0%, #ded9ff 100%);
      }
      //#FFF1E1 #FF9315
      .theme3 {
        background: #fff1e1;
      }
    }

    .card {
      height: calc(50% - 10px);
      background: #fff;
      float: left;
      border-radius: 5px;
      padding: 20px;
      overflow-y: auto;
    }
    .odd {
      width: calc(66.5% - 10px);
    }
    .even {
      margin-left: 10px;
      width: 33.5%;
    }
    // .card:nth-child(2n + 1) {
    //   margin-right: 20px;
    // }
    .card:nth-child(1) {
      margin-bottom: 10px;
    }
    .card:nth-child(2) {
      margin-bottom: 10px;
    }
  }
  .stat-warp {
    width: calc(100% - 400px - 10px);
    height: calc(100vh - 120px);
    margin-right: 10px;
    // margin-bottom: 10px;
    background: #fff;
    padding: 10px;
    // padding: 20px;
    // overflow: hidden;
    // position: relative;
    // border-radius: 5px;

    .title {
      height: 60px;
      select {
        height: 60px;
        border: none;
        outline: none;
        -webkit-appearance: none;
        appearance: none;
        font-size: 14px;
        font-weight: bold;
        background: url("@/assets/images/sanjiao.png") no-repeat right center;
        padding-right: 20px;
      }
      div {
        height: 60px;
        font-size: 14px;
        font-weight: bold;
        line-height: 60px;
      }
    }
    ul {
      padding: 0;
      // overflow: hidden;
      margin: 0;
      display: flex;
      width: 100%;
      flex-wrap: nowrap;
      overflow: hidden;
      justify-content: space-between;
      li {
        flex: 1;
        list-style: none;
        min-width: 150px;
        box-sizing: border-box;
        margin-right: 20px;
        background: linear-gradient(360deg, #c7e3fe 0%, #dfecff 100%);
        // float: left;
        // overflow: hidden;
        padding: 10px;
        color: #333333;
        position: relative;
        border-radius: 10px;
        cursor: pointer;
        .label {
          font-size: 14px;
          margin-top: 10px;
        }
        .label::before {
          // width: 10px;
          // height: 10px;
          // content: '';
          // border-radius: 50%;
          // background: #0084ff;
          // display: inline-block;
          // margin-right: 10px;
        }
        .num {
          font-size: 24px;
          font-weight: bold;
        }
        .icon-box {
          position: absolute;
          height: 40px;
          width: 40px;
          right: 20px;
          top: 20px;
          background: #fff;
          border-radius: 10px;
          text-align: center;
          line-height: 40px;
          i {
            font-size: 20px;
            color: #0084ff;
          }
        }
      }
      //#F5F3FF #9E64ED
      .theme2 {
        background: linear-gradient(180deg, #eae8fb 0%, #ded9ff 100%);
        .label::before {
          background: #7566f0;
        }
        .icon-box i {
          color: #7566f0;
        }
      }
      //#FFF1E1 #FF9315
      .theme3 {
        background: #fff1e1;
        .label::before {
          background: #ff9315;
        }
        .icon-box i {
          color: #ff9315;
        }
      }
      //#E2FBE8 #39C55A
      .theme4 {
        background: #e2fbe8;
        .label::before {
          background: #39c55a;
        }
      }
      .theme5 {
        background: #ffebe9;
        .label::before {
          background: #f94539;
        }
      }
      .theme6 {
        background: #e4f9f9;
        .label::before {
          background: #53cbcb;
        }
      }
      .multi-data {
        .label::before {
          display: none;
        }
        .label {
          font-size: 14px;
          font-weight: bold;
          color: #333;
          margin-bottom: 8px;
        }
        .num-warp {
          overflow: hidden;
          .num-box {
            float: left;
            min-width: 80px;
            margin-right: 20px;
            .num-small {
              font-size: 16px;
              font-weight: bold;
              margin-bottom: 8px;
            }
            .label-small {
              color: #666;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
  .table-card {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
  }
}

:deep(
    .el-table .el-table__header-wrapper th,
    .el-table .el-table__fixed-header-wrapper th
  ) {
  height: auto !important;
}
.svg-class {
  font-size: 16px;
}
.svg-class1 {
  font-size: 19px;
  margin-top: 10px;
}
:deep(.el-table .cell) {
  font-size: 12px !important;
  line-height: 24px !important;
}
</style>