新增合同统计，修改项目类型带输入建议

oa-ui/src/api/oa/project/project.js

@@ -2,7 +2,7 @@
  * @Author: wrh
  * @Date: 2024-01-30 16:37:46
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-10-11 15:26:43
+ * @LastEditTime: 2024-10-14 16:50:24
  */
 import request from '@/utils/request'
 
@@ -75,3 +75,12 @@ export function getProjectStatistic(query) {
     params: query
   })
 }
+
+
+// 项目统计信息
+export function getProjectType() {
+  return request({
+    url: '/oa/project/projectType',
+    method: 'get',
+  })
+}

oa-ui/src/views/flowable/form/components/choosePartyA.vue

@@ -2,18 +2,21 @@
  * @Author: ysh
  * @Date: 2024-06-18 17:38:50
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-10-09 11:31:52
+ * @LastEditTime: 2024-10-14 14:46:08
 -->
 <template>
   <div>
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="单位名称" prop="partyAName">
-        <el-select v-model="queryParams.partyAName" clearable filterable remote reserve-keyword placeholder="请输入单位名称"
+        <!-- <el-select v-model="queryParams.partyAName" clearable filterable remote reserve-keyword placeholder="请输入单位名称"
           :remote-method="remoteMethod" :loading="queryLoading" style="width: 400px;" @change="handleQuery()">
           <el-option v-for="partyA in queryPartyAList" :key="partyA.partyAId" :label="partyA.partyAName"
             :value="partyA.partyAName">
           </el-option>
-        </el-select>
+        </el-select> -->
+        <el-autocomplete class="inline-input" clearable style="width: 400px;" v-model="queryParams.partyAName"
+          :fetch-suggestions="querySearch" value-key="partyAName" placeholder="请输入内容"
+          @select="handleQuery()"></el-autocomplete>
       </el-form-item>
       <el-form-item style="margin-bottom:0;display:none;"> <el-input></el-input> </el-form-item>
       <el-form-item>
@@ -160,6 +163,16 @@ export default {
         this.queryLoading = false;
       })
     },
+    querySearch(queryString, cb) {
+      let partyAList = this.partyAList;
+      let results = queryString ? partyAList.filter(this.createFilter(queryString)) : partyAList;
+      cb(results)
+    },
+    createFilter(queryString) {
+      return (partyA) => {
+        return (partyA.partyAName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+      };
+    },
     // 取消按钮
     cancel() {
       this.open = false;

oa-ui/src/views/flowable/form/projectProcess/addproject.vue

@@ -2,7 +2,7 @@
  * @Author: ysh
  * @Date: 2024-03-18 11:00:04
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-10-09 14:29:14
+ * @LastEditTime: 2024-10-14 17:02:05
 -->
 <template>
   <div class="project-wrapper">
@@ -21,7 +21,9 @@
         <el-input v-model="addForm.projectName"></el-input>
       </el-form-item>
       <el-form-item label="项目类型：" prop="projectType">
-        <el-input v-model="addForm.projectType"></el-input>
+        <!-- <el-input v-model="addForm.projectType"></el-input> -->
+        <el-autocomplete clearable style="width: 400px;" v-model="addForm.projectType"
+          :fetch-suggestions="querySearchProjectType" placeholder="请输入关键词"></el-autocomplete>
       </el-form-item>
       <el-form-item label="项目级别：" prop="projectLevel">
         <el-radio v-model="addForm.projectLevel" label="0" border>一般项目</el-radio>
@@ -93,7 +95,7 @@
         <el-col :span="6" :xs="24" :offset="12">
           <el-form-item label="项目登记人：" prop="registrantUser">
             <span class="auditor"> {{ addForm.projectRegistrantUser ? addForm.projectRegistrantUser.nickName :
-      registrantUser }} </span>
+              registrantUser }} </span>
           </el-form-item>
         </el-col>
         <el-col :span="6">
@@ -120,7 +122,7 @@
 <script>
 import { parseTime } from "@/utils/ruoyi";
 import { mapGetters } from "vuex";
