<template>
|
<div class="container">
|
<div class="box" :style="style">
|
<div class="header">
|
<div class="timeBox">
|
<span class="hms">{{ time }}</span>
|
<span class="hms">{{ hms }}</span>
|
<span class="hms">{{ weekNum }}</span>
|
</div>
|
</div>
|
<el-row :gutter="10">
|
<el-col :span="7">
|
<div class="col-box">
|
<p class="col-box__title">
|
<span class="tit">综合数据分析</span><span class="eng-title">COMPREHENSIVE DATA ANALYSIS</span>
|
</p>
|
<div
|
class="col-box__content e-flex flex-wrap justify-between"
|
style="height: 232px"
|
v-loading="comprehensiveLoading"
|
>
|
<div class="item-box item1">
|
<div>
|
<span class="num">{{ comprehensive.sum }}</span
|
>个
|
</div>
|
<div>项目总数</div>
|
</div>
|
<div class="item-box item2">
|
<div>
|
<span class="num">{{ comprehensive.ongoing }}</span
|
>个
|
</div>
|
<div>进行中</div>
|
</div>
|
<div class="item-box item3">
|
<div>
|
<span class="num">{{ comprehensive.notBegin }}</span
|
>个
|
</div>
|
<div>未开工</div>
|
</div>
|
<div class="item-box item4">
|
<div>
|
<span class="num">{{ comprehensive.end }}</span
|
>个
|
</div>
|
<div>已完工</div>
|
</div>
|
<div class="item-box item5">
|
<div>
|
<span class="num">{{ comprehensive.close }}</span
|
>个
|
</div>
|
<div>已关闭</div>
|
</div>
|
<div class="item-box item6">
|
<div>
|
<span class="num">{{ comprehensive.overdue }}</span
|
>个
|
</div>
|
<div>已超期</div>
|
</div>
|
</div>
|
</div>
|
<div class="col-box">
|
<p class="col-box__title">
|
<span class="tit">计划投资数据分析</span><span class="eng-title">PLAN INVESTMENT DATA ANALYSIS</span>
|
</p>
|
<div v-loading="planLoading" class="col-box__content e-flex justify-between plan-box">
|
<swiper :options="swiperOptions">
|
<swiper-slide v-for="(item1, index1) in planArrList" :key="index1">
|
<div class="plan-flex-box">
|
<div v-for="(item2, index2) in item1" :key="index1 + '' + index2" class="content-wrap">
|
<div class="e-flex justify-between msg-wrap">
|
<div class="city-name" :class="'name' + (index1 * 4 + index2 + 1)">
|
<template v-if="index1 === 0 && index2 < 3">
|
<img v-if="index2 === 0" style="margin-right: 5px" src="@/assets/dataV/g1.png" alt="1" />
|
<img v-if="index2 === 1" style="margin-right: 5px" src="@/assets/dataV/g2.png" alt="2" />
|
<img v-if="index2 === 2" style="margin-right: 5px" src="@/assets/dataV/g3.png" alt="3" />
|
</template>
|
<span v-else class="city-rank">{{ index1 * 4 + index2 + 1 }}</span>
|
<span class="name-txt" :title="item2.orgName">{{ item2.orgName }}</span>
|
</div>
|
<div class="desc">
|
计划<span class="num" :title="item2.sumMoney">{{ item2.sumMoney }}</span
|
>万 已下达<span class="num end" :title="item2.curMoney">{{ item2.curMoney }}</span
|
>万
|
</div>
|
</div>
|
<DataProgress
|
:stroke-width="8"
|
:show-block="true"
|
:color="progressColor(index1, index2)"
|
:percentage="60"
|
/>
|
</div></div
|
></swiper-slide>
|
</swiper>
|
</div>
|
</div>
|
<div class="col-box">
|
<p class="col-box__title">
|
<span class="tit">历年项目数据分析</span
|
><span class="eng-title">PROJECT DATA ANALYSIS OVER THE YEARS</span>
|
</p>
|
<div class="col-box__content e-flex justify-between" style="height: 232px">
|
<ProjectYear />
|
</div>
|
</div>
|
</el-col>
|
<el-col :span="10" style="position: relative">
|
<div class="middle-top-box">
|
<div class="type-name">项目总数</div>
|
<div class="num-box">
|
<span v-for="(i, index) in numToStrArr(comprehensive.sum)" :key="index" :class="{ nothing: i === '' }">{{
|
i === '' ? '-' : i
|
}}</span>
|
</div>
|
<div class="type-name">已下达投资（万元）</div>
|
<div class="num-box">
|
<span
|
v-for="(i, index) in numToStrArr(comprehensive.curMoney)"
|
:key="index"
|
class="orange"
|
:class="{ nothing: i === '' }"
|
>{{ i === '' ? '-' : i }}</span
|
>
|
</div>
|
</div>
|
<div class="middle-box">
|
<MyMap />
|
</div>
|
<div class="middle-bottom-box">
|
<ProjectList />
|
</div>
|
</el-col>
|
<el-col :span="7">
|
<div class="col-box">
|
<p class="col-box__title">
|
<span class="tit">项目类型占比分析</span><span class="eng-title">ANALYSIS OF THE PROPORTION</span>
|
</p>
|
<div class="col-box__content" style="height: 231px">
|
<ProjectType />
|
</div>
|
</div>
|
<div class="col-box">
|
<p class="col-box__title">
|
<span class="tit">批次计划数据分析</span><span class="eng-title">BATCH PLAN DATA ANALYSIS</span>
|
</p>
|
<div class="col-box__content">
|
<BatchPlan />
|
</div>
|
</div>
|
<div class="col-box">
|
<p class="col-box__title">
|
<span class="tit">地市考核评分分析</span><span class="eng-title">CITY ASSESSMENT SCORE ANALYSIS</span>
|
</p>
|
<div class="col-box__content" style="height: 230px">
|
<CityScore />
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import MyMap from '@/views/dataV/components/map';
|
import { formatDate } from '@/utils/DateFormatter';
|
import ProjectYear from './components/projectYear.vue';
|
import ProjectType from './components/projectType.vue';
|
import BatchPlan from './components/batchPlan.vue';
|
import ProjectList from './components/projectList.vue';
|
import CityScore from './components/cityScore.vue';
|
import DataProgress from './components/dataProgress.vue';
|
|
import dataVRequest from '@/api/dataV.js';
|
|
export default {
|
name: 'static',
|
components: {
|
MyMap,
|
ProjectType,
|
ProjectYear,
|
BatchPlan,
|
ProjectList,
|
CityScore,
|
DataProgress,
|
},
|
data() {
|
return {
|
weekDays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
|
hms: '',
|
ymd: '',
|
time: '',
|
weekNum: '',
|
timer: null,
|
style: {
|
width: `1920px`,
|
height: `1080px`,
|
transform: 'scale(1) translate(-50%, -50%)', // 默认不缩放，垂直水平居中
|
},
|
// 轮播图配置
|
swiperOptions: {
|
autoplay: {
|
delay: 2000,
|
disableOnInteraction: false,
|
}, // 自动轮播
|
slidesPerView: 2,
|
loop: true,
|
},
|
comprehensiveLoading: true,
|
//综合数据分析模块数据
|
comprehensive: {
|
sum: 0, // 总数量
|
notBegin: 0, // 未开工
|
ongoing: 0, //进行中
|
end: 0, // 已完工
|
close: 0, //已关闭
|
overdue: 0, //已超期
|
sumMoney: 0, //计划总投资（暂时没用到）
|
curMoney: 0, //已下达总投资
|
},
|
planLoading: true,
|
// 计划投资数据分析列表
|
planList: [],
|
};
|
},
|
computed: {
|
// 序列化的以4个为一组的二维数据列表
|
planArrList() {
|
const newArr = [];
|
let cacheArr = [];
|
this.planList.forEach((item, index) => {
|
cacheArr.push(item);
|
if ((index + 1) % 4 === 0) {
|
newArr.push(cacheArr);
|
cacheArr = [];
|
}
|
});
|
// 如果最后缓存的数组中有值，表示可能最后一组不满4个未被添加
|
if (cacheArr.length) {
|
newArr.push(cacheArr);
|
}
|
|
return newArr;
|
},
|
// 进度条颜色的判断逻辑
|
progressColor() {
|
return (index1, index2) => {
|
if (index1 === 0 && index2 < 3) {
|
if (index2 === 0) {
|
return 'linear-gradient(270deg, #FFD15C 0%, rgba(200,172,36,0.4) 100%)';
|
}
|
if (index2 === 1) {
|
return 'linear-gradient(270deg, #5CE4FF 0%, rgba(36,145,200,0.4) 100%)';
|
}
|
return 'linear-gradient(270deg, #20E6A4 0%, rgba(32,230,164,0.34) 100%)';
|
} else {
|
return 'linear-gradient(270deg, #42A3FF 0%, rgba(30,30,30,0) 100%)';
|
}
|
};
|
},
|
},
|
methods: {
|
// 防抖
|
debounce(fn, t) {
|
const delay = t || 500;
|
let timer;
|
return function () {
|
const args = arguments;
|
if (timer) {
|
clearTimeout(timer);
|
}
|
const context = this;
|
timer = setTimeout(() => {
|
timer = null;
|
fn.apply(context, args);
|
}, delay);
|
};
|
},
|
// 获取缩放比例
|
getScale() {
|
const w = window.innerWidth / 1920;
|
const h = window.innerHeight / 1080;
|
return w < h ? w : h;
|
},
|
// 设置缩放比例
|
setScale() {
|
this.style.transform = `scale(${this.getScale()}) translate(-50%, -50%)`;
|
},
|
// 把数值序列化成一个数组，用于ui展示
|
numToStrArr(num) {
|
if (!Number(num)) {
|
return ['', '', '', '', '', '', ''];
|
}
|
let arr = String(num).split('');
|
let length = arr.length; // 把数据保存下来 在循环中此值会变
|
if (length < 7) {
|
for (let index = 0; index < 7 - length; index++) {
|
arr.unshift('');
|
}
|
}
|
|
return arr;
|
},
|
},
|
created() {
|
// 查询综合统计分析
|
dataVRequest.queryBoardTotalData().then((res) => {
|
this.comprehensive = res;
|
this.comprehensiveLoading = false;
|
});
|
// 查询计划投资数据分析
|
dataVRequest.queryPlanMoney().then((res) => {
|
this.planList = res;
|
this.planLoading = false;
|
});
|
},
|
mounted() {
|
this.setScale();
|
this.onresize = this.debounce(() => this.setScale(), 100);
|
window.addEventListener('resize', this.onresize);
|
this.weekNum = this.weekDays[new Date().getDay()];
|
const vm = this;
|
this.timer = function () {
|
const time = formatDate(new Date());
|
vm.time = time.split(' ')[0];
|
vm.hms = time.slice(11);
|
vm.ymd = time.slice(0, 11).replaceAll('-', '.');
|
vm.$forceUpdate();
|
};
|
|
setInterval(this.timer, 1000);
|
},
|
beforeDestroy() {
|
window.removeEventListener('resize', this.onresize);
|
},
|
destroyed() {
|
clearInterval(this.timer);
|
this.timer = null;
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
body {
|
margin: 0;
|
padding: 0;
|
}
|
* {
|
box-sizing: border-box;
|
}
|
.e-flex {
|
display: flex;
|
align-items: center;
|
}
|
.e-flex-col {
|
display: flex;
|
flex-direction: column;
|
}
|
.c-ad {
|
color: #adb1b4;
|
}
|
.c-08 {
|
color: #08d2fa;
|
}
|
.c-20 {
|
color: #20e6a4;
|
}
|
.c-ff {
|
color: #ffd15c;
|
}
|
.c-f9 {
|
color: #f99806;
|
}
|
.c-75 {
|
color: #75f9fc;
|
}
|
.c-7c {
|
color: #7cbfff;
|
}
|
.c-fff {
|
color: #fff;
|
}
|
.flex-1 {
|
flex-grow: 1;
|
}
|
.justify-center {
|
justify-content: center;
|
}
|
.justify-around {
|
justify-content: space-around;
|
}
|
.justify-start {
|
justify-content: flex-start;
|
}
|
.align-center {
|
align-items: center;
|
}
|
.align-end {
|
align-items: flex-end;
|
}
|
.justify-between {
|
justify-content: space-between;
|
}
|
.flex-wrap {
|
flex-wrap: wrap;
|
}
|
.container {
|
background-image: url('../../assets/dataV/bg.png');
|
background-repeat: no-repeat;
|
width: 100vw;
|
min-height: 100%;
|
max-height: 100vh;
|
overflow: hidden;
|
}
|
.box {
|
transform-origin: 0 0;
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
padding: 0 20px 20px;
|
overflow: hidden;
|
z-index: 10;
|
}
|
.header {
|
width: 100%;
|
height: 90px;
|
background-repeat: no-repeat;
|
background-image: url(../../assets/dataV/header.png);
|
background-size: 100% 100%;
|
}
|
.timeBox {
|
position: absolute;
|
top: 0;
|
left: 39px;
|
padding-top: 20px;
|
}
|
.hms {
|
letter-spacing: -1px;
|
font-size: 16px;
|
margin-right: 1px;
|
color: #fff;
|
}
|
.ymd {
|
font-size: 14px;
|
}
|
.col-box {
|
background-image: url(../../assets/dataV/boxBG.png);
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
height: 308px;
|
width: 100%;
|
margin-bottom: 20px;
|
overflow: hidden;
|
color: #fff;
|
.col-box__title {
|
font-size: 26px;
|
color: #fff;
|
font-weight: 600;
|
margin-top: 24px;
|
margin-left: 35px;
|
|
.tit {
|
text-shadow: 0 0 2px #fff;
|
}
|
.eng-title {
|
font-size: 12px;
|
margin-left: 10px;
|
vertical-align: middle;
|
color: #215a8e;
|
}
|
}
|
.item-box {
|
width: 156px;
|
height: 76px;
|
padding-left: 79px;
|
padding-top: 19px;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
border: 1px solid #2b2e34;
|
border-radius: 5px;
|
margin-top: 15px;
|
font-size: 12px;
|
color: #adb1b4;
|
-webkit-box-shadow: inset 0 5px 20px 1px #2b2e34;
|
box-shadow: inset 0 5px 20px 1px #2b2e34;
|
background-repeat: no-repeat;
|
background-size: 100% 100%;
|
line-height: 17px;
|
|
@for $i from 1 through 6 {
|
&.item#{$i} {
|
background-image: url('../../assets/dataV/comprehensive-ico#{$i}.png');
|
}
|
}
|
|
.num {
|
font-weight: bold;
|
font-size: 24px;
|
color: #fff;
|
}
|
}
|
// 投诉类型
|
.tslx-img {
|
width: 90px;
|
height: 220px;
|
}
|
.tslx {
|
width: 100%;
|
position: absolute;
|
top: 40%;
|
left: 50%;
|
z-index: 1;
|
transform: translate(-50%);
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
}
|
}
|
.rela {
|
position: relative;
|
}
|
.level-box {
|
width: 100%;
|
img {
|
width: 100%;
|
height: 160px;
|
}
|
.level {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%);
|
font-size: 18px;
|
color: #75f9fc;
|
}
|
}
|
|
.f-18 {
|
font-size: 18px;
|
}
|
.f-16 {
|
font-size: 16px;
|
}
|
.f-14 {
|
font-size: 14px;
|
}
|
.f-20 {
|
font-size: 20px;
|
}
|
.f-26 {
|
font-size: 26px;
|
}
|
.f-12 {
|
font-size: 12px;
|
}
|
.middle-top-box {
|
width: 300px;
|
height: 125px;
|
position: absolute;
|
left: 35px;
|
top: 10px;
|
z-index: 99;
|
color: #fff;
|
|
.type-name {
|
color: #fff;
|
opacity: 0.74;
|
font-size: 14px;
|
line-height: 20px;
|
}
|
|
.num-box {
|
margin: 5px 0 20px;
|
display: flex;
|
align-items: center;
|
span {
|
width: 20px;
|
height: 34px;
|
line-height: 34px;
|
margin-right: 5px;
|
font-size: 24px;
|
border: 1px solid #00a0ff;
|
border-radius: 2px;
|
text-align: center;
|
color: #62d0ff;
|
|
&.orange {
|
color: #ffc303;
|
}
|
|
&.nothing {
|
color: rgba(255, 255, 255, 0.2);
|
}
|
}
|
}
|
}
|
.middle-box {
|
width: 100%;
|
height: 672px;
|
margin-bottom: 20px;
|
}
|
.middle-bottom-box {
|
width: 100%;
|
height: 275px;
|
overflow: hidden;
|
}
|
.col-box__content {
|
background-color: rgba(7, 19, 72, 0.5);
|
padding: 20px;
|
margin-top: 20px;
|
}
|
|
.plan-box {
|
height: 231px;
|
padding: 0 10px;
|
overflow: hidden;
|
}
|
|
.plan-flex-box {
|
box-sizing: border-box;
|
width: 260px;
|
height: 204px;
|
padding: 0 10px;
|
position: relative;
|
|
&::after {
|
content: '';
|
width: 0;
|
height: 204px;
|
border-right: 1px dashed #0e9cff;
|
position: absolute;
|
right: 0;
|
top: 50%;
|
transform: translateY(-50%);
|
}
|
|
.content-wrap {
|
margin-bottom: 7px;
|
}
|
|
.msg-wrap {
|
margin-bottom: 9px;
|
line-height: 24px;
|
}
|
|
.city-name {
|
display: flex;
|
align-items: center;
|
font-size: 16px;
|
color: #fff;
|
.name-txt {
|
max-width: 70px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
&.name1 {
|
color: #ffd15c;
|
}
|
|
&.name2 {
|
color: #07d1fa;
|
}
|
|
&.name3 {
|
color: #20e6a4;
|
}
|
}
|
|
.city-rank {
|
font-size: 16px;
|
font-weight: bold;
|
padding: 0 5px;
|
}
|
|
.desc {
|
font-size: 12px;
|
color: #c6d1db;
|
display: flex;
|
align-items: center;
|
white-space: nowrap;
|
|
.num {
|
padding: 0 2px;
|
font-size: 16px;
|
color: #fff;
|
max-width: 30px;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
|
&.end {
|
color: #e6c364;
|
}
|
}
|
}
|
}
|
.myd {
|
width: 28%;
|
height: 200px;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
border-radius: 6px;
|
border: 1px solid #4192d9;
|
box-shadow: inset 0 5px 20px 1px #2b2e34;
|
img {
|
margin-top: -30px;
|
width: 60px;
|
height: 60px;
|
}
|
}
|
|
::v-deep .el-loading-mask {
|
background-color: rgba(8, 21, 69, 0.9);
|
}
|
</style>
|
