Files
2022-02-16 15:23:37 +08:00

296 lines
6.7 KiB
Vue

<template>
<div>
<container3>
<img
v-if="val.bigPic && val.bigPic.length"
class="img"
:src="val.bigPic"
style="width: 100%; height: 100%"
/>
<img
v-else
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>{{ handleMillion(val.completedIncome) }}/</i
><i class="num">{{ handleMillion(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>{{ handleMillion(val.completedProfit) }}/</i
><i class="num">{{ handleMillion(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>{{ handleMillion(val.completedChargeQuantity) }}/</i
><i class="num">{{ handleMillion(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>{{ handleMillion(val.completedDeliveryQuantity) }}/</i
><i class="num">{{ handleMillion(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>
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";
export default {
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;
}
.img {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.data {
display: flex;
justify-content: space-evenly;
margin: 15px 30px 0;
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>