qp_onemap_ui/src/views/WgnLast.vue

<template>
  <div class="wgn_box">
    <!-- <div class="server_title">
      <el-image
        style="width: 50%; height: calc(100vh - 120px)"
        src="static/images/wgn_title.png"
        fit="cover"
      />
      <div class="server_title_text">
        <div class="server_title_text_title">微功能服务</div>
        <div class="server_title_text_content">
          微功能子系统专注于提供强大的空间计算与数据处理能力，是支撑青浦区三维数字底板空间分析与数据流转的核心模块，聚焦
          “精准计算 + 灵活处理”
          两大核心能力，所有功能均以标准化服务接口形式对外提供（支持第三方委办、上层应用系统调用），同时在系统内部集成可视化操作界面，实现
          “计算 - 分析 - 展示” 闭环。
        </div>
        <div class="server_title_text_btu" v-if="$getUserType() == 3"> -->
    <!-- 先打开弹窗，然后上传文件保存信息到DMS的任务表，同时发送任务到微功能子系统，微功能子系统处理完成后，更新任务状态 -->
    <!-- <el-button type="primary" round plain size="large" @click="createTask"
            >大批量数据处理任务<el-icon><Position /></el-icon
          ></el-button>
        </div>
      </div>
    </div> -->

    <!-- 顶部横幅区域 -->
    <div class="banner">
      <div class="banner-content">
        <h1 class="banner-title">微功能服务</h1>
        <p class="banner-description">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;微功能子系统专注于提供强大的空间计算与数据处理能力，是支撑青浦区三维数字底板空间分析与数据流转的核心模块，聚焦“精准计算
          +
          灵活处理”两大核心能力，所有功能均以标准化服务接口形式对外提供（支持第三方委办、上层应用系统调用），同时在系统内部集成可视化操作界面，实现“计算
          - 分析 - 展示” 闭环。
        </p>
        <div v-if="$getUserType() == 3">
          <el-button type="primary" round plain size="large" @click="createTask"
            >大批量数据处理任务<el-icon><Position /></el-icon
          ></el-button>
        </div>
      </div>
    </div>

    <div class="server_list_box">
      <div class="server_list_box_title">微功能列表</div>
      <el-affix :offset="80">
        <div class="server_list_box_search">
          <el-input
            v-model="searchStr"
            style="width: 525px; margin-left: 37px"
            placeholder="输入搜索关键词"
            class="input-with-select"
            clearable
            size="large"
            @change="searchServerList()"
          >
            <template #append>
              <el-button icon="Search" @click="searchServerList()" />
            </template>
          </el-input>
        </div>
      </el-affix>
      <div class="server_list_box_table" v-if="dmsServerList">
        <div
          v-for="item in dmsServerList"
          :key="item.c_scene_name"
          class="server_list_box_table_item"
          :id="item.c_scene_name + 'list'"
        >
          <div class="server_list_box_table_item_content">
            <div class="server_list_box_table_item_content_title">{{ item.title }}</div>
            <div class="server_list_box_table_item_content_text">{{ item.content }}</div>
            <div class="server_list_box_table_item_content_button_box">
              <div
                class="server_list_box_table_item_content_button_box_item"
                @click.stop="handleOnlineDemo(item)"
              >
                在线演示
              </div>
              <div
                class="server_list_box_table_item_content_button_box_item"
                @click.stop="handleApply(item)"
              >
                申请使用
              </div>
            </div>
          </div>
          <div class="server_list_box_table_item_image">
            <el-image
              style="width: 690px; height: 410px"
              :src="dmsDataProxy + item.c_picture"
              fit="cover"
            />
          </div>
        </div>
      </div>
      <!-- 申请使用微功能服务的表单弹窗 -->
      <el-dialog
        title="申请使用微功能服务"
        v-model="showFrom"
        width="60%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="true"
      >
        <el-form :model="column.from" :rules="rules" ref="formRef" label-width="120px">
          <el-form-item label="应用名称" prop="c_application_name">
            <el-input v-model="column.from.c_application_name" placeholder="请输入应用名称" />
          </el-form-item>
          <el-form-item label="接口路径" prop="c_interface_path">
            <el-input
              v-model="column.from.c_interface_path"
              disabled
              placeholder="请输入接口路径"
            />
          </el-form-item>
          <el-form-item label="联系电话" prop="c_phone">
            <el-input v-model="column.from.c_phone" placeholder="请输入联系电话" />
          </el-form-item>
          <el-form-item label="单位名称" prop="c_unit_name">
            <el-input v-model="column.from.c_unit_name" placeholder="请输入单位名称" />
          </el-form-item>
          <el-form-item label="部门名称" prop="c_department">
            <el-input v-model="column.from.c_department" placeholder="请输入部门名称" />
          </el-form-item>
          <!-- 项目负责人 -->
          <el-form-item label="项目负责人" prop="c_business_leader">
            <el-input v-model="column.from.c_business_leader" placeholder="请输入项目负责人" />
          </el-form-item>
          <!-- 申请使用微功能服务的详细信息 -->
          <el-form-item label="申请使用微功能服务的详细信息" prop="content">
            <el-input
              type="textarea"
              v-model="column.from.content"
              placeholder="请输入申请使用微功能服务的详细信息"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showFrom = false">取消</el-button>
            <el-button type="primary" @click="handleApplySubmit">确定</el-button>
          </div>
        </template>
      </el-dialog>
      <!-- 创建任务的表单弹窗 -->
      <el-dialog
        title="创建任务"
        v-model="showTaskFrom"
        width="60%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="true"
      >
        <el-form
          :model="taskColumn.from"
          :rules="taskColumn.rules"
          ref="taskFormRef"
          label-width="120px"
        >
          <el-form-item label="任务名称" prop="c_name">
            <el-input v-model="taskColumn.from.c_name" placeholder="请输入任务名称" clearable>
              <template #prepend>{{
                $moment(new Date()).format("YYMMDD_HHmm") +
                "_" +
                (taskColumn.from.c_type
                  ? $getDmsTypes("yzt_task_type", taskColumn.from.c_type) + "_"
                  : "")
              }}</template>
            </el-input>
          </el-form-item>
          <el-form-item label="任务备注" prop="c_comment">
            <el-input
              type="textarea"
              clearable
              v-model="taskColumn.from.c_comment"
              placeholder="请输入任务备注"
            />
          </el-form-item>
          <!-- 下拉框选择任务类型 -->
          <el-form-item label="任务类型" prop="c_type">
            <el-select
              v-model="taskColumn.from.c_type"
              @change="changeTaskType"
              placeholder="请选择任务类型"
            >
              <el-option
                v-for="(name, index) in $store.state.DmsTypesMap['yzt_task_type']"
                :key="index"
                :label="name"
                :value="index"
              />
            </el-select>
          </el-form-item>
          <!-- 渲染任务描述:仅查看 -->
          <el-form-item
            label="任务描述"
            prop="apiDescription"
            v-if="taskColumn.apiFrom.apiDescription"
          >
            <el-input type="textarea" disabled v-model="taskColumn.apiFrom.apiDescription" />
          </el-form-item>
          <!-- 任务文件是必须的 -->
          <el-form-item label="任务文件" prop="c_source_file">
            <el-input disabled v-model="taskColumn.from.c_source_file" v-show="false" />
            <el-upload class="avatar-uploader" :http-request="handleTCUpload" :limit="1">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
          <el-divider />
          <!-- 其他参数数据 -->
          <el-form-item label="其他参数数据" prop="c_source_data" v-show="false">
            <el-input
              type="textarea"
              clearable
              v-model="taskColumn.from.c_source_data"
              placeholder="请输入其他参数数据"
            />
          </el-form-item>
          <div
            v-if="
              taskColumn.apiFrom.apiParameterRules &&
              includesKey([
                'lonKey',
                'latKey',
                'outFileType',
                'inPrj',
                'outPrj',
                'keyType',
                'geocodeColumnKeyword',
              ])
            "
          >
            <template
              v-for="(rulesItem, index) in taskColumn.apiFrom.apiParameterRules"
              :key="index"
            >
              <el-form-item
                v-if="
                  [
                    'lonKey',
                    'latKey',
                    'outFileType',
                    'inPrj',
                    'outPrj',
                    'keyType',
                    'geocodeColumnKeyword',
                  ].includes(rulesItem)
                "
                :label="
                  rulesItem === 'keyType'
                    ? '类型字段'
                    : rulesItem === 'geocodeColumnKeyword'
                      ? '数据列名'
                      : rulesItem
                "
              >
                <el-input
                  v-if="['lonKey', 'latKey'].includes(rulesItem)"
                  v-model="taskColumn.from.c_source_data[rulesItem]"
                  placeholder="当文件为xlsx时必填"
                />
                <el-select
                  v-if="['outFileType', 'inPrj', 'outPrj'].includes(rulesItem)"
                  v-model="taskColumn.from.c_source_data[rulesItem]"
                  :placeholder="'请选择' + rulesItem"
                >
                  <el-option
                    v-for="item in taskColumn.selectOptions[rulesItem]"
                    :key="'wgn-task-selectOptions-form-' + item.label"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-select
                  v-if="rulesItem === 'keyType'"
                  v-model="taskColumn.from.c_source_data.keyType"
                  placeholder="非空转空时选择地物类型"
                  :clearable="!isGeocodingTaskKeyTypeReadonly()"
                  filterable
                  :disabled="isGeocodingTaskKeyTypeReadonly()"
                >
                  <el-option
                    v-for="item in taskColumn.selectOptions.keyType"
                    :key="'wgn-task-keyType-' + item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
                <el-input
                  v-if="rulesItem === 'geocodeColumnKeyword' && isTaskGeocodeZipForColumnInput"
                  v-model="taskColumn.from.c_source_data.geocodeColumnKeyword"
                  placeholder="zip 内含多个表格时请手动输入列名（与各表表头一致）"
                  clearable
                />
                <el-select
                  v-if="rulesItem === 'geocodeColumnKeyword' && !isTaskGeocodeZipForColumnInput"
                  v-model="taskColumn.from.c_source_data.geocodeColumnKeyword"
                  placeholder="请先上传 CSV / XLSX，将自动读取表头"
                  clearable
                  filterable
                  :disabled="
                    !taskColumn.selectOptions.geocodeColumnKeyword ||
                    !taskColumn.selectOptions.geocodeColumnKeyword.length
                  "
                >
                  <el-option
                    v-for="item in taskColumn.selectOptions.geocodeColumnKeyword"
                    :key="'wgn-task-geocol-' + item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </template>
          </div>
          <!-- 任务状态默认为初始化 -->
          <el-form-item label="任务状态" prop="c_state" v-show="false">
            <el-select disabled v-model="taskColumn.from.c_state" placeholder="请选择任务状态">
              <el-option
                v-for="(name, index) in $store.state.DmsTypesMap['task_status']"
                :key="'wgn-task-form-' + index"
                :label="name"
                :value="index"
              />
            </el-select>
          </el-form-item>
          <!-- 任务负责人默认为当前登录用户 -->
          <el-form-item label="用户id" prop="c_user_id" v-show="false">
            <el-input disabled v-model="taskColumn.from.c_user_id" />
          </el-form-item>
          <!-- 任务负责人默认为当前登录用户 -->
          <el-form-item label="用户名" prop="c_user_name" v-show="false">
            <el-input disabled v-model="taskColumn.from.c_user_name" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="showTaskFrom = false">取消</el-button>
            <el-button type="primary" @click="handleTaskSubmit">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { ElNotification } from "element-plus";
