This commit is contained in:
姚宇浩 2024-07-12 15:08:47 +08:00
parent b90a0edd18
commit 330db7ef7b
7 changed files with 381 additions and 66 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 115 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 112 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 111 KiB

View File

@ -101,7 +101,6 @@
<i></i> <i></i>
</div> </div>
</div> </div>
<ylXZZC :list1="data.zccs1" :list2="data.zccs2" v-if="showEchart"></ylXZZC>
</div> </div>
</div> </div>
<div class="displayFlex right_bg"> <div class="displayFlex right_bg">
@ -115,14 +114,26 @@
<right1 :list="data.wjybrysl" v-if="showEchart"></right1> <right1 :list="data.wjybrysl" v-if="showEchart"></right1>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title right_2"> <div
class="yd_title"
:class="tab_choose[0].choose == '信息推送' ? 'right_2' : 'right_2_1'"
@click="tab_change(0)"
>
<div class="animate-border"> <div class="animate-border">
<i></i> <i></i>
<i></i> <i></i>
</div> </div>
</div> </div>
<!-- <img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" /> --> <!-- <img src="@/assets/images/sjfx/right3D.png" alt="" class="right3d" /> -->
<right2 :list="data.analysis.push"></right2> <right2
:list="data.analysis.push"
v-if="showEchart && tab_choose[0].choose == '信息推送'"
></right2>
<ylXZZC
:list1="data.zccs1"
:list2="data.zccs2"
v-if="showEchart && tab_choose[0].choose == '一码通'"
></ylXZZC>
</div> </div>
<div class="flex1"> <div class="flex1">
<div class="yd_title right_3" @click="showEnrol()"> <div class="yd_title right_3" @click="showEnrol()">
@ -131,7 +142,12 @@
<i></i> <i></i>
</div> </div>
</div> </div>
<Map class="map"></Map> <div class="rxfx">
<rxfx v-if="showEchart"></rxfx>
<div class="historyimg">城区学龄招生情况</div>
</div>
<!-- <Map class="map"></Map> -->
</div> </div>
</div> </div>
<DialogEnrol <DialogEnrol
@ -163,6 +179,7 @@ import pie3dMt1 from "./echart_analyze/pie3dMt1.vue";
import edxs from "./echart_analyze/edXS.vue"; import edxs from "./echart_analyze/edXS.vue";
import eP2 from "./echart_analyze/eP2.vue"; import eP2 from "./echart_analyze/eP2.vue";
import ylXZZC from "./echart_analyze/ylXZZC.vue"; import ylXZZC from "./echart_analyze/ylXZZC.vue";
import rxfx from "./echart_analyze/rxfx.vue";
import FlipClock from "./echart_analyze/FlipClock.vue"; import FlipClock from "./echart_analyze/FlipClock.vue";
import ViewDataimg from "@/assets/images/sjfx/sjfx.png"; import ViewDataimg from "@/assets/images/sjfx/sjfx.png";
@ -174,7 +191,7 @@ import jypx2 from "@/assets/images/sjfx/gygws.png";
import Map from "./echart_analyze/map.vue"; import Map from "./echart_analyze/map.vue";
const showR = ref(false); //loading const showR = ref(false); //loading
// //
const dialogShowEnrol = ref(false) const dialogShowEnrol = ref(false);
const dataTab = reactive({ const dataTab = reactive({
url: "", url: "",
title: "", title: "",
@ -201,71 +218,100 @@ const dataTab = reactive({
const dataEnrol = reactive({ const dataEnrol = reactive({
title: "入学分析", title: "入学分析",
// //
kidName: ['第一幼儿园','第二幼儿园','第三幼儿园','第四幼儿园','第五幼儿园','第六幼儿园','第七幼儿园','第八幼儿园'], kidName: [
"第一幼儿园",
"第二幼儿园",
"第三幼儿园",
"第四幼儿园",
"第五幼儿园",
"第六幼儿园",
"第七幼儿园",
"第八幼儿园",
],
// //
kidZs1: [100,105,369,523,651,225,664,245], kidZs1: [100, 105, 369, 523, 651, 225, 664, 245],
kidBm1: [100,105,369,523,651,225,664,245], kidBm1: [100, 105, 369, 523, 651, 225, 664, 245],
// //
kidZs2: [100,105,369,523,651,225,664,245], kidZs2: [100, 105, 369, 523, 651, 225, 664, 245],
kidBm2: [100,105,369,523,651,225,664,245], kidBm2: [100, 105, 369, 523, 651, 225, 664, 245],
// //
kidZs3: [100,105,369,523,651,225,664,245], kidZs3: [100, 105, 369, 523, 651, 225, 664, 245],
kidBm3: [100,105,369,523,651,225,664,245], kidBm3: [100, 105, 369, 523, 651, 225, 664, 245],
// //
kidZs4: [100,105,369,523,651,225,664,245], kidZs4: [100, 105, 369, 523, 651, 225, 664, 245],
kidBm4: [100,105,369,523,651,225,664,245], kidBm4: [100, 105, 369, 523, 651, 225, 664, 245],
// //
primaryName: ['第一小学','第二小学','第三小学','第四小学','第五小学','第六小学'], primaryName: [
primaryZs: [231,544,343,444,335,632], "第一小学",
primaryBm: [231,544,343,444,335,632], "第二小学",
"第三小学",
"第四小学",
"第五小学",
"第六小学",
],
primaryZs: [231, 544, 343, 444, 335, 632],
primaryBm: [231, 544, 343, 444, 335, 632],
// //
middleName: ['第一初中','第二初中','第三初中','第四初中'], middleName: ["第一初中", "第二初中", "第三初中", "第四初中"],
middleZs: [231,544,343,444], middleZs: [231, 544, 343, 444],
// //
highName: ['第一高中','第二高中','第三高中'], highName: ["第一高中", "第二高中", "第三高中"],
highZs: [231,335,632], highZs: [231, 335, 632],
// //
schoolNmae: [ schoolNmae: [
{ {
name: '第一小学', name: "第一小学",
id: 0, id: 0,
}, },
{ {
name: '第一初中', name: "第一初中",
id: 1, id: 1,
}, },
{ {
name: '第一高中', name: "第一高中",
id: 2, id: 2,
}, },
], ],
schoolYear: [2022,2023,2024], schoolYear: [2022, 2023, 2024],
schoolData: [ schoolData: [
{ {
id: 0, id: 0,
bm: [335,654,365], bm: [335, 654, 365],
zs: [335,654,521], zs: [335, 654, 521],
}, },
{ {
id: 1, id: 1,
zs: [335,654,521], zs: [335, 654, 521],
}, },
{ {
id: 2, id: 2,
zs: [355,652,721], zs: [355, 652, 721],
}, },
] ],
}) });
const showEnrol = () => { const showEnrol = () => {
dialogShowEnrol.value = true dialogShowEnrol.value = true;
} };
const close = () => { const close = () => {
dialogShowEnrol.value dialogShowEnrol.value = false;
}; };
//
const tab_choose = ref([
{
choose: "信息推送",
},
]);
const tab_change = (index, name) => {
if (index == 0) {
if (tab_choose.value[index].choose == "信息推送") {
tab_choose.value[index].choose = "一码通";
} else {
tab_choose.value[index].choose = "信息推送";
}
}
};
// //
const jypxList = reactive([ const jypxList = reactive([
{ {
@ -463,42 +509,42 @@ const getData = async () => {
data.whistleblower.culeTotal.data[index] = res.data.lnr.rksj[key]; data.whistleblower.culeTotal.data[index] = res.data.lnr.rksj[key];
}); });
data.wjybrysl = res.data.wjybrysl; // data.wjybrysl = res.data.wjybrysl; //
// const mappings = [ // const mappings = [
// { key: 'ylzzwyrs', dataKey: 'ylzzwy' }, // { key: 'ylzzwyrs', dataKey: 'ylzzwy' },
// { key: 'dbzyrs', dataKey: 'dbzyrs' }, // { key: 'dbzyrs', dataKey: 'dbzyrs' },
// { key: 'gxyrs', dataKey: 'gxyrs' }, // { key: 'gxyrs', dataKey: 'gxyrs' },
// { key: 'tnbrs', dataKey: 'tnbrs' }, // { key: 'tnbrs', dataKey: 'tnbrs' },
// { key: 'gxzrs', dataKey: 'gxzrs' }, // { key: 'gxzrs', dataKey: 'gxzrs' },
// { key: 'gxtrs', dataKey: 'gxtrs' }, // { key: 'gxtrs', dataKey: 'gxtrs' },
// { key: 'cjrs', dataKey: 'cjrs' }, // { key: 'cjrs', dataKey: 'cjrs' },
// { key: 'dibao', dataKey: 'dbjzrc' }, // { key: 'dibao', dataKey: 'dbjzrc' },
// { key: 'tekun', dataKey: 'tkjzrc' }, // { key: 'tekun', dataKey: 'tkjzrc' },
// { key: 'qtjbrs', dataKey: 'qtjbrs' }, // { key: 'qtjbrs', dataKey: 'qtjbrs' },
// ]; // ];
// mappings.forEach((mapping, index) => { // mappings.forEach((mapping, index) => {
// data.ViewData[index].data = res.data.dataShow[mapping.key][mapping.dataKey]; // data.ViewData[index].data = res.data.dataShow[mapping.key][mapping.dataKey];
// data.ViewData[index].value = res.data.dataShow[mapping.key].total; // data.ViewData[index].value = res.data.dataShow[mapping.key].total;
// }); // });
data.leftCenterYear = res.data.dataShow.year; data.leftCenterYear = res.data.dataShow.year;
// data.ViewData[0].data = res.data.dataShow.ylzzwyrs.ylzzwy; // // data.ViewData[0].data = res.data.dataShow.ylzzwyrs.ylzzwy; //
// data.ViewData[0].value = res.data.dataShow.ylzzwyrs.total; // // data.ViewData[0].value = res.data.dataShow.ylzzwyrs.total; //
// data.ViewData[1].data = res.data.dataShow.dbzyrs.dbzyrs; // // data.ViewData[1].data = res.data.dataShow.dbzyrs.dbzyrs; //
// data.ViewData[1].value = res.data.dataShow.dbzyrs.total; // // data.ViewData[1].value = res.data.dataShow.dbzyrs.total; //
data.ViewData[2].data = res.data.dataShow.gxyrs.gxyrs; // data.ViewData[2].data = res.data.dataShow.gxyrs.gxyrs; //
data.ViewData[2].value = res.data.dataShow.gxyrs.total; // data.ViewData[2].value = res.data.dataShow.gxyrs.total; //
data.ViewData[3].data = res.data.dataShow.tnbrs.tnbrs; //尿 data.ViewData[3].data = res.data.dataShow.tnbrs.tnbrs; //尿
data.ViewData[3].value = res.data.dataShow.tnbrs.total; //尿 data.ViewData[3].value = res.data.dataShow.tnbrs.total; //尿
// data.ViewData[4].data = res.data.dataShow.gxzrs.gxzrs; // // data.ViewData[4].data = res.data.dataShow.gxzrs.gxzrs; //
// data.ViewData[4].value = res.data.dataShow.gxzrs.total; // // data.ViewData[4].value = res.data.dataShow.gxzrs.total; //
// data.ViewData[5].data = res.data.dataShow.gxtrs.gxtrs; // // data.ViewData[5].data = res.data.dataShow.gxtrs.gxtrs; //
// data.ViewData[5].value = res.data.dataShow.gxtrs.total; // // data.ViewData[5].value = res.data.dataShow.gxtrs.total; //
// data.ViewData[6].data = res.data.dataShow.cjrs.cjrs; // // data.ViewData[6].data = res.data.dataShow.cjrs.cjrs; //
// data.ViewData[6].value = res.data.dataShow.cjrs.total; // // data.ViewData[6].value = res.data.dataShow.cjrs.total; //
data.ViewData[7].data = res.data.dataShow.dibao.dbjzrc; // data.ViewData[7].data = res.data.dataShow.dibao.dbjzrc; //
data.ViewData[7].value = res.data.dataShow.dibao.total; // data.ViewData[7].value = res.data.dataShow.dibao.total; //
data.ViewData[8].data = res.data.dataShow.tekun.tkjzrc; // data.ViewData[8].data = res.data.dataShow.tekun.tkjzrc; //
data.ViewData[8].value = res.data.dataShow.tekun.total; // data.ViewData[8].value = res.data.dataShow.tekun.total; //
// data.ViewData[9].data = res.data.dataShow.qtjbrs.qtjbrs; // // data.ViewData[9].data = res.data.dataShow.qtjbrs.qtjbrs; //
// data.ViewData[9].value = res.data.dataShow.qtjbrs.total; // // data.ViewData[9].value = res.data.dataShow.qtjbrs.total; //
showEchart.value = true; showEchart.value = true;
@ -605,12 +651,20 @@ onBeforeUnmount(() => {
} }
.right_2 { .right_2 {
background-image: url(@/assets/images/sjfx/xxts.png); cursor: pointer;
background-image: url(@/assets/images/sjfx/tab_xxts.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.right_2_1 {
cursor: pointer;
background-image: url(@/assets/images/sjfx/tab_ymt.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
.right_3 { .right_3 {
background-image: url(@/assets/images/sjfx/jtzk.png); cursor: pointer;
background-image: url(@/assets/images/sjfx/rxfx.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
} }
@ -971,4 +1025,21 @@ onBeforeUnmount(() => {
} }
} }
} }
//
.rxfx {
display: flex;
flex-direction: column;
align-items: center;
.historyimg {
margin-top: 15px;
padding: 0 25px;
background-image: url(@/assets/images/hygiene/xtgl_1.png);
background-size: 100% 100%;
background-repeat: no-repeat;
font-size: 18px;
color: #ffffff;
line-height: 21px;
letter-spacing: 2px;
}
}
</style> </style>

View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="chart" style="width: 96%; height: 240px"></div> <div ref="chart" style="width: 96%; height: 220px"></div>
</template> </template>
<script setup> <script setup>
@ -176,7 +176,7 @@ const getOption = () => {
left: 10, left: 10,
right: 0, right: 0,
bottom: 20, bottom: 20,
top: 30, top: 40,
containLabel: true, containLabel: true,
}, },
xAxis: [ xAxis: [

View File

@ -0,0 +1,244 @@
<template>
<div ref="chart" style="width: 100%; height: 260px"></div>
</template>
<script setup >
import { onMounted, reactive, ref, onBeforeMount, defineProps } from "vue";
// echarts
import * as echarts from "echarts";
const props = defineProps({
list: {
type: Array,
default: () => [],
},
year: {
type: Array,
default: () => [],
},
});
const data = reactive({
list: [],
zss: [3136, 4345, 4964, 5846, 8076,8999,9999],
bms: [3860, 6980, 7585, 8858, 12737,13000,13333],
year: ['托班','小班','中班','大班','小学','初中','高中'],
option: {},
bg: [0, 0, 0, 0, 0, 0, 0],
});
const chart = ref(); // DOM
const getOption = () => {
data.option = {
tooltip: {
trigger: "axis",
formatter: "{b0}<br />{a1}:{c1} <br />{a3}:{c3}",
},
legend: {
data: ["招生数", "报名数"],
top: "6%",
right: "35%",
textStyle: {
fontSize: 16,
color: "#ffffff",
},
},
grid: {
top: "23%",
left: "1%",
right: "10%",
bottom: "0%",
containLabel: true,
},
calculable: true,
xAxis: [
{
type: "category",
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
data: data.year,
},
{
axisTick: false,
type: "category",
data: data.year,
axisLabel: {
show: false,
},
},
],
yAxis: [
{
type: "value",
splitLine: {
show: true,
lineStyle: {
color: "rgba(226, 226, 226, 0.3)",
width: 1,
},
},
axisLabel: {
//
textStyle: {
color: "#ffffff",
fontSize: 16,
},
},
},
{
type: "value",
min: 0,
max: 100,
splitLine: {
show: false,
lineStyle: {
type: "solid",
color: "rgb(221, 242, 255,0.1)",
},
},
axisLine: {
show: false,
lineStyle: {
type: "dotted",
},
},
axisLabel: {
show: false,
fontSize: 16,
fontFamily: "MicrosoftYaHei",
color: "#ffffff",
lineHeight: 19,
},
},
],
series: [
{
z: 1,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.zss,
symbol: "diamond",
symbolOffset: ["-65%", "-50%"],
symbolSize: [20, 10],
itemStyle: {
borderColor: "#2fffa4",
color: "rgba(142, 187, 255, 1)",
},
},
{
z: 1,
name: "招生数",
type: "bar",
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
data: data.zss,
barWidth: "30%",
label: {
show: true,
color: "#ffffff",
position: "top",
},
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .7)" },
{ offset: 0.5, color: "rgba(142, 187, 255, .3)" },
{ offset: 1, color: "rgba(142, 187, 255, .5)" },
],
},
},
},
{
z: 2,
name: "上部1",
type: "pictorialBar",
symbolPosition: "end",
data: data.bms,
symbol: "diamond",
symbolOffset: ["62%", "-50%"],
symbolSize: [20, 10],
itemStyle: {
borderColor: "#32ffee",
color: "rgba(23, 237, 255, 1)",
},
},
{
z: 2,
name: "报名数",
type: "bar",
barGap: 0.3 /*多个并排柱子设置柱子之间的间距*/,
data: data.bms,
barWidth: "30%",
label: {
show: true,
color: "#ffffff",
position: "top",
},
itemStyle: {
color: {
type: "linear",
x: 0,
x2: 1,
y: 0,
y2: 0,
colorStops: [
{ offset: 0, color: "rgba(23, 237, 255, .7)" },
{ offset: 0.5, color: "rgba(23, 237, 255, .7)" },
{ offset: 0.5, color: "rgba(23, 237, 255, .3)" },
{ offset: 1, color: "rgba(23, 237, 255, .5)" },
],
},
},
},
{
type: "bar",
xAxisIndex: 1,
yAxisIndex: 1,
itemStyle: {
color: "rgba(221, 242, 255, 0.1)",
},
data: data.bg.map(() => 100),
barWidth: 50,
},
],
};
};
const setChart = () => {
// Vue3
var myChart = echarts.init(chart.value);
// 使
myChart.setOption(data.option);
};
onBeforeMount(() => {
setTimeout(() => {
// data.list = props.list;
// data.year = props.year;
// data.list.forEach((item) => {
// data.zssffrc.push((item.zssffrc / 10000).toFixed(0));
// data.bmsffrc.push((item.bmsffrc / 10000).toFixed(0));
// // data.bg.push("");
// });
// console.log(data.zssffrc,data.bmsffrc);
getOption();
setChart();
}, 600);
});
</script>
<style scoped>
</style>

View File

@ -1,5 +1,5 @@
<template> <template>
<div ref="chart" style="width: 100%; height: 160px"></div> <div ref="chart" style="width: 100%; height: 220px"></div>
</template> </template>
<script setup> <script setup>