ui样式
This commit is contained in:
parent
b625ef0118
commit
8929e53724
@ -163,7 +163,7 @@ input, textarea{
|
|||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background-color: rgba(144,147,153,.5);
|
background-color: #EDEDED;
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
min-height: 28px;
|
min-height: 28px;
|
||||||
-webkit-border-radius: 2em;
|
-webkit-border-radius: 2em;
|
||||||
@ -174,7 +174,7 @@ input, textarea{
|
|||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb:hover {
|
::-webkit-scrollbar-thumb:hover {
|
||||||
background-color: rgba(144,147,153,.3);
|
background-color: #D9D9D9;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 抽屉head区域---start
|
// 抽屉head区域---start
|
||||||
|
@ -2,7 +2,7 @@
|
|||||||
<el-drawer
|
<el-drawer
|
||||||
title="发货进度"
|
title="发货进度"
|
||||||
:visible.sync="centervisible"
|
:visible.sync="centervisible"
|
||||||
size="80%"
|
size="50%"
|
||||||
class="deliveryLogDetail"
|
class="deliveryLogDetail"
|
||||||
@close='closeA'
|
@close='closeA'
|
||||||
:show-close='false'>
|
:show-close='false'>
|
||||||
@ -47,7 +47,7 @@
|
|||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
:width="150"
|
:width="80"
|
||||||
label="操作"
|
label="操作"
|
||||||
:method-list="tableBtn"
|
:method-list="tableBtn"
|
||||||
@clickBtn="viewDetDetail"
|
@clickBtn="viewDetDetail"
|
||||||
@ -65,7 +65,7 @@
|
|||||||
<div v-if="activeName === 'barChart'">
|
<div v-if="activeName === 'barChart'">
|
||||||
<div
|
<div
|
||||||
id="logDetPieBar"
|
id="logDetPieBar"
|
||||||
style="width: 100%"
|
style="width: 60%"
|
||||||
:style="{ height: chartHeight + 'px' }"
|
:style="{ height: chartHeight + 'px' }"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
@ -75,7 +75,7 @@
|
|||||||
<!-- 详情抽屉 -->
|
<!-- 详情抽屉 -->
|
||||||
<el-drawer
|
<el-drawer
|
||||||
title="发货详情"
|
title="发货详情"
|
||||||
size="60%"
|
size="50%"
|
||||||
:append-to-body="true"
|
:append-to-body="true"
|
||||||
:visible.sync="innerDrawer"
|
:visible.sync="innerDrawer"
|
||||||
@close='closeB'
|
@close='closeB'
|
||||||
@ -141,7 +141,8 @@ const tableProps = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'rate',
|
prop: 'rate',
|
||||||
label: '发货比列(%)'
|
label: '发货比列(%)',
|
||||||
|
width: 110
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'principalCost',
|
prop: 'principalCost',
|
||||||
@ -173,7 +174,8 @@ const tableProps2 = [
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'packagingSize',
|
prop: 'packagingSize',
|
||||||
label: '装箱规格(片/箱)'
|
label: '装箱规格(片/箱)',
|
||||||
|
minWidth: 140
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
prop: 'packagingNum',
|
prop: 'packagingNum',
|
||||||
@ -210,8 +212,8 @@ export default {
|
|||||||
tableBtn: [
|
tableBtn: [
|
||||||
this.$auth.hasPermi('base:group-team:update')
|
this.$auth.hasPermi('base:group-team:update')
|
||||||
? {
|
? {
|
||||||
type: 'detDetail',
|
type: 'detail',
|
||||||
btnName: '查看发货详情'
|
btnName: '详情'
|
||||||
}
|
}
|
||||||
: undefined
|
: undefined
|
||||||
].filter((v) => v),
|
].filter((v) => v),
|
||||||
@ -230,7 +232,7 @@ export default {
|
|||||||
// 图
|
// 图
|
||||||
chartDom: '',
|
chartDom: '',
|
||||||
chart: '',
|
chart: '',
|
||||||
chartHeight: this.tableHeight(300)
|
chartHeight: this.tableHeight(300)*0.6
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// watch: {
|
// watch: {
|
||||||
@ -270,6 +272,8 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
getBar() {
|
getBar() {
|
||||||
|
let color = ['#7164FF','#288AFF','#63BDFF','#8EF0AB','#FFCE6A']
|
||||||
|
let colorList = []
|
||||||
if (
|
if (
|
||||||
this.chart !== null &&
|
this.chart !== null &&
|
||||||
this.chart !== '' &&
|
this.chart !== '' &&
|
||||||
@ -280,64 +284,90 @@ export default {
|
|||||||
this.chartDom = document.getElementById('logDetPieBar')
|
this.chartDom = document.getElementById('logDetPieBar')
|
||||||
this.chart = echarts.init(this.chartDom)
|
this.chart = echarts.init(this.chartDom)
|
||||||
let seriesData = []
|
let seriesData = []
|
||||||
let sumData = 0
|
if (this.tableData.length > 0) {
|
||||||
this.tableData && this.tableData.map(item =>{
|
for (let i = 0; i < this.tableData.length; i++) {
|
||||||
let obj = {}
|
let obj = {}
|
||||||
obj.value = item.rate
|
obj.value = this.tableData[i].num
|
||||||
obj.name = item.name
|
obj.name = this.tableData[i].name
|
||||||
seriesData.push(obj)
|
seriesData.push(obj)
|
||||||
sumData+=item.rate
|
if (i < 5) {
|
||||||
})
|
colorList.push(color[i])
|
||||||
if (sumData < 100) {
|
} else {
|
||||||
|
colorList.push(color[i%5])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.orderMsg.num < this.orderMsg.orderNum) {
|
||||||
let obj = {}
|
let obj = {}
|
||||||
obj.value = 100 - sumData
|
obj.value = this.orderMsg.orderNum - this.orderMsg.num
|
||||||
obj.name = "未发货"
|
obj.name = "未发货"
|
||||||
seriesData.push(obj)
|
seriesData.push(obj)
|
||||||
|
colorList.push('#F5F5F5')
|
||||||
|
}else {
|
||||||
|
let obj = {}
|
||||||
|
obj.value = 0
|
||||||
|
obj.name = "未发货"
|
||||||
|
seriesData.push(obj)
|
||||||
|
colorList.push('#F5F5F5')
|
||||||
}
|
}
|
||||||
var option = {
|
var option = {
|
||||||
color: ['#B0EB42', '#FF9747', '#FF6860', '#7164FF', '#288AFF', '#63BDFF', '#73DE93', '#FFCE6A'],
|
color: colorList,
|
||||||
tooltip: {
|
|
||||||
trigger: 'item',
|
|
||||||
formatter: function(params) {
|
|
||||||
let str = `<span style="display:inline-block;width:8px;height:8px;margin: 0 8px 0 -3px;border-radius:2px;background-color:${params.color};"></span>`
|
|
||||||
return `<span>
|
|
||||||
<span style="color:rgba(0,0,0,0.85);">${str}${params.name}</span>
|
|
||||||
<span style="display:inline-block;margin-left:10px;color:rgba(0,0,0,0.45);">${params.percent}</span>
|
|
||||||
</span>`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
legend: {
|
legend: {
|
||||||
type: 'scroll',
|
bottom: '5%',
|
||||||
orient: 'vertical',
|
left: 'center',
|
||||||
right: '10%',
|
itemWidth: 8,
|
||||||
top: 20,
|
itemHeight: 8
|
||||||
bottom: 20,
|
|
||||||
icon: 'rect',
|
|
||||||
itemHeight: 8,
|
|
||||||
itemWidth: 8
|
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: ['60%', '80%'],
|
radius: ['40%', '55%'],
|
||||||
avoidLabelOverlap: false,
|
|
||||||
label: {
|
|
||||||
show: false,
|
|
||||||
position: 'center'
|
|
||||||
},
|
|
||||||
emphasis: {
|
emphasis: {
|
||||||
|
scale: false
|
||||||
|
},
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
alignTo: 'edge',
|
||||||
fontSize: 40,
|
formatter: '{name|{b}}\n{value|{c}}',
|
||||||
fontWeight: 'bold'
|
minMargin: 5,
|
||||||
|
edgeDistance: 10,
|
||||||
|
lineHeight: 15,
|
||||||
|
rich: {
|
||||||
|
name: {
|
||||||
|
fontSize: 14,
|
||||||
|
color: 'rgba(0,0,0,0.65)'
|
||||||
},
|
},
|
||||||
scale: true ,
|
value: {
|
||||||
scaleSize: 20 ,
|
fontSize: 14,
|
||||||
},
|
color: 'rgba(0,0,0,0.65)'
|
||||||
labelLine: {
|
}
|
||||||
show: false
|
}
|
||||||
},
|
},
|
||||||
data: seriesData
|
data: seriesData
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'pie',
|
||||||
|
radius: ['40%', '40%'],
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'center',
|
||||||
|
color: '#000',
|
||||||
|
formatter: [
|
||||||
|
'{a|'+this.orderMsg.orderNum+'}',
|
||||||
|
'{b|总数}'
|
||||||
|
].join('\n\n'),
|
||||||
|
rich: {
|
||||||
|
a: {
|
||||||
|
fontSize: 26 +'px'
|
||||||
|
},
|
||||||
|
b: {
|
||||||
|
fontSize: 16 +'px'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
scale: false
|
||||||
|
},
|
||||||
|
data: [100]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
@ -377,11 +407,13 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
<style scoped lang='scss'>
|
<style scoped lang='scss'>
|
||||||
.box1 {
|
.box1 {
|
||||||
height: 56px;
|
height: 76px;
|
||||||
|
border-bottom: 1px solid #E9E9E9;
|
||||||
|
margin: 0px 8px 20px 30px;
|
||||||
.box_col {
|
.box_col {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 20%;
|
width: 20%;
|
||||||
padding: 8px 8px 8px 40px;
|
padding: 8px 8px 8px 8px;
|
||||||
.blodTip {
|
.blodTip {
|
||||||
height: 16px;
|
height: 16px;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -398,7 +430,7 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.box2 {
|
.box2 {
|
||||||
padding:32px 32px 30px 30px;
|
padding:0px 32px 30px 30px;
|
||||||
height: calc(100vh - 150px);
|
height: calc(100vh - 150px);
|
||||||
}
|
}
|
||||||
.boxTitle {
|
.boxTitle {
|
||||||
|
@ -193,7 +193,8 @@ export default {
|
|||||||
this.$auth.hasPermi('base:order-manage:addWorkOrder')
|
this.$auth.hasPermi('base:order-manage:addWorkOrder')
|
||||||
? {
|
? {
|
||||||
type: 'add',
|
type: 'add',
|
||||||
btnName: '新增工单',
|
btnName: '新增',
|
||||||
|
showTip: '新增工单',
|
||||||
showParam: {
|
showParam: {
|
||||||
type: '|',
|
type: '|',
|
||||||
data: [
|
data: [
|
||||||
@ -219,7 +220,8 @@ export default {
|
|||||||
this.$auth.hasPermi('base:order-manage:bindWorkOrder')
|
this.$auth.hasPermi('base:order-manage:bindWorkOrder')
|
||||||
? {
|
? {
|
||||||
type: 'bind',
|
type: 'bind',
|
||||||
btnName: '绑定工单',
|
btnName: '绑定',
|
||||||
|
showTip: '绑定工单',
|
||||||
showParam: {
|
showParam: {
|
||||||
type: '|',
|
type: '|',
|
||||||
data: [
|
data: [
|
||||||
@ -245,7 +247,8 @@ export default {
|
|||||||
this.$auth.hasPermi('base:order-manage:bindWorkOrder')
|
this.$auth.hasPermi('base:order-manage:bindWorkOrder')
|
||||||
? {
|
? {
|
||||||
type: 'complete',
|
type: 'complete',
|
||||||
btnName: '完成订单',
|
btnName: '完成',
|
||||||
|
showTip: '完成订单',
|
||||||
showParam: {
|
showParam: {
|
||||||
type: '|',
|
type: '|',
|
||||||
data: [
|
data: [
|
||||||
|
@ -22,7 +22,7 @@
|
|||||||
<method-btn
|
<method-btn
|
||||||
v-if="tableBtn.length"
|
v-if="tableBtn.length"
|
||||||
slot="handleBtn"
|
slot="handleBtn"
|
||||||
:width="250"
|
:width="140"
|
||||||
label="操作"
|
label="操作"
|
||||||
:method-list="tableBtn"
|
:method-list="tableBtn"
|
||||||
@clickBtn="handleClick"
|
@clickBtn="handleClick"
|
||||||
@ -160,19 +160,52 @@ export default {
|
|||||||
this.$auth.hasPermi('base:order-completion-monitoring:orderDet')
|
this.$auth.hasPermi('base:order-completion-monitoring:orderDet')
|
||||||
? {
|
? {
|
||||||
type: 'orderDetail',
|
type: 'orderDetail',
|
||||||
btnName: '工单详情'
|
btnName: '工单',
|
||||||
|
showTip: '工单详情',
|
||||||
|
showParam: {
|
||||||
|
type: '&',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'more',
|
||||||
|
name: 'workOrderNum',
|
||||||
|
value: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
: undefined,
|
: undefined,
|
||||||
this.$auth.hasPermi('base:order-completion-monitoring:qualityDet')
|
this.$auth.hasPermi('base:order-completion-monitoring:qualityDet')
|
||||||
? {
|
? {
|
||||||
type: 'qualityDetail',
|
type: 'qualityDetail',
|
||||||
btnName: '质量详情'
|
btnName: '质量',
|
||||||
|
showTip: '质量详情',
|
||||||
|
showParam: {
|
||||||
|
type: '&',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'more',
|
||||||
|
name: 'workOrderNum',
|
||||||
|
value: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
: undefined,
|
: undefined,
|
||||||
this.$auth.hasPermi('base:order-completion-monitoring:sendOut')
|
this.$auth.hasPermi('base:order-completion-monitoring:sendOut')
|
||||||
? {
|
? {
|
||||||
type: 'sendOutDetail',
|
type: 'sendOutDetail',
|
||||||
btnName: '发货详情'
|
btnName: '发货',
|
||||||
|
showTip: '发货详情',
|
||||||
|
showParam: {
|
||||||
|
type: '&',
|
||||||
|
data: [
|
||||||
|
{
|
||||||
|
type: 'more',
|
||||||
|
name: 'workOrderNum',
|
||||||
|
value: 1
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
}
|
}
|
||||||
: undefined
|
: undefined
|
||||||
].filter((v) => v),
|
].filter((v) => v),
|
||||||
|
Loading…
Reference in New Issue
Block a user