From f07b70558d5b84f1070470229037629bc1ace006 Mon Sep 17 00:00:00 2001
From: wjt <1797368093@qq.com>
Date: 星期六, 22 六月 2024 14:39:30 +0800
Subject: [PATCH] 接口对接
---
policy/dataLook/dataLook.vue | 268 +++++++++++++++++++++++++++++++++++++----------------
1 files changed, 185 insertions(+), 83 deletions(-)
diff --git a/policy/dataLook/dataLook.vue b/policy/dataLook/dataLook.vue
index 4023b29..d5d6813 100644
--- a/policy/dataLook/dataLook.vue
+++ b/policy/dataLook/dataLook.vue
@@ -14,58 +14,63 @@
<view class="grid-box">
<view class="grid-item">
<view class="label">浼佷笟鎬绘暟</view>
- <view>5,400</view>
+ <view>{{infoData.companyNum || 0}}</view>
</view>
<view class="grid-item">
<view class="label">鎵ф硶鍗曚綅</view>
- <view>5,400</view>
+ <view>{{infoData.enforceCompanyNum || 0}}</view>
</view>
<view class="grid-item">
<view class="label">鎵ф硶浜哄憳</view>
- <view>5,400</view>
+ <view>{{infoData.enforceUserNum || 0}}</view>
</view>
<view class="grid-item">
<view class="label">鎵ф硶鐢宠</view>
- <view>5,400</view>
+ <view>{{infoData.enforceOrderNum || 0}}</view>
</view>
<view class="grid-item">
<view class="label">宸插鎵�</view>
- <view>5,400</view>
+ <view>{{infoData.enforceOrderCheckedNum || 0}}</view>
</view>
<view class="grid-item">
<view class="label">宸茬粨鏉�</view>
- <view>5,400</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"></u-icon>
+ <u-icon name="calendar" size="24" @click="openDate(1)"></u-icon>
</view>
<view class="number">
- <view class="date">2024-04-05 <text class="margin-text">鑷�</text> 2024-06-14</view>
+ <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" />
+ <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>
+ <u-icon name="calendar" size="24" @click="openDate(2)"></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="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">
- <text style="margin-right: 10rpx;">{{index+1}}</text>
- <text class="company u-line-1">鍖椾含涓滄柟鐩堣仈绉戞妧鏈夐檺鍏徃</text>
+ <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">54</text>
+ <text class="value" :class="{origin: index <= 2}">{{item.v}}</text>
</view>
- <view class="look-more">
+ <view class="look-more" @click="lookMore" v-if="showMore">
<text>鏌ョ湅鏇村</text>
<u-icon name="arrow-right" color="#7E8596"></u-icon>
</view>
@@ -75,46 +80,54 @@
<view class="box">
<view class="title set-flex-content-between set-flex">
<text>鎵ф硶绫诲瀷鍗犳瘮</text>
- <u-icon name="calendar" size="24"></u-icon>
+ <u-icon name="calendar" size="24" @click="openDate(3)"></u-icon>
</view>
<view class="number">
- <view class="date">2024-04-05 <text class="margin-text">鑷�</text> 2024-06-14</view>
+ <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"
- key="22"
- :opts="opts1"
- :chartData="chartData1"
- /> </view>
+ <qiun-data-charts type="rose" tooltipFormat="tooltipDemo1"
+
+ key="22" :opts="opts1" :chartData="chartData1" />
+ </view>
</view>
</view>
</view>
+ <u-datetime-picker
+ :show="show"
+ :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: [
- {
- name: '鍖椾含涓滄柟鐩堣仈绉戞妧鏈夐檺鍏徃',
- value: 54
- },
- {
- name: '鍖椾含涓滄柟鐩堣仈绉戞妧鏈夐檺鍏徃',
- value: 54
- },
- {
- name: '鍖椾含涓滄柟鐩堣仈绉戞妧鏈夐檺鍏徃',
- value: 54
- },
- {
- name: '鍖椾含涓滄柟鐩堣仈绉戞妧鏈夐檺鍏徃',
- value: 54
- }
],
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",
@@ -149,65 +162,154 @@
}
},
chartData1: {},
+ tooltipCustom: {},
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"
- }
- }
- }
+ 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,
+ }
+ }
+ }
}
},
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(this.pageQuerm).then(val => {
+ // console.log(val)
+ this.infoData = val.data.data
+ })
+ },
+ // 鎵ф硶娆℃暟閮ㄩ棬
getServerData() {
- //妯℃嫙浠庢湇鍔″櫒鑾峰彇鏁版嵁鏃剁殑寤舵椂
- setTimeout(() => {
- //妯℃嫙鏈嶅姟鍣ㄨ繑鍥炴暟鎹紝濡傛灉鏁版嵁鏍煎紡鍜屾爣鍑嗘牸寮忎笉鍚岋紝闇�鑷鎸変笅闈㈢殑鏍煎紡鎷兼帴
+ 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: ["宸ュ晢绠＄悊灞�", "鍩庡競绠＄悊灞�", "鍩庡競绠＄悊灞�", "鍩庡競绠＄悊灞�", "鍩庡競绠＄悊灞�", "鍩庡競绠＄悊灞�"],
+ categories: label,
series: [{
- name: "鐩爣鍊�",
- data: [35, 36, 31, 33, 13, 34]
- }
- ]
+ name: "鎵ф硶娆℃暟",
+ data: data,
+
+ }]
};
this.chartData = JSON.parse(JSON.stringify(res));
- }, 500);
+ })
+
},
+ // 浼佷笟琚墽娉曟鏁版帓琛�
+ 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() {
- //妯℃嫙浠庢湇鍔″櫒鑾峰彇鏁版嵁鏃剁殑寤舵椂
- 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);
- },
+ getEnforceTypeCount(this.pageQuerm).then(val => {
+ const data = val.data.data.map(item => {
+ return {
+ name: item.k,
+ value: item.v,
+ "labelText": item.k
+ }
+ })
+ let res = {
+ series: [{
+ data: data,
+ }]
+ };
+ this.chartData1 = JSON.parse(JSON.stringify(res));
+
+ })
+ },
}
}
</script>
--
Gitblit v1.9.1