|
@@ -2,21 +2,22 @@
|
|
|
import { ref, onMounted } from 'vue'
|
|
import { ref, onMounted } from 'vue'
|
|
|
import dayjs from 'dayjs'
|
|
import dayjs from 'dayjs'
|
|
|
import CountTo from '@/components/count-to1.vue'
|
|
import CountTo from '@/components/count-to1.vue'
|
|
|
|
|
+import { IotStatApi } from '@/api/pms/stat'
|
|
|
|
|
|
|
|
// --- 类型定义 ---
|
|
// --- 类型定义 ---
|
|
|
type TimeType = 'day' | 'month' | 'year'
|
|
type TimeType = 'day' | 'month' | 'year'
|
|
|
|
|
|
|
|
// 模拟的生产异常数据接口
|
|
// 模拟的生产异常数据接口
|
|
|
interface ProductionExceptions {
|
|
interface ProductionExceptions {
|
|
|
- standby: number // 待命
|
|
|
|
|
- maintenance: number // 维修
|
|
|
|
|
- exception: number // 异常
|
|
|
|
|
- material: number // 物资
|
|
|
|
|
- personnel: number // 人员
|
|
|
|
|
- weather: number // 天气
|
|
|
|
|
- thirdParty: number // 三方
|
|
|
|
|
- client: number // 甲方
|
|
|
|
|
- wellhead: number // 井口
|
|
|
|
|
|
|
+ standby: number // 井场待命
|
|
|
|
|
+ maintenance: number // 维修设备
|
|
|
|
|
+ exception: number // 异常/复杂
|
|
|
|
|
+ material: number // 物资影响
|
|
|
|
|
+ noWorkload: number // 无工作量
|
|
|
|
|
+ // weather: number // 天气
|
|
|
|
|
+ // thirdParty: number // 三方
|
|
|
|
|
+ // client: number // 甲方
|
|
|
|
|
+ // wellhead: number // 井口
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 模拟的巡检异常数据接口
|
|
// 模拟的巡检异常数据接口
|
|
@@ -42,11 +43,11 @@ const productionData = ref<ProductionExceptions>({
|
|
|
maintenance: 0,
|
|
maintenance: 0,
|
|
|
exception: 0,
|
|
exception: 0,
|
|
|
material: 0,
|
|
material: 0,
|
|
|
- personnel: 0,
|
|
|
|
|
- weather: 0,
|
|
|
|
|
- thirdParty: 0,
|
|
|
|
|
- client: 0,
|
|
|
|
|
- wellhead: 0
|
|
|
|
|
|
|
+ noWorkload: 0
|
|
|
|
|
+ // weather: 0,
|
|
|
|
|
+ // thirdParty: 0,
|
|
|
|
|
+ // client: 0,
|
|
|
|
|
+ // wellhead: 0
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
const inspectionData = ref<InspectionExceptions>({
|
|
const inspectionData = ref<InspectionExceptions>({
|
|
@@ -56,15 +57,15 @@ const inspectionData = ref<InspectionExceptions>({
|
|
|
|
|
|
|
|
// --- 配置项:用于 v-for 循环渲染 ---
|
|
// --- 配置项:用于 v-for 循环渲染 ---
|
|
|
const productionConfig = [
|
|
const productionConfig = [
|
|
|
- { key: 'standby', name: '待命' },
|
|
|
|
|
- { key: 'maintenance', name: '维修' },
|
|
|
|
|
- { key: 'exception', name: '异常' },
|
|
|
|
|
- { key: 'material', name: '物资' },
|
|
|
|
|
- { key: 'personnel', name: '人员' },
|
|
|
|
|
- { key: 'weather', name: '天气' },
|
|
|
|
|
- { key: 'thirdParty', name: '三方' },
|
|
|
|
|
- { key: 'client', name: '甲方' },
|
|
|
|
|
- { key: 'wellhead', name: '井口' }
|
|
|
|
|
|
|
+ { key: 'standby', name: '井场待命' },
|
|
|
|
|
+ { key: 'maintenance', name: '维修设备' },
|
|
|
|
|
+ { key: 'noWorkload', name: '无工作量' },
|
|
|
|
|
+ { key: 'material', name: '物资影响' },
|
|
|
|
|
+ { key: 'exception', name: '异常/复杂' }
|
|
|
|
|
+ // { key: 'weather', name: '天气' },
|
|
|
|
|
+ // { key: 'thirdParty', name: '三方' },
|
|
|
|
|
+ // { key: 'client', name: '甲方' },
|
|
|
|
|
+ // { key: 'wellhead', name: '井口' }
|
|
|
]
|
|
]
|
|
|
|
|
|
|
|
const inspectionConfig = [
|
|
const inspectionConfig = [
|
|
@@ -93,32 +94,28 @@ const fetchData = async () => {
|
|
|
|
|
|
|
|
console.log(`查询时间范围: ${start} - ${end}`)
|
|
console.log(`查询时间范围: ${start} - ${end}`)
|
|
|
|
|
|
|
|
- // 模拟网络延迟
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
- // 生成随机数模拟数据
|
|
|
|
|
- const random = (max: number) => Math.floor(Math.random() * max)
|
|
|
|
|
-
|
|
|
|
|
- // 假设这是 API 1: 获取生产异常
|
|
|
|
|
- productionData.value = {
|
|
|
|
|
- standby: random(20),
|
|
|
|
|
- maintenance: random(10),
|
|
|
|
|
- exception: random(5),
|
|
|
|
|
- material: random(15),
|
|
|
|
|
- personnel: random(5),
|
|
|
|
|
- weather: random(8),
|
|
|
|
|
- thirdParty: random(3),
|
|
|
|
|
- client: random(5),
|
|
|
|
|
- wellhead: random(10)
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- // 假设这是 API 2: 获取巡检异常
|
|
|
|
|
- inspectionData.value = {
|
|
|
|
|
- equipment: random(50),
|
|
|
|
|
- point: random(100)
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- loading.value = false
|
|
|
|
|
- }, 500)
|
|
|
|
|
|
|
+ const params = {
|
|
|
|
|
+ 'createTime[0]': start,
|
|
|
|
|
+ 'createTime[1]': end
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ const equipmentRes = await IotStatApi.getDeviceException(params)
|
|
|
|
|
+ const pointRes = await IotStatApi.getStatusException(params)
|
|
|
|
|
+
|
|
|
|
|
+ const productionRes = await IotStatApi.getProductionException(params)
|
|
|
|
|
+
|
|
|
|
|
+ inspectionData.value.equipment = equipmentRes.exceptionNum || 0
|
|
|
|
|
+ inspectionData.value.point = pointRes.value || 0
|
|
|
|
|
+
|
|
|
|
|
+ productionConfig.forEach((item) => {
|
|
|
|
|
+ productionData.value[item.key] =
|
|
|
|
|
+ productionRes.find((resItem) => resItem.name === item.name)?.count ?? 0
|
|
|
|
|
+ })
|
|
|
|
|
+
|
|
|
|
|
+ console.log('inspectionData :>> ', inspectionData)
|
|
|
|
|
+ console.log('productionData :>> ', productionData)
|
|
|
|
|
+
|
|
|
|
|
+ loading.value = false
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const handleTimeChange = () => {
|
|
const handleTimeChange = () => {
|
|
@@ -172,7 +169,7 @@ onMounted(() => {
|
|
|
:start-val="0"
|
|
:start-val="0"
|
|
|
:end-val="productionData[item.key as keyof ProductionExceptions]"
|
|
:end-val="productionData[item.key as keyof ProductionExceptions]"
|
|
|
>
|
|
>
|
|
|
- <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span>
|
|
|
|
|
|
|
+ <!-- <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span> -->
|
|
|
</CountTo>
|
|
</CountTo>
|
|
|
<!-- <div
|
|
<!-- <div
|
|
|
class="text-xl font-bold font-mono text-white group-hover:text-[#FFD740] transition-colors"
|
|
class="text-xl font-bold font-mono text-white group-hover:text-[#FFD740] transition-colors"
|
|
@@ -208,7 +205,7 @@ onMounted(() => {
|
|
|
:start-val="0"
|
|
:start-val="0"
|
|
|
:end-val="inspectionData[item.key as keyof InspectionExceptions]"
|
|
:end-val="inspectionData[item.key as keyof InspectionExceptions]"
|
|
|
>
|
|
>
|
|
|
- <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span>
|
|
|
|
|
|
|
+ <!-- <span class="text-xs leading-8 text-[var(--el-text-color-regular)]">暂无数据</span> -->
|
|
|
</CountTo>
|
|
</CountTo>
|
|
|
<!-- <div
|
|
<!-- <div
|
|
|
class="text-2xl font-bold font-mono text-white mt-1 group-hover:text-[#00E5FF] transition-colors"
|
|
class="text-2xl font-bold font-mono text-white mt-1 group-hover:text-[#00E5FF] transition-colors"
|