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

src/api/deploy/dailyCheck.js

@@ -16,3 +16,11 @@ export function statistics(data) {
     params: data
   })
 }
+
+export function rateData(data) {
+  return request({
+    url: '/api/deploy/dailyCheckData/rateData',
+    method: 'get',
+    params: data
+  })
+}

src/views/deploy/dailycheck/board.scss

@@ -0,0 +1,51 @@
+.chart-template {
+  width: 100%;
+  height: 100%;
+
+  & > div:last-child {
+    width: 100%;
+    height: calc(100% - 26px);
+    overflow: hidden;
+  }
+
+  & > p {
+    background-image: url(@/assets/board/area_title-bg.png);
+    background-repeat: no-repeat;
+    background-position: left;
+    background-size: 300px 26px;
+    height: 26px;
+    // text-align: center;
+    font-size: 16px;
+    padding-left: 40px;
+   color:rgb(1,243  ,247);    
+    margin: 0;
+    margin-top: 5px;
+    // cursor: pointer;
+  }
+}
+
+.chart-template-withperiod{
+    & > div:last-child {
+        height: calc(100% - 66px); 
+    }
+}
+
+// .map-chart{
+
+// }
+
+
+.board-org-popper {
+  // background-color: rgb(6, 19, 57);
+  // border: 1px solid rgba(0, 217, 255, 0.25) !important;
+  // color:white;
+  
+
+  // ::v-deep .el-cascader-panel {
+  //   background-color: rgb(6, 19, 57);
+  //   border: 1px solid rgba(0, 217, 255, 0.25) !important;
+  // }
+}
+.el-cascader-menu__wrap{
+  height:  260px !important;
+}

src/views/deploy/dailycheck/index.vue

@@ -51,19 +51,21 @@
       <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>
-
+          <div>
+            <Calendar
+              :startDate="this.queryParams.range[0]"
+              :endDate="this.queryParams.range[1]"
+              :doDates="this.doDates"
+              :unDoDates="this.unDoDates"
+              @select="onSelectDate"
+            ></Calendar>
+          </div>
+          <div style="height: 340px">
+            <report
+              :rateData="this.rateData"
+            ></report>
+          </div>
         </el-col>
 
         <!--  分页数据  -->
@@ -116,10 +118,11 @@
 <script>
 import dayjs from "dayjs";
 import {mapGetters} from "vuex";
-import {pageData, downLoad, statistics} from "@/api/deploy/dailyCheck";
+import {pageData, rateData, 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";
+import report from "./report.vue";
 
 export default {
   name: "dayiltCheck",
@@ -127,6 +130,7 @@ export default {
     DataRangePicker,
     OrgTree,
     Calendar,
+    report,
   },
   data() {
     return {
@@ -158,6 +162,7 @@ export default {
       dataList: [],
       doDates: [],
       unDoDates: [],
+      rateData: {},
     };
   },
   mounted() {
@@ -165,19 +170,6 @@ export default {
   },
   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: {
@@ -191,7 +183,7 @@ export default {
 
       return [start, end];
     },
-    onSelectDate(date){
+    onSelectDate(date) {
 
     },
     /** 搜索按钮操作 */
@@ -251,6 +243,14 @@ export default {
       ).catch((err) => {
         this.loading = false;
       });
+      rateData(this.queryParams).then(response => {
+          this.rateData = response.data;
+          console.log(123, this.rateData);
+          this.loading = false;
+        }
+      ).catch((err) => {
+        this.loading = false;
+      });
     },
     getPageIndex($index) {
       //表格序号

src/views/deploy/dailycheck/report.vue

@@ -0,0 +1,178 @@
+<!--  -->
+<template>
+  <div class="static_info report">
+
+      <div class="chart-template">
+        <div ref="otherchart"></div>
+      </div>
+  </div>
+</template>
+<script>
+import "./board.scss";
+import {
+  orgInfo,
+  currentMonthVisitInfo,
+  orgSecurityInfo,
+} from "@/api/board/cockpit.js";
+import * as echarts from "echarts";
+export default {
+  props: {
+    rateData: {
+      type: Object,
+      isRequired: true,
+    },
+  },
+  data() {
+    return {
+      data: {
+        org: [],
+        visit: [],
+        rateData: null,
+      },
+    };
+  },
+  components: {},
+  computed: {},
+  watch: {
+    rateData: {
+      deep: true,
+      handler(val) {
+        this.rateData=val;
+        this.initOtherMap();
+      },
+    },
+  },
+
+  created() {
+    // this.types = types;
+    // this.maxDisplay = 16;
+    // this.refreshTime = 1 * 10 * 1000;
+    // this.isMouseOver = false;
+  },
+
+  async mounted() {
+    window.addEventListener("resize", this.windowResize);
+  },
+  beforeDestroy() {
+    // this.timer && clearInterval(this.timer);
+    // this.timer = null;
+
+    window.removeEventListener("resize", this.windowResize);
+  },
+
+  methods: {
+    // handleClick() {
+    //   this.getData();
+    // },
+    handleMouseEnter() {
+      this.isMouseOver = true;
+    },
+    handleMouseLeave() {
+      this.isMouseOver = false;
+    },
+
+    initOtherMap() {
+      this.otherChart && this.otherChart.dispose();
+      let c = this.$refs["otherchart"];
+
+      // 基于准备好的dom，初始化echarts实例
+      this.otherChart = echarts.init(
+        c
+        // document.getElementById("commAlarmEvent_Chart")
+      );
+
+      // 指定图表的配置项和数据
+      var option = {
+        //  color: ["#82D5AE"],
+        tooltip: {
+          trigger: "axis",
+          confine: true,
+          axisPointer: {
+            type: "shadow",
+          },
+
+          // formatter: "完成率：{c}%",
+        },
+        legend: {
+          show: false,
+          textStyle: {
+            color: "rgb(245, 245, 245)",
+          },
+        },
+        color: ["#5470c6", "#91cc75", "#ee6666"],
+        series:
+          {
+            name: "自检",
+            type: "pie",
+            center: ["50%", "50%"],
+            label: {
+              // show:false,
+              color: "#fff",
+              formatter: (p) => {
+                return `${p.name}\r\n(${p.value} ; ${p.percent==undefined?0:p.percent}%)`;
+              },
+            },
+            labelLine: {
+              // smooth:true
+              length: 5,
+              length2: 5,
+            },
+            data: [
+              {
+                name: "已检",
+                value: this.rateData.doNums,
+              },
+              {
+                name: "未检",
+                value: this.rateData.unDoNums,
+              },
+            ],
+          },
+
+      };
+      if (option && typeof option === "object") {
+        this.otherChart.setOption(option);
+      }
+    },
+    windowResize() {
+      this.orgChart && this.orgChart.resize();
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.report {
+  background-image: linear-gradient(
+      to right,
+      rgba(27, 33, 57, 0.8) 0%,
+      rgba(32, 49, 99, 0.6) 50%,
+      rgba(27, 33, 57, 0.8) 100%
+  );
+  margin-top: 15px;
+  width: calc(100% - 0px);
+  margin-left: 1px;
+  border-top: 3px ;
+  border-image: linear-gradient(
+      to right,
+      rgba(27, 33, 57, 0.8) 20%,
+      rgba(101, 219, 229, 1) 50%,
+      rgba(27, 33, 57, 0.8) 80%
+  )
+  3;
+}
+
+.static_info {
+  height: calc(100%);
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  margin-top: 5px;
+
+  & > div {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+</style>