生产管理

This commit is contained in:
熊丽君
2021-12-14 14:59:06 +08:00
parent 1f1a04aef1
commit 14795c09ff
4 changed files with 567 additions and 213 deletions

View File

@ -1,81 +1,85 @@
<template>
<div style="background-color: #000;height: 100%;width:100%">
<div class="ScaleBox" ref="ScaleBox" :style="{
width: width + 'px',
height: height + 'px'
}">
<slot></slot>
</div>
</div>
<div style="background-color: #000; height: 100%; width: 100%">
<div
class="ScaleBox"
ref="ScaleBox"
:style="{
width: width + 'px',
height: height + 'px',
}"
>
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'ScaleBox',
props: {},
data () {
return {
scale: 0,
width: 1920,
height: 1080
}
},
mounted () {
this.setScale()
window.addEventListener('resize', this.debounce(this.setScale))
},
methods: {
getScale () {
const { width, height } = this
const wh = window.innerHeight / height
const ww = window.innerWidth / width
console.log(ww < wh ? ww : wh)
return ww < wh ? ww : wh
},
setScale () {
// if (window.innerHeight == 1080) {
// this.height = 1080
// } else {
// this.height = 937
// }
this.scale = this.getScale()
if (this.$refs.ScaleBox) {
this.$refs.ScaleBox.style.setProperty('--scale', this.scale)
}
},
debounce (fn, delay) {
const delays = delay || 500
let timer
return function () {
const th = this
const args = arguments
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(function () {
timer = null
fn.apply(th, args)
}, delays)
}
}
}
name: 'ScaleBox',
props: {},
data() {
return {
scale: 0,
width: 1920,
height: 1080,
}
},
mounted() {
this.setScale()
window.addEventListener('resize', this.debounce(this.setScale))
},
methods: {
getScale() {
const { width, height } = this
const wh = window.innerHeight / height
const ww = window.innerWidth / width
console.log(ww < wh ? ww : wh)
return ww < wh ? ww : wh
},
setScale() {
// if (window.innerHeight == 1080) {
// this.height = 1080
// } else {
// this.height = 937
// }
this.scale = this.getScale()
if (this.$refs.ScaleBox) {
this.$refs.ScaleBox.style.setProperty('--scale', this.scale)
}
},
debounce(fn, delay) {
const delays = delay || 500
let timer
return function () {
const th = this
const args = arguments
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(function () {
timer = null
fn.apply(th, args)
}, delays)
}
},
},
}
</script>
<style lang="scss">
#ScaleBox {
--scale: 1;
}
.ScaleBox {
position: absolute;
transform: scale(var(--scale)) translate(-50%, -50%);
display: flex;
flex-direction: column;
transform-origin: 0 0;
left: 50%;
top: 50%;
transition: 0.3s;
z-index: 999;
// background: rgba(255, 0, 0, 0.3);
--scale: 1;
}
// .ScaleBox {
// position: absolute;
// transform: scale(var(--scale)) translate(-50%, -50%);
// display: flex;
// flex-direction: column;
// transform-origin: 0 0;
// left: 50%;
// top: 50%;
// transition: 0.3s;
// z-index: 999;
// // background: rgba(255, 0, 0, 0.3);
// }
</style>

View File

