'init'
This commit is contained in:
@@ -0,0 +1,143 @@
|
||||
<!--
|
||||
* @Author: gtz
|
||||
* @Date: 2022-01-19 15:58:17
|
||||
* @LastEditors: zhp
|
||||
* @LastEditTime: 2022-01-24 09:18:01
|
||||
* @Description: file content
|
||||
* @FilePath: \mt-bus-fe\src\views\OperationalOverview\components\baseContainer\index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="base-container" :style="{height: height * beilv + 'px', fontSize: 12 * beilv + 'px'}">
|
||||
<div class="line" />
|
||||
<div class="line line-vertical" />
|
||||
<div class="line line-right" />
|
||||
<div class="line line-right-vertical" />
|
||||
<div class="line line-bottom" />
|
||||
<div class="line line-bottom-vertical" />
|
||||
<div class="line line-bottom-right" />
|
||||
<div class="line line-bottom-right-vertical" />
|
||||
<div class="bar-item">
|
||||
<div v-if="title" class="bar-title">
|
||||
<span>
|
||||
<svg-icon :icon-class="titleIcon" style="font-size: 1.5em; position: relative; top: .08em" />
|
||||
{{ title }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="bar-content">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseContainer',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
titleIcon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
baseSize: {
|
||||
type: Number,
|
||||
default: 12
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
curIndex: 0
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
changeTab(num) {
|
||||
this.curIndex = num
|
||||
this.$emit('tabSelect', num)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.base-container {
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
background-color: rgba($color: #061027, $alpha: 0.15);
|
||||
position: relative;
|
||||
border: 2px solid;
|
||||
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
|
||||
.line {
|
||||
position: absolute;
|
||||
border-top: 4px solid #52FFF1;
|
||||
width: 2em;
|
||||
top: -.25em;
|
||||
left: -.25em;
|
||||
&-vertical {
|
||||
top: calc(-5em / 12);
|
||||
left: calc(-1em / 12);
|
||||
transform: rotate(90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
&-right {
|
||||
top: -.25em;
|
||||
right: -.25em;
|
||||
left: inherit;
|
||||
}
|
||||
&-right-vertical {
|
||||
top: calc(-5em / 12);
|
||||
right: calc(-1em / 12);
|
||||
left: inherit;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: right;
|
||||
}
|
||||
&-bottom {
|
||||
top: inherit;
|
||||
left: -.25em;
|
||||
bottom: -.25em;
|
||||
}
|
||||
&-bottom-vertical {
|
||||
top: inherit;
|
||||
left: calc(-1em / 12);
|
||||
bottom: calc(-5em / 12);
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: left;
|
||||
}
|
||||
&-bottom-right {
|
||||
top: inherit;
|
||||
left: inherit;
|
||||
right: -.25em;
|
||||
bottom: -.25em;
|
||||
}
|
||||
&-bottom-right-vertical {
|
||||
top: inherit;
|
||||
left: inherit;
|
||||
right: calc(-1em / 12);
|
||||
bottom: calc(-5em / 12);
|
||||
transform: rotate(90deg);
|
||||
transform-origin: right;
|
||||
}
|
||||
}
|
||||
.bar-title {
|
||||
width: 100%;
|
||||
color: #52FFF1;
|
||||
font-size: 1.5em;
|
||||
padding: .67em;
|
||||
}
|
||||
// .bar-content{
|
||||
// padding: 1em;
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div class="dataShowBox" :style="{height: height * beilv + 'px'}">
|
||||
<el-row>
|
||||
<el-col :span="7" :style="{paddingTop: 24 * beilv + 'px'}">
|
||||
<div class="numStyle" :style="{marginBottom: 8 * beilv + 'px', fontSize: 32 * beilv + 'px'}">12131</div>
|
||||
<div class="fontStyle" :style="{fontSize: 18 * beilv + 'px'}">品类1</div>
|
||||
</el-col>
|
||||
<el-col :span="1">
|
||||
<span class="aa" :style="{height: 80 * beilv + 'px', marginTop: 16 * beilv + 'px'}" />
|
||||
</el-col>
|
||||
<el-col :span="7" :style="{paddingTop: 24 * beilv + 'px'}">
|
||||
<div class="numStyle" :style="{marginBottom: 8 * beilv + 'px', fontSize: 32 * beilv + 'px'}">12131</div>
|
||||
<div class="fontStyle" :style="{fontSize: 18 * beilv + 'px'}">品类2</div>
|
||||
</el-col>
|
||||
<el-col :span="1">
|
||||
<span class="aa" :style="{height: 80 * beilv + 'px', marginTop: 16 * beilv + 'px'}" />
|
||||
</el-col>
|
||||
<el-col :span="7" :style="{paddingTop: 24 * beilv + 'px'}">
|
||||
<div class="numStyle" :style="{marginBottom: 8 * beilv + 'px', fontSize: 32 * beilv + 'px'}">12131</div>
|
||||
<div class="fontStyle" :style="{fontSize: 18 * beilv + 'px'}">品类3</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.dataShowBox {
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
background: rgba(0, 255, 241, 0.03);
|
||||
box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
.numStyle {
|
||||
color: #52fff1;
|
||||
}
|
||||
.fontStyle {
|
||||
color: #ffffff;
|
||||
}
|
||||
.aa {
|
||||
display: block;
|
||||
width: 1px;
|
||||
background: linear-gradient(153deg, rgba(153, 255, 249, 0) 0%, #60fff1 46%, rgba(96, 255, 241, 0) 100%);
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<div class="dataShowMain" :style="{height: height * beilv + 'px'}">
|
||||
<el-row>
|
||||
<el-col :span="7" :style="{paddingTop: 64 * beilv + 'px'}">
|
||||
<div class="numStyle" :style="{marginBottom: 16 * beilv + 'px'}">
|
||||
<span :style="{fontSize: 24 * beilv + 'px'}">¥</span>
|
||||
<span :style="{fontSize: 36 * beilv + 'px'}">400,000.</span>
|
||||
<span :style="{fontSize: 24 * beilv + 'px'}">00</span>
|
||||
</div>
|
||||
<div class="fontStyle" :style="{fontSize: 18 * beilv + 'px'}">— 年度销售目标 —</div>
|
||||
</el-col>
|
||||
<el-col :span="1">
|
||||
<span class="aa" :style="{height: 160 * beilv + 'px', marginTop: 28 * beilv + 'px'}" />
|
||||
</el-col>
|
||||
<el-col :span="7" :style="{paddingTop: 64 * beilv + 'px'}">
|
||||
<div class="numStyle" :style="{marginBottom: 16 * beilv + 'px'}">
|
||||
<span :style="{fontSize: 24 * beilv + 'px'}">¥</span>
|
||||
<span :style="{fontSize: 36 * beilv + 'px'}">417,997.</span>
|
||||
<span :style="{fontSize: 24 * beilv + 'px'}">00</span>
|
||||
</div>
|
||||
<div class="fontStyle" :style="{fontSize: 18 * beilv + 'px'}">— 年度完成值 —</div>
|
||||
</el-col>
|
||||
<el-col :span="1">
|
||||
<span class="aa" :style="{height: 160 * beilv + 'px', marginTop: 28 * beilv + 'px'}" />
|
||||
</el-col>
|
||||
<el-col :span="7" :style="{paddingTop: 64 * beilv + 'px'}">
|
||||
<div class="numStyle" :style="{marginBottom: 16 * beilv + 'px'}">
|
||||
<span :style="{fontSize: 36 * beilv + 'px'}">104.</span>
|
||||
<span :style="{fontSize: 24 * beilv + 'px'}">5</span>
|
||||
<span :style="{fontSize: 36 * beilv + 'px'}">%</span>
|
||||
</div>
|
||||
<div class="fontStyle" :style="{fontSize: 18 * beilv + 'px'}">— 目标完成率 —</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
height: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.dataShowMain {
|
||||
text-align: center;
|
||||
height: 90px;
|
||||
background: rgba(0, 255, 241, 0.03);
|
||||
box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
.numStyle {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
}
|
||||
.fontStyle {
|
||||
color: #52fff1;
|
||||
}
|
||||
.aa {
|
||||
display: block;
|
||||
width: 1px;
|
||||
background: linear-gradient(153deg, rgba(153, 255, 249, 0) 0%, #60fff1 46%, rgba(96, 255, 241, 0) 100%);
|
||||
margin: auto;
|
||||
}
|
||||
</style>
|
||||
191
src/views/orderManage/orderMonitoring/components/lineChart.vue
Normal file
191
src/views/orderManage/orderMonitoring/components/lineChart.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div id="monthChart" :style="{ height: height * beilv + 'px', width:width}" />
|
||||
</template>
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById('monthChart'))
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
itemWidth: 15, // 设置legend图标的宽度
|
||||
itemHeight: 15, // 设置legend图标的高度
|
||||
right: '10%',
|
||||
data: ['求和项:金额', '求和项:数量'],
|
||||
textStyle: {
|
||||
color: '#ffffff80'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#ffffff80'
|
||||
},
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '金额',
|
||||
position: 'left',
|
||||
alignTicks: true,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#21325980'
|
||||
},
|
||||
show: true
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'solid',
|
||||
color: '#21325980'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
// y轴文字的配置
|
||||
textStyle: {
|
||||
color: '#ffffff80' // Y轴内容文字颜色
|
||||
},
|
||||
formatter: '{value} W'
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#FFFFFF80',
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '数量',
|
||||
position: 'right',
|
||||
alignTicks: true,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#21325980'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#21325980'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
// y轴文字的配置
|
||||
textStyle: {
|
||||
color: '#ffffff80' // Y轴内容文字颜色
|
||||
}
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: '#FFFFFF80',
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '求和项:金额',
|
||||
data: [12, 20, 15, 8, 7, 11, 13, 11, 9, 10.5, 13, 15],
|
||||
type: 'bar',
|
||||
barMaxWidth: 'auto',
|
||||
barWidth: 12,
|
||||
itemStyle: {
|
||||
color: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 1,
|
||||
y2: 0,
|
||||
type: 'linear',
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: '#1EBEAC' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: '#52FDEA' // 100% 处的颜色
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
data: [12, 20, 15, 8, 7, 11, 13, 11, 9, 10.5, 13, 15],
|
||||
type: 'pictorialBar',
|
||||
barMaxWidth: '20',
|
||||
symbolPosition: 'end',
|
||||
symbol: 'diamond',
|
||||
itemStyle: {
|
||||
// 设置symbol的颜色
|
||||
normal: {
|
||||
color: '#A4FFF5'
|
||||
}
|
||||
},
|
||||
symbolOffset: [0, '-50%'],
|
||||
symbolSize: [12, 10],
|
||||
zlevel: 2
|
||||
},
|
||||
{
|
||||
name: '求和项:数量',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [90, 210, 180, 120, 60, 90, 150, 120, 40, 130, 145, 90],
|
||||
showSymbol: true,
|
||||
symbol: 'circle',
|
||||
symbolSize: 5,
|
||||
color: '#DE9134',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(255, 145, 52, 1)' }, // 顶端颜色
|
||||
{ offset: 1, color: 'rgba(255, 145, 52, 0.1)' } // 底部颜色
|
||||
])
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
import { debounce } from '@/utils'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
$_sidebarElm: null,
|
||||
$_resizeHandler: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$_resizeHandler = debounce(() => {
|
||||
if (this.chart) {
|
||||
this.chart.resize()
|
||||
}
|
||||
}, 100)
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
// to fixed bug when cached by keep-alive
|
||||
// https://github.com/PanJiaChen/vue-element-admin/issues/2116
|
||||
activated() {
|
||||
this.$_initResizeEvent()
|
||||
this.$_initSidebarResizeEvent()
|
||||
},
|
||||
deactivated() {
|
||||
this.$_destroyResizeEvent()
|
||||
this.$_destroySidebarResizeEvent()
|
||||
},
|
||||
methods: {
|
||||
// use $_ for mixins properties
|
||||
// https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
|
||||
$_initResizeEvent() {
|
||||
window.addEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_destroyResizeEvent() {
|
||||
window.removeEventListener('resize', this.$_resizeHandler)
|
||||
},
|
||||
$_sidebarResizeHandler(e) {
|
||||
if (e.propertyName === 'width') {
|
||||
this.$_resizeHandler()
|
||||
}
|
||||
},
|
||||
$_initSidebarResizeEvent() {
|
||||
this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
|
||||
this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
},
|
||||
$_destroySidebarResizeEvent() {
|
||||
this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
|
||||
}
|
||||
}
|
||||
}
|
||||
160
src/views/orderManage/orderMonitoring/components/pieChart.vue
Normal file
160
src/views/orderManage/orderMonitoring/components/pieChart.vue
Normal file
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div>
|
||||
<div :id="id" :style="{ height: height * beilv + 'px', width:width}" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
const color1 = new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{ offset: 0, color: '#E77657' },
|
||||
{ offset: 1, color: '#53222A' }
|
||||
],
|
||||
false
|
||||
)
|
||||
const color2 = new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
[
|
||||
{ offset: 0, color: '#31AFF0' },
|
||||
{ offset: 1, color: '#0B3A52' }
|
||||
],
|
||||
false
|
||||
)
|
||||
const color3 = new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: '#F9A237' },
|
||||
{ offset: 1, color: '#6E4A27' }
|
||||
],
|
||||
false
|
||||
)
|
||||
const color4 = new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
1,
|
||||
[
|
||||
{ offset: 0, color: '#7AEAE0' },
|
||||
{ offset: 1, color: '#18433F' }
|
||||
],
|
||||
false
|
||||
)
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
default: 'OverviewLine'
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
},
|
||||
pieData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
formatter: {
|
||||
type: String,
|
||||
default: '{firstLine|{b}} \n {secondLine|{c}}'
|
||||
},
|
||||
pieStyle: {
|
||||
type: Object,
|
||||
default: () => {}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById(this.id))
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
color: [color1, color2, color3, color4],
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['60%', '90%'],
|
||||
hoverAnimation: false,
|
||||
itemStyle: {
|
||||
borderRadius: 0,
|
||||
borderWidth: 3,
|
||||
borderColor: '#060F20'
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
length: 0,
|
||||
length2: this.beilv * this.pieStyle.line_s,
|
||||
smooth: true,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
cap: 'butt'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
formatter: this.pieStyle.formatter,
|
||||
minMargin: 5,
|
||||
rich: {
|
||||
firstLine: {
|
||||
fontSize: this.beilv * 14,
|
||||
lineHeight: this.beilv * 30,
|
||||
color: '#ffffff80'
|
||||
},
|
||||
secondLine: {
|
||||
fontSize: this.beilv * this.pieStyle.num_fs,
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
},
|
||||
data: this.pieStyle.pieData,
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<el-row class="progress-main-box">
|
||||
<el-col :span="24">
|
||||
<template v-for="(item,index) in productData">
|
||||
<el-row :key="index" :style="{marginBottom: 18 * beilv + 'px'}">
|
||||
<el-col :span="4" style="text-align: right;padding-right:5px">{{ item.name }}</el-col>
|
||||
<el-col :span="20">
|
||||
<div
|
||||
class="progress"
|
||||
:class="index%2===0?'progress1':'progress2'"
|
||||
:style="{height: 18 * beilv + 'px', width: item.percentage}"
|
||||
>
|
||||
{{ item.number }}
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
naem: 'progressBox',
|
||||
props: {
|
||||
productData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.progress-main-box {
|
||||
padding: 0 10px;
|
||||
}
|
||||
.progress {
|
||||
text-align: right;
|
||||
line-height: 18px;
|
||||
border-radius: 5px;
|
||||
padding-right: 5px;
|
||||
}
|
||||
.progress1 {
|
||||
background: linear-gradient(270deg, #83f7ec 0%, rgba(76, 236, 213, 0.05) 100%);
|
||||
}
|
||||
.progress2 {
|
||||
background: linear-gradient(270deg, #3ac6fc 0%, rgba(56, 195, 255, 0.05) 100%);
|
||||
}
|
||||
</style>
|
||||
204
src/views/orderManage/orderMonitoring/components/ringChart.vue
Normal file
204
src/views/orderManage/orderMonitoring/components/ringChart.vue
Normal file
@@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div class="ringChartContainer">
|
||||
<ul v-if="orderList.length > 0" class="pieBox">
|
||||
<li v-for="(item,index) in orderList" :key="index">
|
||||
<div>
|
||||
<span class="title">{{ item.name }}</span>
|
||||
</div>
|
||||
<div :id="item.id" style="height:250px;width:250px" />
|
||||
</li>
|
||||
</ul>
|
||||
<div v-else class="imgBox">
|
||||
<img src="./../../../../assets/img/empty.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import i18n from '@/lang'
|
||||
export default {
|
||||
props: {
|
||||
orderList: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dataS: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
for (const item of this.orderList) {
|
||||
var chartDom = document.getElementById(item.id)
|
||||
var myChart = echarts.init(chartDom)
|
||||
var outQuantity = item.outQuantity ? item.outQuantity : 0 // 加工数量
|
||||
var scrapQuantity = item.scrapQuantity ? item.scrapQuantity : 0 // 损坏数量
|
||||
var planQuantity = item.planQuantity ? item.planQuantity : 0 // 计划加工量
|
||||
var syQuantity = (planQuantity - outQuantity - scrapQuantity) > 0 ? (planQuantity - outQuantity - scrapQuantity) : 0// 剩余数量
|
||||
var option = {
|
||||
color: ['#2C3AAE', '#C5E951', '#DCE4F1'],
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
icon: 'circle',
|
||||
bottom: '5%',
|
||||
left: 'center',
|
||||
itemWidth: 8,
|
||||
itemHeight: 8
|
||||
},
|
||||
series: [
|
||||
// 内圆1
|
||||
{
|
||||
type: 'pie',
|
||||
zlevel: 2, // 层级
|
||||
radius: ['46%', '50%'],
|
||||
center: ['50%', '45%'],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(209, 204, 214, 0.64)',
|
||||
color: '#fff',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
hoverAnimation: false,
|
||||
data: [100]
|
||||
},
|
||||
// 外环1
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['70%', '71%'],
|
||||
center: ['50%', '45%'],
|
||||
zlevel: 1, // 层级
|
||||
itemStyle: {
|
||||
normal: {
|
||||
shadowBlur: 10,
|
||||
shadowColor: 'rgba(0,0,0,.5)',
|
||||
color: '#fff',
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
}
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
show: false
|
||||
},
|
||||
hoverAnimation: false,
|
||||
data: [100]
|
||||
},
|
||||
// 占比环
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['50%', '70%'],
|
||||
center: ['50%', '45%'],
|
||||
clockWise: true,
|
||||
avoidLabelOverlap: false,
|
||||
hoverAnimation: false,
|
||||
silent: true,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
color: '#9A9EBA',
|
||||
formatter: ['{a|' + planQuantity + '}', '{b|' + i18n.t('module.orderManage.orderMonitoring.orderQuantity') + '}'].join('\n\n'),
|
||||
rich: {
|
||||
a: {
|
||||
color: '#2F3AA7',
|
||||
fontSize: 24
|
||||
},
|
||||
b: {
|
||||
color: '#1E2AA8',
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: outQuantity,
|
||||
name: i18n.t('module.orderManage.orderMonitoring.processingCapacity') + outQuantity,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#2C3AAE'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: scrapQuantity,
|
||||
name: i18n.t('module.orderManage.orderMonitoring.damageQuantity') + scrapQuantity,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#C5E951'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: syQuantity,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#DCE4F1'
|
||||
}, // 默认颜色
|
||||
emphasis: {
|
||||
color: '#DCE4F1'
|
||||
} // hover 颜色
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(option, true)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.pieBox {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
.pieBox > li {
|
||||
background-color: rgba(247, 248, 255, 0.7);
|
||||
margin: 0 16px 16px 0;
|
||||
padding: 16px;
|
||||
}
|
||||
.pieBox .title {
|
||||
font-size: 14px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
.imgBox {
|
||||
text-align: center;
|
||||
padding-top: 20px;
|
||||
}
|
||||
</style>
|
||||
200
src/views/orderManage/orderMonitoring/components/saleTop.vue
Normal file
200
src/views/orderManage/orderMonitoring/components/saleTop.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<div id="saleTop" :style="{ height: height * beilv + 'px', width:width}" />
|
||||
</template>
|
||||
<script>
|
||||
import echarts from 'echarts'
|
||||
import resize from './mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
props: {
|
||||
beilv: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '300px'
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '100%'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
chart: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(document.getElementById('saleTop'))
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['员工2', '员工1', '员工3'],
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
show: false
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Direct',
|
||||
type: 'bar',
|
||||
barWidth: 32,
|
||||
itemStyle: {
|
||||
// 柱状颜色和圆角
|
||||
barBorderRadius: [16, 16, 16, 16] // （顺时针左上，右上，右下，左下）
|
||||
},
|
||||
label: {
|
||||
// 柱体上显示数值
|
||||
show: true, // 开启显示
|
||||
position: 'top', // 在上方显示
|
||||
textStyle: {
|
||||
// 数值样式
|
||||
fontSize: this.beilv * 22,
|
||||
color: '#FFF89F'
|
||||
},
|
||||
formatter: '{c}'
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{ offset: 0, color: '#281B0E' },
|
||||
{ offset: 1, color: '#3AC6FC' }
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 205,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{ offset: 0, color: '#281B0E' },
|
||||
{ offset: 1, color: '#F9A237' }
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 152,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{ offset: 0, color: '#281B0E' },
|
||||
{ offset: 1, color: '#83F7EC' }
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'pictorialBar',
|
||||
name: 'pictorial element',
|
||||
symbolSize: 50,
|
||||
z: 10,
|
||||
data: [
|
||||
{
|
||||
value: 100,
|
||||
symbol:
|
||||
'image://data:data:image/png;base64,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',
|
||||
xAxis: 0,
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, this.beilv * -200 + '%']
|
||||
},
|
||||
{
|
||||
value: 205,
|
||||
symbol:
|
||||
'image://data:image/png;base64,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',
|
||||
xAxis: 1,
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, this.beilv * -200 + '%']
|
||||
},
|
||||
{
|
||||
value: 152,
|
||||
symbol:
|
||||
'image://data:data:image/png;base64,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',
|
||||
xAxis: 2,
|
||||
symbolPosition: 'end',
|
||||
symbolOffset: [0, this.beilv * -200 + '%']
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.progress {
|
||||
width: 12px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.progress1 {
|
||||
background: linear-gradient(180deg, #3ac6fc 0%, rgba(56, 195, 255, 0.05) 100%);
|
||||
}
|
||||
.progress2 {
|
||||
background: linear-gradient(346deg, #281b0e 0%, #f9a237 100%);
|
||||
}
|
||||
.progress3 {
|
||||
background: linear-gradient(180deg, #83f7ec 0%, rgba(76, 236, 213, 0.05) 100%);
|
||||
}
|
||||
</style>
|
||||
239
src/views/orderManage/orderMonitoring/orderMonitoring.vue
Normal file
239
src/views/orderManage/orderMonitoring/orderMonitoring.vue
Normal file
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<head-form :form-config="headFormConfig" @headBtnClick="btnClick" />
|
||||
<el-tabs v-model="activeName" @tab-click="toggleClick">
|
||||
<el-tab-pane :label="this.$t('module.orderManage.orderMonitoring.datasheets')" name="dataList" />
|
||||
<el-tab-pane :label="this.$t('module.orderManage.orderMonitoring.donutChart')" name="ringChart" />
|
||||
</el-tabs>
|
||||
<!-- 数据列表 -->
|
||||
<div v-if="showList">
|
||||
<base-table
|
||||
:page="listQuery.current"
|
||||
:limit="listQuery.size"
|
||||
:height="tableH"
|
||||
:table-config="tableProps"
|
||||
:table-data="list"
|
||||
:is-loading="listLoading"
|
||||
>
|
||||
<method-btn
|
||||
v-if="tableBtn.length"
|
||||
slot="handleBtn"
|
||||
:width="trueWidth"
|
||||
:method-list="tableBtn"
|
||||
@clickBtn="handleClick"
|
||||
/>
|
||||
</base-table>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="listQuery.current"
|
||||
:limit.sync="listQuery.size"
|
||||
@pagination="getList()"
|
||||
/>
|
||||
</div>
|
||||
<!-- 环状图 -->
|
||||
<ring-chart v-else ref="ringCharts" :order-list="list" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import HeadForm from '@/components/basicData/HeadForm'
|
||||
import i18n from '@/lang'
|
||||
import { timeFormatter, rateFormatter } from '@/filters'
|
||||
import BaseTable from '@/components/BaseTable'
|
||||
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
|
||||
import MethodBtn from '@/components/BaseTable/subcomponents/MethodBtn'
|
||||
import { orderMonitor } from '@/api/orderManage/order/order'
|
||||
import ringChart from './components/ringChart.vue'
|
||||
import newBasicData from '@/filters/newBasicData'
|
||||
import Vue from 'vue'
|
||||
import { tableHeight } from '@/utils/index'
|
||||
// detail是跳到监控详情的，详情是假数据，目前暂时不放详情按钮
|
||||
const tableBtn = [
|
||||
// {
|
||||
// type: 'detail',
|
||||
// btnName: 'btn.detail'
|
||||
// }
|
||||
]
|
||||
const tableProps = [
|
||||
{
|
||||
prop: 'name',
|
||||
label: i18n.t('module.orderManage.orderMonitoring.orderName'),
|
||||
minWidth: 230,
|
||||
isFixed: true
|
||||
},
|
||||
{
|
||||
prop: 'startProduceTime',
|
||||
label: i18n.t('module.orderManage.orderMonitoring.startProcessingTime'),
|
||||
minWidth: 160,
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'finishProduceTime',
|
||||
label: i18n.t('module.orderManage.orderMonitoring.completeTime'),
|
||||
minWidth: 160,
|
||||
filter: timeFormatter
|
||||
},
|
||||
{
|
||||
prop: 'pdl',
|
||||
label: i18n.t('module.orderManage.orderMonitoring.processingLine')
|
||||
},
|
||||
{
|
||||
prop: 'outRate',
|
||||
label: i18n.t('module.orderManage.orderMonitoring.processingCompletionRate'),
|
||||
minWidth: 160,
|
||||
filter: rateFormatter
|
||||
},
|
||||
{
|
||||
prop: 'inQuantity',
|
||||
label: i18n.t('module.orderManage.orderMonitoring.originalFilmInput')
|
||||
},
|
||||
{
|
||||
prop: 'inRate',
|
||||
label: i18n.t('module.orderManage.orderMonitoring.originalFilmusage'),
|
||||
filter: rateFormatter
|
||||
},
|
||||
{
|
||||
prop: 'scrapRate',
|
||||
label: i18n.t('module.orderManage.orderMonitoring.scrapRate'),
|
||||
filter: rateFormatter
|
||||
},
|
||||
{
|
||||
prop: 'customerName',
|
||||
label: i18n.t('module.orderManage.orderMonitoring.customer')
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: i18n.t('module.orderManage.orderMonitoring.orderStatus'),
|
||||
filter: newBasicData('1526063541841727490')
|
||||
},
|
||||
{
|
||||
prop: 'unitCode',
|
||||
label: i18n.t('module.orderManage.orderMonitoring.unit'),
|
||||
filter: newBasicData('1')
|
||||
},
|
||||
{
|
||||
prop: 'outQuantity',
|
||||
label: i18n.t('module.orderManage.orderMonitoring.processingCapacity')
|
||||
},
|
||||
{
|
||||
prop: 'specifications',
|
||||
label: i18n.t('module.orderManage.orderMonitoring.productSpecifications')
|
||||
},
|
||||
{
|
||||
prop: 'price',
|
||||
label: i18n.t('module.orderManage.orderMonitoring.price')
|
||||
}
|
||||
]
|
||||
export default {
|
||||
name: 'OrderMonitoring',
|
||||
components: { HeadForm, BaseTable, Pagination, MethodBtn, ringChart },
|
||||
data() {
|
||||
return {
|
||||
showList: true,
|
||||
headFormConfig: [
|
||||
{
|
||||
type: 'input',
|
||||
label: i18n.t('module.orderManage.orderMonitoring.orderName'),
|
||||
placeholder: i18n.t('module.orderManage.orderMonitoring.orderName'),
|
||||
param: 'name'
|
||||
},
|
||||
{
|
||||
type: 'datePicker',
|
||||
label: i18n.t('module.orderManage.orderMonitoring.period'),
|
||||
dateType: 'daterange',
|
||||
format: 'yyyy-MM-dd',
|
||||
valueFormat: 'yyyy-MM-dd',
|
||||
rangeSeparator: '-',
|
||||
startPlaceholder: this.$t('module.orderManage.orderMonitoring.startTime'),
|
||||
endPlaceholder: this.$t('module.orderManage.orderMonitoring.endTime'),
|
||||
param: 'searchTime'
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
btnName: 'btn.search',
|
||||
name: 'search',
|
||||
color: 'primary'
|
||||
}
|
||||
],
|
||||
headFormValue: {},
|
||||
activeName: 'dataList',
|
||||
listQuery: {
|
||||
current: 1,
|
||||
size: 20,
|
||||
name: '',
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
},
|
||||
tableProps,
|
||||
tableBtn,
|
||||
list: [],
|
||||
listLoading: false,
|
||||
trueWidth: 80,
|
||||
tableH: tableHeight(333),
|
||||
total: 0,
|
||||
unitList: JSON.parse(localStorage.getItem('dictObj'))['1'],
|
||||
unitObj: {},
|
||||
statusList: JSON.parse(localStorage.getItem('dictObj'))['1'],
|
||||
statusObj: {}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', () => {
|
||||
this.tableH = tableHeight(333)
|
||||
})
|
||||
this.unitList.map((item) => {
|
||||
this.unitObj[item.dataCode] = item.dataName
|
||||
})
|
||||
Vue.set(this.tableProps[12], 'unitObj', this.unitObj)
|
||||
this.statusList.map(item => {
|
||||
this.statusObj[item.dataCode] = item.dataName
|
||||
})
|
||||
Vue.set(this.tableProps[11], 'statusObj', this.statusObj)
|
||||
this.getList()
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
this.listQuery.name = this.headFormValue.name
|
||||
this.listQuery.startTime = this.headFormValue.searchTime ? this.headFormValue.searchTime[0] + 'T00:00:00' : ''
|
||||
this.listQuery.endTime = this.headFormValue.searchTime ? this.headFormValue.searchTime[1] + 'T23:59:59' : ''
|
||||
orderMonitor(this.listQuery).then(res => {
|
||||
if (res.data.records) {
|
||||
this.list = res.data.records
|
||||
} else {
|
||||
this.list = []
|
||||
}
|
||||
this.total = res.data.total
|
||||
if (!this.showList) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.ringCharts.initChart()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
btnClick(val) {
|
||||
this.headFormValue = val
|
||||
// 如果点击的是搜索栏的其他按钮在这里继续写判断
|
||||
if (this.headFormValue.btnName === 'search') {
|
||||
this.listQuery.current = 1
|
||||
this.getList()
|
||||
}
|
||||
},
|
||||
toggleClick() {
|
||||
if (this.activeName === 'ringChart') {
|
||||
this.showList = false
|
||||
this.$nextTick(() => {
|
||||
this.$refs.ringCharts.initChart()
|
||||
})
|
||||
} else if (this.activeName === 'dataList') {
|
||||
this.showList = true
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
handleClick() {
|
||||
this.$router.push({
|
||||
name: 'orderMonitoringDetail'
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
301
src/views/orderManage/orderMonitoring/orderMonitoringDetail.vue
Normal file
301
src/views/orderManage/orderMonitoring/orderMonitoringDetail.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<template>
|
||||
<div id="container" ref="container" class="visual-container">
|
||||
<el-row
|
||||
class="container-title"
|
||||
:style="{
|
||||
height: beilv * 88 + 'px',
|
||||
lineHeight: beilv * 88 + 'px',
|
||||
fontSize: beilv * 30 + 'px'
|
||||
}"
|
||||
>
|
||||
<img src="../../../assets/img/logo.png" style="width:1.1em;position:relative;top:.4em" alt="">
|
||||
合肥新能源数智工厂订单监控查询
|
||||
<el-button
|
||||
type="text"
|
||||
class="title-button"
|
||||
:style="{ right: 33 * beilv + 'px', top: 37 * beilv + 'px' }"
|
||||
@click="changeFullScreen"
|
||||
>
|
||||
<svg-icon v-if="isFullScreen" icon-class="unFullScreenView" />
|
||||
<svg-icon v-else icon-class="fullScreenView" />
|
||||
</el-button>
|
||||
</el-row>
|
||||
<el-row class="container-main">
|
||||
<el-row :style="{ padding: '0 ' + 9 * beilv + 'px' }" :gutter="9 * beilv">
|
||||
<el-col :span="6">
|
||||
<el-row>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24" style="position: relative;">
|
||||
<base-container :beilv="beilv" :height="463" :title="'三大品类'" :title-icon="'productType'">
|
||||
<pie-chart1 :id="'pie-chart1'" :beilv="beilv" :height="'256'" :pie-style="pieStyle1" />
|
||||
<dataShowBox :beilv="beilv" :height="112" style="position: absolute;bottom: 0;" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container :beilv="beilv" :height="463" :title="'销售额前十产品'" :title-icon="'5_4'">
|
||||
<progressBox :beilv="beilv" :product-data="progressData1" :style="{paddingTop: 20 * beilv + 'px'}" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<dataShowMain :beilv="beilv" :height="216" />
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container :beilv="beilv" :height="711" :title="'各个季度完成情况'" :title-icon="'number'">
|
||||
<pie-chart2 :id="'pie-chart2'" :beilv="beilv" :height="'310'" :pie-style="pieStyle2" />
|
||||
<div>
|
||||
<div class="bar-title">
|
||||
<span>
|
||||
<svg-icon :icon-class="'5_2'" style="font-size: 1.5em; position: relative; top: .08em" />
|
||||
各月情况
|
||||
</span>
|
||||
</div>
|
||||
<lineChart :beilv="beilv" :height="'330'" />
|
||||
</div>
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-row>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container :beilv="beilv" :height="463" :title="'销售三甲员工'" :title-icon="'1_1'">
|
||||
<saleTop :beilv="beilv" :height="'356'" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
<el-col :style="{ margin: 8 * beilv + 'px' + ' 0' }" :span="24">
|
||||
<base-container :beilv="beilv" :height="463" :title="'大客户'" :title-icon="'1_4'">
|
||||
<progressBox :beilv="beilv" :product-data="progressData2" :style="{paddingTop: 20 * beilv + 'px'}" />
|
||||
</base-container>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import baseContainer from './components/baseContainer'
|
||||
import pieChart1 from './components/pieChart'
|
||||
import pieChart2 from './components/pieChart'
|
||||
import screenfull from 'screenfull'
|
||||
import dataShowBox from './components/dataShowBox'
|
||||
import dataShowMain from './components/dataShowMain'
|
||||
import progressBox from './components/progressBox'
|
||||
import saleTop from './components/saleTop'
|
||||
import lineChart from './components/lineChart'
|
||||
const pieStyle1 = {
|
||||
num_fs: 18,
|
||||
line_s: 24,
|
||||
pieData: [
|
||||
{ value: 330, name: '品类1' },
|
||||
{ value: 120, name: '品类2' },
|
||||
{ value: 250, name: '品类3' }
|
||||
],
|
||||
formatter: '{firstLine|{b}} \n {secondLine|{d}%}'
|
||||
}
|
||||
const pieStyle2 = {
|
||||
num_fs: 24,
|
||||
line_s: 95,
|
||||
pieData: [
|
||||
{ value: 329, name: '第一季度' },
|
||||
{ value: 119, name: '第二季度' },
|
||||
{ value: 251, name: '第三季度' },
|
||||
{ value: 301, name: '第四季度' }
|
||||
],
|
||||
formatter: '{firstLine|{b} {d}%} \n {secondLine|{c}}'
|
||||
}
|
||||
export default {
|
||||
name: 'OrderMonitoringDetail',
|
||||
components: {
|
||||
baseContainer,
|
||||
pieChart1,
|
||||
pieChart2,
|
||||
dataShowBox,
|
||||
dataShowMain,
|
||||
progressBox,
|
||||
saleTop,
|
||||
lineChart
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
beilv: 1,
|
||||
isFullScreen: false,
|
||||
pieStyle1,
|
||||
pieStyle2,
|
||||
progressData1: [],
|
||||
progressData2: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isFullScreen: function(val) {
|
||||
if (val) {
|
||||
this.beilv = document.body.offsetWidth / 1920
|
||||
} else {
|
||||
this.beilv = document.getElementById('container').offsetWidth / 1920
|
||||
}
|
||||
},
|
||||
'sidebar.opened': function(val) {
|
||||
console.log(val)
|
||||
if (!this.isFullScreen) {
|
||||
setTimeout(() => {
|
||||
this.beilv = document.getElementById('container').offsetWidth / 1920
|
||||
}, 300)
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.beilv = document.getElementById('container').offsetWidth / 1920
|
||||
window.addEventListener('resize', () => {
|
||||
if (this.isFullScreen) {
|
||||
this.beilv = document.body.offsetWidth / 1920
|
||||
} else {
|
||||
this.beilv = document.getElementById('container').offsetWidth / 1920
|
||||
}
|
||||
})
|
||||
this.getMsg()
|
||||
},
|
||||
methods: {
|
||||
getMsg() {
|
||||
this.progressData1 = [
|
||||
{ name: '产品1', number: 1000, percentage: '100%' },
|
||||
{ name: '产品2', number: 900, percentage: '90%' },
|
||||
{ name: '产品3', number: 850, percentage: '85%' },
|
||||
{ name: '产品4', number: 700, percentage: '70%' },
|
||||
{ name: '产品5', number: 620, percentage: '62%' },
|
||||
{ name: '产品6', number: 550, percentage: '55%' },
|
||||
{ name: '产品7', number: 530, percentage: '53%' },
|
||||
{ name: '产品8', number: 500, percentage: '50%' },
|
||||
{ name: '产品9', number: 430, percentage: '43%' },
|
||||
{ name: '产品10', number: 300, percentage: '30%' }
|
||||
]
|
||||
this.progressData2 = [
|
||||
{ name: '客户1', number: 1000, percentage: '100%' },
|
||||
{ name: '客户2', number: 900, percentage: '90%' },
|
||||
{ name: '客户3', number: 850, percentage: '85%' },
|
||||
{ name: '客户4', number: 700, percentage: '70%' },
|
||||
{ name: '客户5', number: 620, percentage: '62%' },
|
||||
{ name: '客户6', number: 550, percentage: '55%' },
|
||||
{ name: '客户7', number: 530, percentage: '53%' },
|
||||
{ name: '客户8', number: 500, percentage: '50%' },
|
||||
{ name: '客户9', number: 430, percentage: '43%' },
|
||||
{ name: '客户10', number: 300, percentage: '30%' }
|
||||
]
|
||||
},
|
||||
change() {
|
||||
this.isFullScreen = screenfull.isFullscreen
|
||||
},
|
||||
init() {
|
||||
if (screenfull.enabled) {
|
||||
screenfull.on('change', this.change)
|
||||
}
|
||||
},
|
||||
destroy() {
|
||||
if (screenfull.enabled) {
|
||||
screenfull.off('change', this.change)
|
||||
}
|
||||
},
|
||||
changeFullScreen() {
|
||||
if (!screenfull.enabled) {
|
||||
this.$message({
|
||||
message: 'you browser can not work',
|
||||
type: 'warning'
|
||||
})
|
||||
return false
|
||||
}
|
||||
screenfull.toggle(this.$refs.container)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.visual-container {
|
||||
width: 100%;
|
||||
min-width: 960px;
|
||||
background: url('../../../assets/img/OperationalOverview/back.png') no-repeat;
|
||||
background-size: cover;
|
||||
.container-title {
|
||||
width: 100%;
|
||||
background: url('../../../assets/img/OperationalOverview/title.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
color: #00fff0;
|
||||
text-align: center;
|
||||
.title-button {
|
||||
color: #00fff0;
|
||||
font-size: 20px;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
.container-main {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
.now-team-title {
|
||||
margin: 0;
|
||||
margin-top: -1em;
|
||||
font-size: 1.2em;
|
||||
line-height: 2em;
|
||||
color: #fff;
|
||||
}
|
||||
.main-title {
|
||||
text-align: center;
|
||||
}
|
||||
.now-secondary-title {
|
||||
margin: 0;
|
||||
font-size: 1em;
|
||||
line-height: 2em;
|
||||
color: #fff;
|
||||
}
|
||||
.now-team-content {
|
||||
font-size: 3em;
|
||||
line-height: 1em;
|
||||
color: #52fff1;
|
||||
text-align: center;
|
||||
}
|
||||
// ::v-deep .el-progress-bar__inner {
|
||||
// background-color: unset;
|
||||
// background-image: linear-gradient(to right, #4573fe, #47f8dc);
|
||||
// }
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.visual-container {
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track-piece {
|
||||
background: #1b2b3d;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: #1b2b3d;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
width: 6px;
|
||||
background: #1b2b3d;
|
||||
-webkit-border-radius: 2em;
|
||||
-moz-border-radius: 2em;
|
||||
border-radius: 2em;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba($color: #5bc4be, $alpha: 0.7);
|
||||
background-clip: padding-box;
|
||||
min-height: 28px;
|
||||
-webkit-border-radius: 2em;
|
||||
-moz-border-radius: 2em;
|
||||
border-radius: 2em;
|
||||
transition: background-color 0.3s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: rgba($color: #5bc4be, $alpha: 1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user