<template>
|
<view>
|
<!-- <u-navbar placeholder bgColor="#1171E0FF" leftIconColor="white" :autoBack="true" >
|
<template slot="center">
|
<view style="color: white;">数据看板</view>
|
</template>
|
</u-navbar> -->
|
<view class="donw-box"></view>
|
<view class="page-main">
|
<view class="box">
|
<view class="title">
|
<text>基础信息</text>
|
</view>
|
<view class="grid-box">
|
<view class="grid-item">
|
<view class="label">企业总数</view>
|
<view>{{infoData.companyNum || 0}}</view>
|
</view>
|
<view class="grid-item">
|
<view class="label">执法单位</view>
|
<view>{{infoData.enforceDeptNum || 0}}</view>
|
</view>
|
<view class="grid-item">
|
<view class="label">执法人员</view>
|
<view>{{infoData.enforceUserNum || 0}}</view>
|
</view>
|
<view class="grid-item">
|
<view class="label">执法申请</view>
|
<view>{{infoData.enforceOrderNum || 0}}</view>
|
</view>
|
<view class="grid-item">
|
<view class="label">已审批</view>
|
<view>{{infoData.enforceOrderCheckedNum || 0}}</view>
|
</view>
|
<view class="grid-item">
|
<view class="label">已结束</view>
|
<view>{{infoData.enforceOrderCompleteNum || 0}}</view>
|
</view>
|
</view>
|
</view>
|
<view class="box">
|
<view class="title set-flex-content-between set-flex">
|
<text>执法单位执法次数</text>
|
<u-icon name="calendar" size="24" @click="openDate(1)"></u-icon>
|
</view>
|
<view class="number">
|
<view class="date">{{pageQuerm.beginTimeStr1}} <text class="margin-text">至</text> {{pageQuerm.endTimeStr1}}</view>
|
<view class="progress-box">
|
<qiun-data-charts v-if="!show" key="11" type="bar"
|
:opts="opts" :chartData="chartData" />
|
</view>
|
</view>
|
</view>
|
<view class="box">
|
<view class="title set-flex-content-between set-flex">
|
<text>企业被执法次数排行</text>
|
<u-icon name="calendar" size="24" @click="openDate(2)"></u-icon>
|
</view>
|
<view class="number">
|
<view class="date" style="margin-bottom: 36rpx;">{{pageQuerm.beginTimeStr2}} <text class="margin-text">至</text>
|
{{pageQuerm.endTimeStr2}}</view>
|
<view class="list-box">
|
<view class="list-item" v-for="(item,index) in listData" :key="index">
|
<view class="width-set">
|
<image src="/static/policy/rank1.png" mode="widthFix" v-if="index == 0"></image>
|
<image src="/static/policy/rank2.png" mode="widthFix" v-if="index == 1"></image>
|
<image src="/static/policy/rank3.png" mode="widthFix" v-if="index == 2"></image>
|
<text class="set-index" style="margin-right: 36rpx;color: #7E8596;" v-if="index > 2">{{index+1}}</text>
|
<text class="company u-line-1" style="color: #202D44;">{{item.k}}</text>
|
</view>
|
<text class="value" :class="{origin: index <= 2}">{{item.v}}</text>
|
</view>
|
<view class="look-more" @click="lookMore" v-if="showMore">
|
<text>查看更多</text>
|
<u-icon name="arrow-right" color="#7E8596"></u-icon>
|
</view>
|
</view>
|
</view>
|
</view>
|
<view class="box">
|
<view class="title set-flex-content-between set-flex">
|
<text>执法类型占比</text>
|
<u-icon name="calendar" size="24" @click="openDate(3)"></u-icon>
|
</view>
|
<view class="number">
|
<view class="date" style="margin-bottom: 20rpx;">{{pageQuerm.beginTimeStr3}} <text class="margin-text">至</text> {{pageQuerm.endTimeStr3}}</view>
|
<view class="progress-box">
|
<qiun-data-charts type="pie" v-if="!show" tooltipFormat="tooltipDemo1"
|
|
key="22" :opts="opts1" :chartData="chartData1" />
|
</view>
|
</view>
|
</view>
|
</view>
|
<u-datetime-picker
|
:show="show"
|
@cancel="show = false"
|
:maxDate="new Date().getTime()"
|
v-model="currentValue"
|
mode="year-month"
|
@confirm="confirmDate"
|
></u-datetime-picker>
|
</view>
|
</template>
|
|
<script>
|
import {
|
getTotalInfo,
|
getDeptCount,
|
getCompanyCount,
|
getEnforceTypeCount
|
} from '@/api/data.js'
|
export default {
|
data() {
|
return {
|
typeItem: '',
|
currentValue: '',
|
show: false,
|
infoData: [],
|
listData: [
|
],
|
chartData: {},
|
pageQuerm: {
|
pageNum: 1,
|
pageSize: 10,
|
total: 1,
|
beginTimeStr: '',
|
endTimeStr: '',
|
},
|
originData: [],
|
showMore: true,
|
//您可以通过修改 config-ucharts.js 文件中下标为 ['bar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
opts: {
|
color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
"#ea7ccc"
|
],
|
padding: [15, 30, 0, 5],
|
enableScroll: false,
|
legend: {
|
show: false,
|
|
},
|
xAxis: {
|
boundaryGap: "justify",
|
disableGrid: false,
|
min: 0,
|
axisLine: false,
|
max: 40,
|
gridColor: "#ededed"
|
},
|
yAxis: {
|
gridColor: "#ededed"
|
},
|
extra: {
|
bar: {
|
type: "group",
|
width: 10,
|
meterBorde: 1,
|
meterFillColor: "#FFFFFF",
|
activeBgColor: "#000000",
|
activeBgOpacity: 0.08,
|
linearType: "custom",
|
barBorderCircle: true,
|
seriesGap: 2,
|
categoryGap: 2
|
}
|
}
|
},
|
chartData1: {},
|
tooltipCustom: {},
|
opts1: {
|
color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
padding: [5,5,5,5],
|
enableScroll: false,
|
legend: {
|
position: "bottom",
|
lineHeight: 25,
|
width: '100%', // 设置图例宽度
|
// itemWidth: 25, // 设置图例标记宽度
|
itemGap: 10, // 设置图例项之间的间隔
|
float: 'left'
|
},
|
extra: {
|
pie: {
|
activeOpacity: 0.5,
|
activeRadius: 10,
|
offsetAngle: 0,
|
labelWidth: 10,
|
border: false,
|
borderWidth: 3,
|
borderColor: "#FFFFFF"
|
}
|
}
|
}
|
}
|
},
|
onReady() {
|
// console.log(new Date().getMonth() + 1, new Date().getDate())
|
let date = new Date()
|
date.setMonth(date.getMonth() - 1); // 减去1个月
|
date.setDate(1); // 设置日为月份的第一天
|
this.pageQuerm.beginTime = this.$u.timeFormat(date, "yyyy-mm-dd") + " " + "00:00:00"
|
this.pageQuerm.endTime = this.$u.timeFormat(new Date(), "yyyy-mm-dd") + " " +"23:59:59"
|
this.pageQuerm.beginTimeStr1 = this.pageQuerm.beginTimeStr2 = this.pageQuerm.beginTimeStr3 = this.$u.timeFormat(date, "yyyy-mm-dd")
|
this.pageQuerm.endTimeStr1 = this.pageQuerm.endTimeStr2 = this.pageQuerm.endTimeStr3 = this.$u.timeFormat(new Date(), "yyyy-mm-dd")
|
this.getTotalInfo()
|
this.getCompanyCount()
|
this.getServerData();
|
this.getServerData1()
|
},
|
methods: {
|
confirmDate(e) {
|
if(new Date().getMonth() == new Date(e.value).getMonth()){
|
this.pageQuerm[`beginTimeStr${this.typeItem}`] = this.$u.timeFormat(new Date(e.value).setDate(1), 'yyyy-mm-dd')
|
this.pageQuerm[`endTimeStr${this.typeItem}`] = this.$u.timeFormat(e.value, 'yyyy-mm-dd')
|
this.pageQuerm.beginTime = this.$u.timeFormat(new Date(e.value).setDate(1), 'yyyy-mm-dd') + " " + "00:00:00"
|
this.pageQuerm.endTime = this.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
|
} else {
|
this.pageQuerm[`beginTimeStr${this.typeItem}`] = this.$u.timeFormat(new Date(e.value).setDate(1), 'yyyy-mm-dd')
|
this.pageQuerm.beginTime = this.$u.timeFormat(new Date(e.value).setDate(1), 'yyyy-mm-dd') + " " + "00:00:00"
|
const date = new Date(e.value);
|
const year = date.getFullYear();
|
const month = date.getMonth() + 1; // 月份从0开始计算，需要加1
|
const lastDay = new Date(year, month, 0)
|
|
this.pageQuerm.endTime = this.$u.timeFormat(new Date(lastDay), 'yyyy-mm-dd') + " " + "23:59:59"
|
this.pageQuerm[`endTimeStr${this.typeItem}`] = this.$u.timeFormat(new Date(lastDay), 'yyyy-mm-dd')
|
}
|
|
if(this.typeItem == 1) {
|
this.getServerData()
|
}
|
if(this.typeItem == 2) {
|
this.getCompanyCount()
|
}
|
if(this.typeItem == 3) {
|
this.getServerData1()
|
}
|
this.show = false
|
},
|
openDate(item) {
|
this.typeItem = item
|
this.currentValue = new Date().getTime()
|
this.show = true
|
},
|
lookMore() {
|
this.pageQuerm.pageNum++
|
const value = this.pageQuerm.pageNum * this.pageQuerm.pageSize
|
const data = this.originData.slice((this.pageQuerm.pageNum - 1) * this.pageQuerm.pageSize, value)
|
this.listData.push(...data)
|
if(value >= this.pageQuerm.total) {
|
this.showMore = false
|
}
|
},
|
// 获取执法信息
|
getTotalInfo() {
|
getTotalInfo().then(val => {
|
// console.log(val)
|
this.infoData = val.data.data
|
})
|
},
|
// 执法次数部门
|
getServerData() {
|
getDeptCount(this.pageQuerm).then(val => {
|
const value = val.data.data
|
const label = value.map(item => item.k)
|
const data = value.map(item => item.v)
|
let res = {
|
categories: label,
|
series: [{
|
name: "执法次数",
|
data: data,
|
|
}]
|
};
|
this.chartData = JSON.parse(JSON.stringify(res));
|
})
|
|
},
|
// 企业被执法次数排行
|
getCompanyCount() {
|
getCompanyCount(this.pageQuerm).then(val => {
|
this.listData = val.data.data.slice(0, this.pageQuerm.pageSize)
|
this.originData = val.data.data
|
this.pageQuerm.total = val.data.data.length
|
if(this.pageQuerm.total <= this.pageQuerm.pageSize) {
|
this.showMore = false
|
}
|
})
|
},
|
|
getServerData1() {
|
getEnforceTypeCount(this.pageQuerm).then(val => {
|
const data = val.data.data.map(item => {
|
return {
|
name: item.k,
|
value: item.v,
|
}
|
})
|
let res = {
|
series: [{
|
data: data,
|
}]
|
};
|
this.chartData1 = JSON.parse(JSON.stringify(res));
|
|
})
|
},
|
}
|
}
|
</script>
|
<style>
|
page {
|
background-color: #F4F4F4FF;
|
}
|
</style>
|
<style lang="scss" scoped>
|
@import "./dataLook.scss";
|
</style>
|
