中间

src/views/staging/zbgly/center/index.vue

@@ -0,0 +1,135 @@
+<template>
+  <div class="main">
+    <div class="buttons">
+      <ButtonSwitchCom class="buttons" :options="[
+          {label: '今日', value: '1'},
+          {label: '本周', value: '2'},
+          {label: '本月', value: '3'},
+          {label: '昨日', value: '4'},
+          {label: '上周', value: '5'},
+          {label: '上月', value: '6'},
+      ]" padding="4px 8px" v-model:active="dateType"/>
+      <div class="statistic-time">统计截止：{{$util.YMDHms(statisticTime)}}</div>
+    </div>
+    <div class="statistic">
+      <div class="item">
+        <img src="@/assets/images/business/statistic-cqs.png"/>
+        <div class="content">
+          <div><span class="green">{{ statisticData.cqs.num }}</span>/{{ statisticData.cqs.total }}</div>
+          <div>出勤数</div>
+        </div>
+      </div>
+      <div class="item">
+        <img src="@/assets/images/business/statistic-qqs.png"/>
+        <div class="content">
+          <div><span class="green">{{ statisticData.qqs.num }}</span>/{{ statisticData.qqs.total }}</div>
+          <div>缺勤数</div>
+        </div>
+      </div>
+      <div class="item">
+        <img src="@/assets/images/business/statistic-cds.png"/>
+        <div class="content">
+          <div><span class="green">{{ statisticData.cds.num }}</span>/{{ statisticData.cds.total }}</div>
+          <div>迟到数</div>
+        </div>
+      </div>
+      <div class="item">
+        <img src="@/assets/images/business/statistic-zts.png"/>
+        <div class="content">
+          <div><span class="green">{{ statisticData.zts.num }}</span>/{{ statisticData.zts.total }}</div>
+          <div>早退数</div>
+        </div>
+      </div>
+      <div class="item">
+        <img src="@/assets/images/business/statistic-cql.png"/>
+        <div class="content">
+          <div><span class="green">{{ statisticData.cql }}</span> %</div>
+          <div>出勤率</div>
+        </div>
+      </div>
+      <div class="item">
+        <img src="@/assets/images/business/statistic-rztjl.png"/>
+        <div class="content">
+          <div><span class="green">{{ statisticData.rztjl }}</span> %</div>
+          <div>日志提交率</div>
+        </div>
+      </div>
+      <div class="item">
+        <img src="@/assets/images/business/statistic-zbtjl.png"/>
+        <div class="content">
+          <div><span class="green">{{ statisticData.zbtjl }}</span> %</div>
+          <div>周报提交率</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import ButtonSwitchCom from '../../common/button-switch.vue'
+
+export default defineComponent({
+  name: '',
+  components: {
+    ButtonSwitchCom
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      dateType: '1',
+      statisticTime: new Date(),
+      statisticData: {
+        cqs: {num: 13, total: 27},
+        qqs: {num: 13, total: 27},
+        cds: {num: 13, total: 27},
+        zts: {num: 13, total: 27},
+        cql: 45.6,
+        rztjl: 80.6,
+        zbtjl: 13,
+      }
+    })
+    return {
+      ...toRefs(state)
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.main {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .buttons {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 20px;
+    .statistic-time {
+      font-size: 14px;
+      font-family: Microsoft YaHei;
+      font-weight: 400;
+      color: #FEFEFE;
+      opacity: 0.5;
+    }
+  }
+}
+</style>

src/views/staging/zbgly/index.vue

@@ -4,7 +4,9 @@
       <CalendarCom class="calendar-main"/>
       <AnalysisCom class="analysis-main"/>
     </div>
-<!--    <div class="staging-center">2</div>-->
+    <div class="staging-center">
+      <CenterCom class="center-main"/>
+    </div>
     <div class="staging-right">
       <NoticeCom class="notice-main"/>
       <ClueCom class="clue-main"/>
@@ -33,6 +35,7 @@ import CalendarCom from "./left/calendar-com.vue";
 import NoticeCom from "./right/notice-com.vue";
 import ClueCom from "./right/clue-com.vue";
 import AttendanceCom from "./right/attendance-com.vue";
+import CenterCom from "./center/index.vue";
 
 export default defineComponent({
   name: '',
@@ -41,7 +44,8 @@ export default defineComponent({
     CalendarCom,
     NoticeCom,
     ClueCom,
-    AttendanceCom
+    AttendanceCom,
+    CenterCom
   },
   setup(props, {emit}) {
     const store = useStore();
@@ -69,6 +73,12 @@ export default defineComponent({
     overflow: hidden;
   }
 }
+.staging-center {
+  .center-main {
+    width: 100%;
+    height: 100%;
+  }
+}
 .staging-right {
   display: flex;
   flex-direction: column;