From 8e1323b1cd842f9364d89089d342a176d9242d45 Mon Sep 17 00:00:00 2001
From: wjt <1797368093@qq.com>
Date: 星期一, 24 六月 2024 15:18:44 +0800
Subject: [PATCH] 首页数据添加
---
src/views/index/component/enforceSituation.vue | 516 ++++++++++++++++++++++++++++++++++++++++++++++
src/api/system/company/company.ts | 59 +++++
src/views/index/index.vue | 34 ++
3 files changed, 600 insertions(+), 9 deletions(-)
diff --git a/src/api/system/company/company.ts b/src/api/system/company/company.ts
index fbe9a50..2450f13 100644
--- a/src/api/system/company/company.ts
+++ b/src/api/system/company/company.ts
@@ -224,4 +224,63 @@
method: 'post',
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
+ })
}
\ No newline at end of file
diff --git a/src/views/index/component/enforceSituation.vue b/src/views/index/component/enforceSituation.vue
new file mode 100644
index 0000000..9c5efb6
--- /dev/null
+++ b/src/views/index/component/enforceSituation.vue
@@ -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>
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 3e0f350..e54b052 100644
--- a/src/views/index/index.vue
+++ b/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>
\ No newline at end of file
--
Gitblit v1.9.1