【update】-科室总体统计-增加不同打包维度的筛选

src/views/dashboard/DepartmentTotalEcharts.vue

@@ -5,6 +5,13 @@
       科室总体统计
       <j-year-date  style="width:250px" class="year" placeholder="请选择年份" v-model="queryParam.year" @change="loadData"></j-year-date>
     </div>
+    <div class="operator">
+      <span @click="toggleEcharts('packProject')" class="operator-left"
+            :class="{'active':activeIndex === 'packProject'}">打包项目</span>
+      <span @click="toggleEcharts('childProject')" class="operator-right"
+            :class="{'active':activeIndex === 'childProject'}">子项目</span>
+    </div>
+
     <div class="echarts-box" id="departmentTotal"></div>
 
     <!--   表格区域beign -->
@@ -88,6 +95,7 @@ export default {
   mixins: [JeroListMixin],
   data() {
     return {
+      activeIndex: 'packProject',
       disableMixinCreated: true,
       url: {
         list: '/index/overallDepartmentStatistics',
@@ -104,6 +112,15 @@ export default {
     this.loadData(1)
   },
   methods: {
+    toggleEcharts(key) {
+      if (key === this.activeIndex) {
+        return
+      } else {
+        this.activeIndex = key
+        this.loadData()
+        this.$forceUpdate()
+      }
+    },
     formatMoney,
     loadData(arg) {
       if (!this.url.list) {
@@ -114,8 +131,12 @@ export default {
       if (arg === 1) {
         this.ipagination.current = 1
       }
+      let typeEnum = {
+        packProject: 1,
+        childProject: 2
+      }
       let params = this.getQueryParams()//查询条件
-      params = Object.assign({}, params, {year: this.queryParam.year})
+      params = Object.assign({}, params, {type: typeEnum[this.activeIndex], year: this.queryParam.year})
       this.loading = true
       getAction(this.url.list, params).then((res) => {
         if (res.success) {
@@ -334,6 +355,7 @@ export default {
   padding: 20px;
   box-sizing: border-box;
   width: 100%;
+  position: relative;
   //height: auto;
 }
 
@@ -368,4 +390,38 @@ export default {
   background: rgb(245, 245, 246);
 }
 
+
+.operator {
+  color: #069F99;
+  position: absolute;
+  user-select: none;
+  display: flex;
+  font-size: 12px;
+  justify-content: space-around;
+  align-items: center;
+  right: 20px;
+  top: 10px;
+  width: 180px;
+  height: 32px;
+  line-height: 32px;
+  border: 1px solid #069F99;
+  border-radius: 4px;
+  cursor: pointer;
+
+  &-left {
+    width: 50%;
+    text-align: center;
+    border-right: 1px solid #069F99;
+  }
+
+  &-right {
+    width: 50%;
+    text-align: center;
+  }
+}
+
+.active {
+  background: #069F99;
+  color: #fff;
+}
 </style>