From e5b6c2b8bcc6cd1c255ec50c154ba913aa8790fb Mon Sep 17 00:00:00 2001
From: XaoLi717 <144221124+XaoLi717@users.noreply.github.com>
Date: Wed, 18 Sep 2024 14:09:34 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E9=A1=B9=E7=9B=AE=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Home/Index.vue                 | 272 +++++++++++--------
 src/views/Home/datainfo/DataInfoForm.vue |  46 ++--
 src/views/Home/datainfo/index.vue        |  80 +++---
 src/views/Home/echarts-data.ts           |   6 +-
 src/views/Home/homepj/index.vue          | 323 +++++++++++++++++++++++
 src/views/Home/homepj/pjForm.vue         | 187 +++++++++++++
 src/views/Home/mychart/MyAChart.vue      |  76 ++++++
 src/views/Home/mychart/MyBChart.vue      |  61 +++++
 8 files changed, 877 insertions(+), 174 deletions(-)
 create mode 100644 src/views/Home/homepj/index.vue
 create mode 100644 src/views/Home/homepj/pjForm.vue
 create mode 100644 src/views/Home/mychart/MyAChart.vue
 create mode 100644 src/views/Home/mychart/MyBChart.vue

diff --git a/src/views/Home/Index.vue b/src/views/Home/Index.vue
index b43c9a6..7be9014 100644
--- a/src/views/Home/Index.vue
+++ b/src/views/Home/Index.vue
@@ -124,14 +124,14 @@
 
       <el-card shadow="never" class="mt-8px">
         <el-skeleton :loading="loading" animated>
-<!--          <el-row :gutter="20" justify="space-between">-->
-<!--            <el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">-->
-<!--              <el-card shadow="hover" class="mb-8px">-->
-<!--                <el-skeleton :loading="loading" animated>-->
-<!--                  <Echart :options="pieOptionsData" :height="280" />-->
-<!--                </el-skeleton>-->
-<!--              </el-card>-->
-<!--            </el-col>-->
+          <el-row :gutter="20" justify="space-between">
+            <el-col :xl="10" :lg="10" :md="24" :sm="24" :xs="24">
+              <el-card shadow="hover" class="mb-8px">
+                <el-skeleton :loading="loading" animated>
+                  <Echart :options="pieOptionsData" :height="280" />
+                </el-skeleton>
+              </el-card>
+            </el-col>
             <el-col :xl="24" :lg="24" :md="24" :sm="24" :xs="24">
               <el-card shadow="hover" class="mb-8px">
                 <el-skeleton :loading="loading" animated>
@@ -139,59 +139,6 @@
                 </el-skeleton>
               </el-card>
             </el-col>
-<!--          </el-row>-->
-        </el-skeleton>
-      </el-card>
-      <el-card shadow="never" style="margin-bottom: 10px">
-        <template #header>
-          <div class="h-3 flex justify-between">
-            <!--            <span>{{ t('workplace.shortcutOperation') }}</span>-->
-            <span>完成项目</span>
-          </div>
-        </template>
-        <el-skeleton :loading="loading" animated>
-          <el-row>
-            <!--            <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-8px">-->
-            <el-col>
-              <div class="flex items-center">
-                <!--                <Icon :icon="item.icon" class="mr-8px" />-->
-                <!--                <el-link type="default" :underline="false" @click="setWatermark(item.name)">-->
-                <!--&lt;!&ndash;                  {{ item.name }}&ndash;&gt;-->
-                <!--                  Test-->
-                <!--                </el-link>-->
-                <el-table
-                  :data="pjList"
-                  stripe
-                  style="width:100%"
-                  height="300"
-                ><el-table-column
-                  fixed
-                  prop="pjEtime"
-                  label="完成日期"
-                  style="width: 20%"
-                />
-                  <el-table-column
-                    prop="pjName"
-                    label="标题"
-                    style="width: 30%"
-                  />
-                  <el-table-column
-                    prop="pjType"
-                    label="类别"
-                    style="width: 20%"
-                  />
-                  <el-table-column
-                    prop="pjDept"
-                    label="部门"
-                    style="width: 20%"/>
-                  <el-table-column
-                    prop="pjNumber"
-                    label="人员"
-                    style="width: 10%"
-                  />
-                </el-table>
-              </div>
-            </el-col>
           </el-row>
         </el-skeleton>
       </el-card>
@@ -228,6 +175,70 @@
           </div>
         </el-skeleton>
       </el-card>
