Skip to content

I
inspection-pad-web
提交 8e1277e0 authored 作者: 刘守彩's avatar 刘守彩
浏览文件
操作

feat(巡检): 其他增加水箱检查

上级 89406c09
隐藏空白字符变更
内嵌 并排
正在显示 包含 1167 行增加 和 1224 行删除
manifest.json
浏览文件 @ 8e1277e0
......@@ -2,8 +2,8 @@
"name" : "杭州内网机房巡检",
"appid" : "__UNI__A11BFD5",
"description" : "",
"versionName" : "1.0.2",
"versionCode" : 102,
"versionName" : "1.0.3",
"versionCode" : 103,
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
......
pages/inspectionContent/components/detail.vue
浏览文件 @ 8e1277e0
<template>
<view class="detail-box">
<!-- <image
class="weitu"
src="@/static/img/add-img/weitu.png"
mode="aspectFit"
></image> -->
<view class="container">
<!-- 物理环境 -->
<view v-if="detailsItem.wlhj" class="container-item">
<view class="title">物理环境</view>
<view class="cards">
<view
v-for="(item, index) in detailsItem.wlhj.detail"
:key="index"
class="cards-item"
>
<view class="name"
>{{ item.label
}}<text
class="status"
:class="{ warning: item.inspectionResult === 1 }"
>{{ item.inspectionResultLable }}</text
></view
>
<view class="list">
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view v-if="item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image
v-for="(url, urlIndex) in item.photos"
:key="urlIndex"
class="image-item"
:src="url"
mode="aspectFit"
@click="previewImage(item.photos, urlIndex)"
></image>
</view>
</view>
</view>
</view>
</view>
<!-- 安防系统 -->
<view v-if="detailsItem.afxt" class="container-item">
<view class="title">安防系统</view>
<view class="cards">
<view
v-for="(item, index) in detailsItem.afxt.detail"
:key="index"
class="cards-item"
v-if="showItem(item)"
>
<template></template>
<view class="name"
>{{ item.label
}}<text
class="status"
:class="{ warning: item.inspectionResult === 1 }"
>{{ item.inspectionResultLable }}</text
></view
>
<view class="list">
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view
v-if="item.photos && item.photos.length === 0"
class="content"
>
未拍摄照片
</view>
<view v-else class="content">
<image
v-for="(url, urlIndex) in item.photos"
:key="urlIndex"
class="image-item"
:src="url"
mode="aspectFit"
@click="previewImage(item.photos, urlIndex)"
></image>
</view>
</view>
</view>
</view>
</view>
<!-- 电池状态 -->
<view v-if="detailsItem.dczt" class="container-item">
<view class="title">电池状态</view>
<view class="cards">
<view
v-for="(item, index) in detailsItem.dczt.detail"
:key="index"
class="cards-item"
>
<view class="name"
>{{ item.label
}}<text
class="status"
:class="{ warning: item.inspectionResult === 1 }"
>{{ item.inspectionResultLable }}</text
></view
>
<view class="list">
<view class="label">{{ item.settingLabelShow }}：</view>
<view class="content">
{{ item.setting }}
</view>
</view>
<!-- <view class="list">
<view class="label">{{ item.sjLabelShow }}：</view>
<view class="content"> {{ item.value }}{{ item.unit }} </view>
<template>
<view class="detail-box">
<!-- <image
class="weitu"
src="@/static/img/add-img/weitu.png"
mode="aspectFit"
></image> -->
<view class="container">
<!-- 物理环境 -->
<view v-if="detailsItem.wlhj" class="container-item">
<view class="title">物理环境</view>
<view class="cards">
<view v-for="(item, index) in detailsItem.wlhj.detail" :key="index" class="cards-item">
<view class="name">{{ item.label
}}<text class="status"
:class="{ warning: item.inspectionResult === 1 }">{{ item.inspectionResultLable }}</text></view>
<view class="list">
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view v-if="item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image v-for="(url, urlIndex) in item.photos" :key="urlIndex" class="image-item" :src="url"
mode="aspectFit" @click="previewImage(item.photos, urlIndex)"></image>
</view>
</view>
</view>
</view>
</view>
<!-- 安防系统 -->
<view v-if="detailsItem.afxt" class="container-item">
<view class="title">安防系统</view>
<view class="cards">
<view v-for="(item, index) in detailsItem.afxt.detail" :key="index" class="cards-item" v-if="showItem(item)">
<template></template>
<view class="name">{{ item.label
}}<text class="status"
:class="{ warning: item.inspectionResult === 1 }">{{ item.inspectionResultLable }}</text></view>
<view class="list">
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view v-if="item.photos && item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image v-for="(url, urlIndex) in item.photos" :key="urlIndex" class="image-item" :src="url"
mode="aspectFit" @click="previewImage(item.photos, urlIndex)"></image>
</view>
</view>
</view>
</view>
</view>
<!-- 电池状态 -->
<view v-if="detailsItem.dczt" class="container-item">
<view class="title">电池状态</view>
<view class="cards">
<view v-for="(item, index) in detailsItem.dczt.detail" :key="index" class="cards-item">
<view class="name">{{ item.label
}}<text class="status"
:class="{ warning: item.inspectionResult === 1 }">{{ item.inspectionResultLable }}</text></view>
<view class="list">
<view class="label">{{ item.settingLabelShow }}：</view>
<view class="content">
{{ item.setting }}
</view>
</view>
<!-- <view class="list">
<view class="label">{{ item.sjLabelShow }}：</view>
<view class="content"> {{ item.value }}{{ item.unit }} </view>
</view> -->
<view class="list">
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view v-if="item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image
v-for="(url, urlIndex) in item.photos"
:key="urlIndex"
class="image-item"
:src="url"
mode="aspectFit"
@click="previewImage(item.photos, urlIndex)"
></image>
</view>
</view>
</view>
</view>
</view>
<!-- 设备告警 -->
<view v-if="detailsItem.sbgj" class="container-item">
<view class="title">设备告警</view>
<view class="cards">
<view
v-for="(item, index) in detailsItem.sbgj.detail"
:key="index"
class="cards-item sbgj"
>
<view class="name"
>{{ item.label
}}<text
class="status"
:class="{ warning: item.inspectionResult === 1 }"
>{{ item.inspectionResultLable }}</text
></view
>
<view v-if="item.inspectionResult === 1" class="list">
<view class="label">故障设备：</view>
<view class="content">
<text v-for="(current,idx) in item.cabinets" :key="idx">
【{{ current.deviceId }}机柜，{{ current.UpositonS }}~{{
current.UpositonE
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view v-if="item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image v-for="(url, urlIndex) in item.photos" :key="urlIndex" class="image-item" :src="url"
mode="aspectFit" @click="previewImage(item.photos, urlIndex)"></image>
</view>
</view>
</view>
</view>
</view>
<!-- 设备告警 -->
<view v-if="detailsItem.sbgj" class="container-item">
<view class="title">设备告警</view>
<view class="cards">
<view v-for="(item, index) in detailsItem.sbgj.detail" :key="index" class="cards-item sbgj">
<view class="name">{{ item.label
}}<text class="status"
:class="{ warning: item.inspectionResult === 1 }">{{ item.inspectionResultLable }}</text></view>
<view v-if="item.inspectionResult === 1" class="list">
<view class="label">故障设备：</view>
<view class="content">
<text v-for="(current,idx) in item.cabinets" :key="idx">
【{{ current.deviceId }}机柜，{{ current.UpositonS }}~{{
current.UpositonE
}}U】
</text>
</view>
</view>
<view class="list">
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view v-if="item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image
v-for="(url, urlIndex) in item.photos"
:key="urlIndex"
class="image-item"
:src="url"
mode="aspectFit"
@click="previewImage(item.photos, urlIndex)"
></image>
</view>
</view>
</view>
</view>
</view>
<!-- 机房温湿度 -->
<view v-if="detailsItem.jfwsd" class="container-item">
<view class="title">机房温湿度</view>
<view class="cards">
<view
v-for="(item, index) in detailsItem.jfwsd.detail"
:key="index"
class="cards-item"
>
<view class="name"
>{{ item.label
}}<text
class="status"
:class="{ warning: item.inspectionResult === 1 }"
>{{ item.inspectionResultLable }}</text
></view
>
<view class="list">
<view class="label">{{ item.settingLabel }}：</view>
<view class="content"> {{ item.setting }}{{ item.unit }} </view>
</view>
<view class="list">
<view class="label">{{ item.sjLabel }}：</view>
<view class="content"> {{ item.value }}{{ item.unit }} </view>
</view>
</text>
</view>
</view>
<view class="list">
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view v-if="item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image v-for="(url, urlIndex) in item.photos" :key="urlIndex" class="image-item" :src="url"
mode="aspectFit" @click="previewImage(item.photos, urlIndex)"></image>
</view>
</view>
</view>
</view>
</view>
<!-- 机房温湿度 -->
<view v-if="detailsItem.jfwsd" class="container-item">
<view class="title">机房温湿度</view>
<view class="cards">
<view v-for="(item, index) in detailsItem.jfwsd.detail" :key="index" class="cards-item">
<view class="name">{{ item.label
}}<text class="status"
:class="{ warning: item.inspectionResult === 1 }">{{ item.inspectionResultLable }}</text></view>
<view class="list">
<view class="label">{{ item.settingLabel }}：</view>
<view class="content"> {{ item.setting }}{{ item.unit }} </view>
</view>
<view class="list">
<view class="label">{{ item.sjLabel }}：</view>
<view class="content"> {{ item.value }}{{ item.unit }} </view>
</view>
<view class="list">
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view v-if="item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image
v-for="(url, urlIndex) in item.photos"
:key="urlIndex"
class="image-item"
:src="url"
mode="aspectFit"
@click="previewImage(item.photos, urlIndex)"
></image>
</view>
</view>
</view>
</view>
</view>
<!-- 电力系统 -->
<view v-if="detailsItem.dlxt" class="container-item">
<view class="title">电力系统</view>
<view class="cards">
<view
v-for="(item, index) in detailsItem.dlxt.detail"
:key="index"
class="cards-item"
>
<view class="name"
>{{ item.label
}}<text
class="status"
:class="{ warning: item.inspectionResult === 1 }"
>{{ item.inspectionResultLable }}</text
></view
>
<view class="list">
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view v-if="item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image
v-for="(url, urlIndex) in item.photos"
:key="urlIndex"
class="image-item"
:src="url"
mode="aspectFit"
@click="previewImage(item.photos, urlIndex)"
></image>
</view>
</view>
</view>
</view>
</view>
<!-- 消防系统 -->
<view v-if="detailsItem.xfxt" class="container-item">
<view class="title">消防系统</view>
<view class="cards">
<view
v-for="(item, index) in detailsItem.xfxt.detail"
:key="index"
class="cards-item"
>
<view class="name"
>
<view class="label">现场照片：</view>
<view v-if="item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image v-for="(url, urlIndex) in item.photos" :key="urlIndex" class="image-item" :src="url"
mode="aspectFit" @click="previewImage(item.photos, urlIndex)"></image>
</view>
</view>
</view>
</view>
</view>
<!-- 电力系统 -->
<view v-if="detailsItem.dlxt" class="container-item">
<view class="title">电力系统</view>
<view class="cards">
<view v-for="(item, index) in detailsItem.dlxt.detail" :key="index" class="cards-item">
<view class="name">{{ item.label
}}<text class="status"
:class="{ warning: item.inspectionResult === 1 }">{{ item.inspectionResultLable }}</text></view>
<view class="list">
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view v-if="item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image v-for="(url, urlIndex) in item.photos" :key="urlIndex" class="image-item" :src="url"
mode="aspectFit" @click="previewImage(item.photos, urlIndex)"></image>
</view>
</view>
</view>
</view>
</view>
<!-- 消防系统 -->
<view v-if="detailsItem.xfxt" class="container-item">
<view class="title">消防系统</view>
<view class="cards">
<view v-for="(item, index) in detailsItem.xfxt.detail" :key="index" class="cards-item">
<view class="name">
<template v-if="index==0">
<view>
{{ item.label }} （气压范围：{{item.setting}}）
<text
class="status"
:class="{ warning: item.inspectionResult === 1 }"
>{{ item.inspectionResultLable }}
</text>
{{ item.label }} （气压范围：{{item.setting}}）
<text class="status"
:class="{ warning: item.inspectionResult === 1 }">{{ item.inspectionResultLable }}
</text>
</view>
</template>
<template v-else>
{{ item.label }}
<text
class="status"
:class="{ warning: item.inspectionResult === 1 }"
>{{ item.inspectionResultLable }}
{{ item.label }}
<text class="status" :class="{ warning: item.inspectionResult === 1 }">{{ item.inspectionResultLable }}
</text>
</template>
</view
>
</view>
<!-- <template v-if="index==0">
<view class="list">
<view class="label" style="width: 70px;">{{item.settingLabel}}：</view>
......@@ -336,235 +231,230 @@
{{ item.value || '--' }} MPa
</view>
</view>
</template> -->
<view class="list">
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view v-if="item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image
v-for="(url, urlIndex) in item.photos"
:key="urlIndex"
class="image-item"
:src="url"
mode="aspectFit"
@click="previewImage(item.photos, urlIndex)"
></image>
</view>
</view>
</view>
</view>
</view>
<!-- 线路情况 -->
<view v-if="detailsItem.xlqk" class="container-item">
<view class="title">线路情况</view>
<view class="cards">
<view
v-for="(item, index) in detailsItem.xlqk.detail"
:key="index"
class="cards-item"
>
<view class="name"
>{{ item.label
}}<text
class="status"
:class="{ warning: item.inspectionResult === 1 }"
>{{ item.inspectionResultLable }}
</text></view
>
<view class="list">
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view v-if="item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image
v-for="(url, urlIndex) in item.photos"
:key="urlIndex"
class="image-item"
:src="url"
mode="aspectFit"
@click="previewImage(item.photos, urlIndex)"
></image>
</view>
</view>
</view>
</view>
</view>
<!-- 其它 -->
<view v-if="detailsItem.qt" class="container-item">
<view class="title">其它</view>
<view class="cards">
<view
v-for="(item, index) in detailsItem.qt.detail"
:key="index"
class="cards-item"
>
<view class="list">
<view class="label">其它问题：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view v-if="item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image
v-for="(url, urlIndex) in item.photos"
:key="urlIndex"
class="image-item"
:src="url"
mode="aspectFit"
@click="previewImage(item.photos, urlIndex)"
></image>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
// 父组件传递的详情
detailsItem: {
type: Object,
default: () => {},
},
},
data() {
return {};
},
mounted() {
console.log("this.detailsItem", this.detailsItem);
console.log(this.detailsItem)
},
methods: {
showItem(item) {
const hasMonitor = this.detailsItem.afxt.detail.find(i => i.label === "是否有监控");
if (hasMonitor && hasMonitor.inspectionResultLable === "无监控") {
return !["监控外观破损", "监控画面清晰", "监控存储连续"].includes(item.label);
}
return true;
},
previewImage(images, index) {
uni.previewImage({
current: index,
urls: images,
});
},
},
};
</script>
<style scoped lang="less">
.detail-box {
height: calc(100vh - 180px);
border-radius: 0 0 9.6px 9.6px;
background-color: #fff;
.weitu {
width: 100%;
margin-bottom: 19.2px;
height: 280px;
}
.container {
.container-item {
margin-bottom: 19.2px;
.title {
font-size: 12.8px;
color: #000000;
line-height: 19.2px;
font-weight: 500;
margin-bottom: 9.6px;
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.cards-item {
width: calc(50% - 6.4px);
margin-bottom: 12.8px;
background: #f9f9f9;
border-radius: 6.4px;
padding: 6.4px;
&.sbgj {
width: 100%;
}
.name {
font-size: 12.8px;
color: #000000;
line-height: 19.2px;
font-weight: 500;
margin-bottom: 9.6px;
.status {
margin-left: 6.4px;
padding: 0 6.4px;
font-size: 9.6px;
background: #e6f9f3;
border-radius: 8.8px;
color: #0cc991;
line-height: 16px;
font-weight: 400;
&.warning {
background: #fdebe9;
color: #f55a42;
}
}
}
.list {
display: flex;
align-items: flex-start;
margin-bottom: 9.6px;
&:last-child {
margin-bottom: 0;
}
.label {
width: 56px;
font-size: 11.2px;
color: #7c7c7c;
line-height: 17.6px;
font-weight: 400;
}
.content {
flex: 1;
word-wrap: break-word;
font-size: 11.2px;
color: #000000;
line-height: 17.6px;
font-weight: 400;
display: flex;
flex-wrap: nowrap;
// justify-content: space-between;
.image-item {
width: 57.6px;
height: 57.6px;
margin-right: 6.4px;
border-radius: 3.2px;
}
}
}
}
}
}
}
}
</style>
</template> -->
<view class="list">
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view v-if="item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image v-for="(url, urlIndex) in item.photos" :key="urlIndex" class="image-item" :src="url"
mode="aspectFit" @click="previewImage(item.photos, urlIndex)"></image>
</view>
</view>
</view>
</view>
</view>
<!-- 线路情况 -->
<view v-if="detailsItem.xlqk" class="container-item">
<view class="title">线路情况</view>
<view class="cards">
<view v-for="(item, index) in detailsItem.xlqk.detail" :key="index" class="cards-item">
<view class="name">{{ item.label
}}<text class="status" :class="{ warning: item.inspectionResult === 1 }">{{ item.inspectionResultLable }}
</text></view>
<view class="list">
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view v-if="item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image v-for="(url, urlIndex) in item.photos" :key="urlIndex" class="image-item" :src="url"
mode="aspectFit" @click="previewImage(item.photos, urlIndex)"></image>
</view>
</view>
</view>
</view>
</view>
<!-- 其它 -->
<view v-if="detailsItem.qt" class="container-item">
<view class="title">其它</view>
<view class="cards">
<view v-for="(item, index) in detailsItem.qt.detail" :key="index" class="cards-item">
<template v-if="item.required">
<view class="name">{{ item.label }}
<text class="status" :class="{ warning: item.inspectionResult === 1 }">{{ item.inspectionResultLable }}
</text>
</view>
<view class="list">
<view class="label">情况描述：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
</template>
<view v-if="!item.required" class="list">
<view class="label">其它问题：</view>
<view class="content">
{{ item.conclusion }}
</view>
</view>
<view class="list">
<view class="label">现场照片：</view>
<view v-if="item.photos.length === 0" class="content">
未拍摄照片
</view>
<view v-else class="content">
<image v-for="(url, urlIndex) in item.photos" :key="urlIndex" class="image-item" :src="url"
mode="aspectFit" @click="previewImage(item.photos, urlIndex)"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props: {
// 父组件传递的详情
detailsItem: {
type: Object,
default: () => {},
},
},
data() {
return {};
},
mounted() {
console.log("this.detailsItem", this.detailsItem);
console.log(this.detailsItem)
},
methods: {
showItem(item) {
const hasMonitor = this.detailsItem.afxt.detail.find(i => i.label === "是否有监控");
if (hasMonitor && hasMonitor.inspectionResultLable === "无监控") {
return !["监控外观破损", "监控画面清晰", "监控存储连续"].includes(item.label);
}
return true;
},
previewImage(images, index) {
uni.previewImage({
current: index,
urls: images,
});
},
},
};
</script>
<style scoped lang="less">
.detail-box {
height: calc(100vh - 180px);
border-radius: 0 0 9.6px 9.6px;
background-color: #fff;
.weitu {
width: 100%;
margin-bottom: 19.2px;
height: 280px;
}
.container {
.container-item {
margin-bottom: 19.2px;
.title {
font-size: 12.8px;
color: #000000;
line-height: 19.2px;
font-weight: 500;
margin-bottom: 9.6px;
}
.cards {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.cards-item {
width: calc(50% - 6.4px);
margin-bottom: 12.8px;
background: #f9f9f9;
border-radius: 6.4px;
padding: 6.4px;
&.sbgj {
width: 100%;
}
.name {
font-size: 12.8px;
color: #000000;
line-height: 19.2px;
font-weight: 500;
margin-bottom: 9.6px;
.status {
margin-left: 6.4px;
padding: 0 6.4px;
font-size: 9.6px;
background: #e6f9f3;
border-radius: 8.8px;
color: #0cc991;
line-height: 16px;
font-weight: 400;
&.warning {
background: #fdebe9;
color: #f55a42;
}
}
}
.list {
display: flex;
align-items: flex-start;
margin-bottom: 9.6px;
&:last-child {
margin-bottom: 0;
}
.label {
width: 56px;
font-size: 11.2px;
color: #7c7c7c;
line-height: 17.6px;
font-weight: 400;
}
.content {
flex: 1;
word-wrap: break-word;
font-size: 11.2px;
color: #000000;
line-height: 17.6px;
font-weight: 400;
display: flex;
flex-wrap: nowrap;
// justify-content: space-between;
.image-item {
width: 57.6px;
height: 57.6px;
margin-right: 6.4px;
border-radius: 3.2px;
}
}
}
}
}
}
}
}
</style>
\ No newline at end of file
pages/inspectionContent/components/qt.vue
浏览文件 @ 8e1277e0
<template>
<!-- 机房巡检操作 -->
<view>
<view v-for="(item, index) in itemData.detail" :key="index">
<view class="form-item">
<text class="form-label"
><text class="required"></text>{{ item.label }}</text
>
<text
:class="['conclusion', { 'no-text': !item.conclusion }]"
@click="showPopup(item, index)"
>
{{ item.conclusion || "请输入情况摘要" }}</text
>
</view>
<view class="form-item">
<text class="form-label"><text class="required"></text>现场照片</text>
<CommonUpload
v-model="item.photos"
:max-count="9999"
@input="onPhotoChange"
>
<template #tip><div></div></template>
</CommonUpload>
</view>
</view>
<custom-popup
ref="customPopup"
:inspectionItem="inspectionItem"
@confirm="handlePopupConfirm"
>
</custom-popup>
</view>
</template>
<script>
import CommonUpload from "@/components/CommonUpload/index.vue";
import customPopup from "./customPopup.vue";
import _ from "lodash";
import mixin from "./mixin";
export default {
mixins: [mixin],
components: {
CommonUpload,
customPopup,
},
props: {
// 父组件传递的巡检状态
status: {
type: Number,
default: 0,
},
// 父组件传递的巡检事项名
inspectionItem: {
type: String,
default: "",
},
// 父组件传递的数据
defaultData: {
type: Object,
default: () => ({}),
},
},
data() {
return {
isQt: true,
currentIndex: 0, // 当前操作的索引
photos: [],
// 父组件传递的数据
itemData: {
isValid: true, // true是不校验
status: 0, //0是未巡检 1是已巡检 2巡检异常
statusLabel: "未巡检",
inspectionItem: "", //巡检事项
detail: [
{
label: "其他问题",
inspectionResult: 0,
inspectionResultLable: "正常",
lableArr: ["正常", "异常"],
conclusion: "",
photos: [],
},
],
},
};
},
computed: {
userInfo() {
return this.$store.state.now_user || {};
},
},
watch: {
defaultData(newVal) {
// 在这里处理数据变化
if (Object.keys(this.defaultData).length !== 0) {
this.itemData = this.defaultData;
}
},
},
mounted() {},
methods: {
// 设置巡检结论
setInspectionResult(index, value) {
this.itemData.detail[index].inspectionResult = value; // 0正常 1异常
},
// 处理弹窗确认
handlePopupConfirm(summary) {
this.itemData.detail[this.currentIndex].conclusion = summary; // 回显到文字显示区域
},
// 处理】数据
getFromData() {
this.itemData.inspectionItem = this.inspectionItem;
console.log(222, this.itemData);
// 全都是正常
this.itemData.status = 1; //1表示已经巡检过没有异常
this.itemData.statusLabel = "已巡检";
return this.itemData;
},
// 数据校验方法 true说明有未填项
areAllObjectsValid(arr) {
for (let i = 0; i < arr.length; i++) {
const obj = arr[i];
const keys = Object.keys(obj);
for (let j = 0; j < keys.length; j++) {
const key = keys[j];
const value = obj[key];
if (value === null || value === undefined || value === "") {
return false;
}
if (Array.isArray(value)) {
if (value.length === 0) {
return false;
}
for (let k = 0; k < value.length; k++) {
if (typeof value[k] === "object" && value[k] !== null) {
if (!validateArrayObjects([value[k]])) {
return false;
}
}
}
} else if (typeof value === "object" && value !== null) {
if (!validateArrayObjects([value])) {
return false;
}
}
}
}
return true;
},
// 校验是否有异常
areAllInspectionResultsOne(arr) {
return arr.every((obj) => obj.inspectionResult === 0);
},
onPhotoChange(val) {
this.itemData.detail[this.currentIndex].photos = val;
},
},
};
</script>
<style scoped lang="less">
.form-item {
display: flex;
align-items: center;
padding: 9.6px 0;
line-height: 28.8px;
border-bottom: 0.8px solid #f2f3f5;
.form-label {
font-size: 11.2px;
margin-right: 25.6px;
width: 88px;
text-align: right;
color: #7c7c7c;
.required {
color: red;
margin-right: 3.2px;
}
}
.conclusion {
&.no-text {
color: #c7c7c7;
}
.have {
color: #000;
}
}
.label {
font-size: 11.2px;
}
.switch-container {
display: flex;
gap: 9.6px;
.status-btn {
flex: 1;
padding: 5.6px 19.2px;
font-size: 12.8px;
color: #000000;
background: #f2f2f2;
text-align: center;
font-weight: 400;
line-height: 17.6px;
border-radius: 14.4px;
&.active {
color: #ffffff;
background: #3774f6;
border: 0.32px solid rgba(224, 224, 224, 1);
}
}
}
.input-box {
flex: 1;
border-radius: 3.2px;
font-size: 12.8px;
line-height: 19.2px;
}
.photo-limit {
font-size: 12.8px;
color: #959595;
line-height: 19.2px;
font-weight: 400;
}
.photo-container {
display: flex;
flex-wrap: wrap;
margin-bottom: 6.4px;
.photo-item {
position: relative;
margin-right: 6.4px;
margin-bottom: 6.4px;
.photo {
width: 57.6px;
height: 57.6px;
border-radius: 3.2px;
margin-left: 9.6px;
}
.delete-photo {
position: absolute;
top: -6.4px;
right: -6.4px;
background-color: #ff4d4f;
color: #fff;
width: 12.8px;
height: 12.8px;
border-radius: 50%;
text-align: center;
line-height: 12.8px;
font-size: 9.6px;
}
}
}
.photo-btn {
background: #ffffff;
border: 0.272px solid rgba(221, 221, 221, 1);
border-radius: 1.64px;
width: 57.6px;
height: 57.6px;
font-size: 57.6px;
color: #cccccc;
text-align: center;
line-height: 51.2px;
}
}
</style>
<template>
<!-- 机房巡检操作 -->
<view>
<view v-for="(item, index) in itemData.detail" :key="index">
<view v-if="index==0" class="form-item">
<text class="form-label"><text class="required" v-if="item.required">*</text>{{ item.label }}</text>
<view class="switch-container">
<view :class="['status-btn', { active: item.inspectionResult === 0 }]"
@click="setInspectionResult(index, 0, item.lableArr[0])">
{{ item.lableArr[0] }}
</view>
<view :class="['status-btn', { active: item.inspectionResult === 1 }]"
@click="setInspectionResult(index, 1, item.lableArr[1])">
{{ item.lableArr[1] }}
</view>
</view>
</view>
<template v-if="item.inspectionResult === 1 && index==0">
<view class="form-item">
<text class="form-label"><text class="required">*</text>情况摘要</text>
<text :class="['conclusion', { 'no-text': !item.conclusion }]" @click="showPopup(item, index)">
{{ item.conclusion || "请输入情况摘要" }}</text>
</view>
<view class="form-item">
<text class="form-label"><text class="required">*</text>现场照片</text>
<CommonUpload v-model="item.photos" :max-count="5">
</CommonUpload>
</view>
</template>
<template v-if="index==1">
<view class="form-item">
<text class="form-label"><text class="required" v-if="item.required"></text>{{ item.label }}</text>
<text :class="['conclusion', { 'no-text': !item.conclusion }]" @click="showPopup(item, index)">
{{ item.conclusion || "请输入情况摘要" }}</text>
</view>
<view class="form-item">
<text class="form-label"><text class="required"></text>现场照片</text>
<CommonUpload v-model="item.photos" :max-count="9999" @input="onPhotoChange">
<template #tip>
<div></div>
</template>
</CommonUpload>
</view>
</template>
</view>
<custom-popup ref="customPopup" :inspectionItem="inspectionItem" @confirm="handlePopupConfirm">
</custom-popup>
</view>
</template>
<script>
import CommonUpload from "@/components/CommonUpload/index.vue";
import customPopup from "./customPopup.vue";
import _ from "lodash";
import mixin from "./mixin";
export default {
mixins: [mixin],
components: {
CommonUpload,
customPopup,
},
props: {
// 父组件传递的巡检状态
status: {
type: Number,
default: 0,
},
// 父组件传递的巡检事项名
inspectionItem: {
type: String,
default: "",
},
// 父组件传递的数据
defaultData: {
type: Object,
default: () => ({}),
},
},
data() {
return {
isQt: true,
currentIndex: 0, // 当前操作的索引
photos: [],
// 父组件传递的数据
itemData: {
isValid: false, // true是不校验
status: 0, //0是未巡检 1是已巡检 2巡检异常
statusLabel: "未巡检",
inspectionItem: "", //巡检事项
detail: [{
required: true,
label: "水箱",
inspectionResult: "",
inspectionResultLable: "正常",
lableArr: ["正常", "异常"],
conclusion: "",
photos: [],
},
{
required: false,
label: "其他问题",
inspectionResult: 0,
inspectionResultLable: "正常",
lableArr: ["正常", "异常"],
conclusion: "",
photos: [],
},
],
},
};
},
computed: {
userInfo() {
return this.$store.state.now_user || {};
},
},
watch: {
defaultData(newVal) {
// 在这里处理数据变化
if (Object.keys(this.defaultData).length !== 0) {
this.itemData = this.defaultData;
}
},
},
mounted() {},
methods: {
// 处理弹窗确认
handlePopupConfirm(summary) {
this.itemData.detail[this.currentIndex].conclusion = summary; // 回显到文字显示区域
},
// 处理】数据
getFromData() {
this.itemData.inspectionItem = this.inspectionItem;
const {isValid, status, statusLabel} = this.validForm(this.itemData.detail);
this.itemData.isValid = isValid;
this.itemData.status = status
this.itemData.statusLabel = statusLabel
return this.itemData;
},
validForm(list) {
let isValid = list.every(item => this.validFormItem(item))
let status = list.some(item => item.inspectionResult === 1 && item.required) ? 2: 1;
let statusLabel = isValid ? '已巡检' : '未巡检'
const ret = {
isValid, // 必填 false 不通过 true 通过
status, // 1 正常 2 异常
statusLabel // 已巡检 | 未巡检
}
console.log('validForm', ret)
return ret;
},
validFormItem(item) {
if(item.required) {
if (item.inspectionResult === 1) {
// 如果 inspectionResult 为 1，检查 conclusion 和 photos
if (!item.conclusion || item.photos.length === 0) {
return false;
} else {
return true
}
} else {
return true
}
} else {
return true
}
},
// 数据校验方法 true说明有未填项
areAllObjectsValid(arr) {
for (let i = 0; i < arr.length; i++) {
const obj = arr[i];
const keys = Object.keys(obj);
for (let j = 0; j < keys.length; j++) {
const key = keys[j];
const value = obj[key];
if (value === null || value === undefined || value === "") {
return false;
}
if (Array.isArray(value)) {
if (value.length === 0) {
return false;
}
for (let k = 0; k < value.length; k++) {
if (typeof value[k] === "object" && value[k] !== null) {
if (!validateArrayObjects([value[k]])) {
return false;
}
}
}
} else if (typeof value === "object" && value !== null) {
if (!validateArrayObjects([value])) {
return false;
}
}
}
}
return true;
},
// 校验是否有异常
areAllInspectionResultsOne(arr) {
return arr.every((obj) => obj.inspectionResult === 0);
},
onPhotoChange(val) {
this.itemData.detail[1].photos = val;
},
},
};
</script>
<style scoped lang="less">
.form-item {
display: flex;
align-items: center;
padding: 9.6px 0;
line-height: 28.8px;
border-bottom: 0.8px solid #f2f3f5;
.form-label {
font-size: 11.2px;
margin-right: 25.6px;
width: 88px;
text-align: right;
color: #7c7c7c;
.required {
color: red;
margin-right: 3.2px;
}
}
.conclusion {
&.no-text {
color: #c7c7c7;
}
.have {
color: #000;
}
}
.label {
font-size: 11.2px;
}
.switch-container {
display: flex;
gap: 9.6px;
.status-btn {
flex: 1;
padding: 5.6px 19.2px;
font-size: 12.8px;
color: #000000;
background: #f2f2f2;
text-align: center;
font-weight: 400;
line-height: 17.6px;
border-radius: 14.4px;
&.active {
color: #ffffff;
background: #3774f6;
border: 0.32px solid rgba(224, 224, 224, 1);
}
}
}
.input-box {
flex: 1;
border-radius: 3.2px;
font-size: 12.8px;
line-height: 19.2px;
}
.photo-limit {
font-size: 12.8px;
color: #959595;
line-height: 19.2px;
font-weight: 400;
}
.photo-container {
display: flex;
flex-wrap: wrap;
margin-bottom: 6.4px;
.photo-item {
position: relative;
margin-right: 6.4px;
margin-bottom: 6.4px;
.photo {
width: 57.6px;
height: 57.6px;
border-radius: 3.2px;
margin-left: 9.6px;
}
.delete-photo {
position: absolute;
top: -6.4px;
right: -6.4px;
background-color: #ff4d4f;
color: #fff;
width: 12.8px;
height: 12.8px;
border-radius: 50%;
text-align: center;
line-height: 12.8px;
font-size: 9.6px;
}
}
}
.photo-btn {
background: #ffffff;
border: 0.272px solid rgba(221, 221, 221, 1);
border-radius: 1.64px;
width: 57.6px;
height: 57.6px;
font-size: 57.6px;
color: #cccccc;
text-align: center;
line-height: 51.2px;
}
}
</style>
\ No newline at end of file
pages/inspectionContent/components/wlhj.vue
浏览文件 @ 8e1277e0
<template>
<!-- 机房巡检操作 -->
<view>
<view v-for="(item, index) in itemData.detail" :key="index">
<view class="form-item">
<text class="form-label"
><text class="required">*</text>{{ item.label }}</text
>
<view class="switch-container">
<view
:class="['status-btn', { active: item.inspectionResult === 0 }]"
@click="setInspectionResult(index, 0, item.lableArr[0])"
>
{{ item.lableArr[0] }}
</view>
<view
:class="['status-btn', { active: item.inspectionResult === 1 }]"
@click="setInspectionResult(index, 1, item.lableArr[1])"
>
{{ item.lableArr[1] }}
</view>
</view>
</view>
<template v-if="item.inspectionResult === 1">
<view class="form-item">
<text class="form-label"
><text class="required">*</text>情况摘要</text
>
<text
:class="['conclusion', { 'no-text': !item.conclusion }]"
@click="showPopup(item, index)"
>
{{ item.conclusion || "请输入情况摘要" }}</text
>
</view>
<view class="form-item">
<text class="form-label"
><text class="required">*</text>现场照片</text
>
<CommonUpload v-model="item.photos" :max-count="5">
</CommonUpload> </view
></template> </view
><custom-popup
ref="customPopup"
:inspectionItem="inspectionItem"
@confirm="handlePopupConfirm"
></custom-popup>
</view>
</template>
<script>
import CommonUpload from "@/components/CommonUpload/index.vue";
import customPopup from "./customPopup.vue";
import _ from "lodash";
import mixin from "./mixin";
export default {
components: {
CommonUpload,
customPopup,
},
mixins: [mixin],
props: {
// 父组件传递的巡检状态
status: {
type: Number,
default: 0,
},
// 父组件传递的巡检事项名
inspectionItem: {
type: String,
default: "",
},
// 父组件传递的数据
defaultData: {
type: Object,
default: () => ({}),
},
},
data() {
return {
currentIndex: 0, // 当前操作的索引
photos: [],
itemData: {
isValid: false, // false是校验未通过 true是校验通过
status: 0, //0是未巡检 1是已巡检 2巡检异常
statusLabel: "未巡检",
inspectionItem: "", //巡检事项
detail: [
{
label: "地板、墙壁破损",
inspectionResult: "",
inspectionResultLable: "正常",
lableArr: ["正常", "异常"],
conclusion: "",
photos: [],
},
{
label: "机房清洁",
inspectionResult: "",
inspectionResultLable: "正常",
lableArr: ["正常", "异常"],
conclusion: "",
photos: [],
},
{
label: "机房通风",
inspectionResult: "",
inspectionResultLable: "正常",
lableArr: ["正常", "异常"],
conclusion: "",
photos: [],
},
{
label: "机房照明",
inspectionResult: "",
inspectionResultLable: "正常",
lableArr: ["正常", "异常"],
conclusion: "",
photos: [],
},
{
label: "漏水检测",
inspectionResult: "",
inspectionResultLable: "正常",
lableArr: ["正常", "异常"],
conclusion: "",
photos: [],
},
],
},
};
},
computed: {
userInfo() {
return this.$store.state.now_user || {};
},
},
watch: {
defaultData(newVal) {
// 在这里处理数据变化
if (Object.keys(this.defaultData).length !== 0) {
this.itemData = this.defaultData;
}
},
},
async mounted() {
console.log("sdsadasd", this.itemData);
// if (Object.keys(this.defaultData).length !== 0) {
// this.itemData = this.defaultData;
// }
},
methods: {
// 拍照
takePhoto(index) {
uni.chooseImage({
count: 1,
sourceType: ["camera"], // 可以从相机拍摄
success: async (res) => {
if (this.photos.length < 5) {
const base64 = await this.convertFileToBase64(res.tempFilePaths[0]);
this.itemData.detail[index].photos.push(base64);
} else {
uni.showToast({
title: "最多只能上传5张照片",
icon: "none",
});
}
},
});
},
// 转化为base64
convertFileToBase64(filePath) {
return new Promise((resolve, reject) => {
plus.io.resolveLocalFileSystemURL(
filePath,
function (entry) {
entry.file(
function (file) {
const reader = new plus.io.FileReader();
reader.onloadend = function (evt) {
const base64 = evt.target.result; // 获取 Base64 数据
resolve(base64); // 返回 Base64 数据
};
reader.readAsDataURL(file); // 读取文件并转换为 Base64
},
function (error) {
reject("获取文件对象失败：" + error.message);
}
);
},
function (error) {
reject("解析文件路径失败：" + error.message);
}
);
});
},
// 删除照片
deletePhoto(index, itemIndex) {
this.itemData.detail[index].photos.splice(itemIndex, 1);
},
// 处理弹窗确认
handlePopupConfirm(summary) {
this.itemData.detail[this.currentIndex].conclusion = summary; // 回显到文字显示区域
},
// 处理】数据
getFromData() {
const isValid = this.areAllObjectsValid(this.itemData.detail); //false不通过 true通过
console.log("wlhj", isValid);
const isAllOne = this.areAllInspectionResultsOne(this.itemData.detail);
console.log("isAllOne", isAllOne);
this.itemData.isValid = isValid;
this.itemData.inspectionItem = this.inspectionItem;
this.itemData.status = isAllOne.status; //1表示已经巡检过没有异常
this.itemData.statusLabel = isAllOne.statusLabel;
console.log("查看数据", this.itemData);
return this.itemData;
},
// 数据校验方法 true说明有未填项
areAllObjectsValid(details) {
// 检查是否有任何项的 inspectionResult 为空字符串
const hasEmptyResult = details.some(
(item) => item.inspectionResult === ""
);
if (hasEmptyResult) {
return false;
}
// 遍历每一项进行检查
for (const item of details) {
if (item.inspectionResult === 0) {
// 如果 inspectionResult 为 0，跳过此项的其他检查
continue;
} else if (item.inspectionResult === 1) {
// 如果 inspectionResult 为 1，检查 conclusion 和 photos
if (!item.conclusion || item.photos.length === 0) {
return false;
}
} else {
// 其他情况（理论上不应该存在，根据当前规则）
return false;
}
}
// 所有检查都通过
return true;
},
areAllInspectionResultsOne(details) {
let hasEmpty = false;
let allZero = true;
let hasOne = false;
for (const item of details) {
if (item.inspectionResult === "") {
hasEmpty = true;
break;
} else if (item.inspectionResult === 1) {
hasOne = true;
allZero = false;
} else if (item.inspectionResult === 0) {
// 继续检查
} else {
// 如果有其他值，可以在这里处理
allZero = false;
}
}
if (hasEmpty) {
return { statusLabel: "未巡检", status: 0 };
} else if (allZero) {
return { statusLabel: "已巡检", status: 1 };
} else if (hasOne) {
return { statusLabel: "巡检异常", status: 2 };
} else {
// 默认情况，可以根据需求调整
return { statusLabel: "未巡检", status: 0 };
}
},
setNormal() {
this.itemData.detail.forEach((item) => {
item.inspectionResult = 0;
});
},
},
};
</script>
<style scoped lang="less">
.form-item {
display: flex;
align-items: center;
padding: 9.6px 0;
line-height: 28.8px;
border-bottom: 0.8px solid #f2f3f5;
.form-label {
font-size: 11.2px;
margin-right: 25.6px;
width: 88px;
text-align: right;
color: #7c7c7c;
.required {
color: red;
margin-right: 3.2px;
}
}
.conclusion {
&.no-text {
color: #c7c7c7;
}
.have {
color: #000;
}
}
.label {
font-size: 11.2px;
}
.switch-container {
display: flex;
gap: 9.6px;
.status-btn {
flex: 1;
padding: 5.6px 19.2px;
font-size: 12.8px;
color: #000000;
background: #f2f2f2;
text-align: center;
font-weight: 400;
line-height: 17.6px;
border-radius: 14.4px;
&.active {
color: #ffffff;
background: #3774f6;
border: 0.32px solid rgba(224, 224, 224, 1);
}
}
}
.input-box {
flex: 1;
border-radius: 3.2px;
font-size: 12.8px;
line-height: 19.2px;
}
.photo-limit {
font-size: 12.8px;
color: #959595;
line-height: 19.2px;
font-weight: 400;
}
.photo-container {
display: flex;
flex-wrap: wrap;
margin-bottom: 6.4px;
.photo-item {
position: relative;
margin-right: 6.4px;
margin-bottom: 6.4px;
.photo {
width: 57.6px;
height: 57.6px;
border-radius: 3.2px;
margin-left: 9.6px;
}
.delete-photo {
position: absolute;
top: -6.4px;
right: -6.4px;
background-color: #ff4d4f;
color: #fff;
width: 12.8px;
height: 12.8px;
border-radius: 50%;
text-align: center;
line-height: 12.8px;
font-size: 9.6px;
}
}
}
.photo-btn {
background: #ffffff;
border: 0.272px solid rgba(221, 221, 221, 1);
border-radius: 1.64px;
width: 57.6px;
height: 57.6px;
font-size: 57.6px;
color: #cccccc;
text-align: center;
line-height: 51.2px;
}
}
</style>
<template>
<!-- 机房巡检操作 -->
<view>
<view v-for="(item, index) in itemData.detail" :key="index">
<view class="form-item">
<text class="form-label"><text class="required">*</text>{{ item.label }}</text>
<view class="switch-container">
<view :class="['status-btn', { active: item.inspectionResult === 0 }]"
@click="setInspectionResult(index, 0, item.lableArr[0])">
{{ item.lableArr[0] }}
</view>
<view :class="['status-btn', { active: item.inspectionResult === 1 }]"
@click="setInspectionResult(index, 1, item.lableArr[1])">
{{ item.lableArr[1] }}
</view>
</view>
</view>
<template v-if="item.inspectionResult === 1">
<view class="form-item">
<text class="form-label"><text class="required">*</text>情况摘要</text>
<text :class="['conclusion', { 'no-text': !item.conclusion }]" @click="showPopup(item, index)">
{{ item.conclusion || "请输入情况摘要" }}</text>
</view>
<view class="form-item">
<text class="form-label"><text class="required">*</text>现场照片</text>
<CommonUpload v-model="item.photos" :max-count="5">
</CommonUpload>
</view>
</template>
</view><custom-popup ref="customPopup" :inspectionItem="inspectionItem"
@confirm="handlePopupConfirm"></custom-popup>
</view>
</template>
<script>
import CommonUpload from "@/components/CommonUpload/index.vue";
import customPopup from "./customPopup.vue";
import _ from "lodash";
import mixin from "./mixin";
export default {
components: {
CommonUpload,
customPopup,
},
mixins: [mixin],
props: {
// 父组件传递的巡检状态
status: {
type: Number,
default: 0,
},
// 父组件传递的巡检事项名
inspectionItem: {
type: String,
default: "",
},
// 父组件传递的数据
defaultData: {
type: Object,
default: () => ({}),
},
},
data() {
return {
currentIndex: 0, // 当前操作的索引
photos: [],
itemData: {
isValid: false, // false是校验未通过 true是校验通过
status: 0, //0是未巡检 1是已巡检 2巡检异常
statusLabel: "未巡检",
inspectionItem: "", //巡检事项
detail: [{
label: "地板、墙壁破损",
inspectionResult: "",
inspectionResultLable: "正常",
lableArr: ["正常", "异常"],
conclusion: "",
photos: [],
},
{
label: "机房清洁",
inspectionResult: "",
inspectionResultLable: "正常",
lableArr: ["正常", "异常"],
conclusion: "",
photos: [],
},
{
label: "机房通风",
inspectionResult: "",
inspectionResultLable: "正常",
lableArr: ["正常", "异常"],
conclusion: "",
photos: [],
},
{
label: "机房照明",
inspectionResult: "",
inspectionResultLable: "正常",
lableArr: ["正常", "异常"],
conclusion: "",
photos: [],
},
{
label: "漏水检测",
inspectionResult: "",
inspectionResultLable: "正常",
lableArr: ["正常", "异常"],
conclusion: "",
photos: [],
},
],
},
};
},
computed: {
userInfo() {
return this.$store.state.now_user || {};
},
},
watch: {
defaultData(newVal) {
// 在这里处理数据变化
if (Object.keys(this.defaultData).length !== 0) {
this.itemData = this.defaultData;
}
},
},
async mounted() {
console.log("sdsadasd", this.itemData);
// if (Object.keys(this.defaultData).length !== 0) {
// this.itemData = this.defaultData;
// }
},
methods: {
// 拍照
takePhoto(index) {
uni.chooseImage({
count: 1,
sourceType: ["camera"], // 可以从相机拍摄
success: async (res) => {
if (this.photos.length < 5) {
const base64 = await this.convertFileToBase64(res.tempFilePaths[0]);
this.itemData.detail[index].photos.push(base64);
} else {
uni.showToast({
title: "最多只能上传5张照片",
icon: "none",
});
}
},
});
},
// 转化为base64
convertFileToBase64(filePath) {
return new Promise((resolve, reject) => {
plus.io.resolveLocalFileSystemURL(
filePath,
function(entry) {
entry.file(
function(file) {
const reader = new plus.io.FileReader();
reader.onloadend = function(evt) {
const base64 = evt.target.result; // 获取 Base64 数据
resolve(base64); // 返回 Base64 数据
};
reader.readAsDataURL(file); // 读取文件并转换为 Base64
},
function(error) {
reject("获取文件对象失败：" + error.message);
}
);
},
function(error) {
reject("解析文件路径失败：" + error.message);
}
);
});
},
// 删除照片
deletePhoto(index, itemIndex) {
this.itemData.detail[index].photos.splice(itemIndex, 1);
},
// 处理弹窗确认
handlePopupConfirm(summary) {
this.itemData.detail[this.currentIndex].conclusion = summary; // 回显到文字显示区域
},
// 处理】数据
getFromData() {
const isValid = this.areAllObjectsValid(this.itemData.detail); //false不通过 true通过
console.log("wlhj", isValid);
const isAllOne = this.areAllInspectionResultsOne(this.itemData.detail);
console.log("isAllOne", isAllOne);
this.itemData.isValid = isValid;
this.itemData.inspectionItem = this.inspectionItem;
this.itemData.status = isAllOne.status; //1表示已经巡检过没有异常
this.itemData.statusLabel = isAllOne.statusLabel;
console.log("查看数据", this.itemData);
return this.itemData;
},
// 数据校验方法 true说明有未填项
areAllObjectsValid(details) {
// 检查是否有任何项的 inspectionResult 为空字符串
const hasEmptyResult = details.some(
(item) => item.inspectionResult === ""
);
if (hasEmptyResult) {
return false;
}
// 遍历每一项进行检查
for (const item of details) {
if (item.inspectionResult === 0) {
// 如果 inspectionResult 为 0，跳过此项的其他检查
continue;
} else if (item.inspectionResult === 1) {
// 如果 inspectionResult 为 1，检查 conclusion 和 photos
if (!item.conclusion || item.photos.length === 0) {
return false;
}
} else {
// 其他情况（理论上不应该存在，根据当前规则）
return false;
}
}
// 所有检查都通过
return true;
},
areAllInspectionResultsOne(details) {
let hasEmpty = false;
let allZero = true;
let hasOne = false;
for (const item of details) {
if (item.inspectionResult === "") {
hasEmpty = true;
break;
} else if (item.inspectionResult === 1) {
hasOne = true;
allZero = false;
} else if (item.inspectionResult === 0) {
// 继续检查
} else {
// 如果有其他值，可以在这里处理
allZero = false;
}
}
if (hasEmpty) {
return {
statusLabel: "未巡检",
status: 0
};
} else if (allZero) {
return {
statusLabel: "已巡检",
status: 1
};
} else if (hasOne) {
return {
statusLabel: "巡检异常",
status: 2
};
} else {
// 默认情况，可以根据需求调整
return {
statusLabel: "未巡检",
status: 0
};
}
},
setNormal() {
this.itemData.detail.forEach((item) => {
item.inspectionResult = 0;
});
},
},
};
</script>
<style scoped lang="less">
.form-item {
display: flex;
align-items: center;
padding: 9.6px 0;
line-height: 28.8px;
border-bottom: 0.8px solid #f2f3f5;
.form-label {
font-size: 11.2px;
margin-right: 25.6px;
width: 88px;
text-align: right;
color: #7c7c7c;
.required {
color: red;
margin-right: 3.2px;
}
}
.conclusion {
&.no-text {
color: #c7c7c7;
}
.have {
color: #000;
}
}
.label {
font-size: 11.2px;
}
.switch-container {
display: flex;
gap: 9.6px;
.status-btn {
flex: 1;
padding: 5.6px 19.2px;
font-size: 12.8px;
color: #000000;
background: #f2f2f2;
text-align: center;
font-weight: 400;
line-height: 17.6px;
border-radius: 14.4px;
&.active {
color: #ffffff;
background: #3774f6;
border: 0.32px solid rgba(224, 224, 224, 1);
}
}
}
.input-box {
flex: 1;
border-radius: 3.2px;
font-size: 12.8px;
line-height: 19.2px;
}
.photo-limit {
font-size: 12.8px;
color: #959595;
line-height: 19.2px;
font-weight: 400;
}
.photo-container {
display: flex;
flex-wrap: wrap;
margin-bottom: 6.4px;
.photo-item {
position: relative;
margin-right: 6.4px;
margin-bottom: 6.4px;
.photo {
width: 57.6px;
height: 57.6px;
border-radius: 3.2px;
margin-left: 9.6px;
}
.delete-photo {
position: absolute;
top: -6.4px;
right: -6.4px;
background-color: #ff4d4f;
color: #fff;
width: 12.8px;
height: 12.8px;
border-radius: 50%;
text-align: center;
line-height: 12.8px;
font-size: 9.6px;
}
}
}
.photo-btn {
background: #ffffff;
border: 0.272px solid rgba(221, 221, 221, 1);
border-radius: 1.64px;
width: 57.6px;
height: 57.6px;
font-size: 57.6px;
color: #cccccc;
text-align: center;
line-height: 51.2px;
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论