车间能级提升-智能设备管理系统
zhuguifei
2025-05-14 cb19937239b42f51c6e8525450d08e93225117bc
eims-ui-mobile/src/pages/home/index.vue
@@ -8,149 +8,180 @@
}
</route>
<template>
  <view
    class="bg-base overflow-hidden"
    :style="{
      marginTop: safeAreaInsets?.top + 'px',
    }"
  <z-paging
    ref="paging"
    v-model="dataList"
    @query="queryList"
    show-refresher-update-time
    hide-empty-view
  >
    <view class="bg-white h-[80rpx] px-2 flex items-center justify-between">
      <view class="flex items-center" @click="handleUserInfo">
        <wd-icon name="user" size="40rpx" class="icon-color-base"></wd-icon>
        <text class="ml-1 text-color-base">{{ realName }}</text>
      </view>
      <view class="flex items-center">
        <wd-icon name="notification" size="40rpx" class="icon-color-base mr-3" @click="handleInfo"></wd-icon>
        <wd-icon name="tips" size="40rpx" class="icon-color-base mr-3" @click="handleInfo"></wd-icon>
        <wd-icon name="app" size="40rpx" class="icon-color-base" @click="handleInfo"></wd-icon>
      </view>
    </view>
    <view class="bg-white py-2 px-2">
      <wd-img class="w-full h-[260rpx]" src="/static/images/pic4.jpeg" />
    </view>
    <view class="bg-noti flex flex-row">
      <wd-notice-bar
        text="这是一条消息提示信息,这是一条消息提示信息,这是一条消息提示信息"
        prefix="clock"
        type="info"
        :scrollable="false"
        custom-class="flex-1  overflow-hidden"
      />
      <wd-button type="text" class="w-[120rpx]">查看</wd-button>
    </view>
    <view class="bg-white">
      <wd-card type="rectangle">
        <template #title>
          <view class="flex items-center menu-title-box">
            <view class="menu-indicator"></view>
            <view class="ml-1 text-xs">数据总览</view>
          </view>
        </template>
        <view class="flex flex-row justify-around">
          <view class="flex flex-col justify-center">
            <text class="text-lg text-center">0</text>
            <text class="text-color-gray">设备总数</text>
          </view>
          <view class="flex flex-col justify-center">
            <text class="text-lg text-center">0</text>
            <text class="text-color-gray">故障设备数</text>
          </view>
          <view class="flex flex-col justify-center">
            <text class="text-lg text-center">0</text>
            <text class="text-color-gray">未修复故障</text>
          </view>
    <template #top>
      <view class="bg-white h-[80rpx] px-2 flex items-center justify-between">
        <view class="flex items-center" @click="handleUserInfo">
          <wd-icon name="user" size="40rpx" class="icon-color-base"></wd-icon>
          <text class="ml-1 text-color-base">{{ realName }}</text>
        </view>
      </wd-card>
    </view>
    <view class="bg-white mt-2">
      <wd-card type="rectangle">
        <template #title>
          <view class="flex items-center menu-title-box">
            <view class="menu-indicator"></view>
            <view class="ml-1 text-xs">快捷操作</view>
          </view>
        </template>
        <wd-grid :column="4">
          <wd-grid-item
            use-slot
            class="flex justify-center items-center"
            v-for="(item, index) in commonMenu"
            :key="item.id"
            @click.stop="goItemPage(item.path)"
          >
            <image class="slot-img text-center" :src="item.icon" />
            <text>{{ item.name }}</text>
          </wd-grid-item>
        </wd-grid>
      </wd-card>
    </view>
    <view class="bg-white mt-2">
      <wd-card type="rectangle">
        <template #title>
          <view class="flex items-center menu-title-box">
            <view class="menu-indicator"></view>
            <view class="ml-1 text-xs">设备管理</view>
          </view>
        </template>
        <wd-grid :column="4">
          <wd-grid-item
            use-slot
            class="flex justify-center items-center"
            v-for="(item, index) in inspectMenu"
            :key="item.id"
            @click.stop="goItemPage(item.path)"
          >
            <image class="slot-img text-center" :src="item.icon" />
            <text>{{ item.name }}</text>
          </wd-grid-item>
        </wd-grid>
      </wd-card>
    </view>
    <view class="bg-white mt-2">
      <wd-card type="rectangle">
        <template #title>
          <view class="flex items-center menu-title-box">
            <view class="menu-indicator"></view>
            <view class="ml-1 text-xs">台账相关</view>
          </view>
        </template>
        <wd-grid :column="4">
          <wd-grid-item
            use-slot
            class="flex justify-center items-center"
            v-for="(item, index) in equMenu"
            @click.stop="goItemPage(item.path)"
          >
            <image class="slot-img text-center" :src="item.icon" />
            <text>{{ item.name }}</text>
          </wd-grid-item>
        </wd-grid>
      </wd-card>
    </view>
        <view class="flex items-center">
          <wd-icon
            name="notification"
            size="40rpx"
            class="icon-color-base mr-3"
            @click="handleInfo"
          ></wd-icon>
          <wd-icon
            name="tips"
            size="40rpx"
            class="icon-color-base mr-3"
            @click="handleInfo"
          ></wd-icon>
          <wd-icon name="app" size="40rpx" class="icon-color-base" @click="handleInfo"></wd-icon>
        </view>
      </view>
  </view>
    </template>
    <view class="bg-base overflow-hidden">
      <view class="bg-white py-2 px-2">
        <wd-img class="w-full h-[260rpx]" src="/static/images/pic4.jpeg" />
      </view>
      <view class="bg-noti flex flex-row">
        <wd-notice-bar
          text="这是一条消息提示信息,这是一条消息提示信息,这是一条消息提示信息"
          prefix="clock"
          type="info"
          :scrollable="false"
          custom-class="flex-1  overflow-hidden"
        />
        <wd-button type="text" class="w-[120rpx]">查看</wd-button>
      </view>
      <view class="bg-white">
        <wd-card type="rectangle">
          <template #title>
            <view class="flex items-center menu-title-box">
              <view class="menu-indicator"></view>
              <view class="ml-1 text-xs">数据总览</view>
            </view>
          </template>
          <view class="flex flex-row justify-around">
            <view class="flex flex-col justify-center">
              <text class="text-lg text-center">{{ equTotal }}</text>
              <text class="text-color-gray">设备总数</text>
            </view>
            <view class="flex flex-col justify-center">
              <text class="text-lg text-center">{{ fixtureTotal }}</text>
              <text class="text-color-gray">工具总数</text>
            </view>
            <view class="flex flex-col justify-center">
              <text class="text-lg text-center">{{ faultTotal }}</text>
              <text class="text-color-gray">未修复故障</text>
            </view>
          </view>
        </wd-card>
      </view>
      <view class="bg-white mt-2">
        <wd-card type="rectangle">
          <template #title>
            <view class="flex items-center menu-title-box">
              <view class="menu-indicator"></view>
              <view class="ml-1 text-xs">快捷操作</view>
            </view>
          </template>
          <wd-grid :column="4">
            <wd-grid-item
              use-slot
              class="flex justify-center items-center"
              v-for="(item, index) in commonMenu"
              :key="item.id"
              @click.stop="goItemPage(item)"
            >
              <image class="slot-img text-center" :src="item.icon" />
              <text>{{ item.name }}</text>
            </wd-grid-item>
          </wd-grid>
        </wd-card>
      </view>
      <view class="bg-white mt-2">
        <wd-card type="rectangle">
          <template #title>
            <view class="flex items-center menu-title-box">
              <view class="menu-indicator"></view>
              <view class="ml-1 text-xs">设备管理</view>
            </view>
          </template>
          <wd-grid :column="4">
            <wd-grid-item
              use-slot
              class="flex justify-center items-center"
              v-for="(item, index) in inspectMenu"
              :key="item.id"
              @click.stop="goItemPage(item)"
            >
              <image class="slot-img text-center" :src="item.icon" />
              <text>{{ item.name }}</text>
            </wd-grid-item>
          </wd-grid>
        </wd-card>
      </view>
      <view class="bg-white mt-2">
        <wd-card type="rectangle">
          <template #title>
            <view class="flex items-center menu-title-box">
              <view class="menu-indicator"></view>
              <view class="ml-1 text-xs">台账相关</view>
            </view>
          </template>
          <wd-grid :column="4">
            <wd-grid-item
              use-slot
              class="flex justify-center items-center"
              v-for="(item, index) in equMenu"
              @click.stop="goItemPage(item)"
            >
              <image class="slot-img text-center" :src="item.icon" />
              <text>{{ item.name }}</text>
            </wd-grid-item>
          </wd-grid>
        </wd-card>
      </view>
      <view class="w-full h-[100rpx]"></view>
    </view>
  </z-paging>
