时空服务预览

src/components/apass-dialog.vue

@@ -4,7 +4,6 @@
       class="apass_dialog"
       :visible.sync="showDialog"
       :width="width"
-      top="25vh"
     >
       <h3 class="dialog_title" slot="title">
         <span v-text="title || '提示'"></span>

src/components/service-header.vue

@@ -2,77 +2,97 @@
   <div class="info_logo">
     <div class="logo">
       <img :src="data.url" alt="" />
+      <!--  TODO: 时空服务预览 -->
+      <map-view v-if="data.isMap" :id="data.id"></map-view>
     </div>
     <div class="info">
       <p class="info_title">
         <span>{{ data.name }}</span>
-        <span class="bs" v-if="data.aqdetail" @click="subevent(0)"
-          >一键部署</span
-        >
-        <span class="info_fix" v-if="data.fxdetail" @click="subevent(1)"
-          >我要编辑</span
-        >
-        <span class="info_fix" v-if="data.yydebugger" @click="subevent(5)"
-          >应用调试</span
-        >
+        <span class="bs" v-if="data.aqdetail" @click="subevent(0)">
+          一键部署
+        </span>
+        <span class="info_fix" v-if="data.fxdetail" @click="subevent(1)">
+          我要编辑
+        </span>
+        <span class="info_fix" v-if="data.yydebugger" @click="subevent(5)">
+          应用调试
+        </span>
         <span
           class="right gap"
           v-if="data.yydetail || data.xxdetail || data.yydev"
-          >|</span
         >
+          |
+        </span>
         <span
           class="right underline"
           v-if="data.xxdetail"
-          @click="subevent(2,get_strd(data.xxdetail)[0])"
-          :style="get_strd(data.xxdetail)[0]?{backgroundColor:'#ccc',color:'#e6ebfe'}:''"
-          :title="get_strd(data.xxdetail)[1]=='申请下线'?'申请下线至开发者应用':'申请上线至平台应用'"
-          >{{ get_strd(data.xxdetail)[1] }}</span
+          @click="subevent(2, get_strd(data.xxdetail)[0])"
+          :style="
+            get_strd(data.xxdetail)[0]
+              ? { backgroundColor: '#ccc', color: '#e6ebfe' }
+              : ''
+          "
+          :title="
+            get_strd(data.xxdetail)[1] == '申请下线'
+              ? '申请下线至开发者应用'
+              : '申请上线至平台应用'
+          "
         >
+          {{ get_strd(data.xxdetail)[1] }}
+        </span>
         <span
           class="right undersell"
           v-if="data.yydetail"
-          :style="get_strd(data.yydetail)[0]?{backgroundColor:'#ccc',color:'#e6ebfe'}:''"
-          @click="subevent(3,get_strd(data.yydetail)[0])"
-          >{{ get_strd(data.yydetail)[1] }}</span
+          :style="
+            get_strd(data.yydetail)[0]
+              ? { backgroundColor: '#ccc', color: '#e6ebfe' }
+              : ''
+          "
+          @click="subevent(3, get_strd(data.yydetail)[0])"
         >
+          {{ get_strd(data.yydetail)[1] }}
+        </span>
         <span
           class="right undersell undermy"
           v-if="data.bsdetail"
           @click="subevent(4)"
-          >申请密钥</span
         >
+          申请密钥
+        </span>
         <span
           class="info_fix"
           v-if="data.fixed"
           @click="goto_page(data.fixedurl)"
-          >我要修改</span
-        >
-        <span class="info_fix" v-if="data.yydev" @click="subevent(6)"
-          >应用开发</span
         >
+          我要修改
+        </span>
+        <span class="info_fix" v-if="data.yydev" @click="subevent(6)">
+          应用开发
+        </span>
       </p>
       <div class="info_detail">
         <p>
-          <label v-for="(item, index) in data.first" :key="index + 2000"
-            >{{ item.name }}:
-            <span :style="item.color ? { color: item.color } : {}">{{
-              item.text
-            }}</span>
+          <label v-for="(item, index) in data.first" :key="index + 2000">
+            {{ item.name }}:
+            <span :style="item.color ? { color: item.color } : {}">
+              {{ item.text }}
+            </span>
           </label>
         </p>
         <p>
