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

src/components/TableHeaderCell/index.vue

@@ -1,11 +1,21 @@
 <template>
-  <div class="table-header-cell el-table-v2__header-cell-text">
+  <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 === 'arrow'">
-      {{ label }}
+      <span style="flex: 1">{{ label }}</span>
     </template>
     <template v-if="filterable">
       <el-popover
-        :visible="visible"
+        :width="224"
+        trigger="click"
         class="table-header-cell-popover"
         placement="bottom"
         @show="expand = true"
@@ -13,30 +23,32 @@
       >
         <template v-if="filterStyle === 'underline'" #reference>
           <span
-            :class="['btn-filter', { 'btn-filter-active': active }]"
-            @click="visible = !visible"
+            :class="['filter-button', { 'filter-button-active': active }]"
             >{{ 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"
-          />
+          <div class="filter-arrow-wrapper">
+            <el-icon
+              :class="[
+                'filter-arrow',
+                { 'arrow-active': active, 'arrow-expand': expand },
+              ]"
+            >
+              <CaretBottom />
+            </el-icon>
+          </div>
         </template>
         <el-select
           v-model="selections"
-          size="small"
+          size="default"
           placeholder="筛选"
           multiple
           filterable
           default-first-option
           collapse-tags
           clearable
+          :teleported="false"
           @change="
             newVal => {
               $emit('update:filter-values', newVal)
@@ -53,9 +65,12 @@
       </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="sort-wrapper" @click="sortChange">
+        <el-icon class="sort">
+          <SortUp v-show="sortRule === 'ascending'" />
+          <SortDown v-show="sortRule === 'descending'" />
+          <Sort v-show="!sortRule" />
+        </el-icon>
       </span>
     </template>
   </div>
@@ -63,6 +78,7 @@
 
 <script setup lang="ts">
 import { PropType } from 'vue'
+import { CaretBottom, Sort, SortUp, SortDown } from '@element-plus/icons-vue'
 
 const props = defineProps({
   label: {
@@ -91,8 +107,6 @@ const props = defineProps({
 
 const emit = defineEmits(['update:sortRule'])
 
-const visible = ref(false)
-
 const selections = ref<string[]>([])
 const expand = ref(false)
 const active = computed(() => !!props.filterValues?.length)
@@ -111,51 +125,85 @@ 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;
+  position: relative;
+  &.table-header-cell-space-between {
+    justify-content: space-between;
   }
-
-  &.arrow-active {
-    color: #2d7cff;
-    font-weight: bold;
+  .filter-arrow-wrapper {
+    width: 14px;
+    height: 100%;
+    background-color: #dfc37f;
+    position: relative;
+    cursor: pointer;
+    .filter-arrow {
+      display: inline;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: auto;
+      transition: 0.3s transform;
+      &.arrow-expand {
+        transform: rotate(-180deg);
+      }
+      &.arrow-active {
+        color: #2d7cff;
+        font-weight: bold;
+      }
+    }
   }
-}
+  .filter-button {
+    flex: 1;
+    cursor: pointer;
+    position: relative;
 
-.btn-filter {
-  cursor: pointer;
-  position: relative;
+    &:hover {
+      color: #2d7cff;
+    }
 
-  &:hover {
-    color: #2d7cff;
-  }
+    &::after {
+      content: '';
+      display: block;
+      width: calc(100% + 4px);
+      position: absolute;
+      bottom: -4px;
+      left: -2px;
+      border-bottom: 1px solid #101116;
+    }
 
-  &::after {
-    content: '';
-    display: block;
-    width: calc(100% + 4px);
-    position: absolute;
-    bottom: -4px;
-    left: -2px;
-    border-bottom: 1px solid #101116;
+    &.filter-button-active,
+    &:hover {
+      &::after {
+        border-bottom: 2px solid #2d7cff;
+      }
+    }
   }
-
-  &.btn-filter-active,
-  &:hover {
-    &::after {
-      border-bottom: 2px solid #2d7cff;
+  .sort-wrapper {
+    width: 14px;
+    height: 100%;
+    background-color: #dfc37f;
+    position: relative;
+    cursor: pointer;
+    .sort {
+      display: inline;
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      margin: auto;
     }
   }
 }

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 += 20
+    }
     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;