Merge branch 'master' of http://120.26.64.82:3000/BFFE/SZYGM1.0

src/components/TableHeaderCell/index.vue

@@ -1,68 +1,93 @@
 <template>
-  <div class="table-header-cell el-table-v2__header-cell-text">
-    <template v-if="!filterable || filterStyle === 'arrow'">
-      {{ label }}
-    </template>
-    <template v-if="filterable">
-      <el-popover
-        :visible="visible"
-        class="table-header-cell-popover"
-        placement="bottom"
-        @show="expand = true"
-        @hide="expand = false"
+  <div
+    :class="[
+      'table-header-cell',
+      'el-table-v2__header-cell-text',
+      {
+        'table-header-cell-space-between':
+          (filterable && filterStyle === 'arrow') || sortable,
+      },
+    ]"
+  >
+    <template v-if="filterable && filterStyle === 'underline'">
+      <span
+        ref="buttonRef"
+        v-click-outside="clickOutsideHandler"
+        :class="['filter-button', { 'filter-button-active': active }]"
       >
-        <template v-if="filterStyle === 'underline'" #reference>
-          <span
-            :class="['btn-filter', { 'btn-filter-active': active }]"
-            @click="visible = !visible"
-            >{{ label }}</span
-          >
-        </template>
-        <template v-if="filterStyle === 'arrow'" #reference>
-          <i
-            :class="[
-              'filter-arrow',
-              'el-icon-arrow-down',
-              { 'arrow-active': active, 'arrow-expand': expand },
-            ]"
-            @click="visible = !visible"
-          />
-        </template>
-        <el-select
-          v-model="selections"
-          size="small"
-          placeholder="筛选"
-          multiple
-          filterable
-          default-first-option
-          collapse-tags
-          clearable
-          @change="
-            newVal => {
-              $emit('update:filter-values', newVal)
-            }
-          "
-        >
-          <el-option
-            v-for="(option, index) in filterOptions"
-            :key="option.value + index"
-            :value="option.value"
-            :label="option.label"
-          />
-        </el-select>
-      </el-popover>
-    </template>
-    <template v-if="sortable">
-      <span class="caret-wrapper" @click="sortChange">
-        <i class="sort-caret ascending" />
-        <i class="sort-caret descending" />
+        <span class="filter-button-text">{{ label }}</span>
       </span>
     </template>
+    <template v-else>
+      <span style="flex: 1">{{ label }}</span>
+    </template>
+    <div
+      v-if="(filterable && filterStyle === 'arrow') || sortable"
+      class="button-wrapper"
+    >
+      <div
+        v-if="filterable && filterStyle === 'arrow'"
+        ref="buttonRef"
+        v-click-outside="clickOutsideHandler"
+        :class="[
+          'filter-arrow',
+          { 'arrow-active': active, 'arrow-expand': expand },
+        ]"
+      >
+        <el-icon>
+          <CaretBottom />
+        </el-icon>
+      </div>
+      <div v-if="sortable" class="sort-button" @click="sortChange">
+        <el-icon>
+          <SortUp v-show="sortRule === 'ascending'" />
+          <SortDown v-show="sortRule === 'descending'" />
+          <Sort v-show="!sortRule" />
+        </el-icon>
+      </div>
+    </div>
   </div>
