From 59f4dc012a2c42eebd31301444e0f8df9af088e0 Mon Sep 17 00:00:00 2001
From: wjt <1797368093@qq.com>
Date: 星期三, 26 六月 2024 10:13:12 +0800
Subject: [PATCH] Merge branch 'master' of http://218.28.192.34:9999/r/sqys/sqys_xcx
---
policy/dataLook/dataLook.vue | 305 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 301 insertions(+), 4 deletions(-)
diff --git a/policy/dataLook/dataLook.vue b/policy/dataLook/dataLook.vue
index 8183fd0..426dd7c 100644
--- a/policy/dataLook/dataLook.vue
+++ b/policy/dataLook/dataLook.vue
@@ -1,22 +1,319 @@
<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>
\ No newline at end of file
--
Gitblit v1.9.1