驾驶仓总览接口完毕
This commit is contained in:
hh
@ -48,6 +48,15 @@ Vue.prototype.selectDictLabels = selectDictLabels
|
||||
Vue.prototype.handleTree = handleTree
|
||||
Vue.prototype.page_size = 2
|
||||
|
||||
import request from '@/utils/request'
|
||||
Vue.prototype.request = request;
|
||||
Vue.prototype.dataZoomEnd = (titLength,defaultLength = 7) => {
|
||||
if(titLength <= defaultLength) {
|
||||
return 100;
|
||||
}
|
||||
return ((defaultLength / (titLength + 1)) *100).toFixed(0);
|
||||
}
|
||||
|
||||
// 全局组件挂载
|
||||
Vue.component('DictTag', DictTag)
|
||||
Vue.component('Pagination', Pagination)
|
||||
|
||||
@ -1,40 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<container3>
|
||||
<img class="img" src="./conter.png" style="width: 100%; height: 100%" />
|
||||
<rocketTit class="tit">全年目标</rocketTit>
|
||||
<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>
|
||||
</container3>
|
||||
</div>
|
||||
<div>
|
||||
<container3>
|
||||
<img class="img" :src="val.bigPic" style="width: 100%; height: 100%" />
|
||||
<rocketTit class="tit">全年目标</rocketTit>
|
||||
<div class="data">
|
||||
<div class="data-item">
|
||||
<div><img src="./icon1.png" alt="" /><span style="font-weight: bold">收入</span></div>
|
||||
<div class="box"><i>{{val.completedIncome}}/</i><i class="num">{{val.targetIncome}}</i><span class="num2">万</span></div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="val.completedIncome/val.targetIncome*100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><img src="./icon2.png" alt="" /><span style="font-weight: bold">利润</span></div>
|
||||
<div class="box"><i>{{val.completedProfit}}/</i><i class="num">{{val.targetProfit}}</i><span class="num2">万</span></div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="val.completedProfit/val.targetProfit*100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><img src="./icon3.png" alt="" /><span style="font-weight: bold">装药量</span></div>
|
||||
<div class="box"><i>{{val.completedChargeQuantity}}/</i><i class="num">{{val.targetChargeQuantity}}</i><span class="num2">万件</span></div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="val.completedChargeQuantity/val.targetChargeQuantity*100" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="data-item">
|
||||
<div><img src="./icon4.png" alt="" /><span style="font-weight: bold">交付数量</span></div>
|
||||
<div class="box"><i>{{val.completedDeliveryQuantity}}/</i><i class="num">{{val.targetDeliveryQuantity}}</i><span class="num2">万件</span></div>
|
||||
<div style="width: 100%">
|
||||
<progressBar :percentage="(val.completedDeliveryQuantity/val.targetDeliveryQuantity)*100" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</container3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -45,163 +45,196 @@ 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: {
|
||||
container3,
|
||||
rocketTit,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {},
|
||||
beforeDestroy() {},
|
||||
methods: {},
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
container3,
|
||||
rocketTit,
|
||||
progressBar,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
val: {
|
||||
bigPic: "",
|
||||
completedChargeQuantity: "0",
|
||||
completedDeliveryQuantity: "0",
|
||||
completedIncome: "0",
|
||||
completedProfit: "0",
|
||||
id: 1,
|
||||
targetChargeQuantity: "0",
|
||||
targetDeliveryQuantity: "0",
|
||||
targetIncome: "0",
|
||||
targetProfit: "0",
|
||||
year: "0",
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
beforeDestroy () { },
|
||||
methods: {
|
||||
getData () {
|
||||
this.request({
|
||||
url: '/hx/cockpitOverview/annualTargetAndPic',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
this.val = res.data[0];
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.tit {
|
||||
padding: 16px 24px;
|
||||
padding: 16px 24px;
|
||||
}
|
||||
.img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
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;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
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>
|
||||
|
||||
@ -1,64 +1,65 @@
|
||||
<template>
|
||||
<div>
|
||||
<container4 title="今日动态">
|
||||
<vue-seamless-scroll :data="listData" class="warp" :class-option="{
|
||||
<vue-seamless-scroll ref="seamlessScroll" :data="listData" class="warp" :class-option="{
|
||||
openWatch: true,
|
||||
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="5">{{val.income}}万</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="5">{{val.expenditure}}万</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="5">{{val.newContract}}份</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="5">{{val.safetyProblem}}个</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="5">{{val.qualityProblem}}个</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-col :span="5">{{val.operatingEquipment}}台</el-col>
|
||||
<el-col :span="7">运行率：{{val.equipmentRate}}%</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-col :span="5">{{val.totalWorker}}人</el-col>
|
||||
<el-col :span="7">出勤率：{{val.workerRate}}%</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-col :span="5">{{val.totalTask}}个</el-col>
|
||||
<el-col :span="7">完成率：{{val.taskRate}}%</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</ul>
|
||||
@ -75,6 +76,8 @@ import vueSeamlessScroll from 'vue-seamless-scroll'
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
|
||||
import request from '@/utils/request'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left1',
|
||||
@ -86,16 +89,48 @@ export default {
|
||||
data () {
|
||||
return {
|
||||
listData: [1, 2, 3, 4, 5, 6, 7, 8],
|
||||
val: {
|
||||
attendanceWorker: "",
|
||||
completeTask: "",
|
||||
equipmentRate: "",
|
||||
expenditure: "",
|
||||
id: 1,
|
||||
income: "",
|
||||
newContract: "",
|
||||
operatingEquipment: "",
|
||||
qualityProblem: "",
|
||||
safetyProblem: "",
|
||||
taskRate: "",
|
||||
todayDate: "",
|
||||
totalEquipment: "",
|
||||
totalTask: "",
|
||||
totalWorker: "",
|
||||
workerRate: "",
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getData()
|
||||
})
|
||||
},
|
||||
beforeDestroy () {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
getData() {
|
||||
request({
|
||||
url: '/hx/cockpitOverview/todayDynamics',
|
||||
method: 'get',
|
||||
}).then(res=> {
|
||||
if (200 == res.code) {
|
||||
this.val = res.data[0];
|
||||
this.$refs.seamlessScroll.reset();
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -10,8 +10,8 @@
|
||||
<div class="box">
|
||||
<span style="font-size: 25px; margin-right: 3px">·</span>
|
||||
<span>总完成任务/完成率</span>
|
||||
<i class="num">55/80%</i>
|
||||
<progressBar :percentage="70" />
|
||||
<i class="num">{{res.map.completedTasks}}/{{(res.map.cate).toFixed(2)}}%</i>
|
||||
<progressBar :percentage="res.map.cate" />
|
||||
</div>
|
||||
</div>
|
||||
</container2>
|
||||
@ -38,6 +38,9 @@ import colorList from '@/utils/colorPalette'
|
||||
// import resize from '../../dashboard/mixins/resize'
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
|
||||
import request from '@/utils/request'
|
||||
//hx/cockpitOverview/businessResponsibility
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
name: 'left1',
|
||||
@ -60,6 +63,13 @@ export default {
|
||||
{ value: 679, name: '类别八' },
|
||||
],
|
||||
colorList,
|
||||
res: {
|
||||
map: {
|
||||
cate: 0,
|
||||
completedTasks: 0,
|
||||
targetTasks: 0,
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -71,22 +81,32 @@ export default {
|
||||
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({
|
||||
request({
|
||||
url: '/hx/cockpitOverview/businessResponsibility',
|
||||
method: 'get',
|
||||
}).then(res=> {
|
||||
this.res = res.data;
|
||||
let titData = [];
|
||||
let valData = [];
|
||||
for (let i = 0; i < this.res.list.length; i++) {
|
||||
const item = this.res.list[i];
|
||||
titData.push(item.indicator_name);
|
||||
valData.push(
|
||||
{ value: item.cate, name: item.indicator_name },
|
||||
);
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.left1, 'macarons')
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
},
|
||||
color: this.colorList,
|
||||
legend: {
|
||||
data: ['类别一', '类别二', '类别三', '类别四', '类别五', '类别六', '类别七', '类别八'],
|
||||
data: titData,
|
||||
orient: 'vertical',
|
||||
// left: '60%',
|
||||
right: '2%',
|
||||
@ -114,23 +134,46 @@ export default {
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: this.data,
|
||||
data: valData,
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
|
||||
})
|
||||
|
||||
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 : '-'
|
||||
}
|
||||
},
|
||||
initLine() {
|
||||
this.chart = echarts.init(this.$refs.left2)
|
||||
this.setOptions2()
|
||||
request({
|
||||
url: '/hx/cockpitOverview/revenueProfile',
|
||||
method: 'get',
|
||||
}).then(res=> {
|
||||
this.chart = echarts.init(this.$refs.left2)
|
||||
let titData = [];
|
||||
let COMPLETEDREVENUE = [];
|
||||
let FORECASTREVENUE = [];
|
||||
let TARGETREVENUE = [];
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
const item = res.data[i];
|
||||
titData.push(item.month);
|
||||
COMPLETEDREVENUE.push(item.COMPLETEDREVENUE);
|
||||
FORECASTREVENUE.push(item.FORECASTREVENUE);
|
||||
TARGETREVENUE.push(item.COMPLETEDREVENUE/item.TARGETREVENUE * 100);
|
||||
}
|
||||
this.setOptions2(titData,COMPLETEDREVENUE,FORECASTREVENUE,TARGETREVENUE)
|
||||
})
|
||||
},
|
||||
setOptions2() {
|
||||
setOptions2(titData,COMPLETEDREVENUE,FORECASTREVENUE,TARGETREVENUE) {
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: '{a1}<br/>{b1}：{c1}',
|
||||
// formatter: '{a1}<br/>{b1}：{c1}',
|
||||
},
|
||||
legend: {
|
||||
data: ['收入', '实际', '目标'],
|
||||
data: ['收入', '预测', '目标完成率'],
|
||||
textStyle: {
|
||||
color: '#fff', //legend字体颜色
|
||||
},
|
||||
@ -144,20 +187,21 @@ export default {
|
||||
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',
|
||||
],
|
||||
// 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',
|
||||
// ],
|
||||
data: titData,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
@ -167,7 +211,7 @@ export default {
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: 50,
|
||||
end: this.dataZoomEnd(titData.length,7),
|
||||
},
|
||||
color: ['#ccc', 'red'],
|
||||
yAxis: [
|
||||
@ -193,7 +237,7 @@ export default {
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
max: Math.max.apply(null, TARGETREVENUE),
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: '{value} %',
|
||||
@ -213,7 +257,7 @@ export default {
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '收入',
|
||||
name: '预测',
|
||||
type: 'bar',
|
||||
z: '-1',
|
||||
barGap: '-75%',
|
||||
@ -221,20 +265,20 @@ export default {
|
||||
itemStyle: {
|
||||
color: 'rgba(85, 197, 162, .3)',
|
||||
},
|
||||
data: [80, 80, 95, 95, 95, 95, 80, 80, 95, 95, 95, 95],
|
||||
data: FORECASTREVENUE,
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
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],
|
||||
data: COMPLETEDREVENUE,
|
||||
},
|
||||
{
|
||||
name: '目标',
|
||||
name: '目标完成率',
|
||||
type: 'scatter',
|
||||
symbol: 'rect',
|
||||
symbolSize: [30, 4],
|
||||
@ -243,7 +287,8 @@ export default {
|
||||
itemStyle: {
|
||||
color: '#F6D97E',
|
||||
},
|
||||
data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90],
|
||||
yAxisIndex: 1,
|
||||
data: TARGETREVENUE,
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
@ -19,6 +19,8 @@ import container3 from "./components/container3/index.vue";
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
import resize from '../../dashboard/mixins/resize'
|
||||
|
||||
import request from '@/utils/request'
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: 'left2',
|
||||
@ -97,7 +99,7 @@ export default {
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 25,
|
||||
max: 50,
|
||||
interval: 5,
|
||||
axisLabel: {
|
||||
formatter: '{value} %'
|
||||
@ -167,48 +169,12 @@ export default {
|
||||
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'
|
||||
color: 'rgba(85, 197, 162, 1)'
|
||||
},
|
||||
yAxisIndex: 1,
|
||||
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]
|
||||
// }
|
||||
|
||||
// ]
|
||||
},
|
||||
}
|
||||
},
|
||||
@ -226,8 +192,163 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
this.chart.setOption(this.option);
|
||||
request({
|
||||
url: '/hx/cockpitOverview/profitProfile',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
|
||||
this.chart = echarts.init(this.$refs.chart)
|
||||
let titData = [];
|
||||
let COMPLETEDPROFIT = [];
|
||||
let FORECASTPROFIT = [];
|
||||
let TARGETPROFIT = [];
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
const item = res.data[i];
|
||||
titData.push(item.month);
|
||||
COMPLETEDPROFIT.push(item.COMPLETEDPROFIT);
|
||||
FORECASTPROFIT.push(item.FORECASTPROFIT);
|
||||
TARGETPROFIT.push(item.COMPLETEDPROFIT / item.TARGETPROFIT * 100);
|
||||
}
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
data: ['利润', '利润预测', '利润目标完成率'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
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',
|
||||
// ],
|
||||
data: titData,
|
||||
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',
|
||||
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',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(titData.length, 7),
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '利润预测',
|
||||
type: 'bar',
|
||||
z: '-1',
|
||||
barGap: '-75%',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(145, 213, 254, .3)',
|
||||
},
|
||||
data: FORECASTPROFIT,
|
||||
},
|
||||
{
|
||||
name: '利润',
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#B5D3FE' // 0%处的颜色为红色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#7EA7FC' // 100%处的颜色为蓝
|
||||
}]
|
||||
}
|
||||
},
|
||||
data: COMPLETEDPROFIT,
|
||||
},
|
||||
{
|
||||
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: TARGETPROFIT,
|
||||
itemStyle: {
|
||||
color: 'rgba(85, 197, 162, 1)'
|
||||
},
|
||||
yAxisIndex: 1,
|
||||
symbol: 'none'
|
||||
}
|
||||
],
|
||||
})
|
||||
});
|
||||
// this.chart = echarts.init(this.$refs.chart);
|
||||
// this.chart.setOption(this.option);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,32 +1,31 @@
|
||||
<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 class="box">
|
||||
<span style="font-size: 25px; margin-right: 3px">·</span>
|
||||
<span>已完成任务/完成率</span>
|
||||
<i class="num">55/80%</i>
|
||||
<progressBar :percentage="70" />
|
||||
<el-progress :show-text="false" :stroke-width="6" :percentage="70"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
</container2>
|
||||
<container2 title="交付产品完成概况" style="margin-top: 10px">
|
||||
<div style="height: 100%; width: 100%" ref="left2"></div>
|
||||
<!-- <div class="wrap">
|
||||
<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 class="box">
|
||||
<span style="font-size: 25px; margin-right: 3px">·</span>
|
||||
<span>已完成任务/完成率</span>
|
||||
<i class="num">{{rate.completedTotal}}/{{rate.rate}}%</i>
|
||||
<progressBar :percentage="rate.rate" />
|
||||
</div>
|
||||
</div>
|
||||
</container2>
|
||||
<container2 title="交付产品完成概况" style="margin-top: 10px">
|
||||
<div style="height: 100%; width: 100%" ref="left2"></div>
|
||||
<!-- <div class="wrap">
|
||||
<el-row class="content2">
|
||||
<el-col :span="24" style="height: 100%">
|
||||
<div id="left2" ref="left2" class="chart2"></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div> -->
|
||||
</container2>
|
||||
</div>
|
||||
</container2>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -40,294 +39,350 @@ import colorList from '@/utils/colorPalette'
|
||||
import echarts from 'echarts'
|
||||
require('echarts/theme/macarons') // echarts theme
|
||||
export default {
|
||||
// mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
rocketTit,
|
||||
container2,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
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],
|
||||
},
|
||||
],
|
||||
})
|
||||
},
|
||||
},
|
||||
// mixins: [resize],
|
||||
name: 'left1',
|
||||
components: {
|
||||
rocketTit,
|
||||
container2,
|
||||
bigScreenTabs,
|
||||
progressBar,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
chart: null,
|
||||
chart1: null,
|
||||
colorList,
|
||||
rate: {
|
||||
completedTotal: 0,
|
||||
rate: 0,
|
||||
targetTotal: 0,
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.$nextTick(() => {
|
||||
this.initChart()
|
||||
this.initLine()
|
||||
})
|
||||
},
|
||||
beforeDestroy () { },
|
||||
methods: {
|
||||
initChart () {
|
||||
this.setOptions()
|
||||
},
|
||||
setOptions () {
|
||||
this.request({
|
||||
url: '/hx/cockpitOverview/productionResponsibility',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
this.rate = res.data.rate;
|
||||
let valData = [];
|
||||
let titData = [];
|
||||
for (let i = 0; i < res.data.list.length; i++) {
|
||||
const item = res.data.list[i];
|
||||
titData.push(item.translateName)
|
||||
valData.push(
|
||||
{ value: item.completedTaskNumber, name: item.translateName },
|
||||
);
|
||||
}
|
||||
this.chart = echarts.init(this.$refs.left1, 'macarons')
|
||||
|
||||
this.chart.setOption({
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
||||
},
|
||||
color: this.colorList,
|
||||
legend: {
|
||||
// data: ['型号一', '型号二', '型号三', '型号四', '型号五', '型号六', '型号七', '型号八'],
|
||||
data: titData,
|
||||
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: valData
|
||||
// [
|
||||
// { value: 154, name: '型号一' },
|
||||
// { value: 775, name: '型号二' },
|
||||
// { value: 679, name: '型号三' },
|
||||
// { value: 679, name: '型号四' },
|
||||
// { value: 679, name: '型号五' },
|
||||
// { value: 679, name: '型号六' },
|
||||
// { value: 679, name: '型号七' },
|
||||
// { value: 679, name: '型号八' },
|
||||
// ]
|
||||
,
|
||||
},
|
||||
],
|
||||
})
|
||||
} else {
|
||||
this.$message.error(res.msg);
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
initLine () {
|
||||
this.setOptions2()
|
||||
},
|
||||
setOptions2 () {
|
||||
this.request({
|
||||
url: '/hx/cockpitOverview/productCompletion',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
if (200 == res.code) {
|
||||
let titData = [];
|
||||
let completionRate = [];
|
||||
let actualDeliveryQuantity = [];
|
||||
let targetDeliveryQuantity = [];
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
const item = res.data[i];
|
||||
titData.push(item.productName);
|
||||
completionRate.push(item.completionRate);
|
||||
actualDeliveryQuantity.push(item.actualDeliveryQuantity);
|
||||
targetDeliveryQuantity.push(item.targetDeliveryQuantity);
|
||||
}
|
||||
this.chart1 = echarts.init(this.$refs.left2)
|
||||
|
||||
this.chart1.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: titData,
|
||||
// data: [
|
||||
// '型号一',
|
||||
// '型号二',
|
||||
// '型号三',
|
||||
// '型号四',
|
||||
// '型号五',
|
||||
// '型号六',
|
||||
// '型号七',
|
||||
// '型号八',
|
||||
// '型号九',
|
||||
// '型号十',
|
||||
// '型号十一',
|
||||
// '型号十二',
|
||||
// '型号十三',
|
||||
// '型号十四',
|
||||
// '型号十五',
|
||||
// '型号十六',
|
||||
// '型号十七',
|
||||
// '型号十八',
|
||||
// '型号十九',
|
||||
// '型号二十',
|
||||
// ],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataZoom: {
|
||||
type: 'slider',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(titData.length, 7),
|
||||
},
|
||||
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: targetDeliveryQuantity,
|
||||
// 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: actualDeliveryQuantity,
|
||||
// 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: completionRate,
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
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%;
|
||||
// height: 200px;
|
||||
height: 100%;
|
||||
|
||||
.chart1 {
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 192px;
|
||||
background: transparent;
|
||||
}
|
||||
.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;
|
||||
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%;
|
||||
}
|
||||
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;
|
||||
}
|
||||
.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>
|
||||
|
||||
@ -32,186 +32,6 @@ export default {
|
||||
return {
|
||||
dateRange: [],
|
||||
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,
|
||||
barGap: '0',
|
||||
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 () {
|
||||
@ -229,7 +49,170 @@ export default {
|
||||
methods: {
|
||||
initChart () {
|
||||
this.chart = echarts.init(this.$refs.chart);
|
||||
this.chart.setOption(this.option);
|
||||
|
||||
this.request({
|
||||
url: '/hx/cockpitOverview/chargeQuantityList',
|
||||
method: 'get',
|
||||
}).then(res => {
|
||||
console.log(res);
|
||||
|
||||
let titData = [];
|
||||
let actualQuantity = [];
|
||||
let forecastQuantity = [];
|
||||
let targetCompletionRate = [];
|
||||
for (let i = 0; i < res.data.length; i++) {
|
||||
const item = res.data[i];
|
||||
titData.push(item.month);
|
||||
actualQuantity.push(item.actualQuantity);
|
||||
forecastQuantity.push(item.forecastQuantity);
|
||||
targetCompletionRate.push(item.targetCompletionRate);
|
||||
}
|
||||
this.chart.setOption({
|
||||
legend: {
|
||||
data: ['实际', '预测', '目标完成率'],
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '6%',
|
||||
bottom: '3%',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: titData,
|
||||
// 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,
|
||||
axisLabel: {
|
||||
formatter: '{value}'
|
||||
},
|
||||
splitLine: {
|
||||
show: false//不显示网格线
|
||||
},
|
||||
splitArea: {
|
||||
show: false//不显示网格区域
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)'
|
||||
},
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
|
||||
interval: 20,
|
||||
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',
|
||||
start: 0,
|
||||
end: this.dataZoomEnd(titData.length, 7),
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '预测',
|
||||
type: 'bar',
|
||||
z: '-1',
|
||||
barGap: '-75%',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
color: 'rgba(145, 213, 254, .3)',
|
||||
},
|
||||
data: forecastQuantity,
|
||||
},
|
||||
{
|
||||
name: '实际',
|
||||
type: 'bar',
|
||||
barWidth: 15,
|
||||
position: [0, 0],
|
||||
itemStyle: {
|
||||
color: {
|
||||
type: 'linear', // 线性渐变
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#B5D3FE' // 0%处的颜色为红色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#7EA7FC' // 100%处的颜色为蓝
|
||||
}]
|
||||
}
|
||||
},
|
||||
data: actualQuantity,
|
||||
},
|
||||
{
|
||||
name: '目标完成率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
smooth: false,
|
||||
data: targetCompletionRate,
|
||||
// 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: 'rgba(246, 217, 126, 1)'
|
||||
}
|
||||
},
|
||||
symbol: 'none'
|
||||
}
|
||||
],
|
||||
});
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -111,6 +111,25 @@ export default {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '件',
|
||||
splitLine: {
|
||||
show: true,
|
||||
// 改变轴线颜色
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['rgba(255, 255, 255,.5)'],
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgb(255, 255, 255)',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
|
||||
Reference in New Issue
Block a user