Browse Source

fix: 对接果树列表筛选,分组管理

lxf 3 days ago
parent
commit
6a99d96fc8

+ 8 - 0
src/api/modules/manage_interface.js

@@ -25,6 +25,10 @@ module.exports = {
         url: config.base_url + "adm/batchOpenOrCloseSample",
         type: "post",
     },
+    batchEditFosterSample: {
+        url: config.base_url + "adm/batchEditFosterSample",
+        type: "post",
+    },
     speciesList: {
         url: config.base_url + "species_item/list",
         type: "get",
@@ -45,5 +49,9 @@ module.exports = {
         url: config.base_url + "z_sample_lighten_card_offline_take/batchSave",
         type: "post",
     },
+    saveUserInfo: {
+        url: config.base_url + "z_sample_lighten_card_offline_take/save",
+        type: "post",
+    },
     
 }

+ 24 - 0
src/api/modules/manage_user.js

@@ -13,4 +13,28 @@ module.exports = {
         url: config.base_url + "z_sample_lighten_card_offline_take/delete/{id}",
         type: "get",
     },
+    fetchLevelList: {
+        url: config.base_url + "z_sample_lighten_card_offline_take/levelList",
+        type: "get",
+    },
+    fetchGroupList: {
+        url: config.base_url + "z_sample_lighten_card_offline_group/list",
+        type: "get",
+    },
+    cleanBind: {
+        url: config.base_url + "adm/cleanBind",
+        type: "get",
+    },
+    saveGroup: {
+        url: config.base_url + "z_sample_lighten_card_offline_group/save",
+        type: "post",
+    },
+    batchGroup: {
+        url: config.base_url + "z_sample_lighten_card_offline_group/batchUpdateGroupId",
+        type: "post",
+    },
+    deleteGroup: {
+        url: config.base_url + "z_sample_lighten_card_offline_group/delete",
+        type: "get",
+    },
 }

BIN
src/assets/images/foster-home/user.png


+ 304 - 0
src/components/addGroup.vue

@@ -0,0 +1,304 @@
+<template>
+    <div>
+        <!-- 新增客户、编辑客户 -->
+        <popup v-model:show="showClient" closeable round class="popup-group">
+            <div class="popup-title">{{ popupType === 'add' ? "新建分组" : "分配分组" }}</div>
+            <div class="popup-content">
+                <el-form
+                    ref="ruleFormRef"
+                    :model="ruleForm"
+                    :rules="rules"
+                    label-width="auto"
+                    class="rule-form"
+                    size="large"
+                >
+                    <el-form-item label="" prop="name" v-if="popupType === 'add'">
+                        <el-input class="input" v-model="ruleForm.name" size="large" placeholder="请输入" />
+                    </el-form-item>
+                    <el-form-item label="" v-else>
+                        <el-select
+                            popper-class="select-popper-orange"
+                            class="select mr-10 select-orange"
+                            v-model="ruleForm.id"
+                        >
+                            <!-- <el-option
+                                v-for="(item, index) in groupOptions"
+                                :key="index"
+                                :label="item.groupName"
+                                :value="item.id"
+                            /> -->
+                            <el-option
+                                v-for="(item, index) in groupOptions"
+                                :key="index"
+                                :label="item.groupName"
+                                :value="item.id"
+                                >
+                                <span style="float: left">{{ item.groupName }}</span>
+                                <span
+                                    style="
+                                    float: right;
+                                    color: var(--el-text-color-secondary);
+                                    "
+                                    v-show="item.id !== '-1'"
+                                    @click.stop="deleteGroupFun()"
+                                >
+                                    <el-popconfirm
+                                        class="box-item"
+                                        title="确认删除该分组吗?"
+                                        placement="bottom"
+                                        width="180px"
+                                    >
+                                        <template #reference>
+                                            <el-icon size="16" color="#E04C4C"><CircleCloseFilled /></el-icon>
+                                        </template>
+                                        <template #actions="{ cancel }">
+                                            <el-button size="small" @click.stop="cancel">取消</el-button>
+                                            <el-button
+                                                type="primary"
+                                                 size="small"
+                                                @click.stop="deleteGroup(item, cancel)"
+                                            >
+                                               确认
+                                            </el-button>
+                                        </template>
+                                    </el-popconfirm>
+                                    
+                                </span>
+                                </el-option>
+                            <template #footer>
+                                <div class="add-btn" v-if="!isAddingItem" @click="isAddingItem=true">
+                                    <el-icon class="add-icon" size="16">
+                                        <Plus />
+                                    </el-icon>
+                                    <span>新增分组</span>
+                                </div>
+                                <template v-else>
+                                    <el-input v-model="ruleForm.name" class="option-input" /><br />
+                                    <el-button type="primary" @click="submitGroupName"> 新增 </el-button>
+                                    <el-button @click="clear">取消</el-button>
+                                </template>
+                            </template>
+                        </el-select>
+                    </el-form-item>
+                </el-form>
+            </div>
+            <div class="popup-footer">
+                <div class="cancel" @click="resetForm">取消</div>
+                <div v-if="popupType === 'add'" @click="submitGroupName">保存</div>
+                <div v-else @click="submitForm" :class="{'disabled': !ruleForm.id}">保存</div>
+            </div>
+        </popup>
+    </div>
+</template>
+
+<script setup>
+import { Popup } from "vant";
+import { onMounted, reactive, ref } from "vue";
+import { ElMessage } from "element-plus";
+
+const showClient = ref(false);
+const ruleForm = reactive({
+    name: "",
+    id: "",
+});
+const rules = reactive({
+    // id: { required: true, message: "请选择分组", trigger: ["blur", "change"] },
+    name: { required: true, message: "请输入分组名称", trigger: ["blur", "change"] },
+});
+
+const ruleFormRef = ref(null);
+const submitForm = () => {
+    const params = {
+        farmId: 766,
+        groupId: ruleForm.id,
+        telList: telList.value,
+    };
+    VE_API.manage_user
+        .batchGroup(params)
+        .then(({ code }) => {
+            if (code === 0) {
+                ElMessage.success("保存成功");
+                showClient.value = false;
+                emit("updateTableList");
+            }
+        })
+    // if (!ruleFormRef.value) return;
+    // await ruleFormRef.value.validate((valid, fields) => {
+    //     if (valid) {
+    //         saveGroupName(ruleForm.name);
+    //     } else {
+    //         console.log("error submit!");
+    //     }
+    // });
+};
+
+const submitGroupName = async () => {
+    if (!ruleFormRef.value) return;
+    await ruleFormRef.value.validate((valid, fields) => {
+        if (valid) {
+            const params = {
+                farmId: 766,
+                groupName: ruleForm.name,
+            };
+            VE_API.manage_user
+                .saveGroup(params)
+                .then(({ code }) => {
+                    if (code === 0) {
+                        ElMessage.success("新建分组成功");
+                        if (popupType.value === "add") {
+                            showClient.value = false;
+                        } else {
+                            getGroupList()
+                        }
+                        emit("updateGroupList");
+                    }
+                });
+        } else {
+            console.log("error submit!");
+        }
+    });
+};
+
+const resetForm = () => {
+    if (!ruleFormRef.value) return;
+    ruleFormRef.value.resetFields();
+    showClient.value = false;
+};
+
+// 打开弹窗-类型
+const telList = ref([]);
+const popupType = ref("add");
+function openClientPopup(type, userArr) {
+    popupType.value = type || "add";
+    if (type !== "add") {
+        telList.value = userArr;
+    }
+    showClient.value = true;
+}
+
+const groupOptions = ref([]);
+
+const isAddingItem = ref(false);
+
+const clear = () => {
+    isAddingItem.value = false;
+};
+onMounted(() => {
+    getGroupList();
+});
+// 删除分组
+const deleteGroup = (item, cancel) => {
+    cancel();
+    const params = {
+        id: item.id,
+    };
+    VE_API.manage_user.deleteGroup(params).then(({ code }) => {
+        if (code === 0) {
+            ElMessage.success("删除分组成功");
+            getGroupList();
+            emit("updateGroupList");
+        }
+    });
+};
+
+function deleteGroupFun() {
+}
+
+function getGroupList() {
+    VE_API.manage_user.fetchGroupList({farmId: 766}).then(({ data }) => {
+        groupOptions.value = data;
+    });
+}
+
+const emit = defineEmits(["updateTableList", "updateGroupList"]);
+
+defineExpose({
+    openClientPopup,
+});
+</script>
+
+<style lang="scss" scoped>
+.popup-group {
+    // width: 24%;
+    width: 504px;
+    padding: 31px 25px;
+    box-sizing: border-box;
+    background: #fff;
+    ::v-deep {
+        .van-popup__close-icon {
+            // color: #ffffff;
+        }
+    }
+    .popup-title {
+        text-align: center;
+        color: #000;
+        font-size: 24px;
+        margin-bottom: 15px;
+    }
+    .popup-content {
+        width: 100%;
+        ::v-deep {
+            .el-form-item__label {
+                color: rgba(0, 0, 0, 0.4);
+            }
+            .el-input__wrapper {
+                background: transparent;
+                box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.46) inset;
+            }
+        }
+        .input {
+            height: 46px;
+            font-size: 16px;
+        }
+    }
+    .popup-footer {
+        width: 100%;
+        display: flex;
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+        margin-top: 30px;
+        padding-top: 25px;
+        div {
+            flex: 1;
+            background: linear-gradient(120deg, #ffd887, #ed9e1e);
+            border-radius: 6px;
+            padding: 13px;
+            font-size: 20px;
+            color: #000;
+            text-align: center;
+            cursor: pointer;
+        }
+        .disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+        .cancel {
+            color: #000;
+            background: #f3f3f3;
+            margin-right: 30px;
+        }
+    }
+}
+</style>
+
+<style lang="less">
+.select-popper-orange {
+    .add-btn {
+        cursor: pointer;
+        width: 100%;
+        padding: 8px 16px;
+        box-sizing: border-box;
+        border-radius: 4px;
+        font-size: 16px;
+        color: #fff;
+        display: flex;
+        align-items: center;
+        background: linear-gradient(120deg, #92CFFF, #2199F8);
+        .add-icon {
+            padding-right: 4px;
+        }
+    }
+    .option-input {
+        margin-bottom: 20px;
+    }
+}
+</style>

+ 75 - 4
src/components/editClientPopup.vue

@@ -21,6 +21,33 @@
                     <el-form-item label="地址" prop="address">
                         <el-input class="input" v-model="ruleForm.address" size="large" placeholder="请输入地址" />
                     </el-form-item>
+                    <el-form-item label="分组" prop="groupId">
+                        <el-select
+                            popper-class="select-popper-orange"
+                            class="select mr-10 select-orange"
+                            v-model="ruleForm.groupId"
+                        >
+                            <el-option
+                                v-for="(item, index) in groupOptions"
+                                :key="index"
+                                :label="item.groupName"
+                                :value="item.id"
+                            />
+                            <template #footer>
+                                <div class="add-btn" v-if="!isAddingItem" @click="isAddingItem=true">
+                                    <el-icon class="add-icon" size="16">
+                                        <Plus />
+                                    </el-icon>
+                                    <span>新增分组</span>
+                                </div>
+                                <template v-else>
+                                    <el-input v-model="ruleForm.groupName" class="option-input" /><br />
+                                    <el-button type="primary" @click="submitGroupName"> 新增 </el-button>
+                                    <el-button @click="isAddingItem=false">取消</el-button>
+                                </template>
+                            </template>
+                        </el-select>
+                    </el-form-item>
                     <el-form-item label="头像" prop="photo">
                         <upload></upload>
                     </el-form-item>
@@ -36,7 +63,7 @@
 
 <script setup>
 import { Popup } from "vant";
-import { reactive, ref } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 import { ElMessage } from "element-plus";
 import upload from "@/components/common/upload.vue";
 
@@ -45,6 +72,8 @@ const ruleForm = reactive({
     name: "",
     tel: "",
     address: "",
+    groupId: "",
+    groupName: ""
 });
 const rules = reactive({
     name: { required: true, message: "请输入用户名称", trigger: ["blur", "change"] },
@@ -52,18 +81,59 @@ const rules = reactive({
 });
 
 const ruleFormRef = ref(null);
+const userId = ref(null);
 const submitForm = async () => {
     if (!ruleFormRef.value) return;
     await ruleFormRef.value.validate((valid, fields) => {
         if (valid) {
-            ElMessage.success("保存成功");
-            showClient.value = false;
+            const params = {
+                id: userId.value,
+                name: ruleForm.name,
+                tel: ruleForm.tel,
+                address: ruleForm.address,
+                groupId: ruleForm.groupId,
+            };
+            VE_API.manage_interface.saveUserInfo(params).then(({code}) => {
+                if (code === 0) {
+                    ElMessage.success("保存成功");
+                    showClient.value = false;
+                    emit("updateGroupList");
+                }
+            })
         } else {
             console.log("error submit!");
         }
     });
 };
 
+const groupOptions = ref([]);
+const isAddingItem = ref(false);
+function getGroupList() {
+    VE_API.manage_user.fetchGroupList({farmId: 766}).then(({ data }) => {
+        groupOptions.value = data;
+    });
+}
+
+const submitGroupName = () => {
+    const params = {
+        groupName: ruleForm.groupName,
+    };
+    VE_API.manage_user
+        .saveGroup(params)
+        .then(({ code }) => {
+            if (code === 0) {
+                ElMessage.success("新建分组成功");
+                getGroupList()
+                emit("updateGroupList");
+            }
+        });
+};
+
+const emit = defineEmits(["updateGroupList"]);
+
+onMounted(() => {
+    getGroupList();
+});
 
 //新增客户
 const typePopup = ref("add");
@@ -76,11 +146,12 @@ const resetForm = () => {
 
 // 打开弹窗-类型
 function openClientPopup(type, data) {
-    console.log('data', data);
+    userId.value = data ? data.id : null;
     if (type === "edit") {
         ruleForm.name = data.name;
         ruleForm.tel = data.tel;
         ruleForm.address = data.address;
+        // ruleForm.groupId = data.groupId;
     } else {
         ruleForm.name = "";
         ruleForm.tel = "";

+ 32 - 2
src/views/home/album_compoents/albumCarousel.vue

@@ -31,7 +31,10 @@
 
                     <div class="content-box">
                         <div class="overview-file">
-                            <div class="box-title">总体档案</div>
+                            <div class="box-title">
+                                <div>总体档案</div>
+                                <div class="switch-wrap"><span class="switch-text">开放权限</span><el-switch @change="handleAuthChange" size="large" v-model="switchAuth" /></div>
+                            </div>
                             <!-- <div class="base-data">
                                 <div class="base-item" v-for="item in photoBaseData" :key="item.label">
                                     <span class="label">{{ item.label }}</span>
@@ -179,12 +182,14 @@ eventBus.on("click:point", handleClickPoint);
 const sampleIdVal = ref(null)
 const treeItemData = ref({})
 function handleClickPoint({ farmId, sampleId, data }) {
+    console.log(' farmId, sampleId, data ', farmId, sampleId, data );
     // sampleId = data.id;
     sampleIdVal.value = sampleId
     treeItemData.value = data
     ruleForm.pz = data.pz
     ruleForm.age = data.age
     ruleForm.plantDate = data.plantDate
+    switchAuth.value = data.isRenyang === 1 ? true : false
     data.geoHashSample && getSampleFiles(data.geoHashSample);
     photoBaseData.value[0].value = data.pz;
     isLoadingImg.value = true;
@@ -304,12 +309,24 @@ const disabledDate = (time) => {
   return time.getTime() > today.getTime();
 };
 
+const changeAuth = ref(false)
+
 async function saveEdit(isToSave) {
     if (isToSave) {
         // 保存
         await ruleFormRef.value.validate((valid, fields) => {
             if (valid) {
                 console.log('ruleForm', ruleForm);
+                // 开放权限
+                if (changeAuth.value) {
+                    const params = {
+                        sampleIds: [sampleIdVal.value],
+                        isRenyang: changeAuth.value ? 1 : 0,
+                        farmId: Number(sessionStorage.getItem("currentFarmId"))
+                    };
+                    
+                    VE_API.manage_interface.batchOpenOrCloseSample(params)
+                }
                 VE_API.manage_interface.editFosterSample({...ruleForm, sampleId: sampleIdVal.value}).then((res) => {
                     if (res.code === 0) {
                         ElMessage.success("修改成功")
@@ -327,10 +344,16 @@ async function saveEdit(isToSave) {
 
 const speciesList = ref([]);
 onMounted(() => {
-    VE_API.manage_interface.speciesList({ farmId: 80865 }).then(({ data }) => {
+    VE_API.manage_interface.speciesList({ farmId: 766 }).then(({ data }) => {
         speciesList.value = data;
     });
 })
+
+// 开放权限
+const switchAuth = ref(true)
+function handleAuthChange() {
+    switchAuth.value = !switchAuth.value
+}
 </script>
 
 <style lang="scss" scoped>
@@ -385,6 +408,13 @@ onMounted(() => {
                     border-radius: 2px;
                 }
             }
+            .switch-wrap {
+                color: #2199F8;
+                font-size: 16px;
+                .switch-text {
+                    padding-right: 10px;
+                }
+            }
             .title {
                 color: #f3c11d;
                 font-size: 16px;

+ 116 - 48
src/views/home/components/adoptList.vue

@@ -1,13 +1,38 @@
 <template>
     <div class="adopt-list" :class="{ 'has-btn': isManySetting }">
         <div class="select-wrap common-select">
-            <el-select class="select-item" v-model="areaVal" placeholder="全区" style="width: 116px">
-                <el-option v-for="item in areaOptions" :key="item.value" :label="item.label" :value="item.value" />
+            <el-select
+                class="select-item"
+                @change="handleChageData"
+                v-model="areaVal"
+                placeholder="全区"
+                style="width: 116px"
+            >
+                <el-option label="全部分区" :value="0"></el-option>
+                <el-option v-for="(item, index) in areaOptions" :key="index" :label="item.name" :value="item.id" />
             </el-select>
-            <el-select class="select-item" v-model="typeVal" placeholder="全部品类" style="width: 116px">
-                <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
+            <el-select
+                class="select-item"
+                @change="handleChageData"
+                v-model="typeVal"
+                placeholder="全部品类"
+                style="width: 116px"
+            >
+                <el-option label="全部品类" :value="0"></el-option>
+                <el-option
+                    v-for="(species, index) in speciesList"
+                    :key="index"
+                    :label="species.name"
+                    :value="species.name"
+                />
             </el-select>
-            <el-select class="select-item" v-model="ageVal" placeholder="树龄" style="width: 116px">
+            <el-select
+                class="select-item"
+                @change="handleChageData"
+                v-model="ageVal"
+                placeholder="树龄"
+                style="width: 116px"
+            >
                 <el-option v-for="item in ageOptions" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
         </div>
@@ -18,7 +43,13 @@
             <el-select class="select-item" v-model="ecologyVal" placeholder="生态评分" style="width: 116px">
                 <el-option v-for="item in ecologyOptions" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
-            <el-select class="select-item" v-model="statusVal" placeholder="全部状态" style="width: 116px">
+            <el-select
+                class="select-item"
+                @change="handleChageData"
+                v-model="statusVal"
+                placeholder="全部状态"
+                style="width: 116px"
+            >
                 <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
         </div>
@@ -76,6 +107,7 @@
         </div>
 
         <div class="list-wrap">
+            <div class="no-data" v-show="!adoptList.length">暂无数据</div>
             <div class="list-item" v-for="(item, index) in adoptList" :key="index">
                 <div class="list-info">
                     <div class="tree-icon">
@@ -173,15 +205,17 @@
 
                         <div
                             class="center-item p-t-2 user-wrap"
-                            v-show="item.status === 0 && !isManySetting && !item.settingPrice"
+                            v-show="!item.miniUserId && !isManySetting && !item.settingPrice"
+                            @click="showTreeDialog(item)"
                         >
                             <img src="@/assets/images/foster-home/user.png" alt="" />
-                            选择守护人
+                            <span class="user-text">选择预留守护人</span>
+                            
 
-                            <el-select
+                            <!-- <el-select
                                 v-model="offlineTakeSelected"
                                 filterable
-                                style="width: 240px"
+                                style="width: 140px"
                                 placeholder="请选择守护人"
                             >
                                 <el-option
@@ -190,27 +224,26 @@
                                     :label="user.name"
                                     :value="{ value: user.tel, ...user }"
                                 />
-                            </el-select>
+                            </el-select> -->
                         </div>
                         <div
                             class="center-item p-t-2 progress-wrap"
-                            v-show="item.status === 1 && !isManySetting && !item.settingPrice"
+                            v-show="item.miniUserId && !isManySetting && !item.settingPrice"
                         >
                             守护人:
                             <span class="unit">
                                 <div class="user-item">
-                                    <div class="user-detail" v-for="(owner, oI) in owners" :key="oI">
+                                    <!-- <div class="user-detail" v-for="(owner, oI) in owners" :key="oI">
                                         {{ owner.userName }}
                                         <span v-show="oI < owners.length - 1">/</span>
-                                    </div>
+                                    </div> -->
+                                    <el-avatar :size="26" :src="item.icon" />
+                                    <span class="avatar-name">{{ item.userNickName || item.miniUserId }}</span>
                                 </div>
                             </span>
                         </div>
                     </div>
-                    <div
-                        v-show="!isManySetting && !item.settingPrice"
-                        @click="toSettingSinglePrice(index, true)"
-                    >
+                    <div v-show="!isManySetting && !item.settingPrice" @click="toSettingSinglePrice(index, true)">
                         <img src="@/assets/images/common/edit-icon.png" alt="" />
                     </div>
                 </div>
@@ -235,12 +268,12 @@
         </div>
 
         <!-- 渐变主色按钮 -->
-        <div class="center-btn" v-show="!isManySetting" @click="manySetPrice">批量编辑果树</div>
+        <div class="center-btn" v-show="adoptList.length" @click="manySetPrice">批量编辑果树</div>
         <!-- 渐变主色按钮 -->
-        <div class="btn-group list-btn" v-show="isManySetting">
+        <!-- <div class="btn-group list-btn" v-show="isManySetting">
             <div class="btn cancel-btn" @click="saveManySetting(0)">取消</div>
             <div class="btn edit-btn" @click="saveManySetting(1)">保存</div>
-        </div>
+        </div> -->
     </div>
 </template>
 
@@ -250,25 +283,21 @@ import { onMounted, ref } from "vue";
 import { useStore } from "vuex";
 let store = useStore();
 import { useRouter } from "vue-router";
+import eventBus from "@/api/eventBus";
 const router = useRouter();
 
 const areaVal = ref(0);
-const areaOptions = ref([
-    { label: "全区", value: 0 },
-    { label: "1区", value: 1 },
-    { label: "2区", value: 2 },
-]);
+const areaOptions = ref([]);
 const typeVal = ref(0);
-const typeOptions = ref([
-    { label: "全部品类", value: 0 },
-    { label: "白糖罂", value: 1 },
-    { label: "井岗红糯", value: 2 },
-]);
 const ageVal = ref(0);
 const ageOptions = ref([
     { label: "全部树龄", value: 0 },
-    { label: "0-10年", value: 1 },
-    { label: "10-20年", value: 2 },
+    { label: "0-10年", value: 10 },
+    { label: "10-20年", value: 20 },
+    { label: "20-30年", value: 30 },
+    { label: "30-40年", value: 40 },
+    { label: "40-50年", value: 50 },
+    { label: "50年以上", value: 60 },
 ]);
 const allVal = ref(0);
 const allOptions = ref([
@@ -282,11 +311,11 @@ const ecologyOptions = ref([
     { label: "0-10年", value: 1 },
     { label: "10-20年", value: 2 },
 ]);
-const statusVal = ref(0);
+const statusVal = ref("-1");
 const statusOptions = ref([
-    { label: "全部状态", value: 0 },
-    { label: "0-10年", value: 1 },
-    { label: "10-20年", value: 2 },
+    { label: "全部状态", value: "-1" },
+    { label: "未开放", value: 0 },
+    { label: "已开放", value: 1 },
 ]);
 
 const adoptList = ref([]);
@@ -297,25 +326,45 @@ const offlineTakeSelected = ref(null);
 const userList = ref([]);
 const speciesList = ref([]);
 function getUserList() {
-    VE_API.manage_interface.offlineTakeList({ farmId: 80865 }).then(({ data }) => {
+    VE_API.manage_interface.offlineTakeList({ farmId: 766 }).then(({ data }) => {
         userList.value = data;
     });
-    VE_API.manage_interface.speciesList({ farmId: 80865 }).then(({ data }) => {
+    VE_API.manage_interface.speciesList({ farmId: 766 }).then(({ data }) => {
         speciesList.value = data;
     });
 }
 onMounted(() => {
     getSamplePage();
     getUserList();
+    getBlueRegionList();
 });
 
+function getBlueRegionList() {
+    VE_API.manage_interface.fetchRegionList({ farmId: 766 }).then(({ data }) => {
+        areaOptions.value = data;
+    });
+}
+
 const currentPage = ref(1);
 const pageSize = ref(20);
 const totalVal = ref(0);
 
+function handleChageData() {
+    currentPage.value = 1;
+    getSamplePage();
+}
+
 function getSamplePage() {
     VE_API.manage_interface
-        .fetchSamplePage({ farmId: 80865, page: currentPage.value, limit: 20 })
+        .fetchSamplePage({
+            farmId: 766,
+            regionId: areaVal.value === 0 ? null : areaVal.value,
+            isRenyang: statusVal.value === "-1" ? null : statusVal.value,
+            ageRange: ageVal.value === 0 ? null : [ageVal.value - 10, ageVal.value],
+            pz: typeVal.value === 0 ? null : typeVal.value,
+            page: currentPage.value,
+            limit: 20,
+        })
         .then(({ data, count }) => {
             adoptList.value = data;
             totalVal.value = count;
@@ -337,12 +386,6 @@ function manySetPrice() {
     // isManySetting.value = true;
     router.push("/layout/settingTree");
 }
-function saveManySetting(isToSave) {
-    isManySetting.value = false;
-    if (isToSave) {
-        // 保存
-    }
-}
 
 function setManyPrice(v) {
     //   adoptList.value.map(item => item.price = v)
@@ -351,7 +394,6 @@ function setManyPrice(v) {
 // 设置单棵树单价
 
 function toSettingSinglePrice(i, val, toSave = false) {
-    console.log("tototot");
     const data = adoptList.value[i];
     if (toSave) {
         const params = {
@@ -374,6 +416,15 @@ function toSettingSinglePrice(i, val, toSave = false) {
 function settingSinglePrice() {
     console.log("sss");
 }
+
+
+function showTreeDialog(item) {
+    eventBus.emit("click:point", { 
+        farmId: 766, 
+        sampleId: item.sampleId, 
+        data: item,
+    });
+}
 </script>
 
 <style lang="scss" scoped>
@@ -439,8 +490,13 @@ function settingSinglePrice() {
     }
 
     .list-wrap {
-        padding: 12px 0;
+        padding: 12px 0 40px 0;
         margin-bottom: 60px;
+        .no-data {
+            padding-top: 16px;
+            text-align: center;
+            color: rgba(0, 0, 0, 0.6);
+        }
         .list-item {
             background: rgba(120, 120, 120, 0.05);
             padding: 8px 16px 8px 10px;
@@ -519,7 +575,19 @@ function settingSinglePrice() {
                 }
 
                 .user-wrap {
+                    display: flex;
+                    align-items: center;
                     color: #f0ac37;
+                    cursor: pointer;
+                    img {
+                        width: 13px;
+                    }
+                    .user-text {
+                        padding-left: 5px;
+                    }
+                }
+                .avatar-name {
+                    padding-left: 4px;
                 }
 
                 .progress-wrap {

+ 131 - 71
src/views/home/components/applyList.vue

@@ -1,73 +1,98 @@
 <template>
     <div class="apply-list">
+        <div class="search-wrap">
+            
+        </div>
         <div class="list-wrap">
-            <div class="list-item" v-for="(item, index) in defalutList" :key="index">
-                <div class="item-box">
-                    <div class="item-flex">
-                        <img class="photo" :src="item.icon || 'https://birdseye-img.sysuimars.com/dinggou-mini/defalut-icon.png'" alt="" />
-                        <div class="item-text">
-                            <div class="name-info">
-                                <span class="item-title">守护人:</span>
-                                <span>{{ item.name }}</span>
-                                <el-icon class="edit-icon" @click.stop="handlePerson('edit', item)" color="#2199F8" size="16"
-                                    ><Edit
-                                /></el-icon>
-                            </div>
-                            <div class="p-4"><span class="item-title">电话:</span>{{ item.tel }}</div>
-                            <div>
-                                <span class="item-title">地址:</span>{{ item.address || "--" }}
+            <el-collapse v-model="activeNames" expand-icon-position="left">
+                <el-collapse-item
+                    title="Consistency"
+                    v-for="(group, groupIndex) in groupList"
+                    :key="groupIndex"
+                    :name="groupIndex"
+                >
+                    <template #title="{ isActive }">
+                        <div :class="['title-wrapper', { 'is-active': isActive }]">
+                            <div class="title-l">
+                                <el-icon class="arrow-icon"><CaretTop /></el-icon>
+                                {{ group.name }}
+                                <span class="group-length">({{ group?.list?.length }})</span>
                             </div>
                         </div>
-                    </div>
-                    <div class="tree-info">
-                        <div class="info-header">
-                            <div class="header-l">
-                                <img class="tree-icon" src="@/assets/images/user/tree.png" alt="" />
-                                守护详情
-                            </div>
-                            <div class="header-r">
-                                <div class="header-btn red" @click="warningMessage(item)">取消守护权限</div>
-                                <!-- <div class="header-btn" @click="toCustomOneTree(item)">更换守护树</div> -->
-                            </div>
-                        </div>
-                        <div class="info-content">
-                            <div class="tree-icon">
-                                <img
-                                    class="tree-img"
-                                    :src="item.icon || require(`@/assets/images/foster-home/list/1.png`)"
-                                    alt=""
-                                />
-                                <!-- <div class="tree-type-name-tag">{{ item.pz }}</div> -->
-                                <div class="tree-type-name-tag">白糖罂</div>
-                            </div>
-                            <div class="center-item p-t-2 age-line">
-                                <div class="tree-name">
-                                    <span>BTY-A305245</span>
+                    </template>
+                    <template #icon> </template>
+                    <div v-show="!group?.list?.length" class="no-data">暂无数据</div>
+                    <div v-show="group?.list?.length">
+                        <div class="list-item" v-for="(item, index) in group.list" :key="index">
+                            <div class="item-box">
+                                <div class="item-flex">
+                                    <img class="photo" :src="item.icon || 'https://birdseye-img.sysuimars.com/dinggou-mini/defalut-icon.png'" alt="" />
+                                    <div class="item-text">
+                                        <div class="name-info">
+                                            <span class="item-title">守护人:</span>
+                                            <span>{{ item.name }}</span>
+                                            <el-icon class="edit-icon" @click.stop="handlePerson('edit', item)" color="#2199F8" size="16"
+                                                ><Edit
+                                            /></el-icon>
+                                        </div>
+                                        <div class="p-4"><span class="item-title">电话:</span>{{ item.tel }}</div>
+                                        <div>
+                                            <span class="item-title">地址:</span>{{ item.address || "--" }}
+                                        </div>
+                                    </div>
                                 </div>
-                                <div class="tree-one">
-                                    <div class="age-wrap">
-                                        <div class="has-age">
-                                            <div class="age">
-                                                栽种时间:<span class="unit">2025-06-15</span>
+                                <div class="tree-info" v-for="(tree, treeI) in item.sampleList" :key="treeI">
+                                    <div class="info-header">
+                                        <div class="header-l">
+                                            <img class="tree-icon" src="@/assets/images/user/tree.png" alt="" />
+                                            守护详情
+                                        </div>
+                                        <div class="header-r">
+                                            <div class="header-btn red" @click="warningMessage(item)">取消守护权限</div>
+                                            <!-- <div class="header-btn" @click="toCustomOneTree(item)">更换守护树</div> -->
+                                        </div>
+                                    </div>
+                                    <div class="info-content">
+                                        <div class="tree-icon">
+                                            <img
+                                                class="tree-img"
+                                                :src="tree.icon || require(`@/assets/images/foster-home/list/1.png`)"
+                                                alt=""
+                                            />
+                                            <!-- <div class="tree-type-name-tag">{{ item.pz }}</div> -->
+                                            <div class="tree-type-name-tag">{{ tree.pz }}</div>
+                                        </div>
+                                        <div class="center-item p-t-2 age-line">
+                                            <div class="tree-name">
+                                                <span>{{ tree.fosterCode }}</span>
+                                            </div>
+                                            <div class="tree-one">
+                                                <div class="age-wrap">
+                                                    <div class="has-age">
+                                                        <div class="age">
+                                                            栽种时间:<span class="unit">{{ tree.plantDate || "--" }}</span>
+                                                        </div>
+                                                    </div>
+                                                    <div class="sort-line"></div>
+                                                </div>
+                                                树龄:<span class="unit"
+                                                    ><span class="unit">{{(tree.age + '年') || "--"}}</span></span
+                                                >
                                             </div>
+                                            
+                                            <div class="tree-btn" @click="showTreeDialog(item, tree)">点击查看详情</div>
                                         </div>
-                                        <div class="sort-line"></div>
                                     </div>
-                                    树龄:<span class="unit"
-                                        ><span class="unit">5年</span></span
-                                    >
                                 </div>
-                                
-                                <div class="tree-btn" @click="showTreeDialog(item)">点击查看详情</div>
                             </div>
                         </div>
                     </div>
-                </div>
-            </div>
+                </el-collapse-item>
+            </el-collapse>
         </div>
     </div>
     <!-- 新增客户、编辑客户 -->
-    <edit-client-popup ref="editClientRef"></edit-client-popup>
+    <edit-client-popup ref="editClientRef" @updateGroupList="getUserList"></edit-client-popup>
 </template>
 
 <script setup>
@@ -83,30 +108,32 @@ const handlePerson = (type, data) => {
     editClientRef.value.openClientPopup(type, data);
 };
 
-const defalutList = ref([]);
-
+const groupList = ref([]);
+const activeNames = ref([0]);
 onMounted(() => {
     getUserList();
 });
 
 function getUserList() {
-    VE_API.manage_interface.offlineTakeList({ farmId: 766, isAllot: 1 }).then(({ data }) => {
-        defalutList.value = data;
+    VE_API.manage_interface.fetchGroupList({ farmId: 766, isAllot: 1 }).then(({ data }) => {
+        groupList.value = Object.keys(data).map((key) => {
+            return {
+                name: key,
+                list: data[key],
+            };
+        });
     });
 }
 
-function showTreeDialog(item) {
+function showTreeDialog(item, tree) {
     eventBus.emit("click:point", { 
         farmId: 766, 
-        sampleId: 110851, 
+        sampleId: tree.sampleId, 
         data: {
-            "nodeType": "tree",
-            "age": 20,
-            "fosterCode": "LCNMC-GZCH_LBY0801",
-            "isRenyang": 1,
-            "pz": "糯米糍",
-            "sampleId": 110851,
-            "currentTree": true
+            ...tree,
+            miniUserId: item.id,
+            userNickName: item.name,
+            icon: item.icon
         }
     });
 }
@@ -118,10 +145,16 @@ function warningMessage(item) {
         cancelButtonText: '取消',
         type: 'warning',
     }).then(() => {
-        // 这里可以添加取消守护的逻辑
-        ElMessage({
-            type: 'success',
-            message: `已取消 ${item.name} 的守护权限`,
+        VE_API.manage_user.deleteUser({
+            id: item.id,
+        }).then(({code}) => {
+            if (code === 0) {
+                ElMessage({
+                    type: 'success',
+                    message: `已取消 ${item.name} 的守护权限`,
+                });
+                getUserList();
+            }
         });
     }).catch(() => {});
 }
@@ -148,6 +181,33 @@ function toCustomOneTree(data) {
         border-radius: 4px;
     }
     .list-wrap {
+        height: 100%;
+        overflow: auto;
+        padding: 0 8px;
+        ::v-deep {
+            
+            .el-collapse-item__arrow {
+                display: none;
+            }
+            .el-collapse-item__header {
+                &.is-active {
+                    .arrow-icon {
+                        transform: rotate(180deg);
+                    }
+                }
+            }
+            .el-collapse {
+                border-color: transparent;
+            }
+        }
+        .arrow-icon {
+            transition: all 0.3s ease;
+        }
+        
+        .no-data {
+            text-align: center;
+            color: rgba(0, 0, 0, 0.6);
+        }
         .list-item {
             padding: 0 10px;
             font-size: 14px;

+ 7 - 18
src/views/home/components/clientList.vue

@@ -11,7 +11,7 @@
                     <template #title="{ isActive }">
                         <div :class="['title-wrapper', { 'is-active': isActive }]">
                             <div class="title-l">
-                                <el-icon class="arrow-icon"><CaretBottom /></el-icon>
+                                <el-icon class="arrow-icon"><CaretTop /></el-icon>
                                 {{ group.name }}
                                 <span class="group-length">({{ group.list.length }})</span>
                             </div>
@@ -63,19 +63,6 @@
                         </el-checkbox-group>
                     </div>
                 </el-collapse-item>
-                <!-- <div class="item-flex">
-                    <img class="photo" :src="ele.icon || 'https://birdseye-img.sysuimars.com/dinggou-mini/defalut-icon.png'" alt="" />
-                    <div class="item-text">
-                        <div class="name">
-                            <span>{{ ele.name }}</span>
-                            <el-icon class="icon" @click.stop="handlePerson('edit', ele)" color="#2199F8" size="16"
-                                ><Edit/></el-icon>
-                        </div>
-                        <div><span class="item-title">电话:</span>{{ ele.tel }}</div>
-                        <div><span class="item-title">地址:</span>{{ ele.address || "--" }}</div>
-                    </div>
-                    <div class="blue-btn" @click="toCustomOneTree(ele)">去分配</div>
-                </div> -->
             </el-collapse>
         </div>
 
@@ -86,7 +73,7 @@
         </div>
     </div>
     <!-- 新增客户、编辑客户 -->
-    <edit-client-popup ref="editClientRef"></edit-client-popup>
+    <edit-client-popup ref="editClientRef" @updateGroupList="getUserList"></edit-client-popup>
 </template>
 
 <script setup>
@@ -308,9 +295,11 @@ const emit = defineEmits(["update:checkDistributeShow", "update:checkData"]);
             .el-collapse-item__arrow {
                 display: none;
             }
-            .el-collapse-item__header .is-active {
-                .arrow-icon {
-                    transform: rotate(90deg);
+            .el-collapse-item__header {
+                &.is-active {
+                    .arrow-icon {
+                        transform: rotate(180deg);
+                    }
                 }
             }
             .el-collapse {

+ 0 - 3
src/views/home/map/regionLayer.js

@@ -147,13 +147,10 @@ class RegionLayer {
 
     // 清除聚合图层,解除绑定
     clearLayer() {
-        console.log('clear');
         if (this.regionLayer) {
-            console.log('clear222');
             this.regionLayer.layer.getSource().clear();
         }
         if (this.gardenPointLayer) {
-            console.log('clear333',this.gardenPointLayer);
             this.gardenPointLayer.source.clear();
         }
     }

+ 3 - 4
src/views/settingTree/index.vue

@@ -168,7 +168,7 @@ function goBack() {
 onMounted(() => {
     getSamplePage()
     
-    VE_API.manage_interface.speciesList({ farmId: 80865 }).then(({ data }) => {
+    VE_API.manage_interface.speciesList({ farmId: 766 }).then(({ data }) => {
         speciesList.value = data;
     });
 
@@ -193,7 +193,7 @@ function handleTypeChange() {
 }
 
 function getSamplePage() {
-    VE_API.manage_interface.fetchSamplePage({farmId: 80865, pz: typeVal.value ? typeVal.value : null, page: currentPage.value, limit: pageSize.value}).then(({data, count}) => {
+    VE_API.manage_interface.fetchSamplePage({farmId: 766, pz: typeVal.value ? typeVal.value : null, page: currentPage.value, limit: pageSize.value}).then(({data, count}) => {
         allTrees.value = data
         totalVal.value = count;
     })
@@ -228,8 +228,7 @@ function settingForm() {
         pz: settingPz.value,
         plantDate: plantDate.value,
     };
-    
-    VE_API.manage_interface.batchOpenOrCloseSample(params).then(({code}) => {
+    VE_API.manage_interface.batchEditFosterSample(params).then(({code}) => {
         if (code === 0) {
             ElMessage.success("批量设置成功");
             getSamplePage();

+ 80 - 25
src/views/user/index.vue

@@ -11,6 +11,7 @@
                 <el-input
                     size="large"
                     v-model="searchVal"
+                    @change="handleChangeGruop"
                     style="width: 200px"
                     placeholder="搜索用户/手机号"
                     :prefix-icon="Search"
@@ -32,8 +33,8 @@
                 >
                     <el-button class="ml-10" size="large" type="primary">上传订单</el-button>
                 </el-upload>
-                <el-button class="ml-10" size="large" type="primary" plain>新建分组</el-button>
-                <el-button size="large" type="primary" plain>批量发送</el-button>
+                <el-button class="ml-10" size="large" type="primary" plain @click="openGroupPopup">新建分组</el-button>
+                <!-- <el-button size="large" type="primary" plain>批量发送</el-button> -->
             </div>
         </div>
         <div class="user-btn-group">
@@ -43,14 +44,16 @@
                 <el-button size="large" type="primary" plain>普通用户</el-button>
             </div>
             <div class="select-group">
-                <el-select v-model="cityVal" placeholder="选择省份" size="large" class="ml-10" style="width: 100px">
+                <!-- <el-select v-model="cityVal" placeholder="选择省份" size="large" class="ml-10" style="width: 100px">
                     <el-option v-for="item in cityOptions" :key="item.value" :label="item.label" :value="item.value" />
+                </el-select> -->
+                <el-select v-model="groupVal" @change="handleChangeGruop" placeholder="选择分组" size="large" class="ml-10" style="width: 120px">
+                    <el-option label="全部分组" value="-2" />
+                    <el-option v-for="(item, index) in groupOptions" :key="index" :label="item.groupName" :value="item.id" />
                 </el-select>
-                <el-select v-model="groupVal" placeholder="选择分组" size="large" class="ml-10" style="width: 120px">
-                    <el-option v-for="item in groupOptions" :key="item.value" :label="item.label" :value="item.value" />
-                </el-select>
-                <el-select v-model="levelVal" placeholder="守护等级" size="large" class="ml-10" style="width: 120px">
-                    <el-option v-for="item in levelOptions" :key="item.value" :label="item.label" :value="item.value" />
+                <el-select v-model="levelVal" @change="handleChangeGruop" placeholder="守护等级" size="large" class="ml-10" style="width: 120px">
+                    <el-option label="全部等级" value="-2" />
+                    <el-option v-for="(item, index) in levelOptions" :key="index" :label="item.name" :value="item.id" />
                 </el-select>
             </div>
         </div>
@@ -90,15 +93,18 @@
                 <!-- <el-table-column label="日期" sortable>
                     <template #default="scope">{{ scope.row.fosterDate }}</template>
                 </el-table-column> -->
-                <el-table-column property="fosterCode" label="守护树编号" />
+                <el-table-column property="groupName" label="分组" />
                 <el-table-column label="操作" width="310">
                     <template #default="scope">
                         <div class="action-btn">
-                            <el-button type="primary" @click="handleMsg(scope.row)"
+                            <!-- <el-button type="primary" @click="handleMsg(scope.row)"
                                 ><el-icon class="el-icon--right"><Comment /></el-icon>发消息</el-button
                             >
                             <el-button type="primary" @click="handleMsg(scope.row)"
                                 ><el-icon><Briefcase /></el-icon>发礼物</el-button
+                            > -->
+                            <el-button type="warning" @click="clearUser(scope.row)"
+                                ><el-icon><DeleteFilled /></el-icon>清理</el-button
                             >
                             <el-button type="danger" @click="deleteUser(scope.row)"
                                 ><el-icon><Delete /></el-icon>删除</el-button
@@ -121,10 +127,13 @@
             />
         </div>
         <div class="put-btn" v-if="selectedRows.length">
-            <div class="btn-l">推送消息</div>
-            <div class="btn-r">推送优惠券</div>
+            <div class="btn-r" @click="batchGroup">分配分组</div>
+            <!-- <div class="btn-l ml-30">推送消息</div>
+            <div class="btn-line"></div>
+            <div class="btn-r">推送优惠券</div> -->
         </div>
     </div>
+    <add-group ref="addGroupRef" @updateTableList="getTableData" @updateGroupList="getGroupList"></add-group>
 </template>
 
 <script setup>
@@ -133,6 +142,7 @@ import { Search } from "@element-plus/icons-vue";
 import config from "@/api/config.js";
 import { useStore } from "vuex";
 import { ElMessage, ElMessageBox } from "element-plus";
+import addGroup from "@/components/addGroup.vue";
 let store = useStore();
 
 const searchVal = ref(null);
@@ -167,18 +177,11 @@ const cityOptions = ref([
     { label: "湖北省", value: "湖北省" },
 ]);
 
-const groupVal = ref("分组101");
-const groupOptions = ref([
-    { label: "分组101", value: "分组101" },
-    { label: "分组102", value: "分组102" },
-]);
+const groupVal = ref('-2');
+const groupOptions = ref([]);
 
-const levelVal = ref("");
-const levelOptions = ref([
-    { label: "平民", value: "平民" },
-    { label: "青铜守护", value: "青铜守护" },
-    { label: "白银守护", value: "白银守护" },
-]);
+const levelVal = ref('-2');
+const levelOptions = ref([]);
 
 const currentPage = ref(1);
 const pageSize = ref(20); // 每页显示20条数据
@@ -186,8 +189,29 @@ const totalVal = ref(0);
 
 onMounted(() => {
     getTableData();
+    getGroupList();
+
+    VE_API.manage_user
+        .fetchLevelList({farmId: 766})
+        .then(({ data }) => {
+            levelOptions.value = data
+        });
 });
 
+function getGroupList() {
+    VE_API.manage_user
+        .fetchGroupList({farmId: 766})
+        .then(({ data }) => {
+            groupOptions.value = data
+        });
+}
+
+function handleChangeGruop(val) {
+    currentPage.value = 1; // 重置页码
+    getTableData()
+    // 这里可以添加根据选择的分组进行数据过滤或其他操作
+}
+
 function handleSizeChange(newSize) {
     pageSize.value = newSize;
     currentPage.value = 1; // 重置页码
@@ -197,7 +221,7 @@ function handleSizeChange(newSize) {
 function getTableData() {
     // 获取数据
     VE_API.manage_interface
-        .fetchUserList({ farmId: 766, page: currentPage.value, limit: pageSize.value })
+        .fetchUserList({ farmId: 766, word: searchVal.value, level: (levelVal.value !== '-2') ? levelVal.value : null, groupId: (groupVal.value !== '-2') ? groupVal.value : null, page: currentPage.value, limit: pageSize.value })
         .then(({ data, count }) => {
             tableData.value = data;
             totalVal.value = count;
@@ -232,6 +256,21 @@ function handleUploadMsg(res) {
     getTableData(); // 刷新表格数据
 }
 
+// 清理数据
+function clearUser(item) {
+    ElMessageBox.confirm(`确认清理 ${item.name} 的绑定树和手机号码吗?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+    }).then(() => {
+        VE_API.manage_user.cleanBind({ miniUserId: item.miniUserId }).then(({ code }) => {
+            if (code === 0) {
+                ElMessage.success("清理成功");
+                getTableData(); // 刷新表格数据
+            }
+        });
+    }).catch(() => {});
+}
 // 删除数据
 function deleteUser(item) {
     ElMessageBox.confirm(`确认删除 ${item.name} 的守护权限吗?`, "提示", {
@@ -245,7 +284,18 @@ function deleteUser(item) {
                 getTableData(); // 刷新表格数据
             }
         });
-    });
+    }).catch(() => {});
+}
+
+const addGroupRef = ref(null);
+// 新建分组
+function openGroupPopup() {
+    addGroupRef.value.openClientPopup("add");
+}
+
+// 批量分配分组
+function batchGroup() {
+    addGroupRef.value.openClientPopup("edit", selectedRows.value.map(item => item.tel));
 }
 </script>
 
@@ -295,6 +345,9 @@ function deleteUser(item) {
     .ml-10 {
         margin-left: 10px;
     }
+    .ml-30 {
+        margin-left: 30px;
+    }
     .user-btn-group {
         padding: 24px 0;
         display: flex;
@@ -367,6 +420,7 @@ function deleteUser(item) {
             border-radius: 4px;
             font-size: 16px;
             color: #fff;
+            cursor: pointer;
         }
         .btn-r {
             margin-left: 30px;
@@ -375,6 +429,7 @@ function deleteUser(item) {
             border-radius: 4px;
             font-size: 16px;
             color: #fff;
+            cursor: pointer;
         }
     }
 }