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>
|