<template>
|
<div class="box">
|
<div class="content">
|
<div class="box1">
|
<div class="titleOne">市场主体</div>
|
<div class="titleTwo"
|
style="">{{ value1 }}<label class="labelOne">家</label></div>
|
</div>
|
<div class="box2">
|
<div class="boximage"></div>
|
</div>
|
<div class="box3">
|
<div class="titleOne">全区工业总产值</div>
|
<div class="titleTwo"
|
style="">{{ value2 }}<label class="labelOne">亿元</label></div>
|
</div>
|
<div class="box2">
|
<div class="boximage"></div>
|
</div>
|
<div class="box5">
|
<div class="titleOne">常驻人口数</div>
|
<div class="titleTwo"
|
style="">{{ value3 }}<label class="labelOne">万人</label></div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import axios from 'axios'
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data () {
|
//这里存放数据
|
return {
|
value1: 0,
|
value2: 0,
|
value3: 0,
|
}
|
},
|
//方法集合
|
methods: {
|
getHost: function () {
|
return location.href.indexOf(API_HOST) > -1 ? "easy-data/" : JD_API + "easy-data/";
|
},
|
getAllDate () {
|
var host = this.getHost()
|
|
var fullYear = new Date().getFullYear() - 2
|
axios({
|
method: 'post',
|
url: host + 'sql/data/api/v2/execute/customResult/SA2022011613534609480943/data',
|
data: { indexTime: fullYear }
|
}).then((res) => {
|
console.log("PopopPage => ", res)
|
this.value1 = res.data.dp_jjyx_069 == null ? 0 : res.data.dp_jjyx_069;//dp_jkqgl_002
|
this.value2 = res.data.dp_jkqgl_002 == null ? 0 : res.data.dp_jkqgl_002;//dp_jkqgl_001
|
this.value3 = res.data.dp_jkqgl_004 == null ? 0 : res.data.dp_jkqgl_004;//
|
})
|
}
|
},
|
created () { },
|
mounted () {
|
this.getAllDate()
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类、
|
|
.box {
|
// display: flex;
|
width: 100%;
|
height: 100%;
|
position: relative;
|
background: url('../../../assets/img/Popup.png') no-repeat center;
|
background-size: 100% 100%;
|
|
.content {
|
height: 96px;
|
width: 666px;
|
margin-left: 127px;
|
margin-top: 32px;
|
color: white;
|
|
position: absolute;
|
|
.titleOne {
|
height: 32px;
|
font-family: SourceHanSansCN;
|
font-style: normal;
|
font-weight: 500;
|
font-size: 32px;
|
line-height: 32px;
|
color: #ffffff;
|
width: 100%;
|
}
|
.titleTwo {
|
height: 30px;
|
margin-top: 22px;
|
font-family: jdZhengHT;
|
font-style: normal;
|
font-weight: 400;
|
font-size: 40px;
|
line-height: 30px;
|
width: 100%;
|
color: #ffffff;
|
|
text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.6);
|
}
|
label {
|
font-size: 20px;
|
font-family: SourceHanSansCN;
|
font-style: normal;
|
}
|
.box2 {
|
width: 2px;
|
padding-left: 16px;
|
padding-right: 16px;
|
height: 100%;
|
float: left;
|
.boximage {
|
width: 100%;
|
height: 100%;
|
background: url('../../../assets/img/Line 52 (Stroke).png') no-repeat
|
center;
|
background-size: 100% 100%;
|
}
|
}
|
.box1 {
|
width: 154px;
|
height: 96px;
|
float: left;
|
}
|
.box3 {
|
width: 224px;
|
height: 96px;
|
float: left;
|
}
|
.box5 {
|
width: 160px;
|
height: 96px;
|
float: left;
|
}
|
}
|
}
|
</style>
|
