|
|
@@ -1,32 +1,149 @@
|
|
|
<template>
|
|
|
- <div class="app-container home">
|
|
|
+ <div class="app-container ">
|
|
|
<div class="stat-warp">
|
|
|
+ <div style="margin-bottom:15px">
|
|
|
+ <TitleInfo :content="'工作事项'"></TitleInfo>
|
|
|
+ </div>
|
|
|
<ul>
|
|
|
- <li class="theme1" @click="toUrl('Backlog', 1)">
|
|
|
+ <li class="theme1" @click="toUrl(1)">
|
|
|
<div class="num">{{ toBeProcessedData.total }}</div>
|
|
|
- <div class="label">我的待审批</div>
|
|
|
+ <div class="label">待审批</div>
|
|
|
<div class="icon-box">
|
|
|
<i class="icon iconfont icon-iconm_waixht"></i>
|
|
|
</div>
|
|
|
</li>
|
|
|
- <li class="theme2" @click="toUrl('DealWith', 2)">
|
|
|
+ <li class="theme2" @click="toUrl(2)">
|
|
|
<div class="num">{{ haveInitiatedData.total }}</div>
|
|
|
- <div class="label">我的发起（未结束）</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">{{ pushInfo.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">{{ pushInfo.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">{{ pushInfo.total }}</div>
|
|
|
+ <div class="label">待出库</div>
|
|
|
<div class="icon-box">
|
|
|
- <i class="icon iconfont icon-iconm_wofqd"></i>
|
|
|
+ <svg-icon :icon-class="'chuku'" className="svg-class1" />
|
|
|
</div>
|
|
|
</li>
|
|
|
- <li class="theme3">
|
|
|
+ <li class="theme6" @click="toUrl(6)">
|
|
|
<div class="num">{{ pushInfo.total }}</div>
|
|
|
- <div class="label">未读消息</div>
|
|
|
+ <div class="label">待认领</div>
|
|
|
<div class="icon-box">
|
|
|
- <i class="icon iconfont icon-iconm_unread"></i>
|
|
|
+ <svg-icon :icon-class="'renling'" className="svg-class1" />
|
|
|
</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
+ <div class="table-card">
|
|
|
+ <el-card style="width:32%">
|
|
|
+ <TitleInfo :content="'待审批'"></TitleInfo>
|
|
|
+ <el-table :data="tableData" style="width: 100%" :height="tableHeight">
|
|
|
+ <el-table-column prop="date" label="Date" />
|
|
|
+ <el-table-column prop="name" label="Name" />
|
|
|
+ <el-table-column prop="address" label="Address" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ <el-card style="width:32%">
|
|
|
+ <TitleInfo :content="'待报价'"></TitleInfo>
|
|
|
+ <el-table :data="tableData" style="width: 100%" :height="tableHeight">
|
|
|
+ <el-table-column prop="date" label="Date" />
|
|
|
+ <el-table-column prop="name" label="Name" />
|
|
|
+ <el-table-column prop="address" label="Address" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ <el-card style="width:32%">
|
|
|
+ <TitleInfo :content="'待投产'"></TitleInfo>
|
|
|
+ <el-table :data="tableData" style="width: 100%" :height="tableHeight">
|
|
|
+ <el-table-column prop="date" label="Date" />
|
|
|
+ <el-table-column prop="name" label="Name" />
|
|
|
+ <el-table-column prop="address" label="Address" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="table-card ">
|
|
|
+ <el-card style="width:32%">
|
|
|
+ <TitleInfo :content="'待入库'"></TitleInfo>
|
|
|
+ <el-table :data="tableData" style="width: 100%" :height="tableHeight">
|
|
|
+ <el-table-column prop="date" label="Date" />
|
|
|
+ <el-table-column prop="name" label="Name" />
|
|
|
+ <el-table-column prop="address" label="Address" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ <el-card style="width:32%">
|
|
|
+ <TitleInfo :content="'待出库'"></TitleInfo>
|
|
|
+ <el-table :data="tableData" style="width: 100%" :height="tableHeight">
|
|
|
+ <el-table-column prop="date" label="Date" />
|
|
|
+ <el-table-column prop="name" label="Name" />
|
|
|
+ <el-table-column prop="address" label="Address" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ <el-card style="width:32%">
|
|
|
+ <TitleInfo :content="'待认领'"></TitleInfo>
|
|
|
+ <el-table :data="tableData" style="width: 100%" :height="tableHeight">
|
|
|
+ <el-table-column prop="date" label="Date" />
|
|
|
+ <el-table-column prop="name" label="Name" />
|
|
|
+ <el-table-column prop="address" label="Address" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+
|
|
|
</div>
|
|
|
<div class="table-warp">
|
|
|
- <div class="card odd">
|
|
|
+ <div style="margin-bottom:15px">
|
|
|
+ <TitleInfo :content="'监控告警'"></TitleInfo>
|
|
|
+ </div>
|
|
|
+ <el-card style="margin-bottom:20px">
|
|
|
+ <TitleInfo :content="'逾期订单'"></TitleInfo>
|
|
|
+ <el-table :data="tableData" style="width: 100%" :height="tableHeightOne">
|
|
|
+ <el-table-column prop="date" label="Date" />
|
|
|
+ <el-table-column prop="name" label="Name" />
|
|
|
+ <el-table-column prop="address" label="Address" />
|
|
|
+ </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">{{ toBeProcessedData.total }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="theme3 q" @click="toUrl(7)">
|
|
|
+ <span class="label">丢失</span>
|
|
|
+ <span class="num">{{ haveInitiatedData.total }}</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 class="card odd">
|
|
|
<div class="commons-title">我的待审批</div>
|
|
|
<el-table :data="toBeProcessedData.rows" style="width: 100%">
|
|
|
<el-table-column prop="flowName" label="流程类型" width="100" />
|
|
|
@@ -69,7 +186,7 @@
|
|
|
<div class="content">{{ i.content }}</div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
<!-- <byTableDemo></byTableDemo> -->
|
|
|
<!-- <el-input type="number" v-model='aaa' v-mousewheel></el-input> -->
|
|
|
@@ -82,6 +199,18 @@ 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 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();
|
|
|
+});
|
|
|
|
|
|
const aaa = ref(1);
|
|
|
function goTarget(url) {
|
|
|
@@ -192,26 +321,110 @@ const getData = () => {
|
|
|
pushInfo.value = res;
|
|
|
});
|
|
|
};
|
|
|
-const toUrl = (name, type) => {
|
|
|
+const toUrl = (att) => {
|
|
|
//获取name为name的路由的基础信息
|
|
|
// const route = proxy.$router.resolve({ name: name, params: {} });
|
|
|
- if (type === 1) {
|
|
|
- proxy.$router.push({
|
|
|
- name,
|
|
|
- query: {},
|
|
|
- });
|
|
|
- } else if (type === 2) {
|
|
|
- proxy.$router.push({
|
|
|
- name,
|
|
|
- query: {
|
|
|
- type: 1,
|
|
|
- },
|
|
|
- });
|
|
|
- }
|
|
|
+
|
|
|
+ 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();
|
|
|
//
|
|
|
-onMounted(() => {});
|
|
|
+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>
|
|
|
.table-warp .el-table .cell {
|
|
|
@@ -220,7 +433,11 @@ onMounted(() => {});
|
|
|
</style>
|
|
|
<style scoped lang="scss">
|
|
|
.app-container {
|
|
|
- height: 100%;
|
|
|
+ display: flex;
|
|
|
+ width: 100vw;
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 14px !important;
|
|
|
+ // height: 100%;
|
|
|
.announcement {
|
|
|
padding: 0;
|
|
|
margin: 0;
|
|
|
@@ -245,9 +462,36 @@ onMounted(() => {});
|
|
|
}
|
|
|
}
|
|
|
.table-warp {
|
|
|
+ width: 400px;
|
|
|
//页面全屏，占据剩下的位置
|
|
|
- height: calc(100% - 137px);
|
|
|
- border-radius: 5px;
|
|
|
+ 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);
|
|
|
@@ -275,12 +519,16 @@ onMounted(() => {});
|
|
|
}
|
|
|
}
|
|
|
.stat-warp {
|
|
|
- margin-bottom: 10px;
|
|
|
+ width: calc(100% - 400px - 10px);
|
|
|
+ height: calc(100vh - 120px);
|
|
|
+ margin-right: 10px;
|
|
|
+ // margin-bottom: 10px;
|
|
|
background: #fff;
|
|
|
- padding: 20px;
|
|
|
- overflow: hidden;
|
|
|
- position: relative;
|
|
|
- border-radius: 5px;
|
|
|
+ padding: 10px;
|
|
|
+ // padding: 20px;
|
|
|
+ // overflow: hidden;
|
|
|
+ // position: relative;
|
|
|
+ // border-radius: 5px;
|
|
|
|
|
|
.title {
|
|
|
height: 60px;
|
|
|
@@ -304,17 +552,23 @@ onMounted(() => {});
|
|
|
}
|
|
|
ul {
|
|
|
padding: 0;
|
|
|
- overflow: hidden;
|
|
|
+ // 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: 285px;
|
|
|
+ min-width: 150px;
|
|
|
box-sizing: border-box;
|
|
|
margin-right: 20px;
|
|
|
background: linear-gradient(360deg, #c7e3fe 0%, #dfecff 100%);
|
|
|
- float: left;
|
|
|
- overflow: hidden;
|
|
|
- padding: 20px;
|
|
|
+ // float: left;
|
|
|
+ // overflow: hidden;
|
|
|
+ padding: 10px;
|
|
|
color: #333333;
|
|
|
position: relative;
|
|
|
border-radius: 10px;
|
|
|
@@ -421,6 +675,24 @@ onMounted(() => {});
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .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;
|
|
|
}
|
|
|
</style>
|
|
|
|
cz
