<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-08-18 16:18:17
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-04-25 10:47:03
|
* @FilePath: \web\bigScreen\src\views\home\index_02.vue
|
* @Description: 小区-栋-层-房屋
|
*
|
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
|
-->
|
|
<template>
|
<div class="pageContainer">
|
<div class="left-container">
|
<div class="one">
|
<div class="title-box">
|
<div class="title">连续超汛水库排行榜</div>
|
<div class="title-sub common-text">{{ getCurrentDate }}</div>
|
</div>
|
<div class="content-box">
|
<div class="scroll-table">
|
<div class="scroll-table-head flex">
|
<div style="flex: 2">排名</div>
|
<div style="flex: 3">名称</div>
|
<div style="flex: 3">水库规模</div>
|
<div style="flex: 4">水位/超汛限M</div>
|
<div style="flex: 3">超汛限天数</div>
|
</div>
|
<vue-seamless-scroll
|
:class-option="classOption0"
|
:data="listData0"
|
class="scroll-table-body"
|
style="height: 204px"
|
>
|
<ul class="item">
|
<li class="scroll-item flex" v-for="(item, index) in listData0" :key="index">
|
<div style="flex: 2" class="color-num">TOP{{ index + 1 }}</div>
|
<div style="flex: 3">{{ item.res_nm }}</div>
|
<div style="flex: 3">{{ item.eng_scal }}</div>
|
<div style="flex: 4">
|
<span>{{ item.rz }}/{{ item.over_z }}</span>
|
</div>
|
<div style="flex: 3">{{ item.consecutive_cnt }}</div>
|
</li>
|
</ul>
|
</vue-seamless-scroll>
|
</div>
|
</div>
|
</div>
|
|
<div class="two">
|
<div class="title-box">
|
<div class="title">每日8时超汛限</div>
|
</div>
|
<div class="content-box chart-box">
|
<!--echart柱状图-->
|
<day-eight-bar ref="dayEightBar"></day-eight-bar>
|
<!--滚动栏-->
|
<div class="scroll-table">
|
<div class="scroll-table-head flex">
|
<div>名称</div>
|
<div>行政区</div>
|
<div>工程规模</div>
|
<div>水位</div>
|
<div>超汛限M</div>
|
</div>
|
<vue-seamless-scroll
|
:class-option="classOption"
|
:data="listData"
|
class="scroll-table-body"
|
>
|
<ul class="item">
|
<li class="scroll-item flex" v-for="(item, index) in listData" :key="index">
|
<div class>{{ item.res_nm }}</div>
|
<div class>{{ item.city_nm }}</div>
|
<div class>{{ item.eng_scal }}</div>
|
<div class="flex justify-center">
|
<span>{{ item.eight_rz }}</span>
|
<img class="type-img" v-if="item.over_z > 0" src="images/go-up.png" alt />
|
<img class="type-img" v-else src="images/go-down.png" alt />
|
</div>
|
<div class>{{ item.over_z }}</div>
|
</li>
|
</ul>
|
</vue-seamless-scroll>
|
</div>
|
</div>
|
</div>
|
|
<div class="three">
|
<div class="title-box">
|
<div class="title">水库超汛限趋势</div>
|
</div>
|
<div class="content-box">
|
<reservoir-flood-line ref="ReservoirFloodLine"></reservoir-flood-line>
|
</div>
|
</div>
|
</div>
|
|
<div class="right-container">
|
<div class="one">
|
<div class="title-box">
|
<div class="title">水库水情快报</div>
|
</div>
|
<div class="content-box all-text-box">
|
<div class="all-text common-text">
|
3月30日8时,全首有39座水库超汛限水位，其中大型0座、中型1座、小型38座。
|
与昨日比较，总数增加1座(大型增加0座、中型增加O座、小型增加1座),
|
减少座数较多的市有宜昌市,孝感市,恩施州分别减少1座,1座,1座。
|
新增座券较多的市州有襄阳市,随州市分别新增3座,
|
</div>
|
<!-- <div class="common-text more-text">详情>></div> -->
|
</div>
|
</div>
|
|
<div class="two">
|
<div class="title-box">
|
<div class="title">图片监测</div>
|
</div>
|
<div class="content-box video-box">
|
<el-image
|
fit="fill"
|
:src="'https://img2.baidu.com/it/u=4176068029,1540480464&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=337'"
|
:preview-src-list="['https://img2.baidu.com/it/u=4176068029,1540480464&fm=253&fmt=auto&app=120&f=JPEG?w=600&h=337']"
|
></el-image>
|
</div>
|
</div>
|
|
<div class="three">
|
<div class="title-box">
|
<div class="title">责任履职不到位</div>
|
</div>
|
<div class="content-box">
|
<div class="scroll-table">
|
<div class="scroll-table-head flex">
|
<div>行政区</div>
|
<div>名称</div>
|
<div>巡查责任人</div>
|
<div>抽查结果</div>
|
</div>
|
<vue-seamless-scroll
|
:class-option="classOption"
|
:data="listData1"
|
class="scroll-table-body"
|
>
|
<ul class="item">
|
<li class="scroll-item flex" v-for="(item, index) in listData1" :key="index">
|
<div class>{{ item.area }}</div>
|
<div class>{{ item.name }}</div>
|
<div class>{{ item.man }}</div>
|
<div class="flex justify-center">
|
<span>{{ item.result }}</span>
|
</div>
|
</li>
|
</ul>
|
</vue-seamless-scroll>
|
</div>
|
</div>
|
</div>
|
|
<div class="four">
|
<div class="title-box">
|
<div class="title">超汛水库分布</div>
|
</div>
|
<div class="content-box">
|
<reservoir-count-bar ref="ReservoirCountBar"></reservoir-count-bar>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
const scaleData = [
|
{
|
type: 1,
|
text: "大（1）型"
|
},
|
{
|
type: 2,
|
text: "大（2）型"
|
},
|
{
|
type: 3,
|
text: "中型"
|
},
|
{
|
type: 4,
|
text: "小（1）型"
|
},
|
{
|
type: 5,
|
text: "小（2）型"
|
},
|
{
|
type: 9,
|
text: "其他"
|
}
|
];
|
|
import dayEightBar from "./components/dayEightBar.vue";
|
import reservoirCountBar from "./components/reservoirCountBar.vue";
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
import reservoirFloodLine from "./components/reservoirFloodLine.vue";
|
import { dayEightOverLimitBar } from "@/api/home/home";
|
import {
|
getEightTimeBar,
|
getEightTimeDetail,
|
getDayOverZ,
|
getOverZCity,
|
getOverZCont
|
} from "@/api/sk/sk";
|
|
export default {
|
components: {
|
vueSeamlessScroll,
|
dayEightBar,
|
reservoirFloodLine,
|
reservoirCountBar
|
},
|
|
data() {
|
return {
|
classOption0: {
|
step: 0.2,
|
limitMoveNum: 5
|
},
|
listData0: [],
|
listData: [],
|
classOption: {
|
step: 0.2,
|
limitMoveNum: 4
|
},
|
listData1: [
|
{
|
area: "武汉市",
|
name: "水位超汛限",
|
man: "李艺伟1",
|
result: "不合格"
|
},
|
{
|
area: "武汉市",
|
name: "水位超汛限",
|
man: "李艺伟2",
|
result: "不合格"
|
},
|
{
|
area: "武汉市",
|
name: "水位超汛限",
|
man: "李艺伟3",
|
result: "不合格"
|
},
|
{
|
area: "武汉市",
|
name: "水位超汛限",
|
man: "李艺伟4",
|
result: "不合格"
|
}
|
]
|
};
|
},
|
|
created() {
|
// 每日8时超汛限明细
|
this.getEightTimeDetail();
|
//获取每日8时超汛限柱状图
|
this.getEightTimeBar();
|
this.getDayOverZ();
|
this.getOverZCity();
|
this.getOverZCont();
|
},
|
|
computed: {
|
getSKScal() {
|
return type => {
|
return type ? scaleData.find(item => type == item.type).text : "";
|
};
|
},
|
|
getCurrentDate() {
|
var timestamp = Date.parse(new Date());
|
var serverDate = new Date(timestamp);
|
var tomorrowM = serverDate.getMonth() + 1;
|
var tomorrowD = serverDate.getDate();
|
return tomorrowM + "-" + tomorrowD;
|
}
|
},
|
|
mounted() {},
|
|
methods: {
|
getEightTimeDetail() {
|
getEightTimeDetail().then(res => {
|
this.listData = res.data.resultList;
|
});
|
},
|
|
//获取每日8时超汛限柱状图
|
//获取每日8时超汛限柱状图
|
getEightTimeBar() {
|
getEightTimeBar({ pcode: "420000000000" }).then(res => {
|
let resultList = res.data.resultList;
|
|
let xAxisData = [],
|
seriesData_01 = [],
|
seriesData_02 = [],
|
seriesData_03 = [],
|
sum = 0;
|
|
resultList.length > 0 &&
|
resultList.forEach(item => {
|
xAxisData.push(item.ad_nm || "");
|
|
let bigNum = Number(item.bigone || 0) + Number(item.bigtwo || 0);
|
|
seriesData_01.push(bigNum);
|
|
seriesData_02.push(Number(item.mid || 0));
|
|
let smallNum =
|
Number(item.smallone || 0) + Number(item.smalltwo || 0);
|
|
seriesData_03.push(smallNum);
|
|
sum = sum + bigNum + Number(item.mid || 0) + smallNum;
|
});
|
|
this.$refs.dayEightBar.initEcharts({
|
xAxisData,
|
seriesData_01,
|
seriesData_02,
|
seriesData_03,
|
sum
|
});
|
});
|
},
|
|
getDayOverZ() {
|
getDayOverZ().then(res => {
|
const resultList = res.data.resultList;
|
const xAxisData = this.getRunProcessingData(resultList, [
|
"大（2）型",
|
"大（1）型",
|
"中型",
|
"小（1）型",
|
"小（2）型"
|
]).map(item => {
|
return this.getTime(item.tm);
|
});
|
const seriesData_01 = this.getRunProcessingData(resultList, [
|
"大（2）型",
|
"大（1）型",
|
"中型",
|
"小（1）型",
|
"小（2）型"
|
]).map(item => item.cnt);
|
const seriesData_02 = this.getRunProcessingData(resultList, [
|
"小（1）型",
|
"小（2）型"
|
]).map(item => item.cnt);
|
const seriesData_03 = this.getRunProcessingData(resultList, [
|
"中型"
|
]).map(item => item.cnt);
|
const seriesData_04 = this.getRunProcessingData(resultList, [
|
"大（2）型",
|
"大（1）型"
|
]).map(item => item.cnt);
|
|
this.$refs.ReservoirFloodLine.initEcharts({
|
xAxisData,
|
seriesData_01,
|
seriesData_02,
|
seriesData_03,
|
seriesData_04
|
});
|
});
|
},
|
|
getOverZCity() {
|
getOverZCity().then(res => {
|
let xAxisData = [],
|
seriesData = [];
|
res.data.resultList.forEach(item => {
|
xAxisData.push(item.ad_nm);
|
seriesData.push(item.res_cnt);
|
});
|
|
this.$refs.ReservoirCountBar.initEcharts({
|
xAxisData,
|
seriesData
|
});
|
});
|
},
|
|
getRunProcessingData(data, condition) {
|
return data.reduce((pre, cur) => {
|
if (condition.some(item => item == cur.eng_scal)) {
|
const flag =
|
pre.length === 0 ? false : pre.some(item => item.tm == cur.tm);
|
if (flag) {
|
pre = pre.map(item => {
|
if (item.tm == cur.tm) {
|
let obj = { ...item };
|
obj.cnt = obj.cnt + cur.cnt;
|
return obj;
|
} else {
|
return item;
|
}
|
});
|
} else {
|
pre.push(cur);
|
}
|
return pre;
|
} else {
|
return pre;
|
}
|
}, []);
|
},
|
|
getOverZCont() {
|
getOverZCont().then(res => {
|
this.listData0 = res.data.resultList.sort(
|
(a, b) => b.consecutive_cnt - a.consecutive_cnt
|
);
|
});
|
},
|
|
getTime(data) {
|
var date = new Date(data);
|
// var Y = date.getFullYear() + '-'
|
var M =
|
(date.getMonth() + 1 < 10
|
? "0" + (date.getMonth() + 1)
|
: date.getMonth() + 1) + "-";
|
var D =
|
(date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
|
var h =
|
(date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
|
var m =
|
date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
// + ':'
|
// var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
|
return M + D;
|
}
|
},
|
|
destroyed() {}
|
};
|
</script>
|
<style lang="scss" scoped>
|
.pageContainer {
|
.left-container {
|
left: 0;
|
|
.one {
|
height: 290px;
|
}
|
|
.two {
|
height: 454px;
|
}
|
|
.three {
|
flex: 1;
|
}
|
}
|
|
.right-container {
|
right: 0;
|
|
.one {
|
height: 244px;
|
}
|
|
.two {
|
height: 255px;
|
}
|
|
.three {
|
height: 246px;
|
}
|
|
.four {
|
flex: 1;
|
}
|
}
|
|
.color-num {
|
// color: #EDB058;
|
font-size: 16px !important;
|
font-family: Roboto-Bold;
|
background: linear-gradient(to right, RGBA(228, 134, 41, 1) 60%, #fff 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
}
|
}
|
</style>
|