</template>
<script lang="ts" setup>
import { getAllMenusApi } from '@/service/menu'
import { useUserStore } from '@/store'
import { tabbarStore } from '@/components/fg-tabbar/tabbar'
import { getEquList } from '@/service/equ'
import { getRepairResList } from '@/service/repair'
import { getFixtureList } from '@/service/fixture'
import { receiveOrderRepair } from '@/service/mobile'
import { useToast, useMessage } from 'wot-design-uni'
import { ref } from 'vue'
const message = useMessage()
const toast = useToast()
defineOptions({
  name: 'Home',
})
const userStore = useUserStore()
const equTotal = ref(0)
const faultTotal = ref(0)
const fixtureTotal = ref(0)
const paging = ref(null)
const dataList = ref([])
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
const getAllMenus = async () => {
  const menuList = await getAllMenusApi()
  console.error(menuList)
}
function handleInfo() {
  uni.showToast({
@@ -159,25 +190,55 @@
  })
}
const goItemPage = (path: string) => {
  const url = `/${path}`
  uni.navigateTo({
    url,
  })
const queryList = (pageNum?: number, pageSize?: number) => {
  getEquList({ pageNum, pageSize })
    .then((res: any) => {
      equTotal.value = res?.total || 0
      queryRepairResList()
      queryFixtureList()
      paging.value.complete(true)
    })
    .catch((res) => {
      paging.value.complete(true)
    })
}
const goItemPage = (item: any) => {
  if (!item?.custom) {
    const url = `/${item.path}`
    uni.navigateTo({
      url,
    })
  } else {
    switch (item.name) {
      case '接单维修':
        handleSelectReq()
        break
    }
  }
}
onLoad(() => {
  // getAllMenus()
  queryEquList()
  queryRepairResList()
  queryFixtureList()
})
const commonMenu = reactive([
  {
    id: 1,
    name: '故障报修',
    icon: '/static/ico/ico20.png',
    icon: '/static/ico/ico7.png',
    path: 'pages/repair/repair-add',
  }
  },
  {
    id: 2,
    custom: true,
    name: '接单维修',
    icon: '/static/ico/ico8.png',
    path: 'pages/repair/repair-add',
  },
])
const equMenu = reactive([
@@ -240,6 +301,94 @@
}
const realName = computed(() => userStore?.userInfo?.realName)
/**
 * 选择报修单
 */
function handleSelectReq() {
  uni.navigateTo({
    url: '/pages/repair/req-list',
    events: {
      // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
      selectReq: function (data) {
        // 选择报修单后,修改报修单状态和新增维修工单
        const resCode = `WXD${data.data.code.slice(3)}`
        const deptId = userStore?.userInfo?.deptId
        const userId = userStore?.userInfo?.userId
        const resData = {
          reqId: data.data.id,
          reqCode: data.data.code,
          reqUser: data.data.reqUser,
          reqDept: data.data.reqDept,
          resCode,
          status: '1',
          resUser: userId,
          resDept: deptId,
        }
        receiveOrderRepair(resData)
          .then((res: any) => {
            if (res?.id) {
              toast.success(res?.msg || '操作成功')
              uni.navigateTo({
                url: `/pages/repair/res-detail?id=${res?.id}`,
              })
            } else {
              toast.error(res?.msg || '生成维修工单失败,请重试')
            }
          })
          .catch((res) => {
            toast.error(res?.msg || '生成维修工单失败,请重试')
          })
      },
    },
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit('OnSelectReq', { data: '维修单页面选择报修单' })
    },
  })
}
function queryEquList() {
  getEquList({
    page: 1,
    size: 10,
  })
    .then((res: any) => {
      equTotal.value = res?.total || 0
    })
    .catch((err) => {
      console.log(err)
    })
}
function queryRepairResList() {
  getRepairResList({
    page: 1,
    size: 10,
    status: '2',
  })
    .then((res: any) => {
      faultTotal.value = res?.total || 0
    })
    .catch((res) => {})
}
function queryFixtureList() {
  getFixtureList({
    page: 1,
    size: 10,
  })
    .then((res: any) => {
      fixtureTotal.value = res?.total || 0
    })
    .catch((res) => {})
}
function goToDetail(item) {
  uni.navigateTo({
    url: `/pages/repair/res-detail?id=${item.id}`,
  })
}
</script>
<style lang="scss" scoped>