Browse Source

巡检统计点击跳转

lipenghui 1 month ago
parent
commit
3735a774a2

+ 3 - 1
src/api/pms/inspect/order/index.ts

@@ -18,7 +18,9 @@ export const IotInspectOrderApi = {
   getIotInspectOrderPage: async (params: any) => {
     return await request.get({ url: `/rq/iot-inspect-order/page`, params })
   },
-
+  getIotInspectDeviceStatusPage: async (params: any) => {
+    return await request.get({ url: `/rq/iot-inspect-order/device`, params })
+  },
   getDeviceIotInspectOrderPage: async (params: any) => {
     return await request.get({ url: `/rq/iot-inspect-order/device/page`, params })
   },

+ 3 - 0
src/api/pms/stat/index.ts

@@ -35,6 +35,9 @@ export const IotStatApi = {
   getInspectTodayStatus: async (params: any) => {
     return await request.get({ url: `/rq/stat/inspect/today/status` })
   },
+  getInspectDeviceStatus: async (params: any) => {
+    return await request.get({ url: `/rq/stat/inspect/device` })
+  },
   getMaintenanceDay: async (params: any) => {
     return await request.get({ url: `/rq/stat/maintenance/day` })
   },

+ 2 - 0
src/locales/en.ts

@@ -1070,9 +1070,11 @@ export default {
     InspectionRouteAdd:'InspectionRouteAdd',
     InspectionRouteEdit:"InspectionRouteEdit",
     InspectOrderAdd:'InspectOrderAdd',
+    InspectOrder:'InspectOrder',
     InspectPlanAdd:'InspectPlanAdd',
     InspectPlanEdit:'InspectPlanEdit',
     InspectOrderDetail:'InspectOrderDetail',
     FailureDetail:'FailureDetail',
   },
 }
+

+ 1 - 0
src/locales/zh-CN.ts

@@ -1069,6 +1069,7 @@ export default {
     InspectPlanAdd:'巡检计划添加',
     InspectPlanEdit:'巡检计划编辑',
     InspectOrderDetail:'巡检工单详情',
+    InspectOrder:'巡检工单',
     FailureDetail:'查看故障详情',
 
 

+ 26 - 0
src/router/modules/remaining.ts

@@ -803,6 +803,32 @@ const remainingRouter: AppRouteRecordRaw[] = [
       hidden: true
     },
     children: [
+      {
+        path: 'inspect/order/detail/index/:status?',
+        component: () => import('@/views/pms/inspect/order/detail/IotInspectOrderDetailStat.vue'),
+        name: 'IotInspectOrderDetailStat',
+        meta: {
+          noCache: false,
+          hidden: true,
+          canTo: true,
+          icon: 'ep:index',
+          title: t('rem.InspectOrder'),
+          activeMenu: '/inspect/order/detail/index'
+        }
+      },
+      {
+        path: 'inspect/order/index/:status?',
+        component: () => import('@/views/pms/inspect/order/index.vue'),
+        name: 'IotInspectOrdere',
+        meta: {
+          noCache: false,
+          hidden: true,
+          canTo: true,
+          icon: 'ep:index',
+          title: t('rem.InspectOrder'),
+          activeMenu: '/inspect/order/index'
+        }
+      },
       {
         path: 'inspect/order/add',
         component: () => import('@/views/pms/inspect/order/InspectOrderDetail.vue'),

+ 129 - 0
src/views/pms/inspect/order/detail/IotInspectOrderDetailStat.vue

@@ -0,0 +1,129 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+      <el-form-item :label="t('iotDevice.code')" prop="deviceCode" style="margin-left: 20px">
+        <el-input
+          v-model="queryParams.deviceCode"
+          :placeholder="t('iotDevice.codeHolder')"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-200px"
+        />
+      </el-form-item>
+      <el-form-item :label="t('iotDevice.name')" prop="deviceName">
+        <el-input
+          v-model="queryParams.deviceName"
+          :placeholder="t('iotDevice.nameHolder')"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-200px"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" />
+          {{ t('operationFill.search') }}</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> {{ t('operationFill.reset') }}</el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+      <!--      <el-table-column label="主键id" align="center" prop="id" />-->
+      <el-table-column :label="t('iotDevice.serial')" width="70" align="center">
+        <template #default="scope">
+          {{ scope.$index + 1 }}
+        </template>
+      </el-table-column>
+      <el-table-column :label="t('bomList.name')" align="center" prop="orderName" />
+      <el-table-column :label="t('iotDevice.code')" align="center" prop="deviceCode" />
+      <el-table-column :label="t('monitor.deviceName')" align="center" prop="deviceName" />
+      <el-table-column :label="t('operationFill.status')" align="center" prop="ifNormal" />
+<!--      <el-table-column :label="t('inspect.createName')" align="center" prop="createName" />-->
+      <!--      <el-table-column :label="t('common.sort')" align="center" prop="sort" />-->
+      <!--      <el-table-column :label="t('form.remark')" align="center" prop="remark" />-->
+
+      <el-table-column
+        :label="t('common.createTime')"
+        align="center"
+        prop="createTime"
+        width="180px"
+      />
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗:添加/修改 -->
+</template>
+
+<script setup lang="ts">
+import { IotInspectItemApi, IotInspectItemVO } from '@/api/pms/inspect/item'
+import {IotInspectOrderApi} from "@/api/pms/inspect/order";
+
+/** 巡检项 列表 */
+defineOptions({ name: 'IotInspectOrderDetailStat' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+const { params } = useRoute()
+const loading = ref(true) // 列表的加载中
+const list = ref<IotInspectItemVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  status: undefined,
+  deviceCode: undefined,
+  deviceName: undefined,
+})
+const productClassifyList = ref<Tree[]>([]) // 树形结构
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await IotInspectOrderApi.getIotInspectDeviceStatusPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 初始化 **/
+onMounted(async () => {
+  debugger
+  if (params.status) {
+    queryParams.status = params.status
+  }
+  await getList()
+})
+</script>

+ 6 - 2
src/views/pms/inspect/order/index.vue

@@ -166,16 +166,17 @@ import IotInspectOrderForm from './IotInspectOrderForm.vue'
 import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
 import DeptTree from '@/views/system/user/DeptTree.vue'
 
-const { push } = useRouter()
 
+const { push } = useRouter()
+const { params } = useRoute()
 /** 巡检工单 列表 */
 defineOptions({ name: 'IotInspectOrder' })
 
 const message = useMessage() // 消息弹窗
 const { t } = useI18n() // 国际化
-
 const loading = ref(true) // 列表的加载中
 const list = ref<IotInspectOrderVO[]>([]) // 列表的数据
+const status = params.status
 const total = ref(0) // 列表的总页数
 const queryParams = reactive({
   pageNo: 1,
@@ -262,6 +263,9 @@ const handleExport = async () => {
 
 /** 初始化 **/
 onMounted(() => {
+  if (params.status) {
+    queryParams.status = params.status
+  }
   getList()
 })
 </script>

+ 44 - 18
src/views/pms/stat/inspect.vue

@@ -137,20 +137,20 @@
       <el-card class="chart-card" shadow="never">
         <template #header>
           <div class="flex items-center">
-            <span class="text-base font-medium text-gray-600">今日工单状态统计</span>
+            <span class="text-base font-medium text-gray-600">设备状态统计</span>
           </div>
         </template>
         <el-row class="h-[220px]">
           <el-col :span="12" class="flex flex-col items-center">
             <div ref="writeTodayChartRef" class="h-[160px] w-full"></div>
             <div class="text-center mt-2">
-              <span class="text-sm text-gray-600">待执行</span>
+              <span class="text-sm text-gray-600">未填写</span>
             </div>
           </el-col>
           <el-col :span="12" class="flex flex-col items-center">
             <div ref="finishedTodayChartRef" class="h-[160px] w-full"></div>
             <div class="text-center mt-2">
-              <span class="text-sm text-gray-600">已执行</span>
+              <span class="text-sm text-gray-600">已填写</span>
             </div>
           </el-col>
         </el-row>
@@ -160,7 +160,7 @@
       <el-card class="chart-card" shadow="never">
         <template #header>
           <div class="flex items-center">
-            <span class="text-base font-medium text-gray-600">巡检工单状态统计</span>
+            <span class="text-base font-medium text-gray-600">工单状态统计</span>
           </div>
         </template>
         <el-row class="h-[220px]">
@@ -216,6 +216,7 @@ import {
   IotStatisticsDeviceMessageSummaryRespVO,
   IotStatisticsSummaryRespVO
 } from '@/api/iot/statistics'
+const { currentRoute, push } = useRouter()
 import { formatDate } from '@/utils/formatTime'
 import { IotStatApi } from '@/api/pms/stat'
 
@@ -371,7 +372,7 @@ const getStats = async () => {
     status.value = res
     initCharts()
   })
-  IotStatApi.getInspectTodayStatus().then((res) => {
+  IotStatApi.getInspectDeviceStatus().then((res) => {
     todayStatus.value = res
     initCharts()
   })
@@ -390,50 +391,55 @@ const initCharts = () => {
   initGaugeChart(
     writeTodayChartRef.value,
     todayStatus.value.todo === undefined ? 0 : todayStatus.value.todo,
-    '#05b'
+    '#05b',
+    '设备待执行'
   )
   //已执行
   initGaugeChart(
     finishedTodayChartRef.value,
     todayStatus.value.finished === undefined ? 0 : todayStatus.value.finished,
-    '#f50'
+    '#f50',
+    '设备已执行'
   )
-  // 待执行
+  // 工单待执行
   initGaugeChart(
     writeChartRef.value,
     status.value.todo === undefined ? 0 : status.value.todo,
-    '#05b'
+    '#05b',
+    '工单待执行'
   )
-  //已执行
+  //工单已执行
   initGaugeChart(
     finishedChartRef.value,
     status.value.finished === undefined ? 0 : status.value.finished,
-    '#f50'
+    '#f50',
+    '工单已执行'
   )
   // 消息量统计
   //initMessageChart()
 }
 
 /** 初始化仪表盘图表 */
-const initGaugeChart = (el: any, value: number, color: string) => {
-  echarts.init(el).setOption({
+const initGaugeChart = (el: any, value: number, color: string, type: string) => {
+  const chart = echarts.init(el);
+  chart.setOption({
     series: [
       {
         type: 'gauge',
         startAngle: 360,
         endAngle: 0,
         min: 0,
-        max: statsData.value.deviceCount || 100, // 使用设备总数作为最大值
+        max: value, // 使用设备总数作为最大值
         progress: {
           show: true,
-          width: 12,
+          width: 22,
           itemStyle: {
             color: color
           }
         },
         axisLine: {
           lineStyle: {
-            width: 12,
+            width: 22,
             color: [[1, '#E5E7EB']]
           }
         },
@@ -454,10 +460,30 @@ const initGaugeChart = (el: any, value: number, color: string) => {
             return `${value} `
           }
         },
-        data: [{ value: value }]
+        data: [{ value: value, type: type }]
       }
     ]
-  })
+  });
+
+  // 添加点击事件监听器
+  chart.on('click', (params) => {
+    console.log('点击的数据值为:', params.value);
+    console.log('点击的数据类型为:', params.data.type);
+    let status = '';
+    if (params.data.type === '工单待执行') {
+      status = 'todo'
+      push({ name: 'IotInspectOrdere', params: { status} })
+    } else if (params.data.type === '工单已执行') {
+      status = 'finished'
+      push({name: 'IotInspectOrdere', params: { status} })
+    } else if (params.data.type==='设备待执行') {
+      status = 'todo'
+      push({name:'IotInspectOrderDetailStat', params:{status}})
+    } else if (params.data.type==='设备已执行'){
+      status = 'finished'
+      push({name:'IotInspectOrderDetailStat', params:{status}})
+    }
+  });
 }
 
 /** 初始化消息统计图表 */