趋势分析

src/api/modules/workbench.ts

@@ -39,3 +39,9 @@ export const zbglyWorkbenchAdminCalendar = (params: any) => handle({
   method: 'post',
   params
 })
+//  值班管理员 > 趋势分析
+export const zbglyWorkbenchAdminAnalysis = (params: any) => handle({
+  url: `/${suffix}/workbench/admin/analysis`,
+  method: 'get',
+  params
+})

src/views/staging/zbgly/left/analysis-com.vue

@@ -8,12 +8,20 @@
       ]" padding="6px 20px" type="type2" v-model:active="sourceType"/>
     </template>
     <div class="content">
-      <ButtonSwitchCom class="buttons" :options="[
+      <template v-if="sourceType === '3'">
+        <ButtonSwitchCom class="buttons" :options="[
+          {label: '按周', value: '2'},
+          {label: '按月', value: '3'},
+      ]" padding="3px 12px" v-model:active="dateType"/>
+      </template>
+      <template v-else>
+        <ButtonSwitchCom class="buttons" :options="[
           {label: '按日', value: '1'},
-          {label: '按月', value: '2'},
-          {label: '按年', value: '3'},
+          {label: '按周', value: '2'},
+          {label: '按月', value: '3'},
       ]" padding="3px 12px" v-model:active="dateType"/>
-      <TrendAnalysisChart class="charts"/>
+      </template>
+      <TrendAnalysisChart class="charts" :data="chartDataCpt" :type="sourceType"/>
     </div>
   </BaseBlockCom>
 </template>
@@ -36,6 +44,7 @@ import {useRouter, useRoute} from 'vue-router'
 import BaseBlockCom from '../../common/base-block.vue'
 import ButtonSwitchCom from '../../common/button-switch.vue'
 import TrendAnalysisChart from './trend-analysis-chart.vue'
