车间能级提升-智能设备管理系统
zhuguifei
2025-05-14 496eaf6c859b868cac4aaaa8948b446d759b9d94
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
<route lang="json5">
{
  layout: 'default',
  needLogin: true,
  style: {
    navigationBarTitleText: '点检记录',
    'app-plus': {
      titleNView: {
        buttons: [
          {
            text: '提交',
            fontSize: '14px',
            color: '#FFFFFF',
          },
          {
            text: '',
            fontSize: '24px',
            color: '#FFFFFF',
          },
        ],
      },
    },
  },
}
</route>
<template>
  <z-paging ref="paging" v-model="dataList" :auto="false" @query="queryList" show-refresher-update-time>
    <template #top>
      <wd-card type="rectangle">
        <template #title>
          <view class="flex justify-between">
            <view class="flex items-center menu-title-box">
              <view class="menu-indicator"></view>
              <view class="ml-1 text-sm align-center">{{ inspSt.equName }}</view>
              <view class="text-color-gray ml-2 text-mini">{{ inspSt.assetNo }}</view>
            </view>
 
            <view class="flex items-center">
              <text class="text-color-gray text-mini">{{ inspSt.planTimeStr }}</text>
            </view>
          </view>
        </template>
        <view class="flex h-[140rpx]" items-center>
          <image class="slot-img text-center" src="/static/images/camera.png" />
          <view class="flex-1">
            <view class="text-color-gray text-xs mt-1 flex">
              <text class="mr-3">点检总数: {{ dataCount }}</text>
              |
              <text class="mx-3">已点检: {{ checkCount }}</text>
              |
              <text class="ml-3">未点检: {{ dataCount - checkCount }}</text>
            </view>
            <view class="text-color-gray text-xs mt-2 flex">
              <text class="mr-3">正常: {{ normalNum }}</text>
              |
              <text class="mx-3">异常: {{ abNormalNum }}</text>
            </view>
            <view class="text-color-gray text-xs mt-2 flex">
              <text>状态:</text>
              <template v-if="dataCount > 0 && dataCount === checkCount">
                <wd-icon class="icon-color-success" name="check-outline" size="34rpx"></wd-icon>
                <text class="ml-1">已完成</text>
              </template>
              <template v-else>
                <wd-icon class="icon-color-base" name="detection" size="40rpx"></wd-icon>
                <text class="ml-1">进行中</text>
              </template>
            </view>
            <view class="text-color-gray text-xs mt-2 flex">创建时间: {{ inspSt.createTime }}</view>
          </view>
        </view>
      </wd-card>
    </template>
 
    <view class="bg-base">
      <view class="w-full h-[24rpx]"></view>
      <wd-cell>
        <template #title>
          <text class="text-color-gray">点检项</text>
        </template>
        <wd-button size="small" type="text" @click.stop="toggleCollapse">
          {{ isAllExpanded ? '全部折叠' : '全部展开' }}
        </wd-button>
      </wd-cell>
      <wd-collapse v-model="collSelects" title="点检项" ref="collapseRef">
        <wd-collapse-item :name="item.id" v-for="(item, index) in dataList" disabled>
          <template #title="{ expanded, disabled, isFirst }">
            <view class="flex justify-between">
              <view class="flex justify-center items-center" style="max-width: 60%;">
                <text class="text-sm" >{{ item.inspName }}</text>
              </view>
 
              <view class="flex items-center">
                <wd-radio-group
                  v-model="item.inspResult"
                  inline
                  shape="dot"
                  @change="inspResultClick(item)"
                >
                  <wd-radio value="1">正常</wd-radio>
                  <wd-radio value="2">异常</wd-radio>
                </wd-radio-group>
                <wd-icon
                  v-if="expanded"
                  name="arrow-up"
                  size="30rpx"
                  class="icon-color-gray"
                ></wd-icon>
                <wd-icon v-else name="arrow-down" size="30rpx" class="icon-color-gray"></wd-icon>
              </view>
            </view>
          </template>
          <view class="text-color-gray text-xs flex justify-between">
            <text class="mr-3">点检人: {{ item.inspUserName }}</text>
            <text class="mx-3">点检时间: {{ item.inspTime }}</text>
          </view>
        </wd-collapse-item>
      </wd-collapse>
      <view class="w-full h-[24rpx]"></view>
      <wd-cell>
        <template #title>
          <text class="text-color-gray">其他</text>
        </template>
      </wd-cell>
      <view class="w-full h-[1px] bg-base"></view>
      <wd-textarea
        label="特记事项"
        label-width="200rpx"
        type="textarea"
        v-model="inspSt.specialNote"
        auto-height
        :maxlength="200"
        show-word-limit
        placeholder="请输入特记事项"
        clearable
      />
    </view>
  </z-paging>
</template>
 
<script setup lang="ts">
import { ref } from 'vue'
import { useUserStore, useAccessStore, useSystemConfigStore } from '@/store'
import {
  getInspStRecordList,
  getInspSt,
  updateInspectSt,
  updateInspRecordBatch,
} from '@/service/inspect'
import { useToast, useMessage } from 'wot-design-uni'
import type { CollapseInstance } from 'wot-design-uni/components/wd-collapse/types'
const message = useMessage()
const toast = useToast()
 
const collapseRef = ref<CollapseInstance>()
const isAllExpanded = ref(false)
const viewMode = ref<string>('Day')
 
// 定义接口
interface QueryParams {
  pageNum: number
  pageSize: number
  inspCode: string
  status?: string
}
 
