更新 NginxLog.vue 页面

src/api/devops.js

@@ -120,6 +120,14 @@ export function updateNginxConf(payload) {
   return post(devopsApi.getMachineNginx + '/conf', payload)
 }
 
+export function getNginxLog(queryInfo) {
+  return get(devopsApi.getMachineNginx + '/log', queryInfo)
+}
+
+export function getNginxLogChart(queryInfo) {
+  return get(devopsApi.getMachineNginx + '/log/chart', queryInfo)
+}
+
 export function getDockerfileImageList() {
   return get(devopsApi.getDockerList + '/image')
 }

src/views/devops/srv/NginxLog.vue

@@ -37,6 +37,22 @@
         <el-button size="mini" type="warning" icon="el-icon-refresh" style="margin-left: 5px" @click="onRefresh">刷新</el-button>
         <el-button size="mini" type="warning" icon="el-icon-files" style="margin-left: 5px" @click="onGetImages">镜像列表</el-button>
       </el-row>
+      <el-row style="margin-top: 10px">
+        <el-select
+          v-model="selectedDateStr"
+          size="mini"
+          placeholder="日期"
+          style="margin-left: 5px"
+          @change="getLogChart"
+        >
+          <el-option
+            v-for="(item, index) in logDateList"
+            :key="index"
+            :label="item.date"
+            :value="item.date"
+          />
+        </el-select>
+      </el-row>
     </el-header>
     <el-main>
       <el-row>
@@ -101,7 +117,7 @@
 </template>
 
 <script>
-import { getEnvList, getMachineSessions } from '@/api/devops'
+import {getEnvList, getMachineSessions, getNginxLog, getNginxLogChart} from '@/api/devops'
 
 export default {
   name: 'NginxLog',
@@ -125,7 +141,10 @@ export default {
       wsReconnectLock: false,
       myChart: null,
       xData: [],
-      yData: []
+      yData: [],
+      logDateList: [],
+      selectedDateStr: '',
+      chartDataList: []
     }
   },
   mounted() {
@@ -145,9 +164,44 @@ export default {
     }).catch(error => {
       this.$message.error(error.message)
     })
+    this.getData()
     this.initWebSocket()
   },
   methods: {
+    getData() {
+      getNginxLog().then(resp => {
+        if (resp.code === 0) {
+          this.logDateList = resp.data
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
+    getLogChart() {
+      const queryInfo = {}
+      queryInfo.dateStr = this.selectedDateStr
+      getNginxLogChart(queryInfo).then(resp => {
+        if (resp.code === 0) {
+          const respData = resp.data
+          const xData = respData[0]
+          const yData = respData[1]
+          this.myChart.setOption({
+            xAxis: {
+              data: xData
+            },
+            series: [{
+              data: yData
+            }]
+          })
+        } else {
+          this.$message.error(resp.msg)
+        }
+      }).catch(error => {
+        this.$message.error(error.message)
+      })
+    },
     getMachineList(env) {
       getMachineSessions(env).then(resp => {
         if (resp.code === 0) {