Skip to content

A
apaas-ui
Commit e6712bb7 authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

服务管理-超管云资源管理列表页面

parent 226589c8
Show whitespace changes
Inline Side-by-side
Showing with 349 additions and 8 deletions
src/main.js
View file @ e6712bb7
......@@ -37,6 +37,7 @@ import "echarts/lib/component/legend"; // 图例
import "echarts/lib/component/title"; // 标题
import 'echarts/lib/component/polar'; // 极坐标系
import 'echarts/lib/chart/scatter'; // 散点图
import 'echarts/lib/component/dataZoom'
import Sparkline from 'vue-sparklines'
......
src/pages/workbench/fwgl/fwglList.vue
View file @ e6712bb7
......@@ -31,7 +31,7 @@
:key="index"
>
<chart
:options="getDashboardOptions(item)"
:options="getDashboardOption(item)"
class="dashboard_chart"
/>
<p class="dashboard_info">
......@@ -58,7 +58,7 @@
:key="index"
>
<chart
:options="getDashboardOptions(item)"
:options="getDashboardOption(item)"
class="dashboard_chart"
/>
<p class="dashboard_info">
......@@ -72,7 +72,13 @@
</div>
</div>
</div>
<div class="admin_preview-right"></div>
<div class="admin_preview-right">
<chart
ref="adminHistogram"
:options="getHistogramOption()"
style="width:100%;height:100%;"
/>
</div>
</div>
</template>
......@@ -1483,7 +1489,10 @@ export default {
cloudAllot(item) {
this.$refs.allotConfirm.getDetail(item.apply_id);
},
getDashboardOptions(item) {
allotSuccess() {
this.init(this.tempFliter);
},
getDashboardOption(item) {
let percent = Math.round((item.value / item.total) * 100) || 0;
let colors = ["#515fe7", "#e7ecfd"];
......@@ -1639,8 +1648,334 @@ export default {
],
};
},
allotSuccess() {
this.init(this.tempFliter);
getHistogramOption(_xAxisData, _series) {
return {
tooltip: {
trigger: "axis",
/* axisPointer: {
crossStyle: {
color: "#999",
},
}, */
backgroundColor: "#242c43",
textStyle: {
fontSize: 12,
lineHeight: 20,
color: "#fff",
},
},
grid: {
left: 10,
right: 10,
bottom: 25,
top: 45,
containLabel: true,
},
color: ["#525e98", "#90b7c1", "#d06d1f", "#e4aa4f"],
legend: {
right: "center",
top: 0,
itemWidth: 10,
itemHeight: 10,
icon: "roundRect",
orient: "horizontal",
backgroundColor: "#f8f9fd",
textStyle: {
fontSize: 12,
lineHeight: 20,
color: "#a9aec0",
},
data: ["CPU", "内存", "数据盘", "容器组"],
},
xAxis: [
{
type: "category",
axisLabel: {
textStyle: {
color: "#0d1847",
fontSize: 12,
lineHeight: 20,
},
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#e3e5ef",
},
},
splitLine: {
show: false,
},
/* splitArea: {
show: true,
areaStyle: {
color: ["#f4f5fd", "#fff"],
opacity: 0.5,
},
}, */
axisPointer: {
type: "shadow",
},
data: [
"办公费",
"印刷费",
"水费",
"水费",
"邮电费",
"物业管理费",
"差旅费",
"因公出国（境）费用",
"维修（护）费",
"会议费",
"租聘费",
"培训费",
"取暖费",
"公务接待费",
"公务用车运行",
"其他交通费用",
"房屋建筑物购建",
"办公设备购置",
"大型修缮",
"信息网络及软件购置更新",
"公务用车购置",
"咨询费",
"手续费",
"劳务费",
"委托业务费",
"其他商品和服务支出",
"专用设备购置",
"基础设施建设",
"其他交通工具购置",
"其他资本性支出",
],
},
],
yAxis: [
{
type: "value",
min: 0,
axisLabel: {
formatter: "{value}",
textStyle: {
color: "#a9aec0",
fontSize: 12,
},
},
axisTick: {
show: false,
},
axisLine: {
lineStyle: {
color: "#e3e5ef",
},
},
splitLine: {
lineStyle: {
type: "dashed",
color: ["#f2f2f2"],
width: 1,
},
},
},
],
series: [
{
type: "bar",
barMaxWidth: 12,
data: [
17931.63,
2420.69,
399.4,
2581.2,
1571.79,
3028.14,
8041.46,
1616.08,
7159.78,
3122.55,
2211.05,
10573.26,
1325.09,
1290.44,
2301.95,
3344.42,
5687.6,
2117.72,
442.4,
14853.71,
96.25,
170.19,
40.74,
3947.28,
12558.87,
12546.87,
6945.36,
683.28,
73.17,
169.15,
],
itemStyle: {
normal: {
barBorderRadius: [6, 6, 6, 6],
},
},
name: "CPU",
},
{
type: "bar",
barMaxWidth: 12,
data: [
17931.63,
2420.69,
399.4,
2581.2,
1571.79,
3028.14,
8041.46,
1616.08,
7159.78,
3122.55,
2211.05,
10573.26,
1325.09,
1290.44,
2301.95,
3344.42,
5687.6,
2117.72,
442.4,
14853.71,
96.25,
170.19,
40.74,
3947.28,
12558.87,
12546.87,
6945.36,
683.28,
73.17,
169.15,
],
itemStyle: {
normal: {
barBorderRadius: [6, 6, 6, 6],
},
},
name: "内存",
},
{
type: "bar",
barMaxWidth: 12,
data: [
17931.63,
2420.69,
399.4,
2581.2,
1571.79,
3028.14,
8041.46,
1616.08,
7159.78,
3122.55,
2211.05,
10573.26,
1325.09,
1290.44,
2301.95,
3344.42,
5687.6,
2117.72,
442.4,
14853.71,
96.25,
170.19,
40.74,
3947.28,
12558.87,
12546.87,
6945.36,
683.28,
73.17,
169.15,
],
itemStyle: {
normal: {
barBorderRadius: [6, 6, 6, 6],
},
},
name: "数据盘",
},
{
type: "bar",
barMaxWidth: 12,
data: [
17931.63,
2420.69,
399.4,
2581.2,
1571.79,
3028.14,
8041.46,
1616.08,
7159.78,
3122.55,
2211.05,
10573.26,
1325.09,
1290.44,
2301.95,
3344.42,
5687.6,
2117.72,
442.4,
14853.71,
96.25,
170.19,
40.74,
3947.28,
12558.87,
12546.87,
6945.36,
683.28,
73.17,
169.15,
],
itemStyle: {
normal: {
barBorderRadius: [6, 6, 6, 6],
},
},
name: "容器组",
},
],
dataZoom: [
{ type: "inside", start: 0, end: 20 },
{
show: true,
type: "slider",
height: 20,
bottom: 0,
start: 0,
end: 100,
fillerColor: "#e6ebfe",
handleStyle: { color: "#b4c0f5" },
backgroundColor: "#f8f9fd",
borderColor: "#f8f9fd",
textStyle: { color: "transparent", fontSize: "12px" },
dataBackground: {
lineStyle: { color: "transparent" },
areaStyle: { color: "transparent" },
},
},
],
};
},
resizeColumn() {
if (this.$refs.adminHistogram) {
this.$refs.adminHistogram.resize();
}
},
},
created() {
......@@ -1665,6 +2000,12 @@ export default {
}
});
},
mounted() {
window.addEventListener("resize", this.resizeColumn);
},
destroyed() {
window.removeEventListener("resize", this.resizeColumn);
},
};
</script>
......@@ -1746,9 +2087,8 @@ export default {
width: calc(50% - 10px);
}
.admin_preview-right {
height: 245px;
height: 250px;
margin-top: 15px;
box-sizing: border-box;
background-color: #233;
}
</style>
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