添加elementUI 列表demo

package.json

@@ -26,9 +26,12 @@
   },
   "dependencies": {
     "dayjs": "^1.11.18",
+    "element-plus": "^2.11.5",
     "vant": "^4.9.21"
   },
   "devDependencies": {
-    "@vant/auto-import-resolver": "^1.3.0"
+    "@vant/auto-import-resolver": "^1.3.0",
+    "unplugin-auto-import": "^0.17.0",
+    "unplugin-vue-components": "^0.26.0"
   }
 }

packages/screen/src/main.js

@@ -3,10 +3,12 @@ import { createPinia } from 'pinia'
 import router from './router'
 import App from './App.vue'
 import './styles/index.scss'
+import ElementPlus from 'element-plus'
 
 const app = createApp(App)
 
 app.use(createPinia())
+app.use(ElementPlus)
 app.use(router)
 
 app.mount('#app')

packages/screen/src/router/index.js

@@ -1,3 +1,4 @@
+import component from 'element-plus/es/components/tree-select/src/tree-select-option.mjs'
 import { createRouter, createWebHistory } from 'vue-router'
 
 const routes = [
@@ -5,6 +6,11 @@ const routes = [
     path: '/',
     name: 'Home',
     component: () => import('../views/Home.vue')
+  },
+  {
+    path: '/test',
+    name: 'test',
+    component: () => import('../views/ServiceStationManagePage/index.vue')
   }
 ]
 

packages/screen/src/views/ServiceStationManagePage/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <el-table :data="tableData" style="width: 100%" stripe height="100%">
+    <el-table-column prop="county" label="区县" width="80" align="center" />
+    <el-table-column
+      prop="road_code"
+      label="路线编码"
+      width="80"
+      align="center"
+    />
+    <el-table-column
+      prop="mile_code"
+      label="里程桩号"
+      width="80"
+      align="center"
+    />
+    <el-table-column
+      prop="level"
+      label="行政等级(仅划分:国道、省道、农村公路三类)"
+      width="180"
+      align="center"
+    />
+    <el-table-column
+      prop="monthly_traffic"
+      label="机动车月交通流量"
+      align="center"
+    />
+    <el-table-column prop="tec_level" label="技术等级" align="center" />
+    <el-table-column prop="name" label="服务保障点具体名称" align="center" />
+    <el-table-column prop="type" label="类型" align="center" />
+    <el-table-column
+      prop="service_station_address"
+      label="产权隶属单位（仅划分:交通公路部门含下属单位、其他部门或单位两类）"
+      width="180"
+      align="center"
+    />
+    <el-table-column label="操作" fixed="right" align="center">
+      <template #default="scope">
+        <el-button size="small" @click="console.log(scope.row)">
+          详情
+        </el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+  
+<script lang="ts" setup>
+const tableData = [
+  {
+    county: "潼南",
+    road_code: "G319线",
+    mile_code: "2654+000",
+    level: "国道",
+    monthly_traffic: "5625",
+    tec_level: "二级",
+    name: "三汇停车区",
+    service_station_address: "交通公路部门",
+  },
+  {
+    county: "潼南",
+    road_code: "G319线",
+    mile_code: "2654+000",
+    level: "国道",
+    monthly_traffic: "5625",
+    tec_level: "二级",
+    name: "三汇停车区",
+    service_station_address: "交通公路部门",
+  },
+  {
+    county: "潼南",
+    road_code: "G319线",
+    mile_code: "2654+000",
+    level: "国道",
+    monthly_traffic: "5625",
+    tec_level: "二级",
+    name: "三汇停车区",
+    service_station_address: "交通公路部门",
+  },
+  {
+    county: "潼南",
+    road_code: "G319线",
+    mile_code: "2654+000",
+    level: "国道",
+    monthly_traffic: "5625",
+    tec_level: "二级",
+    name: "三汇停车区",
+    service_station_address: "交通公路部门",
+  },
+  {
+    county: "潼南",
+    road_code: "G319线",
+    mile_code: "2654+000",
+    level: "国道",
+    monthly_traffic: "5625",
+    tec_level: "二级",
+    name: "三汇停车区",
+    service_station_address: "交通公路部门",
+  },
+  {
+    county: "潼南",
+    road_code: "G319线",
+    mile_code: "2654+000",
+    level: "国道",
+    monthly_traffic: "5625",
+    tec_level: "二级",
+    name: "三汇停车区",
+    service_station_address: "交通公路部门",
+  },
+  {
+    county: "潼南",
+    road_code: "G319线",
+    mile_code: "2654+000",
+    level: "国道",
+    monthly_traffic: "5625",
+    tec_level: "二级",
+    name: "三汇停车区",
+    service_station_address: "交通公路部门",
+  },
+  {
+    county: "潼南",
+    road_code: "G319线",
+    mile_code: "2654+000",
+    level: "国道",
+    monthly_traffic: "5625",
+    tec_level: "二级",
+    name: "三汇停车区",
+    service_station_address: "交通公路部门",
+  },
+  {
+    county: "潼南",
+    road_code: "G319线",
+    mile_code: "2654+000",
+    level: "国道",
+    monthly_traffic: "5625",
+    tec_level: "二级",
+    name: "三汇停车区",
+    service_station_address: "交通公路部门",
+  },
+  {
+    county: "潼南",
+    road_code: "G319线",
+    mile_code: "2654+000",
+    level: "国道",
+    monthly_traffic: "5625",
+    tec_level: "二级",
+    name: "三汇停车区",
+    service_station_address: "交通公路部门",
+  },
+];
+</script>
+  
+  <style lang="scss" scoped>
+</style>
+  

