From efbd270626e6b5cf1a88393d371de2bc90eb73fe Mon Sep 17 00:00:00 2001 From: liyuchen <791867849@qq.com> Date: Sat, 15 Apr 2023 17:08:54 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E9=A6=96=E9=A1=B5=E7=BB=9F?= =?UTF-8?q?=E8=AE=A1=E4=BB=A3=E7=A0=81-liyuchen?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/disasterInfo/index.js | 10 ++ src/views/home/index.vue | 286 ++++++++++++++-------------------- 2 files changed, 131 insertions(+), 165 deletions(-) diff --git a/src/api/disasterInfo/index.js b/src/api/disasterInfo/index.js index f7da8f9..d45f047 100644 --- a/src/api/disasterInfo/index.js +++ b/src/api/disasterInfo/index.js @@ -15,4 +15,14 @@ export function review(data) { method: 'post', data: data, }); +} + +/** + * 首页 dashborad + */ +export function statistics(){ + return request({ + url: '/api/'+moduleName+'/ui/disasterInfo/statistics', + method: 'get' + }); } \ No newline at end of file diff --git a/src/views/home/index.vue b/src/views/home/index.vue index b8ea48f..82d0295 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -17,7 +17,7 @@
{{ v.num1 }} {{ v.num2 }}% + :style="{ color: v.color1 }">{{ v.num2 }}
{{ v.num3 }}
{ +const initLineChart = (xData,data) => { + console.log(xData) + console.log(data) 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 = { @@ -247,25 +250,25 @@ const initLineChart = () => { }, grid: { top: 70, right: 20, bottom: 30, left: 30 }, tooltip: { trigger: 'axis' }, - legend: { data: ['预购队列', '最新成交价'], right: 0 }, + legend: { data: ['响应量'], right: 0 }, xAxis: { - data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'], + data: xData, }, yAxis: [ { type: 'value', - name: '价格', + name: '响应量', splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } }, }, ], series: [ { - name: '预购队列', + name: '响应量', type: 'line', symbolSize: 6, symbol: 'circle', smooth: true, - data: [0, 41.1, 30.4, 65.1, 53.3, 53.3, 53.3, 41.1, 30.4, 65.1, 53.3, 10], + data: data, lineStyle: { color: '#fe9a8b' }, itemStyle: { color: '#fe9a8b', borderColor: '#fe9a8b' }, areaStyle: { @@ -275,57 +278,21 @@ const initLineChart = () => { ]), }, }, - { - name: '最新成交价', - type: 'line', - symbolSize: 6, - symbol: 'circle', - smooth: true, - data: [0, 24.1, 7.2, 15.5, 42.4, 42.4, 42.4, 24.1, 7.2, 15.5, 42.4, 0], - lineStyle: { color: '#9E87FF' }, - itemStyle: { color: '#9E87FF', borderColor: '#9E87FF' }, - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: '#9E87FFb3' }, - { offset: 1, color: '#9E87FF03' }, - ]), - }, - emphasis: { - itemStyle: { - color: { - type: 'radial', - x: 0.5, - y: 0.5, - r: 0.5, - colorStops: [ - { offset: 0, color: '#9E87FF' }, - { offset: 0.4, color: '#9E87FF' }, - { offset: 0.5, color: '#fff' }, - { offset: 0.7, color: '#fff' }, - { offset: 0.8, color: '#fff' }, - { offset: 1, color: '#fff' }, - ], - }, - borderColor: '#9E87FF', - borderWidth: 2, - }, - }, - }, ], }; state.global.homeChartOne.setOption(option); state.myCharts.push(state.global.homeChartOne); }; //homePieRef 灾害发生区域占比 饼图 -const initPieChart = () => { +const initPieChart = (data) => { if (!state.global.dispose.some((b) => b === state.global.homeChartTwo)) state.global.homeChartTwo.dispose(); state.global.homeChartTwo = markRaw(echarts.init(homePieRef.value, state.charts.theme)); - var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案']; - var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05]; - var data = []; - for (var i = 0; i < getname.length; i++) { - data.push({ name: getname[i], value: getvalue[i] }); - } + // var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案']; + // var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05]; + // var data = []; + // for (var i = 0; i < getname.length; i++) { + // data.push({ name: getname[i], value: getvalue[i] }); + // } const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8']; const option = { backgroundColor: state.charts.bgColor, @@ -387,11 +354,6 @@ const initPieChart = () => { type: 'pie', radius: ['82', themeConfig.value.isIsDark ? '50' : '102'], center: ['50%', '50%'], - itemStyle: { - color: function (params) { - return colorList[params.dataIndex]; - }, - }, label: { show: true }, labelLine: { show: true }, data: data, @@ -402,15 +364,16 @@ const initPieChart = () => { state.myCharts.push(state.global.homeChartTwo); }; //homePieRef2 灾害类型占比 饼图 -const initPieChart2 = () => { +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 = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案']; - var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05]; - var data = []; - for (var i = 0; i < getname.length; i++) { - data.push({ name: getname[i], value: getvalue[i] }); - } + // var getname = ['房屋及结构物', '专用设备', '通用设备', '文物和陈列品', '图书、档案']; + // var getvalue = [34.2, 38.87, 17.88, 9.05, 2.05]; + // var data = []; + // for (var i = 0; i < getname.length; i++) { + // data.push({ name: getname[i], value: getvalue[i] }); + // } const colorList = ['#51A3FC', '#36C78B', '#FEC279', '#968AF5', '#E790E8']; const option = { backgroundColor: state.charts.bgColor, @@ -472,11 +435,6 @@ const initPieChart2 = () => { type: 'pie', radius: ['82', themeConfig.value.isIsDark ? '50' : '102'], center: ['50%', '50%'], - itemStyle: { - color: function (params) { - return colorList[params.dataIndex]; - }, - }, label: { show: true }, labelLine: { show: true }, data: data, @@ -487,9 +445,9 @@ const initPieChart2 = () => { state.myCharts.push(state.global.homeChartFour); }; // 柱状图 -const initBarChart = () => { +const initBarChart = (xData,yData) => { if (!state.global.dispose.some((b) => b === state.global.homeCharThree)) state.global.homeCharThree.dispose(); - state.global.homeCharThree = markRaw(echarts.init(homeBarRef.value, state.charts.theme)); + state.global.homeCharThree = echarts.init(homeBarRef.value, state.charts.theme); const option = { backgroundColor: state.charts.bgColor, title: { @@ -497,29 +455,19 @@ const initBarChart = () => { x: 'left', textStyle: { fontSize: '15', color: state.charts.color }, }, - tooltip: { trigger: 'axis' }, - legend: { data: ['供温', '回温', '压力值(Mpa)'], right: 0 }, + tooltip: { trigger: 'item', formatter: '{c}' }, + legend: { data: ['申请量'], top: 0 }, grid: { top: 70, right: 80, bottom: 30, left: 80 }, xAxis: [ { type: 'category', - data: ['1km', '2km', '3km', '4km', '5km', '6km'], + data: xData, boundaryGap: true, axisTick: { show: false }, }, ], yAxis: [ { - name: '供回温度(℃）', - nameLocation: 'middle', - nameTextStyle: { padding: [3, 4, 50, 6] }, - splitLine: { show: true, lineStyle: { type: 'dashed', color: '#f5f5f5' } }, - axisLine: { show: false }, - axisTick: { show: false }, - axisLabel: { color: state.charts.color, formatter: '{value} ' }, - }, - { - name: '压力值(Mpa)', nameLocation: 'middle', nameTextStyle: { padding: [50, 4, 5, 6] }, splitLine: { show: false }, @@ -530,71 +478,10 @@ const initBarChart = () => { ], series: [ { - name: '供温', - type: 'line', - smooth: true, - showSymbol: true, - // 矢量画五角星 - symbol: 'path://M150 0 L80 175 L250 75 L50 75 L220 175 Z', - symbolSize: 12, - yAxisIndex: 0, - areaStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: 'rgba(250,180,101,0.3)' }, - { offset: 1, color: 'rgba(250,180,101,0)' }, - ]), - shadowColor: 'rgba(250,180,101,0.2)', - shadowBlur: 20, - }, - itemStyle: { color: '#FF8000' }, - // data中可以使用对象，value代表相应的值，另外可加入自定义的属性 - data: [ - { value: 1, stationName: 's1' }, - { value: 3, stationName: 's2' }, - { value: 4, stationName: 's3' }, - { value: 9, stationName: 's4' }, - { value: 3, stationName: 's5' }, - { value: 2, stationName: 's6' }, - ], - }, - { - name: '回温', - type: 'line', - smooth: true, - showSymbol: true, - symbol: 'emptyCircle', - symbolSize: 12, - yAxisIndex: 0, - areaStyle: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { offset: 0, color: 'rgba(199, 237, 250,0.5)' }, - { offset: 1, color: 'rgba(199, 237, 250,0.2)' }, - ], - false - ), - }, - itemStyle: { - color: '#3bbc86', - }, - data: [ - { value: 31, stationName: 's1' }, - { value: 36, stationName: 's2' }, - { value: 54, stationName: 's3' }, - { value: 24, stationName: 's4' }, - { value: 73, stationName: 's5' }, - { value: 22, stationName: 's6' }, - ], - }, - { - name: '压力值(Mpa)', + name: '申请量', type: 'bar', barWidth: 30, - yAxisIndex: 1, + yAxisIndex: 0, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(108,80,243,0.3)' }, @@ -603,14 +490,7 @@ const initBarChart = () => { //柱状图圆角 borderRadius: [30, 30, 0, 0], }, - data: [ - { value: 11, stationName: 's1' }, - { value: 34, stationName: 's2' }, - { value: 54, stationName: 's3' }, - { value: 39, stationName: 's4' }, - { value: 63, stationName: 's5' }, - { value: 24, stationName: 's6' }, - ], + data: yData, }, ], }; @@ -627,6 +507,81 @@ 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 +} +/** + * 设置发生区域灾害占比 + * @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) => { + let xData = []; + let yData = []; + data.forEach(item=>{ + for(let [k , v] of Object.entries(item)){ + xData.push(k); + yData.push(v.value); + } + }) + initLineChart(xData,yData); +} +/** + * 设置灾害申请月份分布量 + * @param data + */ +const setApplyDisaster = (data) => { + let xData = []; + let yData = []; + data.forEach(item=>{ + for(let [k , v] of Object.entries(item)){ + xData.push(k); + yData.push(v.value); + } + }) + setTimeout(() => { + initBarChart(xData,yData); + }, 1000); +} +/** + * 设置灾种数量占比 + * @param data + */ +const setDisasterType = (data) => { + let arr = []; + for(let [k , v] of Object.entries(data)){ + arr.push({ name: k, value: v}); + } + initPieChart2(arr) +} +//获取控制台数据 +const getDashBoradData = () => { + statistics().then(res=>{ + console.log(res); + setHeadData(res.header); + setDisasterArea(res.country); + setResponseDisaster(res.responseMonth); + setApplyDisaster(res.applyMonth); + setDisasterType(res.disasterNum); + }) +} // 批量设置 echarts resize const initEchartsResize = () => { window.addEventListener('resize', initEchartsResizeFun); @@ -634,6 +589,7 @@ const initEchartsResize = () => { // 页面加载时 onMounted(() => { initEchartsResize(); + getDashBoradData(); }); // 由于页面缓存原因，keep-alive onActivated(() => { @@ -655,13 +611,13 @@ watch( state.charts.bgColor = isIsDark ? 'transparent' : ''; state.charts.color = isIsDark ? '#dadada' : '#303133'; setTimeout(() => { - initLineChart(); + //initLineChart(); }, 500); setTimeout(() => { - initPieChart(); + //initPieChart(); }, 700); setTimeout(() => { - initPieChart2(); + //initPieChart2(); }, 700); setTimeout(() => { initBarChart();