From 612dcb4fd8806b0153560ff67124c37a082a7bf5 Mon Sep 17 00:00:00 2001
From: Surpriseplus <845948745@qq.com>
Date: 星期四, 13 十月 2022 17:43:35 +0800
Subject: [PATCH] 系统配置，环境资源监控接口对接
---
src/views/maintenance/systemMonitoring.vue | 891 +++++++++++++++++++++++-----------------------------------
1 files changed, 355 insertions(+), 536 deletions(-)
diff --git a/src/views/maintenance/systemMonitoring.vue b/src/views/maintenance/systemMonitoring.vue
index f067d00..6a41b81 100644
--- a/src/views/maintenance/systemMonitoring.vue
+++ b/src/views/maintenance/systemMonitoring.vue
@@ -10,174 +10,178 @@
<div class="inform_box">
<div class="content_box">
<div class="top_box">
- <div class="Syslabel">{{$t('operatManage.systemMonitoringObj.totalMemory')}}</div>
- <div class="details">63.93GB</div>
- <div class="Syslabel">
- <span>{{$t('operatManage.systemMonitoringObj.haveBeenUsed')}} 31.16GB</span>
- <span style="margin-left: 25px">{{$t('operatManage.systemMonitoringObj.usageRate')}} 49%</span>
+ <div style="width: 100%; height: 100%">
+ <div
+ style="
+ width: 30%;
+ height: 100%;
+
+ float: left;
+ margin-left: 20%;
+ "
+ >
+ <div class="Syslabel">
+ <p style="line-height: 25px">
+ {{ $t('operatManage.systemMonitoringObj.haveBeenUsed') }}
+ {{ memInfo.use }}
+ </p>
+ <br />
+ <p style="line-height: 25px">
+ {{ $t('operatManage.systemMonitoringObj.totalMemory') }}
+ {{ memInfo.totalMem }}
+ </p>
+ </div>
+ </div>
+ <div
+ id="shuiwen"
+ style="
+ width: 40%;
+ height: 100%;
+
+ float: left;
+ "
+ ></div>
</div>
+ <!-- <div class="Syslabel">
+ {{ $t('operatManage.systemMonitoringObj.totalMemory') }}
+ </div>
+ <div class="details">{{ memInfo.totalMem }}</div> -->
+ <!-- -->
+ <!-- <div class="Syslabel">
+ <span
+ >{{ $t('operatManage.systemMonitoringObj.haveBeenUsed') }}
+ {{ memInfo.use }}</span
+ >
+ <span style="margin-left: 25px"
+ >{{ $t('operatManage.systemMonitoringObj.usageRate') }}
+ {{ memInfo.usage }}</span
+ >
+ </div> -->
</div>
- <div class="bottom_box">{{$t('operatManage.systemMonitoringObj.systemMemory')}}</div>
+ <div class="bottom_box">
+ {{ $t('operatManage.systemMonitoringObj.systemMemory') }}
+ </div>
</div>
<div class="content_box">
<div class="top_box">
- <div class="Syslabel">{{$t('operatManage.systemMonitoringObj.CPUusage')}}</div>
- <div class="details">3.49%</div>
+ <div class="Syslabel">
+ {{ $t('operatManage.systemMonitoringObj.CPUusage') }}
+ </div>
+ <div class="details">{{ cpuInfo.cpuSysUsage }}</div>
<div id="Sys_cpu_chart"></div>
</div>
- <div class="bottom_box">{{$t('operatManage.systemMonitoringObj.CPUsystemUsage')}}</div>
+ <div class="bottom_box">
+ {{ $t('operatManage.systemMonitoringObj.CPUsystemUsage') }}
+ </div>
</div>
<div class="content_box">
<div class="top_box">
- <div class="Syslabel">{{$t('operatManage.systemMonitoringObj.numberOfExceptions')}}</div>
- <div class="details">0</div>
+ <div class="Syslabel">
+ {{ $t('operatManage.systemMonitoringObj.numberOfExceptions') }}
+ </div>
+ <div class="details">{{ resInfoCount }}</div>
</div>
- <div class="bottom_box">{{$t('operatManage.systemMonitoringObj.numberOfAbnormalSystems')}}</div>
+ <div class="bottom_box">
+ {{ $t('operatManage.systemMonitoringObj.numberOfAbnormalSystems') }}
+ </div>
</div>
- <div class="content_box">
+ <!-- <div class="content_box">
<div class="top_box">
<div class="Syslabel">{{$t('operatManage.systemMonitoringObj.serviceAarm')}}</div>
<div class="details">8</div>
</div>
<div class="bottom_box">{{$t('operatManage.systemMonitoringObj.serviceResourceAlarm')}}</div>
- </div>
+ </div> -->
</div>
<div class="chart_box">
- <el-tabs v-model="activeName" @tab-click="handleClick">
- <el-tab-pane :label="$t('operatManage.systemMonitoringObj.serviceResourceStatus')" name="first">
- <div class="gauge_box">
- <div id="gauge_chart1"></div>
- <div id="gauge_chart2"></div>
- </div>
- </el-tab-pane>
- <el-tab-pane :label="$t('operatManage.systemMonitoringObj.userOperationBehavior')" name="second">
- <div class="gauge_box">
- <div class="input_box">
- <el-form
- :inline="true"
- :model="formInline"
-
- size="mini"
- >
- <el-form-item label="">
- <el-input
- v-model="formInline.user"
- :placeholder="$t('operatManage.systemMonitoringObj.EnterTheUserChineseName')"
- ></el-input>
- </el-form-item>
-
- <el-form-item>
- <el-button type="primary" @click="onSubmit">{{$t('operatManage.systemMonitoringObj.inquire')}}</el-button>
- </el-form-item>
- </el-form>
- </div>
- <div ref="dayBar" id="gauge_chart3"></div>
- </div>
- </el-tab-pane>
- <el-tab-pane :label="$t('operatManage.systemMonitoringObj.resourceInvocationStatus')" name="third">
- <div class="gauge_box">
- <div class="input_box">
- <el-form
- :inline="true"
- :model="formInline"
-
- size="mini"
- >
- <el-form-item label="">
- <el-input
- v-model="formInline.user"
- :placeholder="$t('operatManage.systemMonitoringObj.EnterTheResourceID')"
- ></el-input>
- </el-form-item>
-
- <el-form-item>
- <el-button type="primary" @click="onSubmit">{{$t('operatManage.systemMonitoringObj.inquire')}}</el-button>
- </el-form-item>
- </el-form>
- </div>
- <div ref="dayline" id="line_chart"></div>
- </div>
- </el-tab-pane>
- <el-tab-pane :label="$t('operatManage.systemMonitoringObj.resourceCallStatistics')" name="fourth">
- <div class="gauge_box">
- <div class="input_box">
- <el-form
- :inline="true"
- :model="formInline"
-
- size="mini"
- >
- <el-form-item label="">
- <el-input
- v-model="formInline.user"
- :placeholder="$t('operatManage.systemMonitoringObj.EnterTheUserName')"
- ></el-input>
- </el-form-item>
-
- <el-form-item>
- <el-button type="primary" @click="onSubmit">{{$t('operatManage.systemMonitoringObj.inquire')}}</el-button>
- </el-form-item>
- </el-form>
- </div>
- <div ref="dayBar1" id="gauge_chart5"></div>
- </div>
- </el-tab-pane>
- </el-tabs>
+ <p class="title_box">
+ {{ $t('operatManage.systemMonitoringObj.abnormalResources') }}
+ </p>
+ <el-table :data="resInfo" style="width: 100%">
+ <el-table-column
+ prop="id"
+ :label="$t('operatManage.systemMonitoringObj.resourceID')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="name"
+ :label="$t('operatManage.systemMonitoringObj.resourceName')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="bak"
+ :label="$t('operatManage.systemMonitoringObj.resourceState')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="createTime"
+ :label="$t('operatManage.systemMonitoringObj.abnormaltime')"
+ show-overflow-tooltip
+ >
+ </el-table-column>
+ </el-table>
+ <!-- <div style="margin-top: 10px" class="pagination_box">
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="currentPage4"
+ :page-sizes="[10, 20, 30, 40]"
+ :page-size="10"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="4"
+ >
+ </el-pagination>
+ </div> -->
</div>
- <div class="table_box">
- <div class="left">
- <p class="title_box">{{$t('operatManage.systemMonitoringObj.onlinePersonnel')}}</p>
- <el-table :data="tableData" style="width: 100%">
- <el-table-column prop="name" :label="$t('operatManage.systemMonitoringObj.userID')"> </el-table-column>
- <el-table-column prop="servicecatalog" :label="$t('operatManage.systemMonitoringObj.username')">
- </el-table-column>
- <el-table-column prop="visitTimes" :label="$t('operatManage.systemMonitoringObj.onlineTime')" fixed="right">
- </el-table-column>
- </el-table>
- <div style="margin-top: 40px" class="pagination_box">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="currentPage4"
- :page-sizes="[10, 20, 30, 40]"
- :page-size="10"
- layout="total, sizes, prev, pager, next, jumper"
- :total="4"
- >
- </el-pagination>
- </div>
- </div>
- <div class="right">
- <p class="title_box">{{$t('operatManage.systemMonitoringObj.abnormalResources')}}</p>
- <el-table :data="tableData" style="width: 100%">
- <el-table-column prop="name" :label="$t('operatManage.systemMonitoringObj.resourceID')"> </el-table-column>
- <el-table-column prop="servicecatalog" :label="$t('operatManage.systemMonitoringObj.resourceName')">
- </el-table-column>
- <el-table-column prop="visitTimes" :label="$t('operatManage.systemMonitoringObj.resourceState')">
- </el-table-column>
- <el-table-column prop="date" :label="$t('operatManage.systemMonitoringObj.abnormaltime')" show-overflow-tooltip>
- </el-table-column>
- </el-table>
- <div style="margin-top: 40px" class="pagination_box">
- <el-pagination
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="currentPage4"
- :page-sizes="[10, 20, 30, 40]"
- :page-size="10"
- layout="total, sizes, prev, pager, next, jumper"
- :total="4"
- >
- </el-pagination>
- </div>
- </div>
+ <div class="left">
+ <p class="title_box">
+ {{ $t('operatManage.systemMonitoringObj.onlinePersonnel') }}
+ </p>
+ <el-table :data="tableData" style="width: 100%">
+ <el-table-column
+ align="center"
+ type="index"
+ :label="$t('operatManage.ELM.index')"
+ width="100px"
+ />
+ <el-table-column
+ prop="uid"
+ :label="$t('operatManage.systemMonitoringObj.userID')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="uname"
+ :label="$t('operatManage.systemMonitoringObj.username')"
+ >
+ </el-table-column>
+ <el-table-column
+ prop="loginTime"
+ :label="$t('operatManage.systemMonitoringObj.onlineTime')"
+ fixed="right"
+ >
+ </el-table-column>
+ </el-table>
+
+ <!-- <div style="margin-top: 10px" class="pagination_box">
+ <el-pagination
+ @size-change="handleSizeChange"
+ @current-change="handleCurrentChange"
+ :current-page="currentPage4"
+ :page-sizes="[10, 20, 30, 40]"
+ :page-size="10"
+ layout="total, sizes, prev, pager, next, jumper"
+ :total="4"
+ >
+ </el-pagination>
+ </div> -->
</div>
</div>
</template>
<script>
-import MyBread from "../../components/MyBread.vue";
+import MyBread from '../../components/MyBread.vue';
+import 'echarts-liquidfill';
export default {
//import寮曞叆鐨勭粍浠堕渶瑕佹敞鍏ュ埌瀵硅薄涓墠鑳戒娇鐢�
components: {
@@ -186,409 +190,240 @@
data() {
//杩欓噷瀛樻斁鏁版嵁
return {
- formInline: {
- user: "",
- region: "",
- },
- activeName: "first",
- currentPage4: 1,
- tableData: [
- {
- date: "2022-08-03",
- name: "test",
- servicecatalog: "涓氬姟鍥惧眰",
- visitTimes: "12",
- state: "涓嶅彲鐢�",
- },
- {
- date: "2022-08-03",
- name: "cs9",
- servicecatalog: "涓氬姟鍥惧眰",
- visitTimes: "7",
- state: "涓嶅彲鐢�",
- },
- {
- date: "2022-08-03",
- name: "test1",
- servicecatalog: "涓氬姟鍥惧眰",
- visitTimes: "5",
- state: "涓嶅彲鐢�",
- },
- {
- date: "2022-08-03",
- name: "cs3",
- servicecatalog: "涓氬姟鍥惧眰",
- visitTimes: "8",
- state: "涓嶅彲鐢�",
- },
- ],
+ ws: null,
+ tableData: [],
+ memInfo: { totalMem: 0, use: 0, usage: 0 },
+ cpuInfo: { cpuSysUsage: 0 },
+ resInfo: [],
+ resInfoCount: 0,
+ echartData: [],
};
},
//鏂规硶闆嗗悎
methods: {
- onSubmit() {
- console.log("submit!");
- },
- handleClick(tab, event) {
- console.log(tab, event);
- this.$nextTick(() => {
- this.$echarts.getInstanceByDom(this.$refs.dayBar).resize();
- this.$echarts.getInstanceByDom(this.$refs.dayBar1).resize();
- this.$echarts.getInstanceByDom(this.$refs.dayline).resize();
- });
- },
- handleSizeChange(val) {
- console.log(`姣忛〉 ${val} 鏉);
- },
- handleCurrentChange(val) {
- console.log(`褰撳墠椤�: ${val}`);
- },
- gaugeChart1() {
- let option = {
- tooltip: {
- trigger: "item",
- },
- legend: {
- top: "5%",
- left: "20%",
- orient: "vertical",
- },
- series: [
- {
- name: "",
- type: "pie",
- radius: ["70%", "90%"],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: "center",
- },
- emphasis: {
- label: {
- show: true,
- fontSize: "30",
- fontWeight: "bold",
- },
- },
- labelLine: {
- show: false,
- },
- data: [
- { value: 1048, name: "姝ｅ父璧勬簮" },
- { value: 735, name: "寮傚父璧勬簮" },
- ],
- itemStyle: {
- normal: {
- color: function (colors) {
- var colorList = ["#d3e9af", "#ed9678"];
- return colorList[colors.dataIndex];
- },
- },
- },
- },
- ],
- };
- let myChart = this.$echarts.init(document.getElementById("gauge_chart1"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
- });
- },
- gaugeChart2() {
- let option = {
- tooltip: {
- trigger: "item",
- },
- legend: {
- top: "5%",
- left: "20%",
- orient: "vertical",
- },
- series: [
- {
- name: "",
- type: "pie",
- radius: ["70%", "90%"],
- avoidLabelOverlap: false,
- label: {
- show: false,
- position: "center",
- },
- emphasis: {
- label: {
- show: true,
- fontSize: "30",
- fontWeight: "bold",
- },
- },
- labelLine: {
- show: false,
- },
- data: [
- { value: 1048, name: "娲昏穬璧勬簮" },
- { value: 0, name: "涓嶆椿璺冭祫婧�" },
- ],
- itemStyle: {
- normal: {
- color: function (colors) {
- var colorList = ["#d3e9af", "#ed9678"];
- return colorList[colors.dataIndex];
- },
- },
- },
- },
- ],
- };
- let myChart = this.$echarts.init(document.getElementById("gauge_chart2"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
- });
- },
- barChart() {
- let option = {
- xAxis: {
- type: "category",
- axisLabel: {
- interval: 0,
- rotate: 60,
- },
- data: [
- "Mon",
- "Tue",
- "Wed",
- "Thu",
- "Fri",
- "Sat",
- "Sun",
- "Mon",
- "Tue",
- "Wed",
- "Thu",
- "Fri",
- "Sat",
- "Sun",
- "Mon",
- "Tue",
- "Wed",
- "Thu",
- "Fri",
- "Sat",
- "Sun",
- ],
- },
- yAxis: {
- type: "value",
- },
- series: [
- {
- data: [
- 120, 200, 150, 80, 70, 110, 130120, 200, 150, 80, 70, 110, 130,
- 120, 200, 150, 80, 70, 110, 130,
- ],
- type: "bar",
- showBackground: true,
- backgroundStyle: {
- color: "rgba(180, 180, 180, 0.2)",
- },
- },
- ],
- };
- let myChart = this.$echarts.init(document.getElementById("gauge_chart5"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
- });
- },
- barChart1() {
- let option = {
- xAxis: {
- type: "category",
- axisLabel: {
- interval: 0,
- rotate: 60,
- },
- data: [
- "Mon",
- "Tue",
- "Wed",
- "Thu",
- "Fri",
- "Sat",
- "Sun",
- "Mon",
- "Tue",
- "Wed",
- "Thu",
- "Fri",
- "Sat",
- "Sun",
- "Mon",
- "Tue",
- "Wed",
- "Thu",
- "Fri",
- "Sat",
- "Sun",
- ],
- },
- yAxis: {
- type: "value",
- },
- series: [
- {
- data: [
- 120, 200, 150, 80, 70, 110, 130120, 200, 150, 80, 70, 110, 130,
- 120, 200, 150, 80, 70, 110, 130,
- ],
- type: "bar",
- showBackground: true,
- backgroundStyle: {
- color: "rgba(180, 180, 180, 0.2)",
- },
- },
- ],
- };
- let myChart = this.$echarts.init(document.getElementById("gauge_chart3"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
- });
- },
- lineChart() {
- let base = +new Date(1968, 9, 3);
- let oneDay = 24 * 3600 * 1000;
- let date = [];
- let data = [Math.random() * 300];
- for (let i = 1; i < 20000; i++) {
- var now = new Date((base += oneDay));
- date.push(
- [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
- );
- data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
+ SetTableData1(res) {
+ this.tableData = res.userInfo;
+ this.memInfo = res.memInfo;
+ this.cpuInfo = res.cpuInfo;
+ if (this.echartData.length == 7) {
+ this.echartData.splice(0, 1);
}
- let option = {
- tooltip: {
- trigger: "axis",
- position: function (pt) {
- return [pt[0], "10%"];
- },
- },
- title: {
- left: "center",
- text: "Large Area Chart",
- },
- toolbox: {
- feature: {
- dataZoom: {
- yAxisIndex: "none",
- },
- restore: {},
- saveAsImage: {},
- },
- },
- xAxis: {
- type: "category",
- boundaryGap: false,
- data: date,
- },
- yAxis: {
- type: "value",
- boundaryGap: [0, "100%"],
- },
- dataZoom: [
- {
- type: "inside",
- start: 0,
- end: 10,
- },
- {
- start: 0,
- end: 10,
- },
- ],
- series: [
- {
- name: "Fake Data",
- type: "line",
- symbol: "none",
- sampling: "lttb",
- itemStyle: {
- color: "rgb(255, 70, 131)",
- },
- areaStyle: {
- color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
- {
- offset: 0,
- color: "rgb(255, 158, 68)",
- },
- {
- offset: 1,
- color: "rgb(255, 70, 131)",
- },
- ]),
- },
- data: data,
- },
- ],
- };
- let myChart = this.$echarts.init(document.getElementById("line_chart"));
- myChart.setOption(option);
- window.addEventListener("resize", function () {
- myChart.resize();
- });
+ this.echartData.push(parseFloat(res.cpuInfo.cpuSysUsage));
+ this.lineChart1();
+ console.log(this.memInfo.usage);
+ this.lineChart2(this.memInfo.usage);
+ },
+ SetTableData2(res) {
+ this.resInfo = res.resInfo;
+ this.resInfoCount = res.resInfo.length;
},
lineChart1() {
let option = {
grid: {
top: 0,
- left: "0%",
- right: "4%",
- bottom: "0%",
+ left: '0%',
+ right: '4%',
+ bottom: '0%',
containLabel: true,
},
tooltip: {
- trigger: "axis",
+ trigger: 'axis',
},
xAxis: {
- type: "category",
+ type: 'category',
boundaryGap: false,
- data: ["", "", "", "", "", "", ""],
+ data: ['', '', '', '', '', '', ''],
},
yAxis: {
- type: "value",
+ type: 'value',
axisLabel: {
show: false, // 涓嶆樉绀哄潗鏍囪酱涓婄殑鏂囧瓧
},
},
series: [
{
- data: [820, 932, 901, 934, 1290, 1330, 1320],
- type: "line",
+ data: this.echartData,
+ type: 'line',
areaStyle: {},
},
],
};
let myChart = this.$echarts.init(
- document.getElementById("Sys_cpu_chart")
+ document.getElementById('Sys_cpu_chart')
);
myChart.setOption(option);
- window.addEventListener("resize", function () {
+ window.addEventListener('resize', function () {
myChart.resize();
});
},
- handleSelectionChange() {},
+ lineChart2(res) {
+ var a = res.split('%').join('');
+ console.log(a);
+ let value = parseFloat(a);
+ let data = [value, value, value];
+ let option = {
+ title: {
+ text: value + '{a|%}',
+ textStyle: {
+ fontSize: 15,
+ fontFamily: 'Microsoft Yahei',
+ fontWeight: 'normal',
+ color: '#00FFFF',
+ rich: {
+ a: {
+ fontSize: 15,
+ },
+ },
+ },
+ x: 'center',
+ y: '35%',
+ },
+ graphic: [
+ {
+ type: 'group',
+ left: 'center',
+
+ children: [
+ {
+ type: 'text',
+ z: 20,
+ left: '10',
+ top: '50',
+ style: {
+ fill: '#00FFFF',
+ text: '浣跨敤鐜�',
+ font: '14px Microsoft YaHei',
+ },
+ },
+ ],
+ },
+ ],
+ series: [
+ {
+ type: 'liquidFill',
+ radius: '80%',
+ center: ['50%', '50%'],
+ // shape: 'roundRect',
+ data: data,
+ backgroundStyle: {
+ color: {
+ type: 'linear',
+ x: 1,
+ y: 0,
+ x2: 0.5,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 1,
+ color: 'rgba(68, 145, 253, 0)',
+ },
+ {
+ offset: 0.5,
+ color: 'rgba(68, 145, 253, .25)',
+ },
+ {
+ offset: 0,
+ color: 'rgba(68, 145, 253, 1)',
+ },
+ ],
+ globalCoord: false,
+ },
+ },
+ outline: {
+ borderDistance: 0,
+ itemStyle: {
+ borderWidth: 20,
+ borderColor: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 0,
+ color: 'rgba(69, 73, 240, 0)',
+ },
+ {
+ offset: 0.5,
+ color: 'rgba(69, 73, 240, .25)',
+ },
+ {
+ offset: 1,
+ color: 'rgba(69, 73, 240, 1)',
+ },
+ ],
+ globalCoord: false,
+ },
+ shadowBlur: 10,
+ shadowColor: '#000',
+ },
+ },
+ itemStyle: {
+ color: {
+ type: 'linear',
+ x: 0,
+ y: 0,
+ x2: 0,
+ y2: 1,
+ colorStops: [
+ {
+ offset: 1,
+ color: 'rgba(58, 71, 212, 0)',
+ },
+ {
+ offset: 0.5,
+ color: 'rgba(31, 222, 225, .2)',
+ },
+ {
+ offset: 0,
+ color: 'rgba(31, 222, 225, 1)',
+ },
+ ],
+ globalCoord: false,
+ },
+ },
+ label: {
+ normal: {
+ formatter: '',
+ },
+ },
+ },
+ ],
+ };
+
+ let myChart1 = this.$echarts.init(document.getElementById('shuiwen'));
+ myChart1.setOption(option);
+ window.addEventListener('resize', function () {
+ myChart.resize();
+ });
+ },
},
- created() {},
+ created() {
+ if (Window.ws != null) {
+ Window.ws.close();
+ Window.ws.onclose = () => {
+ console.log('鏈嶅姟鍣ㄥ叧闂�');
+ };
+ Window.ws = null;
+ }
+ Window.ws = new WebSocket('ws://192.168.20.55:12316/ws');
+ Window.ws.option = () => {};
+ var that = this;
+ Window.ws.onmessage = (msg) => {
+ // console.log('鏉ヨ嚜鏈嶅姟鍣ㄧ鐨勬暟鎹細' + msg.data); //鐩戝惉鎺ュ彈鏉ヨ嚜鏈嶅姟绔殑淇℃伅
+ var data = JSON.parse(msg.data);
+
+ if (data.resInfo == undefined) {
+ that.SetTableData1(data);
+ } else {
+ that.SetTableData2(data);
+ }
+ };
+ },
+
mounted() {
- this.$nextTick(() => {
- this.lineChart();
- this.lineChart1();
- this.barChart();
- this.barChart1();
- this.gaugeChart1();
- this.gaugeChart2();
- });
+ this.lineChart2(0);
},
};
</script>
@@ -612,7 +447,7 @@
box-sizing: border-box;
padding: 10px;
padding-top: 30px;
- width: 24%;
+ width: 33%;
height: 100%;
background: #fff;
border-radius: 5px;
@@ -653,32 +488,16 @@
}
}
}
- .table_box {
- height: 36%;
- display: flex;
- justify-content: space-between;
- align-items: center;
- .left {
- box-sizing: border-box;
- padding: 10px;
- width: 49%;
- height: 100%;
- background: #fff;
- border-radius: 5px;
- border: 1px solid rgb(202, 201, 204);
- overflow: auto;
- }
- .right {
- overflow: auto;
- box-sizing: border-box;
- padding: 10px;
- width: 49%;
- height: 100%;
- background: #fff;
- border-radius: 5px;
- border: 1px solid rgb(202, 201, 204);
- }
+ .left {
+ box-sizing: border-box;
+ padding: 10px;
+ width: 100%;
+ height: 37%;
+ background: #fff;
+ border-radius: 5px;
+ border: 1px solid rgb(202, 201, 204);
+ overflow: auto;
}
.title_box {
font-weight: 800;
@@ -708,7 +527,7 @@
width: 100%;
height: 95%;
position: relative;
- .input_box{
+ .input_box {
position: absolute;
top: 0;
left: 0;
--
Gitblit v1.9.3