控制台
This commit is contained in:
why
parent
98e358af97
commit
a11a10b1d3
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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" 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-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})`, width: '44px', height: '44px', background: 'url(\'/home/' + (k + 1) + '.png\') no-repeat',
|
||||
backgroundSize: '70% 70%', backgroundPosition: 'center'
|
||||
}"></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-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">
|
||||
<div class="flex-warp">
|
||||
更新日期：2023-03-31<br />
|
||||
注意事项：<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">
|
||||
<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="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: [
|
||||
{
|
||||
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',
|
||||
},
|
||||
],
|
||||
homeThree: [],
|
||||
myCharts: [],
|
||||
charts: {
|
||||
theme: '',
|
||||
bgColor: '',
|
||||
color: '#303133',
|
||||
},
|
||||
countryTable:[],
|
||||
typeTable:[]
|
||||
});
|
||||
|
||||
// 折线图
|
||||
const initLineChart = (xData, data) => {
|
||||
console.log(xData)
|
||||
console.log(data)
|
||||
|
||||
// 响应量和发起量
|
||||
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 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) => {
|
||||
let arr = [];
|
||||
for (let [k, v] of Object.entries(data)) {
|
||||
arr.push({ name: k, value: v });
|
||||
}
|
||||
initPieChart(arr);
|
||||
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 setResponseDisaster = (data) => {
|
||||
const setLineVandDChart = (data) => {
|
||||
let xData = [];
|
||||
let yData = [];
|
||||
data.forEach(item => {
|
||||
for (let [k, v] of Object.entries(item)) {
|
||||
xData.push(k);
|
||||
yData.push(v.value);
|
||||
}
|
||||
let data1 = [];
|
||||
let data2 = [];
|
||||
data.forEach(item=>{
|
||||
xData.push(item.dict_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 => {
|
||||
for (let [k, v] of Object.entries(item)) {
|
||||
xData.push(k);
|
||||
yData.push(v.value);
|
||||
}
|
||||
data.forEach(item=>{
|
||||
xData.push(item.name)
|
||||
yData.push(item.val)
|
||||
})
|
||||
setTimeout(() => {
|
||||
initBarChart(xData, yData);
|
||||
}, 700);
|
||||
initAdministratorsChart(xData,yData);
|
||||
}
|
||||
/**
|
||||
* 管理员管理量
|
||||
* @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)) {
|
||||
arr.push({ name: k, value: v });
|
||||
}
|
||||
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)
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置发生区域灾害占比 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);
|
||||
setApplyDisaster(res.applyMonth);
|
||||
//第二栏
|
||||
setLineChart(res.line)
|
||||
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(() => {
|
||||
//initLineChart();
|
||||
}, 500);
|
||||
setTimeout(() => {
|
||||
//initPieChart();
|
||||
}, 700);
|
||||
setTimeout(() => {
|
||||
//initPieChart2();
|
||||
}, 700);
|
||||
setTimeout(() => {
|
||||
initBarChart();
|
||||
}, 1000);
|
||||
// setTimeout(() => {
|
||||
// //initLineChart();
|
||||
// }, 500);
|
||||
// setTimeout(() => {
|
||||
// //initPieChart();
|
||||
// }, 700);
|
||||
// setTimeout(() => {
|
||||
// //initPieChart2();
|
||||
// }, 700);
|
||||
// setTimeout(() => {
|
||||
// initBarChart();
|
||||
// }, 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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue