Etusivu Tutki Apua
Rekisteröidy Kirjaudu sisään
hs
/
JtjAi
7
0
Fork 0
Tiedostot Ongelmat 0 Pull-pyynnöt 0 Wiki
Selaa lähdekoodia

fix 问题

luogang 2 kuukautta sitten
vanhempi
684c89c38a
commit
c677a9bc5f
8 muutettua tiedostoa jossa 329 lisäystä ja 244 poistoa
Yhdistetty näkymä Näytä diff tilastot
  1. 1 1
      plus-ui-ts/.env.development
  2. 210 207
      plus-ui-ts/index.html
  3. 3 2
      plus-ui-ts/package.json
  4. 20 0
      plus-ui-ts/src/api/system/device/index.ts
  5. 0 2
      plus-ui-ts/src/api/system/event/index.ts
  6. 8 8
      plus-ui-ts/src/views/device/deviceList/index.vue
  7. 76 20
      plus-ui-ts/src/views/index.vue
  8. 11 4
      plus-ui-ts/vite.config.ts

+ 1 - 1
plus-ui-ts/.env.development
Näytä tiedosto 

@@ -35,4 +35,4 @@ VITE_APP_WEBSOCKET = false
 
 VITE_APP_SSE = true
 
 VITE_APP_SSE = true
 
 
 
 # 服务器地址 用于文件
 
 # 服务器地址 用于文件
 
-VITE_APP_BASE_HOST = 'http://localhost:8081'
 
+VITE_APP_BASE_HOST = 'http://jtjai.xt.wenhq.top:8083'

+ 210 - 207
plus-ui-ts/index.html
Näytä tiedosto 

@@ -1,215 +1,218 @@
 
 <!doctype html>
 
 <!doctype html>
 
 <html>
 
 <html>
 
-  <head>
 
-    <meta charset="utf-8" />
 
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
-    <meta name="renderer" content="webkit" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 
-    <link rel="icon" href="/favicon.ico" />
 
-    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=KumIikHq4H2BQnbRrxMktUaS4peySWGD"></script>
 
-    <title>交通事件管理系统</title>
 
-    <!--[if lt IE 11
 
+
 
+<head>
 
+  <meta charset="utf-8" />
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
+  <meta name="renderer" content="webkit" />
 
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
 
+  <link rel="icon" href="/favicon.ico" />
 
+  <script type="text/javascript"
 
+    src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=KumIikHq4H2BQnbRrxMktUaS4peySWGD"></script>
 
+  <title>交通事件管理系统</title>
 
+  <!--[if lt IE 11
 
       ]><script>
 
       ]><script>
 
         window.location.href = '/html/ie.html';
 
         window.location.href = '/html/ie.html';
 
       </script><!
 
       </script><!
 
     [endif]-->
 
     [endif]-->
 
-    <style>
 
-      html,
 
-      body,
 
-      #app {
 
-        height: 100%;
 
-        margin: 0px;
 
-        padding: 0px;
 
-      }
 
-
 
-      .chromeframe {
 
-        margin: 0.2em 0;
 
-        background: #ccc;
 
-        color: #000;
 
-        padding: 0.2em 0;
 
-      }
 
-
 
-      #loader-wrapper {
 
-        position: fixed;
 
-        top: 0;
 
-        left: 0;
 
-        width: 100%;
 
-        height: 100%;
 
-        z-index: 999999;
 
-      }
 
-
 
-      #loader {
 
-        display: block;
 
-        position: relative;
 
-        left: 50%;
 
-        top: 50%;
 
-        width: 150px;
 
-        height: 150px;
 
-        margin: -75px 0 0 -75px;
 
-        border-radius: 50%;
 
-        border: 3px solid transparent;
 
-        border-top-color: #fff;
 
-        -webkit-animation: spin 2s linear infinite;
 
-        -ms-animation: spin 2s linear infinite;
 
-        -moz-animation: spin 2s linear infinite;
 
-        -o-animation: spin 2s linear infinite;
 
-        animation: spin 2s linear infinite;
 
-        z-index: 1001;
 
-      }
 
-
 
-      #loader:before {
 
-        content: '';
 
-        position: absolute;
 
-        top: 5px;
 
-        left: 5px;
 
-        right: 5px;
 
-        bottom: 5px;
 
-        border-radius: 50%;
 
-        border: 3px solid transparent;
 
-        border-top-color: #fff;
 
-        -webkit-animation: spin 3s linear infinite;
 
-        -moz-animation: spin 3s linear infinite;
 
-        -o-animation: spin 3s linear infinite;
 
-        -ms-animation: spin 3s linear infinite;
 
-        animation: spin 3s linear infinite;
 
-      }
 
-
 
-      #loader:after {
 
-        content: '';
 
