下发任务 修改任务处理

src/pages/patrolList/copmonents/patrolWrapper.vue

@@ -0,0 +1,76 @@
+<script setup>
+import router from "@/router";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+})
+
+const emits = defineEmits(["onConfirm"]);
+
+const handleClockInPage = (item) => {
+  router.push({ path: '/clockInPage', query: { item: JSON.stringify(item?.bddList), id: item.id } });
+}
+</script>
+
+<template>
+  <div class="item-wrapper">
+    <template v-for="(item, index) in list" :key="index">
+      <div class="item" @click="handleClockInPage(item)">
+        <div class="rowWrapper">
+          <div class="title">{{ item?.fgMc }}</div>
+          <div class="progress">50%</div>
+        </div>
+
+        <div class="rowWrapper mt co99 fz12">
+          <div>预警等级：{{ item?.fgYjdj }}</div>
+          <div>任务日期：{{ item?.rwRq }}</div>
+        </div>
+        <div class="rowWrapper mt co99 fz12">
+          <div>高发类型：{{ item?.fgJqtjLx }}</div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.item-wrapper {
+  margin: 2vw;
+
+  .item {
+    padding: 2vw;
+    border-top: 0.13333vw solid #f4f5f1;
+
+    .rowWrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      .title {
+        font-size: 14px;
+      }
+
+      .progress {
+        font-weight: 400;
+        font-size: 3.73vw;
+        color: #3E6EE8;
+      }
+    }
+
+    .fz12 {
+      font-size: 3.2vw;
+    }
+
+    .co99 {
+      color: #999999;
+    }
+
+    .mt {
+      margin-top: 2vw;
+    }
+  }
+}
+</style>

src/pages/patrolList/index.vue

@@ -0,0 +1,136 @@
+<script setup>
+import { ref, reactive, onMounted } from "vue";
+import TopNav from "@/components/topNav.vue";
+import Search from "@/components/search.vue";
+import PatrolWrapper from "@/pages/patrolList/copmonents/patrolWrapper.vue";
+import {fetchPatrolList} from "@/api/patrolList";
+
+const finished = ref(false);
+const loading = ref(false);
+const loadingRefresh = ref(false);
+const searchValue = ref("")
+
+const pageData = reactive({
+  pageSize: 10,
+  pageCurrent: 1,
+  total: 0,
+})
+
+const data = reactive({
+  list: []
+})
+
+const onSearch = () => {
+  loading.value = true;
+  pageData.pageCurrent = 1;
+  data.list = []
+  getData()
+}
+
+const onRefresh = () => {
+  loading.value = false;
+  loadingRefresh.value = true;
+  finished.value = false;
+  pageData.pageCurrent = 1;
+  data.list = []
+  getData()
+}
+
+const onLoad = () => {
+  if (data.list.length >= pageData?.total) {
+    finished.value = true;
+    return
+  }
+
+  pageData.pageCurrent++
+  getData()
+}
+
+const parseAndJoinLx = (jsonString, type = 'lx') => {
+  if (!jsonString) return '';
+
+  try {
+    let data = jsonString;
+    // 如果是字符串，尝试解析为JSON
+    if (typeof jsonString === 'string') {
+      data = JSON.parse(jsonString);
+    }
+
+    // 处理数组情况
+    if (Array.isArray(data)) {
+      return data.map(item => item?.[type]).filter(Boolean).join(",");
+    }
+    // 处理对象情况
+    if (typeof data === 'object' && data !== null) {
+      return data?.[type] || '';
+    }
+    return '';
+
+  } catch (error) {
+    console.warn('数据处理失败:', error);
+    return '';
+  }
+};
+
+const getData = async () => {
+
+  const { total, ...ret }  = pageData
+  try {
+    const res = await fetchPatrolList({ ...ret, fgMc: searchValue.value })
+    if (res?.records.length > 0) {
+      data.list = data.list.concat(res?.records)?.map((item) => ({
+        ...item,
+        fgJqtjLx: parseAndJoinLx(item?.fgJqtjLx, 'lx')
+      })) || []
+      pageData.total = res?.total
+      loading.value = false;
+    }
+    loadingRefresh.value = false;
+
+  } catch (error) {
+    loading.value = false;
+    loadingRefresh.value = false;
+  }
+}
+
+onMounted(() => {
+  getData()
+})
+</script>
+
+<template>
+  <div>
+    <TopNav nav-title="巡逻列表" show-left />
+
+    <van-sticky>
+      <div class="header">
+        <search
+          :isSx="true"
+          placeholder="请输入方格名称进行查询"
+          v-model="searchValue"
+          @update:modelValue="onSearch"
+        />
+      </div>
+    </van-sticky>
+
+    <div class="content">
+      <van-pull-refresh v-model="loadingRefresh" @refresh="onRefresh">
+        <van-list v-model:loading="loading" :finished="finished" finished-text="" @load="onLoad" offset="1" :immediate-check="false">
+          <patrol-wrapper :list="data?.list" />
+
+          <van-empty description="暂无采集数据" image="default" v-if="data.list.length <= 0 && loadingRefresh === false" />
+        </van-list>
+      </van-pull-refresh>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.header {
+  margin-top: 13vw;
+}
+
+.content {
+  margin-bottom: 16vw;
+}
+</style>