|
|
@@ -0,0 +1,120 @@
|
|
|
+<template>
|
|
|
+ <div class="record-item">
|
|
|
+ <div class="record-title">
|
|
|
+ <slot name="title"></slot>
|
|
|
+ </div>
|
|
|
+ <div class="record-content">
|
|
|
+ <div class="info-item">
|
|
|
+ 触发条件：
|
|
|
+ <span class="info-val">{{ recordItemData?.condition }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ 农事编号：
|
|
|
+ <span class="info-val">{{ recordItemData?.code }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item">
|
|
|
+ 推荐时间：
|
|
|
+ <span class="info-val">{{ recordItemData?.executeDate }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item" v-if="recordItemData?.attention">
|
|
|
+ 巡园提醒：
|
|
|
+ <span class="info-val">{{ recordItemData?.attention }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="info-item" v-if="recordItemData?.prescriptionList && recordItemData?.prescriptionList.length">
|
|
|
+ 药物处方
|
|
|
+ <div class="info-table">
|
|
|
+ <div class="table">
|
|
|
+ <div class="th">
|
|
|
+ <div class="td">名称</div>
|
|
|
+ <div class="td width">品牌</div>
|
|
|
+ <div class="td">配比</div>
|
|
|
+ <div class="td">方式</div>
|
|
|
+ </div>
|
|
|
+ <div v-for="(prescriptionItem, prescriptionI) in recordItemData.prescriptionList" :key="prescriptionI">
|
|
|
+ <div class="tr" v-for="(subP, subI) in prescriptionItem.pesticideFertilizerList" :key="subI">
|
|
|
+ <div class="td">{{ subP.typeName }}</div>
|
|
|
+ <div class="td width">{{ subP.defaultName }}</div>
|
|
|
+ <div class="td">{{ subP.ratio }}</div>
|
|
|
+ <div class="td">人工</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="tr">
|
|
|
+ <div class="td width">80%代森锰锌</div>
|
|
|
+ <div class="td">山德生</div>
|
|
|
+ <div class="td">1:2000</div>
|
|
|
+ <div class="td">人工</div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+const props = defineProps({
|
|
|
+ recordItemData: {
|
|
|
+ type: Object,
|
|
|
+ default: () => ({}),
|
|
|
+ },
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.record-item {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 12px;
|
|
|
+ margin: 0 12px 12px;
|
|
|
+ .record-title {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ .record-content {
|
|
|
+ font-size: 12px;
|
|
|
+ .info-item {
|
|
|
+ color: #bbbbbb;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ .info-val {
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-table {
|
|
|
+ margin-top: 8px;
|
|
|
+
|
|
|
+ .table {
|
|
|
+ border: 1px solid rgba(196, 196, 196, 0.8);
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 13px;
|
|
|
+ .th {
|
|
|
+ background: #f6f6f6;
|
|
|
+ color: #999999;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-radius: 4px 4px 0 0;
|
|
|
+ padding: 4px 0;
|
|
|
+ }
|
|
|
+ .tr {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ color: #333333;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tr + .tr {
|
|
|
+ border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
+ }
|
|
|
+ .td {
|
|
|
+ width: 25%;
|
|
|
+ padding: 0 2px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .width {
|
|
|
+ width: 55%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
