glj-代码提交
This commit is contained in:
glj
parent
a2f8e81735
commit
ba65cb9501
|
|
@ -79,6 +79,16 @@ export function submit(data) {
|
|||
});
|
||||
}
|
||||
|
||||
export function deleteDisasterInfoManage(id) {
|
||||
return request({
|
||||
url: '/api/' + moduleName + '/ui/disasterInfo/deleteDisasterInfoManage',
|
||||
method: 'get',
|
||||
params: {
|
||||
id
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function responseEndedDisasterInfo(id) {
|
||||
return request({
|
||||
url: '/api/' + moduleName + '/ui/disasterInfo/responseEndedDisasterInfo',
|
||||
|
|
@ -88,6 +98,7 @@ export function responseEndedDisasterInfo(id) {
|
|||
}
|
||||
});
|
||||
}
|
||||
|
||||
export function deleteByIds(ids) {
|
||||
return request({
|
||||
url: '/api/' + moduleName + '/ui/disasterInfo/deleteByIds',
|
||||
|
|
|
|||
|
|
@ -1,134 +1,108 @@
|
|||
<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 :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"
|
||||
class="home-card-one mb15">
|
||||
<el-col :xs="24"
|
||||
<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 }">
|
||||
: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"
|
||||
<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>
|
||||
: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="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12">
|
||||
<!-- <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<div class="home-card-item">
|
||||
<div style="height: 100%" ref="homeLineRef"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-col> -->
|
||||
<!-- 全年用户访问量和下载量 -->
|
||||
<el-col :xs="24"
|
||||
:sm="12"
|
||||
:md="12"
|
||||
:lg="12"
|
||||
:xl="12">
|
||||
|
||||
</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 class="home-card-item">
|
||||
<div style="height: 100%"
|
||||
ref="homeVandDRef"></div>
|
||||
<div style="height: 100%; width: 100%" ref="homeTypeDRef"></div>
|
||||
</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">
|
||||
|
||||
<el-row :gutter="15" class="home-card-two mb15">
|
||||
<!-- 全年用户访问量和下载量 -->
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<div class="home-card-item">
|
||||
<div style="height: 100%"
|
||||
ref="homeUploadRef"></div>
|
||||
<div style="height: 100%; width: 100%" ref="homeVandDRef"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
|
||||
<div class="home-card-item">
|
||||
<div style="height: 100%; width: 90%" ref="homePieRef2"></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">
|
||||
<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 style="height: 100%" ref="homeBarRef"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 第五行 -->
|
||||
<el-row :gutter="15"
|
||||
class="home-card-five mb15">
|
||||
<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-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 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>
|
||||
|
|
@ -145,7 +119,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();
|
||||
|
|
@ -157,19 +131,23 @@ const homeUploadRef = ref();
|
|||
const homePieRef = ref();
|
||||
const homePieRef2 = ref();
|
||||
const homeBarRef = ref();
|
||||
//类型分类
|
||||
const homeTypeDRef = ref();
|
||||
const storesTagsViewRoutes = useTagsViewRoutes();
|
||||
const storesThemeConfig = useThemeConfig();
|
||||
const { themeConfig } = storeToRefs(storesThemeConfig);
|
||||
const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
|
||||
const state = reactive({
|
||||
param:{
|
||||
year:''
|
||||
dataList:[],
|
||||
param: {
|
||||
year: '',
|
||||
},
|
||||
year:new Date,
|
||||
year: new Date(),
|
||||
global: {
|
||||
homeChartOne: null,
|
||||
homeVandD:null,
|
||||
homeUpload:null,
|
||||
homeVandD: null,
|
||||
homeType: null,
|
||||
homeUpload: null,
|
||||
homeChartTwo: null,
|
||||
homeCharThree: null,
|
||||
homeChartFour: null,
|
||||
|
|
@ -220,84 +198,51 @@ const state = reactive({
|
|||
bgColor: '',
|
||||
color: '#303133',
|
||||
},
|
||||
countryTable:[],
|
||||
typeTable:[]
|
||||
countryTable: [],
|
||||
typeTable: [],
|
||||
});
|
||||
|
||||
|
||||
// 响应量和发起量
|
||||
const initLineChart = (xData,data1, data2) => {
|
||||
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 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: ['response','initiate'], right: 0 },
|
||||
xAxis: {
|
||||
data: xData
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: 'response',
|
||||
splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: 'initiate',
|
||||
splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
|
||||
nameTextStyle: {
|
||||
padding: [0, 40, 0, 0] // 上右下左
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'response',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
data: data1,
|
||||
lineStyle: { color: '#fe9a8b' },
|
||||
itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#fe9a8bb3' },
|
||||
{ offset: 1, color: '#fe9a8b03' },
|
||||
]),
|
||||
},
|
||||
},{
|
||||
name: 'initiate',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
data: data2,
|
||||
lineStyle: { color: 'rgba(145,204,117,1)' },
|
||||
itemStyle: { color: 'rgba(145,204,117,1)', borderColor: 'rgba(145,204,117,1)' },
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: 'rgba(145,204,117,1)' },
|
||||
{ offset: 1, color: 'rgba(145,204,117,0)' },
|
||||
]),
|
||||
},
|
||||
}
|
||||
],
|
||||
};
|
||||
state.global.homeChartOne.setOption(option);
|
||||
state.myCharts.push(state.global.homeChartOne);
|
||||
};
|
||||
|
||||
// const initLineChart = (xData, data1) => {
|
||||
// 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 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: ['response'], right: 0 },
|
||||
// xAxis: {
|
||||
// data: xData,
|
||||
// },
|
||||
// yAxis: [
|
||||
// {
|
||||
// type: 'value',
|
||||
// name: 'response',
|
||||
// splitLine: { show: true, lineStyle: { type: 'dashed' } },
|
||||
// },
|
||||
// ],
|
||||
// series: [
|
||||
// {
|
||||
// name: 'response',
|
||||
// type: 'line',
|
||||
// symbolSize: 6,
|
||||
// symbol: 'circle',
|
||||
// smooth: true,
|
||||
// data: data1,
|
||||
// },
|
||||
// ],
|
||||
// };
|
||||
// state.global.homeChartOne.setOption(option);
|
||||
// state.myCharts.push(state.global.homeChartOne);
|
||||
// };
|
||||
|
||||
// 访问量 和下载次数
|
||||
const initLineVandDChart = (xData,data1, data2) => {
|
||||
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 = {
|
||||
|
|
@ -309,7 +254,7 @@ const initLineVandDChart = (xData,data1, data2) => {
|
|||
},
|
||||
grid: { top: 70, right: 20, bottom: 30, left: 30 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { data: ['visit','download'], right: 0 },
|
||||
legend: { data: ['visit', 'download'], right: 0 },
|
||||
xAxis: {
|
||||
data: xData,
|
||||
},
|
||||
|
|
@ -324,9 +269,9 @@ const initLineVandDChart = (xData,data1, data2) => {
|
|||
name: 'download',
|
||||
splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
|
||||
nameTextStyle: {
|
||||
padding: [0, 40, 0, 0] // 上右下左
|
||||
padding: [0, 40, 0, 0], // 上右下左
|
||||
},
|
||||
},
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
|
|
@ -344,7 +289,8 @@ const initLineVandDChart = (xData,data1, data2) => {
|
|||
{ offset: 1, color: 'rgba(84,112,198,0)' },
|
||||
]),
|
||||
},
|
||||
},{
|
||||
},
|
||||
{
|
||||
name: 'download',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
|
|
@ -359,49 +305,139 @@ const initLineVandDChart = (xData,data1, data2) => {
|
|||
{ offset: 1, color: 'rgba(250,200,88,0)' },
|
||||
]),
|
||||
},
|
||||
}
|
||||
},
|
||||
],
|
||||
};
|
||||
state.global.homeVandD.setOption(option);
|
||||
state.myCharts.push(state.global.homeVandD);
|
||||
};
|
||||
|
||||
|
||||
const initTypeChart = (xData, data1, data2, data3, data4, data5, data6, data7, data8) => {
|
||||
if (!state.global.dispose.some((b) => b === state.global.homeType)) state.global.homeType.dispose();
|
||||
state.global.homeType = markRaw(echarts.init(homeTypeDRef.value, state.charts.theme));
|
||||
const option = {
|
||||
backgroundColor: state.charts.bgColor,
|
||||
title: {
|
||||
text: 'Annual Disaster Statistics',
|
||||
x: 'left',
|
||||
textStyle: { fontSize: '15', color: state.charts.color },
|
||||
},
|
||||
grid: { top: 70, right: 20, bottom: 30, left: 30 },
|
||||
tooltip: { trigger: 'axis' },
|
||||
legend: { data: ['Earthquake', 'Volcano', 'Landslide', 'Flood', 'Hurricane', 'Drought', 'Emergency', 'response'], right: 0 },
|
||||
xAxis: {
|
||||
data: xData,
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: 'Type',
|
||||
splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } },
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'Earthquake',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
data: data1,
|
||||
},
|
||||
{
|
||||
name: 'Volcano',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
data: data2,
|
||||
},{
|
||||
name: 'Landslide',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
data: data3,
|
||||
|
||||
},{
|
||||
name: 'Flood',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
data: data4,
|
||||
},{
|
||||
name: 'Hurricane',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
data: data5,
|
||||
},{
|
||||
name: 'Drought',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
data: data6,
|
||||
},{
|
||||
name: 'Emergency',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
data: data7,
|
||||
},{
|
||||
name: 'response',
|
||||
type: 'line',
|
||||
symbolSize: 6,
|
||||
symbol: 'circle',
|
||||
smooth: true,
|
||||
data: data8,
|
||||
}
|
||||
],
|
||||
};
|
||||
state.global.homeType.setOption(option);
|
||||
state.myCharts.push(state.global.homeType);
|
||||
};
|
||||
|
||||
// Chief 管理
|
||||
const initChiefChart = (xData,yData) => {
|
||||
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',
|
||||
text: 'Top ten disasters initiated',
|
||||
x: 'left',
|
||||
textStyle: { fontSize: '15', color: state.charts.color },
|
||||
},
|
||||
//tooltip: { trigger: 'item', formatter: '{c}' },
|
||||
tooltip: {
|
||||
show:true
|
||||
show: true,
|
||||
// trigger: 'axis',
|
||||
// axisPointer: {
|
||||
// type: 'shadow'
|
||||
// },
|
||||
// formatter: '{c}'
|
||||
},
|
||||
legend: { data: ['chief'], right: 0 },
|
||||
legend: { data: ['user'], right: 0 },
|
||||
grid: { top: 70, right: 80, bottom: 30, left: 80 },
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: xData
|
||||
data: xData,
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type:'value'
|
||||
}
|
||||
type: 'value',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: 'chief',
|
||||
name: 'user',
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
|
|
@ -412,26 +448,26 @@ const initChiefChart = (xData,yData) => {
|
|||
//柱状图圆角
|
||||
borderRadius: [30, 30, 0, 0],
|
||||
},
|
||||
data: yData
|
||||
}
|
||||
data: yData,
|
||||
},
|
||||
],
|
||||
};
|
||||
state.global.homeUpload.setOption(option);
|
||||
state.myCharts.push(state.global.homeUpload);
|
||||
};
|
||||
// administrators 管理
|
||||
const initAdministratorsChart = (xData,yData) => {
|
||||
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',
|
||||
text: 'Top ten disaster response times',
|
||||
x: 'left',
|
||||
textStyle: { fontSize: '15', color: state.charts.color },
|
||||
},
|
||||
tooltip: { trigger: 'item', formatter: '{c}' },
|
||||
legend: { data: ['administrators'], right: 0 },
|
||||
legend: { data: ['user'], right: 0 },
|
||||
grid: { top: 70, right: 80, bottom: 30, left: 80 },
|
||||
xAxis: [
|
||||
{
|
||||
|
|
@ -454,7 +490,7 @@ const initAdministratorsChart = (xData,yData) => {
|
|||
],
|
||||
series: [
|
||||
{
|
||||
name: 'administrators',
|
||||
name: 'user',
|
||||
type: 'bar',
|
||||
barWidth: 30,
|
||||
yAxisIndex: 0,
|
||||
|
|
@ -548,7 +584,6 @@ const initPieChart2 = (data) => {
|
|||
style: {
|
||||
image: themeConfig.value.isIsDark,
|
||||
|
||||
|
||||
width: 230,
|
||||
height: 230,
|
||||
},
|
||||
|
|
@ -586,44 +621,73 @@ const initEchartsResizeFun = () => {
|
|||
* @param data
|
||||
*/
|
||||
const setHeadData = (data) => {
|
||||
state.homeOne[0].num1 = data.applyCount
|
||||
state.homeOne[1].num1 = data.actResponseNum
|
||||
state.homeOne[2].num1 = data.visitCount
|
||||
state.homeOne[3].num1 = data.downloadCount
|
||||
}
|
||||
state.homeOne[0].num1 = data.applyCount;
|
||||
state.homeOne[1].num1 = data.actResponseNum;
|
||||
state.homeOne[2].num1 = data.visitCount;
|
||||
state.homeOne[3].num1 = data.downloadCount;
|
||||
};
|
||||
/**
|
||||
* 设置响应量和发起量
|
||||
* @param data
|
||||
*/
|
||||
const setLineChart = (data) => {
|
||||
let xData = [];
|
||||
//let yData = [];
|
||||
let data1 = [];//initiate
|
||||
let data2 = [];//response
|
||||
data.forEach(item=>{
|
||||
xData.push(item.key)
|
||||
data1.push(item.initiate)
|
||||
data2.push(item.response)
|
||||
})
|
||||
// 响应量和发起量
|
||||
initLineChart(xData,data1,data2);
|
||||
}
|
||||
// const setLineChart = (data) => {
|
||||
// let xData = [];
|
||||
// //let yData = [];
|
||||
// let data1 = []; //initiate
|
||||
// let data2 = []; //response
|
||||
// data.forEach((item) => {
|
||||
// xData.push(item.key);
|
||||
// data1.push(item.initiate);
|
||||
// // data2.push(item.response);
|
||||
// });
|
||||
// // 响应量和发起量
|
||||
// initLineChart(xData, data1, data2);
|
||||
// };
|
||||
/**
|
||||
* 设置访问量 和下载次数
|
||||
* @param data
|
||||
*/
|
||||
const setLineVandDChart = (data) => {
|
||||
const setLineVandDChart = (data) => {
|
||||
let xData = [];
|
||||
let data1 = [];
|
||||
let data2 = [];
|
||||
data.forEach(item=>{
|
||||
xData.push(item.key)
|
||||
data1.push(item.response)
|
||||
data2.push(item.initiate)
|
||||
})
|
||||
data.forEach((item) => {
|
||||
xData.push(item.key);
|
||||
data1.push(item.response);
|
||||
data2.push(item.initiate);
|
||||
});
|
||||
//访问量 和下载次数
|
||||
initLineVandDChart(xData,data1, data2)
|
||||
}
|
||||
initLineVandDChart(xData, data1, data2);
|
||||
};
|
||||
|
||||
const setDisasterInfoType = (data) => {
|
||||
let xData = [];
|
||||
let data1 = [];
|
||||
let data2 = [];
|
||||
let data3 = [];
|
||||
let data4 = [];
|
||||
let data5 = [];
|
||||
let data6 = [];
|
||||
let data7 = [];
|
||||
let data8 = [];
|
||||
data.forEach((item) => {
|
||||
xData.push(item.key);
|
||||
data1.push(item.Earthquake);
|
||||
data2.push(item.Volcano);
|
||||
data3.push(item.Landslide);
|
||||
data4.push(item.Flood);
|
||||
data5.push(item.Hurricane);
|
||||
data6.push(item.Drought);
|
||||
data7.push(item.Emergency);
|
||||
});
|
||||
state.dataList.forEach((item) => {
|
||||
data8.push(item.initiate);
|
||||
});
|
||||
|
||||
//访问量 和下载次数
|
||||
initTypeChart(xData, data1, data2, data3, data4, data5, data6, data7,data8);
|
||||
};
|
||||
|
||||
/**
|
||||
* 管理员管理量
|
||||
* @param data
|
||||
|
|
@ -631,79 +695,83 @@ const setLineChart = (data) => {
|
|||
const setAdministratorsChart = (data) => {
|
||||
let xData = [];
|
||||
let yData = [];
|
||||
data.forEach(item=>{
|
||||
xData.push(item.name)
|
||||
yData.push(item.val)
|
||||
})
|
||||
data.forEach((item) => {
|
||||
xData.push(item.name);
|
||||
yData.push(item.val);
|
||||
});
|
||||
// if (yData) {
|
||||
// xData.push('');
|
||||
// yData.push(0);
|
||||
// }
|
||||
initAdministratorsChart(xData,yData);
|
||||
}
|
||||
initAdministratorsChart(xData, yData);
|
||||
};
|
||||
/**
|
||||
* 管理员管理量
|
||||
* @param data
|
||||
*/
|
||||
const setChiefChart = (data) => {
|
||||
const setChiefChart = (data) => {
|
||||
let xData = [];
|
||||
let yData = [];
|
||||
data.forEach(item=>{
|
||||
xData.push(item.name)
|
||||
yData.push(item.val)
|
||||
})
|
||||
data.forEach((item) => {
|
||||
xData.push(item.name);
|
||||
yData.push(item.val);
|
||||
});
|
||||
if (yData) {
|
||||
yData.push(0)
|
||||
yData.push(0);
|
||||
}
|
||||
initChiefChart(xData,yData);
|
||||
}
|
||||
initChiefChart(xData, yData);
|
||||
};
|
||||
/**
|
||||
* 设置灾种数量占比
|
||||
* @param data
|
||||
*/
|
||||
const setDisasterType = (data) => {
|
||||
let arr = [];
|
||||
data.forEach(item=>{
|
||||
arr.push({ name: item.name, value: item.val});
|
||||
})
|
||||
data.forEach((item) => {
|
||||
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)
|
||||
}
|
||||
state.typeTable = arr;
|
||||
initPieChart2(arr);
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置发生区域灾害占比 Proportion of Disaster Occurred Areas TOP15
|
||||
* @param data
|
||||
*/
|
||||
const setDisasterArea = (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 });
|
||||
}
|
||||
state.countryTable = arr
|
||||
state.countryTable = arr;
|
||||
initPieChart(arr);
|
||||
}
|
||||
};
|
||||
//获取控制台数据
|
||||
const getDashBoradData = () => {
|
||||
state.param.year = state.year.getFullYear()
|
||||
statistics(state.param.year).then(res=>{
|
||||
state.param.year = state.year.getFullYear();
|
||||
statistics(state.param.year).then((res) => {
|
||||
//第一栏
|
||||
setHeadData(res.header);
|
||||
//第二栏
|
||||
setLineChart(res.line)
|
||||
// setLineChart(res.line);
|
||||
state.dataList = res.line;
|
||||
setLineVandDChart(res.vandd);
|
||||
//第三栏
|
||||
setAdministratorsChart(res.admin)
|
||||
setChiefChart(res.chief)
|
||||
setAdministratorsChart(res.admin);
|
||||
setChiefChart(res.chief);
|
||||
//第四栏
|
||||
setDisasterType(res.disasterNum);
|
||||
//第5栏
|
||||
setDisasterArea(res.country);
|
||||
})
|
||||
}
|
||||
setDisasterInfoType(res.type);
|
||||
|
||||
|
||||
});
|
||||
};
|
||||
// 批量设置 echarts resize
|
||||
const initEchartsResize = () => {
|
||||
window.addEventListener('resize', initEchartsResizeFun);
|
||||
|
|
@ -759,9 +827,9 @@ $homeNavLengh: 8;
|
|||
overflow: hidden;
|
||||
.home-card-one,
|
||||
.home-card-two,
|
||||
.home-card-three ,
|
||||
.home-card-three,
|
||||
.home-card-four,
|
||||
.home-card-five{
|
||||
.home-card-five {
|
||||
.home-card-item {
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
|
|
@ -804,7 +872,7 @@ $homeNavLengh: 8;
|
|||
}
|
||||
}
|
||||
.home-card-two,
|
||||
.home-card-three ,
|
||||
.home-card-three,
|
||||
.home-card-four,
|
||||
.home-card-five {
|
||||
.home-card-item {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -35,6 +35,12 @@ const viteConfig = defineConfig((mode) => {
|
|||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, ''),
|
||||
},
|
||||
'/vordmdoc': {
|
||||
target: 'http://192.168.31.14:9000',
|
||||
ws: false,
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/vordmdoc/, ''),
|
||||
},
|
||||
},
|
||||
},
|
||||
build: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue