代码提交-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"
+        :class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }">
-              :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,90 +598,103 @@ watch(
 
 <style scoped lang="scss">
 $homeNavLengh: 8;
+
 .home-container {
-	overflow: hidden;
+  overflow: hidden;
-	.home-card-one,
+
-	.home-card-two,
+  .home-card-one,
-	.home-card-three {
+  .home-card-two,
-		.home-card-item {
+  .home-card-three {
-			width: 100%;
+    .home-card-item {
-			height: 130px;
+      width: 100%;
-			border-radius: 4px;
+      height: 130px;
-			transition: all ease 0.3s;
+      border-radius: 4px;
-			padding: 20px;
+      transition: all ease 0.3s;
-			overflow: hidden;
+      padding: 20px;
-			background: var(--el-color-white);
+      overflow: hidden;
-			color: var(--el-text-color-primary);
+      background: var(--el-color-white);
-			border: 1px solid var(--next-border-color-light);
+      color: var(--el-text-color-primary);
-			&:hover {
+      border: 1px solid var(--next-border-color-light);
-				box-shadow: 0 2px 12px var(--next-color-dark-hover);
+
-				transition: all ease 0.3s;
+      &:hover {
-			}
+        box-shadow: 0 2px 12px var(--next-color-dark-hover);
-			&-icon {
+        transition: all ease 0.3s;
-				width: 70px;
+      }
-				height: 70px;
+
-				border-radius: 100%;
+      &-icon {
-				flex-shrink: 1;
+        width: 70px;
-				i {
+        height: 70px;
-					color: var(--el-text-color-placeholder);
+        border-radius: 100%;
-				}
+        flex-shrink: 1;
-			}
+
-			&-title {
+        i {
-				font-size: 15px;
+          color: var(--el-text-color-placeholder);
-				font-weight: bold;
+        }
-				height: 30px;
+      }
-			}
+
-		}
+      &-title {
-	}
+        font-size: 15px;
-	.home-card-one {
+        font-weight: bold;
-		@for $i from 0 through 3 {
+        height: 30px;
-			.home-one-animation#{$i} {
+      }
-				opacity: 0;
+    }
-				animation-name: error-num;
+  }
-				animation-duration: 0.5s;
+
-				animation-fill-mode: forwards;
+  .home-card-one {
-				animation-delay: calc($i/4) + s;
+    @for $i from 0 through 3 {
-			}
+      .home-one-animation#{$i} {
-		}
+        opacity: 0;
-	}
+        animation-name: error-num;
-	.home-card-two,
+        animation-duration: 0.5s;
-	.home-card-three {
+        animation-fill-mode: forwards;
-		.home-card-item {
+        animation-delay: calc($i/4) + s;
-			height: 400px;
+      }
-			width: 100%;
+    }
-			overflow: hidden;
+  }
-			.home-monitor {
+
-				height: 100%;
+  .home-card-two,
-				.flex-warp-item {
+  .home-card-three {
-					width: 25%;
+    .home-card-item {
-					height: 111px;
+      height: 400px;
-					display: flex;
+      width: 100%;
-					.flex-warp-item-box {
+      overflow: hidden;
-						margin: auto;
+
-						text-align: center;
+      .home-monitor {
-						color: var(--el-text-color-primary);
+        height: 100%;
-						display: flex;
+
-						border-radius: 5px;
+        .flex-warp-item {
-						background: var(--next-bg-color);
+          width: 25%;
-						cursor: pointer;
+          height: 111px;
-						transition: all 0.3s ease;
+          display: flex;
-						&:hover {
+
-							background: var(--el-color-primary-light-9);
+          .flex-warp-item-box {
-							transition: all 0.3s ease;
+            margin: auto;
-						}
+            text-align: center;
-					}
+            color: var(--el-text-color-primary);
-					@for $i from 0 through $homeNavLengh {
+            display: flex;
-						.home-animation#{$i} {
+            border-radius: 5px;
-							opacity: 0;
+            background: var(--next-bg-color);
-							animation-name: error-num;
+            cursor: pointer;
-							animation-duration: 0.5s;
+            transition: all 0.3s ease;
-							animation-fill-mode: forwards;
+
-							animation-delay: calc($i/10) + s;
+            &:hover {
-						}
+              background: var(--el-color-primary-light-9);
-					}
+              transition: all 0.3s ease;
-				}
+            }
-			}
+          }
-		}
+
-	}
+          @for $i from 0 through $homeNavLengh {
+            .home-animation#{$i} {
+              opacity: 0;
+              animation-name: error-num;
+              animation-duration: 0.5s;
+              animation-fill-mode: forwards;
+              animation-delay: calc($i/10) + s;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>