首页数据添加

wjt

2024-06-24 8e1323b1cd842f9364d89089d342a176d9242d45

首页数据添加

 src/api/system/company/company.ts

@@ -225,3 +225,62 @@
    data: data
  })
}

// 数据汇总 /report/team/getTotalInfo
export function getTotalInfo(data) {
  return request({
    url: `/report/team/getTotalInfo`,
    method: 'get',
    params: data
  })
}
// /report/team/getMonthCount 执法次数月度分布
export function getMonthCount(data) {
  return request({
    url: `/report/team/getMonthCount`,
    method: 'get',
    params: data
  })
}
// /report/team/getDeptCount
export function getDeptCount(data) {
  return request({
    url: `/report/team/getDeptCount`,
    method: 'get',
    params: data
  })
}
// 企业被执法 /report/team/getCompanyCount

export function getCompanyCount(data) {
  return request({
    url: `/report/team/getCompanyCount`,
    method: 'get',
    params: data
  })
}
// 执法类型占比 /report/team/getComplaintTypeCount

export function getComplaintTypeCount(data) {
  return request({
    url: `/report/team/getComplaintTypeCount`,
    method: 'get',
    params: data
  })
}
// /report/team/getComplaintStatusCount 投诉状态占比
export function getComplaintStatusCount(data) {
  return request({
    url: `/report/team/getComplaintStatusCount`,
    method: 'get',
    params: data
  })
}
//  执法类型占比
export function getEnforceTypeCount(data) {
  return request({
    url: `/report/team/getEnforceTypeCount`,
    method: 'get',
    params: data
  })
}

 src/views/index/component/enforceSituation.vue

New file
@@ -0,0 +1,516 @@
<template>
  <el-card>
    <template #header>
      <div class="card-header">
        <span>执法情况汇总</span>
      </div>
    </template>
    <div>
      <div class="border"> <!-- 执法单位执法次数月度分布 -->
        <div class="flex-box">
          <div>执法单位执法次数月度分布</div>
          <el-form>
            <el-form-item label="执法单位">
              <el-select style="width: 200px" v-model="echarts1Ruery.deptId">
                <el-option v-for="(item, index) in deptList" :key="index" :label="item.deptName"
                  :value="item.deptId"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div id="echarts1" ref="echarts1"></div>
      </div>
      <div class="border">
        <div class="flex-box" >
          <div>执法单位执法次数统计</div>
          <el-form>
            <el-form-item label="月份">
              <el-date-picker v-model="mounth.month" type="monthrange" range-separator="至" start-placeholder="开始月份"
                end-placeholder="结束月份" />
            </el-form-item>
          </el-form>
        </div>
        <!-- 执法单位执法次数月度分布 -->
        <div id="echarts2" ref="echarts2"></div>
      </div>
      <div class="border">
        <div class="flex-box" >
          <div>企业被执法次数月度分布</div>
          <!-- <el-form>
            <el-form-item label="企业">
              <el-select style="width: 200px;" filterable v-model="queryParams.deptId">
                <el-option v-for="(item, index) in listCompanyData" :key="index" :label="item.companyName"
                  :value="item.companyId"></el-option>
              </el-select>
            </el-form-item>
          </el-form> -->
        </div>
        <!-- 执法单位执法次数月度分布 -->
        <div id="echarts3" ref="echarts3"></div>
      </div>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="border">
            <div class="flex-box" >
              <div>执法类型占比</div>
              <el-form>
                <el-form-item label="月份">
                  <el-date-picker v-model="typeArg.month" type="monthrange" range-separator="至" start-placeholder="开始月份"
                    end-placeholder="结束月份" />
                </el-form-item>
              </el-form>
            </div>
            <!-- 执法单位执法次数月度分布 -->
            <div id="echarts4" ref="echarts4"></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="border">
            <div class="flex-box">
              <div>企业投诉处理情况占比</div>
              <el-form>
                <el-form-item label="月份">
                  <el-date-picker v-model="typeArg1.month" type="monthrange" range-separator="至"
                    start-placeholder="开始月份" end-placeholder="结束月份" />
                </el-form-item>
              </el-form>
            </div>
            <!-- 执法单位执法次数月度分布 -->
            <div id="echarts5" ref="echarts5"></div>
          </div>
        </el-col>
      </el-row>
      <!-- 投诉问题类型处理情况 -->

      <div class="border">
        <div>投诉问题类型处理情况</div>
        <div id="echarts6" ref="echarts6"></div>
      </div>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import * as echarts from 'echarts'