@ -1,19 +1,47 @@
<template>
<div>
<container1 title="生产责任令">
<el-date-picker
slot="datePicker"
v-model="dateRange"
size="small"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
<div style="height: 100%; width: 100%; text-align: center; padding: 0 10px">
<img style="height: 100%; width: 100%" src="./1.png" alt="" />
<div style="height: 100%; width: 100%; padding: 0 15px 0 25px">
<div style="display: flex; height: 100%">
<div style="height: 100%; width: 22%; display: flex; flex-direction: column; justify-content: space-evenly">
<div class="tag">
<div class="title">军品收入</div>
<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
>3380/<i style="font-size: 16px">12342</i></i
>
</div>
<div class="tag">
<div class="title">装药量</div>
<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
>3380/<i style="font-size: 16px">12342</i></i
>
</div>
<div class="tag">
<div class="title">大型产品</div>
<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
>3380/<i style="font-size: 16px">12342</i></i
>
</div>
<div class="tag">
<div class="title">中型产品</div>
<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
>3380/<i style="font-size: 16px">12342</i></i
>
</div>
<div class="tag">
<div class="title">小型产品</div>
<i style="font-size: 18px; font-weight: bold; color: #55c5a2"
>3380/<i style="font-size: 16px">12342</i></i
>
</div>
</div>
<div style="height: 100%; width: 78%" ref="chart"></div>
</div>
</div>
</container1>
</div>
@ -21,55 +49,184 @@
<script>
import container1 from './components/container1/index.vue'
import { blueColorList, greenColorList, yelloColorList } from '@/utils/gradualColor'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../../dashboard/mixins/resize'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
mixins: [resize],
name: 'left2',
components: {
container1,
vueSeamlessScroll,
},
data() {
return {
listData: [1, 2, 3, 4, 5, 6, 7, 8],
scrollList: [
{
id: 1,
name: '计划一',
level: '一级',
status: 1,
},
{
id: 2,
name: '计划二',
level: '二级',
status: 3,
},
{
id: 3,
name: '计划三',
level: '三级',
status: 3,
},
{
id: 4,
name: '计划四',
level: '二级',
status: 1,
},
{
id: 5,
name: '计划五',
level: '三级',
status: 3,
},
],
chart: null,
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.chart)
this.setOptions()
},
setOptions() {
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
textStyle: {
color: '#fff', //legend字体颜色
},
},
grid: {
left: 20,
right: 20,
top: 30,
bottom: 50,
containLabel: true,
},
dataZoom: {
type: 'slider',
// start: 0,
// end: 50,
textStyle: {
color: '#fff',
},
},
xAxis: [
{
type: 'category',
data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
yAxis: [
{
name: '个',
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'],
},
},
axisLabel: {
formatter: '{value}',
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
{
type: 'value',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value} %',
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
series: [
{
name: '装药量(大)',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series',
},
itemStyle: {
color: yelloColorList[2],
},
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: '装药量(中)',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series',
},
itemStyle: {
color: yelloColorList[0],
},
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: '装药量(小)',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series',
},
itemStyle: {
color: yelloColorList[1],
},
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: '交付数量',
type: 'bar',
emphasis: {
focus: 'series',
},
itemStyle: {
color: '#45D1CC',
},
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: '',
type: 'line',
smooth: false,
data: [500, 550, 700, 520, 650, 520, 550],
itemStyle: {
color: '#45D1CC',
},
symbol: 'none',
},
{
name: '',
type: 'line',
smooth: false,
itemStyle: {
color: yelloColorList[1],
},
data: [600, 500, 700, 620, 750, 800, 600],
symbol: 'none',
},
],
})
},
},
}
</script>

View File

@ -1,20 +1,7 @@
<template>
<div>
<container1 title="物资计划">
<el-date-picker
slot="datePicker"
v-model="dateRange"
size="small"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
<div style="height: 100%; width: 100%; text-align: center; padding: 0 10px">
<img style="height: 100%; width: 100%" src="./3.png" alt="" />
</div>
<div style="height: 100%; width: 100%" ref="chart"></div>
</container1>
</div>
</template>
@ -35,41 +22,166 @@ export default {
},
data() {
return {
listData: [1, 2, 3, 4, 5, 6, 7, 8],
scrollList: [
{
id: 1,
name: '计划一',
level: '一级',
status: 1,
},
{
id: 2,
name: '计划二',
level: '二级',
status: 3,
},
{
id: 3,
name: '计划三',
level: '三级',
status: 3,
},
{
id: 4,
name: '计划四',
level: '二级',
status: 1,
},
{
id: 5,
name: '计划五',
level: '三级',
status: 3,
},
],
chart: null,
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.chart)
this.setOptions()
},
setOptions() {
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
data: ['装药', '总装', '交付'],
textStyle: {
color: '#fff', //legend字体颜色
},
},
grid: {
left: 20,
right: 20,
top: 30,
bottom: 10,
containLabel: true,
},
xAxis: [
{
type: 'category',
data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
yAxis: [
{
name: '',
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'],
},
},
axisLabel: {
formatter: '{value}',
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
{
type: 'value',
min: 0,
max: 100,
interval: 20,
axisLabel: {
formatter: '{value} %',
},
splitLine: {
show: false, //不显示网格线
},
splitArea: {
show: false, //不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
series: [
{
name: '交付',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series',
},
itemStyle: {
color: '#55C5A2',
},
barWidth: 30,
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: '总装',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series',
},
itemStyle: {
color: '#FA8C16',
},
barWidth: 30,
data: [150, 232, 201, 154, 190, 330, 410],
},
{
name: '装药',
type: 'bar',
stack: 'Ad',
emphasis: {
focus: 'series',
},
itemStyle: {
color: '#F6D97E',
},
barWidth: 30,
data: [150, 232, 201, 154, 190, 330, 900],
},
{
name: '完成率',
type: 'line',
smooth: false,
data: [500, 550, 700, 520, 650, 520, 900],
itemStyle: {
color: '#55C5A2',
},
symbol: 'none',
},
{
name: '完成率',
type: 'line',
smooth: false,
itemStyle: {
color: '#FA8C16',
},
data: [600, 500, 700, 620, 750, 800, 900],
symbol: 'none',
},
{
name: '完成率',
type: 'line',
smooth: false,
itemStyle: {
color: '#F6D97E',
},
data: [650, 550, 750, 670, 780, 900, 900],
symbol: 'none',
},
],
})
},
},
}
</script>