+      <el-card shadow="never" style="margin-bottom: 10px">
+        <template #header>
+          <div class="h-3 flex justify-between">
+            <!--            <span>{{ t('workplace.shortcutOperation') }}</span>-->
+            <span>完成项目</span>
+          </div>
+        </template>
+        <el-skeleton :loading="loading" animated>
+          <el-row>
+            <!--            <el-col v-for="item in shortcut" :key="`team-${item.name}`" :span="8" class="mb-8px">-->
+            <el-col>
+              <div class="flex items-center">
+                <!--                <Icon :icon="item.icon" class="mr-8px" />-->
+                <!--                <el-link type="default" :underline="false" @click="setWatermark(item.name)">-->
+                <!--&lt;!&ndash;                  {{ item.name }}&ndash;&gt;-->
+                <!--                  Test-->
+                <!--                </el-link>-->
+                <el-table
+                  :data="list2"
+                  :row-class-name="tableRowClassName2"
+                  stripe
+                  style="width:100%"
+                  height="300"
+                ><el-table-column
+                  fixed
+                  prop="pjEtime"
+                  label="完成日期"
+                  align="center"
+                  :formatter="dateFormatter"
+                  style="width: 20%"
+                />
+                  <el-table-column
+                    prop="pjName"
+                    label="标题"
+                    style="width: 30%"
+                  />
+                  <el-table-column
+                    prop="pjType"
+                    label="类别"
+                    style="width: 20%"
+                  >
+                    <template #default="scope">
+                      <dict-tag :type="DICT_TYPE.HOME_PJ_TYPE" :value="scope.row.pjType" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column
+                    prop="pjDept"
+                    label="部门"
+                    style="width: 20%">
+                    <template #default="scope">
+                      <dict-tag :type="DICT_TYPE.HOME_PJ_DEPT" :value="scope.row.pjDept" />
+                    </template>
+                  </el-table-column>
+                  <el-table-column
+                    prop="pjNumber"
+                    label="人数"
+                    style="width: 10%"
+                  />
+                </el-table>
+              </div>
+            </el-col>
+          </el-row>
+        </el-skeleton>
+      </el-card>
       <el-card shadow="never">
         <template #header>
           <div class="h-3 flex justify-between">
@@ -246,16 +257,20 @@
                 <!--                  Test-->
                 <!--                </el-link>-->
                 <el-table
-                  :data="pjList"
+                  :data="list2"
+                  :row-class-name="tableRowClassName"
                   stripe
                   style="width:100%"
                   height="300"
-                ><el-table-column
-                  fixed
-                  prop="pjEtime"
-                  label="预计日期"
-                  style="width: 20%"
-                />
+                >
+                  <el-table-column
+                    fixed
+                    prop="pjEtime"
+                    label="预计日期"
+                    align="center"
+                    :formatter="dateFormatter"
+                    style="width: 20%"
+                  />
                   <el-table-column
                     prop="pjName"
                     label="标题"
@@ -265,14 +280,22 @@
                     prop="pjType"
                     label="类别"
                     style="width: 20%"
-                  />
+                  >
+                    <template #default="scope">
+                      <dict-tag :type="DICT_TYPE.HOME_PJ_TYPE" :value="scope.row.pjType" />
+                    </template>
+                  </el-table-column>
                   <el-table-column
                     prop="pjDept"
                     label="部门"
-                    style="width: 20%"/>
+                    style="width: 20%">
+                    <template #default="scope">
+                      <dict-tag :type="DICT_TYPE.HOME_PJ_DEPT" :value="scope.row.pjDept" />
+                    </template>
+                  </el-table-column>
                   <el-table-column
                     prop="pjNumber"
-                    label="人员"
+                    label="人数"
                     style="width: 10%"
                   />
                 </el-table>
@@ -296,6 +319,9 @@ import { useUserStore } from '@/store/modules/user'
 import type { WorkplaceTotal, Project, Notice, Shortcut } from './types'
 import { pieOptions, barOptions } from './echarts-data'
 import {DataInfoApi, DataInfoVO} from "@/api/home/datainfo";
+import {pjApi, pjVO} from "@/api/home/homepj";
+import {dateFormatter} from "@/utils/formatTime";
+import {DICT_TYPE} from "@/utils/dict";
 
 defineOptions({ name: 'Home' })
 
@@ -303,12 +329,14 @@ defineOptions({ name: 'Home' })
 const { t } = useI18n()
 const userStore = useUserStore()
 // const { setWatermark } = useWatermark()
-const loading = ref(true)
+const loading = ref(false)
 const list = ref<DataInfoVO[]>([]) // 列表的数据
+const list2 = ref<pjVO[]>([]) // 列表的数据
 const total = ref(0) // 列表的总页数
 const avatar = userStore.getUser.avatar
 const username = userStore.getUser.nickname
 const allData = ref({});
