From 9b23d3da6db5fb2f1998d4867f5c5093916686ea Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=88=B1=7E=E6=B5=B7=7E=E7=88=B1=E6=B5=B7=E7=88=B1?=
 =?UTF-8?q?=E6=B5=B7=7E=E5=8F=B3?= <1828712314@qq.com>
Date: Wed, 19 Mar 2025 08:34:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=9B=BE=E6=A0=87=E5=92=8C?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E4=BC=98=E5=8C=96=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/home/index.ts                         |  38 ++
 src/layout/components/AppView.vue             |   2 +-
 .../components/BackOperation/src/index.vue    |   2 +-
 src/layout/components/Screen/src/Screen.vue   |   2 +-
 src/layout/components/ToolHeader.vue          |   3 -
 .../components/UserInfo/src/UserInfo.vue      |   5 +-
 src/router/modules/remaining.ts               |   2 +-
 src/store/modules/app.ts                      |   2 +-
 src/styles/var.css                            |   2 +-
 src/utils/dict.ts                             |   2 +
 src/views/Home/Index.vue                      | 447 ++++++++----------
 src/views/Home/echarts-data.ts                | 301 ++++++++----
 12 files changed, 473 insertions(+), 335 deletions(-)
 create mode 100644 src/api/home/index.ts

diff --git a/src/api/home/index.ts b/src/api/home/index.ts
new file mode 100644
index 0000000..0a0994c
--- /dev/null
+++ b/src/api/home/index.ts
@@ -0,0 +1,38 @@
+import request from '@/config/axios'
+
+export const HomeApi = {
+  /**
+   * 获取区域
+   */
+  getArea: () => {
+    return request.get({
+      url: `/system/home/getUserArea`
+    })
+  },
+  /**
+   * 获取列表数据
+   */
+  getListData: params => {
+    return request.get({
+      url: '/system/home/appCount2',
+      params
+    })
+  },
+  /**
+   * 获取饼图相关的数据
+   */
+  getPieData: (params) => {
+    return request.get({
+      url: '/system/home/appCount1',
+      params
+    })
+  },
+  /**
+   * 近6个月任务走势
+   */
+  getTaskNumDoing:()=>{
+    return request.get({
+      url: '/system/home/taskNumDoing'
+    })
+  }
+}
diff --git a/src/layout/components/AppView.vue b/src/layout/components/AppView.vue
index df720a1..f819275 100644
--- a/src/layout/components/AppView.vue
+++ b/src/layout/components/AppView.vue
@@ -36,7 +36,7 @@ provide('reload', reload)
 <template>
   <section
     :class="[
