|
|
@@ -14,8 +14,51 @@
|
|
|
</el-select>
|
|
|
</div>
|
|
|
</template>
|
|
|
+ <template slot="content">
|
|
|
+ <div style="clear: both;">
|
|
|
+ <div class="previous-border-class" v-for="item in dataBoxData" :key="item.index">
|
|
|
+ <div class="previous-style-padding">
|
|
|
+ <div class="justify-div-position">
|
|
|
+ <div class="previous-style-circle" :style="{borderColor:item.color}"></div>
|
|
|
+ <div class="previous-style-font1">{{$t(item.title)}}</div>
|
|
|
+ <el-tooltip effect="dark" placement="top-start" style="margin-top: 3px">
|
|
|
+ <div slot="content" style="white-space: pre">
|
|
|
+ {{
|
|
|
+ $t(
|
|
|
+ item.description
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ </div>
|
|
|
+ <!-- <i class="el-icon-question" style="color: #afb0be;float: right"></i>-->
|
|
|
+ <img
|
|
|
+ width="14px"
|
|
|
+ height="14px"
|
|
|
+ src="../../../assets/icons/prompt_icon.svg"
|
|
|
+ />
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div class="previous-style-font2">
|
|
|
+ <div v-if="item.title1">
|
|
|
+ <span class="font-color-style-gray previous-style-font4 previous-right-5">{{$t(item.title1)}}</span>
|
|
|
+ <span class="font-color-style-green previous-style-font3 font-class-bold">{{item.value1}}</span>
|
|
|
+ <span class="font-color-style-green previous-style-font4 font-class-bold">{{$t(item.unit1)}}</span>
|
|
|
+ <span class="font-color-style-gray previous-style-font4 previous-left-26 previous-right-5">{{$t(item.title2)}}</span>
|
|
|
+ <span class="font-color-style-green previous-style-font3 font-class-bold">{{item.value2}}</span>
|
|
|
+ <span class="font-color-style-green previous-style-font4 font-class-bold">{{$t(item.unit2)}}</span>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <span class="font-color-style-green previous-style-font3 font-class-bold">{{item.value}}</span>
|
|
|
+ <span class="font-color-style-green previous-style-font4 font-class-bold">{{$t(item.unit)}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
<template slot="charts">
|
|
|
- <div ref="chartRef" style="height: 220px;">
|
|
|
+ <div style="clear: both;">
|
|
|
+ <div ref="chartRef" style="height: 220px;">
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</boxBorder>
|
|
|
@@ -27,6 +70,7 @@ import boxBorder from './boxBorder'
|
|
|
import {Column} from "@antv/g2plot";
|
|
|
export default {
|
|
|
name: "futureTwelveMonths",
|
|
|
+ props:['dataBoxData'],
|
|
|
components:{
|
|
|
boxBorder
|
|
|
},
|
|
|
@@ -63,7 +107,7 @@ export default {
|
|
|
})
|
|
|
console.log(this.chartMapData,'chartMapData')
|
|
|
console.log(this.$refs.selectRef.$el.clientHeight,'高度&&&&&&&高度')
|
|
|
- this.height = 282
|
|
|
+ this.height = 352
|
|
|
this.height = this.height + (this.$refs.selectRef.$el.clientHeight -32)
|
|
|
if (init){
|
|
|
this.chartMap = new Column(this.$refs.chartRef,{
|
|
|
@@ -137,5 +181,50 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
|
-
|
|
|
+.previous-border-class{
|
|
|
+ width: 28%;
|
|
|
+ height: 68px;
|
|
|
+ float: left;
|
|
|
+ margin-right: 40px;
|
|
|
+}
|
|
|
+.previous-style-padding{
|
|
|
+ padding: 10px 20px;
|
|
|
+}
|
|
|
+.previous-style-circle{
|
|
|
+ width: 5px;
|
|
|
+ height: 5px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 2px solid;
|
|
|
+ line-height: 19px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-top: 5px;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+.previous-style-font1{
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #888888;
|
|
|
+ line-height: 19px;
|
|
|
+ text-align: left;
|
|
|
+ font-style: normal;
|
|
|
+ text-transform: none;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+.previous-style-font2{
|
|
|
+ margin-top: 5px;
|
|
|
+ margin-left: 15px;
|
|
|
+}
|
|
|
+.previous-style-font3{
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+.previous-style-font4{
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.previous-right-5{
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+.previous-left-26{
|
|
|
+ margin-left: 26px;
|
|
|
+}
|
|
|
</style>
|