-        position: absolute;
 
-        top: 15px;
 
-        left: 15px;
 
-        right: 15px;
 
-        bottom: 15px;
 
-        border-radius: 50%;
 
-        border: 3px solid transparent;
 
-        border-top-color: #fff;
 
-        -moz-animation: spin 1.5s linear infinite;
 
-        -o-animation: spin 1.5s linear infinite;
 
-        -ms-animation: spin 1.5s linear infinite;
 
-        -webkit-animation: spin 1.5s linear infinite;
 
-        animation: spin 1.5s linear infinite;
 
-      }
 
-
 
-      @-webkit-keyframes spin {
 
-        0% {
 
-          -webkit-transform: rotate(0deg);
 
-          -ms-transform: rotate(0deg);
 
-          transform: rotate(0deg);
 
-        }
 
-
 
-        100% {
 
-          -webkit-transform: rotate(360deg);
 
-          -ms-transform: rotate(360deg);
 
-          transform: rotate(360deg);
 
-        }
 
-      }
 
-
 
-      @keyframes spin {
 
-        0% {
 
-          -webkit-transform: rotate(0deg);
 
-          -ms-transform: rotate(0deg);
 
-          transform: rotate(0deg);
 
-        }
 
-
 
-        100% {
 
-          -webkit-transform: rotate(360deg);
 
-          -ms-transform: rotate(360deg);
 
-          transform: rotate(360deg);
 
-        }
 
-      }
 
-
 
-      #loader-wrapper .loader-section {
 
-        position: fixed;
 
-        top: 0;
 
-        width: 51%;
 
-        height: 100%;
 
-        background: #7171c6;
 
-        z-index: 1000;
 
-        -webkit-transform: translateX(0);
 
-        -ms-transform: translateX(0);
 
-        transform: translateX(0);
 
-      }
 
-
 
-      #loader-wrapper .loader-section.section-left {
 
-        left: 0;
 
-      }
 
-
 
-      #loader-wrapper .loader-section.section-right {
 
-        right: 0;
 
-      }
 
-
 
-      .loaded #loader-wrapper .loader-section.section-left {
 
-        -webkit-transform: translateX(-100%);
 
-        -ms-transform: translateX(-100%);
 
-        transform: translateX(-100%);
 
-        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
-        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
-      }
 
-
 
-      .loaded #loader-wrapper .loader-section.section-right {
 
-        -webkit-transform: translateX(100%);
 
-        -ms-transform: translateX(100%);
 
-        transform: translateX(100%);
 
-        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
-        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
-      }
 
-
 
-      .loaded #loader {
 
-        opacity: 0;
 
-        -webkit-transition: all 0.3s ease-out;
 
-        transition: all 0.3s ease-out;
 
-      }
 
-
 
-      .loaded #loader-wrapper {
 
-        visibility: hidden;
 
-        -webkit-transform: translateY(-100%);
 
-        -ms-transform: translateY(-100%);
 
-        transform: translateY(-100%);
 
-        -webkit-transition: all 0.3s 1s ease-out;
 
-        transition: all 0.3s 1s ease-out;
 
-      }
 
-
 
-      .no-js #loader-wrapper {
 
-        display: none;
 
-      }
 
-
 
-      .no-js h1 {
 
-        color: #222222;
 
-      }
 
-
 
-      #loader-wrapper .load_title {
 
-        font-family: 'Open Sans';
 
-        color: #fff;
 
-        font-size: 19px;
 
-        width: 100%;
 
-        text-align: center;
 
-        z-index: 9999999999999;
 
-        position: absolute;
 
-        top: 60%;
 
-        opacity: 1;
 
-        line-height: 30px;
 
-      }
 
-
 
-      #loader-wrapper .load_title span {
 
-        font-weight: normal;
 
-        font-style: italic;
 
-        font-size: 13px;
 
-        color: #fff;
 
-        opacity: 0.5;
 
-      }
 
-    </style>
 
-  </head>
 
-
 
-  <body>
 
-    <div id="app">
 
-      <div id="loader-wrapper">
 
-        <div id="loader"></div>
 
-        <div class="loader-section section-left"></div>
 
-        <div class="loader-section section-right"></div>
 
-        <div class="load_title">正在加载系统资源，请耐心等待</div>
 
-      </div>
 
+  <style>
 
+    html,
 
+    body,
 
+    #app {
 
+      height: 100%;
 
+      margin: 0px;
 
+      padding: 0px;
 
+    }
 
+
 
+    .chromeframe {
 
+      margin: 0.2em 0;
 
+      background: #ccc;
 
+      color: #000;
 
+      padding: 0.2em 0;
 
+    }
 
+
 
+    #loader-wrapper {
 
+      position: fixed;
 
+      top: 0;
 
+      left: 0;
 
