代码提交-glj

src/views/dataService/visualData/index.vue

@@ -61,8 +61,8 @@
                 </el-table>
                 <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                   :pager-count="3" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum"
-                  background v-model:page-size="state.tableData.param.pageSize"
+                  background v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next"
-                  layout="total, sizes, prev, pager, next" :total="state.tableData.total">
+                  :total="state.tableData.total">
                 </el-pagination>
               </el-tab-pane>
               <el-tab-pane label="hotspot" name="second">
@@ -82,8 +82,8 @@
                 </el-table>
                 <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15"
                   :pager-count="3" :page-sizes="[10, 20, 30]" v-model:current-page="state.tableData.param.pageNum"
-                  background v-model:page-size="state.tableData.param.pageSize"
+                  background v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next"
-                  layout="total, sizes, prev, pager, next" :total="state.tableData.total">
+                  :total="state.tableData.total">
                 </el-pagination>
               </el-tab-pane>
             </el-tabs>
@@ -366,6 +366,7 @@ onMounted(() => {
   font-size: 32px;
   font-weight: 600;
 }
+
 .mt15 {
   display: flex;
   justify-content: end;

src/views/home/index.vue

@@ -1,44 +1,31 @@
 <template>
   <div class="home-container layout-pd">
     <!-- 第一行 -->
-    <el-row :gutter="15"
+    <!-- 第一行 -->
-            class="home-card-one mb15">
+    <el-row :gutter="15" class="home-card-one mb15">
-      <el-col :xs="24"
+      <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(v, k) in state.homeOne" :key="k"
-              :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"
+          <div class="flex-margin flex w100" :class="` home-one-animation${k}`">
-               :class="` home-one-animation${k}`">
             <div class="flex-auto">
               <span class="font30">{{ v.num1 }}</span>
-              <span class="ml5 font16"
+              <span class="ml5 font16" :style="{ color: v.color1 }">{{ v.num2 }}</span>
-                    :style="{ color: v.color1 }">{{ v.num2 }}</span>
               <div class="mt10">{{ v.num3 }}</div>
             </div>
-            <div class="home-card-item-icon flex"
+            <div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
-                 :style="{ background: `var(${v.color2})` }">
+              <i class="flex-margin font32" :class="v.num4" :style="{
-              <i class="flex-margin font32"
+                  color: `var(${v.color3})`, width: '44px', height: '44px', background: 'url(\'/home/' + (k + 1) + '.png\') no-repeat',
-                 :class="v.num4"
+                  backgroundSize: '70% 70%', backgroundPosition: 'center'
-                 :style="{ color: `var(${v.color3})` }"></i>
+                }"></i>
             </div>
           </div>
         </div>
       </el-col>
     </el-row>
     <!-- 第二行 -->
-    <el-row :gutter="15"
+    <el-row :gutter="15" class="home-card-two mb15">
-            class="home-card-two mb15">
       <!-- 后台响应须知 -->
-      <el-col :xs="24"
+      <el-col :xs="24" :sm="10" :md="10" :lg="8" :xl="8">
-              :sm="10"
-              :md="10"
-              :lg="8"
-              :xl="8">
         <div class="home-card-item">
           <div class="home-card-item-title">Notes on Background Response</div>
           <div class="home-monitor">
@@ -55,52 +42,30 @@
         </div>
       </el-col>
       <!-- 全年用户申请量统计 -->
-      <el-col :xs="24"
+      <el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16">
-              :sm="14"
-              :md="14"
-              :lg="16"
-              :xl="16">
         <div class="home-card-item">
-          <div style="height: 100%"
+          <div style="height: 100%" ref="homeBarRef"></div>
-               ref="homeBarRef"></div>
         </div>
       </el-col>
     </el-row>
     <!-- 第三行 -->
-    <el-row :gutter="15"
+    <el-row :gutter="15" class="home-card-three">
-            class="home-card-three">
       <!-- 灾害发生区域占比 饼图-->
-      <el-col :xs="24"
+      <el-col :xs="24" :sm="10" :md="10" :lg="6" :xl="6">
-              :sm="10"
-              :md="10"
-              :lg="6"
-              :xl="6">
         <div class="home-card-item">
-          <div style="height: 100%"
+          <div style="height: 100%" ref="homePieRef"></div>
-               ref="homePieRef"></div>
         </div>
       </el-col>
       <!-- 灾害响应月分布量变化 折线图 -->
-      <el-col :xs="24"
+      <el-col :xs="24" :sm="14" :md="14" :lg="12" :xl="12" class="home-media">
-              :sm="14"
-              :md="14"
-              :lg="12"
-              :xl="12"
-              class="home-media">
         <div class="home-card-item">
-          <div style="height: 100%"
+          <div style="height: 100%" ref="homeLineRef"></div>
-               ref="homeLineRef"></div>
         </div>
       </el-col>
       <!-- 灾害类型占比 -->
-      <el-col :xs="24"
+      <el-col :xs="24" :sm="10" :md="10" :lg="6" :xl="6">
-              :sm="10"
-              :md="10"
-              :lg="6"
-              :xl="6">
         <div class="home-card-item">
-          <div style="height: 100%"
+          <div style="height: 100%" ref="homePieRef2"></div>
-               ref="homePieRef2"></div>
         </div>
       </el-col>
 
@@ -114,7 +79,7 @@ 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 homePieRef = ref();
@@ -138,7 +103,7 @@ const state = reactive({
       num1: '',
       num2: '',
       num3: 'Number of Disaster Response Applications',
-      num4: 'fa fa-meetup',
+      num4: 'iconfont',
       color1: '#FF6462',
       color2: '--next-color-primary-lighter',
       color3: '--el-color-primary',
@@ -147,7 +112,7 @@ const state = reactive({
       num1: '',
       num2: '',
       num3: 'Actual times of disaster response',
-      num4: 'iconfont icon-ditu',
+      num4: 'iconfont',
       color1: '#6690F9',
       color2: '--next-color-success-lighter',
       color3: '--el-color-success',
@@ -156,7 +121,7 @@ const state = reactive({
       num1: '',
       num2: '',
       num3: 'User Visits',
-      num4: 'iconfont icon-zaosheng',
+      num4: 'iconfont',
       color1: '#6690F9',
       color2: '--next-color-warning-lighter',
       color3: '--el-color-warning',
@@ -165,7 +130,7 @@ const state = reactive({
       num1: '',
       num2: '',
       num3: 'Data downloads',
-      num4: 'fa fa-github-alt',
+      num4: 'iconfont',
       color1: '#FF6462',
       color2: '--next-color-danger-lighter',
       color3: '--el-color-danger',
@@ -236,7 +201,7 @@ const state = reactive({
 });
 
 // 折线图
-const initLineChart = (xData,data) => {
+const initLineChart = (xData, data) => {
   console.log(xData)
   console.log(data)
   if (!state.global.dispose.some((b) => b === state.global.homeChartOne)) state.global.homeChartOne.dispose();
@@ -365,7 +330,7 @@ const initPieChart = (data) => {
 };
 //homePieRef2 灾害类型占比 饼图
 const initPieChart2 = (data) => {
-  console.log("pie2",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 = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案'];
@@ -445,7 +410,7 @@ const initPieChart2 = (data) => {
   state.myCharts.push(state.global.homeChartFour);
 };
 // 柱状图
-const initBarChart = (xData,yData) => {
+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 = {
@@ -523,8 +488,8 @@ const setHeadData = (data) => {
  */
 const setDisasterArea = (data) => {
   let arr = [];
-  for(let [k , v] of Object.entries(data)){
+  for (let [k, v] of Object.entries(data)) {
-    arr.push({ name: k, value: v});
+    arr.push({ name: k, value: v });
   }
   initPieChart(arr);
 }
@@ -535,13 +500,13 @@ const setDisasterArea = (data) => {
 const setResponseDisaster = (data) => {
   let xData = [];
   let yData = [];
-  data.forEach(item=>{
+  data.forEach(item => {
-    for(let [k , v] of Object.entries(item)){
+    for (let [k, v] of Object.entries(item)) {
       xData.push(k);
       yData.push(v.value);
     }
   })
-  initLineChart(xData,yData);
+  initLineChart(xData, yData);
 }
 /**
  * 设置灾害申请月份分布量
@@ -550,14 +515,14 @@ const setResponseDisaster = (data) => {
 const setApplyDisaster = (data) => {
   let xData = [];
   let yData = [];
-  data.forEach(item=>{
+  data.forEach(item => {
-    for(let [k , v] of Object.entries(item)){
+    for (let [k, v] of Object.entries(item)) {
       xData.push(k);
       yData.push(v.value);
     }
   })
   setTimeout(() => {
-    initBarChart(xData,yData);
+    initBarChart(xData, yData);
   }, 700);
 }
 /**
@@ -566,14 +531,14 @@ const setApplyDisaster = (data) => {
  */
 const setDisasterType = (data) => {
   let arr = [];
-  for(let [k , v] of Object.entries(data)){
+  for (let [k, v] of Object.entries(data)) {
-    arr.push({ name: k, value: v});
+    arr.push({ name: k, value: v });
   }
   initPieChart2(arr)
 }
 //获取控制台数据
 const getDashBoradData = () => {
-  statistics().then(res=>{
+  statistics().then(res => {
     console.log(res);
     setHeadData(res.header);
     setDisasterArea(res.country);
@@ -633,8 +598,10 @@ watch(
 
 <style scoped lang="scss">
 $homeNavLengh: 8;
+
 .home-container {
   overflow: hidden;
+
   .home-card-one,
   .home-card-two,
   .home-card-three {
@@ -648,19 +615,23 @@ $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;
@@ -668,6 +639,7 @@ $homeNavLengh: 8;
       }
     }
   }
+
   .home-card-one {
     @for $i from 0 through 3 {
       .home-one-animation#{$i} {
@@ -679,18 +651,22 @@ $homeNavLengh: 8;
       }
     }
   }
+
   .home-card-two,
   .home-card-three {
     .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;
@@ -700,11 +676,13 @@ $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;