河北住建厅二次开发集成方式、集成操作步骤和集成结果提交。

src/components/SecondaryDevelopment/GraphicsDrawingTool.vue

@@ -1,13 +1,71 @@
 <template>
-  
+  <el-container :class="'content'">
+    <el-header>
+      <el-button type="primary" class="add-item" @click="handleDownload">
+        下载工具包
+      </el-button>
+    </el-header>
+    <el-main>
+      <iframe :src="src" frameborder="0"></iframe>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
+// 图形绘制工具
 export default {
+  name: "Home",
+  components: {},
+  data() {
+    return {
+      src: "./static/package/draw/dist/index.html",
+    };
+  },
+  created() {},
 
-}
+  methods: {
+    handleDownload() {
+      let item = systemConfig.plugins[1];
+      const elink = document.createElement("a");
+      elink.href = item.src;
+      elink.setAttribute("download", item.name);
+      elink.style.display = "none";
+      document.body.appendChild(elink);
+      setTimeout(() => {
+        elink.click();
+        document.body.removeChild(elink);
+      }, 66);
+    },
+  },
+
+  computed: {},
+  watch: {},
+};
 </script>
 
 <style lang="less" scoped>
+.content {
+  width: calc(100% - 20px);
+  margin-left: 20px;
+  height: 100%;
+  .el-header {
+    background: #ffffff;
+    margin-bottom: 20px;
+    padding-top: 10px;
+  }
 
-</style>
+  .el-main {
+    background: #ffffff;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    position: relative;
+    border-radius: 5px;
+    padding: 0px 0px;
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/components/SecondaryDevelopment/IntegratedDescription.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="box">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>集成方式</span>
+      </div>
+      <div>
+        手动落图工具和图形绘制工具都是通过iframe引入。 <br/>
+        测量工具引入js包并操作方法实现。
+      </div>
+    </el-card>
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>集成操作步骤</span>
+      </div>
+      <div>
+        <el-tabs v-model="activeName">
+          <el-tab-pane label="手动落图工具" name="collectdata">
+            1、首先在页面创建一个iframe标签，src对应的是collectdata工具包的index.html页面。 例：
+            <p class="code">{{ code1 }}</p>
+            2、其次在页面中创建两个按钮【绘点、绘线】并创建点击事件，点击事件分别修改src参数type，type分别对应【1、2】。 例：
+            <p class="code">{{ code2 }}</p>
+          </el-tab-pane>
+          <el-tab-pane label="图形绘制工具" name="second"
+            >1、在页面创建一个iframe标签，src对应的是draw工具包的index.html页面。 例：
+            <p class="code">{{ code3 }}</p></el-tab-pane
+          >
+          <el-tab-pane label="测量工具" name="measure">
+            1、首先在页面中新建map对象,并初始化globalVariable.map对象。 例：
+            <p class="code">{{ code4 }}</p>
+            2、其次引用measure工具包，并实例化对象。 例：
+            <p class="code">{{ code5 }}</p>
+            3、最后在页面中创建两个按钮【测距、测面】并创建点击事件，点击事件分别触发测距测面事件。 例：
+            <p class="code">{{ code6 }}</p>
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </el-card>
+    
+  </div>
+</template>
+<script>
+// 集成说明
+export default {
+  name: "",
+  components: {},
+  data() {
+    return {
+      activeName: "collectdata",
+      code1: `<iframe
+      src="./static/package/collectdata/dist/index.html"
+      frameborder="0"
+    ></iframe>`,
+      code2: `<iframe
+      src="./static/package/collectdata/dist/index.html?type=1"
+      frameborder="0"
+    ></iframe>
+    <iframe src="./static/package/collectdata/dist/index.html?type=2" frameborder="0"></iframe>`,
+      code3: `<iframe
+      src="./static/package/draw/dist/index.html"
+      frameborder="0"
+    ></iframe>`,
+      code4: `let map = new Map({ 
+        target: "map",
+        logo: false, 
+        controls: defaults({ attribution: false, zoom: false, rotate: false, }), 
+        view: view, 
+        }); 
+    globalVariable.map = map; `,
+      code5: `import measureTool from"@/utils/ol_plugins/measure"; 
+    this.measure = new measureTool(globalVariable.map);`,
+      code6: `this.measure.start("line");
+    this.measure.start("area");`
+    };
+  },
+  created() {},
+
+  methods: {},
+
+  computed: {},
+  watch: {}
+};
+</script>
+
+<style lang="less" scoped>
+.box {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  align-content: center;
+  flex-wrap: wrap;
+  .box-card {
+    width: calc(50% - 15px);
+    height: calc(100vh - 400px);
+    font-size: 18px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: #4c4c4c;
+    line-height: 24px;
+    div:nth-child(1) {
+      font-weight: bold;
+    }
+    .clearfix span {
+      font-size: 20px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #258df5;
+      line-height: 40px;
+    }
+    .code {
+      text-indent: 36px;
+      font-size: 18px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #808080;
+      line-height: 32px;
+    }
+  }
+}
+</style>

src/components/SecondaryDevelopment/ManualDrawingTool.vue

@@ -1,13 +1,73 @@
 <template>
-  
+  <el-container :class="'content'">
+    <el-header>
+      <el-button type="primary" class="add-item" @click="handleAddPoint"> 激活绘点 </el-button>
+      <el-button type="primary" class="add-item" @click="handleAddLine"> 激活绘线 </el-button>
+      <el-button type="primary" class="add-item" @click="handleDownload"> 下载工具包 </el-button>
+    </el-header>
+    <el-main>
+      <iframe :src="loadSrc" frameborder="0"></iframe>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
+// 手动落图工具
 export default {
-
-}
+  data() {
+    return {
+      loadSrc: "",
+      src: "./static/package/collectdata/dist/index.html"
+    };
+  },
+  mounted() {
+    this.loadSrc = this.src;
+  },
+  methods: {
+    handleAddPoint() {
+      this.loadSrc = this.src + "?type=1";
+    },
+    handleAddLine() {
+      this.loadSrc = this.src + "?type=2";
+    },
+    handleDownload() {
+      let item = systemConfig.plugins[2];
+      const elink = document.createElement("a");
+      elink.href = item.src;
+      elink.setAttribute("download", item.name);
+      elink.style.display = "none";
+      document.body.appendChild(elink);
+      setTimeout(() => {
+        elink.click();
+        document.body.removeChild(elink);
+      }, 66);
+    }
+  }
+};
 </script>
 
 <style lang="less" scoped>
+.content {
+  width: calc(100% - 20px);
+  margin-left: 20px;
+  .el-header {
+    background: #ffffff;
+    margin-bottom: 20px;
+    padding-top: 10px;
+  }
 
-</style>
+  .el-main {
+    background: #ffffff;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    position: relative;
+    border-radius: 5px;
+    padding: 0px 0px;
+    iframe {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/components/SecondaryDevelopment/MeasureTool.vue

@@ -1,13 +1,92 @@
 <template>
-  
+  <el-container :class="'content'">
+    <el-header>
+      <el-button type="primary" class="add-item" @click="handleDownload">
+        下载工具包
+      </el-button>
+    </el-header>
+    <el-main>
+      <Map ref="mainMap" />
+      <Tool></Tool>
+      <Footer :lat="lat" :lon="lon" :zoom="zoom"></Footer>
+    </el-main>
+  </el-container>
 </template>
 
 <script>
+// 测量工具
 export default {
+  name: "Home",
+  components: {
+    Map: () => import("../Utilities/MeasureTool/Map.vue"),
+    Tool: () => import("../Utilities/MeasureTool/Tool.vue"),
+    Footer: () => import("../Utilities/MeasureTool/Footer.vue")
+  },
+  data() {
+    return {
+      select: 1,
+      keyword: "",
+      lon: 0,
+      lat: 0,
+      zoom: 6
+    };
+  },
+  created() {},
 
-}
+  mounted() {},
+  methods: {
+    handleDownload() {
+      let item = systemConfig.plugins[0];
+      const elink = document.createElement("a");
+      elink.href = item.src;
+      elink.setAttribute("download", item.name);
+      elink.style.display = "none";
+      document.body.appendChild(elink);
+      setTimeout(() => {
+        elink.click();
+        document.body.removeChild(elink);
+      }, 66);
+    }
+  },
+
+  computed: {
+    lonlat() {
+      return this.$store.state.mouseLocation;
+    },
+    zoomNum() {
+      return this.$store.state.nowZoom;
+    }
+  },
+  watch: {
+    lonlat(newVal) {
+      this.lon = newVal[0];
+      this.lat = newVal[1];
+    },
+    zoomNum(newVal) {
+      this.zoom = newVal;
+    }
+  }
+};
 </script>
 
 <style lang="less" scoped>
+.content {
+  width: calc(100% - 20px);
+  margin-left: 20px;
+  .el-header {
+    background: #ffffff;
+    margin-bottom: 20px;
+    padding-top: 10px;
+  }
 
-</style>
+  .el-main {
+    background: #ffffff;
+    overflow: hidden;
+    box-sizing: border-box;
+
+    position: relative;
+    border-radius: 5px;
+    padding: 0px 0px;
+  }
+}
+</style>

src/components/Utilities/GraphicsDrawingTool.vue

@@ -12,6 +12,7 @@
 </template>
 
 <script>
+// 图形绘制工具
 export default {
   name: "Home",
   components: {},

src/components/Utilities/ManualDrawingTool.vue

@@ -18,6 +18,7 @@
 </template>
 
 <script>
+// 手动落图工具
 export default {
   data() {
     return {
@@ -75,4 +76,4 @@ export default {
     }
   }
 }
-</stylelang=>
+</style>

src/components/Utilities/MeasureTool.vue

@@ -13,6 +13,7 @@
 </template>
 
 <script>
+// 测量工具
 export default {
   name: "Home",
   components: {

src/components/Utilities/MeasureTool/Footer.vue

@@ -4,7 +4,7 @@
       lat
     }}</span>
     当前地图缩放级别：<span>{{ zoom }}</span>
-    <span class="fuzhi">复制</span>
+    <!-- <span class="fuzhi">复制</span> -->
   </div>
 </template>
 

src/main.js

@@ -14,8 +14,8 @@ Vue.use(VueStorage)
 
 Vue.config.productionTip = false;
 Vue.prototype.$elDatePickerAlign = "right";
-let requestCode = systemConfig.requestCode;
 Vue.prototype.$checkRequestCode = (result) => {
+  let requestCode = systemConfig.requestCode;
   return new Promise((resolve, reject) => {
     if (result.code == 212) {
       let obj = this.getParams();

src/store/index.js

@@ -253,6 +253,11 @@ export default new Vuex.Store({
             name: "MeasureTool",
             index: "3", permission: 83,
           },
+          {
+            label: "集成说明",
+            name: "IntegratedDescription",
+            index: "4", permission: 84,
+          },
         ],
       },
       {
@@ -282,7 +287,7 @@ export default new Vuex.Store({
     layerList: [],
     iconList: [],
     mouseLocation: [0, 0],
-    nowZoom: 0
+    nowZoom: 6
   },
   getters: {
     getToken: function (state) {

src/views/Home.vue

@@ -5,11 +5,7 @@
         <div class="banner">
           <div class="login_content">
             <div class="before_login" v-if="!loginStatus">
-              用户名：<el-input
-                v-model="username"
-                placeholder="请输入用户名"
-              ></el-input>
-              密码：<el-input
+              用户名：<el-input v-model="username" placeholder="请输入用户名"></el-input> 密码：<el-input
                 v-model="password"
                 placeholder="请输入密码"
                 show-password
@@ -24,18 +20,8 @@
         </div>
         <div class="func">
           <div>
-            <el-menu
-              :default-active="showMenuIndex"
-              class="el-menu-demo"
-              mode="horizontal"
-              @select="handleMenuSelect"
-            >
-              <el-menu-item
-                v-for="(item, index) in funcArr"
-                :key="index"
-                :index="item.index"
-                >{{ item.label }}</el-menu-item
-              >
+            <el-menu :default-active="showMenuIndex" class="el-menu-demo" mode="horizontal" @select="handleMenuSelect">
+              <el-menu-item v-for="(item, index) in funcArr" :key="index" :index="item.index">{{ item.label }}</el-menu-item>
             </el-menu>
           </div>
         </div>
@@ -45,55 +31,55 @@
           <ComprehensiveDisplay
             v-if="showIndex == '1'"
             v-bind="{
-              index: 1,
+              index: 1
             }"
           ></ComprehensiveDisplay>
           <DataLayer
             v-if="showIndex == '2'"
             v-bind="{
-              index: 2,
+              index: 2
             }"
           ></DataLayer>
           <DataQualityInspection
             v-if="showIndex == '3'"
             v-bind="{
-              index: 3,
+              index: 3
             }"
           ></DataQualityInspection>
           <DataAccess
             v-if="showIndex == '4'"
             v-bind="{
-              index: 4,
+              index: 4
             }"
           ></DataAccess>
           <DataDisplay
             v-if="showIndex == '5'"
             v-bind="{
-              index: 5,
+              index: 5
             }"
           ></DataDisplay>
           <DataServices
             v-if="showIndex == '6'"
             v-bind="{
-              index: 6,
+              index: 6
             }"
           ></DataServices>
           <Utilities
             v-if="showIndex == '7'"
             v-bind="{
-              index: 7,
+              index: 7
             }"
           ></Utilities>
           <SecondaryDevelopment
             v-if="showIndex == '8'"
             v-bind="{
-              index: 8,
+              index: 8
             }"
           ></SecondaryDevelopment>
           <SystemManagement
             v-if="showIndex == '9'"
             v-bind="{
-              index: 9,
+              index: 9
             }"
           ></SystemManagement>
         </el-main>
@@ -115,19 +101,12 @@ export default {
       userInfo: null,
       requestCode: systemConfig.requestCode,
       permissionUnlogin: [
-        10, 
-        20, 21, 22, 
-        30, 31, 32, 
-        40, 41, 42, 43, 44, 
-        50, 51, 52, 
-        60, 61, 62,63, 64, 
-        70, 71, 72, 73, 74, 75, 
-        80, 81, 82, 83, 
-        90, 91, 92,
+        10, 20, 21, 22, 30, 31, 32, 40, 41, 42, 43, 44, 50, 51, 52, 60, 61, 62, 63, 64, 70, 71, 72, 73, 74, 75, 80, 81, 82, 83,
+        84, 90, 91, 92
       ],
       funcArr: null,
       showMenuIndex: "1",
-      showIndex: "1",
+      showIndex: "1"
     };
   },
   components: {
@@ -139,7 +118,7 @@ export default {
     DataServices: () => import("@/views/DataServices.vue"),
     Utilities: () => import("@/views/Utilities.vue"),
     SecondaryDevelopment: () => import("@/views/SecondaryDevelopment.vue"),
-    SystemManagement: () => import("@/views/SystemManagement.vue"),
+    SystemManagement: () => import("@/views/SystemManagement.vue")
     // 综合展示
     // ComprehensiveDisplay
     // 数据图层
@@ -169,8 +148,8 @@ export default {
       this.userInfo = this.$store.getters.getUserInfo;
       this.loginStatus = true;
       this.permissionFiltering([
-        10, 20, 21, 30, 31, 32, 40, 41, 42, 43, 44, 50, 51, 52, 60, 61, 62, 63,
-        64, 70, 71, 72, 73, 74, 75, 80, 81, 82, 83, 90, 91, 92,
+        10, 20, 21, 30, 31, 32, 40, 41, 42, 43, 44, 50, 51, 52, 60, 61, 62, 63, 64, 70, 71, 72, 73, 74, 75, 80, 81, 82, 83, 90,
+        91, 92
       ]);
     } else {
       this.permissionFilteringUnlogin();
@@ -190,7 +169,7 @@ export default {
     loginFunc() {
       let that = this;
       login(this.username, this.password)
-        .then((result) => {
+        .then(result => {
           that.loginStatus = true;
           that.userInfo = result.content;
           that.$store.commit("setUserInfo", result.content);
@@ -199,10 +178,10 @@ export default {
           // 页面刷新
           location.reload();
         })
-        .catch((err) => {
+        .catch(err => {
           that.$message({
             type: "error",
-            message: err,
+            message: err
           });
         });
     },
@@ -219,9 +198,7 @@ export default {
 
     // 权限筛选
     permissionFiltering(permissionArr) {
-      let list = JSON.parse(
-        JSON.stringify(this.$store.getters.getMenuListTotal)
-      );
+      let list = JSON.parse(JSON.stringify(this.$store.getters.getMenuListTotal));
       list = list.filter(function (item) {
         if (permissionArr.indexOf(item.permission) > -1) {
           let children = null;
@@ -259,11 +236,7 @@ export default {
           let obj = that.getParams();
           let autologin1 = obj.autologin;
           let autologin2 = localStorage.getItem("autologin");
-          if (
-            autologin1 == 1 ||
-            autologin2 != null ||
-            autologin2 != undefined
-          ) {
+          if (autologin1 == 1 || autologin2 != null || autologin2 != undefined) {
             that.loginFunc();
           } else {
             that.$store.commit("setToken", "");
@@ -273,12 +246,12 @@ export default {
           let code = that.requestCode[result.code];
           if (code == 206 || code == 207 || code == 208) {
             this.$router.push({
-              path: "/error",
+              path: "/error"
             });
           } else {
             that.$message({
               type: "warning",
-              message: that.requestCode[result.code],
+              message: that.requestCode[result.code]
             });
           }
         }
@@ -303,10 +276,10 @@ export default {
             this.$checkRequestCode(result);
           }
         })
-        .catch((err) => {
+        .catch(err => {
           that.$message({
             type: "error",
-            message: err,
+            message: err
           });
         });
     },
@@ -315,7 +288,7 @@ export default {
       let that = this;
       icon
         .getIcon()
-        .then((result) => {
+        .then(result => {
           if (result.code == 200) {
             that.$store.commit("setIconList", result.content);
           } else {
@@ -323,14 +296,14 @@ export default {
             this.$checkRequestCode(result);
           }
         })
-        .catch((err) => {
+        .catch(err => {
           that.$message({
             type: "error",
-            message: err,
+            message: err
           });
         });
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -390,7 +363,7 @@ export default {
             }
             &::placeholder {
               color: #ffffff;
-            } 
+            }
           }
           /deep/ .el-input__clear {
             line-height: 30px;

src/views/SecondaryDevelopment.vue

@@ -5,13 +5,14 @@
         v-bind="{
           showMenuIndex: showMenuIndex,
           menuList: menuList,
-          handleMenuSelect: handleMenuSelect,
+          handleMenuSelect: handleMenuSelect
         }"
       ></Aside>
       <el-main>
         <ManualDrawingTool v-if="showIndex == '1'"></ManualDrawingTool>
         <GraphicsDrawingTool v-if="showIndex == '2'"></GraphicsDrawingTool>
-        <MeasureTool v-if="showIndex == '2'"></MeasureTool>
+        <MeasureTool v-if="showIndex == '3'"></MeasureTool>
+        <IntegratedDescription v-if="showIndex == '4'"></IntegratedDescription>
       </el-main>
     </el-container>
   </div>
@@ -21,29 +22,26 @@
 export default {
   props: {
     index: {
-      type: Number,
-    },
+      type: Number
+    }
   },
   data() {
     return {
       menuList: null,
       showIndex: "1",
-      showMenuIndex: "1",
+      showMenuIndex: "1"
     };
   },
   components: {
     Aside: () => import("@/components/Currency/Aside.vue"),
-    ManualDrawingTool: () =>
-      import("@/components/SecondaryDevelopment/ManualDrawingTool.vue"),
-    GraphicsDrawingTool: () =>
-      import("@/components/SecondaryDevelopment/GraphicsDrawingTool.vue"),
-    MeasureTool: () =>
-      import("@/components/SecondaryDevelopment/MeasureTool.vue"),
+    ManualDrawingTool: () => import("@/components/SecondaryDevelopment/ManualDrawingTool.vue"),
+    GraphicsDrawingTool: () => import("@/components/SecondaryDevelopment/GraphicsDrawingTool.vue"),
+    MeasureTool: () => import("@/components/SecondaryDevelopment/MeasureTool.vue"),
+    IntegratedDescription: () => import("@/components/SecondaryDevelopment/IntegratedDescription.vue")
   },
   created() {
     let that = this;
-    this.menuList =
-      this.$store.getters.getMenuListTotal[this.index - 1].children;
+    this.menuList = this.$store.getters.getMenuListTotal[this.index - 1].children;
     t("", this.menuList);
     function t(beforeindex, arr) {
       if (beforeindex == "") {
@@ -62,8 +60,8 @@ export default {
   methods: {
     handleMenuSelect(index) {
       this.showIndex = index;
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -78,4 +76,4 @@ export default {
     }
   }
 }
-</style>
+</style>