+  <el-popover
+    ref="popoverRef"
+    :virtual-ref="buttonRef"
+    virtual-triggering
+    trigger="click"
+    :width="224"
+    class="table-header-cell-popover"
+    placement="bottom"
+    @show="expand = true"
+    @hide="expand = false"
+  >
+    <el-select
+      v-model="selections"
+      size="default"
+      placeholder="筛选"
+      multiple
+      filterable
+      default-first-option
+      collapse-tags
+      clearable
+      :teleported="false"
+      @change="
+        newVal => {
+          emit('update:filterValues', newVal)
+        }
+      "
+    >
+      <el-option
+        v-for="(option, index) in filterOptions"
+        :key="option.value + index"
+        :value="option.value"
+        :label="option.label"
+      />
+    </el-select>
+  </el-popover>
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
+import { CaretBottom, Sort, SortUp, SortDown } from '@element-plus/icons-vue'
+import { ClickOutside as vClickOutside } from 'element-plus'
 
 const props = defineProps({
   label: {
@@ -89,9 +114,7 @@ const props = defineProps({
   },
 })
 
-const emit = defineEmits(['update:sortRule'])
-
-const visible = ref(false)
+const emit = defineEmits(['update:filterValues','update:sortRule'])
 
 const selections = ref<string[]>([])
 const expand = ref(false)
@@ -102,6 +125,12 @@ watchEffect(() => {
     selections.value = props.filterValues
   }
 })
+const buttonRef = ref()
+const popoverRef = ref()
+const clickOutsideHandler = () => {
+  unref(popoverRef).popperRef?.delayHide?.()
+}
+
 const sortChange = () => {
   const sortRule =
     props.sortRule === ''
@@ -111,51 +140,69 @@ const sortChange = () => {
         : ''
   emit('update:sortRule', sortRule)
 }
-
-onUpdated(() => {
-  if (props.label === '航班号') {
-    console.log(filterable.value)
-  }
-})
 </script>
 
 <style lang="scss" scoped>
-.filter-arrow {
-  cursor: pointer;
-  transition: 0.3s transform;
-
-  &.arrow-expand {
-    transform: rotate(-180deg);
+.table-header-cell {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  line-height: 14px;
+  &.table-header-cell-space-between {
+    justify-content: space-between;
   }
-
-  &.arrow-active {
-    color: #2d7cff;
-    font-weight: bold;
-  }
-}
-
-.btn-filter {
-  cursor: pointer;
-  position: relative;
-
-  &:hover {
-    color: #2d7cff;
-  }
-
-  &::after {
-    content: '';
-    display: block;
-    width: calc(100% + 4px);
-    position: absolute;
-    bottom: -4px;
-    left: -2px;
-    border-bottom: 1px solid #101116;
+  .filter-button {
+    flex: 1;
+    cursor: pointer;
+    &-text {
+      position: relative;
+      &::after {
+        content: '';
+        display: block;
+        width: calc(100% + 4px);
+        position: absolute;
+        bottom: -4px;
+        left: -2px;
+        border-bottom: 1px solid #101116;
+      }
+    }
+    &:hover {
+      color: #2d7cff;
+    }
+    &-active,
+    &:hover {
+      .filter-button-text::after {
+        border-bottom: 2px solid #2d7cff;
+      }
+    }
   }
-
-  &.btn-filter-active,
-  &:hover {
-    &::after {
-      border-bottom: 2px solid #2d7cff;
+  .button-wrapper {
+    width: 14px;
+    height: 100%;
+    background-color: #dfc37f;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    > div {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+    }
+    .filter-arrow {
+      transition: 0.3s transform;
+      &.arrow-expand {
+        transform: rotate(-180deg);
+      }
+      &.arrow-active {
+        color: #2d7cff;
+        font-weight: bold;
+      }
     }
   }
 }

src/layout/Layout.vue

@@ -54,7 +54,7 @@ ResizeHook()
   transition: width 0.28s;
   width: var(--side-bar-width) !important;
   background-color: var(--el-menu-bg-color);
-  height: 100%;
+  height: calc(100% - 48px);
   position: fixed;
   font-size: 0;
   top: 48px;

src/views/dashboard/index.vue

@@ -248,12 +248,12 @@ const optionLeft = {
   tooltip: {
     trigger: "axis",
   },
-  // legend: {
-  //   data: ['运输总数', '托运旅客数'],
-  //   show: true,
-  //   top: 0,
-  //   icon: 'roundRect'
-  // },
+  legend: {
+    show: true,
+    top: 0,
+    left:'30%',
+    icon: 'roundRect'
+  },
   grid: {
     left: "0%",
     right: "5%",
@@ -265,7 +265,7 @@ const optionLeft = {
   xAxis: {
     type: "category",
     boundaryGap: true,
-    data: ["2021.12", "2022.01", "2022.02", "2022.03", "2022.04", "2022.05"],
+    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"],
     axisLine: {
       show: true,
       lineStyle: {
@@ -294,6 +294,7 @@ const optionLeft = {
           color: "rgba(196,194,225, 0.54)",
         },
       },
+      name:"单"
     },
     {
       type: "value",
@@ -306,16 +307,17 @@ const optionLeft = {
           color: "rgba(196,194,225, 0.54)",
         },
       },
+      name:"吨"
     },
   ],
   series: [
     {
-      name: "运单/件",
+      name: "运单/单",
       type: "line",
       symbol: "none",
       key: "bagsnum",
       yAxisIndex: 0,
-      data: [120, 132, 101, 134, 90, 230, 210],
+      data: [120, 132, 101, 134, 90, 230, 210,132, 101, 134, 90, 230],
       areaStyle: {
         color: {
           type: "linear",
@@ -343,7 +345,7 @@ const optionLeft = {
       symbol: "none",
       yAxisIndex: 1,
       key: "passengers",
-      data: [220, 182, 191, 234, 290, 330, 310],
+      data: [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230],
       areaStyle: {
         color: {
           type: "linear",
@@ -372,9 +374,15 @@ const airlineAbnormalBaggage = ref({
   component: "commonChartsBar",
   option: {
     baseOption: {
+      tooltip: {
+        trigger: "axis",
+        valueFormatter:function(value){
+          return value +"单"
+        }
+      },
       legend: {
         data: ["报警", "预警"],
-        right: "20",
+        right: "20%",
         textStyle: {
           color: "#8897BC",
         },
@@ -413,6 +421,7 @@ const airlineAbnormalBaggage = ref({
             color: "rgba(196,194,225, 0.54)",
           },
         },
+        name:'单'
       },
       series: [
         {
@@ -434,9 +443,12 @@ const airCompaneBaggage = ref({
   component: "commonChartsBar",
   option: {
     baseOption: {
+      tooltip: {
+        trigger: "axis",
+      },
       legend: {
-        data: ["2020年", "2021年"],
-        right: "20",
+        data: ["运单/单", "重量/吨"],
+        right: "20%",
         textStyle: {
           color: "#8897BC",
         },
@@ -444,8 +456,8 @@ const airCompaneBaggage = ref({
       color: ["#51DEE9", "#4C88E1"],
       grid: {
         bottom: "10%",
-        left: "5%",
-        right: "1%",
+        left: "13%",
+        right: "8%",
         top: "15%",
       },
       xAxis: {
@@ -463,28 +475,49 @@ const airCompaneBaggage = ref({
           color: "#8897BC",
         },
       },
-      yAxis: {
-        type: "value",
-        axisLabel: {
-          color: "#8897BC",
+      yAxis: [
+      {
+      type: "value",
+      axisLabel: {
+        color: "#8897BC",
+        formatter: function (item) {
+          return item / 10000 + "万";
         },
-        splitLine: {
-          lineStyle: {
-            type: "dashed",
-            color: "rgba(196,194,225, 0.54)",
-          },
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(196,194,225, 0.54)",
         },
       },
+      name:"单"
+    },
+    {
+      type: "value",
+      axisLabel: {
+        color: "#8897BC",
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(196,194,225, 0.54)",
+        },
+      },
+      name:"吨"
+    },
+      ],
       series: [
         {
-          name: "2020年",
+          name: "运单/单",
           type: "bar",
           data: [12, 10, 15, 11, 16, 4, 6],
+          yAxisIndex: 0,
         },
         {
-          name: "2021年",
+          name: "重量/吨",
           type: "bar",
           data: [11, 15, 17, 8, 1, 4, 6],
+          yAxisIndex: 1,
         },
       ],
     },
@@ -503,6 +536,12 @@ const airStutas = ref({
       //   }
       //   // top:"-10"
       // },
+      tooltip: {
+        trigger: "axis",
+        valueFormatter:function(value){
+          return value +"单"
+        }
+      },
       color: ["#51DEE9", "#4C88E1"],
       grid: {
         bottom: "10%",
@@ -536,6 +575,7 @@ const airStutas = ref({
             color: "rgba(196,194,225, 0.54)",
           },
         },
+        name:'单'
       },
       series: [
         {
@@ -550,6 +590,12 @@ const airStutas = ref({
 const nodeEfficiency = ref({
   component: "commonChartsLine",
   option: {
+    tooltip: {
+        trigger: "axis",
+        valueFormatter:function(value){
+          return value +"秒"
+        }
+      },
     legend: {
       top: "1%",
       right: "5%",
@@ -572,6 +618,19 @@ const nodeEfficiency = ref({
       "卸机", "机下交接", "货站交接", "提取"
       ],
     },
+    yAxis: {
+        type: "value",
+        axisLabel: {
+          color: "#8897BC",
+        },
+        splitLine: {
+          lineStyle: {
+            type: "dashed",
+            color: "rgba(196,194,225, 0.54)",
+          },
+        },
+        name:"单位：秒"
+      },
     series: [
       {
         name: "平均时间",
@@ -595,7 +654,7 @@ const nodeEfficiency = ref({
           opacity: 0,
         },
         data: [
-          4558, 770, 11745, 2699, 11205, 6497, 1544, 1555, 4181, 447, 60, 9804,
+        4558, 770, 11745, 2699, 11205, 6497, 1544, 1555, 4181, 447, 60, 9804,
         ],
       },
       {
@@ -607,8 +666,7 @@ const nodeEfficiency = ref({
           opacity: 0,
         },
         data: [
-          14240, 3190, 1699, 14446, 11349, 11182, 14829, 11740, 2418, 4824,
-          9707, 8126,
+         14240, 3190, 1699, 14446, 11349, 11182, 14829, 11740, 2418, 4824, 9707, 8126,
         ],
       },
     ],
@@ -616,7 +674,7 @@ const nodeEfficiency = ref({
 });
 
 const node = [
-"卸机", "机下交接", "货站交接", "提取"
+  "卸机", "机下交接", "货站交接", "提取"
 ];
 
 const hours = Array.from({ length: 24 }, (v, i) => i + 1);
@@ -624,6 +682,12 @@ const hours = Array.from({ length: 24 }, (v, i) => i + 1);
 const hourPeak = ref({
   component: "commonChartsScatter",
   option: {
+    tooltip: {
+        trigger: "axis",
+        valueFormatter:function(value){
+          return value +"单"
+        }
+      },
     title: node.map((month, index) => ({
       top: ((index + 0.5) * 100) / 4 - 3 + "%",
       text: month,

src/views/dashboard/indexHomeOut.vue

@@ -248,12 +248,12 @@ const optionLeft = {
   tooltip: {
     trigger: "axis",
   },
-  // legend: {
-  //   data: ['运输总数', '托运旅客数'],
-  //   show: true,
-  //   top: 0,
-  //   icon: 'roundRect'
-  // },
+  legend: {
+    show: true,
+    top: 0,
+    left:'30%',
+    icon: 'roundRect'
+  },
   grid: {
     left: "0%",
     right: "5%",
@@ -265,7 +265,7 @@ const optionLeft = {
   xAxis: {
     type: "category",
     boundaryGap: true,
-    data: ["2021.12", "2022.01", "2022.02", "2022.03", "2022.04", "2022.05"],
+    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"],
     axisLine: {
       show: true,
       lineStyle: {
@@ -294,6 +294,7 @@ const optionLeft = {
           color: "rgba(196,194,225, 0.54)",
         },
       },
+      name:"单"
     },
     {
       type: "value",
@@ -306,15 +307,17 @@ const optionLeft = {
           color: "rgba(196,194,225, 0.54)",
         },
       },
+      name:"吨"
     },
   ],
   series: [
     {
-      name: "运输总数",
+      name: "运单/单",
       type: "line",
       symbol: "none",
       key: "bagsnum",
-      data: [120, 132, 101, 134, 90, 230, 210],
+      yAxisIndex: 0,
+      data: [120, 132, 101, 134, 90, 230, 210,132, 101, 134, 90, 230],
       areaStyle: {
         color: {
           type: "linear",
@@ -337,11 +340,12 @@ const optionLeft = {
       },
     },
     {
-      name: "托运旅客数",
+      name: "重量/吨",
       type: "line",
       symbol: "none",
+      yAxisIndex: 1,
       key: "passengers",
-      data: [220, 182, 191, 234, 290, 330, 310],
+      data: [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230],
       areaStyle: {
         color: {
           type: "linear",
@@ -370,6 +374,12 @@ const airlineAbnormalBaggage = ref({
   component: "commonChartsBar",
   option: {
     baseOption: {
+      tooltip: {
+        trigger: "axis",
+        valueFormatter:function(value){
+          return value +"单"
+        }
+      },
       legend: {
         data: ["报警", "预警"],
         right: "20",
@@ -411,6 +421,7 @@ const airlineAbnormalBaggage = ref({
             color: "rgba(196,194,225, 0.54)",
           },
         },
+        name:'单'
       },
       series: [
         {
@@ -432,9 +443,12 @@ const airCompaneBaggage = ref({
   component: "commonChartsBar",
   option: {
     baseOption: {
+      tooltip: {
+        trigger: "axis",
+      },
       legend: {
-        data: ["2020年", "2021年"],
-        right: "20",
+        data: ["运单/单", "重量/吨"],
+        right: "20%",
         textStyle: {
           color: "#8897BC",
         },
@@ -442,8 +456,8 @@ const airCompaneBaggage = ref({
       color: ["#51DEE9", "#4C88E1"],
       grid: {
         bottom: "10%",
-        left: "5%",
-        right: "1%",
+        left: "13%",
+        right: "8%",
         top: "15%",
       },
       xAxis: {
@@ -461,28 +475,49 @@ const airCompaneBaggage = ref({
           color: "#8897BC",
         },
       },
-      yAxis: {
-        type: "value",
-        axisLabel: {
-          color: "#8897BC",
+      yAxis: [
+      {
+      type: "value",
+      axisLabel: {
+        color: "#8897BC",
+        formatter: function (item) {
+          return item / 10000 + "万";
         },
-        splitLine: {
-          lineStyle: {
-            type: "dashed",
-            color: "rgba(196,194,225, 0.54)",
-          },
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(196,194,225, 0.54)",
+        },
+      },
+      name:"单"
+    },
+    {
+      type: "value",
+      axisLabel: {
+        color: "#8897BC",
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(196,194,225, 0.54)",
         },
       },
+      name:"吨"
+    },
+      ],
       series: [
         {
-          name: "2020年",
+          name: "运单/单",
           type: "bar",
           data: [12, 10, 15, 11, 16, 4, 6],
+          yAxisIndex: 0,
         },
         {
-          name: "2021年",
+          name: "重量/吨",
           type: "bar",
           data: [11, 15, 17, 8, 1, 4, 6],
+          yAxisIndex: 1,
         },
       ],
     },
@@ -501,6 +536,12 @@ const airStutas = ref({
       //   }
       //   // top:"-10"
       // },
+      tooltip: {
+        trigger: "axis",
+        valueFormatter:function(value){
+          return value +"单"
+        }
+      },
       color: ["#51DEE9", "#4C88E1"],
       grid: {
         bottom: "10%",
@@ -534,6 +575,7 @@ const airStutas = ref({
             color: "rgba(196,194,225, 0.54)",
           },
         },
+        name:'单'
       },
       series: [
         {
@@ -548,6 +590,12 @@ const airStutas = ref({
 const nodeEfficiency = ref({
   component: "commonChartsLine",
   option: {
+    tooltip: {
+        trigger: "axis",
+        valueFormatter:function(value){
+          return value +"秒"
+        }
+      },
     legend: {
       top: "1%",
       right: "5%",
@@ -576,6 +624,19 @@ const nodeEfficiency = ref({
         "装机",
       ],
     },
+    yAxis: {
+        type: "value",
+        axisLabel: {
+          color: "#8897BC",
+        },
+        splitLine: {
+          lineStyle: {
+            type: "dashed",
+            color: "rgba(196,194,225, 0.54)",
+          },
+        },
+        name:"单位：秒"
+      },
     series: [
       {
         name: "平均时间",
@@ -634,6 +695,12 @@ const hours = Array.from({ length: 24 }, (v, i) => i + 1);
 const hourPeak = ref({
   component: "commonChartsScatter",
   option: {
+    tooltip: {
+        trigger: "axis",
+        valueFormatter:function(value){
+          return value +"单"
+        }
+      },
     title: node.map((month, index) => ({
       top: ((index + 0.5) * 100) / 7 - 3 + "%",
       text: month,

src/views/dashboard/indexIn.vue

@@ -248,12 +248,12 @@ const optionLeft = {
   tooltip: {
     trigger: "axis",
   },
-  // legend: {
-  //   data: ['运输总数', '托运旅客数'],
-  //   show: true,
-  //   top: 0,
-  //   icon: 'roundRect'
-  // },
+  legend: {
+    show: true,
+    top: 0,
+    left:'30%',
+    icon: 'roundRect'
+  },
   grid: {
     left: "0%",
     right: "5%",
@@ -265,7 +265,7 @@ const optionLeft = {
   xAxis: {
     type: "category",
     boundaryGap: true,
-    data: ["2021.12", "2022.01", "2022.02", "2022.03", "2022.04", "2022.05"],
+    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"],
     axisLine: {
       show: true,
       lineStyle: {
@@ -294,6 +294,7 @@ const optionLeft = {
           color: "rgba(196,194,225, 0.54)",
         },
       },
+      name:"单"
     },
     {
       type: "value",
@@ -306,15 +307,17 @@ const optionLeft = {
           color: "rgba(196,194,225, 0.54)",
         },
       },
+      name:"吨"
     },
   ],
   series: [
     {
-      name: "运输总数",
+      name: "运单/单",
       type: "line",
       symbol: "none",
       key: "bagsnum",
-      data: [120, 132, 101, 134, 90, 230, 210],
+      yAxisIndex: 0,
+      data: [120, 132, 101, 134, 90, 230, 210,132, 101, 134, 90, 230],
       areaStyle: {
         color: {
           type: "linear",
@@ -337,11 +340,12 @@ const optionLeft = {
       },
     },
     {
-      name: "托运旅客数",
+      name: "重量/吨",
       type: "line",
       symbol: "none",
+      yAxisIndex: 1,
       key: "passengers",
-      data: [220, 182, 191, 234, 290, 330, 310],
+      data: [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230],
       areaStyle: {
         color: {
           type: "linear",
@@ -370,6 +374,12 @@ const airlineAbnormalBaggage = ref({
   component: "commonChartsBar",
   option: {
     baseOption: {
+      tooltip: {
+        trigger: "axis",
+        valueFormatter:function(value){
+          return value +"单"
+        }
+      },
       legend: {
         data: ["报警", "预警"],
         right: "20",
@@ -411,6 +421,7 @@ const airlineAbnormalBaggage = ref({
             color: "rgba(196,194,225, 0.54)",
           },
         },
+        name:'单'
       },
       series: [
         {
@@ -432,9 +443,12 @@ const airCompaneBaggage = ref({
   component: "commonChartsBar",
   option: {
     baseOption: {
+      tooltip: {
+        trigger: "axis",
+      },
       legend: {
-        data: ["2020年", "2021年"],
-        right: "20",
+        data: ["运单/单", "重量/吨"],
+        right: "20%",
         textStyle: {
           color: "#8897BC",
         },
@@ -442,8 +456,8 @@ const airCompaneBaggage = ref({
       color: ["#51DEE9", "#4C88E1"],
       grid: {
         bottom: "10%",
-        left: "5%",
-        right: "1%",
+        left: "13%",
+        right: "8%",
         top: "15%",
       },
       xAxis: {
@@ -461,28 +475,49 @@ const airCompaneBaggage = ref({
           color: "#8897BC",
         },
       },
-      yAxis: {
-        type: "value",
-        axisLabel: {
-          color: "#8897BC",
+      yAxis: [
+      {
+      type: "value",
+      axisLabel: {
+        color: "#8897BC",
+        formatter: function (item) {
+          return item / 10000 + "万";
         },
-        splitLine: {
-          lineStyle: {
-            type: "dashed",
-            color: "rgba(196,194,225, 0.54)",
-          },
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(196,194,225, 0.54)",
+        },
+      },
+      name:"单"
+    },
+    {
+      type: "value",
+      axisLabel: {
+        color: "#8897BC",
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(196,194,225, 0.54)",
         },
       },
+      name:"吨"
+    },
+      ],
       series: [
         {
-          name: "2020年",
+          name: "运单/单",
           type: "bar",
           data: [12, 10, 15, 11, 16, 4, 6],
+          yAxisIndex: 0,
         },
         {
-          name: "2021年",
+          name: "重量/吨",
           type: "bar",
           data: [11, 15, 17, 8, 1, 4, 6],
+          yAxisIndex: 1,
         },
       ],
     },
@@ -501,6 +536,12 @@ const airStutas = ref({
       //   }
       //   // top:"-10"
       // },
+      tooltip: {
+        trigger: "axis",
+        valueFormatter:function(value){
+          return value +"单"
+        }
+      },
       color: ["#51DEE9", "#4C88E1"],
       grid: {
         bottom: "10%",
@@ -534,6 +575,7 @@ const airStutas = ref({
             color: "rgba(196,194,225, 0.54)",
           },
         },
+        name:'单'
       },
       series: [
         {
@@ -548,6 +590,12 @@ const airStutas = ref({
 const nodeEfficiency = ref({
   component: "commonChartsLine",
   option: {
+    tooltip: {
+        trigger: "axis",
+        valueFormatter:function(value){
+          return value +"秒"
+        }
+      },
     legend: {
       top: "1%",
       right: "5%",
@@ -570,6 +618,19 @@ const nodeEfficiency = ref({
       "卸机", "机下", "货站", "理货", "海关", "出库", "退运"
       ],
     },
+    yAxis: {
+        type: "value",
+        axisLabel: {
+          color: "#8897BC",
+        },
+        splitLine: {
+          lineStyle: {
+            type: "dashed",
+            color: "rgba(196,194,225, 0.54)",
+          },
+        },
+        name:"单位：秒"
+      },
     series: [
       {
         name: "平均时间",
@@ -622,6 +683,12 @@ const hours = Array.from({ length: 24 }, (v, i) => i + 1);
 const hourPeak = ref({
   component: "commonChartsScatter",
   option: {
+    tooltip: {
+        trigger: "axis",
+        valueFormatter:function(value){
+          return value +"单"
+        }
+      },
     title: node.map((month, index) => ({
       top: ((index + 0.5) * 100) / 7 - 3 + "%",
       text: month,

src/views/dashboard/indexOut.vue

@@ -248,12 +248,12 @@ const optionLeft = {
   tooltip: {
     trigger: "axis",
   },
-  // legend: {
-  //   data: ['运输总数', '托运旅客数'],
-  //   show: true,
-  //   top: 0,
-  //   icon: 'roundRect'
-  // },
+  legend: {
+    show: true,
+    top: 0,
+    left:'30%',
+    icon: 'roundRect'
+  },
   grid: {
     left: "0%",
     right: "5%",
@@ -265,7 +265,7 @@ const optionLeft = {
   xAxis: {
     type: "category",
     boundaryGap: true,
-    data: ["2021.12", "2022.01", "2022.02", "2022.03", "2022.04", "2022.05"],
+    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"],
     axisLine: {
       show: true,
       lineStyle: {
@@ -294,6 +294,7 @@ const optionLeft = {
           color: "rgba(196,194,225, 0.54)",
         },
       },
+      name:"单"
     },
     {
       type: "value",
@@ -306,15 +307,17 @@ const optionLeft = {
           color: "rgba(196,194,225, 0.54)",
         },
       },
+      name:"吨"
     },
   ],
   series: [
     {
-      name: "运输总数",
+      name: "运单/单",
       type: "line",
       symbol: "none",
       key: "bagsnum",
-      data: [120, 132, 101, 134, 90, 230, 210],
+      yAxisIndex: 0,
+      data: [120, 132, 101, 134, 90, 230, 210,132, 101, 134, 90, 230],
       areaStyle: {
         color: {
           type: "linear",
@@ -337,11 +340,12 @@ const optionLeft = {
       },
     },
     {
-      name: "托运旅客数",
+      name: "重量/吨",
       type: "line",
       symbol: "none",
+      yAxisIndex: 1,
       key: "passengers",
-      data: [220, 182, 191, 234, 290, 330, 310],
+      data: [220, 182, 191, 234, 290, 330, 310, 132, 101, 134, 90, 230],
       areaStyle: {
         color: {
           type: "linear",
@@ -370,6 +374,12 @@ const airlineAbnormalBaggage = ref({
   component: "commonChartsBar",
   option: {
     baseOption: {
+      tooltip: {
+        trigger: "axis",
+        valueFormatter:function(value){
+          return value +"单"
+        }
+      },
       legend: {
         data: ["报警", "预警"],
         right: "20",
@@ -420,6 +430,7 @@ const airlineAbnormalBaggage = ref({
             color: "rgba(196,194,225, 0.54)",
           },
         },
+        name:'单'
       },
       series: [
         {
@@ -441,9 +452,12 @@ const airCompaneBaggage = ref({
   component: "commonChartsBar",
   option: {
     baseOption: {
+      tooltip: {
+        trigger: "axis",
+      },
       legend: {
-        data: ["2020年", "2021年"],
-        right: "20",
+        data: ["运单/单", "重量/吨"],
+        right: "20%",
         textStyle: {
           color: "#8897BC",
         },
@@ -451,8 +465,8 @@ const airCompaneBaggage = ref({
       color: ["#51DEE9", "#4C88E1"],
       grid: {
         bottom: "10%",
-        left: "5%",
-        right: "1%",
+        left: "13%",
+        right: "8%",
         top: "15%",
       },
       xAxis: {
@@ -470,28 +484,49 @@ const airCompaneBaggage = ref({
           color: "#8897BC",
         },
       },
-      yAxis: {
-        type: "value",
-        axisLabel: {
-          color: "#8897BC",
+      yAxis: [
+      {
+      type: "value",
+      axisLabel: {
+        color: "#8897BC",
+        formatter: function (item) {
+          return item / 10000 + "万";
         },
-        splitLine: {
-          lineStyle: {
-            type: "dashed",
-            color: "rgba(196,194,225, 0.54)",
-          },
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(196,194,225, 0.54)",
+        },
+      },
+      name:"单"
+    },
+    {
+      type: "value",
+      axisLabel: {
+        color: "#8897BC",
+      },
+      splitLine: {
+        lineStyle: {
+          type: "dashed",
+          color: "rgba(196,194,225, 0.54)",
         },
       },
+      name:"吨"
+    },
+      ],
       series: [
         {
-          name: "2020年",
+          name: "运单/单",
           type: "bar",
           data: [12, 10, 15, 11, 16, 4, 6],
+          yAxisIndex: 0,
         },
         {
-          name: "2021年",
+          name: "重量/吨",
           type: "bar",
           data: [11, 15, 17, 8, 1, 4, 6],
+          yAxisIndex: 1,
         },
       ],
     },
@@ -510,6 +545,12 @@ const airStutas = ref({
       //   }
       //   // top:"-10"
       // },
+      tooltip: {
+        trigger: "axis",
+        valueFormatter:function(value){
+          return value +"单"
+        }
+      },
       color: ["#51DEE9", "#4C88E1"],
       grid: {
         bottom: "10%",
@@ -543,6 +584,7 @@ const airStutas = ref({
             color: "rgba(196,194,225, 0.54)",
           },
         },
+        name:'单'
       },
       series: [
         {
@@ -557,6 +599,12 @@ const airStutas = ref({
 const nodeEfficiency = ref({
   component: "commonChartsLine",
   option: {
+    tooltip: {
+        trigger: "axis",
+        valueFormatter:function(value){
+          return value +"秒"
+        }
+      },
     legend: {
       top: "1%",
       right: "5%",
@@ -579,6 +627,19 @@ const nodeEfficiency = ref({
       "入园", "海关", "运抵", "安检", "核单", "理货", "拉下", "待运区", "货站交接", "机下交接", "装机"
       ],
     },
+    yAxis: {
+        type: "value",
+        axisLabel: {
+          color: "#8897BC",
+        },
+        splitLine: {
+          lineStyle: {
+            type: "dashed",
+            color: "rgba(196,194,225, 0.54)",
+          },
+        },
+        name:"单位：秒"
+      },
     series: [
       {
         name: "平均时间",
@@ -631,6 +692,12 @@ const hours = Array.from({ length: 24 }, (v, i) => i + 1);
 const hourPeak = ref({
   component: "commonChartsScatter",
   option: {
+    tooltip: {
+        trigger: "axis",
+        valueFormatter:function(value){
+          return value +"单"
+        }
+      },
     title: node.map((month, index) => ({
       top: ((index + 0.5) * 100) / 11 - 3 + "%",
       text: month,

src/views/error-page/401.vue

@@ -14,10 +14,6 @@
           <li class="link-type">
             <router-link to="/dashboard">回首页</router-link>
           </li>
-          <li class="link-type">
-            <a href="https://www.taobao.com/">随便看看</a>
-          </li>
-          <li><a href="#" @click.prevent="dialogVisible = true">点我看图</a></li>
         </ul>
       </el-col>
       <el-col :span="12">

src/views/error-page/404.vue

@@ -9,15 +9,8 @@
       </div>
       <div class="bullshit">
         <div class="bullshit__oops">OOPS!</div>
-        <div class="bullshit__info">
-          All rights reserved
-          <a style="color: #20a0ff" href="https://wallstreetcn.com" target="_blank">wallstreetcn</a>
-        </div>
-        <div class="bullshit__headline">{{ message }}</div>
-        <div class="bullshit__info">
-          Please check that the URL you entered is correct, or click the button below to return to the homepage.
-        </div>
-        <a href="" class="bullshit__return-home">Back to home</a>
+
+        <a href="" class="bullshit__return-home">返回首页</a>
       </div>
     </div>
   </div>

src/views/realTime/components/StationForm/index.vue

@@ -1,22 +1,24 @@
 <template>
   <el-form :model="formData" inline class="station-form">
-    <el-form-item :prop="formData.startDate" style="width: 160px">
+    <el-form-item :prop="formData.startDate" style="width: 172px">
       <el-date-picker
         v-model="formData.startDate"
         type="datetime"
         format="YYYY-MM-DD HH:mm"
         value-format="YYYY-MM-DD HH:mm"
         size="default"
+        :prefix-icon="datePreTitle('开始')"
         :clearable="false"
       />
     </el-form-item>
-    <el-form-item :prop="formData.endDate" style="width: 160px">
+    <el-form-item :prop="formData.endDate" style="width: 172px">
       <el-date-picker
         v-model="formData.endDate"
         type="datetime"
         format="YYYY-MM-DD HH:mm"
         value-format="YYYY-MM-DD HH:mm"
         size="default"
+        :prefix-icon="datePreTitle('结束')"
         :clearable="false"
       />
     </el-form-item>
@@ -24,7 +26,7 @@
       <el-select
         v-model="formData.flightStatus"
         size="default"
-        placeholder="全部航班"
+        :clearable="false"
       >
         <el-option
           v-for="option in flightStatusOptions"
@@ -38,7 +40,7 @@
       <el-select
         v-model="formData.flightWarning"
         size="default"
-        placeholder="全部航班"
+        :clearable="false"
       >
         <el-option
           v-for="option in flightWarningOptions"
@@ -56,7 +58,7 @@
       <el-select
         v-model="formData.waybillType"
         size="default"
-        placeholder="运单类型"
+        :clearable="false"
       >
         <el-option
           v-for="option in waybillTypeOptions"
@@ -69,10 +71,8 @@
   </el-form>
 </template>
 
-<script setup lang="ts">
-import { SelectOption, SelectOptionQueryResult } from '~/common'
+<script setup lang="tsx">
 import { parseTime } from '@/utils/validate'
-import { Query } from '@/api/webApi'
 
 const props = defineProps({
   international: {
@@ -99,36 +99,56 @@ watchEffect(() => {
   emit('formDataChange', formData)
 })
 
-const flightStatusOptions = ref<SelectOption[]>([])
-const flightWarningOptions = ref<SelectOption[]>([])
-const waybillTypeOptions = ref<SelectOption[]>([])
-const getSelectOptions = async (id: number) => {
-  try {
-    const {
-      code,
-      returnData: { listValues },
-      message,
-    }: SelectOptionQueryResult = await Query({
-      id,
-      dataContent: [],
-    })
-    if (Number(code) !== 0) {
-      throw new Error(message ?? '失败')
-    }
-    const options = listValues.map(({ k, v, setlabel, setvalue }) => ({
-      k,
-      v,
-      setlabel,
-      setvalue,
-      [setlabel]: k,
-      [setvalue]: v,
-    }))
-    return options
-  } catch (error) {
-    console.error(error)
-    return []
-  }
+const datePreTitle = (title: string) => {
+  return <div class="date-pre-title">{title}：</div>
 }
+
+const flightStatusOptions = ref([
+  {
+    label: '全部航班',
+    value: null,
+  },
+  {
+    label: '已起飞',
+    value: 'hasTakenOff',
+  },
+  {
+    label: '未起飞',
+    value: 'hasNotTakenOff',
+  },
+])
+const flightWarningOptions = ref([
+  {
+    label: '全部航班',
+    value: null,
+  },
+  {
+    label: '正常航班',
+    value: 'normal',
+  },
+  {
+    label: '预警航班',
+    value: 'warning',
+  },
+  {
+    label: '告警航班',
+    value: 'alarm',
+  },
+])
+const waybillTypeOptions = ref([
+  {
+    label: '全部运单',
+    value: null,
+  },
+  {
+    label: '国际货物',
+    value: 'normal',
+  },
+  {
+    label: '国际快件',
+    value: 'fast',
+  },
+])
 </script>
 
 <style scoped lang="scss">
@@ -143,10 +163,17 @@ const getSelectOptions = async (id: number) => {
       font-size: 14px;
       font-family: Helvetica, Microsoft YaHei;
       color: #303133;
-      &::-webkit-input-placeholder {
-        font-size: 14px;
-        font-family: Helvetica, Microsoft YaHei;
-        color: #303133;
+    }
+    .el-date-editor {
+      .el-input__prefix {
+        flex-basis: 28px;
+        padding: 0 8px;
+        .date-pre-title {
+          font-style: normal;
+          font-size: 14px;
+          font-family: Microsoft YaHei;
+          color: #303133;
+        }
       }
     }
   }

src/views/realTime/components/StationView/index.vue

@@ -43,7 +43,7 @@
                 :label="slot.column.title"
                 :filter-options="filterOptionMap[slot.column.columnName]"
                 :sortable="slot.column.needSort"
-                filter-style="underline"
+                filter-style="arrow"
               />
             </template>
             <template #cell="slot: CellSlotProps">
@@ -88,7 +88,7 @@ import useTableColumnSet from '../../hooks/useTableColumnSet'
 import useTableData from '../../hooks/useTableData'
 import useTableStyle from '../../hooks/useTableStyle'
 import useTableCellClick from '../../hooks/useTableCellClick'
-import useTableFilter from '../../hooks/useTableFilter'
+import useTableFilterAndSort from '../../hooks/useTableFilterAndSort'
 import { HeaderCellSlotProps } from 'element-plus'
 import { CommonData } from '~/common'
 
@@ -142,7 +142,7 @@ const {
   filterValueMap,
   tableDataSortRuleMap,
   dealedTableData,
-} = useTableFilter(tableColumns, tableData)
+} = useTableFilterAndSort(tableColumns, tableData)
 </script>
 <style lang="scss" scoped>
 @import '../../style/station.scss';

src/views/realTime/hooks/useTableData.ts

@@ -525,12 +525,20 @@ export default function useTableData(
   // onUnmounted(stopQuery)
 
   const computedWidth = (text: string) => {
-    let width: number = 0
+    let width = 0
     text.split('\n').forEach(line => {
-      if (width < (line.length + 2) * 50) {
-        width = (line.length + 2) * 50
+      const len = line.length
+      let realLength = 0
+      for (let i = 0; i < len; i++) {
+        realLength += line.charCodeAt(i) > 255 ? 2 : 1
+      }
+      if (width < (realLength + 2) * 10) {
+        width = (realLength + 2) * 10
       }
     })
+    if (['航班号', '目的站'].includes(text)) {
+      width += 10
+    }
     return width
   }
 

src/views/realTime/hooks/useTableFilter.ts → src/views/realTime/hooks/useTableFilterAndSort.ts

@@ -2,7 +2,7 @@ import { Ref } from 'vue'
 import _ from 'lodash'
 import { CommonData, CommonTableColumn } from '~/common'
 
-export default function useTableFilter(
+export default function useTableFilterAndSort(
   tableColumns: Ref<CommonTableColumn[]>,
   tableData: Ref<CommonData[]>
 ) {
@@ -30,8 +30,8 @@ export default function useTableFilter(
   })
 
   const filterOptionMap = reactive({})
-  const filterValueMap = reactive({})
-  const tableDataSortRuleMap = reactive({})
+  const filterValueMap = reactive<{ [x: string]: string[] }>({})
+  const tableDataSortRuleMap = reactive<{ [x: string]: string }>({})
   const dealedTableData = computed(() => {
     const filtered = tableData.value.filter(item => {
       let flag = true
@@ -43,11 +43,10 @@ export default function useTableFilter(
       return flag
     })
     const sortRules = Object.entries(tableDataSortRuleMap).reduce(
-      (pre, [key, value]) => {
+      (pre: [string[], ('asc' | 'desc')[]], [key, value]) => {
         if (value) {
           pre[0].push(key)
-          value = value === 'ascending' ? 'asc' : 'desc'
-          pre[1].push(value)
+          pre[1].push(value === 'ascending' ? 'asc' : 'desc')
         }
         return pre
       },

src/views/realTime/style/station.scss

@@ -1,7 +1,10 @@
 .station-view {
-  width: 100%;
+  width: calc(100% + calc(var(--app-main-padding) * 2) - 8px);
   height: 100%;
+  margin-left: calc(var(--app-main-padding) * -1 + 8px);
+  margin-right: calc(var(--app-main-padding) * -1);
   .station-header {
+    padding-right: 32px;
     display: flex;
     margin-bottom: 16px;
     .station-form {
@@ -36,7 +39,7 @@
       }
       .el-table-v2__header-cell-text,
       .el-table-v2__cell-text {
-        font-size: 14px;
+        font-size: 12px;
         font-family: Helvetica, Microsoft YaHei;
         font-weight: bold;
         color: #101116;