科研生产
This commit is contained in:
熊丽君
@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<div class="scientific">
|
||||
<div class="tab">
|
||||
<div @click="index = 0" :class="{active: index == 0}">作业动态</div>
|
||||
<div @click="index = 1" :class="{active: index == 1}">生产管理</div>
|
||||
<div @click="index = 2" :class="{active: index == 2}">项目管理</div>
|
||||
</div>
|
||||
<tab1 class="tabWrap" v-if="index == 0"></tab1>
|
||||
<tab2 class="tabWrap" v-if="index == 1"></tab2>
|
||||
<tab3 class="tabWrap" v-if="index == 2"></tab3>
|
||||
</div>
|
||||
<div class="scientific">
|
||||
<div class="tab">
|
||||
<div @click="index = 0" :class="{ active: index == 0 }">作业动态</div>
|
||||
<div @click="index = 1" :class="{ active: index == 1 }">生产管理</div>
|
||||
<div @click="index = 2" :class="{ active: index == 2 }">项目管理</div>
|
||||
</div>
|
||||
<tab1 class="tabWrap" v-if="index == 0"></tab1>
|
||||
<tab2 class="tabWrap" v-if="index == 1"></tab2>
|
||||
<tab3 class="tabWrap" v-if="index == 2"></tab3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -17,57 +17,55 @@ import tab2 from './tab2/index.vue'
|
||||
import tab3 from './tab3/index.vue'
|
||||
|
||||
export default {
|
||||
|
||||
|
||||
name: 'Scientific',
|
||||
components: {
|
||||
tab1,
|
||||
tab2,
|
||||
tab3,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
}
|
||||
}
|
||||
name: 'Scientific',
|
||||
components: {
|
||||
tab1,
|
||||
tab2,
|
||||
tab3,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tab {
|
||||
position: absolute;
|
||||
top: 107px;
|
||||
left: 51px;
|
||||
width: 360px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
div {
|
||||
flex: 1;
|
||||
width: 120px;
|
||||
box-sizing: border-box;
|
||||
height: 36px;
|
||||
box-shadow: inset 0px 0px 6px 2px #91D5FE;
|
||||
border: 1px solid #91D5FE;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #91D5FE;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
position: absolute;
|
||||
top: 107px;
|
||||
left: 51px;
|
||||
width: 360px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
div {
|
||||
flex: 1;
|
||||
width: 120px;
|
||||
box-sizing: border-box;
|
||||
height: 36px;
|
||||
box-shadow: inset 0px 0px 6px 2px #91d5fe;
|
||||
border: 1px solid #91d5fe;
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Regular, PingFang SC;
|
||||
font-weight: 400;
|
||||
color: #91d5fe;
|
||||
text-align: center;
|
||||
line-height: 36px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
div.active {
|
||||
font-weight: 600;
|
||||
color: #0D1049;
|
||||
background: #91D5FE;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
div.active {
|
||||
font-weight: 600;
|
||||
color: #0d1049;
|
||||
background: #91d5fe;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
.tabWrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
BIN
src/views/bigScreen/scientific/tab2/1.png
Normal file
BIN
src/views/bigScreen/scientific/tab2/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
src/views/bigScreen/scientific/tab2/2.png
Normal file
BIN
src/views/bigScreen/scientific/tab2/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
src/views/bigScreen/scientific/tab2/3.png
Normal file
BIN
src/views/bigScreen/scientific/tab2/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
138
src/views/bigScreen/scientific/tab2/center1.vue
Normal file
138
src/views/bigScreen/scientific/tab2/center1.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<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>
|
||||
</container1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container1 from './components/container1/index.vue'
|
||||
|
||||
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,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left3-content {
|
||||
padding: 0 10px 0 20px;
|
||||
|
||||
font-size: 14px;
|
||||
}
|
||||
.warp {
|
||||
height: 168px;
|
||||
width: 100%;
|
||||
margin: 10px auto 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 {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.state {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 18px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #a9b8c5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.success::before {
|
||||
background: #6fd1b4;
|
||||
}
|
||||
|
||||
&.fault::before {
|
||||
background: #f64f58;
|
||||
}
|
||||
&.progress::before {
|
||||
background: #fa8c16;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
138
src/views/bigScreen/scientific/tab2/center2.vue
Normal file
138
src/views/bigScreen/scientific/tab2/center2.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<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>
|
||||
</container1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container1 from './components/container1/index.vue'
|
||||
|
||||
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,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left3-content {
|
||||
padding: 0 10px 0 20px;
|
||||
|
||||
font-size: 14px;
|
||||
}
|
||||
.warp {
|
||||
height: 168px;
|
||||
width: 100%;
|
||||
margin: 10px auto 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 {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.state {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 18px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #a9b8c5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.success::before {
|
||||
background: #6fd1b4;
|
||||
}
|
||||
|
||||
&.fault::before {
|
||||
background: #f64f58;
|
||||
}
|
||||
&.progress::before {
|
||||
background: #fa8c16;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,89 +1,117 @@
|
||||
<template>
|
||||
<div class="tab2">
|
||||
<div class="left1">
|
||||
<left1></left1>
|
||||
</div>
|
||||
<div class="left2">
|
||||
<left2></left2>
|
||||
</div>
|
||||
<div class="left3">
|
||||
<left3></left3>
|
||||
</div>
|
||||
<div class="center3">
|
||||
<center3></center3>
|
||||
</div>
|
||||
<div class="right2">
|
||||
<right2></right2>
|
||||
</div>
|
||||
<div class="right3">
|
||||
<right3></right3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab2">
|
||||
<div class="left1">
|
||||
<left1></left1>
|
||||
</div>
|
||||
<div class="left2">
|
||||
<left2></left2>
|
||||
</div>
|
||||
<div class="left3">
|
||||
<left3></left3>
|
||||
</div>
|
||||
<div class="center1">
|
||||
<center1></center1>
|
||||
</div>
|
||||
<div class="center2">
|
||||
<center2></center2>
|
||||
</div>
|
||||
<div class="center3">
|
||||
<center3></center3>
|
||||
</div>
|
||||
<div class="right1">
|
||||
<right1></right1>
|
||||
</div>
|
||||
<div class="right2">
|
||||
<right2></right2>
|
||||
</div>
|
||||
<div class="right3">
|
||||
<right3></right3>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import left1 from './left1.vue'
|
||||
import left2 from './left2.vue'
|
||||
import left3 from './left3.vue'
|
||||
import center1 from './center1.vue'
|
||||
import center2 from './center2.vue'
|
||||
import center3 from './center3.vue'
|
||||
import right1 from './right1.vue'
|
||||
import right2 from './right2.vue'
|
||||
import right3 from './right3.vue'
|
||||
export default {
|
||||
name: 'tab2',
|
||||
components: {
|
||||
left1,
|
||||
left2,
|
||||
left3,
|
||||
center3,
|
||||
right2,
|
||||
right3,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
name: 'tab2',
|
||||
components: {
|
||||
left1,
|
||||
left2,
|
||||
left3,
|
||||
center1,
|
||||
center2,
|
||||
center3,
|
||||
right1,
|
||||
right2,
|
||||
right3,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.left1 {
|
||||
position: absolute;
|
||||
top: 142px;
|
||||
left: 24px;
|
||||
position: absolute;
|
||||
top: 142px;
|
||||
left: 24px;
|
||||
}
|
||||
.left2 {
|
||||
position: absolute;
|
||||
top: 456px;
|
||||
left: 24px;
|
||||
position: absolute;
|
||||
top: 456px;
|
||||
left: 24px;
|
||||
}
|
||||
.left3 {
|
||||
position: absolute;
|
||||
top: 770px;
|
||||
left: 24px;
|
||||
position: absolute;
|
||||
top: 770px;
|
||||
left: 24px;
|
||||
}
|
||||
.center1 {
|
||||
position: absolute;
|
||||
top: 142px;
|
||||
left: 653px;
|
||||
}
|
||||
.center2 {
|
||||
position: absolute;
|
||||
top: 456px;
|
||||
left: 653px;
|
||||
}
|
||||
.center3 {
|
||||
position: absolute;
|
||||
top: 770px;
|
||||
left: 653px;
|
||||
position: absolute;
|
||||
top: 770px;
|
||||
left: 653px;
|
||||
}
|
||||
.right1 {
|
||||
position: absolute;
|
||||
top: 142px;
|
||||
left: 1282px;
|
||||
}
|
||||
.right2 {
|
||||
position: absolute;
|
||||
top: 456px;
|
||||
left: 1282px;
|
||||
position: absolute;
|
||||
top: 456px;
|
||||
left: 1282px;
|
||||
}
|
||||
.right3 {
|
||||
position: absolute;
|
||||
top: 770px;
|
||||
left: 1282px;
|
||||
position: absolute;
|
||||
top: 770px;
|
||||
left: 1282px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
138
src/views/bigScreen/scientific/tab2/right1.vue
Normal file
138
src/views/bigScreen/scientific/tab2/right1.vue
Normal file
@ -0,0 +1,138 @@
|
||||
<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>
|
||||
</container1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container1 from './components/container1/index.vue'
|
||||
|
||||
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,
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.left3-content {
|
||||
padding: 0 10px 0 20px;
|
||||
|
||||
font-size: 14px;
|
||||
}
|
||||
.warp {
|
||||
height: 168px;
|
||||
width: 100%;
|
||||
margin: 10px auto 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 {
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
display: block;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: linear-gradient(270deg, rgba(30, 43, 99, 0) 0%, #1e2b63 100%);
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.state {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 18px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: #a9b8c5;
|
||||
border-radius: 50%;
|
||||
}
|
||||
&.success::before {
|
||||
background: #6fd1b4;
|
||||
}
|
||||
|
||||
&.fault::before {
|
||||
background: #f64f58;
|
||||
}
|
||||
&.progress::before {
|
||||
background: #fa8c16;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/bigScreen/scientific/tab3/components/container1/bg.png
Normal file
BIN
src/views/bigScreen/scientific/tab3/components/container1/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="container1">
|
||||
<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: 'container1',
|
||||
components: {
|
||||
rocketTit,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container1 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 458px;
|
||||
height: 456px;
|
||||
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;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.snap {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 25px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/bigScreen/scientific/tab3/components/container2/bg.png
Normal file
BIN
src/views/bigScreen/scientific/tab3/components/container2/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<div class="container2">
|
||||
<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: 'container2',
|
||||
components: {
|
||||
rocketTit,
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 930px;
|
||||
height: 456px;
|
||||
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;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
.snap {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 25px;
|
||||
font-weight: 300;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/bigScreen/scientific/tab3/img/1.png
Normal file
BIN
src/views/bigScreen/scientific/tab3/img/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
BIN
src/views/bigScreen/scientific/tab3/img/2.png
Normal file
BIN
src/views/bigScreen/scientific/tab3/img/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
src/views/bigScreen/scientific/tab3/img/left1/1.png
Normal file
BIN
src/views/bigScreen/scientific/tab3/img/left1/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
@ -1,29 +1,37 @@
|
||||
<template>
|
||||
<div class="tab3">
|
||||
tab3
|
||||
</div>
|
||||
<div class="tab1">
|
||||
<div class="left1">
|
||||
<left1></left1>
|
||||
</div>
|
||||
<div class="left2">
|
||||
<left2></left2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import left1 from './left1.vue'
|
||||
import left2 from './left2.vue'
|
||||
export default {
|
||||
name: 'tab3',
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
name: 'tab3',
|
||||
components: {
|
||||
left1,
|
||||
left2,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.left1 {
|
||||
position: absolute;
|
||||
top: 142px;
|
||||
left: 24px;
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
.left2 {
|
||||
position: absolute;
|
||||
top: 613px;
|
||||
width: 100%;
|
||||
left: 24px;
|
||||
width: calc(100% - 24px);
|
||||
}
|
||||
</style>
|
||||
|
||||
279
src/views/bigScreen/scientific/tab3/left1.vue
Normal file
279
src/views/bigScreen/scientific/tab3/left1.vue
Normal file
@ -0,0 +1,279 @@
|
||||
<template>
|
||||
<div style="width: 100%; display: flex">
|
||||
<container1 style="margin-right: 14px" title="型号信息">
|
||||
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['年度任务', '两总']"></bigScreenTabs>
|
||||
<div class="trends">
|
||||
<!-- <el-progress :percentage="70" :color="customColor"></el-progress> -->
|
||||
<img src="./img/1.png" alt="" />
|
||||
</div>
|
||||
</container1>
|
||||
<container1 style="margin-right: 14px" title="生产计划">
|
||||
<div class="trends">
|
||||
<div style="height: 100%; width: 100%" ref="chart2"></div>
|
||||
</div>
|
||||
</container1>
|
||||
<container1 style="margin-right: 14px" title="型号生产统计">
|
||||
<bigScreenTabs slot="datePicker" v-model="index2" :titleArr="['排行', '明细']"></bigScreenTabs>
|
||||
<div class="trends">
|
||||
<div style="width: 100%; height: 100%" ref="chart3"></div>
|
||||
</div>
|
||||
</container1>
|
||||
<container1 style="margin-right: 14px" title="单台产品信息">
|
||||
<div class="trends" style="text-align: center">
|
||||
<img src="./img/left1/1.png" alt="" />
|
||||
</div>
|
||||
</container1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import container1 from './components/container1/index.vue'
|
||||
import progressBar from '@/views/bigScreen/components/progress/index.vue'
|
||||
import bigScreenTabs from '../../components/bigScreenTabs/index.vue'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import colorList from '@/utils/colorPalette'
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
export default {
|
||||
components: {
|
||||
container1, //#endregion,
|
||||
progressBar,
|
||||
bigScreenTabs,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
index2: 0,
|
||||
chart: null,
|
||||
chart2: null,
|
||||
chart3: null,
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
customColor: colorList,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
// this.initChart()
|
||||
this.initChart2()
|
||||
this.initChart3()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
initChart2() {
|
||||
this.chart2 = echarts.init(this.$refs.chart2)
|
||||
this.setOptions2()
|
||||
},
|
||||
setOptions2() {
|
||||
this.chart2.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
// data: [],
|
||||
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: ['型号一', '型号二', '型号三', '型号四', '型号五', '型号六', '型号七'],
|
||||
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',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '绝热',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#FF9F43',
|
||||
},
|
||||
barWidth: 30,
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: '交付',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#F7DC87',
|
||||
},
|
||||
barWidth: 30,
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
{
|
||||
name: '装药',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#7EA7FC',
|
||||
},
|
||||
barWidth: 30,
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
{
|
||||
name: '总装',
|
||||
type: 'bar',
|
||||
stack: 'Ad',
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#8BE2CC',
|
||||
},
|
||||
barWidth: 30,
|
||||
data: [150, 232, 201, 154, 190, 330, 410],
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
initChart3() {
|
||||
this.chart3 = echarts.init(this.$refs.chart3)
|
||||
this.setOptions3()
|
||||
},
|
||||
setOptions3() {
|
||||
this.chart3.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
boundaryGap: [0, 0.01],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: ['型号一', '型号二', '型号三'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
color: colorList,
|
||||
series: [
|
||||
{
|
||||
name: '绝热数',
|
||||
type: 'bar',
|
||||
data: [630230, 630230, 630230],
|
||||
},
|
||||
{
|
||||
name: '装药数',
|
||||
type: 'bar',
|
||||
data: [530230, 530230, 530230],
|
||||
},
|
||||
{
|
||||
name: '交付数(地试数)',
|
||||
type: 'bar',
|
||||
data: [430230, 430230, 430230],
|
||||
},
|
||||
{
|
||||
name: '总装数',
|
||||
type: 'bar',
|
||||
data: [330230, 330230, 330230],
|
||||
},
|
||||
{
|
||||
name: '评审数',
|
||||
type: 'bar',
|
||||
data: [300230, 300230, 300230],
|
||||
},
|
||||
{
|
||||
name: '结算数',
|
||||
type: 'bar',
|
||||
data: [230230, 230230, 230230],
|
||||
},
|
||||
{
|
||||
name: '生产数',
|
||||
type: 'bar',
|
||||
data: [200230, 200230, 200230],
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.trends {
|
||||
height: 100%;
|
||||
padding: 0 25px;
|
||||
}
|
||||
</style>
|
||||
384
src/views/bigScreen/scientific/tab3/left2.vue
Normal file
384
src/views/bigScreen/scientific/tab3/left2.vue
Normal file
@ -0,0 +1,384 @@
|
||||
<template>
|
||||
<div style="display: flex">
|
||||
<container2 title="型号原材料及配套件">
|
||||
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['原材料', '配套件']"></bigScreenTabs>
|
||||
<div style="display: flex; height: 100%">
|
||||
<div style="height: 100%; width: 40%; text-align: center" ref="chart">
|
||||
<img style="margin-top: 12%" src="./img/2.png" alt="" />
|
||||
</div>
|
||||
<div style="height: 100%; width: 60%; padding-right: 15px">
|
||||
<div style="margin-bottom: 1px">
|
||||
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||
<el-col style="text-align: center" :span="5">名称</el-col>
|
||||
<el-col style="text-align: center" :span="5">库位编号</el-col>
|
||||
<el-col style="text-align: center" :span="7">库位类型</el-col>
|
||||
<el-col style="text-align: center" :span="7">当前状态</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<vue-seamless-scroll
|
||||
:data="scrollList"
|
||||
class="warp-scroll"
|
||||
:class-option="{
|
||||
singleHeight: 43,
|
||||
}"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="(item, index) in scrollList" :key="index">
|
||||
<el-row>
|
||||
<el-col style="text-align: center" :span="5">{{ '库房' + index }}</el-col>
|
||||
<el-col style="text-align: center" :span="5">{{ 934 - index }}</el-col>
|
||||
<el-col style="text-align: center" :span="7">加宽</el-col>
|
||||
<el-col style="text-align: center" :span="7">
|
||||
<section class="box">
|
||||
<span v-if="index == 6" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
||||
<span v-else style="font-size: 25px; margin-right: 3px">·</span>
|
||||
<span v-if="index == 6">使用中</span>
|
||||
<span v-else>未启用</span>
|
||||
</section>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</div>
|
||||
</container2>
|
||||
<container1 style="margin-left: 14px" title="型号工位">
|
||||
<bigScreenTabs slot="datePicker" v-model="index2" :titleArr="['工位', '明细']"></bigScreenTabs>
|
||||
<div class="trends">
|
||||
<div style="height: 100%; width: 100%" ref="chart2"></div>
|
||||
</div>
|
||||
</container1>
|
||||
<container1 style="margin-left: 14px" title="库房信息">
|
||||
<div class="trends">
|
||||
<div style="margin-bottom: 1px">
|
||||
<el-row style="height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||
<el-col style="text-align: center" :span="5">名称</el-col>
|
||||
<el-col style="text-align: center" :span="5">库位编号</el-col>
|
||||
<el-col style="text-align: center" :span="7">库位类型</el-col>
|
||||
<el-col style="text-align: center" :span="7">当前状态</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<vue-seamless-scroll
|
||||
:data="scrollList"
|
||||
class="warp-scroll"
|
||||
:class-option="{
|
||||
singleHeight: 43,
|
||||
}"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="(item, index) in scrollList" :key="index">
|
||||
<el-row>
|
||||
<el-col style="text-align: center" :span="5">{{ '库房' + index }}</el-col>
|
||||
<el-col style="text-align: center" :span="5">{{ 934 - index }}</el-col>
|
||||
<el-col style="text-align: center" :span="7">加宽</el-col>
|
||||
<el-col style="text-align: center" :span="7">
|
||||
<section class="box">
|
||||
<span v-if="index == 6" style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
||||
<span v-else style="font-size: 25px; margin-right: 3px">·</span>
|
||||
<span v-if="index == 6">使用中</span>
|
||||
<span v-else>未启用</span>
|
||||
</section>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</div>
|
||||
</container1>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import container1 from './components/container1/index.vue'
|
||||
import container2 from './components/container2/index.vue'
|
||||
import bigScreenTabs from '../../components/bigScreenTabs/index.vue'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import echarts from 'echarts'
|
||||
export default {
|
||||
components: {
|
||||
container1,
|
||||
container2, //#endregion,
|
||||
bigScreenTabs,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
index2: 0,
|
||||
chart: null,
|
||||
scrollList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
// this.initChart()
|
||||
this.initChart2()
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
const gaugeData = [
|
||||
{
|
||||
value: 20,
|
||||
name: 'Perfect',
|
||||
title: {
|
||||
offsetCenter: ['0%', '-30%'],
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: ['0%', '-20%'],
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 40,
|
||||
name: 'Good',
|
||||
title: {
|
||||
offsetCenter: ['0%', '0%'],
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: ['0%', '10%'],
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 60,
|
||||
name: 'Commonly',
|
||||
title: {
|
||||
offsetCenter: ['0%', '30%'],
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: ['0%', '40%'],
|
||||
},
|
||||
},
|
||||
]
|
||||
this.chart.setOption({
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
startAngle: 90,
|
||||
endAngle: -270,
|
||||
pointer: {
|
||||
show: false,
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
overlap: false,
|
||||
roundCap: true,
|
||||
clip: false,
|
||||
itemStyle: {
|
||||
borderWidth: 1,
|
||||
borderColor: '#464646',
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 40,
|
||||
},
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
distance: 0,
|
||||
length: 10,
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
distance: 50,
|
||||
},
|
||||
data: gaugeData,
|
||||
title: {
|
||||
fontSize: 14,
|
||||
},
|
||||
detail: {
|
||||
width: 50,
|
||||
height: 14,
|
||||
fontSize: 14,
|
||||
color: 'auto',
|
||||
borderColor: 'auto',
|
||||
borderRadius: 20,
|
||||
borderWidth: 1,
|
||||
formatter: '{value}%',
|
||||
},
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
initChart2() {
|
||||
this.chart2 = echarts.init(this.$refs.chart2)
|
||||
this.setOptions2()
|
||||
},
|
||||
setOptions2() {
|
||||
this.chart2.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
position: 'inner',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '详情',
|
||||
type: 'pie',
|
||||
center: ['45%', '50%'],
|
||||
radius: ['60%', '80%'],
|
||||
avoidLabelOverlap: false,
|
||||
hoverAnimation: false, // hover 效果
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 4, name: '降温数' },
|
||||
{ value: 4, name: '空闲数' },
|
||||
{ value: 4, name: '升温工位数' },
|
||||
{ value: 4, name: '保温数' },
|
||||
{ value: 4, name: '保温数' },
|
||||
{ value: 4, name: '升温工位数' },
|
||||
{ value: 4, name: '空闲数' },
|
||||
{ value: 4, name: '降温数' },
|
||||
],
|
||||
itemStyle: {
|
||||
// opacity: 0.7,
|
||||
// color: '#55C5A2',
|
||||
// borderWidth: 3,
|
||||
// borderColor: '#fff',
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}',
|
||||
position: 'inner',
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
// itemStyle: {
|
||||
// emphasis: {
|
||||
// shadowBlur: 1,
|
||||
// shadowOffsetX: 0,
|
||||
// shadowColor: '#fff',
|
||||
// },
|
||||
// normal: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// formatter: '{b}',
|
||||
// position: 'inner',
|
||||
// },
|
||||
// labelLine: {
|
||||
// show: true,
|
||||
// },
|
||||
// },
|
||||
// },
|
||||
// color: colorList,
|
||||
color: ['#5B8FF9', '#5B8FF9', '#5AD8A6', '#5AD8A6'],
|
||||
// color: ['#5B8FF9', '#5B8FF9', '#5B8FF9', '#5B8FF9', '#5AD8A6', '#5AD8A6', '#5AD8A6', '#5AD8A6'],
|
||||
},
|
||||
{
|
||||
name: '详情',
|
||||
type: 'pie',
|
||||
radius: ['35%', '55%'],
|
||||
center: ['45%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
hoverAnimation: false, // hover 效果
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 5, name: '硫化' },
|
||||
{ value: 5, name: '固化' },
|
||||
],
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 1,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: '#fff',
|
||||
},
|
||||
normal: {
|
||||
label: {
|
||||
show: true,
|
||||
formatter: '{b}',
|
||||
position: 'inner',
|
||||
},
|
||||
labelLine: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
// color: colorList,
|
||||
color: ['#5B8FF9', '#5AD8A6'],
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.trends {
|
||||
height: 100%;
|
||||
padding: 0 25px;
|
||||
}
|
||||
.warp-scroll {
|
||||
height: 336px;
|
||||
width: 100%;
|
||||
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: 42px;
|
||||
line-height: 42px;
|
||||
background: rgba(42, 67, 125, 0.25);
|
||||
// box-shadow: 0px 1px 0px 0px rgba(139, 177, 237, 0.5);
|
||||
margin-bottom: 1px;
|
||||
img {
|
||||
vertical-align: sub;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user