Commit 23ecb272 by lichengming

修改了项目进度

parent d025b3d8
<template>
<div :id="refName" :ref="refName" class="mescroll">
<div :class="emptyCls" v-show="showEmptySlot">
<slot name="empty"></slot>
</div>
<div>
<slot></slot>
</div>
</div>
</template>
<script>
/**
* 上拉加载,下拉刷新
*/
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
export default {
props: {
pageSize: {
type: Number,
default: 10
},
downOptions: Object,
upOptions: Object
},
data() {
return {
showEmptySlot: false,
refName: 'mescroll_' + Date.now(),
instance: null
}
},
computed: {
emptyCls() {
return this.refName + '_empty'
}
},
mounted() {
this.$nextTick(this.$_init())
},
methods: {
$_init() {
this.showEmptySlot = false
if (this.instance) this.instance.destroy()
this.instance = new MeScroll(this.refName, {
down: Object.assign(
{
use: true,
auto: false // 默认不执行下拉刷新的回调
},
this.downOptions
),
up: Object.assign(
{
callback: this.$_upCallback,
use: true,
isBounce: false,
offset: 100,
// 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据
noMoreSize: 1,
htmlNodata: '<p class="upwarp-nodata">-- 到底啦 --</p>',
loadFull: {
// 不满一屏自动加载
use: false,
delay: 500
},
page: {
num: 0,
size: this.pageSize,
time: null
},
scrollbar: {
use: false
}
},
this.upOptions
)
})
const _this = this
this.instance.showEmpty = function() {
_this.showEmptySlot = true
}
this.instance.removeEmpty = function() {
_this.showEmptySlot = false
}
},
// 上拉回调
$_upCallback(page) {
this.$emit('load', page.num)
},
getInstance() {
return this.instance
},
endByPage(curPagelen, totalPage) {
// curPagelen 当前界面已加载 完成的数据条数
// totalPage 总的分页数
this.instance && this.instance.endByPage(curPagelen, totalPage)
}
}
}
</script>
<style>
.mescroll-upwarp {
min-height: 10px !important;
padding: 5px 0 !important;
}
</style>
<template>
<div>
<div style="padding-left: 20px;padding-top: 40px;padding-bottom: 10px">
<ul class="ul-progress">
<li v-for="(item,index) in progressList" :key="index">
<!--进度条 start-->
<div style="position: relative">
<label class="view-progress fl">
<!-- <Progress :percent="45" :stroke-width="20" status="active" text-inside />-->
<Progress :percent="30" status="active" hide-info></Progress>
</label>
<label :class="{'process-actives':state >= index}" class="progress-bg-gray fl process-actives">
<label class="progress-bg-white" style="display: inline-block;max-width: 100%;margin-bottom: 4px;font-weight: 700;"></label>
</label>
<div class="clear"></div>
</div>
<!--进度条 end-->
<!--内容 start-->
<div class="ul-progress-cont">
<p>{{item.name}}</p>
<p style="color: #b0b0b0;font-size:12px">{{item.time !==undefined? $dateformat(item.time, "yyyy-mm-dd"):''}}</p>
<p style="color: #b0b0b0;font-size:12px">{{item.user === undefined ? '' : item.user}}</p>
</div>
<!--进度条 end-->
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
props: {
progressList: null,
state: null
}
}
</script>
<style>
.ul-progress li {
float: left;
position: relative;
padding: 0 0 70px 0;
}
.fl {
float: left;
}
.ul-progress li:first-child .view-progress {
width: 140px;
}
.view-progress {
width: 180px;
}
.ul-progress li .progress-bg-gray {
background: #b5b5b5;
border-radius: 50%;
width: 40px;
height: 40px;
border: 3px solid #fff;
text-align: center;
line-height: 45px;
position: absolute;
right: -10px;
top: -10px;
z-index: 100;
}
.process-actives {
background: #00a1e8 !important;
}
.ul-progress-cont {
text-align: center;
margin-top: 15px;
position: absolute;
right: -15px;
}
.ul-progress li .progress-bg-white {
background: #fff !important;
width: 10px;
height: 10px;
border-radius: 50%;
}
</style>
...@@ -30,6 +30,7 @@ ...@@ -30,6 +30,7 @@
"form-serialize": "^0.7.2", "form-serialize": "^0.7.2",
"iview": "^3.3.3", "iview": "^3.3.3",
"koa": "^2.6.2", "koa": "^2.6.2",
"mescroll.js": "^1.4.2",
"node-schedule": "^1.3.0", "node-schedule": "^1.3.0",
"nuxt": "^2.4.0", "nuxt": "^2.4.0",
"nuxt-start": "^2.5.1", "nuxt-start": "^2.5.1",
......
<template>
<div>
<div class="layout-content-padding">
<div class="layout-content-main">
<Row style="margin-top: 10px;">
<!--查询条件-->
<!--样品进度-->
<!--<Col span="24">-->
<!--<SampleSteps :info="sampleInfo" ref="stepsModal"></SampleSteps>-->
<!--</Col>-->
<Col :style="processObj" span="24">
<VScrollFull ref="myscrollfull" @load="_loadData" :pageSize="rows">
<div slot="empty" style="text-align:center" class="gray-color">暂无数据</div>
<SampleSteps ref="stepsModal" :info="sampleInfo"></SampleSteps>
</VScrollFull>
</Col>
</Row>
</div>
</div>
</div>
</template>
<script>
import VScrollFull from '../../../components/base/VScrollFull'
import { soilStatistics } from '../../../api'
import SampleSteps from './SampleSteps'
export default {
components: {
SampleSteps,
VScrollFull
},
data() {
return {
dateList: [],
sampleProgressList: ['已分配', '检测完成', '复核', '校核'],
// 样品信息
sampleInfo: [],
testTypeList: [],
// 合同id
contractId: '',
//
page: 0,
rows: 10,
formObj: {},
processObj: {
height: document.documentElement.clientHeight - 300 + 'px'
},
typeList: [{ name: '企业', value: 0 }, { name: '政府', value: 1 }]
}
},
mounted() {
// this._initData()
},
methods: {
_reportDateChange(data) {
$('input[name="reportDateBegin"]').val(data[0])
$('input[name="reportDateEnd"]').val(data[1])
},
// 日期
_ctimeChange(data) {
$('input[name="beginDate"]').val(data[0])
$('input[name="endDate"]').val(data[1])
},
_search() {
// 超期未完成(默认的)
// 重置
this.$refs.myscrollfull.$_init()
},
_loadData: async function(pageIndex) {
console.log('pageIndex', pageIndex)
this.page = pageIndex
if (pageIndex === 1) {
this.sampleInfo = []
}
Object.assign(this.formObj, this._searchParams())
const result = await soilStatistics.pageWaitEnd(this.formObj)
if (result) {
const records = result.records
const pages = result.pages
// for (let i = 0; i < records.length; i++) {
// // 获取下标
// records[i].index = this.sampleProgressList.indexOf(records[i].index)
// }
// this.sampleInfo = records
this.sampleInfo = this.sampleInfo.concat(records)
this.$refs.myscrollfull.endByPage(this.sampleInfo.length, pages)
}
// this.$store
// .dispatch('StbSampleProgress/list', this._searchParams())
// .then(() => {
// const result = this.$store.state.StbSampleProgress.list
// const records = result.records
// const pages = result.pages
// for (let i = 0; i < records.length; i++) {
// // 获取下标
// records[i].statisStatusIndex = this.sampleProgressList.indexOf(
// records[i].statisStatus
// )
// }
// this.sampleInfo = this.sampleInfo.concat(records)
// this.$refs.myscrollfull.endByPage(this.sampleInfo.length, pages)
// })
},
// 获取模块数量
_statusChange(data, list) {
const temp = []
const blueList = list.blueList
const redList = list.redList
const greenList = list.greenList
const orgList = list.orgList
for (let i = 0; i < blueList.length; i++) {
temp.push(blueList[i])
}
for (let i = 0; i < redList.length; i++) {
temp.push(redList[i])
}
for (let i = 0; i < greenList.length; i++) {
temp.push(greenList[i])
}
for (let i = 0; i < orgList.length; i++) {
temp.push(orgList[i])
}
if (temp.length !== 0) {
$('input[name=queryTypeList]').val(temp.join(','))
} else {
$('input[name=queryTypeList]').val('')
}
this._search()
},
_searchParams() {
const data = this.$serialize('search-form-sample-progress')
data.page = this.page
data.rows = this.rows
return this.$extend(data)
}
}
}
</script>
<template>
<div>
<div v-for="itemInfo in info" class="contract-box">
<Row>
<!--样品信息-->
<Col span="6">
<ul class="progress-ul">
<li>
<div class="title">名称</div>
<div class="cont">
<a
: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}}</a>
</div>
</li>
<li>
<div class="title">编号</div>
<div class="cont">
{{itemInfo.projectNo}}
</div>
</li>
<li>
<div class="title">钻孔名称</div>
<div class="cont">
{{itemInfo.boreholeName}}
</div>
</li>
</ul>
</Col>
<!--样品进度信息-->
<Col span="18">
<ProgressList :progressList="[{name:'已分配',time:itemInfo.signDate,user:itemInfo.signer},
{name:'检测完成',time:itemInfo.receiveDate,user:itemInfo.receiver},{name:'已复核',time:itemInfo.testDate,user:itemInfo.tester},
{name:'已校核',time:itemInfo.reportMakeDate,user:itemInfo.reportMaker}]"
:state="itemInfo.index"></ProgressList>
</Col>
</Row>
</div>
</div>
</template>
<script>
import ProgressList from '../../../components/statistic/ProgressList'
export default {
components: { ProgressList },
props: {
info: null
},
data() {
return {
progressList: [],
sampleInfo: []
}
},
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%;
}
</style>
...@@ -26,6 +26,9 @@ ...@@ -26,6 +26,9 @@
<Col span="12"> <Col span="12">
<UnfinishedContract></UnfinishedContract> <UnfinishedContract></UnfinishedContract>
</Col> </Col>
<Col span="24">
<SampleProgress></SampleProgress>
</Col>
<Col span="12"> <Col span="12">
<UnfinishedItem></UnfinishedItem> <UnfinishedItem></UnfinishedItem>
</Col> </Col>
...@@ -84,6 +87,7 @@ import YearTestItem from './YearTestItem' ...@@ -84,6 +87,7 @@ import YearTestItem from './YearTestItem'
import YearOverItem from './YearOverItem' import YearOverItem from './YearOverItem'
import GroupItem from './GroupItem' import GroupItem from './GroupItem'
import CustomerContract from './CustomerContract' import CustomerContract from './CustomerContract'
import SampleProgress from './sample-progress/SampleProgress'
export default { export default {
name: 'Workbench', name: 'Workbench',
components: { components: {
...@@ -116,7 +120,9 @@ export default { ...@@ -116,7 +120,9 @@ export default {
// eslint-disable-next-line vue/no-unused-components // eslint-disable-next-line vue/no-unused-components
GroupItem, GroupItem,
// eslint-disable-next-line vue/no-unused-components // eslint-disable-next-line vue/no-unused-components
CustomerContract CustomerContract,
// eslint-disable-next-line vue/no-unused-components
SampleProgress
}, },
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