<template>
|
<div class="left1">
|
<div class="title">
|
<span>数据库</span>
|
<img src="../../../assets/img/zonlan (9).png" alt="" />
|
</div>
|
<p class="message">六大基础库建设情况</p>
|
<div class="container_box">
|
<div class="container" v-for="(val, i) in list" :key="i">
|
<div class="container_top">{{ val.DIC_NAME }}</div>
|
<div class="container_bottom">
|
<div class="flex_box" @click="getshowindex(val)">
|
<span>维度数：</span>
|
<span>{{ val.WDS }}</span>
|
</div>
|
<div class="flex_box">
|
<span>数据量：</span>
|
<span>{{ val.value }}</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
constructionData,
|
constructionData1,
|
selJck,
|
} from "../../../utils/api.js";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
//这里存放数据
|
return {
|
isShow: true,
|
param: {
|
TYPE: 5,
|
},
|
param1: {
|
SJMH_DIC_ID: 13,
|
},
|
param2: {
|
SJMH_DIC_ID: 14,
|
},
|
param3: {
|
SJMH_DIC_ID: 21,
|
},
|
param4: {
|
SJMH_DIC_ID: 22,
|
},
|
param5: {
|
SJMH_DIC_ID: 23,
|
},
|
param6: {
|
SJMH_DIC_ID: 94,
|
},
|
list: [],
|
};
|
},
|
//方法集合
|
methods: {
|
async getshowindex(response) {
|
var name = response.DIC_NAME;
|
|
let { data: dt } = await selJck(this.param1);
|
let { data: dt1 } = await selJck(this.param2);
|
let { data: dt2 } = await selJck(this.param3);
|
let { data: dt3 } = await selJck(this.param4);
|
let { data: dt4 } = await selJck(this.param5);
|
let { data: dt5 } = await selJck(this.param6);
|
|
if (name == "人口库") {
|
this.$emit("dataState", this.isShow, "a1", dt.varList);
|
} else if (name == "法人单位库") {
|
this.$emit("dataState", this.isShow, "a1", dt1.varList);
|
} else if (name == "空间地理库") {
|
this.$emit("dataState", this.isShow, "a1", dt2.varList);
|
} else if (name == "公共信用库") {
|
this.$emit("dataState", this.isShow, "a1", dt3.varList);
|
} else if (name == "电子证照库") {
|
this.$emit("dataState", this.isShow, "a1", dt4.varList);
|
} else if (name == "宏观经济库") {
|
this.$emit("dataState", this.isShow, "a1", dt5.varList);
|
}
|
},
|
async construction() {
|
let { data: dt } = await constructionData(this.param);
|
let { data: dt1 } = await constructionData1();
|
if (dt.errno !== 200) {
|
return this.$message.error(dt.errmsg);
|
}
|
if (dt1.errno !== 200) {
|
return this.$message.error(dt1.errmsg);
|
}
|
dt1.varList.forEach((e) => {
|
var str = e.DIC_NAME;
|
var reg = new RegExp("基础信息");
|
var newstr = str.replace(reg, "");
|
|
let obj = {
|
DIC_NAME: newstr,
|
WDS: e.WDS,
|
value: "",
|
};
|
|
this.list.push(obj);
|
});
|
this.list.forEach((e) => {
|
switch (e.DIC_NAME) {
|
case "人口库":
|
e.value = dt.pd.RKK;
|
|
break;
|
case "法人单位库":
|
e.value = dt.pd.FRK;
|
break;
|
case "空间地理库":
|
e.value = dt.pd.KJDLK;
|
break;
|
case "公共信用库":
|
e.value = dt.pd.SHXYK;
|
break;
|
case "电子证照库":
|
e.value = dt.pd.DZZZK;
|
break;
|
case "宏观经济库":
|
e.value = dt.pd.HGJJK;
|
|
break;
|
}
|
});
|
},
|
},
|
mounted() {
|
// const { data: dt } = this.$http.post(url, this.param);
|
// console.log(dt);
|
},
|
created() {
|
this.construction();
|
},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.left1 {
|
overflow: hidden;
|
width: 100%;
|
height: 50%;
|
// padding-top: 40px;
|
box-sizing: border-box;
|
background: rgba(8, 32, 58, 0.7);
|
.title {
|
width: 100%;
|
position: relative;
|
img {
|
width: 100%;
|
}
|
span {
|
font-size: 78px;
|
font-weight: 400;
|
color: #ffe86b;
|
background: linear-gradient(0deg, #bce7ff 0%, #69efff 98.6572265625%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
position: absolute;
|
left: 50%;
|
top: 0;
|
transform: translateX(-50%);
|
}
|
}
|
.message {
|
font-size: 60px;
|
font-weight: 400;
|
color: #ffffff;
|
text-align: center;
|
padding-top: 65px;
|
}
|
.container_box {
|
padding-top: 50px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
.container {
|
width: 648px;
|
height: 406px;
|
background: url("../../../assets/img/组 10507.png") no-repeat center;
|
background-size: 100% 100%;
|
padding: 50px;
|
box-sizing: border-box;
|
.container_top {
|
font-size: 47px;
|
font-weight: bold;
|
color: #ffffff;
|
}
|
.container_bottom {
|
padding-top: 90px;
|
.flex_box {
|
display: flex;
|
justify-content: space-between;
|
span {
|
font-size: 41px;
|
font-weight: 400;
|
color: #ffffff;
|
}
|
span:nth-child(2) {
|
color: #fedc85;
|
}
|
}
|
.flex_box:nth-child(2) {
|
padding-top: 40px;
|
}
|
}
|
}
|
.container:nth-child(1) {
|
margin-bottom: 100px;
|
}
|
.container:nth-child(2) {
|
margin-bottom: 100px;
|
}
|
.container:nth-child(3) {
|
margin-bottom: 100px;
|
background: url("../../../assets/img/组 10509.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
.container:nth-child(6) {
|
background: url("../../../assets/img/组 10509.png") no-repeat center;
|
background-size: 100% 100%;
|
}
|
}
|
}
|
@media only screen and (max-width: 2560px) {
|
.left1 {
|
overflow: visible;
|
width: 93%;
|
margin-top: 7%;
|
background: transparent;
|
.container_box {
|
.container {
|
width: 31%;
|
height: 812px;
|
padding: 90px;
|
.container_bottom {
|
padding-top: 180px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
