|
|
@@ -1,144 +1,153 @@
|
|
|
<template>
|
|
|
<custom-header name="农情互动" bgColor="#f2f4f5"></custom-header>
|
|
|
- <div class="interaction-list" ref="interactionListRef">
|
|
|
- <div class="list-item" v-for="(item, index) in listData" :key="item.id || index"
|
|
|
- :class="{ 'uploaded-item': item.questionStatus !== 3 }">
|
|
|
- <!-- 标题区域 -->
|
|
|
- <div class="item-header-wrapper" :class="{ 'has-status': item.questionStatus !== 3 }">
|
|
|
- <div class="item-header">
|
|
|
- <div class="title">{{ item.interactionTypeName }}</div>
|
|
|
- <div class="status" :class="['urgent-' + item.urgent]" v-if="item.questionStatus === 3">{{
|
|
|
- urgentType[item.urgent] }}</div>
|
|
|
- </div>
|
|
|
- <div class="upload-status" v-show="item.questionStatus !== 3">
|
|
|
- <el-icon class="status-icon">
|
|
|
- <SuccessFilled />
|
|
|
- </el-icon>
|
|
|
- <span class="status-text">提交成功</span>
|
|
|
- </div>
|
|
|
+ <div class="interaction-list-wrapper">
|
|
|
+ <div class="interaction-card">
|
|
|
+ <img src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" alt="">
|
|
|
+ <div class="card-content">
|
|
|
+ <div class="card-title">互动主题:新梢长势评估</div>
|
|
|
+ <span class="card-desc">秋梢健壮是来年成花的关键,及时记录新梢萌动时间,可精准预测嫩叶旺长期,便于及时补充营养,防治病虫,培养健壮秋梢。 </span>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 未上传状态内容 -->
|
|
|
- <div class="uploaded-content" v-show="item.questionStatus === 3 || item.expanded">
|
|
|
- <div class="content-wrapper">
|
|
|
- <span>{{ item.remark }}</span>
|
|
|
- <text-ellipsis class="item-desc" rows="0" :content="item.reason" expand-text="展开"
|
|
|
- collapse-text="收起" />
|
|
|
- <div class="tip-box">如果不确定是否发生,直接上传照片即可</div>
|
|
|
- <div class="example-wrapper">
|
|
|
- <div class="example-header">
|
|
|
- <div>示例照片</div>
|
|
|
- <div class="more" v-if="item.exampleImageWithAnnotations.length > 3"
|
|
|
- @click="openMorePopup(item)">查看更多</div>
|
|
|
- </div>
|
|
|
- <div class="example-list" v-if="item.exampleImageWithAnnotations.length > 0">
|
|
|
- <div class="image-item-wrapper"
|
|
|
- v-for="(example, exIndex) in item.exampleImageWithAnnotations"
|
|
|
- :key="example.exampleImageUrl" @click="showExample(item, exIndex)">
|
|
|
- <img class="image-item" :src="example.exampleImageUrl" alt="" />
|
|
|
+ </div>
|
|
|
+ <div class="interaction-list" ref="interactionListRef">
|
|
|
+ <div class="list-item" v-for="(item, index) in listData" :key="item.id || index"
|
|
|
+ :class="{ 'uploaded-item': item.questionStatus !== 3 }">
|
|
|
+ <!-- 标题区域 -->
|
|
|
+ <div class="item-header-wrapper" :class="{ 'has-status': item.questionStatus !== 3 }">
|
|
|
+ <div class="item-header">
|
|
|
+ <div class="title">{{ item.interactionTypeName }}</div>
|
|
|
+ <div class="status" :class="['urgent-' + item.urgent]" v-if="item.questionStatus === 3">{{
|
|
|
+ urgentType[item.urgent] }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="upload-status" v-show="item.questionStatus !== 3">
|
|
|
+ <el-icon class="status-icon">
|
|
|
+ <SuccessFilled />
|
|
|
+ </el-icon>
|
|
|
+ <span class="status-text">提交成功</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 未上传状态内容 -->
|
|
|
+ <div class="uploaded-content" v-show="item.questionStatus === 3 || item.expanded">
|
|
|
+ <div class="content-wrapper">
|
|
|
+ <span>{{ item.remark }}</span>
|
|
|
+ <text-ellipsis class="item-desc" rows="0" :content="item.reason" expand-text="展开"
|
|
|
+ collapse-text="收起" />
|
|
|
+ <div class="tip-box">如果不确定是否发生,直接上传照片即可</div>
|
|
|
+ <div class="example-wrapper">
|
|
|
+ <div class="example-header">
|
|
|
+ <div>示例照片</div>
|
|
|
+ <div class="more" v-if="item.exampleImageWithAnnotations.length > 3"
|
|
|
+ @click="openMorePopup(item)">查看更多</div>
|
|
|
+ </div>
|
|
|
+ <div class="example-list" v-if="item.exampleImageWithAnnotations.length > 0">
|
|
|
+ <div class="image-item-wrapper"
|
|
|
+ v-for="(example, exIndex) in item.exampleImageWithAnnotations"
|
|
|
+ :key="example.exampleImageUrl" @click="showExample(item, exIndex)">
|
|
|
+ <img class="image-item" :src="example.exampleImageUrl" alt="" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <text-ellipsis class="patrol-suggestion" rows="2" :content="'巡园建议:' + item.patrolSuggestion">
|
|
|
+ <template #action="{ expanded }"><span class="action-text">{{ expanded ? '收起' : '展开'
|
|
|
+ }}</span></template>
|
|
|
+ </text-ellipsis>
|
|
|
</div>
|
|
|
- <text-ellipsis class="patrol-suggestion" rows="2" :content="'巡园建议:' + item.patrolSuggestion">
|
|
|
- <template #action="{ expanded }"><span class="action-text">{{ expanded ? '收起' : '展开'
|
|
|
- }}</span></template>
|
|
|
- </text-ellipsis>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 展开状态内容 -->
|
|
|
- <div class="expanded-content" v-show="item.imagePaths.length > 0">
|
|
|
- <!-- 原因说明 -->
|
|
|
- <div class="reason-text">上传照片({{ item.imagePaths.length }}张)</div>
|
|
|
- <!-- 图片展示 -->
|
|
|
- <div class="uploaded-images">
|
|
|
- <div class="uploaded-img-wrap" v-for="(image, imgIndex) in item.imagePaths" :key="image"
|
|
|
- @click="showExample(item, imgIndex, { hideLabel: true })">
|
|
|
- <img class="uploaded-img" :src="base_img_url2 + image" alt="" />
|
|
|
- <span v-show="item.questionStatus === 3" class="uploaded-img-remove"
|
|
|
- @click.stop="removeUploadedImage(item, imgIndex)">×</span>
|
|
|
+
|
|
|
+ <!-- 展开状态内容 -->
|
|
|
+ <div class="expanded-content" v-show="item.imagePaths.length > 0">
|
|
|
+ <!-- 原因说明 -->
|
|
|
+ <div class="reason-text">上传照片({{ item.imagePaths.length }}张)</div>
|
|
|
+ <!-- 图片展示 -->
|
|
|
+ <div class="uploaded-images">
|
|
|
+ <div class="uploaded-img-wrap" v-for="(image, imgIndex) in item.imagePaths" :key="image"
|
|
|
+ @click="showExample(item, imgIndex, { hideLabel: true })">
|
|
|
+ <img class="uploaded-img" :src="base_img_url2 + image" alt="" />
|
|
|
+ <span v-show="item.questionStatus === 3" class="uploaded-img-remove"
|
|
|
+ @click.stop="removeUploadedImage(item, imgIndex)">×</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+ <uploader v-show="item.questionStatus === 3" class="upload-wrap continue-upload-btn"
|
|
|
+ @click="handleUploadClick(item)" multiple :max-count="10" :after-read="afterReadUpload">
|
|
|
+ <div class="upload-btn">
|
|
|
+ <el-icon>
|
|
|
+ <Plus />
|
|
|
+ </el-icon>
|
|
|
+ <span>继续上传照片</span>
|
|
|
+ </div>
|
|
|
+ </uploader>
|
|
|
</div>
|
|
|
- <uploader v-show="item.questionStatus === 3" class="upload-wrap continue-upload-btn"
|
|
|
- @click="handleUploadClick(item)" multiple :max-count="10" :after-read="afterReadUpload">
|
|
|
+
|
|
|
+ <!-- 上传按钮 -->
|
|
|
+ <uploader v-if="item.imagePaths.length === 0 && item.questionStatus === 3"
|
|
|
+ @click="handleUploadClick(item)" class="upload-wrap" multiple :max-count="10"
|
|
|
+ :after-read="afterReadUpload">
|
|
|
<div class="upload-btn">
|
|
|
<el-icon>
|
|
|
<Plus />
|
|
|
</el-icon>
|
|
|
- <span>继续上传照片</span>
|
|
|
+ <span>点击上传照片</span>
|
|
|
</div>
|
|
|
</uploader>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 上传按钮 -->
|
|
|
- <uploader v-if="item.imagePaths.length === 0 && item.questionStatus === 3"
|
|
|
- @click="handleUploadClick(item)" class="upload-wrap" multiple :max-count="10"
|
|
|
- :after-read="afterReadUpload">
|
|
|
- <div class="upload-btn">
|
|
|
- <el-icon>
|
|
|
- <Plus />
|
|
|
- </el-icon>
|
|
|
- <span>点击上传照片</span>
|
|
|
+
|
|
|
+ <div class="question-wrapper" v-if="item.imagePaths.length">
|
|
|
+ <div class="question-cont">
|
|
|
+ <div class="question-text"
|
|
|
+ v-for="(q, qIdx) in (item.questionList || [item.question].filter(Boolean))" :key="qIdx">
|
|
|
+ <span class="text-title">{{ q }}</span>
|
|
|
+ <el-input v-model="item.answerValues[qIdx]" :disabled="item.questionStatus !== 3"
|
|
|
+ type="number" style="width: 70px">
|
|
|
+ <template #suffix>
|
|
|
+ <span class="text-unit">{{ item.indicators[qIdx]?.unit ?? item.indicators[0]?.unit
|
|
|
+ ?? '%' }}</span>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="draw-region-btn" v-if="item.interactionTypeId != 1 && item.questionStatus === 3"
|
|
|
+ @click="handleDrawRegion(item)">
|
|
|
+ 编辑发生区域</div>
|
|
|
+ <div class="draw-region-btn" v-if="item.rangeWkt && item.questionStatus !== 3"
|
|
|
+ @click="handleViewRegion(item)">
|
|
|
+ 查看发生区域</div>
|
|
|
</div>
|
|
|
- </uploader>
|
|
|
-
|
|
|
- <div class="question-wrapper" v-if="item.imagePaths.length">
|
|
|
- <div class="question-cont">
|
|
|
- <div class="question-text"
|
|
|
- v-for="(q, qIdx) in (item.questionList || [item.question].filter(Boolean))" :key="qIdx">
|
|
|
- <span class="text-title">{{ q }}</span>
|
|
|
- <el-input v-model="item.answerValues[qIdx]" :disabled="item.questionStatus !== 3"
|
|
|
- type="number" style="width: 70px">
|
|
|
- <template #suffix>
|
|
|
- <span class="text-unit">{{ item.indicators[qIdx]?.unit ?? item.indicators[0]?.unit
|
|
|
- ?? '%' }}</span>
|
|
|
- </template>
|
|
|
- </el-input>
|
|
|
+
|
|
|
+ <!-- 输入框 -->
|
|
|
+ <div class="input-wrapper">
|
|
|
+ <el-input v-model="item.replyText" :disabled="item.questionStatus !== 3" placeholder="请输入您咨询的问题"
|
|
|
+ clearable />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 按钮区域 -->
|
|
|
+ <div class="button-group" v-show="item.questionStatus === 3">
|
|
|
+ <div class="btn-not-reached" @click="handleConfirm(item, false)">{{ item.cancelButtonName }}</div>
|
|
|
+ <div class="btn-default" :class="{ 'btn-confirm': item.imagePaths.length > 0 }"
|
|
|
+ @click="handleConfirm(item, true)">
|
|
|
+ 确认提交
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="draw-region-btn" v-if="item.interactionTypeId != 1 && item.questionStatus === 3"
|
|
|
- @click="handleDrawRegion(item)">
|
|
|
- 编辑发生区域</div>
|
|
|
- <div class="draw-region-btn" v-if="item.rangeWkt && item.questionStatus !== 3"
|
|
|
- @click="handleViewRegion(item)">
|
|
|
- 查看发生区域</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 输入框 -->
|
|
|
- <div class="input-wrapper">
|
|
|
- <el-input v-model="item.replyText" :disabled="item.questionStatus !== 3" placeholder="请输入您咨询的问题"
|
|
|
- clearable />
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 按钮区域 -->
|
|
|
- <div class="button-group" v-show="item.questionStatus === 3">
|
|
|
- <div class="btn-not-reached" @click="handleConfirm(item, false)">{{ item.cancelButtonName }}</div>
|
|
|
- <div class="btn-default" :class="{ 'btn-confirm': item.imagePaths.length > 0 }"
|
|
|
- @click="handleConfirm(item, true)">
|
|
|
- 确认提交
|
|
|
+
|
|
|
+ <!-- 比例信息(已上传状态显示) -->
|
|
|
+ <div class="proportion-info" v-show="item.questionStatus !== 3"
|
|
|
+ :style="{ justifyContent: item.expanded ? 'center' : 'space-between' }">
|
|
|
+ <template v-if="!item.expanded">
|
|
|
+ <span class="proportion-text">{{(item.questionList && item.questionList.length
|
|
|
+ ? item.questionList.map((q, i) => q + ':' + (item.answerValues[i] ?? '') +
|
|
|
+ (item.indicators[i]?.unit
|
|
|
+ ?? item.indicators[0]?.unit ?? '%')).join('')
|
|
|
+ : item.question + ':' + (item.answerValues[0] ?? '') + (item.indicators[0]?.unit ?? '%'))
|
|
|
+ }}</span>
|
|
|
+ </template>
|
|
|
+ <div class="toggle-btn" @click="toggleExpand(item)">
|
|
|
+ <span>{{ item.expanded ? "收起" : "展开" }}</span>
|
|
|
+ <el-icon :class="{ rotate: !item.expanded }">
|
|
|
+ <CaretTop />
|
|
|
+ </el-icon>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 比例信息(已上传状态显示) -->
|
|
|
- <div class="proportion-info" v-show="item.questionStatus !== 3"
|
|
|
- :style="{ justifyContent: item.expanded ? 'center' : 'space-between' }">
|
|
|
- <template v-if="!item.expanded">
|
|
|
- <span class="proportion-text">{{(item.questionList && item.questionList.length
|
|
|
- ? item.questionList.map((q, i) => q + ':' + (item.answerValues[i] ?? '') +
|
|
|
- (item.indicators[i]?.unit
|
|
|
- ?? item.indicators[0]?.unit ?? '%')).join('')
|
|
|
- : item.question + ':' + (item.answerValues[0] ?? '') + (item.indicators[0]?.unit ?? '%'))
|
|
|
- }}</span>
|
|
|
- </template>
|
|
|
- <div class="toggle-btn" @click="toggleExpand(item)">
|
|
|
- <span>{{ item.expanded ? "收起" : "展开" }}</span>
|
|
|
- <el-icon :class="{ rotate: !item.expanded }">
|
|
|
- <CaretTop />
|
|
|
- </el-icon>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="empty-data" v-if="!loading && listData.length === 0">暂无数据</div>
|
|
|
</div>
|
|
|
- <div class="empty-data" v-if="!loading && listData.length === 0">暂无数据</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- <div class="custom-bottom-fixed-btns" :class="{ 'center-btn': false }">
|
|
|
@@ -464,7 +473,7 @@ const showExample = (item, index, options = {}) => {
|
|
|
const loadData = async () => {
|
|
|
loading.value = true;
|
|
|
try {
|
|
|
- const { data } = await VE_API.home.listTriggeredByFarm({ farmId: localStorage.getItem("selectedFarmId") })
|
|
|
+ const { data } = await VE_API.home.listTriggeredByFarm({ farmId: 766 })
|
|
|
listData.value = data.map(item => {
|
|
|
// question 按 || 切割成数组,用于循环渲染
|
|
|
const questionStr = item.question != null ? String(item.question) : '';
|
|
|
@@ -685,359 +694,385 @@ const handleSubmitAll = () => {
|
|
|
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
-.interaction-list {
|
|
|
+.interaction-list-wrapper{
|
|
|
width: 100%;
|
|
|
height: calc(100vh - 40px);
|
|
|
background: #f2f4f5;
|
|
|
padding: 12px;
|
|
|
box-sizing: border-box;
|
|
|
overflow-y: auto;
|
|
|
-
|
|
|
- .list-item {
|
|
|
+ .interaction-card{
|
|
|
background: #ffffff;
|
|
|
border-radius: 6px;
|
|
|
padding: 10px;
|
|
|
border: 1px solid #ffffff;
|
|
|
-
|
|
|
- &.uploaded-item {
|
|
|
- border: 1px solid #2199f8;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 145px;
|
|
|
+ object-fit: cover;
|
|
|
+ border-radius: 2px;
|
|
|
}
|
|
|
-
|
|
|
- .item-header-wrapper {
|
|
|
- .item-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- div {
|
|
|
- font-size: 16px;
|
|
|
- color: #6f6f6f;
|
|
|
- font-family: "PangMenZhengDao";
|
|
|
- width: fit-content;
|
|
|
- background: rgba(143, 143, 143, 0.1);
|
|
|
- padding: 5px 10px;
|
|
|
- border-radius: 2px;
|
|
|
- }
|
|
|
-
|
|
|
- .status {
|
|
|
- color: #999999;
|
|
|
- background: #F1F1F1;
|
|
|
-
|
|
|
- &.urgent-0 {
|
|
|
- color: #2199f8;
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
- }
|
|
|
-
|
|
|
- &.urgent-1 {
|
|
|
- color: #FF953D;
|
|
|
- background: rgba(255, 149, 61, 0.1);
|
|
|
- }
|
|
|
-
|
|
|
- &.urgent-2 {
|
|
|
- color: #EE4646;
|
|
|
- background: rgba(238, 70, 70, 0.1);
|
|
|
- }
|
|
|
- }
|
|
|
+ .card-content{
|
|
|
+ color: #666666;
|
|
|
+ margin-top: 8px;
|
|
|
+ .card-title{
|
|
|
+ font-size: 16px;
|
|
|
+ color: #000000;
|
|
|
+ font-weight: 500;
|
|
|
+ margin-bottom: 4px;
|
|
|
}
|
|
|
-
|
|
|
- .upload-status {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 4px;
|
|
|
- margin-left: 10px;
|
|
|
-
|
|
|
- .status-icon {
|
|
|
- color: #2199f8;
|
|
|
- font-size: 17px;
|
|
|
- }
|
|
|
-
|
|
|
- .status-text {
|
|
|
- font-size: 14px;
|
|
|
- color: #2199f8;
|
|
|
- }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .interaction-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ .list-item {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 10px;
|
|
|
+ border: 1px solid #ffffff;
|
|
|
+
|
|
|
+ &.uploaded-item {
|
|
|
+ border: 1px solid #2199f8;
|
|
|
}
|
|
|
-
|
|
|
- &.has-status {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
+
|
|
|
+ .item-header-wrapper {
|
|
|
.item-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
div {
|
|
|
- color: #2199f8;
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
+ font-size: 16px;
|
|
|
+ color: #6f6f6f;
|
|
|
+ font-family: "PangMenZhengDao";
|
|
|
+ width: fit-content;
|
|
|
+ background: rgba(143, 143, 143, 0.1);
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status {
|
|
|
+ color: #999999;
|
|
|
+ background: #F1F1F1;
|
|
|
+
|
|
|
+ &.urgent-0 {
|
|
|
+ color: #2199f8;
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.urgent-1 {
|
|
|
+ color: #FF953D;
|
|
|
+ background: rgba(255, 149, 61, 0.1);
|
|
|
+ }
|
|
|
+
|
|
|
+ &.urgent-2 {
|
|
|
+ color: #EE4646;
|
|
|
+ background: rgba(238, 70, 70, 0.1);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .expanded-content {
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
- border-radius: 5px;
|
|
|
- padding: 10px;
|
|
|
- border: 0.5px solid #2199F8;
|
|
|
- margin-top: 12px;
|
|
|
-
|
|
|
- .uploaded-images {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- gap: 8px;
|
|
|
- margin-top: 8px;
|
|
|
-
|
|
|
- .uploaded-img-wrap {
|
|
|
- position: relative;
|
|
|
- width: calc((100vw - 68px) / 4);
|
|
|
- height: calc((100vw - 68px) / 4);
|
|
|
- }
|
|
|
-
|
|
|
- .uploaded-img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 4px;
|
|
|
- object-fit: cover;
|
|
|
+
|
|
|
+ .upload-status {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 4px;
|
|
|
+ margin-left: 10px;
|
|
|
+
|
|
|
+ .status-icon {
|
|
|
+ color: #2199f8;
|
|
|
+ font-size: 17px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #2199f8;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .uploaded-img-remove {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- right: 0;
|
|
|
- width: 18px;
|
|
|
- height: 18px;
|
|
|
+
|
|
|
+ &.has-status {
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
- background: rgba(0, 0, 0, 0.6);
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 16px;
|
|
|
- border-radius: 50%;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .item-header {
|
|
|
+ div {
|
|
|
+ color: #2199f8;
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .continue-upload-btn {
|
|
|
- border: 0.5px solid rgba(33, 153, 248, 0.5);
|
|
|
- border-radius: 4px;
|
|
|
- background: #FFFFFF;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .uploaded-content {
|
|
|
- .content-wrapper {
|
|
|
- border: 0.5px solid rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 4px;
|
|
|
+
|
|
|
+ .expanded-content {
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ border-radius: 5px;
|
|
|
padding: 10px;
|
|
|
+ border: 0.5px solid #2199F8;
|
|
|
margin-top: 12px;
|
|
|
-
|
|
|
- .item-desc {
|
|
|
- color: #3C3C3C;
|
|
|
- margin-bottom: 10px;
|
|
|
- display: inline-block;
|
|
|
+
|
|
|
+ .uploaded-images {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ gap: 8px;
|
|
|
+ margin-top: 8px;
|
|
|
+
|
|
|
+ .uploaded-img-wrap {
|
|
|
+ position: relative;
|
|
|
+ width: calc((100vw - 68px) / 4);
|
|
|
+ height: calc((100vw - 68px) / 4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploaded-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 4px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploaded-img-remove {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ background: rgba(0, 0, 0, 0.6);
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 16px;
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
- .tip-box {
|
|
|
- font-size: 12px;
|
|
|
- color: #2199F8;
|
|
|
- padding: 3px 5px;
|
|
|
+
|
|
|
+ .continue-upload-btn {
|
|
|
+ border: 0.5px solid rgba(33, 153, 248, 0.5);
|
|
|
border-radius: 4px;
|
|
|
- margin-bottom: 10px;
|
|
|
- background: linear-gradient(90deg, rgba(33, 153, 248, 0.2) 0%, rgba(221, 221, 221, 0) 100%);
|
|
|
+ background: #FFFFFF;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
-
|
|
|
- .example-wrapper {
|
|
|
- .example-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 8px;
|
|
|
- color: #BEB9B9;
|
|
|
-
|
|
|
- .more {
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ .uploaded-content {
|
|
|
+ .content-wrapper {
|
|
|
+ border: 0.5px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 10px;
|
|
|
+ margin-top: 12px;
|
|
|
+
|
|
|
+ .item-desc {
|
|
|
+ color: #3C3C3C;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: inline-block;
|
|
|
}
|
|
|
-
|
|
|
- .example-list {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- overflow: hidden;
|
|
|
-
|
|
|
- .image-item-wrapper {
|
|
|
- position: relative;
|
|
|
- margin-right: 6px;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: '示例';
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- background: rgba(0, 0, 0, 0.7);
|
|
|
- color: #F2F4F5;
|
|
|
- padding: 2px 6px;
|
|
|
- border-radius: 8px 0 2px 0;
|
|
|
- font-size: 10px;
|
|
|
- z-index: 1;
|
|
|
+
|
|
|
+ .tip-box {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #2199F8;
|
|
|
+ padding: 3px 5px;
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ background: linear-gradient(90deg, rgba(33, 153, 248, 0.2) 0%, rgba(221, 221, 221, 0) 100%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .example-wrapper {
|
|
|
+ .example-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ color: #BEB9B9;
|
|
|
+
|
|
|
+ .more {
|
|
|
+ font-size: 12px;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .image-item {
|
|
|
- width: calc((100vw - 68px) / 4);
|
|
|
- height: calc((100vw - 68px) / 4);
|
|
|
- border-radius: 8px;
|
|
|
- object-fit: cover;
|
|
|
+
|
|
|
+ .example-list {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .image-item-wrapper {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 6px;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '示例';
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.7);
|
|
|
+ color: #F2F4F5;
|
|
|
+ padding: 2px 6px;
|
|
|
+ border-radius: 8px 0 2px 0;
|
|
|
+ font-size: 10px;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-item {
|
|
|
+ width: calc((100vw - 68px) / 4);
|
|
|
+ height: calc((100vw - 68px) / 4);
|
|
|
+ border-radius: 8px;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .patrol-suggestion {
|
|
|
+ color: rgba(60, 60, 60, 0.4);
|
|
|
+ margin-top: 10px;
|
|
|
+
|
|
|
+ .action-text {
|
|
|
+ color: #727272;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .patrol-suggestion {
|
|
|
- color: rgba(60, 60, 60, 0.4);
|
|
|
- margin-top: 10px;
|
|
|
-
|
|
|
- .action-text {
|
|
|
- color: #727272;
|
|
|
+
|
|
|
+ .upload-wrap {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 12px;
|
|
|
+
|
|
|
+ ::v-deep {
|
|
|
+ .van-uploader__input-wrapper {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-btn {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ gap: 4px;
|
|
|
+ color: #0B84E4;
|
|
|
+ padding: 6px;
|
|
|
+ border: 0.5px solid rgba(33, 153, 248, 0.5);
|
|
|
+ border-radius: 4px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .upload-wrap {
|
|
|
- width: 100%;
|
|
|
+
|
|
|
+ .input-wrapper {
|
|
|
+ margin: 12px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .button-group {
|
|
|
+ display: flex;
|
|
|
+ gap: 12px;
|
|
|
+
|
|
|
+ .btn-not-reached,
|
|
|
+ .btn-default {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-not-reached {
|
|
|
+ max-width: fit-content;
|
|
|
+ background: #fff;
|
|
|
+ color: #585858;
|
|
|
+ border: 1px solid rgba(88, 88, 88, 0.2);
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-default {
|
|
|
+ background: #F1F1F1;
|
|
|
+ color: #999999;
|
|
|
+ border: 1px solid #F1F1F1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-confirm {
|
|
|
+ background: #2199f8;
|
|
|
+ color: #ffffff;
|
|
|
+ border: 1px solid #2199f8;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .proportion-info {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
margin-top: 12px;
|
|
|
-
|
|
|
- ::v-deep {
|
|
|
- .van-uploader__input-wrapper {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
+
|
|
|
+ .proportion-text {
|
|
|
+ color: #969696;
|
|
|
+ font-size: 14px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ flex: 1;
|
|
|
+ margin-right: 10px;
|
|
|
}
|
|
|
-
|
|
|
- .upload-btn {
|
|
|
- width: 100%;
|
|
|
+
|
|
|
+ .toggle-btn {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- gap: 4px;
|
|
|
- color: #0B84E4;
|
|
|
- padding: 6px;
|
|
|
- border: 0.5px solid rgba(33, 153, 248, 0.5);
|
|
|
- border-radius: 4px;
|
|
|
- box-sizing: border-box;
|
|
|
+ gap: 2px;
|
|
|
+ color: #8D8D8D;
|
|
|
+ padding: 2px 10px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.2);
|
|
|
+ font-size: 12px;
|
|
|
+ border-radius: 25px;
|
|
|
+ background: #FFFFFF;
|
|
|
+
|
|
|
+ .rotate {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .input-wrapper {
|
|
|
- margin: 12px 0;
|
|
|
+
|
|
|
+ .list-item+.list-item {
|
|
|
+ margin-top: 12px;
|
|
|
}
|
|
|
-
|
|
|
- .button-group {
|
|
|
- display: flex;
|
|
|
- gap: 12px;
|
|
|
-
|
|
|
- .btn-not-reached,
|
|
|
- .btn-default {
|
|
|
- flex: 1;
|
|
|
- text-align: center;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-not-reached {
|
|
|
- max-width: fit-content;
|
|
|
- background: #fff;
|
|
|
- color: #585858;
|
|
|
- border: 1px solid rgba(88, 88, 88, 0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .btn-default {
|
|
|
- background: #F1F1F1;
|
|
|
- color: #999999;
|
|
|
- border: 1px solid #F1F1F1;
|
|
|
- }
|
|
|
-
|
|
|
- .btn-confirm {
|
|
|
- background: #2199f8;
|
|
|
- color: #ffffff;
|
|
|
- border: 1px solid #2199f8;
|
|
|
- }
|
|
|
+
|
|
|
+ .empty-data {
|
|
|
+ text-align: center;
|
|
|
+ padding: 40px 0;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 14px;
|
|
|
}
|
|
|
-
|
|
|
- .proportion-info {
|
|
|
+
|
|
|
+ .question-wrapper {
|
|
|
display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-top: 12px;
|
|
|
-
|
|
|
- .proportion-text {
|
|
|
- color: #969696;
|
|
|
- font-size: 14px;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- flex: 1;
|
|
|
- margin-right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .toggle-btn {
|
|
|
+ gap: 10px;
|
|
|
+ margin: 12px 0 6px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .question-text {
|
|
|
+ background: #ffffff;
|
|
|
+ color: #6f6f6f;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- gap: 2px;
|
|
|
- color: #8D8D8D;
|
|
|
- padding: 2px 10px;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.2);
|
|
|
- font-size: 12px;
|
|
|
- border-radius: 25px;
|
|
|
- background: #FFFFFF;
|
|
|
-
|
|
|
- .rotate {
|
|
|
- transform: rotate(180deg);
|
|
|
+
|
|
|
+ .text-title {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-unit {
|
|
|
+ margin-left: 4px;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .list-item+.list-item {
|
|
|
- margin-top: 12px;
|
|
|
- }
|
|
|
-
|
|
|
- .empty-data {
|
|
|
- text-align: center;
|
|
|
- padding: 40px 0;
|
|
|
- color: #999999;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
-
|
|
|
- .question-wrapper {
|
|
|
- display: flex;
|
|
|
- align-items: flex-start;
|
|
|
- justify-content: space-between;
|
|
|
- gap: 10px;
|
|
|
- margin: 12px 0 6px;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100%;
|
|
|
-
|
|
|
- .question-text {
|
|
|
- background: #ffffff;
|
|
|
- color: #6f6f6f;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .text-title {
|
|
|
- margin-right: 5px;
|
|
|
+
|
|
|
+ .question-text+.question-text {
|
|
|
+ margin-top: 6px;
|
|
|
}
|
|
|
-
|
|
|
- .text-unit {
|
|
|
- margin-left: 4px;
|
|
|
+
|
|
|
+ .draw-region-btn {
|
|
|
+ background: rgba(33, 153, 248, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ padding: 6px 10px;
|
|
|
+ color: #2199f8;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .question-text+.question-text {
|
|
|
- margin-top: 6px;
|
|
|
- }
|
|
|
-
|
|
|
- .draw-region-btn {
|
|
|
- background: rgba(33, 153, 248, 0.1);
|
|
|
- border-radius: 4px;
|
|
|
- padding: 6px 10px;
|
|
|
- color: #2199f8;
|
|
|
- }
|
|
|
}
|
|
|
}
|
|
|
|