import { listDept } from '@/api/system/dept'
import { parseTime } from "@/utils/ruoyi";
import { getMonthCount, getDeptCount, listCompany, getCompanyCount, getComplaintTypeCount, getComplaintStatusCount, getEnforceTypeCount } from '@/api/system/company/company'
import { ElMessage } from 'element-plus';
const deptList = ref([])
const echarts1 = ref()
const echarts1Ruery = reactive({
  deptId: ''
})
watch(() => echarts1Ruery.deptId, () => {
  getMonthCountHttp()
})
function getData() {
  // 查询执法单位
  listDept({ parentId: 100 }).then((val) => {
    deptList.value = val.data
    echarts1Ruery.deptId = deptList.value[2].deptId
  })
}
function getMonthCountHttp() {
  getMonthCount(echarts1Ruery).then((val) => {
    const label: any[] = []
    const value: any[] = []
    val.data.map((item: { k: any; v: any }) => {
      label.push(item.k)
      value.push(item.v)
    })
    const setOptions = echarts.init(echarts1.value, 'macarons')
    setOptions.setOption({
      tooltip: {
        trigger: 'axis',
        formatter: param => {
          let result = '';
          param.forEach(function (item) {
            // item 是每一个系列的数据
            const seriesName = item.seriesName; // 系列名称
            const value = item.value; // 数据值
            const marker = item.marker; // 标志图形
            result += `${item.axisValue}月<br/>执法次数: ${value}<br/>`;
          });
          return result
        }
      },
      grid: {  //方法 2
        x: 25,
        y: 45,
        x2: 0,
        y2: 0,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: label
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: value,
          type: 'bar',
          barWidth: 50
        }
      ]
    })
  })
}
getData()

// 执法单位执法次数统计
const echarts2 = ref()
const mounth = reactive({
  month: ["2025-06", "2025-06"],
  beginTime: "2025-06",
  endTime: "2025-06"
})
mounth.beginTime = parseTime(new Date().setDate(1), '{y}-{m}-{d}')
mounth.endTime = parseTime(new Date(), '{y}-{m}-{d}')
mounth.month = [mounth.beginTime, mounth.endTime]
watch(() => mounth.month, (e) => {
  let year = new Date(e[1]).getFullYear()//查询本月天数
  let month = new Date(e[1]).getMonth()//查询本月天数
  const lastDay = new Date(year, month, 0).getDate();
  mounth.beginTime = parseTime(new Date(e[0]))
  mounth.endTime = parseTime(new Date(e[1]).setDate(lastDay))
  getDeptCountHttp()
})
function getDeptCountHttp() {
  getDeptCount(mounth).then(val => {
    const label: any[] = []
    const value: any[] = []
    val.data.map((item: { k: any; v: any }) => {
      label.push(item.k)
      value.push(item.v)
    })
    const setOptions = echarts.init(echarts2.value, 'macarons')
    setOptions.setOption({
      tooltip: {
        trigger: 'axis',
        formatter: param => {
          let result = '';
          param.forEach(function (item) {
            // item 是每一个系列的数据
            const seriesName = item.seriesName; // 系列名称
            const value = item.value; // 数据值
            const marker = item.marker; // 标志图形
            result += `${item.axisValue}月<br/>执法次数: ${value}<br/>`;
          });
          return result
        }
      },
      grid: {  //方法 2
        x: 25,
        y: 45,
        x2: 0,
        y2: 0,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: label
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: value,
          type: 'bar',
          barWidth: 50
        }
      ]
    })
  })
}
getDeptCountHttp()

