diff --git a/src/main.js b/src/main.js
index eede66c8d51b8d22f1c8f06f36cd79881badb328..b2e03a59d5b6d882249da9e696e684e9d49860e8 100644
--- a/src/main.js
+++ b/src/main.js
@@ -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'
diff --git a/src/pages/workbench/fwgl/fwglList.vue b/src/pages/workbench/fwgl/fwglList.vue
index fda2c73cfbe56384a50983af66b7c9cd1f92daaf..0c1f21ead4515e2bc2e3e9958a04cd60e6639097 100644
--- a/src/pages/workbench/fwgl/fwglList.vue
+++ b/src/pages/workbench/fwgl/fwglList.vue
@@ -31,7 +31,7 @@
:key="index"
>
@@ -58,7 +58,7 @@
:key="index"
>
@@ -72,7 +72,13 @@
-
+
+
+
@@ -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);
+ },
};
@@ -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;
}