Skip to content

A
apaas-ui
Commit 939e617e authored by gaoshiyao's avatar gaoshiyao
Browse files
Options

Merge branch 'dev' of cloud.wodcloud.com:apaas/apaas-ui-new into dev

parents d7e3a0eb 1c305b7b
Expand all Show whitespace changes
Inline Side-by-side
Showing with 18946 additions and 3122 deletions
build/webpack.base.conf.js
View file @ 939e617e
...@@ -48,7 +48,7 @@ module.exports = { ...@@ -48,7 +48,7 @@ module.exports = {
loader: 'url-loader', loader: 'url-loader',
exclude: [resolve('src/icons')], exclude: [resolve('src/icons')],
options: { options: {
limit: 10000, limit: 1000000,
name: utils.assetsPath('img/[name].[hash:7].[ext]') name: utils.assetsPath('img/[name].[hash:7].[ext]')
} }
}, },
......
config/index.js
View file @ 939e617e
...@@ -8,7 +8,7 @@ module.exports = { ...@@ -8,7 +8,7 @@ module.exports = {
dev: { dev: {
// Paths // Paths
assetsSubDirectory: "static", assetsSubDirectory: "static",
assetsPublicPath: "/", assetsPublicPath: "/apaas/ui/",
proxyTable: { proxyTable: {
"/apaas": { "/apaas": {
target: "https://apaas3.wodcloud.com/apaas/", target: "https://apaas3.wodcloud.com/apaas/",
......
index.html
View file @ 939e617e
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>apaas 3.0</title> <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> <style>
body{ body{
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
} }
</style> </style>
</head> </head>
<script src="/apaas/ui/static/config/configmap.js"></script>
<body> <body>
<div id="app"></div> <div id="app"></div>
</body> </body>
......
package.json
View file @ 939e617e
...@@ -32,18 +32,19 @@ ...@@ -32,18 +32,19 @@
"vue-i18n": "^8.17.7", "vue-i18n": "^8.17.7",
"vue-resource": "^1.5.1", "vue-resource": "^1.5.1",
"vue-router": "^3.0.2", "vue-router": "^3.0.2",
"vue-super-flow": "^1.3.2",
"vuex": "^3.1.0", "vuex": "^3.1.0",
"xterm": "^4.7.0", "xterm": "^4.7.0",
"xterm-addon-fit": "^0.4.0", "xterm-addon-fit": "^0.4.0",
"yaml2json": "^1.0.2" "yaml2json": "^1.0.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/compat-data": "7.9.0",
"@babel/core": "^7.4.0", "@babel/core": "^7.4.0",
"@babel/plugin-syntax-jsx": "^7.2.0", "@babel/plugin-syntax-jsx": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.4.0", "@babel/plugin-transform-runtime": "^7.4.0",
"@babel/preset-env": "^7.4.2", "@babel/preset-env": "^7.4.2",
"@babel/runtime": "^7.4.2", "@babel/runtime": "^7.4.2",
"@babel/compat-data": "7.9.0",
"autoprefixer": "^9.5.0", "autoprefixer": "^9.5.0",
"babel-loader": "^8.0.5", "babel-loader": "^8.0.5",
"babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-syntax-jsx": "^6.18.0",
...@@ -54,6 +55,8 @@ ...@@ -54,6 +55,8 @@
"file-loader": "^3.0.1", "file-loader": "^3.0.1",
"friendly-errors-webpack-plugin": "^1.7.0", "friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^3.2.0", "html-webpack-plugin": "^3.2.0",
"less": "^3.12.2",
"less-loader": "^6.2.0",
"mini-css-extract-plugin": "^0.5.0", "mini-css-extract-plugin": "^0.5.0",
"node-notifier": "^5.4.0", "node-notifier": "^5.4.0",
"optimize-css-assets-webpack-plugin": "^5.0.1", "optimize-css-assets-webpack-plugin": "^5.0.1",
......
src/App.vue
View file @ 939e617e
...@@ -10,25 +10,37 @@ import bdMenu from "./components/menu"; ...@@ -10,25 +10,37 @@ import bdMenu from "./components/menu";
export default { export default {
data: () => ({}), data: () => ({}),
components: { components: {
bdMenu bdMenu,
}, },
methods: { methods: {
getCurrentUser() { getCurrentUser() {
this.$api.user.getNowUser().then(({ data }) => { this.$api.user.getNowUser().then(({ data }) => {
if (data.success == 1) { if (data.success == 1) {
console.log("--- --- ---");
console.log(data.data);
console.log("--- --- ---");
this.$store.commit("userInfofun", data.data); this.$store.commit("userInfofun", data.data);
} else { } else {
console.log(data.errMsg); console.log(data.errMsg);
} }
}); });
},
getMessage() {
this.$http
.get("/apaas/service/v3/mymsg/unread", {
params: {
size: 10,
page: 1,
},
})
.then(({ data }) => {
if (data.success === 1) {
this.$store.commit("setUnreadMessageCount", data.data.total || 0);
} }
});
},
}, },
created() { created() {
this.getCurrentUser(); this.getCurrentUser();
} this.getMessage();
},
}; };
</script> </script>
......
src/assets/css/index.css
View file @ 939e617e
This diff is collapsed.
src/assets/i18n/language-zh.js
View file @ 939e617e
...@@ -22,9 +22,13 @@ export const lang = { ...@@ -22,9 +22,13 @@ export const lang = {
cloud_resources_detail: "云资源详情", cloud_resources_detail: "云资源详情",
// data analysis // data analysis
data_analysis: "数据分析中心", data_analysis: "运营管控中心",
my_service_data_analysis: "我的服务数据分析", operational_analysis: "运营分析",
my_application_data_analysis: "我的应用数据分析", operation_control: "运行管控",
service_data_analysis: "服务分析",
application_data_analysis: "应用分析",
operation_overview: "运行概况",
service_control: "服务管控",
// message // message
message: "消息与推送管理", message: "消息与推送管理",
...@@ -33,4 +37,14 @@ export const lang = { ...@@ -33,4 +37,14 @@ export const lang = {
message_alert: "消息提醒管理", message_alert: "消息提醒管理",
banner: "banner管理", banner: "banner管理",
message_template: "消息模板管理", message_template: "消息模板管理",
//online component tool
online_component_tool: "在线组件中心",
process_design: "流程设计",
process_management: "流程管理",
new: "新建",
edit: "编辑",
// technical-support
technical_support: "技术支持"
} }
\ No newline at end of file
src/assets/imgs/ic_xitong.png
View replaced file @ d7e3a0eb View file @ 939e617e
src/assets/imgs/ic_xitong.png

1.12 KB | W: | H:

src/assets/imgs/ic_xitong.png

1.76 KB | W: | H:

src/assets/imgs/ic_xitong.png
src/assets/imgs/ic_xitong.png
src/assets/imgs/ic_xitong.png
src/assets/imgs/ic_xitong.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/imgs/img_head.png
View replaced file @ d7e3a0eb View file @ 939e617e
src/assets/imgs/img_head.png

1.63 KB | W: | H:

src/assets/imgs/img_head.png

2.15 KB | W: | H:

src/assets/imgs/img_head.png
src/assets/imgs/img_head.png
src/assets/imgs/img_head.png
src/assets/imgs/img_head.png
  • 2-up
  • Swipe
  • Onion skin
src/components/apass-list.vue
View file @ 939e617e
...@@ -181,9 +181,11 @@ export default { ...@@ -181,9 +181,11 @@ export default {
} }
}, },
searchAction(value) { searchAction(value) {
this.currentPage = 1;
this.listAction(); this.listAction();
}, },
filterChange(filter) { filterChange(filter) {
this.currentPage = 1;
this.filter = filter; this.filter = filter;
this.listAction(); this.listAction();
}, },
...@@ -196,6 +198,10 @@ export default { ...@@ -196,6 +198,10 @@ export default {
this.currentPage = value; this.currentPage = value;
this.listAction(); this.listAction();
}, },
resetCurrentPage(value = 1) {
this.currentPage = value;
this.listAction();
},
listAction() { listAction() {
if (this.timer) { if (this.timer) {
clearTimeout(this.timer); clearTimeout(this.timer);
...@@ -244,7 +250,7 @@ export default { ...@@ -244,7 +250,7 @@ export default {
padding: 0 20px 15px; padding: 0 20px 15px;
background-color: #fff; background-color: #fff;
border-radius: 10px; border-radius: 10px;
margin-bottom: 40px; margin-bottom: 30px;
} }
.header-container { .header-container {
padding-top: 20px; padding-top: 20px;
......
src/components/apass-table.vue
View file @ 939e617e
...@@ -25,6 +25,7 @@ ...@@ -25,6 +25,7 @@
<span <span
v-if="v.disabledRule && v.disabledRule(scope.row)" v-if="v.disabledRule && v.disabledRule(scope.row)"
class="btn disabled" class="btn disabled"
:class="{ hide: v.disableHide }"
:key="'btn_' + index + '_' + i" :key="'btn_' + index + '_' + i"
v-text="v.getLabel ? v.getLabel(scope.row) : v.label" v-text="v.getLabel ? v.getLabel(scope.row) : v.label"
> >
...@@ -42,8 +43,24 @@ ...@@ -42,8 +43,24 @@
v-if="i < item.actionList.length - 1" v-if="i < item.actionList.length - 1"
class="interval_line" class="interval_line"
:key="'line_' + index + '_' + i" :key="'line_' + index + '_' + i"
>|</span
> >
|
</span>
</template>
<template v-if="item.moreActionList">
<span
class="interval_line"
v-if="item.actionList && item.actionList.length > 0"
>
|
</span>
<a
class="btn"
@mouseenter="mouseenter($event, item.moreActionList, scope.row)"
@mouseleave="mouseleave"
>
更多
</a>
</template> </template>
</div> </div>
<div v-else-if="item.type === 'button'" class="row_action"> <div v-else-if="item.type === 'button'" class="row_action">
...@@ -94,7 +111,7 @@ ...@@ -94,7 +111,7 @@
tag_flag_arr[scope.$index] == 0 && tag_flag_arr[scope.$index] == 0 &&
scope.row[item.prop].length > 2 scope.row[item.prop].length > 2
" "
@click.stop="change_tag(scope.$index, 1)" @click.stop="changeTag(scope.$index, 1)"
></div> ></div>
<div <div
class="tagclo btn_up" class="tagclo btn_up"
...@@ -102,7 +119,7 @@ ...@@ -102,7 +119,7 @@
tag_flag_arr[scope.$index] == 1 && tag_flag_arr[scope.$index] == 1 &&
scope.row[item.prop].length > 2 scope.row[item.prop].length > 2
" "
@click.stop="change_tag(scope.$index, 0)" @click.stop="changeTag(scope.$index, 0)"
></div> ></div>
</div> </div>
<div v-else-if="item.type === 'chart'" class="charts"> <div v-else-if="item.type === 'chart'" class="charts">
...@@ -115,16 +132,34 @@ ...@@ -115,16 +132,34 @@
:styles="item.prop == 'cpu' ? spCurveStyles2 : spCurveStyles3" :styles="item.prop == 'cpu' ? spCurveStyles2 : spCurveStyles3"
/> />
</sparkline> </sparkline>
<span class="use" v-if="item.prop == 'cpu'&&scope.row.cpu_use" <span class="use" v-if="item.prop == 'cpu' && scope.row.cpu_use">
>{{ scope.row["cpu_use"] }}.00mm</span {{ scope.row["cpu_use"] }}.00mm
> </span>
<span class="use" :style="scope.row[item.prop].length?{}:{right:'25px',bottom:'8px'}" v-if="item.prop == 'cpu'&&!scope.row.cpu_use" <span
>0mm</span class="use"
:style="
scope.row[item.prop].length
? {}
: { right: '25px', bottom: '8px' }
"
v-if="item.prop == 'cpu' && !scope.row.cpu_use"
> >
<span class="use" v-if="item.prop == 'mermoy'&&scope.row.memory_use" 0mm
>{{ scope.row["memory_use"] }}Mi</span </span>
<span
class="use"
v-if="item.prop == 'mermoy' && scope.row.memory_use"
> >
<span class="use" :style="scope.row[item.prop].length?{}:{right:'25px',bottom:'8px'}" v-if="item.prop == 'mermoy'&&!scope.row.memory_use" {{ (scope.row["memory_use"] / 1024 / 1024).toFixed(2) }}Mi
</span>
<span
class="use"
:style="
scope.row[item.prop].length
? {}
: { right: '25px', bottom: '8px' }
"
v-if="item.prop == 'mermoy' && !scope.row.memory_use"
>0Mi</span >0Mi</span
> >
</div> </div>
...@@ -175,6 +210,12 @@ ...@@ -175,6 +210,12 @@
:class="'index_' + scope.row.hotIndex" :class="'index_' + scope.row.hotIndex"
v-text="'TOP' + scope.row.hotIndex" v-text="'TOP' + scope.row.hotIndex"
></span> ></span>
<span
v-else-if="item.type === 'hot-index-2'"
class="hot_index"
:class="'index_' + scope.row.hotIndex"
v-text="scope.row.hotIndex + '.'"
></span>
<span class="sort_table" v-else-if="item.sortable"> <span class="sort_table" v-else-if="item.sortable">
<span>{{ getPercent(scope.row[item.prop]) }}</span> <span>{{ getPercent(scope.row[item.prop]) }}</span>
<span> <span>
...@@ -185,6 +226,16 @@ ...@@ -185,6 +226,16 @@
<img v-else :src="require('../assets/imgs/icon_down.png')" /> <img v-else :src="require('../assets/imgs/icon_down.png')" />
</span> </span>
</span> </span>
<span class="sort_table" v-else-if="item.sortIcon">
<span>{{ scope.row[item.prop] + "%" }}</span>
<span>
<img
v-if="scope.row[item.prop] > 0"
:src="require('../assets/imgs/icon_up.png')"
/>
<img v-else :src="require('../assets/imgs/icon_down.png')" />
</span>
</span>
<span <span
v-else-if="item.type === 'selected-icon'" v-else-if="item.type === 'selected-icon'"
class="selected_icon" class="selected_icon"
...@@ -210,6 +261,22 @@ ...@@ -210,6 +261,22 @@
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<ul
ref="moreActionList"
class="more_action_list"
:style="moreActionStyle"
@mouseenter="enterMoreActionList"
@mouseleave="leaveMoreActionList"
v-show="showMoreActionList"
>
<li
v-for="(item, index) in moreActionList"
:key="'more_' + index"
@click="item.callback"
v-text="item.label"
></li>
</ul>
</div> </div>
</template> </template>
...@@ -257,6 +324,12 @@ export default { ...@@ -257,6 +324,12 @@ export default {
strokeOpacity: 0, strokeOpacity: 0,
strokeDasharray: "2, 2", strokeDasharray: "2, 2",
}, },
moreActionList: [],
showMoreActionList: false,
moreActionStyle: {
top: 0,
left: 0,
},
}; };
}, },
mounted() { mounted() {
...@@ -266,7 +339,7 @@ export default { ...@@ -266,7 +339,7 @@ export default {
); );
}, },
methods: { methods: {
change_tag(index, val) { changeTag(index, val) {
this.$set(this.tag_flag_arr, index, val); this.$set(this.tag_flag_arr, index, val);
}, },
sortChange(value) { sortChange(value) {
...@@ -278,6 +351,50 @@ export default { ...@@ -278,6 +351,50 @@ export default {
getPercent(num) { getPercent(num) {
return Math.round(num * 100) + "%"; return Math.round(num * 100) + "%";
}, },
mouseenter($event, moreActionList, row) {
let _self = this;
_self.moreActionList = [];
_self.showMoreActionList = true;
_self.moreActionList = moreActionList
.filter((item) => {
if (item.showRule) {
return item.showRule(row);
} else {
return true;
}
})
.map((item) => ({
id: row.id,
label: item.label,
callback() {
_self.showMoreActionList = false;
_self.moreActionList = [];
item.callback && item.callback(row);
},
}));
_self.$nextTick(() => {
let targetInfo = $event.target.getBoundingClientRect();
let containerInfo = _self.$refs.moreActionList.getBoundingClientRect();
_self.moreActionStyle = {
top: targetInfo.y + targetInfo.height + 15 + "px",
left:
targetInfo.x - (containerInfo.width - targetInfo.width) / 2 + "px",
};
});
},
mouseleave() {
this.showMoreActionList = false;
},
enterMoreActionList() {
this.showMoreActionList = true;
},
leaveMoreActionList() {
this.showMoreActionList = false;
},
}, },
}; };
</script> </script>
...@@ -389,4 +506,49 @@ export default { ...@@ -389,4 +506,49 @@ export default {
.selected_icon.selected > span { .selected_icon.selected > span {
display: block; display: block;
} }
.more_action_list {
position: fixed;
}
.more_action_list > li {
padding: 5px 20px;
background-color: #0f2683;
font-size: 12px;
line-height: 20px;
color: #fff;
cursor: pointer;
position: relative;
}
.more_action_list > li:first-child {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.more_action_list > li:first-child::before {
content: "";
position: absolute;
top: -20px;
right: calc(50% - 20px);
width: 40px;
height: 20px;
/* background-color: red; */
}
.more_action_list > li:first-child::after {
content: "";
position: absolute;
top: -14px;
right: calc(50% - 7px);
border-top: 0 solid transparent;
border-right: 7px solid transparent;
border-bottom: 14px solid #0f2683;
border-left: 7px solid transparent;
}
.more_action_list > li:last-child {
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
.more_action_list > li:hover {
background-color: #3f4f9c;
}
.more_action_list > li:first-child:hover::after {
border-bottom: 14px solid #3f4f9c;
}
</style> </style>
src/components/app-build-steps/app-build-step.vue
View file @ 939e617e
...@@ -20,6 +20,10 @@ export default { ...@@ -20,6 +20,10 @@ export default {
type: String, type: String,
default: () => "", default: () => "",
}, },
stepTitle: {
type: String,
default: "",
},
}, },
data: () => ({}), data: () => ({}),
computed: { computed: {
......
src/components/app-build-steps/app-build-steps.vue
View file @ 939e617e
...@@ -25,7 +25,12 @@ ...@@ -25,7 +25,12 @@
</div> </div>
<div class="step_icon" v-else></div> <div class="step_icon" v-else></div>
<div class="step_info"> <div class="step_info">
<p class="step_state"> <p v-if="item.stepTitle != ''" class="step_state">
<span>
{{ item.stepTitle }}
</span>
</p>
<p v-else class="step_state">
<span v-if="item.step < activeStep || done"> <span v-if="item.step < activeStep || done">
已完成 已完成
</span> </span>
......
src/components/app-list/app-card.vue
View file @ 939e617e
...@@ -101,11 +101,17 @@ export default { ...@@ -101,11 +101,17 @@ export default {
margin-right: 18px; margin-right: 18px;
cursor: pointer; cursor: pointer;
} }
.app_card > .app_card-icon .el-avatar--square {
border: 3px solid #f6f7fb;
border-radius: 8px;
overflow: hidden;
}
.app_card > .app_card-info { .app_card > .app_card-info {
width: calc(100% - 56px - 20px); width: calc(100% - 56px - 20px);
} }
.app_card-info > .app_card-name { .app_card-info > .app_card-name {
font-size: 18px; font-size: 18px;
font-weight: 600;
line-height: 32px; line-height: 32px;
color: #0d1847; color: #0d1847;
cursor: pointer; cursor: pointer;
......
src/components/comments-list.vue
View file @ 939e617e
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
:key="'comment_' + index" :key="'comment_' + index"
> >
<div class="comment-left"> <div class="comment-left">
<el-avatar :size="60" fit="cover" :src="item.picture_path" /> <el-avatar :size="60" fit="cover" :src="item.picture_path || require('../assets/imgs/img_head.png')" />
</div> </div>
<div class="comment-right"> <div class="comment-right">
<p class="comment-user_name" v-text="item.user_name"></p> <p class="comment-user_name" v-text="item.user_name"></p>
......
src/components/e-charts/bar-chart-two.vue 0 → 100644
View file @ 939e617e
<template>
<chart :options="bar()" class="bar" />
</template>
<script>
import { graphic } from "echarts/lib/export";
export default {
props: {
data: {
type: Object,
default: () => {
return null;
},
},
bar_width: {
type: Number,
default: 12,
},
colors: {
type: Array,
default: () => {
return ["#515fe7", "#e56600"];
},
},
bar_border_radius: {
type: Array,
default: () => {
return [10, 10, 10, 10];
},
},
show_split: {
type: Boolean,
default: false,
},
x_router: {
type: Number,
default: 0,
},
xAxis_text_length: {
type: Number,
default: 0,
},
},
methods: {
bar() {
let self = this;
let xAxis = (self.data && self.data.xAxis) || [];
let series = (self.data && self.data.series) || [{}, {}];
return {
grid: {
left: 10,
right: 10,
bottom: 25,
top: 25,
containLabel: true,
},
legend: {
left: "right",
itemWidth: 10,
itemHeight: 10,
orient: "horizontal",
backgroundColor: "#f4f7fc",
data: series.map((item) => item.name),
},
tooltip: {
trigger: "axis",
},
xAxis: {
type: "category",
axisLabel: {
margin: 20,
color: "#0d1847",
textStyle: {
fontSize: 12,
},
interval: 0,
rotate: self.x_router,
formatter: function(value) {
let maxLen = self.xAxis_text_length;
if (maxLen > 1) {
let valueTxt = "";
if (value.length > maxLen) {
valueTxt = value.substring(0, maxLen - 1) + "...";
} else {
valueTxt = value;
}
return valueTxt;
} else {
return value;
}
},
},
axisLine: {
lineStyle: {
color: "#f2f2f2",
},
},
axisTick: {
show: false,
},
splitArea: {
show: true,
areaStyle: {
color: ["#fff", "#f8f9fd"],
opacity: 0.5,
},
interval: 0,
},
axisPointer: {
type: "shadow",
},
data: xAxis,
},
yAxis: [
{
axisLabel: {
color: "#a9aec0",
textStyle: {
fontSize: 12,
},
},
minInterval: 1,
axisLine: {
lineStyle: {
color: "rgba(0, 0, 0, 0)",
},
},
axisTick: {
show: false,
},
splitLine: {
lineStyle: {
color: "#f2f2f2",
type: "solid",
},
},
},
],
series: [
{
type: "bar",
type: "bar",
barWidth: self.bar_width,
itemStyle: {
normal: {
color: function(params) {
return new graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: self.colors[0], // 0% 处的颜色
},
{
offset: 1,
color: self.colors[0], // 100% 处的颜色
},
],
false
);
},
barBorderRadius: self.bar_border_radius,
},
},
name: series[0].name,
data: series[0].data,
},
{
type: "bar",
type: "bar",
barWidth: self.bar_width,
itemStyle: {
normal: {
color: function(params) {
return new graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: self.colors[1], // 0% 处的颜色
},
{
offset: 1,
color: self.colors[1], // 100% 处的颜色
},
],
false
);
},
barBorderRadius: self.bar_border_radius,
},
},
name: series[1].name,
data: series[1].data,
},
],
};
},
},
};
</script>
<style scoped>
.bar {
width: 100%;
height: 100%;
}
</style>
src/components/e-charts/bar-chart.vue
View file @ 939e617e
...@@ -11,47 +11,63 @@ export default { ...@@ -11,47 +11,63 @@ export default {
default: () => { default: () => {
return { return {
legendData: [], legendData: [],
seriesData: [] seriesData: [],
}; };
} },
}, },
bar_width: { bar_width: {
type: Number, type: Number,
default: 12 default: 12,
}, },
colors: { colors: {
type: Array, type: Array,
default: () => { default: () => {
return ["#274fee", "#274fee"]; return ["#274fee", "#274fee"];
} },
}, },
bar_border_radius: { bar_border_radius: {
type: Array, type: Array,
default: () => { default: () => {
return [10, 10, 10, 10]; return [10, 10, 10, 10];
} },
}, },
show_split: { show_split: {
type: Boolean, type: Boolean,
default: false default: false,
}, },
x_router: { x_router: {
type: Number, type: Number,
default: 0 default: 0,
} },
xAxis_text_length: {
type: Number,
default: 0,
},
}, },
data: () => ({}), data: () => ({}),
mounted() {}, mounted() {},
methods: { methods: {
bar() { bar() {
let self = this; let self = this;
return { return {
tooltip: {
trigger: "axis",
formatter: function(params) {
var htmlStr = "";
for (var i = 0; i < params.length; i++) {
htmlStr += params[i].name + " : ";
htmlStr += params[i].value;
}
return htmlStr;
},
},
grid: { grid: {
left: 10, left: 10,
right: 10, right: 10,
bottom: 25, bottom: 25,
top: 25, top: 25,
containLabel: true containLabel: true,
}, },
xAxis: [ xAxis: [
{ {
...@@ -61,62 +77,71 @@ export default { ...@@ -61,62 +77,71 @@ export default {
margin: 20, margin: 20,
color: "#0d1847", color: "#0d1847",
textStyle: { textStyle: {
fontSize: 12 fontSize: 12,
}, },
interval: 0, interval: 0,
rotate: self.x_router, rotate: self.x_router,
formatter: function(value) { formatter: function(value) {
let maxLen = self.xAxis_text_length;
if (maxLen > 1) {
let valueTxt = ""; let valueTxt = "";
if (value.length > 6) { if (value.length > maxLen) {
valueTxt = value.substring(0, 5) + "..."; valueTxt = value.substring(0, maxLen - 1) + "...";
} else { } else {
valueTxt = value; valueTxt = value;
} }
return valueTxt; return valueTxt;
} else {
return value;
} }
}, },
},
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "#f2f2f2" color: "#f2f2f2",
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
splitArea: { splitArea: {
show: true, show: true,
areaStyle: { areaStyle: {
color: ["#fff", "#f8f9fd"], color: ["#fff", "#f8f9fd"],
opacity: 0.5 opacity: 0.5,
},
interval: 0,
},
axisPointer: {
type: "shadow",
}, },
interval: 0
}, },
}
], ],
yAxis: [ yAxis: [
{ {
axisLabel: { axisLabel: {
color: "#a9aec0", color: "#a9aec0",
textStyle: { textStyle: {
fontSize: 12 fontSize: 12,
} },
}, },
minInterval: 1, minInterval: 1,
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: "rgba(0, 0, 0, 0)" color: "rgba(0, 0, 0, 0)",
} },
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
splitLine: { splitLine: {
lineStyle: { lineStyle: {
color: "#f2f2f2", color: "#f2f2f2",
type: "solid" type: "solid",
} },
} },
} },
], ],
series: [ series: [
{ {
...@@ -134,24 +159,24 @@ export default { ...@@ -134,24 +159,24 @@ export default {
[ [
{ {
offset: 0, offset: 0,
color: self.colors[0] // 0% 处的颜色 color: self.colors[0], // 0% 处的颜色
}, },
{ {
offset: 1, offset: 1,
color: self.colors[1] // 100% 处的颜色 color: self.colors[1], // 100% 处的颜色
} },
], ],
false false
); );
}, },
barBorderRadius: self.bar_border_radius barBorderRadius: self.bar_border_radius,
} },
} },
} },
] ],
}; };
} },
} },
}; };
</script> </script>
<style scoped> <style scoped>
......
src/components/e-charts/commentlist.vue
View file @ 939e617e
<template> <template>
<ul class="comments_list apaas_scroll"> <ul class="comments_list apaas_scroll">
<li class="comment_card" v-for="(item, index) in data" :key="'comment_' + index"> <li
class="comment_card"
v-for="(item, index) in data"
:key="'comment_' + index"
>
<div class="comment-left"> <div class="comment-left">
<el-avatar :size="45" fit="cover" :src="item.picture_path" /> <el-avatar
:size="45"
fit="cover"
:src="item.picture_path || require('../../assets/imgs/img_head.png')"
/>
</div> </div>
<div class="comment-right"> <div class="comment-right">
<p class="comment-base"> <p class="comment-base">
<span class="comment-user_name text_clip" v-text="item.user_name"></span> <span
<span class="comment-time text_clip" v-text="getTimeText(item.add_time || '')"></span> class="comment-user_name text_clip"
v-text="item.user_name"
></span>
<span
class="comment-time text_clip"
v-text="getTimeText(item.add_time || '')"
></span>
</p> </p>
<div class="commnet-rate"> <div class="commnet-rate">
<el-rate <el-rate
...@@ -30,8 +44,16 @@ export default { ...@@ -30,8 +44,16 @@ export default {
props: { props: {
data: { data: {
type: Array, type: Array,
required: true required: true,
} },
},
watch: {
data: {
handler() {
this.autoScroll();
},
deep: true,
},
}, },
methods: { methods: {
getTimeText(time) { getTimeText(time) {
...@@ -48,11 +70,17 @@ export default { ...@@ -48,11 +70,17 @@ export default {
let itemHeight = 77; let itemHeight = 77;
let curScrollTop = this.$el.scrollTop + itemHeight; let curScrollTop = this.$el.scrollTop + itemHeight;
if (curScrollTop >= this.$el.scrollHeight - this.$el.clientHeight + itemHeight) { if (
curScrollTop >=
this.$el.scrollHeight - this.$el.clientHeight + itemHeight
) {
curScrollTop = 0; curScrollTop = 0;
} }
this.$el.scrollTop = Math.min(curScrollTop, this.$el.scrollHeight - this.$el.clientHeight); this.$el.scrollTop = Math.min(
curScrollTop,
this.$el.scrollHeight - this.$el.clientHeight
);
}, 1500); }, 1500);
}, },
mouseenter() { mouseenter() {
...@@ -62,7 +90,7 @@ export default { ...@@ -62,7 +90,7 @@ export default {
}, },
mouseleave() { mouseleave() {
this.autoScroll(); this.autoScroll();
} },
}, },
mounted() { mounted() {
this.autoScroll(); this.autoScroll();
...@@ -74,7 +102,7 @@ export default { ...@@ -74,7 +102,7 @@ export default {
if (this.timer) { if (this.timer) {
clearInterval(this.timer); clearInterval(this.timer);
} }
} },
}; };
</script> </script>
......
src/components/e-charts/doubleBar.vue 0 → 100644
View file @ 939e617e
<template>
<chart :options="bar()" class="bar" />
</template>
<script>
import { graphic } from "echarts/lib/export";
export default {
props: {
data: {
type: Object,
default: () => {
return null;
},
},
bar_width: {
type: Number,
default: 12,
},
colors: {
type: Array,
default: () => {
return ["#1034eb", "#e56600"];
},
},
bar_border_radius: {
type: Array,
default: () => {
return [10, 0, 0, 10];
},
},
bar_border_radius_two: {
type: Array,
default: () => {
return [0, 10, 10, 0];
},
},
show_split: {
type: Boolean,
default: false,
},
x_router: {
type: Number,
default: 0,
},
},
data: () => ({}),
mounted() {},
methods: {
bar() {
let self = this;
let yAxis = (self.data && self.data.yAxis) || [];
let series = (self.data && self.data.series) || [{}, {}];
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
legend: {
data: series.map((item) => item.name),
left: "right",
itemWidth: 10,
itemHeight: 10,
orient: "horizontal",
},
color: self.colors,
grid: {
top: 35,
left: 10,
right: 30,
bottom: 0,
containLabel: true,
},
xAxis: [
{
axisLabel: {
formatter: function(value) {
return Math.abs(value);
},
},
type: "value",
axisTick: {
show: false,
},
},
],
yAxis: [
{
type: "category",
axisTick: { show: false },
axisLabel: {
color: "#333",
textStyle: {
fontSize: 12,
},
},
minInterval: 1,
data: yAxis,
axisLine: {
show: false,
},
},
],
series: [
{
type: "bar",
stack: "总量",
label: {
normal: {
show: false,
position: "right",
},
},
barWidth: 10,
itemStyle: {
normal: {
color: function(params) {
return new graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: self.colors[1], // 0% 处的颜色
},
{
offset: 1,
color: self.colors[1], // 100% 处的颜色
},
],
false
);
},
barBorderRadius: self.bar_border_radius_two,
},
},
name: series[0].name,
data: series[0].data,
},
{
type: "bar",
stack: "总量",
label: {
normal: {
show: false,
position: "left",
formatter: function(v) {
return Math.abs(v.data);
},
},
},
barWidth: 10,
itemStyle: {
normal: {
color: function(params) {
return new graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: self.colors[0], // 0% 处的颜色
},
{
offset: 1,
color: self.colors[0], // 100% 处的颜色
},
],
false
);
},
barBorderRadius: self.bar_border_radius,
},
},
name: series[1].name,
data: series[1].data.map((v) => v * -1),
},
],
};
},
},
};
</script>
<style scoped>
.bar {
width: 100%;
height: 100%;
}
</style>
src/components/e-charts/gk-circle.vue 0 → 100644
View file @ 939e617e
<template>
<chart :options="dashboard()" class="dashboard" />
</template>
<script>
import { graphic } from "echarts/lib/export";
export default {
props: {
data: {
type: Object,
default: () => {
return {
data: 0,
text: ""
};
}
},
dangerousValue: {
type: String,
default: ""
},
is_word: {
type: Boolean,
default: false
}
},
data: () => ({}),
mounted() {},
methods: {
dashboard() {
let self = this;
return {
title: [
{
text: self.data.data + "{a|%}",
show: !self.is_word,
x: "center",
y: "30%",
textStyle: {
fontSize: 36,
fontWeight: "lighter",
color:
self.dangerousValue == "workplace" ? ["#0d1847"] : ["#67828c"],
rich: {
a: {
fontSize: 14,
padding: [0, 0, 4, 0]
}
}
}
},
{
text: self.data.text,
show: !self.is_word,
x: "center",
y: "58%",
textStyle: {
fontSize: 12,
fontWeight: "normal",
color: "#707693"
}
},
{
text: self.data.text,
show: self.is_word,
x: "center",
y: "75%",
textStyle: {
fontSize: 16,
fontWeight: "normal",
color: "#333"
}
},
{
text: self.data.data + "%",
show: self.is_word,
x: "center",
y: "center",
textStyle: {
fontSize: 22,
fontWeight: "normal",
color:
self.data.data > 75
? "#00beb2" //green
: self.data.data >= 50
? "#38aef9" //blue
: self.data.data > 25
? "#ff7200" //yellow
: "#da4251" //red
}
}
],
angleAxis: {
axisLine: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
},
axisTick: {
show: false
},
min: 0,
max: 138,
boundaryGap: ["0", "100"],
startAngle: 220,
endAngle: -40
},
radiusAxis: {
type: "category",
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
}
},
polar: {
radius: "110%"
},
series: [
{
type: "bar",
data: [, self.data.data],
coordinateSystem: "polar",
barMaxWidth: 10,
z: 1,
name: "B",
roundCap: true,
itemStyle: {
normal: {
color: new graphic.LinearGradient(0, 0, 1, 0, [
{
offset: 0,
color:
self.dangerousValue == "high"
? self.data.data >= 80
? "#f7f1d5"
: "#d5f7e8"
: self.dangerousValue == "workplace"
? self.data.data >= 80
? "#f7f1d5"
: "#e6ebfe"
: self.data.data > 75
? "#d5f7e8"
: self.data.data >= 50
? "#e5f4fe"
: self.data.data > 25
? "#ffd98f"
: "#da4251"
},
{
offset: 1,
color:
self.dangerousValue == "high"
? self.data.data >= 80
? "#da4251" // red
: "#00beb2" //green
: self.dangerousValue == "workplace"
? self.data.data >= 80
? "#da4251"
: "#515fe7"
: self.data.data > 75
? "#00beb2" //green
: self.data.data >= 50
? "#38aef9" //blue
: self.data.data > 25
? "#ff7200" //yellow
: "#f7f1d5" //red
}
])
}
},
barGap: "-100%"
},
{
type: "bar",
data: [, 100],
z: 0,
silent: true,
coordinateSystem: "polar",
barMaxWidth: 10,
name: "C",
roundCap: true,
color: "#f4f4f5",
barGap: "-100%"
},
{
type: "gauge",
radius: "70%",
min: 0, //最小刻度
max: 100, //最大刻度
splitNumber: 10, //刻度数量
startAngle: 220,
endAngle: -40,
axisLabel: {
show: false
},
axisLine: {
show: true,
lineStyle: {
width: 1,
color: [[1, "rgba(0,0,0,0)"]]
}
}, //仪表盘轴线
axisLabel: {
show: false
}, //刻度标签。
axisTick: {
show: true,
splitNumber: 5,
lineStyle: {
color: "#c9cee0",
width: 1
},
length: 4
}, //刻度样式
splitLine: {
show: true,
length: 6,
lineStyle: {
color: "#c9cee0"
}
}, //分隔线样式
detail: {
show: false
},
pointer: {
show: false
}
},
{
name: "point",
type: "scatter",
coordinateSystem: "polar",
barGap: "-100%",
zlevel: 0,
symbol: "circle",
symbolSize: 6,
itemStyle: {
normal: {
show: true,
color: "#fff"
}
},
data: [, self.data.data]
}
]
};
}
}
};
</script>
<style scoped>
.dashboard {
width: 100%;
height: 100%;
}
</style>
\ No newline at end of file
src/components/e-charts/gkmultiple_circle.vue 0 → 100644
View file @ 939e617e
<template>
<div :id="yylx_asy" class="dashboard"></div>
</template>
<script>
import uuidv1 from "uuid/v1";
var echarts = require("echarts");
export default {
props: {
data: {
type: Array,
default: () => {
return [];
}
},
text: {
type: String,
default: ""
},
show_center_data: {
type: Boolean,
default: true
},
bar_width: {
type: Number,
default: 5
}
},
components: {},
data() {
return {
yylx_asy: uuidv1()
};
},
watch: {
data: {
handler() {
this.init_yylx_asy(this.data, this.text);
},
deep: true,
}
},
computed: {},
created() {},
mounted() {
this.init_yylx_asy(this.data, this.text);
},
methods: {
init_yylx_asy(data, text) {
var options = this.init_circle(data, text);
window[this.yylx_asy] = echarts.init(
document.getElementById(this.yylx_asy)
);
window[this.yylx_asy].setOption(options, true);
},
init_circle(data_val, text) {
// var data_val = data_val;
var rich = {
white: {
color: "#ddd",
align: "center",
padding: [3, 0]
}
};
var placeHolderStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: "rgba(0, 0, 0, 0)",
borderColor: "rgba(0, 0, 0, 0)",
borderWidth: 0
}
};
var data = [];
var total = 0;
var color = ["#274fee","#e56600", "#25bdb1", "#ffc95c" , "#e15260"];
var legendarr = [];
var temp2_data = 0;
data_val.forEach(e => {
temp2_data = temp2_data + e.value;
});
for (var i = 0; i < data_val.length; i++) {
data.push(
{
value: data_val[i].value,
name: data_val[i].name,
itemStyle: {
normal: {
borderWidth: this.bar_width,
// shadowBlur: 20,
borderColor: color[i]
// shadowColor: color[i],
}
}
},
{
value: temp2_data / 30,
name: "",
itemStyle: placeHolderStyle
}
);
legendarr.push(data_val[i].name);
}
for (var i = 0; i < data_val.length; i++) {
total += data_val[i].value;
}
var seriesObj = [
{
name: "",
type: "pie",
clockWise: false,
radius: [65, 70],
center: ["50%", "48%"],
hoverAnimation: false,
itemStyle: {
normal: {
label: {
show: true,
position: "outside",
color: "#58617a",
formatter: params => {
if (params.name !== "") {
return params.value+'个'
} else {
return "";
}
},
rich: rich
}
}
},
data: data
}
];
var options = {
title: {
text: this.show_center_data ? total : "",
textStyle: {
color: "#000",
fontSize: 40,
fontWeight: 200
},
subtext: text,
subtextStyle: {
color: "#c9cedd"
},
itemGap: -10, // 主副标题距离
left: "center",
top: "center"
},
color: color,
tooltip: {
show: false
},
legend: {
bottom: 0,
left: "center",
itemWidth: 10,
itemHeight: 10,
orient: "horizontal",
data: legendarr,
backgroundColor: "#f4f7fc"
},
toolbox: {
show: false
},
series: seriesObj
};
return options;
}
}
};
</script>
<style scoped>
.dashboard {
width: 100%;
height: 100%;
}
</style>
src/components/e-charts/graph.vue
View file @ 939e617e
...@@ -25,8 +25,6 @@ export default { ...@@ -25,8 +25,6 @@ export default {
methods: { methods: {
graph() { graph() {
let self = this; let self = this;
console.log(this.data.legend.data);
console.log(this.data.data);
return { return {
color: ["#274fee", "#ef9433"], color: ["#274fee", "#ef9433"],
legend: { legend: {
......
src/components/e-charts/histogramScroll.vue
View file @ 939e617e
...@@ -59,11 +59,21 @@ export default { ...@@ -59,11 +59,21 @@ export default {
{ {
type: "category", type: "category",
axisLabel: { axisLabel: {
interval: 0,
textStyle: { textStyle: {
color: "#0d1847", color: "#0d1847",
fontSize: 12, fontSize: 12,
lineHeight: 20, lineHeight: 20,
}, },
formatter(value) {
let valueTxt = "";
if (value.length > 7) {
valueTxt = value.substring(0, 7 - 1) + "...";
} else {
valueTxt = value;
}
return valueTxt;
},
}, },
axisTick: { axisTick: {
show: false, show: false,
......
src/components/e-charts/line_chart.vue
View file @ 939e617e
...@@ -25,9 +25,21 @@ export default { ...@@ -25,9 +25,21 @@ export default {
}; };
} }
}, },
showShadow:{
type:Boolean,
default:true
},
zzfw: {
type: Boolean,
default: false
},
targetValue: { targetValue: {
type: Number, type: Number,
default: () => 0 default: () => 0
},
area_flag: {
type: Boolean,
default: true
} }
}, },
components: {}, components: {},
...@@ -57,6 +69,7 @@ export default { ...@@ -57,6 +69,7 @@ export default {
"#8B5CFF", "#8B5CFF",
"#00CA69" "#00CA69"
]; ];
let color2 = ["#515fe7", "#ef9433","#37c299"];
const hexToRgba = (hex, opacity) => { const hexToRgba = (hex, opacity) => {
let rgbaColor = ""; let rgbaColor = "";
let reg = /^#[\da-f]{6}$/i; let reg = /^#[\da-f]{6}$/i;
...@@ -79,15 +92,16 @@ export default { ...@@ -79,15 +92,16 @@ export default {
zlevel: 3, zlevel: 3,
lineStyle: { lineStyle: {
normal: { normal: {
color: color[idx], color: this.zzfw ? color2[idx] : color[idx],
shadowBlur: 5, shadowBlur: 5,
shadowColor: hexToRgba(color[idx], 0.5), shadowColor: hexToRgba(this.zzfw ? color2[idx] : color[idx], 0.5),
shadowOffsetY: 10 shadowOffsetY: 10
} }
}, },
areaStyle: { areaStyle: {
normal: { normal: {
color: new echarts.graphic.LinearGradient( color: !this.showShadow?'transparent':this.area_flag
? new echarts.graphic.LinearGradient(
0, 0,
0, 0,
0, 0,
...@@ -95,16 +109,23 @@ export default { ...@@ -95,16 +109,23 @@ export default {
[ [
{ {
offset: 0, offset: 0,
color: hexToRgba(color[idx], 0.3) color: hexToRgba(
this.zzfw ? color2[idx] : color[idx],
0.3
)
}, },
{ {
offset: 1, offset: 1,
color: hexToRgba(color[idx], 0.1) color: hexToRgba(
this.zzfw ? color2[idx] : color[idx],
0.1
)
} }
], ],
false false
), )
shadowColor: hexToRgba(color[idx], 0.1), : "rgba(0,0,0,0)",
shadowColor: !this.showShadow?'none':hexToRgba(this.zzfw ? color2[idx] : color[idx], 0.1),
shadowBlur: 10 shadowBlur: 10
} }
}, },
...@@ -118,11 +139,11 @@ export default { ...@@ -118,11 +139,11 @@ export default {
}); });
var option = { var option = {
backgroundColor: bgColor, // backgroundColor: bgColor,
color: color, color: this.zzfw ? color2 : color,
legend: { legend: {
// show:false,//是否显示图例 show: yarr.length >= 2, //是否显示图例
right: "center", // right: "center",
bottom: 0, bottom: 0,
itemWidth: 10, itemWidth: 10,
itemHeight: 10, itemHeight: 10,
...@@ -161,7 +182,7 @@ export default { ...@@ -161,7 +182,7 @@ export default {
} }
}, },
splitArea: { splitArea: {
show: true, show: this.area_flag,
areaStyle: { areaStyle: {
color: ["#fff", "#f8f9fd"], color: ["#fff", "#f8f9fd"],
opacity: 0.5 opacity: 0.5
......
src/components/e-charts/multiple_circle.vue
View file @ 939e617e
...@@ -24,6 +24,18 @@ export default { ...@@ -24,6 +24,18 @@ export default {
bar_width: { bar_width: {
type: Number, type: Number,
default: 5 default: 5
},
isFwsp: {
type: Boolean,
default: false
},
isPercent: {
type: Boolean,
default: true
},
color: {
type: Array,
default: null
} }
}, },
components: {}, components: {},
...@@ -36,7 +48,8 @@ export default { ...@@ -36,7 +48,8 @@ export default {
data: { data: {
handler() { handler() {
this.init_yylx_asy(this.data, this.text); this.init_yylx_asy(this.data, this.text);
} },
deep: true,
} }
}, },
computed: {}, computed: {},
...@@ -76,7 +89,8 @@ export default { ...@@ -76,7 +89,8 @@ export default {
}; };
var data = []; var data = [];
var total = 0; var total = 0;
var color = ["#274fee", "#25bdb1", "#ffc95c", "#e56600", "#e15260"]; var color = this.color?this.color:["#274fee", "#f5ab4c", "#e15260", "#a9aec0", "#e56600"];
var color2 = ["#ef9433", "#515fe7"];
var legendarr = []; var legendarr = [];
var temp2_data = 0; var temp2_data = 0;
data_val.forEach(e => { data_val.forEach(e => {
...@@ -91,7 +105,7 @@ export default { ...@@ -91,7 +105,7 @@ export default {
normal: { normal: {
borderWidth: this.bar_width, borderWidth: this.bar_width,
// shadowBlur: 20, // shadowBlur: 20,
borderColor: color[i] borderColor: this.isFwsp ? color2[i] : color[i]
// shadowColor: color[i], // shadowColor: color[i],
} }
} }
...@@ -112,9 +126,10 @@ export default { ...@@ -112,9 +126,10 @@ export default {
name: "", name: "",
type: "pie", type: "pie",
clockWise: false, clockWise: false,
radius: [65, 68], radius: [60, 63],
center: ["50%", "50%"], center: ["50%", "46%"],
hoverAnimation: false, hoverAnimation: false,
avoidLabelOverlap: true,
itemStyle: { itemStyle: {
normal: { normal: {
label: { label: {
...@@ -122,13 +137,24 @@ export default { ...@@ -122,13 +137,24 @@ export default {
position: "outside", position: "outside",
color: "#58617a", color: "#58617a",
formatter: params => { formatter: params => {
if (this.isPercent) {
var percent = 0; var percent = 0;
percent = total != 0 ? ((params.value / total) * 100).toFixed(2) : 0; percent =
total != 0
? ((params.value / total) * 100).toFixed(2)
: 0;
if (params.name !== "") { if (params.name !== "") {
return percent + "%"; return percent + "%";
} else { } else {
return ""; return "";
} }
} else {
if (params.name !== "") {
return params.value + "个";
} else {
return "";
}
}
}, },
rich: rich rich: rich
} }
...@@ -149,11 +175,11 @@ export default { ...@@ -149,11 +175,11 @@ export default {
subtextStyle: { subtextStyle: {
color: "#c9cedd" color: "#c9cedd"
}, },
itemGap: -10, // 主副标题距离 itemGap: 0, // 主副标题距离
left: "center", left: "center",
top: "center" top: "32%"
}, },
color: color, color: this.isFwsp ? color2 : color,
tooltip: { tooltip: {
show: false show: false
}, },
......
src/components/e-charts/process-top-list.vue 0 → 100644
View file @ 939e617e
<template>
<div class="top_list apaas_scroll" @mouseenter="mouseenter" @mouseleave="mouseleave">
<ul>
<li class="item_list" v-for="(option, index) in options" :key="index">
<div class="item_detail">
<p class="item_info">
<span
class="text_clip is_link"
@click="getDetail(option.service_id, option.data_service_type1)"
>
{{ option.service_name }}
</span>
</p>
<el-progress
class="item_progress"
:percentage="getPercent(option.request_count)"
:show-text="false"
color="#e56600"
></el-progress>
<span
style="float:right;"
v-text="helper.numberFormat(option.request_count, 2) + (option.request_count > 10000 ? '万'+unit : unit)"
></span>
</div>
</li>
</ul>
</div>
</template>
<script>
import helper from "@/services/helper";
export default {
props: {
options: {
type: Array,
default: () => []
},
targetValue: {
type: Number,
default: () => 0
},
unit: {
type: String,
default: () => '次'
},
},
data() {
return {
timer: null,
helper
};
},
watch: {
text() {
this.autoScroll();
}
},
methods: {
getPercent(value) {
if (value == 0) {
return 0;
} else {
return Math.min((value / this.targetValue) * 100, 100);
}
},
autoScroll() {
if (this.timer) {
clearInterval(this.timer);
}
this.$el.scrollTop = 0;
this.timer = setInterval(() => {
let itemHeight = 50;
let curScrollTop = this.$el.scrollTop + itemHeight;
if (curScrollTop >= this.$el.scrollHeight - this.$el.clientHeight + itemHeight) {
curScrollTop = 0;
}
this.$el.scrollTop = Math.min(curScrollTop, this.$el.scrollHeight - this.$el.clientHeight);
}, 1500);
},
mouseenter() {
if (this.timer) {
clearInterval(this.timer);
}
},
mouseleave() {
this.autoScroll();
},
getDetail(id, type) {
}
},
mounted() {
this.autoScroll();
window.addEventListener("resize", () => {
this.autoScroll();
});
},
destroyed() {
if (this.timer) {
clearInterval(this.timer);
}
}
};
</script>
<style scoped>
.top_list {
overflow-x: hidden;
overflow-y: auto;
}
.item_list {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 18px;
}
.item_index {
width: 35px;
flex-shrink: 0;
margin-right: 10px;
font-size: 12px;
color: #58617a;
}
.item_logo {
margin-right: 10px;
flex-shrink: 0;
font-size: 0;
border: 2px solid #e3e5ef;
border-radius: 6px;
overflow: hidden;
}
.item_info {
flex-grow: 1;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 14px;
line-height: 20px;
color: #58617a;
}
.item_detail {
flex-grow: 1;
}
.item_info > span:first-child {
width: 100px;
flex-grow: 1;
margin-right: 10px;
color:#58617a;
font-size: 14px;
}
.item_info > span:first-child > i {
font-weight: bold;
font-size: 12px;
color: #8e96ab;
}
.item_info > span:nth-child(2) {
flex-shrink: 0;
white-space: nowrap;
color: #0d1847;
}
.item_progress {
margin-top: 6px;
width: calc(100% - 60px);
float: left;
}
.is_link {
cursor: pointer;
}
</style>
src/components/e-charts/rankList.vue 0 → 100644
View file @ 939e617e
<template>
<div
class="top_list apaas_scroll"
@mouseenter="mouseenter"
@mouseleave="mouseleave"
>
<ul>
<li class="rank_list" v-for="(option, index) in options" :key="index">
<div class="item_index">
<span v-text="'TOP' + (index + 1)"></span>
</div>
<div class="item_logo">
<el-avatar
shape="square"
:size="28"
:src="option.cover"
fit="cover"
/>
</div>
<div class="item_detail">
<p class="item_info">
<span>{{ option.name }}</span>
<span v-text="option.percentage + '%'"></span>
</p>
<el-progress
class="item_progress"
:percentage="option.percentage"
:show-text="false"
color="#e56600"
></el-progress>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
options: {
type: Array,
default: () => [],
},
},
data() {
return {
timer: null,
};
},
watch: {
options: {
handler() {
this.autoScroll();
},
deep: true,
},
},
methods: {
autoScroll() {
if (this.timer) {
clearInterval(this.timer);
}
this.$el.scrollTop = 0;
this.timer = setInterval(() => {
let itemHeight = 50;
let curScrollTop = this.$el.scrollTop + itemHeight;
if (
curScrollTop >=
this.$el.scrollHeight - this.$el.clientHeight + itemHeight
) {
curScrollTop = 0;
}
this.$el.scrollTop = Math.min(
curScrollTop,
this.$el.scrollHeight - this.$el.clientHeight
);
}, 1500);
},
mouseenter() {
if (this.timer) {
clearInterval(this.timer);
}
},
mouseleave() {
this.autoScroll();
},
},
mounted() {
this.autoScroll();
window.addEventListener("resize", () => {
this.autoScroll();
});
},
destroyed() {
if (this.timer) {
clearInterval(this.timer);
}
},
};
</script>
<style scoped>
.top_list {
overflow-x: hidden;
overflow-y: auto;
}
.rank_list {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 18px;
}
.item_index {
width: 35px;
flex-shrink: 0;
margin-right: 10px;
font-size: 12px;
color: #58617a;
}
.item_logo {
margin-right: 10px;
flex-shrink: 0;
font-size: 0;
border: 2px solid #e3e5ef;
border-radius: 6px;
overflow: hidden;
}
.item_info {
flex-grow: 1;
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 14px;
line-height: 20px;
color: #58617a;
}
.item_detail {
flex-grow: 1;
}
.item_info > span:first-child {
width: 100px;
flex-grow: 1;
margin-right: 10px;
}
.item_info > span:first-child > i {
font-weight: bold;
font-size: 12px;
color: #8e96ab;
}
.item_info > span:nth-child(2) {
flex-shrink: 0;
white-space: nowrap;
color: #0d1847;
}
.item_progress {
margin-top: 6px;
}
.is_link {
cursor: pointer;
}
</style>
src/components/e-charts/single_circle.vue
View file @ 939e617e
...@@ -13,24 +13,24 @@ export default { ...@@ -13,24 +13,24 @@ export default {
return { return {
num: 0, num: 0,
color: "#e15260", color: "#e15260",
text: "敏感" text: "敏感",
}; };
} },
} },
}, },
components: {}, components: {},
data() { data() {
return { return {
health: uuidv1() health: uuidv1(),
}; };
}, },
watch: { watch: {
data: { data: {
handler(val) { handler(val) {
console.log(val);
this.init_health(this.data.num, this.data.color, this.data.text); this.init_health(this.data.num, this.data.color, this.data.text);
} },
} deep: true,
},
}, },
computed: {}, computed: {},
created() {}, created() {},
...@@ -40,22 +40,22 @@ export default { ...@@ -40,22 +40,22 @@ export default {
methods: { methods: {
init_health(num, color, text) { init_health(num, color, text) {
var options = { var options = {
color:[color,'#c9cedd'], color: [color, "#c9cedd"],
title: { title: {
text: num + "%", text: num + "%",
textStyle: { textStyle: {
color: "#000", color: "#000",
fontSize: 26, fontSize: 26,
fontWeight: 200 fontWeight: 200,
}, },
subtext: text, subtext: text,
subtextStyle: { subtextStyle: {
color: "#707693", color: "#707693",
fontSize: 12 fontSize: 12,
}, },
itemGap: 0, // 主副标题距离 itemGap: 0, // 主副标题距离
left: "center", left: "center",
top: "center" top: "center",
}, },
angleAxis: { angleAxis: {
max: 100, // 满分 max: 100, // 满分
...@@ -63,119 +63,124 @@ export default { ...@@ -63,119 +63,124 @@ export default {
startAngle: 90, startAngle: 90,
// 隐藏刻度线 // 隐藏刻度线
axisLine: { axisLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
show: false show: false,
}, },
splitLine: { splitLine: {
show: false show: false,
} },
}, },
radiusAxis: { radiusAxis: {
type: "category", type: "category",
// 隐藏刻度线 // 隐藏刻度线
axisLine: { axisLine: {
show: false show: false,
}, },
axisTick: { axisTick: {
show: false show: false,
}, },
axisLabel: { axisLabel: {
show: false show: false,
}, },
splitLine: { splitLine: {
show: false show: false,
} },
}, },
polar: { polar: {
center: ["50%", "50%"], center: ["50%", "50%"],
radius: "140%" //图形大小 radius: "140%", //图形大小
}, },
series: [ series: [
{ {
type: 'pie', type: "pie",
z:5, z: 5,
center:['50%','50%'], center: ["50%", "50%"],
radius:['68%','72%'], radius: ["68%", "72%"],
silent:true, silent: true,
label: { label: {
normal: { normal: {
show: false show: false,
}, },
emphasis: { emphasis: {
show: false show: false,
} },
}, },
labelLine: { labelLine: {
normal: { normal: {
show: false show: false,
}, },
emphasis: { emphasis: {
show: false show: false,
} },
}, },
tooltip: { tooltip: {
show: false show: false,
},
data: [
{
name: "",
value: num,
},
{
name: "",
value: 100 - num,
}, },
data:[{ ],
name:'',
value:num
},{
name:'',
value:100 - num
}]
}, },
{ {
type:'pie', type: "pie",
z:4, z: 4,
center:['50%','50%'], center: ["50%", "50%"],
radius:['60%','80%'], radius: ["60%", "80%"],
hoverAnimation:false, hoverAnimation: false,
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { label: {
normal: { normal: {
show: false show: false,
}, },
emphasis: { emphasis: {
show: false show: false,
} },
}, },
labelLine: { labelLine: {
normal: { normal: {
show: false show: false,
}, },
emphasis: { emphasis: {
show: false show: false,
} },
}, },
tooltip: { tooltip: {
show: false show: false,
}, },
itemStyle: { itemStyle: {
normal: { normal: {
color:'#f6f7fc' color: "#f6f7fc",
} },
},
emphasis: {
show: false,
itemStyle: {
color: "#f6f7fc",
}, },
emphasis:{
show:false,
itemStyle:{
color:'#f6f7fc'
}
}, },
data: [{ data: [
{
value: 1, value: 1,
}], },
} ],
] },
],
}; };
window[this.health] = echarts.init(document.getElementById(this.health)); window[this.health] = echarts.init(document.getElementById(this.health));
window[this.health].setOption(options, true); window[this.health].setOption(options, true);
} },
} },
}; };
</script> </script>
......
src/components/e-charts/the-list.vue 0 → 100644
View file @ 939e617e
<template>
<div
class="the_list apaas_scroll"
@mouseenter="mouseenter"
@mouseleave="mouseleave"
>
<ul>
<li class="item" v-for="(item, idx) in data" :key="idx">
<span
:class="
idx == 0 ? 'one' : idx == 1 ? 'two' : idx == 2 ? 'three' : 'lis'
"
class="pm"
>
{{ idx + 1 }}.
</span>
<img :src="item.PicturePath || require('../../assets/imgs/img_head.png')" />
<p class="text_clip">
<span class="name">{{ item.UserName }}</span><br>
<span class="init">{{ item.SystemName }}</span>
</p>
<span class="count">{{ getCount(item.Count) }}次</span>
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
data: {
type: Array,
default() {
return [];
},
},
},
watch: {
data: {
handler() {
this.autoScroll();
},
deep: true,
},
},
methods: {
getCount(val) {
let a = val + "";
if (a.length > 3) {
return a.substr(0, 1) + "," + a.substr(1);
} else {
return a;
}
},
autoScroll() {
if (this.timer) {
clearInterval(this.timer);
}
this.$el.scrollTop = 0;
this.timer = setInterval(() => {
let itemHeight = 60;
let curScrollTop = this.$el.scrollTop + itemHeight;
if (
curScrollTop >=
this.$el.scrollHeight - this.$el.clientHeight + itemHeight
) {
curScrollTop = 0;
}
this.$el.scrollTop = Math.min(
curScrollTop,
this.$el.scrollHeight - this.$el.clientHeight
);
}, 1500);
},
mouseenter() {
if (this.timer) {
clearInterval(this.timer);
}
},
mouseleave() {
this.autoScroll();
},
},
mounted() {
this.autoScroll();
window.addEventListener("resize", () => {
this.autoScroll();
});
},
destroyed() {
if (this.timer) {
clearInterval(this.timer);
}
},
};
</script>
<style scoped>
.the_list {
overflow-x: hidden;
overflow-y: auto;
}
.item {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.item > .pm {
flex-shrink: 0;
width: 14px;
font-family: Arial-Black;
font-style: italic;
font-stretch: normal;
letter-spacing: 0px;
font-weight: bold;
font-size: 20px;
}
.item > .pm.one {
color: #d9ac64;
}
.item > .pm.two {
color: #c4c4c0;
}
.item > .pm.three {
color: #ba6e40;
}
.item > .pm.lis {
color: #333;
}
.item > img {
flex-shrink: 0;
height: 35px;
width: 35px;
border-radius: 50%;
margin-left: 15px;
}
.item > p {
flex-grow: 1;
flex-shrink: 1;
margin-left: 10px;
}
.item > p > .init {
color: #8890a7;
margin-top: 3px;
}
.item > .count {
flex-shrink: 0;
height: 19px;
font-family: ArialMT;
font-size: 22px;
font-weight: normal;
font-stretch: normal;
line-height: 17px;
letter-spacing: 0px;
color: #515fe7;
white-space: nowrap;
margin-left: 10px;
}
</style>
src/components/e-charts/toplist.vue
View file @ 939e617e
<template> <template>
<div class="top_list apaas_scroll" @mouseenter="mouseenter" @mouseleave="mouseleave"> <div
class="top_list apaas_scroll"
@mouseenter="mouseenter"
@mouseleave="mouseleave"
>
<ul> <ul>
<li class="item_list" v-for="(option, index) in options" :key="index"> <li class="item_list" v-for="(option, index) in options" :key="index">
<div class="item_index"> <div class="item_index">
<span v-text="'TOP' + (index + 1)"></span> <span v-text="'TOP' + (index + 1)"></span>
</div> </div>
<div class="item_logo"> <div class="item_logo">
<el-avatar shape="square" :size="28" fit="cover" :src="option.cover" /> <el-avatar
shape="square"
:size="28"
fit="cover"
:src="option.cover"
/>
</div> </div>
<div class="item_detail"> <div class="item_detail">
<p class="item_info"> <p class="item_info">
<span <span
v-if="isShowjt"
class="text_clip is_link" class="text_clip is_link"
@click="getDetail(option.service_id, option.data_service_type1)" @click="getDetail(option.service_id, option.data_service_type1)"
> >
{{ option.service_name }} {{ option.service_name }}
<i class="el-icon-arrow-right"></i> <i class="el-icon-arrow-right"></i>
</span> </span>
<span v-else>{{ option.service_name }}</span>
<span <span
v-text="helper.numberFormat(option.request_count, 2) + (option.request_count > 10000 ? '万次' : '次')" v-text="
isPercent
? ((option.request_count / targetValue) * 100).toFixed(2) +
'%'
: helper.numberFormat(option.request_count, 2) +
(option.request_count > 10000 ? '万次' : '次')
"
></span> ></span>
</p> </p>
<el-progress <el-progress
...@@ -39,23 +56,34 @@ export default { ...@@ -39,23 +56,34 @@ export default {
props: { props: {
options: { options: {
type: Array, type: Array,
default: () => [] default: () => [],
}, },
targetValue: { targetValue: {
type: Number, type: Number,
default: () => 0 default: () => 0,
} },
isShowjt: {
type: Boolean,
default: true,
},
isPercent: {
type: Boolean,
default: false,
},
}, },
data() { data() {
return { return {
timer: null, timer: null,
helper helper,
}; };
}, },
watch: { watch: {
text() { options: {
handler() {
this.autoScroll(); this.autoScroll();
} },
deep: true,
},
}, },
methods: { methods: {
getPercent(value) { getPercent(value) {
...@@ -75,12 +103,16 @@ export default { ...@@ -75,12 +103,16 @@ export default {
this.timer = setInterval(() => { this.timer = setInterval(() => {
let itemHeight = 50; let itemHeight = 50;
let curScrollTop = this.$el.scrollTop + itemHeight; let curScrollTop = this.$el.scrollTop + itemHeight;
if (
if (curScrollTop >= this.$el.scrollHeight - this.$el.clientHeight + itemHeight) { curScrollTop >=
this.$el.scrollHeight - this.$el.clientHeight + itemHeight
) {
curScrollTop = 0; curScrollTop = 0;
} }
this.$el.scrollTop = Math.min(
this.$el.scrollTop = Math.min(curScrollTop, this.$el.scrollHeight - this.$el.clientHeight); curScrollTop,
this.$el.scrollHeight - this.$el.clientHeight
);
}, 1500); }, 1500);
}, },
mouseenter() { mouseenter() {
...@@ -108,11 +140,11 @@ export default { ...@@ -108,11 +140,11 @@ export default {
default: default:
this.$message({ this.$message({
message: "查看详情失败", message: "查看详情失败",
type: "warning" type: "warning",
}); });
break; break;
} }
} },
}, },
mounted() { mounted() {
this.autoScroll(); this.autoScroll();
...@@ -124,7 +156,7 @@ export default { ...@@ -124,7 +156,7 @@ export default {
if (this.timer) { if (this.timer) {
clearInterval(this.timer); clearInterval(this.timer);
} }
} },
}; };
</script> </script>
......
src/components/general/block-radius.vue
View file @ 939e617e
...@@ -55,6 +55,7 @@ export default { ...@@ -55,6 +55,7 @@ export default {
<style scoped> <style scoped>
.block_radius { .block_radius {
background-color: #fff; background-color: #fff;
box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.05);
border-radius: 10px; border-radius: 10px;
padding: 20px; padding: 20px;
margin-bottom: 20px; margin-bottom: 20px;
......
src/components/general/codes.vue
View file @ 939e617e
...@@ -17,12 +17,17 @@ import ace from "ace-builds"; ...@@ -17,12 +17,17 @@ import ace from "ace-builds";
import "ace-builds/webpack-resolver"; // 在 webpack 环境中使用必须要导入 import "ace-builds/webpack-resolver"; // 在 webpack 环境中使用必须要导入
import "ace-builds/src-noconflict/mode-json"; // 默认设置的语言模式 import "ace-builds/src-noconflict/mode-json"; // 默认设置的语言模式
export default { export default {
props: ["url","datas"], props: {
url: {
type: String,
default: "",
},
datas: { type: String, default: "" },
readOnly: { type: Boolean, default: false },
},
data() { data() {
return { return {
aceEditor: null, aceEditor: null,
themePath: "ace/theme/monokai", // 不导入 webpack-resolver，该模块路径会报错
modePath: this.acemodePath
}; };
}, },
...@@ -31,16 +36,25 @@ export default { ...@@ -31,16 +36,25 @@ export default {
maxLines: 24, maxLines: 24,
minLines: 10, minLines: 10,
fontSize: 14, fontSize: 14,
mode: this.acemodePath, wrap: true,
wrap: this.wrap, tabSize: 2,
tabSize: 4, highlightActiveLine: false,
highlightActiveLine: false readOnly: this.readOnly,
}); });
if (this.url) { if (this.url) {
this.getValue(); this.getValue();
} }
if (this.datas) { if (this.datas) {
this.aceEditor.setValue(this.datas); let obj = "";
console.log(typeof JSON.parse(this.datas));
try {
if (typeof JSON.parse(this.datas) == "object") {
obj = JSON.stringify(JSON.parse(this.datas), null, "\t");
}
} catch (e) {
obj = this.datas;
}
this.aceEditor.setValue(obj);
} }
}, },
watch: {}, watch: {},
...@@ -48,10 +62,10 @@ export default { ...@@ -48,10 +62,10 @@ export default {
getValue() { getValue() {
this.$http this.$http
.get(this.url) .get(this.url)
.then(response => { .then((response) => {
this.aceEditor.setValue(response.data); this.aceEditor.setValue(response.data);
}) })
.catch(function(response) { .catch(function (response) {
console.log(response); console.log(response);
}); });
}, },
...@@ -60,8 +74,8 @@ export default { ...@@ -60,8 +74,8 @@ export default {
}, },
getCodesVal() { getCodesVal() {
return this.aceEditor.getValue(); return this.aceEditor.getValue();
} },
} },
}; };
</script> </script>
<style scoped> <style scoped>
......
src/components/general/cropper.vue
View file @ 939e617e
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<i class="el-icon-refresh-right img_replace"></i> <i class="el-icon-refresh-right img_replace"></i>
<input <input
type="file" type="file"
id="upItem1"
class="up_input" class="up_input"
accept="image/png, image/jpeg, image/gif, image/jpg" accept="image/png, image/jpeg, image/gif, image/jpg"
@change="uploadImg($event,1)" @change="uploadImg($event,1)"
...@@ -21,6 +22,7 @@ ...@@ -21,6 +22,7 @@
<i class="el-icon-plus add_icon"></i> <i class="el-icon-plus add_icon"></i>
<input <input
type="file" type="file"
id="upItem2"
class="up_input" class="up_input"
accept="image/png, image/jpeg, image/gif, image/jpg" accept="image/png, image/jpeg, image/gif, image/jpg"
@change="uploadImg($event,1)" @change="uploadImg($event,1)"
...@@ -49,6 +51,7 @@ ...@@ -49,6 +51,7 @@
:autoCropWidth="options.autoCropWidth" :autoCropWidth="options.autoCropWidth"
:autoCropHeight="options.autoCropHeight" :autoCropHeight="options.autoCropHeight"
:centerBox="options.centerBox" :centerBox="options.centerBox"
:mode="options.mode"
@realTime="realTime" @realTime="realTime"
></vueCropper> ></vueCropper>
</div> </div>
...@@ -70,30 +73,30 @@ ...@@ -70,30 +73,30 @@
import { VueCropper } from "vue-cropper"; import { VueCropper } from "vue-cropper";
export default { export default {
components: { components: {
VueCropper VueCropper,
}, },
props: { props: {
fileArray: { fileArray: {
type: Array, type: Array,
default: () => { default: () => {
[]; [];
} },
}, },
fit: { fit: {
type: String, type: String,
default: "" default: "",
}, },
max: { max: {
type: Number, type: Number,
default: 1 default: 1,
} },
}, },
watch: { watch: {
fileArray: { fileArray: {
handler(val) { handler(val) {
this.fileArr = val; this.fileArr = val;
} },
} },
}, },
data() { data() {
return { return {
...@@ -104,7 +107,8 @@ export default { ...@@ -104,7 +107,8 @@ export default {
canMoveBox: true, //截图框不能拖动 canMoveBox: true, //截图框不能拖动
autoCropWidth: 200, //截图框宽度 autoCropWidth: 200, //截图框宽度
autoCropHeight: 200, //截图框高度 autoCropHeight: 200, //截图框高度
centerBox: false //截图框被限制在图片里面 centerBox: true, //截图框被限制在图片里面
mode: "cover",
}, },
previews: {}, //实时预览图数据 previews: {}, //实时预览图数据
attach: { attach: {
...@@ -112,16 +116,24 @@ export default { ...@@ -112,16 +116,24 @@ export default {
userId: "", userId: "",
customaryUrl: "", //原图片路径 customaryUrl: "", //原图片路径
laterUrl: "", //裁剪后图片路径 laterUrl: "", //裁剪后图片路径
attachType: "photo" //附件类型 attachType: "photo", //附件类型
}, },
fileName: "", //本机文件地址 fileName: "", //本机文件地址
uploadImgRelaPath: "", //上传后图片地址 uploadImgRelaPath: "", //上传后图片地址
fileArr: [] fileArr: [],
}; };
}, },
methods: { methods: {
//控制弹出层关闭 //控制弹出层关闭
handleClose() { handleClose() {
let abc1 = document.getElementById("upItem1");
let abc2 = document.getElementById("upItem2");
if (abc1) {
abc1.value = "";
}
if (abc2) {
abc2.value = "";
}
this.dialogVisible = false; this.dialogVisible = false;
}, },
//实时预览 //实时预览
...@@ -143,7 +155,7 @@ export default { ...@@ -143,7 +155,7 @@ export default {
//fileReader 接口，用于异步读取文件数据 //fileReader 接口，用于异步读取文件数据
var reader = new FileReader(); var reader = new FileReader();
reader.readAsDataURL(file); //重要 以dataURL形式读取文件 reader.readAsDataURL(file); //重要 以dataURL形式读取文件
reader.onload = e => { reader.onload = (e) => {
// data = window.URL.createObjectURL(new Blob([e.target.result])) 转化为blob格式 // data = window.URL.createObjectURL(new Blob([e.target.result])) 转化为blob格式
let data = e.target.result; let data = e.target.result;
...@@ -158,24 +170,24 @@ export default { ...@@ -158,24 +170,24 @@ export default {
//确认截图,上传 //确认截图,上传
cut(type) { cut(type) {
var formData = new FormData(); var formData = new FormData();
this.$refs.cropper.getCropBlob(res => { this.$refs.cropper.getCropBlob((res) => {
//res是裁剪后图片的bolb对象 //res是裁剪后图片的bolb对象
formData.append("file", res, this.userId); formData.append("file", res, this.userId);
formData.append("directory", "image"); formData.append("directory", "image");
let url = "/apaas/static/image/upload"; let url = "/apaas/static/image/upload";
this.$http this.$http
.post(url, formData, { .post(url, formData, {
headers: { "Content-Type": "multipart/form-data" } headers: { "Content-Type": "multipart/form-data" },
}) })
.then(res => { .then((res) => {
this.fileArr = [{ name: res.data.data, url: res.data.data }]; this.fileArr = [{ name: res.data.data, url: res.data.data }];
// 上传图片后服务器返回访问路径 // 上传图片后服务器返回访问路径
this.$emit("getNewUrl", res.data.data); this.$emit("getNewUrl", res.data.data);
this.handleClose(); this.handleClose();
}); });
}); });
} },
} },
}; };
</script> </script>
......
src/components/general/side-nav-bar-class.vue 0 → 100644
View file @ 939e617e
<template>
<div class="side_nav_bar">
<h3 class="side_nav_bar_title" @click="titleAction">
<img :src="titleIcon" width="20" style="margin-right: 10px;" />
<span v-text="title"></span>
</h3>
<div v-for="(nav, index) in navList" :key="'nav' + index">
<div class="side_nav_bar_first_title">{{ nav.name }}</div>
<ul class="side_nav_bar_list">
<router-link
tag="li"
v-for="(item, indexs) in nav.child"
:class="{ current: $route.path.indexOf(item.path) > -1 }"
:key="index + 'a' + indexs"
:to="item.path"
>
<span v-text="item.name"></span>
</router-link>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "sideNavBar",
props: {
title: {
type: String,
default: () => "我的服务",
},
titleIcon: {
type: String,
default: () => require("@/assets/imgs/tool_fuwu.png"),
},
titlePath: {
type: String,
default: () => "",
},
navList: {
type: Array,
default: () => [],
},
imgSrc: {
type: String,
default: "tool_fuwu",
},
},
methods: {
titleAction() {
if (this.titlePath) {
this.$router.push(this.titlePath);
}
},
},
};
</script>
<style scoped>
.side_nav_bar {
background-color: #0d1847;
}
.side_nav_bar_title {
height: 40px;
background-color: #182665;
border-radius: 10px;
overflow: hidden;
margin: 20px 15px 20px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.side_nav_bar_title > span {
font-size: 16px;
color: #c3caf8;
}
.side_nav_bar_first_title {
color: #c3caf8;
font-size: 14px;
padding: 10px 0 10px 34px;
position: relative;
}
.side_nav_bar_first_title::before {
content: "";
position: absolute;
left: 22px;
top: 12px;
width: 4px;
height: 16px;
background-color: #515fe7;
border-radius: 2px;
}
.side_nav_bar_list > li {
padding: 12px 10px 12px 42px;
border-left: 5px solid #0d1847;
font-size: 14px;
line-height: 24px;
color: #6573ae;
cursor: pointer;
}
.side_nav_bar_list > li:hover,
.side_nav_bar_list > li.current {
border-left: 5px solid #e56600;
background-color: #182665;
color: #e6ebfe;
}
</style>
src/components/general/upload_file.vue
View file @ 939e617e
...@@ -24,6 +24,7 @@ ...@@ -24,6 +24,7 @@
:readOnly="readOnly" :readOnly="readOnly"
:data="anotherData" :data="anotherData"
:drag="drag" :drag="drag"
:disabled="disabled"
> >
<div v-if="drag"> <div v-if="drag">
<i class="el-icon-upload"></i> <i class="el-icon-upload"></i>
...@@ -92,6 +93,10 @@ export default { ...@@ -92,6 +93,10 @@ export default {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
disabled: {
type: Boolean,
default: false,
},
}, },
watch: { watch: {
list(value) { list(value) {
......
src/components/infoList.vue
View file @ 939e617e
...@@ -54,6 +54,7 @@ a { ...@@ -54,6 +54,7 @@ a {
.list p { .list p {
line-height: 32px; line-height: 32px;
color: #8890a7; color: #8890a7;
word-wrap:break-word;
} }
.list { .list {
margin-bottom: 20px; margin-bottom: 20px;
......
src/components/menu.vue
View file @ 939e617e
<template> <template>
<div class="menu"> <div class="menu">
<img <img src="../assets/imgs/home_img_logo.png" alt class="logo" />
@click="gotopage('/services_shop')"
src="../assets/imgs/home_img_logo.png"
alt
class="logo"
/>
<div style="float:right;cursor: pointer;position:relative;" class="user_hover"> <div style="float:right;cursor: pointer;position:relative;" class="user_hover">
<span <span
v-if="userInfo.user_name && userInfo.user_name != ''" v-if="userInfo.user_name && userInfo.user_name != ''"
...@@ -13,11 +8,11 @@ ...@@ -13,11 +8,11 @@
>{{ userInfo.user_name }}</span> >{{ userInfo.user_name }}</span>
<span v-else @click="gotopage('login')" class="user">请登录</span> <span v-else @click="gotopage('login')" class="user">请登录</span>
<img <img
:class="userInfo.picture_path ? 'user_pic' : 'user_default'" :class="userInfo.picture_path && false ? 'user_pic' : 'user_default'"
:src=" src="../assets/imgs/home_ic_user.png"
userInfo.picture_path || require('../assets/imgs/home_ic_user.png')
"
/> />
<span class="has_msg" v-if="unreadMessageCount > 0"></span>
<!-- 菜单图片不需要动态渲染，只用ui给的图标 -->
<div v-if="userInfo.user_name && userInfo.user_name != ''" class="user_menu"> <div v-if="userInfo.user_name && userInfo.user_name != ''" class="user_menu">
<div <div
v-for="(item, index) in user_arr" v-for="(item, index) in user_arr"
...@@ -25,10 +20,21 @@ ...@@ -25,10 +20,21 @@
@mouseleave.stop="change_now_hover(-1)" @mouseleave.stop="change_now_hover(-1)"
@mouseenter.stop="change_now_hover(index)" @mouseenter.stop="change_now_hover(index)"
@click="gotopage(item.visit_url)" @click="gotopage(item.visit_url)"
>{{ item.menu_name }}</div> >
{{ item.menu_name }}
<span
v-if="unreadMessageCount > 0 && item.visit_url === '/user/notice'"
class="width_num"
v-text="unreadMessageCount"
></span>
</div>
<div @click="gotopage('logout')">退出登录</div> <div @click="gotopage('logout')">退出登录</div>
</div> </div>
<div v-if="userInfo.user_name && userInfo.user_name != ''" class="sj" :style="now_hover==0?{backgroundColor:'#e56600'}:{}"></div> <div
v-if="userInfo.user_name && userInfo.user_name != ''"
class="sj"
:style="now_hover==0?{backgroundColor:'#e56600'}:{}"
></div>
</div> </div>
<div <div
v-if="show_shop_menu" v-if="show_shop_menu"
...@@ -92,7 +98,11 @@ ...@@ -92,7 +98,11 @@
@click.stop="gotoChildPage(v, item.visit_url)" @click.stop="gotoChildPage(v, item.visit_url)"
>{{ v.menu_name }}</div> >{{ v.menu_name }}</div>
</div> </div>
<div class="sj" v-if="item.Child && item.Child.length" :style="now_hover==0?{backgroundColor:'#e56600',left: '60px'}:{left: '60px'}"></div> <div
class="sj"
v-if="item.Child && item.Child.length"
:style="now_hover==0?{backgroundColor:'#e56600',left: '60px'}:{left: '60px'}"
></div>
<div class="bottom_show" v-if="now_menu == item.visit_url"></div> <div class="bottom_show" v-if="now_menu == item.visit_url"></div>
</div> </div>
</div> </div>
...@@ -100,6 +110,7 @@ ...@@ -100,6 +110,7 @@
</template> </template>
<script> <script>
const gisServiceUrl = window.serviceConfig.gisServiceRoot;
export default { export default {
data() { data() {
return { return {
...@@ -114,8 +125,8 @@ export default { ...@@ -114,8 +125,8 @@ export default {
], ],
shopping_list: [], shopping_list: [],
menuCartNum: 0, menuCartNum: 0,
now_hover:-1, now_hover: -1,
show_shop_menu: false show_shop_menu: false,
}; };
}, },
mounted() { mounted() {
...@@ -128,20 +139,37 @@ export default { ...@@ -128,20 +139,37 @@ export default {
}, },
userInfo() { userInfo() {
return this.$store.state.userInfo || {}; return this.$store.state.userInfo || {};
} },
unreadMessageCount() {
return this.$store.state.unreadMessageCount;
},
getRouter() {
return this.$route.path;
},
}, },
watch: { watch: {
getMenuCartState(newVal) { getMenuCartState(newVal) {
this.getList(); this.getList();
},
getRouter(val) {
if (
val == "/services_shop" ||
val == "/technical_support" ||
val == "/workplace"
) {
this.now_menu = val;
} }
}, },
},
methods: { methods: {
change_now_hover(n){ change_now_hover(n) {
this.now_hover = n this.now_hover = n;
}, },
gotopage(n) { gotopage(n) {
if (n == "logout") { if (n == "logout") {
window.location.href = "/iam/api/logout"; window.location.href =
gisServiceUrl +
`/portal/sharing/rest/oauth2/signout?client_id=arcgisonline&redirect_uri=${window.location.protocol}//${window.location.host}/iam/api/logout`;
} else if (n == "login") { } else if (n == "login") {
let path = this.$route.path; let path = this.$route.path;
window.location.href = "/iam/login/#/login?ReturnUrl=" + path; window.location.href = "/iam/login/#/login?ReturnUrl=" + path;
...@@ -154,8 +182,11 @@ export default { ...@@ -154,8 +182,11 @@ export default {
}, },
deleteItem(id) { deleteItem(id) {
let query = [id]; let query = [id];
this.$api.serviceShop.delShoppingCart(query).then(response => { this.$api.serviceShop.delShoppingCart(query).then((response) => {
if (response.data.success == 1) {
this.$store.commit("setCartState");
this.getList(); this.getList();
}
}); });
}, },
getDetail() { getDetail() {
...@@ -165,7 +196,6 @@ export default { ...@@ -165,7 +196,6 @@ export default {
}, },
navAction(path) { navAction(path) {
this.now_menu = path; this.now_menu = path;
window.sessionStorage.setItem("menuVisitUrl", path);
this.$router.push(path); this.$router.push(path);
}, },
gotoChildPage(v, parent) { gotoChildPage(v, parent) {
...@@ -179,11 +209,10 @@ export default { ...@@ -179,11 +209,10 @@ export default {
this.$router.push(v.visit_url); this.$router.push(v.visit_url);
} }
this.now_menu = parent; this.now_menu = parent;
window.sessionStorage.setItem("menuVisitUrl", parent);
} }
}, },
getList() { getList() {
this.$api.serviceShop.getShoppingCart().then(response => { this.$api.serviceShop.getShoppingCart().then((response) => {
if (response.data.success == "1") { if (response.data.success == "1") {
this.menuCartNum = response.data.data.valid this.menuCartNum = response.data.data.valid
? response.data.data.valid.length ? response.data.data.valid.length
...@@ -197,16 +226,16 @@ export default { ...@@ -197,16 +226,16 @@ export default {
}); });
}, },
getMenuIndex() { getMenuIndex() {
let visit_url = window.sessionStorage.getItem("menuVisitUrl"); this.now_menu = this.$route.path;
this.now_menu = visit_url ? visit_url : ""; console.log(this.now_menu);
}, },
getNowMenu() { getNowMenu() {
this.$api.general.getNowMenu({ teamName: "APAAS3" }).then(response => { this.$api.general.getNowMenu({ teamName: "APAAS3" }).then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
let arr = let arr =
(response.data.data[0] && response.data.data[0].Child) || []; (response.data.data[0] && response.data.data[0].Child) || [];
let shop_index = arr.findIndex( let shop_index = arr.findIndex(
item => item.visit_url == "/shop/shopping_cart" (item) => item.visit_url == "/shop/shopping_cart"
); );
if (shop_index != -1) { if (shop_index != -1) {
arr.splice(shop_index, 1); arr.splice(shop_index, 1);
...@@ -214,33 +243,32 @@ export default { ...@@ -214,33 +243,32 @@ export default {
} else { } else {
this.show_shop_menu = false; this.show_shop_menu = false;
} }
let user_index = arr.findIndex(item => item.visit_url == "/user"); let user_index = arr.findIndex((item) => item.visit_url == "/user");
if (user_index != -1) { if (user_index != -1) {
this.user_arr = arr[user_index].Child; this.user_arr = arr[user_index].Child;
arr.splice(user_index, 1); arr.splice(user_index, 1);
} else { } else {
} }
this.menu_arr = arr; this.menu_arr = arr;
console.log(this.user_arr);
this.getMenuIndex(); this.getMenuIndex();
} }
}); });
} },
} },
}; };
</script> </script>
<style scoped> <style scoped>
.menu { .menu {
width: 100%; width: 100%;
height: 84px; height: 58px;
background-color: #0f2683; background-color: #0f2683;
color: #8390ee; color: #8390ee;
line-height: 84px; line-height: 58px;
} }
.logo { .logo {
float: left; float: left;
margin: 30px 0 0 40px; margin: 15px 0 0 40px;
cursor: pointer; cursor: pointer;
} }
.user { .user {
...@@ -263,7 +291,7 @@ export default { ...@@ -263,7 +291,7 @@ export default {
.user_default { .user_default {
float: right; float: right;
margin-right: 10px; margin-right: 10px;
margin-top: 30px; margin-top: 18px;
} }
.car { .car {
float: right; float: right;
...@@ -280,7 +308,7 @@ export default { ...@@ -280,7 +308,7 @@ export default {
height: 20px; height: 20px;
text-align: center; text-align: center;
left: 45px; left: 45px;
top: 31px; top: 18px;
z-index: 2; z-index: 2;
} }
.car_img { .car_img {
...@@ -291,7 +319,7 @@ export default { ...@@ -291,7 +319,7 @@ export default {
float: right; float: right;
width: 185px; width: 185px;
font-size: 16px; font-size: 16px;
height:84px; height: 58px;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
...@@ -305,16 +333,16 @@ export default { ...@@ -305,16 +333,16 @@ export default {
background-color: #e56600; background-color: #e56600;
border-radius: 3px; border-radius: 3px;
position: absolute; position: absolute;
bottom: 10px; bottom: 4px;
left: calc(50% - 12px); left: calc(50% - 12px);
} }
.user_menu { .user_menu {
width: 135px; /* width: 135px; */
background-color: #ffffff; background-color: #ffffff;
box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.05); box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.05);
border-radius: 8px; border-radius: 8px;
position: absolute; position: absolute;
top: 70px; top: 56px;
left: -20px; left: -20px;
overflow: hidden; overflow: hidden;
font-size: 14px; font-size: 14px;
...@@ -327,7 +355,7 @@ export default { ...@@ -327,7 +355,7 @@ export default {
box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.05); box-shadow: 0px 3px 6px 0px rgba(15, 19, 65, 0.05);
border-radius: 8px; border-radius: 8px;
position: absolute; position: absolute;
top: 80px; top: 56px;
left: -20px; left: -20px;
overflow: hidden; overflow: hidden;
display: none; display: none;
...@@ -351,10 +379,11 @@ export default { ...@@ -351,10 +379,11 @@ export default {
display: block; display: block;
} }
.user_menu div { .user_menu div {
width: 135px; /* width: 135px; */
height: 44px; height: 44px;
line-height: 44px; line-height: 44px;
text-align: center; padding: 0 30px;
text-align: left;
color: #0d1847; color: #0d1847;
} }
.user_menu div:hover { .user_menu div:hover {
...@@ -366,7 +395,7 @@ export default { ...@@ -366,7 +395,7 @@ export default {
height: 16px; height: 16px;
background-color: #fff; background-color: #fff;
position: absolute; position: absolute;
top: 62px; top: 50px;
transform: rotate(45deg); transform: rotate(45deg);
display: none; display: none;
} }
...@@ -375,7 +404,7 @@ export default { ...@@ -375,7 +404,7 @@ export default {
height: 16px; height: 16px;
background-color: #fff; background-color: #fff;
position: absolute; position: absolute;
top: 72px; top: 50px;
left: 20px; left: 20px;
transform: rotate(45deg); transform: rotate(45deg);
display: none; display: none;
...@@ -436,6 +465,34 @@ export default { ...@@ -436,6 +465,34 @@ export default {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.width_num {
display: inline-block;
vertical-align: middle;
min-width: 30px;
background-color: #e56600;
font-size: 10px;
line-height: 16px;
color: #fff;
padding: 0 8px;
margin-left: 5px;
box-sizing: border-box;
border-radius: 8px;
text-align: center;
overflow: hidden;
}
.user_menu div:hover .width_num {
background-color: #fcefd6;
color: #e56600;
}
.has_msg {
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #e56600;
position: absolute;
top: 15px;
left: 18px;
}
</style> </style>
<style> <style>
.number .el-badge__content { .number .el-badge__content {
......
src/components/message-steps/select-service.vue
View file @ 939e617e
...@@ -22,6 +22,7 @@ ...@@ -22,6 +22,7 @@
</template> </template>
<script> <script>
import helper from "@/services/helper.js";
import screenType from "@/components/recommen/screen-type"; import screenType from "@/components/recommen/screen-type";
import recommenBox from "@/components/recommen/recommen-box"; import recommenBox from "@/components/recommen/recommen-box";
...@@ -43,13 +44,21 @@ export default { ...@@ -43,13 +44,21 @@ export default {
id: 6, id: 6,
name: "时空服务", name: "时空服务",
}, },
{
id: 7,
name: "视频服务",
},
{
id: 10,
name: "感知服务",
},
{ {
id: 21, id: 21,
name: "综合应用服务", name: "融合服务",
}, },
], ],
}, },
serviceType: 5, // 5：数据服务，6：时空服务，21：综合应用服务 serviceType: 5,
filterList: [], filterList: [],
serviceList: [], serviceList: [],
selected: [], selected: [],
...@@ -58,6 +67,21 @@ export default { ...@@ -58,6 +67,21 @@ export default {
created() { created() {
this.getFilterList(); this.getFilterList();
this.getServiceList(); this.getServiceList();
/* this.$http
.get("/apaas/service/v3/service/manager/servtype")
.then(({ data }) => {
if (data.success == 1) {
let types = data.data.map((item) => {
return {
name: item.name,
id: item.id,
};
});
console.log(types);
}
}); */
}, },
methods: { methods: {
getFilterList() { getFilterList() {
...@@ -65,16 +89,22 @@ export default { ...@@ -65,16 +89,22 @@ export default {
let serviceTypeInfo = { let serviceTypeInfo = {
5: "数据服务类型", 5: "数据服务类型",
6: "时空服务类型", 6: "时空服务类型",
7: "服务类型",
10: "服务类型",
21: "服务类型", 21: "服务类型",
}; };
let serviceDomain = { let serviceDomain = {
5: "服务领域", 5: "服务领域",
6: "服务领域", 6: "服务领域",
7: "服务领域",
10: "服务领域",
21: "服务领域", 21: "服务领域",
}; };
let organizations = { let organizations = {
5: "数据来源机构", 5: "数据来源机构",
6: "服务来源组织", 6: "服务来源组织",
7: "服务来源组织",
10: "服务来源组织",
21: "服务来源组织", 21: "服务来源组织",
}; };
let filterSerise = { let filterSerise = {
...@@ -96,13 +126,13 @@ export default { ...@@ -96,13 +126,13 @@ export default {
let filters = data.data; let filters = data.data;
for (let key in filters) { for (let key in filters) {
if (filters[key].childDomains) { if (filters[key] && filters[key].childDomains) {
filters[key].flag = false; filters[key].flag = false;
} }
this.filterList.push({ this.filterList.push({
name: filterSerise[key], name: filterSerise[key],
arr: filters[key], arr: filters[key] || [],
key: key, key: key,
}); });
} }
...@@ -119,7 +149,14 @@ export default { ...@@ -119,7 +149,14 @@ export default {
}) })
.then(({ data }) => { .then(({ data }) => {
if (data.success == 1) { if (data.success == 1) {
this.serviceList = data.data || []; let datas = data.data || [];
datas.forEach((item) => {
let update_date = item.update_date || "";
item.update_date = helper.dateStringTransform(update_date);
});
this.serviceList = datas;
} }
}); });
}, },
......
src/components/message-steps/select-template.vue
View file @ 939e617e
...@@ -9,6 +9,18 @@ ...@@ -9,6 +9,18 @@
placeholder="请输入消息模板名称/id" placeholder="请输入消息模板名称/id"
></el-input> ></el-input>
</div> </div>
<div class="filter_item" v-if="tpl_types.length > 1">
<span class="filter_title">模板类型：</span>
<el-select v-model="type" placeholder="请选择">
<el-option
v-for="item in tpl_types"
:label="item.name"
:value="item.value"
:key="item.value"
>
</el-option>
</el-select>
</div>
<div class="filter_item"> <div class="filter_item">
<span class="filter_title">最后更新时间：</span> <span class="filter_title">最后更新时间：</span>
<el-date-picker <el-date-picker
...@@ -127,6 +139,10 @@ export default { ...@@ -127,6 +139,10 @@ export default {
type: Boolean, type: Boolean,
defailt: false, defailt: false,
}, },
tmpTypes: {
type: Array,
defailt: [],
},
}, },
data() { data() {
return { return {
...@@ -138,6 +154,7 @@ export default { ...@@ -138,6 +154,7 @@ export default {
pageSize: 10, pageSize: 10,
currentPage: 1, currentPage: 1,
keyword: "", keyword: "",
type: "",
updateTime: "", updateTime: "",
types: [ types: [
{ {
...@@ -161,6 +178,7 @@ export default { ...@@ -161,6 +178,7 @@ export default {
value: 4, value: 4,
}, },
], ],
tpl_types: [],
detail: { detail: {
name: "", name: "",
tpl_type: "", tpl_type: "",
...@@ -234,12 +252,36 @@ export default { ...@@ -234,12 +252,36 @@ export default {
}, },
]; ];
if (this.tmpTypes.length > 0) {
let tpl_types = [];
this.types.forEach((item) => {
if (this.tmpTypes.indexOf(item.value) > -1) {
tpl_types.push(item);
}
});
if (this.tmpTypes.length > 1) {
tpl_types = [
{
name: "全部",
value: this.tmpTypes.join(","),
},
...tpl_types,
];
}
this.tpl_types = tpl_types;
this.type = tpl_types[0].value;
}
this.getTemplateList(); this.getTemplateList();
}, },
methods: { methods: {
getTemplateList() { getTemplateList() {
let params = { let params = {
page: this.currentPage, page: this.currentPage,
tpl_type: this.type,
size: this.pageSize, size: this.pageSize,
keyword: this.keyword, keyword: this.keyword,
update_time_s: (this.updateTime && this.updateTime[0]) || "", update_time_s: (this.updateTime && this.updateTime[0]) || "",
...@@ -287,12 +329,17 @@ export default { ...@@ -287,12 +329,17 @@ export default {
this.getTemplateList(); this.getTemplateList();
}, },
topFilterAction() { topFilterAction() {
this.currentPage = 1;
this.getTemplateList(); this.getTemplateList();
}, },
topFilterClear() { topFilterClear() {
this.keyword = ""; this.keyword = "";
this.updateTime = ""; this.updateTime = "";
if (this.tpl_types.length > 0) {
this.type = this.tpl_types[0].value;
}
this.getTemplateList(); this.getTemplateList();
}, },
selectTemplate(item) { selectTemplate(item) {
......
src/components/order-list/order-list-cell.vue
View file @ 939e617e
...@@ -41,24 +41,63 @@ ...@@ -41,24 +41,63 @@
</el-col> </el-col>
<el-col :span="6" class="cell_specification"> <el-col :span="6" class="cell_specification">
<div v-if="cellItem.order_type == 1"> <div v-if="cellItem.order_type == 1">
<el-tooltip class="item" effect="dark" placement="right">
<div slot="content" class="gg">
规格：
<br />
日访问次数：{{cellItem.spec_svc_count}}次，日访问量：{{cellItem.spec_svc_pv }}
</div>
<div>规格：日访问次数：{{ cellItem.spec_svc_count }}次，日访问量：{{ cellItem.spec_svc_pv }}</div> <div>规格：日访问次数：{{ cellItem.spec_svc_count }}次，日访问量：{{ cellItem.spec_svc_pv }}</div>
</el-tooltip>
<div <div
class="cell_specification_type" class="cell_specification_type"
>申请方式：{{ cellItem.duration_unit == 1 ? $t('lang.by_month') : $t('lang.by_year') }}</div> >申请方式：{{ cellItem.duration_unit == 1 ? $t('lang.by_month') : $t('lang.by_year') }}</div>
</div> </div>
<div v-else-if="cellItem.order_type == 2"> <div v-else-if="cellItem.order_type == 2">
<el-tooltip class="item" effect="dark" placement="right">
<div slot="content" class="gg">
规格：
<br />
{{ cellItem.spec_app == 0 ? '申请获取应用镜像部署权限' : '申请获取应用镜像开发权限' }}
</div>
<div>规格：{{ cellItem.spec_app == 0 ? "申请获取应用镜像部署权限" : "申请获取应用镜像开发权限" }}</div> <div>规格：{{ cellItem.spec_app == 0 ? "申请获取应用镜像部署权限" : "申请获取应用镜像开发权限" }}</div>
</el-tooltip>
</div> </div>
<div v-else-if="cellItem.order_type == 3"> <div v-else-if="cellItem.order_type == 3">
<div> <el-tooltip v-if="cellItem.apply_type == 0" class="item" effect="dark" placement="right">
<div slot="content" class="gg">
规格：
<br />
CPU {{ cellItem.cpu }}核，内存 {{ cellItem.memory }}GB，容器组 {{ cellItem.containers }}个；
<br />
数据盘 {{ cellItem.disk_num }}块，每块数据盘容量 {{ cellItem.disk_cap }}GB；
</div>
<div class="specification_item">
规格：CPU {{ cellItem.cpu }}核，内存 {{ cellItem.memory }}GB，容器组 {{ cellItem.containers }}个； 规格：CPU {{ cellItem.cpu }}核，内存 {{ cellItem.memory }}GB，容器组 {{ cellItem.containers }}个；
<span <span
v-if="cellItem.disk_num != 0" v-if="cellItem.disk_num != 0"
>数据盘 {{ cellItem.disk_num }}块，每块数据盘容量 {{ cellItem.disk_cap }}GB</span> >数据盘 {{ cellItem.disk_num }}块，每块数据盘容量 {{ cellItem.disk_cap }}GB；</span>
</div> </div>
</el-tooltip>
<el-tooltip v-else class="item" effect="dark" placement="right">
<div slot="content" class="gg">
规格：
<br />
CPU {{ cellItem.cpu }}核，内存 {{ cellItem.memory }}GB，容器组 {{ cellItem.containers }}个；
<span
class="gg_span"
v-for="(item, index) in cellItem.adjust_disk"
:key="'sjj' + index"
>数据盘 {{item.disk_num}}块，每块数据盘容量 {{item.disk_cap}}GB；</span>
</div>
<div class="specification_item">
规格：CPU {{ cellItem.cpu }}核，内存 {{ cellItem.memory }}GB，容器组 {{ cellItem.containers }}个；
<span>{{ thisDisks }}</span>
</div>
</el-tooltip>
<div <div
class="cell_specification_type" class="cell_specification_type"
>单个容器组：CPU最高 {{ cellItem.one_cpu_max }}核，默认 {{ cellItem.one_cpu_min }}核；内存最高 {{ cellItem.one_memory_max }}GB，默认 {{ cellItem.one_memory_min }}GB</div> >单个容器组：CPU最高 {{ cellItem.one_cpu_max }}核，默认 {{ cellItem.one_cpu_min }}核；内存最高 {{ cellItem.one_memory_max }}GB，默认 {{ cellItem.one_memory_min }}GB；</div>
</div> </div>
</el-col> </el-col>
<el-col :span="4" class="approval_status"> <el-col :span="4" class="approval_status">
...@@ -122,7 +161,7 @@ ...@@ -122,7 +161,7 @@
@click="viewDetail(cellItem.order_id)" @click="viewDetail(cellItem.order_id)"
>查看详情</el-button> >查看详情</el-button>
<div <div
v-if="cellItem.approval_second_level == 1 && cellItem.pay_status != -1" v-if="cellItem.approval_second_level == 1 && cellItem.pay_status != -1 || cellItem.pay_status == -1"
class="cell_option_spec" class="cell_option_spec"
@click="nextApply" @click="nextApply"
>再次申请</div> >再次申请</div>
...@@ -137,13 +176,7 @@ ...@@ -137,13 +176,7 @@
<el-col v-if="showMsgBox" :span="24" class="evaluation_msg"> <el-col v-if="showMsgBox" :span="24" class="evaluation_msg">
<div class="msg_title">服务评分：</div> <div class="msg_title">服务评分：</div>
<div class="msg_rate"> <div class="msg_rate">
<el-rate <el-rate v-model="message.score" disabled :colors="colors"></el-rate>
v-model="message.score"
disabled
show-score
text-color="#ff9900"
score-template="{value}"
></el-rate>
</div> </div>
<div class="msg_title">评价详情：</div> <div class="msg_title">评价详情：</div>
<div class="msg_text">{{ message.content }}</div> <div class="msg_text">{{ message.content }}</div>
...@@ -174,6 +207,24 @@ export default { ...@@ -174,6 +207,24 @@ export default {
helper: helper, helper: helper,
message: {}, message: {},
}), }),
watch: {
cellItem: {
handler() {
this.showMsgBox = false;
},
},
},
computed: {
thisDisks() {
let strings = "";
if (this.cellItem.adjust_disk) {
this.cellItem.adjust_disk.forEach((item) => {
strings += `数据盘 ${item.disk_num}块，每块数据盘容量 ${item.disk_cap}GB；`;
});
}
return strings;
},
},
methods: { methods: {
addEvaluation() { addEvaluation() {
if (this.textarea == "" && this.serviceRate == null) { if (this.textarea == "" && this.serviceRate == null) {
...@@ -230,7 +281,7 @@ export default { ...@@ -230,7 +281,7 @@ export default {
} }
}, },
viewDetail(val) { viewDetail(val) {
this.$router.push("/user/order_detail/" + val); this.$router.push("/user/order_list/detail/" + val);
}, },
delOrder() { delOrder() {
this.$api.user this.$api.user
...@@ -266,7 +317,7 @@ export default { ...@@ -266,7 +317,7 @@ export default {
} else if (this.cellItem.order_type == 2) { } else if (this.cellItem.order_type == 2) {
query = { query = {
app_id: parseFloat(this.cellItem.app_id), app_id: parseFloat(this.cellItem.app_id),
spec_id: this.cellItem.spec_app, spec_id: this.cellItem.spec_app++,
duration: this.cellItem.duration, duration: this.cellItem.duration,
duration_unit: this.cellItem.duration_unit, duration_unit: this.cellItem.duration_unit,
}; };
...@@ -274,9 +325,9 @@ export default { ...@@ -274,9 +325,9 @@ export default {
path: "/shop/shop_car_apply", path: "/shop/shop_car_apply",
query: query, query: query,
}); });
} else if (this.cellItem.order_type == 2) { } else if (this.cellItem.order_type == 3) {
this.$router.push({ this.$router.push({
path: "/shop/shop_cloud", path: "/shop/cloud",
}); });
} }
}, },
...@@ -512,12 +563,26 @@ export default { ...@@ -512,12 +563,26 @@ export default {
margin: 0 0 10px; margin: 0 0 10px;
} }
.msg_rate { .msg_rate {
margin: 0 0 10px 20px; margin: 0 0 20px 0;
} }
.msg_text { .msg_text {
margin-left: 20px; /* margin-left: 20px; */
color: #242c43; color: #242c43;
} }
.specification_item {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.gg {
/* max-width: 200px; */
word-wrap: break-word;
}
.gg_span {
display: block;
}
</style> </style>
<style> <style>
.pop_rate .el-rate__icon { .pop_rate .el-rate__icon {
......
src/components/order-list/order-list-com.vue
View file @ 939e617e
...@@ -10,14 +10,12 @@ ...@@ -10,14 +10,12 @@
</el-tabs> </el-tabs>
<div class="list_options"> <div class="list_options">
<div class="button_group"> <div class="button_group">
<el-button <span
size="mini"
v-for="(item, index) in buttonList" v-for="(item, index) in buttonList"
:key="'btn' + index" :key="'btn' + index"
:class="item.state ? 'btn_actice':''" :class="item.state ? 'btn_default btn_actice':'btn_default'"
round
@click="btnClick(index)" @click="btnClick(index)"
>{{ item.name }}</el-button> >{{ item.name }}</span>
</div> </div>
<div class="input_right"> <div class="input_right">
<el-input <el-input
...@@ -82,7 +80,7 @@ ...@@ -82,7 +80,7 @@
import OrderList from "@/components/order-list/order-list-list"; import OrderList from "@/components/order-list/order-list-list";
export default { export default {
components: { components: {
OrderList OrderList,
}, },
data: () => ({ data: () => ({
stateList: [ stateList: [
...@@ -91,7 +89,7 @@ export default { ...@@ -91,7 +89,7 @@ export default {
{ value: "2", label: "审核中" }, { value: "2", label: "审核中" },
{ value: "3", label: "已获取" }, { value: "3", label: "已获取" },
{ value: "4", label: "未通过" }, { value: "4", label: "未通过" },
{ value: "5", label: "已取消" } { value: "5", label: "已取消" },
], ],
activeName: "0", activeName: "0",
buttonList: [], buttonList: [],
...@@ -99,23 +97,23 @@ export default { ...@@ -99,23 +97,23 @@ export default {
pagination: { pagination: {
rowsPerPage: 10, rowsPerPage: 10,
page: 1, page: 1,
total: 0 total: 0,
}, },
pageOptions: [ pageOptions: [
{ {
value: "10", value: "10",
label: "10" label: "10",
}, },
{ {
value: "20", value: "20",
label: "20" label: "20",
}, },
{ {
value: "50", value: "50",
label: "50" label: "50",
} },
], ],
datas: [] datas: [],
}), }),
mounted() { mounted() {
this.getBtns(); this.getBtns();
...@@ -123,13 +121,13 @@ export default { ...@@ -123,13 +121,13 @@ export default {
}, },
methods: { methods: {
getBtns() { getBtns() {
this.$api.user.getOrderBtnTypes().then(response => { this.$api.user.getOrderBtnTypes().then((response) => {
if (response.data.success == 1) { if (response.data.success == 1) {
let buttonList = response.data.data; let buttonList = response.data.data;
buttonList.forEach(item => { buttonList.forEach((item) => {
item.state = false; item.state = false;
}); });
buttonList.unshift({ id: "", name: "全部", state: false }); buttonList.unshift({ id: 0, name: "全部", state: true });
buttonList.push({ id: "cloud", name: "云资源", state: false }); buttonList.push({ id: "cloud", name: "云资源", state: false });
buttonList.push({ id: "app", name: "应用镜像", state: false }); buttonList.push({ id: "app", name: "应用镜像", state: false });
this.buttonList = buttonList; this.buttonList = buttonList;
...@@ -149,12 +147,20 @@ export default { ...@@ -149,12 +147,20 @@ export default {
} }
this.buttonList[0].state = !this.buttonList[0].state; this.buttonList[0].state = !this.buttonList[0].state;
} }
let i = this.buttonList.findIndex((item) => {
return item.state == true;
});
if (i == -1) {
this.buttonList[0].state = true;
}
this.pagination.page = 1;
this.getData(); this.getData();
}, },
// search debonce 500ms // search debonce 500ms
searchVal() { searchVal() {
if (this.times !== null) clearTimeout(this.times); if (this.times !== null) clearTimeout(this.times);
this.times = setTimeout(() => { this.times = setTimeout(() => {
this.pagination.page = 1;
this.getData(); this.getData();
}, 500); }, 500);
}, },
...@@ -163,9 +169,18 @@ export default { ...@@ -163,9 +169,18 @@ export default {
let service = 0; let service = 0;
let app = 0; let app = 0;
let resource = 0; let resource = 0;
this.buttonList.forEach(item => { if (this.buttonList.length == 0) {
resource = 1;
app = 1;
service = 1;
} else {
this.buttonList.forEach((item) => {
if (item.state == true) { if (item.state == true) {
if (item.id == "cloud") { if (item.id == 0) {
resource = 1;
app = 1;
service = 1;
} else if (item.id == "cloud") {
resource = 1; resource = 1;
} else if (item.id == "app") { } else if (item.id == "app") {
app = 1; app = 1;
...@@ -175,11 +190,8 @@ export default { ...@@ -175,11 +190,8 @@ export default {
} }
} }
}); });
if (arr.length == 0) {
service = 1;
app = 1;
resource = 1;
} }
// console.log(service, app, resource);
let params = { let params = {
select: this.search, select: this.search,
page: this.pagination.page, page: this.pagination.page,
...@@ -188,9 +200,10 @@ export default { ...@@ -188,9 +200,10 @@ export default {
types: arr, types: arr,
service: service, service: service,
app: app, app: app,
resource: resource resource: resource,
}; };
this.$api.user.orderList(params).then(response => { this.$api.user.orderList(params).then((response) => {
this.datas = [];
this.datas = response.data.data; this.datas = response.data.data;
this.pagination.total = response.data.total; this.pagination.total = response.data.total;
}); });
...@@ -205,8 +218,8 @@ export default { ...@@ -205,8 +218,8 @@ export default {
}, },
updateList() { updateList() {
this.getData(); this.getData();
} },
} },
}; };
</script> </script>
<style scoped> <style scoped>
...@@ -224,6 +237,22 @@ export default { ...@@ -224,6 +237,22 @@ export default {
.button_group { .button_group {
padding: 17px 10px; padding: 17px 10px;
} }
.btn_default {
display: inline-block;
padding: 6px 15px;
border-radius: 14px;
font-size: 12px;
margin-right: 6px;
cursor: pointer;
}
.btn_default:hover {
background-color: #515fe7;
color: #fff;
}
.btn_default:focus {
background-color: #fff;
color: #606266;
}
.btn_actice { .btn_actice {
background-color: #515fe7; background-color: #515fe7;
color: #fff; color: #fff;
...@@ -287,20 +316,19 @@ export default { ...@@ -287,20 +316,19 @@ export default {
.order_block .el-tabs--border-card > .el-tabs__content { .order_block .el-tabs--border-card > .el-tabs__content {
padding: 0; padding: 0;
} }
.input_right .el-input__inner { .order_block .input_right .el-input__inner {
border-radius: 20px; border-radius: 20px;
} }
.input_right .el-input--prefix .el-input__inner { .order_block .input_right .el-input--prefix .el-input__inner {
padding-left: 40px; padding-left: 40px;
} }
.input_right .el-input__prefix, .order_block .input_right .el-input__prefix {
.el-input__suffix {
left: 10px; left: 10px;
} }
.input_right .el-input--prefix .el-input__inner { .order_block .input_right .el-input--prefix .el-input__inner {
outline: none; outline: none;
} }
.input_right .el-input__inner:focus-within { .order_block .input_right .el-input__inner:focus-within {
border: 1px solid #626de9; border: 1px solid #626de9;
} }
.order_page_control .el-button { .order_page_control .el-button {
......
src/components/order-list/order-list-list.vue
View file @ 939e617e
...@@ -30,7 +30,7 @@ export default { ...@@ -30,7 +30,7 @@ export default {
mounted() {}, mounted() {},
methods: { methods: {
updateList() { updateList() {
this.emit("updateList"); this.$emit("updateList");
} }
} }
}; };
......
src/components/organization-list/organization-card.vue
View file @ 939e617e
...@@ -20,21 +20,21 @@ ...@@ -20,21 +20,21 @@
</div> </div>
<p class="organization_card-text"> <p class="organization_card-text">
<span> <span>
<i class="el-icon-setting"></i> <img src="../../assets/imgs/ic_xitong.png" />
<span>业务系统数</span> <span>业务系统数</span>
</span> </span>
<span class="text_clip" v-text="data.systemUser"></span> <span class="text_clip" v-text="data.systemUser"></span>
</p> </p>
<p class="organization_card-text"> <p class="organization_card-text">
<span> <span>
<i class="el-icon-user"></i> <img src="../../assets/imgs/ic_guanliyuan.png" />
<span>组织管理员</span> <span>组织管理员</span>
</span> </span>
<span class="text_clip" v-text="data.orgAdmin"></span> <span class="text_clip" v-text="data.orgAdmin"></span>
</p> </p>
<p class="organization_card-text"> <p class="organization_card-text">
<span> <span>
<i class="el-icon-time"></i> <img src="../../assets/imgs/icon_shijian.png" />
<span>创建时间</span> <span>创建时间</span>
</span> </span>
<span class="text_clip" v-text="data.create_date"></span> <span class="text_clip" v-text="data.create_date"></span>
...@@ -102,11 +102,17 @@ export default { ...@@ -102,11 +102,17 @@ export default {
margin-right: 18px; margin-right: 18px;
cursor: pointer; cursor: pointer;
} }
.organization_card > .organization_card-icon .el-avatar--square {
border: 3px solid #f6f7fb;
border-radius: 8px;
overflow: hidden;
}
.organization_card > .organization_card-info { .organization_card > .organization_card-info {
width: calc(100% - 56px - 20px); width: calc(100% - 56px - 20px);
} }
.organization_card-info > .organization_card-name { .organization_card-info > .organization_card-name {
font-size: 18px; font-size: 18px;
font-weight: 600;
line-height: 32px; line-height: 32px;
color: #0d1847; color: #0d1847;
cursor: pointer; cursor: pointer;
...@@ -129,6 +135,12 @@ export default { ...@@ -129,6 +135,12 @@ export default {
.organization_card-text > span:nth-child(1) { .organization_card-text > span:nth-child(1) {
flex-shrink: 0; flex-shrink: 0;
color: #8890a7; color: #8890a7;
display: inline-flex;
justify-content: flex-start;
align-items: center;
}
.organization_card-text > span:nth-child(1) > img {
margin-right: 5px;
} }
</style> </style>
......
src/components/process-card.vue
View file @ 939e617e
<template> <template>
<div class="out"> <div class="out">
<div class="box" v-for="(item,index) in data" :key="index+3000" :style="!(item.arr&&item.arr.length!==0)||item.result==='审批未通过'||item.result==='审批不通过'?{border:'none'}:(type&&type=='approval'&&index==data.length-1)?{borderLeft:'2px dashed #e3e5ef',paddingBottom:'0px',}:{}" :class="data[index+1]&&data[index+1].result==='审批中'?'dashedbd':''"> <div class="box" v-for="(item,index) in data" :key="index+3000" :style="!(item.arr&&item.arr.length!==0)||item.result==='审批未通过'||item.result==='审批不通过'?{border:'none'}:(index==data.length-1)?{borderLeft:'none',paddingBottom:'0px',}:{}" :class="data[index+1]&&data[index+1].result==='审批中'?'dashedbd':''">
<div class="circle" :style="!(item.arr&&item.arr.length!==0)?{borderColor:'#ffc95c'}:item.result==='审批未通过'||item.result==='审批不通过'?{borderColor:'#de3b4b'}:{}"></div> <div class="circle" :style="!(item.arr&&item.arr.length!==0)?{borderColor:'#ffc95c'}:item.result==='审批未通过'||item.result==='审批不通过'?{borderColor:'#de3b4b'}:{}"></div>
<div class="card" :style="item.result==='审批未通过'||item.result==='审批不通过'?{backgroundColor:'#fcfafa'}:{}"> <div class="card" :style="item.result==='审批未通过'||item.result==='审批不通过'?{backgroundColor:'#fcfafa'}:{}">
<p class="card_title" :style="!(item.arr&&item.arr.length!==0)?{backgroundColor:'#fcefd6'}:item.result==='审批未通过'||item.result==='审批不通过'?{backgroundColor:'#f7d5d5'}:{}"> <p class="card_title" :style="!(item.arr&&item.arr.length!==0)?{backgroundColor:'#fcefd6'}:item.result==='审批未通过'||item.result==='审批不通过'?{backgroundColor:'#f7d5d5'}:{}">
...@@ -34,7 +34,12 @@ export default { ...@@ -34,7 +34,12 @@ export default {
}, },
created() { created() {
if(this.data.length<=1&&this.data[this.data.length-1].result=='审批通过'){
this.data.push({
title: "二级审批",
result: "审批中",
})
}
}, },
mounted() { mounted() {
......
src/components/recommen/recommen-box.vue
View file @ 939e617e
...@@ -67,12 +67,14 @@ export default { ...@@ -67,12 +67,14 @@ export default {
checked: false, checked: false,
}; };
}, },
watch: {}, watch: {
"data.checked"(val) {
this.checked = val===1;
}
},
computed: {}, computed: {},
created() { created() {
if(this.data.checked){ this.checked = this.data.checked===1;
this.checked=true
}
}, },
mounted() {}, mounted() {},
methods: { methods: {
......
src/components/service-header.vue
View file @ 939e617e
<template> <template>
<div class="info_logo"> <div class="info_logo">
<div class="logo"> <div class="logo">
<img :src="data.url" alt="" /> <img :src="data.url" alt="" style="width:100%;" />
<!-- TODO: 时空服务预览 --> <map-view v-if="data.isMap" :id="data.portal_id"></map-view>
<map-view v-if="data.isMap" :id="data.id"></map-view>
</div> </div>
<div class="info"> <div class="info">
<p class="info_title"> <p class="info_title">
<span>{{ data.name }}</span> <span>{{ data.name }}</span>
<span
class="info_fix"
v-if="data.fixed_process"
@click="goto_page(data.fixed_url)"
>
我要编辑
</span>
<span class="bs" v-if="data.aqdetail" @click="subevent(0)"> <span class="bs" v-if="data.aqdetail" @click="subevent(0)">
一键部署 一键部署
</span> </span>
...@@ -19,7 +25,7 @@ ...@@ -19,7 +25,7 @@
</span> </span>
<span <span
class="right gap" class="right gap"
v-if="data.yydetail || data.xxdetail || data.yydev" v-if="data.yydetail || data.xxdetail || data.yydev||data.public||data.unpublic||data.undeploy||data.deploy"
> >
| |
</span> </span>
...@@ -66,6 +72,20 @@ ...@@ -66,6 +72,20 @@
> >
我要修改 我要修改
</span> </span>
<span class="right undersell undersell2" v-if="data.deploy" @click="subevent(10)">
部署
</span>
<span class="right undersell1" v-if="data.undeploy" @click="subevent(9)">
取消部署
</span>
<span class="right undersell" v-if="data.public" @click="subevent(8)">
发布
</span>
<span class="right undersell1" v-if="data.unpublic" @click="subevent(7)">
取消发布
</span>
<span class="info_fix" v-if="data.yydev" @click="subevent(6)"> <span class="info_fix" v-if="data.yydev" @click="subevent(6)">
应用开发 应用开发
</span> </span>
...@@ -148,6 +168,14 @@ export default { ...@@ -148,6 +168,14 @@ export default {
this.$emit("debuggerfunc"); this.$emit("debuggerfunc");
} else if (val == 6) { } else if (val == 6) {
this.$emit("applymy"); this.$emit("applymy");
} else if (val == 7) {
this.$emit("unpublic", this.data);
} else if (val == 8) {
this.$emit("public1", this.data);
} else if (val == 9) {
this.$emit("undeploy", this.data);
} else if (val == 10) {
this.$emit("deploy", this.data);
} }
}, },
goto_page(url) { goto_page(url) {
...@@ -239,7 +267,7 @@ export default { ...@@ -239,7 +267,7 @@ export default {
text-align: center; text-align: center;
margin-left: 10px; margin-left: 10px;
} }
.undersell { .undersell,.undersell1 {
width: 76px; width: 76px;
height: 32px; height: 32px;
background-color: #0f2683; background-color: #0f2683;
...@@ -251,6 +279,14 @@ export default { ...@@ -251,6 +279,14 @@ export default {
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
} }
.undersell1{
color: #0f2683;
background-color: #e6ebfe;
margin-left: 10px;
}
.undersell2{
margin-left: 10px;
}
.undermy { .undermy {
background-color: #515fe7; background-color: #515fe7;
color: #e6ebfe; color: #e6ebfe;
......
src/components/service-info/app-info.vue
View file @ 939e617e
<template> <template>
<div class="application_info apaas_button" v-if="data"> <div class="service_info apaas_button" v-if="data">
<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>
<span class="service_access_info">
<img :src="require('@/assets/imgs/icon_huoqu.png')" />
<span v-text="'部署次数：' + data.deploy_times"></span>
</span>
</div>
<div class="main_container"> <div class="main_container">
<div class="main_container-left" v-if="data.logo"> <div class="main_container-left">
<el-avatar shape="square" :size="144" fit="cover" :src="data.logo" /> <img :src="data.logo" width="100%" />
</div> </div>
<div class="main_container-right"> <div class="main_container-right">
<div class="application_title"> <ul class="service_base_info">
<span class="application_name" v-text="data.app_name"></span>
</div>
<div class="application_base_container">
<ul class="application_base_info">
<li> <li>
<span>应用开发者：</span> <span>应用开发者：</span>
<span v-text="data.username"> </span> <span v-text="data.username"> </span>
...@@ -18,26 +25,15 @@ ...@@ -18,26 +25,15 @@
<span>应用类型：</span> <span>应用类型：</span>
<span v-html="data.type_name"></span> <span v-html="data.type_name"></span>
</li> </li>
</ul>
<ul class="application_base_info">
<li>
<span>部署次数：</span>
<span v-text="data.deploy_times"></span>
</li>
<li> <li>
<span>业务领域：</span> <span>业务领域：</span>
<span v-text="data.ywly_name"></span> <span v-text="data.ywly_name"></span>
</li> </li>
</ul>
<ul class="application_base_info">
<li> <li>
<span>上线时间：</span> <span>上线时间：</span>
<span v-text="data.create_date"></span> <span v-text="data.create_date"></span>
</li> </li>
</ul> </ul>
</div>
</div>
</div>
<div class="commodity_information"> <div class="commodity_information">
<span>规&emsp;&emsp;格：</span> <span>规&emsp;&emsp;格：</span>
<div class="btn_container"> <div class="btn_container">
...@@ -60,6 +56,8 @@ ...@@ -60,6 +56,8 @@
</el-button> </el-button>
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
...@@ -136,10 +134,11 @@ export default { ...@@ -136,10 +134,11 @@ export default {
}, },
}; };
</script> </script>
</script>
<style scoped> <style scoped>
.application_info { .service_info {
padding: 20px; padding: 35px 20px 40px;
background-color: #fff; background-color: #fff;
margin-bottom: 20px; margin-bottom: 20px;
} }
...@@ -150,31 +149,57 @@ export default { ...@@ -150,31 +149,57 @@ export default {
margin-top: 25px; margin-top: 25px;
} }
.main_container-left { .main_container-left {
width: 270px;
padding: 3px; padding: 3px;
background-color: #f9fafc; background-color: #f9fafc;
margin-right: 10px; margin-right: 30px;
font-size: 0;
position: relative;
}
.main_container-left img {
width: 100%;
}
.main_container-left > .map_view {
position: absolute;
right: 3px;
bottom: 3px;
} }
.main_container-right { .main_container-right {
flex-grow: 1; flex-grow: 1;
} }
.application_title > .application_name { .service_title {
display: flex;
justify-content: flex-start;
align-items: center;
}
.service_title > .service_name {
font-size: 22px; font-size: 22px;
font-weight: bold; font-weight: bold;
color: #0d1847; color: #0d1847;
line-height: 36px; line-height: 36px;
flex-grow: 1;
} }
.application_base_container { .service_title > .service_access_info {
display: flex; flex-shrink: 0;
justify-content: flex-start; font-size: 14px;
align-items: flex-end; color: #58617a;
background-color: #f9fafc; margin-left: 20px;
padding: 18px;
margin-top: 15px;
} }
.application_base_info:not(:last-child) { .service_title > .service_access_info > * {
margin-right: 50px; display: inline-block;
vertical-align: middle;
} }
.application_base_info > li { .service_title > .service_access_info > img {
width: 19px;
margin-right: 5px;
}
.service_base_info {
padding: 25px 20px;
background-color: #f9fafc;
border-radius: 8px;
}
.service_base_info > li,
.commodity_information {
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
...@@ -182,57 +207,77 @@ export default { ...@@ -182,57 +207,77 @@ export default {
color: #242c43; color: #242c43;
line-height: 20px; line-height: 20px;
} }
.application_base_info > li > span:first-child { .service_base_info > li:not(:first-child) {
width: 6em; margin-top: 18px;
}
.service_base_info > li > span:first-child,
.commodity_information > span:first-child {
flex-shrink: 0; flex-shrink: 0;
white-space: nowrap; white-space: nowrap;
color: #8890a7; color: #8890a7;
text-align: right;
}
.application_base_info > li:not(:first-child) {
margin-top: 20px;
} }
.application_base_info > li > span:nth-child(2) { .service_base_info > li > span:nth-child(2) {
color: #242c43; color: #242c43;
} }
.commodity_information { .commodity_information {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-top: 30px; margin-top: 30px;
} }
.commodity_information > span:nth-child(2) {
color: #58617a;
}
.commodity_information > span:first-child { .commodity_information > span:first-child {
flex-shrink: 0;
width: 6em;
font-size: 14px;
color: #8890a7;
line-height: 40px; line-height: 40px;
} }
.commodity_information > .commodity_text {
flex-grow: 1;
padding: 13px 18px;
background-color: #f9fafc;
border-radius: 5px;
}
.commodity_information > .btn_container { .commodity_information > .btn_container {
margin-bottom: -15px; margin-bottom: -15px;
} }
.commodity_information > .btn_container > .el-button { .commodity_information > .btn_container > .el-button {
margin: 0 30px 15px 0; border-width: 2px;
}
.commodity_information > .btn_container > .el-button,
.commodity_information > .btn_container > .el-input-number {
margin: 0 20px 15px 0;
} }
.commodity_action { .commodity_action {
margin-top: 50px; margin-top: 60px;
text-align: right; text-align: right;
} }
.commodity_action > .el-button { .commodity_action > .el-button {
width: 220px; width: 220px;
margin-left: 20px; margin-left: 20px;
font-size: 16px;
} }
.application_info .el-button--primary { </style>
<style>
.service_info.apaas_button .el-button--primary {
color: #fff;
background-color: #515fe7; background-color: #515fe7;
border-color: #515fe7; border-color: #515fe7;
} }
.application_info .el-button--warning.is-plain { .service_info .el-input-number .el-input-number__decrease {
background-color: #fcefd6; top: 2px;
border-color: #fac266; left: 2px;
color: #e56600; width: 38px;
line-height: 36px;
border-radius: 8px 0 0 8px;
border-right-width: 2px;
}
.service_info .el-input-number .el-input-number__increase {
top: 2px;
right: 2px;
width: 38px;
line-height: 36px;
border-radius: 0 8px 8px 0;
border-left-width: 2px;
} }
.application_info .el-button--warning { .service_info .el-input-number .el-input__inner {
background-color: #e56600; border-width: 2px;
border-color: #e56600;
} }
</style> </style>
src/components/service-info/map-view.vue
View file @ 939e617e
...@@ -21,6 +21,7 @@ ...@@ -21,6 +21,7 @@
</template> </template>
<script> <script>
const gisServiceUrl = window.serviceConfig.gisServiceRoot;
export default { export default {
name: "map-view", name: "map-view",
data: () => ({ data: () => ({
...@@ -35,7 +36,7 @@ export default { ...@@ -35,7 +36,7 @@ export default {
}, },
methods: { methods: {
viewAction() { viewAction() {
this.src = `https://apaasgis.wodcloud.com/portal/apaasplat/viewer/previewMap.html?id=`; // ${this.id} this.src = gisServiceUrl + `/portal/apaasplat/viewer/previewMap.html?id=${this.id}`;
this.showDialog = true; this.showDialog = true;
}, },
beforeClose(done) { beforeClose(done) {
......
src/components/service-info/service-info.vue
View file @ 939e617e
...@@ -19,10 +19,9 @@ ...@@ -19,10 +19,9 @@
<div class="main_container"> <div class="main_container">
<div class="main_container-left" v-if="data.cover"> <div class="main_container-left" v-if="data.cover">
<img :src="data.cover" width="100%" /> <img :src="data.cover" width="100%" />
<!-- TODO: 时空服务预览 -->
<map-view <map-view
v-if="data.type === 'Map Service'" v-if="data.type === 'Map Service'"
:id="data.service_id" :id="data.portal_id"
></map-view> ></map-view>
</div> </div>
<div class="main_container-right"> <div class="main_container-right">
...@@ -99,7 +98,7 @@ ...@@ -99,7 +98,7 @@
></el-input-number> ></el-input-number>
</div> </div>
</div> </div>
<div class="apaas_button commodity_action"> <div class=" commodity_action">
<el-button <el-button
type="warning" type="warning"
plain plain
...@@ -340,12 +339,13 @@ export default { ...@@ -340,12 +339,13 @@ export default {
vertical-align: middle; vertical-align: middle;
} }
.service_title > .service_access_info > img { .service_title > .service_access_info > img {
width: 15px; width: 19px;
margin-right: 5px; margin-right: 5px;
} }
.service_base_info { .service_base_info {
padding: 18px; padding: 18px;
background-color: #f9fafc; background-color: #f9fafc;
border-radius: 8px;
} }
.service_base_info > li, .service_base_info > li,
.commodity_information { .commodity_information {
...@@ -386,6 +386,9 @@ export default { ...@@ -386,6 +386,9 @@ export default {
.commodity_information > .btn_container { .commodity_information > .btn_container {
margin-bottom: -15px; margin-bottom: -15px;
} }
.commodity_information > .btn_container > .el-button {
border-width: 2px;
}
.commodity_information > .btn_container > .el-button, .commodity_information > .btn_container > .el-button,
.commodity_information > .btn_container > .el-input-number { .commodity_information > .btn_container > .el-input-number {
margin: 0 20px 15px 0; margin: 0 20px 15px 0;
...@@ -397,5 +400,33 @@ export default { ...@@ -397,5 +400,33 @@ export default {
.commodity_action > .el-button { .commodity_action > .el-button {
width: 220px; width: 220px;
margin-left: 20px; margin-left: 20px;
font-size: 16px;
}
</style>
<style>
.service_info.apaas_button .el-button--primary {
color: #fff;
background-color: #515fe7;
border-color: #515fe7;
}
.service_info .el-input-number .el-input-number__decrease {
top: 2px;
left: 2px;
width: 38px;
line-height: 36px;
border-radius: 8px 0 0 8px;
border-right-width: 2px;
}
.service_info .el-input-number .el-input-number__increase {
top: 2px;
right: 2px;
width: 38px;
line-height: 36px;
border-radius: 0 8px 8px 0;
border-left-width: 2px;
}
.service_info .el-input-number .el-input__inner {
border-width: 2px;
} }
</style> </style>
src/components/service-list/commodity-card.vue
View file @ 939e617e
...@@ -55,7 +55,7 @@ export default { ...@@ -55,7 +55,7 @@ export default {
is_subscribe: 0, // 是否订阅 is_subscribe: 0, // 是否订阅
}; };
this.$api.serviceShop this.$api.serviceShop
.addShoppingCart() .addShoppingCart(query)
.then(({ data }) => { .then(({ data }) => {
if (data.success == 1) { if (data.success == 1) {
this.$message({ this.$message({
...@@ -108,6 +108,7 @@ export default { ...@@ -108,6 +108,7 @@ export default {
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 8px; border-radius: 8px;
border: 3px solid #f6f7fb;
} }
.com_card_msg { .com_card_msg {
margin-top: 20px; margin-top: 20px;
...@@ -133,18 +134,23 @@ export default { ...@@ -133,18 +134,23 @@ export default {
} }
.com_card_msg_num { .com_card_msg_num {
color: #8890a7; color: #8890a7;
font-size: 16px; font-size: 14px;
position: relative;
top: 2px;
} }
.com_card_msg_num1 { .com_card_msg_num1 {
color: #242c43; color: #242c43;
font-size: 16px; font-size: 16px;
font-weight: bold;
} }
.com_card_btn { .com_card_btn {
margin-top: 35px; margin-top: 35px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-between;
} }
.btn_1 { .btn_1 {
width: 110px;
padding: 10px;
background-color: #d0d5e7; background-color: #d0d5e7;
border: solid 2px #a5afd6; border: solid 2px #a5afd6;
color: #0f2683; color: #0f2683;
...@@ -155,6 +161,8 @@ export default { ...@@ -155,6 +161,8 @@ export default {
color: #0f2683; color: #0f2683;
} }
.btn_2 { .btn_2 {
width: 110px;
padding: 10px;
background-color: #0f2683; background-color: #0f2683;
color: #f8f9fd; color: #f8f9fd;
} }
......
src/components/service-tabs/service-tabs.vue
View file @ 939e617e
...@@ -106,7 +106,7 @@ export default { ...@@ -106,7 +106,7 @@ export default {
.service_info_tab { .service_info_tab {
border: none; border: none;
box-shadow: none; box-shadow: none;
margin-bottom: 40px; margin-bottom: 30px;
} }
.service_info { .service_info {
padding: 35px 40px 40px; padding: 35px 40px 40px;
...@@ -160,6 +160,7 @@ export default { ...@@ -160,6 +160,7 @@ export default {
} }
.service_info_tab .el-table { .service_info_tab .el-table {
width: 100%; width: 100%;
text-align: left;
} }
.service_info_tab .el-table__row:nth-child(odd) td { .service_info_tab .el-table__row:nth-child(odd) td {
background-color: #f8f9fd; background-color: #f8f9fd;
......
src/components/shop-card.vue
View file @ 939e617e
This diff is collapsed.
src/components/shop-cloud/shop-cloud.vue
View file @ 939e617e
This diff is collapsed.
src/components/shop-list.vue
View file @ 939e617e
This diff is collapsed.
src/components/side-nav-bar.vue
View file @ 939e617e
This diff is collapsed.
src/components/table/table-um.vue
View file @ 939e617e
This diff is collapsed.
src/components/table/table-umhref.vue
View file @ 939e617e
This diff is collapsed.
src/components/topology.vue
View file @ 939e617e
This diff is collapsed.
src/components/work-flow/super-flow.vue 0 → 100644
View file @ 939e617e
This diff is collapsed.
src/components/work-flow/work-flow.vue 0 → 100644
View file @ 939e617e
This diff is collapsed.
src/components/work-flow/workflows-view.vue 0 → 100644
View file @ 939e617e
This diff is collapsed.
src/main.js
View file @ 939e617e
This diff is collapsed.
src/pages/authority/authority.vue
View file @ 939e617e
This diff is collapsed.
src/pages/authority/menu/menus.vue
View file @ 939e617e
This diff is collapsed.
src/pages/authority/role/addroles.vue
View file @ 939e617e
This diff is collapsed.
src/pages/data-analysis/data-analysis.vue
View file @ 939e617e
This diff is collapsed.
src/pages/data-analysis/my-application.vue
View file @ 939e617e
This diff is collapsed.
src/pages/data-analysis/my-service.vue
View file @ 939e617e
This diff is collapsed.
src/pages/data-analysis/org-application.vue 0 → 100644
View file @ 939e617e
This diff is collapsed.
src/pages/data-analysis/org-control.vue 0 → 100644
View file @ 939e617e
This diff is collapsed.
src/pages/data-analysis/org-overview.vue 0 → 100644
View file @ 939e617e
This diff is collapsed.
src/pages/data-analysis/org-service.vue 0 → 100644
View file @ 939e617e
This diff is collapsed.
src/pages/data-analysis/super-application.vue 0 → 100644
View file @ 939e617e
This diff is collapsed.
src/pages/data-analysis/super-control.vue 0 → 100644
View file @ 939e617e
This diff is collapsed.
src/pages/data-analysis/super-overview.vue 0 → 100644
View file @ 939e617e
This diff is collapsed.
src/pages/data-analysis/super-service.vue 0 → 100644
View file @ 939e617e
This diff is collapsed.
src/pages/example/example_com_flow.vue 0 → 100644
View file @ 939e617e
This diff is collapsed.
src/pages/index.vue
View file @ 939e617e
This diff is collapsed.
src/pages/message-management/message.vue
View file @ 939e617e
This diff is collapsed.
src/pages/service_shop/services_shop.vue
View file @ 939e617e
This diff is collapsed.
src/pages/service_shop/shop_car_apply.vue
View file @ 939e617e
This diff is collapsed.
src/pages/service_shop/shop_list.vue
View file @ 939e617e
This diff is collapsed.
src/pages/service_shop/sjfwDetail.vue
View file @ 939e617e
This diff is collapsed.
src/pages/service_shop/skfwDetail.vue
View file @ 939e617e
This diff is collapsed.
src/pages/service_shop/yysdDetail.vue
View file @ 939e617e
This diff is collapsed.
src/pages/service_shop/zhfwDetail.vue
View file @ 939e617e
This diff is collapsed.
src/pages/technical-support/index.vue 0 → 100644
View file @ 939e617e
This diff is collapsed.
src/pages/user/notice/notice.vue 0 → 100644
View file @ 939e617e
This diff is collapsed.
src/pages/user/notice/setNotice.vue 0 → 100644
View file @ 939e617e
This diff is collapsed.
src/pages/user/order/order_detail.vue
View file @ 939e617e
This diff is collapsed.
src/pages/user/user.vue
View file @ 939e617e
This diff is collapsed.
src/pages/user/user_info.vue
View file @ 939e617e
This diff is collapsed.
src/pages/workbench/fwgl/cloud-detail.vue
View file @ 939e617e
This diff is collapsed.
src/pages/workbench/fwgl/fwgl.vue
View file @ 939e617e
This diff is collapsed.
src/pages/workbench/fwgl/fwglList.vue
View file @ 939e617e
This diff is collapsed.
src/pages/workbench/fwgl/serviceDetail.vue
View file @ 939e617e
This diff is collapsed.
src/pages/workbench/fwgl/serviceEdit.vue
View file @ 939e617e
This diff is collapsed.
src/pages/workbench/fwzc_fwcs.vue
View file @ 939e617e
This diff is collapsed.
src/pages/workbench/workPlace.vue
View file @ 939e617e
This diff is collapsed.
src/pages/workbench/yygl/app_debugger.vue
View file @ 939e617e
This diff is collapsed.
src/pages/workbench/yygl/app_detail.vue
View file @ 939e617e
This diff is collapsed.
src/pages/workbench/yygl/yygl.vue
View file @ 939e617e
This diff is collapsed.
src/pages/workbench/yygl/yyglList.vue
View file @ 939e617e
This diff is collapsed.
src/request/api/data-analysis.js
View file @ 939e617e
This diff is collapsed.
src/request/api/general.js
View file @ 939e617e
This diff is collapsed.
src/request/api/service-shop.js
View file @ 939e617e
This diff is collapsed.
src/request/api/workbench.js
View file @ 939e617e
This diff is collapsed.
src/request/http.js
View file @ 939e617e
This diff is collapsed.
src/router/index.js
View file @ 939e617e
This diff is collapsed.
src/services/helper.js
View file @ 939e617e
This diff is collapsed.
src/services/index.js
View file @ 939e617e
This diff is collapsed.
src/store/index.js
View file @ 939e617e
This diff is collapsed.
static/config/configmap.js 0 → 100644
View file @ 939e617e
This diff is collapsed.
static/img_default_quesheng.png 0 → 100644
View file @ 939e617e
This diff is collapsed.
static/工作区域申请文件模板.xlsx
View file @ 939e617e
This diff is collapsed.
yarn.lock
View file @ 939e617e
This diff is collapsed.
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