修改类别统计

src/views/zdrygl/lbtj.vue

@@ -16,9 +16,19 @@
       v-if="historyArr.length > 1 && type == 'map'"
       >返回上层</el-button
     >
+    <el-button
+            type="primary"
+            size="mini"
+            class="returnBtn"
+            @click="historyCharts2"
+            style=""
+            v-if="type == 'map' && historyArr2.length > 0"
+    >返回重点人员</el-button
+    >
     <div
       id="charts"
       ref="charts"
+      v-if="showCharts"
       v-show="type == 'map'"
       v-loading="loading"
     ></div>
@@ -50,6 +60,8 @@ export default {
       header: "重点人员信息管理",
       cxUrl: "/zdGzry/getMainZdGzryxx",
       historyArr: [],
+      historyArr2: [],
+      secondData: [],
       cxFormData: {
         limit: 10,
         page: 1,
@@ -131,7 +143,7 @@ export default {
           placeholder: "请选择",
           col: "3",
           codeOptions: [],
-          codeTree: "CODE_AJZLB",
+          codeTree: "CODE_AJLB_bz",
         },
         {
           name: "刑事类案案别",
@@ -231,6 +243,7 @@ export default {
       ],
       tierNum: 1,
       loading: false,
+      showCharts:true,
     };
   },
   methods: {
@@ -274,6 +287,7 @@ export default {
             axisLine: {
               show: false,
               color: "#A582EA",
+              interval: 0,
             },
             axisLabel: {
               formatter: function (a, b) {
@@ -282,7 +296,7 @@ export default {
               color: "#000",
               width: 100,
               clickable: true,
-              rotate: rotate,
+              rotate: -30,
             },
             silent: false,
             triggerEvent: true,
@@ -354,9 +368,145 @@ export default {
       myChart.on("click", function (params) {
         //点击文字下钻
         if (params.componentType == "xAxis") {
-          let dm = params.value;
+          debugger
+          // let dm = params.value;
           //调用接口
-          _this.getChartsData(dm);
+          _this.secondData.map((item) => {
+            if(item.id == params.value) {
+              debugger
+              console.log(item.data)
+              if(item.data.length != 0) {
+                let xData02 = item.data.map((i) => ({
+                  name: i.name,
+                  value: i.drilldown,
+                }));
+                let data02 = item.data.map((i) => ({
+                  name: i.name,
+                  value: i.y,
+                  dm: i.drilldown,
+                }));
+                debugger
+                //添加到histoy数组
+                _this.historyArr2.push({ x: xData02, data: data02 });
+                //刷新图
+                this.showCharts = false;
+                _this.$nextTick(() => {
+                  this.showCharts = true;
+                })
+                myChart.setOption({
+                  title: {
+                    text: "类别统计",
+                    textStyle: {
+                      color: "#000",
+                      fontWeight: 600,
+                      fontSize: 18,
+                    },
+                    left: "3%",
+                    top: "5%",
+                  },
+                  tooltip: {
+                    trigger: "axis",
+                    axisPointer: {
+                      label: {
+                        formatter: function (name) {
+                          return name.seriesData[0].name;
+                        },
+                      },
+                      // 坐标轴指示器，坐标轴触发有效
+                      type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
+                    },
+                  },
+                  grid: {
+                    top: "20%",
+                    left: "15%",
+                    right: "10%",
+                    bottom: "20%",
+                    // containLabel: true
+                  },
+                  xAxis: [
+                    {
+                      type: "category",
+                      axisLine: {
+                        show: false,
+                        color: "#A582EA",
+                        interval: 0,
+                      },
+                      axisLabel: {
+                        formatter: function (a, b) {
+                          return xData02[b].name;
+                        },
+                        color: "#000",
+                        width: 100,
+                        clickable: true,
+                        rotate: -30,
+                      },
+                      silent: false,
+                      triggerEvent: true,
+                      splitLine: {
+                        show: false,
+                      },
+                      boundaryGap: true,
+                      data: xData02,
+                      id: 1,
+                    },
+                  ],
+                  yAxis: [
+                    {
+                      type: "value",
+                      min: 0,
+                      splitNumber: 4,
+                      splitLine: {
+                        show: true,
+                        lineStyle: {
+                          color: "#000",
+                          opacity: 0.23,
+                        },
+                      },
+                      axisLine: {
+                        show: false,
+                      },
+                      axisLabel: {
+                        show: true,
+                        margin: 20,
+                        textStyle: {
+                          color: "#000",
+                        },
+                      },
+                      axisTick: {
+                        show: false,
+                      },
+                    },
+                  ],
+                  legend: {
+                    right: 35,
+                    top: 52,
+                    textStyle: {
+                      color: "#000",
+                    },
+                    itemWidth: 12,
+                    itemHeight: 10,
+                    // itemGap: 35
+                  },
+                  series: [
+                    {
+                      name: "人员数",
+                      type: "bar",
+                      data: data02,
+                      barWidth: "35px",
+                      itemStyle: {
+                        normal: {
+                          color: "#247FDC",
+                        },
+                      },
+                    },
+                  ],
+                },true)
+              }
+            }
+          })
+          console.log(params.value)
+          console.log(_this.secondData)
+          // _this.getChartsData(dm);
         } else if (params.componentSubType == "bar") {
           let dm = params.data.dm;
           _this.getTableData(dm);
@@ -374,6 +524,23 @@ export default {
       this.historyArr.pop();
       this.tierNum--;
     },
+    //点击返回上一层事件
+    historyCharts2() {
+      if (this.historyArr.length == 1 && this.historyArr2.length != 1) {
+        this.$message.warning("无法返回");
+        return;
+      }else {
+        // debugger
+        // document.getElementById("charts").dispose()
+      }
+      debugger
+      let obj = this.historyArr2[this.historyArr2.length - 1];
+      this.getCharts(obj.x, obj.data, -30);
+      debugger
+
+      this.historyArr.pop();
+      this.tierNum--;
+    },
     //下钻处理接口事件
     getChartsData(xzqhdm) {
       let params = new Object();
@@ -391,15 +558,28 @@ export default {
       ryAjlbTj(params).then((res) => {
         this.loading = false;
         if (res.success && res.code == 200) {
-          if (res.data.rows.length > 0) {
-            let xData = res.data.rows.map((i) => ({
-              name: i.ajlbmc,
-              value: i.ajlb,
+          if (res.data.secounts.length > 0) {
+            let firstData = []
+            let secondData = []
+            let jsonstr = ''
+            console.log(res.data)
+            firstData = res.data.secounts.map((str)=> {
+              return jsonstr = eval("("+ str + ")")
+            })
+            secondData = res.data.sicounts.map((str)=> {
+              return jsonstr = eval("("+ str + ")")
+            })
+            this.secondData = secondData
+            console.log(firstData)
+            console.log(secondData)
+            let xData = firstData.map((i) => ({
+              name: i.name,
+              value: i.drilldown,
             }));
-            let data = res.data.rows.map((i) => ({
-              name: i.ajlbmc,
-              value: i.count,
-              dm: i.ajlb,
+            let data = firstData.map((i) => ({
+              name: i.name,
+              value: i.y,
+              dm: i.drilldown,
             }));
             //添加到histoy数组
             this.historyArr.push({ x: xData, data: data });
@@ -415,8 +595,13 @@ export default {
     },
     //表格内容接口
     getTableData(dm) {
+      debugger
       this.type = "table";
-      this.$set(this.cxFormData, "sabq", dm);
+      if(dm.length == 12) {
+        this.$set(this.cxFormData, "xalbdmbcms", dm);
+      }else if(dm.length == 14) {
+        this.$set(this.cxFormData, "ajlbCode", dm);
+      }
       this.$refs.rightContent.doQuery("yes");
     },
     getCode() {