+      width: 100%;
 
+      height: 100%;
 
+      z-index: 999999;
 
+    }
 
+
 
+    #loader {
 
+      display: block;
 
+      position: relative;
 
+      left: 50%;
 
+      top: 50%;
 
+      width: 150px;
 
+      height: 150px;
 
+      margin: -75px 0 0 -75px;
 
+      border-radius: 50%;
 
+      border: 3px solid transparent;
 
+      border-top-color: #fff;
 
+      -webkit-animation: spin 2s linear infinite;
 
+      -ms-animation: spin 2s linear infinite;
 
+      -moz-animation: spin 2s linear infinite;
 
+      -o-animation: spin 2s linear infinite;
 
+      animation: spin 2s linear infinite;
 
+      z-index: 1001;
 
+    }
 
+
 
+    #loader:before {
 
+      content: '';
 
+      position: absolute;
 
+      top: 5px;
 
+      left: 5px;
 
+      right: 5px;
 
+      bottom: 5px;
 
+      border-radius: 50%;
 
+      border: 3px solid transparent;
 
+      border-top-color: #fff;
 
+      -webkit-animation: spin 3s linear infinite;
 
+      -moz-animation: spin 3s linear infinite;
 
+      -o-animation: spin 3s linear infinite;
 
+      -ms-animation: spin 3s linear infinite;
 
+      animation: spin 3s linear infinite;
 
+    }
 
+
 
+    #loader:after {
 
+      content: '';
 
+      position: absolute;
 
+      top: 15px;
 
+      left: 15px;
 
+      right: 15px;
 
+      bottom: 15px;
 
+      border-radius: 50%;
 
+      border: 3px solid transparent;
 
+      border-top-color: #fff;
 
+      -moz-animation: spin 1.5s linear infinite;
 
+      -o-animation: spin 1.5s linear infinite;
 
+      -ms-animation: spin 1.5s linear infinite;
 
+      -webkit-animation: spin 1.5s linear infinite;
 
+      animation: spin 1.5s linear infinite;
 
+    }
 
+
 
+    @-webkit-keyframes spin {
 
+      0% {
 
+        -webkit-transform: rotate(0deg);
 
+        -ms-transform: rotate(0deg);
 
+        transform: rotate(0deg);
 
+      }
 
+
 
+      100% {
 
+        -webkit-transform: rotate(360deg);
 
+        -ms-transform: rotate(360deg);
 
+        transform: rotate(360deg);
 
+      }
 
+    }
 
+
 
+    @keyframes spin {
 
+      0% {
 
+        -webkit-transform: rotate(0deg);
 
+        -ms-transform: rotate(0deg);
 
+        transform: rotate(0deg);
 
+      }
 
+
 
+      100% {
 
+        -webkit-transform: rotate(360deg);
 
+        -ms-transform: rotate(360deg);
 
+        transform: rotate(360deg);
 
+      }
 
+    }
 
+
 
+    #loader-wrapper .loader-section {
 
+      position: fixed;
 
+      top: 0;
 
+      width: 51%;
 
+      height: 100%;
 
+      background: #7171c6;
 
+      z-index: 1000;
 
+      -webkit-transform: translateX(0);
 
+      -ms-transform: translateX(0);
 
+      transform: translateX(0);
 
+    }
 
+
 
+    #loader-wrapper .loader-section.section-left {
 
+      left: 0;
 
+    }
 
+
 
+    #loader-wrapper .loader-section.section-right {
 
+      right: 0;
 
+    }
 
+
 
+    .loaded #loader-wrapper .loader-section.section-left {
 
+      -webkit-transform: translateX(-100%);
 
+      -ms-transform: translateX(-100%);
 
+      transform: translateX(-100%);
 
+      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
+      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
+    }
 
+
 
+    .loaded #loader-wrapper .loader-section.section-right {
 
+      -webkit-transform: translateX(100%);
 
+      -ms-transform: translateX(100%);
 
+      transform: translateX(100%);
 
+      -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
+      transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
 
+    }
 
+
 
+    .loaded #loader {
 
+      opacity: 0;
 
+      -webkit-transition: all 0.3s ease-out;
 
+      transition: all 0.3s ease-out;
 
+    }
 
+
 
+    .loaded #loader-wrapper {
 
+      visibility: hidden;
 
+      -webkit-transform: translateY(-100%);
 
+      -ms-transform: translateY(-100%);
 
+      transform: translateY(-100%);
 
+      -webkit-transition: all 0.3s 1s ease-out;
 
+      transition: all 0.3s 1s ease-out;
 
+    }
 
+
 
+    .no-js #loader-wrapper {
 
+      display: none;
 
+    }
 
+
 
+    .no-js h1 {
 
+      color: #222222;
 
+    }
 
