|
|
@@ -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">-->
|
|
|
+
|
liying5537