// 企业企业被执法次数月度分布
const listCompanyData = ref([])
const echarts3 = ref()
const queryParams = reactive({
  deptId: ''
})
function listCompanyHttp() {
  listCompany({ pageNum: 1, pageSize: 100 }).then(val => {
    listCompanyData.value = val.rows
    queryParams.companyId = val.rows[0].companyId
    getCompanyCountHttp()
  })
}
function getCompanyCountHttp() {
  getCompanyCount(queryParams).then(val => {
    console.log(val.data)
    const endData = val.data.slice(0,10)
    const label: any[] = []
    const value: any[] = []
    endData.map((item: { k: any; v: any }) => {
      label.push(item.k)
      value.push(item.v)
    })
    const setOptions = echarts.init(echarts3.value, 'macarons')
    setOptions.setOption({
      tooltip: {
        trigger: 'axis',
        formatter: param => {
          let result = '';
          param.forEach(function (item) {
            // item 是每一个系列的数据
            const seriesName = item.seriesName; // 系列名称
            const value = item.value; // 数据值
            const marker = item.marker; // 标志图形
            result += `${item.axisValue}月<br/>执法次数: ${value}<br/>`;
          });
          return result
        }
      },
      grid: {  //方法 2
        x: 25,
        y: 45,
        x2: 0,
        y2: 0,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: label
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: value,
          type: 'bar',
          barWidth: 50
        }
      ]
    })
  })
}
listCompanyHttp()

// 执法类型占比
const echarts4 = ref()
const typeArg = reactive({
  month: ["2025-06", "2025-06"],
  beginTime: "2025-06",
  endTime: "2025-06"
})
typeArg.beginTime = parseTime(new Date().setDate(1), '{y}-{m}-{d}')
console.log(typeArg.beginTime)
typeArg.endTime = parseTime(new Date(), '{y}-{m}-{d}')
typeArg.month = [typeArg.beginTime, typeArg.endTime]
function getComplaintTypeCountHttp() {
  getEnforceTypeCount(typeArg).then(val => {
    // console.log(val)
    const label: any[] = []
    const value: any[] = []
    const data = val.data.map((item: { k: any; v: any }) => {
      return {
        name: item.k,
        value: item.v
      }
    })
    const setOptions = echarts.init(echarts4.value, 'macarons')
    setOptions.setOption({
      legend: {
        top: 'bottom'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c} ({d}%)'
      },
      toolbox: {
        show: false,
        feature: {
          mark: { show: true },
          dataView: { show: true, readOnly: false },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      series: [
        {
          name: 'Nightingale Chart',
          type: 'pie',
          radius: [50, 180],
          center: ['50%', '50%'],
          roseType: 'area',
          itemStyle: {
            borderRadius: 8
          },
          data: data
        }
      ]
    })
  })
}
getComplaintTypeCountHttp()
// 企业投诉处理情况占比
const echarts5 = ref()
const typeArg1 = reactive({
  month: ["2025-06", "2025-06"],
  beginTime: "2025-06",
  endTime: "2025-06"
})
typeArg1.beginTime = parseTime(new Date().setDate(1), '{y}-{m}-{d}')
console.log(typeArg1.beginTime)
typeArg1.endTime = parseTime(new Date(), '{y}-{m}-{d}')
typeArg1.month = [typeArg1.beginTime, typeArg1.endTime]
function getComplaintStatusCountHttp() {
  getComplaintStatusCount(typeArg1).then(val => {
    let mapState = {
      0: '带响应',
      1: '处理中',
      '-1': '驳回',
      2: '办结'
    }
    const data = val.data.map((item: { k: any; v: any }) => {
      return {
        name: mapState[item.k],
        value: item.v
      }
    })
    // 0未处理，1已处理 -1 处理中
    const setOptions = echarts.init(echarts5.value, 'macarons')
    setOptions.setOption({
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }
      ]
    })
  })
}
getComplaintStatusCountHttp()
// 投诉类型处理情况
const echarts6 = ref() 
async function  getComplaintTypeCountHttpGet() {
 try{
  const noneHnalder = await getComplaintTypeCount({doComplaint: 0})
  const handler = await getComplaintTypeCount({doComplaint: 1})
  const value1: any[] = []
  const value: any[] = []
  const label: any[] = []
  noneHnalder.data.map((item: { k: any; v: any }) => {
    value.push({
      value: item.v
    })
    label.push(item.k)
  })
  handler.data.map(item => {
    value1.push({
      value: item.v
    })
  })
  const setOptions = echarts.init(echarts6.value, 'macarons')
    setOptions.setOption({
      xAxis: {
        type: 'category',
        data: label
      },
      yAxis: {
        type: 'value'
      },
      legend: {
        show: true
      },
      grid: {  //方法 2
        x: 25,
        y: 45,
        x2: 0,
        y2: 0,
        containLabel: true
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} : {c}'
      },
      series: [{
        type: 'bar',
        stack: 'a',
        name: '未处理',
        data: value,
        barWidth: 50
      }, {
        type: 'bar',
        stack: 'a',
        name: '已处理',
        data: value1,
        barWidth: 50
      }]
    })

  handler
 } catch(err) {
    ElMessage.error(err.message || '请求出错')
 }

}
getComplaintTypeCountHttpGet()
</script>

