|
|
|
|
@ -0,0 +1,698 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="service">
|
|
|
|
|
<a-spin :spinning="flowLoad">
|
|
|
|
|
<div class="list-box" @click="handleDetail">
|
|
|
|
|
<div class="list-box-title">
|
|
|
|
|
<span>提单号：{{ flowData.blNo }}</span>
|
|
|
|
|
<div>{{ flowData.carrier }}</div>
|
|
|
|
|
<span style="display: flex;align-items: center;">
|
|
|
|
|
<img src="./u1041.svg" alt=""> 起运港:{{ flowData.routingInfoList ? flowData.routingInfoList[0].loading : '-'
|
|
|
|
|
}}
|
|
|
|
|
<a-icon style="margin: 0 15px;" type="swap-right" />
|
|
|
|
|
<img src="./u1041.svg" alt=""> 目的港：{{ flowData.routingInfoList ? flowData.routingInfoList[0].discharging :
|
|
|
|
|
'-' }}</span>
|
|
|
|
|
<div>船名：{{ flowData.vslNameEn }}</div>
|
|
|
|
|
<div>航次：{{ flowData.voy }}</div>
|
|
|
|
|
<span style="cursor: pointer;color: blue;" >详情<a-icon
|
|
|
|
|
type="appstore"
|
|
|
|
|
theme="filled" /></span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="list-box-content">
|
|
|
|
|
<div class="content-right">
|
|
|
|
|
<div
|
|
|
|
|
class="conent-item"
|
|
|
|
|
:class="{ 'active': item.isComplete, 'isEnd': item.isCurrentStatus }"
|
|
|
|
|
v-for="(item, index) in embedTraceFlowStatusList"
|
|
|
|
|
:key="index">
|
|
|
|
|
<div class="line" v-if="index !== 0 && !item.isSplitEnd"></div>
|
|
|
|
|
<div class="line-long" v-if="item.isSplitEnd"></div>
|
|
|
|
|
<div class="cont-box">
|
|
|
|
|
<div class="item-top">{{ item.statusCnName }}</div>
|
|
|
|
|
<a-icon class="icon" v-if="!item.isCurrentStatus" type="check-circle" theme="filled" />
|
|
|
|
|
<img v-else src="./1.png" style="height: 20px;width: 20px;" alt="">
|
|
|
|
|
<div class="item-bottom">{{ item.statusCtnStatic }}箱</div>
|
|
|
|
|
<div class="item-time" v-if="item.isCurrentStatus">{{ item.statusTime }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main-box" v-if="showFlag">
|
|
|
|
|
<div class="box-left">
|
|
|
|
|
<div
|
|
|
|
|
class="box-tab"
|
|
|
|
|
@click="handleClick(index)"
|
|
|
|
|
:class="{ 'isActive': item.isActive }"
|
|
|
|
|
v-for="(item, index) in flowData.containerInfoList"
|
|
|
|
|
:key="index">
|
|
|
|
|
<div style="font-size: 15px;font-weight: bold;color: black">{{ item.containerNo }}</div>
|
|
|
|
|
<div style="font-size: 12px;color: #666;margin: 5px 0;">{{ item.sizeName ? item.sizeName : item.size }}</div>
|
|
|
|
|
<div style="font-size: 12px;color: green;">开船:{{ item.currentNodeTime }}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-right">
|
|
|
|
|
<div>
|
|
|
|
|
<a-row style="margin-bottom: 20px">
|
|
|
|
|
<a-col :span="6" style="color: #122db3;font-size: 14px;font-weight: bold;">箱号：{{ flowData.containerInfoList[changeIndex].containerNo }}</a-col>
|
|
|
|
|
<!-- <a-col :span="6">VGM：M/CN50000001</a-col>
|
|
|
|
|
<a-col :span="6">VGM接收时间：-</a-col>
|
|
|
|
|
<a-col :span="6">配载：Y</a-col> -->
|
|
|
|
|
</a-row>
|
|
|
|
|
<!-- <a-table
|
|
|
|
|
style="margin: 15px 0;margin-bottom: 30px;"
|
|
|
|
|
:pagination="false"
|
|
|
|
|
bordered
|
|
|
|
|
size="small"
|
|
|
|
|
:data-source="data">
|
|
|
|
|
<a-table-column key="name" title="报关单号" data-index="name"></a-table-column>
|
|
|
|
|
<a-table-column key="name1" title="件数" data-index="name1"></a-table-column>
|
|
|
|
|
<a-table-column key="name2" title="毛重" data-index="name2"></a-table-column>
|
|
|
|
|
<a-table-column key="name3" title="体积" data-index="name3"></a-table-column>
|
|
|
|
|
<a-table-column key="name4" title="船公司操作" data-index="name4"></a-table-column>
|
|
|
|
|
</a-table> -->
|
|
|
|
|
</div>
|
|
|
|
|
<div class="box-right-title">
|
|
|
|
|
<span style="width: 150px">动态</span>
|
|
|
|
|
<span style="width: 190px">时间</span>
|
|
|
|
|
<span style="width: 150px;margin-right: 20px;">地点</span>
|
|
|
|
|
<span style="width: 150px">船名航次</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div
|
|
|
|
|
class="box-item"
|
|
|
|
|
:class="{ 'isActive': item.isEst == 'N' }"
|
|
|
|
|
v-for="(item, index) in timeList"
|
|
|
|
|
:key="index">
|
|
|
|
|
<div class="box-time">
|
|
|
|
|
<div class="time-line" :style="{ background: index == 0 ? 'none' : '' }"></div>
|
|
|
|
|
<div class="time-circular" v-if="!item.isCurrentStatus"></div>
|
|
|
|
|
<img v-else src="./1.png" style="height: 15px;width: 15px;" alt="">
|
|
|
|
|
<div class="time-line" :style="{ background: index == timeList.length - 1 ? 'none' : '' }"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div style="display: flex;align-items: center;padding: 15px 0;">
|
|
|
|
|
<div style="width: 150px;">{{ item.statusCnName }}</div>
|
|
|
|
|
<div style="width: 200px;" v-if="item.isEst == 'N'">{{ item.statusTime }} <span class="tag">实</span> </div>
|
|
|
|
|
<div style="width: 200px;" v-else>{{ item.statusTime }} <span class="tag" style="background: #FFF2E6;color: #ff8d1a;">预</span> </div>
|
|
|
|
|
<div style="width: 150px;word-wrap: break-word;margin-right: 20px;">{{ item.statusPlace }}</div>
|
|
|
|
|
<div style="width: 150px;font-size: 12px;word-break: break-all;" v-if="item.vslName">{{ item.vslName }} / {{ item.voy }}</div>
|
|
|
|
|
<div style="width: 150px;font-size: 12px;word-break: break-all;" v-if="!item.vslName">-</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</a-spin>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import {
|
|
|
|
|
GetServiceProiectListIfram,
|
|
|
|
|
GetServiceStatusListIfram,
|
|
|
|
|
CancelServiceProjectIfram,
|
|
|
|
|
SaveServiceProjectIfram,
|
|
|
|
|
SaveServiceStatusIfram,
|
|
|
|
|
CancelServiceStatusIfram,
|
|
|
|
|
GetTraceFlowInfo
|
|
|
|
|
} from '@/api/modular/main/BookingLedger'
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
seriveLoading: false,
|
|
|
|
|
bookingServiceItem: [],
|
|
|
|
|
changeGoods: true,
|
|
|
|
|
flowLoad: true,
|
|
|
|
|
showFlag: false,
|
|
|
|
|
flowData: {},
|
|
|
|
|
GoodsStatusVisible: false,
|
|
|
|
|
GoodsStatusEditData: {},
|
|
|
|
|
StatusVisibleForm: this.$form.createForm(this),
|
|
|
|
|
goodStatusLoading: false,
|
|
|
|
|
booGoodsStatusItem: [],
|
|
|
|
|
delayTime: 500,
|
|
|
|
|
embedTraceFlowStatusList: [],
|
|
|
|
|
timeData: [],
|
|
|
|
|
boxList: [
|
|
|
|
|
{
|
|
|
|
|
name: 'SLEU0000001',
|
|
|
|
|
type: '20GP',
|
|
|
|
|
text: '开航,2024-02-20 14:00',
|
|
|
|
|
isActive: true
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'SLEU0000002',
|
|
|
|
|
type: '20GP',
|
|
|
|
|
text: '开航,2024-02-20 14:00',
|
|
|
|
|
isActive: false
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
name: 'SLEU0000003',
|
|
|
|
|
type: '20GP',
|
|
|
|
|
text: '开航,2024-02-20 14:00',
|
|
|
|
|
isActive: false
|
|
|
|
|
}
|
|
|
|
|
],
|
|
|
|
|
timeList: [],
|
|
|
|
|
data: [{
|
|
|
|
|
name: '测试111',
|
|
|
|
|
name1: '测试111',
|
|
|
|
|
name2: '测试111',
|
|
|
|
|
name3: '测试111',
|
|
|
|
|
name4: '测试111'
|
|
|
|
|
}],
|
|
|
|
|
time: null,
|
|
|
|
|
changeIndex:0,
|
|
|
|
|
labelCol: {
|
|
|
|
|
xs: { span: 24 },
|
|
|
|
|
sm: { span: 8 }
|
|
|
|
|
},
|
|
|
|
|
wrapperCol: {
|
|
|
|
|
xs: { span: 24 },
|
|
|
|
|
sm: { span: 16 }
|
|
|
|
|
},
|
|
|
|
|
labelCol2: {
|
|
|
|
|
xs: { span: 24 },
|
|
|
|
|
sm: { span: 4 }
|
|
|
|
|
},
|
|
|
|
|
wrapperCol2: {
|
|
|
|
|
xs: { span: 24 },
|
|
|
|
|
sm: { span: 20 }
|
|
|
|
|
},
|
|
|
|
|
spinning: false,
|
|
|
|
|
USER_KEY: '',
|
|
|
|
|
businessId: '',
|
|
|
|
|
billNo: '',
|
|
|
|
|
carrier: '',
|
|
|
|
|
ctnNo: '',
|
|
|
|
|
USER_SECRET: '',
|
|
|
|
|
tstyle: { padding: '0 15px 15px', 'margin-bottom': '10px', background: '#fff' }
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
this.USER_KEY = this.$route.query.USER_KEY
|
|
|
|
|
this.carrier = this.$route.query.carrier
|
|
|
|
|
this.billNo = this.$route.query.billNo
|
|
|
|
|
this.ctnNo = this.$route.query.ctnNo
|
|
|
|
|
this.USER_SECRET = this.$route.query.USER_SECRET
|
|
|
|
|
this.getFlowInfo()
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
'$route': {
|
|
|
|
|
immediate: true,
|
|
|
|
|
handler(to, from) {
|
|
|
|
|
if (this.$route.name == 'ServiceItems') {
|
|
|
|
|
this.USER_KEY = this.$route.query.USER_KEY
|
|
|
|
|
this.carrier = this.$route.query.carrier
|
|
|
|
|
this.billNo = this.$route.query.billNo
|
|
|
|
|
this.ctnNo = this.$route.query.ctnNo
|
|
|
|
|
this.USER_SECRET = this.$route.query.USER_SECRET
|
|
|
|
|
this.getFlowInfo()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
saveService(data) {
|
|
|
|
|
const obj = {
|
|
|
|
|
businessId: this.businessId,
|
|
|
|
|
USER_KEY: this.USER_KEY,
|
|
|
|
|
USER_SECRET: this.USER_SECRET,
|
|
|
|
|
projectCodes: [data.projectCode]
|
|
|
|
|
}
|
|
|
|
|
if (!data.isYield) {
|
|
|
|
|
this.bookingServiceItem.forEach((item) => {
|
|
|
|
|
if (item.projectCode == data.projectCode) {
|
|
|
|
|
item.isYield = !item.isYield
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
SaveServiceProjectIfram(obj).then((res) => {
|
|
|
|
|
if (res.success) {
|
|
|
|
|
if (res.data.succ) {
|
|
|
|
|
if (this.time !== null) {
|
|
|
|
|
this.stopTimer()
|
|
|
|
|
}
|
|
|
|
|
this.time = setTimeout(() => {
|
|
|
|
|
this.spinning = true
|
|
|
|
|
this.getServiceItemList(2, data.projectCode)
|
|
|
|
|
}, 500)
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.message)
|
|
|
|
|
this.spinning = false
|
|
|
|
|
this.getServiceItemList(1)
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.message)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.bookingServiceItem.forEach((item) => {
|
|
|
|
|
if (item.projectCode == data.projectCode) {
|
|
|
|
|
item.isYield = !item.isYield
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
CancelServiceProjectIfram(obj).then((res) => {
|
|
|
|
|
if (res.data.succ) {
|
|
|
|
|
if (this.time !== null) {
|
|
|
|
|
this.stopTimer()
|
|
|
|
|
}
|
|
|
|
|
this.time = setTimeout(() => {
|
|
|
|
|
this.spinning = true
|
|
|
|
|
this.getServiceItemList(2, data.projectCode)
|
|
|
|
|
}, 500)
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.message)
|
|
|
|
|
this.spinning = false
|
|
|
|
|
this.getServiceItemList(1)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
handleDetail() {
|
|
|
|
|
this.showFlag = !this.showFlag
|
|
|
|
|
this.timeList = this.flowData.containerInfoList[0].containerStatusInfoList
|
|
|
|
|
this.flowData.containerInfoList[0].isActive = true
|
|
|
|
|
this.$forceUpdate()
|
|
|
|
|
},
|
|
|
|
|
handleClick(index) {
|
|
|
|
|
this.flowData.containerInfoList.forEach(item => {
|
|
|
|
|
item.isActive = false
|
|
|
|
|
})
|
|
|
|
|
this.changeIndex = index
|
|
|
|
|
this.flowData.containerInfoList[index].isActive = true
|
|
|
|
|
this.timeList = this.flowData.containerInfoList[index].containerStatusInfoList
|
|
|
|
|
this.$forceUpdate()
|
|
|
|
|
},
|
|
|
|
|
getFlowInfo() {
|
|
|
|
|
const data = {
|
|
|
|
|
billNo: this.billNo,
|
|
|
|
|
carrier: this.carrier,
|
|
|
|
|
ctnNo: this.ctnNo,
|
|
|
|
|
USER_KEY: this.USER_KEY,
|
|
|
|
|
USER_SECRET: this.USER_SECRET
|
|
|
|
|
}
|
|
|
|
|
// const data = {
|
|
|
|
|
// billNo: '237065744',
|
|
|
|
|
// carrier: 'MSK',
|
|
|
|
|
// ctnNo: '',
|
|
|
|
|
// USER_KEY: '731e2d42af0f4209a8edccfcae20d7c4',
|
|
|
|
|
// USER_SECRET: 'c513dff9ac617fd064ada5f3ccdbd6a1bde59e7c7ffe29e9dc225c49a0904a1535f7bf3d97bc2ff4'
|
|
|
|
|
// }
|
|
|
|
|
this.flowLoad = true
|
|
|
|
|
GetTraceFlowInfo(data).then(res => {
|
|
|
|
|
if (res.success) {
|
|
|
|
|
this.flowData = res.data.resultData
|
|
|
|
|
this.embedTraceFlowStatusList = res.data.embedTraceFlowStatusList
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.message)
|
|
|
|
|
}
|
|
|
|
|
this.flowLoad = false
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
GoodsStatusHandleOk() {
|
|
|
|
|
const {
|
|
|
|
|
StatusVisibleForm: { validateFields }
|
|
|
|
|
} = this
|
|
|
|
|
this.GoodsStatusVisible = true
|
|
|
|
|
validateFields((errors, values) => {
|
|
|
|
|
if (!errors || this.GoodsStatusEditData.systemCode === 'SQXS') {
|
|
|
|
|
for (const key in values) {
|
|
|
|
|
if (typeof values[key] === 'object' && !(values[key] === null)) {
|
|
|
|
|
values[key] = JSON.stringify(values[key])
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const data = {
|
|
|
|
|
businessId: this.businessId,
|
|
|
|
|
USER_KEY: this.USER_KEY,
|
|
|
|
|
USER_SECRET: this.USER_SECRET,
|
|
|
|
|
statusCodes: [
|
|
|
|
|
{
|
|
|
|
|
setActDate: values.setActDate,
|
|
|
|
|
actRemark: values.actRemark,
|
|
|
|
|
setActVal: values.setActVal,
|
|
|
|
|
statusCode: this.GoodsStatusEditData.statusSKUCode
|
|
|
|
|
}
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
this.goodStatusLoading = true
|
|
|
|
|
SaveServiceStatusIfram(data).then((res) => {
|
|
|
|
|
if (res.data.succ) {
|
|
|
|
|
this.GoodsStatusVisible = false
|
|
|
|
|
this.getStatusServiceList(1)
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.data.msg)
|
|
|
|
|
}
|
|
|
|
|
this.goodStatusLoading = false
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
console.log(errors, values)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
stopTimer() {
|
|
|
|
|
window.clearTimeout(this.time)
|
|
|
|
|
},
|
|
|
|
|
FnOpenEdit(data) {
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.GoodsStatusEditData = data
|
|
|
|
|
this.GoodsStatusVisible = true
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
|
this.StatusVisibleForm.setFieldsValue({
|
|
|
|
|
setActDate: data.actDate ? data.actDate : '',
|
|
|
|
|
actRemark: data.actRemark ? data.actRemark : '',
|
|
|
|
|
setActVal: data.actVal ? data.actVal : ''
|
|
|
|
|
})
|
|
|
|
|
})
|
|
|
|
|
}, 100)
|
|
|
|
|
},
|
|
|
|
|
saveGoodsStatus(data) {
|
|
|
|
|
const obj = {
|
|
|
|
|
businessId: this.businessId,
|
|
|
|
|
USER_KEY: this.USER_KEY,
|
|
|
|
|
USER_SECRET: this.USER_SECRET,
|
|
|
|
|
statusCodes: [{ statusCode: data.statusSKUCode }]
|
|
|
|
|
}
|
|
|
|
|
this.spinning = true
|
|
|
|
|
if (!data.isYield) {
|
|
|
|
|
this.booGoodsStatusItem.forEach((item) => {
|
|
|
|
|
if (item.statusSKUCode == data.statusSKUCode) {
|
|
|
|
|
item.isYield = !item.isYield
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
SaveServiceStatusIfram(obj).then((res) => {
|
|
|
|
|
if (res.data.succ) {
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.data.msg)
|
|
|
|
|
this.getStatusServiceList(1)
|
|
|
|
|
}
|
|
|
|
|
this.spinning = false
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.booGoodsStatusItem.forEach((item) => {
|
|
|
|
|
if (item.statusSKUCode == data.statusSKUCode) {
|
|
|
|
|
item.isYield = !item.isYield
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
CancelServiceStatusIfram(obj).then((res) => {
|
|
|
|
|
if (res.data.succ) {
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.data.msg)
|
|
|
|
|
this.getStatusServiceList(1)
|
|
|
|
|
}
|
|
|
|
|
this.spinning = false
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
getStatusServiceList(type, code) {
|
|
|
|
|
const data = {
|
|
|
|
|
queryType: 2,
|
|
|
|
|
businessId: this.businessId,
|
|
|
|
|
USER_KEY: this.USER_KEY,
|
|
|
|
|
USER_SECRET: this.USER_SECRET
|
|
|
|
|
}
|
|
|
|
|
if (type == 2) {
|
|
|
|
|
this.booGoodsStatusItem.forEach((item) => {
|
|
|
|
|
if (item.statusSKUCode == code) {
|
|
|
|
|
item.isYield = !item.isYield
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.spinning = true
|
|
|
|
|
GetServiceStatusListIfram(data).then((res) => {
|
|
|
|
|
if (res.data.succ) {
|
|
|
|
|
for (let i = 0; i < res.data.ext.length; i++) {
|
|
|
|
|
if (res.data.ext[i].isEnd) {
|
|
|
|
|
res.data.ext.splice(i + 1, 0, { isBr: true })
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
this.booGoodsStatusItem = res.data.ext
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.data.msg)
|
|
|
|
|
}
|
|
|
|
|
this.spinning = false
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
getServiceItemList(type, code) {
|
|
|
|
|
if (type === 1) {
|
|
|
|
|
this.seriveLoading = true
|
|
|
|
|
const data = {
|
|
|
|
|
USER_KEY: this.USER_KEY,
|
|
|
|
|
USER_SECRET: this.USER_SECRET,
|
|
|
|
|
queryType: 0,
|
|
|
|
|
businessId: this.businessId
|
|
|
|
|
}
|
|
|
|
|
GetServiceProiectListIfram(data).then((res) => {
|
|
|
|
|
if (res.data.succ) {
|
|
|
|
|
this.bookingServiceItem = res.data.ext
|
|
|
|
|
} else {
|
|
|
|
|
this.$message.error(res.data.msg)
|
|
|
|
|
}
|
|
|
|
|
this.seriveLoading = false
|
|
|
|
|
})
|
|
|
|
|
} else {
|
|
|
|
|
this.spinning = true
|
|
|
|
|
this.getStatusServiceList(1)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
.tag {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-left: 10px;
|
|
|
|
|
color: rgb(26, 184, 26);
|
|
|
|
|
text-align: center;
|
|
|
|
|
line-height: 20px;
|
|
|
|
|
background: rgb(227, 252, 248);
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
height: 20px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.service {
|
|
|
|
|
background: rgb(234, 242, 255);
|
|
|
|
|
padding-top: 10px;
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
padding-left: 15px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-box {
|
|
|
|
|
background: white;
|
|
|
|
|
width: 950px;
|
|
|
|
|
color: #17181a;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
.list-box-title {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
font-size: 13px;
|
|
|
|
|
border-bottom: 1px solid rgb(168, 177, 192);
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
img {
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.list-box-content {
|
|
|
|
|
padding: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
|
|
|
|
|
.content-right {
|
|
|
|
|
display: flex;
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
align-content: center;
|
|
|
|
|
padding-bottom: 70px;
|
|
|
|
|
padding-left: 50px;
|
|
|
|
|
width: 100%;
|
|
|
|
|
.cont-box {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
justify-content: center;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.conent-item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
position: relative;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
|
|
|
|
&.active {
|
|
|
|
|
.item-top {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: black;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
color: rgb(66, 102, 246);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-bottom {
|
|
|
|
|
color: black;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line {
|
|
|
|
|
background: rgb(66, 102, 246);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
&.isEnd {
|
|
|
|
|
.item-top {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: rgb(255, 141, 26);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-time {
|
|
|
|
|
color: rgb(255, 141, 26);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
color: rgb(255, 141, 26);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-bottom {
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: rgb(255, 141, 26);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line {
|
|
|
|
|
color: rgb(66, 102, 246);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-time {
|
|
|
|
|
word-wrap: break-word;
|
|
|
|
|
width: 80px;
|
|
|
|
|
position: absolute;
|
|
|
|
|
bottom: -48px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-top {
|
|
|
|
|
color: #c0bebe;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon {
|
|
|
|
|
height: 20px;
|
|
|
|
|
width: 20px;
|
|
|
|
|
color: #c0bebe;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item-bottom {
|
|
|
|
|
color: #c0bebe;
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
font-size: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.line {
|
|
|
|
|
width: 50px;
|
|
|
|
|
height: 2px;
|
|
|
|
|
background: #c0bebe;
|
|
|
|
|
}
|
|
|
|
|
.line-long {
|
|
|
|
|
width: 100px;
|
|
|
|
|
border-bottom: 2px dashed #c0bebe;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.main-box {
|
|
|
|
|
background: white;
|
|
|
|
|
width: 950px;
|
|
|
|
|
margin-top: 50px;
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
.box-left {
|
|
|
|
|
width: 20%;
|
|
|
|
|
background: rgb(234, 242, 255);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-tab {
|
|
|
|
|
background: rgb(234, 242, 255);
|
|
|
|
|
border-left: 2px solid rgb(255, 87, 51);
|
|
|
|
|
margin-bottom: 3px;
|
|
|
|
|
padding: 15px 0;
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
&.isActive {
|
|
|
|
|
background: white;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-right {
|
|
|
|
|
padding-top: 20px;
|
|
|
|
|
margin-left: 30px;
|
|
|
|
|
width: 80%;
|
|
|
|
|
padding-right: 10px;
|
|
|
|
|
color: #17181a;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
padding-bottom: 30px;
|
|
|
|
|
max-height: 1000px;
|
|
|
|
|
overflow-y: auto;
|
|
|
|
|
overflow-x: hidden;
|
|
|
|
|
|
|
|
|
|
.box-right-title {
|
|
|
|
|
text-align: left;
|
|
|
|
|
padding-left: 25px;
|
|
|
|
|
padding-bottom: 8px;
|
|
|
|
|
border-bottom: 1px solid rgb(235, 238, 245);
|
|
|
|
|
|
|
|
|
|
span {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-item {
|
|
|
|
|
border-bottom: 1px solid rgb(235, 238, 245);
|
|
|
|
|
display: flex;
|
|
|
|
|
color: #737780;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
&.isActive {
|
|
|
|
|
color: #17181a;
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
|
|
|
|
.time-line {
|
|
|
|
|
background: rgb(66, 102, 246);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time-circular {
|
|
|
|
|
border: 3px solid rgb(66, 102, 246);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-time {
|
|
|
|
|
width: 20px;
|
|
|
|
|
display: flex;
|
|
|
|
|
margin-right: 5px;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time-line {
|
|
|
|
|
width: 2px;
|
|
|
|
|
height: calc(50% - 5px);
|
|
|
|
|
background: rgb(201, 203, 209);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.time-circular {
|
|
|
|
|
width: 10px;
|
|
|
|
|
height: 10px;
|
|
|
|
|
border: 3px solid rgb(201, 203, 209);
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
