feat：完善功能

2024-12-27 18:06:19 +08:00
parent f906515858
commit cb35986d1a
6 changed files with 50 additions and 255 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,8 +13,8 @@
        "echarts-wordcloud": "^2.0.0",
        "element-plus": "^2.9.0",
        "flv.js": "^1.6.2",
+        "hls.js": "^1.5.18",
        "pinia": "^2.2.6",
-        "qs": "^6.13.1",
        "vue": "^3.5.13",
        "vue-countup-v3": "^1.4.2",
        "vue-echarts": "^7.0.3",
@@ -1438,33 +1438,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/call-bind-apply-helpers": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.1.tgz",
-      "integrity": "sha512-BhYE+WDaywFg2TBWYNXAE+8B1ATnThNBqXHP5nQu0jWJdVvY2hvkpyB3qOmtmDePiS5/BDQ8wASEWGMWRG148g==",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/call-bound": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmmirror.com/call-bound/-/call-bound-1.0.3.tgz",
-      "integrity": "sha512-YTd+6wGlNlPxSuri7Y6X8tY2dmm12UMH66RpKMhiX6rsk5wXXnYgbUcOt8kiS31/AjfoTOvCsE+w8nZQLQnzHA==",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "get-intrinsic": "^1.2.6"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/caniuse-lite": {
      "version": "1.0.30001685",
      "resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001685.tgz",
@@ -1677,19 +1650,6 @@
        "node": ">=0.10"
      }
    },
-    "node_modules/dunder-proto": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/dunder-proto/-/dunder-proto-1.0.1.tgz",
-      "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "gopd": "^1.2.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
    "node_modules/echarts": {
      "version": "5.5.1",
      "resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
@@ -1781,22 +1741,6 @@
        "url": "https://github.com/sponsors/antfu"
      }
    },
-    "node_modules/es-define-property": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/es-define-property/-/es-define-property-1.0.1.tgz",
-      "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/es-errors": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmmirror.com/es-errors/-/es-errors-1.3.0.tgz",
-      "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
    "node_modules/es-module-lexer": {
      "version": "1.5.4",
      "resolved": "https://registry.npmmirror.com/es-module-lexer/-/es-module-lexer-1.5.4.tgz",
@@ -1804,17 +1748,6 @@
      "dev": true,
      "peer": true
    },
-    "node_modules/es-object-atoms": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/es-object-atoms/-/es-object-atoms-1.0.0.tgz",
-      "integrity": "sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==",
-      "dependencies": {
-        "es-errors": "^1.3.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
    "node_modules/es6-promise": {
      "version": "4.2.8",
      "resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
@@ -2108,14 +2041,6 @@
        "node": ">=14.14"
      }
    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmmirror.com/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/gensync": {
      "version": "1.0.0-beta.2",
      "resolved": "https://registry.npmmirror.com/gensync/-/gensync-1.0.0-beta.2.tgz",
@@ -2125,29 +2050,6 @@
        "node": ">=6.9.0"
      }
    },
-    "node_modules/get-intrinsic": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmmirror.com/get-intrinsic/-/get-intrinsic-1.2.6.tgz",
-      "integrity": "sha512-qxsEs+9A+u85HhllWJJFicJfPDhRmjzoYdl64aMWW9yRIJmSyxdn8IEkuIM530/7T+lv0TIHd8L6Q/ra0tEoeA==",
-      "dependencies": {
-        "call-bind-apply-helpers": "^1.0.1",
-        "dunder-proto": "^1.0.0",
-        "es-define-property": "^1.0.1",
-        "es-errors": "^1.3.0",
-        "es-object-atoms": "^1.0.0",
-        "function-bind": "^1.1.2",
-        "gopd": "^1.2.0",
-        "has-symbols": "^1.1.0",
-        "hasown": "^2.0.2",
-        "math-intrinsics": "^1.0.0"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/get-stream": {
      "version": "9.0.1",
      "resolved": "https://registry.npmmirror.com/get-stream/-/get-stream-9.0.1.tgz",
@@ -2192,17 +2094,6 @@
        "node": ">=4"
      }
    },
-    "node_modules/gopd": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz",
-      "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/graceful-fs": {
      "version": "4.2.11",
      "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -2219,27 +2110,10 @@
        "node": ">=8"
      }
    },
-    "node_modules/has-symbols": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/has-symbols/-/has-symbols-1.1.0.tgz",
-      "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmmirror.com/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
+    "node_modules/hls.js": {
+      "version": "1.5.18",
+      "resolved": "https://registry.npmmirror.com/hls.js/-/hls.js-1.5.18.tgz",
+      "integrity": "sha512-znxR+2jecWluu/0KOBqUcvVyAB5tLff10vjMGrpAlz1eFY+ZhF1bY3r82V+Bk7WJdk03iTjtja9KFFz5BrqjSA=="
    },
    "node_modules/hookable": {
      "version": "5.5.3",
@@ -2613,14 +2487,6 @@
        "@jridgewell/sourcemap-codec": "^1.5.0"
      }
    },
-    "node_modules/math-intrinsics": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
-      "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
    "node_modules/memoize-one": {
      "version": "6.0.0",
      "resolved": "https://registry.npmmirror.com/memoize-one/-/memoize-one-6.0.0.tgz",
@@ -2821,17 +2687,6 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
-    "node_modules/object-inspect": {
-      "version": "1.13.3",
-      "resolved": "https://registry.npmmirror.com/object-inspect/-/object-inspect-1.13.3.tgz",
-      "integrity": "sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==",
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/open": {
      "version": "10.1.0",
      "resolved": "https://registry.npmmirror.com/open/-/open-10.1.0.tgz",
@@ -3017,20 +2872,6 @@
        "node": ">=6"
      }
    },
