Merge branch 'master' of http://218.28.192.34:9999/r/sqys/sqys_xcx

wjt

2024-06-26 59f4dc012a2c42eebd31301444e0f8df9af088e0

 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">
@@ -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.enforceDeptNum || 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 v-if="!show" 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,55 @@
         <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="pie"   v-if="!show"  tooltipFormat="tooltipDemo1"

 key="22" :opts="opts1" :chartData="chartData1" />
               </view>
            </view>
         </view>
      </view>
          <u-datetime-picker
                      :show="show"
                  @cancel="show = false"
                  :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",
@@ -123,16 +137,20 @@
               padding: [15, 30, 0, 5],
               enableScroll: false,
               legend: {
                  show: false
                  show: false,
						
               },
               xAxis: {
                  boundaryGap: "justify",
                  disableGrid: false,
                  min: 0,
                  axisLine: false,
                  max: 40
                  max: 40,
                  gridColor: "#ededed"
               },
               yAxis: {},
               yAxis: {
                  gridColor: "#ededed"
               },
               extra: {
                  bar: {
                     type: "group",
@@ -149,65 +167,145 @@
               }
            },
            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"],
                       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"
                         }
                       }
            }
         }
      },
      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().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,
                  }
               })
               let res = {
                  series: [{
                     data:  data,
                     }]
               };
               this.chartData1 = JSON.parse(JSON.stringify(res));
			
            })
         },
      }
   }
</script>