地图下钻 用户复审禁用用户退出

src/page/accounts/recheck.vue

@@ -57,6 +57,7 @@
 import { partyPagination } from "@/components/index";
 import checkTable from "./components/checkTable";
 import { rejectDialog } from "./checkDialog/index";
+import { loginOut } from "@/config/loginOut";
 export default {
   data() {
     return {
@@ -184,7 +185,6 @@ export default {
           url: "audit/update",
           authType: this.backToken,
         },
-        //  _this.$qs.stringify(params)
         params
       )
         .then((res) => {
@@ -194,7 +194,18 @@ export default {
                 type: "success",
                 message: res.data.message,
               });
+               debugger;
+              if (_this.activeRow.status === "TBCA") {
+                _this.$message({
+                  message: "5s之后该账号退出登录",
+                  type: "warning",
+                });
+                setTimeout(() => {
+                  _this.logoutUser(params.refItemId);
+                }, 5000);
+              }
               this.getPageList();
+             
             } else {
               this.$message.error(res.data.message);
             }
@@ -206,6 +217,15 @@ export default {
           console.log(res);
         });
     },
+    // 复审通过之后 调用退出
+    logoutUser(id) {
+      let _this = this;
+      _this.$https({
+        method: "get",
+        url: `logoutUser?id=${id}`,
+        authType: this.backToken,
+      });
+    },
     // 翻页
     handleChangeCurrent(val) {
       this.page._index = val;

src/page/statistics/components/maps copy.vue

+<template>
+  <div id="mapDiv"></div>
+</template>
+
+<script>
+// import "echarts/map/js/china";
+import echarts from 'echarts'
+import { chinaJson } from "@/map/china";
+echarts.registerMap("china", chinaJson);
+export default {
+  name: "maps",
+  data() {
+    return {
+      dataList: [],
+    };
+  },
+  mounted() {
+    this.getList();
+  },
+  methods: {
+    getList() {
+      this.$https({
+        method: "post",
+        url: "tBoardStatistic/getBoardProvincePlayTotalList",
+        authType: this.backToken,
+      })
+        .then((res) => {
+          if (res.status == 200) {
+            if (res.data.resultCode == 200) {
+              this.dataList = res.data.data;
+            } else {
+              this.dataList = [];
+            }
+          } else {
+            this.dataList = [];
+          }
+          this.init();
+        })
+        .catch((err) => {
+          this.$message.error(err.message);
+          this.init();
+        });
+    },
+    init() {
+      let option = {
+        tooltip: {
+          triggerOn: "click",
+          formatter: function (e, t, n) {
+            return 0.5 == e.value
+              ? e.name + "：播放量"
+              : e.seriesName + "<br />" + e.name + "：" + e.value;
+          },
+        },
+        visualMap: [
+          {
+            dimension: 0,
+            right: 20,
+            bottom: 20,
+            itemWidth: 16,
+            itemHeight: "200px",
+            orient: "horizontal",
+            text: ["由高到低", "播放量"],
+            backgroundColor: "rgba(0,28,66,0.6)",
+            padding: [15, 10],
+            textStyle: {
+              color: "rgba(255,255,255,1)",
+            },
+            inRange: {
+              color: ["#9B1E23", "#E72128", "#FB8D1F", "#FFCF4E"],
+            },
+          },
+        ],
+        geo: {
+          map: "china",
+          roam: !1,
+          scaleLimit: {
+            min: 1,
+            max: 2,
+          },
+
+          roam: true, //是否开启平游或缩放
+          scaleLimit: {
+            //滚轮缩放的极限控制
+            min: 1,
+            max: 2,
+          },
+
+          zoom: 1,
+          top: 100,
+          left: "10%",
+          label: {
+            normal: {
+              show: !0,
+              fontSize: "12",
+              color: "#fff",
+            },
+          },
+          itemStyle: {
+            normal: {
+              borderColor: "rgba(0, 0, 0, 0.2)",
+            },
+            emphasis: {
+              areaColor: "#f2d5ad",
+              shadowOffsetX: 0,
+              shadowOffsetY: 0,
+              borderWidth: 0,
+            },
+          },
+          regions: [
+            {
+              name: "南海诸岛",
+              itemStyle: {
+                // 隐藏地图
+                normal: {
+                  opacity: 0, // 为 0 时不绘制该图形
+                },
+              },
+              label: {
+                show: false, // 隐藏文字
+              },
+            },
+          ],
+        },
+        series: [
+          {
+            name: "播放量",
+            type: "map",
+            geoIndex: 0,
+            data: this.dataList,
+          },
+        ],
+      };
+      let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
+      echartsDiv.setOption(option);
+    },
+  },
+};
+</script>
+
+<style lang="less">
+#mapDiv {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/page/statistics/components/maps.vue

 <template>
+  <div class="map-box">
+    <span id="back" v-if="parentInfo.length !== 1" @click="handleBack()"
+      >返回</span
+    >
     <div id="mapDiv"></div>
+  </div>
 </template>
 
 <script>
-// import "echarts/map/js/china";
-import echarts from 'echarts'
-import { chinaJson } from "@/map/china";
-echarts.registerMap("china", chinaJson);
+import axios from "axios";
+import echarts from "echarts";
 export default {
   name: "maps",
   data() {
     return {
       dataList: [],
+      show: "province",
+      parentInfo: [
+        {
+          cityName: "全国",
+          code: 100000,
+        },
+      ],
     };
   },
   mounted() {
-    this.getList();
+    this.initData(100000);
   },
   methods: {
-    getList() {
-      this.$https({
+    getList(type, areaCode) {
+      let _this = this;
+      return new Promise((resolve, reject) => {
+        let httpUrl = "";
+        let dataList = [];
+        if (type === "china") {
+          httpUrl = "tBoardStatistic/getBoardProvincePlayTotalList";
+        }
+        if (type === "map") {
+          httpUrl = `tBoardStatistic/getBoardCityPlayTotalList?areaCode=${areaCode}`;
+        }
+        _this
+          .$https({
             method: "post",
-        url: "tBoardStatistic/getBoardProvincePlayTotalList",
-        authType: this.backToken,
+            url: httpUrl,
           })
           .then((res) => {
             if (res.status == 200) {
               if (res.data.resultCode == 200) {
-              this.dataList = res.data.data;
+                dataList = res.data.data;
               } else {
-              this.dataList = [];
+                dataList = [];
               }
             } else {
-            this.dataList = [];
+              dataList = [];
             }
-          this.init();
+            resolve(dataList);
           })
           .catch((err) => {
             this.$message.error(err.message);
-          this.init();
+            resolve([]);
+          });
+      });
+    },
+    initData(adcode) {
+      Promise.all([
+        this.getGeoJson(adcode),
+        this.getList(this.parentInfo.length === 1 ? "china" : "map", adcode),
+      ]).then((res) => {
+        let features = res[0].features;
+        let json = res[1];
+        let flen = features.length;
+        let jlen = json.length;
+        for (let i = 0; i < flen; i++) {
+          for (let j = 0; j < jlen; j++) {
+            let jName = json[j].name.substring(0, 2);
+            if (features[i].properties.name.indexOf(jName) != -1) {
+              features[i].properties.value = json[j].value;
+              break;
+            }
+          }
+        }
+        this.getMapData({ features: features });
       });
     },
-    init() {
+    init(mapData) {
       let option = {
         tooltip: {
           triggerOn: "click",
@@ -71,28 +113,48 @@ export default {
           },
         ],
         geo: {
-          map: "china",
+          map: this.parentInfo.length === 1 ? "china" : "map",
           roam: !1,
-          scaleLimit: {
-            min: 1,
-            max: 2,
-          },
-
           roam: true, //是否开启平游或缩放
           scaleLimit: {
             //滚轮缩放的极限控制
-            min: 1,
-            max: 2,
+            min: 1
           },
 
-          zoom: 1,
+          zoom: 1.1,
           top: 100,
-          left: "10%",
+          left: "20%",
           label: {
             normal: {
               show: !0,
               fontSize: "12",
               color: "#fff",
+              formatter: (p) => {
+                switch (p.name) {
+                  case "内蒙古自治区":
+                    p.name = "内蒙古";
+                    break;
+                  case "西藏自治区":
+                    p.name = "西藏";
+                    break;
+                  case "新疆维吾尔自治区":
+                    p.name = "新疆";
+                    break;
+                  case "宁夏回族自治区":
+                    p.name = "宁夏";
+                    break;
+                  case "广西壮族自治区":
+                    p.name = "广西";
+                    break;
+                  case "香港特别行政区":
+                    p.name = "香港";
+                    break;
+                  case "澳门特别行政区":
+                    p.name = "澳门";
+                    break;
+                }
+                return p.name;
+              },
             },
           },
           itemStyle: {
@@ -126,20 +188,95 @@ export default {
             name: "播放量",
             type: "map",
             geoIndex: 0,
-            data: this.dataList,
+            data: mapData,
           },
         ],
       };
       let echartsDiv = this.$echarts.init(document.getElementById("mapDiv"));
       echartsDiv.setOption(option);
+      echartsDiv.on("click", this.echartsMapClick);
+    },
+    handleBack() {
+      if (this.parentInfo.length === 1) {
+        return;
+      }
+      this.parentInfo.pop();
+      this.initData(this.parentInfo[this.parentInfo.length - 1].code);
+    },
+    echartsMapClick(params) {
+      if (!params.data) {
+        return;
+      }
+      if (params.data.level === "district") {
+        return false;
+      }
+      let cityCode = params.data.cityCode;
+      this.parentInfo.push({
+        cityName: params.data.name,
+        code: params.data.cityCode,
+      });
+      this.initData(cityCode);
+    },
+    getGeoJson(adcode) {
+      return new Promise((resolve, reject) => {
+        axios({
+          method: "get",
+          url: `/static/feature/${adcode}_full.json`,
+        }).then((res) => {
+          let mapJson = {
+            features: res.data.features,
+          };
+          resolve(mapJson);
+        });
+      });
+    },
+    getMapData(geoJson) {
+      // 获取后台接口数据
+      let Json = geoJson.features;
+      let mapData = Json.map((item) => {
+        return {
+          name: item.properties.name,
+          value: item.properties.value,
+          level: item.properties.level,
+          cityCode: item.properties.adcode,
+        };
+      });
+      let mapJson = {};
+      //geoJson必须这种格式
+      mapJson.features = Json;
+      //去渲染echarts
+      this.initEcharts(mapData, mapJson);
+    },
+    initEcharts(mapData, mapJson) {
+      echarts.registerMap(
+        this.parentInfo.length === 1 ? "china" : "map",
+        mapJson
+      );
+      this.init(mapData);
     },
   },
 };
 </script>
 
 <style lang="less">
-#mapDiv {
+.map-box {
   width: 100%;
   height: 100%;
+  #back {
+    position: absolute;
+    font-size: 16px;
+    color: #775858;
+    left: 60px;
+    top: 140px;
+    cursor: pointer;
+    z-index: 99;
+    &:hover {
+      color:#9B1E23;
+    }
+  }
+  #mapDiv {
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>