From c3b2d6d35b77d11ff86d45926501493b7fc8886e Mon Sep 17 00:00:00 2001
From: wjt <1797368093@qq.com>
Date: 星期二, 23 七月 2024 10:30:20 +0800
Subject: [PATCH] 新功能添加
---
policy/dataLook/dataLook.vue | 113 +++++++++++++++++++++++++++++++++-----------------------
1 files changed, 67 insertions(+), 46 deletions(-)
diff --git a/policy/dataLook/dataLook.vue b/policy/dataLook/dataLook.vue
index 3265eb7..4e4efc1 100644
--- a/policy/dataLook/dataLook.vue
+++ b/policy/dataLook/dataLook.vue
@@ -1,10 +1,10 @@
<template>
<view>
- <u-navbar placeholder bgColor="#1171E0FF" leftIconColor="white" :autoBack="true">
+ <!-- <u-navbar placeholder bgColor="#1171E0FF" leftIconColor="white" :autoBack="true" >
<template slot="center">
<view style="color: white;">鏁版嵁鐪嬫澘</view>
</template>
- </u-navbar>
+ </u-navbar> -->
<view class="donw-box"></view>
<view class="page-main">
<view class="box">
@@ -18,7 +18,7 @@
</view>
<view class="grid-item">
<view class="label">鎵ф硶鍗曚綅</view>
- <view>{{infoData.enforceCompanyNum || 0}}</view>
+ <view>{{infoData.enforceDeptNum || 0}}</view>
</view>
<view class="grid-item">
<view class="label">鎵ф硶浜哄憳</view>
@@ -43,11 +43,22 @@
<text>鎵ф硶鍗曚綅鎵ф硶娆℃暟</text>
<u-icon name="calendar" size="24" @click="openDate(1)"></u-icon>
</view>
- <view class="number">
+ <view class="number set-height">
<view class="date">{{pageQuerm.beginTimeStr1}} <text class="margin-text">鑷�</text> {{pageQuerm.endTimeStr1}}</view>
- <view class="progress-box">
- <qiun-data-charts key="11" type="bar"
- :opts="opts" :chartData="chartData" />
+ <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>
@@ -85,7 +96,7 @@
<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="rose" tooltipFormat="tooltipDemo1"
+ <qiun-data-charts type="pie" v-if="!show" tooltipFormat="tooltipDemo1"
key="22" :opts="opts1" :chartData="chartData1" />
</view>
@@ -94,6 +105,7 @@
</view>
<u-datetime-picker
:show="show"
+ @cancel="show = false"
:maxDate="new Date().getTime()"
v-model="currentValue"
mode="year-month"
@@ -109,9 +121,12 @@
getCompanyCount,
getEnforceTypeCount
} from '@/api/data.js'
+
export default {
data() {
return {
+ likeData: {},
+ option: {},
typeItem: '',
currentValue: '',
show: false,
@@ -136,64 +151,58 @@
padding: [15, 30, 0, 5],
enableScroll: false,
legend: {
- show: false
+ show: false,
},
xAxis: {
boundaryGap: "justify",
disableGrid: false,
min: 0,
axisLine: false,
- max: 40
+ gridColor: "#ededed",
},
- yAxis: {},
+ yAxis: {
+ gridColor: "#ededed",
+ },
extra: {
bar: {
type: "group",
- width: 10,
+ width: 15,
meterBorde: 1,
meterFillColor: "#FFFFFF",
activeBgColor: "#000000",
activeBgOpacity: 0.08,
linearType: "custom",
barBorderCircle: true,
- seriesGap: 2,
- categoryGap: 2
+ seriesGap: 20,
+ categoryGap: 20
}
}
},
chartData1: {},
tooltipCustom: {},
opts1: {
- color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
- "#ea7ccc"
- ],
- tooltipFormat: function (item) {
- return "456"
- },
- padding: [5, 5, 5, 5],
- enableScroll: false,
- legend: {
- show: false,
- },
- extra: {
- rose: {
- type: "area",
- minRadius: 50,
- activeOpacity: 0.5,
- activeRadius: 10,
- offsetAngle: 0,
- labelWidth: 15,
- border: false,
- borderWidth: 2,
- borderColor: "#FFFFFF"
- },
- tooltip: {
- // bgColor: "#fff",
- // showArrow: false,
- // fontColor: "#202D44",
- // bgOpacity: 1,
- }
- }
+ 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"
+ }
+ }
}
}
},
@@ -210,6 +219,7 @@
this.getCompanyCount()
this.getServerData();
this.getServerData1()
+
},
methods: {
confirmDate(e) {
@@ -265,8 +275,20 @@
// 鎵ф硶娆℃暟閮ㄩ棬
getServerData() {
getDeptCount(this.pageQuerm).then(val => {
+
+
const value = val.data.data
- const label = value.map(item => item.k)
+ 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,
@@ -298,7 +320,6 @@
return {
name: item.k,
value: item.v,
- "labelText": item.k
}
})
let res = {
--
Gitblit v1.9.1