|
|
@@ -0,0 +1,272 @@
|
|
|
+<template>
|
|
|
+ <div class="prescription-page">
|
|
|
+ <div class="prescription-title">
|
|
|
+ <img @click="goBack" src="@/assets/img/home/back.png" alt="" />
|
|
|
+ <div class="title-name">农事处方维护单</div>
|
|
|
+ <div class="title-desc">请认真核对一下内容</div>
|
|
|
+ </div>
|
|
|
+ <div class="prescription-box">
|
|
|
+ <div class="box-title">
|
|
|
+ <img src="@/assets/img/home/label-icon.png" />
|
|
|
+ 农场情况
|
|
|
+ </div>
|
|
|
+ <div class="box-content">
|
|
|
+ <div class="box-item" v-for="(group, i) in productList" :key="i">
|
|
|
+ <div class="item-name">
|
|
|
+ <span class="required-icon">*</span>
|
|
|
+ <span>{{ group.name }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="item-checkbox">
|
|
|
+ <el-radio-group v-model="group.checked">
|
|
|
+ <el-radio-button
|
|
|
+ v-for="(item, index) in group.items"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.name"
|
|
|
+ />
|
|
|
+ </el-radio-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="prescription-box">
|
|
|
+ <div class="box-title">
|
|
|
+ <img src="@/assets/img/home/label-icon.png" />
|
|
|
+ 过往出现过的灾害 (多选)
|
|
|
+ </div>
|
|
|
+ <div class="box-content">
|
|
|
+ <div class="box-item" style="padding-top: 0">
|
|
|
+ <div class="item-checkbox">
|
|
|
+ <el-checkbox-group v-model="outputVal">
|
|
|
+ <el-checkbox-button v-for="(item, index) in outputList" :key="index" :value="item.name">
|
|
|
+ {{ item.name }}
|
|
|
+ </el-checkbox-button>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="disaster-desc-box">
|
|
|
+ <span>其它异常</span>
|
|
|
+ <el-input
|
|
|
+ v-model="disasterDesc"
|
|
|
+ :autosize="{ minRows: 2, maxRows: 4 }"
|
|
|
+ type="textarea"
|
|
|
+ placeholder="请简单描述一下异常情况"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <div class="custom-bottom-fixed-btns">
|
|
|
+ <div class="bottom-btn secondary-btn" @click="handlePage">跳过</div>
|
|
|
+ <div class="bottom-btn primary-btn" @click="handlePage">生成处方</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, onActivated } from "vue";
|
|
|
+import { useRouter, useRoute } from "vue-router";
|
|
|
+const router = useRouter();
|
|
|
+const route = useRoute();
|
|
|
+const productList = ref([
|
|
|
+ { name: "请选择您的果园土壤类型", items: [{ name: "红壤" }, { name: "壤土" }, { name: "冲积土" }] },
|
|
|
+ { name: "请选择您的灌溉方式", items: [{ name: "滴灌" }, { name: "穴灌" }, { name: "微喷灌" }] },
|
|
|
+ { name: "是否需要改良土壤", items: [{ name: "需要" }, { name: "不需要" }] },
|
|
|
+]);
|
|
|
+const outputList = ref([
|
|
|
+ { name: "低温冻害" },
|
|
|
+ { name: "干旱" },
|
|
|
+ { name: "暴雨渍水" },
|
|
|
+ { name: "病虫害" },
|
|
|
+ { name: "阴天寡照" },
|
|
|
+]);
|
|
|
+// 默认选中前两项
|
|
|
+const outputVal = ref([]);
|
|
|
+const disasterDesc = ref("");
|
|
|
+// 初始化默认选中第一项
|
|
|
+onActivated(() => {
|
|
|
+ // outputVal.value = outputList.value.length >= 2
|
|
|
+ // ? [outputList.value[0].name, outputList.value[1].name]
|
|
|
+ // : outputList.value.length === 1
|
|
|
+ // ? [outputList.value[0].name]
|
|
|
+ // : []
|
|
|
+ if (route.query.speciesName === '籼稻') {
|
|
|
+ productList.value[0].items = [{ name: "黏质土" }, { name: "壤土" }, { name: "冲积土" }];
|
|
|
+ productList.value[1].items = [{ name: "漫灌" }, { name: "间歇灌溉" }, { name: "喷灌" }];
|
|
|
+ }
|
|
|
+ // 为 productList 的每个 group 设置默认选中第一项
|
|
|
+ productList.value.forEach((group) => {
|
|
|
+ if (group.items && group.items.length > 0 && !group.checked) {
|
|
|
+ group.checked = group.items[0].name;
|
|
|
+ }
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+const goBack = () => {
|
|
|
+ // router.go(-1);
|
|
|
+ router.replace(`/create_farm?from=${route.query.from}&type=${route.query.type}`)
|
|
|
+};
|
|
|
+
|
|
|
+const handlePage = () => {
|
|
|
+ // 获取所有需要传递的参数，包括 from 参数
|
|
|
+ const queryParams = {
|
|
|
+ containerId: route.query.containerId,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 如果存在 from 参数，继续传递
|
|
|
+ if (route.query.from) {
|
|
|
+ queryParams.from = route.query.from;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 传递所有农场相关的参数，以便在 agricultural_plan 页面创建农场
|
|
|
+ const farmParams = ['wkt', 'speciesId', 'containerId', 'agriculturalCreate', 'geom', 'address', 'mu', 'name', 'fzr', 'tel', 'defaultFarm', 'typeId', 'speciesName','userType'];
|
|
|
+ farmParams.forEach(key => {
|
|
|
+ if (route.query[key] !== undefined) {
|
|
|
+ queryParams[key] = route.query[key];
|
|
|
+ }
|
|
|
+ });
|
|
|
+ router.push({
|
|
|
+ path: '/agricultural_plan',
|
|
|
+ query: queryParams
|
|
|
+ });
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.prescription-page {
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100vh - 62px);
|
|
|
+ overflow: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: linear-gradient(to left, #e6f2ff, #8fc5fe);
|
|
|
+ .prescription-title {
|
|
|
+ padding: 16px 14px;
|
|
|
+ background: url("@/assets/img/home/page-bg.png") no-repeat bottom right / 149px 116px;
|
|
|
+ background-position-y: 30px;
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ }
|
|
|
+ .title-name {
|
|
|
+ font-size: 22px;
|
|
|
+ color: #2e2e2e;
|
|
|
+ text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05);
|
|
|
+ font-weight: 800;
|
|
|
+ padding: 21px 0 4px 6px;
|
|
|
+ }
|
|
|
+ .title-desc {
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(49, 49, 49, 0.56);
|
|
|
+ padding-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .prescription-box {
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 10px;
|
|
|
+ margin: 0 10px 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ .box-title {
|
|
|
+ margin: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.15);
|
|
|
+ font-weight: 800;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #222222;
|
|
|
+ padding: 15px 0 10px;
|
|
|
+ img {
|
|
|
+ width: 14px;
|
|
|
+ height: 9px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-content {
|
|
|
+ padding: 0 10px;
|
|
|
+ .box-item {
|
|
|
+ padding-top: 10px;
|
|
|
+ .item-name {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 15px;
|
|
|
+ color: rgba(0, 0, 0, 0.9);
|
|
|
+ .required-icon {
|
|
|
+ color: #ff0000;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-checkbox {
|
|
|
+ ::v-deep {
|
|
|
+ .el-radio-button,
|
|
|
+ .el-checkbox-button {
|
|
|
+ margin: 10px 7px 0 0;
|
|
|
+ .el-radio-button__inner,
|
|
|
+ .el-checkbox-button__inner {
|
|
|
+ border: none;
|
|
|
+ background: #f1f1f1;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 13px 24px;
|
|
|
+ border: 1px solid rgba(255, 255, 255, 0);
|
|
|
+ color: #000000;
|
|
|
+ font-size: 15px;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ &.is-active,
|
|
|
+ &.is-checked {
|
|
|
+ &::after {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ z-index: 9;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 18px;
|
|
|
+ height: 16px;
|
|
|
+ background: url("@/assets/img/home/checked-bg.png") no-repeat bottom right / 18px
|
|
|
+ 16px;
|
|
|
+ }
|
|
|
+ .el-radio-button__inner,
|
|
|
+ .el-checkbox-button__inner {
|
|
|
+ background: rgba(33, 153, 248, 0.1) !important;
|
|
|
+ color: #2199f8 !important;
|
|
|
+ border: 1px solid #2199f8 !important;
|
|
|
+ box-shadow: none;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.is-active {
|
|
|
+ .el-radio-button__original-radio:not(:disabled) + .el-radio-button__inner {
|
|
|
+ background: rgba(33, 153, 248, 0.1) !important;
|
|
|
+ color: #2199f8 !important;
|
|
|
+ border: 1px solid #2199f8 !important;
|
|
|
+ box-shadow: none;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.is-checked {
|
|
|
+ .el-checkbox-button__original-checkbox:not(:disabled) + .el-checkbox-button__inner {
|
|
|
+ background: rgba(33, 153, 248, 0.1) !important;
|
|
|
+ color: #2199f8 !important;
|
|
|
+ border: 1px solid #2199f8 !important;
|
|
|
+ box-shadow: none;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .disaster-desc-box {
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ color: rgba(0, 0, 0, 0.9);
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wangsisi