+const allData2 = ref({});
 const pieOptionsData = reactive<EChartsOption>(pieOptions) as EChartsOption
 // 获取统计数
 let totalSate = reactive<WorkplaceTotal>({
@@ -316,31 +344,31 @@ let totalSate = reactive<WorkplaceTotal>({
   access: 0,
   todo: 0
 })
+const queryParams2 = reactive({
+  pageNo: 1,
+  pageSize: 50,
+  pjName: undefined,
+  pjDone: undefined,
+  pjDescribe: undefined,
+  pjContent: undefined,
+  pjType: undefined,
+  pjEtime: [],
+  pjVtime: [],
+  pjDept: undefined,
+  pjNumber: undefined,
+  createTime: [],
+})
+const tableRowClassName = ({ row }) => {
+  return row.pjDone === 1 ? 'warning-row' : '';
+};
+const tableRowClassName2 = ({ row }) => {
+  return row.pjDone === 0 ? 'warning-row' : '';
+};
 const image = [
   {id: 1, src: mn2, name: '02'},
   {id: 2, src: mn3, name: '03'},
   {id: 3, src: mn4, name: '04'},
 ]
-const pjList = [
-  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
-  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
-  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
-  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
-  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
-  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
-  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
-  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
-  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
-  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
-  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
-  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
-  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
-  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
-  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
-  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
-  {pjEtime: '2002-03-10',pjName: '优化产线',pjType: '环境',pjDept: '技术部',pjNumber: 778899},
-  {pjEtime: '2005-05-20',pjName: '保护环境',pjType: '社会',pjDept: '艺术部',pjNumber: 998877},
-]
 const dataList = computed(() => [
   { name: '碳排放', infoCo2e: allData.value.infoCo2e, dAn: '吨', time: '2024-07-05', color: '#e6eae3' },
   { name: '用水量', infoCo2e: allData.value.infoWater, dAn: '吨', time: '2024-07-05', color: '#ecf5ff' },
@@ -349,24 +377,32 @@ const dataList = computed(() => [
   { name: '污染物质', infoCo2e: allData.value.infoPollution, dAn: '吨', time: '2024-07-05', color: '#c0c4cc' },
   { name: '研发费用', infoCo2e: allData.value.infoRd, dAn: '万元', time: '2024-07-05', color: '#fdf6ec' }
 ]);
+const dataList2 = computed(() => [
+  {E: allData2.value[0].infoEnvironment, S: allData2.value[0].infoSociety, G: allData2.value[0].infoGovern},
+  {E: allData2.value[1].infoEnvironment, S: allData2.value[1].infoSociety, G: allData2.value[1].infoGovern},
+  {E: allData2.value[2].infoEnvironment, S: allData2.value[2].infoSociety, G: allData2.value[2].infoGovern},
+]);
 /** 查询列表 */
 const getList = async () => {
   loading.value = true
   try {
     const data = await DataInfoApi.getDataInfoPage(queryParams)
+    const data2 = await pjApi.getpjPage(queryParams2)
     allData.value=data.list[0]
-    // await getAllData()
+    allData2.value=data.list
     list.value = data.list
+    list2.value = data2.list
     total.value = data.total
+
+    await getWeeklyUserActivity()
   } finally {
     loading.value = false
   }
 }
 const queryParams = reactive({
   pageNo: 1,
-  pageSize: 1,
+  pageSize: 3,
   infoYear: undefined,
-  infoYear: [],
   infoCo2e: undefined,
   infoWater: undefined,
   infoPollution: undefined,
@@ -514,12 +550,13 @@ const getShortcut = async () => {
 
 // 用户来源
 const getUserAccessSource = async () => {
+  // const data = [
+  //   { value: 335, name: 'analysis.directAccess' },
+  // ]
   const data = [
-    { value: 335, name: 'analysis.directAccess' },
-    { value: 310, name: 'analysis.mailMarketing' },
-    { value: 234, name: 'analysis.allianceAdvertising' },
-    { value: 135, name: 'analysis.videoAdvertising' },
-    { value: 1548, name: 'analysis.searchEngines' }
+    { value: 335, name: '社会' },
+    { value: 310, name: '环境' },
+    { value: 234, name: '治理' },
   ]
   set(
     pieOptionsData,
@@ -537,24 +574,34 @@ const barOptionsData = reactive<EChartsOption>(barOptions) as EChartsOption
 
 // 周活跃量
 const getWeeklyUserActivity = async () => {
+  // const data = [
+  //   { value: 13253, name: 'analysis.monday' },
+  // ]
   const data = [
-    { value: 13253, name: 'analysis.monday' },
-    { value: 34235, name: 'analysis.tuesday' },
-    { value: 26321, name: 'analysis.wednesday' },
-    { value: 12340, name: 'analysis.thursday' },
-    { value: 24643, name: 'analysis.friday' },
-    { value: 1322, name: 'analysis.saturday' },
-    { value: 1324, name: 'analysis.sunday' }
+    { name: '环境评分' },
+    { name: '社会评分' },
+    { name: '治理评分' },
   ]
   set(
     barOptionsData,
     'xAxis.data',
     data.map((v) => t(v.name))
   )
+  console.log("dataList2.value",dataList2.value)
   set(barOptionsData, 'series', [
     {
-      name: t('analysis.activeQuantity'),
-      data: data.map((v) => v.value),
+      name: '2022',
+      data: [dataList2.value[0].E, dataList2.value[0].E, dataList2.value[0].E],
+      type: 'bar'
+    },
+    {
+      name: '2023',
+      data: [dataList2.value[1].S, dataList2.value[1].S, dataList2.value[1].S],
+      type: 'bar'
+    },
+    {
+      name: '2024',
+      data: [dataList2.value[2].G, dataList2.value[2].G, dataList2.value[2].G],
       type: 'bar'
     }
   ])
@@ -588,3 +635,10 @@ onMounted(() => {
   text-align: center;
 }
 </style>
+
+<style  lang="scss">
+
+.el-table .warning-row {
+  display: none;
+}
+</style>
diff --git a/src/views/Home/datainfo/DataInfoForm.vue b/src/views/Home/datainfo/DataInfoForm.vue
index c0cc3ed..04073a5 100644
--- a/src/views/Home/datainfo/DataInfoForm.vue
+++ b/src/views/Home/datainfo/DataInfoForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 80%">
+  <Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 85%">
     <el-form
       ref="formRef"
       :model="formData"
@@ -7,9 +7,9 @@
       label-width="100px"
       v-loading="formLoading"
     >
-      <el-row>
+      <el-row style="height: 70px">
         <el-col :span="8">
-          <el-form-item label="数据收集时间" prop="infoYear">
+          <el-form-item label="填写时间" prop="infoYear">
             <el-date-picker
               v-model="formData.infoYear"
               type="date"
@@ -29,24 +29,24 @@
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row>
+      <el-row style="height: 70px">
         <el-col :span="8">
           <el-form-item label="废弃物量" prop="infoCastoff">
             <el-input v-model="formData.infoCastoff" placeholder="请输入废弃物量(吨)" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="能源使用量" prop="infoCoai">
+          <el-form-item label="能源使用" prop="infoCoai">
             <el-input v-model="formData.infoCoai" placeholder="请输入能源使用量(吨标准煤)" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="污染物总量" prop="infoPollution">
+          <el-form-item label="污染物量" prop="infoPollution">
             <el-input v-model="formData.infoPollution" placeholder="请输入污染物量(吨)" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row>
+      <el-row style="height: 70px">
         <el-col :span="8">
           <el-form-item label="环保投入" prop="infoEcom">
             <el-input v-model="formData.infoEcom" placeholder="请输入环保投入(万元)" />
@@ -58,46 +58,46 @@
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="员工培训费用" prop="infoTraining">
+          <el-form-item label="员工培训费" prop="infoTraining">
             <el-input v-model="formData.infoTraining" placeholder="请输入员工培训费用(万元)" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row>
+      <el-row style="height: 70px">
         <el-col :span="8">
-          <el-form-item label="研发费用" prop="infoRd">
+          <el-form-item label="研发费" prop="infoRd">
             <el-input v-model="formData.infoRd" placeholder="请输入研发费用(万元)" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="公益投入费用" prop="infoProbono">
+          <el-form-item label="公益投入" prop="infoProbono">
             <el-input v-model="formData.infoProbono" placeholder="请输入公益投入费用(万元)" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="社会保险覆盖率" prop="infoInsurance">
+          <el-form-item label="保险覆盖率" prop="infoInsurance">
             <el-input v-model="formData.infoInsurance" placeholder="请输入社会保险覆盖率(%)" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row>
+      <el-row style="height: 70px">
         <el-col :span="8">
-          <el-form-item label="违规经营次数" prop="infoViolate">
+          <el-form-item label="违规经营" prop="infoViolate">
             <el-input v-model="formData.infoViolate" placeholder="请输入违规经营次数(次)" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="对外担保金额" prop="infoGuarantee">
+          <el-form-item label="担保金额" prop="infoGuarantee">
             <el-input v-model="formData.infoGuarantee" placeholder="请输入对外担保金额(万元)" />
           </el-form-item>
         </el-col>
         <el-col :span="8">
-          <el-form-item label="现金分红总额" prop="infoMoney">
+          <el-form-item label="现金分红" prop="infoMoney">
             <el-input v-model="formData.infoMoney" placeholder="请输入现金分红总额(万元)" />
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row>
+      <el-row style="height: 70px">
         <el-col :span="8">
           <el-form-item label="环境评分" prop="infoEnvironment">
             <el-input v-model="formData.infoEnvironment" placeholder="请输入环境评分" />
@@ -155,13 +155,13 @@ const formData = ref({
   infoGovern: undefined,
 })
 const formRules = reactive({
-  infoYear: [{ required: true, message: '数据收集时间不能为空', trigger: 'blur' }],
-  infoCo2e: [{ required: true, message: '碳排放总量不能为空', trigger: 'blur' }],
-  infoWater: [{ required: true, message: '总用水量不能为空', trigger: 'blur' }],
-  infoPollution: [{ required: true, message: '污染物总量不能为空', trigger: 'blur' }],
+  infoYear: [{ required: true, message: '填写时间不能为空', trigger: 'blur' }],
+  infoCo2e: [{ required: true, message: '碳排放量不能为空', trigger: 'blur' }],
+  infoWater: [{ required: true, message: '用水量不能为空', trigger: 'blur' }],
+  infoPollution: [{ required: true, message: '污染物量不能为空', trigger: 'blur' }],
   infoEcom: [{ required: true, message: '环保投入不能为空', trigger: 'blur' }],
-  infoTraining: [{ required: true, message: '员工培训费用不能为空', trigger: 'blur' }],
-  infoRd: [{ required: true, message: '研发费用不能为空', trigger: 'blur' }],
+  infoTraining: [{ required: true, message: '员工培训费不能为空', trigger: 'blur' }],
+  infoRd: [{ required: true, message: '研发费不能为空', trigger: 'blur' }],
   infoEnvironment: [{ required: true, message: '环境评分不能为空', trigger: 'blur' }],
   infoSociety: [{ required: true, message: '社会评分不能为空', trigger: 'blur' }],
   infoGovern: [{ required: true, message: '治理评分不能为空', trigger: 'blur' }],
diff --git a/src/views/Home/datainfo/index.vue b/src/views/Home/datainfo/index.vue
index c489898..87b43a7 100644
--- a/src/views/Home/datainfo/index.vue
+++ b/src/views/Home/datainfo/index.vue
@@ -8,25 +8,25 @@
       :inline="true"
       label-width="68px"
     >
-<!--      <el-form-item label="数据收集时间" prop="infoYear">-->
-<!--        <el-date-picker-->
-<!--          v-model="queryParams.infoYear"-->
-<!--          value-format="YYYY-MM-DD"-->
-<!--          type="date"-->
-<!--          placeholder="选择数据收集时间"-->
-<!--          clearable-->
-<!--          class="!w-240px"-->
-<!--        />-->
-<!--      </el-form-item>-->
-      <el-form-item label="碳排放量" prop="infoCo2e">
-        <el-input
-          v-model="queryParams.infoCo2e"
-          placeholder="请输入碳排放量"
+      <el-form-item label="填写时间" prop="infoYear">
+        <el-date-picker
+          v-model="queryParams.infoYear"
+          value-format="YYYY-MM-DD"
+          type="date"
+          placeholder="选择时间"
           clearable
-          @keyup.enter="handleQuery"
           class="!w-240px"
         />
       </el-form-item>
+<!--      <el-form-item label="碳排放量" prop="infoCo2e">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.infoCo2e"-->
+<!--          placeholder="请输入碳排放量"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
 <!--      <el-form-item label="总用水量" prop="infoWater">-->
 <!--        <el-input-->
 <!--          v-model="queryParams.infoWater"-->
@@ -45,15 +45,15 @@
 <!--          class="!w-240px"-->
 <!--        />-->
 <!--      </el-form-item>-->
-      <el-form-item label="环保投入" prop="infoEcom">
-        <el-input
-          v-model="queryParams.infoEcom"
-          placeholder="请输入环保投入"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
+<!--      <el-form-item label="环保投入" prop="infoEcom">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.infoEcom"-->
+<!--          placeholder="请输入环保投入"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
 <!--      <el-form-item label="员工培训费用" prop="infoTraining">-->
 <!--        <el-input-->
 <!--          v-model="queryParams.infoTraining"-->
@@ -99,17 +99,17 @@
 <!--          class="!w-240px"-->
 <!--        />-->
 <!--      </el-form-item>-->
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="daterange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
-          class="!w-240px"
-        />
-      </el-form-item>
+<!--      <el-form-item label="创建时间" prop="createTime">-->
+<!--        <el-date-picker-->
+<!--          v-model="queryParams.createTime"-->
+<!--          value-format="YYYY-MM-DD HH:mm:ss"-->
+<!--          type="daterange"-->
+<!--          start-placeholder="开始日期"-->
+<!--          end-placeholder="结束日期"-->
+<!--          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
       <el-form-item>
         <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
         <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
@@ -144,12 +144,12 @@
 <!--        :formatter="dateFormatter"-->
 <!--        width="180px"-->
 <!--      />-->
-      <el-table-column label="碳排放量(吨CO2e)" align="center" prop="infoCo2e" />
-      <el-table-column label="总用水量(吨)" align="center" prop="infoWater" />
-      <el-table-column label="污染物量(吨)" align="center" prop="infoPollution" />
+      <el-table-column label="碳排放(吨CO2e)" align="center" prop="infoCo2e" />
+      <el-table-column label="总用水(吨)" align="center" prop="infoWater" />
+      <el-table-column label="污染物(吨)" align="center" prop="infoPollution" />
       <el-table-column label="环保投入(万元)" align="center" prop="infoEcom" />
-      <el-table-column label="培训费用(万元)" align="center" prop="infoTraining" />
-      <el-table-column label="研发费用(万元)" align="center" prop="infoRd" />
+      <el-table-column label="培训费(万元)" align="center" prop="infoTraining" />
+      <el-table-column label="研发费(万元)" align="center" prop="infoRd" />
       <el-table-column
         label="创建时间"
         align="center"
diff --git a/src/views/Home/echarts-data.ts b/src/views/Home/echarts-data.ts
index 56093f4..c538f4b 100644
--- a/src/views/Home/echarts-data.ts
+++ b/src/views/Home/echarts-data.ts
@@ -73,7 +73,8 @@ export const lineOptions: EChartsOption = {
 
 export const pieOptions: EChartsOption = {
   title: {
-    text: t('analysis.userAccessSource'),
+    // text: t('analysis.userAccessSource'),
+    text: t('发展方向'),
     left: 'center'
   },
   tooltip: {
@@ -110,7 +111,8 @@ export const pieOptions: EChartsOption = {
 
 export const barOptions: EChartsOption = {
   title: {
-    text: t('analysis.weeklyUserActivity'),
+    // text: t('analysis.weeklyUserActivity'),
+    text: t('ESG综合统计'),
     left: 'center'
   },
   tooltip: {
diff --git a/src/views/Home/homepj/index.vue b/src/views/Home/homepj/index.vue
new file mode 100644
index 0000000..ae48375
--- /dev/null
+++ b/src/views/Home/homepj/index.vue
@@ -0,0 +1,323 @@
+<template>
+  <ContentWrap>
+    <!-- 搜索工作栏 -->
+    <el-form
+      class="-mb-15px"
+      :model="queryParams"
+      ref="queryFormRef"
+      :inline="true"
+      label-width="68px"
+    >
+<!--      <el-form-item label="id" prop="pjId">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.pjId"-->
+<!--          placeholder="请输入id"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="项目名称" prop="pjName">
+        <el-input
+          v-model="queryParams.pjName"
+          placeholder="请输入项目名称"
+          clearable
+          @keyup.enter="handleQuery"
+          class="!w-240px"
+        />
+      </el-form-item>
+      <el-form-item label="是否完成" prop="pjDone">
+        <el-select
+          v-model="queryParams.pjDone"
+          placeholder="请选择是否完成"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.HOME_PJ)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+<!--      <el-form-item label="项目描述" prop="pjDescribe">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.pjDescribe"-->
+<!--          placeholder="请输入项目描述"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="项目类别" prop="pjType">
+        <el-select
+          v-model="queryParams.pjType"
+          placeholder="请选择项目类别"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.HOME_PJ_TYPE)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+<!--      <el-form-item label="项目预计完成时间" prop="pjEtime">-->
+<!--        <el-date-picker-->
+<!--          v-model="queryParams.pjEtime"-->
+<!--          value-format="YYYY-MM-DD HH:mm:ss"-->
+<!--          type="daterange"-->
+<!--          start-placeholder="开始日期"-->
+<!--          end-placeholder="结束日期"-->
+<!--          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="项目实际完成时间" prop="pjVtime">-->
+<!--        <el-date-picker-->
+<!--          v-model="queryParams.pjVtime"-->
+<!--          value-format="YYYY-MM-DD HH:mm:ss"-->
+<!--          type="daterange"-->
+<!--          start-placeholder="开始日期"-->
+<!--          end-placeholder="结束日期"-->
+<!--          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item label="参与部门" prop="pjDept">
+        <el-select
+          v-model="queryParams.pjDept"
+          placeholder="请选择参与部门"
+          clearable
+          class="!w-240px"
+        >
+          <el-option
+            v-for="dict in getIntDictOptions(DICT_TYPE.HOME_PJ_DEPT)"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+<!--      <el-form-item label="参与人数" prop="pjNumber">-->
+<!--        <el-input-->
+<!--          v-model="queryParams.pjNumber"-->
+<!--          placeholder="请输入参与人数"-->
+<!--          clearable-->
+<!--          @keyup.enter="handleQuery"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+<!--      <el-form-item label="创建时间" prop="createTime">-->
+<!--        <el-date-picker-->
+<!--          v-model="queryParams.createTime"-->
+<!--          value-format="YYYY-MM-DD HH:mm:ss"-->
+<!--          type="daterange"-->
+<!--          start-placeholder="开始日期"-->
+<!--          end-placeholder="结束日期"-->
+<!--          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"-->
+<!--          class="!w-240px"-->
+<!--        />-->
+<!--      </el-form-item>-->
+      <el-form-item>
+        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          @click="openForm('create')"
+          v-hasPermi="['home:pj:create']"
+        >
+          <Icon icon="ep:plus" class="mr-5px" /> 新增
+        </el-button>
+        <el-button
+          type="success"
+          plain
+          @click="handleExport"
+          :loading="exportLoading"
+          v-hasPermi="['home:pj:export']"
+        >
+          <Icon icon="ep:download" class="mr-5px" /> 导出
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </ContentWrap>
+
+  <!-- 列表 -->
+  <ContentWrap>
+    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+<!--      <el-table-column label="id" align="center" prop="pjId" />-->
+      <el-table-column label="项目名称" align="center" prop="pjName" />
+      <el-table-column label="是否完成" align="center" prop="pjDone">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.HOME_PJ" :value="scope.row.pjDone" />
+        </template>
+      </el-table-column>
+      <el-table-column label="项目描述" align="center" prop="pjDescribe" />
+<!--      <el-table-column label="项目内容" align="center" prop="pjContent" />-->
+      <el-table-column label="项目类别" align="center" prop="pjType">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.HOME_PJ_TYPE" :value="scope.row.pjType" />
+        </template>
+      </el-table-column>
+<!--      <el-table-column-->
+<!--        label="预计完成时间"-->
+<!--        align="center"-->
+<!--        prop="pjEtime"-->
+<!--        :formatter="dateFormatter"-->
+<!--        width="180px"-->
+<!--      />-->
+<!--      <el-table-column-->
+<!--        label="实际完成时间"-->
+<!--        align="center"-->
+<!--        prop="pjVtime"-->
+<!--        :formatter="dateFormatter"-->
+<!--        width="180px"-->
+<!--      />-->
+      <el-table-column label="参与部门" align="center" prop="pjDept">
+        <template #default="scope">
+          <dict-tag :type="DICT_TYPE.HOME_PJ_DEPT" :value="scope.row.pjDept" />
+        </template>
+      </el-table-column>
+      <el-table-column label="参与人数" align="center" prop="pjNumber" />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        :formatter="dateFormatter"
+        width="180px"
+      />
+      <el-table-column label="操作" align="center">
+        <template #default="scope">
+          <el-button
+            link
+            type="primary"
+            @click="openForm('update', scope.row.pjId)"
+            v-hasPermi="['home:pj:update']"
+          >
+            编辑
+          </el-button>
+          <el-button
+            link
+            type="danger"
+            @click="handleDelete(scope.row.pjId)"
+            v-hasPermi="['home:pj:delete']"
+          >
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      :total="total"
+      v-model:page="queryParams.pageNo"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+  </ContentWrap>
+
+  <!-- 表单弹窗：添加/修改 -->
+  <pjForm ref="formRef" @success="getList" />
+</template>
+
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { dateFormatter } from '@/utils/formatTime'
+import download from '@/utils/download'
+import { pjApi, pjVO } from '@/api/home/homepj'
+import pjForm from './pjForm.vue'
+
+/** 主要用于首页的项目数据 列表 */
+defineOptions({ name: 'Homepj' })
+
+const message = useMessage() // 消息弹窗
+const { t } = useI18n() // 国际化
+
+const loading = ref(true) // 列表的加载中
+const list = ref<pjVO[]>([]) // 列表的数据
+const total = ref(0) // 列表的总页数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  pjName: undefined,
+  pjDone: undefined,
+  pjDescribe: undefined,
+  pjContent: undefined,
+  pjType: undefined,
+  pjEtime: [],
+  pjVtime: [],
+  pjDept: undefined,
+  pjNumber: undefined,
+  createTime: [],
+})
+const queryFormRef = ref() // 搜索的表单
+const exportLoading = ref(false) // 导出的加载中
+
+/** 查询列表 */
+const getList = async () => {
+  loading.value = true
+  try {
+    const data = await pjApi.getpjPage(queryParams)
+    list.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
+}
+
+/** 搜索按钮操作 */
+const handleQuery = () => {
+  queryParams.pageNo = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+const resetQuery = () => {
+  queryFormRef.value.resetFields()
+  handleQuery()
+}
+
+/** 添加/修改操作 */
+const formRef = ref()
+const openForm = (type: string, id?: number) => {
+  console.log("id",id)
+  formRef.value.open(type, id)
+}
+
+/** 删除按钮操作 */
+const handleDelete = async (id: number) => {
+  try {
+    // 删除的二次确认
+    await message.delConfirm()
+    // 发起删除
+    await pjApi.deletepj(id)
+    message.success(t('common.delSuccess'))
+    // 刷新列表
+    await getList()
+  } catch {}
+}
+
+/** 导出按钮操作 */
+const handleExport = async () => {
+  try {
+    // 导出的二次确认
+    await message.exportConfirm()
+    // 发起导出
+    exportLoading.value = true
+    const data = await pjApi.exportpj(queryParams)
+    download.excel(data, '主要用于首页的项目数据.xls')
+  } catch {
+  } finally {
+    exportLoading.value = false
+  }
+}
+
+/** 初始化 **/
+onMounted(() => {
+  getList()
+})
+</script>
diff --git a/src/views/Home/homepj/pjForm.vue b/src/views/Home/homepj/pjForm.vue
new file mode 100644
index 0000000..9066993
--- /dev/null
+++ b/src/views/Home/homepj/pjForm.vue
@@ -0,0 +1,187 @@
+<template>
+  <Dialog :title="dialogTitle" v-model="dialogVisible" style="width: 85%">
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      label-width="100px"
+      v-loading="formLoading"
+    >
+      <el-form-item label="项目名称" prop="pjName">
+        <el-input v-model="formData.pjName" placeholder="请输入名称" />
+      </el-form-item>
+      <el-form-item label="项目描述" prop="pjDescribe">
+        <el-input v-model="formData.pjDescribe" placeholder="请输入描述" />
+      </el-form-item>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="项目类别" prop="pjType">
+            <el-select v-model="formData.pjType" placeholder="请选择类别">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.HOME_PJ_TYPE)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="参与部门" prop="pjDept">
+            <el-select v-model="formData.pjDept" placeholder="请选择部门">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.HOME_PJ_DEPT)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="是否完成" prop="pjDone">
+            <el-select v-model="formData.pjDone" placeholder="请选择是否完成">
+              <el-option
+                v-for="dict in getIntDictOptions(DICT_TYPE.HOME_PJ)"
+                :key="dict.value"
+                :label="dict.label"
+                :value="dict.value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="预计时间" prop="pjEtime">
+            <el-date-picker
+              v-model="formData.pjEtime"
+              type="date"
+              value-format="x"
+              placeholder="选择预计时间"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="实际时间" prop="pjVtime">
+            <el-date-picker
+              v-model="formData.pjVtime"
+              type="date"
+              value-format="x"
+              placeholder="选择实际时间"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="参与人数" prop="pjNumber">
+            <el-input v-model="formData.pjNumber" placeholder="请输入参与人数" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-form-item label="项目内容" prop="pjContent">
+        <Editor v-model="formData.pjContent" height="150px" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
+      <el-button @click="dialogVisible = false">取 消</el-button>
+    </template>
+  </Dialog>
+</template>
+<script setup lang="ts">
+import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
+import { pjApi, pjVO } from '@/api/home/homepj'
+
+/** 主要用于首页的项目数据 表单 */
+defineOptions({ name: 'pjForm' })
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const dialogVisible = ref(false) // 弹窗的是否展示
+const dialogTitle = ref('') // 弹窗的标题
+const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
+const formType = ref('') // 表单的类型：create - 新增；update - 修改
+const formData = ref({
+  pjName: undefined,
+  pjDone: undefined,
+  pjDescribe: undefined,
+  pjContent: undefined,
+  pjType: undefined,
+  pjEtime: undefined,
+  pjVtime: undefined,
+  pjDept: undefined,
+  pjNumber: undefined,
+})
+const formRules = reactive({
+  pjName: [{ required: true, message: '项目名称不能为空', trigger: 'blur' }],
+  pjDone: [{ required: true, message: '是否完成不能为空', trigger: 'change' }],
+  pjContent: [{ required: true, message: '项目内容不能为空', trigger: 'blur' }],
+  pjEtime: [{ required: true, message: '预计时间不能为空', trigger: 'blur' }],
+  pjVtime: [{ required: true, message: '实际时间不能为空', trigger: 'blur' }],
+  pjDescribe: [{ required: true, message: '项目描述不能为空', trigger: 'blur' }],
+  pjType: [{ required: true, message: '项目类别不能为空', trigger: 'change' }],
+  pjDept: [{ required: true, message: '参与部门不能为空', trigger: 'change' }],
+  pjNumber: [{ required: true, message: '参与人数不能为空', trigger: 'blur' }],
+})
+const formRef = ref() // 表单 Ref
+
+/** 打开弹窗 */
+const open = async (type: string, id?: number) => {
+  dialogVisible.value = true
+  dialogTitle.value = t('action.' + type)
+  formType.value = type
+  resetForm()
+  // 修改时，设置数据
+  if (id) {
+    formLoading.value = true
+    try {
+      formData.value = await pjApi.getpj(id)
+      console.log("formData",formData.value)
+    } finally {
+      formLoading.value = false
+    }
+  }
+}
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+const submitForm = async () => {
+  // 校验表单
+  await formRef.value.validate()
+  // 提交请求
+  formLoading.value = true
+  try {
+    const data = formData.value as unknown as pjVO
+    if (formType.value === 'create') {
+      await pjApi.createpj(data)
+      message.success(t('common.createSuccess'))
+    } else {
+      await pjApi.updatepj(data)
+      message.success(t('common.updateSuccess'))
+    }
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
+}
+
+/** 重置表单 */
+const resetForm = () => {
+  formData.value = {
+    pjName: undefined,
+    pjDone: undefined,
+    pjDescribe: undefined,
+    pjContent: undefined,
+    pjType: undefined,
+    pjEtime: undefined,
+    pjVtime: undefined,
+    pjDept: undefined,
+    pjNumber: undefined,
+  }
+  formRef.value?.resetFields()
+}
+</script>
diff --git a/src/views/Home/mychart/MyAChart.vue b/src/views/Home/mychart/MyAChart.vue
new file mode 100644
index 0000000..3d852f9
--- /dev/null
+++ b/src/views/Home/mychart/MyAChart.vue
@@ -0,0 +1,76 @@
+<template>
+    <div class="chart" id="MAC" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts';
+import { listInfo } from '@/api/des/info';
+export default {
+  name: 'MyAChart',
+  data() {
+    return {
+      // 项目查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 5,
+        pjName: null,
+        pjDone: null,
+        pjType: null,
+        pjDept: null,
+      },
+      // 数据收集表格数据
+      infoList: [],
+    }
+  },
+  created() {
+  },
+  mounted() {
+    this.initAie();
+  },
+  methods: {
+    initAie() {
+      listInfo(this.queryParams).then(response => {
+        this.infoList = response.rows;
+        let gList = this.infoList;
+        let length = this.infoList.length;
+        let list1 = gList[length-1];
+        let list2 = gList[length-2];
+        let list3 = gList[length-3];
+        let chartDom = document.getElementById('MAC');
+        let myChart = echarts.init(chartDom);
+        let option;
+        option = {
+          /** 配置图标离容器上下左右的距离 */
+          grid: {
+            top: "10%",
+            right: "5%",
+            left: "5%",
+            bottom: "10%",
+          },
+          legend: {},
+          tooltip: {},
+          dataset: {
+            source: [
+              ['2014', list1.infoYear, list2.infoYear, list3.infoYear],
+              ['环境', list1.infoEnvironment, list2.infoEnvironment , list3.infoEnvironment],
+              ['社会', list1.infoSociety, list2.infoSociety, list3.infoSociety],
+              ['治理', list1.infoGovern, list2.infoGovern, list3.infoGovern]
+            ]
+          },
+          xAxis: { type: 'category' },
+          yAxis: {},
+          series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
+        };
+        window.addEventListener('resize',function(){
+          myChart.resize();
+        })
+        option && myChart.setOption(option);
+      });
+    },
+  },
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/views/Home/mychart/MyBChart.vue b/src/views/Home/mychart/MyBChart.vue
new file mode 100644
index 0000000..f935079
--- /dev/null
+++ b/src/views/Home/mychart/MyBChart.vue
@@ -0,0 +1,61 @@
+
+<template>
+    <div class="chart"  id="MBC" style="width: 100%; height: 300px"></div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+export default {
+  name: 'MyBChart',
+  mounted() {
+    this.initBie();
+  },
+  methods: {
+    initBie() {
+      let chartDom = document.getElementById('MBC');
+      let myChart = echarts.init(chartDom);
+      let option;
+      option = {
+        title: {
+          subtext: '',
+          left: 'center'
+        },
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          orient: 'vertical',
+          left: 'left'
+        },
+        series: [
+          {
+            name: '发展方向',
+            type: 'pie',
+            radius: '50%',
+            data: [
+              { value: 1304, name: '环境' },
+              { value: 735, name: '社会' },
+              { value: 580, name: '治理' },
+            ],
+            emphasis: {
+              itemStyle: {
+                shadowBlur: 10,
+                shadowOffsetX: 0,
+                shadowColor: 'rgba(0, 0, 0, 0.5)'
+              }
+            }
+          }
+        ]
+      };
+      window.addEventListener('resize',function(){
+        myChart.resize();
+      })
+      option && myChart.setOption(option);
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>