<template>
|
<div class="data">
|
<div class="title">
|
<span>数据池</span>
|
<img src="../../../assets/img/zonlan (9).png" alt="" />
|
</div>
|
<div class="data_box">
|
<div class="content_box">
|
<div class="content">
|
<p class="data_volume">
|
<span>{{ dataVolume.ZSJL }}</span
|
>万
|
</p>
|
|
<p class="content_title">数据统筹量</p>
|
</div>
|
<div class="content">
|
<p class="data_volume">
|
<span>{{ dataVolume.fjg }}</span
|
>G
|
</p>
|
|
<p class="content_title">非结构性数据大小</p>
|
</div>
|
<div class="content" @click="handleClick3()">
|
<p class="data_volume">
|
<span>{{ dataVolume.sjxsum }}</span
|
>种
|
</p>
|
|
<p class="content_title">数据种类</p>
|
</div>
|
<div class="content" @click="handleClick4()">
|
<p class="data_volume">
|
<span>{{ dataVolume.bmsum }}</span
|
>个
|
</p>
|
|
<p class="content_title">统筹部门</p>
|
</div>
|
<div class="content" @click="handleClick5()">
|
<p class="data_volume">
|
<span>{{ dataVolume.selGxsjzlCouLength }}</span
|
>种
|
</p>
|
|
<p class="content_title">共享数据种类</p>
|
</div>
|
<div class="content" @click="handleClick6()">
|
<p class="data_volume">
|
<span>{{ dataVolume.selGxbmslCouLength }}</span
|
>个
|
</p>
|
|
<p class="content_title">共享部门数量</p>
|
</div>
|
<div class="content">
|
<p class="data_volume">
|
<span>{{ dataVolume.spzs }}</span
|
>路
|
</p>
|
|
<p class="content_title">监控数量</p>
|
</div>
|
<div class="content">
|
<p class="data_volume">
|
<span>{{ dataVolume.spzhbmsl }}</span
|
>个
|
</p>
|
<p class="content_title">整合监控部门</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import {
|
constructionData,
|
selGxbmslCouData,
|
selGxsjzlCouData,
|
selGxsjzlCou,
|
selBmslList,
|
selSjzlList,
|
selGxbmslCou,
|
} from "../../../utils/api.js";
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
//这里存放数据
|
return {
|
number: 510184627,
|
timer: null,
|
param: {
|
TYPE: 1,
|
},
|
param1: {
|
TYPE: 5,
|
},
|
dataVolume: {
|
ZSJL: "",
|
fjg: "",
|
sjxsum: "",
|
bmsum: "",
|
selGxbmslCouLength: "",
|
selGxsjzlCouLength: "",
|
spzs: "",
|
spzhbmsl: "",
|
},
|
|
tableData: [],
|
tableTD: [],
|
value1: null,
|
value2: null,
|
value3: null,
|
value4: null,
|
value5: null,
|
value6: null,
|
tableone: false,
|
};
|
},
|
|
//方法集合
|
methods: {
|
getTableList() {},
|
handleClick1() {
|
this.isShow = true;
|
let arr = [
|
{
|
date: "2016-05-02",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1518 弄",
|
},
|
{
|
date: "2016-05-04",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1518 弄",
|
},
|
{
|
date: "2016-05-01",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1518 弄",
|
},
|
{
|
date: "2016-05-03",
|
name: "王小虎",
|
address: "上海市普陀区金沙江路 1518 弄",
|
},
|
];
|
this.$emit("dataState", this.isShow, "1", arr);
|
},
|
handleClick2() {
|
this.isShow = true;
|
this.$emit("dataState", this.isShow, "2");
|
},
|
handleClick3() {
|
this.isShow = true;
|
this.$emit("dataState", this.isShow, "3", this.value3);
|
},
|
handleClick4() {
|
this.isShow = true;
|
this.$emit("dataState", this.isShow, "4", this.value2);
|
},
|
handleClick5() {
|
this.isShow = true;
|
this.$emit("dataState", this.isShow, "5", this.value1);
|
},
|
handleClick6() {
|
this.isShow = true;
|
this.$emit("dataState", this.isShow, "6", this.value4);
|
},
|
handleClick7() {
|
this.isShow = true;
|
this.$emit("dataState", this.isShow, "7");
|
},
|
handleClick8() {
|
this.isShow = true;
|
this.$emit("dataState", this.isShow, "8");
|
},
|
async construction() {
|
let { data: dt } = await constructionData(this.param);
|
let { data: dt1 } = await constructionData(this.param1);
|
let { data: dt2 } = await selGxbmslCouData();
|
let { data: dt3 } = await selGxsjzlCouData();
|
let { data: dtone } = await selGxsjzlCou();
|
let { data: dtwo } = await selBmslList();
|
let { data: dthree } = await selSjzlList();
|
let { data: dtfour } = await selGxbmslCou();
|
this.value1 = dtone.varList;
|
this.value2 = dtwo.varList;
|
this.value3 = dthree.varList;
|
this.value4 = dtfour.varList;
|
if (dt.errno !== 200) {
|
return this.$message.error(dt.errmsg);
|
}
|
if (dt1.errno !== 200) {
|
return this.$message.error(dt1.errmsg);
|
}
|
this.dataVolume.ZSJL = dt1.pd.ZSJL;
|
this.dataVolume.ZSJL = this.dataVolume.ZSJL.substr(
|
0,
|
this.dataVolume.ZSJL.length - 4
|
);
|
this.dataVolume.fjg = dt.pd.fjg;
|
this.dataVolume.fjg = this.dataVolume.fjg.substr(
|
0,
|
this.dataVolume.fjg.length - 1
|
);
|
this.dataVolume.sjxsum = dt.pd.sjxsum;
|
this.dataVolume.bmsum = dt.pd.bmsum;
|
this.dataVolume.spzs = dt.pd.spzs;
|
this.dataVolume.spzhbmsl = dt.pd.spzhbmsl;
|
this.dataVolume.selGxbmslCouLength = dt2.varList.length;
|
this.dataVolume.selGxsjzlCouLength = dt3.varList.length;
|
},
|
},
|
mounted() {},
|
|
beforeMount() {},
|
created() {
|
this.construction();
|
this.getTableList();
|
},
|
beforeDestroy() {},
|
};
|
</script>
|
<style lang="less" scoped>
|
//@import url(); 引入公共css类
|
.data {
|
position: relative;
|
overflow: hidden;
|
width: 100%;
|
height: 50%;
|
box-sizing: border-box;
|
// padding-top: 40px;
|
background: rgba(8, 32, 58, 0.7);
|
.title {
|
margin-top: 20px;
|
width: 100%;
|
position: relative;
|
text-align: center;
|
img {
|
width: 2100px;
|
}
|
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%);
|
}
|
}
|
.data_box {
|
// margin-top: 0px;
|
|
.content_box {
|
margin-top: 50px;
|
padding-left: 95px;
|
padding-right: 95px;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
.content {
|
// background: linear-gradient(
|
// 0deg,
|
// rgba(0, 28, 73, 0.6),
|
// rgba(56, 124, 194, 0.6)
|
// );
|
background: url("../../../assets/img/content.png") no-repeat center;
|
// border-radius: 10px;
|
|
width: 1008px;
|
height: 500px;
|
position: relative;
|
// margin-right: 326px;
|
margin-bottom: 70px;
|
|
.data_volume {
|
font-size: 68px;
|
color: #fff;
|
white-space: nowrap;
|
height: 300px;
|
line-height: 300px;
|
text-align: center;
|
|
span {
|
font-size: 100px;
|
font-weight: bold;
|
color: #ffba00;
|
line-height: 182px;
|
background: linear-gradient(
|
0deg,
|
#ffaa15 0.6103515625%,
|
#fff600 100%
|
);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
}
|
.content_title {
|
white-space: nowrap;
|
font-size: 68px;
|
font-weight: 400;
|
color: #ffffff;
|
height: 200px;
|
line-height: 200px;
|
text-align: center;
|
}
|
}
|
|
.content:nth-child(n + 5) {
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
|
@media only screen and (max-width: 2560px) {
|
.data {
|
height: auto;
|
overflow: visible;
|
background: transparent;
|
.title {
|
margin-top: 200px;
|
img {
|
width: 100%;
|
}
|
}
|
.data_box {
|
.content_box {
|
.content {
|
width: calc(1008px * 1.2);
|
height: calc(500px * 1.2);
|
|
// margin-right: calc(326px * 2);
|
// margin-bottom: calc(270px * 2);
|
.data_volume {
|
height: calc(300px);
|
line-height: 400px;
|
}
|
.content_title {
|
height: calc(200px);
|
line-height: 200px;
|
}
|
}
|
.content:nth-child(n + 5) {
|
margin-bottom: 70px;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
<style lang="less"></style>
|
