李扬

master/src/main/resources/application.yml

@@ -9,9 +9,9 @@ ruoyi:
   # 实例演示开关
   demoEnabled: true
   # 文件路径 示例（ Windows配置D:/ruoyi/uploadPath，Linux配置 /data/cpmsfile/uploadPath）
-  profile: D:/ruoyi/uploadPath
+  profile: /data/cpmsfile/uploadPath
   # 邮件中链接跳转路径 示例（本地：http://localhost/#，服务器：http://47.114.101.16:8080/cpms/index.html#）
-  requestJumpPath: http://47.114.101.16:8080/cpms/index.html#
+  requestJumpPath: https://cpms.basf-ypc.net.cn/cpms/index.html#
   # 获取ip地址开关
   addressEnabled: false
   # 验证码类型 math 数组计算 char 字符验证
@@ -93,24 +93,24 @@ spring:
         max-wait: -1ms
   # 邮箱配置
   mail:
-#    host: smtpout.basf-it-services.com
-#    protocol: smtp
-#    default-encoding: UTF-8
-#    password:
-#    username:
-#    port: 25
-#    properties.mail.stmp.socketFactory.class: javax.net.ssl.SSLSocketFactory
-#    properties.mail.debug: true
-#    from: CPMS.byc@BASF-YPC.com.cn
-    host: smtp.exmail.qq.com
+    host: smtpout.basf-it-services.com
     protocol: smtp
     default-encoding: UTF-8
-    password: vvTAT8hciG7FLk4C
-    username: email@seashoreept.com
-    port: 587
+    password:
+    username:
+    port: 25
     properties.mail.stmp.socketFactory.class: javax.net.ssl.SSLSocketFactory
     properties.mail.debug: true
-    from: email@seashoreept.com
+    from: CPMS.byc@BASF-YPC.com.cn
+#    host: smtp.exmail.qq.com
+#    protocol: smtp
+#    default-encoding: UTF-8
+#    password: vvTAT8hciG7FLk4C
+#    username: email@seashoreept.com
+#    port: 587
+#    properties.mail.stmp.socketFactory.class: javax.net.ssl.SSLSocketFactory
+#    properties.mail.debug: true
+#    from: email@seashoreept.com
 # token配置
 token:
     # 令牌自定义标识

ui/package.json

@@ -64,6 +64,7 @@
     "vue-awesome": "^4.0.2",
     "vue-count-to": "1.0.13",
     "vue-cropper": "0.4.9",
+    "vue-draggable-resizable": "^2.3.0",
     "vue-i18n": "7.3.2",
     "vue-router": "3.0.2",
     "vue-splitpane": "1.0.4",

ui/src/assets/iconfont/iconfont.css

@@ -0,0 +1,39 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 2877683 */
+  src: url('iconfont.woff2?t=1634625351781') format('woff2'),
+       url('iconfont.woff?t=1634625351781') format('woff'),
+       url('iconfont.ttf?t=1634625351781') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-triangle:before {
+  content: "\e620";
+}
+
+.icon-plus:before {
+  content: "\e610";
+}
+
+.icon-love:before {
+  content: "\e612";
+}
+
+.icon-star:before {
+  content: "\e613";
+}
+
+.icon-round:before {
+  content: "\e63e";
+}
+
+.icon-square:before {
+  content: "\e650";
+}
+

ui/src/main.js

@@ -34,12 +34,14 @@ import 'vue-awesome/icons/chart-area.js';
 import 'vue-awesome/icons/chart-pie.js';
 import 'vue-awesome/icons/chart-line.js';
 import 'vue-awesome/icons/align-left.js';
+import '@/assets/iconfont/iconfont.css'
+import '@/assets/iconfont/iconfont.js'
 // 适配flex
 
 // 全局注册图标
 Vue.component('icon', Icon);
 // 全局方法挂载
-
+Vue.prototype.bus = new Vue()
 Vue.prototype.getDicts = getDicts
 Vue.prototype.getConfigKey = getConfigKey
 Vue.prototype.parseTime = parseTime

ui/src/views/login.vue