-      'p-[var(--app-content-padding)] w-full bg-[var(--app-content-bg-color)] dark:bg-[var(--el-bg-color)]',
+      'p-[var(--app-content-padding)] w-full bg-[var(--app-content-bg-color)]',
       {
         '!min-h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height))] pb-0':
           footer
diff --git a/src/layout/components/BackOperation/src/index.vue b/src/layout/components/BackOperation/src/index.vue
index 7a66993..032bc13 100644
--- a/src/layout/components/BackOperation/src/index.vue
+++ b/src/layout/components/BackOperation/src/index.vue
@@ -5,7 +5,7 @@ import { onBeforeRouteUpdate } from 'vue-router'
 defineOptions({ name: 'BackOperation' })
 
 const router = useRouter()
-const isBack = ref(false)
+const isBack:any = ref(false)
 defineProps({
   color: propTypes.string.def('')
 })
diff --git a/src/layout/components/Screen/src/Screen.vue b/src/layout/components/Screen/src/Screen.vue
index fd5f720..04373c2 100644
--- a/src/layout/components/Screen/src/Screen.vue
+++ b/src/layout/components/Screen/src/Screen.vue
@@ -25,6 +25,6 @@ const screenView = () => {
 
 <template>
   <div :class="prefixCls"  @click="screenView">
-    <Icon :color="color" icon="svg-icon:screen" :size="18" />
+    <Icon :color="color" icon="ep:monitor" :size="18" />
   </div>
 </template>
diff --git a/src/layout/components/ToolHeader.vue b/src/layout/components/ToolHeader.vue
index c109bfb..62ac142 100644
--- a/src/layout/components/ToolHeader.vue
+++ b/src/layout/components/ToolHeader.vue
@@ -65,9 +65,6 @@ export default defineComponent({
               color="var(--top-header-text-color)"
             ></LocaleDropdown>
           ) : undefined}
-          {message.value ? (
-            <Message class="custom-hover" color="var(--top-header-text-color)"></Message>
-          ) : undefined}
           <UserInfo></UserInfo>
         </div>
       </div>
diff --git a/src/layout/components/UserInfo/src/UserInfo.vue b/src/layout/components/UserInfo/src/UserInfo.vue
index 4945567..1bad1cf 100644
--- a/src/layout/components/UserInfo/src/UserInfo.vue
+++ b/src/layout/components/UserInfo/src/UserInfo.vue
@@ -24,7 +24,6 @@ const { getPrefixCls } = useDesign()
 const prefixCls = getPrefixCls('user-info')
 
 const avatar = computed(() => userStore.user.avatar || avatarImg)
-const userName = computed(() => userStore.user.nickname ?? 'Admin')
 const realName=computed(()=>userStore.user.realName ?? '管理员')
 // 锁定屏幕
 const lockStore = useLockStore()
@@ -58,8 +57,8 @@ const toDocument = () => {
   <ElDropdown class="custom-hover" :class="prefixCls" trigger="click">
     <div class="flex items-center gap-4px">
       <ElAvatar :src="avatar" alt="" :size="32" class=" rounded-[50%]" />
-      <span class="text-14px text-[var(--top-header-text-color)] <lg:hidden">
-        {{ realName }}
+      <span class="text-14px color-#303133 font-500 line-height-22px">
+        {{ realName }}|{{}}
       </span>
     </div>
     <template #dropdown>
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index c3a0e32..d4e7744 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -63,7 +63,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
         name: 'Index',
         meta: {
           title: '驾驶舱',
-          icon: 'ep:home-filled',
+          icon: 'ep:pie-chart',
           noCache: false,
           affix: true
         }
diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index cd4e18d..ee045fa 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -62,7 +62,7 @@ export const useAppStore = defineStore('app', {
       tagsViewIcon: false, // 是否显示标签图标
       logo: true, // logo
       fixedHeader: true, // 固定toolheader
-      footer: true, // 显示页脚
+      footer: false, // 显示页脚
       greyMode: false, // 是否开始灰色模式，用于特殊悼念日
       fixedMenu: wsCache.get('fixedMenu') || false, // 是否固定菜单
       layout: wsCache.get(CACHE_KEY.LAYOUT) || 'classic', // layout布局
diff --git a/src/styles/var.css b/src/styles/var.css
index de6820d..54874e3 100644
--- a/src/styles/var.css
+++ b/src/styles/var.css
@@ -47,7 +47,7 @@
 
   --app-content-padding: 20px;
 
-  --app-content-bg-color: #f5f7f9;
+  --app-content-bg-color: #f5f7fa;
 
   --app-footer-height: 50px;
 
diff --git a/src/utils/dict.ts b/src/utils/dict.ts
index c8d323f..22bec5a 100644
--- a/src/utils/dict.ts
+++ b/src/utils/dict.ts
@@ -118,6 +118,8 @@ export enum DICT_TYPE {
   ENTERPRISES_STATUS = 'enterprises_status',
   //==========  资质 ==========
   ENTERPRISES_QUA = 'enterprise_qua',
+  //==========  任务 ==========
+  SELECT_WEEK = 'select_week',
 
   // ========== SYSTEM 模块 ==========
   SYSTEM_USER_SEX = 'system_user_sex',
diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue
index c8c0d47..ad27ca3 100644
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -1,98 +1,126 @@
 <template>
-  <el-row :gutter="8" justify="space-between">
+  <el-row justify="space-between">
+    <el-col :span="14">
+      <el-form :model="queryParams" class="queryForm" inline>
+        <el-form-item label="按区域" prop="region">
+          <el-select v-model="queryParams.region" placeholder="请选择区域" size="large">
+            <el-option
+              v-for="option in area"
+              :key="option.value"
+              :value="option.value"
+              :label="option.label"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="按周期" prop="selectWeek">
+          <el-select
+            v-model="queryParams.selectWeek"
+            placeholder="请选择周期"
+            clearable
+            size="large"
+          >
+            <el-option
+              v-for="option in getIntDictOptions(DICT_TYPE.SELECT_WEEK)"
+              :key="option.value"
+              :value="option.value"
+              :label="option.label"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+    </el-col>
+    <section class="flex gap-20px">
+      <el-button type="primary" plain>
+        <Icon icon="ep:search" />
+        查询
+      </el-button>
+      <el-button>
+        <Icon icon="ep:refresh" />
+        重置
+      </el-button>
+    </section>
+  </el-row>
+  <el-row :gutter="20" justify="space-between">
     <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" :height="280">
-      <el-card shadow="hover" class="mb-8px">
-        <template #header>
-          执法完成率
-        </template>
+      <el-card shadow="hover" class="mb-20px">
+        <template #header> 任务进度 </template>
         <el-skeleton :loading="loading" animated>
-          <Echart :options="pieOptionsData" :height="280" />
+          <Echart :options="pieOptionsData" :height="338" />
         </el-skeleton>
       </el-card>
     </el-col>
-
     <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
-      <el-card shadow="hover" class="mb-8px">
-        <template #header>
-          执法与整改
-        </template>
+      <el-card shadow="hover">
+        <template #header> 执法整改 </template>
         <el-skeleton :loading="loading" animated>
-          <Echart :options="barOptionsData" :height="280" />
+          <Echart :options="barOptionsData" :height="338" />
         </el-skeleton>
       </el-card>
     </el-col>
     <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
-      <el-card shadow="hover" class="mb-8px">
+      <el-card shadow="hover">
         <template #header>
-          任务与执法
+          <section class="flex justify-between">
+            <span>任务执法</span>
+            <span class="color-#A8ABB2 font-normal"> 近6个月走势 </span>
+          </section>
         </template>
         <el-skeleton :loading="loading" animated>
-          <Echart :options="lineOptions" :height="280" />
+          <Echart :options="lineOptionsData" :height="338" />
         </el-skeleton>
       </el-card>
     </el-col>
   </el-row>
-  <el-row :gutter="8" justify="space-between">
-    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
+  <el-row :gutter="20" justify="space-between">
+    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-20px">
       <el-card ref="taskNewCard" shadow="never">
-        <template #header>
-          最新任务
-        </template>
+        <template #header> 最新任务 </template>
         <el-skeleton :loading="loading" animated>
-          <div v-for="(item, index) in tasks" :key="`dynamics-${index}`">
-            <div>
-              <div class="text-12px flex justify-between">
-                <span>{{ item.title }}</span>
-                <span class="mr-10">{{ item.user }}</span>
-                <span class="mr-10">{{ item.date }}</span>
-              </div>
-
+          <section class="p-24px flex flex-col gap-24px block">
+            <div
+              v-for="(item, index) in tasks"
+              :key="`dynamics-${index}`"
+              class="text-15px flex justify-between"
+            >
+              <span class="color-#303133">{{ item.title }}</span>
+              <span class="color-#606266">{{ item.user }}</span>
+              <span class="color-#909399">{{ item.date }}</span>
             </div>
-            <el-divider height="10px" class="m-4 p-0" style="margin:8px 0" />
-          </div>
+          </section>
         </el-skeleton>
       </el-card>
     </el-col>
-    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
+    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
       <el-card shadow="never">
-        <template #header>
-          逾期排行
-        </template>
+        <template #header> 整改排名 </template>
         <el-skeleton :loading="loading" animated>
-          <div v-for="(item, index) in notice2" :key="`dynamics-${index}`">
-            <template v-if="item.type === '资质逾期'">
-              <div>
-                <div class="text-12px flex justify-between">
-                  <span>{{ item.title }}</span>
-                  <span class="mr-10">{{ item.days }}</span>
-                </div>
-
-              </div>
-              <el-divider height="10px" class="m-4 p-0" style="margin:8px 0" />
-          </template>
-          </div>
+          <section class="p-24px flex flex-col gap-24px block">
+            <div
+              v-for="(item, index) in notice1"
+              :key="`dynamics-${index}`"
+              class="text-15px flex justify-between"
+            >
+              <span class="color-#303133">{{ item.name }}</span>
+              <span class="color-#909399">{{ item.count }}次</span>
+            </div>
+          </section>
         </el-skeleton>
       </el-card>
     </el-col>
-    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24" class="mb-8px">
+    <el-col :xl="8" :lg="8" :md="24" :sm="24" :xs="24">
       <el-card shadow="never">
-        <template #header>
-          整改排行
-        </template>
+        <template #header> 资质临期 </template>
         <el-skeleton :loading="loading" animated>
-          <div v-for="(item, index) in notice2" :key="`dynamics-${index}`">
-            <template v-if="item.type === '整改次数'">
-
-            <div>
-              <div class="text-12px flex justify-between">
-                <span>{{ item.title }}</span>
-                <span class="mr-10">{{ item.days }}</span>
-              </div>
-
+          <section class="p-24px flex flex-col gap-24px block">
+            <div
+              v-for="(item, index) in notice2"
+              :key="`dynamics-${index}`"
+              class="text-15px flex justify-between"
+            >
+              <span class="color-#303133">{{ item.name }}</span>
+              <span class="color-#909399">{{ item.count }}天</span>
             </div>
-            <el-divider height="10px" class="m-4 p-0" style="margin:8px 0" />
-            </template>
-          </div>
+          </section>
         </el-skeleton>
       </el-card>
     </el-col>
@@ -101,23 +129,27 @@
 <script lang="ts" setup>
 import { set } from 'lodash-es'
 import { EChartsOption } from 'echarts'
-import { pieOptions, barOptions,lineOptions } from './echarts-data'
+import { pieOptions, barOptions, lineOptions } from './echarts-data'
+import { HomeApi } from '@/api/home'
+import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
 
 defineOptions({ name: 'Home' })
 
-const { t } = useI18n()
 const loading = ref(true)
 const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
+const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
+const lineOptionsData = reactive<EChartsOption>(lineOptions) as EChartsOption
 
+const queryParams = reactive({
+  selectWeek: '',
+  region: ''
+})
+
+const area = ref<any[]>([])
 
 // 监听两个卡片高度变化并保持同步
 const taskNewCard = ref()
 
-// 使用ResizeObserver监听高度变化
-onMounted(() => {
-})
-
-
 const tasks = reactive<any>([
   {
     title: '义县一公司环保信息',
@@ -179,188 +211,121 @@ const tasks = reactive<any>([
     user: '刘十二',
     status: 2
   }
-
 ])
 
-const notice2 = reactive<any>([
-  {
-    type: '资质逾期',
-    title: '义县一公司环保信息',
-    date: '2023-01-01 12:00:00',
-    days: '逾期1天'
-  },
-  {
-    type: '整改次数',
-    title: '义县一公司环保信息',
-    date: '2023-01-01 12:00:00',
-    days: '整改1次'
-  },
-  {
-    type: '资质逾期',
-    title: '义县一公司环保信息',
-    date: '2023-01-01 12:00:00',
-    days: '逾期1天'
-  },
-  {
-    type: '整改次数',
-    title: '义县一公司环保信息',
-    date: '2023-01-01 12:00:00',
-    days: '整改1次'
-  },
-  {
-    type: '资质逾期',
-    title: '义县一公司环保信息',
-    date: '2023-01-01 12:00:00',
-    days: '逾期1天'
-  },
-  {
-    type: '整改次数',
-    title: '义县一公司环保信息',
-    date: '2023-01-01 12:00:00',
-    days: '整改1次'
-  },
-  {
-    type: '资质逾期',
-    title: '锦州二公司安全检查',
-    date: '2023-01-02 12:00:00',
-    days: '逾期2天'
-  },
-  {
-    type: '整改次数',
-    title: '锦州二公司安全检查',
-    date: '2023-01-02 12:00:00',
-    days: '整改2次'
-  },
-  {
-    type: '资质逾期',
-    title: '北镇三公司环评整改',
-    date: '2023-01-03 12:00:00',
-    days: '逾期3天'
-  },
-  {
-    type: '整改次数',
-    title: '北镇三公司环评整改',
-    date: '2023-01-03 12:00:00',
-    days: '整改3次'
-  },
-  {
-    type: '资质逾期',
-    title: '凌海四公司排污监测',
-    date: '2023-01-04 12:00:00',
-    days: '逾期4天'
-  },
-  {
-    type: '整改次数',
-    title: '凌海四公司排污监测',
-    date: '2023-01-04 12:00:00',
-    days: '整改4次'
-  },
-  {
-    type: '资质逾期',
-    title: '黑山五公司设备巡检',
-    date: '2023-01-05 12:00:00',
-    days: '逾期5天'
-  },
-  {
-    type: '整改次数',
-    title: '黑山五公司设备巡检',
-    date: '2023-01-05 12:00:00',
-    days: '整改5次'
-  },
-  {
-    type: '资质逾期',
-    title: '义县六公司安全培训',
-    date: '2023-01-06 12:00:00',
-    days: '逾期6天'
-  },
-  {
-    type: '整改次数',
-    title: '义县六公司安全培训',
-    date: '2023-01-06 12:00:00',
-    days: '整改6次'
-  },
-  {
-    type: '资质逾期',
-    title: '大石桥七公司隐患排查',
-    date: '2023-01-07 12:00:00',
-    days: '逾期7天'
-  },
-  {
-    type: '整改次数',
-    title: '大石桥七公司隐患排查',
-    date: '2023-01-07 12:00:00',
-    days: '整改7次'
-  },
-  {
-    type: '资质逾期',
-    title: '盘锦八公司应急演练',
-    date: '2023-01-08 12:00:00',
-    days: '逾期8天'
-  },
-  {
-    type: '整改次数',
-    title: '盘锦八公司应急演练',
-    date: '2023-01-08 12:00:00',
-    days: '整改8次'
-  }
-])
+const notice1 = ref<any[]>([])
 
+const notice2 = ref<any[]>([])
 
-// 用户来源
-const getUserAccessSource = async () => {
-  const data = [
-    { value: 335, name: '执法一队' },
-    { value: 310, name: '执法二队' },
-    { value: 234, name: '执法三队' },
-    { value: 135, name: '执法四队' },
-    { value: 1548, name: '执法五队' }
-  ]
-  set(
-    pieOptionsData,
-    'legend.data',
-    data.map((v) => t(v.name))
-  )
-  pieOptionsData!.series![0].data = data.map((v) => {
-    return {
-      name: t(v.name),
-      value: v.value
-    }
+// 完成率
+const getPieData = async () => {
+  const res = await HomeApi.getPieData(queryParams)
+  const data = res.completionRate
+    .sort((a, b) => b.value - a.value)
+    .map((item: any, index: number) => {
+      return {
+        value: item.pieValue,
+        name: item.name,
+        itemStyle: {
+          color: getGradientColor(index, res.completionRate.length)
+        }
+      }
+    })
+
+  if (res.taskCompletionRate != 100) {
+    data.push({
+      name: '',
+      value: 100 - Number(res.taskCompletionRate),
+      itemStyle: {
+        color: '#fff'
+      },
+      label: {
+        show: false
+      },
+      labelLine: {
+        show: false
+      }
+    })
+  }
+  set(pieOptions, 'title.text', `${res.taskCompletionRate}%`)
+  set(pieOptions, 'series.data', data)
+}
+
+// 近6个月执法走势
+const getS3Data = async () => {
+  const res = await HomeApi.getTaskNumDoing()
+  let data1 = [] as any
+  let data2 = [] as any
+  res.forEach((item: any) => {
+    data1.push({ name: item.month, value: item.taskCount })
+    data2.push({ name: item.month, value: item.inspectionCount })
   })
+  set(lineOptions, 'series[0].data', data1)
+  set(lineOptions, 'series[1].data', data2)
+	set(lineOptions, 'xAxis.data', res.map(i=>i.month))
+}
+
+// 整改排名、资质临期
+const getS5S6 = async () => {
+  notice2.value = await HomeApi.getListData({ ...queryParams, type: 1, size: 8 })
+  notice1.value = await HomeApi.getListData({ ...queryParams, type: 2, size: 8 })
 }
-const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
 
-// 周活跃量
-const getWeeklyUserActivity = async () => {
-  const data = [
-    { value: 325, name: '一月' },
-    { value: 423, name: '二月' },
-    { value: 632, name: '三月' },
-    { value: 234, name: '四月' },
-    { value: 464, name: '五月' },
-    { value: 322, name: '六月' },
-    { value: 324, name: '七月' }
-  ]
-  set(
-    barOptionsData,
-    'xAxis.data',
-    data.map((v) => t(v.name))
-  )
-  set(barOptionsData, 'series', [
-    {
-      name: '任务数',
-      data: data.map((v) => v.value),
-      type: 'bar'
-    }
-  ])
+const getArea = async () => {
+  area.value = await HomeApi.getArea()
+  queryParams.region = area.value[0].value
 }
 
-const getAllApi = async () => {
-  await Promise.all([
-    getUserAccessSource(),
-    getWeeklyUserActivity()
-  ])
+const init = async () => {
+  await getArea()
+  await getData()
+}
+
+const getData = async () => {
+  await Promise.all([getPieData(), getS3Data(), getS5S6()])
   loading.value = false
 }
 
-getAllApi()
+// 饼图颜色
+const getGradientColor = (index, total) => {
+  let opacity = 1 - index / total + 0.1
+  if (index == 0) opacity = 1
+  return `rgba(64, 158, 255, ${opacity > 1 ? 1 : opacity})`
+}
+
+init()
 </script>
+
+<style scoped lang="scss">
+::v-deep(.el-card__header) {
+  padding: 16px;
+  color: #303133;
+  font-size: 14px;
+  line-height: 24px;
+  font-weight: bold;
+}
+::v-deep(.el-card__body) {
+  padding: 0;
+}
+
+.block {
+  height: 376px;
+}
+.queryForm {
+  display: flex;
+  flex-flow: row nowrap;
+  .el-form-item--default {
+    margin-bottom: 20px;
+  }
+  .el-form-item {
+    width: 400px;
+    margin-right: 20px;
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+  }
+}
+::v-deep(.el-button + .el-button) {
+  margin-left: 0 !important;
+}
+</style>
diff --git a/src/views/Home/echarts-data.ts b/src/views/Home/echarts-data.ts
index fa78b2b..13e0ca7 100644
--- a/src/views/Home/echarts-data.ts
+++ b/src/views/Home/echarts-data.ts
@@ -1,62 +1,81 @@
 import { EChartsOption } from 'echarts'
 
-const { t } = useI18n()
 
 
 export const pieOptions: EChartsOption = {
   title: {
-    text: '完成率90%',
+    text: '90%',
+    subtext: '完成率',
     left: 'center',
-    top: '35%',
+    top: 'center',
+    itemGap: 0,
     textStyle: {
-      fontSize: 16,
+      fontSize: 40,
+      lineHeight: 40,
+      padding: [0, 0, 0, 0],
       fontWeight: 'bold'
+    },
+    subtextStyle: {
+      color: '#909399',
+      fontSize: 18,
+      lineHeight: 18,
+      padding: [0, 0, 0, 0]
     }
   },
   tooltip: {
     trigger: 'item',
     formatter: '{a} <br/>{b} : {c} ({d}%)'
   },
-  legend: {
-    orient: 'horizontal',
-    bottom: 10,
-    left: 'center',
-
+  series: {
+    type: 'pie',
+    radius: ['60%', '80%'],
+    center: ['50%', '50%'],
+    itemStyle: {
+      borderColor: '#fff',
+      borderWidth: 2
+    },
+    label: {
+      formatter: (v) => {
+        if (v.name) {
+          return `{row|${v.name}} {v|${v.percent}%}  \n{hr|}`
+        }
+        return ''
+      },
+      padding: [0, 0, 15, 0],
+      distanceToLabelLine: 0,
+      rich: {
+        row: {
+          padding: [0, 0, 4, 5]
+        },
+        v: {
+          color: '#409EFF',
+          padding: [0, 0, 4, 0]
+        },
+        hr: {
+          backgroundColor: '#409EFF',
+          width: '100%',
+          height: 1
+        }
+      }
+    },
+    labelLine: {
+      length2: 0,
+      lineStyle: {
+        color: '#409EFF'
+      }
+    },
+    roseType: 'radius',
     data: [
-      '执法一队',
-      '执法二队',
-      '执法三队',
-      '执法四队',
-      '执法五队',
+      { value: 335, name: '执法一队' },
+      { value: 310, name: '执法二队' },
+      { value: 234, name: '执法三队' },
+      { value: 135, name: '执法四队' },
+      { value: 1548, name: '执法五队' }
     ]
-  },
-  series: [
-    {
-      name: t('analysis.userAccessSource'),
-      type: 'pie',
-      radius: ['40%', '70%'],
-      center: ['50%', '40%'],
-      itemStyle: {
-        borderRadius: 10,
-        borderColor: '#fff',
-        borderWidth: 2
-      },
-      data: [
-        { value: 335, name: '执法一队' },
-        { value: 310, name: '执法二队' },
-        { value: 234, name:'执法三队' },
-        { value: 135, name: '执法四队' },
-        { value: 1548, name: '执法五队' }
-      ]
-    }
-  ]
+  }
 }
 
 export const barOptions: EChartsOption = {
-  title: {
-    text: '月均执法任务数',
-    left: 'center'
-  },
   tooltip: {
     trigger: 'axis',
     axisPointer: {
@@ -64,42 +83,113 @@ export const barOptions: EChartsOption = {
     }
   },
   grid: {
-    left: 50,
-    right: 20,
-    bottom: 20
+    top: 42,
+    left: 16,
+    right: 16,
+    bottom: 16,
+    containLabel: true
+  },
+  legend: {
+    show: true,
+    top: 16,
+    left: 'center',
+    itemWidth: 10,
+    itemHeight: 10,
+    textStyle: {
+      color: '#333'
+    }
   },
   xAxis: {
     type: 'category',
-    data: [
-      '一月',
-      '二月',
-      '三月',
-      '四月',
-      '五月',
-      '六月',
-
-    ],
     axisTick: {
-      alignWithLabel: true
+      show: false
+    },
+    axisLine: {
+      show: false
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: 'dashed',
+        color: '#E5E7EB'
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: '#333'
     }
   },
   yAxis: {
-    type: 'value'
+    type: 'value',
+    max: (v) => {
+      return Math.floor(v.max * 1.2 + 1)
+    },
+    axisLine: {
+      show: false
+    },
+    axisTick: {
+      show: false
+    },
+    splitLine: {
+      lineStyle: {
+        type: 'dashed',
+        color: '#E5E7EB'
+      }
+    }
   },
   series: [
     {
-      name: t('analysis.activeQuantity'),
-      data: [13253, 34235, 26321, 12340, 24643, 1322, 1324],
-      type: 'bar'
+      name: '执法记录',
+      type: 'bar',
+      barWidth: 20,
+      stack: '执法记录',
+      barGap: '30%',
+      itemStyle: {
+        color: 'rgba(64, 158, 255, .6)'
+      },
+      data: [70, 35, 70, 60, 20]
+    },
+    {
+      name: '整改次数',
+      type: 'bar',
+      stack: '整改次数',
+      barWidth: 20,
+      itemStyle: {
+        color: 'rgba(103, 194, 58, .6)'
+      },
+      data: [90, 45, 80, 50, 70]
+    },
+    {
+      name: '执法记录',
+      type: 'bar',
+      barWidth: 20,
+      stack: '执法记录',
+      barGap: '30%',
+      itemStyle: {
+        color: 'rgba(64, 158, 255, 1)'
+      },
+      tooltip: {
+        show: false
+      },
+      data: [2, 2, 2, 2, 2]
+    },
+    {
+      name: '整改次数',
+      type: 'bar',
+      stack: '整改次数',
+      barWidth: 20,
+      itemStyle: {
+        color: 'rgba(103, 194, 58, 1)'
+      },
+      tooltip: {
+        show: false
+      },
+      data: [2, 2, 2, 2, 2]
     }
   ]
 }
 
 export const lineOptions: EChartsOption = {
-  title: {
-    text: '月均执法任务数',
-    left: 'center'
-  },
   tooltip: {
     trigger: 'axis',
     axisPointer: {
@@ -107,42 +197,89 @@ export const lineOptions: EChartsOption = {
     }
   },
   grid: {
-    left: 50,
-    right: 20,
-    bottom: 20
+    top: 42,
+    left: 16,
+    right: 16,
+    bottom: 16,
+    containLabel: true
+  },
+  legend: {
+    show: true,
+    top: 16,
+    left: 'center',
+    textStyle: {
+      color: '#333'
+    }
   },
   xAxis: {
     type: 'category',
-    data: [
-      '一月',
-      '二月',
-      '三月',
-      '四月',
-      '五月',
-      '六月',
-
-    ],
+    data:[],
     axisTick: {
-      alignWithLabel: true
+      show: false
+    },
+    axisLine: {
+      show: false
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: 'dashed',
+        color: '#E5E7EB'
+      }
+    },
+    axisLabel: {
+      show: false,
+      color: '#333'
     }
   },
   yAxis: {
-    type: 'value'
+    type: 'value',
+    axisLine: {
+      show: false
+    },
+    max: (v) => {
+      return Math.floor(v.max * 1.2 + 1)
+    },
+    axisTick: {
+      show: false
+    },
+    splitLine: {
+      lineStyle: {
+        type: 'dashed',
+        color: '#E5E7EB'
+      }
+    }
   },
   series: [
     {
       name: '任务数',
-      data: [13253, 34235, 26321, 12340, 24643, 1322, 1324],
-      type: 'line'
+      data: [13253, 34235, 26321, 12340, 24643],
+      type: 'line',
+      smooth: true,
+      itemStyle: {
+        color: 'rgba(64, 158, 255, 1)'
+      },
+      lineStyle: {
+        color: 'rgba(64, 158, 255, 1)'
+      },
+      areaStyle: {
+        color: 'rgba(64, 158, 255, .3)'
+      }
     },
     {
       name: '执法数',
-      data: [15678, 28943, 31452, 19876, 22345, 25678, 18234],
-      type: 'line'
+      data: [15678, 28943, 31452, 19876, 22345],
+      type: 'line',
+      smooth: true,
+      itemStyle: {
+        color: 'rgba(103, 194, 58, 1)'
+      },
+      lineStyle: {
+        color: 'rgba(103, 194, 58, 1)'
+      },
+      areaStyle: {
+        color: 'rgba(103, 194, 58, .3)'
+      }
     }
-
   ]
 }
-
-
-