Skip to content

A
apaas-ui
Commit c52fddf2 authored by 刘殿昕's avatar 刘殿昕
Browse files
Options

Merge branch 'dev'

parents 6c19c684 191d031d
Show whitespace changes
Inline Side-by-side
Showing with 8220 additions and 3236 deletions
.beagle.yml
View file @ c52fddf2
......@@ -87,4 +87,3 @@ pipeline:
- source: REGISTRY_PASSWORD_ALIYUN
target: REGISTRY_PASSWORD
branches: [master,dev]
.gitignore
View file @ c52fddf2
......@@ -9,6 +9,7 @@ package-lock.json
# Editor directories and files
.idea
.vscode
.VSCodeCounter
*.suo
*.ntvs*
*.njsproj
......
index.html
View file @ c52fddf2
......@@ -4,7 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Beagle aPaaS Platform v3.0</title>
<link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" />
<!-- <link rel="shortcut icon" type="image/x-icon" href="static/favicon.ico" /> -->
<style>
body{
background-color: #f6f7fb;
......
src/assets/css/index.css
View file @ c52fddf2
......@@ -261,15 +261,15 @@ div {
}
.el-tabs__item {
font-size: 16px;
font-size: 14px;
color: #8890a7;
line-height: 24px !important;
line-height: 14px !important;
font-weight: bold;
}
.el-tabs__nav-scroll .el-tabs__item {
line-height: 38px !important;
height: 44px !important;
line-height: 14px !important;
height: 38px !important;
}
.el-tabs__item:hover {
......@@ -499,7 +499,7 @@ border-radius:8px;
margin-left: 35px;
} */
.el-input__inner {
border-radius: 8px;
border-radius: 6px;
}
.el-input-group__append,
......
src/assets/i18n/language-zh.js
View file @ c52fddf2
......@@ -8,6 +8,7 @@ export const lang = {
profile: "个人档案",
message_center: "消息中心",
my_questions_and_answers: "我的问答",
my_coin: "我的金币",
// unit of purchase duration
by_year: "按年",
......
src/assets/imgs/icon_huoqu.png
View replaced file @ 6c19c684 View file @ c52fddf2
src/assets/imgs/icon_huoqu.png

1.17 KB | W: | H:

src/assets/imgs/icon_huoqu.png

1.03 KB | W: | H:

src/assets/imgs/icon_huoqu.png
src/assets/imgs/icon_huoqu.png
src/assets/imgs/icon_huoqu.png
src/assets/imgs/icon_huoqu.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/imgs/icon_liulan.png
View replaced file @ 6c19c684 View file @ c52fddf2
src/assets/imgs/icon_liulan.png

1.24 KB | W: | H:

src/assets/imgs/icon_liulan.png

1.08 KB | W: | H:

src/assets/imgs/icon_liulan.png
src/assets/imgs/icon_liulan.png
src/assets/imgs/icon_liulan.png
src/assets/imgs/icon_liulan.png
  • 2-up
  • Swipe
  • Onion skin
src/components/apass-list.vue
View file @ c52fddf2
......@@ -84,7 +84,6 @@
:header="listHeader"
:data="listData"
:padding-left="listPaddingLeft"
:select="listSelect"
@select="selectAction"
></list-table>
</div>
......@@ -149,19 +148,21 @@ export default {
type: String,
default: () => "请输入关键字",
},
listSelect: {
type: Boolean,
default: false,
pageSize: {
type: Number,
default: () => 10,
},
pageSizes: {
type: Array,
default: () => [10, 20, 50],
},
},
data: () => ({
showListFilter: false,
filter: {},
searchValue: "",
pageSize: 10,
currentPage: 1,
timer: null,
pageSizes: [10, 20, 50],
selectFilter: [],
}),
watch: {
......@@ -241,6 +242,7 @@ export default {
},
},
mounted() {
console.log(this.pageSize);
this.initOtherFilter();
this.listAction();
},
......
src/components/apass-upload.vue
View file @ c52fddf2
......@@ -10,6 +10,7 @@
:file-list="fileList"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
:on-remove="uploadRemove"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
......@@ -83,8 +84,14 @@ export default {
},
uploadSuccess({ data }) {
this.$emit("change", data);
// 替换文件后要把旧文件删除掉
this.removePreFile();
},
uploadRemove() {
this.preUrl = this.url;
this.$emit("change", "");
this.removePreFile();
},
removePreFile() {
if (this.preUrl) {
this.$http
.delete("/apaas/static/file/delete", {
......
src/components/app-list/app-card.vue
View file @ c52fddf2
......@@ -25,7 +25,7 @@
<p class="app_card-text" v-if="cardType == 1">
<span>
<i class="el-icon-time"></i>
<span>上线时间：</span>
<span>部署时间：</span>
</span>
<span class="text_clip" v-text="getTimeText(data.created || '')"></span>
</p>
......@@ -92,7 +92,7 @@ export default {
.app_card > .remove_btn {
position: absolute;
top: 10px;
right: 10px;
right: 20px;
font-size: 20px;
color: #8890a7;
cursor: pointer;
......
src/components/card.vue
View file @ c52fddf2
<template>
<div class="card" :style="flag?{borderRadius: '0px 12px 0px 0px'}:{}">
<div class="card_title"><div class="circle"></div>{{title}}</div>
<div class="card_title" :style="{backgroundColor:bgc}"><div class="circle"></div>{{title}}</div>
<div class="card_contain">
<slot></slot>
</div>
......@@ -9,7 +9,7 @@
<script>
export default {
props: ['title','flag'],
props: ['title','flag','bgc'],
components: {
},
......
src/components/doc-width-nav.vue
View file @ c52fddf2
......@@ -89,23 +89,23 @@ export default {
level = 1;
id = `nav_${pre_h1_index}_${time}`;
newTitle = title.replace(/<h1/g, `<h1 id="${id}"`);
newTitle = title.replace("<h1", `<h1 id="${id}"`);
} else if (title.match(/<h2(([\s\S])*?)<\/h2>/g)) {
pre_h2_index++;
pre_h3_index = 0;
level = 2;
id = `nav_${pre_h1_index}_${pre_h2_index}_${time}`;
newTitle = title.replace(/<h2/g, `<h2 id="${id}"`);
newTitle = title.replace("<h2", `<h2 id="${id}"`);
} else if (title.match(/<h3(([\s\S])*?)<\/h3>/g)) {
pre_h3_index++;
level = 3;
id = `nav_${pre_h1_index}_${pre_h2_index}_${pre_h3_index}_${time}`;
newTitle = title.replace(/<h3/g, `<h3 id="${id}"`);
newTitle = title.replace("<h3", `<h3 id="${id}"`);
}
content = content.replace(new RegExp(title), newTitle);
content = content.replace(title, newTitle);
return {
level,
......@@ -127,6 +127,10 @@ export default {
this.curNav = item.id;
},
setScroll(el, parentEl) {
if (!el || !parentEl) {
return;
}
let actualTop = el.offsetTop;
let current = el.offsetParent;
......@@ -201,8 +205,8 @@ export default {
font-size: 14px;
line-height: 24px;
color: #8890a7;
padding-left: 20px;
background-image: url("/../assets/imgs/shop_ic_updatetime.png");
padding-left: 18px;
background-image: url("../assets/imgs/shop_ic_updatetime.png");
background-repeat: no-repeat;
background-position: left center;
}
......
src/components/general/block-radius.vue
View file @ c52fddf2
<template>
<div class="block_radius">
<div class="block_radius" :style="'border-radius:' + borRadius + 'px;padding:' + paddingNum + 'px;'">
<div v-if="show_header" class="block_header">
<div class="block_header_title">{{ title }}</div>
<div class="block_header_button_group">
......@@ -32,6 +32,14 @@ export default {
title: {
type: String,
default: ""
},
borRadius: {
type: Number,
default: 10,
},
paddingNum: {
type: Number,
default: 20,
}
},
components: {},
......@@ -56,7 +64,6 @@ export default {
.block_radius {
background-color: #fff;
box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.05);
border-radius: 10px;
padding: 20px;
margin-bottom: 20px;
}
......
src/components/infoList.vue
View file @ c52fddf2
......@@ -93,10 +93,10 @@ a {
text-align: center;
color: #e6ebfe;
background-color: #515fe7;
border-radius: 8px;
border-radius: 6px;
display: inline-block;
font-size: 14px;
margin-left: 20px;
margin-left: 8px;
cursor: pointer;
}
</style>
src/components/menu.vue
View file @ c52fddf2
<template>
<div class="menu">
<img src="../assets/imgs/img_logo.png" alt class="logo" />
<img src="../assets/imgs/nav-logo.png" alt class="logo" />
<div
style="float: right; cursor: pointer; position: relative"
class="user_hover"
......@@ -320,7 +320,7 @@ export default {
}
.logo {
float: left;
margin: 15px 0 0 40px;
margin: 22px 0 0 40px;
cursor: pointer;
}
.user {
......
src/components/order-list/order-list-cell.vue
View file @ c52fddf2
......@@ -72,9 +72,9 @@
<el-col :span="5" class="cell_specification">
<div v-if="cellItem.order_type == 1">
<div>
{{ cellItem.spec_type == 1 ? "计次收费" : "时长收费" }}：
{{ cellItem.spcs_type == 1 ? "计次收费" : "时长收费" }}：
{{ cellItem.single_money }}金币/
{{ cellItem.spec_type == 1 ? cellItem.spec_count + "次" : "月" }}
{{ cellItem.spcs_type == 1 ? cellItem.spcs_count + "次" : "月" }}
</div>
</div>
<div v-else-if="cellItem.order_type == 2">
......@@ -192,6 +192,7 @@
<div v-else-if="cellItem.pay_status == -1">订单已取消</div>
<el-popover
v-if="
cellItem.order_type != 3 &&
cellItem.approval_second_level == 1 &&
cellItem.pay_status != -1 &&
cellItem.is_estimated == 0
......@@ -360,7 +361,7 @@ export default {
},
methods: {
addEvaluation() {
if (this.textarea == "" && this.serviceRate == null) {
if (this.textarea == "" || this.serviceRate == null) {
this.$message({
message: "请先完善评价内容",
type: "error",
......@@ -439,7 +440,7 @@ export default {
if (this.cellItem.order_type == 1) {
query = {
service_id: parseFloat(this.cellItem.service_id),
spec_id: this.cellItem.svc_spec_id,
spcs_id: this.cellItem.spcs_id,
duration: this.cellItem.duration,
duration_unit: this.cellItem.duration_unit,
};
......
src/components/organization-list/organization-list.vue
View file @ c52fddf2
......@@ -41,16 +41,16 @@ export default {
this.$emit("delete-action", item);
},
pageResize() {
let listWidth = this.$refs.container.clientWidth;
this.rowNum = Math.floor(listWidth / 310);
// let listWidth = this.$refs.container.clientWidth;
// this.rowNum = Math.floor(listWidth / 310);
},
},
mounted() {
this.pageResize();
window.addEventListener("resize", this.pageResize);
// this.pageResize();
// window.addEventListener("resize", this.pageResize);
},
destroyed() {
window.removeEventListener("resize", this.pageResize);
// window.removeEventListener("resize", this.pageResize);
},
};
</script>
......
src/components/recommen/recommen-box.vue
View file @ c52fddf2
......@@ -69,8 +69,9 @@ export default {
},
watch: {
"data.checked"(val) {
// debugger
this.checked = val===1;
}
},
},
computed: {},
created() {
......
src/components/service-header.vue
View file @ c52fddf2
......@@ -306,7 +306,8 @@ export default {
.info_detail p {
color: #8890a7;
}
.info_detail span {
.info_detail span,
.info_detail a {
color: #242c43;
font-weight: 600;
margin-right: 48px;
......
src/components/service-info/app-info.vue
View file @ c52fddf2
<template>
<div class="service_info apaas_button" v-if="data">
<BlockRadius
:borRadius="8"
:paddingNum="32"
class="service_info apaas_button"
v-if="data"
>
<div class="main_container">
<div class="main_container-left">
<img :src="data.logo" width="100%" />
</div>
<div class="main_container-right">
<div class="service_title">
<span class="service_name" v-text="data.app_name"></span>
<span class="service_access_info">
<img :src="require('@/assets/imgs/icon_liulan.png')" />
<span v-text="'浏览次数：' + data.view_count"></span>
<span v-text="data.view_count + '次浏览'"></span>
</span>
<span class="service_access_info">
<img :src="require('@/assets/imgs/icon_huoqu.png')" />
<span v-text="'部署次数：' + data.deploy_times"></span>
<span v-text="'本月' + data.apply_times + '次获取'"></span>
</span>
</div>
<div class="main_container">
<div class="main_container-left">
<img :src="data.logo" width="100%" />
</div>
<div class="main_container-right">
<ul class="service_base_info">
<li>
<span>应用开发者：</span>
<span v-text="data.username"> </span>
</li>
<li>
<span>应用类型：</span>
<span v-html="data.type_name"></span>
</li>
<li>
<span>业务领域：</span>
<span v-text="data.ywly_name"></span>
</li>
<li>
<span>上线时间：</span>
<span v-text="data.create_date"></span>
</li>
</ul>
<div class="and_wid">
<p class="des_p">{{ data.yyjj }}</p>
<div class="jiage_d">
<div class="dbn_wkdn">
价&nbsp;&nbsp;格：
<span class="ndwa_indowa"> {{ data.price * duration }} </span>
......@@ -48,38 +36,44 @@
</div>
</div>
<div class="commodity_information">
<span>规&emsp;&emsp;格：</span>
<div class="btn_container_ddaw">
{{ data.price }} 金币/月
<span class="guige_title">规&emsp;&emsp;格：</span>
<div class="spec_btn_act">申请获取应用镜像部署权限</div>
</div>
<div class="spec_des">
{{ `申请获取应用镜像部署权限，每月${data.price}金币。` }}
</div>
<div class="commodity_information">
<span>购买时长：</span>
<span class="guige_title">购买时长：</span>
<div class="btn_container">
<el-input-number
v-model="duration"
:min="1"
:disabled="actionDisabled"
></el-input-number>月
></el-input-number
>月
</div>
</div>
<div class="commodity_action">
<el-button type="warning" plain @click="addToCart">
加入购物车
</el-button>
<el-button type="warning" @click="applyImmediately">
<el-button class="service_now_buy" @click="applyImmediately">
立即申请
</el-button>
<el-button class="service_add_cart" @click="addToCart">
加入购物车
</el-button>
</div>
</div>
</div>
</div>
</BlockRadius>
</template>
<script>
import BlockRadius from "@/components/general/block-radius";
export default {
components: {
BlockRadius,
},
props: {
data: {
datas: {
type: Object,
default: () => null,
},
......@@ -97,7 +91,18 @@ export default {
],
specificationID: 1,
duration: 1,
data: {},
}),
watch: {
datas: {
handler(val) {
this.data = val;
console.log(this.data);
},
deep: true,
immediate: true,
},
},
computed: {
actionDisabled() {
return this.specifications.length == 0;
......@@ -159,27 +164,24 @@ export default {
</script>
<style scoped>
.service_info {
padding: 35px 20px 40px;
background-color: #fff;
margin-bottom: 20px;
}
.main_container {
display: flex;
justify-content: flex-start;
justify-content: space-between;
align-items: flex-start;
margin-top: 25px;
margin: 8px 8px 0;
}
.main_container-left {
width: 270px;
padding: 3px;
background-color: #f9fafc;
margin-right: 30px;
width: 200px;
height: 200px;
padding: 2px;
background-color: #f6f7fb;
font-size: 0;
position: relative;
}
.main_container-left img {
width: 100%;
height: 100%;
border-radius: 6px;
}
.main_container-left > .map_view {
position: absolute;
......@@ -187,7 +189,7 @@ export default {
bottom: 3px;
}
.main_container-right {
flex-grow: 1;
width: 896px;
}
.service_title {
display: flex;
......@@ -199,8 +201,21 @@ export default {
font-weight: bold;
color: #0d1847;
line-height: 36px;
flex-grow: 1;
margin-right: auto;
}
.service_title > .service_type {
flex-shrink: 0;
height: 24px;
padding: 0 12px;
border: 1px solid #5362ee;
background-color: #5362ee;
border-radius: 4px;
font-size: 12px;
color: #fff;
line-height: 22px;
margin-left: 10px;
}
.service_title > .service_access_info {
flex-shrink: 0;
font-size: 14px;
......@@ -212,11 +227,11 @@ export default {
vertical-align: middle;
}
.service_title > .service_access_info > img {
width: 19px;
width: 12px;
margin-right: 5px;
}
.service_base_info {
padding: 25px 20px;
padding: 18px;
background-color: #f9fafc;
border-radius: 8px;
}
......@@ -233,26 +248,27 @@ export default {
margin-top: 18px;
}
.service_base_info > li > span:first-child,
.commodity_information > span:first-child {
flex-shrink: 0;
white-space: nowrap;
.guige_title {
color: #8890a7;
width: 100px;
margin-right: 20px;
text-align: right;
}
.service_base_info > li > span:nth-child(2) {
color: #242c43;
}
.commodity_information {
margin-top: 30px;
margin-top: 16px;
}
.commodity_information > span:nth-child(2) {
color: #58617a;
}
.commodity_information > span:first-child {
line-height: 40px;
line-height: 36px;
}
.commodity_information > .commodity_text {
flex-grow: 1;
padding: 13px 18px;
padding: 8px 18px;
background-color: #f9fafc;
border-radius: 5px;
}
......@@ -266,27 +282,40 @@ export default {
.commodity_information > .btn_container > .el-input-number {
margin: 0 20px 15px 0;
}
.btn_container_ddaw {
line-height: 40px;
margin-left: 5px;
}
.commodity_action {
margin-top: 60px;
text-align: right;
.spec_btn {
height: 36px;
padding: 7px 18px 6px;
background-color: #ffffff;
border-radius: 6px;
border: solid 1px #dcdfe6;
font-size: 14px;
line-height: 20px;
color: #58617a;
margin-right: 8px;
margin-bottom: 8px;
cursor: pointer;
}
.commodity_action > .el-button {
width: 220px;
margin-left: 20px;
font-size: 16px;
.spec_btn_act {
height: 36px;
padding: 7px 18px 6px;
background-color: #515fe7;
border-radius: 6px;
border: solid 1px #515fe7;
font-size: 14px;
line-height: 20px;
color: #f4f7fc;
margin-right: 8px;
margin-bottom: 8px;
cursor: pointer;
}
.spec_btn:hover {
background-color: #f2f5fe;
border: solid 1px #c3caf8;
color: #58617a;
}
.and_wid {
background-color: #f9fafc;
border-radius: 8px;
padding: 20px;
display: flex;
justify-content: space-between;
margin-top: 20px;
align-items: center;
.commodity_action {
margin-top: 16px;
margin-left: 120px;
}
.dbn_wkdn {
color: #8890a7;
......@@ -311,6 +340,7 @@ export default {
color: #ea7d19;
font-size: 18px;
position: relative;
font-weight: bold;
}
.dwin_diwa {
width: 14px;
......@@ -328,6 +358,82 @@ export default {
top: 5px;
left: -35px;
}
.service_add_cart {
width: 192px;
height: 40px;
background-color: #fcefd6;
border-radius: 6px;
border: solid 1px #fac266;
color: #e56600;
font-size: 16px;
}
.service_now_buy {
width: 192px;
height: 40px;
background-color: #e56600;
border: solid 1px #e56600;
border-radius: 6px;
color: #fcefd6;
font-size: 16px;
margin-right: 24px;
}
.tags {
display: inline-block;
margin-left: 8px;
height: 24px;
padding: 0 12px;
font-size: 12px;
font-weight: 500;
line-height: 24px;
border-radius: 4px;
position: relative;
top: 1px;
flex-shrink: 0;
margin-right: auto;
}
.map_service {
background-color: #626de9;
border: solid 1px #626de9;
color: #fff;
}
.shared {
background-color: #e7fdfc;
border: solid 1px #8bd6d0;
color: #25bdb1;
}
.restricted {
background-color: #fffee8;
border: solid 1px #e4c884;
color: #ef9433;
}
.sensitive {
background-color: #ffefef;
border: solid 1px #d7a4a9;
color: #e15260;
}
.des_p {
color: #8890a7;
font-size: 14px;
margin-top: 8px;
margin-bottom: 12px;
}
.jiage_d {
background: url("~@/assets/imgs/img_bg_jiage.png");
width: 896px;
height: 72px;
margin-bottom: 16px;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.spec_des {
margin-left: 128px;
color: rgba(88, 97, 122, 0.5);
font-size: 14px;
line-height: 14px;
margin-top: 8px;
}
</style>
<style>
......@@ -355,4 +461,7 @@ export default {
.service_info .el-input-number .el-input__inner {
border-width: 2px;
}
.service_info .el-input-number {
width: 128px;
}
</style>
src/components/service-info/service-info.vue
View file @ c52fddf2
<template>
<div class="service_info apaas_button" v-if="data">
<div class="service_title">
<span class="service_name" v-text="data.name"></span>
<span class="service_type" v-if="data.type" v-text="data.type"></span>
<span
class="service_level"
v-text="['-', '共享', '受限', '敏感'][data.openness || 0]"
></span>
<span class="service_access_info">
<img :src="require('@/assets/imgs/icon_liulan.png')" />
<span v-text="'浏览次数：' + data.view_count"></span>
</span>
<span class="service_access_info">
<img :src="require('@/assets/imgs/icon_huoqu.png')" />
<span v-text="'获取次数：' + data.apply_count"></span>
</span>
</div>
<BlockRadius
:borRadius="8"
:paddingNum="32"
class="service_info apaas_button"
v-if="data && showItem"
>
<div class="main_container">
<div class="main_container-left" v-if="data.cover">
<img :src="data.cover" width="100%" v-if="data.type !== 'workflow'" />
......@@ -35,35 +24,27 @@
></process-view>
</div>
<div class="main_container-right">
<ul class="service_base_info">
<li>
<span>提供机构：</span>
<span v-text="data.organization_name"> </span>
</li>
<li>
<span>发布时间：</span>
<span v-text="dateTransform(data.create_time)"></span>
</li>
<li>
<span>更新时间：</span>
<span v-text="dateTransform(data.update_date)"></span>
</li>
<li>
<span>数据领域：</span>
<span v-text="data.sectors_name"></span>
</li>
<li>
<span>服务类型：</span>
<span v-html="data.data_service_type.join('&ensp;&ensp;')"></span>
</li>
<li>
<span>资源摘要：</span>
<span v-text="data.descript"></span>
</li>
</ul>
<div class="and_wid">
<div class="service_title">
<span class="service_name" v-text="data.name"></span>
<span class="service_type" v-if="data.type" v-text="data.type"></span>
<span v-if="data.openness == 1" class="tags shared">共享</span>
<span v-else-if="data.openness == 2" class="tags restricted">
受限
</span>
<span v-else class="tags sensitive">敏感</span>
<span class="service_access_info">
<img :src="require('@/assets/imgs/icon_liulan.png')" />
<span v-text="data.view_count + '次浏览'"></span>
</span>
<span class="service_access_info">
<img :src="require('@/assets/imgs/icon_huoqu.png')" />
<span v-text="data.apply_count + '次获取'"></span>
</span>
</div>
<p class="des_p">{{ data.descript }}</p>
<div class="jiage_d">
<div class="dbn_wkdn">
价&nbsp;&nbsp;格：<span class="ndwa_indowa">
<span class="gnekg_fwf"><span style="margin-right: 30px;">价</span>格：</span><span class="ndwa_indowa">
{{
specification && specification.money
? specification.money * (showTime ? duration : 1)
......@@ -73,13 +54,14 @@
<span class="kfdf_jffa">金币</span>
</div>
<div class="nmd_kwd">
月售：<span class="ndwa_dn">{{ data.month_sale }} 笔 </span
><img src="@/assets/imgs/shop_ic_star.png" class="dwin_diwa" />
<span class="bgnerighur">月售：<span class="ndwa_dn">{{ data.month_sale }} 笔 </span
></span>
<img src="@/assets/imgs/shop_ic_star.png" class="dwin_diwa" />
<span class="dn_wjd">{{ data.scoreDetail.avgScore }}</span>
</div>
</div>
<div class="commodity_information">
<span>计次收费规格：</span>
<span class="guige_title">计次收费：</span>
<span
v-if="
(data.serviceRequestSpcs.spcs_type_1 &&
......@@ -89,19 +71,36 @@
class="commodity_text"
>暂无</span
>
<div v-else class="btn_container">
<el-button
<div
v-else-if="
data.serviceRequestSpcs.spcs_type_1 &&
data.serviceRequestSpcs.spcs_type_1.length != 0
"
class="btn_container"
>
<div
v-for="(item, index) in data.serviceRequestSpcs.spcs_type_1"
:key="'spcs_' + index"
:type="item.id === specification.id ? 'primary' : 'default'"
:class="
item.id === specification.id ? 'spec_btn_act' : 'spec_btn'
"
@click="changeSpecification(item, 0)"
>
{{ item.money }}金币/{{ item.spcs_count }}次
</el-button>
</div>
</div>
<div class="commodity_information">
<span>时长收费规格：</span>
</div>
<div class="spec_des">
{{
specification && specification.spcs_type == 1
? specification.descript
: data.serviceRequestSpcs.spcs_type_1 && data.serviceRequestSpcs.spcs_type_1.length != 0 ? data.serviceRequestSpcs.spcs_type_1[0].descript : ""
}}
</div>
<div
class="commodity_information"
>
<span class="guige_title">时长收费：</span>
<span
v-if="
(data.serviceRequestSpcs.spcs_type_2 &&
......@@ -112,27 +111,41 @@
>暂无</span
>
<div v-else class="btn_container">
<el-button
<div
v-for="(item, index) in data.serviceRequestSpcs.spcs_type_2"
:key="'spcs_' + index"
:type="item.id === specification.id ? 'primary' : 'default'"
:class="
item.id === specification.id ? 'spec_btn_act' : 'spec_btn'
"
@click="changeSpecification(item, 1)"
>
{{ item.money }}金币/月
</el-button>
</div>
</div>
<div class="commodity_information">
<span>规格说明：</span>
</div>
<div
class="spec_des"
v-if="
!(
(data.serviceRequestSpcs.spcs_type_2 &&
data.serviceRequestSpcs.spcs_type_2.length == 0) ||
!data.serviceRequestSpcs.spcs_type_2
)
"
>
{{ data.serviceRequestSpcs.spcs_type_2[0].descript || "-" }}
</div>
<!-- <div class="commodity_information">
<span class="guige_title">规格说明：</span>
<span v-if="actionDisabled" class="commodity_text">暂无</span>
<span
v-else
class="commodity_text"
v-text="(specification && specification.descript) || '-'"
></span>
</div>
</div> -->
<div class="commodity_information">
<span>购买时长：</span>
<span class="guige_title">购买时长：</span>
<div v-if="showTime" class="btn_container">
<el-input-number
v-model="duration"
......@@ -142,29 +155,28 @@
月
</div>
<div v-else class="btn_container">
<el-button type="primary"> 不限时长 </el-button>
<div class="spec_btn_act">不限时长</div>
</div>
</div>
<div class="commodity_action">
<el-button
type="warning"
plain
@click="addToCart"
class="service_now_buy"
@click="applyImmediately"
:disabled="actionDisabled"
>
加入购物车
立即申请
</el-button>
<el-button
type="warning"
@click="applyImmediately"
class="service_add_cart"
@click="addToCart"
:disabled="actionDisabled"
>
立即申请
加入购物车
</el-button>
</div>
</div>
</div>
</div>
</BlockRadius>
</template>
<script>
......@@ -172,12 +184,14 @@ import helper from "@/services/helper.js";
import MapView from "./map-view";
import workflowsView from "@/components/work-flow/workflows-view";
import processView from "@/components/service-info/process-view";
import BlockRadius from "@/components/general/block-radius";
export default {
components: {
MapView,
workflowsView,
processView,
BlockRadius,
},
props: {
data: {
......@@ -191,6 +205,7 @@ export default {
specification: {}, // 规格
duration: 1, // 时长
showTime: false,
showItem: false,
}),
computed: {
actionDisabled() {
......@@ -268,10 +283,15 @@ export default {
mounted() {
// 初始化购买方式
if (this.data.serviceRequestSpcs && this.data.serviceRequestSpcs.length) {
if (!this.data.serviceRequestSpcs.spcs_type_1) {
this.data.serviceRequestSpcs.spcs_type_1 = [];
}
if (!this.data.serviceRequestSpcs.spcs_type_2) {
this.data.serviceRequestSpcs.spcs_type_2 = [];
}
let types = Array.from(
new Set(this.data.serviceRequestSpcs.map((item) => item.type))
);
if (types.indexOf(3) > -1) {
this.types = [
{
......@@ -316,32 +336,37 @@ export default {
) {
this.specification = this.data.serviceRequestSpcs.spcs_type_2[0];
}
this.showItem = true;
},
};
</script>
<style scoped>
.service_info {
padding: 20px;
background-color: #fff;
margin-bottom: 20px;
}
.main_container {
display: flex;
justify-content: flex-start;
justify-content: space-between;
align-items: flex-start;
margin-top: 25px;
margin: 8px 8px 0;
}
.main_container-left {
width: 466px;
padding: 3px;
background-color: #f9fafc;
margin-right: 30px;
width: 200px;
height: 200px;
padding: 2px;
background-color: #f6f7fb;
font-size: 0;
position: relative;
}
.main_container-left img {
width: 100%;
height: 100%;
border-radius: 6px;
}
.main_container-left > .workflows-view {
position: absolute;
right: 3px;
bottom: 3px;
width: calc(100% - 6px);
height: calc(100% - 6px);
}
.main_container-left > .map_view {
position: absolute;
......@@ -349,7 +374,7 @@ export default {
bottom: 3px;
}
.main_container-right {
flex-grow: 1;
width: 896px;
}
.service_title {
display: flex;
......@@ -368,24 +393,13 @@ export default {
padding: 0 12px;
border: 1px solid #5362ee;
background-color: #5362ee;
border-radius: 12px;
border-radius: 4px;
font-size: 12px;
color: #fff;
line-height: 22px;
margin-left: 10px;
}
.service_title > .service_level {
flex-shrink: 0;
height: 24px;
padding: 0 12px;
border: 1px solid #25bdb1;
border-radius: 12px;
font-size: 12px;
color: #25bdb1;
line-height: 22px;
margin-left: 10px;
margin-right: auto;
}
.service_title > .service_access_info {
flex-shrink: 0;
font-size: 14px;
......@@ -397,7 +411,7 @@ export default {
vertical-align: middle;
}
.service_title > .service_access_info > img {
width: 19px;
width: 12px;
margin-right: 5px;
}
.service_base_info {
......@@ -418,26 +432,28 @@ export default {
margin-top: 18px;
}
.service_base_info > li > span:first-child,
.commodity_information > span:first-child {
flex-shrink: 0;
white-space: nowrap;
.guige_title {
color: #8890a7;
width: 100px;
margin-right: 20px;
text-align: right;
}
.service_base_info > li > span:nth-child(2) {
color: #242c43;
}
.commodity_information {
margin-top: 30px;
margin-top: 16px;
height: 38px;
}
.commodity_information > span:nth-child(2) {
color: #58617a;
}
.commodity_information > span:first-child {
line-height: 40px;
line-height: 36px;
}
.commodity_information > .commodity_text {
flex-grow: 1;
padding: 13px 18px;
padding: 8px 18px;
background-color: #f9fafc;
border-radius: 5px;
}
......@@ -451,63 +467,168 @@ export default {
.commodity_information > .btn_container > .el-input-number {
margin: 0 20px 15px 0;
}
.commodity_action {
margin-top: 50px;
text-align: right;
.spec_btn {
height: 36px;
padding: 7px 18px 6px;
background-color: #ffffff;
border-radius: 6px;
border: solid 1px #dcdfe6;
font-size: 14px;
line-height: 20px;
color: #58617a;
margin-right: 8px;
margin-bottom: 8px;
cursor: pointer;
}
.commodity_action > .el-button {
width: 220px;
margin-left: 20px;
font-size: 16px;
.spec_btn_act {
height: 36px;
padding: 7px 18px 6px;
background-color: #515fe7;
border-radius: 6px;
border: solid 1px #515fe7;
font-size: 14px;
line-height: 20px;
color: #f4f7fc;
margin-right: 8px;
margin-bottom: 8px;
cursor: pointer;
}
.spec_btn:hover {
background-color: #f2f5fe;
border: solid 1px #c3caf8;
color: #58617a;
}
.and_wid {
background-color: #f9fafc;
border-radius: 8px;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
.commodity_action {
margin-top: 16px;
margin-left: 120px;
}
.dbn_wkdn {
color: #8890a7;
color: #242c43;
font-size: 14px;
}
.ndwa_indowa {
color: #e56600;
font-size: 26px;
font-size: 32px;
font-weight: bold;
margin: 0 8px 0 20px;
}
.kfdf_jffa {
color: #e56600;
font-size: 14px;
position: relative;
bottom: 6px;
}
.nmd_kwd {
color: #8890a7;
color: #242c43;
}
.ndwa_dn {
color: #242c43;
}
.dn_wjd {
color: #ea7d19;
font-size: 18px;
font-size: 20px;
position: relative;
font-weight: bold;
}
.dwin_diwa {
width: 14px;
height: 14px;
margin-left: 20px;
margin-left: 42px;
margin-right: 4px;
position: relative;
}
.dn_wjd::after {
content: "";
position: absolute;
width: 2px;
height: 16px;
background-color: #e3e5ef;
top: 5px;
left: -35px;
width: 1px;
height: 14px;
background-color:#eccb8a;
top: 8px;
left: -44px;
}
.service_add_cart {
width: 192px;
height: 40px;
background-color: #fcefd6;
border-radius: 6px;
border: solid 1px #fac266;
color: #e56600;
font-size: 16px;
}
.service_now_buy {
width: 192px;
height: 40px;
background-color: #e56600;
border: solid 1px #e56600;
border-radius: 6px;
color: #fcefd6;
font-size: 16px;
margin-right: 24px;
}
.tags {
display: inline-block;
margin-left: 8px;
height: 24px;
padding: 0 12px;
font-size: 12px;
font-weight: 500;
line-height: 24px;
border-radius: 4px;
position: relative;
top: 1px;
flex-shrink: 0;
margin-right: auto;
}
.map_service {
background-color: #626de9;
border: solid 1px #626de9;
color: #fff;
}
.shared {
background-color: #e7fdfc;
border: solid 1px #8bd6d0;
color: #25bdb1;
}
.restricted {
background-color: #fffee8;
border: solid 1px #e4c884;
color: #ef9433;
}
.sensitive {
background-color: #ffefef;
border: solid 1px #d7a4a9;
color: #e15260;
}
.des_p {
color: #8890a7;
font-size: 14px;
margin-top: 8px;
margin-bottom: 12px;
}
.jiage_d {
background: url("~@/assets/imgs/img_bg_jiage.png");
width: 896px;
height: 72px;
margin-bottom: 16px;
padding: 20px 30px;
display: flex;
justify-content: space-between;
align-items: center;
}
.gnekg_fwf {
position: relative;
bottom: 6px;
}
.spec_des {
margin-left: 128px;
color: rgba(88, 97, 122, 0.5);
font-size: 14px;
line-height: 14px;
margin-top: 8px;
}
.bgnerighur {
position: relative;
bottom: 1px;
}
</style>
......@@ -536,4 +657,7 @@ export default {
.service_info .el-input-number .el-input__inner {
border-width: 2px;
}
.service_info .el-input-number {
width: 128px;
}
</style>
src/components/service-list/commodity-card-new.vue 0 → 100644
View file @ c52fddf2
<template>
<div class="com_cell">
<div class="com_cell_up" @click="goUrl(cellData.app_id)">
<div class="com_cell_up_img_init">
<img :src="cellData.logo" class="com_cell_up_img" />
</div>
<div class="com_cell_up_right">
<div class="up_title">
<div class="up_tit_name_in">
<span class="up_tit_name" :title="cellData.app_name + ' ( V' + cellData.version + ' )'">
{{ cellData.app_name }} ( V{{ cellData.version }} )
</span>
</div>
</div>
<div class="up_rate">
<el-rate
v-model="cellData.score"
disabled
show-score
text-color="#ea7d19"
score-template="{value}"
></el-rate>
<p class="get_num">
获取次数：
<span class="com_cell_right_time">
{{ cellData.get_times }}
</span>
<span class="ci"> 次</span>
</p>
</div>
</div>
<div class="get_detail">
<img src="@/assets/imgs/shop_ic_enter.png" />
</div>
</div>
<div class="com_cell_down">
<p class="com_detail">
{{ cellData.yyjj }}
</p>
<el-row :gutter="16">
<el-col :span="14" class="com_other">
<span class="name_title">应用类型：</span>
{{ cellData.type_name }}
&nbsp;&nbsp;{{ cellData.data_service_type2_name }} &nbsp;&nbsp;{{
cellData.data_service_type3_name
}}
</el-col>
<el-col :span="10" class="com_other">
<span class="name_title">业务领域：</span>
{{ cellData.area_name }}
</el-col>
<el-col :span="14" class="com_other">
<span class="name_title">上线时间：</span>
{{ helper.dateStringTransform(cellData.create_date) }}
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import helper from "@/services/helper.js";
// if you meet date which like 2020-06-05T00:00:00+08:00, use helper.dateStringTransform()
export default {
components: {},
props: {
url: { type: String, default: "" },
cellData: { type: Object, default: {} },
},
data: () => ({ helper: helper }),
computed: {},
watch: {},
methods: {
goUrl(parame) {
if (this.url != "") {
this.$router.push(this.url + "/" + parame);
}
},
},
mounted() {},
};
</script>
<style scoped>
.com_cell {
width: 496px;
height: 208px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.04);
border-radius: 8px;
border: solid 1px #e3e4ef;
margin-bottom: 24px;
}
.com_cell_up {
height: 88px;
background-color: #f9fafc;
border-radius: 8px 8px 0px 0px;
padding: 16px;
display: flex;
position: relative;
cursor: pointer;
}
.com_cell_up_img_init {
width: 56px;
height: 56px;
margin-right: 16px;
flex: 0 0 auto;
}
.com_cell_up_img {
width: 100%;
height: 100%;
border-radius: 4px;
}
.com_cell_up_right {
flex: 1 1 auto;
}
.up_title {
font-size: 16px;
margin-top: 4px;
display: flex;
align-items: center;
}
.up_tit_name_in {
max-width: calc(100% - 150px);
display: inline-block;
}
.up_tit_name {
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.up_tit_name:hover {
/* text-decoration: underline; */
color: #515fe7;
}
.up_rate {
margin-top: 12px;
display: flex;
}
.get_num {
margin-left: 40px;
font-size: 14px;
color: #58617a;
}
.com_cell_right_time {
color: #ea7d19;
}
.ci {
color: #242c43;
}
.get_detail {
position: absolute;
top: 26px;
right: 16px;
}
.tags {
display: inline-block;
margin-left: 8px;
padding: 2px 8px 3px;
font-size: 12px;
font-weight: 500;
line-height: 12px;
border-radius: 4px;
position: relative;
top: 1px;
}
.map_service {
background-color: #626de9;
border: solid 1px #626de9;
color: #fff;
}
.shared {
background-color: #e7fdfc;
border: solid 1px #8bd6d0;
color: #25bdb1;
}
.restricted {
background-color: #fffee8;
border: solid 1px #e4c884;
color: #ef9433;
}
.sensitive {
background-color: #ffefef;
border: solid 1px #d7a4a9;
color: #e15260;
}
.com_cell_down {
padding: 12px 16px 0 16px;
}
.com_detail {
color: #8890a7;
font-size: 14px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
height: 42px;
margin-bottom: 8px;
}
.com_other {
color: #58617a;
margin-bottom: 6px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.name_title {
color: #8890a7;
}
</style>
<style>
.com_cell .el-rate__item .el-rate__icon {
font-size: 20px;
margin-right: 0;
}
.com_cell .el-rate__text {
margin-left: 4px;
position: relative;
top: 1px;
}
</style>
\ No newline at end of file
src/components/service-list/commodity-cell-new.vue 0 → 100644
View file @ c52fddf2
<template>
<div class="com_cell">
<div class="com_cell_up" @click="goUrl(cellData.id)">
<div class="com_cell_up_img_init">
<img :src="cellData.cover" class="com_cell_up_img" />
</div>
<div class="com_cell_up_right">
<div class="up_title">
<div class="up_tit_name_in">
<span class="up_tit_name" :title="cellData.name">
{{ cellData.name }}
</span>
</div>
<span
v-if="cellData.data_service_type1 == 6"
class="tags map_service"
>
mapService
</span>
<span v-if="cellData.openness == 1" class="tags shared">共享</span>
<span v-else-if="cellData.openness == 2" class="tags restricted">
受限
</span>
<span v-else class="tags sensitive">敏感</span>
</div>
<div class="up_rate">
<el-rate
v-model="cellData.score"
disabled
show-score
text-color="#ea7d19"
score-template="{value}"
></el-rate>
<p class="get_num">
获取次数：
<span class="com_cell_right_time">
{{ cellData.apply_num }}
</span>
<span class="ci"> 次</span>
</p>
</div>
</div>
<div class="get_detail">
<img src="@/assets/imgs/shop_ic_enter.png" />
</div>
</div>
<div class="com_cell_down">
<p class="com_detail">
{{ cellData.descript }}
</p>
<el-row :gutter="16">
<el-col :span="14" class="com_other">
<span class="name_title">服务类型：</span>
{{ cellData.data_service_type1_name }}
&nbsp;&nbsp;{{ cellData.data_service_type2_name }} &nbsp;&nbsp;{{
cellData.data_service_type3_name
}}
</el-col>
<el-col :span="10" class="com_other">
<span class="name_title">服务领域：</span>
{{ cellData.sectors_name }}
</el-col>
<el-col :span="14" class="com_other">
<span class="name_title">更新时间：</span>
{{ helper.dateStringTransform(cellData.update_date) }}
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import helper from "@/services/helper.js";
// if you meet date which like 2020-06-05T00:00:00+08:00, use helper.dateStringTransform()
export default {
components: {},
props: {
url: { type: String, default: "" },
cellData: { type: Object, default: {} },
},
data: () => ({ helper: helper }),
computed: {},
watch: {},
methods: {
goUrl(parame) {
if (this.url != "") {
this.$router.push(this.url + "/" + parame);
}
},
},
mounted() {},
};
</script>
<style scoped>
.com_cell {
width: 496px;
height: 208px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.04);
border-radius: 12px 12px 8px 8px;
border: solid 1px #e3e4ef;
margin-bottom: 24px;
}
.com_cell_up {
height: 88px;
background-color: #f9fafc;
border-radius: 12px 12px 0px 0px;
padding: 16px;
display: flex;
position: relative;
cursor: pointer;
}
.com_cell_up_img_init {
width: 56px;
height: 56px;
margin-right: 16px;
flex: 0 0 auto;
}
.com_cell_up_img {
width: 100%;
height: 100%;
border-radius: 4px;
}
.com_cell_up_right {
flex: 1 1 auto;
}
.up_title {
font-size: 16px;
margin-top: 4px;
display: flex;
align-items: center;
}
.up_tit_name_in {
max-width: calc(100% - 150px);
display: inline-block;
}
.up_tit_name {
width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.up_tit_name:hover {
/* text-decoration: underline; */
color: #515fe7;
}
.up_rate {
margin-top: 12px;
display: flex;
}
.get_num {
margin-left: 40px;
font-size: 14px;
color: #58617a;
}
.com_cell_right_time {
color: #ea7d19;
}
.ci {
color: #242c43;
}
.get_detail {
position: absolute;
top: 26px;
right: 16px;
}
.tags {
display: inline-block;
margin-left: 8px;
padding: 2px 8px 3px;
font-size: 12px;
font-weight: 500;
line-height: 12px;
border-radius: 4px;
position: relative;
top: 1px;
}
.map_service {
background-color: #626de9;
border: solid 1px #626de9;
color: #fff;
}
.shared {
background-color: #e7fdfc;
border: solid 1px #8bd6d0;
color: #25bdb1;
}
.restricted {
background-color: #fffee8;
border: solid 1px #e4c884;
color: #ef9433;
}
.sensitive {
background-color: #ffefef;
border: solid 1px #d7a4a9;
color: #e15260;
}
.com_cell_down {
padding: 12px 16px 0 16px;
}
.com_detail {
color: #8890a7;
font-size: 14px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
height: 42px;
margin-bottom: 8px;
}
.com_other {
color: #58617a;
margin-bottom: 6px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
overflow: hidden;
}
.name_title {
color: #8890a7;
}
</style>
<style>
.com_cell .el-rate__item .el-rate__icon {
font-size: 20px;
margin-right: 0;
}
.com_cell .el-rate__text {
margin-left: 4px;
position: relative;
top: 1px;
}
</style>
\ No newline at end of file
src/components/service-list/commodity-list-new.vue 0 → 100644
View file @ c52fddf2
<template>
<div>
<div v-if="urlFilter == 'app'" ref="commodityList" class="commodity_card">
<commodity-card
v-for="item in datas"
:key="item.id"
:cellData="item"
:url="url"
></commodity-card>
</div>
<div v-else class="commodity_cell">
<commodity-cell
v-for="item in datas"
:cellData="item"
:url="url"
:key="item.id"
></commodity-cell>
</div>
<!-- 分页 -->
<section class="com-pagination" v-if="paginationShow">
<div class="com_page_total">共 {{ total }} 个条目</div>
<div class="com_page_item">
<div class="com_page_num" v-if="pageSizeShow">
<div>每页条数：</div>
<div class="com_page_num_sel">
<el-select
v-model="pagination.rowsPerPage"
placeholder="请选择"
size="small"
@change="handleSizeChange"
>
<el-option
v-for="item in pageOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
</div>
<div class="com_page_control">
<el-button
icon="el-icon-arrow-left"
circle
size="mini"
@click="handleCurrentChange(-1)"
:disabled="pagination.page == 1"
></el-button>
&nbsp;&nbsp;第{{ pagination.page }}页 / 共
{{ Math.ceil((total == 0 ? 1 : total) / pagination.rowsPerPage) }}页
<el-button
icon="el-icon-arrow-right"
circle
size="mini"
@click="handleCurrentChange(1)"
:disabled="
pagination.page >=
Math.ceil((total == 0 ? 1 : total) / pagination.rowsPerPage)
"
></el-button>
</div>
</div>
</section>
</div>
</template>
<script>
import CommodityCell from "@/components/service-list/commodity-cell-new.vue";
import CommodityCard from "@/components/service-list/commodity-card-new.vue";
export default {
components: {
"commodity-cell": CommodityCell,
"commodity-card": CommodityCard,
},
props: {
datas: {
type: Array,
default: () => {
[];
},
},
total: {
type: Number,
default: 0,
},
url: { type: String, default: "" },
paginationShow: {
type: Boolean,
default: false,
},
pageSizeShow: {
type: Boolean,
default: false,
},
urlFilter: { type: String, default: "" },
},
data: () => ({
pagination: {
rowsPerPage: 10,
page: 1,
},
pageOptions: [
{
value: "10",
label: "10",
},
{
value: "20",
label: "20",
},
{
value: "50",
label: "50",
},
],
}),
computed: {},
methods: {
handleSizeChange(val) {
this.pagination.rowsPerPage = val;
this.refreshData();
},
handleCurrentChange(val) {
this.pagination.page += val;
this.refreshData();
},
refreshData() {
this.$emit("refresh", this.pagination);
},
},
mounted() {},
watch: {
datas: {
handler(val) {},
},
url: {
handler() {
this.pagination = {
rowsPerPage: 10,
page: 1,
};
this.refreshData();
},
},
},
};
</script>
<style scoped>
.com-pagination {
margin-top: 20px;
font-size: 14px;
padding: 0 5%;
display: flex;
justify-content: space-between;
align-items: center;
}
.com_page_num {
width: 140px;
margin-right: 20px;
display: flex;
justify-content: space-around;
align-items: center;
}
.com_page_num_sel {
width: 50px;
font-size: 14px;
position: relative;
top: 1px;
}
.com_page_item {
display: flex;
justify-content: flex-end;
align-items: center;
}
.commodity_card {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.commodity_card_list {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.commodity_card_item {
margin: 10px 0;
}
.commodity_card_item_in {
margin: 0 auto;
}
.commodity_cell {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
</style>
<style>
.com_page_control .el-button {
border: 0;
}
.com_page_num .el-input__inner {
border: 0;
padding: 0;
}
</style>
\ No newline at end of file
src/components/service-list/service_list-new.vue 0 → 100644
View file @ c52fddf2
<template>
<!--
name: page type
url: detail page url
urlFilter: get filter data from this url
author: dixin
This component only for service shop list, so the explanation only look by me
-->
<div>
<div class="head_flex">
<el-breadcrumb separator="/" class="bread_crumb1 bread_left">
<el-breadcrumb-item :to="{ path: '/shop' }">
{{ $t("lang.service_shop") }}
</el-breadcrumb-item>
<el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
</el-breadcrumb>
<div class="input_right">
<el-input
v-model="search"
prefix-icon="el-icon-search"
placeholder="请输入关键字搜索服务"
@input="searchVal"
></el-input>
</div>
</div>
<block-radius :borRadius="12" :paddingNum="0">
<!-- filter -->
<div v-if="urlFilter" class="classification">
<div
v-for="(item, index) in filterLists"
:key="'cd' + index"
class="classification_line"
>
<div
class="classification_line_if"
v-if="item.childDomains && item.childDomains.length != 0"
>
<div class="classification_line_title">{{ item.name }}<span class="maohao">：</span></div>
<!-- <div
:class="
index == filterLists.length - 1
? 'classification_line_items'
: 'classification_line_items classification_line_items_border'
"
> -->
<div class="classification_line_items">
<div
:class="
openList[index] == 'up'
? 'classification_line_hid'
: 'classification_line_show'
"
>
<ul :id="item.id" class="classification_line_items_ul">
<li class="classification_line_items_li" :key="'cda' + index">
<div class="classification_span">
<span
@click="clickAll(index)"
:class="
activeOptions[index].length == 0
? 'classification_act'
: ''
"
>全部</span
>
</div>
</li>
<li
v-for="(items, indexs) in item.childDomains"
:class="
items.childDomains &&
openChildren[index].state == true &&
openChildren[index].index == items.id
? 'classification_line_items_li_act classification_line_items_li'
: 'classification_line_items_li'
"
:key="'cds' + indexs"
>
<div class="classification_span">
<span
@click="clickItem(index, indexs, items)"
:class="
activeOptions[index].indexOf(items.id) != -1
? 'classification_act'
: ''
"
>{{ items.name }}</span
>
<!-- if item have children, we will use an arrow to prompt -->
<i
v-if="
items.childDomains &&
openChildren[index].state == true &&
openChildren[index].index == items.id
"
@click="clickItemChild(index, indexs, items)"
class="el-icon-caret-top"
></i>
<i
v-else-if="
items.childDomains &&
openChildren[index].state == false &&
openChildren[index].index == items.id
"
@click="clickItemChild(index, indexs, items)"
class="el-icon-caret-bottom"
></i>
<i
v-else-if="items.childDomains"
@click="clickItemChild(index, indexs, items)"
class="el-icon-caret-bottom"
></i>
</div>
</li>
</ul>
<!-- if the word over the width, we will supply a button for show all word -->
<div
v-if="item.showOpen"
class="classification_line_items_open"
@click="clickOpen(index)"
>
<span v-if="openList[index] == 'down'">收起</span>
<span v-if="openList[index] == 'up'">更多</span>
<i
v-if="openList[index] == 'down'"
class="el-icon-caret-top"
></i>
<i
v-if="openList[index] == 'up'"
class="el-icon-caret-bottom"
></i>
</div>
</div>
<!-- filter children -->
<div v-if="openChildren[index].state">
<ul class="classification_children_ul">
<li
class="classification_children_li"
v-for="itemChildren in openChildren[index].act"
:key="itemChildren.id"
>
<div
class="classification_span"
@click="
clickChildren(
itemChildren.id,
index,
openChildren[index].index
)
"
>
<span
:class="
activeChildOptions[index].indexOf(itemChildren.id) !=
-1
? 'classification_act'
: ''
"
>{{ itemChildren.name }}</span
>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</block-radius>
<!-- filter button -->
<div class="btn_group">
<div
v-for="(item, index) in buttonFilter"
:key="item.name"
size="small"
:class="
index == activeBtn
? 'button_filter button_filter_act'
: 'button_filter'
"
@click="clickButtonFilter(index)"
>
{{ item.name }}
</div>
<!-- <div v-if="urlFilter == 'app'" class="btn_right_check">
<el-checkbox v-model="couldTwice" @change="changeTwice">
支持二次开发
</el-checkbox>
</div> -->
</div>
<!-- <div
class="gray_line"
v-if="
filterLists[0].childDomains.length != 0 ||
filterLists[1].childDomains.length != 0 ||
filterLists[2].childDomains.length != 0
"
></div> -->
<!-- the list -->
<commodity-list
:datas="lists && lists.length != 0 ? lists : []"
:total="total"
:url="url"
:urlFilter="urlFilter"
:paginationShow="false"
:pageSizeShow="true"
@refresh="getNewList"
></commodity-list>
</div>
</template>
<script>
import CommodityList from "@/components/service-list/commodity-list-new.vue";
import BlockRadius from "@/components/general/block-radius";
export default {
components: {
"commodity-list": CommodityList,
BlockRadius,
},
props: {
urlFilter: {
type: String,
default: "",
},
url: { type: String, default: "" },
name: { type: String, default: "" },
filterNames: {
type: Array,
default: () => {
[];
},
},
},
data: () => ({
search: "",
openList: [0, 0, 0, 0],
openChildren: [
{ index: null, state: false, act: null },
{ index: null, state: false, act: null },
{ index: null, state: false, act: null },
{ index: null, state: false, act: null },
],
activeOptions: [[], [], [], []],
activeChildOptions: [[], [], [], []],
buttonFilter: [
{
name: "综合排序",
},
{
name: "最新更新",
},
{
name: "最高人气",
},
{
name: "最好评价",
},
],
activeBtn: 0,
lists: [],
total: 0,
filterLists: [
{
id: 110,
name: "",
prop: "",
childDomains: [],
},
{
id: 10,
name: "",
prop: "serviceTypeInfo",
childDomains: [],
},
{
id: 11,
name: "",
prop: "serviceDomain",
childDomains: [],
},
{
id: 100,
name: "",
prop: "organizations",
childDomains: [],
},
],
page: 1,
limit: 20,
couldTwice: false,
refresh_app_1: false,
refresh_app_2: false,
refresh_app_3: false,
time_app: null,
times: null,
isKaiGuan: true,
}),
mounted() {
window.addEventListener("resize", this.judgeHeight);
window.addEventListener("scroll", this.menu, true);
},
destroyed() {
window.removeEventListener("resize", this.judgeHeight);
window.removeEventListener("scroll", this.menu, true);
},
watch: {
urlFilter: {
handler(val) {
if (val) {
this.openChildren = [
{ index: null, state: false, act: null },
{ index: null, state: false, act: null },
{ index: null, state: false, act: null },
{ index: null, state: false, act: null },
];
this.activeOptions = [[], [], [], []];
this.activeChildOptions = [[], [], [], []];
if (val == "app") {
this.$set(this.filterLists, 0, {
id: 110,
name: "部署来源",
prop: "",
childDomains: [
{
id: 2,
name: "平台应用",
prop: "",
childDomains: null,
},
{
id: 1,
name: "开发者应用",
prop: "",
childDomains: null,
},
],
});
} else {
this.$set(this.filterLists, 0, {
id: 110,
name: "",
prop: "",
childDomains: [],
});
}
this.getShopFilter();
}
},
},
filterNames: {
handler(val) {
for (let i = 0; i < val.length; i++) {
this.filterLists[i + 1].name = val[i];
}
this.activeBtn = 0;
},
},
},
methods: {
menu() {
if (this.isKaiGuan) {
let scroll =
this.getScrollTop() + this.getWindowHeight() - this.getScrollHeight();
if (scroll > -10) {
if (
(this.total != 0 && this.page * this.limit < this.total) ||
this.total == 0
) {
this.page++;
this.getShopList();
}
}
}
},
//滚动条在Y轴上的滚动距离
getScrollTop() {
var documentScrollTop = 0;
documentScrollTop = document.documentElement.scrollTop;
return documentScrollTop;
},
//文档的总高度
getScrollHeight() {
var documentScrollHeight = 0;
documentScrollHeight = document.documentElement.scrollHeight;
return documentScrollHeight;
},
//浏览器视口的高度
getWindowHeight() {
var windowHeight = 0;
windowHeight = document.documentElement.clientHeight;
return windowHeight;
},
getShopList() {
this.isKaiGuan = false;
if (this.urlFilter == "app") {
let query = {
online_state: this.activeOptions[0].join(","),
appTypes: this.activeOptions[1].join(","),
businessArea: this.activeOptions[2].join(","),
orgSource: this.activeOptions[3].join(","),
developable: Number(this.couldTwice),
order: this.activeBtn + 1,
page: this.page,
limit: this.limit,
search: this.search,
};
this.$api.serviceShop.getAppList(query).then((response) => {
if (response.data.success == "1") {
this.lists =
this.page == 1
? response.data.data
: this.lists.concat(response.data.data);
this.total = response.data.total;
this.isKaiGuan = true;
} else {
console.log(response.data.errMsg);
}
});
} else {
let query = {
serviceName: this.search,
serviceType1: this.urlFilter,
serviceType2s: this.activeOptions[1].join(","),
serviceType3s: this.activeChildOptions[1].join(","),
dataDomains: this.activeOptions[2].join(","),
organizeIds: this.activeOptions[3].join(","),
orderBy: this.activeBtn,
Page: this.page,
Size: this.limit,
};
this.$api.serviceShop.getServiceShopList(query).then((response) => {
if (response.data.success == "1") {
this.lists =
this.page == 1
? response.data.data
: this.lists.concat(response.data.data);
this.total = response.data.total;
this.isKaiGuan = true;
} else {
console.log(response.data.errMsg);
}
});
}
},
getShopFilter() {
if (this.urlFilter == "app") {
this.getAppArea();
this.getAppType();
this.getAppOrg();
this.time_app = setInterval(() => {
if (this.refresh_app_1 && this.refresh_app_2 && this.refresh_app_3) {
this.judgeHeight();
clearInterval(this.time_app);
}
}, 50);
} else {
let query = {
type: this.urlFilter,
};
this.$api.serviceShop.getServiceShopFilter(query).then((response) => {
if (response.data.success == 1) {
let data = response.data.data;
this.filterLists[1].childDomains = data.serviceTypeInfo
? data.serviceTypeInfo
: [];
this.filterLists[2].childDomains = data.serviceDomain
? data.serviceDomain
: [];
this.filterLists[3].childDomains = data.organizations
? data.organizations
: [];
if (this.urlFilter == "7") {
this.filterLists[1].childDomains = [];
}
setTimeout(() => {
this.judgeHeight();
}, 0);
} else {
console.log(response.data.errMsg);
}
});
}
},
judgeHeight() {
this.$nextTick(() => {
let list = this.filterLists;
for (let i = 0; i < list.length; i++) {
if (list[i].childDomains.length != 0) {
let offHeight = Math.ceil(
document.getElementById(list[i].id).offsetHeight
);
if (offHeight > 60) {
list[i].showOpen = true;
this.openList[i] = "up";
} else {
list[i].showOpen = false;
}
}
}
this.filterLists = [...list];
});
},
clickOpen(index) {
let list = this.openList;
if (list[index] == "up") {
this.$set(this.openList, index, "down");
} else if (list[index] == "down") {
this.$set(this.openList, index, "up");
}
// 这里不能像上面那样整体更新，因为啥我也不知道，我太菜
},
clickItem(index, indexs, items) {
let i = this.activeOptions[index].indexOf(items.id);
if (i == -1) {
this.activeOptions[index].push(items.id);
} else {
this.activeOptions[index].splice(i, 1);
if (items.childDomains) {
items.childDomains.forEach((e) => {
let i = this.activeChildOptions[index].indexOf(e.id);
if (i != -1) {
this.activeChildOptions[index].splice(i, 1);
}
});
}
}
this.getFilterValue();
},
clickItemChild(index, indexs, items) {
if (items.childDomains) {
if (this.openChildren[index].index == items.id) {
this.$set(this.openChildren, index, {
index: indexs,
state: !this.openChildren[index].state,
act: items.childDomains,
});
} else {
this.$set(this.openChildren, index, {
index: items.id,
state: true,
act: items.childDomains,
});
}
} else {
this.$set(this.openChildren, index, {
index: null,
state: false,
act: null,
});
}
},
clickButtonFilter(index) {
this.activeBtn = index;
this.page = 1;
this.getShopList();
},
clickChildren(id, index, fatherId) {
let i = this.activeChildOptions[index].indexOf(id);
let j = this.activeOptions[index].indexOf(fatherId);
if (i == -1) {
this.activeChildOptions[index].push(id);
if (j == -1) {
this.activeOptions[index].push(fatherId);
}
} else {
this.activeChildOptions[index].splice(i, 1);
}
this.getFilterValue();
},
getFilterValue() {
this.page = 1;
this.getShopList();
},
// search debonce 500ms
searchVal() {
if (this.times !== null) clearTimeout(this.times);
this.times = setTimeout(() => {
this.page = 1;
this.getShopList();
}, 500);
},
getNewList(val) {
console.log(val);
this.page = 1;
this.limit = 20;
this.getShopList();
},
clickAll(item) {
this.$set(this.activeOptions, item, []);
this.$set(this.activeChildOptions, item, []);
this.page = 1;
this.getShopList();
},
changeTwice() {
this.getShopList();
},
getAppArea() {
this.$api.serviceShop.getAppArea().then((response) => {
if (response.data.success == 1) {
this.filterLists[2].childDomains = response.data.data;
this.refresh_app_2 = true;
} else {
console.log(response.data.errMsg);
}
});
},
getAppType() {
this.$api.serviceShop.getAppType().then((response) => {
if (response.data.success == 1) {
this.filterLists[1].childDomains = response.data.data;
this.refresh_app_1 = true;
} else {
console.log(response.data.errMsg);
}
});
},
getAppOrg() {
this.$api.serviceShop.getAppOrg().then((response) => {
if (response.data.success == 1) {
this.filterLists[3].childDomains = response.data.data;
this.refresh_app_3 = true;
} else {
console.log(response.data.errMsg);
}
});
},
},
};
</script>
<style scoped>
.head_flex {
display: flex;
justify-content: space-between;
position: relative;
height: 40px;
top: -14px;
}
.bread_left {
width: 300px;
}
.input_right {
width: 360px;
position: relative;
height: 36px;
top: 6px;
}
.gray_line {
width: 100%;
margin: 20px auto;
height: 1px;
background-color: #e9ecf3;
}
.classification {
padding: 12px 16px 12px 32px;
}
.classification_line {
width: 100%;
}
.classification_line_if {
width: 100%;
display: flex;
align-items: flex-start;
}
.classification_line_title {
display: inline-block;
width: 90px;
padding: 12px 0;
text-align: left;
color: #8890a7;
font-size: 12px;
}
.classification_line_items {
width: calc(100% - 90px);
}
.classification_line_items_border {
border-bottom: 1px #e9ecf3 solid;
}
.classification_line_hid {
height: 40px;
width: 100%;
overflow: hidden;
display: inline-flex;
align-items: flex-start;
}
.classification_line_show {
width: 100%;
display: inline-flex;
align-items: flex-start;
}
.classification_line_items_ul {
display: inline-block;
width: calc(100% - 30px);
font-size: 0;
}
.classification_line_items_li {
display: inline-block;
padding: 12px 18px;
font-size: 12px;
}
.classification_line_items_li_act {
background-color: #fbfbfb;
border-left: 1px #e9ecf3 solid;
border-right: 1px #e9ecf3 solid;
}
.classification_span {
color: #58617a;
display: inline-block;
cursor: pointer;
}
.classification_act {
color: #fff;
position: relative;
z-index: 1;
}
.classification_act::after {
content: "";
position: absolute;
width: calc(100% + 16px);
height: calc(100% + 8px);
background-color: #3f4f9c;
border-radius: 3px;
top: -4px;
left: -8px;
z-index: -1;
}
.classification_line_items_open {
display: inline-block;
width: 60px;
padding: 12px 0;
cursor: pointer;
font-size: 12px;
text-align: right;
}
.classification_children_ul {
display: inline-block;
width: 100%;
background-color: #fbfbfb;
border-top: 1px #e9ecf3 solid;
}
.classification_children_li {
display: inline-block;
padding: 12px 18px;
color: #58617a;
}
.button_filter {
color: #8890a7;
font-size: 12px;
display: inline-block;
margin-right: 31px;
position: relative;
cursor: pointer;
}
.button_filter::after {
content: "";
width: 1px;
height: 16px;
background-color: #e3e5ef;
position: absolute;
right: -15px;
}
.button_filter:nth-child(4):after {
content: "";
width: 0;
}
.button_filter_act {
color: #515fe7;
}
.btn_group {
margin-top: 15px;
margin-bottom: 15px;
margin-left: 15px;
position: relative;
}
.btn_right_check {
position: absolute;
right: 20px;
top: 10px;
}
</style>
<style>
.head_flex .input_right .el-input__inner {
border-radius: 6px;
border: solid 1px #e7eaf6;
}
.head_flex .input_right .el-input--prefix .el-input__inner {
padding-left: 40px;
}
.head_flex .input_right .el-input__prefix,
.el-input__suffix {
left: 10px;
}
.head_flex .input_right .el-input--prefix .el-input__inner {
outline: none;
}
.head_flex .input_right .el-input__inner:focus-within {
border: 1px solid #626de9;
}
.head_flex .btn_right_check .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
background-color: #626de9;
border-color: #626de9;
}
.head_flex
.btn_right_check
.el-checkbox__input.is-checked
+ .el-checkbox__label {
color: #626de9;
}
.head_flex .btn_right_check .el-checkbox__input.is-focus .el-checkbox__inner {
border-color: #626de9;
}
</style>
src/components/service-list/service_list.vue → src/components/service-list/service_list-old.vue
View file @ c52fddf2
......@@ -190,7 +190,7 @@
</template>
<script>
import CommodityList from "@/components/service-list/commodity-list.vue";
import CommodityList from "@/components/service-list/commodity-list-new.vue";
import BlockRadius from "@/components/general/block-radius";
export default {
components: {
......@@ -410,6 +410,9 @@ export default {
this.filterLists[3].childDomains = data.organizations
? data.organizations
: [];
if (this.urlFilter == "7") {
this.filterLists[1].childDomains = [];
}
setTimeout(() => {
this.judgeHeight();
}, 0);
......
src/components/service-list/service_shop_menu-new.vue 0 → 100644
View file @ c52fddf2
<template>
<div class="service_shop_menu">
<ul class="service_shop_menu_list">
<li v-for="(item, index) in menuList" :key="index" @click="active(item.visit_url)">
<img
v-if="item.visit_url == actives"
:src="item.active != '' ? require('@/assets/imgs/' + item.active + '.png') : ''"
class="menu_img"
/>
<img v-else :src="require('@/assets/imgs/' + item.default + '.png')" class="menu_img" />
<span
:class="item.visit_url == actives ? 'menu_item_active':'menu_item'"
>{{ item.menu_name }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {},
data() {
return {
actives: "",
menuList: [],
};
},
computed: {
getActive() {
return this.$store.state.serviceShopMenu;
},
},
watch: {
getActive(newVal) {
this.getActiveMenu(newVal);
},
},
mounted() {
this.getShopMenu();
this.$store.commit("serviceShopMenuAct", this.$route.path);
this.actives = this.$store.state.serviceShopMenu;
},
methods: {
active(val) {
this.$store.commit("serviceShopMenuAct", val);
this.$router.push(val);
},
getActiveMenu(val) {
this.actives = val;
},
getShopMenu() {
this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
if (response.data.success == 1) {
let arr = response.data.data[0].Child;
let shopArr = [];
let asd = arr.find(item => {
return item.visit_url == "/services_shop"
})
shopArr = asd.Child;
if (shopArr && shopArr.length != 0) {
Array.from(shopArr).forEach((item) => {
let uri = item.visit_url.substring(6);
if (uri.indexOf("/") != -1) {
uri = uri.substring(0, uri.indexOf("/"));
}
switch (uri) {
case "data_service_list":
item.active = "shop_tool_ic_sjfw_sel";
item.default = "shop_tool_ic_sjfw";
break;
case "space_time_service_list":
item.active = "shop_tool_ic_skfw_sel";
item.default = "shop_tool_ic_skfw";
break;
case "video_service_list":
item.active = "shop_tool_ic_spfw_sel";
item.default = "shop_tool_ic_spfw";
break;
case "perception_service_list":
item.active = "shop_tool_ic_ganzhifw_sel";
item.default = "shop_tool_ic_ganzhifw";
break;
case "comprehensive_app_list":
item.active = "shop_tool_ic_zhyyfw_sel";
item.default = "shop_tool_ic_zhyyfw";
break;
case "cloud":
item.active = "shop_tool_ic_yzyfw_sel";
item.default = "shop_tool_ic_yzyfw";
break;
case "app_store_list":
item.active = "shop_ic_yysd_sel";
item.default = "shop_ic_yysd";
break;
default:
item.active = "1";
item.default = "1";
break;
}
});
}
this.menuList = shopArr;
}
});
},
},
};
</script>
<style scoped>
.service_shop_menu {
background-color: #0d1847;
position: fixed;
top: 76px;
left: calc(50% - 600px);
width: 176px;
padding: 8px;
background-color: #ffffff;
box-shadow: 0px 3px 6px 0px
rgba(15, 19, 65, 0.04);
border-radius: 8px;
}
.service_shop_menu_list > li {
box-sizing: border-box;
height: 40px;
padding: 8px 0 0 22px;
margin-bottom: 16px;
font-size: 15px;
line-height: 24px;
cursor: pointer;
}
.service_shop_menu_list > li:nth-last-child(1) {
margin-bottom: 0;
}
.service_shop_menu_list > li:hover,
.service_shop_menu_list > li.current {
background-color: rgba(242, 246, 253, 0.4);
color: #515fe7;
}
.menu_img {
width: 24px;
margin-right: 6px;
}
.menu_item {
position: relative;
font-weight: bold;
font-size: 15px;
color: #96a0c5;
top: -6px;
}
.menu_item_active {
position: relative;
font-weight: bold;
font-size: 15px;
color: #515fe7;
top: -6px;
}
</style>
src/components/service-tabs/service-tab-detail.vue
View file @ c52fddf2
......@@ -7,10 +7,18 @@
>
<h3 class="detail-title" v-text="item.name + '：'"></h3>
<service-steps
v-if="item.type == 'step'"
:data="item.value"
></service-steps>
<div class="step_div" v-if="item.type == 'step'">
<img
class="step_img"
:src="require('@/assets/imgs/shop_img_hqlc.png')"
/>
</div>
<div class="step_div" v-else-if="item.type == 'step_app'">
<img
class="step_img"
:src="require('@/assets/imgs/shop_img_hqlc_yingyong.png')"
/>
</div>
<p
v-else-if="item.type == 'text'"
class="detail-text"
......@@ -21,6 +29,34 @@
class="detail-code"
v-html="item.value"
></div>
<div v-else-if="item.type == 'table-list'">
<table class="xq_table">
<tr>
<td>数据领域：{{ item.value.sectors_name }}</td>
<td>服务类型：{{ item.value.data_service_type1_name }}&nbsp;&nbsp;&nbsp;&nbsp;{{ item.value.data_service_type2_name }}</td>
</tr>
<tr>
<td>发布时间：{{ helper.dateStringTransform(item.value.create_time) }}</td>
<td>更新时间：{{ helper.dateStringTransform(item.value.update_date) }}</td>
</tr>
<tr>
<td>请求方式：{{ item.value.req_type }}</td>
<td>编码格式：{{ item.value.encode_method }}</td>
</tr>
</table>
</div>
<div v-else-if="item.type == 'app-list'">
<table class="xq_table">
<tr>
<td>部署来源：{{ item.value.online_state_name }}</td>
<td>上线时间：{{ item.value.create_date }}</td>
</tr>
<tr>
<td>业务领域：{{ item.value.ywly_name }}</td>
<td>应用类型：{{ item.value.type_name }}</td>
</tr>
</table>
</div>
<workflows-view
v-else-if="item.type == 'workflows'"
:id="item.value"
......@@ -68,6 +104,7 @@
<script>
import serviceSteps from "@/components/service-tabs/service-steps";
import workflowsView from "@/components/work-flow/workflows-view";
import helper from "@/services/helper.js";
export default {
components: {
......@@ -80,18 +117,31 @@ export default {
required: true,
},
},
data() {
return {
helper
}
}
};
</script>
<style scoped>
.step_div {
margin-top: 16px;
}
.step_img {
width: 1140px;
height: 152px;
}
.detail-item:not(:last-child) {
margin-bottom: 20px;
}
.detail-item .detail-title {
font-size: 14px;
line-height: 25px;
line-height: 14px;
color: #8890a7;
margin-bottom: 3px;
margin-bottom: 8px;
margin-left: 8px;
}
.detail-item .detail-text {
word-break: break-all;
......@@ -111,4 +161,44 @@ export default {
line-height: 25px;
margin-top: 8px;
}
.xq_table {
border: solid 1px #dde0e9;
width: 100%;
border-collapse: collapse;
border-spacing: 0;
empty-cells: show;
margin-top: 16px;
}
.xq_table caption {
color: #000;
padding: 1em 0;
text-align: center;
}
.xq_table td,
.xq_table th {
border-left: 1px solid #cbcbcb;
border-width: 0 0 0 1px;
font-size: inherit;
margin: 0;
overflow: visible;
padding: 0.5em 1em;
}
.xq_table thead {
background-color: #e0e0e0;
color: #000;
text-align: left;
vertical-align: bottom;
}
.xq_table td {
background-color: transparent;
}
.xq_table td {
color: #242c43;
font-size: 14px;
line-height: 30px;
border-bottom: 1px solid #cbcbcb;
}
.xq_table tbody > tr:last-child > td {
border-bottom-width: 0;
}
</style>
src/components/service-tabs/service-tab-provider.vue
View file @ c52fddf2
<template>
<div class="service_tab-provider" v-if="data">
<div class="provider-left">
<el-avatar
shape="square"
:size="156"
fit="cover"
:src="data.picture_path"
/>
</div>
<div class="provider-right">
<p class="provider_name" v-text="data.organization_name"></p>
<div class="provider_info">
<p>
<span>联系人：</span>
<span v-text="data.user_name"></span>
</p>
<p>
<span>联系电话：</span>
<span v-text="data.phone"></span>
</p>
<div>
<div class="pro_title">机构信息：</div>
<div class="pro_div">
<div class="pro_img_d">
<img :src="data.picture_path" class="pro_img" />
</div>
<div class="pro_1">机构名称：{{ data.organization_name }}</div>
<div class="pro_2">联系人：{{ data.user_name }}</div>
<div class="pro_3">联系电话：{{ data.phone }}</div>
</div>
<div class="pro_title">{{ isApp ? '应用规格：' : '服务规格：'}}</div>
<table-um
ref="apply_service_state_table"
:headers="isApp ? dataHeadersApp : dataHeaders"
:stripe="false"
:datas="data.serviceRequestSpcsTable"
></table-um>
</div>
</template>
<script>
import TableUm from "@/components/table/table-um";
export default {
props: {
data: {
type: Object,
required: true,
},
isApp: {
type: Boolean,
default: false
}
},
data() {
return {
dataHeaders: [
{
label: "规格类型",
prop: "type",
align: "left",
width: "200"
},
{
label: "规格",
prop: "spce",
align: "left",
width: "300"
},
{
label: "购买时长",
prop: "times",
align: "center",
width: "200"
},
{
label: "规格说明",
prop: "descript",
align: "left",
},
],
dataHeadersApp: [
{
label: "规格类别",
prop: "type",
align: "left",
width: "200"
},
{
label: "时长",
prop: "times",
align: "center",
width: "200"
},
{
label: "价格",
prop: "spcs",
align: "center",
width: "200"
},
{
label: "规格说明",
prop: "specifications",
align: "left",
},
],
};
},
components: {
TableUm,
},
};
</script>
<style scoped>
.service_tab-provider {
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.provider-left {
flex-shrink: 0;
padding: 3px;
background-color: #f6f7fb;
border-radius: 9px;
font-size: 0;
}
.provider-left > .el-avatar--square {
border-radius: 7px;
.pro_title {
font-size: 14px;
line-height: 14px;
color: #8890a7;
margin-bottom: 8px;
margin-left: 8px;
}
.provider-right {
flex-grow: 1;
margin-left: 20px;
.pro_div {
display: grid;
grid-template-columns: 88px 1fr 1fr;
grid-template-rows: 44px 44px;
grid-row-gap: 1px;
grid-column-gap: 1px;
background-color: #dde0e9;
padding: 1px;
margin-bottom: 24px;
}
.provider-right > .provider_name {
font-size: 20px;
font-weight: bold;
color: #0d1847;
line-height: 36px;
.pro_img_d {
width: 88px;
height: 89px;
padding: 8px;
grid-row-start: 1;
grid-row-end: 3;
background-color: #fff;
}
.provider-right > .provider_info {
padding: 20px;
background-color: #f6f7fb;
border-radius: 6px;
margin-top: 20px;
.pro_img {
width: 100%;
height: 100%;
}
.provider-right > .provider_info > p {
font-size: 14px;
color: #242c43;
line-height: 25px;
.pro_1 {
grid-column-start: 2;
grid-column-end: 4;
line-height: 44px;
padding-left: 24px;
background-color: #fff;
}
.provider-right > .provider_info > p:not(:first-child) {
margin-top: 16px;
.pro_2 {
line-height: 44px;
padding-left: 24px;
background-color: #fff;
}
.provider-right > .provider_info > p > span:first-child {
color: #8890a7;
.pro_3 {
line-height: 44px;
padding-left: 24px;
background-color: #fff;
}
</style>
src/components/service-tabs/service-tab-specification.vue
View file @ c52fddf2
<template>
<div class="service_tab-specification" v-if="data">
<div class="specification_header">
<p>申请方式：</p>
<type-group v-model="type" :types="types"></type-group>
</div>
<el-table class="specification_table" :data="tableData" :border="false">
<el-table-column width="30"></el-table-column>
<el-table-column prop="name" label="规格" width="360"></el-table-column>
......@@ -21,22 +17,12 @@ export default {
},
props: {
data: {
type: Array,
type: Object,
required: true,
},
},
data: () => ({
type: 1,
types: [
{
name: "按月",
value: 1,
},
{
name: "按年",
value: 2,
},
],
}),
computed: {
tableData() {
......
src/components/service-tabs/service-tabs.vue
View file @ c52fddf2
......@@ -13,23 +13,12 @@
></service-tab-detail>
</el-tab-pane>
<!-- 规格说明 -->
<el-tab-pane
:label="specificationTitle"
name="specification"
v-if="specificationData"
>
<service-tab-specification
class="service_info"
:data="specificationData"
></service-tab-specification>
</el-tab-pane>
<!-- 提供组织 -->
<el-tab-pane :label="providerTitle" name="provider" v-if="providerData">
<service-tab-provider
class="service_info"
:data="providerData"
:isApp="detailTitle == '应用详情信息'"
></service-tab-provider>
</el-tab-pane>
......@@ -78,8 +67,8 @@ export default {
detailData: {
type: Array,
},
specificationData: {
type: Array,
serviceRequestSpcs: {
type: Object,
},
providerData: {
type: Object,
......@@ -105,8 +94,11 @@ export default {
<style scoped>
.service_info_tab {
border: none;
box-shadow: none;
box-shadow: 0px 4px 8px 0px
rgba(0, 7, 101, 0.04);
border-radius: 8px;
margin-bottom: 30px;
overflow: hidden;
}
.service_info {
padding: 35px 40px 40px;
......@@ -127,15 +119,33 @@ export default {
background-color: #fff;
border-top: 4px solid #fff;
border-bottom: 2px solid #f4f7fc;
font-size: 15px;
font-weight: normal;
}
.service_info_tab.el-tabs--border-card
> .el-tabs__header
.el-tabs__item.is-active {
border-top: 4px solid #f5ab4c;
border-right: 2px solid #fcefd6;
border-top: 4px solid #fff;
border-right: 2px solid #f4f7fc;
border-bottom: 2px solid #fff;
border-left: 2px solid #fcefd6;
border-left: 2px solid #f4f7fc;
border-radius: 6px 6px 0 0;
color: #e56600 !important;
font-size: 15px;
font-weight: normal;
position: relative;
}
.service_info_tab.el-tabs--border-card
> .el-tabs__header
.el-tabs__item.is-active::before {
content: "";
position: absolute;
width: calc(100% + 3px);
height: 4px;
background-color: #f5ab4c;
border-radius: 4px 4px 0 0;
left: -2px;
top: -3px;
}
.service_info_tab.el-tabs--border-card
> .el-tabs__header
......
src/components/shop-cloud/shop-cloud-new.vue 0 → 100644
View file @ c52fddf2
<template>
<div class="shop_cloud">
<el-breadcrumb separator="/" class="bread_crumb1 bread_left">
<el-breadcrumb-item :to="{ path: '/shop' }">服务超市</el-breadcrumb-item>
<el-breadcrumb-item>{{ name }}</el-breadcrumb-item>
</el-breadcrumb>
<block-radius :paddingNum="24">
<el-form
ref="form"
:inline="true"
:rules="ruleBasis"
:model="form"
class="form_block"
>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item class="form_item">
<div class="form_item_title">申请组织：</div>
<el-input
v-model="form.department_name"
:disabled="true"
placeholder="请输入申请组织"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="form_item nobottom" prop="link_man">
<div class="form_item_title">部门联系人：</div>
<el-input
v-model="form.link_man"
placeholder="请输入联系人姓名"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item class="form_item nobottom" prop="phone">
<div class="form_item_title">联系电话：</div>
<el-input
v-model="form.phone"
placeholder="请输入联系人电话"
></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</block-radius>
<block-radius :paddingNum="24">
<el-tabs v-model="activeName" class="cloud_form" @tab-click="tabClick">
<el-tab-pane label="申请新的工作区域" name="0">
<el-form ref="formNew" :model="formNew" :rules="ruleNew">
<el-row :gutter="24">
<el-col :span="24">
<div class="form_title">基本信息</div>
</el-col>
<el-col :span="12">
<el-form-item prop="namespace" class="form_item">
<div class="form_item_title">工作区域名称：</div>
<el-input
v-model="formNew.namespace"
placeholder="请输入工作区域英文名称"
></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="workplace" class="form_item">
<div class="form_item_title">中文名称：</div>
<el-input
v-model="formNew.workplace"
placeholder="请输入工作区域中文名称"
></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item prop="workplacedesc" class="form_item nobottom">
<div class="form_item_title">描述信息：</div>
<el-input
type="textarea"
v-model="formNew.workplacedesc"
placeholder="请输入工作区域描述信息"
></el-input>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="form_title">工作区域申请规格</div>
</el-col>
<el-col :span="8">
<el-form-item prop="cpu" class="form_item input_has_right">
<div class="form_item_title">CPU：</div>
<el-select
v-model="formNew.cpu"
@change="changeCPU"
placeholder="请选择CPU使用量"
>
<el-option
v-for="item in optionsCPU"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<div class="input_right input_right_top">核</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="memory" class="form_item input_has_right">
<div class="form_item_title">内存：</div>
<el-select
v-model="formNew.memory"
placeholder="请选择内存使用量"
@change="setContainerGroup(0)"
>
<el-option
v-for="item in optionsRAM"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<div class="input_right input_right_top">GB</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
prop="containerGroup"
class="form_item input_has_right"
>
<div class="form_item_title">容器组：</div>
<el-input-number
v-model="formNew.containerGroup"
controls-position="right"
:min="1"
:max="24"
placeholder="取值范围[0，24]"
></el-input-number>
<div class="input_right">个</div>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="form_item_title">数据盘（可选）：</div>
</el-col>
<el-col :span="8">
<el-form-item class="form_item input_has_right nobottom">
<el-input-number
v-model="formNew.dataDisk"
controls-position="right"
:min="0"
:max="1000"
placeholder="请选择增加数据盘的数量"
></el-input-number>
<div class="input_right">块</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="form_item input_has_right nobottom">
<el-input-number
v-model="formNew.perDataDisk"
controls-position="right"
:min="0"
:max="1000"
placeholder="请选择每块数据盘的容量"
></el-input-number>
<div class="input_right">GB</div>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="form_title">单个容器组规格</div>
</el-col>
<el-col :span="24">
<div class="form_item_title">CPU：</div>
</el-col>
<el-col :span="8">
<el-form-item
prop="perCPUs"
class="form_item input_has_left_right"
>
<div class="input_left">最高</div>
<el-input-number
v-model="formNew.perCPUs"
controls-position="right"
:min="0"
:max="10"
placeholder="CPU最高使用量"
></el-input-number>
<div class="input_right">核</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
prop="perCPU"
class="form_item input_has_left_right"
>
<div class="input_left">默认</div>
<el-input-number
v-model="formNew.perCPU"
controls-position="right"
:min="0"
:max="10"
placeholder="CPU默认使用量"
></el-input-number>
<div class="input_right">核</div>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="form_item_title">内存：</div>
</el-col>
<el-col :span="8">
<el-form-item
prop="perRAMs"
class="form_item input_has_left_right nobottom"
>
<div class="input_left">最高</div>
<el-input-number
v-model="formNew.perRAMs"
controls-position="right"
:min="0"
:max="10"
placeholder="内存最高使用量"
></el-input-number>
<div class="input_right">GB</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
prop="perRAM"
class="form_item input_has_left_right nobottom"
>
<div class="input_left">默认</div>
<el-input-number
v-model="formNew.perRAM"
controls-position="right"
:min="0"
:max="10"
placeholder="内存默认使用量"
></el-input-number>
<div class="input_right">GB</div>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="form_title">其他信息</div>
</el-col>
<el-col :span="16">
<el-form-item
prop="appDuration"
class="form_item input_has_right"
>
<div class="form_item_title">申请时长：</div>
<el-input-number
v-model="formNew.appDuration"
controls-position="right"
:min="1"
:max="1000"
></el-input-number>
<!-- <el-select
v-model="formNew.durType"
class="input_right_select"
placeholder="请选择申请时长"
>
<el-option
v-for="item in durationOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select> -->
<div class="input_right">月</div>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item class="form_item">
<div class="form_item_title">申请文件：</div>
<info-list
:list_arr="docTemplate"
class="doc_template"
></info-list>
<upload-file
:multiple="false"
:unique="false"
:max="1"
type="zip"
:readOnly="false"
:drag="true"
@getNewList="getNewList"
class="up_f"
></upload-file>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-tab-pane>
<el-tab-pane label="调整现有工作区域" name="1">
<el-row :gutter="24">
<el-col :span="16">
<div class="select_title">选择要进行调整的工作区域：</div>
<div class="form_item">
<el-select
v-model="workSpace"
@change="getForm"
placeholder="请选择"
>
<el-option
v-for="(item, index) in workSpaceOptions"
:key="index"
:label="item.namespace"
:value="index"
></el-option>
</el-select>
</div>
</el-col>
</el-row>
<div v-show="formShow">
<el-form ref="formOld" :model="formOld" :rules="ruleOld">
<el-row :gutter="24">
<el-col :span="24">
<div class="form_title">工作区域规格调整</div>
</el-col>
<el-col :span="24">
<div class="now_spec">当前规格：</div>
<div class="now_spec_cards">
<div
class="now_spec_card"
v-for="(item, index) in specArr"
:key="index + 'spec'"
>
<img
class="now_spec_card_img"
:src="require('@/assets/imgs/' + item.src + '.png')"
/>
<span class="now_spec_card_title">
{{ item.title }}
</span>
<span class="now_spec_card_val">
{{
item.val +
" " +
(item.title == "CPU"
? "核"
: item.title == "内存"
? "GB"
: "个")
}}
</span>
</div>
</div>
</el-col>
<el-col :span="8">
<el-form-item prop="cpu" class="form_item input_has_right">
<div class="form_item_title">申请CPU调整为：</div>
<el-select
v-model="formOld.cpu"
placeholder="请选择CPU使用量"
@change="changeCPU"
>
<el-option
v-for="item in optionsCPU"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<div class="input_right input_right_top">核</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item prop="memory" class="form_item input_has_right">
<div class="form_item_title">申请内存调整为：</div>
<el-select
v-model="formOld.memory"
placeholder="请选择内存使用量"
@change="setContainerGroup(1)"
>
<el-option
v-for="item in optionsRAM"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<div class="input_right input_right_top">GB</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
prop="containerGroup"
class="form_item input_has_right"
>
<div class="form_item_title">申请容器组调整为：</div>
<el-input-number
v-model="formOld.containerGroup"
controls-position="right"
:min="1"
:max="24"
placeholder="取值范围[0，24]"
></el-input-number>
<div class="input_right">个</div>
</el-form-item>
</el-col>
<el-col :span="24" v-if="dataDiskList.length != 0">
<el-form-item class="form_item input_has_right">
<div class="form_item_title_1">调整数据盘：</div>
<table-um
ref="apply_service_state_table"
:headers="dataDiskHeaders"
:stripe="true"
:datas="dataDiskList"
@primary-del="delItem"
:maxheight="260"
size="small"
class="disk__table"
></table-um>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item class="form_item nobottom">
<div class="form_item_title">增加数据盘：</div>
<!-- <el-select v-model="formOld.store_type" placeholder="请选择数据盘类型">
<el-option
v-for="item in options_store_type"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>-->
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="form_item input_has_right nobottom">
<el-input-number
v-model="formOld.dataDisk"
controls-position="right"
:min="0"
:max="1000"
placeholder="请选择增加数据盘的数量"
></el-input-number>
<div class="input_right">块</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="form_item input_has_right nobottom">
<el-input-number
v-model="formOld.perDataDisk"
controls-position="right"
:min="0"
:max="1000"
placeholder="请选择每块数据盘的容量"
></el-input-number>
<div class="input_right">GB</div>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="form_title">单个容器组规格设定</div>
</el-col>
<el-col :span="24">
<div class="now_spec">当前规格：</div>
<div class="now_spec_cards">
<div
class="now_rqz_card"
v-for="(item, index) in rqzArr"
:key="index + 'rqz'"
>
<img
class="now_rqz_card_img"
:src="require('@/assets/imgs/' + item.src + '.png')"
/>
<span class="now_rqz_card_title">
{{ item.title }}
</span>
<div class="now_rqz_card_val_div">
<span class="now_rqz_card_val">
最高&nbsp;{{ item.max }}&nbsp;{{
item.title == "CPU" ? "核" : "GB"
}}
&nbsp;&nbsp;&nbsp;&nbsp;
</span>
<span class="now_rqz_card_val">
默认&nbsp;{{ item.default }}&nbsp;{{
item.title == "CPU" ? "核" : "GB"
}}
</span>
</div>
</div>
</div>
</el-col>
<el-col :span="24">
<div class="form_item_title">CPU：</div>
</el-col>
<el-col :span="8">
<el-form-item
prop="perCPUs"
class="form_item input_has_left_right"
>
<div class="input_left">最高</div>
<el-input-number
v-model="formOld.perCPUs"
controls-position="right"
:min="0"
:max="10"
placeholder="请设置CPU最高使用量"
></el-input-number>
<div class="input_right">核</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
prop="perCPU"
class="form_item input_has_left_right"
>
<div class="input_left">默认</div>
<el-input-number
v-model="formOld.perCPU"
controls-position="right"
:min="0"
:max="10"
placeholder="请设置CPU默认使用量"
></el-input-number>
<div class="input_right">核</div>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="form_item_title">内存：</div>
</el-col>
<el-col :span="8">
<el-form-item
prop="perRAMs"
class="form_item input_has_left_right nobottom"
>
<div class="input_left">最高</div>
<el-input-number
v-model="formOld.perRAMs"
controls-position="right"
:min="0"
:max="10"
placeholder="请设置内存最高使用量"
></el-input-number>
<div class="input_right">GB</div>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item
prop="perRAM"
class="form_item input_has_left_right nobottom"
>
<div class="input_left">默认</div>
<el-input-number
v-model="formOld.perRAM"
controls-position="right"
:min="0"
:max="10"
placeholder="请设置内存默认使用量"
></el-input-number>
<div class="input_right">GB</div>
</el-form-item>
</el-col>
<el-col :span="24">
<div class="form_title">其他信息</div>
</el-col>
<el-col :span="24">
<div class="now_spec">当前规格：</div>
<div class="now_spec_card_time">
<div>
<img
class="now_spec_card_time_img"
:src="require('@/assets/imgs/ic_shijian.png')"
/>
<span class="now_spec_card_time_title"
>当前工作区域到期时间</span
>
<span class="now_spec_card_time_val">
{{
helper.dateStringTransform(paramsOld.cloud_end_time)
}}
</span>
</div>
</div>
</el-col>
<el-col :span="16">
<el-form-item class="form_item input_has_right">
<div class="form_item_title">申请续期：</div>
<el-input-number
v-model="formOld.appDuration"
controls-position="right"
:min="1"
:max="1000"
></el-input-number>
<div class="input_right">月</div>
</el-form-item>
</el-col>
<el-col :span="22">
<el-form-item class="form_item">
<div class="form_item_title">申请文件：</div>
<info-list
:list_arr="docTemplate"
class="doc_template"
></info-list>
<upload-file
:multiple="false"
:unique="false"
:max="1"
type="zip"
:readOnly="false"
:drag="true"
@getNewList="getNewListOld"
class="up_f"
></upload-file>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
</block-radius>
<block-radius v-if="!(activeName == 1 && !formShow)">
<div class="btn_footer fyzj_item">
<div class="fyzj">
<p class="fyzj_p">
<span v-if="getSumCoin > user_info.account_balance" class="yebz">
余额不足，请联系超级管理员进行充值
</span>
费用总计：<span class="fyzj_span">
{{ getSumCoin }}
</span>
<span class="fyzj_qian">金币</span>
</p>
<p class="ckfymx">
<span @click="dialogFymx = true" class="ckfymx_a">
查看费用明细
</span>
<span class="ckfymx_qian"
>账户余额：{{ user_info.account_balance }} 金币</span
>
</p>
</div>
<el-button
:class="
getSumCoin <= user_info.account_balance ? 'submit' : 'nosubmit'
"
:disabled="getSumCoin > user_info.account_balance"
@click="submitApp"
>
提交申请
</el-button>
</div>
</block-radius>
<el-dialog
title="申请信息确认"
:visible.sync="dialogVisible"
width="580px"
class="cloud_dia"
>
<el-row>
<el-col :span="24">
<span class="dia_item_title">申请组织：</span>
<span class="dia_item_val">{{ diaForm.department_name }}</span>
</el-col>
<el-col :span="10" v-if="diaForm.link_man">
<span class="dia_item_title">组织联系人：</span>
<span class="dia_item_val">{{ diaForm.link_man }}</span>
</el-col>
<el-col :span="10" v-if="diaForm.phone">
<span class="dia_item_title">联系电话：</span>
<span class="dia_item_val">{{ diaForm.phone }}</span>
</el-col>
<el-col :span="10">
<span class="dia_item_title">申请类型：</span>
<span class="dia_item_val">
{{ activeName == 0 ? "新资源申请" : "已有资源升级" }}
</span>
</el-col>
<el-col :span="10" v-if="activeName == '1'">
<span class="dia_item_title">工作区域名称：</span>
<span class="dia_item_val">{{ diaForm.namespace }}</span>
</el-col>
<el-col :span="14" v-if="activeName == '0' && diaForm.apply_file_name">
<span class="dia_item_title">上传申请文件：</span>
<span class="dia_item_val">{{ diaForm.apply_file_name }}</span>
</el-col>
<el-col
:span="24"
v-else-if="activeName == '1' && diaForm.apply_file_name"
>
<span class="dia_item_title">上传申请文件：</span>
<span class="dia_item_val">{{ diaForm.apply_file_name }}</span>
</el-col>
<el-col :span="24">
<div class="dia_block" v-if="activeName == 0">
<span class="dia_item_all_title">基本信息：</span>
<div class="dia_block_item">
<div class="dia_block_item_in">
<span class="dia_block_item_title">工作区域名称：</span>
<span class="dia_block_item_val">{{ diaForm.namespace }}</span>
</div>
<div class="dia_block_item_in">
<span class="dia_block_item_title">中文名称：</span>
<span class="dia_block_item_val">{{ diaForm.workplace }}</span>
</div>
<div class="dia_block_item_in">
<span class="dia_block_item_title">描述信息：</span>
<span class="dia_block_item_val">
{{ diaForm.workplacedesc }}
</span>
</div>
</div>
<span class="dia_item_all_title">工作区域申请规格：</span>
<div class="dia_block_item">
<div class="dia_block_item_in">
<span class="dia_block_item_title">CPU：</span>
<span class="dia_block_item_val">{{ diaForm.cpu }}</span>
</div>
<div class="dia_block_item_in">
<span class="dia_block_item_title">内存：</span>
<span class="dia_block_item_val">{{ diaForm.memory }}</span>
</div>
<div class="dia_block_item_in">
<span class="dia_block_item_title">容器组：</span>
<span class="dia_block_item_val"
>{{ diaForm.containerGroup }}个</span
>
</div>
<div
class="dia_block_item_in"
v-if="
diaForm.dataDisk &&
diaForm.perDataDisk &&
Number(diaForm.dataDisk) != 0 &&
Number(diaForm.perDataDisk) != 0
"
>
<span class="dia_block_item_title">数据盘：</span>
<span class="dia_block_item_val">
{{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB
</span>
</div>
<!-- <div class="dia_block_item_in" v-if="diaForm.dataDisk != 0">
<span class="dia_block_item_title">数据盘类型：</span>
<span class="dia_block_item_val">{{ diaForm.store_type }}</span>
</div>-->
</div>
<span class="dia_item_all_title">单个容器组规格：</span>
<div class="dia_block_item">
<div class="dia_block_item_in">
<span class="dia_block_item_title">CPU：</span>
<p class="dia_block_item_val">
<span class="val_has_2"
>最高&nbsp;{{ diaForm.perCPUs }}核</span
>
<span class="val_has_2"
>默认&nbsp;{{ diaForm.perCPU }}核</span
>
</p>
</div>
<div class="dia_block_item_in">
<span class="dia_block_item_title">内存：</span>
<p class="dia_block_item_val">
<span class="val_has_2"
>最高&nbsp;{{ diaForm.perRAMs }}GB</span
>
<span class="val_has_2"
>默认&nbsp;{{ diaForm.perRAM }}GB</span
>
</p>
</div>
</div>
<span class="dia_item_all_title">申请时长：</span>
<div class="dia_block_item">
<div class="dia_block_item_in">
<span class="dia_block_item_title">申请时长</span>
<span class="dia_block_item_val">
{{ diaForm.appDuration
}}{{ diaForm.durType == 1 ? "个月" : "年" }}
</span>
</div>
</div>
</div>
<div v-else>
<span class="dia_item_title margin_top_10">原规格：</span>
<div class="dia_block">
<span class="dia_item_all_title">工作区域：</span>
<div class="dia_block_item">
<div class="dia_block_item_in">
<span class="dia_block_item_title">CPU：</span>
<span class="dia_block_item_val">{{ paramsOld.cpu }}核</span>
</div>
<div class="dia_block_item_in">
<span class="dia_block_item_title">内存：</span>
<span class="dia_block_item_val"
>{{ paramsOld.memory }}GB</span
>
</div>
<div class="dia_block_item_in">
<span class="dia_block_item_title">容器组：</span>
<span class="dia_block_item_val"
>{{ paramsOld.containers }}个</span
>
</div>
</div>
<span class="dia_item_all_title">单个容器组规格：</span>
<div class="dia_block_item">
<div class="dia_block_item_in">
<span class="dia_block_item_title">CPU：</span>
<p class="dia_block_item_val">
<span class="val_has_2"
>最高&nbsp;{{ paramsOld.one_cpu_max }}核</span
>
<span class="val_has_2"
>默认&nbsp;{{ paramsOld.one_cpu_min }}核</span
>
</p>
</div>
<div class="dia_block_item_in">
<span class="dia_block_item_title">内存：</span>
<p class="dia_block_item_val">
<span class="val_has_2"
>最高&nbsp;{{ paramsOld.one_memory_max }}GB</span
>
<span class="val_has_2"
>默认&nbsp;{{ paramsOld.one_memory_min }}GB</span
>
</p>
</div>
</div>
<span class="dia_item_all_title">申请时长：</span>
<div class="dia_block_item">
<div class="dia_block_item_in">
<span class="dia_block_item_title">到期时间：</span>
<span class="dia_block_item_val">
{{ helper.dateStringTransform(paramsOld.cloud_end_time) }}
</span>
</div>
</div>
</div>
<span class="dia_item_title margin_top_10">调整至：</span>
<div class="dia_block">
<span class="dia_item_all_title">工作区域：</span>
<div class="dia_block_item">
<div class="dia_block_item_in">
<span class="dia_block_item_title">CPU：</span>
<span class="dia_block_item_val">{{ diaForm.cpu }}核</span>
</div>
<div class="dia_block_item_in">
<span class="dia_block_item_title">内存：</span>
<span class="dia_block_item_val">{{ diaForm.memory }}GB</span>
</div>
<div class="dia_block_item_in">
<span class="dia_block_item_title">容器组：</span>
<span class="dia_block_item_val"
>{{ diaForm.containerGroup }}个</span
>
</div>
<div
class="dia_block_item_in"
v-if="
diaForm.dataDisk &&
diaForm.perDataDisk &&
Number(diaForm.dataDisk) != 0 &&
Number(diaForm.perDataDisk) != 0
"
>
<span class="dia_block_item_title">新增数据盘：</span>
<span class="dia_block_item_val">
{{ diaForm.dataDisk }}块，每块{{ diaForm.perDataDisk }}GB
</span>
</div>
<div
class="dia_block_item_in"
v-if="delDataDiskList.length != 0"
>
<span class="dia_block_item_title">删除数据盘：</span>
<span class="dia_block_item_val">
{{
delDataDiskList
.map((item) => {
return item.name;
})
.join("、")
}}
</span>
</div>
</div>
<span class="dia_item_all_title">单个容器组规格：</span>
<div class="dia_block_item">
<div class="dia_block_item_in">
<span class="dia_block_item_title">CPU：</span>
<p class="dia_block_item_val">
<span class="val_has_2">
最高&nbsp;{{ diaForm.perCPUs }}核
</span>
<span class="val_has_2">
默认&nbsp;{{ diaForm.perCPU }}核
</span>
</p>
</div>
<div class="dia_block_item_in">
<span class="dia_block_item_title">内存：</span>
<p class="dia_block_item_val">
<span class="val_has_2">
最高&nbsp;{{ diaForm.perRAMs }}GB
</span>
<span class="val_has_2">
默认&nbsp;{{ diaForm.perRAM }}GB
</span>
</p>
</div>
</div>
<span class="dia_item_all_title">申请续期：</span>
<div class="dia_block_item">
<div class="dia_block_item_in">
<span class="dia_block_item_title">是否续期：</span>
<span class="dia_block_item_val">
{{
diaForm.appDuration && diaForm.appDuration != 0
? "是"
: "否"
}}
</span>
</div>
<div
class="dia_block_item_in"
v-if="diaForm.appDuration && diaForm.appDuration != 0"
>
<span class="dia_block_item_title">续期时长：</span>
<span class="dia_block_item_val">
{{ diaForm.appDuration }}
{{ diaForm.durType == 1 ? "个月" : "年" }}
</span>
</div>
</div>
</div>
</div>
</el-col>
</el-row>
<div class="fyzj_dia">
<div class="fyzj_dia_init">
<p v-if="activeName == '1'" class="fyzj_2">
升级费用：<span class="fyzj_2_num">{{ amounts_payable }} 金币</span>
</p>
<!-- <p v-if="activeName == '1'" class="fyzj_2">
原规格抵扣费用：<span class="fyzj_2_num">2000 金币</span>
</p> -->
<div class="fyzj_1">
费用总计：
<p>
<span class="fyzj_1_num"> {{ getSumCoin }} </span
><span class="fyzj_1_jb">金币</span>
</p>
</div>
<p class="fyzj_2">
账户余额：<span class="fyzj_2_num"
>{{ user_info.account_balance }} 金币</span
>
</p>
</div>
<div class="clear_xxx"></div>
</div>
<div class="btn_footer">
<el-button class="cancel" @click="cancel">取消</el-button>
<el-button class="submit1" @click="determineSubmit">确定提交</el-button>
</div>
</el-dialog>
<el-dialog
title="费用明细"
:visible.sync="dialogFymx"
width="580px"
class="cloud_dia"
>
<div class="fymx_ts">
<i class="el-icon-warning-outline"></i>
<p>
计费说明：云资源服务依据用户选取的CPU、内存、数据盘个数及大小进行分级计费，具体计费规
则请线下联系技术支持人员咨询。
</p>
</div>
<div v-if="activeName == '1'" class="sjfy_title">升级费用</div>
<table-um
ref="apply_service_state_table"
:headers="jifeiHeader"
:stripe="true"
:datas="jifeiList1"
:maxheight="260"
></table-um>
<!-- <div v-if="activeName == '1'" class="sjfy_title">
原规格抵扣费用
<el-tooltip
class="tool_item"
effect="dark"
content="未用完的按剩余时间及原购买规格价格核算后优先抵扣本订单金额，超出部分退还至用户账户"
placement="top"
offset="5"
>
<img class="tool_img" src="@/assets/imgs/tool_ic_tips.png" />
</el-tooltip>
</div>
<table-um
v-if="activeName == '1'"
ref="apply_service_state_table"
:headers="jifeiHeader2"
:stripe="true"
:datas="jifeiList2"
:maxheight="260"
></table-um> -->
</el-dialog>
<ApassDialog
ref="dialog"
msg="确认删除该数据盘吗？"
:submit="dialogSubmit"
></ApassDialog>
</div>
</template>
<script>
import BlockRadius from "@/components/general/block-radius";
import UploadFile from "@/components/general/upload_file";
import TableUm from "@/components/table/table-um";
import InfoList from "@/components/infoList";
import ApassDialog from "@/components/apass-dialog";
import helper from "@/services/helper.js";
export default {
components: {
BlockRadius,
UploadFile,
TableUm,
InfoList,
ApassDialog,
},
props: {
name: { type: String, default: "" },
},
computed: {
getSumCoin() {
let sumCM = 0;
let sumDisk = 0;
let a_deductions = 0;
if (this.activeName == "0") {
a_deductions = this.deductions;
if (this.cpu_memory && this.cpu_memory.length != 0) {
if (this.formNew.cpu == "8") {
if (this.formNew.memory == "16") {
let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 8 && item.memory == 16;
});
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price);
} else if (this.formNew.memory == "32") {
let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 8 && item.memory == 32;
});
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price);
}
} else if (this.formNew.cpu == "16") {
if (this.formNew.memory == "32") {
let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 16 && item.memory == 32;
});
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price);
} else if (this.formNew.memory == "64") {
let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 16 && item.memory == 64;
});
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price);
}
}
}
sumCM = sumCM * Number(this.formNew.appDuration);
if (
this.formNew.dataDisk >= 1 &&
this.formNew.perDataDisk >= 1 &&
this.formNew.appDuration >= 1
) {
if (this.hard_disk && this.hard_disk.length != 0) {
this.disk_single_money = Number(this.hard_disk[0].price);
sumDisk +=
Number(this.formNew.dataDisk) *
Number(this.formNew.perDataDisk) *
Number(this.formNew.appDuration) *
Number(this.hard_disk[0].price);
}
this.jifeiList1[2] = {
name: "数据盘",
num: `${this.formNew.dataDisk}个数据盘，每个数据盘${this.formNew.perDataDisk}GB`,
time: `${this.formNew.appDuration}个月`,
sum: `${sumDisk}金币`,
};
} else {
this.jifeiList1.splice(2);
}
this.jifeiList1[0].num = `${
this.formNew.cpu >= 1 ? this.formNew.cpu : 0
}核+${this.formNew.memory >= 1 ? this.formNew.memory : 0}G`;
this.jifeiList1[0].time = `${
this.formNew.appDuration >= 1 ? this.formNew.appDuration : 0
}个月`;
this.jifeiList1[0].sum = `${sumCM}金币`;
this.jifeiList1[1].num = `${
this.formNew.containerGroup >= 1 ? this.formNew.containerGroup : 0
}个`;
this.jifeiList1[1].time = `${
this.formNew.appDuration >= 1 ? this.formNew.appDuration : 0
}个月`;
} else if (this.activeName == "1") {
a_deductions = this.deductions;
if (this.cpu_memory && this.cpu_memory.length != 0) {
if (this.formOld.cpu == "8") {
if (this.formOld.memory == "16") {
let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 8 && item.memory == 16;
});
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price);
} else if (this.formOld.memory == "32") {
let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 8 && item.memory == 32;
});
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price);
}
} else if (this.formOld.cpu == "16") {
if (this.formOld.memory == "32") {
let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 16 && item.memory == 32;
});
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price);
} else if (this.formOld.memory == "64") {
let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 16 && item.memory == 64;
});
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price);
}
}
}
sumCM = sumCM * Number(this.formOld.appDuration);
if (
this.formOld.dataDisk >= 1 &&
this.formOld.perDataDisk >= 1 &&
this.formOld.appDuration >= 1
) {
if (this.hard_disk && this.hard_disk.length != 0) {
this.disk_single_money = Number(this.hard_disk[0].price);
sumDisk +=
Number(this.formOld.dataDisk) *
Number(this.formOld.perDataDisk) *
Number(this.formOld.appDuration) *
Number(this.hard_disk[0].price);
}
this.jifeiList1[2] = {
name: "数据盘",
num: `${this.formOld.dataDisk}个数据盘，每个数据盘${this.formOld.perDataDisk}GB`,
time: `${this.formOld.appDuration}个月`,
sum: `${sumDisk}金币`,
};
} else {
this.jifeiList1.splice(2);
}
this.jifeiList1[0].num = `${
this.formOld.cpu >= 1 ? this.formOld.cpu : 0
}核+${this.formOld.memory >= 1 ? this.formOld.memory : 0}G`;
this.jifeiList1[0].time = `${
this.formOld.appDuration >= 1 ? this.formOld.appDuration : 0
}个月`;
this.jifeiList1[0].sum = `${sumCM}金币`;
this.jifeiList1[1].num = `${
this.formOld.containerGroup >= 1 ? this.formOld.containerGroup : 0
}个`;
this.jifeiList1[1].time = `${
this.formOld.appDuration >= 1 ? this.formOld.appDuration : 0
}个月`;
}
// console.log(sumCM, sumDisk)
this.amounts_payable = Number(
(Number(sumCM) + Number(sumDisk)).toFixed(2)
);
// this.total_money = sumCM + sumDisk - a_deductions;
return this.amounts_payable;
},
},
watch: {
formNew: {
handler() {
if (this.formNew.containerGroup % 1 != 0) {
this.formNew.containerGroup = Math.floor(this.formNew.containerGroup)
}
if (this.formNew.dataDisk % 1 != 0) {
this.formNew.dataDisk = Math.floor(this.formNew.dataDisk)
}
if (this.formNew.appDuration % 1 != 0) {
this.formNew.appDuration = Math.floor(this.formNew.appDuration)
}
},
deep: true,
},
formOld: {
handler() {
if (this.formOld.containerGroup % 1 != 0) {
this.formOld.containerGroup = Math.floor(this.formOld.containerGroup)
}
if (this.formOld.dataDisk % 1 != 0) {
this.formOld.dataDisk = Math.floor(this.formOld.dataDisk)
}
if (this.formOld.appDuration % 1 != 0) {
this.formOld.appDuration = Math.floor(this.formOld.appDuration)
}
},
deep: true,
}
},
data() {
var checkName = (rule, value, callback) => {
let self = this;
let reg = new RegExp(/^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/);
if (value.length > 63) {
callback(new Error("命名空间最长不超过63位"));
} else if (!reg.test(value)) {
callback(new Error("小写字母或数字开头,可以由小写字母、数字、- 组成"));
} else {
self.$api.serviceShop
.checkNameSpaceCouldUse({ id: value })
.then(({ data }) => {
if (data.success === 1) {
if (data.data === 1) {
callback();
} else if (data.data === -1) {
callback(new Error("命名空间名称已存在"));
}
}
})
.catch((error) => {
console.log(error);
callback(new Error("命名空间名称验证失败"));
});
}
};
return {
total_money: 0,
disk_single_money: 0,
eci_single_money: 0,
amounts_payable: 0,
deductions: 0,
helper,
form: {
department_name: "",
phone: "",
link_man: "",
},
ruleBasis: {
link_man: [
{ required: true, message: "请输入部门联系人", trigger: "blur" },
{ max: 6, message: "长度应小于6个字符", trigger: "blur" },
],
phone: [
{ required: true, message: "请输入手机号码", trigger: "blur" },
{
pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
message: "请输入正确的手机号码",
},
],
},
activeName: "0",
formNew: {
namespace: "",
workplace: "",
workplacedesc: "",
cpu: "",
memory: "",
containerGroup: undefined,
dataDisk: undefined,
perDataDisk: undefined,
perCPUs: undefined,
perCPU: undefined,
perRAMs: undefined,
perRAM: undefined,
appDuration: 1,
durType: 1,
apply_file: "",
apply_file_name: "",
store_type: "nfs-client",
},
ruleNew: {
namespace: [
{ required: true, message: "请输入工作区域名称", trigger: "blur" },
{ max: 16, message: "长度应小于16个字符", trigger: "blur" },
{ validator: checkName, trigger: "blur" },
],
workplace: [
{ required: true, message: "请输入中文名称", trigger: "blur" },
{ max: 16, message: "长度应小于16个字符", trigger: "blur" },
],
workplacedesc: [
{ required: true, message: "请输入描述信息", trigger: "blur" },
{ max: 100, message: "长度应小于100个字符", trigger: "blur" },
],
cpu: [
{ required: true, message: "请选择CPU使用量", trigger: "change" },
],
memory: [
{ required: true, message: "请选择内存使用量", trigger: "change" },
],
containerGroup: [
{ required: true, message: "请输入容器组规格", trigger: "blur" },
],
perCPUs: [
{ required: true, message: "请输入CPU最大使用量", trigger: "blur" },
],
perCPU: [
{ required: true, message: "请输入CPU默认使用量", trigger: "blur" },
],
perRAMs: [
{ required: true, message: "请输入内存最大使用量", trigger: "blur" },
],
perRAM: [
{ required: true, message: "请输入内存默认使用量", trigger: "blur" },
],
appDuration: [
{ required: true, message: "请输入申请时长", trigger: "blur" },
],
},
durationOptions: [
{ value: 1, label: "月" },
{ value: 2, label: "年" },
],
workSpace: "",
workSpaceId: "",
workSpaceOptions: [],
optionsCPU: [
{ value: "8", label: "8" },
{ value: "16", label: "16" },
],
optionsRAM: [],
options_store_type: [
{ value: "nfs-client", label: "nfs-client" },
{ value: "rook-ceph-block", label: "rook-ceph-block" },
],
formShow: false,
specArr: [
{ title: "CPU", val: "0", src: "ic_CPU" },
{ title: "内存", val: "0", src: "ic_neicun" },
{ title: "容器", val: "0", src: "ic_rongqi" },
],
rqzArr: [
{ title: "CPU", max: "4", default: "2", src: "ic_CPU" },
{ title: "内存", max: "4", default: "2", src: "ic_neicun" },
],
docTemplate: [
{
title: "",
info: "工作区域申请文件标准模板.xlsx",
url: "static/工作区域申请文件模板.xlsx",
type: "down",
},
],
formOld: {
cpu: "",
memory: "",
containerGroup: undefined,
dataDisk: undefined,
perDataDisk: undefined,
perCPUs: undefined,
perCPU: undefined,
perRAMs: undefined,
perRAM: undefined,
appDuration: 1,
durType: 1,
apply_file: "",
apply_file_name: "",
store_type: "nfs-client",
},
paramsOld: {},
ruleOld: {
namespace: [
{ required: true, message: "请输入工作区域名称", trigger: "blur" },
],
workplace: [
{ required: true, message: "请输入中文名称", trigger: "blur" },
],
workplacedesc: [
{ required: true, message: "请输入描述信息", trigger: "blur" },
],
cpu: [
{ required: true, message: "请选择CPU使用量", trigger: "change" },
],
memory: [
{ required: true, message: "请选择内存使用量", trigger: "change" },
],
containerGroup: [
{ required: true, message: "请输入容器组规格", trigger: "blur" },
],
perCPUs: [
{ required: true, message: "请输入CPU最大使用量", trigger: "blur" },
],
perCPU: [
{ required: true, message: "请输入CPU默认使用量", trigger: "blur" },
],
perRAMs: [
{ required: true, message: "请输入内存最大使用量", trigger: "blur" },
],
perRAM: [
{ required: true, message: "请输入内存默认使用量", trigger: "blur" },
],
},
dialogVisible: false,
diaForm: {},
dataDiskHeaders: [
{
label: "磁盘名称",
prop: "name",
align: "center",
},
{
label: "数据盘容量",
prop: "disk_cap",
align: "center",
},
{
label: "部署的应用",
prop: "app_name",
align: "center",
},
{
label: "操作",
type: "Button",
align: "center",
btnList: [
{
type: "primary-del",
label: "删除",
},
],
},
],
dataDiskList: [],
delDataDiskList: [],
del_item: {},
dialogFymx: false,
jifeiHeader: [
{
label: "名称",
prop: "name",
align: "center",
},
{
label: "数量规格",
prop: "num",
align: "center",
},
{
label: "购买时长",
prop: "time",
align: "center",
},
{
label: "小计",
prop: "sum",
align: "center",
},
],
jifeiHeader2: [
{
label: "名称",
prop: "name",
align: "center",
},
{
label: "数量规格",
prop: "num",
align: "center",
},
{
label: "购买时长",
prop: "time",
align: "center",
},
{
label: "小计",
prop: "sum",
align: "center",
type: "html",
getHtml: (str) => {
return `<span style="color: #e15260">-${str.sum}</span>`;
},
},
],
jifeiList1: [
{ name: "CPU+内存", num: "0核+0G", time: "0个月", sum: "0金币" },
{ name: "容器组", num: "0个", time: "0个月", sum: "-" },
// { name: "数据盘", num: "0个数据盘，每个数据盘0GB", time: "0个月", sum: "2000金币" },
],
jifeiList2: [
{ name: "CPU+内存", num: "0核+0G", time: "0个月", sum: "0金币" },
{ name: "容器组", num: "0个", time: "0个月", sum: "-" },
{
name: "数据盘",
num: "0个数据盘，每个数据盘0GB",
time: "0个月",
sum: "金币",
},
],
cpu_memory: [],
hard_disk: [],
user_info: {},
};
},
mounted() {
this.getUser();
this.getNameSpaceList();
this.getSpecifications();
this.getUserCoins();
},
methods: {
getUserCoins() {
this.$api.user.getUserCoins().then((response) => {
if (response.data.success == 1) {
this.user_info = response.data.data;
}
});
},
getQueryId() {
if (this.$route.query.namespace && this.$route.query.namespace != "") {
this.activeName = "1";
let index = this.workSpaceOptions.findIndex((item) => {
return item.namespace == this.$route.query.namespace;
});
if (index != -1) {
let paramsOld = this.workSpaceOptions[index];
this.workSpace = index;
this.workSpaceId = paramsOld.Id;
this.paramsOld = paramsOld;
this.formOld.namespace = paramsOld.namespace;
this.formOld.workplace = paramsOld.workplace;
this.formOld.workplacedesc = paramsOld.workplacedesc;
this.formOld.cpu = paramsOld.cpu;
this.formOld.memory = paramsOld.memory;
this.formOld.containerGroup = paramsOld.containers;
this.specArr[0].val = paramsOld.cpu;
this.specArr[1].val = paramsOld.memory;
this.specArr[2].val = paramsOld.containers;
this.formOld.dataDisk = "";
this.formOld.perDataDisk = "";
this.formOld.perCPUs = paramsOld.one_cpu_max;
this.formOld.perCPU = paramsOld.one_cpu_min;
this.formOld.perRAMs = paramsOld.one_memory_max;
this.formOld.perRAM = paramsOld.one_memory_min;
this.rqzArr[0].max = paramsOld.one_cpu_max;
this.rqzArr[0].default = paramsOld.one_cpu_min;
this.rqzArr[1].max = paramsOld.one_memory_max;
this.rqzArr[1].default = paramsOld.one_memory_min;
this.formOld.store_type = paramsOld.store_type;
this.dataDiskList = paramsOld.disk_list || [];
this.dataDiskList.forEach((item, index) => {
item.name = `磁盘${index + 1}`;
});
this.form.link_man = paramsOld.apply_connect_username;
this.form.phone = paramsOld.apply_connect_mobile;
this.formShow = true;
}
}
},
tabClick() {},
getNewList(val) {
this.formNew.apply_file_name = val[0].name;
this.formNew.apply_file = val[0].url;
},
getNewListOld(val) {
this.formOld.apply_file_name = val[0].name;
this.formOld.apply_file = val[0].url;
},
handleChange() {},
getSpecifications() {
this.$api.serviceShop.getSpecifications().then((response) => {
if (response.data.success == 1) {
this.cpu_memory = response.data.data.cpu_memory;
this.hard_disk = response.data.data.hard_disk;
} else {
this.$message({
message: "获取资源规格失败，请刷新网页",
type: "error",
});
}
});
},
getForm(val) {
if (val !== "") {
let paramsOld = this.workSpaceOptions[val];
this.workSpaceId = paramsOld.Id;
this.paramsOld = paramsOld;
this.formOld.namespace = paramsOld.namespace;
this.formOld.workplace = paramsOld.workplace;
this.formOld.workplacedesc = paramsOld.workplacedesc;
this.formOld.cpu = paramsOld.cpu;
this.formOld.memory = paramsOld.memory;
this.formOld.containerGroup = paramsOld.containers;
this.specArr[0].val = paramsOld.cpu;
this.specArr[1].val = paramsOld.memory;
this.specArr[2].val = paramsOld.containers;
this.formOld.dataDisk = "";
this.formOld.perDataDisk = "";
this.formOld.perCPUs = paramsOld.one_cpu_max;
this.formOld.perCPU = paramsOld.one_cpu_min;
this.formOld.perRAMs = paramsOld.one_memory_max;
this.formOld.perRAM = paramsOld.one_memory_min;
this.rqzArr[0].max = paramsOld.one_cpu_max;
this.rqzArr[0].default = paramsOld.one_cpu_min;
this.rqzArr[1].max = paramsOld.one_memory_max;
this.rqzArr[1].default = paramsOld.one_memory_min;
this.formOld.store_type = paramsOld.store_type;
this.dataDiskList = paramsOld.disk_list || [];
this.dataDiskList.forEach((item, index) => {
item.name = `磁盘${index + 1}`;
});
this.form.link_man = paramsOld.apply_connect_username;
this.form.phone = paramsOld.apply_connect_mobile;
this.formShow = true;
this.jifeiList2 = [
{
name: "CPU+内存",
num: `${this.formOld.cpu}核+${this.formOld.memory}G"`,
time: "0个月",
sum: "0金币",
},
{
name: "容器组",
num: `${this.formOld.containerGroup}个`,
time: "0个月",
sum: "",
},
{
name: "数据盘",
num: `${this.dataDiskList.length}个数据盘，共计${this.dataDiskList.length}GB"`,
time: "0个月",
sum: "2000金币",
},
];
} else {
this.formShow = false;
}
},
submitApp() {
let formParams = {};
if (this.activeName == 0) {
this.$refs["formNew"].validate((valid) => {
if (valid) {
formParams = this.formNew;
this.dialogVisible = true;
this.diaForm = Object.assign(formParams, this.form);
} else {
console.log("error submit!!");
return false;
}
});
} else if (this.activeName == 1) {
this.$refs["formOld"].validate((valid) => {
if (valid) {
formParams = this.formOld;
this.dialogVisible = true;
this.diaForm = Object.assign(formParams, this.form);
} else {
console.log("error submit!!");
return false;
}
});
}
},
checkNamespace(namespace, cb) {
this.$api.serviceShop
.checkNameSpaceCouldUse({ id: namespace })
.then(({ data }) => {
if (data.success === 1) {
if (data.data === 1) {
typeof cb === "function" && cb();
} else if (data.data === -1) {
this.$message({
message: `命名空间名称已存在`,
type: "error",
});
}
}
})
.catch((error) => {
console.log(error);
this.$message({
message: `命名空间名称验证失败`,
type: "error",
});
});
},
determineSubmit() {
if (this.activeName == 0) {
this.checkNamespace(this.formNew.namespace, () => {
let query = {
resource_info: {
namespace: this.formNew.namespace,
workplace: this.formNew.workplace,
workplacedesc: this.formNew.workplacedesc,
},
resource_apply: {
apply_file: this.formNew.apply_file,
cpu: Number(this.formNew.cpu),
duration: this.formNew.appDuration,
duration_unit: Number(this.formNew.durType),
apply_connect_username: this.form.link_man,
apply_connect_mobile: this.form.phone,
memory: Number(this.formNew.memory),
containers: this.formNew.containerGroup,
one_cpu_min: this.formNew.perCPU ? this.formNew.perCPU : 0,
one_cpu_max: this.formNew.perCPUs ? this.formNew.perCPUs : 0,
one_memory_min: this.formNew.perRAM ? this.formNew.perRAM : 0,
one_memory_max: this.formNew.perRAMs ? this.formNew.perRAMs : 0,
},
disks: [
{
disk_num: this.formNew.dataDisk ? this.formNew.dataDisk : 0,
disk_cap: this.formNew.perDataDisk
? this.formNew.perDataDisk
: 0,
store_type: "nfs-client",
},
],
payment: {
// total_money: this.total_money,
disk_single_money: String(this.disk_single_money),
eci_single_money: String(this.eci_single_money),
total_money: String(this.amounts_payable),
},
};
this.$api.serviceShop.applicationCloud(query).then((response) => {
if (response.data.success == 1) {
this.$message({
message: "申请成功",
type: "success",
});
this.$router.push("/user/order_list");
} else {
this.$message({
message: `申请失败，${response.data.errMsg}`,
type: "error",
});
}
});
});
} else {
let query = {
resource_id: this.workSpaceId,
resource_apply: {
apply_file: this.formOld.apply_file,
cpu: Number(this.formOld.cpu),
duration: this.formOld.appDuration,
duration_unit: Number(this.formOld.durType),
apply_connect_username: this.form.link_man,
apply_connect_mobile: this.form.phone,
memory: Number(this.formOld.memory),
containers: this.formOld.containerGroup,
one_cpu_min: this.formOld.perCPU ? this.formOld.perCPU : 0,
one_cpu_max: this.formOld.perCPUs ? this.formOld.perCPUs : 0,
one_memory_min: this.formOld.perRAM ? this.formOld.perRAM : 0,
one_memory_max: this.formOld.perRAMs ? this.formOld.perRAMs : 0,
},
disks: [
{
disk_num: this.formOld.dataDisk ? this.formOld.dataDisk : 0,
disk_cap: this.formOld.perDataDisk ? this.formOld.perDataDisk : 0,
store_type: "nfs-client",
},
],
remove_disks: this.delDataDiskList.map((item) => item.id),
payment: {
// total_money: this.total_money,
disk_single_money: String(this.disk_single_money),
eci_single_money: String(this.eci_single_money),
total_money: String(this.amounts_payable),
},
};
this.$api.serviceShop.updateCloud(query).then((response) => {
if (response.data.success == 1) {
this.$message({
message: "申请调整成功",
type: "success",
});
this.$router.push("/user/order_list");
} else {
this.$message({
message: `申请调整失败，${response.data.errMsg}`,
type: "error",
});
}
});
}
console.log(this.form);
this.dialogVisible = false;
},
cancel() {
this.dialogVisible = false;
},
getUser() {
this.$api.user.getNowUser().then((response) => {
this.form.department_name = response.data.data.department_name;
});
},
getNameSpaceList() {
this.$api.serviceShop.getCloudList().then((response) => {
if (response.data.success == 1) {
this.workSpaceOptions = response.data.data;
this.getQueryId();
}
});
},
delItem(val) {
this.$refs.dialog.show();
this.del_item = val;
},
dialogSubmit() {
let delIndex = this.dataDiskList.findIndex(
(v) => v.id === this.del_item.id
);
this.dataDiskList.splice(delIndex, 1);
this.delDataDiskList.push(this.del_item);
},
setContainerGroup(type) {
if (type == 0) {
if (this.formNew.containerGroup && this.formNew.containerGroup != 0) {
} else {
this.formNew.containerGroup = this.formNew.memory * 3;
}
} else if (type == 1) {
if (this.formOld.containerGroup && this.formOld.containerGroup != 0) {
} else {
this.formOld.containerGroup = this.formOld.memory * 3;
}
}
},
changeCPU(val) {
this.formOld.memory = "";
this.formNew.memory = "";
if (val == "8") {
this.optionsRAM = [
{ value: "16", label: "16" },
{ value: "32", label: "32" },
];
} else if (val == "16") {
this.optionsRAM = [
{ value: "32", label: "32" },
{ value: "64", label: "64" },
];
}
},
},
};
</script>
<style scoped>
.cloud_form {
}
.form_title {
font-size: 16px;
line-height: 16px;
font-weight: bold;
margin: 32px 0 24px;
padding: 0 0 0 15px;
position: relative;
color: #58617a;
}
.form_title::before {
position: absolute;
content: "";
width: 4px;
height: 18px;
background-color: #515fe7;
border-radius: 2px;
left: 0;
top: -1px;
}
.form_item {
width: calc(100%);
}
.form_item_title {
margin: 0 0 12px;
line-height: 14px;
font-size: 14px;
color: #58617a;
}
.form_item_title_1 {
margin: 0;
line-height: 14px;
font-size: 14px;
color: #58617a;
}
.input_has_right {
position: relative;
}
.input_right {
display: inline-block;
width: 60px;
height: 40px;
padding: 0 0 0 15px;
background-color: #edeef4;
border: 1px #e3e5ef solid;
color: #8890a7;
border-radius: 0 6px 6px 0;
position: absolute;
right: 0;
}
.input_has_left_right {
position: relative;
}
.input_left {
display: inline-block;
width: 60px;
height: 40px;
padding: 0 0 0 15px;
background-color: #edeef4;
border: 1px #e3e5ef solid;
color: #8890a7;
border-radius: 6px 0 0 6px;
position: absolute;
left: 0;
}
.input_has_right_select {
position: relative;
}
.input_right_select {
position: absolute;
right: 0;
}
.select_title {
padding: 32px 0 12px;
font-size: 16px;
line-height: 16px;
font-weight: bold;
color: #58617a;
}
.now_spec {
padding: 0 0 12px;
}
.now_spec_cards {
margin-bottom: 24px;
}
.now_spec_card {
display: inline-block;
width: 194px;
height: 40px;
background-color: #f7f8f9;
border-radius: 6px;
line-height: 40px;
padding: 0 20px;
position: relative;
margin-right: 24px;
}
.now_spec_card_title {
color: #6573ae;
margin-left: 10px;
}
.now_spec_card_val {
color: #0d1847;
position: absolute;
right: 20px;
top: 0;
}
.now_spec_card_img {
position: relative;
top: 1px;
}
.now_rqz_card {
display: inline-block;
width: 304px;
height: 40px;
background-color: #f7f8f9;
border-radius: 6px;
line-height: 40px;
padding: 0 20px;
position: relative;
margin-right: 20px;
}
.now_rqz_card_title {
color: #6573ae;
margin-left: 10px;
}
.now_rqz_card_val_div {
color: #0d1847;
position: absolute;
line-height: 40px;
right: 20px;
top: 0;
}
.now_rqz_card_val {
}
.now_rqz_card_img {
position: relative;
top: 1px;
}
.now_spec_card_time {
width: 381px;
height: 40px;
background-color: #f7f8f9;
border-radius: 6px;
line-height: 40px;
padding: 0 20px;
position: relative;
margin-bottom: 24px;
}
.now_spec_card_time_img {
position: relative;
top: 1px;
}
.now_spec_card_time_title {
color: #6573ae;
margin-left: 10px;
}
.now_spec_card_time_val {
color: #0d1847;
position: absolute;
right: 20px;
top: 0;
}
.btn_footer {
display: flex;
justify-content: flex-end;
margin: 0 20px;
}
.btn_footer .submit {
width: 220px;
background-color: #e56600;
color: #f8f9fd;
}
.btn_footer .nosubmit {
width: 220px;
background-color: #a9aec0;
color: #ffffff;
}
.btn_footer .submit1 {
width: 100px;
background-color: #0f2683;
color: #f8f9fd;
}
.cancel {
width: 100px;
background-color: #c3caf8;
color: #0f2683;
}
.dia_item_title {
display: block;
color: #8890a7;
line-height: 24px;
padding: 0 20px;
}
.margin_top_10 {
margin-top: 10px;
}
.dia_item_val {
display: block;
color: #242c43;
line-height: 24px;
margin-bottom: 10px;
width: 90%;
padding: 0 20px;
}
.dia_block {
background-color: #f8f9fd;
border-radius: 8px;
margin: 10px 0;
padding: 20px;
font-size: 14px;
line-height: 22px;
}
.dia_item_all_title {
color: #242c43;
}
.dia_block_item {
padding: 10px 0 0 20px;
}
.dia_block_item_in {
display: flex;
justify-content: space-between;
margin-bottom: 5px;
}
.dia_block_item_title {
color: #8890a7;
width: 120px;
text-align: right;
}
.dia_block_item_val {
color: #242c43;
width: calc(100% - 130px);
}
.val_has_2 {
margin-right: 20px;
}
.doc_template {
margin: 0 0 12px;
}
.up_f {
width: calc(50% - 10px);
}
.fyzj_item {
position: relative;
}
.fyzj {
color: #242c43;
font-size: 18px;
margin-right: 10px;
text-align: right;
position: absolute;
top: -10px;
right: 230px;
}
.fyzj_p {
margin-bottom: 6px;
}
.fyzj_span {
color: #e56600;
font-size: 24px;
font-weight: bold;
}
.fyzj_qian {
color: #e56600;
font-size: 14px;
}
.ckfymx {
color: #a9aec0;
font-size: 14px;
}
.ckfymx_a {
color: #515fe7;
cursor: pointer;
}
.ckfymx_qian {
display: inline-block;
margin-left: 20px;
position: relative;
}
.ckfymx_qian::after {
content: "";
position: absolute;
width: 1px;
height: 16px;
background: #bcc1d0;
left: -10px;
top: 2px;
}
.yebz {
color: #e15260;
font-size: 18px;
margin-right: 20px;
}
.fymx_ts {
background-color: #f4f7fc;
border-radius: 8px;
padding: 12px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.fymx_ts i {
position: relative;
top: 4px;
color: #8890a7;
}
.fymx_ts p {
width: calc(100% - 22px);
color: #58617a;
}
.sjfy_title {
margin: 10px 20px;
position: relative;
color: #242c43;
font-size: 16px;
}
.sjfy_title::after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background-color: #515fe7;
border-radius: 50%;
left: -15px;
top: 8px;
}
.tool_img {
width: 16px;
height: 16px;
position: relative;
top: 2px;
left: 2px;
}
.fyzj_dia {
height: 100%;
}
.fyzj_dia_init {
float: right;
text-align: right;
padding: 10px;
}
.fyzj_1 {
color: #242c43;
font-size: 18px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.fyzj_1_num {
color: #e56600;
font-size: 24px;
font-weight: bold;
}
.fyzj_1_jb {
color: #e56600;
font-size: 14px;
}
.fyzj_2 {
min-width: 140px;
color: #8890a7;
font-size: 14px;
margin: 10px 0;
display: flex;
justify-content: space-between;
}
.fyzj_2_num {
color: #58617a;
}
.clear_xxx {
clear: both;
}
.disk__table {
margin-bottom: 0;
}
</style>
<style>
.form_block .el-input .el-input__inner {
background-color: #f7f8f9;
color: #242c43;
}
.cloud_form .el-input {
width: 100%;
}
.cloud_form .input_has_right .el-input {
width: calc(100% - 60px);
}
.cloud_form .input_has_left_right .el-input {
width: calc(100% - 120px);
margin-left: 60px;
}
.cloud_form .input_has_left_right .el-input__inner {
border-radius: 0;
color: #242c43;
}
.cloud_form .input_right_top {
top: 26px;
}
.cloud_form .el-select {
width: 100%;
}
.cloud_form .el-input .el-input__inner {
background-color: #f7f8f9;
color: #242c43;
}
.cloud_form .el-input-number {
width: calc(100% - 60px);
}
.cloud_form .el-input-number .el-input {
width: 100%;
}
.cloud_form .input_has_left_right .el-input-number .el-input {
width: calc(100% - 60px);
margin-left: 60px;
}
.cloud_form .el-input-number .el-input__inner {
text-align: left;
color: #242c43;
}
.cloud_form .el-textarea {
width: 100%;
}
.cloud_form .el-textarea .el-textarea__inner {
background-color: #f7f8f9;
border-radius: 6px;
color: #242c43;
}
.form_item .el-form-item__content {
width: 100%;
}
.form_item.el-form-item {
margin-bottom: 24px;
}
.form_item.el-form-item.nobottom {
margin-bottom: 0;
}
.input_has_right .el-input__inner {
border-radius: 6px 0 0 6px;
color: #242c43;
}
.cloud_form .input_has_right_select .el-input-number {
width: calc(100% - 100px);
}
.input_has_right_select .el-select {
width: 100px;
}
.input_has_right_select .el-select .el-input.is-focus .el-input__inner {
border-color: #0f2683;
}
.input_has_right_select .el-select .el-input__inner:focus {
border-color: #0f2683;
}
.input_has_right_select .el-input__inner {
border-radius: 6px 0 0 6px;
color: #242c43;
}
.input_has_right_select .input_right_select.el-select .el-input {
width: 100px;
background-color: #0f2683;
color: #ffffff;
border-radius: 0 6px 6px 0;
}
.input_has_right_select
.input_right_select.el-select
.el-input
.el-input__inner {
border-radius: 0 6px 6px 0;
color: #ffffff;
}
.input_right_select .el-input .el-input__inner {
background-color: #0f2683;
color: #242c43;
}
.cloud_form .el-input-number .el-input-number__increase,
.cloud_form .el-input-number .el-input-number__decrease {
border-bottom: 0;
border-left: 0;
width: 29px;
}
.cloud_dia .el-dialog__header {
border-bottom: 1px solid #edf0ff;
}
.cloud_dia .el-dialog__title {
font-weight: 700;
}
.cloud_dia .el-dialog__body {
text-align: left;
font-size: 14px;
}
.cloud_form .el-input__prefix,
.el-input__suffix {
text-align: right;
right: 2px;
}
.cloud_form .el-input-number.is-controls-right .el-input__inner {
padding-left: 15px;
padding-right: 32px;
}
.up_f .el-upload {
width: 100%;
}
.up_f .el-upload-dragger {
width: 100%;
}
.shop_cloud .el-tabs__header {
margin: 0;
}
</style>
src/components/shop-cloud/shop-cloud.vue → src/components/shop-cloud/shop-cloud-old.vue
View file @ c52fddf2
......@@ -639,7 +639,7 @@
<div class="btn_footer fyzj_item">
<div class="fyzj">
<p class="fyzj_p">
<span v-if="getSumCoin > userInfo.account_balance" class="yebz">
<span v-if="getSumCoin > user_info.account_balance" class="yebz">
余额不足，请联系超级管理员进行充值
</span>
费用总计：<span class="fyzj_span">
......@@ -651,12 +651,16 @@
<span @click="dialogFymx = true" class="ckfymx_a">
查看费用明细
</span>
<span class="ckfymx_qian">账户余额：{{ userInfo.account_balance }} 金币</span>
<span class="ckfymx_qian"
>账户余额：{{ user_info.account_balance }} 金币</span
>
</p>
</div>
<el-button
:class="getSumCoin <= userInfo.account_balance ? 'submit' : 'nosubmit'"
:disabled="getSumCoin > userInfo.account_balance"
:class="
getSumCoin <= user_info.account_balance ? 'submit' : 'nosubmit'
"
:disabled="getSumCoin > user_info.account_balance"
@click="submitApp"
>
提交申请
......@@ -959,12 +963,14 @@
<div class="fyzj_1">
费用总计：
<p>
<span class="fyzj_1_num"> 2 </span
<span class="fyzj_1_num"> {{ getSumCoin }} </span
><span class="fyzj_1_jb">金币</span>
</p>
</div>
<p class="fyzj_2">
账户余额：<span class="fyzj_2_num">{{ userInfo.account_balance }} 金币</span>
账户余额：<span class="fyzj_2_num"
>{{ user_info.account_balance }} 金币</span
>
</p>
</div>
<div class="clear_xxx"></div>
......@@ -1031,7 +1037,6 @@ import TableUm from "@/components/table/table-um";
import InfoList from "@/components/infoList";
import ApassDialog from "@/components/apass-dialog";
import helper from "@/services/helper.js";
import { mapState } from "vuex";
export default {
components: {
......@@ -1051,41 +1056,51 @@ export default {
let a_deductions = 0;
if (this.activeName == "0") {
a_deductions = this.deductions;
if (this.cpu_memory && this.cpu_memory.length != 0) {
if (this.formNew.cpu == "8") {
if (this.formNew.memory == "16") {
let priceObj = this.cpu_memory.find(item => {
let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 8 && item.memory == 16;
})
sumCM += priceObj.price;
});
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price);
} else if (this.formNew.memory == "32") {
let priceObj = this.cpu_memory.find(item => {
let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 8 && item.memory == 32;
})
sumCM += priceObj.price;
});
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price);
}
} else if (this.formNew.cpu == "16") {
if (this.formNew.memory == "32") {
let priceObj = this.cpu_memory.find(item => {
let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 16 && item.memory == 32;
})
sumCM += priceObj.price;
});
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price);
} else if (this.formNew.memory == "64") {
let priceObj = this.cpu_memory.find(item => {
let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 16 && item.memory == 64;
})
sumCM += priceObj.price;
});
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price);
}
}
}
sumCM = sumCM * Number(this.formNew.appDuration);
if (
this.formNew.dataDisk >= 1 &&
this.formNew.perDataDisk >= 1 &&
this.formNew.appDuration >= 1
) {
if (this.hard_disk && this.hard_disk.length != 0) {
this.disk_single_money = Number(this.hard_disk[0].price);
sumDisk +=
this.formNew.dataDisk *
this.formNew.perDataDisk *
this.formNew.appDuration *
this.hard_disk[0].price;
Number(this.formNew.dataDisk) *
Number(this.formNew.perDataDisk) *
Number(this.formNew.appDuration) *
Number(this.hard_disk[0].price);
}
this.jifeiList1[2] = {
name: "数据盘",
num: `${this.formNew.dataDisk}个数据盘，每个数据盘${this.formNew.perDataDisk}GB`,
......@@ -1110,41 +1125,51 @@ export default {
}个月`;
} else if (this.activeName == "1") {
a_deductions = this.deductions;
if (this.cpu_memory && this.cpu_memory.length != 0) {
if (this.formOld.cpu == "8") {
if (this.formOld.memory == "16") {
let priceObj = this.cpu_memory.find(item => {
let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 8 && item.memory == 16;
})
sumCM += priceObj.price;
});
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price);
} else if (this.formOld.memory == "32") {
let priceObj = this.cpu_memory.find(item => {
let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 8 && item.memory == 32;
})
sumCM += priceObj.price;
});
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price);
}
} else if (this.formOld.cpu == "16") {
if (this.formOld.memory == "32") {
let priceObj = this.cpu_memory.find(item => {
let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 16 && item.memory == 32;
})
sumCM += priceObj.price;
});
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price);
} else if (this.formOld.memory == "64") {
let priceObj = this.cpu_memory.find(item => {
let priceObj = this.cpu_memory.find((item) => {
return item.cpu == 16 && item.memory == 64;
})
sumCM += priceObj.price;
});
this.eci_single_money = Number(priceObj.price);
sumCM += Number(priceObj.price);
}
}
}
sumCM = sumCM * Number(this.formOld.appDuration);
if (
this.formOld.dataDisk >= 1 &&
this.formOld.perDataDisk >= 1 &&
this.formOld.appDuration >= 1
) {
if (this.hard_disk && this.hard_disk.length != 0) {
this.disk_single_money = Number(this.hard_disk[0].price);
sumDisk +=
this.formOld.dataDisk *
this.formOld.perDataDisk *
this.formOld.appDuration *
this.hard_disk[0].price;
Number(this.formOld.dataDisk) *
Number(this.formOld.perDataDisk) *
Number(this.formOld.appDuration) *
Number(this.hard_disk[0].price);
}
this.jifeiList1[2] = {
name: "数据盘",
num: `${this.formOld.dataDisk}个数据盘，每个数据盘${this.formOld.perDataDisk}GB`,
......@@ -1168,11 +1193,13 @@ export default {
this.formOld.appDuration >= 1 ? this.formOld.appDuration : 0
}个月`;
}
this.amounts_payable = (sumCM + sumDisk).toFixed(2);
// console.log(sumCM, sumDisk)
this.amounts_payable = Number(
(Number(sumCM) + Number(sumDisk)).toFixed(2)
);
// this.total_money = sumCM + sumDisk - a_deductions;
return this.amounts_payable;
},
...mapState(["userInfo"]),
},
data() {
var checkName = (rule, value, callback) => {
......@@ -1239,7 +1266,7 @@ export default {
perCPU: undefined,
perRAMs: undefined,
perRAM: undefined,
appDuration: undefined,
appDuration: 1,
durType: 1,
apply_file: "",
apply_file_name: "",
......@@ -1332,7 +1359,7 @@ export default {
perCPU: undefined,
perRAMs: undefined,
perRAM: undefined,
appDuration: undefined,
appDuration: 1,
durType: 1,
apply_file: "",
apply_file_name: "",
......@@ -1470,14 +1497,23 @@ export default {
],
cpu_memory: [],
hard_disk: [],
user_info: {},
};
},
mounted() {
this.getUser();
this.getNameSpaceList();
this.getSpecifications();
this.getUserCoins();
},
methods: {
getUserCoins() {
this.$api.user.getUserCoins().then((response) => {
if (response.data.success == 1) {
this.user_info = response.data.data;
}
});
},
getQueryId() {
if (this.$route.query.namespace && this.$route.query.namespace != "") {
this.activeName = "1";
......@@ -1594,7 +1630,6 @@ export default {
sum: "2000金币",
},
];
this.deductions = this.userInfo.account_balance;
} else {
this.formShow = false;
}
......@@ -1666,25 +1701,25 @@ export default {
apply_connect_mobile: this.form.phone,
memory: Number(this.formNew.memory),
containers: this.formNew.containerGroup,
disk_num: this.formNew.dataDisk,
disk_cap: this.formNew.perDataDisk,
one_cpu_min: this.formNew.perCPU,
one_cpu_max: this.formNew.perCPUs,
one_memory_min: this.formNew.perRAM,
one_memory_max: this.formNew.perRAMs,
one_cpu_min: this.formNew.perCPU ? this.formNew.perCPU : 0,
one_cpu_max: this.formNew.perCPUs ? this.formNew.perCPUs : 0,
one_memory_min: this.formNew.perRAM ? this.formNew.perRAM : 0,
one_memory_max: this.formNew.perRAMs ? this.formNew.perRAMs : 0,
},
disks: [
{
disk_num: this.formNew.dataDisk + "",
disk_cap: this.formNew.perDataDisk + "",
store_type: this.formNew.store_type + "",
disk_num: this.formNew.dataDisk ? this.formNew.dataDisk : 0,
disk_cap: this.formNew.perDataDisk
? this.formNew.perDataDisk
: 0,
store_type: "nfs-client",
},
],
payment: {
// total_money: this.total_money,
disk_single_money: this.disk_single_money,
eci_single_money: this.eci_single_money,
total_money: this.amounts_payable,
disk_single_money: String(this.disk_single_money),
eci_single_money: String(this.eci_single_money),
total_money: String(this.amounts_payable),
},
};
this.$api.serviceShop.applicationCloud(query).then((response) => {
......@@ -1714,19 +1749,25 @@ export default {
apply_connect_mobile: this.form.phone,
memory: Number(this.formOld.memory),
containers: this.formOld.containerGroup,
one_cpu_min: this.formOld.perCPU,
one_cpu_max: this.formOld.perCPUs,
one_memory_min: this.formOld.perRAM,
one_memory_max: this.formOld.perRAMs,
one_cpu_min: this.formOld.perCPU ? this.formOld.perCPU : 0,
one_cpu_max: this.formOld.perCPUs ? this.formOld.perCPUs : 0,
one_memory_min: this.formOld.perRAM ? this.formOld.perRAM : 0,
one_memory_max: this.formOld.perRAMs ? this.formOld.perRAMs : 0,
},
disks: [
{
disk_num: this.formOld.dataDisk,
disk_cap: this.formOld.perDataDisk,
disk_num: this.formOld.dataDisk ? this.formOld.dataDisk : 0,
disk_cap: this.formOld.perDataDisk ? this.formOld.perDataDisk : 0,
store_type: "nfs-client",
},
],
remove_disks: this.delDataDiskList.map((item) => item.id),
payment: {
// total_money: this.total_money,
disk_single_money: String(this.disk_single_money),
eci_single_money: String(this.eci_single_money),
total_money: String(this.amounts_payable),
},
};
this.$api.serviceShop.updateCloud(query).then((response) => {
if (response.data.success == 1) {
......
src/components/shopping-cart/shopping-cart-cell.vue
View file @ c52fddf2
......@@ -128,6 +128,7 @@
{{ item.money }}金币/{{ item.spcs_count }}次
</el-button>
<el-button
v-if="cellItems.service.request_spcs_info.spcs_type_2 && cellItems.service.request_spcs_info.spcs_type_2.length != 0"
:class="
specificationPop.spcs_type == 2
? 'shopping_cell_specification_btn active'
......@@ -315,13 +316,8 @@ export default {
this.specificationApplicationPop = val;
},
submitPop() {
this.cellItems.service.spcs_info =
this.specificationPop.spcs_type == 1
? this.cellItems.service.request_spcs_info.spcs_type_1[val]
: this.specificationPop.spcs_type == 2
? this.cellItems.service.request_spcs_info.spcs_type_2[val]
: "";
this.updateShoppingCart();
this.cellItems.service.spcs_info = this.specificationPop;
this.visible = false;
this.updateShoppingCart();
},
setSpecificationPop() {
......@@ -364,7 +360,7 @@ export default {
let query = {
id: this.cellItems.id,
duration: this.cellItems.duration,
spec_id: this.cellItems.spec_id,
spec_id: this.specificationPop.id,
duration_method: this.cellItems.duration_method,
is_subscribe: Number(this.cellItems.is_subscribe),
};
......
src/components/shopping-cart/shopping-cart-com.vue
View file @ c52fddf2
......@@ -60,7 +60,7 @@
<el-col :span="15" class="shopping_cart_options_num">
<div class="fyzj">
<p class="fyzj_p">
<span v-if="getSumCoin > userInfo.account_balance" class="yebz">
<span v-if="getSumCoin > user_info.account_balance" class="yebz">
余额不足，请联系超级管理员进行充值
</span>
费用总计：<span class="fyzj_span">
......@@ -73,7 +73,7 @@
共 {{ list.length }} 项服务，已选择
<span class="dwa_djf">{{ getNum }}</span> 项
<span class="ckfymx_qian"
>账户余额：{{ userInfo.account_balance }} 金币</span
>账户余额：{{ user_info.account_balance }} 金币</span
>
</p>
</div>
......@@ -81,7 +81,7 @@
</el-col>
<el-col :span="4" class="shopping_cart_options_cell">
<el-button
v-if="getNum != 0 && getSumCoin <= userInfo.account_balance"
v-if="getNum != 0 && getSumCoin <= user_info.account_balance"
@click="oneClickApplication"
class="shopping_cart_options_cell_btn_act"
>一键申请</el-button
......@@ -101,7 +101,6 @@
<script>
import ShoppingCartList from "@/components/shopping-cart/shopping-cart-list";
import { mapState } from "vuex";
export default {
components: {
......@@ -114,9 +113,11 @@ export default {
checkListIn: [],
list: [],
listIn: [],
user_info: {},
}),
mounted() {
this.getList();
this.getUserCoins();
},
computed: {
getNum() {
......@@ -132,9 +133,9 @@ export default {
this.checkList.forEach((item, index) => {
if (item) {
if (this.list[index].service_id != 0) {
sum += (this.list[index].service.spcs_info.money * this.list[index].duration).toFixed(2);
sum += Number((this.list[index].service.spcs_info.money * this.list[index].duration).toFixed(2));
} else {
sum += (this.list[index].application.price * this.list[index].duration).toFixed(2);
sum += Number((this.list[index].application.price * this.list[index].duration).toFixed(2));
}
}
});
......@@ -143,7 +144,6 @@ export default {
getCartState() {
return this.$store.state.cartState;
},
...mapState(["userInfo"]),
},
watch: {
getCartState(newVal) {
......@@ -151,6 +151,13 @@ export default {
},
},
methods: {
getUserCoins() {
this.$api.user.getUserCoins().then((response) => {
if (response.data.success == 1) {
this.user_info = response.data.data;
}
});
},
getList() {
this.$api.serviceShop.getShoppingCart().then((response) => {
if (response.data.success == "1") {
......@@ -158,6 +165,7 @@ export default {
this.listIn = response.data.data.invalid || [];
this.checkList = [];
this.checkListIn = [];
this.checkShopAll = false;
for (let index in this.list) {
this.checkList.push(false);
}
......
src/components/side-nav-bar.vue
View file @ c52fddf2
......@@ -66,10 +66,6 @@ export default {
type: Array,
default: () => [],
},
imgSrc: {
type: String,
default: "tool_fuwu",
},
},
methods: {
titleAction() {
......@@ -103,6 +99,7 @@ export default {
}
.side_nav_bar_title > span {
font-size: 16px;
line-height: 20px;
color: #c3caf8;
}
.side_nav_bar_list > li > a {
......
src/components/table/table-um.vue
View file @ c52fddf2
......@@ -452,6 +452,7 @@ export default {
},
datas: {
handler(val) {
console.log(val)
this.getDataFromApiSync();
},
deep: true
......
src/components/work-flow/workflows-view.vue
View file @ c52fddf2
<template>
<div class="workflows-view" ref="flowContainer" :style="{zoom:zoom,}">
<div class="workflows-view" ref="flowContainer" :style="{ zoom: zoom }">
<super-flow
ref="superFlow"
:node-list="nodeList"
......@@ -23,6 +23,14 @@
class="flow-node"
:class="`flow-node-${meta.type}`"
>
<div>
<svg-icon
id="judge_svg"
v-if="meta.type == 4"
icon-class="bg_tiaojian_nor"
class="judge_svg"
></svg-icon>
</div>
<span v-text="meta.name"></span>
</div>
<el-tooltip v-else effect="dark" placement="right-start">
......@@ -40,6 +48,14 @@
</div>
</div>
<div class="flow-node" :class="`flow-node-${meta.type}`">
<div>
<svg-icon
id="judge_svg"
v-if="meta.type == 4"
icon-class="bg_tiaojian_nor"
class="judge_svg"
></svg-icon>
</div>
<span v-text="meta.name"></span>
<span class="example-count" v-text="meta.running_nodes || 0"></span>
</div>
......@@ -60,10 +76,10 @@ export default {
type: Boolean,
default: false,
},
zoom:{
type:Number,
default:1,
}
zoom: {
type: Number,
default: 1,
},
},
data() {
return {
......@@ -91,8 +107,8 @@ export default {
])
.then((response) => {
let data = response[0].data.data;
let nodeList = data.nodeList||[];
let linkList = data.linkList||[];
let nodeList = data.nodeList || [];
let linkList = data.linkList || [];
let nodes = response[1].data.data;
nodes.forEach((node) => {
......@@ -109,7 +125,7 @@ export default {
this.nodeList = nodeList;
this.linkList = linkList;
})
.catch(function(error) {
.catch(function (error) {
console.log(error);
});
},
......@@ -170,6 +186,20 @@ export default {
background-color: #f78181;
color: #fff;
}
.flow-node-4 {
border: none;
box-shadow: none;
position: relative;
background: transparent;
line-height: 48px;
}
.judge_svg {
font-size: 116px;
position: absolute;
z-index: -1;
top: -34px;
left: 0px;
}
.example-count {
position: absolute;
right: -14px;
......
src/pages/authority/organization/organization.vue
View file @ c52fddf2
......@@ -2,6 +2,8 @@
<div class="organization_list">
<apass-list
@list-action="initDatas"
:page-size="20"
:page-sizes="[20, 50]"
search-placeholder="请输入关键字"
:list-total="listTotal"
>
......
src/pages/authority/user/money.vue
View file @ c52fddf2
......@@ -110,7 +110,6 @@ export default {
watch: {},
computed: {},
created() {
this.refreshData()
this.user_info()
},
mounted() {
......@@ -179,7 +178,7 @@ export default {
.post(
`/apaas/backmgt/user/recharge`,{
"user_id":this.user_info1.user_id,
     "num":parseInt(this.money_num)
     "num":this.money_num+''
}
).then((res)=>{
if(res.data.success){
......@@ -194,11 +193,12 @@ export default {
refreshData(){
this.$http
.get(
`/apaas/backmgt/user/rechargeRecords?start=${this.search_date[0]||''}&end=${this.search_date[1]||''}&limit=${this.currentlimit}&page=${this.currentPage}`
`/apaas/backmgt/user/rechargeRecords?user_id=${this.user_info1.user_id}&start=${this.search_date[0]||''}&end=${this.search_date[1]||''}&limit=${this.currentlimit}&page=${this.currentPage}`
).then((res)=>{
if(res.data.success){
console.log(res.data.data);
this.tableData = res.data.data
this.total_list = res.data.total
}
})
},
......@@ -209,7 +209,8 @@ export default {
).then((res)=>{
if(res.data.success){
console.log(res.data.data);
this.user_info1 = res.data.data
this.user_info1 = res.data.data;
this.refreshData()
}
})
},
......
src/pages/data-analysis/my-service.vue
View file @ c52fddf2
......@@ -2,14 +2,10 @@
<div>
<el-breadcrumb separator="/" class="bread_crumb1">
<el-breadcrumb-item :to="{ path: '/data_analysis' }">
{{
$t("lang.data_analysis")
}}
{{ $t("lang.data_analysis") }}
</el-breadcrumb-item>
<el-breadcrumb-item>
{{
$t("lang.service_data_analysis")
}}
{{ $t("lang.service_data_analysis") }}
</el-breadcrumb-item>
</el-breadcrumb>
<el-row v-if="is_general_user" class="in_analysis">
......@@ -17,14 +13,26 @@
<el-col :span="6" class="in_left">
<el-row>
<el-col :span="24" class="in_block">
<block-radius :show_header="true" title="服务总体概况" class="block">
<block-radius
:show_header="true"
title="服务总体概况"
class="block"
>
<div class="left_1">
<div ref="left_1_l" class="left_1_l">
<img :src="require('@/assets/imgs/data_img_service.gif')" class="left_1_img" />
<img
:src="require('@/assets/imgs/data_img_service.gif')"
class="left_1_img"
/>
<div class="left_1_title">服务总数</div>
<div class="left_1_num">{{ overview.serviceTotal }}</div>
</div>
<dashboard ref="left_1_r" :data="das_data" :is_word="true" class="left_1_r"></dashboard>
<dashboard
ref="left_1_r"
:data="das_data"
:is_word="true"
class="left_1_r"
></dashboard>
</div>
</block-radius>
</el-col>
......@@ -41,14 +49,14 @@
class="block-radius-content"
:data="mult_data_state"
:show_center_data="false"
:bar_width="10 "
:bar_width="10"
></multiple-circle>
<starlist
v-else
class="block-radius-content"
:options="linelistData"
:show_star="false"
style="margin-top: 30px;height: calc(100% - 51px);"
style="margin-top: 30px; height: calc(100% - 51px)"
></starlist>
</block-radius>
</el-col>
......@@ -60,7 +68,11 @@
@changeButton="changeServiceTypeBtn"
class="block"
>
<multiple-circle class="block-radius-content" :data="mult_data" :text="text"></multiple-circle>
<multiple-circle
class="block-radius-content"
:data="mult_data"
:text="text"
></multiple-circle>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
......@@ -84,7 +96,11 @@
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
<block-radius :show_header="true" title="服务热门搜索" class="block">
<block-radius
:show_header="true"
title="服务热门搜索"
class="block"
>
<div class="block-radius-content service-hot-search">
<div class="left-content">
<div class="hot-line">
......@@ -92,20 +108,36 @@
<div class="hot-line-chart">
<!-- 折线图 -->
<p class="sparkline-text">
<span>{{sparkline1.num}}</span>
<span>{{ sparkline1.num }}</span>
<span
:style="sparkline1.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
:style="
sparkline1.up > 0
? { backgroundColor: '#e7fdfc', color: '#25bdb1' }
: { backgroundColor: '#fbe8e8', color: '#e15260' }
"
>
{{sparkline1.up>0?sparkline1.up:0-sparkline1.up}}%
{{
sparkline1.up > 0
? sparkline1.up
: 0 - sparkline1.up
}}%
<img
v-if="sparkline1.up>0"
v-if="sparkline1.up > 0"
src="../../assets/imgs/icon_up.png"
alt
/>
<img v-if="sparkline1.up<0" src="../../assets/imgs/icon_down.png" alt />
<img
v-if="sparkline1.up < 0"
src="../../assets/imgs/icon_down.png"
alt
/>
</span>
</p>
<sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
<sparkline
:indicatorStyles="spIndicatorStyles1"
width="220"
height="42"
>
<sparklineCurve
:refLineStyles="spRefLineStyles3"
:refLineType="false"
......@@ -121,20 +153,36 @@
<div class="hot-line-chart">
<!-- 折线图 -->
<p class="sparkline-text sparkline-text-user">
<span>{{sparkline2.num}}</span>
<span>{{ sparkline2.num }}</span>
<span
:style="sparkline2.up>0?{backgroundColor:'#e7fdfc',color:'#25bdb1'}:{backgroundColor:'#fbe8e8',color:'#e15260'}"
:style="
sparkline2.up > 0
? { backgroundColor: '#e7fdfc', color: '#25bdb1' }
: { backgroundColor: '#fbe8e8', color: '#e15260' }
"
>
{{sparkline2.up>0?sparkline2.up:0-sparkline2.up}}%
{{
sparkline2.up > 0
? sparkline2.up
: 0 - sparkline2.up
}}%
<img
v-if="sparkline2.up>0"
v-if="sparkline2.up > 0"
src="../../assets/imgs/icon_up.png"
alt
/>
<img v-if="sparkline2.up<0" src="../../assets/imgs/icon_down.png" alt />
<img
v-if="sparkline2.up < 0"
src="../../assets/imgs/icon_down.png"
alt
/>
</span>
</p>
<sparkline :indicatorStyles="spIndicatorStyles1" width="220" height="42">
<sparkline
:indicatorStyles="spIndicatorStyles1"
width="220"
height="42"
>
<sparklineCurve
:refLineStyles="spRefLineStyles3"
:refLineType="false"
......@@ -165,7 +213,10 @@
:buttons_arr="['近14天', '近30天']"
@changeButton="changeServeiceTotalChangeBtn"
>
<line-chart class="block-radius-content" :data="line_data"></line-chart>
<line-chart
class="block-radius-content"
:data="line_data"
></line-chart>
</block-radius>
</el-col>
</el-row>
......@@ -206,9 +257,18 @@
@changeButton="changeOpenessBtnindex"
class="block"
>
<single-circle class="block-radius-content single-charts" :data="single_data"></single-circle>
<single-circle class="block-radius-content single-charts" :data="single_data1"></single-circle>
<single-circle class="block-radius-content single-charts" :data="single_data2"></single-circle>
<single-circle
class="block-radius-content single-charts"
:data="single_data"
></single-circle>
<single-circle
class="block-radius-content single-charts"
:data="single_data1"
></single-circle>
<single-circle
class="block-radius-content single-charts"
:data="single_data2"
></single-circle>
</block-radius>
</el-col>
<el-col :span="24" class="in_block">
......@@ -229,7 +289,7 @@
class="block-radius-content"
:options="starlistData"
:total="starlistTotal"
style="margin-top: 30px;height: calc(100% - 51px);"
style="margin-top: 30px; height: calc(100% - 51px)"
></starlist>
</block-radius>
</el-col>
......@@ -237,13 +297,24 @@
</el-col>
<!-- 不可横向铺满，一般为最后一行 -->
<el-col :span="6" class="in_block">
<block-radius :show_header="true" title="服务来源机构分析" class="block">
<BarChart :data="bar_data_org" :x_router="30" :colors="['#e56600', '#e56600']" />
<block-radius
:show_header="true"
title="服务来源机构分析"
class="block"
>
<BarChart
:data="bar_data_org"
:x_router="30"
:colors="['#e56600', '#e56600']"
/>
</block-radius>
</el-col>
<el-col :span="18" class="in_block default">
<block-radius class="block">
<img :src="require('@/assets/imgs/data_img_default.gif')" class="default_img" />
<img
:src="require('@/assets/imgs/data_img_default.gif')"
class="default_img"
/>
</block-radius>
</el-col>
</el-row>
......@@ -291,7 +362,12 @@ export default {
right_2_state: 0,
right_3_state: 0,
last_id: 0,
mult_data_state: [],
mult_data_state: [
{ name: "健康", value: 0 },
{ name: "未使用", value: 0 },
{ name: "故障", value: 0 },
{ name: "警告", value: 0 },
],
mult_data: [],
spIndicatorStyles1: false,
spRefLineStyles3: {
......@@ -547,7 +623,25 @@ export default {
getServiceHealth() {
this.$api.dataAnalysis.getServiceHealth().then((response) => {
if (response.data.success == 1) {
this.mult_data_state = response.data.data.seriesData;
let data = response.data.data.seriesData;
let jk = data.find((item) => {
return item.name == "健康";
});
let wsy = data.find((item) => {
return item.name == "未使用";
});
let gz = data.find((item) => {
return item.name == "故障";
});
let jg = data.find((item) => {
return item.name == "警告";
});
this.mult_data_state = [
{ name: "健康", value: jk.value },
{ name: "未使用", value: wsy.value },
{ name: "故障", value: gz.value },
{ name: "警告", value: jg.value },
];
}
});
},
......
src/pages/data-analysis/org-service.vue
View file @ c52fddf2
......@@ -315,10 +315,10 @@ export default {
right_3_state: 0,
last_id: 0,
mult_data_state: [
{ name: "正常", value: 0 },
{ name: "警告", value: 0 },
{ name: "错误", value: 0 },
{ name: "健康", value: 0 },
{ name: "未使用", value: 0 },
{ name: "故障", value: 0 },
{ name: "警告", value: 0 },
],
mult_data: [
{ name: "数据服务", value: 0 },
......@@ -535,7 +535,25 @@ export default {
getServiceHealth() {
this.$api.dataAnalysis.getServiceHealth().then((response) => {
if (response.data.success == 1) {
this.mult_data_state = response.data.data.seriesData;
let data = response.data.data.seriesData;
let jk = data.find((item) => {
return item.name == "健康";
});
let wsy = data.find((item) => {
return item.name == "未使用";
});
let gz = data.find((item) => {
return item.name == "故障";
});
let jg = data.find((item) => {
return item.name == "警告";
});
this.mult_data_state = [
{ name: "健康", value: jk.value },
{ name: "未使用", value: wsy.value },
{ name: "故障", value: gz.value },
{ name: "警告", value: jg.value },
];
}
});
},
......
src/pages/data-analysis/super-overview.vue
View file @ c52fddf2
......@@ -348,7 +348,8 @@ export default {
})
.then(({ data }) => {
if (data.success === 1) {
this.hotSeviceData = data.data.map((item, index) => ({
let arr = data.data || [];
this.hotSeviceData = arr.map((item, index) => ({
...item,
hotIndex: index + 1,
}));
......
src/pages/data-analysis/super-service.vue
View file @ c52fddf2
......@@ -309,10 +309,10 @@ export default {
right_3_state: 0,
last_id: 0,
mult_data_state: [
{ name: "正常", value: 0 },
{ name: "警告", value: 0 },
{ name: "错误", value: 0 },
{ name: "健康", value: 0 },
{ name: "未使用", value: 0 },
{ name: "故障", value: 0 },
{ name: "警告", value: 0 },
],
mult_data: [
{ name: "数据服务", value: 0 },
......@@ -529,7 +529,25 @@ export default {
getServiceHealth() {
this.$api.dataAnalysis.getServiceHealth().then((response) => {
if (response.data.success == 1) {
this.mult_data_state = response.data.data.seriesData;
let data = response.data.data.seriesData;
let jk = data.find((item) => {
return item.name == "健康";
});
let wsy = data.find((item) => {
return item.name == "未使用";
});
let gz = data.find((item) => {
return item.name == "故障";
});
let jg = data.find((item) => {
return item.name == "警告";
});
this.mult_data_state = [
{ name: "健康", value: jk.value },
{ name: "未使用", value: wsy.value },
{ name: "故障", value: gz.value },
{ name: "警告", value: jg.value },
];
}
});
},
......
src/pages/example/example_com_list.vue
View file @ c52fddf2
......@@ -9,7 +9,7 @@
<script>
// @ is an alias to /src
import CommodityList from "@/components/service-list/commodity-list.vue";
import CommodityList from "@/components/service-list/commodity-list-new.vue";
import BlockRadius from "@/components/general/block-radius";
export default {
components: {
......
src/pages/message-management/recommended/recommended-eidt.vue
View file @ c52fddf2
......@@ -118,8 +118,19 @@ export default {
}
})
},
//改变select_able数据
change_select_able(val,flag){
for (let i = 0; i < this.select_able_arr.length; i++) {
let item = this.select_able_arr[i];
if (item.id===val.id) {
this.$set(item, "checked", flag);
break;
}
}
},
change_value(val) {
// console.log(val);
// debugger
if(val.check){
this.selected_arr.push(val.data)
}else{
......@@ -131,18 +142,14 @@ export default {
});
this.selected_arr.splice(temp,1)
}
this.change_select_able(val,val.check?1:0)
},
rank_value(val) {
// console.log(val);
// debugger
var index = val.position=='start'?0:val.position=='end'?this.selected_arr.length-1:val.position
if(val.act==2){
for (let i = 0; i < this.select_able_arr.length; i++) {
let item = this.select_able_arr[i];
if (item.id===val.id) {
this.$set(item, "checked", 0);
break;
}
}
this.change_select_able(val,0)
this.selected_arr.splice(index,1)
}else if(val.act==1){
var temp = this.selected_arr.splice(index,1)
......@@ -151,6 +158,7 @@ export default {
var temp = this.selected_arr.splice(index,1)
this.selected_arr.splice(index-1, 0, temp[0])
}
},
get_select_data() {
console.log(this.$route.query);
......
src/pages/service_shop/gzfwDetail.vue
View file @ c52fddf2
......@@ -4,7 +4,7 @@
<el-breadcrumb separator="/">
<el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item>
<el-breadcrumb-item to="/shop/data_service_list/5">
数据服务
感知服务
</el-breadcrumb-item>
<el-breadcrumb-item>服务详情信息</el-breadcrumb-item>
</el-breadcrumb>
......@@ -14,7 +14,6 @@
<service-tabs
:detail-data="detailData"
:specification-data="specificationData"
:provider-data="providerData"
:comments-data="commentsData"
:comments-url="commentsUrl"
......@@ -34,7 +33,6 @@ export default {
data: () => ({
baseInfo: null,
detailData: null,
specificationData: null,
providerData: null,
commentsData: null,
}),
......@@ -56,18 +54,6 @@ export default {
})
.then(({ data }) => {
let datas = data.data;
let specificationData =
(datas.serviceRequestSpcs &&
datas.serviceRequestSpcs.map((item) => ({
id: item.id,
type: item.type,
pv: item.pv,
count: item.count,
name: `访问次数：${item.pv}次/日 访问量：${item.count}次/日`,
descript: item.des,
}))) ||
[];
this.baseInfo = {
service_id: this.id,
app_id: 0,
......@@ -87,9 +73,9 @@ export default {
datas.data_service_type3_name,
],
descript: datas.descript,
serviceRequestSpcs: specificationData,
serviceRequestSpcs: datas.serviceRequestSpcs,
scoreDetail: datas.scoreDetail,
month_sale: data.month_sale,
month_sale: datas.month_sale,
};
this.detailData = [
......@@ -99,20 +85,30 @@ export default {
value: ["服务申请", "信息填写", "审核确认", "服务获取"],
},
{
name: "服务描述",
type: "text",
value: datas.descript,
},
{
name: "请求方式",
type: "text",
value: ["-", "GET", "POST", "PUT", "DELETE"][datas.req_type || 0],
name: "服务信息",
type: "table-list",
value: {
data_service_type1_name: datas.data_service_type1_name,
data_service_type2_name: datas.data_service_type2_name,
sectors_name: datas.sectors_name,
create_time: datas.create_time,
update_date: datas.update_date,
req_type: ["-", "GET", "POST", "PUT", "DELETE"][
datas.req_type || 0
],
encode_method: datas.encode_method,
},
{
name: "编码格式",
type: "text",
value: datas.encode_method,
},
// {
// name: "请求方式",
// type: "text",
// value: ["-", "GET", "POST", "PUT", "DELETE"][datas.req_type || 0],
// },
// {
// name: "编码格式",
// type: "text",
// value: datas.encode_method,
// },
{
name: "请求参数",
type: "table",
......@@ -186,12 +182,25 @@ export default {
},
},
];
this.specificationData = specificationData;
let arr1 = datas.serviceRequestSpcs.spcs_type_1 || [];
let arr2 = datas.serviceRequestSpcs.spcs_type_2 || [];
let arr = arr1.concat(arr2);
arr.map((item) => {
item.type = item.spcs_type == 1 ? "计次收费规格" : "时长收费规格";
item.spce =
item.spcs_type == 1
? `${item.money}金币/${item.spcs_count}次（${(
item.money / item.spcs_count
).toFixed(2)}金币/1次）`
: `${item.money}金币/月（次数不限）`;
item.times = item.spcs_type == 1 ? "不限时长" : "按月";
});
this.providerData = {
organization_name: datas.organization_name,
picture_path: datas.organization_picture,
user_name: datas.register_user_info.user_name,
phone: datas.register_user_info.phone,
serviceRequestSpcsTable: arr,
};
this.commentsData = datas.scoreDetail;
})
......
src/pages/service_shop/shop_car_apply.vue
View file @ c52fddf2
......@@ -163,7 +163,7 @@ export default {
this.service_arr[0]["size"] ="应用镜像部署权限："+data.price+"金币/月";
this.service_arr[0]["applytype"] =
"申请方式：" + (app_data.duration_unit == 1 ? "月" : "年");
this.service_arr[0]["num"] = app_data.duration;
this.service_arr[0]["num"] = `${app_data.duration}个月`;
this.service_arr[0]["count"] = app_data.duration*parseFloat(data.price)+'金币';
this.service_arr[0]["isMg"] = false;
this.service_arr[0]["isapp"] = true;
......@@ -205,18 +205,20 @@ export default {
data.request_spcs_info.forEach((el) => {
if (service_data.spec_id == el.id) {
let size = "";
let count = "";
if (el.spcs_type==1) {
size = `${el.money}金币/${el.spcs_count}次`
size = `计次收费：${el.money}金币/${el.spcs_count}次`;
this.service_arr[0]["num"] = "不限时长"
count = el.money;
} else {
size = `${el.money}金币/${el.duration_unit == 1 ? "月" : "年"}`
this.service_arr[0]["num"] = service_data.duration;
size = `${el.money}金币/${el.duration_unit == 1 ? "月" : "年"}`;
this.service_arr[0]["num"] = service_data.duration + (el.duration_unit == 1 ? "个月" : "年");
count = service_data.duration*el.money;
}
this.service_arr[0]["size"] = size;
this.service_arr[0]["count"] = service_data.duration*el.money+'金币';
this.all_cost = service_data.duration*el.money
this.service_arr[0]["count"] = count+'金币';
this.all_cost = count;
}
});
this.service_arr[0]["applytype"] =
......@@ -378,7 +380,7 @@ export default {
this.service_arr[l]["size"] ="应用镜像部署权限："+e.application.price+"金币/月";
this.service_arr[l]["applytype"] =
"申请方式：" + (e.duration_method == 1 ? "月" : "年");
this.service_arr[l]["num"] = e.duration;
this.service_arr[l]["num"] = `${e.duration}${e.duration_unit == 1 ? "个月" : "年"}`;
this.service_arr[l]["count"] = e.duration*parseFloat(e.application.price)+'金币';
this.service_arr[l]["isMg"] = false;
this.service_arr[l]["isapp"] = true;
......@@ -402,7 +404,7 @@ export default {
let spcs_type_2 = e.service.request_spcs_info.spcs_type_2 || [];
spcs_type_1.forEach((el,ind) => {
if (e.spec_id == el.id) {
this.service_arr[l]["size"] = `时长收费：${el.money}金币/${el.spcs_count}次 * ${e.duration}`;
this.service_arr[l]["size"] = `计次收费：${el.money}金币/${el.spcs_count}次`;
this.service_arr[l]["num"] = "不限时长";
this.service_arr[l]["count"] = e.duration*el.money+'金币';
temp_cost = this.floatAdd(temp_cost, e.duration*el.money);
......@@ -410,8 +412,8 @@ export default {
});
spcs_type_2.forEach((el,ind) => {
if (e.spec_id == el.id) {
this.service_arr[l]["size"] = `应用镜像部署权限：${el.money}金币/${el.duration_unit == 1 ? "月" : "年"}`;
this.service_arr[l]["num"] = e.duration;
this.service_arr[l]["size"] = `时长收费：${el.money}金币/${el.duration_unit == 1 ? "月" : "年"}`;
this.service_arr[l]["num"] = `${e.duration}${el.duration_unit == 1 ? "个月" : "年"}`;
this.service_arr[l]["count"] = e.duration*el.money+'金币';
temp_cost = this.floatAdd(temp_cost, e.duration*el.money);
}
......
src/pages/service_shop/shop_cloud-new.vue 0 → 100644
View file @ c52fddf2
<template>
<div class="shop_list_cont">
<el-container>
<el-aside width="176px">
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main class="main_init">
<shop-cloud name="云资源服务"></shop-cloud>
</el-main>
</el-container>
</div>
</template>
<script>
import ServiceShopMenu from "@/components/service-list/service_shop_menu-new";
import ShopCloud from "@/components/shop-cloud/shop-cloud-new";
export default {
components: {
ServiceShopMenu,
ShopCloud
},
data: () => ({}),
mounted() {},
methods: {}
};
</script>
<style scoped>
.shop_list_cont {
width: 1200px;
margin: 0 auto;
position: relative;
}
.main_init {
padding: 2px 0 16px 16px;
}
</style>
\ No newline at end of file
src/pages/service_shop/shop_list-new.vue 0 → 100644
View file @ c52fddf2
<template>
<div class="shop_list_cont">
<el-container>
<el-aside width="176px">
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main class="main_init">
<service-list
:filterNames="filterNames"
:name="name"
:url="url"
:urlFilter="urlFilter"
></service-list>
</el-main>
</el-container>
</div>
</template>
<script>
import ServiceShopMenu from "@/components/service-list/service_shop_menu-new";
import ServiceList from "@/components/service-list/service_list-new";
import BlockRadius from "@/components/general/block-radius";
export default {
components: {
ServiceShopMenu,
ServiceList,
BlockRadius,
},
data: () => ({
urlFilter: "",
url: "",
name: "",
filterNames: [],
}),
mounted() {
this.getVal(this.$route.path);
},
methods: {
getVal(val) {
let uri = val.substring(6);
uri = uri.substring(0, uri.indexOf("/"));
switch (uri) {
case "data_service_list":
this.name = "数据服务";
this.urlFilter = "5";
this.url = "/shop/sjfwDetail";
this.filterNames = ["数据服务类型", "服务领域", "数据来源机构"];
break;
case "space_time_service_list":
this.name = "时空服务";
this.urlFilter = "6";
this.url = "/shop/skfwDetail";
this.filterNames = ["时空服务类型", "服务领域", "服务来源组织"];
break;
case "video_service_list":
this.name = "视频服务";
this.urlFilter = "7";
this.url = "/shop/spfwDetail";
this.filterNames = ["", "服务领域", "服务来源组织"];
break;
case "perception_service_list":
this.name = "感知服务";
this.urlFilter = "10";
this.url = "/shop/gzfwDetail";
this.filterNames = ["", "服务领域", "服务来源组织"];
break;
case "comprehensive_app_list":
this.name = "融合服务";
this.urlFilter = "21";
this.url = "/shop/zhfwDetail";
this.filterNames = ["服务类型", "服务领域", "服务来源组织"];
break;
case "app_store_list":
this.name = "应用商店";
this.urlFilter = "app";
this.url = "/shop/yysdDetail";
this.filterNames = ["应用类型", "应用领域", "应用来源机构"];
break;
default:
this.name = "";
this.urlFilter = "";
this.url = "";
this.filterNames = [];
break;
}
},
},
watch: {
"$route.path": {
handler(val) {
this.getVal(val);
},
},
},
};
</script>
<style lang="less" scoped>
.default {
height: calc(100vh - 180px);
display: flex;
align-items: center;
justify-content: center;
margin: 0;
.default_img {
width: 1282px;
height: 629px;
.default_title {
color: #264dd9;
font-size: 44px;
font-weight: bold;
margin-bottom: 30px;
}
.default_msg {
color: #58617a;
font-size: 24px;
line-height: 44px;
}
}
}
</style>
<style scoped>
.default_img {
background: url("~@/assets/imgs/img_default_quesheng.png") no-repeat center
center;
}
.shop_list_cont {
width: 1200px;
margin: 0 auto;
position: relative;
}
.main_init {
padding: 16px 0 16px 16px;
}
</style>
\ No newline at end of file
src/pages/service_shop/shop_list.vue → src/pages/service_shop/shop_list-old.vue
View file @ c52fddf2
<template>
<!-- <div class="shop_list_cont"> -->
<div>
<el-container>
<el-aside width="180px">
......@@ -55,14 +56,14 @@ export default {
case "video_service_list":
this.name = "视频服务";
this.urlFilter = "7";
this.url = "";
this.filterNames = [];
this.url = "/shop/spfwDetail";
this.filterNames = ["", "服务领域", "服务来源组织"];
break;
case "perception_service_list":
this.name = "感知服务";
this.urlFilter = "10";
this.url = "";
this.filterNames = [];
this.url = "/shop/gzfwDetail";
this.filterNames = ["", "服务领域", "服务来源组织"];
break;
case "comprehensive_app_list":
this.name = "融合服务";
......@@ -123,4 +124,9 @@ export default {
background: url("~@/assets/imgs/img_default_quesheng.png") no-repeat center
center;
}
.shop_list_cont {
width: 1200px;
margin: 0 auto;
position: relative;
}
</style>
src/pages/service_shop/sjfwDetail.vue
View file @ c52fddf2
......@@ -75,7 +75,7 @@ export default {
descript: datas.descript,
serviceRequestSpcs: datas.serviceRequestSpcs,
scoreDetail: datas.scoreDetail,
month_sale: data.month_sale,
month_sale: datas.month_sale,
};
this.detailData = [
......@@ -85,25 +85,35 @@ export default {
value: ["服务申请", "信息填写", "审核确认", "服务获取"],
},
{
name: "服务描述",
type: "text",
value: datas.descript,
},
{
name: "请求方式",
type: "text",
value: ["-", "GET", "POST", "PUT", "DELETE"][datas.req_type || 0],
name: "服务信息",
type: "table-list",
value: {
data_service_type1_name: datas.data_service_type1_name,
data_service_type2_name: datas.data_service_type2_name,
sectors_name: datas.sectors_name,
create_time: datas.create_time,
update_date: datas.update_date,
req_type: ["-", "GET", "POST", "PUT", "DELETE"][
datas.req_type || 0
],
encode_method: datas.encode_method,
},
{
name: "编码格式",
type: "text",
value: datas.encode_method,
},
// {
// name: "请求方式",
// type: "text",
// value: ["-", "GET", "POST", "PUT", "DELETE"][datas.req_type || 0],
// },
// {
// name: "编码格式",
// type: "text",
// value: datas.encode_method,
// },
{
name: "请求参数",
type: "table",
value: {
datas: this.getTableData(datas.req_fields),
datas: this.getTableData(datas.req_query),
columns: [
{
prop: "name",
......@@ -172,15 +182,29 @@ export default {
},
},
];
let arr1 = datas.serviceRequestSpcs.spcs_type_1 || [];
let arr2 = datas.serviceRequestSpcs.spcs_type_2 || [];
let arr = arr1.concat(arr2);
arr.map((item) => {
item.type = item.spcs_type == 1 ? "计次收费规格" : "时长收费规格";
item.spce =
item.spcs_type == 1
? `${item.money}金币/${item.spcs_count}次（${(
item.money / item.spcs_count
).toFixed(2)}金币/1次）`
: `${item.money}金币/月（次数不限）`;
item.times = item.spcs_type == 1 ? "不限时长" : "按月";
});
this.providerData = {
organization_name: datas.organization_name,
picture_path: datas.organization_picture,
user_name: datas.register_user_info.user_name,
phone: datas.register_user_info.phone,
serviceRequestSpcsTable: arr,
};
this.commentsData = datas.scoreDetail;
})
.catch(function(error) {
.catch(function (error) {
console.log(error);
});
},
......
src/pages/service_shop/skfwDetail.vue
View file @ c52fddf2
......@@ -14,7 +14,6 @@
<service-tabs
:detail-data="detailData"
:specification-data="specificationData"
:provider-data="providerData"
:comments-data="commentsData"
:comments-url="commentsUrl"
......@@ -34,7 +33,6 @@ export default {
data: () => ({
baseInfo: null,
detailData: null,
specificationData: null,
providerData: null,
commentsData: null,
}),
......@@ -61,17 +59,6 @@ export default {
})
.then(({ data }) => {
let datas = data.data;
let specificationData =
(datas.serviceRequestSpcs &&
datas.serviceRequestSpcs.map((item) => ({
id: item.id,
type: item.type,
pv: item.pv,
count: item.count,
name: `访问次数：${item.pv}次/日 访问量：${item.count}次/日`,
descript: item.des,
}))) ||
[];
this.baseInfo = {
portal_id: datas.portal_id || "", // 时空服务id
......@@ -93,9 +80,9 @@ export default {
datas.data_service_type3_name,
],
descript: datas.descript,
serviceRequestSpcs: specificationData,
scoreDetail: datas.scoreDetail,
month_sale: data.month_sale,
month_sale: datas.month_sale,
serviceRequestSpcs: datas.serviceRequestSpcs,
};
this.detailData = [
......@@ -105,9 +92,19 @@ export default {
value: ["服务申请", "信息填写", "审核确认", "服务获取"],
},
{
name: "服务描述",
type: "text",
value: datas.descript,
name: "服务信息",
type: "table-list",
value: {
data_service_type1_name: datas.data_service_type1_name,
data_service_type2_name: datas.data_service_type2_name,
sectors_name: datas.sectors_name,
create_time: datas.create_time,
update_date: datas.update_date,
req_type: ["-", "GET", "POST", "PUT", "DELETE"][
datas.req_type || 0
],
encode_method: datas.encode_method,
},
},
/* {
name: "服务属性", // TODO: replace
......@@ -145,16 +142,29 @@ export default {
],
}, */
];
this.specificationData = specificationData;
let arr1 = datas.serviceRequestSpcs.spcs_type_1 || [];
let arr2 = datas.serviceRequestSpcs.spcs_type_2 || [];
let arr = arr1.concat(arr2);
arr.map((item) => {
item.type = item.spcs_type == 1 ? "计次收费规格" : "时长收费规格";
item.spce =
item.spcs_type == 1
? `${item.money}金币/${item.spcs_count}次（${(
item.money / item.spcs_count
).toFixed(2)}金币/1次）`
: `${item.money}金币/月（次数不限）`;
item.times = item.spcs_type == 1 ? "不限时长" : "按月";
});
this.providerData = {
organization_name: datas.organization_name,
picture_path: datas.organization_picture,
user_name: datas.register_user_info.user_name,
phone: datas.register_user_info.phone,
serviceRequestSpcsTable: arr,
};
this.commentsData = datas.scoreDetail;
})
.catch(function(error) {
.catch(function (error) {
console.log(error);
});
},
......
src/pages/service_shop/spfwDetail.vue 0 → 100644
View file @ c52fddf2
<template>
<div class="sevice_detail">
<div class="apass_breadcrumb">
<el-breadcrumb separator="/">
<el-breadcrumb-item to="/shop">服务超市</el-breadcrumb-item>
<el-breadcrumb-item to="/shop/data_service_list/5">
视频服务
</el-breadcrumb-item>
<el-breadcrumb-item>服务详情信息</el-breadcrumb-item>
</el-breadcrumb>
</div>
<service-info :data="baseInfo" v-if="baseInfo"></service-info>
<service-tabs
:detail-data="detailData"
:provider-data="providerData"
:comments-data="commentsData"
:comments-url="commentsUrl"
></service-tabs>
</div>
</template>
<script>
import serviceInfo from "@/components/service-info/service-info";
import serviceTabs from "@/components/service-tabs/service-tabs";
export default {
components: {
serviceInfo,
serviceTabs,
},
data: () => ({
baseInfo: null,
detailData: null,
providerData: null,
commentsData: null,
}),
computed: {
id() {
return this.$route.params.id;
},
commentsUrl() {
return `/apaas/serviceapp/v3/servicemarket/estimates?serviceId=${this.id}`;
},
},
methods: {
init() {
this.$http
.get("/apaas/serviceapp/v3/servicemarket/detail", {
params: {
serviceId: this.id,
},
})
.then(({ data }) => {
let datas = data.data;
this.baseInfo = {
service_id: this.id,
app_id: 0,
name: datas.name,
// type: "",
openness: datas.openness,
view_count: datas.view_count,
apply_count: datas.apply_count,
cover: datas.cover,
organization_name: datas.organization_name,
create_time: datas.create_time,
update_date: datas.update_date,
sectors_name: datas.sectors_name,
data_service_type: [
datas.data_service_type1_name,
datas.data_service_type2_name,
datas.data_service_type3_name,
],
descript: datas.descript,
serviceRequestSpcs: datas.serviceRequestSpcs,
scoreDetail: datas.scoreDetail,
month_sale: datas.month_sale,
};
this.detailData = [
{
name: "获取流程",
type: "step",
value: ["服务申请", "信息填写", "审核确认", "服务获取"],
},
{
name: "服务信息",
type: "table-list",
value: {
data_service_type1_name: datas.data_service_type1_name,
data_service_type2_name: datas.data_service_type2_name,
sectors_name: datas.sectors_name,
create_time: datas.create_time,
update_date: datas.update_date,
req_type: ["-", "GET", "POST", "PUT", "DELETE"][
datas.req_type || 0
],
encode_method: datas.encode_method,
},
},
// {
// name: "请求方式",
// type: "text",
// value: ["-", "GET", "POST", "PUT", "DELETE"][datas.req_type || 0],
// },
// {
// name: "编码格式",
// type: "text",
// value: datas.encode_method,
// },
{
name: "请求参数",
type: "table",
value: {
datas: this.getTableData(datas.req_fields),
columns: [
{
prop: "name",
label: "字段编码",
width: 240,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 180,
},
{
prop: "field_type",
label: "字段类型",
align: "center",
width: 180,
},
{
prop: "descript",
label: "字段说明",
},
{
prop: "is_must",
label: "是否必须",
align: "center",
width: 180,
},
{
prop: "example",
label: "示例值",
align: "center",
width: 180,
},
],
},
},
{
name: "响应参数",
type: "table",
value: {
datas: this.getTableData(datas.res_fields),
columns: [
{
prop: "name",
label: "字段编码",
width: 240,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 180,
},
{
prop: "field_type",
label: "字段类型",
align: "center",
width: 180,
},
{
prop: "descript",
label: "字段说明",
},
],
},
},
];
let arr1 = datas.serviceRequestSpcs.spcs_type_1 || [];
let arr2 = datas.serviceRequestSpcs.spcs_type_2 || [];
let arr = arr1.concat(arr2);
arr.map((item) => {
item.type = item.spcs_type == 1 ? "计次收费规格" : "时长收费规格";
item.spce =
item.spcs_type == 1
? `${item.money}金币/${item.spcs_count}次（${(
item.money / item.spcs_count
).toFixed(2)}金币/1次）`
: `${item.money}金币/月（次数不限）`;
item.times = item.spcs_type == 1 ? "不限时长" : "按月";
});
this.providerData = {
organization_name: datas.organization_name,
picture_path: datas.organization_picture,
user_name: datas.register_user_info.user_name,
phone: datas.register_user_info.phone,
serviceRequestSpcsTable: arr,
};
this.commentsData = datas.scoreDetail;
})
.catch(function(error) {
console.log(error);
});
},
getTableData(tableStr) {
let tabledata = (tableStr && JSON.parse(tableStr)) || [];
let addRowId = (data, baseId = "") => {
data.forEach((item, index) => {
let rowId = baseId + (index + 1) + "";
item.rowId = rowId;
if (item.children && item.children.length) {
addRowId(item.children, rowId);
}
});
};
addRowId(tabledata);
return tabledata;
},
},
mounted() {
this.init();
},
};
</script>
src/pages/service_shop/yysdDetail.vue
View file @ c52fddf2
......@@ -10,7 +10,7 @@
</el-breadcrumb>
</div>
<app-info :data="baseInfo"></app-info>
<app-info :datas="baseInfo"></app-info>
<service-tabs
:detail-data="detailData"
......@@ -33,9 +33,64 @@ export default {
serviceTabs,
},
data: () => ({
baseInfo: null,
detailData: null,
providerData: null,
baseInfo: {
app_id: "",
app_name: "",
apply_id: "",
apply_times: "",
apply_type_name: "",
create_date: "",
deploy_times: "",
logo: "",
online_state: "",
online_state_name: "",
source: "",
state: "",
type_name: "",
up_deploy_status: "",
up_platform_status: "",
up_userid: "",
username: "",
version: "",
view_count: "",
ywly_name: "",
yyjj: "",
price: "",
},
detailData: [
{
name: "获取流程",
type: "step_app",
value: ["应用申请", "信息填写", "审核确认", "应用获取"],
},
{
name: "应用信息",
type: "app-list",
value: {},
},
{
name: "功能简介",
type: "text",
value: "",
},
{
name: "应用场景",
type: "text",
value: "",
},
{
name: "应用参数",
type: "rich-text",
value: "",
},
],
providerData: {
organization_name: "",
picture_path: "",
user_name: "",
phone: "",
serviceRequestSpcsTable: [],
},
}),
computed: {
id() {
......@@ -55,22 +110,59 @@ export default {
},
})
.then(({ data }) => {
this.$api.serviceShop.getExtendedInfo({ id: this.id }).then((response) => {
this.baseInfo = data.data;
this.baseInfo = Object.assign(this.baseInfo, response.data.data);
this.$api.serviceShop
.getExtendedInfo({ id: this.id })
.then((response) => {
this.baseInfo.app_id = data.data.app_id;
this.baseInfo.app_name = data.data.app_name;
this.baseInfo.apply_id = data.data.apply_id;
this.baseInfo.apply_times = data.data.apply_times;
this.baseInfo.apply_type_name = data.data.apply_type_name;
this.baseInfo.create_date = data.data.create_date;
this.baseInfo.deploy_times = data.data.deploy_times;
this.baseInfo.logo = data.data.logo;
this.baseInfo.online_state = data.data.online_state;
this.baseInfo.online_state_name = data.data.online_state_name;
this.baseInfo.source = data.data.source;
this.baseInfo.state = data.data.state;
this.baseInfo.type_name = data.data.type_name;
this.baseInfo.up_deploy_status = data.data.up_deploy_status;
this.baseInfo.up_platform_status = data.data.up_platform_status;
this.baseInfo.up_userid = data.data.up_userid;
this.baseInfo.username = data.data.username;
this.baseInfo.version = data.data.version;
this.baseInfo.view_count = data.data.view_count;
this.baseInfo.ywly_name = data.data.ywly_name;
this.baseInfo.price = response.data.data.price;
this.baseInfo.price_style = response.data.data.price_style;
this.baseInfo.sale = response.data.data.sale;
this.baseInfo.star = response.data.data.star;
});
this.detailData[1].value = {
online_state_name: data.data.online_state_name,
type_name: data.data.type_name,
ywly_name: data.data.ywly_name,
create_date: data.data.create_date,
};
})
.catch(function (error) {
console.log(error);
});
let detailData = [
this.$http
.get(`/apaas/hubApi/market/appSpecification?id=${this.id}`)
.then((res) => {
if (res.data.success) {
var data = res.data.data;
this.providerData.serviceRequestSpcsTable = [
{
name: "获取流程",
type: "step",
value: ["应用申请", "信息填写", "审核确认", "应用获取"],
type: "申请获取应用镜像部署权限",
spce: `${data.price}金币`,
times: "按月",
specifications: data.specifications,
},
];
}
});
Promise.all([
this.$http.get(`/apaas/hubApi/market/app/detail/${this.id}`),
this.$http.get(`/apaas/hubApi/market/values/${this.id}`),
......@@ -78,30 +170,10 @@ export default {
.then((response) => {
let data1 = response[0].data.data;
let data2 = response[1].data.data;
detailData.push(
{
name: "应用简介",
type: "text",
value: data1.yyjj,
},
{
name: "功能简介",
type: "text",
value: data1.gnjj,
},
{
name: "应用场景",
type: "text",
value: data1.cjsl,
},
{
name: "应用参数",
type: "rich-text",
value: data2,
}
);
this.detailData = detailData;
this.detailData[2].value = data1.gnjj;
this.detailData[3].value = data1.cjsl;
this.detailData[4].value = data2;
this.baseInfo.yyjj = data1.yyjj;
})
.catch(function (error) {
console.log(error);
......@@ -110,12 +182,10 @@ export default {
this.$http
.get(`/apaas/hubApi/appShop/orgInfo/${this.id}`)
.then(({ data }) => {
this.providerData = {
organization_name: data.data.department_name,
picture_path: data.data.picture_path,
user_name: data.data.user_name,
phone: data.data.phone,
};
this.providerData.organization_name = data.data.department_name;
this.providerData.picture_path = data.data.picture_path;
this.providerData.user_name = data.data.user_name;
this.providerData.phone = data.data.phone;
})
.catch(function (error) {
console.log(error);
......
src/pages/service_shop/zhfwDetail.vue
View file @ c52fddf2
......@@ -14,7 +14,6 @@
<service-tabs
:detail-data="detailData"
:specification-data="specificationData"
:provider-data="providerData"
:comments-data="commentsData"
:comments-url="commentsUrl"
......@@ -34,7 +33,6 @@ export default {
data: () => ({
baseInfo: null,
detailData: null,
specificationData: null,
providerData: null,
commentsData: null,
}),
......@@ -56,18 +54,6 @@ export default {
})
.then(({ data }) => {
let datas = data.data;
let specificationData =
(datas.serviceRequestSpcs &&
datas.serviceRequestSpcs.map((item) => ({
id: item.id,
type: item.type,
pv: item.pv,
count: item.count,
name: `访问次数：${item.pv}次/日 访问量：${item.count}次/日`,
descript: item.des,
}))) ||
[];
this.baseInfo = {
service_id: this.id,
app_id: 0,
......@@ -88,9 +74,9 @@ export default {
datas.data_service_type3_name,
],
descript: datas.descript,
serviceRequestSpcs: specificationData,
serviceRequestSpcs: datas.serviceRequestSpcs,
scoreDetail: datas.scoreDetail,
month_sale: data.month_sale,
month_sale: datas.month_sale,
};
this.detailData = [
{
......@@ -99,9 +85,19 @@ export default {
value: ["服务申请", "信息填写", "审核确认", "服务获取"],
},
{
name: "服务描述",
type: "text",
value: datas.descript,
name: "服务信息",
type: "table-list",
value: {
data_service_type1_name: datas.data_service_type1_name,
data_service_type2_name: datas.data_service_type2_name,
sectors_name: datas.sectors_name,
create_time: datas.create_time,
update_date: datas.update_date,
req_type: ["-", "GET", "POST", "PUT", "DELETE"][
datas.req_type || 0
],
encode_method: datas.encode_method,
},
},
/* {
name: "微服务响应列表", // TODO: replace
......@@ -141,12 +137,25 @@ export default {
value: datas.workflows_id,
});
}
this.specificationData = specificationData;
let arr1 = datas.serviceRequestSpcs.spcs_type_1 || [];
let arr2 = datas.serviceRequestSpcs.spcs_type_2 || [];
let arr = arr1.concat(arr2);
arr.map((item) => {
item.type = item.spcs_type == 1 ? "计次收费规格" : "时长收费规格";
item.spce =
item.spcs_type == 1
? `${item.money}金币/${item.spcs_count}次（${(
item.money / item.spcs_count
).toFixed(2)}金币/1次）`
: `${item.money}金币/月（次数不限）`;
item.times = item.spcs_type == 1 ? "不限时长" : "按月";
});
this.providerData = {
organization_name: datas.organization_name,
picture_path: datas.organization_picture,
user_name: datas.register_user_info.user_name,
phone: datas.register_user_info.phone,
serviceRequestSpcsTable: arr,
};
this.commentsData = datas.scoreDetail;
})
......
src/pages/technical-support/answer-center/detail.vue
View file @ c52fddf2
......@@ -36,14 +36,14 @@
<div class="answer_list">
<div class="answer_box" v-for="(item,index) in answer" :key="'answer'+index+200">
<div class="picture">
<img :src="item.user_picture_path" alt="" style="width:100%">
<img :src="item.user_picture_path || head_pic" alt="" style="width:100%">
</div>
<div class="text" :style="index == answer.length-1||item.children?{border:'0'}:''">
<div class="text" :style="index == answer.length-1?{border:'0'}:''">
<p>
<span class="left">{{item.username}}</span>
<span class="right">
<span v-if="index==0||index==1||index==2">{{index==0?'沙发':index==1?'板凳':'地板'}}</span>
<span v-else>{{index}}楼</span> | <span>{{deal_time(item.created)}}</span>
<span v-if="index==0||index==1">{{index==0?'沙发':'板凳'}}</span>
<span v-else>{{index + 1}}楼</span> | <span>{{deal_time(item.created)}}</span>
</span>
</p>
<div v-html="item.content" class="hf_content"></div>
......@@ -55,25 +55,25 @@
:ref="'input'+index"
v-model="back_info">
<div slot="prefix" style="height:48px;line-height:48px;">
<img :src="user_info.picture_path" alt="" style="width:24px;margin:0 10px 0 10px;vertical-align:-6px;border-radius:50%;"></div>
<img :src="user_info.picture_path || head_pic" alt="" style="width:24px;margin:0 10px 0 10px;vertical-align:-6px;border-radius:50%;"></div>
<div slot="suffix" class="back_solt" @click="answer_question(item.id,item.user_id)">回复</div>
</el-input>
</div>
<template v-for="(it,idx) in item.children">
<div class="back_fllow answer_box" :key="'ans_child'+idx+5000" v-if="idx<=4||answer_child_index===index">
<div :style="idx == item.children.length-1&&item.children.length<=5?{border:'0',overflow:'hidden',}:{borderBottom:'2px solid #f4f7fc',overflow:'hidden',}" >
<div class="picture">
<img :src="it.user_picture_path" alt="" style="width:100%">
<div class="picture_fllow">
<img :src="it.user_picture_path || head_pic" alt="" style="width:100%">
</div>
<div class="text" style="border:0;">
<div class="text_fllow" style="border:0;">
<p>
<span class="left">{{it.username}} <span><span style="color:#bcc1d0;margin:0 9px;">回复</span>{{it.answered_user}}</span> </span>
<span class="right">
<span></span><span>{{deal_time(it.created)}}</span>
</span>
</p>
<div v-html="it.content" class="hf_content"></div>
<div @click="showinput(index,idx)" class="back"><img src="../../../assets/imgs/jszc_btn_huifu.png" alt=""> 回复</div>
<div v-html="it.content" class="hf_content_fllow"></div>
<div @click="showinput(index,idx)" class="back_fllow_in">回复</div>
</div>
<div class="back_input" style="padding:0;height:auto;margin-bottom:0;" v-if="answer_count[0]==index&&answer_count[1]==idx">
<el-input
......@@ -82,8 +82,8 @@
:ref="'input'+index+idx"
v-model="back_info">
<div slot="prefix" style="height:48px;line-height:48px;">
<img :src="user_info.picture_path" alt="" style="width:24px;margin:0 10px 0 10px;vertical-align:-6px;border-radius:50%;"></div>
<div slot="suffix" class="back_solt" @click="answer_question(it.id,it.user_id)">回复</div>
<img :src="user_info.picture_path || head_pic" alt="" style="width:24px;margin:0 10px 0 10px;vertical-align:-6px;border-radius:50%;"></div>
<div slot="suffix" class="back_solt" @click="answer_question(item.id,it.user_id)">回复</div>
</el-input>
</div>
</div>
......@@ -101,7 +101,7 @@
</div>
<div class="ans_self">
<p><img :src="user_info.picture_path" alt=""> <span>{{user_info.user_name}}</span> </p>
<p><img :src="user_info.picture_path || head_pic" alt=""> <span>{{user_info.user_name}}</span> </p>
<wang-e-bd class="editbox" v-model="editstr" :menu="menu" :full="false"></wang-e-bd>
<div class="pubilc" @click="answer_question1"><img src="../../../assets/imgs/jszc_ic_fabu.png" alt="">发表</div>
</div>
......@@ -137,6 +137,7 @@ export default {
],
editstr:'',
answer: [],
head_pic: require("@/assets/imgs/img_head.png"),
};
},
watch: {},
......@@ -380,15 +381,37 @@ export default {
margin-left: 17px;
}
.hf_content{
padding: 16px 0;
width: 750px;
overflow: auto;
padding: 16px 0 0;
color: #242c43;
margin-bottom: 16px;
}
.hf_content::-webkit-scrollbar {
width: 16px;
height: 16px;
}
.hf_content::-webkit-scrollbar-thumb {
border-radius: 8px;
box-shadow: 0 8px 0 #a5adb7 inset;
border: 4px solid rgba(0, 0, 0, 0);
/* background-color: #a5adb7; */
}
.hf_content::-webkit-scrollbar-track {
border-radius: 8px;
box-shadow: 0 8px 0 #f4f4f4 inset;
border: 4px solid rgba(0, 0, 0, 0);
/* background-color: #f4f4f4; */
}
.text .back{
float: right;
color: #58617a;
color: #0f2683;
font-size: 14px;
cursor: pointer;
margin-bottom: 16px;
margin-right: 10px;
}
.text .back img{
vertical-align: -3px;
......@@ -397,7 +420,10 @@ export default {
.back_fllow{
background-color: #fbfbfc;
width: 100%;
padding: 16px;
padding: 16px 16px 0;
}
.back_fllow:nth-last-child(1) {
margin-bottom: 16px;
}
.ans_self{
width: 856px;
......@@ -473,6 +499,34 @@ export default {
color: #515fe7;
cursor: pointer;
}
.picture_fllow {
float: left;
width: 24px;
height: 24px;
border-radius: 50%;
overflow: hidden;
}
.text_fllow {
float: right;
width: calc(100% - 30px);
border-bottom: 2px solid #f4f7fc;
overflow: hidden;
}
.hf_content_fllow {
width: 690px;
overflow: auto;
padding: 10px 0 0;
color: #242c43;
margin-bottom: 14px;
}
.back_fllow_in {
float: right;
color: #0f2683;
font-size: 14px;
cursor: pointer;
margin-bottom: 14px;
margin-right: 10px;
}
</style>
<style>
.back_input .el-input__inner{
......
src/pages/technical-support/answer-center/edit.vue
View file @ c52fddf2
......@@ -88,7 +88,7 @@ export default {
this.editstr = ''
if(res.data.success){
this.$message.success('添加成功')
this.$router.push('/technical_support/answer_center/list')
this.$router.push({name: 'answerCenterList'})
}else{
this.$message.error('添加失败')
}
......
src/pages/technical-support/answer-center/index.vue
View file @ c52fddf2
<template>
<div class="answer_container">
<router-view class="left_content" />
<router-view class="left_content" @update2="update2" />
<div
class="right_content"
v-if="$route.path !== '/technical_support/answer_center/edit'"
......@@ -42,13 +42,13 @@
</li>
</ul>
</div>
<div class="contributor_info" v-if="contributorQuizList">
<div class="contributor_info" v-if="contributorQuestionList">
<h3 class="contributor_title">
<span>本月提问贡献榜</span>
</h3>
<ul class="contributor_list">
<li
v-for="(item, index) in contributorQuizList"
v-for="(item, index) in contributorQuestionList"
:key="'quiz_' + index"
>
<span class="list_index" v-text="index + 1"></span>
......@@ -69,15 +69,19 @@ export default {
return {
userInfo: null,
contributorAnswerList: null,
contributorQuizList: null,
contributorQuestionList: null,
head_pic: require("../../../assets/imgs/img_head.png"),
};
},
created() {
// mounted() {
// this.getUserInfo();
// this.getAnwerList();
// },
methods: {
update2() {
this.getUserInfo();
this.getAnwerList();
},
methods: {
getUserInfo() {
this.$http.get("/apaas/support/qa/info").then(({ data }) => {
if (data.success) {
......@@ -87,7 +91,7 @@ export default {
},
getAnwerList() {
this.$http
.get("/apaas/support/qa/question/contribution")
.get("/apaas/support/qa/answer/contribution")
.then(({ data }) => {
if (data.success) {
this.contributorAnswerList = data.data || [];
......@@ -95,18 +99,18 @@ export default {
});
this.$http
.get("/apaas/support/qa/answer/contribution")
.get("/apaas/support/qa/question/contribution")
.then(({ data }) => {
if (data.success) {
this.contributorQuizList = data.data || [];
this.contributorQuestionList = data.data || [];
}
});
},
intoListPage(type) {
if (type === 0) {
this.$router.push("/qa/questions");
this.$router.push("/qa/my_qa?name=0");
} else {
this.$router.push("/qa/answers");
this.$router.push("/qa/my_qa?name=1");
}
},
},
......@@ -204,18 +208,18 @@ export default {
font-size: 18px;
font-weight: bold;
line-height: 40px;
color: #58617a;
color: #1d1e20;
position: relative;
padding-left: 15px;
}
.contributor_title > span:nth-child(1)::before {
content: "";
width: 4px;
height: 18px;
height: 16px;
background-color: #515fe7;
border-radius: 2px;
position: absolute;
top: 10px;
top: 13px;
left: 0;
}
.contributor_list > li {
......
src/pages/technical-support/answer-center/list.vue
View file @ c52fddf2
......@@ -55,7 +55,7 @@
<p class="answer_content" v-text="getContentText(item.content)"></p>
<p class="answer_info">
<span>
<img class="user_img" :src="item.picture_path" />
<img class="user_img" :src="item.picture_path || head_pic" />
<span class="user_name" v-text="item.user_name"></span>
<span class="user_text">发布于</span>
<span class="user_time" v-text="getTimeText(item.created)"></span>
......@@ -99,6 +99,7 @@ export default {
sortType: 0, // 0：最新问题 1：最热问题
searchText: "",
inputTimer: null,
head_pic: require("@/assets/imgs/img_head.png"),
};
},
created() {
......@@ -106,6 +107,7 @@ export default {
},
methods: {
getAnwerList() {
this.$emit("update2");
this.$http
.get("/apaas/support/qa/question/list", {
params: {
......@@ -162,10 +164,10 @@ export default {
return helper.dateStringTransform(time || "");
},
getContentText(content) {
let text = content.replace(/<img[^>]+>/g, "【图片】");
text = text.replace(/<iframe(([\s\S])*?)<\/iframe>/g, "【视频】");
text = text.replace(/<pre(([\s\S])*?)<\/pre>/g, "【代码】");
let text = content.replace(/<img[^>]+>/g, "[图片]");
text = text.replace(/<iframe(([\s\S])*?)<\/iframe>/g, "[视频]");
text = text.replace(/<video(([\s\S])*?)<\/video>/g, "[视频]");
text = text.replace(/<pre(([\s\S])*?)<\/pre>/g, "[代码]");
text = text.replace(/<\/?.+?>/g, "");
return text;
......
src/pages/technical-support/doc-manage/detail.vue
View file @ c52fddf2
......@@ -6,7 +6,7 @@
技术支持
</el-breadcrumb-item>
<el-breadcrumb-item to="/technical_support/doc_manage">
开发文档
开发文档管理
</el-breadcrumb-item>
<el-breadcrumb-item> 文档编辑 </el-breadcrumb-item>
<el-breadcrumb-item> {{ title }} </el-breadcrumb-item>
......
src/pages/technical-support/doc-manage/list.vue
View file @ c52fddf2
......@@ -15,7 +15,7 @@
技术支持
</el-breadcrumb-item>
<el-breadcrumb-item to="/technical_support/doc_manage">
开发文档
开发文档管理
</el-breadcrumb-item>
<el-breadcrumb-item>
管理列表
......@@ -35,7 +35,7 @@
<span class="filter_title">文档名称：</span>
<el-input
v-model="topFilter.name"
placeholder="请输入banner关键词"
placeholder="请输入文档名称"
@keyup.enter.native="topFilterAction"
></el-input>
</div>
......@@ -83,7 +83,7 @@
<p>注：同一文档类型下可维护多个文档名称</p>
</div>
<el-form ref="addForm" :model="addForm" :rules="addFormRules">
<el-form-item label="活动区域" prop="style">
<el-form-item label="文档类型" prop="style">
<el-select
v-model="addForm.style"
placeholder="请选择文档类型"
......@@ -384,7 +384,7 @@ export default {
this.$message.error("新增失败");
});
} else {
this.$message.error("验证失败");
this.$message.error(data.errMsg || "验证失败");
}
})
.catch((error) => {
......
src/pages/technical-support/doc/index.vue
View file @ c52fddf2
......@@ -2,9 +2,9 @@
<div class="page_container">
<side-nav-bar
title="开发文档"
imgSrc="tool_ic_kaifawendang"
:nav-list="navList"
:title-path="activePath"
:title-icon="require('@/assets/imgs/tool_ic_kaifawendang.png')"
style="width: 250px;"
></side-nav-bar>
<div class="main_container">
......
src/pages/technical-support/sdk-manage/example/index.vue
View file @ c52fddf2
......@@ -82,7 +82,7 @@
</span>
<a class="clean_btn" @click.prevent="clearSelection">清空</a>
<el-button class="add_btn" type="primary" @click="addNewSdk">
新增SDK类型
新增SDK示例
</el-button>
</div>
</apass-list>
......@@ -106,7 +106,7 @@
>
<div class="detail_content" slot="content">
<div class="detail_notice">
<p>注：同一文档类型下可维护多个文档名称</p>
<p>注：同一SDK类型下可维护多个示例名称</p>
</div>
<el-form ref="detailForm" :model="detailForm" :rules="detailFormRules">
<el-form-item label="SDK类型" prop="style_id">
......@@ -381,22 +381,20 @@ export default {
return helper.dateStringTransform(time);
},
selectAction(values) {
// 页码操作需要保存所选项
if (this.saveSection) {
return;
}
let cleanPage = values.length === 0; // 是否清空当前页所有选中
let selection = [...this.selection];
if (cleanPage) {
selection = selection.filter((item) => {
return !this.listData.find((v) => {
return v.id === item.id;
});
});
} else {
selection.push(...values);
}
this.selection = selection;
},
......
src/pages/technical-support/sdk-manage/type/index.vue
View file @ c52fddf2
......@@ -417,22 +417,20 @@ export default {
return helper.dateStringTransform(time);
},
selectAction(values) {
// 页码操作需要保存所选项
if (this.saveSection) {
return;
}
let cleanPage = values.length === 0; // 是否清空当前页所有选中
let selection = [...this.selection];
if (cleanPage) {
selection = selection.filter((item) => {
return !this.listData.find((v) => {
return v.id === item.id;
});
});
} else {
selection.push(...values);
}
this.selection = selection;
},
......
src/pages/technical-support/sdk/detail.vue
View file @ c52fddf2
......@@ -140,14 +140,16 @@ export default {
font-size: 14px;
line-height: 24px;
color: #8890a7;
padding-left: 20px;
padding-left: 18px;
background-repeat: no-repeat;
background-position: left center;
margin-left: 40px;
}
.download_action > span:nth-child(2) {
background-image: url("/../assets/imgs/shop_ic_updatetime.png");
background-image: url("../../../assets/imgs/ic_banbenhao.png");
}
.download_action > span:nth-child(3) {
background-image: url("/../assets/imgs/shop_ic_updatetime.png");
background-image: url("../../../assets/imgs/ic_fabutime.png");
}
.download_action > .el-button {
margin-left: auto;
......
src/pages/technical-support/sdk/index.vue
View file @ c52fddf2
......@@ -2,13 +2,16 @@
<div class="page_container">
<side-nav-bar
title="SDK中心"
imgSrc="tool_ic_kaifawendang"
:nav-list="navList"
:title-path="activePath"
:title-icon="require('@/assets/imgs/tool_ic_kaifawendang.png')"
style="width: 250px;"
></side-nav-bar>
<div class="main_container">
<router-view :parent-path="activePath" :key="$route.params.type + $route.params.id" />
<router-view
:parent-path="activePath"
:key="$route.params.type + $route.params.id"
/>
</div>
</div>
</template>
......
src/pages/user/my-coin.vue
View file @ c52fddf2
......@@ -5,13 +5,13 @@
$t("lang.personal_center")
}}</el-breadcrumb-item>
<el-breadcrumb-item>{{
$t("lang.my_questions_and_answers")
$t("lang.my_coin")
}}</el-breadcrumb-item>
</el-breadcrumb>
<BlockRadius class="info_block user_qa">
<div class="left_user">
<div class="img_head">
<img :src="user_info.picture_path" class="img_head_in" />
<img :src="user_info.picture_path || head_pic" class="img_head_in" />
</div>
<div class="left_word">
<p class="left_name">{{ user_info.user_name }}</p>
......@@ -24,10 +24,7 @@
<div class="card_word">
<p class="card_name">账户余额</p>
<p>
{{ helper.numberFormat(user_info.account_balance)
}}<span v-if="user_info.account_balance > 10000" class="card_wan">
万
</span>
{{ user_info.account_balance }}
</p>
</div>
</div>
......@@ -45,7 +42,7 @@
</div>
</div>
</BlockRadius>
<BlockRadius class="block_down info_block">
<BlockRadius ref="tableIn" class="block_down info_block">
<div class="czjl">
<div class="czjl_p">
充值记录
......@@ -70,19 +67,20 @@
@change="getCoinList"
></el-date-picker>
</div>
<div class="apa_table">
<apass-table
class="apa_table"
ref="outtreetable"
:data="tableData"
:header="table_header"
></apass-table>
</div>
<list-pagination
:total="total_list"
:page-sizes="[50, 20, 10]"
:page-size="currentlimit"
:current-page="currentPage"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
@size-change="changePageSize"
@current-change="changeCurrentPage"
></list-pagination>
</BlockRadius>
</div>
......@@ -114,21 +112,27 @@ export default {
currentPage: 1,
currentlimit: 10,
date: [],
head_pic: require("@/assets/imgs/img_head.png"),
}),
watch: {},
methods: {
handleSizeChange(val) {
this.pagination.rowsPerPage = val;
this.refreshData();
changePageSize(val) {
this.currentlimit = val;
this.currentPage = 1;
this.getCoinList();
},
handleCurrentChange(val) {
this.pagination.page += val;
this.refreshData();
changeCurrentPage(val) {
console.log(val);
this.currentPage = val;
this.getCoinList();
},
getUserCoins() {
this.$api.user.getUserCoins().then((response) => {
if (response.data.success == 1) {
this.user_info = response.data.data;
if (!this.user_info.recharge_count) {
this.user_info.recharge_count = 0;
}
}
});
},
......@@ -151,7 +155,6 @@ export default {
this.tableData = [];
this.currentPage = 1;
}
this.total_list = response.data.total;
}
});
......@@ -382,4 +385,14 @@ export default {
.czjl .el-date-editor .el-range__icon {
margin-right: 8px;
}
.apa_table .apass_table {
height: 100%;
}
.apa_table .apass_table .el-table {
height: 100%;
}
.apa_table .apass_table .el-table .el-table__body-wrapper {
max-height: calc(100% - 49px);
overflow: auto;
}
</style>
\ No newline at end of file
src/pages/user/order/order_detail.vue
View file @ c52fddf2
......@@ -80,6 +80,7 @@
<div class="btn_group">
<el-popover
v-if="
orderDetail.order_type != 3 &&
orderDetail.is_estimated == 0 &&
orderDetail.approval_second_level == 1 &&
orderDetail.pay_status != -1
......@@ -269,12 +270,12 @@
<div v-if="orderDetail.order_type == 1">
<div>
<span class="detail_service_specification_gg">
{{ orderDetail.spec_type == 0 ? "计次收费：" : "时长收费：" }}
{{ orderDetail.spcs_type == 0 ? "计次收费：" : "时长收费：" }}
</span>
<span class="detail_service_specification_val">
{{ orderDetail.single_money }}金币/
{{
orderDetail.spec_type == 1
orderDetail.spcs_type == 1
? orderDetail.spec_count + "次"
: "月"
}}
......@@ -622,8 +623,58 @@ export default {
},
methods: {
addEvaluation() {
console.log(this.serviceRate, this.textarea);
if (this.textarea == "" || this.serviceRate == null) {
this.$message({
message: "请先完善评价内容",
type: "error",
});
} else {
if (this.orderDetail.order_type == 1) {
let query = {
service_id: this.orderDetail.service_id,
content: this.textarea,
score: this.serviceRate,
apply_id: this.orderDetail.apply_id,
};
this.$api.user.addServiceEvaluation(query).then((response) => {
if (response.data.success == 1) {
this.$message({
message: "评价订单成功",
type: "success",
});
this.visible = false;
this.getOrderDetail();
} else {
this.$message({
message: "评价订单失败",
type: "error",
});
}
});
} else if (this.orderDetail.order_type == 2) {
let query = {
app: this.orderDetail.app_id,
content: this.textarea,
score: this.serviceRate,
apply_id: this.orderDetail.apply_id,
};
this.$api.user.addServiceEvaluation(query).then((response) => {
if (response.data.success == 1) {
this.$message({
message: "评价订单成功",
type: "success",
});
this.visible = false;
this.getOrderDetail();
} else {
this.$message({
message: "评价订单失败",
type: "error",
});
}
});
}
}
},
download() {},
getOrderDetail() {
......@@ -696,7 +747,7 @@ export default {
if (this.orderDetail.order_type == 1) {
query = {
service_id: parseFloat(this.orderDetail.service_id),
spec_id: this.orderDetail.svc_spec_id,
spcs_id: this.orderDetail.spcs_id,
duration: this.orderDetail.duration,
duration_unit: this.orderDetail.duration_unit,
};
......@@ -708,7 +759,7 @@ export default {
} else if (this.orderDetail.order_type == 2) {
query = {
app_id: parseFloat(this.orderDetail.app_id),
spec_id: this.orderDetail.spec_app++,
spcs_id: this.orderDetail.spcs_id,
duration: this.orderDetail.duration,
duration_unit: this.orderDetail.duration_unit,
};
......
src/pages/user/questions-answers/community.vue
View file @ c52fddf2
......@@ -51,7 +51,7 @@
>
<div class="dia_reason">
<el-form ref="form1" :model="reason_form" :rules="reason_rules">
<el-form-item class="dia_item">
<el-form-item class="dia_item" prop="reason">
<p>删除理由：</p>
<el-input
type="textarea"
......@@ -134,9 +134,13 @@ export default {
reason: [
{
required: true,
message: "请填写删除理由",
trigger: "blur",
},
{
max: 20,
min: 5,
message: "请填写活动形式",
message: "请输入5至20个字符",
trigger: "blur",
},
],
......@@ -222,12 +226,19 @@ export default {
this.diaDel = true;
},
getQList() {
console.log(this.search_date);
let query = {
search: this.search_ask,
style: 3,
create_user: this.search_user,
start: this.search_date.length != 0 ? this.search_date[0] : "",
end: this.search_date.length != 0 ? this.search_date[1] : "",
start:
this.search_date && this.search_date.length != 0
? this.search_date[0]
: "",
end:
this.search_date && this.search_date.length != 0
? this.search_date[1]
: "",
limit: this.currentlimit,
page: this.currentPage,
order: "created",
......@@ -240,12 +251,19 @@ export default {
});
},
getAList() {
console.log(this.search_date);
let query = {
search: this.search_ask,
style: 3,
create_user: this.search_user,
start: this.search_date.length != 0 ? this.search_date[0] : "",
end: this.search_date.length != 0 ? this.search_date[1] : "",
start:
this.search_date && this.search_date.length != 0
? this.search_date[0]
: "",
end:
this.search_date && this.search_date.length != 0
? this.search_date[1]
: "",
limit: this.currentlimit,
page: this.currentPage,
};
......@@ -292,6 +310,7 @@ export default {
this.table_header = [];
if (val == "/qa/questions") {
this.form_data[1].label = "发布人搜索";
this.form_data[1].placeholder = "请输入发布人名称";
this.form_data[2].label = "发布时间";
this.table_header = [
{
......@@ -355,6 +374,7 @@ export default {
this.getQList();
} else if (val == "/qa/answers") {
this.form_data[1].label = "回复人搜索";
this.form_data[1].placeholder = "请输入回复人名称";
this.form_data[2].label = "回复时间";
this.table_header = [
{
......
src/pages/user/questions-answers/my-qa.vue
View file @ c52fddf2
......@@ -11,7 +11,7 @@
<BlockRadius class="info_block user_qa">
<div class="left_user">
<div class="img_head">
<img :src="user_info.picture_path" class="img_head_in" />
<img :src="user_info.picture_path || head_pic" class="img_head_in" />
</div>
<div class="left_word">
<p class="left_name">{{ user_info.user_name }}</p>
......@@ -67,28 +67,36 @@
<div v-for="(item, index) in data_list" :key="index" class="qa_cell">
<div class="qa_cell_in">
<div :class="activeName == 2 ? 'qa_is_del' : 'qa_init'">
<p v-if="activeName == 1" class="cell_answer">
{{ item.answer }}
</p>
<p
v-if="item.answer != ''"
class="cell_answer"
v-text="getContentText(item.answer)"
></p>
<p
@click="gotodeta(item.question_id)"
:class="activeName == 0 ? 'cell_title' : 'cell_ans_title'"
>
{{ item.title }}
</p>
<p class="cell_cont">
{{
item.answer
? item.question_content.replace(/<[^<>]+>/g, "")
: item.content.replace(/<[^<>]+>/g, "")
}}
</p>
<p
class="cell_cont"
v-if="item.question_content && item.question_content != ''"
v-text="getContentText(item.question_content)"
></p>
<p
class="cell_cont"
v-else-if="item.content && item.content != ''"
v-text="getContentText(item.content)"
></p>
<p class="cell_cont" v-else></p>
<p v-if="activeName == 2" class="cell_other">
<span>
删除时间：{{ helper.dateStringTransform(item.deleted_time) }}
</span>
<span>删除人：{{ item.delete_user }}</span>
<span>删除理由：{{ item.reason }}</span>
<span v-if="item.delete_reason"
>删除理由：{{ item.delete_reason }}</span
>
</p>
<p v-else class="cell_other">
<span>{{ helper.dateStringTransform(item.created) }}</span>
......@@ -207,6 +215,7 @@ export default {
},
diaDelItem: false,
delItem: {},
head_pic: require("@/assets/imgs/img_head.png"),
}),
watch: {
activeName: {
......@@ -324,27 +333,44 @@ export default {
},
delQ() {
let items = [{ id: this.delItem.id }];
console.log(items);
this.diaDelItem = false;
this.$api.user.delQuestions(items).then((response) => {
if (response.data.success == 1) {
this.$message({
message: "删除成功",
type: "success",
});
this.refreshData();
}
});
},
delA() {
let items = [{ id: this.delItem.id }];
this.diaDelItem = false;
this.$api.user.delAnswers(items).then((response) => {
if (response.data.success == 1) {
this.$message({
message: "删除成功",
type: "success",
});
this.refreshData();
}
});
},
getContentText(content) {
let text = content.replace(/<img[^>]+>/g, "[图片]");
text = text.replace(/<iframe(([\s\S])*?)<\/iframe>/g, "[视频]");
text = text.replace(/<video(([\s\S])*?)<\/video>/g, "[视频]");
text = text.replace(/<pre(([\s\S])*?)<\/pre>/g, "[代码]");
text = text.replace(/<\/?.+?>/g, "");
return text;
},
},
created() {
if (this.$route.query.name !== undefined) {
this.activeName = this.$route.query.name;
}
},
mounted() {
this.getUserQA();
......
src/pages/workbench/component-center/process-management/designer/index.vue
View file @ c52fddf2
......@@ -176,7 +176,7 @@ export default {
{
label: "流程编号",
prop: "workflows_code",
width: 180,
width: 130,
},
{
label: "流程名称",
......@@ -188,7 +188,7 @@ export default {
label: "服务领域",
prop: "sector_name",
align: "center",
width: 240,
width: 200,
},
{
label: "创建时间",
......@@ -206,7 +206,7 @@ export default {
return ["未部署", "已部署", "已发布"][item.state || 0];
},
align: "center",
width: 180,
width: 80,
},
{
label: "工作区域",
......
src/pages/workbench/component-center/process-management/process-design/edit.vue
View file @ c52fddf2
......@@ -201,7 +201,7 @@ export default {
end_id = item.id;
}
if (item.meta.type == 4) {
judge_nodes.push(item.meta.id);
judge_nodes.push(item.id);
}
if (
datas.linkList.findIndex((el) => {
......
src/pages/workbench/component-center/process-management/process-design/index.vue
View file @ c52fddf2
......@@ -169,7 +169,7 @@ export default {
end_id = item.id;
}
if (item.meta.type == 4) {
judge_nodes.push(item.meta.id)
judge_nodes.push(item.id)
}
if (
datas.linkList.findIndex((el) => {
......
src/pages/workbench/fwgl/apply_service_detail.vue
View file @ c52fddf2
......@@ -16,20 +16,33 @@
:style="
now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
"
>{{ item }}</div>
>
{{ item }}
</div>
</div>
<div class="type_box_select">
<info-list :list_arr="process_in_up_arr" v-if="now_service == 1&&process_in_up">
<info-list
:list_arr="process_in_up_arr"
v-if="now_service == 1 && process_in_up"
>
<div slot="service_port" class="service_port">
<el-select v-model="port_select" placeholder="" @change="change_port">
<el-select
v-model="port_select"
placeholder=""
@change="change_port"
>
<el-option
v-for="item in port_options"
:key="item.value"
:label="item.label"
:value="item.value">
:value="item.value"
>
</el-option>
</el-select>
<div class="port_bg_box" style="padding:20px;background-color:#f8f9fd;margin-top:10px;">
<div
class="port_bg_box"
style="padding:20px;background-color:#f8f9fd;margin-top:10px;"
>
<info-list :list_arr="port_solt_arr">
<table-um
:headers="req_solt_header_arr"
......@@ -37,33 +50,52 @@
:stripe="true"
slot="request_table"
></table-um>
<v-apaas-code :datas="req_solt_code_arr" slot="request_code" :readOnly="true"></v-apaas-code>
<v-apaas-code
:datas="req_solt_code_arr"
slot="request_code"
:readOnly="true"
></v-apaas-code>
<table-um
:headers="res_solt_header_arr"
:datas="res_solt_data"
:stripe="true"
slot="response_table"
></table-um>
<v-apaas-code :datas="res_solt_code_arr" slot="response_code" :readOnly="true"></v-apaas-code>
<v-apaas-code
:datas="res_solt_code_arr"
slot="response_code"
:readOnly="true"
></v-apaas-code>
</info-list>
</div>
</div>
</info-list>
<info-list :list_arr="perception_solt_arr" v-if="now_service == 1&&perception_in">
<info-list
:list_arr="perception_solt_arr"
v-if="now_service == 1 && perception_in"
>
<table-um
:headers="perception_req_solt_header_arr"
:datas="req_solt_data"
:stripe="true"
slot="request_table"
></table-um>
<v-apaas-code :datas="req_solt_code_arr" slot="request_code" :readOnly="true"></v-apaas-code>
<v-apaas-code
:datas="req_solt_code_arr"
slot="request_code"
:readOnly="true"
></v-apaas-code>
<table-um
:headers="perception_res_solt_header_arr"
:datas="res_solt_data"
:stripe="true"
slot="response_table"
></table-um>
<v-apaas-code :datas="res_solt_code_arr" slot="response_code" :readOnly="true"></v-apaas-code>
<v-apaas-code
:datas="res_solt_code_arr"
slot="response_code"
:readOnly="true"
></v-apaas-code>
</info-list>
<info-list
v-else
......@@ -87,11 +119,16 @@
:datas="res_table_arr"
slot="apply_table"
></table-um>
<v-apaas-code :datas="res_code_arr" slot="res_code" :readOnly="true"></v-apaas-code>
<process-card :data="use_approval_arr" slot="approval"></process-card>
<v-apaas-code
:datas="res_code_arr"
slot="res_code"
:readOnly="true"
></v-apaas-code>
<process-card
:data="use_approval_arr"
slot="approval"
></process-card>
</info-list>
</div>
</div>
</div>
......@@ -116,18 +153,17 @@ export default {
data() {
return {
use_approval_arr: [],
process_in_up:false,//是否是服务注册产生的
perception_in:false,//是否是感知服务
service_apply_type:1,//服务申请的方式，1：计次收费2：时长收费
port_select:'',
req_solt_code_arr:'',
res_solt_code_arr:'',
perception_req_solt_code_arr:'',
perception_res_solt_code_arr:'',
req_solt_data:[],
res_solt_data:[],
perception_req_solt_data:[],
perception_res_solt_data:[],
process_in_up: false, //是否是服务注册产生的
perception_in: false, //是否是感知服务
port_select: "",
req_solt_code_arr: "",
res_solt_code_arr: "",
perception_req_solt_code_arr: "",
perception_res_solt_code_arr: "",
req_solt_data: [],
res_solt_data: [],
perception_req_solt_data: [],
perception_res_solt_data: [],
req_solt_header_arr: [
{
prop: "name",
......@@ -262,8 +298,8 @@ export default {
width: 240,
},
],
port_options:[],
port_solt_arr:[
port_options: [],
port_solt_arr: [
{
title: "服务地址：",
info: "",
......@@ -301,7 +337,7 @@ export default {
solt_name: "response_code",
},
],
perception_solt_arr:[
perception_solt_arr: [
{
title: "接口文档：",
info: "",
......@@ -339,9 +375,9 @@ export default {
info: "",
type: "solt",
solt_name: "response_code",
}
},
],
process_in_up_arr:[
process_in_up_arr: [
{
title: "接口文档：",
info: "",
......@@ -353,7 +389,7 @@ export default {
info: "",
type: "solt",
solt_name: "service_port",
}
},
],
approval_arr: [
{
......@@ -477,7 +513,7 @@ export default {
service_header_arr: {
id: "",
isMap: false,
isProcess:false,
isProcess: false,
name: "",
first: [
{
......@@ -493,6 +529,10 @@ export default {
name: "服务到期时间",
text: "",
},
{
name: "可用调用次数",
text: "",
},
],
second: [
{
......@@ -652,7 +692,7 @@ export default {
},
], // 响应参数-header
res_table_arr: [], // 响应参数
res_code_arr: ""
res_code_arr: "",
};
},
watch: {},
......@@ -662,16 +702,16 @@ export default {
},
mounted() {},
methods: {
change_port(val){
this.port_options.forEach(e => {
if(e.value == val){
this.$set(this.port_solt_arr[0],'info',e.value)
this.$set(this.port_solt_arr[1],'info',e.req_type)
this.$set(this.port_solt_arr[2],'info',e.encode_method)
this.req_solt_data = e.req_fields
this.res_solt_data = e.res_fields
this.req_solt_code_arr = e.req_fields_example
this.res_solt_code_arr = e.res_fields_example
change_port(val) {
this.port_options.forEach((e) => {
if (e.value == val) {
this.$set(this.port_solt_arr[0], "info", e.value);
this.$set(this.port_solt_arr[1], "info", e.req_type);
this.$set(this.port_solt_arr[2], "info", e.encode_method);
this.req_solt_data = e.req_fields;
this.res_solt_data = e.res_fields;
this.req_solt_code_arr = e.req_fields_example;
this.res_solt_code_arr = e.res_fields_example;
}
});
},
......@@ -727,77 +767,106 @@ export default {
: "#e15260"
);
this.$set(this.service_header_arr["second"][0], "text", data.req_url);
this.$set(
this.service_header_arr["second"][0],
"text",
data.service_apply_info.urls[0].req_url
);
this.$set(this.service_header_arr, "url", data.cover);
//判断是否是服务注册出来的流程服务
if(data.data_service_type2 == 24&&data.workflows_id==0){
this.process_in_up = true
this.$set(this.process_in_up_arr[0],'info',data.doc_file.split('/')[data.doc_file.split('/').length-1])
this.$set(this.process_in_up_arr[0],'url',data.doc_file)
var temp_port_arr = []
data.urls.forEach(e => {
if (data.data_service_type2 == 24 && data.workflows_id == 0) {
this.process_in_up = true;
this.$set(
this.process_in_up_arr[0],
"info",
data.doc_file.split("/")[data.doc_file.split("/").length - 1]
);
this.$set(this.process_in_up_arr[0], "url", data.doc_file);
var temp_port_arr = [];
data.urls.forEach((e) => {
temp_port_arr.push({
label:e.req_name,
value:e.req_url,
able:e.state==-1?false:true,
...e
})
label: e.req_name,
value: e.req_url,
able: e.state == -1 ? false : true,
...e,
});
this.port_options = temp_port_arr
if(this.port_options[0]){
this.port_select = this.port_options[0].value
this.$set(this.port_solt_arr[0],'info',this.port_options[0].value)
this.$set(this.port_solt_arr[1],'info',this.port_options[0].req_type)
this.$set(this.port_solt_arr[2],'info',this.port_options[0].encode_method)
this.req_solt_data = this.port_options[0].req_fields
this.res_solt_data = this.port_options[0].res_fields
this.req_solt_code_arr = this.port_options[0].req_fields_example
this.res_solt_code_arr = this.port_options[0].res_fields_example
});
this.port_options = temp_port_arr;
if (this.port_options[0]) {
this.port_select = this.port_options[0].value;
this.$set(
this.port_solt_arr[0],
"info",
this.port_options[0].value
);
this.$set(
this.port_solt_arr[1],
"info",
this.port_options[0].req_type
);
this.$set(
this.port_solt_arr[2],
"info",
this.port_options[0].encode_method
);
this.req_solt_data = this.port_options[0].req_fields;
this.res_solt_data = this.port_options[0].res_fields;
this.req_solt_code_arr = this.port_options[0].req_fields_example;
this.res_solt_code_arr = this.port_options[0].res_fields_example;
}
}else{
this.process_in_up = false
} else {
this.process_in_up = false;
}
if(data.service_data_type_1 == 10){
this.perception_in = true
this.$set(this.perception_solt_arr[0],'info',data.doc_file.split('/')[data.doc_file.split('/').length-1])
this.$set(this.perception_solt_arr[1],'info',data.urls[0].req_url)
this.$set(this.perception_solt_arr[2],'info',data.urls[0].encode_method)
this.req_solt_data = data.urls[0].req_fields
this.res_solt_data = data.urls[0].res_fields
this.req_solt_code_arr = data.urls[0].req_fields_example
this.res_solt_code_arr = data.urls[0].res_fields_example
}else{
this.perception_in = false
if (data.service_data_type_1 == 10) {
this.perception_in = true;
this.$set(
this.perception_solt_arr[0],
"info",
data.doc_file.split("/")[data.doc_file.split("/").length - 1]
);
this.$set(
this.perception_solt_arr[1],
"info",
data.urls[0].req_url
);
this.$set(
this.perception_solt_arr[2],
"info",
data.urls[0].encode_method
);
this.req_solt_data = data.urls[0].req_fields;
this.res_solt_data = data.urls[0].res_fields;
this.req_solt_code_arr = data.urls[0].req_fields_example;
this.res_solt_code_arr = data.urls[0].res_fields_example;
} else {
this.perception_in = false;
}
if(this.service_apply_type==1){
if (data.service_apply_info.spcs_type == 1) {
this.$set(this.service_header_arr["first"][2], "text", "不限时长");
this.$set(
this.service_header_arr["first"][2],
this.service_header_arr["first"][3],
"text",
data.service_apply_info.service_end_time == "0001-01-01T00:00:00Z"
? "-"
: data.service_apply_info.service_end_time
.replace("T", " ")
.split("+")[0]
data.service_apply_info.spcs_count
);
this.$set(this.service_header_arr["first"][2],'name','可调用次数')
}else{
} else {
this.$set(
this.service_header_arr["first"][2],
"text",
data.service_apply_info.service_end_time == "0001-01-01T00:00:00Z"
? "-"
: data.service_apply_info.service_end_time
.replace("T", " ")
data.service_apply_info.service_end_time
.replace(/T|Z/g, " ")
.split("+")[0]
);
this.$set(this.service_header_arr["first"][3], "text", "不限次数");
}
if(this.process_in_up){
var temp_sj = this.service_header_arr.first.pop()
this.service_header_arr.second = []
this.service_header_arr.second.push(temp_sj)
if (this.process_in_up) {
var temp_sj = this.service_header_arr.first.pop();
this.service_header_arr.second = [];
this.service_header_arr.second.push(temp_sj);
}
this.$set(this.list_arr[0], "info", data.descript);
this.$set(this.list_arr[1], "info", data.data_service_type2_name);
......@@ -813,7 +882,7 @@ export default {
);
this.$set(this.list_arr[4], "info", data.organization_name);
this.$set(this.list_arr[5], "info", data.openness_name);
this.$set(this.list_arr[6], "info", data.encode_method);
this.$set(this.list_arr[6], "info", "自动生成");
this.$set(
this.list_arr[7],
"info",
......@@ -857,16 +926,17 @@ export default {
"url",
data.service_apply_info.apply_file
);
this.$set(
this.apply_arr[6],
"info",
"访问次数：" +
data.service_apply_info.request_spcs.pv +
"/日，" +
"访问量：" +
data.service_apply_info.request_spcs.count +
"/日"
);
let spcs = "";
if (data.service_apply_info.spcs_type === 1) {
spcs = `${data.service_apply_info.single_money}金币/${data.service_apply_info.spcs_count}次`;
} else {
spcs = `${data.service_apply_info.single_money}金币/${
data.service_apply_info.duration_unit == 1 ? "月" : "年"
}`;
}
this.$set(this.apply_arr[6], "info", spcs);
this.$set(
this.apply_arr[7],
"info",
......@@ -876,7 +946,9 @@ export default {
this.$set(
this.apply_arr[8],
"info",
data.service_apply_info.apply_time.replace("T", " ").split("+")[0]
data.service_apply_info.apply_time
.replace(/T|Z/g, " ")
.split("+")[0]
);
this.$set(
this.apply_arr[9],
......@@ -938,7 +1010,7 @@ export default {
}
this.res_data = JSON.parse(data.res_fields);
})
.catch(function (response) {});
.catch(function(response) {});
},
},
};
......
src/pages/workbench/fwgl/serviceDetail.vue
View file @ c52fddf2
......@@ -316,6 +316,7 @@ import ListPagination from "@/components/comments-pagination";
import dialogAction from "@/components/dialog-action";
import { getRole, formatDateTime_date } from "@/utils/common";
import { mapGetters, mapState } from "vuex";
import helper from "@/services/helper";
export default {
components: {
infoList,
......@@ -342,7 +343,7 @@ export default {
translistTotal: 0,
transcurrentPage: 1,
transpageSize: 10,
pageSizes: [10, 50, 100],
pageSizes: [10, 20, 50],
responseParamUrl: "",
codeExampleUrl: "",
port_select_server:'',
......@@ -414,13 +415,13 @@ export default {
align: "center",
},
{
prop: "total_money",
prop: "total_moneys",
label: "订单总价",
width: "150px",
align: "center",
},
{
prop: "trade_time",
prop: "trade_times",
label: "交易时间",
width: "160px",
align: "center",
......@@ -813,26 +814,9 @@ export default {
label: "调用时间",
minWidth: "20%",
align: "center",
},
{
prop: "count",
label: "总调用次数",
minWidth: "20%",
align: "center",
}
],
service_process_arr:[
{
dydw:'比格大数据',
dyyw:'apaas',
ywxt:'https:www.apaas.com',
jkmc:'地图服务',
jkdz:'https://www.apaas.com/map',
state:'成功',
time:'2020-10-20 10:05:11',
count:125
}
],
service_process_arr:[],
service_size_arr: [
{
prop: "index",
......@@ -841,7 +825,7 @@ export default {
align: "center",
},
{
prop: "spcs_type",
prop: "spcs_type_name",
label: "规格类型",
minWidth: "33.33%",
align: "center",
......@@ -1163,7 +1147,7 @@ export default {
},
iconChange (val) {
// el-select实际上是两层div包裹的input
this.port_select = val;
this.port_select_server = val;
// 获取当前el-select标签第一层div
const dom = this.$refs['select_icon'].$el;
if(dom.children[0].children[0].tagName == 'SPAN'){
......@@ -1259,8 +1243,8 @@ export default {
console.log(res);
// listTotal: 0,
if(res.data.success){
this.listTotal = res.data.total
var temp = res.data.data||[]
this.translistTotal = res.data.data.total
var temp = res.data.data.list||[]
temp.forEach(e => {
if(e.spcs_type==1){
e.duration_name = '不限时长'
......@@ -1269,6 +1253,8 @@ export default {
e.duration_name = e.duration+'月'
e.gg = `${e.single_money} 元/月`
}
e.trade_times = helper.dateStringTransform(e.trade_time);
e.total_moneys = e.total_money + "金币";
});
this.trans_log_data = temp
}
......@@ -1310,7 +1296,7 @@ export default {
this.$set(
this.service_header_arr["first"][1],
"text",
data.apply_num
data.apply_count
);
this.$set(
this.service_header_arr["first"][2],
......@@ -1325,7 +1311,7 @@ export default {
this.$set(
this.service_header_arr["second"][0],
"text",
data.req_url
data.urls[0].req_url
);
this.$set(this.service_header_arr, "url", data.cover);
if (this.now_user == 1) {
......@@ -1383,8 +1369,8 @@ export default {
this.perception_in = false
}
console.log(this.process_in_up,this.perception_in);
if(this.process_in_up){
this.get_trans_data()
if(this.process_in_up){
var temp_sj = this.service_header_arr.first.pop()
this.service_header_arr.second = []
this.service_header_arr.second.push(temp_sj)
......@@ -1393,7 +1379,7 @@ export default {
this.$set(this.list_arr[1], "info", data.sectors_name);
this.$set(this.list_arr[2], "info", data.organization_name);
this.$set(this.list_arr[3], "info", data.openness_name);
this.$set(this.list_arr[4], "info", data.encode_method);
this.$set(this.list_arr[4], "info", "自动生成");
this.$set(
this.list_arr[5],
"info",
......@@ -1404,29 +1390,29 @@ export default {
this.$set(
this.servicead_arr[0],
"info",
this.request_arr[data.req_type - 1]
this.request_arr[data.urls[0].req_type - 1]
); // 请求方式
this.req_data = JSON.parse(
data.req_fields || data.req_query || "[]"
data.urls[0].req_fields || data.urls[0].req_query || "[]"
); // 请求参数
if (this.req_data && this.req_data.length === 0) {
this.$set(this.servicead_arr[1], "type", "");
this.$set(this.servicead_arr[1], "info", "无请求参数");
}
this.req_code_arr =
data.req_fields_example || data.req_query_example || ""; // 请求示例
data.urls[0].req_fields_example || data.urls[0].req_query_example || ""; // 请求示例
if (!this.req_code_arr) {
this.$set(this.servicead_arr[2], "type", "");
this.$set(this.servicead_arr[2], "info", "无请求示例");
}
this.$set(this.servicead_arr[3], "info", data.encode_method); // 编码格式
this.res_data = JSON.parse(data.res_fields || "[]"); // 响应参数
this.$set(this.servicead_arr[3], "info", data.urls[0].encode_method); // 编码格式
this.res_data = JSON.parse(data.urls[0].res_fields || "[]"); // 响应参数
if (this.res_data && this.res_data.length === 0) {
this.$set(this.servicead_arr[4], "type", "");
this.$set(this.servicead_arr[4], "info", "无响应参数");
}
console.log(data.res_fields_example)
this.res_code_arr = data.res_fields_example || ""; // 响应示例
console.log(data.urls[0].res_fields_example)
this.res_code_arr = data.urls[0].res_fields_example || ""; // 响应示例
console.log(this.res_code_arr)
if (!this.res_code_arr) {
this.$set(this.servicead_arr[5], "type", "");
......@@ -1437,15 +1423,17 @@ export default {
temp.forEach((e,idx) => {
e.index = idx+1
if(e.spcs_type==1){
e.gg = e.money+'/'+e.spcs_count
e.gg = e.money+'金币/'+e.spcs_count+'次'
e.time = '不限时长'
e.pv = e.spcs_count
e.d_price = e.money
}else if(e.spcs_type==1){
e.gg = e.money+'/月'
e.d_price = e.money/e.spcs_count+'金币/次'
e.spcs_type_name = '计次收费'
}else if(e.spcs_type==2){
e.gg = e.money+'金币/月'
e.time = '1个月'
e.pv = '不限次数'
e.d_price = '-'
e.spcs_type_name = '计时收费'
}
});
this.service_size_data =temp;
......@@ -1482,6 +1470,7 @@ export default {
e.descript = '每月不限调用次数'
}
});
this.size_arr_down = val;
},
......@@ -1497,16 +1486,30 @@ export default {
var temp = data.data||[]
temp.forEach((e,idx) => {
e.index = idx+1
// if(e.spcs_type==1){
// e.gg = e.money+'/'+e.spcs_count
// e.time = '不限时长'
// e.pv = e.spcs_count
// e.d_price = ''
// }else if(e.spcs_type==1){
// e.gg = e.money+'/月'
// e.time = '1个月'
// e.pv = '不限次数'
// e.d_price = '-'
// }
if(e.spcs_type==1){
e.gg = e.money+'/'+e.spcs_count
e.gg = e.money+'金币/'+e.spcs_count+'次'
e.time = '不限时长'
e.pv = e.spcs_count
e.d_price = ''
}else if(e.spcs_type==1){
e.gg = e.money+'/月'
e.d_price = e.money/e.spcs_count+'金币/次'
e.spcs_type_name = '计次收费'
}else if(e.spcs_type==2){
e.gg = e.money+'金币/月'
e.time = '1个月'
e.pv = '不限次数'
e.d_price = '-'
e.spcs_type_name = '计时收费'
}
});
this.service_size_data = temp;
......
src/pages/workbench/fwzc_fwcs.vue
View file @ c52fddf2
......@@ -135,6 +135,19 @@
:value="item.value"
></el-option>
</el-select>
<el-select
v-else-if="activeBtn == 2 || activeBtn == 3"
v-model="select"
slot="prepend"
placeholder="请选择"
>
<el-option
v-for="item in optionType2"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<el-select
v-else
v-model="select"
......@@ -417,14 +430,16 @@
class="reset"
v-if="activeBtn == 0 && resSuccess"
@click="resetSjfw"
>重置</el-button
>
重置
</el-button>
<el-button
:disabled="!resSuccess"
:class="resSuccess ? 'next' : ''"
@click="nextJcxx"
>下一步</el-button
>
下一步
</el-button>
</div>
</block-radius>
<div v-if="activeBtn == 4 && zhyyVal == 24">
......@@ -636,8 +651,9 @@
"
class="next_one"
@click="nextOne"
>下一步</el-button
>
下一步
</el-button>
</div>
</div>
</block-radius>
......@@ -719,20 +735,20 @@
</el-radio-group>
</el-form-item>
<el-form-item v-if="is_map != 0" class="btn_footer">
<el-button class="previous" @click="goBack('map')">{{
is_map == 1 ? "返回智能制图" : "返回Web应用程序"
}}</el-button>
<el-button class="registe" @click="registeMap"
>服务发布</el-button
>
<el-button class="previous" @click="goBack('map')">
{{ is_map == 1 ? "返回智能制图" : "返回Web应用程序" }}
</el-button>
<el-button class="registe" @click="registeMap">
服务发布
</el-button>
</el-form-item>
<el-form-item v-else-if="process_id != ''" class="btn_footer">
<el-button class="previous" @click="goBack('process')"
>返回流程管理</el-button
>
<el-button class="registe" @click="registeProcess"
>服务发布</el-button
>
<el-button class="previous" @click="goBack('process')">
返回流程管理
</el-button>
<el-button class="registe" @click="registeProcess">
服务发布
</el-button>
</el-form-item>
<el-form-item v-else class="btn_footer">
<el-button class="previous" @click="previous">上一步</el-button>
......@@ -814,6 +830,10 @@ export default {
{ label: "DELETE", value: "DELETE" },
],
optionType1: [{ label: "GET", value: "GET" }],
optionType2: [
{ label: "GET", value: "GET" },
{ label: "POST", value: "POST" },
],
activeName: "0",
activeZh: "0",
sjfwQqcs: [
......@@ -1001,6 +1021,7 @@ export default {
gz_fhsjgs: "JSON",
code_1_index: 0,
code_2_index: 0,
user_id: "",
};
},
computed: {},
......@@ -1057,6 +1078,7 @@ export default {
this.jkwds = [];
},
getUrl(enUrl) {
enUrl = enUrl.replace(/\s*/g, "");
let url = decodeURI(enUrl);
let arr = [];
if (url.indexOf("?") != -1) {
......@@ -1225,6 +1247,15 @@ export default {
) {
if (this.jkwds.length == 0) {
this.$message.error("请上传接口文档");
} else {
if (
this.activeBtn == 2 ||
(this.activeBtn == 4 && this.zhyyVal == 22)
) {
this.request_fields = [];
this.response_fields = [];
this.jcxxtx = true;
this.getOrganization();
} else {
let requestData = this.$refs.fwcs_sjfw_qqcs.getTableData();
let responseData = this.$refs.fwcs_sjfw_fhcs.getTableData();
......@@ -1243,6 +1274,7 @@ export default {
this.$message.error("请完善返回参数信息中的字段名称");
}
}
}
} else {
let requestData = this.$refs.fwcs_sjfw_qqcs.getTableData();
let responseData = this.$refs.fwcs_sjfw_fhcs.getTableData();
......@@ -1314,6 +1346,7 @@ export default {
this.jkwds[0] = val[0].url;
},
getOrganization() {
if (this.$store.state.userInfo && this.$store.state.userInfo.user_id) {
let query = {
id: this.$store.state.userInfo.user_id,
};
......@@ -1325,6 +1358,27 @@ export default {
console.log(response.data.errMsg);
}
});
} else {
let self = this;
self.$api.user.getNowUser().then(({ data }) => {
if (data.success == 1) {
self.$store.commit("userInfofun", data.data);
let query = {
id: self.$store.state.userInfo.user_id,
};
self.$api.user.getUserDetail(query).then((request) => {
if (request.data.success == 1) {
self.form.origin = request.data.data.department;
self.oid = request.data.data.department_id;
} else {
console.log(response.data.errMsg);
}
});
} else {
console.log(data.errMsg);
}
});
}
},
registeMap() {
this.$refs.form.validate((valid) => {
......@@ -1342,13 +1396,22 @@ export default {
data_service_type1: 6,
data_service_type2: this.skfwQqt,
encode_method: this.form.code,
portal_id: this.portal_id,
doc_file: "",
urls: [
{
name: "",
response_type: "JSON",
req_auth_mthod: 0,
req_auth_token: "",
method: "GET",
url: this.serviceUrl,
request_fields: [],
request_query_fields: [],
response_fields: [],
content_type: "json",
portal_id: this.portal_id,
content_type: "JSON",
},
],
};
} else if (this.is_map == 4) {
query = {
......@@ -1361,13 +1424,21 @@ export default {
data_service_type1: 21,
data_service_type2: 34,
encode_method: this.form.code,
portal_id: this.portal_id,
urls: [
{
name: "",
response_type: "JSON",
req_auth_mthod: 0,
req_auth_token: "",
method: "GET",
url: this.serviceUrl,
request_fields: [],
request_query_fields: [],
response_fields: [],
content_type: "json",
portal_id: this.portal_id,
content_type: "JSON",
},
],
};
}
this.$api.workbench.serviceAdd(query).then((response) => {
......@@ -1428,7 +1499,10 @@ export default {
registePt() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.activeBtn == 3 && this.jkwds.length == 0) {
if (
(this.activeBtn == 2 && this.jkwds.length == 0) ||
(this.activeBtn == 3 && this.jkwds.length == 0)
) {
this.$message.error("请上传接口文档");
} else {
if (this.cover.length != 0) {
......@@ -1436,7 +1510,11 @@ export default {
if (this.activeBtn == 1 && !this.is_portal) {
this.addPortalItem();
} else {
if (this.activeBtn == 0 || this.activeBtn == 3) {
if (
this.activeBtn == 0 ||
this.activeBtn == 2 ||
this.activeBtn == 3
) {
contentType = this.sjfwQqt;
} else if (this.activeBtn == 4) {
if (this.activeZh == "1") {
......@@ -1839,6 +1917,7 @@ export default {
});
},
getUrlOne(enUrl, indexOne) {
enUrl = enUrl.replace(/\s*/g, "");
let url = decodeURI(enUrl);
let arr = [];
if (url.indexOf("?") != -1) {
......
src/pages/workbench/workPlace.vue
View file @ c52fddf2
......@@ -1004,14 +1004,6 @@ export default {
color: "#58617a",
url:'/search_engine',
},
{
text: "数据采集",
pic: require("@/assets/imgs/home_tool_ic_sscj.png"),
bg: "#fff2e2",
color: "#ea7d19",
url:'https://apaas3.wodcloud.com/sjcj/ui/',
target: 1,
},
],
service_arr: [
["服务列表", "申请服务", "云资源"],
......@@ -1038,18 +1030,18 @@ export default {
role: 2,
url: "/authority/organization"
},
{
pic: require("@/assets/imgs/home_tool_ic_shuju.png"),
text: "数据采集管理",
role: 2,
url: "https://apaas3.wodcloud.com/sjcj/ui/#/data_acquisition/file"
},
{
pic: require("@/assets/imgs/home_tool_ic_message.png"),
text: "消息与推送管理",
role: 2,
url: "/message/recommended"
},
{
pic: require("@/assets/imgs/home_tool_ic_rongqiyun.png"),
text: "容器微服务管理",
role: 2,
url: "https://cloud.gzdata.ydeci.gz.cegn.cn/awecloud/login/#/"
},
]
};
},
......
src/pages/workbench/yygl/app_detail.vue
View file @ c52fddf2
......@@ -487,20 +487,7 @@ export default {
minWidth: "33.33%",
align: "left",
type:'input'
},
{
label: "操作",
type: "Button",
align: "center",
width: 140,
btnList: [
{
type: "action-delete",
label: "删除",
local: true,
},
],
},
}
],
rules: {
name: [{ required: true, message: "请输入镜像名称", trigger: "blur" },
......
src/pages/workbench/yygl/deploy_app_detail.vue
View file @ c52fddf2
......@@ -68,7 +68,7 @@
</div>
<!-- <div v-if="now_service == 1&&image_arr.length"> -->
<div v-if="now_service == 1">
<div v-show="now_service == 1">
<p class="service_title">
<span></span>应用概况
</p>
......@@ -107,51 +107,68 @@
</div>
<p class="service_title" style="margin-top:20px;">
<span></span>微服务
<el-select v-model="now_micor_service" ref="select_icon" @change="iconChange" placeholder="请选择">
<el-option v-for="item in service_list_arr" :key="item.service" :label="item.service" :value="item.index">
<span v-if="item.is_unhealth" :style="{display:'inline-block',marginRight:'8px',width:'36px',height:'18px',marginLeft:'-10px',borderRadius:'4px',backgroundColor:'#e15260',lineHeight:'18px',textAlign:'center'}">故障</span>
<span v-else :style="{display:'inline-block',marginRight:'8px',width:'36px',height:'18px',borderRadius:'4px',marginLeft:'-10px',}"></span>
{{item.service}}
</el-option>
</el-select>
</p>
<div style="overflow:hidden;height:700px;" class="limit-elscroll">
<el-scrollbar class="service_list">
<!-- <el-scrollbar class="service_list">
<div class="service_box" @click="change_micor(index)" :style="now_micor_service==index?{paddingLeft:'30px',borderLeft:'8px solid #515fe7',backgroundColor:'#fbfcfe'}:''" v-for="(item,index) in service_list_arr" :key="index+60000">{{item.service}}
<span v-if="item.is_unhealth" class="service_tips">故障</span>
</div>
</el-scrollbar>
</el-scrollbar> -->
<div class="service_type_ab">
<div v-for="item in mesh_options" @click="mesh_value=item.value" :key="item.value" :style="mesh_value==item.value?{backgroundColor:'#515fe7',color:'#f4f7fc',}:''">
{{item.label}}
</div>
</div>
<div class="service_detail">
<nor-card title="服务概况" flag="true">
<div class="service_title_card">
<nor-card title="服务状态" class="service_card" bgc="#e4f4fb">
<template>
<div style="overflow:hidden;height:160px;padding-top:10px;">
<div style="height:115px;padding-top:10px;" class="service_card_box">
<p style="color: #707693;font-size: 16px;text-align:center;">服务状态</p>
<div style="height:125px;padding-top:10px;">
<waveIcon :state="micor_state.state=='running'?'运行中':'停止'" style="margin:10px auto;"></waveIcon>
<p style="color: #58617a;font-size: 16px;text-align:center;">{{ micor_state.state=='running'?'运行中':'停止' }}</p>
</div>
<div style="height:115px;" class="service_num service_card_box">
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">服务平均响应时间</span>
</template>
</nor-card>
<nor-card title="服务平均响应时间" class="service_card" bgc="#e4f4fb">
<template>
<div style="height:125px;padding-top:20px;" class="service_num">
<p>{{ micor_state.averageTime }}ms</p>
<p>最大响应时间：{{ micor_state.maxTime }}ms</p>
</div>
<div style="height:115px;" class="service_num service_card_box">
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">吞吐率</span>
</template>
</nor-card>
<nor-card title="吞吐率" class="service_card" bgc="#e4f4fb">
<template>
<div style="height:125px;padding-top:20px;" class="service_num">
<p>{{ micor_state.averageTraffic }}dps</p>
<p>最大吞吐率：{{ micor_state.maxTraffic }}dps</p>
</div>
<div style="height:115px;padding-top:30px;" class="service_num service_card_box">
<span style="color: #707693;font-size: 16px;text-align:center;margin-bottom:26px;display:inline-block;">内存使用</span>
</template>
</nor-card>
<nor-card title="内存使用" class="service_card" bgc="#e4f4fb">
<template>
<div style="height:125px;padding-top:40px;" class="service_num">
<p>{{ micor_state.memory }}MB</p>
</div>
</div>
</template>
</nor-card>
</div>
<nor-card title="服务设置" flag="true" v-show="is_current_user">
<div class="addimage">
<!-- <nor-card title="服务设置" flag="true" v-show="is_current_user"> -->
<!-- <div class="addimage">
<el-select v-model="mesh_value" placeholder="请选择">
<el-option v-for="item in mesh_options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
</div> -->
<div v-show="is_current_user" class="tag_ox">
<p class="imagebox">
<span @click="image_select = index;getImageInfo()" :style="
image_select == index
......@@ -175,7 +192,8 @@
</el-table-column>
</el-table>
</nor-card>
</div>
<!-- </nor-card> -->
</div>
</div>
</div>
......@@ -292,7 +310,7 @@ export default {
memory: ""
},
public_flag: false,
now_micor_service: 0,
now_micor_service: '',
image_arr: [],
area_arr: [],
now_image_version: [],
......@@ -499,6 +517,30 @@ export default {
},
mounted() {},
methods: {
iconChange(val){
this.now_micor_service = val
// 获取当前el-select标签第一层div
const dom = this.$refs['select_icon'].$el;
if(dom.children[0].children[0].tagName == 'SPAN'){
dom.children[0].children[0].remove()
}
// 创建需要添加到其中的标签 并填充内容
const svgDom = document.createElement('span'); // ('<svg-icon ref="iconRef" icon-class="' + val + '" style="float: left;width: 3%;height: 30px;border: 1px solid #dcdfe6;border-right:none;" />');
svgDom.setAttribute('class', 'el-input__prefix');
if(this.service_list_arr[val].is_unhealth==0){
svgDom.innerHTML = '<span class="el-input__prefix-inner" style="margin-top:15px;margin-left:10px;display:inline-block;width:0px;height:18px;border-radius:4px;"></span>';
}else{
svgDom.innerHTML = '<span class="el-input__prefix-inner" style="margin-top:10px;margin-left:10px;display:inline-block;width:36px;color:#fff;height:18px;line-height:18px;border-radius:4px;background-color:#e15260;">故障</span>';
}
// 将创建的标签添加到父节点(第二层div)
dom.children[0].appendChild(svgDom);
// 得到el-select中的input标签
const inputDom = dom.children[0].children[0];
inputDom.setAttribute('style', 'padding-left: 60px;');
// 将添加的标签放到input前面
dom.children[0].insertBefore(svgDom, inputDom);
this.get_micro_service();
},
get_service_arae() {
this.$http
.get("/apaas/service/v3/service/manager/servarea")
......@@ -938,10 +980,20 @@ export default {
.get(`/apaas/hubApi/market/services/${this.$route.params.deploy_id}`)
.then(response => {
if (response.data.success) {
this.service_list_arr = response.data.data;
if (this.service_list_arr && this.service_list_arr.length) {
this.get_micro_service();
}
var temp = []
response.data.data.forEach((e,idx) => {
temp.push({
...e,
index:idx
})
});
this.service_list_arr = temp;
setTimeout(()=>{
this.iconChange(0)
},2000)
// if (this.service_list_arr && this.service_list_arr.length) {
// this.get_micro_service();
// }
}
});
}
......@@ -1016,8 +1068,19 @@ export default {
.addimage .el-input__icon {
line-height: 28px;
}
.service_title .el-input__inner{
background-color: #f7f8f9;
height: 32px;
line-height: 32px;
}
.tag_ox .el-table thead{
color: #1a2236;
}
</style>
<style scoped>
.service_title .el-select{
margin-left: 10px;
}
.info_contain >>> .apass_dialog .el-dialog__footer {
padding-top: 0;
}
......@@ -1189,6 +1252,7 @@ export default {
overflow: hidden;
margin-bottom: 20px;
padding-left: 40px;
margin-top: 20px;
}
.imagebox span {
height: 34px;
......@@ -1244,7 +1308,8 @@ export default {
.service_detail {
float: left;
height: 270px;
width: calc(100% - 425px);
width: 100%;
/* width: calc(100% - 425px); */
}
.service_card_box {
float: left;
......@@ -1265,4 +1330,25 @@ export default {
.dialog-content .formname:nth-of-type(1) {
margin-top: 0px;
}
.service_type_ab{
height: 48px;
width: 300px;
background-color: #f6f7fb;
border-radius: 8px;
overflow: hidden;
margin: 0px 0 10px 0px;
padding: 6px;
box-sizing: border-box;
}
.service_type_ab div{
float: left;
height: 36px;
width: 33.3%;
line-height: 36px;
text-align: center;
color: #58617a;
cursor: pointer;
font-weight: 600;
border-radius: 6px;
}
</style>
src/router/index.js
View file @ c52fddf2
......@@ -11,6 +11,9 @@ Router.prototype.push = function push(location, onResolve, onReject) {
};
export default new Router({
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
},
routes: [
{
path: "/",
......@@ -165,20 +168,20 @@ export default new Router({
}, // 开发文档
{
path: "/technical_support/doc_manage",
name: "technicalSupportDoc",
name: "technicalSupportDocManage",
redirect: "/technical_support/doc_manage/list",
component: () =>
import("@/pages/technical-support/doc-manage/index"),
children: [
{
path: "/technical_support/doc_manage/list",
name: "technicalSupportDocDetail",
name: "technicalSupportDocManageList",
component: () =>
import("@/pages/technical-support/doc-manage/list"),
}, // 开发文档管理列表
{
path: "/technical_support/doc_manage/edit/:id",
name: "technicalSupportDocDetail",
name: "technicalSupportDocManageDetail",
component: () =>
import("@/pages/technical-support/doc-manage/detail"),
}, // 开发文档管理编辑
......@@ -201,23 +204,26 @@ export default new Router({
}, // 示例中心
{
path: "/technical_support/answer_center/",
name: "technicalSupportDoc",
name: "answerCenter",
redirect: "/technical_support/answer_center/list",
component: () =>
import("@/pages/technical-support/answer-center/index"),
children: [
{
path: "/technical_support/answer_center/list",
name: "answerCenterList",
component: () =>
import("@/pages/technical-support/answer-center/list"),
}, // 问答中心列表
{
path: "/technical_support/answer_center/edit",
name: "answerCenterEdit",
component: () =>
import("@/pages/technical-support/answer-center/edit"),
}, // 问答中心编辑
{
path: "/technical_support/answer_center/detail/:id",
name: "answerCenterDetail",
component: () =>
import("@/pages/technical-support/answer-center/detail"),
}, // 问答中心详情
......@@ -238,7 +244,7 @@ export default new Router({
}, // SDK中心
{
path: "/technical_support/sdk_manage",
name: "technicalSupportDoc",
name: "technicalSupportSDK",
redirect: "/technical_support/sdk_manage/type",
component: () =>
import("@/pages/technical-support/sdk-manage/index"),
......@@ -278,32 +284,32 @@ export default new Router({
{
path: "/shop/data_service_list/:id", // 数据服务列表页
name: "shopDataList",
component: () => import("@/pages/service_shop/shop_list"),
component: () => import("@/pages/service_shop/shop_list-new"),
},
{
path: "/shop/space_time_service_list/:id", // 时空服务列表页
name: "shopSpaceTimeList",
component: () => import("@/pages/service_shop/shop_list"),
component: () => import("@/pages/service_shop/shop_list-new"),
},
{
path: "/shop/video_service_list/:id", // 视频服务列表页
name: "shopVideoList",
component: () => import("@/pages/service_shop/shop_list"),
component: () => import("@/pages/service_shop/shop_list-new"),
},
{
path: "/shop/perception_service_list/:id", // 感知服务列表页
name: "shopPerceptionList",
component: () => import("@/pages/service_shop/shop_list"),
component: () => import("@/pages/service_shop/shop_list-new"),
},
{
path: "/shop/comprehensive_app_list/:id", // 综合应用列表页
name: "shopComAppList",
component: () => import("@/pages/service_shop/shop_list"),
component: () => import("@/pages/service_shop/shop_list-new"),
},
{
path: "/shop/cloud", // 云资源服务
name: "shopCloud",
component: () => import("@/pages/service_shop/shop_cloud"),
component: () => import("@/pages/service_shop/shop_cloud-new"),
},
{
path: "/shop/service_application_successfully", // 申请服务成功
......@@ -314,7 +320,7 @@ export default new Router({
{
path: "/shop/app_store_list/:id", // 应用商店列表页
name: "shopAppStoreList",
component: () => import("@/pages/service_shop/shop_list"),
component: () => import("@/pages/service_shop/shop_list-new"),
},
{
path: "/shop/shopping_cart", // 购物车页
......@@ -338,6 +344,16 @@ export default new Router({
name: "skfwDetail",
component: () => import("@/pages/service_shop/skfwDetail"),
}, // 服务超市 - 时空服务详情
{
path: "/shop/spfwDetail/:id",
name: "spfwDetail",
component: () => import("@/pages/service_shop/spfwDetail"),
}, // 服务超市 - 视频服务详情
{
path: "/shop/gzfwDetail/:id",
name: "sjfwDetail",
component: () => import("@/pages/service_shop/gzfwDetail"),
}, // 服务超市 - 感知服务详情
{
path: "/shop/zhfwDetail/:id",
name: "zhfwDetail",
......
static/view/data/arcgisTreeNode.json
View file @ c52fddf2
......@@ -3,6 +3,11 @@
{
"label": "arcgis server 地图示例",
"children": [
{
"label": "基础地图",
"name": "basic_web_map",
"branch": "arcgis_latest"
},
{
"label": "二维地图",
"name": "2d_base_map",
......@@ -18,31 +23,6 @@
"name": "2dto3d",
"branch": "arcgis_latest"
},
{
"label": "二维地图之加载csv数据源",
"name": "2d_csvlayer",
"branch": "arcgis_latest"
},
{
"label": "二维地图之加载json数据源",
"name": "2d_loadjson",
"branch": "arcgis_latest"
},
{
"label": "二维地图之查询",
"name": "2d_query",
"branch": "arcgis_latest"
},
{
"label": "三维地图之加载csv数据源",
"name": "3d_csvlayer",
"branch": "arcgis_latest"
},
{
"label": "基础地图",
"name": "basic_web_map",
"branch": "arcgis_latest"
},
{
"label": "地图级别控件",
"name": "sliderZoom",
......@@ -58,34 +38,19 @@
"name": "geocoding",
"branch": "arcgis_latest"
},
{
"label": "缓冲区服务与空间分析",
"name": "linebuffer",
"branch": "arcgis_latest"
},
{
"label": "人员轨迹查询",
"name": "peoplecluster",
"branch": "arcgis_latest"
},
{
"label": "高亮图层要素",
"name": "pointshine_map",
"branch": "arcgis_latest"
},
{
"label": "天地图_WMTS",
"name": "tdt_wmts_map",
"label": "ArcGIS_WMTS",
"name": "arcgis_wmts",
"branch": "arcgis_latest"
},
{
"label": "方正_WMTS",
"name": "fz_map",
"branch": "arcgis_latest"
},
{
"label": "Geoserver_WMTS服务",
"name": "arcgis_load_geoserver_wmts",
"label": "Mapbox_WMTS服务",
"name": "arcgis_load_mapbox_wmts",
"branch": "arcgis_latest"
},
{
......@@ -98,11 +63,6 @@
"name": "multilayer3search",
"branch": "arcgis_latest"
},
{
"label": "多图层属性查询",
"name": "multilayer4search",
"branch": "arcgis_latest"
},
{
"label": "通用多图层多字段查询",
"name": "multilayersandfeilds_3search",
......@@ -118,21 +78,11 @@
"name": "echarts_web_map",
"branch": "arcgis_latest"
},
{
"label": "Webmap test",
"name": "webmap_test",
"branch": "arcgis_latest"
},
{
"label": "热力图",
"name": "heatmap",
"branch": "arcgis_latest"
},
{
"label": "图层管理",
"name": "manage_layers",
"branch": "arcgis_latest"
},
{
"label": "迁徙图",
"name": "migrate",
......@@ -144,64 +94,24 @@
"branch": "arcgis_latest"
},
{
"label": "公交线路图",
"name": "bus_line",
"label": "二维地图之加载csv数据源",
"name": "2d_csvlayer",
"branch": "arcgis_latest"
},
{
"label": "点聚合图",
"name": "flareClusterLayer",
"label": "三维地图之加载csv数据源",
"name": "3d_csvlayer",
"branch": "arcgis_latest"
},
{
"label": "运动图层",
"name": "movinglayer",
"label": "公交线路图",
"name": "bus_line",
"branch": "arcgis_latest"
},
{
"label": "3.x运动图层",
"name": "3.xmovelayer",
"branch": "arcgis_latest"
},
{
"label": "多图层查询",
"name": "2d_findTaskLayers",
"branch": "arcgis_latest"
},
{
"label": "画框统计",
"name": "2d_queryStatistic",
"branch": "arcgis_latest"
},
{
"label": "视频播放",
"name": "2d_videoView",
"branch": "arcgis_latest"
},
{
"label": "缓冲区分析",
"name": "2d_buffer_analysis",
"branch": "arcgis_latest"
},
{
"label": "加载本地JSON文件/shapefile文件",
"name": "2d_loadGeometry",
"branch": "arcgis_latest"
},
{
"label": "要素编辑",
"name": "editFeatures",
"branch": "arcgis_latest"
},
{
"label": "要素编辑用3.x版本",
"name": "2d_featureEditor3.x",
"branch": "arcgis_latest"
},
{
"label": "要素编辑用3.x版本_贵州",
"name": "2d_featureEditor3.x_guizhou",
"branch": "arcgis_latest"
}
]
}
......
static/view/demo/page-2d_base_map.html
View file @ c52fddf2
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>2D Base Map</title>
......@@ -19,13 +19,40 @@
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"dojo/domReady!"
], function (ESRICONFIG, Map, Basemap, MapView, WebTileLayer) {
// 通过瓦片形式加载天地图
// 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer({
urlTemplate: "http://{subDomain}.tianditu.gov.cn/vec_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=vec&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
var annolayer = new WebTileLayer({
urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
//请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
"t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
);
// 初始化天地图-Web墨卡托投影底图
var basemap = new Basemap({
id: "tdt",
title: "天地图-Web墨卡托",
baseLayers: [tiledLayer, annolayer]
})
// 初始化地图
var map = new Map({
basemap: "streets"
basemap: basemap
});
// 初始化二维视图
var view = new MapView({
container: "viewDiv",
map: map,
......@@ -35,6 +62,7 @@
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
......
static/view/demo/page-2d_csvlayer.html
View file @ c52fddf2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>CSVLayer - 4.11</title>
<title>CSVLayer - 2d</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<style>
html,
......@@ -28,7 +29,8 @@
"esri/layers/CSVLayer",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color"
"esri/Color",
"dojo/domReady!"
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
......@@ -152,24 +154,26 @@
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
},
});
var annomap = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
},
});
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
id: "tdtBasemap"
});
// csv文件的url
var url = "https://apaas.wodcloud.com/mapsamples/static/data/stations.csv";
var url = "https://apaas3.wodcloud.com/mapstatic/data/stations.csv";
var template = {
title: "Weather Observation Station",
content: " {province} {st_name} on {ele} with id {stid}."
......@@ -188,14 +192,13 @@
symbol: {
type: "simple-marker",
size: 8,
color: [245,125,33],
color: [245, 125, 33],
outline: {
width: 1,
color: "white"
}
}
};
// 创建地图数据
var map = new Map({
basemap: tdtBasemap,
......@@ -205,9 +208,6 @@
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 4,
constraints: {
lods: tileInfo.lods,
......
static/view/demo/page-2d_loadjson.html deleted 100644 → 0
View file @ 6c19c684
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>People Cluster</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/mapsamples/static/config/mapconfig.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
$(function () {
require([
"esri/Map",
"esri/Graphic",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/geometry/Point",
"esri/widgets/Search",
"esri/tasks/QueryTask",
"esri/tasks/support/Query",
"esri/layers/GraphicsLayer",
"esri/geometry/SpatialReference",
"esri/layers/VectorTileLayer",
"esri/symbols/PictureMarkerSymbol"
], function (Map, Graphic, Basemap, MapView, WebTileLayer, TileInfo, Point, Search, QueryTask, Query,
GraphicsLayer, SpatialReference,
VectorTileLayer, PictureMarkerSymbol) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429, //解析度，即像素
rows: 256,
cols: 256,
compressionQuality: 0, //压缩像素值
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4326
},
lods: [ //定义平铺方案的细节级别数组
{
level: 1,
levelValue: 1,
resolution: 0.703125,
scale: 295497593.05875003
}, {
level: 2,
levelValue: 2,
resolution: 0.3515625,
scale: 147748796.52937502
}, {
level: 3,
levelValue: 3,
resolution: 0.17578125,
scale: 73874398.264687508
}, {
level: 4,
levelValue: 4,
resolution: 0.087890625,
scale: 36937199.132343754
}, {
level: 5,
levelValue: 5,
resolution: 0.0439453125,
scale: 18468599.566171877
}, {
level: 6,
levelValue: 6,
resolution: 0.02197265625,
scale: 9234299.7830859385
}, {
level: 7,
levelValue: 7,
resolution: 0.010986328125,
scale: 4617149.8915429693
}, {
level: 8,
levelValue: 8,
resolution: 0.0054931640625,
scale: 2308574.9457714846
}, {
level: 9,
levelValue: 9,
resolution: 0.00274658203125,
scale: 1154287.4728857423
}, {
level: 10,
levelValue: 10,
resolution: 0.001373291015625,
scale: 577143.73644287116
}, {
level: 11,
levelValue: 11,
resolution: 0.0006866455078125,
scale: 288571.86822143558
}, {
level: 12,
levelValue: 12,
resolution: 0.00034332275390625,
scale: 144285.93411071779
}, {
level: 13,
levelValue: 13,
resolution: 0.000171661376953125,
scale: 72142.967055358895
}, {
level: 14,
levelValue: 14,
resolution: 8.58306884765625e-005,
scale: 36071.483527679447
}, {
level: 15,
levelValue: 15,
resolution: 4.291534423828125e-005,
scale: 18035.741763839724
}, {
level: 16,
levelValue: 16,
resolution: 2.1457672119140625e-005,
scale: 9017.8708819198619
}, {
level: 17,
levelValue: 17,
resolution: 1.0728836059570313e-005,
scale: 4508.9354409599309
}, {
level: 18,
levelValue: 18,
resolution: 5.3644180297851563e-006,
scale: 2254.4677204799655
}, {
level: 19,
levelValue: 19,
resolution: 2.68220901489257815e-006,
scale: 1127.23386023998275
}, {
level: 20,
levelValue: 2,
resolution: 1.341104507446289075e-006,
scale: 563.616930119991375
}
]
});
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
});
var annomap = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
});
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
});
// 创建地图
var map = new Map({
basemap: tdtBasemap
});
//json格式的地理数据
var url = "https://apaas.wodcloud.com/mapsamples/static/data/ga_footprint.json"
$.ajax({
type: "GET",
url: url,
dataType: "json",
timeout: 5000,
success: function (response) {
console.log(response)
loaddata(response);
},
error: function (xhr, status, err) {
alert("找不到数据");
}
});
var footprintlayer = new GraphicsLayer();
function loaddata(data) {
if (!data.features || !data.features.length) {
console.log("no data");
return;
}
var wkid = data.crs.properties.name.split(':')[1];
var features = data.features;
for (var i = 0; i < features.length; i++) {
var feature = features[i];
if (feature) {
var properties = feature.properties;
var reportor = properties.BUS_REPO_1 ? properties.BUS_REPO_1 : "匿名";
var happenedTime = properties.BUS_HAPPEN;
var happenedAddress = properties.BUS_ADDRES;
var description = properties.BUS_DESCRI;
var lon = feature.geometry.coordinates[0];
var lat = feature.geometry.coordinates[1];
var pt = new Point({
"x": lon,
"y": lat,
"spatialReference": new SpatialReference(wkid)
});
var symbol = new PictureMarkerSymbol("https://apaas.wodcloud.com/mapsamples/static/images/marker-yellow.png", 26, 37);
var attr = {
"name": reportor,
"happenedTime": happenedTime,
"happenedAddress": happenedAddress,
"detail": description
};
var graphic = new Graphic(pt, symbol, attr);
footprintlayer.add(graphic);
}
}
}
const search = new Search({
view: view,
resultGraphicEnabled: false,
popupEnabled: false
});
map.add(footprintlayer);
// 创建二维地图
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 16,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [119.636832387, 30.944171371]
});
view.ui.add(search, {
position: "top-right"
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="esri-widget" id="optionsDiv">
<h2>过滤条件</h2>
<br />
<label for="province">省 ： </label>
<select class="esri-widget" id="valSelect">
<option value="北京">北京市</option>
<option value="湖北">湖北省</option>
<option value="天津">天津市</option>
<option value="上海">上海市</option>
<option value="江苏">江苏省</option>
</select>
<br />
<label for="name">站点名称:</label>
<input id="st_name" type="text">
<button class="esri-widget" id="doBtn">检索</button> <br />
<p><span id="printResults"></span></p>
</div>
</body>
</html>
static/view/demo/page-2d_query.html deleted 100644 → 0
View file @ 6c19c684
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>QueryTask</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#optionsDiv {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-items: baseline;
align-content: center;
background-color: dimgray;
color: white;
padding: 10px;
width: 200px;
}
#printResults{
width: 200px
}
.esri-popup .esri-popup-header .esri-title {
font-size: 18px;
font-weight: bolder;
}
.esri-popup .esri-popup-body .esri-popup-content {
font-size: 14px;
}
</style>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script src="/static/js/jquery-3.3.1.min.js"></script>
<script src="/static/config/mapconfig.js"></script>
<script>
require([
"esri/Map",
"esri/Graphic",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/geometry/Point",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/geometry/SpatialReference",
"esri/layers/VectorTileLayer",
"esri/symbols/PictureMarkerSymbol",
"esri/tasks/QueryTask",
"esri/tasks/support/Query"
], function (Map, Graphic, Basemap, MapView, WebTileLayer, TileInfo, Point, FeatureLayer, GraphicsLayer,
SpatialReference, VectorTileLayer,
PictureMarkerSymbol, QueryTask, Query) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429, //解析度，即像素
rows: 256,
cols: 256,
compressionQuality: 0, //压缩像素值
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4326
},
lods: [ //定义平铺方案的细节级别数组
{
level: 1,
levelValue: 1,
resolution: 0.703125,
scale: 295497593.05875003
}, {
level: 2,
levelValue: 2,
resolution: 0.3515625,
scale: 147748796.52937502
}, {
level: 3,
levelValue: 3,
resolution: 0.17578125,
scale: 73874398.264687508
}, {
level: 4,
levelValue: 4,
resolution: 0.087890625,
scale: 36937199.132343754
}, {
level: 5,
levelValue: 5,
resolution: 0.0439453125,
scale: 18468599.566171877
}, {
level: 6,
levelValue: 6,
resolution: 0.02197265625,
scale: 9234299.7830859385
}, {
level: 7,
levelValue: 7,
resolution: 0.010986328125,
scale: 4617149.8915429693
}, {
level: 8,
levelValue: 8,
resolution: 0.0054931640625,
scale: 2308574.9457714846
}, {
level: 9,
levelValue: 9,
resolution: 0.00274658203125,
scale: 1154287.4728857423
}, {
level: 10,
levelValue: 10,
resolution: 0.001373291015625,
scale: 577143.73644287116
}, {
level: 11,
levelValue: 11,
resolution: 0.0006866455078125,
scale: 288571.86822143558
}, {
level: 12,
levelValue: 12,
resolution: 0.00034332275390625,
scale: 144285.93411071779
}, {
level: 13,
levelValue: 13,
resolution: 0.000171661376953125,
scale: 72142.967055358895
}, {
level: 14,
levelValue: 14,
resolution: 8.58306884765625e-005,
scale: 36071.483527679447
}, {
level: 15,
levelValue: 15,
resolution: 4.291534423828125e-005,
scale: 18035.741763839724
}, {
level: 16,
levelValue: 16,
resolution: 2.1457672119140625e-005,
scale: 9017.8708819198619
}, {
level: 17,
levelValue: 17,
resolution: 1.0728836059570313e-005,
scale: 4508.9354409599309
}, {
level: 18,
levelValue: 18,
resolution: 5.3644180297851563e-006,
scale: 2254.4677204799655
}, {
level: 19,
levelValue: 19,
resolution: 2.68220901489257815e-006,
scale: 1127.23386023998275
}, {
level: 20,
levelValue: 2,
resolution: 1.341104507446289075e-006,
scale: 563.616930119991375
}
]
});
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
});
var annomap = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
});
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
});
//预设弹出窗模板
var popupTemplate = {
title: "{province}, {st_name} 站",
fieldInfos: [{
fieldName: "st_name",
label: "站点名称",
format: {
places: 0,
digitSeperator: true
}
}],
content: "</b> 站点 {st_name} 位于 {province} 省/直辖市" +
"<br><b>传感器高度:</b> {ele}" +
"<br><b>海拔高度:</b> {ele}" +
"</b> 经度：{lon} 纬度：{lat} "
};
var stationUrl = "https://geoserver.deekong.com/arcgis/rest/services/weather_station_wmo/FeatureServer/0"
//声明查询结果图层和目标要素图层
var resultsLayer = new GraphicsLayer();
var weatherstation = new FeatureLayer({
url: stationUrl
});
//创建查询
var qTask = new QueryTask({
url: stationUrl
});
//设置查询参数，是否返回几何数据、返回字段数组
var params = new Query({
returnGeometry: true,
outFields: ["*"]
});
//构建地图数据
var map = new Map({
basemap: tdtBasemap,
layers: [weatherstation, resultsLayer]
});
//显示地图
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 6,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [109, 38],
popup: {
dockEnabled: true,
dockOptions: {
position: "top-right",
breakpoint: false
}
}
});
//地图数据加载完成
view.when(function () {
view.ui.add("optionsDiv", "bottom-right");
//按钮点击监听事件，执行查询
document.getElementById("doBtn").addEventListener("click", doQuery);
});
var st_name = document.getElementById("st_name");
var province = document.getElementById("valSelect");
//查询事件
function doQuery() {
//清楚之前查询结果
resultsLayer.removeAll();
//设置查询条件，与数据库查询SQL语句类似
params.where = "province='" + province.value + "'";
qTask
.execute(params)
.then(getResults)
.catch(promiseRejected);
}
// 查询完成处理返回结果
function getResults(response) {
var peakResults = response.features.map(function (feature) {
var pt = new Point({
"x": feature.geometry.longitude,
"y": feature.geometry.latitude,
"spatialReference": new SpatialReference(4326)
});
var symbol = new PictureMarkerSymbol("/images/marker-red.png", 26, 37);
var attr = {
"st_name": feature.attributes.st_name,
"province": feature.attributes.province,
"ele": feature.attributes.ele,
"lat": feature.attributes.lat,
"lon": feature.attributes.lon
};
var graphic = new Graphic(pt, symbol, attr);
graphic.popupTemplate = popupTemplate;
return graphic;
});
//将结果添加到图层
resultsLayer.addMany(peakResults);
//移动地图到结果处
view.goTo(peakResults).then(function () {
view.popup.open({
features: peakResults,
featureMenuOpen: true,
updateLocationEnabled: true
});
});
document.getElementById("printResults").innerHTML =
"共查询到" + peakResults.length + "个对象";
}
function promiseRejected(error) {
console.error("Promise rejected: ", error.message);
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div class="esri-widget" id="optionsDiv">
<label for="province">省 ： </label>
<select class="esri-widget" id="valSelect">
<option value="北京">北京市</option>
<option value="湖北">湖北省</option>
<option value="天津">天津市</option>
<option value="上海">上海市</option>
<option value="江苏">江苏省</option>
</select>
<br><br>
<button class="esri-widget" id="doBtn">检索</button> <br />
<span id="printResults"></span>
</div>
</body>
</html>
static/view/demo/page-2dto3d.html
View file @ c52fddf2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
......@@ -15,13 +14,11 @@
height: 100%;
width: 100%;
}
#infoDiv {
position: absolute;
top: 15px;
left: 60px;
}
#infoDiv input {
border: none;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px;
......@@ -31,12 +28,13 @@
<script>
require([
"esri/config",
"esri/layers/WebTileLayer",
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/views/SceneView",
"esri/layers/WebTileLayer",
"dojo/domReady!"
], function (ESRICONFIG, WebTileLayer, Map, MapView, SceneView) {
], function (ESRICONFIG, Map, Basemap, MapView, SceneView, WebTileLayer) {
// 通过瓦片形式加载天地图
// 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
......@@ -48,58 +46,54 @@
urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
//请求天地图服务跨域的设置
// 请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
"t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
);
// 初始化天地图-Web墨卡托投影底图
var basemap = new Basemap({
id: "tdt",
title: "天地图-Web墨卡托",
baseLayers: [tiledLayer,annolayer]
})
// 获取切换按钮节点
var switchButton = document.getElementById("switch-btn");
//统一管理页面中的地图视图
// 统一管理页面中的地图视图
var appConfig = {
mapView: null, //2D视图
sceneView: null, //3D视图
activeView: null, //当前显示的视图
container: "viewDiv"
};
//视图初始设置，缩放等级，中心
// 视图初始设置，缩放等级，中心
var initialViewParams = {
zoom: 5,
center: [114, 30],
container: appConfig.container
};
//同一个地图数据资源
// 初始化地图
var map = new Map({
ground: "world-elevation"
basemap: basemap
});
map.layers.add(tiledLayer);
map.layers.add(annolayer);
//创建2D视图
appConfig.mapView = createView(initialViewParams, "2d");
appConfig.mapView.map = map;
appConfig.activeView = appConfig.mapView;
// 创建3D视图
initialViewParams.container = null; //初始状况不显示3D视图
initialViewParams.map = map;
appConfig.sceneView = createView(initialViewParams, "3d");
// 转换按钮
switchButton.addEventListener("click", function () {
switchView();
});
function switchView() {
//判断当前视图是否是3D视图
var is3D = appConfig.activeView.type === "3d";
var activeViewpoint = appConfig.activeView.viewpoint.clone();
//移除当前视图
appConfig.activeView.container = null;
if (is3D) {
// 如果是3D视图，就将其转换为2D视图
appConfig.mapView.viewpoint = activeViewpoint;
......@@ -114,7 +108,6 @@
switchButton.value = "2D";
}
}
//创建2D和3D视图
function createView(params, type) {
var view;
......@@ -128,10 +121,8 @@
return view;
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="infoDiv">
......@@ -139,5 +130,4 @@
value="3D" />
</div>
</body>
</html>
static/view/demo/page-3.xmovelayer.html
View file @ c52fddf2
......@@ -17,7 +17,7 @@
</style>
<script src="https://apaas.wodcloud.com/api_3.x/init.js"></script>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas3.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
<script>
let map, featureLayer, moveLayer, lineLayer, featureCollection, featureCollection2, selectedGraphics, linesymbol,
selectedLineGraphic, timer, movecounts;
......@@ -206,7 +206,7 @@
"type": "simple",
"symbol": {
"type": "esriPMS",
"url": "https://apaas.wodcloud.com/mapsamples/static/images/ic_wxhuoche.png",
"url": "https://apaas3.wodcloud.com/mapstatic/images/ic_wxhuoche.png",
"contentType": "image/png",
"width": 15,
"height": 15
......@@ -281,7 +281,7 @@
// map.graphics.add(polylineGraphic);
$.get(
"https://apaas.wodcloud.com/mapsamples/static/data/mapLocation.json",
"https://apaas3.wodcloud.com/mapstatic/data/mapLocation.json",
function (data) {
var features = [];
array.forEach(data.features, function (feature) {
......@@ -320,8 +320,6 @@
function selectInMap(response) {
var features = [];
console.log(response.features);
//深拷贝
array.forEach(response.features, function (feature) {
var attr = {};
......@@ -332,10 +330,6 @@
graphic.setAttributes(attr);
features.push(graphic);
});
// var features = response.features;
console.log(features);
map.removeLayer(moveLayer);
map.removeLayer(lineLayer);
moveLayer = new FeatureLayer(featureCollection, {
......
static/view/demo/page-3d_base_map.html
View file @ c52fddf2
......@@ -19,13 +19,14 @@
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/Basemap",
"esri/views/SceneView",
"esri/layers/WebTileLayer",
"esri/config",
"esri/geometry/Point",
"dojo/domReady!"
], function (Map, SceneView, WebTileLayer, ESRICONFIG, Point) {
], function (ESRICONFIG,Map, Basemap, SceneView, WebTileLayer, Point) {
// 通过瓦片形式加载天地图
// 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
......@@ -37,37 +38,41 @@
urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
//请求天地图服务跨域的设置
// 请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
"t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
);
// 初始化天地图-Web墨卡托投影底图
var basemap = new Basemap({
id: "tdt",
title: "天地图-Web墨卡托",
baseLayers: [tiledLayer,annolayer]
})
// 初始化地图
var map = new Map({
ground: "world-elevation"
basemap: basemap
});
map.layers.add(tiledLayer);
map.layers.add(annolayer);
// 初始化三维视图
var view = new SceneView({
map: map,
container: "viewDiv",
zoom: 3,
center: [114, 30]
});
var pt = new Point({
// 缩放到特定点
view.when(function() {
setTimeout(view.goTo({
target: new Point({
longitude: 106.7,
latitude: 26.6
});
view.whenLayerView(tiledLayer,annolayer).then(function() {
setTimeout(view.goTo({
target: pt,
}),
zoom: 10,
tilt: 0,
heading: 0
}), 4000)
})
});
</script>
</head>
......
static/view/demo/page-3d_csvlayer.html
View file @ c52fddf2
......@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>CSVLayer - 4.11</title>
<title>CSVLayer-3d</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<style>
html,
......@@ -16,20 +16,21 @@
width: 100%;
}
</style>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas3.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/config",
"esri/layers/WebTileLayer",
"esri/Map",
"esri/Basemap",
"esri/views/SceneView",
"esri/layers/WebTileLayer",
"esri/layers/CSVLayer",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",
"dojo/domReady!"
], function (ESRICONFIG, WebTileLayer, Map, SceneView, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) {
], function (ESRICONFIG, Map, Basemap, SceneView, WebTileLayer, CSVLayer, SimpleRenderer, SimpleMarkerSymbol, Color) {
// 通过瓦片形式加载天地图
// 天地图根据投影分为两种：墨卡托和经纬度，在3D视图中使用Web墨卡托投影
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
......@@ -41,32 +42,41 @@
urlTemplate: "http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
//请求天地图服务跨域的设置
// 请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
"t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
);
var url =
"https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv";
var url = "https://apaas.wodcloud.com/mapsamples/static/data/stations.csv";
var template = {
title: "Weather Observation Station",
content: " {province} {st_name} on {ele} with id {stid}."
};
// 初始化天地图-Web墨卡托投影底图
var basemap = new Basemap({
id: "tdt",
title: "天地图-Web墨卡托",
baseLayers: [tiledLayer, annolayer]
})
// 初始化地图
var map = new Map({
basemap: basemap
});
// 初始化三维视图
var view = new SceneView({
container: "viewDiv",
center: [108.3, 33.9],
zoom: 4,
map: map
});
// 添加csv图层
var url = "https://apaas3.wodcloud.com/mapstatic/data/stations.csv";
var csvLayer = new CSVLayer({
url: url,
copyright: "big-data",
popupTemplate: template,
popupTemplate: {
title: "Weather Observation Station",
content: " {province} {st_name} on {ele} with id {stid}."
},
elevationInfo: {
//在地球表面放置
mode: "on-the-ground"
}
});
csvLayer.renderer = {
mode: "on-the-ground" //在地球表面放置
},
renderer: {
type: "simple", //渲染的类型
symbol: {
type: "point-3d", //要素为3D点
......@@ -82,23 +92,10 @@
size: "12px"
}]
}
};
var map = new Map({
ground: "world-elevation"
}
});
map.layers.add(tiledLayer);
map.layers.add(annolayer);
map.layers.add(csvLayer);
var view = new SceneView({
container: "viewDiv",
center: [108.3, 33.9],
zoom: 4,
map: map
});
});
</script>
</head>
......
static/view/demo/page-arcgis_load_geoserver_wmts.html deleted 100644 → 0
View file @ 6c19c684
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>TDT WMTS Map</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#switchBaseMap {
position: fixed;
width: 50px;
height: 50px;
top: 20px;
right: 90px;
}
#switchBaseMap img {
width: auto;
height: auto;
}
#diqiu {
display: none;
}
#ditu {
display: block;
}
</style>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/layers/MapImageLayer",
"https://apaas.wodcloud.com/mapsamples/static/js/GaodeLayer.js",
"dojo/domReady!"
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, MapImageLayer, GaodeLayer) {
var GaodeLayer = new GaodeLayer();
var tileInfo = new TileInfo({
rows: 256,
cols: 256,
compressionQuality: 0, //压缩像素值
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4326
},
lods: [ //定义平铺方案的细节级别数组
{
level: 0,
levelValue: 0,
resolution: 0.703125,
scale: 295497593.05875003
}, {
level: 1,
levelValue: 1,
resolution: 0.3515625,
scale: 147748796.52937502
}, {
level: 2,
levelValue: 2,
resolution: 0.17578125,
scale: 73874398.264687508
}, {
level: 3,
levelValue: 3,
resolution: 0.087890625,
scale: 36937199.132343754
}, {
level: 4,
levelValue: 4,
resolution: 0.0439453125,
scale: 18468599.566171877
}, {
level: 5,
levelValue: 5,
resolution: 0.02197265625,
scale: 9234299.7830859385
}, {
level: 6,
levelValue: 6,
resolution: 0.010986328125,
scale: 4617149.8915429693
}, {
level: 7,
levelValue: 7,
resolution: 0.0054931640625,
scale: 2308574.9457714846
}, {
level: 8,
levelValue: 8,
resolution: 0.00274658203125,
scale: 1154287.4728857423
}, {
level: 9,
levelValue: 9,
resolution: 0.001373291015625,
scale: 577143.73644287116
}, {
level: 10,
levelValue: 10,
resolution: 0.0006866455078125,
scale: 288571.86822143558
}, {
level: 11,
levelValue: 11,
resolution: 0.00034332275390625,
scale: 144285.93411071779
}, {
level: 12,
levelValue: 12,
resolution: 0.000171661376953125,
scale: 72142.967055358895
}, {
level: 13,
levelValue: 13,
resolution: 8.58306884765625e-005,
scale: 36071.483527679447
}, {
level: 14,
levelValue: 14,
resolution: 4.291534423828125e-005,
scale: 18035.741763839724
}, {
level: 15,
levelValue: 15,
resolution: 2.1457672119140625e-005,
scale: 9017.8708819198619
}, {
level: 16,
levelValue: 16,
resolution: 1.0728836059570313e-005,
scale: 4508.9354409599309
}, {
level: 17,
levelValue: 17,
resolution: 5.3644180297851563e-006,
scale: 2254.4677204799655
}, {
level: 18,
levelValue: 18,
resolution: 2.68220901489257815e-006,
scale: 1127.23386023998275
}
]
});
let layer = new WebTileLayer({
id: 'baseMapOne',
urlTemplate: 'http://218.19.252.203:20052/geoserver/gwc/service/wmts?SERVICE=WMTS&request=GetTile&version=1.0.0&LAYER=chanzhou%3Ajichutu&tileMatrixSet=EPSG:4326&TileMatrix=EPSG:4326:{level}&TileRow={row}&TileCol={col}&style=&format=image/png',
spatialReference: {
wkid: 4326
},
tileInfo: tileInfo
})
var layer1 = new MapImageLayer({
title: "深圳市控制点",
id: "controlMap",
url: "https://apaasgis.wodcloud.com/server/rest/services/SZ_POINT_TEST/MapServer",
sublayers: [
{
id: 0,
visible: true
}
]
});
// var tdtBasemap = new Basemap({
// baseLayers: [layer, layer1],
// title: "TDT Basemap",
// id: "tdtBasemap",
// spatialReference: {
// wkid: 4326
// },
// });
// var tdtBasemap2 = new Basemap({
// baseLayers: [GaodeLayer,layer1],
// title: "TDT Basemap",
// id: "tdtBasemap",
// spatialReference: {
// wkid: 3857
// },
// });
// // 创建地图
// var map = new Map({
// basemap: tdtBasemap2
// });
var map = new Map();
map.layers.addMany([GaodeLayer, layer1]);
// 创建二维地图
var view = new MapView({
map: map,
container: "viewDiv",
zoom: 12,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [114.05457, 22.54635]
//center:[3793128.792642,12738689.385894]
//center:new Point(114.05457, 22.54635, new SpatialReference({ wkid: 3857 }))
});
window.onload = function () {
function $(id) {
return document.getElementById(id);
}
//鼠标进
$("switchBaseMap").onmouseover = function () {
$("diqiu").style.display = "block";
$("ditu").style.display = "block";
}
//鼠标出
$("switchBaseMap").onmouseout = function () {
if ($("diqiu").style.display == "block") {
$("ditu").style.display = "none";
} else if ($("ditu").style.display == "block") {
$("diqiu").style.display = "none";
}
}
}
//点击ditu图标
document.getElementById("ditu").onclick = () => {
document.getElementById("ditu").style.display = "block";
document.getElementById("diqiu").style.display = "none";
map = new Map();
map.layers.addMany([GaodeLayer, layer1]);
// GaodeLayer.visible = false;
// layer.visible = true;
view = new MapView({
map: map,
container: "viewDiv",
zoom: 12,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [114.05457, 22.54635]
});
}
//点击diqiu图标
document.getElementById("diqiu").onclick = () => {
document.getElementById("ditu").style.display = "none";
document.getElementById("diqiu").style.display = "block";
map = new Map();
map.layers.addMany([layer, layer1]);
view = new MapView({
map: map,
container: "viewDiv",
zoom: 12,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [114.05457, 22.54635]
});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="switchBaseMap">
<img id="diqiu" src="../../images/diqiu.png" />
<img id="ditu" src="../../images/ditu.png" />
</div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-arcgis_load_mapbox_wmts.html 0 → 100644
View file @ c52fddf2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Mapbox WMTS Map</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/Map",
"esri/Basemap",
"esri/views/SceneView",
"esri/layers/WebTileLayer",
"dojo/domReady!"
], function (Map, Basemap, SceneView, WebTileLayer) {
// 初始化mapbox wmts图层服务
let tiledlayer = new WebTileLayer({
urlTemplate:
"https://mapboxwmts.ali.wodcloud.com/styles/v1/cfangogogo/ckexp7fhw0aot19n63ngh1h1z/tiles/512/{level}/{col}/{row}?access_token=pk.eyJ1IjoiY2ZhbmdvZ29nbyIsImEiOiJja2IxamxkN24wMHJsMnNtZGNzYWd2NnBlIn0.NhCC9fS15MhO5lpl9i45BQ"
});
// 底图中使用mapbox wmts图层服务
let mapboxBasemap = new Basemap({
baseLayers: [tiledlayer],
title: "Mapbox Basemap",
id: "mapboxBasemap",
spatialReference: {
wkid: 3857
}
});
// 初始化地图
let map = new Map({
basemap: mapboxBasemap
});
// 创建三维地图
var view = new SceneView({
container: "viewDiv",
map: map,
spatialReference: {
wkid: 3857
},
camera: {
position: [119.95393142467243, 31.779518311309737,500],
tilt: 55,
heading: 90
},
constraints: {
maxZoom: 22,
minZoom: 0
},
zoom: 12
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-arcgis_wmts.html 0 → 100644
View file @ c52fddf2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>ArcGIS WMTS Map</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/TileLayer",
"dojo/domReady!"
], function(Map, Basemap, MapView, TileLayer) {
// ArcGIS 切片服务
let tilelayer = new TileLayer({
url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer'
});
// 作为底图
var agsBasemap = new Basemap({
baseLayers: [tilelayer],
title: "ArcGIS Basemap",
id: "agsBasemap"
});
// 创建地图
var map = new Map({
basemap: agsBasemap
});
// 创建二维地图
var view = new MapView({
map: map,
container: "viewDiv",
zoom: 12,
constraints: {
snapToZoom: true
},
center: [106.72, 26.585]
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-basic_web_map.html
View file @ c52fddf2
......@@ -24,10 +24,10 @@
"esri/WebMap"
], function(esriConfig, MapView, WebMap) {
//使用portal门户的地图资源
esriConfig.portalUrl = "https://apaasgis.wodcloud.com/arcgis";
esriConfig.portalUrl = "https://apaasgis.wodcloud.com/portal";
var webmap = new WebMap({
portalItem: {
id: "54a708b3890a4d1aaff37988697aeaec"
id: "aa912ada83904d7c901066673ee1a5aa"
}
});
......
static/view/demo/page-bus_line.html
View file @ c52fddf2
......@@ -29,41 +29,173 @@
</style>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js"></script>
<script src="https://apaas3.wodcloud.com/mapstatic/js/echarts.min.js"></script>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas3.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
<script>
var map, view, option;
require([
"esri/config",
"esri/Map",
"esri/Basemap",
"https://apaas.wodcloud.com/mapsamples/static/js/4EchartsLayer.js",
"https://apaas3.wodcloud.com/mapstatic/js/4EchartsLayer.js",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"dojo/domReady!"
], function (
Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo
ESRICONFIG, Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo
) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
let tiledlayer = new WebTileLayer({
urlTemplate:
"http://{subDomain}.tianditu.gov.cn/vec_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=vec&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429, //解析度，即像素
rows: 256,
cols: 256,
compressionQuality: 0, //压缩像素值
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4326
},
lods: [ //定义平铺方案的细节级别数组
{
level: 1,
levelValue: 1,
resolution: 0.703125,
scale: 295497593.05875003
}, {
level: 2,
levelValue: 2,
resolution: 0.3515625,
scale: 147748796.52937502
}, {
level: 3,
levelValue: 3,
resolution: 0.17578125,
scale: 73874398.264687508
}, {
level: 4,
levelValue: 4,
resolution: 0.087890625,
scale: 36937199.132343754
}, {
level: 5,
levelValue: 5,
resolution: 0.0439453125,
scale: 18468599.566171877
}, {
level: 6,
levelValue: 6,
resolution: 0.02197265625,
scale: 9234299.7830859385
}, {
level: 7,
levelValue: 7,
resolution: 0.010986328125,
scale: 4617149.8915429693
}, {
level: 8,
levelValue: 8,
resolution: 0.0054931640625,
scale: 2308574.9457714846
}, {
level: 9,
levelValue: 9,
resolution: 0.00274658203125,
scale: 1154287.4728857423
}, {
level: 10,
levelValue: 10,
resolution: 0.001373291015625,
scale: 577143.73644287116
}, {
level: 11,
levelValue: 11,
resolution: 0.0006866455078125,
scale: 288571.86822143558
}, {
level: 12,
levelValue: 12,
resolution: 0.00034332275390625,
scale: 144285.93411071779
}, {
level: 13,
levelValue: 13,
resolution: 0.000171661376953125,
scale: 72142.967055358895
}, {
level: 14,
levelValue: 14,
resolution: 8.58306884765625e-005,
scale: 36071.483527679447
}, {
level: 15,
levelValue: 15,
resolution: 4.291534423828125e-005,
scale: 18035.741763839724
}, {
level: 16,
levelValue: 16,
resolution: 2.1457672119140625e-005,
scale: 9017.8708819198619
}, {
level: 17,
levelValue: 17,
resolution: 1.0728836059570313e-005,
scale: 4508.9354409599309
}, {
level: 18,
levelValue: 18,
resolution: 5.3644180297851563e-006,
scale: 2254.4677204799655
}, {
level: 19,
levelValue: 19,
resolution: 2.68220901489257815e-006,
scale: 1127.23386023998275
}, {
level: 20,
levelValue: 2,
resolution: 1.341104507446289075e-006,
scale: 563.616930119991375
}
]
});
let annolayer = new WebTileLayer({
urlTemplate:
"http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
var annomap = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
// 请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
"t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
);
// 使用本地字体文件
ESRICONFIG.fontsUrl = "https://apaas.wodcloud.com/mapstatic/font";
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledlayer, annolayer],
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
id: "tdtBasemap"
});
// 创建地图
map = new Map({
......@@ -77,7 +209,7 @@
center: [116.3304, 39.8707]
});
$.get("https://apaas.wodcloud.com/mapsamples/static/data/lines-bus.json", function (data) {
$.get("https://apaas3.wodcloud.com/mapstatic/data/lines-bus.json", function (data) {
var hStep = 300 / (data.length - 1);
var busLines = [].concat.apply([], data.map(function (busLine, idx) {
var prevPt;
......@@ -112,8 +244,6 @@
silent: true,
lineStyle: {
normal: {
// color: '#c23531',
// color: 'rgb(200, 35, 45)',
opacity: 0.2,
width: 1
}
......
static/view/demo/page-echarts_web_map.html
View file @ c52fddf2
......@@ -31,8 +31,8 @@
height: 170px;
}
</style>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js"></script>
<script src="https://apaas3.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas3.wodcloud.com/mapstatic/js/echarts.min.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
......@@ -40,10 +40,10 @@
"esri/views/MapView",
"esri/WebMap"
], function (esriConfig, MapView, WebMap) {
esriConfig.portalUrl = "https://apaasgis.wodcloud.com/arcgis";
esriConfig.portalUrl = "https://apaasgis.wodcloud.com/portal";
var webmap = new WebMap({
portalItem: {
id: "54a708b3890a4d1aaff37988697aeaec"
id: "b4f4797eb32342c5b679082bfbbef553"
}
});
......
static/view/demo/page-featurelayer.html
View file @ c52fddf2
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>从要素图层中查询</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
<style>
html,
body,
#sceneDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.panel-container {
position: relative;
width: 100%;
height: 100%;
}
.panel-side {
padding: 2px;
box-sizing: border-box;
width: 300px;
height: 100%;
position: absolute;
top: 0;
right: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
overflow: auto;
z-index: 60;
}
.panel-side h3 {
padding: 0 20px;
margin: 20px 0;
}
.panel-side ul {
list-style: none;
margin: 0;
padding: 0;
}
.panel-side li {
list-style: none;
padding: 10px 20px;
}
.panel-result {
cursor: pointer;
margin: 2px 0;
background-color: rgba(0, 0, 0, 0.3);
}
.panel-result:hover,
.panel-result:focus {
color: orange;
background-color: rgba(0, 0, 0, 0.75);
}
</style>
</head>
<body>
<div class="panel-container">
<div class="panel-side">
<h3>网吧终端</h3>
<ul id="nyc_graphics">
<li>Loading&hellip;</li>
</ul>
</div>
<div id="sceneDiv"></div>
</div>
</body>
<script>
require([
"esri/config",
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/layers/FeatureLayer",
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) {
"dojo/domReady!"
], function (ESRICONFIG, Map, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
......@@ -141,32 +203,41 @@
var tiledLayer = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
var annomap = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
// 请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
"t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
);
// 使用本地字体文件
ESRICONFIG.fontsUrl = "https://apaas.wodcloud.com/mapstatic/font";
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
id: "tdtBasemap"
});
const map = new Map({
// 初始化地图
var map = new Map({
basemap: tdtBasemap
});
const view = new MapView({
// 初始化地图视图
var view = new MapView({
map: map,
container: "sceneDiv",
spatialReference: {
wkid: 4326
},
zoom: 14,
zoom: 12,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
......@@ -176,47 +247,40 @@
right: 300
}
});
const listNode = document.getElementById("nyc_graphics");
const popupTemplate = {
title: "{NAME}",
// 添加要素地图服务
var listNode = document.getElementById("nyc_graphics");
var popupTemplate = {
title: "{name}",
content: [{
type: "fields",
fieldInfos: [{
fieldName: "ADRESS",
label: "地址",
fieldName: "x",
label: "经度",
format: {
places: 0,
places: 6,
digitSeparator: true
}
},{
fieldName: "SSQY",
label: "所属区域",
}, {
fieldName: "y",
label: "纬度",
format: {
places: 0,
places: 6,
digitSeparator: true
}
}]
}]
};
const featureLayer = new FeatureLayer({
url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/3",
var featureLayer = new FeatureLayer({
url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_STATION/FeatureServer/0",
outFields: ["*"],
popupTemplate: popupTemplate,
});
map.add(featureLayer);
let graphics;
var graphics = null;
//加载完成要素图层
view.whenLayerView(featureLayer).then(function (layerView) {
layerView.watch("updating", function (value) {
if (!value) {
layerView
.queryFeatures({
geometry: view.extent,
......@@ -224,40 +288,34 @@
})
.then(function (results) {
graphics = results.features;
const fragment = document.createDocumentFragment();
var fragment = document.createDocumentFragment();
graphics.forEach(function (result, index) {
const attributes = result.attributes;
const name = attributes.NAME;
const li = document.createElement("li");
var attributes = result.attributes;
var name = attributes.name;
var li = document.createElement("li");
li.classList.add("panel-result");
li.tabIndex = 0;
li.setAttribute("data-result-id", index);
li.textContent = name;
fragment.appendChild(li);
});
listNode.innerHTML = "";
listNode.appendChild(fragment);
})
.catch(function (error) {
console.error("query failed: ", error);
alert("query failed: ", error);
});
}
});
});
// 监听列表点击事件
listNode.addEventListener("click", onListClickHandler);
function onListClickHandler(event) {
const target = event.target;
const resultId = target.getAttribute("data-result-id");
const result =
var target = event.target;
var resultId = target.getAttribute("data-result-id");
var result =
resultId && graphics && graphics[parseInt(resultId, 10)];
if (result) {
console.log(result)
view.goTo(result.geometry).then(function () {
view.popup.open({
features: [result],
......@@ -267,81 +325,5 @@
}
}
});
</script>
<style>
html,
body,
#sceneDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.panel-container {
position: relative;
width: 100%;
height: 100%;
}
.panel-side {
padding: 2px;
box-sizing: border-box;
width: 300px;
height: 100%;
position: absolute;
top: 0;
right: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
overflow: auto;
z-index: 60;
}
.panel-side h3 {
padding: 0 20px;
margin: 20px 0;
}
.panel-side ul {
list-style: none;
margin: 0;
padding: 0;
}
.panel-side li {
list-style: none;
padding: 10px 20px;
}
.panel-result {
cursor: pointer;
margin: 2px 0;
background-color: rgba(0, 0, 0, 0.3);
}
.panel-result:hover,
.panel-result:focus {
color: orange;
background-color: rgba(0, 0, 0, 0.75);
}
</style>
</head>
<body>
<div class="panel-container">
<div class="panel-side">
<h3>网吧终端</h3>
<ul id="nyc_graphics">
<li>Loading&hellip;</li>
</ul>
</div>
<div id="sceneDiv"></div>
</div>
</body>
</script>
</html>
\ No newline at end of file
static/view/demo/page-fz_map.html deleted 100644 → 0
View file @ 6c19c684
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>TDT WMTS Map</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"dojo/domReady!"
], function(Map, Basemap, MapView, WebTileLayer, TileInfo) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429, //解析度，即像素
rows: 256,
cols: 256,
compressionQuality: 0, //压缩像素值
origin: {
x: -180,
y: 90
},
spatialReference: {
wkid: 4326
},
lods: [ //定义平铺方案的细节级别数组
{
level: 1,
levelValue: 1,
resolution: 0.703125,
scale: 295497593.05875003
}, {
level: 2,
levelValue: 2,
resolution: 0.3515625,
scale: 147748796.52937502
}, {
level: 3,
levelValue: 3,
resolution: 0.17578125,
scale: 73874398.264687508
}, {
level: 4,
levelValue: 4,
resolution: 0.087890625,
scale: 36937199.132343754
}, {
level: 5,
levelValue: 5,
resolution: 0.0439453125,
scale: 18468599.566171877
}, {
level: 6,
levelValue: 6,
resolution: 0.02197265625,
scale: 9234299.7830859385
}, {
level: 7,
levelValue: 7,
resolution: 0.010986328125,
scale: 4617149.8915429693
}, {
level: 8,
levelValue: 8,
resolution: 0.0054931640625,
scale: 2308574.9457714846
}, {
level: 9,
levelValue: 9,
resolution: 0.00274658203125,
scale: 1154287.4728857423
}, {
level: 10,
levelValue: 10,
resolution: 0.001373291015625,
scale: 577143.73644287116
}, {
level: 11,
levelValue: 11,
resolution: 0.0006866455078125,
scale: 288571.86822143558
}, {
level: 12,
levelValue: 12,
resolution: 0.00034332275390625,
scale: 144285.93411071779
}, {
level: 13,
levelValue: 13,
resolution: 0.000171661376953125,
scale: 72142.967055358895
}, {
level: 14,
levelValue: 14,
resolution: 8.58306884765625e-005,
scale: 36071.483527679447
}, {
level: 15,
levelValue: 15,
resolution: 4.291534423828125e-005,
scale: 18035.741763839724
}, {
level: 16,
levelValue: 16,
resolution: 2.1457672119140625e-005,
scale: 9017.8708819198619
}, {
level: 17,
levelValue: 17,
resolution: 1.0728836059570313e-005,
scale: 4508.9354409599309
}, {
level: 18,
levelValue: 18,
resolution: 5.3644180297851563e-006,
scale: 2254.4677204799655
}, {
level: 19,
levelValue: 19,
resolution: 2.68220901489257815e-006,
scale: 1127.23386023998275
}, {
level: 20,
levelValue: 2,
resolution: 1.341104507446289075e-006,
scale: 563.616930119991375
}
]
});
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer("http://39.104.61.84:9001/EzServer7/Maps/sltdt/EzMap?Service=getImage&Type=RGB&ZoomOffset=0&Col={col}&Row={row}&Zoom={level}&V=0.3&key=", {
tileInfo: tileInfo
});
// var annomap = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
// subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
// tileInfo: tileInfo
// });
// 作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
});
// 创建地图
var map = new Map({
basemap: tdtBasemap
});
// 创建二维地图
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 12,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
},
center: [106.72, 26.585]
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-geocoding.html
View file @ c52fddf2
......@@ -63,6 +63,7 @@
}
}
</style>
<script src="https://apaas.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
......@@ -79,15 +80,10 @@
"esri/symbols/PictureMarkerSymbol",
"dojo/domReady!"
], function (Map, Graphic, Basemap, Point, MapView, PopupTemplate, WebTileLayer, GraphicsLayer, MapImageLayer, TileInfo, PictureMarkerSymbol) {
var symbol_warning = new PictureMarkerSymbol("/static/images/marker-red.png", 26, 37);
var pupuptemp = new PopupTemplate({
title:"基础信息",
content:"{formatted_address}"
});
var resultsLayer = new GraphicsLayer();
const tileInfo = new TileInfo({
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429, //解析度，即像素
rows: 256,
cols: 256,
......@@ -204,34 +200,34 @@
]
});
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
let tiledLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
var tiledLayer = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
},
});
let annomap = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
var annomap = new WebTileLayer("http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
});
const tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
},
});
const map = new Map({
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap"
});
// 创建地图数据
var map = new Map({
basemap: tdtBasemap
});
map.add(resultsLayer);
const view = new MapView({
// 初始化地图视图
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 14,
constraints: {
lods: tileInfo.lods,
......@@ -239,17 +235,24 @@
},
center: [119.892731, 31.007534] //[119.8087, 30.9700]
});
// 添加搜索小部件到视图
view.ui.add(search, "top-right");
//when
// 地图中添加绘制图层
var symbol_warning = new PictureMarkerSymbol("https://apaas3.wodcloud.com/mapstatic/images/marker-red.png", 26, 37);
var pupuptemp = new PopupTemplate({
title:"基础信息",
content:"{formatted_address}"
});
var resultsLayer = new GraphicsLayer();
map.add(resultsLayer);
// 视图加载后操作
view.when(function () {
document.getElementById("searchBtn").addEventListener("click", doSearch);
});
function doSearch() {
var searchText = document.getElementById("searchText").value;
var key = "d8cea7350e1fdf682d165c698683fd12";
var url = "https://restapi.amap.com/v3/geocode/geo?address="+searchText+"&output=JSON&key=d8cea7350e1fdf682d165c698683fd12";
var key = "966cdd04fb6b722679bc24c5d630f04d";
var url = "https://restapi.amap.com/v3/geocode/geo?address="+searchText+"&output=JSON&key="+key;
$.ajax({
url: url,
type: "GET",
......@@ -280,11 +283,10 @@
target: ptPoi
},
{
duration: 2000,
duration: 500,
easing: "in-out-expo"
}
);
console.log(coord);
});
},
......@@ -296,7 +298,6 @@
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="search">
......@@ -304,5 +305,4 @@
<button id="searchBtn" type="submit">搜索</button>
</div>
</body>
</html>
\ No newline at end of file
static/view/demo/page-heatmap.html
View file @ c52fddf2
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Visualize points with a heatmap - 4.12</title>
<link
rel="stylesheet"
href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css"
/>
<style>
html,
body,
......@@ -16,15 +20,12 @@
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
var map, view;
require([
"esri/config",
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
......@@ -33,9 +34,22 @@
"esri/layers/FeatureLayer",
"esri/widgets/Legend",
"esri/widgets/LayerList",
"esri/renderers/smartMapping/creators/heatmap"
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer, Legend, LayerList,
heatmapRendererCreator) {
"esri/renderers/smartMapping/creators/heatmap",
], function(
ESRICONFIG,
Map,
Basemap,
MapView,
WebTileLayer,
TileInfo,
FeatureLayer,
Legend,
LayerList,
heatmapRendererCreator
) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429, //解析度，即像素
rows: 256,
......@@ -43,236 +57,271 @@
compressionQuality: 0, //压缩像素值
origin: {
x: -180,
y: 90
y: 90,
},
spatialReference: {
wkid: 4326
wkid: 4326,
},
lods: [ //定义平铺方案的细节级别数组
lods: [
//定义平铺方案的细节级别数组
{
level: 1,
levelValue: 1,
resolution: 0.703125,
scale: 295497593.05875003
}, {
scale: 295497593.05875003,
},
{
level: 2,
levelValue: 2,
resolution: 0.3515625,
scale: 147748796.52937502
}, {
scale: 147748796.52937502,
},
{
level: 3,
levelValue: 3,
resolution: 0.17578125,
scale: 73874398.264687508
}, {
scale: 73874398.264687508,
},
{
level: 4,
levelValue: 4,
resolution: 0.087890625,
scale: 36937199.132343754
}, {
scale: 36937199.132343754,
},
{
level: 5,
levelValue: 5,
resolution: 0.0439453125,
scale: 18468599.566171877
}, {
scale: 18468599.566171877,
},
{
level: 6,
levelValue: 6,
resolution: 0.02197265625,
scale: 9234299.7830859385
}, {
scale: 9234299.7830859385,
},
{
level: 7,
levelValue: 7,
resolution: 0.010986328125,
scale: 4617149.8915429693
}, {
scale: 4617149.8915429693,
},
{
level: 8,
levelValue: 8,
resolution: 0.0054931640625,
scale: 2308574.9457714846
}, {
scale: 2308574.9457714846,
},
{
level: 9,
levelValue: 9,
resolution: 0.00274658203125,
scale: 1154287.4728857423
}, {
scale: 1154287.4728857423,
},
{
level: 10,
levelValue: 10,
resolution: 0.001373291015625,
scale: 577143.73644287116
}, {
scale: 577143.73644287116,
},
{
level: 11,
levelValue: 11,
resolution: 0.0006866455078125,
scale: 288571.86822143558
}, {
scale: 288571.86822143558,
},
{
level: 12,
levelValue: 12,
resolution: 0.00034332275390625,
scale: 144285.93411071779
}, {
scale: 144285.93411071779,
},
{
level: 13,
levelValue: 13,
resolution: 0.000171661376953125,
scale: 72142.967055358895
}, {
scale: 72142.967055358895,
},
{
level: 14,
levelValue: 14,
resolution: 8.58306884765625e-005,
scale: 36071.483527679447
}, {
resolution: 8.58306884765625e-5,
scale: 36071.483527679447,
},
{
level: 15,
levelValue: 15,
resolution: 4.291534423828125e-005,
scale: 18035.741763839724
}, {
resolution: 4.291534423828125e-5,
scale: 18035.741763839724,
},
{
level: 16,
levelValue: 16,
resolution: 2.1457672119140625e-005,
scale: 9017.8708819198619
}, {
resolution: 2.1457672119140625e-5,
scale: 9017.8708819198619,
},
{
level: 17,
levelValue: 17,
resolution: 1.0728836059570313e-005,
scale: 4508.9354409599309
}, {
resolution: 1.0728836059570313e-5,
scale: 4508.9354409599309,
},
{
level: 18,
levelValue: 18,
resolution: 5.3644180297851563e-006,
scale: 2254.4677204799655
}, {
resolution: 5.3644180297851563e-6,
scale: 2254.4677204799655,
},
{
level: 19,
levelValue: 19,
resolution: 2.68220901489257815e-006,
scale: 1127.23386023998275
}, {
resolution: 2.68220901489257815e-6,
scale: 1127.23386023998275,
},
{
level: 20,
levelValue: 2,
resolution: 1.341104507446289075e-006,
scale: 563.616930119991375
}
]
resolution: 1.341104507446289075e-6,
scale: 563.616930119991375,
},
],
});
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles",
{
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
});
tileInfo: tileInfo,
spatialReference: {
wkid: 4326,
},
}
);
var annomap = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles",
{
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
});
tileInfo: tileInfo,
spatialReference: {
wkid: 4326,
},
}
);
// 请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn",
"t1.tianditu.gov.cn",
"t2.tianditu.gov.cn",
"t3.tianditu.gov.cn",
"t4.tianditu.gov.cn",
"t5.tianditu.gov.cn",
"t6.tianditu.gov.cn",
"t7.tianditu.gov.cn"
);
// 使用本地字体文件
ESRICONFIG.fontsUrl = "https://apaas.wodcloud.com/mapstatic/font";
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
});
const template = {
title: "{place}",
content: [{
var template = {
title: "{hazard_name}",
content: [
{
type: "fields",
fieldInfos: [{
fieldName: "TYPE",
label: "类型",
format: {
places: 0,
digitSeparator: true
}
fieldInfos: [
{
fieldName: "update_date",
label: "日期"
},
{
fieldName: "ADDRESS",
label: "地址 ",
fieldName: "rvalue",
label: "指数",
format: {
places: 0,
digitSeparator: true
}
digitSeparator: true,
},
},
]
}]
],
},
],
};
//热力图原理，热力图反映热力点对周围的影响程度，在地图上以像素为单位进行展示
//每个像素点上面的影响（权值）=每个热力点赋给它的影响的总和
//每个热力点的影响 = 热力点自身权重（field属性字段确定的，属性值越大，值越大）*距离反比系数（离热力点越远，其上的影响越小，系数越小）
const heatmaplayer = new FeatureLayer({
url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_JTQJ/MapServer/11",
var heatmaplayer = new FeatureLayer({
url:
"https://apaasgis.wodcloud.com/server/rest/services/SX_FXJC_ZDWXY/FeatureServer/0",
outFields: ["*"],
popupTemplate: template,
});
// 创建地图
map = new Map({
var map = new Map({
basemap: tdtBasemap,
layers: [heatmaplayer]
layers: [heatmaplayer],
});
view = new MapView({
var view = new MapView({
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 7,
constraints: {
lods: tileInfo.lods,
snapToZoom: true
snapToZoom: true,
},
center: [106.6587, 26.3644],
map: map
center: [112.729463, 38.061348],
map: map,
});
heatmaplayer.queryFeatures().then(function (results) {
heatmaplayer.queryFeatures().then(function(results) {
var maxcount = 0;
for (var index in results.features) {
if (
maxcount < results.features[index].attributes.total_coun
) {
maxcount = results.features[index].attributes.total_coun;
if (maxcount < results.features[index].attributes.rvalue) {
maxcount = results.features[index].attributes.rvalue;
}
}
console.log(maxcount);
var renderer = {
type: "heatmap",
field: "total_coun", //热力点的权值字段，如果为空则每个热力点自身权重一样
field: "rvalue", //热力点的权值字段，如果为空则每个热力点自身权重一样
blurRadius: 10, //热力点的影响范围单位px，超过此范围的按权值按0计算
//颜色区间，变化范围，ratio = 热力点的权值/maxPixelIntensity
colorStops: [{
colorStops: [
{
ratio: 0,
color: "rgba(0, 0, 255, 0)" //透明度为0，否则地图将会被热力图遮盖
color: "rgba(0, 0, 255, 0)", //透明度为0，否则地图将会被热力图遮盖
},
{
ratio: 0.1,
color: "royalblue"
color: "royalblue",
},
{
ratio: 0.3,
color: "cyan"
color: "cyan",
},
{
ratio: 0.5,
color: "lime"
color: "lime",
},
{
ratio: 0.7,
color: "yellow"
color: "yellow",
},
{
ratio: 1,
color: "red"
}
color: "red",
},
],
//像素点的最高权值，当其权值超过100时，按100计算
maxPixelIntensity: maxcount,
minPixelIntensity: 0
minPixelIntensity: 0,
};
heatmaplayer.renderer = renderer;
});
view.ui.add(
new Legend({
view: view
view: view,
}),
"bottom-left"
);
......@@ -281,17 +330,16 @@
});
view.ui.add(
new LayerList({
view: view
}), "top-right");
view: view,
}),
"top-right"
);
console.log(list);
});
</script>
</head>
</head>
<body>
<body>
<div id="viewDiv"></div>
</body>
</body>
</html>
static/view/demo/page-migrate.html
View file @ c52fddf2
......@@ -4,7 +4,7 @@
<head>
<meta charset="utf-8">
<title>模拟人口迁徙</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<style>
html,
body {
......@@ -26,11 +26,7 @@
height: 100%;
}
</style>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js"></script>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<script src="https://apaas3.wodcloud.com/mapstatic/js/echarts.min.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
var __DEV__ = false;
......@@ -228,32 +224,193 @@
};
require([
"esri/config",
"esri/Map",
"esri/Basemap",
"https://apaas.wodcloud.com/mapsamples/static/js/4EchartsLayer.js",
"https://apaas3.wodcloud.com/mapstatic/js/4EchartsLayer.js",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"dojo/domReady!"
], function (
Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo
ESRICONFIG, Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo
) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
let tiledlayer = new WebTileLayer({
urlTemplate:
"http://{subDomain}.tianditu.gov.cn/vec_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=vec&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
let annolayer = new WebTileLayer({
urlTemplate:
"http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
var tileInfo = new TileInfo({
dpi: 90.71428571427429, //解析度，即像素
rows: 256,
cols: 256,
compressionQuality: 0, //压缩像素值
origin: {
x: -180,
y: 90,
},
spatialReference: {
wkid: 4326,
},
lods: [
//定义平铺方案的细节级别数组
{
level: 1,
levelValue: 1,
resolution: 0.703125,
scale: 295497593.05875003,
},
{
level: 2,
levelValue: 2,
resolution: 0.3515625,
scale: 147748796.52937502,
},
{
level: 3,
levelValue: 3,
resolution: 0.17578125,
scale: 73874398.264687508,
},
{
level: 4,
levelValue: 4,
resolution: 0.087890625,
scale: 36937199.132343754,
},
{
level: 5,
levelValue: 5,
resolution: 0.0439453125,
scale: 18468599.566171877,
},
{
level: 6,
levelValue: 6,
resolution: 0.02197265625,
scale: 9234299.7830859385,
},
{
level: 7,
levelValue: 7,
resolution: 0.010986328125,
scale: 4617149.8915429693,
},
{
level: 8,
levelValue: 8,
resolution: 0.0054931640625,
scale: 2308574.9457714846,
},
{
level: 9,
levelValue: 9,
resolution: 0.00274658203125,
scale: 1154287.4728857423,
},
{
level: 10,
levelValue: 10,
resolution: 0.001373291015625,
scale: 577143.73644287116,
},
{
level: 11,
levelValue: 11,
resolution: 0.0006866455078125,
scale: 288571.86822143558,
},
{
level: 12,
levelValue: 12,
resolution: 0.00034332275390625,
scale: 144285.93411071779,
},
{
level: 13,
levelValue: 13,
resolution: 0.000171661376953125,
scale: 72142.967055358895,
},
{
level: 14,
levelValue: 14,
resolution: 8.58306884765625e-5,
scale: 36071.483527679447,
},
{
level: 15,
levelValue: 15,
resolution: 4.291534423828125e-5,
scale: 18035.741763839724,
},
{
level: 16,
levelValue: 16,
resolution: 2.1457672119140625e-5,
scale: 9017.8708819198619,
},
{
level: 17,
levelValue: 17,
resolution: 1.0728836059570313e-5,
scale: 4508.9354409599309,
},
{
level: 18,
levelValue: 18,
resolution: 5.3644180297851563e-6,
scale: 2254.4677204799655,
},
{
level: 19,
levelValue: 19,
resolution: 2.68220901489257815e-6,
scale: 1127.23386023998275,
},
{
level: 20,
levelValue: 2,
resolution: 1.341104507446289075e-6,
scale: 563.616930119991375,
},
],
});
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles",
{
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo,
spatialReference: {
wkid: 4326,
},
}
);
var annomap = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles",
{
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo,
spatialReference: {
wkid: 4326,
},
}
);
// 请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn",
"t1.tianditu.gov.cn",
"t2.tianditu.gov.cn",
"t3.tianditu.gov.cn",
"t4.tianditu.gov.cn",
"t5.tianditu.gov.cn",
"t6.tianditu.gov.cn",
"t7.tianditu.gov.cn"
);
// 使用本地字体文件
ESRICONFIG.fontsUrl = "https://apaas.wodcloud.com/mapstatic/font";
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledlayer, annolayer],
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
});
......@@ -577,7 +734,6 @@
},
series: series
};
console.log(series);
option.series.push({
name: ' Top10',
type: 'effectScatter',
......@@ -588,13 +744,6 @@
brushType: 'fill',
scale: 4
},
// label: {
// normal: {
// show: true,
// position: 'right',
// formatter: '{b}'
// }
// },
symbolSize: 10,
itemStyle: {
normal: {
......@@ -604,16 +753,6 @@
data: []
})
var chart = new echartsLayer(view, echarts, option);
// view.on('click', event => {
// let pt = view.toMap(event)
// // console.log(pt);
// // option.series[]
// option.series[option.series.length - 1].data = [{ value: [pt.longitude, pt.latitude] }]
// console.log(option.series);
// chart.setChartOption(option)
// console.log(chart);
// })
view.on('pointer-move', event => {
let pt = view.toMap(event)
option.series[option.series.length - 1].data = [{ value: [pt.longitude, pt.latitude] }]
......
static/view/demo/page-migrate2.html
View file @ c52fddf2
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>模拟人口迁徙</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<style>
html,
body {
......@@ -24,13 +24,8 @@
width: 50%;
height: 100%;
}
</style>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/echarts.min.js"></script>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css">
<script src="https://apaas3.wodcloud.com/mapstatic/js/echarts.min.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
var __DEV__ = false;
......@@ -228,31 +223,193 @@
};
var map,view,scatterData,lineData;
require([
"esri/config",
"esri/Map",
"esri/Basemap",
"https://apaas.wodcloud.com/mapsamples/static/js/4EchartsLayer.js",
"https://apaas3.wodcloud.com/mapstatic/js/4EchartsLayer.js",
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"dojo/domReady!"
], function (
Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo
ESRICONFIG, Map, Basemap, echartsLayer, MapView, WebTileLayer, TileInfo
) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
let tiledlayer = new WebTileLayer({
urlTemplate:
"http://{subDomain}.tianditu.gov.cn/vec_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=vec&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
});
let annolayer = new WebTileLayer({
urlTemplate:
"http://{subDomain}.tianditu.gov.cn/cva_w/wmts?tk=fbaab7dca87a6ebf0bd1071ad5d837c0&SERVICE=WMTS&VERSION=1.0.0&REQUEST=GetTile&FORMAT=tiles&TILEMATRIXSET=w&STYLE=default&LAYER=cva&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}",
subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"]
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429, //解析度，即像素
rows: 256,
cols: 256,
compressionQuality: 0, //压缩像素值
origin: {
x: -180,
y: 90,
},
spatialReference: {
wkid: 4326,
},
lods: [
//定义平铺方案的细节级别数组
{
level: 1,
levelValue: 1,
resolution: 0.703125,
scale: 295497593.05875003,
},
{
level: 2,
levelValue: 2,
resolution: 0.3515625,
scale: 147748796.52937502,
},
{
level: 3,
levelValue: 3,
resolution: 0.17578125,
scale: 73874398.264687508,
},
{
level: 4,
levelValue: 4,
resolution: 0.087890625,
scale: 36937199.132343754,
},
{
level: 5,
levelValue: 5,
resolution: 0.0439453125,
scale: 18468599.566171877,
},
{
level: 6,
levelValue: 6,
resolution: 0.02197265625,
scale: 9234299.7830859385,
},
{
level: 7,
levelValue: 7,
resolution: 0.010986328125,
scale: 4617149.8915429693,
},
{
level: 8,
levelValue: 8,
resolution: 0.0054931640625,
scale: 2308574.9457714846,
},
{
level: 9,
levelValue: 9,
resolution: 0.00274658203125,
scale: 1154287.4728857423,
},
{
level: 10,
levelValue: 10,
resolution: 0.001373291015625,
scale: 577143.73644287116,
},
{
level: 11,
levelValue: 11,
resolution: 0.0006866455078125,
scale: 288571.86822143558,
},
{
level: 12,
levelValue: 12,
resolution: 0.00034332275390625,
scale: 144285.93411071779,
},
{
level: 13,
levelValue: 13,
resolution: 0.000171661376953125,
scale: 72142.967055358895,
},
{
level: 14,
levelValue: 14,
resolution: 8.58306884765625e-5,
scale: 36071.483527679447,
},
{
level: 15,
levelValue: 15,
resolution: 4.291534423828125e-5,
scale: 18035.741763839724,
},
{
level: 16,
levelValue: 16,
resolution: 2.1457672119140625e-5,
scale: 9017.8708819198619,
},
{
level: 17,
levelValue: 17,
resolution: 1.0728836059570313e-5,
scale: 4508.9354409599309,
},
{
level: 18,
levelValue: 18,
resolution: 5.3644180297851563e-6,
scale: 2254.4677204799655,
},
{
level: 19,
levelValue: 19,
resolution: 2.68220901489257815e-6,
scale: 1127.23386023998275,
},
{
level: 20,
levelValue: 2,
resolution: 1.341104507446289075e-6,
scale: 563.616930119991375,
},
],
});
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles",
{
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo,
spatialReference: {
wkid: 4326,
},
}
);
var annomap = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles",
{
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo,
spatialReference: {
wkid: 4326,
},
}
);
// 请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn",
"t1.tianditu.gov.cn",
"t2.tianditu.gov.cn",
"t3.tianditu.gov.cn",
"t4.tianditu.gov.cn",
"t5.tianditu.gov.cn",
"t6.tianditu.gov.cn",
"t7.tianditu.gov.cn"
);
// 使用本地字体文件
ESRICONFIG.fontsUrl = "https://apaas.wodcloud.com/mapstatic/font";
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledlayer, annolayer],
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
});
......
static/view/demo/page-movinglayer.html
View file @ c52fddf2
......@@ -18,7 +18,7 @@
</style>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas3.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
<script>
let map,
......@@ -36,6 +36,7 @@
polylineSymbol,
graphics;
require([
"esri/config",
"esri/Map",
"esri/Basemap",
"esri/TimeExtent",
......@@ -55,7 +56,9 @@
"esri/symbols/PictureMarkerSymbol",
"esri/core/watchUtils",
"dojo/domReady!"
], function (Map,
], function (
ESRICONFIG,
Map,
Basemap,
TimeExtent,
TimeInfo,
......@@ -83,10 +86,10 @@
compressionQuality: 0, //压缩像素值
origin: {
x: -180,
y: 90
y: 90,
},
spatialReference: {
wkid: 4326
wkid: 4326,
},
lods: [
//定义平铺方案的细节级别数组
......@@ -94,150 +97,163 @@
level: 1,
levelValue: 1,
resolution: 0.703125,
scale: 295497593.05875003
scale: 295497593.05875003,
},
{
level: 2,
levelValue: 2,
resolution: 0.3515625,
scale: 147748796.52937502
scale: 147748796.52937502,
},
{
level: 3,
levelValue: 3,
resolution: 0.17578125,
scale: 73874398.264687508
scale: 73874398.264687508,
},
{
level: 4,
levelValue: 4,
resolution: 0.087890625,
scale: 36937199.132343754
scale: 36937199.132343754,
},
{
level: 5,
levelValue: 5,
resolution: 0.0439453125,
scale: 18468599.566171877
scale: 18468599.566171877,
},
{
level: 6,
levelValue: 6,
resolution: 0.02197265625,
scale: 9234299.7830859385
scale: 9234299.7830859385,
},
{
level: 7,
levelValue: 7,
resolution: 0.010986328125,
scale: 4617149.8915429693
scale: 4617149.8915429693,
},
{
level: 8,
levelValue: 8,
resolution: 0.0054931640625,
scale: 2308574.9457714846
scale: 2308574.9457714846,
},
{
level: 9,
levelValue: 9,
resolution: 0.00274658203125,
scale: 1154287.4728857423
scale: 1154287.4728857423,
},
{
level: 10,
levelValue: 10,
resolution: 0.001373291015625,
scale: 577143.73644287116
scale: 577143.73644287116,
},
{
level: 11,
levelValue: 11,
resolution: 0.0006866455078125,
scale: 288571.86822143558
scale: 288571.86822143558,
},
{
level: 12,
levelValue: 12,
resolution: 0.00034332275390625,
scale: 144285.93411071779
scale: 144285.93411071779,
},
{
level: 13,
levelValue: 13,
resolution: 0.000171661376953125,
scale: 72142.967055358895
scale: 72142.967055358895,
},
{
level: 14,
levelValue: 14,
resolution: 8.58306884765625e-5,
scale: 36071.483527679447
scale: 36071.483527679447,
},
{
level: 15,
levelValue: 15,
resolution: 4.291534423828125e-5,
scale: 18035.741763839724
scale: 18035.741763839724,
},
{
level: 16,
levelValue: 16,
resolution: 2.1457672119140625e-5,
scale: 9017.8708819198619
scale: 9017.8708819198619,
},
{
level: 17,
levelValue: 17,
resolution: 1.0728836059570313e-5,
scale: 4508.9354409599309
scale: 4508.9354409599309,
},
{
level: 18,
levelValue: 18,
resolution: 5.3644180297851563e-6,
scale: 2254.4677204799655
scale: 2254.4677204799655,
},
{
level: 19,
levelValue: 19,
resolution: 2.68220901489257815e-6,
scale: 1127.23386023998275
scale: 1127.23386023998275,
},
{
level: 20,
levelValue: 2,
resolution: 1.341104507446289075e-6,
scale: 563.616930119991375
}
]
scale: 563.616930119991375,
},
],
});
// 在加载经纬度地图的时候我们需要使用 {subDomain}, {col}, {row}, {level}分别替换服务器列表，瓦片列编号，瓦片行编号，当前缩放(显示)级别
var tiledLayer = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles",
{
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
wkid: 4326,
},
}
);
var annomap = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles",
{
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
wkid: 4326,
},
}
);
// 请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn",
"t1.tianditu.gov.cn",
"t2.tianditu.gov.cn",
"t3.tianditu.gov.cn",
"t4.tianditu.gov.cn",
"t5.tianditu.gov.cn",
"t6.tianditu.gov.cn",
"t7.tianditu.gov.cn"
);
// 使用本地字体文件
ESRICONFIG.fontsUrl = "https://apaas.wodcloud.com/mapstatic/font";
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
}
});
map = new Map({
basemap: tdtBasemap
......@@ -294,14 +310,6 @@
});
symbol = new PictureMarkerSymbol("https://apaas.wodcloud.com/minemapapi/image/jtqj3/ic_wxhuoche.png",
15, 15);
// var symbol = {
// type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
// color: [0, 0, 139],
// outline: {
// color: [255, 255, 255],
// width: 1.5
// }
// };
var attr = properties;
var popupTemplate = {
title: "两客一危车辆",
......
static/view/demo/page-multilayer3search.html
View file @ c52fddf2
......@@ -205,12 +205,18 @@
var basemap = WebTiledLayer(
'http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles', {
subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
var annomap = WebTiledLayer(
'http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles', {
subDomains: ['t0', 't1', 't2', 't3', 't4'],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
var queryLayer = new ArcGISDynamicMapServiceLayer(
"https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer");
......@@ -227,9 +233,9 @@
initToolbar();
//新建查询任务与查询对象
var qtParcel1 = new QueryTask(
"https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/1");
"https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/FeatureServer/1");
var qParcel1 = new Query();
var qtArea = new QueryTask("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/10");
var qtArea = new QueryTask("https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/FeatureServer/10");
var qArea = new Query();
//设置查询是否返回几何对象
qParcel1.returnGeometry = qArea.returnGeometry = true;
......@@ -281,6 +287,7 @@
console.log("query failed.");
}
}
console.log(results)
//两次查询的结果
parcel1 = results[0].features;
area = results[1].features;
......
static/view/demo/page-multilayersandfeilds_3search.html
View file @ c52fddf2
......@@ -173,12 +173,18 @@
var basemap = WebTiledLayer(
'http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles', {
subDomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
var annomap = WebTiledLayer(
'http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles', {
subDomains: ['t0', 't1', 't2', 't3', 't4'],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
var queryLayer = new ArcGISDynamicMapServiceLayer(
"https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer");
......
static/view/demo/page-pointshine_map.html
View file @ c52fddf2
......@@ -5,6 +5,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>Point Shine Map</title>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
<style>
html,
body,
......@@ -50,13 +51,13 @@
}
</style>
<link rel="stylesheet" href="https://apaas.wodcloud.com/api_4.x/esri/css/main.css" />
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
$(function () {
require([
"esri/config",
"esri/Map",
"esri/WebScene",
"esri/geometry/Point",
......@@ -64,8 +65,9 @@
"esri/views/MapView",
"esri/layers/WebTileLayer",
"esri/layers/support/TileInfo",
"esri/layers/FeatureLayer"
], function (Map, WebScene, Point, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) {
"esri/layers/FeatureLayer",
"dojo/domReady!"
], function (ESRICONFIG, Map, WebScene, Point, Basemap, MapView, WebTileLayer, TileInfo, FeatureLayer) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
......@@ -189,23 +191,32 @@
var tiledLayer = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
var annomap = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
// 请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
"t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
);
// 使用本地字体文件
ESRICONFIG.fontsUrl = "https://apaas3.wodcloud.com/mapstatic/font";
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
id: "tdtBasemap"
});
var wglayer = new FeatureLayer({
url: "https://apaasgis.wodcloud.com/server/rest/services/GZ_YYLZTT/MapServer/9"
});
......@@ -246,16 +257,14 @@
}
});
var highlightSelect, highlightHover;
var hoverPromise;
var highlightSelect, highlightHover,hoverPromise;
wglayer.when(function () {
var stationLayer = wglayer;
view.whenLayerView(stationLayer).then(function (layerView) {
var queryStations = stationLayer.createQuery();
var buttons = document.querySelectorAll("button");
for (var i = 0, button = null;
(button = buttons[i]); i++) {
for (var i = 0, button = null;(button = buttons[i]); i++) {
button.addEventListener("click", onClick);
button.addEventListener("mouseover", onMouseOver);
button.addEventListener("mouseout", onMouseOut);
......@@ -264,8 +273,6 @@
function onClick(event) {
queryStations.where = "WGMC LIKE'%" + event.target.innerText + "%'";
stationLayer.queryFeatures(queryStations).then(function (result) {
console.log(result);
if (highlightSelect) {
highlightSelect.remove();
}
......@@ -295,7 +302,6 @@
});
});
</script>
</head>
......
static/view/demo/page-simplesearch.html
View file @ c52fddf2
......@@ -40,6 +40,7 @@
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script>
require([
"esri/config",
"esri/Map",
"esri/Basemap",
"esri/views/MapView",
......@@ -50,7 +51,10 @@
"esri/tasks/support/Query",
"esri/symbols/SimpleMarkerSymbol",
"esri/geometry/Point"
], function (Map, Basemap, MapView, WebTileLayer, TileInfo, GraphicsLayer, QueryTask, Query, SimpleMarkerSymbol, Point) {
], function (ESRICONFIG, Map, Basemap, MapView, WebTileLayer, TileInfo, GraphicsLayer, QueryTask, Query, SimpleMarkerSymbol, Point) {
// 通过瓦片形式加载天地图的
// 天地图根据投影分为两种：墨卡托和经纬度
// 设定瓦片信息，天地图经纬度地图的切片信息全部使用该信息设定
var tileInfo = new TileInfo({
dpi: 90.71428571427429, //解析度，即像素
rows: 256,
......@@ -171,21 +175,31 @@
var tiledLayer = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
var annomap = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
// 请求天地图服务跨域的设置
ESRICONFIG.request.corsEnabledServers.push(
"t0.tianditu.gov.cn", "t1.tianditu.gov.cn", "t2.tianditu.gov.cn", "t3.tianditu.gov.cn",
"t4.tianditu.gov.cn", "t5.tianditu.gov.cn", "t6.tianditu.gov.cn", "t7.tianditu.gov.cn"
);
// 使用本地字体文件
ESRICONFIG.fontsUrl = "https://apaas.wodcloud.com/mapstatic/font";
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
id: "tdtBasemap"
});
var peaksUrl =
"https://apaasgis.wodcloud.com/server/rest/services/GZ_LYJQZTT/MapServer/2";
......@@ -221,9 +235,6 @@
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
center: [107, 27],
zoom: 9,
constraints: {
......
static/view/demo/page-sliderZoom.html
View file @ c52fddf2
......@@ -28,10 +28,9 @@
justify-content: center;
align-items: center;
}
</style>
<script src="https://apaas.wodcloud.com/mapstatic/js/jquery-3.3.1.min.js"></script>
<script src="https://apaas.wodcloud.com/api_4.x/init.js"></script>
<script src="https://apaas.wodcloud.com/mapsamples/static/js/jquery-3.3.1.min.js"></script>
<script>
require([
......@@ -165,21 +164,24 @@
var tiledLayer = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/vec_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=vec&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
var annomap = new WebTileLayer(
"http://{subDomain}.tianditu.gov.cn/cva_c/wmts?tk=61ea8586e4f4c5c8bfa980df475f1bdf&service=wmts&request=GetTile&version=1.0.0&LAYER=cva&tileMatrixSet=c&TileMatrix={level}&TileRow={row}&TileCol={col}&style=default&format=tiles", {
subDomains: ["t1", "t2", "t3", "t4", "t5", "t6", "t7"],
tileInfo: tileInfo
tileInfo: tileInfo,
spatialReference: {
wkid: 4326
}
});
// 天地图经纬度地图及注记作为底图
var tdtBasemap = new Basemap({
baseLayers: [tiledLayer, annomap],
title: "TDT Basemap",
id: "tdtBasemap",
spatialReference: {
wkid: 4326
},
id: "tdtBasemap"
});
// 创建地图
var map = new Map({
......@@ -189,9 +191,6 @@
var view = new MapView({
map: map,
container: "viewDiv",
spatialReference: {
wkid: 4326
},
zoom: 12,
constraints: {
lods: tileInfo.lods,
......@@ -201,10 +200,10 @@
},
center: [106.72, 26.585]
});
// 滑块控制地图级别
var zoomSlider = document.getElementById("zoom");
var showZoom = document.getElementById("zoom-value");
view.when(function () {
console.log(view);
zoomSlider.min = view.constraints.minZoom;
zoomSlider.max = view.constraints.maxZoom;
zoomSlider.value = showZoom.innerText = view.zoom;
......
static/view/demo/page-video_web_map.html
View file @ c52fddf2
......@@ -33,9 +33,11 @@
"esri/WebMap"
], function(esriConfig, MapView, WebMap) {
esriConfig.portalUrl = "https://apaasgis.wodcloud.com/portal";
// 使用本地字体文件
esriConfig.fontsUrl = "https://apaas.wodcloud.com/mapstatic/font";
var webmap = new WebMap({
portalItem: {
id: "4731db60e99b47c3aed258d488963986"
id: "b4f4797eb32342c5b679082bfbbef553"
}
});
......@@ -67,13 +69,13 @@
});
});
function setContentInfo(code) {
var videoDomain = "https://dl.wodcloud.com/video/{0}.mp4";
var videoDomain = "https://apaas3.wodcloud.com/mapstatic/video/{0}.mp4";
var videoCode = code;
var videoSrc = undefined;
if (videoCode) {
videoSrc = videoDomain.replace("{0}", videoCode);
}
return "<iframe id='cameraiframe' src='../../iframe/videoplay4test.html?camlist=" + videoCode + "&videosrc=" + videoSrc +
return "<iframe id='cameraiframe' src='https://apaas3.wodcloud.com/mapstatic/iframe/videoplay4test.html?camlist=" + videoCode + "&videosrc=" + videoSrc +
"&width=476&height=314' name='cameraiframe' frameborder='0' style='width: 476px;height: 314px; overflow: hidden; border:0px;'></iframe>";
};
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment