<template>
|
<div class="container">
|
<a-card>
|
<div class="titile">项目里程碑状态</div>
|
<div class="content-wrpper">
|
<div class="title-content">
|
<template v-for="(item, index) in titles">
|
<div v-if="index == 0" class="title-item-box" :class="item.class" :key="index">
|
<div class="custom-title-box">
|
<div class="top">
|
<div class="top-inner" style="border-bottom: 1px solid #1890ff">填充颜色 代表项目状态</div>
|
<div class="top-inner" style="display: flex; flex-direction: column; margin: 0; padding: 0">
|
<div
|
style="width: 100%; height: 20px; background: #00b24b; border: 1px solid #1890ff; border-top: 0">
|
</div>
|
<div
|
style="width: 100%; height: 20px; background: #e0ae0a; border: 1px solid #1890ff; border-top: 0">
|
</div>
|
<div
|
style="width: 100%; height: 20px; background: #ff0000; border: 1px solid #1890ff; border-top: 0">
|
</div>
|
<div
|
style="width: 100%; height: 20px; background: #bfbfbf; border: 1px solid #1890ff; border-top: 0">
|
</div>
|
</div>
|
<div class="top-inner" style="display: flex; flex-direction: column; margin: 0; padding: 0">
|
<div style="width: 100%; height: 20px; border-bottom: 1px solid #1890ff">正常</div>
|
<div style="width: 100%; height: 20px; border-bottom: 1px solid #1890ff">延误</div>
|
<div style="width: 100%; height: 20px; border-bottom: 1px solid #1890ff">严重延误</div>
|
<div style="width: 100%; height: 20px; border-bottom: 1px solid #1890ff">暂停</div>
|
</div>
|
</div>
|
<div class="bot">
|
<div class="bot-inner" style="border-bottom: 1px solid #1890ff">外框粗细 代表项目优先级</div>
|
<div class="bot-inner" style="
|
display: flex;
|
|
flex-direction: column;
|
margin: 0;
|
padding: 0;
|
">
|
<div style="
|
width: 100%;
|
height: 20px;
|
border: 1px solid #1890ff;
|
border-top: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
">
|
<div style="width: 80%; height: 10px; background: #1890ff"></div>
|
</div>
|
<div style="
|
width: 100%;
|
height: 20px;
|
border: 1px solid #1890ff;
|
border-top: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
">
|
<div style="width: 80%; height: 5px; background: #1890ff"></div>
|
</div>
|
<div style="
|
width: 100%;
|
height: 20px;
|
border: 1px solid #1890ff;
|
border-top: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
">
|
|
|
<div style="width: 80%; height: 2px; background: #1890ff"></div>
|
</div>
|
</div>
|
<div class="bot-inner" style="display: flex; flex-direction: column; margin: 0; padding: 0">
|
<div style="width: 100%; height: 20px; border-bottom: 1px solid #1890ff">高</div>
|
<div style="width: 100%; height: 20px; border-bottom: 1px solid #1890ff">中</div>
|
<div style="width: 100%; height: 20px; border-bottom: 1px solid #1890ff">低</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<div v-else class="title-item-box" :class="item.class" :key="index">
|
{{ item.name }}
|
</div>
|
</template>
|
</div>
|
|
<div class="main-content">
|
<div class="mian-item-box" v-for="(box, index) in titles" :key="index + 'box'">
|
<template v-for="(project, index) in dataSource">
|
<div v-if="box.type == project.lcb" class="main-item-sub" :key="index">
|
<a-popover title="菜单">
|
<template slot="content">
|
<p><a @click="editPro(project)">编辑项目</a></p>
|
<p><a @click="openPro(project)">查看项目</a></p>
|
</template>
|
<div class="item" :style="{ border: mBorder(project.lcbyxj), background: mBg(project.lcbzt) }">
|
{{ project.xmmc }}
|
</div>
|
</a-popover>
|
</div>
|
</template>
|
</div>
|
</div>
|
</div>
|
</a-card>
|
|
<LCBModal ref="lcbModal" @ok="lcbOK"></LCBModal>
|
</div>
|
</template>
|
|
<script>
|
|
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
|
import LCBModal from './modules/LCBModal.vue'
|
export default {
|
mixins: [JeecgListMixin],
|
components: {
|
LCBModal
|
},
|
data() {
|
return {
|
titles: [{
|
name: '未开始',
|
class: 't-1',
|
type: 0,
|
},
|
{
|
name: '产品设计',
|
class: 't-1',
|
type: 1,
|
},
|
{
|
name: '计划阶段',
|
class: 't-2',
|
type: 2,
|
},
|
{
|
name: '详细设计',
|
class: 't-3',
|
type: 3,
|
},
|
{
|
name: '样机阶段',
|
class: 't-4',
|
type: 4,
|
},
|
{
|
name: '小批阶段',
|
class: 't-5',
|
type: 5,
|
},
|
{
|
name: '量产阶段',
|
class: 't-6',
|
type: 6,
|
},
|
|
],
|
/**
|
* xmmc: '2165 两倍距离电感式传感器升级',
|
lcb: 3, 里程碑
|
lcbzt: 1, 根据里程碑状态修改背景颜色 分4个类别
|
lcbyxj: 2, 根据优先级生成边框宽度 分3个等级
|
*/
|
dataSource: [],
|
projects: [{
|
xmmc: '2165 两倍距离电感式传感器升级',
|
lcb: 5,
|
lcbzt: 1,
|
lcbyxj: 2,
|
},
|
{
|
xmmc: '2165 测试',
|
lcb: 3,
|
lcbzt: 2,
|
lcbyxj: '',
|
},
|
],
|
columns: [],
|
ipagination: {
|
current: 1,
|
pageSize: 100000,
|
pageSizeOptions: ['10', '20', '30'],
|
showTotal: (total, range) => {
|
return range[0] + '-' + range[1] + ' 共' + total + '条'
|
},
|
showQuickJumper: true,
|
showSizeChanger: true,
|
total: 0
|
},
|
url: {
|
list: 'pro/project/list',
|
|
}
|
}
|
},
|
mounted() {
|
|
},
|
methods: {
|
editPro(project) {
|
//this.$refs.lcbModal.edit(project)
|
this.$router.push({name:'pro-milestone',params: {id: project.id }})
|
|
},
|
openPro(project) {
|
/* this.$router.push({
|
path: '/pro/board',
|
query: {
|
id: project.id
|
}
|
})*/
|
this.$router.push({name:'pro-board',params: {id: project.id }})
|
|
},
|
lcbOK() {
|
this.loadData(1)
|
},
|
|
},
|
computed: {
|
mBorder() {
|
return function(val) {
|
if (val == 1) {
|
return '2px solid #477dbd'
|
} else if (val == 2) {
|
return '5px solid #477dbd'
|
} else if (val == 3) {
|
return '10px solid #477dbd'
|
}
|
}
|
},
|
mBg() {
|
return function(val) {
|
if (val == 1) {
|
return '#00b24b'
|
} else if (val == 2) {
|
return '#e0ae0a'
|
} else if (val == 3) {
|
return '#FF0000'
|
} else if (val == 4) {
|
return '#BFBFBF'
|
}
|
}
|
},
|
},
|
}
|
</script>
|
|
<style scoped lang='less'>
|
.container {
|
width: 100%;
|
height: 100%;
|
background: white;
|
|
.titile {
|
width: 100%;
|
text-align: center;
|
font-size: 24px;
|
font-weight: bold;
|
margin-bottom: 15px;
|
}
|
|
.content-wrpper {
|
.title-content {
|
background: #d9eef3;
|
height: 140px;
|
display: flex;
|
flex-wrap: nowrap;
|
|
.title-item-box {
|
flex: 1;
|
box-sizing: border-box;
|
border: 2px solid #1890ff;
|
margin: 0 -2px -2px 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 24px;
|
|
.custom-title-box {
|
width: 100%;
|
height: 100%;
|
font-size: 10px;
|
|
.top {
|
height: 80px;
|
display: flex;
|
flex-direction: row;
|
flex-wrap: nowrap;
|
overflow: hidden;
|
text-align: center;
|
font-size: 10px;
|
|
.top-inner {
|
color: black;
|
flex: 0 0 33.33%;
|
line-height: 15px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
div {
|
overflow: hidden;
|
box-sizing: border-box;
|
}
|
}
|
}
|
|
.bot {
|
height: 60px;
|
display: flex;
|
flex-direction: row;
|
flex-wrap: nowrap;
|
overflow: hidden;
|
text-align: center;
|
font-size: 10px;
|
|
.bot-inner {
|
color: black;
|
flex: 0 0 33.33%;
|
line-height: 15px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
div {
|
overflow: hidden;
|
box-sizing: border-box;
|
}
|
}
|
}
|
}
|
}
|
|
.t-1 {
|
color: #969696;
|
}
|
|
.t-2 {
|
color: #808100;
|
}
|
|
.t-3 {
|
color: #322e9c;
|
}
|
|
.t-4 {
|
color: #9b3300;
|
}
|
|
.t-5 {
|
color: #24cccd;
|
}
|
|
.t-6 {
|
color: #2d9a64;
|
}
|
|
.t-7 {
|
color: #e0ae0a;
|
}
|
|
.t-8 {
|
color: #000;
|
}
|
}
|
|
.main-content {
|
height: 100%;
|
display: flex;
|
flex-wrap: nowrap;
|
|
.mian-item-box {
|
height: 100%;
|
height: 600px;
|
flex:1;
|
overflow-y: scroll;
|
box-sizing: border-box;
|
border: 2px solid #1890ff;
|
margin: 0 -2px -2px 0;
|
display: flex;
|
flex-direction: column;
|
|
.main-item-sub {
|
height: 100px;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.item {
|
box-sizing: border-box;
|
width: 90%;
|
height: 80px;
|
border: 3px solid #e5e5e5;
|
border-radius: 50%;
|
background: wheat;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 0 5px;
|
text-align: center;
|
font-size: 12px;
|
cursor: pointer;
|
color: white;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
