|
|
@@ -1,155 +1,154 @@
|
|
|
<template>
|
|
|
- <div class="lineEchartsClass" style="padding-left: 1vw;padding-top: 1.5vh;">
|
|
|
+ <div class="lineEchartsClass" style="padding-left: 1vw; padding-top: 1.5vh">
|
|
|
<div class="title">驿站库存量</div>
|
|
|
- <div ref="linechart" style="width:100%;height: 90%;"></div>
|
|
|
+ <div ref="linechart" style="width: 100%; height: 90%"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup name="Index" lang="ts">
|
|
|
- import * as echarts from 'echarts';
|
|
|
- import moment from 'moment';
|
|
|
+import * as echarts from "echarts";
|
|
|
+import moment from "moment";
|
|
|
|
|
|
- const linechart = ref();
|
|
|
- import { bagCount } from "@/api/data"
|
|
|
+const linechart = ref();
|
|
|
+import { bagCount } from "@/api/data";
|
|
|
|
|
|
- const drawEchart = (arryData, total) => {
|
|
|
- let echartsObj = echarts.init(linechart.value, "macarons");
|
|
|
- var dateArray = getRecentDays();
|
|
|
- var option = option = {
|
|
|
- title: [
|
|
|
+const drawEchart = (arryData, total) => {
|
|
|
+ let echartsObj = echarts.init(linechart.value, "macarons");
|
|
|
+ var dateArray = getRecentDays();
|
|
|
+ var option = (option = {
|
|
|
+ title: [
|
|
|
{
|
|
|
- text: '总数',
|
|
|
- subtext: total+"",
|
|
|
+ text: "总数",
|
|
|
+ subtext: total + "",
|
|
|
textStyle: {
|
|
|
fontSize: 15,
|
|
|
- color: "black"
|
|
|
+ color: "black",
|
|
|
},
|
|
|
subtextStyle: {
|
|
|
fontSize: 20,
|
|
|
- color: 'black'
|
|
|
+ color: "black",
|
|
|
},
|
|
|
textAlign: "center",
|
|
|
- x: '48%',
|
|
|
- y: '35%',
|
|
|
- }
|
|
|
- ],
|
|
|
- series: [
|
|
|
- {
|
|
|
- name: 'Access From',
|
|
|
- type: 'pie',
|
|
|
- radius: ['40%', '70%'],
|
|
|
- labelLine: {
|
|
|
- // length2: 55,
|
|
|
- length: 15,
|
|
|
- length2: 85,
|
|
|
- lineStyle: {
|
|
|
- // type: "dashed",
|
|
|
- width: 2,
|
|
|
- },
|
|
|
+ x: "48%",
|
|
|
+ y: "35%",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "Access From",
|
|
|
+ type: "pie",
|
|
|
+ radius: ["40%", "70%"],
|
|
|
+ labelLine: {
|
|
|
+ // length2: 55,
|
|
|
+ length: 15,
|
|
|
+ length2: 85,
|
|
|
+ lineStyle: {
|
|
|
+ // type: "dashed",
|
|
|
+ width: 2,
|
|
|
},
|
|
|
- label: {
|
|
|
- position: 'outer',
|
|
|
- alignTo: 'none',
|
|
|
- bleedMargin: 15,
|
|
|
- formatter: ' {b}\n{a|{c}}',
|
|
|
- padding: -85,
|
|
|
- rich: {
|
|
|
- a: {
|
|
|
- padding: [18, 0, 5, 0],
|
|
|
- fontSize: 14,
|
|
|
- color: '#000',
|
|
|
- lineHeight: 20,
|
|
|
- },
|
|
|
- b: {
|
|
|
- padding: [18, 0, 5, 0],
|
|
|
- lineHeight: 20,
|
|
|
- },
|
|
|
+ },
|
|
|
+ label: {
|
|
|
+ position: "outer",
|
|
|
+ alignTo: "none",
|
|
|
+ bleedMargin: 15,
|
|
|
+ formatter: " {b}\n{a|{c}}",
|
|
|
+ padding: -85,
|
|
|
+ rich: {
|
|
|
+ a: {
|
|
|
+ padding: [18, 0, 5, 0],
|
|
|
+ fontSize: 14,
|
|
|
+ color: "#000",
|
|
|
+ lineHeight: 20,
|
|
|
+ },
|
|
|
+ b: {
|
|
|
+ padding: [18, 0, 5, 0],
|
|
|
+ lineHeight: 20,
|
|
|
},
|
|
|
},
|
|
|
- data: arryData,
|
|
|
- emphasis: {
|
|
|
- itemStyle: {
|
|
|
- shadowBlur: 10,
|
|
|
- shadowOffsetX: 0,
|
|
|
- shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
|
- }
|
|
|
- }
|
|
|
},
|
|
|
- ]
|
|
|
- };
|
|
|
- echartsObj.setOption(option);
|
|
|
- }
|
|
|
+ data: arryData,
|
|
|
+ emphasis: {
|
|
|
+ itemStyle: {
|
|
|
+ shadowBlur: 10,
|
|
|
+ shadowOffsetX: 0,
|
|
|
+ shadowColor: "rgba(0, 0, 0, 0.5)",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ echartsObj.setOption(option);
|
|
|
+};
|
|
|
|
|
|
- const getRecentDays = () => {
|
|
|
- const oneDay = 24 * 60 * 60 * 1000; // 这里定义一天的毫秒数
|
|
|
- const resultArray = [];
|
|
|
- for (let i = 6; i >= 0; i--) {
|
|
|
- const currentDate = new Date(Date.now() - i * oneDay); // 计算出每天的日期
|
|
|
- const year = currentDate.getFullYear();
|
|
|
- const month = String(currentDate.getMonth() + 1).padStart(2, "0"); // 月份需要补零
|
|
|
- const day = String(currentDate.getDate()).padStart(2, "0"); // 日期也需要补零
|
|
|
- const formattedDate = `${month}-${day}`; // 格式化日期为 yyyy-mm-dd 的形式
|
|
|
- resultArray.push(formattedDate);
|
|
|
- }
|
|
|
- return resultArray;
|
|
|
+const getRecentDays = () => {
|
|
|
+ const oneDay = 24 * 60 * 60 * 1000; // 这里定义一天的毫秒数
|
|
|
+ const resultArray = [];
|
|
|
+ for (let i = 6; i >= 0; i--) {
|
|
|
+ const currentDate = new Date(Date.now() - i * oneDay); // 计算出每天的日期
|
|
|
+ const year = currentDate.getFullYear();
|
|
|
+ const month = String(currentDate.getMonth() + 1).padStart(2, "0"); // 月份需要补零
|
|
|
+ const day = String(currentDate.getDate()).padStart(2, "0"); // 日期也需要补零
|
|
|
+ const formattedDate = `${month}-${day}`; // 格式化日期为 yyyy-mm-dd 的形式
|
|
|
+ resultArray.push(formattedDate);
|
|
|
}
|
|
|
+ return resultArray;
|
|
|
+};
|
|
|
|
|
|
-
|
|
|
- const getbagCountData = () => {
|
|
|
- var param = {
|
|
|
- beginCreatedAt: moment().format("YYYY-MM-DD 00:00:00")
|
|
|
- }
|
|
|
- var obj = {
|
|
|
- params: param,
|
|
|
- pageSize: 1000
|
|
|
- }
|
|
|
- bagCount(obj).then(res => {
|
|
|
- console.log(res)
|
|
|
- var rkCount = 0;
|
|
|
- var ckCount = 0;
|
|
|
- var ycCount = 0;
|
|
|
- var clCount = 0;
|
|
|
- var total = res.total;
|
|
|
- for (var index in res.rows) {
|
|
|
- if (res.rows[index].bagStatus == 0) {
|
|
|
- rkCount++;
|
|
|
- } else if (res.rows[index].bagStatus == 1) {
|
|
|
- ckCount++;
|
|
|
- } else if (res.rows[index].bagStatus == 2) {
|
|
|
- ycCount++;
|
|
|
- } else if (res.rows[index].bagStatus == 3) {
|
|
|
- clCount++;
|
|
|
- }
|
|
|
+const getbagCountData = () => {
|
|
|
+ var param = {
|
|
|
+ // beginCreatedAt: moment().format("YYYY-MM-DD 00:00:00")
|
|
|
+ };
|
|
|
+ var obj = {
|
|
|
+ params: param,
|
|
|
+ pageSize: 1000,
|
|
|
+ };
|
|
|
+ bagCount(obj).then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ var rkCount = 0;
|
|
|
+ var ckCount = 0;
|
|
|
+ var ycCount = 0;
|
|
|
+ var clCount = 0;
|
|
|
+ var total = res.total;
|
|
|
+ for (var index in res.rows) {
|
|
|
+ if (res.rows[index].bagStatus == 0) {
|
|
|
+ rkCount++;
|
|
|
+ } else if (res.rows[index].bagStatus == 1) {
|
|
|
+ ckCount++;
|
|
|
+ } else if (res.rows[index].bagStatus == 2) {
|
|
|
+ ycCount++;
|
|
|
+ } else if (res.rows[index].bagStatus == 3) {
|
|
|
+ clCount++;
|
|
|
}
|
|
|
- var arryData = [
|
|
|
- { value: rkCount, name: '入库' },
|
|
|
- { value: ckCount, name: '出库' },
|
|
|
- { value: ycCount, name: '异常' },
|
|
|
- { value: clCount, name: '已处理' }
|
|
|
- ]
|
|
|
- drawEchart(arryData, total)
|
|
|
- })
|
|
|
- }
|
|
|
+ }
|
|
|
+ var arryData = [
|
|
|
+ { value: rkCount, name: "入库" },
|
|
|
+ { value: ckCount, name: "出库" },
|
|
|
+ { value: ycCount, name: "异常" },
|
|
|
+ { value: clCount, name: "已处理" },
|
|
|
+ ];
|
|
|
+ drawEchart(arryData, total);
|
|
|
+ });
|
|
|
+};
|
|
|
|
|
|
- onMounted(() => {
|
|
|
- getbagCountData();
|
|
|
- })
|
|
|
+onMounted(() => {
|
|
|
+ getbagCountData();
|
|
|
+});
|
|
|
</script>
|
|
|
<style>
|
|
|
- .lineEchartsClass {
|
|
|
- height: 28vh;
|
|
|
- background: rgba(255, 255, 255, 0.85);
|
|
|
- border-radius: 8px 8px 8px 8px;
|
|
|
- box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.3);
|
|
|
+.lineEchartsClass {
|
|
|
+ height: 28vh;
|
|
|
+ background: rgba(255, 255, 255, 0.85);
|
|
|
+ border-radius: 8px 8px 8px 8px;
|
|
|
+ box-shadow: 6px 6px 6px 6px rgba(0, 0, 0, 0.3);
|
|
|
|
|
|
- .title {
|
|
|
- font-family: Source Han Sans CN, Source Han Sans CN;
|
|
|
- font-weight: bold;
|
|
|
- font-size: 20px;
|
|
|
- color: #000000;
|
|
|
- line-height: 24px;
|
|
|
- text-align: left;
|
|
|
- font-style: normal;
|
|
|
- text-transform: none;
|
|
|
- }
|
|
|
+ .title {
|
|
|
+ font-family: Source Han Sans CN, Source Han Sans CN;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
}
|
|
|
-</style>
|
|
|
+}
|
|
|
+</style>
|