组织架构

src/components/GridTree/nodeWrap.vue

@@ -0,0 +1,268 @@
+<template>
+  <div>
+    <div class="node-wrap" v-if="nodeConfig.laneLevel === 1">
+      <div class="node-wrap-box">
+        <div class="node-box-after">
+          <div class="nodeBoxTop">
+            <nameSplit :item="nodeConfig" areaName="organizationName" peopleName="name" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="branch-wrap">
+      <div class="branch-box-wrap">
+        <div class="branch-box">
+          <div class="col-box" v-for="(item, index) in nodeConfig.children" :key="index">
+            <div class="condition-node">
+              <div class="condition-node-box">
+                <div class="auto-judge">
+                  <div v-if="getOnerSixLevelFlag(item)">
+                    <div :class="[item.children && item.children.length > 0 ? 'wgdzbHover' : 'wgdzb']">
+                      <nameSplit :item="item" areaName="organizationName" peopleName="name" />
+                    </div>
+                    <div v-if="item._children" style="text-align: center; cursor: pointer" @click="getChildrenData(item, index, nodeConfig.children)">
+                      <img style="width: 16px; height: 16px;margin-left: 50px;" v-if="item.children && item.children.length > 0" :src="require('@/assets/images/home/sh.png')" alt="" />
+                      <img style="width: 16px; height: 16px;margin-left: 50px;" v-else :src="require('@/assets/images/home/zk.png')" alt="" />
+                    </div>
+                  </div>
+                  <div v-if="item.level === 'building_chief'">
+                    <div :class="[item.children && item.children.length > 0 ? 'lydxzHover' : 'lydxz']">
+                      <nameSplit :item="item" areaName="organizationName" peopleName="name" />
+                    </div>
+                    <div v-if="item._children" style="text-align: center; cursor: pointer" @click="getChildrenData(item, index, nodeConfig.children)">
+                      <img style="width: 16px; height: 16px;margin-left: 50px;"  v-if="item.children && item.children.length > 0" :src="require('@/assets/images/home/sh.png')" alt="" />
+                      <img style="width: 16px; height: 16px;margin-left: 50px;"  v-else :src="require('@/assets/images/home/zk.png')" alt="" />
+                    </div>
+                  </div>
+                  <div v-if="item.level === 'unit_chief'">
+                    <div @click="gotoPersonnel(item)" :class="[item.categoryWarn === 'red' ? 'dyzxhRed' : item.categoryWarn === 'yellow' ? 'dyzxhYellow' : item.categoryWarn === 'green' ? 'dyzxhGreen' : '', item.children && item.children.length > 0 ? 'dyzxhHover' : 'dyzxh']" :title="item.organizationName">
+                      <!-- {{ spliceNameFun(item.organizationName, 3) }} -->
+                      {{ item.organizationName }}
+                    </div>
+                    <div v-if="item._children" style="text-align: center; cursor: pointer" @click="getChildrenData(item, index, nodeConfig.children)">
+                      <img style="width: 16px; height: 16px;margin-left: 50px;"  v-if="item.children && item.children.length > 0" :src="require('@/assets/images/home/sh.png')" alt="" />
+                      <img style="width: 16px; height: 16px;margin-left: 50px;"  v-else :src="require('@/assets/images/home/zk.png')" alt="" />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <nodeWrapGrid v-if="item.children" :nodeConfig.sync="item"></nodeWrapGrid>
+            <template v-if="index == 0">
+              <div class="top-left-cover-line"></div>
+            </template>
+            <template v-if="index == nodeConfig.children.length - 1">
+              <div class="top-right-cover-line"></div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- <nodeWrapGrid v-if="nodeConfig.childNode" :nodeConfig.sync="nodeConfig.childNode"></nodeWrapGrid> -->
+  </div>
+</template>
+<script>
+export default {
+  props: ["nodeConfig"],
+  data() {
+    return {
+      homeTypeArr: [],
+      sixLevelArr: ["province", "city", "district", "street", "community", "grid_manager"],
+    };
+  },
+  mounted() {},
+  computed: {},
+  watch: {},
+  methods: {
+    getAllName(item) {
+      return item;
+    },
+
+    getItemNameArr(str) {
+      return str.split(",").slice(0, 2);
+    },
+
+    spliceNameFun(row, num) {
+      if (row && row.length > num) {
+        return row.substring(0, num) + "...";
+      }
+      return row;
+    },
+
+    getOnerSixLevelFlag(item) {
+      return this.sixLevelArr.includes(item.level);
+    },
+
+    findParentParentId(nodeConfig, pid) {
+      let parentParentId = "";
+      if (nodeConfig.id === pid) {
+        return nodeConfig.pid;
+      } else {
+        if (nodeConfig.children && nodeConfig.children.length > 0) {
+          for (let i = 0; i < nodeConfig.children.length; i++) {
+            parentParentId = this.findParentParentId(nodeConfig.children[i], pid);
+            if (parentParentId) {
+              return parentParentId;
+            }
+          }
+        }
+      }
+    },
+    getChildrenData(item, idx, arr) {
+      arr.forEach((element, index) => {
+        if (index === idx) {
+          if (element.children) {
+            element._children = element.children;
+            element.children = null;
+          } else {
+            element.children = element._children;
+          }
+        } else {
+          element.children = null;
+        }
+      });
+    },
+    gotoPersonnel(item) {
+      const grandPid = this.findParentParentId(this.nodeConfig, item.pid);
+      const name = item.organizationName ? item.organizationName : "四号楼二单元302";
+      this.$router.push(`/organizational/microgrid/${item.id}/${grandPid}/${name}`);
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+@import "~@/assets/css/workflow.scss";
+@mixin spanLevel {
+  font-size: 14px;
+  color: #fff;
+  word-break: break-all;
+}
+@mixin normalLevel {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+@mixin lastLevel {
+  @include spanLevel;
+  @include normalLevel;
+  height: 137px;
+  width: 30px;
+  margin-top: -12px;
+  background-size: 100%;
+  cursor: pointer;
+  writing-mode: tb-rl;
+  text-orientation: upright;
+}
+
+.name_more {
+  span {
+    &:hover {
+      font-weight: bold;
+      cursor: pointer;
+    }
+  }
+}
+.node-box-after {
+  .nodeBoxTop {
+    font-size: 14px;
+    cursor: pointer;
+    position: relative;
+    color: #fff;
+    display: inline-block;
+    width: 168px;
+    height: 164px;
+    padding-top: 10px;
+    text-align: center;
+    background-image: url(~@/assets/images/home/firstLevel.png);
+    background-size: 100%;
+    div:nth-child(2) {
+      cursor: pointer;
+    }
+  }
+}
+.auto-judge {
+  .wgdzb {
+    @include spanLevel;
+    min-width: 120px;
+    height: 126px;
+    text-align: center;
+    padding-top: 9px;
+    background-image: url(~@/assets/images/home/zbbg.png);
+    background-repeat: no-repeat;
+    background-position: center;
+    // background-size: 100%;
+  }
+  .wgdzbHover {
+    @include spanLevel;
+    min-width: 120px;
+    height: 126px;
+    text-align: center;
+    padding-top: 9px;
+    background-image: url(~@/assets/images/home/zbbgClick.png);
+    // background-size: 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  .lydxz {
+    @include spanLevel;
+    // @include normalLevel;
+    text-align: center;
+    min-width: 120px;
+    height: 126px;
+    padding-top: 25px;
+    background-image: url(~@/assets/images/home/lydxzTree.png);
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  .lydxzHover {
+    @include spanLevel;
+    // @include normalLevel;
+    text-align: center;
+    min-width: 120px;
+    height: 126px;
+    padding-top: 25px;
+    background-image: url(~@/assets/images/home/lydxzClick.png);
+    background-repeat: no-repeat;
+    background-position: center;
+  }
+  .dyzxh {
+    @include lastLevel;
+    background-image: url(~@/assets/images/home/dyzxhTree.png);
+    background-repeat: no-repeat;
+  }
+  .dyzxhHover {
+    @include lastLevel;
+    background-image: url(~@/assets/images/home/dyzxhClick.png);
+    background-repeat: no-repeat;
+  }
+
+  .dyzxhGreen {
+    @include lastLevel;
+    background-image: url(~@/assets/images/home/gridGreen.png);
+    background-repeat: no-repeat;
+  }
+  .dyzxhRed {
+    @include lastLevel;
+    background-image: url(~@/assets/images/home/gridRed.png);
+    background-repeat: no-repeat;
+  }
+  .dyzxhYellow {
+    @include lastLevel;
+    background-image: url(~@/assets/images/home/gridYellow.png);
+    background-repeat: no-repeat;
+  }
+  .lxjt {
+    @include spanLevel;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    height: 137px;
+    width: 30px;
+    writing-mode: tb-rl;
+    margin-top: -12px;
+    background-image: url(~@/assets/images/home/dyzxhTree.png);
+    background-repeat: no-repeat;
+  }
+}
+</style>

src/components/NameSplit/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="node-com">
+    <div v-if="!flag" class="nodeTitle" :title="getAllName(item[areaName])">{{ spliceNameFun(item[areaName], 7) }}</div>
+    <div class="name_more peoName" v-if="item[peopleName] && !item[peopleName].includes(',')" @click="gotoPersonnel(item.resiId)" :title="getAllName(item[peopleName])">{{ spliceNameFun(item[peopleName], 12) }}</div>
+    <div class="name_more" v-if="item[peopleName] && item[peopleName].includes(',')">
+      <span v-for="(i, k) in getItemNameArr(item[peopleName])" :key="i" @click="gotoPersonnel(item.resiId.split(',')[k])" :title="getAllName(i)">{{ spliceNameFun(i, 12) }}{{ k === getItemNameArr(item[peopleName]).length - 1 ? "" : "," }}</span>
+      <!-- 多个人员展示 -->
+      <!-- <popTips :item="item" :pageName="pageName" /> -->
+    </div>
+    <div v-if="item.partyOrgLevel < 9" class="peoPosition peoName">({{ getPeopositionMap(item.partyOrgLevel) }})</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NameSplit",
+  props: {
+    item: {
+      type: Object,
+      default: () => {},
+    },
+    areaName: {
+      type: String,
+      default: "partyOrgName",
+    },
+    peopleName: {
+      type: String,
+      default: "principalName",
+    },
+    flag: {
+      type: Boolean,
+      default: false,
+    },
+    pageName: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    getAllName(item) {
+      return item;
+    },
+
+    getItemNameArr(str) {
+      return str.split(",").slice(0, 1);
+    },
+
+    spliceNameFun(row, num) {
+      return row.substring(0, num);
+    },
+    gotoPersonnel(id) {
+      if (id) {
+        this.$router.push({ path: `/organizational/orgPersonnel/${this.pageName}`, query: { user_id: id } });
+      } else {
+        this.$message.error("该人员暂无居民信息！");
+      }
+    },
+    getPeopositionMap(type) {
+      const positionMap = new Map([
+        [1, "省委"],
+        [2, "市委"],
+        [3, "区委书记"],
+        [4, "党工委书记"],
+        [5, "党委书记"],
+        [6, "党总支书记"],
+        [7, "支部书记"],
+        [8, "组长"],
+      ]);
+      return positionMap.get(type);
+    },
+  },
+};
+</script>
+
+<style scope lang="scss">
+.node-com {
+  // padding: 0 12px;
+  .nodeTitle {
+    font-size: 16px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+  }
+  .peoName {
+    font-size: 14px;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+    opacity: 0.8;
+  }
+  .name_more {
+    cursor: pointer;
+    span {
+      &:hover {
+        font-weight: bold;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>

src/main.js

@@ -9,6 +9,8 @@ import elementUI from 'element-ui'
 import 'style/theme/index.css'
 import 'directives'
 import Moment from "moment";
+import NodeWrapGrid from "components/GridTree/nodeWrap.vue";
+import NameSplit from "components/NameSplit/index.vue";
 
 import scroll from 'vue-seamless-scroll'; //滚动
 Moment.locale("zh-cn");
@@ -18,7 +20,8 @@ Vue.prototype.$EventBus = new Vue()
 // if (process.env.NODE_ENV === 'development') {
 //   (() => import('element-ui/lib/theme-chalk/index.css'))()
 // }
-
+Vue.component("nodeWrapGrid", NodeWrapGrid);
+Vue.component("nameSplit", NameSplit);
 Vue.use(elementUI, { size: 'small' })
 Vue.use(scroll)
 

src/store/modules/dialog.js

@@ -5,6 +5,7 @@ export default {
     talents: false, // 种都移风-专家墙
     qyjj:false, // 种都移风-企业简介
     ldgh:false, // 种都移风-领导关怀
+    organization:false, // 红色移风-组织架构
   },
   mutations: {
     set_yfcj(state, visible) {
@@ -22,6 +23,9 @@ export default {
     set_ldgh(state, visible) {
       state.ldgh = visible
     },
+    set_organization(state, visible) {
+      state.organization = visible
+    },
   },
   actions: {
     SET_YFCJ(context, visible) {
@@ -33,6 +37,9 @@ export default {
     SET_TALENTS(context, visible) {
       context.commit('set_talents', visible)
     },
+    SET_ORGANIZATION(context, visible) {
+      context.commit('set_organization', visible)
+    },
     SET_QYJJ(context, visible){
       context.commit('set_qyjj', visible)
     },
@@ -44,6 +51,7 @@ export default {
       context.commit('set_yfcj', false)
       context.commit('set_garden', false)
       context.commit('set_talents', false)
+      context.commit('set_organization', false)
       context.commit('set_qyjj', false)
       context.commit('set_ldgh', false)
       if (type === 'buildLeaderAttach') {
@@ -52,6 +60,8 @@ export default {
         context.commit('set_garden', true)
       } else if (type === 'talents') {
         context.commit('set_talents', true)
+      } else if (type === 'organization') {
+        context.commit('set_organization', true)
       }else if (type === 'qyjj') {
         context.commit('set_qyjj', true)
       }else if (type === 'ldgh') {
@@ -64,6 +74,7 @@ export default {
     garden: state => state.garden,
     talents: state => state.talents,
     qyjj: state => state.qyjj,
+    organization: state => state.organization,
     ldgh: state => state.ldgh
   }
 }

src/views/next/index.vue

@@ -17,6 +17,7 @@
     <ZdyfLeftYfcj />
     <ZdyfRightGarden />
     <ZdyfRightTalents />
+    <HsyfLeftOrganization />
     <ZdyfCenterQyjj />
     <ZdyfLeftldgh />
   </div>
@@ -33,6 +34,7 @@ import ScreenContentRight from './screen-content-right'
 import ZdyfLeftYfcj from './dialog-module/zdyf-left/yfcj'
 import ZdyfRightGarden from './dialog-module/zdyf-right/kyll/garden.vue'
 import ZdyfRightTalents from './dialog-module/zdyf-right/kyll/talents.vue'
+import HsyfLeftOrganization from './dialog-module/hsyf-left/organization/organization.vue'
 import ZdyfCenterQyjj from './dialog-module/zdyf-center/qyjj'
 import ZdyfLeftldgh from './dialog-module/zdyf-left/ldgh'
 
@@ -59,7 +61,8 @@ export default {
     ZdyfRightTalents,
     ZdyfRightGarden,
     ZdyfCenterQyjj,
-    ZdyfLeftldgh
+    ZdyfLeftldgh,
+    HsyfLeftOrganization
   },
   beforeRouteEnter(to, from, next) {
     if (window.location.search) {

src/views/next/screen-content-left/hsyf-left/index.vue

@@ -4,7 +4,7 @@
                 <div class='card h292'>
                         <screen-title>
                                 <div slot="left" class="screen-title-left">组织建设</div>
-                                <div slot="right" class="screen-title-right"><span>组织架构</span></div>
+                                <div slot="right" class="screen-title-right"  @click="handelClickOrg"><span>组织架构</span></div>
                         </screen-title>
                         <div class="card-item-zzjs">
                                 <div class="top">
@@ -66,6 +66,7 @@
 </template>
 
 <script>
+import { mapActions } from 'vuex'
 export default {
         data() {
                 return {
@@ -175,6 +176,13 @@ export default {
         beforeDestroy() {
         },
         methods: {
+                ...mapActions({
+                        // set_garden: 'SET_GARDEN',
+                        set_organization: 'SET_ORGANIZATION'
+                }),
+                handelClickOrg() {
+                        this.set_organization(true)
+                },
                 initChart() {
                         //构建3d饼状图
                         let myChart = echarts.init(document.getElementById('charts'));