'交接版本'

王恒

2025-09-26 28ab9da809aa7c5d42e1871af5fd10c2de09ac66

 policy/dataLook/dataLook.vue

@@ -1,22 +1,344 @@
<template>
   <view>
		
   </view>
  <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>{{infoData.companyNum || 0}}</view>
          </view>
          <view class="grid-item">
            <view class="label">执法单位</view>
            <view>{{infoData.enforceDeptNum || 0}}</view>
          </view>
          <view class="grid-item">
            <view class="label">执法人员</view>
            <view>{{infoData.enforceUserNum || 0}}</view>
          </view>
          <view class="grid-item">
            <view class="label">执法申请</view>
            <view>{{infoData.enforceOrderNum || 0}}</view>
          </view>
          <view class="grid-item">
            <view class="label">已审批</view>
            <view>{{infoData.enforceOrderCheckedNum || 0}}</view>
          </view>
          <view class="grid-item">
            <view class="label">已结束</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" @click="openDate(1)"></u-icon>
        </view>
        <view class="number set-height">
          <view class="date">{{pageQuerm.beginTimeStr1}} <text class="margin-text">至</text> {{pageQuerm.endTimeStr1}}
          </view>
          <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>
      <view class="box">
        <view class="title set-flex-content-between set-flex">
          <text>企业被执法次数排行</text>
          <u-icon name="calendar" size="24" @click="openDate(2)"></u-icon>
        </view>
        <view class="number">
          <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">
                <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" :class="{origin: index <= 2}">{{item.v}}</text>
            </view>
            <view class="look-more" @click="lookMore" v-if="showMore">
              <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" @click="openDate(3)"></u-icon>
        </view>
        <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="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>
   export default {
      data() {
         return {
				
         }
      },
      methods: {
			
      }
   }
  import {
    getTotalInfo,
    getDeptCount,
    getCompanyCount,
    getEnforceTypeCount
  } from '@/api/data.js'

  export default {
    data() {
      return {
        likeData: {},
        option: {},
        typeItem: '',
        currentValue: '',
        show: false,
        infoData: [],
        listData: [],
        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",
            "#ea7ccc"
          ],
          padding: [15, 30, 0, 5],
          enableScroll: false,
          legend: {
            show: false,
          },
          xAxis: {
            boundaryGap: "justify",
            disableGrid: false,
            min: 0,
            axisLine: false,
            gridColor: "#ededed",
          },
          yAxis: {
            gridColor: "#ededed",
          },
          extra: {
            bar: {
              type: "group",
              width: 15,
              meterBorde: 1,
              meterFillColor: "#FFFFFF",
              activeBgColor: "#000000",
              activeBgOpacity: 0.08,
              linearType: "custom",
              barBorderCircle: true,
              seriesGap: 20,
              categoryGap: 20
            }
          }
        },
        chartData1: {},
        tooltipCustom: {},
        opts1: {
          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() {
        getDeptCount(this.pageQuerm).then(val => {


          const value = val.data.data
          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,
            series: [{
              name: "执法次数",
              data: data,

            }]
          };
          this.chartData = JSON.parse(JSON.stringify(res));
        })

      },
      // 企业被执法次数排行
      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() {
        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>

<style>

  page {
    background-color: #F4F4F4FF;
  }
</style>
<style lang="scss" scoped>
  @import "./dataLook.scss";
</style>