控制台

src/api/disasterInfo/index.js

@@ -50,15 +50,18 @@ export function review(data) {
 /**
  * 首页 dashborad
  */
-export function statistics(){
+export function statistics(param){
   return request({
     url: '/api/'+moduleName+'/ui/disasterInfo/statistics',
-    method: 'get'
+    method: 'get',
+    params:{
+      year:param
+    }
   });
 }
 export const  getUserList  =  (name,current,size)  =>  {
   return request({
-		url: '/api/yyhouc-system-manager/user/list',
+		url: '/api/system-manager/user/list',
 		method: 'get',
 		params: {
 			name,

src/views/home/index.vue

@@ -1,74 +1,140 @@
 <template>
   <div class="home-container layout-pd">
+    <el-row :gutter="15"
+            class="home-card-one mb15" style="margin-left:0">
+      <el-date-picker style=""
+          v-model="state.year"
+          type="year"
+          placeholder="Select year"
+           />
+      <el-button style="margin-left: 10px;"
+                    @click="getDashBoradData">Search</el-button>
+    </el-row>
     <!-- 第一行 -->
-    <!-- 第一行 -->
+    <el-row :gutter="15"
-    <el-row :gutter="15" class="home-card-one mb15">
+            class="home-card-one mb15">
-      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(v, k) in state.homeOne" :key="k"
+      <el-col :xs="24"
+              :sm="12"
+              :md="12"
+              :lg="6"
+              :xl="6"
+              v-for="(v, k) in state.homeOne"
+              :key="k"
               :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }">
         <div class="home-card-item flex">
-          <div class="flex-margin flex w100" :class="` home-one-animation${k}`">
+          <div class="flex-margin flex w100"
+               :class="` home-one-animation${k}`">
             <div class="flex-auto">
               <span class="font30">{{ v.num1 }}</span>
-              <span class="ml5 font16" :style="{ color: v.color1 }">{{ v.num2 }}</span>
+              <span class="ml5 font16"
+                    :style="{ color: v.color1 }">{{ v.num2 }}</span>
               <div class="mt10">{{ v.num3 }}</div>
             </div>
-            <div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
+            <div class="home-card-item-icon flex"
-              <i class="flex-margin font32" :class="v.num4" :style="{
+                 :style="{ background: `var(${v.color2})` }">
-                  color: `var(${v.color3})`, width: '44px', height: '44px', background: 'url(\'/home/' + (k + 1) + '.png\') no-repeat',
+              <i class="flex-margin font32"
-                  backgroundSize: '70% 70%', backgroundPosition: 'center'
+                 :class="v.num4"
-                }"></i>
+                 :style="{ color: `var(${v.color3})`,width:'44px',height:'44px',background:'url(\'/home/'+(k+1)+'.png\') no-repeat',
+                 backgroundSize: '70% 70%', backgroundPosition:'center'}"></i>
             </div>
           </div>
         </div>
       </el-col>
     </el-row>
     <!-- 第二行 -->
-    <el-row :gutter="15" class="home-card-two mb15">
+    <el-row :gutter="15"
-      <!-- 后台响应须知 -->
+            class="home-card-two mb15">
-      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
+      <!-- 响应和发起量统计 -->
-        <div class="home-card-item">
+      <el-col :xs="24"
-          <div class="home-card-item-title">Notes on Background Response</div>
+              :sm="12"
-          <div class="home-monitor">
+              :md="12"
-            <div class="flex-warp">
+              :lg="12"
-              更新日期：2023-03-31<br />
+              :xl="12">
-              注意事项：<br />
-              ~对用户申请进行严格审核<br />
-              ~对用户提供灾害经纬度范围进行校正<br />
-              ~如响应及时，社交媒体数据的Twitter数据直接实时获取即可<br />
-              ~数据导出时需检查是否爬取完毕<br />
-              ~如灾害发生期间没有遥感数据，在未来一段时间需及时查询更新<br />
-            </div>
-          </div>
-        </div>
-      </el-col>
-      <!-- 全年用户申请量统计 -->
-      <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16">
-        <div class="home-card-item">
-          <div style="height: 100%" ref="homeBarRef"></div>
-        </div>
-      </el-col>
-    </el-row>
-    <!-- 第三行 -->
-    <el-row :gutter="15" class="home-card-three">
-      <!-- 灾害发生区域占比 饼图-->
-      <el-col :xs="24" :sm="10" :md="10" :lg="6" :xl="6">
-        <div class="home-card-item">
-          <div style="height: 100%" ref="homePieRef"></div>
-        </div>
-      </el-col>
-      <!-- 灾害响应月分布量变化 折线图 -->
-      <el-col :xs="24" :sm="14" :md="14" :lg="12" :xl="12" class="home-media">
         <div class="home-card-item">
           <div style="height: 100%" ref="homeLineRef"></div>
         </div>
       </el-col>
-      <!-- 灾害类型占比 -->
+      <!-- 全年用户访问量和下载量 -->
-      <el-col :xs="24" :sm="10" :md="10" :lg="6" :xl="6">
+      <el-col :xs="24"
+              :sm="12"
+              :md="12"
+              :lg="12"
+              :xl="12">
         <div class="home-card-item">
-          <div style="height: 100%" ref="homePieRef2"></div>
+          <div style="height: 100%"
+               ref="homeVandDRef"></div>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- 第三行 -->
+    <el-row :gutter="15"
+            class="home-card-three mb15">
+      <!-- chief管理 -->
+      <el-col :xs="24"
+              :sm="24"
+              :md="24"
+              :lg="12"
+              :xl="12">
+        <div class="home-card-item">
+          <div style="height: 100%"
+               ref="homeUploadRef"></div>
+        </div>
+      </el-col>
+      <!-- administrators管理 -->
+      <el-col :xs="24"
+              :sm="24"
+              :md="24"
+              :lg="12"
+              :xl="12">
+        <div class="home-card-item">
+          <div style="height: 100%"
+               ref="homeBarRef"></div>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- 第四行 -->
+    <el-row :gutter="15"
+            class="home-card-four mb15">
+      <!-- 灾害发生区域占比 饼图-->
+      <el-col :xs="24"
+              :sm="24"
+              :md="24"
+              :lg="24"
+              :xl="24">
+        <div class="home-card-item" style="display: flex;height: 460px;">
+          <div style="height: 100%;width: 58%;"
+               ref="homePieRef2"></div>
+               <div style="height: 100%;width: 42%;overflow-y: auto;">
+            <el-table :data="state.typeTable" style="width: 100%">
+              <el-table-column type="index" label="TOP" width="100"  align="center"/>
+              <el-table-column prop="name" label="Disaster type" show-overflow-tooltip align="center"></el-table-column>
+              <el-table-column prop="value" label="Number" show-overflow-tooltip align="center"></el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+    <!-- 第五行 -->
+    <el-row :gutter="15"
+            class="home-card-five mb15">
+      <!-- 灾害发生区域占比 饼图-->
+      <el-col :xs="24"
+              :sm="24"
+              :md="24"
+              :lg="24"
+              :xl="24">
+        <div class="home-card-item" style="display: flex;height: 554px;">
+          <div style="height: 100%;width: 58%;"
+               ref="homePieRef"></div>
+          <div style="height: 100%;width: 42%;overflow-y: auto;">
+            <el-table :data="state.countryTable" style="width: 100%">
+              <el-table-column type="index" label="TOP" width="100"  align="center"/>
+              <el-table-column prop="name" label="Country" show-overflow-tooltip align="center"></el-table-column>
+              <el-table-column prop="value" label="Number" show-overflow-tooltip align="center"></el-table-column>
+            </el-table>
+          </div>
         </div>
       </el-col>
-
     </el-row>
   </div>
 </template>
@@ -79,9 +145,15 @@ import * as echarts from 'echarts';
 import { storeToRefs } from 'pinia';
 import { useThemeConfig } from '/@/stores/themeConfig';
 import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
-import { statistics } from '/@/api/disasterInfo/index.js';
+import {statistics} from '/@/api/disasterInfo/index.js';
 // 定义变量内容
+//响应量 发起量
 const homeLineRef = ref();
+//访问量和下载量
+const homeVandDRef = ref();
+//上传次数统计
+const homeUploadRef = ref();
+
 const homePieRef = ref();
 const homePieRef2 = ref();
 const homeBarRef = ref();
@@ -90,9 +162,14 @@ const storesThemeConfig = useThemeConfig();
 const { themeConfig } = storeToRefs(storesThemeConfig);
 const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
 const state = reactive({
-
+  param:{
+    year:''
+  },
+  year:new Date,
   global: {
     homeChartOne: null,
+    homeVandD:null,
+    homeUpload:null,
     homeChartTwo: null,
     homeCharThree: null,
     homeChartFour: null,
@@ -136,104 +213,55 @@ const state = reactive({
       color3: '--el-color-danger',
     },
   ],
-  homeThree: [
+  homeThree: [],
-    {
-      icon: 'iconfont icon-yangan',
-      label: '浅粉红',
-      value: '2.1%OBS/M',
-      iconColor: '#F72B3F',
-    },
-    {
-      icon: 'iconfont icon-wendu',
-      label: '深红(猩红)',
-      value: '30℃',
-      iconColor: '#91BFF8',
-    },
-    {
-      icon: 'iconfont icon-shidu',
-      label: '淡紫红',
-      value: '57%RH',
-      iconColor: '#88D565',
-    },
-    {
-      icon: 'iconfont icon-shidu',
-      label: '弱紫罗兰红',
-      value: '107w',
-      iconColor: '#88D565',
-    },
-    {
-      icon: 'iconfont icon-zaosheng',
-      label: '中紫罗兰红',
-      value: '57DB',
-      iconColor: '#FBD4A0',
-    },
-    {
-      icon: 'iconfont icon-zaosheng',
-      label: '紫罗兰',
-      value: '57PV',
-      iconColor: '#FBD4A0',
-    },
-    {
-      icon: 'iconfont icon-zaosheng',
-      label: '暗紫罗兰',
-      value: '517Cpd',
-      iconColor: '#FBD4A0',
-    },
-    {
-      icon: 'iconfont icon-zaosheng',
-      label: '幽灵白',
-      value: '12kg',
-      iconColor: '#FBD4A0',
-    },
-    {
-      icon: 'iconfont icon-zaosheng',
-      label: '海军蓝',
-      value: '64fm',
-      iconColor: '#FBD4A0',
-    },
-  ],
   myCharts: [],
   charts: {
     theme: '',
     bgColor: '',
     color: '#303133',
   },
+  countryTable:[],
+  typeTable:[]
 });
 
-// 折线图
+
-const initLineChart = (xData, data) => {
+// 响应量和发起量
-  console.log(xData)
+const initLineChart = (xData,data1, data2) => {
-  console.log(data)
   if (!state.global.dispose.some((b) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose();
   state.global.homeChartOne = markRaw(echarts.init(homeLineRef.value, state.charts.theme));
   const option = {
     backgroundColor: state.charts.bgColor,
     title: {
-      text: 'Annual user application statistics',
+      text: 'Annual user response application statistics',
       x: 'left',
       textStyle: { fontSize: '15', color: state.charts.color },
     },
     grid: { top: 70, right: 20, bottom: 30, left: 30 },
     tooltip: { trigger: 'axis' },
-    legend: { data: ['响应量'], right: 0 },
+    legend: { data: ['response','initiate'], right: 0 },
     xAxis: {
-      data: xData,
+      data: xData
     },
     yAxis: [
       {
         type: 'value',
-        name: '响应量',
+        name: 'response',
         splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
       },
+      {
+        type: 'value',
+        name: 'initiate',
+        splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
+      }
     ],
     series: [
       {
-        name: '响应量',
+        name: 'response',
         type: 'line',
         symbolSize: 6,
         symbol: 'circle',
         smooth: true,
-        data: data,
+        data: data1,
         lineStyle: { color: '#fe9a8b' },
         itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
         areaStyle: {
@@ -242,12 +270,200 @@ const initLineChart = (xData, data) => {
             { offset: 1, color: '#fe9a8b03' },
           ]),
         },
+      },{
+        name: 'initiate',
+        type: 'line',
+        symbolSize: 6,
+        symbol: 'circle',
+        smooth: true,
+        data: data2,
+        lineStyle: { color: '#44c05b' },
+        itemStyle: { color: '#44c05b', borderColor: '#44c05b' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#44c05b' },
+            { offset: 1, color: '#44c05b' },
+          ]),
         },
+      }
     ],
   };
   state.global.homeChartOne.setOption(option);
   state.myCharts.push(state.global.homeChartOne);
 };
+// 访问量 和下载次数
+const initLineVandDChart = (xData,data1, data2) => {
+  if (!state.global.dispose.some((b) => b === state.global.homeVandD)) state.global.homeVandD.dispose();
+  state.global.homeVandD = markRaw(echarts.init(homeVandDRef.value, state.charts.theme));
+  const option = {
+    backgroundColor: state.charts.bgColor,
+    title: {
+      text: 'Annual disaster type visits and downloads statistics',
+      x: 'left',
+      textStyle: { fontSize: '15', color: state.charts.color },
+    },
+    grid: { top: 70, right: 20, bottom: 30, left: 30 },
+    tooltip: { trigger: 'axis' },
+    legend: { data: ['visit','download'], right: 0 },
+    xAxis: {
+      data: xData,
+    },
+    yAxis: [
+      {
+        type: 'value',
+        name: 'visit',
+        splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
+      },
+      {
+        type: 'value',
+        name: 'download',
+        splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
+      }
+    ],
+    series: [
+      {
+        name: 'visit',
+        type: 'line',
+        symbolSize: 6,
+        symbol: 'circle',
+        smooth: true,
+        data: data2,
+        lineStyle: { color: '#3d91e7' },
+        itemStyle: { color: '#3d91e7', borderColor: '#3d91e7' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#3d91e7' },
+            { offset: 1, color: '#3d91e7' },
+          ]),
+        },
+      },{
+        name: 'download',
+        type: 'line',
+        symbolSize: 6,
+        symbol: 'circle',
+        smooth: true,
+        data: data1,
+        lineStyle: { color: '#e78d3d' },
+        itemStyle: { color: '#e78d3d', borderColor: '#e78d3d' },
+        areaStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#e78d3d' },
+            { offset: 1, color: '#e78d3d' },
+          ]),
+        },
+      }
+    ],
+  };
+  state.global.homeVandD.setOption(option);
+  state.myCharts.push(state.global.homeVandD);
+};
+
+// Chief 管理
+const initChiefChart = (xData,yData) => {
+  if (!state.global.dispose.some((b) => b === state.global.homeUpload)) state.global.homeUpload.dispose();
+  state.global.homeUpload = echarts.init(homeUploadRef.value, state.charts.theme);
+  const option = {
+    backgroundColor: state.charts.bgColor,
+    title: {
+      text: 'Annual Chief Management Statistics TOP10',
+      x: 'left',
+      textStyle: { fontSize: '15', color: state.charts.color },
+    },
+    //tooltip: { trigger: 'item', formatter: '{c}' },
+    tooltip: {
+      show:true
+      // trigger: 'axis',
+      // axisPointer: {
+      //   type: 'shadow'
+      // },
+      // formatter: '{c}'
+    },
+    legend: { data: ['chief'], right: 0 },
+    grid: { top: 70, right: 80, bottom: 30, left: 80 },
+    xAxis: [
+      {
+        type: 'category',
+        data: xData
+      },
+    ],
+    yAxis: [
+      {
+        type:'value'
+      }
+    ],
+    series: [
+      {
+        name: 'chief',
+        type: 'bar',
+        barWidth: 30,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: '#fe9a8bb3' },
+            { offset: 1, color: '#fe9a8b03' },
+          ]),
+          //柱状图圆角
+          borderRadius: [30, 30, 0, 0],
+        },
+        data: yData
+      }
+    ],
+  };
+  state.global.homeUpload.setOption(option);
+  state.myCharts.push(state.global.homeUpload);
+};
+// administrators 管理
+const initAdministratorsChart = (xData,yData) => {
+  if (!state.global.dispose.some((b) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose();
+  state.global.homeCharThree = echarts.init(homeBarRef.value, state.charts.theme);
+  const option = {
+    backgroundColor: state.charts.bgColor,
+    title: {
+      text: 'Annual Administrators Management Statistics TOP10',
+      x: 'left',
+      textStyle: { fontSize: '15', color: state.charts.color },
+    },
+    tooltip: { trigger: 'item', formatter: '{c}' },
+    legend: { data: ['administrators'], right: 0 },
+    grid: { top: 70, right: 80, bottom: 30, left: 80 },
+    xAxis: [
+      {
+        type: 'category',
+        data: xData,
+        boundaryGap: true,
+        axisTick: { show: false },
+      },
+    ],
+    yAxis: [
+      {
+        nameLocation: 'middle',
+        nameTextStyle: { padding: [50, 4, 5, 6] },
+        splitLine: { show: false },
+        axisLine: { show: false },
+        axisTick: { show: false },
+        axisLabel: { color: state.charts.color, formatter: '{value} ' },
+      },
+    ],
+    series: [
+      {
+        name: 'administrators',
+        type: 'bar',
+        barWidth: 30,
+        yAxisIndex: 0,
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            { offset: 0, color: 'rgba(108,80,243,0.3)' },
+            { offset: 1, color: 'rgba(108,80,243,0)' },
+          ]),
+          //柱状图圆角
+          borderRadius: [30, 30, 0, 0],
+        },
+        data: yData,
+      },
+    ],
+  };
+  state.global.homeCharThree.setOption(option);
+  state.myCharts.push(state.global.homeCharThree);
+};
 //homePieRef 灾害发生区域占比 饼图
 const initPieChart = (data) => {
   if (!state.global.dispose.some((b) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose();
@@ -262,7 +478,7 @@ const initPieChart = (data) => {
   const option = {
     backgroundColor: state.charts.bgColor,
     title: {
-      text: 'Proportion of Disaster Occurred Areas',
+      text: 'Proportion of Disaster Occurred Areas TOP15',
       x: 'left',
       textStyle: { fontSize: '15', color: state.charts.color },
     },
@@ -330,7 +546,6 @@ const initPieChart = (data) => {
 };
 //homePieRef2 灾害类型占比 饼图
 const initPieChart2 = (data) => {
-  console.log("pie2", data)
   if (!state.global.dispose.some((b) => b === state.global.homeChartFour)) state.global.homeChartFour.dispose();
   state.global.homeChartFour = markRaw(echarts.init(homePieRef2.value, state.charts.theme));
   // var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
@@ -365,36 +580,6 @@ const initPieChart2 = (data) => {
         },
       ],
     },
-    // legend: {
-    //   type: 'scroll',
-    //   orient: 'vertical',
-    //   right: '0%',
-    //   left: '65%',
-    //   top: 'center',
-    //   itemWidth: 14,
-    //   itemHeight: 14,
-    //   data: getname,
-    //   textStyle: {
-    //     rich: {
-    //       name: {
-    //         fontSize: 14,
-    //         fontWeight: 400,
-    //         width: 200,
-    //         height: 35,
-    //         padding: [0, 0, 0, 60],
-    //         color: state.charts.color,
-    //       },
-    //       rate: {
-    //         fontSize: 15,
-    //         fontWeight: 500,
-    //         height: 35,
-    //         width: 40,
-    //         padding: [0, 0, 0, 30],
-    //         color: state.charts.color,
-    //       },
-    //     },
-    //   },
-    // },
     series: [
       {
         type: 'pie',
@@ -409,59 +594,6 @@ const initPieChart2 = (data) => {
   state.global.homeChartFour.setOption(option);
   state.myCharts.push(state.global.homeChartFour);
 };
-// 柱状图
-const initBarChart = (xData, yData) => {
-  if (!state.global.dispose.some((b) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose();
-  state.global.homeCharThree = echarts.init(homeBarRef.value, state.charts.theme);
-  const option = {
-    backgroundColor: state.charts.bgColor,
-    title: {
-      text: 'Disaster response monthly distribution change',
-      x: 'left',
-      textStyle: { fontSize: '15', color: state.charts.color },
-    },
-    tooltip: { trigger: 'item', formatter: '{c}' },
-    legend: { data: ['申请量'], top: 0 },
-    grid: { top: 70, right: 80, bottom: 30, left: 80 },
-    xAxis: [
-      {
-        type: 'category',
-        data: xData,
-        boundaryGap: true,
-        axisTick: { show: false },
-      },
-    ],
-    yAxis: [
-      {
-        nameLocation: 'middle',
-        nameTextStyle: { padding: [50, 4, 5, 6] },
-        splitLine: { show: false },
-        axisLine: { show: false },
-        axisTick: { show: false },
-        axisLabel: { color: state.charts.color, formatter: '{value} ' },
-      },
-    ],
-    series: [
-      {
-        name: '申请量',
-        type: 'bar',
-        barWidth: 30,
-        yAxisIndex: 0,
-        itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: 'rgba(108,80,243,0.3)' },
-            { offset: 1, color: 'rgba(108,80,243,0)' },
-          ]),
-          //柱状图圆角
-          borderRadius: [30, 30, 0, 0],
-        },
-        data: yData,
-      },
-    ],
-  };
-  state.global.homeCharThree.setOption(option);
-  state.myCharts.push(state.global.homeCharThree);
-};
 // 批量设置 echarts resize
 const initEchartsResizeFun = () => {
   nextTick(() => {
@@ -483,47 +615,63 @@ const setHeadData = (data) => {
   state.homeOne[3].num1 = data.downloadCount
 }
 /**
- * 设置发生区域灾害占比
+ * 设置响应量和发起量
  *  @param data
  */
-const setDisasterArea = (data) => {
+const setLineChart = (data) => {
-  let arr = [];
+  let xData = [];
-  for (let [k, v] of Object.entries(data)) {
+  //let yData = [];
-    arr.push({ name: k, value: v });
+  let data1 = [];//initiate
-  }
+  let data2 = [];//response
-  initPieChart(arr);
+  data.forEach(item=>{
+    xData.push(item.key)
+    data1.push(item.initiate)
+    data2.push(item.response)
+  })
+  // 响应量和发起量
+  initLineChart(xData,data1,data2);
 }
 /**
- * 设置灾害响应月份分布量
+ * 设置访问量 和下载次数
  *  @param data
  */
-const setResponseDisaster = (data) => {
+ const setLineVandDChart = (data) => {
   let xData = [];
-  let yData = [];
+  let data1 = [];
-  data.forEach(item => {
+  let data2 = [];
-    for (let [k, v] of Object.entries(item)) {
+  data.forEach(item=>{
-      xData.push(k);
+    xData.push(item.dict_value)
-      yData.push(v.value);
+    data1.push(item.download)
-    }
+    data2.push(item.visit)
   })
-  initLineChart(xData, yData);
+  //访问量 和下载次数
+  initLineVandDChart(xData,data1, data2)
 }
 /**
- * 设置灾害申请月份分布量
+ * 管理员管理量
  *  @param data
  */
-const setApplyDisaster = (data) => {
+const setAdministratorsChart = (data) => {
   let xData = [];
   let yData = [];
-  data.forEach(item => {
+  data.forEach(item=>{
-    for (let [k, v] of Object.entries(item)) {
+    xData.push(item.name)
-      xData.push(k);
+    yData.push(item.val)
-      yData.push(v.value);
-    }
   })
-  setTimeout(() => {
+  initAdministratorsChart(xData,yData);
-    initBarChart(xData, yData);
+}
-  }, 700);
+/**
+ * 管理员管理量
+ *  @param data
+ */
+ const setChiefChart = (data) => {
+  let xData = [];
+  let yData = [];
+  data.forEach(item=>{
+    xData.push(item.name)
+    yData.push(item.val)
+  })
+  initChiefChart(xData,yData);
 }
 /**
  * 设置灾种数量占比
@@ -531,20 +679,46 @@ const setApplyDisaster = (data) => {
  */
 const setDisasterType = (data) => {
   let arr = [];
-  for (let [k, v] of Object.entries(data)) {
+  data.forEach(item=>{
-    arr.push({ name: k, value: v });
+    arr.push({ name: item.name, value: item.val});
-  }
+  })
+  // for(let [k , v] of Object.entries(data)){
+  //   arr.push({ name: k, value: v});
+    
+  // }
+  state.typeTable = arr
   initPieChart2(arr)
 }
+
+/**
+ * 设置发生区域灾害占比  Proportion of Disaster Occurred Areas TOP15
+ * @param data
+ */
+ const setDisasterArea = (data) => {
+  let arr = [];
+  for(let [k , v] of Object.entries(data)){
+    arr.push({ name: k, value: v});
+  }
+  state.countryTable = arr
+  initPieChart(arr);
+}
 //获取控制台数据
 const getDashBoradData = () => {
-  statistics().then(res => {
+  state.param.year = state.year.getFullYear()
+  statistics(state.param.year).then(res=>{
     console.log(res);
+    //第一栏
     setHeadData(res.header);
-    setDisasterArea(res.country);
+    //第二栏
-    setResponseDisaster(res.responseMonth);
+    setLineChart(res.line)
-    setApplyDisaster(res.applyMonth);
+    setLineVandDChart(res.vandd);
+    //第三栏
+    setAdministratorsChart(res.admin)
+    setChiefChart(res.chief)
+    //第四栏
     setDisasterType(res.disasterNum);
+    //第5栏
+    setDisasterArea(res.country);
   })
 }
 // 批量设置 echarts resize
@@ -575,18 +749,18 @@ watch(
       state.charts.theme = isIsDark ? 'dark' : '';
       state.charts.bgColor = isIsDark ? 'transparent' : '';
       state.charts.color = isIsDark ? '#dadada' : '#303133';
-      setTimeout(() => {
+      // setTimeout(() => {
-        //initLineChart();
+      //   //initLineChart();
-      }, 500);
+      // }, 500);
-      setTimeout(() => {
+      // setTimeout(() => {
-        //initPieChart();
+      //   //initPieChart();
-      }, 700);
+      // }, 700);
-      setTimeout(() => {
+      // setTimeout(() => {
-        //initPieChart2();
+      //   //initPieChart2();
-      }, 700);
+      // }, 700);
-      setTimeout(() => {
+      // setTimeout(() => {
-        initBarChart();
+      //   initBarChart();
-      }, 1000);
+      // }, 1000);
     });
   },
   {
@@ -598,13 +772,13 @@ watch(
 
 <style scoped lang="scss">
 $homeNavLengh: 8;
-
 .home-container {
 	overflow: hidden;
-
 	.home-card-one,
 	.home-card-two,
-  .home-card-three {
+	.home-card-three ,
+	.home-card-four,
+	.home-card-five{
 		.home-card-item {
 			width: 100%;
 			height: 130px;
@@ -615,23 +789,19 @@ $homeNavLengh: 8;
 			background: var(--el-color-white);
 			color: var(--el-text-color-primary);
 			border: 1px solid var(--next-border-color-light);
-
 			&:hover {
 				box-shadow: 0 2px 12px var(--next-color-dark-hover);
 				transition: all ease 0.3s;
 			}
-
 			&-icon {
 				width: 70px;
 				height: 70px;
 				border-radius: 100%;
 				flex-shrink: 1;
-
 				i {
 					color: var(--el-text-color-placeholder);
 				}
 			}
-
 			&-title {
 				font-size: 15px;
 				font-weight: bold;
@@ -639,7 +809,6 @@ $homeNavLengh: 8;
 			}
 		}
 	}
-
 	.home-card-one {
 		@for $i from 0 through 3 {
 			.home-one-animation#{$i} {
@@ -651,22 +820,20 @@ $homeNavLengh: 8;
 			}
 		}
 	}
-
 	.home-card-two,
-  .home-card-three {
+	.home-card-three ,
+	.home-card-four,
+	.home-card-five {
 		.home-card-item {
 			height: 400px;
 			width: 100%;
 			overflow: hidden;
-
 			.home-monitor {
 				height: 100%;
-
 				.flex-warp-item {
 					width: 25%;
 					height: 111px;
 					display: flex;
-
 					.flex-warp-item-box {
 						margin: auto;
 						text-align: center;
@@ -676,13 +843,11 @@ $homeNavLengh: 8;
 						background: var(--next-bg-color);
 						cursor: pointer;
 						transition: all 0.3s ease;
-
 						&:hover {
 							background: var(--el-color-primary-light-9);
 							transition: all 0.3s ease;
 						}
 					}
-
 					@for $i from 0 through $homeNavLengh {
 						.home-animation#{$i} {
 							opacity: 0;