From 23b2479c3bab29d12b7367aa6a75fb5126c67840 Mon Sep 17 00:00:00 2001
From: wjt <1797368093@qq.com>
Date: 星期四, 20 六月 2024 15:30:31 +0800
Subject: [PATCH] 结果上报页面
---
policy/dataLook/dataLook.vue | 209 +++++++++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 204 insertions(+), 5 deletions(-)
diff --git a/policy/dataLook/dataLook.vue b/policy/dataLook/dataLook.vue
index 8183fd0..4023b29 100644
--- a/policy/dataLook/dataLook.vue
+++ b/policy/dataLook/dataLook.vue
@@ -1,6 +1,94 @@
<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>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>
</template>
@@ -8,15 +96,126 @@
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);
+ },
}
}
</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