From 35ca8e393c0fe3c1ad7128e5cf106e1d574741b5 Mon Sep 17 00:00:00 2001
From: JINGYJ <1458671527@qq.com>
Date: Thu, 3 Aug 2023 09:31:34 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=96=B0=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BDX?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development            |   2 +-
 src/api/home.ts             |  11 +++
 src/api/user.ts             |   8 +--
 src/views/welcome/index.vue | 129 +++++++++++++++++++++++-------------
 4 files changed, 98 insertions(+), 52 deletions(-)

diff --git a/.env.development b/.env.development
index ec6e38a..bfdecce 100644
--- a/.env.development
+++ b/.env.development
@@ -8,4 +8,4 @@ VITE_PUBLIC_PATH = /
 VITE_ROUTER_HISTORY = "hash"
 
 # 开发环境后端地址
-VITE_APP_BASE_URL = 'http://192.168.10.81:8848'
\ No newline at end of file
+VITE_APP_BASE_URL = 'http://192.168.10.13:8000'
\ No newline at end of file
diff --git a/src/api/home.ts b/src/api/home.ts
index bd13a98..39cfd2e 100644
--- a/src/api/home.ts
+++ b/src/api/home.ts
@@ -5,7 +5,18 @@ type Result = {
   count: number;
   results?: Array<any>;
 };
+type Data = {
+  success: boolean;
+  msg: any;
+  results?: Array<any>;
+};
 
 export const getHomeList = (params?: object) => {
   return http.request<Result>("get", baseUrlApi(""), { params });
 };
+export const getEvents = (params?: object) => {
+  return http.request<Data>("get", baseUrlApi("events"), { params });
+};
+export const updateHomeList = (params?: object) => {
+  return http.request<Data>("put", baseUrlApi(""), { params });
+};
diff --git a/src/api/user.ts b/src/api/user.ts
index 10de275..6aac1cc 100644
--- a/src/api/user.ts
+++ b/src/api/user.ts
@@ -33,12 +33,12 @@ export type RefreshTokenResult = {
 };
 
 /** 登录 */
-export const getLogin = (data?: object) => {
-  return http.request<UserResult>("post", "/login", { data });
-};
 // export const getLogin = (data?: object) => {
-//   return http.request<UserResult>("post", baseUrlApi("login"), { data });
+//   return http.request<UserResult>("post", "/login", { data });
 // };
+export const getLogin = (data?: object) => {
+  return http.request<UserResult>("post", baseUrlApi("login"), { data });
+};
 
 // export const getLogin = (data?: object) => {
 //   const AdminHostUrl = getConfig().AdminHostUrl;
diff --git a/src/views/welcome/index.vue b/src/views/welcome/index.vue
index 84ecc75..58ab268 100644
--- a/src/views/welcome/index.vue
+++ b/src/views/welcome/index.vue
@@ -1,24 +1,27 @@
 <script setup lang="ts">
-import axios from "axios";
+// import axios from "axios";
 import { onMounted, ref, reactive } from "vue";
 // import dplayer from "@/components/VideoPlayer/MyPlayer.vue";
 // import OurPlayer from "@/components/VideoPlayer/OurPlayer.vue";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { PureTable } from "@pureadmin/table";
 import { type PaginationProps } from "@pureadmin/table";
-import { ElMessageBox, ElMessage } from "element-plus";
-import { getConfig } from "@/config";
-import { getToken, formatToken } from "@/utils/auth";
-import { getHomeList } from "@/api/home";
+import { ElMessageBox } from "element-plus";
+// import { getConfig } from "@/config";
+// import { getToken, formatToken } from "@/utils/auth";
+import { getHomeList, getEvents } from "@/api/home";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Delete from "@iconify-icons/ep/delete";
+import EditPen from "@iconify-icons/ep/edit-pen";
 
 defineOptions({
   name: "Welcome"
 });
 
-const AdminHostUrl = getConfig().AdminHostUrl;
+// const AdminHostUrl = getConfig().AdminHostUrl;
 
