qp_onemap_ui/src/views/Wgn.vue

<template>
  <div class="wgn_box">
    <el-backtop target=".wgn_box" :right="20" :bottom="70" />
    <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>
    </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>
    </div>
  </div>
</template>

<script>
import wgn from "@/api/wgn";
import api from "@/api/content";
export default {
  name: "微功能服务",
  data() {
    return {
      // 搜索关键词
      searchStr: "",
      // 微功能服务列表
      dmsServerList: [],
      // DMS数据代理地址
      dmsDataProxy: "",
      // 是否显示申请使用微功能服务的表单弹窗
      showFrom: 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: "",
        },
      },
      // 搜索微功能服务的防抖定时器
      searchTimeout: null,
    };
  },
  mounted() {
    this.dmsDataProxy = systemConfig.dmsDataProxy;
    this.searchServerList();
  },
  methods: {
    // 搜索微功能服务
    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 + "%" },
            },
          ]);
        }
        // 获取微功能服务列表
        wgn
          .getDmsData(requestParams)
          .then((res) => {
            if (res.code === 200) {
              this.dmsServerList = res.content.data;
              this.$message({
                message: "搜索到" + this.dmsServerList.length + "条微功能服务",
                type: "success",
              });
            } else {
              this.$message({
                message: "搜索到0条微功能服务",
                type: "warning",
              });
            }
          })
          .catch((e) => {
            this.$message({
              message: "搜索微功能服务失败" + e,
              type: "error",
            });
          });
      }, 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;
    },
    // 提交申请使用微功能服务表单
    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;
  }
}
.anchor_box {
  background: #ffffff32;
  float: left;
}
.server_list_box {
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.15);
  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: #4095e5;
        }
        &_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;
      }
    }
  }
}
</style>