Skip to content

B
BCDH-APP
Commit 8a84a68d authored by 13841799530's avatar 13841799530
Browse files
Options

解润东 

20220805
巡查统计
parent 5a555646
Hide whitespace changes
Inline Side-by-side
Showing with 227 additions and 14 deletions
src/views/danger/dangerPatrol/statistics/index.vue
View file @ 8a84a68d
......@@ -6,18 +6,31 @@
<div class="con-list">
<van-cell-group inset>
<van-row gutte>
<van-col span="24">总巡查次数:85次</van-col>
<van-col span="24">总巡查次数:{{countObj.totalNumber}}次</van-col>
</van-row>
<van-row gutte>
<van-col span="24">认定隐患数量: 25个</van-col>
<van-col span="24">认定隐患数量: {{countObj.hdNumber}}个</van-col>
</van-row>
<van-tabs @click="onClick" color="#2980f7">
<van-tab title="隐患上报统计">
<van-row gutte>
<van-col span="24" class="excel-title">
<span>月巡查</span>
<span>周巡查</span>
<van-cell title="请选择查询的月份" :value="date" @click="show = true" />
<!-- <span>月巡查</span>
<span>周巡查</span> -->
<van-popup v-model="show" position="bottom">
<van-datetime-picker
v-model="currentDate"
type="year-month"
title="选择年月"
:min-date="minDate"
:max-date="maxDate"
:formatter="formatter"
@confirm="onConfirm"
@cancel="show=false"
/>
</van-popup>
</van-col>
</van-row>
<!-- echarts图 -->
......@@ -27,7 +40,45 @@
</van-col>
</van-row>
</van-tab>
<van-tab title="巡查时长统计">2</van-tab>
<van-tab title="巡查时长统计">
<van-row gutte>
<van-col span="24" class="excel-title">
<van-col span="24" class="excel-title">
<van-cell title="请选择查询的月份" :value="dateTwo" @click="showTwo = true" />
<!-- <span>月巡查</span>
<span>周巡查</span> -->
<van-popup v-model="showTwo" position="bottom">
<van-datetime-picker
v-model="currentDateTwo"
type="year-month"
title="选择年月"
:min-date="minDateTwo"
:max-date="maxDateTwo"
:formatter="formatterTwo"
@confirm="onConfirmTwo"
@cancel="showTwo=false"
/>
</van-popup>
</van-col>
</van-col>
</van-row>
<!-- 日历图 -->
<van-row gutte v-if="aa">
<van-col span="24" class="excel-title">
<van-calendar
title="日历"
:poppable="false"
:show-confirm="false"
:style="{ height: '500px' }"
type="multiple"
:min-date="minDateThree"
:max-date="maxDateThree"
:formatter="formatterThree"
:default-date="defaultData"
/>
</van-col>
</van-row>
</van-tab>
</van-tabs>
</van-cell-group>
</div>
......@@ -48,36 +99,190 @@ export default {
},
data() {
return {
date:'2022/01',
show:false,
minDate: new Date(2020, 0, 1),
maxDate: new Date(2025, 10, 1),
currentDate: new Date(),
dateTwo:'2022/01',
showTwo:false,
minDateTwo: new Date(2020, 0, 1),
maxDateTwo: new Date(2025, 10, 1),
currentDateTwo: new Date(),
text: "巡查统计",
messageList: [],
isHaveNews: false
minDateThree: new Date(2022, 0, 1),
maxDateThree: new Date(2022, 0, 31),
defaultData:[],
isHaveNews: false,
countObj:{},
dateList:[],
MonthList:[],
aa:true
};
},
watch: {
dateList: {
deep: true,
handler(val) {
this.myEcharts(val)
}
}
},
mounted() {
this.$nextTick(() => {
this.myEcharts();
});
this.init()
},
methods: {
init(){
this.count()
this.leftEcharts()
this.rightEcharts()
},
count(){
this.$toast.loading({
message:'加载中...',
forbidClick: true,
loadingType: 'spinner',
duration: 0
})
getFun('patrol/statistics/total/count').then((response)=>{
this.$toast.clear()
this.countObj=response.data
}).catch(()=>{
this.$toast.clear()
this.$toast.fail('加载失败,请稍后再试')
})
},
//加载左侧折线图数据
leftEcharts(){
var obj={
time:this.date
}
this.$toast.loading({
message:'加载中...',
forbidClick: true,
loadingType: 'spinner',
duration: 0
})
getFun('patrol/statistics/hd/count',obj).then((response)=>{
this.$toast.clear()
this.dateList=response.data
}).catch(()=>{
this.$toast.clear()
this.$toast.fail('加载失败,请稍后再试')
})
},
rightEcharts(){
var obj={
time:this.dateTwo
}
this.$toast.loading({
message:'加载中...',
forbidClick: true,
loadingType: 'spinner',
duration: 0
})
getFun('patrol/statistics/example/status',obj).then((response)=>{
this.$toast.clear()
this.MonthList=response.data
}).catch(()=>{
this.$toast.clear()
this.$toast.fail('加载失败,请稍后再试')
})
},
formatter(type, val) {
if (type === 'year') {
return `${val}年`;
} else if (type === 'month') {
return `${val}月`;
}
return val;
},
formatterTwo(type, val) {
if (type === 'year') {
return `${val}年`;
} else if (type === 'month') {
return `${val}月`;
}
return val;
},
formatterThree(date){
var date1=this.util.timestampToTime(date.date,'DT2',true)
this.MonthList.forEach((i)=>{
if(date1==i.date){
if(i.status=='red'){
date.className='red-flag'
}else if(i.status=='green'){
date.className='green-flag'
}
}
})
return date
},
onClick(name, title) {
console.log(title);
},
myEcharts() {
console.log(echarts);
formatDate(date) {
return `${date.getFullYear()}/${(date.getMonth() + 1)<10?'0'+(date.getMonth() + 1):(date.getMonth() + 1)}`;
},
onConfirm(date) {
console.log(date,999)
this.show = false;
this.date = this.formatDate(date);
this.leftEcharts()
},
onConfirmTwo(date) {
this.aa = false
this.showTwo = false;
this.dateTwo = this.formatDate(date);
this.maxDateThree=this.getCurrentMonthLast(date)
this.minDateThree=date
this.rightEcharts()
setTimeout(() =>{
this.aa = true
},100)
},
getCurrentMonthLast(date){
var currentMonth=date.getMonth();
var nextMonth=++currentMonth;
var nextMonthFirstDay=new Date(date.getFullYear(),nextMonth,1);
var oneDay=1000*60*60*24;
return new Date(nextMonthFirstDay-oneDay);
},
myEcharts(data) {
var xData=[]
var seriesData=[]
data.forEach((i)=>{
xData.push(i.date)
seriesData.push(i.hdNumber)
})
var myChart = echarts.init(document.getElementById("box"));
//配置图表
var option = {
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
data: xData
},
yAxis: {
type: "value"
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 20
},
{
start: 0,
end: 20
}
],
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "bar"
data: seriesData,
type: "line"
}
]
};
......@@ -117,4 +322,12 @@ export default {
}
}
}
/deep/ .red-flag{
background:red !important;
color: #fff;
}
/deep/ .green-flag{
background:green !important;
color: #fff;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment