Merge remote-tracking branch 'origin/test' into test

linwei

2025-11-05 c48eafe8411adad734b57b424f5440284dbc85e3

 src/views/layerManagement/components/folderFile.vue

New file
@@ -0,0 +1,310 @@
<template>
  <div class="rightContainer">
    <div class="contenttitle">{{itSLandPlanning ? '文件' : '文件夹'}}信息</div>
    <div class="centerBox">
      <div class="itemRow">
        <div class="label">{{itSLandPlanning ? '文件' : '文件夹'}}名称</div>
        <div>
          <el-input class="ztzf-layer-input inputName" v-model="formData.name" placeholder="请输入" />
        </div>
      </div>
      <div class="itemRow" v-if="layerParams.addAnEditingFolder === 1 && layerParams.fileType !==2 && !itSLandPlanning">
        <div class="label">关联算法</div>
        <div>
          <el-select
            class="ztzf-layer-search filter-item"
           
            @change="handleTypeChange"
            v-model="formData.event_type"
            placeholder="请选择"
            clearable
          >
            <el-option
              v-for="item in types"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-select
            v-model="formData.algorithm_name"
           
            class="ztzf-layer-search"
            placeholder="请选择"
            clearable
            :disabled="!formData.event_type"
          >
            <el-option
              v-for="item in algorithms"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="detailInfo" v-if="layerParams.editFolder">
      <div class="infpItem" v-if="!itSLandPlanning">
        <div class="itemData">
          <div class="title">围栏总数量</div>
          <div class="num">
            <span>{{ formData.total_count }}</span> 个
          </div>
        </div>
        <div class="itemData">
          <div class="title">围栏总面积</div>
          <div class="num">
            <span class="areaStyle">{{ formData.total_area }}</span> m²
          </div>
        </div>
      </div>
      <div class="infpItem">
        <div class="itemData">
          <div class="title">创建时间</div>
          <div class="num">
            <span>{{ formData?.create_time }}</span>
          </div>
        </div>
        <div class="itemData">
          <div class="title">创建人</div>
          <div class="num">
            <span>{{ formData?.create_name }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="btnGroups">
      <img src="/src/assets/images/layerManagement/savebtn.svg" alt="" @click="submitHandle" />
      <img src="/src/assets/images/layerManagement/cancelbtn.svg" @click="cancelHandel" alt="" />
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(['refreshMethod']);
import EventBus from '@/utils/eventBus';
import { ElMessage } from 'element-plus';
import dayjs from 'dayjs';
import { deleteFolderApi, deitFolderApi, addFolderApi } from '@/api/layer/index';
import { getTicketInfo } from '@/api/tickets/ticket';
import { computed } from 'vue';
const layerParams = inject('layerParams');
const types = ref([]); //工单类型
const allAlgorithms = ref([]);
const algorithms = ref([]);
const formData = ref({
  category_id: '',
  name: '',
  event_type: '',
  algorithm_name: '',
  total_count: 0,
  total_area: 0,
});
const detailData = ref(null);
detailData.value = layerParams.value.editFolderData;
const props = defineProps({
  activeName: String,
});
const itSLandPlanning = computed(() => props.activeName === '国土空间规划')
const getTicketInfoData = async () => {
  const response = await getTicketInfo();
  const { dept_data, event_type, ai_type, info } = response.data.data;
  allAlgorithms.value = info;
  types.value = Object.entries(event_type).map(([key, value]) => ({
    label: value,
    value: key,
  }));
};
const handleTypeChange = typeValue => {
  const matchedCategory = allAlgorithms.value.find(category => category.dict_key === typeValue);
  if (!matchedCategory || !matchedCategory.algorithms || matchedCategory.algorithms.length === 0) {
    // 无匹配的算法时清空
    algorithms.value = [];
    return;
  }
  algorithms.value = matchedCategory.algorithms.map(algo => ({
    label: algo.dict_value,
    value: algo.dict_key,
    dict_key: algo.dict_key,
    dict_value: algo.dict_value,
  }));
};
const clearAllData = () => {
  formData.value = {
    category_id: '',
    name: '',
    event_type: '',
    algorithm_name: '',
    total_count: 0,
    total_area: 0,
    create_time: '',
    create_name: '',
  };
  algorithms.value = [];
  detailData.value = {};
  layerParams.value.decideWhetherToAddOrEdit = 1;
  layerParams.value.addFolder = false;
  layerParams.value.editFolder = false;
  layerParams.value.editDetailData = null;
  layerParams.value.polygonPosition = null;
};
const cancelHandel = () => {
  clearAllData();
};
const submitHandle = () => {
  if (!formData.value.name) {
    ElMessage.error('请输入文件夹名称');
    return;
  }
  if(!itSLandPlanning.value){
    if (!formData.value.event_type && layerParams.value.fileType === 1) {
      ElMessage.warning('请选择类型');
      return;
    }
    if (!formData.value.algorithm_name && layerParams.value.fileType === 1) {
      ElMessage.warning('请选择算法');
      return;
    }
  }
  const params = {
    category_id: layerParams.value.fileType === 1 ? 1 : 2,
    name: formData.value.name,
    event_type: formData.value.event_type,
    algorithm_name: formData.value.algorithm_name,
  };
  // 如果是编辑模式，才添加 id
  if (layerParams.value.addAnEditingFolder === 2) {
    params.id = detailData.value.id;
  }
  if (layerParams.value.addAnEditingFolder === 1) {
    // 文件夹新增
    addFolderApi(params).then(res => {
      ElMessage.success('新增成功');
        EventBus.emit('gettreeDataApi');
          emit('refreshMethod');
      clearAllData();
    });
  } else {
    //文件夹编辑
    deitFolderApi(params).then(res => {
      ElMessage.success('编辑成功');
        EventBus.emit('gettreeDataApi');
      clearAllData();
    });
  }
};
onMounted(async () => {
  await getTicketInfoData();
  const addOrEditStatus = layerParams.value.addAnEditingFolder || 1;
  //  判断是否有编辑数据，有则回显
  if (detailData.value && addOrEditStatus === 2) {
    const editData = detailData.value;
    formData.value = {
      ...formData.value,
      category_id: editData.category_id,
      name: editData.name,
      event_type: editData.event_type, // 回显“关联算法类型”值
      algorithm_name: editData.algorithm_name, // 回显“算法”值

      total_count: editData.total_count,
      total_area: editData.total_area,
      create_time: editData.create_time ? dayjs(editData.create_time).format('YYYY年MM月DD日') : '',
      create_name: editData.create_name,
    };
    if (formData.value.event_type) {
      handleTypeChange(formData.value.event_type);

      setTimeout(() => {
        formData.value.algorithm_name = editData.algorithm_name;
      }, 100);
    }
  }
});
</script>

<style scoped lang="scss">
.rightContainer {
  position: absolute;
  top: 0;
  right: 0;
  height: 95%;
  z-index: 99;
  width: 324px;

  overflow: hidden;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 8px 8px 8px 8px;
  padding: 16px 12px;

  :deep(.el-textarea__inner) {
    background: transparent !important;
    color: #ffffff !important;
  }
  .contenttitle {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 20px;
  }
  .centerBox {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    .itemRow {
      margin-bottom: 35px;
    }
    .label {
      margin-bottom: 5px;
    }
  }
  .detailInfo {
    .infpItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 14px;
      color: #DFDFDF;
      margin-bottom: 23px;
      .num {
        span {
          font-family: Source Han Sans CN, Source Han Sans CN;
          font-weight: bold;
          font-size: 14px;
          color: #ffffff;
        }
         .areaStyle {
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: bold;
        font-size: 20px;
        color: #FFFFFF;
                }
      }
      .itemData {
        width: 50%;

      }
    }
  }
  .btnGroups {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 59px;
    left: 0;
    right: 0;
    img {
      width: 125px;
      height: 39px;
      cursor: pointer;
    }
  }
}
.filter-item {
  margin-bottom: 12px;
}
</style>