|
|
@@ -51,8 +51,12 @@
|
|
|
</el-select>
|
|
|
</el-form-item>-->
|
|
|
<el-form-item>
|
|
|
- <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
|
|
|
- <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
|
|
|
+ <el-button @click="handleQuery"
|
|
|
+ ><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button @click="resetQuery"
|
|
|
+ ><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button
|
|
|
+ >
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</el-card>
|
|
|
@@ -60,36 +64,32 @@
|
|
|
</el-row>
|
|
|
<el-row :gutter="16" class="mb-4">
|
|
|
<el-col :span="6">
|
|
|
- <el-card class="stat-card" shadow="never">
|
|
|
- <div class="flex flex-col">
|
|
|
- <div class="flex justify-between items-center text-gray-400">
|
|
|
- <span>昨日工单数量</span>
|
|
|
- <Icon icon="ep:menu" class="text-[32px] text-blue-400" />
|
|
|
- </div>
|
|
|
- <el-divider />
|
|
|
- <div class="flex justify-between items-center mb-1">
|
|
|
- <span class="text-gray-500 text-base font-medium" style="font-size: 14px"
|
|
|
- >总数量</span
|
|
|
- >
|
|
|
- <span class="text-gray-500 text-base font-medium" style="font-size: 14px"
|
|
|
- >未完成</span
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div class="flex justify-between items-center mb-1">
|
|
|
+ <el-card class="stat-card" shadow="never">
|
|
|
+ <div class="flex flex-col">
|
|
|
+ <div class="flex justify-between items-center text-gray-400">
|
|
|
+ <span>昨日工单数量</span>
|
|
|
+ <Icon icon="ep:menu" class="text-[32px] text-blue-400" />
|
|
|
+ </div>
|
|
|
+ <el-divider />
|
|
|
+ <div class="flex justify-between items-center mb-1">
|
|
|
+ <span class="text-gray-500 text-base font-medium" style="font-size: 14px">总数量</span>
|
|
|
+ <span class="text-gray-500 text-base font-medium" style="font-size: 14px">未完成</span>
|
|
|
+ </div>
|
|
|
+ <div class="flex justify-between items-center mb-1">
|
|
|
<span class="text-3xl font-bold text-gray-700">
|
|
|
{{ day.total }}
|
|
|
</span>
|
|
|
- <span class="text-3xl font-bold text-gray-700">
|
|
|
+ <span class="text-3xl font-bold text-gray-700">
|
|
|
{{ day.todo }}
|
|
|
</span>
|
|
|
+ </div>
|
|
|
+ <!-- <el-divider class="my-2" />-->
|
|
|
+ <!-- <div class="flex justify-between items-center text-gray-400 text-sm">-->
|
|
|
+ <!-- <span>今日新增</span>-->
|
|
|
+ <!-- <span class="text-green-500">+{{ statsData.productCategoryTodayCount }}</span>-->
|
|
|
+ <!-- </div>-->
|
|
|
</div>
|
|
|
- <!-- <el-divider class="my-2" />-->
|
|
|
- <!-- <div class="flex justify-between items-center text-gray-400 text-sm">-->
|
|
|
- <!-- <span>今日新增</span>-->
|
|
|
- <!-- <span class="text-green-500">+{{ statsData.productCategoryTodayCount }}</span>-->
|
|
|
- <!-- </div>-->
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
+ </el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="6">
|
|
|
<el-card class="stat-card" shadow="never">
|
|
|
@@ -100,12 +100,8 @@
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<div class="flex justify-between items-center mb-1">
|
|
|
- <span class="text-gray-500 text-base font-medium" style="font-size: 14px"
|
|
|
- >总数量</span
|
|
|
- >
|
|
|
- <span class="text-gray-500 text-base font-medium" style="font-size: 14px"
|
|
|
- >未完成</span
|
|
|
- >
|
|
|
+ <span class="text-gray-500 text-base font-medium" style="font-size: 14px">总数量</span>
|
|
|
+ <span class="text-gray-500 text-base font-medium" style="font-size: 14px">未完成</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between items-center mb-1">
|
|
|
<span class="text-3xl font-bold text-gray-700">
|
|
|
@@ -132,12 +128,8 @@
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<div class="flex justify-between items-center mb-1">
|
|
|
- <span class="text-gray-500 text-base font-medium" style="font-size: 14px"
|
|
|
- >总数量</span
|
|
|
- >
|
|
|
- <span class="text-gray-500 text-base font-medium" style="font-size: 14px"
|
|
|
- >未完成</span
|
|
|
- >
|
|
|
+ <span class="text-gray-500 text-base font-medium" style="font-size: 14px">总数量</span>
|
|
|
+ <span class="text-gray-500 text-base font-medium" style="font-size: 14px">未完成</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between items-center mb-1">
|
|
|
<span class="text-3xl font-bold text-gray-700">
|
|
|
@@ -164,12 +156,8 @@
|
|
|
</div>
|
|
|
<el-divider />
|
|
|
<div class="flex justify-between items-center mb-1">
|
|
|
- <span class="text-gray-500 text-base font-medium" style="font-size: 14px"
|
|
|
- >总数量</span
|
|
|
- >
|
|
|
- <span class="text-gray-500 text-base font-medium" style="font-size: 14px"
|
|
|
- >未完成</span
|
|
|
- >
|
|
|
+ <span class="text-gray-500 text-base font-medium" style="font-size: 14px">总数量</span>
|
|
|
+ <span class="text-gray-500 text-base font-medium" style="font-size: 14px">未完成</span>
|
|
|
</div>
|
|
|
<div class="flex justify-between items-center mb-1">
|
|
|
<span class="text-3xl font-bold text-gray-700">
|
|
|
@@ -197,19 +185,34 @@
|
|
|
<el-col :span="8" class="flex flex-col items-center">
|
|
|
<div ref="finishedChartRef" class="h-[160px] w-full"></div>
|
|
|
<div class="text-center mt-2">
|
|
|
- <span class="text-sm text-gray-600" style="text-decoration: underline;color: dodgerblue;cursor: pointer" @click="clickStatus('工单已执行')">已执行</span>
|
|
|
+ <span
|
|
|
+ class="text-sm text-gray-600"
|
|
|
+ style="text-decoration: underline; color: dodgerblue; cursor: pointer"
|
|
|
+ @click="clickStatus('工单已执行')"
|
|
|
+ >已执行</span
|
|
|
+ >
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="8" class="flex flex-col items-center">
|
|
|
<div ref="writeChartRef" class="h-[160px] w-full"></div>
|
|
|
<div class="text-center mt-2">
|
|
|
- <span class="text-sm text-gray-600" style="text-decoration: underline;color: orangered;cursor: pointer" @click="clickStatus('工单待执行')">待执行</span>
|
|
|
+ <span
|
|
|
+ class="text-sm text-gray-600"
|
|
|
+ style="text-decoration: underline; color: orangered; cursor: pointer"
|
|
|
+ @click="clickStatus('工单待执行')"
|
|
|
+ >待执行</span
|
|
|
+ >
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="8" class="flex flex-col items-center">
|
|
|
<div ref="ignoreChartRef" class="h-[160px] w-full"></div>
|
|
|
<div class="text-center mt-2">
|
|
|
- <span class="text-sm text-gray-600" style="text-decoration: underline;color: purple;cursor: pointer" @click="clickStatus('工单忽略')">忽略</span>
|
|
|
+ <span
|
|
|
+ class="text-sm text-gray-600"
|
|
|
+ style="text-decoration: underline; color: purple; cursor: pointer"
|
|
|
+ @click="clickStatus('工单忽略')"
|
|
|
+ >忽略</span
|
|
|
+ >
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -226,19 +229,34 @@
|
|
|
<el-col :span="8" 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" style="text-decoration: underline;color: dodgerblue;cursor: pointer" @click="clickStatus('设备已执行')">已填写</span>
|
|
|
+ <span
|
|
|
+ class="text-sm text-gray-600"
|
|
|
+ style="text-decoration: underline; color: dodgerblue; cursor: pointer"
|
|
|
+ @click="clickStatus('设备已执行')"
|
|
|
+ >已填写</span
|
|
|
+ >
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="8" 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" style="text-decoration: underline;color: orangered;cursor: pointer" @click="clickStatus('设备待执行')">未填写</span>
|
|
|
+ <div class="text-center mt-2">
|
|
|
+ <span
|
|
|
+ class="text-sm text-gray-600"
|
|
|
+ style="text-decoration: underline; color: orangered; cursor: pointer"
|
|
|
+ @click="clickStatus('设备待执行')"
|
|
|
+ >未填写</span
|
|
|
+ >
|
|
|
</div>
|
|
|
</el-col>
|
|
|
<el-col :span="8" class="flex flex-col items-center">
|
|
|
<div ref="ignoreTodayChartRef" class="h-[160px] w-full"></div>
|
|
|
- <div class="text-center mt-2" >
|
|
|
- <span class="text-sm text-gray-600" style="text-decoration: underline;color: purple;cursor: pointer" @click="clickStatus('设备忽略')">忽略</span>
|
|
|
+ <div class="text-center mt-2">
|
|
|
+ <span
|
|
|
+ class="text-sm text-gray-600"
|
|
|
+ style="text-decoration: underline; color: purple; cursor: pointer"
|
|
|
+ @click="clickStatus('设备忽略')"
|
|
|
+ >忽略</span
|
|
|
+ >
|
|
|
</div>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
@@ -275,7 +293,7 @@
|
|
|
|
|
|
<script setup lang="ts" name="Index">
|
|
|
import * as echarts from 'echarts/core'
|
|
|
-import { BarChart } from 'echarts/charts'; // 显式导入柱状图模块
|
|
|
+import { BarChart } from 'echarts/charts' // 显式导入柱状图模块
|
|
|
|
|
|
import {
|
|
|
GridComponent,
|
|
|
@@ -294,12 +312,11 @@ import {
|
|
|
const { currentRoute, push } = useRouter()
|
|
|
import { formatDate } from '@/utils/formatTime'
|
|
|
import { IotStatApi } from '@/api/pms/stat'
|
|
|
-import {defaultProps, handleTree} from "@/utils/tree";
|
|
|
-import {ref} from "vue";
|
|
|
-import {DeptTreeItem} from "@/api/system/dept";
|
|
|
-import * as DeptApi from "@/api/system/dept";
|
|
|
-import {useUserStore} from "@/store/modules/user";
|
|
|
-
|
|
|
+import { defaultProps, handleTree } from '@/utils/tree'
|
|
|
+import { ref } from 'vue'
|
|
|
+import { DeptTreeItem } from '@/api/system/dept'
|
|
|
+import * as DeptApi from '@/api/system/dept'
|
|
|
+import { useUserStore } from '@/store/modules/user'
|
|
|
|
|
|
// TODO @super:参考下 /Users/yunai/Java/yudao-ui-admin-vue3/src/views/mall/home/index.vue,拆一拆组件
|
|
|
|
|
|
@@ -372,38 +389,38 @@ const resetQuery = () => {
|
|
|
// 重置查询参数
|
|
|
queryParams.startTime = Date.now() - 7 * 24 * 60 * 60 * 1000
|
|
|
queryParams.endTime = Date.now()
|
|
|
- queryParams.deptId = useUserStore().getUser.deptId;
|
|
|
+ queryParams.deptId = useUserStore().getUser.deptId
|
|
|
queryParams.createTime = null
|
|
|
|
|
|
// 重新获取数据
|
|
|
getStats()
|
|
|
}
|
|
|
-const handleDateChange=()=>{
|
|
|
+const handleDateChange = () => {
|
|
|
handleQuery()
|
|
|
}
|
|
|
const clickStatus = (type) => {
|
|
|
- let status = '';
|
|
|
- const createTime = queryParams.createTime;
|
|
|
- const deptId = queryParams.deptId;
|
|
|
- debugger
|
|
|
+ let status = ''
|
|
|
+ const createTime = queryParams.createTime
|
|
|
+ const deptId = queryParams.deptId
|
|
|
+
|
|
|
if (type === '工单待执行') {
|
|
|
status = 'todo'
|
|
|
- push({ name: 'IotInspectOrdere', params:{deptId,status,createTime}})
|
|
|
+ push({ name: 'IotInspectOrdere', params: { deptId, status, createTime } })
|
|
|
} else if (type === '工单已执行') {
|
|
|
status = 'finished'
|
|
|
- push({name: 'IotInspectOrdere', params:{deptId,status,createTime}})
|
|
|
- } else if (type === '工单忽略'){
|
|
|
+ push({ name: 'IotInspectOrdere', params: { deptId, status, createTime } })
|
|
|
+ } else if (type === '工单忽略') {
|
|
|
status = 'ignore'
|
|
|
- push({name: 'IotInspectOrdere', params:{deptId,status,createTime}})
|
|
|
+ push({ name: 'IotInspectOrdere', params: { deptId, status, createTime } })
|
|
|
} else if (type === '设备忽略') {
|
|
|
status = 'ignore'
|
|
|
- push({name:'IotInspectOrderDetailStat', params:{deptId,status,createTime}})
|
|
|
- } else if (type==='设备待执行') {
|
|
|
+ push({ name: 'IotInspectOrderDetailStat', params: { deptId, status, createTime } })
|
|
|
+ } else if (type === '设备待执行') {
|
|
|
status = 'todo'
|
|
|
- push({name:'IotInspectOrderDetailStat', params:{deptId,status,createTime}})
|
|
|
- } else if (type==='设备已执行'){
|
|
|
+ push({ name: 'IotInspectOrderDetailStat', params: { deptId, status, createTime } })
|
|
|
+ } else if (type === '设备已执行') {
|
|
|
status = 'finished'
|
|
|
- push({name:'IotInspectOrderDetailStat', params:{deptId,status,createTime}})
|
|
|
+ push({ name: 'IotInspectOrderDetailStat', params: { deptId, status, createTime } })
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -425,14 +442,14 @@ const total = ref({
|
|
|
})
|
|
|
|
|
|
const status = ref({
|
|
|
- finished: 0,
|
|
|
- todo: 0,
|
|
|
- ignore:0
|
|
|
+ finished: 0,
|
|
|
+ todo: 0,
|
|
|
+ ignore: 0
|
|
|
})
|
|
|
const todayStatus = ref({
|
|
|
finished: 0,
|
|
|
todo: 0,
|
|
|
- ignore:0
|
|
|
+ ignore: 0
|
|
|
})
|
|
|
const typeData = ref({})
|
|
|
// 消息统计数据
|
|
|
@@ -512,7 +529,7 @@ const getStats = async () => {
|
|
|
initChart()
|
|
|
initCharts()
|
|
|
})
|
|
|
- IotStatApi.getInspectItemStatus(queryParams).then((res) =>{
|
|
|
+ IotStatApi.getInspectItemStatus(queryParams).then((res) => {
|
|
|
typeData.value = res
|
|
|
initChart()
|
|
|
initCharts()
|
|
|
@@ -528,7 +545,7 @@ const getStats = async () => {
|
|
|
|
|
|
/** 初始化图表 */
|
|
|
const initCharts = () => {
|
|
|
- const chart = echarts.init(statusChartRef.value);
|
|
|
+ const chart = echarts.init(statusChartRef.value)
|
|
|
chart.setOption({
|
|
|
tooltip: {
|
|
|
trigger: 'item'
|
|
|
@@ -537,8 +554,8 @@ const initCharts = () => {
|
|
|
// top: '5%',
|
|
|
// right: '10%',
|
|
|
// align: 'center',
|
|
|
- orient: 'horizontal', // 水平排列图例项
|
|
|
- bottom: '0%', // 放置在底部
|
|
|
+ orient: 'horizontal', // 水平排列图例项
|
|
|
+ bottom: '0%', // 放置在底部
|
|
|
icon: 'circle'
|
|
|
},
|
|
|
series: [
|
|
|
@@ -564,16 +581,17 @@ const initCharts = () => {
|
|
|
},
|
|
|
data: typeData.value
|
|
|
}
|
|
|
- ]})
|
|
|
+ ]
|
|
|
+ })
|
|
|
chart.on('click', (params) => {
|
|
|
- console.log('点击的数据值为:', params.value);
|
|
|
- console.log('点击的数据类型为:', params.data.type);
|
|
|
+ console.log('点击的数据值为:', params.value)
|
|
|
+ console.log('点击的数据类型为:', params.data.type)
|
|
|
debugger
|
|
|
- const createTime = queryParams.createTime;
|
|
|
- const deptId = queryParams.deptId;
|
|
|
+ const createTime = queryParams.createTime
|
|
|
+ const deptId = queryParams.deptId
|
|
|
const status = params.data.name
|
|
|
- push({ name: 'IotInspectItemStat', params:{deptId,status,createTime}})
|
|
|
- });
|
|
|
+ push({ name: 'IotInspectItemStat', params: { deptId, status, createTime } })
|
|
|
+ })
|
|
|
// echarts.init(statusChartRef.value).setOption({
|
|
|
// })
|
|
|
//待执行
|
|
|
@@ -584,10 +602,10 @@ const initCharts = () => {
|
|
|
'设备待执行'
|
|
|
)
|
|
|
initGaugeChart(
|
|
|
- ignoreTodayChartRef.value,
|
|
|
- todayStatus.value.ignore === undefined ? 0 : todayStatus.value.ignore,
|
|
|
- 'purple',
|
|
|
- '设备忽略'
|
|
|
+ ignoreTodayChartRef.value,
|
|
|
+ todayStatus.value.ignore === undefined ? 0 : todayStatus.value.ignore,
|
|
|
+ 'purple',
|
|
|
+ '设备忽略'
|
|
|
)
|
|
|
//已执行
|
|
|
initGaugeChart(
|
|
|
@@ -623,7 +641,7 @@ const initCharts = () => {
|
|
|
|
|
|
/** 初始化仪表盘图表 */
|
|
|
const initGaugeChart = (el: any, value: number, color: string, type: string) => {
|
|
|
- const chart = echarts.init(el);
|
|
|
+ const chart = echarts.init(el)
|
|
|
chart.setOption({
|
|
|
series: [
|
|
|
{
|
|
|
@@ -665,35 +683,35 @@ const initGaugeChart = (el: any, value: number, color: string, type: string) =>
|
|
|
data: [{ value: value, type: type }]
|
|
|
}
|
|
|
]
|
|
|
- });
|
|
|
+ })
|
|
|
|
|
|
// 添加点击事件监听器
|
|
|
chart.on('click', (params) => {
|
|
|
- console.log('点击的数据值为:', params.value);
|
|
|
- console.log('点击的数据类型为:', params.data.type);
|
|
|
- const createTime = queryParams.createTime;
|
|
|
- const deptId = queryParams.deptId;
|
|
|
- let status = '';
|
|
|
+ console.log('点击的数据值为:', params.value)
|
|
|
+ console.log('点击的数据类型为:', params.data.type)
|
|
|
+ const createTime = queryParams.createTime
|
|
|
+ const deptId = queryParams.deptId
|
|
|
+ let status = ''
|
|
|
if (params.data.type === '工单待执行') {
|
|
|
status = 'todo'
|
|
|
- push({ name: 'IotInspectOrdere', params:{deptId,status,createTime}})
|
|
|
+ push({ name: 'IotInspectOrdere', params: { deptId, status, createTime } })
|
|
|
} else if (params.data.type === '工单已执行') {
|
|
|
status = 'finished'
|
|
|
- push({name: 'IotInspectOrdere', params:{deptId,status,createTime}})
|
|
|
- } else if (params.data.type === '工单忽略'){
|
|
|
+ push({ name: 'IotInspectOrdere', params: { deptId, status, createTime } })
|
|
|
+ } else if (params.data.type === '工单忽略') {
|
|
|
status = 'ignore'
|
|
|
- push({name: 'IotInspectOrdere', params:{deptId,status,createTime}})
|
|
|
- } else if (params.data.type==='设备待执行') {
|
|
|
+ push({ name: 'IotInspectOrdere', params: { deptId, status, createTime } })
|
|
|
+ } else if (params.data.type === '设备待执行') {
|
|
|
status = 'todo'
|
|
|
- push({name:'IotInspectOrderDetailStat', params:{deptId,status,createTime}})
|
|
|
- } else if (params.data.type==='设备已执行'){
|
|
|
+ push({ name: 'IotInspectOrderDetailStat', params: { deptId, status, createTime } })
|
|
|
+ } else if (params.data.type === '设备已执行') {
|
|
|
status = 'finished'
|
|
|
- push({name:'IotInspectOrderDetailStat', params:{deptId,status,createTime}})
|
|
|
+ push({ name: 'IotInspectOrderDetailStat', params: { deptId, status, createTime } })
|
|
|
} else if (params.data.type === '设备忽略') {
|
|
|
status = 'ignore'
|
|
|
- push({name:'IotInspectOrderDetailStat', params:{deptId,status,createTime}})
|
|
|
+ push({ name: 'IotInspectOrderDetailStat', params: { deptId, status, createTime } })
|
|
|
}
|
|
|
- });
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
/** 初始化消息统计图表 */
|
|
|
@@ -838,8 +856,8 @@ const fetchChartData = async () => {
|
|
|
setTimeout(() => {
|
|
|
resolve({
|
|
|
months: generateMonthLabels(),
|
|
|
- faults: [20,30,100,40,20,50,70,80,60,90,100,100],
|
|
|
- repairs: [10,30,90,30,10,20,60,50,22,34,70,85],
|
|
|
+ faults: [20, 30, 100, 40, 20, 50, 70, 80, 60, 90, 100, 100],
|
|
|
+ repairs: [10, 30, 90, 30, 10, 20, 60, 50, 22, 34, 70, 85]
|
|
|
})
|
|
|
}, 300)
|
|
|
})
|
|
|
@@ -922,7 +940,7 @@ const handleResize = () => {
|
|
|
/** 初始化 */
|
|
|
onMounted(async () => {
|
|
|
deptList.value = handleTree(await DeptApi.getSimpleDeptList())
|
|
|
- queryParams.deptId = useUserStore().getUser.deptId;
|
|
|
+ queryParams.deptId = useUserStore().getUser.deptId
|
|
|
await getStats()
|
|
|
// await initChart()
|
|
|
// await initCharts()
|
|
|
@@ -933,5 +951,4 @@ onUnmounted(() => {
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-</style>
|
|
|
+<style lang="scss" scoped></style>
|