This commit is contained in:
duanxiaohai
parent
5949fd14f7
commit
79afe8d56f
|
|
@ -2,239 +2,269 @@
|
|||
<div ref="chart" style="width: 100%; height: 120px"></div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
<script setup>
|
||||
import { onBeforeMount, reactive, ref } from "vue";
|
||||
// 局部引入echarts核心模块
|
||||
import * as echarts from "echarts";
|
||||
|
||||
const chart = ref(); // 创建DOM引用
|
||||
const data = [[140], [260], [330], [270]];
|
||||
const total = ref(0);
|
||||
const totalMax=ref(0);
|
||||
const lb=ref(0)
|
||||
data.forEach((item) => {
|
||||
console.log(item[0]);
|
||||
total.value += item[0];
|
||||
});
|
||||
totalMax.value=total.value*1.06;
|
||||
lb.value=Math.trunc(total.value*0.03);
|
||||
const option = {
|
||||
legend: {
|
||||
show: true,
|
||||
itemHeight: 12,
|
||||
itemWidth: 30,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
padding:10,
|
||||
color: "#fff",
|
||||
|
||||
const props = defineProps({
|
||||
list: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
top: 70,
|
||||
left: 30,
|
||||
itemGap: 20, // 垂直间距
|
||||
y: "top", // 延Y轴居中
|
||||
data: ["17岁以下", "18-34岁", "35-69岁", "60岁以上"],
|
||||
},
|
||||
grid: { left: "2%", right: "2%", top: "10%" },
|
||||
xAxis: [
|
||||
{ type: "value", show: false, max: totalMax.value },
|
||||
{ type: "value", show: false, max: totalMax.value },
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
show: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
year: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
show: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: [lb.value],
|
||||
stack: "income",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(255,255,255,0)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
name: "17岁以下",
|
||||
data: data[0],
|
||||
stack: "income",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#62CDFF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#9BE8FF",
|
||||
},
|
||||
]),
|
||||
barBorderRadius: [100, 0, 0, 100],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: ["25%", "-60%"],
|
||||
formatter: `${Math.trunc(data[0][0]*100/total.value)}%`,
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
name: "18-34岁",
|
||||
data: data[1],
|
||||
stack: "income",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#2355EA",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#3873DD",
|
||||
},
|
||||
]),
|
||||
barBorderRadius: [0, 0, 0, 0],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: ["35%", "-60%"],
|
||||
formatter: `${Math.trunc(data[1][0]*100/total.value)}%`,
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
name: "35-69岁",
|
||||
data: data[2],
|
||||
stack: "income",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#42D6B2",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#9BFFD3",
|
||||
},
|
||||
]),
|
||||
barBorderRadius: [0, 0, 0, 0],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: ["35%", "-60%"],
|
||||
formatter: `${Math.trunc(data[2][0]*100/total.value)}%`,
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
name: "60岁以上",
|
||||
data: data[3],
|
||||
stack: "income",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#FFAA62",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#FFE89B",
|
||||
},
|
||||
]),
|
||||
barBorderRadius: [0, 100, 100, 0],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: ["35%", "-60%"],
|
||||
formatter: `${Math.trunc(data[3][0]*100/total.value)}%`,
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
data: [lb.value],
|
||||
stack: "income",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(255,255,255,0)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,0.1)",
|
||||
barBorderRadius: [100, 100, 100, 100],
|
||||
},
|
||||
data: ["2019"].map(() => totalMax.value),
|
||||
barWidth: 50,
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
const data = reactive({
|
||||
list: [[140], [260], [330], [270]],
|
||||
list1: [],
|
||||
year: [],
|
||||
option: {},
|
||||
totalMax: null,
|
||||
total: 100,
|
||||
lb: 3,
|
||||
});
|
||||
|
||||
// const data = [[140], [260], [330], [270]];
|
||||
// const total = ref(0);
|
||||
// const totalMax = ref(0);
|
||||
// const lb = ref(0);
|
||||
|
||||
const getOption1 = () => {
|
||||
// data.list.forEach((item,index) => {
|
||||
// data.total += item[index];
|
||||
// }); //总数
|
||||
data.totalMax = data.total * 1.06; //上限
|
||||
data.lb = Math.trunc(data.total * 0.03);//取小数点后三位，得到下限
|
||||
};
|
||||
onMounted(() => {
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
// var myChart = echarts.init(document.getElementById('main'));
|
||||
// Vue3中： 需要引入
|
||||
const getOption = () => {
|
||||
console.log(data.list, 111);
|
||||
console.log(data.total, data.totalMax, data.lb, 222);
|
||||
data.option = {
|
||||
legend: {
|
||||
show: true,
|
||||
itemHeight: 12,
|
||||
itemWidth: 30,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
padding: 10,
|
||||
color: "#fff",
|
||||
},
|
||||
top: 70,
|
||||
left: 30,
|
||||
itemGap: 20, // 垂直间距
|
||||
y: "top", // 延Y轴居中
|
||||
data: ["17岁以下", "18-34岁", "35-69岁", "60岁以上"],
|
||||
},
|
||||
grid: { left: "2%", right: "2%", top: "10%" },
|
||||
xAxis: [
|
||||
{ type: "value", show: false, max: data.totalMax },
|
||||
{ type: "value", show: false, max: data.totalMax },
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "category",
|
||||
show: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "category",
|
||||
show: false,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: "bar",
|
||||
data: data.lb,
|
||||
stack: "income",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(255,255,255,0)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
name: "17岁以下",
|
||||
data: data.list[0],
|
||||
stack: "income",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#62CDFF",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#9BE8FF",
|
||||
},
|
||||
]),
|
||||
barBorderRadius: [100, 0, 0, 100],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: ["25%", "-60%"],
|
||||
formatter: `${data.list[0][0]}%`,
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
name: "18-34岁",
|
||||
data: data.list[1],
|
||||
stack: "income",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#2355EA",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#3873DD",
|
||||
},
|
||||
]),
|
||||
barBorderRadius: [0, 0, 0, 0],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: ["35%", "-60%"],
|
||||
formatter: `${Math.trunc((data.list[1][0] * 100) / data.total)}%`,
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
name: "35-69岁",
|
||||
data: data.list[2],
|
||||
stack: "income",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#42D6B2",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#9BFFD3",
|
||||
},
|
||||
]),
|
||||
barBorderRadius: [0, 0, 0, 0],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: ["35%", "-60%"],
|
||||
formatter: `${Math.trunc((data.list[2][0] * 100) / data.total)}%`,
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
name: "60岁以上",
|
||||
data: data.list[3],
|
||||
stack: "income",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#FFAA62",
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#FFE89B",
|
||||
},
|
||||
]),
|
||||
barBorderRadius: [0, 100, 100, 0],
|
||||
},
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: ["35%", "-60%"],
|
||||
formatter: `${Math.trunc((data.list[3][0] * 100) / data.total)}%`,
|
||||
color: "#fff",
|
||||
fontSize: 22,
|
||||
fontWeight: 600,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
data: data.lb,
|
||||
stack: "income",
|
||||
barWidth: 18,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(255,255,255,0)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "bar",
|
||||
xAxisIndex: 1,
|
||||
yAxisIndex: 1,
|
||||
itemStyle: {
|
||||
color: "rgba(255,255,255,0.1)",
|
||||
barBorderRadius: [100, 100, 100, 100],
|
||||
},
|
||||
data: ["2019"].map(() => data.totalMax),
|
||||
barWidth: 50,
|
||||
},
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
const setChart = () => {
|
||||
var myChart = echarts.init(chart.value);
|
||||
myChart.setOption(data.option);
|
||||
};
|
||||
|
||||
// init(); // vue3.2没有this
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
myChart.setOption(option);
|
||||
|
||||
// 单图表响应式: 跟随浏览器大小改变
|
||||
// window.addEventListener("resize", () => {
|
||||
// myChart.resize();
|
||||
// });
|
||||
// 使用生命钩子
|
||||
onBeforeMount(() => {
|
||||
setTimeout(() => {
|
||||
// data.list = props.list;
|
||||
// getOption1();
|
||||
getOption();
|
||||
setChart();
|
||||
}, 600);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
|
|||
|
|
@ -69,28 +69,27 @@ const colorList = [
|
|||
const pieData = reactive([
|
||||
{
|
||||
name: "61-70岁", //名称
|
||||
value: "", //值
|
||||
value: 0, //值
|
||||
},
|
||||
{
|
||||
name: "71-80岁",
|
||||
value: 57842,
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: "81-90岁",
|
||||
value: 40934,
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: "91-100岁",
|
||||
value: 11375,
|
||||
value: 0,
|
||||
},
|
||||
{
|
||||
name: "100岁以上",
|
||||
value: 1945,
|
||||
value: 0,
|
||||
},
|
||||
]);
|
||||
|
||||
// const serData = pieData.map((dItem, index) => {
|
||||
// console.log(dItem, index, 666);
|
||||
// return {
|
||||
// ...dItem,
|
||||
// value: Number(dItem.value),
|
||||
|
|
@ -568,7 +567,6 @@ onBeforeMount(() => {
|
|||
pieData[2].value = data.list.nl7180;
|
||||
pieData[3].value = data.list.nl8190;
|
||||
pieData[4].value = data.list.nl91100;
|
||||
console.log(data.list, pieData, 555);
|
||||
|
||||
getOption();
|
||||
setChart();
|
||||
|
|
|
|||
558
src/view/sy.vue
558
src/view/sy.vue
|
|
@ -11,11 +11,15 @@
|
|||
<div class="item_content">
|
||||
<div class="sr">
|
||||
<span class="left">收入：</span
|
||||
><span class="right">147.380.290</span>
|
||||
><span class="right">{{
|
||||
data.LivelihoodWelfare.zgylbxzsr
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="sr" style="margin-top: 5px">
|
||||
<span class="left">支出：</span
|
||||
><span class="right">147.380.290</span>
|
||||
><span class="right">{{
|
||||
data.LivelihoodWelfare.zgylbxzzc
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -24,11 +28,11 @@
|
|||
<div class="item_content">
|
||||
<div class="sr">
|
||||
<span class="left">收入：</span
|
||||
><span class="right">147.380.290</span>
|
||||
><span class="right">{{ data.LivelihoodWelfare.gsbxzsr }}</span>
|
||||
</div>
|
||||
<div class="sr" style="margin-top: 5px">
|
||||
<span class="left">支出：</span
|
||||
><span class="right">147.380.290</span>
|
||||
><span class="right">{{ data.LivelihoodWelfare.gsbxzzc }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -39,11 +43,15 @@
|
|||
<div class="item_content">
|
||||
<div class="sr">
|
||||
<span class="left">收入：</span
|
||||
><span class="right">147.380.290</span>
|
||||
><span class="right">{{
|
||||
data.LivelihoodWelfare.cxylbxzsr
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="sr" style="margin-top: 5px">
|
||||
<span class="left">支出：</span
|
||||
><span class="right">147.380.290</span>
|
||||
><span class="right">{{
|
||||
data.LivelihoodWelfare.cxylbxzzc
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -54,11 +62,15 @@
|
|||
<div class="item_content">
|
||||
<div class="sr">
|
||||
<span class="left">收入：</span
|
||||
><span class="right">147.380.290</span>
|
||||
><span class="right">{{
|
||||
data.LivelihoodWelfare.zgyilbxzsr
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="sr" style="margin-top: 5px">
|
||||
<span class="left">支出：</span
|
||||
><span class="right">147.380.290</span>
|
||||
><span class="right">{{
|
||||
data.LivelihoodWelfare.zgyilbxzzc
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -69,11 +81,15 @@
|
|||
<div class="item_content">
|
||||
<div class="sr">
|
||||
<span class="left">收入：</span
|
||||
><span class="right">147.380.290</span>
|
||||
><span class="right">{{
|
||||
data.LivelihoodWelfare.cxyilbxzsr
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="sr" style="margin-top: 5px">
|
||||
<span class="left">支出：</span
|
||||
><span class="right">147.380.290</span>
|
||||
><span class="right">{{
|
||||
data.LivelihoodWelfare.cxyilbxzzc
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -82,11 +98,11 @@
|
|||
<div class="left_jzfw">
|
||||
<div class="left_1_2">
|
||||
<div class="top">救助人数</div>
|
||||
<div class="bottom">79.972</div>
|
||||
<div class="bottom">{{ data.salvageServices.jzrc }}</div>
|
||||
</div>
|
||||
<div class="left_1_3">
|
||||
<div class="top">救助金额</div>
|
||||
<div class="bottom">812,471,092</div>
|
||||
<div class="bottom">{{ data.salvageServices.jzje }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -159,23 +175,23 @@
|
|||
<div class="flex1">
|
||||
<div class="people_total">
|
||||
<div class="people_total_item left">
|
||||
<div class="number">891,284</div>
|
||||
<div class="number">{{ data.PopulationData.man }}</div>
|
||||
<img src="../assets/images/sy/man.png" alt="" />
|
||||
<div class="sex">男性人口</div>
|
||||
</div>
|
||||
<div class="people_total_item2 center">
|
||||
<img src="../assets/images/sy/people_total.png" alt="" />
|
||||
<div class="number">2,791,284</div>
|
||||
<div class="number">{{ data.PopulationData.rkzs }}</div>
|
||||
<div class="total">人口总数</div>
|
||||
</div>
|
||||
<div class="people_total_item right">
|
||||
<div class="number">291.284</div>
|
||||
<div class="number">{{ data.PopulationData.woman }}</div>
|
||||
<img src="../assets/images/sy/woman.png" alt="" />
|
||||
<div class="sex">女性人口</div>
|
||||
</div>
|
||||
</div>
|
||||
<ePie2 style="margin-top: 20px"></ePie2>
|
||||
<ePie style="margin-bottom: 30px"></ePie>
|
||||
<ePie2 style="margin-top: 20px" :list="data.ageRatio"></ePie2>
|
||||
<ePie style="margin-bottom: 30px" :list="data.PopulationData"></ePie>
|
||||
<div class="table">
|
||||
<div class="table_choose">
|
||||
<div
|
||||
|
|
@ -237,7 +253,11 @@
|
|||
<div class="flex1" style="margin-top: 10px">
|
||||
<div class="yd_title service"></div>
|
||||
<div class="whsy">
|
||||
<div class="whsy_item" v-for="(item, index) in whsyList" :key="index">
|
||||
<div
|
||||
class="whsy_item"
|
||||
v-for="(item, index) in data.whsyList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="name">{{ item.name }}</div>
|
||||
<div class="value">
|
||||
{{ item.value }}<span>{{ item.dw }}</span>
|
||||
|
|
@ -248,7 +268,11 @@
|
|||
<div class="flex1" style="margin-top: 10px">
|
||||
<div class="yd_title last"></div>
|
||||
<div class="tysy">
|
||||
<div class="tysy_item" v-for="(item, index) in tysyList" :key="index">
|
||||
<div
|
||||
class="tysy_item"
|
||||
v-for="(item, index) in data.tysyList"
|
||||
:key="index"
|
||||
>
|
||||
<div class="value">
|
||||
{{ item.value }}<span>{{ item.dw ? item.dw : "" }}</span>
|
||||
</div>
|
||||
|
|
@ -291,12 +315,212 @@ import baskerball from "../assets/images/sy/baskerball.png";
|
|||
import badminton from "../assets/images/sy/badminton.png";
|
||||
import running from "../assets/images/sy/running.png";
|
||||
import tableTennis from "../assets/images/sy/tableTennis.png";
|
||||
import { ref, onMounted, onBeforeMount, computed } from "vue";
|
||||
const choose = ref("1");
|
||||
import { ref, reactive, onMounted, onBeforeMount, computed } from "vue";
|
||||
import http from "@/utils/request.js";
|
||||
|
||||
const data = reactive({
|
||||
PopulationData: {
|
||||
rkzs: "",
|
||||
man: "",
|
||||
woman: "",
|
||||
}, //人口数据
|
||||
ageRatio: [],
|
||||
salvageServices: {
|
||||
jzrc: "", //救助人次
|
||||
jzje: "", //救助金额
|
||||
nf: "", //救助年份
|
||||
}, //救助服务
|
||||
LivelihoodWelfare: {
|
||||
zgylbxzsr: "0", //职工基本养老保险总收入
|
||||
zgylbxzzc: "0", //职工基本养老保险总支出
|
||||
cxylbxzsr: "0", //城乡居民养老保险总收入
|
||||
cxylbxzzc: "0", //城乡居民养老保险总支出
|
||||
gsbxzsr: "0", //工伤保险总收入
|
||||
gsbxzzc: "0", //工伤保险总支出
|
||||
zgyilbxzsr: "0", //职工基本医疗保险总收入
|
||||
zgyilbxzzc: "0", //职工基本医疗保险总支出
|
||||
cxyilbxzsr: "0", //城乡居民医疗保险总收入
|
||||
cxyilbxzzc: "0", //城乡居民医疗保险总支出
|
||||
nf: "", //年份
|
||||
}, //民生福祉
|
||||
tableData: [
|
||||
{
|
||||
company: "龙游县文旅集团",
|
||||
address: "龙游县五一单位",
|
||||
finish: true,
|
||||
},
|
||||
{
|
||||
company: "龙游县文旅集团",
|
||||
address: "龙游县五一单位",
|
||||
finish: true,
|
||||
},
|
||||
{
|
||||
company: "龙游县文旅集团",
|
||||
address: "龙游县五一单位",
|
||||
finish: true,
|
||||
},
|
||||
{
|
||||
company: "龙游县文旅集团",
|
||||
address: "龙游县五一单位",
|
||||
finish: false,
|
||||
},
|
||||
{
|
||||
company: "龙游县文旅集团",
|
||||
address: "龙游县五一单位",
|
||||
finish: false,
|
||||
},
|
||||
{
|
||||
company: "龙游县文旅集团",
|
||||
address: "龙游县五一单位",
|
||||
finish: false,
|
||||
},
|
||||
{
|
||||
company: "龙游县文旅集团",
|
||||
address: "龙游县五一单位",
|
||||
finish: false,
|
||||
},
|
||||
{
|
||||
company: "龙游县文旅集团",
|
||||
address: "龙游县五一单位",
|
||||
finish: false,
|
||||
},
|
||||
],
|
||||
jysyList: [
|
||||
{
|
||||
title: "县镇",
|
||||
teacher: 1,
|
||||
student: 10.76,
|
||||
},
|
||||
{
|
||||
title: "农村",
|
||||
teacher: 1,
|
||||
student: 8.53,
|
||||
},
|
||||
],
|
||||
ylwsList: [
|
||||
{
|
||||
name: "医院卫生院",
|
||||
value: 50,
|
||||
},
|
||||
{
|
||||
name: "注册护士",
|
||||
value: 38.871,
|
||||
},
|
||||
{
|
||||
name: "职业医生",
|
||||
value: 28.871,
|
||||
},
|
||||
{
|
||||
name: "家庭签约医生",
|
||||
value: 6.871,
|
||||
},
|
||||
{
|
||||
name: "医院卫生院床位数",
|
||||
value: 18.261,
|
||||
},
|
||||
{
|
||||
name: "健康档案建档",
|
||||
value: 129.371,
|
||||
},
|
||||
{
|
||||
name: "村社卫生服务站",
|
||||
value: 98,
|
||||
},
|
||||
],
|
||||
whsyList: [
|
||||
{
|
||||
name: "公共图书馆(南孔书院)",
|
||||
value: "198",
|
||||
dw: "家",
|
||||
},
|
||||
{
|
||||
name: "总藏书",
|
||||
value: "1983",
|
||||
dw: "万册",
|
||||
},
|
||||
{
|
||||
name: "送戏下乡次数",
|
||||
value: "2787",
|
||||
dw: "次",
|
||||
},
|
||||
{
|
||||
name: "博物馆观展人次",
|
||||
value: "1.292.874",
|
||||
dw: "次",
|
||||
},
|
||||
{
|
||||
name: "图书借阅",
|
||||
value: "1.724.012",
|
||||
dw: "次",
|
||||
},
|
||||
],
|
||||
tysyList: [
|
||||
{
|
||||
name: "足球场",
|
||||
value: "100",
|
||||
img: footerball,
|
||||
},
|
||||
{
|
||||
name: "篮球场",
|
||||
value: "100",
|
||||
img: baskerball,
|
||||
},
|
||||
{
|
||||
name: "乒乓球馆",
|
||||
value: "100",
|
||||
img: tableTennis,
|
||||
},
|
||||
{
|
||||
name: "羽毛球馆",
|
||||
value: "100",
|
||||
img: badminton,
|
||||
},
|
||||
{
|
||||
name: "绿色跑道",
|
||||
value: "100",
|
||||
dw: "km",
|
||||
img: running,
|
||||
},
|
||||
],
|
||||
jtsyList: [
|
||||
{
|
||||
name: "公共自行车",
|
||||
key1: "骑行次数",
|
||||
key1_value: "1172491",
|
||||
key2: "骑行时长",
|
||||
key2_value: "1283h",
|
||||
},
|
||||
{
|
||||
name: "电动单车",
|
||||
key1: "骑行次数",
|
||||
key1_value: "1172491",
|
||||
key2: "骑行时长",
|
||||
key2_value: "1283h",
|
||||
},
|
||||
{
|
||||
name: "公共汽车",
|
||||
key1: "公交线路",
|
||||
key1_value: "176",
|
||||
key2: "乘坐人次",
|
||||
key2_value: "239741",
|
||||
},
|
||||
{
|
||||
name: "长途汽车",
|
||||
key1: "班车次数",
|
||||
key1_value: "133",
|
||||
key2: "客流量",
|
||||
key2_value: "192874",
|
||||
},
|
||||
{
|
||||
name: "高铁",
|
||||
key1: "列车班次",
|
||||
key1_value: "23",
|
||||
key2: "客流量",
|
||||
key2_value: "113414",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const change = (index) => {
|
||||
choose.value = index;
|
||||
};
|
||||
const tableData = ref([
|
||||
{
|
||||
company: "龙游县文旅集团",
|
||||
|
|
@ -339,47 +563,6 @@ const tableData = ref([
|
|||
finish: false,
|
||||
},
|
||||
]);
|
||||
const rowState = (row) => {
|
||||
if (row.rowIndex % 2 == 0) {
|
||||
return {
|
||||
letterSpacing: "1px",
|
||||
fontSize: "14px",
|
||||
height: "36px",
|
||||
backgroundColor: "rgba(31, 63, 113, 1)",
|
||||
color: "#fff",
|
||||
};
|
||||
} else if (row.rowIndex % 2 !== 0) {
|
||||
return {
|
||||
letterSpacing: "1px",
|
||||
fontSize: "14px",
|
||||
height: "36px",
|
||||
backgroundColor: "rgba(43, 74, 121, 1)",
|
||||
color: "#fff",
|
||||
};
|
||||
}
|
||||
};
|
||||
const tableHeaderColor = (arg) => {
|
||||
return {
|
||||
paddingLeft: "10px",
|
||||
letterSpacing: "1px",
|
||||
fontSize: "15px",
|
||||
height: "50px",
|
||||
backgroundColor: "#455F8A",
|
||||
color: "#fff",
|
||||
};
|
||||
};
|
||||
const cs = computed(() => {
|
||||
let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${
|
||||
jysyList.value[0].teacher + jysyList.value[0].student
|
||||
}`;
|
||||
return str;
|
||||
});
|
||||
const nc = computed(() => {
|
||||
let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${
|
||||
jysyList.value[1].teacher + jysyList.value[1].student
|
||||
}`;
|
||||
return str;
|
||||
});
|
||||
const jysyList = ref([
|
||||
{
|
||||
title: "县镇",
|
||||
|
|
@ -423,62 +606,62 @@ const ylwsList = ref([
|
|||
},
|
||||
]);
|
||||
|
||||
const whsyList = ref([
|
||||
{
|
||||
name: "公共图书馆(南孔书院)",
|
||||
value: "198",
|
||||
dw: "家",
|
||||
},
|
||||
{
|
||||
name: "总藏书",
|
||||
value: "1983",
|
||||
dw: "万册",
|
||||
},
|
||||
{
|
||||
name: "送戏下乡次数",
|
||||
value: "2787",
|
||||
dw: "次",
|
||||
},
|
||||
{
|
||||
name: "博物馆观展人次",
|
||||
value: "1.292.874",
|
||||
dw: "次",
|
||||
},
|
||||
{
|
||||
name: "图书借阅",
|
||||
value: "1.724.012",
|
||||
dw: "次",
|
||||
},
|
||||
]);
|
||||
// const whsyList = ref([
|
||||
// {
|
||||
// name: "公共图书馆(南孔书院)",
|
||||
// value: "198",
|
||||
// dw: "家",
|
||||
// },
|
||||
// {
|
||||
// name: "总藏书",
|
||||
// value: "1983",
|
||||
// dw: "万册",
|
||||
// },
|
||||
// {
|
||||
// name: "送戏下乡次数",
|
||||
// value: "2787",
|
||||
// dw: "次",
|
||||
// },
|
||||
// {
|
||||
// name: "博物馆观展人次",
|
||||
// value: "1.292.874",
|
||||
// dw: "次",
|
||||
// },
|
||||
// {
|
||||
// name: "图书借阅",
|
||||
// value: "1.724.012",
|
||||
// dw: "次",
|
||||
// },
|
||||
// ]);
|
||||
|
||||
const tysyList = ref([
|
||||
{
|
||||
name: "足球场",
|
||||
value: "100",
|
||||
img: footerball,
|
||||
},
|
||||
{
|
||||
name: "篮球场",
|
||||
value: "100",
|
||||
img: baskerball,
|
||||
},
|
||||
{
|
||||
name: "乒乓球馆",
|
||||
value: "100",
|
||||
img: tableTennis,
|
||||
},
|
||||
{
|
||||
name: "羽毛球馆",
|
||||
value: "100",
|
||||
img: badminton,
|
||||
},
|
||||
{
|
||||
name: "绿色跑道",
|
||||
value: "100",
|
||||
dw:'km',
|
||||
img: running,
|
||||
},
|
||||
]);
|
||||
// const tysyList = ref([
|
||||
// {
|
||||
// name: "足球场",
|
||||
// value: "100",
|
||||
// img: footerball,
|
||||
// },
|
||||
// {
|
||||
// name: "篮球场",
|
||||
// value: "100",
|
||||
// img: baskerball,
|
||||
// },
|
||||
// {
|
||||
// name: "乒乓球馆",
|
||||
// value: "100",
|
||||
// img: tableTennis,
|
||||
// },
|
||||
// {
|
||||
// name: "羽毛球馆",
|
||||
// value: "100",
|
||||
// img: badminton,
|
||||
// },
|
||||
// {
|
||||
// name: "绿色跑道",
|
||||
// value: "100",
|
||||
// dw: "km",
|
||||
// img: running,
|
||||
// },
|
||||
// ]);
|
||||
|
||||
const jtsyList = ref([
|
||||
{
|
||||
|
|
@ -517,6 +700,139 @@ const jtsyList = ref([
|
|||
key2_value: "113414",
|
||||
},
|
||||
]);
|
||||
|
||||
// 县城学校师生比样式
|
||||
const cs = computed(() => {
|
||||
let str = `--teacher: ${jysyList.value[0].teacher}; --total: ${
|
||||
jysyList.value[0].teacher + jysyList.value[0].student
|
||||
}`;
|
||||
return str;
|
||||
});
|
||||
// 农村学校师生比样式
|
||||
const nc = computed(() => {
|
||||
let str = `--teacher: ${jysyList.value[1].teacher}; --total: ${
|
||||
jysyList.value[1].teacher + jysyList.value[1].student
|
||||
}`;
|
||||
return str;
|
||||
});
|
||||
// 服务表格样式
|
||||
const tableHeaderColor = (arg) => {
|
||||
return {
|
||||
paddingLeft: "10px",
|
||||
letterSpacing: "1px",
|
||||
fontSize: "15px",
|
||||
height: "50px",
|
||||
backgroundColor: "#455F8A",
|
||||
color: "#fff",
|
||||
};
|
||||
};
|
||||
const rowState = (row) => {
|
||||
if (row.rowIndex % 2 == 0) {
|
||||
return {
|
||||
letterSpacing: "1px",
|
||||
fontSize: "14px",
|
||||
height: "36px",
|
||||
backgroundColor: "rgba(31, 63, 113, 1)",
|
||||
color: "#fff",
|
||||
};
|
||||
} else if (row.rowIndex % 2 !== 0) {
|
||||
return {
|
||||
letterSpacing: "1px",
|
||||
fontSize: "14px",
|
||||
height: "36px",
|
||||
backgroundColor: "rgba(43, 74, 121, 1)",
|
||||
color: "#fff",
|
||||
};
|
||||
}
|
||||
};
|
||||
// 服务表格切换
|
||||
const choose = ref("1");
|
||||
const change = (index) => {
|
||||
choose.value = index;
|
||||
};
|
||||
// 添加千位分隔符
|
||||
const addThousandSeparator = (numberString) => {
|
||||
return parseInt(numberString.trim(), 10).toLocaleString("en-US");
|
||||
};
|
||||
const getData = async () => {
|
||||
await http.get("/api/ggfwyth/index").then((res) => {
|
||||
if (res.code == 200) {
|
||||
console.log(res.data);
|
||||
// 民生福利
|
||||
if (data.LivelihoodWelfare) {
|
||||
data.LivelihoodWelfare.zgylbxzsr = addThousandSeparator(
|
||||
res.data.msfz.zgylbxzsr
|
||||
);
|
||||
data.LivelihoodWelfare.zgylbxzzc = addThousandSeparator(
|
||||
res.data.msfz.zgylbxzzc
|
||||
);
|
||||
data.LivelihoodWelfare.cxylbxzsr = addThousandSeparator(
|
||||
res.data.msfz.cxylbxzsr
|
||||
);
|
||||
data.LivelihoodWelfare.cxylbxzzc = addThousandSeparator(
|
||||
res.data.msfz.cxylbxzzc
|
||||
);
|
||||
data.LivelihoodWelfare.gsbxzsr = addThousandSeparator(
|
||||
res.data.msfz.gsbxzsr
|
||||
);
|
||||
data.LivelihoodWelfare.gsbxzzc = addThousandSeparator(
|
||||
res.data.msfz.gsbxzzc
|
||||
);
|
||||
data.LivelihoodWelfare.zgyilbxzsr = addThousandSeparator(
|
||||
res.data.msfz.zgyilbxzsr
|
||||
);
|
||||
data.LivelihoodWelfare.zgyilbxzzc = addThousandSeparator(
|
||||
res.data.msfz.zgyilbxzzc
|
||||
);
|
||||
data.LivelihoodWelfare.cxyilbxzsr = addThousandSeparator(
|
||||
res.data.msfz.cxyilbxzsr
|
||||
);
|
||||
data.LivelihoodWelfare.cxyilbxzzc = addThousandSeparator(
|
||||
res.data.msfz.cxyilbxzzc
|
||||
);
|
||||
data.LivelihoodWelfare.nf = res.data.msfz.nf;
|
||||
}
|
||||
// 救助服务
|
||||
if (data.salvageServices) {
|
||||
data.salvageServices.jzrc = addThousandSeparator(res.data.jzfw.jzrc);
|
||||
data.salvageServices.jzje = addThousandSeparator(res.data.jzfw.jzje);
|
||||
data.salvageServices.nf = res.data.jzfw.nf;
|
||||
}
|
||||
// 教育事业&师生比例
|
||||
// 就业服务
|
||||
// 人口数据&年龄比例
|
||||
data.PopulationData = res.data.rksj;
|
||||
if (data.PopulationData) {
|
||||
data.PopulationData.rkzs = addThousandSeparator(res.data.rksj.rkzs);
|
||||
data.PopulationData.man = addThousandSeparator(res.data.rksj.man);
|
||||
data.PopulationData.woman = addThousandSeparator(res.data.rksj.woman);
|
||||
}
|
||||
// 年龄比例
|
||||
data.ageRatio.push(res.data.rksj.nl17Percent); //13~17岁以下人口占比
|
||||
data.ageRatio.push(res.data.rksj.nl1834Percent); //18~34岁人口占比
|
||||
data.ageRatio.push(res.data.rksj.nl3569Percent); //35~69岁人口占比
|
||||
data.ageRatio.push(res.data.rksj.nl60Percent); //60岁以上人口占比
|
||||
// console.log(data.ageRatio,666);
|
||||
// 公共服务&企业服务&政府服务
|
||||
// 医疗卫生
|
||||
// 文化事业
|
||||
data.whsyList[0].value = addThousandSeparator(res.data.whtysy.ggtsg);
|
||||
data.whsyList[1].value = addThousandSeparator(res.data.whtysy.zcs);
|
||||
data.whsyList[2].value = addThousandSeparator(res.data.whtysy.sxxxcs);
|
||||
data.whsyList[3].value = addThousandSeparator(res.data.whtysy.bwgcgcs);
|
||||
data.whsyList[4].value = addThousandSeparator(res.data.whtysy.tsjycs);
|
||||
// 体育事业
|
||||
data.tysyList[0].value = addThousandSeparator(res.data.whtysy.zqcs);
|
||||
data.tysyList[1].value = addThousandSeparator(res.data.whtysy.lqcs);
|
||||
data.tysyList[2].value = addThousandSeparator(res.data.whtysy.ppqcs);
|
||||
data.tysyList[3].value = addThousandSeparator(res.data.whtysy.ymqcs);
|
||||
data.tysyList[4].value = addThousandSeparator(res.data.whtysy.lsbdcd);
|
||||
}
|
||||
});
|
||||
};
|
||||
onBeforeMount(async () => {
|
||||
getData();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -1133,7 +1449,7 @@ const jtsyList = ref([
|
|||
.center {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
left: 215px;
|
||||
left: 226px;
|
||||
}
|
||||
.right {
|
||||
position: absolute;
|
||||
|
|
|
|||
Loading…
Reference in New Issue