'processadd'
This commit is contained in:
yangqiao
@@ -4,8 +4,8 @@
|
||||
right: 6px;
|
||||
width: 230px;
|
||||
height: 230px;
|
||||
background: url('../../assets/chart/chart.png') no-repeat;
|
||||
background-size: cover;
|
||||
// background: url('../../assets/chart/chart.png') no-repeat;
|
||||
// background-size: cover;
|
||||
|
||||
.body-box {
|
||||
position: relative;
|
||||
@@ -37,7 +37,7 @@
|
||||
left: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
.p {
|
||||
font-size: 12px;
|
||||
width: 22px;
|
||||
height: 16px;
|
||||
@@ -49,7 +49,7 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
span {
|
||||
.span {
|
||||
transform: scale(0.6);
|
||||
font-size: 12px;
|
||||
margin-top: -4px;
|
||||
@@ -69,14 +69,15 @@
|
||||
width: 68px;
|
||||
height: 63px;
|
||||
}
|
||||
p {
|
||||
|
||||
.p {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #bfd8ee;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
span {
|
||||
.span {
|
||||
color: #649ed2;
|
||||
margin-top: -6px;
|
||||
}
|
||||
@@ -86,12 +87,12 @@
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
|
||||
p {
|
||||
.p {
|
||||
background: #FBEEB7;
|
||||
color: #DAA600;
|
||||
}
|
||||
|
||||
span {
|
||||
.span {
|
||||
color: #DAA600;
|
||||
}
|
||||
|
||||
@@ -106,12 +107,12 @@
|
||||
top: 1px;
|
||||
right: -2px;
|
||||
|
||||
p {
|
||||
.p {
|
||||
background: #c5e0b4;
|
||||
color: #e58881;
|
||||
}
|
||||
|
||||
span {
|
||||
.span {
|
||||
color: #5e913b;
|
||||
}
|
||||
|
||||
@@ -126,12 +127,12 @@
|
||||
top: 173px;
|
||||
right: -2px;
|
||||
|
||||
p {
|
||||
.p {
|
||||
background: #cccfde;
|
||||
color: #5e913b;
|
||||
}
|
||||
|
||||
span {
|
||||
.span {
|
||||
color: #5e913b;
|
||||
}
|
||||
|
||||
@@ -146,12 +147,12 @@
|
||||
top: 173px;
|
||||
left: 1px;
|
||||
|
||||
p {
|
||||
.p {
|
||||
background: #edd1cf;
|
||||
color: #e58881;
|
||||
}
|
||||
|
||||
span {
|
||||
.span {
|
||||
color: #e58881;
|
||||
}
|
||||
|
||||
@@ -162,6 +163,292 @@
|
||||
width: 12.4px;
|
||||
}
|
||||
}
|
||||
|
||||
.centent_box {
|
||||
position: relative;
|
||||
|
||||
.sector_box {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
&:nth-child(2) {
|
||||
top: -50px;
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.one_box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img:nth-child(1) {
|
||||
width: 19px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
width: 39px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #bfd7ec;
|
||||
color: #447cb8;
|
||||
margin-top: -3px;
|
||||
margin-bottom: -1px;
|
||||
text-align: center;
|
||||
line-height: 13px;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
transform: scale(0.6);
|
||||
margin-left: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
img:nth-child(3) {
|
||||
width: 2px;
|
||||
height: 37px;
|
||||
}
|
||||
}
|
||||
|
||||
.two_box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
.top_box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
column-gap: 4px;
|
||||
height: 19px;
|
||||
|
||||
.arrow_box_left {
|
||||
|
||||
img {
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.person {
|
||||
width: 7px;
|
||||
height: 15px;
|
||||
transform: rotate(45deg);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.arrow_box_right {
|
||||
img {
|
||||
width: 4px;
|
||||
height: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin_box {
|
||||
position: absolute;
|
||||
top: 19px;
|
||||
left: 3px;
|
||||
width: 34px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #fcf7d9;
|
||||
line-height: 12px;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
transform: scale(0.6);
|
||||
margin-left: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom_box {
|
||||
position: absolute;
|
||||
top: 37px;
|
||||
left: -12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
p {
|
||||
width: 2px;
|
||||
height: 8px;
|
||||
display: flex;
|
||||
writing-mode: vertical-rl;
|
||||
|
||||
span {
|
||||
font-size: 12px;
|
||||
transform: scale(0.5);
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.sit {
|
||||
width: 15px;
|
||||
height: 19px;
|
||||
transform: rotate(46deg)
|
||||
}
|
||||
|
||||
.down_arrow {
|
||||
width: 14px;
|
||||
height: 29px;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.up_arrow {
|
||||
width: 14px;
|
||||
height: 29px;
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
.stand {
|
||||
width: 15px;
|
||||
height: 18px;
|
||||
transform: rotate(46deg);
|
||||
margin-top: 4px;
|
||||
margin-left: -2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
top: -32px;
|
||||
left: -46px;
|
||||
transform: rotate(315deg);
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
top: -33px;
|
||||
right: -43px;
|
||||
transform: rotate(45deg);
|
||||
|
||||
.two_box {
|
||||
.top_box {
|
||||
.person {
|
||||
transform: rotate(-43deg);
|
||||
}
|
||||
}
|
||||
|
||||
.admin_box {
|
||||
top: 18px;
|
||||
left: -12px;
|
||||
background: #daefdb;
|
||||
}
|
||||
|
||||
.bottom_box {
|
||||
top: 36px;
|
||||
left: -23px;
|
||||
|
||||
.stand {
|
||||
transform: rotate(-43deg);
|
||||
margin-top: 7px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sit {
|
||||
transform: rotate(-46deg);
|
||||
margin-top: 4px;
|
||||
margin-left: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
bottom: -28px;
|
||||
right: -46px;
|
||||
transform: rotate(133deg);
|
||||
|
||||
.two_box {
|
||||
.top_box {
|
||||
.person {
|
||||
transform: rotate(-135deg);
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.admin_box {
|
||||
top: 17px;
|
||||
left: -3px;
|
||||
transform: rotate(10deg);
|
||||
background: #d8dae8;
|
||||
}
|
||||
|
||||
.bottom_box {
|
||||
top: 35px;
|
||||
left: -11px;
|
||||
|
||||
.stand {
|
||||
transform: rotate(-43deg);
|
||||
margin-top: 7px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.sit {
|
||||
transform: rotate(-123deg);
|
||||
margin-top: 1px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.up_arrow {
|
||||
margin-left: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
bottom: -28px;
|
||||
left: -48px;
|
||||
transform: rotate(230deg);
|
||||
|
||||
.two_box {
|
||||
.top_box {
|
||||
.person {
|
||||
transform: rotate(-231deg);
|
||||
margin-top: 5px;
|
||||
margin-left: 1px
|
||||
}
|
||||
}
|
||||
|
||||
.admin_box {
|
||||
top: 20px;
|
||||
left: -15px;
|
||||
transform: rotate(-9deg);
|
||||
background: #fceeed;
|
||||
}
|
||||
|
||||
.bottom_box {
|
||||
top: 36px;
|
||||
left: -25px;
|
||||
transform: rotate(-5deg);
|
||||
|
||||
.stand {
|
||||
transform: rotate(109deg);
|
||||
margin-top: 6px;
|
||||
margin-left: 0px;
|
||||
}
|
||||
|
||||
.sit {
|
||||
transform: rotate(137deg);
|
||||
margin-top: 6px;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.up_arrow {
|
||||
margin-left: -3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,18 +5,103 @@
|
||||
<div class="out_item" v-for="(item, index) in outList" :key="index">
|
||||
<div class="item_text" v-if="index">
|
||||
<img class="item_round" :src="item.url" alt="" />
|
||||
<p>{{ item.goup }}</p>
|
||||
<span>{{ item.content }}</span>
|
||||
<p class="p">{{ item.goup }}</p>
|
||||
<span class="span">{{ item.content }}</span>
|
||||
<div class="dashed_line"></div>
|
||||
</div>
|
||||
<div class="centent_box" v-else>
|
||||
<div class="item_text">
|
||||
<img class="item_round" :src="item.url" alt="" />
|
||||
<p>{{ item.goup }}</p>
|
||||
<span>{{ item.content }}</span>
|
||||
<p class="p">{{ item.goup }}</p>
|
||||
<span class="span">{{ item.content }}</span>
|
||||
</div>
|
||||
<div class="" v-for="(key,num) in centerList" :key="num">
|
||||
<img :src="key" alt="">
|
||||
<div class="sector_box" v-for="(key, num) in centerList" :key="num">
|
||||
<div class="one_box" v-if="!num">
|
||||
<img src="../../assets/chart/user.png" alt="" />
|
||||
<p>
|
||||
<span>{{ key.getter }}</span>
|
||||
</p>
|
||||
<img src="../../assets/chart/one_arrow.png" alt="" />
|
||||
</div>
|
||||
<div class="two_box" v-else>
|
||||
<div class="top_box">
|
||||
<p class="arrow_box_left">
|
||||
<img
|
||||
src="../../assets/chart/three_arrow.png"
|
||||
v-show="num === 2"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="../../assets/chart/five_arrow.png"
|
||||
v-show="num === 4"
|
||||
alt=""
|
||||
/>
|
||||
</p>
|
||||
<img
|
||||
class="person"
|
||||
src="../../assets/chart/person.png"
|
||||
alt=""
|
||||
/>
|
||||
<p class="arrow_box_right">
|
||||
<img
|
||||
src="../../assets/chart/two_arrow.png"
|
||||
v-show="num === 1"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
src="../../assets/chart/four_arrow.png"
|
||||
v-show="num === 3"
|
||||
alt=""
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
<div class="admin_box">
|
||||
<span>{{ key.getter }}</span>
|
||||
</div>
|
||||
<div class="bottom_box" v-if="num != 2">
|
||||
<img class="sit" src="../../assets/chart/sit.png" alt="" />
|
||||
<img
|
||||
class="down_arrow"
|
||||
src="../../assets/chart/down_arrow.png"
|
||||
alt=""
|
||||
/>
|
||||
<p>
|
||||
<span>{{ key.typeText }}</span>
|
||||
</p>
|
||||
<img
|
||||
class="up_arrow"
|
||||
src="../../assets/chart/up_arrow.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="stand"
|
||||
src="../../assets/chart/stand.png"
|
||||
alt=""
|
||||
v-if="num != 3"
|
||||
/>
|
||||
</div>
|
||||
<div class="bottom_box" v-else>
|
||||
<img
|
||||
class="stand"
|
||||
src="../../assets/chart/stand.png"
|
||||
alt=""
|
||||
/>
|
||||
<img
|
||||
class="up_arrow"
|
||||
src="../../assets/chart/up_arrow.png"
|
||||
alt=""
|
||||
/>
|
||||
<p>
|
||||
<span>{{ key.typeText }}</span>
|
||||
</p>
|
||||
<img
|
||||
class="down_arrow"
|
||||
src="../../assets/chart/down_arrow.png"
|
||||
alt=""
|
||||
/>
|
||||
<img class="sit" src="../../assets/chart/sit.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -26,49 +111,64 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, defineExpose, defineEmits } from "vue";
|
||||
import oneRound from "../../assets/chart/one_round.png";
|
||||
import twoRound from "../../assets/chart/two_round.png";
|
||||
import threeRound from "../../assets/chart/three_round.png";
|
||||
import fourRound from "../../assets/chart/four_round.png";
|
||||
import fiveRound from "../../assets/chart/five_round.png";
|
||||
const isCollapse = ref<boolean>(true);
|
||||
import { ref, defineExpose, defineEmits } from 'vue'
|
||||
import oneRound from '../../assets/chart/one_round.png'
|
||||
import twoRound from '../../assets/chart/two_round.png'
|
||||
import threeRound from '../../assets/chart/three_round.png'
|
||||
import fourRound from '../../assets/chart/four_round.png'
|
||||
import fiveRound from '../../assets/chart/five_round.png'
|
||||
const isCollapse = ref<boolean>(true)
|
||||
const outList = ref<Array<any>>([
|
||||
{
|
||||
url: oneRound,
|
||||
goup: "G1",
|
||||
content: "ORCHESTRATOR",
|
||||
goup: 'G1',
|
||||
content: 'ORCHESTRATOR'
|
||||
},
|
||||
{
|
||||
url: twoRound,
|
||||
goup: "G2",
|
||||
content: "SCIENTIST",
|
||||
goup: 'G2',
|
||||
content: 'SCIENTIST'
|
||||
},
|
||||
{
|
||||
url: threeRound,
|
||||
goup: "G3",
|
||||
content: "ENGINEER",
|
||||
goup: 'G3',
|
||||
content: 'ENGINEER'
|
||||
},
|
||||
{
|
||||
url: fourRound,
|
||||
goup: "G4",
|
||||
content: "EXECUTOR",
|
||||
goup: 'G4',
|
||||
content: 'EXECUTOR'
|
||||
},
|
||||
{
|
||||
url: fiveRound,
|
||||
goup: "G5",
|
||||
content: "ANALYST",
|
||||
},
|
||||
]);
|
||||
goup: 'G5',
|
||||
content: 'ANALYST'
|
||||
}
|
||||
])
|
||||
const centerList = ref<Array<any>>([
|
||||
{
|
||||
url: oneRound,
|
||||
getter: "Admin",
|
||||
typeText: "Handoff",
|
||||
getter: 'Human',
|
||||
typeText: ''
|
||||
},
|
||||
]);
|
||||
{
|
||||
getter: 'Admin',
|
||||
typeText: 'Handoff'
|
||||
},
|
||||
{
|
||||
getter: 'Admin',
|
||||
typeText: 'Handoff'
|
||||
},
|
||||
{
|
||||
getter: 'Admin',
|
||||
typeText: 'Handoff'
|
||||
},
|
||||
{
|
||||
getter: 'Admin',
|
||||
typeText: 'Handoff'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import "./index.less";
|
||||
@import './index.less';
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user