From 539e63db80682f85fb9373cdfb22e5ebfa8f1146 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=A3=95=E8=B4=A2?= <cyc58469@163.com>
Date: Wed, 9 Apr 2025 13:01:25 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/xm/pro/kpi/Form.vue               | 100 ++-
 src/views/xm/pro/kpi/XmKpiTrendAnalysis.vue | 675 ++++++++++++++++++++
 2 files changed, 768 insertions(+), 7 deletions(-)
 create mode 100644 src/views/xm/pro/kpi/XmKpiTrendAnalysis.vue

diff --git a/src/views/xm/pro/kpi/Form.vue b/src/views/xm/pro/kpi/Form.vue
index f5764a73..5d7643c0 100644
--- a/src/views/xm/pro/kpi/Form.vue
+++ b/src/views/xm/pro/kpi/Form.vue
@@ -3,14 +3,15 @@
         <el-card id="baseInfo">
             <template #header>
                 基本信息
-                  <el-text type="info">&nbsp;&nbsp;等级：</el-text> <mdp-select showStyle="tag" itemCode="ktype"  v-model="editForm.ktype" :maxlength="50" @change="editSomeFields(editForm,'ktype',$event)" :disabled="true"/>
-<el-text type="info">&nbsp;&nbsp;状态：</el-text>  <mdp-select :disabled="true" showStyle="tag" width="100%" itemCode="kstatus" v-model="editForm.kstatus" :maxlength="50" @change="editSomeFields(editForm,'kstatus',$event)" />
-                 <el-text type="info">&nbsp;&nbsp;得分：{{editForm.score||0}}</el-text>
+                &nbsp;&nbsp;<el-text type="info" size="small">预警状态：</el-text><mdp-select showStyle="tag" itemCode="kwarnStatus" :disabled="true" v-model="calcKwarnStatus"/><el-text type="info"  size="small">&nbsp;&nbsp;等级：</el-text> <mdp-select showStyle="tag" itemCode="ktype"  v-model="editForm.ktype" :maxlength="50" @change="editSomeFields(editForm,'ktype',$event)" :disabled="true"/>
+<el-text type="info"  size="small">&nbsp;&nbsp;状态：</el-text>  <mdp-select :disabled="true" showStyle="tag" width="100%" itemCode="kstatus" v-model="editForm.kstatus" :maxlength="50" @change="editSomeFields(editForm,'kstatus',$event)" />
+                 <el-text type="info"  size="small">&nbsp;&nbsp;得分：{{editForm.score||0}}</el-text>
                  <el-affix>
                  <el-anchor :offset="80" :router="false" direction="horizontal"> 
                     <el-anchor-link title="基本信息" @click.prevent="scrollToSection('#baseInfo')"/>
                     <el-anchor-link title="负责人、部门" @click.prevent="scrollToSection('#kselfUserid')"/>
-                    <el-anchor-link title="考核周期" @click.prevent="scrollToSection('#calcType')"/>
+                    <el-anchor-link title="考核周期" @click.prevent="scrollToSection('#calcType')"/> 
+                    <el-anchor-link title="预警规则" @click.prevent="scrollToSection('#warnRule')"/> 
                     <el-anchor-link title="考核自评" @click.prevent="scrollToSection('#kselfScore')"/>
                     <el-anchor-link title="考核复评" @click.prevent="scrollToSection('#score')"/>
                     <el-anchor-link title="成果交付" @click.prevent="scrollToSection('#kresult')"/>
@@ -26,7 +27,7 @@
         </el-form-item>
         <el-form-item label="目标设定" prop="targetValue">
                     <el-input style="width:100%;" v-model="editForm.targetValue" placeholder="目标值" :maxlength="20" @change="editSomeFields(editForm,'targetValue',$event)" :disabled="disField"/>
