|
|
@@ -15,7 +15,11 @@
|
|
|
class="demo-form-inline"
|
|
|
>
|
|
|
<el-form-item label="应用">
|
|
|
- <el-select v-model="form.app" placeholder="请选择时段">
|
|
|
+ <el-select
|
|
|
+ v-model="form.app"
|
|
|
+ placeholder="请选择时段"
|
|
|
+ @change="regularData"
|
|
|
+ >
|
|
|
<el-option
|
|
|
v-for="item in cycle"
|
|
|
:key="item.value"
|
|
|
@@ -27,7 +31,7 @@
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item style="float: right">
|
|
|
- <el-button type="primary" @click="onSubmit">查询</el-button>
|
|
|
+ <!-- <el-button type="primary" @click="onSubmit">查询</el-button> -->
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</el-card>
|
|
|
@@ -77,46 +81,50 @@ export default {
|
|
|
},
|
|
|
computed: {},
|
|
|
methods: {
|
|
|
- init() {
|
|
|
- if (time) clearInterval(time);
|
|
|
+ async init() {
|
|
|
if (chart && chart.dispose) chart.dispose();
|
|
|
- getRule({
|
|
|
- db: "authplat",
|
|
|
- exportMark: "0",
|
|
|
- menuid: 221,
|
|
|
- roleid: 9999,
|
|
|
- }).then(r => {
|
|
|
- console.log(r);
|
|
|
- getAppList({
|
|
|
- exportMark: "0",
|
|
|
- gcode: "SOURCE",
|
|
|
- pageid: 1,
|
|
|
- pagesize: 1000,
|
|
|
- }).then(li => {
|
|
|
- if (li.status !== "0") return;
|
|
|
- const l = li.output.data || [];
|
|
|
- this.form = {
|
|
|
- app: (l[0] || { mname: "" }).mname,
|
|
|
- };
|
|
|
- this.onSubmit();
|
|
|
- time = setInterval(() => this.onSubmit(), 60000);
|
|
|
- this.cycle = (l || []).map(v => {
|
|
|
- return {
|
|
|
- value: v.mname,
|
|
|
- label: v.mname,
|
|
|
- };
|
|
|
+ const { source, appli } = await this.getAppListFunc();
|
|
|
+ appli.map(v => {
|
|
|
+ if (source[v.mcode])
|
|
|
+ this.cycle.push({
|
|
|
+ value: v.mname,
|
|
|
+ label: v.mname,
|
|
|
});
|
|
|
- });
|
|
|
});
|
|
|
+
|
|
|
+ this.form = {
|
|
|
+ app: (this.cycle[0] || { value: "" }).value,
|
|
|
+ };
|
|
|
+ this.regularData();
|
|
|
+ },
|
|
|
+ regularData() {
|
|
|
+ if (time) clearInterval(time);
|
|
|
+ chart &&
|
|
|
+ chart.showLoading({
|
|
|
+ text: "loading",
|
|
|
+ color: "rgba(58,132,255,.9)",
|
|
|
+ textColor: "#000",
|
|
|
+ maskColor: "rgba(255, 255, 255, 0.2)",
|
|
|
+ zlevel: 0,
|
|
|
+ });
|
|
|
+ this.onSubmit();
|
|
|
+ time = setInterval(() => {
|
|
|
+ chart &&
|
|
|
+ chart.showLoading({
|
|
|
+ text: "loading",
|
|
|
+ color: "rgba(58,132,255,.9)",
|
|
|
+ textColor: "#000",
|
|
|
+ maskColor: "rgba(255, 255, 255, 0.2)",
|
|
|
+ zlevel: 0,
|
|
|
+ });
|
|
|
+ this.onSubmit();
|
|
|
+ }, 60000);
|
|
|
},
|
|
|
onSubmit() {
|
|
|
getRealAppOnline({ appName: this.form.app })
|
|
|
.then(r => {
|
|
|
if (!this.$refs.realLineChart) return;
|
|
|
- !chart && (chart = echarts.init(this.$refs.realLineChart));
|
|
|
- chart.resize({
|
|
|
- height: (this.$refs.realLineChart.offsetWidth * 6) / 16,
|
|
|
- });
|
|
|
+
|
|
|
const keyList = [],
|
|
|
valueList = [];
|
|
|
(r || []).map(v => {
|
|
|
@@ -124,88 +132,104 @@ export default {
|
|
|
keyList.push(key);
|
|
|
valueList.push(v.total);
|
|
|
});
|
|
|
- chart.setOption({
|
|
|
- tooltip: {
|
|
|
- trigger: "axis",
|
|
|
- },
|
|
|
- grid: {
|
|
|
- left: "3%",
|
|
|
- right: "4%",
|
|
|
- bottom: "3%",
|
|
|
- containLabel: true,
|
|
|
- },
|
|
|
- xAxis: {
|
|
|
- type: "category",
|
|
|
- boundaryGap: false,
|
|
|
- data: keyList,
|
|
|
- },
|
|
|
- yAxis: {
|
|
|
- type: "value",
|
|
|
+ this.createImage(keyList, valueList);
|
|
|
+ chart.hideLoading();
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ chart && chart.clear() && chart.hideLoading();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ createImage(keyList, valueList) {
|
|
|
+ !chart && (chart = echarts.init(this.$refs.realLineChart));
|
|
|
+ chart.resize({
|
|
|
+ height: (this.$refs.realLineChart.offsetWidth * 6) / 16,
|
|
|
+ });
|
|
|
+ chart.setOption({
|
|
|
+ tooltip: {
|
|
|
+ trigger: "axis",
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ left: "3%",
|
|
|
+ right: "4%",
|
|
|
+ bottom: "3%",
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ boundaryGap: false,
|
|
|
+ data: keyList,
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ minInterval: 1,
|
|
|
+ },
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ data: valueList,
|
|
|
+ symbolSize: 0,
|
|
|
+ lineStyle: {
|
|
|
+ width: 1,
|
|
|
},
|
|
|
- series: [
|
|
|
- {
|
|
|
- data: valueList,
|
|
|
- symbolSize: 0,
|
|
|
- lineStyle: {
|
|
|
- width: 1,
|
|
|
- },
|
|
|
- type: "line",
|
|
|
- smooth: true,
|
|
|
- color: "rgba(58,132,255,.9)",
|
|
|
- areaStyle: {
|
|
|
- color: {
|
|
|
- type: "linear",
|
|
|
- x: 0,
|
|
|
- y: 0,
|
|
|
- x2: 0,
|
|
|
- y2: 1,
|
|
|
- colorStops: [
|
|
|
- {
|
|
|
- offset: 0,
|
|
|
- color: "rgba(58,132,255, 0.8)", // 0% 处的颜色
|
|
|
- },
|
|
|
- {
|
|
|
- offset: 1,
|
|
|
- color: "rgba(58,132,255, 0.1)", // 100% 处的颜色
|
|
|
- },
|
|
|
- ],
|
|
|
- global: false, // 缺省为 false
|
|
|
+ type: "line",
|
|
|
+ smooth: true,
|
|
|
+ color: "rgba(58,132,255,.9)",
|
|
|
+ areaStyle: {
|
|
|
+ color: {
|
|
|
+ type: "linear",
|
|
|
+ x: 0,
|
|
|
+ y: 0,
|
|
|
+ x2: 0,
|
|
|
+ y2: 1,
|
|
|
+ colorStops: [
|
|
|
+ {
|
|
|
+ offset: 0,
|
|
|
+ color: "rgba(58,132,255, 0.8)", // 0% 处的颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ offset: 1,
|
|
|
+ color: "rgba(58,132,255, 0.1)", // 100% 处的颜色
|
|
|
},
|
|
|
- },
|
|
|
+ ],
|
|
|
+ global: false, // 缺省为 false
|
|
|
},
|
|
|
- ],
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(err => {
|
|
|
- console.log(err);
|
|
|
- chart.clear();
|
|
|
- });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ });
|
|
|
},
|
|
|
- formatListData() {
|
|
|
- let time = "";
|
|
|
- if (this.form.rangeTime.length) {
|
|
|
- let start = new Date(this.form.rangeTime[0]);
|
|
|
- let end = new Date(this.form.rangeTime[1]);
|
|
|
- let start_hour = start.getHours();
|
|
|
- let start_min = start.getMinutes();
|
|
|
- let end_hour = end.getHours();
|
|
|
- let end_min = end.getMinutes();
|
|
|
- start_hour = start_hour > 9 ? start_hour + "" : "0" + start_hour;
|
|
|
- start_min = start_min > 9 ? start_min + "" : "0" + start_min;
|
|
|
- end_hour = end_hour > 9 ? end_hour + "" : "0" + end_hour;
|
|
|
- end_min = end_min > 9 ? end_min + "" : "0" + end_min;
|
|
|
- if (end_hour + end_min === "2359") {
|
|
|
- end_hour = "24";
|
|
|
- end_min = "00";
|
|
|
- }
|
|
|
- time = start_hour + start_min + "_" + end_hour + end_min;
|
|
|
- } else {
|
|
|
- time = "0000_2400";
|
|
|
+ async getAppListFunc() {
|
|
|
+ const { r, li } = await this.getAppListOri();
|
|
|
+ let source = {},
|
|
|
+ appli = [];
|
|
|
+ let prvList = r.output.data.prvRolectrl || [];
|
|
|
+ for (let i = 0; i < prvList.length; i++) {
|
|
|
+ const v = prvList[i];
|
|
|
+ if (v.controlid == "RMT_SOURCE") source[v.detid] = true;
|
|
|
}
|
|
|
+ if (li.status === "0") appli = li.output.data || [];
|
|
|
return {
|
|
|
- time_range: time,
|
|
|
+ source,
|
|
|
+ appli,
|
|
|
};
|
|
|
},
|
|
|
+ async getAppListOri() {
|
|
|
+ const roleid = JSON.parse(
|
|
|
+ window.parent.localStorage.userinfo || "{}"
|
|
|
+ ).roleid;
|
|
|
+ const r = await getRule({
|
|
|
+ db: "authplat",
|
|
|
+ exportMark: "0",
|
|
|
+ menuid: 221,
|
|
|
+ roleid,
|
|
|
+ });
|
|
|
+ const li = await getAppList({
|
|
|
+ exportMark: "0",
|
|
|
+ gcode: "SOURCE",
|
|
|
+ pageid: 1,
|
|
|
+ pagesize: 1000,
|
|
|
+ });
|
|
|
+ return { r, li };
|
|
|
+ },
|
|
|
},
|
|
|
components: {},
|
|
|
};
|
liyongli