Skip to content

P
patzn-cloud-web-back-soil
Commit 4e08240e by wangweidong
Options

Merge remote-tracking branch 'origin/dev' into dev

parents 2daf0dd4 955dc454
Showing with 778 additions and 1 deletions
components/flow/FlowBranch.vue 0 → 100644
<template>
<div class="flow-start" style="position: relative">
<div v-if="index === 0" :class="classObj(1)" class="flow-start-border"></div>
<div v-if="index === 1" :class="classObj(3)" class="flow-start-border"></div>
<div v-for="(item,itemIndex) in list" :key="itemIndex" style="position: relative;margin-bottom: 70px">
<div v-if="item.type !== 'rect'" class="flow-start">
<PtArrow :value="item.value" style="margin-top: 32px;"/>
<PtCircle :name="item.name" :per="item.per?item.per:''" :value="item.value"/>
</div>
<div v-if="item.type === 'rect'" class="flow-start" style="position: absolute;right: -10px;bottom:-60px">
<PtArrow :isRote="true" :value="item.value"/>
<PtRect :name="item.name" :value="item.value" style="margin-top: 60px;"/>
</div>
<!--最后的连接线-->
<div style="position: absolute;left: 81px;top: 30px">
<PtArrow v-if="item.line" :width="index === 1?'60px':'100px'"
:noArrow="index !== 1?true:false"
:value="endValue()"/>
</div>
</div>
</div>
</template>
<script>
/**
* 分支组合
*/
import PtArrow from './PtArrow.vue'
import PtRect from './PtRect.vue'
import PtCircle from './PtCircle.vue'
export default {
name: 'FlowBranch',
components: {
PtArrow,
PtRect,
PtCircle
},
props: {
// 数据源
list: null,
// 第几个分支
index: null,
// 最后一部分
endList: null,
// 分支总数据
branch: null
},
methods: {
// 左侧的边线
classObj(msg) {
// const list_0_value = this.branch[0][0].value
const listZeroValue = this.branch[0][0].value
// const list_2_value = this.branch[2][0].value
const listTwoValue = this.branch[2][0].value
if (msg === 1) {
// switch (list_0_value) {
switch (listZeroValue) {
case true:
return 'blue-flow-start-border'
case false:
return 'red-flow-start-border'
}
}
if (msg === 3) {
switch (listTwoValue) {
case true:
return 'blue-flow-start-border'
case false:
return 'red-flow-start-border'
}
}
},
// 右侧的连接线
endValue() {
// 最后一个节点数据
// const current_value = this.list[2].value
const currentValue = this.list[2].value
const endValue = this.endList[0].value
// const list_0_value = this.list[0].value
const listZeroValue = this.list[0].value
// if (current_value) {
if (currentValue) {
return undefined
} else if (currentValue === false) {
return undefined
} else {
// undefined,说明要接着向下走
// eslint-disable-next-line no-lonely-if
if (listZeroValue !== undefined && endValue) {
return true
} else if (listZeroValue !== undefined && endValue === false) {
return false
}
}
}
}
}
</script>
<style scoped>
.flow-start-border {
width: 2px;
height: 133px;
background: #666;
position: absolute;
top: 30px;
}
.blue-flow-start-border {
background: #00a0e9;
}
.red-flow-start-border {
background: #eb6877;
}
</style>
components/flow/Legend.vue 0 → 100644
<template>
<div>
<div v-for="(item,index) in list"
:key="index" class="flow-start margin-bottom-10">
<div :class="item.class"></div>
<div class="legend-cont">{{item.name}}</div>
</div>
</div>
</template>
<script>
/**
* 图例
*
*/
export default {
name: 'Legend',
data() {
return {
list: [
{ name: '已流转', class: 'legend-blue' },
{ name: '待流转', class: 'legend-red' },
{ name: '无', class: 'legend-gray' }
]
}
}
}
</script>
<style scoped>
.legend-blue {
width: 15px;
height: 15px;
background: #00a0e9;
}
.legend-red {
width: 15px;
height: 15px;
background: #eb6877;
}
.legend-gray {
width: 15px;
height: 15px;
background: #999;
}
.legend-cont {
font-size: 12px;
margin-left: 5px;
margin-top: -3px;
}
.margin-bottom-10 {
margin-bottom: 10px;
}
</style>
components/flow/PtArrow.vue 0 → 100644
<template>
<div
:class="{'rotate-90':isRote,'rotate--90':isRote1}"
style="display: flex;flex-direction: row">
<div :style="{'width':width?width:'10px'}"
:class="classObj(value,'left')"
class="arrow-left"></div>
<div :class="classObj(value,'right')"
v-show="noArrow === undefined || noArrow === false"
class="arrow-right"></div>
</div>
</template>
<script>
/**
* 箭头
*/
export default {
name: 'PtArrow',
props: {
// 箭头宽度
width: null,
// 是否进行旋转，默认否
isRote: null,
isRote1: null,
// 是否显示右侧的箭头标志
noArrow: null,
// 根据value值判断颜色
value: null
},
methods: {
// 颜色
classObj(value, msg) {
switch (value) {
case true:
return msg === 'left' ? 'blue-color-left' : 'blue-color-right'
case false:
return msg === 'left' ? 'red-color-left' : 'red-color-right'
default:
break
}
}
}
}
</script>
<style scoped>
.arrow-left {
height: 2px;
background: #666;
}
.arrow-right {
border: 6px solid transparent;
border-left: 10px solid #666;
width: 0;
height: 0px;
margin-top: -5px;
margin-right: -6px;
}
.rotate-90 {
-moz-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
.rotate--90 {
-moz-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
}
.blue-color-left {
background: #00a0e9;
}
.red-color-left {
background: #eb6877;
}
.blue-color-right {
border-left-color: #00a0e9;
}
.red-color-right {
border-left-color: #eb6877;
}
</style>
components/flow/PtCircle.vue 0 → 100644
<template>
<div :class="classObj(value)" class="circle">
<span :class="style(name)">{{name}}{{per}}</span>
</div>
</template>
<script>
/**
* 圆形
*/
export default {
name: 'PtCircle',
props: {
// 显示的内容
name: null,
value: null,
per: null
},
methods: {
// 文字居中问题
style(name) {
if (name && name.length <= 4) {
if (name === '完成率' && this.per !== '') {
return 'marginTop-10'
}
return 'lineHeight-60'
} else {
return 'marginTop-10'
}
},
// 颜色
classObj(value) {
switch (value) {
case true:
return 'blue-color'
case false:
return 'red-color'
default:
break
}
}
}
}
</script>
<style scoped>
.circle {
width: 60px;
height: 60px;
border: 1px solid #999;
background: #999;
color: #fff;
border-radius: 50%;
text-align: center;
font-size: 12px;
}
.circle span {
word-wrap: break-word;
display: inline-block;
width: 50px;
}
.lineHeight-60 {
line-height: 60px;
}
.marginTop-10 {
margin-top: 10px;
}
.blue-color {
border-color: #00a0e9;
background-color: #00a0e9;
color: #fff;
}
.red-color {
border-color: #eb6877;
background-color: #eb6877;
color: #fff;
}
</style>
components/flow/PtRect.vue 0 → 100644
<template>
<div :class="classObj(value)" class="rect">{{name}}</div>
</template>
<script>
/**
* 矩形
*/
export default {
name: 'PtRect',
props: {
// 显示的内容
name: null,
// 节点变色的依据（存在的变色）
value: null
},
methods: {
// 颜色
classObj(value) {
switch (value) {
case true:
return 'blue-color'
case false:
return 'red-color'
default:
break
}
}
}
}
</script>
<style scoped>
.rect {
padding: 10px;
border: 1px solid #999;
background: #999;
color: #fff;
font-size: 12px;
width: 80px;
text-align: center;
}
.blue-color {
border-color: #00a0e9;
background-color: #00a0e9;
color: #fff;
}
.red-color {
border-color: #eb6877;
background-color: #eb6877;
color: #fff;
}
</style>
pages/workbench/ItemFlow.vue 0 → 100644
<template>
<div>
<div v-for="(itemInfo, index) in sampleInfo" :key="index" class="contract-box">
<Row>
<!--样品信息-->
<Col span="6">
<ul class="progress-ul">
<li>
<div class="title">委托单位</div>
<div class="cont">
<span
:title="itemInfo.client?itemInfo.client:''"
:class="{
'blue-color':itemInfo.queryType === 0,
'green-color':itemInfo.queryType === 1,
'red-color':itemInfo.queryType === 2,
'warning-color':itemInfo.queryType === 3
}"
style="font-weight: bold"
>{{itemInfo.client}}</span>
</div>
</li>
<li>
<div class="title">委托编号</div>
<div class="cont">
{{itemInfo.entrustCode}}
</div>
</li>
<li>
<div class="title">钻孔名称</div>
<div class="cont">
{{itemInfo.boreholeName}}
</div>
</li>
<li>
<div class="title">水深(米)</div>
<div class="cont">
{{itemInfo.waterDepth}}
</div>
</li>
<li>
<div class="title">委托日期</div>
<div class="cont">
{{itemInfo.waterDepth}}
</div>
</li>
<li>
<div class="title">项目负责人</div>
<div class="cont">
{{itemInfo.waterDepth}}
</div>
</li>
<li>
<div class="title">项目名称</div>
<div class="cont">
{{itemInfo.waterDepth}}
</div>
</li>
<li>
<div class="title">钻孔位置</div>
<div class="cont">
{{itemInfo.waterDepth}}
</div>
</li>
<li>
<div class="title">进度</div>
<div class="cont">
{{itemInfo.waterDepth}}
</div>
</li>
</ul>
</Col>
<!--样品进度信息-->
<Col span="18">
<flowIndex></flowIndex>
</Col>
</Row>
</div>
</div>
</template>
<script>
import flowIndex from './flowIndex'
export default {
components: { flowIndex },
props: {
info: null
},
data() {
return {
progressList: [],
sampleInfo: [
{
client:
'中海油服中海油服中海油服中海油服中海油服中海油服中海油服中海油服中海油服中海油服',
name: 1,
boreholeName: 1
},
{ client: 2, name: 2, boreholeName: 2 },
{ client: 3, name: 3, boreholeName: 3 },
{ client: 4, name: 4, boreholeName: 4 }
]
}
},
watch: {
info: function(newVal, oldVal) {
console.log('newVal===========', newVal.oldValue)
}
},
mounted() {
this._console(this.info)
},
methods: {
_sampleClick(data) {
// 样品详情
this.$refs.detail._open(data)
},
_console(info) {
console.log('info', info)
}
}
}
</script>
<style>
.progress-ul li {
border: 1px solid #ddd;
overflow: hidden;
}
.progress-ul li .title {
padding: 13px;
}
.progress-ul li .title {
width: 35%;
background: #eee;
padding: 13px;
border-right: 1px solid #ddd;
float: left;
}
.progress-ul li .cont {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-top: 15px;
padding-left: 15px;
float: left;
width: 65%;
}
.contract-box {
margin: 10px 0;
}
.contract-box {
border: 1px solid #dcdcdc;
}
</style>
pages/workbench/flowIndex.vue 0 → 100644
<template>
<div style="position:relative;width:100%">
<div style="margin-top: 134px;">
<div class="flow-start">
<!--1.开始-->
<div class="flow-start">
<div
v-for="(itemStart,startIndex) in list.start"
:key="startIndex"
class="flow-start">
<PtCircle :name="itemStart.name" :value="itemStart.value"/>
<PtArrow :width="startIndex === 2?'20px':'10px'"
:noArrow="startIndex === 2?true:false"
:value="startEnd(startIndex,itemStart.value)"
style="margin-top: 30px;"/>
</div>
</div>
<!--2.分支-->
<div style="margin-top: -132px">
<div
v-for="(itemBranch,branchIndex) in list.branch"
:key="branchIndex">
<!--比较麻烦的在这里 start-->
<FlowBranch :list="itemBranch" :index="branchIndex" :endList="list.end" :branch="list.branch"/>
<!--比较麻烦的在这里 end-->
</div>
</div>
<!--3.结束-->
<div class="flow-start" style="margin-left: 70px;position: relative">
<div
v-for="(itemEnd,endIndex) in list.end"
:key="endIndex"
class="flow-start">
<!--上面的连接线-->
<PtArrow v-if="endIndex === 0" :isRote="true" :value="upLineClassObj()"
width="90px" style="position: absolute;top:-55px;left: -25px"/>
<!--下面的连接线-->
<PtArrow v-if="endIndex === 0" :isRote1="true" :value="downLineClassObj()"
width="90px" style="position: absolute;top:110px;left: -20px"/>
<PtCircle :name="itemEnd.name" :value="itemEnd.value"/>
<PtArrow v-if="endIndex !== 3" :value="endArrow(endIndex)" style="margin-top: 30px;"/>
</div>
</div>
</div>
</div>
<Legend style="position:absolute;bottom:0;right:0"/>
</div>
</template>
<script>
/**
* 流程结构
* 1.节点固定
* 2.蓝色的表示已经流转的节点；红色的表示在流程中，但是没有流转到的节点；灰色的表示没有的节点
* 3.前端根据value区分：value 为true--蓝色，为false--红色，undefined:灰色
* 4.key 值唯一，表示一个节点的英文名称
*/
import PtArrow from '../../components/flow/PtArrow'
import PtCircle from '../../components/flow/PtCircle'
import FlowBranch from '../../components/flow/FlowBranch'
import Legend from '../../components/flow/Legend'
export default {
name: 'Index',
components: {
PtArrow,
PtCircle,
FlowBranch,
Legend
},
data() {
return {
list: {
start: [
{ name: '收样', key: 'key1' },
{ name: '任务评审', key: 'key2' },
{ name: '开土', key: 'key3' }
],
branch: [
[
{ name: '物性试验', key: 'key4' },
{ name: '完成率', key: 'key5', line: true },
{ name: '自校版1', key: 'key6', type: 'rect' }
],
[
{ name: '力学试验', key: 'key7' },
{ name: '完成率', key: 'key8', line: true },
{ name: '自校版2', key: 'key9', type: 'rect' }
],
[
{ name: '高级试验', key: 'key10' },
{ name: '完成率', key: 'key11', line: true },
{ name: '自校版1', key: 'key12', type: 'rect' }
]
],
end: [
{ name: '报告编制', key: 'key13' },
{ name: '报告审核', key: 'key14' },
{ name: '报告批准', key: 'key15' },
{ name: '报告签发', key: 'key16' }
]
},
// 构造数据源
obj: {}
}
},
mounted() {
this.getData()
},
methods: {
getData() {
// 1.后台返回的数据，需要流转的全部节点数据（前后盾自己定义，对应上即可）
// key:bool (已经流转的节点为true,待流转的节点为false)
this.obj = {
key1: true,
key2: true,
key3: true,
key4: true,
key5: true,
// key6: false,
// key7: true,
// key8: true,
// key9: true,
// key10: false,
// key11: false,
// key12: false,
key13: false,
key14: false,
key15: false,
key16: false,
key20: '20%'
}
// 2.前端进行过组合数据
const startArray = this.list.start
const branchArray = this.list.branch.flat() // 将一个二维数组拉平
const endArray = this.list.end
const allArray = startArray.concat(branchArray, endArray)
for (let i = 0; i < allArray.length; i++) {
const key = allArray[i].key
this.$set(allArray[i], 'value', this.obj[key])
if (allArray[i].key === 'key8') {
this.$set(allArray[i], 'per', this.obj.key20)
}
}
console.log('allArray', allArray)
console.log('this.list', this.list)
},
// 上面连接线颜色
upLineClassObj() {
const valueZero = this.list.end[0].value
const upValue = this.list.branch[0][2].value
const upValueZero = this.list.branch[0][0].value
if (
upValue !== undefined ||
(upValue === undefined && upValueZero === undefined)
) {
return undefined
} else {
return valueZero
}
},
// 下面连接线颜色
downLineClassObj() {
const valueZero = this.list.end[0].value
const downValue = this.list.branch[2][2].value
const downValueZero = this.list.branch[2][0].value
if (
downValue !== undefined ||
(downValue === undefined && downValueZero === undefined)
) {
return undefined
} else {
return valueZero
}
},
// 开始模块的最后一个节点颜色(根据branch的第一个节点判断)
startEnd(index) {
let itemValue
const itemList = this.list.start[index + 1]
if (itemList !== undefined) {
itemValue = itemList.value
}
const branchZero = this.list.branch[0][0].value
const branchOne = this.list.branch[1][0].value
const branchTwo = this.list.branch[2][0].value
if (index === 2) {
if (branchZero !== undefined) {
return branchZero
}
if (branchOne !== undefined) {
return branchOne
}
if (branchTwo !== undefined) {
return branchTwo
}
} else {
return itemValue
}
},
endArrow(index) {
let itemValue
const itemList = this.list.end[index + 1]
if (itemList !== undefined) {
itemValue = itemList.value
}
return itemValue
}
}
}
</script>
<style>
.flow-start {
display: flex;
flex-direction: row;
justify-items: center;
}
</style>
pages/workbench/workbench.vue
...@@ -56,6 +56,9 @@ ...@@ -56,6 +56,9 @@
<!-- <Col span="12">--> <!-- <Col span="12">-->
<!-- <CustomerContract></CustomerContract>--> <!-- <CustomerContract></CustomerContract>-->
<!-- </Col>--> <!-- </Col>-->
<Col span="24">
<ItemFlow></ItemFlow>
</Col>
<div :style="{height}" v-if="moduleList.length" class="config_home"> <div :style="{height}" v-if="moduleList.length" class="config_home">
<Row :gutter="10"> <Row :gutter="10">
<Col <Col
...@@ -91,6 +94,7 @@ import GroupItem from './GroupItem' ...@@ -91,6 +94,7 @@ import GroupItem from './GroupItem'
import CustomerContract from './CustomerContract' import CustomerContract from './CustomerContract'
import SampleProgress from './sample-progress/SampleProgress' import SampleProgress from './sample-progress/SampleProgress'
import SampleProgressDetail from './SampleProgressDetail' import SampleProgressDetail from './SampleProgressDetail'
import ItemFlow from './ItemFlow'
export default { export default {
name: 'Workbench', name: 'Workbench',
components: { components: {
...@@ -127,7 +131,9 @@ export default { ...@@ -127,7 +131,9 @@ export default {
// eslint-disable-next-line vue/no-unused-components // eslint-disable-next-line vue/no-unused-components
SampleProgress, SampleProgress,
// eslint-disable-next-line vue/no-unused-components // eslint-disable-next-line vue/no-unused-components
SampleProgressDetail SampleProgressDetail,
// eslint-disable-next-line vue/no-unused-components
ItemFlow
}, },
data() { data() {
return { return {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment