From 5044b402981f42542eece201e1308b5c2816737a Mon Sep 17 00:00:00 2001 From: heyujie <516346543@qq.com> Date: 星期四, 01 七月 2021 20:51:32 +0800 Subject: [PATCH] 轮询日志和朔黄按机车hao号搜索 --- src/pages/logCenter/views/pollingLog.vue | 618 +++++++++++++++++++++++++------------------------------ 1 files changed, 283 insertions(+), 335 deletions(-) diff --git a/src/pages/logCenter/views/pollingLog.vue b/src/pages/logCenter/views/pollingLog.vue index 4b0ee47..50708cb 100644 --- a/src/pages/logCenter/views/pollingLog.vue +++ b/src/pages/logCenter/views/pollingLog.vue @@ -1,384 +1,332 @@ <template> - <div class="restart"> - <div class="restart-set"> - <div class="t">閲嶅惎璁剧疆</div> + <div class="op-log" v-loading="loading" :element-loading-text="loadingText"> + <div class="top"> + <div class="first"> + <div class="time-option"> + <div class="title">鎽勫儚鏈猴細</div> - <div class="bar"> - <div class="name">閲嶅惎鑺傜偣</div> - <el-button - class="reset-btn" - type="primary" - size="small" - @click="restart" - >閲嶅惎</el-button - > - </div> - </div> - - <div class="restart-set"> - <div class="t">瀹氭椂閲嶅惎</div> - <div class="bar"> - <div class="name">閲嶅惎鍛ㄦ湡</div> - <el-select - v-model="every" - placeholder="鍏抽棴" - size="small" - @change="changeEvery" - > - <el-option - v-for="item in options" - :key="item.value" - :label="item.label" - :value="item.value" + <div class="opts"> + <div + class="opt opt-active" + @click="openDialog" + > + 閫夋嫨鎽勫儚鏈� + </div> + </div> + </div> + <div class="search"> + <el-input + placeholder="鎼滅储" + v-model="procName" + size="small" + class="input-with-select" > - </el-option> - </el-select> + <el-button slot="append" icon="el-icon-search" @click="getScheduleLog"></el-button> + </el-input> + </div> </div> - - <div class="bar" v-if="every == 'monthly'"> - <div class="name">閲嶅惎鏃ユ湡</div> - <el-select - v-model="cronValueObj.day" - placeholder="璇烽�夋嫨" - size="small" - @change="updateExpression" - > - <el-option - v-for="item in days" - :key="item.value" - :label="item.label" - :value="item.value" - ></el-option> - </el-select> - </div> - - <div class="bar" v-if="every == 'weekly'"> - <div class="name">閲嶅惎鏃ユ湡</div> - <el-select - v-model="cronValueObj.week" - placeholder="璇烽�夋嫨" - size="small" - @change="updateExpression" - > - <el-option label="鏄熸湡涓�" value="1"></el-option> - <el-option label="鏄熸湡浜�" value="2"></el-option> - <el-option label="鏄熸湡涓�" value="3"></el-option> - <el-option label="鏄熸湡鍥�" value="4"></el-option> - <el-option label="鏄熸湡浜�" value="5"></el-option> - <el-option label="鏄熸湡鍏�" value="6"></el-option> - <el-option label="鏄熸湡鏃�" value="7"></el-option> - </el-select> - </div> - - <div class="bar" v-if="every != 'close'"> - <div class="name">閲嶅惎鏃堕棿</div> - <el-time-picker - v-model="time" - :picker-options="{ selectableRange: '00:00:00 - 23:59:59' }" - value-format="HH:mm" - format="HH:mm" - placeholder="浠绘剰鏃堕棿鐐�" - size="small" - @change="updateExpression" - ></el-time-picker> + <div class="second"> + <span>鏃ユ湡鏃堕棿锛�</span> + <el-date-picker + v-model="dateRange" size="small" + type="datetimerange" + range-separator="鍒�" + value-format="yyyy-MM-dd HH:mm:ss" + start-placeholder="寮�濮嬫棩鏈�" + @change="dateChange" + end-placeholder="缁撴潫鏃ユ湡"> + </el-date-picker> </div> </div> + <div class="table"> + <el-table + class="tableBox" + ref="multipleTable" + highlight-current-row + :data="tableData" + style="width: 100%" + :header-cell-style="{ background: '#f8f8f8', color: '#222222' }" + @selection-change="handleSelectionChange" + > + <el-table-column :align="'center'" label="搴忓彿" type="index" width="50"> + </el-table-column> + <el-table-column + :align="'center'" + sortable + min-width="100px" + prop="add_time" + label="杞寮�濮嬫椂闂�" + ></el-table-column> + <el-table-column + :align="'center'" + sortable + min-width="100px" + prop="add_time" + label="杞缁撴潫鏃堕棿" + ></el-table-column> + <el-table-column + :align="'center'" + sortable + prop="module" + label="鎽勫儚鏈�" + ></el-table-column> + <el-table-column + :align="'center'" + prop="procName" + label="杞鏃堕暱锛堝垎锛�" + ></el-table-column> + </el-table> + </div> - <el-button class="save-btn" type="primary" @click="save">淇濆瓨</el-button> + <el-dialog + title="閫夋嫨鎽勫儚鏈�" + :visible.sync="dialogVisible" + width="50%" + :before-close="handleClose"> + + <el-tree + ref="cameraTree" + :data="cameraTree" + :props="props" + node-key="id" + show-checkbox + check-on-click-node + default-expand-all + ></el-tree> + + <span slot="footer" class="dialog-footer"> + <el-button @click="dialogVisible = false">鍏ㄩ儴鍙栨秷</el-button> + <el-button @click="dialogVisible = false">鍏ㄩ��</el-button> + <el-button @click="dialogVisible = false">鍙� 娑�</el-button> + <el-button type="primary" @click="confirmCamera">纭� 瀹�</el-button> + </span> +</el-dialog> + </div> </template> <script> -import { - rebootServer, - getDevInfo, - getRebootTask, - setRebootTask, - fileUpload, - doUpgrade, - deleteDate, -} from "@/api/system"; +import { deleteDate } from "@/api/system"; +import { getLocalCameraTree } from "@/api/area"; + + +import { queryOperationLog, getOperations, getModules,queryScheduleLog } from "@/api/log"; + +function pad0(i) { + if (i >= 0 && i <= 9) { + return "0" + i; + } else { + return i; + } +} export default { data() { return { - time: "", - saveBtn: false, - timer: null, - probeSum: 0, - cronText: "", - cronValueObj: { - min: "*", - hour: "*", - day: "*", - month: "*", - week: "*", - }, - options: [ + loading: false, + loadingText: "", + input3: "", + tableData: [], + moduleOptions: [], + gongnengOptions: [], + dateRange: [], + cameraTree:[], + resultOptions: [ { - value: "close", - label: "鍏抽棴", + value: "", + label: "鍏ㄩ儴", }, { - value: "daily", - label: "姣忔棩", + value: "鎴愬姛", + label: "鎴愬姛", }, { - value: "weekly", - label: "姣忓懆", - }, - { - value: "monthly", - label: "姣忔湀", + value: "澶辫触", + label: "澶辫触", }, ], - every: "close", - rebootCron: "", + props: { + label: 'name' + }, + value: "", + page: 1, + pageSize: 15, + activeDateChoise: 0, + gongneng: "", + result: "", + curModule: "", + timeStart: "", + timeEnd: "", + fuzzySearch: "", + total:0,dialogVisible: false, + procID: "", + procName: "", }; }, - computed: { - days: () => { - let arr = []; - for (let i = 1; i < 32; i++) { - arr.push({ - label: i + "鏃�", - value: i + "", - }); - } - return arr; - }, - }, - components: {}, mounted() { - this.getRebootCron(); + this.getTimeRange(24 * 60 * 60 * 1000); + this.getScheduleLog(); + this.getOptions(); }, - beforeDestroy() {}, methods: { - resolveExp() { - // "鍑嗗鍙嶈В鏋�", this.expression; - if (this.rebootCron.length) { - let arr = this.rebootCron.split(" "); - if (arr.length >= 5) { - //6 浣嶄互涓婃槸鍚堟硶琛ㄨ揪寮� - this.cronValueObj.min = arr[0]; - this.cronValueObj.hour = arr[1]; - this.cronValueObj.day = arr[2]; - this.cronValueObj.month = "*"; - this.cronValueObj.week = arr[4]; - } - - if (this.cronValueObj.week != "*") { - this.every = "weekly"; - } else if (this.cronValueObj.day != "*") { - this.every = "monthly"; - } else { - this.every = "daily"; - } - this.time = this.cronValueObj.hour + ":" + this.cronValueObj.min; - } else { - //娌℃湁浼犲叆鐨勮〃杈惧紡 鍒欒繕鍘� - this.clearCron(); - } + confirmCamera(){ + const selectedIDs= this.$refs.cameraTree.getCheckedKeys() + this.procID= selectedIDs.join(",") + this.getScheduleLog() + this.dialogVisible=false }, - clearCron() { - this.cronValueObj.min = "*"; - this.cronValueObj.hour = "*"; - this.cronValueObj.day = "*"; - this.cronValueObj.month = "*"; - this.cronValueObj.week = "*"; + openDialog(){ + this.dialogVisible= true + getLocalCameraTree({ + cameraName:"", + searchType:0 + }).then((res) => { + this.cameraTree =res.data + }) }, - getRebootCron() { - getRebootTask().then((rsp) => { - this.rebootCron = rsp.data; + gongnengChange(val) {}, + moduleChange(val) { + this.getScheduleLog() + this.gongneng="" + getOperations({ + module: this.curModule, + }).then((res) => { + this.gongnengOptions = res.data; }); }, - reLogin() { - this.$router.push("/"); - }, - restart() { - this.$confirm("纭畾瑕侀噸鍚鑺傜偣鍚�?", { - center: true, - cancelButtonClass: "comfirm-class-cancle", - confirmButtonClass: "comfirm-class-sure", - }).then(() => { - // this.loading = true; - // this.loadingText = "鏅鸿兘璁$畻鑺傜偣姝e湪閲嶅惎锛岃鑰愬績绛夊緟..." - rebootServer() - .then((rsp) => { - this.probeServer(this.reLogin); - }) - .catch((err) => { - if (err.status == 400) { - // this.loading = false; - this.$notify({ - type: "error", - message: "閲嶅惎璁$畻鑺傜偣澶辫触", - }); - } else { - this.probeServer(this.reLogin); - } - }); + getOptions() { + getModules().then((res) => { + this.moduleOptions = res.data; }); }, - probeServer(cb) { - this.probeSum++; - let _this = this; - if (this.probeSum > 60) { - this.$confirm("杩炴帴鏈嶅姟鍣ㄥけ璐�, 璇峰埛鏂伴〉闈㈡垨鑱旂郴绠$悊鍛�", "澶辫触", { - type: "error", - cancelButtonClass: "comfirm-class-cancle", - confirmButtonClass: "comfirm-class-sure", - }).then(() => { - cb(); - }); - return; - } - this.timer = setTimeout(() => { - getDevInfo() - .then(() => { - cb(); - }) - .catch((err) => { - _this.probeServer(cb); - }); - }, 10000); + choseRange() { + + this.getScheduleLog(); + this.activeDateChoise = i; }, - save() { - this.rebootCron = this.cronText; - setRebootTask({ task: this.cronText }) - .then((rsp) => { - if (rsp && rsp.success) { - this.$notify({ - type: "success", - message: "閰嶇疆鎴愬姛", - }); - } - }) - .catch((err) => { - this.$notify({ - type: "error", - message: "閰嶇疆澶辫触", - }); - }); + getScheduleLog() { + const data= { + timeStart: this.timeStart, + timeEnd: this.timeEnd, + page: this.page, + pageSize: this.pageSize, + procID: this.procID, + procName: this.procName, + } + queryScheduleLog(data).then((res) => { + this.tableData = res.data.logs; + this.total = res.data.total + }); }, - changeEvery() { - this.saveBtn = true; - if (this.every === "close") { - this.cronText = ""; - return; - } - if (this.every === "monthly") { - this.cronValueObj.week = "*"; - this.cronValueObj.day = "1"; - if (!this.time.length) { - this.time = "00:00"; - } - } - if (this.every === "weekly") { - this.cronValueObj.day = "*"; - this.cronValueObj.week = "1"; - if (!this.time.length) { - this.time = "00:00"; - } - } - if (this.every === "daily") { - this.cronValueObj.day = "*"; - this.cronValueObj.week = "*"; - } - this.updateExpression(); + dateChange(val){ + [this.timeStart,this.timeEnd]= val; + this.getScheduleLog() }, - updateExpression() { - this.saveBtn = true; - if (this.time.length) { - let arr = this.time.split(":"); - this.cronValueObj.hour = arr[0]; - this.cronValueObj.min = arr[1]; - } - this.crontabValueString(); + getTimeStr(date) { + var month = pad0(date.getMonth() + 1); //鏈� + var day = pad0(date.getDate()); //鏃� + var hour = pad0(date.getHours()); //鏃� + var minute = pad0(date.getMinutes()); //鍒� + var second = pad0(date.getSeconds()); //绉� + return `${date.getFullYear()}-${month}-${day} ${hour}:${minute}:${second}`; }, - crontabValueString() { - let obj = this.cronValueObj; - this.cronText = - obj.min + - " " + - obj.hour + - " " + - obj.day + - " " + - obj.month + - " " + - obj.week; - }, - }, - watch: { - rebootCron() { - this.resolveExp(); + getTimeRange(gap) { + var date = new Date(); //褰撳墠鏃堕棿 + var preDay = new Date(new Date().getTime() - gap); + this.timeStart = this.getTimeStr(preDay) + this.timeEnd = this.getTimeStr(date) + this.dateRange=[this.timeStart,this.timeEnd] }, }, }; </script> <style lang="scss"> -.all { - width: 100%; -} -.restart { +.op-log { margin: 0 auto; - padding: 20px; - .t { - box-sizing: border-box; - text-align: left; - width: 70%; - margin: 0 auto; - padding: 10px; - font-size: 16px; - } - .bar { - height: 50px; + padding: 10px 8px 10px 5px; - width: 70%; - background: rgba(248, 248, 248, 1); - margin: 0 auto; - min-width: 300px; - display: flex; - justify-content: space-between; - box-sizing: border-box; - padding: 0 20px; - align-items: center; - border-radius: 10px; - margin-bottom: 10px; - .reset-btn { - width: 70px; - height: 32px; - border-radius: 5px; + background-color: rgba(248, 248, 248, 1); + width: 100%; + display: flex; + flex-direction: column; + .top { + height: 100px; + background: #fff; + border-radius: 5px; + .first { + display: flex; + justify-content: space-between; + height: 45px; + padding: 0 20px; + .time-option { + display: flex; + justify-content: space-between; + align-items: center; + // padding-left: 20px; + .title { + margin-right: 20px; + } + .opts { + display: flex; + justify-content: space-between; + .opt { + width: fit-content; + height: 32px; + padding: 0 15px; + // background: aquamarine; + border-radius: 4px; + cursor: pointer; + margin-right: 20px; + line-height: 32px; + font-size: 14px; + } + .opt:hover { + background-color: rgba(61, 104, 225, 1); + color: #fff; + } + .opt-active { + color: #fff; + background-color: rgba(61, 104, 225, 1); + } + } + } + .search { + display: flex; + align-items: center; + } } - .el-select { - width: 100%; - } - .name { - min-width: 150px; - text-align: left; - font-size: 14px; - } - .el-input__inner::placeholder { - color: rgba(107, 107, 107, 1); - } - .el-input--small .el-input__inner { - height: 32px; - line-height: 32px; - border: none; - background: rgba(240, 240, 240, 1); - } - .el-select .el-input .el-select__caret { - color: rgba(138, 138, 138, 1); - font-size: 15px; - } - .el-date-editor.el-input, - .el-date-editor.el-input__inner { - width: 100%; + .second { + display: flex; + margin: 10px 0; padding: 0 20px; +align-items: center; + font-size: 14px; + .bar { + display: flex; + align-items: baseline; + width: fit-content; + padding-left: 20px; + .name { + margin-right: 5px; + } + } } } - .save-btn { - width: 260px; - margin-top: 50px; + .table { + margin-top: 16px; + border-radius: 5px; + padding: 12px; + background-color: white; + .tableBox { + th { + padding: 0 !important; + height: 40px; + line-height: 40px; + } + td { + padding: 0 !important; + height: 34px; + line-height: 34px; + } + } } } </style> -- Gitblit v1.8.0