packages/screen/vite.config.js

@@ -1,9 +1,20 @@
 import { defineConfig } from 'vite'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 import vue from '@vitejs/plugin-vue'
 import { resolve } from 'path'
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+  ],
   resolve: {
     alias: {
       '@': resolve(__dirname, 'src'),

pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       dayjs:
         specifier: ^1.11.18
         version: 1.11.18
+      element-plus:
+        specifier: ^2.11.5
+        version: 2.11.5(vue@3.5.22)
       vant:
         specifier: ^4.9.21
         version: 4.9.21(vue@3.5.22)
@@ -18,6 +21,12 @@ importers:
       '@vant/auto-import-resolver':
         specifier: ^1.3.0
         version: 1.3.0
+      unplugin-auto-import:
+        specifier: ^0.17.0
+        version: 0.17.8(@vueuse/core@9.13.0(vue@3.5.22))(rollup@4.52.4)
+      unplugin-vue-components:
+        specifier: ^0.26.0
+        version: 0.26.0(@babel/parser@7.28.4)(rollup@4.52.4)(vue@3.5.22)
 
   packages/mobile:
     dependencies:
@@ -45,7 +54,7 @@ importers:
         version: 1.93.2
       unplugin-auto-import:
         specifier: ^0.17.0
-        version: 0.17.8(rollup@4.52.4)
+        version: 0.17.8(@vueuse/core@9.13.0(vue@3.5.22))(rollup@4.52.4)
       unplugin-vue-components:
         specifier: ^0.26.0
         version: 0.26.0(@babel/parser@7.28.4)(rollup@4.52.4)(vue@3.5.22)
@@ -112,6 +121,15 @@ packages:
     resolution: {integrity: sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==}
     engines: {node: '>=6.9.0'}
 
+  '@ctrl/tinycolor@3.6.1':
+    resolution: {integrity: sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==}
+    engines: {node: '>=10'}
+
+  '@element-plus/icons-vue@2.3.2':
+    resolution: {integrity: sha512-OzIuTaIfC8QXEPmJvB4Y4kw34rSXdCJzxcD1kFStBvr8bK6X1zQAYDo0CNMjojnfTqRQCJ0I7prlErcoRiET2A==}
+    peerDependencies:
+      vue: ^3.2.0
+
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -250,6 +268,15 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@floating-ui/core@1.7.3':
+    resolution: {integrity: sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==}
+
+  '@floating-ui/dom@1.7.4':
+    resolution: {integrity: sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==}
+
+  '@floating-ui/utils@0.2.10':
+    resolution: {integrity: sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==}
+
   '@jridgewell/gen-mapping@0.3.13':
     resolution: {integrity: sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==}
 
@@ -479,9 +506,21 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@sxzz/popperjs-es@2.11.7':
+    resolution: {integrity: sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==}
+
   '@types/estree@1.0.8':
     resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
 
+  '@types/lodash-es@4.17.12':
+    resolution: {integrity: sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==}
+
+  '@types/lodash@4.17.20':
+    resolution: {integrity: sha512-H3MHACvFUEiujabxhaI/ImO6gUrd8oOurg7LQtS7mbwIXA/cUqWrvBsaeJ23aZEPk1TAYkurjfMbSELfoCXlGA==}
+
+  '@types/web-bluetooth@0.0.16':
+    resolution: {integrity: sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==}
+
   '@vant/auto-import-resolver@1.3.0':
     resolution: {integrity: sha512-lJyWtCyFizR4bHZvMiNMF3w+WTFTUWAvka1eqTnPK9ticUcKTCOx6qEmHcm8JPb3g1t3GaD2W3MnHkBp/nHamw==}
 
@@ -532,6 +571,15 @@ packages:
   '@vue/shared@3.5.22':
     resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
 
+  '@vueuse/core@9.13.0':
+    resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
+
+  '@vueuse/metadata@9.13.0':
+    resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
+
+  '@vueuse/shared@9.13.0':
+    resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
+
   acorn@8.15.0:
     resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
     engines: {node: '>=0.4.0'}
@@ -541,6 +589,9 @@ packages:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
 
+  async-validator@4.2.5:
+    resolution: {integrity: sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==}
+
   asynckit@0.4.0:
     resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==}
 
@@ -620,6 +671,11 @@ packages:
   echarts@5.6.0:
     resolution: {integrity: sha512-oTbVTsXfKuEhxftHqL5xprgLoc0k7uScAwtryCgWF6hPYFLRwOUHiFmHGCBKP5NPFNkDVopOieyUqYGH8Fa3kA==}
 
+  element-plus@2.11.5:
+    resolution: {integrity: sha512-O+bIVHQCjUDm4GiIznDXRoS8ar2TpWLwfOGnN/Aam0VXf5kbuc4SxdKKJdovWNxmxeqbcwjsSZPKgtXNcqys4A==}
+    peerDependencies:
+      vue: ^3.2.0
+
   entities@4.5.0:
     resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
     engines: {node: '>=0.12'}
@@ -756,6 +812,19 @@ packages:
     resolution: {integrity: sha512-arhlxbFRmoQHl33a0Zkle/YWlmNwoyt6QNZEIJcqNbdrsix5Lvc4HyyI3EnwxTYlZYc32EbYrQ8SzEZ7dqgg9A==}
     engines: {node: '>=14'}
 
+  lodash-es@4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+
+  lodash-unified@1.0.3:
+    resolution: {integrity: sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==}
+    peerDependencies:
+      '@types/lodash-es': '*'
+      lodash: '*'
+      lodash-es: '*'
+
+  lodash@4.17.21:
+    resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
+
   magic-string@0.30.19:
     resolution: {integrity: sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==}
 
@@ -763,6 +832,9 @@ packages:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
 
+  memoize-one@6.0.0:
+    resolution: {integrity: sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==}
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -801,6 +873,9 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
+  normalize-wheel-es@1.2.0:
+    resolution: {integrity: sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==}
+
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
@@ -1054,6 +1129,12 @@ snapshots:
       '@babel/helper-string-parser': 7.27.1
       '@babel/helper-validator-identifier': 7.27.1
 
+  '@ctrl/tinycolor@3.6.1': {}
+
+  '@element-plus/icons-vue@2.3.2(vue@3.5.22)':
+    dependencies:
+      vue: 3.5.22
+
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -1123,6 +1204,17 @@ snapshots:
   '@esbuild/win32-x64@0.21.5':
     optional: true
 
+  '@floating-ui/core@1.7.3':
+    dependencies:
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/dom@1.7.4':
+    dependencies:
+      '@floating-ui/core': 1.7.3
+      '@floating-ui/utils': 0.2.10
+
+  '@floating-ui/utils@0.2.10': {}
+
   '@jridgewell/gen-mapping@0.3.13':
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
@@ -1293,8 +1385,18 @@ snapshots:
   '@rollup/rollup-win32-x64-msvc@4.52.4':
     optional: true
 
+  '@sxzz/popperjs-es@2.11.7': {}
+
   '@types/estree@1.0.8': {}
 
+  '@types/lodash-es@4.17.12':
+    dependencies:
+      '@types/lodash': 4.17.20
+
+  '@types/lodash@4.17.20': {}
+
+  '@types/web-bluetooth@0.0.16': {}
+
   '@vant/auto-import-resolver@1.3.0': {}
 
   '@vant/popperjs@1.3.0': {}
@@ -1364,6 +1466,25 @@ snapshots:
 
   '@vue/shared@3.5.22': {}
 
+  '@vueuse/core@9.13.0(vue@3.5.22)':
+    dependencies:
+      '@types/web-bluetooth': 0.0.16
+      '@vueuse/metadata': 9.13.0
+      '@vueuse/shared': 9.13.0(vue@3.5.22)
+      vue-demi: 0.14.10(vue@3.5.22)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
+  '@vueuse/metadata@9.13.0': {}
+
+  '@vueuse/shared@9.13.0(vue@3.5.22)':
+    dependencies:
+      vue-demi: 0.14.10(vue@3.5.22)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   acorn@8.15.0: {}
 
   anymatch@3.1.3:
@@ -1371,6 +1492,8 @@ snapshots:
       normalize-path: 3.0.0
       picomatch: 2.3.1
 
+  async-validator@4.2.5: {}
+
   asynckit@0.4.0: {}
 
   axios@1.12.2:
@@ -1452,6 +1575,26 @@ snapshots:
       tslib: 2.3.0
       zrender: 5.6.1
 
+  element-plus@2.11.5(vue@3.5.22):
+    dependencies:
+      '@ctrl/tinycolor': 3.6.1
+      '@element-plus/icons-vue': 2.3.2(vue@3.5.22)
+      '@floating-ui/dom': 1.7.4
+      '@popperjs/core': '@sxzz/popperjs-es@2.11.7'
+      '@types/lodash': 4.17.20
+      '@types/lodash-es': 4.17.12
+      '@vueuse/core': 9.13.0(vue@3.5.22)
+      async-validator: 4.2.5
+      dayjs: 1.11.18
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+      lodash-unified: 1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21)
+      memoize-one: 6.0.0
+      normalize-wheel-es: 1.2.0
+      vue: 3.5.22
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   entities@4.5.0: {}
 
   es-define-property@1.0.1: {}
