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

up

Browse Source
This commit is contained in:
熊丽君
2022-01-18 10:34:50 +08:00
parent 7b3f975bd4
commit def5cf6d2f
6 changed files with 1549 additions and 1261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
src/views/bigScreen/drivingCabin/center.vue
View File

@ -5,31 +5,76 @@
<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>
<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" />
<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>
<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" />
<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>
<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" />
<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>
<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" />
<progressBar
:percentage="
(val.completedDeliveryQuantity / val.targetDeliveryQuantity) *
100
"
/>
</div>
</div>
</div>
@ -38,23 +83,23 @@
</template>
<script>
import container3 from '../components/container3/index.vue'
import rocketTit from '../components/rocketTit/index.vue'
import progressBar from './../components/progress/index.vue'
import container3 from "../components/container3/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'
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "../../dashboard/mixins/resize";
export default {
mixins: [resize],
name: 'left1',
name: "left1",
components: {
container3,
rocketTit,
progressBar,
},
data () {
data() {
return {
val: {
bigPic: "",
@ -68,31 +113,30 @@ export default {
targetIncome: "0",
targetProfit: "0",
year: "0",
}
}
},
};
},
mounted () {
mounted() {
this.$nextTick(() => {
this.getData()
})
this.getData();
});
},
beforeDestroy () { },
beforeDestroy() {},
methods: {
getData () {
getData() {
this.request({
url: '/hx/cockpitOverview/annualTargetAndPic',
method: 'get',
}).then(res => {
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>

683
src/views/bigScreen/drivingCabin/left1.vue
View File

@ -1,370 +1,379 @@
<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">{{res.map.completedTasks}}/{{(res.map.cate).toFixed(2)}}%</i>
<progressBar :percentage="res.map.cate" />
</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"
>{{ res.map.completedTasks }}/{{ res.map.cate.toFixed(2) }}%</i
>
<progressBar :percentage="res.map.cate" />
</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>
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 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
import echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import request from '@/utils/request'
import request from "@/utils/request";
//hx/cockpitOverview/businessResponsibility
export default {
// mixins: [resize],
name: 'left1',
components: {
rocketTit,
container2,
bigScreenTabs,
progressBar,
},
data() {
return {
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,
res: {
map: {
cate: 0,
completedTasks: 0,
targetTasks: 0,
}
},
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
this.initLine()
})
},
beforeDestroy() {},
methods: {
initChart() {
this.setOptions()
},
setOptions() {
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: titData,
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: valData,
},
],
})
})
// mixins: [resize],
name: "left1",
components: {
rocketTit,
container2,
bigScreenTabs,
progressBar,
},
data() {
return {
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,
res: {
map: {
cate: 0,
completedTasks: 0,
targetTasks: 0,
},
},
};
},
mounted() {
this.$nextTick(() => {
this.initChart();
this.initLine();
});
},
beforeDestroy() {},
methods: {
initChart() {
this.setOptions();
},
setOptions() {
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: {
type: "scroll",
data: titData,
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: 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() {
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).toFixed(2));
}
this.setOptions2(titData,COMPLETEDREVENUE,FORECASTREVENUE,TARGETREVENUE)
})
},
setOptions2(titData,COMPLETEDREVENUE,FORECASTREVENUE,TARGETREVENUE) {
this.chart.setOption({
tooltip: {
trigger: 'axis',
// formatter: '{a1}<br/>{b1}：{c1}',
},
legend: {
data: ['收入', '预测', '目标完成率'],
textStyle: {
color: '#fff', //legend字体颜色
},
// selectedMode: false,
},
grid: {
containLabel: true,
left: 30,
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',
// ],
data: titData,
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: Math.max.apply(null, TARGETREVENUE),
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: FORECASTREVENUE,
},
{
name: '收入',
type: 'bar',
barWidth: 15,
position: [0, 0],
itemStyle: {
color: 'rgba(90, 216, 166, 0.85)',
},
data: COMPLETEDREVENUE,
},
{
name: '目标完成率',
type: 'scatter',
symbol: 'rect',
symbolSize: [30, 4],
symbolOffset: [3, 0],
position: [0, 0],
itemStyle: {
color: '#F6D97E',
},
yAxisIndex: 1,
data: TARGETREVENUE,
},
],
})
},
},
}
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() {
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).toFixed(2)
);
}
this.setOptions2(
titData,
COMPLETEDREVENUE,
FORECASTREVENUE,
TARGETREVENUE
);
});
},
setOptions2(titData, COMPLETEDREVENUE, FORECASTREVENUE, TARGETREVENUE) {
this.chart.setOption({
tooltip: {
trigger: "axis",
// formatter: '{a1}<br/>{b1}：{c1}',
},
legend: {
data: ["收入", "预测", "目标完成率"],
textStyle: {
color: "#fff", //legend字体颜色
},
// selectedMode: false,
},
grid: {
containLabel: true,
left: 30,
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',
// ],
data: titData,
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: Math.max.apply(null, TARGETREVENUE),
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: FORECASTREVENUE,
},
{
name: "收入",
type: "bar",
barWidth: 15,
position: [0, 0],
itemStyle: {
color: "rgba(90, 216, 166, 0.85)",
},
data: COMPLETEDREVENUE,
},
{
name: "目标完成率",
type: "scatter",
symbol: "rect",
symbolSize: [30, 4],
symbolOffset: [3, 0],
position: [0, 0],
itemStyle: {
color: "#F6D97E",
},
yAxisIndex: 1,
data: TARGETREVENUE,
},
],
});
},
},
};
</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>