|
@@ -0,0 +1,433 @@
|
|
|
+<template>
|
|
|
+ <div class="pageIndexClass" style="background:#091731;color:#fff;font-size:14px;height:calc(100vh - 100px)">
|
|
|
+ <div class="top">
|
|
|
+ <div ref="chartDom" style="height:280px">
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="margin-top:10px;background:#1e3159;padding:10px">
|
|
|
+ <div>
|
|
|
+ <div class="public-title">
|
|
|
+ 总条数 {{sourceList.pagination.total}},当前第 {{sourceList.pagination.pageNum}} 页
|
|
|
+ </div>
|
|
|
+ <div style="overflow:auto;height:calc(100vh - 300px - 195px)">
|
|
|
+ <table class="table" style="width:100%;margin-top:15px">
|
|
|
+ <thead>
|
|
|
+ <tr style="background:#243B6D">
|
|
|
+ <th style="width:60px">NO.</th>
|
|
|
+ <th>业务员</th>
|
|
|
+ <th style="width:100px">下单日期</th>
|
|
|
+ <th style="width:100px">交期</th>
|
|
|
+ <th>订单号</th>
|
|
|
+ <th>产品编码</th>
|
|
|
+ <th>产品名称</th>
|
|
|
+ <th style="width:110px">规格尺寸(cm)</th>
|
|
|
+ <th>颜色</th>
|
|
|
+ <th style="width:80px">数量</th>
|
|
|
+ <th style="width:100px">完工数量</th>
|
|
|
+ <th style="width:100px">出货数量</th>
|
|
|
+ <th style="width:100px">未出货数量</th>
|
|
|
+ <th style="width:100px">超期天数</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(row,index) in sourceList.data" :key="row.id">
|
|
|
+ <td>{{index+1}}</td>
|
|
|
+ <td>{{row.salesmanName}}</td>
|
|
|
+ <td><span v-if="row.saleDate">{{row.saleDate.slice(0,10)}}</span></td>
|
|
|
+ <td><span v-if="row.deliveryTime">{{row.deliveryTime.slice(0,10)}}</span></td>
|
|
|
+ <td>{{row.code}}</td>
|
|
|
+ <td>{{row.productCode}}</td>
|
|
|
+ <td>{{row.productName}}</td>
|
|
|
+ <td>{{row.productLength}}*{{row.productWidth}}*{{row.productHeight}}</td>
|
|
|
+ <td>{{row.productColor}}</td>
|
|
|
+ <td>{{row.quantity}}</td>
|
|
|
+ <td>{{row.finishQuantity}}</td>
|
|
|
+ <td>{{row.receiptQuantity}}</td>
|
|
|
+ <td>{{row.notQuantity}}</td>
|
|
|
+ <td>{{row.overdueDay}}</td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <el-row style="padding: 20px" justify="end" type="flex">
|
|
|
+ <el-pagination background layout="total, sizes, prev, pager, next, jumper" :current-page="sourceList.pagination.pageNum"
|
|
|
+ :page-size="sourceList.pagination.pageSize" :total="sourceList.pagination.total" @size-change="handleSizeChange"
|
|
|
+ @current-change="handlePageChange" />
|
|
|
+ </el-row> -->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import byTable from "@/components/byTable/index";
|
|
|
+import byForm from "@/components/byForm/index";
|
|
|
+import * as echarts from "echarts";
|
|
|
+import { reactive } from "vue";
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const loading = ref(false);
|
|
|
+const submitLoading = ref(false);
|
|
|
+const sourceList = ref({
|
|
|
+ data: [],
|
|
|
+ pagination: {
|
|
|
+ total: 3,
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ keyword: "",
|
|
|
+ },
|
|
|
+});
|
|
|
+const treeData = ref([]);
|
|
|
+const dialogVisible = ref(false);
|
|
|
+const modalType = ref("add");
|
|
|
+const selectConfig = computed(() => []);
|
|
|
+const config = computed(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "任务编号",
|
|
|
+ prop: "orderCode",
|
|
|
+ // width: 150,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "报工数量",
|
|
|
+ prop: "quantity",
|
|
|
+ // width: 160,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "报工人",
|
|
|
+ prop: "userName",
|
|
|
+ // width: 160,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "报工时间",
|
|
|
+ prop: "createTime",
|
|
|
+ // width: 160,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ attrs: {
|
|
|
+ label: "工序名称",
|
|
|
+ prop: "processesName",
|
|
|
+ // width: 120,
|
|
|
+ },
|
|
|
+ // render(val) {
|
|
|
+ // return proxy.dictValueLabel(val, statusData.value);
|
|
|
+ // },
|
|
|
+ },
|
|
|
+
|
|
|
+ // {
|
|
|
+ // attrs: {
|
|
|
+ // label: "操作",
|
|
|
+ // width: "100",
|
|
|
+ // align: "center",
|
|
|
+ // fixed: "right",
|
|
|
+ // },
|
|
|
+ // renderHTML(row) {
|
|
|
+ // return [
|
|
|
+ // {
|
|
|
+ // attrs: {
|
|
|
+ // label: "完成订单",
|
|
|
+ // type: "primary",
|
|
|
+ // text: true,
|
|
|
+ // },
|
|
|
+ // el: "button",
|
|
|
+ // click() {
|
|
|
+ // getDtl(row);
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ // ];
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ ];
|
|
|
+});
|
|
|
+const formData = reactive({
|
|
|
+ data: {},
|
|
|
+});
|
|
|
+const formOption = reactive({
|
|
|
+ inline: true,
|
|
|
+ labelWidth: 100,
|
|
|
+ itemWidth: 100,
|
|
|
+});
|
|
|
+const formDom = ref(null);
|
|
|
+const formConfig = computed(() => {
|
|
|
+ return [
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ prop: "code",
|
|
|
+ label: "店铺编号",
|
|
|
+ itemWidth: 100,
|
|
|
+ disabled: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "input",
|
|
|
+ prop: "name",
|
|
|
+ label: "店铺名称",
|
|
|
+ itemWidth: 100,
|
|
|
+ disabled: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ type: "treeSelect",
|
|
|
+ prop: "deptId",
|
|
|
+ label: "负责部门",
|
|
|
+ data: treeData.value,
|
|
|
+ propsTreeLabel: "deptName",
|
|
|
+ propsTreeValue: "deptId",
|
|
|
+ itemWidth: 100,
|
|
|
+ disabled: false,
|
|
|
+ },
|
|
|
+ ];
|
|
|
+});
|
|
|
+const rules = ref({
|
|
|
+ deptId: [{ required: true, message: "请选择负责部门", trigger: "change" }],
|
|
|
+ name: [{ required: true, message: "请输入店铺名称", trigger: "blur" }],
|
|
|
+ code: [{ required: true, message: "请输入店铺编号", trigger: "blur" }],
|
|
|
+});
|
|
|
+let timer = null;
|
|
|
+const setTimer = () => {
|
|
|
+ if (sourceList.value.pagination.total > 10) {
|
|
|
+ timer = setInterval(() => {
|
|
|
+ if (
|
|
|
+ sourceList.value.pagination.pageNum *
|
|
|
+ sourceList.value.pagination.pageSize >=
|
|
|
+ sourceList.value.pagination.total
|
|
|
+ ) {
|
|
|
+ sourceList.value.pagination.pageNum = 1;
|
|
|
+ } else {
|
|
|
+ sourceList.value.pagination.pageNum += 1;
|
|
|
+ }
|
|
|
+ getList();
|
|
|
+ }, 1000 * 10);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ clearInterval(timer);
|
|
|
+});
|
|
|
+
|
|
|
+let first = true;
|
|
|
+const getList = async (req) => {
|
|
|
+ sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
|
|
|
+ loading.value = true;
|
|
|
+ proxy
|
|
|
+ .post("/report/waitShipmentReport", sourceList.value.pagination)
|
|
|
+ .then((res) => {
|
|
|
+ sourceList.value.data = res.rows;
|
|
|
+ sourceList.value.pagination.total = res.total;
|
|
|
+ setTimeout(() => {
|
|
|
+ loading.value = false;
|
|
|
+ }, 200);
|
|
|
+ if (first) {
|
|
|
+ setTimer();
|
|
|
+ first = false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const openModal = () => {
|
|
|
+ dialogVisible.value = true;
|
|
|
+ modalType.value = "add";
|
|
|
+ formData.data = {
|
|
|
+ definition: "2",
|
|
|
+ fileList: [],
|
|
|
+ };
|
|
|
+ if (currencyData.value && currencyData.value.length > 0) {
|
|
|
+ formData.data.currency = currencyData.value[0].dictKey;
|
|
|
+ formData.data.costCurrency = currencyData.value[0].dictKey;
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const submitForm = () => {
|
|
|
+ formDom.value.handleSubmit((valid) => {
|
|
|
+ submitLoading.value = true;
|
|
|
+ proxy.post("/shopInfo/" + modalType.value, formData.data).then(
|
|
|
+ (res) => {
|
|
|
+ proxy.msgTip("操作成功", 1);
|
|
|
+ dialogVisible.value = false;
|
|
|
+ submitLoading.value = false;
|
|
|
+ getList();
|
|
|
+ },
|
|
|
+ (err) => {
|
|
|
+ submitLoading.value = false;
|
|
|
+ }
|
|
|
+ );
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+const getDtl = (row) => {
|
|
|
+ modalType.value = "edit";
|
|
|
+ proxy.post("/shopInfo/detail", { id: row.id }).then((res) => {
|
|
|
+ formData.data = res;
|
|
|
+ dialogVisible.value = true;
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+getList();
|
|
|
+
|
|
|
+const handleSizeChange = (val) => {
|
|
|
+ sourceList.value.pagination.pageNum = 1;
|
|
|
+ sourceList.value.pagination.pageSize = val;
|
|
|
+ getList();
|
|
|
+};
|
|
|
+const handlePageChange = (val) => {
|
|
|
+ sourceList.value.pagination.pageNum = val;
|
|
|
+ getList();
|
|
|
+};
|
|
|
+
|
|
|
+const topData = ref([]);
|
|
|
+let myChart = null;
|
|
|
+const chartDom = ref(null);
|
|
|
+const chartOption = reactive({
|
|
|
+ data: {
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ axisPointer: {
|
|
|
+ type: "shadow",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ legend: {
|
|
|
+ textStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ right: "3%",
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "3%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: [
|
|
|
+ {
|
|
|
+ type: "category",
|
|
|
+ data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
|
|
+ axisLabel: {
|
|
|
+ color: "#fff", // x轴字体颜色
|
|
|
+ interval: 0, //轴显示所有的数据
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ // 轴线样式
|
|
|
+ // axisLine: {
|
|
|
+ // lineStyle: {
|
|
|
+ // color: "#fff",
|
|
|
+ // type: "dotted",
|
|
|
+ // },
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ type: "value",
|
|
|
+ axisLabel: {
|
|
|
+ color: "#fff", // x轴字体颜色
|
|
|
+ interval: 0, //轴显示所有的数据
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ width: 1,
|
|
|
+ type: "dashed",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "产品总数量",
|
|
|
+ type: "bar",
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ data: [320, 332, 301, 334, 390, 330, 320],
|
|
|
+ barWidth: "auto",
|
|
|
+ barMaxWidth: 40,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "未发货总数量",
|
|
|
+ type: "bar",
|
|
|
+ stack: "Ad",
|
|
|
+ emphasis: {
|
|
|
+ focus: "series",
|
|
|
+ },
|
|
|
+ data: [120, 132, 101, 134, 90, 230, 210],
|
|
|
+ barWidth: "auto",
|
|
|
+ barMaxWidth: 40,
|
|
|
+ itemStyle: {
|
|
|
+ // 修改柱状颜色
|
|
|
+ color: "#8FD5F3",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+});
|
|
|
+
|
|
|
+const getTopData = () => {
|
|
|
+ proxy.post("/report/waitShipmentReportStatistic").then((res) => {
|
|
|
+ console.log(res, "saas");
|
|
|
+ // topData.value = res
|
|
|
+
|
|
|
+ myChart = echarts.init(chartDom.value);
|
|
|
+ window.addEventListener("resize", () => {
|
|
|
+ myChart.resize();
|
|
|
+ });
|
|
|
+ chartOption.data.xAxis[0].data = res.map((x) => x.salesmanName);
|
|
|
+ chartOption.data.series[0].data = res.map((x) => x.sumQuantity);
|
|
|
+ chartOption.data.series[1].data = res.map((x) => x.sumNotQuantity);
|
|
|
+
|
|
|
+ myChart.setOption(chartOption.data);
|
|
|
+ });
|
|
|
+};
|
|
|
+getTopData();
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+::v-deep(.el-progress__text) {
|
|
|
+ font-size: 14px !important;
|
|
|
+}
|
|
|
+.content {
|
|
|
+ padding: 20px;
|
|
|
+}
|
|
|
+.top {
|
|
|
+ background: #1e3159;
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.table {
|
|
|
+ color: #fff;
|
|
|
+ border-collapse: collapse;
|
|
|
+ border-spacing: 0;
|
|
|
+ th,
|
|
|
+ td {
|
|
|
+ text-align: left;
|
|
|
+ padding: 5px 10px;
|
|
|
+ // padding: 5px 10px;
|
|
|
+ }
|
|
|
+ th {
|
|
|
+ color: #5d94c6;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.public-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ padding: 10px;
|
|
|
+ text-align: center;
|
|
|
+ color: #fff;
|
|
|
+ background: #1f427a;
|
|
|
+ // background: linear-gradient(240deg, #1c2a47 0%, #1f427a 20%);
|
|
|
+}
|
|
|
+:deep(.el-progress__text) {
|
|
|
+ color: #5d94c6;
|
|
|
+}
|
|
|
+</style>
|