2 Commits b07bb6d7e0 ... 6adc283b32

Author SHA1 Message Date
  userName 6adc283b32 Merge branch 'master' of http://gogs.gisvg.com/YDM/museums-ui 1 month ago
  wwj 9501db0f10 Merge remote-tracking branch 'origin/master' 1 month ago
3 changed files with 350 additions and 323 deletions
  1. 1 1
      .env
  2. 11 8
      src/views/Home/Index.vue
  3. 338 314
      src/views/Home/echarts-data.ts

+ 1 - 1
.env

@@ -8,7 +8,7 @@ VITE_PORT=80
 VITE_OPEN=true
 
 # 租户开关
-VITE_APP_TENANT_ENABLE=true
+VITE_APP_TENANT_ENABLE=false
 
 # 验证码的开关
 VITE_APP_CAPTCHA_ENABLE=true

+ 11 - 8
src/views/Home/Index.vue

@@ -208,11 +208,13 @@ onMounted(async () => {
   rockOreCount.value = samples['岩石矿石'];
   
   const month = `${new Date().getMonth() + 1}月`
-  console.log('month', month);
+  const monthNum = new Date().getMonth()
+  console.log('monthNum', monthNum);
   const enterSpecimen = ref();
   const outSpecimen = ref();
   const returnSpecimen = ref();
   const year = new Date().getFullYear()
+
   //本月出、入、回库数
   enterSpecimen.value = await WorkbenchApi.getEnterSpecimenList(year);
   outSpecimen.value = await WorkbenchApi.getOutSpecimenList(year);
@@ -220,14 +222,15 @@ onMounted(async () => {
   const enter = enterSpecimen.value.data
   const out = outSpecimen.value.data
   const return1 = returnSpecimen.value.data
-  enterNumber.value = enter[enter.length - 1].number;
-  outNumber.value = out[out.length - 1].number;
-  returnNumber.value = return1[return1.length - 1].number;
-  enterNumber1.value = enter[enter.length - 2].number;
-  outNumber1.value = out[out.length - 2].number;
+  enterNumber.value = enter[monthNum].number;
+  outNumber.value = out[monthNum].number;
+  returnNumber.value = return1[monthNum].number;
+  enterNumber1.value = enter[monthNum-1].number;
+  outNumber1.value = out[monthNum-1].number;
   // TODO 这里
-  console.log(return1)
-  returnNumber1.value = return1[return1.length - 2].number;
+  console.log('return1',return1)
+
+  returnNumber1.value = return1[monthNum-1].number;
   enterRatio.value = (enterNumber.value - enterNumber1.value) / enterNumber.value * 100;
   outRatio.value = (outNumber.value - outNumber1.value) / outNumber.value * 100;
   returnRatio.value = (returnNumber.value - returnNumber1.value) / returnNumber.value * 100;

+ 338 - 314
src/views/Home/echarts-data.ts

@@ -1,6 +1,7 @@
 import { EChartsOption } from 'echarts'
 //获取标本类型数
 import * as WorkbenchApi from '@/api/workbench'
+import { number } from 'vue-types';
 const { samples } = await WorkbenchApi.getSpecimenTypeList();
 
 const { t } = useI18n()
@@ -38,37 +39,34 @@ const enterRatio1 = ref(0);
 const outRatio1 = ref(0);
 const returnRatio1 = ref(0);
 let enterSum = 0;
-const year = new Date().getFullYear()
+const currentYear = new Date().getFullYear()
+const monthNum = new Date().getMonth()
+
+
 // 使用 await 获取数据
 workbenchList.value = await WorkbenchApi.getSpecimenYearList();
 sourceList.value = await WorkbenchApi.getSpecimenSourceList();
 //获取出库数
-enterSpecimen.value = await WorkbenchApi.getEnterSpecimenList(year);
-outSpecimen.value = await WorkbenchApi.getOutSpecimenList(year);
-returnSpecimen.value = await WorkbenchApi.getReturnSpecimenList(year);
+enterSpecimen.value = await WorkbenchApi.getEnterSpecimenList(currentYear);
+outSpecimen.value = await WorkbenchApi.getOutSpecimenList(currentYear);
+returnSpecimen.value = await WorkbenchApi.getReturnSpecimenList(currentYear);
 
 //获取各类标本数据
 mineralCount.value = samples['矿物'];
-  fossilCount.value = samples['化石'];
-  meteoriteCount.value = samples['陨石'];
-  rockOreCount.value = samples['岩石矿石'];
+fossilCount.value = samples['化石'];
+meteoriteCount.value = samples['陨石'];
+rockOreCount.value = samples['岩石矿石'];
 
 const years = workbenchList.value.data;
 const sourcs = sourceList.value;
 const enter = enterSpecimen.value.data
 const out = outSpecimen.value.data
 const return1 = returnSpecimen.value.data
+// console.log( sourceList.value,'sourcs');
+
 
-// 进一步处理数据,例如渲染到页面
- const year2 = years.map(years => years.year);
- const inStockCount = years.map(years => years.inStockCount);
- const outStockCount = years.map(years => years.outStockCount);
- const returnCount = years.map(years => years.returnCount);
 //  console.log('sourcs',sourceList.value);
- const year1 = sourcs.map(sourcs => sourcs.year);
- const purchase = sourcs.map(sourcs => sourcs.other);
- const gather = sourcs.map(sourcs => sourcs.gather);
- const donate = sourcs.map(sourcs => sourcs.donate);
+
 //统计本年标本入库数量(按月份)
  const enterMonth = enter.map(enter => enter.month);
  const enterNum = enter.map(enter => enter.number);
@@ -84,14 +82,14 @@ const returnMonth = return1.map(return1 => return1.month);
 const returnNum = return1.map(return1 => return1.number);
 
 //本/上月出、入、回库数
-enterNumber.value = enter[enter.length - 1].number;
-outNumber.value = out[out.length - 1].number;
-returnNumber.value = return1[return1.length - 1].number;
-enterNumber1.value = enter[enter.length - 2].number;
-outNumber1.value = out[out.length - 2].number;
+enterNumber.value = enter[monthNum].number;
+outNumber.value = out[monthNum].number;
+returnNumber.value = return1[monthNum].number;
+enterNumber1.value = enter[monthNum-1].number;
+outNumber1.value = out[monthNum-1].number;
 console.log(out)
 // TODO 这里
-// returnNumber1.value = return1[return1.length - 2].number;
+returnNumber1.value = return1[monthNum-1].number;
 
 //月环比
 enterRatio.value = (enterNumber.value-enterNumber1.value)/enterNumber.value*100;
@@ -101,6 +99,27 @@ enterRatio1.value = 100-enterRatio.value;
 outRatio1.value = 100-outRatio.value;
 returnRatio1.value = 100-returnRatio.value;
 
+// 筛选出最近六年的数据
+const sourcsData = sourcs.filter(item => {
+  return parseInt(item.year) >= currentYear - 5;
+});
+
+// 筛选出最近六年的数据
+const yearsData = years.filter(item => {
+  return parseInt(item.year) >= currentYear - 5;
+});
+// 打印筛选后的数据
+// console.log(filteredData,'filteredData');
+const year1 = sourcsData.map(sourcsData => sourcsData.year);
+const purchase = sourcsData.map(sourcsData => sourcsData.purchase);
+const gather = sourcsData.map(filteredData => sourcsData.gather);
+const donate = sourcsData.map(sourcsData => sourcsData.donate);
+
+// 进一步处理数据,例如渲染到页面
+const year2 = yearsData.map(yearsData => yearsData.year);
+const inStockCount = yearsData.map(yearsData => yearsData.inStockCount);
+const outStockCount = yearsData.map(yearsData => yearsData.outStockCount);
+const returnCount = yearsData.map(yearsData => yearsData.returnCount);
 export const lineOptions: EChartsOption = {
   title: {
     text: t('analysis.monthlySales'),
@@ -240,252 +259,190 @@ export const pieOptions: EChartsOption = {
 
 
 
-//历年标本来源增减统计
 export const originOptions: EChartsOption = {
-  backgroundColor: 'transparent', // 设置背景色为透明
-  legend: {
-    icon: "circle",
-    // top: "5%",
-    right: "5%",
-    textStyle: {
-      color: "#556677",
-    },
-  },
-  tooltip: {
-    trigger: "axis",
-    axisPointer: {
-      label: {
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
         show: true,
-        backgroundColor: "#fff",
+        status: 'shadow',
+        z: -1,
+        shadowStyle: {
+          color: 'rgba(251, 169, 128, 0.1)',
+        },
+        type: 'shadow'
+      }
+    },
+    legend: {
+      icon: "circle",
+      top: "0%",
+      right: "5%",
+      textStyle: {
         color: "#556677",
-        borderColor: "rgba(0,0,0,0)",
-        shadowColor: "rgba(0,0,0,0)",
-        shadowOffsetY: 0,
-      },
-      lineStyle: {
-        width: 0,
       },
     },
-    backgroundColor: "#fff",
-    textStyle: {
-      color: "#5c6c7c",
+    grid: {
+      left: '3%',
+      right: '3%',
+      top: '12%',
+      bottom: '0%', // 减少底部边距,让 X 轴更靠近底部
+      containLabel: true
     },
-    padding: [10, 10],
-    extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
-  },
-  grid: {
-    left: '3%',
-    right: '3%',
-    top: '12%',
-    bottom: '0%', // 减少底部边距,让 X 轴更靠近底部
-    containLabel: true
-  },
-  xAxis: [
-    {
-      type: "category",
-      data: year1,
-      axisLine: {
-        lineStyle: {
-          color: "#DCE2E8",
+    xAxis: [
+      {
+        position: 'bottom',
+        type: 'category',
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#ECF1F6'
+          }
         },
-      },
-      axisTick: {
-        show: false,
-      },
-
-      axisLabel: {
-        interval: 0,
-        textStyle: {
-          color: "#556677",
+        axisTick: {
+          show: false,
         },
-        // 默认x轴字体大小
-        fontSize: 12,
-        // margin:文字到x轴的距离
-        margin: 15,
-      },
-      axisPointer: {
-        label: {
-          padding: [0, 0, 10, 0],
-          margin: 15,
-          // 移入时的字体大小
+        axisLabel: {
+          show: true,
+          rotate: 0,
           fontSize: 12,
-          backgroundColor: {
-            type: "linear",
-            x: 0,
-            y: 0,
-            x2: 0,
-            y2: 1,
-            colorStops: [
-              {
-                offset: 0,
-                color: "#fff", // 0% 处的颜色
-              },
-              {
-                // offset: 0.9,
-                offset: 0.86,
-                /*
-0.86 = (文字 + 文字距下边线的距离)/(文字 + 文字距下边线的距离 + 下边线的宽度)
-                        
-                        */
-                color: "#fff", // 0% 处的颜色
-              },
-              {
-                offset: 0.86,
-                color: "#dcb86b", // 0% 处的颜色
-              },
-              {
-                offset: 1,
-                color: "#dcb86b", // 100% 处的颜色
-              },
-            ],
-            global: false, // 缺省为 false
+          color: 'rgba(0, 0, 0, 1)'
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            color: 'rgba(193, 207, 220, 1)',
+            width: 0,
+            type: 'dashed'
+          }
+        },
+        gridIndex: 0,
+        data: year1,
+      }
+    ],
+    yAxis: [
+      {
+        type: "value",
+        axisTick: {
+          show: false,
+        },
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: "#DCE2E8",
           },
         },
-      },
-      boundaryGap: false,
-    },
-  ],
-  yAxis: [
-    {
-      type: "value",
-      axisTick: {
-        show: false,
-      },
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: "#DCE2E8",
+        axisLabel: {
+          textStyle: {
+            color: "#556677",
+          },
         },
-      },
-      axisLabel: {
-        textStyle: {
-          color: "#556677",
+        splitLine: {
+          show: false,
         },
       },
-      splitLine: {
-        show: false,
-      },
-    },
-    {
-      type: "value",
-      position: "left",
-      axisTick: {
-        show: false,
-      },
-      axisLabel: {
-        textStyle: {
-          color: "#556677",
+      {
+        type: "value",
+        position: "right",
+        axisTick: {
+          show: false,
         },
-        formatter: "{value}",
-      },
-      axisLine: {
-        show: true,
-        lineStyle: {
-          color: "#DCE2E8",
+        axisLabel: {
+          textStyle: {
+            color: "#556677",
+          },
+          formatter: "{value}",
         },
-      },
-      splitLine: {
-        show: false,
-      },
-    },
-  ],
-  series: [
-
-    {
-      name: "采购",
-      type: "line",
-      data: purchase,
-      symbolSize: 1,
-      yAxisIndex: 1,
-      symbol: "circle",
-      label: {
-        normal: {
+        axisLine: {
           show: true,
-          position: "top",
-          textStyle: {
-            color: "rgba(219, 141, 73, 1)",
-            fontSize: 14,
-            fontFamily: 'DIN',
-            fontWeight: 'bold'
-          }
-        }
-      },
-      showSymbol: false,
-      lineStyle: {
-        width: 4,
-
-      },
-      itemStyle: {
-        normal: {
-          color:  "#fed776",
-          // borderColor: colorList[2],
+          lineStyle: {
+            color: "#DCE2E8",
+          },
+        },
+        splitLine: {
+          show: false,
         },
       },
-    },
-    {
-      name: "捐赠",
-      type: "line",
-      data: donate,
-      symbolSize: 1,
-      yAxisIndex: 1,
-      symbol: "circle",
-      label: {
-        normal: {
-          show: true,
-          position: "top",
-          textStyle: {
-            color: "rgba(219, 141, 73, 1)",
-            fontSize: 14,
-            fontFamily: 'DIN',
-            fontWeight: 'bold'
+    ],
+    series: [
+      {
+        name: '采购',
+        type: 'bar',
+        // stack: 'total',
+        data: purchase,
+        itemStyle: {
+          normal: {
+            // barBorderRadius: [30, 30, 0, 0],
+            // color: "rgba(249,209,110,.8)",rgba(92,123,217,1.00)
+            color: "#fecb70",
           }
-        }
-      },
-      // smooth: true,
-      showSymbol: false,
-      lineStyle: {
-        width: 4,
-      },
-      itemStyle: {
-        normal: {
-          color: '#95d6e6',
-          // borderColor: colorList[1],
         },
-      },
-    },
-    {
-      name: "采集",
-      type: "line",
-      data: gather,
-      symbolSize: 1,
-      yAxisIndex: 1,
-      label: {
-        normal: {
-          show: true,
-          position: "top",
-          textStyle: {
-            color: "rgba(219, 141, 73, 1)",
-            fontSize: 14,
-            fontFamily: 'DIN',
-            fontWeight: 'bold'
+        label: {
+          normal: {
+            show: true,
+            position: "top",
+            textStyle: {
+              color: "rgba(219, 141, 73, 1)",
+              fontSize: 13,
+              fontFamily: 'DIN',
+              fontWeight: 'bold'
+            }
+          }
+        },
+        barMaxWidth: '20%',
+      },
+      {
+        name: '捐赠',
+        type: 'bar',
+        // stack: 'total',
+        data: donate,
+        itemStyle: {
+          normal: {
+            // barBorderRadius: [30, 30, 0, 0],
+            // color: "rgba(251,169,128,.9)"
+            color: "#90cedd"
+          }
+        },
+        label: {
+          normal: {
+            show: true,
+            position: "top",
+            textStyle: {
+              color: "rgba(219, 141, 73, 1)",
+              fontSize: 13,
+              fontFamily: 'DIN',
+              fontWeight: 'bold'
+            }
+          }
+        },
+        barMaxWidth: '20%',
+      },
+      {
+        name: '采集',
+        type: 'bar',
+        // stack: 'total',
+        data: gather,
+        itemStyle: {
+          normal: {
+            // barBorderRadius: [30, 30, 0, 0],
+            // color: "rgba(222,184,135,0.9)"
+            color: "#22668a"
+          }
+        },
+        label: {
+          normal: {
+            show: true,
+            position: "top",
+            textStyle: {
+              color: "rgba(219, 141, 73, 1)",
+              fontSize: 13,
+              fontFamily: 'DIN',
+              fontWeight: 'bold'
+            }
           }
-        }
-      },
-      symbol: "circle",
-      // smooth: true,
-      showSymbol: false,
-      lineStyle: {
-        width: 4,
-      },
-      itemStyle: {
-        normal: {
-          color: '#22668a',
-          // borderColor: colorList[0],
         },
+      barMaxWidth: '20%',
       },
-    },
-  ],
-};
+    ]
+  };
 export const wordOptions = {
   series: [
     {
@@ -610,27 +567,38 @@ export const wordOptions = {
   ]
 }
 //本年标本数量统计
-export const mouthOptions: EChartsOption = {
-  tooltip: {
-    trigger: 'axis',
-    axisPointer: {
-      show: true,
-      status: 'shadow',
-      z: -1,
-      shadowStyle: {
-        color: 'rgba(251, 169, 128, 0.1)',
-      },
-      type: 'shadow'
-    }
-  },
+export const mouthOptions: EChartsOption =  {
+  backgroundColor: 'transparent', // 设置背景色为透明
   legend: {
     icon: "circle",
-    top: "0%",
+    // top: "5%",
     right: "5%",
     textStyle: {
       color: "#556677",
     },
   },
+  tooltip: {
+    trigger: "axis",
+    axisPointer: {
+      label: {
+        show: true,
+        backgroundColor: "#fff",
+        color: "#556677",
+        borderColor: "rgba(0,0,0,0)",
+        shadowColor: "rgba(0,0,0,0)",
+        shadowOffsetY: 0,
+      },
+      lineStyle: {
+        width: 0,
+      },
+    },
+    backgroundColor: "#fff",
+    textStyle: {
+      color: "#5c6c7c",
+    },
+    padding: [10, 10],
+    extraCssText: "box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)",
+  },
   grid: {
     left: '3%',
     right: '3%',
@@ -640,34 +608,68 @@ export const mouthOptions: EChartsOption = {
   },
   xAxis: [
     {
-      position: 'bottom',
-      type: 'category',
+      type: "category",
+      data: enterMonth,
       axisLine: {
-        show: true,
         lineStyle: {
-          color: '#ECF1F6'
-        }
+          color: "#DCE2E8",
+        },
       },
       axisTick: {
         show: false,
       },
+
       axisLabel: {
-        show: true,
-        rotate: 0,
+        interval: 0,
+        textStyle: {
+          color: "#556677",
+        },
+        // 默认x轴字体大小
         fontSize: 12,
-        color: 'rgba(0, 0, 0, 1)'
+        // margin:文字到x轴的距离
+        margin: 15,
       },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          color: 'rgba(193, 207, 220, 1)',
-          width: 0,
-          type: 'dashed'
-        }
+      axisPointer: {
+        label: {
+          padding: [0, 0, 10, 0],
+          margin: 15,
+          // 移入时的字体大小
+          fontSize: 12,
+          backgroundColor: {
+            type: "linear",
+            x: 0,
+            y: 0,
+            x2: 0,
+            y2: 1,
+            colorStops: [
+              {
+                offset: 0,
+                color: "#fff", // 0% 处的颜色
+              },
+              {
+                // offset: 0.9,
+                offset: 0.86,
+                /*
+0.86 = (文字 + 文字距下边线的距离)/(文字 + 文字距下边线的距离 + 下边线的宽度)
+                        
+                        */
+                color: "#fff", // 0% 处的颜色
+              },
+              {
+                offset: 0.86,
+                color: "#dcb86b", // 0% 处的颜色
+              },
+              {
+                offset: 1,
+                color: "#dcb86b", // 100% 处的颜色
+              },
+            ],
+            global: false, // 缺省为 false
+          },
+        },
       },
-      gridIndex: 0,
-      data: enterMonth,
-    }
+      boundaryGap: false,
+    },
   ],
   yAxis: [
     {
@@ -692,7 +694,7 @@ export const mouthOptions: EChartsOption = {
     },
     {
       type: "value",
-      position: "right",
+      position: "left",
       axisTick: {
         show: false,
       },
@@ -714,17 +716,15 @@ export const mouthOptions: EChartsOption = {
     },
   ],
   series: [
+
     {
-      name: '出库',
-      type: 'bar',
+      name: "出库",
+      type: "line",
       data: outNum,
-      itemStyle: {
-        normal: {
-          // barBorderRadius: [30, 30, 0, 0],
-          // color: "rgba(249,209,110,.8)",rgba(92,123,217,1.00)
-          color: "#fecb70",
-        }
-      },
+      smooth: 0.4,
+      symbolSize: 1,
+      yAxisIndex: 1,
+      symbol: "circle",
       label: {
         normal: {
           show: true,
@@ -737,19 +737,26 @@ export const mouthOptions: EChartsOption = {
           }
         }
       },
-      barMaxWidth: '15%',
-    },
-    {
-      name: '入库',
-      type: 'bar',
-      data: enterNum,
+      showSymbol: false,
+      lineStyle: {
+        width: 4,
+
+      },
       itemStyle: {
         normal: {
-          // barBorderRadius: [30, 30, 0, 0],
-          // color: "rgba(251,169,128,.9)"
-          color: "#90cedd"
-        }
+          color:  "#fed776",
+          // borderColor: colorList[2],
+        },
       },
+    },
+    {
+      name: "入库",
+      type: "line",
+      data: enterNum,
+      smooth: 0.4,
+      symbolSize: 1,
+      yAxisIndex: 1,
+      symbol: "circle",
       label: {
         normal: {
           show: true,
@@ -762,19 +769,25 @@ export const mouthOptions: EChartsOption = {
           }
         }
       },
-      barMaxWidth: '15%',
-    },
-    {
-      name: '回库',
-      type: 'bar',
-      data: returnNum,
+      // smooth: true,
+      showSymbol: false,
+      lineStyle: {
+        width: 4,
+      },
       itemStyle: {
         normal: {
-          // barBorderRadius: [30, 30, 0, 0],
-          // color: "rgba(222,184,135,0.9)"
-          color: "#22668a"
-        }
+          color: '#95d6e6',
+          // borderColor: colorList[1],
+        },
       },
+    },
+    {
+      name: "回库",
+      type: "line",
+      data: returnNum,
+      smooth: 0.4,
+      symbolSize: 1,
+      yAxisIndex: 1,
       label: {
         normal: {
           show: true,
@@ -787,9 +800,20 @@ export const mouthOptions: EChartsOption = {
           }
         }
       },
-      barMaxWidth: '15%',
+      symbol: "circle",
+      // smooth: true,
+      showSymbol: false,
+      lineStyle: {
+        width: 4,
+      },
+      itemStyle: {
+        normal: {
+          color: '#22668a',
+          // borderColor: colorList[0],
+        },
+      },
     },
-  ]
+  ],
 };
 
 //历年标本数量统计
@@ -917,13 +941,13 @@ export const yearOptions: EChartsOption = {
           position: "top",
           textStyle: {
             color: "rgba(219, 141, 73, 1)",
-            fontSize: 14,
+            fontSize: 13,
             fontFamily: 'DIN',
             fontWeight: 'bold'
           }
         }
       },
-      barMaxWidth: '15%',
+      barMaxWidth: ' 35%',
     },
     {
       name: '入库',
@@ -945,13 +969,13 @@ export const yearOptions: EChartsOption = {
           position: "top",
           textStyle: {
             color: "rgba(219, 141, 73, 1)",
-            fontSize: 14,
+            fontSize: 13,
             fontFamily: 'DIN',
             fontWeight: 'bold'
           }
         }
       },
-      barMaxWidth: '15%',
+      barMaxWidth: '35%',
     },
     {
       name: '回库',
@@ -973,13 +997,13 @@ export const yearOptions: EChartsOption = {
           position: "top",
           textStyle: {
             color: "rgba(219, 141, 73, 1)",
-            fontSize: 14,
+            fontSize: 13,
             fontFamily: 'DIN',
             fontWeight: 'bold'
           }
         }
       },
-      barMaxWidth: '15%',
+      barMaxWidth: '35%',
     },
   ]
 };