-import { listProject, getProject, addProject, updateProject, delProject, getProjectNmuber, sendMessage } from "@/api/oa/project/project";
+import { listProject, getProject, addProject, updateProject, delProject, getProjectNmuber, sendMessage, getProjectType } from "@/api/oa/project/project";
 import { listDept } from '@/api/system/dept'
 import { getUser } from "@/api/system/user";
 import { getUsersDeptLeaderByDept } from "@/api/system/post";
@@ -218,7 +220,8 @@ export default {
         },
       ],
       restaurants: [{ value: "中国电建集团成都勘测设计研究院有限公司勘测设计分公司" }],
-      registrantUser: ''
+      registrantUser: '',
+      projectTypeList: []
     };
   },
   created() {
@@ -226,6 +229,7 @@ export default {
     this.initProjectForm();
     this.getPartyAList();
     this.getDeptList();
+    this.getProjectTypeList();
     this.getContractDataList();
     if (this.$cache.local.get('contractId')) {
       const contractId = this.$cache.local.get('contractId')
@@ -253,6 +257,24 @@ export default {
         this.loading = false;
       });
     },
+    getProjectTypeList() {
+      getProjectType().then(res => {
+        if (res) {
+          this.projectTypeList = res.data;
+        }
+      })
+    },
+    querySearchProjectType(queryString, cb) {
+      let projectTypeList = this.projectTypeList;
+      let res1 = queryString ? projectTypeList.filter(this.createFilter(queryString)) : projectTypeList;
+      let res2 = res1.map(item => ({ value: item }));
+      cb(res2)
+    },
+    createFilter(queryString) {
+      return (projectType) => {
+        return (projectType.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
+      };
+    },
     getDeptList() {
       listDept({
         deptName: undefined,
@@ -482,19 +504,6 @@ export default {
         arr.splice(index, 1);
       }
     },
-    querySearch(queryString, cb) {
-      var restaurants = this.restaurants;
-      var results = queryString
-        ? restaurants.filter(this.createFilter(queryString))
-        : restaurants;
-      // 调用 callback 返回建议列表的数据
-      cb(results);
-    },
-    createFilter(queryString) {
-      return restaurant => {
-        return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
-      };
-    },
     setProjectDocument(val) {
       let arr = val.split('/upload')
       this.addForm.taskDocument = arr[1]

oa-ui/src/views/statistics/components/contractStatistics.vue

@@ -0,0 +1,293 @@
+<template>
+  <div style="width:100%;" v-loading="loading">
+    <div class="titles">合同统计</div>
+    <div class="warpper">
+      <div class="left">
+        <!-- 每年合同额柱状图 -->
+        <div class="left-top" id="amountBar"></div>
+        <div class="left-bottom">
+          <div class="pie1" id="cwamountPie"></div>
+          <div class="pie2" id="cwSourcePie"></div>
+        </div>
+      </div>
+      <div class="middle">
+
+      </div>
+      <div class="right">
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ehcartsInit } from '@/utils/echarts'
+let amountChart, cwAmountChart, cwSourceChart
+export default {
+  props: {
+    datas: {
+      type: Object,
+      require: true,
+    }
+  },
+  data() {
+    return {
+      loading: true,
+      dataLoading: true,
+      contractAmount: {},
+      contractCwAmount: {},
+      contractSource: {},
+      contractYear: {},
+      subYear: 0,
+      sumAomunt: 0
+    }
+  },
+  mounted() {
+    this.initDatas();
+    this.initAmountBar();
+    this.initChartCwAomunt('');
+    this.initChartCwSource('');
+  },
+  methods: {
+    async initDatas() {
+      console.log(this.datas);
+      if (Object.keys(this.datas).length !== 0) {
+        this.contractAmount = this.datas.amount[0];
+        this.contractCwAmount = this.datas.cwAmount[0]
+        this.contractSource = this.datas.source[0]
+        this.contractYear = this.datas.year[0]
+        this.loading = false
+        let sum = Object.values(this.contractAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0)
+        this.sumAomunt = (sum / 100000000).toFixed(4) + '亿元';
+      }
+    },
+    initAmountBar() {
+      let option = {
+        title: {
+          text: '各年合同额统计',
+          subtext: '共计合同额：' + Object.values(this.contractAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0) + '元'
+            + '(约: ' + this.sumAomunt + ')'
+        },
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '0%',
+          height: '60%',
+          containLabel: true
+        },
+        graphic: [
+          {
+            type: 'text',
+            name: '',
+            right: '0',
+            top: '20%',
+            style: {
+              text: '全部年份',
+              fill: '#000', // 文本颜色  
+              fontSize: 12, // 文本大小  
+              fontWeight: '' // 文本粗细  
+            }
+          }
+        ],
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'none',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        xAxis: {
+          name: '年',
+          type: 'category',
+          data: Object.keys(this.contractAmount),
+        },
+        yAxis: {
+          type: 'value',
+          name: '单位：元'
+        },
+        series: [
+          {
+            data: Object.values(this.contractAmount),
+            type: 'bar',
+            smooth: true,
+            label: {
+              show: true,
+              position: 'top',
+              formatter: function (params) {
+                var value = params.value;
+                if (value >= 100000000) {
+                  // 亿  
+                  return (value / 100000000).toFixed(4) + '亿';
+                } else {
+                  // 千万元  
+                  return (value / 10000000).toFixed(4) + '千万元';
+                }
+              }
+            },
+            itemStyle: {
+              color: '#1C3F95'
+            }
+          },
+          {
+            type: 'line',
+            data: Object.values(this.contractAmount),
+            smooth: true,
+            itemStyle: {
+              color: '#F89B30'
+            }
+          }
+        ]
+      };
+      let charts = ehcartsInit(amountChart, 'amountBar', option);
+    },
+    initChartCwAomunt(year) {
+      let option = {
+        title: {
+          text: year + '合同额分布情况',
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          top: 'bottom'
+        },
+        series: [
+          {
+            name: '占比',
+            type: 'pie',
+            radius: '40%',
+            avoidLabelOverlap: false,
+            data: Object.entries(this.contractCwAmount).map(([key, value]) => {
+              return { name: key, value: value }
+            }),
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+            label: {
+              alignTo: 'none',
+              formatter: '{name|{b}}\n{value|{c}元}',
+              minMargin: 5,
+              edgeDistance: 8,
+              lineHeight: 15,
+              rich: {
+                time: {
+                  fontSize: 10,
+                  color: '#999'
+                }
+              }
+            },
+          }
+        ]
+      };
+      ehcartsInit(cwAmountChart, 'cwamountPie', option);
+    },
+    initChartCwSource(year) {
+      let option = {
+        title: {
+          text: year + '合同来源分布',
+        },
+        tooltip: {
+          trigger: 'item',
+          formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+          top: 'bottom'
+        },
+        series: [
+          {
+            name: '占比',
+            type: 'pie',
+            radius: '40%',
+            avoidLabelOverlap: false,
+            data: Object.entries(this.contractSource).map(([key, value]) => {
+              return { name: key, value: value }
+            }),
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            },
+            label: {
+              alignTo: 'none',
+              formatter: '{name|{b}}\n{value|{c}个}',
+              minMargin: 5,
+              edgeDistance: 8,
+              lineHeight: 15,
+              rich: {
+                time: {
+                  fontSize: 10,
+                  color: '#999'
+                }
+              }
+            },
+          }
+        ]
+      };
+      ehcartsInit(cwSourceChart, 'cwSourcePie', option);
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.titles {
+  font-family: 'puhuiti';
+  font-size: 16px;
+  margin-bottom: 16px;
+}
+
+.warpper {
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .left {
+    flex: 1.5;
+
+    .left-top {
+      width: 100%;
+      height: 300px;
+      padding: 10px;
+      border: 1px solid #ececec;
+    }
+
+    .left-bottom {
+      width: 100%;
+      height: 300px;
+      padding: 10px;
+      display: flex;
+
+      .pie1 {
+        flex: 1.5;
+        height: 300px;
+        padding: 10px;
+        border: 1px solid #ececec;
+      }
+
+      .pie2 {
+        flex: 1;
+        height: 300px;
+        padding: 10px;
+        border: 1px solid #ececec;
+      }
+    }
+  }
+
+  .middle {
+    flex: 1;
+  }
+
+  .right {
+    flex: 1;
+  }
+}
+</style>

oa-ui/src/views/statistics/components/projectStatistics.vue

@@ -2,16 +2,19 @@
  * @Author: ysh
  * @Date: 2024-10-11 16:41:17
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-10-12 17:00:05
+ * @LastEditTime: 2024-10-14 15:16:36
 -->
 <template>
   <div style="width:100%;" v-loading="loading">
     <div class="titles">项目统计</div>
     <div class="warpper">
       <div class="left">
+        <!-- 年份项目柱状图 -->
         <div class="bar" id="yearNumber"></div>
         <div class="pie-box" v-loading="dataLoading">
+          <!-- 院内院外饼图 -->
           <div class="sourcePie" id="sourceNumber"></div>
+          <!-- 部门饼图 -->
           <div class="deptPie" id="deptNumber"></div>
         </div>
       </div>
@@ -30,6 +33,12 @@ import { disposeCharts, echartsSetoption, ehcartsInit } from '@/utils/echarts'
 import { getProjectStatistic } from '@/api/oa/project/project'
 let barYearChart, sourceChart, deptChart, typeChart
 export default {
+  props: {
+    datas: {
+      type: Object,
+      require: true,
+    }
+  },
   data() {
     return {
       year: {},
@@ -53,6 +62,15 @@ export default {
     },
     type() {
       this.initTypeBar(this.activeYear);
+    },
+    datas: {
+      handler(newVal) {
+        if (newVal) {
+          this.initDatas();
+        }
+      },
+      immediate: true,  // 在绑定时立即执行一次  
+      deep: true       // 深度监听对象的变化  
     }
   },
   created() {
@@ -64,19 +82,19 @@ export default {
   methods: {
     async initDatas() {
       this.loading = true;
-      let res = await getProjectStatistic();
-      if (res.data) {
-        this.year = res.data.year[0];
-        this.type = res.data.type[0];
-        this.source = res.data.source[0];
-        this.dept = res.data.dept[0];
+      if (Object.keys(this.datas).length !== 0) {
+        this.year = this.datas.year[0];
+        this.type = this.datas.type[0];
+        this.source = this.datas.source[0];
+        this.dept = this.datas.dept[0];
         this.loading = false;
       }
+
     },
     initChartBar() {
       let option = {
         title: {
-          text: '每年项目个数统计',
+          text: '各年项目个数统计',
           subtext: '共计项目：' + Object.values(this.year).reduce((accumulator, currentValue) => accumulator + currentValue, 0) + '个'
         },
         grid: {
@@ -223,7 +241,7 @@ export default {
         legend: {
           bottom: '0',
           textStyle: {
-            fontSize: 9
+            fontSize: 12
           }
         },
         series: [
@@ -316,7 +334,7 @@ export default {
           type: 'category',
           data: Object.keys(this.type),
           axisLabel: {
-            fontSize: 9,
+            fontSize: 12,
             width: 50,
             overflow: 'truncate',
           }

oa-ui/src/views/statistics/components/topHead.vue

@@ -16,18 +16,19 @@
           <div id="thisYear"></div>
         </div>
       </div>
-      <div class="two item-box">
+      <div class="two item-box" @click="$emit('handleClick', 'contract')">
         <div class="data-left">
-          <div class="data-title">2024项目总数</div>
-          <div class="number">{{ projectNum.toLocaleString('en-US') }}</div>
+          <div class="data-title">{{ thisYear }}年合同总数</div>
+          <div class="number">{{ contractNum.toLocaleString('en-US') }}</div>
           <div>
             <span class="text-1">较去年</span>
-            <span class="text-2" :class="{ upColor: isProjectUp, dowColor: !isProjectUp }">206</span>
-            <img :src="isProjectUp ? upImg : downImg" alt="">
+            <span class="text-2" :class="{ upColor: isContractUp, dowColor: !isContractUp }">{{ contractSubYear
+              }}</span>
+            <img :src="isContractUp ? upImg : downImg" alt="">
           </div>
         </div>
         <div class="chart-box">
-          <div id=""></div>
+          <div id="thisContract"></div>
         </div>
       </div>
       <div class="three item-box">
@@ -67,53 +68,88 @@ import upSrc from '@/assets/icons/up.png'
 import downSrc from '@/assets/icons/down.png'
 import * as echarts from 'echarts'
 import { disposeCharts, echartsSetoption, ehcartsInit } from '@/utils/echarts'
-import { getProjectStatistic } from '@/api/oa/project/project'
-import { getContractStatistic } from '@/api/oa/contract/contract'
-let thisYearChart
+let thisYearChart, contractYearChart
 export default {
+  props: {
+    pDatas: {
+      type: Object,
+      require: true,
+    },
+    cDatas: {
+      type: Object,
+      require: true,
+    }
+  },
   data() {
     return {
-      projectNum: 12345,
+      projectNum: 0,
+      contractNum: 0,
       upImg: upSrc,
       downImg: downSrc,
       isProjectUp: false,
+      isContractUp: false,
       thisYear: new Date().getFullYear(),
       year: {},
       type: {},
       source: {},
       dept: {},
+      contractAmount: {},
+      contractCwAmount: {},
+      contractSource: {},
+      contractYear: {},
       subYear: 0,
+      contractSubYear: 0,
       loading: true
     }
   },
   watch: {
     year() {
       this.initChartOne();
+    },
+    contractYear() {
+      this.initChartTwo();
+    },
+    pDatas: {
+      handler(newVal) {
+        if (newVal) {
+          this.initDatas();
+        }
+      },
+      immediate: true,  // 在绑定时立即执行一次  
+      deep: true       // 深度监听对象的变化  
+    },
+    cDatas: {
+      handler(newVal) {
+        if (newVal) {
+          this.initDatas();
+        }
+      },
+      immediate: true,  // 在绑定时立即执行一次  
+      deep: true       // 深度监听对象的变化  
     }
   },
   created() {
-    this.initDatas();
   },
   mounted() {
-    // this.initChartOne();
   },
   methods: {
     async initDatas() {
       this.loading = true
-      let res1 = await getProjectStatistic();
-      if (res1.data) {
-        this.year = res1.data.year[0];
-        this.type = res1.data.type[0];
-        this.source = res1.data.source[0];
-        this.dept = res1.data.dept[0];
-        // this.initChartOne();
+      if (Object.keys(this.pDatas).length !== 0) {
+        this.year = this.pDatas.year[0];
+        this.type = this.pDatas.type[0];
+        this.source = this.pDatas.source[0];
+        this.dept = this.pDatas.dept[0];
         this.getProjectYearSub(this.year);
       }
-      let res2 = await getContractStatistic();
-      if(res2.data){
-        console.log(res2.data);
-        
+      if (Object.keys(this.cDatas).length !== 0) {
+        this.contractAmount = this.cDatas.amount[0];
+        this.contractCwAmount = this.cDatas.cwAmount[0]
+        this.contractSource = this.cDatas.source[0]
+        this.contractYear = this.cDatas.year[0]
+        this.getContractYearSub(this.contractYear)
       }
+
       this.loading = false
     },
     initChartOne() {
@@ -155,6 +191,50 @@ export default {
       };
       ehcartsInit(thisYearChart, 'thisYear', option);
     },
+    initChartTwo() {
+      let option = {
+        grid: {
+          left: '1%',
+          right: '1%',
+          bottom: '0%',
+          height: '60%',
+          containLabel: true
+        },
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            type: 'none',
+            label: {
+              backgroundColor: '#6a7985'
+            }
+          }
+        },
+        xAxis: {
+          type: 'category',
+          data: Object.keys(this.contractYear).slice(-6),
+          show: false
+        },
+        yAxis: {
+          type: 'value',
+          axisLabel: { show: false },
+          splitLine: { show: false }
+        },
+        series: [
+          {
+            min: 0,
+            data: Object.values(this.contractYear).slice(-6),
+            type: 'line',
+            smooth: true,
+            itemStyle: {
+              color: '#00B42A'
+            }
+          }
+        ]
+      };
+      console.log(1);
+
+      ehcartsInit(contractYearChart, 'thisContract', option);
+    },
     getProjectYearSub(year) {
       let arr = Object.values(year).slice(-2);
       this.subYear = Number(arr[1]) - Number(arr[0]);
@@ -165,7 +245,18 @@ export default {
       } else {
         this.isProjectUp = true
       }
-    }
+    },
+    getContractYearSub(year) {
+      let arr = Object.values(year).slice(-2);
+      this.contractSubYear = Number(arr[1]) - Number(arr[0]);
+      this.contractNum = Number(arr[1])
+      if (this.contractSubYear < 0) {
+        this.contractSubYear = - this.contractSubYear;
+        this.isContractUp = false
+      } else {
+        this.isContractUp = true
+      }
+    },
   },
 }
 </script>
@@ -227,14 +318,13 @@ export default {
 
   .chart-box {
     flex: 2;
-  }
-
-}
 
+    div {
+      width: 100%;
+      height: 100%;
+    }
+  }
 
-#thisYear {
-  width: 100%;
-  height: 100%;
 }
 
 .one {

oa-ui/src/views/statistics/index.vue

@@ -2,36 +2,58 @@
  * @Author: ysh
  * @Date: 2024-10-11 09:23:15
  * @LastEditors: Please set LastEditors
- * @LastEditTime: 2024-10-12 09:38:18
+ * @LastEditTime: 2024-10-14 10:48:03
 -->
 <template>
   <div class="app-container bg">
     <div class="head">
-      <top-head @handleClick="changeClick"></top-head>
+      <top-head @handleClick="changeClick" :pDatas="projectInfo" :cDatas="contractInfo"></top-head>
     </div>
     <div class="content">
-      <project-statistics v-if="isActive = 'project'"></project-statistics>
+      <project-statistics v-if="isActive == 'project'" :datas="projectInfo"></project-statistics>
+      <contract-statistics v-else-if="isActive == 'contract'" :datas="contractInfo"></contract-statistics>
     </div>
   </div>
 </template>
 
 <script>
-import ProjectStatistics from './components/projectStatistics.vue'
-import topHead from './components/topHead.vue'
+import { getProjectStatistic } from '@/api/oa/project/project'
+import { getContractStatistic } from '@/api/oa/contract/contract';
+import ProjectStatistics from './components/projectStatistics.vue';
+import contractStatistics from './components/contractStatistics.vue';
+import topHead from './components/topHead.vue';
 export default {
-  components: { topHead, ProjectStatistics },
+  components: { topHead, ProjectStatistics, contractStatistics },
   data() {
     return {
-      isActive: 'project'
+      isActive: 'project',
+      contractInfo: {},
+      projectInfo: {},
     }
   },
+  created() {
+    this.getProjectInfo();
+    this.getContractInfo();
+  },
   mounted() {
+
   },
   methods: {
+    async getProjectInfo() {
+      let res1 = await getProjectStatistic();
+      if (res1.data) {
+        this.projectInfo = res1.data
+
+      }
+    },
+    async getContractInfo() {
+      let res2 = await getContractStatistic();
+      if (res2.data) {
+        this.contractInfo = res2.data;
+      }
+    },
     changeClick(val) {
       this.isActive = val
-      console.log(val);
-
     }
   },
 }
@@ -56,5 +78,4 @@ export default {
   border-radius: 4px;
   padding: 20px;
 }
-
 </style>