安全管理提交
This commit is contained in:
熊丽君
@ -1,74 +1,107 @@
|
||||
|
||||
|
||||
<template>
|
||||
<div class="bigScreenHead">
|
||||
<div class="tit">驾驶舱总览</div>
|
||||
<el-row style="width: 100%;">
|
||||
<el-col :span="8">
|
||||
<el-row style="padding: 0px 20px">
|
||||
<el-col :span="8">
|
||||
<bigScreenBtn title="驾驶舱总览" routerUrl="/bigScreen/drivingCabin"></bigScreenBtn>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<bigScreenBtn title="科研生产" routerUrl="/bigScreen/scientific"></bigScreenBtn>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<bigScreenBtn title="经营管理" routerUrl="/bigScreen/management"></bigScreenBtn>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="8" style="min-height: 1px">
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-row style="padding: 0px 0 0 60px">
|
||||
<el-col :span="8">
|
||||
<bigScreenBtn title="质量管理" routerUrl="/bigScreen/qualityManage"></bigScreenBtn>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<bigScreenBtn title="安全管理" routerUrl="/bigScreen/securityManage"></bigScreenBtn>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<bigScreenBtn title="信息化管理" routerUrl="/bigScreen/information"></bigScreenBtn>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
<div class="bigScreenHead">
|
||||
<div class="tit">{{ title }}</div>
|
||||
<el-row style="width: 100%">
|
||||
<el-col :span="8">
|
||||
<el-row style="padding: 0px 20px">
|
||||
<el-col :span="8" @click.native="setTitle('驾驶舱总览')">
|
||||
<bigScreenBtn title="驾驶舱总览" routerUrl="/bigScreen/drivingCabin"></bigScreenBtn>
|
||||
</el-col>
|
||||
<el-col :span="8" @click.native="setTitle('科研生产')">
|
||||
<bigScreenBtn title="科研生产" routerUrl="/bigScreen/scientific"></bigScreenBtn>
|
||||
</el-col>
|
||||
<el-col :span="8" @click.native="setTitle('经营管理')">
|
||||
<bigScreenBtn title="经营管理" routerUrl="/bigScreen/management"></bigScreenBtn>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="8" style="min-height: 1px"> </el-col>
|
||||
<el-col :span="8">
|
||||
<el-row style="padding: 0px 0 0 60px">
|
||||
<el-col :span="8" @click.native="setTitle('质量管理')">
|
||||
<bigScreenBtn title="质量管理" routerUrl="/bigScreen/qualityManage"></bigScreenBtn>
|
||||
</el-col>
|
||||
<el-col :span="8" @click.native="setTitle('安全管理')">
|
||||
<bigScreenBtn title="安全管理" routerUrl="/bigScreen/securityManage"></bigScreenBtn>
|
||||
</el-col>
|
||||
<el-col :span="8" @click.native="setTitle('信息化管理')">
|
||||
<bigScreenBtn title="信息化管理" routerUrl="/bigScreen/information"></bigScreenBtn>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import bigScreenBtn from "../bigScreenBtn/index.vue";
|
||||
import bigScreenBtn from '../bigScreenBtn/index.vue'
|
||||
export default {
|
||||
name: 'BigScreenHead',
|
||||
props: {},
|
||||
components: {
|
||||
bigScreenBtn
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
name: 'BigScreenHead',
|
||||
props: {},
|
||||
components: {
|
||||
bigScreenBtn,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '驾驶舱总览',
|
||||
pathList: [
|
||||
{
|
||||
url: '/bigScreen/drivingCabin',
|
||||
title: '驾驶舱总览',
|
||||
},
|
||||
{
|
||||
url: '/bigScreen/scientific',
|
||||
title: '科研生产',
|
||||
},
|
||||
{
|
||||
url: '/bigScreen/management',
|
||||
title: '经营管理',
|
||||
},
|
||||
{
|
||||
url: '/bigScreen/qualityManage',
|
||||
title: '质量管理',
|
||||
},
|
||||
{
|
||||
url: '/bigScreen/securityManage',
|
||||
title: '安全管理',
|
||||
},
|
||||
{
|
||||
url: '/bigScreen/information',
|
||||
title: '信息化管理',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setTitle(val) {
|
||||
this.title = val
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.pathList.forEach(item => {
|
||||
if (this.$route.path == item.url) {
|
||||
return (this.title = item.title)
|
||||
}
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bigScreenHead {
|
||||
width: 1920px;
|
||||
height: 100px;
|
||||
background-image: url(./bg.png);
|
||||
background-size: 100% 80px;
|
||||
background-repeat: no-repeat;
|
||||
.tit {
|
||||
font-size: 36px;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
color: #91d5fe;
|
||||
line-height: 47px;
|
||||
letter-spacing: 6px;
|
||||
text-align: center;
|
||||
padding-top: 13px;
|
||||
}
|
||||
width: 1920px;
|
||||
height: 100px;
|
||||
background-image: url(./bg.png);
|
||||
background-size: 100% 80px;
|
||||
background-repeat: no-repeat;
|
||||
.tit {
|
||||
font-size: 36px;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
color: #91d5fe;
|
||||
line-height: 47px;
|
||||
letter-spacing: 6px;
|
||||
text-align: center;
|
||||
padding-top: 13px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,72 +1,35 @@
|
||||
<template>
|
||||
<div>
|
||||
<container4 title="今日动态">
|
||||
<vue-seamless-scroll
|
||||
:data="listData"
|
||||
class="warp"
|
||||
:class-option="{
|
||||
singleHeight: 42,
|
||||
}"
|
||||
>
|
||||
<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 title="危险作业预报/月度重点安全工作提示">
|
||||
<el-row style="padding: 0 30px">
|
||||
<el-col style="text-align: right; margin-bottom: 5px">
|
||||
<bigScreenTabs v-model="index" :titleArr="['周危险', '月重点']"></bigScreenTabs>
|
||||
</el-col>
|
||||
<el-col :span="24" style="margin-bottom: 1px">
|
||||
<el-row style="font-size: 14px; height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||
<el-col style="text-align: center" :span="4">序号</el-col>
|
||||
<el-col style="text-align: center" :span="8">部门</el-col>
|
||||
<el-col style="text-align: center" :span="12">作业内容</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<vue-seamless-scroll
|
||||
:data="listData"
|
||||
class="warp-scroll"
|
||||
:class-option="{
|
||||
singleHeight: 43,
|
||||
}"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="item in scrollList" :key="item.id">
|
||||
<el-row style="font-size: 14px">
|
||||
<el-col style="text-align: center" :span="4">{{ item.id }}</el-col>
|
||||
<el-col style="text-align: center" :span="8">{{ item.name }}</el-col>
|
||||
<el-col style="text-align: center" :span="12">{{ item.txt }}</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</el-row>
|
||||
</container4>
|
||||
</div>
|
||||
</template>
|
||||
@ -75,6 +38,7 @@
|
||||
import container4 from './components/container4/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
@ -85,10 +49,40 @@ export default {
|
||||
container4,
|
||||
rocketTit,
|
||||
vueSeamlessScroll,
|
||||
bigScreenTabs,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
scrollList: [
|
||||
{
|
||||
id: 1,
|
||||
name: '部门一',
|
||||
txt: '高压作业',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '部门二',
|
||||
txt: '易燃作业',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: '部门三',
|
||||
txt: '易燃作业',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '部门四',
|
||||
txt: '易燃作业',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '部门五',
|
||||
txt: '易燃作业',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {},
|
||||
@ -107,28 +101,42 @@ export default {
|
||||
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;
|
||||
.warp-scroll {
|
||||
height: 215px;
|
||||
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;
|
||||
}
|
||||
.num {
|
||||
font-size: 28px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: 600;
|
||||
color: #55c5a2;
|
||||
vertical-align: sub;
|
||||
padding-right: 3px;
|
||||
li {
|
||||
display: block;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
background: #2a437d;
|
||||
opacity: 0.6;
|
||||
// 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;
|
||||
}
|
||||
|
||||
.warp {
|
||||
height: 280px;
|
||||
|
||||
@ -1,8 +1,7 @@
|
||||
<template>
|
||||
<div class="container4">
|
||||
<div class="tit">
|
||||
<div>{{ title }}</div>
|
||||
<!-- <rocketTit>{{title}}</rocketTit> -->
|
||||
<rocketTit>{{ title }}</rocketTit>
|
||||
<!-- <div class="datePicker">
|
||||
<slot name="datePicker"></slot>
|
||||
</div> -->
|
||||
@ -57,37 +56,6 @@ export default {
|
||||
.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;
|
||||
|
||||
@ -2,13 +2,59 @@
|
||||
<div>
|
||||
<container3 title="安全隐患整改情况">
|
||||
<div class="wrap">
|
||||
<el-row class="content1" style="height: 100%">
|
||||
<el-col :span="18" style="height: 100%">
|
||||
<div style="text-align: right; margin-right: 30px; margin-bottom: 5px">
|
||||
<bigScreenTabs v-model="index" :titleArr="['总厂', '车间']"></bigScreenTabs>
|
||||
</div>
|
||||
<el-row class="content1" style="height: 100%" v-if="index == 0">
|
||||
<el-col :span="14" style="height: 100%">
|
||||
<div style="height: 100%; width: 100%" ref="chart"></div>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<!-- <div style="height: 100%; width: 100%" ref="chart"></div> -->
|
||||
12
|
||||
<el-col :span="10" style="height: 100%">
|
||||
<div style="height: 100%; width: 100%" ref="chart2"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row class="content1" style="height: 100%" v-if="index == 1">
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<div style="height: 100%; width: 100%" ref="chart3"></div>
|
||||
</el-col>
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<el-row style="padding: 0 10px">
|
||||
<el-col :span="24" style="margin-bottom: 1px">
|
||||
<el-row style="font-size: 14px; height: 42px; line-height: 42px; background: rgba(0, 255, 255, 0.3)">
|
||||
<el-col style="text-align: center" :span="3">序号</el-col>
|
||||
<el-col style="text-align: center" :span="12">安全隐患内容</el-col>
|
||||
<el-col style="text-align: center" :span="4">措施</el-col>
|
||||
<el-col style="text-align: center" :span="3">责任人</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<vue-seamless-scroll
|
||||
:data="listData"
|
||||
class="warp-scroll"
|
||||
:class-option="{
|
||||
singleHeight: 43,
|
||||
}"
|
||||
>
|
||||
<ul class="item">
|
||||
<li v-for="item in scrollList" :key="item.id">
|
||||
<el-row style="font-size: 14px">
|
||||
<el-col style="text-align: center" :span="3">{{ item.id }}</el-col>
|
||||
<el-col style="text-align: center" :span="12">{{ item.name }}</el-col>
|
||||
<el-col style="text-align: center" :span="4">
|
||||
<section class="box">
|
||||
<span v-if="item.status == 1" style="color: #f64f58; font-size: 25px; margin-right: 3px"
|
||||
>·</span
|
||||
>
|
||||
<span v-else style="color: #6fd1b4; font-size: 25px; margin-right: 3px">·</span>
|
||||
<span v-if="item.status == 1">已整改</span>
|
||||
<span v-else>未整改</span>
|
||||
</section>
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="3">{{ item.txt }}</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
@ -21,6 +67,9 @@ import scalseBox from '../components/scaleBox.vue'
|
||||
import bigScreenHead from '../components/bigScreenHead/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import container3 from './components/container3/index.vue'
|
||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||
import colorList from '@/utils/colorPalette'
|
||||
import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
@ -31,20 +80,61 @@ export default {
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
bigScreenTabs,
|
||||
rocketTit,
|
||||
container3,
|
||||
vueSeamlessScroll,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
colorList,
|
||||
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
scrollList: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'xx车间未开启安全闸门',
|
||||
txt: '能昌',
|
||||
status: 2,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'xx车间未开启安全闸门',
|
||||
txt: '葛岚福',
|
||||
status: 2,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'xx车间未开启安全闸门',
|
||||
txt: '酆芳琼',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'xx车间未开启安全闸门',
|
||||
txt: '酆芳琼',
|
||||
status: 1,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'xx车间未开启安全闸门',
|
||||
txt: '酆芳琼',
|
||||
status: 1,
|
||||
},
|
||||
],
|
||||
|
||||
dateRange: [],
|
||||
chart: null,
|
||||
chart2: null,
|
||||
chart3: null,
|
||||
option: {
|
||||
legend: {
|
||||
data: ['利润', '利润预测', '利润目标完成率'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
// legend: {
|
||||
// data: ['利润', '利润目标完成率'],
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// },
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
@ -81,7 +171,7 @@ export default {
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '万元',
|
||||
name: '个',
|
||||
min: 0,
|
||||
max: 250,
|
||||
interval: 50,
|
||||
@ -128,49 +218,29 @@ export default {
|
||||
top: 50,
|
||||
bottom: 50,
|
||||
},
|
||||
dataZoom: {},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '利润',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
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],
|
||||
data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
|
||||
itemStyle: {
|
||||
color: 'rgb(118,196,166)',
|
||||
},
|
||||
barGap: '0',
|
||||
},
|
||||
{
|
||||
name: '利润预测',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
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: '利润目标完成率',
|
||||
type: 'line',
|
||||
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],
|
||||
data: [10, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
||||
itemStyle: {
|
||||
color: '#55C5A2',
|
||||
},
|
||||
@ -217,9 +287,31 @@ export default {
|
||||
},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
index(newOld, oldVal) {
|
||||
if (newOld == 0) {
|
||||
this.chart3.dispose()
|
||||
this.chart3 = null
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initLine()
|
||||
})
|
||||
} else {
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
this.chart2.dispose()
|
||||
this.chart2 = null
|
||||
this.$nextTick(() => {
|
||||
this.initChart3()
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initLine()
|
||||
// this.initChart3()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
@ -234,11 +326,217 @@ export default {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.chart.setOption(this.option)
|
||||
},
|
||||
initLine() {
|
||||
this.chart2 = echarts.init(this.$refs.chart2)
|
||||
this.setOptions2()
|
||||
},
|
||||
initChart3() {
|
||||
this.chart3 = echarts.init(this.$refs.chart3)
|
||||
this.setOptions3()
|
||||
},
|
||||
setOptions2() {
|
||||
this.chart2.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
},
|
||||
color: this.colorList,
|
||||
legend: {
|
||||
// data: ['型号一', '型号二', '型号三', '型号四'],
|
||||
// orient: 'vertical',
|
||||
// left: '60%',
|
||||
// right: '2%',
|
||||
bottom: 30,
|
||||
// y: 'bottom',
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '概括',
|
||||
type: 'pie',
|
||||
radius: ['40%', '60%'],
|
||||
center: ['45%', '45%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
fontWeight: 'bold',
|
||||
formatter: ' {c}', // {b}:数据名； {c}：数据值； {d}：百分比，可以自定义显示内容
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 154, name: '型号一' },
|
||||
{ value: 775, name: '型号二' },
|
||||
{ value: 679, name: '型号三' },
|
||||
{ value: 679, name: '型号四' },
|
||||
],
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
setOptions3() {
|
||||
this.chart3.setOption({
|
||||
// legend: {
|
||||
// data: ['利润', '利润目标完成率'],
|
||||
// textStyle: {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// },
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间'],
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
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: {
|
||||
type: 'slider',
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '利润',
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
|
||||
itemStyle: {
|
||||
color: 'rgb(118,196,166)',
|
||||
},
|
||||
barGap: '0',
|
||||
},
|
||||
{
|
||||
name: '利润目标完成率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
smooth: false,
|
||||
data: [10, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
||||
itemStyle: {
|
||||
color: '#7EA7FC ',
|
||||
},
|
||||
symbol: 'none',
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.warp-scroll {
|
||||
height: 215px;
|
||||
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: #2a437d;
|
||||
opacity: 0.6;
|
||||
// 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;
|
||||
}
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user