检查日志页面代码代码提交

src/api/deploy/dailyCheck.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+import {exportFile} from '@/utils/request'
+
+//分页
+export function pageData(data) {
+  return request({
+    url: '/api/deploy/dailyCheckData/page',
+    method: 'get',
+    params: data
+  })
+}
+export function statistics(data) {
+  return request({
+    url: '/api/deploy/dailyCheckData/statistics',
+    method: 'get',
+    params: data
+  })
+}

src/views/deploy/dailycheck/Calendar.vue

@@ -0,0 +1,178 @@
+<template>
+  <div >
+    <VCalender
+      ref="calendar"
+      :columns="layout.columns"
+      :rows="layout.rows"
+      :is-expanded="layout.isExpanded"
+      :attributes="attrs"
+      :min-date="startDate ? new Date(startDate) : new Date()"
+      :max-date="endDate"
+      v-model="selectedDate"
+      @dayclick="onSelect"
+
+    />
+  </div>
+</template>
+<script>
+import dayjs from "dayjs";
+
+//日历组件
+ import {Calendar as VCalender} from 'v-calendar';
+export default {
+  name: "Calendar",
+   components:{VCalender},
+  data() {
+
+    return {
+      selectedDate:this.defaultSelectedDate,
+      layout: {
+        columns: 1,
+        rows: 1,
+        isExpanded: true,
+      },
+      attrs: [
+        {
+          highlight: {
+            start: {
+              fillMode: "outline",
+            },
+            base: {
+              color: "gray",
+              fillMode: "light",
+            },
+            end: {
+              fillMode: "outline",
+            },
+          },
+          dates: { start: this.startDate?new Date(this.startDate):new Date(), end: this.endDate },
+        },
+        {
+          highlight: {
+            fillMode:'solid',
+            color: "green",
+            // style: {
+            //   width: "16px",
+            //   height: "3px",
+            //   borderRadius: "0",
+            // },
+            contentClass: "italic",
+          },
+          dates: this.doDates,
+        },
+        {
+          highlight: {
+            fillMode:'solid',
+            color: "red",
+            // style: {
+            //   width: "16px",
+            //   height: "3px",
+            //   borderRadius: "0",
+            // },
+            contentClass: "italic",
+          },
+          dates: this.unDoDates,
+        },
+      ],
+    };
+  },
+  props: {
+    startDate: {
+      isRequired: true,
+    },
+    endDate: {
+      type:[Date,String],
+      default: () => {
+        return new Date();
+      },
+    },
+    doDates: {
+      isRequired: true,
+      type: Array,
+    },
+    unDoDates: {
+      isRequired: true,
+      type: Array,
+    },
+    defaultSelectedDate:{
+      type:Object
+    }
+  },
+  computed: {
+    calendarWidth() {
+      if (this.layout.columns === 0) {
+        return "display:none";
+      } else if (this.layout.columns === 1) {
+        return "width:33.3%";
+      } else if (this.layout.columns === 1) {
+        return "width:66.6%";
+      } else {
+        return "";
+      }
+    },
+  },
+  watch: {
+    startDate: {
+      immediate: true,
+      handler: function (v) {
+        this.attrs[0].dates.start=v;
+        this.setLayout(v);
+      },
+    },
+    endDate: {
+      immediate: true,
+      handler: function (v) {
+        console.log("456",v)
+        this.attrs[0].dates.end=v;
+      },
+    },
+    doDates: {
+      immediate: true,
+      handler: function (v) {
+        this.attrs[1].dates=v;
+      },
+    },
+    unDoDates: {
+      immediate: true,
+      handler: function (v) {
+        this.attrs[2].dates=v;
+      },
+    },
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    init() {
+      // this.setLayout();
+      // const calendar = this.$refs.calendar;
+      // setTimeout(() => {
+      //   calendar.move({ month: 1, year: 1983 });
+      // }, 3000);
+      //calendar.move({ month: 1, year: 1983 });
+      //this.setOps();
+    },
+    setLayout(startDate) {
+      /*debugger
+      console.log("qqqqq")
+      if (startDate != null) {
+        let diff = Math.ceil(
+          dayjs(new Date()).diff(new Date(startDate), "months", true)
+        );
+
+        if (diff >= 2) {
+          this.layout.columns = 2;
+        } else {
+          this.layout.columns = diff;
+        }
+
+        this.layout.rows = Math.ceil(diff / 2);
+      }*/
+    },
+    onSelect(data){
+      this.$emit("select",data.date)
+    }
+  },
+};
+</script>
+<style scoped lang="scss"></style>

