交通局视频

src/api/globalMap/tranBureauVideo.ts

@@ -0,0 +1,18 @@
+import request from '@/utils/request';
+
+// 视频列表
+export const getVideoList = (data) => {
+  return request({
+    url: '/api/videoResource/videoinfo/get_video_transportation_list',
+    method: 'get',
+    params: data
+  });
+};
+
+// 视频类型
+export const getVideoType = () => {
+  return request({
+    url: '/api/videoResource/videoinfo/transportation/type',
+    method: 'get'
+  });
+};

src/views/globalMap/RightMenu/tranBureauVideo.vue

@@ -3,7 +3,7 @@
     <div class="container">
       <div class="gradient-text title">交通局视频</div>
       <div class="box-left">
-        <el-input v-model="queryParams.keyword" class="custom-input" placeholder="搜索" @input="initData">
+        <el-input v-model="queryParams.keyword" class="custom-input" placeholder="搜索" @input="initData2">
           <template #prefix>
             <el-icon class="el-input__icon"><search /></el-icon>
           </template>
@@ -22,7 +22,7 @@
                 class="custom-select2"
                 popper-class="custom-select-popper2"
                 :teleported="false"
-                @change="initData"
+                @change="initData2"
               >
                 <el-option label="所有区县" value="" />
                 <el-option v-for="item in district_type" :key="item.value" :label="item.label" :value="item.label" />
@@ -32,7 +32,7 @@
           <div class="td">
             <div style="width: 240px">
               <el-select
-                v-model="queryParams.type"
+                v-model="queryParams.video_type"
                 placeholder="类型"
                 size="large"
                 class="custom-select2"
@@ -41,7 +41,7 @@
                 @change="initData2"
               >
                 <el-option label="所有类型" value="" />
-                <el-option v-for="item in danger_type" :key="item.value" :label="item.label" :value="item.label" />
+                <el-option v-for="item in videoType" :key="item.dictCode" :label="item.dictLabel" :value="item.dictCode" />
               </el-select>
             </div>
           </div>
@@ -50,9 +50,19 @@
         <div class="table-content">
           <div v-for="(item, index) in listData" :key="index" class="tr" @click="handleShowDialog(item)">
             <div class="td">{{ item.area }}</div>
-            <div class="td">{{ item.type }}</div>
+            <div class="td">{{ item.video_type_label }}</div>
             <div class="td">{{ item.name }}</div>
           </div>
+          <div class="footer">
+            <pagination
+              v-show="total > 0"
+              v-model:page="queryParams.page"
+              v-model:limit="queryParams.pageSize"
+              :total="total"
+              layout="total, prev, pager, next"
+              @pagination="listData"
+            />
+          </div>
         </div>
       </div>
       <Dialog v-if="showDialog" v-model="showDialog" type="md" title="交通局视频" hide-footer>
@@ -68,18 +78,21 @@
 import { Search } from '@element-plus/icons-vue';
 import { getRescue } from '@/api/globalMap/mitigation';
 import { deepClone } from '@/utils';
+import { getVideoList, getVideoType } from '@/api/globalMap/tranBureauVideo';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { district_type, danger_type } = toRefs<any>(proxy?.useDict('district_type', 'danger_type'));
 const queryParams = reactive({
-  current: 1,
-  size: 10,
+  page: 1,
+  pageSize: 10,
   keyword: '',
-  area: ''
+  area: '',
+  video_type: ''
 });
 const total = ref(0);
 
 const listData = ref([]);
+const videoType = ref([]);
 
 let showDialog = ref(false);
 let videoMonitorData = ref({});
@@ -91,23 +104,22 @@ const handleShowDialog = (row) => {
   });
 };
 const initData = () => {
-  let newQueryParams = deepClone(queryParams);
-  newQueryParams.query = {
-    area: queryParams.area,
-    keyword: queryParams.keyword
-  };
-  delete newQueryParams.area;
-  delete newQueryParams.keyword;
-  getRescue(newQueryParams).then((res) => {
-    listData.value = res.rows;
+  getVideoType().then((res) => {
+    videoType.value = res.data;
+  });
+};
+
+const initData2 = () => {
+  getVideoList(queryParams).then((res) => {
+    listData.value = res.data;
     total.value = res.total;
   });
 };
-const initData2 = () => {}
 const handleCancel = () => {
   queryParams.keyword = '';
-  initData();
+  initData2();
 };
+initData2();
 initData();
 </script>
 
@@ -195,4 +207,53 @@ initData();
     margin-left: 20px;
   }
 }
+.footer {
+  height: 64px;
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: 30px;
+  .pagination-container {
+    height: 64px;
+    margin: 0;
+  }
+  :deep(.el-pagination__total) {
+    color: #a7ccdf;
+    font-size: 32px;
+  }
+  :deep(.el-pagination) {
+    .btn-next,
+    .btn-prev {
+      background-color: transparent;
+      border: none;
+      .el-icon {
+        font-size: 22px;
+        color: #a7ccdf;
+      }
+    }
+    .btn-prev:disabled,
+    .btn-next:disabled {
+      background-color: transparent;
+      border: none;
+    }
+    .el-pager li {
+      width: 64px;
+      height: 64px;
+      line-height: 64px;
+      text-align: center;
+      font-size: 32px;
+      color: #a7ccdf;
+      background-color: #0e3064;
+      border: 1px solid #0c57a7;
+      margin: 0 6px;
+      &:hover {
+        background-color: #038dff;
+        border: 1px solid #038dff;
+      }
+    }
+    .el-pager li.is-active {
+      background-color: #038dff;
+      border: 1px solid #038dff;
+    }
+  }
+}
 </style>