<style>
.card-header {
  font-size: 20px;
  font-weight: 600;
}

.flex-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 10px;
}

#echarts1,
#echarts2,
#echarts3,
#echarts4,
#echarts5,#echarts6 {
  height: 420px;
}

.border {
  border: 1px solid #eee;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px
}
</style>

 src/views/index/index.vue

@@ -2,45 +2,57 @@
  <div class="app-container">
    <div class="content">
      <div class="box">
        <div>153</div>
        <div>{{dataInfo.companyNum || 0}}</div>
        <div>入驻企业总数</div>
      </div>
      <div class="box">
        <div>153</div>
        <div>{{dataInfo.enforceOrderCheckedNum|| 0}}</div>
        <div>已检查企业数</div>
      </div>
      <div class="box">
        <div>153</div>
        <div>{{dataInfo.enforceCompanyNum|| 0}}</div>
        <div>执法单位数</div>
      </div>
      <div class="box">
        <div>153</div>
        <div>{{dataInfo.enforceUserNum|| 0}}</div>
        <div>执法人员数</div>
      </div>
      <div class="box">
        <div>153</div>
        <div>{{dataInfo.enforceOrderNum|| 0}}</div>
        <div>执法记录总数</div>
      </div>
      <div class="box">
        <div>153</div>
        <div>{{dataInfo.enforceOrderCompleteNum|| 0}}</div>
        <div>投诉记录数</div>
      </div>
      <div class="box">
        <div>153</div>
        <div>{{dataInfo.docNum}}</div>
        <div>政策条数</div>
      </div>
    </div>
    <div class="line"></div>
    <enforceSituation></enforceSituation>
  </div>
</template>

<script lang="ts" setup>
import { getTotalInfo } from '@/api/system/company/company'
import enforceSituation from './component/enforceSituation.vue'
const dataInfo = ref({})
function getTotalInfoHttp() {
  getTotalInfo().then(res => {
    dataInfo.value = res.data
  })
}
getTotalInfoHttp()
</script>
<style lang="scss" scoped>
.content{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-gap: 20px;
  &>.box{
    border: 1px solid #bfbfbf;
    border: 1px solid #fbfbfb;
    box-shadow:0px 0px 12px rgba(0,0,0,0.12);
    border-radius: 5px;
    padding: 20px;
    cursor: pointer;
@@ -53,5 +65,9 @@
      color: #818181;
    }
  }

}
.line{
    margin: 20px;
}
</style>