顶部区域下拉框选择

src/App.vue

@@ -13,11 +13,11 @@ export default {
   watch: {
     "$i18n.locale": "i18nHandle",
   },
-  created () {
+  created() {
     this.i18nHandle(this.$i18n.locale);
   },
   methods: {
-    i18nHandle (val, oldVal) {
+    i18nHandle(val, oldVal) {
       localStorage.setItem("language", val);
       document.querySelector("html").setAttribute("lang", val);
       document.title = messages[val].brand.lg;
@@ -26,7 +26,7 @@ export default {
         window.location.reload();
       }
     },
-    refreshView () {
+    refreshView() {
       // In order to make the cached page re-rendered
       this.$store.dispatch("delAllCachedViews", this.$route);
 
@@ -41,7 +41,7 @@ export default {
     ...mapActions(["setClientHeight", "setSize", "setResolution", "setEnv"]),
   },
   computed: {},
-  mounted () {
+  mounted() {
     console.log("开始：：：：" + localStorage.getItem("userType"));
     if (!localStorage.getItem("userType")) {
       localStorage.setItem("userType", "oper");
@@ -155,7 +155,7 @@ export default {
     position: relative;
     max-height: 83vh;
     box-sizing: border-box;
-    padding: 0 0 16px ;
+    padding: 0 0 16px;
     .dialog-h-content {
       max-height: calc(83vh - 80px);
       box-sizing: border-box;
@@ -226,4 +226,22 @@ export default {
 * {
   @include scrollBar;
 }
+.selectPopClass {
+  border: none !important;
+  background: linear-gradient(180deg, #05326e 0%, #032a5d 100%) !important;
+  .el-select-dropdown__item {
+    color: #fff !important;
+    background: #05326e !important;
+  }
+  dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    background: #032a5d !important;
+  }
+  .popper__arrow {
+    border: none !important;
+    &::after {
+      border-bottom-color: #05326e !important;
+    }
+  }
+}
 </style>

src/assets/css/workflow.scss

@@ -990,7 +990,7 @@ html {
     position: absolute;
     height: 5px;
     width: 50%;
-    background-color: #00023a;
+    background-color: #00143C;
     top: -4px
 }
 

src/assets/scss/dataBoardMain.scss

@@ -7,8 +7,8 @@
 
 .g-pg {
     position: relative;
-    // background-image: url(../images/home/bg.png);
-    background-color: #00023a;
+    background-image: url(../images/home/bg.png);
+    // background-color: #00023a;
     background-repeat: no-repeat;
     background-size: 100% 100%;
 }
@@ -79,6 +79,22 @@
         -webkit-text-fill-color: transparent;
     }
 
+    .selectArea {
+        position: absolute;
+        left: 480px;
+        width: 120px;
+        right: 0;
+        top: 20px;
+
+        ::v-deep .el-input__inner {
+            height: 32px !important;
+            border-radius: 16px !important;
+            border: none !important;
+            color: #fff !important;
+            background: linear-gradient(180deg, #05326E 0%, #032A5D 100%) !important;
+        }
+    }
+
     .btn-back {
         position: absolute;
         top: 52px;

src/js/store/index.js

@@ -4,6 +4,7 @@ import cloneDeep from "lodash/cloneDeep";
 import user from "./modules/user";
 import app from "./modules/app";
 import tagsView from "./modules/tagsView";
+import chooseArea from "./modules/chooseArea";
 import categoryStr from "./modules/categoryStr";
 import { requestPost } from "@/js/dai/request";
 import { dateFormats } from "@/utils/index";
@@ -23,12 +24,12 @@ export default new Vuex.Store({
     sidebarMenuList: [],
     sidebarMenuActiveName: "",
     LevelOneMenuActiveName: "",
-    LevelTowMenuActiveName:"",
+    LevelTowMenuActiveName: "",
     sidebarActiveSubMenuList: [],
     // 内容, 是否需要刷新
     contentIsNeedRefresh: false,
     // 内容, 标签页(默认添加首页)
-    contentTabs: [{name:"home",title:"首页"}],
+    contentTabs: [{ name: "home", title: "首页" }],
     contentTabsActiveName: "",
 
     mainShuju: {
@@ -47,6 +48,7 @@ export default new Vuex.Store({
     app,
     tagsView,
     categoryStr,
+    chooseArea,
   },
   mutations: {
     // 重置vuex本地储存状态
@@ -70,10 +72,7 @@ export default new Vuex.Store({
     },
     setInterval({ commit, dispatch, state }) {
       interTimer = setInterval(() => {
-        const _t = dateFormats(
-          "YYYY-mm-dd HH:MM",
-          new Date(new Date().toLocaleDateString()).getTime()
-        );
+        const _t = dateFormats("YYYY-mm-dd HH:MM", new Date(new Date().toLocaleDateString()).getTime());
         const _tt = new Date(_t).getTime();
         console.log("230000---", _t);
         const t = dateFormats("YYYY-mm-dd HH:MM", new Date().getTime());

src/js/store/modules/chooseArea.js

@@ -0,0 +1,22 @@
+const state = {
+  chooseName: "金湖路社区",
+};
+
+const mutations = {
+  CHOOSE_NAME: (state, name) => {
+    state.chooseName = name;
+  },
+};
+
+const actions = {
+  chooseName({ commit }, name) {
+    commit("CHOOSE_NAME", name);
+  },
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+};

src/views/dataBoard/organizational/dangTree/index.vue

@@ -48,8 +48,14 @@ export default {
       nodeConfig: {},
     };
   },
+  watch: {
+    "$store.state.chooseArea.chooseName"(n, v) {
+      console.log(n);
+    },
+  },
   computed: {},
   mounted() {
+    console.log(this.$store.state.chooseArea.chooseName);
     this.getTreeData();
   },
   methods: {

src/views/dataBoard/organizational/personnel/index.vue

@@ -54,13 +54,9 @@ export default {
           path: "/organizational/dangTree",
           name: "党组织架构",
         },
-        {
-          path: "/organizational/orgPersonnel",
-          name: "居民画像",
-        },
         {
           path: "",
-          name: "",
+          name: "居民画像",
         },
       ],
     };

src/views/dataBoardMain/main-content.vue

@@ -3,27 +3,19 @@
     <!-- tab展示内容 -->
     <template>
       <template v-if="tabIsIframe($router.currentRoute.meta.iframeURL)">
-				<iframe :src="
-            $router.currentRoute.meta.iframeURL +
-            '?token=' +
-            token +
-            '&customerId=' +
-            customerId
-          " ref="iframe" class="m-iframe" id="iframe" width="100%" height="100%" frameborder="0" scrolling="yes"
-					:style="{ height: $store.state.fixed1920.height - 100 + 'px' }" />
+        <iframe :src="$router.currentRoute.meta.iframeURL + '?token=' + token + '&customerId=' + customerId" ref="iframe" class="m-iframe" id="iframe" width="100%" height="100%" frameborder="0" scrolling="yes" :style="{ height: $store.state.fixed1920.height - 100 + 'px' }" />
       </template>
       <keep-alive v-show="!tabIsIframe($router.currentRoute.meta.iframeURL)">
-				<router-view @changeCustomerName="changeCustomerName" />
+        <router-view ref="reloadPage" @changeCustomerName="changeCustomerName" />
       </keep-alive>
     </template>
   </main>
 </template>
 <script>
-	import {
-		isURL
-	} from "@/utils/validate";
-	import Cookie from "js-cookie";
-	export default {
+import { isURL } from "@/utils/validate";
+import Cookie from "js-cookie";
+export default {
+  props: ["name"],
   data() {
     return {
       iframeUrl: "",
@@ -37,6 +29,7 @@
     // },
   },
   created() {
+    // console.log("name", this.name);
     this.token = localStorage.getItem("token");
     this.customerId = localStorage.getItem("customerId");
   },
@@ -58,16 +51,15 @@
     },
     // tabs, 选中tab
     tabSelectedHandle(tab) {
-				tab = this.$store.state.contentTabs.filter(
-					(item) => item.name === tab.name)[0];
+      tab = this.$store.state.contentTabs.filter((item) => item.name === tab.name)[0];
       if (tab) {
         this.$router.push({
           name: tab.name,
           params: {
-							...tab.params
+            ...tab.params,
           },
           query: {
-							...tab.query
+            ...tab.query,
           },
         });
       }
@@ -77,8 +69,7 @@
       if (tabName === "home") {
         return false;
       }
-				this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-					(item) => item.name !== tabName);
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter((item) => item.name !== tabName);
       if (this.$store.state.contentTabs.length <= 0) {
         this.$store.state.sidebarMenuActiveName = this.$store.state.contentTabsActiveName = "home";
         return false;
@@ -89,30 +80,28 @@
         this.$router.push({
           name: tab.name,
           params: {
-							...tab.params
+            ...tab.params,
           },
           query: {
-							...tab.query
+            ...tab.query,
           },
         });
       }
     },
     // tabs, 关闭其它
     tabsCloseOtherHandle() {
-				this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-					(item) => {
-						return (item.name === "home" || item.name === this.$store.state.contentTabsActiveName);
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter((item) => {
+        return item.name === "home" || item.name === this.$store.state.contentTabsActiveName;
       });
     },
     // tabs, 关闭全部
     tabsCloseAllHandle() {
-				this.$store.state.contentTabs = this.$store.state.contentTabs.filter(
-					(item) => item.name === "home");
+      this.$store.state.contentTabs = this.$store.state.contentTabs.filter((item) => item.name === "home");
       this.$router.push({
-					name: "home"
+        name: "home",
       });
     },
   },
-	};
+};
 </script>
 <style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style>

src/views/dataBoardMain/main-navbar.vue

@@ -4,6 +4,11 @@
       <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-select>
+    </div>
     <!-- <div class="btn-back" @click="toPage('/')">
 			<img class="z-default" src="~@/assets/images/shuju/main/back.png" />
 			<img class="z-on" src="~@/assets/images/shuju/main/back-on.png" />
@@ -162,10 +167,33 @@ export default {
       showWeek: "",
       showTime: "",
       showMonth: "",
+      value: "",
       weather: {
         weather: "晴",
         temperature: "--",
       },
+      options: [
+        {
+          value: "选项1",
+          label: "黄金糕",
+        },
+        {
+          value: "选项2",
+          label: "双皮奶",
+        },
+        {
+          value: "选项3",
+          label: "蚵仔煎",
+        },
+        {
+          value: "选项4",
+          label: "龙须面",
+        },
+        {
+          value: "选项5",
+          label: "北京烤鸭",
+        },
+      ],
     };
   },
   components: {
@@ -214,7 +242,7 @@ export default {
     },
 
     goBack() {
-      history.go(-1);
+      this.$router.push("/main/home");
     },
     // 通过menuId与动态(菜单)路由进行匹配跳转至指定路由
     gotoRouteHandle(menuId, idx) {
@@ -241,7 +269,11 @@ export default {
         // return this.$message.error("网络错误");
       }
     },
+
+    setSelectName(name) {
+      this.$store.dispatch("chooseArea/chooseName", name);
+    },
   },
 };
 </script>
-<style lang="scss" src="@/assets/scss/dataBoardMain.scss" scoped></style>
+<style lang="scss" scoped src="@/assets/scss/dataBoardMain.scss"></style>

src/views/dataBoardMain/main.vue

@@ -22,7 +22,7 @@
           :style="{
             minHeight: $store.state.fixed1920.height - 100 + 'px',
           }">
-          <main-content v-if="!$store.state.contentIsNeedRefresh" @changeCustomerName="changeCustomerName" />
+          <main-content v-if="!$store.state.contentIsNeedRefresh" @changeCustomerName="changeCustomerName" name="1233223" />
         </div>
       </template>
     </div>