From 28ab9da809aa7c5d42e1871af5fd10c2de09ac66 Mon Sep 17 00:00:00 2001
From: 王恒 <318726284@qq.com>
Date: 星期五, 26 九月 2025 14:04:57 +0800
Subject: [PATCH] '交接版本'
---
policy/dataLook/dataLook.vue | 541 +++++++++++++++++++++++++++++++++--------------------
1 files changed, 332 insertions(+), 209 deletions(-)
diff --git a/policy/dataLook/dataLook.vue b/policy/dataLook/dataLook.vue
index 4023b29..579103d 100644
--- a/policy/dataLook/dataLook.vue
+++ b/policy/dataLook/dataLook.vue
@@ -1,221 +1,344 @@
<template>
- <view>
- <u-navbar placeholder bgColor="#1171E0FF" leftIconColor="white" :autoBack="true">
+ <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>5,400</view>
- </view>
- <view class="grid-item">
- <view class="label">鎵ф硶鍗曚綅</view>
- <view>5,400</view>
- </view>
- <view class="grid-item">
- <view class="label">鎵ф硶浜哄憳</view>
- <view>5,400</view>
- </view>
- <view class="grid-item">
- <view class="label">鎵ф硶鐢宠</view>
- <view>5,400</view>
- </view>
- <view class="grid-item">
- <view class="label">宸插鎵�</view>
- <view>5,400</view>
- </view>
- <view class="grid-item">
- <view class="label">宸茬粨鏉�</view>
- <view>5,400</view>
- </view>
- </view>
- </view>
- <view class="box">
- <view class="title set-flex-content-between set-flex">
- <text>鎵ф硶鍗曚綅鎵ф硶娆℃暟</text>
- <u-icon name="calendar" size="24"></u-icon>
- </view>
- <view class="number">
- <view class="date">2024-04-05 <text class="margin-text">鑷�</text> 2024-06-14</view>
- <view class="progress-box">
- <qiun-data-charts 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"></u-icon>
- </view>
- <view class="number">
- <view class="date" style="margin-bottom: 36rpx;">2024-04-05 <text class="margin-text">鑷�</text> 2024-06-14</view>
- <view class="list-box">
- <view class="list-item" v-for="(item,index) in listData" :key="index">
- <view class="width-set">
- <text style="margin-right: 10rpx;">{{index+1}}</text>
- <text class="company u-line-1">鍖椾含涓滄柟鐩堣仈绉戞妧鏈夐檺鍏徃</text>
- </view>
- <text class="value">54</text>
- </view>
- <view class="look-more">
- <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"></u-icon>
- </view>
- <view class="number">
- <view class="date">2024-04-05 <text class="margin-text">鑷�</text> 2024-06-14</view>
- <view class="progress-box">
- <qiun-data-charts
- type="rose"
- key="22"
- :opts="opts1"
- :chartData="chartData1"
- /> </view>
- </view>
- </view>
- </view>
- </view>
+ </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 set-height">
+ <view class="date">{{pageQuerm.beginTimeStr1}} <text class="margin-text">鑷�</text> {{pageQuerm.endTimeStr1}}
+ </view>
+ <view class="progress-box" style="margin-top: 20rpx;">
+ <!-- <qiun-data-charts v-if="!show" key="11" type="bar"
+ :opts="opts" :chartData="chartData" /> -->
+ <view v-for="(item,index) in likeData" style="margin-bottom: 20rpx;" class="set-flex-progress">
+ <view class="name">{{item.k}}</view>
+ <view class="progress">
+ <u-line-progress activeColor="#1890FF" :percentage="item.progress" height="20">
+ <template slot="default">
+ {{item.v}}
+ </template>
+ </u-line-progress>
+ </view>
+ </view>
+ <!-- <echarts ref="echarts" :option="option" canvasId="echarts"></echarts> -->
+ </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>
- export default {
- data() {
- return {
- listData: [
- {
- name: '鍖椾含涓滄柟鐩堣仈绉戞妧鏈夐檺鍏徃',
- value: 54
- },
- {
- name: '鍖椾含涓滄柟鐩堣仈绉戞妧鏈夐檺鍏徃',
- value: 54
- },
- {
- name: '鍖椾含涓滄柟鐩堣仈绉戞妧鏈夐檺鍏徃',
- value: 54
- },
- {
- name: '鍖椾含涓滄柟鐩堣仈绉戞妧鏈夐檺鍏徃',
- value: 54
- }
- ],
- chartData: {},
- //鎮ㄥ彲浠ラ�氳繃淇敼 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
- },
- yAxis: {},
- extra: {
- bar: {
- type: "group",
- width: 10,
- meterBorde: 1,
- meterFillColor: "#FFFFFF",
- activeBgColor: "#000000",
- activeBgOpacity: 0.08,
- linearType: "custom",
- barBorderCircle: true,
- seriesGap: 2,
- categoryGap: 2
- }
- }
- },
- chartData1: {},
- opts1: {
- color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
- padding: [5,5,5,5],
- enableScroll: false,
- legend: {
- show: true,
- position: "left",
- lineHeight: 25
- },
- extra: {
- rose: {
- type: "area",
- minRadius: 50,
- activeOpacity: 0.5,
- activeRadius: 10,
- offsetAngle: 0,
- labelWidth: 15,
- border: false,
- borderWidth: 2,
- borderColor: "#FFFFFF"
- }
- }
- }
- }
- },
- onReady() {
- this.getServerData();
- this.getServerData1()
- },
- methods: {
- getServerData() {
- //妯℃嫙浠庢湇鍔″櫒鑾峰彇鏁版嵁鏃剁殑寤舵椂
- setTimeout(() => {
- //妯℃嫙鏈嶅姟鍣ㄨ繑鍥炴暟鎹紝濡傛灉鏁版嵁鏍煎紡鍜屾爣鍑嗘牸寮忎笉鍚岋紝闇�鑷鎸変笅闈㈢殑鏍煎紡鎷兼帴
- let res = {
- categories: ["宸ュ晢绠＄悊灞�", "鍩庡競绠＄悊灞�", "鍩庡競绠＄悊灞�", "鍩庡競绠＄悊灞�", "鍩庡競绠＄悊灞�", "鍩庡競绠＄悊灞�"],
- series: [{
- name: "鐩爣鍊�",
- data: [35, 36, 31, 33, 13, 34]
- }
- ]
- };
- this.chartData = JSON.parse(JSON.stringify(res));
- }, 500);
- },
- getServerData1() {
- //妯℃嫙浠庢湇鍔″櫒鑾峰彇鏁版嵁鏃剁殑寤舵椂
- setTimeout(() => {
- //妯℃嫙鏈嶅姟鍣ㄨ繑鍥炴暟鎹紝濡傛灉鏁版嵁鏍煎紡鍜屾爣鍑嗘牸寮忎笉鍚岋紝闇�鑷鎸変笅闈㈢殑鏍煎紡鎷兼帴
- let res = {
- series: [
- {
- data: [{"name":"涓�鐝�","value":50},{"name":"浜岀彮","value":30},{"name":"涓夌彮","value":20},{"name":"鍥涚彮","value":18},{"name":"浜旂彮","value":8}]
- }
- ]
- };
- this.chartData1 = JSON.parse(JSON.stringify(res));
- }, 500);
- },
- }
- }
+ import {
+ getTotalInfo,
+ getDeptCount,
+ getCompanyCount,
+ getEnforceTypeCount
+ } from '@/api/data.js'
+
+ export default {
+ data() {
+ return {
+ likeData: {},
+ option: {},
+ 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,
+ gridColor: "#ededed",
+ },
+ yAxis: {
+ gridColor: "#ededed",
+ },
+ extra: {
+ bar: {
+ type: "group",
+ width: 15,
+ meterBorde: 1,
+ meterFillColor: "#FFFFFF",
+ activeBgColor: "#000000",
+ activeBgOpacity: 0.08,
+ linearType: "custom",
+ barBorderCircle: true,
+ seriesGap: 20,
+ categoryGap: 20
+ }
+ }
+ },
+ 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 => {
+ return item.k
+ })
+ const max = Math.max(value)
+ this.likeData = val.data.data.map(item => {
+ const progress = (item / max).toFixed(2)
+ return {
+ ...item,
+ progress
+ }
+ })
+ 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;
- }
+ page {
+ background-color: #F4F4F4FF;
+ }
</style>
<style lang="scss" scoped>
- @import "./dataLook.scss";
+ @import "./dataLook.scss";
</style>
\ No newline at end of file
--
Gitblit v1.9.1