View File

@ -1,19 +1,8 @@
<template>
<div>
<container1 title="生产情况分析">
<el-date-picker
slot="datePicker"
v-model="dateRange"
size="small"
style="width: 240px"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
<div style="height: 100%; width: 100%; text-align: center; padding: 0 10px">
<img style="height: 100%; width: 100%" src="./2.png" alt="" />
<div style="height: 100%; width: 100%; text-align: center; padding: 0 15px 0 25px">
<div style="height: 100%; width: 100%" ref="chart"></div>
</div>
</container1>
</div>
@ -21,55 +10,147 @@
<script>
import container1 from './components/container1/index.vue'
import colorList from '@/utils/colorPalette'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../../dashboard/mixins/resize'
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
mixins: [resize],
name: 'left2',
components: {
container1,
vueSeamlessScroll,
},
data() {
return {
listData: [1, 2, 3, 4, 5, 6, 7, 8],
scrollList: [
{
id: 1,
name: '计划一',
level: '一级',
status: 1,
},
{
id: 2,
name: '计划二',
level: '二级',
status: 3,
},
{
id: 3,
name: '计划三',
level: '三级',
status: 3,
},
{
id: 4,
name: '计划四',
level: '二级',
status: 1,
},
{
id: 5,
name: '计划五',
level: '三级',
status: 3,
},
],
chart: null,
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
methods: {
initChart() {
this.chart = echarts.init(this.$refs.chart)
this.setOptions()
},
setOptions() {
this.chart.setOption({
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
textStyle: {
color: '#fff', //legend字体颜色
},
},
color: colorList,
grid: {
left: 20,
right: 20,
top: 30,
bottom: 50,
containLabel: true,
},
dataZoom: {
type: 'slider',
// start: 0,
// end: 50,
textStyle: {
color: '#fff',
},
},
xAxis: [
{
type: 'category',
data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07'],
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
yAxis: [
{
name: '个',
splitLine: {
show: true,
// 改变轴线颜色
lineStyle: {
// 使用深浅的间隔色
color: ['rgba(255, 255, 255,.5)'],
},
},
axisLabel: {
formatter: '{value}',
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)',
},
},
},
],
series: [
{
name: '隔热',
type: 'line',
smooth: false,
data: [200, 300, 200, 300, 200, 300, 200],
// itemStyle: {
// color: '#53C19D',
// },
symbol: 'none',
},
{
name: '总装',
type: 'line',
smooth: false,
// itemStyle: {
// color: '#8BB1ED',
// },
data: [300, 400, 300, 400, 300, 400, 300],
symbol: 'none',
},
{
name: '交付',
type: 'line',
smooth: false,
// itemStyle: {
// color: '#8BB1ED',
// },
data: [400, 500, 400, 500, 400, 500, 400],
symbol: 'none',
},
{
name: '装药',
type: 'line',
smooth: false,
// itemStyle: {
// color: '#8BB1ED',
// },
data: [500, 600, 500, 600, 500, 600, 500],
symbol: 'none',
},
{
name: '酯',
type: 'line',
smooth: false,
// itemStyle: {
// color: '#8BB1ED',
// },
data: [600, 700, 600, 700, 600, 700, 600],
symbol: 'none',
},
],
})
},
},
}
</script>