844 lines
15 KiB
Vue
844 lines
15 KiB
Vue
<template>
|
||
<div class="leftTop">
|
||
<Card title="项目组织机构">
|
||
<!-- <div id="projectOrganization" ref="projectOrganization" style="width: 100%; height: 100%"></div> -->
|
||
<div class="projectOrganization_scroll">
|
||
<el-scrollbar>
|
||
<div class="projectOrganization">
|
||
<div class="projectOrganization_box1">
|
||
<div>
|
||
<div>项目建设方项目管理组织机构</div>
|
||
</div>
|
||
<div class="projectOrganization_box1_right">
|
||
<div class="projectOrganization_box1_header">
|
||
<div>项目主任组</div>
|
||
<!-- <div>安质环部</div> -->
|
||
</div>
|
||
<div class="projectOrganization_box1_main">
|
||
<div v-for="item in projectOrganizationInfo.projectOrganizationList" :key="item.id">
|
||
<div>
|
||
{{ item.titleName }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="projectOrganization_box1_footer">
|
||
<div v-for="item in projectOrganizationInfo.projectOrganizationList2" :key="item.id">{{ item.titleName }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="projectOrganization_box2">
|
||
<div>
|
||
<div>监理单位</div>
|
||
</div>
|
||
<div class="projectOrganization_box2_footer">
|
||
<div @click="particularDetail({ type: 1, title: '监理单位' })" v-for="item in projectOrganizationInfo.projectOrganizationList2" :key="item.id">
|
||
{{ item.titleName }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="projectOrganization_box3">
|
||
<div>
|
||
<div>工程建设主体</div>
|
||
</div>
|
||
<div class="projectOrganization_box3_main">
|
||
<div class="projectOrganization_box3_footer">
|
||
<div @click="particularDetail({ type: 2, title: 'EPC承包商' })" v-for="item in projectOrganizationInfo.projectOrganizationList3" :key="item.id">
|
||
{{ item.titleName }}
|
||
</div>
|
||
</div>
|
||
<div class="projectOrganization_box3_footer">
|
||
<div v-for="item in projectOrganizationInfo.projectOrganizationList4" :key="item.id">{{ item.titleName }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
</Card>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { GlobalStore } from "@/stores";
|
||
import { getCurrentDayAirQualityApi } from "@/api/modules/projectOverview";
|
||
import { ref, onMounted, reactive } from "vue";
|
||
import * as echarts from "echarts";
|
||
import Card from "@/components/card.vue";
|
||
const store = GlobalStore();
|
||
const projectOrganizationInfo = reactive({
|
||
projectOrganizationList: [
|
||
{
|
||
id: 1,
|
||
titleName: "项目管理部"
|
||
},
|
||
{
|
||
id: 2,
|
||
titleName: "设计管理部"
|
||
},
|
||
{
|
||
id: 3,
|
||
titleName: "采购管理部"
|
||
},
|
||
{
|
||
id: 4,
|
||
titleName: "施工管理部"
|
||
},
|
||
{
|
||
id: 5,
|
||
titleName: "商务管理部"
|
||
},
|
||
|
||
// {
|
||
// id: 7,
|
||
// titleName: "综合办公室"
|
||
// },
|
||
{
|
||
id: 8,
|
||
titleName: "财务管理部"
|
||
},
|
||
{
|
||
id: 9,
|
||
titleName: "项目综合部"
|
||
},
|
||
{
|
||
id: 10,
|
||
titleName: "政府协调组"
|
||
},
|
||
{
|
||
id: 11,
|
||
titleName: "党建工作组"
|
||
},
|
||
{
|
||
id: 6,
|
||
titleName: "安质环部"
|
||
},
|
||
],
|
||
projectOrganizationList2: [
|
||
{
|
||
id: 1,
|
||
titleName: "系统工程"
|
||
},
|
||
{
|
||
id: 2,
|
||
titleName: "公用工程"
|
||
},
|
||
{
|
||
id: 3,
|
||
titleName: "空分气化"
|
||
},
|
||
{
|
||
id: 4,
|
||
titleName: "净化甲醇"
|
||
},
|
||
{
|
||
id: 5,
|
||
titleName: "MTO"
|
||
},
|
||
{
|
||
id: 6,
|
||
titleName: "两聚"
|
||
}
|
||
],
|
||
projectOrganizationList3: [
|
||
{
|
||
id: 1,
|
||
titleName: "EPC"
|
||
},
|
||
{
|
||
id: 2,
|
||
titleName: "EPC"
|
||
},
|
||
{
|
||
id: 3,
|
||
titleName: "EPC"
|
||
},
|
||
{
|
||
id: 4,
|
||
titleName: "EPC"
|
||
},
|
||
{
|
||
id: 5,
|
||
titleName: "EPC"
|
||
},
|
||
{
|
||
id: 6,
|
||
titleName: "EPC"
|
||
}
|
||
],
|
||
projectOrganizationList4: [
|
||
{
|
||
id: 1,
|
||
titleName: "施工"
|
||
},
|
||
{
|
||
id: 2,
|
||
titleName: "施工"
|
||
},
|
||
{
|
||
id: 3,
|
||
titleName: "施工"
|
||
},
|
||
{
|
||
id: 4,
|
||
titleName: "施工"
|
||
},
|
||
{
|
||
id: 5,
|
||
titleName: "施工"
|
||
},
|
||
{
|
||
id: 6,
|
||
titleName: "施工"
|
||
}
|
||
]
|
||
});
|
||
|
||
const projectOrganization = ref(null as any);
|
||
|
||
const emits = defineEmits(["openDialog"]);
|
||
const particularDetail = (obj: any) => {
|
||
emits("openDialog", {
|
||
type: obj.type,
|
||
title: obj.title
|
||
});
|
||
};
|
||
|
||
function drawChart() {
|
||
let myEcharts = echarts.init(projectOrganization.value);
|
||
var title = [
|
||
// 第零层
|
||
{
|
||
label: "项目主任组",
|
||
warn: 5,
|
||
error: 8,
|
||
value: 2
|
||
},
|
||
// 第一层
|
||
{
|
||
label: "项目管理部",
|
||
warn: 5,
|
||
error: 8,
|
||
value: 5
|
||
},
|
||
{
|
||
label: "设计管理部",
|
||
warn: 5,
|
||
error: 8,
|
||
value: 7
|
||
},
|
||
{
|
||
label: "采购管理部",
|
||
warn: 5,
|
||
error: 8,
|
||
value: 7
|
||
},
|
||
{
|
||
label: "施工管理部",
|
||
warn: 5,
|
||
error: 8,
|
||
value: 7
|
||
},
|
||
// 第二层
|
||
{
|
||
label: "系统工程",
|
||
warn: 5,
|
||
error: 8,
|
||
value: 2
|
||
},
|
||
{
|
||
label: "公用工程",
|
||
warn: 5,
|
||
error: 8,
|
||
value: 2
|
||
},
|
||
{
|
||
label: "空分气化",
|
||
warn: 5,
|
||
error: 8,
|
||
value: 2
|
||
},
|
||
{
|
||
label: "净化甲醇",
|
||
warn: 5,
|
||
error: 8,
|
||
value: 2
|
||
},
|
||
{
|
||
label: "MTO",
|
||
warn: 5,
|
||
error: 8,
|
||
value: 2
|
||
},
|
||
// 第三层
|
||
{
|
||
label: "两聚",
|
||
warn: 5,
|
||
error: 8,
|
||
value: 2
|
||
}
|
||
];
|
||
var colorMap = {
|
||
normal: "#18a849",
|
||
warn: "#FFC125",
|
||
error: "#FF0000"
|
||
};
|
||
|
||
const colorFunction = function (obj: any) {
|
||
if (obj.value < obj.warn) {
|
||
return colorMap.normal;
|
||
} else if (obj.warn <= obj.value && obj.value < obj.error) {
|
||
return colorMap.warn;
|
||
} else if (obj.error <= obj.value) {
|
||
return colorMap.error;
|
||
}
|
||
};
|
||
|
||
const titleList = title.reduce((prev: any, cur: any, index: number) => {
|
||
if (index == 0) {
|
||
if (prev[0] instanceof Array) {
|
||
prev[0].push({ name: cur.label, value: cur.value });
|
||
} else {
|
||
prev.push([
|
||
{
|
||
name: cur.label,
|
||
value: cur.value,
|
||
x: 300,
|
||
y: 0,
|
||
symbolSize: 50,
|
||
itemStyle: {
|
||
normal: {
|
||
color: colorFunction(cur)
|
||
}
|
||
}
|
||
}
|
||
]);
|
||
}
|
||
} else if (index >= 1 && index <= 4) {
|
||
if (prev[1] instanceof Array) {
|
||
prev[1].push({
|
||
name: cur.label,
|
||
value: cur.value,
|
||
x: prev[1].length * 150,
|
||
y: 200,
|
||
symbolSize: 50,
|
||
itemStyle: {
|
||
normal: {
|
||
color: colorFunction(cur)
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
prev.push([
|
||
{
|
||
name: cur.label,
|
||
value: cur.value,
|
||
x: 0,
|
||
y: 200,
|
||
symbolSize: 50,
|
||
itemStyle: {
|
||
normal: {
|
||
color: colorFunction(cur)
|
||
}
|
||
}
|
||
}
|
||
]);
|
||
}
|
||
} else if (index > 4 && index < title.length) {
|
||
if (prev[2] instanceof Array) {
|
||
prev[2].push({
|
||
name: cur.label,
|
||
value: cur.value,
|
||
x: prev[2].length * 150,
|
||
y: 400,
|
||
symbolSize: 50,
|
||
itemStyle: {
|
||
normal: {
|
||
color: colorFunction(cur)
|
||
}
|
||
}
|
||
});
|
||
} else {
|
||
prev.push([
|
||
{
|
||
name: cur.label,
|
||
value: cur.value,
|
||
x: 0,
|
||
y: 400,
|
||
symbolSize: 50,
|
||
itemStyle: {
|
||
normal: {
|
||
color: colorFunction(cur)
|
||
}
|
||
}
|
||
}
|
||
]);
|
||
}
|
||
}
|
||
|
||
return prev;
|
||
}, []);
|
||
|
||
console.log(titleList);
|
||
|
||
//具体的绘制流程图的方法
|
||
const option = {
|
||
tooltip: {
|
||
trigger: "item",
|
||
formatter: function (para: any) {
|
||
if (para.name != "x" || para.name != "y") {
|
||
return para.name;
|
||
} else {
|
||
//其他的都正式显示，自己是什么就显示什么。
|
||
return "";
|
||
}
|
||
}
|
||
},
|
||
animationDurationUpdate: 1500,
|
||
animationEasingUpdate: "quinticInOut",
|
||
textStyle: {
|
||
color: "#000"
|
||
},
|
||
series: [
|
||
{
|
||
type: "graph",
|
||
tooltip: {
|
||
backgroundColor: "skyblue"
|
||
//formatter: "{b} <br/>{a} : {c} h "
|
||
},
|
||
layout: "none",
|
||
symbolSize: 10,
|
||
roam: false,
|
||
label: {
|
||
normal: {
|
||
show: true,
|
||
position: "inside",
|
||
//offset: [0,-60],//居上 20
|
||
textStyle: {
|
||
fontSize: 12,
|
||
color: "#fff",
|
||
fontWeight: "BOLD"
|
||
}
|
||
}
|
||
},
|
||
edgeSymbol: ["circle", "arrow"],
|
||
edgeSymbolSize: [4, 10],
|
||
edgeLabel: {
|
||
normal: {
|
||
textStyle: {
|
||
fontSize: 18
|
||
}
|
||
}
|
||
},
|
||
//注意，所有节点的位置都是根据自己设置的x, y坐标来设置的
|
||
data: [
|
||
// 零层
|
||
...titleList[0],
|
||
// 一层
|
||
...titleList[1],
|
||
// 二层
|
||
...titleList[2],
|
||
|
||
// 一层
|
||
{
|
||
name: "1",
|
||
x: 300,
|
||
y: 100,
|
||
symbolSize: 0
|
||
},
|
||
{
|
||
name: "2",
|
||
x: 150,
|
||
y: 100,
|
||
symbolSize: 0
|
||
},
|
||
{
|
||
name: "3",
|
||
x: 0,
|
||
y: 100,
|
||
symbolSize: 0
|
||
},
|
||
{
|
||
name: "4",
|
||
x: 350,
|
||
y: 100,
|
||
symbolSize: 0
|
||
},
|
||
{
|
||
name: "5",
|
||
x: 600,
|
||
y: 100,
|
||
symbolSize: 0
|
||
},
|
||
// 二层
|
||
{
|
||
name: "21",
|
||
x: 0,
|
||
y: 300,
|
||
symbolSize: 0
|
||
},
|
||
{
|
||
name: "22",
|
||
x: 150,
|
||
y: 300,
|
||
symbolSize: 0
|
||
},
|
||
{
|
||
name: "23",
|
||
x: 300,
|
||
y: 300,
|
||
symbolSize: 0
|
||
},
|
||
{
|
||
name: "24",
|
||
x: 350,
|
||
y: 300,
|
||
symbolSize: 0
|
||
},
|
||
{
|
||
name: "25",
|
||
x: 450,
|
||
y: 300,
|
||
symbolSize: 0
|
||
},
|
||
{
|
||
name: "26",
|
||
x: 600,
|
||
y: 300,
|
||
symbolSize: 0
|
||
},
|
||
// 三层
|
||
{
|
||
name: "31",
|
||
x: 0,
|
||
y: 500,
|
||
symbolSize: 0
|
||
}
|
||
],
|
||
// links: [],
|
||
//这是点与点之间的连接关系
|
||
links: [
|
||
// 零层
|
||
{
|
||
source: title[0].label,
|
||
target: "1"
|
||
},
|
||
// 一层
|
||
{
|
||
source: "3",
|
||
target: title[1].label
|
||
},
|
||
{
|
||
source: "2",
|
||
target: title[2].label
|
||
},
|
||
{
|
||
source: "4",
|
||
target: title[3].label
|
||
},
|
||
{
|
||
source: "5",
|
||
target: title[4].label
|
||
},
|
||
// 二层
|
||
{
|
||
source: title[3].label,
|
||
target: "24"
|
||
},
|
||
{
|
||
source: "21",
|
||
target: title[5].label
|
||
},
|
||
{
|
||
source: "22",
|
||
target: title[6].label
|
||
},
|
||
{
|
||
source: "23",
|
||
target: title[7].label
|
||
},
|
||
{
|
||
source: "25",
|
||
target: title[8].label
|
||
},
|
||
{
|
||
source: "26",
|
||
target: title[9].label
|
||
},
|
||
// 三层
|
||
{
|
||
source: title[7].label,
|
||
target: "33"
|
||
},
|
||
{
|
||
source: "31",
|
||
target: title[10].label
|
||
},
|
||
|
||
// 一层
|
||
{
|
||
source: "1",
|
||
target: "2",
|
||
symbol: "none"
|
||
},
|
||
{
|
||
source: "2",
|
||
target: "3",
|
||
symbol: "none"
|
||
},
|
||
{
|
||
source: "1",
|
||
target: "4",
|
||
symbol: "none"
|
||
},
|
||
{
|
||
source: "4",
|
||
target: "5",
|
||
symbol: "none"
|
||
},
|
||
// 二层
|
||
{
|
||
source: "21",
|
||
target: "22",
|
||
symbol: "none"
|
||
},
|
||
{
|
||
source: "22",
|
||
target: "23",
|
||
symbol: "none"
|
||
},
|
||
{
|
||
source: "23",
|
||
target: "24",
|
||
symbol: "none"
|
||
},
|
||
{
|
||
source: "24",
|
||
target: "25",
|
||
symbol: "none"
|
||
},
|
||
{
|
||
source: "25",
|
||
target: "26",
|
||
symbol: "none"
|
||
},
|
||
// 三层
|
||
{
|
||
source: "31",
|
||
target: "32",
|
||
symbol: "none"
|
||
}
|
||
],
|
||
//线条的颜色
|
||
lineStyle: {
|
||
normal: {
|
||
opacity: 0.9,
|
||
color: "#53B5EA",
|
||
type: "dashed",
|
||
width: 1
|
||
}
|
||
}
|
||
}
|
||
]
|
||
};
|
||
|
||
myEcharts.setOption(option);
|
||
// window.addEventListener("resize", () => {
|
||
// console.log(666)
|
||
// leftTopEcharts.resize();
|
||
// })
|
||
// window.onresize = function () {
|
||
// myEchart.resize();
|
||
// }
|
||
}
|
||
|
||
onMounted(() => {
|
||
// drawChart();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.projectOrganization_scroll {
|
||
width: calc(100% - 24px);
|
||
height: calc(100% - 30px);
|
||
padding: 16px 12px;
|
||
}
|
||
|
||
.projectOrganization {
|
||
width: 100%;
|
||
height: 500px;
|
||
// margin: 20px 0;
|
||
background-image: url("@/assets/images/bthgIcon/bgIndex_1.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
.projectOrganization_box1 {
|
||
height: 294px;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
> div:first-child {
|
||
width: 6%;
|
||
color: white;
|
||
text-align: center;
|
||
font-size: 15px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
> div:first-child {
|
||
width: 60%;
|
||
}
|
||
}
|
||
|
||
.projectOrganization_box1_right {
|
||
width: 89%;
|
||
.projectOrganization_box1_header {
|
||
display: flex;
|
||
color: white;
|
||
position: relative;
|
||
font-size: 16px;
|
||
height: 46px;
|
||
align-items: center;
|
||
margin-top: 4px;
|
||
> div:first-child {
|
||
left: 45%;
|
||
position: absolute;
|
||
transform: translateX(-50%);
|
||
}
|
||
// > div:last-child {
|
||
// position: absolute;
|
||
// right: 16%;
|
||
// font-size: 14px;
|
||
// }
|
||
}
|
||
|
||
.projectOrganization_box1_main {
|
||
height: 216px;
|
||
position: relative;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
font-size: 14px;
|
||
> div {
|
||
color: white;
|
||
display: flex;
|
||
align-items: center;
|
||
> div {
|
||
width: 20px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.projectOrganization_box1_footer {
|
||
position: relative;
|
||
height: 31px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 99%;
|
||
font-size: 14px;
|
||
> div {
|
||
color: white;
|
||
width: 20%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.projectOrganization_box2 {
|
||
margin-top: 2px;
|
||
height: 81px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
> div:first-child {
|
||
width: 6%;
|
||
color: white;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
height: 100%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
> div:first-child {
|
||
width: 60%;
|
||
}
|
||
}
|
||
.projectOrganization_box2_footer {
|
||
width: 91%;
|
||
position: relative;
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 16px;
|
||
> div {
|
||
color: white;
|
||
width: 20%;
|
||
text-align: center;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
.projectOrganization_box3 {
|
||
// margin-top: 18px;
|
||
height: 122px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
> div:first-child {
|
||
width: 6%;
|
||
color: white;
|
||
text-align: center;
|
||
display: flex;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
height: 100%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
> div:first-child {
|
||
width: 60%;
|
||
}
|
||
}
|
||
.projectOrganization_box3_main {
|
||
width: 88%;
|
||
height: 102px;
|
||
margin-top: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.projectOrganization_box3_footer:first-child {
|
||
> div {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
.projectOrganization_box3_footer {
|
||
position: relative;
|
||
height: 30px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-top: 6px;
|
||
width: 96%;
|
||
font-size: 14px;
|
||
> div {
|
||
color: white;
|
||
width: 11%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.leftTop {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
::v-deep .h-card .content {
|
||
height: 80%;
|
||
}
|
||
</style>
|