williamet/vis389
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

底部三个

Browse Source
This commit is contained in:
hh
2021-12-08 22:19:46 +08:00
parent ba2675b5ea
commit 3180eb84d2
17 changed files with 723 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -60,6 +60,7 @@
"vue-cropper": "0.5.5",
"vue-meta": "^2.4.0",
"vue-router": "3.4.9",
"vue-seamless-scroll": "^1.1.23",
"vuedraggable": "2.24.3",
"vuex": "3.6.0"
},

166
src/views/bigScreen/drivingCabin/center2.vue Normal file
View File

@ -0,0 +1,166 @@
<template>
<div>
<container4 title="今日动态">
<vue-seamless-scroll :data="listData" class="warp" :class-option="{
singleHeight: 35
}">
<ul class="item">
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/1.png">今日收入</el-col>
<el-col :span="5">1234万</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/2.png">今日支出</el-col>
<el-col :span="5">1234万</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/3.png">今日新签合同</el-col>
<el-col :span="5">1234份</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/4.png">今日安全问题</el-col>
<el-col :span="5">1234个</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/5.png">今日质量问题</el-col>
<el-col :span="5">1234个</el-col>
<el-col :span="7"></el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/6.png">今日设备数</el-col>
<el-col :span="5">123台</el-col>
<el-col :span="7">运行率：88%</el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/7.png">今日职工数</el-col>
<el-col :span="5">890人</el-col>
<el-col :span="7">出勤率：73%</el-col>
</el-row>
</li>
<li>
<el-row>
<el-col :span="10"><img src="./img/center2/8.png">今日生产任务</el-col>
<el-col :span="5">890个</el-col>
<el-col :span="7">完成率：66%</el-col>
</el-row>
</li>
</ul>
</vue-seamless-scroll>
</container4>
</div>
</template>
<script>
import container4 from "./components/container4/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import vueSeamlessScroll from 'vue-seamless-scroll'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '../../dashboard/mixins/resize'
export default {
mixins: [resize],
name: 'left1',
components: {
container4,
rocketTit,
vueSeamlessScroll
},
data () {
return {
listData: [1, 2, 3, 4, 5, 6, 7, 8],
}
},
mounted () {
},
beforeDestroy () {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.tit {
padding: 16px 24px;
}
.img {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.data {
display: flex;
margin: 0 15px;
background: rgba(2, 18, 63, 0.4);
color: #ffffff;
font-size: 18px;
.data-item {
flex: 1;
> div {
margin: 5px 0;
text-align: center;
}
.num {
font-size: 28px;
font-family: Roboto-BlackItalic, Roboto;
font-weight: 600;
color: #55c5a2;
vertical-align: sub;
padding-right: 3px;
}
}
}
.warp {
height: 280px;
width: 440px;
margin: 0 auto;
overflow: hidden;
ul {
list-style: none;
padding: 0;
margin: 0 auto;
li,
a {
display: block;
display: flex;
justify-content: space-between;
font-size: 15px;
}
li {
display: block;
height: 30px;
line-height: 30px;
background: rgba(2, 18, 63, 0.33);
padding-left: 20px;
margin: 5px 0;
img {
vertical-align: sub;
margin-right: 5px;
}
}
}
}
</style>

BIN
src/views/bigScreen/drivingCabin/components/container3/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

104
src/views/bigScreen/drivingCabin/components/container3/index.vue Normal file
View File

@ -0,0 +1,104 @@
<template>
<div class="container3">
<div class="tit">
<rocketTit>{{title}}</rocketTit>
<!-- <div class="datePicker">
<slot name="datePicker"></slot>
</div> -->
</div>
<div class="content">
<div class="snap">
<slot name="snap"></slot>
</div>
<slot />
</div>
</div>
</template>
<script>
import rocketTit from "../../../components/rocketTit/index.vue";
export default {
name: 'container3',
components: {
rocketTit,
},
props: {
title: {
type: String,
default: '',
},
selected: {
type: Boolean,
default: false,
},
},
data () {
return {
}
},
}
</script>
<style lang="scss" scoped>
.container3 {
display: flex;
flex-direction: column;
width: 673px;
height: 359px;
background-image: url(./bg.png);
background-size: cover;
color: #ffffff;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
.tit {
padding: 16px 16px 16px 24px;
position: relative;
.datePicker {
position: absolute;
right: 16px;
top: 12px;
::v-deep .el-date-editor {
border-radius: 0;
box-shadow: none !important;
border: 1px solid rgba(255, 255, 255, 0.2);
vertical-align: middle;
color: #fff;
background-color: transparent;
.el-range-input,
.el-range-separator {
color: #fff;
}
.el-range-editor.is-active {
border-color: #fff !important;
}
input {
background-color: transparent;
}
}
}
}
.content {
flex: 1;
padding: 2px 2px 2px 22px;
box-sizing: border-box;
overflow: hidden;
position: relative;
.snap {
position: absolute;
top: 20px;
left: 25px;
font-weight: 300;
}
}
}
</style>

BIN
src/views/bigScreen/drivingCabin/components/container4/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

145
src/views/bigScreen/drivingCabin/components/container4/index.vue Normal file
View File

@ -0,0 +1,145 @@
<template>
<div class="container4">
<div class="tit">
<div>{{title}}</div>
<!-- <rocketTit>{{title}}</rocketTit> -->
<!-- <div class="datePicker">
<slot name="datePicker"></slot>
</div> -->
</div>
<div class="content">
<div class="snap">
<slot name="snap"></slot>
</div>
<slot />
</div>
</div>
</template>
<script>
import rocketTit from "../../../components/rocketTit/index.vue";
export default {
name: 'container4',
components: {
rocketTit,
},
props: {
title: {
type: String,
default: '',
},
selected: {
type: Boolean,
default: false,
},
},
data () {
return {
}
},
}
</script>
<style lang="scss" scoped>
.container4 {
display: flex;
flex-direction: column;
width: 501px;
height: 359px;
background-image: url(./bg.png);
background-size: cover;
color: #ffffff;
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
.tit {
position: relative;
padding: 16px 16px 16px 24px;
text-align: center;
color: #ffffff;
font-size: 16px;
position: relative;
display: inline-block;
margin: 0 auto;
::before {
content: "";
display: block;
position: absolute;
left: -75px;
top: 25px;
width: 82px;
height: 3px;
background: linear-gradient(
90deg,
rgba(145, 213, 254, 0) 0%,
#91d5fe 100%
);
border-radius: 2px;
}
::after {
content: "";
display: block;
position: absolute;
right: -75px;
top: 25px;
width: 82px;
height: 3px;
background: linear-gradient(
90deg,
#91d5fe 0%,
rgba(145, 213, 254, 0) 100%
);
border-radius: 2px;
}
.datePicker {
position: absolute;
right: 16px;
top: 12px;
::v-deep .el-date-editor {
border-radius: 0;
box-shadow: none !important;
border: 1px solid rgba(255, 255, 255, 0.2);
vertical-align: middle;
color: #fff;
background-color: transparent;
.el-range-input,
.el-range-separator {
color: #fff;
}
.el-range-editor.is-active {
border-color: #fff !important;
}
input {
background-color: transparent;
}
}
}
}
.content {
flex: 1;
padding: 2px;
box-sizing: border-box;
overflow: hidden;
position: relative;
.snap {
position: absolute;
top: 20px;
left: 25px;
font-weight: 300;
}
}
}
</style>

BIN
src/views/bigScreen/drivingCabin/img/center2/1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 561 B

BIN
src/views/bigScreen/drivingCabin/img/center2/2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 526 B

BIN
src/views/bigScreen/drivingCabin/img/center2/3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 404 B

BIN
src/views/bigScreen/drivingCabin/img/center2/4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 522 B

BIN
src/views/bigScreen/drivingCabin/img/center2/5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 539 B

BIN
src/views/bigScreen/drivingCabin/img/center2/6.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 363 B

BIN
src/views/bigScreen/drivingCabin/img/center2/7.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 437 B

BIN
src/views/bigScreen/drivingCabin/img/center2/8.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 274 B

18
src/views/bigScreen/drivingCabin/index.vue
View File

@ -3,6 +3,9 @@
<div class="left1">
<left1></left1>
</div>
<div class="left2">
<left2></left2>
</div>
<!-- <div class="bg1"></div> -->
@ -13,6 +16,10 @@
<div class="right1">
<right1></right1>
</div>
<div class="right2">
<right2></right2>
</div>
<!-- <div class="right1">
<right1></right1>
</div>
@ -38,6 +45,7 @@ import container1 from "../components/container1/index.vue";
import left1 from "./left1.vue";
import left2 from "./left2.vue";
import center1 from "./center.vue";
import center2 from "./center2.vue";
import right1 from "./right1.vue";
import right2 from "./right2.vue";
import bottom1 from "./bottom1.vue";
@ -56,6 +64,7 @@ export default {
right2,
bottom1,
bottom2,
center2,
}
}
</script>
@ -84,7 +93,7 @@ export default {
}
.left2 {
position: absolute;
top: 245px;
top: 605px;
left: 24px;
}
.center1 {
@ -92,6 +101,11 @@ export default {
top: 20px;
left: 578px;
}
.center2 {
position: absolute;
top: 605px;
left: 710px;
}
.right1 {
position: absolute;
@ -100,7 +114,7 @@ export default {
}
.right2 {
position: absolute;
top: 245px;
top: 605px;
right: 24px;
}
.bottom1 {

206
src/views/bigScreen/drivingCabin/left2.vue
View File

@ -1,12 +1,10 @@
<template>
<div>
<container2 title="生产总体走势">
<container3 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>
<span slot="snap">件</span>
<div style="height:100%;width:100%;" ref="chart"></div>
</container2>
</container3>
</div>
</template>
@ -15,7 +13,7 @@
import scalseBox from '../components/scaleBox.vue'
import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import container2 from "../components/container2/index.vue";
import container3 from "./components/container3/index.vue";
import echarts from 'echarts'
@ -28,20 +26,15 @@ export default {
scalseBox,
bigScreenHead,
rocketTit,
container2,
container3,
},
data () {
return {
dateRange: [],
chart: null,
option: {
backgroundColor: '',
tooltip: {
trigger: 'axis'
},
legend: {
right: '10',
data: ['品类1', '品类2', '品类3'],
data: ['利润', '利润预测', '利润目标完成率'],
textStyle: {
color: '#fff'
},
@ -52,67 +45,166 @@ export default {
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['03-21', '03-22', '03-23', '03-24', '03-25', '03-26', '03-27'],
splitLine: {
show: false//不显示网格线
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
xAxis: [
{
type: 'category',
data: [
'2021-01',
'2021-02',
'2021-03',
'2021-04',
'2021-05',
'2021-06',
'2021-07',
'2021-08',
'2021-09',
'2021-10',
'2021-11',
'2021-12',
],
axisPointer: {
type: 'shadow'
},
},
axisLabel: {
interval: 0,
rotate: 320
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
},
}
}
},
yAxis: {
type: 'value',
splitLine: {
show: false//不显示网格线
},
splitArea: {
show: false//不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
],
yAxis: [
{
type: 'value',
name: '万元',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value}'
},
splitLine: {
show: false//不显示网格线
},
splitArea: {
show: false//不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
},
}
},
{
type: 'value',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} %'
},
splitLine: {
show: false//不显示网格线
},
splitArea: {
show: false//不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
},
}
}
],
grid: {
containLabel: true,
width: "99%",
left: 0,
top: 50,
bottom: 50,
},
dataZoom: {},
series: [
{
name: '品类1',
type: 'line',
data: [120, 132, 101, 134, 90, 230, 210],
smooth: false,
name: '利润',
type: 'bar',
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
],
lineStyle: {
color: 'rgba(203, 97, 79, 1)'
},
color: 'rgb(118,196,166)'
}
},
{
name: '品类2',
type: 'line',
data: [220, 182, 191, 234, 290, 330, 310],
smooth: false,
lineStyle: {
color: 'rgba(215, 170, 34, 1)'
},
name: '利润预测',
type: 'bar',
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
],
itemStyle: {
color: {
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#B5D3FE' // 0%处的颜色为红色
}, {
offset: 1,
color: '#7EA7FC' // 100%处的颜色为蓝
}]
}
}
},
{
name: '品类3',
name: '利润目标完成率',
type: 'line',
data: [150, 232, 201, 154, 190, 330, 410],
yAxisIndex: 1,
smooth: false,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
lineStyle: {
color: 'rgba(121, 139, 219, 1)'
},
},
color: '#55C5A2'
}
}
],
// yAxis: {
// type: 'value',
// splitLine: {
// show: false//不显示网格线
// },
// splitArea: {
// show: false//不显示网格区域
// },
// axisLine: {
// lineStyle: {
// color: 'rgb(255, 255, 255)'
// },
// }
// },
// series: [
// {
// name: '利润',
// type: 'bar',
// data: [
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
// ]
// },
// {
// name: '利润预测',
// type: 'bar',
// data: [
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
// ]
// },
// {
// name: '利润目标完成率',
// type: 'line',
// yAxisIndex: 1,
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
// }
]
// ]
},
}
},

