Skip to content

R
risk-control-bigScreen
Commit c651f9a7 by licheng
Options

update: 加入地图模块

parent 39418e0b
Showing with 253 additions and 6 deletions
index.html
<!DOCTYPE html>
<html lang="en">
<html lang="en" class="dark">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
......
package-lock.json
......@@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"axios": "^1.7.7",
"echarts": "^5.5.1",
"element-plus": "^2.8.2",
"pinia": "^2.1.7",
"vue": "^3.4.29",
......@@ -2541,6 +2542,16 @@
"domelementtype": "1"
}
},
"node_modules/echarts": {
"version": "5.5.1",
"resolved": "https://registry.npmmirror.com/echarts/-/echarts-5.5.1.tgz",
"integrity": "sha512-Fce8upazaAXUVUVsjgV6mBnGuqgO+JNDlcgF79Dksy4+wgGpQB2lmYoO4TSweFg/mZITdpGHomw/cNBJZj1icA==",
"license": "Apache-2.0",
"dependencies": {
"tslib": "2.3.0",
"zrender": "5.6.0"
}
},
"node_modules/element-plus": {
"version": "2.8.2",
"resolved": "https://registry.npmmirror.com/element-plus/-/element-plus-2.8.2.tgz",
......@@ -6666,6 +6677,12 @@
"typescript": ">=4.2.0"
}
},
"node_modules/tslib": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.3.0.tgz",
"integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
"license": "0BSD"
},
"node_modules/type-check": {
"version": "0.4.0",
"resolved": "https://registry.npmmirror.com/type-check/-/type-check-0.4.0.tgz",
......@@ -7218,6 +7235,15 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/zrender": {
"version": "5.6.0",
"resolved": "https://registry.npmmirror.com/zrender/-/zrender-5.6.0.tgz",
"integrity": "sha512-uzgraf4njmmHAbEUxMJ8Oxg+P3fT04O+9p7gY+wJRVxo8Ge+KmYv0WJev945EH4wFuc4OY2NLXz46FZrWS9xJg==",
"license": "BSD-3-Clause",
"dependencies": {
"tslib": "2.3.0"
}
}
}
}
package.json
......@@ -13,6 +13,7 @@
},
"dependencies": {
"axios": "^1.7.7",
"echarts": "^5.5.1",
"element-plus": "^2.8.2",
"pinia": "^2.1.7",
"vue": "^3.4.29",
......
src/main.ts
import './styles/index.scss'
import 'element-plus/dist/index.css'
import 'element-plus/theme-chalk/dark/css-vars.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
......
src/styles/index.scss
@use './element-plus.scss';
// @use './element-plus.scss';
body {
padding: 0;
......
src/views/home/components/ChinaMap.vue 0 → 100644
<template>
<div class="chart-container">
<div ref="upperChartContainer" class="upper-chart"></div>
<div ref="lowerChartContainer" class="lower-chart"></div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import china from "./china.json";
const mapData: any = china;
const upperChartContainer = ref<HTMLElement | null>(null);
const lowerChartContainer = ref<HTMLElement | null>(null);
let upperChart: echarts.ECharts | null = null;
let lowerChart: echarts.ECharts | null = null;
function initUpperChart() {
echarts.registerMap("chinaMap", mapData);
const option: echarts.EChartsOption = {
backgroundColor: "transparent",
series: [
{
type: "map",
map: "chinaMap",
roam: false,
emphasis: {
label: {
show: true,
},
},
itemStyle: {
areaColor: "#0e2152", // 上层地图颜色
},
data: [],
},
],
};
if (upperChart) {
upperChart.setOption(option);
}
}
function initLowerChart() {
echarts.registerMap("chinaMap", mapData);
const option: echarts.EChartsOption = {
backgroundColor: "transparent",
tooltip: {
trigger: "item",
formatter: (params: any) => {
return `地区名称: ${params.name}<br/>ID: ${params.dataIndex}`;
},
},
series: [
{
type: "map",
map: "chinaMap",
roam: false,
emphasis: {
label: {
show: true,
},
},
itemStyle: {
areaColor: "#80bdffff", // 下层地图颜色
},
label: {
show: true,
},
data: [],
},
],
};
if (lowerChart) {
lowerChart.setOption(option);
}
}
// 点击具体省份的点击事件
function addClickEventListener() {
if (lowerChart) {
lowerChart.on("click", (params: any) => {
if (params.name) {
console.log("点击了上层地图区域：" + params.name);
}
});
}
}
onMounted(() => {
upperChart = echarts.init(upperChartContainer.value!);
lowerChart = echarts.init(lowerChartContainer.value!);
initUpperChart();
initLowerChart();
addClickEventListener();
});
onBeforeUnmount(() => {
if (upperChart) {
upperChart.dispose();
upperChart = null;
}
if (lowerChart) {
lowerChart.dispose();
lowerChart = null;
}
});
</script>
<style scoped>
.chart-container {
width: 100%;
}
.upper-chart {
width: 100%;
height: 100%;
}
.lower-chart {
width: 100%;
height: 100%;
transform: translateY(-101%) translateX(-10px);
}
</style>
\ No newline at end of file
src/views/home/components/DigitalClock.vue 0 → 100644
<template>
<div class="clock">
<span>{{ date }} {{ time }}</span>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
const time = ref<string>('');
const date = ref<string>('');
// 更新当前时间和日期
const updateDateTime = () => {
const now = new Date();
time.value = now.toLocaleTimeString(); // 格式为hh:mm:ss
date.value = `${now.getFullYear()}年${String(now.getMonth() + 1).padStart(2, '0')}月${String(now.getDate()).padStart(2, '0')}日`; // 格式为yyyy年mm月dd日
};
// 组件挂载后启动定时器
onMounted(() => {
updateDateTime();
const interval = setInterval(updateDateTime, 1000); // 每秒更新一次时间和日期
// 清理定时器，防止内存泄漏
onUnmounted(() => {
clearInterval(interval);
});
});
</script>
<style scoped>
.clock {
height: auto;
width: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: 'Arial', sans-serif;
background-color: #282c34;
color: white;
}
</style>
\ No newline at end of file
src/views/home/components/china.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/home/index.vue
<template>
<div>
home
<el-button type="primary">aa</el-button>
<div class="app-container">
<div class="header">
</div>
<div class="content">
<div class="content-aside">
</div>
<div class="content-center">
<ChinaMap style="height: 100%;" />
</div>
<div class="content-aside">
</div>
</div>
</div>
</template>
<script setup lang="ts">
import ChinaMap from './components/ChinaMap.vue'
</script>
<style lang="scss" scoped>
$header-height: 15%;
$aside-width: 25%;
.app-container {
width: 100vw;
height: 100vh;
background-color: rgb(242, 183, 183);
.header {
width: 100%;
height: $header-height;
background-color: rgb(238, 203, 158);
}
.content {
width: 100%;
height: calc(100% - $header-height);
background-color: rgb(184, 217, 246);
display: flex;
.content-aside {
width: $aside-width;
height: 100%;
background-color: aliceblue;
}
.content-center {
width: calc(100% - $aside-width * 2);
height: 100%;
background-color: antiquewhite;
}
}
}
</style>
\ No newline at end of file
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