+import {ElMessage} from "element-plus";
 
 export default defineComponent({
   name: '',
@@ -51,10 +60,56 @@ export default defineComponent({
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
     const state = reactive({
       sourceType: '1',
-      dateType: '1'
+      dateType: '1',
+      loading: false,
+      chartData: {
+        dayAnalysisInfos: [],
+        weekAnalysisInfos: [],
+        monthAnalysisInfos: [],
+      }
+    })
+    const chartDataCpt = computed(() => {
+      let arr = []
+      if (state.dateType === '1') {
+        arr = state.chartData.dayAnalysisInfos
+      } else if (state.dateType === '2') {
+        arr = state.chartData.weekAnalysisInfos
+      } else if (state.dateType === '3') {
+        arr = state.chartData.monthAnalysisInfos
+      }
+      return arr
+    })
+    const initAnalysisData = () => {
+      state.loading = true
+      state.chartData = {
+        dayAnalysisInfos: [],
+        weekAnalysisInfos: [],
+        monthAnalysisInfos: [],
+      }
+      that.$api.zbglyWorkbenchAdminAnalysis({
+        type: state.sourceType
+      }).then(res => {
+        if (res.code === 200) {
+          state.chartData.dayAnalysisInfos = res.data?.dayAnalysisInfos || []
+          state.chartData.weekAnalysisInfos = res.data?.weekAnalysisInfos || []
+          state.chartData.monthAnalysisInfos = res.data?.monthAnalysisInfos || []
+        } else {
+          ElMessage.error(res.message)
+        }
+        state.loading = false
+      }).catch(() => {
+        state.loading = false
+      })
+    }
+    watch(() => state.sourceType, (n) => {
+      state.dateType = n === '3' ? '2' : '1'
+      initAnalysisData()
+    }, {
+      immediate: true
     })
     return {
-      ...toRefs(state)
+      ...toRefs(state),
+      chartDataCpt
     }
   },
 })

src/views/staging/zbgly/left/trend-analysis-chart.vue

@@ -3,10 +3,10 @@
     <div class="chart-ref" ref="ref_chart"/>
     <div class="legend">
       <div class="green">
-        <div/>出勤
+        <div/>{{trueBarName}}
       </div>
       <div class="red">
-        <div/>异常
+        <div/>{{falseBarName}}
       </div>
     </div>
   </div>
@@ -32,6 +32,16 @@ import * as echarts from 'echarts';
 export default defineComponent({
   name: '',
   components: {},
+  props: {
+    data: {
+      required: true,
+      default: () => []
+    },
+    type: {
+      required: true,
+      default: '1'
+    }
+  },
   setup(props, {emit}) {
     const store = useStore();
     const router = useRouter();
@@ -43,8 +53,15 @@ export default defineComponent({
     })
     const ref_chart = ref();
     const ref_main = ref();
+    const trueBarName = computed(() => props.type === '1' ? '出勤' : '已提交')
+    const falseBarName = computed(() => props.type === '1' ? '异常' : '未提交')
+    const lineBarName = computed(() => props.type === '1' ? '出勤率' : '提交率')
     const initChart = () => {
       const chart = echarts.init(ref_chart.value);
+      const xData = props.data.map(v => v.date)
+      const trueData = props.data.map(v => v.normal)
+      const falseData = props.data.map(v => v.abnormal)
+      const lineData = props.data.map(v => v.rate)
       const yStyle = {
         splitNumber: 2,
         axisLine: {show: false},
@@ -97,25 +114,26 @@ export default defineComponent({
           borderColor: 'rgba(0, 0, 0, 0.7)',
           extraCssText: 'display: flex;flex-direction: column;min-width: 100px;color: #ffffff;',
           formatter: (p) => {
-            const barTrue = p.filter(v => v.seriesName === '出勤')[0]
-            const barFalse = p.filter(v => v.seriesName === '异常')[0]
-            const lineTrue = p.filter(v => v.seriesName === '出勤率')[0]
-            const lineFalse = p.filter(v => v.seriesName === '异常率')[0]
+            const barTrue = p.filter(v => v.seriesName === trueBarName.value)[0]
+            const barFalse = p.filter(v => v.seriesName === falseBarName.value)[0]
+            const lineTrue = p.filter(v => v.seriesName === lineBarName.value)[0]
+            // const lineFalse = p.filter(v => v.seriesName === '异常率')[0]
             const s = 'display: flex;justify-content: space-between;margin-top: 6px;'
             let str = `
               <div style="margin-bottom: 6px;">${barTrue.name}</div>
               <div style="${s}color: #3effbb;"><div>${barTrue.seriesName}</div><div>${barTrue.value}</div></div>
-              <div style="${s}color: #3effbb;"><div>${lineTrue.seriesName}</div><div>${lineTrue.value}</div></div>
               <div style="${s}color: #e5004f;"><div>${barFalse.seriesName}</div><div>${barFalse.value}</div></div>
-              <div style="${s}color: #e5004f;"><div>${lineFalse.seriesName}</div><div>${lineFalse.value}</div></div>
+              <div style="${s}color: #3effbb;"><div>${lineTrue.seriesName}</div><div>${lineTrue.value}%</div></div>
             `
+                // <div style="${s}color: #e5004f;"><div>${lineFalse.seriesName}</div><div>${lineFalse.value}</div></div>
             return str
           }
         },
         xAxis: [
           {
             type: 'category',
-            data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],
+            // data: ['2017', '2018', '2019', '2020', '2021', '2022', '2023'],
+            data: xData,
             axisLine: {
               lineStyle: {
                 color: '#213b56'
@@ -136,14 +154,16 @@ export default defineComponent({
           {
             type: 'value',
             name: '占比/%',
+            min: 0,
+            max: 100,
             ...yStyle
           }
         ],
         series: [
           {
-            name: '出勤',
+            name: trueBarName.value,
             type: 'bar',
-            data: [15, 18, 13, 5, 7, 10, 22],
+            data: trueData,
             itemStyle: {
               color: new echarts.graphic.LinearGradient(
                   0, 0, 0, 1, // 渐变色的起止位置，可根据需要调整
@@ -156,9 +176,9 @@ export default defineComponent({
             ...barStyle
           },
           {
-            name: '异常',
+            name: falseBarName.value,
             type: 'bar',
-            data: [15, 18, 13, 5, 7, 10, 22].reverse(),
+            data: falseData,
             itemStyle: {
               color: new echarts.graphic.LinearGradient(
                   0, 0, 0, 1, // 渐变色的起止位置，可根据需要调整
@@ -171,29 +191,29 @@ export default defineComponent({
             ...barStyle
           },
           {
-            data: [15, 18, 13, 5, 7, 10, 22],
+            data: trueData,
             ...pictorialBarStyle
           },
           {
-            data: [15, 18, 13, 5, 7, 10, 22].reverse(),
+            data: falseData,
             ...pictorialBarStyle
           },
           {
-            name: '出勤率',
+            name: lineBarName.value,
             type: 'line',
             yAxisIndex: 1,
-            data: [0.3, 0.22, 0.33, 0.1, 0.17, 0.34, 0.45],
+            data: lineData,
             color: '#3effbb',
             ...lineStyle
           },
-          {
-            name: '异常率',
-            type: 'line',
-            yAxisIndex: 1,
-            data: [0.3, 0.22, 0.33, 0.1, 0.17, 0.34, 0.45].reverse(),
-            color: '#e5004f',
-            ...lineStyle
-          }
+          // {
+          //   name: '异常率',
+          //   type: 'line',
+          //   yAxisIndex: 1,
+          //   data: [0.3, 0.22, 0.33, 0.1, 0.17, 0.34, 0.45].reverse(),
+          //   color: '#e5004f',
+          //   ...lineStyle
+          // }
         ]
       };
       chart.setOption(option);
@@ -208,6 +228,9 @@ export default defineComponent({
       state.resizeObserver.observe(ref_main.value);
       return chart
     }
+    watch(() => props.data, () => {
+      state.chart = initChart()
+    })
     onMounted(() => {
       nextTick(() => {
         state.chart = initChart()
@@ -220,7 +243,9 @@ export default defineComponent({
     return {
       ...toRefs(state),
       ref_chart,
-      ref_main
+      ref_main,
+      trueBarName,
+      falseBarName
     }
   },
 })

src/views/staging/zbgly/right/attendance-com.vue

@@ -113,7 +113,9 @@ export default defineComponent({
     }
     watch(() => state.dateType, () => {
       initStatisticData()
-    }, {immediate: true})
+    }, {
+      immediate: true
+    })
     return {
       ...toRefs(state),
       handleButtonClick