@@ -1603,12 +1746,24 @@ snapshots:
       pkg-types: 2.3.0
       quansync: 0.2.11
 
+  lodash-es@4.17.21: {}
+
+  lodash-unified@1.0.3(@types/lodash-es@4.17.12)(lodash-es@4.17.21)(lodash@4.17.21):
+    dependencies:
+      '@types/lodash-es': 4.17.12
+      lodash: 4.17.21
+      lodash-es: 4.17.21
+
+  lodash@4.17.21: {}
+
   magic-string@0.30.19:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.5
 
   math-intrinsics@1.1.0: {}
 
+  memoize-one@6.0.0: {}
+
   merge2@1.4.1: {}
 
   micromatch@4.0.8:
@@ -1642,6 +1797,8 @@ snapshots:
 
   normalize-path@3.0.0: {}
 
+  normalize-wheel-es@1.2.0: {}
+
   path-parse@1.0.7: {}
 
   pathe@2.0.3: {}
@@ -1794,7 +1951,7 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  unplugin-auto-import@0.17.8(rollup@4.52.4):
+  unplugin-auto-import@0.17.8(@vueuse/core@9.13.0(vue@3.5.22))(rollup@4.52.4):
     dependencies:
       '@antfu/utils': 0.7.10
       '@rollup/pluginutils': 5.3.0(rollup@4.52.4)
@@ -1804,6 +1961,8 @@ snapshots:
       minimatch: 9.0.5
       unimport: 3.14.6(rollup@4.52.4)
       unplugin: 1.16.1
+    optionalDependencies:
+      '@vueuse/core': 9.13.0(vue@3.5.22)
     transitivePeerDependencies:
       - rollup