'更换域名小程序发布'

王恒

2025-08-06 c62f4961f9d86460a5d483d7b31c05f98b113290

 policy/dataLook/dataLook.vue

@@ -1,323 +1,344 @@
<template>
   <view>
      <u-navbar placeholder bgColor="#1171E0FF" leftIconColor="white" :autoBack="true">
  <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.enforceCompanyNum || 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">
               <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>
            </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="rose"    tooltipFormat="tooltipDemo1"

 key="22" :opts="opts1" :chartData="chartData1" />
               </view>
            </view>
         </view>
      </view>
          <u-datetime-picker
                      :show="show"
                  :maxDate="new Date().getTime()"
                  v-model="currentValue"
                      mode="year-month"
                  @confirm="confirmDate"
              ></u-datetime-picker>
   </view>
      </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>
   import {
      getTotalInfo,
      getDeptCount,
      getCompanyCount,
      getEnforceTypeCount
   } from '@/api/data.js'
   export default {
      data() {
         return {
            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,
                  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: {},
            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,
                  }
               }
            }
         }
      },
      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 => item.k)
               const data = value.map(item => item.v)
               let res = {
                  categories: label,
                  series: [{
                     name: "执法次数",
                     data: data,
							
                  }]
               };
               this.chartData = JSON.parse(JSON.stringify(res));
            })
  import {
    getTotalInfo,
    getDeptCount,
    getCompanyCount,
    getEnforceTypeCount
  } from '@/api/data.js'

         },
         // 企业被执法次数排行
         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,
                     "labelText": item.k
                  }
               })
               let res = {
                  series: [{
                     data:  data,
                     }]
               };
               this.chartData1 = JSON.parse(JSON.stringify(res));
			
            })
         },
      }
   }
  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;
   }
  page {
    background-color: #F4F4F4FF;
  }
</style>
<style lang="scss" scoped>
   @import "./dataLook.scss";
  @import "./dataLook.scss";
</style>