diff --git a/back/src/views/modules/ability/IntegratedServices.vue b/back/src/views/modules/ability/IntegratedServices.vue
new file mode 100644
index 00000000..dcff9365
--- /dev/null
+++ b/back/src/views/modules/ability/IntegratedServices.vue
@@ -0,0 +1,450 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-ability__bsabilityai">
+      <el-form :inline="true" :model="dataForm">
+        <el-form-item>
+          <el-input
+            v-model="dataForm.name"
+            placeholder="名称"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="getDataList2(dataForm.name)">{{
+            $t("query")
+          }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="info" @click="exportHandle()">{{
+            $t("export")
+          }}</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            v-if="$hasPermission('ability:bsabilityai:save')"
+            type="primary"
+            @click="addOrUpdateHandleServe()"
+            >挂接</el-button
+          >
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            v-if="$hasPermission('ability:bsabilityai:delete')"
+            type="danger"
+            @click="deleteHandle2()"
+            >{{ $t("deleteBatch") }}</el-button
+          >
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="reset">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table
+        v-loading="dataListLoading"
+        :data="dataList"
+        border
+        @selection-change="dataListSelectionChangeHandle"
+        style="width: 100%"
+        :height="qp ? '810px' : '650px'"
+      >
+        <el-table-column
+          type="selection"
+          header-align="center"
+          align="center"
+          width="50"
+        ></el-table-column>
+        <el-table-column
+          prop="name"
+          label="应用名称"
+          header-align="center"
+          align="center"
+        ></el-table-column>
+
+        <el-table-column
+          v-for="(item, index) in dataList[0].infoList"
+          :key="index"
+          :label="item.attrType"
+          header-align="center"
+          align="center"
+          :show-overflow-tooltip="true"
+        >
+          <template slot-scope="scope">
+            {{ findValue(scope.row.infoList, item.attrType) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          :label="$t('handle')"
+          fixed="right"
+          header-align="center"
+          align="center"
+          width="94"
+          right="0"
+        >
+          <template slot-scope="scope">
+            <el-button
+              v-if="$hasPermission('ability:bsabilityai:update')"
+              type="text"
+              size="small"
+              @click="UpdateHandle(scope.row)"
+              >{{ $t("update") }}</el-button
+            >
+            <el-button
+              v-if="$hasPermission('ability:bsabilityai:delete')"
+              type="text"
+              size="small"
+              @click="deleteHandle2(scope.row.id)"
+              >{{ $t("delete") }}</el-button
+            >
+            <el-button type="text" size="small" @click="showDetail(scope.row)"
+              >展示</el-button
+            >
+            <el-button type="text" size="small" @click="showDocument(scope.row)"
+              >开发文档</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="applyAndAssembly(scope.row)"
+              >应用与组件</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="applyAndDataResource(scope.row)"
+              >应用与数据资源</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="applyAndProject(scope.row)"
+              >应用与项目</el-button
+            >
+            <el-button
+              type="text"
+              size="small"
+              @click="applyAndInfrastructure(scope.row)"
+              >应用与基础设施</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination
+        :current-page="page"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="limit"
+        :total="Number(total)"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="pageSizeChangeHandle"
+        @current-change="pageCurrentChangeHandle"
+      >
+      </el-pagination>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update
+        :disabled="disabled"
+        v-if="addOrUpdateVisible"
+        ref="addOrUpdate"
+        @refreshDataList="getDataList"
+      ></add-or-update>
+      <relate-application
+        v-if="relateApplicationResourceVisible"
+        ref="relateApplication"
+        :relateInfo="relationData"
+        :nameArray="topNameArray"
+        @isShowRelatePopup="handleIsShowRelatePopupApply"
+      ></relate-application>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from "@/mixins/view-module";
+import AddOrUpdate from "./bsabilityservice-add-or-update";
+import dictionaries from "@/utils/dictionaries";
+import RelateApplication from "./bsabilityai-relate-application.vue";
+import qs from "qs";
+import { type } from "os";
+export default {
+  mixins: [mixinViewModule],
+  data() {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: "/resource/page",
+        getDataListIsPage: true,
+        exportURL: "/ability/bsabilityai/export",
+        deleteURL: "/resource/delete",
+        deleteIsBatch: true,
+      },
+      disabled: false,
+      sceneArr: dictionaries.sceneArr,
+      fieldArr: dictionaries.fieldArr,
+      shareFormArr: dictionaries.shareFormArr,
+      dataForm: {
+        name: "",
+        creator: "",
+        selectType: 0,
+        delFlag: 0,
+        type: "应用资源",
+      },
+      qp: false,
+      relateApplicationResourceVisible: false,
+      relationData: {}, //打开穿梭框时传递的参数
+      topNameArray: [], //
+    };
+  },
+  watch: {},
+  components: {
+    AddOrUpdate,
+    RelateApplication,
+  },
+  created() {
+    this.dataForm.name = "";
+    this.dataForm.type = "应用资源";
+  },
+  mounted() {
+    window.addEventListener("resize", this.a);
+    this.fullScreen();
+  },
+  methods: {
+    reset() {
+      this.$http
+        .get(
+          this.mixinViewModuleOptions.getDataListURL +
+            "?" +
+            qs.stringify({
+              // order: this.order,
+              // orderField: this.orderField,
+              // type: '组件服务',
+              page: 1,
+              selectType: 0,
+              limit: 10,
+              delFlag: 0,
+              creator: "",
+              type: "应用资源",
+              name: "",
+            })
+        )
+        .then(({ data: res }) => {
+          this.dataForm.name = "";
+          if (res.code !== 0) {
+            this.dataList = [];
+            this.total = 0;
+            return this.$message.error(res.msg);
+          }
+          this.dataList = this.mixinViewModuleOptions.getDataListIsPage
+            ? res.data.list
+            : res.data;
+          this.total = this.mixinViewModuleOptions.getDataListIsPage
+            ? res.data.total
+            : 0;
+          if (this.mixinViewModuleOptions.requestCallback) {
+            this.mixinViewModuleOptions.requestCallback(res.data);
+          }
+          this.dataListLoading = false;
+        })
+        .catch(() => {
+          this.dataListLoading = false;
+        });
+    },
+    showDetail(val) {
+      this.addOrUpdateVisible = true;
+      this.disabled = false;
+      this.$nextTick(() => {
+        this.$refs.addOrUpdate.UpdateState = false;
+        this.$refs.addOrUpdate.dataFormShowDetails = val;
+        this.$refs.addOrUpdate.init();
+      });
+      this.disabled = true;
+    },
+    showDocument(val) {
+      console.log(val);
+      window.open(
+        window.SITE_CONFIG.frontUrl + "?id=" + val.id + "&&type=" + val.type,
+        "_blank"
+      );
+    },
+    findValue(list, type) {
+      const found = list.find((item) => item.attrType === type);
+      if (found) {
+        return found.attrValue;
+      } else {
+        return "暂无数据";
+      }
+    },
+    getDataList2(names) {
+      if (names != null) {
+        this.$http
+          .get(
+            this.mixinViewModuleOptions.getDataListURL +
+              "?" +
+              qs.stringify({
+                // order: this.order,
+                // orderField: this.orderField,
+                // type: '组件服务',
+                pageNum: 1,
+                pageSize: this.limit,
+                type: "应用资源",
+                creator: "",
+                selectType: 0,
+                delFlag: 0,
+                name: names,
+              })
+          )
+          .then(({ data: res }) => {
+            if (res.code !== 0) {
+              this.dataList = [];
+              this.total = 0;
+              return this.$message.error(res.msg);
+            }
+            if (res.data.list.length !== 0) {
+              this.dataList = res.data.list;
+              this.total = this.mixinViewModuleOptions.getDataListIsPage
+                ? res.data.total
+                : 0;
+              if (this.mixinViewModuleOptions.requestCallback) {
+                this.mixinViewModuleOptions.requestCallback(res.data);
+              }
+              this.dataListLoading = false;
+            } else {
+              this.$message.error("未查询到相关信息");
+              this.reset();
+            }
+          })
+          .catch(() => {
+            this.dataListLoading = false;
+          });
+      } else {
+        this.$message.error("查询不能输入为空");
+      }
+    },
+    fullScreen() {
+      if (window.outerHeight === screen.availHeight) {
+        if (window.outerWidth === screen.availWidth) {
+          console.log(
+            "全屏1",
+            window.outerHeight,
+            screen.availHeight,
+            window.outerWidth,
+            screen.availWidth
+          );
+          this.qp = false;
+        } else {
+          console.log(
+            "不是全屏2",
+            window.outerHeight,
+            screen.availHeight,
+            window.outerWidth,
+            screen.availWidth
+          );
+          this.qp = true;
+        }
+      } else {
+        console.log(
+          "不是全屏3",
+          window.outerHeight,
+          screen.availHeight,
+          window.outerWidth,
+          screen.availWidth
+        );
+        this.qp = true;
+      }
+    },
+    //应用与组件
+    applyAndAssembly(val) {
+      console.log("vvvv", val);
+      //根据id和类型查询已关联的组件，将id,type和查出来的数据传递给组件
+      let type = "组件服务";
+      let id = val.id;
+      this.$http
+        .get(`/dataResourceRel/queryResourceRelByKeyId`, {
+          params: {
+            keyId: id,
+            type: type,
+            referenceName: "",
+          },
+        })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          console.log("rrrrressssz", res.data);
+          this.relateApplicationResourceVisible = true;
+          this.relationData = {
+            id: id,
+            linkType: "1",
+            responseData: res.data,
+          };
+          this.topNameArray = ["未关联组件名称", "已关联组件名称"];
+          console.log(" this.relationData", this.relationData);
+          //将数据传递给引入的组件
+        });
+    },
+    //应用与数据资源
+    applyAndDataResource(val) {
+      console.log("数据资源");
+    },
+    //应用与项目
+    applyAndProject(val) {
+      let type = "项目";
+      let id = val.id;
+      this.$http
+        .get(`/dataResourceRel/queryResourceRelByKeyId`, {
+          params: {
+            keyId: id,
+            type: type,
+            referenceName: "",
+          },
+        })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          console.log("rrrrressssx", res.data);
+          this.relateApplicationResourceVisible = true;
+          this.relationData = {
+            id: id,
+            linkType: "1",
+            responseData: res.data,
+          };
+          this.topNameArray = ["未关联项目名称", "已关联项目名称"];
+          //将数据传递给引入的组件
+        });
+    },
+    //应用与基础设施
+    applyAndInfrastructure(val) {
+      let type = "基础设施";
+      let id = val.id;
+      this.$http
+        .get(`/dataResourceRel/queryResourceRelByKeyId`, {
+          params: {
+            keyId: id,
+            type: type,
+            referenceName: "",
+          },
+        })
+        .then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg);
+          }
+          console.log("rrrrressssj", res.data);
+          this.relateApplicationResourceVisible = true;
+          this.relationData = {
+            id: id,
+            linkType: "1",
+            responseData: res.data,
+          };
+          this.topNameArray = ["未关联基础设施名称", "已关联基础设施名称"];
+          //将数据传递给引入的组件
+        });
+    },
+    // 是否展示关联应用弹窗
+    handleIsShowRelatePopupApply(type) {
+      this.relateApplicationResourceVisible = type;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.el-tooltip__popper {
+  max-width: 50%;
+}
+</style>