src/views/deploy/dailycheck/index.vue

@@ -0,0 +1,358 @@
+<template>
+  <div class="app-container">
+    <div class="main-right-box">
+      <!--    搜索条件    -->
+      <div class="main-search-box">
+        <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" size="small">
+          <el-form-item label="检查机构">
+            <org-tree
+              v-model="queryParams.orgId"
+              @defaultOrg="getDefaultOrg"
+              @checkChange="checkChange"
+              @click="clickTreeNode"
+              ref="orgTree"
+            ></org-tree>
+          </el-form-item>
+          <el-form-item label="时间" prop="range">
+            <el-date-picker
+              v-model="queryParams.range"
+              style="width: 240px"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              :clearable="false"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              :default-time="['00:00:00', '23:59:59']"
+            ></el-date-picker>
+          </el-form-item>
+        </el-form>
+        <el-row :gutter="10">
+          <el-col :span="1.5">
+            <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery"
+            >搜索
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button icon="el-icon-refresh" size="mini" type="primary" @click="resetQuery"
+            >重置
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button icon="el-icon-upload2" size="mini" type="primary" @click="handleExport"
+            >导出
+            </el-button>
+          </el-col>
+          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </div>
+
+
+      <el-row :gutter="20">
+        <!--  日历和饼图  -->
+        <el-col :xs="24" :sm="12" :md="9" :lg="9">
+
+          <p class="card-title">统计</p>
+                   <div class="calendar-box">
+                      <Calendar
+                        :startDate="this.queryParams.range[0]"
+                        :endDate="this.queryParams.range[1]"
+
+                        :doDates="this.doDates"
+                        :unDoDates="this.unDoDates"
+                        @select="onSelectDate"
+                      ></Calendar>
+                    </div>
+
+        </el-col>
+
+        <!--  分页数据  -->
+        <el-col :xs="24" :sm="12" :md="15" :lg="15">
+
+          <el-table v-loading="loading" :data="dataList" border height="680" size="small">
+            <el-table-column align="center" label="序号">
+              <template v-slot:default="scope">
+                <span v-text="getPageIndex(scope.$index)"> </span>
+              </template>
+            </el-table-column>
+            <el-table-column align="center" label="所属机构" prop="affiliatedArea"/>
+            <el-table-column align="center" label="所属机构" prop="affiliatedBank"/>
+            <el-table-column align="center" label="主机名称" prop="orgName"/>
+            <el-table-column align="center" label="主机名称" prop="fileName"/>
+            <el-table-column align="center" label="日期" prop="recordDate"/>
+            <el-table-column align="center" label="操作人" prop="userName"/>
+
+            <el-table-column
+              class-name="small-padding fixed-width"
+
+              label="操作"
+              align="center"
+
+            >
+              <template slot-scope="{ row }">
+                <el-button
+                  class="el-icon-download"
+                  size="mini"
+                  type="text"
+                  @click="handleExport(row.id)"
+                >下载
+                </el-button>
+
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum"
+                      :total="total"
+                      @pagination="getList"/>
+
+
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import dayjs from "dayjs";
+import {mapGetters} from "vuex";
+import {pageData, downLoad, statistics} from "@/api/deploy/dailyCheck";
+import OrgTree from "@/components/orgTree/orgQuerySelector.vue";
+import DataRangePicker from "@/components/dateTime/daterange.picker.vue";
+import Calendar from "./Calendar.vue";
+
+export default {
+  name: "dayiltCheck",
+  components: {
+    DataRangePicker,
+    OrgTree,
+    Calendar,
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个停用
+      single: true,
+      // 非多个停用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      selectedOrgName: "",
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        checkSub: true,
+        orgId: null,
+        range: this.getTodayRange(),
+      },
+      dataList: [],
+      doDates: [],
+      unDoDates: [],
+    };
+  },
+  mounted() {
+    // this.getList();
+  },
+  computed: {
+    ...mapGetters(["roleList", "isAdmin", "orgName"]),
+    calenderStartDate() {
+      if (this.data == null || this.data.storage == null) {
+        return new Date();
+      }
+
+      if (this.data.storage.earliestTime) {
+        return this.data.storage.earliestTime;
+      }
+
+      let d = dayjs().add(this.data.storage.planDays * -1 - 1, "day");
+
+      return d;
+    },
+  },
+
+  methods: {
+    dayjs,
+    getTodayRange() {
+      const start = new Date();
+      start.setHours(0, 0, 0, 0); // 设置为当天的0点0分0秒
+
+      const end = new Date();
+      end.setHours(23, 59, 59, 999); // 设置为当天的23点59分59秒
+
+      return [start, end];
+    },
+    onSelectDate(date){
+
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = [];
+      this.resetForm("queryForm");
+      this.selectedOrgName = this.orgName;
+      this.handleQuery();
+    },
+    getDefaultOrg(node) {
+      this.queryParams.orgId = node.id;
+      this.selectedOrgName = node.shortName;
+      this.getList();
+    },
+    //单选框状态改变
+    checkChange(state) {
+      this.queryParams.checkSub = state;
+      this.selectedOrgName = node.shortName;
+      this.getList();
+    },
+    // 节点单击事件
+    clickTreeNode(data) {
+      if (data == null) {
+        return;
+      }
+      this.queryParams.orgId = data.id;
+      this.selectedOrgName = node.shortName;
+      this.getList();
+    },
+
+    handleClose() {
+      this.show = false;
+      this.selectMsg = null;
+    },
+    /** 查询主机列表 */
+    getList() {
+      this.loading = true;
+      console.log(123, this.queryParams.range);
+      pageData(this.queryParams).then(response => {
+          this.dataList = response.rows;
+          this.total = response.total;
+          this.loading = false;
+        }
+      ).catch((err) => {
+        this.loading = false;
+      });
+      statistics(this.queryParams).then(response => {
+          this.doDates = response.data.doDates;
+          this.unDoDates = response.data.unDoDates;
+          this.loading = false;
+        }
+      ).catch((err) => {
+        this.loading = false;
+      });
+    },
+    getPageIndex($index) {
+      //表格序号
+      return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
+    },
+    /** 导出按钮操作 */
+    handleExport(id) {
+      this.download(
+        "/api/deploy/dailyCheckData/downLoad",
+        {
+          id,
+        },
+        `${this.selectedOrgName}-${this.$tab.getCurrentTabName()}-${dayjs(
+          new Date()
+        ).format("YYYYMMDD")}.xlsx`
+      );
+    },
+
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.tab_font {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.home-container {
+  padding: 20px;
+  background-color: rgb(240, 242, 245);
+
+  .chart-wrapper {
+    background: #fff;
+    margin-top: 20px;
+  }
+}
+
+.card-title {
+  width: 120px;
+  margin: 0 0 10px 0;
+  padding-left: 4px;
+  color: #fff;
+  line-height: 26px;
+  font-weight: bold;
+  letter-spacing: 2px;
+  background: linear-gradient(to right, #71bfe3, #fff);
+}
+
+.card-group {
+  height: 740px;
+
+  .card-title {
+    margin: 0;
+  }
+}
+
+.tab-panel {
+  height: 457px;
+  overflow: auto;
+}
+
+//css 透明的属性=
+.card-item-icon {
+  width: 50px;
+  height: 50px;
+
+  &:hover {
+    opacity: 0.8;
+  }
+}
+
+.msg-item {
+  font-size: 15px;
+  padding: 0 10px;
+  color: #1ea8e9;
+  line-height: 39px;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  > span {
+    display: inline-block;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: start;
+  }
+
+  .item-title {
+    flex: 0.75;
+  }
+
+  .item-time {
+    flex: 0.25;
+    text-align: right;
+  }
+}
+
+
+</style>