添加图标

src/layout/components/Sidebar/SidebarItem.vue

@@ -2,10 +2,10 @@
   <template v-if="!item.hidden">
     <template v-if="showSidebarItem(item.children, item)">
       <Link v-if="onlyOneChild.meta" :to="resolvePath(onlyOneChild.path)">
-        <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
-          <item :meta="onlyOneChild.meta || item.meta" />
-          <template #title>{{ onlyOneChild.meta?.title }}</template>
-        </el-menu-item>
+      <el-menu-item :index="resolvePath(onlyOneChild.path)" :class="{ 'submenu-title-noDropdown': !isNest }">
+        <item :meta="onlyOneChild.meta || item.meta" />
+        <template #title>{{ onlyOneChild.meta?.title }}</template>
+      </el-menu-item>
       </Link>
     </template>
     <el-sub-menu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
@@ -13,73 +13,67 @@
         <item :meta="item.meta" />
         <span>{{ item.meta.title }}</span>
       </template>
-      <SidebarItem
-        v-for="child in item.children"
-        :key="child.path"
-        :is-nest="true"
-        :item="child"
-        :base-path="resolvePath(child.path)"
-      />
+      <SidebarItem v-for="child in item.children" :key="child.path" :is-nest="true" :item="child" :base-path="resolvePath(child.path)" />
     </el-sub-menu>
   </template>
 </template>
 
 <script setup lang="ts">
 /*初始化参数比如引入组件，proxy,state等*/
-import Link from './Link.vue'
-import Item from './Item'
-import { isExternal } from '@/utils/validate'
-import path from 'path'
-import { RouteItemTy } from '~/router'
+import Link from "./Link.vue";
+import Item from "./Item";
+import { isExternal } from "@/utils/validate";
+import path from "path";
+import { RouteItemTy } from "~/router";
 const props = defineProps({
   //每一个router Item
   item: {
     type: Object,
-    required: true
+    required: true,
   },
   //用于判断是不是子Item,设置响应的样式
   isNest: {
     type: Boolean,
-    default: false
+    default: false,
   },
   //基础路径，用于拼接
   basePath: {
     type: String,
-    default: ''
-  }
-})
+    default: "",
+  },
+});
 onMounted(() => {
   // console.log("我挂载了");
   // console.log(proxy.item);
-})
+});
 //显示sidebarItem 的情况
-let onlyOneChild: any = ref(null)
+let onlyOneChild: any = ref(null);
 const showSidebarItem = (children = [], parent: RouteItemTy) => {
   const showingChildren = children.filter((item: RouteItemTy) => {
     if (item.hidden) {
-      return false
+      return false;
     } else {
       // Temp set(will be used if only has one showing child)
-      onlyOneChild.value = item
-      return true
+      onlyOneChild.value = item;
+      return true;
     }
-  })
+  });
   if (showingChildren.length === 1 && !parent?.alwaysShow) {
-    return true
+    return true;
   }
   if (showingChildren.length === 0) {
-    onlyOneChild.value = { ...parent, path: '', noChildren: true }
-    return true
+    onlyOneChild.value = { ...parent, path: "", noChildren: true };
+    return true;
   }
-  return false
-}
+  return false;
+};
 const resolvePath = (routePath: string) => {
   if (isExternal(routePath)) {
-    return routePath
+    return routePath;
   }
   if (isExternal(props.basePath)) {
-    return props.basePath
+    return props.basePath;
   }
-  return path.resolve(props.basePath, routePath)
-}
+  return path.resolve(props.basePath, routePath);
+};
 </script>

src/views/dashboard/hooks/usePublic.ts

