代码提交-glj
This commit is contained in:
glj
parent
ac02974a87
commit
ea97ed4f29
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -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"
|
||||
layout="total, sizes, prev, pager, next" :total="state.tableData.total">
|
||||
background v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next"
|
||||
: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"
|
||||
layout="total, sizes, prev, pager, next" :total="state.tableData.total">
|
||||
background v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next"
|
||||
:total="state.tableData.total">
|
||||
</el-pagination>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
|
@ -249,7 +249,7 @@ const editHotspot = (row) => {
|
|||
};
|
||||
// 打开修改词云弹窗
|
||||
const editWordCloud = (row) => {
|
||||
editWordCloudsRef.value.openDialog(row);
|
||||
editWordCloudsRef.value.openDialog(row);
|
||||
};
|
||||
//批量删除词云或者热点数据
|
||||
const batchDel = () => {
|
||||
|
|
@ -366,6 +366,7 @@ onMounted(() => {
|
|||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mt15 {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
|
|
|
|||
|
|
@ -1,44 +1,31 @@
|
|||
<template>
|
||||
<div class="home-container layout-pd">
|
||||
<!-- 第一行 -->
|
||||
<el-row :gutter="15"
|
||||
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"
|
||||
:class="{ 'home-media home-media-lg': k > 1, 'home-media-sm': k === 1 }">
|
||||
<!-- 第一行 -->
|
||||
<el-row :gutter="15" 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"
|
||||
: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})` }">
|
||||
<i class="flex-margin font32"
|
||||
:class="v.num4"
|
||||
:style="{ color: `var(${v.color3})` }"></i>
|
||||
<div class="home-card-item-icon flex" :style="{ background: `var(${v.color2})` }">
|
||||
<i class="flex-margin font32" :class="v.num4" :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">
|
||||
<el-col :xs="24" :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"
|
||||
:sm="14"
|
||||
:md="14"
|
||||
:lg="16"
|
||||
:xl="16">
|
||||
<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 style="height: 100%" ref="homeBarRef"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!-- 第三行 -->
|
||||
<el-row :gutter="15"
|
||||
class="home-card-three">
|
||||
<el-row :gutter="15" class="home-card-three">
|
||||
<!-- 灾害发生区域占比 饼图-->
|
||||
<el-col :xs="24"
|
||||
:sm="10"
|
||||
:md="10"
|
||||
:lg="6"
|
||||
:xl="6">
|
||||
<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 style="height: 100%" ref="homePieRef"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<!-- 灾害响应月分布量变化 折线图 -->
|
||||
<el-col :xs="24"
|
||||
:sm="14"
|
||||
:md="14"
|
||||
:lg="12"
|
||||
:xl="12"
|
||||
class="home-media">
|
||||
<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 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="10" :md="10" :lg="6" :xl="6">
|
||||
<div class="home-card-item">
|
||||
<div style="height: 100%"
|
||||
ref="homePieRef2"></div>
|
||||
<div style="height: 100%" 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)){
|
||||
arr.push({ name: k, value: v});
|
||||
for (let [k, v] of Object.entries(data)) {
|
||||
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=>{
|
||||
for(let [k , v] of Object.entries(item)){
|
||||
data.forEach(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=>{
|
||||
for(let [k , v] of Object.entries(item)){
|
||||
data.forEach(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)){
|
||||
arr.push({ name: k, value: v});
|
||||
for (let [k, v] of Object.entries(data)) {
|
||||
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;
|
||||
.home-card-one,
|
||||
.home-card-two,
|
||||
.home-card-three {
|
||||
.home-card-item {
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
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;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.home-card-one {
|
||||
@for $i from 0 through 3 {
|
||||
.home-one-animation#{$i} {
|
||||
opacity: 0;
|
||||
animation-name: error-num;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: calc($i/4) + s;
|
||||
}
|
||||
}
|
||||
}
|
||||
.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;
|
||||
color: var(--el-text-color-primary);
|
||||
display: flex;
|
||||
border-radius: 5px;
|
||||
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;
|
||||
animation-name: error-num;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: calc($i/10) + s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
overflow: hidden;
|
||||
|
||||
.home-card-one,
|
||||
.home-card-two,
|
||||
.home-card-three {
|
||||
.home-card-item {
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
border-radius: 4px;
|
||||
transition: all ease 0.3s;
|
||||
padding: 20px;
|
||||
overflow: hidden;
|
||||
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;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-card-one {
|
||||
@for $i from 0 through 3 {
|
||||
.home-one-animation#{$i} {
|
||||
opacity: 0;
|
||||
animation-name: error-num;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: calc($i/4) + s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
color: var(--el-text-color-primary);
|
||||
display: flex;
|
||||
border-radius: 5px;
|
||||
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;
|
||||
animation-name: error-num;
|
||||
animation-duration: 0.5s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: calc($i/10) + s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue