Skip to content

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

Merge branch 'ldx' into dev

parents 00300dc2 c6ab7e4e
Hide whitespace changes
Inline Side-by-side
Showing with 455 additions and 69 deletions
src/assets/css/index.css
View file @ 7ff6c47e
......@@ -464,4 +464,14 @@ width: 620px!important;
}
.bread_crumb .is-link {
color: #626de9 !important;
}
.bread_crumb1 {
margin: 20px;
font-size: 14px;
}
.bread_crumb1 .el-breadcrumb__inner {
color: #242c43 !important;
}
.bread_crumb1 .is-link {
color: #898d9e !important;
}
\ No newline at end of file
src/components/commodity-card.vue 0 → 100644
View file @ 7ff6c47e
<template>
<div class="com_card">
<img
src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
class="com_card_img"
/>
<div class="com_card_msg">
<div class="com_card_msg_name">ApaasApaas</div>
<div class="com_card_msg_version">v1.876</div>
<div class="com_card_msg_other">
<div class="com_card_msg_time">2019-12-04</div>
<div class="com_card_msg_num">部署次数：44444</div>
</div>
</div>
<div class="com_card_btn">
<el-button size="small">加入购物车</el-button>
<el-button size="small">查看详情</el-button>
</div>
</div>
</template>
<script>
export default {
components: {},
props: {
url: { type: String, default: "" },
cellData: { type: Object, default: {} }
},
data: () => ({}),
computed: {},
watch: {},
methods: {
goUrl(parame) {
if (this.url != "") {
this.$router.push(this.url + parame);
}
}
},
mounted() {}
};
</script>
<style scoped>
.com_card {
width: 200px;
height: 300px;
padding: 10px;
background-color: #ddd;
margin: 10px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.com_card_img {
width: 160px;
height: 160px;
}
.com_card_msg {
width: 180px;
text-align: center;
}
.com_card_msg_name {
font-size: 24px;
margin-bottom: 10px;
}
.com_card_msg_version {
font-size: 14px;
}
.com_card_msg_other {
width: 100%;
display: flex;
justify-content: space-between;
font-size: 12px;
}
.com_card_msg_time {
}
.com_card_msg_num {
}
.com_card_btn {
margin-top: 10px;
display: flex;
justify-content: space-between;
}
</style>
\ No newline at end of file
src/components/commodity-cell.vue
View file @ 7ff6c47e
......@@ -9,6 +9,7 @@
<div class="com_cell_message">
<div class="com_cell_msg_title">
{{ cellData.title }}
<span v-if="cellData.mapService" class="tags map_service">mapService</span>
<span v-if="cellData.state == 1" class="tags shared">共享</span>
<span v-else-if="cellData.state == 2" class="tags restricted">受限</span>
<span v-else class="tags sensitive">敏感</span>
......@@ -48,7 +49,7 @@
<span class="com_cell_right_time_tit">本月获取次数：</span>
<span class="com_cell_right_time">{{ cellData.numberOfMonth }}次</span>
</div>
<el-button class="com_cell_right_btn" @click="goUrl('ssurl')">查看详情</el-button>
<el-button class="com_cell_right_btn" @click="goUrl(cellData.id)">查看详情</el-button>
</div>
</div>
</template>
......@@ -145,13 +146,17 @@ export default {
.tags {
display: inline-block;
margin-left: 10px;
padding: 1px 8px;
padding: 1px 8px 2px;
font-size: 12px;
font-weight: 500;
border-radius: 15px;
position: relative;
top: -2px;
}
.map_service {
background-color: #626DE9;
color: #fff;
}
.shared {
background-color: #e7fdfc;
border: solid 1px #8bd6d0;
......
src/components/commodity-list.vue
View file @ 7ff6c47e
<template>
<div>
<commodity-cell v-for="item in datas" :cellData="item" :url="url" :key="item.id"></commodity-cell>
<div v-if="name=='应用商店'" ref="commodityList" class="commodity_card">
<div ref="commodityCardIn" class="commodity_card_list">
<commodity-card v-for="item in datas" :cellData="item" :url="url" :key="item.id"></commodity-card>
<commodity-card v-for="item in datas" :cellData="item" :url="url" :key="'s' + item.id"></commodity-card>
</div>
</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">共 {{ pagination.total }} 个条目</div>
......@@ -52,9 +60,11 @@
<script>
import CommodityCell from "@/components/commodity-cell.vue";
import CommodityCard from "@/components/commodity-card.vue";
export default {
components: {
"commodity-cell": CommodityCell
"commodity-cell": CommodityCell,
"commodity-card": CommodityCard
},
props: {
datas: { type: Array, default: [] },
......@@ -66,7 +76,8 @@ export default {
pageSizeShow: {
type: Boolean,
default: false
}
},
name: { type: String, default: "" }
},
data: () => ({
pagination: {
......@@ -102,10 +113,24 @@ export default {
},
getTotal() {
this.pagination.total = this.datas.length;
},
pageResize() {
let listWidth = this.$refs.commodityList.clientWidth;
let rowCardNum = Math.floor(listWidth / 220);
this.$refs.commodityCardIn.style.width = rowCardNum * 220 + "px";
this.$refs.commodityCardIn.style.marginLeft =
(listWidth - rowCardNum * 220) / 2 + "px";
console.log(this.$refs.commodityCardIn);
}
},
mounted() {
this.getTotal();
if (this.name == "应用商店") {
this.pageResize();
window.onresize = () => {
this.pageResize();
};
}
}
};
</script>
......@@ -138,6 +163,12 @@ export default {
justify-content: flex-end;
align-items: center;
}
.commodity_card {
}
.commodity_card_list {
display: flex;
flex-wrap: wrap;
}
</style>
<style>
.com_page_control .el-button {
......
src/components/service_list.vue
View file @ 7ff6c47e
<template>
<!--
name: page type
url: detail page url
urlList: get list data from this 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_crumb bread_left">
<el-breadcrumb-item :to="{ path: '/fwcs' }">服务超市</el-breadcrumb-item>
<el-breadcrumb-item>数据服务</el-breadcrumb-item>
<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>
<div class="input_right">
<div v-if="urlList" class="input_right">
<el-input
v-model="search"
prefix-icon="el-icon-search"
......@@ -14,8 +22,9 @@
></el-input>
</div>
</div>
<block-radius>
<div class="classification">
<block-radius v-if="urlList">
<!-- filter -->
<div v-if="urlFilter" class="classification">
<div v-for="(item, index) in filterLists" :key="'cd' + index" class="classification_line">
<div class="classification_line_title">{{ item.name }}：</div>
<div
......@@ -34,6 +43,7 @@
<span
:class="activeOptions[index] == items.id ? 'classification_act':''"
>{{ items.name }}</span>
<!-- if item have children, we will use an arrow to prompt -->
<i
v-if="items.children && openChildren[index].state == true && openChildren[index].index == indexs"
class="el-icon-caret-top"
......@@ -46,6 +56,7 @@
</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"
......@@ -57,6 +68,7 @@
<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
......@@ -76,14 +88,25 @@
</div>
</div>
<div class="gray_line"></div>
<el-button
v-for="(item, index) in buttonFilter"
:key="item.name"
size="small"
:class="item.state == false ? 'button_filter':'button_filter_act'"
@click="clickButtonFilter(index)"
>{{ item.name }}</el-button>
<commodity-list :datas="lists" url="urlssss" :paginationShow="true" :pageSizeShow="true" @refresh="getNewList()"></commodity-list>
<!-- filter button -->
<div>
<el-button
v-for="(item, index) in buttonFilter"
:key="item.name"
size="small"
:class="item.state == false ? 'button_filter':'button_filter_act'"
@click="clickButtonFilter(index)"
>{{ item.name }}</el-button>
</div>
<!-- the list -->
<commodity-list
:datas="lists"
:url="url"
:name="name"
:paginationShow="true"
:pageSizeShow="true"
@refresh="getNewList"
></commodity-list>
</block-radius>
</div>
</template>
......@@ -104,7 +127,9 @@ export default {
urlFilter: {
type: String,
default: ""
}
},
url: { type: String, default: "" },
name: { type: String, default: "" }
},
data: () => ({
search: "",
......@@ -146,7 +171,8 @@ export default {
serviceType: "数据服务 专题数据服务 企业专题数据服务",
updateTime: "2020-03-12 18:31:12",
numberOfMonth: "2698755",
rate: 3
rate: 3,
mapService: 1
},
{
id: 1,
......@@ -330,15 +356,14 @@ export default {
dataField: "",
dataSourceOrganization: "",
page: 1,
limit: 10,
limit: 10
}),
mounted() {
this.getFwcsList();
this.getFwcsFilter();
this.setTout();
this.getShopList();
this.getShopFilter();
},
methods: {
getFwcsList() {
getShopList() {
// dataServiceType: "",
// dataField: "",
// dataSourceOrganization: ""
......@@ -356,25 +381,25 @@ export default {
this.error = true;
});
},
getFwcsFilter() {
let url = `${this.urlFilter}`;
this.$http
.get(url)
.then(response => {
if (response.data.message == "success") {
this.filterList = response.data.data;
} else {
console.log(response.data.message);
}
})
.catch(function(response) {
this.error = true;
});
},
setTout() {
getShopFilter() {
setTimeout(() => {
this.judgeHeight();
}, 500);
if (this.urlFilter) {
this.judgeHeight();
}
}, 0);
// let url = `${this.urlFilter}`;
// this.$http
// .get(url)
// .then(response => {
// if (response.data.message == "success") {
// this.filterList = response.data.data;
// } else {
// console.log(response.data.message);
// }
// })
// .catch(function(response) {
// this.error = true;
// });
},
judgeHeight() {
let list = this.filterLists;
......@@ -397,7 +422,6 @@ export default {
this.$set(this.openList, index, "up");
}
// 这里不能像上面那样整体更新，因为啥我也不知道，我太菜
console.log(index);
},
clickItem(index, indexs, items) {
this.activeOptions[index] = items.id;
......@@ -426,7 +450,7 @@ export default {
},
clickButtonFilter(index) {
this.buttonFilter[index].state = !this.buttonFilter[index].state;
this.getFwcsList();
this.getShopList();
},
clickChildren(id, index) {
this.$set(this.activeOptions, index, id);
......@@ -446,19 +470,19 @@ export default {
default:
break;
}
this.getFwcsList();
this.getShopList();
},
// search debonce 500ms
searchVal() {
if (this.times !== null) clearTimeout(this.times);
this.times = setTimeout(() => {
this.getFwcsList();
this.getShopList();
}, 500);
},
getNewList(val) {
this.page = val.page;
this.limit = val.rowsPerPage;
this.getFwcsList();
this.page = val.page;
this.limit = val.rowsPerPage;
this.getShopList();
}
}
};
......@@ -472,7 +496,7 @@ export default {
width: 300px;
}
.input_right {
width: 300px;
width: 360px;
}
.gray_line {
width: 100%;
......@@ -492,6 +516,7 @@ export default {
width: 130px;
padding: 15px 0;
text-align: right;
color: #8890a7;
}
.classification_line_items {
width: calc(100% - 100px);
......@@ -553,6 +578,7 @@ export default {
.button_filter {
background-color: #e6eefe;
color: #626de9;
font-size: 10px;
}
.button_filter_act {
background-color: #515fe7;
......@@ -570,4 +596,10 @@ export default {
.el-input__suffix {
left: 10px;
}
.input_right .el-input--prefix .el-input__inner {
outline: none;
}
.input_right .el-input__inner:focus-within {
border: 1px solid #626DE9;
}
</style>
\ No newline at end of file
src/components/service_shop_menu.vue
View file @ 7ff6c47e
<template>
<div class="service_shop_menu">
<ul class="service_shop_menu_list">
<li v-for="(item, index) in menuList" :key="index" @click="active(item.id)">
<li v-for="(item, index) in menuList" :key="index" @click="active(item.router)">
<img
v-if="item.id == actives"
v-if="item.router == actives"
:src="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.id == actives ? 'menu_item_active':'menu_item'">{{ item.label }}</span>
<span :class="item.router == actives ? 'menu_item_active':'menu_item'">{{ item.label }}</span>
</li>
</ul>
</div>
......@@ -19,47 +19,54 @@ export default {
props: {},
data() {
return {
actives: 0,
actives: "",
menuList: [
{
id: 0,
label: "数据服务",
router: "/shop/data_service_list",
active: "tool_ic_shujufw_sel",
default: "tool_ic_shujufw"
},
{
id: 1,
label: "时空服务",
router: "/shop/space_time_service_list",
active: "tool_ic_shikongfw_sel",
default: "tool_ic_shikongfw"
},
{
id: 2,
label: "视频服务",
router: "/shop/video_service_list",
active: "tool_ic_shipinfw_sel",
default: "tool_ic_shipinfw"
},
{
id: 3,
label: "感知服务",
router: "/shop/perception_service_list",
active: "tool_ic_ganzhifw_sel",
default: "tool_ic_ganzhifw"
},
{
id: 4,
label: "综合应用服务",
router: "/shop/comprehensive_app_list",
active: "tool_ic_zongheyyfw_sel",
default: "tool_ic_zongheyyfw"
},
{
id: 5,
label: "云资源服务",
router: "/shop/cloud",
active: "tool_ic_yunziyuanfw_sel",
default: "tool_ic_yunziyuanfw"
},
{
id: 6,
label: "应用商店",
router: "/shop/app_store_list",
active: "tool_ic_yingyongsd_sel",
default: "tool_ic_yingyongsd"
}
......@@ -76,12 +83,17 @@ export default {
this.getActiveMenu(newVal);
}
},
mounted() {
this.$store.commit("serviceShopMenuAct", this.$route.path);
this.actives = this.$store.state.serviceShopMenu;
},
methods: {
active(id) {
this.$store.commit("serviceShopMenuAct", id);
active(val) {
this.$store.commit("serviceShopMenuAct", val);
},
getActiveMenu(val) {
this.actives = val;
this.$router.push(val);
}
}
};
......
src/pages/shop.vue 0 → 100644
View file @ 7ff6c47e
<template>
<div>
<router-view/>
</div>
</template>
<script>
export default {
data: () => ({}),
mounted() {},
methods: {}
};
</script>
<style scoped>
</style>
\ No newline at end of file
src/pages/data_service_list.vue → src/pages/shop_cloud.vue
View file @ 7ff6c47e
......@@ -5,7 +5,7 @@
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list urlList="url1sss" urlFilter="urldwad2222"></service-list>
<service-list name="云资源"></service-list>
</el-main>
</el-container>
</div>
......@@ -21,9 +21,7 @@ export default {
},
data: () => ({}),
mounted() {},
methods: {
}
methods: {}
};
</script>
<style scoped>
......
src/pages/shop_list_app_store.vue 0 → 100644
View file @ 7ff6c47e
<template>
<div class="service_list">
<el-container>
<el-aside width="200px">
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list name="应用商店" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
</el-main>
</el-container>
</div>
</template>
<script>
import ServiceShopMenu from "@/components/service_shop_menu";
import ServiceList from "@/components/service_list";
export default {
components: {
ServiceShopMenu,
ServiceList
},
data: () => ({}),
mounted() {},
methods: {}
};
</script>
<style scoped>
</style>
\ No newline at end of file
src/pages/shop_list_comprehensive_app.vue 0 → 100644
View file @ 7ff6c47e
<template>
<div class="service_list">
<el-container>
<el-aside width="200px">
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list name="综合应用" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
</el-main>
</el-container>
</div>
</template>
<script>
import ServiceShopMenu from "@/components/service_shop_menu";
import ServiceList from "@/components/service_list";
export default {
components: {
ServiceShopMenu,
ServiceList
},
data: () => ({}),
mounted() {},
methods: {}
};
</script>
<style scoped>
</style>
\ No newline at end of file
src/pages/shop_list_data.vue 0 → 100644
View file @ 7ff6c47e
<template>
<div class="service_list">
<el-container>
<el-aside width="200px">
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list name="数据服务" url="sjfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
</el-main>
</el-container>
</div>
</template>
<script>
import ServiceShopMenu from "@/components/service_shop_menu";
import ServiceList from "@/components/service_list";
export default {
components: {
ServiceShopMenu,
ServiceList
},
data: () => ({}),
mounted() {},
methods: {}
};
</script>
<style scoped>
</style>
\ No newline at end of file
src/pages/shop_list_perception.vue 0 → 100644
View file @ 7ff6c47e
<template>
<div class="service_list">
<el-container>
<el-aside width="200px">
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list name="感知服务"></service-list>
</el-main>
</el-container>
</div>
</template>
<script>
import ServiceShopMenu from "@/components/service_shop_menu";
import ServiceList from "@/components/service_list";
export default {
components: {
ServiceShopMenu,
ServiceList
},
data: () => ({}),
mounted() {},
methods: {}
};
</script>
<style scoped>
</style>
\ No newline at end of file
src/pages/shop_list_space_time.vue 0 → 100644
View file @ 7ff6c47e
<template>
<div class="service_list">
<el-container>
<el-aside width="200px">
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list name="时空服务" url="skfw" urlList="url1sss" urlFilter="urldwad2222"></service-list>
</el-main>
</el-container>
</div>
</template>
<script>
import ServiceShopMenu from "@/components/service_shop_menu";
import ServiceList from "@/components/service_list";
export default {
components: {
ServiceShopMenu,
ServiceList
},
data: () => ({}),
mounted() {},
methods: {}
};
</script>
<style scoped>
</style>
\ No newline at end of file
src/pages/shop_list_video.vue 0 → 100644
View file @ 7ff6c47e
<template>
<div class="service_list">
<el-container>
<el-aside width="200px">
<service-shop-menu></service-shop-menu>
</el-aside>
<el-main>
<service-list name="视频服务"></service-list>
</el-main>
</el-container>
</div>
</template>
<script>
import ServiceShopMenu from "@/components/service_shop_menu";
import ServiceList from "@/components/service_list";
export default {
components: {
ServiceShopMenu,
ServiceList
},
data: () => ({}),
mounted() {},
methods: {}
};
</script>
<style scoped>
</style>
\ No newline at end of file
src/router/index.js
View file @ 7ff6c47e
......@@ -71,14 +71,45 @@ export default new Router({
],
},
{
path: "/fwcs", // 服务超市
name: "fwcs",
component: () => import("@/pages/data_service_list"),
path: "/shop", // 服务超市
name: "shop",
redirect: "/shop/data_service_list",
component: () => import("@/pages/shop"),
children: [
{
path: "/data_service_list", // 服务超市列表页
name: "fwcsDataList",
component: () => import("@/pages/data_service_list"),
path: "/shop/data_service_list", // 数据服务列表页
name: "shopDataList",
component: () => import("@/pages/shop_list_data"),
},
{
path: "/shop/space_time_service_list", // 时空服务列表页
name: "shopSpaceTimeList",
component: () => import("@/pages/shop_list_space_time"),
},
{
path: "/shop/video_service_list", // 视频服务列表页
name: "shopVideoList",
component: () => import("@/pages/shop_list_video"),
},
{
path: "/shop/perception_service_list", // 感知服务列表页
name: "shopPerceptionList",
component: () => import("@/pages/shop_list_perception"),
},
{
path: "/shop/comprehensive_app_list", // 综合应用列表页
name: "shopComAppList",
component: () => import("@/pages/shop_list_comprehensive_app"),
},
{
path: "/shop/cloud", // 云资源服务
name: "shopCloud",
component: () => import("@/pages/shop_cloud"),
},
{
path: "/shop/app_store_list", // 应用商店列表页
name: "shopAppStoreList",
component: () => import("@/pages/shop_list_app_store"),
},
],
},
......
src/store/index.js
View file @ 7ff6c47e
......@@ -6,7 +6,7 @@ Vue.use(Vuex);
const store = new Vuex.Store({
state: {
role: 1,//0：普通用户，1：组织管理员，2：超级管理员
serviceShopMenu: 0, // 服务超市侧边栏
serviceShopMenu: "shopDataList", // 服务超市侧边栏
},
modules: {
},
......
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