提交 06977511 authored 作者: caodi\cd's avatar caodi\cd

fix:详情优化

上级 fdc4b2ad
...@@ -382,52 +382,52 @@ export default { ...@@ -382,52 +382,52 @@ export default {
<style scoped lang="less"> <style scoped lang="less">
.detail-box { .detail-box {
height: calc(100vh - 225px); height: calc(100vh - 180px);
border-radius: 0 0 12px 12px; border-radius: 0 0 9.6px 9.6px;
background-color: #fff; background-color: #fff;
padding: 0 24px 24px; padding: 0 19.2px 19.2px;
.weitu { .weitu {
width: 100%; width: 100%;
margin-bottom: 24px; margin-bottom: 19.2px;
height: 350px; height: 280px;
} }
.container { .container {
.container-item { .container-item {
margin-bottom: 24px; margin-bottom: 19.2px;
.title { .title {
font-size: 16px; font-size: 12.8px;
color: #000000; color: #000000;
line-height: 24px; line-height: 19.2px;
font-weight: 500; font-weight: 500;
margin-bottom: 12px; margin-bottom: 9.6px;
} }
.cards { .cards {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; justify-content: space-between;
.cards-item { .cards-item {
width: calc(50% - 8px); width: calc(50% - 6.4px);
margin-bottom: 16px; margin-bottom: 12.8px;
background: #f9f9f9; background: #f9f9f9;
border-radius: 8px; border-radius: 6.4px;
padding: 8px; padding: 6.4px;
&.sbgj { &.sbgj {
width: 100%; width: 100%;
} }
.name { .name {
font-size: 16px; font-size: 12.8px;
color: #000000; color: #000000;
line-height: 24px; line-height: 19.2px;
font-weight: 500; font-weight: 500;
margin-bottom: 12px; margin-bottom: 9.6px;
.status { .status {
margin-left: 8px; margin-left: 6.4px;
padding: 0 8px; padding: 0 6.4px;
font-size: 12px; font-size: 9.6px;
background: #e6f9f3; background: #e6f9f3;
border-radius: 11px; border-radius: 8.8px;
color: #0cc991; color: #0cc991;
line-height: 20px; line-height: 16px;
font-weight: 400; font-weight: 400;
&.warning { &.warning {
background: #fdebe9; background: #fdebe9;
...@@ -437,33 +437,33 @@ export default { ...@@ -437,33 +437,33 @@ export default {
} }
.list { .list {
display: flex; display: flex;
align-items: flex-start; /* 让内容垂直对齐在顶部 */ align-items: flex-start;
margin-bottom: 12px; margin-bottom: 9.6px;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.label { .label {
width: 70px; /* 设置左侧 label 的宽度 */ width: 56px;
font-size: 14px; font-size: 11.2px;
color: #7c7c7c; color: #7c7c7c;
line-height: 22px; line-height: 17.6px;
font-weight: 400; font-weight: 400;
} }
.content { .content {
flex: 1; /* 右侧内容占据剩余空间 */ flex: 1;
word-wrap: break-word; /* 使文本自动换行 */ word-wrap: break-word;
font-size: 14px; font-size: 11.2px;
color: #000000; color: #000000;
line-height: 22px; line-height: 17.6px;
font-weight: 400; font-weight: 400;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
justify-content: space-between; justify-content: space-between;
.image-item { .image-item {
width: 72px; width: 57.6px;
height: 72px; height: 57.6px;
margin-right: 8px; margin-right: 6.4px;
border-radius: 4px; border-radius: 3.2px;
} }
} }
} }
...@@ -472,4 +472,4 @@ export default { ...@@ -472,4 +472,4 @@ export default {
} }
} }
} }
</style> </style>
\ No newline at end of file
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</block> </block>
<block slot="right" class="nav-right"> <block slot="right" class="nav-right">
<view class="header-buttons"> <view class="header-buttons">
<button class="button" @click="lookLog">查看样表</button> <button class="button" @click="lookTable">查看样表</button>
</view> </view>
</block> </block>
</uni-nav-bar> </uni-nav-bar>
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
> >
</view> </view>
</view> </view>
<view class="card-box"> <view v-if="!isSign" class="card-box">
<view <view
class="card-row" class="card-row"
:class="{ right: rowIndex % 2 !== 0 }" :class="{ right: rowIndex % 2 !== 0 }"
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
</view> </view>
</view></view </view></view
> >
<view class="card-box"> <view v-else class="card-box">
<view <view
class="card-row" class="card-row"
:class="{ right: rowIndex % 2 !== 0 }" :class="{ right: rowIndex % 2 !== 0 }"
...@@ -117,14 +117,6 @@ ...@@ -117,14 +117,6 @@
<text class="location">{{ card.name }}</text> <text class="location">{{ card.name }}</text>
</view> </view>
</view> </view>
<view class="spacer-image right" v-if="cardIndex < row.length - 1">
<!-- <image src="@/static/img/arr2.svg" mode="aspectFit"></image> -->
</view>
<view class="spacer-image bottom" v-if="rowIndex < rows.length - 1">
<view v-if="cardIndex == 0 || cardIndex == 4">
<!-- <image src="@/static/img/arr2.svg" mode="aspectFit"></image> -->
</view>
</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -279,6 +271,11 @@ export default { ...@@ -279,6 +271,11 @@ export default {
url: `/pages/inspectionContent/inspectionContentNew?value=${value}&inspectionCode=${this.inspectionCode}&jfType=${jfType}&location=${location}&uid=${this.uid}&backValue=${this.backValue}`, url: `/pages/inspectionContent/inspectionContentNew?value=${value}&inspectionCode=${this.inspectionCode}&jfType=${jfType}&location=${location}&uid=${this.uid}&backValue=${this.backValue}`,
}); });
}, },
lookTable() {
uni.navigateTo({
url: "/pages/report/sampleTable?isJF=1",
});
},
toSign() { toSign() {
this.$refs.signDialog.open(); this.$refs.signDialog.open();
}, },
......
<template>
<view class="detail-box">
<!-- <image
class="weitu"
src="@/static/img/add-img/weitu.png"
mode="aspectFit"
></image> -->
<view class="container">
<view class="container-item">
<view class="cards">
<view
v-for="(item, index) in detailsItem"
:key="index"
class="cards-item"
>
<view class="name"
>{{ item.dictLabel
}}<text
class="status"
:class="{ warning: item.inspectionResult === 1 }"
>{{ item.inspectionResult?"异常":"正常" }}</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="center"
></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);
},
methods: {},
};
</script>
<style scoped lang="less">
.detail-box {
border-radius: 0 0 9.6px 9.6px;
background-color: #fff;
margin-top: 6.4px;
.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
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
</block> </block>
<block slot="right" class="nav-right"> <block slot="right" class="nav-right">
<view class="header-buttons"> <view class="header-buttons">
<button class="button" @click="lookLog">查看样表</button> <button class="button" @click="lookTable">查看样表</button>
</view> </view>
</block> </block>
</uni-nav-bar> </uni-nav-bar>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
</view> </view>
</view> </view>
</view> </view>
<view class="content-box"> <view v-if="!isSign" class="content-box">
<!-- 左侧模块 --> <!-- 左侧模块 -->
<view class="left-side"> <view class="left-side">
<view <view
...@@ -102,6 +102,56 @@ ...@@ -102,6 +102,56 @@
</view> </view>
</view> </view>
</view> </view>
<view v-else class="content-box">
<!-- 左侧模块 -->
<view class="left-side">
<view
v-for="(tab, index) in tabsDetail"
:key="index"
:class="['tab-item', { active: activeTab === index }]"
@click="getActiveTabDetails(index)"
>
{{ tab }}
</view>
</view>
<!-- 右侧模块 -->
<view class="right-side">
<!-- 第二部分:卡片组 -->
<view class="card-box">
<view
class="card-group"
v-for="(item, index) in cardsInfo"
:key="index"
>
<view class="card-title">{{ item.name }}</view>
<view class="card-list">
<view
v-for="position in item.position"
:key="position.dictValue"
class="card"
@click="getDetailsItem(item.value, position.dictValue)"
>
<view class="card-content">
<view class="status-line">
<image src="/static/status-icon.png" class="status-icon" />
<text class="status-text">{{ position.statusLable }}</text>
</view>
<view class="info-line">
<text class="info-text"
>{{ item.name }}{{ position.dictLabel }}</text
>
</view>
</view>
</view>
</view>
</view>
<view v-if="isShow" class="card-group">
<detail ref="detail" :detailsItem="detailsItem"></detail
></view>
</view>
</view>
</view>
<signDialog ref="signDialog" @confirm="handlePopupConfirm"></signDialog> <signDialog ref="signDialog" @confirm="handlePopupConfirm"></signDialog>
</view> </view>
</template> </template>
...@@ -117,13 +167,16 @@ import { ...@@ -117,13 +167,16 @@ import {
} from "@/utils/IoReadingAndWriting.js"; } from "@/utils/IoReadingAndWriting.js";
import { getInspectionDetails } from "@/request/index.js"; import { getInspectionDetails } from "@/request/index.js";
import signDialog from "@/components/signDialog.vue"; import signDialog from "@/components/signDialog.vue";
import detail from "./model/detail.vue";
export default { export default {
components: { components: {
signDialog, signDialog,
detail,
}, },
data() { data() {
return { return {
tabs: ["所有井道"], // 选项卡内容 tabs: ["所有井道"], // 选项卡内容
tabsDetail: [],
activeTab: 0, // 默认选中的选项卡 activeTab: 0, // 默认选中的选项卡
inspectionNumber: 0, // 已巡检的井道数量 inspectionNumber: 0, // 已巡检的井道数量
cards: [ cards: [
...@@ -152,6 +205,8 @@ export default { ...@@ -152,6 +205,8 @@ export default {
options: {}, //存储数据 options: {}, //存储数据
backValue: "", backValue: "",
all_data: [], //所有数据 all_data: [], //所有数据
detailsItem: {}, //单个井道详情
isShow:false,
}; };
}, },
computed: { computed: {
...@@ -177,7 +232,7 @@ export default { ...@@ -177,7 +232,7 @@ export default {
} else { } else {
this.init(); this.init();
} }
this.all_data = this.$store.state.all_data this.all_data = this.$store.state.all_data;
}, },
mounted() {}, mounted() {},
methods: { methods: {
...@@ -216,6 +271,19 @@ export default { ...@@ -216,6 +271,19 @@ export default {
resolve(); resolve();
}); });
}, },
// 获取井道详情
getDetailsItem(value, dictValue) {
let item = this.detailsInfo.originData[value - 1].position[dictValue - 1];
if (item.status < 1) {
uni.showToast({
title: "该井道暂无数据",
icon: "none",
});
}
this.detailsItem = item.details;
this.isShow = true
console.log("this.detailsItem", this.detailsItem);
},
getActiveTab(index) { getActiveTab(index) {
this.activeTab = index; this.activeTab = index;
console.log("this.activeTab", this.activeTab); console.log("this.activeTab", this.activeTab);
...@@ -225,6 +293,11 @@ export default { ...@@ -225,6 +293,11 @@ export default {
this.cardsInfo = [this.tabList[index - 1]]; this.cardsInfo = [this.tabList[index - 1]];
} }
}, },
getActiveTabDetails(index) {
this.activeTab = index;
this.cardsInfo = [this.tabList[index]];
this.isShow = false
},
// 回显数据 // 回显数据
getDetails(uid) { getDetails(uid) {
uni.showLoading(); uni.showLoading();
...@@ -239,11 +312,13 @@ export default { ...@@ -239,11 +312,13 @@ export default {
this.cardsInfo = this.tabList = detailsInfo.originData; this.cardsInfo = this.tabList = detailsInfo.originData;
this.isSubmit = this.detailsInfo.isSubmit; this.isSubmit = this.detailsInfo.isSubmit;
this.isSign = this.detailsInfo.isSign; this.isSign = this.detailsInfo.isSign;
console.log("this.cardsInfo", this.cardsInfo);
this.cardsInfo.forEach((item) => { this.cardsInfo.forEach((item) => {
this.tabs.push(item.name); this.tabs.push(item.name);
this.tabsDetail.push(item.name);
}); });
if (this.isSign) {
this.getActiveTabDetails(0);
}
this.isDisable = this.isDisable || detailsInfo.synchronization == 1; // 是否禁用 1:已同步数据 0: 未同步数据 this.isDisable = this.isDisable || detailsInfo.synchronization == 1; // 是否禁用 1:已同步数据 0: 未同步数据
uni.hideLoading(); uni.hideLoading();
}) })
...@@ -287,7 +362,7 @@ export default { ...@@ -287,7 +362,7 @@ export default {
params.signImg = value; params.signImg = value;
console.log("all_data", all_data); console.log("all_data", all_data);
const index = all_data.findIndex((element) => element.uid == this.uid); const index = all_data.findIndex((element) => element.uid == this.uid);
console.log("签字获取数据",params) console.log("签字获取数据", params);
all_data[index] = params; all_data[index] = params;
const logContent = getLogContent(LOG_TYPE_ENUM.sign, "签字", "机房巡检"); const logContent = getLogContent(LOG_TYPE_ENUM.sign, "签字", "机房巡检");
// 更新巡检list // 更新巡检list
...@@ -312,6 +387,7 @@ export default { ...@@ -312,6 +387,7 @@ export default {
title: type == "sign" ? "签字成功" : "同步成功", title: type == "sign" ? "签字成功" : "同步成功",
icon: "success", icon: "success",
}); });
this.getActiveTabDetails(0);
}, },
lookTable() { lookTable() {
uni.navigateTo({ uni.navigateTo({
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论