shuishen
2025-10-15 2fee66bc6651e1460ea1dbfb7affff2afa066add
src/pages/work/index.vue
@@ -1,67 +1,218 @@
<!-- 事件工单 -->
<template>
  <view class="min-h-screen flex flex-col items-center">
    <image
      class="mb-50rpx mt-200rpx h-200rpx w-200rpx"
      src="@/static/images/logo.png"
      width="200rpx"
      height="200rpx"
    />
    <view class="flex justify-center">
      <text class="font-size-36rpx">
        {{ $t("home.intro") }}
      </text>
    </view>
    <view class="mt-100rpx flex gap-30rpx">
      <lang-select />
      <view class="cursor-pointer" @click="toGithub">
        <view class="i-mdi-github text-40rpx" />
      </view>
    </view>
   <view class="flex flex-col eventTickets">
       <web-view ref="sWebViewRef" :src="`${viewUrl}`" />
      <!-- <view class="searchTop">
         <up-search placeholder="请输入关键字搜索"  :animation="true"  v-model="listParams.keyword" :show-action="false"></up-search>
         <div>111</div>
      </view>
      <view>
         <up-tabs :list="tabList" @click="handleClick"></up-tabs>
         <view class="eventBox">
            <view class="eventItem"  v-for="(item,index) in dataList" :key="index">
               <img :src="item.photo_url" alt="" @click="detailHandle(item)" />
               <div class="itemTitle">{{item.event_name}}</div>
               <div class="itemContent">
                  <div class="itemStatus">
                     <span v-if="item.status === 0" style="background-color: #ff7411;"></span>
                     <span v-else-if="item.status === 2" style="background-color: #ff472f;"></span>
                     <span v-else-if="item.status === 3" style="background-color: #ffc300;"></span>
                     <span v-else-if="item.status === 4" style="background-color: #06d957;"></span>
                     <p>{{formatDate(item.create_time) }}</p>
                  </div>
                  <div>全屏</div>
               </div>
            </view>
         </view>
      </view> -->
   </view>
    <!-- #ifdef MP-WEIXIN -->
    <!-- 隐私协议组件 -->
    <agree-privacy
      v-model="showAgreePrivacy"
      :disable-check-privacy="false"
      @agree="handleAgree"
    />
    <!-- #endif -->
  </view>
</template>
<script setup>
// #ifdef MP-WEIXIN
import { useShare } from "@/hooks";
// #endif
   import {getWebViewUrl} from "@/utils/index.js";
import { useUserStore } from '@/store/index.js'
import {getList,getstatusCount} from '/src/api/work/index.js'
   import dayjs from 'dayjs';
   const userStore = useUserStore()
   const userInfo = userStore.userInfo
const sWebViewRef = ref(null);
const viewUrl = getWebViewUrl('/work', {})
// const viewUrl = `http://192.168.1.157:5173/drone-app-web-view/#/webViewWrapper/work?params=${JSON.stringify(userStore?.userInfo)}`;
   const dataList = ref([])
   const keyword = ref('')
   const currentTab=ref('myTickets')
   const tabList = ref([{
         name: '我的工单',
         key: 'myTickets',
         badge: {
            value: 1
         }
      },
      {
         name: '全部状态',
         key: 'all',
         badge: {
            value: 2
         },
         status: null
      },
      {
         name: '待审核',
         key: 'pending',
         badge: {
            value: 3
         },
         status: '2'
      },
      {
         name: '待处理',
         key: 'processing',
         badge: {
            value: 4
         },
         status: '0'
      },
      {
         name: '处理中',
         key: 'inProgress',
         badge: {
            value: 5
         },
         status: '3'
      },
      {
         name: '已完成',
         key: 'completed',
         badge: {
            value: 6
         },
         status: '4'
      }
   ])
   const formatDate = (dateString) => {
      return dayjs(dateString).format('MM/DD HH:mm');
   };
   const listParams = ref({
      status: null,
      current: 1,
      size: 9999,
      source: 1,
      department:'',
      keyword:''
// #ifdef MP-WEIXIN
// 分享使用示例
const { onShareAppMessage, onShareTimeline } = useShare({
  title: "首页",
  path: "pages/tab/map/index",
  imageUrl: "",
});
onShareAppMessage();
onShareTimeline();
// #endif
   })
   const getDataList = () => {
      const params = {
         current: 1,
         size: 9999,
         source: 1,
         status:listParams.value.status,
         event_name:listParams.value.keyword,
         user_id:currentTab.value=== 'myTickets' ?userInfo.user_id : undefined
      }
      getList(params).then(res => {
         const response = res.data.data.records
         dataList.value = response
      })
   }
      const getstatusCountData=()=>{
         getstatusCount().then(res=>{
            const response = res.data.data
             const { statusCount, totalCount, userCount } = response
            tabList.value.forEach(tab=>{
               if(tab.key === 'all'){
                  tab.badge.value = totalCount || 0
const title = ref();
title.value = import.meta.env.VITE_APP_TITLE;
               }else if(tab.key === 'myTickets'){
                  tab.badge.value = userCount || 0
               }else{
                  tab.badge.value=statusCount[String(tab.status)] || 0
               }
            })
         })
      }
const showAgreePrivacy = ref(false);
// 同意隐私协议
function handleAgree() {
  console.log("同意隐私政策");
}
// 打开github
function toGithub() {
  if (window?.open) {
    window.open("https://github.com/oyjt/uniapp-vue3-template");
  } else {
    uni.$u.toast("请使用浏览器打开");
  }
}
   const handleClick = (item) => {
      currentTab.value = item.key
   listParams.value.status = item.status
      getDataList()
   }
   const detailHandle = (val) => {
      uni.navigateTo({
         url: `/subPackages/workDetail/index?eventNum=${val.event_num}`,
      })
   }
   onShow(() => {
      getDataList()
      getstatusCountData()
   })
</script>
<style scoped lang="scss">
   .eventTickets {
      padding: 0 10px;
      .searchTop {
         display: flex;
         align-items: center;
         margin-top: 10px;
      }
      :deep(.u-badge) {
         background-color: #1d6fe9 !important;
      }
      .eventBox {
         display: flex;
         flex-wrap: wrap;
         gap: 10px;
         padding: 10px 0;
         background-color: #ebeff2;
         .eventItem {
            width: calc(50% - 5px);
            background-color: #fff;
            border-radius: 5px;
            overflow: hidden;
            img {
               width: 100%;
               height: 100px;
               border-radius: 5px;
               overflow: hidden;
            }
            .itemTitle {
               padding: 0 5px;
                white-space: nowrap;
               overflow: hidden;
               text-overflow: ellipsis;
            }
            .itemContent {
               display: flex;
               justify-content: space-between;
               align-items: center;
               padding: 5px;
               .itemStatus {
                  display: flex;
                  align-items: center;
                  span {
                     display: inline-block;
                     width: 10px;
                     height: 10px;
                     border-radius: 50%;
                     margin-right: 5px;
                  }
               }
            }
         }
      }
   }
</style>