interface InspSt {
  id: string
  inspCode: string
  equName: string
  assetNo: string
  planTimeStr?: string
  createTime?: string
  status: string
  inspUser: number | string
  specialNote: string
}
 
const dataChange = ref(false)
 
const userStore = useUserStore()
 
const collSelects = ref<string[]>([])
 
// 点检汇总数据(上个页面传值)
const inspSt = reactive<InspSt>({
  id: '',
  inspCode: '',
  equName: '',
  assetNo: '',
  planTimeStr: '',
  createTime: '',
  status: '',
  inspUser: '',
  specialNote: '',
})
 
const paging = ref(null)
const dataList = ref([])
 
const queryList = (pageNum?: number, pageSize?: number) => {
  // 这里的pageNo和pageSize会自动计算好,直接传给服务器即可
  // 这里的请求只是演示,请替换成自己的项目的网络请求,并在网络请求回调中通过paging.value.complete(请求回来的数组)将请求结果传给z-paging
  const params: QueryParams = {
    pageNum,
    pageSize,
    inspCode: inspSt.inspCode,
  }
 
  getInspStRecordList(params)
    .then((res: any) => {
      // 请勿在网络请求回调中给dataList赋值!!只需要调用complete就可以了
      paging.value.completeByTotal(res.rows, res.total)
    })
    .catch((res) => {
      // 如果请求失败写paging.value.complete(false),会自动展示错误页面
      // 注意,每次都需要在catch中写这句话很麻烦,z-paging提供了方案可以全局统一处理
      // 在底层的网络请求抛出异常时,写uni.$emit('z-paging-error-emit');即可
      paging.value.complete(false)
    })
}
 
function inspResultClick(item: any) {
  // userStore?.userInfo?.userId
}
 
const goBack = () => {
  uni.navigateBack()
}
onNavigationBarButtonTap((e) => {
  if (e.index === 0) {
    handleConfirm()
  }
})
 
const toggleCollapse = () => {
  isAllExpanded.value = !isAllExpanded.value
  collapseRef.value.toggleAll(isAllExpanded.value)
}
 
function handleConfirm() {
  if (!dataChange.value) {
    message.alert('请操作后提交!')
    return false
  }
  message
    .confirm({
      msg: '确定提交?',
      title: '提示',
      beforeConfirm: ({ resolve }) => {
        updateData(resolve)
      },
    })
    .then(() => {})
    .catch((error) => {
      console.log(error)
    })
}
 
function updateData(resolve: any) {
  const params = {
    inspRecordList: dataList.value,
  }
  // 更新点检记录
  updateInspRecordBatch(params)
    .then((res: any) => {
      updateInspSt(resolve)
      toast.success('操作成功')
    })
    .catch((res) => {
      console.error(res)
    })
}
function updateInspSt(resolve: any) {
  // 更新点检汇总
  inspSt.status = '1'
  updateInspectSt(inspSt)
    .then((res: any) => {
      paging.value.reload()
      uni.$emit('insp-st-refresh')
      resolve(true)
    })
    .catch((res) => {
      console.error(res)
    })
}
 
/**
 * 点检记录条目点击事件
 * @param item
 */
function itemClick(item: any) {}
 
watch(
  () => [...dataList.value], // 使用扩展运算符创建新数组以触发监听
  (newVal, oldVal) => {
    if (oldVal.length > 0) {
      dataChange.value = true
    }
  },
  { deep: true },
)
onLoad((options) => {
  // inspSt.id = options.id
  // inspSt.inspCode = options.inspCode
  // inspSt.equName = options.equName
  // inspSt.assetNo = options.assetNo
  // inspSt.planTimeStr = options.planTimeStr
  // inspSt.createTime = options.createTime
  // inspSt.specialNote = options?.specialNote
  // inspSt.inspUser = userStore?.userInfo?.userId
  viewMode.value = options.viewMode
  initData(options.id)
})
 
function initData(id: any) {
  getInspSt(id)
    .then((res: any) => {
      if (res?.id) {
        const inspCode = `${res?.equId}_${res?.planTime}_${viewMode.value}`
        inspSt.inspCode = inspCode
        Object.assign(inspSt, res)
        reloadData()
      } else {
        uni.showToast({
          title: '数据查询失败,请联系管理员',
          icon: 'none',
        })
      }
    })
    .catch((res) => {
      console.error(res)
    })
}
function reloadData() {
  paging.value.reload()
}
const dataCount = computed(() => dataList.value.length)
const checkCount = computed(() => dataList.value.filter((item) => item.status === '1').length)
const normalNum = computed(() => dataList.value.filter((item) => item.inspResult === '1').length)
const abNormalNum = computed(() => dataList.value.filter((item) => item.inspResult === '2').length)
</script>
 
<style scoped lang="scss">
.menu-title-box {
  height: 30rpx;
  line-height: 30rpx;
}
 
.slot-img {
  width: 72rpx;
  height: 72rpx;
  margin-right: 24rpx;
}
.text-mini {
  font-size: 22rpx;
}
 
.menu-indicator {
  width: 6rpx;
  height: 22rpx;
  border-radius: 10rpx;
  background-color: $uni-color-primary;
}
:deep(.wd-card__footer) {
  padding: 10rpx !important;
}
 
.col-title-box {
}
.bg-primary {
  background: $uni-color-primary;
}
:deep(.wd-navbar__text) {
  font-size: 26rpx;
  color: white;
}
:deep(.wd-icon-arrow-left:before),
:deep(.wd-navbar__title) {
  color: white;
  font-weight: 0;
  font-size: 32rpx;
}
</style>