+
 
+    #loader-wrapper .load_title {
 
+      font-family: 'Open Sans';
 
+      color: #fff;
 
+      font-size: 19px;
 
+      width: 100%;
 
+      text-align: center;
 
+      z-index: 9999999999999;
 
+      position: absolute;
 
+      top: 60%;
 
+      opacity: 1;
 
+      line-height: 30px;
 
+    }
 
+
 
+    #loader-wrapper .load_title span {
 
+      font-weight: normal;
 
+      font-style: italic;
 
+      font-size: 13px;
 
+      color: #fff;
 
+      opacity: 0.5;
 
+    }
 
+  </style>
 
+</head>
 
+
 
+<body>
 
+  <div id="app">
 
+    <div id="loader-wrapper">
 
+      <div id="loader"></div>
 
+      <div class="loader-section section-left"></div>
 
+      <div class="loader-section section-right"></div>
 
+      <div class="load_title">正在加载系统资源，请耐心等待</div>
 
     </div>
 
     </div>
 
-    <script type="module" src="/src/main.ts"></script>
 
-  </body>
 
+  </div>
 
+  <script type="module" src="/src/main.ts"></script>
 
+</body>
 
+
 
 </html>
 
 </html>

+ 3 - 2
plus-ui-ts/package.json
Näytä tiedosto 

@@ -30,7 +30,6 @@
 
     "await-to-js": "3.0.0",
 
     "await-to-js": "3.0.0",
 
     "axios": "1.8.4",
 
     "axios": "1.8.4",
 
     "crypto-js": "4.2.0",
 
     "crypto-js": "4.2.0",
 
-    "dplayer": "^1.27.1",
 
     "echarts": "5.6.0",
 
     "echarts": "5.6.0",
 
     "element-plus": "2.9.8",
 
     "element-plus": "2.9.8",
 
     "element-resize-detector": "^1.2.4",
 
     "element-resize-detector": "^1.2.4",
 
@@ -53,7 +52,9 @@
 
     "vue-json-pretty": "2.4.0",
 
     "vue-json-pretty": "2.4.0",
 
     "vue-router": "4.5.0",
 
     "vue-router": "4.5.0",
 
     "vue-types": "6.0.0",
 
     "vue-types": "6.0.0",
 
-    "vxe-table": "4.13.7"
 
+    "vxe-table": "4.13.7",
 
+    "xgplayer": "^3.0.22",
 
+    "xgplayer-hls": "^3.0.22"
 
   },
 
   },
 
   "devDependencies": {
 
   "devDependencies": {
 
     "@iconify/json": "^2.2.276",
 
     "@iconify/json": "^2.2.276",

+ 20 - 0
plus-ui-ts/src/api/system/device/index.ts
Näytä tiedosto 

@@ -61,3 +61,23 @@ export const delDevice = (id: string | number | Array<string | number>) => {
 
     method: 'delete'
 
     method: 'delete'
 
   });
 
   });
 
 };
 
 };
 
+/**
 
+ * 获取摄像机视频流
 
+ * @param from
 
+ */
 
+export const getHlsCode = (from) => {
 
+  return request({
 
+    url: `/system/device/rtmp/${from}`,
 
+    method: 'get'
 
+  });
 
+};
 
+/**
 
+ * 关闭摄像机视频流
 
+ * @param from
 
+ */
 
+export const closeHlsCode = (from) => {
 
+  return request({
 
+    url: `/system/device/rtmp/close/${from}`,
 
+    method: 'get'
 
+  });
 
+};

+ 0 - 2
plus-ui-ts/src/api/system/event/index.ts
Näytä tiedosto 

@@ -1,6 +1,4 @@
 
 import request from '@/utils/request';
 
 import request from '@/utils/request';
 
-import { AxiosPromise } from 'axios';
 
