diff --git a/src/api/disasterInfo/index.js b/src/api/disasterInfo/index.js index f7ed885..03c4b13 100644 --- a/src/api/disasterInfo/index.js +++ b/src/api/disasterInfo/index.js @@ -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, diff --git a/src/views/home/index.vue b/src/views/home/index.vue index c337e2e..69f8071 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -1,74 +1,140 @@ @@ -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); -} -/** - * 设置灾害响应月份分布量 + * 设置响应量和发起量 * @param data */ -const setResponseDisaster = (data) => { +const setLineChart = (data) => { let xData = []; - let yData = []; - data.forEach(item => { - for (let [k, v] of Object.entries(item)) { - xData.push(k); - yData.push(v.value); - } + //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, yData); + // 响应量和发起量 + initLineChart(xData,data1,data2); } /** - * 设置灾害申请月份分布量 + * 设置访问量 和下载次数 * @param data */ -const setApplyDisaster = (data) => { + const setLineVandDChart = (data) => { + let xData = []; + let data1 = []; + let data2 = []; + data.forEach(item=>{ + xData.push(item.dict_value) + data1.push(item.download) + data2.push(item.visit) + }) + //访问量 和下载次数 + initLineVandDChart(xData,data1, data2) +} +/** + * 管理员管理量 + * @param 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,103 +772,94 @@ watch(