746 lines
13 KiB
Vue
746 lines
13 KiB
Vue
<template>
|
||
<div class="leftTop">
|
||
<Card title="项目组织机构">
|
||
<!-- <div id="projectOrganization" ref="projectOrganization" style="width: 100%; height: 100%"></div> -->
|
||
<div class="projectOrganization">
|
||
<div>项目主任组</div>
|
||
<div class="container_box1">
|
||
<div v-for="item in projectOrganizationInfo.projectOrganizationList" :key="item.id">
|
||
<div></div>
|
||
<div>{{ item.titleName }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="container_box2">
|
||
<div v-for="item in projectOrganizationInfo.projectOrganizationList2" :key="item.id">{{ item.titleName }}</div>
|
||
</div>
|
||
</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: 6,
|
||
titleName: "安质环部"
|
||
},
|
||
{
|
||
id: 7,
|
||
titleName: "综合办公室"
|
||
},
|
||
{
|
||
id: 8,
|
||
titleName: "财务管理部"
|
||
},
|
||
{
|
||
id: 9,
|
||
titleName: "项目综合部"
|
||
},
|
||
{
|
||
id: 10,
|
||
titleName: "政府协调组"
|
||
},
|
||
{
|
||
id: 11,
|
||
titleName: "党建工作组"
|
||
}
|
||
],
|
||
projectOrganizationList2: [{
|
||
id: 1,
|
||
titleName: "系统工程"
|
||
},{
|
||
id: 2,
|
||
titleName: "公用工程"
|
||
},{
|
||
id: 3,
|
||
titleName: "空分气化"
|
||
},{
|
||
id: 4,
|
||
titleName: "净化甲醇"
|
||
},{
|
||
id: 5,
|
||
titleName: "MTO"
|
||
},{
|
||
id: 6,
|
||
titleName: "两聚"
|
||
}]
|
||
});
|
||
|
||
const projectOrganization = ref(null as any);
|
||
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 {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
padding: 5px 20px;
|
||
> div:first-child {
|
||
width: 120px;
|
||
height: 30px;
|
||
font-size: 16px;
|
||
position: relative;
|
||
background: url("@/assets/images/cardImg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
> div:first-child::after {
|
||
content: "";
|
||
position: absolute;
|
||
height: 20px;
|
||
border-left: 2px dashed rgba(83, 181, 234, 0.6);
|
||
left: 50%;
|
||
top: 100%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.container_box2 {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 15px;
|
||
> div::after {
|
||
content: "";
|
||
position: absolute;
|
||
height: 15px;
|
||
border-left: 2px dashed rgba(83, 181, 234, 0.6);
|
||
left: 50%;
|
||
top: -10px;
|
||
transform: translateX(-50%);
|
||
}
|
||
> div {
|
||
background: url("@/assets/images/securityManagement/safeImg3.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
position: relative;
|
||
}
|
||
}
|
||
.container_box1 {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20px;
|
||
padding: 15px 0 10px 0;
|
||
border-top: 2px dashed rgba(83, 181, 234, 0.6);
|
||
border-bottom: 2px dashed rgba(83, 181, 234, 0.6);
|
||
> div::after {
|
||
content: "";
|
||
position: absolute;
|
||
height: 15px;
|
||
border-left: 2px dashed rgba(83, 181, 234, 0.6);
|
||
left: 50%;
|
||
top: -10px;
|
||
transform: translateX(-50%);
|
||
}
|
||
> div {
|
||
width: 4%;
|
||
height: 100%;
|
||
position: relative;
|
||
> div:first-child {
|
||
width: 25px;
|
||
height: 80px;
|
||
background: url("@/assets/images/bthgIcon/homeOverview_bg4.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
transform: rotate(180deg);
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 1;
|
||
}
|
||
> div:last-child {
|
||
z-index: 99;
|
||
font-size: 12px;
|
||
line-height: 22px;
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.leftTop {
|
||
width: 100%;
|
||
height: 100%;
|
||
.topPeopleNum {
|
||
height: 40%;
|
||
display: flex;
|
||
.dataTlo {
|
||
width: 35%;
|
||
height: 100%;
|
||
background: url("@/assets/images/comprehensiveManage/project9.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-left: 10%;
|
||
}
|
||
.dataTlt {
|
||
width: 35%;
|
||
height: 100%;
|
||
background: url("@/assets/images/comprehensiveManage/project12.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-left: 10%;
|
||
}
|
||
.text {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
margin-left: 50%;
|
||
margin-top: 15%;
|
||
}
|
||
.num {
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
background-image: linear-gradient(to right, rgba(122, 160, 234, 1), rgba(255, 255, 255, 1));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
margin-left: 47%;
|
||
margin-top: 5%;
|
||
}
|
||
}
|
||
.bottomPeopleNum {
|
||
height: 60%;
|
||
div {
|
||
height: 20%;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
}
|
||
.peopleData {
|
||
height: 80%;
|
||
display: flex;
|
||
.peoImg {
|
||
width: 30%;
|
||
height: 100%;
|
||
img {
|
||
margin-left: 30%;
|
||
width: 50%;
|
||
margin-top: 7%;
|
||
}
|
||
}
|
||
.peoNum {
|
||
height: 100%;
|
||
width: 70%;
|
||
position: relative;
|
||
.penName {
|
||
background: rgba(39, 88, 192, 0.6);
|
||
margin: 5% 5%;
|
||
}
|
||
.penN {
|
||
height: 10px;
|
||
background: url("@/assets/images/comprehensiveManage/project8.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
margin: 13% 5%;
|
||
}
|
||
.numData1 {
|
||
left: 5%;
|
||
top: -10%;
|
||
}
|
||
.numData2 {
|
||
left: 35%;
|
||
top: -10%;
|
||
}
|
||
.numData3 {
|
||
left: 65%;
|
||
top: -10%;
|
||
}
|
||
.numData {
|
||
position: absolute;
|
||
height: 60%;
|
||
width: 30%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.text {
|
||
margin-top: 18%;
|
||
font-size: 16px;
|
||
}
|
||
.num {
|
||
font-size: 20px;
|
||
margin-top: 18%;
|
||
// margin-left: 10%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
::v-deep .h-card .content {
|
||
height: 80%;
|
||
}
|
||
</style>
|