经营框架
This commit is contained in:
熊丽君
@ -1,62 +1,57 @@
|
||||
|
||||
|
||||
<template>
|
||||
<div class="BigScreenTabs">
|
||||
<div v-for="(v,index) in titleArr" :key="index" class="button" :class="{active:value == index}">
|
||||
<div @click="updateVal(index)">{{v}}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="BigScreenTabs">
|
||||
<div v-for="(v, index) in titleArr" :key="index" class="button" :class="{ active: value == index }">
|
||||
<div @click="updateVal(index)">{{ v }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BigScreenTabs',
|
||||
props: {
|
||||
value: {
|
||||
type: Number
|
||||
},
|
||||
titleArr: {
|
||||
type: Array,
|
||||
default: ['部门', '类型'],
|
||||
},
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
updateVal: function (val) {
|
||||
// 2、手动触发父组件的input事件并将值传给父组件
|
||||
this.$emit('input', val);
|
||||
}
|
||||
|
||||
}
|
||||
name: 'BigScreenTabs',
|
||||
props: {
|
||||
value: {
|
||||
type: Number,
|
||||
},
|
||||
titleArr: {
|
||||
type: Array,
|
||||
default: ['部门', '类型'],
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
methods: {
|
||||
updateVal: function (val) {
|
||||
// 2、手动触发父组件的input事件并将值传给父组件
|
||||
this.$emit('input', val)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.button {
|
||||
display: inline-block;
|
||||
background: rgba(145, 213, 254, 0.2);
|
||||
width: 77px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
transform: skewX(-20deg);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
background: rgba(145, 213, 254, 0.2);
|
||||
min-width: 77px;
|
||||
padding: 0 15px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 0.65);
|
||||
transform: skewX(-20deg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.button.active {
|
||||
background: linear-gradient(270deg, #3661a8 0%, #8bb1ed 100%);
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
background: linear-gradient(270deg, #3661a8 0%, #8bb1ed 100%);
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
.button > div {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: skewX(20deg);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: skewX(20deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
BIN
src/views/bigScreen/management/center.png
Normal file
BIN
src/views/bigScreen/management/center.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
213
src/views/bigScreen/management/center.vue
Normal file
213
src/views/bigScreen/management/center.vue
Normal file
@ -0,0 +1,213 @@
|
||||
<template>
|
||||
<div>
|
||||
<center1>
|
||||
<div class="data">
|
||||
<div class="data-item">
|
||||
<div><img src="./icon1.png" alt="" /><span style="font-weight: bold">收入</span></div>
|
||||
<div class="box"><i>3380/</i><i class="num">12342</i><span class="num2">万</span></div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="70" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><img src="./icon2.png" alt="" /><span style="font-weight: bold">利润</span></div>
|
||||
<div class="box"><i>380/</i><i class="num">12342</i><span class="num2">万</span></div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="70" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><img src="./icon3.png" alt="" /><span style="font-weight: bold">装药量</span></div>
|
||||
<div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="70" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><img src="./icon4.png" alt="" /><span style="font-weight: bold">交付数量</span></div>
|
||||
<div class="box"><i>999/</i><i class="num">12342</i><span class="num2">万件</span></div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="70" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center_box"></div>
|
||||
<div class="center_box"></div>
|
||||
</center1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import center1 from './components/center1/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import progressBar from './../components/progress/index.vue'
|
||||
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
center1,
|
||||
rocketTit,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.center_box {
|
||||
margin-top: 20px;
|
||||
width: 100%;
|
||||
height: 225px;
|
||||
background-image: url(./center.png);
|
||||
}
|
||||
.tit {
|
||||
padding: 16px 24px;
|
||||
}
|
||||
.img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.data {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
margin: 0 30px;
|
||||
background: rgba(2, 18, 63, 0.33);
|
||||
color: #ffffff;
|
||||
font-size: 18px;
|
||||
.data-item {
|
||||
// flex: 1;
|
||||
width: 20%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
> div {
|
||||
margin: 5px 0;
|
||||
text-align: center;
|
||||
img {
|
||||
// width: 10px;
|
||||
// height: 10px;
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
font-size: 26px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: 600;
|
||||
color: #55c5a2;
|
||||
}
|
||||
.num {
|
||||
font-size: 14px;
|
||||
}
|
||||
.num2 {
|
||||
font-size: 16px;
|
||||
margin-left: 5px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container3 {
|
||||
position: relative;
|
||||
.con_right {
|
||||
width: 88px;
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
right: 20%;
|
||||
color: #00ffff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
.con_title {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img {
|
||||
width: 25%;
|
||||
}
|
||||
}
|
||||
.con_height {
|
||||
width: 2px;
|
||||
height: 20px;
|
||||
background-color: #00ffff;
|
||||
}
|
||||
}
|
||||
.con_two {
|
||||
top: 43%;
|
||||
right: 12%;
|
||||
}
|
||||
.con_left {
|
||||
width: 186px;
|
||||
position: absolute;
|
||||
top: 60%;
|
||||
left: 24%;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
img {
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.con_left_title {
|
||||
position: relative;
|
||||
.con_card {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
top: 22%;
|
||||
div {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
span:nth-child(1) {
|
||||
opacity: 0.9;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.con_h_two {
|
||||
position: relative;
|
||||
width: 50%;
|
||||
height: 47px;
|
||||
border: 1px solid #fa8c16;
|
||||
border-top-width: 0;
|
||||
border-right-width: 0;
|
||||
.con_bottom {
|
||||
height: 24px;
|
||||
line-height: 26px;
|
||||
position: absolute;
|
||||
right: -50%;
|
||||
bottom: -50%;
|
||||
text-align: right;
|
||||
transform: translate(-50%, -50%);
|
||||
img {
|
||||
width: 38%;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
166
src/views/bigScreen/management/center2.vue
Normal file
166
src/views/bigScreen/management/center2.vue
Normal 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>
|
||||
47
src/views/bigScreen/management/components/center1/index.vue
Normal file
47
src/views/bigScreen/management/components/center1/index.vue
Normal file
@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<div class="centen1">
|
||||
<slot />
|
||||
<div class="centen1bg"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Centen1',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
selected: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.centen1 {
|
||||
width: 768px;
|
||||
height: 586px;
|
||||
// background-image: url(./bg.png);
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
z-index: 10;
|
||||
.centen1bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// background-image: url(./bg.png);
|
||||
background-size: cover;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
BIN
src/views/bigScreen/management/components/container2/bg.png
Normal file
BIN
src/views/bigScreen/management/components/container2/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
100
src/views/bigScreen/management/components/container2/index.vue
Normal file
100
src/views/bigScreen/management/components/container2/index.vue
Normal file
@ -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: 538px;
|
||||
height: 288px;
|
||||
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/management/components/container3/bg.png
Normal file
BIN
src/views/bigScreen/management/components/container3/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
100
src/views/bigScreen/management/components/container3/index.vue
Normal file
100
src/views/bigScreen/management/components/container3/index.vue
Normal file
@ -0,0 +1,100 @@
|
||||
<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: 930px;
|
||||
height: 343px;
|
||||
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/management/components/container4/bg.png
Normal file
BIN
src/views/bigScreen/management/components/container4/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
145
src/views/bigScreen/management/components/container4/index.vue
Normal file
145
src/views/bigScreen/management/components/container4/index.vue
Normal 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/management/conter.png
Normal file
BIN
src/views/bigScreen/management/conter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 MiB |
BIN
src/views/bigScreen/management/icon1.png
Normal file
BIN
src/views/bigScreen/management/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 654 B |
BIN
src/views/bigScreen/management/icon2.png
Normal file
BIN
src/views/bigScreen/management/icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 635 B |
BIN
src/views/bigScreen/management/icon3.png
Normal file
BIN
src/views/bigScreen/management/icon3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 375 B |
BIN
src/views/bigScreen/management/icon4.png
Normal file
BIN
src/views/bigScreen/management/icon4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 413 B |
BIN
src/views/bigScreen/management/img/center2/1.png
Normal file
BIN
src/views/bigScreen/management/img/center2/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 561 B |
BIN
src/views/bigScreen/management/img/center2/2.png
Normal file
BIN
src/views/bigScreen/management/img/center2/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 526 B |
BIN
src/views/bigScreen/management/img/center2/3.png
Normal file
BIN
src/views/bigScreen/management/img/center2/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 404 B |
BIN
src/views/bigScreen/management/img/center2/4.png
Normal file
BIN
src/views/bigScreen/management/img/center2/4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 522 B |
BIN
src/views/bigScreen/management/img/center2/5.png
Normal file
BIN
src/views/bigScreen/management/img/center2/5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 539 B |
BIN
src/views/bigScreen/management/img/center2/6.png
Normal file
BIN
src/views/bigScreen/management/img/center2/6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 363 B |
BIN
src/views/bigScreen/management/img/center2/7.png
Normal file
BIN
src/views/bigScreen/management/img/center2/7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 437 B |
BIN
src/views/bigScreen/management/img/center2/8.png
Normal file
BIN
src/views/bigScreen/management/img/center2/8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 274 B |
@ -1,18 +1,126 @@
|
||||
<template>
|
||||
<div class="management">
|
||||
经营管理
|
||||
</div>
|
||||
<div class="management">
|
||||
<div class="left1">
|
||||
<left1></left1>
|
||||
</div>
|
||||
<div class="left2">
|
||||
<left2></left2>
|
||||
</div>
|
||||
<!-- <div class="bg1"></div> -->
|
||||
|
||||
<div class="center1">
|
||||
<center1></center1>
|
||||
</div>
|
||||
<!-- <div class="center2">
|
||||
<center2></center2>
|
||||
</div> -->
|
||||
<div class="right1">
|
||||
<right1></right1>
|
||||
</div>
|
||||
|
||||
<div class="right2">
|
||||
<right2></right2>
|
||||
</div>
|
||||
<!-- <div class="right1">
|
||||
<right1></right1>
|
||||
</div>
|
||||
<div class="right2">
|
||||
<right2></right2>
|
||||
</div>
|
||||
<div class="bottom1">
|
||||
<bottom1></bottom1>
|
||||
</div>
|
||||
<div class="bottom2">
|
||||
<bottom2></bottom2>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import scalseBox from '../components/scaleBox.vue'
|
||||
import bigScreenHead from '../components/bigScreenHead/index.vue'
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
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'
|
||||
export default {
|
||||
name: 'Management',
|
||||
components: {
|
||||
}
|
||||
name: 'Management',
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
rocketTit,
|
||||
container1,
|
||||
left1,
|
||||
left2,
|
||||
center1,
|
||||
right1,
|
||||
right2,
|
||||
center2,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.management {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// background-image: url("../img/bg.png");
|
||||
background-size: cover;
|
||||
.bg1 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 1920px;
|
||||
height: 485px;
|
||||
background-image: url('../img/bg-1.png');
|
||||
background-size: cover;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
.left1 {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 24px;
|
||||
}
|
||||
.left2 {
|
||||
position: absolute;
|
||||
top: 605px;
|
||||
left: 24px;
|
||||
}
|
||||
.center1 {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 578px;
|
||||
}
|
||||
.center2 {
|
||||
position: absolute;
|
||||
top: 605px;
|
||||
left: 710px;
|
||||
}
|
||||
|
||||
.right1 {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
right: 24px;
|
||||
}
|
||||
.right2 {
|
||||
position: absolute;
|
||||
top: 605px;
|
||||
right: 24px;
|
||||
}
|
||||
.bottom1 {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 24px;
|
||||
}
|
||||
.bottom2 {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 24px;
|
||||
}
|
||||
</style>
|
||||
|
||||
314
src/views/bigScreen/management/left1.vue
Normal file
314
src/views/bigScreen/management/left1.vue
Normal file
@ -0,0 +1,314 @@
|
||||
<template>
|
||||
<div>
|
||||
<container2 title="战略指标">
|
||||
<div class="wrap">
|
||||
<el-row class="content1">
|
||||
<el-col :span="24">
|
||||
<!-- <div id="left1" ref="left1" class="chart1"></div> -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</container2>
|
||||
<container2 title="综合指标" style="margin-top: 10px">
|
||||
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['完成率', '明细']"></bigScreenTabs>
|
||||
<!-- <div style="height: 100%; width: 100%" ref="left2"></div> -->
|
||||
</container2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import container2 from './components/container2/index.vue'
|
||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||
import progressBar from '@/views/bigScreen/components/progress/index.vue'
|
||||
import colorList from '@/utils/colorPalette'
|
||||
// import {Liquid} from '@antv/g2plot';
|
||||
// import resize from '../../dashboard/mixins/resize'
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
rocketTit,
|
||||
container2,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
data: [
|
||||
{ value: 154, name: '类别一' },
|
||||
{ value: 775, name: '类别二' },
|
||||
{ value: 679, name: '类别三' },
|
||||
{ value: 679, name: '类别四' },
|
||||
{ value: 679, name: '类别五' },
|
||||
{ value: 679, name: '类别六' },
|
||||
{ value: 679, name: '类别七' },
|
||||
{ value: 679, name: '类别八' },
|
||||
],
|
||||
colorList,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initLine()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.left1, 'macarons')
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
const calcAverageValue = (data, name) => {
|
||||
const items = data.filter(d => d.name === name)
|
||||
return items.length ? items.reduce((a, b) => a + b.value, 0) / items.length : '-'
|
||||
}
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
},
|
||||
color: this.colorList,
|
||||
legend: {
|
||||
data: ['类别一', '类别二', '类别三', '类别四', '类别五', '类别六', '类别七', '类别八'],
|
||||
orient: 'vertical',
|
||||
// left: '60%',
|
||||
right: '2%',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
},
|
||||
// formatter: value => {
|
||||
// return value + calcAverageValue(this.data, value)
|
||||
// },
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '概括',
|
||||
type: 'pie',
|
||||
radius: [0, '85%'],
|
||||
center: ['35%', '50%'],
|
||||
label: {
|
||||
formatter: '',
|
||||
position: 'inner',
|
||||
fontSize: 14,
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: this.data,
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
initLine() {
|
||||
this.chart = echarts.init(this.$refs.left2)
|
||||
this.setOptions2()
|
||||
},
|
||||
setOptions2() {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{a1}<br/>{b1}：{c1}',
|
||||
},
|
||||
legend: {
|
||||
data: ['收入', '实际', '目标'],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
// selectedMode: false,
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
left: 20,
|
||||
right: 10,
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
},
|
||||
xAxis: {
|
||||
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',
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: 50,
|
||||
},
|
||||
color: ['#ccc', 'red'],
|
||||
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',
|
||||
z: '-1',
|
||||
barGap: '-75%',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(85, 197, 162, .3)',
|
||||
},
|
||||
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: 'rgba(90, 216, 166, 0.85)',
|
||||
},
|
||||
data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75],
|
||||
},
|
||||
{
|
||||
name: '目标',
|
||||
type: 'scatter',
|
||||
symbol: 'rect',
|
||||
symbolSize: [30, 4],
|
||||
symbolOffset: [3, 0],
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: '#F6D97E',
|
||||
},
|
||||
data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.box {
|
||||
padding: 0 0 5px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.num {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content1 {
|
||||
// height: 200px;
|
||||
height: 100%;
|
||||
|
||||
.chart1 {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 192px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: normal;
|
||||
color: #91d5fe;
|
||||
vertical-align: sub;
|
||||
// margin-right: 3px;
|
||||
}
|
||||
|
||||
.content2 {
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.chart2 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.tit::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0px;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #00ffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
250
src/views/bigScreen/management/left2.vue
Normal file
250
src/views/bigScreen/management/left2.vue
Normal file
@ -0,0 +1,250 @@
|
||||
<template>
|
||||
<div>
|
||||
<container3 title="军用产业">
|
||||
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['总厂情况', '合同信息', '本月情况']"></bigScreenTabs>
|
||||
<!-- <div style="height: 100%; width: 100%" ref="chart"></div> -->
|
||||
</container3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
rocketTit,
|
||||
container3,
|
||||
bigScreenTabs,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
chart: null,
|
||||
option: {
|
||||
legend: {
|
||||
data: ['利润', '利润预测', '利润目标完成率'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
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',
|
||||
},
|
||||
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: '利润',
|
||||
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],
|
||||
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],
|
||||
itemStyle: {
|
||||
color: '#55C5A2',
|
||||
},
|
||||
symbol: 'none',
|
||||
},
|
||||
],
|
||||
// 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]
|
||||
// }
|
||||
|
||||
// ]
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.chart.setOption(this.option)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
color: #f6d97e;
|
||||
line-height: 35px;
|
||||
// margin-right: 3px;
|
||||
}
|
||||
.num2 {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
color: rgba(16, 152, 255, 1);
|
||||
line-height: 35px;
|
||||
}
|
||||
</style>
|
||||
316
src/views/bigScreen/management/right1.vue
Normal file
316
src/views/bigScreen/management/right1.vue
Normal file
@ -0,0 +1,316 @@
|
||||
<template>
|
||||
<div>
|
||||
<container2 title="综合计划/绩效计划">
|
||||
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['完成率', '明细']"></bigScreenTabs>
|
||||
<!-- <div style="height: 100%; width: 100%" ref="left1"></div> -->
|
||||
</container2>
|
||||
<container2 title="信息公示" style="margin-top: 10px">
|
||||
<bigScreenTabs slot="datePicker" v-model="index" :titleArr="['民用产业项目信息', '信息公示']"></bigScreenTabs>
|
||||
<!-- <div style="height: 100%; width: 100%" ref="left2"></div> -->
|
||||
</container2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import rocketTit from '../components/rocketTit/index.vue'
|
||||
import container2 from './components/container2/index.vue'
|
||||
import bigScreenTabs from '../components/bigScreenTabs/index.vue'
|
||||
import progressBar from '@/views/bigScreen/components/progress/index.vue'
|
||||
import colorList from '@/utils/colorPalette'
|
||||
// import {Liquid} from '@antv/g2plot';
|
||||
// import resize from '../../dashboard/mixins/resize'
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
rocketTit,
|
||||
container2,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
colorList,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initLine()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.left1, 'macarons')
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions() {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
},
|
||||
color: this.colorList,
|
||||
legend: {
|
||||
data: ['型号一', '型号二', '型号三', '型号四', '型号五', '型号六', '型号七', '型号八'],
|
||||
orient: 'vertical',
|
||||
// left: '60%',
|
||||
right: '2%',
|
||||
y: 'center',
|
||||
textStyle: {
|
||||
//图例文字的样式
|
||||
color: '#fff',
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '概括',
|
||||
type: 'pie',
|
||||
radius: ['40%', '80%'],
|
||||
center: ['35%', '50%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
fontSize: '40',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 154, name: '型号一' },
|
||||
{ value: 775, name: '型号二' },
|
||||
{ value: 679, name: '型号三' },
|
||||
{ value: 679, name: '型号四' },
|
||||
{ value: 679, name: '型号五' },
|
||||
{ value: 679, name: '型号六' },
|
||||
{ value: 679, name: '型号七' },
|
||||
{ value: 679, name: '型号八' },
|
||||
],
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
initLine() {
|
||||
this.chart = echarts.init(this.$refs.left2)
|
||||
this.setOptions2()
|
||||
},
|
||||
setOptions2() {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{a1}<br/>{b1}：{c1}',
|
||||
},
|
||||
legend: {
|
||||
data: ['预测', '实际', '目标'],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
// selectedMode: false,
|
||||
},
|
||||
grid: {
|
||||
containLabel: true,
|
||||
left: 20,
|
||||
right: 10,
|
||||
top: 30,
|
||||
bottom: 50,
|
||||
},
|
||||
xAxis: {
|
||||
data: [
|
||||
'型号一',
|
||||
'型号二',
|
||||
'型号三',
|
||||
'型号四',
|
||||
'型号五',
|
||||
'型号六',
|
||||
'型号七',
|
||||
'型号八',
|
||||
'型号九',
|
||||
'型号十',
|
||||
'型号十一',
|
||||
'型号十二',
|
||||
'型号十三',
|
||||
'型号十四',
|
||||
'型号十五',
|
||||
'型号十六',
|
||||
'型号十七',
|
||||
'型号十八',
|
||||
'型号十九',
|
||||
'型号二十',
|
||||
],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: 50,
|
||||
},
|
||||
color: ['#ccc', 'red'],
|
||||
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',
|
||||
// z: '-1',
|
||||
barGap: '-75%',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(85, 197, 162, .3)',
|
||||
},
|
||||
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95, 60, 70, 80, 70, 60, 50, 40, 30],
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: 'rgba(90, 216, 166, 0.85)',
|
||||
},
|
||||
data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95, 50, 60, 70, 80, 70, 40, 30, 30],
|
||||
},
|
||||
{
|
||||
name: '目标',
|
||||
type: 'scatter',
|
||||
symbol: 'rect',
|
||||
symbolSize: [30, 4],
|
||||
symbolOffset: [3, 0],
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: '#F6D97E',
|
||||
},
|
||||
data: [10, 20, 36, 10, 10, 20, 10, 20, 36, 10, 10, 20, 90, 80, 90, 80, 90, 90, 90, 90],
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.box {
|
||||
padding: 0 0 5px 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.num {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content1 {
|
||||
// height: 200px;
|
||||
height: 100%;
|
||||
|
||||
.chart1 {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 192px;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-BlackItalic, Roboto;
|
||||
font-weight: normal;
|
||||
color: #91d5fe;
|
||||
vertical-align: sub;
|
||||
// margin-right: 3px;
|
||||
}
|
||||
|
||||
.content2 {
|
||||
padding: 20px;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.chart2 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Semibold, PingFang SC;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
line-height: 22px;
|
||||
position: relative;
|
||||
padding-left: 15px;
|
||||
}
|
||||
.tit::after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0px;
|
||||
width: 4px;
|
||||
height: 16px;
|
||||
background: #00ffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
257
src/views/bigScreen/management/right2.vue
Normal file
257
src/views/bigScreen/management/right2.vue
Normal file
@ -0,0 +1,257 @@
|
||||
<template>
|
||||
<div>
|
||||
<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> -->
|
||||
<bigScreenTabs
|
||||
slot="datePicker"
|
||||
v-model="index"
|
||||
:titleArr="['总厂情况', '合同及产品生产信息', '本月情况']"
|
||||
></bigScreenTabs>
|
||||
<!-- <div style="height: 100%; width: 100%" ref="chart"></div> -->
|
||||
</container3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
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 echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'right2',
|
||||
components: {
|
||||
scalseBox,
|
||||
bigScreenHead,
|
||||
rocketTit,
|
||||
container3,
|
||||
bigScreenTabs,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
index: 0,
|
||||
chart: null,
|
||||
option: {
|
||||
legend: {
|
||||
data: ['利润', '利润预测', '利润目标完成率'],
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
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',
|
||||
},
|
||||
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: '利润',
|
||||
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],
|
||||
itemStyle: {
|
||||
color: 'rgb(118,196,166)',
|
||||
},
|
||||
},
|
||||
{
|
||||
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],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#F6D97E',
|
||||
},
|
||||
},
|
||||
symbol: 'none',
|
||||
},
|
||||
],
|
||||
// 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]
|
||||
// }
|
||||
|
||||
// ]
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (!this.chart) {
|
||||
return
|
||||
}
|
||||
this.chart.dispose()
|
||||
this.chart = null
|
||||
},
|
||||
methods: {
|
||||
initChart() {
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
this.chart.setOption(this.option)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.num {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
color: #f6d97e;
|
||||
line-height: 35px;
|
||||
// margin-right: 3px;
|
||||
}
|
||||
.num2 {
|
||||
font-size: 30px;
|
||||
font-family: Roboto-Black, Roboto;
|
||||
font-weight: 900;
|
||||
color: rgba(16, 152, 255, 1);
|
||||
line-height: 35px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user