|
|
@@ -1,16 +1,296 @@
|
|
|
<template>
|
|
|
- <office-user-select></office-user-select>
|
|
|
+ <view class="statics_main">
|
|
|
+ <view class="card_banner">
|
|
|
+ <u-tabs class="tab_title" lineColor="#36a7f3" :inactiveStyle="{color:'#fff'}"
|
|
|
+ :activeStyle="{color:'#e6d623'}" :itemStyle="{width:'30%',height:'40px'}" :current="current" scrollable
|
|
|
+ :list="list" @click="selectTab"></u-tabs>
|
|
|
+ </view>
|
|
|
+ <view class="card_one">
|
|
|
+ <view class="card_title">
|
|
|
+ 文件传阅卡统计分析
|
|
|
+ </view>
|
|
|
+ <view class="charts-box">
|
|
|
+ <qiun-data-charts type="column" :opts="opts"
|
|
|
+ :chartData="current==0?chartData:current==1?chartData1:chartData2" />
|
|
|
+ </view>
|
|
|
+ <view class="grid">
|
|
|
+ <view class="grid_item">
|
|
|
+ <view class="text_font_size">496</view>
|
|
|
+ <text style="color: #b8b8b8;font-size: 14px;">本年度新增</text>
|
|
|
+ </view>
|
|
|
+ <view class="grid_item item_mouth">
|
|
|
+ <view class="text_font_size">496</view>
|
|
|
+ <text style="color: #b8b8b8;font-size: 14px;">本月新增</text>
|
|
|
+
|
|
|
+ <!-- <view class="charts-box_1">
|
|
|
+ <qiun-data-charts type="arcbar" :chartData="chartDataOne" />
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <u-row>
|
|
|
+ <u-col span="6" class="card_two">
|
|
|
+ <view class="">
|
|
|
+ 本年度传阅卡来文部门top5
|
|
|
+ </view>
|
|
|
+ <view class="card_list">
|
|
|
+ <u-row class="cell_item" justify="space-between" gutter="10" v-for="(item,index) in dataList">
|
|
|
+ <u-col span="2">
|
|
|
+ <view class="text-grey text-center">
|
|
|
+ {{index+1}}
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="4">
|
|
|
+ <view class="text-center text-bold text-black ellipsis-description">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="6">
|
|
|
+ <view class="text-center text-grey text-sm ">
|
|
|
+ {{item.num}}
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="6" class="card_two">
|
|
|
+ <view class="">
|
|
|
+ 本月新增文件传阅卡分析
|
|
|
+ </view>
|
|
|
+ <view class="card_chart">
|
|
|
+ <view class="charts-box_1">
|
|
|
+ <qiun-data-charts type="ring" :opts="opts1" :chartData="chartDataOne" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import officeUserSelect from "@/components/office-user-select/office-user-select.vue"
|
|
|
- export default{
|
|
|
- components:{
|
|
|
- officeUserSelect
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ current: 0,
|
|
|
+ chartData: {},
|
|
|
+ chartData1: {},
|
|
|
+ chartData2: {},
|
|
|
+ chartDataOne: {},
|
|
|
+ list: [{
|
|
|
+ name: '年度'
|
|
|
+ }, {
|
|
|
+ name: '月份'
|
|
|
+ }, {
|
|
|
+ name: '来文部门'
|
|
|
+ }],
|
|
|
+ dataList: [{
|
|
|
+ name: '政府办',
|
|
|
+ num: 156
|
|
|
+ }, {
|
|
|
+ name: "法规办",
|
|
|
+ num: 85
|
|
|
+ }, {
|
|
|
+ name: "工业强市办",
|
|
|
+ num: 79
|
|
|
+ }, {
|
|
|
+ name: "环保办",
|
|
|
+ num: 71
|
|
|
+ }, {
|
|
|
+ name: "教育办",
|
|
|
+ num: 68
|
|
|
+ }],
|
|
|
+ opts: {
|
|
|
+ height: '240px',
|
|
|
+ color: ["#0ec89a"],
|
|
|
+ enableScroll: false,
|
|
|
+ legend: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ extra: {
|
|
|
+ column: {
|
|
|
+ type: "group",
|
|
|
+ width: 30,
|
|
|
+ activeBgColor: "#000000",
|
|
|
+ activeBgOpacity: 0.08
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ opts1: {
|
|
|
+ rotate: false,
|
|
|
+ rotateLock: false,
|
|
|
+ color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
|
|
|
+ "#ea7ccc"
|
|
|
+ ],
|
|
|
+ padding: [5, 5, 5, 5],
|
|
|
+ dataLabel: true,
|
|
|
+ enableScroll: false,
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ position: "right",
|
|
|
+ lineHeight: 25
|
|
|
+ },
|
|
|
+ title: {
|
|
|
+ name: "收益率",
|
|
|
+ fontSize: 15,
|
|
|
+ color: "#666666"
|
|
|
+ },
|
|
|
+ subtitle: {
|
|
|
+ name: "70%",
|
|
|
+ fontSize: 25,
|
|
|
+ color: "#7cb5ec"
|
|
|
+ },
|
|
|
+ extra: {
|
|
|
+ ring: {
|
|
|
+ ringWidth: 60,
|
|
|
+ activeOpacity: 0.5,
|
|
|
+ activeRadius: 10,
|
|
|
+ offsetAngle: 0,
|
|
|
+ labelWidth: 15,
|
|
|
+ border: true,
|
|
|
+ borderWidth: 3,
|
|
|
+ borderColor: "#FFFFFF"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
-
|
|
|
- }
|
|
|
+ onReady() {
|
|
|
+ this.getServerData();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ selectTab(item) {
|
|
|
+ this.current = item.index
|
|
|
+ },
|
|
|
+ getServerData() {
|
|
|
+ //模拟从服务器获取数据时的延时
|
|
|
+ setTimeout(() => {
|
|
|
+ let res = {
|
|
|
+ categories: ["2016", "2017", "2018", "2019", "2020", "2021"],
|
|
|
+ legend: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: [35, 36, 31, 33, 13, 34]
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ this.chartData = JSON.parse(JSON.stringify(res));
|
|
|
+ }, 500);
|
|
|
+ setTimeout(() => {
|
|
|
+ let res1 = {
|
|
|
+ categories: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"],
|
|
|
+ legend: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: [35, 40, 2, 0, 36, 31, 10, 33, 20, 13, 50, 34]
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ this.chartData1 = JSON.parse(JSON.stringify(res1));
|
|
|
+ }, 500);
|
|
|
+ setTimeout(() => {
|
|
|
+ let res2 = {
|
|
|
+ categories: ["政府办", "去去去", "11111"],
|
|
|
+ legend: {
|
|
|
+ show: false
|
|
|
+ },
|
|
|
+ series: [{
|
|
|
+ data: [35, 40, 2]
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ this.chartData2 = JSON.parse(JSON.stringify(res2));
|
|
|
+ }, 500);
|
|
|
+ setTimeout(() => {
|
|
|
+ //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
|
|
+ let res = {
|
|
|
+ series: [{
|
|
|
+ data: [{
|
|
|
+ "value": 50,
|
|
|
+ "labelShow": false
|
|
|
+ }, {
|
|
|
+ "value": 30,
|
|
|
+ "labelShow": false
|
|
|
+ }]
|
|
|
+ }]
|
|
|
+ };
|
|
|
+ this.chartDataOne = JSON.parse(JSON.stringify(res));
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ }
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
+ .card_banner {
|
|
|
+ width: 100%;
|
|
|
+ height: 100px;
|
|
|
+ background-color: #36a7f3;
|
|
|
+ padding: 10px 20px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .charts-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 250px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .charts-box_1 {
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card_one {
|
|
|
+ width: 96%;
|
|
|
+ margin: 0 2%;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 20px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ box-shadow: 0 0 0 1px #ccc;
|
|
|
+ top: -40px;
|
|
|
+ z-index: 4;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card_title {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1px solid #ccc;
|
|
|
+ background-color: eee;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid_item {
|
|
|
+ width: 50%;
|
|
|
+ /* height: 20vh; */
|
|
|
+ border-top: 1px solid #ccc;
|
|
|
+ margin-top: 20px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 10px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .grid_item .text_font_size {
|
|
|
+ font-size: 26px !important;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item_mouth {
|
|
|
+ border-left: 1px solid #ccc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card_two {
|
|
|
+ width: 100%;
|
|
|
+ margin: 10px;
|
|
|
+ position: relative;
|
|
|
+ border-radius: 20px;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ box-shadow: 0 0 0 1px #ccc;
|
|
|
+ }
|
|
|
+
|
|
|
+ .cell_item {
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ }
|
|
|
</style>
|
