706 lines
15 KiB
Vue
706 lines
15 KiB
Vue
<template>
|
||
<view class="emergencyDisposal">
|
||
<headers class="fixedheader" :showBack="true">
|
||
<view class="headerName">
|
||
{{this.getGoId == 2 ? '救援隐患审批' :'应急处置'}}
|
||
</view>
|
||
</headers>
|
||
<view class="problemOverview" :style="{ 'margin-top': (statusBarHeight+52) + 'px' }">
|
||
<view class="overFlex">
|
||
<view class="overLeft">{{this.getGoId == 2 ? '审批分析' :'处置分析'}}</view>
|
||
<view class="overRight">{{nowTime}}</view>
|
||
</view>
|
||
<view class="problemData">
|
||
<view class="dataBox1 dataStyle">
|
||
<!-- <view class="day" v-if="statisticsValue.totalNumDifferYesterday<0">
|
||
较昨日{{statisticsValue.totalNumDifferYesterday||0}}</view>
|
||
<view class="day" v-else>较昨日+{{statisticsValue.totalNumDifferYesterday||0}}</view> -->
|
||
<view class="num">{{statisticsValue.totalNum}}</view>
|
||
<view class="text">总数</view>
|
||
</view>
|
||
<view class="dataBox2 dataStyle" v-if="this.getGoId != 2">
|
||
<!-- <view class="day" v-if="statisticsValue.oseNumDifferYesterday<0">
|
||
较昨日{{statisticsValue.oseNumDifferYesterday}}</view>
|
||
<view class="day" v-else>
|
||
较昨日+{{statisticsValue.oseNumDifferYesterday||0}}</view> -->
|
||
<view class="num">{{statisticsValue.notRescue}}</view>
|
||
<view class="text">待救援</view>
|
||
</view>
|
||
<view class="dataBox4 dataStyle">
|
||
<!-- <view class="day" v-if="statisticsValue.notCloseNumDifferYesterday<0">
|
||
较昨日{{statisticsValue.notCloseNumDifferYesterday||0}}</view>
|
||
<view class="day" v-else>较昨日+{{statisticsValue.notCloseNumDifferYesterday||0}}</view> -->
|
||
<view class="num">{{statisticsValue.inRescue}}</view>
|
||
<view class="text">救援中</view>
|
||
</view>
|
||
<view class="dataBox3 dataStyle">
|
||
<!-- <view class="day" v-if="statisticsValue.closeNumDifferYesterday<0">
|
||
较昨日{{statisticsValue.closeNumDifferYesterday||0}}</view>
|
||
<view class="day" v-else>较昨日+{{statisticsValue.closeNumDifferYesterday||0}}</view> -->
|
||
<view class="num">{{statisticsValue.rescued}}</view>
|
||
<view class="text">已完成</view>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="overDataList">
|
||
待整改
|
||
<span style="margin-left: 35px;">{{statisticsValue.rectificationNum}}</span>
|
||
待复查
|
||
<span style="margin-left: 35px;">{{statisticsValue.reviewNum}}</span>
|
||
待核验
|
||
<span style="margin-left: 35px;">{{statisticsValue.verificationNum}}</span>
|
||
</view> -->
|
||
<!-- <view class="overData">
|
||
<view>待整改<span style="margin-left: 30px;">{{statisticsValue.rectificationNum}}</span></view>
|
||
<view>待复查<span style="margin-left: 30px;">{{statisticsValue.reviewNum}}</span></view>
|
||
<view>待核验<span style="margin-left: 30px;">{{statisticsValue.verificationNum}}</span></view>
|
||
</view> -->
|
||
</view>
|
||
<view class="commonModules">
|
||
<view class="overEmergency">处置台账</view>
|
||
<scroll-view style="height: 100%;" scroll-y @scrolltoupper="upper" @scrolltolower="lower" @scroll="scroll">
|
||
<view class="modulesList">
|
||
<view class="menu" v-for="item in dataList" :key="item.id" @click="getnavigateTo(item.id)">
|
||
<view>
|
||
<text>报警人员姓名：</text>
|
||
<text>{{item.alarmPersonName}}</text>
|
||
</view>
|
||
<view>
|
||
<text>应急类型：</text>
|
||
<text>{{item.emergencyTypeName}}</text>
|
||
</view>
|
||
<view class="detail">
|
||
<text>应急详情：</text>
|
||
<text>{{item.emergencyDetail}}</text>
|
||
</view>
|
||
<view class="time">
|
||
<text>报警时间：</text>
|
||
<text>{{item.alarmTime}}</text>
|
||
</view>
|
||
<view class="lable-absolute">
|
||
{{item.dispositionStatus == 1 ? '待救援' : item.dispositionStatus == 2 ? '救援中' :'已救援' }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import headers from "../../../components/headers/headers.vue"
|
||
import uCharts from '@/components/u-charts/component.vue';
|
||
var _self;
|
||
export default {
|
||
components: {
|
||
uCharts
|
||
},
|
||
data() {
|
||
return {
|
||
mendNumber: 0,
|
||
submitNumber: 0,
|
||
totalNum: 0,
|
||
pieChartData: {
|
||
title: {
|
||
name: "1",
|
||
color: '#7cb5ec',
|
||
fontSize: 12,
|
||
offsetY: 0,
|
||
background: 'rgba(0,0,0,0)'
|
||
},
|
||
series: [{
|
||
"data": 0,
|
||
color: '#FA5C53'
|
||
},
|
||
{
|
||
"data": 0,
|
||
color: '#FFCC00'
|
||
},
|
||
{
|
||
"data": 0,
|
||
color: '#6DD400'
|
||
},
|
||
{
|
||
"data": 0,
|
||
color: '#44C5D7'
|
||
},
|
||
]
|
||
},
|
||
manageTypeList: [{
|
||
typeName: '待整改数',
|
||
totalNum: 26
|
||
},
|
||
{
|
||
typeName: '待审核数',
|
||
totalNum: 12
|
||
},
|
||
{
|
||
typeName: '无需整改数',
|
||
totalNum: 20
|
||
},
|
||
{
|
||
typeName: '已闭合数',
|
||
totalNum: 10
|
||
}
|
||
],
|
||
colorList: ['#FA5C53', '#FFCC00', '#6DD400', '#44C5D7'],
|
||
statusBarHeight: 0,
|
||
projectSn: '',
|
||
statisticsValue: {
|
||
totalNum: 0, //总数
|
||
closeNum: 0, //已闭合
|
||
notCloseNum: 0, //未闭合
|
||
overdueNotCloseNum: 0, //超期未关闭
|
||
rectificationNum: 0, //待整改
|
||
reviewNum: 0, //待复查
|
||
verificationNum: 0, //待核验
|
||
totalNumDifferYesterday: 0, //
|
||
oseNumDifferYesterday: 0, //
|
||
closeNumDifferYesterday: 0, //
|
||
notCloseNumDifferYesterday: 0, //
|
||
|
||
|
||
},
|
||
nowTime: '',
|
||
timer: '', //定义一个定时器
|
||
|
||
dataList: [],
|
||
total: 0,
|
||
page:1,
|
||
|
||
getGoId:-1,
|
||
}
|
||
},
|
||
onLoad(option) {
|
||
this.getGoId = option.id;
|
||
},
|
||
mounted() {
|
||
this.getTime()
|
||
// this.getListData();
|
||
// this.loadData();
|
||
},
|
||
onShow() {
|
||
this.dataList = [];
|
||
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
|
||
this.statusBarHeight = uni.getStorageSync('systemInfo').statusBarHeight;
|
||
this.getListData();
|
||
// this.loadData();
|
||
this.getRecordList()
|
||
},
|
||
methods: {
|
||
//实时时间
|
||
getTime() {
|
||
this.timer = setInterval(() => {
|
||
let timeDate = new Date()
|
||
let year = timeDate.getFullYear()
|
||
let mounth = timeDate.getMonth() + 1
|
||
let day = timeDate.getDate()
|
||
let hours = timeDate.getHours()
|
||
hours = hours >= 10 ? hours : '0' + hours
|
||
let minutes = timeDate.getMinutes()
|
||
minutes = minutes >= 10 ? minutes : '0' + minutes
|
||
let seconds = timeDate.getSeconds()
|
||
seconds = seconds >= 10 ? seconds : '0' + seconds
|
||
let week = timeDate.getDay()
|
||
let weekArr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
|
||
this.nowTime = `${year}-${mounth}-${day} ${hours}:${minutes}:${seconds}`
|
||
}, 1000)
|
||
},
|
||
//获取检查记录数据
|
||
getRecordList() {
|
||
let data = {
|
||
projectSn: this.projectSn,
|
||
inDispositionStatus:this.getGoId == 2 ? "2,3" : "1,2,3",
|
||
}
|
||
this.sendRequest({
|
||
url: 'xmgl/xzEmergencyRecord/statsDispositionStatus',
|
||
method: 'post',
|
||
data,
|
||
success: res => {
|
||
this.statisticsValue = res.result
|
||
console.log('获取检查记录数据', res)
|
||
}
|
||
})
|
||
},
|
||
loadData() {
|
||
if (this.manageTypeList.length > 0) {
|
||
let arr = [];
|
||
this.manageTypeList.forEach((item, index) => {
|
||
let json = {
|
||
"data": item.totalNum,
|
||
color: this.colorList[index]
|
||
};
|
||
arr.push(json)
|
||
});
|
||
this.pieChartData.series = arr;
|
||
};
|
||
},
|
||
//获取记录
|
||
getListData() {
|
||
let that = this;
|
||
let userId = JSON.parse(uni.getStorageSync('userInfo')).userId;
|
||
//获取我整改的巡查记录数量
|
||
this.sendRequest({
|
||
url: 'xmgl/xzEmergencyRecord/page',
|
||
method: 'get',
|
||
data: {
|
||
projectSn: this.projectSn,
|
||
pageNo: this.page,
|
||
pageSize: 10,
|
||
inDispositionStatus:this.getGoId == 2 ? "2,3" : "1,2,3",
|
||
},
|
||
success: res => {
|
||
console.log(res)
|
||
this.total = res.result.total;
|
||
this.dataList = this.dataList.concat(res.result.records);
|
||
}
|
||
})
|
||
|
||
},
|
||
upper: function(e) {
|
||
// console.log('1111111',e)
|
||
},
|
||
lower: function(e) {
|
||
// console.log('2222222',e)
|
||
this.page++;
|
||
this.getListData();
|
||
},
|
||
scroll: function(e) {
|
||
// console.log('333333',e)
|
||
// this.old.scrollTop = e.detail.scrollTop
|
||
},
|
||
//列表页
|
||
goList(type) {
|
||
uni.navigateTo({
|
||
url: "./list?type=" + type
|
||
})
|
||
},
|
||
//新增按钮
|
||
addBtn() {
|
||
uni.navigateTo({
|
||
url: "./addIssue?type=add"
|
||
})
|
||
},
|
||
addPrjcet() {
|
||
// 项目质量自检
|
||
uni.navigateTo({
|
||
url: "./projectList"
|
||
})
|
||
},
|
||
qualityAlarm() {
|
||
// 质量分析预警
|
||
uni.navigateTo({
|
||
url: "./analysisAlarm"
|
||
})
|
||
},
|
||
getnavigateTo(id) {
|
||
if(this.getGoId == 2){
|
||
uni.navigateTo({
|
||
url:`./reliefApprove?id=${id}`,
|
||
})
|
||
return
|
||
}
|
||
|
||
uni.navigateTo({
|
||
url:`./detail?id=${id}`,
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.emergencyDisposal {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.fixedheader {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
z-index: 2;
|
||
|
||
/deep/.headerBox {
|
||
background: #2b8df3;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.problemOverview {
|
||
// height: 33%;
|
||
// box-sizing: border-box;
|
||
border-radius: 10px;
|
||
// border: 3px solid #fafbfc;
|
||
margin: 0 2% 11% 2%;
|
||
padding: 3% 3%;
|
||
|
||
|
||
.overFlex {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.overRight {
|
||
// float: right;
|
||
font-size: 24rpx;
|
||
color: gray;
|
||
margin: 6rpx 0;
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.problemData {
|
||
margin-top: 4%;
|
||
display: flex;
|
||
background: linear-gradient(180deg, #FCF2D6 0%, #FFFFFF 50%);
|
||
box-shadow: 0 8rpx 16rpx 0 rgba(219, 229, 255, 0.6);
|
||
border-radius: 10rpx;
|
||
|
||
.dataStyle {
|
||
width: 300rpx;
|
||
// height: 180rpx;
|
||
text-align: center;
|
||
margin: 24rpx 0;
|
||
}
|
||
|
||
.dataStyle:not(:last-child) {
|
||
border-right: 2rpx solid #FFD356;
|
||
}
|
||
|
||
.dataBox1 {
|
||
// background: #ebf1ff;
|
||
border-top-left-radius: 5px;
|
||
border-bottom-left-radius: 5px;
|
||
|
||
.day {
|
||
font-size: 12px;
|
||
color: #3a7bff;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.num {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #3a7bff;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.text {
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
|
||
.dataBox2 {
|
||
// background: #fcebec;
|
||
|
||
.day {
|
||
font-size: 12px;
|
||
color: #ea3941;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.num {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #ea3941;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.text {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
|
||
.dataBox3 {
|
||
// background: #eef9f6;
|
||
|
||
.day {
|
||
font-size: 12px;
|
||
color: #5ecba7;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.num {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #5ecba7;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.text {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
|
||
.dataBox4 {
|
||
// background: #fff4e7;
|
||
border-top-right-radius: 5px;
|
||
border-bottom-right-radius: 5px;
|
||
|
||
.day {
|
||
font-size: 12px;
|
||
color: #ff9810;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.num {
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
color: #ff9810;
|
||
margin-top: 5px;
|
||
}
|
||
|
||
.text {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
margin-top: 5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.overDataList {
|
||
padding-left: 7px;
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.overDataList>span:not(:last-child)::after {
|
||
content: '|';
|
||
margin: 0 10px;
|
||
color: #e9e9e9;
|
||
}
|
||
|
||
.commonModules {
|
||
height: 66%;
|
||
margin: -10% 2%;
|
||
padding: 3% 3%;
|
||
|
||
.modulesList {
|
||
// display: flex;
|
||
// flex-wrap: wrap;
|
||
margin-top: 4%;
|
||
|
||
// display: grid;
|
||
// grid-gap: 20px;
|
||
// grid-template-columns: repeat(3, 1fr);
|
||
.menu {
|
||
// text-align: center;
|
||
// margin-left: 30px;
|
||
margin-bottom: 40rpx;
|
||
font-size: 28rpx;
|
||
padding: 16rpx 30rpx;
|
||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(198, 220, 255, 0.2) 100%);
|
||
box-shadow: 0px 8rpx 32rpx -8rpx rgba(42, 60, 106, 0.24);
|
||
border-radius: 34rpx;
|
||
position: relative;
|
||
line-height: 44rpx;
|
||
|
||
view:not(:first-child) {
|
||
margin-top: 20rpx;
|
||
}
|
||
|
||
view {
|
||
display: flex;
|
||
|
||
text:last-child {
|
||
flex: 1,
|
||
}
|
||
}
|
||
|
||
.detail {
|
||
flex-direction: column;
|
||
}
|
||
|
||
.time {
|
||
color: rgba(0, 0, 0, 0.5);
|
||
font-size: 24rpx;
|
||
justify-content: flex-end;
|
||
|
||
text:last-child {
|
||
flex: initial;
|
||
}
|
||
}
|
||
|
||
.lable-absolute {
|
||
color: #ffffff;
|
||
padding: 4rpx 24rpx;
|
||
background-color: #5181F6;
|
||
font-size: 24rpx;
|
||
box-shadow: 0 8rpx 18rpx 0 rgba(81, 129, 246, 0.37);
|
||
border-radius: 148rpx;
|
||
position: absolute;
|
||
top: 26rpx;
|
||
right: 38rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.overLeft {
|
||
// float: left;
|
||
color: #000;
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
}
|
||
|
||
.overEmergency {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: bold;
|
||
font-size: 34rpx;
|
||
line-height: 44rpx;
|
||
padding-bottom: 20rpx;
|
||
color: #000000;
|
||
position: relative;
|
||
}
|
||
|
||
.overEmergency::after {
|
||
content: "";
|
||
width: 190rpx;
|
||
border-bottom: 6rpx solid #3A7BFF;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
// .smallHeight{
|
||
// // height: calc(100% - 45px);
|
||
// height: 100%;
|
||
// box-sizing: border-box;
|
||
// background: #F6F6F6;
|
||
// }
|
||
|
||
// .qualityManage >>> .headerBox {
|
||
// background-color: #13b98c;
|
||
// }
|
||
// .chart_wrap .chart_box{
|
||
// width: 60%;
|
||
// position: relative;
|
||
// }
|
||
// .chart_wrap{
|
||
// display: flex;
|
||
// font-size: 12px;
|
||
// color: #fff;
|
||
// }
|
||
// .chart_box #pieChart{
|
||
// margin-left: 76rpx !important;
|
||
// margin-top: 56rpx !important;
|
||
// }
|
||
// .chart_message{
|
||
// margin-left: 60rpx;
|
||
// padding-top: 60rpx;
|
||
// }
|
||
// .chart_wrap .flex{
|
||
// width: 240rpx;
|
||
// margin: 8rpx 0;
|
||
// }
|
||
// .chart_wrap .num {
|
||
// font-size: 12px;
|
||
// color: #fff;
|
||
// }
|
||
// .chart_title{
|
||
// background: #0f9c75;
|
||
// width: 216rpx;
|
||
// height: 216rpx;
|
||
// position: absolute;
|
||
// z-index: 1;
|
||
// border-radius: 50%;
|
||
// left: 116rpx;
|
||
// top: 96rpx;
|
||
// display: flex;
|
||
// flex-direction: column;
|
||
// align-items: center;
|
||
// justify-content: center;
|
||
// }
|
||
// .chart_title span{
|
||
// font-size: 24px;
|
||
// }
|
||
// .chart_wrap .bg_color{
|
||
// width: 10rpx;
|
||
// height: 10rpx;
|
||
// border-radius: 50%;
|
||
// margin: 0 16px 0 10px;
|
||
// }
|
||
// .qualityManage .content {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// padding: 0px 30rpx 0;
|
||
// box-sizing: border-box;
|
||
// margin-top: -30px;
|
||
// z-index: 99;
|
||
// }
|
||
|
||
// .flex {
|
||
// display: flex;
|
||
// align-items: center;
|
||
// }
|
||
|
||
// .flex2 {
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: space-between;
|
||
// }
|
||
|
||
// .item {
|
||
// width: 100%;
|
||
// box-sizing: border-box;
|
||
// padding: 14px 30rpx;
|
||
// box-shadow: 0 0 10px #d3d3d3;
|
||
// margin-bottom: 18px;
|
||
// border-radius: 4px;
|
||
// color: rgba(51, 51, 51, 100);
|
||
// font-size: 30rpx;
|
||
// font-family: PingFangSC-Regular;
|
||
// background-color: #FFFFFF;
|
||
// }
|
||
|
||
// .value {
|
||
// font-size: 26rpx;
|
||
// }
|
||
|
||
// .num {
|
||
// margin-right: 5px;
|
||
// font-size: 37rpx;
|
||
// color: #4181FE;
|
||
// }
|
||
|
||
// .addBtn {
|
||
// position: absolute;
|
||
// bottom: 50px;
|
||
// left: 0;
|
||
// right: 0;
|
||
// width: 60%;
|
||
// margin: 0 auto;
|
||
// text-align: center;
|
||
// padding: 10px 0;
|
||
// border-radius: 30px;
|
||
// background-color: rgba(65, 129, 254, 0.9);
|
||
// font-size: 30rpx;
|
||
// color: #fff;
|
||
// box-shadow: 0 0 5px rgba(65, 129, 254, 0.7);
|
||
// }
|
||
|
||
// .addBtn:active {
|
||
// background-color: #4181FE;
|
||
// }
|
||
// .chart_wrap{
|
||
// width: 100%;
|
||
// height: 480rpx;
|
||
// background-image: url(../../../static/titleBg2.png);
|
||
// background-size: cover;
|
||
// }
|
||
</style> |