<!--<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();-->
<!--      },-->
<!--      // 机构图&#45;&#45;导出按钮-->
<!--      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>-->


<!--&lt;!&ndash;<link href="https://fonts.googleapis.com/css?family=Gochi+Hand" rel="stylesheet">&ndash;&gt;-->