216
src/views/bigScreen/drivingCabin/right2.vue
View File

@ -1,10 +1,10 @@
<template>
<div>
<container2 title="经营总体走势">
<container3 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%;" ref="chart"></div>
</container2>
</container3>
</div>
</template>
@ -13,7 +13,7 @@
import scalseBox from '../components/scaleBox.vue'
import bigScreenHead from "../components/bigScreenHead/index.vue";
import rocketTit from "../components/rocketTit/index.vue";
import container2 from "../components/container2/index.vue";
import container3 from "./components/container3/index.vue";
import echarts from 'echarts'
@ -26,117 +26,185 @@ export default {
scalseBox,
bigScreenHead,
rocketTit,
container2,
container3,
},
data () {
return {
dateRange: [],
chart: null,
option: {
backgroundColor: '',
tooltip: {
trigger: 'axis'
},
legend: {
right: '10',
data: ['XX零件收入占比', 'XY零件收入占比'],
data: ['利润', '利润预测', '利润目标完成率'],
textStyle: {
color: '#fff'
},
},
grid: {
left: '3%',
right: '8%',
right: '6%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10'],
splitLine: {
show: false//不显示网格线
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
xAxis: [
{
type: 'category',
data: [
'2021-01',
'2021-02',
'2021-03',
'2021-04',
'2021-05',
'2021-06',
'2021-07',
'2021-08',
'2021-09',
'2021-10',
'2021-11',
'2021-12',
],
axisPointer: {
type: 'shadow'
},
},
axisLabel: {
interval: 0,
rotate: 320
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
},
}
}
},
yAxis: {
type: 'value',
splitLine: {
show: false//不显示网格线
},
splitArea: {
show: false//不显示网格区域
},
axisLabel: {
formatter: "{value}%"
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
],
yAxis: [
{
type: 'value',
name: '万元',
min: 0,
max: 250,
interval: 50,
axisLabel: {
formatter: '{value}'
},
splitLine: {
show: false//不显示网格线
},
splitArea: {
show: false//不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
},
}
},
min: 0,
max: 100
{
type: 'value',
min: 0,
max: 25,
interval: 5,
axisLabel: {
formatter: '{value} %'
},
splitLine: {
show: false//不显示网格线
},
splitArea: {
show: false//不显示网格区域
},
axisLine: {
lineStyle: {
color: 'rgb(255, 255, 255)'
},
}
}
],
grid: {
containLabel: true,
width: "99%",
left: 0,
top: 50,
bottom: 50,
},
dataZoom: {},
series: [
{
name: 'XX零件收入占比',
type: 'line',
data: [55, 30, 45, 35, 55, 60, 60],
smooth: false,
name: '利润',
type: 'bar',
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
],
lineStyle: {
color: 'rgba(78, 187, 147, 1)'
},
areaStyle: {//区域填充渐变颜色
color: 'rgb(118,196,166)'
}
},
{
name: '利润预测',
type: 'bar',
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
],
itemStyle: {
color: {
type: 'linear',
type: 'linear', // 线性渐变
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(78, 187, 147, 0.5)' // 0% 处的颜色
offset: 0,
color: '#B5D3FE' // 0%处的颜色为红色
}, {
offset: .75, color: 'rgba(78, 187, 147, 0)' // 100% 处的颜色
}],
global: false // 缺省为 false
offset: 1,
color: '#7EA7FC' // 100%处的颜色为蓝
}]
}
}
},
{
name: 'XY零件收入占比',
name: '利润目标完成率',
type: 'line',
data: [45, 70, 50, 65, 45, 35, 40],
yAxisIndex: 1,
smooth: false,
data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
lineStyle: {
color: 'rgba(16,148,249, 1)'
},
areaStyle: {//区域填充渐变颜色
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'rgba(16,148,249, 0.5)' // 0% 处的颜色
}, {
offset: .75, color: 'rgba(16,148,249, 0)' // 100% 处的颜色
}],
global: false // 缺省为 false
}
color: '#F6D97E'
}
},
}
],
// yAxis: {
// type: 'value',
// splitLine: {
// show: false//不显示网格线
// },
// splitArea: {
// show: false//不显示网格区域
// },
// axisLine: {
// lineStyle: {
// color: 'rgb(255, 255, 255)'
// },
// }
// },
// series: [
// {
// name: '利润',
// type: 'bar',
// data: [
// 2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
// ]
// },
// {
// name: '利润预测',
// type: 'bar',
// data: [
// 2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
// ]
// },
// {
// name: '利润目标完成率',
// type: 'line',
// yAxisIndex: 1,
// data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
// }
]
// ]
},
}
},