Skip to content

C
civil-front
Commit c21f758c by 苏咏卓
Options

页面更新

parent b60b4efc
Showing with 266 additions and 92 deletions
src/api/home.js 0 → 100644
import request from '@/utils/request'
//获取地图数据
export const getMapData = (areaId) =>{
return request({
url:`portal/static/map/${areaId}.json`,
method: 'get'
})
}
\ No newline at end of file
src/views/funeral/funeral.vue
......@@ -55,7 +55,7 @@
</el-col>
<el-col :span="16">
<el-card shadow="hover">
<div class="box" id="1"></div>
<div class="barCharts" id="1"></div>
</el-card>
</el-col>
</el-row>
......@@ -240,7 +240,7 @@ export default {
background-color: rgba(238, 249, 255);
}
.box {
.barCharts {
width: 100%;
height: 330px;
}
......
src/views/home.vue
<template>
<div class="dashboard-container">
<div class="dashboard-editor-container">
<github-corner class="github-corner" />
<panel-group @handleSetLineChartData="handleSetLineChartData" />
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData" />
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<radar-chart />
<el-row :gutter="18">
<el-col :span="16">
<el-card shadow="hover">
<div id="map"></div>
<el-col :span="16">
<el-card shadow="hover">
<el-card shadow="hover">
<div>
<el-table
v-loading="loading"
:data="tableData"
border
style="width: 100%"
:header-cell-style="{
background: '#eef1f6',
color: '#606266',
}"
>
<el-table-column
prop="albumName"
label="行政区划"
align="center"
/>
<el-table-column
prop="albumName"
label="经营性公墓"
align="center"
/>
<el-table-column
prop="albumName"
label="非营性公墓"
align="center"
/>
<el-table-column
prop="albumName"
label="公益性公墓"
align="center"
/>
</el-table>
</div>
</el-card>
</el-card>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
</div>
</el-card>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RadarChart from '@/components/Echarts/RadarChart'
import PieChart from '@/components/Echarts/PieChart'
import BarChart from '@/components/Echarts/BarChart'
const lineChartData = {
newVisitis: {
expectedData: [100, 120, 161, 134, 105, 160, 165],
actualData: [120, 82, 91, 154, 162, 140, 145]
},
messages: {
expectedData: [200, 192, 120, 144, 160, 130, 140],
actualData: [180, 160, 151, 106, 145, 150, 130]
},
purchases: {
expectedData: [80, 100, 121, 104, 105, 90, 100],
actualData: [120, 90, 100, 138, 142, 130, 130]
},
shoppings: {
expectedData: [130, 140, 141, 142, 145, 150, 160],
actualData: [120, 82, 91, 154, 162, 140, 130]
}
}
import echarts from "echarts";
import { getMapData } from "@/api/home";
export default {
name: 'Dashboard',
components: {
GithubCorner,
PanelGroup,
LineChart,
RadarChart,
PieChart,
BarChart
},
data() {
return {
lineChartData: lineChartData.newVisitis
}
tableData: [],
pageInfo: {
page: 1,
size: 10,
total: 0,
},
loading: false,
};
},
created() {
this.getMapData("g450000"); //默认展示广西 g450000
},
methods: {
handleSetLineChartData(type) {
this.lineChartData = lineChartData[type]
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
position: relative;
.github-corner {
position: absolute;
top: 0;
border: 0;
right: 0;
}
//获取地图数据
getMapData(areaId) {
getMapData(areaId).then((res) => {
console.log("map", res);
this.map([], res, 100, 0);
});
},
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
/**
* 渲染地图
* dataList 分布数据
* mapList 地图数据
* max 最大值
* min 最小值
*/
map(dataList, mapList, max, min) {
let map = echarts.init(document.getElementById("map"));
echarts.registerMap("GX", mapList);
map.setOption({
tooltip: {
trigger: "item",
// formatter: '{b}<br/>{c}%(完成数 / 指标数)'
formatter: function (data) {
return `${data.name}`;
},
},
grid: {
left: "3%",
right: "5%",
bottom: "3%",
containLabel: true,
},
// toolbox: {
// show: true,
// orient: "vertical",
// left: "right",
// top: "center",
// feature: {
// dataView: { readOnly: false },
// restore: {},
// saveAsImage: {}
// }
// },
visualMap: {
min: min,
max: max,
show: false,
text: ["高完成率%", "低完成率%"],
realtime: false,
calculable: true,
inRange: {
color: ["#BDBEC2", "#EEC418", "#E11D27"],
},
textStyle: {
color: "#fff",
},
},
series: [
{
name: "项目任务完成情况",
type: "map",
mapType: "GX", // 自定义扩展图表类型
itemStyle: {
normal: {
label: { show: true, color: "#333333" },
borderWidth: 1, //区域边框宽度
borderColor: "#0b1940", //区域边框颜色
},
emphasis: { label: { show: true } },
},
textStyle: {
color: "#fff",
},
data: dataList,
},
],
});
if (map._$handlers.click) {
map._$handlers.click.length = 0;
}
map.on("click", (res) => {
console.log("点击取值", res);
});
},
},
};
</script>
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
}
}
<style lang="scss" scoped>
#map {
width: 800px;
height: 800px;
}
</style>
\ No newline at end of file
src/views/home2.vue 0 → 100644
<template>
<div class="dashboard-container">
<div class="dashboard-editor-container">
<github-corner class="github-corner" />
<panel-group @handleSetLineChartData="handleSetLineChartData" />
<el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
<line-chart :chart-data="lineChartData" />
</el-row>
<el-row :gutter="32">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<radar-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
</div>
</el-col>
</el-row>
</div>
</div>
</template>
<script>
import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RadarChart from '@/components/Echarts/RadarChart'
import PieChart from '@/components/Echarts/PieChart'
import BarChart from '@/components/Echarts/BarChart'
const lineChartData = {
newVisitis: {
expectedData: [100, 120, 161, 134, 105, 160, 165],
actualData: [120, 82, 91, 154, 162, 140, 145]
},
messages: {
expectedData: [200, 192, 120, 144, 160, 130, 140],
actualData: [180, 160, 151, 106, 145, 150, 130]
},
purchases: {
expectedData: [80, 100, 121, 104, 105, 90, 100],
actualData: [120, 90, 100, 138, 142, 130, 130]
},
shoppings: {
expectedData: [130, 140, 141, 142, 145, 150, 160],
actualData: [120, 82, 91, 154, 162, 140, 130]
}
}
export default {
name: 'Dashboard',
components: {
GithubCorner,
PanelGroup,
LineChart,
RadarChart,
PieChart,
BarChart
},
data() {
return {
lineChartData: lineChartData.newVisitis
}
},
methods: {
handleSetLineChartData(type) {
this.lineChartData = lineChartData[type]
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-editor-container {
padding: 32px;
background-color: rgb(240, 242, 245);
position: relative;
.github-corner {
position: absolute;
top: 0;
border: 0;
right: 0;
}
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
}
@media (max-width:1024px) {
.chart-wrapper {
padding: 8px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment