Merge branch 'dev_xzeq' of http://47.92.108.28/changchao/founder_vue into dev_xzeq

src/api/yzzfzxsyp/tj.js

@@ -9,6 +9,9 @@ export const xyrXzqhTj = params =>
 export const xsSjdqTj = params =>
     post(`${base.alyIP}/xsfltj/xsSjdqTj`, params);
 
+//案发地区统计
+export const asjfsdXzqhTj = params =>
+    post(`${base.alyIP}/xsfltj/asjfsdXzqhTj`, params);
 
 
 

src/components/ptCxForm_components.vue

@@ -839,9 +839,9 @@
               pageBs == 'wscdajtj' ||
               pageBs == 'jszls' ||
               pageBs == 'queryCheckBj' ||
-              pageBs != 'queryZj' ||
-              pageBs != 'queryWl' ||
-              pageBs != 'queryDx'
+              pageBs == 'queryZj' ||
+              pageBs == 'queryWl' ||
+              pageBs == 'queryDx'
             )
           "
         >

src/router/modules/yzzfzxsyp.js

@@ -24,6 +24,14 @@ const menuLayouts = [
     },
     component: () => import("@/views/yzzfzxsyp/xstj/xyrhjtj.vue")
   },
+  {
+    path: "/afdtj",
+    name: "afdtj",
+    meta: {
+      title: '案发地统计'
+    },
+    component: () => import("@/views/yzzfzxsyp/xstj/afdtj.vue")
+  },
 ];
 
 export default {

src/views/yzzfzxsyp/thxs/queryThxs.vue

@@ -188,6 +188,14 @@ export default {
               className: "iconfont icongongnengfuwu",
               disabled: false,
             },
+            {
+              id: "afdtj",
+              label: "案发地统计",
+              index: "afdtj",
+              auth: "M0102",
+              className: "iconfont icongongnengfuwu",
+              disabled: false,
+            },
           ],
         },
       ],

src/views/yzzfzxsyp/xstj/afdtj.vue

+<template>
+  <div id="afdtj">
+    <el-button
+      type="primary"
+      size="mini"
+      class="returnBtn"
+      @click="historyCharts"
+      v-if="historyArr.length > 1 && type == 'map'"
+      >返回上层</el-button
+    >
+    <div
+      id="charts"
+      ref="charts"
+      v-show="type == 'map'"
+      v-loading="loading"
+    ></div>
+  </div>
+</template>
+<script>
+import { asjfsdXzqhTj } from "@/api/yzzfzxsyp/tj.js";
+export default {
+  data() {
+    return {
+      pageBs: "afdtj",
+      historyArr: [],
+      type: "map",
+      loading: false,
+      Menu: [
+        {
+          id: "afdtj",
+          label: "案发地统计",
+          index: "afdtj",
+          auth: "M0101",
+          className: "iconfont iconrizhi",
+          disabled: false,
+        },
+      ],
+    };
+  },
+  methods: {
+    //初始化echarts以及添加点击事件
+    getCharts(x, data, rotate) {
+      let self = this;
+      let myChart = this.$echarts.init(this.$refs.charts);
+      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",
+            },
+            axisLabel: {
+              formatter: function (a, b) {
+                return x[b].name;
+              },
+              color: "#000",
+              width: 100,
+              clickable: true,
+              rotate: rotate,
+            },
+            silent: false,
+            triggerEvent: true,
+            splitLine: {
+              show: false,
+            },
+            boundaryGap: true,
+            data: x,
+            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: data,
+            barWidth: "35px",
+            itemStyle: {
+              normal: {
+                color: "#247FDC",
+              },
+            },
+          },
+        ],
+      });
+      //自适应
+      window.addEventListener("resize", () => {
+        myChart.resize();
+      });
+      ///3、在渲染点击事件之前先清除点击事件
+      myChart.off("click");
+      myChart.on("click", function (params) {
+        //点击文字下钻
+        let dm = params.data.dm;
+        //调用接口
+        self.getChartsData(dm);
+      });
+    },
+    //点击返回上一层事件
+    historyCharts() {
+      if (this.historyArr.length == 1) {
+        this.$message.warning("无法返回");
+        return;
+      }
+      let obj = this.historyArr[this.historyArr.length - 2];
+      this.getCharts(obj.x, obj.data, obj.rotate);
+      this.historyArr.pop();
+    },
+    //下钻处理接口事件
+    getChartsData(xzqhdm) {
+      this.loading = true;
+      asjfsdXzqhTj({
+        xzqhdm: xzqhdm ? xzqhdm : "",
+      }).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.xzqhmc,
+              value: i.xzqhdm,
+            }));
+            let data = res.data.rows.map((i) => ({
+              name: i.xzqhmc,
+              value: i.count,
+              dm: i.xzqhdm,
+            }));
+            //添加到histoy数组
+            this.historyArr.push({ x: xData, data: data });
+            //刷新图
+            this.getCharts(xData, data);
+          } else {
+            this.$message.warning("没有下一层了");
+          }
+        }
+      });
+    },
+  },
+  mounted() {
+    //初始化图形
+    this.getChartsData();
+  },
+  created() {
+    this.$store.commit("user/SET_Menu", this.Menu);
+  },
+};
+</script>
+<style lang="scss" scoped>
+#afdtj {
+  width: 100%;
+  height: calc(100% - 48px);
+  box-sizing: border-box;
+  padding: 20px;
+  position: relative;
+  #charts {
+    background-color: #fff;
+    width: 100%;
+    height: 100%;
+  }
+  #table {
+    box-sizing: border-box;
+    padding-top: 1px !important;
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    padding: 20px;
+  }
+  .returnBtn {
+    position: absolute;
+    top: 30px;
+    right: 40px;
+    z-index: 111;
+  }
+  .tableTitle {
+    display: flex;
+    justify-content: space-between;
+    padding: 10px 10px;
+    > .tableLeft {
+      font-size: 16px;
+      font-weight: 600;
+      span {
+        &:last-of-type {
+          font-size: 14px;
+          font-weight: 400;
+          margin-left: 20px;
+          color: #999999;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file