@@ -1,6 +1,6 @@
-import { Query } from "@/api/webApi";
-import { CommonData } from "~/common";
-import * as _ from "lodash";
+import { Query } from '@/api/webApi'
+import { CommonData } from '~/common'
+import * as _ from 'lodash'
 
 export enum showTimeMsg {
   HourlyPeak, //小时峰值
@@ -12,97 +12,97 @@ export enum showTimeMsg {
 export function usePublic() {
   const optionLeft = {
     tooltip: {
-      trigger: "axis",
+      trigger: 'axis',
     },
     legend: {
       show: true,
       top: 0,
-      left: "30%",
-      icon: "roundRect",
+      left: '30%',
+      icon: 'roundRect',
       textStyle: {
-        color: "#698dc3",
+        color: '#698dc3',
       },
     },
     grid: {
-      left: "0%",
-      right: "5%",
-      bottom: "0%",
-      top: "15%",
+      left: '5%',
+      right: '5%',
+      bottom: '0%',
+      top: '17%',
       containLabel: true,
     },
-    color: ["#F5BB3D", "#73D970", "#6A9DD9"],
+    color: ['#F5BB3D', '#73D970', '#6A9DD9'],
     xAxis: {
-      type: "category",
+      type: 'category',
       boundaryGap: true,
       data: [
-        "0:00",
-        "2:00",
-        "4:00",
-        "6:00",
-        "8:00",
-        "10:00",
-        "12:00",
-        "14:00",
-        "16:00",
-        "18:00",
-        "20:00",
-        "22:00",
+        '0:00',
+        '2:00',
+        '4:00',
+        '6:00',
+        '8:00',
+        '10:00',
+        '12:00',
+        '14:00',
+        '16:00',
+        '18:00',
+        '20:00',
+        '22:00',
       ],
       axisLine: {
         show: true,
         lineStyle: {
-          color: "#8897BC",
+          color: '#8897BC',
         },
       },
       axisTick: {
         show: false,
       },
       axisLabel: {
-        color: "#8897BC",
+        color: '#8897BC',
       },
     },
     yAxis: [
       {
-        type: "value",
+        type: 'value',
         axisLabel: {
-          color: "#8897BC",
+          color: '#8897BC',
           formatter: function (item) {
-            return item / 10000 + "万";
+            return item / 10000 + '万'
           },
         },
         splitLine: {
           lineStyle: {
-            type: "dashed",
-            color: "rgba(196,194,225, 0.54)",
+            type: 'dashed',
+            color: 'rgba(196,194,225, 0.54)',
           },
         },
-        name: "单",
+        name: '单',
       },
       {
-        type: "value",
+        type: 'value',
         axisLabel: {
-          color: "#8897BC",
+          color: '#8897BC',
         },
         splitLine: {
           lineStyle: {
-            type: "dashed",
-            color: "rgba(196,194,225, 0.54)",
+            type: 'dashed',
+            color: 'rgba(196,194,225, 0.54)',
           },
         },
-        name: "吨",
+        name: '吨',
       },
     ],
     series: [
       {
-        name: "运单/单",
-        type: "line",
-        symbol: "none",
-        key: "bagsnum",
+        name: '运单/单',
+        type: 'line',
+        symbol: 'none',
+        key: 'bagsnum',
         yAxisIndex: 0,
         data: [120, 132, 101, 134, 90, 230, 210, 132, 101, 134, 90, 230],
         areaStyle: {
           color: {
-            type: "linear",
+            type: 'linear',
             x: 0,
             y: 0,
             x2: 0,
@@ -110,11 +110,11 @@ export function usePublic() {
             colorStops: [
               {
                 offset: 0,
-                color: "rgba(125,72,255,0.5)",
+                color: 'rgba(125,72,255,0.5)',
               },
               {
                 offset: 1,
-                color: "rgba(0,180,255,0.01)",
+                color: 'rgba(0,180,255,0.01)',
               },
             ],
             global: false,
@@ -122,15 +122,15 @@ export function usePublic() {
         },
       },
       {
-        name: "重量/吨",
-        type: "line",
-        symbol: "none",
+        name: '重量/吨',
+        type: 'line',
+        symbol: 'none',
         yAxisIndex: 1,
-        key: "passengers",
+        key: 'passengers',
         data: [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230],
         areaStyle: {
           color: {
-            type: "linear",
+            type: 'linear',
             x: 0,
             y: 0,
             x2: 0,
@@ -138,11 +138,11 @@ export function usePublic() {
             colorStops: [
               {
                 offset: 0,
-                color: "rgba(125,72,255,0.5)",
+                color: 'rgba(125,72,255,0.5)',
               },
               {
                 offset: 1,
-                color: "rgba(0,180,255,0.01)",
+                color: 'rgba(0,180,255,0.01)',
               },
             ],
             global: false,
@@ -150,161 +150,161 @@ export function usePublic() {
         },
       },
     ],
-  };
+  }
   const airlineAbnormalBaggage = {
-    component: "commonChartsBar",
+    component: 'commonChartsBar',
     option: {
       baseOption: {
         tooltip: {
-          trigger: "axis",
+          trigger: 'axis',
           valueFormatter: function (value) {
-            return value + "单";
+            return value + '单'
           },
         },
         legend: {
-          data: ["报警", "预警"],
-          right: "20%",
+          data: ['报警', '预警'],
+          right: '20%',
           textStyle: {
-            color: "#8897BC",
+            color: '#8897BC',
           },
           // top:"-10"
         },
-        color: ["#EC3B71", "#E5B35C"],
+        color: ['#EC3B71', '#E5B35C'],
         grid: {
-          bottom: "10%",
-          left: "5%",
-          right: "1%",
-          top: "15%",
+          bottom: '10%',
+          left: '5%',
+          right: '1%',
+          top: '17%',
         },
         xAxis: {
-          data: ["卸机", "机下交接", "货站交接", "提取"],
+          data: ['卸机', '机下交接', '货站交接', '提取'],
           axisLine: {
             show: true,
             lineStyle: {
-              color: "#8897BC",
+              color: '#8897BC',
             },
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: "#8897BC",
+            color: '#8897BC',
           },
         },
         yAxis: {
-          type: "value",
+          type: 'value',
           axisLabel: {
-            color: "#8897BC",
+            color: '#8897BC',
           },
           splitLine: {
             lineStyle: {
-              type: "dashed",
-              color: "rgba(196,194,225, 0.54)",
+              type: 'dashed',
+              color: 'rgba(196,194,225, 0.54)',
             },
           },
-          name: "单",
+          name: '单',
         },
         series: [
           {
-            name: "报警",
-            type: "bar",
+            name: '报警',
+            type: 'bar',
             data: [11, 16, 4, 6],
           },
           {
-            name: "预警",
-            type: "bar",
+            name: '预警',
+            type: 'bar',
             data: [11, 15, 17, 4],
           },
         ],
       },
     },
-  };
+  }
   const airCompaneBaggage = {
-    component: "commonChartsBar",
+    component: 'commonChartsBar',
     option: {
       baseOption: {
         tooltip: {
-          trigger: "axis",
+          trigger: 'axis',
         },
         legend: {
-          data: ["运单/单", "重量/吨"],
-          right: "20%",
+          data: ['运单/单', '重量/吨'],
+          right: '20%',
           textStyle: {
-            color: "#8897BC",
+            color: '#8897BC',
           },
         },
-        color: ["#51DEE9", "#4C88E1"],
+        color: ['#51DEE9', '#4C88E1'],
         grid: {
-          bottom: "10%",
-          left: "13%",
-          right: "8%",
-          top: "15%",
+          bottom: '10%',
+          left: '13%',
+          right: '8%',
+          top: '17%',
         },
         xAxis: {
-          data: ["国航", "南航", "深航", "东航", "海航", "国泰", "川航"],
+          data: ['国航', '南航', '深航', '东航', '海航', '国泰', '川航'],
           axisLine: {
             show: true,
             lineStyle: {
-              color: "#8897BC",
+              color: '#8897BC',
             },
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: "#8897BC",
+            color: '#8897BC',
           },
         },
         yAxis: [
           {
-            type: "value",
+            type: 'value',
             axisLabel: {
-              color: "#8897BC",
+              color: '#8897BC',
               formatter: function (item) {
-                return item / 10000 + "万";
+                return item / 10000 + '万'
               },
             },
             splitLine: {
               lineStyle: {
-                type: "dashed",
-                color: "rgba(196,194,225, 0.54)",
+                type: 'dashed',
+                color: 'rgba(196,194,225, 0.54)',
               },
             },
-            name: "单",
+            name: '单',
           },
           {
-            type: "value",
+            type: 'value',
             axisLabel: {
-              color: "#8897BC",
+              color: '#8897BC',
             },
             splitLine: {
               lineStyle: {
-                type: "dashed",
-                color: "rgba(196,194,225, 0.54)",
+                type: 'dashed',
+                color: 'rgba(196,194,225, 0.54)',
               },
             },
-            name: "吨",
+            name: '吨',
           },
         ],
         series: [
           {
-            name: "运单/单",
-            type: "bar",
+            name: '运单/单',
+            type: 'bar',
             data: [12, 10, 15, 11, 16, 4, 6],
             yAxisIndex: 0,
           },
           {
-            name: "重量/吨",
-            type: "bar",
+            name: '重量/吨',
+            type: 'bar',
             data: [11, 15, 17, 8, 1, 4, 6],
             yAxisIndex: 1,
           },
         ],
       },
     },
-  };
+  }
   const airStutas = {
-    component: "commonChartsBar",
+    component: 'commonChartsBar',
     option: {
       baseOption: {
         // legend: {
@@ -316,103 +316,103 @@ export function usePublic() {
         //   // top:"-10"
         // },
         tooltip: {
-          trigger: "axis",
+          trigger: 'axis',
           valueFormatter: function (value) {
-            return value + "单";
+            return value + '单'
           },
         },
-        color: ["#51DEE9", "#4C88E1"],
+        color: ['#51DEE9', '#4C88E1'],
         grid: {
-          bottom: "10%",
-          left: "5%",
-          right: "1%",
-          top: "15%",
+          bottom: '10%',
+          left: '5%',
+          right: '1%',
+          top: '17%',
         },
         xAxis: {
-          data: ["机下交接", "货站交接", "理货"],
+          data: ['机下交接', '货站交接', '理货'],
           axisLine: {
             show: true,
             lineStyle: {
-              color: "#8897BC",
+              color: '#8897BC',
             },
           },
           axisTick: {
             show: false,
           },
           axisLabel: {
-            color: "#8897BC",
+            color: '#8897BC',
           },
         },
         yAxis: {
-          type: "value",
+          type: 'value',
           axisLabel: {
-            color: "#8897BC",
+            color: '#8897BC',
           },
           splitLine: {
             lineStyle: {
-              type: "dashed",
-              color: "rgba(196,194,225, 0.54)",
+              type: 'dashed',
+              color: 'rgba(196,194,225, 0.54)',
             },
           },
-          name: "单",
+          name: '单',
         },
         series: [
           {
-            type: "bar",
+            type: 'bar',
             data: [12, 10, 15],
           },
         ],
       },
     },
-  };
+  }
   const nodeEfficiency = {
-    component: "commonChartsLine",
+    component: 'commonChartsLine',
     option: {
       tooltip: {
-        trigger: "axis",
+        trigger: 'axis',
         valueFormatter: function (value) {
-          return value + "秒";
+          return value + '秒'
         },
       },
       legend: {
-        top: "1%",
-        right: "5%",
-        data: ["平均时间", "最长时间", "最短时间"],
+        top: '1%',
+        right: '5%',
+        data: ['平均时间', '最长时间', '最短时间'],
         itemWidth: 25,
         itemHeight: 14,
       },
       grid: {
-        bottom: "10%",
-        left: "1%",
-        right: "1%",
-        top: "15%",
+        bottom: '10%',
+        left: '7%',
+        right: '1%',
+        top: '17%',
       },
-      color: ["#3ca4fc", "#f1ce7c", "#36ccba"],
+      color: ['#3ca4fc', '#f1ce7c', '#36ccba'],
       xAxis: {
         axisLabel: {
           interval: 0,
         },
-        data: ["卸机", "机下交接", "货站交接", "提取"],
+        data: ['卸机', '机下交接', '货站交接', '提取'],
       },
       yAxis: {
-        type: "value",
+        type: 'value',
         axisLabel: {
-          color: "#8897BC",
+          color: '#8897BC',
         },
         splitLine: {
           lineStyle: {
-            type: "dashed",
-            color: "rgba(196,194,225, 0.54)",
+            type: 'dashed',
+            color: 'rgba(196,194,225, 0.54)',
           },
         },
-        name: "单位：秒",
+        name: '单位：秒',
       },
       series: [
         {
-          name: "平均时间",
-          type: "line",
+          name: '平均时间',
+          type: 'line',
           smooth: true,
-          stack: "",
+          stack: '',
           areaStyle: {
             opacity: 0,
           },
@@ -432,10 +432,10 @@ export function usePublic() {
           ],
         },
         {
-          name: "最长时间",
-          type: "line",
+          name: '最长时间',
+          type: 'line',
           smooth: true,
-          stack: "",
+          stack: '',
           areaStyle: {
             opacity: 0,
           },
@@ -455,10 +455,10 @@ export function usePublic() {
           ],
         },
         {
-          name: "最短时间",
-          type: "line",
+          name: '最短时间',
+          type: 'line',
           smooth: true,
-          stack: "",
+          stack: '',
           areaStyle: {
             opacity: 0,
           },
@@ -479,35 +479,35 @@ export function usePublic() {
         },
       ],
     },
-  };
-  const node = ["卸机", "机下交接", "货站交接", "提取"];
+  }
+  const node = ['卸机', '机下交接', '货站交接', '提取']
 
-  const hours = Array.from({ length: 24 }, (v, i) => i + 1);
+  const hours = Array.from({ length: 24 }, (v, i) => i + 1)
   const hourPeak = {
-    component: "commonChartsScatter",
+    component: 'commonChartsScatter',
     option: {
       tooltip: {
-        trigger: "axis",
+        trigger: 'axis',
         valueFormatter: function (value) {
-          return value + "单";
+          return value + '单'
         },
       },
       title: node.map((month, index) => ({
-        top: ((index + 0.5) * 100) / 4 - 3 + "%",
+        top: ((index + 0.5) * 100) / 4 - 3 + '%',
         text: month,
         textStyle: {
           fontSize: 12,
-          fontWeight: "normal",
-          color: "#698dc3",
+          fontWeight: 'normal',
+          color: '#698dc3',
         },
       })),
       singleAxis: node.map((month, index) => ({
-        type: "category",
+        type: 'category',
         data: hours,
-        top: ((index + 0.5) * 100) / 4 - 3 + "%",
-        height: 100 / 4 - 5 + "%",
-        left: "12%",
-        right: "1%",
+        top: ((index + 0.5) * 100) / 4 - 3 + '%',
+        height: 100 / 4 - 5 + '%',
+        left: '12%',
+        right: '1%',
         axisTick: {
           show: false,
         },
@@ -517,8 +517,8 @@ export function usePublic() {
       })),
       series: node.map((month, index) => ({
         singleAxisIndex: index,
-        coordinateSystem: "singleAxis",
-        type: "scatter",
+        coordinateSystem: 'singleAxis',
+        type: 'scatter',
         data: [
           3,
           6,
@@ -546,11 +546,11 @@ export function usePublic() {
           5,
         ],
         symbolSize: function (dataItem) {
-          return dataItem * 3;
+          return dataItem * 3
         },
       })),
     },
-  };
+  }
   const getPublicData = async (id: number, times?: any[]) => {
     try {
       const {
@@ -560,16 +560,16 @@ export function usePublic() {
       } = await Query<CommonData>({
         id,
         dataContent: times,
-      });
+      })
       if (Number(code) !== 0) {
-        throw new Error(message || "失败");
+        throw new Error(message || '失败')
       } else {
-        return listValues;
+        return listValues
       }
     } catch (error) {
-      console.error(error);
+      console.error(error)
     }
-  };
+  }
   return {
     optionLeft,
     airlineAbnormalBaggage,
@@ -578,5 +578,5 @@ export function usePublic() {
     nodeEfficiency,
     hourPeak,
     getPublicData,
-  };
+  }
 }

src/views/dashboard/index.vue

@@ -146,7 +146,7 @@
         </div>
       </div>
     </div>
-    <Dialog :flag="flag" @resetForm="resetForm" @submitForm="submitForm">
+    <Dialog :flag="flag" msg-title="日期选择" @resetForm="resetForm" @submitForm="submitForm">
       <el-form :model="form" label-width="120px">
         <el-form-item label="开始日期">
           <el-date-picker :disabled-date="disabledStartDate" v-model="form.startDate" type="date" placeholder="请选择开始日期" size="default" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />

src/views/dashboard/indexHomeOut.vue

@@ -146,7 +146,7 @@
         </div>
       </div>
     </div>
-    <Dialog :flag="flag" @resetForm="resetForm" @submitForm="submitForm">
+    <Dialog :flag="flag" msg-title="日期选择" @resetForm="resetForm" @submitForm="submitForm">
       <el-form :model="form" label-width="120px">
         <el-form-item label="开始日期">
           <el-date-picker :disabled-date="disabledStartDate" v-model="form.startDate" type="date" placeholder="请选择开始日期" size="default" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />

src/views/dashboard/indexIn.vue

@@ -146,7 +146,7 @@
         </div>
       </div>
     </div>
-    <Dialog :flag="flag" @resetForm="resetForm" @submitForm="submitForm">
+    <Dialog :flag="flag" msg-title="日期选择" @resetForm="resetForm" @submitForm="submitForm">
       <el-form :model="form" label-width="120px">
         <el-form-item label="开始日期">
           <el-date-picker :disabled-date="disabledStartDate" v-model="form.startDate" type="date" placeholder="请选择开始日期" size="default" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />

src/views/dashboard/indexOut.vue

@@ -146,7 +146,7 @@
         </div>
       </div>
     </div>
-    <Dialog :flag="flag" @resetForm="resetForm" @submitForm="submitForm">
+    <Dialog :flag="flag" msg-title="日期选择" @resetForm="resetForm" @submitForm="submitForm">
       <el-form :model="form" label-width="120px">
         <el-form-item label="开始日期">
           <el-date-picker :disabled-date="disabledStartDate" v-model="form.startDate" type="date" placeholder="请选择开始日期" size="default" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />