Browse Source

故障详情

master
liup 1 week ago
parent
commit
b2fa656a41
5 changed files with 559 additions and 28 deletions
  1. +6
    -0
      pages.json
  2. +386
    -0
      pages/main/task/page2/device-error-info.vue
  3. +157
    -25
      pages/main/task/page2/device-error.vue
  4. +1
    -1
      pages/main/task/task.vue
  5. +9
    -2
      store/index.js

+ 6
- 0
pages.json View File

@@ -45,6 +45,12 @@
"style": {
"navigationBarTitleText": "故障记录"
}
},
{
"path": "pages/main/task/page2/device-error-info",
"style": {
"navigationBarTitleText": "故障详情"
}
},{
"path": "pages/login/login",
"style": {


+ 386
- 0
pages/main/task/page2/device-error-info.vue View File

@@ -0,0 +1,386 @@
<template>
<view class="page">
<!-- 顶部自定义导航 -->
<tn-nav-bar fixed :bottomShadow="true" :beforeBack="beforeBack">
<view class="font-size">
故障详情
</view>
</tn-nav-bar>
<view class="tn-classify__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}"></view>
<!-- 项目信息 -->
<view class="project-info white_bg" :style="{marginBottom: 20 + 'px',background:'#ffffff'}">
<view
class="item-container"
>
<view class="item" >
<view class="left">
<text class="title">标题:</text>
<view class="left-text content">{{info.id}}</view>
</view>
</view>
</view>
<view class="item-container">
<view class="item" >
<view class="left">
<text class="title">设备编码:</text>
<view class="left-text content">{{info.deviceId}}</view>
</view>
</view>
</view>
<view class="item-container">
<view class="item" >
<view class="left">
<text class="title">设备名:</text>
<view class="left-text content">{{info.deviceName}}</view>
</view>
</view>
</view>
<view class="item-container">
<view class="item" >
<view class="left">
<text class="title">创建时间:</text>
<view class="left-text content">{{info.createTime}}</view>
</view>
</view>
</view>
<view class="item-container">
<view class="item" >
<view class="left">
<text class="title">创建人:</text>
<view class="left-text content">{{info.creator}}</view>
</view>
</view>
</view>
<view class="item-container">
<view class="item" >
<view class="left">
<text class="title">状态:</text>
<view class="left-text content"
:class="['status-' + info.status + '-color']">{{getStatusText(info.status)}}</view>
</view>
</view>
</view>
<view class="item-container">
<view class="item" >
<view class="left">
<text class="title">描述:</text>
<view class="left-text content">{{info.desc}}</view>
</view>
</view>
</view>
<tn-form-item style="margin-left: 30rpx;" :borderBottom="false" :labelWidth="160" label="图片:" prop="photo" :labelPosition="labelPosition" :labelAlign="labelAlign">
<tn-image-upload :maxCount="0" :deleteable="false" :autoUpload="false" :fileList="info.photo" @on-list-change="imageUploadChange"></tn-image-upload>
</tn-form-item>
</view>
<view class="project-info" :style="{paddingLeft:50+'rpx',paddingRight:50+'rpx'}">
<tn-form-item :borderBottom="false" label="修改状态" :labelWidth="140" prop="status" :labelPosition="labelPosition" :labelAlign="labelAlign">
<tn-input v-model="updateStatus" type="select" placeholder="请选择" :border="true" :selectOpen="actionSheetShow" @click="actionSheetShow = true"></tn-input>
</tn-form-item>
<tn-button style="margin-top: 20rpx;margin-bottom: 20rpx;" backgroundColor="#01BEFF" fontColor="#FFFFFF"
width="100%" height="80rpx" @click="clickUpdate">修 改</tn-button>
</view>
<tn-action-sheet
v-model="actionSheetShow"
:list="statusList"
@click="actionSheetClick"
></tn-action-sheet>
<view style="height: 1rpx;" />
<tn-toast ref="toast"></tn-toast>
</view>
</template>

<script>
// import { nfcinit, nfcclose } from '@/utils/rfid';
export default {
computed: {
// 假设你已经在 store 中映射了 vuex_user 状态
vuex_user() {
return this.$store.state.vuex_user;
}
},
data() {
return {
updateStatus:'',
statusList:[
{
text: '未解决'
},
{
text: '已解决'
},
{
text: '忽略'
}
],
labelPosition: 'left',
labelAlign: 'left',
border: false,
actionSheetShow: false,
info:{
id:'165468795',
title:'原件损坏',
deviceId:'45464',
deviceName:'WOK1',
createTime:'2024/12/10',
status:0,//0未解决 1已解决 2忽略
desc:'滚动轴卡顿asssssssssssssssssssssssssssssssssssssssss',
creator:'李四',
solver:'王工',
photo:[]
}
};
},

onLoad(option) {
this.info = this.$store.state.deviceErrorInfo;
console.log("device-error-info onload")
console.log(this.info)
},
onShow() {
},
onHide() {
},

methods: {
clickUpdate(){
var status = 0;
if(this.updateStatus === '未解决'){
status = 0
}else if(this.updateStatus === '已解决'){
status = 1
}else if(this.updateStatus === '忽略'){
status = 2
}
this.info.status = status
this.$refs.toast.show({
title: '修改成功',
icon: 'success',
duration: 1000
})
setTimeout(() => {
this.$store.dispatch('updateDeviceErrorInfo', null)
uni.navigateBack({
delta: 1
});
}, 1000);
},
actionSheetClick(index){
uni.hideKeyboard()
this.updateStatus = this.statusList[index].text
console.log("actionSheetClick index="+index +this.search.status)
},
getStatusText(status){
if(status==0){
return '未解决'
}else if(status==1){
return '已解决'
}else if(status==2){
return '忽略'
}
},
beforeBack(){
console.log("beforeBack")
this.$store.dispatch('updateDeviceErrorInfo', null)
uni.navigateBack({
});
},
}
};
</script>

<style lang="scss" scoped>
page {
background-color: #ededed;
}
.page{
width: 100%;
height: 100vh;
background-color: #ededed;
}

.font-size{
font-size: 36rpx;
font-weight: bold;
}
.text-box {
justify-content: center;
align-items: center;
text-align: center;
font-size: 32rpx;
color: #909090
}
.button{
display: flex;
margin: 60rpx 20rpx 20rpx 20rpx;
flex-wrap: nowrap;
align-items:center;
position: flex;
background-color: transparent;
border-radius: 15rpx;
}
.group-content{
padding: 20rpx;
display: flex;
margin: 40rpx 20rpx 20rpx 20rpx;
background-color: white;
position: flex;
border-radius: 15rpx;
flex-wrap: nowrap;
box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(85, 170, 255, 0.2);
align-items:center;
}
.content{
flex: 1;
width: 100vw;
}

.icon-size{
height: 100rpx;
width: 100rpx;
font-size: 60rpx;
}
.icon-padding{
padding-left: 10rpx;
padding-right: 10rpx;
}
.input-bg{
height: 80rpx;
border: 1rpx solid #C6D1D8;
border-radius: 15rpx;
padding-left: 15rpx;
padding-right: 15rpx;
}
.flex-container {
&--fix-height {
height: 360rpx;
}

&--has-height {
height: 140rpx;
padding: 20rpx;
}
}

.flex-item {
display: inline-block; // 消除共享margin属性
height: 74rpx;
border-radius: 15rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 40rpx;
}
$animation-time: 0.15s;
$animation-delay: 0.05s;
$top-container-height: 500rpx;
@keyframes project-info-item-enter-animation {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
/* 项目信息 start */
.project-info {
position: relative;
width: calc(100% - 60rpx);
margin: 0rpx auto;
border-radius: 30rpx;
margin-top: 30rpx;
margin-bottom: 30rpx;
overflow: hidden;
background-color: white;
height: auto;
padding: 20rpx 0rpx 20rpx 0rpx;

.item-container {
position: relative;
width: calc(100% - 60rpx);
padding: 20rpx 30rpx 20rpx 30rpx;

transform: translateX(-100%);

@for $i from 1 through 11 {
&:nth-child(#{$i}) {
animation: project-info-item-enter-animation
$animation-time
ease
forwards;
animation-delay: $animation-delay + $i * 0.1s;
background-color: #ffffff;
}
}
}

.item {
position: relative;
width: calc(100% - 60rpx);
display: flex;
align-items: center;
justify-content: space-between;
color: var(--tn-text-color-primary);

.left {
display: flex;
align-items: center;

.left-icon {
width: 44rpx;
height: 44rpx;
overflow: hidden;
border-radius: 50%;
color: var(--tn-color-white);
display: flex;
align-items: center;
justify-content: center;
line-height: 1;

&.github {
font-size: 38rpx;
}
&.wechat {
font-size: 34rpx;
}
}
.left-text {
margin-left: 26rpx;
}
}
}
}
/* 项目信息 end */
.title{
font-size: 32rpx;
// font-weight: bold;
}
.content{
font-size: 30rpx;
color: gray;
white-space: normal; /* 或者使用 pre-wrap */
word-wrap: break-word; /* 处理长单词换行 */
margin-right: 10px;
padding-right: 10rpx;
width: 540rpx;
}
.status-0-color{
color: coral;
}
.status-1-color{
color: green;
}
.status-2-color{
color: gray;
}
</style>

+ 157
- 25
pages/main/task/page2/device-error.vue View File

@@ -1,7 +1,9 @@
<template>
<view class="pages-a">
<view class=" bg-frosted-glass" :style="{height: 150+vuex_custom_bar_height+'rpx'}"></view>
<view class=" bg-frosted-glass" :style="{height: 150+vuex_custom_bar_height+'rpx'}">
</view>
<!-- tabs -->
<view class="tabs-fixed ">
<view class="tn-flex tn-padding-top-sm "
@@ -13,10 +15,15 @@
</view>
</view>
</view>
<view class="top_title" :style="{marginTop: vuex_custom_bar_height-10 + 'rpx'}"
>
<view class="title1" @click="reBack">
<text class="tn-icon-left"></text>
返回
</view>
<view class="title">设备故障</view>
<view class="title2" v-if="current==1" @click="search">
<view class="title2" v-if="current==1" @click="showDialog = true">
筛选
<text class="tn-icon-search"></text>
</view>
@@ -30,9 +37,9 @@
<tn-input v-model="model.title" type="text" placeholder="请输入标题" :border="border"></tn-input>
</tn-form-item>
<tn-form-item class="textSize" label="描述" labelPosition="top" prop="desc" :required="true">
<tn-input v-model="model.desc" type="textarea" placeholder="请描述故障内容" :border="border" :selectOpen="actionSheetShow" ></tn-input>
<tn-input :autoHeight="true" v-model="model.desc" type="textarea" placeholder="请描述故障内容" :border="border" :selectOpen="actionSheetShow" ></tn-input>
</tn-form-item>
<tn-form-item class="textSize" label="设备名" prop="desc" :required="true" :labelPosition="labelPosition" :labelAlign="labelAlign">
<tn-form-item class="textSize" label="设备名" prop="desc" :labelPosition="labelPosition" :labelAlign="labelAlign">
<tn-input v-model="model.diviceName" type="text" placeholder="请输入设备名称" :border="border" :selectOpen="actionSheetShow" ></tn-input>
</tn-form-item>
<tn-form-item class="textSize" label="设备号" prop="desc" :labelPosition="labelPosition" :labelAlign="labelAlign">
@@ -43,17 +50,17 @@
</view>
</tn-form-item>
<tn-form-item class="textSize" :labelWidth="160" label="上传图片" prop="photo" :labelPosition="labelPosition" :labelAlign="labelAlign">
<tn-image-upload :fileList="model.photo" @on-list-change="imageUploadChange"></tn-image-upload>
<tn-image-upload :autoUpload="false" :fileList="model.photo" @on-list-change="imageUploadChange"></tn-image-upload>
</tn-form-item>
</tn-form>
<tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" width="100%" height="80rpx" @click="submit">提交</tn-button>
<tn-button style="margin-top: 20rpx;" backgroundColor="#cbcbcb" fontColor="#FFFFFF" width="180rpx" height="80rpx" @click="clear">重 置</tn-button>
<tn-button style="margin-top: 20rpx;" backgroundColor="#01BEFF" fontColor="#FFFFFF" width="100%" height="80rpx" @click="submit">提 交</tn-button>
</view>

<!-- 故障记录 -->
<view v-if="current==1" class="tn-padding" :style="{marginTop: vuex_custom_bar_height+optionHeight+50 + 'rpx'}">
<view v-show="isLogin" style="position: relative;" @click="itemClick(item, index)"
class="article-shadow tn-bg-white tn-padding tn-margin-bottom" v-for="(item, index) in dataList"
class="article-shadow tn-bg-white tn-padding tn-margin-bottom" v-for="(item, index) in dataNewList"
:key="item.id">
<view style="margin-top: 0rpx;" class="text-container-row tn-color-gray tn-text-sm tn-text-ellipsis">
@@ -93,14 +100,33 @@
<tn-empty v-else text="请先登录" mode="data" :imgWidth="200" :imgHeight="200"></tn-empty>
</view>

<tn-popup class="dialog" v-model="showDialog" mode="right">
<view :style="{paddingLeft:50+'rpx',paddingRight:50+'rpx'}">
<view :style="{marginTop: 100 + 'rpx',fontSize:32+'rpx'}" >筛选条件</view>
<tn-form-item :style="{marginTop: 80 + 'rpx',fontSize:32+'rpx'}" label="查询" prop="desc" :labelPosition="labelPosition" :labelAlign="labelAlign">
<tn-input v-model="search.name" type="text" placeholder="输入标题或描述" :border="true"></tn-input>
</tn-form-item>
<tn-form-item label="状态" prop="status" :labelPosition="labelPosition" :labelAlign="labelAlign">
<tn-input v-model="search.status" type="select" placeholder="请选择状态" :border="true" :selectOpen="actionSheetShow" @click="actionSheetShow = true"></tn-input>
</tn-form-item>
<tn-button style="margin-top: 50rpx;" backgroundColor="#01BEFF" fontColor="#FFFFFF"
width="100%" height="80rpx" @click="clickSearch">查 询</tn-button>
</view>
</tn-popup>
<tn-action-sheet
v-model="actionSheetShow"
:list="statusList"
@click="actionSheetClick"
></tn-action-sheet>
<w-loading text="拼命处理中..." mask="true" click="true" ref="loading"></w-loading>
<tn-toast ref="toast"></tn-toast>
<view class='tn-tabbar-height'></view>
<view class="bg-tabbar-shadow"></view>

</view>
</template>

<script>
@@ -116,7 +142,22 @@
components: {dynamicDemoTemplate},
data() {
return {
statusList:[
{
text: '未解决'
},
{
text: '已解决'
},
{
text: '忽略'
}
],
textSize:32,
search:{
name:'',
status:'未解决',
},
model: {
title: '',
desc: '',
@@ -124,6 +165,7 @@
deviceName: '',
photo: [],
},
showDialog:false,
errorType: ['message','border-bottom','toast'],
labelPosition: 'left',
labelAlign: 'left',
@@ -154,6 +196,7 @@
size: 10
},
dataList: [],
dataNewList: [],
loadmore: true,
status: 'nomore',
isLogin: true,
@@ -183,19 +226,91 @@
}
},
methods: {
clickSearch(){
console.log("clickSearch start")
var newList = []
var status = 0
if(this.search.status === '未解决'){
status = 0
}else if(this.search.status === '已解决'){
status = 1
}else if(this.search.status === '忽略'){
status = 2
}
console.log("clickSearch status="+status+" "+this.search.name)
if(this.search.name != ''){
this.dataList.forEach((item, index)=>{
if((item.title.includes(this.search.name)||
item.desc.includes(this.search.name))&&item.status === status ){
newList.push(item)
}
})
}else{
this.dataList.forEach((item, index)=>{
if(item.status === status ){
newList.push(item)
}
})
}
this.dataNewList = []
this.dataNewList.push(...newList)
console.log("clickSearch end")
},
actionSheetClick(index){
uni.hideKeyboard()
this.search.status = this.statusList[index].text
console.log("actionSheetClick index="+index +this.search.status)
},
reBack(){
uni.navigateBack({
});
},
clear(){
this.model.title = ''
this.model.desc = ''
this.model.deviceId = ''
this.model.deviceName = ''
this.model.photo = []
},
// 表单提交
submit() {
this.$refs.form.validate(valid => {
if (valid) {
if(this.model.title.length === 0){
this.$refs.toast.show({
title: '请输入标题',
duration: 1000
})
return
}else if(this.model.desc.length === 0){
this.$refs.toast.show({
title: '请填写描述内容',
duration: 1000
})
return
}
const data = {
id:'',
title:this.model.title,
deviceId:this.model.deviceId,
deviceName:this.model.deviceName,
createTime:new Date(),
status:0,
desc:this.model.desc,
creator:this.$store.state.vuex_user.userName,
solver:''
}
this.dataList.unshift(data)
this.dataNewList.unshift(data)
this.$refs.toast.show({
title: '验证通过',
duration: 1000
title: '提交成功',
duration: 500
})
} else {
this.$refs.toast.show({
title: '验证失败',
duration: 1000
duration: 500
})
}
})
@@ -213,16 +328,14 @@
}
});
},
search(){
this.$refs.toast.show({
title: '筛选',
duration: 1000
})
},
itemClick(){
itemClick(item,index){
this.$store.dispatch('updateDeviceErrorInfo', item)
uni.navigateTo({
url: '/pages/main/task/page2/device-error-info'
});
},
getStatusText(status,finishNum,totalNum){
getStatusText(status){
if(status==0){
return '未解决'
}else if(status==1){
@@ -280,6 +393,7 @@
creator:'李四',
solver:'王工'
}]
this.dataNewList = this.dataList
this.$refs.loading.close()
},500);
}else{
@@ -377,6 +491,7 @@
solver:'王工'
}]
this.dataList.push(...data1)
this.dataNewList.push(...data1)
},500)
return
}
@@ -435,7 +550,7 @@
height: 100rpx;
margin: 0rpx ;
font-size: 38rpx;
z-index: 9999999;
z-index: 999;
text-align: center;
width: 100%;
}
@@ -444,14 +559,28 @@
width: 100vw;
position: absolute;
top: 0rpx;
z-index: 99;
}
.title1{
font-size: 32rpx;
text-align: start;
position: absolute;
padding-right: 20rpx;
top: 0rpx;
left:0rpx;
z-index: 999;
padding-left: 10rpx;
padding-right: 10rpx;
padding-top: 10rpx;
}
.title2{
font-size: 32rpx;
text-align: end;
width: 100vw;
position: absolute;
padding-right: 20rpx;
top: 0rpx;
right:0rpx;
z-index: 999;
}
.text-container-row {
display: flex; /* 启用 Flexbox 布局 */
@@ -603,4 +732,7 @@
.textSize{
// font-size: 32rpx;
}
.dialog{
z-index: 9999999;
}
</style>

+ 1
- 1
pages/main/task/task.vue View File

@@ -140,7 +140,7 @@
title: '故障记录',
join: '629',
color: 'red',
url:''
url:'/pages/main/task/page2/device-error'
},
{
icon: '/static/task/ic_task_weixiu_record.png',


+ 9
- 2
store/index.js View File

@@ -48,7 +48,8 @@ const store = new Vuex.Store({
vuex_status_bar_height: 0,
// 自定义导航栏的高度
vuex_custom_bar_height: 0,
hasMessage: true
hasMessage: true,
deviceErrorInfo: null
},
mutations: {
$tStore(state, payload) {
@@ -71,9 +72,15 @@ const store = new Vuex.Store({
// 保存变量到本地中
saveLifeData(saveKey, state[saveKey])
}
},
setDeviceErrorInfo(state, info) {
state.deviceErrorInfo = info;
}
},
actions: {
updateDeviceErrorInfo({ commit }, info) {
commit('setDeviceErrorInfo', info);
}
}
})


Loading…
Cancel
Save