import * as XLSX from "xlsx";
import api from "@/api/content";
export default {
  name: "微功能服务",
  data() {
    return {
      // 搜索关键词
      searchStr: "",
      // 微功能服务列表
      dmsServerList: [],
      // DMS数据代理地址
      dmsDataProxy: "",
      // 是否显示申请使用微功能服务的表单弹窗
      showFrom: false,
      // 是否显示创建任务的表单弹窗
      showTaskFrom: false,
      // 申请使用微功能服务的表单验证规则
      rules: {
        c_application_name: [{ required: true, message: "请输入应用名称", trigger: "blur" }],
        c_interface_path: [{ required: true, message: "请输入接口路径", trigger: "blur" }],
        c_business_leader: [{ required: true, message: "请输入项目负责人", trigger: "blur" }],
        // 添加手机号正则验证
        c_phone: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
          {
            validator: (rule, value, callback) => {
              // 手机号正则验证
              let phoneRegex = /^1[3456789]\d{9}$/;
              if (!phoneRegex.test(value)) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        c_unit_name: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
        c_department: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
      },
      // 申请使用微功能服务的表单数据
      column: {
        columnId: systemConfig.columnIds[4],
        modelId: systemConfig.modelIds[2],
        from: {
          // 备注：申请使用微功能服务的详细信息，非必填
          content: "",
          // 项目负责人，必填
          c_business_leader: "",
          // 应用名称,必填
          c_application_name: "",
          // 接口路径，必填
          c_interface_path: "",
          // 联系电话，必填
          c_phone: "",
          // 单位名称，必填
          c_unit_name: "",
          // 部门名称，必填
          c_department: "",
        },
      },
      // 创建任务的表单数据
      taskColumn: {
        columnId: systemConfig.columnIds[6],
        modelId: systemConfig.modelIds[3],
        rules: {
          c_name: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
          c_comment: [{ required: true, message: "请输入任务备注", trigger: "blur" }],
          c_type: [{ required: true, message: "请选择任务类型", trigger: "change" }],
          c_source_file: [{ required: true, message: "请上传任务文件", trigger: "change" }],
        },
        from: {
          title: "",
          content: "",
          // 任务名称，必填（默认应该是：日期-任务类型-用户自定义名称）,这里保存的就是用户自定义名称，提交的时候会自动补充日期-任务类型-
          c_name: "",
          // 备注：任务的详细信息，必填
          c_comment: "",
          // 任务类型，必填
          c_type: "",
          // 任务创建人用户名，必填
          c_user_name: "",
          // 任务创建人，必填
          c_user_id: "",
          // 任务文件，必填
          c_source_file: "",
          // 任务文件名,上传文件时自动带入
          c_source_file_name: "",
          // 其他参数数据
          c_source_data: {},
          // 申请状态，默认初始化【0:初始化；1:运行中；2:成功完成；3:异常中断】
          c_state: "0",
        },
        // 切换任务类型时，渲染的接口详情
        apiFrom: {
          // 任务描述，仅查看
          apiDescription: "",
          // 接口参数，仅查看
          apiParameterRules: [],
          // 接口路径
          apiUrl: "",
        },
        // 其他参数
        selectOptions: {
          keyType: [
            { value: "地址", label: "地址" },
            { value: "村居", label: "村居" },
            { value: "街镇", label: "街镇" },
            { value: "区县", label: "区县" },
            { value: "要素ID", label: "要素ID" },
          ],
          geocodeColumnKeyword: [],
          // 单位
          unit: [
            {
              value: "METER",
              label: "米",
            },
            {
              value: "KILOMETER",
              label: "千米",
            },
          ],
          inPrj: [
            {
              value: "WGS84",
              label: "WGS84",
            },
            {
              value: "SH2000",
              label: "SH2000",
            },
            {
              value: "UTM",
              label: "UTM",
            },
            {
              value: "WEB_Mercator",
              label: "WEB_Mercator",
            },
          ],
          outPrj: [
            {
              value: "WGS84",
              label: "WGS84",
            },
            {
              value: "SH2000",
              label: "SH2000",
            },
            {
              value: "UTM",
              label: "UTM",
            },
            {
              value: "WEB_Mercator",
              label: "WEB_Mercator",
            },
          ],
          outFileType: [
            {
              value: "geoJson",
              label: "geoJson",
            },
            {
              value: "shp",
              label: "shp",
            },
            {
              value: "csv",
              label: "csv",
            },
            {
              value: "xlsx",
              label: "xlsx",
            },
          ],
        },
      },
      // 搜索微功能服务的防抖定时器
      searchTimeout: null,
      /** 最近一次任务上传的原始文件，用于先上传后切换任务类型时补解析表头 */
      taskUploadRawFile: null,
    };
  },
  computed: {
    /** 任务源文件为 zip（多表打包）时，数据列名改用手动输入 */
    isTaskGeocodeZipForColumnInput() {
      const n =
        (this.taskUploadRawFile && this.taskUploadRawFile.name) ||
        this.taskColumn.from.c_source_file_name ||
        "";
      return String(n).toLowerCase().endsWith(".zip");
    },
  },
  mounted() {
    this.dmsDataProxy = systemConfig.dmsDataProxy;
    // 任务负责人默认为当前登录用户
    this.taskColumn.from.c_user_id = this.$store.state.userInfo.id;
    // 任务创建人用户名默认为当前登录用户用户名
    this.taskColumn.from.c_user_name = this.$store.state.userInfo.username;
    this.searchServerList();
  },
  methods: {
    /** 任务类型为「文件地名地址查询」时，类型字段固定为地址且不可改 */
    isGeocodingTaskKeyTypeReadonly() {
      const label = this.$getDmsTypes("yzt_task_type", this.taskColumn.from.c_type);
      return label === "文件地名地址查询";
    },
    syncKeyTypeForGeocodingTask() {
      if (!this.isGeocodingTaskKeyTypeReadonly()) {
        return;
      }
      const pr = this.taskColumn.apiFrom.apiParameterRules;
      if (!Array.isArray(pr) || !pr.includes("keyType")) {
        return;
      }
      if (!this.taskColumn.from.c_source_data) {
        this.taskColumn.from.c_source_data = {};
      }
      this.taskColumn.from.c_source_data.keyType = "地址";
    },
    includesKey(keys) {
      let hasKey = false;
      keys.forEach((key) => {
        if (this.taskColumn.apiFrom.apiParameterRules.includes(key)) {
          hasKey = true;
        }
      });
      return hasKey;
    },
    handleTCUpload(emit) {
      this.taskUploadRawFile = emit.file;
      // 上传任务文件
      let formData = new FormData();
      formData.append("file", emit.file);
      formData.append("columnId", this.taskColumn.columnId);
      formData.append("type", 0);
      formData.append("paraName", emit.file.name);
      api
        .uploadFile(formData)
        .then((res) => {
          if (res.code === 200) {
            this.taskColumn.from.c_source_file_name = emit.file.name;
            this.taskColumn.from.c_source_file = res.content;
            this.refreshTaskGeocodeColumns(emit.file);
            this.syncKeyTypeForGeocodingTask();
            ElNotification.success({
              title: "成功",
              message: "上传任务文件成功",
              offset: 80,
            });
          } else {
            this.taskUploadRawFile = null;
            ElNotification.error({
              title: "失败",
              message: "上传任务文件失败" + res.msg,
              offset: 80,
            });
          }
        })
        .catch((e) => {
          this.taskUploadRawFile = null;
          ElNotification.error({
            title: "失败",
            message: "上传任务文件失败" + e,
            offset: 80,
          });
        });
    },
    changeTaskType() {
      if (this.taskColumn.from.c_type) {
        // 先把任务类型每个字符中间都添加一个句号
        let serviceId = this.taskColumn.from.c_type.split("").join(".");
        // 根据任务类型获取任务参数
        api
          .getSimpleContentList({
            columnId: systemConfig.columnIds[5],
            states: 0,
            pageSize: 1,
            page: 0,
            search: JSON.stringify([
              {
                field: "c_scene_name",
                searchType: 1,
                content: { value: serviceId },
              },
            ]),
          })
          .then((res) => {
            if (res.code === 200) {
              let apiInfo = res.content.data[0];
              // 接口描述
              this.taskColumn.apiFrom.apiDescription = apiInfo.content;
              // 接口参数规则
              this.taskColumn.apiFrom.apiParameterRules = JSON.parse(
                apiInfo.c_input_parameter_rules
              );
              // 接口路径
              this.taskColumn.apiFrom.apiUrl = apiInfo.c_url;
              const pr = this.taskColumn.apiFrom.apiParameterRules;
              if (
                pr &&
                pr.includes("geocodeColumnKeyword") &&
                this.taskUploadRawFile
              ) {
                this.refreshTaskGeocodeColumns(this.taskUploadRawFile);
              }
              this.syncKeyTypeForGeocodingTask();
            } else {
              this.taskColumn.apiFrom.apiDescription = "";
              this.taskColumn.apiFrom.apiParameterRules = [];
              this.taskColumn.apiFrom.apiUrl = "";
              ElNotification.error({
                title: "失败",
                message: "获取任务参数失败" + res.msg,
                offset: 80,
              });
            }
          })
          .catch((e) => {
            this.taskColumn.apiFrom.apiDescription = "";
            this.taskColumn.apiFrom.apiParameterRules = [];
            ElNotification.error({
              title: "失败",
              message: "获取任务参数失败" + e,
              offset: 80,
            });
          });
        this.taskColumn.from.c_source_data = {};
        this.taskColumn.selectOptions.geocodeColumnKeyword = [];
      }
    },
    parseCsvHeaderLine(line) {
      const out = [];
      let cur = "";
      let inq = false;
      for (let i = 0; i < line.length; i++) {
        const c = line[i];
        if (c === '"') {
          inq = !inq;
          continue;
        }
        if (!inq && c === ",") {
          out.push(cur.trim());
          cur = "";
          continue;
        }
        cur += c;
      }
      out.push(cur.trim());
      return out.filter((h) => h.length > 0);
    },
    async refreshTaskGeocodeColumns(file) {
      const rules = this.taskColumn.apiFrom.apiParameterRules;
      if (!rules || !rules.includes("geocodeColumnKeyword")) {
        return;
      }
      if (!this.taskColumn.from.c_source_data) {
        this.taskColumn.from.c_source_data = {};
      }
      this.taskColumn.from.c_source_data.geocodeColumnKeyword = "";
      this.taskColumn.selectOptions.geocodeColumnKeyword = [];
      const raw = file && (file.raw || file);
      if (!raw || !raw.name) {
        return;
      }
      const name = String(raw.name).toLowerCase();
      if (name.endsWith(".zip")) {
        ElNotification.info({
          title: "数据列名",
          message: "zip 包请在「数据列名」中手动填写与各 xlsx 表头一致的列名",
          offset: 80,
        });
        return;
      }
      try {
        if (name.endsWith(".csv")) {
          const text = await raw.text();
          const firstLine = (text.split(/\r?\n/).find((l) => l.trim().length > 0) || "").trim();
          if (!firstLine) {
            return;
          }
          const headers = this.parseCsvHeaderLine(firstLine);
          this.taskColumn.selectOptions.geocodeColumnKeyword = headers.map((h) => ({
            value: h,
            label: h,
          }));
          ElNotification.success({
            title: "表头",
            message: "已解析 CSV 表头，共 " + headers.length + " 列",
            offset: 80,
          });
        } else if (name.endsWith(".xlsx") || name.endsWith(".xls")) {
          const buf = await raw.arrayBuffer();
          const wb = XLSX.read(buf, { type: "array" });
          const sheetName = wb.SheetNames[0];
          const sheet = wb.Sheets[sheetName];
          const rows = XLSX.utils.sheet_to_json(sheet, { header: 1, defval: "" });
          const headers = (rows[0] || []).map((c) => String(c).trim()).filter((c) => c.length > 0);
          this.taskColumn.selectOptions.geocodeColumnKeyword = headers.map((h) => ({
            value: h,
            label: h,
          }));
          ElNotification.success({
            title: "表头",
            message: "已解析 Excel 首行表头，共 " + headers.length + " 列",
            offset: 80,
          });
        }
      } catch (e) {
        console.error(e);
        ElNotification.warning({
          title: "表头解析",
          message: "解析表头失败，请确认上传为 CSV 或 XLSX",
          offset: 80,
        });
      }
    },
    // 搜索微功能服务
    searchServerList() {
      // 添加防抖功能，避免频繁搜索导致性能问题
      if (this.searchTimeout != null) {
        clearTimeout(this.searchTimeout);
      }
      this.searchTimeout = setTimeout(() => {
        let requestParams = {
          columnId: systemConfig.columnIds[5],
          states: 0,
          pageSize: 999,
          page: 0,
        };
        if (this.searchStr) {
          requestParams.search = JSON.stringify([
            {
              field: "title",
              searchType: 2,
              content: { value: "%" + this.searchStr + "%" },
            },
          ]);
        }
        // 获取微功能服务列表
        api
          .getSimpleContentList(requestParams)
          .then((res) => {
            if (res.code === 200) {
              this.dmsServerList = res.content.data;
              ElNotification.success({
                title: "成功",
                message: "搜索到" + this.dmsServerList.length + "条微功能服务",
                offset: 80,
              });
            } else {
              ElNotification.error({
                title: "失败",
                message: "搜索到0条微功能服务",
                offset: 80,
              });
            }
          })
          .catch((e) => {
            ElNotification.error({
              title: "失败",
              message: "搜索微功能服务失败" + e,
              offset: 80,
            });
          });
      }, 0);
    },
    // 申请使用微功能服务
    handleApply(item) {
      // 申请使用微功能服务时，先从localStorage中获取数据，填充到表单中
      let applyInfo = localStorage.getItem("wgnApplyInfo");
      if (applyInfo) {
        this.column.from = JSON.parse(applyInfo);
      }
      // 先打开弹窗，显示from表单，用户输入表单数据并提交
      this.column.from.c_interface_path = item.c_url;
      this.showFrom = true;
    },
    // 创建任务
    createTask() {
      // 打开弹窗，显示任务创建表单
      this.showTaskFrom = true;
    },
    // 提交任务创建表单
    handleTaskSubmit() {
      let that = this;
      // 表单验证
      this.$refs.taskFormRef.validate((valid) => {
        if (valid) {
          this.syncKeyTypeForGeocodingTask();
          let content = this.taskColumn.from;
          content.title =
            this.$moment(new Date()).format("YYMMDD_HHmm") +
            "_" +
            (this.taskColumn.from.c_type
              ? this.$getDmsTypes("yzt_task_type", this.taskColumn.from.c_type) + "_"
              : "") +
            content.c_name;
          content.content = this.taskColumn.apiFrom.apiDescription
            ? this.taskColumn.apiFrom.apiDescription
            : "";
          content.c_name = content.title;
          // 提交任务创建表单
          let params = {
            content: JSON.stringify(content),
            columnId: this.taskColumn.columnId,
            modelId: this.taskColumn.modelId,
          };
          api.addContent(params).then((res) => {
            if (res.code === 200) {
              that.$message({
                message: "任务创建成功",
                type: "success",
              });
              // 不直接开始任务，需要到任务管理页面启动
              that.showTaskFrom = false;
            } else {
              that.$message({
                message: "任务创建失败" + res.msg,
                type: "error",
              });
            }
          });
        } else {
          // 表单验证失败，提示用户填写完整信息
          that.$message({
            message: "请填写完整信息",
            type: "warning",
          });
        }
      });
    },
    // 提交申请使用微功能服务表单
    handleApplySubmit() {
      let that = this;
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 提交时把信息添加到localStorage中,下次打开弹窗时，从localStorage中获取数据，填充到表单中
          localStorage.setItem("wgnApplyInfo", JSON.stringify(that.column.from));
          // 标题：电话+时间
          that.column.from.title =
            that.column.from.c_unit_name +
            "_" +
            that.column.from.c_business_leader +
            "_" +
            that.column.from.c_phone;
          // 备注：申请使用微功能服务的详细信息
          let params = {
            content: JSON.stringify(that.column.from),
            columnId: that.column.columnId,
            modelId: that.column.modelId,
          };
          api.addContent(params).then((res) => {
            if (res.code === 200) {
              // 确认申请使用
              that.$message({
                message: "申请成功，请等待审核通过后工作人员专人联系，请保持电话通畅！",
                type: "success",
              });
              that.showFrom = false;
            } else {
              that.$message({
                message: "申请使用" + item.title + "失败" + res.msg,
                type: "error",
              });
            }
          });
        } else {
          // 表单验证失败，提示用户填写完整信息
          that.$message({
            message: "请填写完整信息",
            type: "warning",
          });
        }
      });
    },
    // 在线演示微功能服务
    handleOnlineDemo(item) {
      let routerPath = {};
      // 1. 解析目标路由（支持传参、命名路由等）
      if (item.c_scene_name == "view") {
        routerPath = {
          path: item.c_url,
        };
        this.$router.push(routerPath);
      } else {
        routerPath = {
          path: "/wgnSingle", // 微功能
          query: { sceneId: item.c_scene_name },
        };
        const routeData = this.$router.resolve(routerPath);
        // 2. 打开新窗口（_blank 表示新窗口）
        window.open(routeData.href, "_blank");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.wgn_box {
  width: 100vw;
  margin: 0 auto;
  background-color: #08224a;
}
.server_title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.server_title_text {
  width: calc(77vw - 200px);
  height: calc(100vh - 120px);
  background-color: #1c2631;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 0 100px;
  &_title {
    font-size: 64px;
    font-weight: bold;
    // letter-spacing: 0.5rem;
  }
  &_content {
    margin-top: 77px;
    font-size: 22px;
  }
  &_btu {
    margin-top: 77px;
    font-size: 22px;
    // letter-spacing: 0.2rem;
    color: #4095e5;
  }
}
.anchor_box {
  background: #ffffff32;
  float: left;
}
.server_list_box {
  width: 100vw;
  background-color: #00002e;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  position: relative;
  &_menu {
    position: absolute;
    top: 100px;
    left: 10px;
    z-index: 1;
  }
  &_title {
    margin: 100px 0;
    font-size: 35px;
    font-weight: bold;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      bottom: -12px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      height: 4px;
      background-image: linear-gradient(to right, #1d88f0, #00bfff);
    }
  }
  &_search {
    // margin-top: 100px;
    font-size: 25px;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: -webkit-fill-available;
    justify-content: center;
    .input-with-select {
      background: #08224a;
    }
  }
  &_table {
    margin-top: 50px;
    width: 100vw;
    &_item {
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      padding: 100px 0;

      &:nth-child(odd) {
        flex-direction: row;
      }
      &:nth-child(even) {
        flex-direction: row-reverse;
      }
      &_content {
        width: 760px;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        &_title {
          font-size: 35px;
          font-weight: bold;
          color: #fff;
        }
        &_text {
          margin-top: 35px;
          font-size: 18px;
        }
        &_button_box {
          display: flex;
          justify-content: space-evenly;
          width: 100%;
          &_item {
            margin-top: 35px;
            font-size: 20px;
            // letter-spacing: 0.2rem;
            color: #4095e5;
            border: 1px solid #4095e5;
            border-radius: 10px;
            padding: 10px 36px;
            cursor: pointer;
            &:hover {
              background-color: #4095e5;
              color: #fff;
            }
          }
        }
      }
      &_image {
        width: 690px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 30px;
        overflow: hidden;
      }
    }
  }
}
/* 顶部横幅样式 */
.banner {
  width: 100%;
  // height: calc(100vh - 120px);
  height: 552px;
  background: url("@static/images/wgn/bg.png");
  background-size: cover;
  display: flex;
  justify-content: right;
  align-items: start;
  position: relative;
  overflow: hidden;

  .banner-content {
    position: relative;
    z-index: 2;
    text-align: right;
    max-width: 500px;
    padding: 0 10%;
    justify-content: right;
    display: grid;
    padding-top: 100px;
  }

  .banner-title {
    font-size: 56px;
    font-weight: bold;
    // letter-spacing: 0.5rem;
    // margin-bottom: 20px;
    color: #ffffff;
    text-align: right;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  }

  .banner-description {
    font-size: 16px;
    // line-height: 1.8;
    margin: 20px 0px;
    text-align: left;
    color: rgba(255, 255, 255, 0.9);
  }

  .enter-button {
    padding: 12px 36px;
    font-size: 18px;
    border-radius: 10px;
    background-color: #1890ff;
    border: none;
    transition: all 0.3s ease;

    &:hover {
      background-color: #40a9ff;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(24, 144, 255, 0.4);
    }
  }
}
</style>