轨迹地图修改

This commit is contained in:
wangxk 2025-03-20 18:31:12 +08:00
parent ac5f95d248
commit e61cc4aea9
10 changed files with 287 additions and 262 deletions

View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" /> <meta name="description" content="" />
<meta name="keywords" content="" /> <meta name="keywords" content="" />
<script type="text/javascript" type="module" src="./webconfig.js"></script> <script type="text/javascript" type="module" src="/webconfig.js"></script>
<title>文档与数据管理系统</title> <title>文档与数据管理系统</title>
</head> </head>
<body> <body>

View File

@ -3,7 +3,7 @@
"version": "1.2.0", "version": "1.2.0",
"scripts": { "scripts": {
"dev": "vite serve --mode development", "dev": "vite serve --mode development",
"prod": "vue-tsc --noEmit && vite build --mode production", "prod": " vite build --mode production",
"serve": "vite preview", "serve": "vite preview",
"lint": "eslint src/**/*.{ts,js,vue} --fix", "lint": "eslint src/**/*.{ts,js,vue} --fix",
"prepare": "husky install", "prepare": "husky install",

View File

@ -43,13 +43,13 @@
<script setup> <script setup>
import {computed, reactive, ref} from "vue"; import {computed, reactive, ref} from "vue";
import common from "~/common"; import common from "@/components/file/common";
import 'lazysizes'; // import 'lazysizes';
import useGlobalConfigStore from "~/stores/global-config"; import useGlobalConfigStore from "@/components/file/stores/global-config";
let globalConfigStore = useGlobalConfigStore(); let globalConfigStore = useGlobalConfigStore();
import useFileDataStore from "~/stores/file-data"; import useFileDataStore from "@/components/file/stores/file-data";
let fileDataStore = useFileDataStore(); let fileDataStore = useFileDataStore();
// , * // , *
@ -109,7 +109,7 @@ let galleryRowWidth = computed(() => {
// //
import useFilePreview from '~/composables/file/useFilePreview'; import useFilePreview from '@/components/file/file/useFilePreview';
const { openImage } = useFilePreview(); const { openImage } = useFilePreview();
const openGalleryImage = (item) => { const openGalleryImage = (item) => {
if (!globalConfigStore.zfileConfig.imagePreview.gallery) { if (!globalConfigStore.zfileConfig.imagePreview.gallery) {

View File

@ -22,16 +22,13 @@ import { vue3dLoader } from "vue-3d-loader";
import useFilePwd from "@/components/file/file/useFilePwd"; import useFilePwd from "@/components/file/file/useFilePwd";
let { getPathPwd } = useFilePwd(); let { getPathPwd } = useFilePwd();
import useFilePreview from "@/components/file/file/useFilePreview";
const { dialogVideoVisible, dialogTextVisible, dialogPdfVisible, dialogOfficeVisible, dialog3dVisible } = useFilePreview();
import useRouterData from "@/components/file/useRouterData"; import useRouterData from "@/components/file/useRouterData";
let { currentPath, storageKey } = useRouterData(); let { currentPath, storageKey } = useRouterData();
import useStorageConfigStore from "@/components/file/stores/storage-config"; import useStorageConfigStore from "@/components/file/stores/storage-config";
let storageConfigStore = useStorageConfigStore(); let storageConfigStore = useStorageConfigStore();
import { loadFileItemReq } from "@/components/file/api/home"; import { loadFileItemReq } from "@/api/home";
import common from "@/components/file/common"; import common from "@/components/file/common";
const loadFinish = ref(false); const loadFinish = ref(false);

View File

@ -12,40 +12,11 @@ import { ref, onMounted, nextTick, defineAsyncComponent } from "vue";
import { useStorage } from '@vueuse/core'; import { useStorage } from '@vueuse/core';
let common = useCommon(); let common = useCommon();
let route = useRoute(); let route = useRoute();
import useFilePwd from "@/components/file/file/useFilePwd";
let { getPathPwd } = useFilePwd();
import useRouterData from "@/components/file/useRouterData";
let { currentPath, storageKey } = useRouterData();
import { loadFileItemReq } from "@/api/home";
// import IconPrev from '~icons/custom/prev'; // import IconPrev from '~icons/custom/prev';
// import IconNext from '~icons/custom/next'; // import IconNext from '~icons/custom/next';
import useFileDataStore from "@/components/file/stores/file-data";
let fileDataStore = useFileDataStore();
import useStorageConfigStore from "@/components/file/stores/storage-config";
let storageConfigStore = useStorageConfigStore();
// , , .
const getVideoList = (currentName) => {
let result = [];
fileDataStore.filterFileByType('video').forEach(file => {
result.push({
default: file.name === currentName,
html: file.name,
url: file.url
});
});
return result;
}
let currentVideo = ref(null); let currentVideo = ref(null);
@ -186,12 +157,7 @@ const initArtPlayer = async (name, url) => {
let originPathAndName = common.removeDuplicateSeparator(`${localStorage.getItem('filepath')}/${name}`); let originPathAndName = common.removeDuplicateSeparator(`${localStorage.getItem('filepath')}/${name}`);
let m3u8PathAndName = common.removeDuplicateSeparator(`${localStorage.getItem('filepath')}/__${name}__/video.m3u8`); let m3u8PathAndName = common.removeDuplicateSeparator(`${localStorage.getItem('filepath')}/__${name}__/video.m3u8`);
let m3u8FileItemParam = {
storageKey: 'minio',
path: m3u8PathAndName,
password: getPathPwd()
}
let h5aiDplayerMode = false; let h5aiDplayerMode = false;
// let fileItemResult = await loadFileItemReq(m3u8FileItemParam); // let fileItemResult = await loadFileItemReq(m3u8FileItemParam);

View File

@ -55,6 +55,17 @@
.attr('fill', 'none') .attr('fill', 'none')
.attr('stroke', 'steelblue') .attr('stroke', 'steelblue')
.attr('stroke-width', 2); .attr('stroke-width', 2);
svg.append("text")
.attr("class", "x-axis-label") // class
.attr("transform", "translate(400,440)")
.style("text-anchor", "middle")
.text("时间 (s)");
svg.append("text")
.attr("class", "y-axis-label")
.attr("transform", "rotate(-90) translate(-220, 15)") //
.style("text-anchor", "middle")
.text("高度 (m)");
// //
updateChart(); updateChart();
@ -94,5 +105,13 @@
height: 600px; height: 600px;
border: 1px solid #eee; border: 1px solid #eee;
margin: 20px; margin: 20px;
padding: 10px;
} }
.x-axis-label,
.y-axis-label {
font-size: 12px;
fill: #666;
font-family: Arial, sans-serif;
}
</style> </style>

View File

@ -3,7 +3,7 @@
</template> </template>
<script setup> <script setup>
import { ref, onMounted, watch } from 'vue' import { ref, onMounted, watch,defineEmits } from 'vue'
import * as d3 from 'd3' import * as d3 from 'd3'
import chinaData from './newJson.json' import chinaData from './newJson.json'
@ -14,9 +14,13 @@ const props = defineProps({
[116.405285, 39.904989], // [116.405285, 39.904989], //
[121.472644, 31.231706] // [121.472644, 31.231706] //
] ]
},
qvehuan: {
type: Boolean,
default: () => false
} }
}) })
const emit = defineEmits(['qvehuan1']);
const mapContainer = ref(null) const mapContainer = ref(null)
let svg, mapGroup, markersGroup, zoom let svg, mapGroup, markersGroup, zoom
@ -51,7 +55,26 @@ const initMap = () => {
.attr('d', path) .attr('d', path)
.attr('fill', '#e7e7e7') .attr('fill', '#e7e7e7')
.attr('stroke', '#fff') .attr('stroke', '#fff')
mapGroup.append('g')
.selectAll('text')
.data(chinaData.features)
.enter()
.append('text')
.attr('x', d => {
const centroid = path.centroid(d)
return centroid[0]
})
.attr('y', d => {
const centroid = path.centroid(d)
return centroid[1]
})
.text(d => d.properties.name || '') // JSONproperties.name
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'central')
.attr('fill', '#333')
.style('font-size', '12px')
.style('font-family', 'Arial')
.style('pointer-events', 'none') //
zoom = d3.zoom() zoom = d3.zoom()
.scaleExtent([0.2, 8]) .scaleExtent([0.2, 8])
.on('zoom', (event) => { .on('zoom', (event) => {
@ -65,9 +88,14 @@ const updateRoute = () => {
.center([104, 37]) .center([104, 37])
.scale(600) .scale(600)
.translate([1000 / 2, 800 / 2]) .translate([1000 / 2, 800 / 2])
if (initqie.value) {
// debugger
mapGroup.selectAll('.route-path').remove()
markersGroup.selectAll('*').remove()
initqie.value = false
emit('qvehuan1', initqie.value);
}
mapGroup.selectAll('.route-path').remove()
markersGroup.selectAll('*').remove()
const routeData = { const routeData = {
type: "LineString", type: "LineString",
@ -80,11 +108,11 @@ const updateRoute = () => {
.attr('d', d3.geoPath().projection(projection)) .attr('d', d3.geoPath().projection(projection))
.attr('fill', 'none') .attr('fill', 'none')
.attr('stroke', '#f00') .attr('stroke', '#f00')
.attr('stroke-width', 2) .attr('stroke-width', 1)
.attr('stroke-dasharray', function() { .attr('stroke-dasharray', function () {
return this.getTotalLength() return this.getTotalLength()
}) })
.attr('stroke-dashoffset', function() { .attr('stroke-dashoffset', function () {
return this.getTotalLength() return this.getTotalLength()
}) })
.transition() .transition()
@ -94,37 +122,36 @@ const updateRoute = () => {
// //
props.coordinates.forEach((coord, i) => { props.coordinates.forEach((coord, i) => {
if (!Array.isArray(coord) || coord.length !== 2) return if (!Array.isArray(coord) || coord.length !== 2) return
const lon = Number(coord[0]) const lon = Number(coord[0])
const lat = Number(coord[1]) const lat = Number(coord[1])
if (isNaN(lon) || isNaN(lat)) return if (isNaN(lon) || isNaN(lat)) return
const [x, y] = projection([lon, lat]) const [x, y] = projection([lon, lat])
// //
const currentTransform = d3.zoomTransform(svg.node())
const baseRadius = 8
markersGroup.append('circle') markersGroup.append('circle')
.attr('cx', x) .attr('cx', x)
.attr('cy', y) .attr('cy', y)
.attr('r', baseRadius / currentTransform.k) // .attr('r', 1) //
.attr('fill', '#ff4757') .attr('fill', '#ff4757')
.attr('stroke', 'white') .attr('stroke', 'white')
.attr('stroke-width', 2 / currentTransform.k) // .attr('stroke-width', 0.1) //
}) })
} }
const initqie = ref(false)
onMounted(() => { onMounted(() => {
if(props.coordinates){ if (props.coordinates) {
initMap() initMap()
updateRoute() updateRoute()
} }
})
watch(() => props.coordinates, () => { })
watch(() => props.qvehuan, (newVal) => {
initqie.value = newVal
updateRoute()
}, { deep: true })
watch(() => props.coordinates, (newVal) => {
updateRoute() updateRoute()
}, { deep: true }) }, { deep: true })
</script> </script>

View File

@ -555,7 +555,7 @@
<script setup lang="ts"> <script setup lang="ts">
import {ref, onMounted} from 'vue' import {ref, onMounted} from 'vue'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { getSchoolCheckReportData } from "@/api/planscreening"; // import { getSchoolCheckReportData } from "@/api/planscreening";
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import { useUserStore } from '@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore(); const userStore = useUserStore();
@ -1119,53 +1119,53 @@ const hyperopiaGradeListlabel3 = ref('')
const hyperopiasum:any = ref({}) const hyperopiasum:any = ref({})
const hyperopiasumlist = ref([]) const hyperopiasumlist = ref([])
function init(){ function init(){
getSchoolCheckReportData(querylist.value).then((res) => { // getSchoolCheckReportData(querylist.value).then((res) => {
summaryData.value = res.data.summaryData // summaryData.value = res.data.summaryData
popTitle.value = summaryData.value.school_name + '_' + summaryData.value.plan_name + '_'+summaryData.value.report_date // popTitle.value = summaryData.value.school_name + '_' + summaryData.value.plan_name + '_'+summaryData.value.report_date
schoolData.value = res.data.school_data // schoolData.value = res.data.school_data
schoolInsighted.value = res.data.school_insighted[0] // schoolInsighted.value = res.data.school_insighted[0]
insightedGradeGexList.value = res.data.school_insighted_grade_sex_list // insightedGradeGexList.value = res.data.school_insighted_grade_sex_list
insightedGradeGexLevelList.value = res.data.school_insighted_grade_sex_level_list // insightedGradeGexLevelList.value = res.data.school_insighted_grade_sex_level_list
eyedataVisionGroupList.value = res.data.school_eyedata_vision_group_list // eyedataVisionGroupList.value = res.data.school_eyedata_vision_group_list
eyedataSphSeList.value = res.data.school_eyedata_sph_se_list // eyedataSphSeList.value = res.data.school_eyedata_sph_se_list
avgStdList.value = res.data.school_avg_std_list // avgStdList.value = res.data.school_avg_std_list
hyperopiaGradeList.value = res.data.school_hyperopia_grade_list // hyperopiaGradeList.value = res.data.school_hyperopia_grade_list
poorGradeList.value = res.data.school_poor_grade_list // poorGradeList.value = res.data.school_poor_grade_list
insightedGradeList.value = res.data.school_insighted_grade_list // insightedGradeList.value = res.data.school_insighted_grade_list
hyperopiasum.value = hyperopiaGradeList.value[hyperopiaGradeList.value.length - 1] // hyperopiasum.value = hyperopiaGradeList.value[hyperopiaGradeList.value.length - 1]
let labelval = '' // let labelval = ''
for(let i = 0;i<insightedGradeList.value.length;i++){ // for(let i = 0;i<insightedGradeList.value.length;i++){
if(i !== insightedGradeList.value.length - 1){ // if(i !== insightedGradeList.value.length - 1){
labelval = labelval + insightedGradeList.value[i].avg_js_rate+'%' // labelval = labelval + insightedGradeList.value[i].avg_js_rate+'%'
}else{ // }else{
labelval = labelval + insightedGradeList.value[i].avg_js_rate+'%' // labelval = labelval + insightedGradeList.value[i].avg_js_rate+'%'
} // }
} // }
insightedGradeListlabel.value = insightedGradeList.value[0].grade_name +'至'+insightedGradeList.value[insightedGradeList.value.length - 1].grade_name+'近视率分别为' + labelval // insightedGradeListlabel.value = insightedGradeList.value[0].grade_name +''+insightedGradeList.value[insightedGradeList.value.length - 1].grade_name+'' + labelval
let labelval2 = '' // let labelval2 = ''
let labelval3 = '' // let labelval3 = ''
let labelval4 = '' // let labelval4 = ''
hyperopiasumlist.value = [] // hyperopiasumlist.value = []
for(let j = 0;j<hyperopiaGradeList.value.length - 1;j++){ // for(let j = 0;j<hyperopiaGradeList.value.length - 1;j++){
hyperopiasumlist.value.push(hyperopiaGradeList.value[j]) // hyperopiasumlist.value.push(hyperopiaGradeList.value[j])
if(j !== hyperopiaGradeList.value.length - 2){ // if(j !== hyperopiaGradeList.value.length - 2){
labelval2 = labelval2 + hyperopiaGradeList.value[j].sufficient_percentage+'%' // labelval2 = labelval2 + hyperopiaGradeList.value[j].sufficient_percentage+'%'
labelval3 = labelval3 + hyperopiaGradeList.value[j].hyperopia_percentage+'%' // labelval3 = labelval3 + hyperopiaGradeList.value[j].hyperopia_percentage+'%'
labelval4 = labelval2 + hyperopiaGradeList.value[j].insufficient_percentage+'%' // labelval4 = labelval2 + hyperopiaGradeList.value[j].insufficient_percentage+'%'
}else{ // }else{
labelval2 = labelval2 + hyperopiaGradeList.value[j].sufficient_percentage+'%' // labelval2 = labelval2 + hyperopiaGradeList.value[j].sufficient_percentage+'%'
labelval3 = labelval3 + hyperopiaGradeList.value[j].hyperopia_percentage+'%' // labelval3 = labelval3 + hyperopiaGradeList.value[j].hyperopia_percentage+'%'
labelval4 = labelval4 + hyperopiaGradeList.value[j].insufficient_percentage+'%' // labelval4 = labelval4 + hyperopiaGradeList.value[j].insufficient_percentage+'%'
} // }
} // }
hyperopiaGradeListlabel.value = hyperopiaGradeList.value[0].grade_name +'至'+hyperopiaGradeList.value[hyperopiaGradeList.value.length - 2].grade_name+'远视储备率分别为' + labelval // hyperopiaGradeListlabel.value = hyperopiaGradeList.value[0].grade_name +''+hyperopiaGradeList.value[hyperopiaGradeList.value.length - 2].grade_name+'' + labelval
hyperopiaGradeListlabel2.value = hyperopiaGradeList.value[0].grade_name +'至'+hyperopiaGradeList.value[hyperopiaGradeList.value.length - 2].grade_name+'远视率分别为' + labelval // hyperopiaGradeListlabel2.value = hyperopiaGradeList.value[0].grade_name +''+hyperopiaGradeList.value[hyperopiaGradeList.value.length - 2].grade_name+'' + labelval
hyperopiaGradeListlabel3.value = hyperopiaGradeList.value[0].grade_name +'至'+hyperopiaGradeList.value[hyperopiaGradeList.value.length - 2].grade_name+'远视储备不足率分别为' + labelval // hyperopiaGradeListlabel3.value = hyperopiaGradeList.value[0].grade_name +''+hyperopiaGradeList.value[hyperopiaGradeList.value.length - 2].grade_name+'' + labelval
insightedAllList.value = splitarr(res.data.school_insighted_grade_class_sex_level_list) // insightedAllList.value = splitarr(res.data.school_insighted_grade_class_sex_level_list)
poorAllList.value = splitarr(res.data.school_poor_grade_class_list) // poorAllList.value = splitarr(res.data.school_poor_grade_class_list)
initchart() // initchart()
}) // })
} }
function splitarr(dataval:any){ function splitarr(dataval:any){
const groupedItems = dataval.reduce((acc, item) => { const groupedItems = dataval.reduce((acc, item) => {

View File

@ -553,7 +553,7 @@
<script setup lang="ts"> <script setup lang="ts">
import {ref, nextTick, onMounted} from 'vue' import {ref, nextTick, onMounted} from 'vue'
import * as echarts from 'echarts' import * as echarts from 'echarts'
import { getRegionCheckReportData } from "@/api/planscreening"; // import { getRegionCheckReportData } from "@/api/planscreening";
import { useUserStore } from '@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
const route = useRoute(); const route = useRoute();
@ -1166,138 +1166,138 @@ const poorAllList = ref([])
const insightedGradeList = ref([]) const insightedGradeList = ref([])
const hyperopiasum:any = ref({}) const hyperopiasum:any = ref({})
function init(){ function init(){
getRegionCheckReportData(querylist.value).then((res) => { // getRegionCheckReportData(querylist.value).then((res) => {
summaryData.value = res.data.summaryData // summaryData.value = res.data.summaryData
popTitle.value = summaryData.value.plan_name + '_'+summaryData.value.report_date // popTitle.value = summaryData.value.plan_name + '_'+summaryData.value.report_date
regionData.value = res.data.region_data // regionData.value = res.data.region_data
const schoolnametotal = [] // const schoolnametotal = []
schoollist.value = { // schoollist.value = {
schoolCount:0, // schoolCount:0,
schoolCount2:0, // schoolCount2:0,
schoolCount3:0, // schoolCount3:0,
schoolCount4:0, // schoolCount4:0,
schoolCount5:0, // schoolCount5:0,
schoolCount6:0, // schoolCount6:0,
studentCount:regionData.value[regionData.value.length - 1].student_count, // studentCount:regionData.value[regionData.value.length - 1].student_count,
classCount:regionData.value[regionData.value.length - 1].class_count // classCount:regionData.value[regionData.value.length - 1].class_count
} // }
for(let i = 0 ;i<regionData.value.length - 1;i++){ // for(let i = 0 ;i<regionData.value.length - 1;i++){
schoolnametotal.push(regionData.value[i].name) // schoolnametotal.push(regionData.value[i].name)
if(regionData.value[i].type === '高中'){ // if(regionData.value[i].type === ''){
schoollist.value.schoolCount = schoollist.value.schoolCount + 1 // schoollist.value.schoolCount = schoollist.value.schoolCount + 1
} // }
if(regionData.value[i].type === '高中/初中'){ // if(regionData.value[i].type === '/'){
schoollist.value.schoolCount2 = schoollist.value.schoolCount2 + 1 // schoollist.value.schoolCount2 = schoollist.value.schoolCount2 + 1
} // }
if(regionData.value[i].type === '初中'){ // if(regionData.value[i].type === ''){
schoollist.value.schoolCount3 = schoollist.value.schoolCount3 + 1 // schoollist.value.schoolCount3 = schoollist.value.schoolCount3 + 1
} // }
if(regionData.value[i].type === '初中/小学'){ // if(regionData.value[i].type === '/'){
schoollist.value.schoolCount4 = schoollist.value.schoolCount4 + 1 // schoollist.value.schoolCount4 = schoollist.value.schoolCount4 + 1
} // }
if(regionData.value[i].type === '小学'){ // if(regionData.value[i].type === ''){
schoollist.value.schoolCount5 = schoollist.value.schoolCount5 + 1 // schoollist.value.schoolCount5 = schoollist.value.schoolCount5 + 1
} // }
if(regionData.value[i].type === '幼儿园'){ // if(regionData.value[i].type === ''){
schoollist.value.schoolCount6 = schoollist.value.schoolCount6 + 1 // schoollist.value.schoolCount6 = schoollist.value.schoolCount6 + 1
} // }
} // }
schoollabel.value = schoolnametotal.join() // schoollabel.value = schoolnametotal.join()
regionInsighted.value = res.data.region_insighted // regionInsighted.value = res.data.region_insighted
let rankdata = [] // let rankdata = []
let rankdata2 = [] // let rankdata2 = []
let rankdata3 = [] // let rankdata3 = []
let rankdata4 = [] // let rankdata4 = []
let rankdata5 = [] // let rankdata5 = []
let rankdata6 = [] // let rankdata6 = []
for(let j = 0 ;j<res.data.region_school_rank.length - 1;j++){ // for(let j = 0 ;j<res.data.region_school_rank.length - 1;j++){
if(res.data.region_school_rank[j].school_type === '1-幼儿园'){ // if(res.data.region_school_rank[j].school_type === '1-'){
rankdata.push(res.data.region_school_rank[j].school_name + res.data.region_school_rank[j].js_rate +' %,排名:'+ res.data.region_school_rank[j].js_rate_rank) // rankdata.push(res.data.region_school_rank[j].school_name + res.data.region_school_rank[j].js_rate +' %,:'+ res.data.region_school_rank[j].js_rate_rank)
}else if(res.data.region_school_rank[j].school_type === '2-小学'){ // }else if(res.data.region_school_rank[j].school_type === '2-'){
rankdata2.push(res.data.region_school_rank[j].school_name + res.data.region_school_rank[j].js_rate +'%,排名:'+ res.data.region_school_rank[j].js_rate_rank) // rankdata2.push(res.data.region_school_rank[j].school_name + res.data.region_school_rank[j].js_rate +'%,:'+ res.data.region_school_rank[j].js_rate_rank)
}else if(res.data.region_school_rank[j].school_type === '3-小学/初中'){ // }else if(res.data.region_school_rank[j].school_type === '3-/'){
rankdata3.push(res.data.region_school_rank[j].school_name + res.data.region_school_rank[j].js_rate +'%,排名:'+ res.data.region_school_rank[j].js_rate_rank) // rankdata3.push(res.data.region_school_rank[j].school_name + res.data.region_school_rank[j].js_rate +'%,:'+ res.data.region_school_rank[j].js_rate_rank)
}else if(res.data.region_school_rank[j].school_type === '4-初中'){ // }else if(res.data.region_school_rank[j].school_type === '4-'){
rankdata4.push(res.data.region_school_rank[j].school_name + res.data.region_school_rank[j].js_rate +'%,排名:'+ res.data.region_school_rank[j].js_rate_rank) // rankdata4.push(res.data.region_school_rank[j].school_name + res.data.region_school_rank[j].js_rate +'%,:'+ res.data.region_school_rank[j].js_rate_rank)
}else if(res.data.region_school_rank[j].school_type === '5-初中/高中'){ // }else if(res.data.region_school_rank[j].school_type === '5-/'){
rankdata5.push(res.data.region_school_rank[j].school_name + res.data.region_school_rank[j].js_rate +'%,排名:'+ res.data.region_school_rank[j].js_rate_rank) // rankdata5.push(res.data.region_school_rank[j].school_name + res.data.region_school_rank[j].js_rate +'%,:'+ res.data.region_school_rank[j].js_rate_rank)
}else if(res.data.region_school_rank[j].school_type === '6-高中'){ // }else if(res.data.region_school_rank[j].school_type === '6-'){
rankdata6.push(res.data.region_school_rank[j].school_name + res.data.region_school_rank[j].js_rate +'%,排名:'+ res.data.region_school_rank[j].js_rate_rank) // rankdata6.push(res.data.region_school_rank[j].school_name + res.data.region_school_rank[j].js_rate +'%,:'+ res.data.region_school_rank[j].js_rate_rank)
} // }
} // }
schoolrank.value.ranklabel = rankdata.join() // schoolrank.value.ranklabel = rankdata.join()
schoolrank.value.ranklabel2 = rankdata2.join() // schoolrank.value.ranklabel2 = rankdata2.join()
schoolrank.value.ranklabel3 = rankdata3.join() // schoolrank.value.ranklabel3 = rankdata3.join()
schoolrank.value.ranklabel4 = rankdata4.join() // schoolrank.value.ranklabel4 = rankdata4.join()
schoolrank.value.ranklabel5 = rankdata5.join() // schoolrank.value.ranklabel5 = rankdata5.join()
schoolrank.value.ranklabel6 = rankdata6.join() // schoolrank.value.ranklabel6 = rankdata6.join()
insightedSchoolGexList.value = res.data.region_school_sex_list // insightedSchoolGexList.value = res.data.region_school_sex_list
insightedSchoolGexLevelList.value = res.data.region_school_sex_sightedlevel_list // insightedSchoolGexLevelList.value = res.data.region_school_sex_sightedlevel_list
eyedataVisionGroupList.value = res.data.region_eyedata_vision_group_list // eyedataVisionGroupList.value = res.data.region_eyedata_vision_group_list
eyedataSphSeList.value = res.data.region_eyedata_sph_se_list // eyedataSphSeList.value = res.data.region_eyedata_sph_se_list
avgStdList.value = res.data.region_avg_std_list // avgStdList.value = res.data.region_avg_std_list
hyperopiaSchoolList.value = res.data.region_hyperopia_school_list // hyperopiaSchoolList.value = res.data.region_hyperopia_school_list
let hyperopiarankdata = [] // let hyperopiarankdata = []
let hyperopiarankdata2 = [] // let hyperopiarankdata2 = []
let hyperopiarankdata3 = [] // let hyperopiarankdata3 = []
let hyperopiarankdata4 = [] // let hyperopiarankdata4 = []
let hyperopiarankdata5 = [] // let hyperopiarankdata5 = []
let hyperopiarankdata6 = [] // let hyperopiarankdata6 = []
for(let k = 0 ;k<res.data.region_hyperopia_school_rank.length - 1;k++){ // for(let k = 0 ;k<res.data.region_hyperopia_school_rank.length - 1;k++){
if(res.data.region_hyperopia_school_rank[k].school_type === '1-幼儿园'){ // if(res.data.region_hyperopia_school_rank[k].school_type === '1-'){
hyperopiarankdata.push(res.data.region_hyperopia_school_rank[k].school_name + res.data.region_hyperopia_school_rank[k].hyperopia_percentage +' %,排名:'+ res.data.region_hyperopia_school_rank[k].hyperopia_percentage_rate_rank) // hyperopiarankdata.push(res.data.region_hyperopia_school_rank[k].school_name + res.data.region_hyperopia_school_rank[k].hyperopia_percentage +' %,:'+ res.data.region_hyperopia_school_rank[k].hyperopia_percentage_rate_rank)
}else if(res.data.region_hyperopia_school_rank[k].school_type === '2-小学'){ // }else if(res.data.region_hyperopia_school_rank[k].school_type === '2-'){
hyperopiarankdata2.push(res.data.region_hyperopia_school_rank[k].school_name + res.data.region_hyperopia_school_rank[k].hyperopia_percentage +'%,排名:'+ res.data.region_hyperopia_school_rank[k].hyperopia_percentage_rate_rank) // hyperopiarankdata2.push(res.data.region_hyperopia_school_rank[k].school_name + res.data.region_hyperopia_school_rank[k].hyperopia_percentage +'%,:'+ res.data.region_hyperopia_school_rank[k].hyperopia_percentage_rate_rank)
}else if(res.data.region_hyperopia_school_rank[k].school_type === '3-小学/初中'){ // }else if(res.data.region_hyperopia_school_rank[k].school_type === '3-/'){
hyperopiarankdata3.push(res.data.region_hyperopia_school_rank[k].school_name + res.data.region_hyperopia_school_rank[k].hyperopia_percentage +'%,排名:'+ res.data.region_hyperopia_school_rank[k].hyperopia_percentage_rate_rank) // hyperopiarankdata3.push(res.data.region_hyperopia_school_rank[k].school_name + res.data.region_hyperopia_school_rank[k].hyperopia_percentage +'%,:'+ res.data.region_hyperopia_school_rank[k].hyperopia_percentage_rate_rank)
}else if(res.data.region_hyperopia_school_rank[k].school_type === '4-初中'){ // }else if(res.data.region_hyperopia_school_rank[k].school_type === '4-'){
hyperopiarankdata4.push(res.data.region_hyperopia_school_rank[k].school_name + res.data.region_hyperopia_school_rank[k].hyperopia_percentage +'%,排名:'+ res.data.region_hyperopia_school_rank[k].hyperopia_percentage_rate_rank) // hyperopiarankdata4.push(res.data.region_hyperopia_school_rank[k].school_name + res.data.region_hyperopia_school_rank[k].hyperopia_percentage +'%,:'+ res.data.region_hyperopia_school_rank[k].hyperopia_percentage_rate_rank)
}else if(res.data.region_hyperopia_school_rank[k].school_type === '5-初中/高中'){ // }else if(res.data.region_hyperopia_school_rank[k].school_type === '5-/'){
hyperopiarankdata5.push(res.data.region_hyperopia_school_rank[k].school_name + res.data.region_hyperopia_school_rank[k].hyperopia_percentage +'%,排名:'+ res.data.region_hyperopia_school_rank[k].hyperopia_percentage_rate_rank) // hyperopiarankdata5.push(res.data.region_hyperopia_school_rank[k].school_name + res.data.region_hyperopia_school_rank[k].hyperopia_percentage +'%,:'+ res.data.region_hyperopia_school_rank[k].hyperopia_percentage_rate_rank)
}else if(res.data.region_hyperopia_school_rank[k].school_type === '6-高中'){ // }else if(res.data.region_hyperopia_school_rank[k].school_type === '6-'){
hyperopiarankdata6.push(res.data.region_hyperopia_school_rank[k].school_name + res.data.region_hyperopia_school_rank[k].hyperopia_percentage +'%,排名:'+ res.data.region_hyperopia_school_rank[k].hyperopia_percentage_rate_rank) // hyperopiarankdata6.push(res.data.region_hyperopia_school_rank[k].school_name + res.data.region_hyperopia_school_rank[k].hyperopia_percentage +'%,:'+ res.data.region_hyperopia_school_rank[k].hyperopia_percentage_rate_rank)
} // }
} // }
hyperopiarank.value.ranklabel = hyperopiarankdata.join() // hyperopiarank.value.ranklabel = hyperopiarankdata.join()
hyperopiarank.value.ranklabel2 = hyperopiarankdata2.join() // hyperopiarank.value.ranklabel2 = hyperopiarankdata2.join()
hyperopiarank.value.ranklabel3 = hyperopiarankdata3.join() // hyperopiarank.value.ranklabel3 = hyperopiarankdata3.join()
hyperopiarank.value.ranklabel4 = hyperopiarankdata4.join() // hyperopiarank.value.ranklabel4 = hyperopiarankdata4.join()
hyperopiarank.value.ranklabel5 = hyperopiarankdata5.join() // hyperopiarank.value.ranklabel5 = hyperopiarankdata5.join()
hyperopiarank.value.ranklabel6 = hyperopiarankdata6.join() // hyperopiarank.value.ranklabel6 = hyperopiarankdata6.join()
let sufficientdata = [] // let sufficientdata = []
let sufficientdata2 = [] // let sufficientdata2 = []
let sufficientdata3 = [] // let sufficientdata3 = []
let sufficientdata4 = [] // let sufficientdata4 = []
let sufficientdata5 = [] // let sufficientdata5 = []
let sufficientdata6 = [] // let sufficientdata6 = []
for(let g = 0 ;g<res.data.region_sufficient_school_rank.length - 1;g++){ // for(let g = 0 ;g<res.data.region_sufficient_school_rank.length - 1;g++){
if(res.data.region_sufficient_school_rank[g].school_type === '1-幼儿园'){ // if(res.data.region_sufficient_school_rank[g].school_type === '1-'){
sufficientdata.push(res.data.region_sufficient_school_rank[g].school_name + res.data.region_sufficient_school_rank[g].sufficient_percentage +' %,排名:'+ res.data.region_sufficient_school_rank[g].sufficient_percentage_rate_rank) // sufficientdata.push(res.data.region_sufficient_school_rank[g].school_name + res.data.region_sufficient_school_rank[g].sufficient_percentage +' %,:'+ res.data.region_sufficient_school_rank[g].sufficient_percentage_rate_rank)
}else if(res.data.region_sufficient_school_rank[g].school_type === '2-小学'){ // }else if(res.data.region_sufficient_school_rank[g].school_type === '2-'){
sufficientdata2.push(res.data.region_sufficient_school_rank[g].school_name + res.data.region_sufficient_school_rank[g].sufficient_percentage +'%,排名:'+ res.data.region_sufficient_school_rank[g].sufficient_percentage_rate_rank) // sufficientdata2.push(res.data.region_sufficient_school_rank[g].school_name + res.data.region_sufficient_school_rank[g].sufficient_percentage +'%,:'+ res.data.region_sufficient_school_rank[g].sufficient_percentage_rate_rank)
}else if(res.data.region_sufficient_school_rank[g].school_type === '3-小学/初中'){ // }else if(res.data.region_sufficient_school_rank[g].school_type === '3-/'){
sufficientdata3.push(res.data.region_sufficient_school_rank[g].school_name + res.data.region_sufficient_school_rank[g].sufficient_percentage +'%,排名:'+ res.data.region_sufficient_school_rank[g].sufficient_percentage_rate_rank) // sufficientdata3.push(res.data.region_sufficient_school_rank[g].school_name + res.data.region_sufficient_school_rank[g].sufficient_percentage +'%,:'+ res.data.region_sufficient_school_rank[g].sufficient_percentage_rate_rank)
}else if(res.data.region_sufficient_school_rank[g].school_type === '4-初中'){ // }else if(res.data.region_sufficient_school_rank[g].school_type === '4-'){
sufficientdata4.push(res.data.region_sufficient_school_rank[g].school_name + res.data.region_sufficient_school_rank[g].sufficient_percentage +'%,排名:'+ res.data.region_sufficient_school_rank[g].sufficient_percentage_rate_rank) // sufficientdata4.push(res.data.region_sufficient_school_rank[g].school_name + res.data.region_sufficient_school_rank[g].sufficient_percentage +'%,:'+ res.data.region_sufficient_school_rank[g].sufficient_percentage_rate_rank)
}else if(res.data.region_sufficient_school_rank[g].school_type === '5-初中/高中'){ // }else if(res.data.region_sufficient_school_rank[g].school_type === '5-/'){
sufficientdata5.push(res.data.region_sufficient_school_rank[g].school_name + res.data.region_sufficient_school_rank[g].sufficient_percentage +'%,排名:'+ res.data.region_sufficient_school_rank[g].sufficient_percentage_rate_rank) // sufficientdata5.push(res.data.region_sufficient_school_rank[g].school_name + res.data.region_sufficient_school_rank[g].sufficient_percentage +'%,:'+ res.data.region_sufficient_school_rank[g].sufficient_percentage_rate_rank)
}else if(res.data.region_sufficient_school_rank[g].school_type === '6-高中'){ // }else if(res.data.region_sufficient_school_rank[g].school_type === '6-'){
sufficientdata6.push(res.data.region_sufficient_school_rank[g].school_name + res.data.region_sufficient_school_rank[g].sufficient_percentage +'%,排名:'+ res.data.region_sufficient_school_rank[g].sufficient_percentage_rate_rank) // sufficientdata6.push(res.data.region_sufficient_school_rank[g].school_name + res.data.region_sufficient_school_rank[g].sufficient_percentage +'%,:'+ res.data.region_sufficient_school_rank[g].sufficient_percentage_rate_rank)
} // }
} // }
sufficientrank.value.ranklabel = sufficientdata.join() // sufficientrank.value.ranklabel = sufficientdata.join()
sufficientrank.value.ranklabel2 = sufficientdata2.join() // sufficientrank.value.ranklabel2 = sufficientdata2.join()
sufficientrank.value.ranklabel3 = sufficientdata3.join() // sufficientrank.value.ranklabel3 = sufficientdata3.join()
sufficientrank.value.ranklabel4 = sufficientdata4.join() // sufficientrank.value.ranklabel4 = sufficientdata4.join()
sufficientrank.value.ranklabel5 = sufficientdata5.join() // sufficientrank.value.ranklabel5 = sufficientdata5.join()
sufficientrank.value.ranklabel6 = sufficientdata6.join() // sufficientrank.value.ranklabel6 = sufficientdata6.join()
poorSchoolList.value = res.data.region_poor_school_list // poorSchoolList.value = res.data.region_poor_school_list
hyperopiasum.value = hyperopiaSchoolList.value[hyperopiaSchoolList.value.length - 1] // hyperopiasum.value = hyperopiaSchoolList.value[hyperopiaSchoolList.value.length - 1]
insightedAllList.value = splitarr(res.data.region_school_grade_sex_sightedlevel_list) // insightedAllList.value = splitarr(res.data.region_school_grade_sex_sightedlevel_list)
poorAllList.value = splitarr(res.data.region_poor_school_grade_list) // poorAllList.value = splitarr(res.data.region_poor_school_grade_list)
initchart() // initchart()
}) // })
} }
function splitarr(dataval:any){ function splitarr(dataval:any){
const groupedItems = dataval.reduce((acc, item) => { const groupedItems = dataval.reduce((acc, item) => {

View File

@ -5,7 +5,7 @@ export default {
</script> </script>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, nextTick, defineAsyncComponent } from "vue"; import { ref, onMounted, nextTick, defineAsyncComponent,onUnmounted } from "vue";
import { Search } from '@element-plus/icons-vue' import { Search } from '@element-plus/icons-vue'
import { useAppStore } from '@/store/modules/app'; import { useAppStore } from '@/store/modules/app';
import { useUserStore } from '@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
@ -48,6 +48,9 @@ const userStore = useUserStore();
onMounted(() => { onMounted(() => {
getProject() getProject()
}); });
onUnmounted(()=>{
closeSSE()
})
// //
const vMove = { const vMove = {
mounted(el: any) { mounted(el: any) {
@ -1395,10 +1398,13 @@ function openMap(row: any) {
// })); // }));
// }, 2000); // }, 2000);
mapTrajectory.value = true mapTrajectory.value = true
maptime.value = 1
} }
function mapClose() { function mapClose() {
mapTrajectory.value = false mapTrajectory.value = false
eventSource.value?.close()
closeSSE()
// index = 0
} }
// 1s/10s/30s/1m/2m/5m // 1s/10s/30s/1m/2m/5m
const options = ref([ const options = ref([
@ -1427,23 +1433,31 @@ const options = ref([
, id: 300 , id: 300
}, },
]) ])
const maptime: any = ref(300) const maptime: any = ref(1)
// //
const qvehuan = ref(false)
function frequency(row: any) { function frequency(row: any) {
startSimpleNavi({ samTimes: maptime.value, id: fredid.value, token: userStore.Token }).then((res: any) => { startSimpleNavi({ samTimes: maptime.value, id: fredid.value, token: userStore.userId }).then((res: any) => {
if (res.code == '0' && row) { if (res.code == '0' && row) {
ElMessage.success("切换成功") ElMessage.success("切换成功")
getSSELink()
qvehuan.value = true
} }
}) })
} }
//sse //sse
const eventSource = ref(null) const eventSource = ref(null)
let index = 0
const dynamicCoordinates = ref([]) const dynamicCoordinates = ref([])
function closeSSE(){
dynamicCoordinates.value.length = 0
// SSEclose :any
let SSEclose = new EventSource(userStore.webApiBaseUrl + '/sse/disconnect/' + userStore.userId)
eventSource.value?.close()
}
function getSSELink() { function getSSELink() {
if (eventSource.value) { closeSSE()
eventSource.value?.close() eventSource.value = new EventSource(userStore.webApiBaseUrl + '/sse/connect/' + userStore.userId)
}
eventSource.value = new EventSource(userStore.webApiBaseUrl + '/sse/connect/' + userStore.Token)
eventSource.value.addEventListener('open', () => { eventSource.value.addEventListener('open', () => {
frequency(false) frequency(false)
console.log('链接成功') console.log('链接成功')
@ -1454,13 +1468,12 @@ function getSSELink() {
const data = JSON.parse(e.data) const data = JSON.parse(e.data)
console.log('SSE消息:', data) console.log('SSE消息:', data)
if(data){ if(data){
data.forEach((item: any) => { dynamicCoordinates.value.push([data.lon, data.lat])
dynamicCoordinates.value.push([item.lon, item.lat]) if(dynamicCoordinates.value.length>2){
lineData.value.push({x:item.UtcTime,y:item.alt}) dynamicCoordinates.value.shift()
}) }
lineData.value.push({x:data.UtcTime,y:data.alt})
} }
} catch (err) { } catch (err) {
console.error('消息解析失败:', err) console.error('消息解析失败:', err)
} }
@ -1474,6 +1487,9 @@ function getSSELink() {
// //
const lineData:any = ref([]) const lineData:any = ref([])
const tabbas = ref('1') const tabbas = ref('1')
function handleCustomEvent(row:any){
qvehuan.value = row
}
</script> </script>
<template> <template>
@ -1863,7 +1879,7 @@ const tabbas = ref('1')
<div @click="tabbas = '2'" :class="tabbas == '2' ? 'mapbox_border' : 'mapbox_border1'">高程变化动态图</div> <div @click="tabbas = '2'" :class="tabbas == '2' ? 'mapbox_border' : 'mapbox_border1'">高程变化动态图</div>
</div> </div>
<div v-show="tabbas == '1'" style="width: 800px;height:600px;overflow: hidden;"> <div v-show="tabbas == '1'" style="width: 800px;height:600px;overflow: hidden;">
<MapChart :coordinates="dynamicCoordinates" /> <MapChart :coordinates="dynamicCoordinates" :qvehuan="qvehuan" @qvehuan1="handleCustomEvent" />
</div> </div>
<div v-show="tabbas == '2'" style="width: 800px;height:600px;overflow: hidden;"> <div v-show="tabbas == '2'" style="width: 800px;height:600px;overflow: hidden;">
<Echart :chart-data="lineData" /> <Echart :chart-data="lineData" />