-                    <el-text type="info" size="small">支持表达式，举例 1000>${kpiValue}>100, ${kpiValue}>=98% 等等</el-text>
+                    <el-text type="info" size="small">支持表达式，举例 1000>${kpiValue}>100, ${kpiValue}>=60% 等等</el-text>
                 </el-form-item>
         <el-row :gutter="10">  
 
@@ -116,9 +117,33 @@
         </el-row> 
         </el-card>
         
+        <el-card style="margin-top:20px;" id="warnRule">
+            <template #header>
+                预警规则 &nbsp;&nbsp;<el-text type="info" size="small">预警状态：</el-text><mdp-select showStyle="tag"  itemCode="kwarnStatus"  v-model="calcKwarnStatus" :disabled="true"/>
+                &nbsp;&nbsp;<el-text type="info" size="small">目标规则：</el-text> <el-text type="primary" size="small">{{ editForm.targetValue }}</el-text>
+            </template>
+            <el-row :gutter="10">
+            <el-col :span="8">  
+                <el-form-item label="黄色预警" prop="yellowRule">
+                    <el-input width="100%" itemCode="yellowRule"  v-model="editForm.yellowRule" :maxlength="50" @change="editSomeFields(editForm,'yellowRule',$event)" :disabled="!someOpen||disField"/>
+                </el-form-item>
+            </el-col>   
+            <el-col :span="8">   
+                <el-form-item label="橙色预警" prop="orangeRule" style="width:100%;">
+                    <el-input width="100%" v-model="editForm.orangeRule"  @change="editSomeFields(editForm,'orangeRule',$event)"/>
+                </el-form-item>
+            </el-col> 
+            <el-col :span="8">   
+                <el-form-item label="红色预警" prop="redRule" style="width:100%;">
+                    <el-input width="100%" v-model="editForm.redRule"  @change="editSomeFields(editForm,'redRule',$event)"/>
+                </el-form-item>
+            </el-col>  
+        </el-row> 
+        </el-card>
+        
         <el-card style="margin-top:20px;" id="kselfScore">
             <template #header>
-                考核自评 <el-text type="info">&nbsp;&nbsp;得分：{{editForm.score||0}}</el-text>&nbsp;&nbsp;<el-button type="primary" v-if="editForm.kadmStatus!='3' && editForm.kadmStatus!='1'" @click="editSomeFields(editForm,'kadmStatus','1')">提交复评</el-button>
+                考核自评 &nbsp;&nbsp;<el-text type="info" size="small">&nbsp;&nbsp;得分：{{editForm.score||0}}</el-text>&nbsp;&nbsp;<el-button size="small" type="primary" v-if="editForm.kadmStatus!='3' && editForm.kadmStatus!='1'" @click="editSomeFields(editForm,'kadmStatus','1')">提交复评</el-button>
             </template>
  
         <el-row :gutter="10">  
@@ -265,7 +290,7 @@ export default {
             if(!this.editForm.kpiValue){
                 return false
             }else{
-                let rule= this.editForm.targetValue.replace(/\$\{kpiValue\}/g, this.editForm.kpiValue); 
+                let rule= this.parseRule(this.editForm.targetValue, this.editForm.kpiValue); 
                 try{
                     let result=eval(rule)
                     return result;
@@ -273,6 +298,52 @@ export default {
                     return false;
                 }
                 
+            }
+        },
+        calcKwarnStatus(){ 
+            if(!this.editForm.targetValue){
+                return '0'
+            }
+            if(!this.editForm.kpiValue){
+                return '0'
+            }else{
+                let isRed=false;
+                let isOrange=false;
+                let isYellow=false;
+                try{
+                    let rule= this.parseRule(this.editForm.targetValue, this.editForm.kpiValue)  
+                    let result=eval(rule)
+                    if(result){
+                        return "1"
+                    }else{
+
+                        if(this.editForm.redRule){
+                            let redRule = this.parseRule(this.editForm.redRule, this.editForm.kpiValue); 
+                            isRed=eval(redRule)
+                            if(isRed){
+                                return "4"
+                            }
+                        }
+                        if(this.editForm.orangeRule){
+                            let orangeRule = this.parseRule(this.editForm.orangeRule, this.editForm.kpiValue); 
+                            isOrange=eval(orangeRule)
+                            if(isOrange){
+                                return "3"
+                            }
+                        }
+                        if(this.editForm.yellowRule){
+                            let yellowRule = this.parseRule(this.editForm.yellowRule, this.editForm.kpiValue); 
+                            isYellow=eval(yellowRule)
+                            if(isYellow){
+                                return "2"
+                            }
+                        }  
+                        return "1" 
+                    }
+                }catch(e){
+                    return "0";
+                }
+                
             }
         }
     },
