对接导航下拉

src/js/store/modules/chooseArea.js

@@ -1,22 +1,25 @@
 const state = {
-  chooseName: "",
+    chooseName: {
+        orgId: '',
+        level: '',
+    },
 };
 
 const mutations = {
-  CHOOSE_NAME: (state, name) => {
-    state.chooseName = name;
-  },
+    CHOOSE_NAME: (state, name) => {
+        state.chooseName = name;
+    },
 };
 
 const actions = {
-  chooseName({ commit }, name) {
-    commit("CHOOSE_NAME", name);
-  },
+    chooseName({commit}, name) {
+        commit("CHOOSE_NAME", name);
+    },
 };
 
 export default {
-  namespaced: true,
-  state,
-  mutations,
-  actions,
+    namespaced: true,
+    state,
+    mutations,
+    actions,
 };

src/views/dataBoardMain/main-navbar.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="m-topnav">
     <div class="back" style="cursor: pointer" @click="goBack()">
-      <img src="~@/assets/images/shuju/main/back.png" alt="/" />
+      <img src="~@/assets/images/shuju/main/back.png" alt="/"/>
     </div>
     <div class="title">{{ customerName }}数据智能分析平台</div>
     <div class="selectArea">
       <el-select @change="setSelectName" v-model="value" popper-class="selectPopClass">
-        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+        <el-option v-for="(item,index) in options" :key="item.value" :label="item.label" :value="index"></el-option>
       </el-select>
     </div>
     <!-- <div class="btn-back" @click="toPage('/')">
@@ -26,16 +26,20 @@
       </div>
     </div>-->
     <div class="nav-list">
-      <div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/overview/index' }" @click="toPage('/dataBoard/overview/index')">
+      <div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/overview/index' }"
+           @click="toPage('/dataBoard/overview/index')">
         <span>概览</span>
       </div>
-      <div class="nav-item" :class="{ 'z-on': $route.path.includes('/organizational') }" @click="toPage('/organizational/dangTree')">
+      <div class="nav-item" :class="{ 'z-on': $route.path.includes('/organizational') }"
+           @click="toPage('/organizational/dangTree')">
         <span>组织架构</span>
       </div>
-      <div class="nav-item" :class="{ 'z-on': $route.path.indexOf('/dataBoard/renfang') != -1 }" @click="toPage('/dataBoard/renfang/index')">
+      <div class="nav-item" :class="{ 'z-on': $route.path.indexOf('/dataBoard/renfang') != -1 }"
+           @click="toPage('/dataBoard/renfang/index')">
         <span>人房数据</span>
       </div>
-      <div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/satisfactionEval/index' }" @click="toPage('/dataBoard/satisfactionEval/index')">
+      <div class="nav-item" :class="{ 'z-on': $route.path == '/dataBoard/satisfactionEval/index' }"
+           @click="toPage('/dataBoard/satisfactionEval/index')">
         <span>满意度评价</span>
       </div>
     </div>
@@ -151,11 +155,12 @@
   </div>
 </template>
 <script>
-import { messages } from "@/i18n";
+import {messages} from "@/i18n";
 import UpdatePasswordWork from "@/views/main-navbar-update-password-work";
 import dateFormat from "dai-js/tools/dateFormat";
 import nextTick from "dai-js/tools/nextTick";
-import { requestGet } from "@/js/dai/request";
+import {requestGet} from "@/js/dai/request";
+
 export default {
   inject: ["refresh"],
   data() {
@@ -167,33 +172,12 @@ export default {
       showWeek: "",
       showTime: "",
       showMonth: "",
-      value: "",
+      value: 0,
       weather: {
         weather: "晴",
         temperature: "--",
       },
-      options: [
-        {
-          value: "选项1",
-          label: "黄金糕",
-        },
-        {
-          value: "选项2",
-          label: "双皮奶",
-        },
-        {
-          value: "选项3",
-          label: "蚵仔煎",
-        },
-        {
-          value: "选项4",
-          label: "龙须面",
-        },
-        {
-          value: "选项5",
-          label: "北京烤鸭",
-        },
-      ],
+      options: [],
     };
   },
   components: {
@@ -219,10 +203,51 @@ export default {
       pollTime();
     };
     pollTime();
-    this.getWeatherData();
+    // this.getWeatherData();
   },
   computed: {},
+  mounted() {
+    this.getOrgList()
+  },
   methods: {
+    getOrgList() {
+      let params = {}
+      if (this.options.length) {
+        params = {orgId: this.options[this.value].id, level: this.options[this.value].level}
+      }
+      this.$http.post(`/gov/org/agency/maporg`, params).then(async ({data: {data}}) => {
+        console.log(data, 'data')
+        this.value = 0
+        this.$store.dispatch("chooseArea/chooseName", {
+          orgId: data.id,
+          level: data.level
+        });
+        let children = await this.dealTreeData(data.children)
+        this.options = [{
+          ...data,
+          value: data.id,
+          label: data.name,
+        }, ...children]
+      })
+    },
+    dealTreeData(treeData, level = 0) {
+      const data = treeData.map((item) => ({
+        ...item,
+        value: item.id,
+        label: item.name,
+        children: (item.children && item.children.length)
+            ? this.dealTreeData(item.children, level++)
+            : null,
+      }));
+      return data;
+    },
+    setSelectName(index) {
+      /*      this.$store.dispatch("chooseArea/chooseName", {
+              orgId: this.options[index].id,
+              level: this.options[index].level
+            });*/
+      this.getOrgList()
+    },
     computeCurrentTime() {
       // let now = new Date();
       // let wk = now.getDay();
@@ -259,7 +284,7 @@ export default {
     },
     async getWeatherData() {
       const url = "https://restapi.amap.com/v3/weather/weatherInfo?key=8c87678f34ce9e8e23245c5161991c4e";
-      const { data, code, msg } = await requestGet(url, {
+      const {data, code, msg} = await requestGet(url, {
         city: this.$store.state.user.areaCode,
       });
       if (code === 0) {
@@ -270,9 +295,7 @@ export default {
       }
     },
 
-    setSelectName(name) {
-      this.$store.dispatch("chooseArea/chooseName", name);
-    },
+
   },
 };
 </script>