@@ -153,8 +153,8 @@ export default {
   justify-content: center;
   align-items: center;
   height: 100%;
-  //background-image: url("../assets/image/CPMS20210107.jpg");
-  background-image: url("../assets/image/login-background.jpg");
+  background-image: url("../assets/image/CPMS20210107.jpg");
+  //background-image: url("../assets/image/login-background.jpg");
   background-size: cover;
 }
 .title {

ui/src/views/plant/organization/branch.vue

@@ -0,0 +1,271 @@
+<template>
+    <ul :class="{'double': dataArray.length > 4}">
+      <li v-for="(item, index) in dataArray" :key="index" v-if="!item.level">
+        <div class="branch-box" @click.prevent="clickHandle(item)">
+          <div class="branch-title">{{item.label}}</div>
+          <img class="branch-pic" src="@/assets/logo/logo.png">
+          <div class="branch-name">{{item.label}}</div>
+          <div class="bz-box">
+            <i v-if="item.bz1" class="iconfont icon-star"></i>
+            <i v-if="item.bz2" class="iconfont icon-love"></i>
+            <i v-if="item.bz3" class="iconfont icon-triangle"></i>
+            <i v-if="item.bz4" class="iconfont icon-square"></i>
+            <i v-if="item.bz5" class="iconfont icon-plus"></i>
+            <i v-if="item.bz6" class="iconfont icon-round"></i>
+          </div>
+        </div>
+        <template v-if="item.secretary">
+          <ul class="level" v-for="(secretary, se) in item.secretary" :key="se">
+            <template v-for="(child, cIndex) in secretary">
+              <li v-if="child.children" :key="cIndex">
+                <div class="branch-box" @click.prevent="clickHandle(child)">
+                  <div class="branch-title">{{child.label}}</div>
+                  <img class="branch-pic" src="@/assets/logo/logo.png">
+                  <div class="branch-name">{{child.label}}</div>
+                  <div class="bz-box">
+                    <i v-if="child.bz1" class="iconfont icon-star"></i>
+                    <i v-if="child.bz2" class="iconfont icon-love"></i>
+                    <i v-if="child.bz3" class="iconfont icon-triangle"></i>
+                    <i v-if="child.bz4" class="iconfont icon-square"></i>
+                    <i v-if="child.bz5" class="iconfont icon-plus"></i>
+                    <i v-if="child.bz6" class="iconfont icon-round"></i>
+                  </div>
+                </div>
+                <ul :style="{'width': ulWidth + 'px'}">
+                  <li v-for="(schild, chIndex) in child.children" :key="chIndex">
+                    <div class="branch-box" @click.prevent="clickHandle(schild)">
+                      <div class="branch-title">{{schild.label}}</div>
+                      <img class="branch-pic" src="@/assets/logo/logo.png">
+                      <div class="branch-name">{{schild.label}}</div>
+                      <div class="bz-box">
+                        <i v-if="schild.bz1" class="iconfont icon-star"></i>
+                        <i v-if="schild.bz2" class="iconfont icon-love"></i>
+                        <i v-if="schild.bz3" class="iconfont icon-triangle"></i>
+                        <i v-if="schild.bz4" class="iconfont icon-square"></i>
+                        <i v-if="schild.bz5" class="iconfont icon-plus"></i>
+                        <i v-if="schild.bz6" class="iconfont icon-round"></i>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+              <li v-else :key="cIndex" :class="{'odd': ((secretary.length%2) === 1&&!child.children)}">
+                <div class="branch-box" @click.prevent="clickHandle(child)">
+                  <div class="branch-title">{{child.label}}</div>
+                  <img class="branch-pic" src="@/assets/logo/logo.png">
+                  <img class="branch-pic" src="@/assets/logo/logo.png">
+                  <div class="branch-name">{{child.label}}</div>
+                  <div class="bz-box">
+                    <i v-if="child.bz1" class="iconfont icon-star"></i>
+                    <i v-if="child.bz2" class="iconfont icon-love"></i>
+                    <i v-if="child.bz3" class="iconfont icon-triangle"></i>
+                    <i v-if="child.bz4" class="iconfont icon-square"></i>
+                    <i v-if="child.bz5" class="iconfont icon-plus"></i>
+                    <i v-if="child.bz6" class="iconfont icon-round"></i>
+                  </div>
+                </div>
+                <div :style="{width: ulWidth + 'px'}"></div>
+              </li>
+            </template>
+            <li v-if="secretary.length%2 === 1" class="surplus">
+              <div class="branch-box"></div>
+              <div :style="{'width': ulWidth + 'px'}"></div>
+            </li>
+          </ul>
+        </template>
+        <template v-if="item.children && item.children.length>0">
+          <branch :dataArray="item.children" :count="currentCount"></branch>
+        </template>
+      </li>
+    </ul>
+</template>
+
+<script>
+export default {
+  name: 'Branch',
+  props: ['dataArray', 'count'],
+  data () {
+    return {
+      currentCount: 0
+    }
+  },
+  computed: {
+    ulWidth () {
+      let width = 0
+      this.dataArray.forEach((item, index) => {
+        if (item.secretary) {
+          item.secretary.forEach((it, sIndex) => {
+            console.log(it)
+            it.forEach((secretary, ssIndex) => {
+              if (secretary.children) {
+                console.log(secretary.children.length)
+                if (width < (secretary.children.length * 194)) {
+                  width = (secretary.children.length * 194)
+                }
+              }
+            })
+          })
+        }
+      })
+      return width
+    }
+  },
+  methods: {
+    clickHandle (obj) {
+      this.bus.$emit('info', obj)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+  ul,li{
+    list-style: none;
+  }
+  .branch-box{
+    width: 172px;
+    min-height: 180px;
+    border: 1px solid #CCCCCC;
+    border-radius: 4px;
+    text-align: center;
+    color: #666;
+    margin-top: 20px;
+    margin-left: 10px;
+    margin-right: 10px;
+    padding-bottom: 8px;
+    position: relative;
+  }
+  .branch-box .branch-title{
+    background-color: #2E6491;
+    color: #fff;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+    font-weight: bold;
+    font-size: 14px;
+  }
+  .branch-box .branch-pic{
+    width: 95px;
+    height: auto;
+    margin: 0 auto;
+    border: 1px solid #2E6491;
+    margin-top: 10px;
+  }
+  .branch-box .branch-name{
+    font-size: 14px;
+    color: #2E6491;
+    text-align: center;
+    font-weight: bold;
+    padding: 4px 10px;
+  }
+  ul{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    position: relative;
+    li{
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-top: 20px;
+    }
+  }
+
+  ul li:only-child{
+    padding-top: 0;
+  }
+  ul li:before{
+    content: '';
+    position: absolute;
+    width: 50%;
+    top: 20px;
+    height: 20px;
+    left: -0.5px;
+    border-top:1px solid #000;
+    border-right: 1px solid #000000;
+  }
+  ul li:after{
+    content: '';
+    position: absolute;
+    width: 50%;
+    top: 20px;
+    height: 20px;
+    left: calc(50% - 0.5px);
+    border-top:1px solid #000;
+    border-left: 1px solid #000000;
+  }
+  ul li:first-child:before,ul li:last-child:after{
+    content: none;
+  }
+  ul:before{
+    content: '';
+    height: 20px;
+    width: 1px;
+    background-color: #000000;
+    position: absolute;
+    top: 0px;
+  }
+  ul:first-child:before{
+    content: none;
+  }
+  ul.double{
+    width: 390px;
+    flex-wrap: wrap;
+    justify-content: space-between;
+  }
+  ul.double >li >.branch-box{
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 40px;
+  }
+  ul.double:before{
+    height: calc(100% - 92px);
+    left: 50%;
+  }
+  ul.double> li{
+    padding-top: 0;
+  }
+  ul.double>li:after,ul.double> li:before{
+    width: 21px;
+    height: 1px;
+    top: 60%;
+    border-left: 0;
+    border-right: 0;
+  }
+  ul.double> li:nth-child(2n+1):after{
+    right: -21px;
+    left: auto;
+  }
+  ul.double >li:nth-child(2n):before{
+    left: -20px;
+  }
+  ul.double >li:nth-child(2n+1):before,ul.double >li:nth-child(2n):after{content: none;}
+  ul.double >li:nth-child(2n+1):last-child:after{
+    content: '';
+  }
+  .iconfont{
+    color: #ff0000;
+  }
+  .bz-box{
+    width: 18px;
+    right: 10px;
+    top: 50px;
+    position: absolute;
+  }
+  .bz-box i{
+    float: right;
+  }
+  ul.level:after{
+    content: '';
+    position: absolute;
+    width: 1px;
+    height: 100%;
+    background-color: #000000;
+  }
+  ul li.surplus{
+    visibility: hidden;
+  }
+  ul.level li.odd:nth-last-child(2):after{
+    content: none;
+  }
+</style>

ui/src/views/plant/organization/index.vue

@@ -1,6 +1,6 @@
-<template >
+<template>
   <div class="app-container">
-    <div class="test">
+    <div>
       <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
 
         <el-form-item :label="$t('部门')" prop="units">
@@ -39,372 +39,411 @@
         </el-form-item>
       </el-form>
       <el-row :gutter="10" class="mb8">
-        <el-button type="primary" size="small"  @click="downloadPic">{{ $t('导出') }}</el-button>
         <right-toolbar :showSearch.sync="showSearch" @queryTable="getChartData"></right-toolbar>
       </el-row>
       <div id="tree" ref="orgChartDom"></div>
     </div>
-
+    <vue-draggable-resizable w="auto" h="auto" :draggable="dragMove">
+      <div class="zoom" @wheel.prevent="handleTableWheel($event)" ref="branch" >
+        <branch :dataArray="list1"></branch>
+      </div>
+    </vue-draggable-resizable>
+    <!-- 侧栏 --->
+    <el-drawer
+      title="我是标题"
+      ref="drawer"
+      direction="rtl"
+      :visible.sync="drawer">
+      <div>{{info}}</div>
+    </el-drawer>
   </div>
 </template>
 
 <script>
-import OrgChart from '@balkangraph/orgchart.js/orgchart';
-import {listOgzStaffmgr, listStaffmgr} from "@/api/plant/staffmgr";
-
-
-  export default {
-    name: "test",
-    components: {
-      OrgChart
-    },
-    data() {
-      return {
-        chart: null,
-        showSearch: false,
-        // 实际岗位字典
-        actualpostOptions: [],
-        showOrgChartData :[],
-        staffmgrList: [],
-        // 部门字典
-        unitOptions: [],
-        // 班值字典
-        teamOptions: [],
-        // 查询参数
-        queryParams: {
-          unit: null,
-          team: null,
-          actualpost: null,
-          education: null,
-          enAbility: null,
-          educations: null,
-          units: null,
-          teams: null,
-          actualposts: null,
-        },
-        units: [],
-        teams: [],
-        actualposts: ["24","26","14","16","18","20","12","10","34","36"],
-      }
-    },
-    created() {
-      this.getDicts("ACTUALPOST").then(response => {
-        this.actualpostOptions = response.data;
-      });
-      this.getDicts("STAFF_UNIT").then(response => {
-        this.unitOptions = response.data;
-      });
-      this.getDicts("TEAM_DIVIDE").then(response => {
-        this.teamOptions = response.data;
-      });
-    },
-    mounted (){
-      this.getChartData();
-    },
-    methods: {
-      getChartData() {
-        /*var nodes = [
-          { id: "1",pid: "0", name: "朱晶", title: "装置经理", email: "amber@domain.com",tags: ["level0"], img: process.env.VUE_APP_BASE_API +"/profile/staffmgr/20210713/8ea-f33b-4c98-b558-9f7a2ea73225/1.png" ,spec: process.env.VUE_APP_BASE_API +"/pdf/web/chartimg/fivestar.png" },
-          { id: "2", pid: "1", name: "Lexie Cole", title: "QA Lead",other: "急救员",tags: ["level0"], email: "ava@domain.com", img: process.env.VUE_APP_BASE_API +"/profile/staffmgr/20210713/8ea-f33b-4c98-b558-9f7a2ea73225/1.png" },
-          { id: "3", pid: "1", name: "Janae Barrett", title: "Technical Director",tags: ["level0"], img: "https://cdn.balkan.app/shared/3.jpg" },
-          { id: "4", pid: "1", name: "Aaliyah Webb", title: "Manager",tags: ["level1"], email: "jay@domain.com", img: "https://cdn.balkan.app/shared/4.jpg" },
-          { id: "5", pid: "2", name: "Elliot Ross", title: "QA", img: "https://cdn.balkan.app/shared/5.jpg" },
-          { id: "6", pid: "2", name: "Anahi Gordon", title: "QA", img: "https://cdn.balkan.app/shared/6.jpg" },
-          { id: "7", pid: "2", name: "Knox Macias", title: "QA", img: "https://cdn.balkan.app/shared/7.jpg",spec: process.env.VUE_APP_BASE_API +"/pdf/web/chartimg/fivestar.png" },
-          { id: "8", pid: "3", name: "Nash Ingram", title: ".NET Team Lead", email: "kohen@domain.com", img: "https://cdn.balkan.app/shared/8.jpg" },
-          { id: "9", pid: "3", name: "Sage Barnett", title: "JS Team Lead", img: "https://cdn.balkan.app/shared/9.jpg" },
-          { id: "10", pid: "8", name: "Alice Gray", title: "Programmer", img: "https://cdn.balkan.app/shared/10.jpg" },
-          { id: "11", pid: "8", name: "Anne Ewing", title: "Programmer", img: "https://cdn.balkan.app/shared/11.jpg" },
-          { id: "12", pid: "9", name: "Reuben Mcleod", title: "Programmer", img: "https://cdn.balkan.app/shared/12.jpg" },
-          { id: "13", pid: "9", name: "Ariel Wiley", title: "Programmer", img: "https://cdn.balkan.app/shared/13.jpg" },
-          { id: "14", pid: "4", name: "Lucas West", title: "Marketer", img: "https://cdn.balkan.app/shared/14.jpg" },
-          { id: "15", pid: "4", name: "Adan Travis", title: "Designer", img: "https://cdn.balkan.app/shared/15.jpg" },
-          { id: "16", pid: "15", name: "Alex Snider", title: "Sales Manager", img: "https://cdn.balkan.app/shared/16.jpg" }
-        ];*/
-
-        OrgChart.templates.white = Object.assign({}, OrgChart.templates.ana);
-        OrgChart.templates.white.size = [180, 180]
-
-        // OrgChart.templates.white.node =  '<rect x="0" y="0" rx="5" ry="5" filter="url(#shadow1)"  height="172" width="180" fill="rgb(3, 155, 229)" stroke-width="1" stroke="#aeaeae"></rect>' +
-        //   '<line x1="0" y1="40" x2="180" y2="40" stroke-width="0.8" stroke="#aeaeae" />';
-
-        OrgChart.templates.white.node =  '<rect  x="0" y="0" rx="5" ry="5" filter="url(#shadow1)"  height="180" width="172" fill="white" stroke-width="1" stroke="#2e6491"></rect>' +
-          '<rect class="color-rect" x="0" y="0" rx="5" ry="5" height="43" width="172" fill="#2e6491" stroke-width="1" stroke="#2e6491"></rect>';
-
-
-        OrgChart.templates.white.defs = '<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="shadow1">' +
-          '<feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1" /><feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1" />' +
-          '<feColorMatrix values="0 0 0 1 0   0 0 0 1 0   0 0 0 1 0  0 0 0 0.5 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1" />' +
-          '<feMerge>' +
-          '<feMergeNode in="shadowMatrixOuter1" /><feMergeNode in="SourceGraphic" /></feMerge></filter>';
-
-        OrgChart.templates.white.ripple = {
-          radius: 0,
-          color: "#e6e6e6",
-          rect: null
-        };
+import VueDraggableResizable from 'vue-draggable-resizable'
+import Branch from './branch'
 
-
-        OrgChart.templates.white.img_0 =
-          '<clipPath id="{randId}"><circle  cx="90" cy="80" r="80"></circle></clipPath>' +
-          '<image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="40" y="45"  width="95" height="95"></image>';
-
-        OrgChart.templates.white.field_0 = '<text width="172" class="field_0"  style="font-size: 14px;" font-weight="bold" fill="#353535" x="90" y="158" text-anchor="middle">{val}</text>';
-        OrgChart.templates.white.field_2 = '<text width="172" class="field_2"  style="font-size: 14px;" font-weight="bold" fill="white" x="90" y="25" text-anchor="middle">{val}</text>';
-        OrgChart.templates.white.img_1 =
-          '<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="145" y="150" width="15" height="15"></image>';
-        OrgChart.templates.white.img_2 =
-          '<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="145" y="130" width="15" height="15"></image>';
-        OrgChart.templates.white.img_3 =
-          '<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="145" y="110" width="15" height="15"></image>';
-        OrgChart.templates.white.img_4 =
-          '<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="145" y="90" width="15" height="15"></image>';
-
-
-        this.chart = new OrgChart(document.getElementById("tree"), {
-          template: "white",
-          layout: OrgChart.tree,
-          enableDragDrop: true,
-          nodeBinding: {
-            field_0: "name",
-            field_1: "other",
-            field_2: "post",
-            img_0: "img",
-            img_1: "spec1",
-            img_2: "spec2",
-            img_3: "spec3",
-            img_4: "spec4",
-          },
-          toolbar: {
-            fullScreen: true,
-            layout: true,
-            zoom: true,
-            fit: true,
-            expandAll: true
-          },
-          tags: {
-            "assistant": {
-              template: "white"
-            },
-            "group": {
-              template: "group",
-            },
-            "level0": {
-              subLevels: 0,
-            },
-            "level1": {
-              subLevels: 1
-            },
-            "level2": {
-              subLevels: 2
-            },
-            "level3": {
-              subLevels: 3
-            },
-            "level4": {
-              subLevels: 4
-            }
-          },
-          nodes: this.showOrgChartData
-        });
-        this.chart.editUI.on('field', function(sender, args){
-          if (args.name == 'spec1'){
-            return false
-          }
-          if (args.name == 'spec2'){
-            return false
-          }
-          if (args.name == 'spec3'){
-            return false
-          }
-          if (args.name == 'spec4'){
-            return false
+export default {
+  components: {Branch, VueDraggableResizable},
+  data () {
+    return {
+      showSearch: false,
+      // 实际岗位字典
+      actualpostOptions: [],
+      showOrgChartData :[],
+      staffmgrList: [],
+      // 部门字典
+      unitOptions: [],
+      // 班值字典
+      teamOptions: [],
+      // 查询参数
+      queryParams: {
+        unit: null,
+        team: null,
+        actualpost: null,
+        education: null,
+        enAbility: null,
+        educations: null,
+        units: null,
+        teams: null,
+        actualposts: null,
+      },
+      units: [],
+      teams: [],
+      actualposts: ["24","26","14","16","18","20","12","10","34","36"],
+      dragMove: true,
+      drawer: false,
+      info: {},
+      list1: [{
+        id: 0,
+        label: 'XXX科技有限公司',
+        bz1: true,
+        bz2: true,
+        bz3: false,
+        bz4: false,
+        bz5: false,
+        bz6: false,
+        haslevel: true,
+        secretary: [[
+          {
+            id: 2,
+            label: '秘书1',
+            bz1: false,
+            bz2: false,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: false
+          }, {
+            id: 2,
+            label: '秘书2',
+            bz1: false,
+            bz2: false,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: false
           }
-          if (args.tags == 'level0'){
-            return false
+        ], [
+          {
+            id: 2,
+            label: '秘书2',
+            bz1: false,
+            bz2: false,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: false
+          }, {
+            id: 2,
+            label: '秘书2',
+            bz1: false,
+            bz2: false,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: false,
+            children: [{
+              id: 2,
+              label: 'chh秘书1',
+              bz1: false,
+              bz2: false,
+              bz3: false,
+              bz4: false,
+              bz5: false,
+              bz6: false
+            }]
+          }, {
+            id: 2,
+            label: '秘书3',
+            bz1: false,
+            bz2: false,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: false
           }
-        });
-        this.queryParams.units = this.units.join()
-        this.queryParams.teams = this.teams.join()
-        this.queryParams.actualposts = this.actualposts.join()
-        listOgzStaffmgr(this.queryParams).then(response => {
-          this.staffmgrList = response;
-          this.showOrgChartData = []
-          let firstId = 0
-          for (let i = 0; i < this.staffmgrList.length ; i++) {
-            let post = this.selectDictLabel(this.actualpostOptions, this.staffmgrList[i].actualpost)
-            let nodeData = {
-              id: this.staffmgrList[i].id ,
-              pid: this.staffmgrList[i].pId ,
-              name: this.staffmgrList[i].name ,
-              post: post,
-              img: 'http://47.114.101.16:8080' + process.env.VUE_APP_BASE_API +　this.staffmgrList[i].photo,
-              tags: ["level0"],
-            }
-
-            //判断级别
-            if (post == this.$t('装置经理') ){
-              firstId = this.staffmgrList[i].id
-              nodeData = {
-                id: this.staffmgrList[i].id ,
-                pid: this.staffmgrList[i].pId ,
-                name: this.staffmgrList[i].name ,
-                post: post,
-                img: 'http://47.114.101.16:8080' + process.env.VUE_APP_BASE_API +　this.staffmgrList[i].photo,
-                tags: ["level0"],
-              }
-            }
-            if (post == this.$t('生产主管') || post == this.$t('炉区工长')) {
-              nodeData = {
-                id: this.staffmgrList[i].id ,
-                name: this.staffmgrList[i].name ,
-                post: this.selectDictLabel(this.actualpostOptions, this.staffmgrList[i].actualpost),
-                img: 'http://47.114.101.16:8080' + process.env.VUE_APP_BASE_API +　this.staffmgrList[i].photo,
-                stpid: "pd"
-              }
-            }
-            else if (post == this.$t('装置副经理')) {
-              nodeData = {
-                id: this.staffmgrList[i].id ,
-                name: this.staffmgrList[i].name ,
-                post: this.selectDictLabel(this.actualpostOptions, this.staffmgrList[i].actualpost),
-                img: 'http://47.114.101.16:8080' + process.env.VUE_APP_BASE_API +　this.staffmgrList[i].photo,
-                stpid: "mg",
-              }
-            }
-            else if (post == this.$t('文员') ){
-              nodeData = {
-                id: this.staffmgrList[i].id ,
-                name: this.staffmgrList[i].name ,
-                post: this.selectDictLabel(this.actualpostOptions, this.staffmgrList[i].actualpost),
-                img: 'http://47.114.101.16:8080' + process.env.VUE_APP_BASE_API +　this.staffmgrList[i].photo,
-                stpid: "mg",
-              }
-            }
-            else if (post == this.$t('资深工程师') && this.staffmgrList[i].pId == firstId ) {
-              nodeData = {
-                id: this.staffmgrList[i].id ,
-                name: this.staffmgrList[i].name ,
-                post: this.selectDictLabel(this.actualpostOptions, this.staffmgrList[i].actualpost),
-                img: 'http://47.114.101.16:8080' + process.env.VUE_APP_BASE_API +　this.staffmgrList[i].photo,
-                stpid: "mg",
-              }
-            }
-           //默认头像
-            if (this.staffmgrList[i].photo == "" || this.staffmgrList[i].photo == null) {
-              nodeData.img = 'http://47.114.101.16:8080' + process.env.VUE_APP_BASE_API +"/pdf/web/chartimg/user.png"
-            }
-            if (this.staffmgrList[i].specialDuty) {
-              console.log(this.staffmgrList[i].specialDuty)
-              let dutyArr = this.staffmgrList[i].specialDuty.split(",")
-              console.log(dutyArr)
-              for (let i = 0; i < dutyArr.length; i++) {
-                let icon = ""
-                if (dutyArr[i] == "10") {
-                  icon = process.env.VUE_APP_BASE_API +"/pdf/web/chartimg/safe.png"
-                }else if (dutyArr[i] == "12") {
-                  icon = process.env.VUE_APP_BASE_API +"/pdf/web/chartimg/hm.png"
-                }else if (dutyArr[i] == "14") {
-                  icon = process.env.VUE_APP_BASE_API +"/pdf/web/chartimg/aider.png"
-                }else if (dutyArr[i] == "16") {
-                  icon = process.env.VUE_APP_BASE_API +"/pdf/web/chartimg/fire.png"
-                }else if (dutyArr[i] == "18") {
-                  icon = process.env.VUE_APP_BASE_API +"/pdf/web/chartimg/vrt.png"
-                }
-                if (i == 0) {
-                  nodeData.spec1 = icon
-                }else if (i == 1) {
-                  nodeData.spec2 = icon
-                }else if (i == 2) {
-                  nodeData.spec3 = icon
-                }else if (i == 3) {
-                  nodeData.spec4 = icon
-                }
-              }
-            console.log(nodeData)
-            }
-            nodeData.post = this.$t(post)
-            this.showOrgChartData.push(nodeData)
+        ], [
+          {
+            id: 2,
+            label: '秘书1',
+            bz1: false,
+            bz2: false,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: false,
+            children: [{
+              id: 2,
+              label: 'ch秘书1',
+              bz1: false,
+              bz2: false,
+              bz3: false,
+              bz4: false,
+              bz5: false,
+              bz6: false
+            }, {
+              id: 2,
+              label: 'ch秘书2',
+              bz1: false,
+              bz2: false,
+              bz3: false,
+              bz4: false,
+              bz5: false,
+              bz6: false
+            }]}, {
+            id: 2,
+            label: '秘书2',
+            bz1: false,
+            bz2: false,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: false,
+            children: [{
+              id: 2,
+              label: 'ch秘书1',
+              bz1: false,
+              bz2: false,
+              bz3: false,
+              bz4: false,
+              bz5: false,
+              bz6: false
+            }, {
+              id: 2,
+              label: 'ch秘书2',
+              bz1: false,
+              bz2: false,
+              bz3: false,
+              bz4: false,
+              bz5: false,
+              bz6: false
+            }, {
+              id: 2,
+              label: 'ch秘书3',
+              bz1: false,
+              bz2: false,
+              bz3: false,
+              bz4: false,
+              bz5: false,
+              bz6: false
+            }]
+          }, {
+            id: 2,
+            label: '秘书2',
+            bz1: false,
+            bz2: false,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: false
           }
-
-
-          this.showOrgChartData.push(
+        ]],
+        children: [{
+          id: 2,
+          label: '产品研发部',
+          bz1: false,
+          bz2: false,
+          bz3: false,
+          bz4: false,
+          bz5: false,
+          bz6: false,
+          children: [{
+            id: 3,
+            label: '销售部',
+            bz1: true,
+            bz2: true,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: false
+          }, {
+            id: 3,
+            label: '销售部',
+            bz1: true,
+            bz2: true,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: false
+          }, {
+            id: 3,
+            label: '销售部',
+            bz1: true,
+            bz2: true,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: false
+          }, {
+            id: 3,
+            label: '销售部',
+            bz1: true,
+            bz2: true,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: false
+          }, {
+            id: 3,
+            label: '销售部',
+            bz1: true,
+            bz2: true,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: false
+          }]
+        }, {
+          id: 3,
+          label: '销售部',
+          bz1: true,
+          bz2: true,
+          bz3: false,
+          bz4: false,
+          bz5: true,
+          bz6: false,
+          children: [{
+            id: 3,
+            label: '销售部',
+            bz1: true,
+            bz2: true,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: false
+          }, {
+            id: 3,
+            label: '销售部',
+            bz1: true,
+            bz2: true,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: false
+          }]
+        }, {
+          id: 3,
+          label: '销售部',
+          bz1: false,
+          bz2: true,
+          bz3: false,
+          bz4: false,
+          bz5: true,
+          bz6: false
+        }, {
+          id: 3,
+          label: '销售部',
+          bz1: true,
+          bz2: true,
+          bz3: false,
+          bz4: true,
+          bz5: false,
+          bz6: false,
+          secretary: [[
             {
-              id: "mg",
-              pid: 10109,
-              name: this.$t('管理') + " TEAM",
-              tags: ["mg-group", "group" ,"assistant"]
-            },
-            {
-              id: "pd",
-              pid: 10109,
-              name: this.$t('生产主管') +" TEAM",
-              tags: ["pd-group", "group" ,"assistant"]
-            }
-          )
-         /* for (var i = 0; i < this.showOrgChartData.length; i++) {
-            var node = this.showOrgChartData[i];
-            switch (node.post) {
-              case "（主）操作员":
-                node.tags = ["Operator"];
-                break;
-              case "倒班（副）班长":
-              case "Designer":
-              case "Sales Manager":
-                node.tags = ["Engineer"];
-                break;
+              id: 2,
+              label: '秘书1',
+              bz1: false,
+              bz2: false,
+              bz3: false,
+              bz4: false,
+              bz5: false,
+              bz6: false
+            }, {
+              id: 2,
+              label: '秘书2',
+              bz1: false,
+              bz2: false,
+              bz3: false,
+              bz4: false,
+              bz5: false,
+              bz6: false
             }
-          }*/
-          this.chart.load(this.showOrgChartData);
-        });
-      },
-      /** 搜索按钮操作 */
-      handleQuery() {
-        this.getChartData();
-      },
-      /** 重置按钮操作 */
-      resetQuery() {
-        this.resetForm("queryForm");
-        this.units = []
-        this.teams = []
-        this.actualposts = []
-        this.handleQuery();
-      },
-      // 机构图--导出按钮
-      downloadPic() {
-        if (this.chart) {
-          this.chart.exportSVG({
-            filename: this.$t('机构图') + ".svg",
-            openInNewTab: false,
-            expandChildren: true,
-            margin: [10, 20, 10, 20],
-          });
-        }
-      }
-
+          ]],
+          children: [{
+            id: 3,
+            label: '销售部',
+            bz1: true,
+            bz2: true,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: false
+          }, {
+            id: 3,
+            label: '销售部',
+            bz1: true,
+            bz2: true,
+            bz3: false,
+            bz4: false,
+            bz5: true,
+            bz6: false
+          }, {
+            id: 3,
+            label: '销售部',
+            bz1: true,
+            bz2: true,
+            bz3: false,
+            bz4: false,
+            bz5: false,
+            bz6: true
+          }]
+        }]
+      }]
     }
+  },
+  created() {
+    this.getDicts("ACTUALPOST").then(response => {
+      this.actualpostOptions = response.data;
+    });
+    this.getDicts("STAFF_UNIT").then(response => {
+      this.unitOptions = response.data;
+    });
+    this.getDicts("TEAM_DIVIDE").then(response => {
+      this.teamOptions = response.data;
+    });
+  },
+  mounted () {
+    this.bus.$on('info', (data) => {
+      this.drawer = true
+      this.info = data
+    })
+  },
+  methods: {
+    handleTableWheel (event) {
+      let obj = this.$refs['branch']
+      return this.tableZoom(obj, event)
+    },
+    tableZoom (obj, event) {
+      // 一开始默认是100%
+      let zoom = parseInt(obj.style.zoom, 10) || 100
+      // 滚轮滚一下wheelDelta的值增加或减少120
+      zoom += event.wheelDelta / 12
+      if (zoom > 50) {
+        obj.style.zoom = zoom + '%'
+      }
+      return false
+    },
+    dclick () {
+      this.drawer = true
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.units = []
+      this.teams = []
+      this.actualposts = []
+      this.handleQuery();
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.getChartData();
+    },
+    getChartData() {},
   }
+}
 </script>
-<style>
-  #tree {
-    width: 100%;
-    height: 85%;
-  }
-
-  /*partial*/
-  .node.Operator .color-rect {
-    fill: #F57C00;
-  }
-
-  .node.Dev rect {
-    fill: #039BE5;
-  }
+<style scoped>
 
-  .node.Engineer .color-rect  {
-    fill: #FFCA28;
-  }
 </style>
-
-
-<!--<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">-->
-

ui/src/views/plant/organization/index3.vue

@@ -0,0 +1,410 @@
+<template >
+  <div class="app-container">
+    <div class="test">
+      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
+
+        <el-form-item :label="$t('部门')" prop="units">
+          <el-select v-model="units" :placeholder="$t('请选择') + $t('部门')" clearable size="small" multiple>
+            <el-option
+              v-for="dict in unitOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('班值')" prop="teams">
+          <el-select v-model="teams" :placeholder="$t('请选择') + $t('班值')" clearable size="small" multiple>
+            <el-option
+              v-for="dict in teamOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('实际岗位')" prop="actualposts" label-width="200">
+          <el-select v-model="actualposts" :placeholder="$t('请选择') + $t('实际岗位')" clearable size="small" multiple>
+            <el-option
+              v-for="dict in actualpostOptions"
+              :key="dict.dictValue"
+              :label="dict.dictLabel"
+              :value="dict.dictValue"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">{{ $t('搜索') }}</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-row :gutter="10" class="mb8">
+        <el-button type="primary" size="small"  @click="downloadPic">{{ $t('导出') }}</el-button>
+        <right-toolbar :showSearch.sync="showSearch" @queryTable="getChartData"></right-toolbar>
+      </el-row>
+      <div id="tree" ref="orgChartDom"></div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import OrgChart from '@balkangraph/orgchart.js/orgchart';
+import {listOgzStaffmgr, listStaffmgr} from "@/api/plant/staffmgr";
+
+
+  export default {
+    name: "test",
+    components: {
+      OrgChart
+    },
+    data() {
+      return {
+        chart: null,
+        showSearch: false,
+        // 实际岗位字典
+        actualpostOptions: [],
+        showOrgChartData :[],
+        staffmgrList: [],
+        // 部门字典
+        unitOptions: [],
+        // 班值字典
+        teamOptions: [],
+        // 查询参数
+        queryParams: {
+          unit: null,
+          team: null,
+          actualpost: null,
+          education: null,
+          enAbility: null,
+          educations: null,
+          units: null,
+          teams: null,
+          actualposts: null,
+        },
+        units: [],
+        teams: [],
+        actualposts: ["24","26","14","16","18","20","12","10","34","36"],
+      }
+    },
+    created() {
+      this.getDicts("ACTUALPOST").then(response => {
+        this.actualpostOptions = response.data;
+      });
+      this.getDicts("STAFF_UNIT").then(response => {
+        this.unitOptions = response.data;
+      });
+      this.getDicts("TEAM_DIVIDE").then(response => {
+        this.teamOptions = response.data;
+      });
+    },
+    mounted (){
+      this.getChartData();
+    },
+    methods: {
+      getChartData() {
+        /*var nodes = [
+          { id: "1",pid: "0", name: "朱晶", title: "装置经理", email: "amber@domain.com",tags: ["level0"], img: process.env.VUE_APP_BASE_API +"/profile/staffmgr/20210713/8ea-f33b-4c98-b558-9f7a2ea73225/1.png" ,spec: process.env.VUE_APP_BASE_API +"/pdf/web/chartimg/fivestar.png" },
+          { id: "2", pid: "1", name: "Lexie Cole", title: "QA Lead",other: "急救员",tags: ["level0"], email: "ava@domain.com", img: process.env.VUE_APP_BASE_API +"/profile/staffmgr/20210713/8ea-f33b-4c98-b558-9f7a2ea73225/1.png" },
+          { id: "3", pid: "1", name: "Janae Barrett", title: "Technical Director",tags: ["level0"], img: "https://cdn.balkan.app/shared/3.jpg" },
+          { id: "4", pid: "1", name: "Aaliyah Webb", title: "Manager",tags: ["level1"], email: "jay@domain.com", img: "https://cdn.balkan.app/shared/4.jpg" },
+          { id: "5", pid: "2", name: "Elliot Ross", title: "QA", img: "https://cdn.balkan.app/shared/5.jpg" },
+          { id: "6", pid: "2", name: "Anahi Gordon", title: "QA", img: "https://cdn.balkan.app/shared/6.jpg" },
+          { id: "7", pid: "2", name: "Knox Macias", title: "QA", img: "https://cdn.balkan.app/shared/7.jpg",spec: process.env.VUE_APP_BASE_API +"/pdf/web/chartimg/fivestar.png" },
+          { id: "8", pid: "3", name: "Nash Ingram", title: ".NET Team Lead", email: "kohen@domain.com", img: "https://cdn.balkan.app/shared/8.jpg" },
+          { id: "9", pid: "3", name: "Sage Barnett", title: "JS Team Lead", img: "https://cdn.balkan.app/shared/9.jpg" },
+          { id: "10", pid: "8", name: "Alice Gray", title: "Programmer", img: "https://cdn.balkan.app/shared/10.jpg" },
+          { id: "11", pid: "8", name: "Anne Ewing", title: "Programmer", img: "https://cdn.balkan.app/shared/11.jpg" },
+          { id: "12", pid: "9", name: "Reuben Mcleod", title: "Programmer", img: "https://cdn.balkan.app/shared/12.jpg" },
+          { id: "13", pid: "9", name: "Ariel Wiley", title: "Programmer", img: "https://cdn.balkan.app/shared/13.jpg" },
+          { id: "14", pid: "4", name: "Lucas West", title: "Marketer", img: "https://cdn.balkan.app/shared/14.jpg" },
+          { id: "15", pid: "4", name: "Adan Travis", title: "Designer", img: "https://cdn.balkan.app/shared/15.jpg" },
+          { id: "16", pid: "15", name: "Alex Snider", title: "Sales Manager", img: "https://cdn.balkan.app/shared/16.jpg" }
+        ];*/
+
+        OrgChart.templates.white = Object.assign({}, OrgChart.templates.ana);
+        OrgChart.templates.white.size = [180, 180]
+
+        // OrgChart.templates.white.node =  '<rect x="0" y="0" rx="5" ry="5" filter="url(#shadow1)"  height="172" width="180" fill="rgb(3, 155, 229)" stroke-width="1" stroke="#aeaeae"></rect>' +
+        //   '<line x1="0" y1="40" x2="180" y2="40" stroke-width="0.8" stroke="#aeaeae" />';
+
+        OrgChart.templates.white.node =  '<rect  x="0" y="0" rx="5" ry="5" filter="url(#shadow1)"  height="180" width="172" fill="white" stroke-width="1" stroke="#2e6491"></rect>' +
+          '<rect class="color-rect" x="0" y="0" rx="5" ry="5" height="43" width="172" fill="#2e6491" stroke-width="1" stroke="#2e6491"></rect>';
+
+
+        OrgChart.templates.white.defs = '<filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="shadow1">' +
+          '<feOffset dx="2" dy="2" in="SourceAlpha" result="shadowOffsetOuter1" /><feGaussianBlur stdDeviation="3" in="shadowOffsetOuter1" result="shadowBlurOuter1" />' +
+          '<feColorMatrix values="0 0 0 1 0   0 0 0 1 0   0 0 0 1 0  0 0 0 0.5 0" in="shadowBlurOuter1" type="matrix" result="shadowMatrixOuter1" />' +
+          '<feMerge>' +
+          '<feMergeNode in="shadowMatrixOuter1" /><feMergeNode in="SourceGraphic" /></feMerge></filter>';
+
+        OrgChart.templates.white.ripple = {
+          radius: 0,
+          color: "#e6e6e6",
+          rect: null
+        };
+
+
+        OrgChart.templates.white.img_0 =
+          '<clipPath id="{randId}"><circle  cx="90" cy="80" r="80"></circle></clipPath>' +
+          '<image preserveAspectRatio="xMidYMid slice" clip-path="url(#{randId})" xlink:href="{val}" x="40" y="45"  width="95" height="95"></image>';
+
+        OrgChart.templates.white.field_0 = '<text width="172" class="field_0"  style="font-size: 14px;" font-weight="bold" fill="#353535" x="90" y="158" text-anchor="middle">{val}</text>';
+        OrgChart.templates.white.field_2 = '<text width="172" class="field_2"  style="font-size: 14px;" font-weight="bold" fill="white" x="90" y="25" text-anchor="middle">{val}</text>';
+        OrgChart.templates.white.img_1 =
+          '<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="145" y="150" width="15" height="15"></image>';
+        OrgChart.templates.white.img_2 =
+          '<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="145" y="130" width="15" height="15"></image>';
+        OrgChart.templates.white.img_3 =
+          '<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="145" y="110" width="15" height="15"></image>';
+        OrgChart.templates.white.img_4 =
+          '<image preserveAspectRatio="xMidYMid slice" xlink:href="{val}" x="145" y="90" width="15" height="15"></image>';
+
+
+        this.chart = new OrgChart(document.getElementById("tree"), {
+          template: "white",
+          layout: OrgChart.tree,
+          enableDragDrop: true,
+          nodeBinding: {
+            field_0: "name",
+            field_1: "other",
+            field_2: "post",
+            img_0: "img",
+            img_1: "spec1",
+            img_2: "spec2",
+            img_3: "spec3",
+            img_4: "spec4",
+          },
+          toolbar: {
+            fullScreen: true,
+            layout: true,
+            zoom: true,
+            fit: true,
+            expandAll: true
+          },
+          tags: {
+            "assistant": {
+              template: "white"
+            },
+            "group": {
+              template: "group",
+            },
+            "level0": {
+              subLevels: 0,
+            },
+            "level1": {
+              subLevels: 1
+            },
+            "level2": {
+              subLevels: 2
+            },
+            "level3": {
+              subLevels: 3
+            },
+            "level4": {
+              subLevels: 4
+            }
+          },
+          nodes: this.showOrgChartData
+        });
+        this.chart.editUI.on('field', function(sender, args){
+          if (args.name == 'spec1'){
+            return false
+          }
+          if (args.name == 'spec2'){
+            return false
+          }
+          if (args.name == 'spec3'){
+            return false
+          }
+          if (args.name == 'spec4'){
+            return false
+          }
+          if (args.tags == 'level0'){
+            return false
+          }
+        });
+        this.queryParams.units = this.units.join()
+        this.queryParams.teams = this.teams.join()
+        this.queryParams.actualposts = this.actualposts.join()
+        listOgzStaffmgr(this.queryParams).then(response => {
+          this.staffmgrList = response;
+          this.showOrgChartData = []
+          let firstId = 0
+          for (let i = 0; i < this.staffmgrList.length ; i++) {
+            let post = this.selectDictLabel(this.actualpostOptions, this.staffmgrList[i].actualpost)
+            let nodeData = {
+              id: this.staffmgrList[i].id ,
+              pid: this.staffmgrList[i].pId ,
+              name: this.staffmgrList[i].name ,
+              post: post,
+              img: 'http://47.114.101.16:8080' + process.env.VUE_APP_BASE_API +　this.staffmgrList[i].photo,
+              tags: ["level0"],
+            }
+
+            //判断级别
+            if (post == this.$t('装置经理') ){
+              firstId = this.staffmgrList[i].id
+              nodeData = {
+                id: this.staffmgrList[i].id ,
+                pid: this.staffmgrList[i].pId ,
+                name: this.staffmgrList[i].name ,
+                post: post,
+                img: 'http://47.114.101.16:8080' + process.env.VUE_APP_BASE_API +　this.staffmgrList[i].photo,
+                tags: ["level0"],
+              }
+            }
+            if (post == this.$t('生产主管') || post == this.$t('炉区工长')) {
+              nodeData = {
+                id: this.staffmgrList[i].id ,
+                name: this.staffmgrList[i].name ,
+                post: this.selectDictLabel(this.actualpostOptions, this.staffmgrList[i].actualpost),
+                img: 'http://47.114.101.16:8080' + process.env.VUE_APP_BASE_API +　this.staffmgrList[i].photo,
+                stpid: "pd"
+              }
+            }
+            else if (post == this.$t('装置副经理')) {
+              nodeData = {
+                id: this.staffmgrList[i].id ,
+                name: this.staffmgrList[i].name ,
+                post: this.selectDictLabel(this.actualpostOptions, this.staffmgrList[i].actualpost),
+                img: 'http://47.114.101.16:8080' + process.env.VUE_APP_BASE_API +　this.staffmgrList[i].photo,
+                stpid: "mg",
+              }
+            }
+            else if (post == this.$t('文员') ){
+              nodeData = {
+                id: this.staffmgrList[i].id ,
+                name: this.staffmgrList[i].name ,
+                post: this.selectDictLabel(this.actualpostOptions, this.staffmgrList[i].actualpost),
+                img: 'http://47.114.101.16:8080' + process.env.VUE_APP_BASE_API +　this.staffmgrList[i].photo,
+                stpid: "mg",
+              }
+            }
+            else if (post == this.$t('资深工程师') && this.staffmgrList[i].pId == firstId ) {
+              nodeData = {
+                id: this.staffmgrList[i].id ,
+                name: this.staffmgrList[i].name ,
+                post: this.selectDictLabel(this.actualpostOptions, this.staffmgrList[i].actualpost),
+                img: 'http://47.114.101.16:8080' + process.env.VUE_APP_BASE_API +　this.staffmgrList[i].photo,
+                stpid: "mg",
+              }
+            }
+           //默认头像
+            if (this.staffmgrList[i].photo == "" || this.staffmgrList[i].photo == null) {
+              nodeData.img = 'http://47.114.101.16:8080' + process.env.VUE_APP_BASE_API +"/pdf/web/chartimg/user.png"
+            }
+            if (this.staffmgrList[i].specialDuty) {
+              console.log(this.staffmgrList[i].specialDuty)
+              let dutyArr = this.staffmgrList[i].specialDuty.split(",")
+              console.log(dutyArr)
+              for (let i = 0; i < dutyArr.length; i++) {
+                let icon = ""
+                if (dutyArr[i] == "10") {
+                  icon = process.env.VUE_APP_BASE_API +"/pdf/web/chartimg/safe.png"
+                }else if (dutyArr[i] == "12") {
+                  icon = process.env.VUE_APP_BASE_API +"/pdf/web/chartimg/hm.png"
+                }else if (dutyArr[i] == "14") {
+                  icon = process.env.VUE_APP_BASE_API +"/pdf/web/chartimg/aider.png"
+                }else if (dutyArr[i] == "16") {
+                  icon = process.env.VUE_APP_BASE_API +"/pdf/web/chartimg/fire.png"
+                }else if (dutyArr[i] == "18") {
+                  icon = process.env.VUE_APP_BASE_API +"/pdf/web/chartimg/vrt.png"
+                }
+                if (i == 0) {
+                  nodeData.spec1 = icon
+                }else if (i == 1) {
+                  nodeData.spec2 = icon
+                }else if (i == 2) {
+                  nodeData.spec3 = icon
+                }else if (i == 3) {
+                  nodeData.spec4 = icon
+                }
+              }
+            console.log(nodeData)
+            }
+            nodeData.post = this.$t(post)
+            this.showOrgChartData.push(nodeData)
+          }
+
+
+          this.showOrgChartData.push(
+            {
+              id: "mg",
+              pid: 10109,
+              name: this.$t('管理') + " TEAM",
+              tags: ["mg-group", "group" ,"assistant"]
+            },
+            {
+              id: "pd",
+              pid: 10109,
+              name: this.$t('生产主管') +" TEAM",
+              tags: ["pd-group", "group" ,"assistant"]
+            }
+          )
+         /* for (var i = 0; i < this.showOrgChartData.length; i++) {
+            var node = this.showOrgChartData[i];
+            switch (node.post) {
+              case "（主）操作员":
+                node.tags = ["Operator"];
+                break;
+              case "倒班（副）班长":
+              case "Designer":
+              case "Sales Manager":
+                node.tags = ["Engineer"];
+                break;
+            }
+          }*/
+          this.chart.load(this.showOrgChartData);
+        });
+      },
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.getChartData();
+      },
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.resetForm("queryForm");
+        this.units = []
+        this.teams = []
+        this.actualposts = []
+        this.handleQuery();
+      },
+      // 机构图--导出按钮
+      downloadPic() {
+        if (this.chart) {
+          this.chart.exportSVG({
+            filename: this.$t('机构图') + ".svg",
+            openInNewTab: false,
+            expandChildren: true,
+            margin: [10, 20, 10, 20],
+          });
+        }
+      }
+
+    }
+  }
+</script>
+<style>
+  #tree {
+    width: 100%;
+    height: 85%;
+  }
+
+  /*partial*/
+  .node.Operator .color-rect {
+    fill: #F57C00;
+  }
+
+  .node.Dev rect {
+    fill: #039BE5;
+  }
+
+  .node.Engineer .color-rect  {
+    fill: #FFCA28;
+  }
+</style>
+
+
+<!--<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">-->
+

ui/src/views/sems/specYlrq/index.vue

@@ -143,13 +143,13 @@
       <el-table-column :label="$t('制造单位')" align="center" prop="createUnit" :show-overflow-tooltip="true"/>
       <el-table-column :label="$t('国家')" align="center" prop="nation" :show-overflow-tooltip="true"/>
       <el-table-column :label="$t('外形尺寸(直径*长(高)*厚(mm))')" align="center" prop="outSize" :show-overflow-tooltip="true"/>
-      <el-table-column :label="$t('材料(管/壳)')" align="center" prop="material" :show-overflow-tooltip="true"/>
-      <el-table-column :label="$t('介质(管/壳)')" align="center" prop="medium" :show-overflow-tooltip="true"/>
-      <el-table-column :label="$t('设计压力MPa(管/壳)')" align="center" prop="desPressure" :show-overflow-tooltip="true"/>
-      <el-table-column :label="$t('操作压力MPa(管/壳)')" align="center" prop="optPressure" :show-overflow-tooltip="true"/>
-      <el-table-column :label="$t('设计温度℃(管/壳)')" align="center" prop="desTemp" :show-overflow-tooltip="true"/>
-      <el-table-column :label="$t('操作温度℃(管/壳)')" align="center" prop="optTemp" :show-overflow-tooltip="true"/>
-      <el-table-column :label="$t('投用日期(mm/year)')" align="center" prop="submitdate" width="100">
+      <el-table-column :label="$t('材料')" align="center" prop="material" :show-overflow-tooltip="true" :render-header="renderHeader"/>
+      <el-table-column :label="$t('介质')" align="center" prop="medium" :show-overflow-tooltip="true" :render-header="renderHeader"/>
+      <el-table-column :label="$t('设计压力MPa')" align="center" prop="desPressure" :show-overflow-tooltip="true" :render-header="renderHeader"/>
+      <el-table-column :label="$t('操作压力MPa')" align="center" prop="optPressure" :show-overflow-tooltip="true" :render-header="renderHeader"/>
+      <el-table-column :label="$t('设计温度℃')" align="center" prop="desTemp" :show-overflow-tooltip="true" :render-header="renderHeader"/>
+      <el-table-column :label="$t('操作温度℃')" align="center" prop="optTemp" :show-overflow-tooltip="true" :render-header="renderHeader"/>
+      <el-table-column :label="$t('投用日期')" align="center" prop="submitdate" width="100">
         <template slot-scope="scope">
           <span>{{ parseTime(scope.row.submitdate, '{y}-{m}-{d}') }}</span>
         </template>