-const formInline = ref({
-  date: [],
+const formInline = reactive({
+  date: "",
   policeId: "",
   event: "",
   violation: "",
@@ -58,19 +61,13 @@ const violationMap = ref({
 // }
 
 function onSearch() {
-  let start_time;
-  let end_time;
-  if (formInline.value.date) {
-    start_time = formInline.value.date[0];
-    end_time = formInline.value.date[1];
-  }
   const params = {
-    start_time: start_time || undefined,
-    end_time: end_time || undefined,
-    police_id: formInline.value.policeId || undefined,
-    event_type: formInline.value.event || undefined,
-    violation: violationMap.value[formInline.value.violation] || undefined,
-    violation_type: formInline.value.violationType || undefined,
+    start_time: formInline.date === null ? undefined : formInline.date[0],
+    end_time: formInline.date === null ? undefined : formInline.date[1],
+    police_id: formInline.policeId || undefined,
+    event_type: formInline.event || undefined,
+    violation: violationMap.value[formInline.violation] || undefined,
+    violation_type: formInline.violationType || undefined,
     page: currentPage.value || undefined,
     page_size: pageSize.value || undefined
   };
@@ -78,7 +75,6 @@ function onSearch() {
     const dataList = response;
     totalNumber.value = dataList.count;
     pagination.total = dataList.count;
-    console.log(totalNumber.value, "totalNumber");
     if (!isDisplay) {
       tableData.value = dataList.results.filter(data => {
         return data.is_display === true;
@@ -86,7 +82,6 @@ function onSearch() {
     } else {
       tableData.value = dataList.results;
     }
-    console.log(pagination, "pagination");
     setTimeout(() => {
       loading.value = false;
     }, 500);
@@ -163,24 +158,26 @@ const handleClose = (done: () => void) => {
     });
 };
 
-function getEvents() {
-  axios({
-    url: AdminHostUrl + "events",
-    headers: {
-      token: formatToken(getToken().accessToken)
-    }
-  })
-    .then(response => {
-      eventMap.value = response.data.data;
-      // console.log(eventMap.value);
-    })
-    .catch(error => {
-      ElMessage({
-        message: "网络暂不通畅",
-        type: "warning"
-      });
-      console.log(error);
-    });
+async function getEvent() {
+  // axios({
+  //   url: AdminHostUrl + "events",
+  //   headers: {
+  //     token: formatToken(getToken().accessToken)
+  //   }
+  // })
+  //   .then(response => {
+  //     eventMap.value = response.data.data;
+  //     // console.log(eventMap.value);
+  //   })
+  //   .catch(error => {
+  //     ElMessage({
+  //       message: "网络暂不通畅",
+  //       type: "warning"
+  //     });
+  //     console.log(error);
+  //   });
+  const { results } = await getEvents();
+  eventMap.value = results;
 }
 
 function pickerOptions(time) {
@@ -211,7 +208,8 @@ const columns: TableColumnList = [
   {
     label: "是否违规",
     prop: "is_violation",
-    minWidth: 100
+    minWidth: 100,
+    slot: "violation"
   },
   {
     label: "违规行为",
@@ -236,6 +234,12 @@ const columns: TableColumnList = [
     label: "视频",
     slot: "video"
   }
+  // {
+  //   label: "操作",
+  //   fixed: "right",
+  //   width: 180,
+  //   slot: "operation"
+  // }
 ];
 const loading = ref(true);
 const pagination = reactive<PaginationProps>({
@@ -244,9 +248,12 @@ const pagination = reactive<PaginationProps>({
   currentPage: currentPage.value,
   background: true
 });
-console.log(totalNumber.value, "totalNumber");
-console.log(pagination, "pagination111111");
-
+function handleUpdate(row) {
+  console.log(row);
+}
+function handleDelete(row) {
+  console.log(row);
+}
 onMounted(() => {
   onSearch();
 });
@@ -264,12 +271,12 @@ onMounted(() => {
     </el-dialog>
     <el-form
       :inline="true"
-      :model="formInline"
+      v-model="formInline"
       class="search-form bg-bg_color w-[99/100] pl-8 pt-[12px]"
     >
       <el-form-item label="日期:" style="font-weight: bold">
         <el-date-picker
-          :model="formInline.date"
+          v-model="formInline.date"
           type="daterange"
           unlink-panels
           range-separator="--"
@@ -296,7 +303,7 @@ onMounted(() => {
           v-model="formInline.event"
           placeholder="违法行为"
           clearable
-          @click="getEvents"
+          @click="getEvent"
         >
           <el-option
             v-for="(event, type) in eventMap"
@@ -359,6 +366,9 @@ onMounted(() => {
           @page-size-change="handleSizeChange"
           @page-current-change="handleCurrentChange"
         >
+          <template #violation="{ row }">
+            {{ row.is_violation ? "是" : "否" }}
+          </template>
           <template #image="{ row, index }">
             <el-image
               preview-teleported
@@ -375,6 +385,31 @@ onMounted(() => {
               <source :src="row.video_dir" type="video/mp4" />
             </video>
           </template>
+          <template #operation="{ row }">
+            <el-button
+              class="reset-margin"
+              link
+              type="primary"
+              :size="size"
+              @click="handleUpdate(row)"
+              :icon="useRenderIcon(EditPen)"
+            >
+              修改
+            </el-button>
+            <el-popconfirm title="是否确认删除?" @confirm="handleDelete(row)">
+              <template #reference>
+                <el-button
+                  class="reset-margin"
+                  link
+                  type="primary"
+                  :size="size"
+                  :icon="useRenderIcon(Delete)"
+                >
+                  删除
+                </el-button>
+              </template>
+            </el-popconfirm>
+          </template>
         </pure-table>
       </template>
     </PureTableBar>