|
|
@@ -1,987 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="status-detail">
|
|
|
- <custom-header :name="$t('农事详情')" isGoBack @goback="handleClose"></custom-header>
|
|
|
-
|
|
|
- <div class="detail-content" :class="{ 'has-group': isLocked }">
|
|
|
- <!-- 橙色状态头部 -->
|
|
|
- <div class="status-header" :class="'status-' + status">
|
|
|
- <!-- <div class="status-left" v-if="status === -1">
|
|
|
- <div class="status-text">
|
|
|
- <span>{{ t('未执行') }}</span>
|
|
|
- </div>
|
|
|
- <div class="status-sub-text">{{ t('执行时间已过去 7 天') }}</div>
|
|
|
- </div> -->
|
|
|
- <div class="status-left" v-if="status === 5">
|
|
|
- <div class="status-text">
|
|
|
- <span>{{ t('已完成') }}</span>
|
|
|
- </div>
|
|
|
- <div class="status-sub-text">执行时间:{{ detailData?.detail?.executeDate }}</div>
|
|
|
- </div>
|
|
|
- <div class="status-left" v-else-if="status === 0 || !status">
|
|
|
- <div class="status-text">
|
|
|
- <span>{{ t('未激活') }}</span>
|
|
|
- </div>
|
|
|
- <div class="status-sub-text">
|
|
|
- 预计激活时间 {{ detailData?.activateTime ? formatDate(detailData.activateTime) : "" }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="status-left" v-else>
|
|
|
- <div class="status-text">
|
|
|
- <span>{{ t('已激活') }}</span>
|
|
|
- </div>
|
|
|
- <div class="status-sub-text" v-if="daysDiff > 0">距离执行时间还差 {{ daysDiff }} 天</div>
|
|
|
- <div class="status-sub-text" v-else-if="daysDiff === 0">{{ t('触发时间为今天') }}</div>
|
|
|
- <div class="status-sub-text" v-else>{{ t('触发时间已过') }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="card-wrap">
|
|
|
- <!-- 内容卡片 -->
|
|
|
- <div class="card-box content-card">
|
|
|
- <div class="card-header">
|
|
|
- <div class="card-title-wrap">
|
|
|
- <div class="card-title">{{ detailData?.detail?.farmWorkName }}</div>
|
|
|
- <div class="type-tag">{{ typeMap[detailData?.detail?.farmWorkType || 1] }}</div>
|
|
|
- </div>
|
|
|
- <!-- <div class="forward-link" @click="handleForward">{{ t('转发处方') }}</div> -->
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="card-info">
|
|
|
- <div class="info-item">
|
|
|
- <span class="info-label">{{ t('下发专家') }}</span>
|
|
|
- <span class="info-value">{{ detailData?.expertNameFromFarmBasicInfo }}</span>
|
|
|
- </div>
|
|
|
- <div class="info-item">
|
|
|
- <span class="info-label">{{ t('执行时间') }}</span>
|
|
|
- <span class="info-value">{{ detailData?.detail?.executeDate }}</span>
|
|
|
- </div>
|
|
|
- <div class="info-item">
|
|
|
- <span class="info-label">{{ t('农事建议') }}</span>
|
|
|
- <span class="info-value">{{ detailData?.detail?.purpose }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="card-actions">
|
|
|
- <div class="action-btn" @click="handleViewPrescription">
|
|
|
- 药物处方
|
|
|
- <el-icon class="action-btn-icon" :class="{ 'rotate': showPrescription }" :size="16"><DArrowRight /></el-icon>
|
|
|
- </div>
|
|
|
- <div class="action-btn" @click="handleViewArea">
|
|
|
- 执行区域
|
|
|
- <el-icon class="action-btn-icon" :class="{ 'rotate': showMapArea }" :size="16"><DArrowRight /></el-icon>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <transition name="prescription-slide">
|
|
|
- <div class="new-wrap"
|
|
|
- :class="{'has-lock': isLocked}"
|
|
|
- v-show="showPrescription && detailData?.detail?.prescriptionList?.length && detailData?.detail?.prescriptionList[0]?.pesticideFertilizerList?.length > 0">
|
|
|
-
|
|
|
- <div class="info-item pb-8">
|
|
|
- <span class="info-label">{{ t('施用方式') }}</span>
|
|
|
- <span class="info-value">{{ detailData?.detail?.usageMode }}</span>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="new-wrap-inner">
|
|
|
- <div class="new-title">
|
|
|
- <div class="title-1">
|
|
|
- <div class="table-name">{{ t('药肥类型') }}</div>
|
|
|
- </div>
|
|
|
- <div class="title-2">
|
|
|
- <div class="table-name">{{ t('药肥名称') }}</div>
|
|
|
- </div>
|
|
|
- <div class="title-4">
|
|
|
- <div class="table-name">{{ t('药肥配比') }}</div>
|
|
|
- </div>
|
|
|
- <div class="title-5">
|
|
|
- <div class="table-name">{{ t('单亩用量') }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="new-table-wrap"
|
|
|
- v-for="(prescriptionItem, prescriptionI) in detailData?.detail?.prescriptionList"
|
|
|
- :key="prescriptionI">
|
|
|
- <div class="new-prescription"
|
|
|
- v-for="(subP, subI) in prescriptionItem.pesticideFertilizerList" :key="subI">
|
|
|
- <div class="new-table">
|
|
|
- <div class="line-l">
|
|
|
- <div class="line-1 title-1">{{ subP.typeName }}</div>
|
|
|
- <div class="line-2">{{ subP.defaultName || subP.pesticideFertilizerName }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="line-r">
|
|
|
- <div class="line-3">
|
|
|
- <div class="sub-line title-4">{{ detailData?.detail?.executionMethod === 1 ?
|
|
|
- subP.ratio2 : subP.ratio }}倍</div>
|
|
|
- <div class="sub-line title-5">{{ detailData?.detail?.executionMethod === 1 ?
|
|
|
- subP.muUsage2 : subP.muUsage }}{{ subP.unit }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="note-text" v-if="subP.remark">{{ subP.remark }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 带锁 -->
|
|
|
- <div class="lock-wrap" v-if="isLocked">
|
|
|
- <img class="lock-img" src="@/assets/img/home/lock.png" alt="">
|
|
|
- <div class="lock-text">
|
|
|
- 加入下方指导群可解锁
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
-
|
|
|
- <transition name="prescription-slide">
|
|
|
- <div v-if="showMapArea" class="map-info-wrap">
|
|
|
- <map-info :key="`map-${farmId}`" :farm-id="farmId" />
|
|
|
- </div>
|
|
|
- </transition>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="card-box action-video">
|
|
|
- <div class="card-header">
|
|
|
- <div class="card-title-wrap">
|
|
|
- <div class="card-title">{{ t('执行操作') }}</div>
|
|
|
- </div>
|
|
|
- <!-- <div class="forward-link" @click="handleForward">{{ t('转发操作指南') }}</div> -->
|
|
|
- </div>
|
|
|
- <div class="video-wrap">
|
|
|
- <photo-provider :photo-closable="true" v-if="guideSrc">
|
|
|
- <photo-consumer
|
|
|
- :src="guideSrc"
|
|
|
- >
|
|
|
- <img class="video-img" :src="guideSrc" alt="">
|
|
|
- </photo-consumer>
|
|
|
- </photo-provider>
|
|
|
- <div class="video-play-icon">
|
|
|
- <div
|
|
|
- v-html="detailData?.post?.content"
|
|
|
- ></div>
|
|
|
- <!-- <div class="expand-text" @click="toggleGuideExpand">
|
|
|
- <el-icon class="expand-icon" :class="{ 'rotate': isGuideExpanded }"><DArrowLeft /></el-icon>
|
|
|
- {{isGuideExpanded ? '收起' : '展开详细操作指南'}}
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- <!-- <video src="https://birdseye-img-ali-cdn.sysuimars.com/bbs_post/video/1767872309467.mp4"
|
|
|
- controls style="width: 100%; max-width: 100%; height: auto; border-radius: 8px"
|
|
|
- preload="metadata" playsinline webkit-playsinline x5-playsinline></video> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 执行档案 -->
|
|
|
- <!-- <div class="card-box execution-file">
|
|
|
- <div class="card-header">
|
|
|
- <div class="card-title-wrap">
|
|
|
- <div class="card-title">{{ t('执行档案') }}</div>
|
|
|
- </div>
|
|
|
- <div class="forward-link" @click="handleShowQrCodePopup(1)">{{ t('邀请拍照') }}</div>
|
|
|
- </div>
|
|
|
- <div class="exe-upload">
|
|
|
- <upload :maxCount="10" ref="uploadRef" exampleImg class="upload-wrap" @handleUpload="handleUpload">
|
|
|
- <img class="example" src="@/assets/img/home/plus.png" alt="" />
|
|
|
- </upload>
|
|
|
- </div>
|
|
|
- <div class="no-text">{{ t('暂未检测到拍照') }}</div>
|
|
|
- </div> -->
|
|
|
-
|
|
|
- <!-- 执行轨迹 -->
|
|
|
- <!-- <div class="card-box execution-file">
|
|
|
- <div class="card-header">
|
|
|
- <div class="card-title-wrap">
|
|
|
- <div class="card-title">{{ t('执行轨迹') }}</div>
|
|
|
- </div>
|
|
|
- <div class="forward-link" @click="handleShowQrCodePopup(2)">{{ t('转发执行二维码') }}</div>
|
|
|
- </div>
|
|
|
- <div class="exe-upload">
|
|
|
- <upload :maxCount="10" :key="2" ref="uploadRef2" exampleImg class="upload-wrap" @handleUpload="handleUpload2">
|
|
|
- <img class="example" src="@/assets/img/home/plus.png" alt="" />
|
|
|
- </upload>
|
|
|
- </div>
|
|
|
- <div class="no-text">{{ t('暂未检测到工人执行') }}</div>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 群 -->
|
|
|
- <div class="group-wrap" v-if="isLocked">
|
|
|
- <div class="group-left">
|
|
|
- <el-avatar :size="34" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" />
|
|
|
- <div class="group-name">
|
|
|
- <div class="name-text">{{ t('加入冼老师种植群') }}</div>
|
|
|
- <div class="group-desc">{{ t('每日农情打卡,享一对一专家指导') }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="group-right">
|
|
|
- <photo-provider :photo-closable="true">
|
|
|
- <photo-consumer
|
|
|
- :src="groupSrc"
|
|
|
- >
|
|
|
- <img class="group-img" :src="groupSrc" alt="">
|
|
|
- </photo-consumer>
|
|
|
- </photo-provider>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 我已执行 -->
|
|
|
- <!-- <div class="bottom-btn-wrap">
|
|
|
- <div class="bottom-btn" @click="selectExecuteTime">{{ t('我已执行') }}</div>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 二维码弹窗 -->
|
|
|
- <popup v-model:show="showQrCodePopup" closeable class="code-popup">
|
|
|
- <div class="code-popup-wrap">
|
|
|
- <div class="qr-code-content">
|
|
|
- <img class="qr-code-img" src="@/assets/img/home/qrcode.png" alt="" />
|
|
|
- </div>
|
|
|
- <div class="text-wrap">
|
|
|
- <div class="qr-code-text">
|
|
|
- 此二维码为
|
|
|
- <span v-if="qrCodeType === 1"><span class="work-name">{{ t('梢期杀虫') }}</span>{{ t('上传执行照片邀请码') }}</span>
|
|
|
- <span v-if="qrCodeType === 2"><span class="work-name">{{ t('梢期杀虫') }}</span>{{ t('执行码') }}</span>
|
|
|
- </div>
|
|
|
- <div class="qr-code-text">{{ t('有效期:2025.07.15之前') }}</div>
|
|
|
- </div>
|
|
|
- <div class="code-tips">{{ t('<<长按二维码保存或转发>>') }}</div>
|
|
|
- </div>
|
|
|
- </popup>
|
|
|
-
|
|
|
- <!-- 执行区域地图弹窗 -->
|
|
|
- <!-- <popup v-model:show="showMapPopup" closeable class="map-popup">
|
|
|
- <map-info :farm-id="farmId" />
|
|
|
- </popup> -->
|
|
|
-
|
|
|
- <!-- 处方卡片 -->
|
|
|
- <detail-dialog ref="detailDialogRef" />
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 确认执行时间 -->
|
|
|
- <calendar v-model:show="showCalendar" :title="t('执行日期')" @confirm="onConfirmExecuteTime" :min-date="minDate" :max-date="maxDate" />
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup>
|
|
|
-import { useI18n } from "@/i18n";
|
|
|
-const { t } = useI18n();
|
|
|
-import { useRouter, useRoute } from "vue-router";
|
|
|
-import { showSuccessToast } from 'vant';
|
|
|
-import { ElMessage } from "element-plus";
|
|
|
-import { ref, onActivated, onDeactivated, computed } from "vue";
|
|
|
-import customHeader from "@/components/customHeader.vue";
|
|
|
-import { Warning } from "@element-plus/icons-vue";
|
|
|
-import upload from "@/components/upload";
|
|
|
-import detailDialog from "@/components/detailDialog.vue";
|
|
|
-import MapInfo from "@/views/old_mini/agri_record/components/mapInfo.vue";
|
|
|
-import { Popup, Calendar } from "vant";
|
|
|
-import { formatDate } from "@/common/commonFun";
|
|
|
-
|
|
|
-const router = useRouter();
|
|
|
-const route = useRoute();
|
|
|
-
|
|
|
-const status = ref(null);
|
|
|
-
|
|
|
-const typeMap = ref({
|
|
|
- 0: "预警农事",
|
|
|
- 1: "标准农事",
|
|
|
- 2: "建议农事",
|
|
|
- 3: "自建农事",
|
|
|
-});
|
|
|
-
|
|
|
-const handleClose = () => {
|
|
|
- router.go(-1);
|
|
|
-};
|
|
|
-
|
|
|
-const guideSrc = ref(null);
|
|
|
-const groupSrc = ref(require("@/assets/img/home/qrcode.png"));
|
|
|
-
|
|
|
-const showCalendar = ref(false);
|
|
|
-const minDate = ref(new Date(2025, 0, 1));
|
|
|
-const maxDate = ref(new Date());
|
|
|
-
|
|
|
-
|
|
|
-// 计算距离执行时间的天数差
|
|
|
-const daysDiff = computed(() => {
|
|
|
- if (!detailData.value?.detail?.executeDate) {
|
|
|
- return 0;
|
|
|
- }
|
|
|
-
|
|
|
- const executeDate = new Date(detailData.value?.detail?.executeDate);
|
|
|
- const today = new Date();
|
|
|
-
|
|
|
- // 将时间设置为 00:00:00,只比较日期
|
|
|
- executeDate.setHours(0, 0, 0, 0);
|
|
|
- today.setHours(0, 0, 0, 0);
|
|
|
-
|
|
|
- // 计算天数差(毫秒转天数)
|
|
|
- const diffTime = executeDate.getTime() - today.getTime();
|
|
|
- const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24));
|
|
|
-
|
|
|
- return diffDays;
|
|
|
-});
|
|
|
-
|
|
|
-const onConfirmExecuteTime = (date) => {
|
|
|
- showCalendar.value = false;
|
|
|
- console.log(formatDate(date) );
|
|
|
-};
|
|
|
-/* 选择执行时间 */
|
|
|
-const selectExecuteTime = () => {
|
|
|
- showCalendar.value = true;
|
|
|
-};
|
|
|
-
|
|
|
-const handleForward = async () => {
|
|
|
- // 转发处方:复制处方链接到剪贴板
|
|
|
- const url = `${window.location.origin}/#/prescription_page?id=${route.query.miniJson ? JSON.parse(route.query.miniJson).id : null}`;
|
|
|
-
|
|
|
- try {
|
|
|
- if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
|
- await navigator.clipboard.writeText(url);
|
|
|
- // showSuccessToast(t('复制成功')));
|
|
|
- ElMessage.success({ message: t('复制成功'), type: 'success' });
|
|
|
- } else {
|
|
|
- // 兼容不支持 clipboard API 的环境
|
|
|
- const textarea = document.createElement("textarea");
|
|
|
- textarea.value = url;
|
|
|
- textarea.style.position = "fixed";
|
|
|
- textarea.style.opacity = "0";
|
|
|
- document.body.appendChild(textarea);
|
|
|
- textarea.select();
|
|
|
- document.execCommand("copy");
|
|
|
- document.body.removeChild(textarea);
|
|
|
- }
|
|
|
- } catch (e) {
|
|
|
- // 复制失败时不抛出错误,避免影响主流程
|
|
|
- }
|
|
|
-};
|
|
|
-
|
|
|
-const detailDialogRef = ref(null);
|
|
|
-// 控制处方列表展开/收起
|
|
|
-const showPrescription = ref(false);
|
|
|
-
|
|
|
-const handleViewPrescription = () => {
|
|
|
- // 收起执行区域地图
|
|
|
- showMapArea.value = false;
|
|
|
- // 切换处方列表展开/收起状态
|
|
|
- showPrescription.value = !showPrescription.value;
|
|
|
-};
|
|
|
-
|
|
|
-// 控制执行区域地图展开/收起
|
|
|
-const showMapArea = ref(false);
|
|
|
-
|
|
|
-const detailData = ref({});
|
|
|
-
|
|
|
-const farmId = ref();
|
|
|
-
|
|
|
-const handleViewArea = () => {
|
|
|
- // 收起药物处方
|
|
|
- showPrescription.value = false;
|
|
|
- // 切换执行区域地图展开/收起状态
|
|
|
- showMapArea.value = !showMapArea.value;
|
|
|
-};
|
|
|
-
|
|
|
-const uploadRef = ref(null);
|
|
|
-const uploadRef2 = ref(null);
|
|
|
-const images = ref([]);
|
|
|
-const images2 = ref([]);
|
|
|
-const handleUpload = ({ imgArr }) => {
|
|
|
- images.value = imgArr;
|
|
|
-};
|
|
|
-
|
|
|
-const handleUpload2 = ({ imgArr }) => {
|
|
|
- images2.value = imgArr;
|
|
|
-};
|
|
|
-
|
|
|
-const qrCodeType = ref(null);
|
|
|
-const showQrCodePopup = ref(false);
|
|
|
-const handleShowQrCodePopup = (type) => {
|
|
|
- qrCodeType.value = type;
|
|
|
- showQrCodePopup.value = true;
|
|
|
-};
|
|
|
-
|
|
|
-const isLocked = ref(false);
|
|
|
-
|
|
|
-const miniJson = ref(null);
|
|
|
-
|
|
|
-onActivated(() => {
|
|
|
- miniJson.value = route.query.miniJson ? JSON.parse(route.query.miniJson) : null;
|
|
|
- farmId.value = miniJson.value?.farmId;
|
|
|
- if (miniJson.value?.farmWorkLibId) {
|
|
|
- getDetail(miniJson.value.farmWorkLibId);
|
|
|
- }
|
|
|
-});
|
|
|
-
|
|
|
-onDeactivated(() => {
|
|
|
-
|
|
|
- // 收起执行区域地图
|
|
|
- showMapArea.value = false;
|
|
|
- // 收起药物处方
|
|
|
- showPrescription.value = false;
|
|
|
-})
|
|
|
-
|
|
|
-
|
|
|
-const getDetail = async (farmWorkLibId) => {
|
|
|
- const { data } = await VE_API.z_farm_work_record.getDetailById({ farmWorkLibId, farmWorkRecordId: miniJson.value.farmWorkRecordId, farmId: farmId.value });
|
|
|
- detailData.value = data;
|
|
|
- status.value = data?.detail?.flowStatus;
|
|
|
- guideSrc.value = data?.post?.media ? JSON.parse(data?.post?.media)[0] : null;
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.status-detail {
|
|
|
- height: 100vh;
|
|
|
- width: 100%;
|
|
|
- background: #f2f3f5;
|
|
|
-
|
|
|
- .detail-content {
|
|
|
- height: calc(100% - 44px);
|
|
|
- overflow: auto;
|
|
|
- box-sizing: border-box;
|
|
|
- padding-bottom: 10px;
|
|
|
- &.has-group {
|
|
|
- padding-bottom: 104px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.status-header {
|
|
|
- position: relative;
|
|
|
- padding: 16px 12px 16px 12px;
|
|
|
- color: #fff;
|
|
|
- z-index: 2;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- &::after {
|
|
|
- content: "";
|
|
|
- z-index: -1;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- height: 144px;
|
|
|
- background: #C7C7C7;
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- &.status-0 {
|
|
|
- &::after {
|
|
|
- background: #C7C7C7;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.status-1, &.status-2, &.status-3, &.status-4 {
|
|
|
- &::after {
|
|
|
- background: #ff953d;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.status-5 {
|
|
|
- &::after {
|
|
|
- background: #2199f8;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.status-6 {
|
|
|
- &::after {
|
|
|
- background: #ff6666;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .status-left {
|
|
|
- .status-text {
|
|
|
- font-size: 22px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-bottom: 4px;
|
|
|
-
|
|
|
- .status-icon {
|
|
|
- margin-right: 8px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .status-sub-text {
|
|
|
- color: #fff;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.card-box {
|
|
|
- background: #fff;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 12px 10px 16px 10px;
|
|
|
-
|
|
|
- .card-header {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 8px;
|
|
|
-
|
|
|
- .card-title-wrap {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .card-title {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: #000;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .type-tag {
|
|
|
- font-size: 12px;
|
|
|
- padding: 0 10px;
|
|
|
- color: #000000;
|
|
|
- background: rgba(119, 119, 119, 0.1);
|
|
|
- border-radius: 20px;
|
|
|
- font-weight: normal;
|
|
|
- height: 26px;
|
|
|
- line-height: 26px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .forward-link {
|
|
|
- font-size: 14px;
|
|
|
- color: #2199f8;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.card-wrap {
|
|
|
- padding: 0 12px;
|
|
|
- // padding-bottom: 58px;
|
|
|
-}
|
|
|
-
|
|
|
-.content-card {
|
|
|
- position: relative;
|
|
|
- z-index: 2;
|
|
|
- transition: all 0.3s ease;
|
|
|
-
|
|
|
- .card-info {
|
|
|
- padding-top: 12px;
|
|
|
- border-top: 1px solid #f5f5f5;
|
|
|
-
|
|
|
- }
|
|
|
- .info-item {
|
|
|
- display: flex;
|
|
|
- font-size: 14px;
|
|
|
- color: #767676;
|
|
|
- line-height: 24px;
|
|
|
-
|
|
|
- .info-label {
|
|
|
- width: 80px;
|
|
|
- color: rgba(0, 0, 0, 0.2);
|
|
|
- }
|
|
|
-
|
|
|
- .info-value {
|
|
|
- flex: 1;
|
|
|
- color: #767676;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .pb-8 {
|
|
|
- padding-bottom: 8px;
|
|
|
- }
|
|
|
-
|
|
|
- .card-actions {
|
|
|
- display: flex;
|
|
|
- gap: 8px;
|
|
|
- margin-top: 6px;
|
|
|
-
|
|
|
- .action-btn {
|
|
|
- padding: 0 16px;
|
|
|
- height: 32px;
|
|
|
- line-height: 32px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- text-align: center;
|
|
|
- background: #f7f8fa;
|
|
|
- color: #4e5969;
|
|
|
- font-size: 14px;
|
|
|
- cursor: pointer;
|
|
|
- .action-btn-icon {
|
|
|
- margin-left: 4px;
|
|
|
- transform: rotate(270deg);
|
|
|
- transition: transform 0.3s ease;
|
|
|
- &.rotate {
|
|
|
- transform: rotate(90deg);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.new-wrap {
|
|
|
- margin-top: 12px;
|
|
|
- position: relative;
|
|
|
- .lock-wrap {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- border-radius: 5px;
|
|
|
- backdrop-filter: blur(4px);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
- .lock-img {
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
- .lock-text {
|
|
|
- margin-top: 8px;
|
|
|
- font-size: 14px;
|
|
|
- color: #fff;
|
|
|
- padding: 0px 36px;
|
|
|
- height: 22px;
|
|
|
- line-height: 22px;
|
|
|
- background: linear-gradient(90deg, rgba(60, 60, 60, 0) 0%, rgba(60, 60, 60, 0.5) 50%, rgba(60, 60, 60, 0) 100%);
|
|
|
- }
|
|
|
- }
|
|
|
- .new-wrap-inner {
|
|
|
- border-radius: 5px;
|
|
|
- text-align: center;
|
|
|
- border: 1px solid rgba(225, 225, 225, 0.5);
|
|
|
- }
|
|
|
- .new-title {
|
|
|
- background: rgba(241, 241, 241, 0.4);
|
|
|
- border-radius: 5px 5px 0 0;
|
|
|
- border-bottom: 1px solid rgba(225, 225, 225, 0.5);
|
|
|
- display: flex;
|
|
|
- color: #767676;
|
|
|
- // justify-content: space-around;
|
|
|
- padding: 5px 0px;
|
|
|
- font-size: 12px;
|
|
|
-
|
|
|
- .table-name {
|
|
|
- width: 24px;
|
|
|
- font-size: 12px;
|
|
|
- margin: 0 auto;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .title-1 {
|
|
|
- width: 46px;
|
|
|
- }
|
|
|
-
|
|
|
- .title-2 {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .title-3 {
|
|
|
- width: 52px;
|
|
|
- }
|
|
|
-
|
|
|
- .title-4 {
|
|
|
- width: 56px;
|
|
|
- }
|
|
|
-
|
|
|
- .title-5 {
|
|
|
- width: 52px;
|
|
|
- }
|
|
|
-
|
|
|
- .new-table-wrap {
|
|
|
- .new-prescription {
|
|
|
- .new-table {
|
|
|
- height: 45px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- background: #fff;
|
|
|
- border-radius: 5px;
|
|
|
- color: rgba(0, 0, 0, 0.6);
|
|
|
- font-size: 11px;
|
|
|
-
|
|
|
- .line-l {
|
|
|
- display: flex;
|
|
|
- flex: 1;
|
|
|
-
|
|
|
- .line-2 {
|
|
|
- flex: 1;
|
|
|
- padding: 0 2px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .line-r {
|
|
|
- &.has-border {
|
|
|
- border-left: 1px solid rgba(225, 225, 225, 0.8);
|
|
|
- }
|
|
|
-
|
|
|
- .line-3 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- .sub-line {
|
|
|
- padding: 10px 0;
|
|
|
- }
|
|
|
-
|
|
|
- .line-4 {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- border-top: 1px solid rgba(225, 225, 225, 0.8);
|
|
|
- }
|
|
|
-
|
|
|
- .execute-line {
|
|
|
- border-right: 1px solid rgba(225, 225, 225, 0.8);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .note-text {
|
|
|
- margin: 8px 0 4px 0;
|
|
|
- color: rgba(0, 0, 0, 0.4);
|
|
|
- background: #fff;
|
|
|
- padding: 6px 8px;
|
|
|
- border-radius: 5px;
|
|
|
- text-align: left;
|
|
|
- font-size: 11px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .new-prescription+.new-prescription {
|
|
|
- .new-table {
|
|
|
- border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.action-video {
|
|
|
- margin-top: 10px;
|
|
|
- padding: 10px;
|
|
|
-
|
|
|
- .video-wrap {
|
|
|
- padding-top: 4px;
|
|
|
- ::v-deep {
|
|
|
- .PhotoConsumer {
|
|
|
- width: 100%;
|
|
|
- }
|
|
|
- }
|
|
|
- .video-img {
|
|
|
- width: 100%;
|
|
|
- // height: 100%;
|
|
|
- height: 146px;
|
|
|
- object-fit: cover;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
- .video-play-icon {
|
|
|
- // padding-top: 12px;
|
|
|
- font-size: 14px;
|
|
|
- .html-ellipsis {
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- word-break: break-word;
|
|
|
- line-height: 20px;
|
|
|
- color: #4e5969;
|
|
|
- }
|
|
|
- .expand-text {
|
|
|
- padding-top: 4px;
|
|
|
- text-align: center;
|
|
|
- color: #2199f8;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .expand-icon {
|
|
|
- margin-right: 4px;
|
|
|
- transform: rotate(270deg);
|
|
|
- transition: transform 0.3s ease;
|
|
|
- &.rotate {
|
|
|
- transform: rotate(90deg);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.execution-file {
|
|
|
- margin-top: 10px;
|
|
|
- padding: 10px;
|
|
|
-
|
|
|
- .exe-upload {
|
|
|
- padding-top: 4px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .example {
|
|
|
- width: calc((100vw - 68px) / 4);
|
|
|
- height: calc((100vw - 68px) / 4);
|
|
|
- margin-right: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .no-text {
|
|
|
- font-size: 14px;
|
|
|
- color: rgba(0, 0, 0, 0.2);
|
|
|
- line-height: 24px;
|
|
|
- height: 24px;
|
|
|
- text-align: center;
|
|
|
- padding: 16px 0 6px 0;
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-.map-info-wrap {
|
|
|
- padding-top: 12px;
|
|
|
- ::v-deep {
|
|
|
- .map-box {
|
|
|
- height: 180px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.bottom-btn-wrap {
|
|
|
- position: fixed;
|
|
|
- z-index: 2;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 60px;
|
|
|
- background: #fff;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .bottom-btn {
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- padding: 0 26px;
|
|
|
- border-radius: 20px;
|
|
|
- font-size: 14px;
|
|
|
- background: #2199F8;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-}
|
|
|
-.group-wrap {
|
|
|
- position: fixed;
|
|
|
- bottom: 30px;
|
|
|
- left: 12px;
|
|
|
- width: calc(100% - 24px);
|
|
|
- height: 64px;
|
|
|
- background: #fff;
|
|
|
- box-shadow: 0px 2px 2px 0px #0000000D;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- z-index: 2;
|
|
|
- .group-left {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- .group-name {
|
|
|
- padding-left: 6px;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 18px;
|
|
|
- color: rgba(81, 81, 81, 0.5);
|
|
|
- font-weight: 350;
|
|
|
- .name-text {
|
|
|
- color: #111;
|
|
|
- font-weight: 400;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .group-img {
|
|
|
- width: 44px;
|
|
|
- height: 44px;
|
|
|
- border-radius: 3px;
|
|
|
- border: 0.59px solid rgba(221, 225, 231, 1);
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.code-popup {
|
|
|
- width: 330px;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 36px 10px 20px 10px;
|
|
|
- box-sizing: border-box;
|
|
|
- background: linear-gradient(360deg, #ffffff 74.2%, #d1ebff 100%);
|
|
|
-
|
|
|
- ::v-deep {
|
|
|
- .van-popup__close-icon {
|
|
|
- color: #333333;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .code-popup-wrap {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- flex-direction: column;
|
|
|
-
|
|
|
- .text-wrap {
|
|
|
- padding: 8px 0 36px 0;
|
|
|
-
|
|
|
- .qr-code-text {
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- color: rgba(0, 0, 0, 0.6);
|
|
|
- text-align: center;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .code-tips {
|
|
|
- color: #666666;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .qr-code-content {
|
|
|
- .qr-code-img {
|
|
|
- width: 197px;
|
|
|
- min-height: 197px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-.map-popup {
|
|
|
- width: 92%;
|
|
|
- // max-width: 420px;
|
|
|
- border-radius: 8px;
|
|
|
- padding: 12px;
|
|
|
- box-sizing: border-box;
|
|
|
-}
|
|
|
-.example-overlay {
|
|
|
- background: rgba(0, 0, 0, 0.6);
|
|
|
- backdrop-filter: blur(8px);
|
|
|
-}
|
|
|
-
|
|
|
-// 处方列表展开/收起过渡动画
|
|
|
-.prescription-slide-enter-active,
|
|
|
-.prescription-slide-leave-active {
|
|
|
- transition: all 0.2s ease;
|
|
|
- overflow: hidden;
|
|
|
-}
|
|
|
-
|
|
|
-.prescription-slide-enter-from {
|
|
|
- // opacity: 0;
|
|
|
- max-height: 0;
|
|
|
- margin-top: 0;
|
|
|
-}
|
|
|
-
|
|
|
-.prescription-slide-enter-to {
|
|
|
- // opacity: 1;
|
|
|
- max-height: 1000px;
|
|
|
- margin-top: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-.prescription-slide-leave-from {
|
|
|
- opacity: 1;
|
|
|
- max-height: 1000px;
|
|
|
- margin-top: 12px;
|
|
|
-}
|
|
|
-
|
|
|
-.prescription-slide-leave-to {
|
|
|
- opacity: 0;
|
|
|
- max-height: 0;
|
|
|
- margin-top: 0;
|
|
|
-}
|
|
|
-</style>
|