@@ -293,6 +364,11 @@ export default {
         default: false,
       },
     },
+    watch:{
+        calcKwarnStatus(v,ov){
+            //this.editSomeFields(this.editForm,"kwarnStatus",v)
+        }
+    },
     data() {
         return {
             menuDefId:'',//menu_def.id 菜单表菜单编号，用于按钮权限判断
@@ -326,9 +402,19 @@ export default {
             taskBoxVisible:false,
             kpiHisVisible: false,
             logVisible: false,
+
         }
     },
     methods: {
+        parseRule(rule,kpiValue){
+            debugger
+            if(!rule){
+                return rule;
+            }
+            let rule2=rule.replace(/\$\{kpiValue\}/g,kpiValue)
+            let rule3=rule2.replace(/%/g,'/100')
+            return rule3;
+        },
          //由组件扩展添加其它的初始页面的逻辑(mounted+onOpen都会调用此函数，建议只添加公共逻辑)
          initCurrData(){
             this.parent=this.parentKpi
diff --git a/src/views/xm/pro/kpi/XmKpiTrendAnalysis.vue b/src/views/xm/pro/kpi/XmKpiTrendAnalysis.vue
new file mode 100644
index 00000000..eec7730b
--- /dev/null
+++ b/src/views/xm/pro/kpi/XmKpiTrendAnalysis.vue
@@ -0,0 +1,675 @@
+<template>
+ <mdp-lr-box>
+  <template #left>
+    <xm-kpi-tree/>
+  </template> 
+    <content-wrap>
+      <template #header>
+        <mdp-date-range v-model="filters" startKey="startTime" endKey="endTime"/>
+      </template>
+        <div>
+          <el-row v-adaptive="{ bottom: 64 }" :gutter="10">
+            <!-- 行业指标柱状图 -->
+            <el-col :span="12">
+              <el-card class="box-card" style="padding:0px ;height:425px;">
+                <template #header>
+                  <span>kpi指标职能分布</span> 
+                </template> 
+                <div>
+                  <Echart :options="drawKclassBar()" :height="320" />
+                </div>
+              </el-card>
+            </el-col>
+            <!-- 周期指标柱状图 -->
+            <el-col :span="12">
+              <el-card class="box-card" style="padding:0px ;height:425px">
+                <template #header>
+                  <span>kpi指标周期分布</span> 
+                </template>
+                <div>
+                  <Echart :options="drawCalcTypeBar()" :height="320" />
+                </div>
+              </el-card>
+            </el-col>
+            <el-col :span="8">
+              <el-card class="box-card" style="padding:0px ;height:425px;margin-top:10px;">
+                <template #header>
+                  <span>kpi指标等级分布</span> 
+                </template> 
+                <div>
+                  <Echart :options="drawKtypePie()" :height="320" />
+                </div>
+              </el-card>
+            </el-col>
+            <el-col :span="8">
+              <el-card class="box-card" style="height:425px;margin-top:10px;">
+                <template #header>
+                  <span>kpi指标审核状态分布</span>
+                </template>
+                <div>
+                  <Echart :options="drawKadmPie()" :height="320" />
+                </div>
+              </el-card>
+            </el-col>
+
+            <el-col :span="8">
+              <el-card class="box-card" style="height:425px;margin-top:10px;">
+                <template #header>
+                  <span>kpi指标状态分布</span>
+                </template>
+                <div>
+                  <Echart :options="drawKstatusPie()" :height="350" />
+                </div>
+              </el-card>
+            </el-col>
+            <el-col :span="12">
+              <el-card class="box-card" style="padding:0px ;height:425px;margin-top:10px;">
+                <template #header>
+                  <span>kpi指标部门分布</span>
+                </template>
+                
+                <div>
+                  <Echart :options="drawDeptidBar()" :height="350" />
+                </div>
+              </el-card>
+            </el-col> 
+            <el-col :span="12">
+              <el-card class="box-card" style="padding:0px ;height:425px;margin-top:10px;">
+                <template #header>
+                  <span>kpi指标项目分布</span>
+                </template>
+                
+                <div>
+                  <Echart :options="drawProjectIdBar()" :height="350" />
+                </div>
+              </el-card>
+            </el-col> 
+          </el-row>
+        </div>
+    </content-wrap> 
+ </mdp-lr-box>
+  
+</template>
+
+<script>
+import util from "@/components/mdp-ui/js/util"; // 全局公共库
+import { mapState } from 'pinia'
+import { useUserStore } from '@/store/modules/user'
+import { useXmStore, useXmStore2 } from '@/store/modules/xm'
+
+import { getXmKpiAttDist } from '@/api/xm/pro/xmKpi'; 
+ 
+export default {
+  computed: {
+    ...mapState(useUserStore, ["userInfo"]),
+    ...mapState(useXmStore, ['projectInfo']),
+     
+  },
+
+  // props:['selProject'],
+  watch: { 
+  },
+  data() {
+    return {
+      load: { list: false, add: false, calcProject: false, calcSettle: false },
+      isActive: true,
+      selProject: {},
+      maxTableHeight: 300, 
+      kstatusOptions:[],
+      ktypeOptions:[],
+      kclassOptions:[],
+      kadmStatusOptions:[],
+      calcTypeOptions:[],
+
+      kclassDatas:[],
+      calcTypeDatas:[],
+      ktypeDatas:[],
+      kadmStatusDatas:[],
+      kstatusDatas:[],
+      deptidDatas:[],
+      projectIdDatas:[],
+    };
+  },
+
+  methods: {
+    drawKclassBar() {
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.kclassOptions.map(k=>k.name)
+        },
+        series: [
+          {
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                color: '#000000',
+              }
+            },
+            data: this.kclassDatas, 
+            type: 'bar',
+            barMaxWidth:60
+          }
+        ]
+      };
+      return option;
+    },
+    drawCalcTypeBar() {
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.calcTypeOptions.map(k=>k.name)
+        },
+        series: [
+          {
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                color: '#000000',
+              }
+            },
+            data: this.calcTypeDatas, 
+            type: 'bar',
+            barMaxWidth:60
+          }
+        ]
+      };
+      return option;
+    },
+    drawKtypePie() {
+      let option = {
+        title: {
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+
+        },
+        calculable: true,
+
+        legend: {
+          show: true,
+          bottom: 'bottom',
+          data: this.ktypeOptions.map(k=>k.name),
+        },
+        graphic: {
+          type: 'text',
+          left: 'center',
+          top: '40%',
+          style: {
+            // text: '总数',
+            text:
+              '指标数' + this.ktypeDatas.reduce((p,c)=> p+c.value,0),
+
+            textAlign: 'center',
+            fill: '#333',
+            width: 30,
+            height: 30,
+            fontSize: 14
+          }
+        },
+
+        series: [
+          {
+            type: 'pie',
+            center: ['50%', '40%'],
+            radius: ['35%', '60%'],
+            data: this.ktypeDatas,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+
+            label: {
+              show: true,
+              formatter: '{b}: {c}  ({d}%)'
+            },
+          }
+        ]
+      };
+      return option
+    },
+
+    drawKadmPie() {
+      let option = {
+        title: {
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+
+        },
+        calculable: true,
+
+        legend: {
+          show: true,
+          bottom: 'bottom',
+          data: this.kadmStatusOptions.map(k=>k.name),
+        },
+        graphic: {
+          type: 'text',
+          left: 'center',
+          top: '40%',
+          style: {
+            // text: '总数',
+            text:
+              '指标数' + this.kadmStatusDatas.reduce((p,c)=> p+c.value,0),
+
+            textAlign: 'center',
+            fill: '#333',
+            width: 30,
+            height: 30,
+            fontSize: 14
+          }
+        },
+
+        series: [
+          {
+            type: 'pie',
+            center: ['50%', '40%'],
+            radius: ['35%', '60%'],
+            data: this.kadmStatusDatas,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+
+            label: {
+              show: true,
+              formatter: '{b}: {c}  ({d}%)'
+            },
+          }
+        ]
+      };
+      return option
+    },
+    
+    drawKstatusPie() {
+      let option = {
+        title: {
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item',
+
+        },
+        calculable: true,
+
+        legend: {
+          show: true,
+          bottom: 'bottom',
+          data: this.kstatusOptions.map(k=>k.name),
+        },
+        graphic: {
+          type: 'text',
+          left: 'center',
+          top: '40%',
+          style: {
+            // text: '总数',
+            text:
+              '指标数' + this.kstatusDatas.reduce((p,c)=> p+c.value,0),
+
+            textAlign: 'center',
+            fill: '#333',
+            width: 30,
+            height: 30,
+            fontSize: 14
+          }
+        },
+
+        series: [
+          {
+            type: 'pie',
+            center: ['50%', '40%'],
+            radius: ['35%', '60%'],
+            data: this.kstatusDatas,
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+
+            label: {
+              show: true,
+              formatter: '{b}: {c}  ({d}%)'
+            },
+          }
+        ]
+      };
+      return option
+    },
+    
+    drawDeptidBar() {
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.deptidDatas.map(k=>k.name)
+        },
+        series: [
+          {
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                color: '#000000',
+              }
+            },
+            data: this.deptidDatas, 
+            type: 'bar',
+            barMaxWidth:60
+          }
+        ]
+      };
+      return option;
+    },  
+    
+    drawProjectIdBar() {
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'shadow'
+          }
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '10%',
+          containLabel: true
+        },
+        yAxis: {
+          type: 'value'
+        },
+        xAxis: {
+          type: 'category',
+          data: this.projectIdDatas.map(k=>k.name)
+        },
+        series: [
+          {
+            label: {
+              normal: {
+                show: true,
+                position: 'top',
+                color: '#000000',
+              }
+            },
+            data: this.projectIdDatas, 
+            type: 'bar',
+            barMaxWidth:60
+          }
+        ]
+      };
+      return option;
+    },  
+  },
+
+  mounted() {
+    this.selProject = this.projectInfo ||{}
+    this.$mdp.getDictOptions('kstatus').then(o=>{
+      this.kstatusOptions=o
+      getXmKpiAttDist({groupBy:'kstatus',projectId:this.selProject.id}).then(res=>{
+        let datas=res.data
+        this.kstatusDatas=this.kstatusOptions.map(k=>{
+          let data=datas.find(d=>d.name==k.id)  
+          if(data){
+            return {name:k.name,value:data.value}
+          }else{
+            return {name:k.name,value:0}
+          }
+        })
+        
+      })
+    })
+    
+    this.$mdp.getDictOptions('ktype').then(o=>{
+      this.ktypeOptions=o
+      getXmKpiAttDist({groupBy:'ktype',projectId:this.selProject.id}).then(res=>{
+        let datas=res.data
+        this.ktypeDatas=this.ktypeOptions.map(k=>{
+          let data=datas.find(d=>d.name==k.id) 
+          debugger
+          if(data){
+            return {name:k.name,value:data.value}
+          }else{
+            return {name:k.name,value:0}
+          }
+        })
+        
+      })
+    })
+    
+    this.$mdp.getDictOptions('kclass').then(o=>{
+      this.kclassOptions=o
+      getXmKpiAttDist({groupBy:'kclass',projectId:this.selProject.id}).then(res=>{
+        let datas=res.data
+        this.kclassDatas=this.kclassOptions.map(k=>{
+          let data=datas.find(d=>d.name==k.id) 
+          if(data){
+            return {name:k.name,value:data.value}
+          }else{
+            return {name:k.name,value:0}
+          }
+        })
+        
+      })
+    })
+    
+    this.$mdp.getDictOptions('kadmStatus').then(o=>{
+      this.kadmStatusOptions=o
+      getXmKpiAttDist({groupBy:'kadm_status',projectId:this.selProject.id}).then(res=>{
+      let datas=res.data
+      this.kadmStatusDatas=this.kadmStatusOptions.map(k=>{
+        let data=datas.find(d=>d.name==k.id) 
+        if(data){
+            return {name:k.name,value:data.value}
+          }else{
+            return {name:k.name,value:0}
+          }
+      })
+      
+    })
+    })
+    
+    this.$mdp.getDictOptions('calcType').then(o=>{
+      this.calcTypeOptions=o
+      getXmKpiAttDist({groupBy:'calc_type',projectId:this.selProject.id}).then(res=>{
+        let datas=res.data
+        this.calcTypeDatas=this.calcTypeOptions.map(k=>{
+          let data=datas.find(d=>d.name==k.id) 
+          if(data){
+              return {name:k.name,value:data.value}
+            }else{
+              return {name:k.name,value:0}
+            }
+        })
+        
+      })
+    }) 
+    getXmKpiAttDist({groupBy:'deptid',projectId:this.selProject.id}).then(res=>{
+        let datas=res.data
+        this.deptidDatas=datas.map(k=>{ 
+           return k
+        })
+        
+      })
+      getXmKpiAttDist({groupBy:'project_id',projectId:this.selProject.id}).then(res=>{
+        let datas=res.data
+        this.projectIdDatas=datas.map(k=>{
+           return k
+        })
+        
+      })
+    
+
+
+
+    
+
+  },
+
+};
+</script>
+
+<style scoped lang="scss">
+.container {
+  margin: 10px;
+}
+
+.header {
+  display: flex;
+  justify-content: flex-start;
+  padding: 10px;
+
+  span {
+    padding-right: 15px;
+  }
+}
+
+.col {
+  margin-bottom: 20px;
+}
+
+.icon1 {
+  color: #fff;
+  border-radius: 15px;
+  text-align: center;
+  font-size: 20px;
+  display: inline-block;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.icon2 {
+  color: #000000;
+  border-radius: 15px;
+  text-align: center;
+  font-size: 20px;
+  display: inline-block;
+  margin-right: 5px;
+  margin-left: 5px;
+}
+
+.item {
+  display: flex;
+  justify-content: flex-start;
+  position: relative;
+
+  .progress-item {
+    position: absolute;
+    width: 80%;
+  }
+}
+
+.card-font {
+  color: #000000;
+  font-size: 12px;
+
+  .el-col {
+    margin-bottom: 20px;
+  }
+}
+
+.calendar-header {
+  display: flex;
+  justify-content: space-between;
+
+  .cal-header-boxs {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+
+    .cal-header-box {
+      padding: 5px;
+      height: 45px;
+      margin-left: 10px;
+    }
+
+    .box-icon {
+      text-align: center;
+    }
+
+    .box-info {
+      text-align: center;
+      font-size: 12px;
+      color: #000000;
+    }
+  }
+}
+
+.el-tag:hover {
+  cursor: pointer;
+}
+
+.value {
+  cursor: pointer;
+}
+
+.reference {
+  margin-top: 10px;
+  font-size: 12px;
+}
+
+.click {
+  background: #e9f7ff;
+}
+
+.calendar-box {
+  display: flex;
+  justify-content: flex-start;
+}</style>
+