-          <label v-for="(item, index) in data.second" :key="index + 2500"
-            >{{ item.name }}:
+          <label v-for="(item, index) in data.second" :key="index + 2500">
+            {{ item.name }}:
             <a
               v-if="item.name.indexOf('地址') !== -1"
               style="color:#515fe7;text-decoration: none;"
               target="_blank"
               :href="item.text"
-              >{{ item.text }}</a
             >
-            <span v-else :style="item.color ? { color: item.color } : {}">{{
-              item.text
-            }}</span>
+              {{ item.text }}
+            </a>
+            <span v-else :style="item.color ? { color: item.color } : {}">
+              {{ item.text }}
+            </span>
           </label>
         </p>
       </div>
@@ -81,54 +101,58 @@
 </template>
 
 <script>
+import MapView from "./service-info/map-view";
+
 export default {
   props: ["data"],
-  components: {},
+  components: { MapView },
   data() {
     return {};
   },
   watch: {},
   computed: {},
   created() {
-    console.log(this.data.url);
+    console.log(this.data);
   },
   mounted() {},
   methods: {
-    get_strd(str){
-      if(str){
-        if(str.indexOf('d')!==-1){
-          return [true,str.substr(0,str.length-1)]
-        }else {
-          return [false,str]
+    get_strd(str) {
+      if (str) {
+        if (str.indexOf("d") !== -1) {
+          return [true, str.substr(0, str.length - 1)];
+        } else {
+          return [false, str];
         }
       }
     },
-      subevent(val,flag=false){
-        if(flag){
-          return
+    subevent(val, flag = false) {
+      if (flag) {
+        return;
       }
-          if(val == 0){
+      if (val == 0) {
         // this.$emit('deploy',this.data)
-              this.$router.push(`/yygl/${this.$route.params.level}/${this.$route.params.type}/deployment/${this.$route.params.id}?source=${this.$route.query.source}`)
+        this.$router.push(
+          `/yygl/${this.$route.params.level}/${this.$route.params.type}/deployment/${this.$route.params.id}?source=${this.$route.query.source}`
+        );
         console.log(this.$route);
-          }else if(val == 1){
-              this.$emit('editapp')
-          }else if(val == 2){
-              this.$emit('unline',this.data)
-          }else if(val == 3){
-              this.$emit('unsell',this.data)
-          }else if(val == 4){
-              this.$emit('applymy')
-          }else if(val == 5){
+      } else if (val == 1) {
+        this.$emit("editapp");
+      } else if (val == 2) {
+        this.$emit("unline", this.data);
+      } else if (val == 3) {
+        this.$emit("unsell", this.data);
+      } else if (val == 4) {
+        this.$emit("applymy");
+      } else if (val == 5) {
         // /yygl/:level/:type/appdebugger/:deploy_id
-              this.$emit('debuggerfunc')
-          }else if(val == 6){
-              this.$emit('applymy')
+        this.$emit("debuggerfunc");
+      } else if (val == 6) {
+        this.$emit("applymy");
       }
     },
-      goto_page(url){
-        this.$router.push(url)
-      }
+    goto_page(url) {
+      this.$router.push(url);
+    },
   },
 };
 </script>
@@ -147,10 +171,16 @@ export default {
   margin-right: 13px;
   background-size: cover;
   text-align: center;
+  position: relative;
 }
 .logo img {
   width: 100%;
 }
+.logo > .map_view {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+}
 .info {
   float: left;
   width: calc(100% - 157px);

src/components/service-info/map-view.vue

+<template>
+  <div class="map_view">
+    <a class="map_view_action" href="#" @click.prevent.stop="viewAction">
+      <img :src="require('../../assets/imgs/ic_yulan.png')" />
+    </a>
+
+    <transition name="mask-bg-fade">
+      <el-dialog
+        class="map_view_dialog"
+        title="预览"
+        width="1200px"
+        :visible.sync="showDialog"
+        :before-close="beforeClose"
+      >
+        <div class="map_view_container">
+          <iframe v-if="src" :src="src" frameborder="0"></iframe>
+        </div>
+      </el-dialog>
+    </transition>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "map-view",
+  data: () => ({
+    showDialog: false,
+    src: "",
+  }),
+  props: {
+    id: {
+      type: [String, Number],
+      required: true,
+    },
+  },
+  methods: {
+    viewAction() {
+      this.src = `https://apaasgis.wodcloud.com/portal/apaasplat/viewer/previewMap.html?id=`; // ${this.id}
+      this.showDialog = true;
+    },
+    beforeClose(done) {
+      this.src = "";
+
+      done();
+    },
+  },
+};
+</script>
+
+<style scoped>
+.map_view_action {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  padding: 10px 0 0 10px;
+  box-sizing: border-box;
+  border-top-left-radius: 40px;
+  background-color: #8f93a1;
+}
+.map_view_container {
+  height: 666px;
+}
+.map_view_container > iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<style>
+.map_view_dialog .el-dialog {
+  overflow: hidden;
+}
+.map_view_dialog .el-dialog__header {
+  padding: 18px 20px 17px;
+  border-bottom: 1px solid #edf0ff;
+  text-align: left;
+}
+.map_view_dialog .el-dialog__body {
+  padding: 0;
+}
+</style>

src/components/service-info/service-info.vue

@@ -19,6 +19,11 @@
     <div class="main_container">
       <div class="main_container-left" v-if="data.cover">
         <img :src="data.cover" width="100%" />
+        <!--  TODO: 时空服务预览 -->
+        <map-view
+          v-if="data.type === 'Map Service'"
+          :id="data.service_id" 
+        ></map-view>
       </div>
       <div class="main_container-right">
         <ul class="service_base_info">
@@ -118,8 +123,12 @@
 
 <script>
 import helper from "@/services/helper.js";
+import MapView from "./map-view";
 
 export default {
+  components: {
+    MapView,
+  },
   props: {
     data: {
       type: Object,
@@ -272,10 +281,16 @@ export default {
   background-color: #f9fafc;
   margin-right: 30px;
   font-size: 0;
+  position: relative;
 }
 .main_container-left img {
   width: 100%;
 }
+.main_container-left > .map_view {
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+}
 .main_container-right {
   flex-grow: 1;
 }

src/pages/workbench/fwgl/apply_service_detail.vue

@@ -183,6 +183,8 @@ export default {
             ],
             service_arr:['服务基本信息','接口详细信息','申请审批信息'],
             service_header_arr:{
+                id: "",
+                isMap: false,
                 name:'',
                 first:[
                     {
@@ -339,8 +341,9 @@ export default {
                     this.$message.error(response.data.errMsg)
                     return
                 }
-                console.log(response.data.data);
                 let data = response.data.data;
+                this.$set(this.service_header_arr, "id", data.id); // TODO: 时空服务预览
+                this.$set(this.service_header_arr, "isMap", data.data_service_type1 === 6);
                 this.$set(this.service_header_arr, "name", data.name);
                 this.$set(this.service_header_arr['first'][0], 'text', data.data_service_type1_name);
                 this.$set(this.service_header_arr['first'][1], 'text', data.service_apply_info.approval_status==1?'待审批':data.service_apply_info.approval_status==2?'审批中':data.service_apply_info.approval_status==3?'审批通过':'审批未通过');

src/pages/workbench/fwgl/approval_service_detail.vue

@@ -158,6 +158,8 @@ export default {
       ],
       color_arr:['#e15260','"#ef9433','#515fe7'],
       service_header_arr: {
+        id: "",
+        isMap: false,
         name: "",
         first: [
           {
@@ -337,6 +339,8 @@ export default {
               return
             }
             let data = response.data.data;
+            this.$set(this.service_header_arr, "id", data.id); // TODO: 时空服务预览
+            this.$set(this.service_header_arr, "isMap", data.data_service_type1 === 6);
             this.$set(this.service_header_arr, "name", data.name);
             this.$set(this.service_header_arr['first'][0], 'text', data.data_service_type1_name);
             this.$set(this.service_header_arr['first'][1], 'text', data.sectors_name);

src/pages/workbench/fwgl/serviceDetail.vue

@@ -185,6 +185,8 @@ export default {
       ],
       service_size_data: [], //服务规格数组
       service_header_arr: {
+        id: "",
+        isMap: false,
         url: "",
         name: "",
         first: [
@@ -514,7 +516,8 @@ export default {
         .then(response => {
           if (response.data.success === 1) {
             let data = response.data.data;
-            console.log(data);
+            this.$set(this.service_header_arr, "id", data.id); // TODO: 时空服务预览
+            this.$set(this.service_header_arr, "isMap", data.data_service_type1 === 6);
             this.$set(this.service_header_arr, "name", data.name);
             this.$set(
               this.service_header_arr["first"][0],