ArchivesFarmTimeLine.vue 53 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288
  1. <template>
  2. <div class="timeline-container" ref="timelineContainerRef">
  3. <div class="timeline-list" ref="timelineListRef">
  4. <empty
  5. v-if="isEmpty"
  6. image="https://birdseye-img.sysuimars.com/birdseye-look-mini/custom-empty-image.png"
  7. image-size="80"
  8. description="暂无数据"
  9. class="empty-state"
  10. />
  11. <template v-else>
  12. <div class="timeline-middle-line"></div>
  13. <div
  14. v-for="(t, tIdx) in phenologyStartDates"
  15. :key="`term-${uniqueTimestamp}-${tIdx}`"
  16. class="timeline-term"
  17. :style="getTermStyle(t, tIdx)"
  18. >
  19. <span class="term-name">{{ formatDate(t.startDate) }}</span>
  20. </div>
  21. <div
  22. v-for="(p, idx) in phenologyList"
  23. :key="`phenology-${uniqueTimestamp}-${idx}`"
  24. class="phenology-bar"
  25. >
  26. <div
  27. class="phenology-title"
  28. :class="{ 'phenology-red': !shouldShowBlue(p), 'phenology-blue': shouldShowBlue(p) }"
  29. v-if="p.reproductiveList[0]?.phenologyName === getNextPhenologyName(idx, 0)"
  30. >
  31. {{ p.reproductiveList[0]?.phenologyName }}
  32. </div>
  33. <div
  34. v-for="(r, rIdx) in Array.isArray(p.reproductiveList) ? p.reproductiveList : []"
  35. :key="`reproductive-${uniqueTimestamp}-${idx}-${rIdx}`"
  36. class="reproductive-item"
  37. >
  38. <div class="arranges">
  39. <div
  40. v-for="(fw, aIdx) in Array.isArray(r.farmWorkArrangeList) ? r.farmWorkArrangeList : []"
  41. :key="`arrange-${uniqueTimestamp}-${idx}-${rIdx}-${aIdx}`"
  42. class="arrange-card"
  43. :class="[
  44. getArrangeStatusClass(fw),
  45. {
  46. 'last-card':
  47. aIdx === r.farmWorkArrangeList.length - 1 &&
  48. rIdx !== r.farmWorkArrangeList.length - 1,
  49. },
  50. // 右侧农事卡片跟随物候期颜色:未来节气对应的农事卡片置灰
  51. { 'future-card': !shouldShowBlue(p) },
  52. ]"
  53. @click="handleRowClick(fw)"
  54. >
  55. <div class="card-content">
  56. <div class="card-left" v-if="pageType === 'agri_plan'">
  57. <div class="left-info">
  58. <div class="left-date">{{ formatDate(fw.createTime) }}</div>
  59. <div class="text van-ellipsis" v-if="fw?.sourceType === 6">
  60. 上传者:{{ fw.sourceDataJson.userName }}
  61. </div>
  62. <div class="text green van-ellipsis" v-if="fw?.sourceType === 7">
  63. 执行者:{{ fw.sourceDataJson.executorName }}
  64. </div>
  65. </div>
  66. <div class="title-text van-ellipsis">{{ fw.title }}</div>
  67. </div>
  68. <div class="card-left agri-record-card" v-else>
  69. <div class="left-info">
  70. <div class="left-date">{{ formatDate(fw.createTime) }}</div>
  71. <div class="text van-ellipsis">
  72. <span class="text-name">梢期杀虫</span>
  73. <span @click="handleStatusDetail(fw)" class="text-detail">详情</span>
  74. </div>
  75. </div>
  76. <div class="title-text van-ellipsis" v-show="shouldShowBlue(p)">
  77. <el-icon class="icon"><WarningFilled /></el-icon>
  78. <span>未执行</span>
  79. </div>
  80. </div>
  81. <div
  82. class="card-right"
  83. v-if="fw.sourceDataJson && fw.sourceDataJson.resFilename && fw.sourceDataJson.resFilename.length > 0 || fw.sourceType === 7"
  84. @click.stop="handleImageClick(fw)"
  85. >
  86. <img v-if="fw.sourceType === 7" :src="base_img_url2 + fw.sourceDataJson?.executeImageUrls?.[0]" alt="" />
  87. <img v-else :src="base_img_url2 + fw.sourceDataJson?.resFilename?.[0]?.filename" alt="" />
  88. <div class="num" v-if="fw?.sourceDataJson?.imageIds || fw.sourceType === 7">
  89. {{ fw?.sourceDataJson?.imageIds?.length || fw?.sourceDataJson?.executeImageUrls?.length || 0 }}
  90. </div>
  91. </div>
  92. </div>
  93. </div>
  94. </div>
  95. <template v-if="r.name === r.phenologyName">
  96. <div
  97. class="phenology-name single"
  98. :class="{ 'phenology-red': !shouldShowBlue(p), 'phenology-blue': shouldShowBlue(p) }"
  99. :style="r.phenologyName === getNextPhenologyName(idx, rIdx) ? 'padding: 6px 0;' : ''"
  100. >
  101. {{ r.name }}
  102. </div>
  103. </template>
  104. <template v-else>
  105. <template v-if="r.phenologyName === getNextPhenologyName(idx, rIdx)">
  106. <div
  107. class="phenology-name"
  108. :class="{ 'text-red': !shouldShowBlue(p), 'text-blue': shouldShowBlue(p) }"
  109. >
  110. {{ r.name }}
  111. </div>
  112. </template>
  113. <template v-else>
  114. <div
  115. class="phenology-name"
  116. :class="{ 'text-red': !shouldShowBlue(p), 'text-blue': shouldShowBlue(p) }"
  117. >
  118. {{ r.name }}
  119. </div>
  120. <div
  121. class="phenology-name mr"
  122. :class="{
  123. 'phenology-red': !shouldShowBlue(p),
  124. 'phenology-blue': shouldShowBlue(p),
  125. }"
  126. >
  127. {{ r.phenologyName }}
  128. </div>
  129. </template>
  130. </template>
  131. </div>
  132. </div>
  133. </template>
  134. </div>
  135. </div>
  136. <!-- 图片弹窗 -->
  137. <popup v-model:show="showImagePopup" class="image-popup" z-index="9999" teleport="body">
  138. <album-carousel
  139. class="popup-content"
  140. :key="imageList?.length"
  141. labelText=""
  142. :imgData="currentImageData"
  143. :images="imageList"
  144. :imgType="imgType"
  145. disableClick
  146. ></album-carousel>
  147. </popup>
  148. </template>
  149. <script setup>
  150. import { ref, nextTick, watch, onMounted, onUnmounted, computed } from "vue";
  151. import { useRouter } from "vue-router";
  152. import { ElMessage } from "element-plus";
  153. import { Empty, Popup } from "vant";
  154. import { base_img_url2 } from "@/api/config";
  155. import AlbumCarousel from "@/components/album_compoents/albumCarousel";
  156. const router = useRouter();
  157. const props = defineProps({
  158. // 农场 ID,用于请求农事规划数据
  159. farmId: {
  160. type: [String, Number],
  161. default: null,
  162. },
  163. // 是否禁用所有点击事件(用于只读展示)
  164. disableClick: {
  165. type: Boolean,
  166. default: false,
  167. },
  168. // 是否是标准农事
  169. isStandard: {
  170. type: Boolean,
  171. default: false,
  172. },
  173. // 方案ID
  174. schemeId: {
  175. type: [Number, String],
  176. default: null,
  177. },
  178. // 类型:agri_record / agri_plan
  179. pageType: {
  180. type: String,
  181. default: "agri_plan",
  182. },
  183. });
  184. const farmWorkType = {
  185. 0: "预警农事",
  186. 1: "标准农事",
  187. 2: "建议农事",
  188. 3: "自建农事",
  189. };
  190. const emits = defineEmits(["row-click"]);
  191. const solarTerms = ref([]);
  192. const phenologyList = ref([]);
  193. // 从物候期列表中提取起始时间,用于时间轴显示
  194. const phenologyStartDates = computed(() => {
  195. if (!phenologyList.value || phenologyList.value.length === 0) {
  196. return [];
  197. }
  198. // 从每个物候期中提取起始时间,并去重排序
  199. const startDatesMap = new Map();
  200. phenologyList.value.forEach((phenology) => {
  201. if (phenology.startDate) {
  202. const dateKey = phenology.startDate;
  203. // 如果该日期还没有添加过,或者需要更新信息
  204. if (!startDatesMap.has(dateKey)) {
  205. startDatesMap.set(dateKey, {
  206. startDate: phenology.startDate,
  207. id: phenology.id || `phenology-${dateKey}`,
  208. });
  209. }
  210. }
  211. });
  212. // 转换为数组并按时间排序
  213. const result = Array.from(startDatesMap.values()).sort((a, b) => {
  214. const timeA = safeParseDate(a.startDate);
  215. const timeB = safeParseDate(b.startDate);
  216. if (isNaN(timeA) || isNaN(timeB)) return 0;
  217. return timeA - timeB;
  218. });
  219. return result;
  220. });
  221. const timelineContainerRef = ref(null);
  222. const timelineListRef = ref(null);
  223. // 标记是否为首次加载
  224. const isInitialLoad = ref(true);
  225. // 存储timeline-list的实际渲染高度
  226. const timelineListHeight = ref(0);
  227. // 生成唯一的时间戳,用于确保key的唯一性
  228. const uniqueTimestamp = ref(Date.now());
  229. // ResizeObserver 实例,用于监听高度变化
  230. let resizeObserver = null;
  231. // 标记是否为空数据
  232. const isEmpty = ref(false);
  233. // 控制图片弹窗显示/隐藏
  234. const showImagePopup = ref(false);
  235. // 标记是否正在请求数据,防止重复请求
  236. const isRequesting = ref(false);
  237. // 记录上一次请求的 farmId,避免相同 farmId 重复请求
  238. const lastRequestedFarmId = ref(null);
  239. // 获取当前季节
  240. const getCurrentSeason = () => {
  241. const month = new Date().getMonth() + 1; // 1-12
  242. if (month >= 1 && month <= 5) {
  243. return "spring"; // 春季:3-5月
  244. } else if (month >= 6 && month <= 8) {
  245. return "summer"; // 夏季:6-8月
  246. } else if (month >= 9 && month <= 10) {
  247. return "autumn"; // 秋季:9-10月
  248. } else {
  249. return "winter"; // 冬季:11-2月
  250. }
  251. };
  252. // 安全解析时间到时间戳(ms)
  253. const safeParseDate = (val) => {
  254. if (!val) return NaN;
  255. if (val instanceof Date) return val.getTime();
  256. if (typeof val === "number") return val;
  257. if (typeof val === "string") {
  258. // 兼容 "YYYY-MM-DD HH:mm:ss" -> Safari
  259. const s = val.replace(/-/g, "/").replace("T", " ");
  260. const d = new Date(s);
  261. return isNaN(d.getTime()) ? NaN : d.getTime();
  262. }
  263. return NaN;
  264. };
  265. const batchValidateData = ref({});
  266. const allTrue = ref(false);
  267. const invalidIds = ref([]);
  268. const invalidArr = ref([]);
  269. // 验证农事卡片药肥报价信息是否完整
  270. const batchValidatePesticideFertilizerQuotes = (ids, items) => {
  271. if (props.isStandard) {
  272. return;
  273. }
  274. VE_API.monitor
  275. .batchValidatePesticideFertilizerQuotes({ ids, schemeId: props.schemeId })
  276. .then(({ data, code }) => {
  277. if (code === 0) {
  278. batchValidateData.value = data || {};
  279. allTrue.value = Object.values(data).every((value) => value === true);
  280. invalidIds.value = Object.keys(data).filter((key) => data[key] !== true);
  281. // 清空之前的arrangeIds
  282. invalidArr.value = [];
  283. // 遍历items,判断farmWorkId是否在invalidIds中,如果对应上了就把item.id push进去
  284. items.forEach((item) => {
  285. // 判断item.farmWorkId是否在invalidIds数组中(需要转换为字符串进行比较)
  286. const farmWorkIdStr = String(item.farmWorkId);
  287. if (invalidIds.value.includes(farmWorkIdStr)) {
  288. invalidArr.value.push({
  289. arrangeId: item.id,
  290. farmWorkId: item.farmWorkId,
  291. });
  292. }
  293. });
  294. }
  295. })
  296. .catch(() => {});
  297. };
  298. // 获取图片 URL 列表
  299. const fetchImageUrls = async (params) => {
  300. try {
  301. const res = await VE_API.ali.getTreeImageList(params);
  302. if (res.code === 0 && Array.isArray(res.data)) {
  303. return res.data.map((item) => {
  304. if (item.filename) {
  305. return {
  306. ...item,
  307. cloudFilename: item.filename, // 兼容组件
  308. };
  309. }
  310. return null;
  311. }).filter(item => item !== null);
  312. }
  313. return [];
  314. } catch (error) {
  315. console.error("获取图片列表失败:", error);
  316. return [];
  317. }
  318. };
  319. // 点击图片
  320. const imgType = ref('');
  321. const imageList = ref([]);
  322. const currentImageData = ref({});
  323. const handleImageClick = (fw) => {
  324. console.log(fw, "fw");
  325. if(fw.sourceType !== 7) {
  326. imgType.value = fw.sourceDataJson.resFilename?.[0]?.source || '';
  327. imageList.value = fw.sourceDataJson.resFilename || [];
  328. } else {
  329. imgType.value = '';
  330. imageList.value = fw.sourceDataJson.executeImageUrls || [];
  331. }
  332. currentImageData.value = {
  333. ...fw,
  334. executeName: fw.sourceDataJson.executorName,
  335. executeDate: formatDate(fw.updateTime),
  336. farmName: fw.sourceDataJson.farmName,
  337. prescriptionList:fw.sourceDataJson.pesticideFertilizerNames,
  338. farmWorkName: fw.sourceDataJson.farmWorkName,
  339. droneDate : formatDateToYYMMDD(fw.updateTime)
  340. };
  341. showImagePopup.value = true;
  342. };
  343. // 获取下一个reproductive-item的phenologyName
  344. const getNextPhenologyName = (currentPhenologyIdx, currentReproductiveIdx) => {
  345. const currentPhenology = phenologyList.value[currentPhenologyIdx];
  346. if (!currentPhenology || !Array.isArray(currentPhenology.reproductiveList)) {
  347. return null;
  348. }
  349. // 如果当前reproductive-item不是最后一个,获取同一个物候期的下一个
  350. if (currentReproductiveIdx < currentPhenology.reproductiveList.length - 1) {
  351. const nextReproductive = currentPhenology.reproductiveList[currentReproductiveIdx + 1];
  352. return nextReproductive?.phenologyName || null;
  353. }
  354. // 如果当前reproductive-item是最后一个,获取下一个物候期的第一个reproductive-item
  355. if (currentPhenologyIdx < phenologyList.value.length - 1) {
  356. const nextPhenology = phenologyList.value[currentPhenologyIdx + 1];
  357. if (
  358. nextPhenology &&
  359. Array.isArray(nextPhenology.reproductiveList) &&
  360. nextPhenology.reproductiveList.length > 0
  361. ) {
  362. const firstReproductive = nextPhenology.reproductiveList[0];
  363. return firstReproductive?.phenologyName || null;
  364. }
  365. }
  366. return null;
  367. };
  368. // 计算物候期需要的实际高度(基于农事数量)
  369. const getPhenologyRequiredHeight = (item) => {
  370. // 统计该物候期内的农事数量
  371. let farmWorkCount = 0;
  372. if (Array.isArray(item.reproductiveList)) {
  373. item.reproductiveList.forEach((reproductive) => {
  374. if (Array.isArray(reproductive.farmWorkArrangeList)) {
  375. farmWorkCount += reproductive.farmWorkArrangeList.length;
  376. }
  377. });
  378. }
  379. // 如果没有农事,给一个最小高度
  380. if (farmWorkCount === 0) {
  381. return 50; // 最小50px
  382. }
  383. // 每个农事卡片的高度(根据实际内容,卡片高度可能因内容而异)
  384. // 卡片包含:padding(8px*2) + header(约25px) + content margin(4px+2px) + content(约25-30px) = 约72-77px
  385. // 考虑到内容可能换行,实际高度可能更高,设置为120px更安全,避免卡片重叠
  386. const farmWorkCardHeight = 120; // 卡片高度估算,确保能容纳内容且不重叠
  387. // 卡片之间的间距(与CSS中的gap保持一致)
  388. const cardGap = 12;
  389. // 计算总高度:卡片数量 * 卡片高度 + (卡片数量 - 1) * 间距
  390. // 如果有多个卡片,需要加上它们之间的间距
  391. const totalHeight = farmWorkCount * farmWorkCardHeight + (farmWorkCount > 1 ? (farmWorkCount - 1) * cardGap : 0);
  392. // 返回精确的总高度,只保留最小高度限制,不添加额外余量
  393. return Math.max(totalHeight, 50); // 最小50px,精确匹配农事卡片高度
  394. };
  395. // 计算所有物候期的累积位置和总高度
  396. const calculatePhenologyPositions = () => {
  397. let currentTop = 10; // 起始位置,留出顶部间距
  398. const positions = new Map();
  399. // 按progress排序物候期,确保按时间顺序排列
  400. const sortedPhenologyList = [...phenologyList.value].sort((a, b) => {
  401. const aProgress = Math.min(Number(a?.progress) || 0, Number(a?.progress2) || 0);
  402. const bProgress = Math.min(Number(b?.progress) || 0, Number(b?.progress2) || 0);
  403. return aProgress - bProgress;
  404. });
  405. sortedPhenologyList.forEach((phenology) => {
  406. const height = getPhenologyRequiredHeight(phenology);
  407. // 使用与数据生成时相同的ID生成逻辑
  408. const itemId =
  409. phenology.id ?? phenology.phenologyId ?? phenology.name ?? `${phenology.progress}-${phenology.progress2}`;
  410. positions.set(itemId, {
  411. top: currentTop,
  412. height: height,
  413. });
  414. currentTop += height; // 紧挨着下一个物候期,不留间距
  415. });
  416. return {
  417. positions,
  418. totalHeight: currentTop, // 总高度 = 最后一个物候期的底部位置,不添加额外间距
  419. };
  420. };
  421. // 计算所有农事的总高度(基于物候期紧挨排列)
  422. const calculateTotalHeightByFarmWorks = () => {
  423. const { totalHeight } = calculatePhenologyPositions();
  424. // 如果有物候期数据,直接使用计算出的总高度
  425. // totalHeight 已经包含了从 10 开始的起始位置和所有物候期的高度
  426. if (totalHeight > 10) {
  427. // 确保总高度至少能容纳所有物候期起始时间(每个至少50px)
  428. const baseHeight = (phenologyStartDates.value?.length || 0) * 50;
  429. // 返回物候期总高度和基础高度的较大值,确保物候期起始时间能正常显示
  430. return Math.max(totalHeight, baseHeight);
  431. }
  432. // 如果没有物候期数据,返回基础高度
  433. const baseHeight = (phenologyStartDates.value?.length || 0) * 50;
  434. return baseHeight || 100; // 至少返回100px,避免为0
  435. };
  436. const getTermStyle = (t, index) => {
  437. // 优先使用实际测量的timeline-list高度,如果没有测量到则使用计算值作为后备
  438. const totalHeight = timelineListHeight.value > 0 ? timelineListHeight.value : calculateTotalHeightByFarmWorks();
  439. // 获取物候期起始时间总数(使用新数组)
  440. const termCount = phenologyStartDates.value?.length || 1;
  441. // 等分高度:总高度 / 物候期起始时间数量
  442. const termHeight = totalHeight / termCount;
  443. // 计算top位置:索引 * 每个物候期起始时间的高度
  444. const top = index * termHeight;
  445. return {
  446. position: "absolute",
  447. top: `${top}px`,
  448. left: 0,
  449. width: "32px",
  450. height: `${termHeight}px`, // 高度等分,使用实际测量的高度
  451. display: "flex",
  452. alignItems: "center",
  453. };
  454. };
  455. // 点击季节 → 滚动到对应节气(立春/立夏/立秋/立冬)
  456. const handleSeasonClick = (seasonValue) => {
  457. const mapping = {
  458. spring: "立春",
  459. summer: "立夏",
  460. autumn: "立秋",
  461. winter: "立冬",
  462. };
  463. const targetName = mapping[seasonValue];
  464. if (!targetName) return;
  465. // 查找对应的节气
  466. const targetIndex = solarTerms.value.findIndex((t) => (t?.displayName || "") === targetName);
  467. if (targetIndex === -1) return;
  468. // 计算目标节气的top位置
  469. const totalHeight = timelineListHeight.value > 0 ? timelineListHeight.value : calculateTotalHeightByFarmWorks();
  470. const termCount = solarTerms.value?.length || 1;
  471. const termHeight = totalHeight / termCount;
  472. const targetTop = targetIndex * termHeight;
  473. // 滚动到目标位置
  474. const wrap = timelineContainerRef.value;
  475. if (!wrap) return;
  476. const viewH = wrap.clientHeight || 0;
  477. const maxScroll = Math.max(0, wrap.scrollHeight - viewH);
  478. // 将目标位置稍微靠上(使用 0.1 视口高度做偏移)
  479. let scrollTop = Math.max(0, targetTop - viewH * 0.1);
  480. if (scrollTop > maxScroll) scrollTop = maxScroll;
  481. wrap.scrollTo({ top: scrollTop, behavior: "smooth" });
  482. };
  483. // 农事状态样式映射(0:取消关注,1:关注,2:托管农事,)
  484. const getArrangeStatusClass = (fw) => {
  485. const t = fw?.sourceType;
  486. if (t == 7) return "status-complete";
  487. if (t == 8) return "status-warning";
  488. // if (t >= 0 && t <= 4) return "status-normal";
  489. // if (t === 5) return "status-complete";
  490. return "status-normal";
  491. };
  492. const handleRowClick = (item) => {
  493. // 记录当前页面滚动位置
  494. if (timelineContainerRef.value) {
  495. const scrollTop = timelineContainerRef.value.scrollTop || 0;
  496. sessionStorage.setItem("timelineScrollTop", scrollTop.toString());
  497. }
  498. emits("row-click", item);
  499. };
  500. // 获取农事规划数据
  501. const getFarmWorkPlan = () => {
  502. if (!props.farmId) return;
  503. // 如果正在请求,或者 farmId 与上次请求的相同,直接返回,防止重复请求
  504. if (isRequesting.value || lastRequestedFarmId.value === props.farmId) return;
  505. // 设置请求标志和记录 farmId
  506. isRequesting.value = true;
  507. lastRequestedFarmId.value = props.farmId;
  508. // 更新时间戳,确保key变化,触发DOM重新渲染
  509. uniqueTimestamp.value = Date.now();
  510. // 重置测量高度,等待重新测量
  511. timelineListHeight.value = 0;
  512. // 重置空数据状态
  513. isEmpty.value = false;
  514. let savedScrollTop = 0;
  515. if (!isInitialLoad.value && timelineContainerRef.value) {
  516. savedScrollTop = timelineContainerRef.value.scrollTop || 0;
  517. }
  518. VE_API.monitor
  519. .getArchivesList({ farmId: props.farmId })
  520. .then(async ({ data, code }) => {
  521. if (code === 0) {
  522. const list = Array.isArray(data?.solarTermsList) ? data.solarTermsList : [];
  523. const filtered = list
  524. .filter((t) => t && t.type === 1)
  525. .map((t) => ({
  526. id:
  527. t.id ??
  528. t.solarTermsId ??
  529. t.termId ??
  530. `${t.name || t.solarTermsName || t.termName || "term"}-${t.createDate || ""}`,
  531. displayName: t.name || t.solarTermsName || t.termName || "节气",
  532. createDate: t.createDate || null,
  533. progress: Number(t.progress) || 0,
  534. }));
  535. solarTerms.value = filtered;
  536. // 物候期数据
  537. const processedPhenologyList = Array.isArray(data?.phenologyList)
  538. ? await Promise.all(
  539. data.phenologyList.map(async (it) => {
  540. const reproductiveList = Array.isArray(it.reproductiveList)
  541. ? await Promise.all(
  542. it.reproductiveList.map(async (r) => {
  543. const farmWorkArrangeList = Array.isArray(r.broadcastList)
  544. ? await Promise.all(
  545. r.broadcastList.map(async (fw) => {
  546. let sourceDataJson =
  547. fw.sourceData && JSON.parse(fw.sourceData);
  548. // 如果有 imageIds,获取图片 URL
  549. if (
  550. sourceDataJson &&
  551. sourceDataJson.imageIds &&
  552. Array.isArray(sourceDataJson.imageIds) &&
  553. sourceDataJson.imageIds.length > 0
  554. ) {
  555. const resFilenameList = await fetchImageUrls(
  556. {
  557. imageIds: sourceDataJson.imageIds,
  558. page: 1,
  559. limit: 100,
  560. }
  561. );
  562. sourceDataJson.resFilename = resFilenameList;
  563. // 调用 findSuitabilityByPoint 接口获取天气适宜性信息
  564. if (fw.farmId && fw.createTime) {
  565. try {
  566. const dateStr = formatDateForAPI(fw.createTime);
  567. if (dateStr) {
  568. const suitabilityRes = await VE_API.ali.findSuitabilityByPoint({
  569. farmId: fw.farmId,
  570. date: dateStr,
  571. });
  572. if (suitabilityRes && suitabilityRes.code === 0 && suitabilityRes.data) {
  573. // 将返回的数据合并到 sourceDataJson
  574. sourceDataJson.suitability = suitabilityRes.data;
  575. }
  576. }
  577. } catch (error) {
  578. console.error("获取天气适宜性信息失败:", error);
  579. }
  580. }
  581. }
  582. return {
  583. ...fw,
  584. phenologyName: r.phenologyName,
  585. sourceDataJson,
  586. containerSpaceTimeId: it.containerSpaceTimeId,
  587. };
  588. })
  589. )
  590. : [];
  591. return {
  592. ...r,
  593. farmWorkArrangeList,
  594. };
  595. })
  596. )
  597. : [];
  598. return {
  599. id: it.id ?? it.phenologyId ?? it.name ?? `${it.progress}-${it.progress2}`,
  600. progress: Number(it.progress) || 0, // 起点 %
  601. progress2: Number(it.progress2) || 0, // 终点 %
  602. startDate: it.startDate,
  603. startTimeMs: safeParseDate(
  604. it.startDate || it.beginDate || it.startTime || it.start || it.start_at
  605. ),
  606. reproductiveList,
  607. };
  608. })
  609. )
  610. : [];
  611. phenologyList.value = processedPhenologyList;
  612. // 使用多次 nextTick 和 requestAnimationFrame 确保DOM完全渲染
  613. nextTick(() => {
  614. requestAnimationFrame(() => {
  615. nextTick(() => {
  616. requestAnimationFrame(() => {
  617. // 测量timeline-list的实际渲染高度
  618. if (timelineListRef.value) {
  619. const height =
  620. timelineListRef.value.offsetHeight || timelineListRef.value.clientHeight;
  621. if (height > 0) {
  622. timelineListHeight.value = height;
  623. // 如果是首次加载,滚动到当前季节对应的节气
  624. if (isInitialLoad.value) {
  625. const currentSeason = getCurrentSeason();
  626. handleSeasonClick(currentSeason);
  627. isInitialLoad.value = false;
  628. }
  629. }
  630. }
  631. if (isInitialLoad.value) {
  632. // 如果测量失败,延迟一下再尝试滚动
  633. setTimeout(() => {
  634. if (timelineListRef.value) {
  635. const height =
  636. timelineListRef.value.offsetHeight ||
  637. timelineListRef.value.clientHeight;
  638. if (height > 0) {
  639. timelineListHeight.value = height;
  640. }
  641. }
  642. const currentSeason = getCurrentSeason();
  643. handleSeasonClick(currentSeason);
  644. isInitialLoad.value = false;
  645. }, 200);
  646. } else {
  647. // 尝试恢复之前保存的滚动位置
  648. const savedScrollTopFromStorage = sessionStorage.getItem("timelineScrollTop");
  649. if (savedScrollTopFromStorage) {
  650. // 等待 DOM 完全渲染后再恢复滚动位置
  651. nextTick(() => {
  652. requestAnimationFrame(() => {
  653. if (timelineContainerRef.value) {
  654. const scrollTop = Number(savedScrollTopFromStorage);
  655. timelineContainerRef.value.scrollTop = scrollTop;
  656. // 恢复后清除保存的位置,避免下次误恢复
  657. sessionStorage.removeItem("timelineScrollTop");
  658. }
  659. });
  660. });
  661. } else if (timelineContainerRef.value && savedScrollTop > 0) {
  662. timelineContainerRef.value.scrollTop = savedScrollTop;
  663. }
  664. }
  665. });
  666. });
  667. });
  668. });
  669. // 收集所有farmWorkId
  670. const farmWorkIds = [];
  671. const farmWorks = [];
  672. phenologyList.value.forEach((phenology) => {
  673. if (Array.isArray(phenology.reproductiveList)) {
  674. phenology.reproductiveList.forEach((reproductive) => {
  675. if (Array.isArray(reproductive.farmWorkArrangeList)) {
  676. reproductive.farmWorkArrangeList.forEach((farmWork) => {
  677. if (farmWork.farmWorkId && farmWork.isFollow !== 0) {
  678. farmWorkIds.push(farmWork.farmWorkId);
  679. farmWorks.push(farmWork);
  680. }
  681. });
  682. }
  683. });
  684. }
  685. });
  686. // 调用验证方法,传入所有ids
  687. if (farmWorkIds.length > 0) {
  688. batchValidatePesticideFertilizerQuotes(farmWorkIds, farmWorks);
  689. }
  690. // 判断是否为空数据:没有节气或没有物候期数据
  691. if (solarTerms.value.length === 0 && phenologyList.value.length === 0) {
  692. isEmpty.value = true;
  693. } else {
  694. isEmpty.value = false;
  695. }
  696. } else {
  697. // 接口返回错误码,显示暂无数据
  698. isEmpty.value = true;
  699. solarTerms.value = [];
  700. phenologyList.value = [];
  701. }
  702. })
  703. .catch((error) => {
  704. console.error("获取农事规划数据失败:", error);
  705. ElMessage.error("获取农事规划数据失败");
  706. // 接口报错,显示暂无数据
  707. isEmpty.value = true;
  708. solarTerms.value = [];
  709. phenologyList.value = [];
  710. })
  711. .finally(() => {
  712. // 请求完成,重置请求标志
  713. isRequesting.value = false;
  714. });
  715. };
  716. const updateFarmWorkPlan = () => {
  717. solarTerms.value = [];
  718. phenologyList.value = [];
  719. isEmpty.value = false;
  720. getFarmWorkPlan();
  721. };
  722. watch(
  723. () => props.farmId,
  724. (val, oldVal) => {
  725. // 如果 farmId 没有值,则不触发
  726. if (!val) return;
  727. // 如果 farmId 变化了,重置上次请求的 farmId,允许请求新数据
  728. if (val !== oldVal) {
  729. lastRequestedFarmId.value = null;
  730. }
  731. // getFarmWorkPlan 内部已经有防重复请求的检查,这里直接调用即可
  732. isInitialLoad.value = true;
  733. updateFarmWorkPlan();
  734. },
  735. { immediate: true }
  736. );
  737. const handleStatusDetail = (fw) => {
  738. router.push({
  739. path: "/status_detail",
  740. query: { miniJson: JSON.stringify({ id: fw.id }) },
  741. });
  742. };
  743. // 格式化日期为 MM-DD 格式
  744. const formatDate = (dateStr) => {
  745. if (!dateStr) return "--";
  746. const date = new Date(dateStr);
  747. if (Number.isNaN(date.getTime())) return dateStr;
  748. const m = `${date.getMonth() + 1}`.padStart(2, "0");
  749. const d = `${date.getDate()}`.padStart(2, "0");
  750. return `${m}-${d}`;
  751. };
  752. // 格式化日期为 YYYY-MM-DD 格式(用于接口调用)
  753. const formatDateForAPI = (dateStr) => {
  754. if (!dateStr) return null;
  755. const date = new Date(dateStr);
  756. if (Number.isNaN(date.getTime())) return null;
  757. const y = date.getFullYear();
  758. const m = `${date.getMonth() + 1}`.padStart(2, "0");
  759. const d = `${date.getDate()}`.padStart(2, "0");
  760. return `${y}-${m}-${d}`;
  761. };
  762. // 格式化日期为 YYMMDD 格式(如:260110,26为年份,01为月份,10为日)
  763. const formatDateToYYMMDD = (dateStr) => {
  764. if (!dateStr) return "";
  765. const date = new Date(dateStr);
  766. if (Number.isNaN(date.getTime())) return "";
  767. const y = `${date.getFullYear()}`.substring(2); // 获取后两位年份,如 2026 -> 26
  768. const m = `${date.getMonth() + 1}`.padStart(2, "0");
  769. const d = `${date.getDate()}`.padStart(2, "0");
  770. return `${y}${m}${d}`;
  771. };
  772. // 获取下一个即将到来的节气(当前节气)的 progress
  773. const getNextTermProgress = () => {
  774. if (!solarTerms.value || solarTerms.value.length === 0) return Infinity;
  775. const now = new Date();
  776. now.setHours(0, 0, 0, 0);
  777. let nextTermProgress = Infinity;
  778. // 找到当前日期之后的下一个节气(当前节气)
  779. solarTerms.value.forEach((term) => {
  780. const termDate = safeParseDate(term.createDate);
  781. if (!isNaN(termDate)) {
  782. const termDateObj = new Date(termDate);
  783. termDateObj.setHours(0, 0, 0, 0);
  784. // 找到大于等于当前日期的第一个节气
  785. if (termDateObj >= now) {
  786. const termProgress = Number(term.progress) || 0;
  787. if (termProgress < nextTermProgress) {
  788. nextTermProgress = termProgress;
  789. }
  790. }
  791. }
  792. });
  793. // 如果没有找到未来的节气,说明所有节气都已过,返回 Infinity(所有物候期都显示蓝色)
  794. return nextTermProgress === Infinity ? Infinity : nextTermProgress;
  795. };
  796. // 根据物候期的 progress 判断它所属节气的 progress
  797. const getPhenologyTermProgress = (phenologyProgress) => {
  798. if (!solarTerms.value || solarTerms.value.length === 0) return -1;
  799. const progress = Number(phenologyProgress) || 0;
  800. // 找到物候期所属的节气(progress 最接近且小于等于的节气)
  801. let matchedTermProgress = -1;
  802. solarTerms.value.forEach((term) => {
  803. const termProgress = Number(term.progress) || 0;
  804. if (progress >= termProgress && termProgress > matchedTermProgress) {
  805. matchedTermProgress = termProgress;
  806. }
  807. });
  808. // 如果物候期的 progress 小于所有节气,返回第一个节气的 progress
  809. if (matchedTermProgress === -1 && solarTerms.value.length > 0) {
  810. const firstTermProgress = Number(solarTerms.value[0].progress) || 0;
  811. return firstTermProgress;
  812. }
  813. return matchedTermProgress;
  814. };
  815. // 判断物候期是否应该显示蓝色(已过或当前节气的物候期)
  816. const shouldShowBlue = (phenology) => {
  817. // 获取下一个即将到来的节气(当前节气)的 progress
  818. const nextTermProgress = getNextTermProgress();
  819. // 如果所有节气都已过(nextTermProgress === Infinity),所有物候期都显示蓝色
  820. if (nextTermProgress === Infinity) {
  821. return true;
  822. }
  823. // 根据物候期的 progress 判断它属于哪个节气
  824. const phenologyProgress = Math.min(Number(phenology?.progress) || 0, Number(phenology?.progress2) || 0);
  825. const phenologyTermProgress = getPhenologyTermProgress(phenologyProgress);
  826. // 找到下一个节气的完整信息,用于判断物候期是否属于当前节气
  827. let nextTerm = null;
  828. solarTerms.value.forEach((term) => {
  829. const termProgress = Number(term.progress) || 0;
  830. if (termProgress === nextTermProgress) {
  831. nextTerm = term;
  832. }
  833. });
  834. // 如果物候期所属的节气的 progress < 下一个节气的 progress,显示蓝色
  835. // 如果物候期所属的节气的 progress === 下一个节气的 progress,也显示蓝色(当前节气)
  836. // 也就是说,只有属于当前节气或之前节气的物候期才显示蓝色
  837. if (phenologyTermProgress === -1) {
  838. return false;
  839. }
  840. // 如果物候期正好属于下一个节气,需要判断它的 progress 是否在下一个节气的范围内
  841. if (phenologyTermProgress === nextTermProgress && nextTerm) {
  842. // 如果物候期的 progress 小于等于下一个节气的 progress,说明它属于当前节气,显示蓝色
  843. return phenologyProgress <= nextTermProgress;
  844. }
  845. // 如果物候期所属的节气的 progress < 下一个节气的 progress,显示蓝色
  846. return phenologyTermProgress < nextTermProgress;
  847. };
  848. defineExpose({
  849. updateFarmWorkPlan,
  850. });
  851. // 使用 ResizeObserver 监听高度变化,确保在DOM完全渲染后获取准确高度
  852. const setupResizeObserver = () => {
  853. if (!timelineListRef.value || typeof ResizeObserver === "undefined") {
  854. return;
  855. }
  856. // 如果已经存在观察者,先断开
  857. if (resizeObserver) {
  858. resizeObserver.disconnect();
  859. }
  860. // 创建新的观察者
  861. resizeObserver = new ResizeObserver((entries) => {
  862. for (const entry of entries) {
  863. const height = entry.contentRect.height;
  864. if (height > 0 && height !== timelineListHeight.value) {
  865. timelineListHeight.value = height;
  866. }
  867. }
  868. });
  869. // 开始观察
  870. resizeObserver.observe(timelineListRef.value);
  871. };
  872. // 组件挂载后设置 ResizeObserver
  873. onMounted(() => {
  874. nextTick(() => {
  875. requestAnimationFrame(() => {
  876. setupResizeObserver();
  877. });
  878. });
  879. });
  880. // 组件卸载前清理 ResizeObserver
  881. onUnmounted(() => {
  882. if (resizeObserver) {
  883. resizeObserver.disconnect();
  884. resizeObserver = null;
  885. }
  886. });
  887. // 在数据更新后重新设置 ResizeObserver
  888. watch(
  889. () => phenologyList.value.length,
  890. () => {
  891. nextTick(() => {
  892. requestAnimationFrame(() => {
  893. setupResizeObserver();
  894. });
  895. });
  896. }
  897. );
  898. </script>
  899. <style scoped lang="scss">
  900. .timeline-container {
  901. height: 100%;
  902. overflow: auto;
  903. position: relative;
  904. box-sizing: border-box;
  905. .timeline-list {
  906. position: relative;
  907. }
  908. .timeline-middle-line {
  909. position: absolute;
  910. left: 13px; /* 位于节气文字列中间(列宽约30px) */
  911. top: 0;
  912. bottom: 0;
  913. width: 2px;
  914. background: #e8e8e8;
  915. z-index: 1;
  916. }
  917. .phenology-bar {
  918. align-items: stretch;
  919. justify-content: center;
  920. box-sizing: border-box;
  921. position: relative;
  922. .phenology-title {
  923. width: 18px;
  924. height: 98.5%;
  925. color: #fff;
  926. font-size: 12px;
  927. position: absolute;
  928. left: 39px;
  929. z-index: 10;
  930. text-align: center;
  931. display: flex;
  932. align-items: center;
  933. &.phenology-blue {
  934. background: #2199f8;
  935. }
  936. &.phenology-red {
  937. background: #f1f1f1;
  938. color: #808080;
  939. }
  940. }
  941. .reproductive-item {
  942. font-size: 12px;
  943. text-align: center;
  944. word-break: break-all;
  945. writing-mode: vertical-rl;
  946. text-orientation: upright;
  947. letter-spacing: 3px;
  948. width: 100%;
  949. line-height: 23px;
  950. color: inherit;
  951. position: relative;
  952. .phenology-name {
  953. width: 18px;
  954. line-height: 16px;
  955. height: 100%;
  956. color: #fff;
  957. padding: 4px 0;
  958. font-size: 12px;
  959. box-sizing: border-box;
  960. &.mr {
  961. margin-right: 3px;
  962. }
  963. &.single {
  964. width: 39px;
  965. line-height: 39px;
  966. }
  967. &.phenology-blue {
  968. background: #2199f8;
  969. }
  970. &.phenology-red {
  971. background: #f1f1f1;
  972. color: #808080;
  973. }
  974. &.text-blue {
  975. background: rgba(33, 153, 248, 0.15);
  976. color: #2199f8;
  977. border: 1px solid #2199f8;
  978. line-height: 16px;
  979. box-sizing: border-box;
  980. }
  981. &.text-red {
  982. background: rgba(128, 128, 128, 0.15);
  983. color: #808080;
  984. border: 1px solid rgba(128, 128, 128, 0.35);
  985. line-height: 16px;
  986. box-sizing: border-box;
  987. }
  988. }
  989. .arranges {
  990. display: flex;
  991. max-width: calc(100vw - 118px);
  992. min-width: calc(100vw - 118px);
  993. gap: 5px;
  994. letter-spacing: 0px;
  995. // min-height: 90px;
  996. .arrange-card {
  997. width: 95%;
  998. border: 0.5px solid #2199f8;
  999. border-radius: 8px;
  1000. background: #fff;
  1001. box-sizing: border-box;
  1002. position: relative;
  1003. padding: 8px 15px 8px 10px;
  1004. writing-mode: horizontal-tb;
  1005. margin-bottom: 10px;
  1006. // &.last-card {
  1007. // margin-bottom: 0;
  1008. // }
  1009. .card-content {
  1010. color: #242424;
  1011. display: flex;
  1012. justify-content: space-between;
  1013. align-items: center;
  1014. font-size: 14px;
  1015. .card-left {
  1016. width: calc(100% - 45px);
  1017. .left-info {
  1018. display: flex;
  1019. align-items: center;
  1020. gap: 5px;
  1021. .left-date {
  1022. color: #fff;
  1023. background: #2199f8;
  1024. padding: 1px 5px;
  1025. border-radius: 2px;
  1026. font-size: 12px;
  1027. }
  1028. .text {
  1029. font-size: 12px;
  1030. color: rgba(33, 153, 248, 0.5);
  1031. width: calc(100% - 50px);
  1032. text-align: left;
  1033. &.green {
  1034. color: rgba(82, 192, 60, 0.5);
  1035. }
  1036. }
  1037. }
  1038. .title-text {
  1039. margin-top: 2px;
  1040. width: 99%;
  1041. text-align: left;
  1042. }
  1043. &.agri-record-card {
  1044. .text{
  1045. font-size: 14px;
  1046. .text-name{
  1047. color: #000;
  1048. }
  1049. .text-detail{
  1050. color: rgba(0, 0, 0, 0.2);
  1051. margin-left: 5px;
  1052. }
  1053. }
  1054. .title-text{
  1055. display: flex;
  1056. align-items: center;
  1057. gap: 3px;
  1058. .icon{
  1059. font-size: 16px;
  1060. }
  1061. }
  1062. }
  1063. }
  1064. .card-right {
  1065. display: flex;
  1066. align-items: center;
  1067. position: relative;
  1068. img {
  1069. width: 45px;
  1070. height: 45px;
  1071. border-radius: 4px;
  1072. object-fit: cover;
  1073. }
  1074. .num {
  1075. position: absolute;
  1076. width: 18px;
  1077. height: 18px;
  1078. box-sizing: border-box;
  1079. top: -4px;
  1080. right: -6px;
  1081. background: #2199f8;
  1082. color: #fff;
  1083. font-size: 12px;
  1084. border-radius: 50%;
  1085. display: flex;
  1086. align-items: center;
  1087. justify-content: center;
  1088. }
  1089. }
  1090. }
  1091. &::before {
  1092. content: "";
  1093. position: absolute;
  1094. left: -5px;
  1095. top: 50%;
  1096. transform: translateY(-50%);
  1097. width: 0;
  1098. height: 0;
  1099. border-top: 5px solid transparent;
  1100. border-bottom: 5px solid transparent;
  1101. border-right: 5px solid #2199f8;
  1102. }
  1103. }
  1104. .arrange-card.normal-style {
  1105. opacity: 0.3;
  1106. }
  1107. .arrange-card.future-card .card-content {
  1108. color: #808080;
  1109. }
  1110. .arrange-card.status-normal {
  1111. border-color: #2199f8;
  1112. &::before {
  1113. border-right-color: #2199f8;
  1114. }
  1115. }
  1116. .arrange-card.status-warning {
  1117. border-color: #f67d7d;
  1118. .card-left {
  1119. .left-info {
  1120. .left-date {
  1121. background: #f67d7d;
  1122. }
  1123. }
  1124. }
  1125. .card-right {
  1126. .num {
  1127. background: #f67d7d;
  1128. }
  1129. }
  1130. &::before {
  1131. border-right-color: #f67d7d;
  1132. }
  1133. }
  1134. .arrange-card.status-complete {
  1135. border-color: #52c03c;
  1136. .card-left {
  1137. .left-info {
  1138. .left-date {
  1139. background: #52c03c;
  1140. }
  1141. }
  1142. }
  1143. .card-right {
  1144. .num {
  1145. background: #52c03c;
  1146. }
  1147. }
  1148. &::before {
  1149. border-right-color: #52c03c;
  1150. }
  1151. }
  1152. // 未来节气对应的农事卡片:跟随左侧物候期的“未开始”灰色样式
  1153. .arrange-card.future-card {
  1154. border-color: #e4e4e4;
  1155. .card-left {
  1156. .left-info {
  1157. .left-date {
  1158. background: #e4e4e4;
  1159. }
  1160. }
  1161. }
  1162. &::before {
  1163. border-right-color: #e4e4e4;
  1164. }
  1165. }
  1166. }
  1167. }
  1168. }
  1169. .reproductive-item + .reproductive-item {
  1170. padding-top: 3px;
  1171. }
  1172. .phenology-bar + .phenology-bar {
  1173. padding-top: 3px;
  1174. }
  1175. .timeline-term {
  1176. position: absolute;
  1177. width: 32px;
  1178. display: flex;
  1179. align-items: flex-start;
  1180. flex-direction: column;
  1181. z-index: 2; /* 置于中线之上 */
  1182. color: rgba(174, 174, 174, 0.6);
  1183. .term-name {
  1184. display: inline-block;
  1185. width: 100%;
  1186. min-height: 20px;
  1187. line-height: 26px;
  1188. background: #fff;
  1189. font-size: 12px;
  1190. }
  1191. }
  1192. .empty-state {
  1193. display: flex;
  1194. justify-content: center;
  1195. align-items: center;
  1196. min-height: 200px;
  1197. width: 100%;
  1198. }
  1199. }
  1200. </style>
  1201. <style lang="scss" scoped>
  1202. .image-popup {
  1203. width: 327px;
  1204. border-radius: 8px;
  1205. .popup-content {
  1206. width: 100%;
  1207. }
  1208. }
  1209. </style>