| | |
| | | <!-- 事件工单 --> |
| | | <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> |