-import { EventVO, EventForm, EventQuery } from '@/api/system/event/types';
 
 
 
 /**
 
 /**
 
  * 查询事件列表
 
  * 查询事件列表

+ 8 - 8
plus-ui-ts/src/views/device/deviceList/index.vue
Näytä tiedosto 

@@ -24,7 +24,6 @@
 
         </el-card>
 
         </el-card>
 
       </div>
 
       </div>
 
     </transition>
 
     </transition>
 
-
 
     <el-card shadow="never">
 
     <el-card shadow="never">
 
       <template #header>
 
       <template #header>
 
         <el-row :gutter="10" class="mb8">
 
         <el-row :gutter="10" class="mb8">
 
@@ -65,7 +64,6 @@
 
           </template>
 
           </template>
 
         </el-table-column>
 
         </el-table-column>
 
       </el-table>
 
       </el-table>
 
-
 
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
 
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
 
     </el-card>
 
     </el-card>
 
     <!-- 添加或修改设备-摄像机对话框 -->
 
     <!-- 添加或修改设备-摄像机对话框 -->
 
@@ -91,6 +89,11 @@
 
             </el-form-item>
 
             </el-form-item>
 
           </el-col>
 
           </el-col>
 
           <el-col :span="24">
 
           <el-col :span="24">
 
+            <el-form-item label="视频流地址" prop="ext1.streamUrl">
 
+              <el-input v-model="form.ext1.streamUrl" placeholder="请输入视频流地址" />
 
+            </el-form-item>
 
+          </el-col>
 
+          <el-col :span="24">
 
             <el-form-item label="位置">
 
             <el-form-item label="位置">
 
               <div class="map" id="map"></div>
 
               <div class="map" id="map"></div>
 
             </el-form-item>
 
             </el-form-item>
 
@@ -110,9 +113,7 @@
 
 <script setup name="Device" lang="ts">
 
 <script setup name="Device" lang="ts">
 
 import { listDevice, getDevice, delDevice, addDevice, updateDevice } from '@/api/system/device';
 
 import { listDevice, getDevice, delDevice, addDevice, updateDevice } from '@/api/system/device';
 
 import { DeviceVO, DeviceForm } from '@/api/system/device/types';
 
 import { DeviceVO, DeviceForm } from '@/api/system/device/types';
 
-
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 
-
 
 const deviceList = ref<DeviceVO[]>([]);
 
 const deviceList = ref<DeviceVO[]>([]);
 
 const buttonLoading = ref(false);
 
 const buttonLoading = ref(false);
 
 const loading = ref(true);
 
 const loading = ref(true);
 
@@ -129,7 +130,6 @@ const dialog = reactive<DialogOption>({
 
   visible: false,
 
   visible: false,
 
   title: ''
 
   title: ''
 
 });
 
 });
 
-
 
 const initFormData = {
 
 const initFormData = {
 
   id: undefined,
 
   id: undefined,
 
   name: undefined,
 
   name: undefined,
 
@@ -258,11 +258,11 @@ const submitForm = () => {
 
   deviceFormRef.value?.validate(async (valid: boolean) => {
 
   deviceFormRef.value?.validate(async (valid: boolean) => {
 
     if (valid) {
 
     if (valid) {
 
       buttonLoading.value = true;
 
       buttonLoading.value = true;
 
-      form.value.ext1 = JSON.stringify(form.value.ext1);
 
+      const params = Object.assign({}, { ...form.value }, { ext1: JSON.stringify(form.value.ext1) });
 
       if (form.value.id) {
 
       if (form.value.id) {
 
-        await updateDevice(form.value).finally(() => (buttonLoading.value = false));
 
+        await updateDevice(params).finally(() => (buttonLoading.value = false));
 
       } else {
 
       } else {
 
-        await addDevice(form.value).finally(() => (buttonLoading.value = false));
 
+        await addDevice(params).finally(() => (buttonLoading.value = false));
 
       }
 
       }
 
       proxy?.$modal.msgSuccess('操作成功');
 
       proxy?.$modal.msgSuccess('操作成功');
 
       dialog.visible = false;
 
       dialog.visible = false;

+ 76 - 20
plus-ui-ts/src/views/index.vue
Näytä tiedosto 

@@ -127,16 +127,16 @@
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
       <div class="event-list">
 
       <div class="event-list">
 
-        <el-table :data="eventList" :show-header="false" :border="false" style="width: 100%; --el-table-border-color: none">
 
-          <el-table-column prop="level" width="80">
 
+        <el-table :data="eventList" :border="false" :header-cell-style="{ background: '#fff!important' }" style="width: 100%">
 
+          <el-table-column prop="level" label="事件等级" width="80" align="center">
 
             <template #default="{ row }">
 
             <template #default="{ row }">
 
               {{ event_level.filter((item) => item.value == row.level)[0]?.label }}
 
               {{ event_level.filter((item) => item.value == row.level)[0]?.label }}
 
             </template>
 
             </template>
 
           </el-table-column>
 
           </el-table-column>
 
-          <el-table-column prop="ext2.lx" show-overflow-tooltip width="100" />
 
-          <el-table-column prop="addr" show-overflow-tooltip />
 
-          <el-table-column prop="createTimeFormat" width="100" />
 
-          <el-table-column prop="status" width="70">
 
+          <el-table-column prop="ext2.lx" label="事件类型" show-overflow-tooltip width="100" align="center" />
 
+          <el-table-column prop="addr" label="发生地点" show-overflow-tooltip align="center" />
 
+          <el-table-column prop="createTimeFormat" label="发生时间" width="100" align="center" />
 
+          <el-table-column prop="status" label="状态" width="70" align="center">
 
             <template #default="{ row }">
 
             <template #default="{ row }">
 
               <span v-if="row.status == 3" style="color: #5f86fd">已上报</span>
 
               <span v-if="row.status == 3" style="color: #5f86fd">已上报</span>
 
               <span v-else-if="row.status == 1" style="color: #26c768">已解决</span>
 
               <span v-else-if="row.status == 1" style="color: #26c768">已解决</span>
 
@@ -144,7 +144,7 @@
 
               <span v-else>{{ event_status.filter((item) => item.value == row.status)[0]?.label }}</span>
 
               <span v-else>{{ event_status.filter((item) => item.value == row.status)[0]?.label }}</span>
 
             </template>
 
             </template>
 
           </el-table-column>
 
           </el-table-column>
 
-          <el-table-column width="60">
 
+          <el-table-column label="操作" width="60" align="center">
 
             <template #default="{ row }">
 
             <template #default="{ row }">
 
               <el-button link type="primary" @click="showDetails(row)">查看</el-button>
 
               <el-button link type="primary" @click="showDetails(row)">查看</el-button>
 
             </template>
 
             </template>
 
@@ -164,7 +164,7 @@
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
     <el-dialog v-model="dialog.visible" :title="dialog.title" width="1000px" top="0" append-to-body @close="dialogClose">
 
     <el-dialog v-model="dialog.visible" :title="dialog.title" width="1000px" top="0" append-to-body @close="dialogClose">
 
-      <template #title>
 
+      <template #header>
 
         <div style="display: flex; justify-content: space-between; align-items: center; padding-right: 30px">
 
         <div style="display: flex; justify-content: space-between; align-items: center; padding-right: 30px">
 
           <span>事件详情</span>
 
           <span>事件详情</span>
 
           <el-button @click="saveClick">保存</el-button>
 
           <el-button @click="saveClick">保存</el-button>
 
@@ -235,7 +235,7 @@
 
           <div class="event-media-title">现场视频</div>
 
           <div class="event-media-title">现场视频</div>
 
           <div class="event-media-content">
 
           <div class="event-media-content">
 
             <div class="videos">
 
             <div class="videos">
 
-              <div v-for="(item, index) in form.videoList" :key="index" :id="`dplayer${index}`"></div>
 
+              <div v-for="(item, index) in form.videoList" :key="index" :id="`player${index}`"></div>
 
             </div>
 
             </div>
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
@@ -304,6 +304,9 @@
 
         </template>
 
         </template>
 
       </div>
 
       </div>
 
     </el-dialog>
 
     </el-dialog>
 
+    <el-dialog v-model="showVideo" title="实时视频" width="600" @close="closeVideo" append-to-body>
 
+      <div id="mse" class="real-video"></div>
 
+    </el-dialog>
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
 <script setup lang="ts">
 
 <script setup lang="ts">
 
@@ -311,12 +314,14 @@ import { Search } from '@element-plus/icons-vue';
 
 import BaseChart from '@/components/BaseChart/index.vue';
 
 import BaseChart from '@/components/BaseChart/index.vue';
 
 import monitorIcon from '@/assets/images/monitor.svg';
 
 import monitorIcon from '@/assets/images/monitor.svg';
 
 import monitorEventIcon from '@/assets/images/monitor-event.svg';
 
 import monitorEventIcon from '@/assets/images/monitor-event.svg';
 
-import DPlayer from 'dplayer';
 
+import Player from 'xgplayer';
 
+import 'xgplayer/dist/index.min.css';
 
+import HlsPlugin from 'xgplayer-hls';
 
 import '@wangeditor/editor/dist/css/style.css'; // 引入 css
 
 import '@wangeditor/editor/dist/css/style.css'; // 引入 css
 
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
 
 import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
 
 import { downloadFile } from '@/utils/download.js';
 
 import { downloadFile } from '@/utils/download.js';
 
 import { listEvent, generateReport, updateEvent, getEvent, getEventTypes } from '@/api/system/event';
 
 import { listEvent, generateReport, updateEvent, getEvent, getEventTypes } from '@/api/system/event';
 
-import { listDevice } from '@/api/system/device';
 
+import { listDevice, getHlsCode, closeHlsCode } from '@/api/system/device';
 
 import { dateFormat } from '@/utils/index';
 
 import { dateFormat } from '@/utils/index';
 
 import { ElLoading } from 'element-plus';
 
 import { ElLoading } from 'element-plus';
 
 import { base64Encoded, base64Decoded } from '@/utils/crypto';
 
 import { base64Encoded, base64Decoded } from '@/utils/crypto';
 
@@ -372,6 +377,8 @@ const statData = reactive({
 
   report: undefined
 
   report: undefined
 
 });
 
 });
 
 const showList = ref(true);
 
 const showList = ref(true);
 
+const showVideo = ref(false);
 
+const curVideoUrl = ref('');
 
 const shortcuts = [
 
 const shortcuts = [
 
   {
 
   {
 
     text: '最近一周',
 
     text: '最近一周',
 
@@ -482,6 +489,7 @@ onMounted(() => {
 
     const point = new BMapGL.Point(118.879999, 32.016216); // 创建点坐标
 
     const point = new BMapGL.Point(118.879999, 32.016216); // 创建点坐标
 
     map.centerAndZoom(point, 14);
 
     map.centerAndZoom(point, 14);
 
     map.enableScrollWheelZoom(true);
 
     map.enableScrollWheelZoom(true);
 
+    map.setTrafficOn();
 
     bdmap.value = map;
 
     bdmap.value = map;
 
     map.addEventListener('click', function (e) {
 
     map.addEventListener('click', function (e) {
 
       const { lng, lat } = e.latlng;
 
       const { lng, lat } = e.latlng;
 
@@ -689,6 +697,7 @@ const getDeviceList = () => {
 
         }
 
         }
 
         return {
 
         return {
 
           ...item,
 
           ...item,
 
+          ext1: item.ext1 && JSON.parse(item.ext1),
 
           hasEvent
 
           hasEvent
 
         };
 
         };
 
       });
 
       });
 
@@ -718,6 +727,11 @@ const showMarks = () => {
 
       const icon = new BMapGL.Icon(img, new BMapGL.Size(30, 30));
 
       const icon = new BMapGL.Icon(img, new BMapGL.Size(30, 30));
 
       const marker = new BMapGL.Marker(pt, { icon });
 
       const marker = new BMapGL.Marker(pt, { icon });
 
       marker.addEventListener('click', (e) => {
 
       marker.addEventListener('click', (e) => {
 
+        if (item.ext1 && item.ext1.streamUrl) {
 
+          showVideoDialog(item.ext1.streamUrl);
 
+        } else {
 
+          proxy?.$modal.msgError('暂未配置视频流地址');
 
+        }
 
         if (item.hasEvent == 1) {
 
         if (item.hasEvent == 1) {
 
           queryParams.value.params.deviceId = item.id;
 
           queryParams.value.params.deviceId = item.id;
 
           queryParams.value.pageNum = 1;
 
           queryParams.value.pageNum = 1;
 
@@ -727,6 +741,45 @@ const showMarks = () => {
 
       bdmap.value.addOverlay(marker);
 
       bdmap.value.addOverlay(marker);
 
     });
 
     });
 
 };
 
 };
 
+const showVideoDialog = (url) => {
 
+  curVideoUrl.value = url;
 
+  showVideo.value = true;
 
+  let realUrl = '';
 
+  getHlsCode(base64Encoded(url)).then(({ code, data }) => {
 
+    if (code == 200) {
 
+      if (import.meta.env.DEV) {
 
+        realUrl = data.replace(/^http:\/\/jtjai\.xt\.wenhq\.top:8083/, '');
 
+      } else {
 
+        realUrl = data;
 
+      }
 
+
 
+      if (HlsPlugin.isSupported()) {
 
+        const player = new Player({
 
+          id: 'mse',
 
+          url: realUrl,
 
+          isLive: false,
 
+          autoplay: true,
 
+          plugins: [HlsPlugin],
 
+          ignores: ['cssfullscreen'],
 
+          hls: {
 
+            retryCount: 3, // 重试 3 次，默认值
 
+            retryDelay: 1000, // 每次重试间隔 1 秒，默认值
 
+            loadTimeout: 10000, // 请求超时时间为 10 秒，默认值
 
+            fetchOptions: {
 
+              // 该参数会透传给 fetch，默认值为 undefined
 
+              mode: 'cors'
 
+            }
 
+          }
 
+        });
 
+      }
 
+    }
 
+  });
 
+};
 
+const closeVideo = () => {
 
+  if (curVideoUrl.value) {
 
+    closeHlsCode(base64Encoded(curVideoUrl.value));
 
+  }
 
+};
 
 const showDetails = (row) => {
 
 const showDetails = (row) => {
 
   getEvent(row.id).then(({ code, data }) => {
 
   getEvent(row.id).then(({ code, data }) => {
 
     if (code === 200) {
 
     if (code === 200) {
 
@@ -734,7 +787,7 @@ const showDetails = (row) => {
 
       data.ext2 = JSON.parse(data.ext2) || {};
 
       data.ext2 = JSON.parse(data.ext2) || {};
 
       data.status = data.status || '2';
 
       data.status = data.status || '2';
 
       let imgList = [];
 
       let imgList = [];
 
-      let videoList = [];
 
+      let videoList = []; //
 
       if (data.ext1.length) {
 
       if (data.ext1.length) {
 
         videoList = data.ext1
 
         videoList = data.ext1
 
           .filter((item) => item.includes('mp4'))
 
           .filter((item) => item.includes('mp4'))
 
@@ -743,7 +796,7 @@ const showDetails = (row) => {
 
           .filter((item) => !item.includes('mp4'))
 
           .filter((item) => !item.includes('mp4'))
 
           .map((item) => `${import.meta.env.VITE_APP_BASE_HOST}/api/oss/local/upload/${item}`);
 
           .map((item) => `${import.meta.env.VITE_APP_BASE_HOST}/api/oss/local/upload/${item}`);
 
       }
 
       }
 
-      if(data.ext2.EventVideoPath){
 
+      if (data.ext2.EventVideoPath) {
 
         videoList = [data.ext2.EventVideoPath];
 
         videoList = [data.ext2.EventVideoPath];
 
       }
 
       }
 
 
 
@@ -752,11 +805,9 @@ const showDetails = (row) => {
 
       dialog.visible = true;
 
       dialog.visible = true;
 
       nextTick(() => {
 
       nextTick(() => {
 
         form.value.videoList.forEach((item, index) => {
 
         form.value.videoList.forEach((item, index) => {
 
-          new DPlayer({
 
-            container: document.getElementById(`dplayer${index}`),
 
-            video: {
 
-              url: item
 
-            }
 
+          new Player({
 
+            el: document.getElementById(`player${index}`),
 
+            url: item
 
           });
 
           });
 
         });
 
         });
 
       });
 
       });
 
@@ -831,6 +882,7 @@ const saveClick = async () => {
 
   getList();
 
   getList();
 
   getStat();
 
   getStat();
 
   getEventTypeOptions();
 
   getEventTypeOptions();
 
+  getDeviceList();
 
   proxy?.$modal.msgSuccess('保存成功');
 
   proxy?.$modal.msgSuccess('保存成功');
 
 };
 
 };
 
 const extractDate = (dateStr) => {
 
 const extractDate = (dateStr) => {
 
@@ -1153,8 +1205,8 @@ const formSubmit = async (field, obj = '') => {
 
       flex-wrap: wrap;
 
       flex-wrap: wrap;
 
 
 
       div {
 
       div {
 
-        height: 200px;
 
-        width: 32%;
 
+        height: 200px !important;
 
+        width: 32% !important;
 
         border-radius: 4px;
 
         border-radius: 4px;
 
         margin-right: 10px;
 
         margin-right: 10px;
 
         margin-top: 10px;
 
         margin-top: 10px;
 
@@ -1200,4 +1252,8 @@ const formSubmit = async (field, obj = '') => {
 
   color: #5d5d5dd9;
 
   color: #5d5d5dd9;
 
   font-size: 14px;
 
   font-size: 14px;
 
 }
 
 }
 
+.real-video {
 
+  height: 400px !important;
 
+  width: 100% !important;
 
+}
 
 </style>
 
 </style>

+ 11 - 4
plus-ui-ts/vite.config.ts
Näytä tiedosto 

@@ -24,18 +24,25 @@ export default defineConfig(({ mode, command }) => {
 
       open: true,
 
       open: true,
 
       proxy: {
 
       proxy: {
 
         [env.VITE_APP_BASE_API]: {
 
         [env.VITE_APP_BASE_API]: {
 
-          target: 'http://localhost:8081/api',
 
-          // target: 'http://jtjai.xt.wenhq.top:8083/api',
 
+          // target: 'http://localhost:8081/api',
 
+          target: 'http://jtjai.xt.wenhq.top:8083/api',
 
           changeOrigin: true,
 
           changeOrigin: true,
 
           ws: true,
 
           ws: true,
 
           rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
 
           rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
 
         },
 
         },
 
         '/loadFile': {
 
         '/loadFile': {
 
-          target: 'http://localhost:8081',
 
-          // target: 'http://jtjai.xt.wenhq.top:8083/',
 
+          // target: 'http://localhost:8081',
 
+          target: 'http://jtjai.xt.wenhq.top:8083/',
 
           changeOrigin: true,
 
           changeOrigin: true,
 
           ws: true,
 
           ws: true,
 
           rewrite: (path) => path.replace(new RegExp('^' + '/loadFile'), '')
 
           rewrite: (path) => path.replace(new RegExp('^' + '/loadFile'), '')
 
+        },
 
+        '/hls': {
 
+          // target: 'http://localhost:8081',
 
+          target: 'http://jtjai.xt.wenhq.top:8083',
 
+          changeOrigin: true,
 
+          ws: true
 
+          // rewrite: (path) => path.replace(new RegExp('^' + '/'), '')
 
         }
 
         }
 
       }
 
       }
 
     },
 
     },