-    "node_modules/qs": {
-      "version": "6.13.1",
-      "resolved": "https://registry.npmmirror.com/qs/-/qs-6.13.1.tgz",
-      "integrity": "sha512-EJPeIn0CYrGu+hli1xilKAPXODtJ12T0sP63Ijx2/khC2JtuaN3JyNIpvmnkmaEtha9ocbG4A4cMcr+TvqvwQg==",
-      "dependencies": {
-        "side-channel": "^1.0.6"
-      },
-      "engines": {
-        "node": ">=0.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmmirror.com/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -3316,74 +3157,6 @@
        "node": ">=8"
      }
    },
-    "node_modules/side-channel": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmmirror.com/side-channel/-/side-channel-1.1.0.tgz",
-      "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3",
-        "side-channel-list": "^1.0.0",
-        "side-channel-map": "^1.0.1",
-        "side-channel-weakmap": "^1.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-list": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/side-channel-list/-/side-channel-list-1.0.0.tgz",
-      "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
-      "dependencies": {
-        "es-errors": "^1.3.0",
-        "object-inspect": "^1.13.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-map": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmmirror.com/side-channel-map/-/side-channel-map-1.0.1.tgz",
-      "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/side-channel-weakmap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
-      "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
-      "dependencies": {
-        "call-bound": "^1.0.2",
-        "es-errors": "^1.3.0",
-        "get-intrinsic": "^1.2.5",
-        "object-inspect": "^1.13.3",
-        "side-channel-map": "^1.0.1"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
    "node_modules/signal-exit": {
      "version": "4.1.0",
      "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-4.1.0.tgz",
--- a/package.json
+++ b/package.json
@@ -14,8 +14,8 @@
    "echarts-wordcloud": "^2.0.0",
    "element-plus": "^2.9.0",
    "flv.js": "^1.6.2",
+    "hls.js": "^1.5.18",
    "pinia": "^2.2.6",
-    "qs": "^6.13.1",
    "vue": "^3.5.13",
    "vue-countup-v3": "^1.4.2",
    "vue-echarts": "^7.0.3",
--- a/src/api/home.js
+++ b/src/api/home.js
@@ -7,3 +7,12 @@ export function getWeatherApi() {
    method: 'get'
  })
 }
+
+// 核心景区视频
+export function getVideoListApi(data) {
+  return request({
+    url: '/api/video/list',
+    method: 'get',
+    params: data
+  })
+}
--- a/src/api/request.js
+++ b/src/api/request.js
@@ -106,19 +106,7 @@ const instance = axios.create({
 */
 instance.interceptors.request.use(
  (config) => {
-    // 规范写法 不可随意自定义
-    let urlParams = {}
-    if (config.params) {
-      urlParams = {
-        ...config.params
-      }
-    }
-
-    config.url = config.url + '?' + qs.stringify(urlParams)
-    if (
-      config.data &&
-      config.headers['Content-Type'] === 'application/x-www-form-urlencoded;charset=UTF-8'
-    )
+    if (config.data && config.headers['Content-Type'] === 'application/json";charset=UTF-8')
      config.data = qs.stringify(config.data)
    return config
  },
--- a/src/components/CoreVideo/index.vue
+++ b/src/components/CoreVideo/index.vue
@@ -1,7 +1,8 @@
 <template>
  <div class="core-video">
    <div class="title">核心景区视频</div>
-    <ul class="list" v-loading="loading">
+
+    <ul class="list">
      <li
        class="item"
        :style="{ backgroundImage: `url(${index == 0 ? primary : error})` }"
@@ -12,7 +13,17 @@
          <p :class="[index % 2 === 0 ? 'item-title--primary' : 'item-title--error']">
            三峡之巅-最新异常名称三峡之巅-最新异常名称三峡之巅-最新异常名称
          </p>
-          <img class="item-img" src="@/assets/images/cover.png" />
+          <!-- <img class="item-img" src="@/assets/images/cover.png" /> -->
+          <video
+            class="item-img"
+            :ref="(el) => getRefs(el, index)"
+            muted
+            autoplay
+            controls
+            style="object-fit: fill"
+          >
+            <source src="" type="application/x-mpegURL" />
+          </video>
        </div>
      </li>
    </ul>
@@ -22,13 +33,28 @@
 <script setup>
  import primary from '@/assets/images/item-primary.png'
  import error from '@/assets/images/item-error.png'
-  let loading = ref(true)
-  let list = ref(0)
+  import { getVideoListApi } from '@/api/home'
+  import Hls from 'hls.js'
+
+  let list = ref(2)
+
+  const getRefs = (el) => {
+    if (el) {
+      const hls = new Hls()
+      hls.loadSource('https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8')
+      hls.attachMedia(el)
+      hls.on(Hls.Events.MANIFEST_PARSED, () => {
+        el.play()
+      })
+    }
+  }
+  const getVideoList = async () => {
+    let res = await getVideoListApi({
+      businessVideoDisplayPosition: ''
+    })
+  }
  onMounted(() => {
-    setTimeout(() => {
-      loading.value = false
-      list.value = 10
-    }, 2000)
+    getVideoList()
  })
 </script>

--- a/src/components/Header/index.vue
+++ b/src/components/Header/index.vue
@@ -50,7 +50,6 @@
  const emit = defineEmits(['change'])

  const router = useRouter()
-  const currentRoute = router.currentRoute.value

  let currentDate = ref('')
  let weatherData = ref({})