新功能添加

wjt

2024-07-23 c3b2d6d35b77d11ff86d45926501493b7fc8886e

 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 = {