forestry-wx/src/pages/plant/port/models/task.vue

<template>
    <!-- 养殖 -->
    <view class="pd-24 pt-0" v-if="data.taskType === '2'" @click="$emit('click')">
        <view class="b-radius bg-#fff pd-10 p-rtv">
            <image class="w-80 h-34" src="/static/images/plant/port/Task_Breeding.png" mode="widthFix" style="position: absolute; top: 0; left: 0" />
            <view class="d-flex j-ed f-s-22 c-#666">{{ data?.plannedStartDate }}至{{ data?.plannedEndDate }}</view>
            <view class="d-flex a-ed pd-16 pt-8 pb-8">
                <view class="c-#333 f-s-34 f-w-5 mr-6">{{ data?.variety }}</view>
                <view class="c-#666 f-s-26">{{ data?.genusName }}</view>
            </view>
            <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                <view class="c-#666 w-s-no">养殖批号：</view>
                <view class="c-#333 f-w-5">{{ data?.plantationCode }}</view>
            </view>
            <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                <view class="c-#666 w-s-no">种源批号：</view>
                <view v-if="data?.seedCodeList.length !== 0">
                    <view class="c-#333 f-w-5" v-for="item in data?.seedCodeList" :key="item">{{ item }}</view>
                </view>
                <view v-else>
                    <view class="c-#666">暂无完善种源信息</view>
                </view>
            </view>
            <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                <view class="c-#666 w-s-no">基地：</view>
                <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd d-flex a-c">
                    {{ data?.baseRef?.baseInfo?.address }}基地
                    <text v-if="data?.landIds.length == 0">全部地块</text>
                    <view v-else>
                        <text v-for="(item, index) in data?.baseRef?.baseInfo?.landList" :key="index"><text v-if="index != 0">、</text> {{ item?.landName }}</text>
                    </view>
                </view>
                <view class="flex1 d-flex j-ed"><up-icon name="arrow-right" size="34rpx"></up-icon></view>
            </view>
            <view class="d-flex f-s-28 pd-16 pt-8 pb-8">
                <view class="d-flex a-c w-50%">
                    <view class="c-#666 w-s-no">养殖区域：</view>
                    <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">{{ data?.breedScale }}{{ data?.breedScaleUnit }}</view>
                </view>
                <view class="d-flex a-c w-50%">
                    <view class="c-#666 w-s-no">养殖量：</view>
                    <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">{{ data?.plantingMgAmount }}{{ data?.plantingMgUnit }}</view>
                </view>
            </view>
            <view class="pd-16 pt-8 pb-8">
                <up-line color="#f7f7f7"></up-line>
            </view>
            <view class="pd-16 pt-8 pb-8 d-flex j-sb gap-20">
                <up-button :customStyle="customStyle1">
                    <view class="d-flex a-c j-c">
                        <image class="w-28 h-24" src="/static/images/plant/port/Task_Species_source_information.png" mode="widthFix" />
                        <text class="f-s-26">种源信息</text>
                    </view>
                </up-button>
                <up-button :customStyle="customStyle2">
                    <view class="d-flex a-c j-c">
                        <image class="w-28 h-24" src="/static/images/plant/port/Task_Breeding_management.png" mode="widthFix" />
                        <text class="f-s-26">饲养管理</text>
                    </view>
                </up-button>
                <up-button :customStyle="customStyle3">
                    <view class="d-flex a-c j-c">
                        <image class="w-28 h-24" src="/static/images/plant/port/Task_Harvest_management.png" mode="widthFix" />
                        <text class="f-s-26">采收管理</text>
                    </view>
                </up-button>
            </view>
        </view>
    </view>
    <!-- 种苗繁育 -->
    <view class="pd-24 pt-0" v-if="data.taskType === '11'" @click="$emit('click')">
        <view class="b-radius bg-#fff pd-10 p-rtv">
            <image class="w-112 h-34" src="/static/images/plant/port/Task_Seedling_breeding.png" mode="widthFix" style="position: absolute; top: 0; left: 0" />
            <view class="d-flex j-ed f-s-22 c-#666">{{ data?.plannedStartDate }} 至 {{ data?.plannedEndDate }}</view>
            <view class="d-flex a-ed pd-16 pt-8 pb-8">
                <view class="c-#333 f-s-34 f-w-5 mr-6">{{ data?.variety }}</view>
                <view class="c-#666 f-s-26">{{ data?.genusName }}</view>
            </view>
            <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                <view class="c-#666 w-s-no">繁育批号：</view>
                <view class="c-#333 f-w-5">{{ data?.plantationCode }}</view>
            </view>
            <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                <view class="c-#666 w-s-no">种源批号：</view>
                <view v-if="data?.seedCodeList.length !== 0">
                    <view class="c-#333 f-w-5" v-for="item in data?.seedCodeList" :key="item">{{ item }}</view>
                </view>
                <view v-else>
                    <view class="c-#666">暂无完善种源信息</view>
                </view>
            </view>
            <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                <view class="c-#666 w-s-no">基地：</view>
                <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd d-flex a-c">
                    {{ data?.baseRef?.baseInfo?.address }}基地
                    <text v-if="data?.landIds.length == 0">全部地块</text>
                    <view v-else>
                        <text v-for="(item, index) in data?.baseRef?.baseInfo?.landList" :key="index"><text v-if="index != 0">、</text> {{ item?.landName }}</text>
                    </view>
                </view>
                <view class="flex1 d-flex j-ed"><up-icon name="arrow-right" size="34rpx"></up-icon></view>
            </view>
            <view class="d-flex f-s-28 pd-16 pt-8 pb-8">
                <view v-if="data?.lands[0]?.landType == '3'" class="d-flex a-c w-50%">
                    <view class="c-#666 w-s-no">接种数量：</view>
                    <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">{{ data?.inoculationAmount }}{{ data?.inoculationUnit }}</view>
                </view>
                <view v-else class="d-flex a-c w-50%">
                    <view class="c-#666 w-s-no">种植面积：</view>
                    <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">{{ data?.plantingAmount }}{{ data?.plantingUnit }}</view>
                </view>
                <view class="d-flex a-c w-50%">
                    <view class="c-#666 w-s-no">繁育量：</view>
                    <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">{{ data?.plantingMgAmount }}{{ data?.plantingMgUnit }}</view>
                </view>
            </view>
            <view class="pd-16 pt-8 pb-8">
                <up-line color="#f7f7f7"></up-line>
            </view>
            <view class="pd-16 pt-8 pb-8 d-flex j-sb gap-20">
                <up-button :customStyle="customStyle1">
                    <view class="d-flex a-c j-c">
                        <image class="w-28 h-24" src="/static/images/plant/port/Task_Species_source_information.png" mode="widthFix" />
                        <text class="f-s-26">种源信息</text>
                    </view>
                </up-button>
                <up-button v-if="data?.lands[0]?.landType == '3'" :customStyle="customStyle2">
                    <view class="d-flex a-c j-c">
                        <image class="w-28 h-24" src="/static/images/plant/port/Task_Breeding_management.png" mode="widthFix" />
                        <text class="f-s-26"> 繁育管理 </text>
                    </view>
                </up-button>
                <up-button v-else :customStyle="customStyle2">
                    <view class="d-flex a-c j-c">
                        <image class="w-28 h-24" src="/static/images/plant/port/Task_Breeding_management.png" mode="widthFix" />
                        <text class="f-s-26"> 种植管理 </text>
                    </view>
                </up-button>
                <up-button :customStyle="customStyle3">
                    <view class="d-flex a-c j-c">
                        <image class="w-28 h-24" src="/static/images/plant/port/Task_Harvest_management.png" mode="widthFix" />
                        <text class="f-s-26">采收管理</text>
                    </view>
                </up-button>
            </view>
        </view>
    </view>
    <!-- 种植 -->
    <view class="pd-24 pt-0" v-if="data.taskType === '1'" @click="$emit('click')">
        <view class="b-radius bg-#fff pd-10 p-rtv">
            <image class="w-80 h-34" src="/static/images/plant/port/Task_Planting.png" mode="widthFix" style="position: absolute; top: 0; left: 0" />
            <view class="d-flex j-ed f-s-22 c-#666">{{ data?.plannedStartDate }}至{{ data?.plannedEndDate }}</view>
            <view class="d-flex a-ed pd-16 pt-8 pb-8">
                <view class="c-#333 f-s-34 f-w-5 mr-6">{{ data?.variety }}</view>
                <view class="c-#666 f-s-26">{{ data?.genusName }}</view>
            </view>
            <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                <view class="c-#666 w-s-no">种植批号：</view>
                <view class="c-#333 f-w-5">{{ data?.plantationCode }}</view>
            </view>
            <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                <view class="c-#666 w-s-no">种源批号：</view>
                <view v-if="data?.seedCodeList.length !== 0">
                    <view class="c-#333 f-w-5" v-for="item in data?.seedCodeList" :key="item">{{ item }}</view>
                </view>
                <view v-else>
                    <view class="c-#666">暂无完善种源信息</view>
                </view>
            </view>
            <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                <view class="c-#666 w-s-no">基地：</view>
                <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd d-flex a-c">
                    {{ data?.baseRef?.baseInfo?.address }}基地
                    <text v-if="data?.landIds.length == 0">全部地块</text>
                    <view v-else>
                        <text v-for="(item, index) in data?.baseRef?.baseInfo?.landList" :key="index"><text v-if="index != 0">、</text> {{ item?.landName }}</text>
                    </view>
                </view>
                <view class="flex1 d-flex j-ed"><up-icon name="arrow-right" size="34rpx"></up-icon></view>
            </view>
            <view class="d-flex f-s-28 pd-16 pt-8 pb-8">
                <view class="d-flex a-c w-50%">
                    <view class="c-#666 w-s-no">种植面积：</view>
                    <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">{{ data?.plantingAmount }}{{ data?.plantingUnit }}</view>
                </view>
                <view class="d-flex a-c w-50%">
                    <view class="c-#666 w-s-no">种植量：</view>
                    <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">{{ data?.plantingMgAmount }}{{ data?.plantingMgUnit }}</view>
                </view>
            </view>
            <view class="pd-16 pt-8 pb-8">
                <up-line color="#f7f7f7"></up-line>
            </view>
            <view class="pd-16 pt-8 pb-8 d-flex j-sb gap-20">
                <up-button :customStyle="customStyle1">
                    <view class="d-flex a-c j-c">
                        <image class="w-28 h-24" src="/static/images/plant/port/Task_Species_source_information.png" mode="widthFix" />
                        <text class="f-s-26">种源信息</text>
                    </view>
                </up-button>
                <up-button :customStyle="customStyle2">
                    <view class="d-flex a-c j-c">
                        <image class="w-28 h-24" src="/static/images/plant/port/Task_Breeding_management.png" mode="widthFix" />
                        <text class="f-s-26"> 种植管理 </text>
                    </view>
                </up-button>
                <up-button :customStyle="customStyle3">
                    <view class="d-flex a-c j-c">
                        <image class="w-28 h-24" src="/static/images/plant/port/Task_Harvest_management.png" mode="widthFix" />
                        <text class="f-s-26">采收管理</text>
                    </view>
                </up-button>
            </view>
        </view>
    </view>
    <!-- 种畜繁育 -->
    <view class="pd-24 pt-0" v-if="data.taskType === '21'" @click="$emit('click')">
        <view class="b-radius bg-#fff pd-10 p-rtv">
            <image class="w-112 h-34" src="/static/images/plant/port/Task_Breeding_Livestock.png" mode="widthFix" style="position: absolute; top: 0; left: 0" />
            <view class="d-flex j-ed f-s-22 c-#666">{{ data?.plannedStartDate }}至{{ data?.plannedEndDate }}</view>
            <view class="d-flex a-ed pd-16 pt-8 pb-8">
                <view class="c-#333 f-s-34 f-w-5 mr-6">{{ data?.variety }}</view>
                <view class="c-#666 f-s-26">{{ data?.genusName }}</view>
            </view>
            <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                <view class="c-#666 w-s-no">繁育批号：</view>
                <view class="c-#333 f-w-5">{{ data?.plantationCode }}</view>
            </view>
            <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                <view class="c-#666 w-s-no">种源批号：</view>
                <view v-if="data?.seedCodeList.length !== 0">
                    <view class="c-#333 f-w-5" v-for="item in data?.seedCodeList" :key="item">{{ item }}</view>
                </view>
                <view v-else>
                    <view class="c-#666">暂无完善种源信息</view>
                </view>
            </view>
            <view class="d-flex a-c f-s-28 pd-16 pt-8 pb-8">
                <view class="c-#666 w-s-no">基地：</view>
                <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd d-flex a-c">
                    {{ data?.baseRef?.baseInfo?.address }}基地
                    <text v-if="data?.landIds.length == 0">全部地块</text>
                    <view v-else>
                        <text v-for="(item, index) in data?.baseRef?.baseInfo?.landList" :key="index"><text v-if="index != 0">、</text> {{ item?.landName }}</text>
                    </view>
                </view>
                <view class="flex1 d-flex j-ed"><up-icon name="arrow-right" size="34rpx"></up-icon></view>
            </view>
            <view class="d-flex f-s-28 pd-16 pt-8 pb-8">
                <view class="d-flex a-c w-50%">
                    <view class="c-#666 w-s-no">养殖区域：</view>
                    <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">{{ data?.breedScale }}{{ data?.breedScaleUnit }}</view>
                </view>
                <view class="d-flex a-c w-50%">
                    <view class="c-#666 w-s-no">养殖量：</view>
                    <view class="c-#333 f-w-5 tx-ov w-s-no ov-hd">{{ data?.plantingMgAmount }}{{ data?.plantingMgUnit }}</view>
                </view>
            </view>
            <view class="pd-16 pt-8 pb-8">
                <up-line color="#f7f7f7"></up-line>
            </view>
            <view class="pd-16 pt-8 pb-8 d-flex j-sb gap-20">
                <up-button :customStyle="customStyle1">
                    <view class="d-flex a-c j-c">
                        <image class="w-28 h-24" src="/static/images/plant/port/Task_Species_source_information.png" mode="widthFix" />
                        <text class="f-s-26">种源信息</text>
                    </view>
                </up-button>
                <up-button :customStyle="customStyle2">
                    <view class="d-flex a-c j-c">
                        <image class="w-28 h-24" src="/static/images/plant/port/Task_Breeding_management.png" mode="widthFix" />
                        <text class="f-s-26">饲养管理</text>
                    </view>
                </up-button>
                <up-button :customStyle="customStyle3">
                    <view class="d-flex a-c j-c">
                        <image class="w-28 h-24" src="/static/images/plant/port/Task_Harvest_management.png" mode="widthFix" />
                        <text class="f-s-26">采收管理</text>
                    </view>
                </up-button>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
const props = defineProps<{ data: any }>();

//按钮样式
const customStyle1 = reactive({
    color: '#37A954',
    boxShadow: 'inset 0 0 10px #D7F5DF',
    background: '#ECFFF1',
    border: '2rpx solid #9BD4A9',
    borderRadius: '10rpx',
    height: '76rpx',
});
const customStyle2 = reactive({
    color: '#18BECA',
    boxShadow: 'inset 0 0 10px #C7F5F8',
    background: '#E5FDFF',
    border: '2rpx solid #93E8EE',
    borderRadius: '10rpx',
    height: '76rpx',
});
const customStyle3 = reactive({
    color: '#FC8834',
    boxShadow: 'inset 0 0 10px #FFEED7',
    background: '#FFFAF3',
    border: '2rpx solid #FFD499',
    borderRadius: '10rpx',
    height: '76rpx',
});
</script>